/* CiteAngle instruments (2026-07-16 디자인 1차 · 2026-07-17 리뷰 수리) — 계기 컴포넌트 3종.
   (a) 숫자 카운터  [data-instrument="counter"]  — 스크롤 진입 시 실측값까지 카운트업
   (b) CI 수렴 게이지 [data-instrument="ci-gauge"] — 반복 1→7회 Wilson 95% 구간 폭 수렴(정적 렌더)
   (c) 측정 순회 펄스 [data-instrument="pulse"]   — 표면 격자 순회 펄스(순수 CSS)
   hallmark 규율: transform/opacity만 애니메이트 · 이징/지속시간 토큰 · reduced-motion 필수.
   모션 예산(하드룰: 페이지당 프리미티브 3개 이하) — 홈 3로케일의 프리미티브는
   ①스크롤 리빌(.rv 단일 계통) ②숫자 카운트업(counter/countUp = 한 유형) ③순회 펄스.
   게이지 행 리빌은 예산 초과라 제거(정적 완성 상태), 홈의 카드·CTA 호버 리프트는
   하단 블록에서 색 피드백으로 강등한다(이 파일은 홈 3로케일에서만 로드됨).
   데이터 정책: 모든 수치는 서버 렌더(봉인 실측 원장·claim-registry 등록분) — JS는 표시만. */
:root{
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in:cubic-bezier(0.7,0,0.84,0);
  --dur-count:600ms;
  --ins-hair:rgba(143,184,232,.28);
  --ins-hair-soft:rgba(143,184,232,.14);
  --ins-glow:#8fb8e8;
  /* 다크 계기반 잉크 스케일(토큰 잠금 — 인라인 색상 금지) */
  --ins-ink:#eef2f8;
  --ins-ink-mid:#c3cfe0;
  --ins-ink-sub:#93a3ba;   /* #182742 위 5.8:1 — 12.5px 보조 라벨 하한 통과 */
  --ins-link:#dbe5f1;
  /* 라이트 표면 변주(EN·JA 홈 카드) */
  --ins-light-track:#e6edf6;
  --ins-light-band:rgba(35,103,168,.42);
  --ins-light-ink:#3a4250;
}

/* ── 다크 계기반 밴드(KR 홈) — 기존 statband 시각 언어의 계기 확장 ── */
section.landing.instband{background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 100%);
  margin-top:84px;padding:76px 0 84px}
