/* ============================================================================
   왼쪽 사이드바: '관심목록 | 모의투자' 탭 + 모의투자 계좌 목록 (.lsm-* / .ma-*)
   동작은 wwwroot/js/left-mock-account.js. 색은 주문 패널(--mo-*)과 관심목록(--red-up 등)에 맞춘다.
   ============================================================================ */

/* ─── 탭 ─── */
.lsm-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-darker);
}

.lsm-mode-btn {
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-text-3, var(--text-muted));
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .lsm-mode-btn:hover {
        color: var(--mo-text, var(--text-primary));
        background: var(--fg-a04);
    }

    .lsm-mode-btn.is-active {
        background: var(--pill-active-bg);
        color: var(--on-accent);
    }

.left-sidebar.collapsed .lsm-mode { display: none; }

/* ─── 모의투자 모드: 관심목록 전용 조작은 숨기고 제목만 ─── */
.lsm-mock-title {
    display: none;
    flex: 1;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
}

.left-sidebar.is-mock-mode .lsm-mock-title { display: block; }
/* 하단 요약 줄: 관심목록 모드 = KRX 합계(관심종목 집계), 내 투자 모드 = 모의계좌 수익률·평가손익·총자산 */
.left-sidebar.is-mock-mode .sidebar-footer .market-info:not(.mock-market-info) { display: none; }
.left-sidebar:not(.is-mock-mode) .sidebar-footer .mock-market-info { display: none; }
.left-sidebar.is-mock-mode .sidebar-footer .mock-market-info { display: block; }   /* main.css 의 .market-info flex 를 세로 두 줄로 */
/* 내 투자 하단 요약: 두 줄(총자산 / 평가손익·수익률), 줄바꿈 없이 */
.mock-market-info { padding: 7px 10px; }
.mock-market-info .mf-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1.5; }
.mock-market-info .mf-row + .mf-row { margin-top: 2px; }
.mock-market-info .mf-kind { padding: 0 6px; border-radius: 4px; background: var(--fg-a08); color: var(--text-secondary); font-weight: 600; }
.mock-market-info .mf-label { color: var(--text-muted); }
.mock-market-info .mf-total, .mock-market-info .mf-pl { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.mock-market-info .mf-rate { font-variant-numeric: tabular-nums; }
.mock-market-info .up { color: var(--red-up); }
.mock-market-info .down { color: var(--blue-down); }

.left-sidebar.is-mock-mode #favoriteStockMove,
.left-sidebar.is-mock-mode #favoriteAddMemo,
.left-sidebar.is-mock-mode .favorite-title-wrapper,
.left-sidebar.is-mock-mode .stock-list,
.left-sidebar.is-mock-mode .favorite-page-list,
.left-sidebar.collapsed .lsm-mock-title,
.left-sidebar.collapsed .mock-acct {
    display: none !important;
}

/* ─── 목록 영역 ─── */
.mock-acct {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-lighter) transparent;
}

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

.mock-acct .is-up { color: var(--red-up); }
.mock-acct .is-down { color: var(--blue-down, var(--ob-dn)); }

/* ─── 요약 ─── */
.ma-summary {
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--border-color);
}

    .ma-summary[hidden] { display: none; }

.ma-sum-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ma-sum-label {
    font-size: 13.5px;
    color: var(--mo-text-2, var(--text-secondary));
}

.ma-sum-pl {
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ma-sum-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
}

    .ma-sum-rows > div {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        font-size: 13px;
        color: var(--mo-text-3, var(--text-muted));
    }

    .ma-sum-rows b {
        font-weight: 600;
        color: var(--mo-text, var(--text-primary));
        font-variant-numeric: tabular-nums;
    }

        .ma-sum-rows b.is-up { color: var(--red-up); }
        .ma-sum-rows b.is-down { color: var(--blue-down, var(--ob-dn)); }

