@charset "UTF-8";
/* =========================================================
   shared/tokens.css — 모든 시안 페이지가 함께 쓰는 토큰의 단일 출처
   기본(:root) = 밤하늘(홈 · Tools). 테마 두 개가 같은 이름의 토큰을 덮어쓴다.
     [data-theme="ember"] 플레이 가이드(갈색 책) / [data-theme="paper"] 문제 해결(밝은 종이)
   ========================================================= */
:root {
    /* 색 — 유일한 강조색은 금색 */
    --gold-normal: #c5a059;
    --gold-strong: #d6b46f;
    --gold-heavy: #ae8843;
    --gold-tint: rgba(197, 160, 89, 0.12);
    --gold-line: rgba(197, 160, 89, 0.35);
    --gold-line-soft: rgba(197, 160, 89, 0.2);

    --bg-base: #0a0a1a;
    --bg-elevated: rgba(12, 12, 26, 0.96);
    --surface-card: rgba(255, 255, 255, 0.04);

    --label-strong: #ffffff;
    --label-normal: #ececf1;
    --label-neutral: #c4c4cc;
    --label-alternative: #9a9aa6;   /* 14px 이상, 굵기 400 이상에서만 */
    --label-assistive: #6c6c78;     /* 비활성·장식 전용 */

    --line-normal: rgba(255, 255, 255, 0.16);
    --line-neutral: rgba(255, 255, 255, 0.10);
    --line-alternative: rgba(255, 255, 255, 0.06);

    --fill-normal: rgba(255, 255, 255, 0.08);
    --fill-strong: rgba(255, 255, 255, 0.14);
    --fill-alternative: rgba(255, 255, 255, 0.05);

    --status-cautionary: #f1c40f;   /* 경고(뷰어 안내)에만 */
    --status-negative: #e74c3c;

    /* 기존 이름은 별칭으로 남긴다 */
    --primary-color: var(--gold-normal);
    --highlight-yellow: var(--status-cautionary);
    --bg-dark: var(--bg-base);
    --text-main: var(--label-strong);
    --transition-speed: 0.8s;
    --focus-color: var(--gold-normal);

    /* 글꼴 */
    --font-display: 'Cinzel', 'Noto Serif KR', serif;
    --font-serif: 'Noto Serif KR', serif;
    --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, system-ui, sans-serif;

    /* 글자 크기 단계 (px 고정) */
    --fs-display1: 56px;
    --fs-display2: 40px;
    --fs-title1: 32px;
    --fs-title2: 28px;
    --fs-title3: 24px;
    --fs-heading1: 22px;
    --fs-heading2: 20px;
    --fs-headline1: 18px;
    --fs-body1: 16px;
    --fs-body2: 15px;
    --fs-label1: 14px;
    --fs-label2: 13px;
    --fs-caption1: 12px;
    --fs-caption2: 11px;

    /* 간격 (4px 그리드) */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-120: 120px;

    /* 라디우스 */
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-full: 9999px;

    /* 그림자 (어두운 바탕용) */
    --shadow-normal: 0 1px 2px rgba(0, 0, 0, .4), 0 0 1px rgba(0, 0, 0, .4);
    --shadow-strong: 0 6px 16px rgba(0, 0, 0, .45), 0 0 4px rgba(0, 0, 0, .3);
    --shadow-heavy: 0 16px 40px rgba(0, 0, 0, .55), 0 0 8px rgba(0, 0, 0, .35);
    --glow-soft: 0 0 10px rgba(255, 255, 255, .35);

    /* 모션 */
    --dur-fast: 150ms;
    --dur-normal: 250ms;
    --dur-reveal: 800ms;
    --ease: cubic-bezier(.2, 0, 0, 1);
}

/* ---------- 테마: ember (플레이 가이드 — 갈색 책) ---------- */
:root[data-theme="ember"] {
    --bg-base: #1a120a;
    --bg-elevated: rgba(26, 18, 10, 0.97);
    --surface-card: rgba(216, 180, 100, 0.06);
    --label-strong: #f5ecd9;
    --label-normal: #f5ecd9;
    --label-neutral: #d3c5ac;
    --label-alternative: #a2917a;
    --label-assistive: #7a6c58;
    --line-neutral: rgba(216, 180, 100, 0.2);
    --line-normal: rgba(216, 180, 100, 0.32);
    --line-alternative: rgba(216, 180, 100, 0.1);
    --fill-alternative: rgba(216, 180, 100, 0.08);
    --fill-normal: rgba(216, 180, 100, 0.12);
    --fill-strong: rgba(216, 180, 100, 0.2);
    --accent-ember: #e08a5f;
}

/* ---------- 테마: paper (문제 해결 — 밝은 종이, Wanted Light 에 해당) ---------- */
:root[data-theme="paper"] {
    --bg-base: #fcfbf8;
    --bg-elevated: #ffffff;
    --surface-card: #fcfbf8;
    --label-strong: #1a1f21;
    --label-normal: #242b2e;
    --label-neutral: #5b625f;
    --label-alternative: #666b64;   /* 종이 위 5.27:1 (이전 #8e918a 는 3.09:1) */
    --label-assistive: #8e918a;     /* 장식·비활성 전용 */
    --line-normal: rgba(36, 43, 46, 0.16);
    --line-neutral: rgba(36, 43, 46, 0.10);
    --line-alternative: rgba(36, 43, 46, 0.06);
    --fill-normal: rgba(36, 43, 46, 0.06);
    --fill-strong: rgba(36, 43, 46, 0.10);
    --fill-alternative: rgba(36, 43, 46, 0.04);
    --gold-normal: #8a6a2f;          /* 종이 위 4.85:1 */
    --gold-strong: #7a5d28;
    --gold-heavy: #6a5020;
    --gold-tint: rgba(138, 106, 47, 0.10);
    --gold-line: rgba(138, 106, 47, 0.35);
    --gold-line-soft: rgba(138, 106, 47, 0.2);
    --focus-color: #8a6a2f;
    --shadow-normal: 0 0 1px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .12);
    --shadow-strong: 0 0 4px rgba(0, 0, 0, .08), 0 4px 8px rgba(0, 0, 0, .08), 0 6px 12px rgba(0, 0, 0, .12);
    --shadow-heavy: 0 0 8px rgba(0, 0, 0, .08), 0 8px 16px rgba(0, 0, 0, .1), 0 16px 32px rgba(0, 0, 0, .14);
    --glow-soft: none;
}

/* ---------- 공용 포커스 — 더 구체적인 규칙이 있으면 그쪽이 이긴다 ---------- */
:where(a, button, [role="button"], [tabindex], input, summary, select, textarea):focus-visible {
    outline: 2px solid var(--focus-color, var(--gold-normal));
    outline-offset: 2px;
}

/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
}