/* ============================================================
   VisionCore · 09 Swiper — image detail viewer
   
   The full-bleed image viewer with right-side inspector panels.
   Original markup in index.html is preserved; this just polishes
   colors, spacing, and typography to match the new system.
   ============================================================ */

/* ---------- Modal shell ---------- */
.swiper-modal {
  background: #050505 !important;
  z-index: var(--vc-z-modal) !important;
}

/* immersive-mode hides chrome on click */
.swiper-modal.immersive-mode .swiper-sidebar,
.swiper-modal.immersive-mode .swiper-footer,
.swiper-modal.immersive-mode #related-images-container {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Close button (top-left) ---------- */
.swiper-close {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(20,20,20,.7) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: var(--vc-ink) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 3010;
  transition: var(--vc-fast) !important;
}
.swiper-close:hover {
  background: rgba(40,40,40,.85) !important;
}

/* ---------- Prev / next nav ---------- */
.swiper-nav {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(20,20,20,.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--vc-ink) !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--vc-fast) !important;
}
.swiper-nav:hover {
  background: rgba(40,40,40,.85) !important;
}
.swiper-track {
  transition: transform 280ms cubic-bezier(.22, .9, .2, 1) !important;
  will-change: transform !important;
}

/* ---------- Right inspector — common card ---------- */
.swiper-sidebar {
  background: rgba(8,8,8,.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-left: 1px solid var(--vc-line) !important;
}

.swiper-side-card {
  background: var(--vc-raise) !important;
  border: 1px solid var(--vc-line) !important;
  border-radius: var(--vc-r-md) !important;
  padding: 14px 16px !important;
  margin-bottom: 10px;
}
.swiper-side-title {
  font-family: var(--vc-font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--vc-ink-3) !important;
  margin: 0 0 10px !important;
}

/* meta content (key:value rows generated by JS) */
.swiper-meta-content,
#mobile-swiper-meta-content {
  font-family: var(--vc-font-sans) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--vc-ink-2) !important;
}
.swiper-meta-content > * + * { margin-top: 6px; }
.swiper-meta-content strong,
.swiper-meta-content b {
  font-weight: 600;
  color: var(--vc-ink);
}
/* JS often renders k: v pairs as inline-block — give them mono treatment */
.swiper-meta-content code,
.swiper-meta-content .meta-value,
.swiper-meta-content .meta-key {
  font-family: var(--vc-font-mono) !important;
  font-size: 11.5px !important;
  color: var(--vc-ink-2) !important;
}

.media-diagnostic-card {
  margin-top: 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--vc-r-md) !important;
  background: rgba(255,255,255,.045) !important;
}
.media-diagnostic-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
}
.media-diagnostic-head strong {
  color: var(--vc-ink) !important;
  font-size: 12px !important;
}
.media-diagnostic-head span {
  color: var(--vc-ink-4) !important;
  font-family: var(--vc-font-mono) !important;
  font-size: 10.5px !important;
  word-break: break-all !important;
}
.media-diagnostic-row {
  padding: 9px 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.media-diagnostic-row-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 5px !important;
}
.media-diagnostic-row-head strong {
  color: var(--vc-ink) !important;
  font-size: 11.5px !important;
}
.media-diagnostic-row-head span {
  color: var(--vc-ink-4) !important;
  font-family: var(--vc-font-mono) !important;
  font-size: 10.5px !important;
  text-align: right !important;
}
.media-diagnostic-row[data-state="ok"] .media-diagnostic-row-head span {
  color: var(--vc-success-soft) !important;
}
.media-diagnostic-row[data-state="missing"] .media-diagnostic-row-head span {
  color: var(--vc-danger-soft) !important;
}
.media-diagnostic-row code,
.media-diagnostic-storage code {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  color: var(--vc-ink-3) !important;
}
.media-diagnostic-storage {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 5px 8px !important;
  margin-top: 8px !important;
  padding-top: 9px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  font-family: var(--vc-font-mono) !important;
  font-size: 10.5px !important;
}
.media-diagnostic-storage span {
  color: var(--vc-ink-4) !important;
}
.media-diagnostic-notice {
  padding: 10px !important;
  border-radius: var(--vc-r-md) !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--vc-ink-3) !important;
}

/* ---------- Review chip row ---------- */
.review-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.review-chip {
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  padding: 0 10px !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--vc-ink-2) !important;
  border: 1px solid var(--vc-line) !important;
  border-radius: var(--vc-r-pill) !important;
  font-family: var(--vc-font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  transition: var(--vc-fast) !important;
  white-space: nowrap !important;
}
.review-chip:hover { background: rgba(255,255,255,.07) !important; }
.review-chip.active {
  background: var(--vc-brand-bg) !important;
  border-color: var(--vc-brand-line) !important;
  color: var(--vc-brand-soft) !important;
}
/* Tone variants applied via data-tone in HTML */
.review-chip[data-tone="warn"]    { background: var(--vc-warn-bg) !important;    border-color: rgba(240,152,25,.32) !important; color: var(--vc-warn-soft) !important; }
.review-chip[data-tone="danger"]  { background: var(--vc-danger-bg) !important;  border-color: rgba(255,68,68,.32) !important;  color: var(--vc-danger-soft) !important; }
.review-chip[data-tone="success"] { background: var(--vc-success-bg) !important; border-color: rgba(0,230,118,.32) !important;  color: var(--vc-success-soft) !important; }

