/* ══════════════════════════════════════════════════════════════════════
   한끼장부 — 주간 식비 장부 · 장보기
   위쪽 절반은 공통 뼈대(kit.css, 동작만). 아래쪽이 이 벌의 디자인이다.
   축: 「길게 이어지는 영수증과 식비 장부」 — 고정폭 숫자·오른쪽 정렬 금액 열·
   소계/합계 줄·점선 절취선이 화면 문법이 된다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 기본 ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; }

img { -webkit-user-drag: none; user-select: none; }

.frame { display: block; }

/* ── 초점 ─────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .75rem 1rem; background: Canvas; color: CanvasText;
}
.skip-link:focus { left: 0; }

/* ── 터치 영역 ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .site-header a, .site-header button,
  .drawer a, .drawer button,
  .dots button, .pager button, .tab {
    min-width: 44px; min-height: 44px;
  }
}

/* ── 가로 넘침 ───────────────────────────────────────────────────── */
.scroll-x { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; }

.clip { overflow: clip; }

/* ── 무JS 완성본 ─────────────────────────────────────────────────── */
.acc-item .acc-panel { display: block; }
.js .acc-item .acc-panel { display: none; }
.js .acc-item.open .acc-panel { display: block; }

.js [role="tabpanel"][hidden] { display: none; }
[role="tabpanel"][hidden] { display: block; }

.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.in { opacity: 1; transform: none; }

html:not(.js) .js-only { display: none !important; }

:where([hidden]):not([role="tabpanel"]) { display: none !important; }

/* ── 모션 끔 ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── 모바일 서랍 ─────────────────────────────────────────────────── */
.menu-btn { display: none; }
@media (max-width: 767px) { .menu-btn { display: inline-flex; } }

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px);
  transform: translateX(100%); transition: transform .28s ease;
  z-index: 60; overflow-y: auto;
  visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }

.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgb(0 0 0 / .45);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

@media (min-width: 768px) { .drawer, .scrim { display: none; } }

/* ── 토스트 ─────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 0;
  z-index: 80; pointer-events: none;
  opacity: 0; transition: opacity .25s ease, translate .25s ease;
}
.toast.show { opacity: 1; translate: -50% -6px; }

/* ── 폼 ─────────────────────────────────────────────────────────── */
.agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agree input:focus-visible + label .box { outline: 2px solid currentColor; outline-offset: 2px; }

.spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: kit-spin .7s linear infinite;
}
@keyframes kit-spin { to { rotate: 360deg; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── 구획 리듬 ───────────────────────────────────────────────────── */
.section { padding-block: calc(var(--section, 96px) / 2); }
.section-lead { padding-top: var(--section, 96px); }
.section-last { padding-bottom: var(--section, 96px); }

/* ══════════════════════════════════════════════════════════════════════
   여기부터 한끼장부의 디자인
   ══════════════════════════════════════════════════════════════════════ */

/* ── 토큰 ─────────────────────────────────────────────────────────
   분기점(breakpoint) 토큰은 CSS 미디어쿼리에 변수를 쓸 수 없어 값으로 적는다.
   sm 480 · md 768(내비 숨김 분기는 767) · lg 1024 · xl 1280 · xxl 1440 */
:root {
  /* color — 원자료 지정값 */
  --red: #EA4E32;
  --red-d: #C0361C;
  --ground: #FFF7DF;
  --ground-2: #F8ECC8;
  --ink: #1B4535;
  --deep: #143A2B;
  --on-deep: #F4EBD2;
  --ink-70: rgba(27, 69, 53, .70);
  --ink-52: rgba(27, 69, 53, .52);
  --ink-38: rgba(27, 69, 53, .38);
  --rule: rgba(27, 69, 53, .20);
  --rule-2: rgba(27, 69, 53, .42);
  /* 의미색 — 언제나 글자·기호와 함께 쓴다(색만으로 상태를 전하지 않는다) */
  --st-ok: #1B4535;
  --st-warn: #A85A00;
  --st-bad: #C0361C;

  /* type */
  --sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* spacing */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --section: 64px;

  /* size */
  --wrap: 1140px;
  --tape: 700px;
  --hdr-h: 60px;

  /* border */
  --bw: 1px; --bw2: 2px;

  /* z-index */
  --z-header: 40; --z-scrim: 50; --z-drawer: 60; --z-toast: 80;
}

@media (max-width: 767px) { :root { --hdr-h: 56px; --section: 44px; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: var(--red); color: #fff; }

.skip-link { background: var(--ink); color: var(--ground); }

/* 숫자는 어디서나 고정폭으로 — 장부의 세로 정렬축을 지킨다 */
.num, .rc-a, .rc-c, .amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 공통 활자 ───────────────────────────────────────────────────── */
.meta {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-52);
  margin: 0 0 var(--s4);
}
.disp {
  font-weight: 800;
  font-size: clamp(1.9rem, 5.1vw, 3.05rem);
  line-height: 1.16;
  letter-spacing: -.035em;
  margin: 0;
}
.lead {
  margin: var(--s4) 0 0;
  max-width: 34em;
  color: var(--ink-70);
  font-size: 1.02rem;
}
.h-sec {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 var(--s2);
}
.sub {
  margin: 0 0 var(--s4);
  color: var(--ink-52);
  font-size: .88rem;
}
.blk { margin: 0 0 var(--s6); }
.blk:last-child { margin-bottom: 0; }

/* ── 절취선 ─────────────────────────────────────────────────────── */
.cut {
  border: 0;
  border-top: var(--bw2) dashed var(--rule-2);
  height: 0;
  margin: var(--s6) 0;
  padding: 0;
  position: relative;
}
.cut::before, .cut::after {
  content: "";
  position: absolute;
  top: -10px; width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.cut::before { left: -9px; }
.cut::after { right: -9px; }

.cut-over {
  border-top-color: var(--red);
  margin-block: calc(var(--s6) + .7rem) var(--s6);
}
.cut-over::before, .cut-over::after { box-shadow: inset 0 0 0 1px var(--red); }
.cut-tag {
  position: absolute;
  top: -1.05rem; left: 14px;
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: .1rem .5rem;
  white-space: nowrap;
}
@media (max-width: 420px) { .cut-tag { font-size: .62rem; left: 6px; } }

/* ── 헤더 ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--ground);
  border-bottom: var(--bw) solid var(--rule);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--rule); }
.header-inner {
  display: flex; align-items: center; gap: var(--s5);
  height: var(--hdr-h);
  padding-inline: clamp(.9rem, 2.4vw, 1.75rem);
}
.brand { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; }
.brand-name { font-weight: 800; font-size: 1.06rem; letter-spacing: -.03em; }
.brand-sub {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .2em;
  color: var(--ink-38); text-transform: uppercase;
}
.nav { margin-left: auto; display: flex; gap: clamp(.7rem, 1.6vw, 1.35rem); }
.nav a {
  text-decoration: none; font-size: .84rem; color: var(--ink-70);
  padding: .25rem 0; border-bottom: var(--bw2) solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); font-weight: 700; border-bottom-color: var(--red); }
.header-cta {
  text-decoration: none; font-size: .84rem; font-weight: 700; color: var(--red);
  border-bottom: var(--bw2) solid var(--red);
  padding: .25rem 0; white-space: nowrap;
}
.header-cta:hover { color: var(--red-d); border-bottom-color: var(--red-d); }
.menu-btn {
  margin-left: auto; background: none; border: 0; color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 16px; height: 16px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (max-width: 767px) {
  .nav, .header-cta { display: none; }
}

/* ── 서랍 ───────────────────────────────────────────────────────── */
.drawer { background: var(--deep); color: var(--on-deep); padding: var(--s5) var(--s5) var(--s7); }
.drawer .brand { color: var(--on-deep); }
.drawer .brand-sub { color: rgba(244, 235, 210, .5); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.drawer-close {
  background: none; border: var(--bw) solid rgba(244, 235, 210, .4); color: inherit;
  font: inherit; font-size: .82rem; padding: .35rem .75rem; cursor: pointer;
}
.drawer-nav { display: flex; flex-direction: column; margin-top: var(--s6); }
.drawer-nav a {
  display: flex; align-items: center; text-decoration: none;
  font-size: 1.18rem; font-weight: 700; letter-spacing: -.02em;
  padding: .55rem 0; border-bottom: var(--bw) solid rgba(244, 235, 210, .18);
}
.drawer-nav a[aria-current] { color: var(--red); }
.drawer-cta {
  display: flex; align-items: center; justify-content: center;
  margin-top: var(--s5); background: var(--red); color: #fff;
  text-decoration: none; font-weight: 800; padding: .9rem 1rem;
}
.drawer-tel { margin: var(--s4) 0 0; font-family: var(--mono); font-size: .86rem; }
.drawer-tel a { text-decoration: none; }

/* ── 홈: 첫 화면 3열 띠 ─────────────────────────────────────────────
   시안 01-home 의 구성을 그대로 옮긴다 — 왼쪽 사진 · 가운데 영수증 · 오른쪽 남은 재료.
   세 칸은 같은 높이로 늘어난다(고정 위치를 쓰지 않는다 — 스크롤 중 본문을 덮지 않게).
   그 아래부터는 속면과 같은 골격(.desk)으로 이어져 장부의 폭이 유지된다. */
.hero { display: flex; flex-direction: column; }

.hero-photo { position: relative; overflow: clip; background: var(--ink); min-height: min(52vh, 380px); }
.rail-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rail-cap {
  position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s4);
  margin: 0; color: #fff; font-size: .76rem; line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
}
.rail-cap .mono { font-family: var(--mono); letter-spacing: .14em; }

.hero-lead { padding: var(--s7) clamp(1.25rem, 3vw, 2.25rem) var(--s5); }
.hero-tape { padding: 0 clamp(1.25rem, 3vw, 2.25rem) var(--s7); }

.rail-panel {
  background: var(--deep); color: var(--on-deep);
  padding: var(--s6) clamp(1.1rem, 2.2vw, 1.75rem);
  display: flex; flex-direction: column;
}
.meta-inv { color: rgba(244, 235, 210, .62); }
.inv-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.inv-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: .5rem 0; border-bottom: var(--bw) solid rgba(244, 235, 210, .2);
}
.inv-n { font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 800; letter-spacing: -.04em; }
.inv-q { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 700; }
.inv-note { margin: 0 0 var(--s4); font-size: .84rem; color: rgba(244, 235, 210, .78); }
.inv-note strong { color: #fff; }
.inv-go {
  margin-top: auto; text-decoration: none; font-weight: 700; font-size: .9rem;
  border-top: var(--bw) solid rgba(244, 235, 210, .35); padding-top: var(--s3);
  display: inline-flex; align-items: center; gap: .4rem;
}

@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 40fr) minmax(0, 26fr);
    grid-template-areas:
      "photo lead  panel"
      "photo tape  panel";
    align-items: stretch;
  }
  .hero-photo { grid-area: photo; min-height: 0; }
  .hero-lead { grid-area: lead; }
  .hero-tape { grid-area: tape; }
  .rail-panel { grid-area: panel; }
}

/* 620~1023px — 사진을 폭 전체로 늘리면 세로 사진이 크게 확대돼 뭉갠다.
   두 칸으로 갈라 사진 칸을 좁게 두고, 남은 재료는 아래 띠로 내린다. */
@media (min-width: 620px) and (max-width: 1023px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    grid-template-areas:
      "photo lead"
      "photo tape"
      "panel panel";
    align-items: stretch;
  }
  .hero-photo { grid-area: photo; min-height: 0; }
  .hero-lead { grid-area: lead; }
  .hero-tape { grid-area: tape; }
  .rail-panel { grid-area: panel; }
  .inv-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); }
}

