/* view.skin.css - 자동 추출 */

/* === Block 1 === */
#bo_v_act_good, #bo_v_act_nogood, #bo_v_act_book {display:none;position:absolute;top:30px;left:50%;width:200px;padding:20px;font-weight:normal;text-align:center;background:#f63941;z-index:9999;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

/* Premium OTT 스타일 로딩 */
.iframe-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    flex-direction: column;
    gap: 30px;
    overflow: hidden;
}

/* 시네마틱 배경 효과 */
.iframe-loading::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(120, 0, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 0, 100, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 150, 255, 0.08) 0%, transparent 60%);
    animation: cinematicBg 8s ease-in-out infinite;
}

@keyframes cinematicBg {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
}

/* 프리미엄 로딩 스피너 */
.iframe-loading-spinner {
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 2;
}

.iframe-loading-spinner::before,
.iframe-loading-spinner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.iframe-loading-spinner::before {
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #e50914;
    animation: premiumSpin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.iframe-loading-spinner::after {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border: 2px solid rgba(255,255,255,0.05);
    border-bottom-color: rgba(229, 9, 20, 0.6);
    animation: premiumSpin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite reverse;
}

@keyframes premiumSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 글로우 이펙트 */
.iframe-loading-spinner-glow {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229, 9, 20, 0.4) 0%, transparent 70%);
    filter: blur(20px);
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* 로딩 텍스트 */
.iframe-loading-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.9);
    z-index: 2;
    position: relative;
    text-transform: uppercase;
}

.iframe-loading-text .dots {
    display: inline-block;
    margin-left: 4px;
}

.iframe-loading-text .dots span {
    display: inline-block;
    opacity: 0;
    animation: dotFade 1.4s infinite;
    margin: 0 2px;
    font-weight: 700;
}

.iframe-loading-text .dots span:nth-child(1) { animation-delay: 0s; }
.iframe-loading-text .dots span:nth-child(2) { animation-delay: 0.2s; }
.iframe-loading-text .dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotFade {
    0%, 20% { opacity: 0; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
    60%, 100% { opacity: 0; transform: translateY(0); }
}

/* 하단 프로그레스 바 */
.iframe-loading .loading-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}

.iframe-loading .loading-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #e50914, transparent);
    animation: loadingBar 1.5s ease-in-out infinite;
}

@keyframes loadingBar {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 파티클 (더 세련되게) */
.iframe-loading .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: floatUp 6s ease-in-out infinite;
}

.iframe-loading .particle:nth-child(1) { left: 10%; bottom: -10px; animation-delay: 0s; }
.iframe-loading .particle:nth-child(2) { left: 25%; bottom: -10px; animation-delay: 1s; }
.iframe-loading .particle:nth-child(3) { left: 40%; bottom: -10px; animation-delay: 2s; }
.iframe-loading .particle:nth-child(4) { left: 60%; bottom: -10px; animation-delay: 0.5s; }
.iframe-loading .particle:nth-child(5) { left: 75%; bottom: -10px; animation-delay: 1.5s; }
.iframe-loading .particle:nth-child(6) { left: 90%; bottom: -10px; animation-delay: 2.5s; }

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}

/* 하단 배너 리스트 간격 */
.bo_v_mov + ul,
#playerArea + ul {
    margin-top: 0;
    padding-left: 0;
    list-style: none;
}

/* === Block 2 === */
@media screen and (max-width:960px) {
ul.banner {display:block;}
ul.banner li {width:33.33%;margin:0;}
ul.banner li:nth-child(3n) {margin:0;}
ul.banner li.full {width:100%;margin:0;}
}

/* === Block 3 === */
.layer-footer {
    width: 100%; /* 부모 요소 가득 채우기 */
    display: flex; /* 내부 요소를 유연하게 배치 */
    margin-bottom: 10px; /* 하단 여백 추가 */
}

