:root {
    --sk-bg: #0f172a;
    --sk-card: #1e293b;
    /* [2026-08-24] 인디고 하드코딩(리브랜딩 이전 잔재) → 공용 브랜드 토큰 참조 */
    --sk-primary: var(--brand-accent);
    --sk-text: #e2e8f0;
    --sk-bright: #f8fafc;
    --sk-border: #334155;
}
/* [V15-THEME-LIGHT, 2026-08-01] Phase 2 — 전달.md "청사진 ... 모두 라이트 테마
   적용안돼" 지적. analysis_view.html과 동일 패턴(--sk-primary만 라이트 블루로). */
[data-theme="light"] {
    --sk-bg: #eef2f7;
    --sk-card: #ffffff;
    --sk-primary: var(--brand-accent-deep);
    --sk-text: #334155;
    --sk-bright: #0f172a;
    --sk-border: #e2e8f0;
}
body { background-color: var(--sk-bg); color: #ffffff !important; font-family: var(--font-sans); line-height: 1.8; }
[data-theme="light"] body { color: #0f172a !important; }
.sa-text-light {
    --bs-text-opacity: 1;
    color: var(--sk-bright) !important;
}
.sa-container { 
    max-width: 900px; 
    padding: 40px 20px; 
    margin: 0 auto; /* 중앙 정렬 강제 적용 */
}
.sa-report-card { background: var(--sk-card); border: 1px solid var(--sk-border); border-radius: 16px; padding: 40px; margin-bottom: 30px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
h1 { color: var(--sk-bright); font-weight: 800; font-size: 2.25rem; margin-bottom: 10px; }
h2 { color: var(--sk-bright); font-size: 1.5rem; border-left: 4px solid var(--sk-primary); padding-left: 15px; margin: 40px 0 20px; }
h3 { color: var(--sk-bright); font-size: 1.2rem; margin-top: 30px; }
.sa-badge-tier { font-size: 1rem; padding: 8px 16px; border-radius: 8px; font-weight: 700; }
.sa-bg-s-class { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; }
.sa-bg-mid { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.4); }
.sa-bg-row { background: rgba(51, 65, 85, 0.4); color: #64748b; border: 1px solid rgba(100, 116, 139, 0.3); }
.sa-meta-info { font-size: 0.9rem; color: var(--sk-bright); margin-bottom: 30px; }
.sa-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 30px 0; }
.sa-stat-item { background: rgba(255,255,255,0.03); padding: 20px; border-radius: 12px; text-align: center; }
.sa-stat-label { font-size: 0.8rem; text-transform: uppercase; color: #94a3b8; display: block; }
.sa-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--sk-bright); }
.sa-analysis-text { color: #f8fafc !important; font-weight: 500 !important;  white-space: pre-wrap; font-size: 1.05rem; word-break: break-word; overflow-wrap: break-word; }
.sa-tool-box { background: rgba(99, 102, 241, 0.05); border: 1px dashed var(--sk-primary); padding: 25px; border-radius: 12px; margin-top: 50px; }
footer { text-align: center; margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--sk-border); color: #94a3b8; font-size: 0.8rem; }
.text-ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
@media (max-width: 768px) { .sa-report-card { padding: 20px; } h1 { font-size: 1.75rem; } }

/* [2026-07-20] 티커 청사진(sa-blueprint) */
.bp-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0.5rem; padding-bottom: 2px; scrollbar-width: none; }
.bp-tabs::-webkit-scrollbar { display: none; }
/* [2026-08-01, 전달.md "사용법처럼 하단 이동바 적용해"] guide.html의 .guide-tabbar-track/
   thumb 패턴 그대로 이식 — 탭이 넘칠 때만(JS 판단) 스크롤 위치를 보여주는 얇은 바. */
.bp-tabs-track {
    display: none; position: relative; width: 135px; height: 3px; margin: 0 auto 1rem;
    background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; cursor: pointer;
}
.bp-tabs-track::before { content: ''; position: absolute; top: -10px; bottom: -10px; left: 0; right: 0; }
.bp-tabs-track.visible { display: block; }
.bp-tabs-thumb { position: absolute; top: 0; height: 100%; background: var(--sk-primary); border-radius: 99px; }
.bp-tab-btn {
    background: rgba(255,255,255,0.04); border: 1px solid var(--sk-border); color: #94a3b8;
    padding: 8px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;
    white-space: nowrap; cursor: pointer; transition: all 0.15s;
    -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.bp-tab-btn:focus { outline: none; }
/* [2026-08-01, 사람 지적 "마우스아웃 이벤트일 수도 있어"] 터치 기기엔 mouseout이 없어
   탭 후 :hover가 그대로 "붙박이"로 남는다 — hover:hover(실제 마우스 장치)로 스코프해
   터치에서는 애초에 hover 상태 자체가 안 걸리도록(이벤트 자체를 줄이는 방향). */
@media (hover: hover) and (pointer: fine) {
    .bp-tab-btn:hover:not(.disabled) { background: rgba(255,255,255,0.08); color: #f8fafc; }
}
.bp-tab-btn.active { background: var(--sk-primary); border-color: var(--sk-primary); color: #fff; }
.bp-tab-btn.disabled { opacity: 0.35; cursor: not-allowed; }
.bp-content { min-height: 60px; }
.bp-empty { color: #64748b; font-size: 0.9rem; text-align: center; padding: 2rem 1rem; }
.bp-card {
    display: block; background: rgba(255,255,255,0.03); border: 1px solid var(--sk-border);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; text-decoration: none; color: inherit;
}
a.bp-card:hover { border-color: var(--sk-primary); }
.bp-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.75rem; }
.bp-date { color: #64748b; }
.bp-badge { padding: 2px 9px; border-radius: 6px; font-weight: 700; font-size: 0.7rem; }
.bp-tier-sclass { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; }
.bp-tier-mid { background: rgba(148,163,184,0.15); color: #94a3b8; }
.bp-tier-row { background: rgba(51,65,85,0.4); color: #64748b; }
.bp-status-success { background: rgba(16,185,129,0.15); color: #10b981; }
.bp-status-failed { background: rgba(239,68,68,0.15); color: #ef4444; }
.bp-status-pending { background: rgba(148,163,184,0.15); color: #94a3b8; }
.bp-risk-badge { background: rgba(239,68,68,0.15); color: #f87171; }
.bp-title { color: #f8fafc; font-size: 0.92rem; font-weight: 600; }
.bp-row { color: #cbd5e1; font-size: 0.88rem; margin-bottom: 4px; }
.bp-feedback { color: #94a3b8; font-size: 0.83rem; line-height: 1.6; margin-top: 6px; white-space: pre-wrap; }
.bp-orig-link { color: var(--sk-primary); font-size: 0.78rem; }
.bp-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 1rem; }
.bp-page-btn {
    background: rgba(255,255,255,0.04); border: 1px solid var(--sk-border); color: #cbd5e1;
    padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 0.82rem;
}
.bp-page-btn:hover { background: rgba(255,255,255,0.08); }
.bp-page-info { color: #64748b; font-size: 0.82rem; }

/* [V15-THEME-LIGHT] bp-* 청사진 탭 컴포넌트 — 티어/상태 배지(bp-tier-*, bp-status-*,
   bp-risk-badge)는 카테고리·신호색이라 유지. 나머지 하드코딩만 라이트로. */
[data-theme="light"] .bp-tab-btn:not(.active) { background: rgba(15, 23, 42, 0.04); color: #64748b; }
[data-theme="light"] .bp-tabs-track { background: rgba(15, 23, 42, 0.08); }
@media (hover: hover) and (pointer: fine) {
    [data-theme="light"] .bp-tab-btn:hover:not(.disabled) { background: rgba(15, 23, 42, 0.08); color: #0f172a; }
}
[data-theme="light"] .bp-empty { color: #94a3b8; }
[data-theme="light"] .bp-card { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] a.bp-card:hover { border-color: var(--sk-primary); }
[data-theme="light"] .bp-date { color: #94a3b8; }
[data-theme="light"] .bp-title { color: #0f172a; }
[data-theme="light"] .bp-row { color: #334155; }
[data-theme="light"] .bp-feedback { color: #64748b; }
[data-theme="light"] .bp-page-btn { background: rgba(15, 23, 42, 0.04); color: #334155; }
[data-theme="light"] .bp-page-btn:hover { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .bp-page-info { color: #94a3b8; }

/* Bootstrap 유틸리티(!important) — analysis_view.html과 동일 사유/우선순위 */
[data-theme="light"] .text-white { color: #0f172a !important; }
[data-theme="light"] .text-light { color: #334155 !important; }
[data-theme="light"] .text-info { color: #92400e !important; }
[data-theme="light"] .text-primary { color: #b45309 !important; }
[data-theme="light"] .text-warning { color: #b45309 !important; }
[data-theme="light"] .bg-secondary { background-color: #e2e8f0 !important; color: #334155 !important; }
/* [2026-08-17] 전달.md "파란색이 아직도 있는데 토큰 안된거지?" — "관련 테마 리포트"
   태그(#{{ dict_theme }})가 인디고 Tailwind 유틸리티라 라이트 대응이 없었음 */
[data-theme="light"] .text-indigo-400 { color: #b45309 !important; }
/* [V15-THEME-LIGHT] "관련 테마 리포트" 표가 Bootstrap .table-dark(자체 CSS 변수)를
   써서 라이트에서도 검게 남아있음 — analysis_view.html과 동일 수정 */
[data-theme="light"] .table-dark {
    --bs-table-color: #0f172a;
    --bs-table-bg: #ffffff;
    --bs-table-border-color: #e2e8f0;
    --bs-table-striped-bg: #f8fafc;
    --bs-table-striped-color: #0f172a;
    --bs-table-active-bg: #f1f5f9;
    --bs-table-active-color: #0f172a;
    --bs-table-hover-bg: #f8fafc;
    --bs-table-hover-color: #0f172a;
    color: #0f172a;
}