/* 초침 — 타이머·시간 도구 */
:root{
  --bg:#f6f8fc;--card:#fff;--ink:#0f172a;--soft:#55607a;--faint:#94a0b8;--line:#e3e8f2;
  --pri:#2563eb;--pri2:#1d4ed8;--tint:#eaf1ff;--ok:#16a34a;--warn:#dc2626;
  --shadow:0 6px 24px rgba(15,40,100,.07);
}
@media(prefers-color-scheme:dark){:root{
  --bg:#0b1020;--card:#121a2e;--ink:#e8eefc;--soft:#a9b4cc;--faint:#6f7b96;--line:#24304a;
  --tint:#16233f;--shadow:none;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;line-height:1.65;word-break:keep-all}
a{color:inherit}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}

header.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:58px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:21px;letter-spacing:-.03em;text-decoration:none}
.logo small{font-size:12px;font-weight:600;color:var(--faint);letter-spacing:0;margin-left:2px}
nav.tools{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 0 10px}
nav.tools::-webkit-scrollbar{display:none}
nav.tools a{flex:none;padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:14px;text-decoration:none;color:var(--soft)}
nav.tools a:hover{border-color:var(--pri);color:var(--pri2)}
nav.tools a.on{background:var(--pri);color:#fff;border-color:var(--pri)}

.crumb{font-size:13px;color:var(--faint);margin:18px 0 0}
.crumb a{text-decoration:none}
h1{font-size:28px;letter-spacing:-.025em;margin:6px 0 6px;line-height:1.3}
.lede{color:var(--soft);margin:0 0 18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.panel+.panel{margin-top:14px}
label{font-size:14px;font-weight:700;display:block;margin:0 0 6px}
.hint{font-size:13px;color:var(--faint);font-weight:400}
input[type=text],input[type=number],input[type=date],input[type=time],select{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--pri);outline-offset:-1px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:12px 0 0}
.row>*{flex:1 1 120px}
.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;margin:12px 0 0;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--pri)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.btn{appearance:none;border:0;border-radius:14px;padding:12px 20px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;background:var(--pri);color:#fff;transition:background .15s,transform .05s}
.btn:hover{background:var(--pri2)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--tint);color:var(--pri2)}
.btn.big{flex:1 1 100%;padding:16px;font-size:19px}
.btn.stop{background:#475569}
.btn:disabled{opacity:.5;cursor:default}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
.chip{appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--soft);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.chip:hover,.chip.on{border-color:var(--pri);color:var(--pri2)}
.err{color:var(--warn);font-size:14px;margin:8px 0 0;min-height:1em}

/* 큰 시계 */
.clockpanel{text-align:center}
.mode{display:inline-block;font-size:14px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--tint);color:var(--pri2);margin:0 0 4px}
.mode.rest{background:#dcfce7;color:#15803d}
.clock{font-size:clamp(56px,15vw,132px);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;margin:6px 0 4px;white-space:nowrap}
.clock small{font-size:.42em;font-weight:700;color:var(--soft);letter-spacing:0}
.clock.done{color:var(--warn);animation:blink 1s steps(2) infinite}
/* 큰 시계(타이머·스톱워치·현재시간): 시계 상자 너비(cqi)에 맞춰 꽉 차게. --k = 글자 폭 실측 기준 배율 */
.clockpanel{container-type:inline-size}
.clock.xl{--k:16;--cap:132px}
.clock.tm{--k:33;--cap:260px}
.clock.tm[data-len="7"]{--k:25;--cap:230px}
.clock.tm[data-len="8"]{--k:21;--cap:200px}
.clock.sw{--k:27;--cap:240px}
.clock.sw[data-h]{--k:21;--cap:200px}
.clock.nw{--k:18.6;--cap:170px}
.clock.nw small{font-size:.32em}
@supports (font-size:1cqi){.clock.xl{font-size:min(calc(var(--k) * 1cqi),var(--cap))}}
@keyframes blink{50%{opacity:.25}}
.sub{color:var(--soft);font-size:15px;margin:2px 0 0;font-variant-numeric:tabular-nums}
.tbar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:12px auto 0;max-width:520px}
.tbar i{display:block;height:100%;width:0;background:var(--pri);border-radius:999px;transition:width .25s linear}
.setter{display:flex;gap:10px;justify-content:center;margin:14px 0 0}
.setter label{flex:0 1 110px;text-align:center;font-size:13px;color:var(--soft);font-weight:600}
.setter input{text-align:center;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;padding:8px 4px}
.dots{display:flex;gap:6px;justify-content:center;margin:10px 0 0}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--pri)}

