/* 기본 스타일 - 라이트 테마 */
:root {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --accent: #2E7D32;
    --accent-light: #E8F5E9;
    --accent-hover: #1B5E20;
    --border: #dee2e6;
    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-hover: rgba(46, 125, 50, 0.15);
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}

header {
    background: linear-gradient(135deg, var(--accent) 0%, #43A047 100%);
    color: white;
    padding: 0.8rem 0;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 차트 컨테이너 */
#chart-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 24px;
    padding: 24px;
    max-width: 1900px;
    margin: 0 auto;
}

/* 차트 그룹 (종목별 묶음) */
.chart-group {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 12px var(--shadow);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.chart-group:hover {
    box-shadow: 0 6px 24px var(--shadow-hover);
    border-color: var(--accent);
}

/* 종목명 헤더 */
.group-header {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent);
    padding: 10px 20px;
    margin-bottom: 12px;
    background: var(--accent-light);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* 종목 상세 링크 아이콘 */
.stock-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    opacity: 0.6;
    transition: all 0.2s ease;
    font-size: 14px;
}

.stock-link:hover {
    opacity: 1;
    transform: scale(1.2);
    color: var(--accent-hover);
}

/* 차트 행 (1년 + 1개월) */
.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* 개별 차트 카드 */
.chart-card {
    position: relative;
    background: var(--bg-primary);
    border-radius: 10px;
    padding: 32px 8px 8px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--border);
}

.chart-card:hover {
    transform: scale(1.02);
    border-color: var(--accent);
    box-shadow: 0 4px 16px var(--shadow-hover);
}

.chart-card img {
    width: 100%;
    border-radius: 6px;
}

/* 기간 라벨 */
.chart-label {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card);
    padding: 3px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

/* 기존 chart-wrapper 호환성 유지 */
.chart-wrapper {
    position: relative;
    text-align: center;
    background: var(--bg-card);
    box-shadow: 0 2px 12px var(--shadow);
    border-radius: 12px;
    padding: 50px 12px 12px 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid var(--border);
}

.chart-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--shadow-hover);
    border-color: var(--accent);
}

.chart-wrapper img {
    width: 100%;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.chart-wrapper .ticker-name {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: 15px;
    color: var(--accent);
    background: var(--accent-light);
    padding: 4px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* FRED 데이터 컨테이너 */
#data-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 20px;
    padding: 24px;
    max-width: 1800px;
    margin: 0 auto;
}

.data-wrapper {
    position: relative;
    text-align: center;
    background: var(--bg-card);
    box-shadow: 0 2px 12px var(--shadow);
    border-radius: 12px;
    padding: 50px 12px 12px 12px;
    transition: all 0.3s ease;
    border: 1px solid var(--border);
}

.data-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--shadow-hover);
    border-color: var(--accent);
}

.data-wrapper .data-name {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: 15px;
    color: #1565C0;
    background: #E3F2FD;
    padding: 4px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

.data-wrapper img {
    width: 100%;
    border-radius: 8px;
}

/* 지표 대시보드 차트 카드 */
.indicator-card-chart {
    padding: 48px 16px 16px 16px;
}

.indicator-card-chart .chart-container {
    height: 180px;
    position: relative;
}

.indicator-card-chart .indicator-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0 12px;
    justify-content: center;
}

.indicator-card-chart .indicator-latest {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #333);
}

.indicator-card-chart .indicator-change {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}

.indicator-date {
    font-size: 11px;
    color: #aaa;
    font-weight: 400;
}

.indicator-card-chart .indicator-change.positive {
    color: #D32F2F;
    background: #FFEBEE;
}

.indicator-card-chart .indicator-change.negative {
    color: #1565C0;
    background: #E3F2FD;
}

/* 지표 로딩 */
.indicators-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
    grid-column: 1 / -1;
}

.indicators-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--accent, #4CAF50);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

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

.indicators-empty {
    text-align: center;
    padding: 40px;
    color: #999;
    grid-column: 1 / -1;
}

/* 섹션 헤더 */
.section-header {
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #333);
    padding: 8px 0 0;
    margin-top: 8px;
    border-bottom: 2px solid var(--accent, #4CAF50);
    padding-bottom: 6px;
}

/* 기간 선택 툴바 */
.indicators-toolbar {
    display: flex;
    justify-content: center;
    padding: 0 24px 16px;
    max-width: 1800px;
    margin: 0 auto;
}

.period-selector {
    display: flex;
    gap: 6px;
    background: var(--bg-card, #fff);
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.period-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.period-btn:hover {
    background: #f5f5f5;
}

.period-btn.active {
    background: var(--accent, #4CAF50);
    color: #fff;
    font-weight: 600;
}

/* ── AI Summary Panel ── */
.summary-panel {
    max-width: 1800px;
    margin: 16px auto 0;
    padding: 0 24px;
}

.summary-panel .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    border-radius: 12px 12px 0 0;
    color: #fff;
}

.summary-panel .summary-title {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.summary-panel .summary-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-panel .summary-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

.summary-panel .summary-refresh-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 6px;
    color: #fff;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

.summary-panel .summary-refresh-btn:hover {
    background: rgba(255,255,255,0.25);
}

.summary-panel .summary-refresh-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.summary-panel .summary-body {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #dee2e6);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary, #333);
}

.summary-headline {
    font-size: 16px;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8eaf6;
}

.summary-bullets {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.summary-bullets li {
    margin-bottom: 4px;
    line-height: 1.6;
}

.summary-watchlist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.watchlist-label {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #d32f2f;
    padding: 2px 8px;
    border-radius: 10px;
}

.watchlist-item {
    font-size: 13px;
    background: #fff3e0;
    padding: 3px 10px;
    border-radius: 8px;
    color: #e65100;
}

/* Regime badge */
.regime-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Clusters */
.summary-clusters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.cluster-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 14px;
    border-left: 3px solid #1a237e;
}

.cluster-name {
    font-size: 12px;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cluster-text {
    font-size: 13px;
    line-height: 1.6;
    color: #424242;
}

/* Contradictions */
.summary-contradictions {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.contradiction-label {
    font-size: 12px;
    font-weight: 700;
    color: #e65100;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.contradiction-item {
    margin-bottom: 6px;
}

.contradiction-desc {
    font-size: 13px;
    font-weight: 600;
    color: #bf360c;
}

.contradiction-impl {
    font-size: 12px;
    color: #6d4c41;
    margin-top: 2px;
}

/* Bottom line */
.summary-bottomline {
    font-size: 14px;
    font-weight: 600;
    color: #1a237e;
    padding: 10px 14px;
    background: #e8eaf6;
    border-radius: 8px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.summary-retail {
    background: #f3e5f5;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.retail-label {
    font-size: 12px;
    font-weight: 700;
    color: #6a1b9a;
    margin-bottom: 6px;
}
.retail-label i {
    margin-right: 4px;
}
.retail-text {
    font-size: 13px;
    color: #4a148c;
    line-height: 1.6;
}

.summary-caveats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.summary-caveats span {
    font-size: 11px;
    color: #999;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 6px;
}

.summary-empty {
    color: #999;
    text-align: center;
    padding: 8px;
}

/* Skeleton loading */
.summary-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
}

.skeleton-line.w80 { width: 80%; }
.skeleton-line.w70 { width: 70%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w50 { width: 50%; }

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── 지표 대시보드 모바일 최적화 ── */
@media (max-width: 900px) {
    #data-container {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 14px;
        padding: 14px;
    }
    .indicator-card-chart .chart-container {
        height: 180px;
    }
    .indicator-card-chart .indicator-latest {
        font-size: 17px;
    }
    .indicators-toolbar {
        padding: 0 14px 12px;
    }
}

@media (max-width: 600px) {
    #data-container {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 10px;
    }
    .indicator-card-chart {
        padding: 40px 10px 10px 10px;
    }
    .indicator-card-chart .chart-container {
        height: 160px;
    }
    .indicator-card-chart .indicator-latest {
        font-size: 16px;
    }
    .indicator-card-chart .indicator-change {
        font-size: 12px;
    }
    .data-wrapper .data-name {
        font-size: 13px;
        padding: 3px 12px;
    }
    .section-header {
        font-size: 14px;
        margin-top: 4px;
    }
    .indicators-toolbar {
        padding: 0 10px 10px;
    }
    .period-selector {
        width: 100%;
        justify-content: center;
    }
    .period-btn {
        padding: 6px 12px;
        font-size: 12px;
        flex: 1;
        text-align: center;
    }
    .summary-panel {
        padding: 0 10px;
        margin-top: 10px;
    }
    .summary-panel .summary-body {
        padding: 12px 14px;
        font-size: 13px;
    }
    .summary-headline {
        font-size: 14px;
    }
    .summary-bullets {
        padding-left: 16px;
    }
}

@media (max-width: 380px) {
    #data-container {
        padding: 8px;
        gap: 10px;
    }
    .indicator-card-chart .chart-container {
        height: 140px;
    }
    .period-btn {
        padding: 5px 8px;
        font-size: 11px;
    }
}

/* 모달 (차트 확대) */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    max-width: 95vw;
    max-height: 90vh;
    position: relative;
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
}

.modal-title {
    color: var(--accent);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
}

.modal-close {
    position: absolute;
    top: -12px;
    right: -12px;
    color: white;
    background: var(--accent);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-close:hover {
    background: var(--accent-hover);
    transform: scale(1.1);
}

/* 링크 스타일 */
a {
    text-align: center;
    text-decoration: none;
    color: var(--accent);
    transition: color 0.3s;
}

a:hover {
    color: var(--accent-hover);
}

/* 버블 네비게이션 */
.bubble {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 25px;
    padding: 0.6rem 1.1rem;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-weight: 500;
    font-size: 0.9rem;
}

.bubble::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
    z-index: 0;
}

.bubble:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.18);
    color: white;
}

.bubble:hover::before {
    transform: translateX(100%);
}

.bubble i {
    font-size: 1rem;
    transition: transform 0.3s;
    z-index: 1;
}

.bubble:hover i {
    transform: scale(1.1);
}

.bubble span {
    z-index: 1;
    white-space: nowrap;
}

/* 네비게이션 컨테이너 */
.nav-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.nav-brand {
    margin-bottom: 0.2rem;
}

.nav-links {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

/* 검색창 스타일 */
.nav-search {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-search input {
    width: 80px;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 0.8rem;
    outline: none;
    transition: all 0.3s ease;
}

.nav-search input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.nav-search input:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    width: 100px;
}

.nav-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.nav-search button:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

/* 데스크톱: 모바일 검색 숨김 */
.mobile-search {
    display: none;
}

/* 데스크톱: 검색창 표시 (메뉴와 같은 줄) */
.desktop-search {
    display: flex;
}

/* 활성 상태 */
.bubble.active {
    background: rgba(255,255,255,0.25);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    border: 2px solid var(--accent);
}

.bubble.active i {
    color: white;
}

/* 반응형 */
@media (max-width: 1200px) {
    #chart-container {
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        gap: 20px;
        padding: 16px;
    }
}

@media (max-width: 1400px) {
    .nav-links { gap: 0.4rem; }
    .bubble { padding: 0.5rem 0.7rem; font-size: 0.8rem; }
}

@media (max-width: 900px) {
    .nav-links { gap: 0.3rem; flex-wrap: wrap; }
    .bubble { padding: 0.4rem 0.6rem; font-size: 0.75rem; }
    #chart-container {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .charts-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/* 모바일 네비게이션 헤더 */
.nav-header {
    display: none;
}

.nav-title {
    display: none;
}

/* 햄버거 메뉴 버튼 */
.nav-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 1.3rem;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 메뉴 닫기 버튼 - PC에서는 숨김 */
.nav-close {
    display: none;
}

.nav-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 600px) {
    /* Mobile sidebar sizing tokens */
    :root {
        --mobile-sidebar-width: min(78vw, 240px);
        --mobile-sidebar-padding-x: 14px;
        --mobile-menu-item-maxwidth: 160px;
    }
    /* 모바일 메뉴: overlay 방식 (body를 transform하지 않음)
       NOTE: body에 transform을 걸면 fixed 메뉴(nav-links)가 함께 이동해서
       사이드바가 오른쪽으로 밀려 보이는 현상이 발생할 수 있음 */
    body {
        position: relative;
    }

    body.menu-open {
        overflow: hidden; /* 배경 스크롤 방지 */
    }

    /* 메뉴가 열릴 때 배경 딤 처리 */
    body.menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 900;
        pointer-events: none; /* 클릭이 nav-links로 통과되도록 */
    }

    .nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 8px;
    }

    .nav-title {
        display: block;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .nav-toggle {
        order: -1;
    }

    /* 모바일: 검색창 표시 */
    .mobile-search {
        display: flex;
        flex: 1;
        justify-content: flex-end;
    }

    .mobile-search input {
        width: 90px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .mobile-search input:focus {
        width: 110px;
    }

    .mobile-search button {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    /* 모바일: 데스크톱 검색창 및 설정 아이콘 숨김 */
    .desktop-search, .desktop-settings {
        display: none;
    }
    .nav-header .nav-settings-icon { display: block; }

    .nav-toggle {
        display: block;
    }

    .nav-container {
        flex-direction: column;
        align-items: stretch;
        position: relative;
    }

    /* 모바일 메뉴를 왼쪽 사이드바로 변경 */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--mobile-sidebar-width);
        height: 100vh;
        background: var(--accent);
        z-index: 1000;
        will-change: transform;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 68px var(--mobile-sidebar-padding-x) 18px var(--mobile-sidebar-padding-x);
        gap: 0.45rem;
        justify-content: flex-start;
        margin-top: 0;
        max-height: none;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        box-shadow: 2px 0 14px rgba(0, 0, 0, 0.18);
    }

    .nav-links.active {
        transform: translateX(0);
    }

    /* 메뉴 닫기 버튼 (사이드바에 고정) - 모바일에서만 표시 */
    .nav-close {
        display: flex; /* 모바일에서만 표시 */
        position: fixed;
        top: 14px;
        left: calc(var(--mobile-sidebar-width) - 50px);
        background: rgba(255, 255, 255, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: white;
        font-size: 1.2rem;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        z-index: 1101;
        transition: background 0.2s ease, transform 0.2s ease;
        backdrop-filter: blur(6px);
    }

    .nav-close:hover {
        background: rgba(255, 255, 255, 0.32);
        transform: scale(1.02);
    }

    .bubble {
        margin: 0;
        width: 100%;
        max-width: var(--mobile-menu-item-maxwidth);
        align-self: center;
        justify-content: flex-start;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.14);
        border-radius: 10px;
        font-size: 0.78rem;
        gap: 0.45rem;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.14);
        cursor: pointer; /* 클릭 가능 표시 */
        text-decoration: none; /* 링크 밑줄 제거 */
        color: inherit; /* 텍스트 색상 상속 */
        display: flex; /* flex 레이아웃 */
        align-items: center; /* 수직 중앙 정렬 */
    }
    
    /* 링크가 제대로 클릭 가능하도록 보장 */
    .nav-link.bubble {
        pointer-events: auto;
        user-select: none;
        touch-action: manipulation; /* iOS 더블탭 줌 방지, 터치 응답성 향상 */
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); /* 터치 피드백 */
    }

    .bubble i {
        font-size: 0.8rem;
        flex-shrink: 0; /* 아이콘 크기 고정 */
    }

    .bubble span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        letter-spacing: 0.1px;
    }

    .bubble:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .nav-brand { margin-bottom: 0.4rem; }

    #chart-container {
        grid-template-columns: 1fr;
        padding: 8px;
        gap: 16px;
    }
    .chart-group {
        padding: 12px;
    }
    .group-header {
        font-size: 16px;
        padding: 6px 16px;
    }
    .charts-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* 리포트 페이지 스타일 */
.report-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.report-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--text-secondary);
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.report-header {
    text-align: center;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 2px 12px var(--shadow);
}

.report-header h1 {
    color: var(--accent);
    margin: 0 0 12px 0;
    font-size: 1.8rem;
}

.report-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.report-date {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.report-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.charts-section {
    margin-bottom: 32px;
}

.chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.chart-box {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px var(--shadow);
    border: 1px solid var(--border);
}

.chart-box h3 {
    color: var(--accent);
    margin: 0 0 16px 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-box canvas {
    height: 200px !important;
}

/* 지표 요약 섹션 (3단계 설명) */
.indicators-summary-section {
    margin-bottom: 32px;
}

.indicators-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.indicators-header h2 {
    margin: 24px 0 0 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    justify-content: flex-start;
}

.indicators-header h2 i {
    flex-shrink: 0;
    font-size: 1.1rem;
}

.indicators-header h2 span {
    flex: 0 0 auto;
}

.indicators-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.level-selector {
    display: flex;
    gap: 4px;
    background: var(--bg-primary);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.level-btn {
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.level-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.level-btn.active {
    background: var(--accent);
    color: white;
}

.indicators-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* 주식 트렌드 차트 컨테이너 */
.trend-charts-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.trend-chart-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 12px var(--shadow);
    border: 1px solid var(--border);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trend-chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--shadow-hover);
}

.trend-chart-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
    padding: 6px 12px;
    background: var(--accent-light);
    border-radius: 20px;
    display: inline-block;
}

.trend-chart-image {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    object-fit: contain;
}

.indicator-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 12px var(--shadow);
    border: 1px solid var(--border);
}

.indicator-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.indicator-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.indicator-status {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
}

.indicator-status.overbought {
    background: #FFEBEE;
    color: #D32F2F;
}

.indicator-status.oversold {
    background: #E8F5E9;
    color: #2E7D32;
}

.indicator-status.weak {
    background: #FFF8E1;
    color: #F57F17;
}

.indicator-status.neutral {
    background: #FFF3E0;
    color: #E65100;
}

.indicator-status.buy {
    background: #E8F5E9;
    color: #2E7D32;
}

.indicator-status.sell {
    background: #FFEBEE;
    color: #D32F2F;
}

.indicator-status.increase {
    background: #FFEBEE;
    color: #D32F2F;
}

.indicator-status.decrease {
    background: #E3F2FD;
    color: #1976D2;
}

.indicator-desc {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    min-height: 1.4em;
}

.report-text {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px var(--shadow);
    border: 1px solid var(--border);
}

.report-text-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.report-text-header h2 {
    color: var(--accent);
    margin: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-text-header .provider-toggle {
    margin: 0;
}

.report-loading-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.error-text {
    color: #f44336;
    text-align: center;
    padding: 20px;
}

.report-text h2 {
    color: var(--accent);
    margin: 0 0 20px 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent-light);
}

.report-body {
    color: var(--text-primary);
    line-height: 1.8;
}

.report-body h1,
.report-body h2,
.report-body h3,
.report-body h4 {
    color: var(--accent);
    margin: 24px 0 12px 0;
    font-weight: 600;
    line-height: 1.4;
}

.report-body h1 {
    font-size: 1.4rem;
    margin-top: 32px;
}

.report-body h2 {
    font-size: 1.2rem;
    margin-top: 28px;
}

