/* ==== tokens.css ==== */
/* ==========================================================================
   온다마케팅 디자인 시스템 — 01 토큰
   기획서 13_디자인가이드 정본 컬러를 축으로 다크/라이트 2모드를 정의한다.
   컴포넌트는 절대 raw hex 를 쓰지 않는다. 여기 있는 변수만 참조한다.
   ========================================================================== */

:root {
  /* ---- 브랜드 원색 (모드 무관 고정) ---- */
  --brand-navy: #1B3A6B;
  --brand-orange: #FF6B2C;
  --brand-orange-soft: #FF8A4F;
  --brand-orange-deep: #E4541A;

  /* ---- 의미색 ---- */
  --ok: #22C55E;
  --ok-deep: #15803D;
  --warn: #F59E0B;
  --warn-deep: #B45309;
  --bad: #EF4444;
  --bad-deep: #B91C1C;
  --info: #38BDF8;

  /* ---- 타이포 스케일 (1.25 major third, clamp 유동) ---- */
  --fs-3xs: 11px;
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: clamp(17px, .55vw + 15px, 19px);
  --fs-lg: clamp(20px, 1vw + 16px, 24px);
  --fs-xl: clamp(24px, 1.6vw + 18px, 32px);
  --fs-2xl: clamp(30px, 2.6vw + 20px, 46px);
  --fs-3xl: clamp(38px, 4.4vw + 20px, 72px);
  --fs-4xl: clamp(46px, 6.6vw + 18px, 104px);

  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-body: 1.75;
  --lh-loose: 1.9;

  --ls-tight: -.03em;
  --ls-snug: -.018em;
  --ls-normal: -.011em;
  --ls-wide: .04em;
  --ls-caps: .16em;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- 간격 (4px 베이스) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  --band-y: clamp(64px, 9vw, 132px);
  --band-y-tight: clamp(44px, 6vw, 80px);

  /* ---- 레이아웃 ---- */
  --container: 1240px;
  --container-narrow: 820px;
  --container-wide: 1440px;
  --pad: clamp(18px, 4vw, 40px);
  --header-h: 68px;

  /* ---- 모서리 ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- 모션 ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 140ms;
  --t-mid: 260ms;
  --t-slow: 520ms;

  /* ---- z 축 ---- */
  --z-grain: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-drawer: 70;
  --z-palette: 80;
  --z-toast: 90;

  color-scheme: dark;
}

/* ---------------------------------------------------------------- 다크(기본) */
:root,
[data-theme="dark"] {
  --bg: #05080F;
  --bg-1: #080D18;
  --bg-2: #0C1424;
  --bg-3: #101B30;
  --bg-inset: #030509;
  --bg-brand: #0C1A30;
  --bg-paper: #0A121F;

  --fg: #FFFFFF;
  --fg-1: #DCE4EF;
  --fg-2: #93A1B5;
  --fg-3: #64748B;
  --fg-inv: #05080F;

  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --line-3: rgba(255, 255, 255, .28);

  --accent: var(--brand-orange);
  --accent-fg: #FFFFFF;
  --accent-soft: rgba(255, 107, 44, .14);
  --accent-line: rgba(255, 107, 44, .38);

  --card: rgba(255, 255, 255, .028);
  --card-hover: rgba(255, 255, 255, .052);
  --glass: rgba(8, 13, 24, .72);

  --ok-bg: rgba(34, 197, 94, .13);
  --warn-bg: rgba(245, 158, 11, .13);
  --bad-bg: rgba(239, 68, 68, .13);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .95);
  --grain-opacity: .035;
}

/* ---------------------------------------------------------------- 라이트 */
[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-1: #F7F9FC;
  --bg-2: #F1F4F9;
  --bg-3: #E8EDF5;
  --bg-inset: #EDF1F7;
  --bg-brand: #12294B;
  --bg-paper: #F7F9FC;

  --fg: #0B1220;
  --fg-1: #1F2937;
  --fg-2: #4B5768;
  --fg-3: #6B7688;
  --fg-inv: #FFFFFF;

  --line: rgba(11, 18, 32, .11);
  --line-2: rgba(11, 18, 32, .2);
  --line-3: rgba(11, 18, 32, .34);

  --accent: var(--brand-orange-deep);
  --accent-fg: #FFFFFF;
  --accent-soft: rgba(228, 84, 26, .1);
  --accent-line: rgba(228, 84, 26, .34);

  --card: rgba(11, 18, 32, .022);
  --card-hover: rgba(11, 18, 32, .045);
  --glass: rgba(255, 255, 255, .82);

  --ok: var(--ok-deep);
  --warn: var(--warn-deep);
  --bad: var(--bad-deep);
  --ok-bg: rgba(21, 128, 61, .1);
  --warn-bg: rgba(180, 83, 9, .1);
  --bad-bg: rgba(185, 28, 28, .09);

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .07);
  --shadow: 0 16px 36px -24px rgba(11, 18, 32, .34);
  --shadow-lg: 0 40px 80px -44px rgba(11, 18, 32, .4);
  --grain-opacity: .02;

  color-scheme: light;
}

