/* SobangNet v11.12.10-preview — mobile all-category compact accordion layer
   SEO principle: content remains server-rendered in the HTML. On mobile, secondary
   information is collapsed with native <details>; no content is fetched on click.
   Desktop layout remains unchanged. */

.mobile-page-details>summary,
.mobile-block-details>summary{display:none}

@media (min-width:861px){
  .mobile-page-details,
  .mobile-block-details{display:block!important}
  .mobile-page-details>summary,
  .mobile-block-details>summary{display:none!important}
  .mobile-page-details:not([open])>.mobile-page-details-body,
  .mobile-block-details:not([open])>.mobile-block-details-body{display:block!important}
  .mobile-page-details>.mobile-page-details-body,
  .mobile-block-details>.mobile-block-details-body{display:block!important}
}

@media (max-width:860px){
  /* Global mobile rhythm: short hero, consistent line-height, no desktop-sized empty bands. */
  body{line-height:1.55}
  main>.ph,
  main>.cert-hero{padding:24px 0!important}
  main>.ph h1,
  main>.cert-hero h1{font-size:clamp(24px,6.6vw,28px)!important;line-height:1.25!important;letter-spacing:-.05em!important;word-break:keep-all}
  main>.ph .lede,
  main>.cert-hero .lede{margin-top:9px!important;font-size:13px!important;line-height:1.55!important}
  main>.ph .crumb,
  main>.cert-hero .crumb{margin-bottom:8px!important;font-size:10.8px!important;line-height:1.3!important}
  main>.ph .lab,
  main>.cert-hero .lab{font-size:10.6px!important;line-height:1.25!important}

  /* Native details used across service/information categories. */
  section.mobile-collapse-section{padding:0!important}
  section.mobile-collapse-section+.mobile-collapse-section{border-top:0}
  .mobile-page-details{display:block;border-top:1px solid #E6E9ED;background:inherit}
  .mobile-page-details>summary,
  .mobile-block-details>summary{
    list-style:none;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:54px;
    color:#16305C;
    font-size:14px;
    line-height:1.32;
    font-weight:900;
    letter-spacing:-.035em;
    cursor:pointer;
    word-break:keep-all;
  }
  .mobile-page-details>summary{width:min(100% - 28px,1120px);margin:0 auto;padding:11px 0}
  .mobile-block-details>summary{padding:11px 12px}
  .mobile-page-details>summary::-webkit-details-marker,
  .mobile-block-details>summary::-webkit-details-marker{display:none}
  .mobile-page-summary-text,
  .mobile-block-details>summary>span{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    max-width:calc(100% - 34px);
  }
  .mobile-page-details>summary::after,
  .mobile-block-details>summary::after{
    content:'+';
    flex:0 0 24px;
    width:24px;height:24px;
    display:grid;place-items:center;
    border:1px solid #D8DEE6;
    border-radius:50%;
    background:#fff;
    color:#16305C;
    font-size:15px;
    line-height:1;
    font-weight:750;
  }
  .mobile-page-details[open]>summary::after,
  .mobile-block-details[open]>summary::after{content:'−'}
  .mobile-page-details[open]>summary,
  .mobile-block-details[open]>summary{color:#8E201B}
  .mobile-page-details-body{padding:0 0 18px}
  .mobile-block-details-body{padding:0 0 10px}
  .mobile-page-details-body .sh{margin-bottom:11px!important;gap:6px!important}
  .mobile-page-details-body .sh h2{font-size:18px!important;line-height:1.34!important;letter-spacing:-.04em!important;word-break:keep-all}
  .mobile-page-details-body .sh .lab{font-size:10.3px!important;line-height:1.2!important}
  .mobile-page-details-body p,
  .mobile-page-details-body li{font-size:12.5px!important;line-height:1.58!important}
  .mobile-page-details-body .card,
  .mobile-page-details-body .box{padding:14px!important}

  /* Policy/legal pages: each box is a separate compact accordion row. */
  .mobile-block-list-section{padding:18px 0 26px!important}
  .mobile-block-list-section .wrap>.mobile-block-details,
  .mobile-block-list-section .g2>.mobile-block-details{
    margin:7px 0;
    border:1px solid #E0E5EB;
    border-radius:12px;
    background:#fff;
    overflow:hidden;
  }
  .mobile-block-list-section .g2{display:block!important}
  .mobile-block-details-body>.box,
  .mobile-block-details-body>.dtwrap{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  .mobile-block-details-body>.box>h4{display:none!important}
  .mobile-block-details-body p,
  .mobile-block-details-body li,
  .mobile-block-details-body td,
  .mobile-block-details-body th{font-size:12.2px!important;line-height:1.55!important}

  /* Action pages: keep the action visible; collapse only explanatory side content. */
  .mc2>.mobile-block-details{align-self:start;border:1px solid #E0E5EB;border-radius:12px;background:#fff;overflow:hidden}
  .mc2>.mobile-block-details .mobile-block-details-body>div{padding:13px!important}
  .mc2>.mobile-block-details .mobile-block-details-body h3,
  .mc2>.mobile-block-details .mobile-block-details-body h4{display:none!important}

  /* Homepage FAQ: canonical 7-question list, first 2 visible, then one-tap expansion. */
  .home-page .faq-home .faq-desktop-list{display:block!important}
  .home-page .faq-home .faq-desktop-list details.acc{display:block!important;margin-top:7px!important}
  .home-page .faq-home .faq-desktop-list details.acc:nth-of-type(n+3){display:none!important}
  .home-page .faq-home.faq-expanded .faq-desktop-list details.acc{display:block!important}
  .home-page .faq-home .faq-desktop-list details.acc:first-child{margin-top:0!important}
  .home-page .faq-home .mobile-faq-toggle{display:flex!important;width:100%;min-height:42px;margin-top:9px;align-items:center;justify-content:center;border:1px solid #D8DDE4;border-radius:10px;background:#fff;color:#16305C;font-size:12.6px;font-weight:850;cursor:pointer}
  .home-page .faq-home details.acc>summary{min-height:44px!important;padding:10px 12px!important;font-size:12.8px!important;line-height:1.38!important}
  .home-page .faq-home .accb{padding:0 12px 11px!important;font-size:12.2px!important;line-height:1.55!important}

  /* Fire-certificate: the old global navy H2 was invisible on the navy CTA, creating a large 'blank' area. */
  .cert-hero .quick-answer{margin-top:14px!important;padding:13px 14px!important;border-radius:12px!important}
  .cert-hero .quick-answer b{font-size:12px!important}
  .cert-hero .quick-answer p{margin-top:4px!important;font-size:12.3px!important;line-height:1.52!important}
  .cert-cta{padding:19px 16px!important;border-radius:16px!important}
  .cert-cta h2{margin:0!important;color:#fff!important;font-size:18px!important;line-height:1.35!important;letter-spacing:-.04em!important}
  .cert-cta p{margin:7px 0 13px!important;font-size:12.4px!important;line-height:1.55!important}
  .cert-cta .btn{min-height:45px!important;font-size:13.4px!important}
  .review-strip{margin-top:12px!important;padding:12px 13px!important;gap:8px!important;border-radius:12px!important}
  .review-strip p{font-size:11.5px!important;line-height:1.5!important}
  .review-strip a{font-size:11.7px!important;line-height:1.5!important}

  /* Compact ordinary mobile cards/tables after expansion. */
  .compare-docs{gap:9px!important}
  .doc-card{padding:14px!important;border-radius:12px!important}
  .doc-card h3{font-size:15px!important;margin-bottom:6px!important}
  .steps{gap:7px!important}
  .steps li{padding:11px 11px 11px 45px!important;font-size:12.2px!important;line-height:1.5!important}
  .steps li:before{left:11px!important;top:10px!important;width:23px!important;height:23px!important}
  .check-table th,.check-table td{padding:9px!important;font-size:11.8px!important;line-height:1.45!important}

  /* Regional/detail CTA stays visible; avoid long mobile bottom bands. */
  section.dark{padding-top:26px!important;padding-bottom:28px!important}
  section.dark h2{font-size:19px!important;line-height:1.35!important}
  section.dark p{font-size:12.4px!important;line-height:1.55!important}

  /* Footer remains functional but compact on detail pages too. */
  body:not(.home-page) footer{padding-top:25px!important;padding-bottom:84px!important}
  body:not(.home-page) footer .fin{gap:18px!important}
}

@media(max-width:380px){
  .mobile-page-details>summary,
  .mobile-block-details>summary{font-size:13.4px!important;min-height:51px!important}
  main>.ph h1,main>.cert-hero h1{font-size:24px!important}
}

/* Compact, user-expandable mobile footer. Footer links and source information stay in HTML. */
.mobile-footer-details>summary{display:none}
@media(min-width:861px){
  .mobile-footer-details{display:block!important}
  .mobile-footer-details>summary{display:none!important}
  .mobile-footer-details:not([open])>.mobile-footer-details-body,
  .mobile-footer-details>.mobile-footer-details-body{display:block!important}
}
@media(max-width:860px){
  footer .fin{display:block!important}
  footer .fc1{margin-bottom:12px!important}
  footer .fbrand .fbt{margin-top:5px!important;font-size:11.8px!important;line-height:1.45!important}
  footer .fbrand .fbc{margin-top:9px!important;gap:4px!important}
  footer .fbrand .fbc li{font-size:11.6px!important;line-height:1.45!important}
  .mobile-footer-details{display:block!important;border-top:1px solid rgba(255,255,255,.12)}
  .mobile-footer-details>summary{display:flex!important;align-items:center;justify-content:space-between;min-height:42px;padding:8px 0;list-style:none;color:#fff;font-size:12px;font-weight:850;cursor:pointer}
  .mobile-footer-details>summary::-webkit-details-marker{display:none}
  .mobile-footer-details>summary::after{content:'+';font-size:16px;color:#D7E0EA;font-weight:600}
  .mobile-footer-details[open]>summary::after{content:'−'}
  .mobile-footer-details-body{padding:2px 0 12px}
  .mobile-footer-details-body>div{margin:0!important}
  .mobile-footer-details-body h4{display:none!important}
  .mobile-footer-details-body ul{margin:0!important}
  .mobile-footer-details-body li,
  .mobile-footer-details-body a,
  .mobile-footer-details-body p,
  .mobile-footer-details-body dt,
  .mobile-footer-details-body dd{font-size:11.3px!important;line-height:1.5!important}
  .home-page footer .mobile-footer-details .fsrc,
  .home-page footer .mobile-footer-details .fver,
  .home-page footer .mobile-footer-details .fbiz{display:block!important}
  footer .fbot{margin-top:12px!important;padding:11px 14px 80px!important;font-size:10.6px!important;line-height:1.5!important}
}
@media(max-width:860px){
  body footer{padding-bottom:72px!important}
  footer .fbot{padding:11px 14px 12px!important;margin-bottom:0!important}
}


@media(max-width:860px){
  footer .fbrand .fbc{display:grid!important;grid-template-columns:1fr!important;row-gap:7px!important}
  footer .fbrand .fbc li{display:flex!important;align-items:flex-start!important;gap:10px!important;margin:0!important}
  footer .fbrand .fbc span{display:inline-block!important;min-width:42px!important;flex:0 0 42px!important;color:#B7C4D3!important}
  footer .fbrand .fbc a{display:inline-block!important;word-break:break-all!important}
  .mobile-footer-details-body ul li+li{margin-top:4px!important}
}


/* v11.12.12 final contact rhythm: consistent business contact spacing on every page. */
footer .fbrand .fbc{
  display:grid!important;
  grid-template-columns:1fr!important;
  row-gap:7px!important;
  margin-top:10px!important;
}
footer .fbrand .fbc li{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  column-gap:10px!important;
  align-items:start!important;
  margin:0!important;
  line-height:1.55!important;
}
footer .fbrand .fbc span{
  display:block!important;
  min-width:0!important;
  color:#B7C4D3!important;
}
footer .fbrand .fbc a{
  display:block!important;
  min-width:0!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
@media(max-width:860px){
  footer .fbrand .fbc{row-gap:8px!important;margin-top:10px!important}
  footer .fbrand .fbc li{grid-template-columns:44px minmax(0,1fr)!important;column-gap:11px!important;font-size:11.8px!important;line-height:1.55!important}
}


/* v11.12.13 — desktop full-content restore + mobile short-summary accordions */
@media(min-width:861px){
  details.mobile-page-details,
  details.mobile-block-details,
  details.mobile-footer-details{display:block!important}
  details.mobile-page-details>summary,
  details.mobile-block-details>summary,
  details.mobile-footer-details>summary{display:none!important}
  details.mobile-page-details>.mobile-page-details-body,
  details.mobile-block-details>.mobile-block-details-body,
  details.mobile-footer-details>.mobile-footer-details-body{display:block!important;visibility:visible!important;opacity:1!important}
}
@media(max-width:860px){
  .mobile-page-summary-copy,
  .mobile-block-summary-copy{display:block;min-width:0;max-width:calc(100% - 34px)}
  .mobile-page-summary-copy>.mobile-page-summary-text,
  .mobile-block-summary-title{display:block!important;max-width:none!important;-webkit-line-clamp:unset!important;overflow:visible!important}
  .mobile-page-summary-desc,
  .mobile-block-summary-desc{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    margin-top:3px;
    color:#667085;
    font-size:11.4px;
    line-height:1.42;
    font-weight:600;
    letter-spacing:-.025em;
    word-break:keep-all;
  }
  .mobile-page-details[open]>summary .mobile-page-summary-desc,
  .mobile-block-details[open]>summary .mobile-block-summary-desc{color:#7A625E}
}

/* SobangNet v11.12.16 — balanced mobile full-content layer
   Goal: keep the homepage conversion core exactly as approved; on every non-home page,
   show the main content without accordion friction while reducing scroll through tighter
   typography, spacing, cards and tables. Desktop (>860px) is intentionally untouched. */

@media(max-width:860px){
  /* Hide the temporary summary/evidence duplicates used by v11.12.14–15.
     The original server-rendered content below is the single visible source on category pages. */
  body:not(.home-page) .mobile-hybrid-preview,
  body:not(.home-page) .mobile-area-quick{display:none!important}

  /* Category content is fully visible on mobile. Only the footer may remain collapsible. */
  body:not(.home-page) details.mobile-page-details>summary,
  body:not(.home-page) details.mobile-block-details>summary{display:none!important}
  body:not(.home-page) details.mobile-page-details,
  body:not(.home-page) details.mobile-block-details{
    display:block!important;
    border:0!important;
    background:inherit!important;
    overflow:visible!important;
  }
  body:not(.home-page) details.mobile-page-details>.mobile-page-details-body,
  body:not(.home-page) details.mobile-block-details>.mobile-block-details-body{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    padding:0!important;
  }

  /* Overall page rhythm — readable, but materially denser than desktop. */
  body:not(.home-page){line-height:1.5!important}
  body:not(.home-page) .wrap,
  body:not(.home-page) .narrow{width:min(100% - 28px,1120px)!important}
  body:not(.home-page) main>section:not(.ph):not(.cert-hero){padding-top:22px!important;padding-bottom:22px!important}
  body:not(.home-page) main>section.mobile-collapse-section{
    padding-top:21px!important;
    padding-bottom:21px!important;
    border-top:1px solid #EEF0F3!important;
  }
  body:not(.home-page) main>.ph,
  body:not(.home-page) main>.cert-hero{padding-top:22px!important;padding-bottom:22px!important}

  /* Headings: one clear hierarchy, no desktop-sized type on mobile. */
  body:not(.home-page) .sh{margin-bottom:10px!important;gap:6px!important;align-items:flex-start!important}
  body:not(.home-page) .sh h2,
  body:not(.home-page) .mobile-page-details-body .sh h2,
  body:not(.home-page) main section h2{
    font-size:17.5px!important;
    line-height:1.34!important;
    letter-spacing:-.042em!important;
    word-break:keep-all!important;
  }
  body:not(.home-page) main section h3{
    font-size:14.8px!important;
    line-height:1.38!important;
    letter-spacing:-.035em!important;
    margin-bottom:6px!important;
    word-break:keep-all!important;
  }
  body:not(.home-page) main section h4{
    font-size:13.2px!important;
    line-height:1.4!important;
    letter-spacing:-.025em!important;
    margin-bottom:5px!important;
    word-break:keep-all!important;
  }
  body:not(.home-page) .lab,
  body:not(.home-page) .eyebrow{font-size:9.9px!important;line-height:1.2!important;margin-bottom:3px!important}

  /* Body text and lists. Do not shrink action labels or form controls. */
  body:not(.home-page) main section p,
  body:not(.home-page) main section li,
  body:not(.home-page) main section dd,
  body:not(.home-page) main section dt{
    font-size:12.35px!important;
    line-height:1.52!important;
    letter-spacing:-.018em!important;
  }
  body:not(.home-page) main section p{margin-top:0!important;margin-bottom:7px!important}
  body:not(.home-page) main section ul,
  body:not(.home-page) main section ol{margin-top:7px!important;margin-bottom:7px!important}
  body:not(.home-page) main section li+li{margin-top:3px!important}
  body:not(.home-page) .hint,
  body:not(.home-page) .xtwn,
  body:not(.home-page) .bandn{font-size:10.8px!important;line-height:1.45!important}

  /* Cards/boxes: keep evidence visible but reduce empty padding. */
  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;
    border-radius:11px!important;
  }
  body:not(.home-page) .g2,
  body:not(.home-page) .g3,
  body:not(.home-page) .grid2,
  body:not(.home-page) .grid3,
  body:not(.home-page) .compare-docs{gap:9px!important}
  body:not(.home-page) .warning{padding:11px 12px!important;border-radius:9px!important}
  body:not(.home-page) .review-strip{padding:11px 12px!important;margin-top:10px!important;border-radius:10px!important}

  /* Restore headings/boxes that the accordion implementation hid. */
  body:not(.home-page) .mobile-block-details-body>.box,
  body:not(.home-page) .mobile-block-details-body>.dtwrap{
    display:block!important;
    margin:7px 0!important;
    padding:12px!important;
    border:1px solid #E2E6EB!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  body:not(.home-page) .mobile-block-details-body>.box>h4,
  body:not(.home-page) .mc2>.mobile-block-details .mobile-block-details-body h3,
  body:not(.home-page) .mc2>.mobile-block-details .mobile-block-details-body h4{display:block!important}
  body:not(.home-page) .mobile-block-list-section{padding-top:18px!important;padding-bottom:20px!important}
  body:not(.home-page) .mobile-block-list-section .wrap>.mobile-block-details,
  body:not(.home-page) .mobile-block-list-section .g2>.mobile-block-details{margin:0!important;border:0!important;background:transparent!important}

  /* Tables stay readable but compact. Horizontal scrolling remains available where needed. */
  body:not(.home-page) table{font-size:11.25px!important;line-height:1.42!important}
  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{padding:7px 7px!important;font-size:11.25px!important;line-height:1.42!important}

  /* Step/process components. */
  body:not(.home-page) .steps{gap:6px!important}
  body:not(.home-page) .steps li{padding:10px 10px 10px 42px!important;font-size:11.9px!important;line-height:1.48!important}
  body:not(.home-page) .steps li:before{left:10px!important;top:9px!important;width:22px!important;height:22px!important;font-size:10.5px!important}

  /* About/founder page: preserve the compact all-visible character the user preferred. */
  body:not(.home-page) .founder-mini{gap:11px!important}
  body:not(.home-page) .founder-quote,
  body:not(.home-page) .founder-copy{padding:12px!important}
  body:not(.home-page) .founder-quote blockquote{font-size:16px!important;line-height:1.4!important;letter-spacing:-.04em!important}
  body:not(.home-page) .founder-copy p{font-size:12.2px!important;line-height:1.5!important}

  /* Dark/CTA sections: visible but not oversized. */
  body:not(.home-page) section.dark{padding-top:22px!important;padding-bottom:23px!important}
  body:not(.home-page) section.dark h2{font-size:17.5px!important;line-height:1.35!important}
  body:not(.home-page) section.dark p{font-size:12.2px!important;line-height:1.5!important}
  body:not(.home-page) .cert-cta{padding:17px 14px!important}
  body:not(.home-page) .cert-cta h2{font-size:17px!important}
  body:not(.home-page) .cert-cta p{font-size:12px!important;margin:6px 0 11px!important}

  /* Keep primary interactions comfortably tappable despite the compact information density. */
  body:not(.home-page) .btn{min-height:44px!important}
  body:not(.home-page) input,
  body:not(.home-page) select,
  body:not(.home-page) textarea,
  body:not(.home-page) button{font-size:13px}

  /* Internal optional disclosures (FAQ/full station tables/etc.) keep their own native behavior.
     We intentionally do not force open generic details.acc elements. */
}

@media(max-width:360px){
  body:not(.home-page) .wrap,
  body:not(.home-page) .narrow{width:min(100% - 24px,1120px)!important}
  body:not(.home-page) main section h2{font-size:16.8px!important}
  body:not(.home-page) main section p,
  body:not(.home-page) main section li{font-size:12px!important}
}

@media(max-width:860px){
  /* Secondary in-page accordions on category pages become static, expanded reading blocks.
     Very long regional fire-station directories are the only intentional exception. */
  body:not(.home-page) details.acc.category-static-acc{display:block!important;margin:8px 0!important;border:1px solid #E2E6EB!important;border-radius:10px!important;background:#fff!important;overflow:hidden!important}
  body:not(.home-page) details.acc.category-static-acc>summary{
    display:block!important;
    min-height:0!important;
    padding:10px 11px 6px!important;
    list-style:none!important;
    cursor:default!important;
    pointer-events:none!important;
    color:#16305C!important;
    font-size:12.8px!important;
    line-height:1.4!important;
    font-weight:850!important;
    letter-spacing:-.03em!important;
  }
  body:not(.home-page) details.acc.category-static-acc>summary::-webkit-details-marker{display:none!important}
  body:not(.home-page) details.acc.category-static-acc>summary::after{display:none!important;content:none!important}
  body:not(.home-page) details.acc.category-static-acc>.accb{display:block!important;padding:0 11px 10px!important}
  body:not(.home-page) details.acc.category-static-acc>.accb p,
  body:not(.home-page) details.acc.category-static-acc>.accb li{font-size:11.9px!important;line-height:1.48!important}

  /* Regional station directories are long reference tables; keep them user-expandable. */
  body:not(.home-page) details.acc.keep-collapsed-mobile>summary{font-size:12px!important;min-height:42px!important;padding:9px 10px!important}
  body:not(.home-page) details.acc.keep-collapsed-mobile>.accb{font-size:11.4px!important}
}

/* SobangNet v11.12.19 — selective mobile disclosure + rhythm correction
   Core information stays visible. Long reference/FAQ/calculation material is one-tap expandable.
   Homepage conversion core is intentionally untouched. */

/* Desktop: about founder columns should align by their top edge, not vertically center mismatched heights. */
@media(min-width:861px){
  body.about-page main>.ph + .mobile-collapse-section{padding-top:52px!important;padding-bottom:54px!important}
  body.about-page .founder-mini{align-items:start!important;gap:34px!important}
  body.about-page .founder-quote{margin-top:0!important}
  body.about-page .founder-copy h2{margin-top:5px!important;margin-bottom:4px!important;line-height:1.32!important}
  body.about-page .founder-copy p{margin-top:9px!important;line-height:1.68!important}
  body.about-page .founder-copy p+ p{margin-top:8px!important}
}

@media(max-width:860px){
  /* Global mobile reading rhythm: compact but not cramped. */
  body:not(.home-page) main section p,
  body:not(.home-page) main section li,
  body:not(.home-page) main section dd,
  body:not(.home-page) main section dt{line-height:1.5!important}
  body:not(.home-page) main section p{margin-bottom:6px!important}
  body:not(.home-page) main section li+li{margin-top:2px!important}
  body:not(.home-page) main section h2{line-height:1.32!important}
  body:not(.home-page) main section h3{line-height:1.36!important}
  body:not(.home-page) main section .box>*:last-child,
  body:not(.home-page) main section .card>*:last-child{margin-bottom:0!important}

  /* Secondary top-level content becomes a native disclosure row. */
  body:not(.home-page) details.mobile-secondary-details{
    display:block!important;
    border-top:1px solid #E6E9ED!important;
    background:inherit!important;
    overflow:visible!important;
  }
  body:not(.home-page) details.mobile-secondary-details>summary{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    width:min(100% - 28px,1120px)!important;
    min-height:46px!important;
    margin:0 auto!important;
    padding:9px 0!important;
    list-style:none!important;
    cursor:pointer!important;
    color:#16305C!important;
    font-size:12.8px!important;
    line-height:1.36!important;
    font-weight:850!important;
    letter-spacing:-.03em!important;
    word-break:keep-all!important;
  }
  body:not(.home-page) details.mobile-secondary-details>summary::-webkit-details-marker{display:none!important}
  body:not(.home-page) details.mobile-secondary-details>summary::after{
    content:'+'!important;
    flex:0 0 23px!important;
    width:23px!important;height:23px!important;
    display:grid!important;place-items:center!important;
    border:1px solid #D8DEE6!important;border-radius:50%!important;
    background:#fff!important;color:#16305C!important;
    font-size:14px!important;line-height:1!important;font-weight:750!important;
  }
  body:not(.home-page) details.mobile-secondary-details[open]>summary::after{content:'−'!important}
  body:not(.home-page) details.mobile-secondary-details[open]>summary{color:#8E201B!important}
  body:not(.home-page) details.mobile-secondary-details:not([open])>.mobile-page-details-body,
  body:not(.home-page) details.mobile-secondary-details:not([open])>.mobile-block-details-body{display:none!important}
  body:not(.home-page) details.mobile-secondary-details[open]>.mobile-page-details-body,
  body:not(.home-page) details.mobile-secondary-details[open]>.mobile-block-details-body{
    display:block!important;visibility:visible!important;opacity:1!important;padding:0 0 14px!important;
  }

  /* Policy blocks use card-width summaries instead of full-page rules. */
  body:not(.home-page) .mobile-block-list-section details.mobile-secondary-details{
    margin:7px 0!important;border:1px solid #E0E5EB!important;border-radius:10px!important;background:#fff!important;overflow:hidden!important;
  }
  body:not(.home-page) .mobile-block-list-section details.mobile-secondary-details>summary{
    width:auto!important;margin:0!important;padding:10px 11px!important;min-height:44px!important;font-size:12.3px!important;
  }
  body:not(.home-page) .mobile-block-list-section details.mobile-secondary-details[open]>.mobile-block-details-body{padding:0 11px 10px!important}

  /* FAQs, equipment explanations, detailed rate tables: question/title visible, answer on tap. */
  body:not(.home-page) details.acc.mobile-compact-accordion{
    display:block!important;margin:6px 0!important;border:1px solid #E2E6EB!important;border-radius:10px!important;background:#fff!important;overflow:hidden!important;
  }
  body:not(.home-page) details.acc.mobile-compact-accordion>summary{
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:9px!important;
    min-height:43px!important;padding:9px 10px!important;list-style:none!important;cursor:pointer!important;pointer-events:auto!important;
    color:#16305C!important;font-size:12.2px!important;line-height:1.38!important;font-weight:820!important;letter-spacing:-.025em!important;
  }
  body:not(.home-page) details.acc.mobile-compact-accordion>summary::-webkit-details-marker{display:none!important}
  body:not(.home-page) details.acc.mobile-compact-accordion>summary::after{content:'+'!important;color:#667085!important;font-size:15px!important;font-weight:700!important;flex:0 0 auto!important}
  body:not(.home-page) details.acc.mobile-compact-accordion[open]>summary::after{content:'−'!important}
  body:not(.home-page) details.acc.mobile-compact-accordion:not([open])>.accb{display:none!important}
  body:not(.home-page) details.acc.mobile-compact-accordion[open]>.accb{display:block!important;padding:0 10px 10px!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:11.8px!important;line-height:1.48!important}

  /* About remains all-visible and compact; do not add disclosure friction there. */
  body.about-page .founder-mini{gap:10px!important}
  body.about-page .founder-copy p{line-height:1.48!important;margin-bottom:5px!important}
  body.about-page .founder-copy p+p{margin-top:0!important}
}

/* 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.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;
}