/* ============================================================================
   theme.css — 화면 테마 토큰 (검정 / 흰색 / 커스텀)

   - 모든 레이아웃 CSS(main, sidebar, hoga, order-panel, mypage, login …)는
     여기서 정의한 var(--*) 토큰만 참조한다. 하드코딩 색상 금지.
   - 기본은 검정(dark). <html data-theme="light"> 면 흰색.
   - 커스텀 테마는 theme.js 가 사용자가 고른 색으로 아래 토큰을 계산해
     <html style="--bg-dark:…"> 인라인으로 덮어쓴다 (인라인 > 이 파일).
   - 선택자를 html:root 로 두어 각 CSS 파일에 남아있는 :root 정의보다
     우선하도록 한다 (로드 순서와 무관).
   ========================================================================== */

/* ─────────────── 검정 (기본) ─────────────── */
html:root {
    color-scheme: dark;

    /* 배경 단계 (아래로 갈수록 밝아짐 = 떠 있는 요소) */
    --bg-darker:   #0a0a0a;
    --bg-dark:     #121212;
    --bg-light:    #1e1e1e;
    --bg-lighter:  #2a2a2a;
    --bg-elevated: #333333;
    --bg-hover:    #444444;
    --bg-darker-rgb:  10, 10, 10;
    --bg-dark-rgb:    18, 18, 18;
    --bg-light-rgb:   30, 30, 30;
    --bg-lighter-rgb: 42, 42, 42;

    /* 글자 */
    --text-primary:   #ffffff;
    --text-secondary: #cccccc;
    --text-muted:     #888888;
    --text-dim:       #666666;
    --on-accent:      #ffffff;   /* 빨강/파랑 등 강조 배경 위 글자 — 테마 무관 흰색 */

    /* 경계선 */
    --border-subtle: #2a2a2a;
    --border-color:  #333333;
    --border-strong: #444444;

    /* 전경색 알파 (다크: 흰색 계열 / 라이트: 검정 계열). rgba(255,255,255,.x) 대체 */
    --fg-rgb: 255, 255, 255;
    --fg-a02: rgba(var(--fg-rgb), .02);
    --fg-a03: rgba(var(--fg-rgb), .03);
    --fg-a04: rgba(var(--fg-rgb), .04);
    --fg-a05: rgba(var(--fg-rgb), .05);
    --fg-a06: rgba(var(--fg-rgb), .06);
    --fg-a07: rgba(var(--fg-rgb), .07);
    --fg-a08: rgba(var(--fg-rgb), .08);
    --fg-a10: rgba(var(--fg-rgb), .10);
    --fg-a12: rgba(var(--fg-rgb), .12);
    --fg-a14: rgba(var(--fg-rgb), .14);
    --fg-a15: rgba(var(--fg-rgb), .15);
    --fg-a16: rgba(var(--fg-rgb), .16);
    --fg-a20: rgba(var(--fg-rgb), .20);
    --fg-a26: rgba(var(--fg-rgb), .26);
    --fg-a30: rgba(var(--fg-rgb), .30);
    --fg-a38: rgba(var(--fg-rgb), .38);
    --fg-a40: rgba(var(--fg-rgb), .40);
    --fg-a45: rgba(var(--fg-rgb), .45);
    --fg-a50: rgba(var(--fg-rgb), .50);
    --fg-a55: rgba(var(--fg-rgb), .55);
    --fg-a60: rgba(var(--fg-rgb), .60);
    --fg-a65: rgba(var(--fg-rgb), .65);
    --fg-a70: rgba(var(--fg-rgb), .70);
    --fg-a75: rgba(var(--fg-rgb), .75);
    --fg-a80: rgba(var(--fg-rgb), .80);
    --fg-a85: rgba(var(--fg-rgb), .85);
    --fg-a88: rgba(var(--fg-rgb), .88);
    --fg-a90: rgba(var(--fg-rgb), .90);
    --fg-a92: rgba(var(--fg-rgb), .92);

    /* 시세 색 (국내 관례: 상승 빨강 / 하락 파랑) */
    --red-up:        #fa4646;
    --red-up-rgb:    250, 70, 70;
    --blue-down:     #208ef5;
    --blue-down-rgb: 32, 142, 245;

    /* 포인트 */
    --blue-accent:   #2d7cd0;
    --yellow-accent: #f0c54a;
    --pink-point:    #ff6b6b;
    --red-accent:    #fa4646;
    --red-down:      #e95c5c;
    --green-up:      #5cbf9b;

    /* ── 호가창 (hoga-orderbook.css · ob-*) ── */
    --ob-bg:           #080808;
    --ob-bg-sell:      #0a0a0f;
    --ob-bg-sell-alt:  #0c0c14;
    --ob-bg-buy:       #090f0a;
    --ob-bg-buy-alt:   #0a120b;
    --ob-bg-current:   #141000;
    --ob-bg-limit-up:  #1a0000;
    --ob-bg-limit-dn:  #00001a;
    --ob-bg-header:    #0f0f0f;
    --ob-up:           #e84040;
    --ob-up-rgb:       232, 64, 64;
    --ob-dn:           #3d7bff;
    --ob-dn-rgb:       61, 123, 255;
    --ob-eq:           #d0d0d0;
    --ob-vol:          #bfbfbf;
    --ob-exec-px:      #ffffff;
    --ob-limit-up-clr: #ff3333;
    --ob-limit-dn-clr: #4466ff;
    --ob-cur-border:   #f0c040;
    --ob-cur-bg:       rgba(240, 192, 64, .08);
    --ob-diff-up:      var(--ob-up);
    --ob-diff-dn:      var(--ob-dn);
    --ob-border:       var(--fg-a05);
    --ob-sep:          var(--fg-a08);

    /* ── 주문 패널 (order-panel.css · mo-*) ── */
    --mo-bg:          #0a0a0a;
    --mo-surface:     #141414;
    --mo-surface-2:   #1e1e1e;
    --mo-line:        #303030;
    --mo-line-strong: #454545;
    --mo-text:        #f4f5f6;
    --mo-text-2:      #c2c6cc;
    --mo-text-3:      #9ba1a9;
    --mo-buy:         var(--ob-up);
    --mo-sell:        var(--ob-dn);
    --mo-focus:       rgba(var(--ob-up-rgb), .25);

    /* 노랑 계열 강조 글자 (통합 배지·리그·메모 등). 라이트에선 진한 골드로 대비 확보 */
    --gold-text:  #f5c451;
    --gold-rgb:   245, 196, 81;
    /* 툴팁(반전 배경) */
    --tooltip-bg: rgba(255, 255, 255, .92);
    --tooltip-fg: #1a1a1a;
    /* 상태색 글자 (다크: 파스텔 / 라이트: 진하게). 배경 틴트(rgba) 위 글자 */
    --c-green:  #4ade80;
    --c-blue:   #4dabf7;
    --c-red:    #ff6b7d;
    --c-orange: #ffa94d;
    --c-purple: #da77f2;
    /* 활성 알약(관심목록/모의투자 토글) */
    --pill-active-bg: #262626;

    /* ── 알림 모달 (customAlert.css) ── */
    --bg-primary:   var(--bg-dark);
    --bg-secondary: var(--bg-light);
    --bg-tertiary:  var(--bg-lighter);
    --border-focus: var(--fg-a15);
    --shadow-primary: rgba(0, 0, 0, .25);
}

