:root{
  --ground:#F4F6FA; --surface:#FFFFFF; --mist:#E6EBF3; --ink:#111C2E; --muted:#4A5870; --line:#C8D2E0;
  --brand:#13366D; --brand-soft:#E3EAF5; --on-brand:#FFFFFF;
  --hero-bg:#13366D; --hero-ink:#FFFFFF; --hero-muted:#CBD8EC; --hero-panel:#1E4788;
  --leaf:#4DBD38; --sun:#4DBD38; --focus:#13366D;
  --warn:#9A3412; --warn-soft:#FCEBDD;
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-partner="ga"]{
  --ground:#F3F7F7; --mist:#E3EDED; --ink:#12201F; --muted:#48595A; --line:#C5D4D4;
  --brand:#0B6464; --brand-soft:#DDEFEF; --hero-bg:#0A4B4B; --hero-muted:#CBE3E3; --hero-panel:#116060;
  --leaf:#F2B544; --sun:#F2B544; --focus:#0B6464;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D1320; --surface:#151D2D; --mist:#1C2740; --ink:#E8EDF6; --muted:#A8B4C9; --line:#33415C;
    --brand:#9DBBF2; --brand-soft:#1A2B4D; --on-brand:#0D1320; --hero-bg:#0F2750; --hero-panel:#173564; --focus:#FFFFFF;
    --warn:#F6B48A; --warn-soft:#3A2416;
  }
  :root:not([data-theme="light"])[data-partner="ga"]{
    --ground:#0C1515; --surface:#141F1F; --mist:#1B2B2B; --ink:#E7F0F0; --muted:#A7BABA; --line:#324646;
    --brand:#6FD0D0; --brand-soft:#123535; --hero-bg:#083A3A; --hero-panel:#0E4C4C;
  }
  :root:not([data-theme="light"]) .brand img{background:#FFFFFF; padding:4px 10px; border-radius:8px}
}
:root[data-theme="dark"]{
  --ground:#0D1320; --surface:#151D2D; --mist:#1C2740; --ink:#E8EDF6; --muted:#A8B4C9; --line:#33415C;
  --brand:#9DBBF2; --brand-soft:#1A2B4D; --on-brand:#0D1320; --hero-bg:#0F2750; --hero-panel:#173564; --focus:#FFFFFF;
  --warn:#F6B48A; --warn-soft:#3A2416;
}
:root[data-theme="dark"][data-partner="ga"]{
  --ground:#0C1515; --surface:#141F1F; --mist:#1B2B2B; --ink:#E7F0F0; --muted:#A7BABA; --line:#324646;
  --brand:#6FD0D0; --brand-soft:#123535; --hero-bg:#083A3A; --hero-panel:#0E4C4C;
}
:root[data-theme="dark"] .brand img{background:#FFFFFF; padding:4px 10px; border-radius:8px}
:root.big{font-size:118%}

*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none !important}
html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.7; word-break:keep-all; overflow-wrap:anywhere}
h1,h2,h3{line-height:1.3; margin:0; font-weight:700}
p{margin:0}
button,input,select{font:inherit; color:inherit}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.wrap{max-width:1140px; margin:0 auto; padding:0 20px}
.ico{display:inline-flex; flex:none}
.ico svg{width:100%; height:100%}

