/* ============================================================================
   모의투자 주문 패널 (.mo-*)

   .main-content 안의 컬럼. center-area 와 right-sidebar(호가) 사이에 놓여
   열리면 차트가 줄고 호가창과 주문창이 오른쪽에 나란히 보인다.
   오버레이가 아닌 이유: 주문할 때 정작 봐야 할 호가창을 가리면 안 된다.

   이 파일은 main.css 보다 뒤에 로드되어야 한다.
   ============================================================================ */

/* 색은 호가창(hoga-orderbook.css)·본문(main.css)과 같은 계열로 맞춘다.
   푸른기 도는 회색을 쓰면 바로 옆 호가창(#080808)과 톤이 어긋나 보인다. */
:root {
    --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: #e84040;   /* --ob-up 과 동일 */
    --mo-sell: #3d7bff;  /* --ob-dn 과 동일 */
    --mo-focus: rgba(232, 64, 64, .25);
}

/* ─── 컬럼 ─── */
.mo-panel {
    position: relative;     /* 포트폴리오 패널이 이 위에 겹쳐 열린다 */
    flex: 0 0 auto;
    width: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--mo-bg);
    border-left: 0 solid var(--mo-line);
    transition: width .22s ease, min-width .22s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
                 "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
    color: var(--mo-text);
}

    .mo-panel.is-open {
        width: 480px;
        min-width: 480px;
        border-left-width: 1px;
    }

/* 애니메이션 중 내용이 찌그러지지 않도록 안쪽은 폭을 고정한다 */
.mo-inner {
    width: 480px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
    .mo-panel {
        transition: none;
    }
}

/* 호가 사이드바는 접힐 때 transform: translateX(100%) 로 오른쪽으로 미끄러진다.
   자기가 화면 오른쪽 끝이라는 전제인데, 이제 그 오른쪽에 주문 패널이 있어서
   접히는 0.5초 동안 패널을 덮고 지나간다. 폭·투명도 전환만 남긴다. */
.right-sidebar.collapsed {
    transform: none;
}

/* 패널이 열리면 차트가 양보한다.
   main.css 가 1024~1490px 구간에서 .center-area 에 min-width:700px !important 를
   걸어둬서, 그대로 두면 줄어드는 대신 가로 스크롤이 생긴다. */
.main-content.order-panel-open .center-area {
    min-width: 420px !important;
}

/* ─── 헤더 ─── */
.mo-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 15px;
    border-bottom: 1px solid var(--mo-line);
}

.mo-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mo-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text-2);
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .mo-close:hover {
        background: var(--mo-surface-2);
        color: var(--mo-text);
    }

/* ─── 내 자산 요약 (포트폴리오 진입) ─── */
.mo-account {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 32px);
    margin: 12px 16px 0;
    padding: 14px 15px;
    border: 1px solid var(--mo-line);
    border-radius: 12px;
    background: var(--mo-surface);
    text-decoration: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

    /* 포트폴리오가 열려 있으면 화살표를 뒤집어 상태를 드러낸다 */
    .mo-account[aria-expanded="true"] .mo-account-arrow {
        transform: rotate(180deg);
    }

    .mo-account:hover {
        border-color: var(--mo-line-strong);
        background: var(--mo-surface-2);
    }

.mo-account-label {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--mo-text-3);
}

.mo-account-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mo-account-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

    .mo-account-main strong {
        white-space: nowrap;
        font-size: 17px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .mo-account-main em {
        white-space: nowrap;
        font-style: normal;
        font-size: 14px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.mo-account-arrow {
    flex: 0 0 auto;
    color: var(--mo-text-3);
    transition: transform .2s ease;
}

.mo-up { color: var(--mo-buy); }
.mo-down { color: var(--mo-sell); }

/* ─── 본문 ─── */
.mo-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 매수/매도/주문내역 세그먼트 */
.mo-seg {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 4px;
    padding: 4px;
    border-radius: 11px;
    background: var(--mo-surface);
    border: 1px solid var(--mo-line);
}

.mo-seg-btn {
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text-2);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .mo-seg-btn:hover { color: var(--mo-text); }
    .mo-seg-btn.is-active { color: var(--text-primary); }

#obTabBuy.is-active { background: var(--mo-buy); }
#obTabBuy.is-active, #obTabSell.is-active, #obTabHistory.is-active { color: var(--on-accent); }
#obTabSell.is-active { background: var(--mo-sell); }
#obTabHistory.is-active { background: var(--bg-elevated); }

/* 주문내역 탭의 대기 주문 수 */
.mo-seg-count {
    display: inline-block;
    min-width: 20px;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--mo-buy);
    color: var(--on-accent);
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    vertical-align: 1px;
}

    .mo-seg-count:empty { display: none; }

/* 주문 입력 묶음 — 주문내역 탭에서는 통째로 숨긴다 */
.mo-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mo-form[hidden],
.mo-orders[hidden] {
    display: none;
}

/* 주문내역을 보는 동안에는 주문 버튼이 필요 없다 */
#orderPanel.is-history .mo-foot {
    display: none;
}

/* 필드 */
.mo-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mo-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mo-text-2);
}

.mo-mini {
    border: 1px solid var(--mo-line);
    border-radius: 6px;
    padding: 4px 10px;
    background: transparent;
    color: var(--mo-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .mo-mini:hover {
        border-color: var(--mo-line-strong);
        color: var(--mo-text);
    }

.mo-hint {
    margin: 0;
    font-size: 12px;
    color: var(--mo-text-3);
}

.mo-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.mo-choice-btn {
    height: 40px;
    border: 1px solid var(--mo-line);
    border-radius: 9px;
    background: var(--mo-surface);
    color: var(--mo-text-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

    .mo-choice-btn:hover {
        border-color: var(--mo-line-strong);
        color: var(--mo-text);
    }

    .mo-choice-btn.is-active {
        background: var(--mo-surface-2);
        border-color: var(--mo-line-strong);
        color: var(--mo-text);
    }

/* 입력 */
.mo-input {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 52px;
    padding: 0 6px 0 12px;
    border: 1px solid var(--mo-line);
    border-radius: 11px;
    background: var(--mo-surface);
    transition: border-color .15s, box-shadow .15s;
}

    .mo-input:focus-within {
        border-color: var(--mo-line-strong);
        box-shadow: 0 0 0 3px var(--mo-focus);
    }

    .mo-input input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        background: transparent;
        color: var(--mo-text);
        font-family: inherit;
        font-size: 19px;
        font-weight: 700;
        text-align: right;
        font-variant-numeric: tabular-nums;
        outline: none;
        padding: 0;
    }

        .mo-input input[type=number]::-webkit-outer-spin-button,
        .mo-input input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .mo-input input[type=number] {
            -moz-appearance: textfield;
            appearance: textfield;
        }

        .mo-input input:disabled { color: var(--mo-text-3); }

.mo-unit {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--mo-text-2);
}

.mo-step {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

    .mo-step button {
        width: 34px;
        height: 38px;
        border: 0;
        border-radius: 7px;
        background: var(--mo-surface-2);
        color: var(--mo-text-2);
        font-family: inherit;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        transition: background .12s, color .12s;
    }

        .mo-step button:hover {
            background: var(--mo-line-strong);
            color: var(--mo-text);
        }

.mo-field.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* 수량 퀵칩 */
.mo-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

    .mo-chips button {
        height: 34px;
        border: 1px solid var(--mo-line);
        border-radius: 7px;
        background: transparent;
        color: var(--mo-text-2);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: border-color .15s, color .15s, background .15s;
    }

        .mo-chips button:hover {
            background: var(--mo-surface);
            border-color: var(--mo-line-strong);
            color: var(--mo-text);
        }

/* 요약 */
.mo-summary {
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--mo-surface);
    border: 1px solid var(--mo-line);
}

.mo-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--mo-text-2);
}

    .mo-summary-row strong {
        color: var(--mo-text);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.mo-summary-row--total {
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid var(--mo-line);
    font-size: 15px;
}

    .mo-summary-row--total strong { font-size: 19px; font-weight: 700; }

.mo-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(240, 68, 82, .12);
    color: var(--c-red);
    font-size: 13.5px;
    line-height: 1.5;
}

/* ─── 푸터 / 확인 단계 ─── */
.mo-foot {
    flex: 0 0 auto;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--mo-line);
}

.mo-submit {
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 11px;
    color: var(--on-accent);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .12s, opacity .12s;
}

    .mo-submit:hover { filter: brightness(1.08); }

    .mo-submit:disabled {
        opacity: .5;
        cursor: default;
        filter: none;
    }

.mo-submit--buy { background: var(--mo-buy); }
.mo-submit--sell { background: var(--mo-sell); }

.mo-confirm {
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--mo-line-strong);
    border-radius: 11px;
    background: var(--mo-surface);
}

.mo-confirm-text {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mo-text);
}

    .mo-confirm-text b { font-weight: 700; }

.mo-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 6px;
}

.mo-btn-ghost,
.mo-btn-primary {
    height: 44px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}

.mo-btn-ghost {
    background: transparent;
    border-color: var(--mo-line-strong);
    color: var(--mo-text-2);
}

    .mo-btn-ghost:hover { color: var(--mo-text); }

.mo-btn-primary {
    background: var(--mo-buy);
    color: var(--on-accent);
}

    .mo-btn-primary.is-sell { background: var(--mo-sell); }

/* ─── 체결 알림 토스트 (패널이 닫혀 있어도 보인다) ─── */
.mo-fill-toasts {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.mo-fill-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 340px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-lighter);
    border: 1px solid var(--mo-line-strong);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    color: var(--mo-text);
    font-size: 14px;
    animation: mo-fill-in .24s ease;
    pointer-events: auto;
}