@media (max-width: 1023px) {
  /* 모바일은 PC 축소가 아니라 제목 → 사진 → 영수증 → 예산 → 남은 재료 순서다 */
  .rail-panel { padding-block: var(--s6); }
}

/* 첫 화면 표제는 가운데 칸 폭에 맞춘다(뷰포트 폭으로만 재면 1024~1280 에서 세 줄로 갈라진다) */
.hero-lead .disp { font-size: clamp(1.85rem, 5vw, 3rem); }
@media (min-width: 1024px) { .hero-lead .disp { font-size: clamp(1.85rem, 3.3vw, 3rem); } }

/* ── 영수증 ─────────────────────────────────────────────────────── */
.rc { margin: 0; }
.rc-head, .rc-line {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 6rem 1.35rem;
  align-items: baseline;
  gap: .55rem;
}
.rc-head {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-38);
  padding: 0 .1rem .4rem; border-bottom: var(--bw2) solid var(--ink);
}
.rc-list { list-style: none; margin: 0; padding: 0; }
.rc-row + .rc-row { border-top: 0; }
.rc-line {
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: var(--bw) solid var(--rule);
  color: inherit; font: inherit; padding: .72rem .1rem;
  text-decoration: none;
}
a.rc-line, button.rc-line { cursor: pointer; transition: background-color .16s ease; }
a.rc-line:hover, button.rc-line:hover { background: rgba(27, 69, 53, .05); }
a.rc-line:active, button.rc-line:active { background: rgba(27, 69, 53, .09); }
.rc-i { font-family: var(--mono); font-size: .7rem; color: var(--ink-38); letter-spacing: .04em; }
.rc-n { font-weight: 600; letter-spacing: -.01em; }
.rc-q { font-style: normal; font-weight: 500; color: var(--ink-52); font-size: .86em; margin-left: .3rem; }
.rc-a { text-align: right; font-size: .96rem; font-weight: 500; }
.rc-x { text-align: right; color: var(--ink-38); font-size: .92rem; }
.acc-trigger[aria-expanded="true"] .rc-x { color: var(--red); }
.rc-d { padding: .1rem .1rem .95rem 3.05rem; border-bottom: var(--bw) solid var(--rule); }
.rc-sum .rc-line { border-top: var(--bw2) solid var(--ink); border-bottom: 0; font-weight: 800; }
.rc-sum .rc-a { font-weight: 700; }
.rc-total .rc-line { border-top: var(--bw2) solid var(--ink); border-bottom: 0; }
.rc-total .rc-n, .rc-total .rc-a { font-weight: 800; font-size: 1.05rem; }

