:root{
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic","맑은 고딕",sans-serif;
  --bg:#fff;--surface:#fff;--line:#e5e5e5;--fg:#111;--muted:#666;
  --accent:#000;--on-accent:#fff;--ok:#0a0;--warn:#a80;--bad:#a00;
  --ghost:color-mix(in srgb,var(--muted) 20%, transparent);
  /* 선언이 없으면 삼성 인터넷·크롬 안드로이드가 페이지 색을 스스로 뒤집습니다.
     밝은 배경을 전제로 만든 팔레트라 반전되면 대비가 무너집니다.
     대시보드는 자체 다크 모드가 있어 shell.js 가 여기를 덮어씁니다. */
  color-scheme:light;
}
*{box-sizing:border-box}
/* 스크롤 이동은 shell.js 가 굴립니다 */
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:15.5px;line-height:1.75;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;transition:background .25s,color .25s}
h1,h2,h3,h4,p,figure{margin:0}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:940px;margin:0 auto;padding:0 32px}
.wide{max-width:1080px}
@media(max-width:760px){.wrap{padding:0 22px}}

/* 등장 */
.rev{opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rev.in{opacity:1;transform:none}
.rev.d1x{transition-delay:.09s}.rev.d2x{transition-delay:.18s}.rev.d3x{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ── 배경 ────────────────────────────────────────────────────────────
   격자는 히어로에만 둡니다. 페이지 전체에 깔았더니 어디나 같은 바닥이라
   섹션이 서로 구분되지 않고 글자 가독성도 떨어졌습니다 (사용자, 09-07).
   아래 섹션은 흰 바닥(.paper)과 옅은 바닥을 번갈아 써서 갈라 놓습니다.
   body.bgfx 는 랜딩이 아니라 로그인 · 가입 · 404 전용입니다 — 카드 한 장짜리
   화면이라 바닥이 비어 보이는 것을 격자가 채워 줍니다. */
body.bgfx::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(118% 64% at 50% -14%,
      color-mix(in srgb,var(--accent) 15%, transparent) 0%,
      color-mix(in srgb,var(--accent) 4%, transparent) 44%, transparent 74%),
    linear-gradient(color-mix(in srgb,var(--fg) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--fg) 4%, transparent) 1px, transparent 1px),
    var(--bg);
  background-size:100% 100%, 100% 48px, 48px 100%}

/* ── 히어로 ── */
.hero-wrap{position:relative;z-index:1}
/* 히어로는 아래로 내려오면서 흰 바닥으로 녹아듭니다. 다음 섹션(비교)이 흰 바닥이라
   경계에서 색이 뚝 끊기던 것을 없앱니다 (사용자, 09-07) */
.heroblock{position:relative;overflow:hidden;padding-bottom:64px;
  background:linear-gradient(180deg,
    var(--bg) 0%, var(--bg) 44%,
    color-mix(in srgb,var(--bg) 55%, var(--surface)) 74%,
    var(--surface) 100%)}