.mo-fill-badge {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--on-accent);
}

    .mo-fill-badge.is-buy { background: var(--mo-buy); }
    .mo-fill-badge.is-sell { background: var(--mo-sell); }

.mo-fill-body {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.45;
}

.mo-fill-name {
    font-weight: 700;
}

.mo-fill-detail {
    color: var(--mo-text-2);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

@keyframes mo-fill-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* 패널 안쪽 짧은 알림 */
.mo-toast {
    margin: 0;
    padding: 10px 12px;
    border-radius: 9px;
    background: #eef0f3;
    color: #16181c;
    font-size: 12px;
    font-weight: 600;
}

    .mo-toast.is-error {
        background: rgba(240, 68, 82, .14);
        color: var(--c-red);
    }

/* ─── 화면 폭별 (포트폴리오 패널과 같은 폭) ─── */
@media (max-width: 1799px) {
    .mo-panel.is-open {
        width: 440px;
        min-width: 440px;
    }

    .mo-inner { width: 440px; }
}

@media (max-width: 1599px) {
    .mo-panel.is-open {
        width: 400px;
        min-width: 400px;
    }

    .mo-inner { width: 400px; }
}

/* ─── 좁은 화면 ─── */
@media (max-width: 1499px) {
    .mo-panel.is-open {
        width: 360px;
        min-width: 360px;
    }

    .mo-inner {
        width: 360px;
    }

    .mo-scroll {
        padding: 12px 13px 14px;
        gap: 12px;
    }

    .mo-head, .mo-foot {
        padding-left: 13px;
        padding-right: 13px;
    }

    .mo-account {
        margin-left: 13px;
        margin-right: 13px;
    }
}

/* ============================================================================
   모의투자 포트폴리오 패널 (.mp-*)

   주문 패널(.mo-panel) 안에 겹쳐 있다가, 열리면 오른쪽에서 밀고 들어와 주문창을 덮는다.
   컬럼을 하나 더 만들지 않으므로 차트를 밀어내지 않는다. 폭은 주문 패널을 그대로 따른다.
   ============================================================================ */

.mp-panel {
    /* 색은 호가처럼 또렷하게 — 예전 파스텔(연보라·연하늘)은 흐리고 멍해 보였다 (2026-10-19) */
    --mp-stock: #2f6bff;
    --mp-cash: #00b26b;
    --mp-frozen: #8b939e;
    --mp-us: #00a3ff;
    --mp-coin: #ffa000;
    --mp-up: var(--mo-buy);     /* 호가 빨강 · 파랑과 같은 색 */
    --mp-down: var(--mo-sell);
    --mp-card-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28);

    position: absolute;
    inset: 0;
    z-index: 6;   /* 랭킹(5) 위 */
    overflow: hidden;
    background: var(--mo-bg);
    box-shadow: -12px 0 28px rgba(0, 0, 0, .55);
    transform: translateX(100%);
    visibility: hidden;
    /* 닫힐 때는 다 미끄러져 나간 뒤에 숨긴다 */
    transition: transform .24s ease, visibility 0s linear .24s;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
                 "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
    color: var(--mo-text);
}

    .mp-panel.is-open {
        transform: none;
        visibility: visible;
        transition: transform .24s ease, visibility 0s;
    }

.mp-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
    .mp-panel { transition: none; }
}

.mp-panel .mo-up { color: var(--mp-up); }
.mp-panel .mo-down { color: var(--mp-down); }

.mp-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 15px;
    border-bottom: 1px solid var(--mo-line);
}

.mp-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.mp-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text-2);
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .mp-close:hover {
        background: var(--mo-surface-2);
        color: var(--mo-text);
    }

.mp-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 24px;
    /* 기본 스크롤바(15px)가 좁은 폭을 잡아먹는다 — 호가창과 같은 얇은 막대 */
    scrollbar-width: thin;
    scrollbar-color: var(--bg-lighter) transparent;
}

    .mp-scroll::-webkit-scrollbar { width: 3px; }
    .mp-scroll::-webkit-scrollbar-track { background: transparent; }
    .mp-scroll::-webkit-scrollbar-thumb { background: var(--bg-lighter); border-radius: 2px; }

/* ─── 요약 ─── */
.mp-hero {
    padding: 18px 18px 16px;
    border: 1px solid var(--mo-line-strong);   /* 카드와 같은 선명한 테두리 (2026-10-14) */
    border-radius: 14px;
    box-shadow: var(--mp-card-shadow);
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-dark) 100%);
}

.mp-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mp-hero-label {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mo-text-2);
}

.mp-rank {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(240, 192, 64, .14);
    color: var(--gold-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.mp-hero-total {
    display: block;
    margin-top: 6px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.mp-hero-diff {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--mo-surface-2);
    color: var(--mo-text-2);
    font-size: 15.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    .mp-hero-diff:empty { display: none; }
    .mp-hero-diff.mo-up { background: rgba(255, 90, 90, .14); }
    .mp-hero-diff.mo-down { background: rgba(110, 155, 255, .15); }

/* 손익 줄 — 패널을 열면 총액 다음으로 읽히게 크게 (2026-10-14) */
.mp-hero-pl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 8px;
}

    .mp-hero-pl .mp-hero-diff {
        margin-top: 0;
        font-size: 17px;
    }

.mp-hero-base {
    font-size: 13px;
    color: var(--mo-text-3);
}

    .mp-hero-base:empty { display: none; }

/* 밝은 테마는 그림자를 옅게 */
:root[data-theme="light"] .mp-panel { --mp-card-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06); }

/* ─── 영역 카드 (2026-10-14) ───
   요약(히어로) · 자산 구성 · 보유 종목 · 업종 비중을 카드로 나눠, 열자마자 어디를 읽을지 구분되게 한다.
   제목 앞 색 막대 = 영역 색 (자산 구성 초록 · 보유 종목 보라 · 업종 비중 노랑) */
.mp-card {
    margin-top: 16px;
    padding: 16px 16px 14px;
    border: 1px solid var(--mo-line-strong);   /* 바탕과 확실히 갈리게 한 단계 진한 선 + 그림자 (2026-10-14) */
    border-radius: 14px;
    background: var(--mo-surface);
    box-shadow: var(--mp-card-shadow);
}

    .mp-card.is-asset { --mp-accent: var(--mp-cash); }
    .mp-card.is-hold { --mp-accent: var(--mp-stock); }
    .mp-card.is-sector { --mp-accent: var(--mp-coin); }

    .mp-card[hidden] { display: none; }
    .mp-section.mp-card { margin-top: 16px; }   /* 카드 사이 간격 — 영역이 한눈에 갈리게 */

    .mp-card > .mp-section-head {
        margin: 0 0 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--mo-line);
    }

    .mp-card .mp-section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* 제목은 한 줄 그대로, 안내 문구가 줄어든다 (보유 종목 제목 옆 '26 · 수익 4 / 손실 22' 때문에 제목이 꺾이던 것) */
    .mp-card > .mp-section-head { align-items: center; }

    .mp-card .mp-section-hint {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
    }

    .mp-card .mp-section-count { white-space: nowrap; }

        .mp-card .mp-section-title::before {
            content: '';
            flex: 0 0 auto;
            width: 4px;
            height: 1em;
            border-radius: 2px;
            background: var(--mp-accent, var(--mo-line-strong));
        }

    /* 카드 안 마지막 행은 밑줄 없이 */
    .mp-card .mp-rows > .mp-row:last-child { border-bottom: 0; }

    /* 카드 안의 선택 업종 상세는 바탕을 한 단계 낮춰 구분 */
    .mp-card .mp-sd { background: var(--mo-bg); }

/* 보유 종목 더보기 (2026-10-14) */
.mp-more {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--mo-line);
    border-radius: 10px;
    background: transparent;
    color: var(--mo-text-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .mp-more:hover {
        background: var(--mo-surface-2);
        color: var(--mo-text);
    }

    .mp-more[hidden],
    .mp-sectors[hidden] { display: none; }

/* 섹션 제목 옆 개수 */
.mp-section-count {
    margin-left: 4px;
    font-size: .85em;
    font-weight: 700;
    color: var(--mo-text-3);
}

    .mp-section-count:empty { display: none; }

/* 참고 문구 — 맨 아래로 모은다 */
.mp-notes {
    margin-top: 18px;
    padding: 0 4px;
}

    .mp-notes .mp-feeline,
    .mp-notes .mp-note { margin: 0 0 6px; padding-top: 0; border-top: 0; }

/* 자산 구성 막대: 국내주식 / 해외주식 / 가상자산 / 현금 / 주문중 */
.mp-assetbar {
    display: flex;
    height: 10px;
    margin-top: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--mo-surface-2);
}

    .mp-assetbar i {
        display: block;
        width: 0;
        height: 100%;
        transition: width .3s ease;
    }

.mp-assetbar .is-stock, .mp-key.is-stock { background: var(--mp-stock); }
.mp-assetbar .is-cash, .mp-key.is-cash { background: var(--mp-cash); }
.mp-assetbar .is-frozen, .mp-key.is-frozen { background: var(--mp-frozen); }
.mp-assetbar .is-us, .mp-key.is-us { background: var(--mp-us); }
.mp-assetbar .is-coin, .mp-key.is-coin { background: var(--mp-coin); }
.mp-stats > div[hidden] { display: none; }

