body.pf-type-page { overflow-x:hidden; }
.pf-type {
    --pf-type-top:140px;
    --pf-type-brand:linear-gradient(135deg, #3AB5EE, #5CD5D7);
    --pf-type-ink:#12344D;
    --pf-type-text:#4B4F58;
    --pf-type-bg:#F2F5F7;
    --pf-type-card:#fff;
    --pf-type-brand-strong:#0E6FA8;
    --pf-type-brand-hover:#0E6FA8;
    --pf-type-selected:#EAF6FB;
    --pf-type-border:#d9d9d9;
    --pf-type-error:#c9302c;
    --pf-type-error-bg:#ffe8eb;
    box-sizing:border-box; width:100vw; margin-left:calc(50% - 50vw); margin-top:var(--pf-type-header-gap, 0px); min-height:calc(100vh - var(--pf-type-top)); padding:32px 40px; background:var(--pf-type-bg); color:var(--pf-type-text); font:16px/1.6 system-ui,-apple-system,"Malgun Gothic",sans-serif;
}
.pf-type *, .pf-type-settings * { box-sizing:border-box; }
.pf-type [hidden], .pf-type-settings [hidden] { display:none !important; }
.pf-type h1 { font-size:clamp(26px,2vw,36px); line-height:1.25; margin:0 0 12px; color:var(--pf-type-ink); }
.pf-type h2 { font-size:22px; margin:0 0 4px; color:var(--pf-type-ink); }
.pf-type h3 { font-size:16px; margin:24px 0 8px; color:var(--pf-type-ink); }
.pf-type p { margin:0 0 20px; }
.pf-type small { display:block; font-size:14px; color:var(--pf-type-text); font-weight:400; }
.pf-type .pf-type-eyebrow { color:var(--pf-type-text); font-size:12px; font-weight:700; letter-spacing:.12em; margin:0 0 8px; }
.pf-type-shell { max-width:1440px; margin:auto; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; }
.pf-type-shell > section, .pf-type-panel { min-width:0; background:var(--pf-type-card); padding:28px; border:1px solid var(--pf-type-border); border-radius:16px; }
.pf-type fieldset { border:0; padding:0; margin:28px 0; min-width:0; }
.pf-type legend { display:block; font-size:18px; font-weight:700; margin:0 0 12px; padding:0; }
.pf-type-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pf-type-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pf-type-card { display:flex; gap:8px; padding:16px 12px; border:2px solid var(--pf-type-border); border-radius:10px; align-items:flex-start; cursor:pointer; min-height:96px; }
.pf-type-card:has(input:checked) { border-color:transparent; background:linear-gradient(var(--pf-type-selected), var(--pf-type-selected)) padding-box, var(--pf-type-brand) border-box; }
.pf-type-card input { margin:6px 0 0; accent-color:var(--pf-type-brand-strong); flex-shrink:0; }
.pf-type-card span { min-width:0; }
.pf-type-card strong { font-size:18px; color:var(--pf-type-ink); }
.pf-type-badge { font-size:12px; color:var(--pf-type-ink); background:var(--pf-type-brand); border-radius:4px; padding:3px; display:inline-block; }
.pf-type-badge > span { display:inline-block; background:var(--pf-type-card); padding:0 3px; border-radius:2px; }
.pf-type a { color:var(--pf-type-brand-hover); text-decoration:underline; }
.pf-type button { min-height:44px; padding:10px 18px; background:var(--pf-type-card); border:1px solid var(--pf-type-border); color:var(--pf-type-ink); border-radius:8px; font:inherit; font-weight:600; cursor:pointer; white-space:normal; }
.pf-type button:hover { background:var(--pf-type-bg); }
.pf-type button.pf-type-primary { background:var(--pf-type-brand-strong); border-color:var(--pf-type-brand-strong); color:#fff; }
.pf-type button.pf-type-primary:hover { background:var(--pf-type-brand-hover); }
.pf-type :focus-visible { outline:3px solid var(--pf-type-brand-strong); outline-offset:3px; }
.pf-type-settings :focus-visible { outline:3px solid #0e6fa8; outline-offset:3px; }
.pf-type-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.pf-type-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.pf-type-stats > div { background:var(--pf-type-bg); border-radius:8px; padding:12px; min-width:0; }
.pf-type-stats dt { font-size:13px; color:var(--pf-type-text); }
.pf-type-stats dd { font-size:20px; font-weight:700; margin:0; color:var(--pf-type-ink); }
.pf-type-chart { display:flex; gap:5px; height:96px; padding:0 0 22px; margin:10px 0 28px; }
.pf-type-chart > div { flex:1; position:relative; min-width:0; border-bottom:1px solid var(--pf-type-border); }
.pf-type-chart span { display:block; position:absolute; bottom:0; width:100%; background:var(--pf-type-brand); border-radius:3px 3px 0 0; }
.pf-type-chart small { position:absolute; top:100%; width:100%; text-align:center; font-size:11px; }
.pf-type summary { cursor:pointer; min-height:44px; display:flex; align-items:center; text-decoration:underline; color:var(--pf-type-brand-hover); }
.pf-type-table { max-height:230px; overflow:auto; }
.pf-type table { width:100%; border-collapse:collapse; font-size:13px; margin:0; }
.pf-type th, .pf-type td { padding:8px; text-align:left; border-bottom:1px solid var(--pf-type-border); white-space:nowrap; }
.pf-type-arena { max-width:1440px; margin:auto; padding-top:24px; position:relative; }
.pf-type-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; }
.pf-type-live { font-variant-numeric:tabular-nums; margin-bottom:12px; min-height:28px; }
.pf-type progress { display:block; width:100%; height:10px; appearance:none; border:0; background:var(--pf-type-selected); margin-bottom:48px; }
.pf-type progress::-webkit-progress-bar { background:var(--pf-type-selected); border-radius:5px; }
.pf-type progress::-webkit-progress-value { background:var(--pf-type-brand); border-radius:5px; }
.pf-type progress::-moz-progress-bar { background:var(--pf-type-brand); border-radius:5px; }
.pf-type .pf-type-target { font-size:26px; letter-spacing:0; line-height:1.6; margin:0 0 20px; white-space:pre-wrap; overflow-wrap:anywhere; }
.pf-type .pf-type-word { font-size:56px; text-align:center; }
.pf-type-next { color:var(--pf-type-text); min-height:28px; overflow-wrap:anywhere; }
.pf-type-arena input[type=text] { display:block; width:100%; min-height:64px; font:24px/1.5 system-ui,"Malgun Gothic",sans-serif; color:var(--pf-type-ink); background:var(--pf-type-card); padding:12px 16px; border:2px solid var(--pf-type-border); border-radius:10px; margin:20px 0 8px; }
.pf-type-arena input[type=text]:focus { border-color:var(--pf-type-brand-strong); }
.pf-type-correct { color:var(--pf-type-ink); }
.pf-type-wrong, .pf-type-ever-wrong { color:var(--pf-type-error); background:var(--pf-type-error-bg); text-decoration:underline wavy; text-underline-offset:5px; }
.pf-type-composing { color:var(--pf-type-text); text-decoration:underline #808080; text-underline-offset:5px; }
.pf-type-quit { position:absolute; inset:0; background:var(--pf-type-card); border:2px solid var(--pf-type-brand-strong); border-radius:12px; padding:48px 24px; text-align:center; z-index:2; }
.pf-type-quit button { margin:8px; }
.pf-type-result { max-width:1000px; margin:auto; padding:24px; background:var(--pf-type-card); border:1px solid var(--pf-type-border); border-radius:16px; }
.pf-type-result .pf-type-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.pf-type-review { font-size:24px; overflow-wrap:anywhere; }
.pf-type-test-results { margin:24px 0 !important; }
.pf-type-save { margin-top:24px; border-top:1px solid var(--pf-type-border); padding-top:16px; }
.pf-type-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.pf-type-list-setting { padding:24px 0; border-bottom:1px solid #c7d9df; max-width:1000px; }
.pf-type-list-setting h3 { margin:0 0 4px; }
.pf-type-list-setting button, .pf-type-list-setting summary { min-height:44px; }
.pf-type-shake { animation:pf-type-shake .25s ease-in-out; }
@keyframes pf-type-shake { 25%,75% { transform:translateX(-6px); } 50% { transform:translateX(6px); } }
@media (max-width:900px) { .pf-type { padding:24px; } .pf-type-shell { grid-template-columns:1fr; gap:24px; } .pf-type progress { margin-bottom:28px; } }
@media (max-width:600px) { .pf-type { padding:20px 12px; } .pf-type-shell > section, .pf-type-panel, .pf-type-result { padding:20px 16px; } .pf-type-cards, .pf-type-three { grid-template-columns:1fr; } .pf-type-card { min-height:72px; } .pf-type-result .pf-type-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .pf-type .pf-type-target { font-size:22px; } .pf-type .pf-type-word { font-size:38px; } .pf-type-heading { align-items:flex-start; } .pf-type-actions { flex-direction:column; } .pf-type-chart { gap:3px; } }
@media (prefers-reduced-motion:reduce) { .pf-type-shake { animation:none; } }

.pf-type-keyboard-tools { display:flex; gap:8px; margin:8px 0; }
.pf-type-keyboard-tools button { min-height:32px; padding:4px 12px; font-size:13px; }
.pf-type-keyboard { max-width:1160px; margin:0 auto; height:264px; }
.pf-type .pf-type-key-hint { margin:0 0 6px; min-height:26px; font-weight:600; }
.pf-type-key-row { display:flex; gap:4px; margin-bottom:4px; height:42px; }
.pf-type-key { flex:1; min-width:0; position:relative; display:flex; justify-content:center; align-items:center; border:1px solid #aaa; border-radius:5px; color:var(--pf-type-ink); background:#eee; line-height:1.1; }
.pf-type-key b { display:block; font-size:15px; }
.pf-type-key small { font-size:11px; text-align:center; }
.pf-type-key sup { position:static; margin-left:3px; font-size:9px; }
.pf-type-key[data-key=Space] { flex:7; }
.pf-type-key[data-key=Backspace], .pf-type-key[data-key=Enter], .pf-type-key[data-key=ShiftLeft], .pf-type-key[data-key=ShiftRight], .pf-type-key[data-key=CapsLock] { flex:1.7; }
.pf-type-finger-0 { background:#f8e2df; } .pf-type-finger-1 { background:#f5ecd7; }
.pf-type-finger-2 { background:#e8efda; } .pf-type-finger-3 { background:#dff0e6; }
.pf-type-finger-4 { background:#deedf3; } .pf-type-finger-5 { background:#e7e3f4; }
.pf-type-finger-6 { background:#f2e1ed; } .pf-type-finger-7 { background:#f8e2df; }
.pf-type-finger-8 { background:#ececec; }
.pf-type-key-active { background:var(--pf-type-brand); border:3px solid var(--pf-type-ink); }
.pf-type-key-active .pf-type-key-letters { background:var(--pf-type-card); padding:2px 4px; border-radius:2px; }
.pf-type-key-active em { background:var(--pf-type-card); }
.pf-type-home-key::after { content:''; position:absolute; bottom:3px; width:14px; border-bottom:2px solid currentColor; }
.pf-type-hide-letters .pf-type-key-letters { visibility:hidden; }
.pf-type-key-miss { outline:3px solid var(--pf-type-error); outline-offset:-3px; }
.pf-type-key em { position:absolute; bottom:1px; right:2px; font-size:10px; font-style:normal; }
.pf-type-keyboard-mobile { display:none; }
/* 문장·입력·자판을 FHD의 머리글 아래에 함께 놓는다. */
@media (min-width:900px) {
    .pf-type:has(.pf-type-arena) { padding-top:16px; padding-bottom:16px; }
    .pf-type-arena { padding-top:0; }
    .pf-type-arena .pf-type-heading { margin-bottom:12px; }
    .pf-type-arena progress { margin-bottom:16px; }
    .pf-type-arena .pf-type-target { margin-bottom:8px; }
    .pf-type-arena .pf-type-next { margin-bottom:8px; }
    .pf-type-arena input[type=text] { margin-top:8px; min-height:54px; padding:8px 12px; }
    .pf-type-arena #pf-type-help { margin-bottom:4px; font-size:14px; }
}
@media (max-width:899px) {
    .pf-type-keyboard, .pf-type-keyboard-tools { display:none; }
    .pf-type .pf-type-keyboard-mobile { display:block; font-size:14px; }
}