/* gallery.css — 제품 스크린샷 갤러리의 기기 탭 (UI 개편 P2-2, 2026-09-20).
   `_components/shot_gallery.html` 전용. base.css 가 이미 `.shot-gallery`(가로 스냅 스크롤)와
   `.shot-thumb`(포커스 링)를 낸다 — 여기서는 **탭 크롬과 패널 전환**만 얹는다.
   base.css 는 30KB 예산이 걸려 있어 새 규칙을 받지 않는다(절대 지시 11).
   색은 tokens.css 변수만 쓴다. 깊이는 무채색이다(--border-lit · --edge-solid, UI §1-1). */

.shots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }

/* 라디오는 눈에서만 감춘다 — `display:none` 으로 지우면 포커스를 못 받아 키보드로 탭을
   고를 수 없다(그 순간 이 탭은 마우스 전용이 된다). 1px 클립이 접근성 관행이다. */
.shots-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.shots-tab { display: inline-flex; align-items: center; padding: 7px 15px;
  border: 1px solid var(--border-lit); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--muted);
  font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: color .12s ease, background .12s ease, box-shadow .12s ease; }
.shots-tab:hover { color: var(--text); }

/* 고른 탭은 «떠 있다» — 색이 아니라 빛으로 가른다(§1-1: 악센트는 CTA 에만). */
.shots-radio:checked + .shots-tab { color: var(--text); background: var(--surface-alt);
  box-shadow: var(--edge-solid), var(--shadow-card); }
.shots-radio:focus-visible + .shots-tab { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 패널 전환 — 라디오가 패널보다 **앞선 형제**라서 `~` 로 닿는다. `:nth-of-type` 은 요소
   종류별로 세므로 input 세 개와 div 세 개가 서로 방해하지 않는다(그래서 JS 가 필요 없다).
   기기가 둘뿐인 제품이면 셋째 짝은 그냥 아무것도 고르지 않는다. */
/* 패널은 늘 한 줄을 통째로 차지한다 — 줄 안에서 줄어들면 가로 스크롤 영역이 콘텐츠 폭을
   따라가 페이지가 옆으로 새어 나간다(`min-width: 0` 이 그것을 막는 쪽이다). */
.shots > div { flex: 1 1 100%; min-width: 0; }
.shots-tabbed > div { display: none; }
.shots-tabbed > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.shots-tabbed > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.shots-tabbed > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: flex; }

/* 가로 스크롤바는 감춘다 — 스냅으로 넘기는 줄이라 막대가 그림 아래에 한 줄 더 그어진다.
   휠·스와이프·키보드(썸네일이 버튼이라 Tab 으로 밀린다) 전부 그대로 동작한다. */
.shots .shot-gallery { scrollbar-width: none; -ms-overflow-style: none; }
.shots .shot-gallery::-webkit-scrollbar { width: 0; height: 0; }

@media (max-width: 640px) {
  /* 폰에서는 한 장이 화면을 다 먹지 않게 낮춘다 — 옆 장이 반쯤 보여야 «더 있다» 가 읽힌다. */
  .shots .shot-gallery img { height: 300px; }
  .shots-tab { padding: 6px 13px; font-size: 13px; }
}