/* ═══════════════════════════════════════════════════════════════════════════
   킥캣 공식 사이트 — 공용 스타일 (단일 출처)
   설계서: docs/superpowers/specs/2026-08-29-kickcat-website-design.md

   ⚠️색·간격을 페이지에 복제하지 말 것. 여기가 정본이다.
     (개편 전에는 5개 페이지가 각자 :root 를 복제해, 색 하나 바꾸려면 5곳을 고쳐야 했다.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 제목 폰트 — Jua 셀프호스트 서브셋(tools/build_fonts.js) + 메트릭 폴백 ═══
   size-adjust 는 Jua vs Malgun Gothic 실측 근사 — 스왑 시 줄 수만 같으면 CLS 0 이다. */
@font-face { font-family: "Jua"; src: url("/assets/fonts/jua-subset.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jua Fallback"; src: local("Malgun Gothic"), local("Apple SD Gothic Neo"), local("Noto Sans KR"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }

:root {
  /* ── 팔레트 — 게임 로비와 같은 값 ─────────────────────────────────────── */
  --amber:  #FFB547;  /* 주강조: 활성 탭, CTA */
  --gold:   #C9963F;  /* 앰버의 가라앉은 짝 — 테두리·구분선 */
  --dusk:   #2B2420;  /* 배경(노을 진 골목) */
  --dusk-2: #221C19;  /* 배경보다 한 단 깊음 — 헤더·푸터 */
  --cream:  #F5EDE0;  /* 카드 표면 / 어두운 배경 위 본문 */
  --cream-2:#EFE3CB;  /* 카드 하단 그라데 근사 */
  --ink:    #3E2723;  /* 크림 위 본문 */
  --ink-2:  #4A2B12;  /* 크림 위 보조 텍스트 */
  --wood:   #5D4030;  /* 나무 팻말 */
  --wood-hi:#7C563E;  /* 팻말 하이라이트 */
  /* 보조 강조 — 앰버 일색이 되지 않게 한다(팔레트 다차원성) */
  --sage:   #7FA65A;  /* ⚠️정본. 구 #6B9E5E 는 2026-07-17 폐기된 값이다 */
  --clay:   #C0564A;
  /* 중립 */
  --line:   #E2D5BF;
  --muted:  #6B5342;
  --muted-on-dark: #C9BBA9;

  /* ── 순위 램프 ─────────────────────────────────────────────────────────
     🚫한색(은색·청동의 푸른 기) 금지 — 게임 티어 팔레트가 warm ramp 정본이라
       사이트에 차가운 은/동을 쓰면 두 세계가 갈린다. 금 → 따뜻한 백랍 → 구리로 간다. */
  --rank-1:    #F0C33C;   --rank-1-hi: #FFE08A;
  --rank-2:    #A8907A;   --rank-2-hi: #D6C4AE;   /* 크림 카드 위에서 읽히도록 한 단 짙게(실측) */
  --rank-3:    #C08552;   --rank-3-hi: #DCA878;

  /* ── 치수 ─────────────────────────────────────────────────────────────── */
  --wrap:   1080px;   /* 본문 최대 폭 — 게임 캔버스 레퍼런스와 같은 숫자(우연 아님) */
  --gap:    20px;
  --radius: 14px;
  --radius-sm: 9px;
  --touch:  44px;     /* 최소 터치 타깃(CSS px). 웹은 CSS px = dp 라 44 가 권고치 */

  /* ── 타이포 ───────────────────────────────────────────────────────────── */
  /* 본문은 시스템 스택 — 4언어(kr/en/jp/ch)를 각 기기가 가장 잘 렌더한다.
     Noto 4종을 로드하면 수백 KB 씩 붙는데 얻는 게 없다. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
               "Noto Sans KR", "Malgun Gothic", "Hiragino Sans", "Yu Gothic",
               "Microsoft JhengHei", sans-serif;
  /* 제목만 둥근 한글 서체. 일본어·번체에서는 자연스럽게 시스템 폰트로 폴백된다. */
  --font-display: "Jua", "Jua Fallback", var(--font-body);
}

/* ── 리셋 ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--dusk);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;    /* 한글이 어절 중간에서 끊기지 않게 */
  overflow-wrap: anywhere; /* 그래도 넘치면 강제 줄바꿈(긴 URL·닉네임) */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

/* ── 레이아웃 ──────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 18px; }
main  { padding-block: 28px 64px; }
.stack > * + * { margin-top: var(--gap); }

/* ═══ 헤더 ════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--dusk-2);
  border-bottom: 1px solid rgba(201,150,63,.32);
}
.header-row { display: flex; align-items: center; gap: 10px; min-height: 60px; }
/* ⚠️브랜드도 --touch 를 지킨다 — 인라인이면 31px 라 프로브 44px 검사에 걸린다. */
.brand {
  display: inline-flex; align-items: center; min-height: var(--touch); flex: none;
  font-family: var(--font-display);
  font-size: 1.32rem; letter-spacing: .01em;
  color: var(--amber); text-decoration: none; white-space: nowrap;
}
.brand:hover { text-decoration: none; }

/* 내비 — 1199px 이하에서는 숨고 햄버거가 대신한다(맨 아래 @media (max-width: 1199px)).
   1200px 이상에서도 일본어처럼 탭 문자열이 긴 언어는 여전히 넘치는데 스크롤바를 숨겨 두었으므로
   ★끝 페이드가 유일한 "더 있음" 신호★다. 지우지 말 것. */
.nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent); }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  display: inline-flex; align-items: center;
  min-height: var(--touch); padding: 0 13px;
  border-radius: var(--radius-sm);
  color: var(--cream); font-weight: 600; font-size: .95rem;
  white-space: nowrap; text-decoration: none;
}
.nav a:hover { background: rgba(245,237,224,.09); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--amber); color: var(--ink); }