/* 시스템 설정이 라이트이고 사용자가 아직 고르지 않았을 때 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #FFFFFF;
    --bg-1: #F7F9FC;
    --bg-2: #F1F4F9;
    --bg-3: #E8EDF5;
    --bg-inset: #EDF1F7;
    --bg-paper: #F7F9FC;
    --fg: #0B1220;
    --fg-1: #1F2937;
    --fg-2: #4B5768;
    --fg-3: #6B7688;
    --fg-inv: #FFFFFF;
    --line: rgba(11, 18, 32, .11);
    --line-2: rgba(11, 18, 32, .2);
    --line-3: rgba(11, 18, 32, .34);
    --accent: var(--brand-orange-deep);
    --accent-soft: rgba(228, 84, 26, .1);
    --accent-line: rgba(228, 84, 26, .34);
    --card: rgba(11, 18, 32, .022);
    --card-hover: rgba(11, 18, 32, .045);
    --glass: rgba(255, 255, 255, .82);
    --ok: #15803D;
    --warn: #B45309;
    --bad: #B91C1C;
    --ok-bg: rgba(21, 128, 61, .1);
    --warn-bg: rgba(180, 83, 9, .1);
    --bad-bg: rgba(185, 28, 28, .09);
    --shadow-sm: 0 1px 2px rgba(11, 18, 32, .07);
    --shadow: 0 16px 36px -24px rgba(11, 18, 32, .34);
    --shadow-lg: 0 40px 80px -44px rgba(11, 18, 32, .4);
    --grain-opacity: .02;
    color-scheme: light;
  }
}

/* ==== base.css ==== */
/* ==========================================================================
   02 기본 — 리셋 · 타이포 · 레이아웃 프리미티브
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--fg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }
a.link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-line);
  transition: text-decoration-color var(--t-fast) var(--ease);
}
a.link:hover { text-decoration-color: var(--accent); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-10) 0; }

table { border-collapse: collapse; width: 100%; }

strong, b { font-weight: var(--fw-semi); color: var(--fg); }
mark { background: var(--accent-soft); color: var(--fg); border-radius: 3px; padding: 0 3px; }
code, kbd, .mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: .92em;
  font-feature-settings: 'tnum' 1;
}
::selection { background: var(--accent); color: #fff; }

/* 포커스 링 — 제거 금지 (접근성 기준선) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* 스킵 링크 */
.skip {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: var(--fw-semi);
  transform: translateY(-160%);
  transition: transform var(--t-mid) var(--ease);
}
.skip:focus-visible { transform: none; }

/* -------------------------------------------------------------- 레이아웃 */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--narrow { max-width: var(--container-narrow); }
.wrap--wide { max-width: var(--container-wide); }

.band { position: relative; padding-block: var(--band-y); }
.band--tight { padding-block: var(--band-y-tight); }
.band--flush-top { padding-top: 0; }
.band--paper { background: var(--bg-1); }
.band--inset { background: var(--bg-inset); }
.band--brand { background: var(--bg-brand); }
.band + .band--paper, .band--paper + .band { border-top: 1px solid var(--line); }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-12); align-items: start; }
.grid--toc { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-12); align-items: start; }

@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--sidebar, .grid--toc { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
}
@media (max-width: 820px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-top: var(--s-4); }
.stack--lg > * + * { margin-top: var(--s-8); }
.stack--sm > * + * { margin-top: var(--s-2); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }

.split {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(var(--s-8), 5vw, var(--s-24));
  align-items: start;
}
@media (max-width: 940px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } }

/* -------------------------------------------------------------- 섹션 머리 */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

.sec-head { max-width: 760px; margin-bottom: var(--s-12); }
.sec-head .eyebrow { margin-bottom: var(--s-4); }
.sec-head h2 { margin-bottom: var(--s-4); }
.sec-head p { color: var(--fg-2); font-size: var(--fs-md); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow::before { display: none; }

.lede { font-size: var(--fs-md); color: var(--fg-2); line-height: var(--lh-loose); }

/* -------------------------------------------------------------- 유틸 */

.t-fg { color: var(--fg); }
.t-mute { color: var(--fg-2); }
.t-faint { color: var(--fg-3); }
.t-accent { color: var(--accent); }
.t-ok { color: var(--ok); }
.t-warn { color: var(--warn); }
.t-bad { color: var(--bad); }
.t-center { text-align: center; }
.t-right { text-align: right; }
.t-sm { font-size: var(--fs-sm); }
.t-xs { font-size: var(--fs-xs); }
.t-num { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }
.t-nowrap { white-space: nowrap; }
.semi { font-weight: var(--fw-semi); }
.bold { font-weight: var(--fw-bold); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-12 { margin-top: var(--s-12); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }

.hide { display: none !important; }
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 배경 그레인 — 평평한 다크를 종이처럼 만든다 */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* 스크롤 진행 막대 */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-soft));
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}

/* -------------------------------------------------------------- 등장 모션 */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: var(--rd, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* 인쇄 — 견적서를 그대로 뽑을 수 있어야 한다 */
@media print {
  .site-header, .site-footer, .palette, .toast-host, .fab, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 12px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

/* ==== components.css ==== */
/* ==========================================================================
   03 컴포넌트
   ========================================================================== */

/* -------------------------------------------------------------- 헤더 */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: transparent;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
}
.site-header.is-open { background: var(--bg); border-bottom-color: var(--line); }

.hdr {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: var(--header-h);
}
.hdr__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  font-size: var(--fs-md);
  flex: none;
}
.hdr__mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--brand-orange), var(--brand-orange-deep));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: var(--fw-black);
  box-shadow: 0 4px 14px -6px var(--brand-orange);
}
.hdr__nav { display: flex; align-items: center; gap: var(--s-1); margin-left: var(--s-4); }
.hdr__link {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hdr__link:hover, .hdr__link[aria-expanded="true"] { color: var(--fg); background: var(--card-hover); }
.hdr__link.is-current { color: var(--fg); }
.hdr__link.is-current::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
}
.hdr__caret { width: 9px; height: 9px; opacity: .6; transition: transform var(--t-fast) var(--ease); }
.hdr__link[aria-expanded="true"] .hdr__caret { transform: rotate(180deg); }
.hdr__spacer { flex: 1; }
.hdr__tools { display: flex; align-items: center; gap: var(--s-2); }

