/* 현대이지웰 제휴 제안서 — 방향 A (정격형, 웹 = PDF 한 소스)
   토큰: speakable-blog speakable-tokens-v2 값만 사용. 오렌지는 화면당 3곳 이하. */

@font-face{font-family:"SP Pretendard";src:url("fonts/sp-pretendard.woff2") format("woff2-variations"),url("fonts/sp-pretendard.woff2") format("woff2");font-weight:45 930;font-style:normal;font-display:swap}
@font-face{font-family:"SP Outfit";src:url("fonts/sp-outfit.woff2") format("woff2-variations"),url("fonts/sp-outfit.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026,U+2212}
@font-face{font-family:"SP Pretendard Print";src:url("fonts/sp-pretendard-print-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"SP Pretendard Print";src:url("fonts/sp-pretendard-print-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:"SP Pretendard Print";src:url("fonts/sp-pretendard-print-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:"SP Pretendard Print";src:url("fonts/sp-pretendard-print-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:"SP Pretendard Print";src:url("fonts/sp-pretendard-print-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:"SP Outfit Print";src:url("fonts/sp-outfit-print-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026,U+2212}
@font-face{font-family:"SP Outfit Print";src:url("fonts/sp-outfit-print-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026,U+2212}

:root{
  color-scheme:light;
  --surface:#FFFFFF; --raised:#FFFFFF; --sub:#F5F5F5; --navy:#0D1831;
  --text:#18181B; --text2:#6B7280; --on-sub:#52525B; --on-dark:#FFFFFF; --on-dark2:#D5DAE4;
  --line:rgba(15,23,42,.08); --line-strong:rgba(15,23,42,.14);
  --action:#FF5F06; --action-grad:linear-gradient(135deg,#FF5F06,#FF8B43); --action-press:#E85400;
  --ok:#167A40; --ok-bg:#EEFBF3; --err:#DC2626; --warn:#F59E0B;
  --r-sheet:16px; --r-box:12px; --r-pill:999px;
  --font-body:"SP Pretendard","Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-num:"SP Outfit","SP Pretendard","Pretendard Variable",sans-serif;
  --fs-title:32px; --fs-h2:24px; --fs-h3:17px; --fs-body:15px; --fs-cap:13px; --fs-meta:11px; --fs-fig:40px;
  --ease:cubic-bezier(.22,.61,.36,1); --fast:150ms;
  --pad:48px;
}
@media (max-width:719px){:root{--fs-title:26px;--fs-h2:21px;--fs-fig:32px;--pad:20px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--surface);color:var(--text);font:500 var(--fs-body)/1.5 var(--font-body);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;box-shadow:0 0 0 3px rgba(255,95,6,.28)}
.n{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.skip{position:absolute;left:16px;top:-48px;padding:8px 16px;background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-pill);z-index:10}
.skip:focus{top:12px}

/* 확인 필요 표시 — 초안 표지. 경고색 없이 점선 */
mark.tbd{display:inline-block;background:transparent;color:var(--on-sub);border:1px dashed rgba(15,23,42,.32);border-radius:var(--r-pill);padding:0 8px;font-size:12px;font-weight:600;line-height:20px;white-space:nowrap;vertical-align:1px}

/* ── 틀 ───────────────────────────── */
.shell{display:grid;grid-template-columns:220px minmax(0,960px);gap:48px;justify-content:center;padding:32px 32px 64px}
.toc{position:sticky;top:32px;align-self:start;padding-top:8px}
.toc-logo{display:inline-block}
.toc-logo img{width:132px;height:auto}
.toc-doc{margin-top:24px;font-size:13px;font-weight:600}
.toc-no{margin-top:4px;font-size:12px;color:var(--text2)}
.toc-list{margin-top:24px;border-top:1px solid var(--line-strong);padding-top:12px}
.toc-list a,.toc-group{display:flex;gap:8px;align-items:baseline;padding:8px 12px;margin-left:-12px;border-left:3px solid transparent;font-size:14px;color:var(--text2);text-decoration:none;line-height:1.4}
.toc-group{color:var(--text2);border-left:0;padding-left:15px;flex-wrap:wrap}
.toc-group ol{flex-basis:100%;margin-top:4px}
.toc-group ol a{padding-left:24px;margin-left:-15px}
.toc-list a:hover{color:var(--text)}
.toc-list a[aria-current="true"]{color:var(--text);font-weight:600;border-left-color:var(--text)}
.toc-num{display:inline-block;min-width:16px;font-weight:600}
.toc .btn-ghost{margin-top:24px}

.mbar{display:none}

.doc{display:flex;flex-direction:column;gap:0;min-width:0;outline:none}
.sheet{background:var(--raised);border:0;border-top:1px solid var(--line-strong);border-radius:0;padding:64px 0;min-width:0;scroll-margin-top:24px}
.sheet.cover{border-top:3px solid var(--text)}
.rh{display:none}
/* 회사 소개서: 목차 없는 한 장 */
.doc.solo{max-width:960px;margin:0 auto;padding:32px 32px 64px}
.cover-co .cover-body{padding-bottom:48px}
.co-info{max-width:640px}
@media (max-width:719px){.doc.solo{padding:16px 16px 48px}}

/* ── 표지 ─────────────────────────── */
.cover{padding:0;overflow:hidden}
.cover-body{padding:40px 0 40px}
.cover-logo{width:165px;height:auto}
.cover-to{margin-top:48px;font-size:17px;font-weight:600}
.cover h1{margin-top:12px;font-size:var(--fs-title);font-weight:800;line-height:1.3;letter-spacing:-.03em}
.cover-sub{margin-top:8px;color:var(--text2)}
.cover-rule{display:block;width:120px;height:4px;margin-top:32px;background:var(--action)}
.cover-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;margin-top:32px;border-top:1px solid var(--line-strong)}
.cover-meta>div{padding:12px 16px 0 0}
.cover-meta dt{font-size:12px;color:var(--text2);font-weight:600}
.cover-meta dd{margin-top:4px;font-size:15px;font-weight:600}
.cover-ref{margin-top:24px;font-size:13px;color:var(--text2)}
.cover-band{background:var(--text);color:var(--on-dark);padding:28px 32px 24px}
.band-stats{display:flex;align-items:flex-end;gap:48px;flex-wrap:wrap}
.band-fig{font-size:15px;font-weight:600}
.band-fig .n{font-size:var(--fs-fig);font-weight:700;line-height:1.2;margin-right:2px}
.band-lab{font-size:13px;color:var(--on-dark2)}
.band-note{margin-left:auto;font-size:12px;color:var(--on-dark2);padding-bottom:4px}
.band-biz{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:12px;color:var(--on-dark2)}

/* ── 절 머리 ─────────────────────── */
.sec-head{padding-bottom:12px;border-bottom:2px solid var(--text);margin-bottom:24px}
.sec-meta{font-size:var(--fs-meta);font-weight:600;color:var(--text2);margin-bottom:4px}
.sec-head h2{font-size:var(--fs-h2);font-weight:800;line-height:1.35;letter-spacing:-.03em}
.sec-head .h2-cont{font-size:20px;font-weight:600}
.lead{max-width:720px;font-size:16px;line-height:1.55}
.h3{margin:40px 0 12px;font-size:var(--fs-h3);font-weight:600;line-height:1.4}
.cap{margin:32px 0 8px;font-size:var(--fs-cap);font-weight:600}
.h3+.cap{margin-top:4px}
.sec-head+.h3{margin-top:0}
.cap-unit{font-weight:500;color:var(--text2)}
.note{margin-top:8px;font-size:var(--fs-cap);color:var(--text2);line-height:1.5}
.note mark.tbd{vertical-align:0}
.figcap{margin-top:12px;font-size:var(--fs-cap);color:var(--text2)}
sup{font-family:var(--font-num);font-size:10px;line-height:0}
.fn{margin-top:24px;padding-top:8px;border-top:1px solid var(--line)}

/* ── 키-값 ───────────────────────── */
.kv{margin-top:28px;border-top:1px solid var(--line-strong)}
.kv>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.kv dt{font-size:13px;color:var(--text2);font-weight:600;padding-top:1px}
.kv dd{font-weight:600}
.kv-tail{display:block;font-size:13px;font-weight:500;color:var(--text2)}
.kv-tight{margin-top:12px}
.kv-tight>div{grid-template-columns:104px minmax(0,1fr);padding:8px 0}

/* ── 공문 표 ─────────────────────── */
.tbl{width:100%;border-collapse:collapse;border-top:2px solid var(--text);border-bottom:1px solid var(--line-strong);font-size:15px}
.tbl thead th{background:var(--sub);color:var(--on-sub);font-size:13px;font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-strong);vertical-align:bottom;line-height:1.35}
.tbl tbody th,.tbl tbody td{padding:12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-weight:500}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody th{font-weight:600}
.tbl .r{text-align:right;white-space:nowrap}
.tbl td.r .n{font-weight:600}
.cell-sub{display:block;font-size:13px;font-weight:500;color:var(--text2);margin-top:2px}
.rowno{display:inline-block;width:20px;font-family:var(--font-num);font-weight:600;color:var(--text2)}
.t-summary th[scope="row"] .cell-sub{padding-left:20px}
.t-summary th[scope="row"]{width:26%}
.t-summary td:nth-child(4){width:16%}
.pct{display:block;font-family:var(--font-num);font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums}
.t-price th[scope="row"]{width:22%}
.t-price td:last-child{width:22%}
.t-kv th{width:36%;color:var(--text2);font-size:13px;font-weight:600}
.t-cases th[scope="row"]{width:19%}
.t-compare th[scope="row"]{width:22%;color:var(--on-sub)}
.t-edu th[scope="row"]{width:52%}
.t-terms th[scope="row"]{width:14%}

/* ── 박스·목록 ───────────────────── */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.box{border:1px solid var(--line-strong);border-radius:var(--r-box);padding:20px}
.box-title{font-size:15px;font-weight:600;margin-bottom:8px}
.box>p{font-size:14px}
.dash li{position:relative;padding-left:16px;font-size:14px;line-height:1.5}
.dash li+li{margin-top:8px}
.dash li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:1px;background:var(--text)}
.ask{margin-top:32px;padding:16px 20px;background:var(--sub);border-radius:var(--r-box);color:var(--text)}
.ask-lab{display:inline-block;margin-right:12px;font-size:13px;font-weight:600;color:var(--on-sub)}

/* ── Ⅱ ───────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px}
.figs{border-top:2px solid var(--text)}
.figs li{padding:12px 0;border-bottom:1px solid var(--line)}
.fig{display:flex;align-items:baseline;gap:4px}
.fig .n{font-size:32px;font-weight:700;line-height:1.2}
.fig .unit{font-size:15px;font-weight:600}
.fig-lab{font-size:13px;color:var(--text2)}
.fig-def{display:block}
.clients{font-size:15px;line-height:1.7}
.timeline{border-top:1px solid var(--line-strong)}
.timeline li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.tl-year{font-weight:600}

/* ── Ⅲ-1 ─────────────────────────── */
.defs{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.defs>div{padding-top:12px;border-top:1px solid var(--line-strong)}
.defs dt{font-size:13px;font-weight:600}
.defs dd{margin-top:4px;font-size:13px;color:var(--text2)}
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:32px;padding:20px 24px;border:1px solid var(--line-strong);border-radius:var(--r-box)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--r-pill);background:var(--action-grad);color:var(--text);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;border:0;transition:background var(--fast) var(--ease)}
.btn-primary:hover{text-decoration:none;background:var(--action)}
.btn-primary:active{background:var(--action-press)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--raised);border:1px solid var(--line-strong);color:var(--text);font:600 14px/1 var(--font-body);cursor:pointer}
.btn-ghost:hover{border-color:var(--text)}
.btn-sm{min-height:36px;font-size:13px}

/* ── Ⅲ-2 ─────────────────────────── */
.pricepair{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 40px;margin-top:28px;padding:16px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.pp-lab{display:block;font-size:13px;color:var(--text2);font-weight:600}
.pp-val{font-size:15px;font-weight:600}
.pp-val .n{font-size:28px;font-weight:700;margin-right:2px}
.pp-muted .n{font-weight:600;color:var(--text2)}
.pp-muted{color:var(--text2)}
.pp-note{margin-left:auto;font-size:13px;color:var(--text2)}
.state2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px;border:1px solid var(--line-strong);border-radius:var(--r-box);overflow:hidden}
.state2-cell{padding:16px 20px}
.state2-cell+.state2-cell{border-left:1px solid var(--line-strong);background:var(--sub)}
.state2-lab{font-weight:600;margin-bottom:4px}
.state2-cell p:not(.state2-lab){font-size:15px}

.fig-demo{margin-top:32px;border:1px solid var(--line-strong);border-radius:var(--r-box);padding:20px}
.fig-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.fig-title{font-size:var(--fs-cap);font-weight:600}
.chip-demo{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--raised);border:1px solid var(--line-strong);color:var(--text2);font-size:12px;font-weight:600;white-space:nowrap}
.flows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.flow{border-radius:var(--r-box);background:var(--surface);border:1px solid var(--line);padding:16px}
.flow-title{font-size:15px;font-weight:600;margin-bottom:12px}
.steps{position:relative}
.step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:8px 0;position:relative}
.step:not(:last-child)::after{content:"";position:absolute;left:13px;top:40px;bottom:-4px;width:1px;background:var(--line-strong)}
.step-no{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--raised);font-size:13px;font-weight:600;color:var(--text2);transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.step-t{font-weight:600;line-height:28px}
.step-d{font-size:14px;color:var(--text2)}
.chip{display:inline-flex;align-items:center;min-height:24px;margin-top:6px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;border:1px solid var(--line-strong);background:var(--raised);color:var(--on-sub)}
.chip-plan{border-style:dashed}
.chip-user{background:var(--sub);border-color:transparent}
.step.is-done .step-no{background:var(--text);color:var(--on-dark);border-color:var(--text)}
.step.is-current .step-no{border:2px solid var(--text);color:var(--text)}
.step.is-current .step-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.flow-ctl{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.flow-status{font-size:13px;color:var(--text2)}

/* ── Ⅲ-3 가: 공급 조건 띠 ──────── */
.offer{display:grid;grid-template-columns:auto 40px auto minmax(0,1fr);align-items:center;gap:0 20px;margin-top:28px;padding:20px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.offer-lab{font-size:13px;color:var(--text2);font-weight:600}
.offer-from{font-size:15px;font-weight:600;color:var(--text2)}
.offer-from .n{font-size:28px;font-weight:600}
.offer-to .n{font-size:var(--fs-fig);font-weight:700;line-height:1.2}
.offer-arrow{height:1px;background:var(--text);position:relative}
.offer-arrow::after{content:"";position:absolute;right:0;top:-4px;border:4px solid transparent;border-left:6px solid var(--text);border-right:0}
.offer-desc{padding-left:20px;border-left:1px solid var(--line)}
.offer-desc p{font-size:13px;color:var(--text2)}
.offer-desc p:first-child{font-size:15px;color:var(--text);font-weight:600}

/* ── Ⅲ-3 가: 요청 흐름 도해 (흰 바탕 선도, 오렌지는 최종 경로 하나) ── */
.flowmap{background:var(--raised);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--r-box);padding:24px}
.fm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.fm-scen{display:flex;flex-wrap:wrap;gap:8px}
.scen{min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--raised);color:var(--text2);font:600 14px/1 var(--font-body);cursor:pointer;transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.scen:hover{color:var(--text);border-color:var(--text)}
.scen[aria-pressed="true"]{border:2px solid var(--text);color:var(--text);padding:0 15px}

.map{width:100%;height:auto;font-family:var(--font-body)}
.map-v{display:none;max-width:420px;margin:0 auto}
.map .node rect{fill:#FFFFFF;stroke:rgba(24,24,27,.22);stroke-width:1;transition:fill var(--fast) var(--ease),stroke var(--fast) var(--ease)}
.map .node text{text-anchor:middle}
.map .nt{fill:var(--text);font-size:15px;font-weight:600;letter-spacing:-.02em}
.map .ns{fill:var(--text2);font-size:13px;font-weight:500}
.map .node{opacity:.4;transition:opacity var(--fast) var(--ease)}
.map .node.is-lit{opacity:1}
.map .node.is-lit>rect{fill:#FAFAFA;stroke:var(--text);stroke-width:1.5}
.map .node-final{opacity:.7}
.map .node-final>rect{stroke:var(--action);stroke-width:1.5}
.map .node-final.is-lit>rect{stroke:var(--action);stroke-width:2.5;fill:#FFF4EC}
.map .slot rect{fill:#FFFFFF;stroke:rgba(24,24,27,.16)}
.map .slot text{text-anchor:start}
.map .sl{fill:var(--text2);font-size:13px;font-weight:500}
.map .ss{fill:var(--text2);font-size:12px;font-weight:600;text-anchor:end!important}
.map .slot.is-lit rect{fill:var(--text);stroke:var(--text)}
.map .slot.is-lit .sl,.map .slot.is-lit .ss{fill:#FFFFFF}
.map .slot.is-out rect{stroke-dasharray:4 4;fill:transparent}
.map .slot.is-out .sl{fill:rgba(24,24,27,.4);text-decoration:line-through}
.map .edge{fill:none;stroke:rgba(24,24,27,.25);stroke-width:1.5;marker-end:url(#ah-d)}
.map-v .edge{marker-end:url(#av-d)}
.map .edge.is-lit{stroke:var(--text);stroke-width:2;marker-end:url(#ah-l)}
.map-v .edge.is-lit{marker-end:url(#av-l)}
.map .edge.final{stroke:var(--action);stroke-width:2;opacity:.55;marker-end:url(#ah-f)}
.map-v .edge.final{marker-end:url(#av-f)}
.map .edge.final.is-lit{opacity:1;stroke-width:3}
.map .edge.dashed{stroke-dasharray:6 5}
.map .mk-dim{fill:rgba(24,24,27,.35)}
.map .mk-lit{fill:var(--text)}
.map .mk-fin{fill:var(--action)}
.map .fm-aux{fill:var(--text2);font-size:12px;font-weight:500}
.map .fm-fin{fill:var(--text);font-weight:600}

.ledger{display:grid;grid-template-columns:120px repeat(4,minmax(0,1fr));margin-top:20px;border-top:1px solid var(--line-strong)}
.ledger>div{padding:12px 16px 4px 0}
.ledger>div+div{padding-left:16px;border-left:1px solid var(--line)}
.ledger dt{font-size:12px;color:var(--text2);font-weight:600}
.ledger dd{margin-top:4px;font-size:14px;font-weight:600;color:var(--text);line-height:1.45}
.ledger dd .n{font-weight:600}
.ledger dd .ld-sub{display:block;font-size:12px;font-weight:500;color:var(--text2)}
.fm-legend{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12px;color:var(--text2)}
.lg-fin{display:inline-block;width:24px;height:3px;background:var(--action);border-radius:var(--r-pill)}

/* ── Ⅰ 체험 운영안 단계 ── */
.pilot-steps{margin-top:12px;border-top:1px solid var(--line)}
.pilot-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.pilot-steps .n{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-pill);background:var(--text);color:#FFFFFF;font-size:12px;font-weight:600}
.ps-t{font-weight:600;font-size:14px;line-height:24px}
.pilot-steps li p:not(.ps-t){font-size:13.5px;color:var(--text2)}

/* ── Ⅱ 주요 납품처 로고 ── */
.clients-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-strong);border-left:1px solid var(--line)}
.client{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:18px 10px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.client img{max-height:38px;max-width:78%;width:auto;height:auto;object-fit:contain;filter:brightness(0);opacity:.82}
.client span{font-size:12.5px;color:var(--text2);line-height:1.35}

.edu-hint{margin:-4px 0 10px;font-size:12.5px;color:var(--text2)}

/* ── Ⅲ-3 요청 한 건 해설 (B에서 흡수) ── */
.h3-lead{max-width:720px;font-size:15px;line-height:1.6;margin-bottom:4px}
.walk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin-top:28px}
.walk li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.walk-no{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--text);border-radius:var(--r-pill);font-size:14px;font-weight:600}
.walk-t{font-weight:600;line-height:28px}
.walk li p:not(.walk-t){font-size:14px;color:var(--text2)}
.quote{margin-top:24px;border-left:3px solid var(--text);padding:4px 0 4px 18px;max-width:720px;font-size:17px;font-weight:600;line-height:1.55;letter-spacing:-.01em}

.axis{margin-top:20px;max-width:720px}
.axis svg{width:100%;height:auto}
.axis .ax-ln{stroke:var(--text);stroke-width:1.5;fill:none}
.axis .ax-tk{stroke:var(--text2);stroke-width:1}
.axis circle{fill:#FFFFFF;stroke:var(--text);stroke-width:1.5}
.axis text{font-family:var(--font-body);font-size:12px;font-weight:600;fill:var(--text)}
.axis .ax-lt{fill:var(--text2);font-weight:500}
.layers{margin-top:12px}
.layers>li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:16px 0;border-top:1px solid var(--line)}
.layers>li:first-child{border-top:2px solid var(--text)}
.lx{display:flex;align-items:baseline;gap:2px;white-space:nowrap}
.lx-big{font-size:32px;font-weight:700;line-height:1}
.lx-word{font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.lx-u{font-size:15px;font-weight:600}
.lx-t{font-weight:600}
.layers li p:not(.lx-t){font-size:14px;margin-top:2px;color:var(--text2)}

.seqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.seq{border:1px solid var(--line-strong);border-radius:var(--r-box);padding:16px 18px}
.seq-t{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-cap);font-weight:600}
.seq-ex{font-size:12px;font-weight:500;color:var(--text2)}
.seq ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.seq li{position:relative;padding-top:10px;border-top:2px solid var(--text)}
.seq li:last-child{border-top-color:var(--text)}
.seq-st{font-size:12px;color:var(--text2);font-weight:600}
.seq-h{margin-top:2px;font-weight:600;font-size:14px}
.seq-p{margin-top:2px;font-size:12.5px;color:var(--text2);line-height:1.45}
.rec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.rec>div{padding:14px 18px;background:var(--sub);border-radius:var(--r-box)}
.rec-t{font-size:var(--fs-cap);font-weight:600;margin-bottom:6px}
.rec .dash li{font-size:14px}

.loop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.loop li{padding-top:10px;border-top:2px solid var(--text)}
.loop-st{font-size:12px;color:var(--text2);font-weight:600}
.loop-h{margin-top:2px;font-weight:600}
.loop li p:not(.loop-st):not(.loop-h){margin-top:2px;font-size:13px;color:var(--text2);line-height:1.45}

.points{margin-top:24px}
.points li{position:relative;padding-left:20px;max-width:720px}
.points li+li{margin-top:8px}
.points li::before{content:"";position:absolute;left:4px;top:10px;width:5px;height:5px;border-radius:var(--r-pill);background:var(--text)}

/* ── Ⅲ-3 나~라 ────────────────────── */
.checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--text)}
.checks li{padding:16px 16px 16px 0}
.checks li+li{padding-left:16px;border-left:1px solid var(--line)}
.ck-when{font-size:17px;font-weight:600;line-height:32px}
.ck-when .n{font-size:22px;font-weight:700;margin-right:1px}
.ck-what{margin-top:8px;font-size:14px;line-height:1.5}
.ck-since{display:inline-block;margin-top:8px;padding:0 10px;border-radius:var(--r-pill);background:var(--sub);font-size:12px;font-weight:600;color:var(--on-sub);line-height:24px}
.data-line{margin-top:24px;padding:16px 20px;border-radius:var(--r-box);background:var(--sub)}
.data-line p{font-size:14px;color:var(--text)}
.data-line p+p{margin-top:8px}
.dl-lab{display:inline-block;min-width:88px;margin-right:8px;font-size:13px;font-weight:600;color:var(--on-sub)}
.scope{border:1px solid var(--line-strong);border-radius:var(--r-box);padding:20px 24px}
.scope .dash li{font-size:15px}

/* ── Ⅲ-4 ─────────────────────────── */
.edu-figs{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;margin-top:32px;align-items:start}
.fig-dash{border:1px solid var(--line-strong);border-radius:var(--r-box);padding:20px;min-width:0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* <그림 3> 단계 버튼 — 그림 밖 조작(잉크 2px 테두리). 단계마다 맡는 쪽을 늘 보인다 */
.edu-stage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
.edu-stage .scen{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0;min-height:56px;padding:8px 14px;border-radius:var(--r-box);text-align:left;line-height:1.25}
.edu-stage .scen[aria-pressed="true"]{padding:7px 13px}
.st-t{font-size:14px;font-weight:600;color:var(--text)}
.st-t .n{display:inline-block;min-width:10px;margin-right:2px}
.st-who{font-size:12px;font-weight:500;color:var(--text2)}
.edu-panel{min-width:0}
.edu-panel[hidden]{display:none}
.edu-live{margin-top:12px;font-size:13px;color:var(--text2)}

/* 담당자 화면 목업 */
.dash-mock{border:1px solid var(--line-strong);border-radius:var(--r-box);overflow:hidden;background:var(--surface)}
.dm-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:12px 16px;background:var(--text);color:var(--on-dark);font-size:14px;font-weight:600}
.dm-period{font-size:12px;font-weight:500;color:var(--on-dark2)}
.dm-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px}
.dm-tiles li{min-width:0;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-box);padding:12px}
.dm-lab{font-size:12px;color:var(--text2)}
.dm-val{font-size:13px;font-weight:600}
.dm-val .n{font-size:22px;font-weight:600;margin-right:1px}
.dm-sub{margin-top:2px;font-size:12px;line-height:1.4;color:var(--text2)}
.dm-val-row{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.spark{display:flex;align-items:flex-end;gap:2px;height:24px;margin-bottom:6px;flex:none}
.spark i{display:block;width:4px;border-radius:1px;background:rgba(15,23,42,.18)}
.spark i:nth-child(1){height:97%}.spark i:nth-child(2){height:94%}.spark i:nth-child(3){height:100%}.spark i:nth-child(4){height:89%}
.spark i:nth-child(5){height:51%}.spark i:nth-child(6){height:43%}.spark i:nth-child(7){height:77%;background:var(--action)}

.dm-list{margin:0 12px 12px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-box);min-width:0}
.dm-list-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 12px 0}
.dm-list-t{font-size:14px;font-weight:600}
.dm-chips{display:flex;flex-wrap:wrap;gap:6px}
.dm-chip{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--raised);color:var(--on-sub);font:600 13px/1 var(--font-body);cursor:pointer;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.dm-chip .n{font-weight:600;color:var(--text2)}
.dm-chip:hover{border-color:var(--text);color:var(--text)}
.dm-chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--on-dark)}
.dm-chip[aria-pressed="true"] .n{color:var(--on-dark2)}
.dm-rule{padding:8px 12px;font-size:12px;line-height:1.45;color:var(--text2)}
.dm-rows{min-width:0}
.dm-rows [role="rowgroup"][hidden]{display:none}
.dm-row{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1.6fr) 60px 64px;gap:12px;align-items:center;padding:8px 12px;font-size:13px;border-top:1px solid var(--line)}
.dm-row>*{min-width:0}
.dm-rh{color:var(--text2);font-size:12px;font-weight:600}
.dm-name{font-weight:600}
.dm-course{color:var(--on-sub)}
.dm-prog{display:flex;align-items:center;gap:8px}
.dm-pct{min-width:34px;text-align:right;font-weight:600}
.dm-days{min-width:48px;font-size:12px;color:var(--text2);white-space:nowrap}
.dm-days .n{letter-spacing:0}
.dm-last{font-size:12px;color:var(--text2)}
.dm-st{white-space:nowrap}
.dm-more{display:block;font-size:12px;color:var(--text2)}
.bar{flex:1;min-width:24px;height:4px;border-radius:var(--r-pill);background:rgba(15,23,42,.08);overflow:hidden}
.bar-in{display:block;height:100%;background:var(--text)}
.w0{width:0}.w12{width:12%}.w18{width:18%}.w22{width:22%}.w27{width:27%}.w45{width:45%}.w55{width:55%}.w63{width:63%}.w83{width:83%}.w93{width:93%}.w98{width:98%}
.dot{display:inline-block;width:8px;height:8px;border-radius:var(--r-pill);margin-right:6px;vertical-align:1px}
.dot-ok{background:var(--ok)}.dot-warn{background:var(--warn)}.dot-err{background:var(--err)}.dot-top{background:var(--text)}

.dm-slots{margin:0 12px 12px;padding-top:10px;border-top:1px solid var(--line)}
.dm-slots-t{font-size:12px;font-weight:600;color:var(--on-sub)}
.dm-slots ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:6px}
.dm-slots li{min-width:0;padding-left:10px;border-left:2px solid var(--text)}
.dm-slots li.sl-wait{border-left:2px dashed var(--line-strong)}
.sl-h{font-size:12px;color:var(--text2);font-weight:600}
.sl-v{font-size:13px;font-weight:600}
.sl-eta{font-weight:500;color:var(--text2)}

/* 2 신청 — 미신청자 재발송 */
.ap-list{border-top:1px solid var(--line)}
.ap-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.ap-name{font-size:13px;font-weight:600}
.ap-meta{font-size:12px;line-height:1.45;color:var(--on-sub);min-width:0}
.ap-meta .miss{color:var(--err);font-weight:600}
.ap-btns{display:flex;gap:6px;flex-wrap:wrap}
.btn-mini{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--raised);color:var(--text);font:600 12px/1 var(--font-body);white-space:nowrap;cursor:pointer}
.btn-mini:hover{border-color:var(--text)}
.btn-mini[aria-disabled="true"]{color:var(--text2);background:var(--sub);border-color:transparent;cursor:default}
.ap-more{padding:8px 12px;font-size:12px;color:var(--text2)}

/* 1 판매 — 주문 한 건 */
.sale{border:1px solid var(--line-strong);border-radius:var(--r-box);padding:16px 20px;background:var(--surface)}
.sale-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:10px;border-bottom:2px solid var(--text)}
.sale-t{font-size:15px;font-weight:600}
.sale-head .chip{margin-top:0}
.sale-kv>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.sale-kv dt{font-size:13px;font-weight:600;color:var(--text2)}
.sale-kv dd{font-weight:600}
.sale-sub{margin-left:10px;font-size:12px;font-weight:500;color:var(--text2)}
.sale-big{font-size:15px}
.sale-ez dt{color:var(--text)}
.sale-ez .sale-big .n{font-size:28px;font-weight:700;line-height:1.1;color:var(--action)}
.sale-next{margin-top:12px;font-size:14px}
.sale-chips{display:flex;gap:6px;flex-wrap:wrap}
.sale-solo{margin-top:12px;padding:10px 12px;border-radius:var(--r-box);background:var(--sub);font-size:13px;color:var(--on-sub)}

/* 4 결과 보고서 — 목차 */
.rep-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;padding:4px 16px 0}
.rep-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.rep-no{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--r-pill);border:1px solid var(--text);font-size:12px;font-weight:600}
.rep-t{font-size:14px;font-weight:600;line-height:22px}
.rep-d{font-size:12px;color:var(--text2)}
.rep-end{padding:12px 16px 14px;font-size:13px;color:var(--on-sub)}

/* 단계별 장부 — 네 주체가 그 단계에 하는 일 */
.ledger-who{grid-template-columns:repeat(4,minmax(0,1fr))}
.ld-cap{margin-top:16px;font-size:12px;font-weight:600;color:var(--on-sub)}
.ld-cap+.ledger{margin-top:6px}
.nw{white-space:nowrap}
.ledger-who .ld-none{color:var(--text2);font-weight:500}

.day1{border:1px solid var(--line-strong);border-radius:var(--r-box);padding:20px}
.day1-title{font-size:15px;font-weight:600}
.day1>p{margin-top:4px;font-size:14px;color:var(--text2)}
.day1>.day1-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.qr{width:112px;height:112px;margin-top:16px;fill:var(--text)}
.links{margin-top:16px}
.links li{font-size:14px}
.links li+li{margin-top:4px}

/* ── Ⅳ~Ⅵ ─────────────────────────── */
.subsheet{margin-top:64px}
.road{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:road}
.road li{position:relative;padding-top:12px;border-top:1px solid var(--line-strong)}
.road-no{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-pill);background:var(--text);color:var(--on-dark);font-size:15px;font-weight:600}
.road-t{margin-top:12px;font-weight:600;font-size:17px}
.road-d{margin-top:4px;font-size:14px;color:var(--text2)}
.chip-who{margin-top:8px}
.reply{margin-top:32px;padding:20px 24px;border:1px solid var(--line-strong);border-radius:var(--r-box)}
.reply-t{font-weight:600}
.reply-list{margin-top:8px;counter-reset:rq}
.reply-list li{counter-increment:rq;display:grid;grid-template-columns:28px minmax(0,1fr);padding:6px 0;border-bottom:1px solid var(--line)}
.reply-list li::before{content:counter(rq) ".";font-family:var(--font-num);font-weight:600}
.reply-d{margin-top:12px;font-size:14px;color:var(--text2)}
.closing-t{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.02em;max-width:640px}
.sign{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line-strong)}
.sign-name{font-size:22px;font-weight:700;letter-spacing:-.02em}
.sign-role{font-size:14px;color:var(--text2)}
.sign-kv>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.sign-kv dt{font-size:13px;color:var(--text2);font-weight:600}
.sign-kv dd{font-size:15px}
.colophon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px;padding:16px 20px;background:var(--sub);border-radius:var(--r-box)}
.colophon dt{font-size:12px;color:var(--on-sub);font-weight:600}
.colophon dd{margin-top:2px;font-size:14px}