/* 계측 평면. 아래로 갈수록 사라져 다음 섹션과 경계가 생깁니다 */
.heroblock::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% -18%,
      color-mix(in srgb,var(--accent) 17%, transparent) 0%,
      color-mix(in srgb,var(--accent) 5%, transparent) 46%, transparent 76%),
    linear-gradient(color-mix(in srgb,var(--fg) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--fg) 4.5%, transparent) 1px, transparent 1px);
  background-size:100% 100%, 100% 48px, 48px 100%;
  -webkit-mask-image:linear-gradient(#000 34%, rgba(0,0,0,.4) 66%, transparent 92%);
  mask-image:linear-gradient(#000 34%, rgba(0,0,0,.4) 66%, transparent 92%)}
@media(max-width:640px){.heroblock::before{background-size:100% 100%, 100% 36px, 36px 100%}}

/* 히어로 결과 패널 — 사진이 아니라 마크업입니다. 대시보드 결과 화면의
   판정 띠와 지표를 히어로 크기로 압축했습니다. 값은 연구실 산출물 샘플입니다. */
.hshot{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:20px 22px 18px;box-shadow:0 34px 80px -50px rgba(0,0,0,.5)}

/* ── 히어로 패널 회전 ──────────────────────────────────────────────
   네 장을 같은 칸에 겹쳐 두고(grid-area 1/1) 돌립니다. 겹쳐 두면 칸 높이가
   가장 높은 장에 맞춰져, 넘어갈 때 아래 지표가 흔들리지 않습니다. */
.hstack{display:grid;perspective:1500px;min-height:300px}
/* ★ 칸 높이는 가장 높은 장에 맞춰 고정합니다(네 장을 같은 grid 칸에 겹쳐 둔 결과).
   한때 지금 보이는 장의 높이를 따라가게 했더니 아래 조작부가 장마다 움직여
   쓰기 불편하다는 지적을 받았습니다(09-07). 남는 자리보다 고정된 조작부가 낫습니다.
   대신 네 장의 높이 차를 줄여 둡니다 — 그림 폭 제한(≤860px)과 첫 장 지표 줄 접기(≤430px). */
.hstack > .hshot{grid-area:1/1;opacity:0;visibility:hidden;
  /* ★ scale 을 같이 걸면 전환 내내 글자가 새 크기로 다시 그려지면서 기준선이
     픽셀 격자에 스냅됩니다 — SVG 의 축 이름·시료 평균처럼 여백에 홀로 뜬 글자가
     위아래로 떱니다. 원근만으로도 작아 보이므로 scale 은 뺍니다.
     will-change 로 레이어를 미리 잡아 두면 남은 떨림도 사라집니다. */
  transform:rotateY(26deg) translateZ(-150px);
  will-change:transform, opacity;backface-visibility:hidden;
  transition:opacity .5s ease, transform .72s cubic-bezier(.2,.75,.25,1), visibility .72s}
.hstack > .hshot.on{opacity:1;visibility:visible;transform:none;transition-delay:.05s}
/* 나가는 장은 반대쪽으로 돌아 물러납니다 — 들어오는 장과 방향이 같으면
   두 장이 같은 자리에서 겹쳐 보입니다 */
.hstack > .hshot.out{opacity:0;visibility:visible;
  transform:rotateY(-26deg) translateZ(-150px)}
/* 자동 전환 표시 — 지금 칸이 5초 동안 차오르고, 다 차면 다음 장으로 넘어갑니다.
   넘김을 타이머가 아니라 이 애니메이션이 맡습니다. 그래야 멈춤이 정확히 맞습니다. */
.hsnav{display:flex;align-items:center;gap:12px;margin-top:16px;justify-content:flex-end}
.hsbars{display:flex;gap:7px}
.hsbar{position:relative;width:34px;height:3px;padding:0;border:0;border-radius:2px;
  background:var(--ghost);cursor:pointer;overflow:hidden}
.hsbar i{position:absolute;inset:0;display:block;background:var(--accent);
  transform:scaleX(0);transform-origin:left center}
.hsbar.on{background:color-mix(in srgb,var(--accent) 28%, var(--ghost))}
.hsbar.on i{animation:hsfill 5s linear forwards}
.hero-vis.paused .hsbar.on i,
.hero-vis.hold .hsbar.on i{animation-play-state:paused}
@keyframes hsfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hspause{width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);cursor:pointer;
  display:grid;place-items:center}
.hspause:hover{color:var(--fg)}
.hspause svg{width:9px;height:9px;fill:currentColor}
/* 자동으로 넘기지 않는 환경에서는 차오를 것도 없습니다 */
@media(prefers-reduced-motion:reduce){
  .hsbar.on i{animation:none;transform:scaleX(1)}
  .hspause{display:none}}
@media(prefers-reduced-motion:reduce){
  .hstack > .hshot{transition:opacity .25s ease;transform:none}
  .hstack > .hshot.out{transform:none}}

/* 회전 패널 안쪽 */
.hs-fig{margin-top:14px}
.hs-fig svg{width:100%;height:auto;display:block;overflow:visible}
/* 한 열이 되면 폭이 넓어져 그림만 훌쩍 커집니다. 그 장만 높아져 나머지 아래에
   빈 자리가 생기므로 그림 폭을 묶어 둡니다 */
@media(max-width:860px){.hs-fig{max-width:460px;margin-left:auto;margin-right:auto}}
.hs-read{display:flex;align-items:baseline;gap:10px;margin-top:12px;flex-wrap:wrap}
.hs-read .k{margin:0}
.hs-keep{font-size:11.5px;font-weight:700;color:var(--ok);
  background:color-mix(in srgb,var(--ok) 12%, transparent);border-radius:999px;padding:3px 9px}
.hs-tbl{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px}
.hs-tbl td{padding:9px 0;border-top:1px solid var(--line);vertical-align:middle;
  white-space:nowrap}
.hs-tbl tr:first-child td{border-top:0}
.hs-tbl .d{color:var(--muted);width:52px}
.hs-tbl .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;width:44%}
.hs-tbl .v{text-align:right;font-weight:700;width:64px;padding-right:12px}
.hs-tbl .g{width:34%}
.hs-tbl .hs-bar{height:6px}
/* 좁은 화면에서는 열 넷이 다 들어가지 않아 날짜·값이 한 자씩 끊깁니다.
   대시보드 검사 기록과 같은 방식으로 막대 열부터 접습니다 */
/* 좁은 화면에서는 이 장만 유독 길어져 나머지 셋 아래가 빕니다 — 뒤 두 줄을 접습니다 */
@media(max-width:430px){.hs-tbl tr:nth-child(n+5){display:none}}
@media(max-width:520px){
  .hs-tbl{font-size:11.5px}
  .hs-tbl .d,.hs-tbl .v{white-space:nowrap}
  .hs-tbl .g{display:none}
  .hs-tbl .s{width:auto}}
.hshot .k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--muted);margin-bottom:7px}
.hshot .n{display:block;font-size:11.5px;color:var(--muted);margin-top:6px}
.hs-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:12px;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line)}
.hs-head{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 0 4px}
.hs-v{display:block;font-size:29px;font-weight:800;letter-spacing:-.04em;line-height:1.1;
  color:var(--ok)}
.hs-n{display:block;font-size:29px;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.hs-n em{font-style:normal;font-size:.5em;font-weight:700;margin-left:2px}
.hs-dist{padding:16px 0 4px}
.hs-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;
  background:color-mix(in srgb,var(--fg) 7%, transparent)}
.hs-bar i{display:block;height:100%}
.hs-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:11.5px;
  color:var(--muted)}
.hs-leg span{display:inline-flex;align-items:center;gap:6px}
.hs-leg i{width:8px;height:8px;border-radius:2px;display:block}
.hs-leg b{color:var(--fg);font-weight:700}
.hs-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:18px;
  border-top:1px solid var(--line);padding-top:16px}
.hs-tiles b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.hs-tiles b em{font-style:normal;font-size:.55em;font-weight:700;color:var(--muted);
  margin-left:3px}
.hs-tiles span{display:block;font-size:11.5px;color:var(--muted);margin-top:5px}
@media(max-width:860px){
  .hshot{padding:18px}
  .hs-v,.hs-n{font-size:25px}
  .hs-tiles b{font-size:17px}}
@media(max-width:430px){
  .hs-tiles{display:none}}
@media(max-width:400px){
  .hs-head{gap:12px}
  .hs-v,.hs-n{font-size:21px}}

/* ── 분석 파이프라인 ── */
.pipesec{position:relative;height:calc(100vh + 300px);background:color-mix(in srgb,var(--fg) 3.5%, var(--bg))}
@media(max-width:860px){.pipesec{height:auto;padding:100px 0}}
.pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
/* overflow:hidden 이 남아 있으면 안쪽 sticky 가 붙지 못합니다 —
   스크롤 컨테이너가 이 상자로 바뀌는데 이 상자는 스크롤되지 않습니다 */