.mp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 0;
}

    .mp-stats > div { min-width: 0; }

    .mp-stats dt {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13.5px;
        color: var(--mo-text-2);
    }

    .mp-stats dd {
        margin: 4px 0 0;
        font-size: 15.5px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.mp-key {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* ─── 섹션 ─── */
.mp-section {
    margin-top: 24px;
}

.mp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.mp-section-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--mo-text);
}

.mp-section-hint {
    font-size: 13px;
    color: var(--mo-text-3);
    white-space: nowrap;
}

/* ─── 3D 파이 ─── */
.mp-pie {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    user-select: none;
}

.mp-part {
    cursor: pointer;
    transition: filter .15s;
}

.mp-part-top {
    stroke: rgba(0, 0, 0, .45);
    stroke-width: 1;
    stroke-linejoin: round;
}

/* 단면 테두리 — 윗면·옆면과 닿는 모서리를 또렷하게 (2026-10-19) */
.mp-part-wall {
    stroke: rgba(0, 0, 0, .35);
    stroke-width: .8;
    stroke-linejoin: round;
}

    .mp-part-top.is-selected {
        stroke: var(--fg-a92);
        stroke-width: 1.6;
    }

.mp-part.is-hot {
    filter: brightness(1.2);
}

.mp-lbl {
    cursor: pointer;
}

.mp-lbl-line {
    stroke-width: 1.4;
    opacity: .7;
    transition: opacity .15s;
}

.mp-lbl.is-selected .mp-lbl-line,
.mp-lbl.is-hot .mp-lbl-line {
    stroke-width: 2.2;
    opacity: 1;
}

.mp-lbl-dot {
    fill: var(--text-primary);
    stroke: rgba(0, 0, 0, .55);
    stroke-width: 1;
}

.mp-lbl-name {
    fill: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

.mp-lbl.is-selected .mp-lbl-name,
.mp-lbl.is-hot .mp-lbl-name {
    fill: var(--text-primary);
}

.mp-lbl-pct {
    font-size: 15.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ─── 업종 목록 ─── */
.mp-sectors {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.mp-sector {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--mo-line);
    border-radius: 10px;
    background: var(--mo-surface);
    color: var(--mo-text);
    font: inherit;
    font-size: 14.5px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

    .mp-sector:hover,
    .mp-sector.is-hot {
        background: var(--mo-surface-2);
    }

    .mp-sector.is-selected {
        border-color: var(--mp-sc);
        background: var(--mo-surface-2);
        background: color-mix(in srgb, var(--mp-sc) 16%, var(--bg-dark));
    }

.mp-sector-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.mp-sector-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.mp-sector-pct {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─── 선택 업종 상세 ─── */
.mp-sd {
    margin-top: 12px;
    padding: 14px 12px 4px;
    border: 1px solid var(--mo-line);
    border-left: 3px solid var(--mp-sc, var(--mo-line-strong));
    border-radius: 12px;
    background: var(--mo-surface);
    animation: mpSdIn .18s ease;
}

@keyframes mpSdIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.mp-sd-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-sd-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.mp-sd-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 800;
}

.mp-sd-count {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--mo-surface-2);
    color: var(--mo-text-2);
    font-size: 12.5px;
    font-weight: 700;
}

.mp-sd-amt {
    margin-left: auto;
    font-size: 16.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mp-sd-pl {
    margin-top: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mo-line);
    font-size: 14px;
    font-weight: 600;
    color: var(--mo-text-2);
    font-variant-numeric: tabular-nums;
}

.mp-sd-sep {
    margin: 0 6px;
    color: var(--mo-text-3);
}

.mp-sd-members {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--mo-text-3);
}

.mp-sd .mp-row:last-child { border-bottom: 0; }

/* ─── 보유 종목 ─── */
.mp-thead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 124px;
    gap: 0 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--mo-line);
    font-size: 12.5px;
    color: var(--mo-text-3);
}

    .mp-thead[hidden] { display: none; }
    .mp-thead span:nth-child(n+2) { text-align: right; }

.mp-row {
    position: relative;
    display: grid;
    /* 두 줄 (2026-10-14): 종목명·수량/평단/현재가/비중 ─ 평가금액·손익 */
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0 10px;
    align-items: center;
    padding: 12px 0 15px;
    border-bottom: 1px solid var(--mo-line);
}

    .mp-row.is-clickable {
        cursor: pointer;
        margin: 0 -10px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 10px;
        transition: background .12s;
    }

        .mp-row.is-clickable:hover {
            background: var(--mo-surface-2);
        }

.mp-c1, .mp-c2, .mp-c3 { min-width: 0; }
.mp-c2, .mp-c3 { text-align: right; }
.mp-c2 .mp-row-sub { font-size: 13px; }

.mp-row-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 16.5px;
    font-weight: 700;
}

.mp-row-nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-row-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

    .mp-row-dot[hidden] { display: none; }

.mp-row-sub {
    margin-top: 3px;
    font-size: 13.5px;
    color: var(--mo-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-row-price {
    font-size: 15.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mp-row-eval {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mp-row-pl {
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 핵심만 보이는 행 (2026-10-14): 오른쪽 위 = 수익률(색·굵게), 아래 = 평가금액(회색) */
.mp-row-eval.mp-row-rate {
    font-size: 16.5px;
    font-weight: 800;
}

.mp-row-pl.mp-row-amt {
    font-weight: 500;
    color: var(--mo-text-2);
}

/* 행 아래 얇은 막대 = 포트폴리오 안에서 이 종목 비중 (색은 업종 색) */
.mp-row-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 5px;
    height: 3px;
    border-radius: 2px;
    background: var(--fg-a05);
    overflow: hidden;
}

    .mp-row-bar i {
        display: block;
        width: 0;
        height: 100%;
        border-radius: 2px;
        opacity: .85;
        transition: width .3s ease;
    }

.mp-empty, .mp-state {
    margin: 14px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--mo-text-3);
}

/* ─── 좁을 때: 현재가·평단을 둘째 줄로 내린다 ───
   담는 상자 폭이 종목명·수량이 잘릴 만큼 줄면 3칸을 2칸 + 한 줄로 바꾼다.
   화면 폭이 아니라 상자 폭을 보므로 보유 종목 목록과 (더 좁은) 업종 카드가 각자 맞춰진다.
   373px = 첫 칸 최소 139("1,000주 · 비중 86.8%" 127 + 여유) + 현재가 90 + 손익 124 + 간격 20 */
.mp-section,
.mp-sd {
    container-type: inline-size;
}

/* 두 줄 행이라 좁은 폭 전용 배치는 필요 없다 (2026-10-14) */

/* ─── 화면 폭별 ─── */
@media (max-width: 1599px) {
    .mp-scroll { padding: 14px 14px 18px; }

    .mp-head {
        padding-left: 14px;
        padding-right: 14px;
    }

    .mp-hero { padding: 16px 14px 14px; }
    .mp-hero-total { font-size: 30px; }
    .mp-stats dd { font-size: 14px; }

    .mp-row-name { font-size: 15.5px; }
    .mp-row-eval { font-size: 15px; }
    .mp-row-sub, .mp-row-pl { font-size: 13px; }
}



/* ─── 주문내역 (대기 / 완료) ───
   지정가는 서버가 나중에 채우므로 "내가 뭘 걸어놨는지"가 보여야 한다. */
.mo-orders {
    display: flex;
    flex-direction: column;
}

/* 대기/완료 탭과 새로고침을 한 줄에 */
.mo-orders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--mo-line);
}

.mo-otabs {
    display: flex;
    gap: 14px;
}

.mo-otab {
    position: relative;
    padding: 10px 1px 11px;
    border: 0;
    background: transparent;
    color: var(--mo-text-3);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s;
}

    .mo-otab:hover { color: var(--mo-text-2); }

    .mo-otab.is-active {
        color: var(--mo-text);
    }

        .mo-otab.is-active::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: var(--mo-text);
            border-radius: 1px;
        }

.mo-otab-count {
    margin-left: 4px;
    font-style: normal;
    font-size: 13.5px;
    color: var(--mo-buy);
}

.mo-olist {
    display: flex;
    flex-direction: column;
}

/* 날짜 구분 */
.mo-odate {
    padding: 12px 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mo-text-3);
}

.mo-orow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mo-line);
}

    .mo-orow:last-child { border-bottom: 0; }

.mo-orow-day {
    flex: 0 0 62px;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

.mo-orow-date {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mo-text);
}

.mo-orow-time {
    margin-top: 2px;
    font-size: 12px;
    color: var(--mo-text-3);
}

.mo-orow-body {
    flex: 1 1 auto;
    min-width: 0;
}