/* 전체화면 */
.clockpanel:fullscreen,.clockpanel.fs{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:0;border:0;padding:24px;background:var(--bg)}
.clockpanel.fs{position:fixed;inset:0;z-index:100}
.clockpanel:fullscreen .clock,.clockpanel.fs .clock{font-size:min(24vw,40vh)}
.clockpanel:fullscreen .clock.xl,.clockpanel.fs .clock.xl{font-size:min(calc(var(--k) * 1cqi),62vh)}
.clockpanel:fullscreen .hint,.clockpanel.fs .hint,.clockpanel:fullscreen .setter,.clockpanel.fs .setter,.clockpanel:fullscreen .chips,.clockpanel.fs .chips,.clockpanel:fullscreen .check,.clockpanel.fs .check{display:none}

/* 랩 표 */
table.laps{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.laps th,table.laps td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right}
table.laps th:first-child,table.laps td:first-child{text-align:left}
table.laps th{font-size:13px;color:var(--faint);font-weight:600}
table.laps tr.best td{color:var(--ok);font-weight:700}
table.laps tr.worst td{color:var(--warn);font-weight:700}

/* 세계시간 */
.cities{list-style:none;margin:0;padding:0}
.cities li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}
.cities .nm b{display:block;font-size:17px}
.cities .nm span{font-size:13px;color:var(--faint)}
.cities .tm{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;line-height:1.2}
.cities .tm span{display:block;font-size:12px;font-weight:600;color:var(--faint)}
.cities .x{appearance:none;border:0;background:none;color:var(--faint);font-size:18px;cursor:pointer;padding:4px 6px}
.cities li.home .tm{color:var(--pri2)}
.plan{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
.plan th,.plan td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left}
.plan td.work{color:var(--ok);font-weight:700}
.plan td.night{color:var(--faint)}

