/* =========================================================
   TopEduPrep — Design Tokens
   Ink #14181C · Paper #FAF6EE · Amber #F4B400 · Coral #E4402C · Navy #1B2A4A · Grey #6B6F76
   Type: Pretendard (Black for display, Regular/Medium for body)
   ========================================================= */

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root{
  --ink:#14181C;
  --paper:#FAF6EE;
  --amber:#F4B400;
  --amber-deep:#C88F00;
  --coral:#E4402C;
  --navy:#1B2A4A;
  --grey:#6B6F76;
  --line: rgba(20,24,28,0.12);
  --radius: 4px;
  --maxw: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Pretendard', sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-0.02em; }
p{ margin:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); }
:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{
  font-weight:900; font-size:1.15rem; letter-spacing:-0.01em;
  display:flex; align-items:center; gap:.5rem;
}
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--coral); display:inline-block; }
.nav{ display:flex; gap:clamp(1rem,2.5vw,2.1rem); font-weight:600; font-size:.94rem; }
.nav a{ position:relative; padding:.3rem 0; }
.nav a[aria-current="page"]{ color:var(--coral); }
.nav a:hover{ color:var(--navy); }
.topbar-cta{
  background:var(--ink); color:var(--paper); font-weight:700; font-size:.86rem;
  padding:.6rem 1.1rem; border-radius:100px; white-space:nowrap;
}
.topbar-cta:hover{ background:var(--coral); }
.nav-toggle{ display:none; }

/* ---------- Badges / stickers ---------- */
.sticker{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--coral); color:#fff; font-weight:800; font-size:.78rem;
  padding:.45rem .85rem; border-radius:100px;
  transform:rotate(-3deg);
  box-shadow:0 4px 0 rgba(0,0,0,0.12);
}
.sticker.alt{ background:var(--navy); transform:rotate(2deg); }
.sticker.amber{ background:var(--amber); color:var(--ink); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.95rem;
  padding:.85rem 1.5rem; border-radius:100px;
  border:2px solid var(--ink); background:var(--ink); color:var(--paper);
  cursor:pointer;
}
.btn:hover{ background:var(--coral); border-color:var(--coral); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }
.btn.on-dark{ border-color:var(--paper); background:var(--paper); color:var(--ink); }
.btn.on-dark:hover{ background:var(--amber); border-color:var(--amber); color:var(--ink); }

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--ink); color:var(--paper);
  overflow:hidden;
  padding-top:clamp(2.5rem,6vw,4rem);
}
.hero-display{
  font-size:clamp(3.2rem, 11vw, 8.5rem);
  line-height:0.86;
  font-weight:900;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(250,246,238,0.55);
  text-stroke:1.5px rgba(250,246,238,0.55);
  letter-spacing:-0.03em;
  white-space:nowrap;
  padding:0 clamp(1.25rem,4vw,2.5rem);
}
.hero-photo-row{
  display:grid; grid-template-columns: 1.55fr 1fr; gap:2px;
  margin-top:clamp(1.5rem,3vw,2rem);
}
.hero-photo{
  position:relative; min-height:clamp(260px,38vw,420px);
  background:linear-gradient(155deg,#28344a 0%, #1B2A4A 55%, #0f1420 100%);
  display:flex; align-items:flex-end;
}
.hero-photo.two{
  background:linear-gradient(155deg,#3a1f1a 0%, #E4402C 130%);
}
.hero-photo-tag{
  position:absolute; top:1.25rem; left:1.25rem;
}
.hero-photo-caption{
  padding:1.25rem; font-weight:700; font-size:.9rem; color:rgba(250,246,238,0.85);
}
.hero-banner{
  background:var(--amber); color:var(--ink);
  padding: clamp(2rem,5vw,3.5rem) 0;
}
.hero-banner-grid{
  display:grid; grid-template-columns: 1fr 1.35fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
}
.hero-banner-visual{
  aspect-ratio: 4/3; border-radius:var(--radius);
  background:linear-gradient(160deg,#1B2A4A,#14181C);
  position:relative; overflow:hidden;
}
.hero-banner-visual .grain{
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 20% 30%, rgba(244,180,0,.5), transparent 40%),
                     radial-gradient(circle at 80% 75%, rgba(228,64,44,.45), transparent 45%);
}
.hero-kicker{ font-weight:700; font-size:1.05rem; }
.hero-headline{
  font-size:clamp(2.4rem, 6.4vw, 4.6rem);
  line-height:0.98; font-weight:900; letter-spacing:-0.025em;
  margin:.35rem 0 .9rem;
}
.hero-headline em{ font-style:normal; color:var(--coral); }
.hero-sub{ font-weight:700; font-size:clamp(1.1rem,2.2vw,1.5rem); }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:1.4rem;
  font-weight:600; font-size:.88rem; color:rgba(20,24,28,0.75);
}

/* ---------- Sections ---------- */
section{ padding: clamp(3.5rem,7vw,6.5rem) 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.section-head h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:640px; }
.section-head p{ color:var(--grey); font-weight:500; max-width:360px; }
.eyebrow{ font-weight:700; color:var(--coral); font-size:.9rem; margin-bottom:.6rem; display:block; }

.lede{
  font-size:clamp(1.05rem,1.9vw,1.3rem); font-weight:500; line-height:1.75;
  max-width:820px; color:var(--ink);
}
.lede + .lede{ margin-top:1.2rem; }

/* ---------- Feature grid (온라인 시스템) ---------- */
.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.feature{
  background:var(--paper); padding:clamp(1.75rem,3vw,2.3rem);
}
.feature .num{ font-weight:800; color:var(--coral); font-size:.85rem; }
.feature h3{ font-size:1.2rem; margin:.7rem 0 .6rem; }
.feature p{ color:var(--grey); font-size:.95rem; font-weight:500; }

/* ---------- Curriculum cards ---------- */
.curr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.curr-card{
  border:2px solid var(--ink); border-radius:var(--radius);
  padding:2rem; position:relative; background:var(--paper);
}
.curr-card h3{ font-size:1.5rem; margin-bottom:.75rem; }
.curr-card p{ color:var(--grey); font-weight:500; font-size:.95rem; margin-bottom:1.2rem; }
.curr-card ul{ margin:0; padding-left:1.1rem; font-size:.92rem; font-weight:500; }
.curr-card li{ margin-bottom:.4rem; }
.curr-tag{ position:absolute; top:-14px; left:1.6rem; }

/* ---------- Campus list ---------- */
.campus-list{ border-top:1px solid var(--line); }
.campus-row{
  display:grid; grid-template-columns: 2fr 2fr 1.2fr; gap:1.5rem; align-items:center;
  padding:1.9rem 0; border-bottom:1px solid var(--line);
}
.campus-row .name{ font-size:1.4rem; font-weight:800; }
.campus-row .name span{ display:block; font-size:.85rem; font-weight:600; color:var(--coral); margin-top:.2rem; }
.campus-row .desc{ color:var(--grey); font-weight:500; font-size:.94rem; }

/* ---------- Stats ---------- */
.stat-band{ background:var(--navy); color:var(--paper); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.stat{ text-align:left; }
.stat .n{ font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:900; letter-spacing:-0.02em; }
.stat .n span{ color:var(--amber); }
.stat .l{ font-weight:600; font-size:.9rem; color:rgba(250,246,238,0.72); margin-top:.3rem; }

/* ---------- Article / blog teaser cards ---------- */
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.article-card{ display:block; }
.article-thumb{
  aspect-ratio:16/10; border-radius:var(--radius); margin-bottom:1rem;
  background:linear-gradient(150deg,var(--navy),#0f1420);
  position:relative; overflow:hidden;
}
.article-thumb .grain{ position:absolute; inset:0; background:radial-gradient(circle at 75% 20%, rgba(244,180,0,.45), transparent 50%); }
.article-date{ font-size:.8rem; font-weight:700; color:var(--coral); }
.article-card h3{ font-size:1.15rem; margin:.5rem 0 .5rem; line-height:1.35; }
.article-card p{ color:var(--grey); font-size:.9rem; font-weight:500; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--amber); }
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); max-width:520px; }

