/* ===========================================
   주식 페이지 스타일시트
   =========================================== */

/* 주식 페이지 전용 컨텐츠 영역
   ⚠️ 바탕판(#202020 · 둥근 모서리)을 걷었다(2026-09-23 사용자 요청 "배경 어색하다").
      카드들이 저마다 바탕을 가지므로 판이 한 겹 더 있으면 가장자리만 어색하게 남았다 —
      블로그 화면처럼 페이지 바탕 위에 카드가 바로 놓인다. */
.stock-page-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
}

/* 주식 목록 페이지 */
.stocks-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    grid-template-rows: auto 1fr;
    gap: 12px;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.stocks-main {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

.stocks-sidebar-right {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;

    /* 통짜 한 덩어리다 — 자체 스크롤도, 화면에 붙는 sticky 도 두지 않는다
       (2026-08-23 사용자 지시).
       한때는 스크롤을 따라오게 붙여 뒀었다(오른쪽 250px 컬럼이 표 높이만큼 비니까).
       하지만 붙어 있는 동안은 페이지를 내려도 사이드바가 안 움직여서, 창이 낮으면
       (≈940px 아래) 아래쪽 포트폴리오 TOP 10 이 잘린 채 도달할 방법이 없어진다.
       그걸 메우려 자체 스크롤을 줬더니 이번엔 사이드바 안에 스크롤바가 섰다 —
       둘 다 걷고 페이지와 함께 흐르게 둔다.
       align-self 는 남긴다. 없으면 grid 가 이 칸을 표 높이까지 늘린다. */
    align-self: start;
}
.stocks-sidebar-right > *:not(:last-child) {
    margin-bottom: 10px;
}

/* 히트맵 판의 바깥선은 밝게 — 팔레트의 `--bae-border`(#3A3A3A)는 이 배경(#1C1C1C)에서
   거의 묻힌다. 네 단계를 렌더해 비교하고 흰색 40% 를 골랐다(2026-09-22 사용자 요청
   "외곽 라인이 좀 보였으면"). 배경색이 바뀌어도 따라오도록 흰색 알파로 둔다.
   ⚠️ `quotes.css` 가 나중에 실려 `.heatmap-box` 를 같은 특이도로 잡는다 — 컨테이너를 앞에 붙인다. */
.stocks-dashboard-container .heatmap-box {
    border-color: rgba(255, 255, 255, 0.4);
}

/* =============================
   포트폴리오 TOP 10

   ⚠️ 거래대금 순위는 2026-09-23 홈의 **순위 표**(`stock_home.css` 의 `sh-rank`)로 옮겼다 —
      이 블록의 "거래대금" 설명은 그 전의 기록이다.

   2026-09-23 재설계. 근거 전문은 temp/output/26092201_레이아웃-리디자인/0014.
   형태는 **라벨 위·막대 아래의 가로 막대그래프**(이름이 긴데 칸이 좁을 때의 기본 배치)
   + 보조 정보 한 줄. 행 = 1행 "이름 · 순위 기준값" / 막대 / 2행 "보조".

   정보 순서는 "행끼리 비교할 수 있는가" 로 정했다:
     이름 > 순위 기준값(거래대금·점수) > 등락률 > 가격(행끼리 비교할 의미 없음) > 코드.
   예전에는 이게 거꾸로였다 — 비교할 수 없는 가격이 가장 크고 빨갛고, 순위 기준인
   거래대금이 11px 회색으로 가장 흐렸다.
   ============================= */
.top10-section {
    background: var(--bae-bg);
    border-radius: var(--border-radius);
    padding: 14px 12px 6px;
    border: 1px solid var(--bae-border);
}

.top10-section h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 4px 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bae-text-primary);
}

/* 제목 아이콘은 흐리게 — accent 는 상호작용 색이라 장식에 쓰지 않는다. */
.top10-section h3 > .c-ico {
    font-size: 16px;
    color: var(--bae-text-dim);
}

/* 10행 고정이라 길어질 일이 없다 — 높이를 묶으면 카드 안에 스크롤바만 생긴다.
   ⚠️ `<ol>` 이다(순위는 순서가 뜻). 기본 들여쓰기·번호를 지운다 — 번호는 `.top10-n` 이 그린다. */
.top10-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top10-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--bae-text-dim);
    font-size: 14px;
}

/* 시장을 바꿔 다시 받는 동안 이전 목록을 흐리게 둔다 — 비우면 사이드바가 접혔다 펴지며 튄다. */
.top10-list.is-stale {
    opacity: 0.45;
    transition: opacity 0.15s;
}

/* ⚠️ 행마다 카드 배경을 깔지 않는다. 카드 안에 카드 10장이 250px 에서 여백을 먹어
   이름 칸이 89px 이었고 10개 중 3개 이름이 잘렸다. */
.top10-link {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    column-gap: 10px;
    padding: 9px 4px 8px;
    color: inherit;
    text-decoration: none;
}

.top10-link:hover {
    color: inherit;
    text-decoration: none;
}

/* 순위 — 맨 숫자. 강조는 **색이 아니라 밝기**로(1~3위만 본문 흰색).
   ⚠️ 예전 빨강·주황·노랑 동그라미는 빨강이 "상승" 과 겹쳐 읽혔다. 빨강·파랑은 등락 전용이다. */
.top10-n {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: right;
    color: var(--bae-text-dim);
    font-variant-numeric: tabular-nums;
}

.top10-item:nth-child(-n+3) .top10-n {
    color: var(--bae-text-primary);
    font-weight: 700;
}

.top10-body {
    display: grid;
    min-width: 0;
}

.top10-l1,
.top10-l2 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.top10-nm {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--bae-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 순위 기준값. 세로로 줄 서는 숫자라 자릿수를 맞춘다. 단위(`조`·`/100`)는 작게 흐리게. */
.top10-val {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--bae-text-primary);
    font-variant-numeric: tabular-nums;
}

.top10-val small {
    margin-left: 1px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bae-text-dim);
}

/* 막대 — **재는 값(1행)에 붙인다**(위 3px · 아래 7px). 두 줄 사이 정중간이면 어느
   값의 막대인지 애매하다.
   ⚠️ 한 색(accent 60%, 표시 요소 대비 3.23:1). 종목은 순서 없는 범주라 값에 따라
      색을 바꾸지 않는다. 기준선(왼쪽)은 네모, 끝은 둥글게. */
.top10-bar {
    display: block;
    height: 4px;
    margin: 3px 0 7px;
}

.top10-bar > i {
    display: block;
    width: calc(var(--pct, 0) * 1%);
    min-width: 2px;
    height: 100%;
    border-radius: 0 2px 2px 0;
    background: rgba(var(--bae-accent-rgb), 0.6);
    transition: background 0.15s;
}

/* 점수는 0~100 이라 **미터** — 같은 색 옅은 트랙이 "얼마나 찼나" 를 보인다.
   거래대금에는 트랙이 없다(상한이 없는 값이라 "1위 대비" 가 기준이다). */
.top10-bar.is-meter {
    border-radius: 0 2px 2px 0;
    background: rgba(var(--bae-accent-rgb), 0.16);
}

.top10-l2 {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* 포트폴리오 등급 — 중립 칩. 예전에는 점수와 함께 "상승 빨강" 이었다. */
.top10-gr {
    padding: 0 7px;
    border: 1px solid var(--bae-border-hover);
    border-radius: 999px;
    color: var(--bae-text-muted);
    font-size: 11px;
    font-weight: 600;
}

/* 호버 — **배경을 깔지 않는다.** 예전 호버 배경(#3A3A3A) 위에서 하락 파랑이 3.09:1 까지
   떨어졌다. 대신 막대가 진해지고(들림) 이름에 밑줄 — 키보드 포커스도 같게. */
.top10-link:hover .top10-nm,
.top10-link:focus-visible .top10-nm {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.top10-link:hover .top10-bar > i,
.top10-link:focus-visible .top10-bar > i {
    background: var(--bae-accent);
}

/* 주식 테이블 */
.stocks-table {
    background: var(--bae-bg);
    border-radius: var(--border-radius);
    overflow-x: auto;
    border: 1px solid var(--bae-border);
    -webkit-overflow-scrolling: touch;
}

.stocks-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 0;
}

.stocks-table thead {
    background: var(--bae-surface);
}

.stocks-table th {
    padding: 10px 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--bae-text-muted);
    border-bottom: 2px solid var(--bae-border);
}

