/*
 * QR로 찾기 — 전체 화면 카메라 창(js/qr-scan.js). 02 개체 목록 · m02 가 함께 쓴다(계약 team/contracts/wholesale.md §4).
 * 40대+ 원칙: 큰 글자(결과 28px)·큰 버튼(끝내기 56px, 빼기 56px)·글자 라벨. 하드코딩 색 없음(토큰만 — 사진 위 글래스 토큰으로 카메라 위 안내 · 예외 = 카메라 위 배율·플래시 동그란 단추의 .qrs-cam 변수).
 * 훅: .qrs-host[data-state][data-decoder][data-mode] · .qrs-end · .qrs-video · .qrs-state[data-state] · .qrs-retry · .qrs-msg[data-kind] · .qrs-count · .qrs-undo
 *     (2026-10-14) 두 갈래 .qrs-modes > .qrs-mode[data-mode=one|many][aria-pressed] · 아래 안내 한 줄 .qrs-hint[data-mode]
 *     — 한 마리 찾기면 넣은 수 줄(.qrs-row)은 숨는다. 상세로 가는 중 = .qrs-host[data-state=opening][data-href]
 */
.qrs-host{position:fixed;inset:0;z-index:1100;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--font);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);}
.qrs-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);min-height:76px;padding:var(--s3) var(--s4);flex:0 0 auto;}
.qrs-t{flex:1 1 auto;min-width:0;margin:0;font-size:var(--t-xl);font-weight:var(--w-black);letter-spacing:var(--track-tight);line-height:1.25;}
.qrs-end{min-width:128px;flex:0 0 auto;}

/* 두 갈래(한 마리 찾기 / 여러 마리 모으기) — 제목 아래 한 줄 전체. 눌린 쪽 = 진한 바탕 + 체크(색만으로 구분하지 않는다) */
.qrs-modes{flex:1 1 100%;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:var(--r-lg);background:var(--fill);}
.qrs-mode{min-width:0;min-height:56px;padding:6px var(--s3);border:0;border-radius:var(--r-md);background:transparent;color:var(--ink-2);cursor:pointer;
  font-family:var(--font);font-size:var(--t-lg);font-weight:var(--w-bold);line-height:1.25;
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;word-break:keep-all;overflow-wrap:anywhere;}
.qrs-mode[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:var(--w-black);box-shadow:var(--sh-1);}
.qrs-mode[aria-pressed="true"]::before{content:"";flex:0 0 auto;width:8px;height:14px;margin-top:-4px;border:solid currentColor;border-width:0 3px 3px 0;transform:rotate(45deg);}
.qrs-mode:disabled{cursor:default;}
.qrs-mode:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}

