/* 교대 근무 겹침·공백 계산기 — 24시간 교대 다이얼(2026-10-22). 결과 띠[다이얼 | 큰 수·통계·범례] → 조건 줄 → 근무표(subgrid) → 24시간 흐름.
   작업면 560px 이상은 다이얼 옆에 결과, 그보다 좁으면 다이얼 아래 결과. 근무표는 640px 이상 한 줄(열을 머리 줄과 함께 씀), 그보다 좁으면
   '색 | 이름 | 인원 | 지우기' / '시작 – 끝' / '근무 길이' 줄. 값이 바뀌면 근무 호가 시계 방향으로 자라고 바깥 띠가 오르내린다(R45, tool.js drawDial). */
.sov{container:sov / inline-size}
.sov [hidden]{display:none!important}
.sov-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sov-ttl{margin:0;font-family:var(--sans)}
.sov-ttl b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.sov-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.sov-exl{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}

/* 결과 띠: 다이얼 | 결과 */
.sov-sum{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:16px 26px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--soft)}
.sov-dialw{min-width:0}
.sov-dial{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;overflow:visible}
.sov-track{fill:none;stroke:color-mix(in srgb,var(--soft) 70%,transparent);stroke-width:28}
.sov-face line{stroke:var(--line);stroke-width:1}
.sov-face line.is-big{stroke:var(--ink);stroke-width:1.4}
.sov-face text{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--muted);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.sov-face text.is-big{font-weight:800;fill:var(--ink)}
.sov-b.is-one{fill:color-mix(in srgb,var(--fill) 34%,transparent)}
.sov-b.is-ovl{fill:var(--fill)}
.sov-b.is-short{fill:var(--accent)}
.sov-b.is-gap{fill:url(#sovHatch)}
.sov-hl{fill:var(--accent);opacity:.75}
.sov-needc{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 3}
.sov-arc{fill:hsl(var(--h) 46% var(--l,55%));stroke:var(--card);stroke-width:1;cursor:pointer;transition:opacity var(--ease)}
.sov-dial.has-hot .sov-arc:not(.is-hot){opacity:.25}
.sov-night{fill:color-mix(in srgb,var(--ink) 38%,transparent)}
.sov-shade{fill:var(--card);opacity:.8}
.sov-hub{fill:var(--card);stroke:var(--soft)}
.sov-hv{font-family:var(--sans);font-size:22px;font-weight:800;fill:var(--ink);text-anchor:middle;font-variant-numeric:tabular-nums lining-nums}
.sov-hs{font-family:var(--sans);font-size:10.5px;font-weight:600;fill:var(--muted);text-anchor:middle}

.sov-res{min-width:0;display:grid;gap:14px;container:sovres / inline-size}
.sov-bigs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.sov-bigc{min-width:0}
.sov-bigc .v2-big{margin-top:6px;font-size:36px;flex-wrap:wrap;row-gap:2px;column-gap:6px}
.sov-bigc .v2-big small{font-size:15px}
.sov-bigc--gap .v2-big{color:var(--accent)}
.sov-bigc .v2-big.is-zero{color:var(--ink)}
.sov-bigc .v2-big.is-empty{font-size:19px;color:var(--muted)}
.sov-bigc .v2-sub{margin-top:6px;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.sov-bigc .v2-sub.is-e{color:var(--accent)}
.sov-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;background:var(--soft);border:1px solid var(--soft)}
.sov-stats.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.sov-stats div{min-width:0;padding:8px 10px;background:var(--card)}
.sov-stats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.sov-stats dd{margin:3px 0 0;font-family:var(--sans);font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums}
.sov-stats dd small{display:block;margin-top:1px;font-size:11.5px;font-weight:500;line-height:1.4;color:var(--muted)}
.sov-lg{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.sov-lg li{display:inline-flex;align-items:center;gap:5px}
.sov-lg i{width:14px;height:9px;border-radius:1px}
.sov-lg .is-one{background:color-mix(in srgb,var(--fill) 34%,transparent)}
.sov-lg .is-ovl{background:var(--fill)}
.sov-lg .is-gap{background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--accent)}
.sov-lg .is-short{background:var(--accent)}
.sov-lg .is-night{height:3px;background:color-mix(in srgb,var(--ink) 38%,transparent)}
.sov-sum:not(.is-many) .sov-lg-short{display:none}
.sov-sum.is-wait .sov-stats,.sov-sum.is-wait .sov-lg,.sov-sum.is-wait .sov-bigc--ovl{opacity:.5}

/* 조건 줄: 확인 범위 · 운영 시작 · 운영 끝 · 필요 인원 */
.sov-cond{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.sov-cond .v2-f{flex:none}
.sov-rngf > .v2-label{display:block;margin:0 0 5px}
.sov-rng{flex-wrap:nowrap}
.sov-rng button{height:var(--v2-ctl,42px);padding:0 13px;white-space:nowrap}
.sov-tf{width:max-content} /* max-content 칸에서 시각 입력이 글자 폭보다 좁아지지 않게 */
.sov-tf .v2-input{display:inline-flex}
.sov-tf input[type="time"]{flex:none;width:auto;padding:0 8px;text-align:left}
.sov-needf .v2-input{width:max-content}
.sov-needf input{flex:none;width:3.6em}
.sov-needh{flex:1 1 170px;margin:0;align-self:center;line-height:1.45}
.sov-cmsg{flex:1 1 100%;margin:0;font-family:var(--sans);font-size:12.5px;color:var(--accent)}

/* 근무표: 열 = 색 | 이름 | 시작 | – | 끝 | 인원 | 근무 길이 | 지우기 */
.sov-tbl{display:grid;grid-template-columns:12px minmax(96px,1fr) max-content 10px max-content 82px minmax(64px,96px) 30px;column-gap:8px;padding:12px 18px 12px;border-bottom:1px solid var(--soft)}
.sov-tbl > *{grid-column:1/-1}
.sov-th,.sov-form,.sov-row{display:grid;grid-template-columns:subgrid;align-items:center}
.sov-form{margin:0}
.sov-th span{padding-bottom:4px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.sov-row{grid-column:1/-1;row-gap:4px;padding:5px 0;border-bottom:1px solid var(--soft)}
.sov-sw{display:block;width:12px;height:12px;border-radius:50%;background:hsl(var(--h,212) 46% var(--l,55%));transition:box-shadow var(--ease)}
.sov-row:focus-within .sov-sw{box-shadow:0 0 0 3px hsl(var(--h,212) 46% var(--l,55%) / .3)}
.sov-fn input{text-align:left;font-size:14.5px}
.sov-fp .v2-input b{min-width:0;padding:0 8px;display:none} /* 넓은 판은 머리 줄 '인원'이 단위를 대신한다. 좁은 판(머리 줄 없음)에서만 단위를 보인다 */
.sov-dash{font-family:var(--sans);text-align:center;color:var(--muted)}
.sov-len{min-width:0;font-family:var(--sans);font-size:12.5px;line-height:1.35;color:var(--ink);font-variant-numeric:tabular-nums} /* 길이 칸은 96px까지만: 넘으면 '다음 날'·야간이 아래로 내려가 이름 칸을 줄이지 않는다(검토 N5) */
.sov-len b{display:block;font-weight:700}
.sov-len b span{white-space:nowrap}
.sov-len b em{display:inline-block;margin-left:5px;font-style:normal;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.sov-len small{white-space:nowrap}
.sov-len small{display:block;font-size:11.5px;color:var(--muted)}
.sov-x{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--muted);cursor:pointer}
.sov-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.sov-x:hover{background:var(--btn);color:var(--ink)}
.sov-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sov-msg{grid-column:2/-1;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--accent)}
.sov-full{margin-left:4px;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sov-addw{display:flex;align-items:center;gap:10px;padding-top:10px}
.sov-cnt{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

/* 24시간 흐름: 띠 | 시각 | 길이 | 상태·근무 */
.sov-flow{padding:12px 18px 8px;border-bottom:1px solid var(--soft)}
.sov-fh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 8px}
.sov-ol{display:grid;grid-template-columns:4px max-content max-content minmax(0,1fr);column-gap:12px;margin:0;padding:0;list-style:none}
.sov-ol li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;min-height:36px;padding:5px 0;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13px}
.sov-strip{align-self:stretch;border-radius:2px;background:color-mix(in srgb,var(--fill) 34%,transparent)}
.sov-ol li.is-ovl .sov-strip{background:var(--fill)}
.sov-ol li.is-gap .sov-strip{background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--accent)}
.sov-ol li.is-short .sov-strip{background:var(--accent)}
.sov-fr{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sov-fd{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.sov-fw{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.sov-tag{padding:2px 6px;border-radius:var(--radius);font-style:normal;font-size:11.5px;font-weight:700;white-space:nowrap}
.sov-ol li.is-gap .sov-tag,.sov-ol li.is-short .sov-tag{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.sov-ol li.is-ovl .sov-tag{background:var(--fill);color:var(--on-fill)}
.sov-who{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink);white-space:nowrap}
.sov-who i{width:8px;height:8px;border-radius:50%;background:hsl(var(--h,212) 46% var(--l,55%))}
.sov-who em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.sov-who.is-more{color:var(--muted)}
.sov-an{font-size:12px;color:var(--muted)}
.sov-ol li.is-contact{min-height:0;padding:3px 0;border-top-style:dashed;font-size:12px;color:var(--muted)}
.sov-ol li.is-contact .sov-strip{background:none}
.sov-ol li.is-contact .sov-fr{font-weight:500;color:var(--muted)}
.sov-ol li.is-contact .sov-fw{grid-column:3/-1}
.sov-ol li.is-w{display:block;min-height:0;padding:8px 0;font-size:12.5px;color:var(--muted)}

.sov-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 18px}
.sov-fa{display:flex;flex-wrap:wrap;gap:6px}
.sov-foot .v2-status{flex:1 1 200px;margin:0}
.sov-ns{margin:0;padding:0 18px 14px;font-size:13px;color:var(--muted)}

html[data-theme="dark"] .sov-arc,html[data-theme="dark"] .sov-sw,html[data-theme="dark"] .sov-who i{--l:60%}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .sov-arc,html:not([data-theme="light"]) .sov-sw,html:not([data-theme="light"]) .sov-who i{--l:60%}}

/* 좁은 근무표: 색 | 이름 | 인원 | 지우기 / 시작 – 끝 / 근무 길이 */
@container sov (max-width:639px){
  .sov-tbl{display:block}
  .sov-th{display:none}
  .sov-form{display:block}
  .sov-row{grid-template-columns:12px minmax(0,1fr) 10px minmax(0,1fr) 30px;grid-template-areas:"sw nm nm pp xx" "ss ss dd ee ee" "ln ln ln ln ln" "ms ms ms ms ms";column-gap:6px;padding:8px 0}
  .sov-sw{grid-area:sw}.sov-fn{grid-area:nm}.sov-fp{grid-area:pp}.sov-x{grid-area:xx}.sov-fs{grid-area:ss}.sov-dash{grid-area:dd}.sov-fe{grid-area:ee}.sov-len{grid-area:ln}.sov-msg{grid-area:ms}
  .sov-fp .v2-input b{display:grid}
  .sov-row .sov-tf{width:auto}
  .sov-row .sov-tf .v2-input{display:flex}
  .sov-row .sov-tf input[type="time"]{flex:1 1 auto;width:100%;min-width:0}
  .sov-len b,.sov-len small{display:inline}
  .sov-len small{margin-left:8px}
  .sov-len:empty{display:none}
}
@container sov (max-width:559px){
  .sov-sum{grid-template-columns:minmax(0,1fr);justify-items:stretch}
  .sov-dial{max-width:272px}
}
@container sov (max-width:419px){
  .sov-ol{grid-template-columns:4px max-content minmax(0,1fr)}
  .sov-ol li{grid-template-rows:auto auto;row-gap:3px}
  .sov-strip{grid-row:1/3}
  .sov-ol li .sov-fw{grid-column:2/-1}
  .sov-ol li.is-contact .sov-fw{grid-column:2/-1}
  .sov-bigc .v2-big{font-size:30px}
}
/* 결과 칸이 좁으면 통계를 '이름 | 값' 줄로(1280px 작업면 648에서 세 칸이 95px라 이름이 세 줄로 접힘) */
@container sovres (max-width:439px){
  .sov-stats,.sov-stats.is-3{grid-template-columns:minmax(0,1fr)}
  .sov-stats div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;padding:7px 10px}
  .sov-stats dd{margin:0;text-align:right}
}
@media (prefers-reduced-motion:reduce){.sov-arc,.sov-sw{transition:none}}