.icon-btn {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--card-hover); color: var(--fg); border-color: var(--line); }
.icon-btn svg { width: 17px; height: 17px; }

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg-3);
  font-size: var(--fs-xs);
  background: var(--card);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.search-trigger:hover { border-color: var(--line-2); color: var(--fg-2); }
.search-trigger svg { width: 14px; height: 14px; }
.search-trigger kbd {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg-2);
}
@media (max-width: 1180px) { .search-trigger span { display: none; } }
@media (max-width: 720px) {
  .search-trigger { display: none; }
  .hdr { gap: var(--s-3); }
  .hdr__brand span:not(.hdr__mark) { font-size: var(--fs-sm); }
}
@media (max-width: 420px) {
  .hdr__tools .btn { padding-inline: var(--s-4); font-size: var(--fs-2xs); }
}

.theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .moon { display: block; }
[data-theme="light"] .theme-toggle .sun { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .moon { display: block; }
  :root:not([data-theme]) .theme-toggle .sun { display: none; }
}

.burger { display: none; }
@media (max-width: 1080px) {
  .hdr__nav { display: none; }
  .burger { display: grid; }
}

/* -------------------------------------------------------------- 메가메뉴 */

.mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__inner { display: grid; grid-template-columns: 1fr 300px; gap: var(--s-12); padding-block: var(--s-10); }
.mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-10); }
.mega__col h4 {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-4);
}
.mega__item {
  display: block;
  padding: var(--s-2) var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.mega__item:hover { background: var(--card-hover); }
.mega__item strong { display: block; font-size: var(--fs-sm); color: var(--fg); font-weight: var(--fw-semi); }
.mega__item span { display: block; font-size: var(--fs-2xs); color: var(--fg-3); line-height: 1.5; }
.mega__aside {
  border-left: 1px solid var(--line);
  padding-left: var(--s-10);
}
.mega__promo {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.mega__promo h5 { margin-bottom: var(--s-2); font-size: var(--fs-base); }
.mega__promo p { font-size: var(--fs-xs); color: var(--fg-2); margin-bottom: var(--s-4); }
.mega__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

@media (max-width: 1080px) { .mega { display: none; } }

/* -------------------------------------------------------------- 모바일 서랍 */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--bg);
  overflow-y: auto;
  padding: calc(var(--header-h) + var(--s-6)) var(--pad) var(--s-16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__grp + .drawer__grp { margin-top: var(--s-8); border-top: 1px solid var(--line); padding-top: var(--s-8); }
.drawer__grp > h4 {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--s-4);
}
.drawer__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--fg);
  border-bottom: 1px solid var(--line);
}
.drawer__link small { font-size: var(--fs-2xs); color: var(--fg-3); font-weight: var(--fw-normal); }

/* -------------------------------------------------------------- 버튼 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 46px;
  padding: 0 var(--s-6);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-normal);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }

.btn--primary {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 12px 30px -14px var(--brand-orange);
}
.btn--primary:hover { background: var(--brand-orange-soft); box-shadow: 0 16px 36px -14px var(--brand-orange); }
[data-theme="light"] .btn--primary:hover { background: var(--brand-orange); }

.btn--ghost { border-color: var(--line-2); color: var(--fg); }
.btn--ghost:hover { border-color: var(--line-3); background: var(--card-hover); }

.btn--quiet { color: var(--fg-2); padding-inline: var(--s-3); }
.btn--quiet:hover { color: var(--fg); background: var(--card-hover); }

.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover { opacity: .88; }

.btn--sm { height: 36px; padding: 0 var(--s-4); font-size: var(--fs-xs); }
.btn--lg { height: 54px; padding: 0 var(--s-8); font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .42; pointer-events: none; }

/* -------------------------------------------------------------- 카드 */

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.card--pad-lg { padding: var(--s-8); }
.card--flat { background: none; }
.card--solid { background: var(--bg-2); }
a.card:hover, .card--link:hover { border-color: var(--line-2); background: var(--card-hover); transform: translateY(-2px); }
.card__kicker {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-3);
  display: block;
}
.card__title { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.card__body { color: var(--fg-2); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.card__foot {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--fg-3);
}
.card__arrow { color: var(--accent); transition: transform var(--t-mid) var(--ease); }
a.card:hover .card__arrow { transform: translateX(4px); }

.card--num { padding-top: var(--s-10); }
.card--num .num {
  position: absolute;
  top: var(--s-5); left: var(--s-6);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-caps);
  color: var(--accent);
}

/* -------------------------------------------------------------- 배지 · 칩 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  border: 1px solid var(--line);
  color: var(--fg-2);
  white-space: nowrap;
}
.badge--accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.badge--ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.badge--warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.badge--bad { background: var(--bad-bg); border-color: transparent; color: var(--bad); }
.badge--solid { background: var(--fg); color: var(--bg); border-color: transparent; }
.badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: var(--fs-xs);
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--line-2); color: var(--fg); }
.chip[aria-pressed="true"], .chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chip__n { font-size: 10px; opacity: .7; font-feature-settings: 'tnum' 1; }

/* 실측 대기 값 — 기획서 규칙상 조작하지 않고 자리만 표시한다 */
.pending {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 0 4px;
  border-bottom: 1px dashed var(--line-3);
  color: var(--fg-3);
  font-feature-settings: 'tnum' 1;
  cursor: help;
}
.pending::before { content: "—"; opacity: .6; }