@media(max-width:860px){.pin{position:static;height:auto;display:block;overflow:visible}}
.dots{display:flex;gap:7px;margin-top:24px}
.dots i{width:26px;height:3px;border-radius:2px;background:var(--ghost);display:block;
  transition:background .4s ease}
.dots i.on{background:var(--accent)}
.pipe{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,.9fr);gap:56px;
  align-items:center;width:100%;max-width:1620px;margin:0 auto}
@media(max-width:900px){
  /* 그리드 셀 안에서는 sticky 가 움직일 여지가 없습니다(셀 높이 = 요소 높이).
     좁은 화면에서는 블록으로 바꿔 캔버스가 구간 전체에서 붙어 있게 합니다 */
  .pipe{display:block}
  .pipe>div:last-child{margin-top:26px}
  /* 캔버스를 화면에 붙여 둡니다. 단계를 눌러 놓고 아래로 내려가도
     무엇이 바뀌었는지 같이 보여야 합니다 — 데스크톱의 고정 구간이 하는 일입니다 */
  /* .pipe 를 앞에 붙여 뒤에 오는 기본 .stagewrap 규칙을 이깁니다 */
  .pipe .stagewrap{position:sticky;top:var(--nav-h,62px);z-index:2;padding:10px 0;
    background:color-mix(in srgb,var(--fg) 3.5%, var(--bg))}
  /* 누르는 자리라는 것을 먼저 알려 줍니다 */
  .pipe>div:last-child{display:flex;flex-direction:column}
  .pipe .sec-head{order:1;margin-bottom:14px}
  .pipe .hint{order:2;margin:0 0 20px}
  .pipe .steps2{order:3}
  .pipe .dots{order:4}
}
/* 칩이 캔버스 밖으로 나올 자리. .stage 는 overflow:hidden 이라
   그 안에 두면 좁은 화면에서 캔버스 위에 겹쳐 앉습니다 */
.stagewrap{position:relative;min-width:0}
.stage{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10;
  width:100%;max-height:80vh;box-shadow:0 34px 100px -36px rgba(0,0,0,.55)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-118%);
  background:rgba(9,14,24,.94);border:1px solid rgba(255,255,255,.16);border-radius:9px;
  padding:9px 12px;font-size:12px;line-height:1.6;color:#fff;white-space:nowrap;
  transition:opacity .18s ease;z-index:3}
.tip.on{opacity:1}
.tip b{font-weight:800}
.tip .g{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px}
.sum{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 9%;pointer-events:none;z-index:2}
.sum .big{font-size:clamp(44px,5.6vw,76px);font-weight:800;letter-spacing:-.05em;
  color:#fff;line-height:1;margin-bottom:12px}
.sum .cap2{font-size:17px;color:rgba(255,255,255,.72);margin-bottom:30px}
.sum .row{display:flex;gap:34px;flex-wrap:wrap;font-size:16px;color:rgba(255,255,255,.72)}
.sum .row b{color:#fff;font-weight:800}
/* 판정 화면은 데스크톱 기준(최소 44px)이라 좁은 화면에서 캔버스 밖으로 넘칩니다 */
@media(max-width:640px){
  .sum{padding:0 7%}
  .sum .big{font-size:clamp(30px,9.5vw,44px);margin-bottom:7px}
  .sum .cap2{font-size:12.5px;margin-bottom:16px}
  .sum .row{gap:6px 16px;font-size:12.5px}
}
.steps2{display:grid;gap:4px}
.st{padding:16px 20px;border-radius:14px;color:var(--muted);opacity:.34;
  transition:opacity .8s cubic-bezier(.33,1,.68,1),background .8s cubic-bezier(.33,1,.68,1);position:relative}
.st.on{opacity:1;background:color-mix(in srgb,var(--fg) 6%, transparent)}
.st .no{font-size:12.5px;font-weight:800;letter-spacing:.09em;display:block;margin-bottom:8px}
.st.on .no{color:var(--accent)}
.st h4{font-size:20px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px;color:var(--fg)}
.st p{font-size:14.5px;line-height:1.66}
.hint{margin-top:26px;font-size:14px;color:var(--muted);opacity:.7}

/* 타입 */
.d1{font-size:clamp(29px,3.4vw,44px);font-weight:800;letter-spacing:-.038em;line-height:1.32}
.d2{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.034em;line-height:1.38}
.lead{font-size:16px;line-height:1.85;color:var(--muted);max-width:42ch;margin-top:22px}
.body{font-size:15px;line-height:1.8;color:var(--muted);max-width:44ch}
.mono{font-variant-numeric:tabular-nums}
.center{text-align:center}
.center .lead,.center .body{margin-left:auto;margin-right:auto}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);border:0;
  font:inherit;font-size:14.5px;font-weight:700;padding:13px 26px;border-radius:7px;
  cursor:pointer;text-decoration:none}
.link{display:inline-block;color:var(--accent);font-size:14.5px;font-weight:700;
  text-decoration:none;border:0;background:0;font-family:inherit;cursor:pointer;padding:0}
.link:hover{text-decoration:underline}
.btns{margin-top:36px}

/* 히어로 */
.hero-in{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;
  min-height:min(70vh,580px);padding:96px 0 56px}
@media(max-width:860px){.hero-in{grid-template-columns:1fr;gap:40px;padding:80px 0 60px}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:760px;
  border-top:1px solid var(--line);padding:30px 0 0}
.stats b{display:block;font-size:25px;font-weight:800;letter-spacing:-.035em;
  line-height:1;margin-bottom:8px}
.stats b small{font-size:.52em;font-weight:700}
.stats > div > span{font-size:13px;color:var(--muted)}   /* 라벨만. 숫자 안의 span 은 제외 */
@media(max-width:640px){
  .stats{grid-template-columns:repeat(3,1fr);gap:14px;padding-top:24px}
  .stats b{font-size:21px;margin-bottom:6px}
  .stats > div > span{font-size:11.5px;line-height:1.5}}

