/* =========================================================
   탑에듀프렙 | AP 과목 선택 가이드
   Design system: Navy / Gold / Parchment
   Fraunces (display) · Inter (body) · JetBrains Mono (data/labels)
   ========================================================= */

:root{
  --navy-950: #0b1220;
  --navy-900: #101a2f;
  --navy-800: #16233d;
  --navy-700: #1e2f4f;
  --navy-600: #2b4066;
  --gold-500: #c9a24b;
  --gold-400: #d9b968;
  --gold-300: #e8cf94;
  --parchment-100: #faf6ec;
  --parchment-200: #f2ead6;
  --parchment-300: #e8ddc2;
  --ink-900: #1a1a1a;
  --ink-600: #4a4a4a;
  --chem-accent: #7fa88f;   /* muted lab-glass teal, used only on chemistry-flagged content */
  --bio-accent:  #b56a4a;   /* muted terracotta, used only on biology-flagged content */
  --radius-sm: 4px;
  --radius-md: 10px;
  --shadow-card: 0 2px 14px rgba(11,18,32,0.08);
  --shadow-lift: 0 10px 30px rgba(11,18,32,0.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment-100);
  color:var(--ink-900);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  color:var(--navy-900);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
}
.mono, .kicker, .tag, table th, .stat-num, nav .nav-code{
  font-family:'JetBrains Mono',monospace;
}
a{color:inherit;}
img{max-width:100%;}