/* ═══ 정적 내비(R2, fix wave 에서 no-js 스코프로 재조정) ═══ head.js 가 빈 <header data-site-header>
   를 이 마크업으로 채운다 — 크롤러·No-JS 방문자용 폴백이다. mountChrome 은 헤더 innerHTML 을
   통째로 갈아끼우지만, ★그 전까지도★ 이 nav 가 DOM 에 존재해(:empty 무효화) 화면에 얹혀 있다가
   사라지며 본문을 밀어낸다(도감 CLS 0.064→0.896 회귀). 그래서 JS 사용자에게는 애초에 안 보이게
   기본값을 display:none 으로 두고, html.no-js(=head.js 최상단 스크립트가 아직 못 바꾼 상태 —
   즉 JS 가 죽었거나 아직 안 도는 상태)에서만 flex 로 보인다. */
.nav-static { display: none; }
html.no-js .nav-static { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 16px; }
.nav-static a { color: var(--cream); min-height: var(--touch); display: inline-flex; align-items: center; }

/* ═══ 헤더 컨트롤(R1) ═══ 구 .lang-select 폐기(크롤러가 못 봤다) → ★진짜 <a>★ popover. */
.helmet-btn, .menu-btn, .lang-btn, .fx-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--touch); min-height: var(--touch); padding: 0 10px; flex: none;
  border-radius: var(--radius-sm); background: rgba(245,237,224,.08); border: 1px solid rgba(201,150,63,.42);
  color: var(--cream); cursor: pointer; font: inherit; font-size: .92rem;
}
.helmet-btn, .menu-btn { padding: 0; width: var(--touch); }
.helmet-btn:hover, .menu-btn:hover, .lang-btn:hover, .fx-toggle:hover, .sfx-btn:hover { background: rgba(245,237,224,.16); }
.fx-toggle[aria-pressed="false"] { opacity: .55; }
.sfx-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); min-height: var(--touch); padding: 0; flex: none; border-radius: var(--radius-sm); background: rgba(245,237,224,.08); border: 1px solid rgba(201,150,63,.42); color: var(--cream); cursor: pointer; }
.sfx-btn[aria-pressed="false"] { opacity: .55; }
.helmet-btn[aria-pressed="false"] svg { filter: grayscale(.85) opacity(.6); }
.helmet-btn[aria-pressed="true"] { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(255,181,71,.25); }
.ctrl { display: flex; align-items: center; gap: 8px; margin-left: auto; position: relative; }
.menu-btn { display: none; }
.lang-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: flex; flex-direction: column; min-width: 160px;
  padding: 6px; border-radius: var(--radius-sm); background: var(--dusk-2); border: 1px solid rgba(201,150,63,.42); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.lang-pop[hidden] { display: none; }
