/*
 * QR로 찾기 — 전체 화면 카메라 창(js/qr-scan.js). 02 개체 목록 · m02 가 함께 쓴다(계약 team/contracts/wholesale.md §4).
 * 40대+ 원칙: 큰 글자(결과 28px)·큰 버튼(끝내기 56px, 빼기 56px)·글자 라벨. 하드코딩 색 없음(토큰만 — 사진 위 글래스 토큰으로 카메라 위 안내).
 * 훅: .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;} }