:root {
    --ink:#20242d;
    --muted:#687386;
    --line:#dfe5ee;
    --blue:#2459c4;
    --blue-dark:#173f91;
    --soft-blue:#eef4ff;
    --soft-teal:#e9f8f5;
    --panel:#fff;
    --background:#f4f6fa;
    --shadow:0 12px 32px rgba(31,48,76,.08);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:var(--background); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Noto Sans KR","Malgun Gothic",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
[hidden] { display:none!important; }
.site-header { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:18px 28px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); }
.wordmark { color:var(--ink); font-size:.92rem; font-weight:800; text-decoration:none; }
.local-badge { display:inline-flex; align-items:center; padding:6px 10px; border:1px solid #d7e0ed; border-radius:999px; background:#fff; color:var(--muted); font-size:.76rem; font-weight:700; }
.app-shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:58px 0 70px; }
.screen { width:100%; }
.start-screen { max-width:1080px; margin:0 auto; }
.eyebrow { margin:0 0 9px; color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.04em; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:14px; font-size:clamp(2.2rem,5vw,3.7rem); line-height:1.12; letter-spacing:-.04em; }
h2 { margin-bottom:14px; font-size:1.35rem; line-height:1.35; letter-spacing:-.02em; }
.paper-title { margin-bottom:18px; color:var(--muted); font-size:.95rem; font-weight:700; }
.intro-copy { max-width:760px; margin-bottom:34px; color:#4f5b6d; font-size:1.05rem; line-height:1.8; }
.start-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.panel { border:1px solid var(--line); border-radius:18px; padding:26px; background:var(--panel); box-shadow:var(--shadow); }
.how-panel,.study-panel { min-height:100%; }
.steps-list { display:grid; gap:14px; margin:0 0 22px; padding:0; list-style:none; }
.steps-list li { display:flex; align-items:flex-start; gap:11px; color:#4f5b6d; font-size:.92rem; line-height:1.6; }
.steps-list strong { color:var(--ink); }
.step-number { display:inline-flex; flex:0 0 25px; width:25px; height:25px; align-items:center; justify-content:center; border-radius:50%; background:var(--soft-blue); color:var(--blue); font-size:.75rem; font-weight:800; }
.keyboard-note { margin-bottom:20px; color:var(--muted); font-size:.83rem; line-height:1.6; }
.button { min-height:46px; border:0; border-radius:10px; padding:11px 18px; font-weight:800; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; }
.button:hover:not(:disabled) { transform:translateY(-1px); }
.button-primary { background:var(--blue); color:#fff; box-shadow:0 7px 16px rgba(36,89,196,.2); }
.button-primary:hover:not(:disabled) { background:var(--blue-dark); }
.button-secondary { border:1px solid #cbd5e1; background:#fff; color:#334155; }
.quiet-note { color:var(--muted); font-size:.82rem; line-height:1.65; }
#sentence-source { margin:12px 0 0; }
.panel-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.sample-badge { display:inline-flex; align-items:center; flex-shrink:0; padding:6px 9px; border-radius:999px; background:#f1f4f8; color:var(--muted); font-size:.72rem; font-weight:800; }
.study-speed-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:22px 0 18px; padding:17px 12px; border:1px solid var(--line); border-radius:13px; background:#f8fafc; text-align:center; }
.study-speed-row div { display:grid; gap:3px; }
.study-speed-row span { color:var(--muted); font-size:.76rem; font-weight:700; }
.study-speed-row strong { font-size:1.65rem; letter-spacing:-.04em; }
.study-speed-row small { color:var(--muted); font-size:.7rem; }
.versus { color:#9aa5b5!important; font-size:.72rem!important; font-weight:900!important; }
.study-highlight { margin-bottom:10px; color:#344054; font-size:.9rem; line-height:1.7; }
.study-caveat { margin-bottom:0; padding:12px 14px; border-radius:10px; background:#fff8e8; color:#725d2b; font-size:.81rem; line-height:1.65; }
.data-note { margin:18px 0 0; color:var(--muted); font-size:.82rem; text-align:center; }
.test-screen { position:relative; z-index:1; max-width:900px; margin:0 auto; }
.test-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.test-heading h1 { margin-bottom:8px; }
.lead-copy { margin-bottom:0; color:var(--muted); font-size:1rem; line-height:1.7; }
.condition-badge { display:inline-flex; align-items:center; flex-shrink:0; border-radius:999px; padding:7px 12px; font-size:.8rem; font-weight:800; white-space:nowrap; }
.condition-off { color:#536176; background:#edf1f6; }
.condition-on { color:#12685f; background:var(--soft-teal); }
.typing-panel { margin-top:8px; }
.instruction { margin-bottom:18px; color:var(--muted); font-size:.9rem; line-height:1.6; }
kbd { border:1px solid #cbd4e1; border-bottom-width:2px; border-radius:5px; padding:2px 6px; background:#f8fafc; font-size:.8rem; font-family:inherit; }
.target-sentence { margin:0 0 22px; border-left:4px solid var(--blue); border-radius:8px; padding:18px 20px; background:#f4f7fc; color:var(--ink); font-size:1.15rem; font-weight:650; line-height:1.8; overflow-wrap:anywhere; }
.target-sentence span { transition:color .12s ease,background-color .12s ease; }
.target-sentence .typed-pending { color:#9aa5b5; }
.target-sentence .typed-correct { color:var(--ink); }
.target-sentence .typed-error { border-radius:3px; background:#fee4e2; color:#b42318; }
.target-sentence .typing-current { border-bottom:2px solid var(--blue); background:rgba(36,89,196,.08); }
.input-label { display:block; margin-bottom:8px; font-weight:750; }
#typing-input { width:100%; min-height:58px; border:2px solid #cbd5e1; border-radius:12px; padding:14px 16px; outline:none; background:#fff; color:var(--ink); transition:border-color .15s ease,box-shadow .15s ease; }
#typing-input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(36,89,196,.12); }
#typing-input::placeholder { color:#94a3b8; }
#typing-help { margin:9px 0 0; }
.live-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0 16px; }
.metric-card { display:grid; gap:4px; border:1px solid var(--line); border-radius:12px; padding:14px; background:#f8fafc; }
.metric-card span { color:var(--muted); font-size:.8rem; }
.metric-card strong { font-size:1.25rem; }
.metric-card small { color:var(--muted); font-size:.75rem; font-weight:600; }
.form-status { min-height:1.5em; margin:12px 0; color:var(--muted); font-size:.85rem; }
.form-status.is-error { color:#b42318; font-weight:700; }
#finish-test { width:100%; }
.completion-panel { margin-top:18px; }
.result-screen { max-width:1000px; margin:0 auto; }
.result-screen>h1 { margin-bottom:10px; }
.personal-results { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr); gap:24px; margin-top:24px; }
.table-wrap { width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
caption { margin-bottom:10px; color:var(--muted); font-size:.78rem; text-align:left; }
th,td { padding:13px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
thead th { background:#f8fafc; color:#566174; font-size:.78rem; font-weight:800; }
tbody th { color:var(--ink); font-weight:700; }
tbody td { color:#344054; }
tbody tr:last-child th,tbody tr:last-child td { border-bottom:0; }
.personal-conclusion { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.personal-conclusion h2 { margin-bottom:12px; }
.comparison-copy { margin-bottom:10px; padding:14px; border-radius:11px; background:var(--soft-blue); color:#294a87; font-size:.9rem; font-weight:750; line-height:1.7; }
.personal-conclusion .quiet-note { margin-bottom:0; }
.paper-results { margin-top:20px; }
.paper-results h2 { margin-bottom:8px; }
.paper-results>.quiet-note { margin-bottom:18px; }
.paper-conclusion { margin:18px 0 8px; padding:14px 16px; border-radius:11px; background:#fff8e8; color:#725d2b; font-size:.85rem; line-height:1.7; }
.sentence-detail { margin-bottom:0; }
#restart-test { display:block; margin:22px auto 0; }
.effects-layer { position:fixed; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.site-header,.site-footer { position:relative; z-index:2; }
.effect-particle,.effect-star,.effect-burst { position:absolute; pointer-events:none; }
.effect-particle { width:9px; height:9px; border-radius:50%; background:rgba(70,150,255,.8); box-shadow:0 0 16px rgba(70,150,255,.8); animation:particle-float 3s ease-in-out infinite alternate; }
.effect-star { width:10px; height:10px; background:rgba(255,255,255,.95); transform:rotate(45deg); box-shadow:0 0 18px rgba(120,180,255,1); animation:star-twinkle 3s ease-in-out infinite; }
.effect-burst { width:8px; height:8px; border:3px solid rgba(70,150,255,.85); border-radius:50%; box-shadow:0 0 14px rgba(70,150,255,.7); animation:burst-expand 4s ease-out infinite; }
@keyframes particle-float { from { transform:translate(-25px,20px); opacity:.2; } to { transform:translate(30px,-25px); opacity:1; } }
@keyframes star-twinkle { 0%,100% { transform:rotate(45deg) scale(.3); opacity:0; } 30% { transform:rotate(45deg) scale(1.2); opacity:1; } 60% { transform:rotate(45deg) scale(.7); opacity:.4; } }
@keyframes burst-expand { 0% { transform:scale(.2); opacity:0; } 15% { transform:scale(1); opacity:1; } 70%,100% { transform:scale(7); opacity:0; } }
.site-footer { padding:0 24px 26px; color:#8792a3; font-size:.75rem; text-align:center; }
@media (max-width:820px) { .start-grid { grid-template-columns:1fr; } .personal-results { grid-template-columns:1fr; } }
@media (max-width:720px) { .site-header { padding:15px 18px; } .app-shell { width:min(100% - 36px,900px); padding:42px 0 48px; } .panel { padding:20px; } .panel-heading-row { flex-wrap:wrap; } .test-heading { align-items:flex-start; flex-direction:column; } .site-footer { padding:0 18px 22px; } }
@media (max-width:480px) { h1 { font-size:2rem; } .intro-copy { font-size:.95rem; } .local-badge { font-size:.73rem; } .study-speed-row { gap:7px; padding:13px 8px; } .study-speed-row strong { font-size:1.35rem; } .target-sentence { padding:15px 16px; font-size:1rem; } .live-metrics { grid-template-columns:1fr; gap:8px; } .metric-card { grid-template-columns:1fr auto; align-items:center; padding:11px 13px; } th,td { padding:10px 9px; font-size:.88rem; } .sample-badge { white-space:normal; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }