/* 생성물 — 손으로 고치지 마라. 역할별 소스를 아래 순서로 이어붙인 것이다(싣는 순서 = 우선순위). */

/* ══ styles/tokens.css ══ */
/* semku 층 2 토큰 — 브랜드 색 슬롯 재정의 + 사이트 접두사(--sk-*) 토큰. **골격 값은 여기 없다.**
 *
 * 층 규약(공통 표준의 토큰 계약, 2026-09-17 개정):
 *   층 1  base-tokens.css(공통 표준 소유)  골격 값(radius·간격 6단·글자 6단·폭 760·거터·터치 44·bp·버튼 3종) —
 *         이 저장소에 사본을 두지 않는다. 배포 트리를 만들 때 공통 표준 정본에서 그대로 반입하고 바이트 동일을 확인한다.
 *         면은 그 파일을 site.css **앞에** 싣는다.
 *   층 2  이 파일. 덮는 것은 색 슬롯뿐(--bg · --accent · --accent-ink · --accent-soft · --good · --warn · --bad).
 *         --r* · --s* · --t* · --maxw · --gutter · --touch · --bp-* 는 **한 줄도 다시 적지 않는다**(재정의 0 — 표류의 뿌리).
 *   층 3  base·frame·templates·components·pages·calendar·nenrei — 층 1·2 의 var() 만 소비한다.
 *
 * 색은 2026-09-16 확정 시각 언어(Calculated Austerity)의 값 그대로다(개편에서 색은 바꾸지 않는다).
 * --ink · --ink-2 · --line · --surface · --shadow-* 는 층 1 중립값을 그대로 쓴다(대비를 깨는 임의 조정 금지 — 층 1 §5).
 * --line 은 **비텍스트 경계 전용**이다(A1). 글자색으로 쓰지 않는다 — 글자는 --ink / --ink-2 만.
 */

:root {
  /* ── 색 슬롯 재정의(Light) — 확정 팔레트의 역할에서 옮겨 적었다 ── */
  --bg: #f4f1f4;            /* ← surface (브랜드 바탕 — 층 1 이 허용하는 슬롯). 2026-09-17 부분 뉴몰피즘 B: #fbf8fc → 한 단 어두운 웜그레이 —
                               카드 흰색(--surface)은 그대로라 카드/바탕 대비가 처음 생긴다. 본문 먹(--ink·--ink-2) 대비는 AA 유지(실측은 시공 보고). */
  --accent: #0037b0;        /* ← primary */
  --accent-ink: #ffffff;    /* ← on-primary */
  --accent-soft: #f6f2f7;   /* ← surface-container-low — 결과 웰·칩 트랙·인셋(종전 --local-inset) */
  --good: #17633d;          /* 대응 역할 없음(M3 에 success 가 없다) — 기존 값 유지, 흰 표면에서 7:1 이상 */
  --warn: #7f2500;          /* ← tertiary */
  --bad: #ba1a1a;           /* ← error */
  color-scheme: light;

  /* ── 사이트 접두사 토큰(--sk-*) — 층 1 에 자리가 없는 것만. 골격 값을 바꾸지 않고 **추가**한다 ── */
  --sk-line-strong: #747686;   /* ← outline — 문서 "Structural Borders (Strong/Hover)" · 차트 보조 채움. 층 1 --line 보다 진한 경계 */
  /* 라틴·숫자는 self-host 한 Hanken Grotesk 가 선두다(@font-face 는 base.css §0, unicode-range 로 라틴만 받는다).
   * 한글·일본어 글리프는 그 범위 밖이라 그대로 다음 후보로 떨어진다. 제3자 요청은 0이다. */
  --sk-font-ko: "Hanken Grotesk", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --sk-font-en: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sk-font-de: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sk-font-es: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sk-font-ja: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
  /* 수치·수식·표 — 자릿수가 흔들리지 않게 tabular-nums 와 함께 쓴다(소비처는 base.css). */
  --sk-font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 우하단에 겹쳐 뜨는 의견 위젯을 비켜 주는 본문 아래 높이 — 터치 타깃 2배(88px). 여백 단계가 아니라 **높이**로 확보한다
   * (frame.css 꼬리 ::after). 88 은 간격 6단 밖의 값이라 padding 으로 두면 스케일 밖 값이 된다. */
  --sk-fab-clearance: calc(var(--touch) * 2);

  /* ── 부분 뉴몰피즘 B(2026-09-17, 목업 neu-semku B열) — 그림자 토큰. 층 1 --shadow-1/2(플라이아웃·대화상자)는 그대로 두고 **추가**한다.
   * 돌출(--sk-up: 카드 / --sk-up-sm: 머리·버튼·선택 칩·탭 선택·근무 칩·예시 배지)과 눌림(--sk-in: 입력·결과 데크·트랙·미선택 칩)뿐이다.
   * 상태는 그림자로 말하지 않는다 — 선택·예시·비활성·오류는 여전히 색·경계·굵기 축이고 그림자는 보조 질감이다.
   * 토글(.tog)은 이 축 밖이다(궤도·손잡이 그림자 0 — 체크박스·라디오 규칙이 none 으로 끊는다).
   * 다크에서는 세 토큰이 none 이다: 하이라이트가 면과 동색이라 그림자가 안 보이고, 억지로 키우면 테두리 링이 된다 —
   * 입체는 면 밝기 단차(--surface 가 --bg 보다 한 단 밝음)가 맡는다. --sk-hi/--sk-lo 는 세 그림자식의 원자값이다. */
  --sk-hi: #ffffff;
  --sk-lo: #dcd7dd;
  --sk-up: -3px -3px 8px var(--sk-hi), 3px 3px 8px var(--sk-lo);
  --sk-up-sm: -2px -2px 5px var(--sk-hi), 2px 2px 5px var(--sk-lo);
  --sk-in: inset 2px 2px 5px var(--sk-lo), inset -2px -2px 5px var(--sk-hi);

  /* ── 수직 간격 4단(공통 표준 PRINCIPLES 6-1, 2026-09-17) — 역할별 **1값**. 층 3 이 소비하는 이름은 이 넷뿐이고,
   * 값은 층 1 base-tokens §2-0 의 --v-* 를 **가리킬 뿐**(별칭 — 층 2 가 숫자를 갖지 않는다. 층 1 이 바뀌면 그대로 따라간다).
   * 줄간격·섹션 간격이 화면·섹션마다 들쭉날쭉해 스크롤만 길어지는 "벙벙함"을 막는 축이다: 같은 역할인데 다른 값 = 적색.
   *   --gap-line     본문 행간(연속 읽기)              ← --v-line    (= --t3-lh 1.6 · 단위 없는 배수 — 층 1 d40b058 별칭)
   *   --gap-item     항목 간(리스트·폼 항목·칩·힌트 줄)  ← --v-item    (--s2 8px)
   *   --gap-block    블록 간(같은 섹션 안 덩어리)        ← --v-block   (--s4 16px)
   *   --gap-section  섹션 간(주제 전환)                 ← --v-section (--s6 32px)
   * 2026-09-17 층 1 승계: 종전 층 2 독자값(--t3-lh 1.6 · --s5 24)에서 층 1 정본값으로 — 사유는 "값은 층 1 만 소유"(원칙 5).
   * 같은 날 층 1 d40b058: --v-line 이 --t3-lh(1.6) 별칭이 됐다(값 정본은 --t3-lh 하나) · --v-section 32.
   * 제목류 행간(--t5-lh·--t6-lh)은 글자 스케일의 일부라 이 축이 아니다. 전 면 공용 CSS(base·frame·templates·components·pages·calendar·nenrei)의
   * 세로 간격(margin-top/bottom·margin-block·row-gap·gap 세로 성분·line-height)은 이 넷 또는 0 만 쓴다(padding 은 이 축 밖).
   * 예외는 「gap-exempt: 사유」 주석 표식이 바로 앞에 선 규칙뿐이고(표식 주석 안에 닫는 별표-슬래시를 적으면 주석이 조기 종료된다), 수직 밀도 검사가 번들을 정적으로 세어 상한을 잠근다. */
  --gap-line: var(--v-line);
  --gap-item: var(--v-item);
  --gap-block: var(--v-block);
  --gap-section: var(--v-section);

  /* 종이 치수(mm·pt)는 화면 스케일 축이 아니다 — 인쇄 시트(.print-sheet)는 A4 실치수로 재서 넘침을 판정한다.
     그 값들은 calendar.css·nenrei.css 의 인쇄 절에 물리 단위로 남아 있다(토큰화 대상 아님). */
}

