/* SobangNet v11.12.20 — readability & rhythm polish
   Scope: non-home category pages only, plus desktop About rhythm.
   No content, SEO, routing, OG or conversion flow changes. */

/* Keyboard accessibility without changing normal visual appearance. */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid rgba(22,48,92,.28)!important;
  outline-offset:2px!important;
}

@media(min-width:861px){
  /* About: tighten the transition from hero to founder story and normalize paragraph rhythm. */
  body.about-page main>.ph + .mobile-collapse-section{
    padding-top:44px!important;
    padding-bottom:48px!important;
  }
  body.about-page .founder-mini{
    align-items:flex-start!important;
    gap:36px!important;
  }
  body.about-page .founder-quote{margin-top:0!important}
  body.about-page .founder-copy h2{
    margin:3px 0 8px!important;
    line-height:1.3!important;
  }
  body.about-page .founder-copy p{
    margin:0 0 10px!important;
    line-height:1.62!important;
  }
  body.about-page .founder-copy p+p{margin-top:0!important}
}

@media(max-width:860px){
  /* Raise category-page body text one notch for the actual user demographic.
     Keep the compact character while avoiding 11–12px sustained reading. */
  body:not(.home-page) main section p{
    font-size:12.8px!important;
    line-height:1.56!important;
  }
  body:not(.home-page) main section li,
  body:not(.home-page) main section dd,
  body:not(.home-page) main section dt{
    font-size:12.55px!important;
    line-height:1.54!important;
  }
  body:not(.home-page) .hint,
  body:not(.home-page) .xtwn,
  body:not(.home-page) .bandn{
    font-size:11.15px!important;
    line-height:1.48!important;
  }

  /* Small tables are reference material, but must remain legible without zooming. */
  body:not(.home-page) table,
  body:not(.home-page) table th,
  body:not(.home-page) table td,
  body:not(.home-page) .check-table th,
  body:not(.home-page) .check-table td{
    font-size:11.6px!important;
    line-height:1.45!important;
  }

  /* Process steps and important narrative blocks deserve slightly more readable text. */
  body:not(.home-page) .steps li{
    font-size:12.25px!important;
    line-height:1.52!important;
  }
  body:not(.home-page) .founder-copy p{
    font-size:12.65px!important;
    line-height:1.54!important;
  }
  body:not(.home-page) section.dark p{
    font-size:12.6px!important;
    line-height:1.54!important;
  }
  body:not(.home-page) .cert-cta p{
    font-size:12.45px!important;
    line-height:1.54!important;
  }

  /* Optional information remains compact, but question/title and answer are readable. */
  body:not(.home-page) details.acc.mobile-compact-accordion>summary{
    font-size:12.5px!important;
    line-height:1.42!important;
  }
  body:not(.home-page) details.acc.mobile-compact-accordion .accb p,
  body:not(.home-page) details.acc.mobile-compact-accordion .accb li{
    font-size:12.1px!important;
    line-height:1.52!important;
  }

  /* Preserve the dense layout by trimming only surplus whitespace, not text. */
  body:not(.home-page) main>section:not(.ph):not(.cert-hero){
    padding-top:21px!important;
    padding-bottom:21px!important;
  }
  body:not(.home-page) main section .box,
  body:not(.home-page) main section .card,
  body:not(.home-page) main section .doc-card,
  body:not(.home-page) main section .quick-answer{
    padding:12px!important;
  }
}

@media(max-width:360px){
  body:not(.home-page) main section p{font-size:12.4px!important}
  body:not(.home-page) main section li,
  body:not(.home-page) main section dd,
  body:not(.home-page) main section dt{font-size:12.2px!important}
  body:not(.home-page) table,
  body:not(.home-page) table th,
  body:not(.home-page) table td{font-size:11.4px!important}
}

/* SobangNet v11.12.21 — information hierarchy, card spacing & CTA polish
   Scope: presentation only. Homepage conversion core and all SEO/content are unchanged.
   Focus: mobile category-page scanability, card hierarchy, and action rhythm. */

