/* 주간 영업시간 계산기 — 주간 시간판(2026-10-22). 합계 띠 → 요일 7줄 시간판(줄을 누르면 아래 편집 칸) → 영업시간 안내문.
   시간판은 subgrid로 요일 칸 폭을 모든 줄에서 같게 두고, 띠의 영업 칸은 값이 바뀌면 left·width가 미끄러진다(R45). */
.wbh{container:wbh / inline-size}
.wbh [hidden]{display:none!important} /* v2-btn·grid 칸의 display가 hidden을 덮지 않게 */
.wbh-ttl{margin:0;font-family:var(--sans)}
.wbh-ttl b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.wbh-acts{display:flex;flex-wrap:wrap;gap:6px}

/* 합계 띠 */
.wbh-sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px 24px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--soft)}
.wbh-tot .v2-big{margin-top:6px;flex-wrap:wrap;row-gap:2px}
.wbh-tot .v2-big.is-empty{font-size:24px}
.wbh-wk{position:relative;height:6px;margin-top:12px;background:var(--soft);border-radius:var(--radius);overflow:hidden}
.wbh-wk i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.wbh-tot .v2-sub{margin-top:8px;font-size:13px;color:var(--muted)}
.wbh-tot .v2-sub.is-e{color:var(--accent)}
.wbh-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--soft);border:1px solid var(--soft)}
.wbh-stats div{min-width:0;padding:9px 12px;background:var(--card)}
.wbh-stats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.wbh-stats dd{margin:3px 0 0;font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* 시간판 */
.wbh-board{display:grid;grid-template-columns:max-content minmax(0,1fr) 24px;padding:10px 18px 14px}
.wbh-axis,.wbh-day,.wbh-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;column-gap:12px;align-items:center}
.wbh-ticks{position:relative;height:16px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.wbh-ticks b{position:absolute;bottom:2px;font-weight:400;transform:translateX(-50%)}
.wbh-ticks b:nth-child(1){left:0;transform:none}.wbh-ticks b:nth-child(2){left:25%}.wbh-ticks b:nth-child(3){left:50%}.wbh-ticks b:nth-child(4){left:75%}.wbh-ticks b:nth-child(5){left:100%;transform:translateX(-100%)}
.wbh-row{width:100%;min-height:42px;padding:7px 0;border:0;border-top:1px solid var(--soft);background:none;color:var(--ink);text-align:left;cursor:pointer;transition:background var(--ease)}
.wbh-row:hover{background:color-mix(in srgb, var(--wash) 60%, transparent)}
.wbh-day.is-open .wbh-row{background:var(--wash)}
.wbh-dn{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-left:8px;font-family:var(--sans)}
.wbh-dn b{font-size:13.5px;font-weight:700}
.wbh-dn small{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.wbh-day.is-bad .wbh-dn small{color:var(--accent)}
.wbh-trk{position:relative;height:24px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper) linear-gradient(to right,var(--soft) 1px,transparent 1px) 0 0/12.5% 100%}
.wbh-row:hover .wbh-trk{border-color:var(--line)}
.wbh-day.is-off .wbh-trk{background-color:var(--wash)}
.wbh-trk i{position:absolute;top:3px;bottom:3px;background:color-mix(in srgb, var(--fill) 84%, var(--paper));border-radius:1px;transition:left .32s cubic-bezier(.2,.7,.2,1),width .32s cubic-bezier(.2,.7,.2,1)}
.wbh-trk i.is-out{border-radius:1px 0 0 1px}
.wbh-trk i.is-carry{background:repeating-linear-gradient(135deg,var(--fill) 0 2px,transparent 2px 5px);opacity:.6}
.wbh-trk i.is-clash{top:0;bottom:0;z-index:1;background:repeating-linear-gradient(135deg,var(--accent) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--accent)}
.wbh-off{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.wbh-chev{justify-self:center;width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.6;transition:transform var(--ease)}
.wbh-day.is-open .wbh-chev{transform:rotate(180deg)}

/* 편집 칸: 폼을 감싼 .wbh-ed 가 v2in 컨테이너가 된다(.wbh-day 가 컨테이너면 subgrid 가 꺼짐) */
.wbh-ed{grid-column:1/-1;padding:12px 14px 14px;background:color-mix(in srgb, var(--wash) 70%, var(--paper));border-top:1px dashed var(--soft)}
.wbh-ed form{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.wbh-edtop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:12px}
.wbh-edtop .v2-hint{margin:0}
.wbh-segs{display:grid;grid-template-columns:auto auto auto minmax(4.5em,auto) auto;justify-content:start;column-gap:8px;row-gap:8px;align-items:center}
.wbh-segh,.wbh-seg{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center}
.wbh-segh{margin-bottom:-3px}
.wbh-seg .v2-f{width:max-content} /* auto 칸은 시각 입력의 글자 폭보다 좁게 잡혀 상자가 옆 칸을 덮었다 */
.wbh-seg .v2-input{display:inline-flex}
.wbh-seg .v2-input input[type="time"]{flex:none;width:auto;padding:0 8px;text-align:left}
.wbh-tl{font-family:var(--sans);color:var(--muted)}
.wbh-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0;font-family:var(--sans);font-size:12.5px}
.wbh-nx{font-style:normal;color:var(--muted)}
.wbh-dur{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.wbh-x{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}
.wbh-x:hover{border-color:var(--line);color:var(--ink)}
.wbh-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
.wbh-add{grid-column:1/-1;justify-self:start}
.wbh-err{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.wbh-err span{display:block}
.wbh-err .is-e{color:var(--accent)}
.wbh-cp{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.wbh-cpb{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.wbh-wd{height:30px;padding:0 2px;white-space:nowrap;border:0;background:none;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* 안내문 */
.wbh-ntc{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.wbh-ntch{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.wbh-ntca{display:inline-flex;flex-wrap:wrap;gap:6px}
.wbh-ntcb{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin-top:10px;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink)}
.wbh-ntcb p{display:contents}
.wbh-ntcb b{font-weight:700}
.wbh-ntcb span{min-width:0;font-variant-numeric:tabular-nums}
.wbh-ntcb small{font-size:12.5px;color:var(--muted)}
.wbh-ntcb .is-off span{color:var(--muted)}
.wbh-ntcb p.wbh-nw{display:block;grid-column:1/-1;font-size:13px;color:var(--muted)}
.wbh-st{margin:0;padding:0 18px 12px}
.wbh-st:empty{padding:0}
.wbh-ns{margin:0;padding:12px 18px;font-size:13px}

@container v2in (min-width:560px){
  .wbh-ed form{grid-template-columns:auto minmax(140px,1fr);grid-template-areas:"top top" "segs cp" "err cp";column-gap:20px}
  .wbh-edtop{grid-area:top}.wbh-segs{grid-area:segs}.wbh-err{grid-area:err}
  .wbh-cp{grid-area:cp;align-self:stretch;align-content:flex-start;margin:0;padding:0 0 0 18px;border-top:0;border-left:1px solid var(--soft)}
  .wbh-cp > .v2-label{flex-basis:100%}
  .wbh-cpb{margin-left:0}
}
@container wbh (max-width:560px){
  .wbh-sum{grid-template-columns:minmax(0,1fr)}
}
@container wbh (max-width:480px){
  .wbh-board{padding:8px 10px 12px}
  .wbh-axis,.wbh-day,.wbh-row{column-gap:10px}
  .wbh-dn{flex-direction:column;align-items:flex-start;gap:0}
  .wbh-ed{padding:12px 10px 14px}
  .wbh-sum,.wbh-ntc{padding-left:14px;padding-right:14px}
  .wbh-ntcb small{display:block}
}
@container v2in (max-width:420px){
  .wbh-segs{grid-template-columns:auto auto auto}
  .wbh-info{grid-column:1/3;grid-row:2}
  .wbh-x{grid-column:3;grid-row:2;justify-self:end}
  .wbh-cpb{margin-left:0}
}
@media (prefers-reduced-motion:reduce){ .wbh-trk i,.wbh-wk i,.wbh-chev,.wbh-row{transition:none} }