/* 쫑긋 — 필뮤

   ── 왜 어두운가 ────────────────────────────────────────────────
   이 앱이 다루는 것은 소리 하나다. 이어폰을 끼고, 눈이 아니라 귀를 쓰는 앱이다.
   검정 위에 앰버 선 하나가 빛나는 화면은 계기판(오실로스코프)이고,
   그게 이 앱이 실제로 하는 일의 그림이다. 크림 배경 위에서는 파형이 빛나지 못한다.
   색은 회사 확정색 그대로다 — 앰버(#F5A623)·크림(#FFF9F0)·잉크(#2B2B2B)를 어둡게 깐 것뿐이다.
   (디자인.md 247줄 「색 — 앱마다 고른다. 브랜드 3색을 기본값으로 두되, 앱에 안 맞으면 바꾼다」,
    255줄 「브랜드는 색이 아니라 규칙이다」.)

   ── 그림자·번짐을 쓴 자리와 그 이유 ────────────────────────────
   · 파형의 번짐  = 소리는 에너지다. 클수록 밝다. 진폭이 0이면 번짐도 0이다.
   · 칸의 원형 빛 = 소리가 나고 있는 칸이 광원이다. 소리가 멎으면 꺼진다.
   · 사다리의 빛  = 내가 내려온 깊이만 빛난다. 안 간 자리는 안 빛난다.
   전부 "소리가 나고 있다/여기까지 왔다"를 말한다. 예뻐서 넣은 것은 없다.

   글꼴: IBM Plex Sans KR(글) + IBM Plex Mono(숫자) — SIL OFL 1.1, github.com/IBM/plex.
        이 앱에 쓰는 글자만 남기고 잘라 파일 안에 넣었다(외부 요청 0건). fonts/LICENSE.txt.
        숫자를 등폭(Mono)으로 따로 물린 이유: 이 앱에서 제일 자주 바뀌는 것이 숫자다
        (12단계 · 13센트 · 상위 38% · 연습 화면의 큰 숫자). 등폭이면 자릿수가 바뀌어도
        자리가 안 흔들려서 계기판처럼 읽힌다. IBM Plex Mono 에는 한글이 없으므로
        한글은 저절로 Sans KR 로 떨어진다 — 설계대로다.
        ⚠ 화면 문구를 바꿀 때는 그 글자가 들어 있는지 먼저 확인해야 한다.
          검사: python3 도구/폰트검사.py
        앱 이름(쫑긋)은 글자가 아니라 로고다 → index.html 의 #wm-name 워드마크로 그린다.
        (그래서 잘라둔 글꼴에도 「쫑」「긋」은 없다. 순서가 반대가 아니다.)
        필뮤 로고(Kaushan Script)도 웹폰트 대신 아웃라인 SVG다. */

@font-face{font-family:"Ear Plex";font-weight:400;font-style:normal;font-display:block;src:url("./fonts/body-400.woff2") format("woff2");}
@font-face{font-family:"Ear Plex";font-weight:500 600;font-style:normal;font-display:block;src:url("./fonts/body-600.woff2") format("woff2");}
@font-face{font-family:"Ear Plex";font-weight:700 900;font-style:normal;font-display:block;src:url("./fonts/body-700.woff2") format("woff2");}
@font-face{font-family:"Ear Plex Mono";font-weight:400 500;font-style:normal;font-display:block;src:url("./fonts/num-500.woff2") format("woff2");}
@font-face{font-family:"Ear Plex Mono";font-weight:600;font-style:normal;font-display:block;src:url("./fonts/num-600.woff2") format("woff2");}
@font-face{font-family:"Ear Plex Mono";font-weight:700 900;font-style:normal;font-display:block;src:url("./fonts/num-700.woff2") format("woff2");}

:root{
  --amber:#F5A623;
  --amber-hot:#FFD27A;
  --cream:#FFF9F0;

  --bg:#100E0C;          /* 잉크(#2B2B2B)를 끝까지 내린 따뜻한 검정 */
  --bg-2:#17130F;        /* 한 겹 올라온 면 */
  --bg-3:#1F1913;

  --line:rgba(255,249,240,.11);
  --line-soft:rgba(255,249,240,.06);
  --muted:rgba(255,249,240,.56);
  --muted-2:rgba(255,249,240,.34);

  --pad:22px;
  --font:"Ear Plex",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --num:"Ear Plex Mono","Ear Plex",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;

  /* 움직임. 선형은 쓰지 않는다 — 살짝 지나쳤다 눌러앉아야 손맛이 난다. */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,.9,.28,1);
  --out:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1;
  touch-action:manipulation;
  overscroll-behavior:none;
  word-break:keep-all;      /* 한글은 어절 단위로 끊어야 읽힌다 */
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
canvas{display:block}

.app{
  max-width:460px;
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
  position:relative;
  overflow-x:hidden;   /* 세로는 막지 않는다 */
}
@media (max-width:480px){ .app{border:0} }

/* 진동이 막힌 기기(아이폰 사파리)를 위한 보상.
   화면 전체가 1.5px 내려앉았다 올라온다 — 손가락이 아니라 눈으로 느끼는 '툭'. */
.app.is-thump{animation:thump .13s var(--out)}
@keyframes thump{0%{transform:translateY(0)}40%{transform:translateY(1.5px)}100%{transform:translateY(0)}}

.screen{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding-top:env(safe-area-inset-top);
}
[hidden]{display:none !important}

/* ── 앱 이름 ───────────────────────────── */
/* 글자가 아니라 그린 것이다. 앰버가 검정 위에서 빛나는 것이 이 앱의 첫인상이다. */
.wm{
  display:block;
  width:112px;height:auto;
  color:var(--amber);
  filter:drop-shadow(0 0 12px rgba(245,166,35,.34)) drop-shadow(0 0 34px rgba(245,166,35,.16));
  transition:filter .5s var(--ease);
}
.wm--sm{width:62px}
/* 시험 소리가 울리는 동안 이름이 더 밝게 탄다 — 소리가 나고 있다는 표시 */
#s-start.is-sounding .wm{filter:drop-shadow(0 0 16px rgba(245,166,35,.7)) drop-shadow(0 0 48px rgba(245,166,35,.34))}