.ma-pending {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(240, 192, 64, .3);
    border-radius: 8px;
    background: rgba(240, 192, 64, .08);
    color: var(--gold-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .ma-pending[hidden] { display: none; }
    .ma-pending span { font-size: 16px; line-height: 1; }

/* ─── 종목 카드 ─── */
.ma-card {
    position: relative;
    padding: 11px 12px 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    outline: none;
    transition: background .15s;
}

    .ma-card:hover,
    .ma-card:focus-visible {
        background: var(--fg-a03);
        box-shadow: inset 2px 0 0 var(--red-up);
    }

    .ma-card.is-active {
        background: var(--bg-lighter, var(--bg-light));
        box-shadow: inset 2px 0 0 var(--red-up);
    }

.ma-top {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.ma-logo {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 50%;
    overflow: hidden;
}

    .ma-logo i {
        font-style: normal;
        font-size: 13px;
        font-weight: 800;
        color: var(--text-primary);
    }

    .ma-logo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* 원형 가장자리에 흰 테가 비치지 않게 (2026-10-12) — 흰 배경은 깔지 않는다(가장자리에 비친다 · 회사 로고 PNG 는 가장자리까지 불투명).
           8% 키우고 같은 비율로 줄인 원(46.3% × 1.08 = 50%)으로 자른다. */
        transform: scale(1.08);
        clip-path: circle(46.3% at 50% 50%);
    }

.ma-col-l {
    flex: 1 1 auto;
    min-width: 0;
}

.ma-name {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--mo-text, var(--text-primary));
}

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

.ma-badge {
    flex: 0 0 auto;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(240, 192, 64, .16);
    color: var(--gold-text);
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}

    .ma-badge[hidden] { display: none; }

.ma-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--mo-text-3, var(--text-muted));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ma-col-r {
    flex: 0 0 auto;
    text-align: right;
}

.ma-price {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ma-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding-left: 39px;
}

.ma-line {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: baseline;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ma-k { color: var(--mo-text-3, var(--text-muted)); }

.ma-v {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mo-text, var(--text-primary));
}

.ma-v2 {
    text-align: right;
    white-space: nowrap;
    color: var(--mo-text-2, var(--text-secondary));
}

.ma-actions {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
}

.ma-btn {
    height: 32px;
    border: 0;
    border-radius: 7px;
    color: var(--on-accent);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .12s;
}

    .ma-btn:hover { filter: brightness(1.1); }
    .ma-btn.is-buy { background: var(--mo-buy, var(--ob-up)); }
    .ma-btn.is-sell { background: var(--mo-sell, var(--ob-dn)); }

/* 평소: 평단·등락률 + 보유·수익 */
.ma-sub-b,
.ma-diff { display: none; }

/* 마우스를 올린 종목: 거래량·대비 + 매수/매도 (보유·수익 두 줄이 버튼으로 바뀐다). 마우스가 벗어나면 원래대로.
   선택된 종목은 왼쪽 빨간 줄로만 표시한다 — 버튼까지 계속 띄우면 호버가 안 풀린 것처럼 보인다. */
@media (hover: none) {
    /* 터치 화면엔 hover 가 없으니 선택된 종목에만 버튼을 띄운다 */
    .ma-card.is-active .ma-sub-a,
    .ma-card.is-active .ma-rate,
    .ma-card.is-active .ma-detail { display: none; }

    .ma-card.is-active .ma-sub-b,
    .ma-card.is-active .ma-diff { display: block; }

    .ma-card.is-active .ma-actions { display: grid; }
}

@media (hover: hover) {
    .ma-card:hover .ma-sub-a,
    .ma-card:hover .ma-rate,
    .ma-card:hover .ma-detail { display: none; }

    .ma-card:hover .ma-sub-b,
    .ma-card:hover .ma-diff { display: block; }

    .ma-card:hover .ma-actions { display: grid; }
}

/* ─── 빈 상태 · 안내 ─── */
.ma-state {
    padding: 40px 18px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mo-text-2, var(--text-secondary));
}

    .ma-state[hidden] { display: none; }
    .ma-state p { margin: 0; }