/* ─────────────── 흰색 ─────────────── */
html[data-theme="light"] {
    color-scheme: light;

    --bg-darker:   #eef0f3;
    --bg-dark:     #ffffff;
    --bg-light:    #f6f7f9;
    --bg-lighter:  #eceef1;
    --bg-elevated: #e1e4e8;
    --bg-hover:    #d5d9de;
    --bg-darker-rgb:  238, 240, 243;
    --bg-dark-rgb:    255, 255, 255;
    --bg-light-rgb:   246, 247, 249;
    --bg-lighter-rgb: 236, 238, 241;

    --text-primary:   #1a1c1f;
    --text-secondary: #454b54;
    --text-muted:     #767d88;
    --text-dim:       #9aa0a8;

    --border-subtle: #e9ebef;
    --border-color:  #dfe2e6;
    --border-strong: #c9ced5;

    --fg-rgb: 20, 22, 26;

    --blue-accent:   #2f7fd6;
    --yellow-accent: #d9a400;

    --ob-bg:           #ffffff;
    --ob-bg-sell:      #f4f6fc;
    --ob-bg-sell-alt:  #eef1f9;
    --ob-bg-buy:       #fcf4f4;
    --ob-bg-buy-alt:   #f9eeee;
    --ob-bg-current:   #fff8e1;
    --ob-bg-limit-up:  #ffecec;
    --ob-bg-limit-dn:  #ebf0ff;
    --ob-bg-header:    #f5f6f8;
    --ob-eq:           #333a44;
    --ob-vol:          #4b525c;
    --ob-exec-px:      #1a1c1f;
    --ob-limit-up-clr: #e02424;
    --ob-limit-dn-clr: #2a55e0;
    --ob-cur-border:   #d9a400;
    --ob-cur-bg:       rgba(217, 164, 0, .12);

    --mo-bg:          #f5f6f8;
    --mo-surface:     #ffffff;
    --mo-surface-2:   #f0f1f4;
    --mo-line:        #e2e4e9;
    --mo-line-strong: #cfd3d9;
    --mo-text:        #1a1c1f;
    --mo-text-2:      #454b54;
    --mo-text-3:      #767d88;

    --gold-text:  #a36d00;
    --gold-rgb:   184, 130, 0;
    --tooltip-bg: rgba(28, 30, 34, .94);
    --tooltip-fg: #ffffff;
    --c-green:  #15803d;
    --c-blue:   #1d6fd1;
    --c-red:    #d92d3a;
    --c-orange: #c2410c;
    --c-purple: #8e24aa;
    --pill-active-bg: #1a1c1f;

    --shadow-primary: rgba(0, 0, 0, .12);
}

