/* ═══════════════════════════════════════════════
           P60 Design Token System
           라이트 모드 기본값 (:root) — 다크는 오버라이드
           ═══════════════════════════════════════════════ */

        /* ── 오행(五行) 컬러 토큰 ── */
        :root {
            /* 木 Wood — Self */
            --element-wood:        #059669;
            --element-wood-mid:    #34D399;
            --element-wood-light:  #ECFDF5;

            /* 火 Fire — Love */
            --element-fire:        #E11D48;
            --element-fire-mid:    #FB7185;
            --element-fire-light:  #FFF1F2;

            /* 土 Earth — Career */
            --element-earth:       #D97706;
            --element-earth-mid:   #FCD34D;
            --element-earth-light: #FFFBEB;

            /* 金 Metal — Wealth */
            --element-metal:       #B45309;
            --element-metal-mid:   #F59E0B;
            --element-metal-light: #FEF9EE;

            /* 水 Water — Wellness */
            --element-water:       #0284C7;
            --element-water-mid:   #38BDF8;
            --element-water-light: #F0F9FF;

            /* Brand — P60 코드표 */
            --element-brand:       #7C3AED;
            --element-brand-mid:   #C084FC;
            --element-brand-light: #EDE9FE;

            /* Social — 木 계열 */
            --element-social:      #10B981;
            --element-social-mid:  #6EE7B7;
            --element-social-light:#D1FAE5;

            /* 카테고리 바 다크모드 subtle 배경 (오행별) */
            --element-wood-subtle:   rgba(5,   150, 105, 0.08);
            --element-fire-subtle:   rgba(225,  29,  72, 0.08);
            --element-earth-subtle:  rgba(217, 119,   6, 0.08);
            --element-metal-subtle:  rgba(180,  83,   9, 0.08);
            --element-water-subtle:  rgba(  2, 132, 199, 0.08);
            --element-brand-subtle:  rgba(124,  58, 237, 0.05);
        }

        /* ── 공통 (테마 무관) ── */
        :root {
            --gradient-primary:  linear-gradient(135deg, #7C3AED 0%, #C084FC 100%);
            --gradient-danger:   linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            --gradient-success:  linear-gradient(135deg, #10b981 0%, #059669 100%);
            --status-success:    #10b981;
            --status-warning:    #f59e0b;
            --status-danger:     #ef4444;
            --status-info:       #3b82f6;
            --primary-color:     #7C3AED;
            --secondary-color:   #E11D48;

            /* ── 디자인 결정 토큰 ── */
            --radius-sm:    4px;   /* Sharp — 버튼 내부 등 */
            --radius-card:  4px;   /* Sharp — 카드 */
            --radius-badge: 4px;   /* Sharp — 뱃지 */
            --radius-pill:  999px; /* 태그·칩만 */

            --shadow-card:  none;  /* Flat */
            --shadow-hover: 0 2px 12px rgba(0,0,0,0.08); /* 호버 시만 */
            --shadow-modal: 0 8px 32px rgba(0,0,0,0.15);

            /* 버튼 (Filled) */
            --btn-bg:       #000000;
            --btn-color:    #FFFFFF;
            --btn-border:   #000000;
        }

        /* ── ☀️ 라이트 모드 (기본값 = :root) ── */
        :root {
            --bg-base:          #F8F5EF;   /* 아이보리 — 한지 느낌 */
            --bg-card:          #FFFFFF;
            --bg-card-hover:    #FAFAF8;
            --bg-glass:         rgba(255, 255, 255, 0.92);
            --bg-dark:          #FFFFFF;

            --text-primary:     #000000;   /* 블랙 */
            --text-secondary:   #333333;   /* 소프트 블랙 */
            --text-muted:       #888888;   /* 미디엄 그레이 */

            --accent-primary:   #7C3AED;

            --border-light:        #EDE8E1;
            --border-glass:        rgba(0, 0, 0, 0.08);
            --border-glass-strong: rgba(0, 0, 0, 0.15);

            --navbar-bg:        rgba(248, 245, 239, 0.96);
            --navbar-border:    #EDE8E1;
        }

        /* ── 🌙 다크 모드 오버라이드 ── */
        [data-theme="dark"] {
            --bg-base:          #0D0D0D;   /* 퓨어 다크 */
            --bg-card:          #1A1A1A;
            --bg-card-hover:    #222222;
            --bg-glass:         rgba(13, 13, 13, 0.85);
            --bg-dark:          #0D0D0D;

            --text-primary:     #FFFFFF;
            --text-secondary:   #E5E5E5;
            --text-muted:       #888888;

            --accent-primary:   #C084FC;

            --border-light:        rgba(255, 255, 255, 0.10);
            --border-glass:        rgba(255, 255, 255, 0.08);
            --border-glass-strong: rgba(255, 255, 255, 0.15);

            --shadow-card:      none;
            --shadow-hover:     0 2px 12px rgba(0,0,0,0.30);

            --navbar-bg:        rgba(13, 13, 13, 0.96);
            --navbar-border:    rgba(255, 255, 255, 0.08);

            /* 버튼 다크모드 */
            --btn-bg:           #FFFFFF;
            --btn-color:        #000000;
            --btn-border:       #FFFFFF;
        }

        /* ☀️ 라이트모드 — 아이보리 배경 */
        html,
        html body {
            background-color: #F8F5EF;
        }
        html[data-theme="dark"],
        html[data-theme="dark"] body {
            background-color: #0D0D0D;
        }
        /* body 글로우 효과 완전 제거 */
        [data-theme="light"] body::before,
        [data-theme="light"] body::after {
            content: none !important;
            display: none !important;
            opacity: 0 !important;
        }
        /* ── UI 결과 페이지 전체: 다크 배경 일괄 override ── */
        /* wrap (최상위 래퍼) */
        [data-theme="light"] .cn-wrap,
        [data-theme="light"] .ft-wrap,
        [data-theme="light"] .ht-wrap,
        [data-theme="light"] .ld-wrap,
        [data-theme="light"] .sl-wrap,
        [data-theme="light"] .sm-wrap,
        [data-theme="light"] .sp-wrap,
        [data-theme="light"] .ss-wrap,
        [data-theme="light"] .sv-wrap,
        [data-theme="light"] .el-wrap,
        [data-theme="light"] .se-wrap,
        [data-theme="light"] .vs-wrap,
        [data-theme="light"] .rv-wrap,
        [data-theme="light"] .dh-wrap,
        [data-theme="light"] .dm-wrap,
        [data-theme="light"] .eb-wrap,
        [data-theme="light"] .gw-wrap,
        [data-theme="light"] .hm-wrap,
        [data-theme="light"] .nm-wrap,
        [data-theme="light"] .op-wrap,
        [data-theme="light"] .cp-wrap,
        [data-theme="light"] .ba-wrap,
        [data-theme="light"] .cm-wrap {
            background: #ffffff !important;
            color: #0a0a0a !important;
        }
        /* 16페이지 하부 공유 버튼 글씨 밝게 고정 */
        [data-theme="light"] .rv-share-btn,
        [data-theme="light"] .dm-share-btn,
        [data-theme="light"] .vs-share-btn,
        [data-theme="light"] .gw-share-btn,
        [data-theme="light"] .nm-share-btn,
        [data-theme="light"] .cp-share-btn,
        [data-theme="light"] .eb-share-btn,
        [data-theme="light"] .cm-btn.green,
        [data-theme="light"] .ba-btn.rose,
        [data-theme="light"] [class*="share-btn"] {
            color: #ffffff !important;
        }
        /* card / item 계열 */
        [data-theme="light"] .ft-card,
        [data-theme="light"] .ss-card,
        [data-theme="light"] .sm-card,
        [data-theme="light"] .sl-card,
        [data-theme="light"] .el-card,
        [data-theme="light"] .ft-summary-item,
        [data-theme="light"] .ft-workout-item,
        [data-theme="light"] .ft-ohaeng-row,
        [data-theme="light"] .ft-battle-item,
        [data-theme="light"] .ld-report-card,
        [data-theme="light"] .ld-vibe-card,
        [data-theme="light"] .ld-style-box,
        [data-theme="light"] .ld-mate-box,
        [data-theme="light"] .ld-cert-value,
        [data-theme="light"] .sl-summary-item,
        [data-theme="light"] .sl-timer-box,
        [data-theme="light"] .ss-breath-box,
        [data-theme="light"] .sv-talent-card,
        [data-theme="light"] .sv-mentor-box,
        [data-theme="light"] .sv-motto-box,
        [data-theme="light"] .sv-crisis-hint,
        [data-theme="light"] .sp-energy-box,
        [data-theme="light"] .sp-method-card,
        [data-theme="light"] .sp-mate-box,
        [data-theme="light"] .sp-warn-box,
        [data-theme="light"] .el-stat-box,
        [data-theme="light"] .el-strategy-card,
        [data-theme="light"] .el-plan-item {
            background: #f8fafc !important;
            color: #0a0a0a !important;
            border-color: rgba(0,0,0,0.10) !important;
        }
        [data-theme="light"] .en-category-item { color: #5b21b6; }
        [data-theme="light"] .en-category-item:hover { color: #7c3aed; }
        [data-theme="light"] .warning-box { color: #92400e; background: rgba(251,146,60,0.12); }
        [data-theme="light"] .saju-popup-container { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); color: var(--text-primary); }
        [data-theme="light"] .saju-popup-content { color: var(--text-secondary); }
        [data-theme="light"] select option { background: #ffffff; color: #0a0a0a; }

        /* 🎴 라이트모드 슬라이더 / 카드뉴스 / 리스트 / 아코디언 */
        [data-theme="light"] .slider-dot { background: #a0a0a0; }
        [data-theme="light"] .slider-dot.active { background: var(--theme-primary, #8c2bee); }
        [data-theme="light"] .slider-prev,
        [data-theme="light"] .slider-next {
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.15);
            color: #1a1a1a;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        [data-theme="light"] .slider-prev:hover,
        [data-theme="light"] .slider-next:hover {
            background: #f1f5f9;
        }
        [data-theme="light"] .compact-menu-section-title { color: #0a0a0a; border-bottom-color: rgba(140, 43, 238, 0.25); }
        [data-theme="light"] .list-item-title { color: #0a0a0a; }
        [data-theme="light"] .list-item-arrow { color: #444444; }
        [data-theme="light"] .list-item {
            border-bottom-color: rgba(0,0,0,0.08);
        }
        [data-theme="light"] .list-view-section {
            background: #ffffff;
            border: 1px solid rgba(140,43,238,0.1);
        }
        [data-theme="light"] .accordion-section {
            background: #ffffff;
            border: 1px solid rgba(140,43,238,0.1);
        }
        [data-theme="light"] .accordion-item {
            border-bottom-color: rgba(0,0,0,0.08);
        }
        [data-theme="light"] .accordion-menu-item { color: #1a1a1a; }
        [data-theme="light"] .accordion-menu-item:hover { color: var(--theme-primary, #8c2bee); }

        /* 🪪 라이트모드 일주페르소나 / 섹션타이틀 흰색→블랙 */
        [data-theme="light"] .section-title { color: var(--theme-primary, #8c2bee); }
        [data-theme="light"] .persona-ilju-name { color: #0a0a0a; }
        [data-theme="light"] .lifestyle-title { color: #0a0a0a; }
        [data-theme="light"] .catchphrase-text { color: #1a1a1a; }
        [data-theme="light"] .lifestyle-text { color: #1a1a1a; }

        /* 🔘 테마 토글 버튼 */
        .theme-toggle-btn {
            background: var(--bg-card);
            border: 1px solid var(--border-glass);
            border-radius: 20px;
            padding: 5px 10px;
            font-size: 16px;
            cursor: pointer;
            line-height: 1;
            transition: background 0.2s, border-color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .theme-toggle-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }

        /* 📦 공통 카드 컨테이너 */
        .p60-card {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-card);
            padding: 16px;
            margin-bottom: 20px;
            box-shadow: var(--shadow-card);
            backdrop-filter: blur(10px);
            color: var(--text-secondary);
        }

        .p60-card-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 🏷️ 공통 뱃지 (태그) */
        .p60-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 10px;
            border-radius: var(--radius-badge);
            font-size: 16px;
            font-weight: 600;
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }
        .p60-badge.success { color: var(--status-success); background: rgba(16, 185, 129, 0.15); }
        .p60-badge.warning { color: var(--status-warning); background: rgba(245, 158, 11, 0.15); }
        .p60-badge.danger { color: var(--status-danger); background: rgba(239, 68, 68, 0.15); }
        .p60-badge.info { color: var(--status-info); background: rgba(59, 130, 246, 0.15); }

        /* � 공통 버튼 */
        .p60-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 24px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #8b5cf6, #c084fc);
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
            font-family: inherit;
        }
        .p60-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4); }
        .p60-btn:active { transform: translateY(0); }

        /* �📊 공통 프로그레스 바 (게이지) */
        .p60-progress-wrap { margin-bottom: 15px; }
        .p60-progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 16px;
            color: var(--text-primary);
        }
        .p60-progress-bg {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            height: 10px;
            overflow: hidden;
        }
        .p60-progress-bar {
            height: 100%;
            border-radius: 10px;
            transition: width 0.5s ease;
        }

        html {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            touch-action: manipulation; /* 더블탭 줌 방지 (iOS/Android) */
        }

        /* 스크롤이 필요한 요소는 touch-action 복원 */
        body, .tab-content, .side-menu, [style*="overflow"] {
            touch-action: pan-x pan-y pinch-zoom;
        }

        @keyframes drift {
            from { transform: rotate(0deg) translate(10%, 10%) rotate(0deg); }
            to { transform: rotate(360deg) translate(10%, 10%) rotate(-360deg); }
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        /* ✅ 규칙 1: 단일 폰트 전역 강제 적용 */
        *, *::before, *::after {
            font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
        }

        body {
            font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
            font-size: 16px; /* 🔤 전역 기본 폰트: 본문 16px */
            background: var(--bg-base);
            min-height: 100vh;
            min-height: 100svh; /* 모바일 주소창 hide 시 리사이즈 방지 */
            padding: 0;
            padding-top: 94px; /* navbar(54px) + 카테고리바(40px) */
            overflow-x: hidden;
            color: var(--text-secondary);
            position: relative;
            -webkit-tap-highlight-color: transparent; /* 탭 시 파란 하이라이트 제거 */
        }

        body::before {
            content: '';
            position: fixed;
            top: -10%;
            left: -10%;
            width: 70%;
            height: 70%;
            background: rgba(124, 58, 237, 0.1);
            filter: blur(120px);
            border-radius: 50%;
            animation: drift 25s linear infinite;
            pointer-events: none;
            z-index: 0;
        }

        body::after {
            content: '';
            position: fixed;
            bottom: -10%;
            right: -10%;
            width: 70%;
            height: 70%;
            background: rgba(99, 102, 241, 0.1);
            filter: blur(120px);
            border-radius: 50%;
            animation: drift 40s linear infinite reverse;
            pointer-events: none;
            z-index: 0;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            background: transparent;
            overflow: visible;
            border: none;
            position: relative;
            z-index: 1;
            padding-top: 0;
            padding-left: 4px;
            padding-right: 4px;
        }

        /* Header */
        header {
            background: transparent;
            color: white;
            padding: 6px 16px 4px;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        header h1 {
            font-size: 24px;
            margin-bottom: 2px;
            font-weight: 700;
            background: linear-gradient(135deg, #C2410C 0%, #D97706 55%, #F59E0B 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        header p {
            font-size: 16px;
            opacity: 0.8;
            font-weight: 500;
            color: var(--text-secondary);
            margin: 0;
        }

        /* Navigation Tabs - 완전히 숨김 */
        /* Content Area */
        .content {
            padding: 20px 0 40px;
            background: transparent;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
            animation: fadeIn 0.4s;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Lazy Loading Placeholder */
        .p60-lazy-placeholder {
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 16px;
        }
        .p60-lazy-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid #334155;
            border-top-color: #818cf8;
            border-radius: 50%;
            animation: p60LazySpin 0.8s linear infinite;
        }
        .p60-lazy-text {
            color: #64748b;
            font-size: 14px;
            margin: 0;
        }
        @keyframes p60LazySpin {
            to { transform: rotate(360deg); }
        }
        .p60-page-loading-text {
            color: #94a3b8;
            font-size: 15px;
            font-weight: 600;
            margin: 0;
            animation: p60LoadingBlink 1.2s ease-in-out infinite;
        }
        @keyframes p60LoadingBlink {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.25; }
        }

        /* Form Styles */
        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 10px;
            color: var(--text-primary);
            font-weight: 600;
            font-size: 16px;
        }

        select, input[type="text"], input[type="date"], input[type="number"] {
            width: 100%;
            padding: 14px 18px;
            border: 1px solid var(--border-glass);
            border-radius: 20px;
            font-size: 16px;
            background: var(--bg-card);
            color: var(--text-primary);
            transition: all 0.3s;
            font-family: 'Noto Sans KR', sans-serif;
        }

        select:focus, input:focus {
            outline: none;
            border-color: rgba(192, 132, 252, 0.4);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.1);
        }

        select option {
            background: var(--bg-base);
            color: var(--text-primary);
        }

        .date-inputs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
        }

        .checkbox-group input[type="checkbox"] {
            width: 22px;
            height: 22px;
            cursor: pointer;
            accent-color: #8c2bee;
        }

        /* Gradient Button */
        .btn {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #8b5cf6 0%, #c084fc 100%);
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
            font-family: 'Noto Sans KR', sans-serif;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
        }

        .btn:active {
            transform: translateY(-1px) scale(0.98);
        }

        /* Home Button */
        .btn-home {
            padding: 16px 40px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%);
            color: #ffffff;
            border: 2px solid rgba(99, 102, 241, 0.6);
            border-radius: 25px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
            font-family: 'Noto Sans KR', sans-serif;
            backdrop-filter: blur(10px);
        }

        .btn-home:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(99, 102, 241, 0.5);
            background: linear-gradient(135deg, rgba(59, 130, 246, 1) 0%, rgba(99, 102, 241, 1) 100%);
            border-color: rgba(99, 102, 241, 0.8);
            color: #ffffff;
        }

        .btn-home:active {
            transform: translateY(-1px) scale(0.98);
        }

        /* Info/Warning Boxes */
        .info-box {
            background: rgba(59, 130, 246, 0.1);
            border-left: 4px solid #3b82f6;
            padding: 20px;
            margin-bottom: 25px;
            border-radius: 20px;
            line-height: 1.8;
            border: 1px solid rgba(59, 130, 246, 0.2);
            color: var(--text-secondary);
        }

        .hero-info-box {
            background: rgba(139, 92, 246, 0.05);
            border: 1px solid rgba(192, 132, 252, 0.2);
            padding: 15px 20px;
            margin-bottom: 10px;
            border-radius: 20px;
            text-align: center;
            position: relative;
            overflow: visible;
        }

        .hero-circle {
            position: relative;
            width: 130px;
            height: 130px;
            margin: 0 auto 10px;
            border-radius: 50%;
            border: 3px solid rgba(192, 132, 252, 0.3);
            background: rgba(139, 92, 246, 0.1);
            backdrop-filter: blur(20px);
            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            animation: floatCircle 3s ease-in-out infinite;
        }

        @keyframes floatCircle {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .hero-circle::before {
            content: '';
            position: absolute;
            inset: -20px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
            z-index: -1;
            animation: pulse 3s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        @keyframes glow {
            0%, 100% { box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3); }
            50% { box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6); }
        }

        @keyframes prismShine {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        @keyframes prismRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 200%; }
        }

        @keyframes prizmGlow {
            0%, 100% { box-shadow: 0 0 0 2px rgba(20,184,166,0.4), 0 12px 40px rgba(13,148,136,0.55), inset 0 1px 0 rgba(255,255,255,0.12); }
            50% { box-shadow: 0 0 0 2px rgba(52,211,153,0.6), 0 18px 60px rgba(20,184,166,0.7), inset 0 1px 0 rgba(255,255,255,0.2); }
        }

        @keyframes fadeInOut {
            0% { opacity: 0; }
            5% { opacity: 1; }
            95% { opacity: 1; }
            100% { opacity: 0; }
        }

        .hero-emoji {
            font-size: 36px;
            margin-bottom: 5px;
            display: block;
        }

        .hero-label {
            font-size: 16px;
            color: #c084fc;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .hero-badge {
            position: absolute;
            top: 12px;
            right: calc(50% - 80px);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(192, 132, 252, 0.2);
            border: 2px solid rgba(192, 132, 252, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 20px rgba(139, 92, 246, 0.3);
            font-size: 16px;
            animation: bounce 2s ease-in-out infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        .hero-text {
            font-size: 16px;
            line-height: 1.6;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .warning-box {
            background: rgba(251, 146, 60, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(251, 146, 60, 0.3);
            border-left: 4px solid #fb923c;
            padding: 18px;
            margin-bottom: 15px;
            border-radius: 20px;
            line-height: 1.9;
            box-shadow: 0 8px 25px rgba(251, 146, 60, 0.15);
            color: #fcd34d;
        }

        /* Result Display */
        .result-section {
            margin-top: 30px;
            padding: 30px 4px;
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            border: 1px solid var(--border-glass);
            display: none;
            animation: slideIn 0.5s;
        }

        .result-section.show {
            display: block;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* P60 Personal Code Card Styles */
        .p60-card {
            transition: all 0.3s ease;
        }

        .p60-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.2) !important;
            border-color: #1976D2 !important;
        }

        .result-title {
            font-size: 24px;
            color: #c084fc;
            margin-bottom: 20px;
            font-weight: 700;
        }

        .result-content {
            line-height: 1.8;
            color: var(--text-secondary);
        }

        /* 결과 페이지 카드 스타일 */
        .result-card {
            background: var(--bg-card);
            border: 1px solid var(--border-glass);
            border-radius: 30px;
            padding: 25px;
            margin-bottom: 20px;
            transition: all 0.3s;
        }

        .result-card:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(192, 132, 252, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15);
        }

        .result-card h3, .result-card h4 {
            color: #c084fc;
            margin-top: 0;
        }

        /* 그라데이션 카드 */
        .gradient-card {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(192, 132, 252, 0.1) 100%);
            border: 1px solid rgba(192, 132, 252, 0.3);
            border-radius: 25px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
        }

        /* 인포 박스 */
        .info-card {
            background: rgba(59, 130, 246, 0.08);
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-left: 4px solid #3b82f6;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
        }

        /* 경고 카드 */
        .warning-card {
            background: rgba(251, 146, 60, 0.08);
            border: 1px solid rgba(251, 146, 60, 0.2);
            border-left: 4px solid #fb923c;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
        }

        /* 성공/긍정 카드 */
        .success-card {
            background: rgba(34, 197, 94, 0.08);
            border: 1px solid rgba(34, 197, 94, 0.2);
            border-left: 4px solid #22c55e;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
        }

        /* 그리드 레이아웃 */
        .result-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        /* 섹션 헤더 */
        .section-header {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(192, 132, 252, 0.3);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 데이터 라벨 */
        .data-label {
            color: var(--text-muted);
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .data-value {
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 600;
        }

        /* 하이라이트 텍스트 */
        .highlight-text {
            background: linear-gradient(135deg, #c084fc 0%, #e879f9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }

        footer {
            text-align: center;
            padding: 30px 20px;
            color: var(--text-muted);
            font-size: 16px;
            opacity: 0.8;
            background: transparent;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            body {
                padding: 0;
                padding-top: 94px; /* navbar(54px) + 카테고리바(40px) */
            }

            .en-category-bar {
                height: 40px;
            }

            .en-category-container {
                padding: 0 12px;
                gap: 6px;
            }

            .en-category-item {
                padding: 4px 10px;
                font-size: 16px;
            }

            .container {
                padding-left: 4px;
                padding-right: 4px;
            }

            header {
                padding: 6px 16px 4px;
            }

            header h1 {
                font-size: 30px;
            }

            .nav-tab {
                padding: 15px 10px;
                font-size: 16px;
            }

            .content {
                padding: 16px 0;
            }

            .date-inputs {
                grid-template-columns: 1fr;
            }

            .btn {
                padding: 15px;
                font-size: 16px;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 0;
                padding-top: 94px;
            }

            .en-category-bar {
                height: 40px;
            }

            .en-category-container {
                padding: 0 8px;
                gap: 6px;
            }

            .en-category-item {
                padding: 3px 8px;
                font-size: 16px;
            }

            .en-category-icon {
                font-size: 16px;
            }

            header h1 {
                font-size: 24px;
            }

            header p {
                font-size: 16px;
            }

            .nav-tab {
                padding: 12px 8px;
                font-size: 16px;
            }

            .content {
                padding: 12px 0;
            }

            .container {
                padding-left: 4px;
                padding-right: 4px;
            }

            .p60-card {
                padding: 14px 12px;
            }
            .p60-card-title {
                font-size: 16px;
            }

            select, input[type="text"], input[type="date"], input[type="number"] {
                padding: 12px 15px;
                font-size: 16px;
            }
        }

        /* ====================================================
           스마트폰 최적화: JS innerHTML로 생성된 인라인 스타일 오버라이드
           UI 파일들은 px 단위 + minmax 그리드를 실제로 사용함
           ==================================================== */

        /* ── 768px 이하: 태블릿/큰 폰 ─────────────────────── */
        @media (max-width: 768px) {
            /* 최대 너비 컨테이너 → 전체 너비 */
            [style*="max-width: 1200px"],
            [style*="max-width: 1000px"],
            [style*="max-width: 900px"],
            [style*="max-width: 800px"] {
                max-width: 100% !important;
            }

            /* minmax 그리드 (auto-fit) → 최소 너비 축소 */
            [style*="minmax(250px"] {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
            }
            [style*="minmax(200px"] {
                grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
            }

            /* 3열/4열 명시 그리드 → 2열 */
            [style*="grid-template-columns: repeat(3"],
            [style*="grid-template-columns: repeat(4"],
            [style*="grid-template-columns: 1fr 1fr 1fr"] {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            /* 대형 px 폰트 (28px+) 축소 */
            [style*="font-size: 32px"],
            [style*="font-size: 36px"],
            [style*="font-size: 40px"],
            [style*="font-size: 48px"] {
                font-size: 20px !important;
            }
            [style*="font-size: 28px"] { font-size: 20px !important; }
            [style*="font-size: 24px"] { font-size: 16px !important; }

            /* 60px+ 아이콘/이모지 축소 */
            [style*="font-size: 45px"],  [style*="font-size: 53px"],
            [style*="font-size: 60px"],  [style*="font-size: 75px"] {
                font-size: 30px !important;
            }
            [style*="font-size: 38px"],
            [style*="font-size: 33px"],
            [style*="font-size: 30px"] {
                font-size: 20px !important;
            }
        }

        /* ── 480px 이하: 스마트폰 세로 화면 ─────────────────── */
        @media (max-width: 480px) {
            /* 최대 너비 전체 해제 */
            [style*="max-width: 1200px"],
            [style*="max-width: 1000px"],
            [style*="max-width: 900px"],
            [style*="max-width: 800px"],
            [style*="max-width: 700px"] {
                max-width: 100% !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            /* minmax 그리드 → 1열 강제 */
            [style*="minmax(250px"],
            [style*="minmax(200px"],
            [style*="minmax(180px"],
            [style*="minmax(150px"] {
                grid-template-columns: 1fr !important;
            }

            /* 명시 2열+ 그리드 → 1열 */
            [style*="grid-template-columns: repeat(2"],
            [style*="grid-template-columns: repeat(3"],
            [style*="grid-template-columns: repeat(4"],
            [style*="grid-template-columns: 1fr 1fr"],
            [style*="grid-template-columns: 1fr 1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }

            /* ── px 단위 폰트 축소 (실제 UI 파일 사용값) ── */
            [style*="font-size: 75px"],
            [style*="font-size: 60px"],
            [style*="font-size: 53px"],
            [style*="font-size: 45px"] { font-size: 24px !important; }

            [style*="font-size: 48px"],
            [style*="font-size: 42px"],
            [style*="font-size: 40px"],
            [style*="font-size: 38px"],
            [style*="font-size: 36px"],
            [style*="font-size: 33px"],
            [style*="font-size: 32px"] { font-size: 20px !important; }

            [style*="font-size: 30px"],
            [style*="font-size: 29px"],
            [style*="font-size: 24px"] { font-size: 20px !important; }
            [style*="font-size: 28px"] { font-size: 16px !important; }
            [style*="font-size: 24px"],
            [style*="font-size: 24px"],
            [style*="font-size: 24px"] { font-size: 16px !important; }
            [style*="font-size: 20px"],
            [style*="font-size: 20px"] { font-size: 16px !important; }
            [style*="font-size: 20px"],
            [style*="font-size: 20px"],
            [style*="font-size: 16px"] { font-size: 16px !important; }

            /* ── 패딩 축소 ── */
            [style*="padding: 40px"]   { padding: 14px !important; }
            [style*="padding: 30px"]   { padding: 14px !important; }
            [style*="padding: 25px"]   { padding: 12px !important; }
            [style*="padding: 20px"]   { padding: 10px !important; }

            /* ── flex 줄바꿈 강제 (가로 스크롤 방지) ── */
            [style*="display: flex"] { flex-wrap: wrap !important; }

            /* ── 최소 너비 제한 해제 ── */
            [style*="min-width: 200px"],
            [style*="min-width: 250px"],
            [style*="min-width: 300px"] {
                min-width: 0 !important;
                width: 100% !important;
            }

            /* ── 버튼 풀 너비 ── */
            [style*="padding: 16px 40px"],
            [style*="padding: 15px 40px"] {
                padding: 13px 16px !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
        }

        /* ── 375px 이하: 소형 폰 (SE, 갤럭시 A 등) ──────────── */
        @media (max-width: 375px) {
            /* 기준 폰트 축소 → em 기반 요소 자동 감소 */
            .content, #saju, #hexagram, #daeun, #about {
                font-size: 16px;
            }

            [style*="font-size: 16px"],
            [style*="font-size: 20px"] { font-size: 16px !important; }

            [style*="font-size: 16px"],
            [style*="font-size: 16px"] { font-size: 16px !important; }

            [style*="font-size: 24px"]  { font-size: 16px !important; }
            [style*="font-size: 24px"],
            [style*="font-size: 30px"]  { font-size: 16px !important; }
        }

        /* 마법 효과 스타일 */
        .magic-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.98));
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        .magic-card {
            position: relative;
            width: 300px;
            height: 400px;
            perspective: 1000px;
        }

        .magic-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: flipCard 2s ease-in-out;
        }

        @keyframes flipCard {
            0% { transform: rotateY(0deg) scale(0.8); }
            50% { transform: rotateY(180deg) scale(1.1); }
            100% { transform: rotateY(360deg) scale(1); }
        }

        .magic-card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }

        .magic-card-front {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .magic-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            pointer-events: none;
            animation: particleFloat 2s ease-out forwards;
            box-shadow: 0 0 10px white, 0 0 20px rgba(255,255,255,0.5);
        }

        @keyframes particleFloat {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(var(--tx), var(--ty)) scale(0);
                opacity: 0;
            }
        }

        .magic-text {
            font-size: 24px;
            font-weight: bold;
            color: white;
            text-shadow: 0 0 20px rgba(255,255,255,0.8);
            animation: pulse 1.5s ease-in-out infinite;
        }

        .fortune-symbol {
            font-size: 75px;
            margin-bottom: 20px;
            animation: symbolGlow 2s ease-in-out infinite;
        }

        @keyframes symbolGlow {
            0%, 100% { 
                filter: drop-shadow(0 0 10px rgba(255,215,0,0.8));
                transform: scale(1);
            }
            50% { 
                filter: drop-shadow(0 0 30px rgba(255,215,0,1)) drop-shadow(0 0 50px rgba(255,215,0,0.6));
                transform: scale(1.1);
            }
        }

        /* 회전하는 별 효과 */
        .rotating-star {
            position: absolute;
            font-size: 30px;
            color: #FFD700;
            text-shadow: 0 0 20px rgba(255,215,0,1), 0 0 40px rgba(255,215,0,0.6);
            animation: rotateStar 8s linear infinite;
            transform-origin: center;
            left: 50%;
            top: 50%;
            margin-left: -0.5em;
            margin-top: -0.5em;
        }

        @keyframes rotateStar {
            0% {
                transform: rotate(var(--rotation)) translateX(200px) rotate(calc(-1 * var(--rotation)));
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: rotate(calc(var(--rotation) + 360deg)) translateX(200px) rotate(calc(-1 * (var(--rotation) + 360deg)));
                opacity: 0;
            }
        }

        /* 광채 링 효과 */
        .magic-ring {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            margin-left: -50px;
            margin-top: -50px;
            border: 3px solid rgba(255,215,0,0.8);
            border-radius: 50%;
            animation: expandRing 2s ease-out forwards;
        }

        @keyframes expandRing {
            0% {
                width: 100px;
                height: 100px;
                margin-left: -50px;
                margin-top: -50px;
                opacity: 1;
                box-shadow: 0 0 20px rgba(255,215,0,0.8), inset 0 0 20px rgba(255,215,0,0.6);
            }
            100% {
                width: 500px;
                height: 500px;
                margin-left: -250px;
                margin-top: -250px;
                opacity: 0;
                box-shadow: 0 0 50px rgba(255,215,0,0.3), inset 0 0 50px rgba(255,215,0,0.2);
            }
        }

        /* Position Analysis Styles */
        .position-analysis-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }

        .leadership-score-card {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 146, 60, 0.05) 100%);
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 25px;
            padding: 30px;
            margin-bottom: 25px;
            box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
        }

        .lq-main-score {
            display: flex;
            align-items: baseline;
            justify-content: center;
            margin-bottom: 25px;
        }

        .lq-score-number {
            font-size: 75px;
            font-weight: 800;
            background: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1;
        }

        .lq-score-label {
            font-size: 24px;
            color: #94a3b8;
            margin-left: 10px;
        }

        .lq-breakdown {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .lq-factor {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
        }

        .lq-factor-label {
            font-size: 16px;
            color: #94a3b8;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .lq-factor-score {
            font-size: 38px;
            font-weight: 700;
            color: #fbbf24;
            margin-bottom: 5px;
        }

        .lq-factor-name {
            font-size: 16px;
            color: #cbd5e1;
        }

        .sipsin-distribution {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 25px;
            padding: 30px;
            margin-bottom: 25px;
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
        }

        .sipsin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .sipsin-item {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px 15px;
            text-align: center;
            transition: all 0.3s;
        }

        .sipsin-item:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(99, 102, 241, 0.2);
        }

        .sipsin-name {
            color: #cbd5e1;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .sipsin-count {
            font-size: 30px;
            font-weight: 700;
            color: #a5b4fc;
            margin: 10px 0;
        }

        .position-list-card {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(244, 114, 182, 0.05) 100%);
            border: 1px solid rgba(236, 72, 153, 0.3);
            border-radius: 25px;
            padding: 30px;
            margin-bottom: 25px;
            box-shadow: 0 8px 25px rgba(236, 72, 153, 0.15);
        }

        .position-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }

        .position-tag {
            background: rgba(236, 72, 153, 0.15);
            border: 1px solid rgba(236, 72, 153, 0.3);
            border-radius: 20px;
            padding: 12px 24px;
            color: #fbbf24;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s;
        }

        .position-tag:hover {
            background: rgba(236, 72, 153, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(236, 72, 153, 0.2);
        }

        /* Position Hero Card - 강조된 포지션 표시 */
        .position-hero-card {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%);
            border: 2px solid rgba(251, 191, 36, 0.4);
            border-radius: 30px;
            padding: 50px 30px;
            margin-bottom: 35px;
            box-shadow: 0 15px 40px rgba(251, 191, 36, 0.25);
            position: relative;
            overflow: hidden;
        }

        .position-hero-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
            animation: rotateGlow 20s linear infinite;
        }

        @keyframes rotateGlow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .position-hero-badge {
            position: relative;
            width: 140px;
            height: 140px;
            margin: 0 auto 30px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
            border: 3px solid rgba(251, 191, 36, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3), inset 0 0 20px rgba(251, 191, 36, 0.1);
            animation: floatBadge 3s ease-in-out infinite;
        }

        @keyframes floatBadge {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-10px) scale(1.05); }
        }

        .position-hero-badge::before {
            content: '';
            position: absolute;
            inset: -15px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(251, 191, 36, 0.2), transparent 60%);
            animation: pulse 2s ease-in-out infinite;
        }

        .position-hero-emoji {
            font-size: 75px;
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 5px 15px rgba(251, 191, 36, 0.4));
        }

        .position-tags-hero {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            position: relative;
            z-index: 1;
        }

        .position-tag-hero {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
            border: 2px solid rgba(251, 191, 36, 0.4);
            border-radius: 25px;
            padding: 15px 30px;
            color: #fde047;
            font-weight: 700;
            font-size: 16px;
            transition: all 0.3s;
            box-shadow: 0 5px 20px rgba(251, 191, 36, 0.2);
            position: relative;
            overflow: hidden;
        }

        .position-tag-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .position-tag-hero:hover {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(236, 72, 153, 0.3) 100%);
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 10px 30px rgba(251, 191, 36, 0.35);
            border-color: rgba(251, 191, 36, 0.6);
        }

        .position-tag-hero:hover::before {
            left: 100%;
        }

        .strategy-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            padding: 30px;
            margin-bottom: 25px;
        }

        .strategy-section {
            margin-bottom: 25px;
        }

        .strategy-icon {
            font-size: 45px;
            text-align: center;
            margin-bottom: 15px;
        }

        .strategy-title {
            font-size: 20px;
            color: #c084fc;
            font-weight: 700;
            text-align: center;
            margin-bottom: 15px;
        }

        .strategy-content {
            color: #cbd5e1;
            line-height: 1.8;
            text-align: center;
        }

        .warning-box {
            background: rgba(251, 146, 60, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(251, 146, 60, 0.3);
            border-left: 4px solid #fb923c;
            padding: 22px;
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(251, 146, 60, 0.15);
        }

        .warning-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            color: #fbbf24;
            margin-bottom: 10px;
            font-size: 16px;
        }

        .timing-card {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(192, 132, 252, 0.05) 100%);
            border: 1px solid rgba(168, 85, 247, 0.3);
            border-radius: 25px;
            padding: 30px;
            margin-bottom: 25px;
            box-shadow: 0 8px 25px rgba(168, 85, 247, 0.15);
        }

        .timing-phase {
            font-size: 20px;
            color: #c4b5fd;
            font-weight: 700;
            padding: 12px 24px;
            background: rgba(168, 85, 247, 0.15);
            border-radius: 20px;
            display: inline-block;
        }

        .action-plan-card {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(74, 222, 128, 0.05) 100%);
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-radius: 25px;
            padding: 30px;
            margin-bottom: 25px;
            box-shadow: 0 8px 25px rgba(34, 197, 94, 0.15);
        }

        .action-items {
            display: grid;
            gap: 15px;
        }

        .action-item {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            transition: all 0.3s;
        }

        .action-item:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(5px);
            border-color: rgba(34, 197, 94, 0.3);
        }

        .action-item-title {
            font-size: 16px;
            color: #4ade80;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .action-item-content {
            color: #cbd5e1;
            line-height: 1.6;
        }

        @media (max-width: 768px) {
            .lq-breakdown {
                grid-template-columns: 1fr;
            }

            .sipsin-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .position-tags {
                flex-direction: column;
            }

            .position-tag {
                text-align: center;
            }

            .position-tags-hero {
                flex-direction: column;
            }

            .position-tag-hero {
                text-align: center;
            }

            .position-hero-badge {
                width: 120px;
                height: 120px;
            }

            .position-hero-emoji {
                font-size: 60px;
            }

            .position-hero-card {
                padding: 40px 20px;
            }

            .btn-home {
                width: 100%;
                padding: 14px 20px;
                font-size: 16px;
            }
        }

        /* ========== 상단 고정 네비게이션 바 ========== */
        .fixed-navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 54px;
            background: var(--navbar-bg);
            backdrop-filter: blur(20px);
            border-bottom: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            z-index: 10000;
            box-shadow: none;
        }

        /* 왼쪽: 햄버거 메뉴 */
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .hamburger-menu {
            width: 38px;
            height: 38px;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .hamburger-menu:hover {
            background: rgba(139, 92, 246, 0.2);
            border-color: rgba(139, 92, 246, 0.5);
            transform: scale(1.05);
        }

        .hamburger-menu span {
            display: block;
            width: 22px;
            height: 2.5px;
            background: linear-gradient(90deg, #8b5cf6, #c084fc);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .hamburger-menu:hover span {
            background: linear-gradient(90deg, #a855f7, #e879f9);
        }

        /* 가운데: 로고 영역 (선택적) */
        .navbar-center {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .navbar-logo {
            font-size: 20px;
            font-weight: 700;
            background: linear-gradient(135deg, #c084fc 0%, #e879f9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* 오른쪽: 버튼 그룹 */
        .navbar-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 코드정보 표시 영역 */
        .navbar-code-info {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0;
            padding: 0 8px;
            height: 34px;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 15px;
            min-width: 0;
            max-width: 110px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .navbar-code-info:hover {
            background: rgba(139, 92, 246, 0.2);
            border-color: rgba(139, 92, 246, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
        }

        .navbar-code-p60 {
            font-size: 16px;
            font-weight: 700;
            color: #c084fc;
            font-family: 'Noto Sans KR', sans-serif;
            letter-spacing: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 90px;
        }

        .navbar-code-saju {
            display: none; /* 사주 간지 제거 */
        }

        .navbar-code-empty {
            font-size: 16px;
            color: #64748b;
            font-style: italic;
            white-space: nowrap;
        }

        .navbar-btn {
            padding: 0 12px;
            height: 34px;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 20px;
            color: #c084fc;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            font-family: 'Noto Sans KR', sans-serif;
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
        }

        .navbar-btn:hover {
            background: rgba(139, 92, 246, 0.2);
            border-color: rgba(139, 92, 246, 0.5);
            color: #e879f9;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
        }

        .navbar-btn:active {
            transform: translateY(0);
        }

        /* 마스터키 충전 버튼 – 골드 포인트 강조 */
        .navbar-masterkey-btn {
            background: linear-gradient(135deg, rgba(120,60,220,0.25), rgba(200,160,60,0.18)) !important;
            border-color: rgba(212,175,55,0.5) !important;
            color: #f0c040 !important;
            font-weight: 700 !important;
        }
        .navbar-masterkey-btn:hover {
            background: linear-gradient(135deg, rgba(139,92,246,0.35), rgba(212,175,55,0.30)) !important;
            border-color: #d4af37 !important;
            color: #ffe066 !important;
            box-shadow: 0 5px 18px rgba(212,175,55,0.35) !important;
        }

        .navbar-btn.home-btn {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border: none;
            color: white;
            font-size: 16px;
            padding: 0 10px;
        }

        .navbar-btn.home-btn:hover {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: white;
            box-shadow: 0 5px 20px rgba(99, 102, 241, 0.5);
        }

        /* 사주 정보 팝업 */
        .saju-popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .saju-popup-container {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-radius: 24px;
            max-width: 550px;
            width: 90%;
            max-height: 85vh;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(139, 92, 246, 0.3);
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .saju-popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 30px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
            border-bottom: 1px solid rgba(139, 92, 246, 0.3);
        }

        .saju-popup-header h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            background: linear-gradient(135deg, #c084fc 0%, #e879f9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .saju-popup-close {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 12px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #f87171;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .saju-popup-close:hover {
            background: rgba(239, 68, 68, 0.2);
            transform: scale(1.1);
        }

        .saju-popup-content {
            padding: 30px;
            overflow-y: auto;
            max-height: calc(85vh - 100px);
        }

        .saju-info-section {
            margin-bottom: 30px;
        }

        .saju-info-title {
            font-size: 16px;
            font-weight: 700;
            color: #c084fc;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .saju-pillars-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .saju-pillar {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 12px;
            padding: 15px;
            text-align: center;
        }

        .saju-pillar-label {
            font-size: 16px;
            color: #94a3b8;
            margin-bottom: 8px;
        }

        .saju-pillar-value {
            font-size: 20px;
            font-weight: 700;
            color: #e879f9;
            font-family: 'Noto Serif KR', serif;
        }

        .saju-pillar.highlight {
            background: linear-gradient(135deg, rgba(234, 179, 8, 0.2) 0%, rgba(251, 191, 36, 0.15) 100%);
            border: 2px solid rgba(251, 191, 36, 0.6);
            box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
            transform: scale(1.05);
        }

        .saju-pillar.highlight .saju-pillar-label {
            color: #fbbf24;
            font-weight: 700;
        }

        .saju-pillar.highlight .saju-pillar-value {
            color: #fcd34d;
            font-size: 20px;
        }

        .saju-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(71, 85, 105, 0.3);
        }

        .saju-info-row:last-child {
            border-bottom: none;
        }

        .saju-info-label {
            font-size: 16px;
            color: #94a3b8;
        }

        .saju-info-value {
            font-size: 16px;
            font-weight: 600;
            color: #e2e8f0;
        }

        /* 라이트모드 가독성 오버라이드 */
        [data-theme="light"] .saju-popup-container {
            background: linear-gradient(135deg, #f5f0ff 0%, #ede9fe 100%);
            border-color: rgba(139, 92, 246, 0.4);
        }
        [data-theme="light"] .saju-popup-header {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(168, 85, 247, 0.08) 100%);
        }
        [data-theme="light"] .saju-info-title { color: #6d28d9; }
        [data-theme="light"] .saju-pillar { background: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(168,85,247,0.05) 100%); }
        [data-theme="light"] .saju-pillar-label { color: #374151; font-weight: 700; }
        [data-theme="light"] .saju-pillar-value { color: #6d28d9; }
        [data-theme="light"] .saju-pillar.highlight .saju-pillar-value { color: #92400e; }
        [data-theme="light"] .saju-info-label { color: #374151; font-weight: 600; }
        [data-theme="light"] .saju-info-value { color: #111827; }
        [data-theme="light"] .saju-info-row { border-bottom-color: rgba(139, 92, 246, 0.15); }

        /* 기존 홈 버튼 숨김 (로직 보존) */
        .fixed-home-button {
            display: none; /* 새로운 navbar로 대체 */
            position: fixed;
            top: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
            transition: all 0.3s ease;
            z-index: 9999;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
        }

        .fixed-home-button:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 35px rgba(99, 102, 241, 0.7);
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
        }

        .fixed-home-button:active {
            transform: translateY(-1px) scale(1.02);
        }

        /* ========== 영문 카테고리 메뉴 바 ========== */
        .en-category-bar {
            position: fixed;
            top: 54px;
            left: 0;
            right: 0;
            height: 40px;
            background: var(--navbar-bg);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(139, 92, 246, 0.25);
            z-index: 9999;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .en-category-bar::-webkit-scrollbar {
            display: none;
        }

        .en-category-container {
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0 16px;
            gap: 8px;
            min-width: min-content;
        }

        .en-category-item {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 4px 12px;
            background: rgba(139, 92, 246, 0.08);
            border: 1px solid rgba(139, 92, 246, 0.25);
            border-radius: 14px;
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .en-category-item:hover {
            background: rgba(139, 92, 246, 0.2);
            border-color: rgba(139, 92, 246, 0.5);
            color: #e879f9;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
        }

        .en-category-item:active {
            transform: translateY(0);
        }

        .en-category-icon {
            font-size: 16px;
            line-height: 1;
        }

        .en-category-label {
            font-weight: 600;
        }

        /* ========== 사이드 메뉴 ========== */
        .side-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .side-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .side-menu {
            position: fixed;
            top: 0;
            left: -350px;
            width: 350px;
            height: 100vh;
            background: var(--navbar-bg);
            backdrop-filter: blur(20px);
            border-right: 1px solid rgba(139, 92, 246, 0.3);
            z-index: 9999;
            overflow-y: auto;
            transition: left 0.3s ease, box-shadow 0.3s ease;
            box-shadow: none;
        }

        .side-menu.active {
            left: 0;
            box-shadow: 5px 0 30px rgba(0, 0, 0, 0.5);
        }

        .side-menu-header {
            padding: 25px 20px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(192, 132, 252, 0.1));
            border-bottom: 1px solid rgba(139, 92, 246, 0.3);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .side-menu-title {
            font-size: 20px;
            font-weight: 700;
            background: linear-gradient(135deg, #c084fc 0%, #e879f9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .side-menu-close {
            width: 35px;
            height: 35px;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 50%;
            color: #c084fc;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .side-menu-close:hover {
            background: rgba(139, 92, 246, 0.2);
            transform: rotate(90deg);
        }

        .side-menu-content {
            padding: 15px 0;
        }

        .menu-category {
            margin-bottom: 5px;
        }

        .category-header {
            padding: 15px 20px;
            background: var(--element-brand-subtle);
            border-left: 4px solid var(--element-brand-mid);
            color: var(--element-brand-mid);
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s ease, border-left-color 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .category-header:hover {
            background: rgba(124, 58, 237, 0.12);
            border-left-color: var(--element-brand);
        }

        .category-icon {
            font-size: 16px;
            margin-right: 10px;
        }

        .category-toggle {
            transition: transform 0.3s ease;
            font-size: 16px;
        }

        .category-header.collapsed .category-toggle {
            transform: rotate(-90deg);
        }

        .category-items {
            background: rgba(0, 0, 0, 0.2);
            max-height: 500px;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .category-items.collapsed {
            max-height: 0;
        }

        .menu-item {
            padding: 12px 20px 12px 45px;
            color: #cbd5e1;
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            font-size: 16px;
        }

        .menu-item:hover {
            background: rgba(139, 92, 246, 0.1);
            border-left-color: #8b5cf6;
            color: #e879f9;
        }

        .menu-item:active {
            background: rgba(139, 92, 246, 0.2);
        }

        /* ====== 라이트모드 사이드 메뉴 ====== */
        [data-theme="light"] .side-menu {
            background: #ffffff;
            border-right: 1px solid #e2e8f0;
        }
        [data-theme="light"] .side-menu.active {
            box-shadow: 5px 0 30px rgba(0, 0, 0, 0.15);
        }
        [data-theme="light"] .side-menu-header {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(192, 132, 252, 0.05));
            border-bottom: 1px solid #e2e8f0;
        }
        [data-theme="light"] .side-menu-title {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        [data-theme="light"] .side-menu-close {
            background: rgba(139, 92, 246, 0.08);
            border: 1px solid rgba(139, 92, 246, 0.25);
            color: #7c3aed;
        }
        [data-theme="light"] .side-menu-close:hover {
            background: rgba(139, 92, 246, 0.15);
        }
        [data-theme="light"] .category-header {
            background: var(--element-brand-light);
            border-left: 4px solid var(--element-brand);
            color: var(--element-brand);
            font-weight: 800;
            font-size: 16px;
            letter-spacing: -0.2px;
        }
        [data-theme="light"] .category-header:hover {
            background: #ede9fe;
            border-left-color: var(--element-brand);
            color: #3b0764;
        }
        [data-theme="light"] .category-icon {
            filter: none;
        }
        [data-theme="light"] .category-toggle {
            color: #7c3aed;
        }
        [data-theme="light"] .category-items {
            background: #fafafa;
            border-left: 3px solid #e9d5ff;
            margin-left: 0;
        }
        [data-theme="light"] .menu-item {
            color: #374151;
            font-size: 16px;
            font-weight: 500;
            border-left: 3px solid transparent;
            padding: 12px 20px 12px 45px;
        }
        [data-theme="light"] .menu-item:hover {
            background: #f3e8ff;
            border-left-color: #8b5cf6;
            color: #6d28d9;
            font-weight: 600;
        }
        [data-theme="light"] .menu-item:active {
            background: #ede9fe;
        }

        /* ══════════════════════════════════════════════════════════════
           오행(五行) data-element 카테고리 컬러 토큰
           .category-header · .en-category-item · .category-title 에 적용
           ══════════════════════════════════════════════════════════════ */

        /* ── 사이드바 category-header (다크 기본) ── */
        .category-header[data-element="wood"]  { background: var(--element-wood-subtle);  border-left-color: var(--element-wood);  color: var(--element-wood-mid);  }
        .category-header[data-element="fire"]  { background: var(--element-fire-subtle);  border-left-color: var(--element-fire);  color: var(--element-fire-mid);  }
        .category-header[data-element="earth"] { background: var(--element-earth-subtle); border-left-color: var(--element-earth); color: var(--element-earth-mid); }
        .category-header[data-element="metal"] { background: var(--element-metal-subtle); border-left-color: var(--element-metal); color: var(--element-metal-mid); }
        .category-header[data-element="water"] { background: var(--element-water-subtle); border-left-color: var(--element-water); color: var(--element-water-mid); }
        .category-header[data-element="brand"] { background: var(--element-brand-subtle); border-left-color: var(--element-brand-mid); color: var(--element-brand-mid); }

        .category-header[data-element="wood"]:hover  { border-left-color: var(--element-wood-mid);  }
        .category-header[data-element="fire"]:hover  { border-left-color: var(--element-fire-mid);  }
        .category-header[data-element="earth"]:hover { border-left-color: var(--element-earth-mid); }
        .category-header[data-element="metal"]:hover { border-left-color: var(--element-metal-mid); }
        .category-header[data-element="water"]:hover { border-left-color: var(--element-water-mid); }
        .category-header[data-element="brand"]:hover { border-left-color: var(--element-brand);      }

        /* ── 사이드바 category-header (라이트) ── */
        [data-theme="light"] .category-header[data-element="wood"]  { background: var(--element-wood-light);  border-left-color: var(--element-wood);  color: var(--element-wood);  }
        [data-theme="light"] .category-header[data-element="fire"]  { background: var(--element-fire-light);  border-left-color: var(--element-fire);  color: var(--element-fire);  }
        [data-theme="light"] .category-header[data-element="earth"] { background: var(--element-earth-light); border-left-color: var(--element-earth); color: var(--element-earth); }
        [data-theme="light"] .category-header[data-element="metal"] { background: var(--element-metal-light); border-left-color: var(--element-metal); color: var(--element-metal); }
        [data-theme="light"] .category-header[data-element="water"] { background: var(--element-water-light); border-left-color: var(--element-water); color: var(--element-water); }
        [data-theme="light"] .category-header[data-element="brand"] { background: var(--element-brand-light); border-left-color: var(--element-brand); color: var(--element-brand); }

        /* 라이트 호버 — 🟠 Fix: 배경+텍스트 모두 진한 색으로 피드백 */
        [data-theme="light"] .category-header[data-element="wood"]:hover  { background: #D1FAE5; color: #065f46; }
        [data-theme="light"] .category-header[data-element="fire"]:hover  { background: #FFE4E6; color: #9f1239; }
        [data-theme="light"] .category-header[data-element="earth"]:hover { background: #FDE68A; color: #78350f; }
        [data-theme="light"] .category-header[data-element="metal"]:hover { background: #FDE68A; color: #78350f; }
        [data-theme="light"] .category-header[data-element="water"]:hover { background: #BAE6FD; color: #0c4a6e; }
        [data-theme="light"] .category-header[data-element="brand"]:hover { background: #EDE9FE; color: #3b0764; }

        /* ── EN 카테고리 바 pill — 좌측 4px 액센트 + 나머지 1px element tint ──
           🔵 Fix: 좌측 corner를 4px(flat), 우측만 pill(14px) 유지 → border-left 4px와 radius 일치
           border-radius: top-left top-right bottom-right bottom-left */
        .en-category-item[data-element] {
            border-radius: 4px 14px 14px 4px;
        }
        .en-category-item[data-element="wood"]  { border: 1px solid rgba(  5, 150, 105, 0.30); border-left: 4px solid var(--element-wood);      background: var(--element-wood-subtle);  color: var(--element-wood-mid);  }
        .en-category-item[data-element="fire"]  { border: 1px solid rgba(225,  29,  72, 0.30); border-left: 4px solid var(--element-fire);      background: var(--element-fire-subtle);  color: var(--element-fire-mid);  }
        .en-category-item[data-element="earth"] { border: 1px solid rgba(217, 119,   6, 0.30); border-left: 4px solid var(--element-earth);     background: var(--element-earth-subtle); color: var(--element-earth-mid); }
        .en-category-item[data-element="metal"] { border: 1px solid rgba(180,  83,   9, 0.30); border-left: 4px solid var(--element-metal);     background: var(--element-metal-subtle); color: var(--element-metal-mid); }
        .en-category-item[data-element="water"] { border: 1px solid rgba(  2, 132, 199, 0.30); border-left: 4px solid var(--element-water);     background: var(--element-water-subtle); color: var(--element-water-mid); }
        .en-category-item[data-element="brand"] { border: 1px solid rgba(124,  58, 237, 0.30); border-left: 4px solid var(--element-brand-mid); background: var(--element-brand-subtle); color: var(--element-brand-mid); }

        /* 다크 호버 — 🟠 Fix: 텍스트 색도 mid→main 로 진해짐 */
        .en-category-item[data-element="wood"]:hover  { border-left-color: var(--element-wood-mid);  color: var(--element-wood);  box-shadow: 0 3px 10px rgba(  5, 150, 105, 0.25); }
        .en-category-item[data-element="fire"]:hover  { border-left-color: var(--element-fire-mid);  color: var(--element-fire);  box-shadow: 0 3px 10px rgba(225,  29,  72, 0.25); }
        .en-category-item[data-element="earth"]:hover { border-left-color: var(--element-earth-mid); color: var(--element-earth); box-shadow: 0 3px 10px rgba(217, 119,   6, 0.25); }
        .en-category-item[data-element="metal"]:hover { border-left-color: var(--element-metal-mid); color: var(--element-metal); box-shadow: 0 3px 10px rgba(180,  83,   9, 0.25); }
        .en-category-item[data-element="water"]:hover { border-left-color: var(--element-water-mid); color: var(--element-water); box-shadow: 0 3px 10px rgba(  2, 132, 199, 0.25); }
        .en-category-item[data-element="brand"]:hover { border-left-color: var(--element-brand);     color: var(--element-brand); box-shadow: 0 3px 10px rgba(124,  58, 237, 0.25); }

        /* 라이트 기본 */
        [data-theme="light"] .en-category-item[data-element="wood"]  { background: var(--element-wood-light);  color: var(--element-wood);  }
        [data-theme="light"] .en-category-item[data-element="fire"]  { background: var(--element-fire-light);  color: var(--element-fire);  }
        [data-theme="light"] .en-category-item[data-element="earth"] { background: var(--element-earth-light); color: var(--element-earth); }
        [data-theme="light"] .en-category-item[data-element="metal"] { background: var(--element-metal-light); color: var(--element-metal); }
        [data-theme="light"] .en-category-item[data-element="water"] { background: var(--element-water-light); color: var(--element-water); }
        [data-theme="light"] .en-category-item[data-element="brand"] { background: var(--element-brand-light); color: var(--element-brand); }

        /* 라이트 호버 — 🟠 Fix: 더 진한 색상으로 피드백 */
        [data-theme="light"] .en-category-item[data-element="wood"]:hover  { color: #047857; }
        [data-theme="light"] .en-category-item[data-element="fire"]:hover  { color: #9f0a2a; }
        [data-theme="light"] .en-category-item[data-element="earth"]:hover { color: #92400e; }
        [data-theme="light"] .en-category-item[data-element="metal"]:hover { color: #78350f; }
        [data-theme="light"] .en-category-item[data-element="water"]:hover { color: #075985; }
        [data-theme="light"] .en-category-item[data-element="brand"]:hover { color: #5b21b6; }

        /* ── 랜딩 category-title (섹션 헤더) — 4px 좌측 액센트 보더 ── */
        .category-title {
            padding-left: 14px;
            border-left: 4px solid var(--element-brand);
        }
        .category-title[data-element="wood"]  { border-left-color: var(--element-wood);      color: var(--element-wood-mid);  }
        .category-title[data-element="fire"]  { border-left-color: var(--element-fire);      color: var(--element-fire-mid);  }
        .category-title[data-element="earth"] { border-left-color: var(--element-earth);     color: var(--element-earth-mid); }
        .category-title[data-element="metal"] { border-left-color: var(--element-metal);     color: var(--element-metal-mid); }
        .category-title[data-element="water"] { border-left-color: var(--element-water);     color: var(--element-water-mid); }
        .category-title[data-element="brand"] { border-left-color: var(--element-brand-mid); color: var(--element-brand-mid); }

        [data-theme="light"] .category-title[data-element="wood"]  { color: var(--element-wood);  }
        [data-theme="light"] .category-title[data-element="fire"]  { color: var(--element-fire);  }
        [data-theme="light"] .category-title[data-element="earth"] { color: var(--element-earth); }
        [data-theme="light"] .category-title[data-element="metal"] { color: var(--element-metal); }
        [data-theme="light"] .category-title[data-element="water"] { color: var(--element-water); }
        [data-theme="light"] .category-title[data-element="brand"] { color: var(--element-brand); }

        /* ╔══════════════════════════════════════════════════════════════╗
           ║  전역 라이트모드 인라인 색상 오버라이드                        ║
           ║  .tab-content 적용 → 새 탭/페이지 추가 시 CSS 추가 불필요    ║
           ║  다크 유지가 필요한 구역 → class="dark-island" 부여           ║
           ╚══════════════════════════════════════════════════════════════╝ */

        /* ── 텍스트 색상 (공백 있는 버전: "color: #xxx") ── */
        [data-theme="light"] .tab-content *[style*="color: rgba(255,255,255"] { color: #374151 !important; }
        [data-theme="light"] .tab-content *[style*="color: white"]             { color: #1e1b4b !important; }
        [data-theme="light"] .tab-content *[style*="color: #fff"]              { color: #1e1b4b !important; }
        [data-theme="light"] .tab-content *[style*="color: #f1f5f9"]           { color: #1e1b4b !important; }
        [data-theme="light"] .tab-content *[style*="color: #e2e8f0"]           { color: #1f2937 !important; }
        [data-theme="light"] .tab-content *[style*="color: #cbd5e1"]           { color: #374151 !important; }
        [data-theme="light"] .tab-content *[style*="color: #94a3b8"]           { color: #6b7280 !important; }
        [data-theme="light"] .tab-content *[style*="color: #64748b"]           { color: #475569 !important; }

        /* ── 텍스트 색상 (공백 없는 버전: "color:#xxx" — JS 생성 HTML 대응) ── */
        [data-theme="light"] .tab-content *[style*="color:rgba(255,255,255"]   { color: #374151 !important; }
        [data-theme="light"] .tab-content *[style*="color:#fff"]               { color: #1e1b4b !important; }
        [data-theme="light"] .tab-content *[style*="color:#f1f5f9"]            { color: #1e1b4b !important; }
        [data-theme="light"] .tab-content *[style*="color:#e2e8f0"]            { color: #1f2937 !important; }
        [data-theme="light"] .tab-content *[style*="color:#cbd5e1"]            { color: #374151 !important; }
        [data-theme="light"] .tab-content *[style*="color:#94a3b8"]            { color: #6b7280 !important; }
        [data-theme="light"] .tab-content *[style*="color:#64748b"]            { color: #475569 !important; }
        /* 라이트모드에서 안 보이는 연한 노란/황색 계열 */
        [data-theme="light"] .tab-content *[style*="color:#fde68a"]            { color: #1c1917 !important; }
        [data-theme="light"] .tab-content *[style*="color: #fde68a"]           { color: #1c1917 !important; }
        [data-theme="light"] .tab-content *[style*="color:#fbbf24"]            { color: #92400e !important; }
        [data-theme="light"] .tab-content *[style*="color: #fbbf24"]           { color: #92400e !important; }

        /* ── 라이트모드 가독성 가드레일: 최소 폰트 15px ── */
        [data-theme="light"] .tab-content *[style*="font-size: 16px"],
        [data-theme="light"] .tab-content *[style*="font-size:16px"],
        [data-theme="light"] .tab-content *[style*="font-size: 16px"],
        [data-theme="light"] .tab-content *[style*="font-size:16px"],
        [data-theme="light"] .tab-content *[style*="font-size: 16px"],
        [data-theme="light"] .tab-content *[style*="font-size:16px"],
        [data-theme="light"] .tab-content *[style*="font-size: 16px"],
        [data-theme="light"] .tab-content *[style*="font-size:16px"],
        [data-theme="light"] .tab-content *[style*="font-size: 16px"],
        [data-theme="light"] .tab-content *[style*="font-size:16px"] {
            font-size: 16px !important;
            line-height: 1.6 !important;
        }

        /* ── 전 테마 공통 가드레일: 최소 폰트 15px (라이트/나이트 동일) ── */
        .tab-content *[style*="font-size: 16px"],
        .tab-content *[style*="font-size:16px"],
        .tab-content *[style*="font-size: 16px"],
        .tab-content *[style*="font-size:16px"],
        .tab-content *[style*="font-size: 16px"],
        .tab-content *[style*="font-size:16px"],
        .tab-content *[style*="font-size: 16px"],
        .tab-content *[style*="font-size:16px"],
        .tab-content *[style*="font-size: 16px"],
        .tab-content *[style*="font-size:16px"] {
            font-size: 16px !important;
            line-height: 1.6 !important;
        }

        /* ── 라이트모드 가독성 가드레일: 컬러 폰트 최소화(본문 중심) ── */
        [data-theme="light"] .tab-content *[style*="color:#ff6b9d"],
        [data-theme="light"] .tab-content *[style*="color: #ff6b9d"],
        [data-theme="light"] .tab-content *[style*="color:#c06c84"],
        [data-theme="light"] .tab-content *[style*="color: #c06c84"],
        [data-theme="light"] .tab-content *[style*="color:#ff4081"],
        [data-theme="light"] .tab-content *[style*="color: #ff4081"],
        [data-theme="light"] .tab-content *[style*="color:#ec4899"],
        [data-theme="light"] .tab-content *[style*="color: #ec4899"],
        [data-theme="light"] .tab-content *[style*="color:#e91e63"],
        [data-theme="light"] .tab-content *[style*="color: #e91e63"],
        [data-theme="light"] .tab-content *[style*="color:#f06292"],
        [data-theme="light"] .tab-content *[style*="color: #f06292"],
        [data-theme="light"] .tab-content *[style*="color:#60a5fa"],
        [data-theme="light"] .tab-content *[style*="color: #60a5fa"],
        [data-theme="light"] .tab-content *[style*="color:#3b82f6"],
        [data-theme="light"] .tab-content *[style*="color: #3b82f6"],
        [data-theme="light"] .tab-content *[style*="color:#a78bfa"],
        [data-theme="light"] .tab-content *[style*="color: #a78bfa"],
        [data-theme="light"] .tab-content *[style*="color:#c084fc"],
        [data-theme="light"] .tab-content *[style*="color: #c084fc"],
        [data-theme="light"] .tab-content *[style*="color:#ba68c8"],
        [data-theme="light"] .tab-content *[style*="color: #ba68c8"],
        [data-theme="light"] .tab-content *[style*="color:#ce93d8"],
        [data-theme="light"] .tab-content *[style*="color: #ce93d8"],
        [data-theme="light"] .tab-content *[style*="color:#22c55e"],
        [data-theme="light"] .tab-content *[style*="color: #22c55e"],
        [data-theme="light"] .tab-content *[style*="color:#34d399"],
        [data-theme="light"] .tab-content *[style*="color: #34d399"],
        [data-theme="light"] .tab-content *[style*="color:#ef4444"],
        [data-theme="light"] .tab-content *[style*="color: #ef4444"],
        [data-theme="light"] .tab-content *[style*="color:#ef5350"],
        [data-theme="light"] .tab-content *[style*="color: #ef5350"],
        [data-theme="light"] .tab-content *[style*="color:#f59e0b"],
        [data-theme="light"] .tab-content *[style*="color: #f59e0b"],
        [data-theme="light"] .tab-content *[style*="color:#ff9800"],
        [data-theme="light"] .tab-content *[style*="color: #ff9800"],
        [data-theme="light"] .tab-content *[style*="color:#ffb300"],
        [data-theme="light"] .tab-content *[style*="color: #ffb300"],
        [data-theme="light"] .tab-content *[style*="color:#ffc107"],
        [data-theme="light"] .tab-content *[style*="color: #ffc107"] {
            color: #111827 !important;
        }

        /* ── 연한 초록 계열 (흰 배경에서 안 보임) ── */
        [data-theme="light"] .tab-content *[style*="color:#e8f5e9"],
        [data-theme="light"] .tab-content *[style*="color: #e8f5e9"],
        [data-theme="light"] .tab-content *[style*="color:#d4e8d0"],
        [data-theme="light"] .tab-content *[style*="color: #d4e8d0"],
        [data-theme="light"] .tab-content *[style*="color:#c8e6c9"],
        [data-theme="light"] .tab-content *[style*="color: #c8e6c9"],
        [data-theme="light"] .tab-content *[style*="color:#b2dfdb"],
        [data-theme="light"] .tab-content *[style*="color: #b2dfdb"],
        [data-theme="light"] .tab-content *[style*="color:#a5d6a7"],
        [data-theme="light"] .tab-content *[style*="color: #a5d6a7"],
        [data-theme="light"] .tab-content *[style*="color:#80cbc4"],
        [data-theme="light"] .tab-content *[style*="color: #80cbc4"],
        [data-theme="light"] .tab-content *[style*="color:#80deea"],
        [data-theme="light"] .tab-content *[style*="color: #80deea"],
        [data-theme="light"] .tab-content *[style*="color:#81c784"],
        [data-theme="light"] .tab-content *[style*="color: #81c784"],
        [data-theme="light"] .tab-content *[style*="color:#26c6da"],
        [data-theme="light"] .tab-content *[style*="color: #26c6da"] { color: #14532d !important; }

        /* ── 연한 보라/파랑/분홍 계열 (흰 배경에서 안 보임) ── */
        [data-theme="light"] .tab-content *[style*="color:#b39ddb"],
        [data-theme="light"] .tab-content *[style*="color: #b39ddb"],
        [data-theme="light"] .tab-content *[style*="color:#9fa8da"],
        [data-theme="light"] .tab-content *[style*="color: #9fa8da"],
        [data-theme="light"] .tab-content *[style*="color:#90caf9"],
        [data-theme="light"] .tab-content *[style*="color: #90caf9"],
        [data-theme="light"] .tab-content *[style*="color:#80b4f7"],
        [data-theme="light"] .tab-content *[style*="color: #80b4f7"],
        [data-theme="light"] .tab-content *[style*="color:#f48fb1"],
        [data-theme="light"] .tab-content *[style*="color: #f48fb1"],
        [data-theme="light"] .tab-content *[style*="color:#f8bbd0"],
        [data-theme="light"] .tab-content *[style*="color: #f8bbd0"],
        [data-theme="light"] .tab-content *[style*="color:#ffcc80"],
        [data-theme="light"] .tab-content *[style*="color: #ffcc80"],
        [data-theme="light"] .tab-content *[style*="color:#ffb74d"],
        [data-theme="light"] .tab-content *[style*="color: #ffb74d"] { color: #1e293b !important; }

        /* ── 연한 회색 계열 (흰 배경에서 거의 안 보임) ── */
        [data-theme="light"] .tab-content *[style*="color:#9e9e9e"],
        [data-theme="light"] .tab-content *[style*="color: #9e9e9e"],
        [data-theme="light"] .tab-content *[style*="color:#bdbdbd"],
        [data-theme="light"] .tab-content *[style*="color: #bdbdbd"],
        [data-theme="light"] .tab-content *[style*="color:#b0bec5"],
        [data-theme="light"] .tab-content *[style*="color: #b0bec5"],
        [data-theme="light"] .tab-content *[style*="color:#90a4ae"],
        [data-theme="light"] .tab-content *[style*="color: #90a4ae"],
        [data-theme="light"] .tab-content *[style*="color:#aaa"],
        [data-theme="light"] .tab-content *[style*="color: #aaa"],
        [data-theme="light"] .tab-content *[style*="color:#999"],
        [data-theme="light"] .tab-content *[style*="color: #999"] { color: #4b5563 !important; }

        /* 버튼 가독성 보호: 그라데이션 CTA 텍스트는 흰색 유지 */
        [data-theme="light"] .tab-content button[style*="background: linear-gradient"],
        [data-theme="light"] .tab-content button[style*="background:linear-gradient"] {
            color: #ffffff !important;
        }
        [data-theme="light"] .tab-content button[style*="background: linear-gradient"] *,
        [data-theme="light"] .tab-content button[style*="background:linear-gradient"] * {
            color: #ffffff !important;
        }

        /* ── 배경 색상 (공백 있는 버전) ── */
        [data-theme="light"] .tab-content *[style*="background: rgba(0,0,0"]  { background: #f3f4f6 !important; color: #1e1b4b !important; }
        [data-theme="light"] .tab-content *[style*="background: rgba(255,255,255,0.03"],
        [data-theme="light"] .tab-content *[style*="background: rgba(255,255,255,0.04"],
        [data-theme="light"] .tab-content *[style*="background: rgba(255,255,255,0.05"],
        [data-theme="light"] .tab-content *[style*="background: rgba(255,255,255,0.06"],
        [data-theme="light"] .tab-content *[style*="background: rgba(255,255,255,0.07"] { background: #f3f4f6 !important; }

        /* ── 배경 색상 (공백 없는 버전 — JS 생성 HTML 대응) ── */
        [data-theme="light"] .tab-content *[style*="background:rgba(0,0,0"]   { background: #f3f4f6 !important; color: #1e1b4b !important; }
        [data-theme="light"] .tab-content *[style*="background:rgba(255,255,255,0.03"],
        [data-theme="light"] .tab-content *[style*="background:rgba(255,255,255,0.04"],
        [data-theme="light"] .tab-content *[style*="background:rgba(255,255,255,0.05"],
        [data-theme="light"] .tab-content *[style*="background:rgba(255,255,255,0.06"],
        [data-theme="light"] .tab-content *[style*="background:rgba(255,255,255,0.07"] { background: #f3f4f6 !important; }

        /* ── 반투명 흰 테두리 → 연한 검정 테두리 (공백 있는/없는 버전) ── */
        [data-theme="light"] .tab-content *[style*="border: 1px solid rgba(255,255,255,0.1"],
        [data-theme="light"] .tab-content *[style*="border: 1px solid rgba(255,255,255,0.08"],
        [data-theme="light"] .tab-content *[style*="border: 2px solid rgba(255,255,255"],
        [data-theme="light"] .tab-content *[style*="border:1px solid rgba(255,255,255"],
        [data-theme="light"] .tab-content *[style*="border:2px solid rgba(255,255,255"] { border-color: rgba(0,0,0,0.12) !important; }

        /* ── .result-card 전역 스타일 (모든 탭의 카드) ── */
        [data-theme="light"] .tab-content .result-card {
            background: #ffffff !important;
            border-color: rgba(139, 92, 246, 0.2) !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
        }
        [data-theme="light"] .tab-content .result-card h3 { color: #6d28d9 !important; }

        /* ====== 해답노포(#yukyo) 라이트모드 ====== */
        /* 입력 폼 카드 */
        [data-theme="light"] #yukyo > div[style*="rgba(255,255,255"] {
            background: #ffffff !important;
            border-color: rgba(0,0,0,0.10) !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
        }
        /* select 요소 (배경 #1e293b → 흰색) */
        [data-theme="light"] #yukyo select {
            background: #f8fafc !important;
            color: #1e1b4b !important;
            border-color: rgba(0,0,0,0.15) !important;
        }
        [data-theme="light"] #yukyo select option {
            background: #ffffff;
            color: #1e1b4b;
        }
        /* textarea */
        [data-theme="light"] #yukyo textarea {
            background: #f8fafc !important;
            color: #1e1b4b !important;
            border-color: rgba(0,0,0,0.15) !important;
        }
        /* 날짜 자동기록 박스 */
        [data-theme="light"] #yukyo [style*="background: rgba(139,92,246,0.10)"] {
            background: #f5f3ff !important;
            border-color: rgba(109,40,217,0.3) !important;
        }
        /* 윤달 체크박스 박스 */
        [data-theme="light"] #yukyo [style*="background: rgba(255,255,255,0.04)"] {
            background: #f3f4f6 !important;
            border-color: rgba(0,0,0,0.1) !important;
        }
        /* 결과 카드 — 질문 박스 / 종합 메시지 박스 */
        [data-theme="light"] #yukyoResult [style*="rgba(255,255,255,0.03]"],
        [data-theme="light"] #yukyoResult [style*="rgba(255,255,255,0.04"] {
            background: #f8fafc !important;
            border-color: rgba(0,0,0,0.10) !important;
        }
        /* 결과 카드 — 괘 메인 카드(보라 그라데이션) 경계선 및 텍스트 유지 */
        [data-theme="light"] #yukyoResult [style*="rgba(124,58,237,0.25"] {
            background: #f5f3ff !important;
        }
        /* 결과 카드 — 메뉴 돌아가기 버튼 */
        [data-theme="light"] #yukyoResult button[style*="rgba(255,255,255,0.06"] {
            background: #f1f5f9 !important;
            border-color: rgba(0,0,0,0.12) !important;
            color: #374151 !important;
        }

        /* ╔══════════════════════════════════════════════════════════════╗
           ║  .dark-island : 의도적 다크 유지 구역                        ║
           ║  같은 specificity에서 나중 선언이 우선 → 글로벌 규칙 취소   ║
           ╚══════════════════════════════════════════════════════════════╝ */
        /* ╔══════════════════════════════════════════════════════════════╗
           ║  허브 UI 라이트모드 (sh/rh/wh/reln/hh/ch 프리픽스 통합)    ║
           ║  [class$="-card"] → 모든 허브 카드 컨테이너 일괄 처리       ║
           ║  [class*="-card-title"] 등 → 텍스트 요소 일괄 처리          ║
           ╚══════════════════════════════════════════════════════════════╝ */
        /* 히어로 영역 */
        [data-theme="light"] [class*="-hero-title"]  { color: #1e1b4b !important; }
        [data-theme="light"] [class*="-hero-badge"]  { background: rgba(109,40,217,0.1) !important; border-color: rgba(109,40,217,0.4) !important; color: #6d28d9 !important; }
        /* 카드 컨테이너 - 인라인 다크 그라데이션 → 흰 배경 */
        [data-theme="light"] [class$="-card"]        { background: #fff !important; border-color: rgba(0,0,0,0.10) !important; box-shadow: 0 2px 14px rgba(0,0,0,0.07) !important; }
        [data-theme="light"] [class$="-card"]::before { background: transparent !important; }
        /* 카드 내 텍스트 */
        [data-theme="light"] [class*="-card-title"]  { color: #1e1b4b !important; text-shadow: none !important; }
        [data-theme="light"] [class*="-card-sub"]    { color: #4b5563 !important; }
        [data-theme="light"] [class*="-card-num"]    { color: #9ca3af !important; }
        [data-theme="light"] [class*="-card-arrow"]  { color: #9ca3af !important; }
        [data-theme="light"] [class$="-card"]:hover [class*="-card-arrow"] { color: #6d28d9 !important; }

        [data-theme="light"] .dark-island *[style*="color: rgba(255,255,255,0.9"]  { color: rgba(255,255,255,0.9)  !important; }
        [data-theme="light"] .dark-island *[style*="color: rgba(255,255,255,0.8"]  { color: rgba(255,255,255,0.8)  !important; }
        [data-theme="light"] .dark-island *[style*="color: rgba(255,255,255,0.7"]  { color: rgba(255,255,255,0.7)  !important; }
        [data-theme="light"] .dark-island *[style*="color: rgba(255,255,255,0.6"]  { color: rgba(255,255,255,0.6)  !important; }
        [data-theme="light"] .dark-island *[style*="color: rgba(255,255,255,0.5"]  { color: rgba(255,255,255,0.5)  !important; }
        [data-theme="light"] .dark-island *[style*="color: rgba(255,255,255,0.4"]  { color: rgba(255,255,255,0.4)  !important; }
        [data-theme="light"] .dark-island *[style*="color: rgba(255,255,255,0.3"]  { color: rgba(255,255,255,0.3)  !important; }
        [data-theme="light"] .dark-island *[style*="color: white"]                 { color: white                  !important; }
        [data-theme="light"] .dark-island *[style*="color: #fff"]                  { color: #fff                   !important; }
        /* dark-island 내 전역 규칙에 덮어씌워지는 다크 전용 색상 복원 */
        [data-theme="light"] .dark-island *[style*="color: #e2e8f0"]               { color: #e2e8f0                !important; }
        [data-theme="light"] .dark-island *[style*="color:#e2e8f0"]                { color: #e2e8f0                !important; }
        [data-theme="light"] .dark-island *[style*="color: #f1f5f9"]               { color: #f1f5f9                !important; }
        [data-theme="light"] .dark-island *[style*="color:#f1f5f9"]                { color: #f1f5f9                !important; }
        [data-theme="light"] .dark-island *[style*="color: #cbd5e1"]               { color: #cbd5e1                !important; }
        [data-theme="light"] .dark-island *[style*="color:#cbd5e1"]                { color: #cbd5e1                !important; }
        [data-theme="light"] .dark-island *[style*="color: #94a3b8"]               { color: #94a3b8                !important; }
        [data-theme="light"] .dark-island *[style*="color:#94a3b8"]                { color: #94a3b8                !important; }
        [data-theme="light"] .dark-island *[style*="color: #64748b"]               { color: #64748b                !important; }
        [data-theme="light"] .dark-island *[style*="color:#64748b"]                { color: #64748b                !important; }
        [data-theme="light"] .dark-island *[style*="color: #fde68a"]               { color: #fde68a                !important; }
        [data-theme="light"] .dark-island *[style*="color:#fde68a"]                { color: #fde68a                !important; }
        [data-theme="light"] .dark-island *[style*="color: #fbbf24"]               { color: #fbbf24                !important; }
        [data-theme="light"] .dark-island *[style*="color:#fbbf24"]                { color: #fbbf24                !important; }
        /* 퍼플/액센트 계열 색상 복원 */
        [data-theme="light"] .dark-island *[style*="color: #c084fc"]               { color: #c084fc                !important; }
        [data-theme="light"] .dark-island *[style*="color:#c084fc"]                { color: #c084fc                !important; }
        [data-theme="light"] .dark-island *[style*="color: #a78bfa"]               { color: #a78bfa                !important; }
        [data-theme="light"] .dark-island *[style*="color:#a78bfa"]                { color: #a78bfa                !important; }
        [data-theme="light"] .dark-island *[style*="color: #c4b5fd"]               { color: #c4b5fd                !important; }
        [data-theme="light"] .dark-island *[style*="color:#c4b5fd"]                { color: #c4b5fd                !important; }
        [data-theme="light"] .dark-island *[style*="color: #fca5a5"]               { color: #fca5a5                !important; }
        [data-theme="light"] .dark-island *[style*="color:#fca5a5"]                { color: #fca5a5                !important; }
        [data-theme="light"] .dark-island *[style*="color: #86efac"]               { color: #86efac                !important; }
        [data-theme="light"] .dark-island *[style*="color:#86efac"]                { color: #86efac                !important; }
        [data-theme="light"] .dark-island *[style*="color: #93c5fd"]               { color: #93c5fd                !important; }
        [data-theme="light"] .dark-island *[style*="color:#93c5fd"]                { color: #93c5fd                !important; }
        [data-theme="light"] .dark-island *[style*="color: #a5b4fc"]               { color: #a5b4fc                !important; }
        [data-theme="light"] .dark-island *[style*="color:#a5b4fc"]                { color: #a5b4fc                !important; }
        [data-theme="light"] .dark-island *[style*="background: rgba(0,0,0"]       { background: unset             !important; }
        [data-theme="light"] .dark-island *[style*="background: rgba(255,255,255"] { background: unset             !important; }
        /* 공백 없는 버전도 복원 */
        [data-theme="light"] .dark-island *[style*="color:rgba(255,255,255"]       { color: revert                 !important; }
        [data-theme="light"] .dark-island *[style*="color:#fff"]                   { color: #fff                   !important; }
        [data-theme="light"] .dark-island *[style*="background:rgba(0,0,0"]        { background: unset             !important; }
        [data-theme="light"] .dark-island *[style*="background:rgba(255,255,255"]  { background: unset             !important; }
        .code-info-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            z-index: 10001;
            align-items: center;
            justify-content: center;
        }

        .code-info-modal.active {
            display: flex;
        }

        .code-info-content {
            background: linear-gradient(135deg, rgba(13, 13, 31, 0.98), rgba(21, 21, 46, 0.98));
            border: 2px solid rgba(139, 92, 246, 0.3);
            border-radius: 25px;
            padding: 35px;
            max-width: 500px;
            width: 90%;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(139, 92, 246, 0.4);
            position: relative;
        }

        .code-info-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 2px solid rgba(139, 92, 246, 0.3);
        }

        .code-info-title {
            font-size: 24px;
            font-weight: 700;
            background: linear-gradient(135deg, #c084fc 0%, #e879f9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .code-info-close {
            width: 35px;
            height: 35px;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 50%;
            color: #c084fc;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .code-info-close:hover {
            background: rgba(139, 92, 246, 0.2);
            transform: rotate(90deg);
        }

        .code-info-section {
            margin-bottom: 25px;
            padding: 20px;
            background: rgba(139, 92, 246, 0.05);
            border-radius: 15px;
            border-left: 4px solid #8b5cf6;
        }

        .code-info-label {
            font-size: 16px;
            color: #94a3b8;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .code-info-value {
            font-size: 20px;
            color: #e2e8f0;
            font-weight: 700;
        }

        .code-info-p60 {
            font-size: 30px;
            color: #c084fc;
            text-align: center;
            padding: 15px;
            background: rgba(192, 132, 252, 0.1);
            border-radius: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            letter-spacing: 2px;
        }

        .code-info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .code-info-item {
            padding: 15px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 12px;
            border: 1px solid rgba(59, 130, 246, 0.2);
        }

        .code-info-item-label {
            font-size: 16px;
            color: #94a3b8;
            margin-bottom: 5px;
        }

        .code-info-item-value {
            font-size: 16px;
            color: #60a5fa;
            font-weight: 700;
        }

        /* 페이트프리즘 & 대운 모바일 반응형 */
        @media (max-width: 768px) {
            /* 페이트프리즘 이미지 슬라이더 */
            #fateprizmSlider {
                height: 350px !important;
            }

            /* 프리즘 시각화 */
            .prism-visual {
                height: 150px !important;
                margin: 20px 0 !important;
            }

            .prism-visual > div:first-child {
                left: 10% !important;
            }

            .prism-visual > div:last-child {
                right: 5% !important;
            }

            .prism-visual > div:last-child > div {
                width: 150px !important;
                height: 10px !important;
            }

            /* 스펙트럼 카드 */
            .spectrum-cards > div {
                padding: 20px !important;
            }

            .spectrum-cards > div > div:first-child > span {
                font-size: 30px !important;
            }

            .spectrum-cards > div > div:first-child > div > div:first-child {
                font-size: 16px !important;
            }

            /* 대운 카드 */
            .daeun-card {
                padding: 20px !important;
            }

            /* 포춘 그래프 */
            #fortuneGraph {
                max-width: 100% !important;
            }

            /* Hero 이모지 크기 축소 */
            .hero-emoji {
                font-size: 30px !important;
            }

            /* 고정 홈 버튼 */
            .fixed-home-button {
                width: 50px;
                height: 50px;
                font-size: 24px;
                top: 15px;
                right: 15px;
            }
        }

        @media (max-width: 480px) {
            /* 페이트프리즘 이미지 슬라이더 */
            #fateprizmSlider {
                height: 280px !important;
            }

            /* 프리즘 시각화 더 축소 */
            .prism-visual {
                height: 120px !important;
            }

            .prism-visual > div:last-child > div {
                width: 100px !important;
                height: 8px !important;
            }

            /* 스펙트럼 카드 더 축소 */
            .spectrum-cards > div {
                padding: 15px !important;
            }

            .spectrum-cards > div > div:first-child {
                flex-direction: column !important;
                text-align: center !important;
            }

            .spectrum-cards > div > div:first-child > span {
                font-size: 24px !important;
            }

            .spectrum-cards > div > div:first-child > div > div:first-child {
                font-size: 16px !important;
            }

            /* Hero 섹션 타이틀 */
            .hero-emoji {
                font-size: 24px !important;
            }

            /* 버튼 크기 조정 */
            .btn {
                padding: 18px 30px !important;
                font-size: 16px !important;
            }

            .navbar-btn {
                font-size: 16px !important;
                padding: 0 8px !important;
                height: 32px !important;
            }

            .navbar-btn span {
                display: none; /* 모바일에서 텍스트 숨김 */
            }

            .hamburger-menu {
                width: 36px !important;
                height: 36px !important;
            }

            .fixed-navbar {
                padding: 0 12px !important;
                height: 54px !important;
            }

            body {
                padding-top: 94px !important;
            }

            .navbar-logo {
                font-size: 16px !important;
            }

            /* 사이드 메뉴 모바일 */
            .side-menu {
                width: 280px !important;
                left: -280px !important;
            }

            .side-menu.active {
                left: 0 !important;
            }

            .side-menu-header {
                padding: 16px 14px !important;
            }

            .side-menu-title {
                font-size: 16px !important;
            }

            .category-header {
                padding: 12px 15px !important;
                font-size: 16px !important;
            }

            .menu-item {
                padding: 10px 15px 10px 35px !important;
                font-size: 16px !important;
            }

            /* 코드정보 모바일 */
            .navbar-code-info {
                min-width: 0 !important;
                max-width: 90px !important;
                padding: 0 6px !important;
                height: 32px !important;
            }

            .navbar-code-p60 {
                font-size: 16px !important;
                max-width: 78px !important;
            }

            .navbar-code-saju {
                font-size: 16px !important;
                display: none; /* 모바일에서 사주 코드 숨김 */
            }

            .navbar-code-empty {
                font-size: 16px !important;
            }

            /* 코드정보 모달 */
            .code-info-content {
                padding: 25px !important;
                max-width: 95% !important;
            }

            .code-info-title {
                font-size: 20px !important;
            }

            .code-info-p60 {
                font-size: 24px !important;
            }

            .code-info-grid {
                grid-template-columns: 1fr !important;
            }

            /* 메뉴 그리드 */
            .menu-grid {
                grid-template-columns: 1fr !important;
                gap: 15px !important;
            }

            /* 내비게이션 탭 */
            .nav-tabs {
                gap: 5px !important;
            }

            .nav-tab {
                font-size: 16px !important;
                padding: 10px 6px !important;
            }
        }

        /* ========== 랜딩 페이지 섹션 스타일 ========== */
        .landing-section {
            margin-bottom: var(--theme-section-gap, 60px);
        }

        .landing-section-hero .hero-section {
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            overflow: hidden;
        }

        .landing-section-hero .hero-content {
            text-align: inherit;
            padding: 40px;
            max-width: 800px;
        }

        .landing-section-hero .hero-title {
            font-size: 38px;
            font-family: var(--theme-font-heading, 'Noto Sans KR');
            color: var(--theme-primary, #8c2bee);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .landing-section-hero .hero-subtitle {
            font-size: 16px;
            color: var(--theme-text, #1a1a1a);
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .landing-section-hero .hero-cta {
            padding: 15px 40px;
            background: var(--theme-primary, #8c2bee);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .landing-section-hero .hero-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(140, 43, 238, 0.4);
        }

        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .section-title {
            font-size: 30px;
            color: var(--theme-primary, #8c2bee);
            font-weight: 700;
            margin-bottom: 10px;
        }

        .section-subtitle {
            font-size: 16px;
            color: var(--theme-text, #1a1a1a);
            opacity: 0.8;
        }

        .category-section {
            margin-bottom: 50px;
        }

        .category-title {
            font-size: 24px;
            color: var(--theme-primary, #8c2bee);
            margin-bottom: 20px;
            font-weight: 600;
        }

        .category-title.collapsible {
            cursor: pointer;
            user-select: none;
        }

        .category-title.collapsible:hover {
            opacity: 0.8;
        }

        /* 🟡 Fix: 라이트 모드에서 element별로 진한 색상 피드백 */
        [data-theme="light"] .category-title.collapsible[data-element="wood"]:hover  { opacity: 1; color: #065f46; }
        [data-theme="light"] .category-title.collapsible[data-element="fire"]:hover  { opacity: 1; color: #9f1239; }
        [data-theme="light"] .category-title.collapsible[data-element="earth"]:hover { opacity: 1; color: #78350f; }
        [data-theme="light"] .category-title.collapsible[data-element="metal"]:hover { opacity: 1; color: #78350f; }
        [data-theme="light"] .category-title.collapsible[data-element="water"]:hover { opacity: 1; color: #0c4a6e; }
        [data-theme="light"] .category-title.collapsible[data-element="brand"]:hover { opacity: 1; color: #3b0764; }

        /* 탭 메뉴 */
        .tabbed-menu-section .tab-headers {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            border-bottom: 2px solid rgba(140, 43, 238, 0.1);
            padding-bottom: 10px;
        }

        .tabbed-menu-section .tab-header {
            padding: 12px 24px;
            border: none;
            background: transparent;
            color: #94a3b8;
            font-weight: 600;
            cursor: pointer;
            border-radius: 8px 8px 0 0;
            transition: all 0.2s;
        }

        .tabbed-menu-section .tab-header:hover {
            background: rgba(140, 43, 238, 0.1);
            color: var(--theme-primary, #8c2bee);
        }

        .tabbed-menu-section .tab-header.active {
            background: var(--theme-primary, #8c2bee);
            color: white;
        }

        .tabbed-menu-section .tab-content {
            display: none;
        }

        .tabbed-menu-section .tab-content.active {
            display: block;
            animation: fadeIn 0.3s;
        }

        /* 슬라이더 */
        .slider-section {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
        }

        .slider-track {
            display: flex;
            transition: transform 0.5s ease;
        }

        .slider-item {
            min-width: 100%;
            display: none;
        }

        .slider-item.active {
            display: block;
        }

        .slider-prev, .slider-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            transition: all 0.2s;
        }

        .slider-prev {
            left: 20px;
        }

        .slider-next {
            right: 20px;
        }

        .slider-prev:hover, .slider-next:hover {
            background: white;
            transform: translateY(-50%) scale(1.1);
        }

        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .slider-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #cbd5e1;
            cursor: pointer;
            transition: all 0.2s;
        }

        .slider-dot.active {
            background: var(--theme-primary, #8c2bee);
            transform: scale(1.3);
        }

        /* 리스트 뷰 */
        .list-view-section {
            background: rgba(140, 43, 238, 0.03);
            border-radius: 16px;
            overflow: hidden;
        }

        .list-item {
            display: flex;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid rgba(140, 43, 238, 0.1);
            cursor: pointer;
            transition: all 0.2s;
        }

        .list-item:last-child {
            border-bottom: none;
        }

        .list-item:hover {
            background: rgba(140, 43, 238, 0.05);
        }

        .list-item-icon {
            font-size: 30px;
            margin-right: 20px;
        }

        .list-item-content {
            flex: 1;
        }

        .list-item-title {
            font-size: 16px;
            font-weight: 600;
            color: #1e293b;
        }

        .list-item-arrow {
            font-size: 24px;
            color: #cbd5e1;
        }

        /* 아코디언 */
        .accordion-section {
            background: rgba(140, 43, 238, 0.03);
            border-radius: 16px;
            overflow: hidden;
        }

        .accordion-item {
            border-bottom: 1px solid rgba(140, 43, 238, 0.1);
        }

        .accordion-item:last-child {
            border-bottom: none;
        }
        
        .accordion-header {
            width: 100%;
            text-align: left;
            padding: 20px;
            background: transparent;
            border: none;
            font-size: 16px;
            font-weight: 600;
            color: var(--theme-primary, #8c2bee);
            cursor: pointer;
            transition: all 0.2s;
        }

        .accordion-header:hover {
            background: rgba(140, 43, 238, 0.05);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .accordion-item.open .accordion-content {
            max-height: 500px;
        }

        .accordion-menu-item {
            padding: 15px 20px 15px 40px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .accordion-menu-item:hover {
            background: rgba(140, 43, 238, 0.08);
            color: var(--theme-primary, #8c2bee);
        }

        /* ========== 컴팩트 메뉴 카드 (랜딩/추천용) ========== */
        .compact-menu-grid {
            display: grid;
            gap: 15px;
            padding: 10px 0;
        }

        .compact-menu-card {
            padding: 18px 15px;
            border-radius: 14px;
            cursor: pointer;
            border: none;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            min-height: 110px;
            position: relative;
            overflow: hidden;
        }

        .compact-menu-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.05);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .compact-menu-card:hover {
            transform: translateY(-3px) scale(1.02);
        }

        .compact-menu-card:hover::before {
            opacity: 1;
        }

        .compact-menu-card:active {
            transform: translateY(-1px) scale(0.99);
        }

        .compact-card-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 45px;
        }

        .compact-multi-icon {
            display: flex;
            gap: 5px;
            align-items: center;
            justify-content: center;
        }

        .compact-card-title {
            font-size: 16px;
            line-height: 1.3;
            word-break: keep-all;
        }

        /* 컴팩트 메뉴 섹션 타이틀 */
        .compact-menu-section-title {
            font-size: 16px;
            font-weight: 700;
            color: #e2e8f0;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid rgba(140, 43, 238, 0.2);
        }

        @media (max-width: 768px) {
            .compact-menu-card {
                padding: 15px 12px;
                min-height: 100px;
                font-size: 16px;
            }

            .compact-card-title {
                font-size: 16px;
            }

            .compact-menu-grid {
                gap: 12px;
            }
        }

        @media (max-width: 480px) {
            .compact-menu-card {
                padding: 12px 10px;
                min-height: 90px;
                font-size: 16px;
            }

            .compact-card-icon {
                min-height: 35px;
            }

            .compact-card-title {
                font-size: 16px;
            }

            .compact-multi-icon {
                gap: 3px;
            }
        }

        @media (max-width: 768px) {
            .landing-section-hero .hero-title {
                font-size: 24px;
            }

            .section-title {
                font-size: 24px;
            }
        }

        /* ========================================
           일주 페르소나 스타일
           ======================================== */
        .ilju-persona-container {
            padding: 30px 20px 60px;
            max-width: 100%;
            animation: fadeIn 0.6s ease-out;
            color: var(--text-primary);
            font-size: 16px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }

        /* 헤더 */
        .persona-header {
            text-align: center;
            margin-bottom: 30px;
            padding: 22px 20px;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 16px;
        }

        .persona-badge {
            display: inline-block;
            padding: 6px 18px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-light);
            border-radius: 20px;
            font-size: 16px;
            color: var(--text-secondary);
            font-weight: 600;
            margin-bottom: 16px;
            letter-spacing: 1px;
        }

        .persona-main-title {
            font-size: 24px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 12px;
            line-height: 1.3;
        }

        .persona-subtitle {
            font-size: 16px;
            color: var(--text-secondary);
            font-weight: 400;
        }

        /* 일주 카드 */
        .persona-ilju-card {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 20px;
            padding: 30px 25px;
            text-align: center;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }

        .persona-ilju-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(140, 43, 238, 0.04) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .persona-ilju-badge {
            display: inline-block;
            padding: 5px 15px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-light);
            border-radius: 12px;
            font-size: 16px;
            color: var(--text-secondary);
            font-weight: 700;
            margin-bottom: 12px;
            position: relative;
            z-index: 1;
        }

        .persona-ilju-name {
            font-size: 30px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 10px;
            position: relative;
            z-index: 1;
        }

        .persona-ilju-symbol {
            font-size: 16px;
            color: var(--text-secondary);
            font-weight: 500;
            position: relative;
            z-index: 1;
        }

        /* 캐치프레이즈 */
        .persona-catchphrase {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-left: 4px solid var(--text-secondary);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .catchphrase-icon {
            font-size: 24px;
            flex-shrink: 0;
        }

        .catchphrase-text {
            font-size: 16px;
            line-height: 1.6;
            color: var(--text-primary);
            font-weight: 500;
        }

        /* 키워드 섹션 */
        .persona-keywords-section {
            margin-bottom: 40px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .title-icon {
            font-size: 16px;
        }

        .keywords-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .keyword-card {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 14px;
            padding: 16px;
            transition: all 0.3s ease;
            opacity: 0;
            animation: fadeInUp 0.6s ease-out forwards;
        }

        .keyword-card:hover {
            transform: translateY(-2px);
            border-color: var(--border-medium);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }

        .keyword-card.keyword-essence {
            border-left: 4px solid #ef4444;
        }

        .keyword-card.keyword-social {
            border-left: 4px solid #3b82f6;
        }

        .keyword-card.keyword-caution {
            border-left: 4px solid #f59e0b;
        }

        .keyword-card.keyword-growth {
            border-left: 4px solid #10b981;
        }

        .keyword-card.keyword-special {
            border-left: 4px solid #8b5cf6;
        }

        .keyword-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .keyword-icon {
            font-size: 24px;
        }

        .keyword-hashtag {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .keyword-category {
            font-size: 16px;
            color: var(--text-secondary);
            margin-bottom: 6px;
            font-weight: 600;
        }

        .keyword-description {
            font-size: 16px;
            line-height: 1.6;
            color: var(--text-secondary);
        }

        /* 특성 섹션 */
        .persona-traits-section {
            margin-bottom: 40px;
        }

        .traits-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .trait-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 12px;
            opacity: 0;
            animation: fadeInUp 0.6s ease-out forwards;
        }

        .trait-bullet {
            color: var(--text-secondary);
            font-size: 16px;
            line-height: 1;
            flex-shrink: 0;
        }

        .trait-text {
            font-size: 16px;
            line-height: 1.6;
            color: var(--text-primary);
        }

        /* 라이프스타일 섹션 */
        .persona-lifestyle-section {
            margin-bottom: 40px;
        }

        .lifestyle-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }

        .lifestyle-card {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 14px;
            padding: 16px;
            text-align: center;
        }

        .card-strength {
            border-top: 3px solid #10b981;
        }

        .card-caution {
            border-top: 3px solid #f59e0b;
        }

        .lifestyle-icon {
            font-size: 38px;
            margin-bottom: 10px;
        }

        .lifestyle-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .lifestyle-text {
            font-size: 16px;
            line-height: 1.5;
            color: var(--text-secondary);
        }

        .lifestyle-lucky {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 14px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .lucky-icon {
            font-size: 38px;
            flex-shrink: 0;
        }

        .lucky-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .lucky-items {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .lucky-item {
            display: inline-block;
            padding: 5px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-light);
            border-radius: 20px;
            font-size: 16px;
            color: var(--text-secondary);
        }

        /* 메시지 */
        .persona-message {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 16px;
            padding: 24px 20px;
            text-align: center;
            margin-bottom: 20px;
            position: relative;
        }

        .message-quote-icon {
            font-size: 40px;
            color: rgba(100, 116, 139, 0.25);
            line-height: 0.5;
            margin-bottom: 10px;
        }

        .message-text {
            font-size: 16px;
            line-height: 1.7;
            color: var(--text-primary);
            font-weight: 500;
            margin-bottom: 12px;
        }

        .message-signature {
            font-size: 16px;
            color: var(--text-secondary);
            font-style: italic;
        }

        /* 색상 팔레트 */
        .persona-color-palette {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 14px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
        }

        .palette-label {
            font-size: 16px;
            color: var(--text-secondary);
            margin-bottom: 14px;
            font-weight: 600;
        }

        .color-swatches {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 15px;
        }

        .color-swatch {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            border: 2px solid var(--border-light);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .color-swatch:hover {
            transform: scale(1.12);
            border-color: var(--border-medium);
        }

        .element-label {
            font-size: 16px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        /* 복귀 버튼 */
        .persona-back-wrap {
            margin-top: 24px;
        }

        .persona-back-btn {
            width: 100%;
            padding: 13px 16px;
            background: #0f172a;
            border: 1px solid #334155;
            border-radius: 12px;
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
            transition: all 0.2s ease;
        }

        .persona-back-btn:hover {
            background: #1e293b;
            color: #ffffff;
            border-color: #475569;
        }

        /* 반응형 */
        @media (max-width: 480px) {
            .persona-main-title {
                font-size: 24px;
            }

            .persona-ilju-name {
                font-size: 24px;
            }

            .catchphrase-text {
                font-size: 16px;
            }

            .lifestyle-grid {
                grid-template-columns: 1fr;
            }

            .keywords-grid {
                gap: 12px;
            }

            .keyword-card {
                padding: 15px;
            }
        }

        /* ============================================================
         * 📱 전역 반응형 폰트 스케일링
         *  - .form-card 는 모든 결과 페이지 UI 파일의 최상위 래퍼
         *  - font-size 를 clamp()로 설정하면 내부 모든 em 단위가
         *    비례 축소되어 현재·미래 모든 페이지에 자동 적용됨
         * ============================================================ */

        /* 모든 결과 페이지 컨테이너 — 현재 28개 UI 파일 및 미래 파일 포함 */
        .form-card {
            font-size: clamp(12px, 2vw + 4px, 16px);
            word-break: keep-all;
            overflow-x: hidden;
        }

        /* 랜딩 페이지 콘텐츠 영역 (renderContentByType 출력 대상) */
        #landingPageContainer {
            word-break: keep-all;
            overflow-x: hidden;
        }

        /* 모바일: 큰 마진/패딩 축소 */
        @media (max-width: 768px) {
            .form-card {
                padding: 16px !important;
            }
            /* 섹션 헤딩 과도한 상단 마진 축소 */
            .form-card h3 {
                margin-top: 28px !important;
                margin-bottom: 16px !important;
            }
        }

        /* 소형 스마트폰 (375px 이하) — 기준 폰트 추가 축소 */
        @media (max-width: 375px) {
            .form-card {
                font-size: 16px;
            }
        }

        /* 프로그레스 바 최소 너비 보장 */
        @media (max-width: 480px) {
            .form-card [style*="max-width: 500px"] {
                max-width: 100% !important;
            }
            /* 그리드 레이아웃 — 모바일에서 단일 컬럼 */
            .form-card [style*="grid-template-columns: repeat(auto-fit"] {
                grid-template-columns: 1fr !important;
            }
        }