/* ══════════ 어두운 배색 — 색 슬롯 한 벌(전 면 반응). 같은 이름 재정의만, 새 이름 0 ══════════
 * 값의 출처는 확정 디자인 문서 Colors §Dark Mode 절이다(캔버스 #121214 · 인셋 #27272A · 강한 경계 #44444C).
 * 주색은 #3B82F6 이 아니라 같은 절의 focus tone **#60A5FA** — 인셋 위 글자에서 4.05:1 이라 대비 하한(4.5:1)을 넘지 못해
 * 한 단계 밝은 쪽을 택했다(인셋 위 5.9:1). 성공·경고·오류는 같은 팔레트의 어두운 배색 대응값(경고 ← tertiary-fixed-dim).
 * 글자·면·경계(--ink·--ink-2·--surface·--line)는 층 1 의 다크 중립값을 그대로 받는다.
 * 조건은 층 1 과 같은 prefers-color-scheme 하나뿐이다 — 층 1 이 모르는 data-theme 스위치를 층 2 가 따로 두면
 * 색 슬롯만 어두워지고 글자·면은 밝은 채 남는 반쪽 배색이 생긴다(종전 :root[data-theme] 블록 철거).
 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121214;
    --accent: #60a5fa;
    --accent-ink: #0b1a2e;
    --accent-soft: #27272a;
    --good: #83d9a6;
    --warn: #ffb59c;
    --bad: #ffb4ab;
    --sk-line-strong: #44444c;
    /* 뉴몰피즘 그림자는 다크에서 none — 입체는 면 단차(--surface #242427 > --bg #121214)로 */
    --sk-up: none;
    --sk-up-sm: none;
    --sk-in: none;
    color-scheme: dark;
  }
}

/* ══ styles/base.css ══ */
/* 바탕 — 문서 기본값·글 단계·링크·폼 컨트롤의 공통 계약.
 *
 * 값은 쓰지 않는다: 크기·여백·색은 전부 tokens.css 의 이름으로만 받는다.
 * 구조 정본은 확정 화면이다(정본 위치는 scripts/ 문서 참조).
 */

/* ── §0 글꼴 — 같은 출처에서 낸다(제3자 요청 0) ──
 * 라틴·숫자만 담은 subset 이라 unicode-range 로 범위를 못 박는다. 한글·일본어 글리프는 이 범위 밖이라
 * 스택의 다음 후보(네이티브 CJK)로 그대로 떨어진다. swap: 글꼴이 늦어도 글자는 먼저 읽힌다.
 */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  /* U+00B7(가운뎃점)만 일부러 뺀다 — 한국어 본문의 「날짜·시간」처럼 한글 사이에 자주 서는 글자라,
     이 글꼴이 가져가면 점 하나만 라틴 x-height 기준으로 그려져 앞뒤 한글과 높이가 어긋난다.
     범위에서 빼면 로케일 스택의 CJK 글꼴이 그대로 그린다. */
  unicode-range: U+0000-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2190-21BB, U+2212,
    U+2215, U+25A0-25FF, U+2713, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* 위와 같은 이유로 U+00B7 은 뺀다(수식·표 안에도 한국어 가운뎃점이 섞여 든다). */
  unicode-range: U+0000-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0 solid var(--line); border-radius: var(--r1); }

html {
  -webkit-text-size-adjust: 100%;
  /* 세로 스크롤바 유무에 따른 중앙 정렬 시프트 방지 */
  scrollbar-gutter: stable;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sk-font-ko);
  font-size: var(--t3);
  line-height: var(--gap-line);
}
:lang(en) { font-family: var(--sk-font-en); }
:lang(de) { font-family: var(--sk-font-de); }
:lang(es) { font-family: var(--sk-font-es); }
:lang(ja) { font-family: var(--sk-font-ja); }

body {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}
body, input, select, textarea, button { font-size: var(--t3); }

[hidden] { display: none !important; }

/* ── 글 단계 ──
 * 무게와 자간은 확정 타이포 표의 headline/title 단계를 따른다(600 · 음수 자간).
 * 자간은 라틴 그로테스크의 측정값이라 한글에서는 절반만 준다 — 한글 자소는 좁히면 붙어 읽힌다.
 */
h1 { font-size: var(--t6); line-height: var(--t6-lh); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--t5); line-height: var(--t5-lh); font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: var(--t4); line-height: var(--t5-lh); font-weight: 600; letter-spacing: -0.01em; }
:is(h1, h2, h3):lang(en), :is(h1, h2, h3):lang(de), :is(h1, h2, h3):lang(es) { letter-spacing: -0.03em; }
h1, h2, h3 { overflow-wrap: break-word; }
p, dd, li { overflow-wrap: break-word; }
/* 문단 사이 여백은 **담는 상자**가 준다(카드·블록·근거·접힘 설명 — 전부 격자 간격 또는 자기 규칙). 바탕에서 p + p 여백을 주면
 * 격자 간격 위에 겹쳐 두 배(16+16·8+16)가 된다 — 2026-09-17 ⑫ 실측(privacy 32·srcbox 24)에서 철거. dd + dt 는 정의 목록의 항 사이 = 블록 간. */
dd + dt { margin-top: var(--gap-block); }
small, .hint, .note, .statusline, .kicker, .sample, .source-line { font-size: var(--t2); color: var(--ink-2); }
dt { font-weight: 600; }
dd { color: var(--ink-2); }
ul, ol { list-style: none; }

/* 숫자는 표·목록·단독 결과 어디서나 tabular-nums + 우측 정렬(골격 §3).
 * 확정 문서의 Strict Numeric Formatting Rule: 수치·금액·수식·입력·통계 표시는 tabular + lining 을 강제해
 * 실시간 재계산에서 소수점이 가로로 흔들리지 않게 한다. 글꼴은 자릿폭이 고정된 --font-num(JetBrains Mono).
 * 한글·일본어 단위 글자는 이 글꼴의 unicode-range 밖이라 로케일 스택으로 그대로 떨어진다. */
.num, .numeric, input, output, table, .formula, code, kbd,
.sample, .statusline, .savedd, .savedbase, .condline, #toolcount, .count {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.num, .numeric, .formula, code, kbd, table td, table th, input[inputmode="decimal"], input[inputmode="numeric"] {
  font-family: var(--sk-font-num);
}
.num, .numeric { text-align: right; }

/* ── 앵커 착지(공통 표준 1-3 · 층 1 --anchor-top) — id 를 가진 모든 요소가 착지 대상이 될 수 있으므로 한 규칙으로 여유를 준다.
 * 머리는 흐름 안(고정 아님)이라 가림은 없지만, 제목이 뷰포트 맨 윗줄에 딱 붙지 않게 --anchor-top(--s4) 만큼 띄운다. 값은 층 1 만 갖는다. */
[id] { scroll-margin-top: var(--anchor-top); }

/* ── 링크 ──
 * 문장 안 링크는 글줄을 따라 흐르게 둔다(인라인 상자는 줄바꿈이 안 돼 긴 링크가 넘친다).
 * 홀로 선 링크(내비·목록·꼬리·경로 표시·도구 목록)만 48px 타깃을 갖는다 — WCAG 2.5.8 이 문장 안 링크를 예외로 두는 것과 같은 축이다. */
a { color: var(--accent); text-underline-offset: var(--s1); }
nav a, :is(p, li, dd, dt, span, div, section, td) > a:only-child, .site a, .menu-panel a, .site-footer a, .crumbs a, .tools-other a, .tool, .skip {
  display: inline-flex; align-items: center; min-width: var(--touch); min-height: var(--touch);
}
a:hover { text-decoration-thickness: calc(var(--s1) / 2); }
/* 포커스 — 확정 문서 §3: 2px 링 + 2px 오프셋, 주변광 없음. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: calc(var(--s1) / 2) solid var(--accent);
  outline-offset: calc(var(--s1) / 2);
}

/* ── 폼 컨트롤 공통 — 타깃 = 층 1 --touch(44) · 반경 --r1 1종 ──
 * 입력칸은 패턴 A ③(부록 #16)대로 **채움 배경 + 진한 테두리 + 큰 숫자**다: 글자 --t4(22px, iOS 자동확대 하한 16 상회 —
 * 층 1 --t3 는 15px 라 입력에는 쓸 수 없다), 테두리 --ink 1.5px, 바탕 --bg. 헤어라인 입력(1단 실측 P3 "입력칸=헤어라인")을 폐기한다. */
button, .button, input, select, textarea {
  font-family: inherit;
  line-height: var(--gap-line);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  min-width: var(--touch);
  min-height: var(--touch);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  color: var(--ink);
}
input, select, textarea {
  font-size: var(--t4); line-height: var(--t5-lh);
  border: calc(var(--s1) * 0.375) solid var(--ink);
  background: var(--bg);
  box-shadow: var(--sk-in);   /* 부분 뉴몰피즘 B — 눌린 홈. 체크박스·라디오(토글 궤도 포함)는 아래 규칙이 none 으로 끊는다 */
}
input { font-weight: 600; }
/* ── 버튼 문법 3종(층 1 §6 · 원칙 9): 주 = 채움 / 보조 = 외곽선 / 텍스트. 화면마다 새 모양을 만들지 않는다.
 * 기본(클래스 없는 button)은 **보조**다. 주는 `.primary`/`.btn-pri`(+결과 안 복사 버튼), 텍스트는 `.text`/`.btn-txt`.
 * 위험(삭제)은 보조 외곽선의 **상태색**(--bad)이지 네 번째 모양이 아니다. 층 1 의 .btn-* 클래스도 같은 규칙으로 호버·비활성을 받는다. */
