/* 구구단 탐험대 사이트 — 색은 앱 토큰(lib/theme/tokens.dart AppColors, 스타일 바이블 2장)을 CSS 변수로 옮긴 것.
   출처: paper=#FFF6E5 ink=#6B4A2B inkSoft=#8A5A2B accent=#E8833A accentEdge=#B9622B sea=#CDEBEA
         paperDeep=#F7E8C8 locked=#E3DDCF night=#3E4A6B, 단별 8색(AppColors.dan).
   다크 모드 값은 토큰에 없다 — night(#3E4A6B)에서 어둡게 파생한 사이트 전용 값. */
:root {
  --bg: #FFF6E5;          /* AppColors.paper */
  --card: #FFFFFF;        /* AppColors.parentSurface */
  --card-warm: #F7E8C8;   /* AppColors.paperDeep */
  --ink: #6B4A2B;         /* AppColors.ink */
  --sub: #8A5A2B;         /* AppColors.inkSoft */
  --border: #E3DDCF;      /* AppColors.locked */
  --accent: #E8833A;      /* AppColors.accent */
  --link: #B9622B;        /* AppColors.accentEdge — 글자색으로 쓸 때 대비 확보 */
  --on-accent: #FFF6E5;   /* AppColors.onAccent */
  --note-bg: #CDEBEA;     /* AppColors.sea */
  --note-ink: #3E4A6B;    /* AppColors.night */
  --d2: #8EC9E8; --d3: #9CCB6B; --d4: #F5B83D; --d5: #F0A060;
  --d6: #E8B84A; --d7: #E06A5A; --d8: #A98BD6; --d9: #6A7FC0;   /* AppColors.dan 2~9 */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1E2233; --card: #272C42; --card-warm: #2E3450; --ink: #F3E6CF; --sub: #D2BE9F;
          --border: #3E4A6B; --link: #F0A060; --note-bg: #2E3F54; --note-ink: #CDEBEA; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
       line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, .brand { font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-weight: 400; }
a { color: var(--link); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }

/* 머리·바닥 */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.brand .mark { width: 36px; height: 36px; border-radius: 12px; background: var(--accent); color: #3B2A18;
               display: grid; place-items: center; font-size: 1.05rem; }
.top nav { display: flex; gap: 6px; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--ink); font-size: .94rem; padding: 10px 12px; border-radius: 12px; }
.top nav a:hover, .top nav a[aria-current] { background: var(--card); }
footer.site { margin-top: 56px; padding: 28px 0 40px; border-top: 1px solid var(--border); color: var(--sub); font-size: .9rem; }
footer.site a { color: var(--sub); }
footer.site .links { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }

/* 랜딩 */
.hero { padding: 28px 0 24px; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.3; margin: 0 0 14px; }
.hero p.lead { font-size: 1.1rem; margin: 0 0 20px; max-width: 36em; }
.status { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--card);
          border: 2px dashed var(--accent); color: var(--link); font-weight: 700; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; padding: 0; list-style: none; }
.pill-row li { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 4px 14px; font-size: .92rem; }
/* 단별 색 띠 — 색만이 아니라 숫자 라벨을 함께 둔다(색각 이상 대응) */
.dans { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.dans li { aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; font-family: system-ui, sans-serif;
           font-size: 1.5rem; color: #3B2A18; border: 3px solid var(--ink); }
.dans li:nth-child(1) { background: var(--d2); } .dans li:nth-child(2) { background: var(--d3); }
.dans li:nth-child(3) { background: var(--d4); } .dans li:nth-child(4) { background: var(--d5); }
.dans li:nth-child(5) { background: var(--d6); } .dans li:nth-child(6) { background: var(--d7); }
.dans li:nth-child(7) { background: var(--d8); } .dans li:nth-child(8) { background: var(--d9); color: #fff; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 0; }
.card { background: var(--card); border-radius: 18px; padding: 20px; border: 1px solid var(--border); }
.card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.card p { margin: 0; color: var(--sub); }
.band { background: var(--card-warm); border-radius: 24px; padding: 30px; margin: 32px 0; }
.band h2 { margin: 0 0 8px; font-size: 1.5rem; }
.band ul { margin: 0; padding-left: 20px; }
section.block { padding: 18px 0; }
section.block h2 { font-size: 1.6rem; margin: 8px 0 6px; }

/* 문서(방침·지원) */
.doc h1 { font-size: 1.9rem; margin: 8px 0 4px; line-height: 1.35; }
.doc h2 { font-size: 1.3rem; margin: 40px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.doc .date { color: var(--sub); font-size: .92rem; margin-bottom: 20px; }
.doc li { margin: 4px 0; }
.note { background: var(--note-bg); color: var(--note-ink); border-radius: 14px; padding: 12px 16px; margin: 14px 0; }
table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: .94rem; background: var(--card); border-radius: 12px; overflow: hidden; }
th, td { border-bottom: 1px solid var(--border); padding: 9px 10px; text-align: left; vertical-align: top; }
th { color: var(--sub); font-weight: 700; }

@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  .band { padding: 22px 18px; }
  .top { flex-direction: column; align-items: flex-start; }
  .dans { grid-template-columns: repeat(4, 1fr); }
}
.cards > * { min-width: 0; }