/* ==========================================
   Cheez About Page - Dark/Light Theme Toggle
   ========================================== */

/* ---------- 다크 테마 개선 (명시적 정의) ---------- */
html[data-theme="dark"],
html:not([data-theme]) {
    --primary: #f5d95c;
    --primary-hover: #F7E173;
    --primary-dark: #D5BD50;
    --bg-dark: #0c0c10;
    --bg-sidebar: #111116;
    --bg-surface: #16161d;
    --bg-card: #1c1c24;
    --bg-hover: #1e1e26;
    --border-color: rgba(255, 255, 255, 0.09);
    --border-light: rgba(255, 255, 255, 0.14);
    --text-white: #f2f2f4;
    --text-gray: #a8a8b0;
    --text-muted: #6c6c74;
}

/* 다크: 사이드바 네비 강조 */
html[data-theme="dark"] .nav-item:hover,
html:not([data-theme]) .nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .nav-item.active,
html:not([data-theme]) .nav-item.active {
    color: var(--primary);
    background: rgba(245, 217, 92, 0.12);
}

/* ---------- 라이트 테마 변수 ---------- */
html[data-theme="light"] {
    --primary: #C8AA27;
    --primary-hover: #A88B1A;
    --primary-dark: #A88B1A;

    --bg-dark: #f5f5f7;
    --bg-sidebar: #ffffff;
    --bg-surface: #ebebed;
    --bg-card: #ffffff;
    --bg-hover: #e5e5e7;

    --border-color: rgba(0, 0, 0, 0.08);
    --border-light: rgba(0, 0, 0, 0.12);

    --text-white: #1d1d1f;
    --text-gray: #6e6e73;
    --text-muted: #86868b;
}

/* 라이트: 사이드바 네비 액티브 */
html[data-theme="light"] .nav-item.active {
    background: rgba(184, 175, 29, 0.1);
}

/* 라이트 테마에서 모바일 헤더·오버레이 보정 */
html[data-theme="light"] .mobile-header {
    background: rgba(255, 255, 255, 0.92);
}
html[data-theme="light"] .sidebar-overlay {
    background: rgba(0, 0, 0, 0.4);
}

/* CTA 버튼 텍스트 색 (라이트에서도 대비 유지) */
html[data-theme="light"] .sidebar-cta,
html[data-theme="light"] .mobile-cta {
    color: #1d1d1f;
}

/* ---------- 테마 토글: 사이드바 ---------- */
.theme-toggle-wrap {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.theme-toggle-label {
    font-size: 13px;
    color: var(--text-gray);
}
.theme-toggle {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: 2px solid var(--border-light);
    background: var(--bg-surface);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.theme-toggle .theme-toggle-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray);
    transition: color 0.2s ease;
}
.theme-toggle .theme-toggle-icon svg {
    width: 16px;
    height: 16px;
}
/* 다크 테마: 달 아이콘만 표시 */
html[data-theme="dark"] .theme-toggle .theme-icon-light,
html:not([data-theme]) .theme-toggle .theme-icon-light {
    display: none !important;
}
html[data-theme="dark"] .theme-toggle .theme-icon-dark,
html:not([data-theme]) .theme-toggle .theme-icon-dark {
    display: flex !important;
}
/* 라이트 테마: 해 아이콘만 표시 */
html[data-theme="light"] .theme-toggle .theme-icon-dark {
    display: none !important;
}
html[data-theme="light"] .theme-toggle .theme-icon-light {
    display: flex !important;
}

/* ---------- 테마 토글: 모바일 헤더 ---------- */
.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.theme-toggle-mobile {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: transparent;
    color: var(--text-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}
.theme-toggle-mobile:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
}
.theme-toggle-mobile:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.theme-toggle-mobile svg {
    width: 20px;
    height: 20px;
}
.theme-toggle-mobile .theme-icon-light {
    display: none !important;
}
.theme-toggle-mobile .theme-icon-dark {
    display: block !important;
}
html[data-theme="light"] .theme-toggle-mobile .theme-icon-dark {
    display: none !important;
}
html[data-theme="light"] .theme-toggle-mobile .theme-icon-light {
    display: block !important;
}

/* =======================================================
   라이트 테마: 치즈 특징 (section-intro) 전체 개선
   ======================================================= */

/* ── 섹션 헤더 ── */
html[data-theme="light"] .intro-header-warm {
    background: linear-gradient(160deg, rgba(184,175,29,0.07) 0%, rgba(184,175,29,0.02) 100%);
    border-bottom: 1px solid rgba(184,175,29,0.12);
}

/* ── core-hub 카드 배경 ── */
html[data-theme="light"] .core-hub {
    background: linear-gradient(135deg, rgba(184,175,29,0.07), rgba(184,175,29,0.02));
    border-color: rgba(184,175,29,0.22);
}

/* ── SVG: DNM 중앙 텍스트 ──
   버그: --bg-dark = #f5f5f7 (light)이라 노란 원 위에서 안 보임 → 진한 색으로 고정 */
html[data-theme="light"] .core-hub-heart-text {
    fill: #1d1d1f;
}

/* ── SVG: 중앙 원 테두리 ── */
html[data-theme="light"] .core-hub-heart {
    stroke: rgba(184,175,29,0.75);
}