button, .button {
  display: inline-flex; justify-content: center; align-items: center;
  font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--accent); background: transparent;
  border: calc(var(--s1) * 0.375) solid var(--accent);
  box-shadow: var(--sk-up-sm);   /* 부분 뉴몰피즘 B — 주(채움)·보조(외곽선) 약한 돌출. 텍스트 버튼·탭 항목·달력 날짜 칸은 none */
}
button:hover:not(:disabled), .button:hover, .btn-sec:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* 입력 호버·포커스 — 문서 §3: 경계만 바뀐다(빛무리 없음) */
input:hover:enabled, select:hover:enabled, textarea:hover:enabled { border-color: var(--accent); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* 비활성 — 층 1 .btn:disabled 와 같은 모양(옅어진다). 빈 값이면 주 버튼이 이 모양으로 "아직"을 말한다(P6). */
button:disabled, .btn:disabled { opacity: .35; cursor: default; }
input:disabled, select:disabled, textarea:disabled { color: var(--ink-2); background: var(--bg); border-color: var(--line); cursor: default; }
input, select, textarea { width: 100%; min-width: 0; }
/* WebKit 은 type=search 에 네이티브 외형(둥근 모서리·자체 취소 버튼·고정 안쪽 여백)을 유지한다 —
 * 그대로 두면 iOS·Safari 에서만 옆 칩 트랙과 다른 상자가 그려진다. 모양은 우리 토큰이 정한다. */
input[type="search"] { appearance: none; -webkit-appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
/* 브라우저 기본 placeholder 는 글자색을 불투명도로 흐린다 — 다크에서 대비가 무너지므로 역할색으로 못 박는다. */
::placeholder { color: var(--ink-2); opacity: 1; }
textarea { resize: vertical; min-height: calc(var(--touch) * 2); font-weight: 400; }
select { appearance: none; padding-right: var(--s6); background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--s4) center, right calc(var(--s4) - var(--s1) + 1px) center;
  background-size: var(--s1) var(--s1), var(--s1) var(--s1);
  background-repeat: no-repeat;
}

/* 주(채움) — 화면당 1개 */
button.primary, .button.primary, .cta, .btn-pri {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
button.primary:hover:not(:disabled), .button.primary:hover, .cta:hover, .btn-pri:hover:not(:disabled) {
  background: var(--ink); border-color: var(--ink); color: var(--surface);
}
/* 위험 = 보조 외곽선 + 상태색 */
button.danger, .danger { color: var(--bad); border-color: var(--bad); background: transparent; }
button.danger:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--bad); color: var(--bad); }
/* 텍스트 */
button.text, .button.text, .btn-txt { background: transparent; border-color: transparent; color: var(--ink-2); padding-inline: var(--s2); box-shadow: none; }
button.text:hover:not(:disabled), .btn-txt:hover:not(:disabled) { background: var(--accent-soft); border-color: transparent; color: var(--ink); }
button[aria-pressed="true"], .is-selected {
  color: var(--accent); border-color: var(--accent); border-bottom-width: var(--s1);
}

/* ── 체크박스·라디오(A4) — 시각 사각 24px(s4) · 감싸는 label 탭 영역 48px · radio 는 원형+점 ── */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  flex: 0 0 var(--s5); width: var(--s5); height: var(--s5);
  min-width: var(--s5); min-height: var(--s5);
  padding: 0; position: relative;
  background: var(--surface);
  border: calc(var(--s1) / 2) solid var(--line);
  box-shadow: none;   /* 24px 사각·토글 궤도(.tog input)에는 눌림 질감을 주지 않는다 */
}
/* 원형은 모양이지 스케일 단계가 아니다 — 비율 반경을 쓴다(반경 종수 2를 늘리지 않는다). */
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked { border-color: var(--accent); background: var(--accent); }
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent-ink);
  clip-path: polygon(14% 46%, 38% 70%, 86% 22%, 96% 32%, 38% 90%, 4% 56%);
}
input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: var(--s1);
  border-radius: 50%; background: var(--accent-ink);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { border-color: var(--line); background: var(--bg); }

/* 오류 표시 — 색만으로 구분하지 않는다(설명 문구는 각 면의 오류 줄) */
.error, [aria-invalid="true"] { border-color: var(--bad); }
.error-text { color: var(--bad); font-size: var(--t2); }
.warning { color: var(--warn); }
.success { color: var(--good); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ══ styles/frame.css ══ */
/* 프레임 — 모든 면이 같은 모양으로 쓰는 머리·경로 표시·꼬리.
 *
 * 마크업은 한 곳의 프레임 데이터에서 기입한다(면마다 손으로 복제하지 않는다).
 * 값은 tokens.css 의 이름으로만 받는다.
 *
 * 머리 규칙(골격 §2·프레임 불변 계약): 전 면 1종 · 뷰포트당 높이 1값(s4×4 = 64px) · **흐름 안에 둔다(sticky/fixed 금지 — W05)**.
 * 안쪽 폭·거터는 층 1 의 --maxw · --gutter 를 main·꼬리와 **같은 이름으로** 쓴다(원칙 1 — 폭 1종, 광폭 없음).
 * 면마다 다른 것은 열려 있는 메뉴 안의 aria-current 뿐이고, 보이는 글자는 로케일 상수다.
 *
 * 배치(확정 2026-09-17): **좌상단 로고(아이콘+이름) · 그 곁에 도구 드롭다운(「도구 목록」 details) · 우상단 언어 선택 1곳.**
 * 마크업은 그대로(로고 → 도구 메뉴 → 언어 메뉴 — 읽기 순서와 같다), 배치만: 내비가 남은 폭을 차지하는 2열 격자(1fr auto)로, 도구 메뉴는 1열 시작, 언어 메뉴는 2열.
 * 도구 메뉴가 없는 로케일(de·es)도 언어 메뉴가 2열에 명시 배치돼 같은 자리에 선다(좌표 1종). auto 마진을 쓰지 않는다(골격 게이트 ⑪이 그려진 여백을 스케일과 대조한다).
 * 도구 드롭다운은 가로 리스팅이 아니다(도구 12종+ — 390 에서 겹침·줄바꿈 0 조건).
 */

/* ── 머리 ── */
.site-header {
  width: 100%;
  height: calc(var(--s4) * 4);
  display: grid;
  justify-items: center;
  background: var(--surface);
  border-bottom: calc(var(--s1) / 4) solid var(--line);
  box-shadow: var(--sk-up-sm);   /* 부분 뉴몰피즘 B(목업 B열 .site-header 값 그대로) — 경계 1px 는 남긴다(다크·고대비에서 그림자가 사라져도 머리가 머리로 보이게) */
}
.header-inner {
  width: 100%;
  max-width: var(--maxw);
  height: 100%;
  padding-inline: var(--gutter);
  display: flex;
  column-gap: var(--s2);
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

/* 로고 하나뿐이다 — 꼬리표(span.tag)는 두지 않는다(2026-09-16 판정). */
.site { display: flex; align-items: center; min-width: 0; }
/* 확정 문서 §1: 로고는 소문자 semku · font-semibold · 자간 -0.04em · 먹색.
 * 2026-09-17: 이름 왼쪽에 사이트 아이콘(favicon.svg 3D) — 아이콘+이름이 한 링크(emopu 브랜드 패턴 동형). 아이콘 한 변 = --t4(22px, 이름 글자 크기와 같은 스케일값),
 * 이름과의 간격 --s2, 세로는 flex 중앙 + 아래로 1px(--s1/4) 광학 보정(둥근 사각 아이콘의 시각 중심이 소문자 x-높이 중심보다 살짝 위에 보인다). 390 포함 전 면 동일. */
.site a {
  display: inline-flex; align-items: center; column-gap: var(--s2);
  font-size: var(--t4); line-height: var(--t5-lh); font-weight: 600;
  color: var(--ink); text-decoration: none;
  letter-spacing: -0.04em;
}
.site a img { flex: none; width: var(--t4); height: var(--t4); border-radius: 0; transform: translateY(calc(var(--s1) / 4)); }
.site a:hover { text-decoration: underline; }

.header-nav { display: grid; grid-template-columns: 1fr auto; flex: 1 1 auto; min-width: 0; column-gap: var(--s2); align-items: center; }
.header-nav .menu-tools { grid-column: 1; justify-self: start; }
/* 언어 선택은 우상단 1곳 — 도구 메뉴 유무와 무관하게 2열(오른쪽 끝) 같은 자리. */
.header-nav .language { grid-column: 2; }
/* details 기본 마커 유지(A5) — 상태 전달·키보드·포커스가 브라우저 기본 동작 그대로다. */
.menu { position: relative; border: 0; background: var(--surface); }
.menu { align-self: center; }
/* 확정 문서 §1 Navigation Controls: 바탕·경계 0 · 0.875rem · 보조 먹 · 호버에서 먹색 + 밑줄 · 44px 이상 클릭 상자. */
.menu > summary {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s2); font-size: var(--t2); line-height: var(--gap-line);
  min-width: var(--touch); min-height: var(--touch);
  white-space: nowrap; cursor: pointer; font-weight: 500; color: var(--ink-2);
}
.menu > summary:hover { color: var(--ink); text-decoration: underline; }
.menu[open] > summary { color: var(--ink); text-decoration: underline; }
/* 펼침 표식(3초 시험 2026-09-17 「도구 목록」 chevron 없음 2/9) — summary 가 display:flex 라 브라우저 기본 마커가 그려지지 않는다.
 * .workchip::after 와 같은 경계선 화살표(문자 0 · currentColor), 열리면 뒤집힌다. 프레임 마크업은 불변(CSS 의사요소만). */
.menu > summary { column-gap: var(--s2); }
.menu > summary::after {
  content: ""; flex: none; width: var(--s2); height: var(--s2);
  border-right: calc(var(--s1) / 2) solid currentColor; border-bottom: calc(var(--s1) / 2) solid currentColor;
  transform: translateY(calc(var(--s1) * -0.5)) rotate(45deg);
}
.menu[open] > summary::after { transform: translateY(calc(var(--s1) * 0.5)) rotate(225deg); }
/* 펼친 판 — 문서 Elevation "Overlay / Flyout": 1px 둘레 경계 + 저확산 가장자리 그림자.
 * 판은 자기 summary 쪽 가장자리에 맞춘다 — 우상단 언어 메뉴는 오른쪽 정렬, 로고 곁 도구 메뉴는 왼쪽 정렬(뷰포트 밖으로 안 나간다). */
.menu-panel {
  position: absolute; right: 0; top: 100%;
  width: calc(var(--s6) * 8);
  padding: var(--s4);
  display: grid; gap: var(--gap-item);
  background: var(--surface);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  box-shadow: var(--shadow-1);
  z-index: 5;
}
.menu-tools .menu-panel { right: auto; left: 0; }
.menu-panel strong { font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }
.menu-panel a {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--gap-item); min-height: var(--touch);
  font-size: var(--t2); line-height: var(--gap-line);
}
.menu-panel a[aria-current="page"] { font-weight: 700; }
.menu-panel small { font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }

/* ── 경로 표시(h1 위) — 페이지 JSON-LD BreadcrumbList의 항목을 같은 순서·같은 글로 보여 준다. ── */
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2);
  font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2);
}
.crumbs li { display: inline-flex; align-items: center; min-height: var(--touch); }
/* 구분자는 확정 화면의 글자(›)를 그대로 쓴다. 색은 --line 이 아니라 보조 먹이다 — --line 은 비텍스트 전용(A1). */
.crumbs li + li::before { content: "›"; margin-right: var(--s2); color: var(--ink-2); }
.crumbs a { color: var(--ink-2); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ── 꼬리 — 로케일당 1변형. 마지막 법적 링크 아래는 위젯 회피 높이(FAB 겹침 0) ── */
.site-footer {
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--gutter);
  padding-top: var(--s5);
  padding-bottom: var(--s5);
  margin-top: var(--gap-section);
  border-top: calc(var(--s1) / 4) solid var(--line);
  display: grid; gap: var(--gap-block);
}
/* 위젯 회피는 여백 단계가 아니라 빈 블록의 높이로 확보한다(--sk-fab-clearance = 터치 2배). 스케일 밖 padding 을 만들지 않는다. */
.site-footer::after { content: ""; display: block; height: var(--sk-fab-clearance); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gap-block) var(--s4); align-items: center; }
/* 확정 문서 §7 Quiet Footer — label-sm 단계 · 보조 먹 · 호버에서만 밑줄. */
.footer-top strong { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; letter-spacing: -0.04em; color: var(--ink); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--gap-item); }
.site-footer a {
  display: inline-flex; align-items: center; min-height: var(--touch);
  font-size: var(--t2); padding-inline: var(--s2); color: var(--ink-2); text-decoration: none;
}
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer p { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }

/* ══ styles/templates.css ══ */
/* 템플릿 — 면의 골격 종류와 컨테이너 폭.
 *
 *   t1 홈·허브 / t2 도구 / t3 출력·표 / t4 안내
 * 폭은 **1종뿐이다**(프레임 불변 계약 1 · 층 1 --maxw = 760px). 종전 광폭(`.wide` 1144px)은 폐지했다 —
 * 달력 12개월 격자·早見表는 760 안에서 성립한다(calendar.css 브레이크포인트 560/860). 거터도 층 1 --gutter 하나다.
 */

main.wrap {
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--gutter);
  padding-top: var(--s4);
  padding-bottom: var(--s6);
}

/* 본문 블록 사이 간격 — 면마다 손으로 여백을 주지 않는다. 역할(6-1): 본문 직접 자식 = 섹션 간 · h1 은 경로 표시 아래 블록 간 · 리드는 h1 아래 항목 간. */
main.wrap > * + * { margin-top: var(--gap-section); }
main.wrap > h1 { margin-top: var(--gap-block); }
main.wrap > .lede { margin-top: var(--gap-item); }
/* 탭 패널 안 형제(입력 카드 → 조건 줄 → 결과 → 차트 → 초기화 줄)는 같은 과업 블록의 덩어리 = 블록 간 1값(6-1). 종전 규칙 0 이라 naljja·bokri 에서 카드와 결과가 맞닿았다(2026-09-17 fix17 후속 ③). */
[role="tabpanel"] > * + * { margin-top: var(--gap-block); }
.lede { color: var(--ink-2); font-size: var(--t3); line-height: var(--gap-line); }

/* ── T1 홈·허브 — 언어 창구는 머리 우상단 언어 메뉴 1곳(2026-09-17 확정, 본문 nav.languages 제거). ── */

/* ── T2 도구 — 필수 입력군이 먼저, 확정 결과가 그 뒤(W10·W08) ── */
.t2 .workbench, .t3 .workbench {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s6) * 11)), 1fr));
  row-gap: var(--gap-block); column-gap: var(--s5);
  align-items: start;
}

/* ── T4 안내 — 문서 자체가 산출물이다. 블록 안 간격은 .block 격자(블록 간)가 준다 — 종전 `> * + *` 여백은 격자 위에 겹쳐 32 였다(⑫ 실측, 철거). ── */
.t4 .block, .t4 section.block { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s5); }
.t4 .block h2 { font-size: var(--t4); line-height: var(--t5-lh); }
.t4 code { font-family: inherit; font-size: inherit; overflow-wrap: anywhere; }

/* ══ styles/components.css ══ */
/* 컴포넌트 — 입력군·탭·결과·행동·접힘·표·차트·도구 목록·고지.
 *
 * 값은 tokens.css 의 이름으로만 받는다. 컴포넌트는 역할 이름(--ink·--accent·--surface…)만 소비하고
 * 면별 예외를 두지 않는다. 구조·배치는 확정 화면(Calculated Austerity 4장)을 따른다.
 *
 * 2026-09-16 판정 전환: 예전 설계 판단 D03("카드로 감싸지 않는다")을 **폐기**한다. 확정된 화면은
 * 입력군을 흰 표면 + 1px 경계 + 낮은 반경의 **계산 유닛 카드**로 감싸고, 결과는 그 안의 인셋 웰이다
 * (문서 Elevation 절의 Level 1 / Level 2). 깊이는 톤과 경계선이 만들고, 2026-09-17 부분 뉴몰피즘 B 가 그 위에
 * 저강도 그림자 질감(tokens.css --sk-up/--sk-up-sm/--sk-in)을 **보조로만** 얹었다 — 경계 1px 는 전부 남는다(다크는 그림자 none).
 */

/* ── 입력군(W10: 필수 입력군을 먼저 한 묶음으로) ──
 * .card = Level 1 계산 유닛 컨테이너. .stack 은 감싸지 않는 묶음(마크업상 카드가 아닌 자리)이라 배경을 주지 않는다. */
.card {
  display: grid; gap: var(--gap-block); min-width: 0;
  background: var(--surface);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  padding: var(--s5);
  box-shadow: var(--sk-up);
}
.stack { display: grid; gap: var(--gap-block); min-width: 0; }
.field { display: flex; flex-direction: column; gap: var(--gap-item); min-width: 0; }
.field > .label, .label { display: block; font-weight: 500; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); }
.hint { display: block; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.row, .fields, .parts {
  display: grid;
  /* 최소 열폭 144(--s6×4.5, 2026-09-17 fix17 후속 — 종전 160): 390 폰의 카드 안폭 310 에 2열(144×2+16)이 서야 필수 입력 쌍(수량·평단가 / 수익률·기준 / 기간·단위)이
   * 세로로 적층되지 않고 결과가 첫 화면에 든다(3초 시험 8-1). 층 1 토큰 재정의 0 — 스케일 별칭의 배수만 바꿨다. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s6) * 4.5)), 1fr));
  gap: var(--gap-block);
  min-width: 0;
}
.row > *, .fields > *, .parts > * { min-width: 0; }
/* 단위를 입력 밖에 두는 한 줄 — placeholder 에 단위를 넣지 않기 위한 배치다. */
.unitrow, .withunit { display: flex; align-items: center; column-gap: var(--s2); }
.unitrow input, .withunit input { flex: 1; min-width: 0; }
.unitrow .unit, .withunit .unit { flex: none; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); white-space: nowrap; }
.field input[inputmode="decimal"], .field input[inputmode="numeric"] { text-align: right; }
/* select 는 **내용 폭**으로 둔다(층②b, G3-02). 세로 flex(.field)·grid 안에서 늘어나는 것은 stretch 의
 * 부작용이지 설계가 아니었다 — 열 전체로 늘이면 유일한 조작 표식인 화살표가 오른쪽 끝, 곧 우하단 고정
 * 위젯 구역으로 밀려나 첫 화면에서 가려진다(`/pyeongdan/ko` 390px: select [16,769,374,817] vs FAB [240,784,374,828]).
 * 내용이 짧아도 min-width(여백 단계 s6×2)까지는 유지해 옆 입력칸과 나란한 폭을 지키고, 열보다 길면 max-width 가 받는다.
 * 위젯 가림 여부는 배포 전 오버레이 검사가 판정한다. */
select { width: fit-content; min-width: min(calc(var(--s6) * 5), 100%); max-width: 100%; }
fieldset { min-width: 0; }
legend { padding: 0; font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink); margin-bottom: var(--gap-item); }