.layer-button {
    flex: 1; /* 버튼이 가득 차도록 설정 */
    display: block; /* 블록 요소로 변환 */
    text-align: center; /* 텍스트 중앙 정렬 */
    padding: 12px 0; /* 위아래 패딩 */
    background-color: #007bff; /* 파란색 배경 */
    color: white; /* 흰색 글씨 */
    text-decoration: none; /* 밑줄 제거 */
    font-size: 16px; /* 글씨 크기 */
    font-weight: bold; /* 글씨 굵게 */
    border-radius: 5px; /* 모서리 둥글게 */
}

.layer-button:hover {
    background-color: #0056b3; /* 마우스 호버 시 색 변경 */
}

  .pc-only {
    display: block; /* 기본적으로 보임 */
    margin-bottom: 10px; /* 하단에 5px 간격 */
  }

  .mobile-only {
    display: none; /* 기본적으로 숨김 */
    margin-bottom: 7px; /* 하단에 5px 간격 */
  }

  @media screen and (max-width: 768px) {
    /* 모바일 (화면 너비 768px 이하) 설정 */
    .pc-only {
      display: none; /* PC 전용 숨김 */
    }

    .mobile-only {
      display: block; /* 모바일 전용 보임 */
    }
  }

  .pc-only img, .mobile-only img {
    width: 100%; /* 가로 100% */
    height: auto; /* 비율 유지 */
  }

/* === Block 4 === */
/* PC 환경에서 이미지 크기 고정 */
@media (min-width: 768px) { /* PC 해상도 조건 */
    #bo_v_poster img {
        width: 300px; /* 고정된 가로 크기 */
        height: 450px; /* 고정된 세로 크기 */
        object-fit: cover; /* 이미지 비율 유지하면서 잘림 방지 */
    }
}

/* === Block 5 === */
/* 레이어 배경 */
    .layer-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    /* 레이어 콘텐츠 */
    .layer-content {
        position: relative;
        width: 90%;
        max-width: 800px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    }

    /* 레이어 헤더 */
    .layer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background: #333;
        color: #fff;
    }

    .layer-title {
        font-size: 16px;
        font-weight: bold;
    }

    .layer-close {
        background: none;
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    .layer-close:hover {
        color: #ff0000;
    }

    /* 트레일러 Iframe */
    #layerIframe {
        width: 100%;
        height: 450px;
        border: none;
    }

    /* 반응형 */
    @media (max-width: 600px) {
        .layer-content {
            width: 95%;
        }

        #layerIframe {
            height: 300px;
        }
    }

/* === Block 6 === */
/* 모바일에서 이미지 세로 길이 제한 */
.slider_act .img img {

    object-fit: cover; /* 이미지 비율 유지하며 자르기 */
    width: auto; /* 가로 크기 자동 조정 */
}

/* 반응형 디자인: 모바일 화면에서 동작 */
@media (max-width: 768px) {
    .slider_act .img img {
        max-height: 100px; /* 모바일에서 세로 길이 더 작게 설정 */
    }
}

/* === Block 7 === */
.img-container {
  width: 100%; /* 모바일 화면에서도 잘 보이게 하려면 폭을 100%로 설정하세요 */
  height: 0; /* 패딩 비율을 이용해 높이를 설정할 것이므로 여기서는 높이를 0으로 설정합니다 */
  padding-bottom: 46.875%; /* 90/192 = 약 0.46875, 이 값을 백분율로 표현하면 46.875%입니다 */
  overflow: hidden;
  position: relative; /* img가 이 컨테이너를 기준으로 위치를 잡을 수 있게 relative로 설정합니다 */
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 데스크톱 화면에서는 원하는 크기인 192px * 90px로 설정합니다 */
@media (min-width: 768px) { /* 768px는 일반적인 브레이크포인트입니다. 필요에 따라 조절하세요 */
  .img-container {
    width: 192px;
    height: 90px;
    padding-bottom: 0; /* 높이가 고정되었으므로 패딩을 0으로 설정합니다 */
  }
}

/* === Block 8 === */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  font-size: 14px; /* 폰트 크기는 예시입니다. 필요에 따라 조정하세요. */
  line-height: 1.5; /* 줄 간격은 예시입니다. 필요에 따라 조정하세요. */
  height: 3em; /* 2줄 높이를 설정하세요. 이 예시에서는 폰트 크기와 줄 간격을 고려하여 설정됩니다. */
}