.lang-pop a { display: flex; align-items: center; min-height: var(--touch); padding: 0 12px; border-radius: 6px; color: var(--cream); text-decoration: none; }
.lang-pop a:hover { background: rgba(245,237,224,.09); }
.lang-pop a[aria-current] { color: var(--amber); }

/* 햄버거 — 네이티브 <dialog>. showModal 이 포커스 트랩·Escape·백드롭을 준다. */
.site-menu { border: 0; padding: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--dusk-2); color: var(--cream); }
/* 🚨<dialog> 미지원 브라우저는 이 요소를 ★평범한 블록★ 으로 그린다 — 닫힌 메뉴가 모든 페이지
   맨 아래에 통째로 펼쳐진다(site.js 는 showModal 이 없으면 open 속성만 토글하므로 CSS 가 숨겨야 한다). */
.site-menu:not([open]) { display: none; }
.site-menu::backdrop { background: rgba(0,0,0,.55); }
/* 메뉴가 열린 동안 뒤 문서가 스크롤되지 않게 잠근다. site.js 가 여는·닫는 양쪽에서 <html data-menu>
   를 세우고 지우는데(dialog 의 close 이벤트까지 포함) 정작 그 값을 읽는 규칙이 없어 죽어 있었다. */
html[data-menu="open"] { overflow: hidden; }
.menu-close { position: absolute; right: 12px; top: 12px; width: var(--touch); height: var(--touch); border: 1px solid rgba(201,150,63,.42); border-radius: var(--radius-sm); background: transparent; color: var(--cream); font-size: 1.6rem; cursor: pointer; }
.menu-nav { display: flex; flex-direction: column; padding: 64px 20px 12px; gap: 4px; }
.menu-link { display: flex; align-items: center; min-height: 52px; padding: 0 14px; border-radius: var(--radius-sm); color: var(--cream); font-family: var(--font-display); font-size: 1.3rem; text-decoration: none; }
.menu-link[aria-current="page"] { background: var(--amber); color: var(--ink); }
/* 메뉴 안 언어 알약은 .chip-link 와 같은 모양이다 — 아래 칩 규칙이 함께 소유한다. */
.menu-langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 28px; }

/* ═══ 차양 스트라이프 ══════════════════════════════════════════════════════
   게임 상점의 시그니처를 웹 문법으로 옮긴 것 — 섹션 구분자.
   세로 줄무늬 + 아래쪽 반원 스캘럽. 이미지 0장으로 만든다. */
