/* ── Houdini: 회전 테두리 각도 속성 ─────────────────────── */
        @property --cat-border-angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }
        @keyframes cat-border-rotate {
            to { --cat-border-angle: 360deg; }
        }

        :root {
            --primary-color: #0A192F;
            --accent-color: #E63946;
            --bg-light: #F4F5F7;
            --text-dark: #333333;
            --text-light: #666666;
            --white: #FFFFFF;
            --border-color: #E2E8F0;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: var(--bg-light);
            color: var(--text-dark);
            height: 100vh;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        /* Sidebar Styles */
        .sidebar {
            width: 260px;
            flex-shrink: 0;
            background: #0f0f0f;
            color: var(--white);
            display: flex;
            flex-direction: column;
            padding: 24px 16px;
            border-right: 1px solid #1c1c1c;
            height: 100vh;
            min-height: 100vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            scrollbar-width: thin;
            scrollbar-color: #2a2a2a transparent;
        }

        .sidebar::-webkit-scrollbar {
            width: 4px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: transparent;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: #2a2a2a;
            border-radius: 4px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover {
            background: #3a3a3a;
        }

        /* 사이드바 닫기 버튼 행 — 데스크탑에서 숨김 */
        #sidebar-close-row {
            display: none;
        }

        #sidebar-close-btn {
            background: none;
            border: none;
            color: #94a3b8;
            font-size: 20px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            min-width: 44px;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            transition: background 0.15s, color 0.15s;
        }

        #sidebar-close-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .logo {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 4px;
            line-height: 1.3;
        }

        .logo span {
            color: var(--accent-color);
        }

        .brand-subtitle {
            font-size: 11px;
            color: #556170;
            margin-bottom: 20px;
            padding-bottom: 0;
            border-bottom: none;
        }

        .nav-section-label {
            font-size: 10px;
            font-weight: 700;
            color: #64748b;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 0 10px;
            margin: 4px 0 6px;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 7px 10px 7px 12px;
            margin-bottom: 2px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: #94a3b8;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
            border-left: 3px solid transparent;
        }

        .nav-item .nav-icon {
            font-size: 14px;
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 6px;
            transition: background 0.15s;
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, 0.09);
            color: #e2e8f0;
            border-left-color: rgba(230, 57, 70, 0.5);
        }

        .nav-item:hover .nav-icon {
            background: rgba(255, 255, 255, 0.12);
        }

        .nav-item.active {
            background: rgba(230, 57, 70, 0.13);
            color: #f87171;
            border-left-color: #e63946;
            font-weight: 700;
        }

        .nav-item.active .nav-icon {
            background: rgba(230, 57, 70, 0.22);
        }

        .nav-item-primary {
            position: relative;
            overflow: hidden;
            padding: 13px 12px 13px 10px;
            margin-bottom: 6px;
            align-items: center;
            min-height: 58px;
        }

        @media (max-height: 900px) {
            .nav-item-primary {
                padding-top: 11px;
                padding-bottom: 11px;
                min-height: 54px;
            }
        }

        /* ── 나의 AI 학습 비서 — 인디고/보라 테마 ── */
        .nav-item-ai {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.17) 0%, rgba(99, 102, 241, 0.05) 100%);
            border: 1px solid rgba(139, 92, 246, 0.25);
            border-left: 3px solid rgba(139, 92, 246, 0.55);
            color: #c4b5fd;
            animation: navGlowAI 3s ease-in-out infinite;
            transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.3s;
        }

        .nav-item-ai::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.7), transparent);
            animation: navScanV 7s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }

        .nav-item-ai::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 45%;
            background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.14), transparent);
            animation: navShimmer 5s ease-in-out infinite;
            pointer-events: none;
        }

        .nav-item-ai:hover {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.28) 0%, rgba(99, 102, 241, 0.11) 100%);
            border-left-color: #a78bfa;
            color: #ede9fe;
            transform: translateX(3px);
        }

        .nav-item-ai.active {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.28) 0%, rgba(99, 102, 241, 0.12) 100%);
            border-left-color: #8b5cf6;
            color: #ddd6fe;
        }

        /* ── 학습 대시보드 — 레드 테마 ────────────── */
        .nav-item-dash {
            background: linear-gradient(135deg, rgba(230, 57, 70, 0.17) 0%, rgba(230, 57, 70, 0.05) 100%);
            border: 1px solid rgba(230, 57, 70, 0.25);
            border-left: 3px solid rgba(230, 57, 70, 0.55);
            color: #fca5a5;
            animation: navGlowRed 3.5s ease-in-out infinite 1.5s;
            transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.3s;
        }

        .nav-item-dash::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(230, 57, 70, 0.75), transparent);
            animation: navScanV 7s ease-in-out infinite 3.5s;
            pointer-events: none;
            z-index: 1;
        }

        .nav-item-dash::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 45%;
            background: linear-gradient(90deg, transparent, rgba(230, 57, 70, 0.13), transparent);
            animation: navShimmer 5s ease-in-out infinite 1.5s;
            pointer-events: none;
        }

        .nav-item-dash:hover {
            background: linear-gradient(135deg, rgba(230, 57, 70, 0.28) 0%, rgba(230, 57, 70, 0.11) 100%);
            border-left-color: #e63946;
            color: #fff1f2;
            transform: translateX(3px);
        }

        .nav-item-dash.active {
            background: linear-gradient(135deg, rgba(230, 57, 70, 0.28) 0%, rgba(230, 57, 70, 0.12) 100%);
            border-left-color: #e63946;
            color: #fca5a5;
        }

        /* ── 핵심 기능 카드 애니메이션 키프레임 ────── */
        @keyframes navShimmer {
            0% {
                transform: translateX(-160%);
            }

            60%,
            100% {
                transform: translateX(380%);
            }
        }

        /* 위→아래 스캔라인 */
        @keyframes navScanV {
            0% {
                top: -1px;
                opacity: 0;
            }

            5% {
                opacity: 1;
            }

            85% {
                opacity: 0.8;
            }

            100% {
                top: calc(100% + 1px);
                opacity: 0;
            }
        }

        @keyframes navGlowAI {

            0%,
            100% {
                box-shadow: none;
            }

            50% {
                box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(99, 102, 241, 0.12);
            }
        }

        .nav-label-ai {
            transition: text-shadow 0.25s, letter-spacing 0.25s;
        }

        .nav-item-ai:hover .nav-label-ai {
            text-shadow: 0 0 10px rgba(167, 139, 250, 0.7), 0 0 20px rgba(139, 92, 246, 0.35);
            letter-spacing: 0.025em;
        }

        .nav-label-dash {
            transition: text-shadow 0.25s, letter-spacing 0.25s;
        }

        .nav-item-dash:hover .nav-label-dash {
            text-shadow: 0 0 10px rgba(230, 57, 70, 0.7), 0 0 20px rgba(230, 57, 70, 0.35);
            letter-spacing: 0.025em;
        }

        /* 심장 박동 패턴 */
        @keyframes navGlowRed {

            0%,
            100% {
                box-shadow: none;
            }

            15% {
                box-shadow: 0 0 14px rgba(230, 57, 70, 0.35);
            }

            30% {
                box-shadow: 0 0 5px rgba(230, 57, 70, 0.1);
            }

            45% {
                box-shadow: 0 0 22px rgba(230, 57, 70, 0.4);
            }

            70% {
                box-shadow: none;
            }
        }

        @keyframes iconFloat {

            0%,
            100% {
                transform: translateY(0) scale(1);
            }

            50% {
                transform: translateY(-2px) scale(1.07);
            }
        }

        @keyframes liveDotPulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
            }

            50% {
                box-shadow: 0 0 0 5px rgba(74, 222, 128, 0);
            }
        }

        /* 메트릭스 아이콘 핑 링 */
        @keyframes matrixPing {
            0% {
                transform: scale(0.85);
                opacity: 0.9;
            }

            70% {
                transform: scale(1.45);
                opacity: 0;
            }

            100% {
                transform: scale(1.45);
                opacity: 0;
            }
        }

        /* 메트릭스 초록 글로우 */
        @keyframes navGlowGreen {

            0%,
            100% {
                box-shadow: none;
            }

            50% {
                box-shadow: 0 0 20px rgba(16, 185, 129, 0.28), 0 0 40px rgba(5, 150, 105, 0.1);
            }
        }

        /* Main Content Styles */
        .main-content {
            flex: 1;
            padding: 40px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .header {
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 28px;
            font-weight: 700;
        }

        /* Dashboard Grid */
        .course-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 24px;
        }

        .course-card {
            background: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 0;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .card-thumb {
            width: 100%;
            aspect-ratio: 16/9;
            overflow: hidden;
            flex-shrink: 0;
        }
        .card-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s;
        }
        .course-card:hover .card-thumb img {
            transform: scale(1.03);
        }

        .card-grad-header {
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 18px;
            flex-shrink: 0;
        }
        .card-grad-icon {
            font-size: 26px;
            flex-shrink: 0;
        }
        .card-grad-label {
            font-size: 12px;
            font-weight: 800;
            color: rgba(255,255,255,0.9);
            letter-spacing: 0.5px;
        }

        .card-body {
            padding: 16px 18px 18px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .course-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
            border-color: var(--accent-color);
        }

        .access-badge-free {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 20px;
            background: #D1FAE5;
            color: #065F46;
            letter-spacing: 0.03em;
            flex-shrink: 0;
        }

        .access-badge-member {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 20px;
            background: #EEF2FF;
            color: #3730A3;
            flex-shrink: 0;
        }

        .course-card.member-only {
            opacity: 0.82;
        }

        .course-card.member-only:hover {
            opacity: 1;
        }

        .tag {
            display: inline-block;
            background-color: #FEE2E2;
            color: var(--accent-color);
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            margin-bottom: 12px;
        }

        .course-card h3 {
            font-size: 15px;
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .course-card p {
            font-size: 13px;
            color: var(--text-light);
            line-height: 1.6;
        }

        .course-card-action-btn {
            width: 100%;
            margin-top: 12px;
            padding: 9px 0;
            background: var(--primary-color);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.15s;
        }

        .course-card-action-btn:hover {
            opacity: 0.88;
        }

        /* Learning View Styles */
        #learning-view {
            display: none;
            background: var(--white);
            border-radius: 12px;
            padding: 30px;
            min-height: 80%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        }

        .back-btn {
            background: none;
            border: none;
            color: var(--text-light);
            cursor: pointer;
            font-size: 14px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .back-btn:hover {
            color: var(--primary-color);
            text-decoration: underline;
        }

        #course-title-display {
            font-size: 24px;
            margin-bottom: 24px;
        }

        /* 탭 래퍼 — 스크롤 페이드 인디케이터용 */
        .tabs-wrapper {
            position: relative;
        }

        .tabs-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: calc(100% - 1px);
            background: linear-gradient(to right, transparent, var(--bg-light));
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .tabs-wrapper.scrollable::after {
            opacity: 1;
        }

        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 30px;
        }

        .tab {
            padding: 12px 24px;
            cursor: pointer;
            font-weight: 600;
            color: var(--text-light);
            border-bottom: 3px solid transparent;
            transition: color 0.2s, border-bottom-color 0.2s, background 0.2s;
            border-radius: 6px 6px 0 0;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* 탭 아이콘 — 데스크탑에서 작게 */
        .tab-icon {
            font-size: 14px;
            flex-shrink: 0;
        }

        /* 모바일 짧은 레이블 — 데스크탑에서 숨김 */
        .tab-text-short {
            display: none;
        }

        .tab:hover:not(.active) {
            color: var(--primary-color);
            background: #F1F5F9;
            border-bottom-color: #CBD5E1;
        }

        .tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--accent-color);
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.3s;
        }

        .tab-content.active {
            display: block;
        }

        .tab-content-wrap {
            max-width: 832px;
            margin: 0 auto;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* Content Formatting */
        .section-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--primary-color);
        }

        ul.learning-list {
            list-style-type: disc;
            padding-left: 20px;
            margin-bottom: 30px;
            line-height: 1.8;
            color: #444;
        }

        .glossary-item {
            margin-bottom: 15px;
            padding: 15px;
            background: #F9FAFB;
            border-radius: 8px;
            border-left: 4px solid var(--accent-color);
        }

        .glossary-item strong {
            display: block;
            margin-bottom: 5px;
            color: var(--primary-color);
        }

        .link-btn {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 20px;
            background-color: transparent;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            transition: all 0.2s;
        }

        .link-btn:hover {
            background-color: var(--bg-light);
            border-color: #ccc;
        }

        /* Quiz Styles */
        .quiz-item {
            background: #F9FAFB;
            padding: 24px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .question {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            line-height: 1.4;
        }

        .option {
            display: block;
            padding: 12px 15px;
            margin-bottom: 8px;
            background: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 15px;
        }

        .option:hover {
            background: #F3F4F6;
        }

        .option input {
            margin-right: 10px;
        }

        .btn-submit {
            background-color: var(--primary-color);
            color: var(--white);
            border: none;
            padding: 12px 24px;
            font-size: 16px;
            border-radius: 6px;
            cursor: pointer;
            margin-top: 10px;
            font-weight: 600;
            transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
        }

        .btn-submit:hover {
            background-color: #1E3A5F;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(10, 25, 47, 0.25);
        }

        .btn-submit:active {
            transform: translateY(0);
            box-shadow: none;
        }

        /* ── AI 역량 진단소 ─────────────────────────── */
        .diag-hero {
            background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
            border-radius: 16px;
            padding: 28px 32px;
            margin-bottom: 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }

        .diag-section-label {
            font-size: 11px;
            font-weight: 800;
            color: #64748b;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .diag-section-label span {
            flex: 1;
            height: 1px;
            background: #e2e8f0;
        }

        .diag-set-card {
            border: 2px solid #e2e8f0;
            border-radius: 16px;
            padding: 20px 14px 16px;
            cursor: pointer;
            transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
            text-align: center;
            position: relative;
            overflow: hidden;
            background: #fff;
        }

        .diag-set-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
        }

        .diag-set-card.locked {
            opacity: 0.82;
        }

        .diag-set-card.locked:hover {
            transform: none;
            box-shadow: none;
            cursor: default;
        }

        .diag-q-header {
            padding: 16px 20px;
            background: #F8FAFC;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .diag-opt-card {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 13px 16px;
            margin-bottom: 8px;
            background: #fff;
            border: 1.5px solid #e2e8f0;
            border-radius: 10px;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
            text-align: left;
            font-size: 14px;
            line-height: 1.55;
            color: #1e293b;
            width: 100%;
        }

        .diag-opt-card:hover {
            border-color: var(--primary-color);
            background: #f5f3ff;
        }

        .diag-opt-card input[type="radio"] {
            width: 16px;
            height: 16px;
            accent-color: var(--primary-color);
            flex-shrink: 0;
            margin-top: 2px;
        }

        #quiz-feedback {
            margin-top: 20px;
            padding: 15px;
            border-radius: 6px;
            font-weight: 600;
            display: none;
        }

        .feedback-success {
            background: #D1FAE5;
            color: #065F46;
            border: 1px solid #A7F3D0;
        }

        .feedback-error {
            background: #FEE2E2;
            color: #991B1B;
            border: 1px solid #FECACA;
        }

        .video-placeholder {
            width: 100%;
            height: 400px;
            background: #E5E7EB;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            color: var(--text-light);
            font-weight: 600;
            font-size: 18px;
        }

        .favorite-btn:hover {
            transform: scale(1.1);
        }

        #my-glossary-view {
            display: none;
            background: var(--white);
            border-radius: 12px;
            padding: 30px;
            min-height: 80%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        }

        .level-filter-btn {
            padding: 6px 14px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            background: var(--white);
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-light);
            transition: all 0.2s;
        }

        .level-filter-btn:hover {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }

        .level-filter-btn.active-filter {
            background: var(--primary-color);
            color: var(--white);
            border-color: var(--primary-color);
        }

        /* Section Selector (top-level dashboard) */
        .section-selector-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }

        @media (min-width: 640px) {
            .section-selector-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 960px) {
            .section-selector-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }


        .section-selector-card {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #e8edf2;
            border-radius: 14px;
            padding: 0;
            cursor: pointer;
            overflow: hidden;
            transition: box-shadow 0.22s, transform 0.18s;
            min-height: 280px;
        }

        .section-selector-card:hover {
            box-shadow: 0 10px 32px rgba(10, 25, 47, 0.13);
            transform: translateY(-4px);
        }

        .ssc-grad-header {
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 16px 18px;
            flex-shrink: 0;
        }

        .ssc-grad-icon {
            font-size: 28px;
            flex-shrink: 0;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        .ssc-grad-title {
            font-size: 14px;
            font-weight: 800;
            color: #fff;
            line-height: 1.3;
            word-break: keep-all;
            overflow-wrap: break-word;
        }

        .ssc-grad-sub {
            font-size: 11px;
            color: rgba(255,255,255,0.75);
            margin-top: 2px;
            line-height: 1.4;
            word-break: keep-all;
            overflow-wrap: break-word;
        }

        .ssc-body {
            padding: 14px 18px 14px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .ssc-dimmed {
            opacity: 0.82;
        }

        .ssc-dimmed:hover {
            opacity: 1;
        }

        .ssc-header {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            margin-bottom: 12px;
            flex-shrink: 0;
        }

        .ssc-badge {
            width: 42px;
            height: 42px;
            border-radius: 11px;
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            letter-spacing: -0.5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
        }

        .ssc-title {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-dark);
            line-height: 1.35;
        }

        .ssc-subtitle {
            font-size: 11px;
            color: var(--text-light);
            line-height: 1.5;
            margin-top: 3px;
        }


        /* Article list inside MIT TR card */
        .ssc-articles {
            flex: 1;
            overflow: hidden;
            padding: 10px 18px 0;
        }

        .ssc-articles-page {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .ssc-article-item {
            display: flex;
            align-items: flex-start;
            gap: 7px;
            padding: 5px 0;
            border-bottom: 1px solid #F1F5F9;
        }

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

        /* MIT TR preview: show only 3 articles per page */
        #section-mit-tr .ssc-articles-page .ssc-article-item:nth-child(n+4) {
            display: none;
        }

        .ssc-article-tag {
            font-size: 9px;
            font-weight: 700;
            background: var(--primary-color);
            color: #fff;
            padding: 2px 5px;
            border-radius: 4px;
            white-space: nowrap;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .ssc-article-title {
            font-size: 11px;
            color: var(--text-dark);
            line-height: 1.4;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        /* Pending (coming soon) state */
        .ssc-pending {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: #F8FAFC;
            border: 1px dashed #CBD5E1;
            border-radius: 10px;
            margin: 10px 18px;
            padding: 18px 0;
        }

        .ssc-pending-icon {
            font-size: 26px;
            opacity: 0.7;
        }

        .ssc-pending-text {
            font-size: 11px;
            font-weight: 700;
            color: #94A3B8;
            letter-spacing: 0.04em;
        }

        /* Bottom bar */
        .ssc-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: auto;
            padding: 10px 18px 14px;
            border-top: 1px solid #F1F5F9;
            flex-shrink: 0;
        }

        .ssc-count {
            font-size: 11px;
            font-weight: 600;
            color: var(--primary-color);
            background: #EEF2FF;
            padding: 3px 10px;
            border-radius: 20px;
        }

        .ssc-page-nav {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .ssc-nav-btn {
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 50%;
            width: 22px;
            height: 22px;
            font-size: 13px;
            cursor: pointer;
            color: var(--text-light);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: background 0.15s, color 0.15s;
        }

        .ssc-nav-btn:hover {
            background: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
        }

        .ssc-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #CBD5E1;
            display: inline-block;
            transition: background 0.2s;
        }

        .ssc-dot.active {
            background: var(--primary-color);
        }

        .ssc-arrow {
            font-size: 15px;
            color: #CBD5E1;
            transition: color 0.2s, transform 0.2s;
        }

        .section-selector-card:hover .ssc-arrow {
            color: var(--accent-color);
            transform: translateX(4px);
        }

        .section-selector-card:hover .ssc-arrow {
            color: var(--primary-color);
            transform: translateX(4px);
        }

        /* AI 용어 사전 프리미엄 카드 */
        @keyframes glossary-bg-shift {
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        @keyframes glossary-glow-pulse {
            0%, 100% { box-shadow: 0 4px 24px rgba(76,29,149,0.3), 0 0 0 0 rgba(139,92,246,0); }
            50%       { box-shadow: 0 4px 32px rgba(76,29,149,0.5), 0 0 0 4px rgba(139,92,246,0.15); }
        }
        @keyframes glossary-orb {
            0%, 100% { transform: translate(0,0) scale(1); opacity: 0.25; }
            33%       { transform: translate(20px,-15px) scale(1.15); opacity: 0.4; }
            66%       { transform: translate(-10px,10px) scale(0.9); opacity: 0.2; }
        }
        @keyframes chip-in {
            from { opacity: 0; transform: translateY(6px) scale(0.9); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes marquee-scroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .glossary-promo-card {
            grid-column: 1 / -1;
            background: linear-gradient(120deg, #1e1040, #3b0764, #4c1d95, #1e1040);
            background-size: 300% 300%;
            animation: glossary-bg-shift 8s ease infinite, glossary-glow-pulse 3s ease-in-out infinite;
            border-radius: 16px;
            padding: 20px 24px;
            display: flex;
            align-items: center;
            gap: 24px;
            cursor: pointer;
            border: 1px solid rgba(139,92,246,0.4);
            transition: transform 0.2s;
            position: relative;
            overflow: hidden;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        .glossary-promo-card::before {
            content: '';
            position: absolute;
            top: -40px; right: 280px;
            width: 180px; height: 180px;
            background: radial-gradient(circle, rgba(167,139,250,0.3) 0%, transparent 70%);
            animation: glossary-orb 6s ease-in-out infinite;
            pointer-events: none;
        }
        .glossary-promo-card::after {
            content: '';
            position: absolute;
            bottom: -50px; right: 80px;
            width: 140px; height: 140px;
            background: radial-gradient(circle, rgba(109,40,217,0.35) 0%, transparent 70%);
            animation: glossary-orb 9s ease-in-out infinite reverse;
            pointer-events: none;
        }
        .glossary-promo-card:hover {
            transform: translateY(-2px);
        }
        .glossary-promo-left {
            flex: 0 0 280px;
            min-width: 0;
            max-width: 280px;
        }
        .glossary-promo-right {
            flex: 1;
            min-width: 0;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(167,139,250,0.2);
            border-radius: 12px;
            padding: 12px 16px;
            overflow: hidden;
        }
        .glossary-term-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        /* 마키 스크롤 래퍼 */
        .glossary-chips-marquee {
            overflow: hidden;
            width: 100%;
        }
        .glossary-chips-track {
            display: flex;
            gap: 6px;
            width: max-content;
            animation: marquee-scroll 60s linear infinite;
        }
        .glossary-chips-track-rev {
            display: flex;
            gap: 6px;
            width: max-content;
            animation: marquee-scroll-reverse 48s linear infinite;
        }
        .glossary-chips-track:hover,
        .glossary-chips-track-rev:hover {
            animation-play-state: paused;
        }
        .glossary-chip {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(167,139,250,0.35);
            color: #ddd6fe;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            white-space: nowrap;
            flex-shrink: 0;
            opacity: 0;
            animation: chip-in 0.4s ease forwards;
        }
        @media (max-width: 768px) {
            .glossary-promo-card { flex-direction: column; padding: 16px; }
            .glossary-promo-left { max-width: 100%; flex: none; width: 100%; }
            .glossary-promo-right { display: none; }
        }

        /* ── AI 기업·인물 검색 프로모 카드 ──────────────────────── */
        @keyframes search-bg-shift {
            0%, 100% { background-position: 0% 50%; }
            50%       { background-position: 100% 50%; }
        }
        @keyframes search-glow-pulse {
            0%, 100% { box-shadow: 0 0 24px rgba(6,182,212,0.08), 0 4px 20px rgba(251,191,36,0.12); }
            50%       { box-shadow: 0 0 48px rgba(6,182,212,0.22), 0 4px 20px rgba(251,191,36,0.18); }
        }
        @keyframes search-orb {
            0%, 100% { transform: translate(0,0) scale(1);    opacity: 0.3; }
            33%       { transform: translate(16px,-14px) scale(1.1); opacity: 0.45; }
            66%       { transform: translate(-10px,12px) scale(0.88); opacity: 0.2; }
        }
        @keyframes marquee-scroll-reverse {
            0%   { transform: translateX(-50%); }
            100% { transform: translateX(0); }
        }
        .ai-search-promo-card {
            background: linear-gradient(120deg, #020A1A, #0B1B4A, #0A3260, #020A1A);
            background-size: 300% 300%;
            animation: search-bg-shift 9s ease infinite, search-glow-pulse 3.5s ease-in-out infinite;
            border-radius: 16px;
            padding: 20px 24px;
            display: flex;
            align-items: center;
            gap: 24px;
            cursor: pointer;
            transition: transform 0.2s;
            position: relative;
            overflow: hidden;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        .ai-search-promo-card::before {
            content: '';
            position: absolute;
            top: -40px; right: 290px;
            width: 190px; height: 190px;
            background: radial-gradient(circle, rgba(6,182,212,0.28) 0%, transparent 70%);
            animation: search-orb 6.5s ease-in-out infinite;
            pointer-events: none;
        }
        .ai-search-promo-card::after {
            content: '';
            position: absolute;
            bottom: -55px; right: 70px;
            width: 150px; height: 150px;
            background: radial-gradient(circle, rgba(99,102,241,0.32) 0%, transparent 70%);
            animation: search-orb 10s ease-in-out infinite reverse;
            pointer-events: none;
        }
        .ai-search-promo-card:hover { transform: translateY(-2px); }
        .ai-search-promo-left {
            flex: 0 0 280px;
            min-width: 0;
            max-width: 280px;
        }
        .ai-search-promo-right {
            flex: 1;
            min-width: 0;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(6,182,212,0.18);
            border-radius: 12px;
            padding: 12px 16px;
            overflow: hidden;
        }
        .search-chips-marquee {
            overflow: hidden;
            width: 100%;
        }
        .search-chips-track {
            display: flex;
            gap: 6px;
            width: max-content;
            animation: marquee-scroll 40s linear infinite;
        }
        .search-chips-track-rev {
            display: flex;
            gap: 6px;
            width: max-content;
            animation: marquee-scroll-reverse 50s linear infinite;
        }
        .search-chips-track:hover,
        .search-chips-track-rev:hover { animation-play-state: paused; }
        .search-chip-co {
            background: rgba(6,182,212,0.12);
            border: 1px solid rgba(6,182,212,0.38);
            color: #67e8f9;
            font-size: 11px; font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            white-space: nowrap; flex-shrink: 0;
        }
        .search-chip-pe {
            background: rgba(99,102,241,0.12);
            border: 1px solid rgba(99,102,241,0.38);
            color: #a5b4fc;
            font-size: 11px; font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            white-space: nowrap; flex-shrink: 0;
        }
        /* ── VIP 카드 회전 테두리 래퍼 ─────────────────────────── */
        /* 래퍼의 padding 1.5px 영역 = 실제 보이는 테두리 */
        .vip-card-border-wrap {
            border-radius: 18px;
            padding: 1.5px;
            width: 100%;
            overflow: hidden;
            min-width: 0;
            /* 기본: 아쿠아 테두리 (enterprise planet 색상 통일) */
            background: linear-gradient(135deg,
                rgba(34,211,238,0.45),
                rgba(34,211,238,0.14),
                rgba(34,211,238,0.45));
            box-shadow: 0 4px 20px rgba(34,211,238,0.09);
            transition: box-shadow 0.3s, transform 0.25s;
        }
        .vip-card-border-wrap:hover {
            transform: translateY(-3px);
        }
        /* hover 시 카드 자체 transform 중복 제거 */
        .vip-card-border-wrap:hover > .ai-search-promo-card,
        .vip-card-border-wrap:hover > .glossary-promo-card,
        .vip-card-border-wrap:hover > a {
            transform: none;
        }
        /* search 카드 래퍼: 시안 회전 테두리 */
        .vip-card-border-wrap.search:hover {
            background: conic-gradient(from var(--cat-border-angle),
                transparent 0deg,
                rgba(34,211,238,1) 55deg,
                rgba(103,232,249,0.6) 80deg,
                transparent 110deg);
            animation: cat-border-rotate 1.4s linear infinite;
            box-shadow: 0 0 32px rgba(34,211,238,0.38), 0 8px 30px rgba(0,0,0,0.35);
        }
        /* glossary / speaker 카드 래퍼: 아쿠아 딥 회전 테두리 */
        .vip-card-border-wrap.evip-glossary:hover,
        .vip-card-border-wrap.evip-speaker:hover {
            background: conic-gradient(from var(--cat-border-angle),
                transparent 0deg,
                rgba(34,211,238,0.9) 55deg,
                rgba(6,182,212,0.55) 80deg,
                transparent 110deg);
            animation: cat-border-rotate 1.6s linear infinite;
            box-shadow: 0 0 28px rgba(34,211,238,0.28), 0 8px 30px rgba(0,0,0,0.35);
        }
        /* 래퍼 내 카드가 wrapper 높이를 채우도록 */
        .vip-card-border-wrap > .ai-search-promo-card,
        .vip-card-border-wrap > .glossary-promo-card,
        .vip-card-border-wrap > a { height: 100%; }

        /* ── Enterprise 하단 2열 그리드 ── */
        .evip-cards-bottom {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        /* ── Enterprise Hero 섹션 ── */
        /* ══════════════════════════════════════════════════════════
           Enterprise VIP 뷰 — 다크 우주 배경
           ══════════════════════════════════════════════════════════ */
        #enterprise-vip-view {
            margin: -40px;
            padding: 40px;
            min-height: calc(100% + 80px);
            box-sizing: border-box;
            position: relative;
            background:
                radial-gradient(ellipse 600px 350px at 15% 10%,  rgba(34,211,238,0.07)  0%, transparent 100%),
                radial-gradient(ellipse 500px 500px at 80% 65%,  rgba(14,116,144,0.08)  0%, transparent 100%),
                radial-gradient(ellipse 400px 300px at 50% 90%,  rgba(99,102,241,0.05)  0%, transparent 100%),
                linear-gradient(160deg, #070d1c 0%, #030810 50%, #020710 100%);
        }
        /* 별 필드 레이어 */
        #enterprise-vip-view::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 1px; height: 1px;
            pointer-events: none;
            z-index: 0;
            background: transparent;
            box-shadow:
                55px  38px 0 1px rgba(255,255,255,0.85),
                190px  80px 0 1px rgba(255,255,255,0.80),
                330px  22px 0 1px rgba(255,255,255,0.78),
                530px  60px 0 1px rgba(255,255,255,0.88),
                690px  95px 0 1px rgba(255,255,255,0.82),
                810px  28px 0 1px rgba(255,255,255,0.76),
                930px  72px 0 1px rgba(255,255,255,0.86),
                70px 490px 0 1px rgba(255,255,255,0.80),
                350px 530px 0 1px rgba(255,255,255,0.77),
                760px 515px 0 1px rgba(255,255,255,0.86),
                80px  145px 0 0px rgba(255,255,255,0.52),
                145px 218px 0 0px rgba(255,255,255,0.43),
                250px 190px 0 0px rgba(255,255,255,0.48),
                390px 150px 0 0px rgba(255,255,255,0.58),
                460px 212px 0 0px rgba(255,255,255,0.48),
                600px 175px 0 0px rgba(255,255,255,0.43),
                710px 235px 0 0px rgba(255,255,255,0.53),
                830px 160px 0 0px rgba(255,255,255,0.48),
                960px 200px 0 0px rgba(255,255,255,0.43),
                65px  285px 0 0px rgba(255,255,255,0.48),
                210px 315px 0 0px rgba(255,255,255,0.38),
                350px 300px 0 0px rgba(255,255,255,0.48),
                500px 275px 0 0px rgba(255,255,255,0.43),
                630px 310px 0 0px rgba(255,255,255,0.38),
                770px 290px 0 0px rgba(255,255,255,0.48),
                890px 325px 0 0px rgba(255,255,255,0.38),
                40px  395px 0 0px rgba(255,255,255,0.38),
                125px 370px 0 0px rgba(255,255,255,0.33),
                270px 425px 0 0px rgba(255,255,255,0.43),
                420px 385px 0 0px rgba(255,255,255,0.38),
                570px 420px 0 0px rgba(255,255,255,0.33),
                700px 365px 0 0px rgba(255,255,255,0.43),
                840px 405px 0 0px rgba(255,255,255,0.38),
                /* 컬러 별 (아쿠아/보라) */
                160px  45px 0 0px rgba(34,211,238,0.65),
                430px  90px 0 0px rgba(165,180,252,0.60),
                750px  38px 0 0px rgba(34,211,238,0.62),
                280px 228px 0 0px rgba(196,181,253,0.52),
                645px 258px 0 0px rgba(34,211,238,0.50),
                385px 455px 0 0px rgba(165,180,252,0.48),
                725px 440px 0 0px rgba(34,211,238,0.45);
        }
        /* 콘텐츠가 별/파티클 위에 */
        #enterprise-vip-view > * { position: relative; z-index: 1; }
        /* 뉴럴 파티클 캔버스 */
        #evip-neural-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            opacity: 0.45;
        }

        .evip-hero {
            position: relative;
            overflow: hidden;
            border-radius: 0;
            background: transparent;
            border: none;
            padding: 48px 40px;
            min-height: 344px;        /* 궤도 행성 잘림 방지 (외부 행성 반경 155px × 2 + 여유) */
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0;
            margin: 0 -40px 36px;    /* 좌우 full-bleed, 아래 여백 */
            box-shadow: none;
        }

        /* 텍스트: scene 위에 float */
        .evip-hero-text {
            position: relative;
            z-index: 2;
            flex-shrink: 0;
            max-width: 44%;
        }
        /* ── Enterprise Hero 우주 씬 — 배너 전체 덮개 ──────────── */
        .evip-scene {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 1;
            pointer-events: none;
        }
        /* 좌측 텍스트 영역 보호 페이드 — 뷰 다크 배경색(#07 0d1c) 기준 */
        .evip-scene-fade {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right,
                rgba(7,13,28,0.98) 0%,
                rgba(7,13,28,0.80) 20%,
                rgba(7,13,28,0.20) 42%,
                transparent 60%);
            z-index: 5;
            pointer-events: none;
        }
        /* ── 항성 궤도 시스템 ──────────────────────────────────── */
        .evip-planet-system {
            position: absolute;
            top: 50%;
            right: 6%;
            transform: translateY(-50%);
            width: 300px;
            height: 300px;
            pointer-events: none;
        }
        /* 메인 항성 — 시스템 정중앙 */
        .evip-scene-planet-orb {
            position: absolute;
            width: 120px;
            height: 120px;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle at 36% 32%,
                #ecfeff 0%, #a5f3fc 15%, #22d3ee 38%,
                #0891b2 62%, #0c4a6e 85%, #083344 100%);
            box-shadow:
                0 0 0 5px  rgba(34,211,238,0.10),
                0 0 20px   rgba(34,211,238,0.55),
                0 0 50px   rgba(34,211,238,0.28),
                0 0 90px   rgba(34,211,238,0.13),
                0 0 140px  rgba(34,211,238,0.06);
            animation: enterprise-star-pulse 4s ease-in-out infinite;
            z-index: 2;
        }
        /* 궤도 링 */
        .evip-orbit-ring {
            position: absolute;
            top: 50%; left: 50%;
            border-radius: 50%;
            border: 1px solid rgba(34,211,238,0.14);
            transform: translate(-50%, -50%);
        }
        .evip-ring-1 { width: 172px; height: 172px; }
        .evip-ring-2 { width: 228px; height: 228px; border-color: rgba(34,211,238,0.10); }
        .evip-ring-3 { width: 294px; height: 294px; border-color: rgba(34,211,238,0.07); }

        /* 공통 궤도 래퍼: 항성 중심(0,0)에서 회전 */
        .evip-orb-wrap {
            position: absolute;
            top: 50%; left: 50%;
            width: 0; height: 0;
            transform-origin: 0 0;
        }
        /* ── 행성 1 (주황/붉은) ── */
        .evip-orb-p1 { animation: orb-ccw 17s linear infinite; }
        .evip-mp1 {
            position: absolute;
            left: 114px; top: -9px;
            width: 18px; height: 18px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%,
                #fed7aa, #f97316 45%, #7c2d12 100%);
            box-shadow: 0 0 8px rgba(249,115,22,0.55);
            animation: orb-cw 17s linear infinite;
        }
        /* ── 행성 2 (보라/파랑) ── */
        .evip-orb-p2 {
            animation: orb-cw 26s linear infinite;
            animation-delay: -9s;
        }
        .evip-mp2 {
            position: absolute;
            left: 147px; top: -8px;
            width: 16px; height: 16px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 28%,
                #e9d5ff, #7c3aed 45%, #1e1b4b 100%);
            box-shadow: 0 0 8px rgba(124,58,237,0.55);
            animation: orb-ccw 26s linear infinite;
            animation-delay: -9s;
        }
        @keyframes orb-cw  { to { transform: rotate(360deg);  } }
        @keyframes orb-ccw { to { transform: rotate(-360deg); } }
        /* 우주선 SVG: 배너 정중앙 배치
           SVG viewBox -370~1200(선체 x≈410~1120, 중앙 x≈765)
           선체 중앙을 배너 50%에 맞추려면 left=50% - (765/1570)*width 보정 */
        .evip-scene-ship-wrap {
            position: absolute;
            top: 50%;
            left: 44%;           /* 46% → 44%: 살짝 왼쪽 */
            transform: translate(-48.7%, -50%);
            width: 42.5%;
        }
        .evip-scene-ship {
            display: block;
            width: 100%;
            filter: drop-shadow(0 0 4px rgba(34,211,238,0.10));
        }
        /* horizon line — 투명 배경에서 불필요하므로 제거 */
        .evip-hero::after { content: none; }
        .evip-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: #67E8F9;
            border: 1px solid rgba(34,211,238,0.30);
            padding: 4px 14px;
            border-radius: 30px;
            background: rgba(34,211,238,0.07);
            margin-bottom: 18px;
        }
        .evip-hero-badge::before {
            content: '';
            width: 5px; height: 5px;
            border-radius: 50%;
            background: #22D3EE;
            box-shadow: 0 0 6px #22D3EE;
            flex-shrink: 0;
        }
        .evip-hero-title {
            font-size: 30px;
            font-weight: 900;
            line-height: 1.25;
            letter-spacing: -0.025em;
            margin: 0 0 14px;
            background: linear-gradient(135deg, #F1F5F9 30%, #67E8F9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .evip-hero-sub {
            font-size: 13px;
            color: rgba(103,232,249,0.55);
            line-height: 1.75;
            max-width: 380px;
            margin: 0;
        }
        /* ── Enterprise Hero 우주 씬 ─────────────────────────────── */
        .evip-cosmos {
            position: relative;
            flex-shrink: 0;
            width: 230px;
            height: 210px;
        }

        /* 별빛 (box-shadow 트릭) */
        .evip-star-field {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            border-radius: 16px;
        }
        .evip-star-field::before,
        .evip-star-field::after {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 1px; height: 1px;
            background: transparent;
            box-shadow:
                18px  22px rgba(255,255,255,0.85),
                48px  12px rgba(165,243,252,0.75),
                82px  52px rgba(255,255,255,0.60),
                115px  8px rgba(165,243,252,0.70),
                152px 38px rgba(255,255,255,0.80),
                195px 18px rgba(165,243,252,0.65),
                220px 55px rgba(255,255,255,0.55),
                30px  80px rgba(165,243,252,0.60),
                70px 130px rgba(255,255,255,0.50),
                142px 92px rgba(165,243,252,0.70),
                180px 145px rgba(255,255,255,0.65),
                10px 165px rgba(165,243,252,0.55),
                95px 180px rgba(255,255,255,0.45),
                210px 175px rgba(165,243,252,0.60),
                55px 195px rgba(255,255,255,0.50),
                170px  5px rgba(255,255,255,0.70),
                228px  90px rgba(165,243,252,0.55);
            animation: evip-twinkle-a 3.8s ease-in-out infinite;
        }
        .evip-star-field::after {
            box-shadow:
                38px  45px rgba(165,243,252,0.55),
                105px 28px rgba(255,255,255,0.70),
                138px 75px rgba(165,243,252,0.60),
                185px 50px rgba(255,255,255,0.55),
                25px 115px rgba(165,243,252,0.65),
                215px 110px rgba(255,255,255,0.50),
                78px 160px rgba(165,243,252,0.45),
                148px 185px rgba(255,255,255,0.65),
                235px 30px rgba(165,243,252,0.60),
                8px 100px rgba(255,255,255,0.70),
                165px 200px rgba(165,243,252,0.50);
            animation: evip-twinkle-b 5.2s ease-in-out infinite;
            animation-delay: -2.1s;
        }
        @keyframes evip-twinkle-a {
            0%,100% { opacity: 0.55; }
            50%      { opacity: 1.00; }
        }
        @keyframes evip-twinkle-b {
            0%,100% { opacity: 0.70; }
            40%      { opacity: 0.30; }
            70%      { opacity: 1.00; }
        }

        /* SVG 궤도 링 */
        .evip-orbit-svg {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            overflow: visible;
        }

        /* 항성 (메인 행성) */
        .evip-main-planet {
            position: absolute;
            top: 50%; left: 50%;
            width: 76px; height: 76px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle at 36% 32%,
                #ecfeff 0%, #a5f3fc 15%, #22d3ee 38%, #0891b2 62%, #0c4a6e 85%, #083344 100%);
            box-shadow:
                0 0 0 8px  rgba(34,211,238,0.07),
                0 0 24px   rgba(34,211,238,0.60),
                0 0 55px   rgba(34,211,238,0.30),
                0 0 100px  rgba(34,211,238,0.14);
            animation: enterprise-star-pulse 4s ease-in-out infinite;
            z-index: 5;
        }

        /* ── offset-path 궤도 오비터 ────────────────────────────── */

        /* 내부 위성 (inner moon): rx=55, ry=20, 중심(115,105) */
        .evip-moon-1 {
            position: absolute;
            top: 0; left: 0;
            width: 10px; height: 10px;
            margin: -5px 0 0 -5px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%, #bae6fd 0%, #0284c7 100%);
            box-shadow: 0 0 6px rgba(14,165,233,0.90), 0 0 14px rgba(14,165,233,0.45);
            offset-path: path('M 60,105 a 55,20 0 1,0 110,0 a 55,20 0 1,0 -110,0');
            offset-rotate: 0deg;
            animation: evip-orbit-inner 7s linear infinite;
            z-index: 4;
        }

        /* 우주선: rx=98, ry=35, 중심(115,104)
           offset-rotate: auto — 로켓이 진행 방향으로 기수를 향함
           rocket 이모지는 기본 45° 기울기이므로 -45deg로 보정 */
        .evip-ship {
            position: absolute;
            top: 0; left: 0;
            font-size: 17px;
            line-height: 1;
            margin: -9px 0 0 -9px;
            offset-path: path('M 17,104 a 98,35 0 1,0 196,0 a 98,35 0 1,0 -196,0');
            offset-rotate: auto -45deg;
            /* 추력 맥동: 스케일로 엔진 힘 표현 */
            animation: evip-orbit-outer 15s linear infinite,
                       evip-ship-thrust 1.6s ease-in-out infinite;
            z-index: 7;
            transform-origin: center;
        }
        /* 🚀 뒤 엔진 화염 글로우 */
        .evip-ship::before {
            content: '';
            position: absolute;
            bottom: -4px; left: 50%;
            transform: translateX(-50%);
            width: 10px; height: 16px;
            border-radius: 0 0 50% 50%;
            background: radial-gradient(ellipse at 50% 0%,
                rgba(34,211,238,0.80) 0%,
                rgba(14,165,233,0.40) 40%,
                transparent 100%);
            filter: blur(3px);
            animation: evip-engine-flame 0.4s ease-in-out infinite alternate;
        }
        @keyframes evip-ship-thrust {
            0%,100% { filter: drop-shadow(0 0 5px rgba(34,211,238,0.85))
                              drop-shadow(0 0 10px rgba(34,211,238,0.45)); }
            50%      { filter: drop-shadow(0 0 8px rgba(34,211,238,1.0))
                              drop-shadow(0 0 18px rgba(34,211,238,0.65))
                              drop-shadow(0 0 30px rgba(34,211,238,0.30)); }
        }
        @keyframes evip-engine-flame {
            from { transform: translateX(-50%) scaleY(0.7) scaleX(0.8); opacity: 0.6; }
            to   { transform: translateX(-50%) scaleY(1.3) scaleX(1.1); opacity: 1.0; }
        }

        /* 소행성 (먼 납작 궤도): rx=72, ry=12, 중심(115,105) */
        .evip-asteroid {
            position: absolute;
            top: 0; left: 0;
            width: 6px; height: 6px;
            margin: -3px 0 0 -3px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%, rgba(165,243,252,0.9), #0891b2);
            box-shadow: 0 0 5px rgba(34,211,238,0.65);
            offset-path: path('M 43,105 a 72,12 0 1,0 144,0 a 72,12 0 1,0 -144,0');
            offset-rotate: 0deg;
            animation: evip-orbit-asteroid 19s linear infinite reverse;
            z-index: 3;
        }

        /* 우주 데이터센터 🛰️: rx=80, ry=28, 중심(115,106)
           반시계 방향 (rocket 반대) — 서로 다른 궤도면 느낌 */
        .evip-datacenter {
            position: absolute;
            top: 0; left: 0;
            width: 24px; height: 24px;
            margin: -12px 0 0 -12px;
            offset-path: path('M 35,106 a 80,28 0 1,0 160,0 a 80,28 0 1,0 -160,0');
            offset-rotate: 0deg;
            animation: evip-orbit-datacenter 11s linear infinite reverse;
            z-index: 6;
        }
        /* 위성 이모지 */
        .evip-datacenter-icon {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
            line-height: 1;
            filter: drop-shadow(0 0 5px rgba(34,211,238,0.80))
                    drop-shadow(0 0 12px rgba(34,211,238,0.40));
        }
        /* 데이터 전송 펄스 링 */
        .evip-datacenter::before,
        .evip-datacenter::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            width: 28px; height: 28px;
            margin: -14px 0 0 -14px;
            border-radius: 50%;
            border: 1.5px solid rgba(34,211,238,0.65);
            animation: evip-data-pulse 2.4s ease-out infinite;
        }
        .evip-datacenter::after {
            border-color: rgba(34,211,238,0.35);
            animation-delay: 1.2s;
        }
        @keyframes evip-data-pulse {
            0%   { transform: scale(0.55); opacity: 0.9; }
            100% { transform: scale(3.2);  opacity: 0.0; }
        }

        @keyframes evip-orbit-inner      { from{offset-distance:0%} to{offset-distance:100%} }
        @keyframes evip-orbit-outer      { from{offset-distance:0%} to{offset-distance:100%} }
        @keyframes evip-orbit-asteroid   { from{offset-distance:0%} to{offset-distance:100%} }
        @keyframes evip-orbit-datacenter { from{offset-distance:0%} to{offset-distance:100%} }

        /* ── 아쿠아 테마 glossary 카드 오버라이드 ── */
        .evip-aqua-card {
            background: linear-gradient(130deg, #020C1C, #051E30, #072535, #020C1C) !important;
            background-size: 300% 300% !important;
            border: 1px solid rgba(34,211,238,0.25) !important;
            animation: search-bg-shift 9s ease infinite, evip-aqua-pulse 3.5s ease-in-out infinite !important;
        }
        @keyframes evip-aqua-pulse {
            0%,100% { box-shadow: 0 0 20px rgba(34,211,238,0.07); }
            50%      { box-shadow: 0 0 40px rgba(34,211,238,0.18); }
        }
        .evip-aqua-card::before {
            background: radial-gradient(circle, rgba(34,211,238,0.20) 0%, transparent 70%) !important;
        }
        .evip-aqua-card::after {
            background: radial-gradient(circle, rgba(8,145,178,0.25) 0%, transparent 70%) !important;
        }
        .evip-aqua-right {
            border: 1px solid rgba(34,211,238,0.16) !important;
        }
        /* ── 아쿠아 glossary chip ── */
        .glossary-chip {
            background: rgba(34,211,238,0.10);
            border: 1px solid rgba(34,211,238,0.28);
            color: #67e8f9;
        }
        /* ── 연사 섭외 카드 (아쿠아-스카이 톤) ── */
        .evip-speaker-card {
            background: linear-gradient(135deg, #020C1C 0%, #051824 55%, #071E2E 100%) !important;
        }
        .evip-speaker-right {
            border: 1px solid rgba(34,211,238,0.16) !important;
        }
        /* 서비스 아이템 그리드 */
        .evip-service-items {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 8px;
            margin-bottom: 12px;
        }
        .evip-service-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            background: rgba(34,211,238,0.08);
            border: 1px solid rgba(34,211,238,0.20);
            border-radius: 10px;
            padding: 10px 6px;
            text-align: center;
            font-size: 10px;
            color: #a5f3fc;
            font-weight: 700;
            line-height: 1.4;
        }

        @media (max-width: 768px) {
            .ai-search-promo-card { flex-direction: column; padding: 16px; }
            .ai-search-promo-left { max-width: 100%; flex: none; width: 100%; }
            .ai-search-promo-right { display: none; }
            .evip-cards-bottom { grid-template-columns: 1fr; }
            .evip-hero { padding: 24px 20px; min-height: 220px; margin: 0 -20px 28px; }
            .evip-hero-title { font-size: 20px; }
            /* 씬을 오른쪽 절반에만 고정 — inset:0 덮어쓰기 */
            .evip-scene {
                left: auto !important;
                right: -20px;
                top: 0;
                bottom: 0;
                width: 46%;
                overflow: visible; /* 불꽃이 씬 밖으로 나와도 보이게 */
            }
            .evip-hero-text { max-width: 52%; }
            .evip-planet-system {
                right: auto;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 180px;
                height: 180px;
            }
            .evip-scene-planet-orb { width: 70px; height: 70px; }
            .evip-ring-1 { width: 110px; height: 110px; }
            .evip-ring-2 { width: 146px; height: 146px; }
            .evip-ring-3 { width: 185px; height: 185px; }
            .evip-mp1 { left: 73px; top: -7px; width: 14px; height: 14px; }
            .evip-mp2 { left: 94px; top: -6px; width: 12px; height: 12px; }
            /* 우주선: 10% 축소 + 위로 올림 + 불꽃 보이도록 좌측 여유 확보 */
            .evip-scene-ship-wrap {
                left: -18%;
                width: 117%;
                top: 50%;
            }
            /* 페이드 불필요 (씬이 이미 오른쪽에만 있음) */
            .evip-scene-fade { display: none; }
        }

        /* AI 용어 사전 */
        .glossary-sort-btn {
            padding: 6px 14px;
            border-radius: 20px;
            border: 1.5px solid #e2e8f0;
            background: #fff;
            color: var(--text-light);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }
        .glossary-sort-btn.active {
            background: #4c1d95;
            border-color: #4c1d95;
            color: #fff;
        }
        .glossary-sort-btn:hover:not(.active) {
            border-color: #6d28d9;
            color: #4c1d95;
        }
        .glossary-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .glossary-initial-header {
            grid-column: 1 / -1;
            font-size: 15px;
            font-weight: 800;
            color: #4c1d95;
            background: #ede9fe;
            padding: 6px 14px;
            border-radius: 8px;
            letter-spacing: 1px;
            margin-top: 8px;
        }
        .glossary-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: box-shadow 0.15s;
            overflow: hidden;
            min-width: 0;
        }
        .glossary-card:hover {
            box-shadow: 0 4px 16px rgba(76,29,149,0.10);
            border-color: #c4b5fd;
        }
        .glossary-term {
            font-size: 14px;
            font-weight: 700;
            color: #0f172a;
        }
        .glossary-desc {
            font-size: 12px;
            color: #475569;
            line-height: 1.6;
            flex: 1;
            word-break: keep-all;
            overflow-wrap: break-word;
        }
        .glossary-source {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 4px;
        }
        .glossary-source-badge {
            font-size: 9px;
            font-weight: 700;
            background: #ede9fe;
            color: #4c1d95;
            padding: 2px 6px;
            border-radius: 4px;
            white-space: nowrap;
        }
        .glossary-source-title {
            font-size: 11px;
            color: #94a3b8;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
            flex: 1;
        }
        @keyframes glossary-highlight-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(109,40,217,0.5); background: #ede9fe; }
            50%  { box-shadow: 0 0 0 6px rgba(109,40,217,0.15); background: #f5f3ff; }
            100% { box-shadow: 0 0 0 0 rgba(109,40,217,0); background: #fff; }
        }
        .glossary-card-highlight {
            animation: glossary-highlight-pulse 2s ease forwards;
        }
        .glossary-source-link {
            transition: color 0.15s;
        }
        .glossary-source:hover .glossary-source-link {
            color: #6d28d9;
            text-decoration: underline;
        }
        .glossary-source:hover .glossary-source-badge {
            background: #ddd6fe;
        }
        @media (max-width: 640px) {
            .glossary-grid { grid-template-columns: 1fr; }
        }

        /* Sign Up Form */
        #signup-box {
            scrollbar-width: thin;
            scrollbar-color: #CBD5E1 transparent;
        }

        #signup-box::-webkit-scrollbar {
            width: 5px;
        }

        #signup-box::-webkit-scrollbar-track {
            background: transparent;
        }

        #signup-box::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 10px;
        }

        .su-hero {
            background: linear-gradient(145deg, #0A192F 0%, #112240 60%, #1a2f4e 100%);
            padding: 36px 40px 28px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .su-hero::before {
            content: '';
            position: absolute;
            top: -60px;
            right: -60px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(230, 57, 70, 0.08);
        }

        .su-hero::after {
            content: '';
            position: absolute;
            bottom: -40px;
            left: -40px;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.03);
        }

        .su-hero-logo {
            font-size: 24px;
            font-weight: 900;
            color: #fff;
            letter-spacing: -0.5px;
            line-height: 1.2;
            position: relative;
            z-index: 1;
        }

        .su-hero-logo span {
            color: var(--accent-color);
        }

        .su-hero-sub {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.45);
            margin-top: 2px;
            text-transform: uppercase;
            position: relative;
            z-index: 1;
        }

        .su-hero-title {
            font-size: 20px;
            font-weight: 800;
            color: #fff;
            margin-top: 18px;
            line-height: 1.3;
            position: relative;
            z-index: 1;
        }

        .su-hero-title span {
            color: var(--accent-color);
        }

        .su-hero-desc {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.55);
            margin-top: 8px;
            line-height: 1.7;
            position: relative;
            z-index: 1;
        }

        .su-benefits {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            position: relative;
            z-index: 1;
            flex-wrap: wrap;
        }

        .su-benefit-chip {
            display: flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 600;
        }

        .su-benefit-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent-color);
        }

        .su-avatar-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            margin-bottom: 24px;
        }

        .su-avatar-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1E3A5F, #0A192F);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #fff;
            cursor: pointer;
            overflow: hidden;
            border: 3px solid #E2E8F0;
            box-shadow: 0 4px 14px rgba(10, 25, 47, 0.15);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .su-avatar-circle:hover {
            transform: scale(1.06);
            box-shadow: 0 8px 24px rgba(10, 25, 47, 0.22);
        }

        .su-avatar-hint {
            font-size: 11px;
            color: #94A3B8;
        }

        .su-section-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 800;
            color: #94A3B8;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 12px;
            margin-top: 4px;
        }

        .su-section-label::before,
        .su-section-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #E2E8F0;
        }

        .su-lock-notice {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
            border: 1px solid #FDE68A;
            border-radius: 10px;
            padding: 11px 14px;
            margin-bottom: 16px;
        }

        .su-lock-notice-icon {
            font-size: 15px;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .su-lock-notice-text {
            font-size: 12px;
            color: #92400E;
            line-height: 1.6;
            font-weight: 500;
        }

        .su-lock-notice-text strong {
            font-weight: 800;
            color: #78350F;
        }

        .su-field {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .su-label {
            font-size: 11px;
            font-weight: 700;
            color: #64748B;
            display: flex;
            align-items: center;
            gap: 5px;
            text-align: left;
            letter-spacing: 0.02em;
        }

        .su-req {
            font-size: 9px;
            font-weight: 800;
            color: var(--accent-color);
            background: #FEE2E2;
            padding: 1px 5px;
            border-radius: 4px;
        }

        .su-input {
            padding: 11px 14px;
            border: 1.5px solid #E2E8F0;
            border-radius: 9px;
            font-size: 14px;
            color: var(--text-dark);
            background: #FAFBFC;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
            width: 100%;
            box-sizing: border-box;
        }

        .su-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(10, 25, 47, 0.07);
            background: #fff;
        }

        .su-input::placeholder {
            color: #CBD5E1;
        }

        /* number 스피너 제거 */
        .su-input[type=number]::-webkit-inner-spin-button,
        .su-input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .su-input[type=number] {
            -moz-appearance: textfield;
        }

        .su-submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #0A192F 0%, #1E3A5F 100%);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 800;
            cursor: pointer;
            letter-spacing: 0.03em;
            transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
            box-shadow: 0 4px 16px rgba(10, 25, 47, 0.25);
            margin-top: 4px;
            margin-bottom: 16px;
        }

        .su-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(10, 25, 47, 0.32);
        }

        .su-submit-btn:active {
            transform: translateY(0);
            box-shadow: none;
        }

        .su-login-link {
            text-align: center;
            font-size: 13px;
            color: var(--text-light);
            padding-bottom: 4px;
        }

        .su-login-link a {
            color: var(--primary-color);
            font-weight: 700;
            text-decoration: none;
            border-bottom: 1.5px solid transparent;
            transition: border-color 0.2s;
        }

        .su-login-link a:hover {
            border-bottom-color: var(--primary-color);
        }

        /* ── Admin ─────────────────────────────────────────── */
        #admin-wrapper {
            display: none;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .admin-layout {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        .admin-sidebar {
            width: 220px;
            flex-shrink: 0;
            background: #0A192F;
            color: #fff;
            display: flex;
            flex-direction: column;
            padding: 28px 16px 24px;
        }

        .admin-logo {
            font-size: 18px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 4px;
        }

        .admin-logo span {
            color: var(--accent-color);
        }

        .admin-logo-sub {
            font-size: 10px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.35);
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 28px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .admin-nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 14px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 4px;
            transition: background 0.15s, color 0.15s;
        }

        .admin-nav-item:hover {
            background: rgba(255, 255, 255, 0.07);
            color: #fff;
        }

        .admin-nav-item.active {
            background: rgba(230, 57, 70, 0.18);
            color: #fff;
        }

        .admin-nav-icon {
            font-size: 15px;
            width: 20px;
            text-align: center;
        }

        .admin-main {
            flex: 1;
            overflow-y: auto;
            background: #F4F5F7;
            padding: 32px 36px;
        }

        .admin-page {
            display: none;
        }

        .admin-page.active {
            display: block;
        }

        .admin-page-title {
            font-size: 22px;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 6px;
        }

        .admin-page-sub {
            font-size: 13px;
            color: var(--text-light);
            margin-bottom: 24px;
        }

        .admin-stat-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 28px;
        }

        .admin-stat-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid var(--border-color);
        }

        .admin-stat-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-light);
            margin-bottom: 8px;
            letter-spacing: 0.04em;
        }

        .admin-stat-value {
            font-size: 28px;
            font-weight: 900;
            color: var(--primary-color);
            line-height: 1;
        }

        .admin-stat-value span {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-light);
        }

        .admin-stat-badge {
            display: inline-block;
            margin-top: 6px;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 20px;
            background: #D1FAE5;
            color: #065F46;
        }

        .admin-card {
            background: #fff;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            margin-bottom: 24px;
            overflow: hidden;
        }

        .admin-card-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .admin-card-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-dark);
        }

        .admin-table {
            width: 100%;
            border-collapse: collapse;
        }

        .admin-table th {
            background: #F8FAFC;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-light);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 10px 16px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .admin-table td {
            padding: 12px 16px;
            font-size: 13px;
            color: var(--text-dark);
            border-bottom: 1px solid #F1F5F9;
            vertical-align: middle;
        }

        .admin-table tr:last-child td {
            border-bottom: none;
        }

        .admin-table tr:hover td {
            background: #FAFBFC;
        }

        .admin-plan-badge {
            display: inline-block;
            padding: 3px 9px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
        }

        .admin-progress-bar {
            height: 6px;
            background: #E2E8F0;
            border-radius: 10px;
            overflow: hidden;
            width: 100px;
        }

        .admin-progress-fill {
            height: 100%;
            border-radius: 10px;
            background: linear-gradient(90deg, var(--primary-color), #1E3A5F);
        }

        .admin-bar-chart {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            height: 160px;
            padding: 0 4px;
        }

        .admin-bar-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            flex: 1;
        }

        .admin-bar {
            width: 100%;
            border-radius: 6px 6px 0 0;
            background: linear-gradient(180deg, #1E3A5F, #0A192F);
            transition: opacity 0.2s;
            cursor: default;
            min-height: 4px;
        }

        .admin-bar:hover {
            opacity: 0.75;
        }

        .admin-bar-label {
            font-size: 10px;
            color: var(--text-light);
            font-weight: 600;
        }

        .admin-bar-val {
            font-size: 10px;
            color: var(--primary-color);
            font-weight: 700;
        }

        .admin-detail-btn {
            padding: 5px 12px;
            background: #F1F5F9;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            color: var(--primary-color);
            transition: background 0.15s;
        }

        .admin-detail-btn:hover {
            background: #E2E8F0;
        }

        /* ── AI 개념 미리보기 팝업 ── */
        #concept-preview-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.48);
            z-index: 1100;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        #concept-preview-overlay.open {
            display: flex;
        }

        #concept-preview-modal {
            background: #fff;
            border-radius: 20px;
            padding: 32px 28px 28px;
            max-width: 420px;
            width: 100%;
            position: relative;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
            animation: cpFadeIn .2s ease;
        }

        @keyframes cpFadeIn {
            from {
                opacity: 0;
                transform: translateY(12px) scale(.97);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        #concept-preview-modal .cp-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            background: #F1F5F9;
            color: #64748B;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s;
        }

        #concept-preview-modal .cp-close:hover {
            background: #E2E8F0;
        }

        .cp-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #D1FAE5;
            color: #065F46;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            margin-bottom: 14px;
        }

        .cp-title {
            font-size: 20px;
            font-weight: 800;
            color: #0F172A;
            line-height: 1.3;
            margin-bottom: 12px;
        }

        .cp-desc {
            font-size: 14px;
            color: #475569;
            line-height: 1.75;
            margin-bottom: 20px;
        }

        .cp-meta {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }

        .cp-meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 600;
            color: #334155;
        }

        .cp-start-btn {
            width: 100%;
            padding: 14px;
            background: #059669;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: background .15s;
            font-family: inherit;
        }

        .cp-start-btn:hover {
            background: #047857;
        }

        .cp-pending-note {
            text-align: center;
            padding: 12px 0 4px;
            font-size: 13px;
            color: #94A3B8;
        }

        .admin-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .admin-modal-overlay.open {
            display: flex;
        }

        .admin-modal {
            background: #fff;
            border-radius: 16px;
            width: 520px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
        }

        .admin-modal-header {
            padding: 20px 24px 16px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 1;
        }

        .admin-modal-title {
            font-size: 16px;
            font-weight: 800;
            color: var(--primary-color);
        }

        .admin-modal-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: var(--text-light);
            line-height: 1;
            padding: 0 4px;
        }

        .admin-modal-body {
            padding: 20px 24px 24px;
        }

        .admin-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 9px 0;
            border-bottom: 1px solid #F1F5F9;
            font-size: 13px;
        }

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

        .admin-info-label {
            color: var(--text-light);
            font-weight: 600;
        }

        .admin-info-value {
            color: var(--text-dark);
            font-weight: 700;
            text-align: right;
        }

        /* Teacher / Org Admin — 추가 CSS */
        .login-tab-btn {
            padding: 7px 18px;
            border: 1.5px solid #CBD5E1;
            background: #fff;
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            color: #475569;
            transition: all 0.15s;
        }

        .login-tab-btn.active {
            background: #4F46E5;
            border-color: #4F46E5;
            color: #fff;
            font-weight: 700;
        }

        .login-stat-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .login-stat-table th {
            background: #F8FAFC;
            padding: 8px 10px;
            text-align: center;
            font-weight: 700;
            color: #475569;
            border-bottom: 2px solid #E2E8F0;
            white-space: nowrap;
        }

        .login-stat-table td {
            padding: 7px 10px;
            text-align: center;
            border-bottom: 1px solid #F1F5F9;
            color: #1E293B;
        }

        .login-stat-table td:first-child {
            text-align: left;
            font-weight: 600;
        }

        .login-stat-cell-0 {
            color: #CBD5E1;
        }

        .login-stat-cell-1 {
            background: #EEF2FF;
            color: #4F46E5;
            border-radius: 4px;
        }

        .login-stat-cell-2 {
            background: #E0E7FF;
            color: #3730A3;
            border-radius: 4px;
        }

        .login-stat-cell-3 {
            background: #C7D2FE;
            color: #3730A3;
            border-radius: 4px;
            font-weight: 700;
        }

        .heatmap-wrap {
            overflow-x: auto;
            padding: 10px 0;
        }

        .heatmap-grid {
            display: grid;
            grid-auto-flow: column;
            grid-template-rows: repeat(7, 14px);
            gap: 3px;
        }

        .heatmap-cell {
            width: 13px;
            height: 13px;
            border-radius: 2px;
            cursor: default;
            position: relative;
        }

        .heatmap-cell:hover::after {
            content: attr(data-tip);
            position: absolute;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%);
            background: #1E293B;
            color: #fff;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 5px;
            white-space: nowrap;
            z-index: 100;
            pointer-events: none;
        }

        .heatmap-month-label {
            font-size: 11px;
            color: #94A3B8;
            margin-bottom: 4px;
            text-align: center;
        }

        .heatmap-day-label {
            font-size: 11px;
            color: #94A3B8;
            width: 20px;
            display: flex;
            align-items: center;
        }

        .hm-c0 {
            background: #EBEDF0;
        }

        .hm-c1 {
            background: #9BE9A8;
        }

        .hm-c2 {
            background: #40C463;
        }

        .hm-c3 {
            background: #30A14E;
        }

        .hm-c4 {
            background: #216E39;
        }

        /* Learner Detail Modal */
        #ldm-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 2000;
            align-items: flex-start;
            justify-content: center;
            overflow-y: auto;
            padding: 24px 16px 40px;
        }

        #ldm-overlay.open {
            display: flex;
        }

        .ldm-modal {
            background: #fff;
            border-radius: 20px;
            width: 100%;
            max-width: 860px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
            margin: auto;
            overflow: hidden;
        }

        .ldm-header {
            background: linear-gradient(135deg, #1E293B, #334155);
            padding: 22px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .ldm-header-info {
            flex: 1;
        }

        .ldm-name {
            font-size: 20px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 4px;
        }

        .ldm-meta {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.6);
        }

        .ldm-close-btn {
            background: rgba(255, 255, 255, 0.12);
            border: none;
            color: #fff;
            font-size: 18px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
            flex-shrink: 0;
        }

        .ldm-close-btn:hover {
            background: rgba(255, 255, 255, 0.22);
        }

        .ldm-stat-row {
            display: flex;
            gap: 0;
            border-bottom: 1px solid #F1F5F9;
        }

        .ldm-stat-cell {
            flex: 1;
            padding: 14px 20px;
            text-align: center;
            border-right: 1px solid #F1F5F9;
        }

        .ldm-stat-cell:last-child {
            border-right: none;
        }

        .ldm-stat-num {
            font-size: 22px;
            font-weight: 800;
            color: #1E293B;
        }

        .ldm-stat-lbl {
            font-size: 11px;
            color: #94A3B8;
            margin-top: 2px;
        }

        .ldm-body {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 0;
        }

        .ldm-left {
            padding: 24px 20px 24px 24px;
            border-right: 1px solid #F1F5F9;
        }

        .ldm-right {
            padding: 24px 24px 24px 20px;
        }

        .ldm-section-title {
            font-size: 12px;
            font-weight: 700;
            color: #64748B;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .ldm-radar-wrap {
            background: linear-gradient(135deg, #0F172A, #1E293B);
            border-radius: 14px;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ldm-quiz-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 16px;
        }

        .ldm-quiz-item {
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 10px;
            padding: 10px 12px;
        }

        .ldm-quiz-course {
            font-size: 11px;
            color: #64748B;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ldm-quiz-score {
            font-size: 17px;
            font-weight: 800;
            color: #1E293B;
        }

        .ldm-quiz-score span {
            font-size: 12px;
            font-weight: 500;
            color: #94A3B8;
        }

        @media (max-width: 640px) {
            .ldm-body {
                grid-template-columns: 1fr;
            }

            .ldm-left {
                border-right: none;
                border-bottom: 1px solid #F1F5F9;
            }

            .ldm-stat-row {
                flex-wrap: wrap;
            }

            .ldm-stat-cell {
                flex: 1 0 50%;
                border-bottom: 1px solid #F1F5F9;
            }
        }

        /* My Page — Profile Form */
        .mp-content-wrap {
            max-width: 1061px;
            margin: 0 auto;
        }

        .profile-inner {
            padding-top: 8px;
        }

        .profile-photo-wrap {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .profile-photo-circle {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            font-weight: 800;
            overflow: hidden;
            border: 2px solid var(--border-color);
            cursor: pointer;
            flex-shrink: 0;
            transition: opacity 0.2s, transform 0.2s;
        }

        .profile-photo-circle:hover {
            opacity: 0.85;
            transform: scale(1.05);
        }

        .profile-photo-circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .profile-photo-hint {
            font-size: 11px;
            color: var(--text-light);
            line-height: 1.5;
        }

        .profile-photo-hint strong {
            display: block;
            font-size: 13px;
            color: var(--text-dark);
            font-weight: 700;
            margin-bottom: 2px;
        }

        .profile-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px 16px;
        }

        @media (max-width: 640px) {
            .profile-form-grid {
                grid-template-columns: 1fr;
            }
        }

        .profile-field {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .profile-field.full-width {
            grid-column: 1 / -1;
        }

        .profile-field label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-light);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .profile-field label .lock-icon {
            font-size: 11px;
            color: #94A3B8;
        }

        .profile-field input,
        .profile-field select {
            padding: 11px 14px;
            border: 1.5px solid #E2E8F0;
            border-radius: 9px;
            font-size: 14px;
            color: var(--text-dark);
            background: #FAFBFC;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
            outline: none;
            width: 100%;
            box-sizing: border-box;
        }

        .profile-field input:focus,
        .profile-field select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(10, 25, 47, 0.07);
            background: #fff;
        }

        .profile-field input::placeholder {
            color: #CBD5E1;
        }

        /* number 스피너 제거 */
        .profile-field input[type=number]::-webkit-inner-spin-button,
        .profile-field input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .profile-field input[type=number] {
            -moz-appearance: textfield;
        }

        .profile-field input:disabled,
        .profile-field select:disabled {
            background: #F1F5F9;
            color: #64748B;
            border-color: #E2E8F0;
            cursor: not-allowed;
            opacity: 1;
        }

        .profile-locked-note {
            font-size: 11px;
            color: #94A3B8;
            margin-top: 6px;
            display: none;
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 6px;
            padding: 6px 10px;
            line-height: 1.5;
        }

        .profile-consent-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: #FAFAFA;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }

        .profile-consent-item:hover {
            background: #F1F5F9;
            border-color: #94A3B8;
        }

        .profile-consent-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--primary-color);
            cursor: pointer;
            flex-shrink: 0;
        }

        .profile-consent-item .consent-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-dark);
            flex: 1;
        }

        .profile-consent-item .consent-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 20px;
        }

        .consent-required {
            background: #FEE2E2;
            color: #991B1B;
        }

        .consent-optional {
            background: #DBEAFE;
            color: #1E40AF;
        }

        .consent-block {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            background: #FAFAFA;
        }


        .consent-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: default;
        }

        .consent-header input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--primary-color);
            cursor: pointer;
            flex-shrink: 0;
        }

        .consent-header .consent-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-dark);
            flex: 1;
        }

        .consent-toggle-btn {
            font-size: 11px;
            font-weight: 600;
            color: var(--primary-color);
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px 6px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .consent-toggle-btn:hover {
            text-decoration: underline;
        }

        .consent-body {
            display: none;
            padding: 12px 14px;
            border-top: 1px solid var(--border-color);
            background: #fff;
            font-size: 11.5px;
            color: #475569;
            line-height: 1.7;
            max-height: 200px;
            overflow-y: auto;
        }

        .consent-body.open {
            display: block;
        }

        .consent-body h4 {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-dark);
            margin: 10px 0 4px;
        }

        .consent-body h4:first-child {
            margin-top: 0;
        }

        .consent-body table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
            margin: 6px 0;
        }

        .consent-body th,
        .consent-body td {
            border: 1px solid #E2E8F0;
            padding: 5px 8px;
            text-align: left;
            vertical-align: top;
        }

        .consent-body th {
            background: #F1F5F9;
            font-weight: 700;
            color: var(--text-dark);
        }

        .profile-save-btn {
            padding: 7px 18px;
            background: var(--primary-color);
            color: #fff;
            border: none;
            border-radius: 7px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
            white-space: nowrap;
        }

        .profile-save-btn:hover {
            background: #1E3A5F;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(10, 25, 47, 0.22);
        }

        .profile-save-btn:active {
            transform: translateY(0);
            box-shadow: none;
        }

        .profile-save-toast {
            display: none;
            margin-top: 12px;
            padding: 10px 16px;
            background: #D1FAE5;
            color: #065F46;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            text-align: center;
        }

        /* My Page */
        .mp-card {
            background: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px 24px;
        }

        .mp-card-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-dark);
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .mp-progress-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .mp-progress-bar-wrap {
            flex: 1;
            height: 6px;
            background: #E2E8F0;
            border-radius: 99px;
            overflow: hidden;
        }

        .mp-progress-bar-fill {
            height: 100%;
            border-radius: 99px;
            background: var(--primary-color);
            transition: width 0.4s ease;
        }

        .mp-manage-btn {
            padding: 8px 16px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background: var(--white);
            color: var(--text-dark);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s, color 0.15s;
        }

        .mp-manage-btn:hover {
            background: var(--bg-light);
        }

        .mp-danger-btn {
            border-color: #FCA5A5;
            color: #B91C1C;
            background: #FFF5F5;
        }

        .mp-danger-btn:hover {
            background: #FEE2E2;
        }

        /* Dashboard Sections */
        .dashboard-section {
            background: var(--white);
            border-radius: 12px;
            border: 1px solid var(--border-color);
            padding: 24px 28px;
            margin-bottom: 28px;
        }

        /* ── AI 기본 개념 마인드맵 트리 ── */
        /* ── AI 개념 지도 — 트리 + 상세 패널 2단 레이아웃 ── */
        #mm-concepts-layout {
            display: flex;
            gap: 18px;
            align-items: flex-start;
        }

        #mm-tree-wrap {
            flex: 1;
            min-width: 0;
            position: relative;
            overflow-x: auto;
            overflow-y: visible;
        }

        /* ── 오른쪽 상세 패널 ── */
        #mm-detail-panel {
            width: 44%;
            min-width: 320px;
            flex-shrink: 0;
            border: 1.5px solid #E2E8F0;
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            position: sticky;
            top: 16px;
            max-height: 82vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07);
        }

        #mm-dp-inner {
            transition: opacity 0.15s ease;
        }

        #mm-dp-inner.mm-dp-fade {
            opacity: 0;
        }

        #mm-dp-header {
            padding: 16px 18px 13px;
            border-bottom: 1px solid #F1F5F9;
            background: linear-gradient(180deg, #FAFBFC 0%, #fff 100%);
        }

        #mm-dp-header-top {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 9px;
        }

        #mm-dp-badge {
            font-size: 11px;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 20px;
            background: #D1FAE5;
            color: #065F46;
            letter-spacing: 0.1px;
        }

        #mm-dp-num {
            font-size: 11px;
            font-weight: 700;
            color: #94A3B8;
            letter-spacing: 0.3px;
        }

        #mm-dp-title {
            font-size: 14.5px;
            font-weight: 800;
            color: #0F172A;
            line-height: 1.45;
            margin-bottom: 6px;
        }

        #mm-dp-desc {
            font-size: 12px;
            color: #64748B;
            line-height: 1.65;
        }

        .mm-dp-section {
            padding: 12px 18px;
            border-bottom: 1px solid #F1F5F9;
        }

        .mm-dp-sec-title {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 10.5px;
            font-weight: 800;
            color: #94A3B8;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        #mm-dp-points {
            margin: 0;
            padding-left: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        #mm-dp-points li {
            font-size: 12px;
            color: #374151;
            line-height: 1.6;
            padding: 5px 8px 5px 22px;
            position: relative;
            background: #F8FAFC;
            border-radius: 6px;
        }

        #mm-dp-points li::before {
            content: "→";
            position: absolute;
            left: 7px;
            color: #059669;
            font-weight: 700;
        }

        #mm-dp-glossary {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .mm-dp-term-name {
            display: block;
            font-size: 12px;
            font-weight: 700;
            color: #059669;
            margin-bottom: 1px;
        }

        .mm-dp-term-desc {
            font-size: 11px;
            color: #64748B;
            line-height: 1.5;
        }

        /* ── 인터랙티브 퀴즈 ── */
        .mm-dp-qitem {
            padding-bottom: 14px;
            margin-bottom: 14px;
            border-bottom: 1px solid #F1F5F9;
        }

        .mm-dp-qnum {
            font-size: 10px;
            font-weight: 800;
            color: #94A3B8;
            margin-bottom: 4px;
        }

        .mm-dp-qtext {
            font-size: 12px;
            font-weight: 600;
            color: #1E293B;
            line-height: 1.55;
            margin-bottom: 8px;
        }

        .mm-dp-qopts {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .mm-dp-qopt {
            display: flex;
            align-items: flex-start;
            gap: 7px;
            padding: 7px 10px;
            border-radius: 8px;
            border: 1px solid #E2E8F0;
            cursor: pointer;
            font-size: 12px;
            color: #374151;
            line-height: 1.45;
            transition: background .1s;
        }

        .mm-dp-qopt:hover {
            background: #F8FAFC;
        }

        .mm-dp-qopt input[type="radio"] {
            margin-top: 2px;
            flex-shrink: 0;
            accent-color: #059669;
        }

        .mm-dp-qopt-correct {
            background: #ECFDF5 !important;
            border-color: #059669 !important;
            color: #065F46 !important;
            font-weight: 600;
        }

        .mm-dp-qopt-wrong {
            background: #FEF2F2 !important;
            border-color: #DC2626 !important;
            color: #991B1B !important;
        }

        .mm-dp-qresult {
            margin-top: 8px;
            padding: 8px 10px;
            border-radius: 7px;
            font-size: 11px;
            line-height: 1.6;
        }

        .mm-dp-qr-correct {
            background: #ECFDF5;
            color: #065F46;
        }

        .mm-dp-qr-wrong {
            background: #FEF2F2;
            color: #991B1B;
        }

        .mm-dp-qr-skip {
            background: #FFF7ED;
            color: #92400E;
        }

        .mm-dp-qexp {
            margin-top: 6px;
            color: #475569;
            font-size: 11px;
            line-height: 1.6;
        }

        .mm-dp-qexp p {
            margin: 2px 0;
        }

        .mm-dp-qsubmit {
            width: 100%;
            padding: 10px;
            background: linear-gradient(135deg, #059669, #047857);
            color: #fff;
            border: none;
            border-radius: 9px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            margin-top: 4px;
            transition: opacity .15s;
        }

        .mm-dp-qsubmit:hover {
            opacity: .88;
        }

        .mm-dp-qscore {
            text-align: center;
            font-size: 18px;
            font-weight: 800;
            color: #059669;
            padding: 10px 0 6px;
        }

        .mm-dp-qretry {
            width: 100%;
            padding: 9px;
            background: #F1F5F9;
            color: #475569;
            border: none;
            border-radius: 9px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: background .15s;
        }

        .mm-dp-qretry:hover {
            background: #E2E8F0;
        }

        #mm-dp-article-iframe {
            width: 100%;
            height: 460px;
            border: none;
            border-radius: 8px;
            display: block;
            margin-top: 6px;
            background: #F8FAFC;
        }

        #mm-dp-cta-wrap {
            padding: 12px 16px;
            display: none !important;
        }

        #mm-dp-cta-btn {
            width: 100%;
            padding: 11px;
            background: linear-gradient(135deg, #059669, #047857);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: opacity 0.15s;
            letter-spacing: 0.2px;
        }

        #mm-dp-cta-btn:hover {
            opacity: 0.88;
        }

        #mm-dp-pending {
            padding: 44px 20px;
            text-align: center;
            color: #94A3B8;
            font-size: 12px;
            line-height: 1.9;
            background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(148, 163, 184, 0.04) 6px, rgba(148, 163, 184, 0.04) 12px);
        }

        /* 선택된 칩 하이라이트 — transform 없이 테두리+배경만으로 구분 */
        .mm-chip-selected {
            transform: none !important;
        }

        .mm-ready-l1.mm-chip-selected {
            background: #D1FAE5 !important;
            box-shadow: 0 0 0 2.5px #059669, 0 2px 10px rgba(5, 150, 105, 0.15) !important;
        }

        .mm-ready-l2.mm-chip-selected {
            background: #DBEAFE !important;
            box-shadow: 0 0 0 2.5px #2563EB, 0 2px 10px rgba(37, 99, 235, 0.15) !important;
        }

        .mm-ready-l3.mm-chip-selected {
            background: #EDE9FE !important;
            box-shadow: 0 0 0 2.5px #7C3AED, 0 2px 10px rgba(124, 58, 237, 0.15) !important;
        }

        .mm-ready-l4.mm-chip-selected {
            background: #FEF3C7 !important;
            box-shadow: 0 0 0 2.5px #D97706, 0 2px 10px rgba(217, 119, 6, 0.15) !important;
        }

        /* 준비중 칩 선택 시 (hover 없음) */
        .mm-chip-selected:not(.mm-ready) {
            box-shadow: 0 0 0 2px #94A3B8 !important;
            background: #F1F5F9 !important;
        }

        @media (max-width: 768px) {
            #mm-concepts-layout {
                flex-direction: column;
            }

            #mm-detail-panel {
                width: 100%;
                position: static;
            }
        }

        #mm-svg-lines {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            overflow: visible;
        }

        .mm-tree-inner {
            display: flex;
            align-items: stretch;
            min-width: 640px;
            width: 100%;
            padding: 8px 0 16px;
        }

        /* ── 인라인 학습 영역 ── */
        #mm-inline-learn {
            margin-top: 20px;
            border: 1.5px solid #E2E8F0;
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            animation: mmLearnSlideIn 0.25s ease;
        }

        @keyframes mmLearnSlideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        #mm-inline-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 18px;
            background: #F8FAFC;
            border-bottom: 1px solid #E2E8F0;
        }

        #mm-inline-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        #mm-inline-badge {
            font-size: 11px;
            font-weight: 800;
            padding: 3px 9px;
            border-radius: 20px;
            background: #D1FAE5;
            color: #065F46;
        }

        #mm-inline-title {
            font-size: 14px;
            font-weight: 700;
            color: #1E293B;
        }

        #mm-inline-close {
            background: #F1F5F9;
            border: none;
            border-radius: 8px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 600;
            color: #64748B;
            cursor: pointer;
            font-family: inherit;
            transition: background .15s;
        }

        #mm-inline-close:hover {
            background: #E2E8F0;
        }

        #mm-inline-tabs {
            display: flex;
            gap: 0;
            border-bottom: 1px solid #E2E8F0;
            padding: 0 18px;
            background: #fff;
        }

        .mm-it-btn {
            padding: 11px 18px;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            font-size: 13px;
            font-weight: 600;
            color: #94A3B8;
            cursor: pointer;
            font-family: inherit;
            transition: all .15s;
            margin-bottom: -1px;
        }

        .mm-it-btn:hover {
            color: #475569;
        }

        .mm-it-btn.active {
            color: #059669;
            border-bottom-color: #059669;
        }

        #mm-inline-iframe {
            width: 100%;
            height: 600px;
            border: none;
            display: block;
        }

        #mm-root-col {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            width: 80px;
        }

        #mm-root-node {
            width: 68px;
            background: #1E293B;
            color: #fff;
            border-radius: 12px;
            padding: 16px 8px;
            text-align: center;
            font-size: 11px;
            font-weight: 800;
            line-height: 1.7;
            letter-spacing: 0.3px;
        }

        .mm-branches-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding-left: 52px;
        }

        .mm-branch-row {
            display: flex;
            align-items: flex-start;
            gap: 0;
        }

        .mm-layer-pill {
            flex-shrink: 0;
            width: 130px;
            border-radius: 10px;
            padding: 11px 13px;
            cursor: default;
            border: 1.5px solid transparent;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        }

        .mm-layer-pill-emoji {
            font-size: 17px;
            line-height: 1;
        }

        .mm-layer-pill-name {
            font-size: 11.5px;
            font-weight: 800;
            margin-top: 5px;
            line-height: 1.3;
            letter-spacing: 0.1px;
        }

        .mm-layer-pill-dots {
            font-size: 10px;
            opacity: 0.7;
            margin-top: 4px;
            letter-spacing: 2px;
        }

        .mm-l1-pill {
            background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
            color: #065F46;
            border-color: #6EE7B7;
        }

        .mm-l2-pill {
            background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
            color: #1E40AF;
            border-color: #93C5FD;
        }

        .mm-l3-pill {
            background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
            color: #5B21B6;
            border-color: #C4B5FD;
        }

        .mm-l4-pill {
            background: linear-gradient(135deg, #FEF3C7, #FDE68A);
            color: #92400E;
            border-color: #FCD34D;
        }

        .mm-topics-wrap {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
            padding-left: 44px;
        }

        .mm-topic-chip {
            border-radius: 9px;
            padding: 10px 13px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            border: 1.5px dashed #CBD5E1;
            background: #F8FAFC;
            color: #94A3B8;
            cursor: default;
            transition: transform .15s, box-shadow .15s, background .15s;
            position: relative;
        }

        .mm-topic-chip.mm-ready {
            border-style: solid;
            cursor: pointer;
            border-left-width: 3px;
        }

        .mm-topic-chip.mm-ready:not(.mm-chip-selected):hover {
            transform: translateX(4px);
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.1);
        }

        .mm-topic-chip.mm-chip-selected:hover {
            transform: none;
        }

        /* ── chip 내부 구조 ── */
        .mm-chip-head {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.4;
        }

        .mm-chip-title {
            flex: 1;
        }

        .mm-chip-num {
            font-size: 10px;
            font-weight: 700;
            opacity: 0.5;
            flex-shrink: 0;
        }

        .mm-chip-soon {
            font-size: 9px;
            font-weight: 700;
            background: #E2E8F0;
            color: #94A3B8;
            padding: 1px 7px;
            border-radius: 4px;
            flex-shrink: 0;
            margin-left: auto;
            letter-spacing: 0.2px;
        }

        /* ── 4depth: 핵심 키워드 태그 ── */
        .mm-chip-kws {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .mm-kw {
            font-size: 10px;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 4px;
            background: #E2E8F0;
            color: #64748B;
            line-height: 1.5;
        }

        /* ── 5depth: 학습 구성 아이콘 ── */
        .mm-chip-comps {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            opacity: 0.35;
            margin-top: 1px;
        }

        .mm-comp {
            font-size: 10px;
            font-weight: 600;
            color: #64748B;
        }

        .mm-topic-chip.mm-ready .mm-chip-comps {
            opacity: 1;
        }

        /* ready chip color variants */
        .mm-ready-l1 {
            background: #ECFDF5;
            border-color: #059669;
            color: #065F46;
        }

        .mm-ready-l1:hover {
            background: #D1FAE5;
        }

        .mm-ready-l1 .mm-kw {
            background: #A7F3D0;
            color: #065F46;
        }

        .mm-ready-l1 .mm-comp {
            color: #059669;
        }

        .mm-ready-l2 {
            background: #EFF6FF;
            border-color: #2563EB;
            color: #1E3A8A;
        }

        .mm-ready-l2:hover {
            background: #DBEAFE;
        }

        .mm-ready-l2 .mm-kw {
            background: #BFDBFE;
            color: #1E3A8A;
        }

        .mm-ready-l2 .mm-comp {
            color: #2563EB;
        }

        .mm-ready-l3 {
            background: #F5F3FF;
            border-color: #7C3AED;
            color: #4C1D95;
        }

        .mm-ready-l3:hover {
            background: #EDE9FE;
        }

        .mm-ready-l3 .mm-kw {
            background: #DDD6FE;
            color: #4C1D95;
        }

        .mm-ready-l3 .mm-comp {
            color: #7C3AED;
        }

        .mm-ready-l4 {
            background: #FFFBEB;
            border-color: #D97706;
            color: #78350F;
        }

        .mm-ready-l4:hover {
            background: #FEF3C7;
        }

        .mm-ready-l4 .mm-kw {
            background: #FDE68A;
            color: #78350F;
        }

        .mm-ready-l4 .mm-comp {
            color: #D97706;
        }

        /* ── 잠긴 레이어 스타일 ── */
        .mm-row-locked .mm-layer-pill {
            opacity: 0.38;
            filter: grayscale(0.7);
        }

        .mm-chip-locked {
            opacity: 0.32 !important;
            filter: grayscale(0.8) !important;
            cursor: pointer !important;
            border-style: dashed !important;
        }

        .mm-chip-locked:hover {
            transform: none !important;
            box-shadow: none !important;
        }

        .mm-chip-lock-badge {
            font-size: 9px;
            font-weight: 700;
            background: #FEE2E2;
            color: #991B1B;
            padding: 1px 7px;
            border-radius: 4px;
            flex-shrink: 0;
            margin-left: auto;
            letter-spacing: 0.2px;
        }

        /* 잠금 토스트 */
        #concept-lock-toast {
            position: fixed;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            background: #1E293B;
            color: #fff;
            border-radius: 12px;
            padding: 12px 20px;
            font-size: 13px;
            font-weight: 600;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
            z-index: 9999;
            display: none;
            white-space: nowrap;
            max-width: 90vw;
            white-space: normal;
            text-align: center;
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .mm-tree-inner {
                min-width: unset;
                flex-direction: column;
                gap: 16px;
            }

            #mm-root-col {
                display: none;
            }

            #mm-svg-lines {
                display: none;
            }

            .mm-branches-col {
                padding-left: 0;
                gap: 16px;
            }

            .mm-branch-row {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }

            .mm-layer-pill {
                width: auto;
            }

            .mm-topics-wrap {
                padding-left: 10px;
            }
        }

        /* ── 콘텐츠 검색 필터 버튼 ── */
        .cs-filter-btn {
            padding: 4px 11px;
            border-radius: 20px;
            border: 1.5px solid #E2E8F0;
            background: #fff;
            font-size: 12px;
            font-weight: 600;
            color: #64748B;
            cursor: pointer;
            transition: all 0.18s;
            font-family: inherit;
            white-space: nowrap;
        }

        .cs-filter-btn:hover {
            border-color: #6366F1;
            color: #6366F1;
        }

        .cs-filter-btn.cs-active {
            background: #6366F1;
            border-color: #6366F1;
            color: #fff;
        }

        .cs-result-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #F1F5F9;
            cursor: pointer;
            transition: background 0.15s;
            border-radius: 8px;
        }

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

        .cs-result-item:hover {
            background: #F8FAFC;
            padding-left: 8px;
            padding-right: 8px;
            margin: 0 -8px;
        }

        .cs-result-tag {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            white-space: nowrap;
            flex-shrink: 0;
            margin-top: 3px;
        }

        .cs-result-title {
            font-size: 13px;
            font-weight: 700;
            color: #1E293B;
            line-height: 1.45;
            margin-bottom: 3px;
        }

        .cs-result-desc {
            font-size: 11px;
            color: #64748B;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .cs-result-meta {
            display: flex;
            gap: 6px;
            margin-top: 5px;
            flex-wrap: wrap;
        }

        .cs-result-chip {
            font-size: 10px;
            padding: 1px 7px;
            border-radius: 10px;
            background: #F1F5F9;
            color: #475569;
            font-weight: 600;
        }

        .cs-empty {
            text-align: center;
            padding: 48px 20px;
            color: #94A3B8;
        }

        .cs-empty-icon {
            font-size: 36px;
            margin-bottom: 12px;
        }

        .cs-empty-msg {
            font-size: 14px;
            font-weight: 600;
        }

        .cs-empty-sub {
            font-size: 12px;
            margin-top: 6px;
        }

        /* AI 학습 메트릭스 뷰 */
        .matrix-tab-bar {
            display: flex;
            gap: 8px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }

        .matrix-tab {
            padding: 9px 20px;
            border-radius: 10px;
            border: 1.5px solid #E2E8F0;
            background: #fff;
            font-size: 13.5px;
            font-weight: 600;
            color: #475569;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }

        .matrix-tab:hover {
            border-color: #059669;
            color: #059669;
            background: #F0FDF4;
        }

        .matrix-tab.active {
            background: linear-gradient(135deg, #059669, #047857);
            color: #fff;
            border-color: #047857;
            box-shadow: 0 2px 10px rgba(5, 150, 105, 0.25);
        }

        .matrix-tab.disabled {
            cursor: default;
            opacity: 0.7;
        }

        .matrix-tab.disabled:hover {
            border-color: #E2E8F0;
            color: #475569;
            background: #fff;
        }

        .mtab-soon {
            font-size: 10px;
            background: #FEF3C7;
            color: #92400E;
            padding: 2px 6px;
            border-radius: 99px;
            margin-left: 5px;
            font-weight: 700;
            vertical-align: middle;
        }

        .map-fs-wrap {
            position: relative;
        }

        .map-fs-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.25);
            color: #fff;
            padding: 5px 13px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            backdrop-filter: blur(6px);
            transition: background 0.18s;
            font-family: inherit;
        }

        .map-fs-btn:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        .map-fullscreen {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 9999 !important;
            border-radius: 0 !important;
            background: #000;
        }

        .map-fullscreen iframe {
            height: 100vh !important;
            border-radius: 0 !important;
        }

        .matrix-coming-soon {
            text-align: center;
            padding: 60px 24px;
            color: #94A3B8;
        }

        .matrix-coming-soon .mcs-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }

        .matrix-coming-soon h3 {
            font-size: 20px;
            font-weight: 700;
            color: #475569;
            margin-bottom: 8px;
        }

        .matrix-coming-soon p {
            font-size: 14px;
            line-height: 1.7;
        }

        /* AI 산업 지도 */
        .imap-intro {
            font-size: 13px;
            color: var(--text-light);
            line-height: 1.7;
            margin-bottom: 24px;
            padding: 14px 16px;
            background: #FFF7ED;
            border: 1px solid #FED7AA;
            border-radius: 10px;
        }

        .imap-section-label {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-light);
            margin: 24px 0 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .imap-section-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #E2E8F0;
        }

        .imap-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 14px;
        }

        .imap-card {
            background: #fff;
            border: 1px solid #E2E8F0;
            border-radius: 14px;
            padding: 18px 18px 14px;
            transition: box-shadow 0.2s, transform 0.2s;
        }

        .imap-card:hover {
            box-shadow: 0 6px 20px rgba(15, 23, 42, 0.09);
            transform: translateY(-2px);
        }

        .imap-card-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .imap-card-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .imap-card-title {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-dark);
        }

        .imap-card-sub {
            font-size: 11px;
            color: var(--text-light);
            margin-top: 1px;
            line-height: 1.4;
        }

        .imap-card-desc {
            font-size: 12px;
            color: #64748B;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .imap-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .imap-chip {
            font-size: 11px;
            font-weight: 600;
            padding: 3px 9px;
            border-radius: 99px;
            background: #F1F5F9;
            color: #475569;
            border: 1px solid #E2E8F0;
        }

        .imap-tag {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            margin-bottom: 6px;
        }

        .imap-tag.industry {
            background: #FEF3C7;
            color: #92400E;
        }

        .imap-tag.cross {
            background: #EDE9FE;
            color: #4C1D95;
        }

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

        /* ── AI 활용 산업 지도 — 카드 메타 요소 ────── */
        .imap-meta-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px;
            margin: 6px 0 8px;
        }

        .imap-maturity {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 99px;
            letter-spacing: 0.03em;
        }

        .imap-maturity.early {
            background: #FEF3C7;
            color: #92400E;
        }

        .imap-maturity.growth {
            background: #DBEAFE;
            color: #1E40AF;
        }

        .imap-maturity.mature {
            background: #DCFCE7;
            color: #166534;
        }

        .imap-tech-tag {
            font-size: 10px;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 99px;
            background: #F1F5F9;
            color: #475569;
            border: 1px solid #E2E8F0;
        }

        .imap-global-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px;
            margin-top: 7px;
            padding-top: 7px;
            border-top: 1px solid #F1F5F9;
        }

        .imap-global-label {
            font-size: 10px;
            font-weight: 700;
            color: #94A3B8;
            margin-right: 2px;
        }

        .imap-chip-global {
            font-size: 11px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 99px;
            background: #EFF6FF;
            color: #1D4ED8;
            border: 1px solid #BFDBFE;
        }

        /* ── 글로벌 AI 기업 지도 — 호버 팝업 ────── */
        #company-hover-popup {
            position: fixed;
            z-index: 9100;
            width: 310px;
            background: #fff;
            border: 1px solid #E2E8F0;
            border-radius: 16px;
            padding: 18px 20px 16px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14), 0 4px 16px rgba(15, 23, 42, 0.08);
            pointer-events: none;
            opacity: 0;
            transform: translateY(8px) scale(0.97);
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        #company-hover-popup.cp-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .cp-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .cp-icon-wrap {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        .cp-name {
            font-size: 15px;
            font-weight: 800;
            color: #0F172A;
            line-height: 1.2;
        }
        .cp-chips-row {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 10px;
        }
        .cp-desc {
            font-size: 12.5px;
            color: #475569;
            line-height: 1.7;
            margin-bottom: 12px;
            border-bottom: 1px solid #F1F5F9;
            padding-bottom: 12px;
        }
        .cp-desc:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .cp-stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
            margin-bottom: 12px;
        }
        .cp-stat-cell {
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 8px;
            padding: 7px 9px;
        }
        .cp-stat-label {
            font-size: 10px;
            color: #94A3B8;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .cp-stat-value {
            font-size: 12px;
            color: #0F172A;
            font-weight: 700;
            margin-top: 2px;
            line-height: 1.3;
        }
        .cp-insight-box {
            background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
            border: 1px solid #BAE6FD;
            border-radius: 10px;
            padding: 9px 11px;
            font-size: 12px;
            color: #0369A1;
            line-height: 1.65;
        }
        .cp-insight-box strong {
            color: #0C4A6E;
        }

        /* ── AI 학습 메트릭스 — 에메랄드 테마 ────── */
        .nav-item-matrix {
            background: linear-gradient(135deg, rgba(5, 150, 105, 0.17) 0%, rgba(5, 150, 105, 0.05) 100%);
            border: 1px solid rgba(16, 185, 129, 0.25);
            border-left: 3px solid rgba(16, 185, 129, 0.55);
            color: #6ee7b7;
            animation: navGlowGreen 3.5s ease-in-out infinite 2s;
            transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.3s;
        }

        .nav-item-matrix::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.75), transparent);
            animation: navScanV 7s ease-in-out infinite 2s;
            pointer-events: none;
            z-index: 1;
        }

        .nav-item-matrix::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 45%;
            background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.15), transparent);
            animation: navShimmer 5s ease-in-out infinite 2s;
            pointer-events: none;
        }

        .nav-item-matrix:hover {
            background: linear-gradient(135deg, rgba(5, 150, 105, 0.28) 0%, rgba(5, 150, 105, 0.11) 100%);
            border-left-color: #10b981;
            color: #d1fae5;
            transform: translateX(3px);
        }

        .nav-item-matrix.active {
            background: linear-gradient(135deg, rgba(5, 150, 105, 0.28) 0%, rgba(5, 150, 105, 0.12) 100%);
            border-left-color: #10b981;
            color: #a7f3d0;
        }

        .nav-label-matrix {
            transition: text-shadow 0.25s, letter-spacing 0.25s;
        }

        .nav-item-matrix:hover .nav-label-matrix {
            text-shadow: 0 0 10px rgba(52, 211, 153, 0.7), 0 0 20px rgba(16, 185, 129, 0.35);
            letter-spacing: 0.025em;
        }

        .nav-item-event {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.17) 0%, rgba(245, 158, 11, 0.05) 100%);
            border: 1px solid rgba(251, 191, 36, 0.25);
            border-left: 3px solid rgba(251, 191, 36, 0.55);
            color: #fcd34d;
            animation: navGlowAmber 3.5s ease-in-out infinite 0.5s;
            transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.3s;
        }

        .nav-item-event::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.75), transparent);
            animation: navScanV 7s ease-in-out infinite 0.5s;
            pointer-events: none;
            z-index: 1;
        }

        .nav-item-event::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 45%;
            background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.12), transparent);
            animation: navShimmer 5s ease-in-out infinite 0.5s;
            pointer-events: none;
        }

        .nav-item-event:hover {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.28) 0%, rgba(245, 158, 11, 0.11) 100%);
            border-left-color: #f59e0b;
            color: #fef3c7;
            transform: translateX(3px);
        }

        .nav-item-event.active {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.28) 0%, rgba(245, 158, 11, 0.12) 100%);
            border-left-color: #f59e0b;
            color: #fde68a;
        }

        @keyframes navGlowAmber {
            0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.15), inset 0 0 8px rgba(251, 191, 36, 0.06); }
            50% { box-shadow: 0 0 16px rgba(245, 158, 11, 0.28), inset 0 0 14px rgba(251, 191, 36, 0.1); }
        }

        /* ── Upcoming Event — dark canvas ── */
        #upcoming-event-view {
            background:
                radial-gradient(ellipse at 15% 10%,  rgba(180, 100, 10, 0.18) 0%, transparent 45%),
                radial-gradient(ellipse at 85% 80%,  rgba(100, 50,  5, 0.12) 0%, transparent 45%),
                radial-gradient(ellipse at 50% 50%,  rgba(30,  60, 120, 0.08) 0%, transparent 60%),
                linear-gradient(155deg, #060C18 0%, #08111F 55%, #050B15 100%);
            margin: -40px;
            padding: 40px;
            min-height: calc(100% + 80px);
            box-sizing: border-box;
        }
        #upcoming-event-view .header h1 { color: #F1F5F9; }
        #upcoming-event-view .header p   { color: #64748B !important; }

        @media (max-width: 900px) {
            #upcoming-event-view {
                margin: -24px;
                padding: 24px;
                min-height: calc(100% + 48px);
            }
        }

        .dashboard-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
        }

        .dashboard-section-title-wrap {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .dashboard-section-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            letter-spacing: -0.5px;
        }

        .dashboard-section-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .dashboard-section-desc {
            font-size: 13px;
            color: var(--text-light);
            margin-top: 3px;
        }

        @keyframes execBgFlow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes execShimmer {
            0% {
                left: -100%;
            }

            100% {
                left: 200%;
            }
        }

        @keyframes grassTodayPulse {

            0%,
            100% {
                box-shadow: 0 0 0 2px #f59e0b, 0 0 7px rgba(245, 158, 11, 0.45);
            }

            50% {
                box-shadow: 0 0 0 3.5px #f59e0b, 0 0 14px rgba(245, 158, 11, 0.65);
            }
        }

        @keyframes execPulse {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4);
            }

            50% {
                transform: scale(1.05);
                box-shadow: 0 0 8px rgba(230, 57, 70, 0.8);
            }
        }

        @keyframes execArrowBounce {

            0%,
            100% {
                transform: translateX(0);
                color: rgba(255, 255, 255, 0.5);
            }

            50% {
                transform: translateX(4px);
                color: #FCD34D;
            }
        }

        .all-exec-banner {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 16px;
            background: linear-gradient(135deg, #0A192F, #1E3A5F, #0f2a4a, #0A192F);
            background-size: 300% 300%;
            animation: execBgFlow 6s ease infinite;
            color: #fff;
            border-radius: 14px;
            padding: 16px 20px;
            cursor: pointer;
            transition: transform 0.18s, box-shadow 0.18s;
            border: 1.5px solid rgba(230, 57, 70, 0.8);
            box-shadow: 0 4px 20px rgba(230, 57, 70, 0.15);
            width: 100%;
            box-sizing: border-box;
            margin-top: 14px;
            position: relative;
            overflow: hidden;
        }

        #all-exec-canvas {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            border-radius: 13px;
            opacity: 0.75;
        }

        .all-exec-banner>*:not(canvas) {
            position: relative;
            z-index: 2;
        }

        .all-exec-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-20deg);
            animation: execShimmer 4s ease-in-out infinite;
            z-index: 1;
        }

        .all-exec-banner:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(230, 57, 70, 0.3);
        }

        .all-exec-badge {
            background: var(--accent-color);
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            border-radius: 6px;
            padding: 3px 9px;
            flex-shrink: 0;
            animation: execPulse 2s infinite;
        }

        .all-exec-arrow {
            font-size: 16px;
            animation: execArrowBounce 1.5s infinite ease-in-out;
        }

        .all-exec-title {
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        .all-exec-price {
            font-size: 18px;
            font-weight: 900;
            color: #FCD34D;
            white-space: nowrap;
        }

        .all-exec-includes {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
        }

        .all-exec-include-chip {
            display: flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            padding: 4px 10px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.85);
            white-space: nowrap;
        }

        .all-exec-include-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .pay-method-btn {
            flex: 1;
            padding: 10px 6px;
            border: 1.5px solid var(--border-color);
            background: #fff;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            color: var(--text-light);
            transition: all 0.18s;
        }

        .pay-method-btn.pay-method-active {
            border-color: var(--primary-color);
            background: var(--primary-color);
            color: #fff;
        }

        .coming-soon-badge {
            display: inline-block;
            padding: 2px 8px;
            background: #FEF3C7;
            color: #92400E;
            font-size: 11px;
            font-weight: 700;
            border-radius: 20px;
            vertical-align: middle;
        }

        .coming-soon-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 36px 20px;
            background: var(--bg-light);
            border-radius: 10px;
            border: 1px dashed #CBD5E1;
            text-align: center;
        }

        .coming-soon-icon {
            font-size: 32px;
            margin-bottom: 12px;
        }

        .coming-soon-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 8px;
        }

        .coming-soon-text {
            font-size: 13px;
            color: var(--text-light);
            line-height: 1.7;
        }

        .level-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 4px;
            margin-left: 6px;
            vertical-align: middle;
        }

        .level-badge.lv-intro {
            background: #F3F4F6;
            color: #374151;
        }

        .level-badge.lv-low {
            background: #DCFCE7;
            color: #166534;
        }

        .level-badge.lv-mid {
            background: #FEF9C3;
            color: #854D0E;
        }

        .level-badge.lv-high {
            background: #FEE2E2;
            color: #991B1B;
        }

        /* ── MOBILE (≤768px) ── */
        #mobile-topbar {
            display: none;
        }

        #sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 998;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #sidebar-overlay.visible {
            opacity: 1;
            pointer-events: all;
        }

        @keyframes envelopeFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }
        }

        @keyframes letterRise {
            from {
                opacity: 0;
                transform: translateY(40px) scale(0.96);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes sealPop {
            0% {
                transform: translate(-50%, -50%) scale(0) rotate(-20deg);
                opacity: 0;
            }

            70% {
                transform: translate(-50%, -50%) scale(1.15) rotate(4deg);
                opacity: 1;
            }

            100% {
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes letterFadeIn {
            from {
                opacity: 0;
                transform: translateY(12px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ── 레이더 차트 애니메이션 ── */
        @keyframes radarFadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        @keyframes radarScaleIn {
            0% {
                opacity: 0;
                transform: scale(0.12)
            }

            65% {
                opacity: 1;
                transform: scale(1.05)
            }

            100% {
                opacity: 1;
                transform: scale(1)
            }
        }

        @keyframes dotRipple {

            0%,
            100% {
                opacity: 0
            }

            55% {
                opacity: 0.45
            }
        }

        @keyframes radarPulse {
            0% {
                opacity: 0.55;
                transform: scale(0.03);
            }

            100% {
                opacity: 0;
                transform: scale(1.22);
            }
        }

        @keyframes radarCoreGlow {

            0%,
            100% {
                transform: scale(0.85);
                opacity: 0.28;
            }

            50% {
                transform: scale(1.35);
                opacity: 0.55;
            }
        }

        @keyframes radarCoreDot {

            0%,
            100% {
                transform: scale(0.82);
                opacity: 0.75;
            }

            50% {
                transform: scale(1.22);
                opacity: 1;
            }
        }

        @keyframes radarCorePulse {
            0% {
                transform: scale(1);
                opacity: 0.65;
            }

            44% {
                transform: scale(14);
                opacity: 0;
            }

            44.1%,
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        /* 타로 모달 */
        #tarot-modal {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: rgba(10, 10, 25, 0.72);
            backdrop-filter: blur(6px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        #tarot-modal.open {
            display: flex;
        }

        #tarot-letter-wrap {
            position: relative;
            max-width: 380px;
            width: 100%;
            animation: letterRise 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) both;
        }

        .tarot-envelope-top {
            background: linear-gradient(160deg, #e2b85a 0%, #c49535 100%);
            border-radius: 14px 14px 0 0;
            height: 90px;
            position: relative;
            overflow: hidden;
        }

        .tarot-envelope-top::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            border-left: 190px solid transparent;
            border-right: 190px solid transparent;
            border-bottom: 38px solid #fef9ec;
        }

        .tarot-envelope-seal {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 44px;
            height: 44px;
            background: radial-gradient(circle at 38% 35%, #f87171, #7f1d1d);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fde68a;
            font-size: 20px;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
            z-index: 3;
            animation: sealPop 0.5s cubic-bezier(0.34, 1.5, 0.64, 1) 0.3s both;
        }

        .tarot-letter-body {
            background: linear-gradient(180deg, #fef9ec 0%, #fefdf5 100%);
            border-radius: 0 0 14px 14px;
            padding: 28px 28px 24px;
            border: 1px solid rgba(196, 149, 53, 0.25);
            border-top: none;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
            animation: letterFadeIn 0.5s ease 0.35s both;
        }

        @media (max-width: 768px) {

            /* 모바일: 레이더 차트 숨김 (인라인 display:flex 덮어쓰기) */
            #ai-radar-wrap {
                display: none !important;
            }

            /* 타로+추천 2컬럼 → 1컬럼 */
            #ai-cards-grid {
                grid-template-columns: 1fr !important;
            }

            /* 감성 편지 3컬럼 봉투 가로 배치 유지, 봉투 크기만 축소 */
            #ai-cards-grid .mp-card [style*="width:88px"] {
                width: 64px !important;
                height: 44px !important;
                margin-bottom: 6px !important;
            }

            /* 봉투 내부 seal 아이콘 크기 조정 */
            #ai-cards-grid .mp-card [style*="width:26px"][style*="height:26px"] {
                width: 20px !important;
                height: 20px !important;
                font-size: 9px !important;
            }
        }

        /* 태블릿 (769px ~ 1024px): 터치 스크롤 보완 */
        @media (min-width: 769px) and (max-width: 1024px) {
            .main-content {
                padding: 24px;
            }
        }

        @media (max-width: 768px) {

            /* ── 구조 통일: body는 데스크탑과 동일하게 overflow:hidden 유지
               JS의 body.style.overflow='hidden' 코드가 완전히 무해해짐 ── */

            /* app-wrapper — 세로 스택, 실제 가시 높이로 고정
               100vh 대신 --app-height 사용: 주소창/내비게이션 바 높이 제외한 실제 높이 */
            #app-wrapper {
                flex-direction: column !important;
                height: var(--app-height, 100vh) !important;
                overflow: hidden !important;
            }

            /* 모바일 탑바 — flex child로 고정 높이 */
            #mobile-topbar {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 0 16px;
                height: 52px;
                background: #0f0f0f;
                border-bottom: 1px solid #1c1c1c;
                flex-shrink: 0;
                position: relative;
                z-index: 100;
            }

            #mobile-topbar .mob-logo {
                flex: 1;
                font-size: 16px;
                font-weight: 800;
                color: #fff;
            }

            #mobile-topbar .mob-logo span {
                color: #e63946;
            }

            #hamburger-btn {
                background: none;
                border: none;
                cursor: pointer;
                padding: 6px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 5px;
                flex-shrink: 0;
                min-width: 44px;
                min-height: 44px;
            }

            #hamburger-btn span {
                display: block;
                width: 22px;
                height: 2px;
                background: #ccc;
                border-radius: 2px;
                transition: 0.25s;
            }

            /* 사이드바 — 슬라이드 드로어 */
            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                width: 280px;
                height: 100vh;
                z-index: 999;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                overflow-y: auto;
                flex-shrink: 0;
            }

            .sidebar.mob-open {
                transform: translateX(0);
            }

            #sidebar-overlay {
                display: block;
                pointer-events: none;
            }

            /* 메인 컨텐츠 — 스크롤 컨테이너 (데스크탑과 동일 구조) */
            .main-content {
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                touch-action: pan-y;
                padding: 16px;
                width: 100%;
                box-sizing: border-box;
            }

            /* ── 대시보드 GPU 합성 레이어 제거 (터치 스크롤 차단 방지) ── */

            /* 1. 캔버스 애니메이션 비활성화 */
            #dashboard-neural-canvas {
                display: none;
            }

            /* 2. 별똥별 효과 비활성화 */
            .shooting-star {
                display: none;
            }

            /* 3. 행성 카드 — backdrop-filter 및 float 애니메이션 제거 */
            #dashboard-sections .section-selector-card {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                animation: none !important;
                transform: none !important;
                touch-action: pan-y;
            }

            /* 4. 대시보드 뷰 전체에 pan-y 명시 */
            #dashboard-view {
                touch-action: pan-y;
            }

            /* 용어 사전 — 모바일 패딩 축소 */
            #my-glossary-view {
                padding: 16px;
            }

            /* 헤더 */
            .header h1 {
                font-size: 20px;
                word-break: keep-all;
            }

            .header {
                margin-bottom: 16px;
            }

            /* 대시보드 헤더 — 검색 버튼을 텍스트 아래로 */
            #dash-header-row {
                flex-direction: column !important;
            }

            #dash-header-text {
                flex: unset !important;
                width: 100%;
            }

            /* 코스 그리드 — 1열 */
            .course-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            /* 섹션 셀렉터 — 모바일 1열 */
            .section-selector-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            /* 섹션 카드 — 모바일 */
            .section-selector-card {
                min-height: 0;
                transform: none !important;
            }

            .section-selector-card:hover {
                transform: none !important;
            }

            .ssc-header {
                gap: 8px;
                align-items: center;
            }

            .ssc-badge {
                width: 34px;
                height: 34px;
                border-radius: 8px;
                font-size: 9px;
            }

            .ssc-title {
                font-size: 12px;
                line-height: 1.35;
            }

            /* 섹션 헤더 (back-btn + icon + title + level-filter-bar) — 모바일 줄바꿈 */
            #section-mit-tr > div:first-child {
                flex-wrap: wrap;
                align-items: center;
            }

            #mit-tr-title {
                flex: 1;
                min-width: 0;
            }

            #level-filter-bar {
                width: 100%;
                margin-left: 0 !important;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding-bottom: 2px;
            }

            #level-filter-bar::-webkit-scrollbar {
                display: none;
            }

            /* 탭 — 가로 스크롤 */
            .tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                flex-wrap: nowrap;
                scrollbar-width: none;
                padding-bottom: 1px;
            }

            .tabs::-webkit-scrollbar {
                display: none;
            }

            .tab {
                padding: 10px 12px;
                font-size: 12px;
                white-space: nowrap;
                flex-shrink: 0;
                gap: 4px;
            }

            /* 모바일: 전체 레이블 숨기고 짧은 레이블 표시 */
            .tab-text-full {
                display: none;
            }

            .tab-text-short {
                display: inline;
            }

            /* 탭 아이콘 모바일 크기 */
            .tab-icon {
                font-size: 15px;
            }

            /* 탭 래퍼 페이드 인디케이터 배경색 맞춤 */
            .tabs-wrapper::after {
                background: linear-gradient(to right, transparent, #fff);
            }

            /* 학습 뷰 */
            #learning-view {
                padding: 16px;
                border-radius: 8px;
            }

            #course-title-display {
                font-size: 18px;
                margin-bottom: 16px;
            }

            .tab-content-wrap {
                max-width: 100%;
            }

            /* iframe 초기 높이 — postMessage 수신 전 fallback
               !important 제거: JS의 style.height가 오버라이드 가능하도록 */
            #article-iframe {
                min-height: 400px;
                height: 480px;
            }

            #deeplearning-iframe {
                min-height: 400px;
                height: 420px;
            }

            /* slides는 슬라이드쇼 고정 높이 유지 */
            #slides-iframe {
                height: 320px !important;
            }

            /* All-exec 배너 — 세로 스택 */
            .all-exec-banner {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 0 !important;
                padding: 0 !important;
            }

            /* 플랜 카드 모바일 패딩 */
            #banner-free, #banner-dongheng, #banner-enterprise, #banner-team {
                padding: 12px 16px !important;
                border-right: none !important;
                border-bottom: 1px solid rgba(255,255,255,0.1);
            }

            #banner-team {
                border-bottom: none;
            }

            /* 결제 뷰 */
            #payment-view .tab-content-wrap {
                padding: 0;
            }

            /* 탭-컨텐츠 wrap 여백 */
            .tab-content-wrap {
                padding: 0;
            }

            /* 결제 뷰 padding 복구 */
            #payment-view .tab-content-wrap {
                padding: 0 16px;
            }

            /* 퀴즈 옵션 버튼 터치 영역 확보 */
            .option {
                min-height: 52px;
                padding: 14px 15px;
                margin-bottom: 12px;
                font-size: 15px;
                display: flex;
                align-items: center;
            }

            /* 사이드바 닫기 버튼 행 — 모바일에서 표시 */
            #sidebar-close-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 4px;
            }

            /* nav-item 모바일 터치 영역 최소 44px */
            .nav-item {
                min-height: 44px;
                padding-top: 10px;
                padding-bottom: 10px;
            }

            /* mp-card 모바일 패딩 축소 */
            .mp-card {
                padding: 16px 16px;
            }

            /* AI 학습 비서: 타로+추천 2컬럼 → 1컬럼 */
            #ai-assistant-view .mp-content-wrap > div[style*="grid-template-columns:1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }

            /* AI 그리팅 카드: 폰트 크기 조정 */
            #ai-greeting-main {
                font-size: 18px !important;
            }
        }

        /* ── TABLET (769px–1024px) 사이드바 드로어 ── */
        @media (min-width: 769px) and (max-width: 1024px) {
            /* 모바일 탑바 표시 */
            #mobile-topbar {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 0 16px;
                height: 52px;
                background: #0f0f0f;
                border-bottom: 1px solid #1c1c1c;
                position: sticky;
                top: 0;
                z-index: 100;
                flex-shrink: 0;
            }
            #mobile-topbar .mob-logo {
                flex: 1;
                font-size: 16px;
                font-weight: 800;
                color: #fff;
            }
            #mobile-topbar .mob-logo span {
                color: #e63946;
            }
            #hamburger-btn {
                background: none;
                border: none;
                cursor: pointer;
                padding: 6px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 5px;
                flex-shrink: 0;
                min-width: 44px;
                min-height: 44px;
            }
            #hamburger-btn span {
                display: block;
                width: 22px;
                height: 2px;
                background: #ccc;
                border-radius: 2px;
                transition: 0.25s;
            }

            /* 앱 레이아웃 — 세로 스택, 실제 가시 높이로 고정 */
            #app-wrapper {
                flex-direction: column !important;
                height: var(--app-height, 100vh) !important;
                overflow: hidden !important;
            }

            /* 사이드바 — 슬라이드 드로어 */
            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                width: 300px;
                height: 100vh;
                z-index: 999;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                overflow-y: auto;
                flex-shrink: 0;
            }
            .sidebar.mob-open {
                transform: translateX(0);
            }
            #sidebar-overlay {
                display: block;
                pointer-events: none;
            }
            #sidebar-close-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 4px;
            }

            /* 메인 컨텐츠 — 스크롤 컨테이너 (데스크탑과 동일 구조) */
            .main-content {
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                touch-action: pan-y;
                padding: 24px;
                width: 100%;
                box-sizing: border-box;
            }

            /* 대시보드 GPU 합성 레이어 제거 */
            #dashboard-neural-canvas { display: none; }
            .shooting-star { display: none; }
            #dashboard-sections .section-selector-card {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                animation: none !important;
                transform: none !important;
                touch-action: pan-y;
            }
            #dashboard-view { touch-action: pan-y; }
        }


                    /* ── 오프라인 강의 / Meet-UP 마켓 ── */
                    .lecture-filter-bar {
                        display: flex;
                        gap: 8px;
                        flex-wrap: wrap;
                        margin-bottom: 24px;
                    }

                    .lf-btn {
                        padding: 6px 16px;
                        border-radius: 99px;
                        border: 1px solid var(--border-color);
                        background: var(--white);
                        color: var(--text-light);
                        font-size: 13px;
                        font-weight: 600;
                        cursor: pointer;
                        transition: all 0.15s;
                    }

                    .lf-btn:hover {
                        border-color: var(--primary-color);
                        color: var(--primary-color);
                    }

                    .lf-btn.active {
                        background: var(--primary-color);
                        color: #fff;
                        border-color: var(--primary-color);
                    }

                    .lecture-grid {
                        display: grid;
                        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                        gap: 20px;
                    }

                    .lec-card {
                        background: var(--white);
                        border: 1px solid var(--border-color);
                        border-radius: 16px;
                        overflow: hidden;
                        transition: box-shadow 0.2s, transform 0.2s;
                        display: flex;
                        flex-direction: column;
                    }

                    .lec-card:hover {
                        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
                        transform: translateY(-3px);
                    }

                    .lec-card-top {
                        padding: 20px 20px 0;
                    }

                    .lec-card-header {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        margin-bottom: 14px;
                    }

                    .lec-avatar {
                        width: 44px;
                        height: 44px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        font-weight: 800;
                        color: #fff;
                        flex-shrink: 0;
                    }

                    .lec-instructor-info {
                        flex: 1;
                        min-width: 0;
                    }

                    .lec-instructor-name {
                        font-size: 14px;
                        font-weight: 700;
                        color: var(--text-main);
                        display: flex;
                        align-items: center;
                        gap: 6px;
                    }

                    .lec-anchor-badge {
                        font-size: 9px;
                        font-weight: 800;
                        letter-spacing: 0.5px;
                        background: linear-gradient(135deg, #F59E0B, #D97706);
                        color: #fff;
                        padding: 2px 7px;
                        border-radius: 6px;
                    }

                    .lec-instructor-title {
                        font-size: 11px;
                        color: var(--text-light);
                        margin-top: 2px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .lec-category-tag {
                        font-size: 10px;
                        font-weight: 700;
                        padding: 3px 9px;
                        border-radius: 8px;
                        white-space: nowrap;
                    }

                    .lec-title {
                        font-size: 16px;
                        font-weight: 700;
                        color: var(--text-main);
                        line-height: 1.45;
                        margin-bottom: 10px;
                        word-break: keep-all;
                    }

                    .lec-tags {
                        display: flex;
                        gap: 6px;
                        flex-wrap: wrap;
                        margin-bottom: 16px;
                    }

                    .lec-tag {
                        font-size: 11px;
                        font-weight: 600;
                        background: #F1F5F9;
                        color: #475569;
                        padding: 3px 9px;
                        border-radius: 6px;
                    }

                    .lec-meta {
                        border-top: 1px solid #F1F5F9;
                        padding: 14px 20px;
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 8px;
                    }

                    .lec-meta-item {
                        display: flex;
                        align-items: flex-start;
                        gap: 6px;
                    }

                    .lec-meta-icon {
                        font-size: 13px;
                        margin-top: 1px;
                        flex-shrink: 0;
                    }

                    .lec-meta-text {
                        font-size: 12px;
                        color: var(--text-light);
                        line-height: 1.4;
                    }

                    .lec-meta-text strong {
                        color: var(--text-main);
                        font-weight: 600;
                    }

                    .lec-card-bottom {
                        padding: 14px 20px 18px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        border-top: 1px solid #F1F5F9;
                        margin-top: auto;
                    }

                    .lec-price-wrap {}

                    .lec-price {
                        font-size: 20px;
                        font-weight: 800;
                        color: var(--text-main);
                    }

                    .lec-price.free {
                        color: #059669;
                    }

                    .lec-price-sub {
                        font-size: 11px;
                        color: var(--text-light);
                        margin-top: 1px;
                    }

                    .lec-capacity {
                        font-size: 12px;
                        color: var(--text-light);
                        margin-top: 3px;
                    }

                    .lec-capacity .sold {
                        color: #DC2626;
                        font-weight: 700;
                    }

                    .lec-capacity .few {
                        color: #D97706;
                        font-weight: 700;
                    }

                    .lec-capacity .ok {
                        color: #059669;
                        font-weight: 700;
                    }

                    .btn-lec-apply {
                        padding: 9px 20px;
                        border-radius: 10px;
                        font-size: 13px;
                        font-weight: 700;
                        cursor: pointer;
                        border: none;
                        transition: all 0.15s;
                        white-space: nowrap;
                    }

                    .btn-lec-apply.open {
                        background: var(--primary-color);
                        color: #fff;
                    }

                    .btn-lec-apply.open:hover {
                        background: var(--primary-dark);
                    }

                    .btn-lec-apply.soldout {
                        background: #F1F5F9;
                        color: #94A3B8;
                        cursor: not-allowed;
                    }

                    .btn-lec-apply.free-open {
                        background: #059669;
                        color: #fff;
                    }

                    .btn-lec-apply.free-open:hover {
                        background: #047857;
                    }

                    /* 결제 모달 */
                    #lec-modal-overlay {
                        display: none;
                        position: fixed;
                        inset: 0;
                        background: rgba(0, 0, 0, 0.5);
                        z-index: 3000;
                        align-items: center;
                        justify-content: center;
                        padding: 20px;
                    }

                    #lec-modal-overlay.show {
                        display: flex;
                    }

                    .lec-modal {
                        background: var(--white);
                        border-radius: 20px;
                        width: 100%;
                        max-width: 480px;
                        padding: 32px;
                        position: relative;
                        max-height: 90vh;
                        overflow-y: auto;
                        animation: modalIn 0.25s ease;
                    }

                    @keyframes modalIn {
                        from {
                            opacity: 0;
                            transform: scale(0.95) translateY(10px);
                        }

                        to {
                            opacity: 1;
                            transform: scale(1) translateY(0);
                        }
                    }

                    .lec-modal-close {
                        position: absolute;
                        top: 16px;
                        right: 16px;
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                        background: #F1F5F9;
                        border: none;
                        cursor: pointer;
                        font-size: 16px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: var(--text-light);
                    }

                    .lec-modal-close:hover {
                        background: #E2E8F0;
                    }

                    .lec-modal h2 {
                        font-size: 18px;
                        font-weight: 800;
                        color: var(--text-main);
                        margin-bottom: 6px;
                        padding-right: 32px;
                        word-break: keep-all;
                    }

                    .lec-modal-instructor {
                        font-size: 13px;
                        color: var(--text-light);
                        margin-bottom: 20px;
                    }

                    .lec-modal-section {
                        background: #F8FAFC;
                        border-radius: 12px;
                        padding: 16px 18px;
                        margin-bottom: 14px;
                    }

                    .lec-modal-section-title {
                        font-size: 11px;
                        font-weight: 700;
                        color: var(--text-light);
                        letter-spacing: 1px;
                        margin-bottom: 10px;
                    }

                    .lec-modal-row {
                        display: flex;
                        gap: 8px;
                        align-items: flex-start;
                        font-size: 13px;
                        color: var(--text-main);
                        margin-bottom: 6px;
                    }

                    .lec-modal-row:last-child {
                        margin-bottom: 0;
                    }

                    .lec-modal-row .icon {
                        width: 18px;
                        flex-shrink: 0;
                    }

                    .lec-modal-price-box {
                        background: var(--primary-color);
                        color: #fff;
                        border-radius: 12px;
                        padding: 18px 20px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 14px;
                    }

                    .lec-modal-price-box.free-box {
                        background: #059669;
                    }

                    .lec-modal-price-num {
                        font-size: 26px;
                        font-weight: 800;
                    }

                    .lec-modal-price-label {
                        font-size: 12px;
                        opacity: 0.8;
                        margin-top: 2px;
                    }

                    .lec-modal-account {
                        background: #FFF7ED;
                        border: 1px solid #FED7AA;
                        border-radius: 12px;
                        padding: 16px 18px;
                        margin-bottom: 16px;
                    }

                    .lec-modal-account .acct-title {
                        font-size: 12px;
                        font-weight: 700;
                        color: #92400E;
                        margin-bottom: 8px;
                    }

                    .lec-modal-account .acct-info {
                        font-size: 14px;
                        font-weight: 700;
                        color: #78350F;
                        line-height: 1.7;
                    }

                    .lec-modal-notice {
                        font-size: 12px;
                        color: var(--text-light);
                        line-height: 1.6;
                        margin-bottom: 16px;
                    }

                    .lec-modal-notice li {
                        margin-bottom: 4px;
                    }

                    .btn-lec-confirm {
                        display: block;
                        width: 100%;
                        padding: 14px;
                        background: var(--primary-color);
                        color: #fff;
                        border: none;
                        border-radius: 12px;
                        font-size: 15px;
                        font-weight: 700;
                        cursor: pointer;
                        transition: background 0.15s;
                    }

                    .btn-lec-confirm:hover {
                        background: var(--primary-dark);
                    }

                    @media (max-width: 640px) {
                        .lecture-grid {
                            grid-template-columns: 1fr;
                        }

                        .lec-meta {
                            grid-template-columns: 1fr;
                        }
                    }
                


        @keyframes nlModalIn {
            from {
                opacity: 0;
                transform: scale(0.88) translateY(20px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* ── 온보딩 모달 ─────────────────────────────────────── */
        #onboarding-modal {
            display: none;
        }
        #onboarding-modal.ob-visible {
            display: flex;
        }
        @keyframes obModalIn {
            from { opacity: 0; transform: scale(0.88) translateY(16px); }
            to   { opacity: 1; transform: scale(1)    translateY(0);    }
        }

        /* ── 온보딩 체크리스트 ───────────────────────────────── */
        .ob-check-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: #fff;
            border-radius: 10px;
            border: 1px solid #E0E7FF;
        }
        .ob-check-item.ob-done {
            background: #F0FDF4;
            border-color: #BBF7D0;
        }
        .ob-check-icon {
            font-size: 17px;
            flex-shrink: 0;
            width: 22px;
            text-align: center;
            color: #94A3B8;
        }
        .ob-check-item.ob-done .ob-check-icon {
            color: #16A34A;
        }
        .ob-check-label {
            font-size: 13px;
            font-weight: 700;
            color: #1E293B;
        }
        .ob-check-item.ob-done .ob-check-label {
            color: #15803D;
            text-decoration: line-through;
            text-decoration-color: #86EFAC;
        }
        .ob-check-sub {
            font-size: 11px;
            color: #94A3B8;
            margin-left: 4px;
        }
        .ob-check-btn {
            margin-left: auto;
            flex-shrink: 0;
            padding: 5px 12px;
            background: #EEF2FF;
            color: #4F46E5;
            border: none;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s;
        }
        .ob-check-btn:hover {
            background: #C7D2FE;
        }
        .ob-check-item.ob-done .ob-check-btn {
            display: none;
        }

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

