@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--navy:#18243c;--muted:#778197;--blue:#5865e8;--bg:#f5f7fb;--line:#e8ecf3;--green:#168a64;--red:#c74659;--orange:#c88520}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--navy);font-family:'DM Sans','Noto Sans KR',system-ui,sans-serif}.top{height:72px;background:#fff;border-bottom:1px solid #e9edf4}.nav{max-width:1120px;height:100%;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.logo{font-weight:800;font-size:22px;letter-spacing:-1px;text-decoration:none;color:var(--navy)}.logo b{color:var(--blue)}.nav-actions{display:flex;align-items:center;gap:20px}.nav-actions a{color:#657088;text-decoration:none;font-size:14px;font-weight:700}.nav-actions a:hover{color:var(--blue)}main{max-width:980px;margin:0 auto;padding:0 24px}.hero{padding:42px 0 22px}.eyebrow{display:inline-flex;color:var(--blue);background:#eef0ff;border-radius:99px;padding:7px 12px;font-size:11px;font-weight:800;letter-spacing:.08em}.hero h1{font-size:clamp(32px,5vw,48px);letter-spacing:-2px;line-height:1.15;margin:16px 0 10px}.hero p{max-width:720px;margin:0;color:var(--muted);line-height:1.75;font-size:16px}.play-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 8px 28px #2334580a}.topline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 2px 14px;color:var(--muted);font-size:13px;font-weight:700}.topline strong{color:#526078}.duration-set{border:0;padding:0;margin:0 0 15px}.duration-set legend{padding:0 2px 8px;color:#536078;font-size:13px;font-weight:800}.duration-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.duration-btn{min-height:42px;border:1px solid #dbe2ec;border-radius:10px;background:#fff;color:#526078;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.duration-btn[aria-pressed=true]{border-color:#7d82ed;background:#eef0ff;color:#424bc7;box-shadow:0 2px 7px #5865e81c}.duration-btn:disabled{opacity:.55;cursor:not-allowed}.test-area{position:relative;overflow:hidden;width:100%;min-height:234px;border:2px dashed #b9c3d7;border-radius:18px;background:#f5f7fc;color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;cursor:pointer;touch-action:manipulation;user-select:none;transition:background .15s,border-color .15s,transform .15s}.test-area:hover{background:#eef1ff;border-color:#8f96ed}.test-area:active{transform:scale(.997)}.test-area:focus-visible,.btn:focus-visible,.duration-btn:focus-visible,.nav-actions a:focus-visible{outline:3px solid #263654;outline-offset:3px}.test-area[data-state=running]{background:#eef0ff;border-style:solid;border-color:#7b83ea}.test-area[data-state=finished]{background:#eff8f4;border-style:solid;border-color:#93cdb4}.target-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:#fff;color:var(--blue);font-size:25px;font-weight:800;box-shadow:0 5px 18px #28345812}.test-area[data-state=running] .target-mark{background:var(--blue);color:#fff}.test-area[data-state=finished] .target-mark{background:var(--green);color:#fff}.test-area strong{font-size:clamp(21px,3vw,28px);letter-spacing:-.5px}.test-area span:last-child{font-size:14px;color:#68748a;line-height:1.55}.progress-track{height:8px;width:100%;overflow:hidden;border-radius:99px;background:#edf0f5;margin:14px 0 0}.progress-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#5865e8,#35a7a1);transition:width .08s linear}.action-row{display:flex;align-items:center;gap:14px;margin-top:14px}.btn{border:0;border-radius:11px;padding:11px 16px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.btn.secondary{background:#f1f3f8;color:#526078}.btn.secondary:hover{background:#e8ebf3}.key-tip{color:var(--muted);font-size:12px;line-height:1.55}.status{min-height:22px;margin:13px 2px 0;color:#58637a;font-size:13px;line-height:1.6}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.stat{background:#f7f8fc;border:1px solid #edf0f5;border-radius:14px;padding:14px 16px}.stat span{display:block;color:var(--muted);font-size:12px;font-weight:700}.stat strong{display:block;margin-top:6px;font-size:20px;letter-spacing:-.4px}.result-panel{margin-top:18px;padding:18px;border-radius:16px;background:#eef0ff;border:1px solid #dfe3ff}.result-panel[hidden]{display:none}.result-panel h2{margin:0 0 12px;font-size:18px}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.result-item{padding:12px;background:#fff;border-radius:12px}.result-item span{display:block;color:var(--muted);font-size:12px}.result-item strong{display:block;margin-top:5px;font-size:22px}.history{margin-top:20px;border-top:1px solid #e6eaf1;padding-top:17px}.history-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.history h2{font-size:17px;margin:0}.history-list{display:grid;gap:8px;list-style:none;margin:12px 0 0;padding:0}.history-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:#f7f8fc;font-size:13px}.history-item strong{color:#414bc1}.empty-history{padding:12px;border-radius:11px;background:#f7f8fc;color:var(--muted);font-size:13px}.clear-records{border:0;background:transparent;color:#778197;font:inherit;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer}.guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 58px}.guide-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}.guide-card h2{font-size:17px;margin:0 0 9px;letter-spacing:-.3px}.guide-card p,.guide-card li{color:#626e84;font-size:14px;line-height:1.75}.guide-card p{margin:0}.guide-card ul{margin:0;padding-left:20px}.footer{border-top:1px solid #e6eaf1;background:#fff;text-align:center;color:#8992a3;padding:25px;font-size:12px}.hidden{display:none!important}@media(max-width:650px){.top{height:62px}.nav{padding:0 18px}.logo{font-size:20px}.nav-actions{gap:13px}.nav-actions a{font-size:12px}main{padding:0 18px}.hero{padding:31px 0 18px}.hero h1{letter-spacing:-1.4px}.play-card{padding:15px;border-radius:18px}.topline{font-size:11px;align-items:flex-start}.duration-row{gap:6px}.duration-btn{min-height:40px;font-size:12px}.test-area{min-height:205px;border-radius:15px;padding:18px}.action-row{align-items:flex-start;flex-direction:column;gap:9px}.action-row .btn{width:100%}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stat{padding:12px 10px}.stat strong{font-size:17px}.result-grid,.guide{grid-template-columns:1fr}.history-head{align-items:flex-start}.guide{margin-bottom:40px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.stat strong span{display:inline;white-space:nowrap}.stat strong .time-unit{margin-left:3px;color:var(--muted);font-size:.62em;letter-spacing:0}
.custom-time{margin-top:12px;padding:12px;border:1px solid #e6eaf1;border-radius:13px;background:#f8fafc}.custom-time-label{display:block;margin-bottom:7px;color:#536078;font-size:12px;font-weight:800}.custom-input-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:8px}.custom-input{width:100%;min-width:0;height:42px;padding:9px 11px;border:1px solid #dbe2ec;border-radius:10px;background:#fff;color:var(--navy);font:inherit;font-size:14px}.custom-input:focus-visible,.custom-apply:focus-visible{outline:3px solid #9ca5ff;outline-offset:2px}.custom-apply{border:0;border-radius:10px;background:#e9ebff;color:#424bc7;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.custom-apply:hover{background:#dfe2ff}.custom-input:disabled,.custom-apply:disabled{opacity:.55;cursor:not-allowed}.duration-current{margin:8px 2px 0;color:var(--muted);font-size:12px;font-weight:700}.field-error{min-height:18px;margin:5px 2px 0;color:#b42318;font-size:12px;line-height:1.5}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.result-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.result-item strong{font-size:clamp(18px,2.5vw,24px)}@media(max-width:650px){.custom-input-row{grid-template-columns:minmax(0,1fr) 82px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.result-grid{grid-template-columns:1fr}.result-item strong{font-size:22px}}
.custom-input-row{grid-template-columns:minmax(0,1fr) auto 92px;align-items:center}.custom-unit{min-width:22px;color:#536078;font-size:14px;font-weight:800;text-align:center}.stat strong .time-value{font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit}.test-area:disabled{opacity:1;cursor:default}@media(max-width:650px){.custom-input-row{grid-template-columns:minmax(0,1fr) auto 82px}}
.top-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 14px}.top-actions .btn{flex:0 0 auto}.top-actions .key-tip{flex:1}.top-actions .btn:disabled{opacity:.55;cursor:not-allowed}@media(max-width:650px){.top-actions{gap:8px;margin:8px 0 12px}.top-actions .btn{white-space:nowrap;padding:10px 12px}.top-actions .key-tip{font-size:11px}}
.custom-input-row{grid-template-columns:120px auto 82px 82px;justify-content:start;align-items:center}.custom-input{width:100%;min-width:0}.custom-start{min-height:42px;border:0;border-radius:10px;background:#5865e8;color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.custom-start:hover{background:#4653d4}.custom-start:focus-visible{outline:3px solid #9ca5ff;outline-offset:2px}.custom-start:disabled{opacity:.55;cursor:not-allowed}@media(max-width:650px){.custom-input-row{grid-template-columns:minmax(78px,100px) auto 70px 70px;gap:6px}.custom-start{font-size:12px}}
.custom-input-row{grid-template-columns:120px auto 82px 82px;justify-content:start;align-items:center}.custom-input{width:100%;min-width:0}.custom-apply,.custom-start{width:100%;min-height:42px;padding:0 10px;border:0;border-radius:10px;color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:none}.custom-apply{background:#5865e8}.custom-apply:hover{background:#4653d4}.custom-start{background:#d64545}.custom-start:hover{background:#bf3030}.custom-apply:focus-visible{outline:3px solid #9ca5ff;outline-offset:2px}.custom-start:focus-visible{outline:3px solid #f3a1a1;outline-offset:2px}.custom-apply:disabled,.custom-start:disabled{opacity:.55;cursor:not-allowed}@media(max-width:650px){.custom-input-row{grid-template-columns:minmax(78px,100px) auto 70px 70px;gap:6px}.custom-apply,.custom-start{font-size:12px}}