/* 각 열의 너비 고정
   ⚠️ **열 순서가 곧 규칙이다.** 2026-09-02 에 등락률이 5번(현재가) 뒤로 들어오면서
      시가총액·상장주식수가 한 칸씩 밀렸다. 열을 또 넣거나 빼면 여기와 아래
      `@media (768px 미만)`·`@media (640px 미만)` 의 nth-child 를 **함께** 고쳐야 한다.
      1 종목명 · 2 종목코드 · 3 시장 · 4 유형 · 5 현재가 · 6 등락률 · 7 시가총액 · 8 상장주식수 */
.stocks-table th:nth-child(1),
.stocks-table td:nth-child(1) {
    width: 33%;
    padding-left: 30px;
}

.stocks-table th:nth-child(2),
.stocks-table td:nth-child(2) {
    width: 9%;
    text-align: center;
}

.stocks-table th:nth-child(3),
.stocks-table td:nth-child(3) {
    width: 9%;
    text-align: center;
}

.stocks-table th:nth-child(4),
.stocks-table td:nth-child(4) {
    width: 9%;
    text-align: center;
}

.stocks-table th:nth-child(5),
.stocks-table td:nth-child(5) {
    width: 12%;
    text-align: center;
}

.stocks-table th:nth-child(6),
.stocks-table td:nth-child(6) {
    width: 10%;
    text-align: center;
}

.stocks-table th:nth-child(7),
.stocks-table td:nth-child(7) {
    width: 10%;
    text-align: center;
}

.stocks-table th:nth-child(8),
.stocks-table td:nth-child(8) {
    width: 8%;
    text-align: center;
}

.stocks-table td {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--bae-text-primary);
    border-bottom: 1px solid var(--bae-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-name-cell {
    white-space: normal !important;
    overflow: visible !important;
}

.stock-name-kr {
    font-weight: 600;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-name-en {
    font-size: 12px;
    color: var(--bae-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: var(--bae-text-muted);
}

.stock-price {
    font-weight: 600;
    color: var(--bae-text-primary);
}

.market-badge,
.type-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--border-radius-xs);
    font-size: 11px;
    font-weight: 600;
}

/* 시장 배지 — 값마다 색을 가른다. 하나로 칠하면 표에서 이 열이 아무 정보도 안 준다.
 *
 * 찬 계열로 묶는 이유: 옆의 유형 배지(ETF·ETN·코인)가 따뜻한 계열이라, 색 가족만으로
 * "이 둘은 서로 다른 축"이 읽힌다. 밝기대는 common.css 의 분류 보조색과 같은 300 계열.
 * 한국은 파랑→시안, 미국은 청록→초록으로 나라끼리도 갈린다.
 *
 * ⚠️ 클래스는 템플릿이 `market-{{ 시장|lower }}` 로 만든다(stocks_index·stocks_show·
 *    admin_stocks). 새 시장이 생기면 여기 한 줄과 그 클래스가 함께 있어야 색이 붙는다 —
 *    없으면 아래 기본값(중립)으로 떨어진다. */
.market-badge {
    background: var(--bae-surface-alt);
    color: var(--bae-text-muted);
}

.market-badge.market-kospi   { color: #93C5FD; }
.market-badge.market-kosdaq  { color: #7DD3FC; }
.market-badge.market-konex   { color: #67E8F9; }
.market-badge.market-nasdaq  { color: #5EEAD4; }
.market-badge.market-nyse    { color: #6EE7B7; }
.market-badge.market-amex    { color: #86EFAC; }
/* 목록은 'COIN', 상세는 'Bithumb' 을 싣는다(app/ui/stocks.py) — 둘 다 받는다. */
.market-badge.market-coin,
.market-badge.market-bithumb { color: var(--color-coin); }

.type-badge {
    background: var(--bae-surface-alt);
}

.type-badge.type-stock {
    color: var(--bae-text-muted);
}

.type-badge.type-etf {
    color: var(--color-etf);
}

.type-badge.type-etn {
    color: var(--color-etn);
}

.type-badge.type-coin {
    color: var(--color-coin);
}

.no-data {
    text-align: center;
    padding: 40px !important;
    color: var(--bae-text-dim);
}

/* ===========================================
   주식 상세 페이지
   =========================================== */

.chart-top-buttons {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 12;
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

.chart-indicator-help {
    position: relative;
}

.chart-indicator-help-btn {
    width: 22px;
    height: 22px;
    border-radius: var(--border-radius-circle);
    border: 1px solid var(--bae-border);
    background: var(--bae-surface);
    color: var(--bae-text-dim);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    transition: var(--transition);
    opacity: 0.7;
}

/* ⓘ 동작은 다른 ⓘ 와 같다(2026-10-13) — 마우스는 올리면(hover 는 마우스 기기에서만), 키보드는 포커스로,
   손가락은 tooltip.js 가 탭마다 `.is-open` 을 여닫는다. 손가락으로 누른 자리에 남는 hover·focus 로 띄우지 않는다. */
.chart-indicator-help.is-open .chart-indicator-help-btn,
.chart-indicator-help:has(.chart-indicator-help-btn:focus-visible) .chart-indicator-help-btn {
    border-color: var(--bae-info);
    color: var(--bae-text-primary);
    opacity: 1;
}

@media (hover: hover) {
    .chart-indicator-help:hover .chart-indicator-help-btn {
        border-color: var(--bae-info);
        color: var(--bae-text-primary);
        opacity: 1;
    }

    .chart-indicator-help:hover .chart-indicator-tooltip {
        visibility: visible;
        pointer-events: auto;
    }
}

/* 차트 지표 설명 · 백테스트 지표 ⓘ — 안에 줄·색 점이 든 풍선이라 `.c-tip`(글자 한 줄)과 따로 두지만
   겉모양은 같은 정본 값(tooltip.md)이다. 지연·페이드 없이 바로 뜬다. */
.chart-indicator-tooltip,
.metric-tooltip {
    max-width: 22rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--bae-border);
    border-radius: 0.375rem;
    background: var(--bae-surface-alt);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    color: var(--bae-text-muted);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
}

.chart-indicator-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 15;
    min-width: 160px;
    visibility: hidden;
    pointer-events: none;
}

.chart-indicator-help.is-open .chart-indicator-tooltip,
.chart-indicator-help:has(.chart-indicator-help-btn:focus-visible) .chart-indicator-tooltip {
    visibility: visible;
    pointer-events: auto;
}

.chart-indicator-tooltip strong {
    display: block;
    color: var(--bae-text-primary);
    font-size: 11px;
    margin-bottom: 4px;
}

.chart-indicator-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
}

.chart-indicator-dot {
    display: inline-block;
    width: 10px;
    height: 3px;
    border-radius: 1px;
    flex-shrink: 0;
}

.chart-indicator-divider {
    border: none;
    border-top: 1px solid var(--bae-border);
    margin: 6px 0;
}

.chart-indicator-tooltip-section + .chart-indicator-tooltip-section {
    margin-top: 0;
}

/* 차트 설정 버튼 & 패널 */
.chart-settings {
    position: relative;
}

.chart-settings-btn {
    width: 22px;
    height: 22px;
    border-radius: var(--border-radius-circle);
    border: 1px solid var(--bae-border);
    background: var(--bae-surface);
    color: var(--bae-text-dim);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.chart-settings-btn:hover {
    border-color: var(--bae-info);
    color: var(--bae-text-primary);
    opacity: 1;
}

/* popover="manual"(top layer) — 자리는 stocks.js 가 설정 버튼 묶음 기준 fixed 좌표로 준다(아래 6px). */
.chart-settings-panel {
    position: fixed;
    min-width: 140px;
    padding: 10px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--bae-border);
    background: var(--bae-bg);
    color: var(--bae-text-muted);
    font-size: 11px;
    line-height: 1.5;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: var(--transition);
}

.chart-settings-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.chart-settings-panel strong {
    display: block;
    color: var(--bae-text-primary);
    font-size: 11px;
    margin-bottom: 6px;
}

.chart-settings-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 0;
    color: var(--bae-text-muted);
}

.chart-settings-option input[type="checkbox"] {
    accent-color: var(--bae-accent);
    margin: 0;
    cursor: pointer;
}

.chart-type-btn {
    min-width: 60px;
    text-align: center;
    padding: 8px 12px;
    background: var(--bae-surface);
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius-sm);
    color: var(--bae-text-primary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 13px;
    line-height: 1.2;
    box-sizing: border-box;
    height: 36px;
}

.chart-type-btn:hover {
    background: var(--bae-surface-hover);
}

.chart-type-btn.active {
    background: var(--bae-accent);
    border-color: var(--bae-accent-fg);
    color: var(--bae-accent-text);
}

.chart-wrapper {
    position: relative;
    height: auto;
    min-height: 400px;
    max-height: 600px;
    flex: 1;
    background: var(--bae-surface);
    border-radius: var(--border-radius);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: relative;
    cursor: crosshair;
}

/* 손가락 세로 쓸기는 페이지 스크롤로 보낸다 — 줌 플러그인의 Hammer 가 캔버스에 인라인 `touch-action: none` 을
   넣어 차트 위에서는 페이지가 내려가지 않았다(2026-10-13 점검). 가로 이동·두 손가락 확대는 그대로 Hammer 가 받는다.
   ⚠️ 인라인 값을 이기려면 !important — Hammer 가 설정을 바꿀 때마다 다시 넣는다. */
#stockChart {
    touch-action: pan-y !important;
}

.chart-no-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--bae-text-dim);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chart-no-data p {
    margin: 0 0 8px 0;
    font-size: 15px;
}

.chart-no-data-sub {
    font-size: 13px !important;
}

/* 차트 로딩 인디케이터 */
.chart-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--bae-text-dim);
    font-size: 14px;
    z-index: 10;
}

