/* ============================================================
   가독협객전 — 먹빛 수묵(ink-wash) 통합 디자인 시스템
   사용자 게임 화면 · 랜딩 · 도움말 · 관리자 공통 토큰/컴포넌트.
   다크 우선 단일 아트디렉션. 본문 대비 WCAG AA 목표.
   ============================================================ */

:root {
    color-scheme: light dark;

    /* ── 먹(墨) 캔버스 & 표면 (입체감 위해 단계별 명도 차 확보) ── */
    --kh-ink-900: #0e0b08;
    --kh-ink-850: #17120e;
    --kh-ink-800: #241d15;
    --kh-ink-750: #2f2619;
    --kh-ink-700: #3b3022;
    --kh-ink-600: #4d3f2e;
    --kh-ink-500: #63513b;

    /* ── 한지(韓紙) 텍스트 ── */
    --kh-paper: #f3ecdd;
    --kh-paper-dim: #cdc2b1;
    --kh-paper-muted: #a99a85;
    --kh-paper-faint: #6b6052;

    /* ── 강조: 주사(朱)·금(金)·옥(玉)·청·자 ── */
    --kh-cinnabar: #e0503a;
    --kh-cinnabar-strong: #c63d29;
    --kh-cinnabar-soft: rgba(224, 80, 58, 0.14);
    --kh-cinnabar-border: rgba(224, 80, 58, 0.42);
    --kh-gold: #d8b15a;
    --kh-gold-soft: rgba(216, 177, 90, 0.16);
    --kh-gold-border: rgba(216, 177, 90, 0.36);
    --kh-jade: #5fc398;
    --kh-jade-soft: rgba(95, 195, 152, 0.15);
    --kh-azure: #6fb0e6;
    --kh-azure-soft: rgba(111, 176, 230, 0.15);
    --kh-amethyst: #b794e0;
    --kh-amethyst-soft: rgba(183, 148, 224, 0.16);
    --kh-crimson: #e87b6f;
    --kh-crimson-soft: rgba(232, 123, 111, 0.15);

    /* ── 시맨틱 별칭 ── */
    --kh-bg: var(--kh-ink-850);
    --kh-surface: var(--kh-ink-800);
    --kh-surface-2: var(--kh-ink-750);
    --kh-surface-3: var(--kh-ink-700);
    --kh-border: var(--kh-ink-600);
    --kh-border-strong: var(--kh-ink-500);
    --kh-text: var(--kh-paper);
    --kh-muted: var(--kh-paper-muted);
    --kh-primary: var(--kh-cinnabar);
    --kh-primary-hover: var(--kh-cinnabar-strong);
    --kh-on-primary: #fdf6ee;
    --kh-success: var(--kh-jade);
    --kh-danger: var(--kh-crimson);
    --kh-warning: var(--kh-gold);
    --kh-info: var(--kh-azure);

    /* ── 전투 결과/조우 시맨틱 (battle-log 자체색 흡수) ── */
    --kh-win: var(--kh-jade);
    --kh-win-soft: var(--kh-jade-soft);
    --kh-lose: var(--kh-crimson);
    --kh-lose-soft: var(--kh-crimson-soft);
    --kh-weekly: var(--kh-amethyst);
    --kh-weekly-soft: var(--kh-amethyst-soft);
    --kh-season: var(--kh-azure);
    --kh-season-soft: var(--kh-azure-soft);

    /* ── 서체 ── */
    --kh-font-sans: "Pretendard", "SUIT Variable", "Noto Sans KR", system-ui, sans-serif;
    --kh-font-serif: "Nanum Myeongjo", "Noto Serif KR", serif;
    --kh-font-mono: "SFMono-Regular", "Pretendard", Consolas, "Courier New", monospace;

    /* ── 타입 스케일 (유동) ── */
    --kh-fs-hero: clamp(28px, 4.5vw, 40px);
    --kh-fs-h1: clamp(24px, 3vw, 31px);
    --kh-fs-h2: 19px;
    --kh-fs-h3: 16px;
    --kh-fs-body: 14px;
    --kh-fs-sm: 13px;
    --kh-fs-xs: 12px;
    --kh-fs-metric: clamp(20px, 2.5vw, 26px);

    /* ── 간격 ── */
    --kh-sp-1: 4px;
    --kh-sp-2: 8px;
    --kh-sp-3: 12px;
    --kh-sp-4: 16px;
    --kh-sp-5: 24px;
    --kh-sp-6: 32px;
    --kh-sp-7: 48px;

    /* ── 모서리 ── */
    --kh-r-sm: 6px;
    --kh-r-md: 10px;
    --kh-r-lg: 14px;
    --kh-r-pill: 999px;

    /* ── 그림자/광 ── */
    --kh-shadow-1: 0 8px 24px rgba(0, 0, 0, 0.40);
    --kh-shadow-2: 0 22px 60px rgba(0, 0, 0, 0.55);
    --kh-glow: 0 0 0 3px var(--kh-cinnabar-soft);

    /* ── 모션 ── */
    --kh-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --kh-dur-fast: 0.15s;
    --kh-dur: 0.24s;

    /* ── 레이아웃 ── */
    --kh-maxw: 1120px;
    --kh-maxw-admin: 1280px;

    /* ── 붓획 마스크 (히어로 디바이더) ── */
    --kh-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='20' viewBox='0 0 1200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 170 3 320 15 520 8 C 720 2 900 15 1100 7 C 1150 5 1180 8 1198 7 L 1198 13 C 1180 13 1150 12 1100 13 C 900 19 720 13 520 14 C 320 18 170 11 3 15 Z' fill='black'/%3E%3C/svg%3E");
}