.masthead{padding:26px var(--pad) 12px}
/* 시작 화면의 머리는 두 칸이다: 왼쪽에 이름+날짜, 오른쪽 빈자리에 연습으로 들어가는 문.
   오른쪽 칸이 왼쪽보다 낮아서 줄 높이를 늘리지 않는다 —
   이 화면의 세로 리듬은 손으로 맞춰 둔 것이라 한 칸도 밀리면 안 된다. */
#s-start .masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.masthead__left{min-width:0}

/* 세로 44px 을 맞춘다(애플 권장 최소 타깃). 이 줄은 align-items:flex-end 라
   왼쪽 칸(이름 75px + 날짜)이 늘 더 높다 — 그래서 여기를 키워도 줄 높이가 변하지 않는다.
   시작 화면의 세로 리듬은 픽셀로 맞춰 둔 것이라 그 성질이 중요하다. */
.pgo{
  flex:none;
  display:flex;align-items:center;gap:8px;
  padding:11px 15px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--bg-2);
  font-size:13px;font-weight:700;letter-spacing:-.02em;color:var(--muted);
  transition:color .18s var(--ease),border-color .18s var(--ease),
             background .18s var(--ease),transform .45s var(--spring);
}
.pgo svg{width:20px;height:10px;color:var(--amber);opacity:.85;transition:opacity .18s var(--ease)}
.pgo:active{transform:scale(.94);color:var(--cream);border-color:rgba(245,166,35,.5);background:var(--bg-3)}
.pgo:active svg{opacity:1}
.masthead--tight{padding:20px var(--pad) 8px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.masthead__date{
  margin:12px 0 0;
  font-size:12.5px;
  letter-spacing:.09em;
  color:var(--muted-2);
  font-weight:500;
}
.masthead--tight .masthead__date{margin:0}

.lede{padding:22px var(--pad) 18px}
.lede__big{
  margin:0;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.05em;
  line-height:1.2;
}

/* 시작 화면의 파형 — 문제 화면에서 만날 바로 그 물건 */
.hero{
  position:relative;
  height:104px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 150% at 50% 50%,rgba(245,166,35,.055),transparent 62%),
    var(--bg-2);
  overflow:hidden;
  transition:background .35s var(--ease);
}
.hero__scope{position:absolute;inset:0;width:100%;height:100%}
.hero__hz{
  position:absolute;right:var(--pad);top:11px;
  font-size:11px;letter-spacing:.14em;font-weight:700;
  color:var(--amber);
  opacity:0;transform:translateY(-4px);
  transition:opacity .3s var(--ease),transform .45s var(--spring);
}
#s-start.is-sounding .hero{
  background:
    radial-gradient(120% 150% at 50% 50%,rgba(245,166,35,.2),transparent 66%),
    var(--bg-2);
}
#s-start.is-sounding .hero__hz{opacity:1;transform:none}

/* 소리 확인 — 첫 터치로 오디오를 깨우는 자리이기도 하다 */
.check{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px var(--pad);
  border-bottom:1px solid var(--line);
}
.check__t{margin:0;font-size:15px;font-weight:700;letter-spacing:-.03em}
.check__s{margin:4px 0 0;font-size:12.5px;color:var(--muted-2);line-height:1.5}
.check__btn{
  flex:none;width:54px;height:54px;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  color:var(--cream);
  background:var(--bg-2);
  transition:background .45s var(--spring),color .2s var(--ease),
             border-color .2s var(--ease),transform .45s var(--spring),box-shadow .35s var(--ease);
}
.check__btn svg{width:22px;height:22px;margin-left:2px}
.check__btn:active{transform:scale(.9)}
#s-start.is-sounding .check__btn{
  background:var(--amber);border-color:var(--amber);color:#16120B;
  transform:scale(1.06);
  box-shadow:0 0 0 1px rgba(245,166,35,.4),0 10px 34px -8px rgba(245,166,35,.7);
}

.stats{
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-soft);
}
.stats__cell{padding:15px var(--pad) 18px;border-right:1px solid var(--line-soft)}
.stats__cell:last-child{border-right:0}
#s-start .stats__cell:nth-child(2),
#s-start .stats__cell:nth-child(3){padding-left:16px}
.stats dt{font-size:11.5px;letter-spacing:.03em;color:var(--muted-2);font-weight:500}
.stats dd{margin:6px 0 0;font-size:29px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--cream)}
.stats dd i{font-style:normal;font-size:13px;font-weight:600;margin-left:2px;color:var(--muted-2)}
.stats .dd--word{font-size:17px;font-weight:700;letter-spacing:-.035em;padding-top:8px;line-height:1.15;color:var(--amber-hot)}
/* 기록이 없는 칸은 단위(단계)를 지운다 — '—단계'는 말이 되지 않는다 */
.stats dd.is-empty i{display:none}
.stats dd em{
  display:block;font-style:normal;
  margin-top:5px;
  font-size:11.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--muted-2);
  line-height:1.2;
}
/* 결과 화면에서는 이번 판과 겹치는 칸이 숨는다 — 칸 수가 판마다 달라진다 */
.stats--result{
  border-top:1px solid var(--line-soft);
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
}
.stats--result .stats__cell{padding-left:16px}
.stats--result .stats__cell.is-first{padding-left:var(--pad)}
#s-result .stats__cell{padding-bottom:calc(18px + var(--breathe) * .7)}
#s-result .foot{margin-top:auto;padding-top:calc(18px + var(--breathe) * .7)}

.foot{margin-top:auto;padding:0 var(--pad) calc(20px + env(safe-area-inset-bottom))}

/* 시작 화면 세로 리듬 — 남는 세로를 한 군데에 몰지 않고 나눠 준다 */
/* ⚠ 나눗수는 '숨이 실제로 붙는 자리 수'와 같아야 한다. 하나라도 어긋나면
   화면이 커질수록 어긋난 만큼 넘친다(414x896 에서 11px 넘치던 원인이 이것이었다).
     기록 칸 있을 때 : 머리 위 · 확인칸 위 · 확인칸 아래 · 기록칸 아래 · 발치 위 = 다섯
     기록 칸 없을 때 : 기록 칸이 사라지므로 넷
   747 / 641 은 숨을 0으로 두고 브라우저에서 직접 잰 내용의 키다
   (2026-09-11 글꼴을 IBM Plex 로 바꾸고 목숨 줄을 뺀 뒤 다시 잼 — 780/674 에서 33px 씩 줄었다).
   시작 화면 구조나 글꼴을 고치면 반드시 다시 재야 한다. */
