/* Hallmark · shape: fee schedule (designed from the page's own content) · genre: editorial · theme: brand · redesign: full · job: hire, the 카톡 상담 in the hero and beside the 기장라이트 price
 * paper: #FBFAFD · accent: #6F5A7E · display: Pretendard Variable · body: Pretendard Variable · hero: Counter · nav: kept (edge-aligned, shared with index.html) · footer: kept (colophon block, shared) · signature: the fee schedule, 월 110,000원 and 220,000원 set at display scale on hairlines in the hero
 * axes: light/grotesk-sans/chromatic-plum · posture: committed (the lavender field carries the hero) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: P, a fee page argues little on its own; the prices lead the first screen as the offer instead of sitting in two small cards */
/* Hallmark · finish-review: subagent · 6 findings · 5 resolved (79 hero height, 3 inline checks, 40 step numerals, lite rules aligned, lite button filled soft) · 1 note (copy kept verbatim) */
/* Hallmark · dismissed 23 · the plum on 월 110,000원, 220,000원, 88,000원 and the step numerals 1 to 3 marks the fee schedule and its order, the offer this page sells; every head stays ink */
@import url("./tokens.css");
@import url("./base.css");

/* 12단 격자: 머리글과 같은 폭 */
.bk-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap-columns)}
footer .wrap{max-width:var(--container);padding-inline:var(--gutter)}

/* 히어로: 요금표가 화면의 주인공 */
.bk-hero{background:var(--color-paper-3);min-height:min(100svh,860px);display:grid;align-content:center;padding-block:var(--space-3xl) var(--space-xl)}
.bk-hero .copy{grid-column:1 / span 6;align-self:center}
.bk-back{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--text-sm);color:var(--color-accent);margin-bottom:var(--space-lg);border-radius:var(--space-2xs)}
.bk-back:hover{color:var(--color-accent-hover);text-decoration:underline}
.bk-back svg{width:16px;height:16px;flex-shrink:0}
.bk-hero h1{font-size:min(var(--text-display),4.5rem);line-height:1.12;max-width:none;margin-bottom:var(--space-lg)}
.bk-hero h1{--lavender:var(--color-sheet)}
.bk-hero .lead{color:var(--color-ink-2);max-width:40ch}
.nw{white-space:nowrap}
.bk-hero .actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl)}
.bk-hero .btn-secondary{background:transparent;box-shadow:inset 0 0 0 1px var(--color-accent)}
.bk-hero .btn-secondary:hover{background:var(--color-sheet)}