/* 카메라 — 비추는 틀 밖은 어둡게(글래스 토큰) */
.qrs-stage{position:relative;flex:1 1 auto;min-height:0;margin:0 var(--s4);border-radius:var(--r-xl);overflow:hidden;background:var(--fill-2);container-type:size;}
.qrs-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* 틀 = 카메라 칸에 맞춘다(cq 단위를 모르는 브라우저는 앞의 vw·vh 값) */
.qrs-frame{position:absolute;left:50%;top:50%;width:min(64vw,52vh,340px);width:min(64cqw,72cqh,340px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:var(--r-xl);
  box-shadow:0 0 0 4px var(--glass-dark-ink),0 0 0 9999px var(--glass-dark);pointer-events:none;}
.qrs-guide{position:absolute;left:var(--s3);right:var(--s3);top:var(--s3);margin:0 auto;width:fit-content;max-width:calc(100% - 24px);
  padding:10px var(--s4);border-radius:var(--r-full);background:var(--glass-dark);color:var(--glass-dark-ink);
  font-size:var(--t-lg);font-weight:var(--w-bold);line-height:1.35;text-align:center;}
/* 카메라를 못 쓸 때·켜는 중·잠시 꺼짐 — 틀 대신 쉬운 안내 */
.qrs-state{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  padding:var(--s6) var(--s5);background:var(--panel);text-align:center;overflow:auto;}
.qrs-state[hidden]{display:none;}
.qrs-state-t{font-size:var(--t-xl);font-weight:var(--w-black);color:var(--ink);line-height:1.3;}
.qrs-state-d{max-width:520px;font-size:var(--t-lg);color:var(--ink-2);line-height:1.55;word-break:keep-all;overflow-wrap:anywhere;}
.qrs-state .qrs-retry{margin-top:var(--s2);}
.qrs-host[data-state="loading"] .qrs-state-t{color:var(--ink-2);}

/* 아래 — 방금 결과(큰 글자) · 넣은 수 · 빼기 */
.qrs-panel{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) var(--s4) var(--s4);}
.qrs-msg{display:flex;align-items:center;gap:var(--s3);min-height:92px;padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--sh-1);}
.qrs-msg-ic{flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;}
.qrs-msg[data-kind="idle"] .qrs-msg-ic{display:none;}
.qrs-msg[data-kind="added"] .qrs-msg-ic{background:var(--ok-soft);color:var(--ok);}
.qrs-msg[data-kind="dup"] .qrs-msg-ic{background:var(--info-soft);color:var(--info);}
.qrs-msg[data-kind="bad"] .qrs-msg-ic,.qrs-msg[data-kind="error"] .qrs-msg-ic{background:var(--dang-soft);color:var(--dang);}
.qrs-msg[data-kind="added"]{box-shadow:0 0 0 2px var(--ok) inset,var(--sh-1);}
.qrs-msg-b{display:flex;flex-direction:column;gap:4px;min-width:0;}
.qrs-msg-t{font-size:var(--t-2xl);font-weight:var(--w-black);color:var(--ink);line-height:1.25;overflow-wrap:anywhere;}
.qrs-msg[data-kind="idle"] .qrs-msg-t{font-size:var(--t-xl);color:var(--ink-2);}
.qrs-msg-d{font-size:var(--t-md);color:var(--ink-2);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;}
.qrs-msg-d[hidden]{display:none;}
.qrs-msg.pop{animation:qrs-pop var(--dur-2) var(--ease-out);}
@keyframes qrs-pop{from{transform:scale(.97);}to{transform:none;}}
.qrs-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);}
.qrs-count{flex:1 1 200px;min-width:0;font-size:var(--t-lg);color:var(--ink-2);line-height:1.4;}
.qrs-count b{color:var(--ink);font-weight:var(--w-black);}
.qrs-count small{font-size:var(--t-md);color:var(--ink-3);white-space:nowrap;}
.qrs-undo{flex:0 1 auto;max-width:100%;gap:8px;}
.qrs-row[hidden]{display:none;}
/* 창 아래 안내 한 줄 — 갈래마다 다르게 */
.qrs-hint{margin:0;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink-2);line-height:1.4;text-align:center;word-break:keep-all;overflow-wrap:anywhere;}
.qrs-end:focus-visible,.qrs-undo:focus-visible,.qrs-retry:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}

/* 좁은 폭 — 빼기 버튼은 한 줄 전체 */
@media (max-width:430px){
  .qrs-top{min-height:68px;padding:var(--s2) var(--s3);gap:var(--s2);}
  .qrs-mode{padding:6px var(--s2);gap:6px;}
  .qrs-stage{margin:0 var(--s3);}
  .qrs-panel{padding:var(--s3);}
  .qrs-undo{flex:1 1 100%;}
  .qrs-msg-t{font-size:var(--t-xl);}
  .qrs-guide{font-size:var(--t-md);}
}
/* 키가 작은 세로 화면(작은 휴대폰·브라우저 주소줄) — 결과 칸·틈을 줄여 카메라 칸을 남긴다 */
@media (max-height:700px){
  .qrs-top{min-height:60px;}
  .qrs-panel{gap:var(--s2);}
  .qrs-msg{min-height:68px;padding:var(--s2) var(--s3);}
  .qrs-msg-ic{width:40px;height:40px;}
}
/* 가로로 든 휴대폰(넓고 낮다) — 카메라 칸이 남도록. 두 갈래는 제목과 끝내기 사이 한 줄에, 아래 안내 줄은 갈래 버튼 글자로 충분 → 숨긴다.
   (좁고 낮은 세로 화면은 위 max-height:700 규칙으로 — 결과 칸을 옆으로 놓으면 카메라 칸이 없어진다) */
