/* 혈당 수치 판정기 전용 CSS (2026-10-19). '하루 혈당판': 끼니 머리·곡선·입력칸이 같은 열 격자(눈금 칸 --bs-gut + 7열)를 써서 칸이 곧 그래프의 가로축이 된다.
   점 모양 = 판정(● 정상·목표 안, ▲ 높음, ▼ 낮음, ▽ 목표보다 낮음), 띠 = 그 시점의 정상·목표 범위, 빗금 = 저혈당 구역. 폭 판단은 작업면 컨테이너 bs 기준. 공용 부품 assets/v2.css */
.bs-work{container:bs / inline-size}
.bs-work .v2-status:empty{display:none}
.bs-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 18px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.bs-ctl{display:grid;gap:5px;min-width:0}

/* 결과 머리: 고른 측정값 | 하루 요약 */
.bs-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,auto);gap:14px 22px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.bs-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:6px 0 0;font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
.bs-big b{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.025em;color:var(--ink)}
.bs-big small{font-size:13px;font-weight:600;color:var(--muted)}
.bs-word{align-self:center;padding:3px 9px;border-radius:999px;background:var(--soft);font-family:var(--sans);font-size:13px;font-style:normal;font-weight:700;color:var(--ink);white-space:nowrap}
.bs-word:empty{display:none}
.bs-word.is-under{background:var(--line)}
.bs-word.is-hi,.bs-word.is-lo{background:var(--accent);color:var(--paper)}
.bs-focus{min-width:0;transition:opacity var(--ease)}
.bs-head.is-pend .bs-focus{opacity:.45}
.bs-focus .v2-sub{max-width:64ch}
.bs-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px;margin:0}
.bs-stats div{min-width:0;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.bs-stats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.bs-stats dd{margin:3px 0 0;font-family:var(--sans);font-size:19px;font-weight:750;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-stats dd small{font-size:11.5px;font-weight:600;color:var(--muted)}

/* 판: 끼니 머리 → 곡선 → 입력칸(같은 열) */
.bs-board{--bs-gut:34px;padding:12px 18px 12px}
.bs-cols,.bs-row{display:grid;grid-template-columns:var(--bs-gut) repeat(7,minmax(0,1fr))}
.bs-cols{grid-template-rows:auto auto;margin-bottom:2px}
.bs-meal{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 5px;min-width:0;margin:0 3px;padding:0 0 3px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:12px;font-weight:700;line-height:1.3;color:var(--ink);text-align:center}
.bs-meal i{font-family:var(--mono);font-size:11px;font-style:normal;font-weight:600;color:var(--muted)}
.bs-bed{align-items:flex-end;align-self:stretch;border-bottom:0;padding-bottom:2px;overflow-wrap:anywhere}
.bs-sub{min-width:0;padding:2px 2px 0;font-family:var(--sans);font-size:11px;line-height:1.3;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.bs-cols .l{display:none}
.bs-chart{display:block;width:100%;height:200px;overflow:visible;touch-action:manipulation}
.bs-chart .gl{stroke:var(--line);stroke-dasharray:2 3}
.bs-chart .sep{stroke:var(--soft)}
.bs-chart .tk,.bs-chart .un{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.bs-chart .un{font-size:9.5px}
.bs-chart .hypo{fill:url(#bsHatch)}
.bs-chart .hatch{fill:color-mix(in srgb, var(--accent) 24%, transparent)}
.bs-chart .col{fill:transparent;cursor:pointer;transition:fill var(--ease)}
.bs-chart .col.is-on{fill:var(--accent-wash)}
.bs-chart .band{fill:color-mix(in srgb, var(--ink) 10%, transparent);rx:4px}
.bs-chart .ln{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round}
.bs-chart .ln.gap{stroke-dasharray:3 4}
.bs-chart .pt{pointer-events:none}
.bs-chart .pt path{fill:var(--ink);stroke:var(--card);stroke-width:1.5}
.bs-chart .pt.up path,.bs-chart .pt.vhigh path,.bs-chart .pt.low path,.bs-chart .pt.vlow path{fill:var(--accent)}
.bs-chart .pt.vhigh path,.bs-chart .pt.vlow path{transform:scale(1.25)}
.bs-chart .pt.under path{fill:var(--card);stroke:var(--ink);stroke-width:1.6}
.bs-chart .pt text{font-family:var(--mono);font-size:10.5px;font-weight:600;fill:var(--ink)}
.bs-chart .ring{fill:none;stroke:var(--accent);stroke-width:1.5;pointer-events:none}
.bs-row{align-items:center;margin-top:4px}
.bs-row .v2-f{padding:0 3px}
.bs-row .v2-input input{padding:0 4px;text-align:center}
.bs-st{display:block;margin-top:6px}
.bs-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.bs-legend span{display:inline-flex;align-items:center;gap:5px}
.bs-legend b{font-weight:inherit}
.bs-legend .k{display:inline-block;width:11px;height:11px}
.bs-legend .k.ok{border-radius:50%;background:var(--ink)}
.bs-legend .k.up{background:var(--accent);clip-path:polygon(50% 0,100% 100%,0 100%)}
.bs-legend .k.low{background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%)}
.bs-legend .k.band{width:16px;border-radius:2px;background:color-mix(in srgb, var(--ink) 10%, transparent)}
.bs-legend .k.hypo{width:16px;background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, transparent) 0 2px, transparent 2px 5px)}
.bs-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}

/* 안내·내보내기 */
.bs-notes{margin:0;padding:12px 18px 12px 36px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--ink)}
.bs-notes:empty{display:none}
.bs-notes li+li{margin-top:4px}
.bs-notes a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bs-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--soft)}

@container bs (min-width: 600px){
  .bs-cols .s{display:none}
  .bs-cols .l{display:inline}
}
@container bs (max-width: 620px){
  .bs-head{grid-template-columns:minmax(0,1fr)}
  .bs-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bs-stats dd{font-size:17px}
}
@container bs (max-width: 460px){
  .bs-bar,.bs-head,.bs-notes,.bs-acts{padding-left:14px;padding-right:14px}
  .bs-notes{padding-left:30px}
  .bs-board{--bs-gut:30px;padding:10px 10px 10px}
  .bs-big b{font-size:38px}
  .bs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-row .v2-f{padding:0 2px}
  .bs-row .v2-input input{padding:0 2px;font-size:14px}
  .bs-meal{margin:0 2px;font-size:11.5px}
}