#s-start{--breathe:clamp(0px, calc((100dvh - 747px) / 5), 24px)}
#s-start:has(#start-stats[hidden]){--breathe:clamp(0px, calc((100dvh - 641px) / 4), 40px)}
#s-start .masthead{padding-top:calc(26px + var(--breathe))}
#s-start .lede{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:0;padding-bottom:0;
}
#s-start .lede::before{content:"";flex:1 0 0;min-height:22px}
#s-start .lede::after{content:"";flex:1.1 0 0;min-height:26px}
#s-start .check{padding-top:calc(17px + var(--breathe));padding-bottom:calc(17px + var(--breathe))}
#s-start .stats__cell{padding-bottom:calc(18px + var(--breathe))}
#s-start .foot{margin-top:0;padding-top:calc(20px + var(--breathe))}

/* ── 큰 단추 ───────────────────────────── */
.bar{
  position:relative;
  display:block;
  width:100%;
  padding:20px 16px;
  font-size:16.5px;
  font-weight:800;
  letter-spacing:-.02em;
  border-radius:14px;
  transition:transform .5s var(--spring),box-shadow .35s var(--ease),background .2s var(--ease);
}
.bar--go{
  background:var(--cream);color:#14110D;
  box-shadow:0 12px 30px -14px rgba(255,249,240,.4);
}
.bar--again{
  background:var(--amber);color:#16120B;
  font-size:17.5px;padding:22px 16px;
  box-shadow:0 0 0 1px rgba(245,166,35,.22),0 16px 40px -14px rgba(245,166,35,.72);
}
.bar:active{transform:scale(.965)}
.bar--again:active{background:#E09317}

.foot__links{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:18px}
.link{
  white-space:nowrap;   /* 「처음부터 / 다시」로 갈라지면 무슨 말인지 한 번에 안 읽힌다 */
  font-size:13.5px;font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.link:active{color:var(--cream);border-bottom-color:var(--cream)}
.link--quiet{color:var(--muted-2);border-bottom-color:transparent}
/* 좁은 폰(320~360)에서는 네 개를 한 줄에 앉히려고 조금 줄인다.
   두 줄로 접히면 결과 화면이 21px 길어져서 화면 밖으로 나간다(320x661 에서 16px 넘쳤다). */
@media (max-width:360px){
  .foot__links{gap:13px}
  .link{font-size:12.5px}
}

/* 서명 — 필뮤 워드마크. 주인공이 아니므로 작게, 살짝 물러나게.
   동시에 다른 앱으로 가는 문이다(디자인.md: 앱 A → feelmu.com → 앱 B).
   그래서 눌리는 티가 나야 한다: 손을 대면 밝아지고 살짝 눌린다.
   옆의 작은 화살표는 「여기서 밖으로 나간다」는 표시다 — 새 창으로 열린다.
   패딩만큼 음수 마진을 줘서 손가락이 닿는 넓이만 키우고 줄 높이는 그대로 둔다. */
.sig{margin:22px 0 0;text-align:center;line-height:0;transition:opacity .18s var(--ease)}
.app.is-toasting .sig{opacity:0}
.sig__link{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 12px;margin:-9px -12px;border-radius:12px;
  color:rgba(255,249,240,.62);text-decoration:none;cursor:pointer;
  transition:color .18s var(--ease),transform .2s var(--spring);
}
.sig__link:active{color:var(--cream);transform:scale(.95)}
.sig__link:focus-visible{outline:2px solid rgba(245,166,35,.6);outline-offset:2px}
@media (hover:hover){.sig__link:hover{color:rgba(255,249,240,.92)}}
.sig__logo{
  display:block;
  width:76px;height:35px;
  color:inherit;
}
.sig__out{width:10px;height:10px;flex:none;opacity:.8}

/* ── 문제 ─────────────────────────────── */
.qhead{padding:18px var(--pad) 0}
.qhead__row{display:flex;align-items:center;justify-content:space-between;gap:11px;padding-bottom:13px}
/* 숫자가 시원하게 크다 — 이 화면에서 지금 내가 어디 있는지가 제일 먼저 읽혀야 한다 */
.qhead__count{display:flex;align-items:baseline;gap:4px;flex:none}
.qhead__count b{font-size:40px;font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--cream)}
.qhead__count i{font-style:normal;font-size:14px;font-weight:600;color:var(--muted-2)}
.qhead__cents{
  font-size:11.5px;letter-spacing:.05em;font-weight:700;color:var(--amber);
  border:1px solid rgba(245,166,35,.34);padding:5px 10px;border-radius:999px;
  background:rgba(245,166,35,.07);
  flex:none;
}
/* 단계가 넘어갈 때 숫자가 아래에서 스프링으로 올라온다 — 한 칸 내려왔다는 뜻 */
.qhead__count b.is-step{animation:step-in .55s var(--spring)}
@keyframes step-in{
  0%{transform:translateY(14px) scale(.86);opacity:0}
  100%{transform:none;opacity:1}
}

/* 사다리 — 왼쪽 끝이 1단계(120센트), 오른쪽 끝이 마지막 단계(3센트).
   빛나는 앰버 = 이 판에서 내가 맞혀서 내려온 깊이. 안 간 자리는 안 빛난다. */
.ladder{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.ladder svg{display:block;width:100%;height:auto}

.qask{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:22px var(--pad) 16px;
}
.qprompt{margin:0;font-size:23px;font-weight:800;letter-spacing:-.045em}
.qlives{display:flex;align-items:center;gap:9px;flex:none;padding-bottom:5px}
.qlives i{
  font-style:normal;font-size:11px;letter-spacing:.12em;font-weight:600;
  color:var(--muted-2);transition:color .2s var(--ease);
}
.qlives svg{display:block;overflow:visible}
.qlives.is-out i{color:var(--cream)}
/* 하나 잃는 순간: 줄 전체가 한 번 흔들리고, 잃은 칸이 커졌다가 꺼진다 */
.qlives.is-losing{animation:lives-shake .38s var(--out)}
@keyframes lives-shake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-6px)}
  42%{transform:translateX(5px)}
  68%{transform:translateX(-2px)}
}
/* 기본값이 opacity:0 인 것이 중요하다 — 동작을 끈 기기에서는 아예 안 보이고,
   그 아래 비어 있는 칸만 남는다. 숫자가 틀리게 보이지 않는다. */
