/* ═══════════════════════════════════════════════════════════════════
   snap-box 전용 스타일 — css/db-tokens.css · css/ui.css 뒤에 얹는다
   ═══════════════════════════════════════════════════════════════════
   규칙:
     · 새 색·새 폰트를 만들지 않는다. ui.css 의 토큰(→ --db-*)만 쓴다.
     · ui.css 에 있는 것(.db .inp .pan .hint .sec2 .prg .badge .dropzone
       .rangerow .fieldrow .pickrow .filebtn .summary .namepv .mk-bar …)을
       먼저 찾아 쓰고, 이 화면에만 있는 것만 여기에 만든다.

   여기 남은 것: 사진 목록 줄 · 미리보기 무대 · 얼굴 대체 그림 고르기.
   전부 "사진을 다루는 서비스" 에만 필요한 것들이다.
   ─────────────────────────────────────────────────────────────────── */

/* ── 왼쪽: 사진 목록 ───────────────────────────────────── */
#queueList{margin-top:10px}

.qitem{display:flex;align-items:center;gap:7px;padding:5px 6px;margin-bottom:5px;
  border:1px solid transparent;border-radius:var(--r-m);background:var(--panel2);
  cursor:pointer;transition:all .12s}
.qitem:hover{border-color:var(--line)}
.qitem.on{border-color:var(--acc);background:var(--acc-soft)}
.qitem.bad{border-color:var(--warn);background:var(--warn-soft)}
.qitem input[type=checkbox]{flex-shrink:0;accent-color:var(--acc);width:13px;height:13px;margin:0}
.qitem .idx{flex-shrink:0;width:15px;text-align:right;font-size:10.5px;font-weight:700;color:var(--ink3)}
.qitem.on .idx{color:var(--acc-ink)}
.qitem .th{width:42px;height:42px;flex-shrink:0;border-radius:var(--r-s);object-fit:cover;
  background:var(--line-soft);border:1px solid var(--line)}
.qitem .meta{min-width:0;flex:1}
.qitem .nm{font-size:11px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qitem .mt{font-size:10px;color:var(--ink3);font-weight:600;margin-top:1px}
.qitem .mt.done{color:var(--ok)}
.qitem .mt.bad{color:var(--warn)}

/* ── 가운데: 미리보기 무대 ─────────────────────────────── */
.pan > .ph #stageName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}

.pb-stage{padding:0;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;background:var(--bg)}
.pb-stage .canvas-container{margin:auto}
/* 사진 경계를 바탕과 구분해 준다 */
.pb-stage canvas{box-shadow:0 0 0 1px var(--line),0 2px 10px rgba(22,24,29,.10)}
/* 칸 그리기 중에는 커서로 알려 준다 */
.pb-stage.drawing canvas{cursor:crosshair}

#stageEmpty{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;text-align:center;padding:24px;pointer-events:none}
#stageEmpty i{font-size:26px;color:var(--line-d)}
#stageEmpty p{font-size:12.5px;font-weight:700;color:var(--ink2);max-width:360px;line-height:1.6}
#stageEmpty span{font-size:11.5px;color:var(--ink3)}

.mk-bar #posLabel{font-size:11.5px;color:var(--ink3);font-weight:700;min-width:44px;text-align:center}

/* ── 오른쪽: 얼굴 대체 그림 고르기 ─────────────────────── */
.iconpick{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:9px}
.iconpick button{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--panel);cursor:pointer;display:grid;place-items:center;padding:4px;transition:all .12s}
.iconpick button:hover{border-color:var(--acc);background:var(--acc-soft)}
.iconpick button.on{border-color:var(--acc);background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc)}
.iconpick img{width:100%;height:100%;object-fit:contain;display:block}

.custprev{margin-top:7px;min-height:52px;border:1px solid var(--line-soft);border-radius:var(--r-m);
  display:grid;place-items:center;background:var(--panel2);
  font-size:11px;color:var(--ink3);font-weight:600;padding:5px}
.custprev img{max-width:100%;max-height:48px;object-fit:contain;display:block}

/* ── 기록 전체 삭제 (페이지 맨 아래, 아래 작업 줄 밑) ──────────
   딴짓 첫 화면 .hub-reset 과 같은 조용한 둥근 테두리 버튼. 색은 공통 토큰만. */
.db-reset-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;flex-shrink:0;
  margin:-2px 10px 0;padding:0 2px 8px;font-size:11.5px;line-height:1.6;color:var(--db-sub)}
.db-reset-row .db-reset{margin-left:auto;min-height:var(--db-hit);padding:0 16px;border:1px solid var(--db-line);
  border-radius:var(--db-pill);background:transparent;color:var(--db-sub);font:inherit;font-weight:700;
  cursor:pointer;transition:color .14s,border-color .14s}
.db-reset-row .db-reset:hover,.db-reset-row .db-reset:focus-visible{color:var(--db-text);border-color:var(--db-sub)}

/* ── 좁은 화면 ─────────────────────────────────────────── */
@media (max-width:1100px){
  .db-reset-row{margin:4px 8px 0;padding:10px 2px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--db-line)}
  .pb-stage{min-height:420px}
}
/* 사진이 아직 없을 때 좁은 화면(패널이 위아래로 쌓일 때):
   위 사진 목록의 '놓는 자리'가 유일한 시작 버튼이다. 그 바로 아래에 같은 말을 하는
   안내 줄('먼저 사진을 넣습니다 / 사진 넣기')·상태 배지·큰 빈 칸이 또 나오지 않게 접고,
   '이 브라우저 안에서만 처리' 한 줄만 남긴다. 사진을 넣으면 app.js 가 body.no-photos 를 뗀다. */
body.no-photos .pb-stage .canvas-container{display:none}   /* 빈 캔버스 틀(300×150)이 안내 뒤에 비치지 않게 */
@media (max-width:1100px){
  body.no-photos #guide,
  body.no-photos #detectState,
  body.no-photos #stageEmpty span{display:none}
  body.no-photos .pb-stage{min-height:0}
  body.no-photos #stageEmpty{position:static;flex-direction:row;gap:10px;padding:12px 14px;text-align:left}
  body.no-photos #stageEmpty i{font-size:18px}
  body.no-photos #stageEmpty p{max-width:none;font-weight:600}
}
@media (max-width:700px){
  .db-reset-row{font-size:12.5px}
  .qitem .nm{font-size:13.5px}
  .qitem .mt{font-size:12px}
}