/* ============================================================================
   center-marketmap.css — 메인 화면 중앙 마켓맵 · 헤더 '마켓맵' 버튼 (2026-10-13)
   색은 theme.css 토큰만 쓴다 (검정/흰색/커스텀 테마).
   ========================================================================== */

/* 중앙(차트 + 하단정보) 위를 통째로 덮는다 — .center-area 는 layout-ux.css 에서 position: relative */
html body .center-marketmap {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: var(--bg-darker);
}
html body .center-marketmap[hidden] { display: none; }
html body .center-marketmap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--bg-darker);
}

/* 헤더 버튼 — 작은 트리맵 아이콘 + 글자 (2026-10-16)
   예전엔 켜지면 파란 통 배경이라 헤더에서 혼자 튀었다. 켜짐은 옅은 바탕 + 테두리로 조용히 표시한다. */
html body .hdr-marketmap-btn {
    position: relative;
    height: 30px;
    margin-left: 10px;
    padding: 0 12px 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: calc(13.5px * var(--fs-scale, 1));
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
html body .hdr-marketmap-btn:hover { background: var(--bg-lighter); color: var(--text-primary); }
html body .hdr-mm-ic { flex-shrink: 0; }
html body .hdr-mm-ic rect { transition: opacity .15s; }
html body .hdr-mm-ic .u1 { fill: var(--red-up); }
html body .hdr-mm-ic .u2 { fill: var(--red-up); opacity: .55; }
html body .hdr-mm-ic .d1 { fill: var(--blue-down); }
html body .hdr-mm-ic .d2 { fill: var(--blue-down); opacity: .55; }
html body .hdr-marketmap-btn.is-on {
    background: var(--bg-lighter);
    border-color: var(--border-strong);
    color: var(--text-primary);
    font-weight: 700;
}
html body .hdr-marketmap-btn.is-on .u2,
html body .hdr-marketmap-btn.is-on .d2,
html body .hdr-marketmap-btn:hover .u2,
html body .hdr-marketmap-btn:hover .d2 { opacity: .8; }
html body .hdr-marketmap-btn[hidden] { display: none; }