/* 00. Web Fonts */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600;700&family=Montserrat:wght@200;300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Cormorant+Garamond:ital,wght@1,400&family=Cinzel:wght@600;700&display=swap');

/* 01. 기본 최적화 */
/* Deployment optimizations */
:root {
    --system-font: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--system-font);
    overflow-x: hidden;
    overflow-y: auto !important;
}

img {
    max-width: 100%;
    height: auto;
}

.wpcf7-response-output {
    display: none !important;
}

.gaon-custom-btn[disabled],
.gaon-modal-btn[disabled] {
    opacity: .65;
    cursor: not-allowed;
}

.form-helper-message {
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    color: #fff;
}

.form-helper-message.error {
    color: #ffdddd;
}


/* 02. Contact Form 7 기본 폼 스타일 */
.wpcf7 .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    word-wrap: normal !important;
}

.wpcf7 .hidden-fields-container {
    display: none;
}

.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
    /* Blue */
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
    display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-color: #dc3232;
    /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
    border-color: #f56e28;
    /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffb900;
    /* Yellow */
}

.wpcf7-form-control-wrap {
    position: relative;
}

.wpcf7-not-valid-tip {
    color: #dc3232;
    /* Red */
    font-size: 1em;
    font-weight: normal;
    display: block;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
    position: relative;
    top: -2ex;
    left: 1em;
    z-index: 100;
    border: 1px solid #dc3232;
    background: #fff;
    padding: .2em .8em;
    width: 24em;
}

.wpcf7-list-item {
    display: inline-block;
    margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
    content: " ";
}

.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    /* Dark Gray 800 */
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
    position: relative;
}

form.submitting .wpcf7-spinner {
    visibility: visible;
}

.wpcf7-spinner::before {
    content: '';
    position: absolute;
    background-color: #fbfbfc;
    /* Light Gray 100 */
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 100%;
    transform-origin: 8px 8px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.wpcf7 [inert] {
    opacity: 0.5;
}

.wpcf7 input[type="file"] {
    cursor: pointer;
}

.wpcf7 input[type="file"]:disabled {
    cursor: default;
}

.wpcf7 .wpcf7-submit:disabled {
    cursor: not-allowed;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
    direction: ltr;
}

.wpcf7-reflection>output {
    display: list-item;
    list-style: none;
}

.wpcf7-reflection>output[hidden] {
    display: none;
}


/* 03~06. 랜딩페이지 섹션 스타일 */
/* ================= 1. 리셋 및 글로벌 변수 ================= */
:root {
    --prg-gold: #E8D5B5;
    --prg-dark-gold: #C5A46D;
    --prg-teal: #031518;
    --prg-light: #F4F4F4;
    --prg-muted: #A0A5AA;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: keep-all;
}

body,
html {
    width: 100%;
    height: 100%;
    background: var(--prg-teal);
    overflow-x: hidden;
    font-family: 'Pretendard', sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}

/* 프레임 라인 */
.prg-frame-border {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 1px solid rgba(232, 213, 181, 0.15);
    z-index: 50;
    pointer-events: none;
}

/* 🚨 엘리멘터 간섭을 막기 위해 모든 클래스에 prg- 접두사 적용 */
#prg-hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 800px;
    overflow: hidden;
    background: var(--prg-teal);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ================= 2. 슬라이드 및 딥 틸 오버레이 ================= */
.prg-slide-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.prg-slide {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    will-change: transform, filter, opacity;
}

.prg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(3, 21, 24, 0.3) 0%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 2;
    pointer-events: none;
}

/* ================= 3. 하이엔드 타이포그래피 ================= */
.prg-content-box {
    position: relative;
    z-index: 10;
    width: 100% !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 텍스트 마스크 효과 컨테이너 - 폭 100% 강제하여 쪼그라들기 방지 */
.prg-text-reveal {
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    width: 100% !important;
    display: block !important;
}

/* 🚨 강제 중앙 정렬: 테마의 text-align: left 주입을 완전히 무력화 */
.prg-text-reveal>* {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.prg-mb-sm {
    margin-bottom: 24px !important;
}

.prg-mb-lg {
    margin-bottom: 40px !important;
}

/* 서브 타이틀 */
.prg-sub-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--prg-gold);
    letter-spacing: 0.25em;
    margin: 0;
    text-transform: uppercase;
    padding-left: 0.25em;
    /* 자간으로 인한 시각적 쏠림 교정 */
}

/* 하이라이트 포인트 */
.prg-highlight {
    position: relative;
    font-weight: 600;
    background: linear-gradient(135deg, var(--prg-gold), var(--prg-dark-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 메인 타이틀 */
.prg-main-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 5rem;
    font-weight: 600;
    color: var(--prg-light);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

/* 본문 설명 텍스트 */
.prg-desc-text {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--prg-muted);
    line-height: 1.9;
    letter-spacing: -0.01em;
    margin: 0;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.prg-desc-text strong {
    color: var(--prg-light);
    font-weight: 400;
}

/* ================= 4. 미니멀리즘 스크롤 인디케이터 ================= */
.prg-scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
}

.prg-scroll-text {
    font-family: 'Montserrat', 'Pretendard', sans-serif;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-top: 20px;
    font-weight: 400;
}

.prg-scroll-line {
    width: 1px;
    height: 70px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.prg-scroll-line::before {
    content: '';
    position: absolute;
    top: -70px;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(to bottom, transparent, var(--prg-gold));
    animation: scrollDrop 2.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollDrop {
    0% {
        top: -70px;
    }

    100% {
        top: 70px;
    }
}

/* ================= 5. 반응형 (모바일 최적화) ================= */


/* ===== Extracted <style> block 5 ===== */
/* =========================================================
       1. 엘리멘터 제약 강제 파괴 (Break-out)
    ========================================================= */
#sec03-ultimate-fullscreen {
    width: 100vw !important;
    /* [수정] 모바일 기기 및 PC에서 세로 스크롤바 너비로 인한 미세한 가로 흔들림 방지 */
    max-width: 100% !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative;
    font-family: 'Pretendard', sans-serif;
    background: #000;
    overflow-x: hidden;
}

#sec03-ultimate-fullscreen * {
    box-sizing: border-box !important;
    margin: 0 auto;
    padding: 0;
    word-break: keep-all !important;
}

#sec03-ultimate-fullscreen .delay-1 {
    margin-bottom: 30px;
    width: 50%;
}

/* =========================================================
       2. 소프트 마스크 리빌 코어 (CSS 네이티브 스티키)
    ========================================================= */
.fs-panel {
    position: sticky;
    top: 0;
    /* [수정] 자식 요소는 100vw 대신 100%를 사용하여 스크롤바 간섭 원천 차단 */
    width: 100%;
    /* [수정] 주소창 등장에 따른 스티키(Sticky) 점프/튕김을 막기 위해 100svh로 고정 */
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/* [수정] 폴백(Fallback) 단위도 svh를 기준으로 재작성 */
@supports not (height: 100svh) {
    .fs-panel {
        height: 100vh;
    }
}

.fs-panel:nth-child(1) {
    z-index: 1;
}

.fs-panel:nth-child(2) {
    z-index: 2;
}

.fs-panel:nth-child(3) {
    z-index: 3;
}

.fs-panel:nth-child(4) {
    z-index: 4;
}

.fs-panel:nth-child(5) {
    z-index: 5;
}

.fs-panel:nth-child(6) {
    z-index: 6;
}

.fs-panel:nth-child(7) {
    z-index: 7;
}

.fs-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    animation: subtleBreath 30s infinite alternate ease-in-out;
}

@keyframes subtleBreath {
    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(1.08);
    }
}

.fs-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 2;
}

/* =========================================================
       3. 텍스트 딜레이 리빌 (Depth 구현)
    ========================================================= */
.fs-content {
    position: relative;
    z-index: 10;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
}

.reveal-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

.fs-panel.is-active .reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.elementor-editor-active .reveal-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
}

.fs-panel.is-active .delay-1 {
    transition-delay: 0.1s;
}

.fs-panel.is-active .delay-2 {
    transition-delay: 0.3s;
}

.fs-panel.is-active .delay-3 {
    transition-delay: 0.5s;
}

/* =========================================================
       4. 텍스트 디자인 & 컬러 (베이지/화이트/블랙)
    ========================================================= */
.fs-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Playfair Display', serif;
    font-size: clamp(15rem, 25vw, 35rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.04);
    z-index: -1;
    pointer-events: none;
    line-height: 1;
}

.fs-intro {
    background-color: #ffffff;
    background-image: url('./images/xi-main.webp');
    background-size: cover;
    background-position: center;
}

/* 모바일 배경 위치 보정 */


.fs-intro .fs-eyebrow {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 900;
    color: #C8B693;
    letter-spacing: 0.5em;
    margin-bottom: 15px;
    display: block;
}

.fs-intro .fs-title {
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.4;
    letter-spacing: -2px;
    text-shadow: #000000 0px 10px 30px;
}

/* 🔥 스크롤 인디케이터 */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.scroll-indicator span {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    color: #888888;
    letter-spacing: 5px;
    margin-right: -5px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.scroll-indicator .line {
    width: 1px;
    height: 70px;
    background: #C8B693;
    animation: scrollLine 2.5s infinite ease-in-out;
}

@keyframes scrollLine {

    0%,
    100% {
        transform: scaleY(0.3);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
    }
}

/* 셀링 포인트 공통 스타일 */
.fs-num {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 700;
    color: #C8B693;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

.fs-main-title {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.35;
    margin-bottom: 30px;
    letter-spacing: -2px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.fs-main-title span {
    font-weight: 800;
    color: #C8B693;
}

.fs-desc {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 300;
    color: #ffffff;
    line-height: 1.8;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
}

/* 모바일 최적화 */


/* ===== Extracted <style> block 6 ===== */
/* =========================================================
       1. 로케이션 섹션 공통 초기화
    ========================================================= */
#sec-location {
    width: 100%;
    background-color: #fdfdfc;
    padding: 150px 0;
    font-family: 'Pretendard', sans-serif;
    color: #111111;
    overflow: hidden;
}

.loc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

/* =========================================================
       2. 헤더 타이틀 (모던 하이엔드 몬세라트 적용)
    ========================================================= */
.loc-header {
    text-align: center;
    margin-bottom: 100px;
}

.loc-eyebrow {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    font-weight: 300;
    color: #111111;
    letter-spacing: 0.3em;
    margin-bottom: 15px;
    display: block;
}

.loc-eyebrow strong {
    font-weight: 700;
    color: #C8B693;
}

.loc-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 300;
    color: #C8B693;
    line-height: 1.2;
    letter-spacing: 0.25em;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.loc-desc {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    font-weight: 300;
    color: #444444;
    line-height: 1.8;
    word-break: keep-all;
    max-width: 850px;
    margin: 0 auto;
}

.loc-desc strong {
    font-weight: 700;
    color: #111111;
}

/* =========================================================
       3. 지도 영역 (풀사이즈 Edge-to-Edge)
    ========================================================= */
.loc-map-full {
    width: 100%;
    max-width: 1280px !important;
    margin: 100px auto 150px;
    overflow: hidden;
}

.loc-map-full picture,
.loc-map-full img {
    display: block;
    width: 100%;
}

.loc-map-full img {
    height: auto;
    object-fit: contain;
}

/* =========================================================
       4. 4대 특권 블록 (PC: 2x2 배열)
    ========================================================= */
.loc-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 60px;
}

.feat-card {
    text-align: left;
}

.feat-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.feat-title {
    font-size: 1.5rem;
    font-weight: 400;
    color: #111111;
    letter-spacing: -1px;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.feat-title strong {
    font-weight: 800;
    margin-right: 6px;
}

.feat-title span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #C8B693;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    margin-left: 4px;
    text-transform: uppercase;
}

.feat-img {
    width: 100%;
    aspect-ratio: 7 / 3;
    overflow: hidden;
    margin-bottom: 30px;
    background-color: #f0f0f0;
}

.feat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.feat-card:hover .feat-img img {
    transform: scale(1.05);
}

.feat-desc {
    font-size: 1.1rem;
    font-weight: 300;
    color: #666666;
    line-height: 1.8;
}

.feat-desc strong {
    font-weight: 700;
    color: #222;
}

/* =========================================================
       5. 모바일 최적화 & 아코디언
    ========================================================= */


/* 등장 모션 */
.loc-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.loc-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
       6. 엘리멘터 편집 화면(Edit Mode) 강제 노출 설정
    ========================================================= */
body.elementor-editor-active .loc-reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
}