/* ── Upcoming Event 카드 호버 ─────────────────────────────── */
.ev-card {
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.28s ease,
                border-color 0.28s ease,
                background 0.28s ease;
    cursor: default;
    will-change: transform, box-shadow;
}
.ev-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 0 0 1.5px var(--ev-hdr, rgba(16,185,129,0.7)),
                0 0 24px var(--ev-hg1, rgba(16,185,129,0.45)),
                0 0 52px var(--ev-hg2, rgba(16,185,129,0.18)),
                0 8px 24px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.1) !important;
    background: var(--ev-hbg, rgba(16,185,129,0.13)) !important;
}
.ev-card:active {
    transform: translateY(-1px) scale(1.008);
    transition-duration: 0.1s;
}
/* 종료된 행사는 호버 효과 최소화 */
.ev-card.ev-past:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 0 0 1px rgba(71,85,105,0.5),
                0 4px 16px rgba(0,0,0,0.25) !important;
    background: rgba(15,23,42,0.55) !important;
}
@keyframes evGlowPulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   AI 기본 개념 — 대시보드 카드 (뉴럴 글래스모피즘)
   ══════════════════════════════════════════════════════ */

.ssc-concepts-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #060d1a 0%, #0d1b35 60%, #08142a 100%);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 14px;
    padding: 18px 18px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ssc-concepts-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16,185,129,0.55);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.5),
        0 0 0 1px rgba(16,185,129,0.3),
        0 0 40px rgba(16,185,129,0.08);
}
.ssc-concepts-card:hover .ssc-concepts-arrow {
    color: rgba(16,185,129,0.9) !important;
    transform: translateX(3px);
}
.ssc-concepts-arrow {
    transition: color 0.2s, transform 0.2s;
}
.ssc-concepts-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════════════════════
   AI 기본 개념 — 뉴럴 글래스모피즘 리디자인
   ══════════════════════════════════════════════════════ */

