/* 디자인 토큰 — 역할 기반 변수. 모든 색상은 반드시 var(--...)로만 참조한다. */

/* 색은 유튜브 채널(프로필·배너·썸네일)을 따른다: 푸른 차콜 단색 바탕, 강조는 프로필 알의 노랑 하나.
   기준 youtube/thumbnail-style.md, 면 색은 썸네일 칩, 대회 인디고는 영상 덱 다크판 강조색 */
:root {
  --bg: #1b1e28;
  --surface: #242835;
  --surface-2: #2e3342;
  --text: #e7e7e9;
  --text-muted: #9ca1ae;
  --border: #353a4a;
  --accent: #f2b533;
  --accent-from: #f2b533;
  --accent-to: #f2b533;
  --accent-ink: #1b1e28;
  --gold: #f2b533;
  --star: #f2b533;
  /* 연혁 — 교육/콘텐츠 이력 (채널 노랑) */
  --accent2-from: #f2b533;
  --accent2-to: #f2b533;
  /* 연혁 — 알고리즘 대회 이력 (덱 다크판 인디고) */
  --accent3-from: #8f89ff;
  --accent3-to: #8f89ff;

  /* 그라데이션 없이 단색 (변수 이름은 옛 랜딩페이지 부분과 맞추려고 둠) */
  --gradient-accent: var(--accent);
  --gradient-accent2: var(--accent2-from);
  --gradient-accent3: var(--accent3-from);

  --font-display: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --page-width: 1080px;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  /* 한국어 문장이 단어 중간에서 줄바꿈되지 않게 한다 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

[hidden] {
  display: none !important;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: var(--accent);
}

.nobr {
  white-space: nowrap;
}

.hl-color {
  color: var(--accent);
}

/* 페이지 틀 — 바탕은 채널처럼 단색 (격자·빛 번짐 없음) */
.page {
  position: relative;
  z-index: 1;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── 상단바: 화면 위에 붙어 다니며 구역으로 바로 이동 ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.nav-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* 채널 이름표: 프로필 알 로고 + 이름 (채널 화면에서 프로필 옆에 이름이 뜨는 모양) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  flex: none;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
}

.brand-egg {
  width: auto;
  height: 1.55em;
  flex: none;
}

.brand-egg path {
  fill: var(--accent);
}

.brand-egg polyline {
  fill: none;
  stroke: var(--bg);
  stroke-width: 62;
  stroke-linejoin: round;
}

.brand-sub {
  font-weight: 600;
  color: var(--text-muted);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-links a {
  flex: none;
  padding: 0.5em 0.85em;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  color: var(--text);
  background: var(--surface-2);
}

.nav-links .nav-cta {
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.nav-links .nav-cta:hover,
.nav-links .nav-cta:focus-visible,
.nav-links .nav-cta.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* 상단바에 가려지지 않게 이동 위치에 여백 */
#about,
#method,
#history,
#roadmap,
#reviews,
.step {
  scroll-margin-top: 4.5rem;
}

/* ── 첫 화면 ── */
.hero {
  position: relative;
  padding: 4.5rem 0 3.5rem;
  text-align: center;
}

.title {
  position: relative;
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.title-accent {
  color: var(--accent);
}

.lead {
  position: relative;
  margin-top: 0.7rem;
  font-size: 1.08rem;
  color: var(--text-muted);
  /* 줄이 나뉠 때 마지막 줄에 한 단어만 남지 않게 */
  text-wrap: balance;
}

/* 밑줄 하이라이팅 — 텍스트는 유지하고 굵기 + 밑줄로 포인트 강조 (옛 랜딩페이지 그대로) */
.hl {
  font-weight: 700;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.15em;
}

.hero-actions {
  position: relative;
  margin-top: 1.6rem;
}

/* 첫 화면에서 로드맵으로 내려가는 링크 — 알약 버튼 대신 글자 + 살짝 움직이는 화살표 */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

/* 밑줄은 글자에만 (화살표 밑에 따로 그어지지 않게) */
.hero-link-text {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 28%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-decoration-color 0.2s ease;
}

.hero-link .cta-arrow {
  color: var(--accent);
  animation: nudge-down 1.8s ease-in-out infinite;
}

.hero-link:hover .hero-link-text,
.hero-link:focus-visible .hero-link-text {
  text-decoration-color: var(--accent);
}

@keyframes nudge-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* 이벤트 띠 — 쿠폰이 있을 때만 페이지 맨 위에 한 줄 (기한이 지나면 스크립트가 숨긴다) */
.event-bar {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem 0.8rem;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  text-decoration: none;
  text-align: center;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 13%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

.event-tag {
  font-weight: 800;
  color: var(--accent);
}

.event-text b {
  color: var(--accent);
}

.event-go {
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent);
  text-underline-offset: 0.25em;
}

.event-bar:hover .event-go,
.event-bar:focus-visible .event-go {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* 빛이 한 번 지나가는 강조 — 들어온 뒤 이벤트 띠·이벤트 칩에만 */
.event-bar::after,
.chip-coupon::after,
.chip-sale::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--gold) 35%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

/* 노랑으로 채운 칩 위에서는 흰 빛이라야 보인다 */
.chip-coupon::after,
.chip-sale::after {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
}

.is-sweep::after {
  animation: sweep 1.2s ease-out 1;
}

@keyframes sweep {
  to { transform: translateX(120%); }
}

/* ── 공통 섹션 ── */
.sec {
  padding: 4.5rem 0 1rem;
}

.sec-head {
  margin-bottom: 2rem;
}

.eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}

.sec-title {
  margin-top: 0.35rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
}

.sec-lead {
  margin-top: 0.5rem;
  color: var(--text-muted);
}

/* ── 공부 순서: 세로로 1 → 2 → 3, 번호를 잇는 선 위로 빛이 흘러내린다 ── */
.roadmap {
  padding-top: 1rem;
}

.steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.steps::before {
  content: "";
  position: absolute;
  left: calc(1.15rem - 0.5px);
  top: 1.5rem;
  bottom: 1.5rem;
  width: 1px;
  background: var(--border);
}

.steps::after {
  content: "";
  position: absolute;
  left: calc(1.15rem - 1px);
  top: 1.5rem;
  width: 2px;
  height: 5rem;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  animation: beam 4.5s ease-in-out infinite;
}

@keyframes beam {
  0% { top: 1.5rem; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 6.5rem); opacity: 0; }
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  gap: 1.25rem;
}

.step-num {
  position: relative;
  z-index: 1;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  margin-top: 1.4rem;
  border-radius: 50%;
  font: 700 0.9rem var(--font-mono);
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* 화면 가운데에 들어온 강의의 번호가 밝아진다 (JS가 .is-current를 붙인다) */
.step.is-current .step-num {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* 강의 칸은 칸 전체가 하나의 링크다 (.course-go가 칸을 덮는다) */
.course-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2rem;
  align-items: center;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.step.is-current .course-card {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.course-card:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--surface) 94%, var(--text));
}

.course-media {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.course-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 781;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-card:hover .course-media img {
  transform: scale(1.03);
}

.course-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.step-who {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.35;
}

.course-name {
  margin-top: 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 85%, var(--text-muted));
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.course-meta svg {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.25em;
  vertical-align: -0.1em;
  color: var(--star);
}

.chip {
  position: relative;
  overflow: hidden;
  font: 700 0.68rem var(--font-mono);
  padding: 0.3em 0.6em;
  border-radius: 999px;
  white-space: nowrap;
}

.chip-free {
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

/* NEW는 이벤트가 아니라 회색 (노랑은 쿠폰·할인 칩에만) */
.chip-new {
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

/* 이벤트 칩 — 쿠폰과 기한 있는 할인은 노랑으로 채워 크게 */
.chip-coupon,
.chip-sale {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.32em 0.8em;
  color: var(--accent-ink);
  background: var(--accent);
}

.mini-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* 이런 분께 맞아요 — 기본은 목록, JS가 켜면 한 줄 자리에서 하나씩 바뀐다 */
.fit {
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--surface-2);
}

.fit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* 점 버튼은 칸 전체 링크 위로 올려 계속 누를 수 있게 */
.fit-dots {
  position: relative;
  z-index: 2;
  display: none;
  gap: 0.35rem;
}

.fit-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* 꺼진 점도 칸 바탕 위에서 보이게 (테두리 색은 바탕과 거의 같아 안 보였음) */
  background: color-mix(in srgb, var(--text) 32%, transparent);
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.3s ease;
}

.fit-dot.is-on {
  width: 1.1rem;
  border-radius: 999px;
  background: var(--accent);
}

.fit-list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fit-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
}

.fit-check {
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 1.05rem;
  height: 1.05rem;
  overflow: visible;
}

.fit-check path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.rot-on .fit-dots {
  display: flex;
}

.rot-on .fit-list {
  display: grid;
}

.rot-on .fit-list li {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* 나가는 줄이 먼저 빨리 사라지고(0.2초), 그 뒤에 들어오는 줄이 나타난다 — 두 줄이 겹쳐 보이지 않게 */
.rot-on .fit-list li.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.2s;
}

.rot-on .fit-list li.is-out {
  opacity: 0;
  transform: translateY(-10px);
  transition-duration: 0.2s;
  transition-delay: 0s;
}

.rot-on .fit-list li .fit-check path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.4s ease 0.4s;
}

.rot-on .fit-list li.is-on .fit-check path {
  stroke-dashoffset: 0;
}

/* 흐르는 띠 (수강평) */
@keyframes flow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 칸 맨 아래 줄 — 왼쪽은 실제 가격(할인이 있을 때만), 오른쪽은 "강의 보기 →" */
.course-foot {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 1.1rem;
}

.course-deal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.55rem;
  margin: 0;
}