/* ===== Extracted <style> block 7 ===== */
/* =====================================
       1. 푸르지오 레이크시티 브랜드 코어 
    ===================================== */
:root {
    --p-green: #003957;
    /* 푸르지오 시그니처 그린 */
    --p-beige: #f5f5f0;
    /* 프리미엄 베이지 배경 */
    /* --p-black: #1a1a1a; */
    --p-white: #ffffff;
    --p-text-sub: #555555;

    --font-kr: 'Pretendard', sans-serif;
    --font-en: 'Cormorant Garamond', serif;

    --text-prugio-grad: linear-gradient(135deg, #004c45 0%, #006b61 50%, #004c45 100%);
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--p-white);
    color: var(--p-black);
    font-family: var(--font-kr);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

.p-wrap {
    width: 100%;
    overflow-x: clip;
    background-color: var(--p-white);
}

.p-wrap * {
    box-sizing: border-box !important;
}

img {
    max-width: 100%;
    display: block;
}

.eng {
    font-family: var(--font-en);
    letter-spacing: 0.05em;
}

.sig-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
}

/* 디바이스별 중복 노출 차단 */
.pc-only {
    display: inline-block !important;
}

.m-only {
    display: none !important;
}

.gal-mobile {
    display: none !important;
}


.nowrap {
    white-space: nowrap !important;
}

.point-text {
    font-weight: 800;
    color: var(--p-green);
}

.head-text-effect {
    background: var(--text-prugio-grad);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: greenShine 4s linear infinite;
    display: inline-block;
    font-weight: 800;
}

@keyframes greenShine {
    to {
        background-position: 200% center;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.15s;
}

.delay-2 {
    transition-delay: 0.3s;
}

/* =====================================
       2. 히어로 섹션
    ===================================== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--p-beige);
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.hero-eyebrow {
    font-size: clamp(0.8rem, 1.2vw, 1.1rem);
    color: var(--p-green);
    letter-spacing: 0.5em;
    margin-bottom: 2.5rem;
    font-weight: 700;
    display: inline-block;
}

.hero-title {
    line-height: 1.1;
    margin-bottom: 2.5rem;
}

.hero-title .font-light {
    font-weight: 300;
    font-size: clamp(1.8rem, 6vw, 3.8rem);
    letter-spacing: -0.05em;
    color: var(--p-black);
}

.hero-title .head-text-effect {
    font-size: clamp(2.2rem, 8vw, 5.5rem);
    letter-spacing: -0.02em;
}

.hero-desc {
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    color: var(--p-text-sub);
    font-weight: 400;
    word-break: keep-all;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.8;
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: rgba(0, 76, 69, 0.2);
    position: relative;
    overflow: hidden;
    margin-top: 15px;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--p-green);
    animation: dropDown 2s infinite;
}

@keyframes dropDown {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(200%);
    }
}

/* =====================================
       3. 프리미엄 6 특화설계
    ===================================== */
.features {
    padding: 140px 0;
    background: var(--p-white);
}

.f-header {
    text-align: center;
    margin-bottom: 80px;
}

.f-header .f-eyebrow {
    font-size: 1rem;
    color: var(--p-green);
    letter-spacing: 0.3em;
    font-weight: 800;
    margin-bottom: 15px;
    display: block;
}

.f-header h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    color: var(--p-black);
    margin: 0;
}

.f-header h2 b {
    font-weight: 800;
    color: var(--p-green);
}

.f-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.f-card {
    background: var(--p-beige);
    padding: 50px 40px;
    border-radius: 0;
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
}

.f-card:hover {
    background: var(--p-green);
}

.f-card:hover * {
    color: var(--p-white) !important;
}

.f-card-num {
    font-family: var(--font-en);
    font-size: 1.5rem;
    color: var(--p-green);
    margin-bottom: 20px;
    font-weight: 500;
}

.f-card h3 {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--p-black);
    line-height: 1.4;
    word-break: keep-all;
    letter-spacing: -0.05em;
}

.f-card p {
    font-size: 0.95rem;
    color: var(--p-text-sub);
    line-height: 1.7;
    margin: 0;
    word-break: keep-all;
    letter-spacing: -0.03em;
}

/* =====================================
       4. 단지 갤러리 섹션
    ===================================== */
.gallery {
    background: var(--p-white);
    padding-bottom: 100px;
}

.gal-desktop {
    display: flex;
    width: 100%;
    position: relative;
}

.gal-sticky-left {
    width: 55%;
    height: 100vh;
    height: 100svh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.g-img-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.g-img-layer.active {
    opacity: 1;
    z-index: 2;
}

.gal-scroll-right {
    width: 45%;
    padding: 0 5%;
}

.g-text-block {
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.2;
    transition: opacity 0.6s;
}

.g-text-block.active {
    opacity: 1;
}

.g-text-block .eng-title {
    color: var(--p-green);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}

.g-text-block h3 {
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.2;
    letter-spacing: -0.05em;
}

.g-text-block p {
    font-size: 1.15rem;
    color: var(--p-text-sub);
    line-height: 1.8;
    word-break: keep-all;
    letter-spacing: -0.03em;
}

/* 모바일 갤러리 */
.g-mob-item {
    margin-bottom: 80px;
}

.g-mob-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-bottom: 25px;
}

.g-mob-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.g-mob-text h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.g-mob-text p {
    font-size: 1.05rem;
    color: var(--p-text-sub);
    line-height: 1.7;
    word-break: keep-all;
}

/* =====================================
       5. 엘리멘터 편집 화면 호환성 수정
    ===================================== */
body.elementor-editor-active .reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

body.elementor-editor-active .g-text-block {
    opacity: 1 !important;
}

body.elementor-editor-active .g-img-layer:first-child {
    opacity: 1 !important;
    z-index: 2;
}

/* =====================================
       6. 모바일 통합 최적화 (768px 이하 병합)
    ===================================== */


/* ===== Extracted <style> block 8 ===== */
/* 📌 폰트 로드 */

/* ==========================================================
     1. 베이스 테마 및 PC 설정 (🌿 푸르지오 그린 & 베이지 하이엔드)
  ========================================================== */
#prugio-unit-section {
    background-color: #ffffff;
    /* 화이트 배경 */
    padding: 140px 0;
    font-family: 'Pretendard', sans-serif;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/* 배경 타이포그래피 (연한 베이지/그레이 톤) */
.u-bg-typography {
    position: absolute;
    top: 50%;
    left: -2vw;
    transform: translateY(-50%);
    font-size: 18vw;
    font-weight: 700;
    color: rgba(0, 76, 69, 0.02);
    /* 푸르지오 그린 아주 연하게 */
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -5px;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

.u-master-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 50px;
    position: relative;
    z-index: 2;
}

.u-left-panel {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 20px;
}

.u-title-group {
    margin-bottom: 50px;
}

.u-main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 56px;
    color: #111111;
    font-weight: 200;
    letter-spacing: 4px;
    margin: 0 0 20px 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.u-main-title strong {
    font-weight: 600;
    color: #004c45;
}

/* 푸르지오 그린 포인트 */
.u-subtitle {
    font-size: 16px;
    color: #555555;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: -0.5px;
}

/* 🌟 10개 타입 그룹화 탭 UI (하이엔드 칩 스타일) */
.u-tabs-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 30px;
}

.u-tab-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.u-group-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #004c45;
    width: 60px;
    letter-spacing: -0.5px;
}

.u-chip-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.u-tab-chip {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 0;
}

.u-tab-chip:hover {
    background: rgba(0, 76, 69, 0.05);
    color: #004c45;
    border-color: #004c45;
}

.u-tab-chip.active {
    background-color: #004c45;
    color: #ffffff;
    border-color: #004c45;
    font-weight: 600;
    box-shadow: 0 6px 15px rgba(0, 76, 69, 0.25);
}

/* 제원표 (데이터 테이블) */
.u-data-container {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.u-data-view {
    display: none;
    animation: uFadeIn 0.5s ease-out forwards;
}

.u-data-view.active {
    display: block;
}

.u-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.u-spec-row:first-child {
    border-top: 2px solid #111;
}

.u-spec-row.contract {
    border-bottom: 2px solid #111;
    background: rgba(0, 76, 69, 0.02);
    padding: 18px 10px;
    margin-top: -1px;
}

.u-spec-row.contract span {
    font-weight: 600;
    color: #004c45;
}

.u-spec-row.contract strong {
    font-size: 18px;
    font-weight: 700;
    color: #004c45;
}

.u-spec-row span {
    color: #555555;
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.u-spec-row strong {
    color: #111111;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0px;
}

.u-spec-row strong small {
    font-size: 13px;
    font-weight: 400;
    color: #888;
    margin-left: 2px;
}

/* 오른쪽 비주얼 스테이지 (푸르지오 시그니처 그린 원형) */
.u-right-panel {
    flex: 0 0 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.u-circle-stage {
    background: #002e48;
    border: 1px solid rgba(245, 245, 240, 0.1);
    border-radius: 50%;
    width: 38vw;
    height: 38vw;
    max-width: 680px;
    max-height: 680px;
    box-shadow: 0 30px 60px rgba(0, 76, 69, 0.3), inset 0 0 40px rgba(255, 255, 255, 0.05);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 비주얼 이미지 영역 */
.u-visual-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: uFadeIn 0.6s ease-out forwards;
}

.u-visual-view.active {
    display: flex;
}

.u-visual-view img {
    width: 75%;
    max-height: 55%;
    object-fit: contain;
    margin-bottom: 25px;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
}

.u-type-title {
    text-align: center;
}

.u-type-title h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #f5f5f0;
    letter-spacing: 1px;
}

.u-type-title p {
    font-size: 14.5px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    letter-spacing: -0.5px;
}

@keyframes uFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================
     2. 📱 모바일 전용 (2열 유지 & 칩 배열 최적화)
  ========================================================== */


/* 🚨 엘리멘터 편집 모드 간섭 방지 */
body.elementor-editor-active .u-visual-view.active {
    display: flex !important;
}

body.elementor-editor-active .u-visual-view {
    display: none;
}


/* ===== Extracted <style> block 9 ===== */
/* =======================================================
   0. Base & Variables
======================================================= */
.prg-club-wrap {
    font-family: 'Pretendard', -apple-system, sans-serif;
    color: #222;
    background-color: #FFFFFF;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: keep-all;
    line-height: 1.6;
    overflow-x: hidden;
}

.prg-club-wrap * {
    box-sizing: inherit;
}

:root {
    --prg-green: #072A24;
    --prg-teal: #004C45;
    /* 푸르지오 시그니처 그린으로 조정 */
    --prg-gold: #B39258;
    --prg-dark: #081412;
    --prg-bg: #F5F6F5;
}

.pc-br {
    display: block;
    content: "";
}

.mo-br {
    display: none;
}


/* =======================================================
   1. Animation System
======================================================= */
.reveal {
    opacity: 1;
    transform: none;
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js-active .reveal:not(.is-inview) {
    opacity: 0;
    transform: translateY(30px);
}

.delay-1 {
    transition-delay: 0.15s;
}

/* PC 전용 하이엔드 모션 */


/* =======================================================
   2. Typography & Headers
======================================================= */
.club-sec {
    padding: 140px 0;
    position: relative;
}

.bg-dark {
    background-color: var(--prg-dark);
    color: #fff;
}

.bg-gray {
    background-color: var(--prg-bg);
}

.club-head {
    text-align: center;
    margin-bottom: 70px;
    padding: 0 5%;
}

.club-head .eng {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    color: var(--prg-gold);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
    font-weight: 600;
}

.club-head h2 {
    font-size: 44px;
    font-weight: 300;
    margin: 0 0 20px 0;
    color: var(--prg-green);
    letter-spacing: -0.03em;
    line-height: 1.3;
}

.club-head h2 strong {
    font-weight: 700;
    color: var(--prg-teal);
}

.club-head p {
    font-size: 18px;
    color: #555;
    margin: 0;
    line-height: 1.6;
}

.bg-dark .club-head h2,
.bg-dark .club-head h2 strong {
    color: #fff;
}

.bg-dark .club-head p {
    color: rgba(255, 255, 255, 0.7);
}

.title-badge {
    display: inline-block;
    background: var(--prg-teal);
    color: #fff important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    margin-bottom: 15px;
    border-radius: 20px;
}

.bg-dark .title-badge {
    background: transparent;
    border: 1px solid var(--prg-gold);
    color: var(--prg-gold);
}

.zoom-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s;
}

.zoom-btn svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}

.lb-target:hover .zoom-btn {
    opacity: 1;
}

/* =======================================================
   3. Blueprint Studio
======================================================= */
.bp-box {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 5%;
}

.bp-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--prg-teal);
    margin-bottom: 20px;
    text-align: center;
}