.chart-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--bae-border);
    border-top-color: var(--bae-accent-fg);
    border-radius: var(--border-radius-circle);
    animation: chart-spin 0.8s linear infinite;
}

@keyframes chart-spin {
    to { transform: rotate(360deg); }
}

/* 반응형 디자인 */
@media (max-width: 1023.98px) {
    .stocks-container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
    }

    .stocks-sidebar-right {
        grid-column: 1;
        grid-row: 3;
    }

    .stocks-main {
        grid-column: 1;
        grid-row: 4;
    }

    /* 사이드바가 본문 아래로 내려오는 폭 — 2열. ⚠️ 3열이면 10개가 3+3+3+1 로 끝에 하나 남는다.
       ⚠️ **세로 우선**(왼쪽 1~5 · 오른쪽 6~10)으로 흘린다. 그리드로 두면 1·2 / 3·4 … 로
          지그재그라 순위표로 안 읽히고, 칸마다 막대가 계단처럼 줄어드는 것도 안 보인다.
          다단(`columns`)은 항목 수에 맞춰 알아서 반씩 나눈다(포트폴리오 2개면 1 · 1).
          회전 카드가 켜지면 트랙이 flex 가 되어 다단은 저절로 꺼진다. */
    .top10-list {
        display: block;
        columns: 2;
        column-gap: 28px;
    }

    .top10-list > li {
        break-inside: avoid;
    }

}

/* ====== 태블릿 세로 / 좁은 브라우저 (768px 미만) ====== */
@media (max-width: 767.98px) {
    .stocks-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    /* TOP 10: 2열 유지(펼쳤을 때) — 위와 같은 세로 우선 */
    .top10-list {
        column-gap: 20px;
    }

    /* 테이블: 시장/유형/상장주식수 컬럼 숨기기 (상장주식수는 등락률이 들어오며 7→8) */
    .stocks-table th:nth-child(3),
    .stocks-table td:nth-child(3),
    .stocks-table th:nth-child(4),
    .stocks-table td:nth-child(4),
    .stocks-table th:nth-child(8),
    .stocks-table td:nth-child(8) {
        display: none;
    }

    /* 남는 것: 종목명 · 코드 · 현재가 · 등락률 · 시가총액 */
    .stocks-table th:nth-child(1),
    .stocks-table td:nth-child(1) {
        width: 34%;
        padding-left: 12px;
    }

    .stocks-table th:nth-child(2),
    .stocks-table td:nth-child(2) {
        width: 15%;
    }

    .stocks-table th:nth-child(5),
    .stocks-table td:nth-child(5) {
        width: 19%;
    }

    .stocks-table th:nth-child(6),
    .stocks-table td:nth-child(6) {
        width: 16%;
    }

    .stocks-table th:nth-child(7),
    .stocks-table td:nth-child(7) {
        width: 16%;
    }

    .stocks-table th {
        padding: 8px 6px;
        font-size: 12px;
    }

    .stocks-table td {
        padding: 8px 6px;
        font-size: 13px;
    }

    .chart-type-btn {
        padding: 6px 8px;
        font-size: 12px;
        min-width: 50px;
        height: 32px;
    }

    .chart-wrapper {
        height: 400px;
        min-height: 300px;
        padding: 10px;
    }

}

/* ====== 모바일 (640px 미만) ====== */
@media (max-width: 639.98px) {
    .stock-page-content {
        padding: 5px !important;
    }

    .stocks-container {
        gap: 6px;
    }

    .top10-list {
        columns: 1;
    }

    /* 테이블: 시가총액도 숨기고 최소 컬럼만 (시가총액은 등락률이 들어오며 6→7)
       ⚠️ 등락률(6)은 **남긴다** — 이 폭에서 가장 보고 싶은 값이라 현재가와 함께 둔다. */
    .stocks-table th:nth-child(7),
    .stocks-table td:nth-child(7) {
        display: none;
    }

    .stocks-table th:nth-child(1),
    .stocks-table td:nth-child(1) {
        width: 40%;
        padding-left: 8px;
    }

    .stocks-table th:nth-child(2),
    .stocks-table td:nth-child(2) {
        width: 18%;
    }

    .stocks-table th:nth-child(5),
    .stocks-table td:nth-child(5) {
        width: 22%;
    }

    .stocks-table th:nth-child(6),
    .stocks-table td:nth-child(6) {
        width: 20%;
    }

    .stocks-table th {
        padding: 6px 4px;
        font-size: 11px;
    }

    .stocks-table td {
        padding: 6px 4px;
        font-size: 12px;
    }

    .stock-name-kr {
        font-size: 13px;
    }

    .stock-name-en {
        font-size: 10px;
    }

    /* 페이지네이션 */
    .pagination {
        gap: 4px;
    }

    .page-link {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* 차트 */
    .chart-type-btn {
        padding: 5px 6px;
        font-size: 11px;
        min-width: 44px;
        height: 28px;
    }

    .chart-wrapper {
        height: 340px;
        min-height: 260px;
        padding: 8px;
    }

}

@media (hover: none) and (pointer: coarse) {
    .chart-top-buttons {
        display: none;
    }
}

/* ===========================================
   모바일 체결내역 오버레이 (바텀시트)
   =========================================== */

.execution-overlay-backdrop {
    display: none;
}

.execution-overlay {
    display: none;
}

.execution-overlay-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--bae-text-dim);
    opacity: 0.4;
    margin: 10px auto 0;
    flex-shrink: 0;
}

.execution-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    flex-shrink: 0;
}

.execution-overlay-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--bae-text-primary);
}

.execution-overlay-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.execution-overlay-actions .btn-sm {
    padding: 6px;
    min-width: 0;
    border-radius: var(--border-radius);
}

.execution-overlay-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px;
    min-height: 0;
}

/* ====== 768px 미만: 모바일 체결 축약 + 오버레이 활성화 ====== */
@media (max-width: 767.98px) {

    /* 오버레이: 비활성 상태 (visibility로 숨김 → 트랜지션 가능) */
    .execution-overlay-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--shadow-overlay);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0s 0.3s;
    }

    .execution-overlay-backdrop.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.3s ease, visibility 0s 0s;
    }

    .execution-overlay {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 85vh;
        /* popover="manual"(top layer, stocks.js) — z-index 없이 막(1000)·상단바 위에 뜬다. */
        background: var(--bae-bg);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);   /* 정본 서랍 그림자를 위로 */
        flex-direction: column;
        transform: translateY(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.3s;
    }

    .execution-overlay.active {
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
    }
}

/* ===========================================
   백테스팅 시뮬레이터
   =========================================== */

.backtest-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 16px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    /* ⚠️ `overflow: hidden` 이면 안 된다 — 그 순간 이 요소가 스크롤 컨테이너가 되어
       안쪽 설정 패널의 sticky 가 죽는다(붙지 않고 그냥 흘러간다). `clip` 은 스크롤
       컨테이너를 만들지 않아 넘침만 자르면서 sticky 를 살려 둔다. */
    overflow-x: clip;
}

/* 설정 패널 — 결과가 길어도 따라오게 붙인다(2026-08-23 사용자 요청).
   ⚠️ align-self 가 없으면 grid 가 이 칸을 결과 높이(2,000px 넘는다)까지 늘려
      높이가 이미 충분해지므로 sticky 가 아예 안 걸린다.
   ⚠️ `top` 은 backtest.js 가 정한다 — 패널이 창보다 길면 20px 로 붙일 수 없다.
      그러면 맨 아래 [백테스트 실행] 이 잘린 채 도달할 방법이 없어진다. 그래서 창보다
      길 때는 음수 top 으로 **아래쪽을 맞춰** 붙인다(위쪽은 페이지를 올리면 보인다). */