/* ── 선택(체크박스·라디오) — A4: 시각 사각 24px + 감싸는 label 탭 영역 48px ── */
.chips, .choices, .actions, .modes, .dayrow, .inline-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-item);
}
/* 칩 — 확정 화면의 구획 트랙 안 항목. 비활성은 투명 배경 + 보조 먹(눌림), 선택은 흰 표면 + 강한 경계(약한 돌출 — 판별은 배경·경계·굵기 3축). */
.chip, .choice {
  display: inline-flex; align-items: center; justify-content: center; column-gap: var(--s2);
  min-height: var(--touch); padding-inline: var(--s4);
  font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2);
  border: calc(var(--s1) / 4) solid transparent; border-radius: var(--r1);
  cursor: pointer; user-select: none;
  box-shadow: var(--sk-in);
}
.chip:hover, .choice:hover { color: var(--ink); }
.chip:has(input:checked), .choice:has(input:checked) {
  color: var(--ink); font-weight: 500;
  background: var(--surface); border-color: var(--sk-line-strong);
  box-shadow: var(--sk-up-sm);
}
/* 라디오 트랙(계산 방식 전환)의 선택 항목은 탭과 같은 문법 — 채움. 같은 역할은 같은 모양(원칙 9). */
.modes .chips .chip:has(input:checked), .chips.modes .chip:has(input:checked) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.chip:has(input:disabled), .choice:has(input:disabled) { color: var(--ink-2); cursor: default; }
/* 라디오·체크박스를 곁들이지 않는 순수 선택 칩(계산 방식 전환)은 트랙 안에서 네모 상자를 감춘다 —
 * 선택 사실은 배경·경계·굵기 세 축으로 전한다(색만으로 구분하지 않는다). */
/* gap-exempt: 트랙 안 항목 사이 미세 간격(--s1) — 세로 간격 역할이 아니라 컨트롤 내부 정렬 */
.modes .chips, .chips.modes, .tabtrack {
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  padding: var(--s1);
  gap: var(--s1);
  box-shadow: var(--sk-in);
}
.modes .chips .chip, .chips.modes .chip { flex: 1 1 auto; gap: 0; box-shadow: none; }   /* 트랙이 눌림이므로 안의 항목은 겹눌림 0 */
/* 트랙 안에서는 라디오 네모를 화면 밖으로 접는다 — 선택 사실은 흰 표면·경계·굵기가 전하고,
 * 요소 자체는 남아 있어 탭 순서·낭독·키보드 화살표 이동이 그대로다. 포커스 테는 감싸는 label 이 받는다. */
.modes .chips .chip > input[type="radio"], .chips.modes .chip > input[type="radio"] {
  position: absolute; flex: none;
  width: 1px; height: 1px; min-width: 1px; min-height: 1px;
  border: 0; background: transparent; clip-path: inset(50%);
}
.modes .chips .chip:has(input:focus-visible), .chips.modes .chip:has(input:focus-visible) {
  outline: calc(var(--s1) / 2) solid var(--accent); outline-offset: calc(var(--s1) / 2);
}

/* ── 탭(role=tab 또는 aria-pressed) — 확정 문서 §2 Segmented Tab Controls ── */
/* gap-exempt: 트랙 안 항목 사이 미세 간격(--s1) — 컨트롤 내부 정렬 */
.tabs {
  display: flex; flex-wrap: wrap; gap: var(--s1);
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  padding: var(--s1);
  box-shadow: var(--sk-in);
}
.tabs button {
  flex: 1 1 calc(var(--s6) * 5); min-height: var(--touch);
  font-size: var(--t3); line-height: var(--gap-line); font-weight: 400;
  color: var(--ink-2); background: transparent;
  border: calc(var(--s1) / 4) solid transparent;
  box-shadow: none;
}
.tabs button:hover:not(:disabled) { background: transparent; color: var(--ink); border-color: transparent; }
/* 선택 = 채움(패턴 A·목업 .seg — 1단 실측 "세그먼트 선택 상태가 흰 배경뿐이라 3초 판별 불가"의 처방). 글자 무게도 함께 바뀐다. */
.tabs button[aria-selected="true"], .tabs button[aria-pressed="true"] {
  color: var(--accent-ink); font-weight: 600;
  background: var(--accent); border-color: var(--accent); border-bottom-width: calc(var(--s1) / 4);
  box-shadow: var(--sk-up-sm);
}
.tabs button[aria-selected="true"]:hover, .tabs button[aria-pressed="true"]:hover { background: var(--accent); color: var(--accent-ink); }

/* ── 결과(원칙 4) — 확정 문서 §4 Numerical Display & Formula Breakdown(Result Deck) ──
 * Level 2 인셋 톤 + 낮은 반경 + 1px 경계. 위쪽 행동색 띠는 **남긴다**: 입력 대기·오류를 색만이 아니라
 * 글자 크기·무게와 함께 구분하는 상태 축이고(아래 [data-empty]·[data-state=error]), 확정 화면에 그 두 상태가 없다. */
.result {
  display: grid; gap: var(--gap-block);
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  border-top: calc(var(--s1) / 2) solid var(--accent);
  padding: var(--s5);
  box-shadow: var(--sk-in);
}
.result .rlabel, .result .kicker {
  display: block; font-size: var(--t2); line-height: var(--gap-line); font-weight: 500; color: var(--ink-2);
}
/* 라틴 로케일의 마이크로 라벨만 대문자로 세운다(확정 화면의 결과 데크 라벨) — 한글·일본어에는 대문자가 없다. */
.result .rlabel:lang(en), .result .rlabel:lang(de), .result .rlabel:lang(es),
:lang(en) .result .rlabel, :lang(de) .result .rlabel, :lang(es) .result .rlabel {
  text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t1); line-height: var(--gap-line);
}
/* 결과 숫자 = 화면 최대 글자(--t6) · 위계 1위 · 가운데(목업 .result .big).
 * 글꼴은 본문 스택(자간 -0.02em·600 — self-host 가변 글꼴의 상한). 고정폭 수치 글꼴은 표·수식·입력의 자릿수 정렬용이지 헤드라인용이 아니다
 * (400 한 굵기뿐이라 굵게 하면 합성 볼드가 된다). 자릿수 흔들림은 tabular-nums 로 잡는다. */
.result .num, .result .clock {
  display: block; font-size: var(--t6); line-height: var(--t6-lh); font-weight: 600; color: var(--ink);
  font-family: inherit; letter-spacing: -0.02em; text-align: center;
}
.result .alt { text-align: center; }
.result .num.sm { font-size: var(--t5); line-height: var(--t5-lh); }
.result .rule, .result .alt, .result .src, .result .hint { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
/* 산출식·기준 줄은 1px 헤어라인으로 나눈 키-값 행이다(확정 문서 §4 Formula Breakdown List). */
.result .rule + .rule { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s2); }
.result .rule strong { color: var(--ink); font-weight: 600; }
.result .lines { white-space: pre-line; }
.result .src { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s4); }
/* 세 항목을 같은 무게로 나란히 — 한 항목만 큰 숫자로 세우지 않는다(W04: 라벨 위 · 값 아래). */
.result .vatlist { display: grid; gap: var(--gap-item); }
/* gap-exempt: 라벨·값 한 쌍의 내부 정렬(--s1) — 항목 간이 아니라 컴포넌트 안 미세 정렬 */
.result .vatrow { display: grid; gap: var(--s1); }
.result .vatlabel { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink-2); }
.result .vatval { font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700; color: var(--ink); text-align: right; }
/* 숫자 + 단위는 **단어 단위**로 유지한다(W04) — 단어 중간에서 끊지 않는다. */
.result .num, .result .vatval, .result .clock { overflow-wrap: break-word; }
.result .num > span, .result .vatval > span, .result .clock > span { display: inline-block; white-space: nowrap; }
/* 입력 대기 — 확정 결과와 같은 무게를 갖지 않는다(띠 색만 중립으로). 문구는 그대로다. */
.result[data-empty] { border-top-color: var(--line); }
.result[data-empty] .num { font-size: var(--t3); line-height: var(--gap-line); font-weight: 400; color: var(--ink-2); }
.result[data-state="error"] { border-top-color: var(--bad); }
.result[data-state="error"] .num { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--bad); }
.result .src details { border: 0; padding: 0; }
.result .src details > summary { min-height: var(--touch); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.result .src li, .result .src p { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); white-space: pre-line; }
.result .src ul { display: grid; row-gap: var(--gap-item); }

/* 상시 조건 줄 — 입력 끝과 결과 사이. 말줄임·가로 스크롤로 항목을 감추지 않는다. */
.condline { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); overflow-wrap: break-word; }
.condline:empty { display: none; }