.meta-dl { margin: 0; font-size: .85rem; }
.meta-dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; padding: .18rem 0; }
.meta-dl dt { color: var(--ink-52); font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding-top: .2rem; }
.meta-dl dd { margin: 0; }

@media (max-width: 520px) {
  .rc-head, .rc-line { grid-template-columns: 1.9rem minmax(0, 1fr) 4.9rem 1.1rem; gap: .4rem; }
  .rc-a { font-size: .88rem; }
  .rc-d { padding-left: 2.3rem; }
  .meta-dl > div { grid-template-columns: 1fr; gap: 0; padding-bottom: .4rem; }
}

/* ── 큰 금액 ────────────────────────────────────────────────────── */
.shout {
  font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 8.5vw, 3.9rem);
  line-height: 1; letter-spacing: -.045em; color: var(--red);
  margin: .1rem 0 var(--s3);
}

/* ── 표 ─────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl caption {
  caption-side: top; text-align: left; font-size: .78rem; color: var(--ink-52);
  padding-bottom: .5rem;
}
.tbl th, .tbl td { padding: .58rem .5rem; border-bottom: var(--bw) solid var(--rule); text-align: left; vertical-align: baseline; }
.tbl thead th {
  font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-38); border-bottom: var(--bw2) solid var(--ink);
  padding-bottom: .4rem;
}
.tbl .num { text-align: right; white-space: nowrap; }
.tbl tfoot td, .tbl tfoot th {
  border-top: var(--bw2) solid var(--ink); border-bottom: 0;
  font-weight: 800; padding-top: .65rem;
}
.tbl .row-over td, .tbl .row-over th { background: rgba(234, 78, 50, .07); }
.scroll-x .tbl { min-width: 460px; }

/* 상태 표식 — 색만으로 전하지 않는다(기호 + 글자를 함께 쓴다) */
.st { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.st::before { margin-right: .28rem; font-family: var(--mono); }
.st-ok { color: var(--st-ok); }
.st-ok::before { content: "●"; }
.st-warn { color: var(--st-warn); }
.st-warn::before { content: "▲"; }
.st-bad { color: var(--st-bad); }
.st-bad::before { content: "■"; }

/* ── 사진 띠 ────────────────────────────────────────────────────── */
.band { margin: var(--s6) 0 0; padding: 0; }
.band img { display: block; width: 100%; height: auto; }
.band figcaption {
  font-size: .82rem; color: var(--ink-52);
  border-top: var(--bw) solid var(--rule); margin-top: .6rem; padding-top: .55rem;
}
.band-wide { max-width: 720px; }
.band-wide img { max-height: 340px; object-fit: cover; }
.band-sq { max-width: 420px; }

/* ── 주요 행동 ──────────────────────────────────────────────────── */
.act-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; background: var(--red); color: #fff;
  text-decoration: none; font-weight: 800; font-size: 1rem;
  padding: 1rem 1.1rem; border: 0; cursor: pointer;
  transition: background-color .16s ease;
}
.act-btn:hover { background: var(--red-d); }
.act-btn:active { background: var(--red-d); }

