/* =========================================================
   TopEduPrep — AP Calculus 학원 선택 가이드
   Design system: "Inflection" (변곡점)
   Signature idea: choosing AB vs BC is an inflection point —
   one curve, two tangent paths. Chalkboard-paper palette,
   graph-paper rules instead of plain hairlines.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Noto+Serif+KR:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  /* color */
  --ink:        #1B2430;   /* graphite / chalkboard */
  --ink-soft:   #4B5563;
  --paper:      #FAF7F0;   /* chalk paper */
  --paper-dim:  #F1ECDF;
  --rule:       #DBD4C3;
  --teal:       #2F6F62;   /* AB path */
  --teal-deep:  #1F4E44;
  --amber:      #C77B32;   /* BC path */
  --amber-deep: #9C5C1F;
  --alert:      #B4472A;   /* dates / urgency, used sparingly */
  --white:      #FFFFFF;

  /* type */
  --f-display: 'Fraunces', 'Noto Serif KR', serif;
  --f-body: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 3px;
  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--max);margin:0 auto;padding:0 24px;}

/* graph-paper texture used behind section dividers instead of a plain hairline */
.graph-rule{
  height:34px;
  background-image:
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 34px 100%;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  opacity:.6;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  margin:0 0 .5em;
  letter-spacing:-.01em;
  color:var(--ink);
}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.14; font-weight:700;}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.25;}
h3{font-size:1.25rem;}
p{margin:0 0 1.1em;color:var(--ink-soft);}
.eyebrow{
  font-family:var(--f-mono);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-deep);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--teal);}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,240,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:700; font-size:1.08rem;
  color:var(--ink);
}
.brand small{
  display:block; font-family:var(--f-mono); font-weight:500;
  font-size:.62rem; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase;
}
.brand-mark{
  width:30px;height:30px;flex:0 0 auto;
}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{
  font-size:.88rem; font-weight:600; color:var(--ink-soft);
  padding:6px 2px; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.nav-links a:hover, .nav-links a.active{color:var(--teal-deep); border-color:var(--teal);}
.nav-cta{
  font-family:var(--f-mono); font-size:.78rem; font-weight:600;
  background:var(--ink); color:var(--paper);
  padding:9px 16px; border-radius:var(--radius);
  white-space:nowrap;
}
.nav-cta:hover{background:var(--teal-deep);}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:6px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-weight:600; font-size:.85rem;
  padding:13px 22px; border-radius:var(--radius);
  border:1px solid var(--ink); cursor:pointer;
}
.btn-solid{background:var(--ink); color:var(--paper);}
.btn-solid:hover{background:var(--teal-deep); border-color:var(--teal-deep);}
.btn-line{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-line:hover{background:var(--ink); color:var(--paper);}
.btn-teal{background:var(--teal); color:var(--white); border-color:var(--teal);}
.btn-teal:hover{background:var(--teal-deep);}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero-copy p.lead{font-size:1.12rem; max-width:46ch;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}
.hero-stats{display:flex; gap:28px; margin-top:38px; flex-wrap:wrap;}
.hero-stats div{border-left:2px solid var(--rule); padding-left:12px;}
.hero-stats b{display:block; font-family:var(--f-display); font-size:1.5rem;}
.hero-stats span{font-size:.8rem; color:var(--ink-soft);}
.hero-graph{
  background:var(--white); border:1px solid var(--rule); border-radius:6px;
  padding:22px; box-shadow:0 22px 48px -28px rgba(27,36,48,.35);
}
.hero-graph svg{width:100%; height:auto; display:block;}

/* ---------- path compare cards (AB vs BC signature) ---------- */
.path-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.path-card{
  background:var(--white); border:1px solid var(--rule); border-radius:6px;
  padding:28px; position:relative; overflow:hidden;
}
.path-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
}
.path-card.ab::before{background:var(--teal);}
.path-card.bc::before{background:var(--amber);}
.path-tag{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  padding:4px 10px; border-radius:20px; display:inline-block; margin-bottom:14px;
  font-weight:600;
}
.path-card.ab .path-tag{background:#E4EFEA; color:var(--teal-deep);}
.path-card.bc .path-tag{background:#F5E7D6; color:var(--amber-deep);}
.path-card ul{margin:16px 0 0; padding-left:0; list-style:none;}
.path-card li{
  padding:9px 0 9px 22px; border-top:1px solid var(--paper-dim);
  font-size:.93rem; color:var(--ink-soft); position:relative;
}
.path-card li:first-child{border-top:none;}
.path-card.ab li::before{content:"—"; position:absolute; left:0; color:var(--teal);}
.path-card.bc li::before{content:"—"; position:absolute; left:0; color:var(--amber);}

/* ---------- sections ---------- */
section{padding:64px 0;}
.section-head{max-width:640px; margin-bottom:40px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:44px;}
.three-col{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card{background:var(--white); border:1px solid var(--rule); border-radius:6px; padding:26px;}

/* feature/service rows (rewritten curriculum bullets live here) */
.feature-row{
  display:grid; grid-template-columns:220px 1fr; gap:28px;
  padding:28px 0; border-top:1px solid var(--rule);
}
.feature-row:last-child{border-bottom:1px solid var(--rule);}
.feature-num{font-family:var(--f-mono); color:var(--teal-deep); font-size:.85rem;}
.feature-row h3{margin-bottom:8px;}

/* table */
.compare-table{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--rule);}
.compare-table th, .compare-table td{padding:14px 16px; border-bottom:1px solid var(--rule); text-align:left; font-size:.92rem; vertical-align:top;}
.compare-table th{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); background:var(--paper-dim);}
.compare-table td:first-child{font-weight:600; width:22%;}
.compare-table tr:last-child td{border-bottom:none;}
.tag-ab{color:var(--teal-deep); font-weight:600;}
.tag-bc{color:var(--amber-deep); font-weight:600;}

/* timeline (used only where sequence is real: exam calendar / curriculum weeks) */
.timeline{border-left:2px solid var(--rule); margin-left:6px; padding-left:28px;}
.timeline-item{position:relative; padding-bottom:34px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:""; position:absolute; left:-34px; top:4px; width:11px; height:11px;
  border-radius:50%; background:var(--paper); border:2px solid var(--teal);
}
.timeline-date{font-family:var(--f-mono); font-size:.78rem; color:var(--alert); font-weight:600; margin-bottom:4px;}

/* quote / review */
.review-card{background:var(--white); border:1px solid var(--rule); border-radius:6px; padding:26px;}
.review-card p{font-size:.96rem; color:var(--ink); margin-bottom:14px;}
.review-meta{font-family:var(--f-mono); font-size:.76rem; color:var(--ink-soft);}

/* pull quote (director philosophy) */
.pullquote{
  border-left:3px solid var(--amber); padding:6px 0 6px 26px; margin:34px 0;
  font-family:var(--f-display); font-size:1.28rem; line-height:1.5; color:var(--ink);
}
.pullquote cite{display:block; margin-top:14px; font-family:var(--f-mono); font-size:.78rem; font-style:normal; color:var(--ink-soft);}

/* faq */
details{border-top:1px solid var(--rule); padding:18px 0;}
details:last-child{border-bottom:1px solid var(--rule);}
summary{cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-family:var(--f-mono); font-size:1.2rem; color:var(--teal-deep);}
details[open] summary::after{content:"–";}
details p{margin-top:12px;}

/* campus / locations */
.campus-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.campus-card{border:1px solid var(--rule); border-radius:6px; padding:18px; background:var(--white);}
.campus-card b{display:block; font-family:var(--f-display); font-size:1.05rem; margin-bottom:4px;}
.campus-card span{font-size:.82rem; color:var(--ink-soft);}

/* footer */
footer{background:var(--ink); color:#D9DDE3; padding:56px 0 26px; margin-top:40px;}
footer a{color:#D9DDE3;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid #33404F;}
footer h4{color:#fff; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px;}
footer .brand{color:#fff;}
footer .brand small{color:#8B96A5;}
footer ul{list-style:none; padding:0; margin:0;}
footer li{margin-bottom:10px; font-size:.88rem; color:#B7BFC9;}
footer li a:hover{color:#fff;}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:22px; font-size:.78rem; color:#7C8798; font-family:var(--f-mono);
}

/* utility */
.mt-0{margin-top:0;}
.center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}
.badge{
  display:inline-block; font-family:var(--f-mono); font-size:.72rem; font-weight:600;
  padding:4px 10px; border-radius:20px; background:var(--paper-dim); color:var(--ink-soft);
  margin-bottom:10px;
}
.divider-graph{height:64px; margin:0;
  background-image:linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:34px 34px; opacity:.45;
}

@media (max-width:920px){
  .hero-grid, .two-col, .footer-grid{grid-template-columns:1fr;}
  .path-grid{grid-template-columns:1fr;}
  .three-col{grid-template-columns:1fr 1fr;}
  .campus-grid{grid-template-columns:1fr 1fr;}
  .feature-row{grid-template-columns:1fr; gap:8px;}
  .nav-links{
    position:fixed; inset:60px 0 0 0; background:var(--paper);
    flex-direction:column; padding:30px 24px; gap:0; align-items:flex-start;
    transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{width:100%; padding:16px 0; border-bottom:1px solid var(--rule); border-left:0 !important;}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
}
@media (max-width:640px){
  .three-col{grid-template-columns:1fr;}
  .campus-grid{grid-template-columns:1fr;}
  section{padding:44px 0;}
  .compare-table{display:block; overflow-x:auto; white-space:nowrap;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}