@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=Archivo:wdth,wght@100..125,400..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ============================================================
   청방네트웍스㈜  —  corporate site  ·  dark-first
   ============================================================ */
:root{
  --bg:#080A0D;
  --bg-2:#0C1015;
  --surface:#11161D;
  --surface-2:#161C25;
  --ink:#EDF2F8;
  --ink-2:#AAB6C4;
  --muted:#78848F;
  --faint:#586471;
  --line:#1B222B;
  --line-2:#29323D;

  --accent:#3391E8;
  --accent-2:#7CBEF7;
  --accent-soft:#0B1B2B;
  --accent-line:#17334D;

  --green:#4FB840;
  --amber:#F5A623;

  --glow:rgba(51,145,232,.30);
  --shadow:0 2px 6px rgba(0,0,0,.5), 0 24px 60px -30px rgba(0,0,0,1);

  --r-s:8px; --r-m:14px; --r-l:24px;
  --gap:clamp(64px, 9vw, 130px);
  --pad:clamp(18px, 4vw, 40px);

  --kr:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif;
  --en:"Archivo",var(--kr);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#FFFFFF; --bg-2:#F3F6FA; --surface:#FFFFFF; --surface-2:#F6F8FB;
    --ink:#080C11; --ink-2:#3A4653; --muted:#68737F; --faint:#95A0AD;
    --line:#E3E9EF; --line-2:#C8D2DD;
    --accent:#0F63C0; --accent-2:#0A4A93; --accent-soft:#EBF3FC; --accent-line:#C6DDF6;
    --green:#2C851F; --amber:#B87708;
    --glow:rgba(15,99,192,.18);
    --shadow:0 1px 2px rgba(8,12,17,.05), 0 20px 48px -28px rgba(8,12,17,.35);
  }
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg-2:#F3F6FA; --surface:#FFFFFF; --surface-2:#F6F8FB;
  --ink:#080C11; --ink-2:#3A4653; --muted:#68737F; --faint:#95A0AD;
  --line:#E3E9EF; --line-2:#C8D2DD;
  --accent:#0F63C0; --accent-2:#0A4A93; --accent-soft:#EBF3FC; --accent-line:#C6DDF6;
  --green:#2C851F; --amber:#B87708;
  --glow:rgba(15,99,192,.18);
  --shadow:0 1px 2px rgba(8,12,17,.05), 0 20px 48px -28px rgba(8,12,17,.35);
}

/* ---------- 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(--kr); font-size:16px; line-height:1.72;
  letter-spacing:-.012em; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0}
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.042em; line-height:1.2; 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:4px; border-radius:4px}
::selection{background:var(--accent); color:#fff}

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

/* ---------- section 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:10px; margin-bottom:20px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent); flex:none}
.h2{font-size:clamp(28px,4.6vw,52px); margin-bottom:18px; letter-spacing:-.048em}
.lede{font-size:clamp(15.5px,1.85vw,18px); color:var(--ink-2); line-height:1.85; max-width:58ch}
.en-label{
  font-family:var(--en); font-variation-settings:"wdth" 118,"wght" 500;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:2px; border:1px solid transparent;
  font-size:15px; font-weight:600; letter-spacing:-.02em; white-space:nowrap;
  transition:background-color .2s, border-color .2s, color .2s, transform .16s;
}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-solid:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn-line{border-color:var(--line-2); color:var(--ink)}
.btn-line:hover{border-color:var(--accent); color:var(--accent)}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}

/* ============================================================
   header
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:80;
  transition:background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
}
.hdr-in{display:flex; align-items:center; gap:24px; height:88px; transition:height .3s}
.hdr.is-stuck .hdr-in{height:68px}
.brand{display:flex; align-items:center; gap:13px; flex:none}
.brand-mark{height:44px; width:auto; flex:none; transition:height .3s}
.hdr.is-stuck .brand-mark{height:34px}
.brand-wm{display:flex; flex-direction:column; line-height:1.08}
.brand-wm b{font-size:24px; font-weight:800; letter-spacing:-.055em; color:var(--ink); white-space:nowrap; transition:font-size .3s}
.hdr.is-stuck .brand-wm b{font-size:20px}
.brand-wm b i{font-style:normal; font-weight:500; font-size:.74em; color:var(--muted); margin-left:2px}
.brand-wm small{
  font-family:var(--en); font-variation-settings:"wdth" 115,"wght" 500;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:5px; white-space:nowrap;
}
.nav{display:flex; gap:4px; margin-left:auto}
.nav a{
  position:relative; padding:10px 16px; font-size:15px; font-weight:500; color:var(--ink-2);
  transition:color .18s;
}
.nav a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.hdr-cta{flex:none; display:flex; align-items:center; gap:12px}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:2px; align-items:center; justify-content:center}
.burger span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}
@media (max-width:1000px){
  .nav{display:none} .hdr-cta .btn{display:none} .burger{display:flex; margin-left:auto}
}
@media (max-width:520px){
  .hdr-in{height:72px} .brand-mark{height:36px} .brand-wm b{font-size:20px} .brand-wm small{display:none}
}
.mnav{display:none; background:var(--bg); border-top:1px solid var(--line); padding:8px var(--pad) 26px}
.mnav.open{display:block}
.mnav a{display:block; padding:15px 2px; font-size:17px; font-weight:500; border-bottom:1px solid var(--line)}
.mnav .btn{width:100%; margin-top:18px}

/* ============================================================
   hero
   ============================================================ */
