@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;800;900&family=JetBrains+Mono:wght@500;800&family=Nanum+Pen+Script&family=Gaegu:wght@400;700&family=Caveat:wght@400;700&family=Dokdo&family=Hi+Melody&family=Single+Day&family=Yeon+Sung&family=Cute+Font&family=Nanum+Gothic:wght@400;700&family=Nanum+Myeongjo:wght@400;700&family=Noto+Sans+KR:wght@400;500;700&family=IBM+Plex+Sans+KR:wght@400;500;700&display=swap');

        /* 📰 실시간 시황 — 이슈 박스 활성 상태 (2026-05-26: 다른 카테고리 박스 제거, 이슈만 유지) */
        .mf-cat-box.mf-cat-active {
            border-width: 2px;
            filter: brightness(1.25) saturate(1.2);
        }
        .mf-cat-box[data-cat="all"].mf-cat-active { border-color: #f97316; } /* orange-500 */


        /* 🎊 생일 축하 폭죽 애니메이션 */
        .birthday-cell {
            position: relative;
            overflow: hidden;
            background-color: rgba(244, 114, 182, 0.2) !important;
            /* 배경을 좀 더 선명하게 */
        }

        /* [마스터 전용 HUD] 온도계 본체 + 글자 통합 설계 */
        #market-gauge {
            position: fixed !important;
            /* 화면에 박제 */
            right: 25px !important;
            /* 우측 벽에서 이격 */
            top: 50% !important;
            /* 수직 중앙 정렬 */
            transform: translateY(-50%) !important;
            z-index: 1000 !important;
            /* 최상단 배치 */

            background: rgba(15, 23, 42, 0.8) !important;
            backdrop-filter: blur(12px) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            padding: 25px 12px 15px 12px !important;
            /* 상단 여백 확보 (글자 들어갈 자리) */
            border-radius: 24px !important;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;

            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 8px !important;
            transition: all 0.4s ease !important;
        }

        /* 🚩 가출했던 글자를 온도계 바로 위에 소환 */
        #market-gauge::before {
            content: "MARKET TEMP";
            display: block;
            writing-mode: vertical-rl;
            /* 세로로 간지나게 배치 */
            text-orientation: mixed;
            font-size: 10px;
            font-weight: 900;
            color: #818cf8;
            letter-spacing: 2px;
            margin-bottom: 10px;
            opacity: 0.8;
        }

        /* 마우스 올리면 마스터를 환영하듯 살짝 튀어나옴 */
        #market-gauge:hover {
            right: 35px !important;
            background: rgba(30, 41, 59, 0.95) !important;
            border-color: rgba(99, 102, 241, 0.5) !important;
        }

        .confetti-piece {
            position: absolute !important;
            width: 3px !important;
            height: 3px !important;
            opacity: 0;
            border-radius: 1px !important;
            /* 'cubic-bezier'를 써서 떨어지는 리듬 자체를 꼬아버립니다 */
            animation: confetti-chaos 4s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
            z-index: 100 !important;
        }

        /* 📱 모바일 전용: 생일 칸에 왕 케이크 소환 */
        @media (max-width: 1024px) {

            /* 1️⃣ [정렬] 모든 칸의 높이를 강제로 묶어서 줄을 맞춥니다 */
            .cal-grid .cal-cell {
                height: 52px !important;
                /* 높이를 더 콤팩트하게 고정 */
                padding: 2px 0 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: flex-start !important;
            }

            /* 2️⃣ [케이크] 사이즈 대폭 축소 (15px) 및 위치 강제 고정 */
            .birthday-cell::before,
            .birthday-cell::after {
                content: '🎂' !important;
                display: block !important;
                position: absolute !important;
                top: 55% !important;
                /* 숫자 아래쪽으로 배치 */
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                font-size: 15px !important;
                /* 👈 이 숫자가 작아야 줄이 안 벌어집니다 */
                opacity: 0.7 !important;
                z-index: 5 !important;
            }

            /* 3️⃣ [텍스트] 음력/절기 글자가 줄을 깨지 않게 크기 최소화 */
            .lunar-text {
                font-size: 7px !important;
                transform: scale(0.8) !important;
                line-height: 1 !important;
                margin-top: 0 !important;
            }
        }

        /* 🌈 속도와 타이밍을 완전히 따로 국밥으로 설정 */
        .confetti-piece:nth-child(1) {
            left: 7%;
            background: #ff5252 !important;
            animation-duration: 2.1s;
            animation-delay: -0.5s;
            --drift: 15px;
        }

        .confetti-piece:nth-child(2) {
            left: 22%;
            background: #ffd740 !important;
            animation-duration: 4.8s;
            animation-delay: -3.2s;
            --drift: -25px;
        }

        .confetti-piece:nth-child(3) {
            left: 38%;
            background: #69f0ae !important;
            animation-duration: 3.2s;
            animation-delay: -1.5s;
            --drift: 10px;
        }

        .confetti-piece:nth-child(4) {
            left: 52%;
            background: #e040fb !important;
            animation-duration: 5.5s;
            animation-delay: -4.8s;
            --drift: -20px;
        }

        .confetti-piece:nth-child(5) {
            left: 68%;
            background: #40c4ff !important;
            animation-duration: 2.7s;
            animation-delay: -0.8s;
            --drift: 30px;
        }

        .confetti-piece:nth-child(6) {
            left: 80%;
            background: #ffab40 !important;
            animation-duration: 4.2s;
            animation-delay: -2.5s;
            --drift: -15px;
        }

        .confetti-piece:nth-child(7) {
            left: 91%;
            background: #ffffff !important;
            animation-duration: 3.5s;
            animation-delay: -1.1s;
            --drift: 20px;
        }

        .confetti-piece:nth-child(8) {
            left: 14%;
            background: #ff4081 !important;
            animation-duration: 5.1s;
            animation-delay: -3.9s;
            --drift: -12px;
        }

        .confetti-piece:nth-child(9) {
            left: 46%;
            background: #7c4dff !important;
            animation-duration: 2.4s;
            animation-delay: -0.3s;
            --drift: 35px;
        }

        .confetti-piece:nth-child(10) {
            left: 96%;
            background: #1de9b6 !important;
            animation-duration: 6.0s;
            animation-delay: -5.5s;
            --drift: -40px;
        }

        @keyframes confetti-chaos {
            0% {
                top: -15%;
                transform: translateX(0) rotate(0deg);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            100% {
                top: 115%;
                transform: translateX(var(--drift)) rotate(720deg);
                opacity: 0;
            }
        }

        /* ==================================================
   🚀 마스터 최종 처방: 줄 맞춤 & 케이크 다이어트
   ================================================== */

        /* 1. PC 모드: 케이크 완전 삭제 (꽃가루만 허용) */
        .birthday-cell::before,
        .birthday-cell::after {
            content: none !important;
        }

        /* 2. 모바일 모드: 칸 높이 고정 & 케이크 축소 */
        @media (max-width: 1024px) {

            /* 모든 칸의 키를 52px로 똑같이 맞춰서 줄을 세웁니다 */
            .cal-grid .cal-cell {
                height: 52px !important;
                padding: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
            }

            /* 케이크 사이즈를 16px로 줄여서 칸을 안 벌리게 합니다 */
            .birthday-cell::after {
                content: '🎂' !important;
                display: block !important;
                position: absolute !important;
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                font-size: 16px !important;
                opacity: 0.8 !important;
                z-index: 20 !important;
            }

            /* 폰에서 꽃가루는 확실히 끕니다 */
            .confetti-piece {
                display: none !important;
            }
        }



        :root {
            --primary: #6366f1;
            --accent-btn: #0ea5e9;
            --glow: rgba(14, 165, 233, 0.4);
        }

        .dark {
            --accent-btn: #00e5ff;
            --glow: rgba(0, 229, 255, 0.5);
        }

        /* 🌐 공통 설정: 상단바(sticky) 완벽 보호 및 가로 흔들림 차단 */
        html,
        body {
            font-family: 'Pretendard', sans-serif;
            scroll-behavior: smooth;
            scroll-padding-top: 120px;
            transition: background-color 0.5s ease;
            max-width: 100vw !important;
            /* 👇 앙숙 코드를 버리고, 상단바는 살리면서 흔들림만 잘라내는 안전한 설정 */
            overflow-x: clip !important;
            overscroll-behavior-x: none !important;
        }


        /* 📱 모바일 전용: 세로 스크롤만 허용하여 튕김 완벽 방지 */
        @media (max-width: 1023px) {

            html,
            body {
                touch-action: auto !important;
                /* 👈 확대/축소(줌인 아웃) 기능 완벽 복구! */
                overflow-x: clip !important;
                /* 👈 hidden 대신 clip을 써야 상단바 고정이 안 풀립니다! */
                max-width: 100vw !important;
                /* 👈 화면 작아짐(가로 축소) 방지는 튼튼하게 유지! */
            }
        }

        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 10px;
        }

        /* 👇 스크롤바 위아래를 깎아서 둥근 모서리 침범 완벽 차단 */
        ::-webkit-scrollbar-track {
            background: transparent;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .dark ::-webkit-scrollbar-thumb {
            background: #1e293b;
        }

        /* 📱 모바일 기본 여백 설정 (공간 확보) */
        .app-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
            /* 위아래 간격 축소 (기존 24px) */
            padding: 8px;
            /* 바깥 여백 대폭 축소 (기존 16px) */
            max-width: 100%;
            margin: 0 auto;
            transition: all 0.4s ease;
        }

        #config-aside {
            order: 1;
        }

        #main-content-area {
            order: 2;
            position: relative;
        }

        #left-hub-aside {
            order: 3;
        }

        /* 💻 PC 전용: 넓은 화면에 맞는 여유로운 여백 완벽 유지 */
        @media (min-width: 1024px) {
            .app-container {
                display: grid;
                /* 💡 가운데 채팅창이 무한 팽창하여 오른쪽 패널을 밀어내지 못하도록 minmax 안전벨트 장착! */
                grid-template-columns: 320px minmax(0, 1fr) 320px;
                padding: 24px;
                /* PC 바깥 여백 복구 */
                max-width: 1800px;
                align-items: start;
            }

            .side-panel {
                position: sticky;
                top: 88px;
                height: calc(100vh - 110px);
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
            }

            .side-panel::-webkit-scrollbar {
                display: none;
            }

            #left-hub-aside {
                order: 1;
            }

            #main-content-area {
                order: 2;
            }

            #config-aside {
                order: 3;
            }

            /* PC 글래스 카드 안쪽 여백 넓게 복구 */
            .glass-card {
                padding: 1.5rem !important;
            }
        }

        #accordion-body-wrapper {
            display: grid;
            grid-template-rows: 1fr;
            transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .accordion-closed {
            grid-template-rows: 0fr !important;
        }

        /* 📱 모바일 카드 안쪽 여백 다이어트 */
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(30px);
            border-radius: 1.2rem;
            /* 라이트 카드 테두리 명확히 — slate-300 중립색(섹터 컬러 강조선과 충돌 없음). 기존 sky 0.1=거의 투명 (2026-06-11 마스터) */
            border: 1px solid #cbd5e1;
            box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
            margin-bottom: 1.5rem;
            padding: 1rem;
            /* 안쪽 여백 대폭 축소 (기존 1.5rem) */
            transition: all 0.5s;
            position: relative;
        }

        .side-panel .glass-card,
        .mobile-sheet .glass-card {
            margin-bottom: 0;
        }

        .dark .glass-card {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid #1e293b;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .btn-terminal {
            background-color: var(--accent-btn) !important;
            color: #fff !important;
            font-weight: 900;
            text-transform: uppercase;
            padding: 1.25rem 1.5rem;
            border-radius: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 1.1rem;
            cursor: pointer;
            border: none;
            transition: 0.3s;
            width: 100%;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            z-index: 1;
        }

        .dark .btn-terminal {
            color: #000 !important;
        }

        .btn-terminal:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 25px var(--glow);
        }

        .btn-terminal:active {
            transform: scale(0.98);
        }

        .btn-terminal:disabled {
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 0 20px var(--glow);
        }

        .btn-terminal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: var(--progress, 0%);
            background: rgba(255, 255, 255, 0.25);
            z-index: -1;
            transition: width 0.3s ease-out;
        }

        .dark .btn-terminal::before {
            background: rgba(0, 0, 0, 0.15);
        }

        .spinner {
            width: 18px;
            height: 18px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            display: none;
        }

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

        .pct-counter {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9rem;
            font-weight: 900;
            display: none;
        }

        .input-wrapper {
            position: relative;
            width: 100%;
            border-radius: 1.5rem;
            background: #fff;
            /* 카드 표준 테두리(slate-300)로 명확히 — 기존 #e2e8f0 옅음 (2026-06-11 마스터) */
            border: 2px solid #cbd5e1;
            box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
            transition: 0.3s;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .dark .input-wrapper {
            background: #000;
            border-color: #1e293b;
        }

        textarea {
            width: 100%;
            min-height: 120px;
            padding: 0.5rem 0.7rem !important;
            /* 👈 좌우 여백을 2rem으로 늘려서 벽에서 예쁘게 띄워줍니다! */
            background: transparent;
            border: none;
            font-size: 0.95rem;
            line-height: 1.6;
            outline: none;
            resize: vertical;
            color: inherit;
        }

        .image-preview-grid {
            display: flex;
            gap: 8px;
            padding: 0 1.2rem 1.2rem 1.2rem;
            overflow-x: auto;
        }

        .preview-item {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            background-size: cover;
            background-position: center;
            border: 2px solid #e2e8f0;
            position: relative;
            flex-shrink: 0;
            cursor: pointer;
            transition: 0.2s;
        }

        .preview-item:hover {
            opacity: 0.8;
        }

        .dark .preview-item {
            border-color: #1e293b;
        }

        .btn-remove-img {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #ef4444;
            color: white;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .file-chip {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            background: rgba(14, 165, 233, 0.05);
            border: 1px solid rgba(14, 165, 233, 0.2);
            border-radius: 12px;
            margin-bottom: 8px;
        }

        .dark .file-chip {
            background: rgba(0, 229, 255, 0.05);
            border-color: rgba(0, 229, 255, 0.2);
        }

        .locked-zone {
            opacity: 0.2;
            pointer-events: none;
            transition: 0.5s;
        }

        #msg-box {
            position: fixed;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            padding: 1rem 1.8rem;
            background: rgba(255, 255, 255, 0.95);
            color: #0f172a;
            border-radius: 99px;
            border: 1px solid rgba(14, 165, 233, 0.3);
            /* 🔝 모든 모달(보고서 뷰 z-100002 등)보다 위에 떠야 토스트가 안 가려짐 */
            z-index: 2147483647;
            opacity: 0;
            pointer-events: none;
            transition: 0.3s;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            font-weight: 800;
            text-align: center;
            backdrop-filter: blur(10px);
            font-size: 0.9rem;

            /* 🌟 [강력한 해결책] 가운데 정렬 축소 버그를 막기 위해 크기를 명확하게 지정합니다! */
            width: 85vw !important;
            /* 모바일 화면 가로의 85%를 시원하게 차지하도록 강제 */
            max-width: 400px !important;
            /* PC에서는 너무 커지지 않도록 최대 400px로 제한 */
            word-break: keep-all !important;
            /* 단어가 중간에 쪼개지지 않도록 보호 */
            line-height: 1.5 !important;
            /* 줄 간격을 조금 넓혀서 답답함 해소 */
        }

        .dark #msg-box {
            background: rgba(15, 23, 42, 0.95);
            color: #fff;
            border-color: rgba(0, 229, 255, 0.3);
        }

        #msg-box.show {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) translateY(10px);
        }

        /* 📱 태블릿 세로: 주문 안내 토스트 크게 */
        @media (orientation: portrait) and (min-width: 700px) and (max-aspect-ratio: 4/5) and (any-pointer: coarse) {
            #msg-box {
                font-size: 1.3rem !important;
                padding: 1.3rem 2.2rem !important;
                max-width: 640px !important;
            }
        }

        /* 📱 폰: 주문 안내 토스트 크게 */
        @media (max-width: 500px) {
            #msg-box {
                font-size: 1.1rem !important;
                padding: 1.1rem 1.6rem !important;
            }
        }

        .step-label {
            font-size: 10px;
            font-weight: 900;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
        }

        .action-bar {
            display: flex;
            gap: 6px;
            justify-content: flex-end;
        }

        /* 👇 앞에 'button'을 붙여서 HTML의 방해 공작을 완벽하게 제압합니다! */
        button.btn-action {
            width: 30px !important;
            height: 30px !important;
            padding: 0 !important;
            /* 내부 찌꺼기 여백 완벽 차단 */
            border-radius: 8px !important;
            background: transparent !important;
            color: #64748b !important;
            opacity: 0.35;
            cursor: pointer;
            transition: opacity 0.25s ease, background 0.25s ease;

            /* 내용물이 무조건 정중앙에 오도록 강제합니다 */
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        button.btn-action:hover {
            background: rgba(100, 116, 139, 0.18) !important;
            opacity: 1;
        }

        button.btn-action svg {
            /* 아이콘 크기를 18px로 살짝 키워서 꽉 차고 예쁘게 만듭니다 */
            width: 16px !important;
            height: 16px !important;
            margin: 0 !important;
            /* 아이콘 쏠림 방지 */
        }

        .stock-tag {
            padding: 4px 12px;
            border-radius: 99px;
            font-size: 0.75rem;
            font-weight: 800;
            background: rgba(14, 165, 233, 0.08);
            border: 1px solid rgba(14, 165, 233, 0.3);
            color: #4a8baa;
            cursor: pointer;
            transition: 0.2s;
            display: inline-block;
            margin-bottom: 4px;
        }

        .stock-tag:hover {
            background: rgba(14, 165, 233, 0.2);
            color: #7ab8d6;
        }

        .user-row {
            border-bottom: 1px solid rgba(100, 116, 139, 0.1);
            padding: 12px 0;
            transition: 0.2s;
        }

        .user-row:hover {
            background: rgba(14, 165, 233, 0.02);
        }

        .status-badge {
            font-size: 9px;
            font-weight: 900;
            padding: 2px 6px;
            border-radius: 4px;
            text-transform: uppercase;
            cursor: pointer;
            transition: 0.2s;
        }

        .status-badge:hover {
            opacity: 0.7;
        }

        .badge-pending {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }

        .badge-approved {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        .typing-dots {
            display: flex;
            gap: 4px;
            padding: 12px 16px;
            background: rgba(99, 102, 241, 0.1);
            border-radius: 1rem;
            width: fit-content;
            border: 1px solid rgba(99, 102, 241, 0.2);
        }

        .typing-dots span {
            width: 6px;
            height: 6px;
            background: var(--accent-btn);
            border-radius: 50%;
            animation: type 1.4s infinite ease-in-out both;
        }

        .typing-dots span:nth-child(1) {
            animation-delay: -0.32s;
        }

        .typing-dots span:nth-child(2) {
            animation-delay: -0.16s;
        }

        /* 👇 사라졌던 맥박 애니메이션(type)의 구체적인 움직임을 지정해 줍니다! */
        @keyframes type {

            0%,
            80%,
            100% {
                transform: scale(0.5);
                opacity: 0.3;
            }

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

        .markdown-body {
            line-height: 1.7;
        }

        /* 💡 마스터 인텔 전용: 다크 모드 글자 선명도 극대화 */
        .markdown-body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        .markdown-body h1 {
            font-weight: 900;
            margin-bottom: 1rem;
            color: var(--accent-btn);
            border-bottom: 2px solid rgba(14, 165, 233, 0.2);
            padding-bottom: 0.5rem;
        }

        .markdown-body h2 {
            font-weight: 800;
            margin-top: 1.5rem;
            margin-bottom: 0.8rem;
            color: #cbd5e1;
        }

        .markdown-body h3 {
            font-weight: 800;
            margin-top: 1.2rem;
            margin-bottom: 0.5rem;
        }

        .markdown-body p {
            margin-bottom: 1.4rem;
            /* 👇 문단과 문단 사이의 여백을 넓혀서 숨통을 틔워줍니다 */
            line-height: 1.8;
            /* 👇 줄 간격을 살짝 더 넓혀서 글씨가 뭉쳐 보이지 않게 합니다 */
            word-break: keep-all;
            /* 👇 한글 단어가 줄 끝에서 쪼개지지 않고 예쁘게 다음 줄로 넘어가게 보호합니다 */
            letter-spacing: -0.01em;
            /* 👇 자간을 미세하게 당겨서 단어의 응집력을 높여줍니다 */
        }

        .markdown-body ul,
        .markdown-body ol {
            margin-left: 1.5rem;
            margin-bottom: 1.2rem;
            list-style-type: disc;
        }

        /* 👇 [가독성 결속력 강화] 목록(•) 안의 내용들이 흩어지지 않게 꽉 잡아줍니다! */
        .markdown-body li {
            margin-bottom: 0.4rem !important;
            /* 점과 점 사이의 간격은 좁게 고정 */
        }

        .markdown-body li p {
            margin-top: 0 !important;
            /* 🚨 위쪽 태평양 여백 차단! */
            margin-bottom: 0 !important;
            /* 🚨 아래쪽 태평양 여백 차단! */
        }

        .markdown-body table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 1.5rem;
            border-radius: 0.5rem;
            display: block;
            /* 🚨 핵심: 표를 하나의 블록으로 묶어버림 */
            overflow-x: auto;
            /* 🚨 핵심: 화면을 넘어가면 가로 스크롤바 생성! */
            -webkit-overflow-scrolling: touch;
            /* 모바일에서 부드럽게 스크롤되도록 */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* 📄 [2026-06-09] 보고서 모달 표: AI 표가 창보다 넓으면 오른쪽이 잘려 흰 여백에 가려보이던 것 보정.
           가로 스크롤(display:block/overflow-x) 대신 창 폭에 맞춰 칸 내용이 줄바꿈되게 → 가로 넘침 자체 제거.
           (보고서/참조 패널에만 한정 — 채팅 등 다른 표는 기존 가로 스크롤 유지) */
        #view-modal-content table,
        #vm-right-content table {
            display: table;
            table-layout: fixed;
            width: 100%;
            overflow-x: visible;
        }
        #view-modal-content th, #view-modal-content td,
        #vm-right-content th, #vm-right-content td {
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        /* 👇 [여기에 새로 복사해서 붙여넣으세요!] 마크다운 이미지 고화질 보정 및 팝업 최적화 */
        .markdown-body img {
            max-width: 100%;
            height: auto;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            margin: 25px auto;
            cursor: zoom-in;
            /* 🚨 모바일 축소 시 글씨 흐려짐(Blur) 완벽 방어 (샤픈 효과) */
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            transform: translateZ(0);
        }

        /* 💡 다크모드에서 흰색 배경 이미지의 눈뽕을 막아주는 반전 선글라스! */
        .dark .markdown-body img {
            -webkit-filter: invert(1) hue-rotate(180deg) !important;
            /* 모바일 엔진 강제 명령 */
            filter: invert(1) hue-rotate(180deg) !important;
            /* 절대 권력 부여 */
        }

        .markdown-body th {
            background-color: rgba(14, 165, 233, 0.15);
            color: var(--accent-btn);
            font-weight: 900;
            padding: 0.75rem;
            text-align: left;
            border: 1px solid rgba(14, 165, 233, 0.2);
            /* 👇 글씨가 길면 자연스럽게 줄바꿈되도록 수정 */
            white-space: normal;
            word-break: keep-all;
        }

        .markdown-body td {
            padding: 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.15);
            font-family: 'JetBrains Mono', monospace;
            /* 👇 긴 내용이 가로로 도망가지 않고 아래로 예쁘게 접히도록 수정 */
            white-space: normal;
            word-break: keep-all;
        }

        .markdown-body tr:nth-child(even) {
            background-color: rgba(255, 255, 255, 0.02);
        }

        .markdown-body blockquote {
            border-left: 4px solid var(--accent-btn);
            padding-left: 1rem;
            color: #94a3b8;
            font-style: italic;
            background: rgba(14, 165, 233, 0.05);
            padding: 1rem;
            border-radius: 0 0.5rem 0.5rem 0;
        }

        .markdown-body strong {
            color: #0ea5e9;
            font-weight: 900;
        }

        .dark .markdown-body strong {
            color: #00e5ff;
        }

        .dark .markdown-body strong {
            color: #00e5ff;
        }

        /* 🚀 Mermaid 차트 가로 스크롤 및 텍스트 짤림 완벽 방어 */
        .mermaid {
            overflow-x: auto !important;
            overflow-y: hidden !important;
            max-width: 100% !important;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 10px !important;
        }

        .mermaid svg,
        .language-mermaid svg {
            overflow: visible !important;
            margin: 15px auto !important;
            color-scheme: dark !important;
            max-width: none !important;
            /* 🚨 범인(min-width) 삭제 완료! */
        }

        /* 👇 [안전 장치 추가] 어떤 크기의 차트가 오더라도 글자 크기는 본문에 맞게 단정하고 예쁘게 강제 고정! */
        .mermaid .nodeLabel,
        .mermaid foreignObject div {
            font-size: 14px !important;
            line-height: 1.5 !important;
        }

        .dark .mermaid foreignObject,
        .mermaid foreignObject {
            overflow: visible !important;
        }

        /* 💡 연결선 중간 글자 배경만 깔끔하게 정리 (나머지 촌스러운 강제 색상 코드는 싹 날림!) */
        .dark .mermaid .edgeLabel {
            background-color: transparent !important;
            padding: 0 !important;
        }

        .dark .mermaid .edgeLabel foreignObject div,
        .dark .mermaid .edgeLabel foreignObject span,
        .dark .mermaid .edgeLabel div,
        .dark .mermaid .edgeLabel span {
            color: #ffffff !important;
            background-color: #0f172a !important;
            padding: 4px 8px !important;
            border-radius: 6px !important;
            border: 1px solid rgba(14, 165, 233, 0.4) !important;
            white-space: nowrap !important;
            font-weight: 900 !important;
            line-height: 1.2 !important;
            width: max-content !important;
            display: inline-block !important;
            margin: 0 auto !important;
        }

        #mermaid-container {
            padding-top: 25px !important;
            padding-bottom: 25px !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
        }

        #gatekeeper-overlay {
            position: fixed !important;
            inset: 0 !important;
            /* 연회색 프로스트 배경 → 흰 로그인 카드가 떠 보이게 (라이트 레이어, 2026-06-12). 다크는 아래 .dark 규칙 */
            background: rgba(222, 228, 238, 0.72);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            /* 👇 온도계(10000)보다 무조건 높게 설정하여 화면 맨 앞에 고정합니다 */
            z-index: 99999 !important;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        .dark #gatekeeper-overlay {
            background: rgba(2, 6, 23, 0.8);
        }

        .gate-card {
            width: 100%;
            max-width: 420px;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(14, 165, 233, 0.3);
            border-radius: 2rem;
            padding: 3rem 2rem;
            text-align: center;
            box-shadow: 0 24px 50px -12px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);
            transform: translateY(0);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .dark .gate-card {
            background: rgba(15, 23, 42, 0.95);
            border-color: rgba(99, 102, 241, 0.2);
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
        }

        .auth-btn {
            width: 100%;
            padding: 1rem;
            border-radius: 1rem;
            font-weight: 800;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            cursor: pointer;
            transition: 0.3s;
            border: 2px solid transparent;
        }

        .btn-google {
            background: #fff;
            color: #333;
            border-color: #cbd5e1;
        }

        .btn-google:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            transform: translateY(-2px);
        }

        .dark .btn-google {
            background: #1e293b;
            color: #fff;
            border-color: #334155;
        }

        .dark .btn-google:hover {
            background: #334155;
            border-color: #475569;
        }

        .gate-logo {
            font-size: 2.5rem;
            font-weight: 900;
            font-style: italic;
            margin-bottom: 0.5rem;
            letter-spacing: -0.05em;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .gate-hidden {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            /* 👈 이 줄이 마우스 클릭을 가능하게 합니다! */
        }

        @media (max-width: 600px) and (orientation: portrait) {
            .menu-item { font-size: 18px !important; }   /* 🔧 [2026-06-04] 폰 세로: 메뉴 항목 13.6→18px (헤더 20px는 유지) */
        }
        .menu-item {
            padding: 0.85rem 1rem;
            border-radius: 0.8rem;
            font-weight: 800;
            font-size: 0.85rem;
            cursor: pointer;
            transition: 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #64748b;
        }

        .menu-item:hover {
            background: rgba(14, 165, 233, 0.05);
            color: var(--accent-btn);
        }

        .menu-item.active {
            background: rgba(14, 165, 233, 0.1);
            color: var(--accent-btn);
            border-left: 4px solid var(--accent-btn);
            border-radius: 0 0.8rem 0.8rem 0;
        }

        @media (max-width: 600px) and (orientation: portrait) {
            /* 🔧 [2026-06-04] 폰 세로: 네비 항목 12.8→18px. DART 줄의 종(🔔)·버튼도 같이 키움 */
            .nav-item { font-size: 18px !important; }
            #nav-dart-bell { font-size: 16px !important; padding: 6px 12px !important; }
        }
        .nav-item {
            padding: 0.75rem 0.9rem;
            border-radius: 0.8rem;
            font-weight: 800;
            font-size: 0.8rem;
            color: #64748b;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
        }

        .nav-item:hover {
            background: rgba(56, 189, 248, 0.12);
            color: #ffffff !important;
            opacity: 1;
        }

        .nav-item.active {
            background: rgba(56, 189, 248, 0.12);
            color: #ffffff !important;
            opacity: 1;
            font-weight: 900;
        }

        .nav-item.active::after { content: none; }

        .nav-item.active-rose {
            background: rgba(56, 189, 248, 0.12);
            color: #ffffff !important;
            opacity: 1;
            font-weight: 900;
        }

        .nav-item.active-rose::after { content: none; }

        /* 👇 새로 추가된 DART 전용 에메랄드 활성화 스타일 */
        .nav-item.active-emerald {
            background: rgba(56, 189, 248, 0.12);
            color: #ffffff !important;
            opacity: 1;
            font-weight: 900;
        }

        .nav-item.active-emerald::after { content: none; }

        #mobile-bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(14, 165, 233, 0.15);
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 12px 5px 28px 5px;
            z-index: 4501;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05);
        }

        .dark #mobile-bottom-nav {
            background: rgba(15, 23, 42, 0.98);
            border-top-color: rgba(99, 102, 241, 0.2);
        }

        @media (min-width: 1024px) {
            #mobile-bottom-nav {
                display: none !important;
            }
        }

        .tab-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: #64748b;
            cursor: pointer;
            transition: 0.2s;
            flex: 1;
        }

        .tab-btn.active {
            color: var(--accent-btn);
        }

        .tab-btn span {
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -0.02em;
        }

        .tab-btn .icon {
            font-size: 20px;
            transition: transform 0.2s;
        }

        .tab-btn:active .icon {
            transform: scale(0.9);
        }

        .mobile-sheet {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background: white;
            border-radius: 2.5rem 2.5rem 0 0;
            z-index: 4600;
            padding: 2.5rem 1.5rem 4rem 1.5rem;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.25);
            max-height: 85vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .dark .mobile-sheet {
            background: #0f172a;
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-bottom: none;
        }

        .mobile-sheet.show {
            transform: translateY(0);
        }

        .sheet-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            z-index: 4599;
            display: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .sheet-backdrop.show {
            display: block;
            opacity: 1;
        }

        input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            /* 👇 모바일에서 손가락 좌우 드래그가 안 먹히던 터치 잠김 현상 완벽 해결! */
            touch-action: none !important;
        }

        input[type=range]:focus {
            outline: none;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 26px;
            width: 26px;
            border-radius: 50%;
            background: #10b981;
            cursor: pointer;
            margin-top: -9px;
            box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
            border: 2px solid white;
            transition: transform 0.1s;
        }

        .dark input[type=range]::-webkit-slider-thumb {
            border-color: #0f172a;
        }

        input[type=range]::-webkit-slider-thumb:active {
            transform: scale(1.15);
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 8px;
            cursor: pointer;
            background: #e2e8f0;
            border-radius: 4px;
        }

        .dark input[type=range]::-webkit-slider-runnable-track {
            background: #334155;
        }

        /* 📱 모바일 생일 칸 전용 스타일 */

        /* [1] PC 전용: 왕 케이크 지우고 꽃가루만 살리기 */
        .birthday-cell::after {
            content: none !important;
            display: none !important;
        }

        .confetti-piece {
            display: block !important;
            visibility: visible !important;
        }

        /* [2] 모바일 전용 (1024px 이하): 폰과 태블릿에서만 케이크 소환 */
        @media (max-width: 1024px) {
            .birthday-cell {
                position: relative !important;
                overflow: visible !important;
                background-color: red !important;
            }

            /* 🎂 폰에서만 케이크 등장 (크기 최적화) */
            .birthday-cell::after {
                content: '🎂' !important;
                display: block !important;
                position: absolute !important;
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                font-size: 24px !important;
                opacity: 0.7 !important;
                z-index: 99 !important;
                pointer-events: none !important;
            }

            /* 폰에서는 꽃가루 삭제 */
            .confetti-piece {
                display: none !important;
            }
        }

        /* 👑 시간의 질서: 블러 효과 및 오버레이 */

        /* 📻 마이마이 플레이어 (MyMy Skeuomorphism) */
        .mymy-case {
            background: linear-gradient(145deg, #2d3748, #1a202c);
            border: 3px solid #4a5568;
            border-radius: 10px;
            padding: 12px;
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5), 5px 5px 15px rgba(0, 0, 0, 0.3);
            position: relative;
            color: white;
            margin-bottom: 0.5rem;
            transition: transform 0.2s;
        }

        .dark .mymy-case {
            background: linear-gradient(145deg, #0f172a, #020617);
            border-color: #334155;
        }

        .tape-window {
            background: #000;
            height: 45px;
            border-radius: 6px;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            align-items: center;
            border: 2px solid #718096;
            overflow: hidden;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
        }

        .tape-wheel {
            font-size: 18px;
            animation: rotate-tape 2s linear infinite;
            animation-play-state: paused;
            filter: grayscale(0.5);
        }

        .playing .tape-wheel {
            animation-play-state: running;
            filter: grayscale(0);
        }

        @keyframes rotate-tape {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .physical-btn {
            background: #4a5568;
            border: 1px solid #2d3748;
            border-bottom: 4px solid #1a202c;
            color: #cbd5e1;
            font-size: 10px;
            font-weight: 900;
            padding: 6px 10px;
            cursor: pointer;
            transition: all 0.1s;
            border-radius: 4px;
            text-shadow: 1px 1px 0 #000;
        }

        .physical-btn:active {
            border-bottom: 1px solid #1a202c;
            transform: translateY(3px);
        }

        .mymy-label {
            font-size: 9px;
            padding: 3px 6px;
            font-weight: 900;
            cursor: pointer;
            border-radius: 3px;
            text-transform: uppercase;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
            transition: opacity 0.2s;
        }

        .mymy-label:hover {
            opacity: 0.8;
        }

        .active-label {
            outline: 2px solid #fff;
            outline-offset: 1px;
        }

        /* 📅 크로노 캘린더 (Compact Single View) */
        .cal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.2rem;
            padding: 0 0.5rem;
        }

        .cal-title {
            font-weight: 900;
            font-size: 1rem;
            color: #1e293b;
        }

        .dark .cal-title {
            color: #f8fafc;
        }

        .cal-nav-btn {
            background: transparent;
            border: none;
            color: #64748b;
            font-size: 0.9rem;
            cursor: pointer;
            padding: 0.4rem;
        }

        .cal-nav-btn:hover {
            color: var(--accent-btn);
        }

        .cal-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
            text-align: center;
        }

        .cal-day-label {
            font-size: 1.25rem;   /* 요일(일·월·화…)을 날짜 숫자(text-xl=1.25rem)와 동일 크기로 — 마스터 지시 2026-06-09 */
            font-weight: 900;
            color: #64748b;
            padding-bottom: 0.3rem;
        }

        .cal-day-label.sun {
            color: #ef4444;
        }

        .cal-day-label.sat {
            color: #3b82f6;
        }

        .cal-cell {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding-top: 0px;
            /* 💡 에러 나던 마이너스 값 제거! 무조건 0px로 밀착! */
            font-size: 0.85rem;
            font-weight: 800;
            border-radius: 0.6rem;
            cursor: pointer;
            transition: all 0.2s;
            color: #334155;
            background: transparent;
            border: 1px solid transparent;
        }

        /* 오늘 날짜: 테두리와 은은한 글로우 (눈부심 방지) */
        .cal-cell.today {
            border: 2px solid #0ea5e9 !important;
            background: rgba(14, 165, 233, 0.15) !important;
            box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
        }

        /* 451번 줄 근처 수정 */
        .cal-info-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            /* center에서 flex-start로 변경 */
            width: 100%;
            height: 100%;
            gap: 1px;
        }

        .cal-day-num {
            font-size: 0.9rem;
            line-height: 1;
            margin-bottom: 1px;
        }

        /* 음력/기념일 텍스트 최적화 */
        /* 이렇게 맞추면 나중에 마스터가 보기 훨씬 편해요! */
        .lunar-text {
            font-size: 8px;
            font-weight: 500;
            opacity: 0.5;
            transform: scale(0.85);
            white-space: nowrap;
            /* 이게 있으면 이제 글자가 안 꺾여요! */
        }

        .holiday-text {
            font-size: 8px;
            font-weight: 900;
            color: #ef4444;
            transform: scale(0.85);
            white-space: nowrap;
        }
        /* 🔧 [2026-05-27] PC(md+) 휴일명 = 음력 날짜와 동일 크기·두께 (9px / medium) */
        @media (min-width: 768px) {
            .holiday-text {
                font-size: 9px;
                font-weight: 500;
                letter-spacing: -0.025em;
                transform: none;
                white-space: nowrap;
            }
        }

        .dark .cal-cell {
            color: #e2e8f0;
            background: transparent;
        }

        .cal-cell:hover {
            background: rgba(14, 165, 233, 0.15);
            border-color: rgba(14, 165, 233, 0.5);
            color: #0ea5e9;
            box-shadow: 0 0 12px rgba(14, 165, 233, 0.2);
        }

        .cal-cell.empty {
            background: transparent;
            border: none;
            cursor: default;
        }

        .cal-cell.sun {
            color: #ef4444;
        }

        .cal-cell.sat {
            color: #3b82f6;
        }

        #lib-content {
            overflow-y: hidden !important;
        }

        /* 🚀 라이브러리 팝업창 스크롤바 완벽 숨기기 (기능은 유지) */
        #library-modal>div::-webkit-scrollbar,
        #lib-content::-webkit-scrollbar {
            display: none !important;
        }

        #library-modal>div,
        #lib-content {
            -ms-overflow-style: none !important;
            scrollbar-width: none !important;
        }



        .markdown-body p {
            margin-bottom: 0.5rem !important;
        }

        .markdown-body ul,
        .markdown-body ol {
            margin-top: 0.1rem !important;
            margin-bottom: 0.5rem !important;
        }

        .markdown-body li {
            margin-top: 0 !important;
            margin-bottom: 0.2rem !important;
        }

        .markdown-body li p {
            margin: 0 !important;
            display: inline !important;
            /* 🚨 유령 문단 파괴 핵심 */
        }



        /* [최종] 스크롤하면 위로 사라져서 내용을 가리지 않는 코드 */

        /* 0. 모든 상위 컨테이너 고정 해제 (이게 핵심입니다) */
        #ritual-container,
        [class*="ritual-overlay"],
        [id*="birthday-ritual"] {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 0 !important;
            overflow: visible !important;

            /* 👇 이 줄이 핵심입니다. 전체 상자를 꼴찌로 만들어서 팝업창 뒤로 숨깁니다. */
            z-index: 100 !important;
        }

        /* 1. 상단바: 이제 스크롤하면 위로 밀려 올라가서 사라집니다 */
        .ritual-top-bar {
            position: absolute !important;
            top: 55px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            margin: 0 !important;
            z-index: 5 !important;
            pointer-events: auto;
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(10px);
            border: 2px solid #10b981;
            border-radius: 50px;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 15px 30px 15px 60px !important;
            gap: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
        }

        /* 2. 케이크: 상단바와 함께 위로 사라짐 */
        .birthday-cake-emoji {
            position: absolute !important;
            top: 90px !important;
            /* 👈 여기서 높이 조절 (이제 상단바 안 따라감) */
            left: 50% !important;
            transform: translateX(-50%) !important;
            margin: 0 !important;
            z-index: 9999 !important;
            font-size: 150px !important;
            display: block !important;
        }

        /* 3. 텍스트 및 버튼 (라인 정렬 완료) */
        .ritual-text-zone {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 2px;
        }

        #birthday-user-name-fixed,
        .birthday-sub-text {
            font-size: 20px !important;
            color: #f472b6 !important;
            font-weight: bold !important;
        }

        .birthday-sub-text {
            display: block !important;
            padding-left: 10px !important;
        }

        .ritual-btn-zone {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ritual-divider {
            width: 1px;
            height: 20px;
            background: #475569;
            margin: 0 5px;
        }

        #btn-mute-ritual,
        #btn-close-ritual {
            padding: 6px 12px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 11px;
            font-weight: bold;
            white-space: nowrap;
        }

        #btn-mute-ritual {
            background: #1e293b;
            color: white;
            border: 1px solid #475569;
        }

        #btn-close-ritual {
            background: #e11d48;
            color: white;
            border: none;
        }

        /* 📱 2. 모바일 버전 (768px 이하) */
        @media (max-width: 768px) {

            /* 1. 상단바: 스크롤하면 위로 사라지게 설정 */
            .ritual-top-bar {
                position: absolute !important;
                top: 25px !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                margin: 0 !important;
                width: 92% !important;
                padding: 10px 15px !important;
                border-radius: 20px !important;
                display: flex !important;
                gap: 10px !important;
            }

            /* 2. 글자 설정: 윗줄/아랫줄 따로 움직이기 */

            /* 윗줄 (이름 + 폭죽) 전용 */
            #birthday-user-name-fixed {
                font-size: 14px !important;
                color: #f472b6 !important;
                font-weight: bold !important;

                /* 👇 윗줄만 우측으로 밀고 싶으면 이 숫자를 키우세요 (예: 15, 20...) */
                margin-left: 35px !important;
            }

            /* 아랫줄 (생일 축하합니다!) 전용 */
            .birthday-sub-text {
                font-size: 14px !important;
                color: #f472b6 !important;
                font-weight: bold !important;
                display: block !important;

                /* 👇 아랫줄만 우측으로 밀고 싶으면 이 숫자를 키우세요 (예: 30, 35...) */
                padding-left: 40px !important;
            }

            /* 3. 케이크: 모바일에서 위치 따로 잡기 */
            .birthday-cake-emoji {
                position: absolute !important;
                top: 120px !important;
                /* 👈 [중요] 폰 화면 보면서 이 숫자로 높이 조절! */
                left: 50% !important;
                transform: translateX(-50%) !important;
                margin: 0 !important;
                font-size: 70px !important;
                /* 모바일에선 케이크 크기 축소 */
                /* 👇 이 줄을 새로 추가하세요! 계급을 낮춰서 다른 팝업 밑으로 들어가게 합니다 */
                z-index: 99 !important;
                display: block !important;
            }

            /* 4. 버튼 영역 */
            .ritual-btn-zone {
                gap: 5px !important;
            }

            #btn-mute-ritual,
            #btn-close-ritual {
                padding: 5px 10px !important;
                font-size: 10px !important;
            }
        }



        @keyframes steam {

            0%,
            100% {
                transform: translateY(0) scaleY(1);
                opacity: 0.1;
            }

            50% {
                transform: translateY(-12px) scaleY(1.5);
                opacity: 0.8;
            }
        }



        /* 하단 바 전체 높이 및 패딩 강제 조절 */
        #mobile-bottom-nav {
            height: 60px !important;
            min-height: 60px !important;
            /* 💡 숨어있던 아래쪽 28px 여백을 없애고, 위아래 여백을 0으로 만들어 수직 정중앙 정렬을 완성합니다. */
            padding: 0 10px !important;
        }

        /* 💡 버튼이 상단 바의 전체 높이를 쓰도록 100%로 설정하여 터치 영역을 넓힙니다. */
        .tab-btn {
            height: 100% !important;
            justify-content: center !important;
            align-items: center !important;
            padding: 0 !important;
        }

        /* 💡 빈 공간에 맞춰 아이콘 크기를 시원하게 유지합니다 */
        .tab-btn .icon {
            font-size: 24px !important;
            margin: 0 !important;
            /* 아이콘 자체의 미세한 마진도 초기화 */
        }



        /* --------------------------------------------------
   🔥 [MASTER NEON GLOW] 고농축 핑크 광채 + 화이트 숫자 완성
-------------------------------------------------- */

        /* 1. PC: 잔상 제거 */
        .birthday-cell::before,
        .birthday-cell::after {
            content: none !important;
        }

        /* 2. 모바일 (1024px 이하) */
        @media (max-width: 1024px) {

            .cal-grid .cal-cell,
            .cal-cell {
                height: 75px !important;
                padding-top: 0px !important;
                /* 💡 여기도 에러 값 제거하고 0px로 밀착! */
                display: block !important;
                text-align: center !important;
                position: relative !important;
            }

            /* 🚀 상단바 레이아웃 + 이름 대응 + 케이크 안착 */
            #birthday-ritual-layer>div:first-child {
                margin-top: 45px !important;
                /* 바를 더 위로 올려서 MASTER 글자와 안 겹치게 함 */
                width: 94% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                padding: 6px 12px !important;
                box-sizing: border-box !important;
            }

            #birthday-user-name {
                flex: 1 !important;
                /* 이름 길이에 따라 공간 자동 조절 */
                min-width: 0 !important;
                overflow: hidden !important;
                /* 이름이 너무 길면 자르기 */
                text-overflow: ellipsis !important;
                /* 자른 자리에 '...' 표시 */
                white-space: nowrap !important;
                font-size: 11px !important;
                margin-right: 8px !important;
                text-align: left !important;
            }

            #btn-mute-ritual,
            #btn-close-ritual {
                flex-shrink: 0 !important;
                /* 버튼 모양 고정 */
                padding: 4px 8px !important;
                font-size: 9px !important;
                white-space: nowrap !important;
            }

            /* 💖 생일 칸: 고농축 네온 핑크 광채 효과 */
            .birthday-cell {
                /* 배경색 밀도 상향 */
                background-color: rgba(244, 114, 182, 0.2) !important;

                /* [핵심] 광채 강도 대폭 강화 (중첩 그림자) */
                box-shadow:
                    inset 0 0 20px rgba(244, 114, 182, 0.6),
                    /* 안쪽으로 퍼지는 강한 빛 */
                    0 0 15px rgba(244, 114, 182, 0.4) !important;
                /* 바깥으로 새어나오는 빛 */

                /* 테두리에도 빛나는 핑크 라인 추가 */
                border: 1.5px solid rgba(244, 114, 182, 0.6) !important;
                border-radius: 12px !important;
                z-index: 5 !important;
            }

            /* 🎂 케이크: 바닥에 안정적으로 밀착 */
            .birthday-cell::after {
                content: '🎂' !important;
                position: absolute !important;
                left: 50% !important;
                bottom: 3px !important;
                transform: translateX(-50%) !important;
                font-size: 18px !important;
                line-height: 1 !important;
                opacity: 1 !important;
                /* 케이크도 더 선명하게 */
                z-index: 1 !important;
            }

            /* ⚪ 23일 숫자: 광채 속에서도 묻히지 않는 선명한 화이트 */
            .birthday-cell .cal-day-num {
                color: #ffffff !important;
                font-weight: 900 !important;
                /* 숫자 주변에도 미세한 화이트 광채 추가 */
                text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
                display: inline-block !important;
            }

            /* 생일 칸 내부 텍스트 숨김 */
            .birthday-cell .lunar-text,
            .birthday-cell .holiday-text {
                display: none !important;
            }

            /* 일반 칸 텍스트 유지 */
            .holiday-text,
            .lunar-text {
                display: block !important;
                font-size: 8px !important;
                margin-top: 2px !important;
            }
        }

        /* [마스터 전용 HUD] 온도계 통합 설계 (반응형 완벽 적용) */

        /* 1. PC 모드 (더 우측으로 밀어내고, 더 얇게 다이어트) */
        #market-gauge {
            position: fixed !important;
            right: 8px !important;
            /* 👈 우측 벽에 거의 밀착 (간섭 최소화) */
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 9999 !important;

            background: rgba(15, 23, 42, 0.6) !important;
            backdrop-filter: blur(8px) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            padding: 15px 5px 10px 5px !important;
            /* 👈 좌우 폭을 극단적으로 줄임 */
            border-radius: 12px !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;

            display: flex !important;
            flex-direction: column !important;
            /* PC는 세로 방향 */
            align-items: center !important;
            gap: 4px !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* PC 텍스트 방향 (세로) */
        #market-gauge::before {
            content: "MARKET TEMP";
            display: block;
            writing-mode: vertical-rl !important;
            text-orientation: mixed !important;
            font-size: 8px !important;
            font-weight: 900 !important;
            color: #818cf8 !important;
            letter-spacing: 1px !important;
            margin-bottom: 8px !important;
            opacity: 0.6 !important;
            /* 👈 투명도를 더 높여 글자 가림 최소화 */
        }

        /* 마우스 호버 시 살짝 등장 */
        #market-gauge:hover {
            right: 12px !important;
            background: rgba(30, 41, 59, 0.95) !important;
            border-color: rgba(99, 102, 241, 0.5) !important;
        }

        /* 2. 모바일 모드 (화면 폭 768px 이하일 때 상단 가로 띠로 변신!) */
        @media (max-width: 768px) {
            #market-gauge {
                right: 0 !important;
                left: 0 !important;
                top: 40px !important;
                /* 👈 상단에 딱 붙임 */
                transform: none !important;
                /* 중앙 정렬 해제 */

                flex-direction: row !important;
                /* 👈 가로 방향으로 눕힘! */
                justify-content: center !important;
                padding: 5px 10px !important;
                border-radius: 0 0 12px 12px !important;
                /* 밑부분만 둥글게 */
                border-left: none !important;
                border-right: none !important;
                border-top: none !important;

                background: rgba(15, 23, 42, 0.95) !important;
                /* 스크롤 시 본문 글자가 안 비치게 진하게 */
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
                gap: 10px !important;
            }

            /* 모바일 텍스트 방향 (가로) */
            #market-gauge::before {
                writing-mode: horizontal-tb !important;
                /* 👈 글자도 가로로 눕힘! */
                margin-bottom: 0 !important;
                margin-right: 8px !important;
                font-size: 9px !important;
                letter-spacing: 2px !important;
            }
        }



        /* 🌸 생일 팝업 전용 은은한 벚꽃(꽃비) 애니메이션 */
        .popup-petal {
            position: absolute;
            width: 8px;
            height: 8px;
            background: linear-gradient(135deg, #fbcfe8, #f472b6);
            border-radius: 50% 0 50% 50%;
            opacity: 0;
            animation: popup-fall-and-sway linear infinite;
        }

        .popup-petal:nth-child(1) {
            left: 10%;
            animation-duration: 6s;
            animation-delay: 0s;
            transform: scale(0.8);
        }

        .popup-petal:nth-child(2) {
            left: 20%;
            animation-duration: 7s;
            animation-delay: -2s;
            transform: scale(1.2);
        }

        .popup-petal:nth-child(3) {
            left: 30%;
            animation-duration: 5s;
            animation-delay: -4s;
            transform: scale(0.9);
        }

        .popup-petal:nth-child(4) {
            left: 40%;
            animation-duration: 8s;
            animation-delay: -1s;
            transform: scale(1.1);
        }

        .popup-petal:nth-child(5) {
            left: 50%;
            animation-duration: 6.5s;
            animation-delay: -3s;
            transform: scale(0.7);
        }

        .popup-petal:nth-child(6) {
            left: 60%;
            animation-duration: 7.5s;
            animation-delay: -5s;
            transform: scale(1);
        }

        .popup-petal:nth-child(7) {
            left: 70%;
            animation-duration: 5.5s;
            animation-delay: -0.5s;
            transform: scale(1.3);
        }

        .popup-petal:nth-child(8) {
            left: 80%;
            animation-duration: 8.5s;
            animation-delay: -2.5s;
            transform: scale(0.85);
        }

        .popup-petal:nth-child(9) {
            left: 90%;
            animation-duration: 6.2s;
            animation-delay: -4.5s;
            transform: scale(1.15);
        }

        .popup-petal:nth-child(10) {
            left: 15%;
            animation-duration: 7.2s;
            animation-delay: -1.5s;
            transform: scale(0.95);
        }

        .popup-petal:nth-child(11) {
            left: 35%;
            animation-duration: 5.8s;
            animation-delay: -3.5s;
            transform: scale(1.05);
        }

        .popup-petal:nth-child(12) {
            left: 55%;
            animation-duration: 8.2s;
            animation-delay: -0.8s;
            transform: scale(0.8);
        }

        .popup-petal:nth-child(13) {
            left: 75%;
            animation-duration: 6.8s;
            animation-delay: -2.8s;
            transform: scale(1.25);
        }

        .popup-petal:nth-child(14) {
            left: 85%;
            animation-duration: 7.8s;
            animation-delay: -4.8s;
            transform: scale(0.9);
        }

        .popup-petal:nth-child(15) {
            left: 45%;
            animation-duration: 5.2s;
            animation-delay: -1.2s;
            transform: scale(1.1);
        }

        @keyframes popup-fall-and-sway {
            0% {
                top: -10%;
                opacity: 0;
                transform: translateX(0) rotate(0deg);
            }

            10% {
                opacity: 0.8;
            }

            90% {
                opacity: 0.6;
            }

            100% {
                top: 110%;
                opacity: 0;
                transform: translateX(40px) rotate(360deg);
            }
        }



        @keyframes steam {

            0%,
            100% {
                transform: translateY(0) scaleY(1);
                opacity: 0.2;
            }

            50% {
                transform: translateY(-10px) scaleY(1.5);
                opacity: 0.6;
            }
        }

        .animate-steam {
            animation: steam 2s infinite ease-in-out;
        }

        .animate-steam-delayed {
            animation: steam 2s infinite ease-in-out 0.5s;
        }

        .animate-bounce-slow {
            animation: bounce 3s infinite;
        }

        /* ==================================================
   🚀 [최종 완결판] PC/모바일 반응형 캘린더 분리 엔진
   PC: 한 화면에 꽉 차게 고정 (스크롤 X)
   모바일: 최소 높이 보장하여 위아래 스크롤 허용 (찌그러짐 방지)
   ================================================== */

/* 💻 PC 화면 (1025px 이상): 6줄 꽉 차게 고정 */
@media (min-width: 1025px) {
    .pc-fixed-grid {
        grid-template-rows: 24px repeat(6, minmax(0px, 1fr)) !important;
    }
    .pc-fixed-cell {
        height: 100% !important;
    }
}

/* 📱 모바일 화면 (1024px 이하): 숨통 트이는 스크롤 모드 */
@media (max-width: 1024px) {
    .pc-fixed-grid {
        grid-template-rows: 24px !important;
        grid-auto-rows: minmax(85px, auto) !important;
        height: auto !important; /* 부모 높이 제약 풀기 */
        padding-bottom: 2rem !important; /* 맨 아래 스크롤 여유 공간 */
    }
    
    /* 기존 CSS 곳곳에 흩어진 52px, 75px 찌꺼기 강제 고정을 완벽히 덮어씀! */
    .cal-grid .cal-cell, 
    .cal-cell.pc-fixed-cell,
    .cal-cell {
        height: auto !important;
        min-height: 85px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    /* 🎂 생일 왕케이크 위치 미세 조정 (글씨 안 가리게) */
    .cal-grid .birthday-cell::after {
        top: 55% !important;
    }
}

/* ==================================================
   🎚️ [추가 완료] 글자 크기 조절 바(슬라이더) 모바일 터치 최적화 (버벅임 완벽 차단)
   ================================================== */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    
    /* 💡 브라우저야, 생각하지 말고 무조건 내 터치를 슬라이더에 꽂아라! (none으로 격상) */
    touch-action: none !important; 
    
    /* 💡 터치할 때 남는 투명한 회색 잔상(딜레이 주범) 완벽 제거! */
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important; 
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
    border: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    
    /* 💡 손가락이 스치기만 해도 잡히도록 왕구슬 크기를 더 키웠습니다 (28px -> 32px) */
    height: 32px !important; 
    width: 32px !important;
    border-radius: 50%;
    background: #3b82f6;
    margin-top: -13px; /* 💡 선의 정중앙에 오도록 미세 조정 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.1s;
}

input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.15);
    background: #2563eb;
}

/* 🎯 PUBD · 📚 LIBRARY 버튼: 이모지+글자 채도·대비 강화(선명). 이모지가 ::after content인 상태(PUBD 비활성)도
   커버하려 버튼 전체에 필터 적용 → 상태 무관 일괄. 라이트·다크 공통(이모지 vivid 표준 취지와 동일). */
#section-input #btn-publish,
#section-input button[onclick="openLibraryModal()"] {
    filter: saturate(1.6) contrast(1.08);
}

/* ════════════════════════════════════════════════════════════════
   🌞 [2026-06-09] 라이트 모드 전역 리매핑 (html:not(.dark) 스코프) — pass 1
   다크 먼저 설계라 JS 컴포넌트에 박힌 다크 유틸리티가 라이트에서 안 바뀌어 깨지던 것 일괄 보정.
   특이도 (0,2,x) > Tailwind 유틸 (0,1,0) → !important 없이 이김.
   안전장치: 본문 흰글씨는 .text-white.text-body 짝만 뒤집음(컬러 버튼의 text-white 단독은 안 건드림).
   ⚠️ 배포 후 눈으로 보고 의도적 다크요소·예외만 미세조정.
   ════════════════════════════════════════════════════════════════ */
/* ── 선명도: 라이트에선 본문 톤다운(0.8) 해제 → 글씨 또렷하게 (다크는 :root 0.8 유지) ── */
html:not(.dark) {
    --body-text-opacity: 1;
    --body-text-opacity-secondary: 0.78;
}
/* ── [전역] 라이트 모드 sky-600 파란 글자 = 표준 #2563eb 일괄 통일 (보고서 제목·링크·각종 파란 텍스트 한 번에).
   다크는 cyan(dark:text-cyan-400 등)이라 영향 없음. 아래 개별 스코프 규칙들의 상위 보강. ── */
html:not(.dark) .text-sky-600 { color: #2563eb !important; }
/* ── 보고서 h2(## 1. Market Pulse 등): 다크용 연회색(#cbd5e1)이 흰 배경에 묻히던 것 → 진한 슬레이트 ── */
html:not(.dark) .markdown-body h2 { color: #334155; }
/* ── 보고서 본문 파랑 통일: h1 제목(var --accent-btn=sky-500)·h1 밑줄·굵게 strong(sky-500, '발행 일시' 등) → 표준 #2563eb. 다크 cyan 유지 ── */
html:not(.dark) .markdown-body h1 { color: #2563eb !important; border-bottom-color: rgba(37, 99, 235, 0.25) !important; }
html:not(.dark) .markdown-body strong { color: #2563eb !important; }
/* ── 보고서 모멘텀 블록 [■■■■□]: 채운 칸 ■ = text-sky-500(#0ea5e9) → 표준 #2563eb. 빈칸 □·다크 cyan은 유지 ── */
html:not(.dark) .markdown-body .text-sky-500 { color: #2563eb !important; }
/* ── 보고서 리스크 블록 [■■■■□] + '리스크' 라벨: text-rose-500(#f43f5e) → 표준 빨강 #dc2626. 다크 유지 ── */
html:not(.dark) .markdown-body .text-rose-500 { color: #dc2626 !important; }
/* ── 보고서 ▲상승/▼하락 화살표 + 컬러 +/− 숫자(앱 후처리 span): red-500/blue-500 → 표준 #dc2626/#2563eb. 다크 유지 ── */
html:not(.dark) .markdown-body .text-red-500 { color: #dc2626 !important; }
html:not(.dark) .markdown-body .text-blue-500 { color: #2563eb !important; }
/* ── 보고서 표: 셀 테두리(흰색 15%)·짝수행 줄무늬(흰색)가 흰 배경서 안 보이던 것 → 슬레이트 라인 ── */
html:not(.dark) .markdown-body td { border-color: rgba(100, 116, 139, 0.28); }
html:not(.dark) .markdown-body tr:nth-child(even) { background-color: rgba(100, 116, 139, 0.05); }
/* ── QUICK NAVIGATION: 호버/활성 시 흰글씨(#fff !important)가 연한 파랑 배경에 묻혀 안 보이던 것 보정 ── */
html:not(.dark) .nav-item:hover,
html:not(.dark) .nav-item.active,
html:not(.dark) .nav-item.active-rose,
html:not(.dark) .nav-item.active-emerald {
    background: rgba(37, 99, 235, 0.14);
    color: #1d4ed8 !important;
}
/* ── 강제 다크 배경(!bg-slate-900/80 등 !important): 장후 마감/주간 요약 카드 — !important라 아래 일반 리매핑이 못 이겨
   배경만 다크로 남고, 그 위 글자는 라이트용(어둡게)으로 바뀌어 안 읽히던 것. 라이트에선 흰 글래스로 덮음. ── */
html:not(.dark) .\!bg-slate-900\/80 { background-color: rgba(255, 255, 255, 0.9) !important; }
html:not(.dark) .\!bg-slate-900\/70 { background-color: rgba(255, 255, 255, 0.86) !important; }
html:not(.dark) .\!bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.82) !important; }
/* ── 배경: 어두운 슬레이트 패널 → 밝은 패널 (불투명, 계층 반전) ── */
html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-slate-900 { background-color: #ffffff; }
/* Mermaid 다이어그램 카드: 흰 배경 전환 시 shadow-inner가 가장자리를 회색으로 눌러 "흐린 막"처럼 보임 →
   다른 카드처럼 또렷한 테두리+드롭섀도로 띄움 (2026-06-12) */
html:not(.dark) #mermaid-container {
    background-color: #ffffff !important;
    border-color: #d3dae6 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07) !important;
}
html:not(.dark) .bg-slate-800 { background-color: #f1f5f9; }
html:not(.dark) .bg-slate-700 { background-color: #e2e8f0; }
html:not(.dark) .bg-slate-600 { background-color: #cbd5e1; }
/* ── 실시간 시황 섹션: bg-black/40(검정40%)이 흰 바탕서 칙칙한 회색으로 깔리던 것 → 연한 슬레이트 패널.
   (모달 배경막 등 다른 bg-black 오버레이는 건드리면 안 되므로 이 섹션만 한정) ── */
html:not(.dark) #section-breaking { background-color: #eef2f7; border-color: #e2e8f0; }
/* 뉴스 카드: 반투명 bg-white/90 → 솔리드 흰색(오프화이트 패널 위 한 끗 더 또렷) */
html:not(.dark) #section-breaking .bg-white\/90 { background-color: #ffffff !important; }
/* ── 실시간 시황 검색 입력: text-white(짝 없는) 라서 리매핑 누락 → 밝은 입력창에 흰글자 묻히던 것 ── */
html:not(.dark) #market-feed-search-input { color: #1e293b; }
/* 배경: 반투명 다크 → 반투명 라이트 */
html:not(.dark) .bg-slate-950\/50,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/50,
html:not(.dark) .bg-slate-900\/40,
html:not(.dark) .bg-slate-900\/30 { background-color: rgba(248, 250, 252, 0.88); }
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/60,
html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-800\/40,
html:not(.dark) .bg-slate-800\/30 { background-color: rgba(241, 245, 249, 0.88); }
html:not(.dark) .bg-slate-700\/60,
html:not(.dark) .bg-slate-700\/50 { background-color: rgba(226, 232, 240, 0.88); }
html:not(.dark) .bg-slate-500\/12,
html:not(.dark) .bg-slate-500\/10 { background-color: rgba(100, 116, 139, 0.10); }
/* 반투명 흰 오버레이(다크용, 라이트에선 안 보임) → 옅은 어두운 오버레이로 대비 부여 */
html:not(.dark) .bg-white\/5  { background-color: rgba(15, 23, 42, 0.04); }
html:not(.dark) .bg-white\/10 { background-color: rgba(15, 23, 42, 0.06); }
/* ── 테두리: 어두운 슬레이트 → 라이트 ── */
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-gray-700,
html:not(.dark) .border-slate-600 { border-color: #e2e8f0; }
html:not(.dark) .border-slate-800\/60,
html:not(.dark) .border-slate-700\/50,
html:not(.dark) .border-slate-700\/40,
html:not(.dark) .border-slate-700\/30,
html:not(.dark) .border-slate-500\/45,
html:not(.dark) .border-slate-500\/20 { border-color: rgba(203, 213, 225, 0.7); }
html:not(.dark) .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-slate-800\/30 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(203, 213, 225, 0.7); }
/* ── 라이트모드 2단계 레이어 (iOS/M3/토스 표준 조사 반영, 2026-06-12 마스터): 페이지=회색 배경 + 카드=순백 아닌 오프화이트(눈부심↓). ── */
html:not(.dark) #main-body { background-color: #e5e8ed !important; }
html:not(.dark) .glass-card { background: #eef1f6; }   /* 패널 한 톤 낮춤 → 안의 흰 카드가 확실히 떠 보이게(#f9fafb는 흰색과 거의 동색이라 대비 약함, 2026-06-12 마스터) */
/* 주간일정 날짜 카드: 오프화이트 섹션 위로 솔리드 흰색+테두리+그림자로 분리, ✓박스는 한 단계 회색으로 중첩감 (2026-06-12 마스터) */
html:not(.dark) #schedule-content .bg-white\/50 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
}
html:not(.dark) #schedule-content .bg-slate-50 { background-color: #eef1f6 !important; border-color: #dde3ea !important; }
/* 심층분석·주도소외 섹터 본문 카드: 반투명 bg-white/50 → 솔리드 흰 카드+테두리+그림자(레이어 표준, 2026-06-12) */
html:not(.dark) #report-content .bg-white\/50,
html:not(.dark) #sector-content .bg-white\/50 {
    background-color: #ffffff !important;
    border-color: #e6e9ef !important;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
}
/* 그 안의 섹터 포인트 박스(bg-slate-50)는 한 단계 회색으로 중첩감 */
html:not(.dark) #sector-content .bg-slate-50 { background-color: #eef1f6 !important; border-color: #dde3ea !important; }

/* ── 글씨: 다크패널용 밝은 글씨 → 라이트패널용 어두운 글씨 ── */
html:not(.dark) .text-white.text-body,
html:not(.dark) .text-slate-50,
html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-300 { color: #1e293b; }
/* 흐린 회색 글씨: 라이트에서 너무 옅음 → 한 단계 진하게(가독성) */
html:not(.dark) .text-slate-400,
html:not(.dark) .text-gray-400,
html:not(.dark) .text-gray-300,
html:not(.dark) .text-gray-200 { color: #64748b; }
html:not(.dark) .text-slate-500,
html:not(.dark) .text-gray-500 { color: #475569; }
/* ── 상단바 타이틀(MASTER INTEL 버전): opacity-60 + 옅은색 → 라이트에선 선명한 브랜드 인디고 ── */
html:not(.dark) #app-version-display {
    opacity: 1;
    color: #4f46e5;
    text-shadow: none;
}
/* ── 상단 상태 LED 점: 라이트에선 네온 글로우 강화(검은 테두리 없음, 이중 글로우) ── */
html:not(.dark) #status-led {
    box-shadow: 0 0 5px currentColor, 0 0 11px currentColor;
}
/* ── 온도계(MARKET TEMP) 바: 다크 네이비 → 라이트 (또렷한 흰 패널 + 대비·글로우 정리) ── */
html:not(.dark) #market-gauge {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.22) !important;
}
html:not(.dark) #market-gauge:hover {
    background: #ffffff !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
}
/* 라벨: 2031·2034줄 !important 를 눌러야 함 → 우리도 !important */
html:not(.dark) #market-gauge::before {
    color: #4338ca !important;   /* 선명한 인디고 라벨 */
    opacity: 1 !important;
}
/* 비활성 도트: 라이트 트랙으로 또렷이 보이게 */
html:not(.dark) #market-gauge .gauge-dot.bg-slate-800 {
    background-color: #94a3b8 !important;
    opacity: 0.5 !important;
}
/* 활성 도트: 등락 표준색으로 통일 (로즈→#dc2626 / 블루→#2563eb) + 짧고 또렷한 글로우. 앰버(중간)는 유지 */
html:not(.dark) #market-gauge .gauge-dot.bg-rose-500 { background-color: #dc2626 !important; box-shadow: 0 0 4px rgba(220, 38, 38, 0.85) !important; }
html:not(.dark) #market-gauge .gauge-dot.bg-blue-500 { background-color: #2563eb !important; box-shadow: 0 0 4px rgba(37, 99, 235, 0.85) !important; }
html:not(.dark) #market-gauge .gauge-dot.bg-amber-500 { box-shadow: 0 0 4px rgba(245, 158, 11, 0.85) !important; }
/* ── 스크롤바: 라이트에선 밝은 회색 thumb (다크 #334155 base가 흰 배경서 튀던 것) ── */
html:not(.dark) ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* ── API 설정 드로어: bg-[#080d1a] 하드코딩 다크(전역 리매핑이 못 잡는 헥스) → 라이트 ── */
html:not(.dark) #api-settings-panel { background: #ffffff; }
html:not(.dark) #api-settings-panel .text-white { color: #1e293b; }   /* 행 제목(text-body 없는 text-white) 흰배경서 보이게 */
/* 혹시 모를 컬러 버튼의 흰 글씨는 보존(방어) */
html:not(.dark) #api-settings-panel [class*="bg-indigo-5"].text-white,
html:not(.dark) #api-settings-panel [class*="bg-emerald-5"].text-white,
html:not(.dark) #api-settings-panel [class*="bg-sky-5"].text-white,
html:not(.dark) #api-settings-panel [class*="bg-blue-5"].text-white { color: #ffffff; }
/* ── 이모지 색감 강화: 채도·대비 업 → 파스텔 3D 이모지를 더 선명하게 (라이트·다크 공통) ── */
.emoji-vivid { filter: saturate(2.1) contrast(1.14) brightness(1.03); }
/* ── API드로어 상태배지: 연초록/연빨강 글씨가 연한 배경서 흐림 → 라이트에선 진하게 ── */
html:not(.dark) #api-settings-panel .text-emerald-400 { color: #047857; }
html:not(.dark) #api-settings-panel .text-rose-400 { color: #be123c; }
html:not(.dark) #api-settings-panel .text-cyan-400 { color: #0e7490; }
html:not(.dark) #api-settings-panel .text-violet-400 { color: #6d28d9; }
/* API 드로어: 상태 배지(등록됨=초록/미등록=빨강) + BYOK·닫기 버튼 부양 (2026-06-12 마스터) */
html:not(.dark) #api-settings-panel [id^="drawer-status"].bg-emerald-500\/10 {
    background-color: #ecfdf5 !important; border-color: #6ee7b7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(16, 185, 129, 0.12) !important;
}
html:not(.dark) #api-settings-panel [id^="drawer-status"].bg-rose-500\/10 {
    background-color: #fff1f2 !important; border-color: #fda4af !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(244, 63, 94, 0.12) !important;
}
/* BYOK 배지·닫기(✕) 버튼(bg-slate-800) → 흰 카드+테두리+그림자 */
html:not(.dark) #api-settings-panel .bg-slate-800 {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}
/* 키 입력칸(전 provider: 구글/OpenAI/Claude/DART/KIS) + DELETE·SAVE·SAVE&SYNC 버튼 부양 (2026-06-12 마스터 "2열다"·"입력창도") */
html:not(.dark) #api-settings-panel input {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) #api-settings-panel .bg-rose-500\/15 {
    background-color: #fff1f2 !important; border-color: #fda4af !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(244, 63, 94, 0.13) !important;
}
html:not(.dark) #api-settings-panel .bg-cyan-500\/20 {
    background-color: #ecfeff !important; border-color: #67e8f9 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(6, 182, 212, 0.14) !important;
}
/* SAVE & SYNC: DART·KIS모의(에메랄드) / KIS실전(스카이) */
html:not(.dark) #api-settings-panel .bg-emerald-500\/20 {
    background-color: #ecfdf5 !important; border-color: #6ee7b7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(16, 185, 129, 0.14) !important;
}
html:not(.dark) #api-settings-panel .bg-sky-500\/20 {
    background-color: #f0f9ff !important; border-color: #7dd3fc !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(14, 165, 233, 0.14) !important;
}
/* KIS 실전투자·모의투자 행: 흰 카드+테두리+그림자로 부양 (2026-06-12 마스터 "두개도") */
html:not(.dark) #drawer-body-kis > .rounded-lg {
    background-color: #ffffff !important;
    border-color: #d3dae6 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 5px 14px rgba(15, 23, 42, 0.09) !important;
}
html:not(.dark) #drawer-body-kis > .rounded-lg button.bg-slate-800\/30 { background-color: #ffffff !important; }
html:not(.dark) #drawer-body-kis > .rounded-lg button.bg-slate-800\/30:hover { background-color: #f1f5f9 !important; }
/* "발급받기" 외부 링크: 맨 텍스트 → 버튼식(테두리·배경·그림자) + 호버 반응 (2026-06-12 마스터) */
html:not(.dark) #api-settings-panel a[target="_blank"] {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    transition: all 0.15s ease !important;
}
html:not(.dark) #api-settings-panel a[target="_blank"]:hover {
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.30) !important;
    transform: translateY(-1px);
}
/* LOGOUT 버튼: 흰 배경+테두리에 그림자 없어 납작 → 또렷한 테두리+그림자로 부양 (2026-06-12 마스터) */
html:not(.dark) #header-user-info button {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.07) !important;
}
/* KIS MONITOR 새로고침 버튼: bg-white/5라 묻힘 → 흰 카드+테두리+그림자 (2026-06-12 마스터) */
html:not(.dark) #section-kis-monitor button[onclick*="loadKisMonitor"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.07) !important;
}
/* DEV 토글(앰버)·SETUP(흰색) 버튼 부양 (2026-06-12 마스터) */
html:not(.dark) #dev-role-toggle {
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.40), 0 2px 6px rgba(245, 158, 11, 0.30) !important;
}
html:not(.dark) #top-settings-btn {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.07) !important;
}
/* 챗 모델 PROVIDER/TIER 선택부: 선택=흰 카드 강조(sky 테두리+그림자) / 비선택 provider=또렷한 테두리로 구분 (2026-06-12 마스터) */
html:not(.dark) #accordion-body-wrapper button.bg-white {
    border: 1px solid #7dd3fc !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10), 0 8px 18px rgba(15, 23, 42, 0.12) !important;
}
html:not(.dark) #accordion-body-wrapper button.bg-slate-100 {
    border-color: #d3dae6 !important;
}
/* ── 펼친 섹션 배경: 옅은 다크 틴트(/20·/10)가 라이트선 회색으로 떠서 → 거의 안 보이게 옅게 ── */
html:not(.dark) .bg-slate-900\/20,
html:not(.dark) .bg-slate-900\/10 { background-color: rgba(15, 23, 42, 0.035); }
/* ── API드로어 입력칸: bg-black/60(다크) → 라이트 입력 배경 (글자는 .text-white 플립으로 어둡게) ── */
html:not(.dark) #api-settings-panel .bg-black\/60,
html:not(.dark) #api-settings-panel .bg-black\/40,
html:not(.dark) #api-settings-panel .bg-black\/30 { background-color: #f1f5f9; }
/* ── GLOBAL MARKET PULSE 전광판: 다크 네이비 → 라이트 (등락 빨강/파랑 바·% 는 유지) ── */
html:not(.dark) .market-ticker {
    /* 패널=연회색 컨테이너 → 흰 셀이 떠 보이게 (2026-06-12 마스터). 테두리 indigo 2px 유지 */
    background: #e9ecf2;
    border: 2px solid rgba(99, 102, 241, 0.55);
    box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(99, 102, 241, 0.12) inset;
}
html:not(.dark) .ticker-cell {
    background: #ffffff;
    border-color: #d8dee8;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
html:not(.dark) .ticker-cell:hover {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
html:not(.dark) .ticker-title { color: #4f46e5; text-shadow: none; }
html:not(.dark) .ticker-clock { color: #475569; }
html:not(.dark) .ticker-cell .c-name { color: #0f172a !important; }
html:not(.dark) #ticker-grid .ticker-cell .c-price { color: #1e293b !important; }
/* 하단 실시간/지연 배지: 다크 그라데이션 얼룩 → 라이트 + 글자 또렷 (live 초록은 유지) */
html:not(.dark) .ticker-cell .c-delay {
    background: linear-gradient(to left, rgba(241, 245, 249, 0.92) 55%, rgba(241, 245, 249, 0));
}
html:not(.dark) .ticker-cell .c-delay:not(.live) { color: #64748b; }
html:not(.dark) .ticker-cell .c-status.closed { color: #64748b; }
/* 셀 테두리 살짝 또렷하게(전반 선명도) */
html:not(.dark) .ticker-cell { border-color: rgba(100, 116, 139, 0.4); }
/* %숫자 빨강/파랑: 라이트에선 연한 -400색이 흐림 → 진하고 선명하게 (상승=빨강 하락=파랑) */
html:not(.dark) .ticker-cell.up .c-chg { color: #dc2626 !important; }
html:not(.dark) .ticker-cell.down .c-chg { color: #2563eb !important; }
html:not(.dark) .ticker-cell.flat .c-chg { color: #475569 !important; }
/* 좌측 배너(::before): 라이트에선 표준색(상승 #dc2626 / 하락 #2563eb)으로 통일 (다크는 기존 글로우 톤 유지) */
html:not(.dark) .ticker-cell.up::before  { background: linear-gradient(180deg, #dc2626, #ef4444); box-shadow: 0 0 12px rgba(220,38,38,0.45); }
html:not(.dark) .ticker-cell.down::before { background: linear-gradient(180deg, #2563eb, #3b82f6); box-shadow: 0 0 12px rgba(37,99,235,0.45); }
/* ── 구글 로그인(게이트키퍼) 파란 글자: 라이트에선 등락 표준 파랑(#2563eb)으로 통일. MASTER 로고(sky-500)+Verifying Identity(sky-600). 다크는 cyan 유지 ── */
html:not(.dark) #gatekeeper-overlay .text-sky-500,
html:not(.dark) #gatekeeper-overlay .text-sky-600 { color: #2563eb !important; }
/* ── ACTIVE AI ENGINE 엔진명(Google Gemini + Gemini 3.1 Flash 서브라인 둘 다 상속): 라이트 표준 파랑 통일. 다크 cyan 유지 ── */
html:not(.dark) #panel-engine-name { color: #2563eb !important; }
/* ── 상단 헤더 유저명(태도리일원 등): sky-600 옛 파랑 → 표준 #2563eb 통일. 다크 cyan 유지 ── */
html:not(.dark) #header-username { color: #2563eb !important; }
/* ── 캘린더 제목(2026년 6월): sky-500 → 표준 #2563eb. 다크 유지 (내부 오늘/연동 버튼은 자기 클래스라 영향 없음) ── */
html:not(.dark) #calendar-dynamic-title { color: #2563eb !important; }
/* ── 캘린더 일요일 빨강/토요일 파랑(요일 헤더+날짜 숫자) → 등락 표준색 통일. 베이스 규칙이라 PC·폰·태블릿 전부 커버. 다크는 기존(#ef4444/#3b82f6) 유지 ── */
html:not(.dark) .cal-day-label.sun,
html:not(.dark) .cal-cell.sun { color: #dc2626 !important; }
html:not(.dark) .cal-day-label.sat,
html:not(.dark) .cal-cell.sat { color: #2563eb !important; }
/* ── 엔진 패널 내부: 프로바이더 활성 글자(GOOGLE)+상태점(●, 글자색 상속) sky-600 / 모델 티어 선택 테두리 sky-500 → 표준 파랑 ── */
html:not(.dark) #engine-panel .text-sky-600 { color: #2563eb !important; }
html:not(.dark) #engine-panel .border-sky-500 { border-color: #2563eb !important; }
/* ── + 가져오기 버튼(#btn-import): sky-500 → 표준 #2563eb (글자·배경틴트·호버). 다크 유지 ── */
html:not(.dark) #btn-import { color: #2563eb !important; background-color: rgba(37, 99, 235, 0.1) !important; }
html:not(.dark) #btn-import:hover { color: #ffffff !important; background-color: #2563eb !important; }
/* ── QUICK NAVIGATION 섹션 토글 ON knob(.section-toggle-btn 안 .bg-sky-500 동그라미): sky-500(#0ea5e9) → 표준 #2563eb. 트랙(슬레이트)·OFF·다크 유지 ── */
html:not(.dark) .section-toggle-btn .bg-sky-500 { background-color: #2563eb !important; }
/* 섹션 토글 트랙: 항상 bg-slate-800(→라이트 #f1f5f9)이라 패널에 묻힘 → 또렷한 트랙. ON(점이 우측 left-[14px])은 연파랑 트랙으로 (2026-06-12 마스터) */
html:not(.dark) .section-toggle-btn {
    background-color: #cbd5e1 !important;
    border-color: #b0bccd !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.10), 0 2px 5px rgba(15, 23, 42, 0.14), 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}
html:not(.dark) .section-toggle-btn:has(.left-\[14px\]) {
    background-color: #bfdbfe !important;
    border-color: #93c5fd !important;
}
/* 앱 로고(태극기 원형): 밝은 배경에 납작 → drop-shadow로 띄움(원형 경계 따라 자연스럽게) (2026-06-12 마스터) */
html:not(.dark) #main-header img[alt="MASTER Logo"] {
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.18)) drop-shadow(0 2px 4px rgba(15, 23, 42, 0.12));
}
/* 주말 힐링 카페 배너: 다크 그라데이션(from-slate-900 to-slate-950) 고정이라 라이트서 어둠+글자(text-white.text-body가 어둡게 뒤집혀)가 다크 위에서 증발 → 라이트 패널로 전환(글자 자동 가독) (2026-06-12 마스터) */
html:not(.dark) #weekend-healing-banner {
    background: linear-gradient(to bottom, #f3f5fa, #e8ecf2) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.10) !important;
}
/* 김(steam) 흰색→라이트선 안 보임 → 슬레이트 틴트 / Healing Mode 라벨 인디고 진하게 */
html:not(.dark) #weekend-healing-banner .bg-white\/20 { background-color: rgba(100, 116, 139, 0.35) !important; }
html:not(.dark) #weekend-healing-banner .bg-white\/30 { background-color: rgba(100, 116, 139, 0.45) !important; }
html:not(.dark) #weekend-healing-banner .text-indigo-400 { color: #4f46e5 !important; }
/* ── MUSIC BOX 연속재생 버튼(#btn-play-mode) 활성 상태(text-sky-400): 글자·배경·테두리·호버 → 표준 #2563eb. 한곡재생(슬레이트)·다크 유지 ── */
html:not(.dark) #btn-play-mode.text-sky-400 { color: #2563eb !important; background-color: #eff6ff !important; border-color: #93c5fd !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(37, 99, 235, 0.13) !important; }
html:not(.dark) #btn-play-mode.text-sky-400:hover { color: #ffffff !important; background-color: #2563eb !important; }
/* ── 구글 문서 대기실(#draft-select-modal): 문서 제목 sky-600 → 표준 #2563eb, 호버 테두리 sky-500도. 다크 유지 ── */
html:not(.dark) #draft-select-modal .text-sky-600 { color: #2563eb !important; }
html:not(.dark) #draft-select-modal .hover\:border-sky-500:hover { border-color: #2563eb !important; }
/* ── 보고서 열람 라이브러리 목록(#lib-content, renderReportLibrary): 제목은 평소 text-slate-700(진회색)이고
   카드 호버 시 group-hover:text-sky-500(#0ea5e9)로 파랗게 변함. 그 호버 파랑을 표준 #2563eb로. 다크 유지 ── */
html:not(.dark) #lib-content .group:hover .group-hover\:text-sky-500 { color: #2563eb !important; }
/* ── ANALYSIS INPUT AREA 보고서 항목(#master-global-chip, renderGlobalMasterChip): 평소 text-slate-700,
   호버 시 hover:text-sky-500(#0ea5e9)로 파래짐 → 표준 #2563eb. 다크 유지 ── */
html:not(.dark) #master-global-chip .hover\:text-sky-500:hover { color: #2563eb !important; }
/* ── ADMIN CENTER(#shared-admin-ui): 통계 카드 다크용 -400 악센트(앰버/인디고/에메랄드)·보조 텍스트(slate-400)가 흰 배경서 옅던 것 → 라이트용 진한색 ── */
html:not(.dark) #shared-admin-ui .text-amber-400 { color: #d97706 !important; }
html:not(.dark) #shared-admin-ui .text-indigo-400 { color: #4f46e5 !important; }
/* 회원 행: 오프화이트 패널 위로 흰 카드+테두리+그림자로 분리 (신규=인디고 강조 유지) (2026-06-12 마스터) */
html:not(.dark) #shared-admin-ui .user-row {
    background: #ffffff;
    border: 1px solid #e8ebf0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    margin-bottom: 6px;
}
html:not(.dark) #shared-admin-ui .user-row.bg-indigo-500\/5 { background: #eef0fb; border-color: rgba(99, 102, 241, 0.3); }
html:not(.dark) #shared-admin-ui .text-emerald-400 { color: #059669 !important; }
html:not(.dark) #shared-admin-ui .text-slate-400 { color: #475569 !important; }
/* 장중/장마감(c-status) · 실시간/지연(c-delay) 배지: 라이트에선 진하고 선명하게 */
html:not(.dark) .ticker-cell .c-status.open { color: #15803d; background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.5); }
html:not(.dark) .ticker-cell .c-status.partial { color: #b45309; background: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.5); }
html:not(.dark) .ticker-cell .c-status.closed { color: #475569; background: rgba(100, 116, 139, 0.16); border-color: rgba(100, 116, 139, 0.45); }
html:not(.dark) .ticker-cell .c-delay.live { color: #15803d; }
html:not(.dark) .ticker-cell .c-delay.delayed { color: #b45309; }
/* 노란 지연(active=구체적 규칙)도 진한 앰버로 */
html:not(.dark) .ticker-cell:not(.market-closed) .c-delay.delayed.active { color: #b45309; }
/* 장마감 셀의 실시간/지연: 옅은회색 !important(+ID 미디어규칙) 강제 → 라이트선 읽히는 회색 */
html:not(.dark) #ticker-grid .ticker-cell.market-closed .c-delay,
html:not(.dark) #ticker-grid .ticker-cell.market-closed .c-delay.live { color: #64748b !important; }
html:not(.dark) #ticker-grid .ticker-cell.market-closed .c-delay::before { background: #94a3b8 !important; }
/* 노란 지연 점멸 점도 진한 앰버로 (장중 셀만, 텍스트와 통일) */
html:not(.dark) .ticker-cell:not(.market-closed) .c-delay.delayed::before { background: #d97706; box-shadow: 0 0 4px rgba(217, 119, 6, 0.6); }
html:not(.dark) .ticker-cell:not(.market-closed) .c-delay.delayed.active::before { box-shadow: 0 0 5px rgba(217, 119, 6, 0.7); }
/* ── 메인 로고: 라이트 배경(흰색)에서 흐린 그림자뿐이라 경계 애매 → 또렷한 그림자 + 불투명도 1 ── */
html:not(.dark) #main-header img[alt="MASTER Logo"] {
    opacity: 1 !important;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.22)) !important;
}
/* ── 커스텀 페이지 스크롤바: 진한 다크 링 + 두꺼움 → 슬림하고 깔끔하게 (라이트) ── */
html:not(.dark) #page-scroll-thumb {
    background: rgba(100, 116, 139, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
    width: 7px !important;
    left: 1.5px !important;
    border-radius: 4px !important;
}
/* ── ACTIVE AI ENGINE 패널: 라벨·미선택 항목 옅은 회색 → 라이트선 진하게(덜 옅게) ── */
html:not(.dark) #engine-panel .text-slate-400 { color: #475569; }
html:not(.dark) #engine-panel .text-slate-500 { color: #334155; }
/* ── AI 비용 가이드 모달: 다크 표·연한 색·흰글씨 헤더 → 라이트 또렷하게 ── */
html:not(.dark) #guide-modal-overlay .text-white { color: #1e293b; }
html:not(.dark) #guide-modal-overlay .bg-blue-600.text-white { color: #ffffff; }   /* 확인 버튼 흰글씨 보존 */
html:not(.dark) #guide-modal-overlay .text-blue-400,
html:not(.dark) #guide-modal-overlay .text-blue-300 { color: #2563eb; }
html:not(.dark) #guide-modal-overlay .text-teal-400,
html:not(.dark) #guide-modal-overlay .text-teal-300 { color: #0d9488; }
html:not(.dark) #guide-modal-overlay .text-pink-400,
html:not(.dark) #guide-modal-overlay .text-pink-300 { color: #db2777; }
html:not(.dark) #guide-modal-overlay .text-green-400,
html:not(.dark) #guide-modal-overlay .text-green-300 { color: #16a34a; }
html:not(.dark) #guide-modal-overlay .text-purple-400,
html:not(.dark) #guide-modal-overlay .text-purple-300 { color: #9333ea; }
html:not(.dark) #guide-modal-overlay .text-emerald-400 { color: #059669; }
html:not(.dark) #guide-modal-overlay .text-rose-400 { color: #e11d48; }
/* 본문 회색 글씨도 더 진하게(전반 '옅음' 해소) — 단 각주(gray-500)는 옅게 유지 */
html:not(.dark) #guide-modal-overlay .text-gray-300,
html:not(.dark) #guide-modal-overlay .text-gray-400,
html:not(.dark) #guide-modal-overlay .text-gray-200,
html:not(.dark) #guide-modal-overlay tbody { color: #334155; }
/* 팁 박스 불릿 글씨: text-emerald-100/70·purple-100/70(거의 흰색) → 진한 테마색 (연한 배경서 보이게) */
html:not(.dark) #guide-modal-overlay .text-emerald-100\/70 { color: #065f46 !important; }
html:not(.dark) #guide-modal-overlay .text-purple-100\/70 { color: #5b21b6 !important; }
/* ── 전광판 상단 "KIS 키 → 1초 실시간" 노란글씨: 인라인 #fbbf24(연함) → 진한 앰버 ── */
html:not(.dark) #ticker-kis-notice,
html:not(.dark) #ticker-kis-notice-bottom { color: #b45309 !important; }
/* ── 플랫폼 메뉴 글자: #64748b(옅음) → 라이트선 진하게 ── */
html:not(.dark) .menu-item { color: #334155; }
/* 메뉴 항목: 카드화 대신 호버/선택 알약 하이라이트(메뉴 UI 표준). 기존 sky 5%(거의 안 보임) → 또렷한 연하늘+살짝 우측 이동 (2026-06-12 마스터) */
html:not(.dark) .menu-item:hover {
    background: #e0f2fe;
    color: #0284c7;
    transform: translateX(3px);
}
html:not(.dark) .menu-item.active {
    background: #e0f2fe;
    color: #0284c7;
    box-shadow: 0 1px 4px rgba(14, 165, 233, 0.15);
}
/* DISPLAY SIZE 패널(#font-panel-content): bg-slate-50+shadow-sm이라 드로어 위에서 약함 → 흰 카드+테두리+드롭섀도로 부양 (2026-06-12 마스터) */
html:not(.dark) #font-panel-content {
    background-color: #ffffff !important;
    border-color: #d3dae6 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.09) !important;
}

/* 달력 모달 배경 살짝 어둡게 (2026-06-12 마스터 재적용) — 날짜 크기는 고정 px라 영향 없어야 정상 */
html:not(.dark) #calendar-modal > div {
    background-color: #e8ecf2 !important;
}
/* 달력 헤더 배지(오늘·생일·연동중) 색조 유지하며 부양 (2026-06-12 마스터) */
html:not(.dark) #calendar-dynamic-title button.border-sky-400 {
    background-color: #f0f9ff !important; border-color: #7dd3fc !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(14, 165, 233, 0.13) !important;
}
html:not(.dark) #calendar-dynamic-title button.border-sky-400:hover { background-color: #0ea5e9 !important; color: #ffffff !important; }
html:not(.dark) #calendar-dynamic-title button.border-emerald-400 {
    background-color: #ecfdf5 !important; border-color: #6ee7b7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(16, 185, 129, 0.13) !important;
}
html:not(.dark) #calendar-dynamic-title button.border-emerald-400:hover { background-color: #10b981 !important; color: #ffffff !important; }
html:not(.dark) #calendar-dynamic-title button[onclick*="requireGoogleCalendarAuth"] {
    background-color: #ecfdf5 !important; border-color: #6ee7b7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(16, 185, 129, 0.13) !important;
}

/* 공지 작성: 대상 칩(비활성=흰색/활성 전체=로즈) + 제목 입력칸 부양 (2026-06-12 마스터 "2열다") */
html:not(.dark) .notice-target-pill {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) .notice-target-pill:hover {
    border-color: #a5b4fc !important;
    color: #4f46e5 !important;
}
html:not(.dark) .notice-target-pill.active {
    background: #fff1f2 !important;
    border-color: #f43f5e !important;
    color: #dc2626 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(244, 63, 94, 0.13) !important;
}
html:not(.dark) #notice-title-input {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.06) !important;
}
/* 공지 게시(회색)·전송(빨강) 버튼 부양 (2026-06-12 마스터) */
html:not(.dark) #notice-post-btn {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.07) !important;
}
html:not(.dark) #notice-post-btn:hover { background-color: #f1f5f9 !important; }
html:not(.dark) #notice-send-btn {
    box-shadow: 0 6px 18px rgba(244, 63, 94, 0.38), 0 2px 6px rgba(244, 63, 94, 0.28) !important;
}
/* 회원 목록 갱신 버튼(인디고): 솔리드+테두리+그림자, 호버 채움 유지 (2026-06-12 마스터) */
html:not(.dark) button[onclick*="fetchUsersForAdmin"] {
    background-color: #eef2ff !important;
    border: 1px solid #a5b4fc !important;
    color: #4f46e5 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(99, 102, 241, 0.13) !important;
}
html:not(.dark) button[onclick*="fetchUsersForAdmin"]:hover {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}
/* 관리자 회원 목록 3열 부양 (2026-06-12 마스터 "3열다") */
/* 전체 통계카드·검색창·비활성 필터칩(모두 bg-slate-100) → 흰 카드+테두리+그림자 */
html:not(.dark) #shared-admin-ui .bg-slate-100 {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}
/* 색조 통계카드(승인·대기·신규): 틴트 유지 + 솔리드+그림자 (그리드로 스코프해 갱신 버튼과 분리) */
html:not(.dark) #shared-admin-ui .grid-cols-4 .bg-emerald-500\/10 {
    background-color: #ecfdf5 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 3px 8px rgba(16, 185, 129, 0.12) !important;
}
html:not(.dark) #shared-admin-ui .grid-cols-4 .bg-amber-500\/10 {
    background-color: #fffbeb !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 3px 8px rgba(245, 158, 11, 0.12) !important;
}
html:not(.dark) #shared-admin-ui .grid-cols-4 .bg-indigo-500\/10 {
    background-color: #eef2ff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 3px 8px rgba(99, 102, 241, 0.12) !important;
}
/* 활성 필터칩(인디고 솔리드): 그림자 lift */
html:not(.dark) #shared-admin-ui button.bg-indigo-500 {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(99, 102, 241, 0.30) !important;
}
/* MUSIC BOX ALL TRACKS·FAVORITES: 다크(레트로)는 유지하고 드롭섀도만 줘서 밝은 드로어 위로 띄움 (2026-06-12 마스터) */
html:not(.dark) #shared-mymy-ui button[onclick*="openAllTracksModal"],
html:not(.dark) #shared-mymy-ui button[onclick*="openFavoritesModal"] {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18), 0 8px 18px rgba(15, 23, 42, 0.16) !important;
}
/* MUSIC BOX 데크(.mymy-case): 베젤 inset은 유지하고 외부 드롭섀도만 강화해 두 버튼과 동일하게 띄움 (2026-06-12 마스터) */
html:not(.dark) #shared-mymy-ui .mymy-case {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.16) !important;
}

/* ALL TRACKS·FAVORITES 음악 모달: 배경 연회색 + 필터그룹·폴더 카드 흰 카드+그림자 + 닫기 부양 (2026-06-12 마스터) */
html:not(.dark) #all-tracks-modal > div,
html:not(.dark) #favorites-modal > div {
    background-color: #e8ecf2 !important;
}
html:not(.dark) #all-tracks-modal .bg-slate-50,
html:not(.dark) #favorites-modal .bg-slate-50 {
    background-color: #ffffff !important;
    border-color: #d3dae6 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.13) !important;
}
html:not(.dark) #all-tracks-modal button[onclick*="closeMusicModals"],
html:not(.dark) #favorites-modal button[onclick*="closeMusicModals"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.07) !important;
}
/* 필터 그룹 패널: 흰 칩이 떠 보이도록 연회색 유지(위 흰 카드 규칙 덮음) */
html:not(.dark) #all-tracks-modal #all-tracks-filter-zone .bg-slate-50 {
    background-color: #eef1f6 !important;
    box-shadow: none !important;
}
/* 필터 칩: 활성(인디고) 그림자 lift / 비활성(흰색) 또렷한 테두리+그림자 */
html:not(.dark) #all-tracks-filter-zone button[onclick*="setMusicFilter"].bg-indigo-500 {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(99, 102, 241, 0.30) !important;
}
html:not(.dark) #all-tracks-filter-zone button[onclick*="setMusicFilter"].bg-white {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.07) !important;
}
/* ── 캘린더 알람 벨(idle): opacity-20(20%, 너무 흐림) → 보이게. 알람 활성 시 opacity-100은 그대로 ── */
html:not(.dark) #nav-cal-bell.opacity-20,
html:not(.dark) #nav-dart-bell.opacity-20 { opacity: 0.72 !important; }
/* ── MUSIC BOX: ALL TRACKS/FAVORITES 버튼은 다크 유지(레트로 데크와 톤 맞춤, 흰 글씨 가독) ── */
html:not(.dark) #shared-mymy-ui .bg-slate-800 { background-color: #1e293b !important; }
html:not(.dark) #shared-mymy-ui .border-slate-700 { border-color: #334155 !important; }
/* ── 캘린더 일정 pill: 회색 pill 옅게, 활성알람 흰글씨·연초록 진하게(라이트 가독) ── */
html:not(.dark) #calendar-content .bg-slate-500\/20 { background-color: rgba(100, 116, 139, 0.1); }
html:not(.dark) #calendar-content .text-white { color: #1e293b; }
html:not(.dark) #calendar-content .text-emerald-400 { color: #059669; }
/* 음력+24절기 래퍼 opacity-50/60(흐림) → 라이트선 또렷하게 (24절기 초록은 위에서 진하게) */
html:not(.dark) #calendar-content .tracking-tighter { opacity: 0.9; }
/* ── 공지 발송대상 pill: 미선택이 다크배경+연한글씨 → 라이트 칩으로 ── */
html:not(.dark) .notice-target-pill {
    border-color: rgba(148, 163, 184, 0.5);
    background: rgba(241, 245, 249, 0.85);
    color: #475569;
}
html:not(.dark) .notice-target-pill.active {
    border-color: rgba(220, 38, 38, 0.5);
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}
/* ── 실시간 시황 추적목록 토글: orange-300(연주황)이 흰 배경에서 증발 → -600 톤 표준 ── */
html:not(.dark) #section-breaking .text-orange-300 { color: #ea580c; }
html:not(.dark) #section-breaking .text-orange-300:hover { color: #c2410c; }
/* ── 뉴스 제목 호버: cyan → 약속 파랑(#2563eb) 전역 통일 (실시간 시황·종목뉴스 등, 다크는 cyan 유지) ── */
html:not(.dark) .hover\:text-cyan-600:hover,
html:not(.dark) .group:hover .group-hover\:text-cyan-600 { color: #2563eb; }

/* ── DART SIGNAL(#section-dart) 라이트 보정: 다크 하드코딩 배경·흰글씨 일괄 ── */
/* 워치리스트 박스 + 입력칸 + 마이크 버튼 + 주기 드롭다운(전부 bg-black/slate-900 다크 고정) */
/* MY WATCHLIST 박스: 오프화이트 섹션 위로 흰 카드+그림자로 띄움(레이어 표준). 입력칸(흰색)은 #f1f5f9 인셋으로 구분 (2026-06-12) */
html:not(.dark) #section-dart #my-watchlist-box { background-color: #ffffff; border-color: rgba(16,185,129,0.45); box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05); }
html:not(.dark) #section-dart #newStockInput { background-color: #f1f5f9 !important; }
html:not(.dark) #section-dart #newStockInput {
    background-color: #fff; border-color: #cbd5e1; color: #1e293b;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.06);
}
html:not(.dark) #section-dart #newStockInput::placeholder { color: #94a3b8; }
html:not(.dark) #section-dart #btn-voice-input-stock {
    background-color: #fff; border-color: #cbd5e1; color: #64748b;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.06);
}
/* ＋ 추가 버튼: bg-white/10이 흰 박스에 묻힘 → 흰 카드+테두리+그림자 (2026-06-12 마스터 "3개다") */
html:not(.dark) #section-dart button[onclick*="addStockToWatchlist"] {
    background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #334155 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.06) !important;
}