@media (max-height:560px) and (min-width:540px){
  .qrs-top{min-height:60px;padding:6px var(--s3);flex-wrap:nowrap;}
  .qrs-t{flex:0 0 auto;white-space:nowrap;}
  .qrs-modes{order:1;flex:1 1 auto;padding:3px;}
  .qrs-end{order:2;}
  .qrs-mode{min-height:48px;font-size:var(--t-md);}
  .qrs-hint{display:none;}
  .qrs-panel{flex-direction:row;align-items:stretch;gap:var(--s2);padding:var(--s2) var(--s3);}
  .qrs-msg{flex:1 1 auto;min-height:0;padding:var(--s2) var(--s3);}
  .qrs-msg-t{font-size:var(--t-xl);}
  .qrs-msg-d{display:none;}
  .qrs-row{flex:0 1 auto;flex-direction:column;align-items:stretch;}
  .qrs-count{flex:0 0 auto;font-size:var(--t-md);}
  .qrs-undo{flex:0 0 auto;}
}
@media (hover:hover){.qrs-mode:not([aria-pressed="true"]):hover{background:var(--fill-2);color:var(--ink);}}
@media (prefers-reduced-motion:reduce){.qrs-msg.pop{animation:none;}}

/* (2026-10-14) 한 마리 고르기(pickGeckoByQr — 경매 출품) — 바코드 스캐너 기기 입력 칸(카메라가 없어도 쓸 수 있게) */
.qrs-scan{display:flex;flex-direction:column;gap:6px;min-width:0;}
.qrs-scan-t{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-2);line-height:1.45;word-break:keep-all;overflow-wrap:anywhere;}
.qrs-scan-in{width:100%;box-sizing:border-box;height:var(--ctl);padding:0 var(--s4);border:1.5px solid var(--line-3);border-radius:var(--r-md);
  background:var(--panel);color:var(--ink);font:var(--w-semi) 16px/1 var(--font);}
.qrs-scan-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring);}
@media (max-height:560px) and (min-width:540px){ .qrs-scan{display:none;} }

/* (2026-10-21) 마리마다 기록하기(scanEach — js/qr-record.js "QR로 기록하기") — 창 아래 입력 자리(.qrs-each-in 안 칸은 qr-record.css) ·
   위 한 줄(.qrs-each-note — "S0123 노바는 저장하지 않았어요" 등) · 스캐너/번호 칸 + [찾기]. 입력 중 = .qrs-host[data-entry] · 휴대폰 키보드 = [data-kb] */
.qrs-each{display:flex;flex-direction:column;gap:var(--s2);min-width:0;}
.qrs-each[hidden]{display:none;}
.qrs-each-in{min-width:0;}
.qrs-each-note{margin:0;padding:8px 12px;border-radius:var(--r-md);background:var(--warn-soft);color:var(--ink);
  font-size:var(--t-md);font-weight:var(--w-bold);line-height:1.45;word-break:keep-all;overflow-wrap:anywhere;}