.hero{position:relative; min-height:clamp(600px,94vh,940px); display:flex; align-items:flex-end; overflow:hidden; background:var(--bg)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(78% 62% at 72% 22%, var(--glow), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb,var(--bg) 72%,transparent) 0%, transparent 34%, color-mix(in srgb,var(--bg) 92%,transparent) 88%);
}
.hero-in{position:relative; z-index:2; padding-block:clamp(120px,15vw,180px) clamp(52px,7vw,90px)}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-bottom:34px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
}
.hero-meta b{color:var(--accent); font-weight:500}
.hero-en{
  display:block; font-family:var(--en);
  font-variation-settings:"wdth" 122,"wght" 700;
  font-size:clamp(13px,2.1vw,20px); letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); margin-bottom:22px;
}
.hero h1{
  font-size:clamp(36px,7.4vw,92px); font-weight:800; letter-spacing:-.055em;
  line-height:1.08; margin-bottom:30px; max-width:15ch;
}
.hero h1 .thin{font-weight:300; color:var(--ink-2); letter-spacing:-.045em}
.hero-sub{font-size:clamp(15.5px,2vw,19px); color:var(--ink-2); max-width:48ch; line-height:1.82; margin-bottom:40px}
.hero-sub b{color:var(--ink); font-weight:600}
.hero-btns{display:flex; flex-wrap:wrap; gap:12px}
.scroll-cue{
  position:absolute; right:var(--pad); bottom:clamp(52px,7vw,90px); z-index:2;
  display:flex; align-items:center; gap:12px; writing-mode:vertical-rl;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}
.scroll-cue::after{content:""; width:1px; height:56px; background:linear-gradient(var(--accent),transparent); animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}
@media (max-width:900px){ .scroll-cue{display:none} }
@media (prefers-reduced-motion:reduce){ .scroll-cue::after{animation:none} }

/* ============================================================
   stats band
   ============================================================ */