/* 다크 섹션 래퍼 */
#concepts-dark-section {
    background: linear-gradient(135deg, #060d1a 0%, #0d1b35 55%, #08142a 100%);
    border-radius: 20px;
    padding: 32px 28px 36px;
    position: relative;
    overflow: hidden;
    margin-top: 16px;
    min-height: 280px;
}

/* 파티클 캔버스 */
#concepts-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* 레벨 구분 헤더 */
.cg-level-sep {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 14px;
    position: relative;
    z-index: 1;
}
.cg-level-sep:first-child { margin-top: 4px; }

.cg-level-line {
    flex: 1;
    height: 1px;
    border-radius: 99px;
    opacity: 0.35;
}

.cg-level-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid;
    letter-spacing: 0.6px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* 글래스 카드 그리드 */
#concepts-dark-section .cg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    position: relative;
    z-index: 1;
}

/* 글래스 카드 */
.concept-glass-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 22px 20px 18px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                border-color 0.25s ease, background 0.25s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* 내부 미세 그라디언트 */
.concept-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
}

/* 호버 */
/* 테두리 회전 애니메이션용 CSS Custom Property */
@property --cg-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.concept-glass-card:not(.cg-locked):hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.09);
    /* 회전 완료 후(0.75s) 우측·하단 테두리 점등 */
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: var(--cg-glow, rgba(255,255,255,0.35));
    border-bottom-color: var(--cg-glow, rgba(255,255,255,0.35));
    transition:
        border-right-color  0.25s ease 0.72s,
        border-bottom-color 0.25s ease 0.72s,
        box-shadow          0.25s ease 0.72s,
        transform           0.25s ease,
        background          0.25s ease;
    box-shadow:
        4px 4px 0 0 var(--cg-glow, rgba(255,255,255,0.12)),
        6px 6px 24px var(--cg-glow-soft, rgba(255,255,255,0.08)),
        0 12px 32px rgba(0,0,0,0.45);
}

/* 마우스 떠날 때 — 즉시 리셋 */
.concept-glass-card:not(.cg-locked) {
    transition: transform 0.25s ease, background 0.25s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 테두리 회전 빛 — mask-composite로 border 영역만 표시 */
.concept-glass-card:not(.cg-locked)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px; /* 테두리 두께 */
    background: conic-gradient(from var(--cg-angle),
        transparent   0%,
        var(--cg-glow, rgba(16,185,129,0.9))  7%,
        rgba(255,255,255,0.85) 11%,
        var(--cg-glow, rgba(16,185,129,0.9))  15%,
        transparent   22%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
}

/* 호버 시 회전 1회 → 페이드아웃 */
.concept-glass-card:not(.cg-locked):hover::after {
    animation: cgBorderSweep 0.75s cubic-bezier(0.4, 0, 0.6, 1) 1 forwards;
}

@keyframes cgBorderSweep {
    0%   { --cg-angle: 0deg;   opacity: 1; }
    78%  { --cg-angle: 360deg; opacity: 1; }
    100% { --cg-angle: 360deg; opacity: 0; }
}

/* 잠금 카드 */
.concept-glass-card.cg-locked {
    opacity: 0.55;
    cursor: pointer;
}
.concept-glass-card.cg-locked::after {
    content: '🔒 구독 전용';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: rgba(6,13,26,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* 카드 내부 요소 */
.cg-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    width: fit-content;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.cg-title {
    font-size: 14px;
    font-weight: 700;
    color: #F1F5F9;
    line-height: 1.45;
    flex: 1;
}

.cg-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cg-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 8px;
}

.cg-progress-wrap {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 99px;
    overflow: hidden;
}
.cg-progress-bar {
    height: 3px;
    border-radius: 99px;
    transition: width 0.6s ease;
    box-shadow: 0 0 6px currentColor;
}

.cg-read-btn {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    pointer-events: none;
    letter-spacing: 0.3px;
}
.concept-glass-card:hover .cg-read-btn {
    background: var(--cg-glow, rgba(255,255,255,0.15));
    color: #fff;
    border-color: transparent;
}

/* 완료 체크 뱃지 */
.cg-done-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(16,185,129,0.8));
}