@media(max-width:860px){
  /* 1) Page intro hierarchy: category hero explanation must not read like footnote text. */
  body:not(.home-page) main>.ph .lede,
  body:not(.home-page) main>.cert-hero .lede{
    font-size:13.6px!important;
    line-height:1.58!important;
    color:#4F5E6F!important;
    margin-top:9px!important;
    max-width:100%!important;
  }
  body:not(.home-page) main>.ph .crumb,
  body:not(.home-page) main>.cert-hero .crumb{
    font-size:10.7px!important;
    line-height:1.35!important;
    margin-bottom:8px!important;
  }
  body:not(.home-page) main>.ph .lab,
  body:not(.home-page) main>.cert-hero .lab{
    margin-bottom:6px!important;
  }

  /* 2) Section-heading rhythm: slightly stronger than body text without returning to desktop scale. */
  body:not(.home-page) main section .sh{
    margin-bottom:12px!important;
  }
  body:not(.home-page) main section .sh h2,
  body:not(.home-page) main section h2{
    font-size:18.2px!important;
    line-height:1.32!important;
  }
  body:not(.home-page) main section h3{
    font-size:15.15px!important;
    line-height:1.38!important;
  }
  body:not(.home-page) main section h4{
    font-size:13.35px!important;
    line-height:1.4!important;
  }
  body:not(.home-page) main section .prose>h3:not(:first-child),
  body:not(.home-page) main section .prose>h4:not(:first-child){
    margin-top:15px!important;
  }

  /* 3) Separate major sections cleanly. Keep tinted sections as their own visual break. */
  body:not(.home-page) main>section:not(:first-child):not(.tint):not(.dark):not(.guide-cta){
    border-top-color:#EBEEF2!important;
  }
  body:not(.home-page) main>section.tint{
    background:#F7F8FA!important;
  }

  /* 4) Card hierarchy: reference boxes stay flat; decision/action cards receive a restrained lift. */
  body:not(.home-page) main section .box,
  body:not(.home-page) main section .notice,
  body:not(.home-page) main section .warning,
  body:not(.home-page) main section .review-strip{
    box-shadow:none!important;
  }
  body:not(.home-page) main section .box{
    border-color:#E1E6EB!important;
  }
  body:not(.home-page) main section .box.info{
    background:#F7F9FC!important;
    border-color:#DCE4EC!important;
  }
  body:not(.home-page) main section .box.pinkb,
  body:not(.home-page) main section .warning{
    background:#FFF7F5!important;
    border-color:#EFD9D5!important;
  }
  body:not(.home-page) main section .card,
  body:not(.home-page) main section .doc-card,
  body:not(.home-page) main section .guide-summary-card,
  body:not(.home-page) main section .process-item{
    border-color:#DEE4EA!important;
    box-shadow:0 4px 14px rgba(15,30,51,.045)!important;
  }
  body:not(.home-page) main section .card+ .card,
  body:not(.home-page) main section .box+ .box{
    margin-top:0!important;
  }

  /* 5) Compact grids without cards visually touching each other. */
  body:not(.home-page) .g2,
  body:not(.home-page) .g3,
  body:not(.home-page) .g4,
  body:not(.home-page) .grid2,
  body:not(.home-page) .grid3,
  body:not(.home-page) .compare-docs,
  body:not(.home-page) .guide-summary-grid{
    gap:10px!important;
  }

  /* 6) CTA rhythm: action should follow the explanation, not collide with it. */
  body:not(.home-page) main .box>.btn,
  body:not(.home-page) main .form>.btn,
  body:not(.home-page) main .cert-cta>.btn,
  body:not(.home-page) main .guide-summary-card>.btn{
    margin-top:10px!important;
  }
  body:not(.home-page) main .cta-row{
    gap:8px!important;
    margin-top:15px!important;
  }
  body:not(.home-page) main .cta-row .btn{
    flex:1 1 0!important;
    min-width:0!important;
  }
  body:not(.home-page) main section.dark .wrap>div:last-child{
    margin-top:14px!important;
  }
  body:not(.home-page) main .cert-cta{
    border-radius:13px!important;
  }

  /* 7) Secondary disclosure rows remain useful, but visually quieter than primary content. */
  body:not(.home-page) details.mobile-secondary-details>summary{
    min-height:44px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    font-size:12.7px!important;
    color:#445A72!important;
  }
  body:not(.home-page) details.acc.mobile-compact-accordion{
    margin:7px 0!important;
    border-color:#E1E6EB!important;
    box-shadow:none!important;
  }
  body:not(.home-page) details.acc.mobile-compact-accordion>summary{
    min-height:44px!important;
    padding:10px 11px!important;
    font-size:12.65px!important;
  }

  /* 8) Lists and data blocks: improve scan lines while preserving density. */
  body:not(.home-page) main section .steps{margin-top:9px!important}
  body:not(.home-page) main section .steps li{border-color:#E1E6EB!important;background:#fff!important}
  body:not(.home-page) main section .tw,
  body:not(.home-page) main section .xtw{
    margin-top:9px!important;
  }

  /* 9) Keep touch actions comfortably sized and labels visually centered. */
  body:not(.home-page) main .btn{
    min-height:44px!important;
    line-height:1.25!important;
  }
}

@media(max-width:360px){
  body:not(.home-page) main>.ph .lede,
  body:not(.home-page) main>.cert-hero .lede{font-size:13.2px!important}
  body:not(.home-page) main section h2{font-size:17.6px!important}
  body:not(.home-page) main section h3{font-size:14.8px!important}
}

/* SobangNet v11.12.22 — customer/partner balance, comparison-method clarity, compact hierarchy
   URLs, canonical, sitemap and app routes remain unchanged. */
@media(min-width:1041px){
  nav.menu{gap:clamp(14px,1.45vw,23px)!important}
  nav.menu a{white-space:nowrap}
  nav.menu a[href="/partner/"]{font-weight:820;color:#324B6D}
  nav.menu a[href="/partner/"].on{color:var(--red)}
}
.home-page .app-compare-card{padding:22px;border:1px solid #D8E0E8;border-radius:18px;background:#fff;box-shadow:0 22px 54px rgba(22,48,92,.09)}
.home-page .app-compare-card .cmphd{align-items:flex-start;gap:12px}
.home-page .app-compare-card .cmphd h3{font-size:19px;line-height:1.35;color:#16305C}
.home-page .app-compare-card .cmphd .meta{margin-top:4px;font-size:12.6px;line-height:1.5;color:#667085}
.home-page .app-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:15px}
.home-page .app-compare-grid>div{min-height:64px;padding:10px 12px;border:1px solid #E3E8EE;border-radius:11px;background:#F8FAFC}
.home-page .app-compare-grid span{display:block;color:#758195;font-size:10.8px;font-weight:800}
.home-page .app-compare-grid b{display:block;margin-top:3px;color:#263B59;font-size:13px;line-height:1.35}
.home-page .app-compare-grid .total{background:#FFF7F5;border-color:#EBD8D4}
.home-page .app-compare-grid .total b{color:#9E211C}
.home-page .app-compare-policy{display:grid;gap:2px;margin-top:12px;padding:11px 12px;border-radius:11px;background:#EFF4F9;color:#45566C;font-size:11.8px;line-height:1.45}
.home-page .app-compare-policy b{color:#16305C}
.home-page .app-compare-case-link{display:inline-block;margin-top:10px;color:#315F9E;font-size:12px;font-weight:850;text-decoration:underline;text-underline-offset:3px}
.partner-value-panel{padding:24px;border:1px solid #D8E0E8;border-radius:18px;background:#F8FAFC}
.partner-value-kicker{color:#315F9E;font-size:11.5px;font-weight:900;letter-spacing:.05em}
.partner-value-panel h2{margin-top:6px;color:#16305C;font-size:24px;line-height:1.35;letter-spacing:-.035em}
.partner-value-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.partner-value-grid article{padding:14px;border:1px solid #DEE5EC;border-radius:13px;background:#fff}
.partner-value-grid b{display:block;color:#1E3B62;font-size:13.5px;line-height:1.35}
.partner-value-grid span{display:block;margin-top:5px;color:#5D6877;font-size:11.8px;line-height:1.48}
.partner-verify-details{margin-top:12px;border:1px solid #DDE4EB;border-radius:12px;background:#fff;overflow:hidden}
.partner-verify-details>summary{min-height:46px;display:flex;align-items:center;padding:10px 13px;color:#334E70;font-size:12.8px;font-weight:850;cursor:pointer}
.partner-verify-details>summary:after{content:"+";margin-left:auto;font-size:17px;color:#62748A}
.partner-verify-details[open]>summary:after{content:"–"}
.partner-verify-details>div{padding:0 14px 14px;border-top:1px solid #E9EDF2}
.partner-verify-details .dot{margin-top:12px}
.partner-verify-details .hint{margin-top:10px;font-size:11.5px;line-height:1.5}
.partner-verify-details a{display:inline-block;margin-top:8px;color:#315F9E;font-size:12px;font-weight:850}
.compare-method-grid .mh-stat strong{font-size:14px!important;line-height:1.25!important}
.compare-method-grid .mh-stat b{font-size:10.7px!important;line-height:1.35!important}
@media(max-width:1040px){body>.sn-mobile-menu-overlay>a[href="/partner/"]{color:#315F9E!important;font-weight:900!important}}
@media(max-width:660px){
  .home-page .app-compare-card{margin-top:0!important;padding:14px!important;border-radius:14px!important;box-shadow:0 10px 28px rgba(22,48,92,.07)!important}
  .home-page .app-compare-card .cmphd{display:grid!important;gap:7px!important}
  .home-page .app-compare-card .cmphd h3{font-size:15.4px!important;line-height:1.34!important}
  .home-page .app-compare-card .cmphd .meta{font-size:11.2px!important;line-height:1.42!important}
  .home-page .app-compare-card .tag{font-size:10.2px!important;padding:4px 7px!important}
  .home-page .app-compare-grid{gap:6px!important;margin-top:10px!important}
  .home-page .app-compare-grid>div{min-height:54px!important;padding:8px 9px!important;border-radius:9px!important}
  .home-page .app-compare-grid span{font-size:9.9px!important}
  .home-page .app-compare-grid b{font-size:11.3px!important;line-height:1.3!important}
  .home-page .app-compare-policy{margin-top:8px!important;padding:9px 10px!important;font-size:10.7px!important;line-height:1.42!important}
  .home-page .app-compare-case-link{margin-top:8px!important;font-size:10.9px!important}
  .partner-value-panel{padding:14px!important;border-radius:14px!important}
  .partner-value-panel h2{font-size:17.4px!important;line-height:1.33!important}
  .partner-value-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
  .partner-value-grid article{padding:10px;border-radius:10px}
  .partner-value-grid b{font-size:11.5px;line-height:1.35}
  .partner-value-grid span{font-size:10.4px;line-height:1.4}
  .partner-verify-details{margin-top:9px}
  .partner-verify-details>summary{min-height:44px;padding:9px 11px;font-size:11.7px}
}
@media(max-width:360px){.home-page .app-compare-grid b{font-size:10.8px!important}.partner-value-grid span{font-size:10px}}

/* SobangNet v11.12.24 — final visual rhythm & line-length polish
   Goal: keep the approved information architecture, URLs and conversion paths unchanged,
   while reducing avoidable 2→3 line wraps, forced desktop wraps and surplus mobile scroll. */

/* Let modern browsers choose cleaner heading breaks instead of breaking a short phrase awkwardly. */
h1,h2,h3{ text-wrap:balance; }
.btn,summary{ word-break:keep-all; }

@media(min-width:861px){
  /* Non-home page headings may use a little more horizontal room. This turns several
     forced two-line desktop titles into one line without shrinking the type. */
  body:not(.home-page) main>.ph h1,
  body:not(.home-page) main>.cert-hero h1{
    max-width:980px!important;
  }
  body:not(.home-page) main>.ph .lede,
  body:not(.home-page) main>.cert-hero .lede{
    max-width:820px!important;
  }
  body:not(.home-page) main section h2,
  body:not(.home-page) main section h3{
    text-wrap:balance;
  }

  /* Keep the expanded partner navigation in a single clean row. */
  nav.menu a{white-space:nowrap}
}

@media(max-width:860px){
  /* Hero titles remain prominent but slightly tighter than the old 28px ceiling.
     The shorter v11.12.24 copy should normally resolve in at most two lines. */
  body:not(.home-page) main>.ph h1,
  body:not(.home-page) main>.cert-hero h1{
    max-width:100%!important;
    font-size:clamp(23.5px,6.2vw,25.5px)!important;
    line-height:1.22!important;
    letter-spacing:-.055em!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-wrap:balance;
  }

  /* Short intros should read as an introduction, not a long paragraph. */
  body:not(.home-page) main>.ph .lede,
  body:not(.home-page) main>.cert-hero .lede{
    margin-top:7px!important;
    line-height:1.52!important;
  }

  /* Section headings: preserve readability while encouraging compact two-line blocks. */
  body:not(.home-page) main section h2{
    line-height:1.30!important;
    letter-spacing:-.05em!important;
    text-wrap:balance;
  }
  body:not(.home-page) main section h3{
    line-height:1.34!important;
    text-wrap:balance;
  }

  /* Avoid a button label breaking onto a lone word when the container has enough width. */
  body:not(.home-page) .btn{
    line-height:1.25!important;
    text-align:center;
  }
  body:not(.home-page) .cta-row .btn{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* Secondary disclosure labels stay compact. */
  body:not(.home-page) .mobile-page-details>summary,
  body:not(.home-page) .mobile-block-details>summary,
  body:not(.home-page) details.acc>summary{
    line-height:1.34!important;
    text-wrap:balance;
  }

  /* Homepage headings also benefit from balanced wrapping, without changing the approved core layout. */
  .home-page h2,.home-page h3{ text-wrap:balance; }
  .home-page .app-compare-card .cmphd h3{ line-height:1.30!important; }
}

@media(max-width:360px){
  body:not(.home-page) main>.ph h1,
  body:not(.home-page) main>.cert-hero h1{
    font-size:23px!important;
  }
}

/* SobangNet v11.12.25 — balanced copy & natural wrapping
   Principle: remove wasted lines, not meaning. Preserve approved type sizes and let copy/width do the work. */

/* Headings may balance across lines, but typography is not reduced merely to force fewer lines. */
h1,h2,h3{ text-wrap:balance; }
.lede,.meta,.sub,p{ text-wrap:pretty; }

@media(min-width:861px){
  /* Use available desktop width before wrapping a short heading. */
  body:not(.home-page) main>.ph h1,
  body:not(.home-page) main>.cert-hero h1{
    max-width:980px!important;
  }
  body:not(.home-page) main>.ph .lede,
  body:not(.home-page) main>.cert-hero .lede{
    max-width:840px!important;
  }
}

@media(max-width:860px){
  /* Restore the approved readable hero scale from the pre-v11.12.24 baseline.
     Line reduction must come from cleaner copy and available width, not smaller type. */
  body:not(.home-page) main>.ph h1,
  body:not(.home-page) main>.cert-hero h1{
    max-width:100%!important;
    font-size:clamp(24px,6.6vw,28px)!important;
    line-height:1.25!important;
    letter-spacing:-.05em!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }

  /* Natural two/three-line section headings are allowed; avoid isolated final words. */
  body:not(.home-page) main section h2,
  body:not(.home-page) main section h3,
  .home-page h2,.home-page h3{
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-wrap:balance;
  }

  /* Disclosure labels and buttons can use the full row before wrapping. */
  body:not(.home-page) details>summary,
  body:not(.home-page) .btn{
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
}

@media(max-width:360px){
  body:not(.home-page) main>.ph h1,
  body:not(.home-page) main>.cert-hero h1{
    font-size:24px!important;
  }
}

/* SobangNet v11.12.26 — comparison clarity + footer/partner/about detail polish
   Intent: restore the immediately understandable A/B/C comparison without exposing low-price anchors,
   remove duplicate mobile CTA advertising, and tighten desktop/mobile rhythm without shrinking readable type. */

/* Partner strip: one clean line everywhere. */
.pband .pbin{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important}
.pband .pbin>div,.pband .pbin>a{white-space:nowrap!important}
.pband .pbin>div{min-width:0!important}
.pband .pbin>a{flex:0 0 auto!important}

/* Public comparison: make the structure obvious, while masking actual partner prices on the public web. */
.home-page .home-masked-case{padding:18px!important}
.home-page .home-masked-case .cmpn b{color:#16305C}
.home-page .home-compare-table{margin-top:10px}
.home-page .home-masked-case table td.soft-cell,
#yongin-case table td.soft-cell{color:#6C7685;font-size:.94em}
.price-mask{display:inline-block;font-weight:900;letter-spacing:.015em;color:#8E2A24;white-space:nowrap}
.home-page .masked-sum td,#yongin-case .masked-sum td{background:#FFF6F4!important}
.home-page .masked-price{color:#8E2A24!important;letter-spacing:.01em}
.home-page .home-masked-case .cmpf{line-height:1.55}
.home-page .home-masked-case .cmpf>span{line-height:1.5}

/* Desktop bottom CTA: one message, one sentence, two actions, one small note. */
@media(min-width:861px){
  .home-page .channel-final{padding:34px 0 36px!important}
  .home-page .channel-final h2{font-size:24px!important;line-height:1.28!important;margin:0!important}
  .home-page .channel-final-copy{max-width:760px;margin:8px auto 0!important;font-size:14px!important;line-height:1.55!important}
  .home-page .channel-final .channel-cta-row{margin-top:20px!important}
  .home-page .channel-final .channel-free-note{margin:13px 0 0!important;font-size:12.5px!important;line-height:1.45!important;color:#C8D0DA!important}

  /* About: remove the large dead zone between '하는 일' and the role/limit cards. */
  body.about-page .about-method-section{padding-top:36px!important;padding-bottom:24px!important}
  body.about-page .about-role-section{padding-top:24px!important;padding-bottom:40px!important}
  body.about-page .about-method-section + .about-role-section{margin-top:0!important}
  body.about-page .about-role-section .g2{align-items:stretch!important;gap:18px!important}
  body.about-page .about-role-section .g2>.box{height:100%!important;padding:20px 22px!important}
  body.about-page .about-role-section .g2>.box h4{margin:0 0 12px!important;line-height:1.35!important}
  body.about-page .about-role-section .g2>.box ul.dot{display:grid!important;gap:8px!important;margin:0!important;padding-left:18px!important}
  body.about-page .about-role-section .g2>.box ul.dot li{margin:0!important;line-height:1.52!important}
}

@media(max-width:860px){
  /* Persistent bottom dock already carries the two primary actions. Do not repeat a large ad-like CTA block. */
  .mobile-hide-duplicate-cta{display:none!important}

  .pband .pbin{min-height:48px!important;padding-top:8px!important;padding-bottom:8px!important;gap:10px!important}
  .pband .pbin>div b{font-size:11.7px!important;line-height:1.2!important}
  .pband .pbin>a{font-size:11.4px!important;line-height:1.2!important}

  /* Home comparison remains fully understandable on mobile without a tall desktop table. */
  .home-page .home-masked-case{padding:15px!important;border-radius:14px!important}
  .home-page .home-masked-case .tw{display:none!important}
  .home-page .home-masked-case .swipe{display:block!important;margin-top:9px!important}
  .home-page .home-masked-case .sc{grid-auto-columns:minmax(88%,1fr)!important;gap:8px!important}
  .home-page .home-masked-case .sc article{padding:14px!important;border-radius:12px!important}
  .home-page .home-masked-case .mobile-bid-price{font-size:20px!important}
  .home-page .home-masked-case .sc small{font-size:10.7px!important;line-height:1.4!important}
  .home-page .home-masked-case .sc dl{margin-top:9px!important}
  .home-page .home-masked-case .sc dl div{padding-top:7px!important;font-size:11.8px!important}
  .home-page .home-masked-case .cmpf{font-size:11.6px!important;line-height:1.5!important}
  .home-page .home-masked-case .cmpf>span{font-size:10.9px!important;line-height:1.48!important}

  /* About mobile: reduce dead space, equalize both role cards, retain readable type. */
  body.about-page .about-method-section{padding-top:18px!important;padding-bottom:14px!important}
  body.about-page .about-role-section{padding-top:14px!important;padding-bottom:20px!important}
  body.about-page .about-role-section .g2{gap:9px!important}
  body.about-page .about-role-section .g2>.box{padding:13px!important}
  body.about-page .about-role-section .g2>.box h4{margin:0 0 8px!important;line-height:1.38!important}
  body.about-page .about-role-section .g2>.box ul.dot{display:grid!important;gap:5px!important;margin:0!important;padding-left:17px!important}
  body.about-page .about-role-section .g2>.box ul.dot li{margin:0!important;line-height:1.5!important}
}

@media(max-width:360px){
  .pband .pbin{gap:7px!important}
  .pband .pbin>div b{font-size:11px!important}
  .pband .pbin>a{font-size:10.9px!important}
  .home-page .home-masked-case .sc{grid-auto-columns:92%!important}
}

/* SobangNet v11.12.27 — about equal-height detail + balanced global footer
   Goal: fix visible rhythm only. URLs, content semantics, SEO metadata and app links are untouched. */

/* 1) About / 역할과 한계: two cards start on the same baseline, end at the same baseline,
      and use exactly the same internal vertical rhythm on desktop. */
@media (min-width:861px){
  body.about-page .about-role-section .mobile-page-details-body .wrap.narrow > .g2.g1m{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:1fr!important;
    align-items:stretch!important;
    gap:20px!important;
  }
  body.about-page .about-role-section .mobile-page-details-body .wrap.narrow > .g2.g1m > .box{
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding:22px 24px!important;
    display:flex!important;
    flex-direction:column!important;
    align-self:stretch!important;
  }
  body.about-page .about-role-section .mobile-page-details-body .wrap.narrow > .g2.g1m > .box h4{
    margin:0 0 13px!important;
    font-size:16px!important;
    line-height:1.4!important;
  }
  body.about-page .about-role-section .mobile-page-details-body .wrap.narrow > .g2.g1m > .box ul.dot{
    display:grid!important;
    grid-auto-rows:auto!important;
    align-content:start!important;
    gap:9px!important;
    margin:0!important;
    padding-left:20px!important;
  }
  body.about-page .about-role-section .mobile-page-details-body .wrap.narrow > .g2.g1m > .box ul.dot li{
    margin:0!important;
    padding:0!important;
    line-height:1.58!important;
  }

  /* Pull the role section upward slightly so the content does not float after the previous block. */
  body.about-page .about-method-section{padding-bottom:18px!important}
  body.about-page .about-role-section{padding-top:18px!important}
}

/* 2) Global PC footer: retain three primary columns but make the long Service list a compact
      two-column navigation block. This keeps every page footer balanced instead of letting
      the middle column protrude downward. */
@media (min-width:861px){
  footer .fin{
    display:grid!important;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.34fr) minmax(0,1.18fr)!important;
    gap:38px!important;
    align-items:start!important;
  }
  footer .fin > .fc1,
  footer .fin > details.mobile-footer-details{
    min-width:0!important;
  }
  footer .fin > details.mobile-footer-details:first-of-type .mobile-footer-details-body > div > h4{
    margin:0 0 13px!important;
  }
  footer .fin > details.mobile-footer-details:first-of-type .mobile-footer-details-body > div > ul{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:24px!important;
    row-gap:8px!important;
    align-content:start!important;
    margin:0!important;
  }
  footer .fin > details.mobile-footer-details:first-of-type .mobile-footer-details-body > div > ul > li{
    min-width:0!important;
    margin:0!important;
    line-height:1.5!important;
  }
  footer .fin > details.mobile-footer-details:first-of-type .mobile-footer-details-body > div > ul > li > a{
    display:block!important;
    min-width:0!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }
  footer .fin > details.mobile-footer-details:nth-of-type(2) .fsrc{
    margin-top:0!important;
  }
  footer .fbot{
    margin-top:24px!important;
  }
}

/* 3) Narrow PC/tablet: preserve the same balance without horizontal overflow. */
@media (min-width:861px) and (max-width:1180px){
  footer .fin{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.28fr) minmax(0,1.08fr)!important;
    gap:22px!important;
  }
  footer .fin > details.mobile-footer-details:first-of-type .mobile-footer-details-body > div > ul{
    column-gap:14px!important;
  }
}

/* 4) Mobile: do not force desktop equal-height cards or footer columns. Keep the compact accordion. */
@media (max-width:860px){
  body.about-page .about-role-section .mobile-page-details-body .wrap.narrow > .g2.g1m{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  body.about-page .about-role-section .mobile-page-details-body .wrap.narrow > .g2.g1m > .box{
    height:auto!important;
    min-height:0!important;
    margin:0!important;
  }
  footer .fin > details.mobile-footer-details:first-of-type .mobile-footer-details-body > div > ul{
    display:block!important;
  }
}

/* v11.12.27b — explicit footer navigation grouping for predictable PC balance. */
@media (min-width:861px){
  footer .footer-service-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:28px!important;
    align-items:start!important;
  }
  footer .footer-service-col{min-width:0!important}
  footer .footer-service-col h4{margin:0 0 13px!important}
  footer .footer-service-col ul{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin:0!important;
  }
  footer .footer-service-col li{margin:0!important;line-height:1.5!important}
  footer .footer-service-col a{display:block!important;word-break:keep-all!important}
  /* Cancel the earlier generic two-column ul rule now that the split is explicit. */
  footer .fin > details.mobile-footer-details:first-of-type .mobile-footer-details-body > div > ul{display:block!important}
  body.about-page .about-method-section{padding-bottom:10px!important}
  body.about-page .about-role-section{padding-top:10px!important}
}
@media (max-width:860px){
  footer .footer-service-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  footer .footer-service-col+ .footer-service-col{padding-top:10px!important;border-top:1px solid rgba(255,255,255,.10)!important}
  footer .footer-service-col h4{display:block!important;margin:0 0 7px!important;color:#D7E0EA!important;font-size:11.6px!important}
  footer .footer-service-col ul{margin:0!important}
}

/* v11.12.27c — use flex for the two footer nav groups as a wider-support fallback. */
@media (min-width:861px){
  footer .footer-service-grid{display:flex!important;gap:28px!important;align-items:flex-start!important}
  footer .footer-service-col{flex:1 1 0!important;min-width:0!important}
}

/* v11.12.27d — four balanced top-level PC footer columns: brand | services | guides | sources/business. */
@media (min-width:1041px){
  footer .fin{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.76fr) minmax(0,.78fr) minmax(0,1.30fr)!important;
    gap:30px!important;
  }
  footer .footer-service-details .mobile-footer-details-body ul,
  footer .footer-guide-details .mobile-footer-details-body ul{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin:0!important;
  }
  footer .footer-service-details h4,
  footer .footer-guide-details h4{margin:0 0 13px!important}
  footer .footer-service-details li,
  footer .footer-guide-details li{margin:0!important;line-height:1.5!important}
}
@media (min-width:861px) and (max-width:1040px){
  footer .fin{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px 34px!important}
  footer .fc1{grid-column:auto!important}
  footer .footer-service-details .mobile-footer-details-body ul,
  footer .footer-guide-details .mobile-footer-details-body ul{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
}

/* SobangNet v11.12.28 — footer rhythm parity
   Service and Guide columns use the same row rhythm on every desktop/category page.
   Mobile accordion contents also use the same spacing. */
@media (min-width:1041px){
  footer .footer-service-details .mobile-footer-details-body ul,
  footer .footer-guide-details .mobile-footer-details-body ul{
    display:grid!important;
    grid-template-columns:1fr!important;
    row-gap:11px!important;
    margin:0!important;
    align-content:start!important;
  }
  footer .footer-service-details .mobile-footer-details-body li,
  footer .footer-guide-details .mobile-footer-details-body li{
    display:flex!important;
    align-items:center!important;
    min-height:24px!important;
    margin:0!important;
    padding:0!important;
    line-height:1.55!important;
  }
  footer .footer-service-details .mobile-footer-details-body a,
  footer .footer-guide-details .mobile-footer-details-body a{
    display:flex!important;
    align-items:center!important;
    min-height:24px!important;
    line-height:1.55!important;
  }
}
@media (min-width:861px) and (max-width:1040px){
  footer .footer-service-details .mobile-footer-details-body ul,
  footer .footer-guide-details .mobile-footer-details-body ul{
    row-gap:10px!important;
  }
  footer .footer-service-details .mobile-footer-details-body li,
  footer .footer-guide-details .mobile-footer-details-body li,
  footer .footer-service-details .mobile-footer-details-body a,
  footer .footer-guide-details .mobile-footer-details-body a{
    min-height:23px!important;
    line-height:1.55!important;
  }
}
@media (max-width:860px){
  footer .footer-service-details .mobile-footer-details-body ul li+li,
  footer .footer-guide-details .mobile-footer-details-body ul li+li{
    margin-top:7px!important;
  }
  footer .footer-service-details .mobile-footer-details-body li,
  footer .footer-guide-details .mobile-footer-details-body li,
  footer .footer-service-details .mobile-footer-details-body a,
  footer .footer-guide-details .mobile-footer-details-body a{
    line-height:1.55!important;
  }
}


/* v11.12.30 — final standard-reference terminology + spacing */
.std-source-badge{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:5px 9px;border-radius:999px;background:#EEF3F8;color:#315377;font-size:11.5px;font-weight:800;line-height:1.25}
.std-reference-note{margin-top:10px;padding:11px 12px;border-radius:9px;background:#F5F7FA;border:1px solid #E3E8EF;color:#586574;font-size:12.8px;line-height:1.62}
.std-reference-note strong{color:#16305C;font-weight:800}
.price-meaning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
.price-meaning-card{border:1px solid #E5E1DB;border-radius:12px;background:#fff;padding:15px 16px;min-width:0}
.price-meaning-card b{display:block;color:#16305C;font-size:14.5px;line-height:1.35;margin-bottom:5px}
.price-meaning-card span{display:block;color:#66707B;font-size:12.6px;line-height:1.55}
.std-faq-inline{margin:20px 0 0}
.std-faq-inline .acc{margin:0}
.home-page h1.hh{line-height:1.16}
.home-page .hsub{line-height:1.64}
.home-page .hsub span{display:block}
.home-page .cmpf{line-height:1.62}
.home-page .fee-highlight .sh p{line-height:1.65}
.cost-page .ph .lede{line-height:1.68}
.cost-page .box.info>p{line-height:1.68}
.cost-page .total .tv{color:#fff}
.cost-page .total .std-source-badge{background:#263447;color:#DCE8F7;border:1px solid #3A4A60}
.cost-page .total .std-reference-note{background:#20252D;border-color:#343B45;color:#C9D0D8}
.cost-page .total .std-reference-note strong{color:#fff}
@media(max-width:860px){
  .home-page h1.hh{line-height:1.18}
  .home-page .hsub{line-height:1.58}
  .price-meaning-grid{grid-template-columns:1fr;gap:8px;margin-bottom:16px}
  .price-meaning-card{padding:11px 13px;border-radius:10px}
  .price-meaning-card b{font-size:13.8px;margin-bottom:3px}
  .price-meaning-card span{font-size:12.2px;line-height:1.48}
  .std-reference-note{font-size:12.3px;line-height:1.56;padding:10px 11px}
}
@media(min-width:861px){
  .home-page .home-hsub-desktop{max-width:560px}
}

/* SobangNet v11.12.31 — video UX + guide rhythm final */

/* ---------- Shared video thumbnails ---------- */
.video-thumb-button{
  appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;width:100%;display:block;
  border-radius:16px;overflow:hidden;background:#F7F3EE;cursor:pointer;position:relative;
  box-shadow:0 10px 28px rgba(15,30,51,.08);text-align:left;
}
.video-thumb-button img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.video-thumb-button:focus-visible{outline:3px solid #CE2E26;outline-offset:3px}
.video-thumb-button:after{
  content:'영상 재생';position:absolute;right:12px;bottom:11px;padding:7px 10px;border-radius:999px;
  background:rgba(15,30,51,.78);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:-.02em;
  backdrop-filter:blur(6px)
}

/* ---------- Home: customer / partner video cards ---------- */
.guide-choice.guide-choice-video{padding-block:56px}
.home-guide-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.home-guide-video-card{
  min-width:0;height:100%;padding:16px;border:1px solid #E3DBD4;border-radius:20px;background:#fff;
  box-shadow:0 12px 34px rgba(22,48,92,.055);display:flex;flex-direction:column
}
.home-guide-video-card.customer{background:linear-gradient(145deg,#FFFDFC,#FFF8F6)}
.home-guide-video-card.partner{background:linear-gradient(145deg,#FCFDFF,#F5F8FC)}
.home-guide-video-copy{padding:16px 4px 3px;display:flex;flex-direction:column;flex:1}
.home-guide-video-copy h3{margin-top:10px;color:#16305C;font-size:24px;line-height:1.32;letter-spacing:-.035em}
.home-guide-video-copy .guide-flow{margin-top:8px;color:#5E656E;font-size:14px;line-height:1.58}
.home-guide-video-copy .guide-link{display:inline-flex;margin-top:auto;padding-top:16px;color:#CE2E26;font-size:13.5px;font-weight:850}
.home-guide-video-card.partner .guide-link{color:#1A5CCD}
.home-guide-video-mobile{display:none}

/* ---------- /guide/ role cards ---------- */
.guide-summary-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.guide-summary-video-card{
  min-width:0;height:100%;padding:16px;border:1px solid #E3DBD4;border-radius:20px;background:#fff;
  box-shadow:0 12px 32px rgba(22,48,92,.05);display:flex;flex-direction:column
}
.guide-summary-video-card .guide-summary-video-copy{padding:16px 4px 3px;display:flex;flex-direction:column;flex:1}
.guide-summary-video-card h2{margin-top:10px;font-size:25px;line-height:1.32;color:#16305C}
.guide-summary-video-card p{margin-top:8px;color:#5B626B;font-size:14px;line-height:1.64}
.guide-summary-video-card .btn{align-self:flex-start;margin-top:auto;padding-top:10px}

/* ---------- Customer / Partner page compact video preview ---------- */
.guide-video-preview{padding:24px 0 34px;background:#fff}
.guide-video-preview .wrap{max-width:920px}
.guide-video-preview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
.guide-video-preview-head .copy{min-width:0}
.guide-video-preview .video-kicker{display:block;color:#CE2E26;font-size:12px;font-weight:850;letter-spacing:-.02em;margin-bottom:5px}
.guide-video-preview h2{color:#16305C;font-size:27px;line-height:1.34;letter-spacing:-.035em}
.guide-video-preview p{margin-top:7px;color:#5E656E;font-size:14px;line-height:1.58}
.guide-video-preview-note{margin-top:10px!important;color:#8A9099!important;font-size:12.2px!important;line-height:1.55!important}

/* ---------- Guide rhythm / equal-height fixes ---------- */
@media(min-width:861px){
  .process-item{align-items:stretch!important}
  .process-main{padding-top:2px}
  .process-main h3{margin:0;line-height:1.38}
  .process-main p{margin-top:7px;line-height:1.66}
  .process-check{height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding:16px 17px!important}
  .process-check b{display:block;line-height:1.4;margin:0 0 5px}
  .process-check p{margin:0!important;line-height:1.58!important}

  .customer-field-guide .g2{align-items:stretch!important;gap:18px!important}
  .customer-field-guide .g2>.box{height:100%;padding:24px 26px!important}
  .customer-field-guide .box h4{margin:0 0 14px!important;line-height:1.38!important}
  .customer-field-guide .box ul.chk,
  .customer-field-guide .box ul.dot{display:grid!important;gap:9px!important;margin:0!important}
  .customer-field-guide .box ul.chk li,
  .customer-field-guide .box ul.dot li{margin:0!important;line-height:1.56!important}
  .customer-field-guide .box .hint{margin-top:12px!important;line-height:1.56!important}

  .customer-documents .g3{align-items:stretch!important;gap:14px!important}
  .customer-documents .g3>.box{height:100%;padding:22px 23px!important}
  .customer-documents .g3>.box h4{margin:0 0 10px!important;line-height:1.38!important}
  .customer-documents .g3>.box p{margin:0!important;line-height:1.6!important}
  .customer-documents .box.info{margin-top:14px!important;padding:19px 23px!important}
  .customer-documents .box.info h4{margin:0 0 7px!important}

  .guide-summary-grid,.guide-choice-grid{align-items:stretch!important}
  .guide-summary-card{height:100%;display:flex!important;flex-direction:column!important}
  .guide-summary-card .btn{margin-top:auto!important;align-self:flex-start}
}

/* ---------- Mobile compact guide video ---------- */
@media(max-width:860px){
  .guide-choice.guide-choice-video{padding-block:38px}
  .desktop-guide-video-grid{display:none!important}
  .home-guide-video-mobile{display:block}
  .guide-media-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
  .guide-media-tab{border:1px solid #DED7D0;border-radius:10px;background:#fff;color:#59616B;min-height:42px;font:inherit;font-size:13.5px;font-weight:850;cursor:pointer}
  .guide-media-tab.is-active{background:#16305C;border-color:#16305C;color:#fff}
  .home-guide-mobile-panel{border:1px solid #E3DBD4;border-radius:16px;background:#fff;padding:12px;box-shadow:0 8px 24px rgba(22,48,92,.05)}
  .home-guide-mobile-panel[hidden]{display:none!important}
  .home-guide-mobile-copy{padding:13px 3px 2px}
  .home-guide-mobile-copy h3{font-size:20px;line-height:1.3;color:#16305C;margin-top:7px}
  .home-guide-mobile-copy p{margin-top:6px;color:#646B74;font-size:12.8px;line-height:1.52}
  .home-guide-mobile-copy a{display:inline-flex;margin-top:10px;color:#CE2E26;font-size:12.8px;font-weight:850}
  .home-guide-mobile-panel.partner .home-guide-mobile-copy a{color:#1A5CCD}
  .video-thumb-button{border-radius:13px;box-shadow:0 7px 20px rgba(15,30,51,.07)}
  .video-thumb-button:after{right:8px;bottom:8px;padding:5px 8px;font-size:10.5px}

  .guide-summary-video-grid{grid-template-columns:1fr;gap:15px}
  .guide-summary-video-card{padding:12px;border-radius:16px}
  .guide-summary-video-card .guide-summary-video-copy{padding:13px 3px 2px}
  .guide-summary-video-card h2{font-size:21px;margin-top:7px}
  .guide-summary-video-card p{font-size:12.8px;line-height:1.53}

  .guide-video-preview{padding:18px 0 28px}
  .guide-video-preview .wrap{padding-inline:16px}
  .guide-video-preview-head{display:block;margin-bottom:12px}
  .guide-video-preview h2{font-size:22px;line-height:1.34}
  .guide-video-preview p{font-size:12.8px;line-height:1.53}

  .process-item{align-items:start}
  .process-main h3{line-height:1.4}
  .process-main p{line-height:1.62}
  .process-check{padding:13px 14px!important}
  .process-check b{line-height:1.4}
  .process-check p{line-height:1.55!important}

  .customer-field-guide .g2>.box,
  .customer-documents .g3>.box{padding:16px!important}
  .customer-field-guide .box h4,
  .customer-documents .box h4{margin:0 0 9px!important;line-height:1.4!important}
  .customer-field-guide .box ul.chk,
  .customer-field-guide .box ul.dot{display:grid!important;gap:6px!important;margin:0!important}
  .customer-field-guide .box ul.chk li,
  .customer-field-guide .box ul.dot li{margin:0!important;line-height:1.52!important}
  .customer-documents .g3>.box p{margin:0!important;line-height:1.55!important}
}

/* ---------- Video modal: MP4 loads only after user click ---------- */
.sn-video-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(8,17,31,.86);backdrop-filter:blur(4px)}
.sn-video-modal.is-open{display:flex}
body.sn-video-modal-open{overflow:hidden}
.sn-video-modal-shell{position:relative;width:min(430px,92vw);max-height:92svh;display:flex;flex-direction:column;align-items:stretch}
.sn-video-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#fff;margin-bottom:9px}
.sn-video-modal-title{font-size:14px;font-weight:800;line-height:1.35}
.sn-video-modal-close{appearance:none;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.10);color:#fff;width:38px;height:38px;border-radius:999px;font-size:25px;line-height:1;cursor:pointer}
.sn-video-modal-video{display:block;width:100%;max-height:82svh;aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.38)}
@media(max-width:520px){
  .sn-video-modal{padding:10px}
  .sn-video-modal-shell{width:min(420px,94vw)}
  .sn-video-modal-video{max-height:80svh;border-radius:11px}
  .sn-video-modal-bar{margin-inline:2px}
}

/* SobangNet v11.12.32 — final spacing corrections.
   Keep existing typography, responsive hierarchy, content, and URLs.
   Grid gap owns spacing BETWEEN cards; stacked-box margin must not leak into grids. */
body main :is(.g2,.g3,.g4) > .box{
  margin:0!important;
  align-self:stretch;
}
body main :is(.g2,.g3,.g4) + .box{
  margin-top:14px!important;
}
/* Same information level within each guide card uses the same text rhythm. */
.customer-field-guide .g2 > .box :is(ul.chk,ul.dot) li{
  font-size:14.5px;
  line-height:1.6!important;
}
.customer-field-guide .box .hint{margin-top:12px!important}
.customer-documents .g3 > .box h4{min-height:0}
.home-guide-video-copy > .guide-role,
.home-guide-mobile-copy > .guide-role,
.guide-summary-video-copy > .guide-role{align-self:flex-start}
.guide-summary-video-copy > p{margin-bottom:16px}
/* Thumbnail already has a play motif. Retain its accessible button name. */
.video-thumb-button::after{content:none;display:none}
/* Bound the complete player (video + close bar) in short/landscape viewports. */
.sn-video-modal{overflow-y:auto;overscroll-behavior:contain}
.sn-video-modal-shell{max-height:calc(100svh - 36px)}
.sn-video-modal-bar{flex:0 0 auto}
.sn-video-modal-video{max-height:min(82svh,calc(100svh - 92px));min-height:0}
.sn-video-modal-close{flex:0 0 38px}
/* Explicitly override the old first-of-type footer selector. All eight links in
   each navigation group share one grid rhythm, rather than block vs. grid. */
body footer .fin > details.mobile-footer-details:is(.footer-service-details,.footer-guide-details) .mobile-footer-details-body > div > ul{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-content:start!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
}
body footer .fin > details.mobile-footer-details:is(.footer-service-details,.footer-guide-details) .mobile-footer-details-body > div > h4{
  margin:0 0 13px!important;
  line-height:1.4!important;
}
body footer .fin > details.mobile-footer-details:is(.footer-service-details,.footer-guide-details) .mobile-footer-details-body > div > ul > li{
  display:block!important;
  margin:0!important;
  padding:0!important;
  min-height:24px!important;
  line-height:1.55!important;
}
body footer .fin > details.mobile-footer-details:is(.footer-service-details,.footer-guide-details) .mobile-footer-details-body > div > ul > li > a{
  display:flex!important;
  align-items:center!important;
  min-height:24px!important;
  line-height:1.55!important;
}
@media(max-width:860px){
  body main :is(.g2,.g3,.g4) + .box{margin-top:10px!important}
  .customer-field-guide .g2 > .box :is(ul.chk,ul.dot) li{font-size:13.5px;line-height:1.6!important}
  body footer .fin > details.mobile-footer-details:is(.footer-service-details,.footer-guide-details) .mobile-footer-details-body > div > ul{gap:6px!important}
  body footer .fin > details.mobile-footer-details:is(.footer-service-details,.footer-guide-details) .mobile-footer-details-body > div > ul > li,
  body footer .fin > details.mobile-footer-details:is(.footer-service-details,.footer-guide-details) .mobile-footer-details-body > div > ul > li > a{min-height:28px!important}
}
@media(max-width:520px){
  .sn-video-modal-shell{max-height:calc(100svh - 20px)}
  .sn-video-modal-video{max-height:min(80svh,calc(100svh - 80px))}
}
/* Old short hero copy had nowrap on the red line. The approved longer reference-
   amount wording must wrap naturally, rather than overlap the adjacent panel. */
body.home-page .hero h1.hh em{
  white-space:normal!important;
  overflow-wrap:break-word;
  text-wrap:balance;
}

/* SobangNet v11.12.33 — final home visual polish only.
   Scope: wide-PC hero two-line treatment + smaller home guide video cards.
   Mobile/tablet behavior and approved copy remain unchanged. */

/* Wide desktop: keep the approved hero copy in two strong lines without
   forcing the red reference-amount line to wrap. */
@media (min-width:1200px){
  body.home-page .hero .hin{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
    gap:36px!important;
  }
  body.home-page .hero h1.hh{
    max-width:650px!important;
    font-size:42px!important;
    line-height:1.16!important;
    letter-spacing:-.052em!important;
  }
  body.home-page .hero h1.hh > span,
  body.home-page .hero h1.hh > em{
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    text-wrap:nowrap!important;
  }
}

/* Home guide cards are secondary content: keep them clearly clickable, but
   smaller than the hero and comparison sections. */
@media (min-width:901px){
  body.home-page .desktop-guide-video-grid{
    width:min(100%,960px)!important;
    margin-inline:auto!important;
    gap:16px!important;
  }
  body.home-page .home-guide-video-card{
    padding:13px!important;
    border-radius:18px!important;
  }
  body.home-page .home-guide-video-copy{
    padding:13px 3px 2px!important;
  }
  body.home-page .home-guide-video-copy h3{
    margin-top:8px!important;
    font-size:22px!important;
    line-height:1.3!important;
  }
  body.home-page .home-guide-video-copy .guide-flow{
    margin-top:7px!important;
    font-size:13.5px!important;
    line-height:1.52!important;
  }
  body.home-page .home-guide-video-copy .guide-link{
    padding-top:13px!important;
    font-size:13px!important;
  }
}