/* ==========================================================================
   STYLE PC (style-pc.css)
   
   [목차]
   1. 폰트 및 기본 레이아웃
   2. 헤더 (Header)
   3. 인트로 로딩 (Intro Loading)
   4. 3D 큐브 커서 (Custom Cursor) - [투명도 적용 완료]
   5. 공통 UI (사이드 팝업, 스크롤, 플로팅 버튼)
   6. 풀페이지 (FullPage.js)
   7. 메인 비주얼 (Main Section)
   8. 프리미엄 (Premium Section)
   9. 커뮤니티 (Community Section)
   10. 프리미엄 포인트 (Point Section)
   11. 관심고객/푸터 (Reservation Section)
   12. 반응형 처리 (Media Queries)
   ========================================================================== */

/* ==========================================================================
   1. 폰트 및 기본 레이아웃
   ========================================================================== */
#wrap {width:100%; min-width:1400px; max-width: 2560px; border:0; margin:0 auto; overflow:hidden;}
.home_pc {display:none}

@font-face {
    font-family: 'Gyeonggi_Batang_Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Batang_Regular.woff') format('woff');
    font-weight: 400; font-style: normal;
    font-display: swap;
}
.popup_wrap {display:none}


/* ==========================================================================
   2. 헤더 영역
   ========================================================================== */
header .nav a { font-size: 18px !important; font-weight: 600; }

header .logo-white .logo .header-logo-white {display:block}
header .logo-white .logo .header-logo-color {display:none}
header:hover .logo-white .logo .header-logo-white {display:none}
header:hover .logo-white .logo .header-logo-color {display:block}
header .gnb-white .nav a {color:#fff;}
header:hover .gnb-white .nav a {color:inherit}


/* ==========================================================================
   3. 인트로 로딩 (Intro Loading)
   ========================================================================== */
#intro_loading {
    position:fixed; display:flex; width:100%; height:100%; 
    background: transparent; 
    animation:intro-fadeOut 0.5s ease forwards 3.5s; 
    pointer-events:none; z-index: 1001;
    perspective: 1200px; 
}
@keyframes intro-fadeOut { 0% {visibility: visible;} 100% {visibility: hidden;} }

#intro_loading > div {
    width:100%; height:100%; background: #000000; 
    transform-origin: left center; transform-style: preserve-3d;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5); 
    animation: blindOpen 1.8s cubic-bezier(0.77, 0, 0.175, 1) forwards; 
    pointer-events:auto;
}
#intro_loading > div:nth-child(1) {animation-delay: 2.5s; z-index: 3;}
#intro_loading > div:nth-child(2) {animation-delay: 2.6s; z-index: 2;}
#intro_loading > div:nth-child(3) {animation-delay: 2.7s; z-index: 1;}

@keyframes blindOpen { 0% {transform: rotateY(0deg); opacity: 1;} 100% {transform: rotateY(-95deg); opacity: 0;} }

.intro-txt-wrap {
    display:flex; flex-direction:column; align-items: center; justify-content: center; 
    color:#fff; text-align:center; height:100vh; 
    transform: translateY(-30px); animation: intro-fadeInDown 1.5s ease forwards 0.5s; opacity:0; backface-visibility: hidden; 
}  
.intro-txt-wrap span {opacity:0.8; font-size:20px; font-weight:500; line-height:2;}
.intro-txt-wrap p {display: flex; flex-direction: column; align-items: center;font-size:32px; font-weight:500;}
.intro-txt-wrap p:after {content:''; position:relative; width:1px; height:50px; background:#fff; margin:20px 10px;}
.loading_logo {width:200px; padding-bottom:0px;}
@keyframes intro-fadeIn {to {opacity: 1;}}  
@keyframes intro-fadeInDown {to {opacity: 1; transform: translateY(0);}}  


/* ==========================================================================
   4. 돋보기 커서 (Magnifying Glass Cursor) - [투명/확대 강화]
   ========================================================================== */
/* 1. 커서 전체 컨테이너 */
#cube-cursor-wrap {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none; /* 클릭 방해 금지 */
    z-index: 999999;
}

