/* 작업 종료 시각 계산기 — 작업 시계판(2026-10-23). 판[시계판 | 끝나는 시각 · 합계 네 칸] → 조건 두 줄(작업 줄 / 휴식 줄) → 회차별 시간표 → 복사·링크.
   작업면 600px 이상: 시계판 236px 왼쪽 + 오른쪽에 끝나는 시각과 합계(2 × 2), 조건은 네 칸 두 줄.
   600px 미만: 시계판을 작게(124px) 끝나는 시각 옆에 두고 합계는 아래 2 × 2, 조건은 두 칸. 300px 미만은 위아래로 쌓는다.
   accent는 끝나는 시각(바늘)에만. 작업 호 = --fill, 휴식 = 얇은 선, 긴 휴식 = 빗금. */
.wte{container:wte / inline-size}
.wte [hidden]{display:none!important}
.wte-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wte-ttl{margin:0;font-family:var(--sans)}
.wte-ttl b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.wte-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.wte-exl{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}

/* 판 */
.wte-board{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-areas:"dial ans" "dial st";grid-template-rows:auto 1fr;gap:14px 24px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.wte-dial{grid-area:dial;margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.wte-svg{display:block;width:100%;max-width:236px;height:auto;aspect-ratio:1;overflow:visible}
.wte-ans{grid-area:ans;min-width:0;padding-top:4px}
.wte-ans .v2-big{margin-top:6px;flex-wrap:wrap;row-gap:2px;font-size:52px}
.wte-ans .v2-big small{font-family:var(--sans);font-size:14px;font-weight:700}
.wte-ans .v2-big.is-empty{font-size:22px}
.wte-ans .v2-sub{margin-top:8px}
.wte-stats{grid-area:st;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;align-content:end;min-width:0}
.wte-stats > div{min-width:0;padding:9px 0 10px;border-top:1px solid var(--soft)}
.wte-stats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.wte-stats dd{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;min-width:0}
.wte-stats b{font-family:var(--sans);font-size:16px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.wte-stats span{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.wte-now{position:relative}
.wte-now b{font-size:14px}
.wte-now.is-on span{color:var(--ink);font-weight:650}
.wte-nowbar{position:absolute;left:0;right:0;bottom:3px;height:3px;border-radius:2px;background:var(--soft);overflow:hidden}
.wte-nowbar i{display:block;width:0;height:100%;background:var(--muted);transition:width .6s ease}
.wte-now.is-on .wte-nowbar i{background:var(--ink)}

/* 시계판 */
.wte-track{fill:none;stroke:color-mix(in srgb,var(--soft) 70%,transparent)}
.wte-tk{stroke:var(--line);stroke-width:1}
.wte-tk.is-q{stroke:var(--muted);stroke-width:1.5}
.wte-num{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--muted);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.wte-num.is-q{font-weight:750;fill:var(--ink)}
.wte-a{fill:none;stroke-linecap:butt;transition:opacity var(--ease)}
.wte-a--w{stroke:color-mix(in srgb,var(--fill) 82%,var(--paper))}
.wte-a--s{stroke:var(--line)}
.wte-a--l{stroke:url(#wteHatch)}
.wte-hb{fill:color-mix(in srgb,var(--soft) 60%,var(--paper))}
.wte-hl{stroke:var(--muted);stroke-width:2}
.wte-a.is-hot{stroke:var(--ink)}
.wte-a--l.is-hot{stroke:url(#wteHatch);filter:drop-shadow(0 0 1.5px var(--ink))}
.wte-an{font-family:var(--sans);font-size:9.5px;font-weight:750;fill:var(--on-fill);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-variant-numeric:tabular-nums}
.wte-st{fill:var(--ink)}
.wte-hand line{stroke:var(--accent);stroke-linecap:round}
.wte-hand--h line{stroke-width:4.5}
.wte-hand--m line{stroke-width:2.5}
.wte-hand{transform-box:view-box;transform-origin:120px 120px}
.wte.is-ready .wte-hand{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.wte-pin{fill:var(--accent);stroke:var(--paper);stroke-width:1.5}
.wte-nd{fill:var(--ink);stroke:var(--paper);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:wte-pulse 2.4s ease-in-out infinite}
@keyframes wte-pulse{50%{transform:scale(1.25)}}
.wte-svg.is-sweep .wte-a,.wte-svg.is-sweep .wte-an{animation:wte-draw .55s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--d,0) * 1ms)}
.wte-svg.is-sweep .wte-a{stroke-dasharray:1 1}
@keyframes wte-draw{from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:1}}
.wte-dial.is-empty .wte-hand{opacity:0}
.wte-dial.is-empty .wte-pin{opacity:.25}
.wte-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 12px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.wte-leg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.wte-leg i{display:inline-block;width:14px;height:8px;border-radius:2px}
.wte-lw i{background:color-mix(in srgb,var(--fill) 82%,var(--paper))}
.wte-ls i{height:3px;background:var(--line)}
.wte-ll i{background:repeating-linear-gradient(135deg,var(--muted) 0 1.5px,color-mix(in srgb,var(--soft) 60%,var(--paper)) 1.5px 4px)}
@media (prefers-reduced-motion:reduce){
  .wte.is-ready .wte-hand,.wte-nowbar i{transition:none}
  .wte-nd,.wte-svg.is-sweep .wte-a,.wte-svg.is-sweep .wte-an{animation:none}
}

/* 조건 두 줄: 작업 줄(시작 · 한 회 작업 · 반복 횟수 · 총 작업 시간) / 휴식 줄(휴식 · 긴 휴식 주기 · 긴 휴식 · 마지막 작업 뒤) */
.wte-set{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr);gap:12px 14px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.wte-set .v2-input input[type="time"]{text-align:left}
.wte-set .v2-f > span.v2-label{display:block;margin:0 0 5px} /* 칸 이름이 label이 아닌 칸(총 작업 시간 두 입력·스위치)도 label과 같은 줄 높이 */
.wte-fs{position:relative}
.wte-fs > .v2-label{padding-right:52px}
.wte-nowb{position:absolute;top:-3px;right:0;height:21px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--ink);cursor:pointer;transition:background var(--ease)}
.wte-nowb:hover{background:var(--btn)}
.wte-nowb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wte-ft .v2-input input{padding:0 4px}
.wte-ft .v2-input b{min-width:0;padding:0 4px}
.wte-ft .v2-input b + input{border-left:0}
.wte-auto{margin-left:1px;font-style:normal;font-weight:400;color:var(--muted)}
.wte-set .is-auto .v2-input input{color:var(--muted)}
.wte-sel{display:block;width:100%;height:var(--v2-ctl,42px);padding:0 24px 0 9px;border:1px solid var(--line);border-radius:var(--radius);background-color:var(--paper);font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink)}
.wte-sel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wte-set .is-off{opacity:.5}
.wte-sw{display:flex!important;align-items:center;height:var(--v2-ctl,42px);min-width:0}
.wte-sw span{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.wte-msg{grid-column:1 / -1;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--accent)}

/* 회차별 시간표: 열은 위에서 아래로 채운다(--cols·--rows는 tool.js) */
.wte-sch{padding:12px 18px 14px;border-bottom:1px solid var(--soft)}
.wte-sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 8px}
.wte-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));grid-template-rows:repeat(var(--rows,1),auto);grid-auto-flow:column;column-gap:22px}
.wte-r{display:grid;grid-template-columns:var(--iw,2.4em) minmax(0,1fr) auto;align-items:baseline;gap:6px;padding:7px 4px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13.5px;transition:background var(--ease)}
.wte-ri{font-weight:750;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.wte-rt{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px}
.wte-rt b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.wte-rt i{font-style:normal;color:var(--muted)}
.wte-rt b u{text-decoration:none;margin-left:2px;font-size:10.5px;font-weight:650}
.wte-rt small,.wte-rt em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.wte-rg{font-size:12.5px;color:var(--muted);text-align:right;white-space:nowrap}
.wte-r.is-long .wte-rg{color:var(--ink);font-weight:700}
.wte-r.is-long{border-bottom:2px solid var(--line)}
.wte-r.is-last .wte-rg{color:var(--ink);font-weight:650}
.wte-r.is-hot{background:color-mix(in srgb,var(--wash) 80%,transparent)}
.wte-r.is-now{background:color-mix(in srgb,var(--soft) 55%,transparent)}
.wte-r.is-now .wte-ri,.wte-r.is-next .wte-ri{color:var(--ink)}
.wte-r.is-done .wte-rt b{color:var(--muted)}
.wte-list.is-measure{grid-template-columns:max-content!important;grid-template-rows:none!important;grid-auto-flow:row!important}
.wte-list.is-measure .wte-r{grid-template-columns:var(--iw,2.4em) max-content max-content}
.wte-list.is-measure .wte-rt{flex-wrap:nowrap}
.wte-list.is-fit .wte-r{grid-template-columns:var(--iw,2.4em) max-content minmax(0,1fr)}
.wte-list.is-fit .wte-rt{flex-wrap:nowrap}
.wte-list.is-fit .wte-rg{white-space:normal}
.wte-empty{padding:10px 4px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13px;color:var(--muted)}

.wte-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 18px}
.wte-fa{display:inline-flex;flex-wrap:wrap;gap:8px}
.wte-foot .v2-status{margin:0;flex:1 1 220px;min-width:0}
.wte-ns{margin:0;padding:12px 18px;font-family:var(--sans);font-size:13px;color:var(--muted)}

/* 좁은 작업면 */
@container wte (max-width:599px){
  .wte-board{grid-template-columns:124px minmax(0,1fr);grid-template-areas:"dial ans" "st st";grid-template-rows:auto auto;gap:12px 16px;padding:14px 16px}
  .wte-dial{align-self:center}
  .wte-leg{display:none}
  .wte-ans .v2-big{font-size:40px}
  .wte-set{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 16px}
  .wte-sch,.wte-foot{padding-left:16px;padding-right:16px}
}
@container wte (max-width:299px){
  .wte-board{grid-template-columns:minmax(0,1fr);grid-template-areas:"dial" "ans" "st"}
  .wte-dial{width:180px;margin:0 auto}
  .wte-stats,.wte-set{grid-template-columns:minmax(0,1fr)}
}