/* ORDER-208 /snap 전용 — 공용 번들엔 홈 gzip 예산이 걸린다(app.bundle.js 117KiB 잠금, ORDER-206).
   카메라 뼈대는 scan.css를 그대로 쓴다(.scan-camera-stage·.scan-live-video·.scan-camera-actions 등) —
   여기는 그 위에 뜨는 질문 줄·힌트 띠·시트 하나·최근 3개만. 판정색은 .detail-verdict-hero[data-score-band]
   ·.sr-score[data-score-band](style.bundle.css, 이미 전역)를 그대로 쓴다 — 새 색을 안 만든다. */

.snap-camera { padding: 0; border: 0; background: transparent; }
.snap-camera .scan-camera-stage { position: fixed; inset: 0; z-index: 60; width: 100vw; min-height: 100dvh; border-radius: 0; padding: 0; }
.snap-question { font-weight: 750; text-align: center; }

/* 시트가 뜨면 카메라는 계속 돌지만 어둡게(라이브는 유지, 지시문 그대로) */
.scan-camera-stage.is-dimmed::after { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, #000 46%, transparent); pointer-events: none; }

/* ---- 6초 힌트 띠(시트 아님, 카메라 위에 뜬 채로 계속 스캔) ---- */
.snap-hint { position: absolute; z-index: 3; left: var(--s4); right: var(--s4); bottom: calc(var(--tap-min) + var(--s6) + var(--s4)); display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--overlay); color: var(--camera-ink); text-align: center; }
.snap-hint p { margin: 0; font-weight: 700; }
.snap-hint-chips { display: flex; justify-content: center; gap: var(--s2); }

/* ---- 최근 3개(로컬만) — 시트 아래, 카메라 위 하단 얇은 띠 ---- */
.snap-recent { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: var(--s2) var(--s4); }
.snap-recent[hidden] { display: none; }
.snap-recent > div { display: flex; gap: var(--s2); overflow-x: auto; }
.snap-recent-item { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); border-radius: var(--pill); background: var(--overlay); color: var(--camera-ink); text-decoration: none; font-size: var(--t-caption); white-space: nowrap; }
.snap-recent-item b { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* ---- 시트: 카메라 위로 올라오는 한 장(그랩 핸들로 아래로 끌어 되돌린다) ---- */
.snap-sheet { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow-y: auto; padding: var(--s2) var(--s5) max(var(--s5), env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; background: var(--surface); box-shadow: var(--shadow-float); }
.snap-sheet[hidden] { display: none; }
.snap-sheet:not(.is-dragging) { transition: transform var(--dur-3) var(--ease-out); }
.snap-sheet-grabber { width: 36px; height: 4px; margin: var(--s2) auto var(--s3); border-radius: var(--pill); background: var(--line); touch-action: none; }

.snap-headline { margin: 0 0 var(--s3); font-size: var(--t-head); font-weight: 750; }
.snap-barcode-line { margin: 0 0 var(--s2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.snap-product-name { margin: 0; font-size: var(--t-head); }
.snap-product-sub { margin: 0 0 var(--s3); color: var(--ink-2); }
.snap-unitline { color: var(--ink-2); font-size: var(--t-sub); }
.snap-remember-line { margin-top: var(--s3); font-size: var(--t-caption); }

/* S2 두 갈래(뒷면 찍기 우선 · 앞면은 버금) */
.snap-options { display: grid; gap: var(--s2); margin: var(--s3) 0; }
.snap-option { display: grid; gap: 2px; padding: var(--s3) var(--s4); text-align: left; }
.snap-option small { color: inherit; opacity: .82; font-weight: 400; }
.snap-find-form { margin: var(--s3) 0; }

/* 첨가물 칩 — 이름 + role(있을 때만) + ADI 있으면 점 하나 */
.snap-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.snap-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--s3); border: 1.5px solid var(--line); border-radius: var(--pill); font-size: var(--t-sub); }
.snap-chip a { color: inherit; text-decoration: none; font-weight: 600; }
.snap-chip small { color: var(--ink-2); }
.snap-chip.has-adi::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }

.snap-origins { margin: var(--s2) 0; padding: 0; list-style: none; }
.snap-origins li { display: flex; justify-content: space-between; gap: var(--s2); padding: 6px 0; border-bottom: 1px solid var(--line); }
.snap-candidates { margin: var(--s2) 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }

/* 판정 색면 — .detail-verdict-hero 그대로 쓰되 시트 안에서는 조금 작게 */
.snap-verdict { grid-template-columns: 56px 1fr; margin: var(--s3) 0; }
.snap-verdict .verdict-score-ring { width: 56px; height: 56px; font-size: var(--t-title); }

.snap-links { margin-top: var(--s2); }
.snap-links a[download] { text-decoration: none; }

@media (min-width: 1024px) {
  .snap-sheet { left: 50%; right: auto; width: min(92vw, 480px); transform: translateX(-50%); border-radius: 14px; bottom: var(--s6); box-shadow: var(--shadow-float); }
}