/* BL-124: 전면 리디자인 — 심플 + 세련 + 가시성 */

/* === 1. 변수 (디자인 토큰) === */
:root {
    /* 배경 */
    --bg-base: #0b0d12;
    --bg-surface: #14171f;
    --bg-elevated: #1a1e28;
    --bg-inset: #0d1017;

    /* 테두리 */
    --border-subtle: #252a36;
    --border-default: #2d3343;
    --border-strong: #3a4258;

    /* 텍스트 */
    --text-primary: #ededee;
    --text-secondary: #9ca0ad;
    --text-muted: #5b606e;

    /* 시그널 */
    --signal-positive: #4ade80;
    --signal-warning: #fbbf24;
    --signal-negative: #f87171;
    --signal-info: #60a5fa;
    --signal-ai: #a78bfa;

    /* 시그널 (배경 약하게) */
    --signal-positive-bg: rgba(74, 222, 128, 0.10);
    --signal-warning-bg: rgba(251, 191, 36, 0.10);
    --signal-negative-bg: rgba(248, 113, 113, 0.10);
    --signal-ai-bg: rgba(167, 139, 250, 0.08);

    /* 라운드 */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* 그림자 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* === 2. 베이스 === */
* {
    box-sizing: border-box;
}

html {
    font-feature-settings: "tnum" 1, "ss01" 1; /* 숫자 폭 통일 */
}

body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Pretendard', -apple-system, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === 3. 헤더 + 네비 === */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 13, 18, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 24px;
}

header h1 {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

nav {
    display: flex;
    gap: 4px;
}

nav button {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 8px 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

nav button:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

nav button.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
}

/* === 4. 컨테이너 === */
.view-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* === 5. 매크로 카드 === */
.macro-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.macro-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    transition: border-color 0.15s ease;
}

.macro-card:hover {
    border-color: var(--border-strong);
}

.macro-card.green { border-left: 2px solid var(--signal-positive); }
.macro-card.yellow { border-left: 2px solid var(--signal-warning); }
.macro-card.red { border-left: 2px solid var(--signal-negative); }