/* -------------------------------------------------------------- 표 */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.tbl { width: 100%; font-size: var(--fs-sm); border-collapse: separate; border-spacing: 0; }
.tbl th, .tbl td { padding: var(--s-4) var(--s-5); text-align: left; vertical-align: top; }
.tbl thead th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--line);
  z-index: 1;
}
.tbl tbody tr + tr td { border-top: 1px solid var(--line); }
.tbl tbody tr:hover td { background: var(--card); }
.tbl .num { text-align: right; font-feature-settings: 'tnum' 1; white-space: nowrap; color: var(--fg); }
.tbl td small { display: block; color: var(--fg-3); font-size: var(--fs-2xs); margin-top: 2px; }
.tbl tfoot td { border-top: 2px solid var(--line-2); font-weight: var(--fw-bold); color: var(--fg); background: var(--bg-1); }
.tbl__grp td {
  background: var(--bg-2);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--fw-bold);
}

/* -------------------------------------------------------------- 폼 */

.field { display: block; margin-bottom: var(--s-5); }
.field__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--fg);
  margin-bottom: var(--s-2);
}
.field__req { color: var(--accent); font-size: 10px; }
.field__hint { font-size: var(--fs-2xs); color: var(--fg-3); margin-top: var(--s-2); }
.field__err {
  display: none;
  font-size: var(--fs-2xs);
  color: var(--bad);
  margin-top: var(--s-2);
  align-items: center;
  gap: 4px;
}
.field.is-bad .field__err { display: flex; }
.field.is-bad .input, .field.is-bad .select, .field.is-bad .textarea { border-color: var(--bad); }
.field.is-ok .input { border-color: var(--ok); }

.input, .select, .textarea {
  width: 100%;
  height: 48px;
  padding: 0 var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.textarea { height: auto; min-height: 130px; padding: var(--s-4); line-height: 1.7; resize: vertical; }
.select { appearance: none; padding-right: var(--s-10); background-image: none; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: var(--s-4); top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--fg-3);
  border-bottom: 1.5px solid var(--fg-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); background: var(--bg-2); }

.check {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.check:hover { border-color: var(--line-2); background: var(--card); }
.check input { margin: 4px 0 0; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.check__t { font-size: var(--fs-sm); color: var(--fg); }
.check__d { font-size: var(--fs-2xs); color: var(--fg-3); margin-top: 2px; }
.check:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }

.radio-row { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

.drop {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-8);
  text-align: center;
  color: var(--fg-3);
  font-size: var(--fs-xs);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  cursor: pointer;
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--fg-2); }
.drop__list { margin-top: var(--s-4); display: grid; gap: var(--s-2); text-align: left; }
.drop__f {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

/* 단계 표시 */
.steps { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-8); flex-wrap: wrap; }
.steps__i {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-2xs);
  color: var(--fg-3);
}
.steps__n {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  font-size: 11px;
  font-weight: var(--fw-bold);
  transition: all var(--t-mid) var(--ease);
}
.steps__i.is-on { color: var(--fg); }
.steps__i.is-on .steps__n { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps__i.is-done .steps__n { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.steps__bar { width: 22px; height: 1px; background: var(--line-2); }
@media (max-width: 720px) { .steps__i span { display: none; } }

/* -------------------------------------------------------------- 아코디언 */

.acc { border-top: 1px solid var(--line); }
.acc__i { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  text-align: left;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--fg);
  transition: color var(--t-fast) var(--ease);
}
.acc__q:hover { color: var(--accent); }
.acc__sign { flex: none; width: 20px; height: 20px; position: relative; margin-top: 6px; }
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.acc__sign::before { width: 13px; height: 1.5px; }
.acc__sign::after { width: 1.5px; height: 13px; }
.acc__i.is-open .acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease);
}
.acc__i.is-open .acc__a { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > div {
  padding-bottom: var(--s-6);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  max-width: 76ch;
}

/* -------------------------------------------------------------- 탭 */

.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-8); overflow-x: auto; }
.tabs__b {
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tabs__b:hover { color: var(--fg-2); }
.tabs__b[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }

/* -------------------------------------------------------------- 빵부스러기 */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-2xs); color: var(--fg-3); }
.crumbs a:hover { color: var(--fg-2); }
.crumbs__sep { opacity: .5; }
.crumbs [aria-current] { color: var(--fg-2); }

/* -------------------------------------------------------------- 커맨드 팔레트 */

.palette {
  position: fixed;
  inset: 0;
  z-index: var(--z-palette);
  display: grid;
  place-items: start center;
  padding: clamp(48px, 12vh, 140px) var(--s-4) var(--s-4);
  background: rgba(2, 5, 10, .6);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.palette.is-open { opacity: 1; visibility: visible; }
.palette__box {
  width: min(100%, 660px);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-10px) scale(.99);
  transition: transform var(--t-mid) var(--ease);
}
.palette.is-open .palette__box { transform: none; }
.palette__in { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.palette__in svg { width: 17px; height: 17px; color: var(--fg-3); flex: none; }
.palette__in input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  font-size: var(--fs-md);
  color: var(--fg);
}
.palette__in input::placeholder { color: var(--fg-3); }
.palette__list { max-height: min(52vh, 420px); overflow-y: auto; padding: var(--s-2); }
.palette__grp {
  padding: var(--s-3) var(--s-4) var(--s-2);
  font-size: 10px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-bold);
}
.palette__r {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.palette__r[aria-selected="true"] { background: var(--accent-soft); }
.palette__r strong { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg); }
.palette__r em { font-style: normal; color: var(--accent); font-weight: var(--fw-bold); }
.palette__r span { font-size: var(--fs-2xs); color: var(--fg-3); margin-left: auto; white-space: nowrap; }
.palette__foot {
  display: flex; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--fg-3);
}
.palette__foot kbd { border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.palette__empty { padding: var(--s-10) var(--s-5); text-align: center; color: var(--fg-3); font-size: var(--fs-sm); }

/* -------------------------------------------------------------- 토스트 */

.toast-host {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--s-2);
  justify-items: end;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  font-size: var(--fs-xs);
  color: var(--fg);
  animation: toast-in var(--t-mid) var(--ease-spring);
}
.toast.is-out { animation: toast-out var(--t-mid) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* -------------------------------------------------------------- 스켈레톤 */

.skel {
  background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 37%, var(--card) 63%);
  background-size: 400% 100%;
  animation: skel 1.4s ease infinite;
  border-radius: var(--r-xs);
  height: 1em;
}
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* -------------------------------------------------------------- 목차 */