/* ANALYSIS INPUT AREA 헤더 PUBD·LIBRARY·＋ 버튼 부양 (2026-06-12 마스터 "3개다") — 각 색조 유지, 솔리드+그림자, 호버 채움 */
/* PUBD 발행됨(emerald) */
html:not(.dark) #section-input #btn-publish.bg-emerald-500\/20 {
    background-color: #ecfdf5 !important; border-color: #6ee7b7 !important; color: #059669 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(16, 185, 129, 0.13) !important;
}
/* PUBD 미발행(rose) */
html:not(.dark) #section-input #btn-publish.bg-rose-500\/10 {
    background-color: #fff1f2 !important; border-color: #fda4af !important; color: #dc2626 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(244, 63, 94, 0.13) !important;
}
html:not(.dark) #section-input #btn-publish.bg-rose-500\/10:hover {
    background-color: #f43f5e !important; color: #ffffff !important;
}
/* LIBRARY(indigo) */
html:not(.dark) #section-input button[onclick*="openLibraryModal"] {
    background-color: #eef2ff !important; border: 1px solid #a5b4fc !important; color: #4f46e5 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(99, 102, 241, 0.13) !important;
}
html:not(.dark) #section-input button[onclick*="openLibraryModal"]:hover {
    background-color: #6366f1 !important; color: #ffffff !important;
}
/* ＋ import(sky) */
html:not(.dark) #section-input #btn-import {
    background-color: #f0f9ff !important; border: 1px solid #7dd3fc !important; color: #0284c7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(14, 165, 233, 0.13) !important;
}
html:not(.dark) #section-input #btn-import:hover {
    background-color: #0ea5e9 !important; color: #ffffff !important;
}