.awning {
  height: 26px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 26px, var(--cream) 26px 52px);
  -webkit-mask-image: radial-gradient(circle at 13px 0, transparent 0 12px, #000 12.5px);
          mask-image: radial-gradient(circle at 13px 0, transparent 0 12px, #000 12.5px);
  -webkit-mask-size: 26px 26px;
          mask-size: 26px 26px;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
}

/* ═══ 나무 팻말 — 페이지 타이틀 ═══════════════════════════════════════════ */
.sign {
  display: inline-block;
  padding: 9px 20px;
  background: linear-gradient(180deg, var(--wood-hi), var(--wood));
  border: 2px solid rgba(0,0,0,.28);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  font-family: var(--font-display);
  font-size: 1.55rem; line-height: 1.35;
  color: var(--cream);
}

/* ═══ 카드 ════════════════════════════════════════════════════════════════ */
.card {
  background: linear-gradient(180deg, var(--cream), var(--cream-2));
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card h2, .card h3 { font-family: var(--font-display); margin: 0 0 8px; line-height: 1.35; }
.card h2 { font-size: 1.22rem; }
.card h3 { font-size: 1.06rem; }
.card p  { margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }
.card a  { color: var(--ink-2); text-decoration: underline; }
.muted   { color: var(--muted); }
.muted-dark { color: var(--muted-on-dark); }

/* 그리드 — minmax 로 열 수를 폭이 결정하게 둔다(브레이크포인트 불필요) */
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ═══ 아이템 칩 — 그림 + 이름 ══════════════════════════════════════════════
   랭킹과 도감이 함께 쓴다. 그림은 tools/build_site_images.js 산출물(96px WebP). */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 3px; border-radius: 999px;
  background: rgba(93,64,48,.1); color: var(--ink-2); font-size: .78rem;
  max-width: 100%; vertical-align: middle;
}
.chip img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.none { padding-left: 8px; opacity: .5; }

/* ═══ 배지 ════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-block; padding: 2px 9px;
  border-radius: 999px;
  font-size: .8rem; font-weight: 700; line-height: 1.6;
  background: var(--gold); color: #fff;
}
.badge--sage { background: var(--sage); }
.badge--clay { background: var(--clay); }

/* ═══ 표 — 랭킹·아이템이 공유한다 ═════════════════════════════════════════ */
/* ⚠️표는 반드시 자기 컨테이너 안에서 가로 스크롤해야 한다. 본문이 옆으로 밀리면 안 된다. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; min-width: 520px;
  border-collapse: collapse;
  background: var(--cream); color: var(--ink);
  border-radius: var(--radius); overflow: hidden;
}
table.data th, table.data td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); }
/* 🚨좁은 화면에서 열 폭이 줄면 머리글이 ★단어 중간에서★ 쪼개진다("Ra/nk", "Scor/e" — 375px 실측).
   표는 이미 .table-scroll 로 가로 스크롤되므로, 쪼개는 대신 넘치게 두는 편이 언제나 읽기 쉽다. */
table.data th { background: var(--wood); color: var(--cream); font-family: var(--font-display); font-weight: 400; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(2n) td { background: rgba(93,64,48,.045); }
/* 숫자 열은 자릿수를 맞춰 세로로 정렬시킨다 */
/* 숫자는 절대 접지 않는다 — "9.22Qi" 가 두 줄로 갈리면 값이 두 개인 것처럼 읽힌다. */
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ═══ 버튼 ════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: 0 20px;
  border: 0; border-radius: var(--radius-sm);
  background: var(--amber); color: var(--ink);
  font-family: var(--font-display); font-size: 1rem;
  cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--cream); border: 1px solid rgba(201,150,63,.5); }