.qrs-each-note[data-tone="info"]{background:var(--info-soft);}
.qrs-each-note[data-tone="dang"]{background:var(--dang-soft);color:var(--dang);}
.qrs-each-note[hidden]{display:none;}
.qrs-scan-line{display:flex;gap:var(--s2);min-width:0;}
.qrs-scan-line .qrs-scan-in{flex:1 1 auto;min-width:0;}
.qrs-scan-go{flex:0 0 auto;min-width:96px;}
.qrs-host[data-entry] .qrs-hint{display:none;}
.qrs-host[data-pick="each"] .qrs-msg{min-height:76px;}
/* 휴대폰 키보드가 올라와 숫자를 넣는 중 — 카메라 위 안내·넣은 수 줄·스캐너 칸을 접어 입력 칸이 보이게 */
.qrs-host[data-kb] .qrs-guide{display:none;}
.qrs-host[data-kb][data-entry] .qrs-row,.qrs-host[data-kb][data-entry] .qrs-scan-each{display:none;}
/* 키 작은 화면(작은 휴대폰) — 입력 중에는 카메라 칸·스캐너 칸을 접는다(입력 중엔 카메라가 읽지 않음 — 카메라는 켜 둔 채, 저장하면 다시 보임) */
@media (max-height:700px){
  .qrs-host[data-pick="each"] .qrs-msg{min-height:60px;}
  .qrs-host[data-pick="each"][data-entry] .qrs-stage,.qrs-host[data-pick="each"][data-entry] .qrs-scan-each{display:none;}
}
.qrs-state{justify-content:safe center;}
.qrs-state > *{flex-shrink:0;}   /* 칸이 좁아도 안내 글·[카메라 다시 켜기] 가 눌리지 않게(넘치면 칸 안에서 스크롤) */
@media (max-height:560px) and (min-width:540px){
  .qrs-host[data-pick="each"] .qrs-panel{flex-direction:column;}
  .qrs-host[data-pick="each"] .qrs-scan{display:flex;}
  .qrs-host[data-pick="each"] .qrs-scan-t{display:none;}
}
/* 마리마다 기록하기 — 아래 칸이 길면(급여 체중비 등) 그 칸만 스크롤(카메라 칸은 입력 중엔 접혀도 됨 — 읽지 않음) · 넓은 화면은 가운데 880px */
.qrs-host[data-pick="each"] .qrs-panel{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;align-items:center;}
.qrs-host[data-pick="each"] .qrs-panel > *{width:100%;max-width:880px;box-sizing:border-box;}
.qrs-host[data-pick="each"]:not([data-entry]) .qrs-stage{min-height:min(240px,34vh);}
@media (max-width:640px){
  .qrs-host[data-pick="each"][data-entry] .qrs-scan-each{display:none;}   /* 휴대폰은 입력 중 스캐너 칸 접음(번호 찾기는 저장·건너뛰기 뒤) */
}

/* (2026-10-23 v2.14) 재고 확인 — js/qr-scan.js openStockScanner(카메라 창 네 번째 고정 갈래) · stockInputHtml/wireStockInput(컴퓨터 재고 확인 줄의 바코드 스캐너 칸).
   훅: .qrs-host[data-pick="stock"] · .qrs-t-sub(제목 아래 조건 한 줄) · .qrs-msg[data-kind=added|dup|out|bad|error][data-sound][data-result] ·
       .qrs-count 안 .qrs-stk-n(숫자 — 줄바꿈 없음)·.qrs-stk-bar > i(막대) · .qrs-scan-stock(창 아래 스캐너·번호 칸) ·
       .qrs-stk-box[data-away](칸 밖 — 주황 테두리 + "여기를 눌러야 찍혀요") · .qrs-stk-res[data-kind][data-tone][data-sound](칸 아래 결과 한 줄) */
.qrs-t-sub{display:block;margin-top:2px;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink-3);letter-spacing:0;line-height:1.35;
  word-break:keep-all;overflow-wrap:anywhere;}