/* DATA IMPORT 모달: 5개 옵션 카드 일관 흰 카드+그림자 + CANCEL 도드라지게 (2026-06-12 마스터) */
/* 구글 문서(대기실)만 bg-slate-800/80(회색)이라 나머지 흰 카드와 안 맞음 → 흰색으로 통일 */
html:not(.dark) #import-modal #master-draft-btn {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}
/* 옵션 카드 공통 부양 그림자 */
html:not(.dark) #import-modal .grid > div {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 6px 16px rgba(15, 23, 42, 0.09);
}
/* CANCEL: bg-slate-100(회색) → 흰 카드+테두리+그림자로 도드라지게 */
html:not(.dark) #import-modal button[onclick*="closeImportModal"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.07) !important;
}

/* 구글 문서 대기실(#draft-select-modal) 목록 카드: bg-slate-50이 흰 모달 위에서 납작 → 흰 카드+테두리+드롭섀도로 부양 (2026-06-12 마스터) */
html:not(.dark) #draft-select-modal .bg-slate-50 {
    background-color: #ffffff !important;
    border-color: #d3dae6 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 5px 14px rgba(15, 23, 42, 0.09) !important;
}

/* 라이브러리 모달 전체 배경: 흰색(#fff) → 연회색으로 낮춰 흰 카드들이 뜨게 (2026-06-12 마스터) */
html:not(.dark) #library-modal > div {
    background-color: #e8ecf2 !important;
}
/* 라이브러리(#library-modal) 보고서 목록 카드: 휴지 그림자 없어 흰 모달 위에서 납작 → 또렷한 테두리+드롭섀도로 부양 (2026-06-12 마스터) */
html:not(.dark) #library-modal div[onclick*="openReportFromLibrary"] {
    background-color: #ffffff !important;
    border-color: #d3dae6 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 5px 14px rgba(15, 23, 42, 0.09) !important;
}

