/* 시간 간격 계산기 전용 CSS (2026-10-13). 입력(예시·시작·끝·휴게·끝나는 날·초)·결과·24시간 링·실제/휴게 막대 td-*. 공용 부품은 assets/v2.css.
   움직임은 transitions.dev 기준(위치·크기 400ms cubic-bezier(.22,1,.36,1)) — 테마 --ease는 120ms 지연을 품고 있어 쓰지 않음 */
.td-work{container:td / inline-size} /* 두 열 여부는 툴 폭으로 */
.td-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.td-set{display:flex;flex-direction:column;gap:12px;padding:16px 18px;min-width:0}
.td-set .v2-status:empty{display:none}
.td-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.td-ex-btns{display:flex;flex-wrap:wrap;gap:6px}
.td-ex-btns .v2-btn{height:30px;padding:0 10px;font-size:12px;font-variant-numeric:tabular-nums}
.td-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}
.td-lab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 5px} /* 공용 .v2-f > label 규칙(block·아래 5px)과 같게 */
.td-day>.v2-label{display:block;margin:0 0 5px}
.td-lab label{min-width:0}
.td-now{flex:0 0 auto;padding:0;border:0;background:none;font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.td-now:hover{color:var(--ink)}
.td-now:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.td-time{display:block;box-sizing:border-box;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.td-time:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.v2-f.is-invalid .td-time,.v2-f.is-invalid .v2-input{border-color:var(--accent)}
.td-day .v2-seg{display:flex;flex-wrap:nowrap}
.td-day .v2-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 6px}
.td-day .v2-seg button:disabled{opacity:.45;cursor:not-allowed}
.td-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.td-btns{display:flex;flex-wrap:wrap;gap:6px}
.td-head{padding:16px 18px;min-width:0;border-left:1px solid var(--soft)}
.td-head>.v2-label{display:block;margin-bottom:8px}
.td-big{font-size:40px;overflow-wrap:anywhere}
.td-head .v2-sub{margin-bottom:12px}
.td-rows li{flex-wrap:wrap}
.td-rows li b{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.td-box{padding:14px 18px 16px;min-width:0}
.td-box>.v2-label{display:block;margin-bottom:10px}
/* 24시간 링: 호는 JS가 400ms로 각도를 옮김(줄인 모션이면 바로), 점은 끌거나 방향키로 */
.td-vis{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px 24px;align-items:center}
.td-ring{width:100%;max-width:260px}
.td-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:none}
.td-trk{fill:var(--wash)}
.td-tick{stroke:var(--line);stroke-width:1}
.td-tick.is-big{stroke:var(--muted);stroke-width:1.5}
.td-hl{fill:var(--muted);font-family:var(--sans);font-size:10.5px;font-weight:600}
.td-arc{fill:var(--fill);stroke:var(--fill);stroke-width:3;stroke-linejoin:round}
.td-arc1{fill:var(--accent);stroke:var(--accent);stroke-width:3;stroke-linejoin:round}
.td-c1{fill:var(--ink);font-family:var(--sans);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.td-c2{fill:var(--muted);font-family:var(--sans);font-size:10.5px;font-weight:600}
.td-knob{fill:var(--paper);stroke:var(--ink);stroke-width:2.5;cursor:grab;outline:0}
.td-knob-to{fill:var(--ink);stroke:var(--paper)}
.td-knob:focus-visible{stroke:var(--accent);stroke-width:3.5}
.td-svg.is-drag .td-knob{cursor:grabbing}
.td-svg.is-empty .td-knob{display:none}
.td-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.td-sum{margin:0;font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink);font-variant-numeric:tabular-nums}
.td-bar{display:flex;height:14px;border-radius:var(--radius);overflow:hidden;background:var(--wash)}
.td-bar b{display:block;background:var(--fill);transition:width .4s cubic-bezier(.22,1,.36,1)}
.td-bar i{display:block;background:repeating-linear-gradient(135deg,var(--line) 0 3px,transparent 3px 6px);transition:width .4s cubic-bezier(.22,1,.36,1)}
.td-bar.is-empty b,.td-bar.is-empty i{width:0 !important}
.td-keys{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--sans);font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.td-keys li{display:flex;align-items:center;gap:6px}
.td-keys i{flex:0 0 auto;width:12px;height:12px;border-radius:2px}
.td-keys .k-a{background:var(--fill)}
.td-keys .k-b{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 4px);outline:1px solid var(--line);outline-offset:-1px}
@container td (max-width:779px){
  .td-top{grid-template-columns:minmax(0,1fr)}
  .td-head{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@container td (max-width:520px){
  .td-vis{grid-template-columns:minmax(0,1fr);justify-items:center}
  .td-side{width:100%}
  .td-big{font-size:34px}
}
@media (prefers-reduced-motion:reduce){ .td-bar b,.td-bar i{transition:none} }