.drag-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 76, 69, 0.05);
    color: var(--prg-teal);
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 25px;
    gap: 8px;
    border: 1px solid rgba(0, 76, 69, 0.1);
}

.drag-hint svg {
    width: 18px;
    height: 18px;
    stroke: var(--prg-gold);
    animation: swipeX 1.5s infinite;
}

@keyframes swipeX {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}

.bp-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    background: radial-gradient(circle at center, #ffffff 0%, #E8EBEA 100%);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.04);
    text-align: center;
    font-size: 0;
}

.bp-scroll:active {
    cursor: grabbing;
}

.bp-scroll::-webkit-scrollbar {
    height: 8px;
}

.bp-scroll::-webkit-scrollbar-thumb {
    background: #002e48;
    border-radius: 4px;
}

.bp-scroll img {
    display: inline-block;
    width: 100%;
    max-width: 1500px;
    min-width: 1200px;
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.12));
    pointer-events: none;
}

/* =======================================================
   4. High-End Layouts (PC 뷰)
======================================================= */
.wide-cinema {
    max-width: 1600px;
    margin: 0 auto 100px;
    padding: 0 5%;
}

.wc-inner {
    width: 100%;
    height: 60vh;
    min-height: 450px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
    background: #000;
}

.wc-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.95;
    transition: 0.8s ease;
    display: block;
}

.wc-inner:hover img {
    transform: scale(1.03);
    opacity: 1;
}

.wc-cap {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    padding: 35px 40px;
    color: #fff;
    border-top-right-radius: 16px;
    max-width: 550px;
}

.wc-cap h4 {
    font-size: 26px;
    color: var(--prg-gold);
    margin: 0 0 10px;
    font-weight: 700;
}

.wc-cap p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
}

.half-wrap {
    display: flex;
    gap: 30px;
    max-width: 1600px;
    margin: 0 auto 100px;
    padding: 0 5%;
    position: relative;
}

.half-item {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    height: 450px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
    cursor: zoom-in;
    position: relative;
    background: #E5E7EB;
}

.bg-dark .half-item {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    background: #111;
}

.half-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.8s;
    opacity: 0.95;
    display: block;
}

.half-item:hover img {
    transform: scale(1.05);
    opacity: 1;
}

.half-cap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    padding: 60px 30px 20px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    pointer-events: none;
    word-break: keep-all;
}

.ov-wrap {
    max-width: 1500px;
    margin: 0 auto 150px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: 40px;
}

.ov-wrap.reverse {
    flex-direction: row-reverse;
}

.ov-txt {
    width: 35%;
    flex-shrink: 0;
    z-index: 3;
    text-align: left;
}

.ov-txt h3 {
    font-size: 36px;
    color: var(--prg-teal);
    font-weight: 700;
    margin: 0 0 16px 0;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.ov-txt p {
    font-size: 17px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.ov-visual {
    width: 60%;
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ov-wrap.reverse .ov-visual {
    justify-content: flex-start;
}

.ov-main {
    width: 80%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    cursor: zoom-in;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    background: #E5E7EB;
}

.ov-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.8s ease;
    opacity: 0.95;
    display: block;
}

.ov-main:hover img {
    transform: scale(1.05);
    opacity: 1;
}

.ov-sub {
    position: absolute;
    bottom: -40px;
    left: -10%;
    width: 50%;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 2;
    cursor: zoom-in;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
    border: 8px solid #fff;
    background: #E5E7EB;
}

.ov-wrap.reverse .ov-sub {
    left: auto;
    right: -10%;
}

.ov-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.8s ease;
    opacity: 0.95;
    display: block;
}

.ov-sub:hover img {
    transform: scale(1.08);
    opacity: 1;
}

.ov-sub-cap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 15px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    pointer-events: none;
    text-align: center;
    word-break: keep-all;
    line-height: 1.4;
}

/* 모바일 전용 독립된 안내 문구 (PC 숨김) */
.mo-swipe-hint {
    display: none;
}

/* =======================================================
   5. ★ Mobile App Layout (이미지 증발 & 겹침 완벽 차단)
======================================================= */


/* =======================================================
   6. Lightbox Viewer (확대 팝업 뷰어)
======================================================= */
.lb-dim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.lb-dim.open {
    opacity: 1;
    visibility: visible;
}

.lb-dim img {
    max-width: 95vw;
    max-height: 80vh;
    object-fit: contain;
    transform: scale(0.9);
    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 4px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.lb-dim.open img {
    transform: scale(1);
}

.lb-close {
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 45px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    font-family: sans-serif;
    font-weight: 200;
    line-height: 1;
}

.lb-close:hover {
    color: var(--prg-gold);
}

.lb-txt {
    margin-top: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}


/* ===== Extracted <style> block 10 ===== */

/* ==========================================================
     1. 베이스 및 헤더 (SELLING POINT 타이포그래피)
  ========================================================== */
#prugio-benefit-section {
    background-color: #ffffff;
    padding: 120px 0;
    font-family: 'Pretendard', sans-serif;
    overflow: hidden;
    width: 100%;
}

.b-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.b-header .bg-text {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(60px, 10vw, 140px);
    font-weight: 800;
    color: rgba(0, 76, 69, 0.03);
    line-height: 1;
    letter-spacing: 15px;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
}

.b-header .inner-title {
    position: relative;
    z-index: 2;
}

.b-header .inner-title span {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #004c45;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.b-header .inner-title h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 300;
    color: #111;
    margin: 0;
    letter-spacing: -0.05em;
}

.b-header .inner-title h2 b {
    font-weight: 800;
    color: #004c45;
}

/* ==========================================================
     2. PC 아코디언 (구조 보정 완료)
  ========================================================== */
.b-accordion-container {
    display: flex;
    width: 100%;
    height: 600px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    gap: 15px;
}

/* 🚨 PC에서 행(Row) 구분을 무시하고 4개를 일렬로 배치하는 핵심 코드 */
.b-row {
    display: contents;
}

.b-item {
    position: relative;
    flex: 1;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.b-item .b-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s;
}

.b-item .b-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.6) 100%);
}

.b-item:hover {
    flex: 3.5;
}

.b-item:hover .b-bg {
    transform: scale(1.05);
}

.b-content {
    position: absolute;
    inset: 0;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    z-index: 5;
}

.b-chance {
    position: absolute;
    top: 50px;
    left: 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #EAE6DA;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.b-chance::after {
    content: '';
    width: 30px;
    height: 1px;
    background: rgba(234, 230, 218, 0.5);
}

.b-item h3 {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
    line-height: 1.3;
    word-break: keep-all;
    white-space: nowrap;
}

.b-item .b-desc {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    max-width: 400px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s 0.2s;
}

.b-item:hover .b-desc {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
     3. 모바일 전용 (2x2 지그재그 아코디언)
  ========================================================== */


body.elementor-editor-active .b-item .b-desc {
    opacity: 1 !important;
    transform: none !important;
}


/* ===== Extracted <style> block 11 ===== */
/* ==========================================================
 폼 레이아웃 (푸르지오 시그니처 그린 배경 강제 적용)
 ========================================================== */
.gaon-vip-form-wrapper {
    max-width: 950px;
    margin: 0 auto;
    font-family: 'Pretendard', sans-serif;
    color: #fff;
    background-color: #004c45 !important;
    /* 푸르지오 시그니처 그린 강제 적용 */
    padding: 80px 60px !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.gaon-vip-form-wrapper * {
    box-sizing: border-box !important;
}

/* WP/CF7 여백 강제 제어 */
.gaon-vip-form-wrapper p {
    display: contents !important;
}

.gaon-vip-form-wrapper br {
    display: none !important;
}

.gaon-header br {
    display: block !important;
}

.gaon-privacy-box br {
    display: block !important;
}

.wpcf7-form-control-wrap {
    position: relative !important;
    display: block !important;
    width: 100%;
}

span.wpcf7-not-valid-tip {
    position: absolute !important;
    top: 100% !important;
    left: 2px !important;
    font-size: 13px !important;
    color: #FF6B6B !important;
    margin-top: 6px !important;
    width: max-content !important;
    z-index: 10;
}

/* 🌟 헤더 디자인 */
.gaon-header {
    text-align: center;
    margin-bottom: 60px;
}

.gaon-eyebrow {
    font-size: 14px;
    font-weight: 600;
    color: #EAE6DA;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: inline-block;
    opacity: 0.8;
}

.gaon-title {
    font-size: 38px;
    font-weight: 300;
    color: #fff;
    line-height: 1.4;
    letter-spacing: -1px;
    margin-bottom: 25px;
}

.gaon-title b {
    font-weight: 700;
    color: #EAE6DA;
}

.gaon-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto;
    letter-spacing: -0.5px;
    word-break: keep-all;
}

/* 약관 섹션 */
.gaon-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #EAE6DA;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 12px;
}

.gaon-privacy-box {
    height: 140px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    border-radius: 4px;
    display: block !important;
    font-weight: 300;
}

.gaon-privacy-box strong {
    color: #fff;
    font-weight: 500;
}

/* 체크박스 */
.gaon-privacy-check {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 50px;
}

.gaon-privacy-check label {
    cursor: pointer;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #EAE6DA !important;
}

.gaon-privacy-check input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;
    margin: 0 10px 0 0 !important;
    accent-color: #EAE6DA !important;
}

/* 폼 본문 */
.gaon-form-body {
    border-top: 1px solid #EAE6DA;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
}

.gaon-form-row {
    display: flex !important;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 80px;
}