/* ── 행동 위계(W07) — 주 행동 = accent 채움 · 위험 = bad 외곽 · 되돌리기/닫기 = 텍스트 ── */
.copyrow, .resetrow, .next {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--gap-item); column-gap: var(--s4);
}
.result .copyrow, .result .actions { justify-content: flex-end; }
.copyrow > button:first-of-type:not(.secondary) {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.copyrow > button:first-of-type:not(.secondary):hover:not(:disabled) {
  background: var(--ink); border-color: var(--ink); color: var(--surface);
}
/* 링크형 버튼 — 보조(외곽선) 문법 그대로(버튼 3종 밖의 모양을 만들지 않는다). 주 행동인 링크는 .btn-pri 로 채움. */
.next a.btn-pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.next a.btn-pri:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
/* gap-exempt: 단일 행 버튼 안의 line-height 1 — 글줄이 아니라 컨트롤 높이(--touch)가 세로를 정한다 */
.linkbtn, .ghost, .next a {
  display: inline-flex; justify-content: center; align-items: center;
  min-width: var(--touch); min-height: var(--touch); padding: var(--s3) var(--s4);
  border: calc(var(--s1) * 0.375) solid var(--accent); border-radius: var(--r1);
  background: transparent; color: var(--accent);
  font-family: inherit; font-size: var(--t3); line-height: 1; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.linkbtn:hover, .ghost:hover, .next a:hover { background: var(--accent-soft); border-color: var(--accent); }
.linkbtn.danger { color: var(--bad); border-color: var(--bad); }
.linkbtn.danger:hover { background: var(--bg); border-color: var(--bad); }
/* 확정 문서 Border Rules: 경계는 언제나 1px 실선이고 점선·파선을 쓰지 않는다.
 * "더 넣을 자리"라는 뜻은 파선이 아니라 전폭 + 인셋 톤이 전한다. */
.ghost { border-style: solid; width: 100%; }
/* 삭제·폐기는 위험 외곽선(W07) */
.rowdel, button.rowdel, .savedlist button[data-act="del"] { color: var(--bad); border-color: var(--bad); }
.rowdel:hover:not(:disabled) { background: var(--bg); }
.next .hint { flex: 1 1 100%; }
.copystate { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.copyfallback { font-size: var(--t2); line-height: var(--gap-line); }

/* ── 토글(패턴 A ·목업 .tog) — 체크박스 → 스위치. 켜짐이 모양(채움+손잡이 이동)으로 보이고 켜면 결과가 즉시 바뀐다. ──
 * 마크업은 `label.tog > input[type=checkbox] + 글자` 그대로라 상태·낭독·키보드는 체크박스 그대로다. 손잡이·궤도 치수는 터치 타깃에서 파생한다. */
.tog { display: inline-flex; align-items: center; column-gap: var(--s2); min-height: var(--touch); cursor: pointer; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); }
.tog input[type="checkbox"] {
  appearance: none; margin: 0; padding: 0; position: relative; flex: none;
  width: calc(var(--touch) - var(--s1)); height: var(--s5); min-width: 0; min-height: 0;
  border: 0; border-radius: var(--r2); background: var(--line); transition: background .15s;
}
.tog input[type="checkbox"]::after {
  content: ""; position: absolute; top: var(--s1); left: var(--s1);
  width: var(--s4); height: var(--s4); border-radius: var(--r2); background: var(--surface);
  clip-path: none; transition: left .15s;
}
.tog input[type="checkbox"]:checked { background: var(--accent); }
.tog input[type="checkbox"]:checked::after { left: calc(var(--touch) - var(--s1) - var(--s4) - var(--s1)); background: var(--accent-ink); }
.togs { display: flex; flex-wrap: wrap; gap: var(--gap-item) var(--s5); align-items: center; }   /* 토글(44px)·칩·힌트 묶음이 한 줄에 설 때 세로 중앙(종전 naljja 면 한정 → 공용) */
/* 토글 줄 안의 힌트 묶음 — 카드 안 힌트를 토글 **옆** 한 줄로 붙인다(문구 불변·배치만). 넓으면 토글 옆, 좁으면 토글 줄 바로 아래로 접힌다. */
.togs .hints { flex: 1 1 auto; min-width: 0; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.togs .hints .hint { display: inline; }

/* ── 근무 조건 접근점(공통 표준 8-1 인과 가시성·8-2 맥락 응집) ──
 * 영업일 조작부(토글 또는 단위 select)와 요약 칩은 한 묶음(.bizrow)이다 — 좁은 화면에서 묶음이 통째로 다음 줄로 내려가 칩이 제 조작부 곁에 남는다.
 * 요약 칩 = 공개(disclosure) 버튼 `button.workchip[aria-expanded][aria-controls]`. 모양은 **선택 칩**(.chip:has(:checked)) 문법 그대로
 * (흰 표면 + 강한 경계, r1, 44px) — 버튼 3종 밖의 네 번째 위계가 아니다. 펼침 표식은 글자가 아니라 경계선 화살표(::after), 열리면 뒤집힌다.
 * 비유효 = 모양: 그 탭의 영업일 모드가 꺼지면 disabled(층 1 .btn:disabled 값 .35) + not-allowed. 문구는 그대로(조건이 보존됨을 보인다). */
.bizrow { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: var(--gap-item); column-gap: var(--s2); min-width: 0; }
.workchip {
  display: inline-flex; align-items: center; column-gap: var(--s2);
  min-height: var(--touch); padding-block: 0; padding-inline: var(--s3);
  font-size: var(--t2); line-height: var(--gap-line); font-weight: 500; color: var(--ink);
  background: var(--surface); border: calc(var(--s1) / 4) solid var(--sk-line-strong); border-radius: var(--r1);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
  box-shadow: var(--sk-up-sm);
}
.workchip:hover:not(:disabled) { background: var(--surface); border-color: var(--accent); color: var(--ink); }
.workchip::after {
  content: ""; width: var(--s3); height: var(--s3);
  border-right: calc(var(--s1) / 2) solid var(--accent); border-bottom: calc(var(--s1) / 2) solid var(--accent);
  transform: translateY(calc(var(--s1) * -0.5)) rotate(45deg);
}
.workchip[aria-expanded="true"] { border-color: var(--accent); }
.workchip[aria-expanded="true"]::after { transform: translateY(calc(var(--s1) * 0.5)) rotate(225deg); }
.workchip:disabled { opacity: .35; cursor: not-allowed; }
/* 패널 자리표시자 — 패널 DOM 은 1벌이고 면 스크립트가 활성 탭의 자리로 옮긴다(컨트롤 중복 0). display:contents 라 빈 자리는 카드 격자에 칸(=간격)을 만들지 않는다. */
.workslot { display: contents; }
/* 패널 — 접근점 줄 바로 아래·결과 위, 카드 안 인셋 톤(결과 웰과 같은 Level 2). 안의 컨트롤(요일 칩·제외일·고지·초기화)은 옛 하단 섹션 그대로. */
.workpanel {
  display: grid; row-gap: var(--gap-block);
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  padding: var(--s4);
  box-shadow: var(--sk-in);
}
.workpanel .chip:has(input:checked) { background: var(--surface); }
.workpanel p + p { margin-top: 0; }   /* 격자 간격이 이미 블록 간이다 — 문단 규칙과 겹쳐 두 배가 되지 않게 */
.workpanel .resetrow .hint { flex: 1 1 100%; }
/* 머리 줄 — 제목(왼쪽) + 실시간 에코(오른쪽). 에코는 활성 탭 결과 숫자 문자열 그대로(새 문장 0) — 패널을 펼치면 큰 숫자가 화면 밖이라 조작→반영을 여기서 되비춘다. */
.workhead { display: flex; align-items: center; justify-content: space-between; column-gap: var(--s3); }
.worktitle { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.workecho { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap; }
.workecho.is-updated { color: var(--accent); }
/* 결과 숫자 갱신 모션 1회(패턴 A ②) — 조건을 바꾼 직후에만. prefers-reduced-motion 이면 base.css 가 animation 을 끈다. */
@keyframes numpulse { 0% { transform: scale(1.06); color: var(--accent); } 100% { transform: none; color: var(--ink); } }
.result .num.is-updated { animation: numpulse .5s ease-out 1; }

/* ── 예시 상태(패턴 A ① · 확정 양식의 회색조 추가분) — 첫 화면은 예시가 이미 계산된 상태다. ──
 * 표식은 모양이다: 입력 카드·결과에 점선 테두리 + 「예시」 배지, 결과 숫자는 **회색조(--ink-2)**. 아무 입력이나 만지면
 * 면 스크립트가 `.ex` 를 떼고 셋이 함께 사라지며 숫자가 본색(--ink)으로 돌아온다("회색 = 아직 네 것 아님"을 색이 말한다). */
.rel { position: relative; }
.exbadge {
  display: none; position: absolute; top: calc(var(--s3) * -1); right: var(--s3); z-index: 1;
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--t1); line-height: var(--gap-line); font-weight: 700;
  padding: 0 var(--s2); border-radius: var(--r2);
  box-shadow: var(--sk-up-sm);
}
.ex .exbadge { display: block; }
.ex .rel > .card, .ex .rel > .result { border-style: dashed; border-color: var(--accent); }
.ex .result .num { color: var(--ink-2); }
/* 결과 안 행동 — 결과가 있을 때만 존재한다(상태 정합). 가운데 정렬·줄바꿈. */
/* 행동 줄은 결과 격자의 한 칸 — 격자 간격(블록 간)이 이미 간격이라 위 여백을 더 주지 않는다(6-1: 겹치면 16+8=24 로 4단 밖 값이 된다).
 * 결과 안의 빈 줄(.rule·.alt 가 아직 비어 있을 때)은 칸을 차지하지 않는다 — 빈 칸도 격자 간격을 먹어 두 배 간격을 만든다(.condline:empty 와 같은 축). */
.result .acts { display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--gap-item); column-gap: var(--s3); margin-top: 0; }
.result > :is(.rule, .alt):empty { display: none; }

/* ── 접힘 설명(원칙 7) — details 기본 마커 유지(A5) ──
 * 머리의 메뉴(.menu)는 같은 details 지만 프레임 부품이라 이 본문 규칙을 받지 않는다. */
details:not(.menu) { border-top: calc(var(--s1) / 4) solid var(--line); }
details:not(.menu) > summary {
  min-height: var(--touch); padding-block: var(--s2); align-content: center;
  font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink);
  cursor: pointer;
}
/* summary 안의 절 제목(h2) — 접힌 사실 블록이 문서 개요에 절로 잡히게 한다. 모양은 summary 그대로. */
details:not(.menu) > summary > h2 { display: inline; font: inherit; letter-spacing: inherit; }
details:not(.menu) > :not(summary) { margin-top: var(--gap-block); }
details:not(.menu) > :last-child { margin-bottom: var(--gap-block); }
/* 접힘 설명 안·근거 안의 문단 사이는 항목 간 — 설명 영역일수록 촘촘한 본문 밀도(6-1). 바깥 문단(p + p)은 블록 간이다. */
details:not(.menu) p + p, .result .src p + p { margin-top: var(--gap-item); }
details:not(.menu) p, details:not(.menu) dd, details:not(.menu) li { font-size: var(--t2); line-height: var(--gap-line); }
details:not(.menu) p { max-width: 65ch; }

/* ── FAQ — 결과·규칙이 먼저, FAQ 는 아래 ── */
/* 문답·규칙 목록: 문답(dt→dd) 사이 0, 문답과 문답(dd→dt) 사이 블록 간, 첫 문답 위 0 — 격자 간격과 dt 여백이 겹쳐 두 배가 되지 않게. */
.faq dl { max-width: 65ch; display: grid; gap: 0; }
.faq dt { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); margin-top: var(--gap-block); }
.faq dd { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.rules { display: grid; gap: 0; }
.rules dt { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); margin-top: var(--gap-block); }
.rules dd { font-size: var(--t3); line-height: var(--gap-line); color: var(--ink-2); }
.faq dl > dt:first-child, .rules > dt:first-child { margin-top: 0; }

