@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ============================================================
   청방네트웍스 · SKB 기업회선  —  design tokens
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-alt:#F4F7FA;
  --surface:#FFFFFF;
  --surface-2:#F9FAFC;
  --ink:#0D1219;
  --ink-2:#3D4756;
  --muted:#6C7787;
  --faint:#96A0AE;
  --line:#E2E7EE;
  --line-2:#CBD4DF;

  --accent:#E8541C;
  --accent-deep:#B93E0D;
  --accent-soft:#FFF1EA;
  --accent-line:#FBD5C3;

  --blue:#1667C4;
  --blue-soft:#EAF2FC;
  --green:#3E9E33;

  --ok:#1F7A4C;
  --warn:#B4530C;

  --hero-bg:#070B11;
  --hero-ink:#F2F5F9;
  --hero-muted:#8FA0B4;
  --hero-line:rgba(255,255,255,.11);

  --shadow-s:0 1px 2px rgba(13,18,25,.05), 0 2px 8px -4px rgba(13,18,25,.12);
  --shadow-m:0 2px 4px rgba(13,18,25,.04), 0 12px 32px -18px rgba(13,18,25,.30);
  --shadow-l:0 4px 8px rgba(13,18,25,.05), 0 28px 64px -32px rgba(13,18,25,.40);

  --r-s:8px; --r-m:14px; --r-l:22px;
  --gap:clamp(56px, 8vw, 104px);
  --pad:clamp(18px, 4vw, 32px);

  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0F15;
    --bg-alt:#101720;
    --surface:#141B25;
    --surface-2:#18202B;
    --ink:#E8EDF3;
    --ink-2:#B4BECB;
    --muted:#7E8998;
    --faint:#616D7C;
    --line:#1F2733;
    --line-2:#2E3846;

    --accent:#FF7A45;
    --accent-deep:#FFA37D;
    --accent-soft:#2A1409;
    --accent-line:#4A2413;

    --blue:#5AA6F0;
    --blue-soft:#0E1D2E;
    --green:#6BC961;

    --ok:#5FC28F;
    --warn:#E9A05C;

    --shadow-s:0 1px 2px rgba(0,0,0,.4);
    --shadow-m:0 2px 4px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.9);
    --shadow-l:0 4px 8px rgba(0,0,0,.3), 0 28px 64px -32px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0F15; --bg-alt:#101720; --surface:#141B25; --surface-2:#18202B;
  --ink:#E8EDF3; --ink-2:#B4BECB; --muted:#7E8998; --faint:#616D7C;
  --line:#1F2733; --line-2:#2E3846;
  --accent:#FF7A45; --accent-deep:#FFA37D; --accent-soft:#2A1409; --accent-line:#4A2413;
  --blue:#5AA6F0; --blue-soft:#0E1D2E; --green:#6BC961;
  --ok:#5FC28F; --warn:#E9A05C;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 2px 4px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.9);
  --shadow-l:0 4px 8px rgba(0,0,0,.3), 0 28px 64px -32px rgba(0,0,0,1);
}

/* ============================================================
   base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  letter-spacing:-.011em; word-break:keep-all;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:env(safe-area-inset-bottom);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.035em; line-height:1.24; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px}
::selection{background:var(--accent); color:#fff}

.wrap{width:min(1180px, 100% - var(--pad)*2); margin-inline:auto}
.wrap-narrow{width:min(880px, 100% - var(--pad)*2); margin-inline:auto}
section{padding-block:var(--gap)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* section heading kit */
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:9px; margin-bottom:16px;
}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--accent); flex:none}
.h-sec{font-size:clamp(26px,4.2vw,42px); margin-bottom:16px}
.lede{font-size:clamp(15.5px,1.9vw,18px); color:var(--ink-2); max-width:60ch; line-height:1.8}