/* 실시간 시황(#section-breaking) 헤더: 검색창·마이크·새로고침·LIVE 부양 (2026-06-12 마스터) */
html:not(.dark) #section-breaking #market-feed-search-input,
html:not(.dark) #section-breaking #btn-voice-input-search,
html:not(.dark) #section-breaking #btn-market-feed-refresh {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) #section-breaking #market-feed-search-input { color: #334155 !important; }
/* LIVE 배지: bg-white/5라 묻힘 → 흰 카드+그림자 (초록 점 유지) */
html:not(.dark) #section-breaking span.bg-white\/5 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
/* 추적 이슈 모아보기 토글(#mf-tracked-toggle-btn): 주황 색조 유지 + 솔리드+그림자 (2026-06-12 마스터) */
html:not(.dark) #mf-tracked-toggle-btn {
    background-color: #fff7ed !important;
    border-color: #fdba74 !important;
    color: #ea580c !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(249, 115, 22, 0.13) !important;
}
/* KIS 실시간/검색 기반 모드 배지(#stock-kis-badge): 색조 유지 + 솔리드+그림자 (2026-06-12 마스터) */
html:not(.dark) #stock-kis-badge.bg-sky-500\/10 {
    background-color: #f0f9ff !important; border-color: #7dd3fc !important; color: #0284c7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(14, 165, 233, 0.13) !important;
}
html:not(.dark) #stock-kis-badge.bg-slate-800\/60 {
    background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #475569 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) #section-dart #dart-interval-select {
    background-color: #fff; border-color: #cbd5e1; color: #334155;
}
html:not(.dark) #section-dart #auto-list,
html:not(.dark) #section-dart #watchlist-items { background-color: #fff; border-color: rgba(16,185,129,0.4); }
/* (N/20) 카운트·목록보기 토글 = text-white 단독(전역 짝 리매핑 미적용) → 어둡게 */
html:not(.dark) #section-dart #watchlist-count,
html:not(.dark) #section-dart #watchlist-count button { color: #475569 !important; }
/* 최대20개·7일 배지: bg-white/5 + border-white/30이 라이트에서 탁한 회색 테두리 → 깔끔한 라이트 칩 */
html:not(.dark) #section-dart #dart-limit-badge {
    background-color: #ffffff !important; border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.06) !important;
}
/* 알림 종 이모지: opacity-20 + 파스텔 글리프가 흰 배경에서 탁하게 뭉개짐 → 채도·명도 보강(JS 제어 opacity는 보존) */
html:not(.dark) #section-dart #dart-alert-bell { filter: saturate(1.6) brightness(1.1); }
/* 평상시(알림 없음) 종이 opacity-20이라 너무 희미 → 라이트서 0.5로 올림. 알림 상태(opacity-100)는 .opacity-20 없어 미적용 (2026-06-12) */
html:not(.dark) #dart-alert-bell.opacity-20 { opacity: 0.5 !important; }