/* ── SVG: User·AI endpoint 원 ── */
html[data-theme="light"] .core-hub-endpoint {
    fill: rgba(255,255,255,0.85);
    stroke: rgba(184,175,29,0.65);
}
html[data-theme="light"] .core-hub:hover .core-hub-endpoint {
    stroke: rgba(184,175,29,0.9);
    filter: drop-shadow(0 0 6px rgba(184,175,29,0.15));
}

/* ── SVG: 스포크 라인 (크림 배경에서 더 잘 보이도록) ── */
html[data-theme="light"] .core-hub-line {
    stroke: rgba(184,175,29,0.4);
}

/* ── SVG: 위성 노드 ── */
html[data-theme="light"] .core-hub-node {
    fill: rgba(184,175,29,0.18);
    stroke: #B8AF1D;
}

/* ── SVG: User↔DNM↔AI 연결선 ── */
html[data-theme="light"] .core-hub-connector {
    stroke: rgba(184,175,29,0.5);
}
html[data-theme="light"] .core-hub-connector-flow {
    stroke: rgba(184,175,29,0.62);
}

/* ── core-hub 가치 문구: primary가 #B8AF1D라 대비 충분 ✓ ── */

/* ── DNM 피처 카드 ── */
html[data-theme="light"] .dnm-feature {
    background: #ffffff;
    border-color: rgba(184,175,29,0.14);
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
html[data-theme="light"] .dnm-feature:hover {
    border-color: rgba(184,175,29,0.32);
    box-shadow: 0 3px 14px rgba(184,175,29,0.09);
}

/* ── dnm-hero 이미지 래퍼 (그림자 완화) ── */
html[data-theme="light"] .dnm-hero-image-wrap {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-color: rgba(184,175,29,0.2);
}
html[data-theme="light"] .dnm-hero-svg-wrap {
    background: rgba(184,175,29,0.04);
}

/* ── narrative-os 뱃지 ── */
html[data-theme="light"] .narrative-os-badge {
    background: linear-gradient(135deg, rgba(184,175,29,0.13), rgba(184,175,29,0.06));
    border-color: rgba(184,175,29,0.32);
}

/* ── narrative-os 다이어그램 박스 ── */
html[data-theme="light"] .narrative-os-diagram {
    background: linear-gradient(135deg, rgba(184,175,29,0.06), rgba(184,175,29,0.02));
    border-color: rgba(184,175,29,0.2);
}

/* ── narrative-os feature 카드 ── */
html[data-theme="light"] .narrative-os-feature {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
html[data-theme="light"] .narrative-os-feature:hover {
    border-color: rgba(184,175,29,0.28);
    box-shadow: 0 3px 14px rgba(184,175,29,0.08);
}

/* ── living-world-system 카드 ── */
html[data-theme="light"] .living-world-system {
    background: linear-gradient(135deg, rgba(184,175,29,0.06), rgba(184,175,29,0.02));
    border-color: rgba(184,175,29,0.2);
}
html[data-theme="light"] .living-world-system::before {
    background: radial-gradient(circle at 50% 0%, rgba(184,175,29,0.08), transparent 70%);
}

/* ── dnm-hero-card ── */
html[data-theme="light"] .dnm-hero-card {
    background: linear-gradient(135deg, rgba(184,175,29,0.06), rgba(184,175,29,0.02));
    border-color: rgba(184,175,29,0.2);
}

/* =======================================================
   라이트 테마: 히어로 섹션 피처 카드
   ======================================================= */
html[data-theme="light"] .hero-feature-card {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(184, 175, 29, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .hero-feature-card:hover {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(184, 175, 29, 0.4);
    box-shadow: 0 8px 32px rgba(184, 175, 29, 0.15);
}

/* =======================================================
   라이트 테마: living-world-feature 카드
   ======================================================= */
html[data-theme="light"] .living-world-feature {
    background: #ffffff;
    border-color: rgba(184, 175, 29, 0.18);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .living-world-feature:hover {
    border-color: rgba(184, 175, 29, 0.38);
    box-shadow: 0 8px 32px rgba(184, 175, 29, 0.12);
}
html[data-theme="light"] .living-world-feature-icon {
    background: linear-gradient(135deg, rgba(184, 175, 29, 0.14), rgba(184, 175, 29, 0.06));
    border-color: rgba(184, 175, 29, 0.3);
}
html[data-theme="light"] .living-world-feature-icon svg {
    color: #B8AF1D;
}

/* =======================================================
   라이트 테마: 운영 가이드(Cheez Party) 비교 테이블
   ======================================================= */
html[data-theme="light"] .jample-comparison-table-wrap {
    background: #ffffff;
}
html[data-theme="light"] .jample-comparison-table th,
html[data-theme="light"] .jample-comparison-table td {
    background: #ffffff;
}
html[data-theme="light"] .jample-th-category,
html[data-theme="light"] .jample-td-category {
    background: #f5f5f7;
    color: #1d1d1f;
}

/* =======================================================
   라이트 테마: 푸터 Cheez 로고 (화이트 PNG → 다크 보정)
   ======================================================= */
html[data-theme="light"] .footer-brand img {
    filter: brightness(0);
}