@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700&display=swap');

:root {

    /* color setup */
    --base-color-black: #202020;
    --base-color-white: #fff;
    --signature-color: #8C735F;
    --background-color: #ffffff;
    --background-color-edit: #D5D2CD;
    --background-color-gray: #938E8A;

    /* font setup */
    --font-KR-base: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-KR-base-2: "NanumMyeongjo", serif;
    --font-EN-title: "Jost", sans-serif;
    --font-EN-serif: "Playfair", Georgia, serif;
    --font-color-base: var(--base-color-black);
    --font-size-base: 15px;
    --font-weight-base: 400;

    /* header setup */
    --header-filter: blur(10px);


    /* margin / padding setup */
    --max-width: 1860px;

    --padding-pc: 0;

    --padding-mo: 15px;

    --all-sec-margin: 0 auto 200px auto;
    --all-sec-margin-position: 200px;

    --all-sec-margin-mo: 0 auto 150px auto;
    --all-sec-margin-position-mo: 150px;

    --little-padding: 0 15px;
    --all-sec-padding-position-mo: 15px;

    --padding-sec: 15px;

    --sec-top-bottom-margin: 100px;

    --button-margin: 20px 60px;


    /* -----------------------텍스트----------------------- */




    /* XL - 메인 타이틀 */
    --main-title-font-size: clamp(24px, 2.1875vw, 52px);
    --main-title-font-size-line: clamp(36px, 2.8125vw, 64px);

    /* L - 서브 타이틀 */
    --sub-title-font-size: clamp(22px, 1.4583vw, 34px);
    --sub-title-font-size-line: clamp(34px, 2.0833vw, 46px);

    /* M - 메인 타이틀 위 영문 텍스트 */
    --title-point-font-size: clamp(20px, 1.1458vw, 26px);
    --title-point-font-size-line: clamp(32px, 1.7708vw, 38px);

    /* S - 내용 - 내용 중 강조 텍스트 */
    --text-font-title-size: clamp(18px, 1.0417vw, 22px);
    --text-font-title-size-line: clamp(30px, 1.6667vw, 34px);

    /* XS - 내용 - 내용 중 디테일 텍스트 */
    --text-font-size: clamp(15px, 0.8333vw, 17px);
    --text-font-size-line: clamp(23px, 1.2500vw, 25px);

    /* XXS - 내용 - 내용 중 디테일 텍스트 */
    --text-font-size-s: clamp(14px, 0.7552vw, 15px);
    --text-font-size-line: clamp(23px, 1.2500vw, 25px);


    /* -----------------------헤더----------------------- */
    /* 헤더 1차/2차 메뉴 width 사이즈 */
    --header-nav-size: clamp(140px, 9vw, 200px);

    /* 해더 height */
    --header-height: clamp(70px, 5.2083vw, 100px);


}

/* ====================== 메인 팝업 ====================== */
.main_popup {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.main_popup.show {
    opacity: 1;
    visibility: visible;
}
.main_popup.hide {
    opacity: 0;
    visibility: hidden;
}
.main_popup_inner {
    transform: translateY(-30px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s ease;
    max-width: 1200px;
}
.main_popup.show .main_popup_inner {
    transform: translateY(0);
    opacity: 1;
}
.main_popup.hide .main_popup_inner {
    transform: translateY(-30px);
    opacity: 0;
}

/* PC: 두 이미지 나란히 */
.main_popup_images {
    display: flex;
}
.main_popup_slide {
    width: 50%;
    cursor: pointer;
}
.main_popup_slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* 인디케이터 (모바일 전용) */
.main_popup_dots {
    display: none;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 0;
}
.main_popup_dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.3s;
}
.main_popup_dot.active {
    background: #fff;
}

/* 버튼 영역 */
.main_popup_btns {
    display: flex;
    justify-content: space-between;
    background: #222;
    padding: 12px 16px;
}
.main_popup_btns button {
    background: none;
    border: none;
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-KR-base);
    transition: color 0.2s;
}
.main_popup_btns button:hover {
    color: #fff;
}

/* 모바일 반응형 */
@media all and (max-width: 768px) {
    .main_popup_inner {
        width: 85vw;
        max-width: 400px;
        overflow: hidden;
    }
    .main_popup_images {
        width: 200%;
        transition: transform 0.3s ease;
    }
    .main_popup_slide {
        width: 50%;
    }
    .main_popup_slide img {
        width: 100%;
        height: auto;
    }
    .main_popup_dots {
        display: flex;
        background: #222;
        padding: 12px 0 0;
        margin: 0;
    }
}