/* ── 상단 로그인 바(#main-nav) 라이트 확정: 배경 흰색·하단선 옅게, 자식 색 라이트 (2026-06-11 마스터) ── */
html:not(.dark) #main-nav {
    /* 바=오프화이트 표면(카드 톤과 통일) → 안의 흰 버튼이 떠 보임 (2026-06-12 마스터) */
    background-color: #f4f6f9 !important;
    border-bottom: 2px solid rgba(99, 102, 241, 0.45) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}
html:not(.dark) #main-nav #app-version-display { color: #475569; }
html:not(.dark) #main-nav #header-user-info { border-left-color: #cbd5e1; }

/* ── ACTIVE AI ENGINE 패널(#engine-panel): border-sky-500/10 유틸이 테두리를 투명 sky로 덮음 → 카드 표준 slate-300 ── */
html:not(.dark) #engine-panel { border-color: #cbd5e1; }

/* ── MY ACCOUNT(#section-kis-account) 손익·등락 빨강/파랑 약속색 통일(요약 총손익·rate·종목카드 손익·현재가등락) ── */
html:not(.dark) #section-kis-account .text-rose-400,
html:not(.dark) #section-kis-account .text-rose-400\/70 { color: #dc2626 !important; }
html:not(.dark) #section-kis-account .text-blue-400,
html:not(.dark) #section-kis-account .text-blue-400\/70 { color: #2563eb !important; }
/* MY ACCOUNT 카드(요약·보유·전량매도): 오프화이트 패널 위로 흰 카드+테두리+그림자로 띄움(레이어 표준, 2026-06-12) */
html:not(.dark) #section-kis-account .bg-slate-800\/60,
html:not(.dark) #section-kis-account .bg-slate-800\/40,
html:not(.dark) #section-kis-account .bg-slate-800\/25 {
    background-color: #ffffff !important;
    border: 1px solid #e6e9ef !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}