/* 섹션 */
.s{padding:190px 0}
.s.tight{padding:140px 0}
.s.soft{background:color-mix(in srgb,var(--fg) 3.5%, var(--bg))}
/* 흰 바닥. 옅은 바닥·짙은 바닥과 번갈아 놓아 섹션을 가릅니다 */
.s.paper{background:var(--surface)}
/* 히어로에서 바로 이어지는 섹션 — 위 여백을 줄여 붙입니다 */
#intro{padding-top:88px}
@media(max-width:760px){.s{padding:100px 0}.s.tight{padding:80px 0}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:40px}}
.nouns{font-size:19px;font-weight:700;letter-spacing:-.022em;line-height:1.66;margin-top:22px}

/* 시간 비교 */
.time{margin-top:60px;max-width:600px}
.trow{display:grid;grid-template-columns:100px 1fr;gap:20px;align-items:center;padding:14px 0}
@media(max-width:600px){.trow{grid-template-columns:1fr;gap:6px}}
.trow .who{font-size:14px;color:var(--muted)}
.trow .who.us{color:var(--fg);font-weight:700}
.tbar{display:flex;align-items:center;gap:14px}
.tbar i{display:block;height:10px;border-radius:100px;background:var(--ghost);
  transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .15s}
.in .tbar i,.tbar.on i{transform:scaleX(1)}
.tbar.us i{background:var(--accent)}
.tbar b{font-size:15px;font-weight:800;white-space:nowrap}

/* 비교표 */
.cmp{width:100%;border-collapse:collapse;margin-top:58px;font-size:15px}
.cmp td,.cmp th{padding:19px 22px;text-align:left;vertical-align:top}
.cmp thead th{font-size:12.5px;font-weight:700;color:var(--muted);padding-bottom:11px}
.cmp tbody tr{border-top:1px solid var(--line)}
.cmp .lab{color:var(--muted);font-size:13.5px;width:19%;padding-left:0}
.cmp .old{color:var(--muted);width:27%}
.cmp .new{font-weight:700;width:27%}
.cmp .new,.cmp thead th:last-child{background:color-mix(in srgb,var(--fg) 5%, transparent)}
.cmp thead th:last-child{color:var(--fg)}

/* 등급 */
.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:74px;text-align:left}
@media(max-width:820px){.grades{grid-template-columns:1fr;gap:44px}}
.gr .plot{border-radius:14px;overflow:hidden;margin-bottom:22px;aspect-ratio:1/.62;
  background:color-mix(in srgb,var(--fg) 4%, var(--bg));position:relative}
.gr .plot svg{position:absolute;inset:0;width:100%;height:100%}
.gr h4{font-size:17px;font-weight:800;letter-spacing:-.026em;margin-bottom:6px}
.gr .pct{font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1;margin-bottom:11px}
.gr p{font-size:14px;color:var(--muted);line-height:1.7}

/* 타임라인 */
.tl{margin-top:0;max-width:none;display:flex;flex-direction:column;justify-content:center}
/* 막대는 등장할 때 한 칸씩 섭니다. 재생을 누르면 .tl-go 를 다시 걸어 되감습니다.
   ★ 상태 클래스에 접두사를 붙입니다. site.css 뒤에 shell.css 가 붙으므로
     .play(재생 버튼) · .run(대시보드 진행 카드) 같은 이름은 그대로 물립니다 */
.tl-bar{display:flex;gap:5px;height:38px}
.tl-bar i{display:block;border-radius:6px;transform-origin:left;transform:scaleX(0);
  transition:transform .72s cubic-bezier(.22,.61,.36,1)}
.tl.tl-go .tl-bar i{transform:scaleX(1)}
/* 되감기 — 서 있던 막대를 먼저 0 으로 접습니다. 오른쪽 카드가 뼈대로
   돌아가는 것과 같은 시간이라 둘이 같이 되감기는 것처럼 보입니다.
   접히는 동안에는 두 칸이 같이 움직입니다(.tl-go 가 빠져 지연이 없습니다).
   ★ 재생 버튼으로 누를 때만 씁니다. 스크롤로 다시 들어올 때는 아래 .tl-snap 으로
     전환 없이 초기 상태를 만들고 등장 애니메이션만 돌립니다 */
.tl.tl-rewind .tl-bar i{transition:transform .3s cubic-bezier(.45,0,.65,.35)}
.tl.tl-snap .tl-bar i{transition:none}
.tl.tl-go .tl-bar i:nth-child(2){transition-delay:.38s}
.tl-bar .a{background:color-mix(in srgb,var(--accent) 78%, transparent);flex:30}
.tl-bar .b{background:var(--ghost);flex:120}
.tl-lab{display:flex;gap:5px;margin-top:12px;font-size:13.5px}
.tl-lab span{flex:30}.tl-lab span+span{flex:120}
.tl-lab b{font-weight:800;color:var(--fg)}
.tl-lab em{font-style:normal;color:var(--muted);margin-left:7px}
.tl-total{margin-top:22px;font-size:14px;color:var(--muted)}
.tl-total b{color:var(--fg);font-weight:800}

/* 흐름 — 제목 줄의 재생 버튼 */
.flow-head{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.play{display:inline-flex;align-items:center;gap:7px;flex:none;
  background:none;border:1px solid var(--line);border-radius:100px;
  padding:8px 16px 8px 13px;font:inherit;font-size:13px;font-weight:700;
  color:var(--muted);cursor:pointer;transition:color .18s,border-color .18s}
.play:hover{color:var(--fg);border-color:var(--muted)}
.play svg{width:15px;height:15px;fill:currentColor}
.play:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:760px){.flow-head{flex-direction:column;gap:20px}}

/* 흐름 — 분석 중에는 뼈대가 흐르고, 끝나면 그 자리에서 값으로 바뀝니다 */
.flow-grid{margin-top:56px;align-items:stretch}
.asm{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:26px 28px;min-height:210px;display:flex;flex-direction:column;justify-content:center;
  transform:scale(.99);transition:transform .55s cubic-bezier(.34,1.4,.64,1),box-shadow .55s}
