/* ============================================================
   spoonhouse.com · site.css — 공통 컴포넌트
   tokens.css 다음에 로드한다.
   ============================================================ */

/* ── Layout ──────────────────────────────────────────── */
.wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
/* 여백은 섹션 padding 에서만 주고, 누적은 첫 자식 margin-top 0 으로 막는다.
   (누적의 원인은 padding 이 아니라 첫 자식의 margin 이다) */
.section { padding-block: var(--section-y) 0; }
.section-sm { padding-block: var(--section-y-sm) 0; }
/* 마지막 섹션과 구분선(border-bottom)이 있는 섹션만 하단 여백을 소유한다 */
main > section:last-of-type { padding-bottom: var(--section-y-sm); }
.ruled > .wrap { padding-bottom: var(--section-y-sm); }

/* 첫 자식은 상단 마진, 마지막 자식은 하단 마진을 갖지 않는다 (중간 래퍼 포함) */
section > :first-child,
.wrap > :first-child,
.doc > :first-child,
.sec-head:first-child,
.doc h2:first-child,
.doc h3:first-child { margin-top: 0; }
section > :last-child,
.wrap > :last-child,
.doc > :last-child { margin-bottom: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 16px;
}
.skip:focus { left: 0; }

/* ── 항공우편 스트라이프 — 3곳에만 ───────────────────── */
/* ① 페이지 최상단 4px  ② 조회 카드 좌측 8px  ③ 섹션 구분자 24px */
.stripe-top { height: 4px; background: var(--airmail); animation: stripe-in var(--dur-stripe) var(--ease) 1; }
.stripe-div { height: 24px; background: var(--airmail); animation: stripe-in var(--dur-stripe) var(--ease) 1; }
.stripe-edge { width: 8px; flex: 0 0 8px; background: var(--airmail); animation: stripe-in var(--dur-stripe) var(--ease) 1; }
@keyframes stripe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ── Nav ─────────────────────────────────────────────── */
.nav { border-bottom: 1px solid var(--rule); background: var(--paper); }
.nav-in {
  max-width: var(--container); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: baseline; justify-content: space-between;
}
.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4375rem; line-height: 1.3;
  letter-spacing: -0.015em; color: var(--ink); text-decoration: none;
}
.brand span { font-family: var(--font-data); font-weight: 500; font-size: var(--fs-small); color: var(--ink-55); margin-left: 10px; letter-spacing: 0; vertical-align: 1px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nav-links a {
  font-size: var(--fs-small); color: var(--ink-70); text-decoration: none;
  padding: 6px 0; display: inline-block;
}
.nav-links a:hover { color: var(--air-blue); text-decoration: underline; text-underline-offset: 3px; }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ── Type ────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-data); font-size: var(--fs-label); line-height: 1;
  letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 600;
  color: var(--air-blue);
}
.eyebrow em { font-style: normal; color: var(--ink-55); }

.h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.lede { font-size: var(--fs-lede); line-height: 1.7; color: var(--ink-70); max-width: 760px; }
.prose { color: var(--ink-70); max-width: 760px; }
.doc p, .doc ul li { max-width: 760px; }
.prose + .prose { margin-top: 14px; }
.small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-70); max-width: none; }
.meta { font-family: var(--font-data); font-size: var(--fs-small); line-height: 1.7; color: var(--ink-55); }
.meta i { font-style: normal; color: var(--rule); padding-inline: 4px; }
.data { font-family: var(--font-data); font-weight: 500; font-variant-numeric: tabular-nums; }

.sec-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.sec-num { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--tr-label); color: var(--air-blue); }