.mo-orow-name {
    font-size: 15.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mo-orow-detail {
    margin-top: 3px;
    font-size: 14px;
    color: var(--mo-text-2);
    font-variant-numeric: tabular-nums;
}

.mo-orow-state {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
}

    .mo-orow-state.is-buy { color: var(--mo-buy); }
    .mo-orow-state.is-sell { color: var(--mo-sell); }
    .mo-orow-state.is-cancel { color: var(--mo-text-3); }

.mo-orow-cancel {
    flex: 0 0 auto;
    align-self: center;
    padding: 8px 12px;
    border: 1px solid var(--mo-line-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text-2);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

    .mo-orow-cancel:hover {
        color: var(--on-accent);
        border-color: var(--mo-buy);
        background: var(--mo-buy);
    }

    .mo-orow-cancel:disabled {
        opacity: .5;
        cursor: default;
    }

/* 대기 주문의 정정·취소 버튼 (2026-10-14) */
.mo-orow-acts {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .mo-orow-acts .mo-orow-cancel { align-self: stretch; }

    .mo-orow-modify:hover,
    .mo-orow-modify.is-on {
        color: var(--mo-text);
        border-color: var(--mo-text-2);
        background: var(--mo-surface-2);
    }

/* 주문 정정 입력 (목록 안에서 펼침) */
.mo-oedit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin: 0 0 4px;
    padding: 12px;
    border: 1px solid var(--mo-line-strong);
    border-radius: 10px;
    background: var(--mo-surface-2);
}

.mo-oedit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mo-oedit-label {
    font-size: 13px;
    color: var(--mo-text-3);
}

.mo-oedit-input {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--mo-line-strong);
    border-radius: 8px;
    background: var(--mo-surface);
    color: var(--mo-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

    .mo-oedit-input:focus {
        outline: none;
        border-color: var(--mo-buy);
        box-shadow: 0 0 0 3px var(--mo-focus);
    }

.mo-oedit-sum,
.mo-oedit-err,
.mo-oedit-hint,
.mo-oedit-btns { grid-column: 1 / -1; }

.mo-oedit-sum {
    font-size: 13.5px;
    color: var(--mo-text-2);
    font-variant-numeric: tabular-nums;
}

.mo-oedit-err {
    font-size: 13.5px;
    color: var(--mo-buy);
}

.mo-oedit-hint {
    margin: 0;
    font-size: 13px;
    color: var(--mo-text-3);
}

.mo-oedit-btns {
    display: flex;
    gap: 8px;
}

.mo-oedit-close,
.mo-oedit-ok {
    padding: 9px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.mo-oedit-close {
    flex: 0 0 auto;
    border: 1px solid var(--mo-line-strong);
    background: transparent;
    color: var(--mo-text-2);
}

.mo-oedit-ok {
    flex: 1 1 auto;
    border: 0;
    color: #fff;
}

    .mo-oedit-ok.is-buy { background: var(--mo-buy); }
    .mo-oedit-ok.is-sell { background: var(--mo-sell); }
    .mo-oedit-ok:disabled { opacity: .6; cursor: default; }

.mo-oempty {
    margin: 18px 0 6px;
    text-align: center;
    font-size: 14px;
    color: var(--mo-text-3);
}

/* 우측 사이드바 주문 서브메뉴 항목이 좁은 폭에서 두 줄로 깨지지 않게 한다. */
#order-submenu .item-text {
    white-space: nowrap;
}

/* ─── 장 상태 배지 ───
   지정가가 왜 대기만 하는지 알 수 있게 장중/마감을 헤더에 드러낸다. */
/* 제목 + 거래구간 배지 — 배지를 제목 아래 줄에 두어 제목이 절대 두 줄로 꺾이지 않게 한다 */
.mo-head-l {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}
    .mo-head-l .mo-title { white-space: nowrap; line-height: 1.15; }

.mo-market {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -.01em;
}

    .mo-market.is-open {
        background: rgba(34, 197, 94, .16);
        color: var(--c-green);
    }

    .mo-market.is-closed {
        background: var(--mo-surface-2);
        color: var(--mo-text-3);
    }

/* 대기 목록 상단 안내 */
.mo-onote {
    margin: 10px 0 2px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--mo-surface);
    border: 1px solid var(--mo-line);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mo-text-2);
}

.mo-confirm-warn {
    display: inline-block;
    margin-top: 6px;
    color: var(--mo-text-3);
    font-size: 12.5px;
    line-height: 1.5;
}

/* 프리마켓 (08:00~09:00) — 일부 종목만 거래된다 */
.mo-market.is-pre {
    background: rgba(240, 192, 64, .16);
    color: var(--gold-text);
}

/* 애프터마켓 (15:30~20:00) — 대부분 종목이 거래된다 */
.mo-market.is-after {
    background: rgba(125, 140, 255, .18);
    color: var(--c-blue);
}

/* ============================================================================
   마켓 뎁스 (.mo-depth / .md-*)
   호가 10단계 누적 잔량. 색은 호가창과 같게 매수 빨강 / 매도 파랑.
   그라데이션 영역 + 얇게 빛나는 선, 눈금 숫자 없이 점선 격자만 둔다.
   ============================================================================ */
.mo-depth {
    --md-bid: #ff5a5f;
    --md-ask: #4d8dff;
    padding-top: 16px;
    border-top: 1px solid var(--mo-line);
}

.mo-depth-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.mo-depth-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--mo-text);
}

.mo-depth-spread {
    font-size: 12.5px;
    color: var(--mo-text-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

    .mo-depth-spread b {
        font-weight: 600;
        color: var(--mo-text-2);
    }

/* 잔량 비율 */
.mo-depth-ratio {
    margin-bottom: 8px;
}

.mo-depth-ratio-top,
.mo-depth-ratio-sum {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.mo-depth-ratio-top {
    align-items: baseline;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
}

    .mo-depth-ratio-top .is-bid { color: var(--md-bid); }
    .mo-depth-ratio-top .is-ask { color: var(--md-ask); }

    .mo-depth-ratio-top b {
        font-size: 15px;
        font-weight: 800;
    }

.mo-depth-bar {
    display: flex;
    gap: 3px;
    height: 6px;
}

    .mo-depth-bar i {
        display: block;
        flex: 1 1 0;
        min-width: 6px;
        height: 100%;
        border-radius: 999px;
        transition: flex-grow .45s ease;
    }

    .mo-depth-bar .is-bid { background: linear-gradient(90deg, rgba(255, 90, 95, .45), var(--md-bid)); }
    .mo-depth-bar .is-ask { background: linear-gradient(90deg, var(--md-ask), rgba(77, 141, 255, .45)); }

.mo-depth-ratio-sum {
    margin-top: 6px;
    font-size: 12px;
    color: var(--mo-text-3);
}

/* 그래프 */
.mo-depth-chart {
    position: relative;
    margin: 0 -4px;
}

#moDepthSvg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    cursor: crosshair;
    user-select: none;
}

    /* 틱마다 다시 그리므로 자식이 아닌 svg 자체가 이벤트를 받는다(좌표로 가격대를 찾는다) */
    #moDepthSvg * { pointer-events: none; }

    #moDepthSvg.is-empty {
        height: 0;
        min-height: 150px;
    }

.md-grid {
    stroke: var(--fg-a06);
    stroke-width: 1;
    stroke-dasharray: 2 5;
}

.md-base {
    stroke: var(--fg-a14);
    stroke-width: 1;
}

.md-xtext {
    fill: var(--mo-text-3);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

    .md-xtext.is-best {
        fill: var(--mo-text-2);
        font-weight: 600;
    }

.md-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

    .md-line.md-bid {
        stroke: var(--md-bid);
        filter: drop-shadow(0 0 5px rgba(255, 90, 95, .45));
    }

    .md-line.md-ask {
        stroke: var(--md-ask);
        filter: drop-shadow(0 0 5px rgba(77, 141, 255, .45));
    }

.md-mid {
    stroke: var(--fg-a26);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.md-pill {
    fill: var(--bg-lighter);   /* 테마 토큰 — 흰색 테마에서 글자가 가려지지 않게 */
    stroke: var(--fg-a16);
    stroke-width: 1;
}

.md-pill-text {
    fill: var(--text-primary);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 마우스를 올린 가격대까지 쌓인 구간 · 십자선 · 점 */
.md-hot-area.md-bid { fill: var(--md-bid); fill-opacity: .18; }
.md-hot-area.md-ask { fill: var(--md-ask); fill-opacity: .18; }

.md-cross {
    stroke: var(--fg-a38);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.md-dot {
    stroke: var(--bg-dark);
    stroke-width: 2;
}

    .md-dot.md-bid { fill: var(--md-bid); }
    .md-dot.md-ask { fill: var(--md-ask); }

/* 종목이 바뀌어 처음 그릴 때만 바닥에서 자라 오른다 */
#moDepthSvg.is-grow .md-area,
#moDepthSvg.is-grow .md-line {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: mdGrow .6s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes mdGrow {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #moDepthSvg.is-grow .md-area,
    #moDepthSvg.is-grow .md-line { animation: none; }
}

/* 툴팁 — 반투명 유리 카드 */
.mo-depth-tip {
    position: absolute;
    z-index: 2;
    min-width: 136px;
    padding: 8px 11px 9px;
    border-radius: 10px;
    border: 1px solid var(--fg-a12);
    background: rgba(var(--bg-light-rgb), .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
    font-size: 12px;
    color: var(--mo-text-3);
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    font-variant-numeric: tabular-nums;
}

.md-tip-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}

    .md-tip-head i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .md-tip-head i.is-bid { background: var(--md-bid); box-shadow: 0 0 6px var(--md-bid); }
    .md-tip-head i.is-ask { background: var(--md-ask); box-shadow: 0 0 6px var(--md-ask); }

.md-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    line-height: 1.6;
}

    .md-tip-row b {
        font-weight: 600;
        color: var(--mo-text);
    }

.mo-depth-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    font-size: 13.5px;
    color: var(--mo-text-3);
}

    .mo-depth-empty[hidden] { display: none; }

/* ============================================================================
   헤더 우측: 랭킹 버튼
   ============================================================================ */
.mo-head-r {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.mo-rank-btn { white-space: nowrap; }
/* 폭이 좁거나 글자를 키웠을 때: 버튼 글자를 숨기고 아이콘만 (title 로 뜻을 알린다) */
.mo-head { container-type: inline-size; }
@container (max-width: 350px) {
    .mo-rank-label { display: none; }
    .mo-rank-btn { padding: 0 8px; gap: 0; }
}

.mo-rank-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(245, 196, 81, .35);
    border-radius: 8px;
    background: transparent;
    color: var(--gold-text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

    .mo-rank-btn:hover,
    .mo-rank-btn[aria-expanded="true"] {
        background: rgba(245, 196, 81, .12);
        border-color: rgba(245, 196, 81, .6);
    }

/* 포트폴리오 헤더: 뒤로 가기(랭킹에서 왔을 때) · 다른 참가자 이름 */
.mp-head-l {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

    .mp-head-l .mp-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.mp-back {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-left: -8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text-2);
    cursor: pointer;
}

    .mp-back[hidden] { display: none; }

    .mp-back:hover {
        background: var(--mo-surface-2);
        color: var(--mo-text);
    }

button.mp-rank {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}

    button.mp-rank:hover { background: rgba(240, 192, 64, .26); }

/* ============================================================================
   모의투자 랭킹 패널 (.mr-*)
   주문 패널 위를 덮는 오버레이. 참가자 포트폴리오(.mp-panel, z 6)가 이 위에 열린다.
   ============================================================================ */
.mr-panel {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    background: var(--mo-bg);
    color: var(--mo-text);
    box-shadow: -12px 0 28px rgba(0, 0, 0, .55);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .24s ease, visibility 0s linear .24s;
}

    .mr-panel.is-open {
        transform: none;
        visibility: visible;
        transition: transform .24s ease, visibility 0s;
    }

@media (prefers-reduced-motion: reduce) {
    .mr-panel { transition: none; }
}

.mr-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mr-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 18px 20px 15px;
    border-bottom: 1px solid var(--mo-line);
}

.mr-head-l {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.mr-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    white-space: nowrap;
}

.mr-season {
    font-size: 13px;
    color: var(--mo-text-3);
    white-space: nowrap;
}

.mr-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text-2);
    cursor: pointer;
}

    .mr-close:hover {
        background: var(--mo-surface-2);
        color: var(--mo-text);
    }

.mr-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 20px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-lighter) transparent;
}

    .mr-scroll::-webkit-scrollbar { width: 3px; }
    .mr-scroll::-webkit-scrollbar-thumb { background: var(--bg-lighter); border-radius: 2px; }

