/* 타자 속도 측정 — 장르: 옛 타자기 · 검은 칠 몸체 · 놋쇠 테두리 둥근 글쇠 · 크림색 종이 · 검정/빨강 두 색 리본
 * 틀린 글자가 빨갛게 찍히는 건 옛 타자기의 두 색 리본(검정·빨강)에서 가져옴
 * 움직임: 첫 화면 종이에 글자가 한 자씩 찍히고 그 글쇠가 눌림 / 칠 때 다음에 누를 글쇠가 놋쇠 빛으로 / 한 문장 끝나면 종이가 한 줄 올라감(줄 바꿈)
 *         결과는 종이가 기계에서 빠져나오듯 올라오고, 타수 숫자가 계수기처럼 굴러 멈추고, 많이 친 글쇠가 차례로 빛남 */
:root {
  --desk: #22201c;
  --desk-2: #2c2924;
  --enamel: #141311;
  --brass: #c9a35b;
  --brass-2: #8a6d38;
  --paper: #f4ecd8;
  --paper-2: #e9dec3;
  --ink: #262320;
  --red: #c0352b;
  --ghost: #a99d82;
  --chalk: #efe6d2;
  --type: "Courier New", "Batang", "바탕", "AppleMyungjo", "Noto Serif KR", serif;
  --color-bg: var(--desk);
  --color-text: var(--chalk);
  --color-text-secondary: #b7ab93;
  --color-border: #4a443a;
  --brand: var(--brass);
  color-scheme: dark;
}
html, body { background: var(--desk); color: var(--chalk); }
body { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 7px), radial-gradient(ellipse at 50% -10%, #3a342b, transparent 60%); }
.tw { max-width: 980px; margin: 0 auto; padding: 0 16px 40px; }
.tw-v { max-width: 480px; margin: 0 auto; padding-top: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 첫 화면 타자기 ---------- */
.machine { position: relative; padding-top: 8px; }
.paper { position: relative; background: var(--paper); color: var(--ink); background-image: linear-gradient(90deg, transparent 22px, rgba(192, 53, 43, 0.25) 22px 23px, transparent 23px), repeating-linear-gradient(0deg, transparent 0 29px, rgba(38, 35, 32, 0.06) 29px 30px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 40px rgba(160, 130, 80, 0.18); }
.paper--hero { width: 78%; height: 92px; margin: 0 auto; padding: 18px 16px 0 34px; border-radius: 3px 3px 0 0; }
.paper__line { margin: 0; min-height: 24px; font: 700 17px/24px var(--type); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; }
.paper__line::after { content: ""; display: inline-block; width: 2px; height: 18px; margin-left: 2px; vertical-align: -3px; background: var(--red); animation: tw-blink 1s steps(2) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
.carriage { position: relative; display: flex; align-items: center; height: 22px; margin: -4px 4% 0; border-radius: 11px; background: linear-gradient(#3b3833, #0d0c0b); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 3px 0 #000; }
.carriage b { flex: 1; height: 6px; margin: 0 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, #6d6658 0 2px, #2b2824 2px 5px); }
.carriage i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f1d79a, var(--brass) 45%, var(--brass-2)); box-shadow: 0 2px 0 #000; }
.tw-body { position: relative; margin-top: 4px; padding: 14px 10px 14px; border-radius: 14px 14px 22px 22px; background: linear-gradient(#25231f, var(--enamel)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 0 #000; }
.ribbon { display: flex; justify-content: space-between; margin: 0 22px 10px; }
.ribbon i { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--ink) 0 50%, var(--red) 50% 100%); box-shadow: inset 0 0 0 9px #1c1a17, 0 0 0 2px var(--brass-2); animation: tw-spool 4s linear infinite; }
@keyframes tw-spool { to { transform: rotate(360deg); } }
.hero-keys { pointer-events: none; }

/* ---------- 글쇠(둥근 놋쇠 테) ---------- */
.kb { display: grid; gap: 6px; }
.kb__row { display: flex; justify-content: center; gap: 4px; }
.key { position: relative; display: grid; place-items: center; width: min(34px, calc((100% - 36px) / 10)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fbf4e2, #d9ccb0 70%); box-shadow: 0 0 0 2px var(--brass-2), 0 0 0 3.5px #0a0908, 0 4px 0 2px #000; color: var(--ink); font: 800 13px/1 var(--font-sans); transition: transform 0.08s, box-shadow 0.08s; }
.key i { font-style: normal; }
.key--space { width: min(190px, 52%); aspect-ratio: auto; height: min(30px, 8vw); border-radius: 14px; }
.key.is-hit, .key.is-next { transform: translateY(3px); box-shadow: 0 0 0 2px var(--brass), 0 0 0 3.5px #0a0908, 0 1px 0 2px #000, 0 0 14px 3px rgba(201, 163, 91, 0.6); }
.kb--live { margin-top: 14px; padding: 12px 6px 14px; border-radius: 14px; background: var(--enamel); box-shadow: 0 6px 0 #000; }
.kb--live .key.is-next { background: radial-gradient(circle at 40% 35%, #fff3c9, #f0c96a 70%); }

/* ---------- 첫 화면 글 ---------- */
.tw-title { margin: 22px 0 0; font: 900 42px/1.05 var(--font-sans); letter-spacing: -0.04em; color: var(--chalk); }
.tw-lead { margin: 8px 0 0; font: 600 15px/23px var(--font-sans); color: var(--color-text-secondary); word-break: keep-all; }
.tw-chal { display: grid; gap: 6px; margin-top: 16px; padding: 12px 14px 14px; border: 2px dashed var(--brass); border-radius: 14px; background: #2e2a22; font: 600 14px/21px var(--font-sans); }
.tw-chal b { font: 900 19px/1.2 var(--font-sans); color: var(--brass); }
.tw-btns { display: grid; gap: 10px; margin-top: 16px; }
.tw-go { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 0 16px; border: 2px solid #000; border-radius: 14px; background: var(--brass); color: #1d1608; box-shadow: 0 5px 0 #000; font: 800 16px/1.2 var(--font-sans); text-align: left; cursor: pointer; transition: transform 0.12s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.12s; }
.tw-go:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 #000; }
.tw-go__k { padding: 6px 9px; border-radius: 9px; background: rgba(0, 0, 0, 0.14); font: 900 14px/1 var(--font-sans); white-space: nowrap; }
.tw-go--sub { background: var(--desk-2); color: var(--chalk); }
.tw-go--sub .tw-go__k { background: rgba(255, 255, 255, 0.08); color: var(--brass); }
.tw-rec { margin: 12px 0 0; font: 700 14px/20px var(--font-sans); color: var(--color-text-secondary); }

/* ---------- 치는 화면 ---------- */
.gauge { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px 12px 0 0; background: var(--enamel); font: 800 13px/18px var(--font-sans); color: var(--color-text-secondary); }
.gauge #modeLabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gauge b { color: var(--brass); font: 900 17px/1 var(--type); }
.gauge__cpm { padding: 4px 9px; border-radius: 8px; background: #000; }
.paper--play { min-height: 180px; padding: 12px 14px 16px 34px; border-radius: 0 0 4px 4px; cursor: text; }
.paper--play.is-return { animation: tw-return 0.32s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes tw-return { 0% { transform: translateX(-14px); } 60% { transform: translateX(3px); } 100% { transform: none; } }
.paper__done { display: grid; gap: 0; max-height: 96px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); }
.done { margin: 0; font: 700 14px/22px var(--type); color: var(--ink); white-space: pre-wrap; word-break: break-all; animation: tw-up 0.3s ease-out; }
@keyframes tw-up { from { transform: translateY(16px); opacity: 0; } }
.done .c2 { color: var(--red); }
.target { margin: 8px 0 0; font: 700 20px/32px var(--type); letter-spacing: 0.03em; word-break: keep-all; overflow-wrap: anywhere; }
.c { position: relative; display: inline-block; min-width: 0.3em; }
.c0 { color: var(--ghost); }
.c1 { color: var(--ink); animation: tw-strike 0.12s ease-out; }
.c2 { color: var(--red); text-decoration: underline wavy var(--red); text-underline-offset: 5px; animation: tw-strike 0.12s ease-out; transform: rotate(-3deg); }
.c3 { color: var(--ink); opacity: 0.45; animation: tw-pend 0.8s ease-in-out infinite alternate; }
@keyframes tw-strike { 0% { transform: translateY(-4px) scale(1.2); opacity: 0.4; } }
@keyframes tw-pend { to { opacity: 0.2; } }
.c.is-cur::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--red); animation: tw-blink 1s steps(2) infinite; }
.typer { display: block; margin-top: 10px; }
.typer input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 4px; border: 0; border-bottom: 2px dashed rgba(38, 35, 32, 0.4); border-radius: 0; background: transparent; color: var(--ink); font: 700 18px/1 var(--type); letter-spacing: 0.03em; caret-color: var(--red); }
.typer input:focus { outline: none; border-bottom-color: var(--red); }
.tw-hint { margin: 10px 0 0; font: 600 13px/19px var(--font-sans); color: var(--color-text-secondary); word-break: keep-all; }
.tw-act { margin-top: 12px; }

/* ---------- 결과: 기계에서 빠져나온 종이 ---------- */
.tw-sheet { position: relative; padding: 16px 16px 14px; border-radius: 4px; background: var(--paper); color: var(--ink); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.35), inset 0 0 50px rgba(160, 130, 80, 0.2); background-image: radial-gradient(circle at 50% 0, var(--desk) 5px, transparent 5.5px); background-size: 18px 10px; background-repeat: repeat-x; }
.tw-sheet.is-fresh { animation: tw-eject 0.7s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes tw-eject { 0% { transform: translateY(60px) scaleY(0.4); transform-origin: top; opacity: 0; } 100% { transform: none; } }
.tw-sheet__top { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0 8px; border-bottom: 1px dashed rgba(38, 35, 32, 0.35); font: 800 12px/16px var(--font-sans); letter-spacing: 0.04em; color: #6b604c; }
.tw-sheet__big { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 14px 0 6px; }
.odo { font: 900 68px/1 var(--type); color: var(--ink); }
.odo__roll { display: inline-flex; gap: 3px; }
.odo__col { display: inline-block; height: 1em; overflow: hidden; padding: 0 3px; border-radius: 6px; background: linear-gradient(#e2d6ba, var(--paper) 30%, var(--paper) 70%, #e2d6ba); box-shadow: inset 0 0 0 1.5px rgba(38, 35, 32, 0.25); }
.odo__strip { display: flex; flex-direction: column; transition: transform 1.3s cubic-bezier(.2, .8, .25, 1); transition-delay: calc(var(--k) * 0.18s); }
.odo__strip b { height: 1em; font-weight: 900; }
.tw-sheet__unit { font: 800 16px/1 var(--font-sans); color: #6b604c; }
.tw-sheet__rows { display: grid; gap: 0; margin: 10px 0 0; }
.tw-sheet__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dotted rgba(38, 35, 32, 0.3); }
.tw-sheet__rows dt { font: 700 14px/20px var(--font-sans); color: #6b604c; }
.tw-sheet__rows dd { margin: 0; font: 800 15px/20px var(--font-sans); text-align: right; word-break: keep-all; }
#worst { color: var(--red); }
.tw-sheet__vs { margin: 12px 0 0; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; font: 800 15px/22px var(--font-sans); text-align: center; word-break: keep-all; }
.kb--heat { margin-top: 16px; padding: 12px 6px 14px; border-radius: 12px; background: var(--enamel); }
.kb--heat .key { background: radial-gradient(circle at 40% 35%, #4a453d, #2b2823 70%); color: #8d846f; }
.kb--heat .key.on { background: radial-gradient(circle at 40% 35%, #fff6d8, hsl(40, 85%, calc(28% + var(--h) * 42%)) 75%); color: var(--ink); box-shadow: 0 0 0 2px var(--brass), 0 0 0 3.5px #0a0908, 0 4px 0 2px #000, 0 0 calc(4px + var(--h) * 20px) calc(var(--h) * 5px) rgba(255, 196, 92, calc(0.15 + var(--h) * 0.7)); animation: tw-glow 0.5s ease-out backwards; animation-delay: calc(0.9s + var(--k) * 0.035s); }
@keyframes tw-glow { from { background: radial-gradient(circle at 40% 35%, #4a453d, #2b2823 70%); box-shadow: 0 0 0 2px var(--brass-2), 0 0 0 3.5px #0a0908, 0 4px 0 2px #000; transform: translateY(3px); } }
.tw-sheet__cap { margin: 8px 0 0; font: 600 12px/18px var(--font-sans); color: #6b604c; text-align: center; }
.tw-coupon { display: grid; gap: 8px; margin-top: 16px; padding: 12px; border: 2px dashed var(--color-border); border-radius: 14px; }
.tw-coupon pre { margin: 0; white-space: pre-wrap; font: 600 13px/20px var(--font-sans); color: var(--color-text-secondary); }
.tw-lbl { display: block; margin-top: 4px; font: 800 13px/18px var(--font-sans); color: var(--color-text-secondary); }
.tw-in { width: 100%; height: 48px; padding: 0 12px; border: 2px solid var(--color-border); border-radius: 12px; background: #1a1815; color: var(--chalk); font: 700 16px/1 var(--font-sans); box-sizing: border-box; }
.tw-in:focus { outline: none; border-color: var(--brass); }

/* ---------- 설명 글 ---------- */
.tw-doc { max-width: 640px; margin: 40px auto 0; color: var(--chalk); }
.tw-doc h2 { font: 900 20px/1.3 var(--font-sans); }
.tw-doc p, .tw-doc summary { font: 500 14.5px/23px var(--font-sans); color: var(--color-text-secondary); word-break: keep-all; }
.tw-doc summary { color: var(--chalk); font-weight: 700; cursor: pointer; }

.rm *, .rm *::before, .rm *::after { animation: none !important; transition: none !important; }
@media (max-width: 380px) {
  .tw-title { font-size: 36px; }
  .target { font-size: 18px; line-height: 29px; }
  .odo { font-size: 56px; }
  .key { font-size: 11.5px; }
}