/* 비타민 섭취량 계산기 — 프로필 줄 → 결과 머리(기준 이상 n/m · 집계) → '내 비타민 성분표'(줄마다 하루 기준 · 배수 눈금 띠 · 영양제 칸 · %) → 누른 줄 아래 자세히 패널.
   툴 폭 700px 이상이면 성분표가 subgrid 다섯 칸(머리줄 눈금과 띠가 같은 세로선), 그 아래는 줄마다 카드(이름·기준 / 띠 / 칸·%).
   상태는 색만이 아니라 글자(기준 이상·식사로 n 더·상한 넘음)와 빗금(상한 넘는 구간)으로도 구분한다. */
.vc-work{container:vc / inline-size;--vc-ok:#3d7a2f;--vc-okz:rgba(61,122,47,.17);--vc-ov:#c44a00;--vc-m:#5a4a30}
:root[data-theme="dark"] .vc-work{--vc-ok:#8cc977;--vc-okz:rgba(140,201,119,.2);--vc-ov:#ea7a40;--vc-m:#cdbb9c}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .vc-work{--vc-ok:#8cc977;--vc-okz:rgba(140,201,119,.2);--vc-ov:#ea7a40;--vc-m:#cdbb9c} }
.vc-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.vc-help.is-error{color:var(--accent)}
.vc-link{padding:0;border:0;background:none;font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* 프로필 줄 */
.vc-prof{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 14px;margin:0;padding:14px 18px;border-bottom:1px solid var(--soft)}
.vc-age{flex:0 0 96px}
.vc-segf{flex:0 0 auto;min-width:0}
.vc-segf > .v2-label{display:block;margin:0 0 5px}
.vc-segf[hidden]{display:none}
.vc-prof .v2-seg{flex-wrap:nowrap}
.vc-prof .v2-seg button{height:var(--v2-ctl);padding:0 12px;white-space:nowrap}
.vc-smk{height:var(--v2-ctl)}
.vc-agemsg{flex:1 1 100%;margin:0}
.vc-agemsg:empty{display:none}

/* 결과 머리 */
.vc-head{display:grid;gap:14px 26px;padding:16px 18px;border-bottom:1px solid var(--soft)}
@container vc (min-width:640px){ .vc-head{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start} }
.vc-sum .v2-big{flex-wrap:wrap;margin-top:6px}
.vc-sum .v2-big small{font-family:var(--sans);font-size:15px;font-weight:650}
.vc-sum .v2-sub{margin-top:10px}
.vc-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.vc-tally{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.vc-tally li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 7px;padding:9px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.vc-tally li i{width:10px;height:10px;border-radius:50%;background:var(--soft)}
.vc-tally li span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.3}
.vc-tally li b{grid-column:1/-1;font-family:var(--sans);font-size:24px;font-weight:800;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.vc-tally li[data-k="ok"] i{background:var(--vc-ok)}
.vc-tally li[data-k="under"] i{background:var(--vc-m)}
.vc-tally li[data-k="over"] i{background:repeating-linear-gradient(135deg,var(--vc-ov) 0 2px,transparent 2px 4px);border:1px solid var(--vc-ov)}
.vc-tally li[data-k="over"].is-on{border-color:var(--vc-ov)}
.vc-tally li[data-k="over"].is-on b{color:var(--vc-ov)}
.vc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* 성분표 */
.vc-sheet{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:4px 18px 14px}
.vc-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 0 6px;font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted)}
.vc-hd-nm,.vc-hd-tg,.vc-hd-pc{display:none}
.vc-hd-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.vc-hd-ax{position:relative;display:block;height:16px;order:2}
.vc-hd-ax i{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}

.vc-hd-ax i.is-one{color:var(--ink);font-weight:800}
.vc-ex{display:inline-flex;align-items:baseline;gap:8px}
.vc-ex em{font-style:normal;font-size:11px;font-weight:700;color:var(--accent);padding:1px 6px;border:1px solid var(--accent);border-radius:var(--radius)}
.vc-ex[data-ex="0"] em,.vc-ex[data-ex="1"] #vcFill,.vc-ex[data-any="0"] #vcClear{display:none}
.vc-grp{margin:12px 0 0;padding:0 0 6px;font-family:var(--sans);font-size:12px;font-weight:750;letter-spacing:.02em;color:var(--ink);border-bottom:2px solid var(--ink)}
.vc-rows{display:grid;grid-template-columns:minmax(0,1fr)}
.vc-row{display:grid;grid-template-columns:minmax(0,1fr) auto 92px;grid-template-areas:"nm tg tg" "bar bar bar" "in in pc";align-items:center;gap:8px 12px;padding:11px 0;border-top:1px solid var(--soft)}
.vc-rows > .vc-row:first-child{border-top:0}
.vc-nm{grid-area:nm;min-width:0} .vc-tg{grid-area:tg} .vc-bar{grid-area:bar} .vc-in{grid-area:in;min-width:0} .vc-pc{grid-area:pc}
.vc-foot{grid-column:1/-1;margin-top:10px}
.vc-foot a{color:var(--ink)}
@container vc (min-width:700px){
  .vc-sheet{grid-template-columns:[nm] minmax(112px,1fr) [tg] minmax(104px,auto) [bar] minmax(140px,2.3fr) [in] minmax(150px,1.3fr) [pc] minmax(84px,auto);column-gap:14px}
  .vc-hd,.vc-rows,.vc-row{grid-column:1/-1;grid-template-columns:subgrid}
  .vc-hd{align-items:end;gap:0}
  .vc-hd-nm,.vc-hd-tg,.vc-hd-pc{display:block}
  .vc-hd-ax{order:0}
  .vc-hd-pc{text-align:right}
  .vc-grp{grid-column:1/-1}
  .vc-row{grid-template-areas:none;gap:0}
  .vc-nm,.vc-tg,.vc-bar,.vc-in,.vc-pc{grid-area:auto}
}

/* 이름 단추 */
.vc-x{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:6px;width:100%;padding:2px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.vc-x b{font-family:var(--sans);font-size:14px;font-weight:750;line-height:1.25}
.vc-x small{grid-column:1;font-family:var(--sans);font-size:11.5px;color:var(--muted);line-height:1.35}
.vc-x .i{grid-column:2;grid-row:1/3;width:14px;height:14px;color:var(--muted);transform:rotate(90deg);transition:transform var(--ease)}
.vc-row.is-open .vc-x .i{transform:rotate(-90deg)}
.vc-x:hover b{text-decoration:underline;text-underline-offset:3px}
.vc-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vc-row.is-diet .vc-x b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;vertical-align:middle;border-radius:50%;background:var(--accent)}

/* 하루 기준 */
.vc-tg{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;white-space:nowrap}
.vc-tv{display:flex;align-items:baseline;gap:4px}
.vc-v{font-family:var(--sans);font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.vc-u{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.vc-tm{display:flex;align-items:baseline;gap:6px}
.vc-t{font-style:normal;font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--muted)}
.vc-ul{font-family:var(--sans);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@container vc (min-width:700px){ .vc-tg{align-items:flex-start;text-align:left} }

/* 배수 눈금 띠 */
.vc-trk{position:relative;height:14px;margin:6px 0;border:1px solid var(--soft);border-radius:7px;background:var(--paper)}
.vc-z{position:absolute;top:0;bottom:0;transition:left .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.vc-z0{left:0;border-radius:6px 0 0 6px;background:color-mix(in srgb,var(--soft) 55%,transparent)}
.vc-z1{background:var(--vc-okz)}
.vc-z1.is-open{background:linear-gradient(90deg,var(--vc-okz),transparent);border-radius:0 6px 6px 0}
.vc-z2{border-radius:0 6px 6px 0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--vc-ov) 55%,transparent) 0 2px,transparent 2px 6px)}
.vc-z[hidden],.vc-m[hidden]{display:none}
.vc-m{position:absolute;top:-4px;bottom:-4px;width:0;transition:left .45s cubic-bezier(.2,.7,.2,1)}
.vc-m-one{border-left:2px solid var(--ink);margin-left:-1px}
.vc-m-ear{top:0;bottom:0;border-left:1px dashed var(--vc-m)}
.vc-m-ul{border-left:2px solid var(--vc-ov);margin-left:-1px}
.vc-m-ul.is-fb{border-left-style:dashed}
.vc-dot{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid var(--card);border-radius:50%;background:var(--vc-m);box-shadow:0 0 0 1px var(--vc-m);opacity:0;transition:left .45s cubic-bezier(.2,.7,.2,1),opacity .2s,background .2s}
.vc-dot.is-clip{border-radius:2px}
.vc-row[data-st="ok"] .vc-dot{background:var(--vc-ok);box-shadow:0 0 0 1px var(--vc-ok)}
.vc-row[data-st="over"] .vc-dot{background:var(--vc-ov);box-shadow:0 0 0 1px var(--vc-ov)}
.vc-work.is-still .vc-z,.vc-work.is-still .vc-m,.vc-work.is-still .vc-dot{transition:none}

/* 영양제 칸 */
.vc-in .v2-input select{flex:0 0 auto;max-width:112px;height:calc(var(--v2-ctl) - 2px);padding:0 6px;border:0;border-left:1px solid var(--soft);border-radius:0;background:var(--wash);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.vc-in .v2-input input{min-width:48px}
.vc-in.is-invalid .v2-input{border-color:var(--accent)}
.vc-pc{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;min-width:0}
.vc-pc b{font-family:var(--sans);font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.vc-pc small{font-family:var(--sans);font-size:11px;line-height:1.3;color:var(--muted)}
.vc-row[data-st="ok"] .vc-pc b{color:var(--vc-ok)}
.vc-row[data-st="over"] .vc-pc b,.vc-row[data-st="over"] .vc-pc small,.vc-row[data-st="bad"] .vc-pc b,.vc-row.is-na .vc-pc small{color:var(--vc-ov);font-weight:700}

/* 자세히 패널 */
.vc-panel{grid-column:1/-1;display:grid;gap:16px 24px;margin:10px 0 0;padding:14px 16px;border:1px solid var(--soft);border-left:3px solid var(--ink);border-radius:var(--radius);background:var(--paper)}
.vc-panel[hidden]{display:none}
.vc-panel h4{margin:0 0 8px;font-family:var(--sans);font-size:12.5px;font-weight:750;color:var(--ink)}
@container vc (min-width:700px){ .vc-panel{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} .vc-pc2{grid-column:1/-1} }
.vc-chart{display:block;width:100%;height:auto}
.vc-gl{stroke:var(--soft);stroke-width:1}
.vc-gt{font-family:var(--sans);font-size:10.5px;fill:var(--muted)}
.vc-ln{fill:none;stroke-width:2.4;stroke-linejoin:round}
.vc-ln-f{stroke:var(--vc-ov)}
.vc-ln-m{stroke:var(--vc-m);stroke-width:1.6}
.vc-ln[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:vcDraw .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes vcDraw{to{stroke-dashoffset:0}}
.vc-now{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.vc-pt{fill:var(--ink);stroke:var(--card);stroke-width:2}
.vc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.vc-legend span::before{content:"";display:inline-block;width:14px;height:0;margin-right:5px;vertical-align:middle;border-top:2.4px solid var(--vc-ov)}
.vc-legend .m::before{border-top:1.6px solid var(--vc-m)}
.vc-legend .now{color:var(--ink);font-weight:650}
.vc-legend .now::before{width:8px;height:8px;border:0;border-radius:50%;background:var(--ink)}
.vc-legend .now:empty{display:none}
.vc-cn{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vc-cn li{display:grid;grid-template-columns:minmax(0,8.5em) minmax(40px,1fr) auto;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.vc-cn li i{position:relative;height:8px;border-radius:4px;background:color-mix(in srgb,var(--soft) 60%,transparent)}
.vc-cn li i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:4px;background:var(--vc-m);opacity:.55;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.vc-cn li b{font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.vc-cn li b small{font-weight:500;color:var(--muted)}
.vc-cn li.is-me{color:var(--ink);font-weight:700}
.vc-cn li.is-me i::after{background:var(--vc-ov);opacity:1}
.vc-pc2{display:grid;gap:14px 24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:start}
.vc-pc2 > div{min-width:0}
.vc-fn,.vc-food,.vc-facts{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink)}
.vc-fn li{padding:3px 0 3px 12px;position:relative}
.vc-fn li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--vc-ok)}
.vc-food li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-top:1px dotted var(--soft)}
.vc-food li:first-child{border-top:0}
.vc-food li b{font-weight:650;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.vc-facts li{padding:6px 0;border-top:1px solid var(--soft);color:var(--muted)}
.vc-facts li:first-child{border-top:0;padding-top:0}
.vc-form{margin:0 0 6px}
.vc-form .v2-label{display:block;margin:0 0 5px}
.vc-form .v2-seg button{white-space:nowrap}