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

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

: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", 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: 14px; min-height: 60px; }
.brand {
  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; }

/* 내비 — 가로 스크롤 가능(모바일에서 탭 5개가 줄바꿈되지 않게) */
.nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.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); }

/* 언어 전환 — 셀렉트 하나. 4개를 버튼으로 늘어놓으면 모바일 헤더가 터진다. */
.lang-select {
  min-height: var(--touch); padding: 0 10px;
  background: rgba(245,237,224,.08);
  color: var(--cream);
  border: 1px solid rgba(201,150,63,.42);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: .92rem;
  cursor: pointer;
}
.lang-select option { color: #000; }  /* 네이티브 드롭다운은 흰 배경이다 */

/* ═══ 차양 스트라이프 ══════════════════════════════════════════════════════
   게임 상점의 시그니처를 웹 문법으로 옮긴 것 — 섹션 구분자.
   세로 줄무늬 + 아래쪽 반원 스캘럽. 이미지 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-links a { color: var(--cream); }

/* ═══ 상태 ════════════════════════════════════════════════════════════════ */
.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; }

  /* 🚨헤더를 두 줄로 나눈다 — 한 줄에 두면 브랜드(≈75px)+언어셀렉트(≈95px)가 먼저 먹어
     내비가 "Home | Guide | Ite…" 로 잘린다. 가로 스크롤은 되지만 ★스크롤된다는 신호가 없어★
     탭이 3개뿐인 것으로 읽힌다(375px 실측에서 확인).
     wrap + 내비 order:3 + width:100% 로 내비가 둘째 줄 전체를 쓰게 한다. */
  .header-row { flex-wrap: wrap; row-gap: 4px; padding-block: 8px; }
  /* 🚨내비도 ★여러 줄로 접는다★. 두 줄 헤더만으로는 부족했다 — 탭이 5개에서 7개(스토리·츄르로드)로
     늘면서 375px 에서 다시 넘쳤고, 이번엔 하필 ★현재 페이지 탭이 화면 밖★으로 밀렸다
     (실측: Ranking x=363 > 화면 375). 가로 스크롤로는 그 사실이 보이지 않는다. */
  .nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; row-gap: 2px; overflow-x: visible; }
  .lang-select { margin-left: auto; }  /* 첫 줄에서 브랜드와 반대쪽 끝으로 */
}