/* ── 필드 박스 — 숫자가 주인공인 곳에만 ──────────────── */
.fields {
  display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.field { background: var(--field); padding: 16px; }
.field-label {
  font-family: var(--font-data); font-size: var(--fs-label); line-height: 1;
  letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 600; color: var(--air-blue);
}
.field-label em { font-style: normal; color: var(--ink-55); }
.field-val {
  font-family: var(--font-data); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: var(--fs-data-lg); line-height: 1.1; margin-top: 12px;
}
.field-val small { font-size: 0.875rem; font-weight: 400; color: var(--ink-70); }
.field-val.xl { font-size: var(--fs-data-xl); font-weight: 600; }
.field-note { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-70); margin-top: 10px; }
.field.applied { outline: 2px solid var(--air-blue); outline-offset: -2px; }
.field.applied .field-label { color: var(--air-blue); }
.field.muted .field-val { color: var(--ink-55); }
.field.empty .field-val { color: var(--ink-40); }
.tag-applied {
  display: inline-block; margin-top: 10px; padding: 3px 6px;
  font-family: var(--font-data); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--air-blue); color: var(--paper);
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-btn);
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--field); color: var(--ink); }
.btn-primary { background: var(--air-red); border-color: var(--air-red); color: var(--paper); }
.btn-primary:hover { background: #A80D26; border-color: #A80D26; color: var(--paper); }
.btn-primary:active { background: #8E0B20; }
.btn-outline { background: transparent; border-color: var(--air-blue); color: var(--air-blue); }
.btn-outline:hover { background: var(--blue-06); color: var(--air-blue); }
.btn-outline:active { background: var(--blue-12); }
.btn-kakao { background: var(--kakao); border-color: var(--kakao); color: var(--kakao-ink); }
.btn-kakao:hover { background: #F2DA00; border-color: #F2DA00; color: var(--kakao-ink); }
.btn-sm { min-height: 44px; padding: 0 16px; font-family: var(--font-data); font-weight: 500; font-size: var(--fs-small); }
.btn[disabled] { background: var(--field); border-color: var(--rule); color: var(--ink-40); cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row.tight { gap: 8px; }

/* ── Inputs ──────────────────────────────────────────── */
.input {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  font-family: var(--font-data); font-weight: 500; font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em; font-size: 1.0625rem;
}
.input.is-ok { border-color: var(--air-blue); }
.input.is-err { border-color: var(--air-red); }
.err {
  display: none; gap: 8px; margin-top: 10px;
  font-size: var(--fs-small); color: var(--air-red);
}
.err.show { display: flex; }
.err b { font-family: var(--font-data); font-weight: 600; }

/* ── 카드 · 강조 블록 ────────────────────────────────── */
.card { border: 1px solid var(--rule); background: var(--paper); padding: 20px 22px; }
.card-solid { border: 1px solid var(--ink); background: var(--field); padding: 20px 22px; }
.card-edge { display: flex; border: 1px solid var(--ink); background: var(--paper); }
.card-edge > .body { flex: 1 1 auto; min-width: 0; padding: clamp(20px, 3vw, 28px); }
.empty-box { border: 1px dashed var(--rule); background: var(--field); padding: 20px; }

/* ── Grid helpers ────────────────────────────────────── */
.cols { display: grid; gap: var(--grid-gap); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.split { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1040px) { .split { grid-template-columns: 1.05fr 0.95fr; } }

/* ── 번호 매긴 단계 (산문형) ─────────────────────────── */
.steps { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.steps li {
  display: grid; gap: 6px 20px; padding: 20px 0; border-bottom: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .steps li { grid-template-columns: 40px minmax(120px, 180px) minmax(0, 1fr); align-items: baseline; } }
.steps .d { max-width: 760px; }
.steps .n { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-small); color: var(--air-blue); font-variant-numeric: tabular-nums; }
.steps .t { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.steps .d { color: var(--ink-70); }

/* ── Table ───────────────────────────────────────────── */
.table-wrap { border: 1px solid var(--rule); overflow-x: auto; }
.table { width: 100%; min-width: 480px; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table thead tr { background: var(--field); }
.table thead th {
  text-align: left; font-family: var(--font-data); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 600; color: var(--air-blue);
}
.table thead th em { font-style: normal; color: var(--ink-55); }
.table tbody th { text-align: left; font-family: var(--font-data); font-weight: 500; font-size: 1rem; }
.table td { font-family: var(--font-data); }
.table .num { text-align: right; font-weight: 600; font-size: 1rem; }
.table .calc { text-align: right; font-size: var(--fs-small); color: var(--ink-55); }

/* ── 상태 배지 ───────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: 7px 11px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--field); color: var(--ink);
  font-family: var(--font-data); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.badge-line { border-color: var(--air-blue); background: var(--paper); color: var(--air-blue); }
.badge-now { border: 2px solid var(--air-blue); background: var(--paper); color: var(--air-blue); padding: 6px 10px; }
.badge-done { border-color: var(--cleared); background: var(--cleared); color: var(--paper); }
.badge-fill { border-color: var(--air-blue); background: var(--air-blue); color: var(--paper); }

/* ── 사진 (원본 미비 시에도 깨지지 않게) ─────────────── */
.photo { border: 1px solid var(--rule); background: var(--field); }
.photo img { width: 100%; }
.photo figcaption {
  border-top: 1px solid var(--rule); padding: 10px 14px;
  font-family: var(--font-data); font-size: var(--fs-small); color: var(--ink-55);
}

/* ── 표면 (Surfaces) — 흰 바닥이 이어지지 않게 ────────── */
/* 원장지 괘선: 히어로처럼 넓은 면에만 */
.ruled {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    0deg,
    rgba(16, 20, 24, 0.045) 0 1px,
    transparent 1px 28px
  );
  border-bottom: 1px solid var(--rule);
}
/* 밴드: 콘텐츠 폭 톤 패널 */
.band {
  background: var(--field);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.band .card, .band .photo { background: var(--paper); }
.band .field { background: var(--paper); }
/* 선 카드: 흰 바닥 + 잉크 헤어라인 (톤 대신 선으로 대비) */
.card-line { background: var(--paper); border: 1px solid var(--ink); }
/* 열 상단 괘선: 명세서처럼 각 항목을 선으로 끊는다 */
.cols-ruled > * { border-top: 1px solid var(--ink); padding-top: 16px; }
/* 섹션 사이 헤어라인 */
.line-top { border-top: 1px solid var(--rule); }

/* 잉크 패널: 페이지당 1회, 대비를 만드는 자리 */
.panel-ink { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.panel-ink .eyebrow { color: #9FC2F0; }
.panel-ink .eyebrow em { color: rgba(250, 250, 247, 0.55); }
.panel-ink .h2, .panel-ink .h3 { color: var(--paper); }
.panel-ink .prose, .panel-ink .small, .panel-ink p { color: rgba(250, 250, 247, 0.72); }
.panel-ink .btn { background: transparent; border-color: rgba(250, 250, 247, 0.4); color: var(--paper); }
.panel-ink .btn:hover { background: rgba(250, 250, 247, 0.1); color: var(--paper); }
.panel-ink .btn-kakao { background: var(--kakao); border-color: var(--kakao); color: var(--kakao-ink); }
.panel-ink .btn-kakao:hover { background: #F2DA00; border-color: #F2DA00; color: var(--kakao-ink); }
.panel-ink a { color: var(--paper); }
.panel-ink a:hover { color: #9FC2F0; }

/* 문서 폭(760px) 안의 필드 그리드는 2단까지만 */
.doc .fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.doc .cols-2, .doc .cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* ── 문서 본문 (가이드) ──────────────────────────────── */
.doc { max-width: 760px; }
.doc > * + * { margin-top: 18px; }
.doc h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.625rem);
  line-height: 1.3; letter-spacing: -0.01em;
  margin-top: 48px; padding-bottom: 8px; border-bottom: 1px solid var(--ink);
}
.doc h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; margin-top: 32px; }
.doc p { color: var(--ink-70); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { display: grid; gap: 10px; }
.doc ul li { color: var(--ink-70); padding-left: 18px; position: relative; }
.doc ul li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 1px; background: var(--air-blue);
}
.doc .fields, .doc .table-wrap, .doc .card-solid, .doc .card { margin-top: 24px; }
.doc code {
  font-family: var(--font-data); font-size: 0.9375rem; font-weight: 500;
  background: var(--field); padding: 2px 6px; color: var(--ink);
}
.toc { border: 1px solid var(--rule); background: var(--field); padding: 18px 20px; }
.toc ol { display: grid; gap: 8px; counter-reset: toc; }
.toc li { counter-increment: toc; font-size: var(--fs-small); }
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-data); font-weight: 600; color: var(--air-blue);
  margin-right: 10px; font-size: var(--fs-label); letter-spacing: 0.08em;
}
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  font-family: var(--font-data); font-size: var(--fs-small); color: var(--ink-55);
  border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 40px;
}
.guide-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.guide-list li { border-bottom: 1px solid var(--rule); }
.guide-list a {
  display: grid; gap: 6px 24px; padding: 22px 4px; text-decoration: none; color: inherit;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .guide-list a { grid-template-columns: 40px 1fr 1fr; align-items: baseline; } }
.guide-list a:hover { background: var(--field); }
.guide-list .n { font-family: var(--font-data); font-weight: 600; font-size: var(--fs-small); color: var(--air-blue); }
.guide-list .t { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.guide-list a:hover .t { color: var(--air-blue); }
.guide-list .d { font-size: var(--fs-small); color: var(--ink-70); line-height: 1.55; }

/* ── 최근 조회 행 ────────────────────────────────────── */
.recent-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  border: 1px solid var(--rule); background: var(--field); padding: 10px 12px;
}
.recent-row + .recent-row { margin-top: 8px; }
.recent-num { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; }
.recent-num .data { font-size: 1.0625rem; letter-spacing: 0.04em; }
.recent-when { font-family: var(--font-data); font-size: var(--fs-small); color: var(--ink-55); }

/* ── Footer ──────────────────────────────────────────── */
.foot { border-top: 1px solid var(--rule); margin-top: 0; }
.foot-in { max-width: var(--container); margin: 0 auto; padding: 32px var(--gutter) 56px; }
.foot-cols { display: grid; gap: 24px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.foot h4 {
  font-family: var(--font-data); font-size: var(--fs-label); line-height: 1;
  letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 600;
  color: var(--air-blue); margin-bottom: 12px;
}
.foot p, .foot li { font-family: var(--font-data); font-size: var(--fs-small); line-height: 1.7; color: var(--ink-70); }
.foot a { color: var(--ink-70); text-decoration: none; }
.foot a:hover { color: var(--air-blue); text-decoration: underline; }
.foot .legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }

/* 데스크톱 전용 줄바꿈 (모바일은 자연 줄바꿈) */
.br-desk { display: none; }
@media (min-width: 700px) { .br-desk { display: inline; } }