/* 홈 = 판단 카드 · 참고 지표 한 줄 · 복기 · 최근 기록. 토큰·헤더·버튼·빈 상태·skeleton은 base.css */

.home {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-6) 56px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── 머리말: 날짜 한 줄 + 데이터 기준 배지 ─────────── */
.home-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 28px;
}
.home-date { color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.asof {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: var(--fs-xs);
    white-space: nowrap;
}
.asof.stale { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }

/* ── 본문 그리드 ──────────────────────────────────── */
.home-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
.home-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

@media (min-width: 960px) {
    .home-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: start;
    }
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.block-link { color: var(--accent); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.block-link:hover { color: var(--accent-hover); }

.text-btn {
    flex-shrink: 0;
    min-height: 32px;
    padding: 0 var(--sp-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.text-btn:hover { color: var(--accent-hover); background: var(--surface2); }

/* 로딩 자리 */
.sk-eyebrow { width: 32%; height: 14px; }
.sk-title   { width: 64%; height: 30px; }
.sk-line    { width: 86%; height: 14px; }
.sk-line.short { width: 48%; }
.sk-meter   { width: 100%; height: 44px; }

/* ── 판단 카드 ────────────────────────────────────── */
.verdict {
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.verdict.is-buy {
    border-color: var(--accent-line);
    background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface);
}
.verdict.is-message { gap: var(--sp-3); }

.v-eyebrow { color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.verdict.is-buy .v-eyebrow { color: var(--accent); }
.v-title {
    margin-top: calc(-1 * var(--sp-3));
    color: var(--text);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.verdict.is-buy .v-title { color: var(--accent-hover); }
.v-sub {
    margin-top: calc(-1 * var(--sp-2));
    color: var(--text-2);
    font-size: var(--fs-md);
    line-height: 1.55;
}
.v-message { color: var(--text-2); font-size: var(--fs-md); line-height: 1.6; }

/* 점수 줄: 큰 숫자는 기본 글자색, 구간색은 칩에만 */
.v-score { display: flex; align-items: center; gap: var(--sp-3); }
.v-num {
    color: var(--text);
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}
.verdict.is-hold .v-num { font-size: var(--fs-xl); }
.band-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface2);
    background: color-mix(in srgb, var(--band, var(--muted)) 16%, transparent);
    color: var(--band, var(--text-2));
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
}

/* 공포·탐욕 눈금: 5구간 + 내 기준 + 현재 위치 */
.fg-meter { position: relative; height: 44px; }
.fg-meter.no-threshold { height: 30px; }
.fg-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 26px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--fg-0) 0 25%, var(--fg-1) 25% 45%, var(--fg-2) 45% 55%,
        var(--fg-3) 55% 75%, var(--fg-4) 75% 100%);
    opacity: .85;
}
.fg-meter.no-threshold .fg-track { top: 12px; }
.fg-threshold {
    position: absolute;
    top: 0;
    height: 44px;
    border-left: 2px dashed var(--text-2);
    opacity: .7;
}
.fg-threshold span {
    position: absolute;
    top: -2px;
    left: 6px;
    color: var(--text-2);
    font-size: var(--fs-xs);
    white-space: nowrap;
}
.fg-threshold.flip span { left: auto; right: 6px; }
.fg-marker {
    position: absolute;
    top: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text);
    border: 4px solid var(--bg);
    box-shadow: 0 0 0 1px var(--border-strong);
    transform: translateX(-50%);
}
.fg-meter.no-threshold .fg-marker { top: 6px; }
.fg-scale {
    display: flex;
    justify-content: space-between;
    margin-top: calc(-1 * var(--sp-3));
    color: var(--muted);
    font-size: var(--fs-xs);
}

.spark { width: 100%; height: 48px; display: block; overflow: visible; }

.verdict-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    color: var(--text-2);
    font-size: var(--fs-sm);
}
.verdict-facts strong { color: var(--text); }
/* 적립 방식: 이번 매수일에 종목별로 살 금액 */
.verdict-facts .plan-parts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.plan-part {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.cycle-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}
.cycle-chip.is-done { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.cycle-chip.is-partial { color: var(--text-2); }
.cycle-chip.is-none { color: var(--muted); }

.v-evidence { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.v-evidence strong { color: var(--text); }
.v-evidence .block-link { margin-left: var(--sp-1); }

.good { color: var(--good); }
.bad  { color: var(--bad); }
.v-evidence strong.good, .review-rows strong.good { color: var(--good); }
.v-evidence strong.bad,  .review-rows strong.bad  { color: var(--bad); }

/* 매수 대상 행(S&P 500 · 나스닥) */
.idx-rows { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--sp-2)); }
.idx-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 96px;
    grid-template-areas: "name value trend spark";
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
    padding: 10px var(--sp-2);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
    transition: background .12s;
}
.idx-row + .idx-row { border-top: 1px solid var(--border); }
.idx-row:hover { background: var(--surface2); }
.idx-name { grid-area: name; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--sp-2); min-width: 0; }
.idx-label { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.idx-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}
.idx-date { color: var(--muted); font-size: var(--fs-xs); }
.idx-value { grid-area: value; font-size: var(--fs-md); font-weight: 700; text-align: right; }
.idx-trend { grid-area: trend; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; text-align: right; }
.idx-trend.good { color: var(--good); }
.idx-trend.bad  { color: var(--bad); }
.idx-spark { grid-area: spark; height: 28px; }