/* ============================================================
   한지(韓紙) 라이트 모드 — 시스템이 라이트일 때 자동 적용.
   기본(다크 먹빛)은 위 :root. 시맨틱 별칭은 아래 base 토큰을
   참조하므로 ink 사다리·paper·강조만 덮으면 전체가 전환된다.
   ============================================================ */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        /* 한지 캔버스 & 표면 (sunken=입력/프로그레스/내비/표헤더) */
        --kh-ink-900: #f1e8d8;
        --kh-ink-850: #faf8f5;
        --kh-ink-800: #ffffff;
        --kh-ink-750: #fbf6ee;
        --kh-ink-700: #f3ebdd;
        --kh-ink-600: #e4dac9;
        --kh-ink-500: #d3c6b1;
        /* 먹 텍스트 */
        --kh-paper: #211c15;
        --kh-paper-dim: #4a4036;
        --kh-paper-muted: #6e6051;
        --kh-paper-faint: #9a8b78;
        /* 강조 — 라이트 배경 대비 위해 진하게 */
        --kh-cinnabar: #b03a2e;
        --kh-cinnabar-strong: #8f2219;
        --kh-cinnabar-soft: rgba(176, 58, 46, 0.10);
        --kh-cinnabar-border: rgba(176, 58, 46, 0.34);
        --kh-gold: #9a6f24;
        --kh-gold-soft: rgba(154, 111, 36, 0.12);
        --kh-gold-border: rgba(154, 111, 36, 0.34);
        --kh-jade: #1b7a4b;
        --kh-jade-soft: rgba(27, 122, 75, 0.12);
        --kh-azure: #2f6aa8;
        --kh-azure-soft: rgba(47, 106, 168, 0.12);
        --kh-amethyst: #7a4fb0;
        --kh-amethyst-soft: rgba(122, 79, 176, 0.14);
        --kh-crimson: #b3261e;
        --kh-crimson-soft: rgba(179, 38, 30, 0.10);
        --kh-on-primary: #ffffff;
        --kh-shadow-1: 0 8px 24px rgba(27, 28, 26, 0.08);
        --kh-shadow-2: 0 22px 60px rgba(27, 28, 26, 0.16);
        --kh-glow: 0 0 0 3px rgba(176, 58, 46, 0.16);
    }
}

/* 사용자가 토글로 명시 선택한 라이트 모드 (시스템 설정과 무관) */
:root[data-theme="light"] {
    color-scheme: light;
    --kh-ink-900: #f1e8d8;
    --kh-ink-850: #faf8f5;
    --kh-ink-800: #ffffff;
    --kh-ink-750: #fbf6ee;
    --kh-ink-700: #f3ebdd;
    --kh-ink-600: #e4dac9;
    --kh-ink-500: #d3c6b1;
    --kh-paper: #211c15;
    --kh-paper-dim: #4a4036;
    --kh-paper-muted: #6e6051;
    --kh-paper-faint: #9a8b78;
    --kh-cinnabar: #b03a2e;
    --kh-cinnabar-strong: #8f2219;
    --kh-cinnabar-soft: rgba(176, 58, 46, 0.10);
    --kh-cinnabar-border: rgba(176, 58, 46, 0.34);
    --kh-gold: #9a6f24;
    --kh-gold-soft: rgba(154, 111, 36, 0.12);
    --kh-gold-border: rgba(154, 111, 36, 0.34);
    --kh-jade: #1b7a4b;
    --kh-jade-soft: rgba(27, 122, 75, 0.12);
    --kh-azure: #2f6aa8;
    --kh-azure-soft: rgba(47, 106, 168, 0.12);
    --kh-amethyst: #7a4fb0;
    --kh-amethyst-soft: rgba(122, 79, 176, 0.14);
    --kh-crimson: #b3261e;
    --kh-crimson-soft: rgba(179, 38, 30, 0.10);
    --kh-on-primary: #ffffff;
    --kh-shadow-1: 0 8px 24px rgba(27, 28, 26, 0.08);
    --kh-shadow-2: 0 22px 60px rgba(27, 28, 26, 0.16);
    --kh-glow: 0 0 0 3px rgba(176, 58, 46, 0.16);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--kh-font-sans);
    font-size: var(--kh-fs-body);
    color: var(--kh-text);
    background:
        radial-gradient(ellipse 70% 50% at 50% -8%, rgba(224, 80, 58, 0.07), transparent 60%),
        radial-gradient(ellipse 60% 40% at 88% 4%, rgba(216, 177, 90, 0.05), transparent 55%),
        var(--kh-bg);
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .kh-serif { font-family: var(--kh-font-serif); }

