/* ============================================================
   base.css — 기본 리셋 · 폰트 렌더링 · 타이포 유틸 · 로딩
   ============================================================ */
[x-cloak]{display:none!important}

body{
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 1;
  letter-spacing:var(--ls-body);
  line-height:var(--lh-body);
}

/* ── 역할별 타이포 유틸(.t-*) ── */
.t-kpi{font-size:var(--fs-kpi);font-weight:var(--fw-bold);line-height:var(--lh-kpi);letter-spacing:var(--ls-title);font-variant-numeric:tabular-nums}
.t-h1{font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-title);letter-spacing:var(--ls-title);color:var(--c-900)}
.t-h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-title);letter-spacing:var(--ls-title);color:var(--c-900)}
.t-h3,.cv-h{font-size:var(--fs-h3);font-weight:var(--fw-semi);line-height:1.4;letter-spacing:var(--ls-title);color:var(--c-900)}
.t-body-sm{font-size:var(--fs-body-sm);line-height:1.55}
.t-caption{font-size:var(--fs-caption);line-height:1.45;letter-spacing:var(--ls-caption);color:var(--c-500)}

/* ── 숫자 유틸 ── */
.cv-num,.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.num-lg{font-size:var(--fs-kpi);font-weight:var(--fw-bold);line-height:var(--lh-kpi);letter-spacing:var(--ls-title);font-variant-numeric:tabular-nums}
.num-unit{font-size:.62em;font-weight:var(--fw-semi);color:var(--c-num-muted);margin-left:2px}
.num-pos{color:var(--c-good)} .num-neg{color:var(--c-bad)}

/* ── 로딩 스피너(브랜드 링) ── */
.cv-spinner{width:40px;height:40px;border-radius:50%;border:3.5px solid var(--brand-100);border-top-color:var(--brand);animation:cv-spin .7s linear infinite}
@keyframes cv-spin{to{transform:rotate(360deg)}}

/* 브랜드 그라데이션 텍스트(로고 워드마크 "view" 등) */
.cv-grad{background:linear-gradient(120deg,#FB5F4B,#F73F62);-webkit-background-clip:text;background-clip:text;color:transparent}