.idx-list { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.idx-list a {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.35rem;
  gap: .55rem; align-items: baseline;
  text-decoration: none; padding: .8rem .1rem;
  border-bottom: var(--bw) solid var(--rule);
}
.idx-list a:hover { background: rgba(27, 69, 53, .05); }
.idx-i { font-family: var(--mono); font-size: .7rem; color: var(--ink-38); }
.idx-n { font-weight: 700; letter-spacing: -.02em; }
.idx-d { display: block; font-weight: 500; color: var(--ink-52); font-size: .84rem; margin-top: .1rem; }
.idx-x { text-align: right; color: var(--ink-38); }

/* ── 고지 ───────────────────────────────────────────────────────── */
.note {
  border-top: var(--bw2) solid var(--ink);
  padding-top: var(--s4);
  font-size: .82rem; color: var(--ink-52); line-height: 1.7;
}
.note h2, .note h3 {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-38); margin: 0 0 .5rem; font-weight: 500;
}
.note p { margin: 0 0 .5rem; }
.note p:last-child { margin-bottom: 0; }

/* ── 속면 공통 골격 ─────────────────────────────────────────────── */
.page-head {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s7) clamp(1.25rem, 3vw, 2rem) var(--s5);
}
.desk {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2rem) var(--s8);
  display: grid; gap: var(--s6); align-items: start;
}
.canvas { max-width: var(--tape); min-width: 0; }

@media (min-width: 1024px) {
  .desk { grid-template-columns: minmax(0, 1fr) 232px; gap: var(--s7); }
  .ctx { position: sticky; top: calc(var(--hdr-h) + 24px); }
}
@media (max-width: 1023px) {
  .ctx { order: -1; }
  .ctx-tail { order: 0; }
}