.gaon-form-label {
    width: 22%;
    background: transparent;
    padding: 20px 15px;
    font-weight: 600;
    font-size: 15px;
    color: #EAE6DA;
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.gaon-input-group {
    width: 78%;
    padding: 20px 25px;
    display: flex;
    align-items: center;
}

/* 입력 인풋 */
.gaon-input {
    width: 100% !important;
    max-width: 380px;
    padding: 14px 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    color: #fff !important;
    outline: none !important;
    transition: all 0.3s ease;
}

.gaon-input:focus {
    border-color: #EAE6DA !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

.readonly-bg {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-align: center;
    pointer-events: none !important;
}

/* 폰/일시 레이아웃 */
.gaon-input-group-phone,
.gaon-datetime-group {
    display: flex !important;
    gap: 8px !important;
    width: 100%;
    max-width: 380px;
}

.gaon-input-group-phone .phone-cell,
.gaon-datetime-group .dt-cell {
    flex: 1;
    display: flex;
}

.gaon-input-group-phone .phone-dash {
    color: rgba(255, 255, 255, 0.3);
    align-self: center;
}

/* 라디오 버튼 */
.gaon-radio-wrap .wpcf7-form-control {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
}

.gaon-radio-wrap label {
    font-size: 15px !important;
    font-weight: 300;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8) !important;
    display: flex;
    align-items: center;
}

.gaon-radio-wrap input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 8px 0 0 !important;
    accent-color: #EAE6DA !important;
}

/* 제출 버튼 */
.gaon-submit-wrap {
    text-align: center;
    margin-top: 60px;
}

.gaon-custom-btn {
    background: #EAE6DA !important;
    color: #004c45 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    padding: 22px 80px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    min-width: 280px !important;
    transition: all 0.4s ease !important;
}

.gaon-custom-btn:hover {
    background: #fff !important;
    transform: translateY(-2px);
}

/* 모달 디자인 */
.gaon-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 999999;
    align-items: center;
    justify-content: center;
}

.gaon-modal-box {
    background: #004c45;
    padding: 50px 40px;
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.modal-title-sm {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-bottom: 8px;
}

.modal-title-lg {
    color: #fff;
    font-size: 22px;
    margin-bottom: 25px;
    font-weight: 600;
}

.modal-phone-display {
    color: #EAE6DA;
    font-size: 26px;
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.modal-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin-bottom: 25px;
    line-height: 1.6;
}

.gaon-modal-btn-group {
    display: flex !important;
    justify-content: space-around;
}

.gaon-modal-btn {
    width: 230px;
    height: 50px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-cancel {
    background: rgb(0 76 69) !important;
    color: #fff !important;
}

.btn-confirm {
    background: #EAE6DA !important;
    color: #004c45 !important;
}

/* 📱 모바일 최적화 */


/* ===== Extracted <style> block 12 ===== */
/* ==========================================================
   업성 푸르지오 레이크시티 프리미엄 푸터 스타일 (컴팩트 & 하이엔드 버전)
   ========================================================== */
.asan_tangjeong_xi-premium-footer {
    background-color: #111;
    padding: 40px 0 30px 0;
    /* 상하 여백 대폭 축소 (기존 80px/60px -> 40px/30px) */
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 10%;
}

.asan_tangjeong_xi-container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 5%;
}

/* 상단 열: 문구 및 패밀리사이트 */

.asan_tangjeong_xi-gnb-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-highlight-text {
    font-size: 16px;
    /* 폰트 축소 (20px -> 16px) */
    font-weight: 600;
    color: #EAE6DA;
    letter-spacing: -0.5px;
}

.glass-phone-btn {
    width: 36px;
    /* 버튼 크기 축소 */
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-phone-btn:hover {
    background: #004c45;
    border-color: #004c45;
}

.glass-phone-btn svg {
    width: 16px;
    height: 16px;
}

.gaon-slogan {
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
    text-align: right;
}

.glass-family-site {
    background: #222;
    color: #ccc;
    border: 1px solid #333;
    padding: 6px 12px;
    font-size: 12px;
    outline: none;
    cursor: pointer;
    border-radius: 4px;
    height: 32px;
}

.asan_tangjeong_xi-horizontal-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 25px;
    /* 구분선 여백 축소 */
}

/* 하단 열: 로고 및 정보 */
.asan_tangjeong_xi-bottom-row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    /* 요소 간격 축소 */
}

.asan_tangjeong_xi-logo img {
    width: 130px;
    height: auto;
    opacity: 0.8;
    margin-top: 5px;
}

.asan_tangjeong_xi-vertical-line {
    width: 1px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
}

.asan_tangjeong_xi-info {
    flex: 1;
}

.company-text {
    margin-bottom: 12px;
}

/* 핵심 수정: 세로로 긴 텍스트를 가로(inline-block)로 배치하여 공간 절약 */
.company-title {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-right: 15px;
    margin-bottom: 6px;
}

.company-line {
    display: inline-block;
    font-size: 12px;
    color: #999;
    margin-right: 12px;
    margin-bottom: 4px;
    font-weight: 300;
}

.highlight-label {
    color: #ccc;
    font-weight: 500;
    margin-right: 4px;
}

.disclaimer-text {
    margin-bottom: 12px;
}

.disclaimer-line {
    display: block;
    font-size: 11px;
    color: #666;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: -0.3px;
}

.copyright-text {
    font-size: 11px;
    color: #444;
    letter-spacing: 0.02em;
    margin: 0;
}

.asan_tangjeong_xi-cs {
    text-align: right;
    min-width: 160px;
}

.asan_tangjeong_xi-cs h2 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 2px 0;
    letter-spacing: -0.5px;
}

.asan_tangjeong_xi-cs p {
    font-size: 12px;
    color: #888;
    margin: 0;
    text-transform: uppercase;
}

/* 모바일 대응 */


/* ===== Extracted <style> block 13 ===== */
/* ============================================================
     📌 1. 기본 설정 및 브랜드 컬러 변수 (푸르지오 테마)
  ============================================================ */
:root {
    --prg-green: #003957;
    /* 푸르지오 시그니처 그린 */
    --prg-beige: #EAE6DA;
    /* 프리미엄 베이지 */
    --prg-beige-dark: #D4CDBA;
    /* 베이지 호버(다크) */
}

/* 하단 퀵바 래퍼 (항상 모바일 하단에 고정) */
.mo_quick_bottom_wrap {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    padding-bottom: env(safe-area-inset-bottom);
    /* 아이폰 하단 홈바 겹침 방지 */
}

/* ============================================================
     📌 2. 애니메이션 말풍선
  ============================================================ */
.prg_bubble {
    position: absolute;
    top: -55px;
    right: 15px;
    background: var(--prg-beige);
    color: #111;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: floating 2s infinite ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-tap-highlight-color: transparent;
}

.prg_bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 25px;
    width: 10px;
    height: 10px;
    background: var(--prg-beige);
    transform: rotate(45deg);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pulse_dot {
    width: 5px;
    height: 5px;
    background: #004c45;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 76, 69, 0.5);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(0, 76, 69, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 76, 69, 0);
    }
}

/* ============================================================
     📌 3. 텍스트 롤링 배너
  ============================================================ */
.prg_rolling_banner {
    background: var(--prg-green);
    height: 40px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-tap-highlight-color: transparent;
}

.rolling_track {
    transition: transform 0.5s ease-in-out;
}

.rolling_item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    letter-spacing: -0.3px;
    cursor: pointer;
}

.rolling_item .badge {
    background: rgba(234, 230, 218, 0.15);
    color: var(--prg-beige);
    border: 1px solid rgba(234, 230, 218, 0.3);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 10px;
    font-weight: 600;
}

.rolling_item strong {
    color: #fff;
    font-weight: 500;
}

/* ============================================================
     🔥 4. 버튼 공통 (전역 디자인 오버라이딩 방지)
  ============================================================ */
.prg_btn_group {
    display: flex;
    height: 60px;
    margin: 0;
    padding: 0;
}

.prg_btn_group * {
    -webkit-tap-highlight-color: transparent !important;
}

.prg_btn,
.prg_btn:link,
.prg_btn:visited,
.prg_btn:hover,
.prg_btn:focus,
.prg_btn:active {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.5px !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    border-radius: 0 !important;
}

.prg_btn svg {
    width: 22px;
    height: 22px;
    transition: transform 0.2s;
}

