/* Hallmark · shape: 봉투 카드 → 도장 예시 → 소개 → 네 가지 약속 → 진행 순서와 예시 종이 → 정리 방식 → 가격과 할인 → 무료 서비스 → 질문 → 상담(남색 띠) · genre: editorial · theme: custom · job: 카카오톡 상담 · signature: 봉투 장면, 예시 한 칸을 채운 도장, 장부·정산서·리포트 예시 종이 · posture: 남색 바탕은 상담 띠 한 곳 · v6.5.0 · 2026-11-05 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 · weakest: R, 도장 예시 칸과 예시 종이 세 장이 더해져 꾸밈이 하나 많을 수 있음 · 종이 기울기는 1도 안팎, 그림자는 기존 종이 두께 하나만 씀 */
/* Hallmark · waive 37 · Gowun Batang and Cormorant Garamond appear only inside the logo lockup (header wordmark, the card's tagline under the lead, the footer) · running text uses two families only */
/* Hallmark · waive 6b · the hero is the card itself, centred on purpose · a stationery card that rises out of the envelope is the page's object and sits on one axis like a letter on a desk; inside the card everything is left-aligned */
/* Hallmark · waive 78 · section heads are 22 to 30px, one step under the card title of 26 to 36px · the stationery card from the envelope carries the largest words of this wedding letter, so section heads were lowered on the owner's request */
/* Hallmark · waive 84 · the ledger, settlement slip and report summary are sample papers drawn in code with masked names and a sample mark · real customer captures would put guest data on a public wedding page, so the drawn samples carry the signature instead, on the owner's request */
/* Hallmark · answered F4 · the contact band is the one navy surface on the page, so its primary keeps the same shape and only swaps fill and ink to stay readable */
/* 괘선은 장부 기준: 머리줄은 남색(40%), 줄 사이는 옅은 괘선 */
@import url("./tokens.css?v=1105g");
@import url("./base.css?v=1105g");
/* ---------- 바탕 ---------- */
:root { color-scheme: light; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-md)); touch-action: manipulation; -webkit-tap-highlight-color: var(--color-tap); }
html.menu-open { overflow: hidden; }   /* 휴대폰 메뉴가 열려 있는 동안 뒤 페이지는 멈춤 */
body { word-break: keep-all; }
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
h1, h2, h3, summary, .hero-title { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); text-wrap: balance; }   /* 봉투 장면 카드 제목(p)도 본 화면과 같은 명조 */
h2 { font-size: var(--text-section); line-height: 1.32; }
h3 { font-size: var(--text-title); line-height: 1.42; }
p, li, dd, td { text-wrap: pretty; }
.lead { font-size: var(--text-md); line-height: 1.75; color: var(--color-ink); }
.quiet { color: var(--color-ink-2); }
.small { font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-2); }
.skip { position: absolute; left: var(--space-md); top: -200px; z-index: 100; padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--color-navy); color: var(--color-on-navy); }
.skip:focus-visible { top: var(--space-md); }
/* ---------- 단추와 고리 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius); background: var(--color-navy); color: var(--color-on-navy); font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-strong); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translate3d(0, 1px, 0) scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"], .link:disabled { background: var(--color-rule); color: var(--color-ink-2); cursor: not-allowed; transform: none; }
.link:disabled { background: none; text-decoration-color: var(--color-rule); }
.btn-sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-ink); font-size: var(--text-md); text-decoration: underline; text-decoration-color: var(--color-ink-2); text-underline-offset: 0.32em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
.link:active { color: var(--color-ink-2); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 3px; border-radius: 4px; }
/* ---------- 머리 ---------- */
.mast { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); background: var(--color-field); }
.js .mast.is-top { background: none; }   /* 맨 위에서는 첫 화면 바탕이 머리 뒤까지 이어지게 (띠가 생기지 않게) */
html.menu-open .mast.is-top { background: var(--color-field); }
.js .mast.is-top .menu-btn { background: var(--color-field); }   /* 밝은 첫 화면 위에서도 메뉴 단추 칸이 보이게 */
.mast .wrap { display: flex; align-items: center; gap: var(--space-xl); height: 100%; }
.logo { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; color: var(--color-ink); text-decoration: none; }
.logo-mark { display: inline-block; flex: none; width: 40px; height: 40px; background: currentColor; -webkit-mask: url("../img/logo-mark.png") center / contain no-repeat; mask: url("../img/logo-mark.png") center / contain no-repeat; }
.logo-ko { font-family: var(--font-logo-ko); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.12em; line-height: 1; }
.logo-script { font-family: var(--font-logo-script); font-style: italic; font-weight: 500; font-size: 1.0625rem; line-height: 1.2; color: var(--color-ink-2); white-space: nowrap; }
.nav { display: flex; gap: var(--space-xl); margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; text-underline-offset: 0.4em; }
.nav a:active { color: var(--color-ink-2); }
.menu-btn { display: none; min-height: 44px; min-width: 56px; margin-left: auto; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.menu-btn:active { transform: translate3d(0, 1px, 0) scale(0.97); }
/* 휴대폰 메뉴: 머리 아래 화면 전체를 덮는 한 장 (뒤의 카드 테두리가 비치지 않게) */
.menu { position: fixed; inset: var(--header-h) 0 0 0; display: flex; flex-direction: column; padding: var(--space-xs) var(--gutter) calc(var(--space-2xl) + env(safe-area-inset-bottom)); background: var(--color-field); overflow-y: auto; overscroll-behavior: contain; }
.menu a:not(.btn) { display: flex; align-items: center; min-height: 60px; border-bottom: var(--rule) solid var(--color-rule); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-title); text-decoration: none; }
.menu a:not(.btn):first-child { border-top: var(--rule) solid var(--color-ledger); }
.menu .menu-cta { align-self: flex-start; margin-top: var(--space-xl); }
/* ---------- 첫 화면 ---------- */
/* 위아래 여백을 머리 높이로 같게 두어 카드 중심이 화면 정중앙(봉투 장면 카드와 같은 자리)에 옴 */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: var(--header-h) var(--gutter); background: var(--wash); }   /* taste-skill-ignore: 위 흰 면에서 아래 바탕으로 아주 완만하게 (대표님 승인) */
.card { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: var(--card-w); height: var(--card-h); padding: calc(var(--card-inset) + var(--space-xl)); background: var(--color-paper-hi); border-radius: 2px; box-shadow: var(--shadow-paper); }   /* taste-skill-ignore: 종이 두께, 남색 기운 두 겹 (대표님 승인) */
.card::before { content: ""; position: absolute; inset: var(--card-inset); border: 1px solid var(--color-navy); opacity: 0.6; pointer-events: none; }   /* taste-skill-ignore: 카드의 남색 테두리 (대표님 지시) */
.card-replay { display: inline-flex; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }   /* 봉투 다시 보기는 카드 로고를 누를 때만 (js/site.js) */
.card-replay:active { transform: scale(0.94); }
.card-paper { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: var(--paper-grain); }   /* 종이 결 */
.card-head { position: relative; display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); }
.card-head .logo-mark { width: calc(var(--card-w) * 0.11); height: calc(var(--card-w) * 0.11); color: var(--color-navy); background: var(--foil); }   /* taste-skill-ignore: 카드 로고의 남색 박 (대표님 승인) */
.card-head .logo-mark.is-shine { background: var(--foil-shine) 100% 0 / 300% 100% no-repeat, var(--foil); animation: oj-shine var(--dur-shine) cubic-bezier(0.4, 0, 0.2, 1) both; }   /* taste-skill-ignore: 빛이 한 번 비스듬히 스침 */
.card-head .logo-ko { font-size: clamp(1.125rem, 0.5vw + 0.95rem, 1.375rem); }
.hero-en { font-size: clamp(0.9375rem, 0.35vw + 0.8rem, 1.125rem); }   /* 로고 영문 한 줄 (Solely for your wedding day) */
.card-body { position: relative; display: grid; align-content: center; justify-items: start; gap: var(--space-md); padding-bottom: var(--space-lg); container-type: inline-size; }
/* 제목: 가장 긴 줄(--title-em)이 카드 폭에 들어가는 크기. 구역 제목보다 한 단 크게 */
.hero-title { font-size: var(--text-display); font-size: min(var(--text-display), calc(100cqi / var(--title-em, 15.5))); line-height: 1.32; }
.hero-lead { font-size: var(--text-md); line-height: 1.7; }
.card-body .btn { margin-top: var(--space-sm); }
.card-foot { position: relative; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }   /* 청첩장 끝줄처럼 카드 맨 아래 한 줄 */
/* ---------- 구역 공통: 바탕을 장(章)마다 바꾸고, 여백은 보통·넓게·좁게 세 가지 ---------- */
main > section { position: relative; }
.sec { padding-block: var(--band-pad); }
.sec.seal { padding-block: var(--band-pad-sm) var(--band-pad); background: var(--color-field); }
.sec.about { isolation: isolate; background: var(--color-paper-hi); }
.sec.about::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--paper-grain); opacity: 0.5; pointer-events: none; }
.sec.why { padding-top: var(--band-pad-sm); background: var(--color-tone); }
.sec.process { background: var(--color-field); }
.sec.type { background: var(--color-paper); }
.sec.price { padding-top: var(--band-pad-lg); background: var(--color-tone); }
.sec.free { background: var(--color-field); }
.sec.faq { padding-top: var(--band-pad-sm); background: var(--color-paper); }
.sec-head { row-gap: var(--space-lg); align-items: end; }
.sec-head h2 { grid-column: 1 / span 6; }
/* 접기: '자세히' 한 줄. 더하기·빼기는 선 두 개로 그림 */
.more { margin-top: var(--space-md); }
.more summary { position: relative; display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding-right: 28px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-strong); letter-spacing: 0; color: var(--color-ink-2); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: color var(--dur-short) var(--ease-out); }
.more summary::-webkit-details-marker { display: none; }
details:not([open]) > :not(summary) { display: none; }   /* 닫힌 접기 안 글은 자리도 차지하지 않게 */
.more summary::before, .more summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 1.5px; background: currentColor; transition: transform var(--dur-short) var(--ease-out); }
.more summary::after { transform: rotate(90deg); }
.more[open]:not(.is-closing) summary::after { transform: rotate(0deg); }
.more summary:active { color: var(--color-ink); }
.more-body { padding: var(--space-xs) 0 var(--space-sm); }
.more p { font-size: var(--text-md); line-height: 1.75; color: var(--color-ink); }
.more p + p { margin-top: var(--space-xs); }
.kv { display: grid; margin-top: var(--space-2xs); border-top: var(--rule) solid var(--color-rule); font-size: var(--text-sm); line-height: 1.6; }   /* 접기 안 '항목: 값' 짝 */
.kv > div { display: grid; grid-template-columns: var(--kv-dt, 7.5rem) minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-xs); border-bottom: var(--rule) solid var(--color-rule); transition: border-color 600ms var(--ease-out); }
.kv dt { color: var(--color-ink-2); transition: color 600ms var(--ease-out); }
.kv dd { color: var(--color-ink); transition: color 600ms var(--ease-out); }
.kv > div.is-lit { border-bottom-color: var(--color-navy); transition-duration: var(--dur-short); }   /* 할인 이름을 누르면 그 조건 줄이 잠깐 남색으로 */
.kv > div.is-lit dt, .kv > div.is-lit dd { color: var(--color-navy); transition-duration: var(--dur-short); }
.kv-wide { --kv-dt: 11.5rem; }
.more .small { font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-2); }
.more .kv + .small { margin-top: var(--space-sm); }
/* 접기가 부드럽게 늘고 줄기 (js가 .fold로 감쌈): 높이 대신 격자 줄 0fr ↔ 1fr, 닫힘은 조금 더 빠르게 */
.fold { display: grid; grid-template-rows: 1fr; }
.fold-in { min-height: 0; }
details.is-shut > .fold { grid-template-rows: 0fr; }
details.is-anim > .fold { transition: grid-template-rows var(--dur-fold) var(--ease-out); }
details.is-anim.is-closing > .fold { transition-duration: var(--dur-shut); }
details.is-anim > .fold > .fold-in { overflow: hidden; }
.fold-in > * { transition: opacity var(--dur-fold) var(--ease-out), transform var(--dur-fold) var(--ease-out); }
details.is-shut > .fold > .fold-in > * { opacity: 0; transform: translate3d(0, -6px, 0); }
details.is-closing > .fold > .fold-in > * { transition-duration: var(--dur-short); }
/* ---------- 도장 (첫 화면 다음): 봉투에 찍힌 그 도장, 예시 한 칸을 채움 ---------- */
.stamp-paper { position: relative; isolation: isolate; padding: var(--space-3xl) var(--space-4xl) var(--space-2xl); background: var(--color-paper-hi); border-radius: 2px; box-shadow: var(--shadow-paper); }   /* taste-skill-ignore: 봉투 종이 한 장, 첫 화면 카드와 같은 종이 두께 (대표님 승인) */
.stamp-paper::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--paper-grain); opacity: 0.5; pointer-events: none; }
.stamp-paper .stamp { width: 100%; height: auto; aspect-ratio: 2000 / 648; color: var(--color-navy); opacity: 0.94; transform-origin: 50% 55%; }
.stamp-fill text { font-family: var(--font-body); font-size: 112px; font-weight: var(--weight-strong); fill: var(--color-ink); }   /* 도장 칸에 적은 예시 (도장 그림 2000×648 기준 크기) */
.stamp-fill ellipse { fill: none; stroke: var(--color-ink); stroke-width: 7; }
.ex-mark { position: absolute; top: var(--space-md); right: var(--space-md); z-index: 4; padding: 0 var(--space-xs); border-radius: 4px; background: var(--color-tint); color: var(--color-navy); font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.9; }   /* '예시' 표시: 옅은 남색 바탕의 작은 이름표 */
.stamp-copy { margin-top: var(--space-2xl); row-gap: var(--space-md); align-items: start; }
.stamp-copy h2 { grid-column: 1 / span 5; }
.stamp-copy p { grid-column: 6 / span 7; padding-top: 0.35em; line-height: 1.8; }
/* 남색 박: 멈춘 광택은 늘, 스치는 빛은 들어올 때와 누를 때 한 번 (index.html 의 oj-foil, oj-shine) */
.foil-deep { stop-color: var(--color-foil-deep); }
.foil-mid { stop-color: var(--color-navy); }
.foil-lift { stop-color: var(--color-foil-lift); }
.shine-off { stop-color: var(--color-foil-shine); stop-opacity: 0; }
.shine-on { stop-color: var(--color-foil-shine); stop-opacity: 0.85; }
.stamp-press { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }   /* 누르면 다시 꾹 (js가 도장을 단추로 감쌈) */
.stamp-press .stamp { transition: translate 320ms var(--ease-out); }
/* ---------- 오로지 소개: 노트북은 제목과 하는 일 한 줄이 왼쪽, 대표님 글이 오른쪽 ---------- */
.about .grid { row-gap: var(--space-lg); align-items: start; }
.about h2 { grid-column: 1 / span 6; grid-row: 1; }
.about-do { grid-column: 1 / span 5; grid-row: 2; padding-top: var(--space-lg); border-top: var(--rule) solid var(--color-ledger); font-weight: var(--weight-strong); line-height: 1.75; }
.about-body { grid-column: 7 / span 6; grid-row: 1 / span 2; display: grid; gap: var(--space-md); padding-top: 0.45em; }
.about-body > p { line-height: 2; }   /* 대표님 글 */
/* ---------- 믿음 근거 네 가지: 장부 칸처럼 한 장 ---------- */
.why-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-2xl); background: var(--color-paper-hi); border: 2px solid var(--color-navy); border-radius: 2px; box-shadow: var(--shadow-paper); }   /* taste-skill-ignore: 도장처럼 굵은 남색 테두리 한 장 (장부 기준) */
.why-list li { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) var(--space-xl); border-left: var(--rule) solid var(--color-ledger); }
.why-list li:first-child { border-left: 0; }
.why-list b { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 1.4; text-wrap: balance; }
.why-list span { color: var(--color-ink-2); line-height: 1.75; }
/* ---------- 진행 순서: 여덟 단계 ---------- */
.steps { --dot: 11px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-2xl); margin-top: var(--space-2xl); }
.step { position: relative; padding: calc(var(--dot) + var(--space-lg)) var(--gap) 0 0; }
.step::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; box-sizing: border-box; width: var(--dot); height: var(--dot); border: 1.5px solid var(--color-navy); border-radius: 50%; background: var(--color-field); transition: background-color var(--dur-short) var(--ease-out) var(--td, 0ms), transform var(--dur-short) var(--ease-out) var(--td, 0ms); }
.step.is-key::before { background: var(--color-navy); }   /* 계약 완료: 여기서 날짜가 확정 */
.step::after { content: ""; position: absolute; top: calc(var(--dot) / 2 - 0.5px); left: calc(var(--dot) + 8px); right: 8px; height: 1px; background: var(--color-ledger); transform-origin: left center; transition: background-color 240ms var(--ease-out) calc(var(--td, 0ms) + 40ms); }   /* taste-skill-ignore: 단계 순서를 잇는 선 (장부 기준) */
.step:nth-child(4n)::after, .step:last-child::after { display: none; }
.step h3 { font-size: var(--text-title); line-height: 1.35; transition: color var(--dur-short) var(--ease-out); }
.step p { margin-top: var(--space-sm); line-height: 1.75; transition: color var(--dur-short) var(--ease-out); }
/* 단계 누르기 (js가 제목을 단추로 감쌈): 칸 전체가 누르는 곳, 첫 점부터 누른 단계까지 채워짐, 뒤 단계 글은 한 단 옅게 */
.step-pick, .t-pick, .row-pick, .deal-pick { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.step-pick, .t-pick { display: inline-flex; align-items: center; min-height: 44px; margin-block: calc((var(--lh) * 1em - 44px) / 2); }   /* 단추 자체도 44px, 위아래를 줄여 제목 자리는 그대로 */
.step-pick { --lh: 1.35; }
.t-pick { --lh: 1.3; }
.step-pick::after, .t-pick::after { content: ""; position: absolute; inset: 0; }
.js-steps .step { -webkit-tap-highlight-color: transparent; }
.js-steps .step:active::before { transform: scale(1.2); transition-delay: 0ms; }
.steps.is-traced .step:not(.is-on)::before { background: var(--color-field); }
.steps.is-traced .step.is-on::before { background: var(--color-navy); }
.steps.is-traced .step.is-line::after { background: var(--color-navy); }
.steps.is-traced .step.is-cur::before { transform: scale(1.36); }
.steps.is-traced .step.is-cur h3 { color: var(--color-navy); }
.steps.is-traced .step.is-after h3, .steps.is-traced .step.is-after p { color: var(--color-ink-2); }
/* 예시 종이 세 장 (장부, 정산서, 축의 리포트): 코드로 그린 종이, 사진·캡처 아님. 겹친 곳은 글 없는 여백만 */
.papers { margin-top: var(--space-3xl); }
.papers-stack { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding-top: var(--space-xl); }
.papers-stack > .ex-mark { top: 0; right: 0; }
.paper { position: relative; padding: var(--space-lg); background: var(--color-paper-hi); border-radius: 2px; box-shadow: var(--shadow-paper); color: var(--color-ink); font-size: var(--text-sm); line-height: 1.5; font-variant-numeric: tabular-nums lining-nums; }   /* taste-skill-ignore: 예시 종이의 두께, 첫 화면 카드와 같은 그림자 */
.paper-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-sm); }
.paper-head b { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); }
.paper-head span { font-size: var(--text-xs); color: var(--color-ink-2); }
.paper-ledger { grid-column: 1 / span 6; grid-row: 1; z-index: 1; margin-top: var(--space-xl); padding-right: var(--space-3xl); transform: rotate(-0.8deg); }
.paper-report { grid-column: 8 / span 5; grid-row: 1; z-index: 2; margin-top: var(--space-2xl); padding-left: calc(var(--space-3xl) + var(--space-sm)); transform: rotate(0.6deg); }
.paper-slip { grid-column: 6 / span 3; grid-row: 1; z-index: 3; transform: rotate(1.2deg); }
.lr { display: grid; grid-template-columns: 2.2em 3.8em 4.4em 2.4em 2.4em minmax(0, 1fr); column-gap: var(--space-xs); align-items: center; padding: var(--space-xs) var(--space-2xs); border-top: var(--rule) solid var(--color-rule); }
.lr-head { border-top: 0; color: var(--color-ink-2); font-size: var(--text-xs); }
.lr-head + .lr { border-top-color: var(--color-ledger); }
.lr.is-mark { background: var(--color-tint); color: var(--color-navy); font-weight: var(--weight-strong); }   /* 도장에 적은 12번이 장부의 이 한 줄 */
.slip-rows { display: grid; }
.slip-rows div { display: flex; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-xs); border-top: var(--rule) solid var(--color-rule); }
.slip-rows dt { color: var(--color-ink-2); }
.slip-rows .slip-total { border-top: var(--rule) solid var(--color-ink); font-weight: var(--weight-strong); }
.slip-rows .slip-total dd { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.2; }
.slip-sign { display: flex; align-items: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-xs); }
.slip-sign i { flex: 1; height: 1px; background: var(--color-ink-2); }   /* taste-skill-ignore: 정산서 서명 칸의 줄 (그려진 양식 안의 칸) */
.report-sum { display: flex; align-items: baseline; gap: var(--space-2xs); }
.report-sum span { color: var(--color-ink-2); }
.report-sum b { font-family: var(--font-display); font-size: var(--text-section); font-weight: var(--weight-display); line-height: 1.1; color: var(--color-navy); }
.report-split { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-xs); }
.report-bars { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.report-bars li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) 2em; align-items: center; column-gap: var(--space-sm); font-size: var(--text-xs); }
.report-bars i { position: relative; height: 8px; border-radius: 4px; background: var(--color-tint); overflow: hidden; }
.report-bars i::before { content: ""; position: absolute; inset: 0; background: var(--color-navy); transform-origin: left center; transform: scaleX(calc(var(--v) / 41)); }   /* 막대 길이 = 인원 (가장 많은 41명이 끝까지) */
.report-bars b { text-align: right; font-weight: var(--weight-strong); }
.papers-cap { margin-top: var(--space-xl); font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-2); }
/* ---------- 정리 방식 ---------- */
.type .grid { row-gap: var(--space-xl); align-items: start; }
.type-head { grid-column: 1 / span 6; display: grid; gap: var(--space-lg); }
.type-lead { max-width: 26em; }
.type-body { grid-column: 7 / span 6; }
.types { border-top: var(--rule) solid var(--color-ledger); }
.t { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: baseline; padding-block: var(--space-lg) var(--space-xl); border-bottom: var(--rule) solid var(--color-rule); }
.t h3 { font-size: var(--text-title); line-height: 1.3; transition: color var(--dur-short) var(--ease-out); }
.type-no { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); transition: color var(--dur-short) var(--ease-out); }   /* TYPE 이름표는 작게 */
/* 고르기 (js가 제목을 단추로 감쌈): 남색 동그라미가 차고, 그 줄 아래 남색 괘선이 왼쪽부터 새로 그어짐. 앞에 고른 줄의 괘선은 오른쪽으로 지워짐 */
.js-types .t { -webkit-tap-highlight-color: transparent; }
.js-types .t h3 { padding-right: 36px; }
.t::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--color-navy); transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-short) cubic-bezier(0.55, 0, 0.75, 0.2); pointer-events: none; }
.t.is-picked::before { transform: none; transform-origin: left center; transition: transform var(--dur-draw) var(--ease-out) 80ms; }
.t-mark { position: absolute; right: 0; top: calc(var(--space-lg) + var(--text-title) * 0.65 - 10px); width: 20px; height: 20px; border: 1.5px solid var(--color-navy); border-radius: 50%; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.t-mark::before { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--color-navy); opacity: 0; transform: scale(0.4); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.t.is-picked .t-mark::before { opacity: 1; transform: none; }
.t.is-picked h3, .t.is-picked .type-no { color: var(--color-navy); }
.t:active .t-mark { transform: scale(0.88); }
.t p { line-height: 1.75; }
.type .more { margin-top: var(--space-lg); }
/* ---------- 가격: 시작가를 페이지에서 가장 큰 숫자로, 표와 계산기는 깊은 면 위의 종이 두 장 ---------- */
.price-from { grid-column: 7 / span 6; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-xs); }
.pf-num { font-family: var(--font-display); font-size: var(--text-price); font-weight: var(--weight-display); letter-spacing: -0.03em; line-height: 0.9; font-variant-numeric: lining-nums tabular-nums; }
.pf-unit { font-family: var(--font-display); font-size: var(--text-section); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); }
.pf-note { grid-column: 1 / -1; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.price-body { margin-top: var(--space-2xl); row-gap: var(--space-xl); align-items: start; }
.price-table { grid-column: 1 / span 7; width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 2px; background: var(--color-paper-hi); box-shadow: var(--shadow-paper); font-variant-numeric: tabular-nums lining-nums; }   /* taste-skill-ignore: 가격표 한 장, 종이 두께 두 겹 (대표님 승인) */
.price-table th, .price-table td { height: 68px; padding: 0 var(--space-lg); border-top: var(--rule) solid var(--color-rule); text-align: left; vertical-align: middle; font-size: var(--text-md); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.price-table tbody tr:first-child > * { border-top-color: var(--color-ledger); }   /* 장부 머리줄 */
.price-table thead th { height: auto; padding-block: var(--space-sm); border-top: 0; font-size: var(--text-sm); font-weight: var(--weight-body); color: var(--color-ink-2); }
.price-table .r { text-align: right; }
.price-table th, .price-table td { white-space: nowrap; }
.price-table tbody th { font-weight: var(--weight-body); }
.price-table.js-rows tbody tr { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.price-table.js-rows tbody tr:active > * { background: var(--color-tint); }
.row-pick { display: inline-flex; align-items: center; min-height: 44px; }
.price-table .p { display: inline-block; font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-display); letter-spacing: -0.02em; margin-right: var(--space-2xs); font-variant-numeric: tabular-nums lining-nums; }
.price-table tr.on > * { background: var(--color-tint); }
.price-table td.on { color: var(--color-navy); }
.price-side { grid-column: 9 / span 4; display: grid; gap: var(--space-md); }
.price-side .lead { color: var(--color-ink); }
.price-key { font-size: var(--text-md); font-weight: var(--weight-strong); line-height: 1.75; color: var(--color-ink); }
.price-side .more { margin-top: 0; }
/* 계산기: 살아 있는 것 하나, 표와 같은 종이 한 장 */
.calc { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-lg); margin-top: var(--space-2xl); padding: var(--space-xl); background: var(--color-paper-hi); border-radius: 2px; box-shadow: var(--shadow-paper); }   /* taste-skill-ignore: 계산기 종이 한 장, 가격표와 같은 두께 */
.calc h3 { grid-column: 1 / span 4; }
.calc-in { grid-column: 5 / span 4; display: grid; gap: var(--space-lg); }
.calc-out { grid-column: 9 / span 4; display: grid; gap: var(--space-md); align-content: start; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); margin: 0; padding: var(--space-2xs); border: 0; border-radius: var(--radius); background: var(--color-field); }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.seg label { position: relative; display: flex; border-radius: 6px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { flex: 1; display: grid; place-items: center; min-height: 48px; padding: 0 var(--space-2xs); border-radius: 6px; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.seg input:checked + span { background: var(--color-navy); color: var(--color-on-navy); }
.seg label:active span { transform: scale(0.97); }
@supports selector(:has(*)) {
  .seg { position: relative; isolation: isolate; }
  .seg::before { content: ""; position: absolute; z-index: -1; top: var(--space-2xs); bottom: var(--space-2xs); left: var(--space-2xs); width: calc((100% - 4 * var(--space-2xs)) / 3); border-radius: 6px; background: var(--color-navy); transition: transform 280ms var(--ease-out); }
  .seg:has(input[value="both"]:checked)::before { transform: translateX(calc(100% + var(--space-2xs))); }
  .seg:has(input[value="small"]:checked)::before { transform: translateX(calc(200% + 2 * var(--space-2xs))); }
  .seg span { transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
  .seg input:checked + span { transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), background-color 0s linear 280ms; }   /* 남색 칸이 도착한 뒤에 같은 남색을 깔아 둠 (보이는 모양은 같음) */
}
.seg label:has(input:focus-visible) { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.guests { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-md); }
.guests label { font-size: var(--text-md); }
.count { display: inline-flex; align-items: baseline; gap: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-title); font-variant-numeric: tabular-nums; }
.count input { width: 4.2ch; min-height: 44px; padding: 0 var(--space-2xs); border: 0; border-bottom: 2px solid var(--color-ink); border-radius: 0; background: transparent; font: inherit; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.count input::-webkit-outer-spin-button, .count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.guests .slide { grid-column: 1 / -1; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--color-ink); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--color-ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: calc(-1 * var(--space-sm)); border: 4px solid var(--color-paper); border-radius: 50%; background: var(--color-navy); transition: transform var(--dur-micro) var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 4px solid var(--color-paper); border-radius: 50%; background: var(--color-navy); transition: transform var(--dur-micro) var(--ease-out); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.14); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.14); }
.amount { display: flex; align-items: baseline; gap: var(--space-xs); font-family: var(--font-display); line-height: 1; }
.amount .figure { display: inline-block; font-size: var(--text-display); font-weight: var(--weight-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.amount .unit { font-size: var(--text-title); }
.breakdown { display: grid; }
.breakdown div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-2xs); font-size: var(--text-sm); }
.breakdown dt { color: var(--color-ink-2); }
.breakdown dd { white-space: nowrap; }
.calc-note, .copied { font-size: var(--text-sm); color: var(--color-ink-2); }
.copied:empty, .calc-note:empty { display: none; }
.calc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
/* ---------- 할인 (가격 구역 안) ---------- */
.discount { margin-top: calc(var(--space-3xl) + var(--space-md)); grid-template-rows: auto 1fr; row-gap: var(--space-lg); align-items: start; }   /* 목록은 오른쪽, 가격 표와 엇갈리게 */
.discount h2 { grid-column: 1 / span 5; grid-row: 1; }
.deal-list { grid-column: 7 / -1; grid-row: 1 / span 2; border-bottom: var(--rule) solid var(--color-rule); font-variant-numeric: tabular-nums lining-nums; }
.deal-list li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding: 0; border-top: var(--rule) solid var(--color-rule); font-size: var(--text-md); }
.deal-list li:first-child { border-top-color: var(--color-ledger); }
.deal-pick { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 44px; transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.deal-pick::after { content: ""; position: absolute; inset: 0; }   /* 줄 전체가 누르는 곳 */
.deal-pick:active { transform: translate3d(0, 1px, 0); color: var(--color-navy); }
.deal-list .num { white-space: nowrap; }
.deal-list .p { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-display); letter-spacing: -0.02em; margin-right: 1px; }
.discount-side { grid-column: 1 / span 5; grid-row: 2; display: grid; gap: var(--space-sm); justify-items: start; }
.discount-side .more { margin-top: 0; }
.discount-side .small { color: var(--color-ink-2); }
/* ---------- 무료 서비스: 목록 하나 ---------- */
.free-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin-top: var(--space-xl); border-bottom: var(--rule) solid var(--color-rule); }
.free-list li { padding-block: var(--space-md); border-top: var(--rule) solid var(--color-rule); line-height: 1.55; }
.free-list li:nth-child(-n+2) { border-top-color: var(--color-ledger); }
/* ---------- 자주 묻는 질문 ---------- */
.faq-grid { align-items: start; }
.faq-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--space-xl)); display: grid; gap: var(--space-md); }
.faq-head .lead { color: var(--color-ink); }
.faq-head .lead a { color: var(--color-ink); }
.faq-list { grid-column: 6 / span 7; border-top: var(--rule) solid var(--color-ledger); }
.faq-list details { border-bottom: var(--rule) solid var(--color-rule); }
.faq-list summary { position: relative; display: flex; align-items: center; min-height: 68px; padding: var(--space-md) 48px var(--space-md) 0; font-size: var(--text-title); line-height: 1.45; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: color var(--dur-short) var(--ease-out); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 1.5px; background: currentColor; transition: transform var(--dur-short) var(--ease-out); }
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open]:not(.is-closing) summary::after { transform: rotate(0deg); }
.faq-list summary:active { color: var(--color-ink-2); }
.answer { display: grid; gap: var(--space-sm); padding: 0 var(--space-2xl) var(--space-xl) 0; max-width: 40em; }
.answer p { line-height: 1.8; }
.answer a { text-underline-offset: 0.3em; }
.answer .kv { --kv-dt: 8.5rem; margin-top: 0; font-size: var(--text-md); }
/* ---------- 상담: 남색 띠 한 곳 (남색 바탕, 흰 글씨). 네 가지를 장부 칸 넷으로 ---------- */
.sec.contact { padding-block: var(--band-pad-lg); background: var(--color-navy); color: var(--color-on-navy); }
.contact .grid { row-gap: var(--space-lg); align-items: end; }
.contact h2 { grid-column: 1 / span 5; color: var(--color-on-navy); }
.contact-lead { grid-column: 6 / span 7; }
.contact .lead { color: var(--color-on-navy); }
.contact-lead span, .u { display: inline-block; }   /* 뜻 단위 덩이: 좁으면 덩이 사이에서만 줄이 바뀜 */
.four { margin-top: var(--space-2xl); }
.four-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--color-on-navy-line); border-radius: 2px; }
.cell { display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md) var(--space-xs); border-left: var(--rule) solid var(--color-on-navy-line); cursor: text; transition: background-color var(--dur-short) var(--ease-out); }
.cell:first-child { border-left: 0; }
.cell-name { font-size: var(--text-sm); color: var(--color-on-navy-2); }
.cell input { width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--color-on-navy); font-size: var(--text-md); caret-color: var(--color-on-navy); }
.cell input::placeholder { color: var(--color-on-navy-2); opacity: 1; }
.cell:focus-within { background: var(--color-navy-hover); }
.four-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); }
.contact .btn { background: var(--color-on-navy); color: var(--color-navy); }
.contact .link { color: var(--color-on-navy); text-decoration-color: var(--color-on-navy-2); }
.contact .link:active { color: var(--color-on-navy-2); }
.contact a:focus-visible, .contact button:focus-visible, .contact input:focus-visible { outline-color: var(--color-on-navy); }
.contact .copied { margin-top: var(--space-sm); color: var(--color-on-navy-2); }
/* ---------- 바닥: 편지 끝맺음 한 줄, 사업자 정보 ---------- */
.foot { padding-block: var(--space-2xl); background: var(--color-field); }
.foot .grid { row-gap: var(--space-xl); align-items: start; }
.foot-letter { grid-column: 1 / -1; padding-bottom: var(--space-xl); border-bottom: var(--rule) solid var(--color-ledger); font-family: var(--font-display); font-size: var(--text-section); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 1.4; color: var(--color-ink); text-wrap: balance; }
.foot-brand { grid-column: 1 / span 4; display: flex; align-items: center; gap: var(--space-md); color: var(--color-ink); }
.foot-brand .logo-mark { width: 64px; height: 64px; }
.foot-brand .lock { display: grid; gap: var(--space-2xs); }
.foot-info { grid-column: 5 / span 5; display: grid; gap: var(--space-sm); }
.foot-info h2 { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-strong); letter-spacing: 0; }
.biz { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.biz div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-md); }
.biz dt { color: var(--color-ink-2); }
.biz a { color: var(--color-ink); }
.foot-links { grid-column: 10 / span 3; display: grid; align-content: start; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); text-decoration: none; }
.foot-copy { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-ink-2); }
/* 휴대폰 아래 상담 띠: 화면 폭 전체, 종이 바탕과 위 괘선. 글 위에 떠 있지 않음 */
.dock { display: none; }
/* ---------- 태블릿 ---------- */
@media (max-width: 64rem) {
  :root { --gutter: 40px; --gap: 24px; }
  .nav { gap: var(--space-lg); }
  .stamp-paper { padding: var(--space-2xl) var(--space-2xl) var(--space-xl); }
  .type-head, .type-body { grid-column: 1 / -1; }
  .sec-head h2, .price-from { grid-column: 1 / -1; }
  .price-table { grid-column: 1 / -1; }
  .price-side { grid-column: 1 / -1; }
  .discount { grid-template-rows: none; }
  .discount h2, .deal-list, .discount-side { grid-column: 1 / -1; grid-row: auto; }
  .deal-list { margin-top: var(--space-md); }
  .calc h3 { grid-column: 1 / -1; }
  .calc-in { grid-column: 1 / span 6; }
  .calc-out { grid-column: 7 / -1; }
  .faq-head { grid-column: 1 / -1; position: static; margin-bottom: var(--space-xl); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .faq-head h2 { grid-column: 1; }
  .faq-head .lead { grid-column: 2; }
  .faq-list { grid-column: 1 / -1; }
  .contact h2, .contact-lead { grid-column: 1 / -1; }
  .foot-brand { grid-column: 1 / -1; }   /* 태블릿: 로고 영문 한 줄이 사업자 정보에 겹치지 않게 */
  .foot-info { grid-column: 1 / span 8; }
  .foot-links { grid-column: 9 / -1; }
  /* 약속 네 칸: 두 칸씩 두 줄 */
  .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-list li:nth-child(odd) { border-left: 0; }
  .why-list li:nth-child(n+3) { border-top: var(--rule) solid var(--color-ledger); }
  /* 진행 순서: 태블릿은 두 칸씩 네 줄 (가로 선은 같은 줄의 다음 점까지) */
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2n)::after { display: none; }
  /* 예시 종이: 장부 위, 정산서와 리포트가 아래에서 조금씩 겹침 */
  .paper-ledger { grid-column: 1 / span 9; padding-right: var(--space-lg); padding-bottom: var(--space-2xl); }
  .paper-slip { grid-column: 7 / span 6; grid-row: 2; margin-top: calc(-1 * var(--space-lg)); }
  .paper-report { grid-column: 1 / span 7; grid-row: 2; margin-top: var(--space-2xl); padding-left: var(--space-lg); padding-right: var(--space-3xl); }
}
@media (max-width: 60rem) {
  :root { --header-h: 64px; --gutter: 32px; }
  .nav, .mast .wrap > .btn { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .logo-mark { width: 36px; height: 36px; }
  .logo-ko { font-size: 1.125rem; }
  .about h2, .about-do, .about-body { grid-column: 1 / -1; grid-row: auto; }
  .about-body { padding-top: 0; }
  .stamp-copy h2, .stamp-copy p { grid-column: 1 / -1; }
  .dock { display: block; position: fixed; inset: auto 0 0 0; z-index: 40; padding: var(--space-xs) max(var(--gutter), env(safe-area-inset-right)) calc(var(--space-xs) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); background: var(--color-paper); border-top: var(--rule) solid var(--color-rule); transition: transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
  .dock .btn { width: 100%; }
  .js .dock { transform: translateY(100%); visibility: hidden; }
  .js .dock.show { transform: none; visibility: visible; transition: transform var(--dur-short) var(--ease-out), visibility 0s; }
  html { scroll-padding-bottom: calc(var(--dock-h) + var(--space-md)); }   /* 아래 상담 띠가 초점을 가리지 않게 */
  .foot { padding-bottom: calc(var(--dock-h) + var(--space-xl) + env(safe-area-inset-bottom)); }   /* 맨 끝 글이 상담 띠에 가리지 않게 */
}
@media (max-width: 47.9375rem) {
  :root { --gutter: 24px; }
  .grid { display: block; }
  .about-do, .about-body { margin-top: var(--space-lg); }
  .type-lead { margin-top: var(--space-md); }
  .type-body { margin-top: var(--space-xl); }
  .t { display: block; }
  .t p { margin-top: var(--space-sm); }
  .price-from { margin-top: var(--space-lg); }
  .stamp-paper { margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2xl) var(--space-lg) var(--space-xl); }
  .stamp-copy { margin-top: var(--space-xl); }
  .stamp-copy p { margin-top: var(--space-sm); }
  .ex-mark { top: var(--space-sm); right: var(--space-sm); }
  .free-list { grid-template-columns: minmax(0, 1fr); }
  /* 약속 네 칸: 한 줄에 한 칸 */
  .why-list { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-xl); }
  .why-list li { padding: var(--space-lg) var(--space-lg) var(--space-lg); border-left: 0; }
  .why-list li + li { border-top: var(--rule) solid var(--color-ledger); }
  /* 진행 순서: 휴대폰은 세로 한 줄. 점은 단계 이름 첫 줄 가운데, 선은 다음 점까지 */
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .step { --dot-top: calc(var(--text-title) * 0.675 - var(--dot) / 2); padding: 0 0 var(--space-xl) calc(var(--dot) + var(--space-lg)); }
  .step:last-child { padding-bottom: 0; }
  .step::before { top: var(--dot-top); }
  .step::after, .step:nth-child(2n)::after, .step:nth-child(4n)::after { display: block; top: calc(var(--dot-top) + var(--dot) + 6px); bottom: calc(6px - var(--dot-top)); left: calc(var(--dot) / 2 - 0.5px); right: auto; width: 1px; height: auto; transform-origin: center top; }
  .step:last-child::after { display: none; }
  /* 예시 종이: 세로로 쌓고 아래 종이가 위 종이의 빈 여백만 덮음 */
  .papers { margin-top: var(--space-2xl); }
  .papers-stack { display: flex; flex-direction: column; padding-top: var(--space-xl); }
  .paper { padding: var(--space-md); }
  .paper-ledger { margin: 0 var(--space-xs) 0 0; padding: var(--space-md) var(--space-md) var(--space-2xl); }
  .paper-slip { z-index: 2; width: 80%; align-self: flex-end; margin-top: calc(-1 * var(--space-xl)); padding-bottom: var(--space-2xl); }
  .paper-report { z-index: 3; width: 90%; margin-top: calc(-1 * var(--space-xl)); padding: var(--space-md); }   /* 아래 종이가 위에: 위 종이의 빈 여백만 덮음 */
  .lr { grid-template-columns: 1.8em 3.4em 4em 1.8em 1.8em minmax(0, 1fr); column-gap: var(--space-2xs); font-size: var(--text-xs); }
  .free-list li { padding-block: var(--space-sm); }
  .free-list li:nth-child(2) { border-top-color: var(--color-rule); }
  .price-table th, .price-table td { padding: 0 var(--space-sm); height: 60px; }
  .price-side { margin-top: var(--space-lg); }
  .deal-list li { min-height: 56px; }
  .discount-side { margin-top: var(--space-lg); }
  .calc { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--space-2xl); padding: var(--space-lg) var(--space-md); }
  .calc h3, .calc-in, .calc-out { grid-column: 1 / -1; }
  .faq-head { margin-bottom: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
  .faq-head .lead { grid-column: 1; }
  .contact-lead { margin-top: var(--space-lg); }
  .four { margin-top: var(--space-xl); }
  .four-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell:nth-child(odd) { border-left: 0; }
  .cell:nth-child(n+3) { border-top: var(--rule) solid var(--color-on-navy-line); }
  .foot .grid > * + * { margin-top: var(--space-xl); }
}
@media (max-width: 40rem) {
  /* 휴대폰 첫 화면: 카드가 머리 아래 화면을 채움 (위아래 여백은 머리 높이로 같게, 화면 정중앙은 그대로). 낮은 화면에서는 5:7 카드보다 작아지지 않음 */
  :root { --gutter: 16px; --card-inset: 12px; --card-h: max(calc(var(--card-w) * 1.4), calc(100svh - 2 * var(--header-h) - 2 * var(--space-xs))); }
  .type-title { font-size: min(var(--text-section), calc((100vw - 2 * var(--gutter)) / 14.2)); }   /* 둘째 줄이 휴대폰 폭에 들어가게 */
  .card { padding: calc(var(--card-inset) + var(--space-md)); }   /* 안쪽 여백을 줄여 첫 화면 제목을 한 단 크게 */
  .card-head .logo-mark { width: calc(var(--card-w) * 0.13); height: calc(var(--card-w) * 0.13); }
  .faq-list summary { min-height: 68px; padding-right: var(--space-xl); font-size: var(--text-md); font-family: var(--font-display); }
  .answer { padding-right: var(--space-md); }
  .biz div { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .kv > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }   /* 휴대폰: 항목 위, 값 아래 */
  .kv-short > div { grid-template-columns: var(--kv-dt) minmax(0, 1fr); }   /* 값이 짧은 짝(출장비)은 한 줄 */
  .foot-brand .logo-mark { width: 52px; height: 52px; }
}
/* ---------- 마우스 올림: 마우스가 있는 기기에서만 (휴대폰은 누른 뒤 색이 남지 않게) ---------- */
@media (hover: hover) {
  .btn:not(:disabled):not([aria-disabled="true"]):hover { background: var(--color-navy-hover); }
  .link:not(:disabled):hover { color: var(--color-navy); text-decoration-color: var(--color-navy); }
  .nav a:hover { text-decoration: underline; text-decoration-color: var(--color-navy); color: var(--color-navy); }
  .menu-btn:hover { background: var(--color-tint); }
  .menu a:not(.btn):hover, .more summary:hover, .faq-list summary:hover, .deal-pick:hover { color: var(--color-navy); }
  .seg input:not(:checked) + span:hover { background: var(--color-tint); }
  .count input:hover { border-bottom-color: var(--color-navy); }
  .foot-links a:hover { color: var(--color-navy); text-decoration: underline; }
  .card-replay:hover { opacity: 0.8; }
  .stamp-press:hover .stamp { translate: 0 -3px; }
  .js-types .t:hover h3, .js-steps .step:hover h3 { color: var(--color-navy); }
  .js-types .t:not(.is-picked):hover .t-mark { background: var(--color-tint); }
  .js-steps .step:not(.is-cur):hover::before { transform: scale(1.2); transition-delay: 0ms; }
  .price-table.js-rows tbody tr:not(.on):hover > * { background: var(--color-paper); }
  .contact .btn:not(:disabled):not([aria-disabled="true"]):hover { background: var(--color-tint); }
  .contact .link:not(:disabled):hover { color: var(--color-on-navy); text-decoration-color: var(--color-on-navy); }
  .cell:hover { background: var(--color-navy-hover); }
}
/* ---------- 움직임: 들어올 때 한 번 (스크립트가 .js.motion 을 붙일 때만 숨김, 움직임 줄이기면 없음) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 구역 제목과 내용: 0.56초, 20px 올라오며 (차례 간격은 스크립트가 --d 로 줌) */
  .js.motion .rv { opacity: 0; transform: translate3d(0, var(--rv-y, 20px), 0); transition: opacity var(--rv-dur, var(--dur-reveal)) var(--ease-out) var(--d, 0ms), transform var(--rv-dur, var(--dur-reveal)) var(--ease-out) var(--d, 0ms); }
  .js.motion .rv.in { opacity: 1; transform: none; }
  /* 목록 줄(정리 방식, 할인, 무료 서비스, 질문, 약속 칸): 조금 짧고 조금 덜 움직임 */
  .js.motion .t.rv, .js.motion .deal-list li.rv, .js.motion .free-list li.rv, .js.motion .faq-list details.rv, .js.motion .why-list li.rv { --rv-y: 12px; --rv-dur: var(--dur-row); }
  /* 예시 종이는 기울기를 지킨 채 떠오름 */
  .js.motion .paper.rv { transform: translate3d(0, 20px, 0) rotate(var(--tilt, 0deg)); }
  .js.motion .paper.rv.in { transform: rotate(var(--tilt, 0deg)); }
  .paper-ledger { --tilt: -0.8deg; }
  .paper-report { --tilt: 0.6deg; }
  .paper-slip { --tilt: 1.2deg; }
  /* 리포트 막대: 종이가 놓인 뒤 왼쪽부터 차오름 */
  .js.motion .paper-report .report-bars i::before { transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-out) calc(var(--d, 0ms) + 360ms); }
  .js.motion .paper-report.in .report-bars i::before { transform: scaleX(calc(var(--v) / 41)); }
  /* 진행 순서: 단계가 놓인 뒤 다음 점까지 선이 따라 그려짐 */
  .js.motion .step::after { transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-out) calc(var(--d, 0ms) + 220ms), background-color 240ms var(--ease-out) calc(var(--td, 0ms) + 40ms); }
  .js.motion .step.in::after { transform: none; }
  /* 도장: 종이가 놓이고 한 번 꾹 찍힌 뒤, 예시 칸의 글이 배어 나옴 */
  .js.motion .stamp-paper .stamp { opacity: 0; }
  .js.motion .stamp-paper.in .stamp { animation: oj-press 420ms cubic-bezier(0.2, 0.9, 0.3, 1) calc(var(--d, 0ms) + 240ms) both; }
  .js.motion .stamp-paper .stamp-fill { opacity: 0; }
  .js.motion .stamp-paper.in .stamp-fill { animation: oj-fill 480ms var(--ease-out) calc(var(--d, 0ms) + 760ms) both; }
  /* 휴대폰 메뉴: 열 때 항목이 위에서부터 차례로 살짝 떠오름 (0.04초 간격), 닫을 때는 빠르게 */
  .menu { transition: opacity 200ms var(--ease-out); }
  .menu > * { transition: opacity 300ms var(--ease-out), transform 360ms var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger-menu)); }
  .menu:not(.is-open) { opacity: 0; transition-duration: 140ms; }
  .menu:not(.is-open) > * { opacity: 0; transform: translate3d(0, 14px, 0); transition-duration: 120ms; transition-delay: 0ms; }
  /* 복사 안내: 아래에서 살짝 올라오며 */
  .copied:not(:empty) { animation: oj-note 280ms var(--ease-out) both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 47.9375rem) {
  .js.motion .step::after { transform: scaleY(0); }   /* 세로 선은 위에서 아래로 */
}
@keyframes oj-note { from { opacity: 0; transform: translate3d(0, 4px, 0); } }
@keyframes oj-fill { from { opacity: 0; } to { opacity: 1; } }
@keyframes oj-shine { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
@keyframes oj-press {
  0%   { opacity: 0; transform: scale(1.07); }
  55%  { opacity: 0.94; transform: scale(0.985); }
  100% { opacity: 0.94; transform: none; }
}
@media print {
  .js.motion .rv { opacity: 1 !important; transform: none !important; }
  .js.motion .stamp-paper .stamp { opacity: 0.94 !important; animation: none !important; }
  .js.motion .stamp-paper .stamp-fill { opacity: 1 !important; animation: none !important; }
  .dock { display: none !important; }
}
/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .link, .more summary, .more summary::after, .faq-list summary, .faq-list summary::after, .seg span, .seg::before, .price-table th, .price-table td, .dock, .cell, .card-replay { transition: none; }
  .step::before, .step::after, .step h3, .step p, .t::before, .t.is-picked::before, .t-mark, .t-mark::before, .t h3, .type-no, .kv > div, .kv dt, .kv dd, .deal-pick, .stamp-press .stamp { transition: none; }   /* 누른 결과(색, 채움)는 바로 보임 */
}