/* ══ EUNAMOA Common Styles ══ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ── Accessibility: Skip Link ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: #efbc70;
  color: #11120f;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }

/* ── Accessibility: Focus Visible (keyboard users) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #efbc70;
  outline-offset: 2px;
  border-radius: 4px;
}
html.light a:focus-visible,
html.light button:focus-visible,
html.light input:focus-visible,
html.light textarea:focus-visible,
html.light [tabindex]:focus-visible {
  outline-color: #0f766e;
}

:root {
  /* 본문 축 — 네비·본문·홈이 모두 이 값을 쓴다. 축이 하나여야 정돈돼 보인다 (2026-07-26)
     glossary-base.css에도 같은 값이 있다. 바꿀 때 함께 바꿀 것 */
  --container: 1040px;
  --gutter: 1.5rem;

  --color-bg: #11120f;
  --color-surface: #1d1e19;
  --color-surface-hover: #282a22;
  --color-surface-dim: #0c0d0a;
  --color-surface-high: #23241d;
  --color-text: #eae7dd;
  --color-text-muted: #b9bcaf;
  --color-primary: #efbc70;
  --color-primary-dim: #d78b52;
  --color-primary-deep: #c97a3f;
  --color-on-primary: #11120f;
  --color-tertiary: #f3d4a0;
  --color-tertiary-dim: #efbc70;
  --color-border: #393a32;
  --color-outline: #a9ae9c;
  --color-practice: #fbbf24;
  /* 난이도는 순서가 있는 값이라 색이 아니라 「한 색의 농도」로 나타낸다 */
  --color-level-beginner: #f6d9a8;
  --color-level-basic: #efbc70;
  --color-level-advanced: #d78b52;
  /* 위험·나쁜 예 전용. 난이도 색을 빌려 쓰던 것을 갈랐다 */
  --color-danger: #ff716c;
  --font-headline: 'Space Grotesk', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Manrope', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-label: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.5rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  /* 움직임 (2026-07-27 통일)
     150ms는 너무 빨라 눈이 못 따라간다 — 바뀐 걸 못 느끼니 "반응이 없다"고 읽힌다.
     ease-out은 끝에서 부드럽게 멈춰 손에 반응하는 느낌을 준다.
     ⚠️ 여기가 유일한 정의다. 다른 파일에 사본을 만들지 말 것. */
  --transition-fast: 200ms ease-out;
  --transition-normal: 300ms ease-out;
}

html { scroll-behavior: smooth; scroll-padding-top: 52px; }

/* ── 스크롤 등장 (2026-07-27) ──
   화면에 들어올 때 12px 아래에서 제자리로. 거리를 작게 두는 이유가 있다 —
   3만 px을 부드럽게 스크롤하니 어지러웠다(같은 날 탭으로 바꾼 이유).
   12px은 손가락 한 마디도 안 되는 거리라 성질이 다르다.

   ⚠️ 미리 숨기지 않는다. JS가 `.reveal`을 붙인 것만 숨는다.
   JS가 죽어도 화면은 그냥 다 보인다 — 스크롤 등장의 흔한 사고를 막는다. */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal--in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

/* 움직임을 줄여달라는 설정을 존중한다. 멀미·전정기관 문제가 있는 분들이 켠다. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Page fade-in */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-content { animation: fadeIn 0.4s ease both; }

/* 입력 필드는 항상 선택 허용 */
input, textarea { -webkit-user-select: text !important; -moz-user-select: text !important; user-select: text !important; }

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  /* 한글은 낱말 단위로 줄바꿈한다. 안 하면 “바이브코
딩”처럼 꺾인다 (2026-07-26) */
  word-break: keep-all;
  overflow-wrap: break-word;
}

