/* =========================================================
 * slideshow.css (FINAL / CLEAN)
 * - slideshow_view.php 전용
 * - PC: max-width 1200 고정
 * - Mobile/Tablet: 좌우 여백 최소 + video full
 * - Title: line-height 24px
 * - 하단 버튼: 톤다운 + 모바일 자동숨김(탭 시 표시)
 * ========================================================= */

.page-slideshow .sl-wrap{
  max-width: 1200px;          /* ✅ PC 폭 고정 */
  margin: 0 auto;
  padding: 18px 16px 26px;
}

/* 카드 기본(전역 card가 있으면 그대로 사용) */
.page-slideshow .sl-card{
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
}

/* -----------------------------
 * 헤더(제목 영역) 높이 줄이기
 * ----------------------------- */
.page-slideshow .sl-hero{
  padding: 14px 16px;
}

.page-slideshow .sl-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-slideshow .sl-titlebox{ flex: 1 1 420px; min-width: 240px; }

.page-slideshow .sl-title{
  margin: 0;
  font-size: 22px;            /* ✅ 글씨 크기 다운 */
  line-height: 24px;          /* ✅ “hight:24px” 요구는 line-height로 해결 */
  font-weight: 900;
  letter-spacing: -0.2px;
  color: #0f172a;
}

.page-slideshow .sl-sub{
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: rgba(15,23,42,.55);
}

.page-slideshow .sl-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
  flex: 0 1 auto;
}

/* 버튼(재사용) */
.page-slideshow .tbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  color: #0f172a;
  text-decoration:none;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.page-slideshow .tbtn:hover{ background:#f8fafc; }
.page-slideshow .tbtn:active{ transform: translateY(1px); }

.page-slideshow .tbtn.primary{
  background:#eff6ff;
  border-color: rgba(37,99,235,.18);
  color:#1d4ed8;
}
.page-slideshow .tbtn.primary:hover{ background:#e0efff; }

/* -----------------------------
 * 비디오 카드
 * ----------------------------- */
.page-slideshow .sl-video-card{
  padding: 12px;
}

.page-slideshow .sl-video{
  width: 100%;
  display:block;
  border-radius: 14px;
  background: #0b1220;
}

/* 하단 버튼 3개 영역 */
.page-slideshow .sl-bottom-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

/* ✅ 톤 다운(너가 제안한 느낌을 “비디오 페이지 버튼”에 적용) */
.page-slideshow .sl-bottom-actions .tbtn{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
  color: rgba(15,23,42,.78);
}
.page-slideshow .sl-bottom-actions .tbtn:hover{
  background: rgba(15,23,42,.10);
  color: rgba(15,23,42,.92);
}

/* -----------------------------
 * 모바일/태블릿: 여백 최소 + 꽉 차게
 * ----------------------------- */
@media (max-width: 980px){
  .page-slideshow .sl-wrap{
    max-width: 100%;
    padding: 14px 12px 22px;  /* ✅ 좌우 여백 줄임 */
  }
  .page-slideshow .sl-hero{ padding: 12px 14px; }
}

/* 모바일: 액션 버튼 2개 오른쪽 정렬 유지 + 줄바꿈 */
@media (max-width: 640px){
  .page-slideshow .sl-actions{
    width:100%;
    justify-content:flex-end;
  }
  .page-slideshow .sl-video-card{ padding: 10px; }
  .page-slideshow .sl-video{ border-radius: 12px; }
}

/* -----------------------------
 * 모바일에서 하단 버튼 자동 숨김/탭 시 표시
 * - 영상 영역을 한 번 탭하면 버튼 토글
 * ----------------------------- */
@media (hover:none) and (pointer:coarse){
  .page-slideshow .sl-bottom-actions{
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .page-slideshow .sl-bottom-actions.is-on{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.page-slideshow .sl-video{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;   /* cover 금지: 크롭 방지 */
  background: #000;      /* 레터박스 검정 */
}

/* 모바일 탈출 버튼 */
.sl-exit{
  position: fixed;
  left: 14px;
  bottom: 14px;              /* 원하면 top:14px로 바꿔도 됨 */
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  font-weight: 700;
  text-decoration: none;
  color: #0f172a;
}
@media (min-width: 900px){
  .sl-exit{ display:none; }
}


/* ===== 슬라이드쇼 닫기 버튼 ===== */
.sl-exit{
  position: fixed;
  left: 18px;
  bottom: 20px;
  z-index: 9999;

  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: .2s;
}

.sl-exit:hover{
  background: rgba(0,0,0,.85);
}

/* iOS 전체화면 방지 */
.page-slideshow video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

/* iOS Safari: safe-area + dvh 보정 */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

/* 기존 .slv.is-zoom 를 이걸로 교체(또는 아래 속성만 덮어쓰기) */
.slv.is-zoom{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.92);

  /* ✅ iOS 상/하단 안전영역 고려 */
  padding-top: calc(16px + var(--safe-top));
  padding-bottom: calc(16px + var(--safe-bot));
  padding-left: 16px;
  padding-right: 16px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ iOS에서 vh 대신 dvh 우선 (주소창/툴바 변화에도 안정) */
.slv.is-zoom .sl-video{
  width: min(100%, 980px);
  height: auto;

  /* 핵심: 화면 높이 제한을 dvh 기준으로 */
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bot) - 32px);

  border-radius: 12px;
}

/* dvh 미지원 브라우저 대비(대부분 iOS 16+는 dvh OK) */
@supports not (height: 100dvh){
  .slv.is-zoom .sl-video{
    max-height: calc(100vh - var(--safe-top) - var(--safe-bot) - 32px);
  }
}

/* 선택: 세로 영상 더 크게 보이게(너비 우선) */
.slv.is-zoom .sl-video{
  width: min(100vw, 560px); /* 세로영상은 폭을 살짝 키우면 체감이 좋아짐 */
}
@media (min-width: 420px){
  .slv.is-zoom .sl-video{
    width: min(100vw, 680px);
  }
}