.mr-basis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--mo-text-3);
}

/* ─── 시상대 ─── */
.mr-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    margin-bottom: 16px;
}

    .mr-podium:empty { display: none; }

.mr-pod {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

    .mr-pod.is-vacant { cursor: default; }

.mr-pod-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
}

    .mr-pod-name .mr-nm {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.mr-pod-rate {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mr-pod-block {
    display: grid;
    place-items: center;
    width: 100%;
    margin-top: 8px;
    border-radius: 10px;
    transition: filter .15s;
}

.mr-pod-no {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}

.mr-pod.is-1 .mr-pod-block { height: 76px; background: rgba(245, 196, 81, .15); }
.mr-pod.is-1 .mr-pod-no { background: rgba(245, 196, 81, .35); color: var(--gold-text); }
.mr-pod.is-2 .mr-pod-block { height: 56px; background: var(--fg-a07); }
.mr-pod.is-2 .mr-pod-no { background: var(--fg-a16); color: var(--text-primary); }
.mr-pod.is-3 .mr-pod-block { height: 44px; background: rgba(240, 140, 100, .14); }
.mr-pod.is-3 .mr-pod-no { background: rgba(240, 140, 100, .32); color: var(--c-orange); }

.mr-pod:not(.is-vacant):hover .mr-pod-block { filter: brightness(1.3); }

/* ─── 아바타 (기본 실루엣) ─── */
.mr-avatar {
    display: inline-grid;
    place-items: end center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
}

    .mr-avatar svg {
        width: 84%;
        height: 84%;
        fill: var(--fg-a90);
    }

    .mr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
    .mr-avatar.has-img svg { display: none; }

    .mr-avatar.is-md { width: 52px; height: 52px; }

    .mr-avatar.is-lg {
        width: 64px;
        height: 64px;
        box-shadow: 0 0 0 3px rgba(245, 196, 81, .6);
    }

/* ─── 내 순위 ─── */
.mr-me {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--ob-up-rgb), .4);
    border-radius: 12px;
    background: rgba(var(--ob-up-rgb), .07);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}

    .mr-me[hidden] { display: none; }
    .mr-me:hover { background: rgba(var(--ob-up-rgb), .13); }

.mr-me-label {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--mo-text-2);
}

/* 순위 밖 (매매 전 · 운영 정책 위반) — 빨간 강조 없이 한 줄로 (2026-10-19) */
.mr-me.is-off {
    align-items: center;
    border-color: var(--mo-line-strong);
    background: var(--mo-surface);
    cursor: default;
}
    .mr-me.is-off:hover { background: var(--mo-surface); }
.mr-me-state { white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--mo-text); }
    .mr-me-state.is-bad { color: var(--mo-buy); }
.mr-me-note {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--mo-text-3);
}

.mr-me-rank {
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mr-me-of {
    font-size: 13px;
    color: var(--mo-text-3);
}

.mr-me-rate {
    margin-left: auto;
    font-size: 15.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─── 4위부터 목록 ─── */
.mr-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mr-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 6px;
    border: 0;
    border-bottom: 1px solid var(--mo-line);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

.mr-list li:last-child .mr-row { border-bottom: 0; }
.mr-row:hover { background: var(--mo-surface); }
.mr-row.is-me { background: rgba(var(--ob-up-rgb), .08); }

.mr-row-no {
    flex: 0 0 26px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--mo-text-2);
    font-variant-numeric: tabular-nums;
}

.mr-row-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15.5px;
    font-weight: 600;
}

    .mr-row-name .mr-nm {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.mr-row-rate {
    flex: 0 0 auto;
    font-size: 15.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mr-chip {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 17px;
}

    .mr-chip.is-me { background: var(--mo-buy); color: var(--on-accent); }
    .mr-chip.is-win { background: rgba(245, 196, 81, .18); color: var(--gold-text); }

/* ─── 페이지 ─── */
.mr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

    .mr-pager[hidden] { display: none; }

.mr-pg {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .mr-pg:hover:not(:disabled):not(.is-active) {
        background: var(--mo-surface-2);
        color: var(--mo-text);
    }

    .mr-pg.is-active {
        background: #f4f5f6;
        color: #111;
        cursor: default;
    }

    .mr-pg.is-arrow { font-size: 19px; }

    .mr-pg:disabled {
        opacity: .3;
        cursor: default;
    }

.mr-empty {
    margin: 48px 0;
    text-align: center;
    font-size: 14px;
    color: var(--mo-text-3);
}

/* ============================================================================
   주문 요약 — 수수료·세금 줄
   ============================================================================ */
.mo-summary-row--fee strong {
    font-weight: 600;
    color: var(--mo-text-2);
}

.mo-confirm-sub {
    font-size: 12.5px;
    color: var(--mo-text-3);
}

/* ============================================================================
   참가 안내 (.mj-*)
   주문 패널 위에 뜨는 카드. 참가하기 전 투자금·수수료·세금·규칙을 보여준다.
   ============================================================================ */
.mj-backdrop {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: mjFade .18s ease;
}

    .mj-backdrop[hidden] { display: none; }

.mj-card {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 22px 20px 18px;
    border: 1px solid var(--mo-line-strong);
    border-radius: 16px;
    background: var(--bg-dark);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
    animation: mjUp .24s cubic-bezier(.2, .8, .2, 1);
}

@keyframes mjFade { from { opacity: 0; } }
@keyframes mjUp { from { opacity: 0; transform: translateY(10px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
    .mj-backdrop, .mj-card { animation: none; }
}

.mj-lead {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--ob-up-rgb), .15);
    color: var(--c-red);
    font-size: 12.5px;
    font-weight: 700;
}

    .mj-lead[hidden] { display: none; }

.mj-title {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 800;
    color: var(--mo-text);
}

.mj-cash {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(245, 196, 81, .28);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245, 196, 81, .15), rgba(245, 196, 81, .04));
}

.mj-cash-label {
    font-size: 12.5px;
    color: var(--mo-text-2);
}

.mj-cash-amt {
    font-size: 26px;
    font-weight: 800;
    color: var(--gold-text);
    font-variant-numeric: tabular-nums;
}

.mj-cash-note {
    font-size: 12px;
    color: var(--mo-text-3);
}

.mj-rules {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
}

    .mj-rules > div {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 10px;
        align-items: baseline;
    }

    .mj-rules dt {
        font-size: 13px;
        font-weight: 700;
        color: var(--mo-text-2);
    }

    .mj-rules dd {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.45;
        color: var(--mo-text);
    }

.mj-example {
    margin: 14px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--mo-surface-2);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mo-text-2);
}

.mj-agree {
    display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 2px; padding: 10px 12px;
    border-radius: 10px; background: var(--bg-lighter); border: 1px solid var(--border-subtle);
    font-size: calc(12px * var(--fs-scale, 1)); line-height: 1.5; color: var(--text-secondary); cursor: pointer;
}
    .mj-agree input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--red-up); }
    .mj-agree em { font-style: normal; color: var(--red-up); }
    .mj-agree:has(input:checked) { color: var(--text-primary); border-color: var(--border-strong); }

.mj-error {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--c-red);
}

.mj-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    margin-top: 16px;
}

    .mj-actions button { height: 46px; }

.mj-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 0 2px;
    text-align: center;
}

    .mj-done[hidden] { display: none; }

    .mj-done .mj-title { margin: 6px 0 0; }

