/* /scan 전용 — 공용 번들에서 분리해 홈 예산을 지킨다.
   데스크톱 레이아웃(.desktop-scan-*)은 계약상 style.css에 남는다. */
/* scan */
.scan-input-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}
html[data-record-ready="true"] main.wrap:has(> .scan-page-head) #manual {
  display: none;
}
.scan-input-actions .drop {
  min-height: 144px;
  padding: var(--s4);
}
.scan-photo-strip {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding-bottom: var(--s1);
}
.scan-photo-strip[hidden] {
  display: none;
}
.scan-photo-thumbs {
  display: flex;
  gap: var(--s2);
}
.scan-photo-thumb {
  position: relative;
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  margin: 0;
}
.scan-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.scan-photo-thumb button {
  position: absolute;
  top: var(--s1);
  right: var(--s1);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--pill);
  background: var(--overlay);
  color: var(--on-brand);
  font-size: 22px;
  cursor: pointer;
}
.scan-photo-add {
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  border: 1px dashed var(--muted);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 28px;
  cursor: pointer;
}
.scan-empty-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}
.scan-empty-actions .btn {
  min-height: 48px;
}
@media (min-width: 1024px) {
  main.wrap:has(> .scan-page-head) {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    grid-auto-flow: row dense;
    column-gap: var(--gutter);
    align-items: start;
  }
  main.wrap:has(> .scan-page-head) > .scan-page-head {
    grid-column: 1/-1;
  }}
.scan-camera-stage { position: relative; display: grid; min-height: min(68dvh,680px); align-content: end; justify-items: center; overflow: hidden; padding: var(--s5); border-radius: var(--r-sm); background: var(--camera-bg); color: var(--camera-ink); }
.scan-camera-guide { position: absolute; inset: 12% 8% 23%; border: 1px solid color-mix(in srgb,var(--camera-ink) 72%,transparent); border-radius: 24px; }
.scan-camera-stage > p { position: absolute; top: var(--s5); margin: 0; color: var(--camera-ink); font-weight: 700; }
.scan-camera-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 48px 72px 48px; align-items: center; gap: var(--s6); }
.scan-camera-actions > * { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb,var(--camera-ink) 18%,transparent); color: var(--camera-ink); }
.scan-camera-actions .scan-shutter { width: 72px; height: 72px; border: 3px solid var(--camera-ink); background: transparent; }
.scan-shutter span { width: 58px; height: 58px; border-radius: 50%; background: var(--camera-ink); }
@media (max-width: 640px) {
  .scan-camera-stage { min-height: calc(100dvh - 132px); border-radius: 0; }}
