/* ═══════════════════════════════════════════════
   site.css — 하위 페이지 공용 스타일
   index.html의 토큰 시스템을 그대로 계승합니다.
   ═══════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg:       #FFFFFF;
  --bg-alt:   #F4F6FA;
  --bg-hero:  #0C1B30;
  --ink:      #111827;
  --ink-s:    #4B5868;
  --ink-m:    #8B97A8;
  --navy:     #1B3D6F;
  --navy-h:   #26509B;
  --navy-t:   #EAF0FB;
  --border:   #DDE3EE;
  --border-s: #EDF0F5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #0D1520;
    --bg-alt:   #111D2E;
    --bg-hero:  #060D18;
    --ink:      #E8EEF8;
    --ink-s:    #9AACC0;
    --ink-m:    #566778;
    --navy:     #5B8FD4;
    --navy-h:   #7AAAE8;
    --navy-t:   #0E1D32;
    --border:   #1E2D44;
    --border-s: #162038;
  }
}
:root[data-theme="light"] {
  --bg:#FFFFFF; --bg-alt:#F4F6FA; --bg-hero:#0C1B30;
  --ink:#111827; --ink-s:#4B5868; --ink-m:#8B97A8;
  --navy:#1B3D6F; --navy-h:#26509B; --navy-t:#EAF0FB;
  --border:#DDE3EE; --border-s:#EDF0F5;
}
:root[data-theme="dark"] {
  --bg:#0D1520; --bg-alt:#111D2E; --bg-hero:#060D18;
  --ink:#E8EEF8; --ink-s:#9AACC0; --ink-m:#566778;
  --navy:#5B8FD4; --navy-h:#7AAAE8; --navy-t:#0E1D32;
  --border:#1E2D44; --border-s:#162038;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:3px}

/* ── HEADER ── */
.hd{position:sticky;top:0;z-index:200;background:var(--bg);border-bottom:1px solid var(--border-s)}
.hd-in{
  max-width:1160px;margin:0 auto;padding:0 32px;
  height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px
}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-img{height:36px;width:auto;object-fit:contain;flex-shrink:0}
.logo-text{display:flex;flex-direction:column}
.logo-m{font-size:14px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.logo-s{font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-m);margin-top:1px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-size:14px;color:var(--ink-s);padding:6px 12px;border-radius:6px;transition:color .15s,background .15s}
.nav a:hover{color:var(--ink);background:var(--bg-alt)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav .cta{background:var(--navy) !important;color:#fff !important;font-weight:600 !important;margin-left:4px}
.nav .cta:hover{background:var(--navy-h) !important}
.theme-sw{display:flex;gap:2px;background:var(--bg-alt);border-radius:8px;padding:3px;flex-shrink:0}
.theme-btn{
  background:none;border:none;cursor:pointer;font-size:13px;line-height:1;
  padding:5px 8px;border-radius:6px;transition:background .15s
}
.theme-btn[aria-pressed="true"]{background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hbg{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hbg span{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .25s}
.hbg[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hbg[aria-expanded=true] span:nth-child(2){opacity:0}
.hbg[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mnav{display:none;background:var(--bg);border-top:1px solid var(--border);padding:8px 24px 16px}
.mnav.open{display:block}
.mnav a{display:block;padding:13px 0;font-size:16px;color:var(--ink);border-bottom:1px solid var(--border-s)}
.mnav a:last-child{border-bottom:none;padding-bottom:0}

/* ── PAGE HEAD ── */
.phead{background:var(--bg-hero);padding:52px 32px 60px;position:relative;overflow:hidden}
.phead::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 60% at 20% 30%,rgba(99,102,241,.10) 0%,transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 80%,rgba(244,63,94,.07) 0%,transparent 70%)
}
.phead-in{max-width:860px;margin:0 auto;position:relative;z-index:1}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.42);margin-bottom:22px}
.crumb a:hover{color:rgba(255,255,255,.8);text-decoration:underline}
.crumb span[aria-current]{color:rgba(255,255,255,.68)}
.ptags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.ptag{
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:#A5B4FC;background:rgba(99,102,241,.13);
  border:1px solid rgba(99,102,241,.24);border-radius:99px;padding:4px 11px
}
.phead h1{
  font-size:clamp(28px,4.6vw,44px);font-weight:800;line-height:1.16;
  letter-spacing:-.035em;color:#fff;margin-bottom:16px;text-wrap:balance
}
.phead-lead{font-size:16px;line-height:1.78;color:rgba(255,255,255,.62);max-width:640px}

/* ── PAGE BODY ── */
.pbody{max-width:860px;margin:0 auto;padding:56px 32px 80px}
.pblock{margin-bottom:52px}
.pblock:last-child{margin-bottom:0}
.pblock h2{
  font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--ink);
  margin-bottom:8px;padding-bottom:12px;border-bottom:1px solid var(--border-s)
}
.pblock h3{font-size:16px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:26px 0 8px}
.pblock p{color:var(--ink-s);font-size:15px;line-height:1.82;margin-top:14px}
.pblock p strong{color:var(--ink);font-weight:700}

/* 사양 표 (대상·시간·수준·정원) */
.spec{width:100%;border-collapse:collapse;margin-top:18px;font-size:14px}
.spec caption{text-align:left;font-size:12px;color:var(--ink-m);padding-bottom:8px}
.spec th,.spec td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border-s);vertical-align:top}
.spec th{
  width:132px;font-weight:600;color:var(--ink-m);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;background:var(--bg-alt);
  border-right:1px solid var(--border-s)
}
.spec td{color:var(--ink-s);line-height:1.7}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:none}
.spec-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px}

