/* SobangNet v11.12.0 — App-first integration, readability and two-channel UX */
:root{--sn-navy:#16305C;--sn-red:#CE2E26;--sn-ink:#22272D;--sn-muted:#545C65;--sn-soft:#F7F4F0}

/* Hero: deliberately lock the value proposition to two visual lines on desktop. */
h1.hh>span,h1.hh>em{display:block}
h1.hh{max-width:610px;font-size:clamp(39px,3.65vw,48px);line-height:1.17;text-wrap:balance}
h1.hh>span{white-space:nowrap}
h1.hh>em{white-space:nowrap}
.hero{padding-top:44px;padding-bottom:50px}
.hsub{color:#454C54;max-width:560px}

/* Retention section: raise contrast and make the ongoing value obvious. */
.building-retention{background:#F6F3EF}
.building-retention .lab{color:#8E201B;font-weight:850}
.retention-grid>div>p:not(.lab){color:#454C54!important;opacity:1!important}
.retention-note{background:#FFF;border:1px solid #DDD4CB;box-shadow:0 8px 24px rgba(28,36,45,.055)}
.retention-note b{color:#20252B!important;opacity:1!important}
.retention-note span{color:#555D66!important;opacity:1!important}
.retention-cards article{background:#FFF;border-color:#E0D8CF;box-shadow:0 8px 22px rgba(28,36,45,.045)}
.retention-cards article b{color:#20252B!important}
.retention-cards article p{color:#565E67!important;opacity:1!important}

/* Final CTA: only two supported action channels — app and Kakao. */
.channel-cta-row{display:grid;grid-template-columns:minmax(240px,340px) minmax(240px,340px);gap:12px;justify-content:center;margin-top:24px}
.channel-cta-row .btn{width:100%}
.channel-role{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:15px auto 0;max-width:760px;color:#B7C0CB;font-size:13px;line-height:1.6}
.channel-role b{color:#FFF}
.legacy-handoff{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}
.legacy-handoff .box{margin:0}
.legacy-handoff .btn{width:100%}

/* Two-channel mobile dock — phone remains a footer business contact, not a primary CTA. */
.dock{grid-template-columns:1fr 1fr!important}
.dock>.btn{min-width:0}

/* Reduce visual noise after removing the duplicate comparison section. */
.guide-choice+.building-retention{border-top:1px solid #E7E0D9}

@media(max-width:900px){
  h1.hh{max-width:none;font-size:clamp(31px,7.8vw,40px)}
  h1.hh>span,h1.hh>em{white-space:nowrap}
  .hero{padding-top:38px;padding-bottom:44px}
  .legacy-handoff{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero{padding-top:28px;padding-bottom:34px}
  h1.hh{font-size:clamp(25px,6.9vw,31px);line-height:1.2;letter-spacing:-.05em}
  h1.hh>span,h1.hh>em{white-space:nowrap}
  .channel-cta-row{grid-template-columns:1fr;gap:10px}
  .channel-role{display:block;font-size:12.5px}
  .channel-role span{display:block;margin-top:4px}
  .building-retention .btn{width:100%}
}