/* ==========================================================
   components/stack.css — 급식 점수 100점 막대
   6개 항목의 배점(25·20·20·15·10·10)을 한 줄 막대로 보여준다.
   홈 점수 기준 배너 · 점수 기준 페이지에서 쓴다.
   <div class="stack"><span class="stack-seg nutrition" style="flex:25">…</span>…</div>
   ========================================================== */

.stack { display: flex; gap: 3px; height: 56px; }
.stack-seg {
  min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 8px;
  border-radius: 10px; color: #fff; overflow: hidden;
}
.stack-seg b { font-size: 16px; font-weight: 900; line-height: 1.1; }
.stack-seg span { font-size: 11px; font-weight: 700; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack-seg.nutrition { background: var(--p-nutrition); }
.stack-seg.composition { background: var(--p-composition); }
.stack-seg.variety { background: var(--p-variety); }
.stack-seg.expectation { background: var(--p-expectation); }
.stack-seg.special { background: var(--p-special); }
.stack-seg.efficiency { background: var(--p-efficiency); }
@media (max-width: 520px) { .stack-seg span { display: none; } .stack { height: 44px; } .stack-seg { padding: 0 6px; align-items: center; } }