.stats{border-block:1px solid var(--line); background:var(--bg-2); padding-block:0}
.stats-grid{display:grid; grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){ .stats-grid{grid-template-columns:repeat(4,1fr)} }
.stat{padding:38px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
@media (min-width:860px){ .stat{border-bottom:0} .stat:last-child{border-right:0} }
@media (max-width:859px){ .stat:nth-child(2n){border-right:0} .stat:nth-last-child(-n+2){border-bottom:0} }
.stat b{
  display:block; font-family:var(--mono); font-size:clamp(30px,4.6vw,46px);
  font-weight:500; letter-spacing:-.05em; line-height:1; color:var(--ink); margin-bottom:12px;
}
/* 숫자를 감싼 span(카운트업·연도 자동계산용)이 아래 `.stat span` 규칙에 걸려
   작은 회색 글씨로 줄바꿈되던 문제 수정 — b 안의 span은 b의 서식을 그대로 따른다 */
.stat b > span{display:inline; font:inherit; color:inherit; letter-spacing:inherit}
.stat b .u{font-size:.5em; color:var(--accent); margin-left:4px; letter-spacing:0; font-weight:500}
.stat span{display:block; font-size:13.5px; color:var(--muted); line-height:1.6}

/* ============================================================
   business
   ============================================================ */
.biz-grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:52px}
@media (min-width:880px){ .biz-grid{grid-template-columns:repeat(3,1fr)} }
.biz{background:var(--bg); padding:38px 34px 34px; position:relative; overflow:hidden; transition:background-color .3s}
.biz:hover{background:var(--surface)}
.biz::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.biz:hover::before{transform:scaleX(1)}
.biz .n{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent); display:block; margin-bottom:26px}
.biz h3{font-size:22px; margin-bottom:12px; letter-spacing:-.04em}
.biz .en{display:block; font-family:var(--en); font-variation-settings:"wdth" 112,"wght" 500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:18px}
.biz p{font-size:14.5px; color:var(--ink-2); line-height:1.78; margin-bottom:22px}
.biz ul li{
  position:relative; padding-left:16px; font-size:13.5px; color:var(--muted);
  line-height:1.68; margin-bottom:7px;
}
.biz ul li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:1px; background:var(--line-2)}

/* ============================================================
   history timeline
   ============================================================ */
.hist{background:var(--bg-2); border-block:1px solid var(--line)}
.hist-wrap{display:grid; gap:40px}
@media (min-width:940px){ .hist-wrap{grid-template-columns:300px 1fr; gap:70px; align-items:start} }
.hist-side{position:sticky; top:120px}
.hist-year{
  font-family:var(--mono); font-size:clamp(52px,8vw,88px); font-weight:500;
  letter-spacing:-.06em; line-height:1; color:var(--accent); margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.hist-side p{font-size:14px; color:var(--muted); line-height:1.75}
@media (max-width:939px){ .hist-side{position:static} .hist-year{font-size:44px} }
.hist-list{border-top:1px solid var(--line-2)}
.hist-item{padding:30px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:86px 1fr; gap:24px; align-items:start}
@media (max-width:600px){ .hist-item{grid-template-columns:1fr; gap:10px} }
.hist-item .yr{
  font-family:var(--mono); font-size:15px; font-weight:600; color:var(--ink);
  letter-spacing:-.02em; padding-top:2px;
}
.hist-item.on .yr{color:var(--accent)}
.hist-item ul li{
  position:relative; padding-left:22px; font-size:15px; color:var(--ink-2);
  line-height:1.72; margin-bottom:10px;
}
.hist-item ul li:last-child{margin-bottom:0}
.hist-item ul li::before{
  content:""; position:absolute; left:0; top:.66em; width:7px; height:7px;
  border-radius:50%; border:1.5px solid var(--line-2); background:var(--bg-2);
}
.hist-item ul li.key{color:var(--ink); font-weight:600}
.hist-item ul li.key::before{border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.hist-item ul li .m{font-family:var(--mono); font-size:12.5px; color:var(--faint); margin-right:8px}

/* ============================================================
   credentials
   ============================================================ */
.cred-grid{display:grid; gap:14px; margin-top:48px}
@media (min-width:720px){ .cred-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .cred-grid{grid-template-columns:repeat(3,1fr)} }
.cred{
  border:1px solid var(--line); border-radius:2px; padding:26px 26px 24px;
  background:var(--surface); transition:border-color .25s, transform .25s;
}
.cred:hover{border-color:var(--accent-line); transform:translateY(-2px)}
.cred .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:14px}
.cred h4{font-size:17px; letter-spacing:-.032em; margin-bottom:7px}
.cred p{font-family:var(--mono); font-size:12.5px; color:var(--muted); line-height:1.6}

/* ============================================================
   clients marquee
   ============================================================ */
.clients{border-block:1px solid var(--line); background:var(--bg-2); padding-block:clamp(44px,6vw,70px); overflow:hidden}
.mq{display:flex; gap:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex; flex:none; gap:0; animation:mq 42s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .mq-track{animation:none} .mq{mask-image:none; overflow-x:auto} }
.mq-track span{
  flex:none; padding:0 clamp(24px,3.4vw,48px);
  font-size:clamp(17px,2.3vw,25px); font-weight:600; letter-spacing:-.038em;
  color:var(--muted); white-space:nowrap; transition:color .25s;
}
.mq-track span:hover{color:var(--ink)}
.mq-track span::after{content:"·"; margin-left:clamp(24px,3.4vw,48px); color:var(--line-2)}

/* ============================================================
   SKB cross-link banner
   ============================================================ */
.xlink{
  border:1px solid var(--accent-line); background:var(--surface);
  border-radius:2px; padding:clamp(30px,4.2vw,52px); position:relative; overflow:hidden;
  display:grid; gap:26px;
}
@media (min-width:880px){ .xlink{grid-template-columns:1fr auto; align-items:center; gap:44px} }
.xlink::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 130% at 96% 50%, var(--glow), transparent 66%);
}
.xlink > *{position:relative}
.xlink .skb-logo{height:30px; width:auto; margin-bottom:20px}
.xlink h3{font-size:clamp(21px,3vw,31px); margin-bottom:12px; letter-spacing:-.042em}
.xlink p{font-size:15px; color:var(--ink-2); line-height:1.78; max-width:52ch}
.xlink .code{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--accent);
  border:1px solid var(--accent-line); background:var(--accent-soft); padding:6px 12px; border-radius:2px;
}