/* ============================================================
   buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; border:1.5px solid transparent;
  font-size:15.5px; font-weight:600; letter-spacing:-.02em; white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), background-color .16s, border-color .16s, box-shadow .16s;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 18px -8px rgba(232,84,28,.8)}
.btn-primary:hover{background:var(--accent-deep); box-shadow:0 10px 26px -10px rgba(232,84,28,.9)}
:root[data-theme="dark"] .btn-primary, :root:not([data-theme="light"]) .btn-primary{color:#1A0B04}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .btn-primary{color:#fff} }
.btn-ghost{border-color:var(--line-2); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--ink); background:var(--surface-2)}
.btn-onDark{border-color:rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.06); backdrop-filter:blur(6px)}
.btn-onDark:hover{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.13)}
.btn-lg{padding:17px 34px; font-size:16.5px}

/* ============================================================
   header
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.hdr.is-stuck{border-bottom-color:var(--line); box-shadow:var(--shadow-s)}
.hdr-in{display:flex; align-items:center; gap:20px; height:84px; transition:height .25s}
.hdr.is-stuck .hdr-in{height:68px}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand-mark{height:42px; width:auto; flex:none; transition:height .25s}
.hdr.is-stuck .brand-mark{height:34px}
.brand-wm{display:flex; flex-direction:column; line-height:1.1; margin-right:2px}
.brand-wm b{font-size:23px; font-weight:800; letter-spacing:-.05em; color:var(--ink); white-space:nowrap; transition:font-size .25s}
.hdr.is-stuck .brand-wm b{font-size:20px}
.brand-wm b i{font-style:normal; font-weight:600; font-size:.78em; color:var(--muted); margin-left:1px}
.brand-wm small{
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint); margin-top:4px; white-space:nowrap;
}
@media (max-width:520px){
  .hdr-in{height:70px} .brand-mark{height:34px} .brand-wm b{font-size:19px} .brand-wm small{display:none}
}
/* ---- SKB 공식 파트너 락업 ---- */
.partner{display:flex; align-items:center; gap:15px; flex:none}
.partner::before{content:""; width:1px; height:40px; background:var(--line-2); flex:none}
.partner-lock{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.skb-logo{height:28px; width:auto; flex:none; display:block; transition:height .25s}
.hdr.is-stuck .skb-logo{height:23px}
.skb-fallback{
  font-size:19px; font-weight:700; letter-spacing:-.035em; line-height:1;
  color:var(--accent); white-space:nowrap; display:none;
}
.skb-fallback i{font-style:normal; font-weight:400; color:var(--ink-2); margin-left:1px}
.no-skb-logo .skb-logo{display:none}
.no-skb-logo .skb-fallback{display:block}
.partner-txt{
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.05em;
  color:var(--muted); display:flex; align-items:center; gap:6px; white-space:nowrap; line-height:1;
}
.partner-txt b{color:var(--accent); font-weight:600}
.partner-txt s{text-decoration:none; opacity:.4}
@media (max-width:1180px){ .partner{display:none} }
.hero-tag .skb-logo{height:15px}
.hero-tag .skb-fallback{font-size:14px; color:#FF9C6E}
.ftr-partner{display:flex; align-items:center; gap:16px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line)}
.ftr-partner .skb-logo{height:34px}
.ftr-partner .skb-fallback{font-size:22px}
.ftr-partner span{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.04em; line-height:1.5}
.ftr-partner span b{display:block; color:var(--accent); font-weight:600}
@media (max-width:1180px){ .brand-badge{display:none} }
.nav{display:flex; gap:2px; margin-left:auto}
.nav a{
  padding:9px 15px; border-radius:8px; font-size:15px; font-weight:500;
  color:var(--ink-2); transition:color .15s, background-color .15s;
}
.nav a:hover{color:var(--ink); background:var(--surface-2)}
.nav a.on{color:var(--accent); font-weight:600}
.hdr-cta{display:flex; align-items:center; gap:10px; flex:none}
.hdr-tel{
  display:flex; flex-direction:column; line-height:1.2; text-align:right;
  padding-right:4px;
}
.hdr-tel small{font-size:10.5px; color:var(--muted); letter-spacing:.02em}
.hdr-tel b{font-family:var(--mono); font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-.02em}
.burger{display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; background:var(--surface); align-items:center; justify-content:center}
.burger span{display:block; width:17px; height:1.8px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:1.8px; background:var(--ink); transition:transform .2s}
.burger span::before{top:-5.5px} .burger span::after{top:5.5px}
@media (max-width:1080px){ .hdr-tel{display:none} }
@media (max-width:1000px){ .nav a{padding:9px 11px; font-size:14.5px} }
@media (max-width:940px){
  .nav{display:none} .hdr-tel{display:none} .hdr-cta .btn{display:none}
  .burger{display:flex; margin-left:auto}
}
.mnav{display:none; border-top:1px solid var(--line); background:var(--bg); padding:10px var(--pad) 22px}
.mnav.open{display:block}
.mnav a{display:block; padding:13px 4px; font-size:16.5px; font-weight:500; border-bottom:1px solid var(--line)}
.mnav a:last-of-type{border-bottom:0}
.mnav .btn{width:100%; margin-top:14px}

/* ============================================================
   hero  —  fiber-optic canvas
   ============================================================ */
.hero{position:relative; background:var(--hero-bg); color:var(--hero-ink); overflow:hidden; isolation:isolate}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.85}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 85% at 78% 8%, rgba(232,84,28,.20), transparent 58%),
    radial-gradient(90% 70% at 8% 96%, rgba(22,103,196,.24), transparent 60%),
    linear-gradient(180deg, rgba(7,11,17,.30) 0%, rgba(7,11,17,.06) 42%, rgba(7,11,17,.92) 100%);
}
.hero-in{position:relative; z-index:2; padding-block:clamp(58px,7.2vw,94px)}
.hero-tag{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
  padding:8px 16px 8px 12px; border-radius:100px;
  border:1px solid rgba(255,255,255,.20); background:rgba(255,255,255,.055);
  backdrop-filter:blur(8px);
  font-size:13px; font-weight:500; color:#E9EFF6; letter-spacing:-.01em;
}
.hero-tag .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(62,158,51,.22); flex:none}
.hero-tag .code{font-family:var(--mono); font-size:11.5px; color:#FFB894; letter-spacing:.04em}
.hero h1{
  font-size:clamp(31px,6.1vw,66px); font-weight:800; letter-spacing:-.045em;
  line-height:1.14; margin-bottom:24px; max-width:16ch;
}
.hero h1 .em{
  color:transparent; background:linear-gradient(96deg,#FF8A52 6%,#FFC08F 52%,#7FC0FF 100%);
  -webkit-background-clip:text; background-clip:text;
}
.hero-sub{font-size:clamp(15.5px,2.1vw,19px); color:#B9C6D6; max-width:47ch; line-height:1.75; margin-bottom:32px}
.hero-sub b{color:#F2F5F9; font-weight:600}
.hero-btns{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px}
.hero-facts{
  display:grid; gap:1px; background:var(--hero-line);
  border:1px solid var(--hero-line); border-radius:var(--r-m); overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:720px){ .hero-facts{grid-template-columns:repeat(4,1fr)} }
.hero-facts li{background:rgba(255,255,255,.028); padding:20px 18px; backdrop-filter:blur(3px)}
.hero-facts b{
  display:block; font-family:var(--mono); font-size:clamp(21px,3.1vw,29px);
  font-weight:600; color:#fff; letter-spacing:-.03em; line-height:1.15; margin-bottom:5px;
}
.hero-facts span{font-size:12.5px; color:var(--hero-muted); letter-spacing:-.005em; line-height:1.45; display:block}

/* ============================================================
   reveal
   ============================================================ */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1; transform:none}
.js .reveal[data-d="1"]{transition-delay:.08s}
.js .reveal[data-d="2"]{transition-delay:.16s}
.js .reveal[data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important; transform:none !important; transition:none}
}

/* ============================================================
   products
   ============================================================ */
.sec-head{margin-bottom:44px}
.cards{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:760px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); padding:30px 28px 26px; display:flex; flex-direction:column;
  transition:border-color .2s, transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.card:hover{border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--shadow-m)}
.card.feat{border-color:var(--accent-line); box-shadow:var(--shadow-s)}
.card-tag{
  position:absolute; top:-1px; right:22px;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.09em;
  color:#fff; background:var(--accent); padding:6px 12px; border-radius:0 0 8px 8px; line-height:1;
}
:root[data-theme="dark"] .card-tag{color:#1A0B04}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .card-tag{color:#1A0B04} }
.card-ic{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:20px; flex:none;
}
.card-ic svg{width:22px; height:22px; stroke-width:1.7}
.card h3{font-size:20px; margin-bottom:9px; letter-spacing:-.03em}
.card p{font-size:14.5px; color:var(--ink-2); line-height:1.72; margin-bottom:20px}
.card-list{margin-bottom:24px; display:flex; flex-direction:column; gap:9px}
.card-list li{
  position:relative; padding-left:21px; font-size:14px; color:var(--ink-2); line-height:1.6;
}
.card-list li::before{
  content:""; position:absolute; left:2px; top:8px; width:9px; height:5px;
  border-left:1.8px solid var(--accent); border-bottom:1.8px solid var(--accent);
  transform:rotate(-45deg);
}
.card-foot{margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px}
.card-price{font-family:var(--mono); font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.35; white-space:nowrap}
.card-price small{display:block; font-size:10.5px; color:var(--muted); font-weight:400; letter-spacing:.02em}
.card-more{font-size:13.5px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; flex:none}
.card-more::after{content:"→"; transition:transform .18s}
.card:hover .card-more::after{transform:translateX(3px)}

/* ============================================================
   solution suite  (보안 · 영상 · 부가상품)
   ============================================================ */
.suite{display:grid; gap:16px}
@media (min-width:920px){ .suite{grid-template-columns:1fr 1fr; align-items:start} }
.suite-col{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden}
.suite-hd{padding:24px 26px 20px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.suite-hd .ic{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:14px;
}
.suite-hd .ic svg{width:19px; height:19px; stroke-width:1.8}
.suite-hd h3{font-size:18.5px; letter-spacing:-.032em; margin-bottom:6px}
.suite-hd p{font-size:13.5px; color:var(--muted); line-height:1.65}
.suite-list li{
  padding:18px 26px; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto; gap:5px 14px; align-items:baseline;
}
.suite-list li:last-child{border-bottom:0}
.suite-list h4{font-size:15.5px; letter-spacing:-.028em; margin:0}
.suite-list .tag{
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:3px 8px; border-radius:5px; white-space:nowrap; justify-self:end;
}
.suite-list .tag.plain{color:var(--muted); background:transparent; border-color:var(--line-2)}
.suite-list p{grid-column:1/-1; font-size:13.5px; color:var(--ink-2); line-height:1.68; margin-top:1px}
.suite-note{
  grid-column:1/-1; margin-top:4px; padding:20px 24px; border-radius:var(--r-m);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  display:flex; gap:14px; align-items:flex-start;
}
.suite-note svg{width:20px; height:20px; flex:none; margin-top:2px; color:var(--accent); stroke-width:1.9}
.suite-note p{font-size:14px; color:var(--ink-2); line-height:1.72}
.suite-note strong{color:var(--ink)}

/* ============================================================
   pricing selector
   ============================================================ */
.price{background:var(--bg-alt)}
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:26px; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:100px; width:fit-content; max-width:100%}
.tab{
  padding:11px 20px; border-radius:100px; border:0; background:transparent;
  font-size:14.5px; font-weight:600; color:var(--muted); letter-spacing:-.02em;
  transition:background-color .18s, color .18s;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--accent); color:#fff}
.price-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(24px,3.5vw,40px); box-shadow:var(--shadow-m);
  display:grid; gap:28px; align-items:start;
}
@media (min-width:840px){ .price-panel{grid-template-columns:1.05fr .95fr; gap:44px} }
.price-name{font-size:clamp(23px,3vw,31px); letter-spacing:-.035em; margin-bottom:8px}
.price-for{font-size:14.5px; color:var(--muted); margin-bottom:26px}
.price-fig{display:flex; align-items:flex-end; gap:11px; margin-bottom:6px}
.price-fig .num{font-family:var(--mono); font-size:clamp(38px,6.2vw,56px); font-weight:600; letter-spacing:-.05em; line-height:1; color:var(--ink)}
.price-fig .unit{font-size:17px; color:var(--ink-2); font-weight:600; padding-bottom:5px}
.price-note{font-size:12.5px; color:var(--faint); margin-bottom:26px}
.price-meter{height:7px; border-radius:100px; background:var(--line); overflow:hidden; margin-bottom:10px}
.price-meter i{display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,var(--blue),var(--accent)); transition:width .55s cubic-bezier(.2,.7,.3,1)}
.price-speed{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-bottom:26px}
.price-feats{display:flex; flex-direction:column; gap:11px}
.price-feats li{display:flex; gap:11px; font-size:14.5px; color:var(--ink-2); line-height:1.6}
.price-feats svg{width:17px; height:17px; flex:none; margin-top:4px; color:var(--green); stroke-width:2.4}
.price-side{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m); padding:24px}
.price-side h4{font-size:15px; margin-bottom:14px; letter-spacing:-.025em}
.price-cmp{display:flex; flex-direction:column; gap:12px; margin-bottom:20px}
.price-cmp li{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px; color:var(--ink-2); padding-bottom:12px; border-bottom:1px dashed var(--line)}
.price-cmp li:last-child{border-bottom:0; padding-bottom:0}
.price-cmp b{font-family:var(--mono); font-weight:600; color:var(--ink); white-space:nowrap}
.price-cmp .up{color:var(--accent)}