a { color: var(--kh-cinnabar); }

::selection { background: var(--kh-cinnabar-soft); color: var(--kh-paper); }

:focus-visible {
    outline: 2px solid var(--kh-cinnabar);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 스크롤바 (먹빛) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--kh-ink-600) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--kh-ink-600); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   레이아웃
   ============================================================ */
.kh-wrap { max-width: var(--kh-maxw); margin: 0 auto; padding: var(--kh-sp-5) var(--kh-sp-4) var(--kh-sp-7); }
.kh-wrap--wide { max-width: var(--kh-maxw-admin); }

/* 히어로 + 붓획 디바이더 */
.kh-hero { padding-bottom: var(--kh-sp-3); position: relative; }
.kh-hero h1 {
    margin: 0;
    color: var(--kh-paper);
    font-size: var(--kh-fs-h1);
    font-weight: 800;
    letter-spacing: 0.02em;
}
.kh-hero h1 .kh-accent { color: var(--kh-cinnabar); }
.kh-hero .kh-meta { margin-top: var(--kh-sp-2); color: var(--kh-muted); font-size: var(--kh-fs-body); }
.kh-hero::after {
    content: "";
    display: block;
    height: 13px;
    margin-top: var(--kh-sp-3);
    background: linear-gradient(90deg, var(--kh-cinnabar) 0%, var(--kh-gold) 70%, transparent 100%);
    -webkit-mask: var(--kh-brush) no-repeat left center / 100% 100%;
    mask: var(--kh-brush) no-repeat left center / 100% 100%;
    opacity: 0.92;
}
.kh-hero--center { text-align: center; }
.kh-hero--center::after { -webkit-mask-position: center; mask-position: center; }

/* 한자 인장 라벨 (브랜드) */
.kh-hanja { font-family: var(--kh-font-serif); color: var(--kh-gold); letter-spacing: 0.32em; font-size: var(--kh-fs-xs); }

/* ============================================================
   페이지 내비 (먹빛 + 붓 밑줄)
   ============================================================ */
.kh-page-nav {
    background: var(--kh-ink-900);
    display: flex;
    padding: 0 var(--kh-sp-3);
    border-bottom: 1px solid var(--kh-border);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.kh-page-nav a {
    color: var(--kh-paper-muted);
    text-decoration: none;
    font-size: var(--kh-fs-sm);
    font-weight: 600;
    padding: 12px 14px;
    border-bottom: 2px solid transparent;
    transition: color var(--kh-dur-fast), border-color var(--kh-dur-fast);
    white-space: nowrap;
}
.kh-page-nav a:hover { color: var(--kh-paper); }
.kh-page-nav a.active { color: var(--kh-paper); border-bottom-color: var(--kh-cinnabar); }
/* 도감 드롭다운: 도감 항목을 묶어 nav를 단축한다. <details>로 JS 없이 토글. */
.kh-page-nav details.kh-nav-group { position: relative; display: inline-block; }
.kh-page-nav details.kh-nav-group > summary {
    list-style: none;
    cursor: pointer;
    color: var(--kh-paper-muted);
    font-size: var(--kh-fs-sm);
    font-weight: 600;
    padding: 12px 14px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    user-select: none;
    transition: color var(--kh-dur-fast), border-color var(--kh-dur-fast);
}
.kh-page-nav details.kh-nav-group > summary::-webkit-details-marker { display: none; }
.kh-page-nav details.kh-nav-group > summary::after { content: " \25BE"; opacity: 0.6; }
.kh-page-nav details.kh-nav-group[open] > summary::after { content: " \25B4"; }
.kh-page-nav details.kh-nav-group > summary:hover { color: var(--kh-paper); }
.kh-page-nav details.kh-nav-group.active > summary { color: var(--kh-paper); border-bottom-color: var(--kh-cinnabar); }
.kh-page-nav details.kh-nav-group .kh-nav-group-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    min-width: 9em;
    background: var(--kh-ink-900);
    border: 1px solid var(--kh-border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    padding: 4px 0;
}
.kh-page-nav details.kh-nav-group .kh-nav-group-menu a { border-bottom-width: 0; padding: 10px 16px; }

/* 탭 */
.kh-tabs { display: flex; gap: var(--kh-sp-1); border-bottom: 1px solid var(--kh-border); margin-bottom: var(--kh-sp-4); overflow-x: auto; }
.kh-tab {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    color: var(--kh-paper-muted); font-weight: 700; font-size: var(--kh-fs-sm);
    padding: 10px 14px; border-bottom: 2px solid transparent; white-space: nowrap;
    font-family: inherit;
}
.kh-tab:hover { color: var(--kh-paper); }
.kh-tab.active { color: var(--kh-paper); border-bottom-color: var(--kh-cinnabar); }

/* ============================================================
   표면: 패널 / 카드
   ============================================================ */
.kh-panel {
    background: var(--kh-surface);
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-r-md);
    box-shadow: var(--kh-shadow-1);
    padding: var(--kh-sp-4);
}
.kh-panel + .kh-panel { margin-top: var(--kh-sp-4); }
.kh-panel > h2, .kh-card > h2, .kh-panel > .kh-h2 {
    margin: 0 0 var(--kh-sp-3);
    font-size: var(--kh-fs-h2);
    font-weight: 800;
    color: var(--kh-paper);
    display: flex;
    align-items: center;
    gap: var(--kh-sp-2);
}
/* 섹션 마커: 세로 붓점 */
.kh-panel > h2::before, .kh-card > h2::before, .kh-panel > .kh-h2::before {
    content: "";
    width: 4px;
    align-self: stretch;
    min-height: 1.05em;
    border-radius: 2px;
    background: linear-gradient(var(--kh-cinnabar), var(--kh-gold));
    flex: 0 0 auto;
}
.kh-panel > h2 .kh-h2-actions { margin-left: auto; display: flex; gap: var(--kh-sp-2); align-items: center; font-family: var(--kh-font-sans); }