/* ── 공통 고지·출처 블록(면 끝) — 예전에 꼬리에 있던 면별 문단 자리 ── */
.source-block { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s4); display: grid; gap: var(--gap-item); }
.source-block p, .note { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.notice { border: calc(var(--s1) / 4) solid var(--warn); padding: var(--s4); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); }
.statusline { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.example { border: calc(var(--s1) / 4) solid var(--line); padding: var(--s4); font-size: var(--t2); line-height: var(--gap-line); }
.badge { font-size: var(--t1); line-height: var(--gap-line); font-weight: 600; color: var(--warn); border: calc(var(--s1) / 4) solid var(--warn); padding-inline: var(--s2); }
.savedd { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); white-space: nowrap; }
.savedbase { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.block { display: grid; gap: var(--gap-block); }
.block h2 { font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700; }
.adslot {
  min-height: calc(var(--touch) * 2); border: calc(var(--s1) / 4) solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink-2); font-size: var(--t2);
}

/* ── 도구 목록(홈·허브) ── */
.tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s6) * 11)), 1fr));
  gap: var(--gap-block);
}
/* 확정 화면의 홈 카드 — 흰 표면 · 1px 경계 · 낮은 반경(+B 저강도 돌출, .card 와 같은 카드 역할). 제목은 먹색이고 링크 파랑을 쓰지 않는다
 * (카드 전체가 링크라 파랑으로 한 번 더 말할 자리가 아니다 — 문서의 "주색은 활성·확정 행동에만"). */
.tool {
  display: grid; gap: var(--gap-item); align-content: start;   /* 2열 격자에서 옆 카드에 맞춰 늘어난 높이를 안쪽 줄 사이에 나눠 갖지 않는다(⑫ 실측 10.3/14.5px) */   /* 카드 자체가 48px 를 넘는다 — 위 링크 타깃 규칙을 덮는다 */
  padding: var(--s5);
  background: var(--surface);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  text-decoration: none; color: var(--ink);
  box-shadow: var(--sk-up);
}
.tool:hover { border-color: var(--sk-line-strong); }
.tool h2, .tool h3, .tool b { font-size: var(--t4); line-height: var(--t5-lh); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.tool h2 span, .tool code { font: inherit; color: inherit; }
.tool > span { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
/* 예시 줄 — 확정 화면에서는 카드 아래쪽에 왼쪽 정렬로 조용히 깔린다(오른쪽 정렬 수치 블록이 아니다). */
.tool .sample { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); text-align: left; }
.tool .state { display: block; font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink-2); }
.tool .state.on { color: var(--accent); }
.tool:hover h2, .tool:hover h3, .tool:hover b { text-decoration: underline; }
.tool[aria-disabled="true"] { color: var(--ink-2); cursor: default; }
.tool[aria-disabled="true"]:hover h2 { text-decoration: none; }
/* 언어 블록의 목록 링크 — 카드가 아니라 조용한 줄이다. 파란 밑줄 대신 먹색 + 헤어라인(확정 화면의 절제된 링크 처리). */
.tools-other { display: grid; gap: var(--gap-item); }
.tools-other li { font-size: var(--t3); line-height: var(--gap-line); }
.tools-other a { color: var(--ink); text-decoration: none; border-bottom: calc(var(--s1) / 4) solid var(--line); }
.tools-other a:hover { color: var(--ink); border-bottom-color: var(--sk-line-strong); text-decoration: underline; }

/* ── 홈 분류 칩 + 도구 검색(프레임 부품 assets/tools-filter.js 가 켠다) ──
 * 확정 화면의 홈: 분류 칩 줄과 검색칸이 도구 격자 위에 나란히 선다. 넓으면 한 줄, 좁으면 접힌다. */
.toolfilter {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-block) var(--s4);
}
.toolfilter .modes { flex: 1 1 calc(var(--s6) * 11); min-width: 0; }
.toolfilter .toolsearch { flex: 1 1 calc(var(--s6) * 8); min-width: 0; }
.toolfilter .chip .count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* 라벨과 건수 사이 — 트랙 칩은 gap 0 이고 flex 항목의 끝 공백은 접히므로(「전체17」로 읽힘 — 3초 시험 2026-09-17) 건수 앞에 가로 미세 간격(--s1)을 준다. 세로 간격 축이 아니다. */
.toolfilter .chip .count { margin-inline-start: var(--s1); }
.toolfilter .chip:has(input:checked) .count { color: var(--accent-ink); }   /* 선택 칩은 채움이라 글자도 채움 위 글자색 */
#toolcount { flex: 1 1 100%; text-align: right; }
/* 걸러서 0 건이면 카드 격자가 통째로 사라진다 — 그 자리에 같은 수치를 크게 세워, 사라진 것이 아니라
 * 걸러진 것임을 보이게 한다(새 문구 없이 수치만 드러낸다). */
#toolcount.is-empty {
  text-align: center;
  padding: var(--s6) var(--s4);
  font-size: var(--t4); line-height: var(--t5-lh); color: var(--ink);
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
}
/* 단축키 안내 줄 — 인셋 톤 위에 조용히 깔린다. kbd 는 확정 문서의 인라인 태그(기본 반경·고정폭). */
.note.shortcut {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-item);
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  padding: var(--s4);
}
.note.shortcut b { color: var(--ink); font-weight: 500; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--s5); padding-inline: var(--s2);
  font-family: var(--sk-font-num); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink);
  background: var(--surface); border: calc(var(--s1) / 4) solid var(--line); border-radius: var(--r1);
}

/* ── 빠른 조정 칩(비율 입력) — 누르면 입력값이 실제로 바뀌고 즉시 계산이 그대로 이어진다 ── */
.quickadjust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-item); margin-top: 0; }   /* 입력 아래 칩 줄 = 필드 안 항목 간(.field 의 gap) — 위 여백을 겹치지 않는다(⑫ 실측 8+16=24 철거) */
.quickadjust .label { color: var(--ink-2); font-weight: 400; }
.quickadjust .chips { gap: var(--gap-item); }
.quickadjust button {
  min-width: auto; padding-inline: var(--s4);
  font-size: var(--t2); line-height: var(--gap-line); font-weight: 500;
  background: var(--accent-soft); border-color: transparent; color: var(--ink);
  box-shadow: none;   /* 칩 모양의 버튼 — 버튼 돌출이 아니라 트랙 항목 문법 */
}
.quickadjust button:hover:not(:disabled) { background: var(--surface); border-color: var(--sk-line-strong); }

