/* =====================================================================
   영상(쇼츠·릴스) + 공간 연출(데스크 스타일링) — 2026-10-11 신설(W2 담당)
    · lib/media.php 의 shop_videos_rail()/shop_look_section()/media_detail_video_block() 가
      이 파일을 <link> 로 1회 포함한다(함수가 직접 echo). shop.css 의 :root 변수(--pt 등)를 그대로 쓴다.
    · 클래스명은 디자인개선안 mockup_main.html(.shorts/.sh/.look 등) · mockup_detail.html(.video) 과 동일하게
      맞춰 시안과 실제 화면이 1:1로 보이게 했다.
   ===================================================================== */

/* ---- 9. 숏폼(쇼츠·릴스) 레일 — mockup_main.html .shorts/.sh 동일 ---- */
.media-shorts-sec .sec-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.media-shorts-sec .sec-h h2 em { color: var(--pt); font-style: normal; }
.media-shorts-sec .sec-h p { margin: 4px 0 0; color: var(--sub); font-size: 13.5px; }
.media-shorts-sec .more { font-size: 13px; color: var(--sub); white-space: nowrap; }
.shorts.media-shorts {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 14px) / 6);
  gap: 14px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px;
  /* 레일 공용 가로 스크롤 개선(2026-10-12 대표님 지시) — 카드 단위 snap. PC 이전/다음 버튼·스크롤바
     숨김은 assets/rail.js 가 주입하는 .rail-nav/.rail-btn(스타일은 main.css, shop.php #new .rail 과
     공용) 이 처리하고, 여기는 이 레일만의 snap·PC 스크롤바 숨김을 추가한다. */
  scroll-snap-type: x mandatory;
}
.sh.media-video-card {
  position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden;
  background: #000; border: 0; padding: 0; cursor: pointer; display: block; width: 100%;
  scroll-snap-align: start;
}
.sh.media-video-card img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .4s; }
.sh.media-video-card:hover img { transform: scale(1.06); }
.sh.media-video-card .media-noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--line), var(--bg-soft, #faf9f6)); }
.sh.media-video-card .play {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--pt);
}
.sh.media-video-card .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 12px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; font-size: 12.5px; line-height: 1.4;
  text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- 7. 공간 연출(데스크 스타일링) — mockup_main.html .look 동일 ---- */
.media-look-sec .look { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: center; }
.look-img.media-look-img { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-soft, #faf9f6) center / cover; }
.pin.media-pin {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: rgba(255,255,255,.95); border: 0; box-shadow: 0 0 0 6px rgba(255,255,255,.35);
  font-weight: 800; color: var(--pt); cursor: pointer; animation: media-pulse 2s infinite;
}
@keyframes media-pulse { 50% { box-shadow: 0 0 0 12px rgba(255,255,255,.12); } }
.pop.media-pop {
  position: absolute; z-index: 4; background: #fff; border-radius: 12px; padding: 10px; display: none;
  gap: 10px; align-items: center; width: 240px; max-width: 80%; box-shadow: 0 12px 30px rgba(0,0,0,.18);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.pop.media-pop.on { display: flex; }
.pop.media-pop img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.pop.media-pop b { font-size: 13px; display: block; line-height: 1.35; }
/* 핀 팝업 가격(2026-10-12 대표님 지적 — mockup_main.html .pop 처럼 이름 아래 가격 표시) */
.pop.media-pop .price { font-size: 13px; font-weight: 800; color: var(--pt); display: block; margin: 2px 0 6px; }
.pop.media-pop a { font-size: 12px; color: var(--pt); font-weight: 700; }
.media-look-sec .look-copy .eyebrow { color: var(--pt); font-weight: 700; font-size: 13px; letter-spacing: .12em; }
.media-look-sec .look-copy h2 { font-size: 28px; margin: 10px 0 14px; line-height: 1.3; letter-spacing: -.02em; }
.media-look-sec .look-copy p { color: #555; font-size: 15px; line-height: 1.75; margin: 0 0 16px; }
.look-list { display: grid; gap: 10px; }
.look-list a { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.look-list a:hover { border-color: var(--pt); }
.look-list img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; }
/* 상품명+가격 세로 배치(2026-10-12 대표님 지적 — mockup_main.html .look-list 처럼 이름 아래 굵은 가격 표시) */
.look-list .info { display: flex; flex-direction: column; gap: 4px; }
.look-list .nm { font-size: 13.5px; }
.look-list .price { font-size: 14px; font-weight: 800; color: var(--pt); }

/* ---- 4. 상세 상단 영상 — mockup_detail.html .video 동일 ---- */
.video.media-detail-video {
  display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center;
  background: var(--bg-soft, #faf9f6); border-radius: 18px; padding: 20px; margin-bottom: 28px;
}
.video.media-detail-video .v.media-video-card {
  aspect-ratio: 9 / 16; border-radius: 14px; background: #000 center / cover; position: relative;
  cursor: pointer; border: 0; padding: 0;
}
.video.media-detail-video .v.media-video-card::after {
  content: '▶'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--pt);
}
.video.media-detail-video b { font-size: 17px; }
.video.media-detail-video p { color: #555; line-height: 1.7; margin: 6px 0; }
.media-detail-views { color: var(--sub); font-size: 13px; }

/* ---- 모달 영상 플레이어(media.js 가 동적으로 생성) ---- */
.media-modal-back {
  position: fixed; inset: 0; z-index: 9000; background: rgba(10,12,20,.82);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.media-modal-back[hidden] { display: none; }
.media-modal { position: relative; width: 100%; max-width: 420px; }
.media-modal-frame-wrap {
  position: relative; width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.media-modal-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-modal-close {
  position: absolute; right: -6px; top: -42px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.95); border: 0; font-size: 16px; cursor: pointer; color: var(--ink, #1c1c22);
}
.media-modal-title { color: #fff; font-size: 13px; margin-top: 10px; text-align: center; opacity: .85; }

/* PC 에서는 레일 스크롤바를 숨긴다(2026-10-12 대표님 지시) — 모바일은 네이티브 스와이프 그대로 두므로
   이 쿼리 밖에서는 손대지 않는다. 버튼(.rail-btn)은 assets/main.css 공용 스타일을 그대로 쓴다. */
@media (hover:hover) and (pointer:fine) {
  .shorts.media-shorts { scrollbar-width: none; }
  .shorts.media-shorts::-webkit-scrollbar { display: none; }
}

/* ---- 반응형 ---- */
@media (max-width: 1024px) {
  .shorts.media-shorts { grid-auto-columns: calc((100% - 3 * 14px) / 4); }
  .media-look-sec .look { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .shorts.media-shorts { grid-auto-columns: 40%; }
  .video.media-detail-video { grid-template-columns: 120px 1fr; padding: 14px; gap: 14px; }
  .media-look-sec .look-copy h2 { font-size: 22px; }
}