/* ============================================================
   steps
   ============================================================ */
.steps{display:grid; gap:14px; counter-reset:s}
@media (min-width:700px){ .steps{grid-template-columns:repeat(5,1fr); gap:10px} }
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:24px 20px}
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--accent);
  letter-spacing:.1em; display:block; margin-bottom:12px;
}
.step h4{font-size:16px; margin-bottom:7px; letter-spacing:-.028em}
.step p{font-size:13.5px; color:var(--muted); line-height:1.62}
.step .when{display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); padding:3px 8px; border-radius:5px}

/* ============================================================
   SOS band  —  장애처리 전담팀
   ============================================================ */
.sos{
  background:var(--accent-soft);
  border-block:1px solid var(--accent-line);
  padding-block:clamp(44px,6vw,72px);
}
.sos-in{display:grid; gap:30px}
@media (min-width:900px){ .sos-in{grid-template-columns:1fr 1.05fr; gap:56px; align-items:center} }
.sos-live{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent);
}
.sos-live .pip{position:relative; width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none}
.sos-live .pip::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent);
  animation:pip 2s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes pip{ 0%{transform:scale(1); opacity:.7} 70%,100%{transform:scale(3.2); opacity:0} }
@media (prefers-reduced-motion:reduce){ .sos-live .pip::after{animation:none} }
.sos h2{font-size:clamp(25px,4vw,40px); letter-spacing:-.04em; color:var(--ink); margin-bottom:14px}
.sos h2 em{font-style:normal; color:var(--accent)}
.sos-lead p{font-size:clamp(15px,1.9vw,17.5px); color:var(--ink-2); line-height:1.78; max-width:44ch}
.sos-lead p strong{color:var(--ink); font-weight:700}
.sos-list{display:grid; gap:10px}
.sos-list li{
  background:var(--surface); border:1px solid var(--accent-line); border-radius:var(--r-m);
  padding:18px 22px; display:grid; grid-template-columns:auto 1fr; gap:4px 15px; align-items:start;
}
.sos-list .n{
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border-radius:6px; padding:5px 8px; grid-row:span 2; line-height:1;
}
.sos-list b{font-size:15.5px; letter-spacing:-.028em; color:var(--ink)}
.sos-list span{font-size:13.5px; color:var(--ink-2); line-height:1.65}