/* 커리큘럼 목록 */
.curric{list-style:none;counter-reset:mod;margin-top:18px;display:flex;flex-direction:column;gap:2px}
.curric li{
  counter-increment:mod;position:relative;
  padding:15px 16px 15px 54px;border:1px solid var(--border-s);border-radius:10px;
  background:var(--bg-alt);transition:border-color .15s
}
.curric li:hover{border-color:var(--border)}
.curric li::before{
  content:counter(mod,decimal-leading-zero);
  position:absolute;left:17px;top:16px;
  font-size:12px;font-weight:700;color:var(--navy);
  font-variant-numeric:tabular-nums;letter-spacing:.02em
}
.curric .mod-t{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.curric .mod-d{font-size:13.5px;color:var(--ink-s);line-height:1.7;margin-top:3px}

/* 체크 목록 */
.checks{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.checks li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-s);line-height:1.72}
.checks li::before{
  content:'✓';position:absolute;left:0;top:0;
  color:var(--navy);font-weight:800;font-size:13px
}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.faq details{border:1px solid var(--border);border-radius:10px;background:var(--bg);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:15px 44px 15px 17px;position:relative;
  font-size:15px;font-weight:600;color:var(--ink);line-height:1.55
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:18px;top:21px;
  width:8px;height:8px;border-right:1.8px solid var(--ink-m);border-bottom:1.8px solid var(--ink-m);
  transform:rotate(45deg);transition:transform .2s
}
.faq details[open] summary::after{transform:rotate(-135deg);top:24px}
.faq summary:hover{background:var(--bg-alt)}
.faq .faq-a{padding:0 17px 16px;font-size:14.5px;color:var(--ink-s);line-height:1.8}

/* CTA */
.pcta{
  margin-top:56px;padding:34px 30px;border-radius:14px;
  background:var(--bg-hero);text-align:center;position:relative;overflow:hidden
}
.pcta::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(99,102,241,.14) 0%,transparent 70%)
}
.pcta-in{position:relative;z-index:1}
.pcta h2{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.025em;border:none;padding:0;margin-bottom:9px}
.pcta p{font-size:14.5px;color:rgba(255,255,255,.56);margin:0 auto 22px;max-width:460px;line-height:1.75}
.pcta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:12px 24px;border-radius:8px;font-size:14.5px;font-weight:700;
  letter-spacing:-.01em;transition:transform .15s,background .15s,border-color .15s
}
.btn-solid{background:#fff;color:var(--bg-hero)}
.btn-solid:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}

/* 관련 과정 */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:18px}
.rel-card{
  display:block;padding:18px;border:1px solid var(--border);border-radius:11px;
  background:var(--bg);transition:border-color .15s,transform .15s
}
.rel-card:hover{border-color:var(--navy);transform:translateY(-2px)}
.rel-t{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin-bottom:5px}
.rel-d{font-size:13px;color:var(--ink-s);line-height:1.65}
.rel-go{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--navy)}

/* ── FOOTER ── */
.footer{background:var(--bg-hero);padding:26px 32px}
.footer-in{
  max-width:1160px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap
}
.f-logo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:rgba(255,255,255,.8)}
.f-logo-img{height:28px;width:auto;object-fit:contain}
.f-copy{font-size:12px;color:rgba(255,255,255,.3)}
.f-updated{display:block;margin-top:4px;font-size:11px;color:rgba(255,255,255,.24)}
.f-top{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;
  color:rgba(255,255,255,.38);transition:color .15s
}
.f-top:hover{color:rgba(255,255,255,.7)}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .nav{display:none}
  .hbg{display:flex}
  .hd-in{padding:0 20px}
  .phead{padding:36px 20px 44px}
  .pbody{padding:40px 20px 64px}
  .pcta{padding:28px 20px}
  .footer{padding:22px 20px}
  .footer-in{flex-direction:column;align-items:flex-start;gap:8px}
  .spec th{width:96px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.rel-card,.curric li,.faq summary::after{transition:none}
}