/* =============================================================================
 * site.css — 공통 부품 층(브랜드 색 슬롯 + 사이트 토큰 + 셸·머리·카드·폼·버튼)
 *
 * 층 구조:
 *   층 1  /assets/base-tokens.css  ← 전 서비스 공통 골격 **값**(모서리·간격·글자 스케일·
 *                                    컨테이너 폭·브레이크포인트·터치 타깃). 이 파일에서 그 값을
 *                                    **다시 선언하지 않는다** — 두 벌이 되는 순간 갈라진다.
 *   층 2  이 파일                  ← 색 슬롯 재정의 + 사이트 토큰(--m-*) + 공통 부품
 *   층 3  <도구>.css               ← 그 도구에만 있는 것. 층 1·2 의 var() 만 쓴다.
 *
 * 2026-09-18 정리 전에는 이 파일이 29줄짜리 자리표시였고 셸·카드·폼·버튼·색 토큰이 강화
 * 시뮬의 시트 안에 있었다 — 다른 도구 면이 그 시트를 물고 다녔다. 공통 부품을 여기로 올리고
 * 도구 시트에는 그 도구의 것만 남겼다.
 *
 * 수직 간격은 **역할 토큰 4단으로만** 말한다: --gap-line(본문 행간) · --gap-item(항목 간) ·
 * --gap-block(블록 간) · --gap-section(섹션 간). 같은 역할에 다른 값을 쓰면 화면이 벙벙해진다.
 * ============================================================================= */

:root {
  /* ── 색 슬롯 재정의 — mujoa 는 **상시 다크**다 ──────────────────────────
   * 계약이 "덮어도 된다"고 한 것: accent 계열·good/warn/bad·bg/surface.
   * --ink·--ink-2·--line 도 바꾸지만 **배경과 쌍으로** 바꾼 것이다(어두운 면 위의 대비) —
   * 값은 종전 화면이 쓰던 팔레트 그대로다 — 여기서 바뀐 것은 **이름과 소유자**뿐이다. */
  color-scheme: dark;
  --bg: #0d1117;
  --surface: #161d27;
  --ink: #f2f5f9;
  --ink-2: #aab7c9;
  --line: #344255;
  --accent: #f2c56b;
  --accent-ink: #171b22;
  --accent-soft: #202b3a;
  --good: #75d6aa;
  --warn: #f0b86e;
  --bad: #ff9da4;
  --shadow-1: 0 1px 2px #00000040;
  --shadow-2: 0 8px 24px #00000040;

  /* ── 수직 밀도 4단 — 층 1 --v-* 의 **별칭**(값은 층 1 소유) ────────────
   * 시트가 쓰는 이름은 --gap-* 하나뿐이다. 값을 여기서 정하지 않으므로 표류할 자리가 없다. */
  --gap-line: var(--v-line);
  --gap-item: var(--v-item);
  --gap-block: var(--v-block);
  --gap-section: var(--v-section);

  /* ── 사이트 접두사 토큰(골격에 없는 것만 **추가**한다 — 골격 값은 바꾸지 않는다) ──
   * --m-wide  : 도구 작업대의 최대 폭. 골격 --maxw(760)는 읽기 폭이고, 입력열+결과열 2단은
   *             그 폭에 못 들어간다. 읽기 면(홈·방침)은 --maxw 를 그대로 쓴다.
   * --m-control-h : 폼 컨트롤·버튼의 높이 1값(골격 --touch 44 이상). 종전 화면 값 유지.
   * --m-input/--m-control/--m-info : 다크 폼의 입력면·테두리·링크색(슬롯에 없는 역할).
   * --m-*-bg  : 결과 상태면(성공·유지·하락)의 옅은 배경.  */
  --m-wide: 1168px;
  --m-control-h: 48px;
  --m-input: #101720;
  --m-control: #718198;
  --m-info: #8ac6ff;
  --m-focus: #8ac6ff;
  --m-success-bg: #112d25;
  --m-fail-bg: #322516;
  --m-drop-bg: #351c25;
  --m-flash: #f2c56b33;
  --m-font: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* 고정 헤더는 쓰지 않는다 — 앵커 착지 여유는 층 1 --anchor-top 그대로면 충분하다. */
}