/* [전화상담 버튼] */
.btn_call,
.btn_call:link,
.btn_call:visited,
.btn_call:focus {
    background-color: #ffffff !important;
    color: var(--prg-green) !important;
    border-top: 1px solid #E2E8F0 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

.btn_call:hover,
.btn_call:active {
    background-color: #f8f9fa !important;
    color: var(--prg-green) !important;
}

.btn_call svg {
    fill: var(--prg-green) !important;
}

.btn_call:active svg {
    transform: scale(0.95);
}

/* [방문예약 버튼] */
.btn_reserve,
.btn_reserve:link,
.btn_reserve:visited,
.btn_reserve:focus {
    background-color: var(--prg-beige) !important;
    color: #111 !important;
    border: none !important;
    border-top: 1px solid var(--prg-beige) !important;
}

.btn_reserve:hover,
.btn_reserve:active {
    background-color: var(--prg-beige-dark) !important;
    color: #111 !important;
}

.btn_reserve svg {
    fill: #111 !important;
}

.btn_reserve:active svg {
    transform: scale(0.95);
}


/* ============================================================
     📌 5. 특별혜택 안내 모달 (방문예약용)
  ============================================================ */
.prg_modal_overlay {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.prg_modal_overlay.active {
    opacity: 1;
    visibility: visible;
}

.prg_modal {
    background: #fff;
    width: 85%;
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.prg_modal_overlay.active .prg_modal {
    transform: translateY(0);
}

.modal_header {
    background: var(--prg-green);
    color: var(--prg-beige);
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal_close {
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

.modal_body {
    padding: 30px 20px;
    text-align: center;
    color: #444;
    font-size: 15px;
    line-height: 1.6;
    word-break: keep-all;
}

.modal_body h3 {
    color: var(--prg-green);
    font-size: 20px;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    font-weight: 700;
}

.modal_btn,
.modal_btn:link,
.modal_btn:visited,
.modal_btn:hover,
.modal_btn:focus {
    width: 100%;
    background-color: var(--prg-beige) !important;
    color: #111 !important;
    border: none !important;
    outline: none !important;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 20px;
    text-decoration: none !important;
    display: inline-block;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent !important;
    transition: 0.2s;
}

.modal_btn:active {
    background-color: var(--prg-beige-dark) !important;
}


/* ============================================================
     📞 6. PC 환경 전화 안내 팝업 (모바일은 즉시 연결)
  ============================================================ */
.prg_call_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.prg_call_modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

.prg_call_box {
    position: relative;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    background: #ffffff;
    padding: 50px 40px 45px;
    text-align: center;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border-top: 4px solid var(--prg-green);
    border-radius: 8px;
}

.prg_call_modal.is-active .prg_call_box {
    transform: translateY(0);
}

.prg_call_x {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    opacity: 0.4;
}

.prg_call_x:hover {
    transform: rotate(90deg);
    opacity: 1;
}

.prg_call_x::before,
.prg_call_x::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 1.5px;
    background: #222;
}

.prg_call_x::before {
    transform: rotate(45deg);
}

.prg_call_x::after {
    transform: rotate(-45deg);
}

.prg_call_title {
    font-size: 20px;
    font-weight: 700;
    color: var(--prg-green);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.prg_call_number {
    font-family: 'Cinzel', serif;
    font-size: 44px;
    font-weight: 700;
    color: var(--prg-green);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    line-height: 1;
}

.prg_call_info {
    font-size: 14.5px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
    word-break: keep-all;
}

.prg_call_info b {
    color: var(--prg-green);
}

.prg_call_close_btn,
.prg_call_close_btn:link,
.prg_call_close_btn:visited,
.prg_call_close_btn:hover,
.prg_call_close_btn:focus,
.prg_call_close_btn:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0px;
    border-radius: 6px;
    background-color: #f4f4f4 !important;
    color: #333 !important;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #e0e0e0 !important;
    text-decoration: none !important;
    outline: none !important;
}

.prg_call_close_btn:hover {
    background-color: var(--prg-green) !important;
    color: #fff !important;
    border-color: var(--prg-green) !important;
}


/* ===== Extracted style attributes ===== */
.u-extracted-style-001 {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

.u-extracted-style-002 {
    background-image: url("./images/xi-main2.webp");
    z-index: 0;
    filter: none;
    opacity: 0;
    translate: none;
    rotate: none;
    scale: none;
    transform: scale(1.15, 1.15);
}

.u-extracted-style-003 {
    background-image: url("./images/xi-main.webp");
    translate: none;
    rotate: none;
    scale: none;
    transform: translate3d(0px, 0px, 0px) scale(1.1019, 1.1019);
    z-index: 1;
    opacity: 0.98;
    filter: url("#liquid-filter");
}

.u-extracted-style-004 {
    background-image: url("./images/xi-main.webp");
    translate: none;
    rotate: none;
    scale: none;
    transform: translate3d(0px, 0px, 0px) scale(1.0076, 1.0076);
    z-index: 0;
    opacity: 1;
    filter: none;
}

.u-extracted-style-005 {
    translate: none;
    rotate: none;
    scale: none;
    opacity: 1;
    transform: translate(0px, 0%);
}

.u-extracted-style-006 {
    translate: none;
    rotate: none;
    scale: none;
    opacity: 1;
    transform: translate(0px, 0%);
}

.u-extracted-style-007 {
    white-space: nowrap;
}

.u-extracted-style-008 {
    translate: none;
    rotate: none;
    scale: none;
    opacity: 1;
    transform: translate(0px, 0%);
}

.u-extracted-style-009 {
    opacity: 1;
}

.u-extracted-style-010 {
    background-image: url('./images/xi-road.png');
}

.u-extracted-style-011 {
    background-image: url('./images/xi-main.webp');
}

.u-extracted-style-012 {
    background-image: url('./images/xi-emart.jpg');
}

.u-extracted-style-013 {
    background-image: url('./images/xi-samsung.jpg');
}

.u-extracted-style-101 {
    background-image: url('./images/xi-cheonan_asan.jpg');
}

.u-extracted-style-102 {
    background-image: url('./images/xi-scholl.jpg');
}

.u-extracted-style-014 {
    width: 100vw;
    max-width: 100%;
    height: 15svh;
    background: #000;
    position: relative;
    margin-left: calc(-50vw + 50%);
}

.u-extracted-style-015 {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    color: var(--p-green);
}

.u-extracted-style-016 {
    background-image: url('./images/xi-design-wide.png');
}

.u-extracted-style-017 {
    background-image: url('./images/xi-main2.webp');
}

.u-extracted-style-018 {
    background-image: url('./images/xi-main.webp');
}

.u-extracted-style-019 {
    color: var(--p-green);
    font-weight: 800;
    margin-bottom: 10px;
    display: block;
}

.u-extracted-style-020 {
    color: var(--p-green);
    font-weight: 800;
    margin-bottom: 10px;
    display: block;
}

.u-extracted-style-021 {
    color: var(--p-green);
    font-weight: 800;
    margin-bottom: 10px;
    display: block;
}

.u-extracted-style-022 {
    text-align: center;
}

.u-extracted-style-023 {
    background: var(--prg-teal);
    color: #fff;
    border: none;
}

.u-extracted-style-024 {
    background: var(--prg-teal);
    color: #fff;
    border: none;
}

.u-extracted-style-025 {
    margin-top: 100px;
}

.u-extracted-style-026 {
    text-align: center;
}

.u-extracted-style-027 {
    background: var(--prg-teal);
    color: #fff;
    border: none;
}

.u-extracted-style-028 {
    margin-bottom: 0;
}

.u-extracted-style-029 {
    background: var(--prg-teal);
    color: #fff;
    border: none;
}

.u-extracted-style-030 {
    background-image: url('./images/xi-main2.webp');
}

.u-extracted-style-031 {
    background-image: url('./images/xi-life.jpg');
}

.u-extracted-style-032 {
    background-image: url('./images/xi-type.jpg');
}

.u-extracted-style-033 {
    background-image: url('./images/xi-counselor.png');
}

.u-extracted-style-034 {
    margin-top: 50px;
}

.u-extracted-style-035 {
    border-bottom: none;
}

.u-extracted-style-036 {
    display: none;
}

.u-extracted-style-037 {
    margin-bottom: 30px;
}

.u-extracted-style-038 {
    width: 100%;
}

.u-extracted-style-039 {
    transition: transform 0.5s ease-in-out;
    transform: translateY(-40px);
}

/* =========================================================
   07. 아산탕정자이 최종 정리본
   - 중복 미디어쿼리/오버라이드 통합
   - key color: #002e48
========================================================= */
:root {
    --xi-key: #002e48;
    --xi-key-dark: #001d2d;
    --xi-key-soft: rgba(0, 46, 72, 0.09);
    --xi-gold: #d8b56d;
}

/* 아산탕정자이: 전체 10개 타입 버튼 노출
   59A/59B, 84A/84B/84C/84D/84E, 125PA/125PB/125PC */
#prugio-unit-section .u-tabs-layout .u-tab-group,
#prugio-unit-section .u-tabs-layout .u-tab-chip {
    display: inline-flex !important;
}

#prugio-unit-section .u-tabs-layout {
    gap: 20px !important;
    flex-wrap: wrap !important;
}

#prugio-unit-section .u-chip-wrap {
    flex-wrap: wrap !important;
}

/* 메인 히어로: 검정 계열 오버레이 + 텍스트 쉐도우 */
#prg-hero-section .prg-overlay {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, .48) 50%, rgba(0, 0, 0, .72) 100%),
        radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .72) 100%) !important;
}

#prg-hero-section .prg-sub-title,
#prg-hero-section .prg-highlight,
#prg-hero-section .prg-main-title,
#prg-hero-section .prg-main-title span,
#prg-hero-section .prg-desc-text,
#prg-hero-section .prg-desc-text strong,
#prg-hero-section .prg-scroll-text {
    text-shadow: 0 2px 0 rgba(0, 0, 0, .65), 0 7px 16px rgba(0, 0, 0, .98), 0 16px 34px rgba(0, 0, 0, .92) !important;
}

#prg-hero-section .prg-sub-title,
#prg-hero-section .prg-highlight {
    color: #f1d28f !important;
    -webkit-text-fill-color: #f1d28f !important;
    background: none !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

#prg-hero-section .prg-main-title,
#prg-hero-section .prg-main-title span,
#prg-hero-section .prg-desc-text,
#prg-hero-section .prg-desc-text strong {
    color: #fff !important;
    opacity: 1 !important;
}

#prg-hero-section .prg-scroll-text {
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .82) !important;
}

/* SIGNATURE PRIVILEGE: 박스 제거 + 검정 쉐도우 */
#sec03-ultimate-fullscreen.promo-strong-section .fs-overlay,
#sec03-ultimate-fullscreen .fs-overlay {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .54) 52%, rgba(0, 0, 0, .80) 100%),
        radial-gradient(circle at center, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .78) 100%) !important;
}

#sec03-ultimate-fullscreen.promo-strong-section .fs-content {
    max-width: 1180px;
    text-align: center;
}

#sec03-ultimate-fullscreen .promo-intro-box .fs-eyebrow,
#sec03-ultimate-fullscreen .promo-copy-box .fs-num,
#sec03-ultimate-fullscreen .fs-num {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    margin-bottom: 22px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffe2a2 !important;
    font-weight: 800 !important;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, .8), 2px 0px 3px rgba(0, 0, 0, .98) !important;
}

#sec03-ultimate-fullscreen .promo-intro-box .fs-title,
#sec03-ultimate-fullscreen .promo-intro-box .fs-title span {
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: clamp(3rem, 6vw, 6.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.07em !important;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, .78), 7px 13px 25px rgba(0, 0, 0, .98) !important;
}

#sec03-ultimate-fullscreen .promo-intro-box .fs-title span {
    color: #ffe2a2 !important;
    font-size: 120% !important;
}

#sec03-ultimate-fullscreen .promo-title {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px !important;
    font-family: 'Pretendard', sans-serif !important;
    line-height: 1.06 !important;
    letter-spacing: -0.07em !important;
}

#sec03-ultimate-fullscreen .promo-line,
#sec03-ultimate-fullscreen .promo-line.dark,
#sec03-ultimate-fullscreen .promo-line.gold {
    display: inline-block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: clamp(3.4rem, 7.5vw, 7.8rem);
    font-weight: 950;
    line-height: 1.03;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .9), 0 8px 12px rgba(0, 0, 0, 1), 0 18px 36px rgba(0, 0, 0, .98) !important;
}

#sec03-ultimate-fullscreen .promo-line.gold {
    color: #ffe4ad !important;
}

#sec03-ultimate-fullscreen .promo-line em {
    color: #ffd400 !important;
    font-style: normal !important;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 1), 0 8px 14px rgba(0, 0, 0, 1), 0 0 18px rgba(255, 212, 0, .45) !important;
}

#sec03-ultimate-fullscreen .promo-desc {
    display: block !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: clamp(1.25rem, 2vw, 1.8rem) !important;
    font-weight: 650 !important;
    line-height: 1.65 !important;
    letter-spacing: -0.04em !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .88), 0 7px 14px rgba(0, 0, 0, 1), 0 16px 32px rgba(0, 0, 0, .98) !important;
}

#sec03-ultimate-fullscreen .fs-watermark {
    color: rgba(255, 255, 255, .055) !important;
    text-shadow: none !important;
}

/* Location / Unit / Amenity / Form key color */
/* .loc-eyebrow strong,
.loc-title,
.feat-title span,
.feat-toggle-btn::before,
.feat-toggle-btn::after,
.feat-desc strong,
.point-text,
.g-text-block .eng-title,
.g-mob-text span,
.b-header .inner-title span,
.b-header .inner-title h2 b,
.u-main-title strong,
.u-group-label,
.u-spec-row strong,
.club-head .eng,
.club-head strong,
.wc-cap h4,
.half-cap {
  color: var(--xi-key) !important;
} */
.feat-toggle-btn,
.u-tab-chip.active,
.u-tab-chip:hover {
    border-color: var(--xi-key) !important;
}

.u-tab-chip.active,
.u-tab-chip:hover,
.feat-card.is-active .feat-toggle-btn {
    background: var(--xi-key) !important;
    color: #fff !important;
}

.feat-card.is-active .feat-toggle-btn::before,
.feat-card.is-active .feat-toggle-btn::after {
    background: #fff !important;
}

#prugio-unit-section {
    --p-green: var(--xi-key) !important;
}

.u-bg-typography {
    color: rgba(0, 46, 72, .045) !important;
}

.gaon-vip-form-wrapper {
    background-color: var(--xi-key) !important;
}

.gaon-custom-btn,
.btn-confirm {
    color: var(--xi-key) !important;
}

.gaon-radio-wrap input[type='radio'] {
    accent-color: var(--xi-key) !important;
}

.elementor-shortcode {
    background-color: #02263a;
}

.mo_quick_bottom_wrap {
    --prg-green: var(--xi-key) !important;
}

.pulse_dot,
.prg_rolling_banner {
    background: var(--xi-key) !important;
}

.btn_call,
.btn_call:link,
.btn_call:visited,
.btn_call:focus {
    color: var(--xi-key) !important;
}

.btn_call svg {
    fill: var(--xi-key) !important;
}

.club-sec.bg-gray .club-head .title-badge,
.club-sec.bg-dark .club-head .title-badge,
.club-head .title-badge {
    background: var(--xi-key) !important;
    border: 1px solid var(--xi-key) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* UNIT PLAN 아이소 이미지 / PC 2단 배치 */
#prugio-unit-section .u-visual-view img.u-iso-img {
    width: 82%;
    max-width: 520px;
    max-height: 60%;
    object-fit: contain;
    margin: 0 auto 24px;
    display: block;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .28));
}

