/*!
 * cosePanoramaSlider.css
 * 컴코즈 파노라마 슬라이더 스타일시트
 *
 * Version: 1.0.0
 * Author: COMCOSE Soft.
 * Name: COMCOSE Panorama Slider
 * License: Premium License
 *
 * Copyright (c) COMCOSE Soft. All rights reserved.
 * Website: www.comcose.com
 *
 * 본 스크립트는 프리미엄 라이선스 제품입니다.
 * This script is a premium licensed product.
 *
 * 무단 복사, 재배포, 수정 또는 재판매를 엄격히 금지합니다.
 * Unauthorized copying, redistribution, modification, or resale is strictly prohibited.
 */

:root {
    /* 슬라이더 오버레이 */
    --cose-panorama-overlay-bg: rgba(4, 9, 57, 0.2);

    /* 파노라마 영역 */
    --cose-panorama-area-width: 100%;           /* 파노라마 영역 가로 크기 */
    --cose-panorama-area-height: 400px;         /* 파노라마 영역 세로 크기 */
    --cose-panorama-area-border-radius: 6px;    /* 파노라마 영역 모서리 둥글기 */

    /* 파노라마 텍스트 영역 */
    --cose-panorama-text-top: 90%;                 /* 텍스트 박스 세로 위치 */
    --cose-panorama-text-top-trans: -90%;          /* 텍스트 박스 세로 위치 보정 */
    --cose-panorama-text-title-font-size: 18px;    /* 제목 폰트 크기 */
    --cose-panorama-text-sub-font-size: 14px;      /* 설명 문구 폰트 크기 */

    /* 파노라마 화살표 */
    --cose-panorama-arrow-area: 10%;                             /* 파노라마 방향 영역 (화살표) */
    --cose-panorama-arrow-width: 16px;                           /* 화살표 길이 */
    --cose-panorama-arrow-thickness: 2px;                        /* 화살표 굵기 */
    --cose-panorama-arrow-angle: 50deg;                          /* 화살표 벌어지는 각도 */
    --cose-panorama-arrow-color: rgba(255,255,255,0.5);          /* 화살표 색 */
    --cose-panorama-arrow-hover-color: rgba(255,255,255,0.95);   /* 화살표 호버 색 */
}

.cose_panorama {
    position: relative;
    display: block;
    width: var(--cose-panorama-area-width);
    height: var(--cose-panorama-area-height);
    border-radius: var(--cose-panorama-area-border-radius);
    overflow: hidden;
}

.cose_panorama::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: var(--cose-panorama-overlay-bg);
    pointer-events: none;
}

.cose_panorama img {
    position: absolute;
    top: 50%;
    left: 0;
    width: auto;
    max-width: none;
    height: 100%;
    min-width: 100%;
    display: block;
    object-fit: cover;
    transform: translateY(-50%);
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

.cose_panorama_nav {
    position: absolute;
    top: 0;
    width: var(--cose-panorama-arrow-area);
    height: 100%;
    z-index: 10;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.cose_panorama_nav_left {
    left: 0;
}

.cose_panorama_nav_right {
    right: 0;
}

.cose_panorama_arrow {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.cose_panorama:hover .cose_panorama_arrow {
    opacity: 1;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.cose_panorama_arrow::before,
.cose_panorama_arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--cose-panorama-arrow-width);
    height: var(--cose-panorama-arrow-thickness);
    background-color: var(--cose-panorama-arrow-color);
    border-radius: 10px;
}

.cose_panorama_arrow:hover::before,
.cose_panorama_arrow:hover::after,
.cose_panorama_nav:hover .cose_panorama_arrow::before,
.cose_panorama_nav:hover .cose_panorama_arrow::after {
    background-color: var(--cose-panorama-arrow-hover-color);
}

/* 왼쪽 화살표 */
.cose_panorama_nav_left .cose_panorama_arrow::before,
.cose_panorama_nav_left .cose_panorama_arrow::after {
    left: 50%;
    transform-origin: left center;
}

.cose_panorama_nav_left .cose_panorama_arrow::before {
    transform: translateX(-50%) rotate(calc(var(--cose-panorama-arrow-angle) * -1));
}

.cose_panorama_nav_left .cose_panorama_arrow::after {
    transform: translateX(-50%) rotate(var(--cose-panorama-arrow-angle));
}

/* 오른쪽 화살표 */
.cose_panorama_nav_right .cose_panorama_arrow::before,
.cose_panorama_nav_right .cose_panorama_arrow::after {
    right: 50%;
    transform-origin: right center;
}

.cose_panorama_nav_right .cose_panorama_arrow::before {
    transform: translateX(50%) rotate(var(--cose-panorama-arrow-angle));
}

.cose_panorama_nav_right .cose_panorama_arrow::after {
    transform: translateX(50%) rotate(calc(var(--cose-panorama-arrow-angle) * -1));
}

/* 파노라마 텍스트 박스 */
.cose_panorama_txt {
    position: absolute;
    top: var(--cose-panorama-text-top);
    left: 50%;
    z-index: 20;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    text-align: center;
    transform: translate(-50%, var(--cose-panorama-text-top-trans));
    pointer-events: none;
}

.cose_panorama_txt h2 {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--cose-panorama-text-title-font-size);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.46);
}

.cose_panorama_txt .sub_txt {
    display: block;
    font-size:  var(--cose-panorama-text-sub-font-size);;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.36);
}

.cose_panorama_txt .btn_more {
    display: inline-block;
    margin-top: 28px;
    padding: 13px 34px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    pointer-events: auto;
}

.cose_panorama_txt .btn_more:hover {
    border-color: rgba(255, 255, 255, 0.95);
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}