.mj-done-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(52, 195, 143, .16);
    color: var(--c-green);
}

.mj-done-text {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--mo-text-2);
}

.mj-done .mo-btn-primary {
    width: 100%;
    height: 46px;
}

/* ============================================================================
   수수료·세금 안내 — 체결 후 확인 · 포트폴리오 · 랭킹 기준
   ============================================================================ */
.mo-orow-cost {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--mo-text-3);
    font-variant-numeric: tabular-nums;
}

.mo-fill-cost {
    margin-top: 2px;
    font-size: 12px;
    color: var(--mo-text-3);
    font-variant-numeric: tabular-nums;
}

.mp-feeline {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--mo-line);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mo-text-3);
    font-variant-numeric: tabular-nums;
}

    .mp-feeline b {
        font-weight: 700;
        color: var(--mo-text-2);
    }

.mp-note {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mo-text-3);
}

.mr-rule {
    margin: -8px 0 16px;
    font-size: 12px;
    color: var(--mo-text-3);
}

    /* 랭킹 맨 아래 순위 제외 안내 (2026-10-16) */
    .mr-rule.mr-foot {
        margin: 16px 0 4px;
        padding-top: 12px;
        border-top: 1px solid var(--mo-line);
        line-height: 1.55;
    }

    /* 순위 제외 기준 — 강조 (빨강 · 2026-10-16) */
    .mr-rule.is-warn { color: var(--mo-buy); font-weight: 600; }

/* 주문 확인·주문 버튼을 본문 흐름 안(마켓 뎁스 위)에 둘 때 — 하단 고정 푸터의 선·여백을 뺀다 */
.mo-foot.mo-foot--inline {
    padding: 0;
    border-top: 0;
}

/* ============================================================================
   계좌 선택 (리그 / 개인) · 개인 계좌 만들기/고치기 창
   ============================================================================ */
.mo-acct-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 16px 0;
}

    .mo-acct-bar[hidden] { display: none; }

.mo-acct-pick {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--mo-line);
    border-radius: 10px;
    background: var(--mo-surface);
    color: var(--mo-text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

    .mo-acct-pick:hover,
    .mo-acct-pick[aria-expanded="true"] {
        border-color: var(--mo-line-strong);
        background: var(--mo-surface-2);
    }

.mo-acct-kind {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
}

    .mo-acct-kind.is-league { background: rgba(245, 196, 81, .16); color: var(--gold-text); }
    .mo-acct-kind.is-personal { background: rgba(76, 141, 255, .16); color: var(--c-blue); }

.mo-acct-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mo-acct-caret {
    flex: 0 0 auto;
    color: var(--mo-text-3);
    transition: transform .15s;
}

.mo-acct-pick[aria-expanded="true"] .mo-acct-caret { transform: rotate(180deg); }

.mo-acct-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--mo-line);
    border-radius: 10px;
    background: var(--mo-surface);
    color: var(--mo-text-2);
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .mo-acct-icon[hidden] { display: none; }

    .mo-acct-icon:hover:not(:disabled) {
        background: var(--mo-surface-2);
        color: var(--mo-text);
    }

    .mo-acct-icon:disabled {
        opacity: .4;
        cursor: default;
    }

.mo-acct-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 9;
    max-height: 380px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--mo-line-strong);
    border-radius: 12px;
    background: var(--bg-dark);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    animation: mjUp .16s ease;
}

    .mo-acct-menu[hidden] { display: none; }

.mo-acct-group {
    padding: 8px 8px 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mo-text-3);
}

.mo-acct-note {
    padding: 4px 8px 8px;
    font-size: 13px;
    color: var(--mo-text-3);
}

.mo-acct-item {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 30px 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .mo-acct-item:hover { background: var(--mo-surface-2); }
    .mo-acct-item.is-active { background: var(--fg-a06); }

.mo-acct-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 700;
}

.mo-acct-item-sub {
    font-size: 12.5px;
    color: var(--mo-text-3);
    font-variant-numeric: tabular-nums;
}

    .mo-acct-item-sub b { font-weight: 700; }

.mo-acct-check {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold-text);
    font-weight: 800;
}

.mo-acct-action {
    width: 100%;
    margin-top: 4px;
    padding: 10px;
    border: 1px dashed var(--mo-line-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text-2);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

    .mo-acct-action small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        font-weight: 400;
        color: var(--mo-text-3);
    }

    .mo-acct-action:hover:not(:disabled) {
        border-color: var(--border-strong);
        color: var(--mo-text);
    }

    .mo-acct-action:disabled {
        opacity: .5;
        cursor: default;
    }

/* ─── 개인 계좌 창 (바탕·카드는 참가 안내 .mj-* 와 같이 쓴다) ─── */
.ad-title {
    margin: 0 0 16px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--mo-text);
}

.ad-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.ad-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ad-desc-field { margin-top: 12px; }

.ad-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mo-text-3);
}

.ad-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--mo-line-strong);
    border-radius: 8px;
    background: var(--bg-darker);
    color: var(--mo-text);
    font-family: inherit;
    font-size: 14px;
}

    .ad-input:focus {
        outline: none;
        border-color: var(--border-strong);
    }

    .ad-input:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

textarea.ad-input {
    height: auto;
    min-height: 74px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.ad-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

    .ad-custom[hidden] { display: none; }
    .ad-custom .ad-input { flex: 1 1 auto; }

.ad-unit {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--mo-text-2);
}

.ad-hint {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 12px;
    color: var(--mo-text-3);
}

    .ad-hint.is-bad { color: var(--c-red); }

.ad-notice {
    margin: 14px 0 0;
    padding: 11px 12px;
    border-radius: 9px;
    background: var(--mo-surface-2);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--mo-text-2);
    white-space: pre-line;
}

.ad-danger {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

    .ad-danger[hidden] { display: none; }

.ad-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mo-text-2);
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

    .ad-link.is-danger { color: var(--c-red); }

.ad-error {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--c-red);
}

.ad-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.ad-btn {
    height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}

    .ad-btn:active:not(:disabled) { transform: scale(.98); }

    .ad-btn:focus-visible {
        outline: 2px solid var(--fg-a50);
        outline-offset: 2px;
    }

/* 취소는 한 걸음 물러난 테두리 버튼 — 빨간 기가 돌면 '삭제'처럼 읽힌다 */
.ad-cancel {
    flex: 0 0 34%;
    border-color: var(--mo-line-strong);
    background: transparent;
    color: var(--mo-text-2);
}

    .ad-cancel:hover {
        border-color: var(--border-strong);
        background: var(--mo-surface-2);
        color: var(--mo-text);
    }

.ad-submit {
    flex: 1 1 auto;
    background: var(--mo-buy);
    color: var(--on-accent);
    box-shadow: 0 6px 18px rgba(var(--ob-up-rgb), .26);
}

    .ad-submit:hover:not(:disabled) { background: #f04d4d; }

    .ad-submit.is-danger {
        background: #c62f2f;
        box-shadow: 0 6px 18px rgba(198, 47, 47, .26);
    }

        .ad-submit.is-danger:hover:not(:disabled) { background: #d63b3b; }

    /* 비활성은 흐린 빨강이 아니라 회색 — '눌러도 되나?' 헷갈리지 않게 (is-danger 보다 뒤에 둔다) */
    .ad-submit:disabled {
        border-color: var(--mo-line);
        background: var(--bg-lighter);
        color: var(--text-muted);
        box-shadow: none;
        cursor: not-allowed;
    }

/* 계좌 창은 body 로 옮겨져(RightOrder.js) 화면 한가운데 뜬다.
   z-index 는 체결 토스트(10050)보다 아래 — 창을 연 채로도 체결 알림이 보이게 */
#acctDialog.mj-backdrop {
    position: fixed;
    z-index: 10040;
    padding: 24px;
    background: rgba(0, 0, 0, .66);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
                 "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
    color: var(--mo-text);
}

    #acctDialog .ad-card {
        width: min(460px, 100%);
        max-height: calc(100vh - 48px);
        padding: 26px 24px 22px;
        border-radius: 18px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, .7);
    }

@media (max-width: 480px) {
    .ad-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1499px) {
    .mo-acct-bar { margin-left: 13px; margin-right: 13px; }
}

/* 단가 빠른 선택 칩 · 호가단위 안내 */
.mo-price-chips { margin-top: 6px; }
.mo-tick { margin-left: 6px; font-style: normal; font-weight: 500; color: var(--text-muted); font-size: calc(13px * var(--fs-scale, 1)); }

/* ============================================================
   거래소식 주문 폼 — 왼쪽 라벨 · 오른쪽 입력 (_OrderPanel.cshtml .mo-row)
   ============================================================ */
html body .mo-seg { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 0; padding: 0; border: 0; border-bottom: 1px solid var(--mo-line); border-radius: 0; background: transparent; }
html body .mo-seg-btn { height: 42px; border-radius: 0; font-size: calc(15px * var(--fs-scale, 1)); color: var(--mo-text-2); box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s; }
html body #obTabBuy.is-active, html body #obTabSell.is-active, html body #obTabHistory.is-active { background: transparent; }
html body #obTabBuy.is-active { color: var(--mo-buy); box-shadow: inset 0 -2px 0 var(--mo-buy); }
html body #obTabSell.is-active { color: var(--mo-sell); box-shadow: inset 0 -2px 0 var(--mo-sell); }
html body #obTabHistory.is-active { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--text-primary); }
html body .mo-form { gap: 12px; }
.mo-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; }
.mo-row-k { display: flex; align-items: baseline; gap: 3px; font-size: calc(13px * var(--fs-scale, 1)); font-weight: 600; color: var(--mo-text-2); white-space: nowrap; }
    .mo-row-k small { font-size: calc(13px * var(--fs-scale, 1)); font-weight: 500; color: var(--mo-text-3, var(--text-muted)); }
