/* 겹치는 시간 제외 합산기 — 겹침 타임라인(2026-10-22). 합계 띠 → 타임라인 판(구간 줄 + 겹친 정도 + 합친 결과) → 목록 두 칸.
   넓은 판(작업면 760px 이상, 여러 날이면 860px 이상)은 판·폼·줄·축·결과 줄이 열을 함께 쓰는 subgrid라 모든 막대가 같은 x에서 시작한다.
   중간 판은 막대를 칸 줄 아래 전체 폭으로, 휴대폰은 '번호 | 시작 – 끝 | 지우기' → 막대 → 길이 세 줄. 값이 바뀌면 막대가 left·width로 미끄러진다(R45). */
.tox{container:tox / inline-size}
.tox [hidden]{display:none!important}
.tox-ttl{margin:0;font-family:var(--sans)}
.tox-ttl b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.tox-acts{display:flex;flex-wrap:wrap;gap:6px}

/* 합계 띠 */
.tox-sum{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px 26px;align-items:start;padding:16px 18px;border-bottom:1px solid var(--soft)}
.tox-tot .v2-big{margin-top:6px;flex-wrap:wrap;row-gap:2px}
.tox-tot .v2-big.is-empty{font-size:24px}
.tox-tot .v2-sub{margin-top:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.tox-tot .v2-sub.is-e{color:var(--accent)}
.tox-cmp{min-width:0;padding-top:4px}
.tox-cbar{position:relative;height:12px;background:var(--soft);border-radius:var(--radius);overflow:hidden}
.tox-cbar i{position:absolute;top:0;bottom:0;left:0;width:0;transition:left .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.tox-cu{background:var(--fill)}
.tox-cd{background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--accent)}
.tox-eq{margin:8px 0 12px;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.tox-eq:empty{display:none}
.tox-eq b{font-weight:700;color:var(--ink);white-space:nowrap}
.tox-eq b.is-d{color:var(--accent)}
.tox-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--soft);border:1px solid var(--soft)}
.tox-stats div{min-width:0;padding:8px 12px;background:var(--card)}
.tox-stats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.tox-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}
.tox-stats dd small{display:block;margin-top:1px;font-size:12px;font-weight:500;color:var(--muted)}
.tox-sum.is-wait .tox-cmp{opacity:.55}

/* 타임라인 판: 열 = 번호 | (시작 날) | 시작 | – | 끝 | 막대 | 길이 | 지우기 */
.tox-board{display:grid;grid-template-columns:22px max-content 12px max-content minmax(120px,1fr) max-content 30px;column-gap:8px;padding:12px 18px 10px}
.tox-board.is-days{grid-template-columns:22px max-content max-content 12px max-content minmax(120px,1fr) max-content 30px}
.tox-board > *{grid-column:1/-1}
.tox-axis,.tox-form,.tox-row,.tox-lane{display:grid;grid-template-columns:subgrid;align-items:center}
.tox-form{margin:0}
.tox-bh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;margin-bottom:10px}
.tox-cnt{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.tox-df,.tox-ah--d{display:none}
.tox-board.is-days .tox-df,.tox-board.is-days .tox-ah--d{display:block}
.tox-ah{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.tox-ah--no{text-align:center}
.tox-ah--l{text-align:right}
.tox-ticks{position:relative;height:18px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.tox-ticks b{position:absolute;bottom:3px;font-weight:400;white-space:nowrap;transform:translateX(-50%)}
.tox-ticks b.is-first{transform:none}
.tox-ticks b.is-last{transform:translateX(-100%)}
.tox-ticks b.is-day{font-family:var(--sans);font-weight:700;color:var(--ink)}

.tox-row{grid-column:1/-1;row-gap:5px;padding:5px 0;border-bottom:1px solid var(--soft)}
.tox-no{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--wash);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);transition:background var(--ease),color var(--ease)}
.tox-row:focus-within .tox-no{background:var(--fill);color:var(--on-fill)}
.tox-tf{width:max-content} /* max-content 칸에서 시각 입력이 글자 폭보다 좁아지지 않게 */
.tox-tf .v2-input{display:inline-flex}
.tox-tf input[type="time"]{flex:none;width:auto;padding:0 8px;text-align:left}
.tox-day{display:block;height:var(--v2-ctl,42px);padding:0 6px;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)}
.tox-day:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tox-dash{font-family:var(--sans);text-align:center;color:var(--muted)}
.tox-trk,.tox-ltrk{position:relative;min-width:0;background:var(--paper) linear-gradient(to right,var(--soft) 1px,transparent 1px) 0 0/var(--tox-tk,12.5%) 100%;border:1px solid var(--soft);border-radius:var(--radius)}
.tox-trk{height:26px;cursor:pointer}
.tox-row:focus-within .tox-trk{border-color:var(--line)}
.tox-bar,.tox-hit{position:absolute;top:4px;bottom:4px;border-radius:2px;transition:left .32s cubic-bezier(.2,.7,.2,1),width .32s cubic-bezier(.2,.7,.2,1),opacity var(--ease)}
.tox-bar{background:color-mix(in srgb, var(--fill) 78%, var(--paper))}
.tox-hit{z-index:1;background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--accent)}
.tox-form:focus-within .tox-row:not(:focus-within) .tox-bar{opacity:.45}
.tox-len{min-width:4.6em;font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.3;text-align:right;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.tox-len em{display:block;font-size:11px;font-style:normal;font-weight:500;color:var(--muted)}
.tox-x{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);cursor:pointer}
.tox-x:hover{border-color:var(--line);color:var(--ink)}
.tox-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
.tox-msg{grid-column:2/-1;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--accent)}
.tox-full{margin-left:4px;padding:2px 8px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--accent);cursor:pointer}
.tox-full:hover{background:var(--accent-wash)}
.tox-addw{display:flex;margin:10px 0 6px}