#prugio-unit-section .u-visual-view .u-iso-pair {
    width: 84%;
    max-width: 560px;
    max-height: 66%;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#prugio-unit-section .u-visual-view .u-iso-pair img.u-iso-img {
    width: 100%;
    max-width: 100%;
    max-height: calc((100% - 10px) / 2);
    margin: 0;
}


/* 모바일 커뮤니티: 좌우 스와이프 제거 */


/* BENEFIT 모바일: loc-container 방식의 세로 아코디언 */
#prugio-benefit-section .b-item h3 strong,
#prugio-benefit-section .b-desc strong {
    color: var(--xi-key);
    font-weight: 800;
}


/* 예약 이동 보정 */
#reservation_center {
    scroll-margin-top: 90px;
}


/* =========================================================
   최종 수정: 첫 진입은 상단 / 사전예약 X 버튼 정리
========================================================= */
html {
    scroll-behavior: auto;
}

#reservation_center {
    scroll-margin-top: 90px;
}


/* 사전예약 팝업 X 버튼: 글자 X 대신 선으로 그려서 깨끗하게 표시 */
#prgModal .modal_header {
    gap: 12px;
}

#prgModal .modal_close {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
}

#prgModal .modal_close::before,
#prgModal .modal_close::after {
    content: "" !important;
    position: absolute !important;
    width: 15px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: #ffffff !important;
    left: 50% !important;
    top: 50% !important;
    transform-origin: center !important;
}

#prgModal .modal_close::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

#prgModal .modal_close::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

#prgModal .modal_close span {
    display: none !important;
}

#prgModal .modal_close:hover,
#prgModal .modal_close:focus-visible {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    transform: rotate(90deg) !important;
}

/* PC 전화 안내 팝업 X도 동일한 느낌으로 정리 */
.prg_call_x {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #f1f4f6 !important;
    opacity: 1 !important;
}

.prg_call_x::before,
.prg_call_x::after {
    width: 15px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: #002e48 !important;
}


/* =========================================================
   FINAL PATCH 2026-05-27
   - /asan_tangjeong_xi favicon/manifest path는 index.html에서 절대경로로 처리
   - 첫 진입은 상단, 버튼 클릭 시에만 상담폼 이동
   - 사전예약 특별안내 X 버튼은 일반 X 텍스트로 표시
========================================================= */
html {
    scroll-behavior: auto;
}

#reservation_center {
    scroll-margin-top: 90px;
}


/* 사전예약 특별안내 팝업 X: 선 아이콘 제거, 일반 X로 표시 */
#prgModal .modal_header {
    gap: 12px;
}

#prgModal .modal_close {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: none !important;
}

#prgModal .modal_close::before,
#prgModal .modal_close::after {
    content: none !important;
    display: none !important;
}

#prgModal .modal_close:hover,
#prgModal .modal_close:focus-visible {
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    transform: none !important;
    opacity: 0.75 !important;
}

/* PC 전화 안내 팝업 X는 깔끔한 선형 X 유지 */
.prg_call_x {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #f1f4f6 !important;
    opacity: 1 !important;
}

.prg_call_x::before,
.prg_call_x::after {
    width: 15px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: #002e48 !important;
}


/* =========================================================
   COMMUNITY - CLUB XIAN 통이미지 처리
   - 가로 스크롤 제거
   - 모바일에서 이미지 잘림 방지
   - 그냥 한 장 이미지처럼 세로로 보이게 처리
========================================================= */

.prg-club-wrap .drag-hint,
.prg-club-wrap .mo-swipe-hint {
    display: none !important;
}

.prg-club-wrap .bp-box {
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 5% !important;
}

.prg-club-wrap .bp-scroll {
    width: 100% !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    cursor: default !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}

.prg-club-wrap .bp-scroll:active {
    cursor: default !important;
}

.prg-club-wrap .bp-scroll::-webkit-scrollbar {
    display: none !important;
}

.prg-club-wrap .bp-scroll img {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 1500px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    filter: none !important;
    transform: none !important;
}

/* 모바일에서는 좌우 여백만 줄이고 통이미지 유지 */


/* =========================================================
   BENEFIT 포인트 단어만 볼드 처리
========================================================= */

.prugio-benefit-section .b-item h3 {
    font-weight: 400 !important;
    color: #ffffff;
}

.prugio-benefit-section .b-item h3 strong {
    font-weight: 900 !important;
    color: #ffffff;
}

.prugio-benefit-section .b-desc {
    font-weight: 400 !important;
}

.prugio-benefit-section .b-desc strong {
    font-weight: 800 !important;
    color: #ffffff;
}

/* 모바일 아코디언에서도 동일하게 포인트만 강조 */


/* =========================================================
   FINAL FIX - BENEFIT 포인트 단어만 강조
   원인: 기존 마지막 CSS가 .prugio-benefit-section 클래스로 되어 있었는데
   실제 섹션은 id="prugio-benefit-section" 구조라 적용되지 않았습니다.
   이 코드는 style.css 맨 아래에 두면 됩니다.
========================================================= */

/* PC 기본: 전체 문장은 보통 굵기, strong만 굵게 */
#prugio-benefit-section .b-item .b-content h3 {
    font-weight: 400 !important;
    color: #ffffff !important;
}

#prugio-benefit-section .b-item .b-content h3 strong {
    font-weight: 900 !important;
    color: #ffffff !important;
}

#prugio-benefit-section .b-item .b-content .b-desc {
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

#prugio-benefit-section .b-item .b-content .b-desc strong {
    font-weight: 800 !important;
    color: #ffffff !important;
}

/* 모바일: loc-container처럼 일반 글씨는 얇게, 포인트 strong만 키컬러/볼드 */


/* =========================================================
   RESPONSIVE / MEDIA QUERY SECTION
   - 같은 조건의 @media를 한 곳으로 통합
   - 넓은 화면 조건 → 좁은 화면 조건 순서로 정리
========================================================= */

@media (prefers-reduced-motion: reduce) {

    /* ---- (prefers-reduced-motion: reduce) block 1 ---- */
    .wpcf7-spinner::before {
        animation-name: blink;
        animation-duration: 2000ms;
    }
}

@media (min-width: 769px) {

    /* ---- (min-width: 769px) block 1 ---- */
    .js-active .clip-l:not(.is-inview) {
        clip-path: inset(0 0 0 100%);
        transform: scale(1.05);
        opacity: 0;
    }

    .js-active .clip-l.is-inview {
        clip-path: inset(0 0 0 0);
        transform: scale(1);
        opacity: 1;
    }

    .js-active .clip-r:not(.is-inview) {
        clip-path: inset(0 100% 0 0);
        transform: scale(1.05);
        opacity: 0;
    }

    .js-active .clip-r.is-inview {
        clip-path: inset(0 0 0 0);
        transform: scale(1);
        opacity: 1;
    }
}

@media (min-width: 1025px) {

    /* ---- (min-width: 1025px) block 1 ---- */
    #prugio-unit-section .u-master-container {
        display: grid !important;
        grid-template-columns: minmax(360px, 460px) minmax(0, 1fr) !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(44px, 5vw, 90px) !important;
        max-width: 1500px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 clamp(36px, 4vw, 70px) !important;
    }

    #prugio-unit-section .u-left-panel {
        flex: none !important;
        width: 100% !important;
        max-width: 460px !important;
        margin: 0 !important;
        padding-top: 0 !important;
        align-self: center !important;
    }

    #prugio-unit-section .u-title-group,
    #prugio-unit-section .u-tabs-layout,
    #prugio-unit-section .u-data-container {
        width: 100% !important;
    }

    #prugio-unit-section .u-right-panel {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        align-self: center !important;
        position: relative !important;
    }

    #prugio-unit-section .u-circle-stage {
        width: min(50vw, 720px) !important;
        height: min(50vw, 720px) !important;
        min-width: 540px !important;
        min-height: 540px !important;
        max-width: 720px !important;
        max-height: 720px !important;
        margin: 0 !important;
        transform: translateY(-40px) !important;
    }

    #prugio-unit-section .u-visual-view img.u-iso-img {
        width: 82% !important;
        max-width: 590px !important;
        max-height: 62% !important;
    }
}