.mo-row-v { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mo-row--text { padding: 6px 0; border-bottom: 1px dashed var(--mo-line); }
.mo-row-val { text-align: right; font-size: calc(14px * var(--fs-scale, 1)); font-weight: 700; color: var(--mo-text); font-variant-numeric: tabular-nums; }
html body .mo-input { height: 44px; border-radius: 8px; padding: 0 4px 0 12px; }
html body .mo-input input { font-size: calc(16px * var(--fs-scale, 1)); }
html body .mo-step { gap: 0; }
html body .mo-step button { width: 32px; height: 34px; background: transparent; font-size: 18px; color: var(--mo-text-2); }
    html body .mo-step button:first-child { border-right: 1px solid var(--mo-line); border-radius: 0; }
    html body .mo-step button:hover { background: var(--mo-surface-2); color: var(--mo-text); }
html body .mo-input--total { padding-right: 12px; }
html body .mo-chips { gap: 4px; }
html body .mo-chips button { height: 30px; font-size: calc(13px * var(--fs-scale, 1)); border-radius: 6px; }
.mo-chips--3 { grid-template-columns: repeat(3, 1fr); }
.mo-chips--5 { grid-template-columns: repeat(5, 1fr); }
html body .mo-tick { margin: 0; text-align: right; }
    .mo-tick:empty { display: none; }
html body .mo-choice { width: 100%; }
.mo-note { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; margin: 2px 0 0; font-size: calc(13px * var(--fs-scale, 1)); color: var(--mo-text-2); }
    .mo-note strong { color: var(--mo-text); font-weight: 700; font-variant-numeric: tabular-nums; }
html body .mo-foot.mo-foot--inline { padding-top: 4px; }
html body .mo-submit { height: 42px; border-radius: 8px; font-size: calc(15px * var(--fs-scale, 1)); }
/* 칩 줄은 라벨 칸까지 써서 한 줄에 다 들어가게 (주문창 폭이 좁다) */
.mo-row-v .mo-chips { margin-left: calc(-1 * (var(--mo-k-w, 80px) + 10px)); width: calc(100% + var(--mo-k-w, 80px) + 10px); }
.mo-row-v .mo-chips button { white-space: nowrap; padding: 0 2px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
.mo-row { grid-template-columns: var(--mo-k-w, 80px) minmax(0, 1fr); }
/* 라벨은 입력칸 첫 줄에 맞춰 위에 두고(칩 줄이 라벨 칸까지 쓰므로), 텍스트 행만 세로 가운데 */
.mo-row { align-items: start; }
.mo-row-k { line-height: 44px; }
.mo-row--text { align-items: center; }
.mo-row--text .mo-row-k { line-height: normal; }
.mo-chips--5 { grid-template-columns: repeat(4, 1fr) auto; }
.mo-chips--5 button:last-child { padding: 0 8px; }
/* 라벨 칸(80px)에 단위 괄호까지는 안 들어간다 — 단위는 입력칸/안내줄에 있으니 숨김 */
.mo-row-k small { display: none; }

/* 코인·미국 주식 거래 규칙 한 줄 · 환율 안내 (2026-10-07) */
.mo-asset-note { margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: var(--surface-2, rgba(127,127,127,.08)); color: var(--text-secondary, var(--text-muted)); font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.45; }
.mo-asset-note[hidden] { display: none; }
html body .mo-fx { display: block; margin-top: 4px; }
html body .mo-fx[hidden] { display: none; }

/* 참가 안내 — 거래 대상 보조 설명 (2026-10-07) */
.mj-rules dd .mj-sub.mj-warn { color: var(--mo-buy); font-weight: 600; }   /* 순위 제외 기준 강조 */
.mj-rules dd .mj-sub { display: block; margin-top: 2px; color: var(--text-muted); font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.45; }

/* 주문 유형(지정가·시장가) — 어느 쪽이 켜져 있는지 한눈에 (2026-10-07)
   켜진 쪽은 글자색으로 채우고(반전) 체크 표시, 꺼진 쪽은 흐리게. 테마 토큰을 써서 검정·흰색 테마 모두 반전된다. */
html body #moTypeChoice .mo-choice-btn {
    color: var(--mo-text-3);
    background: transparent;
    border-color: var(--mo-line);
}
html body #moTypeChoice .mo-choice-btn:hover { color: var(--mo-text); border-color: var(--mo-line-strong); }
html body #moTypeChoice .mo-choice-btn.is-active {
    background: var(--mo-text);
    border-color: var(--mo-text);
    color: var(--bg-dark);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
html body #moTypeChoice .mo-choice-btn.is-active::before {
    content: "✓";
    margin-right: 5px;
    font-weight: 800;
}

/* 시즌 순위 마감 안내 (2026-10-07) */
.mr-lock { margin: 6px 0 0; padding: 7px 10px; border-radius: 8px; background: rgba(245, 158, 11, .12); color: var(--mo-text); font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.45; }
.mr-lock[hidden] { display: none; }

/* ============================================================
   주문창 가독성 정리 (2026-10-07) — 지금 무엇이 켜져 있고, 무엇을 입력할 수 있고, 돈이 얼마 있는지 한눈에
   검정·흰색 테마 모두 테마 토큰(--mo-*)만 써서 따라간다.
   ============================================================ */

