@charset "utf-8";
/* ==========================================================================
   White Unification — 모든 영역 배경을 흰색으로 통일
   가장 마지막에 로드. 이 파일만 빼면 원래 배경(다크/소프트/크림)으로 복귀됨
   ========================================================================== */

/* ---------- 1. 토큰: 모든 표면을 흰색으로 ---------- */
:root,
body[class*="seg-"] {
  --background: #ffffff;
  --surface: #ffffff;
  --card: #ffffff;
  --muted: #ffffff;
  --secondary: #ffffff;
  --cream: #ffffff;
  --border: #e6e8ec;
  --border-soft: rgba(31, 36, 46, .09);
  --line: #eceef2;          /* 섹션 구분선 */
  --tint: #fafbfc;          /* 카드 내부 아주 옅은 톤 (필요한 곳만) */
}
/* hobby 는 --muted 를 '텍스트 색'으로 쓰므로 되살림 */
body.seg-hobby { --muted: #6c6a63; --muted-fg: #6c6a63; --muted-foreground: #6c6a63; }
body.seg-tutoring { --foreground: #26221d; }
body.seg-hobby { --foreground: #24232a; }

/* ---------- 2. 섹션·블록 배경 전면 흰색 ---------- */
body,
.site-header, .site-footer, .nav-mobile, .sticky-cta,
.section, .sec, .hero, .final, .statement,
.section.dark, .section.soft, .section.bg-navy, .section.bg-secondary,
.sec.dark, .sec.soft, .section--dark, .section--soft,
.dark, .bg-navy, .bg-secondary, .soft,
.final-box, .final-inner, .audience, .hub-hero {
  background: #ffffff !important;
  background-image: none !important;
}

/* 헤더 블러 오버레이도 흰색 */
.site-header::before { background: rgba(255, 255, 255, .85) !important; }
.sticky-cta { background: rgba(255, 255, 255, .92) !important; }

/* 장식용 광원·그라디언트 제거 */
.hero-glow, .final-glow, .hub-glow, .glow,
.hero::before, .hero::after,
.final::before, .final::after,
.statement::before, .statement::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* ---------- 3. 다크였던 영역의 글자색 복구 ---------- */
.dark, .bg-navy, .statement, .final,
.section.dark, .section.bg-navy, .sec.dark,
.final-box, .final-inner {
  color: var(--foreground) !important;
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark b, .dark strong, .dark span,
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy b, .bg-navy strong,
.statement h1, .statement h2, .statement h3,
.final h1, .final h2, .final h3, .final b, .final strong,
.final-box h2, .final-box h3 {
  color: var(--foreground) !important;
}
.dark p, .dark li, .dark small,
.bg-navy p, .bg-navy li, .bg-navy small,
.statement p, .final p, .final .note, .final-box p, .final-box .note {
  color: var(--muted-foreground) !important;
}
.dark .eyebrow, .bg-navy .eyebrow, .statement .eyebrow, .final .eyebrow {
  color: var(--primary) !important;
}
.dark .text-primary, .bg-navy .text-primary,
.dark .accent, .bg-navy .accent, .statement .accent, .final .accent,
.dark [class*="brand"], .bg-navy [class*="brand"] {
  color: var(--primary) !important;
}
.dark svg, .bg-navy svg, .statement svg, .final svg { color: inherit; }

/* ---------- 4. 다크 위에 얹혀 있던 반투명 카드 → 흰 카드 + 테두리 ---------- */
.dark .card, .dark .chip, .dark .panel, .dark .stat, .dark .lesson,
.dark .library, .dark .box, .dark .item, .dark .tag,
.bg-navy .card, .bg-navy .chip, .bg-navy .panel, .bg-navy .stat,
.bg-navy .box, .bg-navy .item, .bg-navy .pill,
.final .card, .final .chip, .final .point, .final .points > * {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--foreground) !important;
  box-shadow: 0 1px 2px rgba(16, 20, 32, .05) !important;
}
.dark .card p, .dark .chip .t, .dark .stat p, .dark .lesson span,
.bg-navy .card p, .bg-navy .stat p, .final .point p {
  color: var(--muted-foreground) !important;
}
.dark .ic, .dark .card .ic, .dark .chip .ic,
.bg-navy .ic, .bg-navy .card .ic, .final .ic {
  background: var(--accent) !important;
  color: var(--primary) !important;
}
.dark .ic svg, .bg-navy .ic svg, .final .ic svg { color: var(--primary) !important; }
.dark .chip.brand .ic, .bg-navy .chip.brand .ic {
  background: var(--primary) !important;
}
.dark .chip.brand .ic svg, .bg-navy .chip.brand .ic svg { color: #fff !important; }

/* ---------- 5. 다크 영역의 버튼 ---------- */
.dark .btn-primary, .bg-navy .btn-primary, .final .btn-primary,
.final-box .btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.dark .btn-on-primary, .dark .btn-light, .dark .btn-ghost-light,
.bg-navy .btn-on-primary, .bg-navy .btn-light, .bg-navy .btn-ghost-light,
.final .btn-on-primary, .final .btn-light, .final .btn-ghost-light,
.final-box .btn-on-primary, .final-box .btn-light, .final-box .btn-ghost-light,
.statement .btn-ghost-light {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-brand) !important;
}
.dark .btn-secondary, .dark .btn-ghost, .dark .btn-outline,
.bg-navy .btn-secondary, .bg-navy .btn-ghost, .bg-navy .btn-outline,
.final .btn-secondary, .final .btn-ghost, .final .btn-outline,
.final-box .btn-secondary {
  background: #fff !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}

/* ---------- 6. 배경이 사라진 만큼 경계선으로 구조 유지 ---------- */
.section + .section::before,
.sec + .sec::before { display: none; }

main > .section, main > .sec, main > section {
  border-top: 1px solid var(--line);
}
main > section:first-child { border-top: 0; }

/* 다크였던 블록은 살짝 강조된 구분선 */
main > .dark, main > .bg-navy, main > .section.dark,
main > .section.bg-navy, main > .sec.dark, main > .final, main > .statement {
  border-top: 1px solid var(--border);
}

/* 흰 배경 위에서 형태가 사라지는 카드들에 최소한의 윤곽 부여 */
.card, .chip, .step-card, .cmp-card, .flow-card,
.faq-item, .seg-card, .hub-card {
  background-color: #ffffff;
}
.card, .step-card, .cmp-card, .flow-card, .faq-item {
  border: 1px solid var(--border);
}
/* 목업 패널도 흰색 통일 (어둡게 되돌리려면 이 블록만 지우면 됨) */
.panel.new, .library, .lesson-screen, .myclass, .bubble.navy, .chat .right .b {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ---------- 7. 남은 색면 블록 정리 ---------- */
.panel.old, .pricing, .cmp-card.win, .stat.win, .seg-card.is-current,
.hub-card.is-current, .final .pt, .compare > * {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
}
.cmp-card.win, .stat.win, .seg-card.is-current, .pricing {
  border-color: color-mix(in srgb, var(--primary) 34%, transparent) !important;
}
.panel.old .tag { background: #f2f3f5 !important; color: var(--muted-foreground) !important; }
.arrow-down { color: #9aa1ad !important; }

/* ---------- 8. 이미지 프레임 ---------- */
.imgframe.dark, .hero-frame, .rounded-img, .hero-card, .prod-visual {
  background: #ffffff !important;
}