.toc { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.toc__t {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-4);
}
.toc__l a {
  display: block;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 1.5px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.toc__l a:hover { color: var(--fg-2); border-color: var(--line-2); }
.toc__l a.is-on { color: var(--accent); border-color: var(--accent); font-weight: var(--fw-semi); }

/* -------------------------------------------------------------- 콜아웃 */

.callout {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: var(--fs-sm);
  color: var(--fg-2);
  line-height: var(--lh-loose);
}
.callout__i { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--accent); }
.callout--warn { border-color: transparent; background: var(--warn-bg); }
.callout--warn .callout__i { color: var(--warn); }
.callout--ok { border-color: transparent; background: var(--ok-bg); }
.callout--ok .callout__i { color: var(--ok); }
.callout strong { color: var(--fg); }

/* -------------------------------------------------------------- 통계 */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.stat { background: var(--bg); padding: var(--s-6); }
.stat__n {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  font-feature-settings: 'tnum' 1;
  line-height: 1.05;
}
.stat__n small { font-size: .45em; font-weight: var(--fw-semi); color: var(--fg-3); margin-left: 3px; }
.stat__l { font-size: var(--fs-2xs); color: var(--fg-3); margin-top: var(--s-2); }

/* -------------------------------------------------------------- 타임라인 */

.tl { position: relative; padding-left: var(--s-8); }
.tl::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tl__i { position: relative; padding-bottom: var(--s-8); }
.tl__i:last-child { padding-bottom: 0; }
.tl__i::before {
  content: "";
  position: absolute;
  left: calc(var(--s-8) * -1 + 3px);
  top: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--line-3);
}
.tl__i.is-key::before { background: var(--accent); border-color: var(--accent); }
.tl__w { font-size: var(--fs-2xs); color: var(--accent); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); }
.tl__t { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--fg); margin: 2px 0 4px; }
.tl__d { font-size: var(--fs-sm); color: var(--fg-2); }

/* -------------------------------------------------------------- 페이지네이션 */

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-12); }
.pager a, .pager span {
  min-width: 38px; height: 38px;
  display: grid; place-items: center;
  padding-inline: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--fg-2);
}
.pager a:hover { border-color: var(--line-2); color: var(--fg); }
.pager .is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: var(--fw-semi); }

/* -------------------------------------------------------------- 빈 상태 */

.empty { padding: var(--s-20) var(--s-6); text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.empty h4 { margin-bottom: var(--s-2); color: var(--fg-2); }
.empty p { color: var(--fg-3); font-size: var(--fs-sm); }

/* -------------------------------------------------------------- 푸터 */

.site-footer { border-top: 1px solid var(--line); background: var(--bg-1); padding-block: var(--s-16) var(--s-8); margin-top: var(--s-16); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--s-10); }
.footer__brand p { font-size: var(--fs-xs); color: var(--fg-3); line-height: var(--lh-loose); margin-top: var(--s-4); max-width: 34ch; }
.footer__col h5 {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-4);
}
.footer__col a { display: block; padding: 4px 0; font-size: var(--fs-xs); color: var(--fg-2); transition: color var(--t-fast) var(--ease); }
.footer__col a:hover { color: var(--accent); }
.footer__bot {
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  font-size: var(--fs-2xs);
  color: var(--fg-3);
}
@media (max-width: 1080px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } }

/* ==== pages.css ==== */
/* ==========================================================================
   04 페이지 · 도메인 블록
   ========================================================================== */

/* -------------------------------------------------------------- 히어로 */

.hero { position: relative; min-height: min(92vh, 940px); display: flex; align-items: center; overflow: hidden; padding-block: var(--s-24) var(--s-16); }
.hero__cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 30%, var(--bg) 92%);
  pointer-events: none;
}
.hero__in { position: relative; z-index: 2; }
.hero h1 { font-size: var(--fs-4xl); font-weight: var(--fw-black); margin-bottom: var(--s-6); }
.hero h1 .l { display: block; overflow: hidden; }
.hero h1 .l > span {
  display: block;
  transform: translateY(105%);
  animation: rise .9s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise { to { transform: none; } }
.hero__sub { font-size: var(--fs-md); color: var(--fg-2); max-width: 56ch; line-height: var(--lh-loose); margin-bottom: var(--s-8); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__meta { margin-top: var(--s-12); display: flex; flex-wrap: wrap; gap: var(--s-8); }
.hero__meta div { font-size: var(--fs-2xs); color: var(--fg-3); }
.hero__meta strong { display: block; font-size: var(--fs-lg); color: var(--fg); font-weight: var(--fw-bold); font-feature-settings: 'tnum' 1; }

.page-hero { padding-block: calc(var(--header-h) + var(--s-12)) var(--s-12); position: relative; }
.page-hero__crumbs { margin-bottom: var(--s-6); }
.page-hero h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-4); }
.page-hero__sub { font-size: var(--fs-md); color: var(--fg-2); max-width: 64ch; }
.page-hero__aside { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
/* 히어로 바로 뒤에 오는 밴드는 위 여백을 줄인다 (빈 공간이 고장처럼 보인다) */
.page-hero + .band { padding-top: var(--band-y-tight); }
.page-hero--brand { background: var(--bg-brand); }
.page-hero--brand h1, .page-hero--brand .page-hero__sub { color: #fff; }
.page-hero--brand .page-hero__sub { color: rgba(255,255,255,.76); }
.page-hero--brand .crumbs, .page-hero--brand .crumbs a { color: rgba(255,255,255,.6); }

/* -------------------------------------------------------------- 문제 3열 */

.pain__i { border-top: 1px solid var(--line); padding-top: var(--s-6); }
.pain__q { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--fg); margin-bottom: var(--s-4); }
.pain__d { font-size: var(--fs-sm); color: var(--fg-2); line-height: var(--lh-loose); margin-bottom: var(--s-6); }
.pain__fix {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-2xs);
  color: var(--accent);
  font-weight: var(--fw-semi);
  padding: var(--s-2) var(--s-3);
  background: var(--accent-soft);
  border-radius: var(--r-xs);
}

