*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}

:root{
  /* ── Primary (Action — Black) ── */
  --primary:#111111;
  --primary-hover:#333333;
  --primary-active:#000000;
  --primary-disabled:#D1D5DB;

  /* ── 브랜드 컬러 (Signature — 링크·아이콘·배지용) ── */
  --lime:#0EA5E9;
  --aqua:#84CC16;
  --brand-lime:#0EA5E9;
  --brand-aqua:#84CC16;
  --brand-grad:linear-gradient(135deg,#0EA5E9 0%,#84CC16 100%);
  --brand-grad-rev:linear-gradient(135deg,#84CC16 0%,#0EA5E9 100%);
  --dark:#020618;

  /* ── 배경·서피스 ── */
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --subtle:#F1F5F9;

  /* ── 테두리 ── */
  --border:#E2E8F0;
  --border-s:#CAD5E2;

  /* ── 텍스트 ── */
  --tx1:#0F172B;
  --tx2:#62748E;
  --tx3:#90A1B9;
  --txd:#CAD5E2;

  /* ── 시맨틱 ── */
  --ok:#84CC16;    --ok-bg:#F7FEE7;
  --warn:#F59E0B;  --warn-bg:#FFFBEB;
  --err:#82181A;   --err-bg:#460809;
  --info:#0EA5E9;  --info-bg:#F0F9FF;

  /* ── 폰트 ── */
  --font-display:Geist,'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;
  --font-body:Geist,'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;
  --font-mono:'DM Mono','SF Mono','Consolas',monospace;

  /* ── 스페이싱 ── */
  --sp1:4px;   --sp2:8px;   --sp3:12px;  --sp4:16px;
  --sp5:24px;  --sp6:32px;  --sp8:40px;  --sp10:48px;
  --sp12:64px; --sp16:80px;

  /* ── 컨테이너 ── */
  --px:80px;
  --max:1280px;
  --cmax:1200px;
  --gnb:64px;

  /* ── 테두리 반경 ── */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-full:9999px;

  /* ── 그림자 ── */
  --sh-sm:0 1px 3px rgba(0,0,0,.08);
  --sh-md:0 4px 12px rgba(0,0,0,.10);
  --sh-lg:0 8px 24px rgba(0,0,0,.12);
  --sh-xl:0 24px 80px rgba(0,0,0,.26);
  --sh-lime-sm:0 3px 10px rgba(14,165,233,.20);
  --sh-lime-md:0 6px 20px rgba(14,165,233,.25);
  --sh-lime-lg:0 8px 32px rgba(14,165,233,.15);
}

body{
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  color:var(--tx1);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Typography ── */
.t-hero  {font-family:var(--font-display);font-size:clamp(38px,5.5vw,68px);font-weight:800;line-height:1.1;letter-spacing:-2px}
.t-title {font-family:var(--font-display);font-size:clamp(28px,3.5vw,44px);font-weight:800;line-height:1.2;letter-spacing:-1px}
.t-head  {font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.5px}
.t-sub   {font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.4}
.t-card-title{font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.4}
.t-body-lg{font-size:17px;font-weight:400;line-height:1.85}
.t-body  {font-size:16px;font-weight:400;line-height:1.7}
.t-body-sm{font-size:15px;font-weight:400;line-height:1.75}
.t-sm    {font-size:14px;line-height:1.6}
.t-xs    {font-size:13px;line-height:1.6}
.t-label {font-size:12px;font-weight:500;line-height:1.4}
.t-caption{font-size:11px;line-height:1.4}
.t-mono-lg{font-family:var(--font-mono);font-size:18px;font-weight:500}
.t-mono  {font-family:var(--font-mono);font-size:13px}
.t-mono-sm{font-family:var(--font-mono);font-size:11px}
.tx2{color:var(--tx2)}.tx3{color:var(--tx3)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:6px;border:none;border-radius:var(--r-sm);
  font-family:var(--font-body);font-weight:600;cursor:pointer;
  white-space:nowrap;text-align:center;text-decoration:none;
  transition:all 0.2s ease;
  height:40px;padding:0 20px;font-size:14px;
}
.btn:focus-visible{outline:2px solid var(--brand-lime);outline-offset:2px}
.btn:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}
.btn:active{transform:translateY(0)!important;filter:brightness(.88)}

.btn-sm{height:34px;padding:0 14px;font-size:13px;gap:4px}
.btn-lg{height:50px;padding:0 28px;font-size:15px;border-radius:10px}
.btn-full{width:100%;height:48px;padding:0;font-size:15px;border-radius:10px}

.btn-primary{background:#2563EB;color:#fff}
.btn-primary:hover{background:#1D4ED8;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.25)}

.btn-outline{background:transparent;color:#314158;border:1.5px solid #E2E8F0}
.btn-outline:hover{background:#F8FAFC;color:#0F172B;transform:translateY(-1px)}

.btn-secondary{background:transparent;color:#314158;border:1.5px solid #E2E8F0}
.btn-secondary:hover{border-color:#90A1B9;background:#F8FAFC}

.btn-ghost{background:transparent;color:var(--tx2);font-weight:500}
.btn-ghost:hover{color:var(--tx1)}

.btn-ghost-dark{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.16)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.15);transform:translateY(-1px)}

.btn-danger{background:var(--err-bg);color:var(--err);border:1px solid var(--err)}
.btn-danger:hover{box-shadow:0 0 0 3px rgba(229,62,62,.15)}

/* 버튼 그룹 */
.btn-group{display:flex;gap:8px;align-items:center}
.btn-group .btn{min-width:90px}
.btn-group .btn-lg{min-width:120px}

/* ── Form ── */
.input,.select,.textarea{
  width:100%;height:40px;padding:0 14px;
  border:1px solid var(--border-s);border-radius:9px;
  background:var(--bg);font-size:14px;color:var(--tx1);
  font-family:var(--font-body);
  transition:border-color 0.2s,box-shadow 0.2s;
}
.textarea{height:auto;min-height:88px;padding:10px 14px;resize:vertical;line-height:1.6}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--brand-lime);
  box-shadow:0 0 0 3px rgba(14,165,233,.2);background:var(--surface);
}
.input.err{border-color:var(--err)}
.input.err:focus{box-shadow:0 0 0 3px rgba(229,62,62,.15)}
.input::placeholder,.textarea::placeholder{color:var(--tx3)}
.select option:checked{background:#0EA5E9;color:#fff}
.form-group{margin-bottom:var(--sp4)}
.form-label{
  display:block;font-size:12px;font-weight:600;
  color:var(--tx3);margin-bottom:var(--sp2);
  letter-spacing:0.3px;text-transform:uppercase;
}
.form-label em{color:var(--err);font-style:normal}
.err-msg{font-size:13px;color:var(--err);margin-top:4px}

/* ── Card ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp4)}
.card-interactive:hover{
  border-color:rgba(14,165,233,.5);
  box-shadow:var(--sh-lime-lg);
  transform:translateY(-2px);
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp4)}
.card-title{font-family:var(--font-display);font-size:16px;font-weight:700}

/* ── Table ── */
.table-wrap{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.table{width:100%;border-collapse:collapse}
.table thead th{
  height:40px;padding:0 16px;
  background:var(--subtle);border-bottom:1px solid var(--border);
  font-size:12px;font-weight:500;color:var(--tx3);
  text-align:left;white-space:nowrap;letter-spacing:0.3px;
}
.table tbody td{height:48px;padding:0 16px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:rgba(14,165,233,.06)}
.table tbody tr.sel{background:rgba(14,165,233,.12)}

/* ── Badge ── */
.badge{
  display:inline-flex;align-items:center;
  height:22px;padding:0 8px;
  border-radius:var(--r-xs);
  font-family:var(--font-mono);
  font-size:10px;font-weight:700;
  letter-spacing:0.3px;white-space:nowrap;
}
.b-brand{background:#0EA5E9;color:#fff}
.b-ok   {background:var(--ok-bg);color:#1A7A44}
.b-warn {background:var(--warn-bg);color:#92600A}
.b-err  {background:var(--err-bg);color:#9B1C1C}
.b-info {background:var(--info-bg);color:#1E40AF}
.b-neu  {background:var(--subtle);color:var(--tx2)}

/* ── Tabs ── */
.tab-list{display:flex;border-bottom:1px solid var(--border);margin-bottom:var(--sp4)}
.tab-btn{
  height:40px;padding:0 16px;font-size:14px;font-weight:500;
  color:var(--tx2);border:none;
  border-bottom:2px solid transparent;
  background:none;cursor:pointer;
  transition:color 0.15s,border-color 0.15s;
  font-family:var(--font-body);
}
.tab-btn:hover{color:var(--tx1)}
.tab-btn.on{color:#111827;border-bottom-color:#2563EB;font-weight:700}
.tab-panel{display:none}.tab-panel.on{display:block}

/* 헤더는 site-chrome.js 가 공통 주입한다. 이 파일을 로드하는 문서형 페이지가
   자체 헤더를 인라인으로 갖던 시절의 .gnb 계열 정의는 참조하는 마크업이 없어 제거했다.
   --gnb 변수는 아래 사이드 네비 sticky 위치 계산에서 계속 사용한다. */
.page-body{padding-top:var(--gnb)}

/* ── Footer ── */
.footer{
  background:var(--dark);padding:44px var(--px);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.footer-logo{font-family:var(--font-display);font-size:17px;font-weight:800;color:#fff}
.footer-links{display:flex;gap:22px}
.footer-links a{font-size:13px;color:rgba(255,255,255,.36);transition:color .2s;text-decoration:none}
.footer-links a:hover{color:rgba(255,255,255,.8)}
.footer-copy{font-size:11px;color:rgba(255,255,255,.2);font-family:var(--font-mono)}



/* ── Accordion ── */
.acc-item{
  border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:8px;overflow:hidden;background:var(--surface);
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.acc-item:hover{
  border-color:rgba(14,165,233,.5);
  box-shadow:0 4px 16px rgba(14,165,233,.1);
  transform:translateY(-1px);
}
.acc-hd{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp4);font-size:14px;font-weight:500;
  text-align:left;cursor:pointer;border:none;background:none;
  font-family:var(--font-body);color:var(--tx1);gap:12px;
  transition:background .15s;
}
.acc-hd:hover{background:rgba(14,165,233,.04)}
.acc-hd.on{background:rgba(14,165,233,.06)}
.acc-ico{
  width:22px;height:22px;border-radius:6px;
  background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:14px;color:var(--tx3);
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.acc-hd.on .acc-ico{background:var(--brand-lime);border-color:var(--brand-lime);color:#fff;transform:rotate(45deg)}
.acc-body{
  max-height:0;overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
  font-size:14px;color:var(--tx2);line-height:1.75;padding:0 var(--sp4);
}
.acc-body.on{padding:0 var(--sp4) var(--sp4)}

/* ── Modal ── */
.modal-bg{
  position:fixed;inset:0;z-index:400;
  background:rgba(13,15,18,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.modal-bg.open{opacity:1;pointer-events:all}
.modal{
  background:var(--surface);border-radius:var(--r-xl);
  width:100%;max-width:540px;max-height:90vh;
  overflow-y:auto;box-shadow:var(--sh-xl);
  transform:translateY(24px) scale(.96);opacity:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s;
}
.modal-bg.open .modal{transform:none;opacity:1}
/* 모달 푸터 */
.mf{
  display:flex;justify-content:space-between;align-items:center;
  gap:8px;padding-top:18px;border-top:1px solid var(--border);
}
.mf-l{display:flex;gap:8px}
.mf-r{display:flex;gap:8px}
.mf .btn{min-width:90px}
.mf .btn-primary{min-width:110px}

/* ── Glossary ── */
.glos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp3)}
.glos-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp4);
  transition:border-color .2s,box-shadow .2s,transform .2s;cursor:default;
}
.glos-card:hover{
  border-color:rgba(184,242,247,.6);
  box-shadow:0 4px 20px rgba(184,242,247,.15);
  transform:translateY(-2px);
}
.glos-term{font-family:var(--font-display);font-size:14px;font-weight:700;margin-bottom:6px;color:var(--tx1)}
.glos-def{font-size:13px;color:var(--tx2);line-height:1.7}

/* ── Changelog ── */
.clog-item{
  display:flex;gap:20px;padding:18px 0 18px 12px;
  border-bottom:1px solid var(--border);position:relative;
  transition:background .2s;cursor:default;
}
.clog-item:last-child{border-bottom:none}
.clog-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:transparent;border-radius:0 3px 3px 0;transition:background .2s;
}
.clog-item:hover::before{background:var(--brand-lime)}
.clog-left{flex-shrink:0;width:100px}
.clog-date{font-family:var(--font-mono);font-size:11px;color:var(--tx3);display:block;margin-bottom:7px}
.clog-right{flex:1}
.clog-items{margin-top:8px}
.clog-items li{font-size:13px;color:var(--tx2);line-height:1.8;list-style:none;padding-left:12px;position:relative}
.clog-items li::before{content:'·';position:absolute;left:0;color:var(--tx3)}
.clog-meta{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp3)}
.clog-body{padding-left:var(--sp5)}
.clog-body li{font-size:14px;color:var(--tx2);line-height:1.8}

/* ── Help Sidebar ── */
.help-layout{display:flex;gap:var(--sp6);align-items:flex-start}
.help-sidebar{
  width:196px;flex-shrink:0;
  position:sticky;top:calc(var(--gnb) + 20px);
  max-height:calc(100vh - var(--gnb) - 48px);overflow-y:auto;
}
.help-sidebar a{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:10px;
  font-size:13px;color:var(--tx2);
  transition:all .2s;border-left:2px solid transparent;
  margin-bottom:2px;position:relative;overflow:hidden;
  text-decoration:none;
}
.help-sidebar a::before{
  content:'';position:absolute;inset:0;
  background:rgba(14,165,233,.08);transform:translateX(-100%);transition:transform .25s;
}
.help-sidebar a:hover{color:var(--tx1);border-left-color:rgba(14,165,233,.4)}
.help-sidebar a:hover::before{transform:translateX(0)}
.help-sidebar a.on{color:#000;background:rgba(14,165,233,.12);border-left-color:var(--brand-lime);font-weight:600}
.help-content{flex:1;min-width:0}
.help-section{margin-bottom:72px}
.help-section-title{
  font-family:var(--font-display);font-size:22px;font-weight:800;
  letter-spacing:-.5px;margin-bottom:var(--sp4);
  padding-bottom:var(--sp3);border-bottom:2px solid var(--brand-lime);
}

/* ── Inquiry ── */
.inquiry-form{max-width:560px}
.inquiry-success{
  text-align:center;padding:var(--sp8);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);max-width:400px;
}

/* ── Responsive ── */
@media(max-width:1099px){:root{--px:48px}}
@media(max-width:899px){
  :root{--px:24px}
  .help-layout{flex-direction:column}
  .help-sidebar{width:100%;position:static;display:flex;gap:4px;flex-wrap:wrap;max-height:none;overflow-y:visible}
  .help-sidebar a{padding:7px 12px;border-left:none;border-radius:var(--r-sm)}
  .help-sidebar a.on{border-left:none;border-bottom:2px solid var(--brand-lime)}
}
@media(max-width:599px){
  :root{--px:20px}
  .footer{flex-direction:column;text-align:center;padding:var(--sp5) var(--px)}
  .help-sidebar{flex-wrap:wrap}
}



/* ── Copy Toast ── */
#copy-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--tx1);color:#fff;font-size:13px;font-weight:500;padding:10px 20px;border-radius:var(--r-full);box-shadow:var(--sh-md);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:10000;white-space:nowrap}
#copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}