/* ============================================================
   location
   ============================================================ */
.loc-grid{display:grid; gap:36px; margin-top:48px}
@media (min-width:900px){ .loc-grid{grid-template-columns:1fr 1fr; gap:60px} }
.loc-block{margin-bottom:32px}
.loc-block:last-child{margin-bottom:0}
.loc-block h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:500; margin-bottom:12px;
}
.loc-block p{font-size:15.5px; color:var(--ink-2); line-height:1.82}
.loc-block p b{color:var(--ink); font-weight:600}
.loc-block .big{font-family:var(--mono); font-size:21px; color:var(--ink); letter-spacing:-.03em}
.loc-block ul li{font-size:14.5px; color:var(--ink-2); line-height:1.75; margin-bottom:10px; padding-left:16px; position:relative}
.loc-block ul li::before{content:""; position:absolute; left:0; top:.72em; width:6px; height:1px; background:var(--accent)}

/* ============================================================
   footer
   ============================================================ */
.ftr{border-top:1px solid var(--line); padding-block:56px 44px; background:var(--bg-2)}
.ftr-top{display:grid; gap:36px; margin-bottom:44px}
@media (min-width:860px){ .ftr-top{grid-template-columns:1.5fr 1fr 1fr} }
.ftr .brand{margin-bottom:20px}
.ftr-brand p{font-size:14px; color:var(--muted); line-height:1.8; max-width:40ch}
.ftr-col h5{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:0 0 16px; font-weight:500}
.ftr-col li{margin-bottom:11px}
.ftr-col a{font-size:14.5px; color:var(--ink-2); transition:color .18s}
.ftr-col a:hover{color:var(--accent)}
.biz-info{border-top:1px solid var(--line); padding-top:28px; font-size:12.5px; color:var(--muted); line-height:1.9}
.biz-info .row{display:flex; flex-wrap:wrap; gap:3px 20px; margin-bottom:5px}
.biz-info b{color:var(--ink-2); font-weight:600}
.biz-info .copy{margin-top:16px; color:var(--faint); font-size:11.5px; font-family:var(--mono); letter-spacing:.02em}

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

/* ============================================================
   연도 자동 계산 span
   <span data-years="2004">22</span> 는 글 흐름 안에 놓이므로
   어떤 부모(.btn span, .stat span 처럼 block 으로 지정된 곳) 아래에서도
   줄바꿈되지 않도록 전역으로 inline 을 강제한다.
   ============================================================ */
[data-years]{
  display:inline !important;
  font:inherit; color:inherit; letter-spacing:inherit;
}