/* 날짜 경과시간 계산기 전용 CSS (2026-10-18). 시작·경과·끝 세 칸(mdt-top), 문장·버튼(mdt-say), 다른 표기 칸(mdt-tiles), 날짜별 24시간 칸·24시간 묶음(mdt-vis). 공용 부품은 assets/v2.css.
   움직임은 transitions.dev 토큰(위치·크기 400ms cubic-bezier(.22,1,.36,1), 항목 사이 40ms) — 테마 --ease는 120ms 지연을 품고 있어 쓰지 않음 */
.mdt-work{container:mdt / inline-size}
.mdt-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"bar bar bar" "a mid b";border-bottom:1px solid var(--soft)}
.mdt-bar{grid-area:bar;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.mdt-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.mdt-ex-btns{display:flex;flex-wrap:wrap;gap:6px}
.mdt-ex-btns .v2-btn{height:30px;padding:0 10px;font-size:12px}
.mdt-ex-btns .v2-btn[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.mdt-a{grid-area:a}
.mdt-b{grid-area:b}
.mdt-end{container:mdtend / inline-size;display:flex;flex-direction:column;gap:10px;padding:16px 18px;min-width:0}
.mdt-leg{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink)}
.mdt-leg span{display:inline-flex;align-items:center;gap:7px}
.mdt-leg span i{flex:0 0 auto;width:9px;height:9px;border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
.mdt-b .mdt-leg span i{background:var(--ink)}
.mdt-now{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;padding:0 2px;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}
.mdt-now:hover{color:var(--ink)}
.mdt-now:disabled{opacity:.45;cursor:not-allowed;text-decoration:none}
.mdt-now:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mdt-flds{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.mdt-in{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}
.mdt-in:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mdt-in:disabled{background:var(--wash);color:var(--muted);opacity:1}
.v2-f.is-invalid .mdt-in{border-color:var(--accent)}
.mdt-live{margin-top:2px}
.mdt-mid{grid-area:mid;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px 18px 58px;min-width:0;text-align:center;border-left:1px solid var(--soft);border-right:1px solid var(--soft)}
.mdt-big{flex-wrap:wrap;justify-content:center;gap:0 .28em;font-size:38px;line-height:1.08}
.mdt-big span{white-space:nowrap}
.mdt-tot{margin:0;min-height:1.5em;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
/* 시작(속 빈 점) → 끝(채운 점) 연결선: 경과 시간이 두 시점 '사이'에 있다는 표시 */
.mdt-line{position:relative;align-self:stretch;height:12px;margin:2px -18px 0}
.mdt-line i{position:absolute;left:0;right:6px;top:5px;height:2px;background:var(--line)}
.mdt-line::before{content:"";position:absolute;left:-1px;top:2px;width:8px;height:8px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);box-sizing:border-box}
.mdt-line::after{content:"";position:absolute;right:0;top:1px;border-left:9px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
.mdt-sw{grid-area:mid;align-self:end;justify-self:center;margin:0 0 16px} /* 넓은 폭: 경과 칸 아래쪽에 겹쳐 놓음(DOM은 시작 → 바꾸기 → 끝 순서) */
.mdt-swap{height:28px;padding:0 10px;font-size:12px}
.mdt-say{padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
.mdt-sent{margin:0;font-variant-numeric:tabular-nums}
.mdt-sent:empty,.mdt-note:empty{display:none}
.mdt-note{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.mdt-btns{display:flex;flex-wrap:wrap;align-items:center;gap:6px 6px;margin-top:12px}
.mdt-btns .v2-status{margin-left:4px}
/* 같은 길이의 다른 표기: 칸 구분선은 안쪽 그림자(바깥 줄은 overflow로 잘라 상자 크기에 영향 없음) */
.mdt-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border-bottom:1px solid var(--soft)}
.mdt-tiles:empty{display:none}
.mdt-tiles li{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0 -1px -1px 0;padding:12px 18px;box-shadow:inset -1px 0 var(--soft),inset 0 -1px var(--soft)}
.mdt-tiles span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.mdt-tiles b{font-family:var(--sans);font-size:17px;font-weight:750;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.mdt-tiles small{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
/* 날짜별 24시간 칸: 칸 하나 = 그날 0시(위)~24시(아래), 채움 = 그날 지난 부분 */
.mdt-vis{display:flex;flex-direction:column;gap:10px;padding:14px 18px 18px;min-width:0}
.mdt-vis.is-empty{display:none}
.mdt-cal{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px}
.mdt-axis{position:relative;height:132px;margin-top:54px}
.mdt-axis i{position:absolute;right:0;transform:translateY(-50%);font-family:var(--sans);font-style:normal;font-size:10px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.mdt-axis i:nth-child(1){top:0}
.mdt-axis i:nth-child(2){top:25%}
.mdt-axis i:nth-child(3){top:50%}
.mdt-axis i:nth-child(4){top:75%}
.mdt-axis i:nth-child(5){top:100%}
.mdt-cols{list-style:none;margin:0;padding:0;display:flex;gap:6px;min-width:0}
.mdt-col{flex:1 1 0;min-width:0;max-width:120px;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--sans)}
.mdt-mo{height:14px;font-size:10.5px;font-weight:600;line-height:14px;color:var(--muted);white-space:nowrap}
.mdt-dn{height:20px;font-size:15px;font-weight:750;line-height:20px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mdt-wd{height:16px;font-size:11px;line-height:16px;color:var(--muted);white-space:nowrap}
.mdt-col.is-we .mdt-wd{font-weight:750;color:var(--ink)}
.mdt-tr{position:relative;display:block;width:100%;height:132px;margin-top:4px;border-radius:var(--radius);overflow:hidden;background:repeating-linear-gradient(to bottom,transparent 0 calc(25% - 1px),var(--soft) calc(25% - 1px) 25%),var(--wash)}
.mdt-tr i{position:absolute;left:0;right:0;display:block;background:var(--fill);transform-origin:top;transition:top .4s cubic-bezier(.22,1,.36,1),height .4s cubic-bezier(.22,1,.36,1)}
.mdt-col.is-new .mdt-tr i{animation:mdt-grow .4s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes mdt-grow{from{transform:scaleY(0)}}
.mdt-col.is-gap .mdt-tr i{background:repeating-linear-gradient(135deg,var(--fill) 0 3px,transparent 3px 6px)}
.mdt-vis.is-live .mdt-col:last-child .mdt-tr i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)} /* 지금 */
.mdt-hr{margin-top:5px;font-size:11.5px;font-weight:650;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mdt-col.is-odd .mdt-hr{text-decoration:underline dotted;text-underline-offset:2px}
/* 24시간씩 묶은 막대 */
.mdt-blk{display:flex;flex-wrap:wrap;gap:4px;min-width:0} /* 남은 칸 글자가 넘치면 잘리지 않고 다음 줄로 */
.mdt-blk b{position:relative;flex:1 1 0;min-width:max-content;height:30px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius);background:var(--wash);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.mdt-blk b.is-full{background:var(--fill);color:var(--on-fill)}
.mdt-blk b.is-many{flex-grow:3}
.mdt-blk b i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--fill) 32%,transparent);transition:width .4s cubic-bezier(.22,1,.36,1)}
.mdt-blk span{position:relative;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.mdt-cap{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink);font-variant-numeric:tabular-nums}
@container mdtend (min-width:340px){ .mdt-flds{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } /* 안쪽 폭 기준: 초까지 넣은 12시간제 시각(155px)이 들어가는 폭 */
@container mdt (max-width:759px){
  .mdt-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"mid" "bar" "a" "sw" "b"} /* 경과가 맨 위, 바꾸기는 시작과 끝 사이(화면 순서 = Tab 순서) */
  .mdt-mid{padding-bottom:18px;border:0;border-bottom:1px solid var(--soft)}
  .mdt-bar{border-bottom:1px solid var(--soft)}
  .mdt-sw{grid-area:sw;align-self:auto;justify-self:stretch;display:flex;justify-content:center;margin:0;padding:8px 0;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
  .mdt-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container mdt (max-width:479px){
  .mdt-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"mid" "bar" "a" "b"}
  .mdt-big{font-size:32px}
  .mdt-tiles li{padding:10px 14px}
  .mdt-say,.mdt-vis,.mdt-bar,.mdt-end{padding-left:14px;padding-right:14px}
  .mdt-line{margin-left:-18px;margin-right:-18px}
}
@media (prefers-reduced-motion:reduce){ .mdt-tr i,.mdt-blk b i{transition:none} .mdt-col.is-new .mdt-tr i{animation:none} }