/* ── 옛 이름 다리 ────────────────────────────────────────────────────────
 * 종전 시트가 쓰던 --m-bg/--m-panel/... 은 **같은 값의 다른 이름**이었다. 한 번에 전수 치환하면
 * 도구 3종의 규칙 수백 개를 동시에 건드리게 되므로, 색은 슬롯이 소유하고 옛 이름은 그 별칭으로
 * 남긴다(값을 갖지 않는다 — 별칭이라 표류하지 않는다). 새 규칙은 슬롯 이름을 쓴다. */
:root {
  --m-bg: var(--bg);
  --m-panel: var(--surface);
  --m-raised: var(--accent-soft);
  --m-border: var(--line);
  --m-text: var(--ink);
  --m-muted: var(--ink-2);
  --m-accent: var(--accent);
  --m-accent-hover: #ffda8f;
  --m-on-accent: var(--accent-ink);
  --m-success: var(--good);
  --m-fail: var(--warn);
  --m-drop: var(--bad);
  --m-shadow: #00000040;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t3) / var(--gap-line) var(--m-font);
}
h1, h2, h3 { word-break: keep-all; overflow-wrap: anywhere; }
h1 { margin: 0; font-size: var(--t5); line-height: var(--t5-lh); letter-spacing: -.02em; }
h2 { margin: 0; font-size: var(--t4); line-height: var(--t5-lh); }
h3 { margin: 0; font-size: var(--t3); line-height: var(--gap-line); }
p, dl, dd, figure { margin: 0; }
a { color: var(--m-info); }
input, select, button, textarea { font: inherit; }
.num, input, select, time, table { font-variant-numeric: tabular-nums lining-nums; }

.muted, .m-muted { color: var(--ink-2); }
.help, .m-help { margin-top: var(--gap-item); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.eyebrow, small { font-size: var(--t2); line-height: var(--gap-line); }
.version, .static-note { font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }
.sr, .m-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── 머리 — 마크업 1벌이 전 면에 같은 자리로 들어간다 ─────────────────────────
 * 좌상단 = 로고(파비콘과 같은 도안 + 이름, 한 링크 = 홈) · 그 옆 = 도구 메뉴(좁은 화면에서도 가로 리스팅).
 * 언어 창구는 없다 — 이 사이트는 한국어 단독이다(로케일이 늘면 우상단 슬롯을 연다).
 * 고정(sticky)하지 않는다: 고정 머리는 앵커 착지를 가리고 좁은 화면의 세로를 먹는다. */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.header-inner {
  width: min(100%, var(--m-wide));
  margin-inline: auto;
  padding: var(--s2) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-block);
}
.brand { display: flex; align-items: center; gap: var(--gap-item); min-height: var(--touch); color: var(--ink); text-decoration: none; font-size: var(--t4); font-weight: 700; letter-spacing: -.01em; }
.brand-mark { display: block; width: 24px; height: 24px; }
.header-menus { display: flex; align-items: center; }
.menu { display: flex; align-items: center; gap: var(--gap-item); margin: 0; padding: 0; list-style: none; }
.menu a { display: flex; align-items: center; min-height: var(--touch); padding-inline: var(--s1); color: var(--ink-2); text-decoration: none; font-size: var(--t2); }
.menu a[aria-current="page"] { color: var(--accent); }
.menu a:hover { color: var(--ink); }
.brand:focus-visible, .menu a:focus-visible, a:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }

/* ── 면 뼈대 ─────────────────────────────────────────────────────────────
 * **전 면이 같은 컨테이너**(--m-wide)다 — 머리 안쪽과 본문이 같은 폭을 쓰므로 로고와 본문 첫
 * 블록의 왼쪽이 정확히 같은 선에 선다. 읽기 면만 좁은 폭(--maxw)을 컨테이너로 쓰면 넓은 화면에서
 * 머리와 본문의 좌측선이 갈라져 한 화면에 정렬선이 둘 보인다. 읽기 폭은 컨테이너가 아니라
 * **글줄 길이**로 지킨다(아래 .read p). */
.m-shell, .shell, .read { width: min(100%, var(--m-wide)); margin-inline: auto; padding: var(--s5) var(--gutter) var(--s6); }
/* 읽는 면의 글줄은 골격 읽기 폭(--maxw)을 넘지 않는다 — 폭이 아니라 줄 길이를 제한한다. */
.read p, .read h1, .read h2, .read h3, .read li { max-width: var(--maxw); }

/* 면 제목 묶음 — 도구 면 전부 같은 차례다(eyebrow → h1 → 한 줄 → 기준). */
.m-title { margin-top: var(--gap-block); }
.m-lede { margin-top: var(--gap-item); color: var(--ink-2); word-break: keep-all; }
.m-rulever { margin-top: var(--gap-item); font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }
.intro, .m-intro { margin-bottom: var(--gap-section); }

/* ── 작업대(입력 열 + 결과 열) ───────────────────────────────────────────── */
.m-workbench, .workbench { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--gap-section); align-items: start; }
.m-card, .card { min-width: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); }
.m-card h2, .card h2 { font-size: var(--t4); line-height: var(--t5-lh); }
.outputs, .m-fee-outputs { display: grid; gap: var(--gap-section); min-width: 0; }

/* ── 폼 ──────────────────────────────────────────────────────────────────
 * 라벨→컨트롤→힌트가 한 항목이다. 항목 간은 --gap-block, 라벨과 컨트롤 사이는 --gap-item. */
.m-field, .field { margin-top: var(--gap-block); }
.m-field:first-child, .field:first-child { margin-top: 0; }
.m-field label, .field > label { display: block; margin-bottom: var(--gap-item); font-size: var(--t2); line-height: var(--gap-line); font-weight: 500; color: var(--ink-2); }
.m-field select, .m-field input, .control, select, input[type="text"], input[type="number"], input[type="date"] {
  width: 100%;
  min-width: 0;
  height: var(--m-control-h);
  padding: 0 var(--s3);
  border: 1px solid var(--m-control);
  border-radius: var(--r1);
  background: var(--m-input);
  color: var(--ink);
}
select:focus-visible, input:focus-visible { outline: 3px solid var(--m-focus); outline-offset: 2px; }
.m-field[data-invalid] select, .m-field[data-invalid] input { border: 2px solid var(--bad); }
.m-error { margin-top: var(--gap-item); font-size: var(--t2); line-height: var(--gap-line); color: var(--bad); }

/* ── 버튼 — 위계 **3종**(주=채움·보조=외곽선·텍스트). 층 1 §6 의 .btn/.btn-pri/.btn-sec/.btn-txt
 * 가 정본이고 여기서는 이 사이트의 면에 맞는 것만 더한다 — 화면마다 새 모양을 발명하지 않는다.
 * 화면당 주 버튼은 1개다. */