.kh-card {
    background: var(--kh-surface);
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-r-md);
    box-shadow: var(--kh-shadow-1);
    padding: var(--kh-sp-4);
}
.kh-card--soft { background: var(--kh-surface-2); box-shadow: none; }
.kh-card--gold { border-color: var(--kh-gold-border); }

/* 강조 패널 (다음 행동 등) */
.kh-feature {
    background:
        linear-gradient(135deg, rgba(224, 80, 58, 0.10), transparent 45%),
        linear-gradient(0deg, var(--kh-surface-2), var(--kh-surface));
    border-color: var(--kh-cinnabar-border);
}

/* ============================================================
   그리드 헬퍼
   ============================================================ */
.kh-grid { display: grid; gap: var(--kh-sp-3); }
.kh-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kh-sp-3); }
.kh-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kh-sp-3); }
.kh-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kh-sp-3); }
.kh-autofill { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--kh-sp-3); }
.kh-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr); gap: var(--kh-sp-4); }

/* ============================================================
   메트릭
   ============================================================ */
.kh-metric {
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-r-sm);
    background: var(--kh-surface-2);
    padding: var(--kh-sp-3);
    min-height: 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.kh-metric-label { color: var(--kh-muted); font-size: var(--kh-fs-xs); font-weight: 700; }
.kh-metric-value { font-size: var(--kh-fs-metric); font-weight: 800; line-height: 1.15; font-family: var(--kh-font-serif); }
.kh-metric--accent .kh-metric-value { color: var(--kh-cinnabar); }
.kh-metric--gold { border-color: var(--kh-gold-border); }

/* KPI (관리자 호환) */
.kh-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--kh-sp-2); }

/* ============================================================
   뱃지 / 낙관(seal)
   ============================================================ */
.kh-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--kh-r-pill);
    padding: 4px 10px;
    font-size: var(--kh-fs-xs);
    font-weight: 800;
    background: var(--kh-surface-3);
    color: var(--kh-paper-dim);
    border: 1px solid var(--kh-border);
    white-space: nowrap;
}
.kh-badge--ok, .kh-badge--win { background: var(--kh-jade-soft); color: var(--kh-jade); border-color: transparent; }
.kh-badge--danger, .kh-badge--lose { background: var(--kh-crimson-soft); color: var(--kh-crimson); border-color: transparent; }
.kh-badge--warn { background: var(--kh-gold-soft); color: var(--kh-gold); border-color: transparent; }
.kh-badge--info, .kh-badge--season { background: var(--kh-azure-soft); color: var(--kh-azure); border-color: transparent; }
.kh-badge--primary { background: var(--kh-cinnabar-soft); color: var(--kh-cinnabar); border-color: transparent; }
.kh-badge--gold { background: var(--kh-gold-soft); color: var(--kh-gold); border-color: transparent; }
.kh-badge--weekly { background: var(--kh-amethyst-soft); color: var(--kh-amethyst); border-color: transparent; }

