/* ==========================================================================
   Owl YouTube Player Widget Stylesheet
   Version: 2.3.0 (Phase 26: Future Scalability & Clipping Mask Edition)
   SSoT v14.0.0 Compliant

   [Architecture Log]
   - Theme Bleeding Lock: .owl-youtube-widget-wrapper 내부 요소 강제 초기화 및 isolation 적용.
   - Box-Tab SSoT: 코어 스펙/헤더 위젯과 100% 동일한 DOM 기하학 정렬(bottom: -1px) 적용.
   - 1em Fluid Engine: 헤더 아이콘과 텍스트가 폰트 크기에 비례하여 완벽한 비율로 동시 스케일링.
   - Zero-Iframe Facade UX: 썸네일과 HTML 럭셔리 버튼만으로 대기하며 Hover/Loading 3D 트랜지션 처리.
   - GPU Acceleration: transform: translateZ(0) 및 will-change를 활용한 60fps 부드러운 호버 모션.
   
   🚨 [Optimization 2.3.0 - Future Scalability Guard]
   - 대량 렌더링 시 브라우저 연산 스킵을 위한 `content-visibility: auto;` 도입 (0 프레임 드랍 보장).
   - 레이아웃 시프트(CLS) 방어를 위한 `contain-intrinsic-size` 수학적 근사치 동시 주입 완료.
   
   🚨 [Optimization 2.2.1 - Clipping Mask Guard]
   - 썸네일 호버 스케일링 시 발생하는 오버플로우 현상을 원천 방어하기 위해 `.yt-thumb-mask` 격리 레이어 도입.
   - 외부 섀도우 영역 보존을 위해 본체 `overflow: visible`은 유지하되, 마스크 내부만 `hidden` 처리하여 완벽한 아키텍처 양립 성공.
   - 외부 테마 간섭을 막는 썸네일 `max-width: none;` 강제 방어막 구축 완료.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [1] Base Wrapper & Isolation Reset
   -------------------------------------------------------------------------- */
.owl-youtube-widget-wrapper {
    /* [Fallbacks] PHP Elementor 컨트롤러 부재 시 작동하는 기본값 */
    --owl-text-main: #333333;
    --owl-accent: #C5A065;
    --owl-border: #e0e0e0;
    
    /* 🎯 Aspect Ratio Fallback (기본 16:9) */
    --yt-aspect-ratio: 56.25%;

    --player-radius: 12px;
    --player-border-width: 4px;
    --player-border-color: #C5A065;
    
    /* 🎯 Shadow Isolation SSoT */
    --player-shadow-inner: inset 0 0 40px rgba(0,0,0,0.6);
    --player-shadow-outer: 0 15px 40px rgba(0,0,0,0.2);
    --player-hover-lift: -5px;

    --btn-size: 80px;
    --btn-bg-normal: rgba(26, 43, 60, 0.4);
    --btn-bg-hover: #C5A065;
    --btn-border-color: #C5A065;
    --btn-icon-color: #C5A065;
    --btn-icon-color-hover: #ffffff;
    --btn-backdrop-blur: 8px;

    --badge-bg: rgba(0, 0, 0, 0.7);
    --badge-text-color: #ffffff;
    --badge-icon-color: #FF0000;
    --badge-radius: 4px;

    --fallback-bg: #e0e0e0;
    --fallback-pattern-opacity: 0.1;

    width: 100%;
    position: relative;
    box-sizing: border-box;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    color: var(--owl-text-main);
    
    /* 🎯 테마 간섭 방어 및 렌더링 최적화 스태킹 컨텍스트 생성 */
    isolation: isolate;
    transform: translateZ(0); 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* 🚀 [Turn 5 Patch] Future Scalability (대규모 렌더링 최적화) */
    content-visibility: auto;
    contain-intrinsic-size: auto 500px; /* 화면 밖 요소의 가상 높이를 부여하여 스크롤 점프(CLS) 완벽 방어 */
}