.backtest-config {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    position: sticky;
    /* ⚠️ 상단바(2026-09-22 리디자인)가 sticky 56px 라 `top: 20px` 이면 그 뒤로 들어가
       패널 위쪽이 가린다. `--topbar-h` 는 ui.css 의 `:root` 토큰이고, 없으면 0 으로
       떨어져 옛 값과 같아진다. 실제 값은 backtest.js 가 다시 정한다(패널이 창보다
       길 때 음수 top 으로 아래를 맞춰야 하기 때문). */
    top: calc(var(--topbar-h, 0px) + 20px);
    align-self: start;
}

.config-section {
    background: var(--bae-bg-alt);
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius);
    padding: 14px;
    margin-bottom: 10px;
}

.config-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bae-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px 0;
}

.config-section-title.clickable {
    cursor: pointer;
    user-select: none;
    margin: 0;
}

details:not([open]) > .config-section-title.clickable {
    margin: 0;
}

details[open] > .config-section-title.clickable {
    margin: 0 0 10px 0;
}

.config-subsection-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bae-text-dim);
    margin: 0 0 8px 0;
}

.config-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bae-text-dim);
    margin-bottom: 4px;
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.config-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.config-field {
    display: flex;
    flex-direction: column;
}

/* 입력 요소 */
.backtest-input {
    width: 100%;
    padding: 7px 10px;
    font-size: 0.875rem;
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius-sm, 4px);
    background: var(--bae-bg);
    color: var(--bae-text-primary);
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.backtest-input:focus {
    outline: none;
    border-color: var(--bae-accent-fg);
}

.backtest-select {
    width: 100%;
    padding: 7px 10px;
    font-size: 0.875rem;
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius-sm, 4px);
    background: var(--bae-bg);
    color: var(--bae-text-primary);
    box-sizing: border-box;
    cursor: pointer;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-with-unit .backtest-input {
    flex: 1;
    min-width: 0;
}

.input-unit {
    font-size: 0.8125rem;
    color: var(--bae-text-dim);
    white-space: nowrap;
}

/* 종목 검색 드롭다운 */
.stock-search-row {
    position: relative;
}

/* popover="manual"(top layer) — 자리·폭은 backtest.js 가 입력칸 줄 기준 fixed 좌표로 준다. */
.stock-search-dropdown {
    position: fixed;
    background: var(--bae-bg-alt);
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius-sm, 4px);
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-lg);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    font-size: 0.8125rem;
    transition: background 0.15s;
}

.search-result-item:hover {
    background: var(--bae-surface-hover);
}