html:not(.dark) #section-kis-account .border-slate-700\/40 { border-color: #e2e8f0 !important; }
html:not(.dark) #section-kis-account .bg-slate-700\/70 { background-color: #e2e8f0 !important; }   /* ✕ 버튼 */
html:not(.dark) #section-kis-account .bg-slate-700 { background-color: #e2e8f0 !important; }       /* 수익률 바 트랙 */
html:not(.dark) #section-kis-account .hover\:bg-slate-700\/50:hover,
html:not(.dark) #section-kis-account .hover\:bg-slate-700\/40:hover { background-color: #eef2f7 !important; }
html:not(.dark) #section-kis-account .text-blue-400\/80 { color: #2563eb !important; }             /* 전량 매도 라벨 */
/* MY ACCOUNT 헤더 버튼(매매일지·가디언·새로고침): bg-white/5라 라이트서 묻힘 → 흰 카드+테두리+그림자로 부양 (2026-06-12 마스터) */
html:not(.dark) #section-kis-account button[onclick*="openTradeJournal"],
html:not(.dark) #section-kis-account #guardian-pause-btn,
html:not(.dark) #section-kis-account .kis-acct-refresh-btn {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.07) !important;
}
/* 가디언 일시정지 상태: 로즈 틴트 유지(흰 카드 규칙보다 우선) */
html:not(.dark) #section-kis-account #guardian-pause-btn.bg-rose-500\/15 {
    background-color: #fff1f2 !important;
    border-color: #f43f5e !important;
    color: #dc2626 !important;
}

