/* ============================================================
   마라톤 — 공통 스타일시트
   브랜드: 오프화이트 / 차콜 + 과목별 포인트색
   폰트: Pretendard
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');

:root{
  --bg:#FAF7F0;
  --surface:#FFFFFF;
  --ink:#2A2723;
  --ink-soft:#6B655C;
  --ink-faint:#A29B8E;
  --line:#E9E2D5;
  --line-soft:#F1EBDF;

  /* 기본(메인) 포인트색 = 세이지 */
  --accent:#6E8B6A;
  --accent-deep:#4F6B4C;
  --accent-soft:#EDF2EA;

  --radius:18px;
  --radius-lg:26px;
  --shadow:0 10px 30px -18px rgba(42,39,35,.28);
  --shadow-lg:0 24px 60px -30px rgba(42,39,35,.40);
  --maxw:980px;
  --pad:clamp(20px,5vw,40px);
}

/* 과목별 테마 */
.theme-korean { --accent:#6E8B6A; --accent-deep:#4F6B4C; --accent-soft:#EDF2EA; }
.theme-english{ --accent:#DB8A5E; --accent-deep:#B5683D; --accent-soft:#FBEDE3; }
.theme-math   { --accent:#3E8E9C; --accent-deep:#2C6975; --accent-soft:#E5F1F2; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
  /* 한국어 줄바꿈: 어절(띄어쓰기) 단위로 끊기 — 단어 중간 줄바꿈 방지 */
  word-break:keep-all;
  overflow-wrap:break-word;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- 상단 네비 ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,240,.82);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.05rem; }
/* 로고 오른쪽 두 줄 — 네비 높이(62px)는 .nav-inner 에 고정돼 있어 늘어나지 않는다 */
.brand-txt{ display:flex; flex-direction:column; justify-content:center; gap:1px; }
.brand-t1{ font-size:1.05rem; font-weight:800; letter-spacing:-0.02em; line-height:1.15; }
.brand-t2{
  font-size:.75rem; font-weight:600; letter-spacing:-0.01em; line-height:1.2;
  color:var(--ink-soft); white-space:nowrap;
}
/* 모바일에서는 자리를 아끼려고 2행을 감춘다 */
@media(max-width:560px){ .brand-t2{ display:none; } }
.brand .dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.nav-links{ display:flex; gap:6px; }
.nav-links a{
  font-size:.9rem; font-weight:600; color:var(--ink-soft);
  padding:8px 13px; border-radius:999px; transition:.18s;
}
.nav-links a:hover{ color:var(--accent-deep); background:var(--accent-soft); }
.nav-cta{
  background:var(--accent); color:#fff !important; font-weight:700;
  padding:9px 16px !important; border-radius:999px !important;
}
.nav-cta:hover{ background:var(--accent-deep) !important; }
@media(max-width:680px){ .nav-links a:not(.nav-cta){ display:none; } }

/* ---------- 히어로 ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(56px,10vw,104px) 0 clamp(48px,8vw,80px); }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 85% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(50% 60% at -10% 110%, var(--accent-soft), transparent 55%);
  opacity:.9; z-index:0;
}
.hero .wrap{ position:relative; z-index:1; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  color:var(--accent-deep); background:var(--surface);
  border:1px solid var(--line); padding:7px 14px; border-radius:999px;
  box-shadow:var(--shadow);
}
.eyebrow .run{ font-size:.95rem; }
h1.hero-title{
  font-size:clamp(2.1rem,6.2vw,3.6rem); font-weight:800; line-height:1.18;
  letter-spacing:-0.03em; margin:22px 0 16px;
}
h1.hero-title em{ color:var(--accent-deep); font-style:normal; }
.hero-sub{ font-size:clamp(1.02rem,2.4vw,1.2rem); color:var(--ink-soft); max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* 핵심 카피 띠 */
.kicker-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.chip{
  font-weight:700; font-size:.92rem; color:var(--accent-deep);
  background:var(--surface); border:1px solid var(--line);
  padding:9px 15px; border-radius:999px;
}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:1rem; padding:14px 26px; border-radius:999px;
  transition:.2s; cursor:pointer; border:1.5px solid transparent;
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-ghost{ background:var(--surface); color:var(--accent-deep); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); background:var(--accent-soft); }
.btn .arr{ transition:.2s; }
.btn:hover .arr{ transform:translateX(3px); }

/* ---------- 섹션 ---------- */
section{ padding:clamp(48px,8vw,86px) 0; }
.section-head{ max-width:640px; margin-bottom:38px; }
.section-label{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.82rem; font-weight:800; letter-spacing:.05em; color:var(--accent-deep);
  margin-bottom:14px;
}
.section-label .num{
  font-variant-numeric:tabular-nums; font-size:.78rem;
  background:var(--accent); color:#fff; width:26px; height:26px;
  display:inline-grid; place-items:center; border-radius:50%;
}
h2.section-title{ font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; letter-spacing:-0.02em; line-height:1.25; }
.section-desc{ color:var(--ink-soft); margin-top:14px; font-size:1.04rem; }
.tinted{ background:var(--accent-soft); }

/* ---------- 카드 그리드 ---------- */
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:820px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr;} }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow);
  transition:.2s;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.card h3{ font-size:1.12rem; font-weight:800; margin-bottom:8px; }
