/* ============================================================================
   layout-ux.css — 패널 접기/펼치기 애니메이션 · 차트 전체보기 · 세로 분할선
   (layout-compact.css 다음에 읽힌다)
   ========================================================================== */

/* ───────── 3열(호가·시장동향) 접기/펼치기 ─────────
   RightToggle.js 가 collapsed 를 붙이기 전에 is-collapsing 을, 뗀 직후 한 프레임 동안 is-expanding 을 붙인다.
   폭·투명도가 transition 으로 움직이고, 안쪽 내용은 펼친 폭으로 고정해 줄바꿈으로 출렁이지 않게 한다. */
html body .right-sidebar {
    transition: width .3s cubic-bezier(.2, .8, .2, 1), min-width .3s cubic-bezier(.2, .8, .2, 1), flex-basis .3s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, border-color .3s;
}
html body .right-sidebar.is-collapsing,
html body .right-sidebar.is-expanding {
    width: 0 !important;
    min-width: 0;
    flex-basis: 0;
    opacity: 0;
    overflow: hidden !important;
    border-color: transparent;
    display: block;
}
    html body .right-sidebar.is-collapsing > *,
    html body .right-sidebar.is-expanding > * { min-width: var(--hoga-w); }

/* ───────── 2열(모의투자 주문) — 폭은 이미 transition, 내용은 살짝 미끄러져 들어온다 ───────── */
html body .mo-panel .mo-inner {
    transition: opacity .2s ease .05s, transform .25s cubic-bezier(.2, .8, .2, 1);
    opacity: 0;
    transform: translateX(-10px);
}
html body .mo-panel.is-open .mo-inner { opacity: 1; transform: none; }

/* ───────── 1열: 차트 ↔ 하단정보 높이 변화 ───────── */
html body .center-area { position: relative; }
html body .center-area .chart-area,
html body .center-area .infomation-area { transition: height .25s cubic-bezier(.2, .8, .2, 1); }
html body.is-resizing-center .center-area .chart-area,
html body.is-resizing-center .center-area .infomation-area { transition: none; }
html body.is-resizing-center { cursor: row-resize; user-select: none; }
html body.is-resizing-center iframe { pointer-events: none; }   /* iframe 이 드래그 이벤트를 삼키지 않게 */

/* 세로 분할선 — 두 카드 사이 간격(--panel-gap) 자리에 겹쳐 놓는다 */
html body .center-splitter {
    position: absolute;
    left: 0; right: 0;
    height: var(--panel-gap);
    z-index: 5;
    cursor: row-resize;
    touch-action: none;
    display: flex; align-items: center; justify-content: center;
}
    html body .center-splitter::before {
        content: '';
        width: 44px; height: 4px; border-radius: 2px;
        background: var(--border-strong);
        opacity: 0;
        transition: opacity .15s, background .15s, transform .15s;
    }
    html body .center-splitter:hover::before,
    html body .center-splitter:focus-visible::before,
    html body.is-resizing-center .center-splitter::before { opacity: 1; background: var(--red-up); transform: scaleX(1.3); }
    html body .center-splitter:focus-visible { outline: none; }

/* ───────── 서브메뉴 '모의투자' 활성 표시 ─────────
   RightMainSidebar.js 가 호가 서브메뉴를 다시 그릴 때 active 를 모두 지우므로,
   주문창이 열려 있는 동안에는 CSS 로도 활성으로 보이게 한다 (.submenu-item.active 와 같은 모양). */
html body .main-content.order-panel-open #mockOrderMenuItem {
    background-color: var(--bg-lighter);
    border: 1px solid #7a1921;
}
    html body .main-content.order-panel-open #mockOrderMenuItem .item-text { font-weight: 600; }
    html body .main-content.order-panel-open #mockOrderMenuItem .item-highlight { width: 100%; opacity: .15; }

/* ───────── 최근 본 종목 (레일 옆 팝업) ───────── */
html body .recent-stocks-panel {
    position: fixed; z-index: 9200;
    width: 232px; max-height: 60vh;
    display: flex; flex-direction: column;
    background: var(--bg-light);
    border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    overflow: hidden;
    animation: rsIn .16s cubic-bezier(.2, .8, .2, 1);
}
    html body .recent-stocks-panel[hidden] { display: none; }
@keyframes rsIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

html body .recent-stocks-panel .rs-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px 8px;
    font-size: calc(13px * var(--fs-scale, 1)); font-weight: 700; color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}
html body .recent-stocks-panel .rs-clear {
    border: 0; background: transparent; cursor: pointer; padding: 2px 4px;
    font: inherit; font-size: calc(12px * var(--fs-scale, 1)); font-weight: 600; color: var(--text-muted);
}
    html body .recent-stocks-panel .rs-clear:hover { color: var(--red-up); }

html body .recent-stocks-panel .rs-list { overflow-y: auto; padding: 5px; }
html body .recent-stocks-panel .rs-item {
    display: flex; align-items: baseline; gap: 8px; width: 100%;
    padding: 7px 9px; border: 0; border-radius: 8px;
    background: transparent; color: var(--text-primary);
    font: inherit; font-size: calc(13px * var(--fs-scale, 1)); text-align: left; cursor: pointer;
}
    html body .recent-stocks-panel .rs-item:hover { background: var(--fg-a08); }
    html body .recent-stocks-panel .rs-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html body .recent-stocks-panel .rs-code { color: var(--text-muted); font-size: calc(12px * var(--fs-scale, 1)); flex: 0 0 auto; }