.review-summary {
  margin-top: 8px;
  font-family: var(--vc-font-mono) !important;
  font-size: 11px !important;
  color: var(--vc-ink-4) !important;
  line-height: 1.5 !important;
}

/* ---------- Retake / Lipsync inputs ---------- */
.swiper-input,
.swiper-textarea {
  width: 100% !important;
  padding: 9px 12px !important;
  background: var(--vc-bg) !important;
  border: 1px solid var(--vc-line) !important;
  border-radius: var(--vc-r-md) !important;
  color: var(--vc-ink) !important;
  font-family: var(--vc-font-sans) !important;
  font-size: 12.5px !important;
  outline: 0 !important;
}
.swiper-input:focus,
.swiper-textarea:focus {
  border-color: var(--vc-brand-line) !important;
}
.swiper-input::placeholder,
.swiper-textarea::placeholder {
  color: var(--vc-ink-4) !important;
}
.swiper-textarea-fixed { resize: none !important; }
.swiper-input-gap-sm { margin-bottom: 8px !important; }
.swiper-input-gap-md { margin-bottom: 10px !important; }

.swiper-action-btn {
  width: 100% !important;
  margin-top: 4px !important;
}
.swiper-status-line {
  font-size: 11px !important;
  color: var(--vc-ink-4) !important;
  font-family: var(--vc-font-mono) !important;
  margin-top: 8px !important;
  text-align: center !important;
}

/* ---------- Footer ---------- */
.swiper-footer {
  position: absolute !important;
  left: 0; right: 360px;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(5,5,5,.85) 40%) !important;
  border-top: 0 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 14px 24px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 5;
}
#swiper-counter {
  font-family: var(--vc-font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--vc-ink-3) !important;
  padding: 6px 12px !important;
  background: rgba(15,15,15,.7) !important;
  border: 1px solid var(--vc-line) !important;
  border-radius: var(--vc-r-pill) !important;
  backdrop-filter: blur(8px);
  margin-right: auto !important;
}
.swiper-favorite-btn { color: var(--vc-ink-2) !important; }
.swiper-delete-btn {
  border-color: rgba(255,68,68,.32) !important;
  color: var(--vc-danger-soft) !important;
}
.swiper-delete-btn:hover {
  background: var(--vc-danger-bg) !important;
  border-color: rgba(255,68,68,.55) !important;
}

/* ---------- Related sidebar ---------- */
.related-sidebar {
  background: rgba(8,8,8,.92) !important;
  backdrop-filter: blur(20px) !important;
  border-right: 1px solid var(--vc-line) !important;
  padding: 16px !important;
  width: 220px !important;
  flex: 0 0 220px !important; /* 축소 방지 및 물리적으로 완벽한 220px 고정 분리 */
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  z-index: 10 !important;
}
.related-sidebar-header {
  font-family: var(--vc-font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--vc-ink-3) !important;
  margin-bottom: 12px !important;
  flex: 0 0 auto !important;
}
.related-sidebar-carousel {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}
.related-thumb {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important; /* 종횡비 선언으로 이미지 로드 전 덜덜거림 완벽 소멸! */
  object-fit: cover !important;
  border-radius: var(--vc-r-md, 8px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  cursor: pointer !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, box-shadow 0.25s !important;
}
.related-thumb:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: rgba(164,97,255,0.5) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4) !important;
}
.related-thumb.active {
  border-color: var(--vc-brand,#a461ff) !important;
  box-shadow: 0 0 0 2px var(--vc-brand,#a461ff) !important;
}

/* tag overlay (in-image) */
.swiper-tag-overlay {
  position: absolute !important;
  left: 16px !important;
  bottom: 80px !important;
  z-index: 3;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: calc(100% - 380px) !important;
}

/* ---------- Mobile sheet (bottom-up) ---------- */
.mobile-swiper-sheet {
  background: rgba(8,8,8,.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1px solid var(--vc-line) !important;
  border-radius: 18px 18px 0 0 !important;
}
.mobile-swiper-sheet-handle {
  background: rgba(255,255,255,.18) !important;
}
.mobile-swiper-sheet-head strong {
  font-family: var(--vc-font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
}

/* ---------- Related lightbox ---------- */
.related-lightbox {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 4000 !important;
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(2px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}
.related-lightbox-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 30px !important;
  right: 30px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: background .2s, transform .2s !important;
  z-index: 4100 !important;
}
.related-lightbox-close:hover {
  background: rgba(255, 42, 95, 0.8) !important;
  border-color: rgba(255, 42, 95, 0.9) !important;
  transform: scale(1.05) !important;
}
.related-lightbox-hint {
  font-family: var(--vc-font-mono) !important;
  font-size: 11px !important;
  color: var(--vc-ink-4) !important;
  letter-spacing: .04em !important;
}