/* 애니메이션: 카드 등장 */
@keyframes cgCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.concept-glass-card {
    animation: cgCardIn 0.4s ease both;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    #concepts-dark-section {
        padding: 20px 16px 24px;
        border-radius: 14px;
    }
    #concepts-dark-section .cg-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ============================================================
   COSMIC DASHBOARD — Phase 1  우주 행성 대시보드 테마
   (2026-06-06)
   ============================================================ */

/* 1. 전체 대시보드 우주 배경 (#upcoming-event-view 패턴) */
#dashboard-view {
    margin: -40px;
    padding: 40px;
    min-height: calc(100% + 80px);
    box-sizing: border-box;
    position: relative;
    background:
        radial-gradient(ellipse 700px 400px at 20% 15%,  rgba(99,102,241,0.09)  0%, transparent 100%),
        radial-gradient(ellipse 500px 600px at 75% 70%,  rgba(16,185,129,0.06)  0%, transparent 100%),
        radial-gradient(ellipse 400px 300px at 55% 92%,  rgba(139,92,246,0.07)  0%, transparent 100%),
        radial-gradient(ellipse 600px 250px at 30% 55%,  rgba(220,38,38,0.04)   0%, transparent 100%),
        linear-gradient(160deg, #070d1c 0%, #030810 50%, #020710 100%);
}

