/* 대시보드 '종목' 탭(etf.js) — 매수 후보 ETF + 관심 종목(미국). 색·간격은 base.css 토큰만 쓴다. 클래스는 전부 etf- 접두사. */

.etf-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── 머리 줄 ─────────────────────────────────────── */
.etf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}
.etf-lead { min-width: 0; color: var(--text-2); font-size: var(--fs-sm); }
.etf-lead strong { color: var(--text); font-weight: 700; }
.etf-fx { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

.etf-notice-slot:empty { display: none; }
.etf-notice {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.etf-notice .empty-text { max-width: 560px; overflow-wrap: anywhere; }

/* ── 지수별 그룹 ─────────────────────────────────── */
.etf-group { gap: 14px; }
.etf-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.etf-group-sub { color: var(--muted); font-size: var(--fs-xs); }

.etf-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 12px;
}

/* ── 카드 ────────────────────────────────────────── */
.etf-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 14px 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.etf-card:hover { border-color: var(--accent-line); }
.etf-card.is-open { border-color: var(--accent); background: var(--surface3); }
.etf-card.is-empty { cursor: default; }
.etf-card.is-empty:hover { border-color: var(--border); }

.etf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.etf-sym { color: var(--text); font-size: var(--fs-md); font-weight: 800; letter-spacing: .01em; }
.etf-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}
.etf-badge.is-us { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.etf-badge.is-kr { color: var(--text); background: var(--surface3); }

.etf-name {
    margin-top: -4px;
    color: var(--muted);
    font-size: var(--fs-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.etf-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.etf-price { color: var(--text); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; }
.etf-date { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.etf-date.is-stale { color: var(--warn); font-weight: 600; }

.etf-spark { display: block; width: 100%; height: 44px; }

.etf-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}
.etf-stats > div { min-width: 0; }
.etf-stats dt { color: var(--muted); font-size: var(--fs-xs); }
.etf-stats dd { color: var(--text); font-size: var(--fs-sm); font-weight: 600; }

.etf-root .is-good { color: var(--good); }
.etf-root .is-bad { color: var(--bad); }
.etf-root .is-warn { color: var(--warn); font-weight: 600; }
.etf-root .is-muted { color: var(--muted); font-weight: 500; }
.etf-small { font-size: var(--fs-xs) !important; }

.etf-buy {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--text-2);
    font-size: var(--fs-sm);
}
.etf-buy strong { color: var(--text); font-weight: 800; }

.etf-empty-msg { color: var(--text-2); font-size: var(--fs-sm); }
.etf-err { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }

/* ── 관심 종목 (미국) ────────────────────────────── */
.etf-watch-head { align-items: center; }
.etf-watch-count { font-variant-numeric: tabular-nums; }
.etf-watch-note {
    margin-left: auto;
    min-width: 0;
    color: var(--muted);
    font-size: var(--fs-xs);
}

.etf-add { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.etf-add-field { position: relative; flex: 1 1 auto; min-width: 0; }
.etf-add-btn { flex-shrink: 0; height: 40px; }

.etf-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--sp-1);
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.etf-suggest[hidden] { display: none; }
.etf-suggest-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    min-height: 44px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.etf-suggest-item:hover,
.etf-suggest-item.is-active { background: var(--surface3); }
.etf-suggest-item.is-active { box-shadow: inset 2px 0 0 var(--accent); }
.etf-suggest-item[aria-disabled="true"] { cursor: default; }
.etf-suggest-item[aria-disabled="true"] .etf-sug-sym,
.etf-suggest-item[aria-disabled="true"] .etf-sug-name { color: var(--muted); }
.etf-sug-sym { color: var(--text); font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; }
.etf-sug-name {
    min-width: 0;
    color: var(--text-2);
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.etf-sug-meta { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.etf-sug-tag { color: var(--accent); font-weight: 600; }
.etf-suggest-status {
    padding: 10px;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.etf-card-tags { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* 관심 종목 카드: 카드(role=button)와 × 버튼을 형제로 두고 ×를 카드 오른쪽 위에 겹친다 */
.etf-card-wrap { position: relative; display: flex; min-width: 0; }
.etf-card-wrap > .etf-card { flex: 1 1 auto; }
.etf-card-wrap .etf-card-top { padding-right: 28px; }
.etf-remove {
    position: absolute;
    top: 10px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.etf-remove:hover { color: var(--bad); background: var(--bad-soft); }
.etf-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.etf-card.is-collecting { cursor: default; }
.etf-card.is-collecting .etf-empty-msg { color: var(--accent); font-weight: 600; }
.etf-skel-price { width: 55%; height: 28px; }
.etf-skel-spark { width: 100%; height: 44px; }
.etf-skel-stats { width: 100%; height: 64px; }

.etf-fund-note { padding-top: 8px; border-top: 1px solid var(--border); }

/* ── 상세 ────────────────────────────────────────── */
.etf-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    min-width: 0;
}
.etf-detail[hidden] { display: none; }
.etf-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.etf-detail-title { min-width: 0; }
.etf-detail-title h4 { color: var(--text); font-size: var(--fs-md); font-weight: 800; overflow-wrap: anywhere; }
.etf-detail-title h4 span { margin-left: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.etf-detail-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.etf-chart-wrap { position: relative; height: 260px; min-width: 0; }
.etf-chart-wrap canvas { display: block; }

.etf-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 16px;
}
.etf-vs, .etf-divs { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.etf-sub { color: var(--text); font-size: var(--fs-sm); font-weight: 700; }
.etf-sub-note { margin-left: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.etf-note { color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }

.etf-table-wrap { max-width: 100%; overflow-x: auto; }
.etf-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.etf-table th, .etf-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
}
.etf-table th:first-child, .etf-table td:first-child { text-align: left; }
.etf-table thead th { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.etf-table tbody th { color: var(--text-2); font-weight: 600; }
.etf-table td { color: var(--text); }

/* 분배금 편집 */
.etf-edit { border-top: 1px solid var(--border); padding-top: 8px; }
.etf-edit > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.etf-edit > summary::-webkit-details-marker { display: none; }
.etf-edit > summary::before { content: '▸'; margin-right: 6px; }
.etf-edit[open] > summary::before { content: '▾'; }
.etf-edit > .etf-note { margin-bottom: 8px; }
.etf-edit-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}
.etf-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}
.etf-edit-row label { min-width: 0; }
.etf-edit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 8px; }

.etf-foot { color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; }

/* ── 분석(상세 위쪽) ─────────────────────────────── */
.etf-base { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.etf-an { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.etf-an:empty { display: none; }
.etf-an-loading { display: flex; flex-direction: column; gap: 12px; }
.etf-an-skel-chips { width: min(420px, 100%); height: 30px; }
.etf-an-skel-card { height: 180px; border-radius: var(--radius); }

.etf-an-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}
.etf-an-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: opacity .15s;
}
.etf-an-card.is-updating { opacity: .55; }

.etf-an-k {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .02em;
}

/* 한눈에 */
.etf-an-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.etf-an-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; list-style: none; }
.etf-an-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.etf-an-chip.is-caution { border-color: var(--warn); }

/* 넣는 금액 */
.etf-an-amount {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
}
.etf-an-amount-label { color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.etf-an-amount-field { position: relative; flex: 0 1 190px; min-width: 0; }
.etf-an-input { padding-right: 30px; text-align: right; }
.etf-an-unit {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: var(--fs-sm);
    pointer-events: none;
}
.etf-an-presets .choice { height: 32px; padding: 0 12px; }
.etf-an-hint { flex-basis: 100%; color: var(--warn); font-size: var(--fs-xs); }
.etf-an-hint:empty { display: none; }

/* 공통 글줄 */
.etf-an-big { color: var(--text-2); font-size: var(--fs-sm); }
.etf-an-big strong { margin-left: 4px; color: var(--text); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; }
.etf-an-facts, .etf-an-lead { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; overflow-wrap: anywhere; }
.etf-an-lead { color: var(--text); font-weight: 600; }
.etf-an-plain { color: var(--text-2); font-size: var(--fs-sm); }
.etf-an-state { color: var(--text); font-size: var(--fs-lg); font-weight: 800; }
.etf-an-state.is-caution {
    align-self: flex-start;
    padding: 2px 10px;
    border: 1px solid var(--warn);
    border-radius: 999px;
    font-size: var(--fs-md);
}
.etf-an-unavail {
    padding: 10px 12px;
    background: var(--surface2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.etf-an-callout {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}
.etf-an-callout strong { color: var(--text); font-size: var(--fs-md); font-weight: 800; }
.etf-an-callout-sub { color: var(--text-2); }

/* 표 셀 보조 줄 */
.etf-an-cell { display: inline-flex; flex-direction: column; align-items: flex-end; }
.etf-an-cell-sub { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.etf-an-table td, .etf-an-table th { white-space: nowrap; }
.etf-an-table thead th { white-space: normal; vertical-align: bottom; }

/* 수치 격자 */
.etf-an-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr));
    gap: 8px 14px;
    min-width: 0;
}
.etf-an-stats > div { min-width: 0; }
.etf-an-stats > .is-wide { grid-column: 1 / -1; max-width: 420px; }
.etf-an-stats dt { color: var(--muted); font-size: var(--fs-xs); }
.etf-an-stats dd { color: var(--text); font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }

/* 52주 범위 막대 */
.etf-an-range { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.etf-an-range-track {
    position: relative;
    display: block;
    height: 6px;
    margin: 0 5px;
    border-radius: 999px;
    background: var(--surface3);
}
.etf-an-range-dot {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--accent);
    transform: translate(-50%, -50%);
}
.etf-an-range-ends {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 500;
}

/* 기준 펼치기 */
.etf-an-crit { color: var(--muted); font-size: var(--fs-xs); }
.etf-an-crit > summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.etf-an-crit > summary::-webkit-details-marker { display: none; }
.etf-an-crit > summary::before { content: '▸'; margin-right: 6px; }
.etf-an-crit[open] > summary::before { content: '▾'; }
.etf-an-crit > p { margin-top: 4px; line-height: 1.6; overflow-wrap: anywhere; }
.etf-an-crit > .etf-table { margin-top: 6px; }

/* 기업 진단 */
.etf-an-fund-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 20px;
}
.etf-an-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.etf-an-reasons {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 18px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}
.etf-an-taglist { display: flex; flex-direction: column; gap: 8px; list-style: none; }
.etf-an-taglist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.etf-an-tag-why { min-width: 0; color: var(--text-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }

.etf-an-bars { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 560px; }
.etf-an-bar-row {
    display: grid;
    grid-template-columns: 4.6em minmax(0, 1fr) 6.4em;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.etf-an-bar-k { color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; }
.etf-an-bar-v { color: var(--text); font-size: var(--fs-sm); font-weight: 700; text-align: right; white-space: nowrap; }
.etf-an-bar-svg { display: block; width: 100%; height: 36px; }
.etf-an-bar { fill: var(--accent); }
.etf-an-bar.is-neg { fill: var(--accent); opacity: .5; }
.etf-an-bar-base { stroke: var(--border-strong); stroke-width: 1; }
.etf-an-bar-row.is-axis { margin-top: -2px; }
.etf-an-bar-row.is-axis .etf-an-bar-v { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.etf-an-bar-years { display: flex; }
.etf-an-bar-years > span {
    flex: 1 1 0;
    min-width: 0;
    color: var(--muted);
    font-size: var(--fs-xs);
    text-align: center;
}

/* 실패·면책 */
.etf-an-fail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}
.etf-an-fail-title { color: var(--text); font-size: var(--fs-sm); font-weight: 700; }
.etf-an-disclaimer {
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.6;
}

/* 로딩 자리 */
.etf-loading { display: flex; flex-direction: column; gap: 12px; }
.etf-skel-line { width: min(520px, 100%); height: 18px; }
.etf-skel-card { height: 230px; border-radius: var(--radius); }
.etf-skel-chart { height: 260px; border-radius: var(--radius); }

.etf-root .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .etf-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .etf-an-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 폰: 카드 세로로 쌓기, 터치 영역 44px */
@media (max-width: 640px) {
    .etf-cards { grid-template-columns: minmax(0, 1fr); }
    .etf-fx { white-space: normal; }
    .etf-detail { padding: 12px; }
    .etf-chart-wrap { height: 220px; }
    .etf-skel-chart { height: 220px; }
    .etf-root .btn,
    .etf-root .an-input { min-height: 44px; }
    .etf-table th, .etf-table td { padding: 7px 4px; }
    .etf-table thead th { white-space: normal; }
    .etf-edit-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .etf-edit-row .etf-edit-del { grid-column: 1 / -1; justify-self: end; }
    /* 관심 종목: 머리 문구는 다음 줄로, 버튼·빼기·후보는 터치 44px */
    .etf-watch-note { flex-basis: 100%; margin-left: 0; }
    .etf-add-btn { height: 44px; }
    .etf-remove { top: 2px; right: 2px; width: 44px; height: 44px; }
    .etf-card-wrap .etf-card-top { padding-right: 36px; }
    .etf-suggest-item { grid-template-columns: auto minmax(0, 1fr); }
    .etf-sug-meta { grid-column: 2; }

    /* 분석: 표는 가로 스크롤 대신 행마다 '라벨: 값' 카드로 접고, 칩·버튼은 터치 44px */
    .etf-an-card { padding: 12px; }
    .etf-an-amount-field { flex: 1 1 160px; }
    .etf-an-presets { width: 100%; }
    .etf-an-presets .choice { flex: 1 1 0; justify-content: center; height: 44px; min-height: 44px; }
    .etf-an-crit > summary,
    .etf-edit > summary { min-height: 44px; }
    .etf-an-fund-top { grid-template-columns: minmax(0, 1fr); }
    .etf-an-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .etf-an-bar-row { grid-template-columns: 4.2em minmax(0, 1fr) 5.8em; gap: 8px; }

    .etf-an-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .etf-an-table, .etf-an-table tbody, .etf-an-table tr { display: block; width: 100%; }
    .etf-an-table tr { padding: 6px 0; border-bottom: 1px solid var(--border); }
    .etf-an-table tbody th,
    .etf-an-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 3px 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }
    .etf-an-table tbody th { color: var(--text); font-weight: 700; }
    .etf-an-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--muted);
        font-size: var(--fs-xs);
        font-weight: 500;
        text-align: left;
    }
}