/* =====================================================================
   BMT VIZ SYSTEM v1.0 (Universal Chart Layer)
   Use: Simple visual aids for standard articles
   Scope: .bmtviz-* classes only
   ===================================================================== */

/* 1. Viz Scope & Variables */
.bmtviz-scope {
    /* Semantic Colors (Fallback to standard blues if vars not found) */
    --viz-primary: var(--bmt-accent, #2563eb);
    --viz-success: var(--bmt-success, #16a34a);
    --viz-risk:    var(--bmt-danger, #dc2626);
    --viz-neutral: #94a3b8;
    --viz-bg:      #f1f5f9;
    --viz-text:    #1e293b;
    
    /* Layout Basics */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--viz-text);
    box-sizing: border-box;
    margin: 30px 0;
    width: 100%;
    max-width: 100%;
}
.bmtviz-scope * { box-sizing: border-box; }

/* =====================================================================
   [최종 수정] TYPE A: Comparison Bars (Simple & Multi)
   개선사항: 긴 텍스트 대응(280px), 바/텍스트 간격 확대, 모바일 스택 처리
   ===================================================================== */
.bmtviz-bar-container {
    display: flex; 
    flex-direction: column; 
    gap: 24px; /* [수정] 행(Row) 사이의 수직 간격을 넓힘 (12px -> 24px) */
}

.bmtviz-bar-group {
    display: grid; 
    /* [수정 핵심] 
       왼쪽 라벨: 110px (약간 줄여서 바 공간 확보)
       가운데 바: 1fr (남는 공간 자동 채움)
       오른쪽 텍스트: 280px (긴 설명도 넉넉하게 들어가도록 대폭 확장)
    */
    grid-template-columns: 110px 1fr 280px; 
    align-items: center; 
    gap: 20px; /* [수정] 라벨-바-텍스트 사이의 가로 간격을 넓힘 */
}

/* 왼쪽 라벨 */
.bmtviz-label {
    font-size: 13px; font-weight: 600; color: var(--viz-text);
    text-align: right; line-height: 1.3;
    word-break: keep-all;
}

/* 게이지 바 트랙 */
.bmtviz-track {
    height: 12px; background: var(--viz-bg);
    border-radius: 4px; overflow: hidden; width: 100%;
}

/* 게이지 바 채움 */
.bmtviz-fill {
    height: 100%;
    width: calc(var(--v) * 1%);
    background-color: var(--c, var(--viz-neutral));
    border-radius: 4px;
    min-width: 4px;
    transition: width 1s ease-out;
}

/* 오른쪽 값/설명 텍스트 */
.bmtviz-value {
    font-size: 13px; /* 가독성을 위해 1px 키움 */
    font-weight: 500; /* 너무 굵지 않게 조정 */
    color: var(--text-sub); /* 약간 부드러운 컬러 (본문용) */
    text-align: left;
    line-height: 1.4; /* 줄간격 확보 */
    /* white-space: nowrap; <- 긴 문장이므로 줄바꿈 허용을 위해 삭제 */
}

/* Status Variations */
.bmtviz-fill.is-win { background-color: var(--viz-success); }
.bmtviz-fill.is-risk { background-color: var(--viz-risk); }
.bmtviz-fill.is-core { background-color: var(--viz-primary); }

/* 모바일 대응 (화면 폭 700px 이하) */
@media (max-width: 700px) {
    .bmtviz-bar-group {
        /* 모바일에서는 가로 공간이 부족하므로 
           [라벨]
           [바]
           [설명] 
           형태로 세로로 쌓이게 변경 */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-bottom: 16px;
        border-bottom: 1px dashed #e2e8f0; /* 모바일에서 구분선 추가 */
    }
    
    .bmtviz-label { text-align: left; font-size: 12px; color: #64748b; }
    .bmtviz-track { height: 16px; } /* 터치 환경 고려해 바를 조금 두껍게 */
    .bmtviz-value { font-size: 13px; color: var(--viz-text); }
}

/* =====================================================================
   TYPE B: Bullet Chart (Limit/Target)
   Usage: <div class="bmtviz-bullet" style="--val:80; --limit:60;">
   ===================================================================== */
.bmtviz-bullet-wrap {
    margin: 20px 0;
}
.bmtviz-meta {
    display: flex; justify-content: space-between; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: #64748b;
}
.bmtviz-bullet-track {
    position: relative; height: 16px; background: var(--viz-bg);
    border-radius: 2px; width: 100%;
}
.bmtviz-bullet-measure {
    position: absolute; left: 0; top: 4px; bottom: 4px;
    background: var(--viz-primary);
    width: calc(var(--val) * 1%);
    border-radius: 2px;
    z-index: 2;
}
/* The Limit Marker (Vertical Line) */
.bmtviz-bullet-track::after {
    content: ""; position: absolute;
    left: calc(var(--limit) * 1%);
    top: -4px; bottom: -4px;
    width: 2px; background: var(--viz-risk);
    z-index: 3;
}

/* =====================================================================
   TYPE C: Donut Ring (Status)
   Usage: <div class="bmtviz-ring" style="--p:75; --c:var(--viz-success)">
   ===================================================================== */
.bmtviz-ring-wrap {
    display: flex; align-items: center; gap: 20px;
    padding: 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
}
.bmtviz-ring {
    position: relative; width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(var(--c, var(--viz-primary)) calc(var(--p)*1%), var(--viz-bg) 0);
    display: grid; place-items: center;
}
/* 가운데 흰색 구멍 + 텍스트 */
.bmtviz-ring::after {
    content: attr(data-label);
    position: absolute; width: 48px; height: 48px;
    background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: var(--viz-text);
}
.bmtviz-ring-content { flex-grow: 1; }
.bmtviz-title { display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px; color: var(--viz-text); }
.bmtviz-desc { display: block; font-size: 13px; color: #64748b; line-height: 1.4; }

/* =====================================================================
   TYPE D: Stack Bar (Composition)
   Usage: <div class="bmtviz-stack">
   ===================================================================== */
.bmtviz-stack {
    display: flex; height: 24px; width: 100%;
    border-radius: 4px; overflow: hidden; margin-top: 8px;
}
.bmtviz-seg {
    height: 100%; display: flex; align-items: center; justify-content: center;
    width: calc(var(--w) * 1%);
    background: var(--c);
    color: #fff; font-size: 11px; font-weight: 700;
}
.bmtviz-legend {
    display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap;
}
.bmtviz-legend-item { display: flex; align-items: center; font-size: 12px; color: #64748b; }
.bmtviz-dot { width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; background: var(--c); }

/* =====================================================================
   TYPE E: Decision Matrix (Grid)
   ===================================================================== */
.bmtviz-matrix {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;
    background: #fff;
}
.bmtviz-col { padding: 20px; }
.bmtviz-col.is-pros { background: #f0fdf4; border-right: 1px solid #e2e8f0; }
.bmtviz-col.is-cons { background: #fef2f2; }
.bmtviz-head { 
    display: block; font-weight: 800; text-transform: uppercase; 
    font-size: 12px; margin-bottom: 12px; letter-spacing: 1px; 
}
.bmtviz-list { list-style: none; padding: 0; margin: 0; font-size: 14px; color: #334155; }
.bmtviz-list li { margin-bottom: 8px; position: relative; padding-left: 18px; }
.bmtviz-list li::before { 
    content: "•"; position: absolute; left: 0; font-weight: bold; color: #94a3b8;
}
.is-pros .bmtviz-head { color: var(--viz-success); }
.is-cons .bmtviz-head { color: var(--viz-risk); }

/* Mobile Optimization */
@media (max-width: 480px) {
    .bmtviz-bar-group { grid-template-columns: 90px 1fr 45px; gap: 8px; }
    .bmtviz-label { text-align: left; }
    .bmtviz-matrix { grid-template-columns: 1fr; }
    .bmtviz-col.is-pros { border-right: none; border-bottom: 1px solid #e2e8f0; }
}
/* =====================================================================
   [수정] TYPE F: Vertical Column Chart (Slim Version)
   Usage: <div class="bmtviz-column-wrap">...</div>
   ===================================================================== */
.bmtviz-column-wrap {
    display: flex;
    align-items: flex-end;
    gap: 30px; /* 막대 간격 넓힘 (12px -> 30px) */
    height: 220px; /* 차트 전체 높이 */
    padding-top: 30px; /* 상단 수치 표시 공간 */
    padding-bottom: 10px;
    margin: 30px auto; /* 중앙 정렬 */
    border-bottom: 1px solid #e2e8f0;
    max-width: 600px; /* 전체 차트 폭 제한 (너무 퍼지지 않게) */
}

.bmtviz-col-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center; /* 막대를 중앙에 배치 */
    height: 100%;
    position: relative;
    text-align: center;
}

/* 막대 기둥 (날씬하게 수정) */
.bmtviz-col-bar {
    width: 60px; /* 너비 고정 (100% -> 60px) */
    height: calc(var(--h) * 1%); /* 높이 변수 */
    background-color: var(--c, var(--viz-neutral));
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 4px;
    transition: height 1s ease-out;
}

/* 막대 위 숫자 (Value) */
.bmtviz-col-bar::before {
    content: attr(data-val);
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 700;
    color: var(--viz-text);
    white-space: nowrap; /* 줄바꿈 방지 */
}

/* 막대 아래 라벨 (Label) */
.bmtviz-col-label {
    position: absolute;
    bottom: -30px;
    left: 0; right: 0;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    line-height: 1.2;
}

/* 모바일 대응 */
@media (max-width: 480px) {
    .bmtviz-column-wrap { gap: 15px; } /* 모바일에서는 간격 조금 좁힘 */
    .bmtviz-col-bar { width: 40px; } /* 모바일에서는 막대 더 얇게 */
    .bmtviz-col-label { font-size: 11px; }
}