.verdict-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.v-cfg { margin-top: calc(-1 * var(--sp-2)); color: var(--muted); font-size: var(--fs-xs); }

/* ── 로그인 안내 ──────────────────────────────────── */
.login-card {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
}
.login-card-text { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }

/* ── 참고 지표 한 줄 ──────────────────────────────── */
.alerts { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.alerts-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.alerts-ok { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.alerts-empty { color: var(--muted); font-size: var(--fs-sm); }

.signal-list { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0 calc(-1 * var(--sp-2)); }
.signal-row {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px var(--sp-2);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
    transition: background .12s;
}
.signal-row:hover { background: var(--surface2); }
.signal-row.level-amber { background: var(--warn-soft); }
.signal-row.level-red   { background: var(--bad-soft); }
.sig-label { font-size: .9rem; }
.sig-right { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.sig-value { font-size: .9rem; font-weight: 600; }
.sig-status { color: var(--muted); font-size: var(--fs-xs); }
.signal-row.level-amber .sig-status { color: var(--warn); }
.signal-row.level-red   .sig-status { color: var(--bad); }

/* ── 복기 ─────────────────────────────────────────── */
.review { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.review-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.review-body .empty { padding: var(--sp-4) var(--sp-2); }
.review-when { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.review-rows {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.review-rows strong { color: var(--text); }
.review-memo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-style: italic;
}
.review-note { color: var(--muted); font-size: var(--fs-xs); }
.review-hint { color: var(--text-2); font-size: var(--fs-xs); line-height: 1.55; }
.review-empty { color: var(--muted); font-size: var(--fs-sm); }
.review-body > .block-link { align-self: flex-start; margin-top: var(--sp-1); }

/* ── 최근 기록 ────────────────────────────────────── */
.recent { padding: var(--sp-5) var(--sp-5) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.recent-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0 calc(-1 * var(--sp-2)); }
.recent-list > li > .skeleton { margin: 6px var(--sp-2); }
.recent-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px var(--sp-3);
    padding: 10px var(--sp-2);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
}
.recent-item:hover { background: var(--surface2); }
.recent-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    font-size: .94rem;
    font-weight: 600;
}
.recent-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-date { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.recent-sub {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-preview { color: var(--text-2); font-size: .82rem; }
.recent-verdict { color: var(--muted); font-size: .82rem; }
.decision-chip {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface3);
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 600;
}
.journal-tag {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .7rem;
    font-weight: 700;
}
.recent-empty { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; padding: 6px var(--sp-2); }

/* ── 모바일 ───────────────────────────────────────── */
@media (max-width: 640px) {
    .home { padding: var(--sp-3) var(--sp-4) 40px; gap: var(--sp-3); }
    .home-grid, .home-col { gap: var(--sp-3); }
    .home-head { min-height: 0; }
    .verdict { padding: var(--sp-5) var(--sp-4); gap: var(--sp-3); }
    .v-title { margin-top: calc(-1 * var(--sp-2)); }
    .v-sub { margin-top: calc(-1 * var(--sp-1)); font-size: var(--fs-sm); }
    .alerts, .review, .login-card { padding: var(--sp-4); }
    .recent { padding: var(--sp-4) var(--sp-4) var(--sp-2); }

    /* 매수 대상 행: 한 줄에 이름·값·변화, 추이선은 그 아래 전체 폭 */
    .idx-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "name value trend"
            "spark spark spark";
    }
    .idx-spark { height: 24px; }

    /* 버튼은 폭 100%로 세로로 쌓는다 */
    .verdict-actions { flex-direction: column; }
    .verdict-actions .btn { width: 100%; height: 44px; }
    .text-btn { min-height: 44px; }
    /* '근거 보기 →'·'일지 열기 →'·'노트 열기 →' 터치 영역 44px */
    .block-link { display: inline-flex; align-items: center; min-height: 44px; }
}