/* ── 실현익 히스토리 모달(#realized-history-modal) 금액 빨강/파랑 약속색 ── */
html:not(.dark) #realized-history-modal .text-rose-400 { color: #dc2626 !important; }
html:not(.dark) #realized-history-modal .text-blue-400 { color: #2563eb !important; }

/* ── ANALYST DESK 웰컴 안내문: 연한 인디고 강조·로고 라벨이 라이트서 흐림 → 진한 인디고 ── */
html:not(.dark) #analyst-desk-welcome .text-indigo-300,
html:not(.dark) #analyst-desk-welcome .text-indigo-400 { color: #4f46e5; }

/* ── ANALYST DESK 유저 말풍선: 보라(indigo) 배경엔 항상 흰 글자(라이트 리매핑이 어둡게 만들던 것 방지) ── */
html:not(.dark) #section-chat .bg-indigo-500.text-white,
html:not(.dark) #chat-messages .bg-indigo-500 { color: #ffffff !important; }

/* ── AUTO TRADE(#section-autotrade): 흰/연한 글씨 어둡게 + 빨강/파랑 약속색 + 카드 회색 라이트 ── */
html:not(.dark) #section-autotrade .text-rose-400 { color: #dc2626 !important; }
html:not(.dark) #section-autotrade .text-blue-400 { color: #2563eb !important; }
html:not(.dark) #section-autotrade .text-slate-200 { color: #334155 !important; }   /* 총평가·예수금 */
html:not(.dark) #section-autotrade .text-white { color: #1e293b !important; }        /* 봇상태·승률·0손익·보유/매매 종목명·가격 */
/* 요약·보유·매매 카드: 오프화이트 패널 위로 흰 카드+테두리+그림자로 띄움(레이어 표준) */
html:not(.dark) #section-autotrade .bg-slate-900\/50,
html:not(.dark) #section-autotrade .bg-slate-800\/60,
html:not(.dark) #section-autotrade .bg-slate-800\/40 {
    background-color: #ffffff !important;
    border: 1px solid #e6e9ef !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}
/* AUTO TRADE 헤더 봇 시작/정지 버튼(#at-toggle-btn): bg-white/5라 라이트서 묻힘 → 흰 카드+테두리+그림자로 부양 (2026-06-12 마스터) */
html:not(.dark) #section-autotrade #at-toggle-btn {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.07) !important;
}
/* 모의/실전 배지(#at-mode-badge): 색 정체성(모의=초록/실전=빨강) 유지 + 솔리드 배경·그림자로 부양 (2026-06-12 마스터) */
html:not(.dark) #section-autotrade #at-mode-badge.bg-emerald-500\/20 {
    background-color: #ecfdf5 !important;
    border-color: #6ee7b7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(16, 185, 129, 0.13) !important;
}
html:not(.dark) #section-autotrade #at-mode-badge.bg-rose-500\/20 {
    background-color: #fff1f2 !important;
    border-color: #fda4af !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(244, 63, 94, 0.13) !important;
}
/* 모의⇄실전 토글(#at-mode-toggle): 흰 카드+테두리+그림자로 부양 */
html:not(.dark) #section-autotrade #at-mode-toggle {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.07) !important;
}
/* 초기화(로즈)·전체 기록·분석(스카이) 버튼: 색조 유지 + 솔리드 배경·그림자로 부양 (2026-06-12 마스터) */
html:not(.dark) #section-autotrade button[onclick*="autoTradeClearToday"] {
    background-color: #fff1f2 !important;
    border-color: #fda4af !important;
    color: #dc2626 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(244, 63, 94, 0.13) !important;
}
html:not(.dark) #section-autotrade button[onclick*="openAutoTradeStats"] {
    background-color: #f0f9ff !important;
    border-color: #7dd3fc !important;
    color: #0284c7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(14, 165, 233, 0.13) !important;
}
/* 긴급 전량 청산(#at-panic-btn): 위험 버튼 — 로즈 유지 + 솔리드 배경·그림자로 부양 */
html:not(.dark) #section-autotrade #at-panic-btn {
    background-color: #fff1f2 !important;
    border-color: #fb7185 !important;
    color: #dc2626 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(244, 63, 94, 0.15) !important;
}
/* 채팅 입력창 + (첨부/가져오기) 버튼: bg-slate-100이 흰 입력바에 묻힘 → 흰 카드+테두리+그림자, 호버 시 sky 채움 유지 (2026-06-12 마스터) */
html:not(.dark) #section-chat button[onclick*="openImportModal"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.07) !important;
}
html:not(.dark) #section-chat button[onclick*="openImportModal"]:hover {
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}
/* 채팅 전송 버튼(#chat-action-btn): 흰 배경에선 기존 인디고 그림자(0.3)가 약해 납작 → 진한 인디고 드롭섀도로 부양 (2026-06-12 마스터) */
html:not(.dark) #chat-action-btn {
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.42), 0 2px 6px rgba(99, 102, 241, 0.30) !important;
}
/* 채팅 사용자 말풍선(인디고): shadow-md(회색)가 흰 배경서 약함 → 인디고 드롭섀도로 부양 (2026-06-12 마스터) */
html:not(.dark) #chat-messages .bg-indigo-500.rounded-2xl {
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.32), 0 2px 6px rgba(99, 102, 241, 0.22) !important;
}
/* 봇 답변 카드(.markdown-body): shadow-sm이 약해 패널 위에서 납작 → 또렷한 테두리+드롭섀도로 부양 (2026-06-12 마스터) */
html:not(.dark) #chat-messages .markdown-body {
    border-color: #d3dae6 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.09) !important;
}
/* 확장 입력창 전송하기 버튼: shadow-lg(회색)라 인디고에서 약함 → 인디고 드롭섀도로 부양 (2026-06-12 마스터) */
html:not(.dark) button[onclick*="syncAndSendExpanded"] {
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.42), 0 2px 6px rgba(99, 102, 241, 0.30) !important;
}
/* 웰컴 안내문: 배경 없는 투명 레이아웃 → 안쪽 컨테이너를 흰 카드(테두리+그림자)로 감싸 부양 (2026-06-12 마스터) */
html:not(.dark) #analyst-desk-welcome > .max-w-md {
    background-color: #ffffff;
    border: 1px solid #d3dae6;
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.09);
}
/* 흰 카드 위에서 사라지는 구분선·하단 팁 박스 보이게 보정 */
html:not(.dark) #analyst-desk-welcome .bg-slate-800 { background-color: #e2e8f0 !important; }   /* 구분선 h-px */
html:not(.dark) #analyst-desk-welcome .bg-slate-800\/40 { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; }   /* 하단 팁 박스 */

/* DART 자동 감시 버튼(파랑)+주기 드롭다운 부양 (2026-06-12 마스터 "둘다") */
html:not(.dark) #dart-btn {
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35), 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}
html:not(.dark) #dart-interval-select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.07) !important;
}