/* 겹친 정도 · 합친 결과 */
.tox-lane{padding:5px 0}
.tox-ll{grid-column:1/-4;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);text-align:right}
.tox-ltrk{grid-column:-4/-3}
.tox-lv{grid-column:-3/-2;font-family:var(--sans);font-size:12.5px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tox-dep{height:30px;overflow:hidden}
.tox-dep i{position:absolute;bottom:0;background:color-mix(in srgb, var(--fill) 38%, var(--paper));transition:left .32s cubic-bezier(.2,.7,.2,1),width .32s cubic-bezier(.2,.7,.2,1),height .32s cubic-bezier(.2,.7,.2,1)}
.tox-dep i.is-ov{background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--accent)}
.tox-uni{height:30px}
.tox-uni b,.tox-uni s{position:absolute;transition:left .32s cubic-bezier(.2,.7,.2,1),width .32s cubic-bezier(.2,.7,.2,1)}
.tox-uni b{top:4px;bottom:4px;background:var(--fill);border-radius:2px}
.tox-uni s{top:7px;bottom:7px;display:grid;place-items:center;overflow:hidden;border-top:1px dashed var(--muted);border-bottom:1px dashed var(--muted);text-decoration:none;font-family:var(--sans);font-size:10.5px;font-weight:600;white-space:nowrap;color:var(--muted)}
.tox-board.is-wait .tox-lane{opacity:.4}

/* 목록 두 칸 */
.tox-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--soft)}
.tox-lc{min-width:0;padding:12px 18px 12px}
.tox-lc + .tox-lc{border-left:1px solid var(--soft)}
.tox-lc .v2-label{display:block;margin:0 0 4px}
.tox-ol{margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}
.tox-ol li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--soft)}
.tox-ol li:last-child{border-bottom:0}
.tox-ol li span{min-width:0}
.tox-ol li b{flex:none;font-weight:700;white-space:nowrap}
.tox-ol li small{display:block;font-size:12px;color:var(--muted)}
.tox-ol li.is-gap{color:var(--muted)}
.tox-ol li.is-gap b{font-weight:600}
.tox-ol li.is-w{font-size:13px;color:var(--muted)}

.tox-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.tox-fa{display:inline-flex;flex-wrap:wrap;gap:6px}
.tox-foot .v2-status{margin:0}
.tox-ns{margin:0;padding:12px 18px;font-size:13px}

