:root {
    --bg: #f7f8fb;
    --panel: #ffffff;
    --text: #171a1f;
    --muted: #626b78;
    --line: #dde3ec;
    --accent: #1269d3;
    --accent-soft: #e8f1ff;
    --good: #087a55;
    --warn: #9a5b00;
    /* 보조 토큰(web-ui-topbar-polish U4) — 라이트 값은 예전 하드코드 값 그대로(라이트 외관 불변), 다크·프리셋이 아래에서 재정의한다. */
    --accent-line: #cfe1fb;
    --on-accent: #fff;
    --surface-muted: #eef2f7;
    --surface-sunken: #f1f5f9;
    --surface-subtle: #f8fafc;
    --surface-disabled: #d7dee8;
    --text-disabled: #94a3b8;
    --text-dim: #758091;
    --text-faint: #b7c0cd;
    --code-text: #263445;
    --danger-bg: #fee2e2;
    --danger-bg-hover: #fecaca;
    --danger-line: #fecaca;
    --danger-text: #b91c1c;
    --danger-strong: #7f1d1d;
    --danger-ink: #b42318;
    --good-line: #bfe7d5;
    --warn-line: #efd7b3;
    --drop-line: #c9d5e5;
    --drop-line-active: #b8d0f2;
    --check-line: #7f8999;
    /* 네이티브 컨트롤(체크박스·스크롤바·select 팝업)이 OS 다크 모드가 아니라 화면 테마를 따르게 한다. */
    color-scheme: light;
    /* 메인 메뉴(.rail) 축 — 이 변수 하나가 방향·스크롤 축·버튼 클램프를 함께 정한다(요청 6).
       기본(넓은 창)=column(세로 스크롤). 좁은 창에서 layout.css 가 .shell 에 row 로 재정의(가로 스크롤). */
    --rail-axis: column;
    /* 화면 글꼴 — 언어별 시스템 글꼴 스택(#38 §4.3, 웹폰트 없음 D9). 기본(라틴: en·de·fr·es·pt-BR·it·tr·id)은 기존 값 그대로.
       _registry.json 의 fonts 값 ↔ 아래 :lang() 묶음: ko · ja · zh-Hans · zh-Hant · cyrillic(ru) · arabic(ar) · vietnamese(vi) · latin(기본).
       라틴 글자는 계속 Arial 이 먼저 잡도록 Arial 을 앞에 두고, 그 문자 체계 글꼴을 뒤에 둔다(ko 화면은 바뀌지 않는다 —
       기존에도 한글은 Arial 에 없어 시스템 한글 글꼴로 대체되던 것을 명시만 했다). */
    --font-ui: Arial, Helvetica, sans-serif;
    font-family: var(--font-ui);
}

:lang(ko) {
    --font-ui: Arial, Helvetica, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
}

:lang(ja) {
    --font-ui: Arial, Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
}

/* 간체·번체는 같은 한자라도 자형이 달라 글꼴을 나눈다. */
:lang(zh-Hans) {
    --font-ui: Arial, Helvetica, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}

:lang(zh-Hant) {
    --font-ui: Arial, Helvetica, "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "Source Han Sans TC", sans-serif;
}

:lang(ru) {
    --font-ui: Arial, Helvetica, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}

:lang(ar) {
    --font-ui: "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", Arial, sans-serif;
}

/* 베트남어: 겹치는 성조 부호가 잘리지 않게 결합 부호 지원이 좋은 글꼴 + 행간을 넓힌다. */
:lang(vi) {
    --font-ui: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

:root:lang(vi) {
    line-height: 1.5;
}

/* 페이지 언어와 다른 lang 을 가진 요소(언어 전환기의 자국어 이름 등)는 자기 언어 스택으로 다시 계산한다. */
[lang] {
    font-family: var(--font-ui);
}

/* 화면설정: 다크 테마 — <html data-theme="dark">로 활성화(preferencesFlow.js가 설정).
   navy 배경 프리셋은 어두운 배경이라 테마와 무관하게 같은 어두운 토큰을 쓰고(밝은 패널이 남지 않게) 아래에서 색조만 바꾼다. */
[data-theme="dark"],
[data-bg="navy"] {
    --bg: #12151b;
    --panel: #1c212b;
    --text: #e8ebf2;
    --muted: #9aa4b5;
    --line: #2c3442;
    --accent: #5aa2ff;
    --accent-soft: #1d2f4a;
    --accent-line: #2f4f7d;
    --on-accent: #0b1424;
    --good: #34c38f;
    --warn: #f0b45a;
    --surface-muted: #262d39;
    --surface-sunken: #222833;
    --surface-subtle: #161a21;
    --surface-disabled: #2f3746;
    --text-disabled: #6b7686;
    --text-dim: #8390a3;
    --text-faint: #6b7686;
    --code-text: #c9d4e3;
    --danger-bg: #3a1d20;
    --danger-bg-hover: #4a2226;
    --danger-line: #5c2a2f;
    --danger-text: #ff8a8a;
    --danger-strong: #ffc9c9;
    --danger-ink: #ff8a80;
    --good-line: #1f5a43;
    --warn-line: #5a4320;
    --drop-line: #3a4558;
    --drop-line-active: #2f4f7d;
    --check-line: #7d889a;
    color-scheme: dark;
}

/* 화면설정: 커스텀 배경색 프리셋 — 테마와 독립 조합. 배경(--bg)만 바꾸면 패널(상단바·레일·카드)이 흰색/기본색으로 남아
   배경과 따로 놀았다 → 프리셋마다 패널·선·보조 면을 짝으로 맞춘다. */
[data-bg="navy"] {
    --bg: #0f1c33;
    --panel: #172743;
    --line: #283d61;
    --muted: #a3b2c9;
    --accent-soft: #1f3a66;
    --accent-line: #34588f;
    --surface-muted: #1f3254;
    --surface-sunken: #1b2d4c;
    --surface-subtle: #122039;
    --surface-disabled: #2a3d5e;
    --drop-line: #34496d;
}

[data-bg="sepia"] {
    --bg: #f3ead9;
    --panel: #fbf6ec;
    --line: #e2d5bd;
    --muted: #6b6252;
    --surface-muted: #efe5d3;
    --surface-sunken: #f2e9da;
    --surface-subtle: #f7f0e3;
    --drop-line: #d6c6a8;
}

[data-theme="dark"][data-bg="sepia"] {
    --bg: #241f16;
    --panel: #2e281d;
    --line: #42392a;
    --muted: #b0a48d;
    --accent-soft: #2f3242;
    --surface-muted: #3a3226;
    --surface-sunken: #342d22;
    --surface-subtle: #1f1a12;
    --surface-disabled: #463d2f;
    --drop-line: #4d4332;
}

[data-bg="slate"] {
    --bg: #eef1f4;
    --panel: #f9fafb;
    --line: #d6dde6;
}

[data-theme="dark"][data-bg="slate"] {
    --bg: #171d26;
    --panel: #212934;
    --line: #313b4a;
    --surface-muted: #2a3340;
    --surface-sunken: #262e3a;
    --surface-subtle: #151a22;
    --surface-disabled: #344052;
    --drop-line: #3c485b;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    transition: background-color .15s ease, color .15s ease;
}

button,
input,
select {
    font: inherit;
}

/* 드롭다운 목록(네이티브 option)은 select 의 글자색을 물려받아 다크 테마에서 흰 글씨가 흰 배경에 묻혔다. 테마 토큰으로 고정한다. */
select,
select option,
select optgroup {
    color: var(--text);
    background-color: var(--panel);
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
    opacity: .58;
}