/* 마감 시각 역산기 — 역산 일정표(2026-10-22). 답 띠(늦어도 시작할 시각 | 지금 기준 판정) → 시간 띠 → 조건 줄 → 노선도 일정표.
   일정표는 판·목록·줄·마디가 열을 함께 쓰는 subgrid(시작 시각 | 노선 점 | 이름 | 분 | 순서 단추)라 시각과 점이 한 세로선에 선다.
   좁은 작업면(480px 이하)은 줄마다 '시각 | 점 | 이름' 위, '분 | 순서 단추' 아래 두 줄. 값이 바뀌면 띠의 단계 몫이 미끄러지고,
   상황 예시를 누르면 마감 쪽부터 거꾸로 펼쳐진다(R45). 계획 시간 안이면 지금 바늘·지난 몫·지금 단계 점이 보인다. */
.dtc{container:dtc / inline-size}
.dtc [hidden]{display:none!important}
.dtc-ttl{margin:0;font-family:var(--sans)}
.dtc-ttl b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.dtc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}

/* 답 띠 */
.dtc-top{padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.dtc-ans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px 24px;align-items:stretch}
.dtc-start{min-width:0}
.dtc-start .v2-big{margin-top:6px}
.dtc-start .v2-sub{margin-top:8px;font-family:var(--sans);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.dtc-start .v2-sub.is-e{color:var(--accent)}
.dtc-now{min-width:0;padding:10px 14px 11px;background:var(--card);border:1px solid var(--soft);border-left:3px solid var(--line);border-radius:var(--radius);transition:border-color var(--ease)}
.dtc-now[data-v="ahead"]{border-left-color:var(--fill)}
.dtc-now[data-v="buf"],.dtc-now[data-v="late"],.dtc-now[data-v="past"]{border-left-color:var(--accent)}
.dtc-v{margin:5px 0 0;font-family:var(--sans);font-size:17px;font-weight:750;line-height:1.35;color:var(--ink);font-variant-numeric:tabular-nums}
.dtc-now[data-v="late"] .dtc-v,.dtc-now[data-v="past"] .dtc-v{color:var(--accent)}
.dtc-vs,.dtc-pos{margin:4px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted);font-variant-numeric:tabular-nums}
.dtc-pos{padding-top:5px;border-top:1px dashed var(--soft);color:var(--ink)}

/* 시간 띠: 시작(왼쪽) ~ 마감(오른쪽) */
.dtc-strip{margin-top:14px}
.dtc-strip.is-live{padding-top:17px}
.dtc-bar{position:relative;height:34px;background:var(--paper);border:1px solid var(--soft);border-radius:var(--radius)}
.dtc-seg{position:absolute;top:3px;bottom:3px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 5px;overflow:hidden;white-space:nowrap;font-style:normal;border-radius:2px;transition:left .5s cubic-bezier(.2,.7,.2,1),width .5s cubic-bezier(.2,.7,.2,1),box-shadow var(--ease)}
.dtc-seg + .dtc-seg{box-shadow:inset 1px 0 0 var(--paper)}
.dtc-seg.is-a{background:var(--fill);color:var(--on-fill)}
.dtc-seg.is-b{background:color-mix(in srgb, var(--fill) 20%, var(--paper));color:var(--ink)}
.dtc-seg.is-buf{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 6px);color:var(--muted)}
.dtc-seg b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--sans);font-size:12px;font-weight:700}
.dtc-seg em{flex:none;font-family:var(--sans);font-size:11.5px;font-style:normal;font-weight:600;opacity:.85;font-variant-numeric:tabular-nums}
.dtc-seg.is-hn b,.dtc-seg.is-hm em{display:none}
.dtc-seg.is-now{box-shadow:inset 0 0 0 2px var(--accent)}
.dtc-past{position:absolute;left:0;top:0;bottom:0;width:0;z-index:1;background:color-mix(in srgb, var(--paper) 58%, transparent);pointer-events:none;transition:width .6s linear}
.dtc-needle{position:absolute;top:-4px;bottom:-4px;z-index:2;width:2px;margin-left:-1px;background:var(--accent);transition:left .6s linear}
.dtc-needle b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:2px;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.dtc-ticks{position:relative;height:16px;margin-top:5px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.dtc-ticks b{position:absolute;top:0;font-weight:400;white-space:nowrap;transform:translateX(-50%)}
.dtc-ticks b.is-first{transform:none}
.dtc-ticks b.is-last{transform:translateX(-100%);font-weight:700;color:var(--ink)}
.dtc.is-wait .dtc-bar{background:var(--paper) repeating-linear-gradient(90deg,var(--soft) 0 1px,transparent 1px 12.5%)}

/* 조건 줄 */
.dtc-form{margin:0;padding:14px 18px 8px}
.dtc-cond{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:10px 12px;align-items:start}
.dtc-ft .v2-input input[type="time"]{text-align:left}
.dtc-cmsg{grid-column:1/-1;margin:-2px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--accent)}
.dtc-num input{text-align:center;padding:0 4px}
.dtc-num b + .dtc-pm{border-left:1px solid var(--soft)}
.dtc-pm{flex:none;display:grid;place-items:center;width:30px;padding:0;border:0;background:none;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--muted);cursor:pointer;touch-action:manipulation}
.dtc-pm:hover{color:var(--ink);background:var(--wash)}

