/* ORDER-202: VS 카드 전용 CSS — 이 화면에서만 싣는다(홈 예산 117KiB는 style.bundle.css만 잰다). */
/* 공유 카드 목적이라 데스크톱에서도 2단 넓은 상세 레이아웃을 안 탄다 — 항상 좁게(~600px). */
.vs-page { max-width: 600px; margin: 0 auto; }
.vs-bands { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 0 calc(var(--s4) * -1); }
.vs-band { display: block; padding: var(--s5) var(--s4) var(--s4); background: var(--field); color: var(--field-ink); text-decoration: none; min-height: 168px; }
.vs-band:first-child { border-radius: var(--r-field) 0 0 var(--r-field); }
.vs-band:last-child { border-radius: 0 var(--r-field) var(--r-field) 0; }
.vs-band[data-score-band="80"] { --field: #123f30; --field-ink: #fff; --field-ink2: #9fb4a6; }
.vs-band[data-score-band="60"] { --field: #2c443a; --field-ink: #fff; --field-ink2: #a3b0a7; }
.vs-band[data-score-band="40"] { --field: #57451f; --field-ink: #fff; --field-ink2: #bdae8b; }
.vs-band[data-score-band="00"] { --field: #56271f; --field-ink: #fff; --field-ink2: #c2a09a; }
.vs-band-score { display: block; font-weight: 750; font-size: 44px; line-height: 1; }
.vs-band-score span { font-size: var(--t-sub); font-weight: 600; margin-left: 2px; }
.vs-band-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 700; margin-top: var(--s2); }
.vs-band-maker { display: block; opacity: .78; font-size: var(--t-caption); margin-top: var(--s1); }
.vs-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--surface, #fff); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--t-caption); color: var(--ink); }
.vs-facts { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: var(--s5); }
.vs-facts td { padding: var(--s3) 0; border-bottom: 1.5px solid var(--line); font-weight: 600; }
.vs-facts td.vs-fact-val { width: 30%; font-variant-numeric: tabular-nums; }
.vs-facts td:first-child { text-align: left; }
.vs-facts td:last-child { text-align: right; }
.vs-fact-label { width: 40%; text-align: center; color: var(--ink-2); }
.vs-fact-better { font-weight: 750; }
/* CSP가 style-src 'self'라 인라인 style(커스텀 프로퍼티)은 안 먹는다 — data 속성 + 시트 규칙으로. */
.vs-facts[data-band-a="80"] td:first-child.vs-fact-better { color: #123f30; }
.vs-facts[data-band-a="60"] td:first-child.vs-fact-better { color: #2c443a; }
.vs-facts[data-band-a="40"] td:first-child.vs-fact-better { color: #57451f; }
.vs-facts[data-band-a="00"] td:first-child.vs-fact-better { color: #56271f; }
.vs-facts[data-band-a="none"] td:first-child.vs-fact-better { color: #4e5968; }
.vs-facts[data-band-b="80"] td:last-child.vs-fact-better { color: #123f30; }
.vs-facts[data-band-b="60"] td:last-child.vs-fact-better { color: #2c443a; }
.vs-facts[data-band-b="40"] td:last-child.vs-fact-better { color: #57451f; }
.vs-facts[data-band-b="00"] td:last-child.vs-fact-better { color: #56271f; }
.vs-facts[data-band-b="none"] td:last-child.vs-fact-better { color: #4e5968; }
.vs-verdict { margin: var(--s4) 0; font-weight: 700; }
.vs-buy { margin: 0 0 var(--s4); }
.vs-buy .buy-link { min-height: 48px; border-radius: var(--r-btn); background: var(--brand, #123f30); color: var(--on-brand, #fff); padding: 0 var(--s4); border-bottom: 0; }
.vs-additives { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin: var(--s4) 0; }
.vs-additive-header { margin: 0 0 var(--s2); font-weight: 700; }
.vs-additive-none { color: var(--ink-2); }
.vs-additive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.vs-additive-list li { padding: var(--s1) 0 var(--s1) var(--s2); border-left: 1.5px solid transparent; }
.vs-additive-list li small { display: block; color: var(--ink-2); font-size: var(--t-caption); }
.vs-additive-onesided { font-weight: 750; }
.vs-additive-col--a .vs-additive-onesided { border-left-color: #123f30; }
.vs-additive-col--b .vs-additive-onesided { border-left-color: #56271f; }
.vs-additive-adi { margin-top: var(--s1); border-radius: var(--r-flag); }
.vs-share-row { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0 var(--s3); flex-wrap: wrap; }
.vs-share-row p { margin: 0; }
.vs-basis { margin: 0; }