.life-x{
  opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:life-out .58s cubic-bezier(.3,.7,.3,1);
}
@keyframes life-out{
  0%{opacity:1;transform:scale(1)}
  26%{opacity:1;transform:scale(2)}
  100%{opacity:0;transform:scale(2.2)}
}

.bands{
  border-top:1px solid var(--line);
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
}

/* ── 한 칸 = 소리 하나 ─────────────────────────────
   파형이 칸 전체를 채운다. 글자는 그 위에 얹힌다.
   파형이 주인공이라는 것을 자리로 말한다. */
.band{
  position:relative;
  flex:1;
  min-height:150px;
  padding:18px var(--pad);
  border-bottom:1px solid var(--line);
  user-select:none;
  overflow:hidden;
  isolation:isolate;
  transition:background .3s var(--ease),transform .5s var(--spring);
}
.band__scope{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* 소리가 나는 칸은 광원이 된다. 소리가 멎으면 꺼진다 — 그래서 여기 있다. */
.band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(78% 130% at 50% 50%,rgba(245,166,35,.24),rgba(245,166,35,.05) 46%,transparent 72%);
  opacity:0;
  transition:opacity .34s var(--ease);
}
.band.is-playing::before{opacity:1}
.band:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}
/* 손가락이 닿는 순간에도 칸이 반응한다 — 눌렀다는 것 자체가 먼저 보여야 한다 */
.band:not(.is-revealed):active{transform:scale(.985);background:rgba(255,249,240,.03)}

.band__id{
  position:relative;z-index:2;
  display:block;
  font-size:34px;font-weight:800;letter-spacing:-.045em;line-height:1;
  color:var(--muted-2);
  /* 파형이 밝게 지나가는 자리라 글자 뒤에 어둠을 조금 깔아 준다 */
  text-shadow:0 0 14px rgba(16,14,12,.95),0 0 5px rgba(16,14,12,.9);
  transition:color .3s var(--ease),text-shadow .3s var(--ease);
}
.band.is-playing .band__id{color:var(--amber-hot);text-shadow:0 0 18px rgba(245,166,35,.5)}

.band__meta{
  position:absolute;z-index:2;
  left:var(--pad);bottom:16px;right:64px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  min-height:18px;
}
.band__cta{
  font-size:12.5px;font-weight:600;color:var(--muted-2);
  text-shadow:0 0 12px rgba(16,14,12,.95);
  letter-spacing:-.02em;transition:color .2s var(--ease);
}
.band.is-playing .band__cta{color:var(--muted)}
.band.is-revealed .band__cta{display:none}
.band__hz{
  font-size:14px;font-weight:800;color:var(--cream);
  text-shadow:0 0 12px rgba(16,14,12,.95),0 0 4px rgba(16,14,12,.9);
  letter-spacing:-.01em;opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease),transform .5s var(--spring);
}
.band.is-revealed .band__hz{opacity:1;transform:none}
.band__tag{
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  text-shadow:0 0 12px rgba(16,14,12,.95),0 0 4px rgba(16,14,12,.9);
  color:var(--muted);opacity:0;transform:translateY(4px);
  transition:opacity .3s .05s var(--ease),transform .5s .05s var(--spring);
}
.band.is-revealed .band__tag{opacity:1;transform:none}

