:root{--accent:#B91C1C;--ok:#15803d;--bad:#b91c1c}
@media (prefers-color-scheme:dark){:root{--accent:#F87171;--accent-ink:#2a0b0b;--ok:#4ade80;--bad:#f87171}}
input[type=time]{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px 12px;min-height:44px}
.face{text-align:center;padding:36px 20px 28px;position:relative}
.digits{font-size:clamp(64px,15vw,168px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin:6px 0 10px;white-space:nowrap}
.digits small{font-size:.28em;font-weight:700;letter-spacing:0;margin:0 .25em;vertical-align:.9em;color:var(--muted)}
.digits .sec{color:var(--muted);font-weight:700}
.running .digits{color:var(--accent)}
.sub{color:var(--muted);font-size:clamp(16px,2.2vw,22px);margin:0}
.meta{color:var(--muted);font-size:14px;margin:14px 0 0}
.ctrls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn.xl{min-width:148px;font-size:18px;min-height:54px}
.tbar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;max-width:560px;margin:14px auto 0}
.tbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
.opts{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;margin-top:18px}
.check{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:14px;margin:0}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.tools-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.face:fullscreen{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:0;border:0;background:var(--bg)}
.face:fullscreen .digits{font-size:min(22vw,40vh)}
.face:fullscreen .hide-fs{display:none}
.setgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:420px;margin:0 auto}
.setgrid .field{margin:0}
.setgrid input{text-align:center;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.setgrid label{text-align:center}
.presets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px;align-items:start}
@media (max-width:860px){.two{grid-template-columns:minmax(0,1fr)}}
.two h2{margin-top:0;font-size:18px}
.inline-field{display:flex;gap:8px;align-items:end}
.inline-field .field{flex:1;margin:0}
dialog{border:0;border-radius:var(--r-panel);padding:28px 24px;background:var(--surface);color:var(--text);max-width:min(420px,calc(100vw - 32px));width:100%;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
dialog::backdrop{background:rgba(10,10,10,.55)}
dialog h2{font-size:clamp(28px,6vw,40px);margin:4px 0 6px;color:var(--accent)}
dialog p{color:var(--muted);margin:0 0 18px}
dialog .row{justify-content:center}
dialog[open]{animation:pop .25s cubic-bezier(.16,1,.3,1)}
@keyframes pop{from{transform:scale(.94);opacity:0}}
/* 스톱워치 */
#sw-table td:first-child{color:var(--muted)}
#sw-table tr.best td{color:var(--ok);font-weight:700}
#sw-table tr.worst td{color:var(--bad);font-weight:700}
#sw-table thead th{position:sticky;top:0;background:var(--surface)}
.lapbox{max-height:420px;overflow:auto}
.kbd{display:inline-block;font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;padding:4px 6px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);margin:0 2px}
/* 알람 */
#a-status{margin:14px 0 0;font-size:16px}
#a-status b{font-size:22px;margin-right:6px;font-variant-numeric:tabular-nums}
#a-status span{display:block;color:var(--muted);font-size:14px}
#alarm.on #a-status b{color:var(--accent)}
.alarm-set{max-width:520px;margin:0 auto;text-align:left}
/* 뽀모도로 */
#pomo[data-mode=short]{--accent:#0F766E}
#pomo[data-mode=long]{--accent:#1D4ED8}
@media (prefers-color-scheme:dark){#pomo[data-mode=short]{--accent:#2DD4BF}#pomo[data-mode=long]{--accent:#60A5FA}}
#pomo .seg{margin-bottom:6px}
#p-round{color:var(--muted);margin:0}
#tasks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
#tasks li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-ctl);background:var(--surface-2)}
#tasks li .check{flex:1;min-width:0;font-size:15px}
#tasks li .check span{overflow-wrap:anywhere}
#tasks li.cur{outline:2px solid var(--accent);outline-offset:-2px}
#tasks li.done .check span{text-decoration:line-through;color:var(--muted)}
#tasks li em{font-style:normal;color:var(--accent);font-size:10px;letter-spacing:1px;white-space:nowrap}
#tasks li.empty{background:none;color:var(--muted);font-size:14px;padding:4px 0}
.x{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:6px}
.x:hover{color:var(--text);background:var(--surface)}
#p-week{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:150px;align-items:end}
#p-week li{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
#p-week i{display:block;width:100%;max-width:34px;min-height:3px;border-radius:6px 6px 2px 2px;background:var(--accent);opacity:.85}
#p-week b{font-size:12px;font-variant-numeric:tabular-nums}
#p-week span{font-size:12px;color:var(--muted)}
.cfg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:600px){.cfg{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cfg .field{margin:0}
/* 디데이 */
#cd-dday{display:inline-block;font-weight:800;font-size:18px;padding:4px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);letter-spacing:.02em}
#cd-name{font-size:clamp(22px,3vw,30px);margin:12px 0 2px;overflow-wrap:anywhere}
.units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:640px;margin:18px auto 0}
.units div{background:var(--surface-2);border-radius:var(--r-panel);padding:14px 6px}
.units b{display:block;font-size:clamp(30px,7vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.units span{font-size:13px;color:var(--muted)}
#cd.past .units b{color:var(--muted)}
.cd-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr);gap:10px}
@media (max-width:600px){.cd-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cd-form .field:first-child{grid-column:1/-1}}
.cd-form .field{margin:0}
#cd-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
#cd-list li{display:flex;align-items:center;gap:6px}
#cd-list li.empty{color:var(--muted);font-size:14px}
.link{flex:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;text-align:left;font:inherit;color:inherit;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-ctl);padding:10px 12px;cursor:pointer}
.link:hover{border-color:var(--accent)}
.link b{color:var(--accent);font-variant-numeric:tabular-nums}
.link span{font-size:13px;color:var(--muted);margin-left:auto}
/* 세계 시간 */
#w-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
#w-list li{display:flex;align-items:center;gap:10px;padding:14px 12px 14px 16px;border-radius:var(--r-panel);border:1px solid var(--line);background:var(--surface)}
#w-list li div{flex:1;min-width:0}
#w-list b{display:block;font-size:16px}
#w-list b em{font-style:normal;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:2px}
#w-list span{font-size:13px;color:var(--muted)}
#w-list strong{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#w-list li.night{background:var(--surface-2)}
#w-list li.night strong{color:var(--muted)}
.planner th{text-align:left;white-space:nowrap;position:sticky;left:0;background:var(--surface);z-index:1;font-size:14px;padding-right:12px}
.planner td{text-align:center;min-width:42px;padding:8px 3px;font-size:14px;white-space:nowrap;cursor:pointer;border-left:1px solid var(--line);line-height:1.2}
.planner td small{display:block;font-size:10px;color:var(--muted)}
.planner td.work{background:color-mix(in oklab,var(--ok) 14%,transparent)}
.planner td.night{background:var(--surface-2);color:var(--muted)}
.planner td.now{box-shadow:inset 0 3px 0 var(--accent)}
.planner td.pick{background:var(--accent);color:var(--accent-ink)}
.planner td.pick small{color:inherit}
#w-pick{min-height:1.5em;margin:10px 0 0;font-weight:600}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.tools a{display:block;text-decoration:none;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);transition:border-color .15s,transform .15s cubic-bezier(.16,1,.3,1)}
.tools a:hover{border-color:var(--accent);transform:translateY(-1px)}
.tools b{display:block}
.tools span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.more{margin-top:24px}
.more h2{font-size:18px}
#world h2,.more h2{margin-top:0}
.more{margin-top:28px}