/* 일정표: 시작 시각 | 점 | 이름 | 분 | 순서 단추 */
.dtc-plan{display:grid;grid-template-columns:fit-content(104px) 18px minmax(0,1fr) max-content max-content;column-gap:10px;margin-top:14px}
.dtc-plan > *,.dtc-list > *{grid-column:1/-1}
.dtc-list,.dtc-row,.dtc-node,.dtc-addw{display:grid;grid-template-columns:subgrid;align-items:center}
.dtc-ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 4px}
.dtc-cnt{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.dtc-row{--dc:26px;position:relative}
.dtc-row > .dtc-at,.dtc-row > .v2-f,.dtc-row > .dtc-ops{margin:5px 0}
.dtc-at{grid-column:1;align-self:start;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-height:42px;text-align:right}
.dtc-node > .dtc-at{min-height:36px}
.dtc-t{font-family:var(--sans);font-size:15px;font-weight:750;line-height:1.2;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.dtc-dd{margin-top:2px;padding:0 4px;border-radius:2px;background:var(--wash);font-family:var(--sans);font-size:11px;font-weight:650;line-height:1.45;color:var(--ink)}
.dtc-dd:empty{display:none}
.dtc-dot{grid-column:2;align-self:stretch;position:relative}
.dtc-dot::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line)}
.dtc-dot::after{content:"";position:absolute;left:50%;top:var(--dc);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--fill);box-shadow:0 0 0 3px var(--card)}
.dtc-list > .dtc-row:first-child .dtc-dot::before{top:var(--dc)}
.dtc-nf{grid-column:3}
.dtc-nf .v2-input input{text-align:left;font-weight:600}
.dtc-mf{grid-column:4}
.dtc-mf .dtc-num input{width:3.4em;flex:none}
.dtc-ops{grid-column:5;display:flex;gap:4px}
.dtc-mv{display:flex;gap:4px}
.dtc-op{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}
.dtc-op:hover{border-color:var(--line);color:var(--ink)}
.dtc-op[aria-disabled="true"]{opacity:.35;cursor:default}
.dtc-op[aria-disabled="true"]:hover{border-color:var(--soft);color:var(--muted)}
.dtc-op svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dtc-msg{grid-column:3/-1;margin:-2px 0 6px;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--accent)}
.dtc-row.is-skip .dtc-t{color:var(--muted);font-weight:500}
.dtc-row.is-skip .dtc-dot::after{background:var(--card);box-shadow:inset 0 0 0 2px var(--line),0 0 0 3px var(--card)}
.dtc-row:focus-within .dtc-t{color:var(--ink)}
.dtc-row.is-now .dtc-dot::after,.dtc-node--buf.is-now .dtc-dot::after{background:var(--accent);animation:dtc-pulse 1.8s ease-out infinite}
@keyframes dtc-pulse{0%{box-shadow:0 0 0 3px var(--card),0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent)}100%{box-shadow:0 0 0 3px var(--card),0 0 0 11px transparent}}
.dtc-addw{padding:2px 0 4px}
.dtc-addw::before{content:"";grid-column:2;align-self:stretch;justify-self:center;width:2px;background:var(--line)}
.dtc-add{grid-column:3/-1;justify-self:start}
.dtc-add[aria-disabled="true"]{opacity:.45}
.dtc-node{--dc:18px}
.dtc-nl{grid-column:3/-1;font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.dtc-nl b{margin-right:4px;font-weight:700;color:var(--ink)}
.dtc-node--buf .dtc-dot::before{background:repeating-linear-gradient(to bottom,var(--line) 0 3px,transparent 3px 7px)}
.dtc-node--buf .dtc-dot::after{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--card);box-shadow:inset 0 0 0 2px var(--muted),0 0 0 3px var(--card)}
.dtc-node--buf.is-zero .dtc-dot::after{box-shadow:inset 0 0 0 2px var(--line),0 0 0 3px var(--card)}
.dtc-node--dl .dtc-dot::before{bottom:auto;height:var(--dc)}
.dtc-node--dl .dtc-dot::after{width:12px;height:12px;border-radius:2px;transform:rotate(45deg);background:var(--ink)}
.dtc-node--dl .dtc-nl b{font-size:14px}