/* ============================================================
   coverage
   ============================================================ */
.cover{background:var(--bg-alt)}
.cover-grid{display:grid; gap:28px}
@media (min-width:860px){ .cover-grid{grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center} }
.region-set{display:flex; flex-direction:column; gap:20px}
.region-row b{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:11px;
}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  padding:7px 14px; border-radius:100px; border:1px solid var(--line-2);
  background:var(--surface); font-size:13.5px; font-weight:500; color:var(--ink-2);
  transition:border-color .16s, color .16s, transform .16s;
}
.chip:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.chip.hot{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600}

/* ============================================================
   why us
   ============================================================ */
.why{background:var(--hero-bg); color:var(--hero-ink)}
.why .eyebrow{color:#FF9C6E}
.why .eyebrow::before{background:#FF9C6E}
.why h2{color:#fff}
.why .lede{color:#AFBECE}
.why-grid{display:grid; gap:1px; background:var(--hero-line); border:1px solid var(--hero-line); border-radius:var(--r-m); overflow:hidden; margin-top:40px; grid-template-columns:repeat(2,1fr)}
@media (min-width:800px){ .why-grid{grid-template-columns:repeat(4,1fr)} }
.why-grid li{background:rgba(255,255,255,.026); padding:26px 22px}
.why-grid b{display:block; font-family:var(--mono); font-size:clamp(24px,3.4vw,33px); font-weight:600; color:#fff; letter-spacing:-.04em; line-height:1.1; margin-bottom:8px}
.why-grid span{font-size:13px; color:var(--hero-muted); line-height:1.55; display:block}
.why-cta{margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.why-cta .hint{font-size:13.5px; color:var(--hero-muted)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-size:16.5px; font-weight:600; letter-spacing:-.028em; line-height:1.5;
  transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg); border-color:var(--accent)}
.faq .a{padding:0 40px 24px 0; font-size:15px; color:var(--ink-2); line-height:1.8}
.faq .a strong{color:var(--ink)}

/* ============================================================
   quote form
   ============================================================ */
.quote{background:var(--bg-alt)}
.form-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-l);
}
.fgrid{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:640px){ .fgrid{grid-template-columns:1fr 1fr} }
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px; font-weight:600; color:var(--ink-2); letter-spacing:-.015em}
.field label .req{color:var(--accent); margin-left:3px}
.field input,.field select,.field textarea{
  font:inherit; font-size:15.5px; color:var(--ink); background:var(--bg);
  border:1.5px solid var(--line-2); border-radius:10px; padding:13px 15px;
  transition:border-color .16s, box-shadow .16s; width:100%;
}
.field textarea{min-height:96px; resize:vertical; line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3.5px var(--accent-soft);
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.checks{display:flex; flex-wrap:wrap; gap:8px}
.checks label{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  border:1.5px solid var(--line-2); border-radius:100px; font-size:14px; font-weight:500;
  color:var(--ink-2); cursor:pointer; transition:all .16s; user-select:none;
}
.checks input{position:absolute; opacity:0; width:0; height:0}
.checks label:has(input:checked){border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600}
.consent{
  margin-top:22px; padding:18px 20px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-s);
}
.consent label{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--ink-2); line-height:1.65; cursor:pointer}
.consent input{width:19px; height:19px; margin:2px 0 0; accent-color:var(--accent); flex:none}
.consent a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.consent .detail{margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.7; padding-left:30px}
.form-foot{margin-top:24px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.form-foot .btn{flex:1; min-width:200px}
.form-foot .alt{font-size:13.5px; color:var(--muted); line-height:1.6}
.form-foot .alt a{color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* ============================================================
   legal document pages
   ============================================================ */
.doc{padding-block:clamp(44px,6vw,80px) var(--gap)}
.doc-head{padding-bottom:30px; margin-bottom:38px; border-bottom:2px solid var(--ink)}
.doc-head h1{font-size:clamp(27px,4.4vw,40px); margin-bottom:12px}
.doc-head p{font-size:14.5px; color:var(--muted); line-height:1.7}
.doc-body h2{
  font-size:19px; letter-spacing:-.03em; margin:44px 0 14px; padding-top:22px;
  border-top:1px solid var(--line);
}
.doc-body h2:first-child{margin-top:0; padding-top:0; border-top:0}
.doc-body h3{font-size:15.5px; margin:24px 0 8px; letter-spacing:-.025em}
.doc-body p{font-size:15px; color:var(--ink-2); line-height:1.85; margin-bottom:14px; max-width:70ch}
.doc-body ul{margin:0 0 16px; max-width:70ch}
.doc-body ul li{position:relative; padding-left:20px; margin-bottom:9px; font-size:15px; color:var(--ink-2); line-height:1.78}
.doc-body ul li::before{content:""; position:absolute; left:3px; top:.78em; width:5px; height:5px; border-radius:50%; background:var(--line-2)}
.doc-body strong{color:var(--ink); font-weight:600}
.doc-body .tw{margin:16px 0 22px}
.doc-body table{min-width:520px}
.doc-body .callout{
  background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:var(--r-m); padding:18px 22px; margin:20px 0;
}
.doc-body .callout p{margin:0; font-size:14.5px}
.doc-back{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:26px;
  font-size:14.5px; font-weight:600; color:var(--accent);
}

/* ============================================================
   footer
   ============================================================ */
.ftr{background:var(--surface); border-top:1px solid var(--line); padding-block:52px 40px}
.ftr-top{display:grid; gap:32px; margin-bottom:38px}
@media (min-width:820px){ .ftr-top{grid-template-columns:1.4fr 1fr 1fr} }
.ftr-brand .brand{margin-bottom:16px}
.ftr-brand .brand-mark{height:34px}
.ftr-brand .brand-wm b{font-size:19px}
.ftr-brand p{font-size:14px; color:var(--muted); line-height:1.75; max-width:42ch}
.ftr-col h5{font-size:12px; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 15px; font-weight:500}
.ftr-col li{margin-bottom:10px}
.ftr-col a{font-size:14.5px; color:var(--ink-2); transition:color .15s}
.ftr-col a:hover{color:var(--accent)}
.biz-info{
  border-top:1px solid var(--line); padding-top:26px;
  font-size:12.5px; color:var(--muted); line-height:1.85;
}
.biz-info .row{display:flex; flex-wrap:wrap; gap:4px 18px; margin-bottom:6px}
.biz-info b{color:var(--ink-2); font-weight:600}
.biz-info .legal{margin-top:16px; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center}
.biz-info .legal a{color:var(--ink-2); font-weight:600}
.biz-info .copy{margin-top:14px; color:var(--faint); font-size:12px}

/* ============================================================
   mobile sticky CTA
   ============================================================ */
.mcta{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(180%) blur(14px); border-top:1px solid var(--line);
  gap:8px;
}
.mcta a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 6px; border-radius:12px; font-size:12.5px; font-weight:600; letter-spacing:-.02em;
}
.mcta a svg{width:19px; height:19px; stroke-width:1.9}
.mcta .m-tel{background:var(--surface-2); border:1px solid var(--line); color:var(--ink)}
.mcta .m-kko{background:#FEE500; color:#191600; border:1px solid #E5CF00}
.mcta .m-q{background:var(--accent); color:#fff}
@media (max-width:940px){ .mcta{display:flex} body{padding-bottom:78px} }

/* ============================================================
   서브페이지 공용 (구내 네트워크 공사 / 통신설비 유지보수)
   ============================================================ */
.subhero{position:relative; background:var(--hero-bg); color:var(--hero-ink); overflow:hidden; isolation:isolate}
.subhero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(110% 80% at 82% 4%, rgba(232,84,28,.18), transparent 58%),
    radial-gradient(90% 70% at 4% 100%, rgba(22,103,196,.22), transparent 62%),
    linear-gradient(180deg, rgba(7,11,17,.28) 0%, rgba(7,11,17,.04) 46%, rgba(7,11,17,.86) 100%);
}
.subhero-in{position:relative; z-index:2; padding-block:clamp(46px,6vw,78px)}
.crumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--hero-muted); margin-bottom:20px; flex-wrap:wrap}
.crumb a{color:var(--hero-muted); text-decoration:none; transition:color .15s}
.crumb a:hover{color:var(--hero-ink)}
.crumb i{font-style:normal; opacity:.45}
.crumb b{color:var(--hero-ink); font-weight:600}
.subhero h1{font-size:clamp(28px,4.8vw,48px); line-height:1.22; letter-spacing:-.04em; margin-bottom:18px}
.subhero h1 .em{color:var(--accent)}
.subhero .sub{font-size:clamp(15px,1.7vw,18px); color:#C3CEDC; line-height:1.78; max-width:62ch; margin-bottom:26px}
.subhero .sub b{color:var(--hero-ink); font-weight:600}
.subhero-btns{display:flex; flex-wrap:wrap; gap:10px}

/* 미확정 값 배지 */
.todo{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.06em; color:var(--warn); background:#FFF6EC; border:1px dashed #E8B87A;
  padding:2px 7px; border-radius:5px; vertical-align:middle; margin-left:6px; white-space:nowrap;
}
.todo-note{
  margin-top:18px; padding:14px 16px; border-radius:var(--r-s);
  background:#FFF9F2; border:1px dashed #E8B87A;
  font-size:13.5px; color:var(--warn); line-height:1.7;
}

/* 표 (법정 일정 · 과태료 · 조정계수) */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface)}
table.tbl{width:100%; border-collapse:collapse; font-size:14.5px; min-width:480px}
table.tbl th, table.tbl td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line)}
table.tbl thead th{
  background:var(--surface-2); font-size:12px; font-weight:600; color:var(--muted);
  letter-spacing:.02em; white-space:nowrap;
}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td b{font-weight:600}
table.tbl .num{font-family:var(--mono); font-size:13.5px; white-space:nowrap}
table.tbl tr.hot td{background:#FFF4EE}
table.tbl tr.hot td b{color:var(--accent)}
.tbl-cap{margin-top:10px; font-size:12.5px; color:var(--faint); line-height:1.65}

/* 연면적 판별기 */
.gfa{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-l);
  padding:clamp(24px,3.4vw,38px); box-shadow:var(--shadow-m);
}
.gfa-label{font-size:15px; font-weight:600; letter-spacing:-.025em; margin-bottom:6px}
.gfa-help{font-size:13.5px; color:var(--muted); line-height:1.65; margin-bottom:16px}
.gfa-in{display:flex; align-items:stretch; max-width:340px; border:1.5px solid var(--line-2); border-radius:var(--r-s); overflow:hidden; transition:border-color .16s, box-shadow .16s; background:var(--surface)}
.gfa-in:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.gfa-in input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--mono); font-size:19px; font-weight:600; color:var(--ink);
  padding:13px 14px; -moz-appearance:textfield;
}
.gfa-in input::-webkit-outer-spin-button,
.gfa-in input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.gfa-in input::placeholder{color:var(--faint); font-weight:400}
.gfa-in .unit{display:flex; align-items:center; padding:0 15px; background:var(--surface-2); border-left:1px solid var(--line); font-size:14px; color:var(--muted); font-weight:600}
.gfa-out{max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .25s ease, margin-top .3s ease}
.gfa-out.show{max-height:520px; opacity:1; margin-top:22px; padding:20px 22px; border-radius:var(--r-m); border:1px solid var(--line)}
.gfa-out.is-no{background:var(--surface-2); border-color:var(--line)}
.gfa-out.is-soon{background:var(--blue-soft); border-color:#C3DAF5}
.gfa-out.is-urgent{background:var(--accent-soft); border-color:var(--accent-line)}
.gfa-out b{display:block; font-size:17px; letter-spacing:-.03em; margin-bottom:7px}
.gfa-out.is-urgent b{color:var(--accent-deep)}
.gfa-out.is-soon b{color:var(--blue)}
.gfa-out p{font-size:14px; color:var(--ink-2); line-height:1.72}
.gfa-out p .hot{display:inline; font-size:inherit; color:var(--accent); margin:0}
.gfa-facts{display:grid; gap:8px; margin-top:16px; padding-top:16px; border-top:1px dashed var(--line-2)}
@media (min-width:620px){ .gfa-facts{grid-template-columns:repeat(3,1fr)} }
.gfa-facts li{display:flex; flex-direction:column; gap:3px; list-style:none}
.gfa-facts span{font-size:11.5px; color:var(--muted); letter-spacing:.01em}
.gfa-facts b{font-size:15px; margin:0; color:var(--ink); letter-spacing:-.02em}

/* 서비스 카드 (유지보수 4대 업무) */
.svc{display:grid; gap:14px}
@media (min-width:640px){ .svc{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .svc{grid-template-columns:repeat(4,1fr)} }
.svc-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:26px 22px}
.svc-item .n{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--accent); letter-spacing:.1em; display:block; margin-bottom:12px}
.svc-item h4{font-size:16.5px; letter-spacing:-.03em; margin-bottom:8px}
.svc-item p{font-size:13.5px; color:var(--muted); line-height:1.68}
.svc-item ul{margin-top:12px; display:flex; flex-direction:column; gap:5px}
.svc-item li{font-size:13px; color:var(--ink-2); padding-left:13px; position:relative; line-height:1.55; list-style:none}
.svc-item li::before{content:""; position:absolute; left:0; top:8px; width:4px; height:4px; border-radius:50%; background:var(--accent)}

