/* image-viewer.css — 이미지 뷰어 컴포넌트(`image-viewer.js`)의 **스타일 정본**.
 *
 * ★2026-09-05 `T-182` 로 여기로 옮겼다. 원래 자리는 `templates.css` 였는데,
 *   그 파일은 **기존 앱(`index.html`)만** 싣는다. 그래서 반자동 작업대(`/fast`)에서
 *   확대 모달을 열면 **뷰어에 스타일이 하나도 없었다** — 사장님이 보신
 *   *"모달이 비율이 왜저모양이냐"* 가 그것이다(실측: 870x1344 상자 안에 원본이
 *   축소도 안 된 **800x4000 원본 크기 그대로** 들어가 있었다).
 * ★같은 세션에 `progress-inline.css` 도 같은 이유로 분리했다(`T-192`).
 *   **컴포넌트의 스타일은 그 컴포넌트와 같이 산다** — 화면 하나의 CSS 에 얹어 두면
 *   그 화면 밖에서 쓰는 순간 조용히 반쪽이 된다(= 이 리포의 «만들었다 ≠ 닿는다»).
 * ★싣는 곳 = `static/index.html`(평범한 link · `templates.css` 바로 앞) ·
 *   `static/fast.html`(`layer(legacy)` — `app.css`·`progress-inline.css` 와 같은 레이어).
 * ★색은 `tokens.css` 변수만 쓴다(§11-L). 여기에 새 hex 를 타이핑하지 마라.
 */

/* ── 이미지 뷰어 컴포넌트 (사장님 표준 — 한장↔분할 토글 / Ctrl+휠 확대 / 드래그 이동) ── */
.iv-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 2026-06-14: 본체 배경 = 흰 카드 복원. 블러 fix 때 투명화했다 사장님 catch로 되돌림.
     오버레이 .lightbox-overlay 는 투명+backdrop:none 유지 = 뒷 blur 없음. */
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.iv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  background: var(--color-bg-input);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-2);
  flex-wrap: wrap;
}
.iv-mode-tabs {
  display: inline-flex;
  background: var(--color-bg-card);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 2px;
}
.iv-mode-tab {
  background: transparent;
  border: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
}
.iv-mode-tab.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.iv-zoom-controls {
  display: inline-flex;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.iv-zoom-btn {
  background: transparent;
  border: 0;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-secondary);
  min-width: 28px;
}
.iv-zoom-btn:hover { background: var(--color-bg-input); }
.iv-zoom-reset { padding: var(--space-1) var(--space-3); }
.iv-zoom-label { font-size: var(--text-xs); color: var(--color-text-secondary); }

.iv-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 300px;
}
.iv-pan-area {
  width: 100%;
  height: 100%;
  overflow: auto;
  cursor: default;
  scroll-behavior: auto;
}
.iv-pan-area.is-zoomed { cursor: grab; }
.iv-pan-area.is-dragging { cursor: grabbing; user-select: none; }
.iv-zoom-target {
  /* transform-origin 은 JS 가 동적 설정 (사장님이 보고있는 viewport 중심). */
  transition: transform 0.05s ease-out;
  display: block;
  width: 100%;
}

/* 이어보기 모드 */
.iv-merged-item {
  position: relative;
  display: block;
  /* ★2026-07-27 사장님: "1장 이어보기에 원본에 없는 여백" — 섹션마다 4px 흰 띠가 끼어
     실제 상세페이지에 없는 줄이 보였다. 이어보기 = 원본 그대로 이어붙인 모습이어야 하므로 0.
     (분할 보기는 iv-thumb 쪽이 따로 간격을 가진다 — 여기 값을 되살리지 마라.) */
  /* ★2026-07-27 2차 — 0 으로도 축소 배율에선 흐려진 가장자리가 실금으로 보인다.
     `--iv-inv-scale`(= 1/zoom, applyZoom 이 갱신)으로 **화면 1.5px** 만큼 겹친다. */
  margin-bottom: calc(-1.5px * var(--iv-inv-scale, 1));
  overflow: hidden;   /* 아래 img 의 음수 margin-top 이 잘리도록 */
}
/* 이어보기도 같은 이유 — 뒤 이미지의 첫 줄이 남는다(원본정리에서 실측 확정). */
/* 이어보기도 같은 원인 — 이미지 배경(--color-bg-input)이 소수점 가장자리에서 비친다. */
.iv-merged-item img { background: transparent; }
.iv-merged-item img {
  width: 100%;
  /* ★사장님 2026-07-23: 확대 모달이 codex 790px 원본을 컨테이너 폭(최대 1280)으로 늘려 "되게 크게"
     보이던 것 → 마켓 상세폭(스토어 860)보다 크게 upscale 안 함. 이하면 원본폭 그대로(선명). 가운데 정렬. */
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  display: block;
  background: var(--color-bg-input);
}
.iv-merged-group-label {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  background: rgba(15, 23, 42, 0.78);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
}

/* 분할 보기 모드 */
.iv-split-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.iv-split-main .iv-pan-area {
  flex: 1;
  background: var(--color-bg-input);
}
.iv-main-img {
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  display: block;
}
.iv-split-group-label {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: rgba(15, 23, 42, 0.78);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  z-index: 2;
}
/* 사장님 룰 (2026-05-04): 분할보기 prev/next 는 이미지 좌우 가운데 화살표 오버레이 + 쪽수는 상단 */
.iv-split-pan { position: relative; }
.iv-split-counter-top {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  background: rgba(15, 23, 42, 0.85);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.iv-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.6);
  color: var(--color-text-inverse);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  user-select: none;
}
.iv-nav-arrow:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.85);
  transform: translateY(-50%) scale(1.08);
}
.iv-nav-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.iv-nav-arrow-prev { left: var(--space-3); }
.iv-nav-arrow-next { right: var(--space-3); }
.iv-split-strip {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  overflow-x: auto;
  flex-wrap: nowrap;
}
.iv-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-input);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.iv-thumb.active {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.iv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.iv-thumb-num {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(15, 23, 42, 0.78);
  color: var(--color-text-inverse);
  font-size: 10px;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-bold);
}

.iv-help {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.iv-help small { font-size: var(--text-xs); }

/* 사장님 룰 (2026-05-04): 테마 토글 — 흰배경 디폴트 + 검은배경 전환 */
.iv-theme-btn {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-base);
  cursor: pointer;
  line-height: 1;
}
.iv-theme-btn:hover { background: var(--color-bg-input); }
.iv-shell[data-theme="light"] .iv-pan-area,
.iv-shell[data-theme="light"] .iv-split-main .iv-pan-area {
  /* 2026-06-14: 밝은 배경 = 흰색 복원 (밝은/어두운 토글 동작 부활). */
  background: var(--color-bg-card);
}
.iv-shell[data-theme="light"] .iv-merged-item img,
.iv-shell[data-theme="light"] .iv-main-img {
  background: var(--color-bg-card);
}
.iv-shell[data-theme="dark"] .iv-pan-area,
.iv-shell[data-theme="dark"] .iv-split-main .iv-pan-area {
  background: var(--color-viewer-canvas-dark);
}
.iv-shell[data-theme="dark"] .iv-merged-item img,
.iv-shell[data-theme="dark"] .iv-main-img {
  background: var(--color-viewer-canvas-dark);
}