.replay{
  position:absolute;z-index:2;right:var(--pad);top:16px;
  width:44px;height:44px;
  display:grid;place-items:center;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(16,14,12,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:color .16s var(--ease),border-color .16s var(--ease),transform .45s var(--spring);
}
.replay svg{width:19px;height:19px}
.replay:active{transform:scale(.86);color:var(--cream);border-color:var(--cream)}
.band.is-revealed .replay{display:none}

/* ── 답을 누른 순간 ─────────────────────────────────────────────
   누른 칸 자체가 변한다. 시선이 거기 있으니 거기서 답이 나와야 한다.
     맞음   = 칸이 앰버로 터진다. 파형이 스프링으로 크게 퍼진다.
     틀림   = 칸이 꺼진다. 파형이 0선으로 눕는다. 짧게 흔들린다.
     정답칸 = 앰버 테두리 + 위 화살표 ("이쪽이 더 높았다")
   빨강은 쓰지 않는다 — 회사 색이 아니다. 켜짐/꺼짐으로 가른다. */
.band.is-hit{
  background:var(--amber);
  animation:band-hit .62s var(--spring);
}
.band.is-hit::before{opacity:0}
/* 맞은 순간 칸에서 빛이 한 번 퍼져 나간다. 소리가 퍼지는 그림이다. */
.band.is-hit::after{
  content:"";position:absolute;z-index:1;left:50%;top:50%;
  width:60px;height:60px;margin:-30px 0 0 -30px;
  border-radius:50%;
  border:2px solid rgba(255,249,240,.85);
  animation:ring-out .72s var(--out) forwards;
  pointer-events:none;
}
@keyframes band-hit{
  0%{transform:scale(.975)}
  48%{transform:scale(1.014)}
  100%{transform:scale(1)}
}
@keyframes ring-out{
  0%{transform:scale(.2);opacity:.9}
  100%{transform:scale(9);opacity:0}
}
.band.is-miss{
  background:#080706;
  animation:band-shake .38s var(--out);
}
.band.is-miss::before{opacity:0}
@keyframes band-shake{
  0%,100%{transform:translateX(0)}
  16%{transform:translateX(-8px)}
  38%{transform:translateX(7px)}
  60%{transform:translateX(-4px)}
  82%{transform:translateX(2px)}
}
.band.is-shown{background:rgba(245,166,35,.06);box-shadow:inset 4px 0 0 var(--amber)}
.band.is-shown::before{opacity:0}

.band.is-hit .band__id,
.band.is-hit .band__hz,
.band.is-hit .band__tag{
  color:#16120B;
  text-shadow:0 0 12px rgba(245,166,35,.98),0 0 4px rgba(245,166,35,.95);
}
.band.is-hit .band__tag{color:rgba(22,18,11,.72)}
.band.is-shown .band__id{color:var(--amber-hot)}
.band.is-miss .band__id{color:rgba(255,249,240,.28)}
.band.is-miss .band__hz{color:rgba(255,249,240,.55)}
.band.is-miss .band__tag{color:rgba(255,249,240,.32)}

/* 체크·엑스·화살표. 전부 손으로 그은 SVG 선이다 (이모지 아님). */
.band__verdict{
  position:absolute;z-index:2;right:var(--pad);top:16px;
  width:44px;height:44px;display:none;
}
.band__verdict svg{display:block;width:44px;height:44px}
.band__verdict path{display:none}
.band.is-hit .band__verdict,
.band.is-miss .band__verdict,
.band.is-shown .band__verdict{display:block;animation:mark-in .5s var(--spring)}
.band.is-hit .v-check{display:block;stroke:#16120B}
.band.is-miss .v-cross{display:block;stroke:rgba(255,249,240,.4)}
.band.is-shown .v-up{display:block;stroke:var(--amber)}
@keyframes mark-in{from{transform:scale(.3);opacity:0}}

.qfoot{margin-top:auto;padding:18px var(--pad) calc(24px + env(safe-area-inset-bottom))}
/* 두 줄 자리를 늘 비워 둔다 — 판정 문구가 길어져도 칸이 덜컥 움직이지 않게 */
.qstatus{
  margin:0;text-align:center;
  font-size:13.5px;font-weight:600;color:var(--muted-2);
  letter-spacing:-.01em;
  min-height:42px;
  display:flex;flex-direction:column;justify-content:center;
}
.qstatus.is-hit{color:var(--muted)}
.qstatus b{color:var(--cream)}
.qstatus em{
  font-style:normal;display:block;margin-top:3px;
  font-weight:800;color:var(--amber);letter-spacing:.02em;
}
.qstatus span{animation:status-in .45s var(--out)}
@keyframes status-in{from{opacity:0;transform:translateY(5px)}}

/* ── 결과 ─────────────────────────────── */
/* 이 화면이 하는 일은 둘뿐이다.
   (1) 이번 판이 어디까지 갔나 — 큰 숫자 하나(단계)
   (2) 「한 번 더」를 누르게 하기 — 앰버 막대 하나
   그래서 큰 것도 하나, 색이 찬 덩어리도 하나다. */
/* --base = 숨을 뺀 내용의 키. 브라우저에서 직접 잰 값이다
   (2026-09-11 글꼴을 IBM Plex 로 바꾼 뒤 320~460 폭 전부에서 다시 잼 — 제일 큰 값을 쓴다).
   내용이 줄고 느는 자리가 둘 있어서(센트 줄 · 기록 칸) 경우마다 따로 잰다.
   결과 화면 구조나 글꼴을 고치면 다시 재야 한다. */
#s-result{--base:720px}
#s-result:has(#res-sub:not(:empty)){--base:752px}
#s-result:has(#res-stats[hidden]){--base:616px}
#s-result:has(#res-stats[hidden]):has(#res-sub:not(:empty)){--base:648px}
/* ⚠ 나눗수는 자리 수가 아니라 '아래에서 숨에 곱하는 값의 합'이다.
   머리 2.3(위 1 + 아래 1.3) + 파형 아래 1.3 + 사다리 아래 1.3 + 기록칸 0.7 + 발치 0.7 = 6.3.
   6으로 나누던 것이 화면이 커질수록 넘치던 원인이었다(375x812 에서 4px, 414x896 에서 11px). */
#s-result{--breathe:clamp(0px, calc((100dvh - var(--base)) / 6.3), 48px)}
.verdict{
  position:relative;
  padding:calc(14px + var(--breathe)) var(--pad) calc(14px + var(--breathe) * 1.3);
}
.verdict__label{
  position:relative;z-index:2;margin:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13px;color:var(--muted-2);font-weight:600;letter-spacing:.04em;
}
.verdict__label .is-new{color:var(--amber);font-weight:800}
.verdict__label em{font-style:normal;font-weight:600;color:var(--muted-2);letter-spacing:-.01em}
.verdict__label em:empty{display:none}
/* 이 화면에서 제일 큰 글씨 — 하나뿐이다 */
.verdict__run{
  position:relative;z-index:2;
  margin:8px 0 0;
  font-size:68px;font-weight:800;letter-spacing:-.065em;line-height:1;
  color:var(--cream);
}
.verdict__run i{font-style:normal;font-size:20px;font-weight:700;color:var(--muted-2);margin-left:6px;letter-spacing:-.02em}
.verdict__sub{position:relative;z-index:2;margin:12px 0 0;font-size:13px;color:var(--muted);font-weight:500}
.verdict__sub:empty{display:none}

/* 결과 숫자는 늘 스프링으로 부풀며 앉는다 (살짝 지나쳤다 돌아온다) */
.verdict__run span{display:inline-block;transform-origin:0% 100%;animation:run-in .8s var(--spring)}
@keyframes run-in{0%{transform:scale(.62);opacity:0}100%{transform:none;opacity:1}}

/* 새 기록일 때만 일어나는 일 — 숫자가 앰버로 타고, 빛이 두 번 퍼진다.
   아껴 쓴다. 매 판 일어나면 아무것도 특별하지 않다. */
.verdict.is-new .verdict__run{color:var(--amber-hot);text-shadow:0 0 22px rgba(245,166,35,.5)}
.verdict__ring{display:none}
/* 큰 숫자에서 빛이 두 번 퍼져 나간다. 소리가 퍼지는 그림과 같은 말이다.
   퍼지는 자리를 verdict 칸 안으로 잘라 둔다 — 화면을 가로지르면 무슨 선인지 알 수 없다. */
.verdict{overflow:hidden}
.verdict.is-new .verdict__ring{
  display:block;position:absolute;z-index:1;
  left:calc(var(--pad) + 34px);top:64%;
  width:70px;height:70px;margin:-35px 0 0 -35px;
  border-radius:50%;
  border:2px solid rgba(255,210,122,.85);
  animation:ring-big 1.1s var(--out) forwards;
  pointer-events:none;
}
.verdict.is-new .verdict__ring--2{animation-delay:.2s;border-color:rgba(245,166,35,.5)}
@keyframes ring-big{
  0%{transform:scale(.2);opacity:0}
  12%{opacity:1}
  100%{transform:scale(5.2);opacity:0}
}

/* 결과 화면의 파형 — 이번 판에서 내가 갈라낸 두 소리.
   시작 화면의 hero, 문제 화면의 칸과 같은 물건이다. 세 화면이 같은 그림으로 이어진다. */
.proof{
  position:relative;
  height:118px;
  margin-bottom:calc(14px + var(--breathe) * 1.3);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 150% at 50% 50%,rgba(245,166,35,.07),transparent 64%),
    var(--bg-2);
  overflow:hidden;
}
.proof__scope{position:absolute;inset:0;width:100%;height:100%}

.ladderbox{padding:0 0 calc(14px + var(--breathe) * 1.3)}
.ladderbox__ends{
  display:flex;justify-content:space-between;
  padding:9px var(--pad) 0;
  font-size:11px;letter-spacing:.04em;color:var(--muted-2);font-weight:600;
}

/* ── 연습 ─────────────────────────────────────────────────────
   게임 화면과 같은 물건들로 지었다: 같은 파형, 같은 앰버 네모, 같은 큰 숫자.
   다른 것은 하나다 — 여기서는 숫자가 판정이 아니라 내 손에 달려 있다. */
.phead{display:flex;align-items:center;gap:2px;padding:calc(8px + env(safe-area-inset-top)) 8px 0}
.pback{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  color:var(--muted);
  transition:color .16s var(--ease),transform .45s var(--spring);
}
.pback svg{width:22px;height:22px}
.pback:active{transform:scale(.86);color:var(--cream)}
.phead__t{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--cream)}

