/* 24시간 원형 시간표(daily-time-wheel) — 하루 시계판. 작업면 컨테이너 dtww:
   790 이상 [원판(두 줄 차지) | 편집 칸 / 하루 순서(원판 높이에 맞춰 스크롤, 줄 수 × 줄 높이)] → 하루 합계(여러 단),
   680~789 [원판 | 편집 칸] → 하루 순서·하루 합계(560 이상 두 단), 680 미만 한 줄(원판 → 편집 → 순서 → 합계).
   (셸 본문 폭: 화면 1280 → 648, 1440 → 약 808, 1600 → 828)
   칸 사이 선은 격자 gap 1px + 바탕 soft. 강조색은 지금 바늘·끄는 미리 보기·오류에만. 조각 색은 사용자가 고른 색 그대로(다크에서도). */
.dtw{container:dtww / inline-size}
.dtw [hidden]{display:none !important}

/* ---------- 머리: 제목 · 작은 설명 / 시작 틀 · 되돌리기 · 저장 ---------- */
.dtw-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:14px 16px 13px;border-bottom:1px solid var(--soft)}
.dtw-bar{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 14px}
.dtw-tplw{display:flex;flex-direction:column;gap:5px;min-width:0}
.dtw-tpl{display:flex;flex-wrap:wrap;gap:4px}
.dtw-tpl button{height:32px;padding:0 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);cursor:pointer;white-space:nowrap}
.dtw-tpl button:hover{background:var(--btn)}
.dtw-tpl button.is-blank{border-style:dashed;color:var(--muted)}
.dtw-act{display:flex;flex-wrap:wrap;gap:6px}
.dtw-act .v2-btn{white-space:nowrap}

/* ---------- 본판 격자 ---------- */
.dtw-main{display:grid;gap:1px;background:var(--soft);grid-template-columns:minmax(0,1fr);grid-template-areas:"wheel" "ed" "list" "tot"}
.dtw-main > *{background:var(--card);min-width:0}
.dtw-wheel{grid-area:wheel;padding:14px 16px 12px}
.dtw-ed{grid-area:ed;padding:13px 16px 14px}
.dtw-lw{grid-area:list;padding:12px 16px 12px;display:flex;flex-direction:column;min-height:0}
.dtw-totw{grid-area:tot;padding:12px 16px 14px}