/* 2. 별 필드 레이어 (box-shadow 별 기법) */
#dashboard-view::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    pointer-events: none;
    z-index: 0;
    background: transparent;
    box-shadow:
        /* 밝은 별 */
        45px 32px 0 1px rgba(255,255,255,0.88),
        180px 75px 0 1px rgba(255,255,255,0.82),
        320px 18px 0 1px rgba(255,255,255,0.79),
        520px 55px 0 1px rgba(255,255,255,0.9),
        680px 90px 0 1px rgba(255,255,255,0.84),
        800px 25px 0 1px rgba(255,255,255,0.78),
        920px 68px 0 1px rgba(255,255,255,0.88),
        60px 480px 0 1px rgba(255,255,255,0.82),
        340px 520px 0 1px rgba(255,255,255,0.79),
        750px 510px 0 1px rgba(255,255,255,0.88),
        /* 중간 별 */
        70px 140px 0 0px rgba(255,255,255,0.55),
        135px 210px 0 0px rgba(255,255,255,0.45),
        240px 185px 0 0px rgba(255,255,255,0.5),
        380px 145px 0 0px rgba(255,255,255,0.6),
        450px 205px 0 0px rgba(255,255,255,0.5),
        590px 170px 0 0px rgba(255,255,255,0.45),
        700px 230px 0 0px rgba(255,255,255,0.55),
        820px 155px 0 0px rgba(255,255,255,0.5),
        950px 195px 0 0px rgba(255,255,255,0.45),
        60px 280px 0 0px rgba(255,255,255,0.5),
        200px 310px 0 0px rgba(255,255,255,0.4),
        340px 295px 0 0px rgba(255,255,255,0.5),
        490px 270px 0 0px rgba(255,255,255,0.45),
        620px 305px 0 0px rgba(255,255,255,0.4),
        760px 285px 0 0px rgba(255,255,255,0.5),
        880px 320px 0 0px rgba(255,255,255,0.4),
        30px 390px 0 0px rgba(255,255,255,0.4),
        115px 365px 0 0px rgba(255,255,255,0.35),
        260px 420px 0 0px rgba(255,255,255,0.45),
        410px 380px 0 0px rgba(255,255,255,0.4),
        560px 415px 0 0px rgba(255,255,255,0.35),
        690px 360px 0 0px rgba(255,255,255,0.45),
        830px 400px 0 0px rgba(255,255,255,0.4),
        960px 385px 0 0px rgba(255,255,255,0.35),
        /* 희미한 별 */
        85px 480px 0 0px rgba(255,255,255,0.2),
        190px 510px 0 0px rgba(255,255,255,0.15),
        305px 465px 0 0px rgba(255,255,255,0.25),
        470px 495px 0 0px rgba(255,255,255,0.2),
        610px 520px 0 0px rgba(255,255,255,0.15),
        755px 475px 0 0px rgba(255,255,255,0.2),
        895px 505px 0 0px rgba(255,255,255,0.15),
        100px 600px 0 0px rgba(255,255,255,0.2),
        280px 630px 0 0px rgba(255,255,255,0.15),
        440px 590px 0 0px rgba(255,255,255,0.25),
        600px 620px 0 0px rgba(255,255,255,0.18),
        780px 640px 0 0px rgba(255,255,255,0.15),
        /* 컬러 별 (보라/파랑/청록) */
        155px  42px 0 0px rgba(165,180,252,0.72),
        425px  88px 0 0px rgba(196,181,253,0.65),
        745px  35px 0 0px rgba(165,180,252,0.70),
        275px 225px 0 0px rgba(196,181,253,0.55),
        640px 255px 0 0px rgba(167,243,208,0.55),
        380px 450px 0 0px rgba(165,180,252,0.5),
        720px 435px 0 0px rgba(196,181,253,0.5);
}