.ma-state-btn {
    margin-top: 14px;
    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: var(--mo-buy, var(--ob-up));
    color: var(--on-accent);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .ma-state-btn.is-ghost {
        border: 1px solid var(--mo-line-strong, var(--border-strong));
        background: transparent;
        color: var(--mo-text, var(--text-primary));
    }

/* ─── 개인 | 리그 · 계좌 고르기 ─── */
.ma-acctbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border-color);
}

    .ma-acctbar[hidden] { display: none; }

.ma-kind {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: var(--fg-a05);
}

.ma-kind-btn {
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mo-text-3, var(--text-muted));
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .ma-kind-btn:hover { color: var(--mo-text, var(--text-primary)); }

    .ma-kind-btn.is-active {
        background: #f4f5f6;
        color: #111;
    }

.ma-acct-select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--mo-text, var(--text-primary));
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
}

    .ma-acct-select[hidden] { display: none; }

.ma-new-acct {
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: var(--fg-a07);
    color: var(--mo-text, var(--text-primary));
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

    .ma-new-acct[hidden] { display: none; }
    .ma-new-acct:hover:not(:disabled) { background: var(--fg-a12); }

    .ma-new-acct:disabled {
        opacity: .45;
        cursor: default;
    }

/* ─── 호버 떨림 방지 (2026-10-07 · 다시 생겨서 근본적으로) ───
   마우스를 올리면 '보유·수익' 두 줄(약 38px)이 매수/매도 버튼(32px)으로 바뀌며 카드가 몇 px 줄었다.
   경계에 있던 마우스가 카드 밖이 되어 호버가 풀리고 → 다시 커져 호버 → 무한 반복.
   이제 보유·수익 줄은 자리를 그대로 둔 채 가리기만 하고(visibility), 버튼은 그 자리 위에 겹쳐 띄운다 → 카드 높이가 절대 안 바뀐다. */
.ma-actions {
    position: absolute;
    left: 51px;          /* 로고(30px) + 간격 + 카드 안쪽 여백 = 보유·수익 줄 시작점 */
    right: 12px;
    bottom: 10px;        /* 카드 아래 여백과 같게 */
    margin-top: 0;
}
@media (hover: hover) {
    .ma-card:hover .ma-detail { display: flex; visibility: hidden; }
}
@media (hover: none) {
    .ma-card.is-active .ma-detail { display: flex; visibility: hidden; }
}

/* ─── 원/달러 환율 · 금액 원화/달러 전환 (2026-10-07) ───
   환율은 장식 없이 글자로, 전환은 위 '개인 | 리그' 탭과 같은 알약 모양을 작게 */
.ma-fxbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.ma-fx { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; }
.ma-fx-k { color: var(--mo-text-3, var(--text-muted)); }
.ma-fx b { font-weight: 700; color: var(--mo-text, var(--text-primary)); font-variant-numeric: tabular-nums; }
.ma-cur {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--fg-a05);
}
.ma-cur button {
    min-width: 30px;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mo-text-3, var(--text-muted));
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ma-cur button:hover:not(:disabled) { color: var(--mo-text, var(--text-primary)); }
.ma-cur button.is-on { background: var(--mo-surface-2, var(--fg-a12)); color: var(--mo-text, var(--text-primary)); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ma-cur button:disabled { opacity: .4; cursor: default; }

/* ─── 보유·수익 줄 글씨 키우기 (2026-10-07) — 13px 은 카드 안에서 잘 안 보였다 ─── */
.ma-line { font-size: 14px; gap: 8px; grid-template-columns: 32px minmax(0, 1fr) auto; }
.ma-k { color: var(--mo-text-2, var(--text-secondary)); font-weight: 600; }
.ma-v { font-weight: 700; }
.ma-v2 { font-weight: 600; }

/* ─── 원/$ 전환 — 선택된 쪽을 또렷하게 (글자색으로 채워 반전) ─── */
.ma-cur { background: var(--fg-a05); border: 1px solid var(--border-color, var(--fg-a12)); }
.ma-cur button.is-on {
    background: var(--mo-text, var(--text-primary));
    color: var(--bg-dark);
    box-shadow: none;
}
.ma-cur button:not(.is-on) { color: var(--mo-text-3, var(--text-muted)); }