@charset "UTF-8";

/* ==========================================================================
   EL Media (.media-section)
   ========================================================================== */
.media-section {padding: 14rem 0; background: #f8f8f6;}

/* 타이틀 + 설명 + 탭 */
.media-header {width: 100%;display: flex;align-items: flex-start;justify-content: space-between;gap: 2rem;}
.media-header__text {width: max-content;}
.media-section .swiper {margin: unset; width: max-content;}
/* 큰 영상 + 리스트 그리드 */
.media-grid {width: 100%;margin: 3.3rem auto 0;display: grid;grid-template-columns: 3fr 2fr;gap: 5rem;}
.media-featured {display: block;}
.media-featured__thumb {position: relative;display: block;aspect-ratio: 16 / 9;overflow: hidden;}
.media-featured__img {width: 100%;height: 100%;object-fit: cover;}
.media-featured__play {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
/* 모바일: 타입/제목 노출 */
.media-featured__body {display: none;}

/* 치료후기 대표 후기 카드: 캡션을 사진 위에 오버레이 + 하단 그라데이션 */
.media-featured--testimonial {position: relative;}
.media-featured--testimonial .media-featured__thumb::after {content: '';position: absolute;inset: 0;z-index: 1;background: linear-gradient(to top, #2d808b 0%, #2d808b 20%, transparent 85%);pointer-events: none;}
.media-featured--testimonial .media-featured__play {z-index: 2;}
.media-featured--testimonial .media-featured__body {display: flex;flex-direction: column;gap: 0.4rem;position: absolute;left: 0;right: 0;bottom: 0;z-index: 2;padding: 3rem 4rem;margin-top: 0;}
.media-featured--testimonial .media-featured__body .media-list__type,
.media-featured--testimonial .media-featured__body .media-list__title {color: var(--white);}
.media-list {display: flex;flex-direction: column;max-height: 47rem;overflow-y: auto;scrollbar-width: thin;scrollbar-color: #bfbfbf var(--white);}
/* PC만 스크롤 허용 — 목록 높이는 왼쪽 큰 영상(16:9) 높이에 맞춤 (contain: size 로 목록은 행 높이에 영향 없이 늘어나기만) */
@media (min-width: 1025px) {
  .media-list {max-height: none; contain: size;}
}

.media-list::-webkit-scrollbar {width: 0.4rem;}
.media-list::-webkit-scrollbar-track {background: var(--white);}
.media-list::-webkit-scrollbar-thumb {background: #bfbfbf;border-radius: 10rem;}
.media-list__item {border-bottom: 1px solid rgb(188 183 180 / 0.6); padding: 1.6rem 0;}
.media-list__item:first-child {border-top: 1px solid rgb(188 183 180 / 0.6);}
.media-list__link {display: flex;align-items: center;gap: 1.6rem;}
.media-list__thumb {position: relative;flex: none;width: 21.9rem;aspect-ratio: 16 / 9;overflow: hidden;}
.media-list__thumb img {width: 100%;height: 100%;object-fit: cover;}
.media-list__play {position: absolute;inset: 0;margin: auto;}
.media-list__body {display: flex;flex-direction: column;gap: 0.4rem;}
.media-list__type {font-size: 1.5rem;font-weight: 500;color: var(--color-primary);}
.media-list__title {font-size: 1.6rem;font-weight: 700;line-height: 1.5;color: #616161;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.media-section .btn-wrap {display: flex; justify-content: center; margin-top: 3.3rem;}

/* Shorts 탭 — 세로(9:16) 썸네일 5개 한 줄 (Youtube 탭은 위 .media-grid 그대로) */
.media-shorts {margin-top: 3.3rem;}
.media-section [role="tabpanel"][hidden] {display: none;} /* .media-grid 의 display:grid 가 hidden 을 이기지 않게 */
.media-shorts__list {display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 2.8rem) / 5); gap: 2.8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #bfbfbf transparent;} /* 한 화면 5개, 더 있으면 가로 스크롤 */
.media-shorts__list:has(> :nth-child(6)) {padding-bottom: 1.6rem;} /* 스크롤바 자리 */
.media-shorts__list::-webkit-scrollbar {height: 0.4rem;}
.media-shorts__list::-webkit-scrollbar-thumb {background: #bfbfbf; border-radius: 10rem;}
.media-shorts__item {scroll-snap-align: start;}
.media-shorts__link {position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: #000;}
.media-shorts__img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;}
.media-shorts__link:hover .media-shorts__img {transform: scale(1.04);}
.media-shorts__controls {display: none;} /* 768 이하 스와이퍼에서만 */
/* 스와이퍼(media-section.js, 항상): 위 grid 는 스크립트 전 기본 배치. 한 화면 5장, 더 있으면 넘김 */
.media-shorts__viewport.swiper {width: 100%;}
.media-shorts__list.swiper-wrapper {display: flex; gap: 0; padding: 0; overflow: visible; scroll-snap-type: none;}
.media-shorts__list.swiper-wrapper:has(> :nth-child(6)) {padding-bottom: 0;}
.media-shorts__item.swiper-slide {width: calc((100% - 4 * 2.8rem) / 5);}

@media (max-width: 1024px) {
  .media-section .container {padding: 0;}
  .media-header {flex-direction: column; padding: 0 4rem;}
  .media-header__text {width: 100%; text-align: center;}
  .media-section .swiper {width: 100%;}
  .media-grid {grid-template-columns: 1fr;}

  .media-featured__body {padding: 0 4rem; display: flex;flex-direction: column;gap: 0.4rem;margin-top: 3rem;}
  .media-featured__body .media-list__type {font-size: 1.9rem;}
  .media-featured__body .media-list__title {font-size: 2.2rem;}
  .media-featured--testimonial .media-featured__body {padding: 2rem 4rem;margin-top: 0;}
  .media-list {overflow-y: hidden;}
  .media-list,
  .media-section .btn-wrap {padding: 0 4rem;}
  .media-list li:nth-child(n+4) {display: none;}
  /* Shorts: 가로로 넘겨 보기 */
  .media-shorts__list {grid-auto-columns: 28%; gap: 2rem; padding: 0 4rem; scroll-padding: 0 4rem; scrollbar-width: none;}
  .media-shorts__list:has(> :nth-child(6)) {padding-bottom: 0;}
  .media-shorts__list::-webkit-scrollbar {display: none;}
  .media-shorts__item.swiper-slide {width: 28%;}
}

@media (max-width: 768px) {
  .media-section {padding: clamp(6.5rem, 16.93vw, 13rem) 0;}
  .media-grid {margin-top: clamp(2.5rem, 6.51vw, 5rem); gap: clamp(2.5rem, 6.51vw, 5rem);}
  .media-featured__body {padding: 0 clamp(2rem, 5.21vw, 4rem); margin-top: clamp(1.5rem, 3.91vw, 3rem); gap: clamp(0.2rem, 0.52vw, 0.4rem);}
  .media-featured__body .media-list__type {font-size: clamp(1.2rem, 3.13vw, 2.4rem);}
  .media-featured__body .media-list__title {font-size: clamp(1.6rem, 4.17vw, 3.2rem); font-weight: 600;}
  .media-featured--testimonial .media-featured__body {padding: clamp(1.5rem, 3.91vw, 3rem) clamp(2rem, 5.21vw, 4rem);margin-top: 0;}
  .media-list {max-height: clamp(34.5rem, 89.84vw, 69rem);}
  .media-list, .media-section .btn-wrap {padding: 0 clamp(2rem, 5.21vw, 4rem);}
  .media-list__item {padding: clamp(1.5rem, 3.91vw, 3rem) 0;}
  .media-list__thumb{width: clamp(14rem, 38.8vw, 29.8rem);}
  .media-list__link {gap: clamp(2rem, 5.21vw, 4rem);}
  .media-list__body {gap: clamp(0.2rem, 0.52vw, 0.4rem);}
  .media-list__type {font-size: clamp(1.2rem, 3.2vw, 2rem);}
  .media-list__title {font-size: clamp(1.4rem, 3.7vw, 2.6rem); font-weight: 500;}
  .media-section .btn-wrap {margin-top: clamp(1.5rem, 3.91vw, 3rem);}
  .media-shorts {margin-top: clamp(2.5rem, 6.51vw, 5rem);}
  /* Shorts 스와이퍼 (media-section.js 가 .swiper 를 붙인 뒤): 가운데 1장 + 양옆 살짝, 아래 1/N 넘김 */
  .media-shorts__item.swiper-slide {width: 55%;}
  .media-shorts__controls {display: flex; margin: clamp(2rem, 5.21vw, 4rem) auto 0;}
}