/* ORDER-062 final cascade: later legacy blocks must not override the release contract. */
.scan-photo-thumb,
.scan-photo-thumb:first-child { flex: 0 0 auto; width: min(72vw, 520px); height: auto; min-width: 0; }
.scan-photo-thumb:not(:first-child) { width: 92px; }
.scan-photo-thumb img { display: block; width: 100%; height: auto; max-height: 70dvh; object-fit: contain; image-orientation: from-image; }
.scan-live-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-orientation: from-image; }
.scan-camera-guide { pointer-events: none; z-index: 1; }
.scan-camera-guide i { display: none; }
.scan-camera-stage.is-barcode .scan-camera-guide { inset: 34% 7% 36%; border-radius: var(--r-sm); }
.scan-camera-stage.is-barcode .scan-camera-guide i { position: absolute; top: 50%; left: 4%; right: 4%; display: block; height: 2px; background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.scan-camera-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: var(--camera-bg); color: var(--camera-ink); }
.scan-camera-actions { margin-bottom: var(--s6); }
.scan-manual-button { position: relative; z-index: 2; min-height: var(--tap-min); margin-bottom: var(--s2); border: 0; background: transparent; color: var(--camera-ink); font-weight: 700; }
/* ORDER-164: '이름으로 찾기' 옆에 '주문 내역 진찰'. 둘 다 카메라 위에 뜨는 글자 단추다. */
.scan-order-button { display: inline-grid; place-items: center; padding: 0 var(--s3); cursor: pointer; }
.scan-photo-strip { min-height: 0; align-items: flex-start; }
.scan-photo-thumbs { align-items: flex-start; }
.scan-photo-thumb,
.scan-photo-thumb:first-child { flex: 0 0 auto; width: min(72vw, 520px); height: auto; min-width: 0; }
.scan-photo-thumb:not(:first-child) { width: 92px; }
.scan-photo-thumb img { display: block; width: 100%; height: auto; max-height: 70dvh; object-fit: contain; image-orientation: from-image; background: var(--surface-2); }
.scan-failure { display: grid; gap: var(--s3); justify-items: center; padding: var(--s3) 0; text-align: center; }
.scan-failure img { display: block; width: min(100%, 520px); height: auto; max-height: 52dvh; object-fit: contain; image-orientation: from-image; border-radius: var(--r-sm); background: var(--surface-2); }
.scan-failure > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); width: 100%; }
.scan-camera-instruction { position:absolute; top:var(--s5); left:50%; z-index:2; width:max-content; max-width:90%; transform:translateX(-50%); color:var(--camera-ink); font-weight:750; }
.scan-camera-segments { position:absolute; z-index:3; left:50%; bottom:104px; display:flex; padding:3px; border-radius:var(--pill); background:var(--overlay); transform:translateX(-50%); }
.scan-camera-segments button { min-height:40px; padding:0 var(--s3); border:0; border-radius:var(--pill); background:transparent; color:var(--camera-ink); white-space:nowrap; }
.scan-camera-segments button.on { background:var(--camera-ink); color:var(--camera-bg); font-weight:750; }
/* 아래쪽 모서리 없이 위쪽 모서리만 뜬 반쪽 격자로 보였다 — 안내 문구만 남기고 걷어낸다. */
.scan-camera-guide { display: none; }
.scan-camera-guide::before,.scan-camera-guide::after,.scan-camera-guide i::before,.scan-camera-guide i::after { content:""; position:absolute; width:44px; height:44px; border-color:var(--camera-ink); border-style:solid; }
.scan-camera-guide::before { top:0; left:0; border-width:3px 0 0 3px; }
.scan-camera-guide::after { top:0; right:0; border-width:3px 3px 0 0; }
.scan-camera-guide i::before { bottom:0; left:0; border-width:0 0 3px 3px; }
.scan-camera-guide i::after { right:0; bottom:0; border-width:0 3px 3px 0; }
.scan-camera-stage.is-barcode .scan-camera-guide { width:min(52vw,210px); aspect-ratio:65/90; }
.scan-camera-stage.is-barcode .scan-camera-guide i { position:absolute; top:50%; left:8%; right:8%; height:2px; background:var(--bad); box-shadow:0 0 6px var(--bad); }
.scan-flash-button { display:grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%; background:var(--overlay); color:var(--camera-ink); }
.scan-analysis-steps { display:grid; gap:var(--s2); padding:var(--s3); border-radius:var(--r-sm); background:var(--section); list-style:none; }
.scan-analysis-steps li { display:flex; align-items:center; gap:var(--s2); color:var(--muted); }
.scan-analysis-steps li.is-done { color:var(--good); }
.scan-analysis-steps li.is-active { color:var(--ink); font-weight:750; }
.scan-analysis-steps i { display:grid; place-items:center; width:24px; height:24px; font-style:normal; }
.scan-analysis-steps li.is-active i { animation:spin 1s linear infinite; }
.record-fullscreen .scan-box { padding: var(--s4) 0; border: 0; background: transparent; }
.scan-progress { display: grid; gap: var(--s2); margin: var(--s3) 0; padding: var(--s4); border-radius: var(--r-sm); background: var(--surface-2); }
.scan-progress progress { width: 100%; accent-color: var(--good); }
.scan-progress span { color: var(--muted); font-size: var(--t-caption); }
.scan-unsure-list { display: grid; }
.scan-unsure-list .lookup-result { background: transparent; border-width: 0 0 1px; border-color: var(--line); border-radius: 0; }
.scan-entry-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
.scan-entry-actions .drop { min-height: 112px; text-decoration: none; }
.scan-entry-actions small { display: block; color: var(--ink-2); font-weight: 400; }
.scan-photo-strip { min-height: 280px; }
.scan-photo-thumb:first-child { min-width: min(72vw,520px); }
@media (max-width: 640px) {
  .scan-camera-stage { min-height: calc(100dvh - 132px); border-radius: 0; }}
.scan-photo-thumb,
.scan-photo-thumb:first-child { flex: 0 0 auto; width: min(72vw, 520px); height: auto; min-width: 0; }
.scan-photo-thumb:not(:first-child) { width: 92px; }
.scan-photo-thumb img { display: block; width: 100%; height: auto; max-height: 70dvh; object-fit: contain; image-orientation: from-image; }
@media (max-width: 1023px) {
  .record-fullscreen .scan-camera-stage {
    position: fixed;
    z-index: 70;
    inset: 0;
    width: 100vw;
    min-height: 100dvh;
    padding: max(var(--s4), env(safe-area-inset-top)) var(--s4) max(var(--s4), env(safe-area-inset-bottom));
    border-radius: 0;
  }
  .scan-manual-sheet { z-index: 90; }}

/* 닫기·찾기가 줄 간격 없이 맞붙어 하나처럼 보였다 — 머리말 아래 여백을 준다. */
.scan-manual-sheet .dialog-head { margin-bottom: var(--s3); }

/* ORDER-164: 모바일에서 카메라는 화면을 통째로 덮는다(position:fixed). 주문 내역 결과가 떠 있는
   동안에는 카메라를 걷는다 — 안 그러면 결과가 카메라 밑에 깔려 아무도 못 본다. */
html[data-order-open="true"] .record-fullscreen .scan-camera-stage,
html[data-order-open="true"] .record-fullscreen .scan-photo-strip { display: none; }