/* -------------------------------------------------------------- 차별점 스티키 */

.edge__i { padding-block: clamp(var(--s-10), 8vh, var(--s-20)); border-top: 1px solid var(--line); }
.edge__n { font-size: var(--fs-2xs); font-weight: var(--fw-black); letter-spacing: var(--ls-caps); color: var(--accent); }
.edge__t { font-size: var(--fs-xl); margin: var(--s-3) 0 var(--s-4); }
.edge__d { color: var(--fg-2); font-size: var(--fs-sm); line-height: var(--lh-loose); max-width: 52ch; }
.edge__stick { position: sticky; top: calc(var(--header-h) + var(--s-8)); }

/* -------------------------------------------------------------- 순위 리포트 */

.report { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-1); }
.report__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.report__title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg); }
.report__legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-left: auto; }
.report__lg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-2xs); color: var(--fg-2);
  cursor: pointer;
  opacity: 1;
  transition: opacity var(--t-fast) var(--ease);
}
.report__lg.is-off { opacity: .35; }
.report__sw { width: 12px; height: 3px; border-radius: 2px; background: currentColor; }
.report__plot { position: relative; padding: var(--s-6); }
.report__plot svg { width: 100%; height: auto; overflow: visible; }
.report__foot {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-2xs);
  color: var(--fg-3);
}
.rt-grid { stroke: var(--line); stroke-width: 1; }
.rt-target { stroke: var(--warn); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .85; }
.rt-axis { fill: var(--fg-3); font-size: 10px; font-feature-settings: 'tnum' 1; }
.rt-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rt-area { opacity: .1; }
.rt-dot { stroke: var(--bg-1); stroke-width: 1.5; }
.rt-hit { fill: transparent; cursor: crosshair; }
.rt-cursor { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 3 3; }
.rt-band-ok { fill: var(--ok); opacity: .08; }
.rt-band-bad { fill: var(--warn); opacity: .08; }
.rt-tip {
  position: absolute;
  pointer-events: none;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-2xs);
  box-shadow: var(--shadow);
  min-width: 150px;
  opacity: 0;
  transform: translate(-50%, -118%);
  transition: opacity var(--t-fast) var(--ease);
  z-index: 3;
}
.rt-tip.is-on { opacity: 1; }
.rt-tip b { display: block; color: var(--fg); margin-bottom: 4px; font-feature-settings: 'tnum' 1; }
.rt-tip .r { display: flex; justify-content: space-between; gap: var(--s-4); color: var(--fg-2); padding: 1px 0; }
.rt-tip .r i { font-style: normal; font-feature-settings: 'tnum' 1; }

/* -------------------------------------------------------------- 견적 산출기 */

.calc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-10); align-items: start; }
@media (max-width: 1080px) { .calc { grid-template-columns: minmax(0, 1fr); } }

.calc__presets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); }
.calc__grp { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--s-5); overflow: hidden; }
.calc__gh {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.calc__gc { font-size: var(--fs-2xs); font-weight: var(--fw-black); letter-spacing: var(--ls-wide); color: var(--accent); }
.calc__gt { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg); }
.calc__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.calc__row + .calc__row { border-top: 1px solid var(--line); }
.calc__row:hover { background: var(--card); }
.calc__row.is-on { background: var(--accent-soft); }
.calc__row.is-lock { cursor: default; }
.calc__row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); }
.calc__n { font-size: var(--fs-sm); color: var(--fg); }
.calc__d { font-size: var(--fs-2xs); color: var(--fg-3); margin-top: 1px; }
.calc__p { font-size: var(--fs-sm); font-feature-settings: 'tnum' 1; color: var(--fg-2); white-space: nowrap; }
.calc__row.is-on .calc__p { color: var(--fg); font-weight: var(--fw-semi); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.qty button { width: 26px; height: 26px; display: grid; place-items: center; color: var(--fg-2); font-size: 14px; line-height: 1; }
.qty button:hover { background: var(--card-hover); color: var(--fg); }
.qty span { min-width: 26px; text-align: center; font-size: var(--fs-xs); font-feature-settings: 'tnum' 1; color: var(--fg); }
@media (max-width: 560px) {
  .calc__row { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: var(--s-2); }
  .calc__row .qty { grid-column: 2 / -1; justify-self: start; }
}

.calc__panel { position: sticky; top: calc(var(--header-h) + var(--s-5)); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg-1); overflow: hidden; box-shadow: var(--shadow); }
.calc__set { padding: var(--s-6); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.calc__setname { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--fg); }
.calc__setline { font-size: var(--fs-2xs); color: var(--fg-3); margin-top: 2px; }
.calc__total { padding: var(--s-6); }
.calc__tl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-xs); color: var(--fg-2); padding: 3px 0; }
.calc__tl b { font-feature-settings: 'tnum' 1; color: var(--fg); font-weight: var(--fw-semi); }
.calc__sum { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-2); }
.calc__sum span { font-size: var(--fs-xs); color: var(--fg-2); }
.calc__sum b { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--fg); font-feature-settings: 'tnum' 1; letter-spacing: var(--ls-tight); }
.calc__note { padding: 0 var(--s-6) var(--s-6); font-size: var(--fs-2xs); color: var(--fg-3); line-height: 1.7; }
.calc__acts { padding: var(--s-5) var(--s-6); border-top: 1px solid var(--line); display: grid; gap: var(--s-2); background: var(--bg-2); }
.calc__list { max-height: 190px; overflow-y: auto; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--line); }
.calc__li { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-2xs); color: var(--fg-2); padding: 2px 0; }
.calc__li i { font-style: normal; color: var(--fg-3); }