.report-body h3 {
    font-size: 1rem;
    padding: 8px 12px;
    background: var(--accent-light);
    border-radius: 8px;
    display: inline-block;
    margin-top: 24px;
}

.report-body h4 {
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-light);
}

.report-body p {
    margin: 0 0 16px 0;
}

.report-body strong {
    font-weight: 600;
    color: var(--text-primary);
}

.report-body em {
    font-style: italic;
    color: var(--text-secondary);
}

/* 리포트 섹션 버블 스타일 */
.report-section-bubble {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.report-section-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.report-section-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-section-header::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
}

.report-section-content {
    color: var(--text-primary);
    line-height: 1.8;
}

.report-section-content p {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
}

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

.report-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--text-secondary);
    text-align: center;
}

.report-error i {
    font-size: 3rem;
    color: #D32F2F;
    margin-bottom: 16px;
}

.report-error button {
    margin-top: 16px;
    padding: 12px 24px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.report-error button:hover {
    background: var(--accent-hover);
}

/* ── Fundamentals 섹션 스타일 ── */

/* 재무비율 그리드 */
.fundamentals-section,
.dcf-section,
.margin-section,
.earnings-section,
.insider-section {
    margin-bottom: 20px;
}

.fund-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.fund-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.sector-badge {
    background: rgba(33, 150, 243, 0.15);
    color: #2196F3;
}

.industry-badge {
    background: rgba(156, 39, 176, 0.15);
    color: #9C27B0;
}

.ratios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.ratio-card {
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    transition: transform 0.2s;
}

.ratio-card:hover {
    transform: translateY(-2px);
}

.ratio-label {
    font-size: 11px;
    color: var(--text-secondary, #999);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ratio-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #eee);
}

/* DCF 적정가치 — Scenario Tabs / Interpretation / Multi-Stage */

/* Ratio 경고 배지 */
.ratio-card { position: relative; }
.ratio-card-warn { border-color: rgba(255, 193, 7, 0.4); }
.ratio-warn-badge {
    position: absolute; top: 6px; right: 8px;
    color: #FFC107; font-size: 12px; cursor: help;
}
.ratio-warn-text {
    font-size: 9px; color: #FFC107; margin-top: 4px;
    line-height: 1.3; opacity: 0.85;
}

/* Interpretation 블록 */
.dcf-interp {
    background: rgba(33, 150, 243, 0.06);
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 14px;
}
.dcf-interp-title {
    font-size: 13px; font-weight: 700;
    color: #64B5F6; margin-bottom: 8px;
}
.dcf-interp-list {
    margin: 0; padding-left: 18px;
    font-size: 12px; line-height: 1.7;
    color: var(--text-primary, #ddd);
}
.dcf-interp-list li { margin-bottom: 2px; }

/* 시나리오 탭 */
.dcf-tabs {
    display: flex; gap: 0; margin-bottom: 14px;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border, #333);
}
.dcf-tab {
    flex: 1; padding: 10px 8px;
    background: rgba(255,255,255,0.03); border: none;
    cursor: pointer; text-align: center;
    transition: background 0.2s, color 0.2s;
    color: var(--text-secondary, #999);
}
.dcf-tab:not(:last-child) { border-right: 1px solid var(--border, #333); }
.dcf-tab:hover { background: rgba(255,255,255,0.06); }
.dcf-tab-active {
    background: rgba(33, 150, 243, 0.12) !important;
    color: #64B5F6 !important;
}
.dcf-tab-label { display: block; font-size: 12px; font-weight: 600; }
.dcf-tab-value { display: block; font-size: 16px; font-weight: 700; margin-top: 2px; }

/* 시나리오 카드 */
.dcf-card {
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border, #333);
    border-radius: 12px; padding: 18px;
    margin-bottom: 12px;
}
.dcf-card-header {
    display: flex; justify-content: space-between;
    align-items: flex-start; margin-bottom: 12px;
}
.dcf-card-title { font-size: 14px; font-weight: 600; color: var(--text-secondary, #aaa); }
.dcf-model-tag {
    display: inline-block; font-size: 10px; padding: 2px 8px;
    border-radius: 10px; background: rgba(33,150,243,0.15);
    color: #64B5F6; margin-left: 8px;
}
.dcf-scenario-desc { font-size: 12px; color: var(--text-secondary, #999); margin-top: 4px; }
.dcf-card-fv { font-size: 28px; font-weight: 700; }
.dcf-undervalued { color: #4CAF50; }
.dcf-overvalued  { color: #F44336; }

/* 비교 바 */
.dcf-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dcf-bar-row { display: flex; align-items: center; gap: 10px; }
.dcf-bar-label { font-size: 11px; color: var(--text-secondary, #999); width: 40px; text-align: right; flex-shrink: 0; }
.dcf-bar-track { flex: 1; height: 20px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.dcf-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.dcf-bar-fair { background: linear-gradient(90deg, #1565C0, #42A5F5); }
.dcf-bar-price { background: rgba(255,255,255,0.25); }
.dcf-bar-val { font-size: 12px; font-weight: 600; color: var(--text-primary, #eee); width: 80px; flex-shrink: 0; }

/* High-growth 안내 */
.dcf-hg-note {
    font-size: 11px; color: #FFA726;
    padding: 6px 10px; border-radius: 6px;
    background: rgba(255,167,38,0.08);
    margin-top: 8px;
}

/* Assumptions 패널 */
.dcf-assumptions { margin-top: 2px; }
.dcf-stages-table { margin-bottom: 12px; }
.dcf-stages-table table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.dcf-stages-table th, .dcf-stages-table td {
    padding: 7px 12px; text-align: center;
    border: 1px solid var(--border, #333);
}
.dcf-stages-table th {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary, #aaa); font-weight: 600;
}
.dcf-stages-table td { color: var(--text-primary, #ddd); }

/* 파라미터 그리드 (툴팁 지원) */
.dcf-params-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 6px; margin-bottom: 10px;
}
.dcf-param-item {
    background: rgba(255,255,255,0.04); border-radius: 8px;
    padding: 8px; text-align: center; cursor: help;
}
.dcf-param-val { font-size: 15px; font-weight: 700; color: var(--text-primary, #eee); }
.dcf-param-label { font-size: 10px; color: var(--text-secondary, #888); margin-top: 2px; }
.dcf-param-tip { font-size: 9px; color: var(--text-secondary, #666); margin-left: 2px; }

/* CAPM 수식 */
.dcf-formula {
    font-size: 12px; color: var(--text-secondary, #999);
    padding: 6px 10px; background: rgba(255,255,255,0.03);
    border-radius: 6px;
}
.dcf-formula b { color: #64B5F6; }
.dcf-sector-tag {
    display: inline-block; font-size: 10px; padding: 1px 6px;
    border-radius: 8px; background: rgba(255,255,255,0.08);
    color: var(--text-secondary, #aaa); margin-left: 8px;
}

/* Implied Growth */
.dcf-implied { margin-top: 14px; }
.dcf-implied-btn {
    width: 100%; padding: 10px; border: 1px dashed var(--border, #444);
    border-radius: 8px; background: none; cursor: pointer;
    color: #64B5F6; font-size: 13px; font-weight: 600;
    transition: background 0.2s;
}
.dcf-implied-btn:hover { background: rgba(33,150,243,0.08); }
.dcf-implied-panel {
    margin-top: 10px; padding: 14px;
    background: rgba(255,255,255,0.03); border-radius: 8px;
    font-size: 13px; color: var(--text-primary, #ddd); line-height: 1.6;
}
.dcf-implied-value {
    font-size: 26px; font-weight: 700;
    color: #FFA726; margin: 10px 0; text-align: center;
}
.dcf-implied-note { font-size: 11px; color: var(--text-secondary, #888); }
.dcf-implied-input-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; flex-wrap: wrap;
}
.dcf-implied-input-row label { font-size: 13px; font-weight: 600; color: var(--text-primary, #ddd); white-space: nowrap; }
.dcf-implied-input {
    width: 120px; padding: 6px 10px; font-size: 14px; font-weight: 600;
    border: 1px solid #ccc; border-radius: 6px;
    background: #fff; color: #333;
    outline: none; transition: border-color 0.2s;
}
.dcf-implied-input:focus { border-color: #FFA726; }
.dcf-implied-current { font-size: 11px; color: var(--text-secondary, #888); }

/* Disclaimer */
.dcf-disclaimer {
    margin-top: 12px; font-size: 11px;
    color: var(--text-secondary, #888);
    padding: 8px 12px; background: rgba(255,255,255,0.03);
    border-radius: 6px;
}

/* 분기별 실적 차트 */
.earnings-charts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.earnings-chart-box {
    height: 220px;
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border, #333);
    border-radius: 12px;
    padding: 12px;
}

/* 내부자 거래 */
.insider-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.insider-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
}

.insider-signal-buy {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
}

.insider-signal-sell {
    background: rgba(244, 67, 54, 0.15);
    color: #F44336;
}

.insider-signal-neutral {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #999);
}

.insider-count {
    font-size: 12px;
    color: var(--text-secondary, #999);
}

.insider-table-wrap {
    overflow-x: auto;
}

.insider-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.insider-table th,
.insider-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border, #333);
}

.insider-table th {
    font-weight: 600;
    color: var(--text-secondary, #aaa);
    font-size: 11px;
    text-transform: uppercase;
}

.insider-table small {
    color: var(--text-secondary, #888);
    font-size: 10px;
}

tr.insider-buy td:first-child {
    border-left: 3px solid #4CAF50;
}

tr.insider-sell td:first-child {
    border-left: 3px solid #F44336;
}

/* 분석 근거 투명화 */
.transparency-section {
    margin-top: 16px;
}

.transparency-toggle {
    width: 100%;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    transition: background 0.2s;
}

.transparency-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.transparency-content {
    margin-top: 10px;
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border, #333);
    border-radius: 10px;
    padding: 16px;
}

.transparency-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.trans-group {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 12px;
}

.trans-group-full {
    grid-column: 1 / -1;
}

.trans-group-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent, #4CAF50);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.trans-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 12px;
}

.trans-label {
    color: var(--text-secondary, #999);
}

.trans-value {
    font-weight: 600;
    color: var(--text-primary, #eee);
}

.trans-signal {
    font-weight: 600;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.trans-bull {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
}

.trans-bear {
    background: rgba(244, 67, 54, 0.15);
    color: #F44336;
}

.trans-neutral {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #999);
}

.trans-scenario {
    padding: 8px 0;
    border-bottom: 1px solid var(--border, #333);
    font-size: 12px;
}

.trans-scenario:last-child {
    border-bottom: none;
}

.trans-action {
    font-weight: 600;
    color: var(--accent, #4CAF50);
}

.trans-reason {
    margin-top: 4px;
    color: var(--text-secondary, #999);
    font-size: 11px;
}

/* 수익성 마진 */
.margin-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border, #333);
    border-radius: 12px;
    padding: 16px;
}

.margin-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.margin-bar-label {
    width: 130px;
    font-size: 12px;
    color: var(--text-secondary, #aaa);
    flex-shrink: 0;
}

.margin-bar-track {
    flex: 1;
    height: 22px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.margin-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.margin-negative {
    opacity: 0.6;
}

.margin-bar-value {
    width: 60px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #eee);
    flex-shrink: 0;
}

/* 뉴스 AI 요약 */
.news-ai-summary {
    margin-bottom: 14px;
}

.news-summary-loading {
    padding: 12px;
    font-size: 12px;
    color: var(--text-secondary, #999);
    text-align: center;
}

.news-summary-card {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(156, 39, 176, 0.08));
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 10px;
    padding: 14px 16px;
}

.news-summary-label {
    font-size: 11px;
    font-weight: 700;
    color: #2196F3;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-summary-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary, #ddd);
}

/* 반응형 */
@media (max-width: 768px) {
    .ratios-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .dcf-params-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .dcf-tabs { flex-wrap: wrap; }
    .dcf-tab { min-width: 80px; }
    .transparency-grid {
        grid-template-columns: 1fr;
    }
    .margin-bar-label {
        width: 100px;
    }
}

@media (max-width: 480px) {
    .ratios-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sensitivity-table {
        font-size: 11px;
    }
    .sensitivity-table th,
    .sensitivity-table td {
        padding: 5px 6px;
    }
}

/* 리포트 아이콘 */
.report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    opacity: 0.6;
    transition: all 0.2s ease;
    font-size: 14px;
    margin-left: 4px;
}

.report-link:hover {
    opacity: 1;
    transform: scale(1.2);
    color: #1565C0;
}

@media (max-width: 1024px) {
    .trend-charts-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .chart-row {
        grid-template-columns: 1fr;
    }

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

    .report-container {
        padding: 12px;
    }
}

@media (max-width: 600px) {
    .report-header h1 {
        font-size: 1.4rem;
    }

    .report-meta {
        flex-direction: column;
        gap: 8px;
    }

    .indicator-value {
        font-size: 1.2rem;
    }

    .trend-charts-container {
        grid-template-columns: 1fr;
    }
}

/* 매매신호 페이지 스타일 */
.notify-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.notify-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--text-secondary);
}

.notify-header {
    text-align: center;
    margin-bottom: 32px;
}

.notify-header h1 {
    color: var(--accent);
    margin: 0 0 8px 0;
    font-size: 1.8rem;
}

.notify-date {
    color: var(--text-secondary);
    margin: 0 0 4px 0;
}

.notify-summary {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* ========== Notify Header v2 ========== */
.notify-header-v2 {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E8E8E8;
}

.notify-header-v2 .header-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.notify-header-v2 h1 {
    color: #1976D2;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
}

.notify-header-v2 .settings-btn {
    background: #F5F5F5;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    color: #616161;
    cursor: pointer;
    transition: all 0.2s;
}

.notify-header-v2 .settings-btn:hover {
    background: #E0E0E0;
}

.notify-header-v2 .header-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #757575;
}

.notify-header-v2 .stat-item strong {
    color: #212121;
    font-weight: 700;
}

.notify-header-v2 .stat-item.current strong {
    color: #1976D2;
}

.notify-header-v2 .stat-divider {
    color: #BDBDBD;
}

.notify-header-v2 .header-meta {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #9E9E9E;
}

.notify-header-v2 .header-actions {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.notify-header-v2 .btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #1976D2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.notify-header-v2 .btn-refresh:hover:not(:disabled) {
    background: #1565C0;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.notify-header-v2 .btn-refresh:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.notify-header-v2 .btn-refresh i {
    font-size: 12px;
}

/* ========== Signal Tabs ========== */
.signal-tabs {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: #F5F5F5;
    border-radius: 12px;
    margin-bottom: 12px;
}

/* ========== Strength Filter ========== */
.strength-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #FAFAFA;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
}

.strength-filter .filter-label {
    font-size: 13px;
    color: #616161;
    font-weight: 500;
}

.strength-filter .strength-select {
    padding: 6px 12px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}

.strength-filter .strength-select:focus {
    outline: none;
    border-color: #1976D2;
}

.signal-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #616161;
    cursor: pointer;
    transition: all 0.2s;
}

.signal-tab:hover {
    background: rgba(255,255,255,0.7);
}

.signal-tab.active {
    background: #fff;
    color: #212121;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.signal-tab .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #E0E0E0;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #616161;
}

.signal-tab.active .tab-count {
    background: #1976D2;
    color: #fff;
}

/* 탭별 활성 색상 */
.signal-tab[data-bucket="BUY"].active { color: #1976D2; }
.signal-tab[data-bucket="BUY"].active .tab-count { background: #1976D2; }

.signal-tab[data-bucket="SELL"].active { color: #E53935; }
.signal-tab[data-bucket="SELL"].active .tab-count { background: #E53935; }

.signal-tab[data-bucket="MIXED"].active { color: #FB8C00; }
.signal-tab[data-bucket="MIXED"].active .tab-count { background: #FB8C00; }

.signal-tab[data-bucket="HOLD"].active { color: #757575; }
.signal-tab[data-bucket="HOLD"].active .tab-count { background: #757575; }

/* ========== Other Tabs Banner ========== */
.other-tabs-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #E3F2FD;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #1565C0;
}

.other-tabs-banner i {
    color: #1976D2;
}

/* ========== Empty Bucket ========== */
.empty-bucket {
    text-align: center;
    padding: 48px 24px;
    color: #9E9E9E;
}

.empty-bucket i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-bucket p {
    margin: 0;
    font-size: 14px;
}

/* ========== Primary Conclusion 색상 (action별) ========== */
.action-card-v2 .primary-conclusion.conclusion-start {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    border-left: 4px solid #1976D2;
}

.action-card-v2 .primary-conclusion.conclusion-start .conclusion-text {
    color: #0D47A1;
}

.action-card-v2 .primary-conclusion.conclusion-reduce {
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
    border-left: 4px solid #E53935;
}

.action-card-v2 .primary-conclusion.conclusion-reduce .conclusion-text {
    color: #B71C1C;
}

.action-card-v2 .primary-conclusion.conclusion-wait {
    background: #F5F5F5;
    border-left: 4px solid #9E9E9E;
}

.action-card-v2 .primary-conclusion.conclusion-wait .conclusion-text {
    color: #424242;
}

.action-card-v2 .primary-conclusion.conclusion-check {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    border-left: 4px solid #FB8C00;
}

.action-card-v2 .primary-conclusion.conclusion-check .conclusion-text {
    color: #E65100;
}

/* ========== Meta Badge (지표 부족 / 기준가 없음) ========== */
.action-card-v2 .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #F0F0F0;
}

.action-card-v2 .footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-card-v2 .meta-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: help;
}

.action-card-v2 .meta-badge.indicator-issue {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFCC80;
}

.action-card-v2 .meta-badge.no-levels {
    background: #F5F5F5;
    color: #757575;
    border: 1px solid #E0E0E0;
}

/* ========== 리스크 라인 강조 ========== */
.action-card-v2 .guidance-row.risk {
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-radius: 8px;
}

.action-card-v2 .guidance-row.risk .guidance-label {
    min-width: auto;
}

.signal-section {
    margin-bottom: 32px;
}

.signal-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    margin: 0 0 16px 0;
    padding: 12px 16px;
    border-radius: 12px;
}

.buy-section h2 {
    background: #E8F5E9;
    color: #2E7D32;
}

.sell-section h2 {
    background: #FFEBEE;
    color: #C62828;
}

/* 오늘 액션 리스트 섹션 */
.action-section {
    margin: 24px 0;
}

.action-header {
    margin-bottom: 12px;
}

.action-title-group {
    margin-bottom: 8px;
}

.action-section h2 {
    margin: 0 0 6px 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-section h2 i {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #4CAF50; /* 부드러운 초록색 */
}

.action-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.action-disclaimer-sticky {
    background: #FFF8E1; /* 부드러운 노란색 배경 */
    border-left: 3px solid #F57F17;
    padding: 8px 12px;
    margin-bottom: 16px;
    border-radius: 4px;
}

.action-disclaimer-sticky p {
    font-size: 0.75rem;
    color: #F57F17;
    margin: 0;
    font-weight: 500;
}

/* 액션 탭 */
.action-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 6px;
    background: var(--bg-primary);
    border-radius: 12px;
    flex-wrap: wrap;
}

.action-tab {
    background: transparent;
    border: none;
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}

.action-tab:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-primary);
}

.action-tab.active {
    background: #fff;
    color: #2E7D32;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 액션 리스트 */
.action-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ========== 액션 카드 v2 (행동 중심 UI) ========== */
.action-card-v2 {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #E8E8E8;
    transition: all 0.2s ease;
}

.action-card-v2:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Card Header */
.action-card-v2 .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
}

.action-card-v2 .header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.action-card-v2 .header-right {
    text-align: right;
    flex-shrink: 0;
}

/* Priority Badge */
.action-card-v2 .badge-priority {
    background: #FFF8E1;
    color: #F57F17;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(245, 127, 23, 0.2);
}

/* Signal Badge (2차 정보) */
.action-card-v2 .badge-signal {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
}
.action-card-v2 .signal-buy { background: #E8F5E9; color: #2E7D32; }
.action-card-v2 .signal-buy-cond { background: #E8F5E9; color: #558B2F; }
.action-card-v2 .signal-sell { background: #FFEBEE; color: #C62828; }
.action-card-v2 .signal-sell-part { background: #FFF3E0; color: #E65100; }
.action-card-v2 .signal-mixed { background: #F3E5F5; color: #7B1FA2; }
.action-card-v2 .signal-hold { background: #F5F5F5; color: #616161; }

/* Stock Info */
.action-card-v2 .stock-name {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
}

.action-card-v2 .stock-symbol {
    font-size: 13px;
    color: #9E9E9E;
}

.action-card-v2 .stock-price {
    font-size: 16px;
    font-weight: 600;
    color: #424242;
    display: block;
}

.action-card-v2 .stock-change {
    font-size: 13px;
    font-weight: 500;
}
.action-card-v2 .stock-change.positive { color: #4CAF50; }
.action-card-v2 .stock-change.negative { color: #EF5350; }

/* Primary Conclusion (핵심 - 가장 눈에 띄게) */
.action-card-v2 .primary-conclusion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #FAFAFA;
    border-radius: 12px;
    margin-bottom: 14px;
}

/* Action Pill (가장 중요한 요소) */
.action-card-v2 .action-pill {
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.action-card-v2 .pill-start {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.action-card-v2 .pill-reduce {
    background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3);
}

.action-card-v2 .pill-wait {
    background: #E0E0E0;
    color: #616161;
}

.action-card-v2 .pill-check {
    background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(251, 140, 0, 0.3);
}

/* Conclusion Text */
.action-card-v2 .conclusion-text {
    font-size: 15px;
    font-weight: 500;
    color: #212121;
    line-height: 1.5;
}

/* Reason Chips */
.action-card-v2 .reason-chips-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.action-card-v2 .chip {
    background: #F5F5F5;
    color: #616161;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 14px;
    border: 1px solid #E0E0E0;
}

.action-card-v2 .chip-more {
    background: #EEEEEE;
    color: #9E9E9E;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 14px;
    cursor: pointer;
}

/* Key Guidance */
.action-card-v2 .key-guidance {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.action-card-v2 .guidance-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    background: #FAFAFA;
    border-radius: 8px;
}

.action-card-v2 .guidance-row.risk {
    background: #FFF8E1;
    border-left: 3px solid #FFB300;
}

.action-card-v2 .guidance-label {
    font-size: 11px;
    font-weight: 700;
    color: #9E9E9E;
    text-transform: uppercase;
    min-width: 36px;
    padding-top: 2px;
}

.action-card-v2 .guidance-text {
    font-size: 13px;
    color: #424242;
    line-height: 1.5;
}

/* Card Footer */
.action-card-v2 .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #F0F0F0;
}

.action-card-v2 .strength-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
}

.action-card-v2 .strength-strong {
    background: #E8F5E9;
    color: #2E7D32;
}

.action-card-v2 .strength-medium {
    background: #FFF8E1;
    color: #F57F17;
}

.action-card-v2 .strength-weak {
    background: #F5F5F5;
    color: #9E9E9E;
}

.action-card-v2 .btn-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #F5F5F5;
    color: #424242;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.action-card-v2 .btn-detail:hover {
    background: #E0E0E0;
    color: #212121;
}

/* Action별 카드 테두리 강조 */
.action-card-v2[data-action="START_NOW"] {
    border-left: 4px solid #1976D2;
}

.action-card-v2[data-action="REDUCE_NOW"] {
    border-left: 4px solid #E53935;
}

.action-card-v2[data-action="WAIT"] {
    border-left: 4px solid #9E9E9E;
}

.action-card-v2[data-action="CHECK_THEN_DECIDE"] {
    border-left: 4px solid #FB8C00;
}

/* 반응형 */
@media (max-width: 480px) {
    .action-card-v2 .primary-conclusion {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .action-card-v2 .card-header {
        flex-direction: column;
        gap: 8px;
    }
    
    .action-card-v2 .header-right {
        text-align: left;
        display: flex;
        gap: 8px;
        align-items: center;
    }
}

/* ========== 기존 액션 카드 (레거시) ========== */
.action-card {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.action-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* ActionState별 배경 색상 (부드러운 톤) */
.action-card.action-buy-now,
.action-card.action-buy-wait {
    border-left: 3px solid #4CAF50;
    background: linear-gradient(to right, rgba(76, 175, 80, 0.03), var(--bg-card));
}

.action-card.action-sell-now,
.action-card.action-sell-partial {
    border-left: 3px solid #FF9800;
    background: linear-gradient(to right, rgba(255, 152, 0, 0.03), var(--bg-card));
}

.action-card.action-hold {
    border-left: 3px solid #9E9E9E;
}

.action-card.action-mixed {
    border-left: 3px solid #9C27B0;
    background: linear-gradient(to right, rgba(156, 39, 176, 0.03), var(--bg-card));
}

.priority-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #FFF8E1; /* 부드러운 노란색 */
    color: #F57F17;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    z-index: 1;
    border: 1px solid rgba(245, 127, 23, 0.2);
}

/* 인라인 우선 배지 (헤더 내부) */
.priority-badge-inline {
    display: inline-flex;
    align-items: center;
    background: #FFF8E1;
    color: #F57F17;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    margin-right: 6px;
    border: 1px solid rgba(245, 127, 23, 0.2);
    white-space: nowrap;
}

/* 매수/매도 타입 배지 */
.action-type-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-right: 8px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-type-badge.buy-badge {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid rgba(46, 125, 50, 0.3);
}

.action-type-badge.sell-badge {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid rgba(230, 81, 0, 0.3);
}

.action-type-badge.mixed-badge {
    background: #F3E5F5;
    color: #7B1FA2;
    border: 1px solid rgba(123, 31, 162, 0.3);
}

.action-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 12px;
}

.action-stock-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.action-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.action-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.action-symbol {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.action-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0 10px 0;
    opacity: 0.5;
}

.action-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.action-price-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.action-change {
    font-size: 0.75rem;
    font-weight: 400;
}

.action-change.positive {
    color: #66BB6A;
}

.action-change.negative {
    color: #EF5350;
}

/* 판단 강도 & 행동 Row */
.action-judgment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: var(--bg-primary);
    border-radius: 6px;
}

/* 판단 강도 + 이유 칩 행 */
.action-judgment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.action-judgment-strength {
    display: flex;
    align-items: center;
    gap: 8px;
}

.judgment-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.judgment-stars {
    font-size: 0.95rem;
    color: #FF9800;
    letter-spacing: 2px;
}

.strength-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* 초보자 요약 */
.action-beginner-summary {
    text-align: center;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #E3F2FD 0%, #F3E5F5 100%);
    border-radius: 8px;
}

.beginner-text {
    font-size: 0.9rem;
    color: #1565C0;
    font-weight: 500;
    line-height: 1.4;
}

/* 행동 준비 상태 (report 페이지) */
.action-readiness-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.readiness-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* 이유 칩 */
.action-reason-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.action-reason-chips .reason-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 16px;
    white-space: nowrap;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    color: #616161;
}

/* Stage Progress Hint (rebound_watch만) */
.action-progress-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 16px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border-radius: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Stage Progress Hint */
.checklist-progress-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.stage-dot {
    font-size: 0.85rem;
    color: #BDBDBD;
    transition: color 0.2s;
}

.stage-dot.filled {
    color: #4CAF50;
}

.stage-arrow {
    color: #757575;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 2px;
}

.stage-label {
    font-size: 0.75rem;
    color: #757575;
    font-weight: 500;
}

/* 오늘 액션 */
.action-today-action {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: linear-gradient(to right, rgba(76, 175, 80, 0.05), rgba(76, 175, 80, 0.02));
    border-radius: 10px;
    border: 1px solid rgba(76, 175, 80, 0.15);
}

.action-today-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.action-reason-chips-inline {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.action-reason-chips-inline .reason-chip {
    font-size: 11px;
    padding: 3px 8px;
    background: #FFF8E1;
    color: #F57C00;
    border-radius: 12px;
    font-weight: 500;
}

.action-today-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #4CAF50;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-today-text {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.6;
}

/* 다음 변화 트리거 */
.action-next-trigger {
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.action-trigger-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #757575;
    white-space: nowrap;
    padding-top: 2px;
}

.action-trigger-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 리스크 박스 */
.action-risk-box {
    margin-bottom: 14px;
    padding: 14px 16px;
    background: #FAFAFA;
    border-radius: 10px;
    border: 1px solid #E8E8E8;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.risk-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.risk-item.risk-line {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 12px;
    background: rgba(255, 152, 0, 0.06);
    border-radius: 8px;
    border-left: 3px solid #FF9800;
}

.risk-text {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
}

.risk-label {
    color: #757575;
    font-weight: 500;
    font-size: 0.8rem;
}

.risk-value {
    color: #1976D2;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* R:R 배지 */
.rr-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}

.rr-badge.conservative {
    background: #FFF3E0;
    color: #E65100;
}

.rr-badge.moderate {
    background: #E3F2FD;
    color: #1565C0;
}

.rr-badge.favorable {
    background: #E8F5E9;
    color: #2E7D32;
}

/* 경고 배지 */
.warning-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #FFF8E1;
    color: #F57F17;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    z-index: 1;
    border: 1px solid rgba(245, 127, 23, 0.2);
}

/* 지표 가용성 배지 */
.availability-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #E0E0E0;
    color: #616161;
    font-size: 0.7rem;
    cursor: help;
    margin-left: 4px;
}

/* CTA 버튼 */
.action-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.action-cta:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    color: #fff;
}

.action-cta i {
    font-size: 0.85rem;
}

.no-items {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ========== 시장 상태 (Market Regime) 섹션 ========== */
.market-regime-section {
    margin: 24px 0;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.market-regime-section h2 {
    margin: 0 0 16px 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.market-regime-container {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.market-regime-section h2 i {
    color: #1976D2;
}

.market-regime-section .section-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: #E3F2FD;
    color: #1565C0;
    border-radius: 4px;
    font-weight: 600;
}

.regime-loading {
    padding: 24px;
    text-align: center;
    color: #9E9E9E;
}

.regime-error {
    padding: 16px;
    text-align: center;
    color: #E53935;
    background: #FFEBEE;
    border-radius: 8px;
}

.regime-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.regime-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    max-width: 100%;
    box-sizing: border-box;
}

.regime-phase {
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
    min-width: 120px;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

.regime-phase .phase-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.8;
    margin-bottom: 4px;
}

.regime-phase .phase-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    word-break: break-word;
    overflow-wrap: break-word;
}

.regime-strength {
    flex: 1;
}

.regime-strength .strength-label {
    display: block;
    font-size: 12px;
    color: #757575;
    margin-bottom: 8px;
}

.regime-strength .strength-bar {
    height: 8px;
    background: #E0E0E0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.regime-strength .strength-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.regime-strength .strength-fill.strength-strong {
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
}

.regime-strength .strength-fill.strength-medium {
    background: linear-gradient(90deg, #FF9800, #FFC107);
}

.regime-strength .strength-fill.strength-weak {
    background: linear-gradient(90deg, #F44336, #FF5722);
}

.regime-strength .strength-score {
    font-size: 12px;
    color: #616161;
}

.regime-risk {
    background: #FFF8E1;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.regime-risk .risk-title {
    font-size: 12px;
    font-weight: 600;
    color: #F57C00;
    margin-bottom: 8px;
}

.regime-risk .risk-title i {
    margin-right: 6px;
}

.regime-risk .risk-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #424242;
    line-height: 1.6;
}

.regime-guidance {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #E3F2FD;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.regime-guidance .guidance-icon {
    color: #1976D2;
    font-size: 16px;
    margin-top: 2px;
}

.regime-guidance .guidance-text {
    font-size: 13px;
    color: #0D47A1;
    line-height: 1.5;
}

/* 실시간 주가 헤더 */
.regime-price-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E0E0E0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.regime-company {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.regime-company .company-name {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.news-badge {
    font-size: 10px;
    font-weight: 500;
    color: #1976D2;
    background: #E3F2FD;
    padding: 2px 6px;
    border-radius: 4px;
}

.news-badge i {
    font-size: 9px;
    margin-right: 3px;
}

.regime-company .company-symbol {
    font-size: 12px;
    color: #757575;
}

.regime-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    min-width: 0;
}

.regime-price .current-price {
    font-size: 20px;
    font-weight: 700;
    color: #212121;
}

.regime-price .price-change {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.regime-price .price-change.price-up {
    background: #E8F5E9;
    color: #2E7D32;
}

.regime-price .price-change.price-down {
    background: #FFEBEE;
    color: #C62828;
}

/* 뉴스 섹션 */
.regime-news {
    background: #F5F5F5;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.regime-news .news-title {
    font-size: 12px;
    font-weight: 600;
    color: #424242;
    margin-bottom: 8px;
}

.regime-news .news-title i {
    margin-right: 6px;
    color: #757575;
}

.regime-news .news-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.regime-news .news-list li {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E0E0E0;
}

.regime-news .news-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.regime-news .news-list a {
    color: #1976D2;
    text-decoration: none;
}

.regime-news .news-list a:hover {
    text-decoration: underline;
}

.regime-news .news-source {
    display: block;
    font-size: 11px;
    color: #9E9E9E;
    margin-top: 2px;
}

/* ========== 뉴스 섹션 (report_enhanced) ========== */
.news-section {
    margin: 24px 0;
}

.news-section h2 {
    margin: 0 0 16px 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-section h2 i {
    color: #1976D2;
}

.news-badge-header {
    font-size: 0.65rem;
    padding: 2px 8px;
    background: #E3F2FD;
    color: #1565C0;
    border-radius: 4px;
    font-weight: 600;
}

.news-container {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.news-loading, .news-error, .news-empty {
    padding: 24px;
    text-align: center;
    color: #9E9E9E;
}

.news-error {
    color: #E53935;
    background: #FFEBEE;
    border-radius: 8px;
}

.news-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 768px) {
    .news-list {
        grid-template-columns: 1fr;
    }
}

.news-item {
    padding: 16px;
    background: #FAFAFA;
    border-radius: 8px;
    border-left: 3px solid #E0E0E0;
}

.news-item.news-hidden {
    display: none;
}

.news-item.news-expanded {
    display: block;
}

.news-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.relevance-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.relevance-badge.relevance-high {
    background: #E8F5E9;
    color: #2E7D32;
}

.relevance-badge.relevance-medium {
    background: #E3F2FD;
    color: #1565C0;
}

.relevance-badge.relevance-low {
    background: #FFF3E0;
    color: #E65100;
}

.relevance-badge.relevance-none {
    background: #F5F5F5;
    color: #757575;
}

.news-item .news-source {
    font-size: 11px;
    color: #757575;
    font-weight: 500;
}

.news-item .news-date {
    font-size: 11px;
    color: #9E9E9E;
}

.news-title {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.news-title a {
    color: #212121;
    text-decoration: none;
}

.news-title a:hover {
    color: #1976D2;
    text-decoration: underline;
}

.news-reason {
    font-size: 12px;
    color: #616161;
    margin: 0 0 8px 0;
    font-style: italic;
}

.news-summary {
    margin: 8px 0;
    padding-left: 16px;
    font-size: 13px;
    color: #424242;
    line-height: 1.6;
}

.news-summary li {
    margin-bottom: 4px;
}

.news-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.news-tag {
    font-size: 10px;
    padding: 2px 8px;
    background: #E8EAF6;
    color: #3F51B5;
    border-radius: 4px;
}

.news-show-more {
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    background: #F5F5F5;
    border: none;
    border-radius: 8px;
    color: #616161;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.news-show-more:hover {
    background: #EEEEEE;
}

.news-show-more i {
    margin-right: 6px;
}

.news-cache-notice, .news-stale-notice {
    font-size: 11px;
    color: #9E9E9E;
    text-align: right;
    margin-top: 8px;
}

.news-stale-notice {
    color: #F57C00;
}

.regime-indicators {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid #E0E0E0;
}

.regime-indicators .indicator-item {
    font-size: 12px;
    color: #757575;
    background: #F5F5F5;
    padding: 4px 10px;
    border-radius: 4px;
}

@media (max-width: 600px) {
    .regime-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .regime-phase {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    
    .regime-phase .phase-value {
        font-size: 16px;
    }
    
    .regime-indicators {
        flex-wrap: wrap;
    }
    
    .regime-card {
        padding: 16px;
        overflow-x: hidden;
    }
    
    .market-regime-container {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    .regime-price-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .regime-company {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    .regime-price {
        flex: 0 0 auto;
    }
    
    .regime-company .company-name {
        font-size: 14px;
    }
    
    .regime-price .current-price {
        font-size: 18px;
    }
}

/* 오늘 액션 가이드 섹션 (report_enhanced용) */
.action-guide-section {
    margin: 24px 0;
}

.action-guide-section h2 {
    margin: 0 0 16px 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-guide-section h2 i {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #4CAF50;
}

/* 체크포인트 액션 타입 배지 */
.checkpoint-action-type {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    margin-right: 6px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.checkpoint-action-type.buy {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid rgba(46, 125, 50, 0.3);
}

.checkpoint-action-type.sell {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid rgba(230, 81, 0, 0.3);
}

.checkpoint-action-type.mixed {
    background: #F3E5F5;
    color: #7B1FA2;
    border: 1px solid rgba(123, 31, 162, 0.3);
}

/* 액션 섹션 반응형 */
@media (max-width: 768px) {
    .action-header {
        margin-bottom: 12px;
    }

    .action-section h2 {
        font-size: 1.1rem;
    }

    .action-subtitle {
        font-size: 0.8rem;
    }

    .action-disclaimer-sticky {
        padding: 6px 10px;
    }

    .action-disclaimer-sticky p {
        font-size: 0.7rem;
    }

    .action-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }

    .action-tab {
        font-size: 0.8rem;
        padding: 5px 12px;
    }

    .action-card {
        padding: 12px;
    }

    .action-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .action-name-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .action-price {
        align-items: flex-start;
        width: 100%;
    }

    .action-reason-chips {
        gap: 4px;
    }

    .action-reason-chips .reason-chip {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .action-progress-hint {
        font-size: 0.7rem;
        gap: 4px;
    }

    .action-risk-box {
        padding: 8px 10px;
    }

    .risk-item {
        font-size: 0.75rem;
    }

    .action-cta {
        width: 100%;
        justify-content: center;
    }
}

.signal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.signal-card {
    display: block;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px var(--shadow);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.signal-card:hover {
    transform: translateX(4px);
    border-color: var(--accent);
    box-shadow: 0 4px 16px var(--shadow-hover);
    color: inherit;
}

.signal-link {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 6px;
}

.signal-card:hover .signal-link {
    color: var(--accent-hover);
}

.signal-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.signal-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.signal-symbol {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.signal-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.signal-price .price {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.signal-price .change {
    font-size: 0.95rem;
    font-weight: 600;
}

.signal-price .change.positive {
    color: #D32F2F;
}

.signal-price .change.negative {
    color: #1976D2;
}

.signal-reason {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.no-signals {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary);
    text-align: center;
}

.no-signals i {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 16px;
}

.notify-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--text-secondary);
    text-align: center;
}

.notify-error i {
    font-size: 3rem;
    color: #D32F2F;
    margin-bottom: 16px;
}

.notify-error .error-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.notify-error .btn-primary,
.notify-error .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.notify-error .btn-primary {
    background: #1976D2;
    color: white;
}

.notify-error .btn-primary:hover {
    background: #1565C0;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.notify-error .btn-secondary {
    background: #F5F5F5;
    color: #424242;
}

.notify-error .btn-secondary:hover {
    background: #E0E0E0;
    color: #212121;
}

@media (max-width: 600px) {
    .notify-container {
        padding: 12px;
    }

    .signal-card {
        padding: 12px;
    }

    .signal-name {
        font-size: 1rem;
    }

    .signal-price .price {
        font-size: 1.1rem;
    }
}

/* AI 프로바이더 토글 버튼 */
.provider-toggle {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}

.provider-btn {
    padding: 10px 20px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.provider-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.provider-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.provider-btn.active:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: white;
}

/* Claude 버튼 특별 스타일 */
.provider-btn[data-provider="claude"].active {
    background: #D97757;
    border-color: #D97757;
}

.provider-btn[data-provider="claude"]:hover {
    border-color: #D97757;
    color: #D97757;
}

.provider-btn[data-provider="claude"].active:hover {
    background: #C4684A;
    border-color: #C4684A;
    color: white;
}

/* 관심종목 설정 버튼 */
.settings-btn {
    margin-top: 12px;
    padding: 10px 20px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.settings-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

/* 관심종목 설정 모달 */
.watchlist-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.watchlist-modal.active {
    display: flex;
}

.watchlist-modal-content {
    background: var(--bg-card);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.watchlist-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.watchlist-modal-header h2 {
    margin: 0;
    color: var(--accent);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close-btn:hover {
    color: #D32F2F;
}

.watchlist-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.add-stock-section h3,
.current-watchlist h3 {
    margin: 0 0 12px 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.add-stock-form {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.add-stock-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}

.add-stock-form input:focus {
    border-color: var(--accent);
}

.add-stock-form button {
    padding: 10px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.2s;
}

.add-stock-form button:hover {
    background: var(--accent-hover);
}

.watchlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.watchlist-header h3 {
    margin: 0;
}

.watchlist-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.action-btn.danger:hover {
    background: #FFEBEE;
    border-color: #D32F2F;
    color: #D32F2F;
}

.watchlist-items {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.watchlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.watchlist-item:last-child {
    border-bottom: none;
}

.watchlist-item:hover {
    background: var(--bg-primary);
}

.item-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.item-name {
    font-weight: 600;
    color: var(--text-primary);
}

.item-code {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.remove-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.remove-btn:hover {
    background: #FFEBEE;
    color: #D32F2F;
}

.empty-message {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 20px;
    margin: 0;
}

.watchlist-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.apply-btn {
    padding: 12px 24px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.apply-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .watchlist-modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .watchlist-modal-header {
        padding: 16px;
    }

    .watchlist-modal-body {
        padding: 16px;
    }

    .add-stock-form {
        flex-direction: column;
    }

    .add-stock-form input {
        width: 100%;
    }

    .watchlist-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .watchlist-modal-footer {
        padding: 12px 16px;
    }
}

/* 추천종목 테이블 스타일 */
.recommend-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 24px;
}

.table-header {
    text-align: center;
    margin-bottom: 24px;
}

.table-header h2 {
    color: var(--accent);
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.source-link {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.source-link a {
    color: var(--accent);
}

.table-wrapper {
    overflow-x: auto;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 2px 12px var(--shadow);
    border: 1px solid var(--border);
}

.recommend-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

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

.recommend-table th {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.recommend-table tbody tr:hover {
    background: rgba(46, 125, 50, 0.05);
}

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

.market-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.market-badge.etf {
    background: #E3F2FD;
    color: #1565C0;
}

.market-badge.stock {
    background: #FFF3E0;
    color: #E65100;
}

.name-cell {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 180px;
}

.code-cell {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--accent);
}

.price-cell {
    font-family: 'Courier New', monospace;
    text-align: right;
}

.change-cell,
.return-cell {
    text-align: right;
    font-weight: 600;
}

.positive {
    color: #D32F2F;
}

.negative {
    color: #1976D2;
}

.neutral {
    color: var(--text-secondary);
}

.reason-cell {
    max-width: 300px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

@media (max-width: 1200px) {
    .recommend-container {
        padding: 16px;
    }

    .recommend-table th,
    .recommend-table td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .reason-cell {
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .recommend-table th,
    .recommend-table td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .market-badge {
        padding: 3px 8px;
        font-size: 0.75rem;
    }

    .name-cell {
        min-width: 120px;
    }

    .reason-cell {
        max-width: 150px;
        font-size: 0.75rem;
    }
}

/* ============================================
   DECISION SUPPORT SYSTEM STYLES
   ============================================ */

/* Timeframe Selector */
.timeframe-selector {
    display: flex;
    gap: 12px;
    margin: 24px 0;
    padding: 0 8px;
    justify-content: center;
}

.timeframe-tab {
    flex: 1;
    max-width: 200px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.timeframe-tab:hover {
    border-color: var(--accent);
    background: var(--accent-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.timeframe-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    box-shadow: 0 4px 16px var(--shadow-hover);
}

.tab-label {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.tab-desc {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Consensus Score Section */
/* ============================================
   CONSENSUS CARD - Refined Design
   Visual hierarchy: AI Summary > Donut > Pills
   Calm, analytical, premium feel
   ============================================ */

/* Wrapper for title and card (same structure as scenarios-section) */
.consensus-wrapper {
    margin: 32px 0;
}

/* Title outside the card (same style as scenarios-section h2) */
.consensus-wrapper h2 {
    margin: 24px 0 20px 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    justify-content: flex-start;
}

.consensus-wrapper h2 i {
    flex-shrink: 0;
    font-size: 1.1rem;
}

.consensus-wrapper h2 span {
    flex: 0 0 auto;
}

/* Card container */
.consensus-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* 3열 레이아웃: 도넛(앵커) | AI 설명(주요) | 지표 pills(보조) */
.consensus-container {
    display: grid;
    grid-template-columns: 100px 1fr 260px;
    gap: 16px 20px;
    align-items: center;
    max-width: 100%;
}

/* Col A: 도넛 차트 + 칩 (시각적 앵커) */
.consensus-score-column {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-shrink: 0;
    position: relative;
    margin-left: 160px;
}

/* 도넛 + 배지 수직 그룹 */
.score-donut-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.consensus-score {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    width: 100%;
    flex-direction: column;
}

/* A) Donut Score - Subtle, informative anchor */
.score-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 4px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Softer color palette - lower saturation */
.score-circle.score-bullish {
    border-color: #81C784; /* softer green */
    background: #F1F8E9;
}

.score-circle.score-bearish {
    border-color: #E57373; /* softer red */
    background: #FBE9E7;
}

.score-circle.score-neutral {
    border-color: #FFB74D; /* softer orange */
    background: #FFF8E1;
}

.score-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.score-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* 인라인 정보 아이콘 (점수 라벨 내부) */
.score-info-btn-inline {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.7rem;
    transition: color 0.2s;
    margin-left: 2px;
    vertical-align: middle;
    line-height: 1;
}

.score-info-btn-inline:hover {
    color: var(--accent);
}

.score-info-btn-inline:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-radius: 2px;
}

.score-info-btn-inline .info-icon {
    font-size: 0.7rem;
    line-height: 1;
}

/* 점수 의미 라벨 (도넛 오른쪽) */
.score-meaning-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.3;
}

/* Score confidence tag - subtle */
.score-confidence {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
    gap: 6px;
}

.consensus-info-combined {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
}

.info-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
}

/* Info badges - Softer, less prominent */
.info-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.info-badge.confidence-high {
    background: #F1F8E9;
    color: #558B2F;
}

.info-badge.confidence-medium {
    background: #FFF8E1;
    color: #F57F17;
}

.info-badge.confidence-low {
    background: #FBE9E7;
    color: #D84315;
}

.info-badge.bias {
    background: rgba(33, 150, 243, 0.08);
    color: #1976D2;
}

.info-explain {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* B) AI Summary - Primary Message Block (focal point) */
.consensus-ai-explanation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    min-width: 320px;
    max-width: 480px;
    flex: 1;
    margin: 0 auto;
}

.ai-explanation-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 14px 16px;
    background: transparent; /* Remove heavy background */
    border-left: 2px solid var(--accent); /* Thin 2px line */
    border-radius: 0; /* Clean edge */
    position: relative;
}

.ai-explanation-header {
    margin: 0;
}

.ai-explanation-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.ai-explanation-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.ai-explanation-main {
    font-size: 0.95rem;
    font-weight: 500; /* Slightly lighter weight */
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.ai-explanation-caveat {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
}

/* Col B: 설명 텍스트 (상세 설명용, 숨김) */
.consensus-explanation-column {
    display: flex;
    flex-direction: column;
    min-width: 280px;
    position: relative;
}

.consensus-explanation {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.explanation-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
    word-break: break-word;
}

.explanation-more-btn {
    align-self: flex-start;
    padding: 4px 8px;
    font-size: 0.75rem;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
}

.explanation-more-btn:hover {
    background: var(--accent-light);
    color: var(--accent-hover);
}

.explanation-more-btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 팝오버 스타일 */
.explanation-popover,
.score-info-popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 240px;
    padding: 0;
}

.score-info-popover .popover-body {
    padding: 10px 12px;
    font-size: 0.8rem;
    line-height: 1.5;
}

.score-info-popover .popover-body p {
    margin: 0 0 6px 0;
}

.score-info-popover .popover-body p:last-child {
    margin-bottom: 0;
}

.explanation-popover {
    left: 0;
    right: 0;
    transform: none;
}

.score-info-popover {
    width: 320px;
}

.popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.popover-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.popover-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s;
}

.popover-close:hover {
    color: var(--text-primary);
}

.popover-close:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.popover-body {
    padding: 12px 16px;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.popover-body p {
    margin: 0 0 12px 0;
}

.popover-body p:last-child {
    margin-bottom: 0;
}

.popover-body .disclaimer {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* D) Col C: Indicator Pills - Clean 2-column grid */
.consensus-breakdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 auto;
    width: 250px;
    max-width: 250px;
    align-items: stretch;
    justify-content: flex-start;
    padding-right: 0;
}

/* 지표 그룹 - 2열 고정 */
.indicator-group {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 100%;
}

/* 각 그룹 내 아이템 동일 너비 */
.indicator-group .consensus-item {
    flex: 1 1 0;
    min-width: 0;
}

/* 그룹 간 간격 제거 */
.momentum-group,
.direction-group,
.support-group {
    margin: 0;
}

/* No dividers */
@media (min-width: 1024px) {
    .direction-group::before,
    .support-group::before {
        display: none;
    }
}

/* 태블릿 레이아웃 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .consensus-container {
        grid-template-columns: 100px 1fr;
        gap: 16px 20px;
        align-items: start;
    }

    .consensus-score-column {
        flex-direction: row;
        align-items: center;
    }

    .consensus-ai-explanation {
        grid-column: 2;
        min-width: 240px;
        max-width: 100%;
    }

    .ai-explanation-block {
        padding: 10px 14px;
    }

    .consensus-breakdown {
        grid-column: 1 / -1;
        max-width: 100%;
        width: 100%;
        align-items: flex-start;
        padding-right: 0;
    }

    .indicator-group {
        flex-direction: row;
        gap: 6px;
    }

    .explanation-text {
        -webkit-line-clamp: 2;
    }
}

/* 모바일 레이아웃 (< 768px) */
@media (max-width: 768px) {
    .consensus-section {
        padding: 16px;
    }

    .consensus-container {
        grid-template-columns: 1fr;
        gap: 20px; /* 모바일에서도 충분한 간격 */
        align-items: stretch;
    }

    .consensus-score-column {
        flex-direction: row;
        align-items: center;
        width: auto;
        min-width: auto;
    }

    .score-confidence {
        justify-content: center;
    }

    .score-donut-group {
        align-items: center;
    }

    .score-info-popover {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 32px);
        max-width: 280px;
    }

    .consensus-ai-explanation {
        min-width: auto;
        max-width: 100%;
        margin: 0;
    }

    .ai-explanation-block {
        padding: 10px 14px;
    }

    .consensus-breakdown {
        width: 100%;
        max-width: 100%;
        align-items: center; /* 모바일에서는 중앙 정렬 */
        padding-right: 0;
    }

    .indicator-group {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 6px;
    }

    .indicator-group .consensus-item {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .consensus-ai-explanation {
        padding: 0;
        align-items: flex-start; /* Left align for readability */
        text-align: left;
    }

    .ai-explanation-block {
        border-left: 2px solid var(--accent);
        padding: 12px 14px;
    }

    .ai-explanation-main {
        text-align: left;
        font-size: 0.9rem;
    }

    .ai-explanation-caveat {
        text-align: left;
    }

    .consensus-breakdown {
        justify-content: center;
        max-width: 100%;
    }
}

/* C) Indicator Pills - Clean compact tags */
.consensus-item {
    background: #F5F7F8;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.consensus-item:hover {
    background: #ECEFF1;
    border-color: rgba(0, 0, 0, 0.1);
}

/* 표준 스타일 */
.consensus-item:not(.indicator-attention):not(.indicator-secondary) {
    background: #F5F7F8;
}

/* 주의 스타일 */
.consensus-item.indicator-attention {
    background: #FFF8E1;
}

.consensus-item.indicator-attention::before {
    display: none;
}

/* 보조 스타일 (중립) */
.consensus-item.indicator-secondary {
    background: #FAFAFA;
    opacity: 0.85;
}

.indicator-name {
    font-weight: 600;
    font-size: 0.72rem;
    color: #607D8B;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.indicator-signal {
    font-size: 0.72rem;
    font-weight: 600;
    cursor: help;
    white-space: nowrap;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Signal dot + text color by state */
.indicator-signal::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Bullish (상승) - Green */
.indicator-signal.signal-bullish {
    color: #2E7D32;
}
.indicator-signal.signal-bullish::before {
    background: #4CAF50;
}

/* Bearish (하락) - Red */
.indicator-signal.signal-bearish {
    color: #C62828;
}
.indicator-signal.signal-bearish::before {
    background: #EF5350;
}

/* Neutral (중립) - Gray */
.indicator-signal.signal-neutral {
    color: #78909C;
}
.indicator-signal.signal-neutral::before {
    background: #B0BEC5;
}

/* Overbought (과매수) - Red variant */
.indicator-signal.signal-overbought {
    color: #C62828;
}
.indicator-signal.signal-overbought::before {
    background: #EF5350;
}

/* Oversold (과매도) - Green variant */
.indicator-signal.signal-oversold {
    color: #2E7D32;
}
.indicator-signal.signal-oversold::before {
    background: #4CAF50;
}

/* Weak (약함) - Light gray */
.indicator-signal.signal-weak {
    color: #90A4AE;
}
.indicator-signal.signal-weak::before {
    background: #CFD8DC;
}

/* Strong (강함) - Dark */
.indicator-signal.signal-strong {
    color: #37474F;
}
.indicator-signal.signal-strong::before {
    background: #546E7A;
}

/* 툴팁 스타일 */
.score-circle {
    cursor: help;
    position: relative;
}

.score-circle[aria-label]:hover::after {
    content: attr(aria-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(33, 33, 33, 0.95);
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.score-circle[aria-label]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;
    border: 5px solid transparent;
    border-top-color: rgba(33, 33, 33, 0.95);
    z-index: 1000;
    pointer-events: none;
}

/* 지표 pills 툴팁 (호버 및 포커스) */
.indicator-signal[title] {
    position: relative;
}

.indicator-signal[title]:hover::after,
.indicator-signal[data-focus="true"]::after {
    content: attr(aria-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    font-size: 0.7rem;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

.indicator-signal[title]:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Scenarios Section */
.scenarios-section {
    margin: 32px 0;
}

.scenarios-section h2 {
    margin: 24px 0 20px 0;
    font-size: 1.3rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    justify-content: flex-start;
}

.scenarios-section h2 i {
    flex-shrink: 0; /* 아이콘 크기 고정 */
}

.scenarios-section h2 span {
    flex: 0 0 auto; /* 텍스트가 아이콘 옆에 배치 */
}

#scenariosContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 16px;
}

.no-scenarios {
    text-align: center;
    color: var(--text-secondary);
    padding: 32px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 2px dashed var(--border);
}

/* Scenario Cards */
.scenario-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px var(--shadow);
    border-left: 4px solid var(--border);
    transition: all 0.3s ease;
}

.scenario-card:hover {
    box-shadow: 0 4px 16px var(--shadow-hover);
    transform: translateY(-2px);
}

/* Action-specific colors */
.scenario-card.scenario-buy {
    border-left-color: #4CAF50;
    background: linear-gradient(135deg, #ffffff 0%, #E8F5E9 100%);
}

.scenario-card.scenario-add {
    border-left-color: #2196F3;
    background: linear-gradient(135deg, #ffffff 0%, #E3F2FD 100%);
}

.scenario-card.scenario-wait {
    border-left-color: #FF9800;
    background: linear-gradient(135deg, #ffffff 0%, #FFF3E0 100%);
}

.scenario-card.scenario-reduce {
    border-left-color: #FF5722;
    background: linear-gradient(135deg, #ffffff 0%, #FBE9E7 100%);
}

.scenario-card.scenario-sell {
    border-left-color: #f44336;
    background: linear-gradient(135deg, #ffffff 0%, #FFEBEE 100%);
}

.scenario-card.scenario-confirm {
    border-left-color: #9E9E9E;
    background: linear-gradient(135deg, #ffffff 0%, #F5F5F5 100%);
}

.scenario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.action-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.05);
}

.severity-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.severity-badge.severity-high {
    background: #FFEBEE;
    color: #C62828;
}

.severity-badge.severity-medium {
    background: #FFF3E0;
    color: #EF6C00;
}

.severity-badge.severity-low {
    background: #E8F5E9;
    color: #2E7D32;
}

.scenario-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: var(--text-primary);
}

.scenario-body {
    margin-bottom: 16px;
}

.scenario-body p {
    margin: 8px 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.scenario-body strong {
    color: var(--accent);
}

.scenario-condition {
    color: var(--text-primary);
}

.scenario-consequence {
    color: var(--text-primary);
}

.scenario-reason {
    color: var(--text-secondary);
    font-style: italic;
}

/* Risk Metrics */
.risk-metrics {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.risk-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.risk-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 6px 0;
    font-size: 0.85rem;
}

.risk-label {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 60px;
}

.risk-value {
    font-weight: 700;
    color: var(--accent);
}

.risk-reason {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Loading States */
.report-loading-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    justify-content: center;
    color: var(--text-secondary);
}

.spinner-small {
    width: 20px;
    height: 20px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Responsive Design for Decision Support */
@media (max-width: 1200px) {
    #scenariosContainer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .timeframe-selector {
        flex-direction: column;
    }

    .timeframe-tab {
        max-width: 100%;
    }

    .consensus-section {
        padding: 12px;
    }

    .consensus-wrapper h2 {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .consensus-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .consensus-score-column {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }

    .consensus-explanation-column {
        min-width: unset;
    }

    .explanation-text {
        font-size: 0.8rem;
        -webkit-line-clamp: 3;
    }

    .explanation-more-btn {
        display: none;
    }

    .explanation-popover {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        right: auto;
        max-width: 90vw;
        max-height: 80vh;
        overflow-y: auto;
    }

    .consensus-breakdown {
        max-width: 100%;
    }

    .score-circle {
        width: 56px;
        height: 56px;
        border-width: 4px;
    }

    .score-value {
        font-size: 1.1rem;
    }

    .score-label {
        font-size: 0.65rem;
    }

    .score-meaning-label {
        font-size: 0.7rem;
    }

    .score-confidence {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .info-badge {
        padding: 2px 8px;
        font-size: 0.7rem;
    }

    .info-explain {
        font-size: 0.7rem;
    }

    .consensus-breakdown {
        width: 100%;
        gap: 6px;
    }

    .indicator-group .consensus-item {
        padding: 5px 10px;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .indicator-name {
        font-size: 0.7rem;
        min-width: 32px;
    }

    .indicator-signal {
        font-size: 0.65rem;
        white-space: nowrap;
    }

    .scenario-card {
        padding: 16px;
    }

    .scenario-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .indicator-group .consensus-item {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: 4px 8px;
    }

    .score-circle {
        width: 50px;
        height: 50px;
    }

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

    .score-meaning-label {
        font-size: 0.65rem;
    }
}

/* Enhanced Report Section Bubbles for Decision Support */
.report-section-bubble {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px var(--shadow);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.report-section-bubble:hover {
    box-shadow: 0 4px 12px var(--shadow-hover);
}

.report-section-header {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-light);
}

.report-section-content {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.report-section-content p {
    margin: 12px 0;
}


/* ============================================
   PRIMARY SCENARIO EMPHASIS STYLES
   ============================================ */

/* Primary badge */
.primary-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    z-index: 10;
    text-transform: uppercase;
}

/* Primary scenario card styling */
.scenario-card.scenario-primary {
    border-left-width: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #FFF9F0 100%);
    transform: scale(1.02);
}

.scenario-card.scenario-primary:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.scenario-card.scenario-primary .scenario-title {
    font-size: 1.2rem;
    color: #C62828;
}

.scenario-card.scenario-primary .scenario-header {
    border-bottom: 2px solid rgba(198, 40, 40, 0.1);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

/* Secondary scenario styling */
.scenario-card.scenario-secondary {
    opacity: 0.85;
}

.scenario-card.scenario-secondary .scenario-title {
    font-size: 1rem;
}

.scenario-card.scenario-secondary:hover {
    opacity: 1;
}

/* Consensus action bias display */
.consensus-action-bias {
    margin-top: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #FFF3E0 0%, #FFECB3 100%);
    border-left: 4px solid #FF9800;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #E65100;
}

.consensus-action-bias-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    opacity: 0.8;
}

/* Adjust scenarios section title */
.scenarios-section h2 {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 왼쪽 정렬로 변경 */
}

.scenarios-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 4px 12px;
    border-radius: 12px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .primary-badge {
        font-size: 0.7rem;
        padding: 4px 12px;
        top: -8px;
        right: 12px;
    }

    .scenario-card.scenario-primary {
        transform: scale(1);
    }

    .scenario-card.scenario-primary:hover {
        transform: scale(1.01);
    }
}


/* 반응형 - 레벨 선택기 */
@media (max-width: 768px) {
    .indicators-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .level-selector {
        width: 100%;
        justify-content: space-between;
    }

    .level-btn {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .level-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}

/* ============================================
   PRICE GUIDE STYLES (Beginner-friendly)
   Direction-aware decision boundary display
   ============================================ */

.price-guide {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 12px;
    border: 1px solid var(--border);
}

.price-guide-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 6px;
}

.price-guide-current {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.price-guide-item {
    margin: 8px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-left: 3px solid var(--border);
}

.price-guide-item:last-child {
    margin-bottom: 0;
}

/* Direction-specific styling */
.price-guide-item.direction-down {
    border-left-color: #1976D2;
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.price-guide-item.direction-up {
    border-left-color: #D32F2F;
    background: linear-gradient(135deg, rgba(211, 47, 47, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.price-level {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.direction-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.price-explain {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding-left: 24px;
    line-height: 1.5;
}

/* Mobile adjustments for price guide */
@media (max-width: 768px) {
    .price-guide {
        padding: 12px 14px;
    }

    .price-guide-title {
        font-size: 0.8rem;
    }

    .price-guide-current {
        font-size: 0.7rem;
    }

    .price-guide-item {
        padding: 6px 8px;
    }

    .price-level {
        font-size: 0.85rem;
    }

    .price-explain {
        font-size: 0.75rem;
        padding-left: 20px;
    }
}

@media (max-width: 480px) {
    .price-guide {
        padding: 10px 12px;
    }

    .price-guide-item {
        margin: 6px 0;
        padding: 5px 6px;
    }

    .price-level {
        font-size: 0.8rem;
        gap: 4px;
    }

    .direction-icon {
        font-size: 0.75rem;
    }

    .price-explain {
        font-size: 0.7rem;
        padding-left: 16px;
    }
}

/* ============================================
   WATCH TABLE STYLES
   Portfolio monitoring dashboard
   ============================================ */

.watch-table-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
}

.watch-header {
    text-align: center;
    margin-bottom: 24px;
}

.watch-header h1 {
    color: var(--accent);
    font-size: 1.6rem;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.watch-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* Control Panel */
.watch-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow);
}

.control-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.control-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.control-item label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.btn-group {
    display: flex;
    gap: 4px;
    background: var(--bg-primary);
    padding: 3px;
    border-radius: 8px;
}

.tf-btn, .level-toggle-btn {
    padding: 6px 14px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.tf-btn:hover, .level-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.tf-btn.active, .level-toggle-btn.active {
    background: var(--accent);
    color: white;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 120px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent);
}

.refresh-btn {
    padding: 8px 16px;
    border: none;
    background: var(--accent);
    color: white;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.refresh-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* Loading */
.watch-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-secondary);
}

/* Table Wrapper */
.watch-table-wrapper {
    overflow-x: auto;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--shadow);
    border: 1px solid var(--border);
}

/* Table */
.watch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.watch-table th {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 600;
    padding: 12px 10px;
    text-align: center;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.watch-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.watch-table tbody tr:hover {
    background: rgba(46, 125, 50, 0.03);
}

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

/* Stock Column */
.stock-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
}

.stock-link:hover .stock-name {
    color: var(--accent);
}

.stock-name {
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.2s;
}

.stock-symbol {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Price Column */
.col-price {
    text-align: right;
}

.price-value {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.price-change {
    font-size: 0.75rem;
    font-weight: 600;
}

.price-change.positive {
    color: #D32F2F;
}

.price-change.negative {
    color: #1976D2;
}

/* Signal Column - 오늘의 신호 */
.col-signal {
    text-align: center;
    min-width: 70px;
}

.signal-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.signal-buy {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    color: #1565C0;
    border: 1px solid #90CAF9;
}

.signal-sell {
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
    color: #C62828;
    border: 1px solid #EF9A9A;
}

.signal-mixed {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    color: #E65100;
    border: 1px solid #FFCC80;
}

.signal-hold {
    background: #F5F5F5;
    color: #757575;
    border: 1px solid #E0E0E0;
}

.signal-check {
    background: #FFF8E1;
    color: #F57C00;
    border: 1px solid #FFE082;
}

/* Strength Column - 세기 */
.col-strength {
    text-align: center;
    min-width: 60px;
}

.signal-strength {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.signal-strength.strength-high {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    color: #2E7D32;
    border: 1px solid #A5D6A7;
}

.signal-strength.strength-medium {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    color: #F57C00;
    border: 1px solid #FFD54F;
}

.signal-strength.strength-low {
    background: #FAFAFA;
    color: #9E9E9E;
    border: 1px solid #E0E0E0;
}

.signal-strength.strength-none {
    background: transparent;
    color: #BDBDBD;
    border: none;
}

/* Action Column - 행동(오늘 결론) */
.col-action {
    text-align: center;
    min-width: 100px;
}

.action-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
    letter-spacing: -0.02em;
}

/* 지금 줄이기 (REDUCE_NOW) */
.action-reduce {
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
    color: #C62828;
    border: 1px solid #EF9A9A;
    box-shadow: 0 2px 4px rgba(198, 40, 40, 0.15);
}

/* 지금 시작하기 (START_NOW) */
.action-start {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    color: #1565C0;
    border: 1px solid #90CAF9;
    box-shadow: 0 2px 4px rgba(21, 101, 192, 0.15);
}

/* 기다리기 (WAIT) */
.action-wait {
    background: #F5F5F5;
    color: #757575;
    border: 1px solid #E0E0E0;
}

/* 확인 후 결정 (CHECK_THEN_DECIDE) */
.action-check {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    color: #E65100;
    border: 1px solid #FFD54F;
    box-shadow: 0 2px 4px rgba(230, 81, 0, 0.1);
}

/* Legacy support */
.action-readiness {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

.action-buy {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    color: #1565C0;
    border: 1px solid #90CAF9;
}

.action-sell {
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
    color: #C62828;
    border: 1px solid #EF9A9A;
}

.action-caution {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    color: #E65100;
    border: 1px solid #FFD54F;
}

.action-mixed {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    color: #E65100;
    border: 1px solid #FFCC80;
}

.action-neutral {
    background: #F5F5F5;
    color: #757575;
    border: 1px solid #E0E0E0;
}

/* 초보자 요약 컬럼 스타일 */
.col-summary {
    min-width: 180px;
}

.col-summary .summary-main {
    display: block;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 4px;
}

.col-summary .summary-next {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.3;
    opacity: 0.8;
}

/* Consensus Column */
.col-consensus {
    text-align: center;
}

.consensus-score {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.consensus-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 2px;
}

.badge-bullish {
    background: #E8F5E9;
    color: #2E7D32;
}

.badge-bearish {
    background: #FFEBEE;
    color: #C62828;
}

.badge-neutral {
    background: #FFF3E0;
    color: #E65100;
}

.badge-mixed, .badge-conflict {
    background: #FFF8E1;
    color: #F57C00;
}

.badge-overbought {
    background: #FCE4EC;
    color: #C2185B;
}

/* Bias Column */
.bias-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.bias-risk-off {
    background: #ECEFF1;
    color: #546E7A;
}

.bias-mixed {
    background: #FFF3E0;
    color: #E65100;
}

.bias-selective {
    background: #E3F2FD;
    color: #1565C0;
}

.bias-active {
    background: #E8F5E9;
    color: #2E7D32;
}

/* Scenario Column */
.scenario-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scenario-type {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.scenario-buy .scenario-type, .scenario-add .scenario-type {
    background: #E8F5E9;
    color: #2E7D32;
}

.scenario-wait .scenario-type, .scenario-confirm .scenario-type {
    background: #FFF3E0;
    color: #E65100;
}

.scenario-reduce .scenario-type, .scenario-sell .scenario-type {
    background: #FFEBEE;
    color: #C62828;
}

.scenario-title {
    font-size: 0.8rem;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Decision Column */
.col-decision {
    min-width: 180px;
}

.decision-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 0.8rem;
    line-height: 1.3;
}

.decision-item:not(:last-child) {
    border-bottom: 1px dashed var(--border);
}

.decision-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.decision-down {
    color: #1565C0;
}

.decision-up {
    color: #C62828;
}

/* Summary Column (Beginner) */
.col-summary {
    max-width: 200px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Indicators Column (Advanced) */
.col-indicators {
    min-width: 180px;
}

.indicator-pill {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    margin: 1px;
}

.pill-success {
    background: #E8F5E9;
    color: #2E7D32;
}

.pill-danger {
    background: #FFEBEE;
    color: #C62828;
}

.pill-neutral {
    background: #ECEFF1;
    color: #546E7A;
}

/* Status Column */
.col-status {
    text-align: center;
}

.status-ok {
    color: #2E7D32;
    font-size: 1.1rem;
}

.status-wait {
    color: #E65100;
    font-size: 1.1rem;
}

.status-warning {
    color: #FF9800;
    font-size: 1.1rem;
}

.status-confirm {
    color: #9E9E9E;
    font-size: 1.1rem;
}

/* Legend */
.watch-legend {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.legend-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Error */
.watch-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-secondary);
    text-align: center;
}

.watch-error i {
    font-size: 3rem;
    color: #D32F2F;
    margin-bottom: 16px;
}

.watch-error button {
    margin-top: 16px;
    padding: 10px 20px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1200px) {
    .watch-table-container {
        padding: 16px;
    }

    .watch-table th, .watch-table td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .col-decision {
        min-width: 160px;
    }
}

@media (max-width: 900px) {
    .watch-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .control-group {
        width: 100%;
        justify-content: space-between;
    }

    .watch-table th, .watch-table td {
        padding: 8px 6px;
        font-size: 0.75rem;
    }

    .stock-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .scenario-title {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .col-decision {
        min-width: 140px;
    }

    .decision-item {
        font-size: 0.7rem;
    }
}

@media (max-width: 600px) {
    .watch-table-container {
        padding: 12px;
    }

    .watch-header h1 {
        font-size: 1.2rem;
        flex-wrap: wrap;
    }

    .watch-description {
        font-size: 0.85rem;
    }

    .watch-controls {
        padding: 12px;
        gap: 12px;
    }

    .control-group {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .control-item {
        width: 100%;
        min-width: unset;
    }

    .btn-group {
        width: 100%;
        justify-content: stretch;
    }

    .tf-btn, .level-toggle-btn {
        flex: 1;
        padding: 8px 12px;
    }

    .filter-select {
        width: 100%;
    }

    .refresh-btn {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }

    /* 모바일에서 테이블을 카드 형태로 변환 */
    .watch-table-wrapper {
        overflow: visible;
    }

    .watch-table {
        display: block;
    }

    .watch-table thead {
        display: none;
    }

    .watch-table tbody {
        display: block;
    }

    .watch-table tbody tr {
        display: block;
        margin-bottom: 16px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px var(--shadow);
    }

    .watch-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .watch-table td {
        display: block;
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
        text-align: left !important;
    }

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

    .watch-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--accent);
        display: block;
        margin-bottom: 4px;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    /* 모바일에서 모든 컬럼 표시 */
    .col-summary, .col-indicators, .col-bias, .col-signal, .col-strength {
        display: block;
    }

    .col-signal, .col-strength {
        text-align: left;
    }

    .stock-name {
        max-width: 100%;
    }

    .scenario-title {
        max-width: 100%;
        white-space: normal;
    }

    /* AI 요약 배너 모바일 */
    .ai-summary-banner {
        padding: 12px 16px;
        margin-bottom: 12px;
    }

    .ai-summary-title {
        font-size: 0.9rem;
    }

    .ai-summary-bullets li {
        font-size: 0.85rem;
        padding: 5px 0;
    }

    /* 체크포인트 모바일 */
    .today-checkpoints {
        padding: 12px;
        margin-bottom: 16px;
    }

    .checkpoints-header {
        font-size: 0.9rem;
        flex-wrap: wrap;
    }

    .checkpoints-hint {
        font-size: 0.75rem;
    }

    .checkpoint-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .checkpoint-header {
        font-size: 0.85rem;
    }

    .checkpoint-price {
        font-size: 0.9rem;
    }

    /* 범례 모바일 */
    .watch-legend {
        font-size: 0.8rem;
        padding: 12px;
        margin-top: 16px;
    }

    .legend-items {
        flex-direction: column;
        gap: 8px;
    }

    .legend-item {
        font-size: 0.75rem;
    }

    /* 테이블 헬퍼 모바일 */
    .table-helper {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    /* 컨센서스 래퍼 모바일 */
    .consensus-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .consensus-score {
        font-size: 1rem;
    }

    .consensus-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .consensus-meaning {
        font-size: 0.7rem;
    }

    /* 시나리오 셀 모바일 */
    .scenario-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .scenario-type {
        font-size: 0.7rem;
    }

    .scenario-title {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* 판단 기준 모바일 */
    .decision-compact {
        padding: 8px;
    }

    .decision-tokens {
        flex-wrap: wrap;
        gap: 4px;
    }

    .decision-token {
        font-size: 0.7rem;
        padding: 3px 6px;
    }

    /* 상태 태그 모바일 */
    .status-tag {
        flex-direction: column;
        gap: 2px;
        padding: 6px 8px;
    }

    .status-label {
        font-size: 0.65rem;
    }
}

/* 추가 모바일 최적화 (480px 이하) */
@media (max-width: 480px) {
    .watch-table-container {
        padding: 8px;
    }

    .watch-header h1 {
        font-size: 1.1rem;
    }

    .watch-description {
        font-size: 0.8rem;
    }

    .watch-controls {
        padding: 10px;
        gap: 10px;
    }

    .control-item label {
        font-size: 0.7rem;
    }

    .tf-btn, .level-toggle-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .watch-table tbody tr {
        padding: 12px;
        margin-bottom: 12px;
    }

    .watch-table td {
        padding: 6px 0;
        font-size: 0.8rem;
    }

    .watch-table td::before {
        font-size: 0.7rem;
    }

    .stock-name {
        font-size: 0.9rem;
    }

    .stock-symbol {
        font-size: 0.7rem;
    }

    .price-value {
        font-size: 0.9rem;
    }

    .price-change {
        font-size: 0.75rem;
    }

    .ai-summary-banner {
        padding: 10px 12px;
    }

    .ai-summary-title {
        font-size: 0.85rem;
    }

    .ai-summary-bullets li {
        font-size: 0.8rem;
    }

    .today-checkpoints {
        padding: 10px;
    }

    .checkpoints-header {
        font-size: 0.85rem;
    }
}

/* ============================================
   WATCH TABLE V2 - New UI Components
   ============================================ */

/* (A) Today's Checkpoints Summary Bar */
.today-checkpoints {
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
    border-radius: 12px;
    border: 1px solid #C8E6C9;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.1);
}

.checkpoints-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #A5D6A7;
}

.checkpoints-header i {
    color: #2E7D32;
    font-size: 1.1rem;
}

.checkpoints-header span:first-of-type {
    font-weight: 700;
    color: #1B5E20;
    font-size: 0.95rem;
}

.checkpoints-hint {
    font-size: 0.75rem;
    color: #558B2F;
    margin-left: auto;
    font-weight: 500;
}

.checkpoints-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkpoint-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.checkpoint-item:hover {
    border-color: #66BB6A;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.15);
    transform: translateX(4px);
}

.checkpoint-rank {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2E7D32;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.checkpoint-text {
    flex: 1;
    font-size: 0.85rem;
    color: #37474F;
    line-height: 1.4;
}

.checkpoint-distance {
    font-size: 0.75rem;
    font-weight: 600;
    color: #FF8F00;
    background: #FFF8E1;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* (B) Compact Decision Tokens */
.decision-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s;
}

.decision-compact:hover {
    background: var(--bg-secondary);
}

.decision-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.decision-token {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.token-down {
    background: #E3F2FD;
    color: #1565C0;
}

.token-up {
    background: #FFEBEE;
    color: #C62828;
}

.extra-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #ECEFF1;
    color: #546E7A;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 11px;
}

.expand-icon {
    color: var(--text-secondary);
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.decision-expanded {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

/* Legend tokens */
.legend-token {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* (C) Status Tags with Labels */
.status-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-tag i {
    font-size: 0.8rem;
}

.status-label {
    font-size: 0.7rem;
}

.status-conflict {
    background: #FFF3E0;
    color: #E65100;
}

.status-conflict i {
    color: #FF9800;
}

.status-check {
    background: #ECEFF1;
    color: #546E7A;
}

.status-check i {
    color: #78909C;
}

.status-review {
    background: #E8F5E9;
    color: #2E7D32;
}

.status-review i {
    color: #43A047;
}

.status-wait {
    background: #F5F5F5;
    color: #9E9E9E;
}

.status-wait i {
    color: #BDBDBD;
}

/* (F) Consensus Meaning Helper */
.consensus-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.consensus-meaning {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: help;
}

.meaning-unfavorable {
    background: #FFEBEE;
    color: #C62828;
}

.meaning-mixed {
    background: #FFF3E0;
    color: #E65100;
}

.meaning-favorable {
    background: #E8F5E9;
    color: #2E7D32;
}

/* Checkpoints Responsive */
@media (max-width: 900px) {
    .today-checkpoints {
        padding: 12px;
    }

    .checkpoint-item {
        padding: 8px 10px;
    }

    .checkpoint-text {
        font-size: 0.8rem;
    }

    .checkpoints-hint {
        display: none;
    }
}

@media (max-width: 600px) {
    .checkpoints-list {
        gap: 6px;
    }

    .checkpoint-item {
        padding: 8px;
    }

    .checkpoint-text {
        font-size: 0.75rem;
    }

    .checkpoint-rank {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }

    .checkpoint-distance {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    /* Compact decision tokens mobile */
    .decision-token {
        padding: 3px 6px;
        font-size: 0.7rem;
    }

    .status-tag {
        padding: 3px 6px;
    }

    .status-label {
        display: none;
    }

    .consensus-meaning {
        font-size: 0.6rem;
    }
}

/* ============================================
   WATCH TABLE V3 - Refined Components
   ============================================ */

/* (A) Checkpoint item with action tag */
.checkpoint-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkpoint-name {
    font-weight: 600;
    color: #37474F;
    font-size: 0.9rem;
}

.checkpoint-current {
    font-weight: 400;
    color: #78909C;
    font-size: 0.8rem;
    margin-left: 6px;
}

.checkpoint-price {
    font-size: 0.8rem;
    color: #607D8B;
}

.checkpoint-distance {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1976D2;
    min-width: 40px;
    text-align: right;
    flex-shrink: 0;
}

/* Action tags (for checkpoints and legend) */
.action-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.tag-review {
    background: #E8F5E9;
    color: #2E7D32;
}

.tag-check {
    background: #FFF3E0;
    color: #E65100;
}

.tag-wait {
    background: #ECEFF1;
    color: #546E7A;
}

/* (E) Proximity level styling */
.checkpoint-item.priority-high {
    background: linear-gradient(135deg, #FFF8E1, #FFECB3);
    border: 1px solid #FFD54F;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.checkpoint-item.priority-high:hover {
    border-color: #FFC107;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.checkpoint-item.priority-medium {
    background: white;
    border: 1px solid #E0E0E0;
}

.checkpoint-item.priority-low {
    background: #FAFAFA;
    border: 1px solid #EEEEEE;
    opacity: 0.85;
}

/* (A) More button for checkpoints */
.checkpoints-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    background: transparent;
    border: 1px dashed #A5D6A7;
    border-radius: 8px;
    color: #2E7D32;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.checkpoints-more-btn:hover {
    background: rgba(46, 125, 50, 0.05);
    border-color: #66BB6A;
}

.checkpoints-more-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.checkpoints-hidden {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* (B) Decision fallback text */
.decision-fallback {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-style: italic;
}

.fallback-trend {
    background: #E3F2FD;
    color: #1565C0;
}

.fallback-signal {
    background: #FFF3E0;
    color: #E65100;
}

.fallback-risk {
    background: #FFEBEE;
    color: #C62828;
}

.fallback-pending {
    background: #F5F5F5;
    color: #757575;
}

/* (F) Table helper text */
.table-helper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: #E3F2FD;
    border-radius: 8px;
    border-left: 3px solid #1976D2;
    font-size: 0.85rem;
    color: #1565C0;
}

.table-helper i {
    color: #1976D2;
    font-size: 0.9rem;
}

/* Responsive adjustments for V3 */
@media (max-width: 900px) {
    .checkpoint-content {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .checkpoint-price {
        font-size: 0.75rem;
    }

    .checkpoint-current {
        font-size: 0.75rem;
    }

    .checkpoint-distance {
        font-size: 0.75rem;
        min-width: 35px;
    }

    .action-tag {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
}

@media (max-width: 600px) {
    .checkpoint-item {
        flex-wrap: wrap;
    }

    .checkpoint-content {
        flex: 1 1 100%;
        order: 1;
        margin-left: 34px;
        margin-top: 4px;
    }

    .checkpoint-rank {
        order: 0;
    }

    .checkpoint-distance {
        order: 2;
        font-size: 0.7rem;
        min-width: 30px;
    }

    .action-tag {
        order: 3;
        margin-left: auto;
    }

    .checkpoint-current {
        display: none;
    }

    .table-helper {
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    .decision-fallback {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
}

/* ============================================
   AI TODAY SUMMARY BANNER
   ============================================ */

.ai-summary-banner {
    background: #FFFFFF;
    border: 2px solid #2196F3;
    border-left: 4px solid #2196F3;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

.ai-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ai-summary-icon {
    font-size: 1.2rem;
}

.ai-summary-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1976D2;
}

.ai-summary-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.ai-summary-bullets li {
    padding: 6px 0;
    font-size: 0.9rem;
    color: #212529;
    line-height: 1.5;
    border-bottom: 1px dashed rgba(33, 150, 243, 0.2);
}

.ai-summary-bullets li:last-child {
    border-bottom: none;
}

.ai-summary-bullets li::before {
    content: '•';
    color: #2196F3;
    font-weight: bold;
    margin-right: 8px;
}

.ai-summary-footnote {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0;
    text-align: right;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .ai-summary-banner {
        padding: 12px 16px;
        margin-bottom: 12px;
    }

    .ai-summary-title {
        font-size: 0.9rem;
    }

    .ai-summary-bullets li {
        font-size: 0.85rem;
        padding: 5px 0;
    }

    .ai-summary-footnote {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .ai-summary-banner {
        padding: 10px 12px;
        border-radius: 8px;
    }

    .ai-summary-bullets li {
        font-size: 0.8rem;
    }
}


/* ============================================
   YOUTUBE PODCAST SCRIPT GENERATOR
   ============================================ */

.youtube-podcast-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.youtube-podcast-header {
    text-align: center;
    margin-bottom: 32px;
}

.youtube-podcast-header h1 {
    color: var(--accent);
    margin: 0 0 8px 0;
    font-size: 1.8rem;
    font-weight: 600;
}

.youtube-podcast-header .subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.youtube-podcast-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px var(--shadow);
    border: 1px solid var(--border);
    margin-bottom: 24px;
}

.input-section {
    margin-bottom: 20px;
}

.input-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.youtube-url-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.youtube-url-input:focus {
    outline: none;
    border-color: var(--accent);
}

.options-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.option-group {
    display: flex;
    flex-direction: column;
}

.option-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.option-select {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

.option-select:focus {
    outline: none;
    border-color: var(--accent);
}

.host-options-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.host-input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

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

.button-group {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.btn-primary {
    flex: 1;
    padding: 12px 24px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

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

.cache-control {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.cache-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.cache-checkbox input[type="checkbox"] {
    cursor: pointer;
}

.btn-link-small {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.btn-link-small:hover {
    color: var(--accent-hover);
}

.loading-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
}

.loading-status .spinner {
    margin-bottom: 16px;
}

.error-box {
    background: #FFEBEE;
    border: 1px solid #F44336;
    border-left: 4px solid #F44336;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #C62828;
}

.error-box i {
    font-size: 1.2rem;
}

.result-area {
    margin-top: 24px;
}

.result-panels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.result-panel {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: #F8F9FA;
}

.panel-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-actions {
    display: flex;
    gap: 8px;
}

.btn-copy,
.btn-download,
.btn-tts {
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.btn-copy:hover,
.btn-download:hover {
    background: #F0F0F0;
}

.btn-tts {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.btn-tts:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-tts:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* TTS 플레이어 영역 */
.tts-player-area {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: #F8F9FA;
}

.tts-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.btn-tts-control {
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-tts-control:hover {
    background: var(--accent-hover);
}

.btn-tts-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tts-speed-select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    min-width: 70px;
}

.tts-speed-select:focus {
    outline: none;
    border-color: var(--accent);
}

.tts-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-left: auto;
}

.tts-error {
    padding: 12px;
    background: #FFEBEE;
    border-left: 3px solid #C62828;
    border-radius: 4px;
    color: #C62828;
    font-size: 0.85rem;
    margin-top: 12px;
}


.panel-content {
    padding: 20px;
    max-height: 600px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.script-summary {
    background: #E3F2FD;
    border-left: 3px solid #1976D2;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
}

.script-summary strong {
    display: block;
    margin-bottom: 8px;
    color: #1565C0;
}

.script-summary ul {
    margin: 0;
    padding-left: 20px;
}

.script-summary li {
    margin-bottom: 4px;
    color: var(--text-primary);
}

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #323232;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .result-panels {
        grid-template-columns: 1fr;
    }
}

/* Podcast 배치 처리 스타일 */
.input-with-button {
    display: flex;
    gap: 12px;
}

.input-with-button .youtube-url-input {
    flex: 1;
}

.input-with-button .btn-primary {
    flex: 0 0 auto;
    min-width: 100px;
}

.podcast-list-section {
    margin-top: 32px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-refresh {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-refresh:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.podcast-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.podcast-item {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px var(--shadow);
    border: 1px solid var(--border);
    transition: box-shadow 0.2s;
}

.podcast-item:hover {
    box-shadow: 0 4px 12px var(--shadow-hover);
}

.podcast-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.podcast-item-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.status-icon {
    font-size: 1.2rem;
}

.status-icon.completed {
    color: #2E7D32;
}

.status-icon.processing {
    color: #1976D2;
}

.status-icon.pending {
    color: #F57C00;
}

.status-icon.failed {
    color: #D32F2F;
}

.title-text {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
    flex: 1;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.completed {
    background: #E8F5E9;
    color: #2E7D32;
}

.status-badge.processing {
    background: #E3F2FD;
    color: #1976D2;
}

.status-badge.pending {
    background: #FFF3E0;
    color: #F57C00;
}

.status-badge.failed {
    background: #FFEBEE;
    color: #D32F2F;
}

.btn-delete-small {
    background: none;
    border: none;
    color: var(--text-secondary);
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-delete-small:hover {
    background: #FFEBEE;
    color: #D32F2F;
}

/* 실패한 항목의 삭제 버튼 - 더 눈에 띄게 */
.status-failed .btn-delete-small {
    background: #FFEBEE;
    color: #D32F2F;
    border: 1px solid #FFCDD2;
}

.status-failed .btn-delete-small:hover {
    background: #D32F2F;
    color: white;
}

/* 실패한 항목의 삭제 버튼 (큰 버튼) */
.podcast-item.status-failed .btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #FFEBEE;
    color: #D32F2F;
    border: 1px solid #FFCDD2;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.podcast-item.status-failed .btn-delete:hover {
    background: #D32F2F;
    color: white;
    border-color: #D32F2F;
}

.btn-youtube-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FF0000;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-youtube-link:hover {
    background: #FFEBEE;
    transform: scale(1.1);
}

.podcast-item-summary {
    margin: 12px 0;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.podcast-item-summary strong {
    color: var(--text-primary);
}

.podcast-item-error {
    margin: 12px 0;
    padding: 12px;
    background: #FFEBEE;
    border-radius: 8px;
    color: #D32F2F;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.podcast-item-meta {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.podcast-item-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.podcast-item-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* 대본 컨테이너 */
.podcast-script-container {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }
    to {
        opacity: 1;
        max-height: 2000px;
    }
}

.podcast-script-content {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
}

.podcast-script-text {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #374151;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 대본 요약 컨테이너 */
.podcast-script-summary-container {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    animation: slideDown 0.3s ease-out;
}

.podcast-script-summary-content {
    background: #f0f9ff;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #bae6fd;
}

.script-summary-loading {
    text-align: center;
    color: #475467;
    font-size: 0.9rem;
    padding: 20px;
}

.script-summary-loading i {
    margin-right: 8px;
}

.script-summary-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #1e293b;
    white-space: pre-wrap;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .podcast-script-content {
        max-height: 300px;
        padding: 12px;
        font-size: 0.8rem;
    }
}

.btn-play, .btn-download, .btn-delete {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-play {
    background: var(--accent);
    color: white;
}

.btn-play:hover {
    background: var(--accent-hover);
}

.btn-download {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-download:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-delete {
    background: #FFEBEE;
    color: #D32F2F;
}

.btn-delete:hover {
    background: #D32F2F;
    color: white;
}

/* Knowledge-Focused Audio Player - Notion × Spotify × Transcript */
.audio-player-knowledge {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Playback Section - Primary Controls */
.audio-playback-section {
    margin-bottom: 16px;
}

.audio-controls-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* Play/Pause Button - Desktop: medium, Mobile: centered large */
.btn-play-pause-knowledge {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    border: none;
    border-radius: 50%;
    background: #668cc9;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 0;
    position: relative;
}

.btn-play-pause-knowledge i {
    position: relative;
    left: 2px; /* play 아이콘을 약간 오른쪽으로 이동 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-play-pause-knowledge:hover {
    background: #5578b8;
    transform: scale(1.05);
}

.btn-play-pause-knowledge:active {
    transform: scale(0.98);
}

.btn-play-pause-knowledge:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9ca3af;
}

/* Playing state - same color */
.audio-player-knowledge.playing .btn-play-pause-knowledge {
    background: #668cc9;
    box-shadow: 0 2px 8px rgba(102, 140, 201, 0.3);
}

.audio-player-knowledge.playing .btn-play-pause-knowledge:hover {
    background: #5578b8;
}

.audio-player-knowledge.playing .btn-play-pause-knowledge i {
    left: 0; /* pause 아이콘은 가운데 */
}

/* Progress Section - Main Information Surface */
.audio-progress-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.audio-progress-container-knowledge {
    cursor: pointer;
    padding: 8px 0;
    margin: -8px 0;
}

.audio-progress-track {
    width: 100%;
    height: 3px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    transition: height 0.2s ease;
}

.audio-progress-container-knowledge:hover .audio-progress-track {
    height: 4px;
}

.audio-progress-fill {
    height: 100%;
    background: #6b7280;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
    position: relative;
}

.audio-player-knowledge.playing .audio-progress-fill {
    background: #668cc9;
}

/* Time Display - Integrated with Progress */
.audio-time-display {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.time-current {
    color: #374151;
}

.time-separator {
    color: #9ca3af;
}

.time-total {
    color: #9ca3af;
}

/* Seek Controls - Secondary, Visually Lighter */
.audio-seek-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-seek-knowledge {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    position: relative;
    padding: 0;
}

.btn-seek-knowledge:hover {
    background: #f3f4f6;
    color: #4b5563;
}

.btn-seek-knowledge:active {
    transform: scale(0.95);
}

.btn-seek-knowledge i {
    font-size: 0.75rem;
    margin-bottom: 1px;
}

.btn-seek-knowledge .seek-label {
    font-size: 0.5rem;
    font-weight: 500;
    color: #d1d5db;
    line-height: 1;
}

.btn-seek-knowledge:hover .seek-label {
    color: #9ca3af;
}

/* Actions Section - Clearly Separated */
.audio-actions-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
}

.btn-action-knowledge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 400;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-action-knowledge:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.btn-action-knowledge:active {
    transform: scale(0.98);
}

.btn-action-knowledge i {
    font-size: 0.7rem;
}

/* Loading State */
.audio-player-knowledge.loading .btn-play-pause-knowledge {
    background: #e5e7eb;
    cursor: wait;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Finished State */
.audio-player-knowledge.finished .btn-play-pause-knowledge {
    background: #10b981;
}

.audio-player-knowledge.finished .btn-play-pause-knowledge:hover {
    background: #059669;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .audio-player-knowledge {
        padding: 16px;
    }

    .audio-controls-row {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    /* Mobile: Centered large play button - perfect circle */
    .btn-play-pause-knowledge {
        width: 64px;
        height: 64px;
        min-width: 64px;
        min-height: 64px;
        max-width: 64px;
        max-height: 64px;
        font-size: 1.4rem;
        align-self: center;
        margin-bottom: 4px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
    }

    /* Mobile: Progress section full width */
    .audio-progress-section {
        width: 100%;
    }

    /* Mobile: Seek controls may collapse or move */
    .audio-seek-controls {
        justify-content: center;
        gap: 12px;
    }

    .btn-seek-knowledge {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .btn-seek-knowledge i {
        font-size: 0.85rem;
    }

    .btn-seek-knowledge .seek-label {
        font-size: 0.55rem;
    }

    /* Mobile: Actions stack vertically */
    .audio-actions-section {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .btn-action-knowledge {
        justify-content: center;
        padding: 10px 16px;
        font-size: 0.8rem;
    }

    .btn-action-knowledge i {
        font-size: 0.8rem;
    }
}

/* Very Small Mobile */
@media (max-width: 480px) {
    .audio-player-knowledge {
        padding: 12px;
    }

    .btn-play-pause-knowledge {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        max-width: 56px;
        max-height: 56px;
        font-size: 1.2rem;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
    }

    .audio-time-display {
        font-size: 0.7rem;
    }

    .btn-seek-knowledge {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 1.1rem;
    margin: 0;
}

@media (max-width: 768px) {
    .youtube-podcast-container {
        padding: 16px;
    }

    .youtube-podcast-card {
        padding: 16px;
    }

    .options-section {
        grid-template-columns: 1fr;
    }

    .host-options-section {
        grid-template-columns: 1fr;
    }

    .button-group {
        flex-direction: column;
    }

    .input-with-button {
        flex-direction: column;
    }

    .podcast-item-header {
        flex-direction: column;
        gap: 8px;
    }

    .podcast-item-actions {
        flex-direction: column;
    }

    .podcast-item-actions button {
        width: 100%;
        justify-content: center;
    }
}

    .panel-content {
        max-height: 400px;
        font-size: 0.85rem;
    }

    .toast {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
}

    body.menu-open::after {
        z-index: 900;
    }

/* ============================================================
   Podcast Mindmap Styles
   ============================================================ */

.mindmap-container {
    max-width: 100%;
    padding: 20px;
    background: var(--bg-primary, #ffffff);
    min-height: calc(100vh - 100px);
}

.mindmap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color, #e0e0e0);
}

.mindmap-header h1 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--text-primary, #212529);
}

.mindmap-header h1 i {
    margin-right: 10px;
    color: var(--primary-color, #4dabf7);
}

.mindmap-search-section {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mindmap-search-input {
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    font-size: 14px;
    width: 250px;
    transition: border-color 0.2s;
}

.mindmap-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #4dabf7);
}

.btn-regenerate {
    padding: 8px 16px;
    background: var(--primary-color, #4dabf7);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-regenerate:hover {
    background: var(--primary-hover, #339af0);
}

.btn-regenerate:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.mindmap-loading,
.mindmap-error {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary, #666);
}

.mindmap-error {
    color: var(--error-color, #c92a2a);
}

.mindmap-error-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-retry {
    padding: 8px 16px;
    background: var(--primary-color, #4dabf7);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-retry:hover {
    background: var(--primary-hover, #339af0);
}

.mindmap-content {
    display: flex;
    gap: 20px;
    position: relative;
}

.mindmap-visualization-container {
    flex: 1;
    background: #ffffff;
    border-radius: 8px;
    overflow: auto;
    min-height: 600px;
    border: 1px solid #e8e8e8;
}

.mindmap-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mindmap-svg .link {
    fill: none;
    stroke: #b8a9c9;
    stroke-width: 1.5px;
}

.mindmap-svg .node {
    cursor: pointer;
}

.mindmap-svg .node text {
    user-select: none;
}

/* Node box styles */
.mindmap-svg .node-box {
    rx: 8px;
    ry: 8px;
    stroke-width: 1px;
}

.mindmap-svg .node-box.root {
    fill: #e8dff5;
    stroke: #c9b8e0;
}

.mindmap-svg .node-box.child {
    fill: #e3f2fd;
    stroke: #b3d4f0;
}

.mindmap-svg .node-box.selected {
    stroke: #7c4dff;
    stroke-width: 2px;
}

.mindmap-svg .node-box.matched {
    fill: #fff3e0;
    stroke: #ffb74d;
}

.mindmap-svg .node-label {
    font-size: 13px;
    fill: #37474f;
    font-weight: 500;
    dominant-baseline: middle;
    text-anchor: middle;
}

.mindmap-svg .node-label.root {
    font-weight: 600;
    fill: #4a148c;
}

.mindmap-svg .node-toggle {
    font-size: 12px;
    fill: #78909c;
    cursor: pointer;
    font-weight: 600;
}

.mindmap-svg .node-toggle:hover {
    fill: #455a64;
}

.mindmap-panel {
    width: 400px;
    background: var(--bg-primary, #ffffff);
    border-left: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    display: none;
    flex-direction: column;
    max-height: calc(100vh - 200px);
    position: sticky;
    top: 20px;
}

.mindmap-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.mindmap-panel-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary, #212529);
}

.btn-close-panel {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-secondary, #666);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

.btn-close-panel:hover {
    color: var(--text-primary, #212529);
}

.mindmap-panel-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.mindmap-panel-placeholder {
    color: var(--text-secondary, #666);
    text-align: center;
    padding: 40px 20px;
}

.mindmap-node-detail {
    color: var(--text-primary, #212529);
}

.mindmap-node-title {
    margin: 0 0 15px 0;
    font-size: 1.3rem;
    color: var(--text-primary, #212529);
    font-weight: 600;
}

.mindmap-node-summary {
    margin: 0 0 20px 0;
    line-height: 1.6;
    color: var(--text-secondary, #666);
}

.mm-path {
    font-size: 12px;
    color: #667085;
    margin: 8px 0 10px;
    line-height: 1.4;
    word-break: break-word;
}

.mm-why {
    font-size: 13px;
    color: #344054;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    padding: 10px 12px;
    border-radius: 10px;
    margin: 10px 0 12px;
    line-height: 1.5;
}

.mm-evidence-title {
    font-size: 12px;
    color: #475467;
    margin: 6px 0;
    font-weight: 600;
}

.mm-evidence-list {
    margin: 0;
    padding-left: 18px;
}

.mm-evidence-list li {
    font-size: 12px;
    color: #475467;
    line-height: 1.5;
    margin: 6px 0;
    word-break: break-word;
}

.mindmap-node-bullets,
.mindmap-node-tags,
.mindmap-node-anchors {
    margin-bottom: 20px;
}

.mindmap-node-bullets h5,
.mindmap-node-tags h5,
.mindmap-node-anchors h5 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mindmap-node-bullets ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mindmap-node-bullets li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    line-height: 1.6;
}

.mindmap-node-bullets li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color, #4dabf7);
    font-weight: bold;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--text-primary, #212529);
}

.anchor-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.anchor-item {
    padding: 12px;
    margin-bottom: 10px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.anchor-text {
    color: var(--text-primary, #212529);
    line-height: 1.5;
    font-size: 0.9rem;
}

.anchor-link {
    color: var(--primary-color, #4dabf7);
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}

.anchor-link:hover {
    color: var(--primary-hover, #339af0);
    text-decoration: underline;
}

.mindmap-node-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.btn-copy-json {
    width: 100%;
    padding: 10px;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-primary, #212529);
    font-size: 0.9rem;
    transition: background 0.2s;
}

.btn-copy-json:hover {
    background: var(--border-color, #e0e0e0);
}

/* Status banner */
.mindmap-status-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 15px;
    border-radius: 6px;
    font-size: 0.9rem;
}

.mindmap-status-banner.status-regenerating {
    background: #e3f2fd;
    color: #1976d2;
    border: 1px solid #90caf9;
}

.mindmap-status-banner.status-error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef5350;
}

.mindmap-status-banner strong {
    font-weight: 600;
}

.btn-dismiss-status {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: 10px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-dismiss-status:hover {
    opacity: 1;
}

/* Export buttons */
.mindmap-export-buttons {
    display: flex;
    gap: 8px;
}

.btn-export {
    padding: 6px 12px;
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.btn-export:hover {
    background: var(--border-color, #e0e0e0);
}

.mindmap-node-timecode {
    margin: 15px 0;
    padding: 10px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 6px;
}

.mindmap-node-timecode .anchor-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color, #4dabf7);
    text-decoration: none;
    font-weight: 500;
}

.mindmap-node-timecode .anchor-link:hover {
    text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .mindmap-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .mindmap-search-section {
        width: 100%;
    }

    .mindmap-search-input {
        flex: 1;
        width: auto;
    }

    .mindmap-content {
        flex-direction: column;
    }

    .mindmap-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-color, #e0e0e0);
        max-height: 400px;
        position: relative;
        top: 0;
    }

    .mindmap-visualization-container {
        min-height: 400px;
    }
}

/* Mindmap Node Derivation Styles */
.mindmap-node-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.85rem;
}

.breadcrumb-item {
    color: var(--text-secondary, #666);
}

.breadcrumb-item.current {
    color: var(--primary-color, #4dabf7);
    font-weight: 600;
}

.breadcrumb-separator {
    color: var(--text-secondary, #999);
    margin: 0 2px;
}

.btn-copy-path {
    margin-left: auto;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary, #666);
    transition: all 0.2s;
}

.btn-copy-path:hover {
    background: var(--primary-color, #4dabf7);
    border-color: var(--primary-color, #4dabf7);
    color: white;
}

.btn-copy-path.copied {
    background: #4caf50;
    border-color: #4caf50;
    color: white;
}

/* Derivation Section */
.mindmap-derivation-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

/* Loading Skeleton */
.derivation-loading {
    padding: 15px 0;
}

.derivation-skeleton {
    margin-bottom: 15px;
}

.skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-line.skeleton-title {
    width: 60%;
    height: 18px;
}

.skeleton-line.skeleton-text {
    width: 100%;
}

.skeleton-line.skeleton-text.short {
    width: 75%;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.loading-text {
    color: var(--text-secondary, #666);
    font-size: 0.85rem;
    margin: 0;
}

/* Derivation Content */
.derivation-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.derivation-summary,
.derivation-relation,
.derivation-evidence,
.derivation-keywords {
    padding: 0;
}

.derivation-summary h5,
.derivation-relation h5,
.derivation-evidence h5,
.derivation-keywords h5 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.derivation-summary h5 i,
.derivation-relation h5 i,
.derivation-evidence h5 i,
.derivation-keywords h5 i {
    color: var(--primary-color, #4dabf7);
}

.derivation-summary p,
.derivation-relation p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-primary, #212529);
}

/* Evidence List */
.evidence-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.evidence-item {
    padding: 12px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color, #4dabf7);
}

.evidence-quote {
    font-style: italic;
    line-height: 1.5;
    color: var(--text-primary, #212529);
    margin-bottom: 8px;
}

.evidence-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.evidence-time {
    color: var(--primary-color, #4dabf7);
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.evidence-time:hover {
    text-decoration: underline;
}

/* Confidence Badges */
.confidence-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.confidence-badge.confidence-high {
    background: #e8f5e9;
    color: #2e7d32;
}

.confidence-badge.confidence-mid {
    background: #fff3e0;
    color: #ef6c00;
}

.confidence-badge.confidence-low {
    background: #fce4ec;
    color: #c62828;
}

/* Keywords */
.keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.keyword-tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 16px;
    font-size: 0.8rem;
    color: var(--text-primary, #212529);
    transition: all 0.2s;
}

.keyword-tag:hover {
    background: var(--primary-color, #4dabf7);
    border-color: var(--primary-color, #4dabf7);
    color: white;
}

/* Error and Empty States */
.derivation-error {
    color: #c62828;
    padding: 15px;
    background: #ffebee;
    border-radius: 8px;
    margin: 0;
    font-size: 0.9rem;
}

.derivation-empty {
    color: var(--text-secondary, #666);
    padding: 15px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    margin: 0;
    font-size: 0.9rem;
    text-align: center;
}

/* Mobile responsive for derivation */
@media (max-width: 768px) {
    .mindmap-node-breadcrumb {
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    .evidence-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .keyword-list {
        gap: 6px;
    }

    .keyword-tag {
        padding: 3px 10px;
        font-size: 0.75rem;
    }
}

/* ============================================================
   News Page Styles (Daily News for US Stocks)
   ============================================================ */

.news-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    text-align: left !important;
}

/* News page specific styles - override any conflicting styles */
.news-container .news-ticker-card,
.news-container .news-item,
.news-container .news-item-title,
.news-container .news-item-meta,
.news-container .news-item-summary,
.news-container .news-ticker-header,
.news-container .news-ticker-symbol,
.news-container .news-ticker-name,
.news-container .news-item-header,
.news-container .news-item-source,
.news-container .news-item-time {
    text-align: left !important;
}

/* Force left alignment for all text elements in news items */
.news-container .news-item * {
    text-align: left !important;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
    text-align: left;
}

/* News Summary Container */
.news-summary-container {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border-left: 4px solid var(--accent);
    box-shadow: 0 2px 8px var(--shadow);
}

.news-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--accent);
}

.news-summary-header i {
    font-size: 1.1rem;
}

.news-summary-content {
    color: var(--text-primary);
    line-height: 1.8;
}

.news-summary-line {
    margin-bottom: 8px;
    padding-left: 8px;
    position: relative;
}

.news-summary-line:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.news-summary-line:last-child {
    margin-bottom: 0;
}

.news-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-header h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.news-header h1 i {
    color: var(--accent);
}

.btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-refresh:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-refresh i.fa-spin {
    animation: fa-spin 1s infinite linear;
}

.news-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 16px;
}

.news-loading .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.news-loading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.news-error-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #FFEBEE;
    border-left: 4px solid #D32F2F;
    border-radius: 8px;
    margin-bottom: 24px;
    color: #D32F2F;
    font-size: 0.9rem;
}

.news-error-banner i {
    font-size: 1.1rem;
}

.news-tickers-container {
    display: grid;
    grid-template-columns: 1fr;  /* Full width, single column */
    gap: 24px;
    margin-bottom: 24px;
}

.news-ticker-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px var(--shadow);
    transition: box-shadow 0.2s;
    text-align: left !important;
}

.news-ticker-card:hover {
    box-shadow: 0 4px 12px var(--shadow-hover);
}

.news-ticker-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
    text-align: left;
}

.news-ticker-symbol {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    text-align: left;
}

.news-ticker-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: left;
}

.news-translating-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--accent);
    margin-left: auto;
}

.news-translating-indicator i {
    font-size: 0.9rem;
}

.news-ticker-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left !important;
}

/* News page specific news-item - more specific selector */
.news-container .news-item {
    padding: 16px !important;
    background: var(--bg-primary) !important;
    border-radius: 8px;
    border-left: 3px solid var(--accent);
    transition: all 0.2s;
    text-align: left !important;
    display: block !important;
}

.news-container .news-item-content-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    text-align: left !important;
}

.news-container .news-item-image {
    flex-shrink: 0 !important;
    width: 120px !important;
    height: 120px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
}

.news-container .news-item-text-content {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
}

.news-item:hover {
    background: var(--accent-light);
    border-left-color: var(--accent-hover);
}

.news-container .news-item-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    margin-bottom: 12px;
    text-align: left !important;
    align-items: flex-start !important;
}

.news-container .news-item-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: color 0.2s;
    text-align: left !important;
    display: block !important;
    width: 100% !important;
}

.news-item-title:hover {
    color: var(--accent);
    text-decoration: underline;
}

.news-container .news-item-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: left !important;
}

.news-item-source {
    font-weight: 500;
    color: var(--accent);
    text-align: left !important;
}

.news-item-time {
    color: var(--text-secondary);
    text-align: left !important;
}

.news-container .news-item-summary {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
    width: 100% !important;
    white-space: pre-wrap !important; /* Preserve line breaks */
}

.news-item-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}

.news-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 16px;
    color: var(--text-secondary);
}

.news-empty-state i {
    font-size: 3rem;
    opacity: 0.5;
}

.news-empty-state p {
    margin: 0;
    font-size: 1rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .news-container {
        padding: 16px;
    }

    .news-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .news-header h1 {
        font-size: 1.5rem;
    }

    .news-tickers-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .news-ticker-card {
        padding: 16px;
    }

    .news-item {
        padding: 12px;
    }

    .news-container .news-item-content-wrapper {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .news-container .news-item-image {
        width: 100% !important;
        height: 200px !important;
        max-width: 100% !important;
    }
}

/* ========== Spike Page ========== */
.spike-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 16px;
}

.spike-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.spike-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary, #212529);
    display: flex;
    align-items: center;
    gap: 8px;
}

.spike-header h1 i {
    color: #f39c12;
}

.spike-header-actions {
    display: flex;
    gap: 8px;
}

.spike-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
    color: #888;
}

.spike-error-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.spike-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--accent-light, #E8F5E9);
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-secondary, #555);
}

.spike-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spike-card {
    background: var(--bg-card, #fff);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid var(--border, #e5e7eb);
    transition: box-shadow 0.2s;
}

.spike-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}

.spike-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.spike-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent, #2E7D32);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.spike-ticker-info {
    flex: 1;
    min-width: 0;
}

.spike-ticker {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #212529);
    margin-right: 6px;
}

.spike-name {
    font-size: 13px;
    color: var(--text-secondary, #888);
}

.spike-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #212529);
    white-space: nowrap;
}

.spike-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.spike-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-primary, #f8f9fa);
    border-radius: 8px;
    padding: 6px 10px;
    min-width: 70px;
    flex: 1;
}

.spike-metric-label {
    font-size: 11px;
    color: var(--text-secondary, #888);
    margin-bottom: 2px;
}

.spike-metric-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #212529);
}

.spike-metric-value.vol-ratio {
    color: #e67e22;
}

.spike-metric-value.positive {
    color: #16a34a;
}

.spike-news {
    border-top: 1px solid var(--border, #e5e7eb);
    padding-top: 10px;
    margin-top: 4px;
}

.spike-news-item {
    margin-bottom: 6px;
}

.spike-news-item a {
    font-size: 13px;
    color: var(--accent, #2E7D32);
    text-decoration: none;
    font-weight: 500;
}

.spike-news-item a:hover {
    text-decoration: underline;
}

.spike-news-time {
    font-size: 11px;
    color: #999;
    margin-left: 6px;
}

.spike-news-summary {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin: 2px 0 0 0;
    line-height: 1.4;
}

.spike-empty {
    text-align: center;
    padding: 60px 0;
    color: #999;
}

.spike-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

@media (max-width: 600px) {
    .spike-container {
        padding: 12px 8px;
    }

    .spike-card {
        padding: 12px;
    }

    .spike-metrics {
        gap: 6px;
    }

    .spike-metric {
        min-width: 60px;
        padding: 4px 6px;
    }
}

/* ===== 2026 Blue UI Theme Refresh ===== */
.theme-blue {
    --bg-primary: #f4f7fb;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #162440;
    --text-secondary: #55688c;
    --accent: #356fcc;
    --accent-light: #e5eeff;
    --accent-hover: #285cb2;
    --border: #d3e0f7;
    --shadow: rgba(21, 55, 118, 0.11);
    --shadow-hover: rgba(28, 78, 164, 0.17);
}

.theme-blue,
.theme-blue body {
    font-family: "Manrope", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}

.theme-blue {
    background:
        radial-gradient(1000px 400px at 12% -10%, rgba(73, 121, 206, 0.15), transparent 60%),
        radial-gradient(900px 380px at 88% -14%, rgba(110, 156, 232, 0.12), transparent 65%),
        linear-gradient(180deg, #f5f8ff 0%, #edf3ff 45%, #f8fbff 100%);
    min-height: 100vh;
}

.theme-blue header {
    background: #3c6fc0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 9px 22px rgba(18, 44, 92, 0.24);
}

.theme-blue .nav-container {
    padding: 0.3rem 1rem 0.5rem;
}

.theme-blue .bubble {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
}

.theme-blue .bubble:hover {
    background: rgba(255, 255, 255, 0.24);
    box-shadow: 0 8px 18px rgba(18, 45, 95, 0.26);
}

.theme-blue .bubble.active {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow: 0 9px 20px rgba(17, 44, 91, 0.24);
}

.theme-blue .nav-search input {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
}

.theme-blue .nav-search input:focus {
    background: rgba(255, 255, 255, 0.25);
}

.theme-blue #chart-container,
.theme-blue #data-container,
.theme-blue .report-container,
.theme-blue .notify-container {
    padding-top: 20px;
}

.theme-blue .chart-group,
.theme-blue .chart-wrapper,
.theme-blue .data-wrapper,
.theme-blue .report-header,
.theme-blue .chart-box,
.theme-blue .indicator-card,
.theme-blue .trend-chart-card,
.theme-blue .report-text,
.theme-blue .summary-panel .summary-body {
    border: 1px solid rgba(194, 214, 255, 0.9);
    box-shadow: 0 8px 24px rgba(26, 76, 172, 0.1);
    border-radius: 18px;
}

.theme-blue .chart-group:hover,
.theme-blue .chart-wrapper:hover,
.theme-blue .data-wrapper:hover,
.theme-blue .trend-chart-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(22, 88, 214, 0.2);
    border-color: #96beff;
}

.theme-blue .group-header,
.theme-blue .chart-wrapper .ticker-name,
.theme-blue .data-wrapper .data-name,
.theme-blue .trend-chart-label {
    background: linear-gradient(135deg, #e8f1ff 0%, #dce9ff 100%);
    color: #0d3f9e;
    border: 1px solid #c9dbff;
}

.theme-blue .chart-card {
    background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
    border-color: #d6e5ff;
    border-radius: 14px;
}

.theme-blue .chart-card:hover {
    border-color: #96beff;
    box-shadow: 0 12px 24px rgba(26, 90, 214, 0.18);
}

.theme-blue .chart-label {
    background: #ffffff;
    color: #1f4fae;
    border-color: #c8dbff;
}

.theme-blue .summary-panel .summary-header {
    background: linear-gradient(135deg, #11388b 0%, #2b63c8 65%, #3f78d8 100%);
}

.theme-blue .summary-headline,
.theme-blue .cluster-name,
.theme-blue .summary-bottomline {
    color: #0d3f9e;
}

.theme-blue .level-btn.active,
.theme-blue .period-btn.active,
.theme-blue .report-error button,
.theme-blue .notify-header-v2 .btn-refresh {
    background: linear-gradient(135deg, #356fcc 0%, #4a7fd6 100%);
    color: #fff;
}

.theme-blue .notify-header-v2 .btn-refresh:hover:not(:disabled),
.theme-blue .report-error button:hover {
    background: linear-gradient(135deg, #285cb2 0%, #356fcc 100%);
}

.theme-blue .modal-content {
    background: #f6faff;
    border: 1px solid #cde0ff;
}

.theme-blue .modal-title {
    color: #0d3f9e;
}

.theme-blue .report-body h1,
.theme-blue .report-body h2,
.theme-blue .report-body h3,
.theme-blue .report-body h4,
.theme-blue .report-text h2,
.theme-blue .report-text-header h2,
.theme-blue .report-link:hover {
    color: #1354cf;
}

.theme-blue .report-body h3 {
    background: #e8f1ff;
}

.theme-blue .action-section h2 i {
    color: #1f6bff;
}

.theme-blue .indicators-page .summary-panel,
.theme-blue .indicators-page #data-container,
.theme-blue .indicators-page .indicators-toolbar {
    max-width: 1280px;
}

.indicators-page .summary-panel,
.indicators-page #data-container,
.indicators-page .indicators-toolbar {
    max-width: 1600px;
}

.indicators-page #data-container {
    grid-template-columns: repeat(3, 1fr);
}

.theme-blue .chart-group,
.theme-blue .data-wrapper,
.theme-blue .report-text,
.theme-blue .notify-header-v2,
.theme-blue .summary-panel {
    animation: blueRiseIn 0.45s ease both;
}

@keyframes blueRiseIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .theme-blue .nav-links {
        background: #3c6fc0;
        box-shadow: 14px 0 28px rgba(8, 36, 103, 0.34);
    }

    .theme-blue .bubble {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.22);
    }
}

/* ── Trading State Section ─────────────────────────────────────────── */
.trading-state-section { margin-bottom: 24px; }

.trading-state-container .ts-loading,
.trading-state-container .ts-error {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
}

.ts-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ts-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px var(--shadow);
}

.ts-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Dots */
.ts-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ts-dot-green { background: #4CAF50; }
.ts-dot-red   { background: #EF5350; }

/* Check rows */
.ts-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
}
.ts-check-row.ts-sub { padding-left: 12px; }
.ts-check-label { flex: 1; color: var(--text-primary); }
.ts-check-val { font-family: monospace; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }

.ts-check-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
    margin-bottom: 2px;
}
.ts-check-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

/* Narrative card */
.ts-state-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ts-narrative-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 14px;
}
.ts-action-row,
.ts-entry-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-top: 1px solid var(--border);
}
.ts-action-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}
.ts-action-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}
.ts-entry-val {
    font-size: 13px;
    font-weight: 700;
}
.ts-val-true  { color: #2E7D32; }
.ts-val-false { color: #C62828; }

/* Risk card */
.ts-risk-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.ts-risk-row:last-child { border-bottom: none; }
.ts-risk-label { font-size: 13px; color: var(--text-secondary); }
.ts-risk-val { font-size: 14px; font-weight: 700; color: var(--text-primary); font-family: monospace; }
.ts-risk-stop { color: #C62828; }

/* Responsive */
@media (max-width: 900px) {
    .ts-cards { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1200px) {
    .ts-cards { grid-template-columns: 1fr 1fr; }
    .ts-risk-card { grid-column: 1 / -1; }
}

/* ── Signal Dashboard ──────────────────────────────────────────────── */
.signal-container { max-width: 1400px; margin: 0 auto; padding: 20px 16px; }

.signal-header { margin-bottom: 20px; }
.signal-header-top { display: flex; align-items: center; justify-content: space-between; }
.signal-header h1 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0; }
.signal-header h1 i { margin-right: 8px; color: var(--accent); }
.signal-description { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

.signal-refresh-btn {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 14px; cursor: pointer; color: var(--text-secondary); font-size: 14px;
    transition: all 0.2s;
}
.signal-refresh-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Stats */
.signal-stats {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.signal-stat-card {
    flex: 1; min-width: 80px; text-align: center;
    background: var(--bg-card); border-radius: 10px; padding: 12px 8px;
    box-shadow: 0 2px 8px var(--shadow); border-top: 3px solid var(--border);
}
.stat-count { font-size: 24px; font-weight: 800; }
.stat-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.stat-buy    { border-top-color: #4CAF50; }  .stat-buy .stat-count    { color: #2E7D32; }
.stat-hold   { border-top-color: #FFC107; }  .stat-hold .stat-count   { color: #F57F17; }
.stat-exit   { border-top-color: #FF9800; }  .stat-exit .stat-count   { color: #E65100; }
.stat-avoid  { border-top-color: #F44336; }  .stat-avoid .stat-count  { color: #C62828; }
.stat-wait   { border-top-color: #9C27B0; }  .stat-wait .stat-count   { color: #6A1B9A; }
.stat-error  { border-top-color: #9E9E9E; }  .stat-error .stat-count  { color: #757575; }

/* Filters */
.signal-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.signal-filter-btn {
    padding: 6px 16px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-secondary); font-size: 13px;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.signal-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.signal-filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Loading */
.signal-loading { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.signal-loading .spinner { margin: 0 auto 16px; }
.signal-loading-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.signal-error { text-align: center; padding: 40px; color: #C62828; }
.signal-error i { font-size: 32px; margin-bottom: 12px; display: block; }

/* Table */
.signal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.signal-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    background: var(--bg-card); border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 12px var(--shadow);
}
.signal-table thead th {
    background: #f1f3f5; padding: 10px 12px; text-align: left;
    font-weight: 700; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.3px; color: var(--text-secondary); white-space: nowrap;
    border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 1;
}
.signal-table tbody td {
    padding: 10px 12px; border-bottom: 1px solid #f1f3f5;
    vertical-align: middle; white-space: nowrap;
}
.sg-row { cursor: pointer; transition: background 0.15s; }
.sg-row:hover { background: #f8f9fa; }

.sg-name { font-weight: 700; font-size: 13px; display: block; color: var(--text-primary); }
.sg-symbol { font-size: 11px; color: var(--text-secondary); }

.sg-up { color: #2E7D32; font-weight: 600; }
.sg-down { color: #C62828; font-weight: 600; }

/* Action badge */
.sg-action-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
    white-space: nowrap;
}
.action-buy  { background: #E8F5E9; color: #2E7D32; }
.action-hold { background: #FFF8E1; color: #F57F17; }
.action-exit { background: #FFF3E0; color: #E65100; }
.action-avoid{ background: #FFEBEE; color: #C62828; }
.action-wait { background: #F3E5F5; color: #6A1B9A; }

/* Condition dots */
.sg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sg-dot-green { background: #4CAF50; }
.sg-dot-red   { background: #EF5350; }

.sg-trend-dots { display: inline-flex; gap: 3px; }

.sg-cond-count { font-weight: 700; font-size: 14px; }

.col-stop { font-family: monospace; font-size: 12px; color: #C62828; }
.col-bars { font-family: monospace; text-align: center; }

.sg-narrative {
    font-size: 12px; color: var(--text-secondary); white-space: normal;
    max-width: 220px; display: block; line-height: 1.4;
}

.sg-empty { text-align: center; padding: 40px; color: var(--text-secondary); font-size: 14px; }

/* Last updated */
.signal-updated {
    font-size: 12px; color: var(--text-secondary);
    display: inline-block; margin-top: 2px;
}
.refresh-label { font-size: 13px; }

/* Previous state badge */
.sg-prev-none { color: var(--text-secondary); font-size: 12px; }
.sg-prev-same { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.sg-prev-badge {
    display: inline-block; padding: 2px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 700;
}

/* State changed row highlight */
.sg-state-changed { background: #FFFDE7; }
.sg-state-changed:hover { background: #FFF9C4; }
.sg-stop-hit { background: #FFEBEE !important; }
.sg-stop-hit:hover { background: #FFCDD2 !important; }

/* Responsive */
@media (max-width: 900px) {
    .signal-stats { gap: 6px; }
    .signal-stat-card { min-width: 60px; padding: 10px 4px; }
    .stat-count { font-size: 20px; }
    .signal-table { font-size: 12px; }
    .signal-table thead th, .signal-table tbody td { padding: 8px 6px; }
    .col-narrative, .col-bars { display: none; }
    .sg-action-badge { font-size: 11px; padding: 3px 8px; }
    .refresh-label { display: none; }
}
@media (max-width: 600px) {
    .signal-container { padding: 12px 8px; }
    .signal-header h1 { font-size: 18px; }
    .col-trend, .col-stop, .col-prev { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Signal History
   ═══════════════════════════════════════════════════════════════════════ */
.signal-history-section { margin-top: 48px; }
.signal-history-header h2 {
    font-size: 20px; font-weight: 600; color: #333;
    margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.signal-history-header h2 i { color: #888; }
.sh-date-group { margin-bottom: 32px; }
.sh-date-header {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 0;
    background: #f8f9fa; border: 1px solid #e9ecef;
    border-bottom: none; border-radius: 8px 8px 0 0;
}
.sh-date-label {
    font-weight: 700; font-size: 15px; color: #333; letter-spacing: -0.3px;
}
.sh-date-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-cnt {
    font-size: 11px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; letter-spacing: 0.3px;
}
.sh-cnt-buy  { background: #E8F5E9; color: #2E7D32; }
.sh-cnt-hold { background: #FFF8E1; color: #F57F17; }
.sh-cnt-wait { background: #F3E5F5; color: #6A1B9A; }
.sh-cnt-exit { background: #FFF3E0; color: #E65100; }
.sh-cnt-stop { background: #FFEBEE; color: #C62828; }
.sh-table { border-top-left-radius: 0; border-top-right-radius: 0; }
.sh-table thead th { font-size: 12px; }
.sh-row { cursor: pointer; }
.sh-row:hover { background: #f0f7ff; }

@media (max-width: 768px) {
    .sh-table .col-narrative, .sh-table .col-prev { display: none; }
    .sh-date-label { font-size: 13px; }
}
@media (max-width: 600px) {
    .sh-table .col-stop { display: none; }
    .signal-history-section { margin-top: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Nav Settings Icon
   ═══════════════════════════════════════════════════════════════════════ */
.nav-settings-icon {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    text-decoration: none;
    padding: 4px;
    transition: color 0.2s;
}
.nav-settings-icon:hover { color: #fff; }
/* mobile: nav-header icon visible, desktop one hidden inside nav-links sidebar */
.nav-header .nav-settings-icon { display: none; }
.desktop-settings { margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   Ticker Manage Page
   ═══════════════════════════════════════════════════════════════════════ */
.tm-container { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
.tm-header { margin-bottom: 20px; }
.tm-header h1 { font-size: 22px; color: #1a1a2e; margin: 0 0 6px; }
.tm-desc { color: #666; font-size: 13px; margin: 0; }
.tm-count { color: #888; font-size: 13px; margin-bottom: 8px; }

.tm-add-form {
    display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
}
.tm-input {
    padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px;
    font-size: 14px; outline: none; flex: 1; min-width: 120px;
}
.tm-input:focus { border-color: #4a90d9; }
.tm-btn {
    padding: 8px 16px; border: none; border-radius: 6px; font-size: 13px;
    cursor: pointer; font-weight: 600; white-space: nowrap;
}
.tm-btn-add { background: #4a90d9; color: #fff; }
.tm-btn-add:hover { background: #357abd; }
.tm-btn-reset { background: #f5f5f5; color: #666; border: 1px solid #ddd; }
.tm-btn-reset:hover { background: #eee; }

.tm-table-wrap { overflow-x: auto; }
.tm-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.tm-table thead th {
    background: #f8f9fa; padding: 10px 12px; text-align: left;
    font-weight: 600; color: #555; border-bottom: 2px solid #e0e0e0; font-size: 12px;
}
.tm-table tbody td {
    padding: 10px 12px; border-bottom: 1px solid #f0f0f0;
}
.tm-table tbody tr:hover { background: #f8f9ff; }
.tm-col-no { width: 40px; color: #999; text-align: center; }
.tm-col-symbol a { color: #4a90d9; text-decoration: none; font-weight: 600; }
.tm-col-symbol a:hover { text-decoration: underline; }
.tm-col-action { width: 50px; text-align: center; }
.tm-btn-del {
    background: none; border: none; color: #ccc; cursor: pointer;
    font-size: 14px; padding: 4px 8px; border-radius: 4px;
}
.tm-btn-del:hover { color: #e53935; background: #FFEBEE; }
.tm-empty { text-align: center; color: #999; padding: 40px !important; }

/* ── Tabs ── */
.tm-tabs {
    display: flex; gap: 0; margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}
.tm-tab {
    padding: 10px 24px; border: none; background: none; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #888;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all 0.2s;
}
.tm-tab:hover { color: #555; }
.tm-tab.active { color: #4a90d9; border-bottom-color: #4a90d9; }

.tm-input-sm { max-width: 140px; }

/* ── Youtuber status toggle ── */
.tm-btn-status {
    padding: 4px 12px; border: none; border-radius: 12px;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.tm-status-active { background: #E8F5E9; color: #2E7D32; }
.tm-status-active:hover { background: #C8E6C9; }
.tm-status-inactive { background: #FFEBEE; color: #C62828; }
.tm-status-inactive:hover { background: #FFCDD2; }

@media (max-width: 600px) {
    .tm-container { padding: 16px 8px; }
    .tm-add-form { flex-direction: column; }
    .tm-input { width: 100%; }
    .tm-input-sm { max-width: 100%; }
    .tm-tab { padding: 8px 16px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   YouTube Recommendation Page (유튜브 추천)
   ═══════════════════════════════════════════════════════════════════════ */
.rc-container { max-width: 1000px; margin: 0 auto; padding: 24px 16px; }
.rc-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.rc-header h1 { font-size: 22px; color: #1a1a2e; margin: 0 0 4px; }
.rc-desc { color: #888; font-size: 13px; margin: 0; }
.rc-header-actions { display: flex; align-items: center; gap: 12px; }
.rc-updated { font-size: 12px; color: #999; }

.rc-btn {
    padding: 8px 18px; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
}
.rc-btn-run { background: #e53935; color: #fff; }
.rc-btn-run:hover { background: #c62828; }
.rc-btn-run:disabled { background: #ccc; cursor: not-allowed; }

.rc-loading {
    text-align: center; padding: 60px 20px; color: #999;
}
.rc-loading .spinner {
    width: 36px; height: 36px; border: 3px solid #eee;
    border-top-color: #e53935; border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.rc-empty {
    text-align: center; padding: 60px 20px; color: #999;
}
.rc-empty-sub { font-size: 13px; color: #bbb; margin-top: 4px; }

.rc-table-wrap { overflow-x: auto; }
.rc-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.rc-table thead th {
    background: #f8f9fa; padding: 10px 12px; text-align: left;
    font-weight: 600; color: #555; border-bottom: 2px solid #e0e0e0;
    font-size: 12px; white-space: nowrap;
}
.rc-table tbody td {
    padding: 12px; border-bottom: 1px solid #f0f0f0;
}
.rc-table tbody tr:hover { background: #FFF8F8; }
.rc-table tbody tr { transition: background 0.15s; }

.rc-name { font-weight: 600; color: #1a1a2e; display: block; }
.rc-symbol { font-size: 12px; color: #888; }

.rc-badge {
    display: inline-block; padding: 3px 10px; border-radius: 10px;
    font-size: 12px; font-weight: 700;
}
.rc-badge-ch { background: #E8F5E9; color: #2E7D32; }

.rc-score {
    font-weight: 700; color: #e53935; font-size: 15px;
}

.rc-channels {
    font-size: 12px; color: #888; max-width: 250px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .rc-container { padding: 16px 8px; }
    .rc-header { flex-direction: column; }
    .rc-channels { max-width: 120px; }
    .rc-table { font-size: 13px; }
}