/* 정가와 할인가는 한 묶음으로 같이 줄바꿈 */
.deal-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
}

.course-deal s {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.course-deal b {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent);
}

/* 칸 아래 "강의 보기 →" — 버튼 대신 글자 한 줄. ::after가 칸 전체를 덮어 어디를 눌러도 간다 */
.course-go {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  /* 칸의 오른쪽 아래 — 가격이 없어도 오른쪽에 붙는다 */
  margin-left: auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.course-go::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 18px;
}

.course-go:focus-visible {
  outline: none;
}

.course-go:focus-visible::after {
  box-shadow: 0 0 0 2px var(--accent);
}

/* 할인(쿠폰·기한 있는 할인)이 있는 강의는 늘 노랑: 누르면 할인받는 길 */
.course-go.is-deal,
.course-card:hover .course-go {
  color: var(--accent);
}

.cta-arrow {
  color: var(--accent);
  transition: transform 0.25s ease;
}

.course-card:hover .course-go .cta-arrow,
.course-go:focus-visible .cta-arrow {
  transform: translateX(4px);
}

/* ── 수강평 — 흐르는 띠 (마우스를 올리거나 손가락을 대고 있으면 멈춤) ── */
.reviews .sec-head {
  text-align: center;
}

.rv-view {
  overflow: hidden;
  /* 본문 폭을 벗어나 화면 양끝 가까이까지 (스크롤바가 있어도 넘치지 않게 2rem 여유) */
  margin: 0 calc((100% - min(100vw - 2rem, 1400px)) / 2);
  padding: 0.4rem 0 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.rv-track {
  display: flex;
  width: max-content;
  animation: flow 60s linear infinite;
}

/* 마우스가 있는 기기는 올리면 멈춰 카드를 읽을 수 있게 한다.
   휴대폰·태블릿은 누르면 "올린 상태"가 남아 멈춘 채로 있어서 :hover를 쓰지 않고,
   손가락을 대고 있는 동안만 멈춘다(is-held, index.html 스크립트) */
@media (hover: hover) and (pointer: fine) {
  .rv-view:hover .rv-track {
    animation-play-state: paused;
  }
}

.rv-view.is-held .rv-track {
  animation-play-state: paused;
}

/* 길게 누를 때 글자 선택·메뉴가 뜨지 않게 (터치 기기만) */
@media (hover: none) {
  .rv-view {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

.rv-set {
  display: flex;
  gap: 0.9rem;
  padding-right: 0.9rem;
}

.review {
  display: flex;
  flex-direction: column;
  flex: 0 0 19rem;
  width: 19rem;
  margin: 0;
  padding: 1.3rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.review-star {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--star);
}

.review p {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.review b {
  color: var(--text);
}

.review figcaption {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.reviews-more {
  display: block;
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.reviews-more:hover {
  text-decoration: underline;
}

/* ── 강사 소개: 옛 랜딩페이지의 실적·교육 방식·연혁을 그대로 쓴다 (아래 "옛 랜딩페이지에서 가져온 부분") ── */
.about {
  padding-top: 0;
}

.about .stats {
  padding: 0;
}

.about-block {
  padding-top: 4rem;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.foot a {
  color: var(--text-muted);
}

/* ── 움직임: JS가 html에 .anim을 붙였을 때만 처음 상태를 숨긴다 ── */
.anim [data-a],
.anim .reveal {
  opacity: 0;
  transition: none !important;
}

/* ===== 옛 랜딩페이지에서 가져온 부분 (main 브랜치 styles.css 304~850줄 그대로) ===== */
/* 핵심 실적 통계 */
.stats {
  padding-top: 0;
  padding-bottom: 2.5rem;
}

.stat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  animation: stat-float 6s ease-in-out infinite;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:nth-child(2) {
  animation-delay: -2s;
}

.stat-card:nth-child(3) {
  animation-delay: -4s;
}

.stat-card:hover {
  border-color: color-mix(in srgb, var(--accent-from) 40%, var(--border));
  background: var(--surface-2);
  transform: translateY(-4px);
  animation-play-state: paused;
}

@keyframes stat-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.stat-label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.stat-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  color: var(--accent-from);
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--text);
}

.stat-value-sub {
  font-size: 0.45em;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 0.15em;
}

@media (max-width: 640px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 1.25rem 1rem;
  }
}

/* 헤드라인형 섹션 제목 — 교육 방식 / 연혁 / 강의 */
.teaching-method h2,
.timeline h2,
.courses h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 2rem;
}

.timeline h2 {
  margin-bottom: 1.5rem;
}

.timeline-intro {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 100%;
  margin-bottom: 2.5rem;
}

/* 교육 방식 — 그리드 타일 */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}

.compare-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.compare-mark {
  flex-shrink: 0;
  width: 1.3rem;
  height: 1.3rem;
}

.compare-cell-x {
  color: var(--text-muted);
  border-color: color-mix(in srgb, #E5484D 22%, var(--border));
}

.compare-cell-x .compare-mark {
  color: #E5484D;
}

.compare-cell-x:hover {
  border-color: color-mix(in srgb, #E5484D 40%, var(--border));
}

.compare-cell-o {
  color: var(--text);
  font-weight: 600;
  border-color: color-mix(in srgb, var(--accent2-from) 30%, var(--border));
}

.compare-cell-o .compare-mark {
  color: var(--accent2-from);
}

.compare-cell-o:hover {
  border-color: color-mix(in srgb, var(--accent2-from) 50%, var(--border));
  background: var(--surface-2);
}

@media (max-width: 640px) {
  .compare-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}

/* 연혁 — 중앙 타임라인 (좌: ICPC 대회 성과 / 우: 교육·콘텐츠 이력) */
.timeline-legend {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin: -0.5rem 0 2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gradient-accent2);
}

.legend-dot.is-contest {
  background: var(--gradient-accent3);
}

.dual-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.dual-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--text-muted) 70%, transparent), var(--border));
  opacity: 0.55;
}