::selection { background: var(--color-tertiary); color: #005b51; }
[hidden] { display: none !important; }

/* ── Navigation ── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}

.nav__logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-text);
  text-decoration: none;
  text-transform: uppercase;
}

.nav__logo:hover { color: var(--color-text); }

.nav__links {
  display: flex;
  gap: var(--space-lg);
}

.nav__link {
  font-family: var(--font-label);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-outline);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Burger button - hidden on desktop */
.nav__burger { display: none; background: none; border: none; font-size: 1.4rem; color: var(--color-text-muted); cursor: pointer; padding: 0.25rem; }
.nav__burger:hover { color: var(--color-text); }

.nav__link:hover { color: var(--color-text); }
.nav__link--active { color: var(--color-tertiary-dim); border-bottom: 2px solid var(--color-tertiary-dim); padding-bottom: 2px; }

/* ── Password Gate ── */
.gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  /* safe : 내용이 화면보다 길어지면 가운데가 아니라 위로 붙는다.
     그냥 center 면 위로 넘친 부분이 음수 스크롤 자리라 스크롤로도 닿지 않는다 */
  align-items: safe center;
  justify-content: center;
  padding: 5rem var(--gutter) 3rem;
  overflow-y: auto;
  /* 옆구리 빼꼼이 좁은 화면에서 가로 스크롤을 만들지 않게 */
  overflow-x: hidden;
  /* 사이트가 종이 톤이라 문도 종이로. 전에는 문만 어둡고 들어가면 밝아 낙차가 컸다 (2026-07-26) */
  background: #f8fafc;
}

.gate__box {
  text-align: center;
  max-width: 30rem;
  width: 100%;
  /* 구석의 빼꼼 캐릭터(z-index 없음)가 본문 글 위로 올라오지 않게 */
  position: relative;
  z-index: 1;
}

/* 브랜드는 상단 네비에 이미 있다. 여기서 반복하지 않는다 (2026-07-26) */
.gate__lead {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #141c2f;
  margin-bottom: var(--space-2xl);
}

@media (max-width: 420px) {
  .gate__lead { font-size: 1.2rem; }
}

/* 넓은 화면에서 제목만 한 단계 크게 (좌우 배치는 해봤다가 원복 — 2026-07-28 은아님 "더 이상한데") */
@media (min-width: 860px) {
  .gate__lead { font-size: 1.6rem; }
}