/* 2. 돋보기 본체 (움직임 및 크기 제어) */
.cube-box {
    position: absolute;
    width: 60px; height: 60px; /* 기본 크기 */
    transform: translate(-50%, -50%); /* 마우스 중앙 정렬 */
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. 렌즈 (맑은 유리 질감) */
.cube-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* [핵심] 투명한 유리 질감 표현 */
    border-radius: 50%;
    border: 2px solid var(--color-main1); /* 골드 테두리 */
    
    /* 배경색을 거의 투명하게(0.01) 설정하고 블러만 남김 */
    background: rgba(255, 255, 255, 0.01); 
    backdrop-filter: blur(1.5px); /* 뒤가 선명하게 비치도록 블러 최소화 */
    
    /* 안쪽 그림자로 볼록한 렌즈 느낌 구현 (흰색 광택) */
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.3), 
                0 10px 20px rgba(0, 0, 0, 0.1); 
    
    box-sizing: border-box;
    transition: all 0.3s;
}

/* 4. 손잡이 (우측 하단) */
.cube-box::after {
    content: '';
    position: absolute;
    bottom: 2px; right: -12px; /* 렌즈 바깥 배치 */
    width: 6px; height: 26px;
    background: var(--color-main2); /* 골드 손잡이 */
    transform: rotate(-45deg);
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}


/* --- [상태별 인터랙션] --- */

/* Hover: 링크/버튼 위에서는 '대폭' 확대 */
.is-hover .cube-box {
    width: 120px; height: 120px; /* 60px -> 120px (2배 확대) */
}

/* 호버 시 렌즈 스타일 변경 */
.is-hover .cube-box::before {
    border-color: #fff; /* 테두리 화이트로 강조 */
    background: rgba(255, 255, 255, 0.05); /* 아주 살짝 밝아짐 */
    backdrop-filter: blur(0px); /* 글자가 더 잘 보이게 블러 제거 */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), /* 광택 강화 */
                0 15px 30px rgba(0, 0, 0, 0.2);
}

/* 호버 시 손잡이 위치 보정 */
.is-hover .cube-box::after {
    background: #fff; /* 손잡이 화이트 */
    bottom: 10px; right: -14px; /* 커진 크기에 맞춰 위치 조정 */
    height: 34px; /* 손잡이도 약간 길어짐 */
}

/* Active: 클릭 시 살짝 축소 (눌리는 느낌) */
.is-active .cube-box {
    transform: translate(-50%, -50%) scale(0.95);
}