/* 카운트다운 */
.cd{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0 0}
.cd div{min-width:92px;padding:12px 10px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.cd b{display:block;font-size:clamp(34px,8vw,56px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.cd span{font-size:13px;color:var(--faint)}
.dday{font-size:22px;font-weight:800;color:var(--pri2)}

/* 문서 */
.doc{margin:34px 0 0}
.doc h2{font-size:21px;letter-spacing:-.02em;margin:30px 0 10px}
.doc p,.doc li{color:var(--soft)}
.doc ol,.doc ul{padding-left:22px}
.doc strong{color:var(--ink)}
.doc table{width:100%;border-collapse:collapse;font-size:14px;color:var(--soft)}
.doc th,.doc td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left}
.doc th{color:var(--ink)}
details{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:8px 0;background:var(--card)}
details summary{font-weight:700;cursor:pointer}
details p{margin:8px 0 0}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:14px 0 0}
.grid.home{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.grid.home{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.grid.home{grid-template-columns:1fr}}
.tcard{display:block;padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-decoration:none;transition:border-color .15s,transform .15s}
.tcard:hover{border-color:var(--pri);transform:translateY(-2px)}
.tcard .em{font-size:30px;line-height:1}
.tcard b{display:block;margin:8px 0 2px;font-size:17px}
.tcard span{font-size:13px;color:var(--soft);line-height:1.5}
/* 첫 화면 = 시계 (타이머·스톱워치·현재시간): 헤더 아래 화면을 꽉 채움 */
:root{--hdr:107px}
.stagewrap{background:var(--card);border-bottom:1px solid var(--line)}
.clockpanel.stage{border:0;border-radius:0;box-shadow:none;background:transparent;margin:0;padding:14px 16px 12px;
  min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;align-items:center}
.clockpanel.stage .clock,.clockpanel.stage .tbar{width:100%}
.clockpanel.stage .btns,.clockpanel.stage .setter,.clockpanel.stage .chips{width:100%;max-width:640px}
.clockpanel.stage .clock.xl{--cap:52vh}
.clockpanel.stage .clock.tm:not([data-len="7"]):not([data-len="8"]){--k:34.5}
/* 타이머 집중 모드: 도는 동안엔 빠른 시간 버튼·알림 체크·단축키를 숨기고 그만큼 숫자를 키움 */
.clockpanel.stage.running{--rest:235px}
.clockpanel.stage.running .chips,.clockpanel.stage.running .check,.clockpanel.stage.running .hint{display:none}
/* 타이머는 입력칸·버튼이 많아 화면 높이에서 그만큼(--rest) 빼고 남는 높이까지만 키움 */
.clockpanel.stage{--rest:470px}
.clockpanel.stage .clock.tm{--cap:min(52vh,max(56px,calc((100vh - var(--hdr) - var(--rest)) / 1.06)));
  --cap:min(52vh,max(56px,calc((100svh - var(--hdr) - var(--rest)) / 1.06)))}
/* 세계시간: 도시 카드를 화면 폭 전체에 가로로 (넓으면 한 줄에 전부) */
.stagewrap>.panel.wide:not(.stage){width:auto;max-width:1880px;margin:0 auto;border:0;border-radius:0;box-shadow:none;background:transparent;padding:20px 16px 14px;text-align:center}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;text-align:left}
.wcard{position:relative;padding:14px 14px 12px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.wcard.home{border-color:var(--pri);background:var(--tint)}
.wcard.night{background:color-mix(in srgb,var(--bg) 82%,#000)}
.wcard .nm{font-size:15px;font-weight:800;padding-right:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcard .cc{font-size:12px;color:var(--faint);margin-left:5px;font-weight:600}
.wcard .tm{font-size:clamp(30px,2.6vw,40px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.15;margin:8px 0 4px}
.wcard.home .tm{color:var(--pri2)}
.wcard .tm small{font-size:.5em;color:var(--soft);font-weight:700}
.wcard .dy{font-size:12.5px;color:var(--soft)}
.wcard .df{font-size:12.5px;color:var(--faint)}
.wcard .x{position:absolute;top:6px;right:6px;appearance:none;border:0;background:none;color:var(--faint);font-size:15px;cursor:pointer;padding:4px 6px;border-radius:8px}
.wcard .x:hover{background:var(--line);color:var(--ink)}
.wide .addrow{max-width:560px;margin:16px auto 0;text-align:left}
.wide .more{display:inline-block;margin-top:12px;font-size:13px;color:var(--faint);text-decoration:none}
@media(max-width:420px){.wgrid{grid-template-columns:1fr 1fr;gap:8px}.wcard{padding:10px 10px 8px}.wcard .cc{display:none}
  .wcard .tm{font-size:27px;margin:5px 0 3px}.stagewrap>.panel.wide:not(.stage){padding-top:12px}}

/* 카운트다운: 일·시·분·초 네 칸을 화면 폭에 맞춰 크게.
   칸 폭(--cw) ÷ 숫자 폭(실측: 3자리 1.94em, 4자리 2.59em) 으로 글자 크기를 역산 */
.clockpanel.stage .cd{--cw:min(25cqi,460px);--r:2.05;width:100%;max-width:1840px;gap:clamp(6px,1.2cqi,18px);flex-wrap:nowrap}
/* 남은 일수 자릿수(data-len)에 맞춰 네 칸을 함께: 2자리면 1.38, 3자리 2.05, 4자리 이상 2.72 */
.clockpanel.stage .cd[data-len="1"],.clockpanel.stage .cd[data-len="2"]{--r:1.38}
.clockpanel.stage .cd[data-len="4"],.clockpanel.stage .cd[data-len="5"]{--r:2.72}
/* 카드는 숫자에 맞춰 작게(폭 = 숫자 + 좁은 여백), 숫자 크기는 화면 폭 기준 그대로 */
.clockpanel.stage .cd{justify-content:center}
.clockpanel.stage .cd div{flex:0 0 auto;min-width:0;padding:clamp(4px,.7cqi,12px) clamp(6px,.6cqi,12px) clamp(6px,.8cqi,12px)}
.clockpanel.stage .cd b{line-height:1}
.clockpanel.stage .cd b{font-size:min(calc((var(--cw) - 14px) / var(--r)),30vh);white-space:nowrap;letter-spacing:-.02em}
.clockpanel.stage .cd span{font-size:clamp(12px,1.3cqi,20px)}
.clockpanel.stage .dday{font-size:min(7cqi,7vh,64px);margin:6px 0 10px}
.clockpanel:fullscreen .cd b,.clockpanel.fs .cd b{font-size:min(calc((var(--cw) - 14px) / var(--r)),40vh)}
@media(max-width:560px){ /* 휴대폰: 2×2 로 칸을 넓혀 숫자를 키움 */
  .clockpanel.stage .cd{--cw:calc(50cqi - 4px);flex-wrap:wrap;gap:8px}
  .clockpanel.stage .cd div{flex:0 0 auto}
  /* 2×2 높이 ≈ 글자×2.2 + 96px, 나머지(제목·D-day·버튼) ≈ 250px → 화면 높이에 맞춰 상한 */
  .clockpanel.stage .cd b{font-size:min(calc((var(--cw) - 14px) / var(--r)),calc((100vh - var(--hdr) - 345px) / 2.2));
    font-size:min(calc((var(--cw) - 14px) / var(--r)),calc((100svh - var(--hdr) - 345px) / 2.2))}}

/* 회의 시간 맞추기: 가로 24시간 시간표 */
.stagewrap>.panel.planw:not(.stage){text-align:left;padding-top:4px;padding-bottom:22px}
.planw .ptitle{font-size:19px;margin:0 0 4px}
.planw .planctl{max-width:520px;margin-top:6px}
.planw .best{font-size:14.5px;font-weight:700;color:var(--pri2);margin:12px 0 8px}
.planw .tl{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.tline{border-collapse:separate;border-spacing:0;width:100%;min-width:1060px;font-variant-numeric:tabular-nums;font-size:13px}
.tline th,.tline td{padding:8px 2px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.tline tr:last-child td,.tline tr:last-child th{border-bottom:0}
.tline thead th{font-size:12px;color:var(--faint);font-weight:700;cursor:pointer;background:var(--card)}
.tline .cn{position:sticky;left:0;z-index:2;background:var(--card);text-align:left;padding:8px 12px;font-weight:700;min-width:104px;border-right:1px solid var(--line);cursor:default}
.tline tr.home .cn{color:var(--pri2)}
.tline td{cursor:pointer;font-weight:600}
.tline td.work{background:color-mix(in srgb,#16a34a 24%,transparent);color:var(--ink)}
.tline td.night{background:color-mix(in srgb,#000 28%,transparent);color:var(--faint);font-weight:500}
.tline td.eve{color:var(--soft)}
.tline .sel{box-shadow:inset 0 0 0 2px var(--pri)}
.tline thead th.sel{color:#fff;background:var(--pri)}
.tline sup{font-size:9px;color:var(--faint);margin-left:1px}
.planw .hint{color:var(--soft);font-weight:500;margin-top:10px}
.planw .hint sup{color:var(--soft)}
.planw .lg{font-weight:700;padding:0 5px;border-radius:4px}
.planw .lg.w{background:color-mix(in srgb,#16a34a 24%,transparent)}
.planw .lg.n{background:color-mix(in srgb,#000 28%,transparent)}

/* 뽀모도로: 타이머와 같은 숫자 폭, 아래 버튼·점·오늘 횟수 높이(--rest-pm)만큼 빼고 키움 */
.clock.pm{--k:34.5;--cap:260px}
.clock.pm[data-len="7"]{--k:25;--cap:230px}
.clockpanel.stage .clock.pm{--cap:min(52vh,max(56px,calc((100vh - var(--hdr) - var(--rest-pm,372px)) / 1.06)));
  --cap:min(52vh,max(56px,calc((100svh - var(--hdr) - var(--rest-pm,372px)) / 1.06)))}
@media(max-width:700px){.clockpanel.stage .hint{display:none}.clockpanel.stage{--rest:470px}}
.stagewrap>.panel:not(.stage){width:calc(100% - 32px);max-width:848px;margin:0 auto 16px}
.stage .more{margin-top:12px;font-size:13px;color:var(--faint);text-decoration:none}
.stage .more:hover{color:var(--pri2)}
.intro{padding-top:6px;scroll-margin-top:calc(var(--hdr) + 8px)}

/* 홈: 대표 도구 3개 크게 + 나머지 작게 */
.grid.feat{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fcard{display:flex;flex-direction:column;gap:4px;padding:22px 20px;border-radius:22px;background:var(--card);border:1px solid var(--line);text-decoration:none;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.fcard:hover{border-color:var(--pri);transform:translateY(-3px)}
.fcard .fh{display:flex;align-items:center;gap:8px}
.fcard .em{font-size:30px;line-height:1}
.fcard b{font-size:21px}
.fcard .big{font-size:clamp(34px,4.6vw,46px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--pri);line-height:1.15;margin:8px 0 2px;white-space:nowrap}
.fcard .big small{font-size:.5em;color:var(--soft)}
.fcard .d{font-size:13.5px;color:var(--soft);line-height:1.5}
.fcard .go{margin-top:auto;padding-top:10px;font-size:14px;font-weight:700;color:var(--pri2)}
.grid.mini{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.mcard{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-decoration:none}
.mcard:hover{border-color:var(--pri)}
.mcard .em{font-size:26px;flex:none}
.mcard b{display:block;font-size:15px}
.mcard i{display:block;font-style:normal;font-size:12.5px;color:var(--soft);line-height:1.4}
@media(max-width:700px){.grid.feat,.grid.mini{grid-template-columns:1fr}}
.related{margin:40px 0 0}
.related h2{font-size:19px;margin:0}

.hero{text-align:center;padding:30px 0 10px}
.hero h1{font-size:34px;margin:0 0 8px}
.hero h1 em{font-style:normal;color:var(--pri)}
.hero .clock{font-size:clamp(48px,12vw,96px)}
.badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0 0}
.badges span{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--pri2);font-weight:600}

footer{margin:56px 0 0;padding:26px 0 40px;border-top:1px solid var(--line);font-size:13px;color:var(--faint);text-align:center}
footer nav{display:flex;gap:4px 12px;flex-wrap:wrap;justify-content:center;margin:0 0 12px}
footer nav a{text-decoration:none;color:var(--soft)}
footer .biz{line-height:1.8}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);background:#0f172a;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:200;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}

@media(max-width:560px){
  h1{font-size:24px}
  .hero h1{font-size:28px}
  .panel{padding:14px;border-radius:16px}
  .cities .tm{font-size:20px}
  .cd div{min-width:72px}
}