/* 전체 진행 통계 상세 모달 (2026-07-29)
 *
 * 시트별 세 기준(번역 열 / 세그먼트 / 검토 이상)을 나란히 비교한다.
 *
 * 디자인 의도
 * ----------
 * ① 위계 — 요약(파일 합계)이 1차, 시트별이 2차. 요약을 카드로 띄우고 시트 표는
 *    평평하게 둬서 눈이 먼저 요약에 닿게 한다.
 * ② 노이즈 — 실측상 9시트 중 7개가 0%다. 그 행은 `.is-empty` 로 낮추고 막대를 감춰
 *    값이 있는 시트가 스캔 한 번에 보이게 한다(지우지는 않는다 — 존재는 알아야 함).
 * ③ 막대 — 5px→7px + 기준별 색 분리. 0.1% 같은 극소값도 min-width 로 보이게 한다.
 * ④ 대비 — 시트명은 굵게(text-primary), 세그먼트 수는 작게(text-secondary).
 */

.ws-stats {
    min-width: 560px;
    color: var(--text-primary);
}

/* ── ① 요약 카드 — 시각적 1차 정보 ───────────────────────── */

.ws-stats-summary {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.ws-stats-total {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.ws-stats-total .unit {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

.ws-stats-basis {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.ws-stats-basis code {
    font-size: 0.72rem;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 5px;
    border-radius: 4px;
}

/* 미저장 편집 포함 표시 — DB 값과 다른 이유를 밝힌다 */
.ws-stats-pending {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--warning-color, #997404);
    background: rgba(255, 193, 7, 0.15);
}

/* 기준 3종 — 카드 안에서 나란히 */
.ws-stats-bases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.ws-stats-basis-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* 적용 중인 기준만 테두리로 강조 — 배지 + 테두리 이중 신호 */
.ws-stats-basis-card.is-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.ws-stats-basis-name {
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ws-stats-basis-count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.ws-stats-basis-pct {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.3rem;
}
.ws-stats-basis-hint {
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin-top: 3px;
    min-height: 1.9em;   /* 3칸 높이 정렬 — 힌트 길이가 달라도 카드가 어긋나지 않게 */
}

.ws-stats-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--text-light);
    letter-spacing: 0.02em;
}

/* ── ② 시트별 표 — 2차 정보 ──────────────────────────────── */

.ws-stats-subhead {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-sm);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.ws-stats-subhead .count {
    font-weight: 400;
    font-size: 0.75rem;
}

.ws-stats-scroll {
    max-height: 44vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    contain: paint;   /* 시트가 많을 때 스크롤 페인트 범위 제한 */
}

.ws-stats-table {
    margin: 0;
    font-size: 0.85rem;
}
.ws-stats-table thead th {
    position: sticky;   /* 시트가 많아도 헤더 유지 */
    top: 0;
    z-index: 1;
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 12px;
    white-space: nowrap;
}
.ws-stats-table tbody td {
    padding: 9px 12px;
    vertical-align: middle;
    border-top: 1px solid rgba(222, 226, 230, 0.6);
}
.ws-stats-table tbody tr:first-child td { border-top: 0; }

/* ④ 시트명 vs 세그먼트 수 대비 */
.ws-stats-sheet {
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.ws-stats-sheet .segs {
    display: block;
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

.ws-stats-cell { text-align: right; white-space: nowrap; }
.ws-stats-num {
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;   /* 자릿수가 흔들리지 않게 */
}
.ws-stats-num .pct {
    font-weight: 400;
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

/* ② 값이 0 인 시트 — 낮추되 지우지는 않는다 */
.ws-stats-table tbody tr.is-empty { background: rgba(0, 0, 0, 0.012); }
.ws-stats-table tbody tr.is-empty .ws-stats-sheet,
.ws-stats-table tbody tr.is-empty .ws-stats-num { color: var(--text-secondary); font-weight: 500; }
.ws-stats-table tbody tr.is-empty .ws-stats-bar { visibility: hidden; }

/* ── ③ 진행 막대 ─────────────────────────────────────────── */

.ws-stats-bar {
    height: 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.07);
    overflow: hidden;
    margin-top: 5px;
}
.ws-stats-bar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    min-width: 2px;   /* 0.1% 같은 극소값도 보이게 */
    transition: width 0.25s ease;
}
/* 값이 정확히 0 이면 min-width 로 인한 가짜 막대를 없앤다 */
.ws-stats-bar > span[data-zero="1"] { min-width: 0; }

.ws-b-target   { background: var(--primary-color); }
.ws-b-segment  { background: var(--success-color); }
.ws-b-reviewed { background: var(--info-color); }

/* 요약 카드 안 막대는 더 두껍게 — 1차 정보 */
.ws-stats-basis-card .ws-stats-bar { height: 9px; margin-top: 8px; }

/* 범례 점 — 시트별 표 헤더에서 색↔기준 연결 */
.ws-stats-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}

/* ── 접근성 · 반응형 ─────────────────────────────────────── */

.ws-stats-scroll:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ws-stats-bar > span,
    .ws-stats-basis-card { transition: none; }
}

@media (max-width: 576px) {
    .ws-stats { min-width: 0; }
    .ws-stats-bases { grid-template-columns: 1fr; }
    .ws-stats-basis-hint { min-height: 0; }
    .ws-stats-basis-count { font-size: 1.25rem; }
    .ws-stats-table { font-size: 0.8rem; }
    .ws-stats-table thead th,
    .ws-stats-table tbody td { padding: 7px 8px; }
    .ws-stats-scroll { max-height: 40vh; }
}