/* 모바일 숨김 */
@media (max-width: 991px) { #cube-cursor-wrap { display: none; } }
/* ==========================================================================
   5. 공통 UI (사이드 팝업, 스크롤, 플로팅 버튼)
   ========================================================================== */
/* 사이드 팝업 */
.side_pop_wrap {position:fixed; display:flex; align-items:center; left:0; top:25%; z-index: 102; transition:0.6s; transform:translateX(calc(-100% + 50px)); }
.side_pop_wrap.open {transform: translateX(0%);}  
.side_popupBtn {display: flex; align-items:center; justify-content: center; cursor: pointer; width:50px; height:160px; background:#383531; border-top-right-radius:10px; border-bottom-right-radius:10px; z-index:102;}
.side_popupBtn p {display: block; line-height: 1.2; font-size:18px; letter-spacing:-1px; font-weight:500; writing-mode:vertical-rl;color:#fff; cursor:pointer}
.side_popupBtn .side_popupBtn-txt {display:flex; flex-direction:column; padding-top: 10px; gap: 10px;}
.side_popupBtn .open-txt, .side_popupBtn .close-txt {display:none; color:var(--color-main1)} 
.side_popupBtn .close-txt {display:none;}  
.open .side_popupBtn .close-txt {display:block;}
.side_popupBtn .open-txt {display:block;}
.open .side_popupBtn .open-txt {display:none;}
.side_popupBtn .feather {color: #fff; stroke-width: 2px; cursor:pointer}
.open .side_popupBtn .feather {transform: rotate(180deg);}  
.side_popup_img, .side_popup_img ul {display: flex;}  
.side_popup_img ul li img {width:380px}

/* 스크롤 다운 아이콘 */
.scroll-down {
    position: fixed; display: flex; flex-direction: column; 
    align-items: center; right: 50px; top: 50%; 
    transform: translateY(-50%); 
    mix-blend-mode: difference; z-index: 100; cursor: pointer; gap: 20px;
}
.scroll-down p { display: flex; flex-direction: column; align-items: center; }
.scroll-down p span {
    line-height: 1.2; font-weight: 600; font-size: 13px; color: #fff; 
    letter-spacing: 4px; transform: rotate(90deg); 
}
.scroll-down .circle-rail {
    position: relative; margin-top: 0; width: 1px; height: 100px; 
    background: rgba(255, 255, 255, 0.3); overflow: hidden;
}
.scroll-down .scroll-down-circle {
    position: absolute; top: 0; left: 0; width: 100%; height: 50%; 
    background: linear-gradient(to bottom, transparent, #fff, transparent); 
    animation: scrollSheenDown 2.2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}
@keyframes scrollSheenDown {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}
@media (max-width: 1400px) { .scroll-down { display: none; } }

/* 플로팅 버튼 */
#visit-btn { position: fixed; right: 80px; bottom: 80px; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 15px; }
#visit-btn > div { display: flex; align-items: center; justify-content: center; height: 60px; width: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 10px rgba(0,0,0,0.15); overflow: hidden; transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); white-space: nowrap; cursor: pointer; border: 1px solid rgba(0,0,0,0.05); }
#visit-btn .feather { width: 24px; height: 24px; stroke: #555; stroke-width: 1.5px; flex-shrink: 0; transition: 0.3s; }
#visit-btn > div p { display: none; color: #333; padding-left: 10px; font-size: 15px; font-weight: 600; }
#visit-btn > div:hover { width: 160px; border-radius: 30px; background: #fff; }
#visit-btn > div:hover p { display: block; }
#visit-btn > div:hover .feather { stroke: var(--color-main2); }

#visit-btn .music-btn { background: #fff; }
#visit-btn .music-btn.on { border-color: var(--color-main2); }
#visit-btn .music-btn.on .feather { stroke: var(--color-main2); animation: spinMusic 3s linear infinite; }
@keyframes spinMusic { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#visit-btn .register-btn { background: var(--color-main1); }
#visit-btn .register-btn .feather { stroke: #fff; } 
#visit-btn .register-btn:hover { background: #5e5141; }
#visit-btn .register-btn:hover p { color: #fff; }
#visit-btn .video-btn { display: none; }


/* ==========================================================================
   6. 풀페이지 (FullPage.js)
   ========================================================================== */
#fullpage { width:100%; height:100%;}
#fullpage .fp-tableCell {line-height: 0;}
body #fp-nav {margin-top:initial !important; transform: translateY(-50%);}
body #fp-nav ul {display: flex; flex-direction: column; gap: 30px;}
body #fp-nav .fp-tooltip {height:100%;}  
body #fp-nav ul li, body .fp-slidesNav ul li {display: flex; align-items: center; height:30px; margin:0;}
body #fp-nav ul li a span, body .fp-slidesNav ul li a span {background:var(--color-main2)}
body #fp-nav a span, body .fp-slidesNav a span {background:#fff0; opacity:0.8}
body #fp-nav a.active span {width: 18px !important; height:20px  !important; margin: -10px 0 0 -9px !important;} 
body .fp-tooltip, body #fp-nav.fp-show-active a.active+.fp-tooltip {font-weight:700; color: var(--color-main1);}
body #fp-nav ul li .fp-tooltip {position:relative; display:flex; align-items:center; top:initial; width:initial; opacity:1; overflow:visible; text-shadow: 1px 1px 2px rgb(0 0 0 / 30%); font-size:18px;}
body #fp-nav ul li:hover .fp-tooltip, body #fp-nav.fp-show-active a.active+.fp-tooltip {display:flex; align-items: center;}


/* ==========================================================================
   7. 메인 비주얼 (Main Section)
   ========================================================================== */
#main { position: relative; width: 100%; height: 100vh; overflow: hidden; background-color: var(--color-main1); }
.main-bg-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.slide-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: scale(1); animation: imageSlide 12s infinite linear; }
.slide-item:nth-child(1) { animation-delay: 0s; }
.slide-item:nth-child(2) { animation-delay: 6s; }
@keyframes imageSlide { 0% { opacity: 0; transform: scale(1); z-index: 1; } 5% { opacity: 1; } 50% { opacity: 1; transform: scale(1.05); z-index: 1; } 55% { opacity: 0; } 100% { opacity: 0; transform: scale(1.1); z-index: 0; } }

#main .main-tit-wrap {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%; text-align: center;
    background: radial-gradient( circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 70% );
    padding: 100px 0; border-radius: 50%; filter: blur(20px); width: 120%; left: -10%;
}

.text-box { display: flex; flex-direction: column; align-items: center; color: #fff; position: relative; z-index: 11; text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.5); }
.text-box .sub-eng { font-size: 16px; font-weight: 700; letter-spacing: 6px; color: var(--color-main1); margin-bottom: 20px; text-transform: uppercase; opacity: 0; animation: fadeInUp 1s ease forwards 0.5s; }
.text-box .main-kor { display: flex; flex-direction: column; line-height: 1.2; margin-bottom: 30px; font-family: 'Gyeonggi_Batang_Regular', serif; }
.text-box .main-kor .loc { font-size: 2rem; font-weight: 300; margin-bottom: 10px; opacity: 0; animation: fadeInUp 1s ease forwards 0.8s; }
.text-box .main-kor .brand { font-size: 5rem; font-weight: 700; letter-spacing: -2px; opacity: 0; animation: fadeInUp 1s ease forwards 1.1s; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", sans-serif; }
.text-box .gold-line { width: 1px; height: 0; background: var(--color-main3); margin-bottom: 30px; box-shadow: 0 0 10px rgba(0,0,0,0.5); opacity: 0; animation: growLine 1s ease forwards 1.4s; }
.text-box .desc { font-size: 1.3rem; font-weight: 400; color: #f1f1f1; letter-spacing: 1px; opacity: 0; animation: fadeInUp 1s ease forwards 1.7s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes growLine { from { height: 0; width: 1px; opacity: 0; } to { height: 80px; width: 1px; opacity: 1; } }
@media (max-width: 991px) { .text-box .sub-eng { font-size: 12px; letter-spacing: 3px; } .text-box .main-kor .loc { font-size: 1.2rem; } .text-box .main-kor .brand { font-size: 2.8rem; } .text-box .desc { font-size: 1rem; width: 90%; word-break: keep-all; } }


/* ==========================================================================
   8. 프리미엄 (Premium Section)
   ========================================================================== */
#premium .Slider { display:flex; height:100%; perspective: 1500px; }
#premium .slideCon { position: relative; display:flex; flex:1; align-items: center; justify-content: center; padding-top:80px; background:var(--color-main1); transition: 0.4s all; transform-style: preserve-3d; transform-origin: left center; transform: rotateY(90deg); opacity: 0; }
#premium .slideCon:first-child {border-right:0; padding-left:50px;}  
.slideCon::before { content:""; width: 100%; height: 100%; position: absolute; left:0; top:0; transition: inherit; opacity:0; background: url(/assets-pc/img/pre-bg.jpg) center top / cover no-repeat; pointer-events: none; }
#premium .slideCon:hover::before {opacity:1;}
#premium.active .slideCon { animation: premiumBlindIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
#premium.active .slideCon:nth-child(1) { animation-delay: 0.2s; }
#premium.active .slideCon:nth-child(2) { animation-delay: 0.4s; }
#premium.active .slideCon:nth-child(3) { animation-delay: 0.6s; }
@keyframes premiumBlindIn { 0% { transform: rotateY(90deg); opacity: 0; } 100% { transform: rotateY(0deg); opacity: 1; } }

.slideCon .flexWrap {position: relative; display: flex; flex-direction:column; justify-content: center; align-items: center; gap: 10px; width:100%; height:100%; border-right:1px solid #dbdbdb;}
.slideCon .title {overflow:hidden}
.slideCon .title p {color: #c5c1b3; font-weight:300; font-size:3rem; line-height:1; letter-spacing:1px; transition:0.5s; font-family: 'Times New Roman', Times, serif;}
.slideCon .line {background:rgb(0 0 0 / 20%); height: 1px; width: 40px; margin: 4% auto;}
.slideCon .name {margin-bottom: 5%; color:#555; overflow:hidden}
.slideCon .name p {font-weight:600; font-size:2rem; transition:0.6s; opacity:0; transform:translateY(50px);} 
#premium.active .slideCon .name p {opacity:1; transform:translateY(0); transition-delay: 1s;} 
.slideCon .explain {display:flex; gap:10px; flex-direction:column; opacity:0; transition:1s all; padding-bottom: 20px;}
.slideCon .explain li {font-size:1.25rem; letter-spacing:-1px}
.slideCon .image {width:18vw; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 50%; transition: 0.5s;}
.slideCon .image img {width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: .5s ease;}
#premium .slideCon:nth-child(3) .image img, #premium .slideCon:nth-child(4) .image img {object-position: right;}

.slideCon:hover {flex: 0 0 35%;} 
.slideCon:hover:before {opacity: 1;}
.slideCon:hover .title p {color:#5e5141; letter-spacing:6px}
.slideCon:hover .name p {opacity:1;}
.slideCon:hover .explain {opacity: 1;}
.slideCon:hover .image {filter: grayscale(0); transform: scale(1.05);}
.slideCon:hover .image img {filter: grayscale(0);}


/* ==========================================================================
   9. 커뮤니티 (Community Section)
   ========================================================================== */
#community {background:url('/assets-pc/img/pre-bg.jpg') center center / cover no-repeat; padding-right: 100px; }  
#community .community_wrap {display:flex; justify-content:center; flex-direction:column; margin:0 auto; width:80%;}
#community .community_title {width:100%; padding: 80px 0 24px; display:flex; justify-content: space-between; align-items:flex-end;}
#community .community_title small {position:relative; font-size:28px; font-family: 'Times New Roman', Times, serif; font-size:40px; width:fit-content; white-space:nowrap; z-index:1;}
#community .community_title small span:first-child {font-family:"Marcellus", serif; color:var(--color-main2); font-size:40px;}
#community .community_title hr {width:40%; border-color:#dbdbdb}
#community .community_title span {position:relative; text-align:right; font-size:1.75rem; font-weight:500; width:fit-content; white-space:nowrap; }
#community .community_title > span:before {content: ''; position: absolute; width:16px; height:16px; top:3px; left: -7px; background:var(--color-main2); opacity: 1; border-radius: 20px; opacity:0.5}
#community .accordion {display: flex; overflow:hidden; width:100%}
#community .accordion li {margin-right:20px; border-radius: 30px;}
#community .accordion li:last-child {margin-right:0}
#community .accordion li:nth-child(2) h1 {font-size: 1.75rem;}
#community .accordion_item {position:relative; display:flex;  flex-grow: 1; justify-content:center; align-items:center; overflow:hidden; width:50px; transition: all 0.5s ease-out; margin-right:100px; height:580px;}
#community .accordion_item.active {width:700px; background-color: transparent !important;}
#community .accordion_item h1 , #community .accordion_item h2 {text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);}
#community .accordion_item h1 {position: absolute; writing-mode: vertical-rl; text-orientation: upright; font-size: 2rem; color: #fff; font-family: "Marcellus", serif; z-index: 1;}
#community .accordion_item.active h1 {opacity:0; transition:0.3s}
#community .accordion_item h2 {position:absolute; top:50px; letter-spacing:16px; font-size:22px; font-weight:500; color:#fff; text-align: center; min-width: 400px; transition: all 0.3s ease-in-out;}  
#community .accordion_item img {height:102%; filter:saturate(0) brightness(0.3); width: initial; max-width: initial;} 
#community .accordion_item.active img {filter:inherit}
#community .accordion_item.active .accordion_item_txt {height:30%; transition:0.3s; transition-delay:0.5s}
#community .accordion_item_txt {position: absolute; bottom:0; display:flex; align-items: center; flex-wrap: nowrap; flex-direction: column; justify-content: center; height:0%; width:100%; background:rgb(0 0 0 / 65%); overflow:hidden;}
#community .accordion_item_txt:before {content:'※이미지컷'; position:absolute; bottom:10px; left:10px; color:#aaa}
#community .accordion_item_txt span {font-size:36px; color:#fff; line-height:1.4; font-weight: 500; text-align:center; text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.8);}
#community .sub_txt {font-size: 20px; color:#dbdbdb;; overflow: hidden; transition: 0.5s; padding-top:5px; text-align:center;}


/* ==========================================================================
   10. 프리미엄 포인트 (Point Section)
   ========================================================================== */
#point { background: url(/assets-pc/img/pre-bg.jpg) no-repeat top/cover; background-attachment: fixed; }
#point .title { position: relative; text-align: right; width: 80%; margin: 0 auto; margin-top: 40px; opacity: 0; transform: translateY(-30px); transition: 1s ease; }
#point.active .title { opacity: 1; transform: translateY(0); }
#point .title:before { left: initial; right: -5px; background: var(--color-main2); }
#point .title h2 { color: var(--color-main3); font-size: 1.75rem; font-family: "Marcellus", serif; letter-spacing: 1.5px; }
#point .title h1 { padding-left: 0px; padding-right: 70px; font-size: 1.75rem; font-weight: 600; }
#point .title h1 span { color: #444; font-size: 1.7rem; padding-left: 4px; }

#point .benefit_list { width: 1320px; margin: 0 auto; margin-top: 2.5rem; }
#point .benefit_list > ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; width: 100%; height: 100%; }
#point .benefit_list > ul > li { position: relative; aspect-ratio: auto 3 / 2; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 5px 15px rgba(0,0,0,0.05); backdrop-filter: blur(10px); opacity: 0; transform: translateY(60px); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; cursor: default; }
#point.active .benefit_list > ul > li { opacity: 1; transform: translateY(0); }
#point.active .benefit_list > ul > li:nth-child(1) { transition-delay: 0.1s; }
#point.active .benefit_list > ul > li:nth-child(2) { transition-delay: 0.3s; }
#point.active .benefit_list > ul > li:nth-child(3) { transition-delay: 0.5s; }
#point.active .benefit_list > ul > li:nth-child(4) { transition-delay: 0.7s; }
#point.active .benefit_list > ul > li:nth-child(5) { transition-delay: 0.9s; }
#point.active .benefit_list > ul > li:nth-child(6) { transition-delay: 1.1s; }
#point .benefit_list > ul > li:hover { transform: translateY(-15px) scale(1.02); background: #fff; border-color: var(--color-main2); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); z-index: 2; }

#point .benefit_list .num { position: absolute; top: 0; left: 0; width: 90px; height: 90px; background: var(--color-main2); color: #fff; font-size: 22px; font-weight: 700; display: flex; align-items: flex-start; justify-content: flex-start; padding: 10px 0 0 12px; clip-path: polygon(0 0, 100% 0, 0 100%); transition: 0.3s; }
#point .benefit_list > ul > li:hover .num { background: #444; }

#point .txt_box { display: flex; flex-direction: column; text-align: center; justify-content: center; height: 100%; padding: 0 20px; }
#point .txt_box li:nth-child(1) { font-size: 15px; color: #999; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; transition: 0.3s; }
#point .benefit_list > ul > li:hover .txt_box li:nth-child(1) { color: var(--color-main2); }
#point .txt_box li p { color: #333; font-weight: 700; font-size: 1.8rem; line-height: 1.35; transition: 0.3s; }
#point .txt_box li p span { color: var(--color-main1); } 
#point .txt_box li:nth-child(3) { margin-top: 20px; font-size: 18px; color: #666; font-weight: 400; letter-spacing: -0.5px; position: relative; display: inline-block; }
#point .txt_box li:nth-child(3)::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0%; height: 1px; background: #666; transition: 0.4s; }
#point .benefit_list > ul > li:hover .txt_box li:nth-child(3)::after { width: 50%; }


/* ==========================================================================
   11. 관심고객/푸터 (Reservation Section) - [WHITE VER / 수정완료]
   ========================================================================== */
#reservation {
    background-color: #f9f8f7; /* 웜 화이트 배경색 */
    position: relative;
    overflow: hidden;
}

/* 배경 이미지 설정 (가상 요소) */
#reservation::before {
    content: '';
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    
    /* 이미지 경로 및 설정 */
    background-image: url('/assets-pc/img/pre-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    
    opacity: 1; /* 투명도: 1 (너무 흐리면 0.2로 올려보세요) */
    pointer-events: none;
    z-index: 0; /* 텍스트 뒤로 배치 */
}

/* 콘텐츠 래퍼 */
.reservation_wrap {
    position: relative;
    z-index: 1; /* 배경 이미지(z-index:0) 보다 위에 배치 */
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start;
    width: 80%; max-width: 1320px; 
    margin: 0 auto; 
    padding: 100px 0;
    box-sizing: border-box; 
    gap: 80px;
}

/* 좌측 텍스트 영역 */
.reservation_tit { 
    width: 50%; 
    display: flex; flex-direction: column; 
    align-items: flex-start; text-align: left; gap: 40px; 
}
.reservation_tit .logo { 
    width: 10rem; margin: 2rem 0; 
    filter: invert(1) brightness(1); /* 화이트 배경용 로고 색상 반전 */
}

.tit_block { width: 100%; margin-bottom: 2rem; }
.tit_block h4 { color: var(--color-main1); font-size: 1.5rem; font-weight: 600; margin-bottom: 12px; }
.tit_block p { color: #666; font-size: 1.1rem; line-height: 1.6; word-break: keep-all; }
.tit_block a { color: #888; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }

.tit_line { width: 0%; height: 1px; background-color: var(--color-main2); margin-bottom: 10px; transition: 0.3s; }
.active .tit_line { width: 100%; transition: 0.8s 1s; }

.tit_row { display: flex; gap: 40px; width: 100%; }
.tit_row .tit_block { flex: 1; }
.tit_notice p { color: #888; font-size: 0.9rem; line-height: 1.6; }
.tit_notice p:last-child { margin-bottom: 1rem; }
.tit_copyright p { color: #999; font-size: 0.9rem; }


/* 우측 카드 영역 */
.reservation_box { margin-top: 12%; width: 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.reservation_content {
    position: relative;
    display: flex; align-items: center; flex-direction: column; justify-content: center;
    padding: 50px 20px; 
    background: #fff; /* 카드 배경 화이트 */
    border: 1px solid #e5e5e5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    opacity: 0; transform: translateY(40px);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer; overflow: hidden;
}
.reservation_content .box_border { display: none; }

/* 등장 애니메이션 */
.active .reservation_content { opacity: 1; transform: translateY(0); }
.active .reservation_content:nth-child(1) { transition-delay: 0.2s; }
.active .reservation_content:nth-child(2) { transition-delay: 0.4s; }
.active .reservation_content:nth-child(3) { transition-delay: 0.6s; }
.active .reservation_content:nth-child(4) { transition-delay: 0.8s; }

/* 카드 내부 텍스트 */
.reservation_content .card-desc { font-size: 14px; color: #888; letter-spacing: 2px; margin-bottom: 12px; transition: 0.3s; }
.reservation_content .card-tit { font-size: 24px; color: var(--color-main1); font-weight: 700; letter-spacing: -1px; transition: 0.3s; }

/* 카드 호버 효과 */
.reservation_content:hover { 
    transform: translateY(-10px); 
    background: var(--color-main1); /* 호버 시 다크 반전 */
    border-color: var(--color-main1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
}
.reservation_content:hover .card-desc { color: var(--color-main2); }
.reservation_content:hover .card-tit { color: #fff; }

/* 화살표 아이콘 */
.reservation_content::after { content: '↗'; position: absolute; bottom: 15px; right: 15px; font-size: 20px; color: var(--color-main2); opacity: 0; transform: translate(-10px, 10px); transition: 0.4s; }
.reservation_content:hover::after { opacity: 1; transform: translate(0, 0); }


/* ==========================================================================
   12. 반응형 처리 (Media Queries)
   ========================================================================== */
@media (max-width: 991px) {
    #cube-cursor-wrap { display: none; }
    #wrap, .sound-follow-btn, #cursor_circle, header .bgm-toggle { display: none; }
    
    .text-box .sub-eng { font-size: 12px; letter-spacing: 3px; }
    .text-box .main-kor .loc { font-size: 1.2rem; }
    .text-box .main-kor .brand { font-size: 2.8rem; }
    .text-box .desc { font-size: 1rem; width: 90%; word-break: keep-all; }
}

@media (max-width: 1400px) {
    .scroll-down { display: none; }
}

@media (min-width: 2560px) {
    html { font-size: 20px; }
}