/* 이 화면의 주인공은 '몇 센트'가 아니라 '그게 어느 자리인가'다.
   센트는 이 앱을 처음 켠 사람에게 아무 뜻이 없는 단위라 큰 자리를 내줄 수 없다.
   그래서 크기 순서가 곧 읽는 순서다 — 가정(작게) → 등급·상위 %(크게) → 센트와 건반(작게).
   등급 이름과 상위 %는 게임 결과 화면과 같은 표(quiz.js 의 RANKS)에서 온다. */
.pnum{position:relative;overflow:hidden;padding:13px var(--pad) 16px}
.pnum__if{
  position:relative;z-index:2;margin:0;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--muted-2);
}
.pnum__rank{
  position:relative;z-index:2;margin:8px 0 0;
  display:flex;align-items:baseline;gap:11px;
  font-size:38px;font-weight:800;letter-spacing:-.055em;line-height:1.06;color:var(--cream);
  white-space:nowrap;
}
.pnum__rank i{
  font-style:normal;flex:none;
  font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--amber-hot);
}
/* 센트는 지운 것이 아니라 내려왔다. 옆에 붙는 한 줄은 지어낸 말이 아니라
   100센트 = 반음 = 옆 건반 하나에서 나눗셈 한 번으로 나온 값이다(practice.js 의 keyPhrase). */
.pnum__cents{
  position:relative;z-index:2;margin:9px 0 0;
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--muted-2);
}
.pnum__cents b{font-size:16px;font-weight:800;letter-spacing:-.04em;color:var(--muted)}
.pnum__cents span{margin-left:2.5px}
.pnum__cents em{font-style:normal}
.pnum__cents em:not(:empty)::before{content:"  ·  ";opacity:.55}
/* 기록을 줄인 순간에만 — 등급이 앰버로 탄다. 빛이 퍼지는 것은 아래 파형 칸에서 한다. */
.pnum.is-new .pnum__rank{color:var(--amber-hot);text-shadow:0 0 22px rgba(245,166,35,.5)}

/* 두 파형이 동시에 살아 흐른다. 크림 = 기준음, 앰버 = 내가 올린 음.
   아래 두 Hz 글자가 그 두 선과 같은 색이다 — 범례를 따로 그리지 않아도 읽힌다. */
.pscope{
  position:relative;flex:1;min-height:124px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 150% at 50% 50%,rgba(245,166,35,.06),transparent 64%),
    var(--bg-2);
  overflow:hidden;
}
.pscope__c{position:absolute;inset:0;width:100%;height:100%}
.pscope__hz{
  position:absolute;bottom:11px;z-index:2;
  display:flex;align-items:baseline;gap:5px;
  text-shadow:0 0 13px rgba(16,14,12,.96),0 0 4px rgba(16,14,12,.9);
}
.pscope__hz i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;opacity:.72}
.pscope__hz b{font-size:14px;font-weight:800;letter-spacing:-.02em}
.pscope__hz em{font-style:normal;font-size:10.5px;font-weight:600;opacity:.62;margin-left:-2px}
.pscope__hz--ref{left:var(--pad);color:rgba(255,249,240,.66)}
.pscope__hz--mov{right:var(--pad);color:var(--amber)}
/* 기록을 줄인 순간에만 빛이 두 번 퍼진다. 파형 칸이 넓어서 고리가 고리로 읽힌다.
   아껴 쓴다 — 매번 일어나면 아무것도 특별하지 않다. */
.pscope__ring{display:none}
.pscope.is-new .pscope__ring{
  display:block;position:absolute;z-index:1;
  left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;
  border-radius:50%;
  border:2px solid rgba(255,210,122,.85);
  animation:ring-big 1.1s var(--out) forwards;
  pointer-events:none;
}
.pscope.is-new .pscope__ring--2{animation-delay:.2s;border-color:rgba(245,166,35,.5)}

/* ── 슬라이더 ───────────────────────────────────────────────
   계기의 눈금자다. 1·2·5·10·20·50센트에 눈금이 서 있고,
   지난 기록 자리에는 점선 네모가 하나 더 선다 — 게임 사다리의 역대 최고 표시와 같은 물건이다.
   손잡이가 앰버 네모인 것도 목숨 칸·사다리 표시와 같은 말을 쓰기 위해서다. */