.macro-card h3 {
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.macro-card .value {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.macro-card .change {
    margin: 4px 0 0 0;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.macro-card.green .change { color: var(--signal-positive); }
.macro-card.yellow .change { color: var(--signal-warning); }
.macro-card.red .change { color: var(--signal-negative); }

/* === 6. 수급 바 === */
.flow-bars {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px;
}

.flow-bar {
    display: flex;
    height: 28px;
    margin-bottom: 6px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.flow-foreign,
.flow-individual,
.flow-institution {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: opacity 0.15s ease;
}

.flow-foreign:hover, .flow-individual:hover, .flow-institution:hover {
    opacity: 0.85;
}

.flow-foreign.sell { background: var(--signal-negative); color: #fff; }
.flow-foreign.buy { background: var(--signal-positive); color: #0b0d12; }
.flow-individual { background: var(--signal-warning); color: #0b0d12; }
.flow-institution { background: var(--signal-info); color: #fff; }

/* === 7. 시나리오 테이블 === */
.scenario-table {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.scenario-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.scenario-table th,
.scenario-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.scenario-table tr:last-child td {
    border-bottom: none;
}

.scenario-table th {
    background: var(--bg-inset);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.scenario-table td {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* === 8. Verdict (판정) === */
.verdict {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.verdict h2 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.verdict p {
    margin: 0 0 16px 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 14px;
}

.verdict ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.verdict li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    color: var(--text-primary);
    line-height: 1.6;
}

.verdict li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--signal-positive);
    font-weight: 600;
}

/* === 9. AI 코멘트 박스 === */
.ai-commentary-box {
    margin-top: 16px;
    padding: 16px 18px;
    background: var(--signal-ai-bg);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-left: 3px solid var(--signal-ai);
    border-radius: var(--radius-md);
}

.ai-header {
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--signal-ai);
    font-size: 13px;
    letter-spacing: 0.01em;
}

.ai-meta {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
}

.ai-text {
    line-height: 1.7;
    color: var(--text-primary);
    font-size: 13px;
    white-space: pre-wrap;
}

/* === 10. 추천 섹션 헤더 === */
.recommendations {
    margin-top: 8px;
}

.rec-header {
    margin-bottom: 16px;
    padding: 16px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.rec-header h2 {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rec-count {
    color: var(--signal-positive);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.rec-label {
    margin: 6px 0 0 0;
    color: var(--signal-warning);
    font-size: 12px;
    font-weight: 500;
}

.rec-summary {
    margin: 6px 0 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.rec-source {
    margin: 8px 0 0 0;
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.rec-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 48px;
    font-style: italic;
}

/* === 11. 추천 카드 그리드 === */
.rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.rec-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-sm);
}

.rec-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.rec-card.grade-3 { border-top: 2px solid var(--signal-positive); }
.rec-card.grade-2 { border-top: 2px solid var(--signal-warning); }
.rec-card.grade-1 { border-top: 2px solid var(--text-muted); }

.rec-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.rec-rank {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.rec-grade {
    color: var(--signal-warning);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.rec-src-badge {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 12px;
    line-height: 1.5;
}

.rec-src-both {
    background: var(--signal-positive-bg);
    color: var(--signal-positive);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.rec-src-sihwangman {
    background: var(--signal-warning-bg);
    color: var(--signal-warning);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.rec-src-auto {
    background: var(--bg-inset);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

/* 데이터 소스 배지 (실시간/샘플) */
.rec-data-badge {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    line-height: 1.5;
}

.rec-data-real {
    background: var(--signal-positive-bg);
    color: var(--signal-positive);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.rec-data-sample {
    background: var(--signal-negative-bg);
    color: var(--signal-negative);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

/* 종목명 */
.rec-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.rec-symbol {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

.rec-category {
    color: var(--text-secondary);
    font-size: 11px;
    margin-bottom: 12px;
    font-weight: 500;
}

/* 가격 박스 */
.rec-prices {
    margin: 12px 0;
    padding: 12px;
    background: var(--bg-inset);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.rec-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    padding: 4px 0;
    font-variant-numeric: tabular-nums;
}

.rec-label-price {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.rec-label-price.stop { color: var(--signal-negative); }
.rec-label-price.target { color: var(--signal-positive); }

.rec-val {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
}

.rec-val.stop { color: var(--signal-negative); }
.rec-val.target { color: var(--signal-positive); }

/* RULE 칩 */
.rec-rules {
    margin: 12px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rec-rule {
    background: var(--bg-inset);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    padding: 2px 8px;
    font-size: 10px;
    border-radius: 10px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.rec-source-note {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    line-height: 1.5;
}

/* === 12-A. 이용법 탭 (BL-132) === */
.guide-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 0;
}

.guide-section {
    margin-bottom: 32px;
    padding: 20px 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.guide-section h1 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.guide-section h2 {
    margin: 0 0 16px 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
    letter-spacing: -0.01em;
}

.guide-section h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--signal-positive);
}

.guide-section p {
    margin: 0 0 12px 0;
    line-height: 1.7;
    color: var(--text-primary);
    font-size: 14px;
}

.guide-section p:last-child {
    margin-bottom: 0;
}

.guide-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.guide-card {
    padding: 14px 16px;
    background: var(--bg-inset);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.guide-card p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--bg-inset);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.guide-table th,
.guide-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.guide-table tr:last-child td {
    border-bottom: none;
}

.guide-table th {
    background: var(--bg-base);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.guide-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: guide-counter;
}

.guide-list li {
    margin-bottom: 10px;
    padding-left: 28px;
    position: relative;
    line-height: 1.7;
    color: var(--text-primary);
    font-size: 14px;
}

ol.guide-list li:before {
    counter-increment: guide-counter;
    content: counter(guide-counter);
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background: var(--signal-positive-bg);
    color: var(--signal-positive);
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
}

ul.guide-list li:before {
    content: "•";
    position: absolute;
    left: 8px;
    top: 0;
    color: var(--signal-positive);
    font-weight: 700;
    font-size: 16px;
}

.guide-note {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--signal-warning-bg);
    border-left: 3px solid var(--signal-warning);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.guide-section code {
    padding: 2px 6px;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 12px;
    color: var(--signal-warning);
}

.guide-footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 16px;
    padding: 16px;
}

/* === 12. 모바일 반응형 === */
@media (max-width: 768px) {
    header { padding: 12px 16px; }
    header h1 { font-size: 16px; }
    .view-container { padding: 16px; gap: 16px; }
    .macro-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .macro-card { padding: 12px; }
    .macro-card .value { font-size: 16px; }
    .rec-grid { grid-template-columns: 1fr; }
    .verdict { padding: 16px; }
    .scenario-table th, .scenario-table td { padding: 8px 12px; font-size: 12px; }
}