/* 낙관 스탬프 (칭호·업적·아바타 아이콘) */
.kh-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--kh-r-sm);
    background: var(--kh-cinnabar);
    color: var(--kh-on-primary);
    font-family: var(--kh-font-serif);
    font-weight: 800;
    font-size: 20px;
    box-shadow: inset 0 0 0 2px rgba(253, 246, 238, 0.18), 0 4px 10px rgba(0, 0, 0, 0.4);
    flex: 0 0 auto;
    transform: rotate(-2deg);
}
.kh-seal--muted { background: var(--kh-surface-3); color: var(--kh-paper-muted); box-shadow: inset 0 0 0 1px var(--kh-border); }
.kh-seal--gold { background: linear-gradient(135deg, var(--kh-gold), #b98a35); color: #2a1c08; }
.kh-seal--round { border-radius: 50%; transform: none; }
.kh-seal--lg { width: 64px; height: 64px; font-size: 28px; }

/* ============================================================
   프로그레스 (붓 채움)
   ============================================================ */
.kh-progress {
    height: 10px;
    border-radius: var(--kh-r-pill);
    background: var(--kh-ink-900);
    overflow: hidden;
    border: 1px solid var(--kh-border);
}
.kh-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--kh-cinnabar), var(--kh-gold));
    transition: width var(--kh-dur) var(--kh-ease);
}
.kh-bar--jade { background: linear-gradient(90deg, var(--kh-jade), var(--kh-azure)); }

/* ============================================================
   버튼
   ============================================================ */
.kh-btn, .kh-btn:link, .kh-btn:visited {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--kh-r-sm);
    padding: 9px 14px;
    font-family: inherit;
    font-size: var(--kh-fs-sm);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background var(--kh-dur-fast), border-color var(--kh-dur-fast), color var(--kh-dur-fast), opacity var(--kh-dur-fast);
}
.kh-btn--primary { background: var(--kh-cinnabar); color: var(--kh-on-primary); }
.kh-btn--primary:hover { background: var(--kh-cinnabar-strong); }
.kh-btn--ghost { background: var(--kh-surface-2); color: var(--kh-text); border-color: var(--kh-border); }
.kh-btn--ghost:hover { border-color: var(--kh-cinnabar); color: var(--kh-cinnabar); }
.kh-btn--outline { background: transparent; color: var(--kh-paper-dim); border-color: var(--kh-border-strong); }
.kh-btn--outline:hover { border-color: var(--kh-cinnabar); color: var(--kh-cinnabar); }
.kh-btn--quiet { background: transparent; color: var(--kh-muted); }
.kh-btn--quiet:hover { color: var(--kh-cinnabar); }
.kh-btn--danger { background: var(--kh-crimson-soft); color: var(--kh-crimson); border-color: var(--kh-cinnabar-border); }
.kh-btn--danger:hover { background: var(--kh-crimson); color: var(--kh-on-primary); }
.kh-btn--gold { background: var(--kh-gold); color: #2a1c08; }
.kh-btn--gold:hover { filter: brightness(1.08); }
.kh-btn--sm { padding: 6px 10px; font-size: var(--kh-fs-xs); }
.kh-btn--block { width: 100%; }
.kh-btn[disabled], .kh-btn.is-loading { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.kh-btn.is-loading::before {
    content: ""; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: kh-spin 0.8s linear infinite;
}

/* 필터 칩 */
.kh-filters { display: flex; flex-wrap: wrap; gap: var(--kh-sp-2); }
.kh-filter {
    appearance: none;
    border: 1px solid var(--kh-border);
    background: var(--kh-surface-2);
    color: var(--kh-paper-dim);
    font-family: inherit;
    font-weight: 700;
    font-size: var(--kh-fs-sm);
    padding: 7px 13px;
    border-radius: var(--kh-r-pill);
    cursor: pointer;
    transition: all var(--kh-dur-fast);
}
.kh-filter:hover { border-color: var(--kh-cinnabar); color: var(--kh-cinnabar); }
.kh-filter.active { background: var(--kh-cinnabar); border-color: var(--kh-cinnabar); color: var(--kh-on-primary); }

/* 명령 칩 (/토벌 등) */
.kh-command {
    display: inline-flex; width: fit-content; border-radius: var(--kh-r-pill);
    padding: 6px 13px; background: var(--kh-ink-900); border: 1px solid var(--kh-gold-border);
    color: var(--kh-gold); font-weight: 800; font-size: var(--kh-fs-sm); font-family: var(--kh-font-mono);
}

/* ============================================================
   폼
   ============================================================ */
.kh-field { margin-bottom: var(--kh-sp-3); }
.kh-field > label, .kh-label {
    display: block;
    margin-bottom: 5px;
    color: var(--kh-muted);
    font-size: var(--kh-fs-sm);
    font-weight: 700;
}
.kh-input, .kh-select, .kh-textarea,
input[type="text"].kh-input, input[type="number"].kh-input, input[type="password"].kh-input {
    width: 100%;
    border: 1px solid var(--kh-border-strong);
    border-radius: var(--kh-r-sm);
    padding: 10px 12px;
    font-size: var(--kh-fs-body);
    font-family: inherit;
    background: var(--kh-ink-900);
    color: var(--kh-text);
    transition: border-color var(--kh-dur-fast), box-shadow var(--kh-dur-fast);
}
.kh-input::placeholder, .kh-textarea::placeholder { color: var(--kh-paper-faint); }
.kh-input:focus, .kh-select:focus, .kh-textarea:focus {
    outline: none;
    border-color: var(--kh-cinnabar);
    box-shadow: var(--kh-glow);
}
.kh-textarea { min-height: 80px; resize: vertical; line-height: 1.55; }
.kh-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239d9080' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
}
.kh-inline-input {
    width: 92px; min-width: 64px;
    border: 1px solid var(--kh-border-strong);
    border-radius: var(--kh-r-sm);
    padding: 6px 8px;
    font-size: var(--kh-fs-xs);
    background: var(--kh-ink-900);
    color: var(--kh-text);
    font-family: inherit;
}
.kh-inline-input:focus { outline: none; border-color: var(--kh-cinnabar); }
.kh-inline-wide { width: 150px; }
input[type="checkbox"].kh-check { width: 16px; height: 16px; vertical-align: middle; accent-color: var(--kh-cinnabar); }
.kh-help { color: var(--kh-paper-faint); font-size: var(--kh-fs-xs); margin-top: 4px; }

/* ============================================================
   테이블
   ============================================================ */
.kh-table-wrap {
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-r-md);
    overflow: auto;
    max-width: 100%;
    background: var(--kh-surface);
}
.kh-table { width: 100%; border-collapse: collapse; font-size: var(--kh-fs-sm); }
.kh-table th, .kh-table td { padding: 10px 12px; border-bottom: 1px solid var(--kh-border); text-align: left; white-space: nowrap; }
.kh-table th {
    position: sticky; top: 0; z-index: 1;
    background: var(--kh-ink-900);
    color: var(--kh-muted);
    font-weight: 700;
}
.kh-table tbody tr { transition: background var(--kh-dur-fast); }
.kh-table tbody tr:hover { background: var(--kh-surface-2); }
.kh-table tbody tr:last-child td { border-bottom: none; }
.kh-table .kh-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   모달
   ============================================================ */