.sr-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.sr-add-btn {
    padding: 2px 7px;
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid var(--bae-border);
    border-radius: 3px;
    background: var(--bae-bg);
    color: var(--bae-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.sr-add-btn:hover {
    background: var(--bae-accent);
    color: var(--bae-accent-text);
    border-color: var(--bae-accent-fg);
}

.sr-add-benchmark:hover {
    background: var(--bae-text-dim);
    border-color: var(--bae-text-dim);
}

.sr-name {
    flex: 1;
    color: var(--bae-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-code {
    color: var(--bae-text-dim);
    font-size: 0.75rem;
}

.sr-market {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* 백테스트 종목 칸의 시장 배지 — 위 `.market-badge.market-*` 와 **같은 시장은 같은 색**(한국 = KOSPI 파랑,
   미국 = NASDAQ 청록, 코인 = 코인 주황). 예전에는 같은 시장인데 다른 원색이었다. 바탕은 정본 배지 22% tint. */
.badge-kr { background: rgba(147, 197, 253, 0.22); color: var(--bae-info); }
.badge-us { background: rgba(94, 234, 212, 0.22); color: #5EEAD4; }
.badge-coin { background: rgba(253, 186, 116, 0.22); color: var(--color-coin); }

.search-empty {
    padding: 12px;
    text-align: center;
    color: var(--bae-text-dim);
    font-size: 0.8125rem;
}

/* 포트폴리오/벤치마크 소제목 */
.picker-sub-title {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bae-text-muted);
    margin: 10px 0 4px;
    padding: 0;
}

.picker-sub-hint {
    font-weight: 400;
    font-size: 0.6875rem;
    color: var(--bae-text-dim);
}

.picker-divider {
    border: none;
    border-top: 1px solid var(--bae-border);
    margin: 10px 0 2px;
}

/* 선택된 종목 리스트 */
.selected-stocks-list {
    margin-top: 4px;
}

.empty-hint {
    color: var(--bae-text-dim);
    font-size: 0.8125rem;
    text-align: center;
    padding: 12px 0;
    margin: 0;
}

.portfolio-stock-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 0.8125rem;
}

.ps-name {
    flex: 1;
    color: var(--bae-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ps-code {
    color: var(--bae-text-dim);
    font-size: 0.75rem;
}

.ps-market {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
}

.ps-weight-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ps-weight-wrap .backtest-input {
    width: 52px;
    text-align: right;
    padding: 3px 6px;
    font-size: 0.875rem;
}

.picker-remove {
    padding: 2px 6px !important;
    font-size: 0.9rem;
    line-height: 1;
    min-height: auto !important;
    margin: 2px 0;
}

.equalize-btn {
    font-size: 0.65rem !important;
    padding: 4px !important;
    min-height: auto !important;
    margin-left: auto;
    margin-right: 38px;
}

.portfolio-weight-total {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--bae-text-muted);
}

.weight-total-text {
    margin-left: auto;
    margin-right: 30px;
}

.weight-total-text.weight-warning {
    color: var(--bae-danger);
}

.weight-total-text:not(.weight-warning) {
    color: var(--bae-success);
}

/* 전략 탭 */
.strategy-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.strategy-tab {
    flex: 1;
    padding: 7px 8px;
    font-size: 0.75rem;
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius-sm, 4px);
    background: var(--bae-bg);
    color: var(--bae-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.strategy-tab:hover {
    background: var(--bae-surface-hover);
}

.strategy-tab.active {
    background: var(--bae-accent);
    color: var(--bae-accent-text);
    border-color: var(--bae-accent-fg);
}

.strategy-detail {
    margin-top: 8px;
}

/* 시그널 규칙 */
.signal-rules {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.signal-rule {
    display: flex;
    gap: 4px;
    align-items: center;
}

.signal-rule .backtest-select {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    padding: 5px 6px;
}

.signal-remove {
    padding: 3px 7px !important;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.signal-combine {
    margin-top: 8px;
}

/* 벤치마크 */
.benchmark-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 0.8125rem;
    font-weight: normal;
}

.benchmark-item .ps-name {
    flex: 1;
    min-width: 0;
}

.benchmark-item .picker-remove {
    flex-shrink: 0;
}

.bmk-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 설정 저장/불러오기 */
.config-save-section {
    padding: 10px 14px;
}

.config-save-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* 실행 버튼 */
.btn-lg {
    padding: 12px 24px;
    font-size: 1rem;
}

.btn-block {
    width: 100%;
}

/* 버튼 색·상태(주·보조·위험)는 정본 button.md 대로 `ui.css` 의 `@layer comp` 가 정한다 — 여기는 모양만.
   ⚠️ 이 파일은 레이어 밖이라 여기서 `background`·`color`·`opacity` 를 주면 hover·active·disabled 가 전부 진다. */
.btn-primary {
    border: none;
    border-radius: var(--border-radius-sm, 4px);
    cursor: pointer;
    font-weight: 600;
}

.btn-primary:disabled {
    cursor: not-allowed;
}

/* 실행 버튼의 상태 색(재계산 초록 · 다시 받기 노랑) — 실행 중(disabled)에는 칠하지 않는다. 레이어 밖이라
   그대로 두면 disabled 의 회색 바탕을 이겨 실행 중에도 채운 색이 남는다. */
.btn-recalc:not(:disabled) {
    background: var(--bae-success);
}

.btn-refetch:not(:disabled) {
    background: var(--bae-warn);
}

.btn-outline {
    border-radius: var(--border-radius-sm, 4px);
    cursor: pointer;
    font-size: 0.72rem;
    padding: 3px 8px;
    transition: background-color 0.15s;
}

.btn-danger {
    border-radius: var(--border-radius-sm, 4px);
    cursor: pointer;
}

/* 결과 패널 */
.backtest-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* 포트폴리오 이름 편집 */
.portfolio-name-section {
    padding: 10px 16px;
    background: var(--bae-bg-alt);
    border: 1px solid var(--bae-accent-fg);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--bae-accent-fg);
    margin-bottom: 8px;
}

/* 실행 전 — 자리만 잡고 안내 문구를 흐리게. accent 테두리는 저장된 결과가 생겨야 켠다. */
.portfolio-name-section.is-empty {
    border-color: var(--bae-border);
}

.portfolio-name-section.is-empty .portfolio-name-text {
    color: var(--bae-text-dim);
    font-weight: 400;
}

.portfolio-name-section.is-empty .portfolio-name-edit-btn {
    visibility: hidden;
}

.portfolio-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;   /* 공개 토글(24px)이 나중에 떠도 줄이 1px 도 안 커지게 */
}

.portfolio-name-row svg {
    color: var(--bae-accent-fg);
    flex-shrink: 0;
}

.portfolio-name-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--bae-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;     /* 늘어나지 않는다 — 연필이 이름 바로 뒤에 붙는다(정본 inline-edit.md) */
    min-width: 0;
}

.portfolio-name-input {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius-sm);
    background: var(--bae-bg);
    color: var(--bae-text-primary);
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.portfolio-name-input:focus {
    border-color: var(--bae-accent-fg);
}

.portfolio-name-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bae-text-dim);
    padding: 4px;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    flex-shrink: 0;
}

.portfolio-name-edit-btn:hover {
    color: var(--bae-accent-fg);
    background: var(--bae-surface-hover);
}

.portfolio-name-edit-btn svg { color: inherit; }   /* 줄의 별 아이콘 accent 를 물려받지 않게 */

/* 마우스 기기에서는 이름 줄에 올렸을 때·키보드 포커스 때만 보인다. 손가락(hover 없음)은 늘 보인다. */
@media (hover: hover) {
    .portfolio-name-edit-btn { opacity: 0; }

    .portfolio-name-row:hover .portfolio-name-edit-btn,
    .portfolio-name-edit-btn:focus-visible { opacity: 1; }
}

/* 공개/비공개 토글 — 이름 옆 작은 알약 버튼. 켜짐(공개)은 accent tint 로 표시한다.
   ⚠️ 색만으로 상태를 말하지 않는다 — 라벨(공개/비공개)이 함께 바뀐다. */
/* 이름(늘어나지 않는다) 뒤 빈칸 — 공개 토글·ⓘ·목록 버튼을 줄 끝으로 민다(토글이 숨어도 목록 버튼은 끝에) */
.portfolio-name-gap { flex: 1; }

.portfolio-public-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius-pill);
    background: var(--bae-surface-alt);
    color: var(--bae-text-dim);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.portfolio-public-btn:hover {
    border-color: var(--bae-accent-fg);
    color: var(--bae-text-muted);
}

.portfolio-public-btn.is-public {
    background: var(--primary-bg);
    border-color: var(--bae-accent-fg);
    color: var(--bae-accent-fg);
}

/* ── 종목 구성 — 비중 표(2026-10-19) ── 행 = 종목, 열 = 시점, 칸 = 비중(비우면 "—" = 안 담음).
   종목 열은 왼쪽에 붙고 시점 열은 옆으로 민다. 앞 열 대비는 칸 테두리·바탕만(글자를 붙였더니 줄 높이가 두 배가 됐다).
   안내 문구·범례는 두지 않는다(설명성 문구를 싫어함) — 늦게 시작하는 종목은 칸의 ! 풍선으로만. */
.wt-tools { display: inline-flex; gap: 4px; margin-left: auto; }
.wt-tools [hidden] { display: none !important; }   /* .btn 의 display 가 hidden 을 이겨 [크게 보기]가 늘 보였다 */
.wt-tools .btn { margin: 0 !important; padding: 4px !important; min-height: auto !important; }   /* 균등 배분의 옛 여백(!important)을 셋이 같게 */
.picker-sub-title:has(.wt-tools) { display: flex; align-items: center; gap: 4px; }

/* 바탕은 모두 카드와 같게(--bt-card) — 머리 줄을 한 단계 밝게, 종목 칸을 한 단계 어둡게 두었더니 색이 따로 놀았다(사용자 "색상이 별로").
   구조(테두리 상자·머리 줄·고정 종목 칸)는 그대로 — 예전 목록 결로 바꿔 봤으나 사용자가 이 모양을 골랐다. */
.wt-wrap {
    overflow-x: auto;
    border: 1px solid var(--bae-border);
    border-radius: 8px;
    scrollbar-width: thin;
}

.wt { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 0.8125rem; }
.wt th,
.wt td { padding: 4px 5px; border-bottom: 1px solid var(--bae-border); text-align: center; white-space: nowrap; }
.wt tbody tr:last-child td { border-bottom: 0; }
.wt tfoot td { border-top: 1px solid var(--bae-border); border-bottom: 0; color: var(--bae-text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.wt thead th { background: var(--bt-card, var(--bae-bg-alt)); }

.wt .wt-name {
    position: sticky;
    left: 0;
    z-index: 2;   /* 칸 모서리의 ! (z-index 1)가 밀려 와도 그 위를 덮는다 */
    max-width: 140px;
    min-width: 104px;
    padding-left: 8px;
    border-right: 1px solid var(--bae-border);
    background: var(--bt-card, var(--bae-bg-alt));   /* 가로로 밀 때 뒤 칸을 가리려면 불투명해야 한다 — 카드와 같은 색 */
    text-align: left;
}

.wt thead .wt-name { z-index: 3; color: var(--bae-text-dim); font-size: 0.75rem; font-weight: 600; }
.wt-name { position: relative; }
.wt-name__text { display: block; overflow: hidden; padding-right: 16px; }
.wt-name__text b { display: block; overflow: hidden; color: var(--bae-text-primary); font-weight: 500; text-overflow: ellipsis; }
.wt-name__text small { color: var(--bae-text-dim); font-size: 0.625rem; }
.wt-name__text .ps-market { margin-left: 3px; font-size: 0.625rem; }   /* 배지 단계 10px(typography.md — 9px 는 쓰지 않는다) */

.wt-rm {   /* 모든 시점에서 빼기 — 마우스 기기는 줄에 올렸을 때만, 손가락은 늘 */
    position: absolute;
    top: 50%;
    right: 2px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--bae-text-dim);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.wt-rm:hover { color: var(--bae-danger); background: var(--bae-surface-hover); }
@media (hover: hover) {
    .wt-rm { opacity: 0; }
    .wt tr:hover .wt-rm,
    .wt-rm:focus-visible { opacity: 1; }
}

.wt-col { min-width: 70px; }
.wt-head {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 58px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--bae-text-primary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.wt-head b { font-weight: 600; }
.wt-head small { color: var(--bae-text-dim); font-size: 0.625rem; }
.wt-col .wt-head { border-color: var(--bae-border-hover); }   /* 누르면 시점 창 — 바탕은 카드 그대로 */
.wt-col .wt-head:hover { background: var(--bae-surface-hover); }
.wt-col:nth-child(2) .wt-head { border-color: transparent; background: none; cursor: default; }  /* 처음(바꿀 날이 없다) */
.wt-col.has-error .wt-head { position: relative; border-color: var(--bae-danger); }
.wt-col.has-error .wt-head::after {   /* 정본 알림 점 — 이 시점에 고칠 것이 있다 */
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bae-danger);
    box-shadow: 0 0 0 1.5px var(--bt-card, var(--bae-bg-alt));
}

.wt-box { position: relative; display: inline-block; }   /* ! 를 칸 모서리에 붙이는 틀 — 칸 안 숫자를 가리지 않게 */
.wt-cell {
    width: 54px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--bae-border);
    border-radius: 5px;
    background: var(--bae-bg);
    color: var(--bae-text-primary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    -moz-appearance: textfield;
}

.wt-cell::-webkit-outer-spin-button,
.wt-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wt-cell::placeholder { color: var(--bae-text-dim); text-align: center; }
.wt-cell:placeholder-shown { border-style: dashed; }
.wt-cell:focus { outline: none; border-color: var(--bae-accent-fg); box-shadow: 0 0 0 1px var(--bae-accent-fg); }
/* 앞 열 대비 — 테두리와 글자색만(바탕까지 물들였더니 칸이 알록달록 튀었다) */
.wt-cell.is-down { border-color: color-mix(in srgb, var(--chart-down-text, #6ea8fe) 70%, var(--bae-border)); color: var(--chart-down-text, #6ea8fe); }
.wt-cell.is-up { border-color: color-mix(in srgb, var(--chart-up-text, #ff847c) 70%, var(--bae-border)); color: var(--chart-up-text, #ff847c); }
.wt-cell.is-new { border-color: color-mix(in srgb, var(--bae-accent-fg) 70%, var(--bae-border)); color: var(--bae-accent-fg); }

.metric-info.wt-warn {   /* 시세가 이 시점보다 늦게 시작 — 누르면(ⓘ 규칙) 풍선. 칸 오른쪽 위 모서리에.
                            ⚠️ 카드용 .metric-info(파일 뒤쪽, 위치·크기·바탕)를 이겨야 해서 두 클래스로 */
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bae-warn);
    color: var(--bae-accent-text);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
}
.metric-info.wt-warn:hover { background: var(--bae-warn); color: var(--bae-accent-text); }

.wt-sum.is-bad { color: var(--bae-danger); font-weight: 600; }
.wt-fit {   /* 합계가 100 이 아닌 열에만 — 비례로 100% 에 맞춘다 */
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid var(--bae-border-hover);
    border-radius: 4px;
    background: none;
    color: var(--bae-text-muted);
    vertical-align: middle;
    cursor: pointer;
}
.wt-fit:hover { color: var(--bae-text-primary); background: var(--bae-surface-hover); }
.wt-fit .c-ico { width: 15px; height: 15px; }

@media (max-width: 63.99rem) {
    .wt-cell { font-size: 16px; }   /* iOS 가 누를 때 화면을 키우지 않게 */
}

/* 종목 추가 — 작은 버튼 아래 떠 있는 검색창(popover). 결과 목록(.stock-search-dropdown)은 그 안 입력칸 아래에 붙는다. */
.bt-search-pop {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--bae-border);   /* 버튼 옆 메뉴(float-menu) — float-panel-menu.md */
    border-radius: 8px;
    background: var(--bae-surface);
    box-shadow: var(--shadow-lg);
    overflow: visible;
}

.bt-search-pop .backtest-input { width: 100%; }

/* 시점 창 — 열 머리 아래 편집 패널(popover, top layer — float-panel 면) */
.phase-pop {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(var(--bae-accent-rgb), 0.55);
    border-radius: 8px;
    background: var(--bae-surface);
    box-shadow: var(--shadow-lg);
    color: var(--bae-text-primary);
}

.phase-pop .config-label { display: block; margin: 0 0 4px; }
.phase-pop .config-label + * { width: 100%; margin-bottom: 10px; }
.phase-pop .field-error { margin: -4px 0 8px; }
.phase-pop__foot { display: flex; justify-content: flex-end; }

/* 크게 보기 — 같은 표를 넓은 창으로(modal.md — 넓은 표를 보는 창이라 높이 상한 90vh, 본문만 안쪽 스크롤) */
.phase-dlg {
    width: min(960px, calc(100vw - 32px));
    max-height: 90vh;
    padding: 0;
    border: 1px solid var(--bae-border);
    border-radius: 12px;
    background: var(--bae-surface);
    box-shadow: var(--shadow-xl);
    color: var(--bae-text-primary);
    overflow: hidden;
    --bt-card: var(--bae-surface);   /* 표의 고정 칸·머리 줄 바탕도 창과 같게 */
}

.phase-dlg[open] { display: flex; flex-direction: column; }   /* [open] 으로만 — 닫힌 dialog 의 display:none 을 덮지 않게 */

.phase-dlg::backdrop { background: var(--shadow-overlay); }
.phase-dlg:focus { outline: none; }   /* 열 때 창 자신에 포커스가 가서 테두리가 강조됐다 — 다른 창처럼 없앤다 */
.phase-dlg__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--bae-border); }
.phase-dlg__head h2 { margin: 0; font-size: 0.875rem; font-weight: 500; }
.phase-dlg__body { flex: 1; min-height: 0; padding: 14px; overflow: auto; overscroll-behavior: contain; }

/* 결과 — 구간별 구성 띠(차트 아래). 폭 = 실제 기간, 안 = 비중. 번호는 차트 세로 점선의 번호. */
.phase-strip { margin-top: 10px; }
.phase-strip[hidden] { display: none; }
.phase-strip__row { display: flex; gap: 3px; }
.phase-strip__seg { flex-basis: 0; min-inline-size: 24px; }
.phase-strip__bar { display: flex; block-size: 10px; overflow: hidden; border-radius: 3px; }
.phase-strip__bar > span { display: block; }
.phase-strip__cap {
    margin-top: 4px;
    overflow: hidden;
    color: var(--bae-text-dim);
    font-size: 0.6875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phase-strip__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--bae-text-muted); font-size: 0.6875rem; }
.phase-strip__legend span { display: inline-flex; align-items: center; gap: 5px; }
.phase-strip__legend i { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 2px; }

.portfolio-rank-note[hidden] { display: none; }

/* ── 내 포트폴리오(2026-10-19 — 프리셋을 합쳤다) ── ☆ 줄 끝 목록 버튼이 여는 창(popover, top layer).
   자리는 backtest.js 가 버튼 아래에 맞춘다. 줄 = [이름·종목 요약(누르면 불러오기)] [점수] [전략·공개] [지우기]. */
.portfolio-list-btn { flex-shrink: 0; }

.portfolio-menu {
    position: fixed;
    inset: auto;
    margin: 0;
    max-height: min(26rem, var(--float-max));
    padding: 0;
    overflow: hidden auto;   /* 가로는 막는다 — 지우기 버튼의 44px 누름 자리가 넘쳐 가로 스크롤이 생겼다(프리셋 목록 때) */
    overscroll-behavior: contain;   /* 목록 끝에서 더 굴려도 페이지가 따라 움직이지 않게 */
    border: 1px solid var(--bae-border);   /* 버튼 옆 메뉴(float-menu) — float-panel-menu.md */
    border-radius: 8px;
    background: var(--bae-surface);
    box-shadow: var(--shadow-lg);
    color: var(--bae-text-primary);
}

.portfolio-menu__head {
    position: sticky;
    z-index: 1;   /* 줄의 지우기 버튼(터치 기기는 누름 자리 때문에 relative)이 머리 위로 올라왔다 */
    top: 0;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--bae-border);
    background: var(--bae-surface);
    color: var(--bae-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.portfolio-menu__count { color: var(--bae-text-dim); font-weight: 400; }

.portfolio-menu__list { margin: 0; padding: 4px 0 6px; list-style: none; }

.portfolio-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px 2px 4px;
}

.portfolio-menu__item + .portfolio-menu__item { border-top: 1px solid var(--bae-divider, var(--bae-border)); }
.portfolio-menu__item.is-current { box-shadow: inset 3px 0 0 var(--bae-accent-fg); }

.portfolio-menu__load {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--border-radius-sm);
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.portfolio-menu__load:hover { background: var(--bae-surface-hover); }
.portfolio-menu__load:focus-visible { outline: 2px solid var(--bae-accent-fg); outline-offset: -2px; }

.portfolio-menu__name,
.portfolio-menu__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-menu__name { font-size: 0.8125rem; font-weight: 600; }
.portfolio-menu__item.is-current .portfolio-menu__name { color: var(--bae-accent-fg); }
.portfolio-menu__sub { color: var(--bae-text-dim); font-size: 0.6875rem; }

.portfolio-menu__grade {
    flex-shrink: 0;
    color: var(--bae-text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.portfolio-menu__grade.is-new { color: var(--bae-text-dim); }
.portfolio-menu__tags { flex-shrink: 0; color: var(--bae-text-dim); font-size: 0.6875rem; }
.portfolio-menu__del { flex-shrink: 0; color: var(--bae-text-dim); }
.portfolio-menu__del:hover { color: var(--bae-danger); }

.portfolio-menu__empty { padding: 14px; color: var(--bae-text-dim); font-size: 0.8125rem; text-align: center; }

/* 진행률 — 토스트 자리(아래 가운데)에 떠 있는다. 본문 위에 끼우면 실행할 때마다 아래가
   밀렸다 내려왔다(2026-09-28 사용자 지적). 토스트와 달리 실행이 끝날 때까지 남아 있어야 해서
   `toast()` 가 아니라 이 요소를 켜고 끈다. 자리·겉모양은 토스트(`ui.css` `.c-toast`, 정본 값)와 같게 둔다. */
.backtest-progress {
    position: fixed;
    z-index: 1000;
    inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
    inset-inline-start: 50%;
    inline-size: min(20rem, calc(100% - 2rem));
    padding: 12px 16px;
    background: var(--bae-surface-alt);
    border: 1px solid var(--bae-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    text-align: center;
    transform: translateX(-50%);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bae-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: var(--bae-accent);
    border-radius: 3px;
    transition: width 0.3s;
    width: 0%;
}

.progress-text {
    font-size: 0.8125rem;
    color: var(--bae-text-dim);
}

/* 총 점수 카드 */
.total-score-card {
    background: var(--bae-bg-alt);
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius);
    padding: 10px 18px;
    display: flex;
    gap: 24px;
    align-items: center;
    position: relative;
    margin-bottom: 2px;
}

.score-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
}

.score-label {
    font-size: 0.75rem;
    color: var(--bae-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.score-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--bae-text-primary);
}

.score-number.score-high { color: var(--bae-success); }
.score-number.score-mid  { color: var(--bae-warn); }
.score-number.score-low  { color: var(--bae-danger); }

.score-grade {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bae-text-dim);
}

.score-grade.score-high { color: var(--bae-success); }
.score-grade.score-mid  { color: var(--bae-warn); }
.score-grade.score-low  { color: var(--bae-danger); }

.score-info-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.score-breakdown {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    max-height: 170px;
}

.score-breakdown canvas {
    max-width: 100%;
    max-height: 100%;
}

/* 지표 카드 */
.metrics-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: -9px;
}

.metric-card {
    background: var(--bae-bg-alt);
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.metric-info {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bae-bg);
    color: var(--bae-text-dim);
    font-size: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    z-index: 1;
}

/* ⚠️ z-index 를 여기서 올려야 한다. `.metric-info` 는 위치가 잡힌 채 z-index 를 가져
   **스택 컨텍스트**를 만드는데, 그러면 안에 있는 툴팁의 z-index: 100 은 그 안에서만
   통한다 — 밖에서는 아이콘의 1 로 취급돼 뒤에 있는 다른 카드의 ⓘ 가 툴팁 위로 올라온다
   (2026-08-23 사용자 제보). 아이콘 자체를 올리면 툴팁도 함께 올라간다.
   ⓘ 동작은 관리자 ⓘ 와 같다(2026-10-13 통일) — 마우스는 올리면, 키보드는 포커스로 뜨고, 손가락은 tooltip.js 가
   탭마다 `.is-open` 을 여닫는다. ⚠️ hover 는 마우스 기기에서만, 포커스는 :focus-visible 만 본다 — 손가락으로 누른
   자리에 남는 hover·focus 가 풍선을 붙잡아 다시 탭해도 닫히지 않았다. */
.metric-info.is-open,
.metric-info:focus-visible {
    background: var(--bae-accent);
    color: var(--bae-accent-text);
    outline: none;
    z-index: 100;
}

@media (hover: hover) {
    .metric-info:hover {
        background: var(--bae-accent);
        color: var(--bae-accent-text);
        z-index: 100;
    }

    .metric-info:hover .metric-tooltip { display: block; }
}

/* iOS Safari 는 누를 수 있어 보이는 요소(cursor: pointer)에서만 문서로 click 을 올려 보낸다 — 탭 토글이 그걸 받는다. */
@media (hover: none) {
    .metric-info { cursor: pointer; }
}

/* 설정 폼 안에서 쓰는 ⓘ — 카드용 `.metric-info` 는 카드 모서리에 절대배치되므로
   라벨 옆에 인라인으로 서게 위치만 되돌린다(툴팁은 이 아이콘 기준으로 뜬다). */
.config-info {
    position: relative;
    top: auto;
    right: auto;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
    width: 14px;
    height: 14px;
    font-size: 0.625rem;
}

.config-info[hidden] {
    display: none;
}

/* 적립 유예 ⓘ 는 설명이 길다 — 풍선을 ⓘ 가 아니라 칸 기준(select 아래·오른쪽 끝 맞춤)으로 띄워
   좁은 화면에서 왼쪽 밖으로 나가지 않게 한다(390px 에서 -91px 로 잘렸다, 2026-10-13). */
.config-field:has(> label > #dcaDeferHint) {
    position: relative;
}

#dcaDeferHint {
    position: static;
}

.metric-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    max-width: 300px;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    z-index: 100;
    pointer-events: none;
}

.metric-info.is-open .metric-tooltip,
.metric-info:focus-visible .metric-tooltip {
    display: block;
}

.score-info-btn .metric-tooltip {
    min-width: 280px;
    max-width: 400px;
}

.metric-label {
    font-size: 0.75rem;
    color: var(--bae-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metric-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bae-text-primary);
}

.metric-value.positive {
    color: var(--bae-success);
}

.metric-value.negative {
    color: var(--bae-danger);
}

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

.metric-bmk {
    font-size: 0.75rem;
    color: var(--bae-text-dim);
    display: none;
}

.metric-bmk.visible {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.metric-bmk .bmk-val {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    cursor: default;
}

.metric-bmk .bmk-val:hover::after {
    content: attr(data-bmk);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--bae-bg-alt);
    color: var(--bae-text-primary);
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius, 6px);
    font-size: 0.6875rem;
    font-weight: 400;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);   /* 툴팁과 같은 값 */
    z-index: 10;
    pointer-events: none;
}

