/* 날짜계산기 전용 CSS — 날짜 차이 계산기 흡수판(2026-10-17). 입력 막대(두 날짜 나란히) → 결과(큰 값 + 통계 칸) → 기간 띠 → 평일·주말 칸. 공용 부품은 assets/v2.css */
.dc-work{position:relative;display:flex;flex-direction:column}
.dc-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.dc-top .v2-seg button{height:32px;padding:0 12px;font-family:var(--sans);font-size:12.5px;font-weight:700}
.dc-today{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--muted);white-space:nowrap}
.dc-in{padding:16px 18px 14px;border-bottom:1px solid var(--soft);min-width:0}

/* 입력: 라벨 줄 오른쪽에 '오늘'(입력 옆에 두면 날짜가 잘린다, 2026-10-07 지적) */
.dc-pane[hidden]{display:none}
.dc-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 10px;align-items:start}
.dc-lab{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dc-lab label{cursor:pointer}
.dc-tbtn{flex:0 0 auto;border:0;background:none;padding:0 2px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dc-tbtn:hover{color:var(--ink)}
.dc-tbtn:focus-visible,.dc-swap:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
input.dc-date{display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);margin-top:6px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;outline:0;transition:border-color var(--ease),box-shadow var(--ease)}
input.dc-date:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
input.dc-date[aria-invalid="true"]{border-color:var(--accent)}
.dc-swapf .v2-label{display:block}
.dc-swap{justify-content:center;width:42px;height:var(--v2-ctl,42px);margin-top:6px;padding:0;font-size:17px;font-weight:700}
.dc-row2{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:12px}
.dc-quick{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.dc-qlab{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);margin-right:2px}
.dc-quick .v2-btn{height:28px;padding:0 10px;font-size:12px;font-variant-numeric:tabular-nums}
.dc-row2 .v2-switch{margin-left:auto}
.dc-addgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 12px;align-items:start}
.dc-perf{grid-column:1 / -1} /* 기간 4칸은 아래 줄 전체 폭: 기준일·방향 옆에 두면 1440px에서 semanas·minggu 단위 이름에 값 자리가 11~19px로 눌린다(align-check squeeze) */
.dc-dirf .v2-label,.dc-perf .v2-label{display:block}
.dc-dir{margin-top:6px;flex-wrap:nowrap}
.dc-dir button{height:var(--v2-ctl,42px);padding:0 14px;white-space:nowrap}
.dc-units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:6px}
.dc-unit{display:flex;align-items:center;height:var(--v2-ctl,42px);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden;transition:border-color var(--ease),box-shadow var(--ease)}
.dc-unit:focus-within{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.dc-unit input{flex:1 1 auto;min-width:0;width:100%;height:calc(100% + 2px);margin:-1px 0;padding:0 0 0 10px;border:0;background:none;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;outline:0}
.dc-unit input[aria-invalid="true"]{color:var(--accent)}
.dc-unit b{flex:0 0 auto;padding:0 10px 0 6px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.dc-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.dc-help{flex:1 1 280px;min-width:0;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
@container v2in (max-width:419px){ .dc-units{grid-template-columns:repeat(2,minmax(0,1fr))} .dc-row2 .v2-switch{margin-left:0} }
@container v2in (max-width:329px){ /* 날짜칸은 글자 폭 141px가 필요: 반쪽이 그보다 좁으면 세로로 쌓고 바꾸기는 끝으로 */
  .dc-pair{grid-template-columns:minmax(0,1fr)} .dc-swapf{order:3} .dc-swapf .v2-label{display:none} .dc-swap{width:auto;padding:0 12px;height:32px;margin-top:8px}
  .dc-addgrid{grid-template-columns:minmax(0,1fr)} .dc-dir{display:flex} .dc-dir button{flex:1 1 0;white-space:nowrap}
}

/* 결과 */
.dc-out{padding:16px 18px 18px;min-width:0;container:dcout / inline-size}
.dc-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px 24px;align-items:start}
.dc-main{min-width:0}
.dc-main .v2-label{display:block;margin-bottom:6px}
.dc-out .v2-big small{margin-left:8px;font-size:15px;font-weight:600;color:var(--muted)}
.v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.dc-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.dc-stats:empty{display:none}
.dc-stats li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 0 9px;border-top:1px solid var(--soft)}
.dc-stats li span{font-family:var(--sans);font-size:12px;color:var(--muted)}
.dc-stats li b{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.dc-stats li.is-key b{color:var(--accent)}
.dc-stats li.is-wide{grid-column:1 / -1}
.dc-stats li small{font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--muted)}
@container dcout (max-width:559px){ .dc-res{grid-template-columns:minmax(0,1fr)} }

/* 기간 띠(R45): 년·개월·일 덩어리가 실제 달력 길이대로 놓인다. 값이 바뀌면 덩어리 폭이 미끄러진다 — transitions-dev 01 card resize 스니펫 그대로(.t-resize) */
:root{
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-resize {
  transition:
    width  var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize { transition: none !important; }
}
.dc-span{position:relative;margin-top:18px}
.dc-span[hidden]{display:none}
.dc-span-top{position:relative;height:20px}
.dc-span-top span{position:absolute;bottom:7px;transform:translateX(-50%);font-family:var(--sans);font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.dc-span-top span.is-now{color:var(--ink);font-weight:700}
.dc-span-top span.is-hide{visibility:hidden}
.dc-span-bar{position:relative;display:flex;gap:2px;height:30px}
.dc-seg{flex:0 0 auto;min-width:2px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius);background:color-mix(in srgb, var(--fill) 66%, var(--paper));color:var(--on-fill)}
.dc-seg.k-y{background:var(--fill)}
.dc-seg.k-d{background:var(--accent);color:var(--paper)}
.dc-seg.k-w{background:color-mix(in srgb, var(--fill) 36%, var(--paper));color:var(--ink)}
.dc-seg b{position:relative;z-index:1;font-family:var(--sans);font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;padding:0 4px}
.dc-seg.is-tight b{visibility:hidden}
.dc-span-now{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--ink);box-shadow:0 0 0 1.5px var(--paper);pointer-events:none;transition:left var(--resize-dur) var(--resize-ease)}
.dc-span-ends{display:flex;justify-content:space-between;gap:12px;margin-top:7px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.dc-span-ends span:last-child{text-align:right}
.dc-span-ends small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.dc-span-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted);font-variant-numeric:tabular-nums}
.dc-span-note:empty{display:none}
.dc-span-note strong{color:var(--ink);font-weight:700}
@media (prefers-reduced-motion: reduce){ .dc-span-now{transition:none} }
.dc-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.dc-foot .v2-status{margin-left:auto}
.dc-foot .v2-btn[hidden]{display:none}

/* 평일·주말 칸(R45): 기간 안의 날을 주(세로 7칸) 단위로. 처음 그릴 때 하루씩 채워진다 */
.dc-cal{padding:14px 18px 16px;border-top:1px solid var(--soft);min-width:0}
.dc-cal[hidden]{display:none}
.dc-cal-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-bottom:10px}
.dc-cal-sum{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dc-cal-flex{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 28px}
.dc-cal-scroll{flex:0 1 auto;max-width:100%;overflow-x:auto;padding:3px 3px 6px;margin:-3px 0 0 -3px;--cs:14px;--cg:3px}
.dc-cal-side{flex:1 1 220px;min-width:0}
.dc-cal-side .dc-cal-key{margin-top:18px}
.dc-cal-in{display:inline-block}
.dc-cal-mon{position:relative;height:16px;margin-left:calc(22px + var(--cg))}
.dc-cal-mon span{position:absolute;bottom:2px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.dc-cal-body{display:flex;gap:var(--cg)}
.dc-cal-wd{display:grid;grid-template-rows:repeat(7,var(--cs));gap:var(--cg);width:22px;flex:0 0 22px}
.dc-cal-wd span{display:flex;align-items:center;font-family:var(--sans);font-size:10.5px;color:var(--muted);line-height:1}
.dc-cal-grid{display:grid;grid-template-rows:repeat(7,var(--cs));grid-auto-flow:column;grid-auto-columns:var(--cs);gap:var(--cg)}
.dc-cal-grid i{position:relative;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);font-style:normal;font-family:var(--sans);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);background:color-mix(in srgb, var(--soft) 55%, transparent);transition:opacity 220ms ease var(--d,0ms)}
.dc-cal-grid i.is-out{visibility:hidden}
.dc-cal-grid i.is-cnt{background:color-mix(in srgb, var(--fill) 78%, var(--paper));color:var(--on-fill)}
.dc-cal-grid i.is-we,.k-we{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--line) 90%, transparent) 0 2px, transparent 2px 5px),var(--paper);box-shadow:inset 0 0 0 1px var(--soft);color:var(--muted)}
.dc-cal-grid i.is-hol,.k-hol{background:var(--accent);box-shadow:none;color:var(--paper)}
.dc-cal-grid i.is-we.is-hol{background:repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 5px),var(--paper);box-shadow:inset 0 0 0 1px var(--accent);color:var(--ink)}
.dc-cal-grid i.is-skip,.k-skip{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.dc-cal-grid i.is-end{outline:2px solid var(--ink);outline-offset:1px}
.dc-cal-grid i.is-now::after,.k-now::after{content:"";position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px var(--paper)}
.dc-cal-grid.is-pre i{opacity:.12;transition:none}
@media (prefers-reduced-motion: reduce){ .dc-cal-grid i{transition:none} }
.dc-cal-key{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;padding:0;font-family:var(--sans);font-size:12px;color:var(--muted)}
.dc-cal-key li{display:inline-flex;align-items:center;gap:6px}
.dc-cal-key i{position:relative;display:inline-block;width:12px;height:12px;border-radius:var(--radius)}
.k-wd{background:color-mix(in srgb, var(--fill) 78%, var(--paper))}
.k-now{box-shadow:inset 0 0 0 1px var(--soft);background:var(--paper)}
.dc-hols{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.7;color:var(--ink)}
.dc-hols:empty{display:none}
.dc-hols b{font-weight:700}
.dc-hols .is-we{color:var(--muted)}
.dc-hols small{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}

/* 말풍선(기간 띠 덩어리·평일 칸 공용) */
.dc-tip{position:absolute;z-index:5;max-width:260px;padding:6px 9px;border-radius:var(--radius);background:var(--fill);color:var(--on-fill);font-family:var(--sans);font-size:12px;font-weight:600;line-height:1.45;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap}
.dc-tip[hidden]{display:none}

@media (max-width:720px){
  .dc-out{order:-1;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .dc-top,.dc-in,.dc-out,.dc-cal{padding-left:12px;padding-right:12px}
  .dc-today{margin-left:0;flex-basis:100%}
}