*, *::before, *::after { box-sizing: border-box; }
        :root {
            color-scheme: dark;
            --bg: #070a0f;
            --surface: #0d121a;
            --surface-2: #111923;
            --surface-3: #17212d;
            --line: rgba(255,255,255,.08);
            --line-strong: rgba(255,255,255,.14);
            --text: #f4f7fb;
            --muted: #8793a4;
            --faint: #566273;
            --green: #2ce69b;
            --green-bg: rgba(44,230,155,.1);
            --red: #ff6174;
            --red-bg: rgba(255,97,116,.1);
            --amber: #f9c74f;
            --amber-bg: rgba(249,199,79,.1);
            --blue: #69a8ff;
            --blue-bg: rgba(105,168,255,.1);
            --purple: #b89cff;
            --radius: 16px;
            --mono: "Roboto Mono", monospace;
            --sans: "Noto Sans KR", "Inter", sans-serif;
        }

        html {
            background: var(--bg);
            font-size: 20px;
        }
        body {
            margin: 0;
            min-width: 320px;
            min-height: 100vh;
            background:
                radial-gradient(circle at 78% -10%, rgba(43,93,155,.18), transparent 34rem),
                radial-gradient(circle at -10% 30%, rgba(24,108,79,.1), transparent 26rem),
                var(--bg);
            color: var(--text);
            font-family: var(--sans);
            -webkit-font-smoothing: antialiased;
        }
        button, input { font: inherit; }
        a { color: inherit; }
        .shell {
            width: 100%;
            max-width: 2200px;
            margin: 0 auto;
            padding: 10px;
            box-sizing: border-box;
        }
        .panel {
            background: linear-gradient(145deg, rgba(17,25,35,.96), rgba(11,16,24,.96));
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: 0 18px 55px rgba(0,0,0,.2);
        }
        .eyebrow {
            color: var(--muted);
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .section-head {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 54px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--line);
        }
        .section-title {
            margin: 0;
            font-size: .92rem;
            font-weight: 800;
            letter-spacing: -.02em;
        }
        .section-meta {
            margin-left: auto;
            color: var(--faint);
            font-family: var(--mono);
            font-size: .68rem;
        }

        /* Header */
        .topbar {
            display: flex;
            align-items: center;
            gap: 20px;
            min-height: 58px;
            margin-bottom: 8px;
            padding: 8px 14px;
            background: rgba(9,13,20,.9);
            border: 1px solid var(--line);
            border-radius: 14px;
            backdrop-filter: blur(18px);
            position: sticky;
            top: 8px;
            z-index: 20;
        }
        .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: linear-gradient(135deg, #2875ea, #704de7);
            box-shadow: 0 8px 24px rgba(58,99,221,.3);
            font-size: .72rem;
            font-weight: 800;
        }
        .brand-copy strong { display: block; font-size: .86rem; letter-spacing: -.02em; }
        .brand-copy span { display: block; margin-top: 1px; color: var(--faint); font-size: .63rem; }
        .nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
        .nav::-webkit-scrollbar { display: none; }
        .nav a {
            padding: 7px 10px;
            border-radius: 8px;
            color: var(--muted);
            font-size: .72rem;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
        }
        .nav a:hover, .nav a.active { color: var(--text); background: rgba(255,255,255,.06); }
        .live-status {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
            color: var(--muted);
            font-family: var(--mono);
            font-size: .72rem;
            white-space: nowrap;
        }
        .live-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 0 4px rgba(44,230,155,.1), 0 0 14px var(--green);
            animation: breathe 2.2s ease-in-out infinite;
        }
        @keyframes breathe { 50% { opacity: .45; } }

        /* Headline tape */
        .headline-tape {
            display: flex;
            align-items: center;
            min-height: 38px;
            margin-bottom: 10px;
            overflow: hidden;
            background: rgba(8,12,18,.9);
            border: 1px solid var(--line);
            border-radius: 11px;
        }
        .tape-label {
            align-self: stretch;
            display: flex;
            align-items: center;
            padding: 0 13px;
            background: var(--surface-3);
            color: var(--text);
            font-size: .65rem;
            font-weight: 800;
            letter-spacing: .08em;
            white-space: nowrap;
            z-index: 1;
        }
        .tape-window { flex: 1; overflow: hidden; }
        .tape-track {
            display: inline-flex;
            align-items: center;
            gap: 24px;
            padding-left: 20px;
            white-space: nowrap;
            animation: tape 85s linear infinite;
        }
        .tape-track:hover { animation-play-state: paused; }
        @keyframes tape { to { transform: translateX(-50%); } }
        .tape-item { display: inline-flex; align-items: center; gap: 7px; color: #cbd3df; font-size: .69rem; text-decoration: none; }
        .sentiment-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
        .sentiment-dot.good { background: var(--green); }
        .sentiment-dot.bad { background: var(--red); }

        .snapshot-strip {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
            gap: 10px;
            margin-bottom: 10px;
        }
        .snapshot-card {
            min-height: 76px;
            padding: 13px 15px;
            background: rgba(13,18,26,.92);
            border: 1px solid var(--line);
            border-radius: 13px;
        }
        .snapshot-label {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            color: var(--muted);
            font-size: .63rem;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
        }
        .snapshot-value {
            display: block;
            margin-top: 9px;
            font-family: var(--mono);
            font-size: 1.08rem;
            font-weight: 800;
            letter-spacing: -.04em;
        }
        .quote-flash {
            animation: quoteFlash .95s ease;
        }
        @keyframes quoteFlash {
            0% { color: var(--amber); text-shadow: 0 0 16px rgba(249,199,79,.75); transform: translateY(-1px); }
            100% { text-shadow: none; transform: translateY(0); }
        }
        .snapshot-sub {
            display: block;
            margin-top: 3px;
            color: var(--faint);
            font-size: .6rem;
        }
        .snapshot-change.up { color: var(--green); }
        .snapshot-change.down { color: var(--red); }

        /* Priority layout */
        .hero {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 360px;
            gap: 10px;
            align-items: start;
        }
        .chart-panel { min-width: 0; }
        .chart-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 16px;
            border-bottom: 1px solid var(--line);
        }
        .instrument { display: flex; align-items: baseline; gap: 9px; }
        .instrument strong { font-family: var(--mono); font-size: 1.05rem; letter-spacing: -.02em; }
        .instrument span { color: var(--muted); font-size: .68rem; }
        .chart-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
        .chart-id {
            width: 150px;
            padding: 7px 9px;
            background: rgba(255,255,255,.04);
            border: 1px solid var(--line);
            border-radius: 8px;
            color: var(--text);
            font-family: var(--mono);
            font-size: .68rem;
            outline: none;
        }
        .chart-id:focus { border-color: rgba(105,168,255,.6); }
        .small-btn, .external-link {
            padding: 7px 10px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--surface-3);
            color: var(--text);
            font-size: .67rem;
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
        }
        .small-btn:hover, .external-link:hover { border-color: var(--line-strong); background: #1b2735; }
        .preset-btn {
            padding: 7px 9px;
            border: 1px solid rgba(105,168,255,.25);
            border-radius: 8px;
            background: rgba(105,168,255,.08);
            color: var(--blue);
            font-size: .65rem;
            font-weight: 800;
            cursor: pointer;
        }
        .preset-btn.active { color: var(--amber); border-color: rgba(249,199,79,.38); background: rgba(249,199,79,.1); }
        .chart-frame {
            position: relative;
            height: clamp(520px, 58vh, 760px) !important;
            min-height: 520px !important;
            margin: 10px;
            overflow: hidden;
            background: #131722;
            border: 1px solid var(--line);
            border-radius: 12px;
        }
        #tradingview_advanced { width: 100%; height: 100%; }
        .tv-fallback-frame {
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
            background: #131722;
        }