@charset "UTF-8";
:root{
  /* ═══════════════════════════════════════════════════════════
     Montage (Wanted Design System) 기반 디자인 토큰
     Copyright (c) 2026 Wanted Lab, Inc. — MIT License
     https://montage.wanted.co.kr · https://github.com/wanteddev/montage-web

     Permission is hereby granted, free of charge, to any person obtaining a
     copy of this software and associated documentation files (the "Software"),
     to deal in the Software without restriction, including without limitation
     the rights to use, copy, modify, merge, publish, distribute, sublicense,
     and/or sell copies of the Software, and to permit persons to whom the
     Software is furnished to do so, subject to the following conditions:
     The above copyright notice and this permission notice shall be included
     in all copies or substantial portions of the Software.
     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
     ═══════════════════════════════════════════════════════════ */

  /* ---- Atomic · Blue (Primary) ---- */
  --blue-10:#001536; --blue-20:#002966; --blue-30:#003E9C; --blue-40:#0054D1;
  --blue-45:#005EEB; --blue-50:#0066FF; --blue-55:#1A75FF; --blue-60:#3385FF;
  --blue-65:#4F95FF; --blue-70:#69A5FF; --blue-80:#9EC5FF; --blue-90:#C9DEFE;
  --blue-95:#EAF2FE; --blue-99:#F7FBFF;

  /* ---- Atomic · Cool Neutral ---- */
  --cn-5:#0F0F10;  --cn-7:#141415;  --cn-10:#171719; --cn-15:#1B1C1E;
  --cn-17:#212225; --cn-20:#292A2D; --cn-22:#2E2F33; --cn-23:#333438;
  --cn-25:#37383C; --cn-30:#46474C; --cn-40:#5A5C63; --cn-50:#70737C;
  --cn-60:#878A93; --cn-70:#989BA2; --cn-80:#AEB0B6; --cn-90:#C2C4C8;
  --cn-95:#DBDCDF; --cn-96:#E1E2E4; --cn-97:#EAEBEC; --cn-98:#F4F4F5;
  --cn-99:#F7F7F8;

  /* ---- Atomic · Status ---- */
  --red-50:#FF4242;   --orange-40:#D47800; --orange-50:#FF9200; --green-50:#00BF40;

  /* ---- Semantic (Light) ---- */
  --primary:var(--blue-50);
  --primary-strong:var(--blue-45);
  --primary-heavy:var(--blue-40);
  --label-normal:var(--cn-10);
  --label-strong:#000000;
  --label-neutral:rgba(46,47,51,.88);
  --label-alt:rgba(55,56,60,.61);
  --label-assistive:rgba(55,56,60,.28);
  --bg-normal:#FFFFFF;
  --bg-alt:var(--cn-99);
  --line-normal:rgba(112,115,124,.22);
  --line-neutral:rgba(112,115,124,.16);
  --line-solid:var(--cn-96);
  --line-primary:rgba(0,102,255,.28);

  /* ---- 피플레이 매핑 (기존 변수명 유지) ---- */
  --paper:var(--cn-99);
  --surface:#FFFFFF;
  --surface-2:var(--cn-98);
  --ink:var(--cn-10);
  --ink-soft:var(--cn-30);
  --ink-mute:var(--cn-40);   /* 접근성: cn-50(4.43) → cn-40(6.24) */
  --line:var(--line-solid);
  --brand:var(--blue-50);
  --brand-ink:var(--blue-40);
  --brand-soft:var(--blue-95);
  --spark:var(--orange-50);
  --spark-soft:#FEF4E6;
  --ink-band:var(--cn-15);

  /* ---- Elevation ---- */
  --shadow-sm:0 1px 2px rgba(15,15,16,.04), 0 4px 14px rgba(15,15,16,.05);
  --shadow-md:0 10px 30px rgba(15,15,16,.10), 0 2px 8px rgba(15,15,16,.05);
  --shadow-brand:0 16px 40px rgba(0,102,255,.22);

  /* ---- Radius ---- */
  --radius:20px;
  --radius-sm:12px;

  /* ---- Spacing (Montage 4배수) ---- */
  --sp-2:2px;   --sp-4:4px;   --sp-6:6px;   --sp-8:8px;   --sp-10:10px;
  --sp-12:12px; --sp-14:14px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
  --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-56:56px; --sp-64:64px;
  --sp-72:72px; --sp-80:80px;

  /* ---- Grid (Montage) ---- */
  --maxw:1100px;

  /* ---- Typography (Montage 스케일) ---- */
  --font-kr:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;
  --font-dis:"Space Grotesk",var(--font-kr);
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --t-display1:56px;  --lh-display1:72px;  --ls-display1:-.0319em;
  --t-display2:40px;  --lh-display2:52px;  --ls-display2:-.0282em;
  --t-display3:36px;  --lh-display3:48px;  --ls-display3:-.027em;
  --t-title1:32px;    --lh-title1:44px;    --ls-title1:-.0253em;
  --t-title2:28px;    --lh-title2:38px;    --ls-title2:-.0236em;
  --t-title3:24px;    --lh-title3:32px;    --ls-title3:-.023em;
  --t-head1:22px;     --lh-head1:30px;     --ls-head1:-.0194em;
  --t-head2:20px;     --lh-head2:28px;     --ls-head2:-.012em;
  --t-headline1:18px; --lh-headline1:26px; --ls-headline1:-.002em;
  --t-body1:16px;     --lh-body1:24px;     --ls-body1:.0057em;
  --t-body1r:16px;    --lh-body1r:26px;
  --t-body2:15px;     --lh-body2:22px;     --ls-body2:.0096em;
  --t-label1:14px;    --lh-label1:20px;    --ls-label1:.0145em;
  --t-label2:13px;    --lh-label2:18px;    --ls-label2:.0194em;
  --t-caption1:12px;  --lh-caption1:16px;  --ls-caption1:.0252em;
  --t-caption2:11px;  --lh-caption2:14px;  --ls-caption2:.0311em;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-kr);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--brand);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:104px 0}
