/* ============================================================
   TopEduPrep — Design System
   Signature: giant outlined ghost wordmark bleeding off the hero,
   a floating pill nav, and a monospace "case-number" labeling
   system for every section (borrowed from audition-slate numbering,
   repurposed as exam-date countdowns — the one place order truly
   carries meaning for this subject).
   ============================================================ */

:root{
  --ink:        #05070d;   /* near-black hero bg */
  --navy:       #0b1730;   /* deep navy panel */
  --navy-2:     #0e2045;
  --paper:      #f6f3ea;   /* warm paper for reading sections */
  --paper-2:    #efe9d8;
  --ink-text:   #10182b;
  --muted:      #6d7488;
  --muted-lt:   #a9afc2;
  --gold:       #c9a961;
  --gold-deep:  #9c7d3f;
  --line:       rgba(246,243,234,0.14);
  --line-dark:  rgba(16,24,43,0.12);

  --f-display: 'Fraunces', 'Noto Serif KR', serif;
  --f-body:    'Pretendard', -apple-system, sans-serif;
  --f-mono:    'DM Mono', 'Pretendard', monospace;

  --wrap: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;font-weight:600;}
p{line-height:1.75;margin:0 0 1.1em;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);}

/* ---------- Top nav ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:background .3s ease, padding .3s ease;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;}
.site-header.scrolled{
  background:rgba(5,7,13,0.86);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.logo{
  font-family:var(--f-display);
  font-size:21px;font-weight:600;letter-spacing:.01em;color:#f6f3ea;
  font-style:italic;
}
.logo b{font-style:normal;color:var(--gold);}
.nav-links{
  display:flex;gap:36px;align-items:center;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:#dfe1ea;
}
.nav-links a{opacity:.82;transition:opacity .2s;padding:4px 0;position:relative;}
.nav-links a:hover, .nav-links a.active{opacity:1;}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold);
}
.nav-cta{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.05em;
  background:var(--gold);color:var(--ink);
  padding:11px 22px;border-radius:100px;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .25s ease, background .25s ease;
}
.nav-cta:hover{background:#e0c07d;transform:translateY(-1px);}
.nav-burger{display:none;}

/* ---------- Ghost-wordmark hero ---------- */
.hero{
  position:relative;background:var(--ink);color:#f6f3ea;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:150px 0 0;
  overflow:hidden;
}
.hero-ghost{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  white-space:nowrap;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(90px,17vw,260px);
  letter-spacing:.01em;
  color:transparent;
  -webkit-text-stroke:1px rgba(246,243,234,0.16);
  user-select:none;
}
.hero-inner{position:relative;z-index:2;padding-bottom:120px;}
.hero-kicker{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:22px;
}
.hero h1{
  font-size:clamp(40px,6.2vw,84px);
  line-height:1.06;letter-spacing:-.01em;
  max-width:900px;
}
.hero h1 em{font-style:italic;color:var(--gold);}
.hero .sub{
  margin-top:28px;max-width:560px;color:var(--muted-lt);
  font-size:17px;line-height:1.8;
}
.hero-actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;}
.btn{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;
  padding:15px 28px;border-radius:100px;display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(246,243,234,0.3);
  transition:all .25s ease;
}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.btn-gold:hover{background:#e0c07d;transform:translateY(-1px);}
.btn-outline{color:#f6f3ea;}
.btn-outline:hover{background:rgba(246,243,234,0.08);}
.btn-dark{background:var(--ink-text);color:#f6f3ea;border-color:var(--ink-text);}
.btn-dark:hover{background:#232d44;}

.scroll-cue{
  position:absolute;right:36px;bottom:36px;z-index:3;
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(246,243,234,0.35);
  display:flex;align-items:center;justify-content:center;
  color:#f6f3ea;font-size:18px;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* ---------- Stat / feature strip ---------- */
.stat-strip{
  background:var(--ink);border-top:1px solid var(--line);
  padding:34px 0;
}
.stat-strip .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
.stat{color:#f6f3ea;font-family:var(--f-mono);}
.stat b{
  display:block;font-family:var(--f-display);font-size:30px;font-weight:600;color:var(--gold);
}
.stat span{font-size:12px;letter-spacing:.05em;color:var(--muted-lt);text-transform:uppercase;}

/* ---------- Section shells ---------- */
section{padding:120px 0;}
.section-light{background:var(--paper);}
.section-navy{background:var(--navy);color:#f2f1ea;}
.section-navy .eyebrow{color:var(--gold);}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(30px,4vw,48px);line-height:1.14;margin-top:14px;}
.section-navy h2, .section-navy p{color:#f2f1ea;}
.section-navy .muted{color:var(--muted-lt);}

/* ---------- Campus / card grid (idol-grid echo) ---------- */
.campus-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--line-dark);
}
.campus-card{
  background:var(--paper);position:relative;overflow:hidden;
  aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;color:#fff;
}
.campus-card .photo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(.15) contrast(1.05);
}
.campus-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,7,13,0) 40%, rgba(5,7,13,.86) 100%);
}
.campus-card .tag{
  position:relative;z-index:2;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.campus-card h3{position:relative;z-index:2;font-size:24px;color:#fff;}
.campus-card p{position:relative;z-index:2;color:#d8dae4;font-size:13.5px;margin:8px 0 0;}

/* ---------- Curriculum tab list ---------- */
.subject-list{border-top:1px solid var(--line-dark);}
.subject-row{
  display:grid;grid-template-columns:90px 1fr 220px;gap:24px;align-items:center;
  padding:30px 0;border-bottom:1px solid var(--line-dark);
}
.subject-row .num{font-family:var(--f-mono);color:var(--gold-deep);font-size:14px;}
.subject-row h3{font-size:24px;}
.subject-row p{margin:6px 0 0;color:var(--muted);font-size:14.5px;}
.subject-row .lvl{
  font-family:var(--f-mono);font-size:12px;color:var(--muted);text-align:right;letter-spacing:.03em;
}

/* ---------- Checklist ---------- */
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);}
.check-item{background:var(--paper);padding:32px;}
.check-item .num{font-family:var(--f-mono);font-size:13px;color:var(--gold-deep);}
.check-item h3{font-size:19px;margin:10px 0 8px;}
.check-item p{font-size:14.5px;color:var(--muted);margin:0;}

/* ---------- Comparison table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line-dark);}
table.compare{width:100%;border-collapse:collapse;min-width:720px;font-size:14.5px;}
table.compare th, table.compare td{
  padding:16px 18px;text-align:left;border-bottom:1px solid var(--line-dark);
}
table.compare thead th{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--paper-2);
}
table.compare tbody tr:last-child td{border-bottom:none;}
table.compare tr.highlight td{background:rgba(201,169,97,0.1);font-weight:600;}
table.compare td.name{font-family:var(--f-display);font-weight:600;font-size:16px;}

/* ---------- CTA callout box (used inside articles) ---------- */
.callout{
  background:var(--navy);color:#f2f1ea;border-radius:4px;
  padding:40px;margin:48px 0;position:relative;
  border-left:3px solid var(--gold);
}
.callout .eyebrow{color:var(--gold);margin-bottom:14px;}
.callout h3{color:#fff;font-size:24px;margin-bottom:10px;}
.callout p{color:var(--muted-lt);}
.callout .btn-gold{margin-top:16px;}

/* ---------- Article / blog body ---------- */
.article-hero{
  background:var(--ink);color:#f6f3ea;padding:190px 0 90px;
}
.article-hero .eyebrow{color:var(--gold);}
.article-hero h1{font-size:clamp(32px,4.6vw,58px);margin-top:18px;max-width:820px;line-height:1.18;}
.article-hero .meta{
  margin-top:26px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted-lt);
  display:flex;gap:18px;flex-wrap:wrap;
}
.article-body{max-width:760px;margin:0 auto;padding:90px 32px;}
.article-body h2{font-size:28px;margin:56px 0 18px;}
.article-body h3{font-size:20px;margin:34px 0 12px;color:var(--gold-deep);}
.article-body p{font-size:16.5px;color:#2b3242;}
.article-body ul, .article-body ol{padding-left:22px;font-size:16.5px;line-height:1.85;color:#2b3242;}
.article-body li{margin-bottom:10px;}
.toc{
  border:1px solid var(--line-dark);padding:26px 30px;margin:0 0 50px;
  font-family:var(--f-mono);font-size:13.5px;background:var(--paper-2);
}
.toc div{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px;}
.toc a{display:block;padding:6px 0;color:var(--ink-text);opacity:.82;}
.toc a:hover{opacity:1;text-decoration:underline;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line-dark);padding:26px 0;}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  font-family:var(--f-display);font-size:18px;font-weight:600;gap:20px;
}
.faq-q .plus{font-family:var(--f-mono);color:var(--gold-deep);transition:transform .25s;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{padding-top:14px;color:var(--muted);font-size:15px;}

/* ---------- Testimonial / quote ---------- */
.quote-block{
  font-family:var(--f-display);font-style:italic;font-size:clamp(20px,2.6vw,30px);
  line-height:1.5;max-width:780px;color:#f6f3ea;
}
.quote-cite{font-family:var(--f-mono);font-size:12.5px;color:var(--gold);margin-top:22px;letter-spacing:.04em;}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:var(--muted-lt);padding:80px 0 34px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--line);}
.foot-logo{font-family:var(--f-display);font-style:italic;color:#f6f3ea;font-size:22px;margin-bottom:14px;}
footer h4{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:#f6f3ea;margin-bottom:16px;
}
footer a, footer li{display:block;font-size:14px;line-height:2.1;color:var(--muted-lt);}
footer a:hover{color:var(--gold);}
.foot-bottom{
  display:flex;justify-content:space-between;padding-top:28px;font-family:var(--f-mono);
  font-size:12px;color:var(--muted-lt);flex-wrap:wrap;gap:10px;
}

/* ---------- Utility ---------- */
.muted{color:var(--muted);}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.center{text-align:center;}
.mt0{margin-top:0;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .campus-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;row-gap:36px;}
  .check-grid{grid-template-columns:1fr;}
  .subject-row{grid-template-columns:50px 1fr;}
  .subject-row .lvl{grid-column:2;text-align:left;}
}
@media (max-width:720px){
  .nav-links{display:none;}
  .nav-burger{display:block;color:#f6f3ea;font-family:var(--f-mono);font-size:22px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  section{padding:80px 0;}
  .hero{padding-top:110px;}
  .article-body{padding:60px 22px;}
}