/* 날짜 시간 계산기 전용 CSS (2026-10-18). 식 한 줄(시작 | ＋− | 기간 | = | 결과)·자주 찾는 기간·달력 위의 기간(시간 자)·결과 줄 dt-*. 공용 부품은 assets/v2.css.
   움직임은 transitions.dev 기준(쓸림 700ms cubic-bezier(.22,1,.36,1)) — 테마 --ease는 120ms 지연을 품고 있어 쓰지 않음 */
.dt-work{container:dt / inline-size} /* 배치는 툴 폭으로 */
/* 식의 행: 1 카드 이름 · 2 날짜 | ＋ | 주 · 일 · 3 시각 | − | 시간 · 분. 결과 카드는 세 줄을 함께 써서 아랫변이 시각 칸과 같다.
   시작·±·기간은 같은 행을 나눠 쓴다(subgrid): 카드 이름이 언어에 따라 두 줄이 돼도 같은 줄의 칸 윗변·아랫변·높이(42px)가 같다 */
.dt-eq{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) 18px minmax(0,1.2fr);grid-template-rows:auto auto auto;gap:8px 10px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.dt-card{display:flex;flex-direction:column;gap:8px;min-width:0}
.dt-start{grid-area:1 / 1 / span 3}
.dt-op{grid-area:2 / 2 / span 2}
.dt-dur{grid-area:1 / 3 / span 3}
.dt-eqs{grid-area:2 / 4 / span 2}
.dt-res{grid-area:1 / 5 / span 3}
.dt-start,.dt-dur,.dt-op{display:grid;grid-template-rows:subgrid;row-gap:8px;align-content:start}
.dt-dur{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px}
.dt-dur .dt-head{grid-column:1 / -1}
.dt-dur .dt-grid{display:contents}
.dt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.dt-head .v2-label{min-width:0}
.dt-now{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;height:24px;padding:0 9px;border:1px solid var(--soft);border-radius:999px;background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted);cursor:pointer}
.dt-now i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.dt-now:hover{color:var(--ink);border-color:var(--line)}
.dt-now[aria-pressed="true"]{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.dt-now[aria-pressed="true"] i{background:var(--accent);animation:dt-pulse 2s ease-in-out infinite}
.dt-now:focus-visible,.dt-op button:focus-visible,.dt-cp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes dt-pulse{50%{opacity:.35}}
.dt-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}
.dt-in:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.v2-f.is-invalid .dt-in,.v2-f.is-invalid .v2-input{border-color:var(--accent)}
.dt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.dt-grid .v2-input input{padding:0 8px}
.dt-grid .v2-input b{min-width:30px;padding:0 7px}
/* ＋ 뒤 · − 전: 식 가운데의 두 단추 */
.dt-op button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-sizing:border-box;width:46px;height:var(--v2-ctl,42px);padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-family:var(--sans);cursor:pointer}
.dt-op button b{font-size:18px;font-weight:700;line-height:1}
.dt-op button span{font-size:10px;font-weight:650;line-height:1.1}
.dt-op button:hover{color:var(--ink);border-color:var(--line)}
.dt-op button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.dt-eqs{display:grid;place-items:center;font-family:var(--sans);font-size:26px;font-weight:300;color:var(--muted)}
.dt-res{padding:10px 14px 12px;border-radius:var(--radius);gap:0}
.dt-res .dt-head .v2-label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.3} /* 긴 기간 라벨은 두 줄까지(전체는 아래 문장) — 카드가 입력 세 줄 높이를 넘지 않게 */
.dt-rdate{margin:auto 0 0;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.dt-rdate small{font-size:12px;font-weight:600;color:var(--muted)}
.dt-bigline{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-top:2px}
.dt-big{margin:0;font-size:40px;overflow-wrap:anywhere}
.dt-alt{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.dt-shift{flex:0 0 auto;padding:1px 7px;border-radius:999px;background:var(--fill);color:var(--on-fill);font-style:normal;font-size:11.5px;font-weight:700}
.dt-chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.dt-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 300px;min-width:0}
.dt-chips .v2-btn,.dt-ex{height:30px;padding:0 10px;font-size:12px;font-variant-numeric:tabular-nums}
.dt-chips .v2-btn[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.dt-ex{margin-left:auto}
.dt-say{padding:12px 18px 2px}
.dt-say .v2-status:empty{display:none}
.dt-say .v2-status{display:block;margin-bottom:6px}
.dt-sum{margin:0 0 6px;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink);font-variant-numeric:tabular-nums}
.dt-sum:empty{display:none}
.dt-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
/* 달력 위의 기간: 표식 줄(0~40) · 띠와 기간(40~72) · 눈금 글자(76~) */
.dt-box{padding:14px 18px 6px;min-width:0}
.dt-box>.v2-label{display:block;margin-bottom:6px}
.dt-ruler{position:relative;height:104px;overflow-x:clip;font-family:var(--sans);font-variant-numeric:tabular-nums}
.dt-ruler.is-empty{height:0}
.dt-bands,.dt-track{position:absolute;left:0;right:0;top:40px;height:32px}
.dt-band{position:absolute;top:0;bottom:0}
.dt-band.is-alt{background:color-mix(in srgb, var(--soft) 45%, transparent)}
.dt-band.is-we{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.dt-track{border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.dt-span{position:absolute;top:10px;height:12px;min-width:2px;border-radius:6px;background:var(--accent);transform-origin:left center;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.dt-span.is-back{transform-origin:right center}
.dt-span.is-grow{transform:scaleX(0);transition:none}
.dt-ticks{position:absolute;left:0;right:0;top:40px;bottom:0}
.dt-tk{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);white-space:nowrap}
.dt-tk::before{content:"";display:block;width:1px;height:32px;margin-bottom:4px;background:var(--soft)}
.dt-tk.is-day::before{background:var(--line)}
.dt-tk b{font-size:10.5px;font-weight:600;color:var(--muted)}
.dt-tk.is-day b{color:var(--ink)}
.dt-tk small{font-size:10px;color:var(--muted)}
.dt-tk.no-lb b,.dt-tk.no-lb small{visibility:hidden}
.dt-nowln{position:absolute;top:40px;width:0;height:32px;border-left:1.5px dashed var(--muted)}
.dt-nowln small{position:absolute;bottom:1px;left:3px;font-size:10px;font-weight:650;color:var(--muted);white-space:nowrap}
.dt-mk{position:absolute;top:0;width:0;height:72px}
.dt-mk::before{content:"";position:absolute;left:-.5px;top:20px;width:1px;height:30px;background:var(--ink)}
.dt-mk i{position:absolute;left:-6px;top:50px;box-sizing:border-box;width:12px;height:12px;border:2.5px solid var(--ink);border-radius:50%;background:var(--paper)}
.dt-mk-e i{border-color:var(--accent);background:var(--accent)}
.dt-mk b{position:absolute;top:2px;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.dt-mk.is-l b{left:-6px}
.dt-mk.is-r b{right:-6px}
.dt-mk-e.is-near::before{top:38px;height:12px}
.dt-mk-e.is-near b{top:20px}
.dt-rsum{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted);font-variant-numeric:tabular-nums}
.dt-out{display:grid;gap:12px;padding:8px 18px 16px;min-width:0}
.dt-rows li{flex-wrap:wrap;align-items:center}
.dt-rows li b{flex:1 1 auto;margin-left:auto;text-align:right;white-space:normal;overflow-wrap:anywhere}
.dt-cp{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}
.dt-cp:hover{color:var(--ink)}
.dt-btns{display:flex;flex-wrap:wrap;gap:6px}
@container dt (max-width:759px){ /* 결과 카드가 맨 위, 그 아래 같은 세 줄 */
  .dt-eq{grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);grid-template-rows:auto auto auto auto}
  .dt-res{grid-area:1 / 1 / auto / -1;margin-bottom:6px}
  .dt-start{grid-area:2 / 1 / span 3}
  .dt-op{grid-area:3 / 2 / span 2}
  .dt-dur{grid-area:2 / 3 / span 3}
  .dt-eqs{display:none}
}
@container dt (max-width:519px){ /* 한 열: 결과 → 시작 → ＋뒤·−전(가로 두 칸) → 기간 */
  .dt-eq{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:14px 14px}
  .dt-res{order:-1}
  .dt-res,.dt-op{grid-area:auto}
  .dt-start,.dt-dur{grid-area:auto / auto / span 3}
  .dt-op{display:flex;flex-direction:row;gap:8px}
  .dt-op button{flex:1 1 0;width:auto;flex-direction:row;gap:6px}
  .dt-op button b{font-size:18px}
  .dt-op button span{font-size:12px}
  .dt-chiprow,.dt-say,.dt-box,.dt-out{padding-left:14px;padding-right:14px}
  .dt-big{font-size:34px}
  .dt-ex{margin-left:0}
}
@media (prefers-reduced-motion:reduce){ .dt-span{transition:none} .dt-now[aria-pressed="true"] i{animation:none} }