.qrs-msg[data-kind="out"] .qrs-msg-ic{background:var(--warn-soft);color:var(--warn);}
.qrs-msg[data-kind="out"]{box-shadow:0 0 0 2px var(--warn) inset,var(--sh-1);}
.qrs-host[data-pick="stock"] .qrs-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;}
.qrs-stk-n{white-space:nowrap;}
.qrs-stk-n b{font-variant-numeric:tabular-nums;}
.qrs-stk-bar{flex:1 1 100%;display:block;height:8px;margin-top:2px;border-radius:var(--r-full);background:var(--fill-2);overflow:hidden;}
.qrs-stk-bar > i{display:block;height:100%;width:0;border-radius:inherit;background:var(--ok);transition:width var(--dur-2) var(--ease-out);}
.qrs-host[data-pick="stock"] .qrs-panel{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;align-items:center;}
.qrs-host[data-pick="stock"] .qrs-panel > *{width:100%;max-width:880px;box-sizing:border-box;}
.qrs-host[data-pick="stock"] .qrs-stage{min-height:min(240px,34vh);}
/* 휴대폰 키보드(번호 치는 중) — 카메라 위 안내·숫자 줄을 접어 칸이 보이게 */
.qrs-host[data-pick="stock"][data-kb] .qrs-row{display:none;}
@media (max-height:560px) and (min-width:540px){
  .qrs-host[data-pick="stock"] .qrs-panel{flex-direction:column;}
  .qrs-host[data-pick="stock"] .qrs-scan{display:flex;}
  .qrs-host[data-pick="stock"] .qrs-scan-t{display:none;}
}

/* 컴퓨터 재고 확인 줄의 바코드 스캐너 칸 */
.qrs-stk-box{display:flex;flex-direction:column;gap:6px;min-width:0;}
.qrs-stk-t{font-size:var(--t-md);font-weight:var(--w-bold);color:var(--ink-2);line-height:1.4;word-break:keep-all;overflow-wrap:anywhere;}
.qrs-stk-box[data-away] .qrs-stk-in{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);}
.qrs-stk-away{display:none;margin:0;font-size:var(--t-md);font-weight:var(--w-bold);color:var(--ink);line-height:1.4;}
.qrs-stk-away::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--warn);vertical-align:1px;}
.qrs-stk-box[data-away] .qrs-stk-away{display:block;}
.qrs-stk-res{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 12px;border-radius:var(--r-md);background:var(--panel);
  box-shadow:inset 4px 0 0 var(--line-3);}
.qrs-stk-res[data-kind="idle"]{display:none;}
.qrs-stk-res-t{font-size:var(--t-lg);font-weight:var(--w-black);color:var(--ink);line-height:1.35;overflow-wrap:anywhere;}
.qrs-stk-res-d{font-size:var(--t-md);color:var(--ink-2);line-height:1.45;word-break:keep-all;overflow-wrap:anywhere;}
.qrs-stk-res-d[hidden]{display:none;}
.qrs-stk-res[data-tone="ok"]{background:var(--ok-soft);box-shadow:inset 4px 0 0 var(--ok);}
.qrs-stk-res[data-tone="info"]{background:var(--info-soft);box-shadow:inset 4px 0 0 var(--info);}
.qrs-stk-res[data-tone="warn"]{background:var(--warn-soft);box-shadow:inset 4px 0 0 var(--warn);}
.qrs-stk-res[data-tone="dang"]{background:var(--dang-soft);box-shadow:inset 4px 0 0 var(--dang);}
.qrs-stk-res.pop{animation:qrs-pop var(--dur-2) var(--ease-out);}
@media (prefers-reduced-motion:reduce){.qrs-stk-res.pop{animation:none;}.qrs-stk-bar > i{transition:none;}}

/* (v2.14.5 → v2.15.1) 배율·플래시 — 카메라 칸(.qrs-stage) 안쪽 아래에 겹친 반투명 동그란 단추(js/qr-scan.js — 모든 갈래 공용).
   사용자 2026-10-24 "1배 2배 3배와 플래시를 QR 인식하는 화면(카메라 표시부) 위에 반투명으로 띄우고 동그란 x1, x2, x3 아이콘, 플래시 아이콘으로 표시해라.
   배율은 로터리식으로 x1, x2, x3을 터치할때마다 바뀌게 하고 플래시는 토글로 처리해라." — 아래 줄(v2.14.5 .seg [1배][2배][3배] + [플래시 켜기])을 없앴다.
   왼쪽 아래 = 배율 "x1"→"x2"→"x3"→"x1" · 오른쪽 아래 = 플래시 번개(기기가 줄 때만 — 꺼짐 = 어두운 반투명 + 흰 선 / 켜짐 = 노란 바탕 + 어두운 꽉 찬 번개).
   동그라미·그림 단추 = 사용자 지시로 이 두 단추만 예외(CLAUDE.md 원칙 2 — 아이콘 단추 금지 · 누르는 것 12px 네모). 뜻은 aria-label·title.
   카메라 위라 밝은·어두운 테마 모두 같은 모양 — 색은 이 칸에서만 쓰는 값(.qrs-cam 변수).
   훅: .qrs-stage > .qrs-cam > .qrs-zoom[data-zoom][aria-label] · .qrs-torch[aria-pressed][aria-label] · .qrs-host[data-zoom][data-zoom-kind][data-torch] */