.btn { font-family: inherit; min-height: var(--m-control-h); transition: transform 80ms, background-color 120ms; touch-action: manipulation; }
.btn:focus-visible { outline: 3px solid var(--m-focus); outline-offset: 3px; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn-sec { background: var(--surface); }
.btn-block { display: block; width: 100%; }
@media (hover: hover) {
  .btn-pri:hover:not(:disabled) { background: var(--m-accent-hover); border-color: var(--m-accent-hover); }
  .btn-sec:hover:not(:disabled) { background: var(--accent-soft); }
}
.m-actions { display: flex; flex-wrap: wrap; gap: var(--gap-item); margin-top: var(--gap-block); }

/* ── 홈 카드(도구 3종) — 홈에서 모든 도구에 한 번에 닿는다 ───────── */
.tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap-block); margin-top: var(--gap-section); padding: 0; list-style: none; }
.tool-card { display: flex; flex-direction: column; gap: var(--gap-item); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); color: var(--ink); text-decoration: none; }
.tool-card .tool-name { font-size: var(--t4); line-height: var(--t5-lh); font-weight: 700; }
.tool-card .tool-line { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
@media (hover: hover) { .tool-card:hover { border-color: var(--accent); } }

/* ── 표·문서 절 ─────────────────────────────────────────────────────────── */
.m-tablewrap { overflow-x: auto; margin-top: var(--gap-block); }
table caption { caption-side: top; text-align: left; padding-bottom: var(--s2); color: var(--ink-2); font-size: var(--t1); line-height: var(--gap-line); }
footer nav a { display: inline-flex; align-items: center; min-height: var(--touch); }
footer { margin-top: var(--gap-section); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--t1); line-height: var(--gap-line); }
/* (2026-09-20 경고문 최소화로 푸터 고지 2줄이 사라졌다 — 규칙은 방침 면 §7 표기에만 남는다.) */
#operator { margin-top: var(--gap-item); }
.m-note { margin-top: var(--gap-section); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line); }
.m-note strong { color: var(--ink); }
.m-subhead { margin-top: var(--gap-section); margin-bottom: var(--gap-block); font-size: var(--t4); line-height: var(--t5-lh); font-weight: 700; }
summary { cursor: pointer; min-height: var(--touch); display: flex; align-items: center; }

/* 앵커 착지 여유 — 이동한 사람이 **제목부터** 보게 한다. 지금 이 사이트에 고정 머리는 없지만,
   값은 골격의 --anchor-top 을 그대로 쓴다: 나중에 머리를 고정하는 날 값 한 곳만 올리면 된다. */
[id] { scroll-margin-top: var(--anchor-top); }

/* ── 예시 기본값 상태(패턴 A) — 첫 화면은 예시가 이미 계산된 상태다.
 * 점선 + '예시' 배지가 "이건 내 값이 아니다"를 말하고, 입력을 건드리면 둘 다 사라진다. */
.is-example { border-style: dashed; }
.tag, .m-tag { font-size: var(--t1); line-height: var(--gap-line); border: 1px solid var(--line); padding: var(--s1) var(--s2); border-radius: var(--r1); color: var(--ink-2); white-space: nowrap; }
/* 배지 규칙은 `.tag` **뒤**에 있어야 한다 — `.tag` 의 `border` 는 단축 속성이라 앞에 두면
   점선·강조색이 통째로 덮인다(2026-09-21 PS0920 에서 두 면 모두 회색 실선으로 그려지고 있었다).
   배지는 늘 `.tag` 와 같이 입는다: 클래스가 하나뿐이면 테두리 굵기가 medium(3px)로 떨어져
   누르는 버튼처럼 보인다. */
.example-badge, .m-fee-example-badge { color: var(--accent); border-color: var(--accent); border-style: dashed; }
.section-heading, .m-fee-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-item); margin-bottom: var(--gap-block); }

/* ── 브레이크포인트는 **2개뿐**이다(층 1 --bp-sm 560 · --bp-md 860).
 * @media 는 var() 를 못 읽으므로 값을 그대로 적는다 — 다른 숫자가 나타나면 그 자리가 발산이다. */
@media (max-width: 860px) {
  .m-workbench, .workbench { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .m-card, .card { padding: var(--s4); }
  .header-inner { gap: var(--gap-item); }
  .menu { gap: var(--gap-item); }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active:not(:disabled) { transform: none; }
}
/* 게임 IP 비관련 1줄(면당 1회, 본문 최하단) — 경고가 아니라 오인 방지 표기라 강조하지 않는다.
   푸터 위에 붙어 시선의 마지막에 놓인다. */
.unofficial { margin-top: var(--gap-section); color: var(--ink-2); font-size: var(--t1); line-height: var(--gap-line); }