/* 라이트/커스텀에서 이미지 로고 등 순백 자산이 안 보이는 경우 대비 */
html[data-theme="light"] .logo-img { filter: none; }

/* 흰색 테마: 관심목록 종목 배지(뉴/신/정/위/경/주/관/환)를 진한 단색 대신
   연한 틴트 배경 + 같은 계열 진한 글자로 — 흰 바탕에서 덜 튀고 앱 라이트 톤과 맞춤 */
html[data-theme="light"] .stock-badge--news       { background: #dff3e7; color: #157347; }
html[data-theme="light"] .stock-badge--new-listed { background: #dcebfa; color: #1c5f9a; }
html[data-theme="light"] .stock-badge--stop,
html[data-theme="light"] .stock-badge--risk       { background: #fde1e1; color: #b42323; }
html[data-theme="light"] .stock-badge--warn,
html[data-theme="light"] .stock-badge--caution,
html[data-theme="light"] .stock-badge--manage,
html[data-theme="light"] .stock-badge--attn       { background: #fbe3e7; color: #b8324a; }

/* ============================================================================
   테마 선택 UI (헤더 우측 팔레트 버튼 + 팝오버)
   ========================================================================== */
.st-theme-menu {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.st-theme-btn {
    /* "Aa ● 테마" 알약 — 글자 크기(Aa)와 테마(색 점)를 한눈에 알리는 설정 버튼 */
    height: 28px;
    padding: 0 10px 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: var(--bg-lighter);
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
    .st-theme-btn-aa {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1;
    }
    .st-theme-btn-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: conic-gradient(#fa4646, #f0c54a, #5cbf9b, #208ef5, #be4bdb, #fa4646);
        box-shadow: inset 0 0 0 2px var(--bg-lighter);
        flex-shrink: 0;
    }
    .st-theme-btn-label {
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
    }
    .st-theme-btn:hover,
    .st-theme-btn.is-open {
        background: var(--bg-elevated);
        border-color: var(--text-muted);
    }

.st-theme-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 272px;
    padding: 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    z-index: 10050;
    color: var(--text-primary);
    font-size: 13px;
}
    .st-theme-pop[hidden] { display: none; }

.st-theme-pop-title {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.st-theme-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.st-theme-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-lighter);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    margin: 0 !important;
    transition: border-color .15s, background .15s, color .15s;
}
    .st-theme-mode:hover { background: var(--bg-elevated); color: var(--text-primary); }
    .st-theme-mode.is-active {
        border-color: var(--red-up);
        color: var(--text-primary);
        box-shadow: 0 0 0 1px var(--red-up) inset;
    }

.st-theme-swatch {
    width: 34px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid var(--border-strong);
    position: relative;
    overflow: hidden;
}
    .st-theme-swatch.light  { background: #ffffff; }
    .st-theme-swatch.dark   { background: #121212; }
    .st-theme-swatch.custom {
        background: conic-gradient(#fa4646, #f0c54a, #5cbf9b, #208ef5, #be4bdb, #fa4646);
    }
    .st-theme-swatch.light::after,
    .st-theme-swatch.dark::after {
        content: "";
        position: absolute;
        left: 6px; right: 6px; top: 9px;
        height: 3px;
        border-radius: 2px;
        background: #fa4646;
    }

.st-theme-custom {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
    .st-theme-custom[hidden] { display: none; }

.st-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    color: var(--text-secondary);
}
    .st-theme-row label { font-size: 12px; }
    .st-theme-row input[type="color"] {
        width: 44px;
        height: 24px;
        padding: 0;
        border: 1px solid var(--border-strong);
        border-radius: 5px;
        background: transparent;
        cursor: pointer;
    }
    .st-theme-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
    .st-theme-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }

.st-theme-presets {
    display: flex;
    gap: 6px;
    margin: 6px 0 4px;
}
    .st-theme-preset {
        flex: 1;
        height: 26px;
        border-radius: 6px;
        border: 1px solid var(--border-strong);
        cursor: pointer;
        margin: 0 !important;
        font-size: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.st-theme-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}
    .st-theme-actions button {
        padding: 5px 10px;
        border-radius: 6px;
        border: 1px solid var(--border-strong);
        background: var(--bg-lighter);
        color: var(--text-secondary);
        font-size: 12px;
        cursor: pointer;
        margin: 0 !important;
    }
    .st-theme-actions button:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* 글자 크기 단계 (작게 / 중간 / 크게) */
.st-theme-sub-title { font-weight: 700; font-size: 13px; margin: 12px 0 8px; color: var(--text-primary); }
.st-theme-fonts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-lighter);
}
    .st-theme-font {
        padding: 7px 0;
        font-size: 13px;
        color: var(--text-secondary);
        cursor: pointer;
        margin: 0 !important;
        border-right: 1px solid var(--border-color);
    }
    .st-theme-font:last-child { border-right: 0; }
    .st-theme-font:hover { color: var(--text-primary); background: var(--bg-elevated); }
    .st-theme-font.is-active { color: var(--on-accent); background: var(--red-up); }
/* 시작 화면 (마켓맵 / 차트) — 글자 크기 버튼 모양 그대로 2칸 */
.st-theme-fonts.st-theme-starts { grid-template-columns: repeat(2, 1fr); }
/* 항목 제목 옆 도움말 아이콘 — 올리거나(포커스) 하면 설명이 아래에 뜬다 */
/* 설명 상자는 제목 줄 폭에 맞춘다 — 아이콘 기준 가운데 정렬이면 팝업 밖으로 잘린다 */
.st-theme-sub-title:has(.st-theme-help) { position: relative; }
.st-theme-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 4px; vertical-align: -3px;
    border-radius: 50%; border: 1px solid var(--text-muted); color: var(--text-muted);
    font-family: inherit; font-style: normal; font-weight: 700; font-size: 13px; line-height: 1; cursor: help; outline: none;
}
    .st-theme-help:hover, .st-theme-help:focus-visible { color: var(--text-primary); border-color: var(--text-primary); }
.st-theme-help-tip {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
    padding: 8px 10px; border-radius: 8px;
    background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    font-family: inherit; font-style: normal; font-weight: 500; font-size: 13px; line-height: 1.5; text-align: left; white-space: normal;
    visibility: hidden; opacity: 0; transition: opacity .12s;
}
.st-theme-help:hover .st-theme-help-tip, .st-theme-help:focus .st-theme-help-tip { visibility: visible; opacity: 1; }

/* 사이드 창(관심목록) 위치 — 미니 창 아이콘: 색 점이 있는 쪽이 관심목록 */
.st-theme-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-theme-side { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-light); color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
    .st-theme-side:hover { color: var(--text-primary); border-color: var(--border-strong); }
    .st-theme-side.is-active { color: var(--text-primary); border-color: var(--c-blue); box-shadow: 0 0 0 2px rgba(var(--blue-down-rgb), .18); }
.st-theme-side-ico { position: relative; width: 44px; height: 30px; border-radius: 6px; background: var(--bg-lighter); border: 1px solid var(--border-subtle); overflow: hidden; flex: 0 0 auto; }
    .st-theme-side-ico::after { content: ''; position: absolute; top: 5px; bottom: 5px; width: 14px; border-radius: 3px; background: var(--fg-a10); }
    .st-theme-side-ico.is-left::after { right: 6px; }
    .st-theme-side-ico.is-right::after { left: 6px; }
    .st-theme-side-ico i { position: absolute; width: 5px; height: 5px; border-radius: 50%; }
    .st-theme-side-ico i:nth-child(1) { top: 6px; background: var(--red-up); }
    .st-theme-side-ico i:nth-child(2) { top: 13px; background: #f5a521; }
    .st-theme-side-ico i:nth-child(3) { top: 20px; background: var(--c-green, #22c55e); }
    .st-theme-side-ico.is-left i { left: 7px; }
    .st-theme-side-ico.is-right i { right: 7px; }