/* 시간 배분 계산기 — 시간 기둥 진행표(2026-10-22). 머리 → 틀 띠(시작 → 길이 → 종료 · 단위 / 예산 4칸) → 진행표[시간 기둥 | 줄] → 복사·링크·회의 타이머.
   진행표 줄은 목록 폭 520px 이상이면 '시각 | 이름 | 비중 | 길이 | ↑↓×' 한 줄, 그보다 좁으면 '시각 | 이름' / '비중 | 길이 | ↑↓×' 두 줄.
   시간 기둥은 tool.js paint(): 길이 비례 조각(비중 = 연한 채움, 고정 = 진한 채움, 휴식 = 빗금, 남는 시간 = 점선) + 줄로 퍼지는 띠, 넘친 구간은 accent 빗금. */
.tal{container:talw / inline-size}
.tal [hidden]{display:none!important}
.tal-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tal-ttl{margin:0;font-family:var(--sans)}
.tal-ttl b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.tal-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.tal-exl{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}

/* 틀 띠: 시작 → 종료 · 단위 */
.tal-frame{display:grid;gap:12px;padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.tal-fr{display:grid;grid-template-columns:minmax(122px,152px) minmax(56px,1fr) minmax(122px,152px) auto;align-items:end;gap:0 10px}
.tal-tf input[type="time"]{text-align:left;font-family:var(--sans);font-size:15.5px}
.tal-sp{min-width:0;align-self:end}
.tal-spl{display:block;margin:0 0 5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.tal-spa{display:flex;align-items:center;height:var(--v2-ctl)}
.tal-spa i{position:relative;flex:1 1 auto;height:1.5px;background:var(--line)}
.tal-spa i::before,.tal-spa i::after{content:"";position:absolute;top:50%;width:7px;height:7px;transform:translateY(-50%);border-radius:50%;background:var(--card);border:1.5px solid var(--line)}
.tal-spa i::before{left:-2px}
.tal-spa i::after{right:-2px;background:var(--line)}
.tal-uf .v2-label{display:block;margin:0 0 5px}
.tal-fe .v2-label em{margin-left:6px;font-weight:700;color:var(--ink)}
.tal-fe .v2-label .tal-dur{display:none}
.tal-nx{padding:0 4px;border-radius:var(--radius);background:var(--fill);color:var(--on-fill)!important;font-size:10.5px}
.tal-u{display:flex;flex-wrap:nowrap}
.tal-u button{height:var(--v2-ctl);min-width:50px;padding:0 10px}

/* 예산 4칸 */
.tal-bud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding-top:12px;border-top:1px solid var(--soft)}
.tal-bud > div{min-width:0;padding:0 12px;border-left:1px solid var(--soft)}
.tal-bud > div:first-child{padding-left:0;border-left:0}
.tal-bud dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tal-bud dd{margin:3px 0 0;font-family:var(--sans);font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.tal-bud .is-per dd{font-size:18px}

/* 진행표: 시간 기둥 | 줄 */
.tal-sheet{display:grid;grid-template-columns:80px minmax(0,1fr);padding:12px 18px 14px 4px}
.tal-colw{position:relative;min-width:0}
.tal-col{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tal-trk{fill:color-mix(in srgb,var(--soft) 60%,transparent)}
.tal-tk{stroke:var(--line);stroke-width:1}
.tal-tk.is-h{stroke:var(--ink)}
.tal-tl{font-family:var(--sans);font-size:10px;font-weight:600;fill:var(--muted);text-anchor:end;dominant-baseline:central;font-variant-numeric:tabular-nums}
.tal-tl.is-h{font-weight:800;fill:var(--ink)}
.tal-seg{stroke:var(--card);stroke-width:1.2;cursor:pointer;transition:opacity var(--ease)}
.tal-seg.is-a{fill:color-mix(in srgb,var(--fill) 55%,var(--card))}
.tal-seg.is-f{fill:var(--fill)}
.tal-seg.is-b{fill:url(#talHatch)}
.tal-seg.is-s{fill:var(--card);stroke:var(--line);stroke-dasharray:3 2}
.tal-hl{fill:var(--muted)}
.tal-fan{fill:color-mix(in srgb,var(--fill) 12%,transparent);cursor:pointer;transition:opacity var(--ease)}
.tal-fan.is-b{fill:color-mix(in srgb,var(--muted) 9%,transparent)}
.tal-fan.is-s{fill:none}
.tal-fan.is-late{fill:var(--accent-wash)}
.tal-fan.is-hot{fill:color-mix(in srgb,var(--fill) 26%,transparent)}
.tal-col.has-hot .tal-seg:not(.is-hot){opacity:.35}
.tal-ovr{fill:url(#talOver)}
.tal-ol{fill:var(--accent)}
.tal-endl{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 3}

.tal-list{min-width:0;container:tal / inline-size}
.tal-th,.tal-row{display:grid;grid-template-columns:64px minmax(0,1fr) 72px 100px 88px;column-gap:8px;align-items:center}
.tal-th{padding:0 0 6px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted)}
.tal-rows{margin:0}
.tal-row{padding:6px 0;border-bottom:1px solid var(--soft);transition:background var(--ease)}
.tal-row.is-b{background:color-mix(in srgb,var(--wash) 55%,transparent)}
.tal-row.is-hot{background:color-mix(in srgb,var(--wash) 90%,transparent)}
.tal-tm{min-width:0;margin:0;display:flex;flex-direction:column;gap:1px;padding-left:4px;font-family:var(--sans);line-height:1.15;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.tal-tm b{font-size:15px;font-weight:800;color:var(--ink)}
.tal-tm span{font-size:12px;font-weight:500;color:var(--muted)}
.tal-tm sup{margin-left:2px;font-size:9.5px;font-weight:700;color:var(--muted)}
.tal-row.is-zero .tal-tm b,.tal-row.is-late .tal-tm b{color:var(--accent)}
.tal-nf .v2-input input{text-align:left;font-size:14.5px}
.tal-nf .v2-input input::placeholder{font-weight:500}
.tal-wi b.tal-wx{display:flex;align-items:center;order:-1;min-width:0;padding:0 7px;border-left:0;border-right:1px solid var(--soft);font-size:12px}
.tal-ch{display:none;margin:0 0 4px;padding:0 0 8px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.tal-w{text-align:center!important}
.tal-lf .v2-input b{min-width:0;padding:0 8px}
.tal-lf .v2-input.is-auto input{color:var(--muted);font-weight:500}
.tal-pin{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;height:var(--v2-ctl);padding:0 6px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);transition:background var(--ease)}
.tal-pin:hover{background:var(--btn)}
.tal-pin svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.tal-bk{display:flex;align-items:center;justify-content:center;gap:6px;height:var(--v2-ctl);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.tal-bk i{flex:none;width:12px;height:12px;border:1px solid var(--line);background:repeating-linear-gradient(45deg,var(--muted) 0 1.5px,transparent 1.5px 4px)}
.tal-mv{display:flex;justify-content:flex-end;gap:2px}
.tal-mv button{display:grid;place-items:center;width:28px;height:34px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);transition:background var(--ease),opacity var(--ease)}
.tal-mv button:hover{background:var(--btn)}
.tal-mv button:disabled{opacity:.3;cursor:not-allowed;background:var(--paper)}
.tal-mv svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 12시간제(en): '12:35 PM' 이 들어가게 시각 칸을 넓힌다 */
.tal[data-h12] .tal-th,.tal[data-h12] .tal-row{grid-template-columns:78px minmax(0,1fr) 72px 100px 88px}
.tal[data-h12] .tal-vr{grid-template-columns:78px minmax(0,1fr) auto}
/* 남는 시간 · 끝 줄 */
.tal-vr{display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:8px;align-items:center;padding:8px 0}
.tal-spare{border-bottom:1px solid var(--soft)}
.tal-end{border-top:1.5px solid var(--ink);margin-top:-1px}
.tal-vt{min-width:0;margin:0;font-family:var(--sans);font-size:13px;line-height:1.4}
.tal-vt b{margin-right:8px;font-weight:750;color:var(--ink)}
.tal-vt span{color:var(--muted)}
.tal-vd{padding-right:4px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tal-end.is-late .tal-tm b,.tal-end.is-late .tal-vs{color:var(--accent)}
.tal-addw{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding-top:6px}
.tal-cnt{margin-left:auto;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

.tal-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 18px;border-top:1px solid var(--soft)}
.tal-fa{display:flex;flex-wrap:wrap;gap:6px}
.tal-foot .v2-status{flex:1 1 200px;margin:0}
.tal-run svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.tal-run[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.tal-ns{margin:0;padding:0 18px 14px;font-size:13px;color:var(--muted)}

/* 작업면이 좁을 때: 틀 띠 두 줄, 예산 2×2, 기둥은 눈금 글자 없이 */
@container talw (max-width:579px){
  .tal-fr{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);column-gap:8px}
  .tal-tf input[type="time"]{padding:0 8px}
  .tal-spl{visibility:hidden}
  .tal-fe .v2-label .tal-dur{display:inline}
  .tal-uf{grid-column:1/-1;margin-top:10px}
  .tal-u{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .tal-bud{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}
  .tal-bud > div:nth-child(3){padding-left:0;border-left:0}
  .tal-sheet{grid-template-columns:36px minmax(0,1fr);padding-left:12px}
}
@container tal (max-width:519px){
  /* 두 줄: [시각 | 이름] / [비중 | 길이 | ↑↓×] — flex 로 비중·길이 칸을 같은 폭으로 나눈다 */
  .tal-th{display:none}
  .tal-ch{display:block}
  .tal-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:6px;padding:8px 0}
  .tal-row > .tal-tm{flex:0 0 56px}
  .tal-nf{flex:1 1 calc(100% - 64px)}
  .tal-wf,.tal-bk{flex:1 1 0;min-width:0}
  .tal-lf{flex:1.35 1 0;min-width:0} /* 길이 칸은 단위 칩(min·mnt)이 있어 4자리(1440)가 들어가게 조금 더 넓게 */
  .tal-mv{flex:none}
  .tal-bk{justify-content:flex-start;padding-left:4px}
  .tal-w,.tal-l{font-size:14.5px!important}
  .tal-vr{grid-template-columns:56px minmax(0,1fr) auto}
  .tal-mv button{width:26px}
  .tal[data-h12] .tal-row > .tal-tm{flex-basis:72px}
  .tal[data-h12] .tal-nf{flex-basis:calc(100% - 80px)}
  .tal[data-h12] .tal-vr{grid-template-columns:72px minmax(0,1fr) auto}
  .tal[data-h12] .tal-tm b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .tal-row,.tal-seg,.tal-fan{transition:none}
}