/* 3. 콘텐츠 레이어가 별 위로 */
#dashboard-view > * { position: relative; z-index: 1; }

/* 4. 헤더 텍스트 밝게 */
#dashboard-sections .header h1          { color: #F1F5F9; }
#dashboard-sections .header > div > div > p { color: rgba(255,255,255,0.5) !important; }
#dashboard-sections .header p span      { color: #A5B4FC !important; }

/* 5. 콘텐츠 검색 버튼 다크 */
#content-search-btn {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: rgba(255,255,255,0.65) !important;
    box-shadow: none !important;
}
#content-search-btn:hover {
    background: rgba(99,102,241,0.18) !important;
    border-color: rgba(99,102,241,0.45) !important;
    color: #A5B4FC !important;
    box-shadow: 0 2px 12px rgba(99,102,241,0.2) !important;
}

/* 6. 행성 카드 변환 */
#dashboard-sections .section-selector-card {
    background: linear-gradient(150deg, rgba(14,20,42,0.95) 0%, rgba(8,12,26,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04),
        0 8px 32px rgba(0,0,0,0.65),
        0 2px 8px rgba(0,0,0,0.4);
    animation: planet-float 7s ease-in-out infinite;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#dashboard-sections .section-selector-card:hover {
    transform: translateY(-10px) scale(1.015) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.18),
        0 20px 60px rgba(0,0,0,0.7),
        0 0 60px rgba(99,102,241,0.14),
        0 0 120px rgba(99,102,241,0.07) !important;
    border-color: rgba(255,255,255,0.22) !important;
}

/* 7. 행성 부유 애니메이션 */
@keyframes planet-float {
    0%, 100% { transform: translateY(0px);  }
    45%       { transform: translateY(-5px); }
    55%       { transform: translateY(-7px); }
}

/* 8. 카드별 부유 딜레이 (section-selector-grid 내 실제 child 위치 기준)
      1=MIT TR, 2=into AX, 5=AI핵심영상, 6=AX국내, 7=AX글로벌,
      8=AI EVENT국내, 9=AI EVENT글로벌, 10=논문국내, 11=논문글로벌 */
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(1)  { animation-duration: 7.0s;  animation-delay: 0.0s;  }
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(2)  { animation-duration: 8.5s;  animation-delay: 1.2s;  }
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(5)  { animation-duration: 6.8s;  animation-delay: 0.5s;  }
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(6)  { animation-duration: 9.0s;  animation-delay: 2.0s;  }
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(7)  { animation-duration: 7.5s;  animation-delay: 0.8s;  }
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(8)  { animation-duration: 8.0s;  animation-delay: 1.7s;  }
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(9)  { animation-duration: 7.2s;  animation-delay: 0.3s;  }
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(10) { animation-duration: 8.8s;  animation-delay: 1.5s;  }
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(11) { animation-duration: 7.8s;  animation-delay: 2.5s;  }

/* 9. 카드 내부 다크 모드 */
#dashboard-sections .ssc-article-item        { border-bottom-color: rgba(255,255,255,0.07); }
#dashboard-sections .ssc-article-title       { color: rgba(255,255,255,0.62); }
#dashboard-sections .ssc-bottom             { border-top-color: rgba(255,255,255,0.07); background: rgba(0,0,0,0.2); }
#dashboard-sections .ssc-pending            { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
#dashboard-sections .ssc-pending-icon       { opacity: 0.5; }
#dashboard-sections .ssc-pending-text       { color: rgba(255,255,255,0.35); }

/* 10. 구분선 다크 */
#dashboard-sections .section-selector-grid > div[style*="height:2px"] {
    background: linear-gradient(to right, rgba(255,255,255,0.08) 60%, transparent) !important;
}

/* 11. 온보딩 체크리스트 다크 */
#onboarding-checklist {
    background: linear-gradient(135deg, rgba(15,23,42,0.92), rgba(10,15,40,0.94)) !important;
    border-color: rgba(99,102,241,0.38) !important;
}

/* 12. user-level-banner 다크 */
#user-level-banner {
    background: rgba(99,102,241,0.15) !important;
    border: 1px solid rgba(99,102,241,0.3) !important;
    color: #A5B4FC !important;
    border-radius: 8px;
}

/* 13. 모바일 margin 보정 */
@media (max-width: 900px) {
    #dashboard-view {
        margin: -24px;
        padding: 24px;
        min-height: calc(100% + 48px);
    }
}

/* 모바일(≤768px): .main-content padding과 정확히 일치시켜야 스크롤이 올바르게 작동 */
@media (max-width: 768px) {
    #dashboard-view {
        margin: -16px;
        padding: 16px;
        min-height: auto;
    }
}

/* 태블릿(769~1024px): .main-content padding과 일치 */
@media (min-width: 769px) and (max-width: 1024px) {
    #dashboard-view {
        margin: -24px;
        padding: 24px;
        min-height: auto;
    }
}

/* 14. 모션 감소 환경 */
@media (prefers-reduced-motion: reduce) {
    #dashboard-sections .section-selector-card { animation: none; }
}

/* 15. 시작 가이드 팝업 — 다크 테마 */
#onboarding-checklist .ob-check-item {
    background: rgba(255,255,255,0.05);
    border-color: rgba(139,92,246,0.28);
    padding: 14px 14px;
}
#onboarding-checklist .ob-check-item.ob-done {
    background: rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.35);
}
#onboarding-checklist .ob-check-label                          { font-size:14px; color: #e2e8f0; }
#onboarding-checklist .ob-check-item.ob-done .ob-check-label   { color: #6ee7b7; }
#onboarding-checklist .ob-check-sub                            { font-size:12px; color: rgba(196,181,253,0.75); }
#onboarding-checklist .ob-check-icon                           { font-size:18px; color: rgba(167,139,250,0.8); }
#onboarding-checklist .ob-check-item.ob-done .ob-check-icon    { color: #34d399; }
#onboarding-checklist .ob-check-btn {
    background: rgba(99,102,241,0.22);
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,0.35);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}
#onboarding-checklist .ob-check-btn:hover {
    background: rgba(99,102,241,0.42);
    box-shadow: 0 0 10px rgba(139,92,246,0.3);
    color: #c4b5fd;
}

/* 모바일: 1열 복귀 */
@media (max-width: 640px) {
    #ob-checks-grid { grid-template-columns: 1fr !important; }
}

/* 16. 섹션 내부 헤더 텍스트 — 다크 우주 배경 최적화 */
/* 섹션 타이틀 (17px bold) */
#dashboard-view [id^="section-"] > div:first-child > div:last-child > div,
#mit-tr-title > div {
    color: #F1F5F9 !important;
}
/* 섹션 부제목 (12px, var(--text-light)) */
#dashboard-view [id^="section-"] > div:first-child > div:last-child > div:last-child,
#mit-tr-title > div:last-child {
    color: rgba(255,255,255,0.60) !important;
}
/* 뒤로가기 버튼 (inline color 없는 기본 버튼에만 적용) */
#dashboard-view [id^="section-"] .back-btn {
    color: rgba(255,255,255,0.75);
}
/* 레벨 필터 레이블 */
#level-filter-bar > span {
    color: rgba(255,255,255,0.60) !important;
}

/* ═══════════════════════════════════════════════════════════
   대시보드 뉴럴 캔버스 (배경 파티클)
   ═══════════════════════════════════════════════════════════ */
#dashboard-neural-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════
   행성 카드 — Planet Orb 디자인
   ═══════════════════════════════════════════════════════════ */

/* CSS custom properties per-card (nth-child in .section-selector-grid) */
/* 1=MIT TR (red), 2=into AX (indigo), 5=핵심영상 (green), 6=AX국내 (purple),
   7=AX글로벌 (blue), 8=EVENT국내 (red-orange), 9=EVENT글로벌 (violet),
   10=논문국내 (teal), 11=논문글로벌 (deep-blue) */
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(1)  {
    --orb-mid: #a31515; --orb-dark: #4a0505; --orb-glow: rgba(196,18,48,0.5);
    --ring-color: rgba(248,113,113,0.5); --accent: #f87171; --accent-bg: rgba(196,18,48,0.12);
}
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(2)  {
    --orb-mid: #4338ca; --orb-dark: #1e1b4b; --orb-glow: rgba(99,102,241,0.5);
    --ring-color: rgba(165,180,252,0.5); --accent: #a5b4fc; --accent-bg: rgba(99,102,241,0.12);
}
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(5)  {
    --orb-mid: #3a7a00; --orb-dark: #1a3500; --orb-glow: rgba(118,185,0,0.5);
    --ring-color: rgba(163,230,53,0.5); --accent: #a3e635; --accent-bg: rgba(118,185,0,0.12);
}
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(6)  {
    --orb-mid: #6d28d9; --orb-dark: #2e1065; --orb-glow: rgba(124,58,237,0.5);
    --ring-color: rgba(196,181,253,0.5); --accent: #c4b5fd; --accent-bg: rgba(124,58,237,0.12);
}
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(7)  {
    --orb-mid: #1d4ed8; --orb-dark: #1e3a8a; --orb-glow: rgba(59,130,246,0.5);
    --ring-color: rgba(147,197,253,0.5); --accent: #93c5fd; --accent-bg: rgba(37,99,235,0.12);
}
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(8)  {
    --orb-mid: #b45309; --orb-dark: #451a03; --orb-glow: rgba(245,158,11,0.45);
    --ring-color: rgba(252,211,77,0.5); --accent: #fcd34d; --accent-bg: rgba(245,158,11,0.12);
}
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(9)  {
    --orb-mid: #7c3aed; --orb-dark: #2e1065; --orb-glow: rgba(139,92,246,0.5);
    --ring-color: rgba(167,139,250,0.5); --accent: #a78bfa; --accent-bg: rgba(139,92,246,0.12);
}
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(10) {
    --orb-mid: #0d7377; --orb-dark: #042f2e; --orb-glow: rgba(15,118,110,0.5);
    --ring-color: rgba(52,211,153,0.5); --accent: #34d399; --accent-bg: rgba(15,118,110,0.12);
}
#dashboard-sections .section-selector-grid > .section-selector-card:nth-child(11) {
    --orb-mid: #1e40af; --orb-dark: #0a1c5b; --orb-glow: rgba(30,64,175,0.55);
    --ring-color: rgba(96,165,250,0.5); --accent: #60a5fa; --accent-bg: rgba(30,64,175,0.12);
}

/* 행성 오브 래퍼 */
.ssc-planet-orb-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0 10px;
    position: relative;
    perspective: 500px;
    flex-shrink: 0;
}

/* 토성 고리 */
.ssc-planet-ring {
    position: absolute;
    width: 118px;
    height: 26px;
    border: 1.5px solid var(--ring-color, rgba(165,180,252,0.5));
    border-radius: 50%;
    transform: rotateX(72deg);
    pointer-events: none;
}

/* 행성 구체 */
.ssc-planet-orb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    position: relative;
    z-index: 1;
    background: radial-gradient(
        circle at 32% 28%,
        rgba(255,255,255,0.28) 0%,
        rgba(255,255,255,0.08) 20%,
        var(--orb-mid, #4338ca) 45%,
        var(--orb-dark, #1e1b4b) 78%,
        rgba(0,0,0,0.55) 100%
    );
    box-shadow:
        0 0 28px var(--orb-glow, rgba(99,102,241,0.5)),
        0 0 60px var(--orb-glow, rgba(99,102,241,0.22)),
        inset 0 -8px 24px rgba(0,0,0,0.45),
        inset 6px 6px 18px rgba(255,255,255,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-selector-card:hover .ssc-planet-orb {
    transform: scale(1.08);
    box-shadow:
        0 0 40px var(--orb-glow, rgba(99,102,241,0.65)),
        0 0 80px var(--orb-glow, rgba(99,102,241,0.3)),
        inset 0 -8px 24px rgba(0,0,0,0.45),
        inset 6px 6px 18px rgba(255,255,255,0.15);
}

/* 행성 본문 (제목 + 학습 포인트) */
.ssc-planet-body {
    padding: 2px 16px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ssc-planet-title {
    font-size: 13px;
    font-weight: 800;
    color: #F1F5F9;
    letter-spacing: 0.2px;
    text-align: center;
}

.ssc-planet-sub {
    font-size: 10.5px;
    color: rgba(255,255,255,0.38);
    text-align: center;
    margin-top: -4px;
    line-height: 1.4;
}

/* 학습 포인트 리스트 */
.ssc-learn-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}

.ssc-learn-points li {
    font-size: 10.5px;
    color: rgba(255,255,255,0.6);
    padding: 5px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    text-align: center;
    line-height: 1.4;
    transition: background 0.2s, color 0.2s;
}

.section-selector-card:hover .ssc-learn-points li {
    background: var(--accent-bg, rgba(99,102,241,0.1));
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.78);
}

/* 하단 CTA 바 (기존 ssc-bottom 재활용) */
.ssc-planet-cta {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent, #a5b4fc);
    background: var(--accent-bg, rgba(99,102,241,0.12));
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.18);
    transition: background 0.2s;
}

/* 준비중 행성 카드 */
.ssc-planet-pending {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    text-align: center;
    padding: 8px 0 4px;
    font-style: italic;
}

/* 모바일 행성 카드 축소 */
@media (max-width: 640px) {
    .ssc-planet-orb-wrap { padding: 16px 0 6px; }
    .ssc-planet-orb { width: 64px; height: 64px; font-size: 26px; }
    .ssc-planet-ring { width: 96px; height: 21px; }
}

/* ── 코스믹 클릭 유도 힌트 바 ────────────────────────────── */
.cosmic-hint-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 0 0 rgba(167,139,250,0.7);
    animation: hint-pulse 2s ease-out infinite;
    flex-shrink: 0;
}