.qrs-video{transform-origin:50% 50%;}   /* 디지털 배율(scale) — 움직임 없이 바로(기기 줌으로 바뀌는 순간 두 번 커져 보이지 않게) */
.qrs-cam{--qrs-cb:56px;--qrs-cm:12px;
  --qrs-c-bg:rgba(0,0,0,.45);--qrs-c-bg-hover:rgba(0,0,0,.6);--qrs-c-ink:#fff;--qrs-c-line:rgba(255,255,255,.6);
  --qrs-c-on-bg:#ffd84d;--qrs-c-on-ink:#1a1a1a;--qrs-c-on-line:rgba(255,255,255,.9);
  position:absolute;left:var(--qrs-cm);right:var(--qrs-cm);bottom:var(--qrs-cm);z-index:1;
  display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none;}
.qrs-cam > button{pointer-events:auto;flex:0 0 auto;box-sizing:border-box;width:var(--qrs-cb);height:var(--qrs-cb);margin:0;padding:0;
  border-radius:50%;border:1.5px solid var(--qrs-c-line);background:var(--qrs-c-bg);color:var(--qrs-c-ink);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.28);
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;   /* 빨리 여러 번 눌러도 화면 확대 안 됨 */
  font-family:var(--font);font-size:var(--t-xl);font-weight:var(--w-black);line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1);}
.qrs-cam > button:active{transform:scale(.92);background:var(--qrs-c-bg-hover);}
.qrs-cam > button:focus-visible{outline:3px solid var(--qrs-c-ink);outline-offset:3px;}
.qrs-zoom{text-shadow:0 1px 2px rgba(0,0,0,.35);}
.qrs-torch[hidden]{display:none;}
.qrs-torch svg{display:block;}
.qrs-torch[aria-pressed="true"]{background:var(--qrs-c-on-bg);color:var(--qrs-c-on-ink);border-color:var(--qrs-c-on-line);}
.qrs-torch[aria-pressed="true"] svg path{fill:currentColor;}
.qrs-torch[aria-pressed="true"]:active{background:var(--qrs-c-on-bg);}
@media (hover:hover){
  .qrs-cam > button:hover{background:var(--qrs-c-bg-hover);}
  .qrs-torch[aria-pressed="true"]:hover{background:var(--qrs-c-on-bg);filter:brightness(1.04);}
}
@media (prefers-reduced-motion:reduce){.qrs-cam > button{transition:none;}.qrs-cam > button:active{transform:none;}}
/* 비추는 틀이 단추와 겹치지 않게 — 틀(둥근 모서리 24 + 테두리 4)과 단추(지름 56·가장자리 12)가 떨어지는 크기까지만.
   틀이 옆으로 비켜나면(가로 여유 ≥ 72) 또는 위아래로 비켜나면(세로 여유 ≥ 72) 겹치지 않고(100cqmax − 144),
   둘 다 아니면 모서리끼리 대각선 거리로(가로 여유 + 세로 여유 ≥ 112 → 50cqw + 50cqh − 112). 둘 중 큰 쪽까지 허용. */
.qrs-frame{width:min(64cqw,72cqh,340px,max(100cqmax - 144px,50cqw + 50cqh - 112px));}
/* 카메라를 못 쓸 때·켜는 중 등 안내 칸이 뜰 때 · 휴대폰 키보드가 올라와 있을 때는 숨긴다 */
.qrs-host:not([data-state="live"]) .qrs-cam,.qrs-host[data-kb] .qrs-cam{display:none;}