/* ---------- Skip link / accessibility ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold-500); color:var(--navy-950);
  padding:.6em 1em; z-index:999; border-radius:var(--radius-sm);
}
.skip-link:focus{left:1em; top:1em;}
:focus-visible{outline:3px solid var(--gold-500); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--navy-950); color:var(--parchment-200);
  font-size:.82rem; padding:.5em 0;
}
.topbar-inner{
  max-width:1180px; margin:0 auto; padding:0 1.5rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}
.topbar a{color:var(--gold-300); text-decoration:none;}
.topbar a:hover{text-decoration:underline;}

/* ---------- Header / Nav ---------- */
header.site-header{
  background:var(--navy-900);
  border-bottom:1px solid var(--navy-700);
  position:sticky; top:0; z-index:50;
}
.nav-wrap{
  max-width:1180px; margin:0 auto; padding:1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{
  display:flex; align-items:baseline; gap:.6rem; text-decoration:none;
}
.brand-mark{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.35rem; color:var(--parchment-100);
}
.brand-sub{ font-size:.68rem; color:var(--gold-400); letter-spacing:.12em; text-transform:uppercase;}
nav.main-nav ul{
  list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; flex-wrap:wrap;
}
nav.main-nav a{
  color:var(--parchment-200); text-decoration:none; font-size:.92rem; font-weight:500;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{
  color:var(--gold-400); border-bottom-color:var(--gold-500);
}
.menu-toggle{display:none;}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(201,162,75,0.16), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 70%);
  color:var(--parchment-100);
  padding:4.2rem 1.5rem 3.4rem;
}
.hero-inner{max-width:1180px; margin:0 auto;}
.kicker{
  display:inline-block; color:var(--gold-400); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; border:1px solid var(--navy-600); border-radius:999px;
  padding:.35em .9em; margin-bottom:1.2em;
}
.hero h1{color:#fff; font-size:clamp(1.9rem, 4vw, 3rem); max-width:20ch;}
.hero .lede{color:var(--parchment-300); font-size:1.08rem; max-width:60ch; margin-top:1em;}
.hero-stats{
  display:flex; gap:2.2rem; margin-top:2.2rem; flex-wrap:wrap;
}
.hero-stats div{border-left:2px solid var(--gold-500); padding-left:.9rem;}
.stat-num{font-size:1.5rem; color:var(--gold-300); display:block;}
.stat-label{font-size:.78rem; color:var(--parchment-300);}

/* ---------- Layout helpers ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 1.5rem;}
.section{padding:3.4rem 1.5rem;}
.section-narrow{max-width:840px; margin:0 auto; padding:3.4rem 1.5rem;}
.section-head{max-width:760px; margin-bottom:2rem;}
.section-head .kicker{color:var(--navy-700); border-color:var(--navy-700)/0; border:1px solid var(--gold-500); background:var(--parchment-200);}
.eyebrow{color:var(--gold-500); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;}

/* ---------- Cards / grid ---------- */
.grid{display:grid; gap:1.4rem;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.card{
  background:#fff; border:1px solid var(--parchment-300); border-radius:var(--radius-md);
  padding:1.6rem; box-shadow:var(--shadow-card);
}
.card h3{font-size:1.15rem;}
.card p{color:var(--ink-600); font-size:.95rem;}
.card a.card-link{
  display:inline-block; margin-top:.8rem; font-size:.88rem; font-weight:600; color:var(--navy-800);
  text-decoration:none; border-bottom:1px solid var(--gold-500);
}

/* ---------- Compare table ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius-md); box-shadow:var(--shadow-card); background:#fff;}
table.compare{width:100%; border-collapse:collapse; min-width:640px;}
table.compare th, table.compare td{
  padding:.9rem 1.1rem; border-bottom:1px solid var(--parchment-300); text-align:left; font-size:.92rem;
}
table.compare thead th{
  background:var(--navy-900); color:var(--parchment-100); font-weight:500; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase;
}
table.compare thead th.chem-col{border-top:3px solid var(--chem-accent);}
table.compare thead th.bio-col{border-top:3px solid var(--bio-accent);}
table.compare tbody tr:nth-child(even){background:var(--parchment-100);}
table.compare td.row-label{font-weight:600; color:var(--navy-800); width:22%;}

/* ---------- Tags ---------- */
.tag{
  display:inline-block; font-size:.72rem; padding:.25em .6em; border-radius:4px; font-weight:600;
  letter-spacing:.03em;
}
.tag.chem{background:rgba(127,168,143,0.15); color:#3d5c4b;}
.tag.bio{background:rgba(181,106,74,0.14); color:#8a4830;}
.tag.gold{background:rgba(201,162,75,0.15); color:#7a5f24;}

/* ---------- Callout / verdict box ---------- */
.callout{
  border-left:4px solid var(--gold-500); background:var(--navy-900); color:var(--parchment-100);
  padding:1.6rem 1.8rem; border-radius:var(--radius-sm); margin:2rem 0;
}
.callout h3{color:var(--gold-300); font-size:1.05rem; margin-bottom:.5em;}
.callout p{color:var(--parchment-300); margin:0; font-size:.96rem;}

/* ---------- FAQ (accordion, Naver-style Q&A) ---------- */
.faq-item{border-bottom:1px solid var(--parchment-300); padding:1.1rem 0;}
.faq-item summary{
  cursor:pointer; font-family:'Fraunces',serif; font-weight:600; font-size:1.02rem; color:var(--navy-900);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:'JetBrains Mono',monospace; color:var(--gold-500); font-size:1.3rem;}
.faq-item[open] summary::after{content:"–";}
.faq-item .faq-a{color:var(--ink-600); margin-top:.7rem; font-size:.95rem;}

/* ---------- Roadmap / numbered list ---------- */
.roadmap-item{display:flex; gap:1.2rem; padding:1.3rem 0; border-bottom:1px solid var(--parchment-300);}
.roadmap-num{
  font-family:'JetBrains Mono',monospace; color:var(--gold-500); font-size:1rem; font-weight:700;
  min-width:2.4rem;
}
.roadmap-item h4{margin-bottom:.3em;}
.roadmap-item p{color:var(--ink-600); font-size:.93rem; margin:0;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.82rem; color:var(--ink-600); margin-bottom:1.2rem;}
.breadcrumb a{color:var(--navy-700); text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--navy-950),var(--navy-800));
  color:var(--parchment-100); padding:3rem 1.5rem; text-align:center;
}
.cta-band h2{color:#fff;}
.cta-band p{color:var(--parchment-300); max-width:52ch; margin:0.6em auto 1.6em;}
.btn{
  display:inline-flex; align-items:center; gap:.5em; background:var(--gold-500); color:var(--navy-950);
  text-decoration:none; font-weight:700; padding:.85em 1.6em; border-radius:999px; font-size:.92rem;
  border:none; cursor:pointer;
}
.btn:hover{background:var(--gold-400);}
.btn.ghost{background:transparent; color:var(--parchment-100); border:1px solid var(--gold-500);}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy-950); color:var(--parchment-300); padding:3rem 1.5rem 1.6rem;}
.footer-grid{
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem;
}
footer.site-footer h5{color:var(--gold-400); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1em;}
footer.site-footer ul{list-style:none; margin:0; padding:0;}
footer.site-footer li{margin-bottom:.55em; font-size:.88rem;}
footer.site-footer a{color:var(--parchment-300); text-decoration:none;}
footer.site-footer a:hover{color:var(--gold-400);}
.footer-bottom{
  max-width:1180px; margin:2.4rem auto 0; padding-top:1.4rem; border-top:1px solid var(--navy-700);
  font-size:.78rem; color:var(--parchment-300)/0.7; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}

/* ---------- Print ---------- */
@media print{
  .site-header,.cta-band,footer,.topbar{display:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:680px){
  nav.main-nav ul{gap:1rem;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .hero{padding:3rem 1.2rem 2.4rem;}
  .footer-grid{grid-template-columns:1fr; gap:1.6rem;}
  nav.main-nav{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--navy-900);
    padding:1rem 1.5rem 1.5rem; border-bottom:1px solid var(--navy-700);
  }
  nav.main-nav.open{display:block;}
  nav.main-nav ul{flex-direction:column; gap:.2rem;}
  nav.main-nav a{display:block; padding:.7em 0;}
  .menu-toggle{
    display:inline-flex; background:none; border:1px solid var(--navy-600); color:var(--parchment-100);
    border-radius:6px; padding:.5em .7em; font-size:1rem; cursor:pointer;
  }
}