/* ── 좁은 화면 ───────────────────── */
@media (max-width:1199px){
  .shell{grid-template-columns:minmax(0,960px);padding:24px 24px 64px}
  .toc{display:none}
  .mbar{display:flex}
}
@media (max-width:1199px){
  .mbar{position:sticky;top:0;z-index:5;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--line)}
  .mbar-doc{display:flex;flex-direction:column;font-size:14px;font-weight:600;line-height:1.35;text-decoration:none}
  .mbar-doc span{font-size:12px;font-weight:500;color:var(--text2)}
  .mtoc{position:relative}
  .mtoc summary{list-style:none;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--raised);font-size:14px;font-weight:600;cursor:pointer}
  .mtoc summary::-webkit-details-marker{display:none}
  .mtoc[open] summary{border-color:var(--text)}
  .mtoc-list{position:absolute;right:0;top:48px;width:240px;padding:8px;background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-box)}
  .mtoc-list a{display:block;padding:10px 12px;font-size:14px;text-decoration:none;border-radius:var(--r-box)}
  .mtoc-list a:hover{background:var(--sub)}
  html{scroll-padding-top:80px}
  .sheet{scroll-margin-top:80px}
}
@media (max-width:719px){
  .shell{padding:16px 16px 48px}
  .mbar{padding:12px 16px}
  .cover-body{padding:28px 0 28px}
  .cover-to{margin-top:32px}
  .cover-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cover-meta>div{padding:12px 12px 12px 0;border-bottom:1px solid var(--line)}
  .cover-band{padding:24px 20px 20px}
  .band-stats{gap:24px}
  .band-note{margin-left:0;flex-basis:100%}
  .lead{font-size:15px}
  .kv>div{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .duo,.split,.defs,.flows,.state2,.edu-figs{grid-template-columns:minmax(0,1fr)}
  .state2-cell+.state2-cell{border-left:0;border-top:1px solid var(--line-strong)}
  .cta-row{flex-direction:column;align-items:stretch;padding:20px}
  .cta-row .btn-primary{width:100%}
  .offer{grid-template-columns:auto 32px auto;gap:12px 16px}
  .offer-desc{grid-column:1/-1;padding-left:0;border-left:0;padding-top:12px;border-top:1px solid var(--line)}
  .flowmap{padding:16px;margin-left:-4px;margin-right:-4px}
  .map-h{display:none}
  .map-v{display:block}
  .ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger>div{padding:12px 12px 4px 0}
  .ledger>div+div{padding-left:0;border-left:0}
  .ledger>div:nth-child(even){padding-left:12px;border-left:1px solid var(--line)}
  .ledger>div:last-child{grid-column:1/-1;padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .walk,.seqs,.rec{grid-template-columns:minmax(0,1fr)}
  .clients-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layers>li{grid-template-columns:88px minmax(0,1fr);gap:12px}
  .lx-big{font-size:26px}.lx-word{font-size:17px}
  .quote{font-size:15.5px}
  .sheet{padding:44px 0}
  .checks{grid-template-columns:minmax(0,1fr)}
  .checks li,.checks li+li{padding:14px 0;border-left:0;border-bottom:1px solid var(--line)}
  .road{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sign{grid-template-columns:minmax(0,1fr);gap:16px}
  .colophon{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .subsheet{margin-top:48px}

  /* 표 → 쌓인 행 */
  .tbl.stack thead{display:none}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack th,.tbl.stack td{display:block;width:auto!important}
  .tbl.stack tbody tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .tbl.stack tbody tr:last-child{border-bottom:0}
  .tbl.stack tbody th,.tbl.stack tbody td{padding:2px 0;border:0}
  .tbl.stack tbody th{padding-bottom:6px;font-size:15px}
  .tbl.stack td[data-label]{position:relative;padding:3px 0 3px 116px;min-height:26px;font-size:14px;text-align:left}
  .tbl.stack td[data-label]::before{content:attr(data-label);position:absolute;left:0;top:5px;width:108px;font-size:12px;font-weight:600;color:var(--text2);line-height:1.4}
  .tbl.stack td.r{white-space:normal}
  .tbl.stack .pct{display:inline;margin-left:6px}
  .t-summary th[scope="row"] .cell-sub{padding-left:20px}
}

/* <그림 3> 좁은 화면 */
@media (max-width:719px){
  .fig-dash{padding:14px}
  .fig-edu .chip-demo{white-space:normal;padding:4px 12px;line-height:1.35}
  .edu-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .edu-stage .scen{min-height:52px;padding:8px 12px}
  .edu-stage .scen[aria-pressed="true"]{padding:7px 11px}
  .dm-bar{flex-direction:column;align-items:flex-start}
  .dm-tiles{padding:8px}
  .dm-tiles li{padding:10px}
  .dm-list,.dm-slots{margin-left:8px;margin-right:8px}
  .dm-list-head{padding:10px 10px 0}
  .dm-rule{padding:8px 10px}
  .dm-row{grid-template-columns:48px minmax(0,1fr) 60px;gap:8px;padding:8px 10px}
  .dm-course,.dm-last{display:none}
  .dm-days{min-width:0}
  .dm-slots ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}
  .dm-slots li{padding-left:8px}
  .sl-eta{display:block;font-size:12px}
  .sl-dot{display:none}
  .dm-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .dm-chip{justify-content:center;padding:0 8px}
  .ap-row{grid-template-columns:minmax(0,1fr);padding:10px}
  .sale{padding:14px}
  .sale-kv>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .rep-list{grid-template-columns:minmax(0,1fr);padding:4px 12px 0}
  .rep-end{padding:12px}
  .ledger-who>div:last-child{grid-column:auto;border-top:0;padding-left:12px;border-left:1px solid var(--line)}
  .ledger-who>div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ── 인쇄 (A4 세로) ─────────────── */
/* ── 그림: 상황별 처리와 결과 (표 4 대체 — 로이 09-28 「글이 너무 많아, 시각적으로」) ── */
.cases{margin-top:8px}
.cases-map{width:100%;height:auto;font-family:var(--font-body)}
.cases-map .cs-h{font-size:12px;font-weight:600;fill:var(--text2)}
.cases-map .cs-e{fill:none;stroke:rgba(24,24,27,.5);stroke-width:1.5;marker-end:url(#cs-ink)}
.cases-map .cs-o{stroke:var(--action);stroke-width:2;marker-end:url(#cs-org)}
.cases-map .cs-dash{stroke:rgba(24,24,27,.4);stroke-dasharray:5 4}
.cases-map .cs-mk{fill:rgba(24,24,27,.6)}
.cases-map .cs-mk-o{fill:var(--action)}
.cases-map .cs-aux{font-size:12px;font-weight:500;fill:var(--text2)}
.cases-map .cs-s rect{fill:#FFFFFF;stroke:rgba(24,24,27,.22)}
.cases-map .cs-s text,.cases-map .cs-a text{font-size:15px;font-weight:600;fill:var(--text);letter-spacing:-.02em}
.cases-map .cs-a rect{fill:var(--sub);stroke:rgba(24,24,27,.14)}
.cases-map .cs-a-o rect{fill:#FFF4EC;stroke:var(--action);stroke-width:1.5}
.cases-map .cs-sub{font-size:12px!important;font-weight:500!important;fill:var(--text2)!important}
.cases-map .cs-ok rect{fill:var(--text)}
.cases-map .cs-big{font-size:26px;font-weight:800;fill:#FFFFFF;letter-spacing:-.03em}
.cases-map .cs-okd{font-size:15px;font-weight:600;fill:#FFFFFF}
.cases-map .cs-okd2{font-size:13px;font-weight:500;fill:var(--on-dark2)}
.cases-map .cs-no rect{fill:#FFFFFF;stroke:var(--text);stroke-width:1.5}
.cases-map .cs-big2{font-size:20px;font-weight:800;fill:var(--text);letter-spacing:-.03em}
.cases-map .cs-nod{font-size:13px;font-weight:500;fill:var(--text2)}
.cases-list{display:none}
.cases-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:var(--fs-cap);color:var(--text2)}
.cases-cap .figno{font-weight:600;color:var(--text)}

/* 다. 네 겹의 점검 — 눈금 넷 */
.cadence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.cadence li{position:relative;padding:18px 16px 0 0;border-top:2px solid var(--text)}
.cadence li::before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;background:#FFFFFF;border:2px solid var(--text)}
.cd-when{font-size:15px;font-weight:600;line-height:1.1}
.cd-when .n{font-size:32px;font-weight:700;margin-right:2px}
.cd-w{font-size:22px;font-weight:800;letter-spacing:-.03em}
.cd-t{margin-top:8px;font-weight:600}
.cd-d{margin-top:2px;font-size:13px;color:var(--text2)}

/* 라. 비용과 기록 — 예약·차감 막대 + 기록 칩 */
.costrec{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;margin-top:14px}
.hold{border:1px solid var(--line-strong);border-radius:var(--r-box);padding:16px 18px}
.hold-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:var(--fs-cap);font-weight:600}
.hold-row{display:grid;grid-template-columns:84px minmax(0,1fr) 96px;align-items:center;gap:10px;margin-top:12px}
.hold-lab{font-size:13px;color:var(--text2);font-weight:600}
.hold-bar{display:flex;height:14px}
.hb{display:block;height:100%}
.hb-hold{width:100%;border:1.5px dashed var(--text);border-radius:4px}
.hb-used{width:60%;background:var(--text);border-radius:4px 0 0 4px}
.hb-free{width:40%;border:1.5px dashed rgba(24,24,27,.35);border-left:0;border-radius:0 4px 4px 0}
.hold-v{font-size:13px;white-space:nowrap}
.hold-v>.n{font-size:17px;font-weight:700}
.hold-free{display:block;font-size:12px;color:var(--text2)}
.hold-free .n{font-size:12px;font-weight:600}
.recs{padding:16px 18px;background:var(--sub);border-radius:var(--r-box)}
.recs-t{font-size:var(--fs-cap);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tags li{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:#FFFFFF;border:1px solid var(--line-strong);font-size:13px;font-weight:600}
.tags li span{font-size:12px;font-weight:500;color:var(--text2)}
.recs-no{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-strong);font-size:13px;font-weight:600}
.recs-no span{display:block;font-size:12px;font-weight:500;color:var(--text2)}

/* 마. 도입 뒤 운영 — 아이콘 타일 셋 */
.after{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.after li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-box)}
.ic{width:28px;height:28px;fill:none;stroke:var(--text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.af-t{font-weight:600}
.af-d{margin-top:2px;font-size:13px;color:var(--text2)}
@media (max-width:719px){
  .cases-map{display:none}
  .cases-list{display:grid;gap:12px}
  .cases-list section{border:1px solid var(--line-strong);border-radius:var(--r-box);padding:14px 16px}
  .cl-out{font-size:17px;font-weight:800}
  .cl-out span{display:block;font-size:13px;font-weight:500;color:var(--text2)}
  .cases-list ul{margin-top:8px;border-top:1px solid var(--line)}
  .cases-list li{padding:8px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:14px}
  .cases-list li span{display:block;font-weight:500;color:var(--text2);font-size:13px}
  .cadence{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .costrec,.after{grid-template-columns:minmax(0,1fr)}
}

@page{size:A4;margin:18mm 20mm 20mm;@bottom-center{content:"- " counter(page) " -";font-family:"SP Outfit Print","SP Pretendard Print",sans-serif;font-size:8.5pt;color:#6B7280}}
@page :first{margin:0;@bottom-center{content:none}}
@media print{
  .cases,.cadence,.costrec,.after{break-inside:avoid}
  .cases-map{display:block!important}.cases-list{display:none!important}
  .cadence{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .costrec{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important}
  .after{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .cases-cap{margin-top:4pt;font-size:8pt}
  .cadence{margin-top:10pt}
  .cadence li{padding:9pt 8pt 0 0}
  .cadence li::before{width:8pt;height:8pt;top:-5pt}
  .cd-when{font-size:10pt}
  .cd-when .n{font-size:20pt}
  .cd-w{font-size:14pt}
  .cd-t{margin-top:4pt;font-size:10pt}
  .cd-d{font-size:8.5pt}
  .costrec{margin-top:8pt;gap:10pt}
  .hold,.recs{padding:9pt 11pt}
  .hold-row{grid-template-columns:52pt minmax(0,1fr) 60pt;margin-top:7pt;gap:7pt}
  .hold-lab,.hold-t{font-size:8.5pt}
  .hold-bar{height:9pt}
  .hold-v>.n{font-size:11pt}
  .hold-free,.hold-free .n{font-size:8pt}
  .tags{gap:4pt;margin-top:5pt}
  .tags li{padding:1.5pt 7pt;font-size:8.5pt}
  .tags li span{font-size:8pt}
  .recs-t{font-size:8.5pt}
  .recs-no{margin-top:7pt;padding-top:6pt;font-size:8.5pt}
  .recs-no span{font-size:8pt}
  .after{margin-top:8pt;gap:8pt}
  .after li{padding:8pt 10pt;grid-template-columns:20pt minmax(0,1fr);gap:8pt}
  .ic{width:18pt;height:18pt}
  .af-t{font-size:10pt}
  .af-d{font-size:8.5pt}
  :root{--font-body:"SP Pretendard Print",sans-serif;--font-num:"SP Outfit Print","SP Pretendard Print",sans-serif;--fs-title:24pt;--fs-h2:16pt;--fs-h3:12.5pt;--fs-body:10pt;--fs-cap:8.5pt;--fs-fig:28pt;--pad:0}
  html,body{background:#FFFFFF}
  body{font-size:10pt;font-weight:400;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mbar,.toc,.skip,.flow-ctl,.fm-scen,.cta-row .btn-primary,.btn-ghost{display:none!important}
  .shell{display:block;padding:0}
  .doc.solo{max-width:none;padding:0}
  .doc{display:block}
  .sheet{border:0;border-radius:0;padding:0;break-before:page}
  .sheet.cover{break-before:auto}
  .rh{display:flex;justify-content:space-between;align-items:center;padding-bottom:6pt;margin-bottom:14pt;border-bottom:1px solid var(--line-strong);font-size:8.5pt;color:var(--text2)}
  .rh img{width:32mm;height:auto}
  .cover{height:297mm;display:flex;flex-direction:column;justify-content:space-between}
  .cover-body{padding:24mm 20mm 0}
  .cover-logo{width:44mm}
  .cover-to{margin-top:36mm;font-size:13pt}
  .cover-rule{width:32mm;height:1mm}
  .cover-band{padding:12mm 20mm 14mm}
  .lead{font-size:10.5pt}
  .tbl{font-size:9.5pt}
  .tbl thead th{font-size:8.5pt}
  .note,.figcap,.cell-sub{font-size:8.5pt}
  .tbl,.box,.fig-demo,.flowmap,.checks,.scope,.road,.reply,.sign,.duo,.state2,.offer,.edu-figs,.kv{break-inside:avoid}
  .sec-head,.h3,.cap{break-after:avoid}
  .map-h{display:block!important}.map-v{display:none!important}
  /* 인쇄 밀도: 절 하나 = 한 쪽을 목표로 간격을 조인다 */
  .sec-head{margin-bottom:10pt;padding-bottom:5pt}
  .sec-meta{font-size:8pt;margin-bottom:2pt}
  .lead{font-size:10pt;line-height:1.5}
  .h3{margin:14pt 0 6pt;font-size:11pt}
  .cap{margin:12pt 0 4pt}
  .kv{margin-top:10pt}
  .kv>div{padding:4pt 0;grid-template-columns:90pt minmax(0,1fr)}
  .tbl thead th{padding:4pt 6pt}
  .tbl tbody th,.tbl tbody td{padding:4.5pt 6pt}
  .cell-sub,.pct{margin-top:0}
  .duo{margin-top:12pt;gap:10pt}
  .box{padding:9pt 11pt}
  .box>p,.dash li{font-size:9pt}
  .ask{margin-top:12pt;padding:7pt 11pt;font-size:9.5pt}
  .split{gap:18pt}
  .figs li{padding:6pt 0}
  .fig .n{font-size:20pt}
  .timeline li{padding:5pt 0}
  .defs{margin-top:10pt;gap:10pt}
  .cta-row{margin-top:12pt;padding:8pt 11pt}
  .pricepair{margin-top:10pt;padding:6pt 0}
  .pp-val .n{font-size:17pt}
  .state2{margin-top:10pt}
  .state2-cell{padding:7pt 10pt}
  .state2-cell p:not(.state2-lab){font-size:9pt}
  .fig-demo{margin-top:12pt;padding:9pt}
  .fig-head{margin-bottom:6pt}
  .flows{gap:8pt}
  .flow{padding:8pt}
  .flow-title{margin-bottom:4pt;font-size:10pt}
  .step{padding:2pt 0;gap:8pt;grid-template-columns:20pt minmax(0,1fr)}
  .step-no{width:18pt;height:18pt;font-size:8pt}
  .step:not(:last-child)::after{display:none}
  .step-t{line-height:18pt;font-size:9.5pt}
  .step-d{font-size:8.5pt}
  .chip{min-height:14pt;margin-top:2pt;font-size:7.5pt;padding:0 6pt}
  .offer{margin-top:10pt;padding:8pt 0}
  .offer-from .n{font-size:18pt}
  .flowmap{padding:12pt}
  .fm-head{margin-bottom:6pt}
  .ledger{display:none}
  .fm-legend{margin-top:6pt}
  .points{margin-top:10pt}
  .points li{font-size:9.5pt}
  .fn{margin-top:10pt}
  .checks li,.checks li+li{padding:7pt 8pt 7pt 0}
  .checks li+li{padding-left:8pt}
  .ck-when{line-height:18pt;font-size:10.5pt}
  .ck-when .n{font-size:13pt}
  .ck-what{font-size:8.5pt;margin-top:3pt}
  .data-line{margin-top:10pt;padding:8pt 11pt}
  .data-line p{font-size:9pt}
  .scope{padding:9pt 12pt}
  .scope .dash li{font-size:9pt}
  .edu-figs{margin-top:10pt;grid-template-columns:minmax(0,1fr) 150pt;gap:10pt}
  .fig-dash,.day1{padding:9pt}
  .qr{width:64pt;height:64pt;margin-top:6pt}
  .subsheet{break-before:auto;margin-top:18pt}
  .road{gap:10pt}
  .road-t{margin-top:4pt;font-size:10.5pt}
  .road-d{font-size:8.5pt}
  .road-no{width:18pt;height:18pt;font-size:9pt}
  .reply{margin-top:10pt;padding:8pt 12pt}
  .reply-list li{padding:3pt 0}
  .closing-t{font-size:12.5pt}
  .sign{margin-top:10pt;padding-top:8pt}
  .sign-name{font-size:14pt}
  .sign-kv>div{padding:3pt 0}
  .colophon{margin-top:10pt;padding:6pt 10pt}
  .colophon dd{font-size:8.5pt}
  /* 절별 추가 압축 */
  .flows{grid-template-columns:minmax(0,1fr)}
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8pt}
  .step{grid-template-columns:18pt minmax(0,1fr);gap:5pt}
  .sec-head .h2-cont{font-size:12.5pt}
  .t-cases,.t-terms{font-size:8.5pt}
  .t-cases thead th,.t-terms thead th{font-size:7.5pt}
  .t-cases tbody th,.t-cases tbody td,.t-terms tbody th,.t-terms tbody td{padding:3.5pt 5pt}
  .t-edu{font-size:9pt}
  .t-edu tbody th,.t-edu tbody td{padding:3pt 6pt}
  .t-edu .cell-sub{display:inline;margin-left:4pt}
  .dm-bar{padding:5pt 8pt;font-size:9pt}
  .dm-period{font-size:7.5pt}
  .dm-tiles{padding:6pt;gap:5pt}
  .dm-tiles li{padding:5pt}
  .dm-lab{font-size:7.5pt}
  .dm-val{font-size:8.5pt}
  .dm-val .n{font-size:13pt}
  .dm-sub{margin-top:0;font-size:7pt;line-height:1.3}
  .dm-row{padding:3pt 6pt;font-size:8.5pt}
  /* <그림 3> 인쇄 = 대표 상태 한 장(3 학습 현황 · 전체). 웹에서 무엇을 눌렀든 CSS 만으로 이 상태가 찍힌다 */
  .fig-edu .edu-panel{display:none!important}
  .fig-edu .edu-panel[data-stage="learn"]{display:block!important}
  .fig-edu [data-rows]{display:none!important}
  .fig-edu [data-rows="all"]{display:block!important}
  .edu-live,.web-only,.spark{display:none!important}
  .fig-edu .chip-demo{min-height:0;padding:1pt 6pt;font-size:7pt}
  .edu-stage{display:block;margin-bottom:5pt;font-size:7.5pt;line-height:1.4;color:var(--text2);white-space:nowrap}
  .edu-stage .scen,.edu-stage .scen[aria-pressed]{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:none;font:500 7.5pt/1.4 var(--font-body);color:var(--text2)}
  .edu-stage .scen:not(:last-child)::after{content:" \2192  ";font-weight:500;color:var(--text2)}
  .edu-stage .st-t,.edu-stage .st-who{display:inline;font-size:7.5pt;font-weight:inherit;color:inherit}
  .edu-stage .st-who::before{content:" "}
  .edu-stage .st-t .n{min-width:0;margin-right:0}
  .edu-stage .scen[data-stage-btn="learn"]{font-weight:700;color:var(--text)}
  .dm-list{margin:0 6pt 6pt}
  .dm-list-head{padding:4pt 6pt 0;gap:2pt 8pt}
  .dm-list-t{font-size:8.5pt}
  .dm-chips{gap:0 7pt}
  .fig-edu .dm-chip,.fig-edu .dm-chip[aria-pressed]{min-height:0;padding:0;border:0;border-radius:0;background:none;font:500 7.5pt/1.4 var(--font-body);color:var(--text2)}
  .fig-edu .dm-chip .n,.fig-edu .dm-chip[aria-pressed] .n{color:inherit}
  .fig-edu .dm-chip[data-f="all"]{font-weight:700;color:var(--text);text-decoration:underline;text-underline-offset:2pt}
  .dm-rule{padding:2pt 6pt 3pt;font-size:7.5pt}
  .dm-row{grid-template-columns:30pt minmax(0,1fr) minmax(0,1.3fr) 28pt 34pt;gap:5pt}
  .dm-rh{font-size:7.5pt}
  .dm-prog{gap:4pt}
  .bar{min-width:14pt;height:3pt}
  .dm-pct{min-width:18pt}
  .dm-days,.dm-last,.dm-more{font-size:7.5pt}
  .dm-days{min-width:0}
  .dot{width:5pt;height:5pt;margin-right:3pt}
  /* 쪽 예산(Ⅲ-4 한 쪽): 넘치면 ① 발송 띠부터 뺀다 — 기획서 §6 */
  .dm-slots{display:none!important}
  .fig-edu .dash-mock{line-height:1.3}
  .fig-edu .dm-row{padding:2.5pt 6pt}
  .fig-edu .dm-val{line-height:1.15}
  .fig-edu .dm-tiles li{padding:4pt 5pt}
  .fig-edu .fig-head{margin-bottom:4pt}
  .fig-edu .note{margin-top:5pt;line-height:1.4}
  .subsheet{margin-top:12pt}
  .reply-d{margin-top:4pt;font-size:8.5pt}
  .reply-list li{font-size:9pt}
  .sign-kv dd{font-size:9pt}
  .lead+.cap{margin-top:8pt}
  #iv>.lead{display:none}
  #iv .sec-head{margin-bottom:6pt}
  #iv .subsheet{margin-top:8pt}
  #iv .reply{margin-top:6pt;padding:6pt 10pt}
  #iv .sign{margin-top:6pt;padding-top:6pt}
  #iv .colophon{margin-top:6pt}
  .walk{margin-top:10pt;gap:0 16pt}
  .walk li{padding:5pt 0;grid-template-columns:20pt minmax(0,1fr);gap:6pt}
  .walk-no{width:17pt;height:17pt;font-size:8pt}
  .walk-t{line-height:17pt;font-size:9.5pt}
  .walk li p:not(.walk-t){font-size:8.5pt}
  .quote{margin-top:10pt;font-size:10.5pt;padding-left:10pt}
  .h3-lead{font-size:9.5pt}
  .axis{margin-top:6pt;max-width:120mm}
  .layers>li{padding:5pt 0;grid-template-columns:62pt minmax(0,1fr);gap:10pt}
  .lx-big{font-size:17pt}.lx-word{font-size:11pt}.lx-u{font-size:9pt}
  .lx-t{font-size:9.5pt}
  .layers li p:not(.lx-t){font-size:8.5pt}
  .seqs{margin-top:8pt;gap:8pt}
  .seq{padding:7pt 9pt}
  .seq ol{margin-top:5pt;gap:6pt}
  .seq-h{font-size:9pt}.seq-p,.seq-st{font-size:7.5pt}
  .rec{margin-top:8pt;gap:8pt}
  .rec>div{padding:6pt 9pt}
  .rec .dash li{font-size:8.5pt}
  .loop{margin-top:8pt;gap:8pt}
  .loop li p:not(.loop-st):not(.loop-h){font-size:8pt}
  .walk,.quote,.layers,.seqs,.rec,.loop,.axis{break-inside:avoid}
  .client{min-height:62pt;padding:8pt 6pt 6pt;gap:5pt}
  .client img{max-height:22pt}
  .client span{font-size:7.5pt}
  .clients-grid,.pilot-steps{break-inside:avoid}
  .pilot-steps li{padding:4pt 0}
  .ps-t,.pilot-steps li p:not(.ps-t){font-size:8.5pt}
  a{text-decoration:none}
  mark.tbd{border-style:dashed}
}

/* ── 고른 안: i B (로이 9/28 선택) ── */
/* Ⅰ 제안 요약 — B안 「2×2 카드」
   표 1(4행 글 표) → 제안 타일 넷. 타일마다 큰 숫자 하나 + 바로 아래 종류 글자(판매수수료 / 스피커블 공급가).
   과세 기준 두 줄 → 표 제목 옆 회색 한 줄. 체험 운영안 → 쉐브론 3단, 맡는 일 → 칩 넷.
   주황은 한 곳: 체험 운영안 1단계(현대이지웰이 먼저 할 일). 모든 선택자는 .opt-i-B 아래. */

.opt-i-B .ob-cap{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:28px 0 10px}
.opt-i-B .ob-cap .cap{margin:0}
.opt-i-B .ob-meta{font-size:var(--fs-cap);color:var(--text2)}

/* 타일 넷 */
.opt-i-B .ob-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt-i-B .ob-tile{display:flex;flex-direction:column;min-width:0;padding:18px 20px 16px;border:1px solid var(--line-strong);border-radius:var(--r-box)}
.opt-i-B .ob-head{min-height:76px}
.opt-i-B .ob-cat{font-size:12px;font-weight:600;line-height:1.4;color:var(--text2)}
.opt-i-B .ob-t{margin-top:2px;font-size:var(--fs-h3);font-weight:700;line-height:1.35;letter-spacing:-.02em}
.opt-i-B .ob-no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;vertical-align:2px;border:1px solid var(--text);border-radius:var(--r-pill);font-size:12px;font-weight:600;letter-spacing:0}
.opt-i-B .ob-sub{margin-top:2px;padding-left:30px;font-size:13px;color:var(--text2)}
.opt-i-B .ob-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:6px 12px;margin-top:14px}
.opt-i-B .ob-fig{display:flex;align-items:baseline;flex:none;gap:6px;line-height:1;white-space:nowrap}
.opt-i-B .ob-fig .n{font-size:var(--fs-fig);font-weight:700;letter-spacing:-.03em}
.opt-i-B .ob-fu{font-size:15px;font-weight:600}
.opt-i-B .ob-st{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.opt-i-B .ob-st .chip{margin-top:0;white-space:nowrap}
.opt-i-B .ob-unit{margin:8px 0 12px;font-size:14px;color:var(--text2)}
.opt-i-B .ob-unit b{font-weight:700;color:var(--text)}
.opt-i-B .ob-ex{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--text2)}

/* 체험 운영안 · 맡는 일 — 왼쪽 이름 칸 + 오른쪽 그림 */
.opt-i-B .ob-foot{margin-top:28px;border-top:2px solid var(--text)}
.opt-i-B .ob-line{display:grid;grid-template-columns:152px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.opt-i-B .ob-lab{font-size:14px;font-weight:700}
.opt-i-B .ob-chev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.opt-i-B .ob-chev li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;align-content:center;min-height:56px;padding:8px 26px 8px 30px;background:rgba(24,24,27,.07);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}
.opt-i-B .ob-chev li:first-child{padding-left:14px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}
.opt-i-B .ob-chev li.is-now{background:var(--action)}
.opt-i-B .ob-cn{grid-column:1;grid-row:1/3;align-self:center;justify-self:start;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--r-pill);background:var(--text);color:#FFFFFF;font-size:12px;font-weight:600}
.opt-i-B .ob-ct,.opt-i-B .ob-cd{grid-column:2}
.opt-i-B .ob-ct{font-size:14px;font-weight:700;line-height:1.3}
.opt-i-B .ob-cd{font-size:12px;line-height:1.35;color:var(--on-sub)}
.opt-i-B .is-now .ob-cd{color:var(--text)}
.opt-i-B .ob-tags{margin-top:0}
.opt-i-B .ob-tags li{white-space:nowrap}

/* 폰: 타일 한 줄씩 · 쉐브론은 아래로 향하게 */
@media (max-width:719px){
  .opt-i-B .ob-tiles{grid-template-columns:minmax(0,1fr)}
  .opt-i-B .ob-tile{padding:16px}
  .opt-i-B .ob-head{min-height:0}
  .opt-i-B .ob-line{grid-template-columns:minmax(0,1fr);gap:10px}
  .opt-i-B .ob-chev{grid-template-columns:minmax(0,1fr);gap:3px}
  .opt-i-B .ob-chev li,.opt-i-B .ob-chev li:first-child{min-height:0;padding:10px 14px 20px;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),50% 100%,0 calc(100% - 10px))}
  .opt-i-B .ob-chev li:last-child{padding-bottom:10px;clip-path:none}
}

/* 인쇄: 용지 폭(≈642px)에서 폰 규칙이 먹어도 2열·3단 가로를 되찾는다 */
@media print{
  .opt-i-B .ob-tiles,.opt-i-B .ob-foot{break-inside:avoid}
  .opt-i-B .ob-cap{margin:12pt 0 5pt}
  .opt-i-B .ob-meta{font-size:8.5pt}
  .opt-i-B .ob-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8pt}
  .opt-i-B .ob-tile{padding:11pt 13pt 10pt!important}
  .opt-i-B .ob-head{min-height:40pt!important}
  .opt-i-B .ob-cat{font-size:8pt}
  .opt-i-B .ob-t{margin-top:1pt;font-size:11pt}
  .opt-i-B .ob-no{width:13pt;height:13pt;margin-right:5pt;vertical-align:1pt;font-size:8pt}
  .opt-i-B .ob-sub{margin-top:1pt;padding-left:18pt;font-size:8.5pt}
  .opt-i-B .ob-row{margin-top:8pt;gap:4pt 8pt}
  .opt-i-B .ob-fig{gap:4pt}
  .opt-i-B .ob-fig .n{font-size:28pt}
  .opt-i-B .ob-fu{font-size:10pt}
  .opt-i-B .ob-st .chip{min-height:14pt;padding:0 6pt;font-size:8pt}
  .opt-i-B .ob-unit{margin:5pt 0 8pt;font-size:9pt}
  .opt-i-B .ob-ex{padding-top:6pt;font-size:8.5pt}
  .opt-i-B .ob-foot{margin-top:14pt}
  .opt-i-B .ob-line{grid-template-columns:30mm minmax(0,1fr)!important;gap:10pt!important;padding:8pt 0}
  .opt-i-B .ob-lab{font-size:9.5pt}
  .opt-i-B .ob-chev{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3pt!important}
  .opt-i-B .ob-chev li{grid-template-columns:13pt minmax(0,1fr)!important;column-gap:6pt!important;min-height:32pt!important;padding:5pt 16pt 5pt 18pt!important;clip-path:polygon(0 0,calc(100% - 10pt) 0,100% 50%,calc(100% - 10pt) 100%,0 100%,10pt 50%)!important}
  .opt-i-B .ob-chev li:first-child{padding-left:8pt!important;clip-path:polygon(0 0,calc(100% - 10pt) 0,100% 50%,calc(100% - 10pt) 100%,0 100%)!important}
  .opt-i-B .ob-cn{width:13pt;height:13pt;font-size:8pt}
  .opt-i-B .ob-ct{font-size:9.5pt}
  .opt-i-B .ob-cd{font-size:8pt}
  .opt-i-B .ob-tags{gap:4pt}
}

/* ── 고른 안: iii-1 C (로이 9/28 선택) ── */
/* Ⅱ-1 C안 — 품목 카드 6장(3열×2줄)
   카드 = 이름+분야 칩 · 큰 숫자(판매 제안가) · 회색 꼬리(소비자가·스피커블 공급가) · 주황 테 칩(판매수수료 금액·%).
   흑백 인쇄: 판매수수료는 칩 모양과 글자로 갈린다. 주황은 이 쪽에서 판매수수료 칩 한 종류. */

.opt-iii-1-C .pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px}
.opt-iii-1-C .pc{min-width:0;padding:16px 18px;border:1px solid var(--line-strong);border-radius:var(--r-box)}
.opt-iii-1-C .pc-head{display:block}
.opt-iii-1-C .pc-name{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.opt-iii-1-C .pc-cat{display:inline-block;min-height:0;margin-top:6px;line-height:22px;white-space:nowrap}
.opt-iii-1-C .pc-lab{margin-top:14px;font-size:12px;font-weight:600;color:var(--text2)}
.opt-iii-1-C .pc-big .n{font-size:32px;font-weight:700;line-height:1.15}
.opt-iii-1-C .pc-tail{margin:8px 0 14px;padding-top:8px;border-top:1px solid var(--line)}
.opt-iii-1-C .pc-tail>div{display:flex;justify-content:space-between;gap:8px;font-size:13px;line-height:1.6;color:var(--text2)}
.opt-iii-1-C .pc-tail dd .n{font-weight:600}
.opt-iii-1-C .pc-fee{display:inline-block;white-space:nowrap;padding:5px 12px;border:1px solid var(--action);border-radius:var(--r-pill);background:#FFF4EC;font-size:13px;font-weight:600}
.opt-iii-1-C .pc-fee .n{font-weight:700}
.opt-iii-1-C .pc-fee-l{margin-right:6px}
.opt-iii-1-C .pc-pct{color:var(--on-sub)}
.opt-iii-1-C .pc-pct::before{content:"·";margin:0 6px;color:var(--text2)}
.opt-iii-1-C .pc-note{margin-top:10px}
.opt-iii-1-C .pc-note+.pc-note{margin-top:2px}
.opt-iii-1-C .cta-row{margin-top:24px}

@media (max-width:719px){
  .opt-iii-1-C .pcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .opt-iii-1-C .pc{padding:12px}
  .opt-iii-1-C .pc-lab{margin-top:10px}
  .opt-iii-1-C .pc-big .n{font-size:26px}
  .opt-iii-1-C .pc-tail>div{flex-wrap:wrap;gap:0 6px;font-size:12px}
  .opt-iii-1-C .pc-fee{padding:4px 10px;font-size:12px;white-space:normal}
}

@media print{
  .opt-iii-1-C .pcards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8pt;margin-top:2pt;break-inside:avoid}
  .opt-iii-1-C .pc{padding:8pt 10pt 9pt;break-inside:avoid}
  .opt-iii-1-C .pc-name{font-size:10pt}
  .opt-iii-1-C .chip{min-height:0;margin-top:3pt;padding:0 6pt;font-size:8pt;line-height:1.5}
  .opt-iii-1-C .pc-lab{margin-top:7pt;font-size:8pt}
  .opt-iii-1-C .pc-big .n{font-size:21pt}
  .opt-iii-1-C .pc-tail{margin:4pt 0 7pt;padding-top:4pt}
  .opt-iii-1-C .pc-tail>div{flex-wrap:nowrap!important;font-size:8.5pt;line-height:1.45}
  .opt-iii-1-C .pc-fee{white-space:nowrap!important;padding:2pt 8pt;font-size:8.5pt}
  .opt-iii-1-C .pc-fee-l{margin-right:4pt}
  .opt-iii-1-C .pc-pct::before{margin:0 4pt}
  .opt-iii-1-C .pc-note{margin-top:5pt;font-size:8pt}
  .opt-iii-1-C .pc-note+.pc-note{margin-top:1pt}
  .opt-iii-1-C .cta-row{margin-top:12pt}
}

/* ── 고른 안: iii-2 C (로이 9/28 선택) ── */
/* Ⅱ-2 C안 「비교 카드」 — 표 3과 그림 1을 나란한 두 카드로. 카드마다 그림 기호 · 속성 세 줄(굵은 값 + 회색 꼬리) ·
   정적 4점 단계선 · 그 아래 담당 띠. 정적 그림이라 data-flow 고리는 두지 않는다.
   담당 구분은 색이 아니라 선으로: 점선 = 제안 연동 · 먹 = 현재 운영자 처리 · 회색 = 이용자. 주황은 가격 띠 머리 한 곳. */

.opt-iii-2-C .cmp-fig{margin-top:24px}
.opt-iii-2-C .cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.opt-iii-2-C .card{min-width:0;padding:20px 20px 18px;border:1px solid var(--line-strong);border-radius:var(--r-sheet);background:var(--raised)}
.opt-iii-2-C .card-head{display:flex;align-items:center;gap:14px}
.opt-iii-2-C .pg-box{display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;border-radius:14px;background:var(--sub)}
.opt-iii-2-C .pg{width:40px;height:40px;fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.opt-iii-2-C .pg .w{fill:var(--sub)}
.opt-iii-2-C .card-t{flex:1 1 auto;min-width:0;font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.03em}

/* 속성 세 줄: 굵은 값 + 회색 꼬리 */
.opt-iii-2-C .attrs{margin-top:16px;border-top:2px solid var(--text)}
.opt-iii-2-C .attrs>div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.opt-iii-2-C .attrs dt{font-size:13px;font-weight:600;color:var(--text2)}
.opt-iii-2-C .attrs dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.opt-iii-2-C .attrs .v{font-weight:600}
.opt-iii-2-C .attrs .t{font-size:13px;color:var(--text2)}

/* 4점 단계선 — 두 카드의 머리·속성 높이가 같아 단계선도 같은 높이에 온다 */
.opt-iii-2-C .dots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 8px;margin-top:18px}
.opt-iii-2-C .dots li{position:relative;min-width:0}
.opt-iii-2-C .dots li:not(:last-child)::after{content:"";position:absolute;left:28px;right:-4px;top:11px;height:2px;background:var(--text)}
.opt-iii-2-C .d-n{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-pill);border:1.5px solid var(--text);background:var(--raised);color:var(--text);font-size:12px;font-weight:700}
.opt-iii-2-C .d-plan .d-n{border-style:dashed}
.opt-iii-2-C .d-now .d-n{background:var(--text);color:var(--on-dark)}
.opt-iii-2-C .d-user .d-n{background:var(--sub);border-color:var(--sub)}
.opt-iii-2-C .d-t{margin-top:8px;font-size:15px;font-weight:700;line-height:1.3}
.opt-iii-2-C .d-s{margin-top:1px;font-size:12px;line-height:1.35;color:var(--text2)}

/* 담당 띠(점 아래)와 범례 칩 */
.opt-iii-2-C .band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 8px;margin-top:10px}
.opt-iii-2-C .band li,.opt-iii-2-C .lg{display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:0;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--raised);color:var(--on-sub);font-size:12px;font-weight:600;white-space:nowrap}
.opt-iii-2-C .band li{padding:0 4px}
.opt-iii-2-C .band .b-now{grid-column:span 2}
.opt-iii-2-C .band .b-plan,.opt-iii-2-C .lg-plan{border:1px dashed rgba(24,24,27,.55)}
.opt-iii-2-C .band .b-user,.opt-iii-2-C .lg-user{background:var(--sub);border-color:transparent}

/* 두 카드에 같이 걸리는 가격 띠 — 위 괄호가 두 카드 가운데를 묶는다 */
.opt-iii-2-C .same{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 32px;margin-top:24px;padding:14px 22px;border-radius:var(--r-box);background:var(--sub)}
.opt-iii-2-C .same::before{content:"";position:absolute;left:25%;right:25%;top:-24px;height:15px;border:1.5px solid rgba(24,24,27,.3);border-top:0;border-radius:0 0 10px 10px}
.opt-iii-2-C .same::after{content:"";position:absolute;left:50%;top:-9px;width:1.5px;height:9px;margin-left:-.75px;background:rgba(24,24,27,.3)}
.opt-iii-2-C .same-t{flex:none;padding-left:10px;border-left:3px solid var(--action);font-weight:700;line-height:1.3}
.opt-iii-2-C .same-p{flex:none;display:grid;grid-template-columns:repeat(3,max-content);gap:8px 28px}
.opt-iii-2-C .same-p dt{font-size:12px;font-weight:600;color:var(--text2)}
.opt-iii-2-C .same-p dd{font-size:14px;font-weight:600}
.opt-iii-2-C .same-p dd .n{font-size:22px;font-weight:700;margin-right:1px}
.opt-iii-2-C .sp-muted dd{color:var(--text2)}
.opt-iii-2-C .sp-muted dd .n{font-weight:600}
.opt-iii-2-C .same-tail{flex:none;margin-left:auto;font-size:13px;color:var(--text2)}

.opt-iii-2-C .legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:14px}
.opt-iii-2-C .legend li{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text2)}
.opt-iii-2-C .legend .lg{flex:none}

@media (max-width:719px){
  .opt-iii-2-C .cmp{grid-template-columns:minmax(0,1fr);gap:12px}
  .opt-iii-2-C .card{padding:16px}
  .opt-iii-2-C .pg-box{width:48px;height:48px;border-radius:12px}
  .opt-iii-2-C .pg{width:34px;height:34px}
  .opt-iii-2-C .card-t{font-size:17px}
  .opt-iii-2-C .attrs>div{grid-template-columns:36px minmax(0,1fr)}
  .opt-iii-2-C .dots,.opt-iii-2-C .band{gap:0 6px}
  .opt-iii-2-C .dots li:not(:last-child)::after{right:-2px}
  .opt-iii-2-C .d-t{font-size:14px}
  .opt-iii-2-C .same{margin-top:12px;padding:14px 16px;gap:10px 20px}
  .opt-iii-2-C .same::before,.opt-iii-2-C .same::after{display:none}
  .opt-iii-2-C .same-p{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px 20px}
  .opt-iii-2-C .same-tail{margin-left:0;flex-basis:100%}
  .opt-iii-2-C .legend{flex-direction:column;align-items:flex-start}
}

@media print{
  .opt-iii-2-C .cmp-fig{margin-top:11pt;break-inside:avoid}
  .opt-iii-2-C .cmp{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10pt!important}
  .opt-iii-2-C .card{padding:12pt 9pt 11pt!important;border-radius:9pt}
  .opt-iii-2-C .card-head{gap:8pt}
  .opt-iii-2-C .pg-box{width:40pt!important;height:40pt!important;border-radius:9pt!important}
  .opt-iii-2-C .pg{width:29pt!important;height:29pt!important}
  .opt-iii-2-C .card-t{font-size:14pt!important}
  .opt-iii-2-C .attrs{margin-top:10pt;border-top-width:1.5pt}
  .opt-iii-2-C .attrs>div{grid-template-columns:20pt minmax(0,1fr)!important;gap:5pt;padding:5pt 0}
  .opt-iii-2-C .attrs dt{font-size:8.5pt}
  .opt-iii-2-C .attrs dd{gap:1pt 5pt}
  .opt-iii-2-C .attrs .v{font-size:10pt}
  .opt-iii-2-C .attrs .t{font-size:8.5pt}
  .opt-iii-2-C .dots{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0 4pt!important;margin-top:13pt}
  .opt-iii-2-C .dots li:not(:last-child)::after{left:19pt!important;right:-2pt!important;top:7.75pt;height:1.5pt}
  .opt-iii-2-C .d-n{width:17pt;height:17pt;border-width:1.2pt;font-size:8.5pt}
  .opt-iii-2-C .d-t{margin-top:5pt;font-size:10.5pt!important}
  .opt-iii-2-C .d-s{font-size:8pt}
  .opt-iii-2-C .band{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0 4pt!important;margin-top:8pt}
  .opt-iii-2-C .band li,.opt-iii-2-C .lg{min-height:14pt;padding:0 3pt;font-size:8pt}
  .opt-iii-2-C .lg{padding:0 5pt}
  .opt-iii-2-C .same{margin-top:13pt!important;padding:6pt 12pt!important;gap:3pt 16pt!important;border-radius:7pt}
  .opt-iii-2-C .same::before{display:block!important;top:-13pt;height:8pt;border-width:1pt;border-top:0;border-radius:0 0 6pt 6pt}
  .opt-iii-2-C .same::after{display:block!important;top:-5pt;height:5pt;width:1pt;margin-left:-.5pt}
  .opt-iii-2-C .same-t{padding-left:6pt;border-left-width:2.5pt;font-size:9.5pt}
  .opt-iii-2-C .same-p{flex:none!important;display:grid!important;grid-template-columns:repeat(3,max-content)!important;gap:3pt 16pt}
  .opt-iii-2-C .same-p dt{font-size:8pt}
  .opt-iii-2-C .same-p dd{font-size:9.5pt}
  .opt-iii-2-C .same-p dd .n{font-size:14pt}
  .opt-iii-2-C .same-tail{margin-left:auto!important;flex-basis:auto!important;font-size:8.5pt}
  .opt-iii-2-C .legend{display:grid!important;grid-template-columns:repeat(3,max-content)!important;justify-content:start;align-items:center!important;gap:3pt 10pt;margin-top:7pt}
  .opt-iii-2-C .legend li{display:block!important;white-space:nowrap;font-size:8pt}
  .opt-iii-2-C .legend .lg{display:inline-block!important;min-height:0!important;margin-right:4pt;line-height:12pt;vertical-align:middle}
  .opt-iii-2-C .figcap{margin-top:6pt}
  .opt-iii-2-C>.note{margin-top:3pt}
}

/* ── 고른 안: iii-3 C (로이 9/28 선택) ── */
/* Ⅱ-3 C안 「세 가지 약속」 — 리드 문장을 아이콘 타일 셋(모델 · 고객사 키·연동 설정 · 공식 API 단가)으로 바꾸고,
   공급 조건은 한 줄로 줄인다. 흐름도(#api-demo)와 캡션은 원본 그대로.
   주황은 「20% 할인」 딱지 한 곳 + 흐름도의 최종 경로. 아이콘 선은 전역 .ic 를 쓴다. */

.opt-iii-3-C .vows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.opt-iii-3-C .vows li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;min-width:0;padding:16px 18px;border-radius:var(--r-box);background:var(--sub)}
.opt-iii-3-C .vows .ic{width:30px;height:30px}
.opt-iii-3-C .vw-t{font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.02em}
.opt-iii-3-C .vw-d{margin-top:4px;font-size:13px;line-height:1.45;color:var(--text2)}

/* 공급 조건 한 줄 */
.opt-iii-3-C .deal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:18px;padding:12px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.opt-iii-3-C .deal>p{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.opt-iii-3-C .deal-lab{font-size:13px;font-weight:600;color:var(--text2)}
.opt-iii-3-C .deal-v{font-size:14px;font-weight:600}
.opt-iii-3-C .deal-from .deal-v{color:var(--text2)}
.opt-iii-3-C .deal-from .n{font-size:20px;font-weight:600}
.opt-iii-3-C .deal-to .n{font-size:30px;font-weight:700;line-height:1.1}
.opt-iii-3-C .deal-arrow{position:relative;flex:none;width:36px;height:2px;background:var(--text)}
.opt-iii-3-C .deal-arrow::after{content:"";position:absolute;right:-2px;top:-5px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--text)}
.opt-iii-3-C .deal-vat{font-size:13px;color:var(--text2)}
.opt-iii-3-C .deal-badge{margin-left:auto;align-items:center!important;min-height:30px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid var(--action);background:#FFF4EC;font-size:14px;font-weight:700}

@media (max-width:719px){
  .opt-iii-3-C .vows{grid-template-columns:minmax(0,1fr);gap:8px}
  .opt-iii-3-C .vows li{padding:14px 16px}
  .opt-iii-3-C .deal{gap:8px 12px}
  .opt-iii-3-C .deal-arrow{width:24px}
  .opt-iii-3-C .deal-badge{margin-left:0}
}

@media print{
  .opt-iii-3-C .vows{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8pt!important;break-inside:avoid}
  .opt-iii-3-C .vows li{grid-template-columns:18pt minmax(0,1fr)!important;gap:7pt;padding:8pt!important}
  .opt-iii-3-C .vows .ic{width:18pt;height:18pt}
  .opt-iii-3-C .vw-t{font-size:10.5pt}
  .opt-iii-3-C .vw-d{margin-top:2pt;font-size:8.5pt;line-height:1.4}
  .opt-iii-3-C .deal{margin-top:9pt;padding:6pt 0;gap:3pt 10pt!important;break-inside:avoid}
  .opt-iii-3-C .deal>p{gap:4pt}
  .opt-iii-3-C .deal-lab,.opt-iii-3-C .deal-vat{font-size:8.5pt}
  .opt-iii-3-C .deal-v{font-size:9.5pt}
  .opt-iii-3-C .deal-from .n{font-size:14pt}
  .opt-iii-3-C .deal-to .n{font-size:20pt}
  .opt-iii-3-C .deal-arrow{width:22pt!important;height:1.2pt}
  .opt-iii-3-C .deal-arrow::after{right:-1pt;top:-2.9pt;border-width:3.5pt 0 3.5pt 5pt}
  .opt-iii-3-C .deal-badge{margin-left:auto!important;min-height:15pt;padding:0 7pt;border-width:1pt;font-size:9pt}
}

/* ── 고른 안: iii-4 B (로이 9/28 선택) ── */
/* Ⅱ-4 B안 — 30/70 막대 + 표 5 를 가격 셋으로 묶음
   막대: 판매가 100% = 판매수수료 30%(연주황 칸·주황 테) + 스피커블 정산 70%(먹색 칸). 칸 안 글자로도 갈린다.
   가격 묶음: 판매가 · 상품(세로줄로 묶음) · 판매수수료 · 스피커블 정산. 금액은 가격마다 한 번.
   주황은 이 쪽에서 판매수수료 칸(막대 + 머리 견본) 한 종류. 그림 3·.day1 은 원본 그대로라 여기서 건드리지 않는다. */

.opt-iii-4-B .split{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:0 12px;padding:0 12px;margin-bottom:14px}
.opt-iii-4-B .split-lab{font-size:14px;font-weight:700;white-space:nowrap}
.opt-iii-4-B .split-bar{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);font-size:13px;font-weight:600;line-height:1.2}
.opt-iii-4-B .split-f,.opt-iii-4-B .split-s{display:block;min-width:0;padding:7px 12px;white-space:nowrap;overflow:hidden}
.opt-iii-4-B .split-f{background:#FFF4EC;border:1.5px solid var(--action);border-right:0;border-radius:6px 0 0 6px;color:var(--text)}
.opt-iii-4-B .split-s{border:1.5px solid var(--text);background:var(--text);color:var(--on-dark);border-radius:0 6px 6px 0}

/* 머리 줄 + 가격 묶음 — 같은 네 칸 격자 */
.opt-iii-4-B .tier-h,.opt-iii-4-B .tier{display:grid;grid-template-columns:120px minmax(0,1fr) 112px 120px;gap:0 12px;padding-left:12px;padding-right:12px}
.opt-iii-4-B .tier-h{padding-top:8px;padding-bottom:8px;background:var(--sub);border-top:2px solid var(--text);border-bottom:1px solid var(--line-strong);font-size:13px;font-weight:600;color:var(--on-sub);line-height:1.35}
.opt-iii-4-B .th-r{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.opt-iii-4-B .sw{display:inline-block;flex:none;width:10px;height:10px;border-radius:2px}
.opt-iii-4-B .sw-f{background:#FFF4EC;border:1.5px solid var(--action)}
.opt-iii-4-B .sw-s{background:var(--text)}
.opt-iii-4-B .tiers{border-bottom:1px solid var(--line-strong)}
.opt-iii-4-B .tier{align-items:baseline;padding-top:12px;padding-bottom:12px;border-top:1px solid var(--line)}
.opt-iii-4-B .tier:first-child{border-top:0}
.opt-iii-4-B .t-price .n{display:block;font-size:22px;font-weight:700;line-height:1.1}
.opt-iii-4-B .t-sub{display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--text2)}
.opt-iii-4-B .t-names{min-width:0;padding-left:12px;border-left:2px solid var(--text)}
.opt-iii-4-B .t-names li{font-size:14px;font-weight:600;line-height:1.55}
.opt-iii-4-B .t-amt{grid-column:3/5;display:grid;grid-template-columns:112px 120px;gap:0 12px}
.opt-iii-4-B .t-amt>div{text-align:right}
.opt-iii-4-B .t-amt dt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.opt-iii-4-B .t-amt dd{font-size:15px;font-weight:600;line-height:1.5}

@media (max-width:719px){
  .opt-iii-4-B .split{grid-template-columns:minmax(0,1fr);gap:6px;padding:0}
  .opt-iii-4-B .split-bar{font-size:12px}
  .opt-iii-4-B .split-f,.opt-iii-4-B .split-s{padding:6px 8px}
  .opt-iii-4-B .tier-h{display:none}
  .opt-iii-4-B .tiers{border-top:2px solid var(--text)}
  .opt-iii-4-B .tier{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0}
  .opt-iii-4-B .t-price{display:flex;align-items:baseline;gap:8px}
  .opt-iii-4-B .t-price .n{display:inline}
  .opt-iii-4-B .t-sub{display:inline;margin-top:0}
  .opt-iii-4-B .t-names li{font-size:14px}
  .opt-iii-4-B .t-amt{grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  .opt-iii-4-B .t-amt>div{text-align:left}
  .opt-iii-4-B .t-amt dt{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;font-size:12px;font-weight:600;color:var(--text2)}
}

@media print{
  .opt-iii-4-B .split{grid-template-columns:62pt minmax(0,1fr)!important;gap:0 8pt;padding:0 6pt!important;margin-bottom:6pt;break-inside:avoid}
  .opt-iii-4-B .split-lab{font-size:9pt}
  .opt-iii-4-B .split-bar{grid-template-columns:minmax(0,3fr) minmax(0,7fr)!important;font-size:8.5pt}
  .opt-iii-4-B .split-f,.opt-iii-4-B .split-s{padding:2pt 7pt!important;border-width:1pt}
  .opt-iii-4-B .split-f{border-right:0;border-radius:3pt 0 0 3pt}
  .opt-iii-4-B .split-s{border-radius:0 3pt 3pt 0}
  .opt-iii-4-B .tier-h,.opt-iii-4-B .tier{display:grid!important;grid-template-columns:62pt minmax(0,1fr) 58pt 64pt!important;gap:0 8pt;padding-left:6pt!important;padding-right:6pt!important}
  .opt-iii-4-B .tier-h{padding-top:3pt;padding-bottom:3pt;font-size:8.5pt}
  .opt-iii-4-B .th-r{gap:3pt}
  .opt-iii-4-B .sw{width:7pt;height:7pt;border-radius:1pt}
  .opt-iii-4-B .sw-f{border-width:1pt}
  .opt-iii-4-B .tiers{border-top:0!important;break-inside:avoid}
  .opt-iii-4-B .tier{padding-top:4pt!important;padding-bottom:4pt!important}
  .opt-iii-4-B .t-price{display:block!important}
  .opt-iii-4-B .t-price .n{display:block!important;font-size:13pt}
  .opt-iii-4-B .t-sub{display:block!important;margin-top:1pt!important;font-size:8pt}
  .opt-iii-4-B .t-names{padding-left:7pt}
  .opt-iii-4-B .t-names li{font-size:9pt;line-height:1.32}
  .opt-iii-4-B .t-amt{grid-column:3/5!important;grid-template-columns:58pt 64pt!important;gap:0 8pt}
  .opt-iii-4-B .t-amt>div{text-align:right!important}
  .opt-iii-4-B .t-amt dt{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
  .opt-iii-4-B .t-amt dd{font-size:9.5pt;line-height:1.32}
}
.opt-iii-2-C .band .b-user{grid-column:4}   /* 가운데 「현재 스피커블 처리」 칸을 뺀 뒤에도 이용자는 4단계 밑에(로이 9/28) */

/* Ⅱ-2 체험 링크(로이 9/28 「이 제공 방식은 체험 링크도 있으면 좋겠어」) — 웹은 버튼, 인쇄는 주소 + QR */
.try{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;margin-top:20px;padding:16px 20px;border:1px solid var(--line-strong);border-radius:var(--r-box)}
.try-t{font-weight:700}
.try-d{margin-top:2px;font-size:13px;color:var(--text2)}
.try-btn{margin-top:10px}
.try-url{margin-top:8px;font:600 12.5px var(--font-num);color:var(--text2)}
.try .qr{width:84px;height:84px}
@media (max-width:719px){.try{grid-template-columns:minmax(0,1fr)}.try .qr{display:none}}
@media print{.try{grid-template-columns:minmax(0,1fr) auto!important;margin-top:10pt;padding:8pt 11pt;gap:8pt 14pt;break-inside:avoid}.try-t{font-size:10pt}.try-d,.try-url{font-size:8.5pt}.try-url{margin-top:3pt}.try .qr{display:block!important;width:50pt;height:50pt}}
.try .qr{margin-top:0}