/* 영양제 비용 계산기 전용 CSS (2026-10-18). 위 막대 · 결과(영수증: 큰 수·타일·쌓기 막대 | 비교 막대) · 영양제 선반(제품 카드 격자) · 12개월 새 통 달력, su-*.
   공용 부품은 assets/v2.css. 제품 색 8개는 툴 안에서만 쓰는 색(밝음/어두움 따로, 카드 배경 대비 3.7~8.8). 강조색은 모드마다 한 곳: 합계는 달력의 '오늘' 선, 비교는 '가장 쌈'.
   카드(li)는 theme.css 가 v2in 컨테이너로 둔다(:has(> form)) → 카드 안 접기는 @container v2in. 툴 폭 접기는 컨테이너 su.
   움직임(R45): 쌓기 막대·비교 막대 너비 600ms smooth-out(cubic-bezier(.22,1,.36,1)), 새 통 달력은 처음 그릴 때 줄마다 왼쪽부터 그려짐. 동작 줄이기면 끔. */
.su-work{container:su / inline-size;--su-dur:600ms;--su-ease:cubic-bezier(.22,1,.36,1);--c0:#2b8a7e;--c1:#5f8f35;--c2:#3f6fa8;--c3:#8a4f8f;--c4:#a07408;--c5:#5b7393;--c6:#b04a6a;--c7:#7a5a3a}
:root[data-theme="dark"] .su-work{--c0:#5cc2b4;--c1:#9bc96a;--c2:#7fa8de;--c3:#c48fc8;--c4:#e2b44c;--c5:#a3b8d4;--c6:#e08aa4;--c7:#c9a27e}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .su-work{--c0:#5cc2b4;--c1:#9bc96a;--c2:#7fa8de;--c3:#c48fc8;--c4:#e2b44c;--c5:#a3b8d4;--c6:#e08aa4;--c7:#c9a27e} }
.su-k0{--k:var(--c0)} .su-k1{--k:var(--c1)} .su-k2{--k:var(--c2)} .su-k3{--k:var(--c3)} .su-k4{--k:var(--c4)} .su-k5{--k:var(--c5)} .su-k6{--k:var(--c6)} .su-k7{--k:var(--c7)}
.su-work [hidden]{display:none!important}
.su-sel,.su-date,.su-pair select{display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;box-sizing:border-box}
.su-sel:focus-visible,.su-date:focus-visible,.su-pair select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* 위 막대 */
.su-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.su-modebox{display:flex;flex-direction:column;gap:6px;min-width:0}
.su-acts{display:flex;flex-wrap:wrap;gap:6px}
.su-old{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 18px;border-bottom:1px solid var(--soft);background:var(--accent-wash)}
.su-old-l{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink)}
.su-old .su-sel{width:auto;max-width:100%;flex:0 1 260px}

/* 결과(영수증) */
.su-out{padding:18px;border-bottom:1px solid var(--soft)}
.su-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.su-headl{min-width:0;flex:1 1 220px}
.su-headl .v2-label{display:block;margin-bottom:8px;overflow-wrap:anywhere}
.su-work .v2-big:not(.is-empty){font-size:clamp(30px,9cqi,46px)}
.su-work .v2-big:not(.is-empty) span{white-space:nowrap}
.su-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:6px 22px;flex:0 1 auto}
.su-tiles li{min-width:0;font-family:var(--sans)}
.su-tiles span{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.su-tiles b{display:block;margin-top:2px;font-size:16px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.su-tiles small{display:block;max-width:150px;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-sub{margin-top:12px}
.su-stackbox,.su-barbox{margin-top:16px}
.su-stack{display:flex;height:16px;margin-top:8px;border-radius:8px;overflow:hidden;background:var(--soft)}
.su-stack i{display:block;flex:0 0 0%;min-width:0;background:var(--k);box-shadow:inset -2px 0 0 var(--card);transition:flex-basis var(--su-dur) var(--su-ease)}
.su-stack i:last-child{box-shadow:none}
.su-keys{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.su-keys li{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;font-family:var(--sans);font-size:12.5px;color:var(--ink)}
.su-keys i{flex:0 0 10px;width:10px;height:10px;border-radius:3px;background:var(--k)}
.su-keys b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-keys span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.su-bars{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.su-bars li{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr) auto;gap:10px;align-items:center;font-family:var(--sans);font-size:12.5px;color:var(--ink)}
.su-bn{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-bt{height:12px;border-radius:6px;background:var(--soft);overflow:hidden}
.su-bt i{display:block;width:0;height:100%;border-radius:6px;background:var(--k);transition:width var(--su-dur) var(--su-ease)}
.su-bv{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.su-bars li.is-win .su-bv{color:var(--accent);font-weight:800}
.su-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.su-note:empty{display:none}
.su-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.su-save{margin-left:4px}
.su-foot .v2-status{flex:1 1 100%}
.su-foot .v2-status:empty{display:none}

/* 영양제 선반: 제품 카드 격자 */
.su-shelf{padding:16px 18px;border-bottom:1px solid var(--soft)}
.su-shelfh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin-bottom:12px}
.su-base{display:grid;grid-template-columns:auto minmax(150px,170px);align-items:center;gap:4px 10px}
.su-hint{grid-column:1 / -1;max-width:330px;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.su-hint.is-error{color:var(--accent)}
.su-date.is-invalid{border-color:var(--accent)}
.su-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));gap:12px}
.su-card{position:relative;min-width:0;padding:12px 12px 10px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.su-card::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:5px;border-radius:var(--radius) 0 0 var(--radius);background:var(--k)}
.su-cf{display:flex;flex-direction:column;gap:9px;margin:0}
.su-ch{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px}
.su-name{width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:700;box-sizing:border-box}
.su-name:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.su-name::placeholder{font-weight:500;color:var(--muted)}
.su-chip{padding:3px 8px;border:1px solid var(--line);border-radius:999px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.su-chip.is-win{border-color:var(--accent);color:var(--accent)}
.su-del{width:34px;height:34px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-size:17px;line-height:1;cursor:pointer}
.su-del:hover{background:var(--btn);color:var(--ink)}
.su-del:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.su-buy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
.su-take{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.65fr) minmax(0,1.1fr);gap:9px}
.su-cont{display:none}
.su-cards.is-cmp .su-cont{display:block}
.su-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(64px,auto);gap:6px}
.su-pair select{width:auto;min-width:64px;max-width:100%}
.su-card .v2-label em{font-style:normal;font-weight:400;color:var(--muted)}
.su-ub{min-width:30px}
.su-co{margin:9px 0 0;padding-top:8px;border-top:1px dashed var(--soft);font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--ink);font-variant-numeric:tabular-nums}
.su-co span{display:block}
.su-co span + span{color:var(--muted)}
.su-co.is-error{color:var(--accent)}
.su-co.is-part{color:var(--muted)}
.su-co:empty{display:none}
@container v2in (max-width:330px){ .su-buy{grid-template-columns:minmax(0,1fr)} .su-take{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .su-fs{grid-column:1 / -1} }
.su-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1px dashed var(--line);border-radius:var(--radius);background:transparent;color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:650;cursor:pointer}
.su-add:hover{background:var(--btn)}
.su-add:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.su-add:disabled{cursor:not-allowed;opacity:.55;background:transparent}
.su-add b{font-size:18px;font-weight:600;line-height:1}

/* 12개월 새 통 달력: 이름 | 막대(통마다 한 칸, 새 통 = 칸 경계) | 통 수·다음 날. 축·줄은 같은 열(subgrid) */
.su-time{padding:16px 18px 18px}
.su-tlw{display:grid;grid-template-columns:minmax(64px,120px) minmax(0,1fr) max-content;column-gap:12px;margin-top:10px}
.su-axis,.su-tl{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}
.su-axt{grid-column:2;position:relative;height:36px;border-bottom:1px solid var(--soft);overflow:hidden}
.su-axt span{position:absolute;bottom:0;height:16px;padding-left:4px;border-left:1px solid var(--line);font-family:var(--sans);font-size:11px;line-height:16px;color:var(--muted);white-space:nowrap}
.su-axt span em{position:absolute;left:4px;bottom:15px;font-style:normal;font-weight:700;color:var(--ink)}
.su-axt .su-nowl{position:absolute;top:0;padding-left:4px;border-left:2px solid var(--accent);font-family:var(--sans);font-size:10.5px;font-weight:800;line-height:14px;color:var(--accent);white-space:nowrap}
.su-tl{list-style:none;margin:8px 0 0;padding:0;row-gap:9px}
.su-tl li{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;min-width:0}
.su-tn{min-width:0;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-tn::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;background:var(--k);vertical-align:1px}
.su-trk{position:relative;height:16px;border-radius:4px;background:color-mix(in srgb,var(--soft) 60%,transparent);overflow:hidden}
.su-trk i{position:absolute;top:0;bottom:0;background:var(--k)}
.su-trk i.b{background:color-mix(in srgb,var(--k) 55%,var(--card))}
.su-trk i.r{box-shadow:inset 2px 0 0 var(--card)}
.su-trk i.dense{background:repeating-linear-gradient(90deg,var(--k) 0 3px,color-mix(in srgb,var(--k) 40%,var(--card)) 3px 5px)}
.su-now{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--accent)}
.su-tv{font-family:var(--sans);font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.su-tl.is-draw .su-trk{animation:su-draw 800ms var(--su-ease) both}
.su-tl.is-draw li:nth-child(2) .su-trk{animation-delay:50ms} .su-tl.is-draw li:nth-child(3) .su-trk{animation-delay:100ms} .su-tl.is-draw li:nth-child(4) .su-trk{animation-delay:150ms}
.su-tl.is-draw li:nth-child(5) .su-trk{animation-delay:200ms} .su-tl.is-draw li:nth-child(6) .su-trk{animation-delay:250ms} .su-tl.is-draw li:nth-child(7) .su-trk{animation-delay:300ms} .su-tl.is-draw li:nth-child(8) .su-trk{animation-delay:350ms}
@keyframes su-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@container su (max-width:560px){
  .su-out,.su-shelf,.su-time{padding-left:14px;padding-right:14px}
  .su-top{padding:12px 14px}
  .su-tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));width:100%}
  .su-tiles li:last-child b{white-space:normal;overflow-wrap:anywhere}
  .su-tlw{display:block}
  .su-axis{display:block}
  .su-axis > span:not(.su-axt){display:none}
  .su-axt .odd{display:none}
  .su-tl li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "t t";row-gap:4px;column-gap:8px}
  .su-tn{grid-area:n} .su-tv{grid-area:v} .su-trk{grid-area:t}
  .su-bars li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "t t";row-gap:4px}
  .su-bn{grid-area:n} .su-bv{grid-area:v} .su-bt{grid-area:t}
  .su-base{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ .su-stack i,.su-bt i{transition:none} .su-tl.is-draw .su-trk{animation:none} }