/* ── 표 ── */
/* 가로로 넘치는 산출(데이터 표·차트)은 스크롤 영역이다(G3-03). 세로는 자르지 않는다 — `overflow-x` 만 auto 다.
 * 스크롤 막대는 상시 표시로 둔다(CSS Scrollbars Styling L1): 끝값(누적 금액 열·마지막 막대)에 닿을 수 있다는
 * 사실이 안내 문구 없이 드러나야 한다. 넘칠 때 붙는 탭 도달 표식(tabindex·role=group)은 면 스크립트가 붙인다. */
.tablescroll { overflow-x: auto; }
.table-scroll { overflow: auto; max-height: calc(var(--s6) * 14); }
.tablescroll, .table-scroll, .chartscroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* 끝값에 닿을 수 있다는 사실을 **문구 없이** 드러낸다(G3-03): 더 볼 내용이 남은 쪽 가장자리에만 그늘이 선다.
 * 덮개(local)는 내용과 함께 스크롤하고 그늘(기본 scroll)은 상자에 고정이라, 그 끝까지 가면 덮개가 그늘을 덮어
 * 저절로 사라진다. 색은 경계 토큰(--line)에서 파생하고 크기는 여백 단계만 쓴다 — 새 색·새 크기 0. */
.chartscroll, .tablescroll {
  background:
    linear-gradient(to right, var(--bg), transparent) 0 0 / var(--s5) 100% no-repeat local,
    linear-gradient(to left, var(--bg), transparent) 100% 0 / var(--s5) 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--line) 90%, transparent), transparent) 0 0 / var(--s4) 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--line) 90%, transparent), transparent) 100% 0 / var(--s4) 100% no-repeat;
}
.table-scroll thead th { position: sticky; top: 0; background: var(--surface); }
table { width: 100%; border-collapse: collapse; text-align: right; }
th, td { padding: var(--s2); border-bottom: calc(var(--s1) / 4) solid var(--line); vertical-align: top; text-align: right; font-size: var(--t2); line-height: var(--gap-line); }
th { color: var(--ink-2); font-weight: 600; }
caption { text-align: left; font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink-2); padding-bottom: var(--s2); }
.dtable { white-space: nowrap; }
.dtable tbody th { text-align: left; color: var(--ink-2); }
/* 길이 변환 행별 결과 표 — 원문·오류 문장이 길어 왼쪽 정렬·줄바꿈 허용 */
.ltable th, .ltable td { text-align: left; vertical-align: top; }
.ltable th[scope="row"] { white-space: nowrap; }
.ltable td { white-space: pre-wrap; overflow-wrap: break-word; }
.compact-table th, .compact-table td { padding: var(--s1); }
/* 표·검색 조작은 표 스크롤 밖(W09 자리) */
.table-context { background: var(--surface); padding: var(--s4); display: grid; gap: var(--gap-block); }

/* ── 원금·수익 분해 차트 ── */
.chartbox { display: grid; gap: var(--gap-item); }
.charthead { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.chartscroll { overflow-x: auto; }
.chartscroll svg { display: block; width: 100%; min-width: calc(var(--s6) * 16); height: auto; }
.chartscroll .grid { stroke: var(--line); stroke-width: calc(var(--s1) / 4); }
.chartscroll .axis { stroke: var(--line); stroke-width: calc(var(--s1) / 4); }
.chartscroll .ytick, .chartscroll .xtick { fill: var(--ink-2); font-size: var(--t1); }
.chartscroll .axistitle { fill: var(--ink-2); font-size: var(--t1); }
.chartscroll .c-base { fill: var(--ink-2); }
/* 확정 팔레트의 outline-variant 는 흰 바탕에서 막대로 쓰기엔 너무 옅다 — 보조 채움은 강한 경계 톤을 쓴다. */
.chartscroll .c-contrib { fill: var(--sk-line-strong); }
.chartscroll .c-profit { fill: var(--accent); }
.chartscroll .c-loss { fill: var(--surface); stroke: var(--bad); stroke-width: calc(var(--s1) / 4); stroke-dasharray: 3 2; }
.chartscroll .c-total { stroke: var(--ink); stroke-width: calc(var(--s1) / 2); }
.legend { display: flex; flex-wrap: wrap; gap: var(--gap-item) var(--s4); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.legend li { display: flex; align-items: center; column-gap: var(--s2); }
.sw { display: inline-block; width: var(--t1); height: var(--t1); }
.sw.c-base { background: var(--ink-2); }
.sw.c-contrib { background: var(--sk-line-strong); }
.sw.c-profit { background: var(--accent); }
.sw.c-total { height: calc(var(--s1) / 2); background: var(--ink); }

/* ── 저장 목록 ── */
.savedbox { display: grid; gap: var(--gap-item); }
.savedlist { display: grid; }
.savedlist li {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-block) var(--s4);
  padding-block: var(--s2); border-bottom: calc(var(--s1) / 4) solid var(--line);
}
.savedlist li:last-child { border-bottom: 0; }
.saveditem { flex: 1; min-width: 0; font-size: var(--t3); line-height: var(--gap-line); }

/* ── 묶음 제목(카드 안) ── */
.grp { display: grid; gap: var(--gap-block); }
.grph { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-item); font-size: var(--t4); line-height: var(--t5-lh); font-weight: 600; color: var(--ink); }
.buyrow { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--gap-block) var(--s4); }
.buyrow .field { flex: 1 1 calc(var(--s6) * 5); min-width: 0; }
.adv { display: grid; }
.work { display: grid; }
/* 관련 도구 — 확정 화면의 하단 미니 카드 열(제목 한 줄 + 설명 한 줄). 현재 마크업을 가진 면은 없다. */
.related ul {
  display: grid; gap: var(--gap-block);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s6) * 8)), 1fr));
}
.related li { font-size: var(--t3); line-height: var(--gap-line); }
/* gap-exempt: 미니 카드 안 제목·설명 두 줄의 미세 정렬(--s1) — 컴포넌트 내부 */
.related li > a {
  display: grid; gap: var(--s1); align-content: center;
  padding: var(--s4); min-height: var(--touch);
  background: var(--surface); border: calc(var(--s1) / 4) solid var(--line); border-radius: var(--r1);
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.related li > a:hover { border-color: var(--sk-line-strong); text-decoration: underline; }

/* 화면 밖 낭독 전용 */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 건너뛰기 링크 — 포커스 전에는 화면 밖 */
.skip {
  position: absolute; left: -999px; top: var(--s2); z-index: 30;
  background: var(--surface); color: var(--accent); font-weight: 600; text-decoration: none;
  padding: var(--s2) var(--s4); border: calc(var(--s1) / 2) solid var(--accent);
}
.skip:focus { left: var(--s4); }

/* ══ styles/pages.css ══ */
/* 면 한정 규칙 — 마지막에 싣는다.
 *
 * 규칙 하나하나는 `:where(.p-면이름)` 로 그 면에만 걸어 둔다. :where() 는 특정도를 0으로 세므로
 * 컴포넌트 규칙과 우선순위 다툼을 만들지 않는다. 면 이름 클래스는 <html> 에 붙는다.
 *
 * 층②a 에서 이 파일은 크게 줄었다 — 예전에 여기 있던 것 대부분(테두리 없는 fieldset·묶음 구분선·라벨 크기·
 * 관련 도구 목록·시·분·초 입력 묶음·요일 줄·결과 수 한 단계 작게 등)이 컴포넌트의 **기본값**이 되었다.
 * 값은 tokens.css 의 이름으로만 받는다.
 */

/* ── 퍼센트 계산기 — 수치 입력은 오른쪽 정렬(확정 화면) ──
 * 이 면의 입력은 `type="text"`(부호·`%` 접미까지 원문으로 받으려고)라 inputmode 로 잡히는 공통 규칙을 비껴간다.
 * 자릿수가 오른쪽에서 맞아야 소수점이 흔들리지 않는다 — 확정 문서의 수치 표기 규칙과 같은 축이다. */
:where(.p-percentage-calculator-ko, .p-percentage-calculator-en) .card input[type="text"] { text-align: right; }

/* ── cm↔Mm — 과학표기 예시의 줄바꿈을 원문 그대로 유지한다 ── */
:where(.p-centimeters-to-megameters-en) .example p { white-space: pre-line; }

/* ── 수능 디데이 — 결과 묶음 아래 출처 상자 ── */
:where(.p-suneung-dday-ko) .srcbox { display: grid; gap: var(--gap-item); }
:where(.p-suneung-dday-ko) .srcbox .note { overflow-wrap: break-word; }

/* ── 일본 달력 허브 — 연도 카드 제목은 도구 카드 제목보다 한 단계 작다(카드가 연도 두 장뿐) ── */
:where(.p-calendar-ja) .tool h3 { font-size: var(--t3); line-height: var(--gap-line); font-weight: 700; color: var(--ink); }


/* ── 날짜 계산기 — 수직 간격 4단 귀속 블록은 2026-09-17 전 면 공용화로 **철거**했다.
 * 같은 역할·같은 값이 base·templates·components 의 기본값이 됐고(수직 밀도 검사가 번들 전체를 본다),
 * naljja 만의 규칙(.togs 세로 중앙·FAQ 첫 문답 0·details 문단 항목 간)도 컴포넌트 기본값으로 올라갔다. 면 한정 사본을 여기 다시 두지 않는다. */