/* ContextIndex — 4단계 장부 목차 */
.ctx { min-width: 0; }
.ctx-t {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-38); margin: 0 0 .5rem; font-weight: 500;
}
.ctx-list { list-style: none; margin: 0; padding: 0; border-top: var(--bw2) solid var(--ink); }
.ctx-list a {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 1.1rem; gap: .4rem;
  align-items: baseline; text-decoration: none;
  padding: .62rem .1rem; border-bottom: var(--bw) solid var(--rule);
  font-size: .9rem;
}
.ctx-list a:hover { background: rgba(27, 69, 53, .05); }
.ctx-list .ctx-i { font-family: var(--mono); font-size: .68rem; color: var(--ink-38); }
.ctx-n { font-weight: 700; letter-spacing: -.02em; }
.ctx-list .ctx-x { text-align: right; color: var(--ink-38); font-size: .82rem; }
.ctx-list a[aria-current] { background: rgba(234, 78, 50, .1); font-weight: 800; }
.ctx-list a[aria-current] .ctx-i { color: var(--red); }
.ctx-now { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; color: var(--red); }

/* ── 예산 조절기 ────────────────────────────────────────────────── */
.setter { border-top: var(--bw2) solid var(--ink); padding-top: var(--s4); }
.setter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.setter-f { flex: 1 1 12rem; min-width: 0; }
.setter-f label {
  display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-52); margin-bottom: .35rem;
}
.setter-in {
  width: 100%; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.3rem; font-weight: 700; color: var(--ink);
  background: transparent; border: 0; border-bottom: var(--bw2) solid var(--ink);
  padding: .35rem .1rem; text-align: right;
}
.setter-in:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--s3) 0 0; padding: 0; list-style: none; }
.chip {
  background: transparent; border: var(--bw) solid var(--rule-2); color: var(--ink);
  font: inherit; font-size: .82rem; padding: .45rem .8rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); font-weight: 700; }
.setter-msg { margin: var(--s3) 0 0; font-size: .85rem; color: var(--ink-70); min-height: 1.4em; }

/* ── 장바구니 ───────────────────────────────────────────────────── */
.finder { border-top: var(--bw2) solid var(--ink); padding-top: var(--s4); margin-bottom: var(--s5); }
.finder-in {
  width: 100%; font: inherit; color: var(--ink); background: transparent;
  border: var(--bw) solid var(--rule-2); padding: .7rem .85rem;
}
.finder-in:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.finder-count { margin: var(--s3) 0 0; font-size: .84rem; color: var(--ink-52); font-family: var(--mono); }

.rc-pick { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 4.6rem 4.9rem 4.9rem; gap: .5rem; align-items: center; }
.pick-row { border-bottom: var(--bw) solid var(--rule); padding: .6rem .1rem; }
.pick-row.is-picked { background: rgba(234, 78, 50, .07); }
.pick-name { font-weight: 600; letter-spacing: -.01em; }
.pick-q { font-weight: 500; color: var(--ink-52); font-size: .86em; margin-left: .3rem; }
.pick-meta { display: block; font-size: .76rem; color: var(--ink-52); font-weight: 500; margin-top: .15rem; line-height: 1.5; }
.pick-price { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .95rem; }
.pick-cum { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .84rem; color: var(--ink-52); }
.pick-cum:empty::before { content: "—"; color: var(--ink-38); }
.pick-act { display: flex; justify-content: flex-end; gap: .3rem; align-items: center; }
.pick-btn {
  background: transparent; border: var(--bw) solid var(--rule-2); color: var(--ink);
  font: inherit; font-size: .82rem; font-weight: 700; padding: .45rem .7rem; cursor: pointer;
  white-space: nowrap; min-width: 4.4rem;
}
.pick-btn:hover { border-color: var(--ink); }
.pick-btn[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.pick-head {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 4.6rem 4.9rem 4.9rem; gap: .5rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-38); padding: 0 .1rem .4rem; border-bottom: var(--bw2) solid var(--ink);
}
.pick-head span:nth-child(3), .pick-head span:nth-child(4), .pick-head span:nth-child(5) { text-align: right; }
.pick-list { list-style: none; margin: 0; padding: 0; }
.grp-t {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-52); margin: var(--s5) 0 .35rem; font-weight: 500;
}
.pick-group:first-of-type .grp-t { margin-top: var(--s4); }