/* -------------------------------------------------------------- 세트 카드 */

.set { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-8); background: var(--card); position: relative; }
.set.is-hi { border-color: var(--accent-line); background: var(--accent-soft); }
.set__tag { position: absolute; top: calc(var(--s-4) * -1); left: var(--s-8); }
.set__k { font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-3); font-weight: var(--fw-bold); }
.set__n { font-size: var(--fs-xl); margin: var(--s-2) 0; }
.set__s { font-size: var(--fs-xs); color: var(--fg-2); }
.set__p { margin: var(--s-6) 0; font-size: var(--fs-2xl); font-weight: var(--fw-black); color: var(--fg); font-feature-settings: 'tnum' 1; letter-spacing: var(--ls-tight); line-height: 1.1; }
.set__p small { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-normal); color: var(--fg-3); letter-spacing: 0; margin-top: var(--s-2); }
.set__for { font-size: var(--fs-xs); color: var(--fg-2); padding: var(--s-3) var(--s-4); background: var(--bg-2); border-radius: var(--r-sm); margin-bottom: var(--s-6); }
.set__l { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.set__l li { display: flex; gap: var(--s-3); font-size: var(--fs-xs); color: var(--fg-2); }
.set__l li::before { content: "✓"; color: var(--ok); flex: none; font-weight: var(--fw-bold); }
.set__l--no li::before { content: "×"; color: var(--fg-3); }
.set__cta { margin-top: auto; }

/* -------------------------------------------------------------- 계약 비교 */

.contract { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.contract__h { padding: var(--s-6); border-bottom: 1px solid var(--line); }
.contract--guard .contract__h { background: var(--ok-bg); }
.contract--flat .contract__h { background: var(--bg-2); }
.contract__n { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--fg); }
.contract__line { font-size: var(--fs-xs); color: var(--fg-2); margin-top: 2px; }
.contract__r { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) var(--s-6); font-size: var(--fs-xs); }
.contract__r + .contract__r { border-top: 1px solid var(--line); }
.contract__r dt { color: var(--fg-3); }
.contract__r dd { margin: 0; color: var(--fg-1); }
.contract__f { padding: var(--s-4) var(--s-6); background: var(--bg-2); border-top: 1px solid var(--line); font-size: var(--fs-2xs); color: var(--fg-2); }

/* -------------------------------------------------------------- 절차 가로흐름 */

.flow { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.flow__i { border-top: 2px solid var(--line); padding-top: var(--s-5); position: relative; }
.flow__i.is-on { border-top-color: var(--accent); }
.flow__n { font-size: var(--fs-2xs); font-weight: var(--fw-black); color: var(--accent); letter-spacing: var(--ls-wide); }
.flow__t { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--fg); margin: var(--s-2) 0; }
.flow__d { font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.7; }
.flow__w { font-size: var(--fs-2xs); color: var(--fg-3); margin-top: var(--s-3); }

/* -------------------------------------------------------------- 필터 목록 */

.filters { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: flex-start; padding: var(--s-5) 0; border-block: 1px solid var(--line); margin-bottom: var(--s-8); }
.filters__g { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.filters__l { font-size: var(--fs-2xs); color: var(--fg-3); letter-spacing: var(--ls-wide); text-transform: uppercase; font-weight: var(--fw-bold); margin-right: var(--s-1); }
.filters__search { margin-left: auto; position: relative; min-width: 220px; }
.filters__search input { height: 34px; padding-left: var(--s-8); font-size: var(--fs-xs); border-radius: var(--r-pill); }
.filters__search svg { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--fg-3); }
.filters__count { font-size: var(--fs-2xs); color: var(--fg-3); }
@media (max-width: 720px) { .filters__search { margin-left: 0; width: 100%; } }

.res { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.res__i.is-hidden { display: none; }

/* -------------------------------------------------------------- 사례 카드 */

.case-c { display: flex; flex-direction: column; gap: var(--s-4); }
.case-c__top { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.case-c__t { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--fg); line-height: 1.45; }
.case-c__r { display: grid; gap: var(--s-2); padding: var(--s-4); background: var(--bg-2); border-radius: var(--r-sm); }
.case-c__r div { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-2xs); color: var(--fg-2); }
.case-c__r b { color: var(--fg); font-feature-settings: 'tnum' 1; }

.result-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.result-hero > div { background: var(--bg-1); padding: var(--s-6); }
.result-hero .k { font-size: var(--fs-2xs); color: var(--fg-3); margin-bottom: var(--s-2); }
.result-hero .v { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--fg); line-height: 1.35; }