/* ── 편집 디자인 장식 (gate.js가 심는다) — 상자 밖 빈 공간이 일하게 한다 ── */
/* 안내 문구 단어별 등장 */
.gate__lead .glw {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: gateLeadIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes gateLeadIn {
  to { opacity: 1; transform: translateY(0); }
}

/* 왼쪽 세로 라벨 + 가는 선 */
.gate-rail {
  position: absolute;
  left: calc(var(--gutter) + 0.25rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  pointer-events: none;
}
.gate-rail__label {
  writing-mode: vertical-rl;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #6b7a90;
}
.gate-rail__line { width: 1px; height: 110px; background: #d1dae5; }

/* 하단 흐름 띠 — 주제어가 천천히 흘러간다 */
.gate-ticker {
  position: absolute;
  bottom: 1.1rem;
  left: 0;
  right: 0;
  overflow: hidden;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}
.gate-ticker__track {
  display: inline-flex;
  white-space: nowrap;
  /* 네비 로고와 같은 세리프 — 각진 고딕은 띠에서 무거웠다 (2026-07-28) */
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 3.1rem;
  letter-spacing: 0.02em;
  color: #141c2f;
  animation: gateTicker 60s linear infinite;
}
@keyframes gateTicker {
  to { transform: translateX(-50%); }
}

/* 좁은 화면: 큰 글자·세로 라벨은 소음이 된다 */
@media (max-width: 1099px) {
  .gate-rail { display: none; }
}
@media (max-width: 859px) {
  .gate-ticker__track { font-size: 2.1rem; }
}

/* 움직임 줄이기: 등장·흐름 전부 정지 */
@media (prefers-reduced-motion: reduce) {
  .gate__lead .glw { animation: none; opacity: 1; transform: none; }
  .gate-ticker__track { animation: none; }
}

/* ── 하나 빼꼼 — 마크업은 gate.js가 만든다 (게이트 HTML이 13개 페이지 인라인이라 JS 한 곳에서) ──
   카드 뒤·화면 구석에서 뿅 나타났다 사라진다. 탄성 이징이 만화 느낌의 핵심 */
.hana-peek {
  position: absolute;
  line-height: 0;
  pointer-events: none;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 하단 띠·배경 글자보다 앞에 — 하나가 글자 뒤로 숨으면 안 된다 (2026-07-28) */
  z-index: 2;
}
.hana-peek img { width: 100%; height: auto; display: block; transform-origin: 50% 100%; }
/* 나타나 있는 동안만 누를 수 있다 */
.hana-peek--on { pointer-events: auto; cursor: pointer; }
/* 누르면 콩! — 자리 transform과 겹치지 않게 그림에만 건다 */
.hana-peek--joy img { animation: hanaJoy 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hanaJoy {
  0% { transform: scale(1); }
  35% { transform: scale(1.18) rotate(-4deg); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* 상주 자리 — 카드 무리 오른쪽 바깥에 온몸으로 선다.
   반쯤 잘린 빼꼼은 숨은 건지 잘린 건지 모호했다 (2026-07-28 은아님 지적) */
.hana-peek--home { width: 116px; right: -128px; bottom: 4px; transform-origin: 50% 100%; transform: scale(0) rotate(3deg); }
.hana-peek--home.hana-peek--on { transform: scale(1) rotate(0deg); }
/* 비밀번호 입력 중: 카드 쪽으로 몸을 기울여 구경 — 숨어 있었어도 나온다 */
.hana-peek--home.hana-peek--peer { transform: scale(1) rotate(-7deg) translateX(-10px); pointer-events: auto; cursor: pointer; }

.hana-peek--bl { width: 104px; left: 3vw; bottom: 18px; transform-origin: 50% 100%; transform: scale(0) rotate(-8deg); }
.hana-peek--bl.hana-peek--on { transform: scale(1) rotate(-4deg); }

.hana-peek--right { width: 92px; right: 14px; top: 55%; transform-origin: 100% 60%; transform: scale(0) rotate(10deg); }
.hana-peek--right.hana-peek--on { transform: scale(1) rotate(6deg); }

.hana-peek--br { width: 100px; right: 4vw; bottom: 16px; transform-origin: 50% 100%; transform: scale(0) rotate(7deg); }
.hana-peek--br.hana-peek--on { transform: scale(1) rotate(3deg); }

/* 좁은 화면: 카드 옆에 둘 공간이 없다 → 카드 아래 오른쪽에 선다. 게이트 아래 여백을 그만큼 확보 */
@media (max-width: 859px) {
  .gate { padding-bottom: 9rem; }
  .hana-peek--home { right: 8px; bottom: -104px; width: 86px; }
}

@media (max-width: 480px) {
  .hana-peek--home { width: 74px; }
  .hana-peek--bl, .hana-peek--br { width: 74px; }
  .hana-peek--right { width: 70px; }
}

/* 곰발 도장 — 연한 노랑으로 찍혔다가 스르르 사라진다 */
.hana-paw {
  position: absolute;
  width: 26px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}
.hana-paw svg { display: block; width: 100%; height: auto; }
.hana-paw--on { opacity: 0.45; }
.hana-paw--fade { opacity: 0; transition: opacity 0.7s ease-out; }

/* 입장 연출 다다다다 — 발밑 기준으로 뿅 커졌다 쏙 */
.hana-burst {
  position: absolute;
  line-height: 0;
  pointer-events: none;
  transform: scale(0);
  transform-origin: 50% 100%;
  transition: transform 0.17s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hana-burst img { width: 100%; height: auto; display: block; }
.hana-burst--on { transform: scale(1); }

/* ── 열린 길 (처음 오신 분) — 먼저 보여준다 ── */
.gate__open {
  padding: var(--space-xl) var(--space-lg);
  /* 카드와 같은 흰 바탕. 크림(#fffdf8)은 베이지 배경 시절의 잔재라 슬레이트 바탕 위에서 누렇게 보였다 (2026-09-15) */
  background: #fff;
  border: 1px solid #dee5ed;
  border-radius: 14px;
  margin-bottom: var(--space-xl);
  /* 바닥 그림자로만 띄운다. inset 음영(도톰함)은 광택 버튼 문법이라 뺐다 (2026-09-09) */
  box-shadow:
    0 1px 2px rgba(20, 28, 47, 0.05),
    0 10px 26px -18px rgba(20, 28, 47, 0.20);
  /* 카드 뒤 빼꼼의 기준점. z-index를 주면 안 된다 — 주는 순간 뒤(-1)가 카드 앞으로 나온다 */
  position: relative;
}

.gate__open-title {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  color: #141c2f;
  margin-bottom: var(--space-sm);
}

.gate__open-desc {
  font-size: var(--font-size-sm);
  color: #334155;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  word-break: keep-all;
}

/* 화면에는 안 보이고 낭독기만 읽는 라벨. 폼 입력칸에 placeholder 만 있으면
   글자를 넣는 순간 안내가 사라지고 낭독기가 칸 이름을 못 읽는다 (2026-09-19) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.gate__open-btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-headline);
  font-size: var(--font-size-sm);
  font-weight: 600;
  /* 보조 — 채운 잉크는 주된 길(입장)보다 먼저 읽혔다. 테두리만 남긴다 (2026-09-19) */
  color: #141c2f;
  background: transparent;
  border: 1px solid #b4c0cf;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.gate__open-btn:hover {
  background: rgba(20, 28, 47, 0.06);
  transform: translateY(-1px);
}

/* ── 수강생 ── */
.gate__member {
  padding: var(--space-xl) var(--space-lg);
  background: #fff;
  border: 1px solid #dee5ed;
  border-radius: 14px;
  /* 열린 길 카드보다 낮게 뜬다 — 주인공은 위 카드다 */
  box-shadow:
    0 1px 2px rgba(20, 28, 47, 0.04),
    0 8px 20px -16px rgba(20, 28, 47, 0.16);
  /* 하나 구경 자리의 기준점. z-index를 주면 안 된다 — 뒤(-1)가 앞으로 나온다 */
  position: relative;
  transition: border-color var(--transition-fast);
}
.gate__member:focus-within { border-color: #c4b0ff; }

.gate__member-title {
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: var(--space-md);
}

.gate__form {
  display: flex;
  gap: 0.5rem;
  max-width: 22rem;
  margin: 0 auto var(--space-sm);
}

.gate__input {
  /* flex: 1(= basis 0%)로 두면 모바일에서 form이 column으로 바뀔 때
     basis가 세로축에 걸려 height를 이긴다. 실제로 46px가 21px로 눌려 있었다 (2026-09-09) */
  flex: 1 1 auto;
  height: 46px;
  min-height: 46px;
  padding: 0 1rem;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: #141c2f;
  background: #fff;
  border: 1px solid #d1dae5;
  border-radius: var(--radius-lg);
  outline: none;
  /* 살짝 파인 입력창 — 클레이 카드와 짝 */
  box-shadow: inset 0 2px 4px rgba(20, 28, 47, 0.05);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gate__input::placeholder { color: #6b7a90; }
.gate__input:focus { border-color: #c2763f; box-shadow: inset 0 2px 4px rgba(20, 28, 47, 0.04), 0 0 0 3px rgba(194, 118, 63, 0.18); }

.gate__btn {
  height: 46px;
  padding: 0 1.25rem;
  font-family: var(--font-headline);
  font-size: var(--font-size-sm);
  font-weight: 600;
  /* 주된 길 — 브랜드 오렌지를 밝은 바탕용으로 낮춘 값. 잉크 글자와 6.6:1 (2026-09-19) */
  color: #11120f;
  background: #d78b52;
  border: 1px solid #d78b52;
  border-radius: var(--radius-lg);
  cursor: pointer;
  /* 카드·버튼과 같은 결로 납작하게. inset 음영을 두면 옆 버튼만 도톰해 어긋난다 */
  box-shadow: 0 1px 2px rgba(20, 28, 47, 0.05);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.gate__btn:hover { background: #c2763f; border-color: #c2763f; color: #fff; }

.gate__error {
  font-size: 0.78rem;
  /* #dc2626은 종이 배경에서 4.5:1에 못 미친다 → 한 단계 진하게 */
  color: #b91c1c;
  margin-bottom: var(--space-sm);
}

/* 두 길 사이 "또는" — gate.js가 심는다 */
.gate__or {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 22rem;
  margin: calc(-1 * var(--space-sm)) auto var(--space-lg);
  color: #6b7a90;
  font-size: 0.78rem;
}
.gate__or::before, .gate__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d1dae5;
}

.gate__member-desc {
  font-size: 0.78rem;
  color: #5a697f;
}

/* 비밀번호가 틀리면 입력줄이 도리도리 */
.gate__form--shake { animation: gateShake 0.4s ease-out; }
@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@media (max-width: 480px) {
  .gate { padding-top: 4.5rem; }
  .gate__member { padding: var(--space-lg) var(--space-md); }
  .gate__form { flex-direction: column; }
  .gate__btn { width: 100%; }
  /* 손가락으로 누르는 화면이다. 높이를 넉넉히 주고, 글자는 16px로 올린다 —
     iOS 사파리는 입력 글자가 16px보다 작으면 탭할 때 화면을 확대해 버린다 */
  .gate__input, .gate__btn { height: 52px; min-height: 52px; font-size: 1rem; }
  .gate__open-btn { padding: 0.85rem 1.4rem; font-size: 0.95rem; }
}

/* 게이트 화면 상단 네비 — 게이트가 종이 톤이 되어 함께 맞췄다 (2026-07-26) */
#gateNav .nav__logo, #gateNav .nav__burger { color: #141c2f; }
#gateNav .nav__link { color: #334155; }   /* 홈 메뉴(밝은 화면)와 같은 값. 게이트는 다크에서도 밝은 한 벌이라 변수를 쓰지 않는다 */
#gateNav .nav__link:hover { color: #141c2f; }
html.light #gateNav .nav__logo, html.light #gateNav .nav__burger { color: #141c2f; }
html.light #gateNav .nav__link { color: #334155; }
html.light #gateNav .nav__link:hover { color: #141c2f; }
/* 지금 페이지 — html.light #gateNav .nav__link(1,2,1: .light 도 클래스다)보다 높게 */
html.light #gateNav .nav__link.nav__link--active, #gateNav .nav__link.nav__link--active { color: #141c2f; border-bottom-color: #141c2f; }

/* ── Footer ── */
.footer { text-align: center; padding: var(--space-xl) var(--space-lg); border-top: 1px solid rgba(57, 58, 50,0.25); margin-top: var(--space-3xl); background: rgba(2,6,24,0.5); }
.footer__line { font-family: var(--font-label); font-size: 0.8rem; color: var(--color-outline); letter-spacing: 0.01em; }
.footer__sep { margin: 0 0.5rem; opacity: 0.4; }
.footer__link { color: var(--color-outline); text-decoration: none; transition: color var(--transition-fast); }
.footer__link:hover { color: var(--color-tertiary-dim); }
.footer__nav { font-family: var(--font-label); font-size: 0.85rem; letter-spacing: 0.02em; margin-bottom: 0.75rem; }
.footer__nav .footer__link { color: rgba(180,188,220,0.85); font-weight: 500; }
.footer__nav .footer__link:hover { color: var(--color-tertiary); }

/* ── FAB Buttons ── */
.fab { position: fixed; bottom: var(--space-xl); right: var(--space-xl); z-index: 90; display: flex; flex-direction: column; gap: var(--space-sm); }
.fab__btn { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.fab__btn:hover { transform: translateY(-2px); }
.fab__btn--home { color: #fff; background: rgba(109,115,157,0.7); backdrop-filter: blur(8px); }
.fab__btn--home:hover { background: rgba(109,115,157,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.fab__btn--dark { color: #fff; background: rgba(109,115,157,0.7); backdrop-filter: blur(8px); }
.fab__btn--dark:hover { background: rgba(109,115,157,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.fab__btn--weather { color: #efbc70; background: rgba(109,115,157,0.7); backdrop-filter: blur(8px); }
.fab__btn--weather:hover { color: #fff; background: rgba(109,115,157,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.fab__btn--top { color: #fff; background: #2563eb; }
.fab__btn--top:hover { background: #1d4ed8; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }

/* FAB Tooltip */
.fab__btn::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 0.35rem 0.75rem;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}
.fab__btn:hover::after { opacity: 1; }

/* ── Light Mode ── */
html.light {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-hover: #edf1f7;
  --color-surface-dim: #e7edf3;
  --color-surface-high: #f0f4f9;
  --color-text: #141c2f;
  --color-text-muted: #334155;
  --color-primary: #7c4dff;
  --color-primary-dim: #6234cc;
  --color-primary-deep: #4a1fa6;
  --color-on-primary: #ffffff;
  --color-tertiary: #0d9488;
  --color-tertiary-dim: #0f766e;
  --color-border: #d1dae5;
  --color-outline: #5a697f;
  --color-ai: #7c4dff;
  --color-prompt: #334155;
  --color-tools: #0d9488;
  --color-practice: #d97706;
  --color-level-beginner: #a78bfa;
  --color-level-basic: #7c4dff;
  --color-level-advanced: #4a1fa6;
  --color-danger: #b91c1c;  /* #dc2626 은 종이 배경에서 4.55:1 로 아슬아슬하다 */
  --color-card-bg: rgba(255, 255, 255, 0.85);
  --color-card-border: rgba(209, 218, 229, 0.8);
}

html.light ::selection { background: #7c4dff; color: #fff; }
/* 게이트는 2026-07-26부터 종이 톤이다. 다크 토큰 덮어쓰기를 걷어냈다 */
html.light .nav__logo { color: var(--color-text); }
html.light .nav__link { color: var(--color-text-muted); }
html.light .nav__link:hover { color: #141c2f; }
html.light .nav__link--active { color: var(--color-text); border-bottom-color: var(--color-text); }   /* 청록 → 잉크 (2026-09-11 홈 개편) */
html.light .footer { background: rgba(234, 238, 244, 0.8); border-color: var(--color-border); }
html.light .footer__line { color: var(--color-text-muted); }
html.light .footer__link { color: var(--color-text-muted); }
html.light .footer__link:hover { color: var(--color-tertiary); }
html.light .footer__nav .footer__link { color: var(--color-text); }
html.light .footer__nav .footer__link:hover { color: var(--color-tertiary); }
html.light .fab__btn--home, html.light .fab__btn--dark, html.light .fab__btn--weather { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
html.light .fab__btn--home:hover, html.light .fab__btn--dark:hover, html.light .fab__btn--weather:hover { background: #f8fafc; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
html.light .fab__btn--top { background: var(--color-primary); }
html.light .fab__btn--weather { color: #0f766e; }
html.light .fab__btn--weather:hover { color: var(--color-primary); }
html.light .fab__btn::after { background: #fff; border-color: var(--color-border); color: var(--color-text); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* ── Responsive Common ── */
@media (max-width: 480px) {
  .gate__form { max-width: 100%; }
  .nav { padding: var(--space-md); flex-wrap: wrap; }
  .nav__burger { display: block; }
  .nav__links { display: none; width: 100%; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-border); margin-top: var(--space-sm); }
  .nav__links--open { display: flex; }
  .nav__link { font-size: var(--font-size-sm); padding: var(--space-sm) 0; }
  .footer__line { font-size: 0.8rem; }
  .footer__sep { display: none; }
  .footer__line { display: flex; flex-direction: column; gap: 0.25rem; }
}

/* ── 아이콘 시스템 (라인 아이콘 · 브랜드 퍼플) ──
   data-icon 자리표시자에 js/icons.js가 SVG를 주입.
   색은 currentColor → var(--color-primary)로 다크/라이트 자동 대응. */
.home-card__icon,
.tabs__icon,
.icon {
  color: var(--color-primary);
  line-height: 0;
}

.home-card__icon {
  display: flex;
  align-items: center;
}

.home-card__icon svg {
  width: 2rem;
  height: 2rem;
  display: block;
}

.home-card--small .home-card__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.tabs__icon svg {
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: -0.15em;
}

.icon svg {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: -0.2em;
}

/* COMING SOON 카드는 아이콘도 톤다운 */
.home-card--disabled .home-card__icon {
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* ── 날씨 FAB (2026-07-27) ──
   묶음 맨 위. 다른 버튼은 도구(맨 위로·모드 전환)라 가만히 있고,
   날씨만 아주 조금 떠 있어 "눌러볼 것"으로 읽힌다.
   3px·5초. 크게 움직이면 어지럽다 — 거리는 손톱만 하게.
   ⚠️ 흔들림은 animation, 마우스 반응은 색·그림자로 나눈다.
      둘 다 transform을 쓰면 서로 덮어써 흔들림이 끊긴다. */
.fab__btn--weather {
  text-decoration: none;
  animation: fabWeatherBob 5s ease-in-out infinite;
}
@keyframes fabWeatherBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* 비밀번호 화면 단추 넷(#gateFab, 오른쪽 아래 기둥)과 캐릭터가 겹치지 않게 — 오른쪽 자리 둘을 안쪽으로 (2026-09-13) */
.hana-peek--right { right: 84px; }
.hana-peek--br { right: calc(4vw + 72px); }
@media (max-width: 640px) { .hana-peek--right, .hana-peek--br { display: none; } }

/* 비밀번호 화면 단추 — 좁은 화면에서는 홈만. 넷을 쌓으면 비밀번호 상자를 덮는다 (2026-09-13 모바일 실측) */
@media (max-width: 480px) { #gateFab .fab__btn--weather, #gateFab .fab__btn--dark, #gateFab .fab__btn--top { display: none; } }