/* AXPI 센터데이 공통 토큰
   원칙(insight-hub 핸드오버 2026-10-02, 디자인 검토 2026-10-03): 강조 1색(숲 초록)은 버튼과 진행 상태에만, 주황은 경고와 마감에만,
   은행잎 금색은 1위와 신기록에만. 조 색 10개는 조 표시(점, 막대)에만. 큰 화면 쇼 장면은 어두운 숲색 무대.
   그라디언트, 크림 배경, 알약 버튼, 이탤릭 강조, 고정폭 라벨을 쓰지 않는다. 움직임은 즉시 반응 위주. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
:root {
  --bg: #EEF2EF; --surface: #FDFEFD; --sunk: #E3E8E4; --ink: #14191A; --sub: #465150; --muted: #5D6866; --line: #D5DCD7;
  --accent: #1E6B4F; --accent-press: #17573F; --accent-ink: #FDFEFD; --accent-soft: #DDEDE5;
  --hot: #C2410C; --hot-soft: #FBE7DC;
  --gold: #FFC94A; --gold-ink: #3D2E00;            /* 은행잎. 1위, 신기록, 빙고 줄에만 */
  --stage: #0E2A1F; --stage-2: #163A2C; --stage-ink: #F2F6F1; --stage-sub: #A9C2B6;
  --t1: #E5484D; --t2: #F76B15; --t3: #46A758; --t4: #12A594; --t5: #0090FF; --t6: #3E63DD; --t7: #AB4ABA; --t8: #D6409F; --t9: #AD7F58; --t10: #60646C; /* 조 색 */
  --r: 14px; --r-sm: 8px; --r-lg: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1); --d-tap: 120ms; --d-state: 220ms; --d-reveal: 700ms;
  --f: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 16px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; overflow-x: clip; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@page { size: A4; margin: 12mm; }

/* 버튼: 사각에 가까운 둥근 모서리. 강조색은 기본 버튼에만 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 20px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; touch-action: manipulation; }
.btn { transition: transform var(--d-tap) var(--ease), background-color var(--d-state); }
.btn:active { transform: scale(.97); background: var(--accent-press); }
.btn.ghost:active { background: var(--sunk); }
.btn.hot:active { background: var(--hot); }
.btn:disabled { background: var(--sunk); border-color: var(--sunk); color: var(--muted); cursor: not-allowed; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.hot { background: var(--hot); border-color: var(--hot); }
.btn.sm { width: auto; min-height: 44px; font-size: 15px; padding: 0 16px; }
.btn.xl { min-height: 72px; font-size: 20px; }
.btn.loading { opacity: 0.6; pointer-events: none; }
.field { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 17px; }
.field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.tag { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); vertical-align: 2px; }
.tag.soft { background: var(--sunk); color: var(--sub); }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(72px + var(--safe-b)); z-index: 50; max-width: 480px; margin: 0 auto; padding: 14px 16px; border-radius: var(--r); background: var(--ink); color: var(--surface); font-size: 15px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s; pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.toast.bad { background: var(--hot); }