/* 요금 — 포트당 단가 */
.rate{display:grid; gap:14px}
@media (min-width:760px){ .rate{grid-template-columns:repeat(3,1fr)} }
.rate-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:26px 22px; display:flex; flex-direction:column}
.rate-item.lead{border-color:var(--accent-line); background:var(--accent-soft)}
.rate-item h4{font-size:15.5px; letter-spacing:-.028em; margin-bottom:4px}
.rate-item .for{font-size:12.5px; color:var(--muted); margin-bottom:16px; line-height:1.55}
.rate-item .fig{font-family:var(--mono); font-size:clamp(24px,3.2vw,32px); font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1.1}
.rate-item.lead .fig{color:var(--accent-deep)}
.rate-item .fig small{font-size:14px; font-weight:500; color:var(--muted); margin-left:3px; letter-spacing:0}
.rate-item .per{font-size:12.5px; color:var(--muted); margin-top:7px}
.rate-item ul{margin-top:16px; padding-top:15px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px}
.rate-item.lead ul{border-top-color:var(--accent-line)}
.rate-item li{font-size:13px; color:var(--ink-2); line-height:1.55; padding-left:13px; position:relative; list-style:none}
.rate-item li::before{content:""; position:absolute; left:0; top:8px; width:4px; height:4px; border-radius:50%; background:var(--line-2)}