.kh-modal-backdrop {
    position: fixed; inset: 0; z-index: 80;
    display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(2px);
    padding: var(--kh-sp-4);
}
.kh-modal-backdrop.show { display: flex; }
.kh-modal {
    width: min(960px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: var(--kh-surface);
    border: 1px solid var(--kh-border-strong);
    border-radius: var(--kh-r-lg);
    box-shadow: var(--kh-shadow-2);
    padding: var(--kh-sp-5);
}
.kh-modal--sm { width: min(420px, 100%); }
.kh-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kh-sp-3); margin-bottom: var(--kh-sp-4); }
.kh-modal-head h2 { margin: 0; font-size: var(--kh-fs-h2); color: var(--kh-paper); }
.kh-modal-close { appearance: none; border: 0; background: transparent; color: var(--kh-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: var(--kh-r-sm); }
.kh-modal-close:hover { color: var(--kh-cinnabar); background: var(--kh-surface-2); }

/* ============================================================
   토스트
   ============================================================ */
.kh-toast {
    position: fixed; right: var(--kh-sp-4); bottom: var(--kh-sp-4); z-index: 100;
    max-width: 340px;
    padding: 11px 16px;
    border-radius: var(--kh-r-sm);
    color: var(--kh-paper);
    background: var(--kh-ink-700);
    border: 1px solid var(--kh-border-strong);
    box-shadow: var(--kh-shadow-1);
    font-size: var(--kh-fs-sm);
    font-weight: 600;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--kh-dur) var(--kh-ease), transform var(--kh-dur) var(--kh-ease);
    pointer-events: none;
}
.kh-toast.show { opacity: 1; transform: translateY(0); }
.kh-toast.ok { border-left: 4px solid var(--kh-jade); }
.kh-toast.error { border-left: 4px solid var(--kh-crimson); }
.kh-toast.info { border-left: 4px solid var(--kh-azure); }