/* 전역 번들에서 옮겨 온 /scan 전용 규칙 (홈 예산 밖) */
body[data-page-path="/scan"] { background: var(--surface); }
body[data-page-path="/scan"] main.wrap { width: min(100%, 680px); padding-top: 0; padding-bottom: var(--s7); }
.record-fullscreen { min-height: 100dvh; }
.record-fullscreen-head { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: var(--s2) 0; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--line); }
.record-fullscreen-head > a { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); color: var(--ink-2); font-size: 28px; text-decoration: none; }
.record-fullscreen-head > button { border-radius: var(--pill); }
.record-fullscreen .desktop-scan-main { display: block; width: 100%; }
/* '이름으로 찾기'는 옛 화면에서 section, 지금 화면에서 dialog다. section 규칙이 dialog까지 붙잡아
   닫힌 시트가 촬영 버튼 아랫부분을 덮고 있었다(셔터가 눌렸다 안 눌렸다 하던 원인). */
.record-fullscreen section#manual { display: none; }
.record-fullscreen section#manual:target { display: block; }
[data-scan-unsure] { margin: var(--s3) 0; padding: var(--s4); border-left: 3px solid var(--warn); background: var(--warn-soft); }
.record-fullscreen section#manual:not([hidden]) { display: block; }

/* ORDER-064: mobile record entry is the camera, not another navigation screen. */
@media (max-width: 1023px) {
  .record-fullscreen-head {
    position: fixed;
    z-index: 72;
    top: max(var(--s2), env(safe-area-inset-top));
    left: var(--s2);
    gap: var(--s2);
    padding: 0;
    background: transparent;
    /* 카메라 위에 뜨는 머리는 배경만 걷혔고 밑줄이 남아, 닫기 단추 밑에 흰 선 한 토막으로 보였다 */
    border-bottom: 0;
  }
  .record-fullscreen-head a {
    display: grid;
    place-items: center;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: 50%;
    background: var(--overlay);
    color: var(--camera-ink);
    font-size: var(--t-title);
    text-decoration: none;
  }
  /* 닫기 단추가 머리말에 고정되므로 안내 문구는 그 아래로 내린다. */
  .record-fullscreen .scan-camera-instruction {
    top: calc(max(var(--s2), env(safe-area-inset-top)) + var(--tap-min) + var(--s3));
  }
}

/* ORDER-162: '오늘의 기록' 옆판과 합계 알약은 올리기 화면에서 걷었다.
   끼니·합계는 홈에, 변·카페인·알코올은 홈 카드 시트에 있다 — 옮긴 게 아니라 제자리로 돌린 것. */

/* ORDER-139 C11: 데스크톱에서 모바일 화면이 그대로 나왔다. 손에 든 화면의 셔터를
   마우스 앞에 두지 않고, 파일 고르기와 이름 검색을 앞으로 낸다. */
@media (min-width: 1024px) {
  .scan-camera-actions .scan-shutter { display: none; }
  .scan-camera-stage > p { font-size: var(--t-body); }
  .scan-camera-actions { gap: var(--s4); }
  .scan-gallery-button { min-width: 180px; padding-inline: var(--s4); border-radius: var(--r-sm); }
  .scan-gallery-button::after { content: "앨범에서 고르기"; margin-left: var(--s2); font-size: var(--t-sub); font-weight: 600; }
  /* ORDER-160: CSS 가 심는 글자는 사전이 못 닿는다 — 문서 말로 고른다. */
  html[lang="en"] .scan-gallery-button::after { content: "Choose from the album"; }
  /* 닫기는 흰 띠 안에 떠 있지 않고 오른쪽 위에 붙는다. */
  .record-fullscreen-head { justify-content: flex-end; flex-direction: row-reverse; }
  #manual { order: -1; }
}
/* 오늘 변 단추에 이름을 붙인다 — ○·× 만으로는 무엇인지 알 수 없었다. */
.bowel-row { display: flex; align-items: center; gap: var(--s2); }
.bowel-label { color: var(--ink-2); font-size: var(--t-caption); }

/* ORDER-164: 주문 내역 진찰. 결과는 "이 제품"이 아니라 "이 장바구니" — 줄 목록 + 판정 한 칸. */
.order-result { display: grid; gap: var(--s3); margin: var(--s4) 0; }
.order-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.order-result-head h2 { margin: 0; font-size: var(--t-head); }
.order-lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.order-lines li { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap-min); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.order-lines li:last-child { border-bottom: 0; }
.order-lines li > a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: inherit; text-align: left; text-decoration: none; }
.order-lines b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-lines span { max-width: 100%; color: var(--muted); font-size: var(--t-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-lines em { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: var(--s2); font-style: normal; font-variant-numeric: tabular-nums; }
.order-line--miss { color: var(--ink-2); }
.order-line--miss > b, .order-line--miss > span { flex: 0 1 auto; }
.order-basket { display: grid; gap: var(--s1); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lab, calc(var(--r-sm) + 2px)); }
.order-basket b { font-size: var(--t-caption); color: var(--ink-2); }
.order-basket p { margin: 0; font-size: var(--t-body); }