@media (max-width: 1024px) {

    /* ---- (max-width: 1024px) block 1 ---- */
    .gal-desktop {
        display: none !important;
    }

    .gal-mobile {
        display: block !important;
        padding: 80px 0;
    }

    .f-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* ---- (max-width: 1024px) block 2 ---- */
    #prugio-unit-section {
        padding: 80px 0;
        background-attachment: scroll;
    }

    .u-bg-typography {
        display: none;
    }

    .u-master-container {
        flex-direction: column;
        padding: 0 24px;
    }

    .u-left-panel {
        flex: 0 0 100%;
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
        align-items: center;
        padding-top: 0;
    }

    .u-title-group {
        margin-bottom: 30px;
    }

    .u-main-title {
        font-size: 38px;
        letter-spacing: 2px;
    }

    .u-subtitle {
        font-size: 14.5px;
        line-height: 1.6;
        word-break: keep-all;
        padding: 0 10px;
    }

    /* 모바일 탭 디자인 */
    .u-tabs-layout {
        width: 100%;
        align-items: center;
        gap: 12px;
        margin-bottom: 30px;
        padding-bottom: 25px;
    }

    .u-tab-group {
        width: 100%;
        max-width: 320px;
        justify-content: flex-start;
        gap: 15px;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
        padding-bottom: 10px;
    }

    .u-tab-group:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .u-group-label {
        font-size: 16px;
        width: 45px;
        text-align: left;
    }

    .u-tab-chip {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    /* [수정] 모바일에서 제원표 숨김 처리 */
    .u-data-container {
        display: none !important;
    }

    .u-right-panel {
        flex: 0 0 100%;
        width: 100%;
        margin-top: 10px;
    }

    /* 모바일에서는 원형 배경 대신 둥근 사각형 패널로 최적화 */
    .u-circle-stage {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
        border-radius: 12px;
        box-shadow: 0 15px 35px rgba(0, 76, 69, 0.2);
        display: block;
        padding: 40px 20px 30px;
        box-sizing: border-box;
    }

    .u-visual-view {
        position: relative;
        top: auto;
        left: auto;
        display: none;
    }

    .u-visual-view.active {
        display: flex;
        flex-direction: column;
        opacity: 1;
        visibility: visible;
    }

    /* [수정] 모바일 브라우저 주소창 변화 시 이미지 높이 리사이즈로 인한 꿀렁거림 방지 */
    .u-visual-view img {
        width: 100%;
        max-width: 400px;
        height: auto;
        max-height: 40svh;
        margin: 0 auto 25px auto;
        display: block;
        filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.25));
    }

    .u-type-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .u-type-title h3 {
        font-size: 24px;
        margin: 0;
    }

    .u-type-title p {
        font-size: 13px;
        word-break: keep-all;
    }

    /* ---- (max-width: 1024px) block 3 ---- */
    .ov-wrap,
    .ov-wrap.reverse {
        flex-direction: column;
        align-items: center;
        margin-bottom: 80px;
        gap: 0;
        padding: 0;
    }

    /* [수정 1] 가로 스크롤바 영역 간섭(흔들림)을 방지하기 위한 calc 단위 교체 */
    .ov-visual,
    .half-wrap {
        order: 1;
        width: 100vw !important;
        max-width: 100% !important;
        /* 흔들림 방지 코어 */
        margin-left: calc(-50vw + 50%) !important;
        /* 흔들림 방지 코어 */
        padding: 0 5vw 20px 5vw !important;
        margin-bottom: 0 !important;
        display: flex !important;
        gap: 15px !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .ov-visual::-webkit-scrollbar,
    .half-wrap::-webkit-scrollbar {
        display: none;
    }

    /* 2. 사진 증발 차단 방어: 투명도 1 고정 & 크기 고정 */
    .ov-main,
    .ov-sub,
    .half-item {
        position: relative !important;
        flex: 0 0 85% !important;
        max-width: 85% !important;
        height: 350px !important;
        border: none !important;
        border-radius: 12px !important;
        scroll-snap-align: center;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        background: #E5E7EB;
    }

    .bg-dark .half-item {
        background: #111;
    }

    /* 3. 사진 바깥으로 안전하게 빠진 스와이프 안내 문구 */
    .mo-swipe-hint {
        order: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--prg-teal);
        margin-top: 5px;
        margin-bottom: 25px;
        opacity: 0.8;
        letter-spacing: -0.02em;
    }

    .bg-dark .mo-swipe-hint {
        color: #fff;
        opacity: 0.9;
    }

    .mo-swipe-hint svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        margin-right: 5px;
        animation: swipeX 1.5s infinite;
        vertical-align: middle;
    }

    /* 4. 텍스트 박스는 슬라이드 밑에서 정돈됨 */
    .ov-txt {
        order: 3;
        width: 90% !important;
        margin: 0 auto !important;
        background: #fff;
        padding: 40px 30px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        position: relative;
        z-index: 5;
        text-align: left;
        border-bottom: 4px solid var(--prg-teal);
    }

    .bg-dark .ov-txt {
        background: #12241E;
        border-color: var(--prg-gold);
    }

    .ov-sub-cap,
    .half-cap {
        font-size: 18px !important;
        padding: 50px 20px 20px !important;
        text-align: left !important;
        word-break: keep-all !important;
        z-index: 2;
    }

    /* ---- (max-width: 1024px) block 4 ---- */
    #prugio-benefit-section {
        padding: 80px 0;
    }

    .b-accordion-container {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 0 20px;
        gap: 10px;
    }

    /* 모바일에서는 다시 Row 단위를 활성화하여 2개씩 묶음 */
    .b-row {
        display: flex;
        width: 100%;
        height: 350px;
        gap: 10px;
    }

    .b-item {
        flex: none;
        width: 22%;
        height: 100%;
    }

    .b-item.m-active {
        width: 78%;
    }

    .b-item:hover {
        flex: none;
    }

    .b-content {
        padding: 30px 20px;
    }

    .b-chance {
        top: 30px;
        left: 20px;
        font-size: 12px;
    }

    .b-item h3 {
        font-size: 22px;
        margin-bottom: 15px;
        white-space: normal;
    }

    .b-item .b-desc {
        font-size: 13.5px;
        opacity: 1;
        transform: none;
        display: none;
    }

    .b-item.m-active .b-desc {
        display: block;
    }

    .b-vertical-title {
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        writing-mode: vertical-rl;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 5px;
        white-space: nowrap;
    }

    .b-item.m-active .b-vertical-title {
        display: none;
    }

    /* ---- (max-width: 1024px) block 5 ---- */
    .asan_tangjeong_xi-top-right {
        width: 100%;
        text-align: left;
    }

    .gaon-slogan {
        text-align: left;
    }

    .glass-family-site {
        width: 100%;
    }

    .asan_tangjeong_xi-bottom-row {
        flex-direction: column;
        gap: 25px;
    }

    .asan_tangjeong_xi-vertical-line {
        display: none;
    }

    /* 모바일에서는 다시 세로 정렬로 변경하여 가독성 확보 */
    .company-title {
        display: block;
        margin-bottom: 8px;
    }

    .company-line {
        display: block;
        margin-right: 0;
    }

    .asan_tangjeong_xi-cs {
        text-align: left;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 20px;
        width: 100%;
    }

    /* ---- (max-width: 1024px) block 6 ---- */
    #clubWrap .drag-hint,
    #clubWrap .mo-swipe-hint {
        display: none !important;
    }

    #clubWrap .bp-box,
    #clubWrap .wide-cinema,
    #clubWrap .ov-wrap,
    #clubWrap .ov-wrap.reverse {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #clubWrap .bp-scroll,
    #clubWrap .half-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: auto !important;
        scroll-snap-type: none !important;
        cursor: default !important;
    }

    #clubWrap .half-wrap {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 0 !important;
    }

    #clubWrap .bp-scroll img,
    #clubWrap .half-item,
    #clubWrap .wide-cinema,
    #clubWrap .wc-inner {
        width: 100% !important;
        max-width: 100% !important;
    }

    #clubWrap .half-item,
    #clubWrap .wc-inner {
        /* flex: none !important;
        height: auto !important; */
        min-height: 0 !important;
        aspect-ratio: 16 / 10 !important;
        margin: 0 !important;
        scroll-snap-align: unset !important;
        transform: none !important;
        opacity: 1 !important;
        border-radius: 14px !important;
    }

    #clubWrap .half-item img,
    #clubWrap .wc-inner img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #clubWrap .club-sec {
        overflow-x: hidden !important;
    }

    /* ---- (max-width: 1024px) block 7 ---- */
    #prugio-benefit-section {
        padding: 86px 0 !important;
        background: #fdfdfc !important;
    }

    #prugio-benefit-section .b-header {
        margin-bottom: 54px !important;
        padding: 0 24px;
    }

    #prugio-benefit-section .b-header .bg-text {
        display: none !important;
    }

    #prugio-benefit-section .b-accordion-container {
        display: block !important;
        height: auto !important;
        max-width: 1200px !important;
        width: 100% !important;
        padding: 0 30px !important;
        margin: 0 auto !important;
    }

    #prugio-benefit-section .b-row {
        display: block !important;
        height: auto !important;
        width: 100% !important;
    }

    #prugio-benefit-section .b-item {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        cursor: pointer;
        border-radius: 0 !important;
        border-bottom: 1px solid #e5e5e5;
        overflow: hidden !important;
        background: transparent !important;
        transition: none !important;
    }

    #prugio-benefit-section .b-item:first-child {
        border-top: 1px solid #111;
    }

    #prugio-benefit-section .b-content {
        position: relative !important;
        inset: auto !important;
        min-height: 92px;
        padding: 25px 58px 25px 0 !important;
        display: block !important;
        color: #111 !important;
        z-index: 2;
    }

    #prugio-benefit-section .b-content::before,
    #prugio-benefit-section .b-content::after {
        content: '';
        position: absolute;
        right: 8px;
        top: 46px;
        background: var(--xi-key);
        transition: .35s ease;
    }

    #prugio-benefit-section .b-content::before {
        width: 18px;
        height: 1px;
    }

    #prugio-benefit-section .b-content::after {
        width: 1px;
        height: 18px;
        right: 16.5px;
        top: 37.5px;
    }

    #prugio-benefit-section .b-item.m-active .b-content::before,
    #prugio-benefit-section .b-item.m-active .b-content::after {
        transform: rotate(135deg);
        background: #fff;
    }

    #prugio-benefit-section .b-item.m-active .b-content::before,
    #prugio-benefit-section .b-item.m-active .b-content::after {
        background: #fff;
    }

    #prugio-benefit-section .b-item.m-active .b-content::before {
        right: 8px;
    }

    #prugio-benefit-section .b-item.m-active .b-content::after {
        right: 16.5px;
    }

    #prugio-benefit-section .b-item.m-active .b-content {
        padding-bottom: 30px !important;
    }

    #prugio-benefit-section .b-item.m-active .b-content::before,
    #prugio-benefit-section .b-item.m-active .b-content::after {
        background: #000;
    }

    #prugio-benefit-section .b-chance {
        position: static !important;
        display: block !important;
        margin: 0 0 8px !important;
        font-size: .78rem !important;
        color: var(--xi-key) !important;
        letter-spacing: .16em !important;
    }

    #prugio-benefit-section .b-chance::after {
        display: none !important;
    }

    #prugio-benefit-section .b-vertical-title {
        display: none !important;
    }

    #prugio-benefit-section .b-item h3 {
        margin: 0 !important;
        color: #111 !important;
        font-size: 1.34rem !important;
        line-height: 1.45 !important;
        letter-spacing: -.04em !important;
        white-space: normal !important;
    }

    #prugio-benefit-section .b-bg {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        margin: 0 0 20px !important;
        border-radius: 14px;
        overflow: hidden;
        background-size: cover !important;
        background-position: center !important;
        max-height: 0;
        opacity: 0;
        transform: translateY(-8px);
        transition: max-height .55s ease, opacity .35s ease, transform .35s ease, margin .35s ease;
    }

    #prugio-benefit-section .b-bg::after {
        display: none !important;
    }

    #prugio-benefit-section .b-item.m-active .b-bg {
        max-height: 420px;
        opacity: 1;
        transform: translateY(0);
        margin-top: 24px !important;
    }

    #prugio-benefit-section .b-desc {
        display: block !important;
        max-width: none !important;
        max-height: 0;
        margin: 0 !important;
        color: #555 !important;
        font-size: .98rem !important;
        line-height: 1.78 !important;
        opacity: 0 !important;
        transform: translateY(-8px) !important;
        overflow: hidden;
        transition: max-height .55s ease, opacity .35s ease, transform .35s ease, margin .35s ease;
    }

    #prugio-benefit-section .b-item.m-active .b-desc {
        max-height: 260px;
        margin-top: 14px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* ---- (max-width: 1024px) block 8 ---- */
    .prg-club-wrap .club-sec {
        padding: 80px 0 !important;
    }

    .prg-club-wrap .bp-box {
        padding: 0 16px !important;
    }

    .prg-club-wrap .bp-scroll {
        overflow: visible !important;
    }

    .prg-club-wrap .bp-scroll img {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* ---- (max-width: 1024px) block 9 ---- */
    .prugio-benefit-section .b-item h3 {
        font-weight: 400 !important;
    }

    .prugio-benefit-section .b-item h3 strong {
        font-weight: 900 !important;
        color: #002e48 !important;
    }

    .prugio-benefit-section .b-desc {
        font-weight: 400 !important;
    }

    .prugio-benefit-section .b-desc strong {
        font-weight: 800 !important;
        color: #002e48 !important;
    }

    /* ---- (max-width: 1024px) block 10 ---- */
    #prugio-benefit-section .b-item .b-content h3 {
        font-weight: 400 !important;
        color: #111111 !important;
    }

    #prugio-benefit-section .b-item .b-content h3 strong {
        font-weight: 900 !important;
        color: #002e48 !important;
    }

    #prugio-benefit-section .b-item .b-content .b-desc {
        font-weight: 400 !important;
        color: #555555 !important;
    }

    #prugio-benefit-section .b-item .b-content .b-desc strong {
        font-weight: 800 !important;
        color: #002e48 !important;
    }
}

@media (max-width: 991px) {

    /* ---- (max-width: 991px) block 1 ---- */
    .pc-br {
        display: none;
    }

    .mo-br {
        display: block;
        content: "";
    }
}