/* ── 내 자산 나눠 보기 ── */
html body .mo-account { align-items: flex-start; }
.mo-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--mo-line); }
.mo-account-grid[hidden] { display: none; }
.mo-ac-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mo-ac-k { font-size: calc(13px * var(--fs-scale, 1)); color: var(--mo-text-3); white-space: nowrap; }
.mo-ac-v { font-size: calc(14px * var(--fs-scale, 1)); font-weight: 700; color: var(--mo-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-ac-pl { font-style: normal; font-size: calc(13px * var(--fs-scale, 1)); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 주문 가능 현금은 가장 자주 보는 값 — 강조 */
.mo-ac-cell--cash .mo-ac-k { color: var(--mo-text-2); font-weight: 600; }
.mo-ac-cell--cash .mo-ac-v { font-size: calc(16px * var(--fs-scale, 1)); }

/* ── 매수·매도 탭 — 켜진 쪽은 색 + 옅은 바탕 + 굵게 ── */
html body #obTabBuy.is-active { background: rgba(232, 64, 64, .10); font-weight: 800; box-shadow: inset 0 -3px 0 var(--mo-buy); }
html body #obTabSell.is-active { background: rgba(61, 123, 255, .10); font-weight: 800; box-shadow: inset 0 -3px 0 var(--mo-sell); }
html body #obTabHistory.is-active { font-weight: 800; box-shadow: inset 0 -3px 0 var(--text-primary); }
html body .mo-seg-btn:not(.is-active) { color: var(--mo-text-3); }

/* ── 입력칸 — 테두리를 또렷하게, 누르면 진한 테두리 + 포커스 링 ── */
html body .mo-input { border-color: var(--mo-line-strong); background: var(--mo-surface); }
html body .mo-input:focus-within { border-color: var(--mo-text-2); box-shadow: 0 0 0 3px var(--mo-focus, rgba(127, 127, 127, .25)); }
html body .mo-input .mo-unit { margin-right: 2px; font-size: calc(13px * var(--fs-scale, 1)); font-weight: 600; color: var(--mo-text-2); }
html body .mo-row-k { color: var(--mo-text-2); }

/* ── 시장가 — 단가 칸은 입력할 수 없다는 것만 조용히 ──
   바탕을 한 단계 가라앉히고 ± 버튼을 숨긴다. 칸 안 앞쪽에 흐린 현재가 글자만 둔다. */
.mo-lock-tag { display: none; }
html body #moPriceField.is-disabled .mo-input { background: var(--mo-surface-2); border-color: var(--mo-line); cursor: not-allowed; }
html body #moPriceField.is-disabled .mo-input input { color: var(--mo-text-2); cursor: not-allowed; }
html body #moPriceField.is-disabled .mo-step { display: none; }
html body #moPriceField.is-disabled .mo-lock-tag { display: inline; flex: 0 0 auto; font-style: normal; font-size: calc(13px * var(--fs-scale, 1)); color: var(--mo-text-3); }
html body #moPriceField.is-disabled .mo-tick { display: none; }

/* ── 수량 비율 칩 — 누를 수 있는 버튼처럼 ── */
html body .mo-chips button { border: 1px solid var(--mo-line-strong); background: var(--mo-surface); color: var(--mo-text-2); font-weight: 600; }
html body .mo-chips button:hover { border-color: var(--mo-text-2); color: var(--mo-text); }

/* ── 결제 예정 금액 — 매수는 빨강, 매도는 파랑으로 금액을 강조 ── */
html body .mo-note strong { font-size: calc(15px * var(--fs-scale, 1)); }
html body .mo-panel:has(#obTabBuy.is-active) #orderAmount { color: var(--mo-buy); }
html body .mo-panel:has(#obTabSell.is-active) #orderAmount { color: var(--mo-sell); }

/* ── 주문 버튼 — 막혔을 때는 색을 빼고 회색 점선 (반투명 빨강은 눌리는 것처럼 보였다) ── */
html body .mo-submit:disabled {
    opacity: 1;
    background: var(--mo-surface-2);
    color: var(--mo-text-3);
    border: 1px dashed var(--mo-line-strong);
    cursor: not-allowed;
}

/* ── 주문 확인 — 매수/매도 색 띠로 무엇을 확인하는지 분명하게 ── */
html body .mo-confirm { border-left: 4px solid var(--mo-buy); }
html body .mo-confirm:has(#moConfirmBtn.is-sell) { border-left-color: var(--mo-sell); }
html body .mo-confirm-text b { color: var(--mo-text); }

/* ── 오류 안내 — 테두리까지 넣어 눈에 띄게 ── */
html body .mo-error { border: 1px solid rgba(240, 68, 82, .45); font-weight: 600; }

/* ── 장 상태 배지 — 열림은 초록, 닫힘은 회색 ── */
html body .mo-market.is-open { background: rgba(34, 197, 94, .16); color: #22c55e; }
html body .mo-market.is-closed { background: var(--mo-surface-2); color: var(--mo-text-3); }

/* 주문이 막힌 이유 한 줄 (버튼 바로 아래) */
.mo-closed-note { margin: 6px 0 0; text-align: center; font-size: calc(13px * var(--fs-scale, 1)); color: var(--mo-text-2); line-height: 1.45; }
.mo-closed-note[hidden] { display: none; }


/* 수수료 · 정산 예정 금액 한 줄 — 글자 크기가 달라도 아래 줄(기준선)을 맞춘다 (2026-10-07) */
html body .mo-note { align-items: baseline; }
html body .mo-note > span { display: inline-flex; align-items: baseline; gap: 4px; }
/* 호가 잔량이 없으면 마켓 뎁스를 감춘다 */
.mo-depth[hidden] { display: none !important; }

/* ============================================================================
   거래내역 (2026-10-16) — 주문내역 [전체조회] 로 여는 넓은 창 (_OrderPanel.cshtml #moHistory · RightOrder.js openOrderHistory)
   ============================================================================ */
.mo-orders-acts {
    display: flex;
    gap: 6px;
}

html.mh-open { overflow: hidden; }

.mh {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
                 "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
    color: var(--mo-text);
}

    .mh[hidden] { display: none; }

.mh-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.mh-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    /* 높이 고정 — 결과 줄 수·탭(주문내역/수익분석)에 따라 창이 늘었다 줄었다 하지 않게.
       남는 높이는 표 칸(.mh-table-wrap, flex: 1)이 받고, 넘치면 그 안에서 스크롤한다 (2026-10-16) */
    height: min(820px, calc(100vh - 48px));
    border: 1px solid var(--mo-line-strong);
    border-radius: 14px;
    background: var(--mo-bg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.mh-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--mo-line);
}

.mh-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.mh-acct {
    font-size: 13px;
    color: var(--mo-text-3);
}

    .mh-acct:empty { display: none; }

.mh-x {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text-2);
    cursor: pointer;
}

    .mh-x:hover { background: var(--mo-surface-2); color: var(--mo-text); }

.mh-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--mo-line);
    background: var(--mo-surface);
}

.mh-fgroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

    .mh-fgroup[hidden] { display: none; }

    .mh-fgroup select {
        height: 34px;
        padding: 0 10px;
        border: 1px solid var(--mo-line-strong);
        border-radius: 8px;
        background: var(--mo-bg);
        color: var(--mo-text);
        font-family: inherit;
        font-size: 13.5px;
        color-scheme: inherit;
    }

        .mh-fgroup select:focus {
            outline: none;
            border-color: var(--mo-buy);
            box-shadow: 0 0 0 3px var(--mo-focus);
        }

.mh-summary {
    padding: 10px 22px 6px;
    font-size: 13px;
    color: var(--mo-text-3);
    font-variant-numeric: tabular-nums;
}

.mh-table-wrap {
    flex: 1 1 auto;
    min-height: 120px;
    overflow: auto;
    padding: 0 22px;
}

.mh-table {
    width: 100%;
    min-width: 980px;            /* 좁은 화면은 표 안에서 가로로 민다 */
    border-collapse: collapse;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

    .mh-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 10px 8px;
        border-bottom: 1px solid var(--mo-line-strong);
        background: var(--mo-bg);
        color: var(--mo-text-3);
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
    }

    .mh-table td {
        padding: 11px 8px;
        border-bottom: 1px solid var(--mo-line);
        vertical-align: middle;
        white-space: nowrap;
    }

    .mh-table .num { text-align: right; }
    .mh-table tbody tr:hover { background: var(--mo-surface); }

.mh-sub {
    margin-top: 2px;
    font-size: 13px;
    color: var(--mo-text-3);
}

.mh-time { color: var(--mo-text-2); }

.mh-stock {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mo-text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

    .mh-stock:hover > div > div:first-child { text-decoration: underline; }

.mh-buy, .mh-plus { color: var(--mo-buy); font-weight: 700; }
.mh-sell, .mh-minus { color: var(--mo-sell); font-weight: 700; }

.mh-state {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

    .mh-state.is-done { background: rgba(52, 195, 143, .15); color: #2fb886; }
    .mh-state.is-wait { background: rgba(245, 166, 35, .16); color: #e0961a; }
    .mh-state.is-off { background: var(--mo-surface-2); color: var(--mo-text-3); }

.mh-empty {
    margin: 36px 0;
    text-align: center;
    font-size: 14px;
    color: var(--mo-text-3);
}

.mh-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 12px 22px 4px;
}

    .mh-pager:empty { display: none; }

    .mh-pager button {
        min-width: 34px;
        height: 32px;
        padding: 0 8px;
        border: 1px solid var(--mo-line);
        border-radius: 8px;
        background: transparent;
        color: var(--mo-text-2);
        font-family: inherit;
        font-size: 13.5px;
        cursor: pointer;
    }

        .mh-pager button.is-cur { border-color: var(--mo-text); color: var(--mo-text); font-weight: 700; }
        .mh-pager button:disabled { opacity: .4; cursor: default; }

    .mh-pager span { color: var(--mo-text-3); }

.mh-note {
    margin: 0;
    padding: 10px 22px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mo-text-3);
}

/* 폰 폭 (앱 웹뷰) — 화면을 가득 채운다 */
@media (max-width: 640px) {
    .mh { padding: 0; }
    .mh-box { width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
    .mh-head, .mh-filters, .mh-summary, .mh-pager, .mh-note { padding-left: 16px; padding-right: 16px; }
    .mh-table-wrap { padding: 0 16px; }
}

/* 거래내역 보기 — 주문내역 / 수익분석 (2026-10-16) */
.mh-tabs {
    display: flex;
    gap: 22px;
    padding: 0 22px;
    border-bottom: 1px solid var(--mo-line);
}

.mh-tab {
    position: relative;
    padding: 12px 0 11px;
    border: 0;
    background: none;
    color: var(--mo-text-3);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

    .mh-tab:hover { color: var(--mo-text-2); }
    .mh-tab.is-on { color: var(--mo-text); }
    .mh-tab.is-on::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        border-radius: 2px;
        background: var(--mo-text);
    }

/* 수익분석 요약 — 총 실현수익 */
.mh-psum {
    padding: 16px 22px 4px;
    font-variant-numeric: tabular-nums;
}

.mh-psum-label { font-size: 13px; color: var(--mo-text-3); }

.mh-psum-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
}

    .mh-psum-main strong { font-size: 24px; font-weight: 800; color: var(--mo-text); }
    .mh-psum-main strong.mh-plus { color: var(--mo-buy); }
    .mh-psum-main strong.mh-minus { color: var(--mo-sell); }
    .mh-psum-rate { font-size: 15px; font-weight: 700; }

.mh-psum-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--mo-text-3);
}

    .mh-psum-sub b { color: var(--mo-text); font-weight: 600; }

/* 수익분석 표 — 정렬 머리 · 합계 줄 */
.mh-ptable { min-width: 820px; }

    .mh-ptable th.mh-sortable { cursor: pointer; user-select: none; }
    .mh-ptable th.mh-sortable:hover { color: var(--mo-text); }

.mh-sort-ic {
    margin-left: 3px;
    font-style: normal;
    font-size: 13px;
    opacity: .4;
}

    .mh-sort-ic::after { content: "\2195"; }                     /* ↕ */
    .mh-sort-ic.is-desc, .mh-sort-ic.is-asc { opacity: 1; color: var(--mo-text); }
    .mh-sort-ic.is-desc::after { content: "\25BE"; }             /* ▾ */
    .mh-sort-ic.is-asc::after { content: "\25B4"; }              /* ▴ */

.mh-dim-num { color: var(--mo-text-2); }

.mh-ptable tfoot td {
    position: sticky;
    bottom: 0;
    padding: 12px 8px;
    border-top: 1px solid var(--mo-line-strong);
    border-bottom: 0;
    background: var(--mo-surface);
    font-weight: 700;
}

@media (max-width: 640px) {
    .mh-tabs, .mh-psum { padding-left: 16px; padding-right: 16px; }
}

/* 거래내역 기간 — 오늘 / 1주일 / 전체 (2026-10-16) */
.mh-periods {
    gap: 0;
    border: 1px solid var(--mo-line-strong);
    border-radius: 8px;
    overflow: hidden;
}

.mh-period {
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-left: 1px solid var(--mo-line-strong);
    background: var(--mo-bg);
    color: var(--mo-text-2);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

    .mh-period:first-child { border-left: 0; }
    .mh-period:hover { color: var(--mo-text); }
    .mh-period.is-on { background: var(--mo-text); color: var(--mo-bg); }