/* ---------- Footer ---------- */
footer{ background:var(--ink); color:rgba(250,246,238,0.75); padding:3.5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(250,246,238,0.14); }
.footer-grid h4{ color:var(--paper); font-size:.95rem; margin-bottom:1rem; }
.footer-grid a, .footer-grid p{ display:block; font-size:.88rem; margin-bottom:.55rem; color:rgba(250,246,238,0.7); font-weight:500; }
.footer-grid a:hover{ color:var(--amber); }
.footer-brand{ color:var(--paper); font-weight:900; font-size:1.2rem; margin-bottom:.8rem; }
.footer-bottom{ padding-top:1.5rem; display:flex; justify-content:space-between; font-size:.8rem; flex-wrap:wrap; gap:.6rem; color:rgba(250,246,238,0.5); }

/* ---------- Inner page hero (subpages) ---------- */
.page-hero{ background:var(--ink); color:var(--paper); padding: clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,3.5rem); }
.page-hero .eyebrow{ color:var(--amber); }
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05; max-width:820px; }
.page-hero p.lede{ color:rgba(250,246,238,0.8); margin-top:1rem; }
.breadcrumb{ font-size:.82rem; font-weight:600; color:rgba(250,246,238,0.55); margin-bottom:1.2rem; }
.breadcrumb a:hover{ color:var(--amber); }

.content-block{ max-width:760px; }
.content-block h2{ font-size:1.6rem; margin:2.4rem 0 1rem; }
.content-block h2:first-child{ margin-top:0; }
.content-block p{ margin-bottom:1.1rem; color:var(--ink); font-weight:400; }
.content-block ul{ margin:0 0 1.1rem; padding-left:1.2rem; }
.content-block li{ margin-bottom:.5rem; }
.content-block table{ width:100%; border-collapse:collapse; margin:1.2rem 0 1.8rem; font-size:.92rem; }
.content-block th,.content-block td{ text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); }
.content-block th{ font-weight:700; background:rgba(20,24,28,0.04); }