/* ── 테마 토글 (라이트/다크) ── */
.kh-theme-toggle {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 90;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--kh-border-strong);
    background: var(--kh-surface);
    color: var(--kh-paper);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--kh-shadow-1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--kh-dur-fast), color var(--kh-dur-fast), transform var(--kh-dur-fast);
}
.kh-theme-toggle:hover { border-color: var(--kh-cinnabar); color: var(--kh-cinnabar); transform: translateY(-1px); }
.kh-theme-toggle:active { transform: translateY(0); }
@media print { .kh-theme-toggle { display: none; } }

/* ============================================================
   상태: 로딩 / 빈 / 에러 / 스켈레톤
   ============================================================ */
.kh-loading { max-width: 720px; margin: 64px auto; text-align: center; color: var(--kh-muted); }
.kh-spinner {
    display: inline-block; width: 30px; height: 30px;
    border: 3px solid var(--kh-border-strong);
    border-top-color: var(--kh-cinnabar);
    border-radius: 50%;
    animation: kh-spin 0.85s linear infinite;
    margin-bottom: 10px;
}
.kh-loading-text { font-size: var(--kh-fs-body); }
@keyframes kh-spin { to { transform: rotate(360deg); } }

.kh-empty {
    padding: var(--kh-sp-6) var(--kh-sp-4);
    text-align: center;
    color: var(--kh-muted);
    border: 1px dashed var(--kh-border-strong);
    border-radius: var(--kh-r-md);
    background: var(--kh-surface-2);
}
.kh-empty-actions { margin-top: var(--kh-sp-3); }
.kh-empty-actions button {
    appearance: none; border: 1px solid var(--kh-border-strong); background: var(--kh-surface);
    color: var(--kh-text); font-weight: 700; font-family: inherit; padding: 7px 13px; border-radius: var(--kh-r-pill); cursor: pointer;
}
.kh-empty-actions button:hover { border-color: var(--kh-cinnabar); color: var(--kh-cinnabar); }

.kh-error {
    color: var(--kh-crimson);
    background: var(--kh-crimson-soft);
    border: 1px solid var(--kh-cinnabar-border);
    border-radius: var(--kh-r-md);
    max-width: 720px;
    margin: var(--kh-sp-5) auto;
    padding: var(--kh-sp-6) var(--kh-sp-4);
    text-align: center;
}
.kh-error-actions { margin-top: var(--kh-sp-3); display: flex; justify-content: center; gap: var(--kh-sp-2); flex-wrap: wrap; }
.kh-error-actions button {
    appearance: none; border: 1px solid var(--kh-cinnabar); background: transparent;
    color: var(--kh-cinnabar); font-weight: 700; font-family: inherit; padding: 8px 16px; border-radius: var(--kh-r-pill); cursor: pointer;
}
.kh-error-actions button:hover { background: var(--kh-cinnabar); color: var(--kh-on-primary); }

.kh-skeleton {
    background: linear-gradient(100deg, var(--kh-ink-750) 30%, var(--kh-ink-700) 50%, var(--kh-ink-750) 70%);
    background-size: 200% 100%;
    animation: kh-shimmer 1.3s infinite linear;
    border-radius: var(--kh-r-sm);
}
@keyframes kh-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .kh-skeleton, .kh-spinner, .kh-btn.is-loading::before { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* ============================================================
   확인 다이얼로그
   ============================================================ */
.kh-confirm-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.62); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.kh-confirm { background: var(--kh-surface); border: 1px solid var(--kh-border-strong); border-radius: var(--kh-r-lg); padding: var(--kh-sp-5); max-width: 380px; width: calc(100% - 32px); box-shadow: var(--kh-shadow-2); }
.kh-confirm p { margin: 0 0 var(--kh-sp-4); color: var(--kh-text); font-size: 15px; line-height: 1.55; }
.kh-confirm-actions { display: flex; justify-content: flex-end; gap: var(--kh-sp-2); }
.kh-confirm-actions button { appearance: none; border: 1px solid var(--kh-border-strong); background: var(--kh-surface-2); color: var(--kh-text); font-weight: 700; font-family: inherit; padding: 8px 16px; border-radius: var(--kh-r-sm); cursor: pointer; }
.kh-confirm-actions button.kh-confirm-primary { background: var(--kh-cinnabar); color: var(--kh-on-primary); border-color: var(--kh-cinnabar); }
.kh-confirm-actions button:hover { opacity: 0.9; }

/* ============================================================
   관련 페이지
   ============================================================ */
.kh-related { margin: var(--kh-sp-6) auto 0; padding-top: var(--kh-sp-4); border-top: 1px solid var(--kh-border); }
.kh-related h2 { margin: 0 0 var(--kh-sp-3); font-size: var(--kh-fs-sm); color: var(--kh-muted); font-weight: 700; font-family: var(--kh-font-sans); }
.kh-related-links { display: flex; flex-wrap: wrap; gap: var(--kh-sp-2); }
.kh-related-links a {
    display: inline-block; padding: 8px 13px; border: 1px solid var(--kh-border);
    border-radius: var(--kh-r-pill); text-decoration: none; color: var(--kh-paper-dim);
    font-size: var(--kh-fs-sm); font-weight: 700; background: var(--kh-surface-2);
}
.kh-related-links a:hover { border-color: var(--kh-cinnabar); color: var(--kh-cinnabar); }