@media (max-width: 768px) {

    /* ---- (max-width: 768px) block 1 ---- */
    #prg-hero-section {
        min-height: 100svh;
    }

    .prg-main-title {
        font-size: clamp(2.4rem, 10vw, 3.2rem) !important;
        line-height: 1.25;
        letter-spacing: -0.02em;
    }

    .prg-sub-title {
        font-size: 0.95rem;
    }

    .prg-desc-text {
        font-size: 1rem;
        line-height: 1.7;
    }

    .prg-mb-sm {
        margin-bottom: 16px !important;
    }

    .prg-mb-lg {
        margin-bottom: 30px !important;
    }

    .prg-frame-border {
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    /* ---- (max-width: 768px) block 2 ---- */
    .b-item .b-bg {
        background-size: cover;
        background-position: 62% center;
    }

    .g-img-layer {
        background-size: cover;
        background-position: 62% center;
    }

    .fs-bg {
        background-size: cover;
        background-position: 62% center;
    }

    .prg-slide {
        background-size: cover;
        background-position: 62% center;
    }

    .fs-intro {
        background-size: cover;
        background-position: 62% center;
    }

    /* ---- (max-width: 768px) block 3 ---- */
    .fs-watermark {
        font-size: 10rem !important;
    }

    .fs-intro .fs-eyebrow {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
    }

    .fs-intro .fs-title {
        font-size: 2.1rem !important;
        line-height: 1.35 !important;
    }

    .scroll-indicator span {
        margin-bottom: 20px !important;
        font-size: 0.75rem !important;
    }

    .scroll-indicator .line {
        height: 50px !important;
    }

    .fs-num {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
    }

    .fs-main-title {
        font-size: 2.1rem !important;
        line-height: 1.35 !important;
        margin-bottom: 20px !important;
    }

    .fs-desc {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        padding: 0 15px !important;
    }

    .fs-desc br {
        display: none !important;
    }

    .fs-content {
        padding: 0 20px !important;
    }

    /* ---- (max-width: 768px) block 4 ---- */
    #sec-location {
        padding: 80px 0;
    }

    /* 모바일 헤더 설명글 최적화 */
    .loc-desc {
        font-size: 0.95rem;
        line-height: 1.65;
        padding: 0 10px;
    }

    /* 모바일에서는 PC용 줄바꿈 강제 해제 */
    .pc-br {
        display: none;
    }

    .loc-map-full {
        margin-top: 60px;
        margin-bottom: 80px;
    }

    .loc-features {
        grid-template-columns: 1fr;
        gap: 0;
        border-top: 1px solid #111;
    }

    .feat-card {
        border-bottom: 1px solid #e5e5e5;
        padding: 25px 30px;
    }

    .feat-accordion-header {
        cursor: pointer;
        margin-bottom: 0;
    }

    .feat-title {
        font-size: 1.3rem;
    }

    .feat-title span {
        font-size: 1.2rem;
    }

    .feat-toggle-btn {
        display: flex;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #C8B693;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: 0.4s;
        flex-shrink: 0;
        margin-left: 10px;
    }

    .feat-toggle-btn::before {
        content: '';
        position: absolute;
        width: 14px;
        height: 1px;
        background: #C8B693;
        transition: 0.4s;
    }

    .feat-toggle-btn::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 14px;
        background: #C8B693;
        transition: 0.4s;
    }

    .feat-card.is-active .feat-toggle-btn {
        background: #C8B693;
        transform: rotate(135deg);
    }

    .feat-card.is-active .feat-toggle-btn::before,
    .feat-card.is-active .feat-toggle-btn::after {
        background: #fff;
    }

    .feat-accordion-body {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .feat-card.is-active .feat-accordion-body {
        max-height: 1000px;
        opacity: 1;
        margin-top: 30px;
    }

    .feat-desc br {
        display: none;
    }

    /* ---- (max-width: 768px) block 5 ---- */
    .pc-only {
        display: none !important;
    }

    .m-only {
        display: inline-block !important;
    }

    .sig-container {
        padding: 0 24px !important;
    }

    /* 1. 히어로 섹션 스크롤 겹침 완전 해결 */
    .hero {
        height: auto !important;
        min-height: auto !important;
        padding: 140px 0 80px 0 !important;
        flex-direction: column;
        /* 세로 배열로 겹침 방지 */
    }

    .scroll-indicator {
        position: relative !important;
        /* 문서 흐름에 맞게 배치 */
        bottom: auto !important;
        margin-top: 50px;
    }

    /* 2. 프리미엄 6 특화설계 (그리드 파괴 방지 및 1단 배열 강제) */
    .features {
        padding: 60px 0 40px 0 !important;
    }

    .f-header {
        margin-bottom: 40px !important;
    }

    .f-grid {
        grid-template-columns: 1fr !important;
        /* 🚨 2단으로 나오는 오류 수정 (1단 배열 강제) */
        gap: 15px;
    }

    .f-card {
        padding: 40px 30px;
    }

    /* 3. 모바일 갤러리 하단 '누적 여백' 완벽 제거 */
    .gallery {
        padding-bottom: 0 !important;
    }

    .gal-mobile {
        padding: 40px 0 0 0 !important;
    }

    .g-mob-item {
        margin-bottom: 40px !important;
    }

    .g-mob-item:last-child {
        margin-bottom: 0 !important;
    }

    /* ---- (max-width: 768px) block 6 ---- */
    /* 모바일 클립패스 버그 원천 차단 */
    .reveal {
        clip-path: none !important;
    }

    .club-sec {
        padding: 90px 0;
    }

    .club-head {
        margin-bottom: 40px;
    }

    .club-head h2 {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .club-head p {
        font-size: 15px;
    }

    .zoom-btn {
        opacity: 1;
        width: 34px;
        height: 34px;
        top: 12px;
        right: 12px;
    }

    .zoom-btn svg {
        width: 16px;
        height: 16px;
    }

    .bp-scroll {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .drag-hint {
        font-size: 13px;
        padding: 8px 18px;
    }

    .wide-cinema {
        margin-bottom: 60px;
        padding: 0 5vw;
    }

    .wc-inner {
        border-radius: 12px;
        height: 320px;
        min-height: auto;
    }

    .wc-cap {
        padding: 5px 20px;
        border-radius: 0 0 12px 12px;
    }

    .wc-cap h4 {
        font-size: 22px;
    }

    .wc-cap p {
        font-size: 14px;
    }

    .ov-wrap,
    .ov-wrap.reverse {
        margin-bottom: 60px;
    }

    .ov-txt {
        width: 92% !important;
        padding: 30px 20px !important;
    }

    .ov-txt h3 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    .ov-txt p {
        font-size: 14px !important;
    }

    .ov-main,
    .ov-sub,
    .half-item {
        height: 280px !important;
    }

    .half-cap,
    .ov-sub-cap {
        font-size: 16px !important;
        padding: 50px 15px 15px !important;
        line-height: 1.4;
        word-break: keep-all;
    }

    /* ---- (max-width: 768px) block 7 ---- */
    .lb-close {
        top: 15px;
        right: 20px;
        font-size: 35px;
    }

    .lb-dim img {
        max-width: 100vw;
        max-height: 70vh;
    }

    .lb-txt {
        font-size: 15px;
    }

    /* ---- (max-width: 768px) block 8 ---- */
    .gaon-vip-form-wrapper {
        padding: 50px 24px !important;
    }

    .gaon-title {
        font-size: 26px;
    }

    .gaon-form-row {
        flex-direction: column !important;
        min-height: auto;
        padding-bottom: 20px !important;
    }

    .gaon-form-label {
        width: 100% !important;
        border-right: none;
        padding: 15px 0 10px !important;
    }

    .gaon-input-group {
        width: 100% !important;
        padding: 0 !important;
    }

    .gaon-input {
        max-width: 100% !important;
    }

    .gaon-input-group-phone,
    .gaon-datetime-group {
        max-width: 100% !important;
    }

    .age-radio .wpcf7-form-control {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px !important;
    }

    /* ---- (max-width: 768px) block 9 ---- */
    #reservation_center {
        scroll-margin-top: 110px;
    }

    #prg-hero-section .prg-overlay {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .36) 0%, rgba(0, 0, 0, .58) 50%, rgba(0, 0, 0, .80) 100%),
            radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .80) 100%) !important;
    }

    #sec03-ultimate-fullscreen.promo-strong-section .fs-overlay,
    #sec03-ultimate-fullscreen .fs-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, .36) 0%, rgba(0, 0, 0, .62) 55%, rgba(0, 0, 0, .84) 100%) !important;
    }

    #sec03-ultimate-fullscreen .promo-line,
    #sec03-ultimate-fullscreen .promo-line.dark,
    #sec03-ultimate-fullscreen .promo-line.gold {
        max-width: 94vw !important;
        font-size: clamp(2.5rem, 13vw, 4.2rem);
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: 0 2px 0 rgba(0, 0, 0, .92), 0 7px 14px rgba(0, 0, 0, 1), 0 14px 28px rgba(0, 0, 0, .96) !important;
    }

    #sec03-ultimate-fullscreen .promo-title {
        gap: 8px;
        margin-bottom: 24px !important;
    }

    #sec03-ultimate-fullscreen .promo-desc {
        width: calc(100% - 28px) !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 1.05rem !important;
        text-shadow: 0 2px 0 rgba(0, 0, 0, .88), 0 6px 12px rgba(0, 0, 0, .98) !important;
    }

    #sec03-ultimate-fullscreen .promo-desc br {
        display: none;
    }

    #prugio-unit-section .u-visual-view img.u-iso-img {
        width: 100%;
        max-width: 620px;
        max-height: 44svh;
    }

    #prugio-unit-section .u-visual-view .u-iso-pair {
        width: 100%;
        max-width: 620px;
        max-height: none;
        gap: 14px;
    }

    /* ---- (max-width: 768px) block 10 ---- */
    #reservation_center {
        scroll-margin-top: 110px;
    }

    /* ---- (max-width: 768px) block 11 ---- */
    #reservation_center {
        scroll-margin-top: 110px;
    }

    /* ---- (max-width: 768px) block 12 ---- */
    /* PREMIUM 4: 모바일에서 이미지/패널 높이를 텍스트 높이에 맞춤 */
    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 76px 0 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) .fs-bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        background-size: cover !important;
        background-position: center center !important;
        animation: none !important;
        transform: none !important;
    }

    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) .fs-overlay {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
    }

    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) .fs-content {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: 520px !important;
        padding: 0 24px !important;
    }

    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) .fs-watermark {
        font-size: 8rem !important;
        opacity: 0.45 !important;
    }

    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) .promo-title {
        margin-bottom: 18px !important;
        gap: 4px !important;
    }

    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) .promo-line {
        font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
        line-height: 1.15 !important;
    }

    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) .promo-desc {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-top: 12px !important;
    }
}

@media (max-width: 480px) {

    /* ---- (max-width: 480px) block 1 ---- */
    .prg-main-title {
        font-size: clamp(2.2rem, 8.5vw, 2.6rem) !important;
    }

    .prg-sub-title {
        font-size: 0.85rem;
        letter-spacing: 0.15em;
    }

    .prg-desc-text {
        font-size: 0.95rem;
    }

    /* ---- (max-width: 480px) block 2 ---- */
    .b-item .b-bg {
        background-size: cover;
        background-position: 65% center;
    }

    .g-img-layer {
        background-size: cover;
        background-position: 65% center;
    }

    .fs-bg {
        background-size: cover;
        background-position: 65% center;
    }

    .prg-slide {
        background-size: cover;
        background-position: 65% center;
    }

    .fs-intro {
        background-size: cover;
        background-position: 65% center;
    }

    /* ---- (max-width: 480px) block 3 ---- */
    #prg-hero-section .prg-main-title {
        font-size: clamp(3rem, 16vw, 4.3rem) !important;
    }

    #prg-hero-section .prg-desc-text {
        font-size: 1rem !important;
    }

    /* ---- (max-width: 480px) block 4 ---- */
    /* PREMIUM 4: 아주 작은 화면 보정 */
    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) {
        padding: 64px 0 !important;
    }

    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) .promo-line {
        font-size: clamp(2rem, 11vw, 3.1rem) !important;
    }

    #sec03-ultimate-fullscreen .fs-panel:not(.fs-intro) .promo-desc {
        font-size: 0.95rem !important;
    }
}

/* 방문일시 date input 달력 아이콘 흰색 처리 */
#vipDate::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2);
    opacity: 1;
    cursor: pointer;
}
.promo-line-expected{
    font-size: 0.4em !important;
}