/* 중간 판: 막대를 칸 줄 아래 전체 폭으로(날짜 칸 없이 760px 미만, 날짜 칸이 있으면 860px 미만) */
@container tox (max-width:759px){
  .tox-board{grid-template-columns:22px minmax(0,1fr) 12px minmax(0,1fr) max-content 30px}
  .tox-board.is-days{grid-template-columns:22px max-content minmax(0,1fr) 12px minmax(0,1fr) max-content 30px}
  .tox-board .tox-ticks{grid-column:2/-1;grid-row:2}
  .tox-board .tox-row{row-gap:6px}
  .tox-board .tox-tf{width:auto}
  .tox-board .tox-tf .v2-input{display:flex}
  .tox-board .tox-tf input[type="time"]{flex:1 1 0;width:100%}
  .tox-board .tox-trk{grid-column:2/-1;grid-row:2}
  .tox-board .tox-msg{grid-column:2/-1}
  .tox-board .tox-lane{row-gap:4px}
  .tox-board .tox-ll{grid-column:2/-3;text-align:left}
  .tox-board .tox-lv{grid-column:-3/-1}
  .tox-board .tox-ltrk{grid-column:2/-1;grid-row:2}
}
@container tox (max-width:859px){
  .tox-board.is-days{grid-template-columns:22px minmax(0,1fr) 12px minmax(0,1fr) max-content 30px}
  .tox-board.is-days.is-days{grid-template-columns:22px max-content minmax(0,1fr) 12px minmax(0,1fr) max-content 30px}
  .tox-board.is-days .tox-ticks{grid-column:2/-1;grid-row:2}
  .tox-board.is-days .tox-row{row-gap:6px}
  .tox-board.is-days .tox-tf{width:auto}
  .tox-board.is-days .tox-tf .v2-input{display:flex}
  .tox-board.is-days .tox-tf input[type="time"]{flex:1 1 0;width:100%}
  .tox-board.is-days .tox-trk{grid-column:2/-1;grid-row:2}
  .tox-board.is-days .tox-msg{grid-column:2/-1}
  .tox-board.is-days .tox-lane{row-gap:4px}
  .tox-board.is-days .tox-ll{grid-column:2/-3;text-align:left}
  .tox-board.is-days .tox-lv{grid-column:-3/-1}
  .tox-board.is-days .tox-ltrk{grid-column:2/-1;grid-row:2}
}
/* 좁은 판(휴대폰): 번호 | 시작 – 끝 | 지우기 → 막대 → 길이(날짜 칸이 있으면 640px 미만부터) */
@container tox (max-width:479px){
  .tox-board{grid-template-columns:22px minmax(0,1fr) 12px minmax(0,1fr) 30px;column-gap:6px;padding:10px 12px 8px}
  .tox-board.is-days{grid-template-columns:22px minmax(0,1fr) 12px minmax(0,1fr) 30px}
  .tox-board .tox-axis > .tox-ah{display:none}
  .tox-board .tox-ticks{grid-column:2/-1;grid-row:auto}
  .tox-board .tox-no{grid-column:1;grid-row:1}
  .tox-board .tox-tf--s{grid-column:2;grid-row:1}
  .tox-board .tox-dash{grid-column:3;grid-row:1}
  .tox-board .tox-tf--e{grid-column:4;grid-row:1}
  .tox-board .tox-x{grid-column:5;grid-row:1}
  .tox-board .tox-trk{grid-column:2/-1;grid-row:2}
  .tox-board .tox-len{grid-column:2/-1;grid-row:3;min-width:0;text-align:left}
  .tox-board .tox-len:empty{display:none}
  .tox-board .tox-len em{display:inline;margin-left:6px}
  .tox-board .tox-df{grid-column:2;grid-row:3}
  .tox-board .tox-day{width:100%}
  .tox-board .tox-tf input[type="time"]{padding:0 6px;font-size:14px}
  .tox-board.is-days .tox-len{grid-column:3/-1;align-self:center}
  .tox-board .tox-ll{grid-column:2/4}
  .tox-board .tox-lv{grid-column:4/-1}
}
@container tox (max-width:639px){
  .tox-board.is-days{grid-template-columns:22px minmax(0,1fr) 12px minmax(0,1fr) 30px;column-gap:6px;padding:10px 12px 8px}
  .tox-board.is-days.is-days{grid-template-columns:22px minmax(0,1fr) 12px minmax(0,1fr) 30px}
  .tox-board.is-days .tox-axis > .tox-ah{display:none}
  .tox-board.is-days .tox-ticks{grid-column:2/-1;grid-row:auto}
  .tox-board.is-days .tox-no{grid-column:1;grid-row:1}
  .tox-board.is-days .tox-tf--s{grid-column:2;grid-row:1}
  .tox-board.is-days .tox-dash{grid-column:3;grid-row:1}
  .tox-board.is-days .tox-tf--e{grid-column:4;grid-row:1}
  .tox-board.is-days .tox-x{grid-column:5;grid-row:1}
  .tox-board.is-days .tox-trk{grid-column:2/-1;grid-row:2}
  .tox-board.is-days .tox-len{grid-column:2/-1;grid-row:3;min-width:0;text-align:left}
  .tox-board.is-days .tox-len:empty{display:none}
  .tox-board.is-days .tox-len em{display:inline;margin-left:6px}
  .tox-board.is-days .tox-df{grid-column:2;grid-row:3}
  .tox-board.is-days .tox-day{width:100%}
  .tox-board.is-days .tox-tf input[type="time"]{padding:0 6px;font-size:14px}
  .tox-board.is-days.is-days .tox-len{grid-column:3/-1;align-self:center}
  .tox-board.is-days .tox-ll{grid-column:2/4}
  .tox-board.is-days .tox-lv{grid-column:4/-1}
}
@container tox (max-width:560px){
  .tox-sum{grid-template-columns:minmax(0,1fr)}
  .tox-lists{grid-template-columns:minmax(0,1fr)}
  .tox-lc + .tox-lc{border-left:0;border-top:1px solid var(--soft)}
}
@container tox (max-width:480px){
  .tox-sum,.tox-lc,.tox-foot{padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion:reduce){ .tox-bar,.tox-hit,.tox-cbar i,.tox-dep i,.tox-uni b,.tox-uni s,.tox-no{transition:none} }