.asm.on{transform:none;box-shadow:0 1px 2px rgba(10,22,40,.04),0 12px 28px -18px rgba(10,22,40,.28)}
.ar{position:relative}
.ar+.ar{margin-top:17px}
.r1{height:30px}.r2{height:36px}.r3{height:10px}.r4{height:20px}
.ar .sk,.ar .ct{position:absolute;inset:0;display:flex;align-items:center;gap:9px;
  transition:opacity .45s,transform .45s cubic-bezier(.22,.61,.36,1)}
.ar .ct{opacity:0;transform:translateY(7px)}
.asm.on .ar .sk{opacity:0;transform:translateY(-5px)}
.asm.on .ar .ct{opacity:1;transform:none}
.asm.on .r2 .sk,.asm.on .r2 .ct{transition-delay:.09s}
.asm.on .r3 .sk,.asm.on .r3 .ct{transition-delay:.18s}
.asm.on .r4 .sk,.asm.on .r4 .ct{transition-delay:.27s}
/* 뼈대 — 훑고 지나가는 빛 */
.sk i{display:block;height:12px;border-radius:100px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--muted) 11%,transparent) 0%,
    color-mix(in srgb,var(--muted) 4%,transparent) 45%,
    color-mix(in srgb,var(--muted) 11%,transparent) 100%);
  background-size:280% 100%;animation:shim 1.5s linear infinite}
.sk i:nth-child(2){animation-delay:.18s}
@keyframes shim{from{background-position:150% 0}to{background-position:-90% 0}}
.asm .k{font-size:13px;color:var(--muted)}
.asm .vd{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--ok)}
.asm .r2 .ct{align-items:baseline;gap:6px}
.asm .r2 b{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1}
.asm .r2 em{font-style:normal;font-size:14px;font-weight:700;color:var(--muted)}
.asm .r2 .k{margin-left:4px}
.asm .r4 .ct{align-items:baseline;gap:6px}
.asm .r4 b{font-size:15px;font-weight:800;color:var(--fg)}
.asmbar{display:flex;width:100%;height:10px;border-radius:100px;overflow:hidden}
.asmbar i{transform-origin:left;transform:scaleX(0);
  transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.asm.on .asmbar i{transform:scaleX(1)}
.asm.on .asmbar i:nth-child(1){transition-delay:.20s}
.asm.on .asmbar i:nth-child(2){transition-delay:.34s}
.asm.on .asmbar i:nth-child(3){transition-delay:.46s}
/* 스크롤로 다시 들어올 때 — 뼈대로 돌아가는 것을 보여주지 않습니다 */
.asm.asm-snap .ar .sk,.asm.asm-snap .ar .ct,.asm.asm-snap .asmbar i{transition:none}
@media(prefers-reduced-motion:reduce){
  .sk i{animation:none}
  .ar .sk,.ar .ct,.asmbar i,.asm{transition:none}
}
}

/* 랜딩 추상 결과 카드 */
.mini{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 26px 22px}
.mini-hd{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  font-size:12.5px;color:var(--muted);padding-bottom:14px}
.mini-hd span:first-child{color:var(--fg);font-weight:700}
.mini-fn{font-size:11.5px;color:var(--muted);opacity:.75;margin-top:16px;line-height:1.6}
.mini .vd{font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--ok);line-height:1;
  margin-bottom:18px}
.mini .num{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.mini .num b{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1}
.mini .num em{font-style:normal;font-size:15px;font-weight:700;color:var(--muted)}
.mini .lab{font-size:13px;color:var(--muted);margin-bottom:18px}

/* 탭 — 판정 / 등급 분포 / 개체 분포 */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:9px 12px;font:inherit;font-size:13.5px;font-weight:700;
  color:var(--muted);cursor:pointer;transition:color .18s,border-color .18s}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* 탭을 바꿔도 카드 높이가 흔들리지 않게 바닥을 깔아 둡니다 */
.tabbody{min-height:322px;display:flex;flex-direction:column;justify-content:center}

/* 기준선이 붙는 게이지 */
.gauge{position:relative;height:9px;border-radius:100px;background:var(--ghost);overflow:hidden}
.gauge i{position:absolute;inset:0 auto 0 0;border-radius:100px;background:var(--ok);
  transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.in .gauge i{transform:scaleX(1)}
.gauge u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fg);opacity:.55}
.gwrap{position:relative;padding-bottom:24px}
.gth{position:absolute;top:15px;transform:translateX(-50%);white-space:nowrap;
  font-size:11.5px;color:var(--muted)}
.barwrap{position:relative;padding-bottom:24px}
.barwrap u{position:absolute;top:-3px;height:15px;width:2px;background:var(--fg);opacity:.55}
.tabbody .bar{margin-bottom:2px}