/* 대가 산정식 */
.calc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden}
.calc-row{display:flex; align-items:baseline; gap:14px; padding:15px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.calc-row:last-child{border-bottom:0}
.calc-row.total{background:var(--surface-2)}
.calc-row .k{font-family:var(--mono); font-size:11.5px; color:var(--accent); font-weight:600; flex:none; width:22px}
.calc-row .t{font-size:15px; font-weight:600; letter-spacing:-.025em; flex:none; min-width:96px}
.calc-row .v{font-size:13.5px; color:var(--muted); line-height:1.6; font-family:var(--mono)}
.calc-row.total .t{color:var(--accent-deep)}

/* 2단 레이아웃 */
.split{display:grid; gap:clamp(24px,3.2vw,44px)}
/* 그리드 아이템 기본값 min-width:auto 가 내부 표(min-width:480px)에 밀려
   컨테이너를 넓히는 것을 막는다 — 모바일 가로 스크롤 방지 */
.split > *{min-width:0}
.svc > *, .rate > *, .cards > *{min-width:0}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr; align-items:start} }
.split h3{font-size:clamp(19px,2.3vw,24px); letter-spacing:-.034em; margin-bottom:12px}
.split p{font-size:15px; color:var(--ink-2); line-height:1.8}
.split p + p{margin-top:12px}