@keyframes hint-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(167,139,250,0.7); }
    60%  { box-shadow: 0 0 0 8px rgba(167,139,250,0); }
    100% { box-shadow: 0 0 0 0   rgba(167,139,250,0); }
}

.cosmic-hint-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgba(139,92,246,0.10);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(196,181,253,0.80);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.cosmic-hint-chip:hover {
    background: rgba(139,92,246,0.22);
    border-color: rgba(139,92,246,0.55);
    color: #e9d5ff;
    box-shadow: 0 0 10px rgba(139,92,246,0.2);
}

/* ── 대시보드 헤더 버튼 (futuristic glass style) ────────────── */
.dash-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    height: 40px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: border-color 0.28s, box-shadow 0.28s, color 0.28s, background 0.28s, transform 0.18s;
    letter-spacing: 0.01em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* 스캔라인 shimmer */
.dash-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(139,92,246,0.18) 40%,
        rgba(192,132,252,0.22) 50%,
        rgba(139,92,246,0.18) 60%,
        transparent 100%
    );
    transform: skewX(-15deg);
    transition: left 0s;
    pointer-events: none;
}

.dash-btn:hover::before {
    left: 130%;
    transition: left 0.55s ease;
}

/* 하단 글로우 라인 */
.dash-btn::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.9), rgba(192,132,252,0.7), rgba(139,92,246,0.9), transparent);
    transform: translateX(-50%);
    transition: width 0.3s ease;
    border-radius: 99px;
}

.dash-btn:hover::after {
    width: 80%;
}

.dash-btn:hover {
    border-color: rgba(139,92,246,0.55);
    box-shadow:
        0 0 14px rgba(139,92,246,0.22),
        0 0 28px rgba(139,92,246,0.10),
        inset 0 0 16px rgba(139,92,246,0.06);
    color: rgba(255,255,255,0.96);
    background: rgba(99,102,241,0.11);
    transform: translateY(-1px);
}

.dash-btn:active {
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 0 8px rgba(139,92,246,0.18);
}

/* 플랜 칩 — 활성 상태 (토글 후) */
#plan-chip-btn.active,
#guide-toggle-btn.active {
    border-color: rgba(139,92,246,0.6);
    background: rgba(99,102,241,0.15);
    color: rgba(192,132,252,0.95);
    box-shadow: 0 0 12px rgba(139,92,246,0.25), inset 0 0 12px rgba(139,92,246,0.06);
}

/* ═══════════════════════════════════════════════════════════
   COSMIC PORTAL MAP
   ═══════════════════════════════════════════════════════════ */

#cosmic-map {
    position: relative;
    width: 100%;
    height: 880px;
    margin: 24px 0 8px;
    overflow: visible;
}

/* SVG 별자리 라인 */
#cosmic-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* ── 중앙 진도 게이지 ── */
#cosmic-center {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 182px;   /* 130 × 1.4 */
    height: 182px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cosmic-pulse 4s ease-in-out infinite;
}

@keyframes cosmic-pulse {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(165,180,252,0.35)); }
    50%       { filter: drop-shadow(0 0 28px rgba(165,180,252,0.65)); }
}

.cosmic-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.cosmic-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.07);
    stroke-width: 6;
}

.cosmic-ring-arc {
    fill: none;
    stroke: url(#cosmic-grad);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    transition: stroke-dashoffset 1.2s ease;
}

.cosmic-center-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
}

/* 중앙 항성 구체 */
.cosmic-center-star {
    position: absolute;
    width: 108px; height: 108px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%,
        #fffde7 0%, #fff59d 10%, #fdd835 26%, #fb8c00 52%, #bf360c 76%, #3e1000 100%);
    box-shadow:
        0 0 0 4px  rgba(253,216,53,0.18),
        0 0 20px   rgba(255,180,0,0.70),
        0 0 45px   rgba(255,120,0,0.45),
        0 0 90px   rgba(255,80,0,0.22),
        0 0 150px  rgba(255,60,0,0.10);
    animation: solar-pulse 3.5s ease-in-out infinite;
    z-index: 0;
}
@keyframes solar-pulse {
    0%,100% { box-shadow:
        0 0 0 4px  rgba(253,216,53,0.18),
        0 0 20px   rgba(255,180,0,0.70),
        0 0 45px   rgba(255,120,0,0.45),
        0 0 90px   rgba(255,80,0,0.22); }
    50%      { box-shadow:
        0 0 0 8px  rgba(253,216,53,0.25),
        0 0 32px   rgba(255,180,0,0.88),
        0 0 65px   rgba(255,120,0,0.60),
        0 0 120px  rgba(255,80,0,0.32); }
}

.cosmic-center-pct {
    font-size: 28px;  /* 20 × 1.4 */
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.5px;
    line-height: 1.1;
    text-shadow:
        0 0 8px rgba(0,0,0,0.9),
        0 1px 4px rgba(0,0,0,0.8),
        0 0 20px rgba(0,0,0,0.6);
}

.cosmic-center-label {
    font-size: 12px;  /* 9 × 1.4 */
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow:
        0 0 6px rgba(0,0,0,0.9),
        0 1px 3px rgba(0,0,0,0.8);
}

/* ── 카드 공통 ── */
.cosmic-card {
    position: absolute;
    left: calc(50% + var(--cx, 0px));
    top: calc(52% + var(--cy, 0px));
    transform: translate(-50%, -50%) translateY(0px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    z-index: 5;
    animation: cosmic-float var(--c-dur, 7s) var(--c-delay, 0s) ease-in-out infinite;
    transition: z-index 0s;
}

.cosmic-card:hover { z-index: 20; }

@keyframes cosmic-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50%       { transform: translate(-50%, -50%) translateY(-8px); }
}

/* ── 오브 링 (진도 conic-gradient) ── */
.cosmic-orb-ring {
    --prog: 0%;
    width: calc(var(--orb-size, 78px) + 10px);
    height: calc(var(--orb-size, 78px) + 10px);
    border-radius: 50%;
    background: conic-gradient(
        var(--c-accent, #a5b4fc) 0%,
        var(--c-accent, #a5b4fc) var(--prog),
        rgba(255,255,255,0.07) var(--prog),
        rgba(255,255,255,0.07) 100%
    );
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* ::before 제거 — orb가 정확히 내부를 채우므로 불필요 */

.cosmic-card:hover .cosmic-orb-ring {
    transform: scale(1.12);
    box-shadow: 0 0 30px var(--c-glow, rgba(99,102,241,0.6)),
                0 0 60px var(--c-glow, rgba(99,102,241,0.25));
}

/* ── 오브 구체 ── */
.cosmic-orb {
    width: var(--orb-size, 78px);
    height: var(--orb-size, 78px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--orb-font, 30px);
    position: relative;
    z-index: 1;
    background: radial-gradient(
        circle at var(--hx, 50%) var(--hy, 50%),
        rgba(255,255,255,0.72) 0%,
        var(--c-accent, #a5b4fc) 15%,
        var(--c-mid,    #3730a3) 56%,
        var(--c-mid,    #3730a3) 100%
    );
    box-shadow:
        0 0 20px var(--c-glow, rgba(99,102,241,0.5)),
        0 0 44px var(--c-glow, rgba(99,102,241,0.2)),
        inset var(--shx, 0px) var(--shy, 0px) 18px rgba(0,0,0,0.50);
    transition: box-shadow 0.35s ease;
}

/* ── AI 인사이트 아티클 위성 시스템 ────────────────────────── */
.cosmic-sat-wrap {
    position: absolute;
    /* 행성 중앙 기준 — cosmic-orb-ring이 88px이므로 중심은 44px */
    top: calc(44px + 5px); left: calc(44px + 5px);  /* orb-ring 중심 */
    width: 0; height: 0;
    transform-origin: 0 0;
    pointer-events: none;
}
.cosmic-sat-1 { animation: orb-cw   7s linear infinite; }
.cosmic-sat-2 { animation: orb-ccw 12s linear infinite; animation-delay: -4s; }

.cosmic-sat {
    position: absolute;
    border-radius: 50%;
}
/* 위성 1: 가까운 궤도 r=58px, 금색 */
.cosmic-sat-1 .cosmic-sat {
    width: 8px; height: 8px;
    left: 58px; top: -4px;
    background: radial-gradient(circle at 35% 30%, #fef08a, #f59e0b, #78350f);
    box-shadow: 0 0 7px rgba(251,191,36,0.75);
    animation: orb-ccw 7s linear infinite;
}
/* 위성 2: 먼 궤도 r=76px, 보라색 */
.cosmic-sat-2 .cosmic-sat {
    width: 6px; height: 6px;
    left: 76px; top: -3px;
    background: radial-gradient(circle at 35% 30%, #e9d5ff, #7c3aed, #1e1b4b);
    box-shadow: 0 0 6px rgba(124,58,237,0.65);
    animation: orb-cw 12s linear infinite;
    animation-delay: -4s;
}

/* ── 라벨 ── */
.cosmic-name {
    font-size: 11.5px;
    font-weight: 800;
    color: #E2E8F0;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
    transition: color 0.2s;
}

.cosmic-sub {
    font-size: 9.5px;
    color: rgba(255,255,255,0.38);
    text-align: center;
    white-space: nowrap;
    margin-top: -3px;
}

.cosmic-card:hover .cosmic-name { color: var(--c-accent, #a5b4fc); }

/* ── Enterprise 항성 (teal 태양 스타일) ── */
.cosmic-enterprise .cosmic-star-orb {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 36% 32%,
        #ecfeff 0%, #a5f3fc 15%, #22d3ee 38%, #0891b2 62%, #0c4a6e 85%, #083344 100%);
    box-shadow:
        0 0 0 6px  rgba(34,211,238,0.10),
        0 0 22px   rgba(34,211,238,0.55),
        0 0 50px   rgba(34,211,238,0.30),
        0 0 90px   rgba(34,211,238,0.15),
        0 0 140px  rgba(34,211,238,0.07);
    animation: enterprise-star-pulse 4s ease-in-out infinite;
    transition: box-shadow 0.35s ease, filter 0.35s ease;
}
@keyframes enterprise-star-pulse {
    0%,100% { box-shadow:
        0 0 0 6px  rgba(34,211,238,0.10),
        0 0 22px   rgba(34,211,238,0.55),
        0 0 50px   rgba(34,211,238,0.30),
        0 0 90px   rgba(34,211,238,0.15); }
    50%      { box-shadow:
        0 0 0 10px rgba(34,211,238,0.18),
        0 0 32px   rgba(34,211,238,0.70),
        0 0 70px   rgba(34,211,238,0.45),
        0 0 120px  rgba(34,211,238,0.22); }
}
.cosmic-enterprise:hover .cosmic-star-orb {
    box-shadow:
        0 0 0 10px rgba(34,211,238,0.22),
        0 0 35px   rgba(34,211,238,0.75),
        0 0 75px   rgba(34,211,238,0.50),
        0 0 130px  rgba(34,211,238,0.25);
    filter: brightness(1.18);
}
.cosmic-enterprise:hover .cosmic-name { color: #a5f3fc !important; }

/* ── 내/외부 링 크기 차이 ── */
.cosmic-inner { --orb-size: 94px; --orb-font: 36px; } /* 78 × 1.2 */
.cosmic-inner .cosmic-name { font-size: 13px; }        /* 11.5 × 1.2 */
.cosmic-inner .cosmic-sub  { font-size: 10.5px; }      /* 9.5 × 1.2 */
.cosmic-outer .cosmic-name { font-size: 10.5px; }
.cosmic-outer .cosmic-sub  { display: none; }

/* ── 엔터프라이즈 항성 위성 ── */
/* cosmic-enterprise 카드는 flex column — 위성은 absolute로 항성 중심 기준 */
.cosmic-enterprise { overflow: visible; }

.cs-sat-wrap {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    transform-origin: 0 0;
    pointer-events: none;
    z-index: 8;
}
/* 행성 1 (주황) — 내부 궤도 r≈88px, 반시계 13s */
.cs-sat-1 { animation: orb-ccw 13s linear infinite; }
.cs-planet-orange {
    position: absolute;
    left: 80px; top: -9px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        #fed7aa, #f97316 45%, #7c2d12 100%);
    box-shadow: 0 0 10px rgba(249,115,22,0.70),
                0 0 22px rgba(249,115,22,0.35);
    animation: orb-cw 13s linear infinite;
}
/* 행성 2 (보라) — 외부 궤도 r≈112px, 시계 21s */
.cs-sat-2 {
    animation: orb-cw 21s linear infinite;
    animation-delay: -8s;
}
.cs-planet-purple {
    position: absolute;
    left: 104px; top: -8px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%,
        #e9d5ff, #7c3aed 45%, #1e1b4b 100%);
    box-shadow: 0 0 10px rgba(124,58,237,0.70),
                0 0 22px rgba(124,58,237,0.35);
    animation: orb-ccw 21s linear infinite;
    animation-delay: -8s;
}

/* 모바일 — 위성 숨김 */
@media (max-width: 768px) {
    .cs-sat-wrap { display: none; }
}

/* ── 코스믹 맵 우주선 ── */
#cosmic-ship {
    filter: drop-shadow(0 0 8px rgba(0,243,255,0.5)) drop-shadow(0 0 20px rgba(0,243,255,0.2));
}

/* 모바일에서 우주선 숨김 */
@media (max-width: 768px) {
    #cosmic-ship { display: none; }
}

/* ── 모바일: 2열 그리드로 폴백 ── */
@media (max-width: 768px) {
    #cosmic-map {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px 0;
    }
    #cosmic-center, #cosmic-svg { display: none; }
    .cosmic-card {
        position: static;
        transform: none;
        animation: none;
        left: auto; top: auto;
        padding: 16px 8px;
        background: rgba(14,20,42,0.9);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 16px;
    }
    .cosmic-card:hover { transform: translateY(-4px); }
    .cosmic-sub { display: block; }
}

/* ═══════════════════════════════════════════════════════════
   A. 학습 진도 오빗 링 (conic-gradient progress ring)
   ═══════════════════════════════════════════════════════════ */
.ssc-orbit-progress {
    --prog: 0%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    /* 진도 호 + 나머지 영역 */
    background: conic-gradient(
        var(--accent, #a5b4fc) 0%,
        var(--accent, #a5b4fc) var(--prog),
        rgba(255,255,255,0.08) var(--prog),
        rgba(255,255,255,0.08) 100%
    );
    padding: 4px; /* 링 두께 */
    z-index: 1;
    transition: background 0.8s ease;
}

/* 내부 마스킹 — 행성 뒤 배경 매칭 */
.ssc-orbit-progress::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: rgba(8, 12, 26, 0.98);
    z-index: 0;
}

/* 행성 오브는 마스크 위에 */
.ssc-orbit-progress .ssc-planet-orb {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
}

/* 진도 0% 시 링 숨김 (시각적 노이즈 방지) */
.ssc-orbit-progress[style*="--prog: 0%"]::after,
.ssc-orbit-progress:not([style]) {
    /* 기본 상태: 링만 어둡게 */
}

/* 진도가 있을 때 외부 글로우 */
.ssc-orbit-progress:not([style*="--prog: 0%"]) {
    box-shadow: 0 0 12px var(--orb-glow, rgba(99,102,241,0.35));
}

/* ═══════════════════════════════════════════════════════════
   C. 별똥별 (Shooting Stars) — 순수 CSS
   ═══════════════════════════════════════════════════════════ */
#dashboard-view::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* 별똥별 개별 요소 */
.shooting-star {
    position: absolute;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(200,220,255,0) 100%);
    border-radius: 100px;
    animation: shoot-across var(--s-dur, 2.4s) var(--s-delay, 0s) ease-in infinite;
    opacity: 0;
    transform-origin: left center;
    transform: rotate(var(--s-angle, -35deg));
    top: var(--s-top, 15%);
    left: var(--s-left, 60%);
    width: var(--s-len, 90px);
    pointer-events: none;
    z-index: 0;
}

@keyframes shoot-across {
    0%   { opacity: 0;   transform: rotate(var(--s-angle, 35deg)) translateX(0); }
    5%   { opacity: 0.9; }
    40%  { opacity: 0.7; }
    60%  { opacity: 0;   transform: rotate(var(--s-angle, 35deg)) translateX(calc(var(--s-len, 90px) * 3)); }
    100% { opacity: 0;   transform: rotate(var(--s-angle, 35deg)) translateX(calc(var(--s-len, 90px) * 3)); }
}

/* ══ 모바일 스크롤 도우미 ══════════════════════════════════════ */
#mob-scroll-up-btn {
    display: none; /* 데스크탑에서 숨김 */
}

/* 대시보드 스크롤 다운 힌트 (모바일 전용) */
#dash-scroll-hint {
    display: none;
}

@keyframes dash-hint-bounce {
    0%, 100% { transform: translateY(0);   opacity: 0.9; }
    50%       { transform: translateY(6px); opacity: 0.5; }
}

@media (max-width: 1024px) {
    #dash-scroll-hint {
        display: flex;
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        align-items: center;
        gap: 6px;
        background: rgba(79, 70, 229, 0.82);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 7px 16px 7px 12px;
        border-radius: 99px;
        z-index: 488;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s;
        backdrop-filter: blur(6px);
        white-space: nowrap;
    }
    #dash-scroll-hint.hint-visible {
        opacity: 1;
        animation: dash-hint-bounce 1.4s ease-in-out infinite;
    }
    #dash-scroll-hint svg {
        flex-shrink: 0;
    }

    #mob-scroll-up-btn {
        display: flex;
        position: fixed;
        bottom: 76px;
        right: 14px;
        width: 42px;
        height: 42px;
        background: rgba(79, 70, 229, 0.88);
        color: #fff;
        border: none;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 490;
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px) scale(0.85);
        transition: opacity 0.25s, transform 0.25s;
        box-shadow: 0 4px 16px rgba(79, 70, 229, 0.5);
        -webkit-tap-highlight-color: transparent;
    }

    #mob-scroll-up-btn.mob-scroll-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    /* 스크롤 진행 표시줄 (우측 가장자리) */
    #mob-scroll-bar {
        display: block;
        position: fixed;
        top: 52px;
        right: 0;
        width: 3px;
        height: calc(100vh - 52px);
        background: rgba(0, 0, 0, 0.06);
        z-index: 489;
        pointer-events: none;
    }

    #mob-scroll-thumb {
        position: absolute;
        right: 0;
        width: 3px;
        background: rgba(79, 70, 229, 0.45);
        border-radius: 2px;
        min-height: 24px;
        transition: top 0.08s linear, height 0.08s linear;
    }
}

/* ══ 모바일 섹션 네비게이션 (미니 행성) ═══════════════════════ */
#mob-section-nav {
    display: none; /* 데스크탑에서 숨김 */
}

/* 미니 행성 — 데스크탑 cosmic-orb 와 동일한 radial-gradient */
.mob-planet {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(
        circle at var(--hx, 50%) var(--hy, 50%),
        rgba(255,255,255,0.72) 0%,
        var(--c-accent, #a5b4fc) 15%,
        var(--c-mid,    #3730a3) 56%,
        var(--c-mid,    #3730a3) 100%
    );
    box-shadow:
        0 0 10px var(--c-glow, rgba(99,102,241,0.5)),
        0 0 22px var(--c-glow, rgba(99,102,241,0.2)),
        inset var(--shx, 0px) var(--shy, 0px) 8px rgba(0,0,0,0.5);
}

/* 엔터프라이즈 — 아쿠아 항성 */
.mob-planet-enterprise {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 36% 32%,
        #ecfeff 0%, #a5f3fc 15%, #22d3ee 38%, #0891b2 62%, #0c4a6e 85%, #083344 100%);
    box-shadow:
        0 0 12px rgba(34,211,238,0.7),
        0 0 24px rgba(34,211,238,0.35),
        inset -2px -2px 6px rgba(0,0,0,0.4);
    animation: mob-enterprise-pulse 4s ease-in-out infinite;
}

@keyframes mob-enterprise-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(34,211,238,0.7),  0 0 24px rgba(34,211,238,0.35), inset -2px -2px 6px rgba(0,0,0,0.4); }
    50%       { box-shadow: 0 0 18px rgba(34,211,238,0.90), 0 0 36px rgba(34,211,238,0.55), inset -2px -2px 6px rgba(0,0,0,0.4); }
}

/* 우주선 카드 */
.mob-snav-ship {
    background: none !important;
    border-color: transparent !important;
    min-height: 64px;
    animation: mob-ship-float 3s ease-in-out infinite;
}
.mob-snav-ship:active {
    background: none !important;
    transform: scale(0.97) translateY(0px);
}

@keyframes mob-ship-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-4px); }
}

@media (max-width: 768px) {
    /* 행성 우주 지도 숨김 */
    #cosmic-map {
        display: none !important;
    }

    /* 모바일 섹션 네비 표시 */
    #mob-section-nav {
        display: block;
        margin: 8px 0 24px;
    }

    .mob-snav-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .mob-snav-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 12px 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        cursor: pointer;
        text-align: left;
        transition: background 0.18s, transform 0.15s;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .mob-snav-btn:active {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(0.97);
    }

    .mob-snav-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .mob-snav-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .mob-snav-label {
        font-size: 12px;
        font-weight: 700;
        color: #e2e8f0;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mob-snav-sub {
        font-size: 10px;
        color: #94a3b8;
        line-height: 1.2;
        white-space: nowrap;
    }
}