/* 판정 탭의 지표 세 줄 */
.mets{margin-top:22px;border-top:1px solid var(--line)}
.mets div{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.mets div:last-child{border-bottom:0}
/* ── 목록형 행 호버 (비교표 행에서 시작한 규칙) ──────────────────────
   글자에 딱 붙은 하이라이트는 답답합니다. 행 자체에 좌우 여백을 주면
   구분선까지 같이 넓어져 위쪽 선과 어긋나므로, 배경만 뒤에 깔아 넓힙니다.
   레이아웃은 한 픽셀도 바뀌지 않습니다. */
.mets div,.rc,.glist div{position:relative;isolation:isolate}
.mets div > *,.rc > *,.glist div > *{position:relative;z-index:1}
.mets div::before,.rc::before,.glist div::before{content:"";position:absolute;
  inset:2px -14px;border-radius:9px;background:transparent;z-index:0;
  transition:background .18s ease}
.mets div:hover::before,.rc:hover::before,.glist div:hover::before{
  background:color-mix(in srgb,var(--fg) 3.5%, transparent)}
.mets .k{color:var(--muted)}
.mets .v{font-weight:700}
.mets .v small{font-weight:600;color:var(--muted);font-size:11.5px;margin-left:3px}

/* 등급 분포 */
.glist{margin-top:8px}
.glist div{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.glist div:last-child{border-bottom:0}
.glist i{width:12px;height:12px;border-radius:4px}
.glist b{font-weight:700;font-variant-numeric:tabular-nums}
.glist em{font-style:normal;display:block;font-size:11.5px;color:var(--muted);font-weight:400}

/* 개체 분포 산점도 */
.sc{position:relative}
.sc svg{width:100%;height:auto;display:block}
.sc .ax{fill:var(--muted);font-size:10.5px}
.sc .gl{stroke:var(--line)}
.sc .pr{fill:var(--ok);opacity:.5}
.sc .np{fill:none;stroke:var(--warn);stroke-width:1.3}
.sc .hit{fill:none;stroke:var(--fg);stroke-width:1.6;opacity:0;transition:opacity .12s}
.sc .hit.on{opacity:1}
.sc-tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
  background:var(--fg);color:var(--bg);font-size:11.5px;line-height:1.5;font-weight:600;
  padding:6px 9px;border-radius:8px;white-space:nowrap;transition:opacity .12s}
.sc-tip.on{opacity:1}
.sc-lg{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:14px;
  font-size:12px;color:var(--muted)}
.sc-lg span{display:flex;align-items:center;gap:6px}
.sc-lg b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.sc-lg .d{width:9px;height:9px;border-radius:50%;background:var(--ok);opacity:.6}
.sc-lg .o{width:9px;height:9px;border-radius:50%;border:1.4px solid var(--warn)}
.bar{display:flex;height:9px;border-radius:100px;overflow:hidden}
.bar i{transform-origin:left;transform:scaleX(0);
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.in .bar i{transform:scaleX(1)}
.in .bar i:nth-child(2){transition-delay:.12s}
.in .bar i:nth-child(3){transition-delay:.24s}

/* 작업 영역 결과 카드 */
.result{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px}
.res-id{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;
  color:var(--muted);margin-bottom:24px}
.verdict{font-size:44px;font-weight:800;letter-spacing:-.045em;color:var(--ok);
  line-height:1;margin-bottom:8px}
.verdict-sub{font-size:14px;color:var(--muted);margin-bottom:30px}
.hl{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.hl b{font-size:52px;font-weight:800;letter-spacing:-.045em;line-height:1}
.hl em{font-style:normal;font-size:18px;font-weight:700;color:var(--muted)}
.hl-lab{font-size:13.5px;color:var(--muted);margin-bottom:24px}
.legend{display:flex;flex-wrap:wrap;gap:20px;font-size:13px;margin:13px 0 28px}
.legend span{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.legend b{color:var(--fg)}
.legend i{width:8px;height:8px;border-radius:2px;display:block}
.metrics{border-top:1px solid var(--line)}
.m{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.m .k{color:var(--muted)}.m .v{font-weight:700}
.m .r{color:var(--muted);font-weight:400;font-size:12.5px;margin-left:9px}
.m .none{color:var(--muted);font-weight:400}

/* 근거 */
.ev{display:grid;grid-template-columns:repeat(2,1fr);gap:64px;margin-top:70px;text-align:left}
@media(max-width:820px){.ev{grid-template-columns:1fr;gap:48px}}
.ev .num{font-size:clamp(40px,5vw,60px);font-weight:800;letter-spacing:-.045em;
  line-height:1;margin-bottom:16px}
.ev .num small{font-size:.38em;font-weight:700}
.ev p{font-size:14.5px;color:var(--muted);line-height:1.75}
.ev .fn{font-size:11.5px;margin-top:18px;line-height:1.6;opacity:.7}
.orgs{display:flex;flex-wrap:wrap;justify-content:center;gap:34px;margin-top:62px}
.org{font-size:15px;font-weight:700;color:var(--muted)}
.claims{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:64px;text-align:left}
@media(max-width:820px){.claims{grid-template-columns:1fr;gap:32px}}
.claim b{display:block;font-size:16px;font-weight:800;letter-spacing:-.022em;margin-bottom:8px}
.claim p{font-size:14px;color:var(--muted);line-height:1.72}

.cta{padding:200px 0}
.foot{border-top:1px solid var(--line);padding:30px 0 60px;font-size:12.5px;color:var(--muted)}

.work{padding:44px 0 120px}
.work-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
@media(max-width:980px){.work-grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.panel h3{font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--muted);margin-bottom:16px}
.shotbox{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.cap{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.65}
/* ── 섹션 제목 — 명사형 제목 + 설명 한 덩어리 ── */
.sec-head{margin-bottom:56px}
.sec-head .d2{margin-bottom:18px}
.sec-sub{font-size:16.5px;line-height:1.8;color:var(--muted);max-width:52ch}
.center .sec-sub{margin-left:auto;margin-right:auto}
.sec-head.tight{margin-bottom:34px}
.sec-head.tight .d2{margin-bottom:14px}
.sec-head.tight .sec-sub{font-size:15px;max-width:40ch}
@media(max-width:760px){.sec-head{margin-bottom:40px}}

/* ── 비교표를 카드로 띄웁니다 ── */
.cmp-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:0 34px 80px -50px rgba(0,0,0,.5);margin-top:0}
.cmp-card .cmp{margin-top:0;font-size:15.5px}
.cmp-card .cmp thead th{padding:20px 24px 14px;border-bottom:1px solid var(--line)}
.cmp-card .cmp td{padding:18px 24px}
.cmp-card .cmp .lab{padding-left:24px}
.cmp-card .cmp tbody tr{transition:background .18s}
.cmp-card .cmp tbody tr:hover{background:color-mix(in srgb,var(--fg) 3.5%, transparent)}
.cmp-card .cmp tbody tr:last-child{border-bottom:0}
@media(max-width:700px) and (min-width:641px){
  .cmp-card .cmp{font-size:13.5px}
  .cmp-card .cmp td,.cmp-card .cmp thead th{padding:13px 12px}
  .cmp-card .cmp .lab{padding-left:12px}
}
/* 좁은 화면에서는 4열을 우겨넣지 않고 항목마다 카드 한 장으로 풉니다.
   330px 에서는 셀마다 두 줄로 접혀 표가 표 구실을 못 합니다. */
@media(max-width:640px){
  .cmp-card{border-radius:16px}
  .cmp-card .cmp,.cmp-card .cmp tbody,.cmp-card .cmp tr,.cmp-card .cmp td{display:block;width:auto}
  .cmp-card .cmp thead{display:none}
  .cmp-card .cmp tr{padding:16px 18px 14px}
  .cmp-card .cmp tr+tr{border-top:1px solid var(--line)}
  .cmp-card .cmp td{padding:6px 0;display:flex;gap:14px;align-items:baseline;
    justify-content:space-between;font-size:14.5px;text-align:right}
  .cmp-card .cmp td::before{content:attr(data-h);font-size:12.5px;color:var(--muted);
    font-weight:400;flex:none;text-align:left}
  .cmp-card .cmp .lab{padding:0 0 9px;font-size:13px;font-weight:800;color:var(--fg);
    display:block;text-align:left}
  .cmp-card .cmp .lab::before{content:none}
  .cmp-card .cmp .new{background:none;font-weight:800;color:var(--accent)}
  .cmp-card .cmp tbody tr:hover{background:none}
}

/* ── 근거 섹션 ── */
.ev{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:0;
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  text-align:left}
@media(max-width:820px){.ev{grid-template-columns:1fr}}
.ev > div{background:var(--surface);padding:30px 28px}
.ev .num{font-size:clamp(34px,3.8vw,46px);font-weight:800;letter-spacing:-.045em;
  line-height:1;margin-bottom:12px}
.ev .num small{font-size:.36em;font-weight:700;margin-left:3px}
.ev p:last-child{font-size:14px;color:var(--muted);line-height:1.7}

.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:52px;
  text-align:left;align-items:start}
@media(max-width:860px){.ev-grid{grid-template-columns:1fr;gap:40px}}
.lab-s{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;margin-bottom:18px}

/* 혼동행렬 */
.cmx{display:grid;grid-template-columns:auto repeat(3,1fr);gap:5px}
.cmx .hd{font-size:12px;font-weight:700;color:var(--muted);text-align:center;
  padding:6px 4px;align-self:center}
.cmx .hd.r{text-align:right;padding-right:12px}
.cmx .cl{padding:16px 8px;text-align:center;border-radius:9px;font-weight:800;
  font-size:16px;font-variant-numeric:tabular-nums;border:1px solid transparent}
.cmx .cl.d{background:color-mix(in srgb,var(--ok) calc(var(--i) * 0.5%), transparent);
  border-color:color-mix(in srgb,var(--ok) 35%, transparent);color:var(--fg)}
.cmx .cl.e{background:color-mix(in srgb,var(--bad) calc(var(--i) * 0.8% + 12%), transparent);
  color:var(--bad)}
.cmx .cl.z{color:var(--muted);opacity:.45;font-weight:600;
  background:color-mix(in srgb,var(--fg) 3%, transparent)}
.cmx-note{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.75;
  max-width:44ch}

/* 등급별 재현율 */
.rc{display:grid;grid-template-columns:96px 1fr 62px 74px;gap:14px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--line)}
.rc:last-child{border-bottom:0}
.rc span{font-size:14px}
.rc i{display:block;height:8px;border-radius:100px;background:var(--ghost);overflow:hidden}
.rc i b{display:block;height:100%;background:var(--ok);border-radius:100px;
  transform-origin:left;transform:scaleX(0);
  transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.in .rc i b{transform:scaleX(1)}
.rc:nth-child(3) i b{transition-delay:.1s}
.rc:nth-child(4) i b{transition-delay:.2s}
.rc em{font-style:normal;font-weight:800;font-size:15px;text-align:right}
.rc small{font-size:12px;color:var(--muted);text-align:right}
@media(max-width:520px){
  .rc{grid-template-columns:1fr 62px;gap:8px}
  .rc i,.rc small{grid-column:1 / -1}
}

.fn{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:44px;
  max-width:60ch;margin-left:auto;margin-right:auto}

/* 혼동행렬 축 라벨 — 읽는 법을 문장 대신 라벨로 줍니다 (루닛 방식) */
.cmx-wrap{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch}
/* 세로쓰기에서 한글은 눕지 않고 그대로 섭니다. 여기에 rotate(180deg) 를 걸면
   글자 하나하나가 거꾸로 뒤집힙니다. 세로로 위에서 아래로 읽게 둡니다. */
.cmx-y{writing-mode:vertical-rl;
  font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;text-align:center;padding-top:26px}
.cmx-x{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;margin-bottom:8px;text-align:center}

/* ── 줄바꿈 ──────────────────────────────────────────────────
   balance : 제목의 줄 길이를 고르게 (2~4줄짜리 헤드라인용)
   pretty  : 마지막 줄에 한 단어만 남는 고아 줄을 막음 (본문용) */
.d1,.d2,h1,.auth-say h2,.auth-box h1,.drop h3{text-wrap:balance}
.lead,.body,.sec-sub,.fn,.hint,.cap,.cmx-note,.nouns,.st p,.tl-total,
.ev p,.desc,.auth-note,.auth-say p{text-wrap:pretty}

/* ── 카운트업 자리 ────────────────────────────────────────────────
   숫자만 감싼 것이라 주변 글자 모양을 그대로 물려받아야 합니다.
   감싸는 순간 바깥 규칙(.stats span 같은 것)에 걸려 크기·색이 바뀝니다.
   파일 맨 뒤에 두는 것도 그래서입니다 — 같은 특정도면 뒤가 이깁니다. */
span.cu{font:inherit;color:inherit;letter-spacing:inherit}

/* ── 404 ──────────────────────────────────────────────────────── */
.nf{max-width:940px;margin:0 auto;padding:200px 32px 240px}
.nf-code{font-size:15px;font-weight:800;color:var(--accent);letter-spacing:.06em;
  margin-bottom:18px}
.nf h1{font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.04em;
  line-height:1.25;margin-bottom:14px}
.nf-sub{font-size:16.5px;color:var(--muted);margin-bottom:36px}
.nf .btns{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
@media(max-width:760px){.nf{padding:140px 22px 160px}}

/* ── 결과 화면 섹션 배치 ───────────────────────────────────────
   링크는 마크업상 카드 뒤에 둡니다. 한 열로 접히면 "자세히 보기"가
   보여줄 것보다 위에 오는데, 링크는 그 대상 다음에 와야 합니다.
   넓은 화면에서는 영역 이름으로 왼쪽 글 아래에 도로 붙입니다. */
.two.res-two{grid-template-areas:"say card" "cta card";grid-template-rows:auto 1fr;
  align-items:start;row-gap:0}   /* .two 의 gap 64px 이 행에도 걸려 글과 링크가 벌어집니다 */
.res-two .res-say{grid-area:say}
.res-two .res-cta{grid-area:cta;align-self:start;margin-top:22px}
.res-two .mini{grid-area:card;align-self:start}
@media(max-width:860px){
  .two.res-two{grid-template-columns:1fr;grid-template-areas:"say" "card" "cta";gap:26px}
  .res-two .res-cta{margin-top:0}
}

/* ── 검사 결과 — 판정 띠 ────────────────────────────────────────
   라벨을 위, 값을 아래로 세 칸이 같은 구조라 줄이 저절로 맞습니다.
   전에는 판정과 숫자가 서로 다른 기준선에 놓여 어수선했습니다. */
.vbar .res-id{margin-bottom:20px}
.vb-grid{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:start}
.vb-c{display:flex;flex-direction:column;gap:10px;min-width:0}
.vb-c + .vb-c{border-left:1px solid var(--line);margin-left:32px;padding-left:32px}
.vb-c .k{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.vb-c .n{font-size:12.5px;color:var(--muted)}
.vbar .verdict{font-size:42px;line-height:1;margin:0}
.vb-num{font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1}
.vb-num em{font-style:normal;font-size:17px;font-weight:700;color:var(--muted);margin-left:5px}
.vb-dist .bar{margin-top:5px}
.vb-dist .legend{margin:2px 0 0}
@media(max-width:900px){
  .vb-grid{grid-template-columns:1fr;gap:22px}
  .vb-c + .vb-c{border-left:0;margin-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:20px}
  .vbar .verdict,.vb-num{font-size:32px}
}

/* 지표 타일 — 여섯 값이 판독의 근거라 표 한 줄보다 크게 세웁니다 */
/* 타일 일곱 장을 4 + 3 으로 놓습니다. 남는 칸이 생기면 배경(선 색)이
   그대로 드러나서, 12칸 그리드에 span 을 나눠 딱 맞춥니다. */
.mtiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.mt{background:var(--surface);padding:20px 22px 18px;display:flex;flex-direction:column;gap:10px;
  grid-column:span 3}
.mt:nth-last-child(-n+3){grid-column:span 4}
.mt .k{font-size:12.5px;color:var(--muted)}
.mt b{font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1}
.mt b em{font-style:normal;font-size:13px;font-weight:700;color:var(--muted);margin-left:4px}
.mt .n{font-size:11.5px;color:var(--muted)}
.mt .none{color:var(--muted);font-weight:600}
@media(max-width:760px){
  .mtiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mt,.mt:nth-last-child(-n+3){grid-column:span 3}
  .mt:last-child{grid-column:span 6}
}
@media(max-width:460px){
  .mtiles{grid-template-columns:1fr}
  .mt,.mt:nth-last-child(-n+3),.mt:last-child{grid-column:span 1}
}

/* 산점도 — 시료 평균 십자선. 지표의 VCL·LIN 이 구름의 어디인지 짚어 줍니다 */
.sc .mn{stroke:var(--fg);stroke-width:1;stroke-dasharray:3 4;opacity:.32}
.sc .mnl{fill:var(--muted);font-size:10px;font-weight:700}


/* ── 손이 올라가면 반응합니다 ─────────────────────────────────────────
   의미를 더하는 장치가 아니라 화면이 살아 있다는 표시입니다.
   움직임을 원하지 않는 환경에서는 색만 바뀝니다. */
.cmx .cl{cursor:default;transition:transform .18s ease, box-shadow .18s ease}
.cmx .cl:hover{transform:translateY(-3px) scale(1.04);position:relative;z-index:1;
  box-shadow:0 16px 26px -16px color-mix(in srgb,var(--fg) 62%, transparent)}
/* .ev 는 카드 하나를 선으로 나눈 것이라(overflow:hidden) 띄우면 잘립니다 — 색으로만 */
.ev > div{transition:background .2s ease}
.ev > div:hover{background:color-mix(in srgb,var(--accent) 5%, var(--surface))}
.ev .num{transition:color .2s ease}
.ev > div:hover .num{color:var(--accent)}
.btn{transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-2px);
  box-shadow:0 16px 30px -16px color-mix(in srgb,var(--accent) 75%, transparent)}
.play{transition:transform .18s ease, box-shadow .18s ease}
.play:hover{transform:translateY(-2px);
  box-shadow:0 12px 22px -14px color-mix(in srgb,var(--fg) 55%, transparent)}
/* ★ .cmp-card 는 .rev 이기도 합니다. transition 은 단축 속성이라 여기서 새로 쓰면
   .rev 의 opacity·transform 전환이 통째로 지워집니다 — 실제로 비교표 등장이
   죽었습니다(09-07). 그림자만 더하려면 .rev 의 값을 같이 적어 줘야 합니다. */
.cmp-card{transition:opacity .8s cubic-bezier(.22,.61,.36,1),
  transform .8s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease}
.cmp-card:hover{box-shadow:0 44px 96px -50px rgba(0,0,0,.55)}
.hspause{transition:transform .18s ease, color .18s ease}
.hspause:hover{transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){
  .cmx .cl:hover,.btn:hover,.play:hover,.hspause:hover{transform:none}}