:root{color-scheme:light;--primary:#4285f4;--primary-dark:#2868cf;--primary-soft:#edf4ff;--danger:#ec6066;--canvas:#f4f6f9;--surface:#fff;--surface-soft:#f8fafc;--text:#252a34;--muted:#7a8494;--border:#e2e7ee;--shadow:0 18px 60px rgba(32,48,76,.09);--radius-lg:24px;--radius-md:12px;--font:Inter,Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{min-width:320px;background:var(--canvas)}body{margin:0;min-height:100vh;padding:64px 28px;background:var(--canvas);color:var(--text);font-family:var(--font)}button,input,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{width:min(1180px,100%);min-height:760px;margin:0 auto;padding:38px 40px 42px;background:var(--surface);border:1px solid rgba(226,231,238,.8);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.app-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.brand{display:inline-flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;font-size:23px;font-weight:800;letter-spacing:-.04em}.brand-mark{display:grid;width:33px;height:33px;place-items:center;border-radius:50%;background:var(--primary-soft);color:var(--primary)}.brand svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.brand-accent{color:var(--primary)}.lang-btn{padding:9px 15px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:#4a5360;font-size:14px;font-weight:650;cursor:pointer;transition:.18s ease}.lang-btn:hover{border-color:#cbd4df;background:var(--surface-soft);transform:translateY(-1px)}.lang-btn:active{transform:translateY(0)}
.tabs{display:flex;margin-bottom:30px;border-bottom:1px solid var(--border)}.tab-btn{position:relative;min-width:132px;padding:15px 25px 17px;border:0;background:transparent;color:#98a0ac;font-size:15px;font-weight:750;cursor:pointer;transition:color .18s ease,background .18s ease}.tab-btn::after{position:absolute;right:0;bottom:-1px;left:0;height:3px;border-radius:3px 3px 0 0;background:transparent;content:""}.tab-btn:hover{background:#fafcff;color:var(--primary)}.tab-btn.active{color:var(--primary)}.tab-btn.active::after{background:var(--primary)}
.workspace{display:grid;grid-template-columns:350px minmax(0,1fr);gap:38px;min-height:570px}.controls-column{display:flex;flex-direction:column}.control-panel{padding:23px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.hidden,[hidden]{display:none!important}.section-label,.section-header{display:block;margin:0 0 20px;color:var(--text);font-size:15px;font-weight:750}.slider-container{display:flex;align-items:center;gap:13px;margin-bottom:16px}.small-text{flex:0 0 auto;color:#99a1ad;font-size:12px;font-weight:650}input[type=range]{flex:1;height:7px;margin:0;appearance:none;border-radius:10px;outline:none;background:linear-gradient(to right,var(--primary) 50%,#edf0f4 50%)}input[type=range]::-webkit-slider-thumb{width:23px;height:23px;appearance:none;border:3px solid #fff;border-radius:50%;background:var(--primary);box-shadow:0 2px 7px rgba(36,83,157,.25);cursor:pointer}input[type=range]::-moz-range-thumb{width:17px;height:17px;border:3px solid #fff;border-radius:50%;background:var(--primary);box-shadow:0 2px 7px rgba(36,83,157,.25);cursor:pointer}.speed-display{text-align:center;color:#606875;font-size:14px;font-weight:600}#speed-value{margin-right:3px;color:var(--primary)}.input-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px;color:#4f5865;font-size:14px}.input-group{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}input[type=number]{width:68px;padding:8px 7px;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--text);text-align:center;font-weight:700;outline:none}input[type=number]:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(66,133,244,.11)}.separator{height:1px;margin:22px 0;background:var(--border)}
.stopwatch-container{padding:16px;border-radius:10px;background:var(--surface-soft);text-align:center}.time-display{margin-bottom:12px;font-size:31px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.04em}.button-group{display:flex;justify-content:center;gap:8px}.btn{min-width:74px;padding:8px 15px;border:1px solid transparent;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;transition:.16s ease}.btn:hover{transform:translateY(-1px);filter:brightness(.97)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--primary);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-outline{border-color:#d8dee7;background:#fff;color:#626b78}.sample-text{margin:13px 0 0;padding:10px 11px;border-radius:7px;background:#eef1f5;color:#6c7480;font-size:11px;line-height:1.55;text-align:left}.calibrated-result{margin-top:10px;color:var(--primary);font-size:12px;font-weight:700}.result-display{display:flex;flex:1;min-height:205px;flex-direction:column;align-items:center;justify-content:center;margin-top:20px;padding:28px 20px;border:1px solid #edf0f3;border-radius:var(--radius-md);background:var(--surface-soft);text-align:center}.result-label{margin-bottom:8px;color:#89919d;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.time-text{color:var(--text);font-size:clamp(40px,4vw,50px);font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.055em}.time-text .unit{margin-left:2px;color:var(--primary);font-size:.48em;letter-spacing:-.02em}.result-note{min-height:18px;margin-top:10px;color:var(--muted);font-size:12px}.input-column,.textarea-wrapper{min-height:100%}.textarea-wrapper{display:flex;flex-direction:column}textarea{width:100%;min-height:510px;flex:1;resize:none;padding:24px;border:1px solid var(--border);border-radius:var(--radius-md);outline:none;background:#fff;color:var(--text);box-shadow:inset 0 1px 3px rgba(29,42,61,.025);font-size:15px;line-height:1.85;transition:border-color .18s,box-shadow .18s}textarea::placeholder{color:#a9b0ba}textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(66,133,244,.1)}.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 4px 0;color:var(--muted);font-size:12px}.stat-item:nth-child(2){text-align:center}.stat-item:last-child{text-align:right}.stat-item strong{margin-right:3px;color:#4e5662;font-size:13px;font-variant-numeric:tabular-nums}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:3px solid rgba(66,133,244,.28);outline-offset:3px}noscript{display:block;max-width:800px;margin:16px auto;color:#a23737;text-align:center}
@media(max-width:820px){body{padding:24px 16px}.app-shell{padding:28px 24px 32px;border-radius:19px}.workspace{grid-template-columns:1fr;gap:26px}.result-display{min-height:180px}textarea{min-height:420px;resize:vertical}}@media(max-width:520px){body{padding:0;background:#fff}.app-shell{min-height:100vh;padding:24px 18px 30px;border:0;border-radius:0;box-shadow:none}.brand{font-size:19px}.brand-mark{width:30px;height:30px}.lang-btn{padding:8px 11px;font-size:12px}.tabs{margin-right:-18px;margin-left:-18px}.tab-btn{min-width:0;flex:1;padding-right:12px;padding-left:12px}.control-panel{padding:20px}.input-row{align-items:flex-start}textarea{min-height:390px;padding:18px}.stats-bar{gap:4px;font-size:10px}.stat-item strong{display:block;margin:0 0 2px;font-size:13px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}