/* 차트 영역 */
.backtest-chart-section {
    background: var(--bae-bg-alt);
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius);
    padding: 14px;
}

/* 결과 수치는 고정폭 숫자로 — 자리 수가 바뀌어도 흔들리지 않고 세로로 맞는다(정본 typography 결정 #8). */
.metric-value,
.trade-stat-value,
.score-number,
.portfolio-weight-total,
.annual-returns-table {
    font-variant-numeric: tabular-nums;
}

.result-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bae-text-muted);
    margin: 0 0 10px 0;
}

.backtest-chart-wrapper {
    position: relative;
    height: 350px;
}

/* 연도별 수익률 테이블 */
.annual-returns-section {
    background: var(--bae-bg-alt);
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius);
    padding: 14px;
}

.table-responsive {
    overflow-x: auto;
}

.annual-returns-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.annual-returns-table th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--bae-text-dim);
    border-bottom: 2px solid var(--bae-border);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.annual-returns-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--bae-border);
    color: var(--bae-text-primary);
}

.annual-returns-table .positive {
    color: var(--bae-success);
}

.annual-returns-table .negative {
    color: var(--bae-danger);
}

/* 거래 요약 */
.trade-summary-section {
    background: var(--bae-bg-alt);
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius);
    padding: 14px;
}

.trade-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
}

.trade-stat {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--bae-border);
}

.trade-stat-label {
    font-size: 0.8125rem;
    color: var(--bae-text-dim);
}

.trade-stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bae-text-primary);
    text-align: right;
}

/* 반응형 */
@media (max-width: 1023.98px) {
    .backtest-container {
        grid-template-columns: 1fr;
    }

    .backtest-config {
        order: 1;
        /* 한 컬럼이 되면 설정이 결과 **위**로 온다 — 따라다닐 이유가 없고,
           붙여두면 결과를 가린다. */
        position: static;
    }

    .backtest-results {
        order: 2;
    }

    .metrics-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .config-grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .metrics-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639.98px) {
    .total-score-card {
        flex-direction: column;
        gap: 12px;
    }

    .score-main {
        flex-direction: row;
        gap: 10px;
        min-width: auto;
    }

    .score-breakdown {
        min-height: 180px;
        max-height: 220px;
    }

    .strategy-tabs {
        flex-wrap: wrap;
    }

    .strategy-tab {
        flex: 0 0 calc(50% - 2px);
    }

    .trade-summary-grid {
        grid-template-columns: 1fr;
    }

    .config-grid-3 {
        gap: 6px;
    }

    .config-section {
        padding: 10px;
    }
}

@media (max-width: 639.98px) {
    .metrics-cards {
        grid-template-columns: 1fr 1fr;
    }

    .metric-card {
        padding: 10px;
    }

    .metric-value {
        font-size: 1rem;
    }

    .config-grid {
        grid-template-columns: 1fr;
    }

    .config-grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .signal-rule {
        flex-wrap: wrap;
    }

    .signal-rule .backtest-select {
        flex: 1 1 100%;
    }

    .search-result-item {
        flex-wrap: wrap;
    }

    .sr-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: -2px;
    }

    .backtest-chart-wrapper {
        height: 250px;
    }

    .trade-stat {
        grid-template-columns: 1fr auto;
    }
}

/* ===========================================
   등락률 — 목록 · TOP10 · 상세 · `/quotes` 공용
   =========================================== */