.section--tight{padding:80px 0}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand);
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--brand);display:inline-block}
.eyebrow--light{color:#9DB0FF}
.eyebrow--light::before{background:#9DB0FF}
h2.sec-title{
  font-size:clamp(28px,3.8vw,40px);line-height:1.3;letter-spacing:var(--ls-display2);
  font-weight:800;
  line-height:1.38;   /* 한글 받침 고려 */
  letter-spacing:-.02em;
  margin:20px 0 0;
  max-width:20ch;
}
.sec-lead{
  color:var(--ink-soft);
  font-size:clamp(15px,1.3vw,16px);line-height:1.625;letter-spacing:var(--ls-body1);
  margin-top:20px;
  max-width:56ch;
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.98rem;
  padding:14px 24px;border-radius:999px;
  transition:transform .18s ease, box-shadow .2s ease, background .2s ease;
}
.btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}
.btn--primary:hover{transform:translateY(-2px);background:var(--brand-ink)}
.btn--ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn--ghost:hover{transform:translateY(-2px);border-color:#C9D2E4}
.btn--light{background:#fff;color:var(--ink-band)}
.btn--light:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(3px)}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(245,246,249,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.24rem;letter-spacing:-.03em}
.logo .dot{width:12px;height:12px;border-radius:4px;background:var(--brand);position:relative}
.logo .dot::after{content:"";position:absolute;inset:0;border-radius:4px;background:var(--spark);transform:translate(5px,5px);opacity:.9;z-index:-1}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:.94rem;font-weight:500;color:var(--ink-soft);transition:color .18s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:10px 20px;font-size:.92rem}
.burger{display:none;flex-direction:column;gap:4px;padding:8px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.footer{background:var(--ink-band);color:#A9B2C6;padding:64px 0 32px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer .logo{color:#fff}
.footer .f-desc{margin-top:16px;font-size:.92rem;max-width:36ch;color:#8A92A8}
.footer h4{color:#fff;font-size:.74rem;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer ul a{line-height:1.5}
.footer ul a{font-size:.92rem;color:#A9B2C6;transition:color .18s}
.footer ul a:hover{color:#fff}
.f-social{display:flex;gap:10px;margin-top:22px}
.f-social a{width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:#A9B2C6;transition:.18s}
.f-social a:hover{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.f-social svg{width:19px;height:19px}
.footer-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:.82rem;color:#6E7893}
@media(max-width:980px){
.footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
.section{padding:72px 0}
.nav-links{
    position:fixed;top:70px;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
.nav-links.open{max-height:340px}
.nav-links a{padding:16px 24px;border-bottom:1px solid var(--line)}
.nav-cta .btn{display:none}
.burger{display:flex}
.footer-top{grid-template-columns:1fr}
}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";display:block;height:2px;background:var(--brand);border-radius:2px;margin-top:5px}
@media(max-width:720px){
.nav-links a.active::after{display:none}
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--brand);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
  font-weight:700;font-size:.95rem;text-decoration:none}
.skip-link:focus{left:0;outline:3px solid #fff;outline-offset:-6px}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.hc-go:focus-visible{outline-offset:3px}
.logo img.lg{display:block;height:30px;width:auto}
.footer .logo img.lg{height:34px}
@media(max-width:640px){
.logo img.lg{height:25px}
}
.news-band{background:var(--surface);color:var(--ink);border-top:1px solid var(--line)}
.news-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.news-inner .eyebrow{color:var(--brand)}
.news-inner h2{font-size:clamp(24px,3vw,32px);line-height:1.375;letter-spacing:var(--ls-title1);font-weight:800;letter-spacing:-.02em;margin-top:16px;color:var(--ink);line-height:1.4}
.news-inner p{color:var(--ink-soft);margin-top:14px;font-size:1rem;max-width:46ch}
.news-form{display:flex;gap:10px;flex-wrap:wrap}
.news-form input{flex:1;min-width:220px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-size:.98rem}
.news-form input::placeholder{color:var(--ink-mute)}
.news-form input:focus{outline:none;border-color:var(--brand);background:#fff}
.news-consent{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.8rem;color:var(--ink-mute)}
.news-consent input{width:16px;height:16px;accent-color:var(--brand)}
.news-ok{margin-top:14px;font-size:.92rem;color:#6FE3AC;display:none}
.news-ok.show{display:block}
.f-company{padding:24px 0;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.82rem;color:#8A92A8}
.f-company span b{color:#AAB4D4;font-weight:600;margin-right:6px}
@media(max-width:980px){
.news-inner{grid-template-columns:1fr;gap:24px}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@keyframes diagfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.diag-open{overflow:hidden}
body.opti-open{overflow:hidden}

/* ============ SUBPAGE ============ */
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--brand);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;font-size:.95rem;text-decoration:none}
.skip:focus{left:0;outline:3px solid #fff;outline-offset:-6px}
.nav{background:rgba(245,246,249,.9);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.logo img.lg{display:block;height:30px;width:auto}
.footer .logo img.lg{height:34px}
.sub-hd{padding:132px 0 44px;border-bottom:1px solid var(--line)}
.sub-hd .eyebrow{display:block;font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;color:var(--brand);margin-bottom:12px;text-transform:uppercase}
.sub-hd h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.34;letter-spacing:-.03em;margin:0 0 12px}
.sub-hd p{font-size:1.02rem;color:var(--ink-soft);margin:0;line-height:1.7;max-width:62ch}
.sub-body{padding:56px 0 88px;max-width:76ch}
.sub-body h2{font-size:1.32rem;margin:44px 0 14px;letter-spacing:-.02em}
.sub-body h2:first-child{margin-top:0}
.sub-body h3{font-size:1.04rem;margin:28px 0 10px}
.sub-body p,.sub-body li{font-size:.95rem;line-height:1.85;color:var(--ink-soft)}
.sub-body ul,.sub-body ol{padding-left:1.15rem;margin:12px 0}
.sub-body li{margin-bottom:6px}
.sub-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.88rem}
.sub-body th,.sub-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.sub-body th{background:var(--paper);font-weight:700;color:var(--ink);white-space:nowrap}
.sub-body strong{color:var(--ink);font-weight:700}
.sub-body .note{background:var(--paper);border-radius:var(--radius);padding:16px 18px;margin:20px 0;
  font-size:.88rem;line-height:1.75;color:var(--ink-soft)}
.sub-body .updated{font-size:.8rem;color:var(--ink-mute);border-top:1px solid var(--line);
  margin-top:44px;padding-top:16px}
.sub-body pre{background:var(--paper);border-radius:10px;padding:14px 16px;overflow-x:auto;
  font-family:var(--font-mono);font-size:.8rem;line-height:1.7}
.sub-body code{font-family:var(--font-mono);font-size:.86em;background:var(--paper);padding:1px 5px;border-radius:4px}
.sub-body pre code{background:none;padding:0}
.sub-body hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.toc{background:var(--paper);border-radius:var(--radius);padding:18px 22px;margin:0 0 36px}
.toc b{display:block;font-size:.82rem;margin-bottom:8px}
.toc ol{margin:0;padding-left:1.1rem}
.toc li{font-size:.88rem;margin-bottom:4px}
.toc a{color:var(--ink-soft);text-decoration:none}
.toc a:hover{color:var(--brand);text-decoration:underline}
.ins-list{display:grid;gap:16px}
.ins-item{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;text-decoration:none;transition:border-color .18s,transform .18s}
.ins-item:hover{border-color:var(--brand);transform:translateY(-2px)}
.ins-item .meta{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.ins-item .cat{font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;
  padding:3px 9px;border-radius:99px;background:var(--paper);color:var(--brand)}
.ins-item .dt{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-mute)}
.ins-item h3{margin:0 0 6px;font-size:1.08rem;color:var(--ink);line-height:1.4}
.ins-item p{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.7}
.art-nav{display:flex;justify-content:space-between;gap:12px;margin-top:52px;
  border-top:1px solid var(--line);padding-top:20px;font-size:.86rem}
.art-nav a{color:var(--brand);text-decoration:none;font-weight:700}
.art-nav a:hover{text-decoration:underline}
@media(max-width:760px){
.sub-hd{padding:104px 0 32px}
.sub-body{padding:40px 0 64px}
.sub-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.sub-body th{white-space:normal}
.toc{padding:14px 16px}
}

/* ── 모바일 제목 줄간격 ──────────────────────────────
   화면이 좁을수록 제목이 여러 줄로 나뉘어 줄이 붙어 보입니다. */
@media(max-width:640px){
  h2.sec-title{line-height:1.45}
  .sub-hd h1{line-height:1.4}
  /* 세로로 쌓이면 항목 간격이 넓어 보여 조금 좁힙니다 */
  .footer{padding:44px 0 26px}
  .footer-top{gap:30px;padding-bottom:30px}
  .footer ul{gap:7px}
  .footer h4{margin-bottom:12px}
  .footer .f-desc{margin-top:12px}
}