.prail{position:relative;padding:10px var(--pad) 25px}
.prail::before{
  content:"";position:absolute;z-index:0;
  left:calc(var(--pad) + 11px);right:calc(var(--pad) + 11px);top:31px;height:1px;
  background:rgba(255,249,240,.2);
}
.prail__in{
  position:relative;z-index:2;
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:44px;margin:0;background:none;
}
.prail__in:focus{outline:none}
.prail__in:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--cream)}
.prail__in::-webkit-slider-runnable-track{height:44px;background:none;border:0}
.prail__in::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:11px;
  background:var(--amber);border:0;border-radius:3px;
  box-shadow:0 0 0 5px rgba(245,166,35,.2),0 0 20px rgba(245,166,35,.6);
}
.prail__in::-moz-range-track{height:44px;background:none;border:0}
.prail__in::-moz-range-thumb{
  width:22px;height:22px;
  background:var(--amber);border:0;border-radius:3px;
  box-shadow:0 0 0 5px rgba(245,166,35,.2),0 0 20px rgba(245,166,35,.6);
}
.prail__ticks{position:absolute;z-index:1;left:var(--pad);right:var(--pad);top:0;bottom:0;pointer-events:none}
.tick{position:absolute;top:38px;transform:translateX(-50%);text-align:center}
.tick i{display:block;width:1px;height:6px;margin:0 auto;background:rgba(255,249,240,.24)}
.tick b{
  display:block;margin-top:3px;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--muted-2);
}
/* 지난 기록 — 다음 목표가 눈금 위에 서 있다.
   점선 네모는 게임 사다리의 역대 최고 표시와 같은 물건이다(SVG 로 그어야 모서리가 안 깨진다). */
.tick--rec{top:5px}
.tick--rec svg{display:block;width:12px;height:26px}

.pfoot{margin-top:auto;padding:18px var(--pad) calc(20px + env(safe-area-inset-bottom))}
.pnote{
  margin:15px 0 0;text-align:center;min-height:20px;
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--muted-2);
}
.pnote.is-rec{color:var(--muted)}
.pnote i{font-style:normal;font-size:11px;letter-spacing:.1em;font-weight:600;margin-right:9px}
.pnote b{font-size:17px;font-weight:800;letter-spacing:-.04em;color:var(--cream)}
/* 단추를 누른 순간 이 줄이 잠깐 대답한다 (떠 있는 알림 대신 — 그건 단추를 가린다) */
.pnote.is-flash{color:var(--cream);font-weight:700;animation:status-in .45s var(--out)}
.pnote.is-strong{color:var(--amber);font-weight:800;letter-spacing:.03em}

/* ── 토스트 ───────────────────────────── */
.toast{
  position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(8px) scale(.94);
  background:var(--cream);color:#14110D;
  font-size:13px;font-weight:700;
  padding:11px 18px;border-radius:999px;
  white-space:nowrap;
  opacity:0;transition:opacity .2s var(--ease),transform .5s var(--spring);
  z-index:20;
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

/* 공유 — 로컬 http 접속처럼 클립보드가 막힌 곳을 위한 수동 복사창 */
.sharebox{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--bg-2)}
.sharebox__t{margin:0 0 8px;font-size:11.5px;letter-spacing:.03em;color:var(--muted-2);font-weight:600}
.sharebox__ta{
  display:block;width:100%;border:0;background:none;resize:none;
  font-family:var(--font);font-size:13.5px;line-height:1.65;color:var(--cream);
  font-weight:500;padding:0;
}
.sharebox__ta:focus{outline:none}

/* 큰 화면에서 세로가 남을 때 숨쉴 틈 */
@media (min-height:860px){
  .band{min-height:172px}
  .hero{height:120px}
  /* 시작 화면의 파형 칸이 104 → 120 으로 커졌다. 기준값도 그만큼 올려야 넘치지 않는다.
     763 / 657 은 이 구간에서 다시 잰 값이다. */
  #s-start{--breathe:clamp(0px, calc((100dvh - 763px) / 5), 24px)}
  #s-start:has(#start-stats[hidden]){--breathe:clamp(0px, calc((100dvh - 657px) / 4), 40px)}
}
/* 낮은 화면에서는 큰 글씨와 파형 칸부터 줄인다. 여기서 줄인 만큼 --base 도 같이 내려간다.
   ⚠ 경계가 780 인 이유: 700 으로 두면 701~780 구간이 큰 판을 쓰면서 화면보다 길어졌다 —
     375x701 에서 78px 이 넘쳤다(2026-09-11 실측). 화면이 780 보다 낮으면 작은 판을 쓴다.
     큰 판의 내용 키는 지금 747px 이라 781 부터는 여유가 있다(그때는 780px 이라 딱 맞았다).
     실제로 이 구간은 흔하다: 812 짜리 폰이라도 사파리 주소창·도구막대가 있으면 dvh 가 730 쯤이다. */
@media (max-height:780px){
  :root{--pad:20px}
  .wm{width:96px}
  .lede__big{font-size:28px}
  .hero{height:80px}
  .check__s{font-size:12px}
  .band{min-height:118px}
  .qhead__count b{font-size:32px}
  .qask{padding-top:16px;padding-bottom:12px}
  .verdict__run{font-size:54px}
  .proof{height:66px}
  .masthead--tight{padding-top:14px;padding-bottom:6px}
  .stats dd{font-size:25px}
  .bar{padding:17px 16px;font-size:15.5px}
  .bar--again{padding:18px 16px;font-size:16.5px}
  .sig{margin-top:14px}
  .sig__logo{width:64px;height:29px}
  #s-result{--base:636px}
  #s-result:has(#res-sub:not(:empty)){--base:668px}
  #s-result:has(#res-stats[hidden]){--base:535px}
  #s-result:has(#res-stats[hidden]):has(#res-sub:not(:empty)){--base:567px}
  #s-start .masthead{padding-top:18px;padding-bottom:8px}
  .masthead__date{margin-top:9px;font-size:12px}
  #s-start .lede::before{min-height:10px}
  #s-start .lede::after{min-height:14px}
  #s-start .check{padding-top:13px;padding-bottom:13px}
  .check__btn{width:48px;height:48px}
  .stats__cell{padding-top:12px;padding-bottom:14px}
  .foot__links{margin-top:12px}
  #s-start{--breathe:clamp(0px, calc((100dvh - 622px) / 5), 20px)}
  #s-start:has(#start-stats[hidden]){--breathe:clamp(0px, calc((100dvh - 521px) / 4), 34px)}
  /* 연습 화면 — 작은 폰에서는 큰 숫자와 파형 칸부터 줄인다 */
  .pnum{padding:9px var(--pad) 12px}
  .pnum__rank{margin-top:6px;font-size:31px}
  .pnum__rank i{font-size:15px}
  .pnum__cents{margin-top:7px;font-size:12px}
  .pnum__cents b{font-size:15px}
  .pscope{min-height:98px}
  .prail{padding-top:6px;padding-bottom:22px}
  .pfoot{padding-top:14px}
  .pnote{margin-top:12px}
}
/* 아주 낮은 화면.
   320x568(아이폰 SE 1세대)만이 아니다 — 375x667 폰이라도 사파리 주소창·도구막대가 자리를
   차지하면 100dvh 가 550~620 까지 내려간다. 그 구간에서는 숨을 0으로 줄여도 내용이 화면보다
   길어서(시작 622 · 결과 636 > 568) 숨이 아니라 내용 자체를 한 번 더 줄여야 한다.
   경계를 660 으로 둔 이유: 661 부터는 위 (max-height:780px) 의 기준값으로 딱 들어맞는다.
   그 위 (max-height:780px) 블록보다 아래에 있어야 덮어쓴다. */
