/**
 * Joyn Player v3.0.0 CSS
 * 
 * 핵심 원칙: 외부 컨테이너 크기 상속, DOM 조작 최소화
 * 반응형 가이드 적용: clamp() 함수와 CSS 변수로 자동 반응형 구현
 */

/* ============================================
   자동 반응형 CSS 변수 (토큰 시스템)
   ============================================ */
:root {
  /* 자동 반응형 Spacing */
  --joyn-space-xs: clamp(0.25rem, 1.5vw, 0.75rem);
  --joyn-space-sm: clamp(0.5rem, 2.5vw, 1.25rem);
  --joyn-space-md: clamp(1rem, 4vw, 2.5rem);
  --joyn-space-lg: clamp(1.5rem, 6vw, 4rem);
  
  /* 자동 반응형 Typography */
  --joyn-text-sm: clamp(0.875rem, 2.5vw, 1rem);
  --joyn-text-base: clamp(1rem, 3.5vw, 1.25rem);
  --joyn-text-lg: clamp(1.125rem, 4vw, 1.5rem);
  
  /* 자동 반응형 Overlay */
  --joyn-overlay-btn-size: clamp(60px, 12vw, 80px);
  --joyn-overlay-icon-size: clamp(30px, 6vw, 40px);
  --joyn-overlay-text-size: clamp(0.875rem, 2.5vw, 1rem);
  
  /* 자동 반응형 Shorts */
  --joyn-shorts-max-width: clamp(280px, 85vw, 416px);
  --joyn-shorts-max-height: clamp(75vh, 80vh, 80vh);
}

/* ============================================
   기본 컨테이너 스타일
   ============================================ */

/* 
 * joyn-player-wrapper: 플레이어 래퍼
 * - 단독 사용 시: padding-bottom으로 16:9 비율 유지
 * - 외부 컨테이너 안에서: 부모 크기 100% 채움
 */
.joyn-player-wrapper {
    position: relative;
    width: 100%;
}

/* 
 * joyn-player-container: iframe이 들어가는 컨테이너
 * - position: relative 필수 (iframe이 absolute로 배치됨)
 */
.joyn-player-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
    background: #000;
}

/* iframe 기본 스타일 */
.joyn-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================
   외부 컨테이너에 포함된 경우
   (simple-tv-player 등 absolute 컨테이너 안에서)
   ============================================ */

/* 부모가 absolute로 크기를 주는 경우 */
.simple-tv-player .joyn-player-wrapper,
[style*="position: absolute"] > .joyn-player-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.simple-tv-player .joyn-player-container,
[style*="position: absolute"] > .joyn-player-wrapper > .joyn-player-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 0; /* 비율 유지 비활성화 */
}

/* ============================================
   오버레이 스타일 (iOS/PWA 사용자 상호작용)
   ============================================ */
.joyn-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.joyn-overlay-btn {
    width: var(--joyn-overlay-btn-size);
    height: var(--joyn-overlay-btn-size);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--joyn-space-sm);
    transition: transform 0.2s, background 0.2s;
}

.joyn-overlay:hover .joyn-overlay-btn,
.joyn-overlay:active .joyn-overlay-btn {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.joyn-overlay-btn svg {
    width: var(--joyn-overlay-icon-size);
    height: var(--joyn-overlay-icon-size);
    margin-left: clamp(2px, 0.5vw, 4px); /* 재생 아이콘 시각적 보정 */
}

.joyn-overlay-text {
    color: #fff;
    font-size: var(--joyn-overlay-text-size);
    font-weight: 500;
}

/* ============================================
   에러 메시지
   ============================================ */
.joyn-player-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--joyn-space-lg) var(--joyn-space-md);
    background: #f5f5f5;
    border-radius: clamp(0.5rem, 2vw, 0.5rem);
    text-align: center;
}

.joyn-player-error p {
    margin: 0;
    color: #666;
    font-size: var(--joyn-text-sm);
}

/* ============================================
   숏츠 모드 (세로 영상) - 재작성
   ============================================ */