/* ---------- 원판 ---------- */
.dtw-wbox{max-width:560px;margin:0 auto}
.dtw-dial{position:relative;container:dtwd / inline-size}
.dtw-svg{display:block;width:100%;height:auto;aspect-ratio:1;font-family:var(--sans);touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overflow:visible}
.dtw-face{fill:var(--wash)}
.dtw-ticks path{stroke:var(--line);stroke-width:.8;fill:none}
.dtw-ticks .is-h{stroke-width:1.6}
.dtw-hours text{font-size:calc(11.5px * var(--u,1));font-weight:600;fill:var(--muted);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.dtw-hours .is-6{font-size:calc(13.5px * var(--u,1));font-weight:800;fill:var(--ink)}
.dtw-free{fill:url(#dtwHatch);fill-rule:evenodd;cursor:crosshair}
.dtw-hbg{fill:var(--paper)}
.dtw-hln{stroke:var(--soft);stroke-width:2.2}
.dtw-sl{stroke:var(--card);stroke-width:2;stroke-linejoin:round;cursor:pointer}
.dtw-svg:not(.is-drag) .dtw-sl:hover{filter:brightness(.96)}
#dtwLab{pointer-events:none}
.dtw-lb text{text-anchor:middle;dominant-baseline:central}
.dtw-ln{font-weight:700}
.dtw-ld{font-weight:500;opacity:.78}
.dtw-ic{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--sans)}
.dtw-past{fill:var(--accent);opacity:.2;pointer-events:none}
.dtw-ghost{fill:var(--accent-wash);stroke:var(--accent);stroke-width:2;stroke-dasharray:6 4;pointer-events:none}
.dtw-selp{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;pointer-events:none}
.dtw-hub{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.dtw-hubt text{text-anchor:middle;dominant-baseline:central;font-weight:800;fill:var(--ink);pointer-events:none}
.dtw-nowg{pointer-events:none;transform-box:view-box;transform-origin:300px 300px;transition:transform .8s var(--ease,ease)}
.dtw-nowg.is-jump{transition:none}
.dtw-nowg path{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}
.dtw-nowg circle{fill:var(--accent);stroke:var(--card);stroke-width:2}
.dtw-dragt{opacity:0;pointer-events:none;transition:opacity .15s}
.dtw-svg.is-drag .dtw-dragt{opacity:1}
.dtw-dragt circle{fill:var(--paper);stroke:var(--accent);stroke-width:1.5}
.dtw-dragt text{text-anchor:middle;dominant-baseline:central;fill:var(--ink);font-variant-numeric:tabular-nums}
.dtw-dta{font-size:calc(15px * var(--u,1));font-weight:800}
.dtw-dtb{font-size:calc(12px * var(--u,1));font-weight:600;fill:var(--muted) !important}
.dtw-h{cursor:grab;touch-action:none;outline:none}
.dtw-svg.is-drag .dtw-h{cursor:grabbing}
.dtw-hhit{fill:transparent}
.dtw-hk{fill:var(--card);stroke:var(--ink);stroke-width:3;transition:r .15s}
.dtw-h:hover .dtw-hk{r:11}
.dtw-h:focus-visible .dtw-hk{stroke:var(--accent);stroke-width:4;r:11}
.dtw-sweep{stroke-dashoffset:0}
.dtw-svg.is-sweep .dtw-sweep{animation:dtw-sweep .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes dtw-sweep{from{stroke-dashoffset:1088}to{stroke-dashoffset:0}}
.dtw-hint{display:none}
@container dtwd (min-width:500px){
  .dtw-hint{display:block;position:absolute;left:0;bottom:2px;max-width:116px;margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted);pointer-events:none}
}

/* 원판 아래 줄: 지금 · 지금 바늘 / 가운데 사진 단추 */
.dtw-cap{display:flex;align-items:center;gap:8px;margin-top:8px}
.dtw-now{flex:1 1 auto;min-width:0;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 8px;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--ink)}
.dtw-now b{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.dtw-now span{min-width:0}
.dtw-wt{display:flex;gap:4px;flex:none;margin-left:auto}
.dtw-ib{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);cursor:pointer}
.dtw-ib:hover{background:var(--btn)}
.dtw-ib svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dtw-ib[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

/* ---------- 선택한 일정 편집 ---------- */
.dtw-ednone p{margin:6px 0 0;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--ink)}
.dtw-edh{display:flex;align-items:baseline;gap:8px;margin:0 0 5px}
.dtw-edh .v2-label{flex:none}
.dtw input[type="text"],.dtw input[type="time"]{text-align:left}
.dtw-span{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.dtw-del{flex:none;padding:2px 0;border:0;background:none;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dtw-ftt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:8px}
.dtw-ftt input[type="time"]{font-variant-numeric:tabular-nums}
.dtw-err{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--accent)}
.dtw-picks{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:start;gap:10px 8px;margin-top:10px}
.dtw-picks > .v2-label{padding-top:4px;min-width:26px}
.dtw-swr{display:flex;align-items:center;flex-wrap:wrap;gap:3px}
.dtw-sw{display:flex;flex-wrap:wrap;gap:3px}
.dtw-sw button,.dtw-cc{width:20px;height:20px;padding:0;border-radius:50%;cursor:pointer}
.dtw-sw button{border:1px solid rgba(26,18,8,.22);background:var(--c)}
.dtw-sw button[aria-pressed="true"],.dtw-cc.is-on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
.dtw-cc{position:relative;display:block;margin-left:3px;background:conic-gradient(#f2a3a3,#f6d38a,#c8e39c,#9fd8cf,#a9c4f0,#d2b0ec,#f2a3a3);border:1px solid rgba(26,18,8,.22)}
.dtw-cc input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.dtw-ic{display:grid;grid-template-columns:repeat(10,minmax(0,32px));gap:3px}
.dtw-ic button{height:28px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-size:15px;line-height:1;cursor:pointer;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--sans)}
.dtw-ic button:hover{background:var(--btn)}
.dtw-ic .dtw-icn,.dtw-ic .dtw-icp{grid-column:span 2;font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap;overflow:hidden}
.dtw-ic .dtw-icp{background-size:cover;background-position:center}
.dtw-icn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;vertical-align:middle}
.dtw-ic button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background-color:var(--wash);color:var(--ink)}
.dtw-icp[aria-pressed="true"] span{padding:1px 4px;border-radius:2px;background:var(--paper)}

/* ---------- 하루 순서 ---------- */
.dtw-lh{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.dtw-lh small,.dtw-th small{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.dtw-add{margin-left:auto;height:28px;white-space:nowrap}
.dtw-lbox{min-height:0}
.dtw-list{list-style:none;margin:0;padding:0}
.dtw-list li{border-top:1px solid var(--soft);break-inside:avoid}
.dtw-row,.dtw-gap{display:grid;grid-template-columns:18px auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:calc(var(--rh,35px) - 1px);padding:0 4px 0 6px;font-family:var(--sans)}
.dtw-row{width:100%;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.dtw-row:hover{background:var(--wash)}
.dtw-row[aria-pressed="true"]{background:var(--wash);box-shadow:inset 3px 0 0 var(--ink)}
.dtw-rc{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-style:normal;line-height:1;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(26,18,8,.16)}
.dtw-rt{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.dtw-rn{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtw-rd{font-size:11.5px;font-weight:550;color:var(--muted);white-space:nowrap;text-align:right}
.dtw-gap{grid-template-columns:18px auto minmax(0,1fr) auto auto;color:var(--muted)}
.dtw-gap::before{content:"";width:16px;height:16px;margin-left:1px;border:1px dashed var(--line);border-radius:50%}
.dtw-gap .dtw-rn{font-weight:600}
.dtw-gadd{height:24px;padding:0 8px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--ink);white-space:nowrap;cursor:pointer}
.dtw-gadd:hover{background:var(--btn)}

/* ---------- 하루 합계 ---------- */
.dtw-th{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0 0 6px}
.dtw-tnote{flex-basis:100%;font-weight:500 !important}
.dtw-tot{list-style:none;margin:0;padding:0}
.dtw-tot li{display:grid;grid-template-columns:12px minmax(0,7.5em) minmax(36px,1fr) auto 3.3em;align-items:center;gap:8px;min-height:27px;border-top:1px solid var(--soft);font-family:var(--sans);break-inside:avoid}
.dtw-tc{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(26,18,8,.16)}
.dtw-tn{font-size:12.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtw-tb{height:8px;border-radius:4px;background:var(--wash);overflow:hidden}
.dtw-tb i{display:block;height:100%;border-radius:4px;transition:width .4s var(--ease,ease)}
.dtw-tv{font-size:12.5px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.dtw-tp{font-size:11.5px;font-style:normal;font-weight:550;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dtw-tot li.is-free{color:var(--muted)}
.dtw-tot li.is-free .dtw-tc{background:none;box-shadow:none;border:1px dashed var(--line)}
.dtw-tot li.is-free .dtw-tb i{background:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 5px) !important}

/* ---------- 아래 줄 ---------- */
.dtw-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding:10px 16px 11px;border-top:1px solid var(--soft)}
.dtw-status{flex:1 1 320px;margin:0}
.dtw-store{font-family:var(--sans);font-size:11.5px;color:var(--muted)}

/* ---------- 너비별 배치 ---------- */
@container dtww (max-width:560px){
  .dtw-head{grid-template-columns:minmax(0,1fr)}
  .dtw-bar{flex-direction:column;align-items:stretch}
  .dtw-act .v2-btn{flex:1 1 0;justify-content:center}
}
@container dtww (max-width:400px){
  .dtw-act .v2-btn{padding:0 8px;gap:4px}
  .dtw-row,.dtw-gap{gap:6px}
  .dtw-gap .dtw-rd{display:none}
}
@container dtww (min-width:680px){
  .dtw-main{grid-template-columns:minmax(0,1fr) 312px;grid-template-areas:"wheel ed" "list list" "tot tot"}
  .dtw-wheel{display:flex;flex-direction:column;justify-content:center}
  .dtw-wbox{width:100%}
  .dtw-ed{display:flex;flex-direction:column;justify-content:center}
}
@container dtww (min-width:560px){
  .dtw-list,.dtw-tot{columns:2;column-gap:22px}
}
@container dtww (min-width:790px){
  .dtw-main{grid-template-columns:minmax(0,1fr) 324px;grid-template-areas:"wheel ed" "wheel list" "tot tot";grid-template-rows:auto 1fr auto}
  .dtw-lbox{position:relative;flex:1 1 auto;min-height:170px}
  .dtw-list{position:absolute;inset:0 0 auto 0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;columns:auto;scrollbar-width:thin}
  .dtw-tot{columns:250px 3;column-gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .dtw-svg.is-sweep .dtw-sweep{animation:none}
  .dtw-nowg,.dtw-tb i,.dtw-dragt,.dtw-hk{transition:none}
}