/* 바로가기 카드 */
.kh-linkcard {
    display: flex; align-items: center; gap: var(--kh-sp-2); min-height: 50px;
    border: 1px solid var(--kh-border); border-radius: var(--kh-r-sm); background: var(--kh-surface-2);
    color: var(--kh-text); text-decoration: none; padding: 12px 14px; font-size: var(--kh-fs-body); font-weight: 800;
    transition: border-color var(--kh-dur-fast), color var(--kh-dur-fast), transform var(--kh-dur-fast);
}
.kh-linkcard:hover { border-color: var(--kh-cinnabar); color: var(--kh-cinnabar); transform: translateY(-1px); }

/* ============================================================
   코덱스 카드 (몬스터/아이템/무공/지역/업적)
   ============================================================ */
.kh-codex-card {
    background: var(--kh-surface);
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-r-md);
    box-shadow: var(--kh-shadow-1);
    padding: var(--kh-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--kh-sp-2);
    position: relative;
    overflow: hidden;
    transition: border-color var(--kh-dur-fast), transform var(--kh-dur-fast);
}
.kh-codex-card:hover { border-color: var(--kh-gold-border); transform: translateY(-2px); }
.kh-thumb {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: var(--kh-r-sm);
    background: var(--kh-ink-900) center / cover no-repeat;
    border: 1px solid var(--kh-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--kh-paper-faint); font-family: var(--kh-font-serif); font-size: 26px;
    overflow: hidden;
}
.kh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-thumb--wide { aspect-ratio: 2 / 1; }
.kh-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kh-sp-2); }
.kh-card-title { margin: 0; font-size: var(--kh-fs-h3); font-weight: 800; font-family: var(--kh-font-serif); }
.kh-card-sub { color: var(--kh-muted); font-size: var(--kh-fs-xs); }
.kh-card-desc { color: var(--kh-paper-dim); font-size: var(--kh-fs-sm); line-height: 1.5; }
.kh-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: var(--kh-sp-2); }
.kh-spec { background: var(--kh-surface-2); border-radius: var(--kh-r-sm); padding: 7px 9px; }
.kh-spec-label { color: var(--kh-muted); font-size: 11px; font-weight: 700; }
.kh-spec-value { font-size: var(--kh-fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.kh-card-foot { color: var(--kh-paper-faint); font-size: var(--kh-fs-xs); border-top: 1px dashed var(--kh-border); padding-top: var(--kh-sp-2); margin-top: auto; }

/* 미발견/미공개: 붓 해치 오버레이 */
.kh-codex-card.is-hidden { opacity: 0.82; }
.kh-codex-card.is-hidden::after {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(157, 144, 128, 0.07) 9px 11px);
    pointer-events: none;
}
.kh-codex-card.is-locked { opacity: 0.62; }

/* ============================================================
   유틸리티
   ============================================================ */
.kh-muted { color: var(--kh-muted); }
.kh-dim { color: var(--kh-paper-dim); }
.kh-accent { color: var(--kh-cinnabar); }
.kh-gold-text { color: var(--kh-gold); }
.kh-mono { font-family: var(--kh-font-mono); font-size: var(--kh-fs-xs); }
.kh-num { font-variant-numeric: tabular-nums; }
.kh-row { display: flex; align-items: center; gap: var(--kh-sp-2); flex-wrap: wrap; }
.kh-row--between { justify-content: space-between; }
.kh-stack { display: flex; flex-direction: column; gap: var(--kh-sp-2); }
.kh-spread { display: flex; justify-content: space-between; gap: var(--kh-sp-2); }
.kh-right { text-align: right; }
.kh-center { text-align: center; }
.kh-hidden { display: none !important; }
.kh-fs-sm { font-size: var(--kh-fs-sm); }
.kh-mt-0 { margin-top: 0; }
.kh-mb-0 { margin-bottom: 0; }

/* ============================================================
   반응형 (3단 표준)
   ============================================================ */
@media (max-width: 900px) {
    .kh-split { grid-template-columns: 1fr; }
    .kh-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .kh-wrap { padding: var(--kh-sp-4) var(--kh-sp-3) var(--kh-sp-6); }
    .kh-grid-3, .kh-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-autofill { grid-template-columns: 1fr 1fr; }
    /* 도감 항목을 드롭다운으로 묶어 항목이 적어졌으므로, 가로 스크롤 대신 줄바꿈 + 드롭다운 노출 허용. */
    .kh-page-nav { flex-wrap: wrap; }
}