.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 4.5rem 1fr;
  align-items: stretch;
  gap: 0 1.25rem;
  min-height: 6rem;
}

.tl-side {
  position: relative;
  min-width: 0;
}

.tl-left {
  padding-right: 1.25rem;
}

.tl-right {
  padding-left: 1.25rem;
}

.tl-year {
  position: relative;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  z-index: 1;
}

.tl-year::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  border: 2px solid var(--border);
  z-index: -1;
}

/* 각 이벤트는 해당 연도 구간 내 월 위치(--month: 1~12)에 비례해 세로로 배치되고,
   중앙 축의 그 지점까지 점 + 연결선으로 이어진다. */
.tl-card {
  position: absolute;
  top: calc((var(--month, 6) - 1) / 12 * 100%);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  width: max-content;
  max-width: 100%;
  padding: 0.5rem 0.85rem;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent2-from) 30%, var(--border));
  border-radius: 8px;
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tl-left .tl-card {
  right: 0;
}

.tl-right .tl-card {
  left: 0;
}

/* 카드에서 중앙 축까지 이어지는 연결선 */
.tl-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.25rem;
  height: 1px;
  background: color-mix(in srgb, var(--accent2-from) 55%, var(--border));
  transform: translateY(-50%);
}

.tl-left .tl-card::after {
  right: -1.25rem;
}

.tl-right .tl-card::after {
  left: -1.25rem;
}

.tl-card.is-contest::after {
  background: color-mix(in srgb, var(--accent3-from) 55%, var(--border));
}

/* 연결선이 축에 닿는 지점의 점 */
.tl-card::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gradient-accent2);
  transform: translateY(-50%);
  z-index: 1;
}

.tl-left .tl-card::before {
  right: -1.34rem;
}

.tl-right .tl-card::before {
  left: -1.34rem;
}

.tl-card.is-contest::before {
  background: var(--gradient-accent3);
}

.tl-card:hover,
.tl-card:focus-visible,
.tl-card:focus-within {
  background: var(--surface-2);
  z-index: 2;
}

.tl-card:not(.is-contest):hover,
.tl-card:not(.is-contest):focus-visible,
.tl-card:not(.is-contest):focus-within {
  border-color: color-mix(in srgb, var(--accent2-from) 45%, var(--border));
}

.tl-card.is-contest {
  border-color: color-mix(in srgb, var(--accent3-from) 35%, var(--border));
}

.tl-card.is-contest:hover,
.tl-card.is-contest:focus-visible {
  border-color: color-mix(in srgb, var(--accent3-from) 40%, var(--border));
}

.tl-body {
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.3;
  white-space: normal;
}

.tl-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent2-from) 55%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}

.tl-link:hover,
.tl-link:focus-visible {
  text-decoration-color: var(--accent2-from);
}

.tl-result {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent3-from);
}

/* 호버/포커스 시 상세 정보 플로팅 (.tl-detail 자식 요소로 구현) */
.tl-detail {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 26rem;
  padding: 0.55rem 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text);
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5);
  z-index: 3;
}

.tl-detail-line {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

.tl-detail-line::before {
  content: "> ";
  color: var(--accent2-from);
}

.tl-card.is-contest .tl-detail-line::before {
  color: var(--accent3-from);
}

.tl-detail-line + .tl-detail-line {
  margin-top: 0.2rem;
}

.tl-detail-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tl-detail-link:hover,
.tl-detail-link:focus-visible {
  color: var(--text);
}

/* 카드-툴팁 사이 간격을 투명 hit-area로 메워 호버 경로가 끊기지 않게 한다 */
.tl-detail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.6rem;
}

.tl-card:hover .tl-detail,
.tl-card:focus-visible .tl-detail,
.tl-card:focus-within .tl-detail,
.tl-detail:hover,
.tl-detail:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
  .dual-timeline::before {
    left: 1.05rem;
  }

  .tl-row {
    grid-template-columns: 2.1rem 1fr;
    grid-template-areas:
      "year left"
      "year right";
    min-height: 0;
    row-gap: 0.5rem;
  }

  .tl-year {
    grid-area: year;
  }

  .tl-left {
    grid-area: left;
    padding-right: 0;
    padding-left: 1.25rem;
  }

  .tl-right {
    grid-area: right;
    padding-left: 1.25rem;
  }

  .tl-left:empty,
  .tl-right:empty {
    display: none;
  }

  .tl-left .tl-card,
  .tl-right .tl-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    margin-bottom: 0.6rem;
  }

  .tl-left .tl-card:last-child,
  .tl-right .tl-card:last-child {
    margin-bottom: 0;
  }

  .tl-left .tl-card::after,
  .tl-right .tl-card::after,
  .tl-left .tl-card::before,
  .tl-right .tl-card::before {
    left: -1.25rem;
    right: auto;
  }

  .tl-detail {
    left: 0;
    transform: translateY(4px);
  }

  .tl-card:hover .tl-detail,
  .tl-card:focus-visible .tl-detail {
    transform: translateY(0);
  }
}



/* ===== 옛 부분 위에 얹는 조정 ===== */

/* 휴대폰에서 연혁 말풍선이 화면 밖으로 나가 가로 스크롤이 생기지 않게 폭을 줄인다 */
@media (max-width: 640px) {
  .tl-detail {
    max-width: calc(100vw - 7rem);
  }
}

/* 태블릿 — 강의 칸은 커버 위, 글 아래 */
@media (max-width: 860px) {
  .course-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 640px) {
  .page {
    padding: 0 1rem;
  }

  .wide-only {
    display: none;
  }

  .hero {
    padding: 3rem 0 2.5rem;
  }

  .title {
    font-size: 2.1rem;
  }

  .lead {
    font-size: 0.95rem;
  }

  .event-bar {
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
  }

  .sec {
    padding-top: 3.5rem;
  }

  .steps {
    gap: 1.5rem;
  }

  .steps::before,
  .steps::after {
    left: calc(0.9rem - 0.5px);
  }

  .step {
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .step-num {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 1rem;
    font-size: 0.78rem;
  }

  .course-card {
    padding: 1rem;
    border-radius: 16px;
  }


  .review {
    flex-basis: 16.5rem;
    width: 16.5rem;
  }

  .nav-inner {
    padding: 0.6rem 1rem;
    gap: 0.6rem;
  }

  .brand {
    font-size: 0.85rem;
  }

  .nav-links a {
    font-size: 0.8rem;
    padding: 0.45em 0.65em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .stat-card,
  .steps::after {
    animation: none;
  }

  .steps::after {
    display: none;
  }

  /* 흐르는 띠는 멈추고 줄을 바꿔 다 보이게 */
  .rv-track {
    animation: none;
    width: auto;
  }

  .rv-set {
    flex-wrap: wrap;
  }

  .rv-set[aria-hidden="true"] {
    display: none;
  }

  .rv-view {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .rv-view {
    margin: 0;
  }

  /* 멈춘 수강평 카드는 줄 전체 폭에서 가운데로 */
  .rv-track {
    display: block;
  }

  .rv-set {
    justify-content: center;
    padding-right: 0;
  }

  .cta-arrow,
  .step-num,
  .course-card,
  .course-media img {
    transition: none;
  }

  .is-sweep::after,
  .hero-link .cta-arrow {
    animation: none;
  }
}

/* 인쇄 — 강사소개서 PDF 겸용 (항상 라이트 색상으로, 숨긴 것 없이) */
@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f2f5f9;
    --text: #000000;
    --text-muted: #444444;
    --border: #cccccc;
    --accent: #1B3A6B;
    --accent-from: #1B3A6B;
    --accent-to: #1B3A6B;
    --gold: #8a6d10;
    --accent2-from: #2f6fa8;
    --accent2-to: #2f6fa8;
    --accent3-from: #1B3A6B;
    --accent3-to: #1B3A6B;
    color-scheme: light;
  }

  .event-bar,
  .nav,
  .steps::after,
  .fit-dots {
    display: none !important;
  }

  .rv-track {
    animation: none;
    width: auto;
  }

  .rv-set {
    flex-wrap: wrap;
  }

  .rv-set[aria-hidden="true"] {
    display: none;
  }

  .course-card,
  .review,
  .tl-row {
    break-inside: avoid;
  }

  .anim [data-a],
  .anim .reveal {
    opacity: 1;
  }
}