@media (max-width: 680px) {
  .rc-pick, .pick-head { grid-template-columns: 1.8rem minmax(0, 1fr) 4.5rem; }
  .pick-head span:nth-child(4), .pick-head span:nth-child(5) { display: none; }
  .pick-cum { grid-column: 2 / -1; text-align: left; font-size: .78rem; }
  .pick-cum:empty { display: none; }
  .pick-act { grid-column: 1 / -1; justify-content: flex-start; margin-top: .4rem; }
}

.empty {
  border: var(--bw) dashed var(--rule-2); padding: var(--s5);
  text-align: center; color: var(--ink-52); font-size: .9rem; margin: var(--s4) 0 0;
}
.empty strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: .3rem; }
.empty .chip { margin-top: var(--s3); }

.state-bar {
  position: sticky; top: var(--hdr-h); z-index: 20;
  background: var(--ink); color: var(--ground);
  padding: var(--s3) var(--s4); margin: var(--s4) 0 var(--s5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
}
.state-i { display: flex; flex-direction: column; gap: .05rem; }
.state-k { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.state-v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 700; }
.state-msg { flex: 1 1 100%; font-size: .82rem; opacity: .88; }
.state-go {
  margin-left: auto; background: var(--red); color: #fff; text-decoration: none;
  font-weight: 800; font-size: .88rem; padding: .6rem 1rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35rem;
}
.state-go:hover { background: var(--red-d); }
.state-bar.is-over { background: var(--red); }
.state-bar.is-over .state-go { background: #fff; color: var(--red); }

/* ── 단계 표시 ──────────────────────────────────────────────────── */
.step { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.step::before {
  content: ""; position: absolute; top: 21px; left: 22px; right: 22px;
  height: 2px; background: var(--ink); opacity: .35;
}
.step li { display: grid; gap: .55rem; justify-items: start; position: relative; }
.step-dot {
  width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff;
  display: grid; place-items: center; font-family: var(--mono); font-size: .8rem; font-weight: 700;
  position: relative; z-index: 1; flex: none;
}
.step li[aria-current] .step-dot { box-shadow: 0 0 0 4px rgba(234, 78, 50, .25); }
.step-body { display: block; min-width: 0; }
.step-t { font-weight: 800; letter-spacing: -.02em; display: block; }
.step-d { display: block; font-size: .8rem; color: var(--ink-52); font-family: var(--mono); font-variant-numeric: tabular-nums; margin-top: .1rem; }

@media (max-width: 600px) {
  .step { grid-template-columns: 1fr; gap: 0; }
  .step::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  .step li { grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: .85rem; padding-block: .4rem; }
}

/* ── 아코디언(보관 안내) ────────────────────────────────────────── */
.acc { border-top: var(--bw2) solid var(--ink); }
.acc-trigger.acc-plain {
  display: grid; grid-template-columns: minmax(0, 1fr) 1.2rem; gap: .5rem; align-items: center;
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: var(--bw) solid var(--rule);
  color: inherit; font: inherit; font-weight: 700; padding: .85rem .1rem; cursor: pointer;
}
.acc-trigger.acc-plain:hover { background: rgba(27, 69, 53, .05); }
.acc-mark { text-align: right; color: var(--ink-38); font-family: var(--mono); }
.acc-mark::after { content: "＋"; }
.acc-trigger[aria-expanded="true"] .acc-mark { color: var(--red); }
.acc-trigger[aria-expanded="true"] .acc-mark::after { content: "－"; }
.acc-panel-in { padding: .2rem .1rem 1rem; font-size: .89rem; color: var(--ink-70); border-bottom: var(--bw) solid var(--rule); }
.acc-panel-in p { margin: 0 0 .5rem; }
.acc-panel-in p:last-child { margin-bottom: 0; }
.acc-panel-in ul { margin: 0; padding-left: 1.1rem; }

/* ── 폼 ─────────────────────────────────────────────────────────── */
.inquiry-form { max-width: 34rem; margin-top: var(--s4); }
.field { margin-bottom: var(--s4); }
.field > label {
  display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-52); margin-bottom: .4rem;
}
.control {
  width: 100%; font: inherit; color: var(--ink); background: transparent;
  border: var(--bw) solid var(--rule-2); padding: .85rem .9rem;
}
.control:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.err { display: none; margin: .35rem 0 0; color: var(--st-bad); font-size: .84rem; font-weight: 700; }
.err::before { content: "! "; font-family: var(--mono); }
.field.invalid .err, .agree.invalid .err { display: block; }
.field.invalid .control { border-color: var(--st-bad); box-shadow: inset 0 0 0 1px var(--st-bad); }
.agree { position: relative; margin: var(--s4) 0 var(--s5); }
.agree > label { display: flex; align-items: center; gap: .6rem; font-size: .89rem; cursor: pointer; min-height: 44px; }
.agree .box { width: 20px; height: 20px; border: var(--bw) solid var(--rule-2); flex: none; display: grid; place-items: center; }
.agree input:checked + label .box { background: var(--ink); border-color: var(--ink); }
.agree input:checked + label .box::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2px solid var(--ground); border-bottom: 2px solid var(--ground);
  rotate: -45deg; translate: 0 -2px;
}
.agree.invalid .box { border-color: var(--st-bad); }
.form-submit {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; background: var(--red); color: #fff; border: 0;
  font: inherit; font-weight: 800; font-size: 1rem; padding: 1rem; cursor: pointer;
  transition: background-color .16s ease;
}
.form-submit:hover { background: var(--red-d); }

/* ── 완료 결과 ──────────────────────────────────────────────────── */
.result { border: var(--bw2) solid var(--ink); padding: var(--s5); margin-top: var(--s5); }
.result:focus { outline: 2px solid var(--red); outline-offset: 3px; }
.result-t { margin: 0 0 var(--s3); font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.result-no { font-family: var(--mono); font-size: .78rem; color: var(--ink-52); letter-spacing: .06em; }

/* ── 푸터 ───────────────────────────────────────────────────────── */
.site-footer { background: var(--deep); color: var(--on-deep); }
.footer-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s7) clamp(1.25rem, 3vw, 2rem) var(--s6);
}
.footer-brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; margin: 0 0 var(--s4); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; margin-bottom: var(--s5); }
.footer-nav a { text-decoration: none; font-size: .9rem; font-weight: 600; }
.footer-nav a:hover { color: #fff; }
.footer-biz { font-style: normal; font-size: .82rem; line-height: 1.85; color: rgba(244, 235, 210, .8); }
.footer-biz a { text-decoration: none; }
.footer-note {
  font-size: .78rem; line-height: 1.75; color: rgba(244, 235, 210, .62);
  border-top: var(--bw) solid rgba(244, 235, 210, .2); margin-top: var(--s5); padding-top: var(--s4);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; margin: var(--s4) 0 0; font-size: .82rem; }
.footer-legal a { text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { font-family: var(--mono); font-size: .72rem; color: rgba(244, 235, 210, .55); margin: var(--s4) 0 0; }

/* ── 토스트 모양 ────────────────────────────────────────────────── */
.toast {
  background: var(--ink); color: var(--ground);
  padding: .8rem 1.15rem; font-size: .88rem; font-weight: 600;
  max-width: min(92vw, 30rem); text-align: center;
}

/* ── 모바일 터치 영역(이 벌의 조작기) ───────────────────────────── */
@media (max-width: 767px) {
  .chip, .pick-btn, .act-btn, .form-submit, .acc-trigger, .state-go, .rc-line, .empty .chip {
    min-height: 44px;
  }
  .chip, .pick-btn { min-width: 44px; }
}