html body .recent-stocks-panel .rs-empty {
    margin: 0; padding: 18px 12px; text-align: center;
    font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--text-muted);
}

/* ───────── 차트 헤더: 종목 이름·코드·통합 배지 ─────────
   배지는 종목 정보 묶음 안에 둔다. 현재가 뒤에 있으면 시세가 바뀔 때마다 앞 숫자의 폭을 따라 좌우로 흔들린다. */
html body .chart-header-stock-info {
    align-items: baseline;
    gap: 6px;
    margin-right: 14px;
    min-width: 0;
}
html body .chart-header-stock-name { margin-right: 0; }
html body .chart-header-stock-code { margin-right: 0; color: var(--text-muted); }
html body .chart-header-integrated-badge {
    align-self: center;          /* 테두리 있는 칩이라 글자 기준선보다 가운데가 자연스럽다 */
    margin: 0;
    padding: 1px 6px;
    font-size: calc(11.5px * var(--fs-scale, 1));
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
    border-radius: 5px;
}

/* 숫자는 고정폭으로 — 자릿수가 같으면 값이 바뀌어도 폭이 변하지 않아 옆 요소가 밀리지 않는다 */
html body .chart-header-stock-price,
html body .chart-header-price-change,
html body .chart-header-ohlc b {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
/* 등락 표기는 부호·자릿수에 따라 폭이 들쭉날쭉하다 — 최소 폭을 줘 덜 출렁이게 */
html body .chart-header-price-change { min-width: 9.5em; }

/* ───────── 차트 헤더: 시·고·저·종 + 이동평균 ───────── */
html body .chart-header-container {
    position: relative;
    container-type: inline-size;   /* 아래 @container 는 화면이 아니라 이 헤더의 폭을 본다 */
    flex-wrap: wrap;               /* 자리가 모자라면 OHLC 가 아랫줄로 */
    row-gap: 2px;
}

/* 오른쪽으로 밀어 버튼들과 한 덩어리로 놓는다 */
html body .chart-header-ohlc {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    font-size: calc(13px * var(--fs-scale, 1));
    color: var(--text-secondary);
    white-space: nowrap;
}
    html body .chart-header-ohlc[hidden] { display: none; }
    html body .chart-header-ohlc .cho-cell { display: inline-flex; align-items: baseline; gap: 4px; }
    html body .chart-header-ohlc i,
    html body .chart-header-ohlc .cho-cell i { font-style: normal; color: var(--text-muted); font-weight: 500; }
    html body .chart-header-ohlc b { font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
    html body .chart-header-ohlc b.up { color: var(--red-up); }
    html body .chart-header-ohlc b.down { color: var(--blue-down); }
    html body .chart-header-ohlc .cho-chg b { font-weight: 700; }

/* 한 줄에 다 못 들어가면 감추지 않고 아랫줄로 내린다 (기준은 화면 폭이 아니라 차트 헤더 폭). */
@container (max-width: 1080px) {
    html body .chart-header-ohlc {
        order: 99;
        flex: 0 0 100%;
        margin-left: 0;
        justify-content: flex-end;   /* 아랫줄에서도 오른쪽에 붙인다 */
        padding-top: 5px;
        overflow: visible;
    }
}
/* 아주 좁을 때만 거래량을 뺀다 */
@container (max-width: 520px) { html body .chart-header-ohlc .cho-vol { display: none; } }

/* 이동평균 — 버튼 + 아래로 펼쳐지는 값 목록 */
/* position 을 주지 않는다 — 값 목록이 이 버튼이 아니라 헤더 전체 아래에 붙어야
   OHLC 가 아랫줄로 내려갔을 때 그 줄을 가리지 않는다 (기준은 .chart-header-container) */
html body .chart-header-ma { margin-left: 12px; flex: 0 0 auto; }
    html body .chart-header-ma[hidden] { display: none; }
html body .chart-header-ma-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 9px;
    border: 1px solid var(--border-color); border-radius: 7px;
    background: transparent; color: var(--text-secondary);
    font: inherit; font-size: calc(12px * var(--fs-scale, 1)); font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
    html body .chart-header-ma-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
    html body .chart-header-ma-btn.is-on { color: var(--text-primary); border-color: var(--border-strong); background: var(--fg-a06); }
    html body .chart-header-ma-btn i { font-size: calc(11px * var(--fs-scale, 1)); }

/* 값 목록은 차트 범례 안에 있다 (wwwroot/chart/index.html 의 .lg-ma) — 여기 버튼은 스위치 */

/* ───────── 차트 전체보기 ───────── */
html body .chart-header-fullscreen { margin-right: 0; }
html body .chart-area:fullscreen {
    border-radius: 0;
    border: 0;
    background: var(--bg-dark);
}
/* Fullscreen API 를 못 쓰는 환경: 화면 전체를 덮는 고정 레이어 */
html body.chart-fullscreen .center-area .chart-area:not(:fullscreen) {
    position: fixed; inset: 0; z-index: 9500;
    height: auto !important; width: auto !important;
    border-radius: 0;
    animation: chartFullIn .22s ease;
}
@keyframes chartFullIn { from { opacity: .4; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ───────── 애니메이션 끈 사용자 ───────── */
html.reduce-motion body .right-sidebar,
html.reduce-motion body .mo-panel,
html.reduce-motion body .mo-panel .mo-inner,
html.reduce-motion body .center-area .chart-area,
html.reduce-motion body .center-area .infomation-area { transition: none !important; animation: none !important; }