/* 아래 단추 줄 */
.dtc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.dtc-fa{display:flex;flex-wrap:wrap;gap:6px}
.dtc-ns{margin:0;padding:0 18px 14px;font-family:var(--sans);font-size:13px;color:var(--accent)}

/* 중간 폭: 답과 판정 위아래, 조건은 '날짜 / 시각 · 여유' */
@container dtc (max-width:600px){
  .dtc-ans{grid-template-columns:minmax(0,1fr)}
  .dtc-cond{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dtc-fd{grid-column:1/-1}
}
/* 620px 이하: 줄마다 두 줄(시각 | 점 | 이름 / · | 점 | 분 | 순서 단추). 한 줄이면 1181~1200px·560~600px 화면에서 이름 칸이 97~141px로 좁아
   'Park and walk'·'Mandi dan siap-siap' 같은 예시 이름이 잘린다(align-check squeeze) */
@container dtc (max-width:620px){
  .dtc-plan{grid-template-columns:fit-content(84px) 16px minmax(0,1fr) max-content;column-gap:9px}
  .dtc-row > .v2-f,.dtc-row > .dtc-ops{margin:0}
  .dtc-row{row-gap:6px;padding:5px 0 7px}
  .dtc-row > .dtc-at{margin:0;grid-row:1}
  .dtc-dot{grid-row:1/span 3}
  .dtc-row .dtc-dot{margin:-5px 0 -7px}
  .dtc-row{--dc:26px}
  .dtc-nf{grid-column:3/-1;grid-row:1}
  .dtc-mf{grid-column:3;grid-row:2;justify-self:start}
  .dtc-ops{grid-column:4;grid-row:2;align-self:center}
  .dtc-msg{grid-row:3;margin:0}
}
/* 휴대폰: 둘째 줄을 '↑↓(시각 칸 아래) | 점 | 분 | ×'로 나눠 분 칸 묶음이 순서 단추를 덮지 않게(독립 검토 B1, 320~375px에서 5~61px 겹침) */
@container dtc (max-width:480px){
  .dtc-top{padding:14px 14px 12px}
  .dtc-ops{display:contents}
  .dtc-mv{grid-column:1;grid-row:2;justify-self:end;align-self:center}
  .dtc-x{grid-column:4;grid-row:2;align-self:center}
  .dtc-pm{width:26px}
  .dtc-num b{min-width:28px;padding:0 6px}
  .dtc-form{padding:12px 14px 8px}
  .dtc-foot{padding:12px 14px 14px}
  .dtc .v2-big{font-size:40px}
  .dtc-plan{grid-template-columns:fit-content(78px) 14px minmax(0,1fr) max-content;column-gap:8px}
  .dtc-t{font-size:14px}
  .dtc-dd{font-size:10.5px}
}
/* 좁은 휴대폰: 조건 칸을 한 열로(두 열이면 여유 칸 '1440'이 320px 모든 언어·360px id에서 잘림, 독립 검토 B2) */
@container dtc (max-width:400px){
  .dtc-cond{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .dtc-seg,.dtc-past,.dtc-needle,.dtc-now{transition:none}
  .dtc-row.is-now .dtc-dot::after,.dtc-node--buf.is-now .dtc-dot::after{animation:none}
}