/* 퇴근 카운트다운 전용 CSS (2026-10-18). 무대(하루 해 궤적 SVG + 궤적 안 큰 카운트다운 + 끝 라벨·문장·문구·타일 4) → 아래 두 칸(시간표 | 이번 주 요일 막대).
   툴 폭 620px 미만은 한 열(이번 주가 시간표 위, 결과 먼저). 색은 잉크 농도, accent 는 지난 궤적·해 한 곳. 공용 부품은 assets/v2.css
   움직임(R45): 첫 화면·시간표를 바꿀 때 해가 궤적을 따라 900ms 미끄러짐(tool.js), 응원 문구가 바뀔 때 페이드, 이번 주 막대 차오름. reduced-motion 이면 없음. 전체 화면(R46): 무대만 크게 */
.wd{container:wdw / inline-size}
.wd [hidden]{display:none !important}
.wd-stage{padding:16px 18px 14px;border-bottom:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 70%, var(--paper));text-align:center}
.wd-stage[data-phase="after"],.wd-stage[data-phase="off"]{background:color-mix(in srgb, var(--soft) 30%, var(--wash))}
/* 해 궤적과 그 안의 큰 수: 같은 상자에 겹침, 큰 수 크기는 궤적 폭(wdsky)에 비례 */
.wd-sky{position:relative;width:min(100%,640px);margin:0 auto;container:wdsky / inline-size}
.wd-arc{display:block;width:100%;height:auto;overflow:visible}
.wd-hz{stroke:var(--line);stroke-width:1px;vector-effect:non-scaling-stroke}
.wd-track{fill:none;stroke:var(--soft);stroke-width:7px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wd-done{fill:none;stroke:var(--accent);stroke-width:7px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wd-brk{fill:none;stroke:url(#wdHatch);stroke-width:15px;vector-effect:non-scaling-stroke}
.wd-hatch{fill:var(--ink);opacity:.55}
.wd-disc{fill:var(--accent)}
.wd-glow{fill:var(--accent);opacity:.14}
.wd-stage[data-phase="before"] .wd-sun,.wd-stage[data-phase="after"] .wd-sun{opacity:.45}
.wd-stage[data-phase="off"] .wd-sun,.wd-stage[data-phase="err"] .wd-sun{display:none}
.wd-stage[data-phase="off"] .wd-track{stroke-dasharray:2 7}
.wd-core{position:absolute;left:0;right:0;bottom:5%;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.wd-label{display:block;max-width:64%;overflow-wrap:anywhere}
.wd-count{margin:0;display:flex;align-items:baseline;justify-content:center;font-family:var(--sans);font-weight:800;font-size:clamp(28px,11.4cqi,74px);line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.wd-count small{font-size:.38em;font-weight:700;color:var(--muted);margin-left:1px}
.wd-stage[data-phase="off"] .wd-count{font-size:clamp(24px,8.6cqi,58px)}
.wd-stage[data-phase="err"] .wd-count{color:var(--muted);opacity:.6}
/* 퇴근길 트랙(2026-10-19 사용자 '달리는 모션·재미 요소'): 출근(10%) → 퇴근 문(90%), 사람 위치 = 하루 진행(--p, tool.js), 궤적 아래라 큰 수와 겹치지 않음.
   근무 중 달리기(다리·팔 번갈아, --cyc: 절반까지 0.9s → 0.62s → 마지막 10% 0.4s + 먼지), 휴게 커피(김), 출근 전 숨 고르기, 퇴근 뒤 문 앞에서 두 팔 들고 세 번 뜀, 쉬는 날 누워서 z. reduced-motion 이면 자세만 */
.wd-lane{position:relative;width:min(100%,640px);height:48px;margin:4px auto 0;--p:0;--cyc:.9s}
.wd-lane::before{content:"";position:absolute;left:10%;right:10%;bottom:0;border-top:1px dashed var(--line)}
.wd-lane::after{content:"";position:absolute;left:10%;bottom:0;width:1px;height:10px;background:var(--line)}
.wd-door{position:absolute;left:calc(90% + 6px);bottom:0;width:22px;height:33px;overflow:visible}
.wd-frame{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.wd-leaf{fill:var(--wash);stroke:var(--muted);stroke-width:1.2;transform-box:view-box;transform-origin:4px 0;transition:transform var(--duration-slow,400ms) cubic-bezier(.22,1,.36,1)}
.wd-knob{fill:var(--muted)}
.wd-stage[data-phase="after"] .wd-leaf{transform:scaleX(.35)}
.wd-runner{position:absolute;left:calc(10% + var(--p) * 80%);bottom:0;width:40px;transform:translateX(-50%);line-height:0}
.wd-man{display:block;width:100%;height:auto;overflow:visible}
.wd-limb{fill:none;stroke:var(--ink);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.wd-torso{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round}
.wd-head{fill:var(--ink)}
.wd-bag{fill:var(--muted);stroke:var(--ink);stroke-width:1.4}
.wd-body,.wd-leg,.wd-arm{transform-box:view-box}
.wd-body{transform-origin:21px 46px}
.wd-leg{transform-origin:21px 29px}
.wd-arm{transform-origin:23px 17px}
.wd-cup,.wd-zz,.wd-dust{display:none}
.wd-mug{fill:var(--paper);stroke:var(--muted);stroke-width:1.6;stroke-linejoin:round}
.wd-steam{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-linecap:round;opacity:.7}
.wd-zz text{font-family:var(--sans);font-size:8px;font-weight:700;fill:var(--muted)}
.wd-dust circle{fill:var(--soft)}
.wd-stage[data-phase="err"] .wd-runner{display:none}
/* 근무: 달리기 */
.wd-stage[data-phase="work"] .wd-body{transform:rotate(9deg);animation:wd-bob calc(var(--cyc) / 2) ease-in-out infinite alternate}
.wd-stage[data-phase="work"] .wd-leg-a,.wd-stage[data-phase="work"] .wd-arm-b{--sw:34deg;animation:wd-swing var(--cyc) ease-in-out infinite alternate}
.wd-stage[data-phase="work"] .wd-leg-b,.wd-stage[data-phase="work"] .wd-arm-a{--sw:34deg;animation:wd-swing var(--cyc) ease-in-out infinite alternate-reverse}
.wd-stage[data-phase="work"] .wd-lane.is-sprint .wd-dust{display:block;animation:wd-dust var(--cyc) ease-out infinite}
@keyframes wd-swing{from{transform:rotate(calc(var(--sw) * -1))}to{transform:rotate(var(--sw))}}
@keyframes wd-bob{from{transform:rotate(9deg) translateY(0)}to{transform:rotate(9deg) translateY(-2px)}}
@keyframes wd-dust{from{opacity:.9;transform:translateX(0) scale(.6)}to{opacity:0;transform:translateX(-6px) scale(1.3)}}
/* 휴게: 커피 */
.wd-stage[data-phase="break"] .wd-cup{display:block}
.wd-stage[data-phase="break"] .wd-arm-b{transform:rotate(-58deg)} /* 커피 든 손 */
.wd-stage[data-phase="break"] .wd-steam{animation:wd-steam 1.8s ease-in-out infinite}
@keyframes wd-steam{0%{opacity:0;transform:translateY(2px)}40%{opacity:.75}100%{opacity:0;transform:translateY(-4px)}}
/* 출근 전: 숨 고르기 */
.wd-stage[data-phase="before"] .wd-body{animation:wd-breathe 2.4s ease-in-out infinite}
@keyframes wd-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.97)}}
/* 퇴근 뒤: 문 앞에서 두 팔 들고 세 번 뜀 */
.wd-stage[data-phase="after"] .wd-arm-a{transform:rotate(115deg)} /* 가방 들고 만세 */
.wd-stage[data-phase="after"] .wd-arm-b{transform:rotate(-115deg)}
.wd-stage[data-phase="after"] .wd-body{animation:wd-hop .5s cubic-bezier(.22,1,.36,1) 3}
@keyframes wd-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px)}}
/* 쉬는 날: 누워서 잠 */
.wd-stage[data-phase="off"] .wd-body{transform-origin:22px 28px;transform:translateY(16px) rotate(-90deg)}
.wd-stage[data-phase="off"] .wd-leg-a{transform:rotate(10deg)}
.wd-stage[data-phase="off"] .wd-leg-b{transform:rotate(-10deg)}
.wd-stage[data-phase="off"] .wd-zz{display:block}
.wd-stage[data-phase="off"] .wd-zz text{animation:wd-zz 2.6s ease-in-out infinite}
.wd-stage[data-phase="off"] .wd-zz text + text{animation-delay:1.3s}
@keyframes wd-zz{0%{opacity:0;transform:translate(0,4px)}30%{opacity:1}100%{opacity:0;transform:translate(4px,-6px)}}
.wd-ends{display:flex;justify-content:space-between;align-items:baseline;gap:2px 10px;flex-wrap:wrap;width:min(100%,640px);margin:4px auto 0;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.wd-ends span:empty{display:none}
.wd-sub{margin:12px auto 0;max-width:560px;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums lining-nums}
.wd-sub.is-err{color:var(--accent)}
.wd-msg{margin:6px auto 0;max-width:560px;font-size:14px;font-style:italic;line-height:1.55;color:var(--muted)}
.wd-msg.is-new{animation:wd-fade .5s ease-out}
@keyframes wd-fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.wd-tiles{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:left}
.wd-tiles li{min-width:0;padding:9px 10px 10px;background:var(--paper);border:1px solid var(--soft);border-radius:var(--radius)}
.wd-tiles span{display:block;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.35}
.wd-tiles em{font-style:normal;font-weight:400;margin-left:4px;opacity:.85}
.wd-tiles b{display:block;margin-top:3px;font-family:var(--sans);font-size:17px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.wd-stage[data-phase="off"] .wd-tiles li:not(:last-child),.wd-stage[data-phase="err"] .wd-tiles{display:none}
.wd-stage[data-phase="off"] .wd-tiles{grid-template-columns:minmax(0,1fr);max-width:320px;margin-left:auto;margin-right:auto}
.wd-alert{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:12px 0 0;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:var(--radius);text-align:left}
.wd-alert b{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink)}
.wd-foot{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:14px 0 0}
.wd-foot .v2-status{flex:0 1 auto;overflow-wrap:anywhere}
.wd-fullhint{display:none;margin:12px 0 0;font-family:var(--sans);font-size:12px;color:var(--muted)}
/* 아래 두 칸 */
.wd-lower{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.wd-set{order:1;padding:16px 18px 18px;min-width:0}
.wd-week{order:2;padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft)}
.wd-head{display:flex;justify-content:space-between;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.wd-wkval{font-family:var(--sans);font-size:15px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.wd-days{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.wd-days li{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.wd-days b{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted)}
.wd-days .is-today b{color:var(--ink);font-weight:800}
.wd-bar{position:relative;display:block;width:100%;max-width:34px;height:72px;margin:5px auto 4px;background:var(--paper);border:1px solid var(--soft);border-radius:3px;overflow:hidden}
.wd-bar s{position:absolute;left:0;right:0;bottom:0;display:block;height:0;background:var(--fill);text-decoration:none;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.wd-days .is-today .wd-bar{border-color:var(--ink)}
.wd-days .is-off .wd-bar{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--soft) 4px 5.5px)}
.wd-days small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.wd-days .is-today small{color:var(--ink);font-weight:700}
.wd-wknote{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.wd-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px}
.wd-fields .v2-f{min-width:0}
.wd-fields .v2-f.full{grid-column:1 / -1}
.wd-fields .v2-f>.v2-label{display:block}
.wd-sel,.wd-time{display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);box-sizing:border-box}
.wd-time{padding:0 10px;font-size:15px;font-variant-numeric:tabular-nums lining-nums}
.wd-time:disabled{opacity:.5}
.wd-sel:focus,.wd-time:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.wd-time[aria-invalid="true"]{border-color:var(--accent)}
.wd-chips{display:flex;flex-wrap:wrap;gap:4px}
.wd-chips button,.wd-wds button{height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:13px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums lining-nums;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.wd-chips button{flex:1 1 56px;min-width:0}
.wd-wds{display:flex;gap:4px}
.wd-wds button{flex:1 1 0;min-width:0;padding:0}
.wd-chips button:hover,.wd-wds button:hover{background:var(--btn);color:var(--ink)}
.wd-chips button[aria-pressed="true"],.wd-wds button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.wd-wds.is-invalid button{border-color:var(--accent)}
.wd-opts{display:flex;flex-wrap:wrap;gap:10px 18px}
.wd-fields .v2-switch small{font-weight:400;color:var(--muted)}
.wd-note{margin:12px 0 0;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere}
.wd-acts{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0}
.wd-acts a.v2-btn{text-decoration:none}
.wd-save{margin:10px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.55;color:var(--muted)}
/* 좁은 툴 폭: 한 열(이번 주 먼저), 타일 두 칸, 끝 라벨의 휴게는 아랫줄 */
@container wdw (max-width:619px){
  .wd-lower{grid-template-columns:minmax(0,1fr)}
  .wd-week{order:1;border-left:0;border-bottom:1px solid var(--soft)}
  .wd-set{order:2}
}
@container wdw (max-width:519px){
  .wd-stage{padding:14px 12px 12px}
  .wd-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-ends #wdEndBk{order:3;flex-basis:100%;text-align:center}
}
/* 전체 화면(R46) */
.wd-stage:fullscreen,.wd-stage.is-full{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;border:0;background:var(--paper)}
.wd-stage.is-full{position:fixed;inset:0;z-index:1000;overflow:auto}
.wd-stage:fullscreen .wd-sky,.wd-stage.is-full .wd-sky,.wd-stage:fullscreen .wd-ends,.wd-stage.is-full .wd-ends,.wd-stage:fullscreen .wd-lane,.wd-stage.is-full .wd-lane{width:min(94vw,calc((100vh - 340px) * 2.5),1100px)}
.wd-stage:fullscreen .wd-lane,.wd-stage.is-full .wd-lane{height:66px}
.wd-stage:fullscreen .wd-runner,.wd-stage.is-full .wd-runner{width:56px}
.wd-stage:fullscreen .wd-door,.wd-stage.is-full .wd-door{width:31px;height:47px}
.wd-stage:fullscreen .wd-count,.wd-stage.is-full .wd-count{font-size:11.4cqi}
.wd-stage:fullscreen .wd-sub,.wd-stage.is-full .wd-sub{max-width:760px;font-size:clamp(14px,2.2vmin,20px)}
.wd-stage:fullscreen .wd-msg,.wd-stage.is-full .wd-msg{font-size:clamp(14px,2.2vmin,20px)}
.wd-stage:fullscreen .wd-tiles,.wd-stage.is-full .wd-tiles{width:min(100%,900px)}
.wd-stage:fullscreen #wdCopy,.wd-stage.is-full #wdCopy,.wd-stage:fullscreen .v2-status,.wd-stage.is-full .v2-status{display:none}
.wd-stage:fullscreen .wd-fullhint,.wd-stage.is-full .wd-fullhint{display:block}
html.wd-noscroll{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .wd-bar s{transition:none}
  .wd-msg.is-new{animation:none}
  .wd-man *,.wd-leaf{animation:none !important;transition:none}
}