/* 배송사진 갤러리 (gallery.html · {en,ja,zh,vi}/gallery.html) — 2026-10-27 · 달자네 assets/style.css 의 .gal-* 를 옮김
   site.css 에 넣지 않은 까닭: site.css 를 고치면 모든 생성 페이지의 ?v= 꼬리표가 바뀐다(scripts/lib/shell.mjs CSS_V).
   생성기 = scripts/build-gallery.mjs · 화면 동작 = assets/gallery.js */
.gal-page{padding-top:28px;padding-bottom:64px}
.gal-h1{font-size:clamp(26px,4vw,34px);line-height:1.25;margin:0 0 12px;overflow-wrap:anywhere}
.gal-note{margin:-14px 0 16px;overflow-wrap:anywhere}
/* keep-all 은 **한국어에만** — 일본어·중국어 문장은 띄어쓰기가 없어 keep-all 이면 한 줄로 늘어나
   모바일 390 에서 가로로 넘친다(2026-10-27 시험에서 ja 안내문이 36px 넘침). */
.lang-ko .gal-h1,.lang-ko .gal-note,.lang-ko .gal-item figcaption{word-break:keep-all}

.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:26px}
.gal-item{margin:0;min-width:0}

/* .gal-stage 는 반드시 position:relative — 리본 가림칸(.gal-marks i)이 이 안에서 자리를 잡는다.
   가림칸이 없는 사진은 정방형으로 잘라(cover) 가운데를 보여 준다. */
.gal-stage{position:relative;line-height:0;border-radius:10px;overflow:hidden;
  background:var(--tile,#F7F3F0);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center}
.gal-stage>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* ⚠ 리본 가림칸이 있는 사진만 이 길로 간다 (.gal-item--fit).
   가림칸은 **사진에 대한 비율**로 얹으므로 사진이 잘리면 자리가 어긋나 리본이 드러난다.
   그래서 자르지 않고(contain) 3:4 칸에 넣고, .gal-fit 을 그려진 사진에 딱 붙인다
   (aspect-ratio 는 assets/gallery.js 가 사진을 받은 뒤 naturalWidth/Height 로 넣는다).
   **.gal-marks 를 .gal-stage 로 옮기지 말 것.** */
.gal-item--fit .gal-stage{aspect-ratio:3/4}
.gal-fit{position:relative;max-width:100%;max-height:100%;aspect-ratio:3/4}
.gal-fit img{display:block;width:100%;height:100%;object-fit:contain}
.gal-marks{position:absolute;inset:0}
.gal-marks i{position:absolute;border-radius:3px;
  backdrop-filter:blur(14px) saturate(.6);-webkit-backdrop-filter:blur(14px) saturate(.6);
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
/* 흐리게를 못 쓰는 브라우저에서는 검은 네모로 물러선다 — 안 가려지느니 안 예쁜 쪽이 낫다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .gal-marks i{background:#111;box-shadow:none}
}
.gal-item figcaption{margin:8px 2px 0;font-size:14px;line-height:1.45;color:var(--muted,#5A6476);overflow-wrap:anywhere}
/* 금액대 이름표(분류 · 금액대 · 약 US$n)는 덩어리 안에서 끊지 않는다 — 「approx. / US$33」처럼 갈리지 않게 (2026-11-03) */
.gal-item figcaption span{white-space:nowrap}

.gal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.gal-tabs button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  padding:8px 16px;border-radius:999px;
  background:#fff;color:var(--ink,#14213D);border:1px solid var(--line-2,rgba(20,33,61,.22));
  transition:background .15s,border-color .15s,color .15s}
.gal-tabs button:hover{border-color:var(--accent,#C04520);color:var(--accent,#C04520)}
.gal-tabs button[aria-pressed="true"]{background:var(--accent,#C04520);border-color:var(--accent,#C04520);color:#fff}
.gal-more{margin:28px 0 0;text-align:center}
.gal-more button[hidden]{display:none}
@media(max-width:640px){
  .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gal-tabs{gap:6px}
  .gal-tabs button{padding:7px 12px;font-size:13px}
}