/* =============================================================================
   mubinso-trend.css - 첫 화면 「무빈소 장례 이용 동향」 공용 부품(views/partials/mubinso-trend.php) 전용
   @version   1.0.0
   @updated   2026-10-23
   @shared    복제사이트 공용 파일 - 여기서 고치면 다른 사이트에도 이식해야 한다
   @changelog
     1.0.0 (2026-10-23) 신설. 테마 색 변수(--color-*)만 쓴다 - 흰색·검정을 고정으로 쓰지 않아
                        다크 테마(e·i, 2호)에서도 글자와 배경이 함께 바뀐다. 모든 규칙은 .mubinso-stat 아래로만.
   ============================================================================= */
.mubinso-stat,
.mubinso-stat *,
.mubinso-stat *::before,
.mubinso-stat *::after { box-sizing: border-box; }

.mubinso-stat {
    padding: 64px 0;
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.mubinso-stat__wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }

.mubinso-stat__head { margin: 0 0 28px; text-align: center; }
.mubinso-stat__head h2 { margin: 0 0 10px; color: var(--color-text); font-size: 28px; line-height: 1.38; letter-spacing: -.02em; }
.mubinso-stat__head p { margin: 0; color: var(--color-text-light); font-size: 16px; line-height: 1.7; word-break: keep-all; }

.mubinso-stat__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 0 32px; }
.mubinso-stat__fact {
    display: flex;
    flex: 0 1 260px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 18px 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-primary-soft, var(--color-surface-soft));
    text-align: center;
}
.mubinso-stat__fact strong { color: var(--color-primary); font-size: 30px; font-weight: 800; line-height: 1.2; }
.mubinso-stat__fact span { color: var(--color-text-light); font-size: 14px; line-height: 1.5; word-break: keep-all; }

.mubinso-stat__chart { display: flex; justify-content: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.mubinso-stat__chart li { display: flex; flex: 0 1 88px; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.mubinso-stat__pct { color: var(--color-primary); font-size: 16px; font-weight: 800; }
.mubinso-stat__bar {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 56px;
    height: 140px;
    border-radius: 10px 10px 0 0;
    background: var(--color-surface-soft);
    overflow: hidden;
}
.mubinso-stat__bar i { display: block; width: 100%; background: var(--color-primary); }
.mubinso-stat__month { color: var(--color-text); font-size: 15px; font-weight: 700; }
.mubinso-stat__count,
.mubinso-stat__note { color: var(--color-text-light); font-size: 13px; }
.mubinso-stat__note { margin: 22px 0 0; line-height: 1.6; text-align: center; word-break: keep-all; }

@media (max-width: 640px) {
    .mubinso-stat { padding: 48px 0; }
    .mubinso-stat__head h2 { font-size: 23px; }
    .mubinso-stat__head p { font-size: 15px; }
    .mubinso-stat__fact { flex-basis: 100%; }
    .mubinso-stat__fact strong { font-size: 26px; }
    .mubinso-stat__chart { gap: 8px; }
    .mubinso-stat__bar { height: 110px; }
}