.side-card{ border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; margin-bottom:1.3rem; }
.side-card h4{ font-size:.95rem; margin-bottom:.9rem; }
.side-card .row{ display:flex; justify-content:space-between; font-size:.88rem; font-weight:600; padding:.5rem 0; border-bottom:1px dashed var(--line); }
.side-card .row:last-child{ border-bottom:none; }

.two-col{ display:grid; grid-template-columns: 2fr 1fr; gap:var(--gap); align-items:start; }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.contact-card{ border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; }
.contact-card .sticker{ margin-bottom:1rem; }
.contact-card h3{ font-size:1.15rem; margin-bottom:.5rem; }
.contact-card p{ color:var(--grey); font-weight:500; font-size:.9rem; }
.contact-form{ display:grid; gap:1rem; max-width:560px; }
.contact-form label{ font-weight:700; font-size:.88rem; display:block; margin-bottom:.4rem; }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius);
  font-family:inherit; font-size:.95rem; background:#fff;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ border-color:var(--navy); outline:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav{ display:none; }
  .hero-photo-row{ grid-template-columns:1fr; }
  .hero-banner-grid{ grid-template-columns:1fr; }
  .hero-banner-visual{ order:-1; }
  .feature-grid{ grid-template-columns:1fr; }
  .curr-grid{ grid-template-columns:1fr; }
  .campus-row{ grid-template-columns:1fr; gap:.4rem; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .article-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .two-col{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .section-head{ flex-direction:column; align-items:flex-start; gap:.8rem; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}

/* ---------- Admin CMS (index.html only) ---------- */
.admin-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:var(--ink); color:var(--paper);
  padding:.9rem 1.2rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
  font-size:.86rem;
}
.admin-bar strong{ font-weight:800; margin-right:.3rem; }
.admin-bar .spacer{ flex:1; }
.admin-bar button{
  font-family:inherit; font-weight:700; font-size:.84rem; cursor:pointer;
  border-radius:100px; padding:.55rem 1.1rem; border:1.5px solid rgba(250,246,238,.3);
  background:transparent; color:var(--paper);
}
.admin-bar button.primary{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.admin-bar button.danger{ border-color:var(--coral); color:var(--coral); }
.admin-bar button:hover{ opacity:.85; }
.admin-toggle-btn{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:99;
  width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--paper);
  border:none; font-size:1.2rem; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.3);
}
body.admin-on [data-editable]{ outline:1.5px dashed rgba(228,64,44,.55); outline-offset:3px; cursor:text; }
body.admin-on [data-editable]:focus{ outline:2px solid var(--coral); background:rgba(244,180,0,.08); }
body.admin-on [data-img-swap]{ position:relative; cursor:pointer; }
body.admin-on [data-img-swap]::after{
  content:"이미지 교체"; position:absolute; inset:auto 8px 8px auto; z-index:5;
  background:var(--coral); color:#fff; font-size:.72rem; font-weight:700;
  padding:.3rem .6rem; border-radius:100px;
}
body:not(.admin-on) .admin-toggle-btn{ opacity:.55; }

/* ---------- Layout variants (admin: 레이아웃 제안 5종) ---------- */
/* L1 = default (no extra class) — 오버레이 대형 타이포 + 2분할 사진 + 배너 */
body.layout-2 .hero-display{ display:none; }
body.layout-2 .hero-photo-row{ margin-top:0; grid-template-columns:1fr; }
body.layout-2 .hero-photo.two{ min-height:180px; }
body.layout-2 .hero-banner-grid{ grid-template-columns:1fr; text-align:center; }
body.layout-2 .hero-banner-grid > div:first-child{ display:none; }
body.layout-2 .hero-meta{ justify-content:center; }
body.layout-2 div[style*="margin-top:1.6rem"]{ justify-content:center; }

body.layout-3 .hero-photo-row{ grid-template-columns:1fr 1fr 1fr; }
body.layout-3 .hero-photo.two{ grid-column:span 2; }
body.layout-3 .hero-display{ -webkit-text-stroke:1.5px rgba(244,180,0,0.85); }

body.layout-4 .hero{ background:var(--paper); color:var(--ink); }
body.layout-4 .hero-display{ -webkit-text-stroke:1.5px rgba(20,24,28,0.18); }
body.layout-4 .hero-photo-caption{ color:rgba(20,24,28,0.75); }
body.layout-4 .hero-banner{ background:var(--ink); color:var(--paper); }
body.layout-4 .hero-banner-visual{ background:linear-gradient(160deg,var(--amber),#C88F00); }

body.layout-5 .hero-photo-row{ display:none; }
body.layout-5 .hero-display{ font-size:clamp(2.6rem,8vw,6rem); -webkit-text-stroke:0; color:var(--paper); opacity:.92; margin-bottom:1rem; }
body.layout-5 .hero{ padding-bottom:1rem; }