.fees{grid-column:8 / span 5;align-self:center}
.fees dl{margin:0;border-top:2px solid var(--color-ink)}
.fees dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--space-md);padding-block:var(--space-lg);border-bottom:1px solid var(--color-rule-strong)}
.fees dt{grid-column:1 / -1;font-size:var(--text-md);font-weight:700;color:var(--color-ink)}
.fees dd{margin:0;display:contents}
.fees .price{font-size:clamp(2.5rem,4.6vw,4.5rem);font-weight:700;letter-spacing:-0.035em;line-height:1.05;color:var(--color-accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.fees .price small{font-variant-numeric:tabular-nums;font-size:.4em;font-weight:700;letter-spacing:0;color:var(--color-ink)}
.fees .vat{font-size:var(--text-sm);color:var(--color-ink-2);padding-bottom:var(--space-xs)}
.fees .fine{margin-top:var(--space-md);font-size:var(--text-sm);color:var(--color-ink-2);max-width:44ch}

/* 이런 분: 머리는 붙잡아 두고 목록이 지나간다 */
.bk-pains{padding-block:var(--section-gap) var(--section-gap-s)}
.bk-pains .bk-head{grid-column:1 / span 5;align-self:start;position:sticky;top:var(--space-4xl)}
.bk-pains .bk-head .lead{margin-top:var(--space-md);color:var(--color-muted)}
.bk-pains ul{grid-column:7 / span 6;list-style:none;margin:0;padding:0;border-top:2px solid var(--color-ink)}
.bk-pains li{padding-block:var(--space-lg);border-bottom:1px solid var(--color-rule);font-size:var(--text-lg);line-height:1.5}

/* 들어가는 일: 상담 사진 옆 네 줄 */
.bk-incl{padding-block:var(--section-gap-s) var(--section-gap)}
.bk-incl .ph{grid-column:1 / span 5;aspect-ratio:4/5;border-radius:var(--radius-card);overflow:hidden;background:var(--color-paper-2);align-self:center}
.bk-incl .ph img{width:100%;height:100%;object-fit:cover;object-position:40% center}
.bk-incl .body{grid-column:7 / span 6;align-self:center}
.bk-incl .rows{margin:var(--space-xl) 0 0;border-top:1px solid var(--color-rule-strong)}
.bk-incl .rows>div{padding-block:var(--space-lg);border-bottom:1px solid var(--color-rule)}
.bk-incl h3{font-size:var(--text-title);font-weight:700;line-height:1.3}
.bk-incl .rows p{margin-top:var(--space-xs);color:var(--color-muted);max-width:52ch}

/* 맡긴 뒤의 1년: 짙은 띠 */
.bk-year{background:var(--color-ink);color:var(--color-on-ink);padding-block:var(--section-gap-s)}
.bk-year h2{color:var(--color-on-ink);grid-column:1 / span 7}
.bk-year ul{grid-column:1 / -1;list-style:none;margin:var(--space-2xl) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap-columns);row-gap:var(--space-xl)}
.bk-year li{display:flex;gap:var(--space-sm);align-items:flex-start;border-top:1px solid var(--color-rule-ink);padding-top:var(--space-lg);font-size:var(--text-title);font-weight:700;line-height:1.4;color:var(--color-on-ink)}
.bk-year li svg{width:24px;height:24px;flex-shrink:0;margin-top:var(--space-2xs);color:var(--color-on-ink-accent)}

/* 옮겨 오는 방법 */
.bk-start{padding-block:var(--section-gap-l) var(--section-gap)}
.bk-start h2{grid-column:1 / span 5;align-self:start}
.bk-start ol{grid-column:7 / span 6;list-style:none;margin:0;padding:0;counter-reset:st}
.bk-start li{counter-increment:st;display:grid;grid-template-columns:var(--space-3xl) minmax(0,1fr);column-gap:var(--space-md);padding-block:var(--space-lg);border-top:1px solid var(--color-rule)}
.bk-start li:last-child{border-bottom:1px solid var(--color-rule)}
.bk-start li::before{content:counter(st);grid-row:1 / span 2;font-size:var(--text-section);font-weight:700;line-height:1;color:var(--color-accent);font-variant-numeric:tabular-nums}
.bk-start li b{font-size:var(--text-title);font-weight:700;line-height:1.35}
.bk-start li span{margin-top:var(--space-xs);color:var(--color-muted)}

/* 기장라이트: 요금표의 마지막 줄 */
.bk-lite{background:var(--color-paper-2);padding-block:var(--section-gap-s)}
.bk-lite h2{grid-column:1 / -1;margin-bottom:var(--space-2xl)}
.bk-lite .copy{grid-column:1 / span 6;border-top:2px solid var(--color-ink);padding-top:var(--space-lg)}
.bk-lite .copy p{margin-top:var(--space-sm);color:var(--color-ink-2);max-width:52ch}
.bk-lite ul{margin:var(--space-md) 0 0;padding-left:var(--space-lg);color:var(--color-ink-2)}
.bk-lite .offer{grid-column:8 / span 5;align-self:start;border-top:2px solid var(--color-ink);padding-top:var(--space-lg)}
.bk-lite .price{display:block;font-size:var(--text-display-s);font-weight:700;letter-spacing:-0.035em;line-height:1.05;color:var(--color-accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-lite .price small{font-variant-numeric:tabular-nums;font-size:.4em;letter-spacing:0;color:var(--color-ink)}
.bk-lite .vat{display:block;margin-top:var(--space-xs);font-size:var(--text-sm);color:var(--color-ink-2)}
.bk-lite .btn{margin-top:var(--space-lg)}

@media (max-width:60rem){
  .bk-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--space-xl)}
  .bk-grid>*{grid-column:1 / -1 !important}
  .bk-lite h2{margin-bottom:0}
  .bk-hero{min-height:0;padding-block:var(--space-3xl) var(--space-2xl)}
  .bk-pains .bk-head{position:static}
  .bk-incl .ph{aspect-ratio:4/3;max-width:560px}
  .bk-year ul{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
}
@media (max-width:40rem){
  .bk-hero h1{font-size:2.125rem}
  .bk-hero .actions .btn{flex:1 1 auto}
  .fees .price{font-size:2.5rem}
  .bk-pains li{font-size:var(--text-md);padding-block:var(--space-md)}
  .bk-year ul{grid-template-columns:minmax(0,1fr);row-gap:var(--space-lg)}
  .bk-year li{font-size:var(--text-lg)}
  .bk-start li{grid-template-columns:var(--space-2xl) minmax(0,1fr)}
  .bk-start li::before{font-size:var(--text-3xl)}
}