/* 숏츠 영상: 9:16 비율 (세로) - 자동 반응형 크기 조정 */
.joyn-player-container.joyn-player-shorts-mode,
.joyn-player-container[data-shorts-mode="true"] {
    /* 상하 여백 제거, 좌우는 중앙 정렬을 위해 auto */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* aspect-ratio로 9:16 비율 유지 */
    aspect-ratio: 9 / 16 !important;
    /* 자동 반응형 크기 (모바일에서 데스크탑까지 자연스럽게) */
    max-width: var(--joyn-shorts-max-width) !important;
    max-height: var(--joyn-shorts-max-height) !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    /* 빈공간 완전 제거 */
    line-height: 0;
    font-size: 0;
}

/* 구형 브라우저 지원을 위한 padding-bottom (aspect-ratio 미지원 시) */
@supports not (aspect-ratio: 9 / 16) {
    .joyn-player-container.joyn-player-shorts-mode,
    .joyn-player-container[data-shorts-mode="true"] {
        padding-bottom: 177.78% !important; /* 16/9 * 100 = 177.78% */
        height: 0 !important;
    }
}

/* aspect-ratio 지원 시 padding-bottom 완전히 제거 */
@supports (aspect-ratio: 9 / 16) {
    .joyn-player-container.joyn-player-shorts-mode,
    .joyn-player-container[data-shorts-mode="true"] {
        padding-bottom: 0 !important;
        height: auto !important;
    }
}

/* 숏츠 모드 iframe - 재생창 전체 채우기 */
.joyn-player-container.joyn-player-shorts-mode iframe,
.joyn-player-container.joyn-player-shorts-mode video,
.joyn-player-container[data-shorts-mode="true"] iframe,
.joyn-player-container[data-shorts-mode="true"] video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* 숏츠 모드일 때 래퍼도 조정 - 중앙 정렬 */
.joyn-player-wrapper.joyn-player-shorts-mode,
.joyn-player-wrapper[data-shorts-mode="true"] {
    max-width: 100% !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important; /* 재생창과 제목 사이 빈공간 제거 */
    width: 100% !important;
    /* 빈공간 제거 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 중앙 정렬 */
    gap: 0;
}

/* 숏츠 재생 시 푸터가 재생창 밑으로 가도록 */
body.joyn-shorts-mode-active .site-footer,
body.joyn-shorts-mode-active footer,
body.joyn-shorts-mode-active .ast-footer,
body.joyn-shorts-mode-active .footer-widget-area {
    position: relative;
    z-index: 1 !important;
}

/* ============================================
   반응형 (최소한의 미디어 쿼리)
   ============================================ */
/* 
 * 가이드 원칙: clamp() 함수로 대부분의 반응형 처리
 * 미디어 쿼리는 레이아웃 구조 변경이 필요한 경우에만 사용
 */

/* 숏츠 모드에서 모든 여백과 패딩 제거 (모든 화면 크기에서 동일) */
.joyn-player-container.joyn-player-shorts-mode,
.joyn-player-container[data-shorts-mode="true"] {
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
}

@supports not (aspect-ratio: 9 / 16) {
    .joyn-player-container.joyn-player-shorts-mode,
    .joyn-player-container[data-shorts-mode="true"] {
        padding-bottom: 177.78% !important;
        height: 0 !important;
    }
}

@supports (aspect-ratio: 9 / 16) {
    .joyn-player-container.joyn-player-shorts-mode,
    .joyn-player-container[data-shorts-mode="true"] {
        padding-bottom: 0 !important;
        height: auto !important;
    }
}

/* 숏츠 재생창이 컨테이너를 완전히 채우도록 (모든 화면 크기에서 동일) */
.joyn-player-container.joyn-player-shorts-mode iframe,
.joyn-player-container.joyn-player-shorts-mode video,
.joyn-player-container[data-shorts-mode="true"] iframe,
.joyn-player-container[data-shorts-mode="true"] video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.joyn-player-wrapper.joyn-player-shorts-mode,
.joyn-player-wrapper[data-shorts-mode="true"] {
    max-width: 100% !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.joyn-player-container.joyn-player-shorts-mode,
.joyn-player-container[data-shorts-mode="true"] {
    margin-left: auto !important;
    margin-right: auto !important;
}