.instband .kicker{color:var(--ins-glow)}
.instband .kicker::after{background:var(--ins-hair)}
.instband h2{color:#fff}
.instband .secLead{color:var(--ins-ink-mid)}
.instband .secLead b{color:#fff}
/* index.html의 section.landing a:not([class]) (0,2,2)를 이기도록 특이성 승격(리뷰 수리 —
   다크 밴드 위 accent 링크 2.54:1 차단) */
section.landing.instband .secLead a{color:var(--ins-link);text-decoration-color:rgba(219,229,241,.5)}
section.landing.instband .secLead a:hover{color:#fff;text-decoration-color:currentColor}

.inst-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:26px}
.inst-stat{position:relative;border:1px solid var(--ins-hair);padding:22px 20px 16px;color:var(--ins-ink);
  display:flex;flex-direction:column;min-width:0}
.inst-stat::before{content:'';position:absolute;top:-1px;left:-1px;width:12px;height:12px;
  border-top:2px solid var(--ins-glow);border-left:2px solid var(--ins-glow)}
.inst-stat .iv{font-size:44px;font-weight:800;line-height:1.05;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums}
.inst-stat .iv i{font-style:normal;font-size:19px;color:var(--ins-glow);font-weight:700}
.inst-stat .il{font-size:13.5px;color:var(--ins-ink-mid);margin:8px 0 12px;line-height:1.66}
.inst-stat .is{font-size:11.5px;color:var(--ins-ink-sub);margin-top:auto;border-top:1px solid var(--ins-hair);
  padding-top:8px;line-height:1.6;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media (max-width:900px){.inst-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){section.landing.instband{margin-top:52px;padding:56px 0 60px}
  .inst-stats{gap:10px}.inst-stat{padding:16px 14px 12px}
  .inst-stat .iv{font-size:31px}.inst-stat .iv i{font-size:14px}}

/* ── (b) CI 수렴 게이지 — 반복이 쌓일수록 구간 폭이 좁아지는 궤적.
   행 리빌 애니메이션은 모션 예산(≤3) 초과라 제거 — 항상 정적 완성 상태로 렌더한다. ── */
.inst-gauge{margin-top:30px;border:1px solid var(--ins-hair);padding:22px 22px 18px}
.inst-gauge .gh,.inst-pulse .gh{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:14px}
.inst-gauge .gh b,.inst-pulse .gh b{font-size:14px;font-weight:800;letter-spacing:.02em;color:#fff}
.inst-gauge .gh span,.inst-pulse .gh span{font-size:12.5px;color:var(--ins-ink-sub)}
.ci-rows{display:grid;gap:9px}
.ci-row{display:grid;grid-template-columns:58px minmax(0,1fr) 92px;gap:12px;align-items:center}
.ci-row .ck{font-size:12px;font-weight:700;color:var(--g-ink,var(--ins-ink-mid));white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ci-row .ct{position:relative;height:12px;background:var(--g-track,var(--ins-hair-soft));border-radius:6px}
.ci-row .cb{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--g-band,rgba(143,184,232,.55));
  left:calc(var(--lo)*1%);width:calc((var(--hi) - var(--lo))*1%)}
.ci-row .cm{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--g-mark,#fff);
  left:calc(var(--rate,50)*1%)}
.ci-row .cw{font-size:11.5px;color:var(--g-ink,var(--ins-ink-sub));text-align:right;
  font-variant-numeric:tabular-nums;min-height:1em}
.inst-gauge .gnote{font-size:12.5px;color:var(--ins-ink-sub);line-height:1.75;margin:16px 0 0;max-width:760px}
.inst-gauge .gnote span{display:block;margin-top:6px;color:var(--ins-ink-sub);font-variant-numeric:tabular-nums}
/* 라이트 표면 변주(EN·JA 홈 본문 카드) */
.inst-gauge.light{border:1px solid var(--line);background:var(--card);border-radius:14px;margin-top:18px;
  --g-track:var(--ins-light-track);--g-band:var(--ins-light-band);--g-mark:var(--accent-dk);
  --g-ink:var(--ins-light-ink);box-shadow:0 8px 26px rgba(15,23,42,.045)}
.inst-gauge.light .gh b{color:var(--navy)}
.inst-gauge.light .gh span{color:var(--sub)}
.inst-gauge.light .gnote,.inst-gauge.light .gnote span{color:var(--sub)}
@media (max-width:480px){.ci-row{grid-template-columns:44px minmax(0,1fr) 74px;gap:8px}
  .ci-row .cw{font-size:10.5px}}

/* ── (c) 측정 순회 펄스 — 표면 칩/셀 격자의 순차 점멸(진행 표시 계열 = linear 허용) ── */
.inst-pulse{margin-top:22px;border:1px solid var(--ins-hair);padding:20px 22px 16px}
.pulse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.pulse-grid>span{display:flex;align-items:center;gap:8px;border:1px solid var(--ins-hair);border-radius:8px;
  padding:7px 10px;font-size:12px;font-weight:700;color:var(--ins-ink-mid);white-space:nowrap;min-width:0}
.pulse-grid>span::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--ins-glow);opacity:.22;
  animation:inst-pulse 8.4s linear infinite;animation-delay:calc(var(--i,0)*.6s)}
@media (max-width:480px){.pulse-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pulse-grid>span{font-size:11px;padding:6px 8px;white-space:normal;overflow-wrap:anywhere}}
/* 기존 라이트 칩 행(JA 홈 jachips 등)에 얹는 변주 — 레이아웃 불변, 순회 점만 추가 */
.pulse-chips>span{position:relative}
.pulse-chips>span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:.2;margin-right:7px;vertical-align:1px;
  animation:inst-pulse 8.4s linear infinite;animation-delay:calc(var(--i,0)*.6s)}
/* 기존 측정 격자 셀(EN 홈 mgrid)에 얹는 변주 — 셀 스타일 불변, 순회 감쇠만 추가 */
.pulse-cells .mcell{animation:inst-cell 7s linear infinite;animation-delay:calc(var(--i,0)*.35s)}
.mlnote{color:var(--sub);font-weight:600}
@keyframes inst-pulse{0%,9%,100%{opacity:.22}4%{opacity:1}}
@keyframes inst-cell{0%,10%,100%{opacity:.9}5%{opacity:.4}}

/* ── 모션 예산 집행(리뷰 수리) — 계기반 홈에서는 카드·버튼 호버를 리프트(transform/shadow)
   없이 색 피드백만 남긴다. 이 파일은 홈 3로케일에서만 로드되므로 서브페이지는 불변. ── */
.stat:hover,.axis:hover,.step:hover,.postlist a.post:hover{transform:none;box-shadow:none}
a.btn:hover{transform:none;box-shadow:none}

/* ── reduced-motion: 순회 정지(정적 완성 상태) — 카운터는 JS가 생략, 게이지는 원래 정적 ── */
@media (prefers-reduced-motion: reduce){
  .pulse-grid>span::before,.pulse-chips>span::before{animation:none!important;opacity:.55}
  .pulse-cells .mcell{animation:none!important}
}