/* ═══ 푸터 ════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--dusk-2);
  border-top: 1px solid rgba(201,150,63,.32);
  padding-block: 22px 30px;
  font-size: .9rem; color: var(--muted-on-dark);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.footer-langs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
/* ⚠️푸터 링크도 크롬이다 — 인라인이면 24px 라 손가락에 안 잡힌다. */
.footer-links a, .footer-langs a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--cream); }
.footer-langs a[aria-current] { color: var(--amber); }
/* 잠든 고양이 — 푸터 장식. fx off 면 정지. */
.footer-cat { position: relative; width: 96px; margin: 0 0 8px; }
.footer-cat img { width: 96px; height: 96px; display: block; }
.footer-cat .zzz { position: absolute; left: 88px; top: 0; font-family: var(--font-display); color: var(--amber); font-size: .9rem; animation: kc-zzz 2.6s ease-in-out infinite; }
@keyframes kc-zzz { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }
html[data-fx="off"] .footer-cat .zzz { animation: none; }
/* ═══ 브레드크럼·카테고리 칩 — 블로그 목록·카테고리·글 페이지가 공유한다 ═══════ */
/* 셋 다 어두운 배경(.wrap) 위에 놓인다 — 카드 안이 아니므로 cream 계열로 쓴다. */
.crumbs { font-size: .9rem; color: var(--muted-on-dark); margin-bottom: 12px; }
.crumbs a { color: var(--cream); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
/* 칩은 ★손가락 크기★(var(--touch))를 지킨다 — 줄줄이 붙은 작은 알약은 모바일에서 오탭이 난다. */
.chip-link, .menu-langs a {
  display: inline-flex; align-items: center;
  min-height: var(--touch); padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(201,150,63,.5);
  color: var(--cream); font-size: .92rem; text-decoration: none;
}
.chip-link[aria-current], .menu-langs a[aria-current] { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.chip-link:hover, .menu-langs a:hover { text-decoration: none; background: rgba(245,237,224,.09); }

/* ═══ 크롬 자리 예약(CLS) ═══════════════════════════════════════════════════
   채워지기 전 0px 면 main 이 통째로 밀린다(1280 CLS 0.148). 87 = header-row 60 + 차양 26 + 테두리 1.
   R1 부터 전 폭·전 언어 한 줄이라 구 5분기는 사라졌다.
   🚨R2 fix wave: :empty → 무조건 예약으로 변경. head.js 가 빈 헤더에 정적 내비(.nav-static)를
   구우면서 헤더가 더 이상 DOM 상 :empty 가 아니게 됐다(자식 nav 는 있고, CSS 로만 숨긴다) —
   :empty 규칙은 그 순간부터 절대 안 걸려 예약이 무효화됐었다(도감 CLS 0.064→0.896 의 두 원인 중
   하나, 나머지 하나는 .nav-static 자체의 no-js 스코프 — 위 블록). 실측(site_probe.js 의
   serve()/launchChrome() 재사용, 마운트 1.5s 후 .site-header.getBoundingClientRect().height):
   /ko/ @375·@1280 모두 87px 로 동일해 폭별 분기가 필요 없었다(보고서 표 참고). */
.site-header { min-height: 87px; }

/* ═══ 상태 ════════════════════════════════════════════════════════════════ */
.empty, .loading { padding: 34px 18px; text-align: center; color: var(--muted-on-dark); }

/* ── 접근성: 모션 줄이기 존중 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── 좁은 화면 ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .brand { font-size: 1.14rem; }
  .sign  { font-size: 1.3rem; padding: 8px 16px; }
  .nav a { padding: 0 10px; font-size: .9rem; }
  /* 🚨구 두 줄 헤더(flex-wrap + .nav order:3) 폐기 — 되살리지 말 것. */
}

/* ═══ 줄바꿈 — 언어별 ═══ ko 는 어절 중간에서 안 끊는다. ja·zh-Hant 는 금칙 처리. */
html[lang="ko"] body, html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] p, html[lang="ko"] li { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ja"] body, html[lang="zh-Hant"] body { overflow-wrap: anywhere; line-break: strict; }

/* ═══ 페이지 전환 ═══ 미지원 브라우저는 이 블록을 무시한다 — 폴백이 곧 기본 동작이다. */
@view-transition { navigation: auto; }
[data-brand] { view-transition-name: kc-brand; }
::view-transition-old(root) { animation: 260ms ease-out both kc-fade-out; }
::view-transition-new(root) { animation: 360ms ease-in both kc-wipe-in; }
@keyframes kc-fade-out { to { opacity: 0; } }
@keyframes kc-wipe-in { from { clip-path: circle(0% at 50% 40%); } to { clip-path: circle(140% at 50% 40%); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* 내비 → 햄버거. 9탭 + 브랜드·헬멧·토글 3종이 한 줄에 ★실제로 드는★ 하한은 1200px 다
   (구 1024px 은 R1 크롬이 약 150px 넓어지기 전 숫자였다 — 1024~1199 에서 내비가 잘렸다).
   1200px 이상에서도 일본어처럼 탭 문자열이 긴 언어는 아슬아슬해서, site.js 가 렌더 후
   활성 탭을 scrollIntoView 로 끌어당긴다(두 장치는 짝이다 — 한쪽만 지우지 말 것). */
@media (max-width: 1199px) { .nav { display: none; } .menu-btn { display: inline-flex; } }

/* ═══ 아주 좁은 화면(≤359px) ═══════════════════════════════════════════════
   🚨R1 헤더는 브랜드 + 헬멧 + (효과 토글 · 언어 · 햄버거) 가 전부 flex:none 이라 ★줄바꿈이 없으면★
   320px 에서 가로로 넘친다(홈은 .fx-mount 에 토글이 더 붙어 최악이다). 글자를 줄여 먼저 버티고,
   그래도 모자라면 .ctrl 이 둘째 줄로 내려간다 — 가로 스크롤보다 두 줄이 언제나 낫다. */
@media (max-width: 359px) {
  .header-row { flex-wrap: wrap; row-gap: 4px; padding-block: 6px; }
  .brand { font-size: 1.05rem; }   /* 워드마크는 말줄임 금지 — 크기로만 줄인다 */
  .ctrl { margin-left: auto; }
  .lang-btn { padding: 0 6px; font-size: .85rem; }
}
/* 🚨번체만 둘째 줄로 내려간다 — 언어 버튼 라벨이 "繁體中文" 4자라 가장 넓다(실측 68px vs kr 52).
   브랜드 56 + 헬멧 44 + 컨트롤 172 + 간격 20 = 292 > 폭−패딩. 실측 전환점: 329 이하 두 줄(131px),
   330 이상 한 줄(87px). :empty 예약도 그 언어·그 폭에서만 따라간다 — 다른 언어까지 131 로
   올리면 반대 방향(위로 튀는) CLS 가 된다. Task 7 에서 효과 토글이 전 페이지에 붙으면
   홈뿐 아니라 모든 번체 페이지가 이 구간에 들어간다. */
@media (max-width: 329px) { html[data-lang="ch"] .site-header { min-height: 131px; } }

/* ═══ 페이지 톤 토큰 — 빌드가 <html data-daytime> 을 굽는다(정본: site_lib/langs.js DAYTIME) ═══
   낮 페이지(가이드·아이템·츄르로드·도감)는 밝은 면, 나머지는 노을·밤이다.
   ⚠️지금은 ★토큰만★ 둔다 — 본문에 입히는 것은 R3 이다(색을 지금 바꾸면 4언어 32장 대비 실측을
     통째로 다시 해야 한다). 소비자가 없어도 이 두 줄이 R3 의 단일 출처가 된다. */
html { --page-bg: var(--dusk); --page-ink: var(--cream); }
html[data-daytime="day"] { --page-bg: var(--cream); --page-ink: var(--ink); }

/* ═══ FAQ — 홈 외 자료 페이지(가이드·아이템·츄르로드) ═══════════════════════
   AEO 레인(fire-your-seo-agency references/aeo.md): 답변엔진이 첫 화면에서 답 문장을 찾으므로
   <details> 로 접지 않는다. 마크업을 바꾸지 말 것 — 판정기가 가시 텍스트를
   `<div class="faq"><h3>…</h3><p>…</p></div>` 모양으로 대조한다(site_judge.js I5).
   ★.faq-page 스코프 필수★ — 홈 FAQ 는 어두운 히어로 배경 기준으로 home.css 가 따로 칠한다
   (.faq-section > .wrap > .faq). 스코프를 빼면 site.css 가 홈까지 밝은 카드로 덮는다. */
.faq-page { margin-top: 28px; }
.faq-page > h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 12px; }
.faq-page > .faq {
  background: linear-gradient(180deg, var(--cream), var(--cream-2));
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 10px;
}
.faq-page > .faq h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; line-height: 1.35; margin: 0 0 6px; color: var(--ink-2); }
.faq-page > .faq p { margin: 0; }

/* ═══ 404 "길 잃은 골목" — 밤 톤 ═══ */
html[data-daytime="night"] body { background: #221C19; }
.notfound .nf-wrap { text-align: center; padding-block: 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.nf-cat { width: min(260px, 60vw); height: auto; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }