:root {
  --primary: #7F9E96;
  --primary-dark: #526963;
  --secondary: #F97316;
  --gold: #FCD34D;
  --gold-dark: #92400E;
  --success: #22C55E;
  --warn: #DC2626;
  --ink: #0F172A;
  --ink-2: #334155;
  --ink-3: #64748B;
  --bg: #F8FAFC;
  --bg-blue: #F7FAF9;
  --bg-orange: #FFF7ED;
  --bg-yellow: #FEF3C7;
  --bg-red: #FEF2F2;
  --line: #E2E8F0;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-cta: 0 10px 30px rgba(26, 86, 219, 0.3);
  --header-height: 72px;
  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-serif: "Gowun Batang", "Nanum Myeongjo", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body { padding-top: var(--header-height); }
section[id] { scroll-margin-top: calc(var(--header-height) + 8px); }
@media (max-width: 767px) {
  :root { --header-height: 64px; }
}

/* ============================================
   🎯 탭 방식 페이지 전환
   - 메뉴 클릭 시 해당 섹션만 표시
   - 히어로/하단CTA/푸터는 항상 표시
   ============================================ */
.tab-section {
  display: none;
  animation: tab-fade-in 0.35s ease;
}
.tab-section.is-active {
  display: block;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* JS 비활성화 환경 폴백 - 모든 섹션 표시 */
.no-js .tab-section {
  display: block;
}

/* 활성 메뉴 하이라이트 */
.site-nav a.is-active {
  background: var(--bg-blue);
  color: var(--primary);
  font-weight: 700;
}
.mobile-menu a.is-active {
  background: var(--bg-blue);
  color: var(--primary);
  border-radius: 8px;
  border-bottom-color: transparent;
  padding-left: 14px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tab-section { animation: none; }
}

button, a {
  -webkit-tap-highlight-color: rgba(26, 86, 219, 0.1);
  touch-action: manipulation;
}
input, select, textarea { font-size: 16px; font-family: inherit; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ============================================
   헤더
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  gap: 16px;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 21px;
  flex-shrink: 0;
}
.site-logo__mark {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary), #6366F1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(26, 86, 219, 0.2);
}

.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: 10px 14px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 0.15s;
}
.site-nav a:hover {
  background: var(--bg-blue);
  color: var(--primary);
}
.site-nav a.nav-main {
  color: var(--primary);
  font-weight: 700;
}
.site-nav a.is-active {
  background: var(--bg-blue);
  color: var(--primary);
  font-weight: 700;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btn-header {
  padding: 11px 18px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: all 0.15s;
}
.btn-header--primary {
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.3);
}
.btn-header--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26, 86, 219, 0.4);
}
.btn-header--secondary {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn-header--secondary:hover { background: var(--bg); }
.btn-header--login {
  background: #FFFFFF;
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn-header--login:hover {
  background: var(--bg-blue);
  color: var(--primary);
  border-color: #BFDBFE;
}
.btn-header--join {
  background: var(--ink);
  color: #FFFFFF;
  border: 1px solid var(--ink);
}
.btn-header--join:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.hamburger {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.hamburger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.site-header.is-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .hamburger span:nth-child(2) { opacity: 0; }
.site-header.is-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  background: #FFFFFF;
  border-top: 1px solid var(--line);
  padding: 16px 20px 24px;
}
.site-header.is-open .mobile-menu { display: block; }
.mobile-menu ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.mobile-menu a {
  display: block;
  padding: 14px 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-menu__cta a {
  text-align: center;
  padding: 16px;
  font-size: 15px;
  border-radius: 10px;
  font-weight: 800;
}

@media (max-width: 1023px) {
  .site-nav { display: none; }
  .header-cta { display: none; }
  .hamburger { display: flex; }
}

/* ============================================
   히어로 — 헤드라인 + 받는 자료 + 신뢰지표 통합
   ============================================ */
.hero {
  position: relative;
  padding: 56px 20px 80px;
  background:
    radial-gradient(circle at 85% 10%, rgba(249, 115, 22, 0.08), transparent 50%),
    radial-gradient(circle at 15% 90%, rgba(26, 86, 219, 0.08), transparent 50%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
  overflow: hidden;
}
.hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero { padding: 64px 40px 96px; }
  .hero__inner { grid-template-columns: 1.05fr 1fr; gap: 56px; }
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 9px 16px;
  background: linear-gradient(135deg, #FEE2E2, #FCA5A5);
  color: #991B1B;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid #FCA5A5;
}

.hero__headline {
  margin: 0;
  font-size: 30px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.hero__headline .strike {
  position: relative;
  display: inline-block;
  color: var(--ink-3);
}
.hero__headline .strike::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 3px;
  background: var(--warn);
  transform: rotate(3deg);
}
.hero__headline .accent {
  background: linear-gradient(120deg, var(--primary), #6366F1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.hero__headline .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 9px;
  background: rgba(249, 115, 22, 0.22);
  z-index: -1;
  border-radius: 4px;
}
@media (min-width: 768px) { .hero__headline { font-size: 42px; } }

.hero__subcopy {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}
.hero__subcopy strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%);
  padding: 0 2px;
}

/* 신뢰지표 (히어로 안으로 흡수) */
.hero__trust {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 8px;
  justify-content: start;
  align-self: flex-start;
  margin-top: 4px;
}
.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.hero__trust-item strong { color: var(--primary); font-weight: 800; }
.hero__trust-item:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
}
@media (max-width: 640px) {
  .hero__trust {
    grid-template-columns: 1fr;
  }
  .hero__trust-item:nth-child(3) {
    justify-self: start;
  }
}

/* 🆕 4단 논리 미니 카드 (검사 → 캠프 → 수업 → 리포트) */
.hero__triad {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 6px;
  margin: 4px 0;
}
.hero__triad-item {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}
.hero__triad-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.hero__triad-item--check::before { background: linear-gradient(90deg, var(--primary), #6366F1); }
.hero__triad-item--camp::before { background: linear-gradient(90deg, #4A3FC9, #7C3AED); }
.hero__triad-item--lesson::before { background: linear-gradient(90deg, var(--secondary), #DC2626); }
.hero__triad-item--report::before { background: linear-gradient(90deg, var(--gold-dark), #B45309); }
.hero__triad-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.hero__triad-icon { font-size: 22px; margin-top: 2px; }
.hero__triad-label {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  line-height: 1.3;
}
.hero__triad-label strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  margin-top: 2px;
}
.hero__triad-item small {
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.3;
}
.hero__triad-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 16px;
  font-weight: 800;
}
@media (max-width: 640px) {
  .hero__triad {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .hero__triad-arrow {
    transform: rotate(90deg);
    padding: 2px 0;
    font-size: 16px;
  }
  .hero__triad-item { padding: 12px 14px; flex-direction: row; align-items: center; text-align: left; gap: 12px; }
  .hero__triad-icon { font-size: 22px; margin-top: 0; }
  .hero__triad-label { flex: 1; font-size: 12px; }
  .hero__triad-label strong { font-size: 14px; display: inline; margin-left: 4px; }
  .hero__triad-item small { display: none; }
}

/* CTA 그룹 */
.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
@media (min-width: 640px) {
  .hero__cta-group { flex-direction: row; align-items: stretch; }
}

.btn-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  border-radius: 14px;
  font-weight: 800;
  text-align: center;
  transition: all 0.15s;
  min-height: 72px;
  letter-spacing: -0.2px;
}
.btn-cta--primary {
  flex: 1.6;
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
  box-shadow: var(--shadow-cta);
  font-size: 17px;
  position: relative;
  overflow: hidden;
}
.btn-cta--primary::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: rotate(45deg);
  transition: all 0.6s;
  opacity: 0;
}
.btn-cta--primary:hover::before { animation: shine 1.2s; }
@keyframes shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 1; }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
}
.btn-cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(26, 86, 219, 0.4);
}
.btn-cta--secondary {
  flex: 1;
  background: #FFFFFF;
  color: var(--primary);
  border: 2px solid var(--primary);
  font-size: 15px;
}
.btn-cta--secondary:hover {
  background: var(--bg-blue);
  transform: translateY(-2px);
}
.btn-cta__sub {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.9;
  margin-top: 4px;
}

.hero__notes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.hero__notes li {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.hero__notes li::before {
  content: "✓ ";
  color: var(--success);
  font-weight: 800;
}

/* 받는 자료 5종 박스 */
.hero__deliverables {
  background: #FFFFFF;
  border: 3px solid var(--primary);
  border-radius: 24px;
  padding: 34px 36px 32px;
  position: relative;
  box-shadow: 0 30px 70px -18px rgba(26, 86, 219, 0.42);
}
.hero__deliverables::before {
  content: "📦 문의 시 즉시 받는 자료";
  position: absolute;
  top: -17px;
  left: 28px;
  background: linear-gradient(135deg, var(--primary), #6366F1);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 20px rgba(26, 86, 219, 0.35);
}
.hero__deliverables-title {
  margin: 10px 0 6px;
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.4px;
}
.hero__deliverables-sub {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 700;
}
.hero__deliverables-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero__deliverables-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: var(--bg);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.hero__deliverables-list li:hover { background: var(--bg-blue); }
.hero__deliverables-list li span:first-child {
  font-size: 26px;
  flex-shrink: 0;
}
.hero__deliverables-list li small {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 600;
  margin-top: 2px;
}

/* ============================================
   🆕 왜 검사 + 왜 수업 인과 섹션 (V7 핵심)
   ============================================ */
.why {
  padding: 90px 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(74, 63, 201, 0.04), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
  position: relative;
}
.why__inner { max-width: 1280px; margin: 0 auto; }
.why__head {
  text-align: center;
  margin-bottom: 48px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.why__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(135deg, #ECE8FF, #DDD6FE);
  color: #4A3FC9;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 20px;
}
.why__title {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.why__title-accent {
  background: linear-gradient(120deg, var(--primary), #6366F1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.why__title-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 8px;
  background: rgba(249, 115, 22, 0.2);
  z-index: -1;
  border-radius: 4px;
}
.why__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.why__sub strong {
  color: var(--primary);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%);
  padding: 0 2px;
}
@media (min-width: 768px) { .why__title { font-size: 40px; } }

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 40px;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .why__grid {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 10px;
  }
}

.why-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.why-card--check::before { background: linear-gradient(90deg, var(--primary), #6366F1); }
.why-card--camp::before { background: linear-gradient(90deg, #4A3FC9, #7C3AED); }
.why-card--lesson::before { background: linear-gradient(90deg, var(--secondary), #DC2626); }
.why-card--report::before { background: linear-gradient(90deg, var(--gold-dark), #B45309); }
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}
.why-card--check:hover { border-color: var(--primary); }
.why-card--camp:hover { border-color: #4A3FC9; }
.why-card--lesson:hover { border-color: var(--secondary); }
.why-card--report:hover { border-color: var(--gold-dark); }

.why-card__step {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 11px;
  background: var(--bg);
  color: var(--ink-3);
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.why-card__icon { font-size: 38px; }
.why-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.4px;
}
.why-card__hook {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--warn);
  line-height: 1.5;
  padding: 12px 14px;
  background: var(--bg-red);
  border-left: 3px solid #FCA5A5;
  border-radius: 8px;
}
.why-card__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.why-card__points li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  display: flex;
  gap: 8px;
}
.why-card__points li::before {
  content: "▸";
  font-weight: 800;
  flex-shrink: 0;
}
.why-card--check .why-card__points li::before { color: var(--primary); }
.why-card--camp .why-card__points li::before { color: #4A3FC9; }
.why-card--lesson .why-card__points li::before { color: var(--secondary); }
.why-card--report .why-card__points li::before { color: var(--gold-dark); }
.why-card__points li strong { color: var(--ink); font-weight: 700; }

.why-card__answer {
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.why-card--check .why-card__answer { background: linear-gradient(135deg, var(--bg-blue), #DBEAFE); color: var(--primary); }
.why-card--camp .why-card__answer { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); color: #4A3FC9; }
.why-card--lesson .why-card__answer { background: linear-gradient(135deg, var(--bg-orange), #FED7AA); color: var(--secondary); }
.why-card--report .why-card__answer { background: linear-gradient(135deg, var(--bg-yellow), #FDE68A); color: var(--gold-dark); }
.why-card__answer strong { font-weight: 800; }

.why__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 24px;
  font-weight: 800;
}
@media (max-width: 1023px) {
  .why__connector { transform: rotate(90deg); padding: 4px 0; }
}

.why__final {
  background: linear-gradient(135deg, #15133A 0%, var(--primary) 100%);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 19, 58, 0.3);
}
.why__final::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  background: rgba(252, 211, 77, 0.08);
  border-radius: 50%;
}
.why__final-msg {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  z-index: 1;
  letter-spacing: -0.3px;
}
.why__final-msg strong { color: var(--gold); font-weight: 800; }
.why__cta {
  background: var(--gold);
  color: #15133A;
  padding: 16px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 24px rgba(252, 211, 77, 0.35);
  transition: transform 0.2s;
}
.why__cta:hover { transform: translateY(-2px); }
@media (max-width: 768px) {
  .why__final {
    flex-direction: column;
    text-align: center;
    padding: 24px 22px;
    gap: 16px;
  }
  .why__final-msg { font-size: 15px; }
  .why__cta { width: 100%; }
}

/* ============================================
   🆕 40종 검사 메인 요약
   ============================================ */
.tests-summary {
  padding: 90px 20px;
  background: var(--bg);
}
.tests-summary__inner { max-width: 1280px; margin: 0 auto; }
.tests-summary__head {
  text-align: center;
  margin-bottom: 40px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.tests-summary__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: var(--bg-blue);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 16px;
}
.tests-summary__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -1px;
}
.tests-summary__title-accent {
  background: linear-gradient(120deg, var(--primary), #6366F1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 768px) { .tests-summary__title { font-size: 32px; } }

.tests-summary__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}
@media (min-width: 640px) { .tests-summary__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .tests-summary__grid { grid-template-columns: repeat(5, 1fr); } }

.ts-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: all 0.3s;
}
.ts-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.ts-card--personality::before { background: linear-gradient(90deg, var(--primary), #6366F1); }
.ts-card--interest::before { background: linear-gradient(90deg, var(--secondary), #DC2626); }
.ts-card--aptitude::before { background: linear-gradient(90deg, var(--success), #16A34A); }
.ts-card--values::before { background: linear-gradient(90deg, #4A3FC9, #7C3AED); }
.ts-card--study::before { background: linear-gradient(90deg, var(--gold-dark), #B45309); }
.ts-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.ts-card__icon { font-size: 32px; margin-top: 6px; }
.ts-card__count {
  display: inline-block;
  align-self: center;
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.4px;
  background: var(--bg);
  padding: 4px 12px;
  border-radius: 6px;
}
.ts-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.ts-card__why {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tests-summary__cta-wrap, .lessons-summary__cta-wrap {
  text-align: center;
}

/* ============================================
   🆕 결과페이지 실물 미리보기 (V8)
   ============================================ */
.result-preview {
  margin: 56px 0 40px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
  border-radius: 24px;
  border: 1px solid var(--line);
  padding: 40px 36px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}
.result-preview__head {
  text-align: center;
  margin-bottom: 36px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.result-preview__eyebrow {
  display: inline-block;
  padding: 7px 16px;
  background: linear-gradient(135deg, #ECE8FF, #DDD6FE);
  color: #4A3FC9;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 14px;
}
.result-preview__title {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -0.6px;
}
.result-preview__title-accent {
  background: linear-gradient(120deg, var(--primary), #6366F1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.result-preview__sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.result-preview__sub strong {
  color: var(--primary);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%);
  padding: 0 2px;
}
@media (min-width: 768px) { .result-preview__title { font-size: 26px; } }

.result-preview__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
@media (min-width: 900px) {
  .result-preview__layout { grid-template-columns: 0.85fr 1fr; gap: 32px; }
}

/* 방사형 차트 영역 */
.result-radar {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.result-radar__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bg-blue);
  width: 100%;
}
.result-radar__chart {
  width: 100%;
  max-width: 280px;
  height: auto;
}
.result-radar__caption {
  background: linear-gradient(135deg, var(--bg-blue), #FFFFFF);
  border-radius: 12px;
  padding: 14px 18px;
  border-left: 4px solid var(--primary);
  text-align: left;
  width: 100%;
}
.result-radar__caption strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 4px;
}
.result-radar__caption small {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 600;
}

/* 자동 생성 6종 */
.result-auto {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px;
}
.result-auto__title {
  font-size: 13px;
  font-weight: 800;
  color: #4A3FC9;
  padding-bottom: 10px;
  border-bottom: 2px solid #ECE8FF;
  margin-bottom: 16px;
}
.result-auto__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.result-auto__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 10px;
  transition: all 0.2s;
}
.result-auto__list li:hover {
  background: #F4F1FF;
  transform: translateX(4px);
}
.result-auto__icon {
  font-size: 22px;
  flex-shrink: 0;
}
.result-auto__list li div { flex: 1; }
.result-auto__list strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 2px;
}
.result-auto__list small {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* 결과 활용 4종 */
.result-preview__benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-top: 28px;
  border-top: 1px dashed var(--line);
}
@media (min-width: 768px) { .result-preview__benefits { grid-template-columns: repeat(4, 1fr); } }
.rpb-item {
  background: linear-gradient(135deg, var(--bg-yellow), #FFFFFF);
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.rpb-icon { font-size: 24px; }
.rpb-item strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-dark);
}
.rpb-item small {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
}

@media (max-width: 767px) {
  .result-preview { padding: 28px 22px; margin: 36px 0 28px; }
  .result-preview__title { font-size: 18px; }
  .result-radar { padding: 22px 18px; }
  .result-auto { padding: 22px 18px; }
}

/* ============================================
   🆕 V14: 영상 증거 3장 (video-evidence)
   ============================================ */
.video-evidence {
  padding: 64px 20px;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(26, 86, 219, 0.04), transparent 55%),
    radial-gradient(ellipse at 100% 50%, rgba(249, 115, 22, 0.04), transparent 55%),
    #FAFBFF;
}
.video-evidence__inner { max-width: 1280px; margin: 0 auto; }
.video-evidence__head {
  text-align: center;
  margin-bottom: 36px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.video-evidence__eyebrow {
  display: inline-block;
  padding: 7px 16px;
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  color: #991B1B;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 999px;
  margin-bottom: 14px;
}
.video-evidence__title {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ink);
}
.video-evidence__title-accent {
  background: linear-gradient(120deg, var(--secondary), #DC2626);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.video-evidence__sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.video-evidence__sub strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%);
  padding: 0 2px;
}
@media (min-width: 768px) { .video-evidence__title { font-size: 32px; } }

/* 영상 카드 그리드 */
.video-evidence__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 768px) { .video-evidence__grid { grid-template-columns: repeat(2, 1fr); } }

.ve-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.ve-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 60px rgba(15, 23, 42, 0.18);
  border-color: var(--primary);
}

.ve-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.ve-card__thumb-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.ve-card__thumb-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1E40AF 0%, #1A56DB 50%, #4A3FC9 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #FFFFFF;
}
.ve-card__thumb-img--report {
  background: linear-gradient(135deg, #4A3FC9 0%, #7C3AED 50%, #DB2777 100%);
}
.ve-card__thumb-img--class {
  background: linear-gradient(135deg, #15133A 0%, #1E3A8A 50%, #15803D 100%);
}
.ve-card__thumb-icon { font-size: 48px; line-height: 1; }
.ve-card__thumb-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}

.ve-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  padding-left: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: all 0.25s;
}
.ve-card:hover .ve-card__play {
  background: var(--gold);
  transform: translate(-50%, -50%) scale(1.1);
}
.ve-card__duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.ve-card__body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ve-card__tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.ve-card__tag--dev { background: var(--bg-blue); color: var(--primary); }
.ve-card__tag--report { background: #EDE9FE; color: #4A3FC9; }
.ve-card__tag--class { background: var(--bg-orange); color: var(--secondary); }

.ve-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.3px;
}
.ve-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  flex: 1;
}
.ve-card__cta {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
  width: 100%;
  transition: color 0.2s;
}
.ve-card__cta:hover { color: var(--secondary); }

.home-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.82);
}
.home-video-modal__dialog {
  position: relative;
  width: min(100%, 1040px);
}
.home-video-modal__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}
.home-video-modal__media iframe,
.home-video-modal__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.home-video-modal__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.home-video-modal__title {
  margin-top: 16px;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 767px) {
  .video-evidence { padding: 48px 16px; }
  .video-evidence__title { font-size: 22px; }
  .ve-card__body { padding: 18px 18px 16px; }
  .ve-card__title { font-size: 15px; }
}

/* ============================================
   🆕 V14: 교사가 실제로 하는 일은 3단계뿐 (teacher-three)
   ============================================ */
.teacher-three {
  padding: 56px 20px 64px;
  background: #FFFFFF;
}
.teacher-three__inner { max-width: 1100px; margin: 0 auto; }
.teacher-three__card {
  background: linear-gradient(135deg, #15133A 0%, var(--primary) 100%);
  color: #FFFFFF;
  border-radius: 24px;
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(15, 19, 58, 0.3);
}
.teacher-three__card::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 320px; height: 320px;
  background: rgba(252, 211, 77, 0.08);
  border-radius: 50%;
}
.teacher-three__head {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.teacher-three__eyebrow {
  display: inline-block;
  padding: 7px 16px;
  background: rgba(252, 211, 77, 0.18);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 999px;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}
.teacher-three__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #FFFFFF;
}
.teacher-three__title-accent { color: var(--gold); }
@media (min-width: 768px) { .teacher-three__title { font-size: 30px; } }

.teacher-three__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  .teacher-three__steps {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 10px;
  }
}

.tt-step {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 26px 22px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  position: relative;
  backdrop-filter: blur(6px);
  transition: all 0.25s;
}
.tt-step:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: var(--gold);
  transform: translateY(-3px);
}
.tt-step__num {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #15133A;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(252, 211, 77, 0.4);
}
.tt-step__icon { font-size: 36px; line-height: 1; margin-top: 6px; }
.tt-step strong {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.3px;
}
.tt-step p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.tt-step__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 22px;
  font-weight: 800;
}
@media (max-width: 899px) {
  .tt-step__arrow { display: none; }
}

.teacher-three__assurance {
  background: rgba(252, 211, 77, 0.12);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.teacher-three__assurance-icon { font-size: 26px; flex-shrink: 0; }
.teacher-three__assurance p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #FFFFFF;
}
.teacher-three__assurance strong { color: var(--gold); font-weight: 800; }

@media (max-width: 767px) {
  .teacher-three { padding: 36px 16px 48px; }
  .teacher-three__card { padding: 32px 24px; }
  .teacher-three__title { font-size: 19px; }
  .teacher-three__assurance { flex-direction: column; text-align: center; padding: 14px 18px; }
}

/* ============================================
   🆕 V13: 학교급 선택 게이트 + 5년 학년별 성장 로드맵
   ============================================ */
.school-gate {
  padding: 72px 20px 56px;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(34, 197, 94, 0.04), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(26, 86, 219, 0.04), transparent 55%),
    #FFFFFF;
}
.school-gate__inner { max-width: 1280px; margin: 0 auto; }
.school-gate__head {
  text-align: center;
  margin-bottom: 40px;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
.school-gate__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--bg-yellow), #FED7AA);
  color: var(--gold-dark);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 18px;
}
.school-gate__title {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
}
.school-gate__title-accent {
  background: linear-gradient(120deg, var(--success), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.school-gate__title-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 9px;
  background: rgba(252, 211, 77, 0.4);
  z-index: -1;
  border-radius: 4px;
}
.school-gate__sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}
.school-gate__sub strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%);
  padding: 0 2px;
}
@media (min-width: 768px) { .school-gate__title { font-size: 36px; } }

/* 3개 학교급 카드 */
.school-gate__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 48px;
}
@media (min-width: 768px) { .school-gate__cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.sg-card {
  background: #FFFFFF;
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: all 0.3s;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}
.sg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}
.sg-card--middle { border-color: rgba(34, 197, 94, 0.3); }
.sg-card--middle:hover { border-color: var(--success); }
.sg-card--high { border-color: rgba(26, 86, 219, 0.3); }
.sg-card--high:hover { border-color: var(--primary); }
.sg-card--combined {
  border-color: var(--gold);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBEB 100%);
  box-shadow: 0 16px 40px rgba(252, 211, 77, 0.25);
}
.sg-card--combined:hover { border-color: var(--gold-dark); box-shadow: 0 24px 56px rgba(252, 211, 77, 0.35); }

.sg-card__badge {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  background: var(--bg);
  color: var(--ink-3);
}
.sg-card--middle .sg-card__badge { background: #DCFCE7; color: #14532D; }
.sg-card--high .sg-card__badge { background: var(--bg-blue); color: var(--primary); }
.sg-card__badge--strong {
  background: linear-gradient(135deg, var(--gold), #F59E0B) !important;
  color: #78350F !important;
  box-shadow: 0 4px 10px rgba(252, 211, 77, 0.4);
}

.sg-card__icon { font-size: 40px; line-height: 1; }
.sg-card__title {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.sg-card--middle .sg-card__title { color: #14532D; }
.sg-card--high .sg-card__title { color: var(--primary); }
.sg-card--combined .sg-card__title { color: var(--gold-dark); }

.sg-card__sub {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}

.sg-card__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.sg-card__points li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  display: flex;
  gap: 8px;
}
.sg-card__points li::before {
  content: "▸";
  font-weight: 800;
  flex-shrink: 0;
}
.sg-card--middle .sg-card__points li::before { color: var(--success); }
.sg-card--high .sg-card__points li::before { color: var(--primary); }
.sg-card--combined .sg-card__points li::before { color: var(--gold-dark); }
.sg-card__points strong { color: var(--ink); font-weight: 800; }

.sg-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  background: #FFFFFF;
  border: 2px solid;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 12px;
  margin-top: 6px;
  transition: all 0.2s;
}
.sg-card--middle .sg-card__cta { color: var(--success); border-color: var(--success); }
.sg-card--middle .sg-card__cta:hover { background: var(--success); color: #FFFFFF; }
.sg-card--high .sg-card__cta { color: var(--primary); border-color: var(--primary); }
.sg-card--high .sg-card__cta:hover { background: var(--primary); color: #FFFFFF; }
.sg-card__cta--strong {
  background: linear-gradient(135deg, var(--gold), #F59E0B) !important;
  color: #78350F !important;
  border-color: #F59E0B !important;
  box-shadow: 0 8px 20px rgba(252, 211, 77, 0.35);
}
.sg-card__cta--strong:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(252, 211, 77, 0.45); }

/* 5년 성장 로드맵 */
.growth-roadmap {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFF 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 32px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}
.growth-roadmap__head {
  text-align: center;
  margin-bottom: 28px;
}
.growth-roadmap__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.4;
}
.growth-roadmap__title-accent {
  background: linear-gradient(120deg, var(--success), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.growth-roadmap__sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-3);
}
@media (min-width: 768px) { .growth-roadmap__title { font-size: 26px; } }

.growth-roadmap__timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 28px;
  align-items: stretch;
}
@media (min-width: 640px) { .growth-roadmap__timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .growth-roadmap__timeline {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    gap: 8px;
  }
}

.gr-stage {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 14px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  transition: all 0.2s;
}
.gr-stage:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gr-stage__icon { font-size: 28px; line-height: 1; }
.gr-stage__grade {
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}
.gr-stage--g7 .gr-stage__grade { background: linear-gradient(135deg, #16A34A, #22C55E); }
.gr-stage--g8 .gr-stage__grade { background: linear-gradient(135deg, #15803D, #16A34A); }
.gr-stage--g9 .gr-stage__grade { background: linear-gradient(135deg, #166534, #15803D); }
.gr-stage--g10 .gr-stage__grade { background: linear-gradient(135deg, var(--primary), #6366F1); }
.gr-stage--g11 .gr-stage__grade { background: linear-gradient(135deg, #4A3FC9, #7C3AED); }

.gr-stage h4 {
  margin: 4px 0 2px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.gr-stage p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.gr-stage__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-size: 18px;
  font-weight: 800;
}
@media (max-width: 1023px) {
  .gr-stage__arrow { display: none; }
}

.growth-roadmap__asset {
  background: linear-gradient(135deg, var(--bg-yellow), #FFFFFF);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.growth-roadmap__asset-icon { font-size: 26px; flex-shrink: 0; }
.growth-roadmap__asset p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #78350F;
}
.growth-roadmap__asset strong { font-weight: 800; }

@media (max-width: 767px) {
  .school-gate { padding: 48px 16px 36px; }
  .school-gate__title { font-size: 22px; }
  .sg-card { padding: 24px 20px; }
  .growth-roadmap { padding: 26px 20px; }
  .growth-roadmap__title { font-size: 18px; }
  .growth-roadmap__asset { flex-direction: column; text-align: center; padding: 14px 18px; }
}

/* ============================================
   🆕 V13.3: 5영역 40종 통합 검사 + 통합 리포트 예시
   ============================================ */
.five-areas {
  padding: 80px 20px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(26, 86, 219, 0.05), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(74, 63, 201, 0.05), transparent 55%),
    #FFFFFF;
}
.five-areas__inner { max-width: 1280px; margin: 0 auto; }
.five-areas__head {
  text-align: center;
  margin-bottom: 44px;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
.five-areas__eyebrow {
  display: inline-block;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--bg-blue), #DBEAFE);
  color: var(--primary);
  font-size: 15px;
  font-weight: 800;
  border-radius: 999px;
  margin-bottom: 18px;
}
.five-areas__title {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -1px;
}
.five-areas__title-accent {
  background: linear-gradient(120deg, var(--primary), #6366F1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.five-areas__title-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 9px;
  background: rgba(252, 211, 77, 0.4);
  z-index: -1;
  border-radius: 4px;
}
.five-areas__sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
}
.five-areas__sub strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%);
  padding: 0 2px;
}
@media (min-width: 768px) { .five-areas__title { font-size: 36px; } }

/* 5영역 카드 그리드 */
.five-areas__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 56px;
}
@media (min-width: 640px) { .five-areas__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .five-areas__grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } }

.fa-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.fa-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.fa-card--personality::before { background: linear-gradient(90deg, #6366F1, #4A3FC9); }
.fa-card--interest::before { background: linear-gradient(90deg, #EC4899, #F472B6); }
.fa-card--aptitude::before { background: linear-gradient(90deg, var(--success), #16A34A); }
.fa-card--values::before { background: linear-gradient(90deg, #4A3FC9, #7C3AED); }
.fa-card--learning::before { background: linear-gradient(90deg, var(--secondary), #DC2626); }
.fa-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}
.fa-card__icon { font-size: 36px; line-height: 1; }
.fa-card__count {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1;
}
@media (min-width: 768px) { .fa-card__count { font-size: 32px; } }
.fa-card--personality .fa-card__count { color: #6366F1; }
.fa-card--interest .fa-card__count { color: #EC4899; }
.fa-card--aptitude .fa-card__count { color: var(--success); }
.fa-card--values .fa-card__count { color: #4A3FC9; }
.fa-card--learning .fa-card__count { color: var(--secondary); }
.fa-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.fa-card__why {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* 통합 리포트 예시 박스 */
.integrated-report {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 30px;
  margin-bottom: 36px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}
.integrated-report__head {
  text-align: center;
  margin-bottom: 28px;
}
.integrated-report__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, #ECE8FF, #DDD6FE);
  color: #4A3FC9;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.integrated-report__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.4;
}
.integrated-report__title-accent {
  background: linear-gradient(120deg, #4A3FC9, #7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 768px) { .integrated-report__title { font-size: 24px; } }

.integrated-report__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
@media (min-width: 900px) {
  .integrated-report__layout { grid-template-columns: 0.85fr 1fr; gap: 26px; }
}

/* 학생 프로파일 카드 */
.ir-student {
  background: linear-gradient(135deg, #15133A 0%, var(--primary) 100%);
  color: #FFFFFF;
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(15, 19, 58, 0.25);
}
.ir-student::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: rgba(252, 211, 77, 0.08);
  border-radius: 50%;
}
.ir-student__id {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1;
}
.ir-student__avatar {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.ir-student__name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}
.ir-student__school {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.ir-summary {
  background: rgba(252, 211, 77, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  z-index: 1;
}
.ir-summary__label {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.ir-summary__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
  color: #FFFFFF;
}

.ir-areas {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.ir-area-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}
.ir-area-tag {
  font-size: 15px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 8px;
  flex-shrink: 0;
  min-width: 112px;
  text-align: center;
}
.ir-area-tag--p { background: rgba(99, 102, 241, 0.25); color: #C7D2FE; }
.ir-area-tag--i { background: rgba(236, 72, 153, 0.25); color: #FBCFE8; }
.ir-area-tag--a { background: rgba(34, 197, 94, 0.25); color: #BBF7D0; }
.ir-area-tag--v { background: rgba(124, 58, 237, 0.25); color: #DDD6FE; }
.ir-area-tag--l { background: rgba(249, 115, 22, 0.25); color: #FED7AA; }

/* 자동 생성 6종 */
.ir-output {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 22px;
}
.ir-output__title {
  font-size: 14.5px;
  font-weight: 800;
  color: #4A3FC9;
  padding-bottom: 10px;
  border-bottom: 2px solid #ECE8FF;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
}
.ir-output__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ir-output__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 10px;
  transition: all 0.2s;
}
.ir-output__list li:hover {
  background: #F4F1FF;
  transform: translateX(3px);
}
.ir-output__icon {
  font-size: 22px;
  flex-shrink: 0;
}
.ir-output__list li div { flex: 1; min-width: 0; }
.ir-output__list strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 2px;
}
.ir-output__list small {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* 활용 4종 */
.ir-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
}
@media (min-width: 768px) { .ir-benefits { grid-template-columns: repeat(4, 1fr); } }
.ir-benefit {
  background: linear-gradient(135deg, var(--bg-yellow), #FFFFFF);
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.ir-benefit span { font-size: 25px; }
.ir-benefit strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--gold-dark);
}
.ir-benefit small {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* CTA */
.five-areas__cta-wrap { text-align: center; }
.five-areas__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: #FFFFFF;
  color: var(--primary);
  border: 2px solid var(--primary);
  font-size: 14px;
  font-weight: 800;
  border-radius: 12px;
  transition: all 0.2s;
}
.five-areas__cta:hover {
  background: var(--primary);
  color: #FFFFFF;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .five-areas { padding: 52px 16px; }
  .five-areas__title { font-size: 22px; }
  .fa-card { padding: 20px 14px; }
  .fa-card__icon { font-size: 30px; }
  .fa-card__count { font-size: 24px; }
  .fa-card__title { font-size: 15px; }
  .fa-card__why { font-size: 11.5px; }
  .integrated-report { padding: 26px 20px; }
  .integrated-report__title { font-size: 17px; }
  .ir-student { padding: 22px 20px; }
  .ir-output { padding: 20px 18px; }
}

/* ============================================
   🆕 V13.2: 221차시 진로수업 메인 요약 (lessons-core)
   ============================================ */
.lessons-core {
  padding: 80px 20px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(249, 115, 22, 0.04), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(252, 211, 77, 0.04), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
}
.lessons-core__inner { max-width: 1280px; margin: 0 auto; }
.lessons-core__head {
  text-align: center;
  margin-bottom: 44px;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
.lessons-core__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--bg-orange), #FED7AA);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 18px;
}
.lessons-core__title {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
}
.lessons-core__title-accent {
  background: linear-gradient(120deg, var(--secondary), #DC2626);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.lessons-core__title-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 9px;
  background: rgba(252, 211, 77, 0.4);
  z-index: -1;
  border-radius: 4px;
}
.lessons-core__sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
}
.lessons-core__sub strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%);
  padding: 0 2px;
}
@media (min-width: 768px) { .lessons-core__title { font-size: 36px; } }

/* 학년별 7개 카드 그리드 */
.lessons-core__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 48px;
}
@media (min-width: 640px) { .lessons-core__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1024px) { .lessons-core__grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 1280px) { .lessons-core__grid { grid-template-columns: repeat(7, 1fr); gap: 10px; } }

.lc-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}
.lc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.lc-card--g5::before { background: linear-gradient(90deg, #10B981, #14B8A6); }
.lc-card--g6::before { background: linear-gradient(90deg, #14B8A6, #06B6D4); }
.lc-card--g7::before { background: linear-gradient(90deg, var(--success), #16A34A); }
.lc-card--g8::before { background: linear-gradient(90deg, #16A34A, #15803D); }
.lc-card--g9::before { background: linear-gradient(90deg, #15803D, #166534); }
.lc-card--g10::before { background: linear-gradient(90deg, var(--primary), #6366F1); }
.lc-card--g11::before { background: linear-gradient(90deg, #4A3FC9, #7C3AED); }
.lc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.lc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.lc-card__grade {
  font-size: 13px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}
.lc-card--g5 .lc-card__grade { background: #10B981; }
.lc-card--g6 .lc-card__grade { background: #14B8A6; }
.lc-card--g7 .lc-card__grade { background: var(--success); }
.lc-card--g8 .lc-card__grade { background: #16A34A; }
.lc-card--g9 .lc-card__grade { background: #15803D; }
.lc-card--g10 .lc-card__grade { background: var(--primary); }
.lc-card--g11 .lc-card__grade { background: #4A3FC9; }

.lc-card__count {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-3);
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 4px;
}

.lc-card__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.3px;
  line-height: 1.3;
}
.lc-card__theme {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
  min-height: 2.7em;
}
.lc-card__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lc-card__points li {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-2);
  display: flex;
  gap: 5px;
  align-items: flex-start;
}
.lc-card__points li::before {
  content: "▪";
  font-weight: 800;
  flex-shrink: 0;
  color: var(--ink-3);
}
.lc-card--g5 .lc-card__points li::before { color: #10B981; }
.lc-card--g6 .lc-card__points li::before { color: #14B8A6; }
.lc-card--g7 .lc-card__points li::before { color: var(--success); }
.lc-card--g8 .lc-card__points li::before { color: #16A34A; }
.lc-card--g9 .lc-card__points li::before { color: #15803D; }
.lc-card--g10 .lc-card__points li::before { color: var(--primary); }
.lc-card--g11 .lc-card__points li::before { color: #4A3FC9; }

/* 4단계 자동 흐름 */
.lessons-core__flow {
  background: linear-gradient(135deg, #15133A 0%, var(--primary) 100%);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 19, 58, 0.25);
}
.lessons-core__flow::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  background: rgba(252, 211, 77, 0.1);
  border-radius: 50%;
}
.lessons-core__flow-head {
  text-align: center;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.lessons-core__flow-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}
.lessons-core__flow-accent { color: var(--gold); }
@media (min-width: 768px) { .lessons-core__flow-title { font-size: 24px; } }

.lc-flow__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
@media (min-width: 640px) { .lc-flow__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .lc-flow__steps {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 8px;
  }
}

.lcf-step {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 22px 18px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  position: relative;
  backdrop-filter: blur(6px);
  transition: all 0.25s;
}
.lcf-step:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-3px);
  border-color: var(--gold);
}
.lcf-step__num {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #15133A;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(252, 211, 77, 0.4);
}
.lcf-step__icon { font-size: 32px; line-height: 1; margin-top: 6px; }
.lcf-step strong {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.3px;
}
.lcf-step small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.lcf-step__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 20px;
  font-weight: 800;
  position: relative;
  z-index: 1;
}
@media (max-width: 1023px) {
  .lcf-step__arrow { display: none; }
}

@media (max-width: 767px) {
  .lessons-core { padding: 52px 16px; }
  .lessons-core__title { font-size: 22px; }
  .lessons-core__flow { padding: 28px 22px; }
  .lessons-core__flow-title { font-size: 17px; }
  .lc-card { padding: 16px 12px; }
  .lc-card__title { font-size: 13.5px; }
  .lc-card__theme { font-size: 11px; min-height: 2.4em; }
  .lc-card__points li { font-size: 11px; }
}

/* ============================================
   🆕 V9: 고1 입시 시작 메시지 박스
   ============================================ */
.hs-entry {
  padding: 56px 20px 36px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(26, 86, 219, 0.04), transparent 60%),
    #FFFFFF;
}
.hs-entry__inner { max-width: 1280px; margin: 0 auto; }
.hs-entry__card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFF 100%);
  border: 2px solid var(--primary);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 24px 60px -16px rgba(26, 86, 219, 0.18);
  position: relative;
  overflow: hidden;
}
.hs-entry__card::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.1), transparent 70%);
  border-radius: 50%;
}
.hs-entry__top {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.hs-entry__badge {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 999px;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 16px rgba(26, 86, 219, 0.3);
}
.hs-entry__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
}
.hs-entry__title-accent {
  background: linear-gradient(120deg, var(--primary), #6366F1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.hs-entry__title-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 9px;
  background: rgba(252, 211, 77, 0.4);
  z-index: -1;
  border-radius: 4px;
}
@media (min-width: 768px) { .hs-entry__title { font-size: 32px; } }

.hs-entry__flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 28px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .hs-entry__flow {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 8px;
  }
}

.hs-entry__step {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s;
}
.hs-entry__step:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  border-color: var(--primary);
}
.hs-entry__num {
  display: inline-block;
  align-self: center;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  background: var(--bg-blue);
  color: var(--primary);
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.hs-entry__step strong {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.hs-entry__step p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.hs-entry__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
}
@media (max-width: 1023px) {
  .hs-entry__arrow { transform: rotate(90deg); padding: 2px 0; font-size: 16px; }
}

.hs-entry__assurance {
  background: linear-gradient(135deg, var(--bg-yellow), #FFFFFF);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.hs-entry__assurance-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.hs-entry__assurance p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #78350F;
}
.hs-entry__assurance strong {
  color: #78350F;
  font-weight: 800;
}
@media (max-width: 767px) {
  .hs-entry { padding: 36px 16px 28px; }
  .hs-entry__card { padding: 28px 22px; }
  .hs-entry__title { font-size: 20px; }
  .hs-entry__assurance { flex-direction: column; text-align: center; padding: 16px 20px; }
}

/* ============================================
   🆕 V10: 고1 검사 4종 통합 + 입시 연결
   ============================================ */
.hs-tests {
  padding: 90px 20px;
  background:
    radial-gradient(ellipse at 0% 30%, rgba(26, 86, 219, 0.04), transparent 50%),
    radial-gradient(ellipse at 100% 70%, rgba(252, 211, 77, 0.04), transparent 50%),
    linear-gradient(180deg, #FAFBFF 0%, #FFFFFF 100%);
}
.hs-tests__inner { max-width: 1280px; margin: 0 auto; }
.hs-tests__head {
  text-align: center;
  margin-bottom: 48px;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
.hs-tests__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--bg-blue), #DBEAFE);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hs-tests__title {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.hs-tests__title-accent {
  background: linear-gradient(120deg, var(--primary), #6366F1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.hs-tests__title-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 8px;
  background: rgba(249, 115, 22, 0.2);
  z-index: -1;
  border-radius: 4px;
}
.hs-tests__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.hs-tests__sub strong {
  color: var(--primary);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%);
  padding: 0 2px;
}
@media (min-width: 768px) { .hs-tests__title { font-size: 40px; } }

/* 4종 검사 카드 그리드 */
.hs-tests__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 48px;
}
@media (min-width: 640px) { .hs-tests__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1200px) { .hs-tests__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.hs-test-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.hs-test-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.hs-test-card--holland::before { background: linear-gradient(90deg, var(--primary), #6366F1); }
.hs-test-card--mi::before { background: linear-gradient(90deg, var(--success), #16A34A); }
.hs-test-card--values::before { background: linear-gradient(90deg, #4A3FC9, #7C3AED); }
.hs-test-card--disc::before { background: linear-gradient(90deg, var(--secondary), #DC2626); }
.hs-test-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}
.hs-test-card--holland:hover { border-color: var(--primary); }
.hs-test-card--mi:hover { border-color: var(--success); }
.hs-test-card--values:hover { border-color: #4A3FC9; }
.hs-test-card--disc:hover { border-color: var(--secondary); }

.hs-test-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hs-test-card__label {
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.hs-test-card--holland .hs-test-card__label { background: var(--bg-blue); color: var(--primary); }
.hs-test-card--mi .hs-test-card__label { background: #DCFCE7; color: #14532D; }
.hs-test-card--values .hs-test-card__label { background: #EDE9FE; color: #4A3FC9; }
.hs-test-card--disc .hs-test-card__label { background: var(--bg-orange); color: var(--secondary); }
.hs-test-card__type {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 6px;
}

/* 🆕 고1·고2 학년 칩 */
.hs-test-card__grades {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}
.hs-test-card__grade {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  letter-spacing: 0.2px;
}
.hs-test-card--holland .hs-test-card__grade { background: var(--bg-blue); color: var(--primary); border-color: var(--primary); }
.hs-test-card--mi .hs-test-card__grade { background: #DCFCE7; color: #14532D; border-color: var(--success); }
.hs-test-card--values .hs-test-card__grade { background: #EDE9FE; color: #4A3FC9; border-color: #4A3FC9; }
.hs-test-card--disc .hs-test-card__grade { background: var(--bg-orange); color: var(--secondary); border-color: var(--secondary); }

.hs-test-card__core {
  text-align: center;
  padding: 16px 12px;
  background: linear-gradient(135deg, var(--bg), #FFFFFF);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.hs-test-card__core strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.hs-test-card__core small {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
}

.hs-test-card__chain {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.chain-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 10px;
  transition: all 0.2s;
}
.chain-item:hover { background: var(--bg-blue); transform: translateX(3px); }
.chain-step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.hs-test-card--holland .chain-step { background: var(--primary); }
.hs-test-card--mi .chain-step { background: var(--success); }
.hs-test-card--values .chain-step { background: #4A3FC9; }
.hs-test-card--disc .chain-step { background: var(--secondary); }
.chain-item p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.45;
}

.hs-test-card__output {
  text-align: center;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.55;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.hs-test-card--holland .hs-test-card__output { background: linear-gradient(135deg, var(--bg-blue), #DBEAFE); color: var(--primary); }
.hs-test-card--mi .hs-test-card__output { background: linear-gradient(135deg, #DCFCE7, #BBF7D0); color: #14532D; }
.hs-test-card--values .hs-test-card__output { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); color: #4A3FC9; }
.hs-test-card--disc .hs-test-card__output { background: linear-gradient(135deg, var(--bg-orange), #FED7AA); color: var(--secondary); }

/* 진로미결정 학생 트랙 박스 */
.hs-tests__undecided {
  background: linear-gradient(135deg, #15133A 0%, var(--primary) 100%);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 19, 58, 0.3);
}
.hs-tests__undecided::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  background: rgba(252, 211, 77, 0.1);
  border-radius: 50%;
}
.hs-tests__undecided-left {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  z-index: 1;
  flex: 1;
}
.hs-tests__undecided-icon {
  font-size: 44px;
  flex-shrink: 0;
}
.hs-tests__undecided-title {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 10px;
  letter-spacing: -0.4px;
}
.hs-tests__undecided p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.95;
}
.hs-tests__undecided strong { color: var(--gold); font-weight: 700; }
.hs-tests__undecided-cta {
  background: var(--gold);
  color: #15133A;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 24px rgba(252, 211, 77, 0.35);
  transition: transform 0.2s;
}
.hs-tests__undecided-cta:hover { transform: translateY(-2px); }
@media (max-width: 900px) {
  .hs-tests__undecided { flex-direction: column; text-align: center; padding: 28px 24px; }
  .hs-tests__undecided-left { flex-direction: column; align-items: center; }
  .hs-tests__undecided-cta { width: 100%; }
}

/* 3년 대입 로드맵 */
.hs-roadmap {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 36px;
  margin-bottom: 48px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}
.hs-roadmap__head {
  text-align: center;
  margin-bottom: 32px;
}
.hs-roadmap__head-sub {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.hs-roadmap__head-sub strong {
  color: #4A3FC9;
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, rgba(252, 211, 77, 0.4) 65%);
  padding: 0 2px;
}
.hs-roadmap__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.4;
}
.hs-roadmap__title-accent {
  background: linear-gradient(120deg, var(--secondary), #DC2626);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 768px) { .hs-roadmap__title { font-size: 26px; } }

.hs-roadmap__timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 28px;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .hs-roadmap__timeline {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 14px;
  }
}

.hs-roadmap__year {
  background: var(--bg);
  border-radius: 16px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: all 0.2s;
}
.hs-roadmap__year:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* 🆕 고2 = 골든타임 카드 강조 */
.hs-roadmap__year--g2 {
  background: linear-gradient(135deg, #FFFFFF 0%, #F4F1FF 100%);
  border: 2px solid #4A3FC9;
  box-shadow: 0 14px 36px rgba(74, 63, 201, 0.18);
}
.hs-roadmap__year--g2::before {
  content: "⭐ 골든타임";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #4A3FC9, #7C3AED);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(74, 63, 201, 0.35);
}

.hs-roadmap__year-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 16px;
  font-weight: 900;
  padding: 8px 18px;
  border-radius: 10px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}
.hs-roadmap__year--g1 .hs-roadmap__year-badge { background: linear-gradient(135deg, var(--primary), #6366F1); }
.hs-roadmap__year--g2 .hs-roadmap__year-badge { background: linear-gradient(135deg, #4A3FC9, #7C3AED); }
.hs-roadmap__year--g3 .hs-roadmap__year-badge { background: linear-gradient(135deg, var(--gold-dark), #B45309); }

/* 🆕 START / CORE / FINISH 태그 */
.hs-roadmap__year-tag {
  margin: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2px;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}
.hs-roadmap__year--g1 .hs-roadmap__year-tag { background: var(--bg-blue); color: var(--primary); }
.hs-roadmap__year--g2 .hs-roadmap__year-tag { background: #EDE9FE; color: #4A3FC9; }
.hs-roadmap__year--g3 .hs-roadmap__year-tag { background: #FEF3C7; color: var(--gold-dark); }

.hs-roadmap__year h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.hs-roadmap__year ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hs-roadmap__year li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  display: flex;
  gap: 6px;
}
.hs-roadmap__year li::before {
  content: "▸";
  font-weight: 800;
  flex-shrink: 0;
}
.hs-roadmap__year--g1 li::before { color: var(--primary); }
.hs-roadmap__year--g2 li::before { color: #4A3FC9; }
.hs-roadmap__year--g3 li::before { color: var(--gold-dark); }

.hs-roadmap__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 24px;
  font-weight: 800;
}
@media (max-width: 1023px) {
  .hs-roadmap__connector { transform: rotate(90deg); padding: 4px 0; }
}

.hs-roadmap__asset {
  background: linear-gradient(135deg, var(--bg-yellow), #FFFFFF);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hs-roadmap__asset-icon { font-size: 32px; flex-shrink: 0; }
.hs-roadmap__asset p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #78350F;
}
.hs-roadmap__asset strong { font-weight: 800; }
@media (max-width: 767px) {
  .hs-roadmap { padding: 28px 22px; }
  .hs-roadmap__year { padding: 22px 20px; }
  .hs-roadmap__asset { flex-direction: column; text-align: center; }
}

/* 입시박람회 vs AI드림맵 비교 */
.hs-vs {
  margin-bottom: 48px;
}
.hs-vs__head {
  text-align: center;
  margin-bottom: 28px;
}
.hs-vs__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--ink);
  line-height: 1.4;
}
@media (min-width: 768px) { .hs-vs__title { font-size: 26px; } }

.hs-vs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .hs-vs__grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
  }
}

.hs-vs__col {
  border-radius: 18px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 2px solid;
}
.hs-vs__col--them {
  background: linear-gradient(135deg, #FEF2F2, #FFFFFF);
  border-color: #FCA5A5;
}
.hs-vs__col--ours {
  background: linear-gradient(135deg, var(--bg-blue), #FFFFFF);
  border-color: var(--primary);
  position: relative;
}
.hs-vs__col--ours::before {
  content: "⭐ 추천";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary), #6366F1);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(26, 86, 219, 0.3);
}

.hs-vs__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 6px 14px;
  border-radius: 6px;
  align-self: flex-start;
}
.hs-vs__col--them .hs-vs__label {
  background: #FEE2E2;
  color: #991B1B;
}
.hs-vs__col--ours .hs-vs__label {
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
}

.hs-vs__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hs-vs__col li {
  font-size: 14px;
  line-height: 1.55;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.hs-vs__col--them li { color: var(--ink-2); }
.hs-vs__col--ours li { color: var(--ink); font-weight: 600; }
.vs-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #FEE2E2;
  color: #991B1B;
  border-radius: 50%;
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}
.vs-o {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: #FFFFFF;
  border-radius: 50%;
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}

.hs-vs__center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: var(--ink-3);
  letter-spacing: 1px;
  padding: 8px;
}

/* hs-tests 최종 CTA */
.hs-tests__cta-wrap { text-align: center; }
.hs-tests__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 40px;
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 800;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(26, 86, 219, 0.3);
  transition: transform 0.2s;
}
.hs-tests__cta:hover { transform: translateY(-2px); }
.hs-tests__cta-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

@media (max-width: 767px) {
  .hs-tests { padding: 56px 16px; }
  .hs-tests__title { font-size: 22px; }
  .hs-test-card { padding: 24px 22px; }
  .hs-test-card__core strong { font-size: 16px; }
  .hs-roadmap__title, .hs-vs__title { font-size: 18px; }
  .hs-vs__col { padding: 24px 22px; }
  .hs-vs__col li { font-size: 13px; }
}

/* ============================================
   🆕 양성 강사 시스템 카드 (V8 핵심)
   ============================================ */
.instructor-system {
  padding: 90px 20px;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(74, 63, 201, 0.05), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(252, 211, 77, 0.05), transparent 60%),
    #FFFFFF;
}
.instructor-system__inner { max-width: 1280px; margin: 0 auto; }
.instructor-system__head {
  text-align: center;
  margin-bottom: 48px;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
.instructor-system__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(135deg, #ECE8FF, #DDD6FE);
  color: #4A3FC9;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 20px;
}
.instructor-system__title {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.instructor-system__title-accent {
  background: linear-gradient(120deg, #4A3FC9, #7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.instructor-system__title-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 8px;
  background: rgba(252, 211, 77, 0.3);
  z-index: -1;
  border-radius: 4px;
}
.instructor-system__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.instructor-system__sub strong {
  color: #4A3FC9;
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%);
  padding: 0 2px;
}
@media (min-width: 768px) { .instructor-system__title { font-size: 40px; } }

/* 3단계 흐름 (Develop → Train → Operate) */
.instructor-system__flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 40px;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .instructor-system__flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 14px;
  }
}

.is-stage {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
.is-stage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.is-stage--develop::before { background: linear-gradient(90deg, var(--primary), #6366F1); }
.is-stage--train::before { background: linear-gradient(90deg, #4A3FC9, #7C3AED); }
.is-stage--operate::before { background: linear-gradient(90deg, var(--success), #16A34A); }
.is-stage:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

.is-stage__badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  background: var(--bg);
  color: var(--ink-3);
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.is-stage__icon { font-size: 44px; line-height: 1; }
.is-stage__title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.is-stage--develop .is-stage__title { color: var(--primary); }
.is-stage--train .is-stage__title { color: #4A3FC9; }
.is-stage--operate .is-stage__title { color: var(--success); }
.is-stage__role {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 10px;
  letter-spacing: -0.2px;
}
.is-stage__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.is-stage__points li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  display: flex;
  gap: 8px;
}
.is-stage__points li::before {
  content: "▸";
  font-weight: 800;
  flex-shrink: 0;
}
.is-stage--develop .is-stage__points li::before { color: var(--primary); }
.is-stage--train .is-stage__points li::before { color: #4A3FC9; }
.is-stage--operate .is-stage__points li::before { color: var(--success); }

.is-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4A3FC9;
  font-size: 24px;
  font-weight: 800;
}
@media (max-width: 1023px) {
  .is-arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* 차별 메시지 박스 */
.instructor-system__diff {
  background: linear-gradient(135deg, #15133A 0%, var(--primary) 100%);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 32px 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 19, 58, 0.3);
}
.instructor-system__diff::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 300px; height: 300px;
  background: rgba(252, 211, 77, 0.08);
  border-radius: 50%;
}
.is-diff__col {
  padding: 20px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
}
.is-diff__col--external {
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
}
.is-diff__col--ours {
  background: rgba(252, 211, 77, 0.12);
  border: 1px solid rgba(252, 211, 77, 0.4);
}
.is-diff__label {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}
.is-diff__col--external .is-diff__label {
  background: rgba(248, 113, 113, 0.25);
  color: #FCA5A5;
}
.is-diff__col--ours .is-diff__label {
  background: rgba(252, 211, 77, 0.25);
  color: var(--gold);
}
.is-diff__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.is-diff__col li {
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
  color: #FFFFFF;
}
.is-diff__col--external li { opacity: 0.85; }

.is-diff__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .instructor-system__diff {
    grid-template-columns: 1fr;
    padding: 24px 22px;
    gap: 14px;
  }
  .is-diff__vs { padding: 6px 0; }
}

.instructor-system__cta-wrap {
  text-align: center;
}
.instructor-system__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: linear-gradient(135deg, #4A3FC9, #7C3AED);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(74, 63, 201, 0.3);
  transition: transform 0.2s;
}
.instructor-system__cta:hover { transform: translateY(-2px); }
.instructor-system__cta-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

@media (max-width: 767px) {
  .instructor-system { padding: 56px 16px; }
  .is-stage { padding: 26px 22px; }
  .is-stage__icon { font-size: 38px; }
  .is-stage__title { font-size: 20px; }
  .is-stage__points li { font-size: 12.5px; }
  .is-diff__col { padding: 18px 20px; }
  .is-diff__col li { font-size: 12.5px; }
}
.tests-summary__cta, .lessons-summary__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(26, 86, 219, 0.25);
  transition: transform 0.2s;
}
.tests-summary__cta:hover, .lessons-summary__cta:hover { transform: translateY(-2px); }
.tests-summary__note, .lessons-summary__note {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
}

/* ============================================
   🆕 221차시 수업 메인 요약
   ============================================ */
.lessons-summary {
  padding: 90px 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(249, 115, 22, 0.04), transparent 60%),
    #FFFFFF;
}
.lessons-summary__inner { max-width: 1280px; margin: 0 auto; }
.lessons-summary__head {
  text-align: center;
  margin-bottom: 36px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.lessons-summary__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: var(--bg-orange);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 16px;
}
.lessons-summary__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -1px;
}
.lessons-summary__title-accent {
  background: linear-gradient(120deg, var(--secondary), #DC2626);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 768px) { .lessons-summary__title { font-size: 32px; } }

/* 학년별 차시 (압축형 그리드) */
.lessons-summary__grades {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 28px;
}
@media (min-width: 768px) { .lessons-summary__grades { grid-template-columns: repeat(8, 1fr); gap: 10px; } }

.ls-grade {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  transition: transform 0.2s;
}
.ls-grade::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
}
.ls-grade--elem::before { background: var(--success); }
.ls-grade--mid::before { background: var(--primary); }
.ls-grade--high::before { background: var(--secondary); }
.ls-grade--total::before { background: var(--gold-dark); }
.ls-grade--total { background: linear-gradient(135deg, #FEF3C7, #FFFFFF); border-color: var(--gold); }
.ls-grade:hover { transform: translateY(-2px); }
.ls-grade strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.ls-grade span {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.3px;
}
.ls-grade--elem span { color: #14532D; }
.ls-grade--mid span { color: var(--primary); }
.ls-grade--high span { color: var(--secondary); }
.ls-grade--total span { color: var(--gold-dark); }

/* 4단계 자동 흐름 (압축형) */
.lessons-summary__flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 28px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  .lessons-summary__flow {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 8px;
  }
}
.lsf-step {
  background: var(--bg);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
}
.lsf-step span { font-size: 24px; }
.lsf-step strong {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.lsf-step small {
  font-size: 11px;
  color: var(--ink-3);
}
.lsf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  font-size: 18px;
  font-weight: 800;
}
@media (max-width: 639px) {
  .lsf-arrow { transform: rotate(90deg); padding: 2px 0; }
}

.lessons-summary__benefit {
  background: linear-gradient(135deg, var(--bg-yellow), #FED7AA);
  border-left: 4px solid var(--secondary);
  padding: 18px 24px;
  border-radius: 12px;
  max-width: 880px;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ============================================
   🆕 진로교사 따라하기 6단계 (V8)
   ============================================ */
.follow-flow {
  margin: 28px 0 36px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
  border-radius: 24px;
  border: 1px solid var(--line);
  padding: 36px 32px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}
.follow-flow__head {
  text-align: center;
  margin-bottom: 32px;
}
.follow-flow__eyebrow {
  display: inline-block;
  padding: 7px 16px;
  background: var(--bg-orange);
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 12px;
}
.follow-flow__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.4;
}
.follow-flow__title-accent {
  background: linear-gradient(120deg, var(--secondary), #DC2626);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 768px) { .follow-flow__title { font-size: 26px; } }

.follow-flow__steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (min-width: 640px) { .follow-flow__steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .follow-flow__steps { grid-template-columns: repeat(6, 1fr); gap: 14px; } }

.ff-step {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 14px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: all 0.2s;
}
.ff-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  border-color: var(--secondary);
}
.ff-step__num {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--secondary);
  color: #FFFFFF;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
}

/* 단계별 미니 스크린 모형 */
.ff-step__screen {
  width: 100%;
  height: 86px;
  background: var(--bg);
  border-radius: 10px;
  margin: 8px 0 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.ff-step__screen--browser {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.ff-step__url {
  font-size: 9px;
  color: var(--ink-3);
  background: #FFFFFF;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  font-family: monospace;
}
.ff-step__btn {
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  margin-top: 4px;
}

.ff-step__grade, .ff-step__lesson {
  font-size: 10px;
  padding: 4px 6px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.ff-step__grade--active, .ff-step__lesson--active {
  background: var(--bg-blue);
  color: var(--primary);
  font-weight: 800;
  border-color: var(--primary);
}

.ff-step__screen--play {
  background: linear-gradient(135deg, #15133A, var(--primary));
  align-items: center;
  justify-content: center;
}
.ff-step__play {
  background: var(--gold);
  color: #15133A;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(252, 211, 77, 0.4);
}

.ff-step__quiz {
  font-size: 9.5px;
  padding: 3px 6px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-weight: 600;
}
.ff-step__quiz--game {
  background: linear-gradient(135deg, #FEF3C7, #FED7AA);
  color: var(--secondary);
  font-weight: 800;
  border-color: var(--secondary);
}

.ff-step__screen--dashboard {
  background: #15133A;
  padding: 8px 10px;
  justify-content: center;
}
.ff-step__bar {
  height: 6px;
  background: linear-gradient(90deg, var(--gold), #F59E0B);
  border-radius: 3px;
  margin-bottom: 4px;
}
.ff-step__label {
  font-size: 9px;
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
  margin-top: 2px;
}

.ff-step strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.ff-step small {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
}

.follow-flow__assurance {
  background: linear-gradient(135deg, #ECFDF5, #FFFFFF);
  border: 1px solid #BBF7D0;
  border-left: 4px solid var(--success);
  border-radius: 12px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.follow-flow__assurance-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.follow-flow__assurance strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #14532D;
  margin-bottom: 4px;
}
.follow-flow__assurance div {
  font-size: 13px;
  color: #14532D;
  line-height: 1.65;
}

@media (max-width: 767px) {
  .follow-flow { padding: 28px 22px; }
  .follow-flow__title { font-size: 18px; }
  .ff-step { padding: 18px 12px 14px; }
  .ff-step__screen { height: 72px; padding: 8px; }
  .follow-flow__assurance { flex-direction: column; text-align: center; padding: 16px 20px; }
}
.lessons-summary__benefit-icon { font-size: 28px; flex-shrink: 0; }
.lessons-summary__benefit p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #78350F;
}
.lessons-summary__benefit strong { color: var(--gold-dark); font-weight: 800; }
@media (max-width: 640px) {
  .lessons-summary__benefit { flex-direction: column; text-align: center; padding: 16px 20px; }
}
.compare {
  padding: 90px 20px;
  background: #FFFFFF;
  position: relative;
}
.compare__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.compare__head {
  text-align: center;
  margin-bottom: 48px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.compare__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: #FEE2E2;
  color: #991B1B;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 20px;
}
.compare__title {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.compare__title .accent {
  color: var(--primary);
}
.compare__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
@media (min-width: 768px) { .compare__title { font-size: 40px; } }

/* 5항목 비교 테이블 */
.compare-table {
  width: min(100%, 1080px);
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  margin: 0 auto 48px;
}
.compare-table__header {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  background: var(--bg);
  border-bottom: 2px solid var(--line);
}
.compare-table__header > div {
  padding: 26px 20px 22px;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.compare-table__header > div:first-child {
  color: var(--ink-3);
  justify-content: flex-start;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.compare-table__header .col-before {
  color: #991B1B;
  background: #FEF2F2;
}
.compare-table__header .col-after {
  color: var(--primary-dark);
  background: var(--bg-blue);
  position: relative;
  padding-top: 34px;
}
.compare-table__header .col-after::before {
  content: "⭐ 추천";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-dark);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.compare-row:last-child { border-bottom: 0; }
.compare-row__label {
  padding: 20px 20px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 10px;
}
.compare-row__label-num {
  width: 24px;
  height: 24px;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.compare-row__before,
.compare-row__after {
  padding: 20px 20px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-row__before {
  color: var(--ink-2);
  background: #FFFFFF;
}
.compare-row__before::before {
  content: "✗";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #FEE2E2;
  color: #991B1B;
  border-radius: 50%;
  font-weight: 900;
  font-size: 14px;
  margin-right: 8px;
  flex-shrink: 0;
}
.compare-row__after {
  color: var(--ink);
  background: linear-gradient(135deg, var(--bg-blue) 0%, #FFFFFF 100%);
  font-weight: 700;
}
.compare-row__after::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: #FFFFFF;
  border-radius: 50%;
  font-weight: 900;
  font-size: 13px;
  margin-right: 8px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .compare-table__header { display: none; }
  .compare-row {
    grid-template-columns: 1fr;
    padding: 16px 18px;
    gap: 10px;
  }
  .compare-row__label {
    padding: 0;
    background: transparent;
    font-size: 14.5px;
  }
  .compare-row__before, .compare-row__after {
    padding: 12px 14px;
    text-align: left;
    justify-content: flex-start;
    border-radius: 10px;
    font-size: 13px;
    flex-direction: column;
    align-items: flex-start;
  }
  .compare-row__before {
    background: #FEF2F2;
    border-left: 3px solid #FCA5A5;
  }
  .compare-row__after {
    background: var(--bg-blue);
    border-left: 3px solid var(--primary);
  }
  .compare-row__before::before { content: "기존 업체 ✗"; width: auto; height: auto; padding: 3px 8px; border-radius: 6px; font-size: 10px; margin-right: 0; margin-bottom: 4px; display: block; align-self: flex-start; }
  .compare-row__after::before { content: "AI드림맵 ✓"; width: auto; height: auto; padding: 3px 8px; border-radius: 6px; font-size: 10px; margin-right: 0; margin-bottom: 4px; display: block; align-self: flex-start; }
}

/* 연간 운영 통합 메시지 박스 */
.annual-summary {
  width: min(100%, 1080px);
  background: var(--primary-dark);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  box-shadow: 0 20px 50px rgba(15, 19, 58, 0.3);
  position: relative;
  overflow: hidden;
  margin: 0 auto 40px;
}
.annual-summary::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  background: rgba(252, 211, 77, 0.1);
  border-radius: 50%;
}
.annual-summary__icon {
  font-size: 48px;
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.annual-summary__content {
  flex: 1;
  position: relative;
  z-index: 1;
}
.annual-summary__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
.annual-summary__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  opacity: 0.95;
}
.annual-summary__desc strong { color: var(--gold); font-weight: 700; }
@media (max-width: 768px) {
  .annual-summary {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
    gap: 16px;
  }
  .annual-summary__title { font-size: 18px; }
}

/* 비교 섹션 CTA */
.compare__cta-wrap {
  text-align: center;
}
.compare__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 36px;
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: var(--shadow-cta);
  transition: transform 0.2s, box-shadow 0.2s;
}
.compare__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(26, 86, 219, 0.4);
}
.compare__cta-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* ============================================
   🆕 40종 진로검사 섹션
   ============================================ */
.tests {
  padding: 90px 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
}
.tests__inner { max-width: 1280px; margin: 0 auto; }
.tests__head {
  text-align: center;
  margin-bottom: 48px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.tests__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(135deg, #ECE8FF, #DDD6FE);
  color: #4A3FC9;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 20px;
}
.tests__title {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.tests__title-accent {
  background: linear-gradient(120deg, var(--primary), #6366F1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.tests__title-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 8px;
  background: rgba(249, 115, 22, 0.18);
  z-index: -1;
  border-radius: 4px;
}
.tests__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.tests__sub strong { color: var(--primary); font-weight: 700; }
@media (min-width: 768px) { .tests__title { font-size: 40px; } }

.tests__categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 56px;
}
@media (min-width: 640px) { .tests__categories { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .tests__categories {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }
  /* 5개 카드 3+2 배치: 첫 줄 3개(각 2칸), 둘째 줄 2개(각 3칸 가운데 정렬) */
  .tests__categories .test-category:nth-child(-n+3) { grid-column: span 2; }
  .tests__categories .test-category:nth-child(4) { grid-column: 2 / span 2; }
  .tests__categories .test-category:nth-child(5) { grid-column: 4 / span 2; }
}

.test-category {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.test-category::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.test-category--personality::before { background: linear-gradient(90deg, var(--primary), #6366F1); }
.test-category--interest::before { background: linear-gradient(90deg, var(--secondary), #DC2626); }
.test-category--aptitude::before { background: linear-gradient(90deg, var(--success), #16A34A); }
.test-category--values::before { background: linear-gradient(90deg, #4A3FC9, #7C3AED); }
.test-category--study::before { background: linear-gradient(90deg, var(--gold-dark), #B45309); }
.test-category:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.test-category__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.test-category__icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.test-category--personality .test-category__icon { background: linear-gradient(135deg, #EFF4FF, #DBEAFE); }
.test-category--interest .test-category__icon { background: linear-gradient(135deg, #FFF7ED, #FED7AA); }
.test-category--aptitude .test-category__icon { background: linear-gradient(135deg, #DCFCE7, #BBF7D0); }
.test-category--values .test-category__icon { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); }
.test-category--study .test-category__icon { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
.test-category__count {
  padding: 5px 12px;
  background: var(--bg);
  color: var(--ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.test-category__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.4px;
}
.test-category__desc {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.test-category__items {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.test-category__items li {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  display: flex;
  gap: 6px;
}
.test-category__items li::before {
  content: "•";
  color: var(--primary);
  font-weight: 800;
}

/* 운영 방식 안내 박스 */
.tests__operation {
  background: linear-gradient(135deg, #15133A, var(--primary));
  color: #FFFFFF;
  border-radius: 20px;
  padding: 36px 40px;
  display: flex;
  gap: 28px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 19, 58, 0.3);
}
.tests__operation::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  background: rgba(252, 211, 77, 0.08);
  border-radius: 50%;
}
.tests__operation-icon {
  font-size: 44px;
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.tests__operation-content {
  flex: 1;
  position: relative;
  z-index: 1;
}
.tests__operation-title {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.tests__operation-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 768px) { .tests__operation-steps { grid-template-columns: repeat(4, 1fr); } }
.op-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.op-step__num {
  width: 28px;
  height: 28px;
  background: var(--gold);
  color: #15133A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.op-step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #FFFFFF;
}
.op-step strong { color: var(--gold); font-weight: 700; }
.op-step small { display: block; font-size: 11px; opacity: 0.75; margin-top: 2px; }

.tests__cta-wrap, .lessons__cta-wrap { text-align: center; }
.tests__cta, .lessons__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: var(--shadow-cta);
  transition: transform 0.2s;
}
.tests__cta:hover, .lessons__cta:hover { transform: translateY(-2px); }
.tests__cta-note, .lessons__cta-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

@media (max-width: 768px) {
  .tests__operation { flex-direction: column; padding: 24px 22px; gap: 16px; }
  .tests__operation-icon { width: 56px; height: 56px; font-size: 32px; }
  .tests__operation-title { font-size: 16px; }
  .test-category { padding: 22px 20px; }
}

/* ============================================
   🆕 221차시 수업영상 섹션
   ============================================ */
.lessons {
  padding: 90px 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(249, 115, 22, 0.05), transparent 60%),
    #FFFFFF;
}
.lessons__inner { max-width: 1280px; margin: 0 auto; }
.lessons__head {
  text-align: center;
  margin-bottom: 48px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.lessons__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: var(--bg-orange);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 20px;
}
.lessons__title {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.lessons__title-accent {
  background: linear-gradient(120deg, var(--secondary), #DC2626);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.lessons__title-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 8px;
  background: rgba(252, 211, 77, 0.35);
  z-index: -1;
  border-radius: 4px;
}
.lessons__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.lessons__sub strong { color: var(--ink); font-weight: 700; background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%); padding: 0 2px; }
@media (min-width: 768px) { .lessons__title { font-size: 40px; } }

/* 학년별 차시 카드 */
.lessons__grade-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 56px;
}
@media (min-width: 640px) { .lessons__grade-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lessons__grade-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.grade-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.grade-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.grade-card--elem::before { background: linear-gradient(90deg, var(--success), #16A34A); }
.grade-card--mid::before { background: linear-gradient(90deg, var(--primary), #2563EB); }
.grade-card--high::before { background: linear-gradient(90deg, var(--secondary), #DC2626); }
.grade-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.grade-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.grade-card__grade {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.grade-card--elem .grade-card__grade { background: #DCFCE7; color: #14532D; }
.grade-card--mid .grade-card__grade { background: var(--bg-blue); color: var(--primary); }
.grade-card--high .grade-card__grade { background: #FFF7ED; color: var(--secondary); }
.grade-card__count {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.grade-card__title {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.grade-card__desc {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.grade-card__topics {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.grade-card__topics li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  display: flex;
  gap: 6px;
}
.grade-card__topics li::before {
  content: "▸";
  font-weight: 800;
}
.grade-card--elem .grade-card__topics li::before { color: var(--success); }
.grade-card--mid .grade-card__topics li::before { color: var(--primary); }
.grade-card--high .grade-card__topics li::before { color: var(--secondary); }

/* 4단계 수업 흐름 */
.lessons__flow {
  background: linear-gradient(135deg, #FEF3C7, #FFFFFF);
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 36px 32px;
  margin-bottom: 40px;
  box-shadow: 0 16px 40px rgba(252, 211, 77, 0.2);
}
.lessons__flow-title {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 800;
  color: #78350F;
  text-align: center;
  letter-spacing: -0.3px;
}
.lessons__flow-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: center;
}
@media (min-width: 768px) {
  .lessons__flow-steps {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 12px;
  }
}
.flow-step {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
  position: relative;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flow-step__num {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #FFFFFF;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(26, 86, 219, 0.3);
}
.flow-step__icon { font-size: 28px; margin-top: 6px; }
.flow-step strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.flow-step small {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
}
.flow-step__arrow {
  text-align: center;
  color: var(--gold-dark);
  font-size: 24px;
  font-weight: 800;
}
@media (max-width: 767px) {
  .flow-step__arrow { transform: rotate(90deg); padding: 4px 0; }
}

@media (max-width: 767px) {
  .lessons__flow { padding: 24px 22px; }
  .lessons__flow-title { font-size: 15px; }
  .grade-card { padding: 20px 18px; }
  .grade-card__count { font-size: 16px; }
}

/* ============================================
   운영 패키지 — 4박스 + 캠프 5종 통합
   ============================================ */
.product {
  padding: 90px 20px;
  background: var(--bg);
}
.product__inner { max-width: 1280px; margin: 0 auto; }
.product__head {
  text-align: center;
  margin-bottom: 48px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.product__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: var(--bg-blue);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 20px;
}
.product__title {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.product__title .brand { color: var(--primary); }
.product__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
@media (min-width: 768px) { .product__title { font-size: 40px; } }

/* 핵심 4박스 */
.product__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 56px;
}
@media (min-width: 640px) { .product__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .product__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.product-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 44px 24px 24px;
  position: relative;
  transition: all 0.3s;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}
.product-card__type {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.product-card__type--camp {
  background: linear-gradient(135deg, #ECE8FF, #DDD6FE);
  color: #4A3FC9;
}
.product-card__type--class {
  background: linear-gradient(135deg, #FFF7ED, #FED7AA);
  color: #C2410C;
}
.product-card__num {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-3);
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
}
.product-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 14px;
}
.product-card:nth-child(1) .product-card__icon { background: linear-gradient(135deg, #EFF4FF, #DBEAFE); }
.product-card:nth-child(2) .product-card__icon { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
.product-card:nth-child(3) .product-card__icon { background: linear-gradient(135deg, #FFF7ED, #FED7AA); }
.product-card:nth-child(4) .product-card__icon { background: linear-gradient(135deg, #ECE8FF, #DDD6FE); }
.product-card__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.product-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* 캠프 5종 라인업 (자체개발 강조) */
.camps-lineup__head {
  text-align: center;
  margin-bottom: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 56px;
}
.camps-lineup__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: linear-gradient(135deg, #ECE8FF, #DDD6FE);
  color: #4A3FC9;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  margin-bottom: 16px;
  border: 1px solid #DDD6FE;
}
.camps-lineup__title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.8px;
}
.camps-lineup__title .accent {
  background: linear-gradient(120deg, var(--primary), #6366F1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.camps-lineup__desc {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.65;
}
.camps-lineup__desc strong {
  color: var(--primary);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 65%, var(--bg-yellow) 65%);
  padding: 0 2px;
}
@media (min-width: 768px) { .camps-lineup__title { font-size: 30px; } }

.camps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .camps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .camps__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.camp-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  position: relative;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.camp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.camp-card--explore::before { background: linear-gradient(90deg, var(--primary), #6366F1); }
.camp-card--transition::before { background: linear-gradient(90deg, #4A3FC9, #7C3AED); }
.camp-card--entrepreneur::before { background: linear-gradient(90deg, var(--secondary), #DC2626); }
.camp-card--learning::before { background: linear-gradient(90deg, var(--success), #16A34A); }
.camp-card--reading::before { background: linear-gradient(90deg, var(--gold-dark), #B45309); }
.camp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.camp-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.camp-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.camp-card--explore .camp-card__icon { background: linear-gradient(135deg, #EFF4FF, #DBEAFE); }
.camp-card--transition .camp-card__icon { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); }
.camp-card--entrepreneur .camp-card__icon { background: linear-gradient(135deg, #FFF7ED, #FED7AA); }
.camp-card--learning .camp-card__icon { background: linear-gradient(135deg, #DCFCE7, #BBF7D0); }
.camp-card--reading .camp-card__icon { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }

.camp-card__badge {
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.camp-card__badge--best {
  background: linear-gradient(135deg, var(--primary), #6366F1);
  color: #FFFFFF;
}
.camp-card__badge--hot {
  background: linear-gradient(135deg, var(--secondary), #DC2626);
  color: #FFFFFF;
}
.camp-card__badge--new {
  background: linear-gradient(135deg, var(--gold), #F59E0B);
  color: #78350F;
}
.camp-card__badge--solo {
  background: var(--bg);
  color: var(--ink-3);
  border: 1px solid var(--line);
}

.camp-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.3;
}
.camp-card__target {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 600;
  padding: 4px 10px;
  background: var(--bg);
  border-radius: 6px;
  align-self: flex-start;
}
.camp-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ============================================
   실행 + 결과물 통합 섹션
   ============================================ */
.delivery {
  padding: 90px 20px;
  background: #FFFFFF;
}
.delivery__inner { max-width: 1200px; margin: 0 auto; }
.delivery__head {
  text-align: center;
  margin-bottom: 48px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.delivery__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: var(--bg-orange);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 20px;
}
.delivery__title {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.delivery__title .accent {
  background: linear-gradient(135deg, var(--secondary), #DC2626);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.delivery__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
@media (min-width: 768px) { .delivery__title { font-size: 40px; } }

/* 3번 클릭 (간소화) */
.delivery__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 56px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .delivery__steps { grid-template-columns: repeat(3, 1fr); } }
.delivery-step {
  background: var(--bg);
  border-radius: 14px;
  padding: 28px 22px 22px;
  border: 1px solid var(--line);
  text-align: center;
  position: relative;
}
.delivery-step__num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #FFFFFF;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(26, 86, 219, 0.3);
}
.delivery-step__icon { font-size: 36px; margin: 4px 0 10px; }
.delivery-step__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
}
.delivery-step__desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* 결과물 미리보기 (간소화) */
.delivery__report-head {
  text-align: center;
  margin-bottom: 32px;
  padding-top: 12px;
}
.delivery__report-title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.35;
  font-weight: 700;
  color: #15133A;
  letter-spacing: -1px;
}
.delivery__report-title .accent { color: #4A3FC9; }
.delivery__report-sub {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.7;
}
@media (min-width: 768px) { .delivery__report-title { font-size: 32px; } }

.delivery__report-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
@media (min-width: 900px) {
  .delivery__report-preview { grid-template-columns: 0.85fr 1fr; gap: 32px; }
}

.report-cover {
  background: linear-gradient(135deg, #15133A 0%, #2A2580 100%);
  color: #FFFFFF;
  border-radius: 18px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(21, 19, 58, 0.4);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.report-cover::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 260px; height: 260px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}
.report-cover__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  opacity: 0.7;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.report-cover__brand { display: flex; align-items: center; gap: 10px; }
.report-cover__mark {
  width: 28px; height: 28px;
  border: 1.5px solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
}
.report-cover__title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  margin: 16px 0;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 2;
}
.report-cover__title .light { color: #B9A8FF; }
.report-cover__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 2;
}
.report-cover__meta > div { display: flex; flex-direction: column; gap: 3px; }
.report-cover__meta span {
  font-size: 9.5px;
  opacity: 0.6;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.report-cover__meta strong { font-size: 13px; font-weight: 700; }

.report-content {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.report-block__title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  color: #4A3FC9;
  padding-bottom: 8px;
  border-bottom: 2px solid #ECE8FF;
}
.report-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.report-card {
  background: linear-gradient(135deg, #F4F1FF, #FFFFFF);
  border: 1px solid #ECE8FF;
  border-radius: 10px;
  padding: 12px 14px;
}
.report-card__label {
  font-size: 10px;
  font-weight: 800;
  color: #4A3FC9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.report-card__value {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #15133A;
  line-height: 1.3;
  margin-bottom: 3px;
}
.report-card p { margin: 0; font-size: 11px; color: var(--ink-3); }
.report-recommend ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.report-recommend li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.report-recommend li span { font-size: 16px; }

.delivery__cta-wrap {
  text-align: center;
}
.delivery__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: var(--shadow-cta);
  transition: transform 0.2s;
}
.delivery__cta:hover { transform: translateY(-2px); }

/* ============================================
   도입 + 결재용 제안서 (메인 CTA 거점)
   ============================================ */
.process-section {
  padding: 90px 20px;
  background: var(--bg);
}
.process-section__inner { max-width: 1200px; margin: 0 auto; }
.process-section__head {
  text-align: center;
  margin-bottom: 40px;
}
.process-section__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: var(--bg-blue);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 20px;
}
.process-section__title {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.process-section__title .accent { color: var(--primary); }
@media (min-width: 768px) { .process-section__title { font-size: 40px; } }

.process__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto 40px;
}
@media (min-width: 768px) { .process__steps { grid-template-columns: repeat(4, 1fr); } }
.process-step {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  text-align: center;
}
.process-step__num {
  display: inline-block;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.process-step__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
}
.process-step__time {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
}

/* 결재용 제안서 강조 박스 (메인 CTA) */
.proposal-box {
  background: linear-gradient(135deg, #15133A 0%, var(--primary) 100%);
  color: #FFFFFF;
  border-radius: 24px;
  padding: 44px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: 0 30px 70px -16px rgba(21, 19, 58, 0.45);
  position: relative;
  overflow: hidden;
}
.proposal-box::before {
  content: "";
  position: absolute;
  top: -140px; right: -140px;
  width: 360px; height: 360px;
  background: rgba(252, 211, 77, 0.1);
  border-radius: 50%;
}
.proposal-box::after {
  content: "";
  position: absolute;
  bottom: -100px; left: 20%;
  width: 200px; height: 200px;
  background: rgba(99, 102, 241, 0.18);
  border-radius: 50%;
}
.proposal-box__icon {
  width: 88px;
  height: 88px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.proposal-box__content { position: relative; z-index: 1; }
.proposal-box__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  background: rgba(252, 211, 77, 0.2);
  color: var(--gold);
  border-radius: 999px;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}
.proposal-box__title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.5px;
}
.proposal-box__title strong { color: var(--gold); font-weight: 800; }
.proposal-box__desc {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.7;
  opacity: 0.94;
}
.proposal-box__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
.proposal-box__list li {
  font-size: 13px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 6px;
}
.proposal-box__list li::before {
  content: "✓";
  color: var(--gold);
  font-weight: 800;
}
.proposal-box__cta {
  background: var(--gold);
  color: #15133A;
  padding: 22px 32px;
  border-radius: 16px;
  font-weight: 800;
  white-space: nowrap;
  text-align: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 14px 32px rgba(252, 211, 77, 0.4);
  transition: all 0.2s;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.proposal-box__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(252, 211, 77, 0.55);
}
.proposal-box__cta-main { font-size: 16px; margin-bottom: 4px; }
.proposal-box__cta-sub {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.65;
  letter-spacing: 0.2px;
}
@media (max-width: 1023px) {
  .proposal-box {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 32px 28px;
    gap: 20px;
  }
  .proposal-box__icon { margin: 0 auto; width: 72px; height: 72px; font-size: 34px; }
  .proposal-box__title { font-size: 20px; }
  .proposal-box__list {
    grid-template-columns: 1fr;
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
  }
  .proposal-box__cta { width: 100%; padding: 18px 24px; }
}

/* ============================================
   FAQ (6개로 축소)
   ============================================ */
.faq {
  padding: 90px 20px;
  background: #FFFFFF;
}
.faq__inner { max-width: 880px; margin: 0 auto; }
.faq__head {
  text-align: center;
  margin-bottom: 40px;
}
.faq__eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 16px;
}
.faq__title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
}
@media (min-width: 768px) { .faq__title { font-size: 34px; } }

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: all 0.2s;
}
.faq-item[open] {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 24px;
  font-size: 15.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-2);
  transition: all 0.2s;
}
.faq-item[open] summary::after {
  content: "−";
  background: var(--primary);
  color: #FFFFFF;
}
.faq-item__answer {
  padding: 0 24px 24px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.faq-item__answer strong { color: var(--ink); font-weight: 700; }

/* ============================================
   하단 풀너피 전환 CTA (강력)
   ============================================ */
.bottom-cta {
  max-width: 1320px;
  margin: 0 auto 28px;
  padding: 76px 20px;
  background: linear-gradient(135deg, var(--ink) 0%, #1E3A8A 100%);
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.16);
}
.bottom-cta::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: rgba(252, 211, 77, 0.1);
  border-radius: 50%;
}
.bottom-cta::after {
  content: "";
  position: absolute;
  bottom: -120px; left: -120px;
  width: 320px; height: 320px;
  background: rgba(99, 102, 241, 0.15);
  border-radius: 50%;
}
.bottom-cta__inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.bottom-cta__urgent {
  display: inline-block;
  padding: 7px 16px;
  background: var(--warn);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 999px;
  margin-bottom: 20px;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}
.bottom-cta__title {
  margin: 0 0 16px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -1px;
}
.bottom-cta__title .accent { color: var(--gold); }
.bottom-cta__sub {
  margin: 0 0 32px;
  font-size: 16px;
  opacity: 0.92;
  line-height: 1.7;
}
.bottom-cta__sub strong { color: var(--gold); font-weight: 700; }
.bottom-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 580px;
  margin: 0 auto;
}
@media (min-width: 640px) { .bottom-cta__buttons { flex-direction: row; } }
.bottom-cta__btn {
  flex: 1;
  padding: 20px 28px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  transition: transform 0.2s;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom-cta__btn--primary {
  background: var(--gold);
  color: #15133A;
  box-shadow: 0 14px 32px rgba(252, 211, 77, 0.4);
}
.bottom-cta__btn--primary:hover { transform: translateY(-3px); }
.bottom-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.bottom-cta__btn--secondary:hover { background: rgba(255, 255, 255, 0.15); }
@media (min-width: 768px) { .bottom-cta__title { font-size: 38px; } }

/* ============================================
   Partner Platform Strip
   ============================================ */
.partner-strip {
  background: #FFFFFF;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  padding: 18px 20px;
}
.partner-strip__inner {
  max-width: 1120px;
  margin: 0 auto;
}
.partner-strip__eyebrow {
  margin-bottom: 10px;
  color: #64748B;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.partner-strip__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partner-strip__list {
  display: flex;
  width: max-content;
  gap: 10px;
  animation: partner-scroll 32s linear infinite;
}
.partner-strip__viewport:hover .partner-strip__list,
.partner-strip__viewport:focus-within .partner-strip__list {
  animation-play-state: paused;
}
.partner-strip__item {
  flex: 0 0 548px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 12px 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: none;
}
.partner-strip__logo {
  flex: 0 0 128px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.partner-strip__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.partner-strip__logo--eduzip {
  flex-basis: 78px;
}
.partner-strip__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.partner-strip__text strong {
  color: #0F172A;
  font-size: 16px;
  font-weight: 900;
}
.partner-strip__text span {
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
}
@keyframes partner-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 5px)); }
}
@media (prefers-reduced-motion: reduce) {
  .partner-strip__list {
    animation: none;
    transform: none;
  }
}

/* ============================================
   푸터
   ============================================ */
.site-footer {
  background: #0F172A;
  color: #94A3B8;
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
}
.site-footer strong { color: var(--gold); font-weight: 700; }
.site-footer__divider { color: #475569; margin: 0 6px; }
.site-footer__policy {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: #E2E8F0;
  font-size: 14px;
  font-weight: 800;
}
.site-footer__policy a {
  color: inherit;
  text-decoration: none;
}
.site-footer__policy a:hover,
.site-footer__policy a:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================================
   모바일 하단 고정 CTA
   ============================================ */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: #FFFFFF;
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
  transition: transform 0.3s ease;
}
.sticky-cta__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  min-height: 56px;
}
.sticky-cta__btn--primary {
  background: linear-gradient(135deg, var(--primary), #2563EB);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.3);
}
.sticky-cta__btn--call {
  background: var(--secondary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}
.sticky-cta__icon { font-size: 22px; }
.sticky-cta__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.sticky-cta__sub { font-size: 10px; font-weight: 600; opacity: 0.9; }
.sticky-cta__label { font-size: 14px; font-weight: 800; }

@media (max-width: 767px) {
  .sticky-cta { display: flex; }
  .site-footer { padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom)); }
  .partner-strip { padding: 16px; }
  .partner-strip__eyebrow { font-size: 12px; }
  .partner-strip__list {
    gap: 10px;
    animation-duration: 26s;
  }
  .partner-strip__item {
    flex-basis: 284px;
    min-height: 72px;
    padding: 12px 14px;
    gap: 12px;
    border-radius: 10px;
  }
  .partner-strip__logo {
    flex-basis: 104px;
    height: 42px;
  }
  .partner-strip__logo--eduzip {
    flex-basis: 64px;
  }
  .partner-strip__text strong { font-size: 15px; }
  .partner-strip__text span { font-size: 11.5px; }
}

/* ============================================
   모바일 전체 최적화
   ============================================ */
@media (max-width: 767px) {
  .hero { padding: 32px 16px 56px; }
  .hero__inner { gap: 28px; }
  .hero__headline { font-size: 24px; letter-spacing: -0.8px; }
  .hero__subcopy { font-size: 15px; }
  .hero__deliverables { padding: 28px 22px 24px; border-radius: 20px; }
  .hero__deliverables-title { font-size: 18px; }
  .hero__deliverables-sub { font-size: 12.5px; }
  .hero__deliverables-list li { font-size: 13.5px; padding: 12px 14px; }
  .btn-cta--primary { font-size: 16px; }
  .hero__trust-item { font-size: 11.5px; padding: 6px 10px; }

  .why, .tests-summary, .lessons-summary,
  .compare, .product, .delivery, .process-section, .faq, .bottom-cta,
  .tests, .lessons {
    padding: 56px 16px;
  }
  .why__title, .tests-summary__title, .lessons-summary__title,
  .compare__title, .product__title, .delivery__title,
  .process-section__title, .faq__title, .bottom-cta__title,
  .tests__title, .lessons__title {
    font-size: 22px; letter-spacing: -0.8px;
  }
  .delivery__report-title { font-size: 22px; }
  .compare__sub, .product__sub, .delivery__sub, .bottom-cta__sub,
  .why__sub, .tests__sub, .lessons__sub { font-size: 14px; }

  /* why 카드 모바일 */
  .why-card { padding: 22px 20px; gap: 12px; }
  .why-card__icon { font-size: 32px; }
  .why-card__title { font-size: 17px; }
  .why-card__hook { font-size: 13px; padding: 11px 13px; }
  .why-card__points li { font-size: 12.5px; }
  .why-card__answer { font-size: 13px; padding: 12px 14px; }

  /* tests-summary / lessons-summary 모바일 */
  .ts-card { padding: 18px 14px; gap: 6px; }
  .ts-card__icon { font-size: 26px; }
  .ts-card__count { font-size: 17px; padding: 3px 10px; }
  .ts-card__title { font-size: 14px; }
  .ts-card__why { font-size: 11.5px; }
  .ls-grade { padding: 10px 6px; }
  .ls-grade strong { font-size: 11.5px; }
  .ls-grade span { font-size: 12.5px; }
  .lsf-step { padding: 12px 10px; }

  .annual-summary { padding: 24px 22px; gap: 14px; }
  .annual-summary__icon { width: 56px; height: 56px; font-size: 36px; }

  .product-card { padding: 38px 18px 22px; }
  .product-card__icon { width: 46px; height: 46px; font-size: 22px; }
  .product-card__title { font-size: 15px; }

  .camps-lineup__head { padding-top: 40px; margin-bottom: 28px; }
  .camps-lineup__title { font-size: 20px; }
  .camps-lineup__desc { font-size: 13.5px; }
  .camp-card { padding: 22px 20px; gap: 11px; }
  .camp-card__icon { width: 42px; height: 42px; font-size: 22px; }
  .camp-card__title { font-size: 15.5px; }
  .camp-card__desc { font-size: 12.5px; }

  .delivery-step { padding: 26px 20px 18px; }
  .delivery-step__icon { font-size: 32px; }

  .report-cover { padding: 24px 22px; min-height: 340px; }
  .report-cover__title { font-size: 22px; }
  .report-content { padding: 22px 18px; }

  .proposal-box__title { font-size: 18px; }

  .bottom-cta {
    margin: 0 16px 18px;
    padding: 56px 18px;
    border-radius: 22px;
  }

  .faq-item summary { padding: 16px 18px; font-size: 14px; }
  .faq-item__answer { padding: 0 18px 18px; font-size: 13px; }
}