/* 시연용 설정 줄 */
.demobar{background:#1B1F24; color:#EDF1F5; font-size:.8125rem}
.demobar .wrap{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding-top:8px; padding-bottom:8px}
.demobar-note{flex:1 1 220px}
.seg{display:flex; flex-wrap:wrap; gap:4px}
.seg button,.demobar select{min-height:40px; padding:6px 12px; border:1px solid #5C6875; background:transparent; color:#EDF1F5; border-radius:6px; cursor:pointer}
.demobar select option{color:#111C2E}
.seg button[aria-pressed="true"]{background:#EDF1F5; color:#1B1F24; border-color:#EDF1F5; font-weight:700}

/* 머리 */
.top{background:var(--surface); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand img{height:42px; width:auto; max-width:220px; display:block}
.wordmark{font-weight:700; font-size:1.25rem; color:var(--brand); letter-spacing:-.01em; white-space:nowrap}
.unit{padding-left:12px; border-left:1px solid var(--line); font-weight:600; font-size:.9375rem}
.top-actions{display:flex; gap:8px; align-items:center}
.btn{white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:10px 24px; border-radius:10px; border:2px solid var(--brand); background:var(--brand); color:var(--on-brand); font-weight:700; text-decoration:none; cursor:pointer}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-ghost{background:transparent; color:var(--brand)}
.btn-quiet{border-color:var(--line); background:transparent; color:var(--ink); font-weight:500}
.btn-sm{min-height:44px; padding:6px 14px; font-size:.9375rem}

/* 첫 화면 */
.hero{background:var(--hero-bg); color:var(--hero-ink); position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; right:-120px; top:-140px; width:420px; height:420px; border-radius:50%; border:70px solid var(--hero-panel); opacity:.7}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:48px; align-items:start; padding-top:48px; padding-bottom:72px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:var(--hero-panel); font-size:.875rem; font-weight:600; margin-bottom:18px}
.badge .ico{width:18px; height:18px; color:var(--sun)}
.hero h1{font-size:clamp(1.9rem,4vw,2.9rem); letter-spacing:-.02em}
.hero-sub{margin-top:18px; font-size:1.125rem; color:var(--hero-muted); max-width:32em}
.facts{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.facts li{display:flex; gap:8px; align-items:center; padding:8px 14px; border-radius:999px; border:1px solid var(--hero-panel); background:var(--hero-panel); font-weight:500; font-size:.9375rem}
.facts .ico{width:18px; height:18px; color:var(--leaf)}

/* 예시 화면 */
.preview{margin-top:32px; background:var(--surface); color:var(--ink); border-radius:16px; padding:18px 20px; max-width:480px; box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.preview-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.preview-head b{font-size:.9375rem}
.tag{white-space:nowrap; display:inline-block; padding:2px 10px; border-radius:999px; background:var(--mist); color:var(--muted); font-size:.75rem; font-weight:600}
.prow{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--mist)}
.prow .ico{width:40px; height:40px; padding:9px; border-radius:12px; background:var(--brand-soft); color:var(--brand)}
.prow b{display:block; font-size:.9375rem}
.bar{height:8px; border-radius:99px; background:var(--mist); margin-top:6px; overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:var(--brand)}
.pill{padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:700; white-space:nowrap; background:var(--brand-soft); color:var(--brand)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.life{display:grid; gap:14px; padding-top:6px}
.life-track{display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; align-items:center; font-size:.875rem; font-weight:600}
.life-bar{position:relative; height:26px; border-radius:8px; background:var(--mist)}
.life-bar i{position:absolute; top:0; bottom:0; border-radius:8px}
.life-bar .fam{left:0; width:58%; background:var(--brand)}
.life-bar .ret{left:58%; right:0; background:var(--sun)}
.life-axis{display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; font-size:.75rem; color:var(--muted)}
.life-axis div{display:flex; justify-content:space-between}
.bubbles{display:grid; gap:10px; padding-top:6px}
.bubble{display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:14px; background:var(--brand-soft); font-weight:600}
.bubble .ico{width:28px; height:28px; color:var(--brand)}

/* 신청서 */
.sheet{background:var(--surface); color:var(--ink); border-radius:18px; box-shadow:0 24px 50px -24px rgba(0,0,0,.65)}
.sheet-head{padding:20px 22px 0}
.sheet-head h2{font-size:1.25rem}
.sheet-meta{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:4px; font-size:.875rem; color:var(--muted)}
.progress{height:6px; border-radius:99px; background:var(--mist); margin-top:12px; overflow:hidden}
.progress i{display:block; height:100%; width:33%; background:var(--leaf); border-radius:99px; transition:width .25s ease}
.panel{padding:18px 22px 24px}
fieldset{border:0; margin:0 0 18px; padding:0}
legend{padding:0; margin-bottom:8px; font-weight:700}
.hint{font-size:.875rem; color:var(--muted)}
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.tiles label{position:relative; cursor:pointer}
.tiles input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.tiles label > span{display:flex; align-items:center; gap:10px; min-height:56px; padding:10px 12px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface); font-weight:500; line-height:1.35}
.tiles .ico{width:26px; height:26px; color:var(--muted)}
.tiles input:checked + span{border-color:var(--brand); background:var(--brand-soft); font-weight:700}
.tiles input:checked + span .ico{color:var(--brand)}
.tiles input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.tiles label:last-child:nth-child(odd){grid-column:1 / -1}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{position:relative; cursor:pointer}
.chips input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.chips span{display:inline-flex; align-items:center; min-height:46px; padding:6px 16px; border:1.5px solid var(--line); border-radius:999px; background:var(--surface)}
.chips input:checked + span{border-color:var(--brand); background:var(--brand-soft); font-weight:700}
.chips input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.field{margin-bottom:16px}
.field > label{display:block; font-weight:700; margin-bottom:6px}
.field input[type="text"],.field input[type="tel"],.field select{width:100%; min-height:50px; padding:8px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface)}
.inline{display:flex; gap:8px}
.inline > input,.inline > select{flex:1; min-width:0}
.inline > .btn{flex:none; padding-left:14px; padding-right:14px}
.note{margin-top:6px; font-size:.875rem; color:var(--muted)}
.note-ok{color:var(--brand); font-weight:700}
.demo-code{margin-top:6px; padding:8px 10px; border:1px dashed var(--line); border-radius:8px; font-size:.875rem}
.err{margin:0 0 14px; padding:10px 12px; background:var(--warn-soft); color:var(--warn); border-radius:10px; font-weight:500}
.err:empty{display:none}
.actions{display:flex; gap:10px; justify-content:space-between; margin-top:8px}
.actions .btn{flex:1}
.actions .btn-quiet{flex:0 0 auto}
.alt{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--mist); font-size:.875rem; color:var(--muted)}
.alt b{color:var(--ink)}
.consent{border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:var(--surface)}
.consent > label,.consent > .notice-title{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; font-weight:500}
.consent > label{cursor:pointer}
.consent input{width:22px; height:22px; margin-top:.2em; accent-color:var(--brand); flex:none}
.consent details{border-top:1px solid var(--line); padding:0 14px}
.consent summary{min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:.875rem; color:var(--muted)}
.consent table{width:100%; border-collapse:collapse; font-size:.875rem; margin-bottom:10px}
.consent th,.consent td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
.consent th{width:32%; background:var(--mist); font-weight:700}
.consent .refuse{font-size:.875rem; color:var(--muted); margin-bottom:12px}
.done-mark{width:56px; height:56px; padding:14px; border-radius:50%; background:var(--brand); color:var(--on-brand); margin-bottom:12px}
.done h3{font-size:1.375rem; margin-bottom:8px}
.next{list-style:none; margin:18px 0; padding:0; display:grid; gap:0}
.next li{position:relative; padding:0 0 16px 30px; border-left:2px solid var(--line); margin-left:8px}
.next li:last-child{border-left-color:transparent; padding-bottom:0}
.next li::before{content:""; position:absolute; left:-8px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--brand)}
.next b{display:block}
.next span{color:var(--muted); font-size:.9375rem}
.callnum{display:block; margin-top:4px; padding:10px 12px; border-radius:10px; background:var(--brand-soft); color:var(--ink); font-weight:700; font-size:1.125rem}
.payload summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-size:.875rem; color:var(--muted)}
.payload pre{margin:0; padding:12px; background:var(--mist); border-radius:8px; font-size:.75rem; line-height:1.5; overflow-x:auto; white-space:pre}

/* 본문 구역 */
.band{padding:72px 0}
.band-alt{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band h2{font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.01em; margin-bottom:10px}
.band .lead{color:var(--muted); max-width:40em; margin-bottom:32px}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px}
.band-alt .card{background:var(--ground)}
.card .ico{width:56px; height:56px; padding:13px; border-radius:16px; background:var(--brand-soft); color:var(--brand); margin-bottom:16px}
.card h3{font-size:1.1875rem; margin-bottom:8px}
.card p{color:var(--muted)}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; counter-reset:s}
.steps li{position:relative; counter-increment:s; padding:0 24px 0 0}
.steps li::after{content:""; position:absolute; top:36px; left:84px; right:12px; border-top:2px dashed var(--line)}
.steps li:last-child::after{display:none}
.step-ico{position:relative; width:72px; height:72px; padding:18px; border-radius:50%; background:var(--brand); color:var(--on-brand); margin-bottom:18px}
.step-ico::after{content:counter(s); position:absolute; right:-4px; top:-4px; width:26px; height:26px; border-radius:50%; background:var(--sun); color:#0D1E3D; font-weight:700; font-size:.875rem; display:flex; align-items:center; justify-content:center}
.steps h3{font-size:1.1875rem; margin-bottom:6px}
.steps p{color:var(--muted)}
.place{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; align-items:stretch}
.place-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; display:grid; gap:18px}
.fp{display:flex; gap:16px; align-items:center}
.avatar{width:72px; height:72px; border-radius:50%; background:var(--brand-soft); color:var(--brand); padding:14px; flex:none}
.fp b{display:block; font-size:1.125rem}
.fp span{color:var(--muted); font-size:.9375rem}
.kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; margin:0}
.kv dt{color:var(--muted); font-size:.9375rem; display:flex; gap:8px; align-items:center}
.kv dt .ico{width:18px; height:18px; color:var(--brand)}
.kv dd{margin:0; font-weight:600}
.promise{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.promise li{display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px}
.promise .ico{width:28px; height:28px; color:var(--brand); margin-top:2px}
.promise b{display:block}
.promise span{color:var(--muted); font-size:.9375rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{min-height:60px; display:flex; align-items:center; gap:12px; cursor:pointer; font-weight:700}
.faq summary::before{content:"Q"; flex:none; width:28px; height:28px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:.875rem}
.faq details p{padding:0 0 18px 40px; color:var(--muted); max-width:44em}
.cta{background:var(--hero-bg); color:var(--hero-ink); padding:56px 0}
.cta .wrap{display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; justify-content:space-between}
.cta h2{font-size:clamp(1.4rem,3vw,2rem)}
.cta p{color:var(--hero-muted); margin-top:6px}
.cta .btn{background:var(--sun); border-color:var(--sun); color:#0D1E3D}
.cta .btn:focus-visible{outline-color:#FFFFFF}

/* 하단 */
footer{background:var(--mist); font-size:.875rem; color:var(--muted)}
footer .wrap{padding-top:32px; padding-bottom:40px}
footer p{margin-bottom:8px; max-width:64em}
.foot-id{color:var(--ink); font-weight:700}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line)}
.foot-links button{min-height:44px; padding:6px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); cursor:pointer}
.foot-links .deal-open{border-color:var(--brand); color:var(--brand); font-weight:700}
.policy{margin-top:16px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:8px; color:var(--ink)}
.policy h3{font-size:1rem; margin-bottom:8px}
.policy ul{margin:0; padding-left:1.2em}

/* 모바일 고정 신청 버튼 */
.sticky{display:none}

/* 계약조건 협의 화면 */
.deal{position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; background:#12233A; color:#EEF3F7;
  --d-muted:#B4C3D1; --d-line:#3A506A; --d-teal:#7DD8D0; --d-amber:#F3B95F; --d-panel:#1B3150;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.deal-top{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--d-line); font-size:.875rem; color:var(--d-muted)}
.deal-btn{min-height:44px; min-width:44px; padding:6px 16px; border:1px solid var(--d-line); border-radius:8px; background:transparent; color:#EEF3F7; cursor:pointer}
.deal-btn:focus-visible{outline-color:var(--d-teal)}
.deal-btn[disabled]{opacity:.35; cursor:not-allowed}
.deal-stage{flex:1; overflow-y:auto; display:flex}
.slide{display:none; width:100%; max-width:1080px; margin:auto; padding:clamp(20px,5vw,56px) clamp(20px,5vw,48px); flex-direction:column; gap:clamp(18px,3vw,32px); font-size:clamp(1rem,1.55vw,1.3rem)}
.slide.on{display:flex}
.slide h2{font-size:clamp(1.6rem,4.4vw,2.9rem); color:#FFFFFF}
.slide .lead{font-size:clamp(1rem,2vw,1.3rem); color:var(--d-muted); max-width:36em}
.deal-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid var(--d-line)}
.deal-count{font-size:.875rem; color:var(--d-muted)}
.cover h2{font-size:clamp(2rem,6vw,4rem)}
.cover .who{font-size:clamp(1.1rem,2.4vw,1.5rem); color:var(--d-teal)}
.figs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.fig{background:var(--d-panel); border-radius:12px; padding:22px}
.fig b{display:block; font-size:clamp(1.8rem,5vw,3.2rem); line-height:1.1; color:var(--d-teal)}
.fig span{color:var(--d-muted)}
.open-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.open-list li{padding:8px 14px; border:1px dashed var(--d-amber); border-radius:999px; color:var(--d-amber)}
.flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px}
.flow li{position:relative; background:var(--d-panel); border-radius:10px; padding:14px 12px; border-top:4px solid var(--d-teal)}
.flow li.gap{border-top-color:var(--d-amber)}
.flow .own{display:inline-block; margin-bottom:8px; padding:2px 8px; border-radius:999px; font-size:.75rem; font-weight:700; background:var(--d-teal); color:#12233A}
.flow li.gap .own{background:var(--d-amber)}
.flow strong{display:block; line-height:1.4}
.flow small{display:block; margin-top:6px; color:var(--d-muted); font-size:.85em; line-height:1.5}
.legend{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.85em; color:var(--d-muted)}
.legend i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.tl{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0}
.tl li{position:relative; padding:22px 14px 0 0; border-top:3px solid var(--d-teal)}
.tl li::before{content:""; position:absolute; top:-9px; left:0; width:15px; height:15px; border-radius:50%; background:#12233A; border:3px solid var(--d-teal)}
.tl li.k::before{background:var(--d-amber); border-color:var(--d-amber)}
.tl b{display:block; font-size:clamp(1.05rem,2.2vw,1.5rem); color:#FFFFFF; line-height:1.3}
.tl span{display:block; margin-top:6px; color:var(--d-muted); font-size:.9em}
.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.col{background:var(--d-panel); border-radius:12px; padding:20px 22px}
.col h3{font-size:1.05em; margin-bottom:10px}
.col.yes h3{color:var(--d-teal)}
.col.no h3{color:var(--d-amber)}
.col ul{margin:0; padding-left:1.15em}
.col li{margin-bottom:6px}
.cap{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:32px; align-items:center}
.cells{display:grid; grid-template-columns:repeat(10,1fr); gap:4px}
.cells i{aspect-ratio:1; border-radius:3px; background:var(--d-line)}
.cells i.r{background:var(--d-amber)}
.cap-text p{margin-bottom:12px}
.cap-text b{color:var(--d-amber)}
.funnel{display:grid; gap:8px}
.funnel div{padding:12px 16px; border-radius:8px; background:var(--d-panel); border-left:6px solid var(--d-teal)}
.funnel div:nth-child(1){width:100%}
.funnel div:nth-child(2){width:86%}
.funnel div:nth-child(3){width:72%}
.funnel div:nth-child(4){width:58%}
.funnel div:nth-child(5){width:44%; border-left-color:var(--d-amber)}
.points{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.points li{background:var(--d-panel); border-radius:12px; padding:18px 22px}
.points b{display:block; color:var(--d-teal); margin-bottom:4px}
.asks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.asks li{display:flex; gap:12px; align-items:flex-start; background:var(--d-panel); border-radius:10px; padding:14px 16px}
.asks li::before{content:""; flex:none; width:18px; height:18px; margin-top:.3em; border:2px solid var(--d-teal); border-radius:4px}

@media (max-width:860px){
  body{padding-bottom:84px}
  .unit{display:none}
  .hero::before{display:none}
  .hero .wrap{grid-template-columns:minmax(0,1fr); gap:24px; padding-top:28px; padding-bottom:40px}
  .hero-copy{display:contents}
  .hero-text{order:1}
  .sheet{order:2}
  .preview{order:3; margin-top:0; max-width:none}
  .cards,.steps{grid-template-columns:minmax(0,1fr)}
  .steps{gap:24px}
  .steps li{display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:16px; padding:0}
  .steps li::after{display:none}
  .step-ico{grid-row:1 / span 2; margin-bottom:0}
  .place{grid-template-columns:minmax(0,1fr)}
  .band{padding:52px 0}
  .sticky{display:flex; gap:10px; align-items:center; position:fixed; left:0; right:0; bottom:0; z-index:20; padding:10px 16px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -10px 24px -18px rgba(0,0,0,.5)}
  .sticky .btn{flex:1}
  .sticky.off{display:none}
  .figs,.two,.asks{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl{grid-template-columns:minmax(0,1fr)}
  .tl li{border-top:0; border-left:3px solid var(--d-teal); padding:0 0 20px 20px}
  .tl li::before{top:0; left:-9px}
  .cap{grid-template-columns:minmax(0,1fr)}
  .cells{max-width:260px}
  .funnel div{width:100% !important}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} .progress i{transition:none}}

/* 문구 편집 */
.editbar{position:sticky; top:0; z-index:30; background:#0D1E3D; color:#FFFFFF; font-size:.875rem}
.editbar .wrap{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding-top:8px; padding-bottom:8px}
.editbar .grow{flex:1 1 200px}
.editbar button,.editbar a{min-height:40px; padding:6px 14px; border:1px solid #5F7AA8; border-radius:6px; background:transparent; color:#FFFFFF; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center}
.editbar button[aria-pressed="true"],.editbar .primary{background:#4DBD38; border-color:#4DBD38; color:#0D1E3D; font-weight:700}
.editbar button:focus-visible,.editbar a:focus-visible{outline-color:#FFFFFF}
[data-k].ed{outline:1px dashed #4DBD38; outline-offset:3px; cursor:text; border-radius:2px}
[data-k].ed:focus{outline:2px solid #4DBD38; background:rgba(77,189,56,.14)}