/* Light Mode Styles for All Sections */

/* 우수 학생 섹션: 라이트 모드에서도 다크 쇼케이스 유지 (always-dark) — 흰배경 강제 제거 */

/* Base Styles */
body.light-mode {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* Force all sections to have light backgrounds */
body.light-mode section {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* Ensure no black gaps between sections */
body.light-mode {
    background-color: #ffffff !important;
}

/* Force all text elements to be dark in light mode */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode p,
body.light-mode span,
body.light-mode div,
body.light-mode li,
body.light-mode a {
    color: #1a1a1a !important;
}

/* Except for specific elements that should maintain their colors */
body.light-mode .highlight,
body.light-mode .gradient-text,
body.light-mode .stat-value,
body.light-mode .overall-score-value,
body.light-mode .active-index-value {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Smooth transitions for theme switching */
body,
body * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Navigation */
body.light-mode #header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode header.scrolled,
body.light-mode #header.scrolled {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(120%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.05);
}

body.light-mode .logo {
    color: #1a1a1a;
}

body.light-mode .nav-menu a {
    color: #333;
}

body.light-mode .nav-menu a:hover {
    color: #5b4cff;
}

body.light-mode .nav-cta {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(91, 76, 255, 0.3);
}

body.light-mode .menu-toggle span {
    background: #1a1a1a;
}

/* Hero Section */
body.light-mode .hero {
    background: 
        radial-gradient(ellipse at top left, rgba(91, 76, 255, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at bottom right, rgba(0, 212, 255, 0.08) 0%, transparent 40%),
        linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f0f4f8 100%) !important;
}

body.light-mode .hero * {
    color: #1a1a1a !important;
}

body.light-mode .hero .highlight {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 히어로 하이라이트: 가독성 위주로 차분하게 (그라데이션 강제 해제, 솔리드 보라) */
body.light-mode .hero-content .hero-title .highlight {
    background: none !important;
    -webkit-text-fill-color: #5b4cff !important;
    color: #5b4cff !important;
}
body.light-mode .hero-content .hero-title .highlight::after {
    background: rgba(91, 76, 255, 0.4) !important;
}

body.light-mode .hero-title {
    color: #1a1a1a !important;
}

body.light-mode .hero-description {
    color: #333 !important;
}

body.light-mode .hero-cta {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(91, 76, 255, 0.3);
}

body.light-mode .secondary-cta {
    background: white;
    color: #5b4cff;
    border: 2px solid #e0e0e0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

body.light-mode .secondary-cta:hover {
    border-color: #5b4cff;
    box-shadow: 0 8px 25px rgba(91, 76, 255, 0.2);
}

body.light-mode .premium-badge {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(91, 76, 255, 0.3);
}

/* Stats Cards */
body.light-mode .stat-card {
    background: white;
    border: 1px solid #e8e8e8;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

body.light-mode .stat-card:hover {
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
    border-color: #d0d0d0;
}

body.light-mode .stat-label {
    color: #333;
}

body.light-mode .stat-value {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-mode .stat-desc {
    color: #333;
}

body.light-mode .live-indicator {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
}

/* Geometric Background */
body.light-mode .geometric-bg .geo-line {
    background: linear-gradient(90deg, transparent, rgba(91, 76, 255, 0.2), rgba(0, 212, 255, 0.15), transparent);
}

/* 3D Cubes */
body.light-mode .cube-face {
    border: 1px solid rgba(91, 76, 255, 0.2);
    background: rgba(91, 76, 255, 0.03);
}

/* Particles */
body.light-mode .particles .particle {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    opacity: 0.3;
}

/* Hologram */
body.light-mode .hologram-line {
    background: linear-gradient(to bottom, rgba(91, 76, 255, 0.1), transparent);
}

/* About Section */
body.light-mode .about-section {
    background: #f8f9fa !important;
}

body.light-mode .about-section * {
    color: #1a1a1a !important;
}

body.light-mode .about-section p,
body.light-mode .about-section span {
    color: #333 !important;
}

/* Feature Descriptions - Force background and text color */
body.light-mode .features-descriptions {
    background: transparent !important;
}

body.light-mode .feature-description {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    color: #1a1a1a !important;
}

body.light-mode .feature-description:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
    border-color: #5b4cff !important;
}

body.light-mode .description-number {
    background: white !important;
    color: #5b4cff !important;
    font-weight: 700;
    border: 2px solid #5b4cff !important;
    box-shadow: 0 4px 15px rgba(91, 76, 255, 0.2) !important;
}

body.light-mode .description-content {
    background: transparent !important;
}

body.light-mode .description-content h4 {
    color: #1a1a1a !important;
}

body.light-mode .description-content p {
    color: #333 !important;
}

body.light-mode .feature-card {
    background: white !important;
    color: #1a1a1a !important;
}

body.light-mode .feature-card h4 {
    color: #1a1a1a !important;
}

body.light-mode .feature-card p {
    color: #333 !important;
}

body.light-mode .section-badge {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    color: white;
}

body.light-mode .section-title {
    color: #1a1a1a;
}

body.light-mode .about-header h3 {
    color: #1a1a1a !important;
}

body.light-mode .about-subtitle {
    color: #333 !important;
}

body.light-mode .about-summary {
    color: #333 !important;
}

body.light-mode .about-summary p {
    color: #333 !important;
}

body.light-mode .about-content-new {
    color: #1a1a1a !important;
}

body.light-mode .about-content-new h3 {
    color: #1a1a1a !important;
}

body.light-mode .about-content-new p {
    color: #333 !important;
}

body.light-mode .about-subtitle {
    color: #333;
}

body.light-mode .feature-card {
    background: white;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

body.light-mode .feature-card:hover {
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
    border-color: #5b4cff;
}

body.light-mode .feature-icon {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
}

body.light-mode .feature-title {
    color: #1a1a1a;
}

body.light-mode .feature-desc {
    color: #333;
}

/* Systems Section (legacy .systems-section + .systems-showcase) */
body.light-mode .systems-section,
body.light-mode .systems-showcase {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
}

body.light-mode .systems-section * {
    color: #1a1a1a !important;
}

body.light-mode .systems-showcase .section-title,
body.light-mode .systems-showcase .section-badge {
    color: #0f172a !important;
}

body.light-mode .systems-showcase .system-feature-title {
    color: #0f172a !important;
}

body.light-mode .systems-showcase .system-feature-desc {
    color: #475569 !important;
}

body.light-mode .systems-showcase .system-feature-badge {
    background: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe;
}

body.light-mode .systems-showcase .system-feature-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08) !important;
}

body.light-mode .system-card {
    background: #f8f9fa !important;
    border: 2px solid #d0d0d0 !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .system-card:hover {
    box-shadow: 0 15px 40px rgba(91, 76, 255, 0.2) !important;
    border-color: #5b4cff !important;
    transform: translateY(-5px);
}

body.light-mode .system-icon {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
}

body.light-mode .system-name {
    color: #1a1a1a;
}

body.light-mode .system-desc {
    color: #333;
}

/* Learning Path Section */
body.light-mode .learning-path-section {
    background: #f8f9fa !important;
}

body.light-mode .learning-path-section * {
    color: #1a1a1a !important;
}

body.light-mode .learning-path-section .path-step-title,
body.light-mode .learning-path-section .metric-label {
    color: #0f172a !important;
}

body.light-mode .learning-path-section .path-step-desc,
body.light-mode .learning-path-section .metric-value {
    color: #475569 !important;
}

body.light-mode .persona-section .persona-card h3,
body.light-mode .persona-section .persona-card p {
    color: #1e293b !important;
}

body.light-mode .learning-path-visual {
    filter: brightness(1.2);
}

body.light-mode .path-node {
    background: white;
    border: 2px solid #e0e0e0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

body.light-mode .path-node.active {
    border-color: #5b4cff;
    box-shadow: 0 10px 30px rgba(91, 76, 255, 0.3);
}

body.light-mode .path-line {
    background: #e0e0e0;
}

body.light-mode .path-line::after {
    background: linear-gradient(to right, #5b4cff, #00d4ff);
}

/* Persona Section */
body.light-mode .persona-section {
    background: white !important;
}

body.light-mode .persona-section * {
    color: #1a1a1a !important;
}

body.light-mode .persona-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

body.light-mode .persona-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

body.light-mode .persona-header {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
}

body.light-mode .chat-message {
    background: white;
    color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

body.light-mode .chat-message.assistant {
    background: #f0f4f8;
}

/* Dashboard Section */
body.light-mode .dashboard-section {
    background: #f8f9fa !important;
}

/* Dashboard Preview Section */
body.light-mode .dashboard-preview {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%) !important;
    background-color: #f8f9fa !important;
    padding-bottom: 40px !important;
}

body.light-mode .dashboard-preview * {
    color: #1a1a1a !important;
}

body.light-mode .dashboard-preview::before {
    opacity: 0.3 !important;
}

body.light-mode .dashboard-section * {
    color: #1a1a1a !important;
}

body.light-mode .dashboard-container {
    background: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

body.light-mode .dashboard-sidebar {
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
}

body.light-mode .menu-item {
    color: #333;
}

body.light-mode .menu-item:hover {
    background: rgba(91, 76, 255, 0.1);
    color: #5b4cff;
}

body.light-mode .menu-item.active {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    color: white;
}

body.light-mode .dashboard-widget {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
}

/* Students Section — 라이트 모드에서도 다크 유지 (흰배경/광역 다크텍스트 강제 제거) */

body.light-mode .students-section .section-header {
    background: transparent !important;
}

body.light-mode .students-section .section-container {
    background: transparent !important;
}

body.light-mode .students-section .section-badge {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%) !important;
    color: white !important;
}

body.light-mode .students-slider-wrapper iframe {
    filter: brightness(1.1);
}

/* Curriculum Section */
body.light-mode .curriculum-section {
    background: #f8f9fa !important;
}

body.light-mode .curriculum-section * {
    color: #1a1a1a !important;
}

body.light-mode .tab-button {
    background: white;
    color: #333;
    border: 1px solid #e0e0e0;
}

body.light-mode .tab-button:hover {
    background: #f0f4f8;
    border-color: #5b4cff;
    color: #5b4cff;
}

body.light-mode .tab-button.active {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    color: white;
    border: none;
}

body.light-mode .curriculum-panel {
    background: transparent !important;
    box-shadow: none !important;
}

body.light-mode .curriculum-item {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: 2px solid #e0e0e0 !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .curriculum-item:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%) !important;
    box-shadow: 0 10px 35px rgba(91, 76, 255, 0.15) !important;
    border-color: #5b4cff !important;
}

body.light-mode .curriculum-item h4 {
    color: #1a1a1a !important;
}

body.light-mode .curriculum-list li {
    color: #333 !important;
}

body.light-mode .curriculum-list li:hover {
    color: #1a1a1a !important;
}

body.light-mode .curriculum-list li::before {
    color: #5b4cff !important;
}

body.light-mode .curriculum-list li:hover::before {
    color: #00d4ff !important;
}

/* Footer - Light theme for footer */
body.light-mode footer {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    border-top: 1px solid #e0e0e0 !important;
}

body.light-mode footer * {
    color: #1a1a1a !important;
}

body.light-mode .footer-brand h3 {
    color: #1a1a1a !important;
}

body.light-mode .footer-brand p {
    color: #333 !important;
}

body.light-mode .footer-section h4 {
    color: #1a1a1a !important;
}

body.light-mode .footer-section p {
    color: #333 !important;
}

body.light-mode .footer-section a {
    color: #5b4cff !important;
    text-decoration: none;
}

body.light-mode .footer-section a:hover {
    color: #00d4ff !important;
    text-decoration: underline;
}

body.light-mode .footer-section li {
    color: #333 !important;
}

body.light-mode .footer-bottom {
    background: #e8e8e8 !important;
    border-top: 1px solid #d0d0d0 !important;
    color: #333 !important;
    padding: 20px 0;
}

body.light-mode .footer-bottom a {
    color: #5b4cff !important;
}

body.light-mode .footer-bottom a:hover {
    color: #00d4ff !important;
}

body.light-mode .social-links a {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    color: #5b4cff !important;
}

body.light-mode .social-links a:hover {
    background: #5b4cff !important;
    color: white !important;
    border-color: #5b4cff !important;
}

/* Mobile Menu */
body.light-mode .mobile-menu {
    background: white;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
}

body.light-mode .mobile-menu a {
    color: #1a1a1a;
}

body.light-mode .mobile-menu a:hover {
    background: rgba(91, 76, 255, 0.1);
    color: #5b4cff;
}

/* Scroll Progress */
body.light-mode .scroll-progress {
    background: linear-gradient(90deg, #5b4cff 0%, #00d4ff 100%);
}

.scroll-progress.is-complete {
    opacity: 0;
    pointer-events: none;
}

/* Floating Label */
body.light-mode .floating-label {
    background: white;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Section Connectors */
body.light-mode .section-connector {
    background: linear-gradient(180deg, 
        rgba(91, 76, 255, 0) 0%, 
        rgba(91, 76, 255, 0.3) 50%, 
        rgba(91, 76, 255, 0) 100%) !important;
}

body.light-mode .section-connector::before {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%) !important;
    box-shadow: 0 0 20px rgba(91, 76, 255, 0.5) !important;
}

/* App Preview Section (if exists) */
body.light-mode .app-preview-section {
    background: white;
}

body.light-mode .phone-mockup {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* Gradient text in light mode */
body.light-mode .gradient-text {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Buttons in light mode */
body.light-mode .btn-primary {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(91, 76, 255, 0.3);
}

body.light-mode .btn-secondary {
    background: white;
    color: #5b4cff;
    border: 2px solid #e0e0e0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

body.light-mode .btn-secondary:hover {
    border-color: #5b4cff;
    box-shadow: 0 8px 25px rgba(91, 76, 255, 0.2);
}

/* Animations and effects adjustments */
body.light-mode .glow-effect {
    filter: drop-shadow(0 0 20px rgba(91, 76, 255, 0.3));
}

body.light-mode .shadow-effect {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Orbit effects in light mode */
body.light-mode .orbit {
    border-color: rgba(91, 76, 255, 0.2);
}

body.light-mode .orbit-dot {
    background: linear-gradient(135deg, #5b4cff 0%, #00d4ff 100%);
    box-shadow: 0 0 20px rgba(91, 76, 255, 0.5);
}

/* VOICES / #reviews — 전역 p·span·a 색 강제 해제, conversion.css 계층 적용 */
body.light-mode .testimonials-section {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

body.light-mode .testimonials-section p,
body.light-mode .testimonials-section span,
body.light-mode .testimonials-section li,
body.light-mode .testimonials-section blockquote,
body.light-mode .testimonials-section .voices-place-card,
body.light-mode .testimonials-section a.testimonial-cta {
    color: unset !important;
}

body.light-mode .testimonials-section .voices-place-card__cta:not(.voices-place-card__cta--origin) {
    color: #047857 !important;
}

/* 실사용 후기 전체 보기 — 마우스오버 시 글자색 흰색 (비-hover :not 규칙보다 높은 특이성) */
body.light-mode .testimonials-section .voices-place-card__cta--all:hover,
body.light-mode .testimonials-section .voices-place-card:hover .voices-place-card__cta--all {
    color: #ffffff !important;
    background: #047857 !important;
    border-color: #065f46 !important;
}

body.light-mode .testimonials-section .voices-place-card__naver {
    color: #ffffff !important;
}

body.light-mode .testimonials-section .voices-place-card__score-star,
body.light-mode .testimonials-section .voices-place-card__bar-lbl .star {
    color: #d97706 !important;
}