@media (max-height:660px){
  /* 이 구간에서 다시 잰 값 (2026-09-11, 글꼴 IBM Plex) */
  #s-start{--breathe:clamp(0px, calc((100dvh - 524px) / 5), 20px)}
  #s-start:has(#start-stats[hidden]){--breathe:clamp(0px, calc((100dvh - 435px) / 4), 34px)}
  #s-result{--base:518px}
  #s-result:has(#res-sub:not(:empty)){--base:547px}
  #s-result:has(#res-stats[hidden]){--base:430px}
  #s-result:has(#res-stats[hidden]):has(#res-sub:not(:empty)){--base:458px}

  .wm{width:84px}
  .wm--sm{width:52px}
  .lede__big{font-size:24px}
  .hero{height:64px}
  .check__t{font-size:14px}
  .check__s{font-size:11.5px}
  .check__btn{width:44px;height:44px}
  .stats dd{font-size:21px;margin-top:4px}
  .stats .dd--word{font-size:15px;padding-top:6px}
  .stats dd em{margin-top:3px}
  .stats__cell{padding-top:8px;padding-bottom:10px}
  .bar{padding:13px 16px;font-size:15px}
  .bar--again{padding:14px 16px;font-size:16px}
  .sig{margin-top:9px}
  .sig__logo{width:54px;height:25px}
  /* 로고가 25px 로 줄어 손가락 자리가 43px 이 됐다 — 애플 권장 44px 에 1px 모자란다.
     패딩을 0.5px 씩 늘리고 음수 마진도 같이 늘려 **보이는 자리는 그대로** 두고 넓이만 채운다. */
  .sig__link{padding-top:9.5px;padding-bottom:9.5px;margin-top:-9.5px;margin-bottom:-9.5px}
  .foot{padding-bottom:calc(13px + env(safe-area-inset-bottom))}
  .foot__links{margin-top:9px}

  #s-start .masthead{padding-top:12px;padding-bottom:6px}
  .masthead__date{margin-top:7px}
  #s-start .lede::before{min-height:6px}
  #s-start .lede::after{min-height:9px}
  #s-start .check{padding-top:10px;padding-bottom:10px}

  .masthead--tight{padding-top:10px;padding-bottom:4px}
  .verdict{padding-top:calc(10px + var(--breathe));padding-bottom:calc(10px + var(--breathe) * 1.3)}
  .verdict__run{font-size:44px}
  .verdict__run i{font-size:17px}
  .verdict__sub{margin-top:8px}
  .proof{height:52px;margin-bottom:calc(10px + var(--breathe) * 1.3)}
  .ladderbox{padding-bottom:calc(10px + var(--breathe) * 1.3)}
  .ladderbox__ends{padding-top:7px}

  .pnum{padding:7px var(--pad) 10px}
  .pnum__rank{margin-top:5px;font-size:27px}
  .pnum__rank i{font-size:13.5px}
  .pnum__cents{margin-top:6px}
  .prail{padding-top:4px;padding-bottom:18px}
  .pfoot{padding-top:11px}
  .pnote{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}


/* ── 글꼴 조판 보정 ──────────────────────────────────────
   숫자가 이 앱의 주인공이다. 숫자가 서는 자리에만 등폭 글꼴을 따로 물린다.
   한글이 섞인 자리(등급 이름 등)는 --num 을 물려도 Mono 에 한글이 없어
   Sans KR 로 떨어진다 — 그래서 섞여 보이지 않는다. */
.qhead__count b,.verdict__run,.stats dd:not(.dd--word),
.pscope__hz b,.pnote b,.ladderbox__ends{font-family:var(--num)}
/* 「6.7센트」 알약을 등폭에서 뺀다. 등폭은 마침표에도 숫자 한 칸을 통째로 주는데
   그 위에 자간(.05em)까지 얹혀서 「6 . 7센트」처럼 세 토막으로 읽혔다.
   이 알약은 자릿수를 맞춰 세워 둘 필요가 없다 — 오른쪽 끝에 혼자 떠 있고 폭도 매번 변한다.
   연습 화면의 센트 줄(.pnum__cents b)도 같은 증상이라 같이 뺐다 — 자간이 음수(-.04em)라
   덜 벌어졌을 뿐, 「8 . 2센트」로 읽히는 것은 똑같았다. 여기도 큰 숫자 밑의 보조 줄이라
   자릿수를 세워 둘 이유가 없다.
   (같은 이유로 .stats dd em 도 글 글꼴로 되돌려 놨다.) */
/* 기록 칸의 둘째 줄(「9월 11일」·「3판」·「아직 없음」)은 숫자가 아니라 말이다.
   등폭 글꼴에서는 띄어쓰기까지 등폭이라 「9월  11일」처럼 사이가 벌어진다 — 글 글꼴로 되돌린다. */
.stats dd em{font-family:var(--font)}

/* IBM Plex 는 Pretendard 보다 글자폭이 넓다 — 원본의 센 음수 자간을 조금 풀어 준다.
   숫자는 등폭이라 자릿수가 바뀌어도 자리가 안 흔들린다. 계기판의 성질이다. */
.verdict__run{letter-spacing:-.035em}
.qhead__count b{letter-spacing:-.03em}
.stats dd{letter-spacing:-.025em}
.lede__big{letter-spacing:-.035em}
.qprompt{letter-spacing:-.03em}