/* 외부 테마(Theme) 글로벌 CSS의 마진/패딩 침범 원천 차단 */
.owl-youtube-widget-wrapper * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   [2] Header Styles (Box-Tab Architecture SSoT)
   -------------------------------------------------------------------------- */
.owl-youtube-widget-wrapper .spec-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end; /* 탭 박스가 하단선과 맞물리도록 정렬 */
    border-bottom: 1px solid var(--owl-border);
    margin-bottom: 20px; 
}

/* 🎯 입체 탭(Tab) 아키텍처 및 SSoT Fallback 주입 */
.owl-youtube-widget-wrapper .owl-spec-tab-box {
    display: inline-flex;
    align-items: center;
    position: relative;
    bottom: -1px; /* 1px 내려서 부모의 border-bottom을 덮어 완벽한 탭 형태 완성 */
    z-index: 10;
    
    /* Box-Tab UI Fallback (코어 상세 스펙 위젯과 100% 동일한 기본값) */
    background: linear-gradient(to bottom, #ffffff, #f9fafb);
    border: 1px solid #eaecf0;
    border-bottom-color: transparent !important; 
    box-shadow: inset 0 3px 0 0 var(--owl-accent), 0 -2px 5px rgba(0,0,0,0.03);
    border-radius: 6px 6px 0 0;
    padding: 12px 16px;
}

.owl-youtube-widget-wrapper .spec-title {
    /* 1em Fluid Engine: px 대신 em 사용으로 폰트 크기 비례 자동 간격 팽창 */
    display: inline-flex;
    align-items: center;
    gap: 0.4em; 
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #1A2B3C;
}

.owl-youtube-widget-wrapper .owl-spec-tab-text {
    line-height: 1;
    padding-top: 1px; /* 수직 시각적 영점 보정 */
}

/* 🚨 [Triple Lock] 에디터 버그: 1em Fluid 아이콘 스케일링 엔진 물리 락 (찌그러짐 완벽 방어) */
.owl-youtube-widget-wrapper .spec-title i,
.owl-youtube-widget-wrapper .spec-title svg {
    display: block;
    width: 1em !important;
    height: 1em !important;
    font-size: inherit; 
    flex-shrink: 0 !important;     
    color: #FF0000; /* YouTube Identity */    
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   [3] Player Container (Shadow DOM Isolation & Hover Physics)
   -------------------------------------------------------------------------- */
.owl-youtube-widget-wrapper .owl-player-widget {
    width: 100%;
    /* max-width는 PHP 컨트롤(player_max_width)에서 주입 */
    position: relative;
}

.owl-youtube-widget-wrapper .owl-yt-wrapper {
    position: relative;
    width: 100%;
    
    /* 🎯 동적 화면비 변수 바인딩 */
    padding-bottom: var(--yt-aspect-ratio, 56.25%); 
    
    background-color: #000000;
    
    border-style: solid;
    border-width: var(--player-border-width, 4px);
    border-color: var(--player-border-color, #C5A065);
    border-radius: var(--player-radius, 12px);
    
    /* 🚨 Shadow DOM Isolation 
       overflow: hidden 해제. 아우터 섀도우(::after)가 바깥으로 뻗어나갈 수 있도록 격리 개방 */
    overflow: visible;
    
    /* 엘리멘터 제어권 격리를 위해 본체 Box-Shadow 삭제 (가상요소로 위임) */
    box-shadow: none; 
    
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
    
    /* GPU 하드웨어 가속 렌더링 */
    transform: translateZ(0); 
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    
    outline: none; /* 마우스 클릭 기본 아웃라인 제거 */
}

/* 🎯 Inner Shadow Isolation
   엘리멘터의 Box-Shadow 덮어쓰기 파괴로부터 시네마틱 이너 섀도우를 완벽히 지키는 수호 레이어 */
.owl-youtube-widget-wrapper .owl-yt-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 안쪽 클리핑 둥글기 수학적 보정 (테두리 두께 뺌) */
    border-radius: max(0px, calc(var(--player-radius, 12px) - var(--player-border-width, 4px)));
    box-shadow: var(--player-shadow-inner) !important; /* 강력한 수호막 */
    pointer-events: none;
    z-index: 25; /* 썸네일 위, 럭셔리 버튼 밑. 비네팅(Vignetting) 효과로 영구 렌더링 */
    transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

/* 🎯 Outer Shadow Isolation
   PHP 컨트롤(player_shadow_outer)이 이 레이어를 직접 타격합니다. */
.owl-youtube-widget-wrapper .owl-yt-wrapper::after {
    content: '';
    position: absolute;
    /* 테두리 두께만큼 바깥으로 정확히 확장하여 핏을 맞춤 */
    top: calc(-1 * var(--player-border-width, 4px));
    left: calc(-1 * var(--player-border-width, 4px));
    right: calc(-1 * var(--player-border-width, 4px));
    bottom: calc(-1 * var(--player-border-width, 4px));
    border-radius: var(--player-radius, 12px);
    
    /* 엘리멘터가 주입하지 않았을 때의 코어 기본값 폴백 */
    box-shadow: var(--player-shadow-outer);
    pointer-events: none;
    z-index: -1; /* 본체 뒤로 배치하여 입체감 형성 */
    transition: box-shadow 0.3s ease, opacity 0.3s ease;
    will-change: box-shadow;
}

/* 🚨 [Turn 4 Patch] 자식 요소 둥근 테두리 클리핑 방어 (overflow 해제에 따른 삐져나옴 예방)
   기존 .yt-thumb 대신 .yt-thumb-mask로 타겟팅 완벽 치환 */
.owl-youtube-widget-wrapper .yt-thumb-mask,
.owl-youtube-widget-wrapper .owl-yt-wrapper iframe,
.owl-youtube-widget-wrapper .owl-yt-wrapper .yt-fallback-msg {
    border-radius: max(0px, calc(var(--player-radius, 12px) - var(--player-border-width, 4px)));
}

/* 🎯 웹 접근성(A11y) 기준 준수: 키보드 탭 네비게이션 명확화 */
.owl-youtube-widget-wrapper .owl-yt-wrapper:focus-visible {
    outline: 3px solid var(--player-border-color, #C5A065);
    outline-offset: 4px;
}
.owl-youtube-widget-wrapper .owl-yt-wrapper:focus-visible::after {
    box-shadow: 0 0 15px var(--player-border-color, #C5A065) !important;
}

/* 영상이 없는 Fallback 상태일 경우 호버 액션 차단 */
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-fallback-state {
    cursor: default;
    transform: none !important;
}
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-fallback-state::after {
    box-shadow: none !important; /* 빈 공간에 그림자 뜨는 오류 파기 */
}

@media (hover: hover) {
    /* 본체 호버 시 들림(Lift) 모션 발동 */
    .owl-youtube-widget-wrapper .owl-yt-wrapper:not(.is-fallback-state):not(.is-active):not(.is-loading):hover,
    .owl-youtube-widget-wrapper .owl-yt-wrapper:not(.is-fallback-state):not(.is-active):not(.is-loading):focus-visible {
        transform: translateY(var(--player-hover-lift, -5px));
    }
    
    /* 호버 시 외부 섀도우(Outer Shadow) 증폭 */
    .owl-youtube-widget-wrapper .owl-yt-wrapper:not(.is-fallback-state):not(.is-active):not(.is-loading):hover::after,
    .owl-youtube-widget-wrapper .owl-yt-wrapper:not(.is-fallback-state):not(.is-active):not(.is-loading):focus-visible::after {
        box-shadow: 0 25px 50px rgba(0,0,0,0.3) !important;
    }
}

/* 실제 Iframe이 주입되면 z-index를 올려서 클릭 이벤트 확보 */
.owl-youtube-widget-wrapper .owl-yt-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
    z-index: 50;
    background-color: #000;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    /* border-radius는 상단 클리핑 방어 영역에서 일괄 적용됨 */
    overflow: hidden;
}

.owl-youtube-widget-wrapper .owl-yt-wrapper iframe.is-ready {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   [4] 🎯 Clipping Mask & LCP Optimizer: Thumbnail 
   -------------------------------------------------------------------------- */
/* 새로 추가된 클리핑 마스크 레이어 */
.owl-youtube-widget-wrapper .yt-thumb-mask {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 1;
    overflow: hidden; /* 호버 시 팽창하는 이미지를 여기서 잘라냄 */
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari border-radius 렌더링 버그 강제 교정 */
}

/* 실제 이미지 */
.owl-youtube-widget-wrapper .yt-thumb {
    width: 100% !important; 
    height: 100% !important;
    max-width: none !important; /* 🎯 외부 테마의 이미지 왜곡(강제 리사이징) 원천 차단 방어막 */
    object-fit: cover !important;
    opacity: 0.95;
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease, filter 0.3s ease;
    pointer-events: none; /* 터치 이벤트는 wrapper가 흡수 */
    will-change: transform, opacity;
}

/* Fallback 방어망: 이미지가 없을 때의 고급스러운 CSS 패턴 */
.owl-youtube-widget-wrapper .yt-thumb-mask .yt-thumb.is-fallback,
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-fallback-state .yt-thumb-mask .yt-thumb {
    background-color: var(--fallback-bg, #e0e0e0);
    background-image: 
        linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), 
        linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: var(--fallback-pattern-opacity, 0.1);
    object-fit: contain; 
}

@media (hover: hover) {
    /* 호버 셀렉터를 .yt-thumb-mask 내부의 .yt-thumb으로 정밀 조정 */
    .owl-youtube-widget-wrapper .owl-yt-wrapper:not(.is-fallback-state):not(.is-active):not(.is-loading):hover .yt-thumb-mask .yt-thumb,
    .owl-youtube-widget-wrapper .owl-yt-wrapper:not(.is-fallback-state):not(.is-active):not(.is-loading):focus-visible .yt-thumb-mask .yt-thumb {
        transform: scale(1.05) translateZ(0); /* 🎯 GPU Anti-blur */
        opacity: 0.7; /* 버튼이 더 잘 보이도록 어둡게 디밍 */
    }
}

/* --------------------------------------------------------------------------
   [5] YouTube Identity Badge
   -------------------------------------------------------------------------- */
.owl-youtube-widget-wrapper .yt-brand-badge {
    position: absolute; 
    top: 20px; 
    left: 20px;
    display: flex; 
    align-items: center; 
    gap: 6px;
    
    background-color: var(--badge-bg, rgba(0, 0, 0, 0.7));
    padding: 6px 12px;
    border-radius: var(--badge-radius, 4px);
    
    z-index: 5;
    pointer-events: none; /* 클릭 방해 금지 */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.owl-youtube-widget-wrapper .yt-brand-icon {
    width: 24px; 
    height: 17px;
    fill: var(--badge-icon-color, #FF0000);
    flex-shrink: 0;
}

.owl-youtube-widget-wrapper .yt-brand-text {
    color: var(--badge-text-color, #ffffff);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-family: 'Roboto', sans-serif;
    line-height: 1;
    padding-top: 1px;
}

/* --------------------------------------------------------------------------
   [6] Luxury Play Button (Glassmorphism)
   -------------------------------------------------------------------------- */
.owl-youtube-widget-wrapper .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    
    width: var(--btn-size, 80px); 
    height: var(--btn-size, 80px);
    border-radius: 50%;
    
    background-color: var(--btn-bg-normal, rgba(26, 43, 60, 0.4));
    border: 2px solid var(--btn-border-color, #C5A065);
    
    /* Glassmorphism Effect */
    backdrop-filter: blur(var(--btn-backdrop-blur, 8px));
    -webkit-backdrop-filter: blur(var(--btn-backdrop-blur, 8px));
    
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    pointer-events: none;
    will-change: transform, background-color, box-shadow;
}

/* CSS 도형 조립: 삼각형(▶) */
.owl-youtube-widget-wrapper .play-icon {
    width: 0; 
    height: 0; 
    /* 버튼 크기에 비례하는 화살표 크기 (근사치 연산) */
    border-top: calc(var(--btn-size, 80px) * 0.175) solid transparent;
    border-bottom: calc(var(--btn-size, 80px) * 0.175) solid transparent;
    border-left: calc(var(--btn-size, 80px) * 0.3) solid var(--btn-icon-color, #C5A065);
    margin-left: calc(var(--btn-size, 80px) * 0.05); /* 시각적 중심 영점 조절 */
    transition: border-left-color 0.4s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

@media (hover: hover) {
    .owl-youtube-widget-wrapper .owl-yt-wrapper:not(.is-fallback-state):not(.is-active):not(.is-loading):hover .play-btn,
    .owl-youtube-widget-wrapper .owl-yt-wrapper:not(.is-fallback-state):not(.is-active):not(.is-loading):focus-visible .play-btn {
        width: calc(var(--btn-size, 80px) * 1.15); 
        height: calc(var(--btn-size, 80px) * 1.15);
        background-color: var(--btn-bg-hover, #C5A065);
        border-color: var(--btn-bg-hover, #C5A065);
        /* 네온 글로우(Glow) 이펙트 */
        box-shadow: 0 0 30px rgba(197, 160, 101, 0.5); 
    }

    .owl-youtube-widget-wrapper .owl-yt-wrapper:not(.is-fallback-state):not(.is-active):not(.is-loading):hover .play-icon,
    .owl-youtube-widget-wrapper .owl-yt-wrapper:not(.is-fallback-state):not(.is-active):not(.is-loading):focus-visible .play-icon {
        border-left-color: var(--btn-icon-color-hover, #ffffff);
    }
}

/* --------------------------------------------------------------------------
   [7] Dynamic States (Loading, Active)
   -------------------------------------------------------------------------- */
.owl-youtube-widget-wrapper .yt-loader {
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2); 
    border-top-color: #ffffff;
    border-radius: 50%; 
    animation: owlYtSpin 1s infinite linear;
    z-index: 20; 
    display: none; /* 기본 숨김 */
}

@keyframes owlYtSpin { 
    to { transform: translate(-50%, -50%) rotate(360deg); } 
}

/* 로딩 중 UI 변경 */
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-loading .yt-loader { 
    display: block; 
}
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-loading .play-btn { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.5); 
}
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-loading .yt-thumb-mask .yt-thumb { 
    opacity: 0.5; 
    filter: blur(4px); 
}
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-loading .yt-brand-badge {
    opacity: 0;
    transform: translateY(-10px);
}

/* Iframe 활성화 완료 (Active) */
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-active {
    cursor: default;
    border-color: transparent !important; /* 재생 중에는 베젤 테두리를 지워 몰입감 향상 */
}

/* 🎯 재생 시 섀도우 렌더링 무력화 (입체감 유지/수호) */
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-active::after,
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-active::before {
    opacity: 0 !important;
}

/* 재생 시 불필요한 레이어 일괄 숨김 */
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-active .play-btn, 
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-active .yt-thumb-mask, 
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-active .yt-brand-badge,
.owl-youtube-widget-wrapper .owl-yt-wrapper.is-active .yt-loader { 
    opacity: 0 !important; 
    pointer-events: none !important; 
    display: none !important;
}

/* --------------------------------------------------------------------------
   [8] Mobile Responsive Fallbacks
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .owl-youtube-widget-wrapper .spec-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .owl-youtube-widget-wrapper .owl-spec-tab-box {
        align-self: flex-start;
        border-bottom-color: var(--owl-border, #e0e0e0) !important;
        border-radius: 6px;
        margin-bottom: 0px;
    }
    
    .owl-youtube-widget-wrapper .yt-brand-badge {
        top: 10px;
        left: 10px;
        padding: 4px 8px;
    }
    
    .owl-youtube-widget-wrapper .yt-brand-icon {
        width: 18px;
        height: 13px;
    }
    
    .owl-youtube-widget-wrapper .yt-brand-text {
        font-size: 11px;
    }
}