/* =============================================================
   Study CBT — 디자인 시스템
   자격증 학습 허브 전 페이지가 공유하는 단 하나의 토큰/프리미티브 집합.
   실제 CBT 시험 환경의 구조 + 현대적인 톤.
   ============================================================= */

:root{
  color-scheme: light dark;

  /* ---- 색: 라이트 ---- */
  --bg:#F4F6FA;
  --bg-grid:#EDF1F7;
  --surface:#FFFFFF;
  --surface-2:#F5F7FB;
  --surface-3:#EDF1F7;
  --ink:#0F1729;
  --ink-2:#57617A;
  --ink-3:#8B95AB;
  --line:#E4E9F1;
  --line-2:#CFD7E5;

  --brand:#3B5BFD;
  --brand-ink:#2843D6;
  --brand-soft:#ECF0FF;
  --brand-line:#C3CFFF;

  --ok:#0F9D74;
  --ok-soft:#E7F7F1;
  --ok-line:#A8E2CE;

  --warn:#C2760B;
  --warn-soft:#FDF4E4;
  --warn-line:#F0D5A4;

  --bad:#DC2B44;
  --bad-soft:#FDECEF;
  --bad-line:#F6C0C9;

  --shadow-1:0 1px 2px rgba(15,23,41,.05), 0 1px 3px rgba(15,23,41,.04);
  --shadow-2:0 4px 14px rgba(15,23,41,.07), 0 1px 3px rgba(15,23,41,.04);
  --shadow-3:0 14px 40px rgba(15,23,41,.12);

  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:22px;

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

  --nav-h:56px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B0E14;
    --bg-grid:#0F131B;
    --surface:#141924;
    --surface-2:#1A2130;
    --surface-3:#222B3C;
    --ink:#E8ECF5;
    --ink-2:#9BA6BC;
    --ink-3:#6C7893;
    --line:#232B3A;
    --line-2:#313B4E;

    --brand:#7B95FF;
    --brand-ink:#9DB0FF;
    --brand-soft:#1A2340;
    --brand-line:#33427A;

    --ok:#3ED8A6;
    --ok-soft:#0F2A22;
    --ok-line:#1E5546;

    --warn:#E9B15C;
    --warn-soft:#2B2113;
    --warn-line:#57411F;

    --bad:#FF7285;
    --bad-soft:#2C1419;
    --bad-line:#5C2733;

    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 4px 16px rgba(0,0,0,.45);
    --shadow-3:0 18px 44px rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.02em;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 24px}

/* ---------- 타이포 프리미티브 ---------- */
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--brand);margin:0 0 14px;
}
.lede{color:var(--ink-2);font-size:16px;max-width:70ch}
.muted{color:var(--ink-2)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- 버튼 ---------- */
.btn{
  --btn-bg:var(--brand); --btn-fg:#fff; --btn-line:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-line);
  border-radius:10px;padding:11px 18px;font-size:14px;font-weight:650;
  letter-spacing:-.01em;transition:transform .12s ease, filter .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.btn.ghost{--btn-bg:transparent;--btn-fg:var(--brand);--btn-line:var(--brand-line)}
.btn.ghost:hover{background:var(--brand-soft);filter:none}
.btn.quiet{--btn-bg:var(--surface);--btn-fg:var(--ink-2);--btn-line:var(--line-2)}
.btn.quiet:hover{background:var(--surface-2);color:var(--ink);filter:none}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn.block{width:100%}

/* ---------- 배지 / 칩 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:4px 9px;border-radius:999px;
  background:var(--surface-3);color:var(--ink-2);
}
.badge.brand{background:var(--brand-soft);color:var(--brand-ink);}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}

/* ---------- 카드 ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);
}

/* ---------- 상단 내비게이션 ---------- */
.topnav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topnav .wrap{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
.brandmark{display:flex;align-items:center;gap:9px;font-weight:750;font-size:14.5px;letter-spacing:-.02em}
.brandmark .dot{
  width:22px;height:22px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,var(--brand),#8A5BFD);
  box-shadow:0 2px 8px color-mix(in srgb, var(--brand) 45%, transparent);
}
.topnav .crumb{color:var(--ink-3);font-size:13px}
.topnav .spacer{flex:1}

/* ---------- 진행 막대 ---------- */
.track{display:block;height:7px;background:var(--surface-3);border-radius:999px;overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--brand);border-radius:999px;transition:width .45s cubic-bezier(.22,.8,.24,1)}
.track i.ok{background:var(--ok)}
.track i.warn{background:var(--warn)}
.track i.bad{background:var(--bad)}

/* ---------- 폼 ---------- */
.field{
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  padding:9px 12px;font-size:14px;transition:border-color .15s, box-shadow .15s;
}
.field:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent)}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none}
.switch input{accent-color:var(--brand);width:15px;height:15px;cursor:pointer}

/* ---------- 코드 블록 ---------- */
pre.code{
  font-family:var(--mono);font-size:13px;line-height:1.6;
  background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:var(--r-sm);padding:13px 15px;margin:12px 0 4px;
  overflow-x:auto;white-space:pre;tab-size:2;
}

/* ---------- 스크롤바 ---------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box}

/* ---------- 유틸 ---------- */
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:720px){
  .wrap,.wrap-narrow{padding:0 16px}
  body{font-size:14.5px}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}