/* ===================================================================
   TOP EDU PREP — Design System v2
   Pastel / precision-minimal (Ive-inspired): one signature blue,
   generous whitespace, soft depth, pill forms, restrained motion.
=================================================================== */

:root{
  --ink:        #1D1D1F;
  --ink-soft:   #4B4E57;
  --muted:      #86868B;

  --paper:      #F7F6FB;
  --surface:    #FFFFFF;
  --surface-2:  #EFEDF7;
  --line:       #E4E1F0;

  --blue:       #7C93E0;
  --blue-deep:  #5A72C4;
  --mint:       #8FD4BC;
  --peach:      #F0B79A;

  --font-sans:  "Inter", "Pretendard", -apple-system, "Malgun Gothic", sans-serif;

  --maxw: 1120px;
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,.9,.32,1);
  --shadow-1: 0 1px 2px rgba(29,29,31,.04), 0 8px 24px rgba(29,29,31,.05);
  --shadow-2: 0 4px 10px rgba(29,29,31,.06), 0 20px 44px rgba(29,29,31,.09);
}

[data-theme="mint"]{ --blue:#63C3A4; --blue-deep:#3FA283; --peach:#F0B79A; --mint:#8FD4BC; }
[data-theme="blush"]{ --blue:#E29AAE; --blue-deep:#C97690; --mint:#8FD4BC; --peach:#F0C79A; }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 100px; }
body{
  margin:0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.005em;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

h1,h2,h3,h4{
  font-family: var(--font-sans); font-weight: 700;
  line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 .5em; color: var(--ink);
}
h1{ font-size: clamp(2.3rem, 5.2vw, 3.8rem); font-weight: 700; }
h2{ font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
h3{ font-size: 1.2rem; letter-spacing: -0.015em; }
p{ margin: 0 0 1em; max-width: 66ch; color: var(--ink-soft); }
.lede{ font-size: 1.2rem; color: var(--muted); max-width: 54ch; font-weight: 450; }

/* ---------- Header (floating pill) ---------- */
.site-header{ position: sticky; top: 14px; z-index: 50; }
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  max-width: var(--maxw); margin: 0 auto; padding: 10px 12px 10px 22px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}
.brand{ display:flex; flex-direction:column; }
.brand .kr{ font-size:1.05rem; font-weight:700; letter-spacing:-0.02em; color: var(--ink); }
.brand .en{ font-size:.62rem; color: var(--blue-deep); letter-spacing:.14em; margin-top:1px; }

nav.primary{ display:flex; gap: 6px; }
nav.primary a{
  font-size:.88rem; color: var(--ink-soft); padding: 9px 14px; border-radius: var(--r-pill);
  transition: background .25s var(--ease), color .25s var(--ease);
}
nav.primary a:hover{ background: var(--surface-2); color: var(--ink); }
nav.primary a[aria-current="page"]{ background: var(--ink); color: #fff; font-weight:600; }

.header-actions{ display:flex; align-items:center; gap:10px; }
.chat-links{ display:flex; gap:8px; }
.chat-links a{
  font-size:.78rem; padding:9px 16px; border-radius: var(--r-pill);
  background: var(--blue); color: #fff; white-space:nowrap;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.chat-links a:hover{ background: var(--blue-deep); transform: translateY(-1px); }
.chat-links a:active{ transform: translateY(0) scale(.97); }

.menu-toggle{ display:none; background: var(--surface-2); border:0; cursor:pointer; padding:10px; border-radius: var(--r-pill); }
.menu-toggle span{ display:block; width:18px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; transition: transform .25s var(--ease), opacity .2s; }

@media (max-width: 860px){
  .site-header{ top:10px; }
  .site-header .bar{ padding: 8px 8px 8px 18px; }
  nav.primary{
    position:fixed; inset: 78px 14px auto 14px; background: var(--surface);
    flex-direction:column; padding: 10px; gap:2px; border-radius: var(--r-md);
    box-shadow: var(--shadow-2); border: 1px solid var(--line);
    transform: translateY(-10px) scale(.98); opacity:0; pointer-events:none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  nav.primary.open{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
  nav.primary a{ padding: 13px 14px; }
  .chat-links{ display:none; }
  .menu-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding: 56px 0 24px; }
.hero .grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; }
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--blue-deep); font-size:.82rem; font-weight:600; margin-bottom: 18px;
  background: color-mix(in srgb, var(--blue) 14%, white); padding: 6px 14px; border-radius: var(--r-pill);
}
.hero .cta-row{ display:flex; gap:12px; margin-top: 30px; flex-wrap:wrap; }

.roadmap{
  background: var(--surface); border-radius: var(--r-lg); padding: 10px;
  box-shadow: var(--shadow-2); border: 1px solid var(--line);
}
.roadmap .step{
  display:flex; gap:14px; align-items:center; padding: 16px 16px; border-radius: var(--r-md);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.roadmap .step:hover{ background: var(--surface-2); transform: translateX(2px); }
.roadmap .grade{
  min-width: 78px; font-weight:700; font-size:.85rem; color: #fff; text-align:center;
  background: var(--blue); padding:6px 10px; border-radius: var(--r-pill);
}
.roadmap .desc{ font-size:.88rem; color: var(--ink-soft); }
.roadmap .desc b{ color: var(--ink); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 14px 26px; border-radius: var(--r-pill);
  font-size:.94rem; font-weight:600; border: 1px solid transparent; cursor:pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn-primary{ background: var(--ink); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-primary:active{ transform: translateY(0) scale(.98); }
.btn-outline{ border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-outline:hover{ border-color: var(--blue); color: var(--blue-deep); transform: translateY(-2px); }
.btn-outline:active{ transform: translateY(0) scale(.98); }

/* ---------- Sections ---------- */
section{ padding: 64px 0; }
section.alt{ background: var(--surface-2); border-radius: var(--r-lg); margin: 0 12px; }
.section-head{ margin-bottom: 38px; max-width: 62ch; }
.section-head .kicker{ color: var(--blue-deep); font-size:.8rem; font-weight:700; margin-bottom:8px; letter-spacing:.02em; }

.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.pillar{
  background: var(--surface); border-radius: var(--r-lg); padding: 28px 24px; border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pillar:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }
.pillar .num{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius: 50%; background: color-mix(in srgb, var(--blue) 16%, white); color: var(--blue-deep);
  font-weight:700; font-size:.9rem; margin-bottom: 14px;
}

.campus-list{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.campus{
  background: var(--surface); border-radius: var(--r-md); padding: 20px; border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.campus:hover{ transform: translateY(-3px); box-shadow: var(--shadow-1); }
.campus h3{ margin-bottom:4px; }
.campus .sub{ color: var(--blue-deep); font-size:.85rem; font-weight:600; }

.blog-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.blog-card{
  border-radius: var(--r-lg); background: var(--surface); padding: 26px; display:flex; flex-direction:column;
  border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }
.blog-card .tag{
  font-size:.72rem; font-weight:700; color: var(--blue-deep); margin-bottom:12px;
  background: color-mix(in srgb, var(--blue) 14%, white); display:inline-block; padding:4px 10px; border-radius: var(--r-pill);
  width: fit-content;
}
.blog-card h3{ font-size:1.12rem; }
.blog-card .excerpt{ color: var(--muted); font-size:.92rem; flex:1; }
.blog-card .more{ margin-top:16px; font-size:.86rem; color: var(--ink); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.blog-card .more::after{ content:"→"; transition: transform .2s var(--ease); }
.blog-card:hover .more::after{ transform: translateX(3px); }

.timeline-table{ width:100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-md); overflow:hidden; border:1px solid var(--line); }
.timeline-table th,.timeline-table td{ text-align:left; padding: 14px 16px; border-bottom:1px solid var(--line); font-size:.92rem; }
.timeline-table th{ font-weight:700; color: var(--ink); background: var(--surface-2); }
.timeline-table tr:last-child td{ border-bottom:0; }

.system-steps{ display:flex; flex-direction:column; gap: 12px; }
.system-step{
  display:grid; grid-template-columns: 56px 1fr; gap:18px; padding: 22px; align-items:flex-start;
  background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.system-step:hover{ transform: translateY(-3px); box-shadow: var(--shadow-1); }
.system-step .mark{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius: 50%;
  background: var(--blue); color:#fff; font-weight:700; font-size:1.05rem;
}

blockquote.quote{
  font-size:1.35rem; font-weight:600; color: var(--ink); letter-spacing:-0.015em;
  background: var(--surface); border-radius: var(--r-lg); padding: 34px 38px; margin: 0; max-width: 68ch;
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
blockquote.quote cite{ display:block; font-weight:500; font-style:normal; font-size:.84rem; color: var(--muted); margin-top:14px; }

/* ---------- Theme picker ---------- */
.theme-picker{ position:fixed; right:18px; bottom:18px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.theme-picker .swatches{
  display:flex; gap:8px; background: var(--surface); border:1px solid var(--line); padding:8px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  opacity:0; transform: translateY(6px) scale(.96); pointer-events:none; transition:.25s var(--ease);
}
.theme-picker.open .swatches{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.theme-picker button.sw{ width:24px; height:24px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line); cursor:pointer; transition: transform .2s var(--ease); }
.theme-picker button.sw:hover{ transform: scale(1.15); }
.theme-picker .toggle{
  width:46px; height:46px; border-radius:50%; background: var(--ink); color:#fff; border:0; cursor:pointer;
  box-shadow: var(--shadow-2); transition: transform .2s var(--ease);
}
.theme-picker .toggle:hover{ transform: scale(1.06); }

/* ---------- Editable index toolbar ---------- */
.edit-toolbar{
  position:fixed; left:18px; bottom:18px; z-index:60;
  background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: var(--r-pill);
  display:flex; gap:10px; align-items:center; font-size:.8rem; border:1px solid var(--line); box-shadow: var(--shadow-2);
}
.edit-toolbar button{
  background: var(--surface-2); border:0; color:var(--ink);
  padding:8px 14px; border-radius: var(--r-pill); cursor:pointer; font-size:.78rem; font-weight:600;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.edit-toolbar button:hover{ background: var(--blue); color:#fff; transform: translateY(-1px); }
[contenteditable="true"]{ outline: 2px dashed var(--blue); outline-offset: 4px; border-radius: 6px; }
.editable-img{ cursor:pointer; position:relative; border-radius: var(--r-md); overflow:hidden; }
.editable-img:hover::after{
  content:"클릭해서 이미지 변경"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(124,147,224,.55); color:#fff; font-size:.8rem; font-weight:600;
}

/* ---------- Footer ---------- */
footer.site-footer{ background: var(--ink); color: rgba(255,255,255,.78); padding: 52px 0 26px; margin: 48px 12px 12px; border-radius: var(--r-lg); }
footer.site-footer .grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; margin-bottom: 30px; padding: 0 28px; }
footer.site-footer h4{ color:#fff; font-size:.92rem; margin-bottom:12px; }
footer.site-footer a{ color: rgba(255,255,255,.68); display:block; padding:4px 0; font-size:.88rem; transition: color .2s; }
footer.site-footer a:hover{ color: var(--peach); }
footer.site-footer .bottom{ border-top:1px solid rgba(255,255,255,.15); padding: 18px 28px 0; font-size:.78rem; color: rgba(255,255,255,.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ---------- Reveal animation (staggered, single orchestrated pass) ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.pillars.reveal.in .pillar,
.campus-list.reveal.in .campus,
.blog-grid.reveal.in .blog-card,
.system-steps.reveal.in .system-step{ animation: rise .6s var(--ease) both; }
.pillars .pillar:nth-child(2), .campus-list .campus:nth-child(2), .blog-grid .blog-card:nth-child(2), .system-steps .system-step:nth-child(2){ animation-delay:.06s; }
.pillars .pillar:nth-child(3), .campus-list .campus:nth-child(3), .blog-grid .blog-card:nth-child(3), .system-steps .system-step:nth-child(3){ animation-delay:.12s; }
.campus-list .campus:nth-child(4), .system-steps .system-step:nth-child(4){ animation-delay:.18s; }
.system-steps .system-step:nth-child(5){ animation-delay:.24s; }
.system-steps .system-step:nth-child(6){ animation-delay:.30s; }
@keyframes rise{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .reveal, .pillar, .campus, .blog-card, .system-step{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero .grid{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; }
  .campus-list{ grid-template-columns: repeat(2,1fr); }
  .blog-grid{ grid-template-columns:1fr; }
  footer.site-footer .grid{ grid-template-columns:1fr; }
  section.alt{ margin: 0 8px; }
}
@media (max-width: 520px){
  .wrap{ padding: 0 18px; }
  .campus-list{ grid-template-columns:1fr; }
  blockquote.quote{ padding: 26px 22px; font-size:1.1rem; }
  .edit-toolbar, .theme-picker{ left:10px; right:10px; bottom:10px; }
  .theme-picker{ align-items:flex-end; }
}