/* ⚠️ **오르면 빨강, 내리면 파랑.** 사이트 차트(`--chart-up-color`)와 같은 방향이다.
      finviz 는 반대(오르면 초록)지만, 한 사이트 안에서 색이 뒤집히는 쪽이 더 위험하다.

   ⚠️ 이 세 클래스는 여기 **한 곳에만** 둔다. `/quotes` 는 stocks.css 를 먼저 싣고
      quotes.css 를 뒤에 실으므로 두 화면이 같은 정의를 쓴다 — 양쪽에 복사하면
      한쪽만 고쳐져 색이 갈라진다. */
.q-up { color: var(--chart-up-text); }
.q-down { color: var(--chart-down-text); }
.q-flat { color: var(--bae-text-dim); }

.stocks-table .stock-price {
    font-variant-numeric: tabular-nums;
}

/* `.stocks-table td`가 기본 글자색을 더 높은 우선순위로 지정한다. 목록 셀에서는 방향색을
   같은 우선순위로 다시 선언해야 현재가와 등락률이 실제 화면에서도 흰색으로 덮이지 않는다. */
.stocks-table .q-up { color: var(--chart-up-text); }
.stocks-table .q-down { color: var(--chart-down-text); }
.stocks-table .q-flat { color: var(--bae-text-dim); }

/* ⚠️ 좁은 화면에서 어느 열을 접을지는 **위쪽 `@media (768px/480px)` 블록**이 이미
      정하고 있다. 여기서 또 정의하면 브레이크포인트가 둘로 갈린다 — 건드리지 말 것. */

/* ===========================================
   모바일 개편 (2026-09-15) — 회전 카드 · 체결 최신 1건
   =========================================== */

/* ⚠️ 모바일 개편 규칙은 **이 블록 한 곳에** 모은다. 위쪽 768/640px 블록과 겹치는 속성은 여기서
      선택자를 한 단계 더 구체적으로 써서 이긴다 — quotes.css 가 이 파일 **뒤에** 실리므로
      같은 우선순위로는 지는 규칙이 있다. */

/* 회전 카드의 머리·번호·진행바·펼침 버튼은 모바일에서만 보인다. */
.rotator-head,
.rotator-count,
.rotator-bar,
.rotator-expand {
    display: none;
}

/* 넓은 화면에서는 줄이 없는 것과 같다 — 두 섹션이 `.quotes-container` 의 flex 자식으로 남는다. */
.quote-rotator-row {
    display: contents;
}

@media (max-width: 767.98px) {
    /* ── 회전 카드 공통 (`/js/rotator.js`) ─────────────────────────── */
    [data-rotator] {
        position: relative;
        overflow: hidden;
    }

    [data-rotator]:not(.rotator-expanded) [data-rotator-track] {
        display: flex;
        flex-direction: row;
        gap: 0;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    [data-rotator]:not(.rotator-expanded) [data-rotator-track]::-webkit-scrollbar {
        display: none;
    }

    /* 한 장 = 트랙 폭 전체. 비었을 때의 안내 문구도 같은 폭으로 선다. */
    [data-rotator]:not(.rotator-expanded) [data-rotator-track] > * {
        flex: 0 0 100%;
        min-width: 0;
        scroll-snap-align: start;
    }

    .rotator-head {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .rotator-title {
        font-size: 11px;
        font-weight: 600;
        color: var(--bae-text-dim);
    }

    .rotator-count {
        display: inline;
        margin-left: auto;
        font-size: 11px;
        font-weight: 600;
        color: var(--bae-text-dim);
        font-variant-numeric: tabular-nums;
    }

    /* 다음 장까지 남은 시간. JS 가 `--rotator-dur` 과 `.rotator-running` 을 준다. */
    .rotator-bar {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: rgba(255, 255, 255, 0.05);
        pointer-events: none;
    }

    .rotator-bar > i {
        display: block;
        width: 0;
        height: 100%;
        background: var(--bae-accent);
        opacity: 0.75;
    }

    .rotator-running .rotator-bar > i {
        animation: rotator-fill var(--rotator-dur, 4s) linear forwards;
    }

    @keyframes rotator-fill {
        to { width: 100%; }
    }

    .rotator-expand {
        display: inline-block;
        padding: 3px;
        border: 1px solid var(--bae-border);
        border-radius: 999px;
        background: transparent;
        color: var(--bae-text-muted);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
    }

    .rotator-single .rotator-bar,
    .rotator-single .rotator-count,
    .rotator-single .rotator-expand,
    .rotator-expanded .rotator-bar,
    .rotator-expanded .rotator-count {
        display: none;
    }

    .rotator-expanded .rotator-expand {
        margin-left: auto;
    }

    /* ── 지수·환율: 두 장을 나란히 ─────────────────────────────────── */
    .quote-rotator-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }

    /* blog.css 의 `div::after`(float 해제용)가 grid 에서는 **두 번째 줄**이 되어 행 간격 8px 이
       아래에 더 붙는다(실측: 섹션 113px 인데 줄이 121px). 이 줄에는 float 이 없다. */
    .quote-rotator-row::after {
        content: none;
    }

    .quote-rotator-row > .quote-section {
        padding: 8px 0 6px;
        border: 1px solid var(--bae-border);
        border-radius: var(--border-radius-lg, 8px);
        background: var(--bae-surface);
    }

    .quote-rotator-row .rotator-head {
        padding: 0 10px 2px;
    }

    .quote-rotator-row .quote-card {
        padding: 2px 10px 4px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    /* 탭하면 :hover 가 남는다 — 카드 배경이 한 장만 밝아진 채로 굳지 않게. */
    .quote-rotator-row .quote-card:hover,
    .quote-rotator-row .quote-card:focus-visible {
        background: transparent;
    }

    .quote-rotator-row .quote-card-head {
        margin-bottom: 2px;
    }

    .quote-rotator-row .quote-card-name {
        font-size: 13px;
    }

    .quote-rotator-row .quote-card-body {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .quote-rotator-row .quote-card-figures {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 6px;
    }

    .quote-rotator-row .quote-card-price {
        font-size: 17px;
    }

    .quote-rotator-row .quote-card-pct {
        font-size: 12px;
    }

    .quote-rotator-row .quote-spark {
        flex: none;
        width: 100%;
        height: 24px;
    }

    .quote-rotator-row .quote-empty {
        padding: 20px 8px;
    }

    /* ── 포트폴리오 TOP10: 한 종목씩 크게 ─────────────────────────────── */
    .top10-section[data-rotator] {
        padding: 12px 0 0;
    }

    .top10-section[data-rotator] h3 {
        margin: 0 14px 2px;
        font-size: 15px;
    }

    .top10-section[data-rotator] .top10-empty {
        padding: 24px 12px;
    }

    /* 펼치면 위쪽 768/640px 블록이 정한 지금의 목록으로 돌아간다 — 여백만 준다. */
    .top10-section.rotator-expanded .top10-list {
        padding: 8px 10px 10px;
    }

    /* 한 장일 때는 같은 행을 크게 — 넘어갈 때마다 막대가 그 종목의 1위 대비 크기를 보인다. */
    .top10-section[data-rotator]:not(.rotator-expanded) .top10-link {
        min-height: 70px;
        padding: 12px 14px 16px;
    }

    .top10-section[data-rotator]:not(.rotator-expanded) .top10-nm {
        font-size: 16px;
    }

    .top10-section[data-rotator]:not(.rotator-expanded) .top10-val {
        font-size: 17px;
    }

    .top10-section[data-rotator]:not(.rotator-expanded) .top10-bar {
        height: 6px;
    }

}

/* 비중 표의 작은 버튼 — 터치 누를 자리 44px(button.md, 보이는 크기는 그대로).
   ✕(.wt-rm)는 마우스 기기에서 hover 때만 보이므로 `pointer: coarse` 에만 — 터치 노트북에서 안 보이는 판정 영역이 옆 칸 입력을 가로채지 않게.
   이미 absolute 라 position 을 덮지 않는다. */
@media (pointer: coarse) {
    .wt-rm::after {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: 100%;
        block-size: 100%;
        min-inline-size: 44px;
        min-block-size: 44px;
        transform: translate(-50%, -50%);
    }
}

@media (any-pointer: coarse) {
    .wt-fit { position: relative; }
    .wt-fit::after {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: 100%;
        block-size: 100%;
        min-inline-size: 44px;
        min-block-size: 44px;
        transform: translate(-50%, -50%);
    }
    .wt-wrap { padding-block-end: 6px; }   /* 마지막 행(합계) ::after 의 세로 넘침을 받는다 — 안 받으면 표 틀에 세로 스크롤이 생긴다 */
}