/* -------------------------------------------------------------- 지역 */

.local-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s-3); }
.local-c { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); transition: all var(--t-fast) var(--ease); }
.local-c:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-2px); }
.local-c__n { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--fg); }
.local-c__k { font-size: var(--fs-2xs); color: var(--fg-3); line-height: 1.6; }
.diff { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); }
.diff__b { display: flex; gap: 2px; }
.diff__b i { width: 4px; height: 10px; border-radius: 1px; background: var(--line-2); }
.diff--high { color: var(--bad); }
.diff--high .diff__b i { background: var(--bad); }
.diff--mid { color: var(--warn); }
.diff--mid .diff__b i:nth-child(-n+2) { background: var(--warn); }
.diff--low { color: var(--ok); }
.diff--low .diff__b i:nth-child(1) { background: var(--ok); }

.kw-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.kw-list__r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); background: var(--bg); font-size: var(--fs-sm); }
.kw-list__r b { color: var(--fg); font-weight: var(--fw-medium); }

/* -------------------------------------------------------------- 본문(프로즈) */

.prose { max-width: 74ch; font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--fg-1); }
.prose > * + * { margin-top: var(--s-6); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--s-16); scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--s-10); }
.prose p { margin-bottom: 0; }
.prose ul, .prose ol { display: grid; gap: var(--s-3); padding-left: var(--s-5); }
.prose li { list-style: disc; color: var(--fg-2); }
.prose ol li { list-style: decimal; }
.prose blockquote {
  margin: 0;
  padding: var(--s-5) var(--s-6);
  border-left: 2px solid var(--accent);
  background: var(--card);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--fg-2);
  font-size: var(--fs-sm);
}
.prose figure { margin: 0; }
.prose figcaption { font-size: var(--fs-2xs); color: var(--fg-3); margin-top: var(--s-2); }

.article-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-2xs); color: var(--fg-3); }
.reading-bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.reading-bar i { display: block; height: 100%; background: var(--accent); width: var(--rp, 0%); transition: width 80ms linear; }

/* -------------------------------------------------------------- CTA 밴드 */

.cta-band { position: relative; overflow: hidden; background: var(--bg-brand); border-radius: var(--r-xl); padding: clamp(var(--s-10), 6vw, var(--s-20)); }
.cta-band::before {
  content: "";
  position: absolute;
  right: -8%; top: -40%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,107,44,.28), transparent 62%);
  pointer-events: none;
}
.cta-band__in { position: relative; max-width: 640px; }
.cta-band h2 { color: #fff; margin-bottom: var(--s-4); }
.cta-band p { color: rgba(255,255,255,.72); font-size: var(--fs-sm); margin-bottom: var(--s-8); }
.cta-band .btn--ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.cta-band .btn--ghost:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); }

/* -------------------------------------------------------------- 예약 달력 */

.cal { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cal__h { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.cal__m { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg); font-feature-settings: 'tnum' 1; }
.cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); }
.cal__dow { background: var(--bg-1); padding: var(--s-2); text-align: center; font-size: 10px; color: var(--fg-3); font-weight: var(--fw-bold); }
.cal__d { background: var(--bg); padding: var(--s-3) 0; text-align: center; font-size: var(--fs-xs); color: var(--fg-1); font-feature-settings: 'tnum' 1; transition: background var(--t-fast) var(--ease); }
.cal__d:disabled { color: var(--fg-3); opacity: .4; cursor: not-allowed; }
.cal__d:not(:disabled):hover { background: var(--card-hover); }
.cal__d.is-sel { background: var(--accent); color: #fff; font-weight: var(--fw-bold); }
.cal__d.is-today { box-shadow: inset 0 0 0 1px var(--accent-line); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s-2); margin-top: var(--s-5); }
.slot { height: 38px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--fg-1); font-feature-settings: 'tnum' 1; transition: all var(--t-fast) var(--ease); }
.slot:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent); }
.slot:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.slot.is-sel { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: var(--fw-semi); }

/* -------------------------------------------------------------- 진단 도구 */

.gauge { display: grid; place-items: center; gap: var(--s-3); }
.gauge svg { width: 168px; height: 168px; transform: rotate(-90deg); }
.gauge__bg { fill: none; stroke: var(--line); stroke-width: 10; }
.gauge__fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 900ms var(--ease); }
.gauge__v { font-size: var(--fs-2xl); font-weight: var(--fw-black); color: var(--fg); font-feature-settings: 'tnum' 1; }

.checklist { display: grid; gap: var(--s-2); }
.checklist__i { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.checklist__i:hover { border-color: var(--line-2); }
.checklist__i input { width: 16px; height: 16px; accent-color: var(--ok); }
.checklist__i:has(input:checked) { background: var(--ok-bg); border-color: transparent; }
.checklist__w { font-size: var(--fs-2xs); color: var(--fg-3); font-feature-settings: 'tnum' 1; }

/* -------------------------------------------------------------- 사이트맵 페이지 */

.sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-8); }
.sm__g h4 { font-size: var(--fs-sm); color: var(--fg); margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.sm__g a { display: block; padding: 3px 0; font-size: var(--fs-xs); color: var(--fg-2); }
.sm__g a:hover { color: var(--accent); }
.sm__g small { color: var(--fg-3); font-feature-settings: 'tnum' 1; margin-right: 6px; }

/* -------------------------------------------------------------- 404 */

.nf { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.nf__c { font-size: clamp(80px, 18vw, 190px); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); line-height: 1; background: linear-gradient(180deg, var(--fg) 20%, transparent 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }