/* 제품 상세 전용. 홈 예산(116KiB)에 얹지 않으려고 style.css 에서 뺐다 — 진찰 띠는 상세에만 나온다. */
/* ORDER-179 (L22 안2): 근거는 흰 띠 한 장. 막대가 −30 과 −8 의 차이를 말한다. */
/* 근거 구간 한 장: 깎인 줄과 100g 네 칸이 같은 흰 바닥 위에 있다(목업 안2 의 z-why). */
.detail-diagnosis {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: var(--s5) var(--s4) var(--s2);
}
.diagnosis-why-band { padding: 0 0 var(--s4); }
.diagnosis-zlabel { margin: 0 0 var(--s4); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.diagnosis-row--band { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 var(--s3); padding: 0 0 var(--s4); border: 0; }
.diagnosis-row--band:last-child { padding-bottom: 0; }
.diagnosis-row--band > b { font-size: 16px; font-weight: 700; }
.diagnosis-row--band > strong { font-size: 17px; font-weight: 700; color: var(--bad-text); font-variant-numeric: tabular-nums; }
.diagnosis-row--band > em,
.diagnosis-row--band > .diagnosis-links { grid-column: 1 / -1; margin-top: 2px; font-style: normal; font-size: 14px; color: var(--ink-2); }
.diagnosis-bar { grid-column: 1 / -1; height: 4px; margin-top: var(--s2); background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.diagnosis-bar i { display: block; height: 100%; background: var(--bad); opacity: .55; border-radius: 999px; }

/* 근거 구간 안에서는 네 칸도 상자를 벗는다 — 흰 띠 안에 또 흰 카드를 두지 않는다(목업 안2). */
.detail-diagnosis .grid-nutr,
html[data-ohm-skin="on"] .detail-diagnosis .grid-nutr {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ORDER-186 (L22 안2 · z-more): 흩어져 있던 줄들을 회색 '더 볼 것' 한 구간으로 모았다.
   새 색은 없다 — 페이지 바탕(--bg) 그대로, 흰 띠(.detail-diagnosis)와의 대비가 전부다. */
.detail-more { margin-top: var(--s4); }