.card p{ color:var(--ink-soft); font-size:.98rem; }
.card .ic{
  width:46px; height:46px; border-radius:13px; background:var(--accent-soft);
  color:var(--accent-deep); display:grid; place-items:center; font-size:1.3rem;
  margin-bottom:16px;
}

/* 과목 선택 카드 (메인 하단) */
.subject-card{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:230px; border-radius:var(--radius-lg); padding:30px 28px;
  color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow);
  transition:.22s;
}
.subject-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.subject-card .big{ font-size:2rem; font-weight:800; letter-spacing:-0.02em; }
.subject-card .desc{ font-size:.96rem; opacity:.92; margin-top:8px; }
.subject-card .go{ display:inline-flex; align-items:center; gap:8px; font-weight:700; margin-top:22px; }
.subject-card .run{ position:absolute; right:18px; top:14px; font-size:2.6rem; opacity:.5; }
.sc-korean { background:linear-gradient(140deg,#7C9A77,#4F6B4C); }
.sc-english{ background:linear-gradient(140deg,#E2966A,#B5683D); }
.sc-math   { background:linear-gradient(140deg,#479FAD,#2C6975); }

/* ---------- STEP 타임라인 (마라톤 루트) ---------- */
.route{ position:relative; padding-left:8px; }
.route::before{
  content:""; position:absolute; left:25px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(var(--accent),var(--accent-soft));
}
.step{ position:relative; padding:0 0 26px 64px; }
.step:last-child{ padding-bottom:0; }
.step .mark{
  position:absolute; left:6px; top:0; width:40px; height:40px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  font-weight:800; font-size:.95rem; box-shadow:0 0 0 6px var(--bg);
}
.step h4{ font-size:1.1rem; font-weight:800; margin-bottom:6px; }
.step p{ color:var(--ink-soft); font-size:.98rem; }
.step .meta{ display:inline-block; font-size:.82rem; font-weight:700; color:var(--accent-deep); background:var(--accent-soft); padding:3px 11px; border-radius:999px; margin-top:9px; }

/* ---------- 리스트 (개요/특징) ---------- */
.feature{ display:flex; gap:14px; align-items:flex-start; }
.feature .tick{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-deep);
  display:grid; place-items:center; font-weight:800; font-size:.85rem; margin-top:3px;
}
.feature h4{ font-size:1.04rem; font-weight:700; }
.feature p{ color:var(--ink-soft); font-size:.95rem; }

/* ---------- 후기 ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:760px){ .video-grid{ grid-template-columns:1fr; } }
.video-embed{ position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.reviews{ columns:2; column-gap:18px; }
@media(max-width:720px){ .reviews{ columns:1; } }
.review{
  break-inside:avoid; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 22px; margin-bottom:18px; box-shadow:var(--shadow);
}
.review .top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.review .ava{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  background:var(--accent-soft); color:var(--accent-deep);
  display:grid; place-items:center; font-weight:800; font-size:1.05rem;
}
.review .who{ font-weight:800; font-size:.98rem; }
.review .span{ font-size:.8rem; color:var(--ink-faint); }
.review .grade{
  font-size:.84rem; font-weight:700; color:var(--accent-deep);
  background:var(--accent-soft); padding:6px 12px; border-radius:10px;
  margin-bottom:12px; display:inline-block; line-height:1.4;
}
.review .body{ font-size:.95rem; color:var(--ink-soft); white-space:pre-line; }

/* ---------- 인사말 ---------- */
.letter{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(28px,5vw,52px); box-shadow:var(--shadow); position:relative;
}
.letter::before{
  content:"“"; position:absolute; top:6px; left:24px;
  font-size:5rem; color:var(--accent-soft); font-weight:800; line-height:1;
}
.letter p{ position:relative; color:var(--ink); font-size:1.05rem; margin-bottom:16px; }
.letter .sign{ margin-top:24px; font-weight:800; color:var(--accent-deep); }

/* ---------- CTA 배너 ---------- */
.cta-banner{
  background:linear-gradient(140deg,var(--accent),var(--accent-deep));
  color:#fff; border-radius:var(--radius-lg); padding:clamp(36px,6vw,60px);
  text-align:center; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.cta-banner h2{ font-size:clamp(1.5rem,4vw,2.2rem); font-weight:800; margin-bottom:12px; }
.cta-banner p{ opacity:.92; margin-bottom:26px; font-size:1.05rem; }
.cta-banner .btn-primary{ background:#fff; color:var(--accent-deep); }
.cta-banner .btn-primary:hover{ background:#fff; }
.cta-banner .run-row{ font-size:1.8rem; letter-spacing:8px; opacity:.5; margin-bottom:14px; }

/* 안내(placeholder) 박스 - 영어/수학 템플릿용 */
.placeholder{
  border:2px dashed var(--accent); background:var(--accent-soft);
  border-radius:var(--radius); padding:22px 24px; color:var(--accent-deep);
  font-size:.95rem; font-weight:600;
}
.placeholder b{ color:var(--ink); }

/* ---------- 푸터 ---------- */
.footer{ border-top:1px solid var(--line); padding:40px 0; color:var(--ink-faint); font-size:.88rem; }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; }
.footer a{ color:var(--ink-soft); font-weight:600; }
.footer a:hover{ color:var(--accent-deep); }

/* ---------- 스크롤 등장 ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}