/* 매매일지 체결/미체결 탭: 선택된 탭만 솔리드+그림자로 도드라지게 (활성만 bg-X-500/20 받음) (2026-06-12 마스터) */
html:not(.dark) #trade-journal-modal button.bg-emerald-500\/20 {
    background-color: #ecfdf5 !important; border-color: #6ee7b7 !important; color: #059669 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(16, 185, 129, 0.14) !important;
}
html:not(.dark) #trade-journal-modal button.bg-sky-500\/20 {
    background-color: #f0f9ff !important; border-color: #7dd3fc !important; color: #0284c7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(14, 165, 233, 0.14) !important;
}

/* ── 매매일지 모달(#trade-journal-modal) 매수/매도·합계 약속색 + 체결 상태 진하게 ── */
html:not(.dark) #trade-journal-modal .text-rose-400 { color: #dc2626 !important; }
html:not(.dark) #trade-journal-modal .text-blue-400 { color: #2563eb !important; }
html:not(.dark) #trade-journal-modal .text-emerald-400 { color: #059669 !important; }
html:not(.dark) #trade-journal-modal .text-amber-400 { color: #d97706 !important; }

/* ═══════════════════════════════════════════════════════════════════
   🎨 섹션별 테마색 경계 (2026-06-11 마스터 — 각 섹션을 고유색으로 두르기, 네비 동색, 양 모드 공통)
   섹션=2px 풀 테두리 / 네비 항목=3px 좌측 강조선. 라이트·다크 동일 적용.
   ═══════════════════════════════════════════════════════════════════ */
#section-input            { border: 2px solid #06b6d4 !important; }   /* cyan */
/* 입력영역 패널=오프화이트(라이트) → 흰 드래프트 카드가 떠 보이게(기존 .input-wrapper 흰배경이라 대비 0이던 것). 다크 무영향 */
html:not(.dark) #section-input { background-color: #f0f3f7 !important; }
#nav-item-section-input            { border-left: 3px solid #06b6d4; }
#section-input > div.border-b { border-bottom-color: rgba(6, 182, 212, 0.3) !important; }

#section-schedule         { border: 2px solid #14b8a6 !important; }   /* teal */
#nav-item-section-schedule        { border-left: 3px solid #14b8a6; }

#section-report           { border: 2px solid #3b82f6 !important; }   /* blue */
#nav-item-section-report          { border-left: 3px solid #3b82f6; }

#section-sectors          { border: 2px solid #c026d6 !important; }   /* fuchsia */
#nav-item-section-sectors         { border-left: 3px solid #c026d6; }

#section-breaking         { border: 2px solid #f43f5e !important; }   /* rose */
#nav-item-section-breaking        { border-left: 3px solid #f43f5e; }

#section-dart             { border: 2px solid #10b981 !important; }   /* emerald */
#nav-item-section-dart            { border-left: 3px solid #10b981; }

#stock-profiling-section  { border: 2px solid #f97316 !important; }   /* orange */
#nav-item-stock-profiling-section { border-left: 3px solid #f97316; }

#section-kis-monitor      { border: 2px solid #0ea5e9 !important; }   /* sky */
#nav-item-section-kis-monitor     { border-left: 3px solid #0ea5e9; }

#section-kis-account      { border: 2px solid #8b5cf6 !important; }   /* violet */
#nav-item-section-kis-account     { border-left: 3px solid #8b5cf6; }

#section-autotrade        { border: 2px solid #f59e0b !important; }   /* amber */
#nav-item-section-autotrade       { border-left: 3px solid #f59e0b; }

#section-chat             { border: 2px solid #6366f1 !important; }   /* indigo */
#nav-item-section-chat            { border-left: 3px solid #6366f1; }

#nav-item-section-api-settings    { border-left: 3px solid #64748b; }   /* settings=중립 slate */

/* ── STOCK ANALYSIS 추가자료 점선 드롭존: 안내문이 text-white+text-body-secondary(짝 리매핑 미적용)라 흰 배경서 증발 → 어둡게, + 칩도 라이트 ── */
html:not(.dark) #stock-profiling-section .input-wrapper.\!border-dashed .text-white { color: #475569 !important; }
html:not(.dark) #stock-profiling-section .input-wrapper.\!border-dashed strong.text-white { color: #1e293b !important; }
html:not(.dark) #stock-profiling-section .input-wrapper.\!border-dashed button.text-white {
    background-color: #fff !important; border-color: #cbd5e1 !important; color: #475569 !important;
}
/* 드롭존·검색입력을 흰 카드로 띄움(#eef1f6 패널 위 대비, 2026-06-12) */
html:not(.dark) #stock-profiling-section .input-wrapper.\!border-dashed { background-color: #ffffff !important; }
html:not(.dark) #stock-profiling-section #stockName { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05); }

/* 종목 프로파일링 입력부 칩·버튼 부양 (2026-06-12 마스터 "3열 다") */
/* 추천 태그 칩(.stock-tag): 연하늘 8%라 묻힘 → 솔리드 하늘+테두리+그림자 (색조 유지) */
html:not(.dark) #stock-profiling-section .stock-tag {
    background: #f0f9ff !important;
    border-color: #7dd3fc !important;
    color: #0284c7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(14, 165, 233, 0.10) !important;
}
html:not(.dark) #stock-profiling-section .stock-tag:hover {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}
/* 종목 정밀 진단 가동 버튼(#stock-action-btn, 틸): 그림자 없어 납작 → 틸 드롭섀도로 부양 */
html:not(.dark) #stock-action-btn,
html:not(.dark) #main-action-btn {
    box-shadow: 0 6px 18px rgba(11, 91, 117, 0.30), 0 2px 6px rgba(11, 91, 117, 0.22) !important;
}
/* 📌 고정 분석 칩(foldedTagsArea 복원 버튼): 인디고 색조 유지 + 솔리드+그림자 (✕ 삭제 버튼은 제외) */
html:not(.dark) #foldedTagsArea button[onclick*="restoreAnalysis"] {
    background-color: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: #4f46e5 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(99, 102, 241, 0.13) !important;
}

/* 종목 프로파일링 중립(slate-50) 카드(차트 동향·통합 분석 총평): #eef1f6 패널 위에서 안 떠 보임 →
   흰 카드+테두리+드롭섀도로 띄움 (2026-06-12) */
html:not(.dark) #stock-result-view .bg-slate-50 {
    background-color: #ffffff !important;
    border-color: #d3dae6 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07) !important;
}
/* 색조 카드(수급 포인트·Trading Points·시각 판독): 틴트는 유지하고 동일 드롭섀도로 입체감 통일 (2026-06-12) */
html:not(.dark) #stock-result-view .bg-blue-50,
html:not(.dark) #stock-result-view .bg-rose-50,
html:not(.dark) #stock-result-view .bg-purple-50 {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10), 0 14px 30px rgba(15, 23, 42, 0.16) !important;
}
/* 최종 판정 스탬프(BUY/SELL 점선 박스): 배경 투명이라 패널 위에서 납작 → 흰 배경으로 카드처럼 띄움 (2026-06-12) */
html:not(.dark) #stock-result-view .border-dashed.shadow-xl {
    background-color: #ffffff !important;
}
/* 네이버 금융 뉴스 더보기 버튼: 반투명 연녹(/10)이라 패널 위에서 납작·막처럼 보임 → 솔리드 연녹+테두리+그림자 (2026-06-12) */
html:not(.dark) #stock-result-view a[class*="bg-green-500/10"] {
    background-color: #ecfdf5 !important;
    border-color: #6ee7b7 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(16, 185, 129, 0.14) !important;
}
html:not(.dark) #stock-result-view a[class*="bg-green-500/10"]:hover {
    background-color: #d1fae5 !important;
}

/* 최신 뉴스 타임라인 카드: #eef1f6 패널 위에서 흰 카드가 확실히 뜨도록 테두리+그림자 강화 (2026-06-12) */
html:not(.dark) .profile-news-card {
    background-color: #ffffff !important;
    border-color: #d3dae6 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07) !important;
}
html:not(.dark) .profile-news-card:hover {
    border-color: #7dd3fc !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.10) !important;
}

/* ── KIS 종목 리스트 행(data-kis-row): 등락색 약속값 통일(상승 #dc2626/하락 #2563eb) + 행 테두리로 종목 구분 (라이트) ── */
html:not(.dark) [data-kis-row] .text-rose-400 { color: #dc2626 !important; }
html:not(.dark) [data-kis-row] .text-blue-400 { color: #2563eb !important; }
html:not(.dark) [data-kis-row] { border: 1px solid #e6e9ef; }
/* KIS MONITOR 종목 행: 오프화이트 패널 위로 흰 카드+그림자(레이어 표준, 2026-06-12) */
html:not(.dark) #section-kis-monitor [data-kis-row],
html:not(.dark) #section-kis-monitor .bg-slate-800\/40 {
    background-color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}
/* 괄호 %부분: opacity-70이 약속색을 흐리게 → 화살표·숫자와 동일 solid로 */
html:not(.dark) [data-kis-change-line] .opacity-70 { opacity: 1 !important; }

/* ── KIS 자동갱신 상태줄(#kis-monitor-updated): 노란 카운트 → 약속 파랑 짙게, 흐린 본문도 읽히게 (라이트) ── */
html:not(.dark) #kis-monitor-updated { color: #475569 !important; }
html:not(.dark) #kis-monitor-updated .text-amber-400 { color: #2563eb !important; }

/* ── KIS 상세 모달 호가창·체결·수급 패널: bg-black/30·/20(검정=회색 블록)이 라이트서 어둡게 뜸 → 라이트 패널 ── */
html:not(.dark) #kis-detail-modal .bg-black\/30 { background-color: #f1f5f9 !important; }
html:not(.dark) #kis-detail-modal .bg-black\/20 { background-color: #f3f6fa !important; }
html:not(.dark) #kis-detail-modal .divide-slate-800\/30 > * { border-color: rgba(203, 213, 225, 0.7) !important; }
/* 상세 모달 빨강/파랑 약속색 통일(호가 사다리·시세정보·보유/관심 리스트·매도매수% — 옅은 -400 톤이 밝은 패널서 흐림). 전일종가 emerald=HTS 기준색 유지 */
html:not(.dark) #kis-detail-modal .text-rose-400 { color: #dc2626 !important; }
html:not(.dark) #kis-detail-modal .text-blue-400 { color: #2563eb !important; }
/* 하단 매도/매수 비율 바: 옅은 -500/70 → 약속색 solid */
html:not(.dark) #kis-detail-modal .bg-rose-500\/70 { background-color: #dc2626 !important; }
html:not(.dark) #kis-detail-modal .bg-blue-500\/70 { background-color: #2563eb !important; }
/* 현재가 강조 원: 다크=흰 테두리 / 라이트=진한 테두리(흰색은 밝은 패널서 증발) */
.kis-cur-ring { outline: 1.8px solid rgba(255, 255, 255, 0.98); }
html:not(.dark) .kis-cur-ring { outline: 2px solid #334155; }
/* 보유종목 카드 그리드 — 기본(PC·태블릿): 종목명·상세 좌 / 현재가 우(세로 spanning). 폰은 미디어쿼리서 2줄로 재배치 */
.kis-hold-grid { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name cur" "sub cur" "detail cur"; column-gap: 10px; align-items: start; }
.kis-hold-grid .kis-hold-name { grid-area: name; }
.kis-hold-grid .kis-hold-sub { grid-area: sub; }
.kis-hold-grid .kis-hold-detail { grid-area: detail; }
.kis-hold-grid .kis-hold-cur { grid-area: cur; }
/* 호가 특수가 배지(고/저/시/전/상/하): 옅은 -200/-300 텍스트 → 진한 약속색, 어두운 -900 배경 → 라이트 */
html:not(.dark) #kis-detail-modal .kis-splbadge.text-rose-300,
html:not(.dark) #kis-detail-modal .kis-splbadge.text-rose-200 { color: #dc2626 !important; }
html:not(.dark) #kis-detail-modal .kis-splbadge.text-blue-300,
html:not(.dark) #kis-detail-modal .kis-splbadge.text-blue-200 { color: #2563eb !important; }
html:not(.dark) #kis-detail-modal .kis-splbadge.text-emerald-200 { color: #059669 !important; }
html:not(.dark) #kis-detail-modal .kis-splbadge.text-white { color: #334155 !important; }
html:not(.dark) #kis-detail-modal .kis-splbadge.bg-rose-900\/40 { background-color: rgba(220, 38, 38, 0.14) !important; }
html:not(.dark) #kis-detail-modal .kis-splbadge.bg-blue-900\/40 { background-color: rgba(37, 99, 235, 0.14) !important; }
html:not(.dark) #kis-detail-modal .kis-splbadge.bg-white\/15 { background-color: rgba(100, 116, 139, 0.15) !important; }

/* ── KIS 상세 모달 라이트: 바탕 살짝 어둡게 + 호가창·체결·버튼·검색창 카드처럼 띄움 (2026-06-12 마스터) ── */
/* 1) 모달 바탕: 흰색(#fff)이 너무 밝아 안쪽 카드가 안 떠 보임 → 연회색 패널로 한 단계 어둡게 */
html:not(.dark) #kis-detail-modal > div {
    background-color: #e8ecf2 !important;
}
/* 2) 호가창·실시간 체결: 색감(빨강/파랑 등락색)은 라이트 그대로 두고, 바탕만 흰색→한 단계 어두운 회색으로
   낮춰 장시간 응시 눈부심 완화 + 테두리·그림자로 창처럼 부양 (2026-06-12 마스터) */
html:not(.dark) #kis-detail-modal .bg-black\/30 {
    background-color: #d4dbe6 !important;
    border: 1px solid #b9c2d2 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.09), 0 10px 24px rgba(15, 23, 42, 0.13) !important;
}
/* 2-1) 수급(외국인/기관/개인) 행: 색감(게이지·빨강/파랑)은 그대로, 테두리+그림자로 카드처럼 부양 */
html:not(.dark) #kis-detail-modal .bg-black\/20 {
    border: 1px solid #d8dee9 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 5px 14px rgba(15, 23, 42, 0.08) !important;
}
/* 3) 상단 탭(호가·수급 / 차트): "선택된" 탭만 흰 카드로 도드라지게.
   활성 탭만 .bg-slate-800/60 클래스를 받으므로(비활성은 text-slate-500) 그 버튼만 타겟.
   테두리는 활성 표시용 진한 border-slate-700(#334155) 그대로 두고, 흰 배경+그림자만 부여 (2026-06-12 마스터) */
html:not(.dark) #kis-tab-btn-hoga.bg-slate-800\/60,
html:not(.dark) #kis-tab-btn-chart.bg-slate-800\/60 {
    background-color: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}
/* 3-1) 차트 주기 탭(일봉/주봉/월봉/년봉): 선택된 것만 도드라지게 — 흐린 하늘색(.bg-sky-500/20) 대신
   흰 배경+하늘 테두리+그림자. 활성 버튼만 .bg-sky-500/20을 받으므로 그것만 타겟. (2026-06-12 마스터) */
html:not(.dark) #kis-chart-toggle .bg-sky-500\/20 {
    background-color: #ffffff !important;
    border: 1px solid #7dd3fc !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(14, 165, 233, 0.13) !important;
}
/* 4) 직접주문 버튼: 솔리드 연녹+테두리+그림자 (반투명 막 제거) */
html:not(.dark) #kis-detail-modal button[onclick*="_kisDirectOrderOpen"] {
    background-color: #ecfdf5 !important;
    border-color: #6ee7b7 !important;
    color: #059669 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(16, 185, 129, 0.14) !important;
}
/* 4-1) 시장가 버튼: 솔리드 연주황+테두리+그림자 (직접주문과 동일 부양) */
html:not(.dark) #kis-detail-modal button[onclick*="_kisMarketOrderOpen"] {
    background-color: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #d97706 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(245, 158, 11, 0.16) !important;
}
/* 5) 종목 검색창: 흰 배경+테두리+그림자로 부양 */
html:not(.dark) #kis-detail-search {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.06) !important;
}
/* 6) 호가 행 매수/매도 선택 pill: 인라인 다크톤(연빨강/연파랑)이 어두워진 회색 바탕에 묻힘 →
   라이트 약속색(진빨강/진파랑)으로 또렷하게 (매수=빨강 / 매도=파랑) (2026-06-12 마스터) */
html:not(.dark) #kis-detail-modal [onclick*="_kisComposePick('buy')"] {
    color: #dc2626 !important;
    border-color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.13) !important;
}
html:not(.dark) #kis-detail-modal [onclick*="_kisComposePick('sell')"] {
    color: #2563eb !important;
    border-color: #2563eb !important;
    background: rgba(37, 99, 235, 0.13) !important;
}


/* 가로 전용 날짜명(.cal-holiday-land) 기본 숨김 — holiday-text 클래스 때문에 @media(max-width:1024px)의 '.holiday-text{display:block!important}'가 강제로 켜서 세로에 이중표시되던 것 차단. 특이도(0,2,0)로 그 규칙(0,1,0)을 이김. 가로에서만 index.html이 (0,3,0)으로 다시 켬 */
.cal-cell .cal-holiday-land { display: none !important; }