/* BASIC css start */
/* ================================================================
   스위티스푼 PC 메인 페이지 CSS
   [2026-08] 죽은 코드(파워리뷰/베스트상품/플로팅배너/탭02 카테고리/기획전/
   브랜드상품 등    현재 마크업에 없는 예전 섹션) 전부 제거, 남은 규칙은
   html.txt 마크업 순서와 동일하게 재배치함.
   ================================================================ */

#contentWrapper {width:auto !important; min-width:1380px;}

/* [2026-08] 우측 하단 고정 "방문예약" 버튼(.right_fixed) 숨김    부티크/퍼스널서비스 개별페이지와
   동일 처리. 메인에 부티크 상담예약 섹션·히어로 DISCOVER·기념일 SHOP NOW 등 예약 CTA가 이미 충분해서
   중복으로 하단에 떠 있던 것 같음(스크린샷 제보: "특별한 경험/부티크 상담예약 하단에 아이콘 노출") */
.right_fixed { display: none; }


/* ============================================================
   ① 히어로 (swiper1)    풀 뷰포트 배너 캐러셀
   ============================================================ */
/* 이전엔 <img style="width:100%;height:auto"> 때문에 이미지 실제 비율(1900x750)대로만
   줄어들어서 750px 박스 안에서 세로로 다 못 채우고 빈 여백이 남았음. object-fit:cover로
   박스를 항상 꽉 채우게 함(※ .swiper-slide a.bg 규칙은 실제 마크업이 <div class="bg">라서
   원래 안 먹던 죽은 규칙이었음   .bg로 정정) */
/* position:relative 필요   .pagi_warp가 position:absolute인데 이게 없으면 기준점이
   상위의 #contentWrapper(전체 페이지 높이)로 잡혀서 페이지네이션이 "페이지 맨 아래에서
   60px" 지점으로 멀리 떨어져 나갔음 */
/* [2026-08] overflow:hidden 누락이 가로 스크롤바 원인이었음    Swiper11 번들 CSS는 신규
   클래스(.swiper) 기준이라 이 사이트가 쓰는 구버전 클래스명(.swiper-container)엔
   overflow:hidden이 자동 적용 안 됨. 슬라이드 4장이 실제로는 가로로 나란히 배치돼있어서
   (최대 5520px), 이게 안 잘리고 그대로 문서 폭을 늘리고 있었음 */
.swiper1.swiper-container {width:100%; height:100vh; padding-bottom:40px; position:relative; overflow:hidden;}
.swiper1 .swiper-slide { height: 100%; }
.swiper1 .swiper-slide .bg { display: block; height: 100%; overflow: hidden; }
.swiper1 .swiper-slide .bg img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 모바일(m_main01.webp 슬라이더)과 동일한 볼타입 페이지네이션   100vh 히어로에
   맞춰 하단 여백만 조정(기존 -1px는 750px 고정 높이 시절 값) */
.swiper1 .swiper-pagination-bullets {bottom:40px !important;}
.swiper1 .swiper-pagination-bullet {margin:0 9px !important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.swiper1 .swiper-pagination-bullet {width:8px; height:8px; display:inline-block; border-radius:8px; background: none; opacity:0.7; border: 1px solid #fff;}
.swiper1 .swiper-pagination-bullet-active {opacity:1; background:#fff;}
.pagi_warp { position: absolute; left: 50%; transform: translateX(-50%); width: 150px; bottom: 60px; z-index: 1; }

/* 히어로 타이틀 오버레이   모바일 .hero-content와 동일한 구조/철학(서브타이틀+
   타이틀+DISCOVER 버튼, 하단 그라데이션으로 가독성 확보), PC 크기에 맞춰 확대 */
.swiper1 .hero-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.42));
  pointer-events: none;
  z-index: 2;
}
.swiper1 .hero-content {
  position: absolute;
  bottom: 130px; left: 0; right: 0;
  text-align: center;
  z-index: 5;
  padding: 0 20px;
}
.swiper1 .hero-subtitle {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,.85);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.swiper1 .hero-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 35px;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #fff;
    margin: 0 0 32px;
    line-height: 1.2;
}
/* [2026-08] 호버 시 특별한 경험 버튼(.experience_btn)과 동일한 스무스 스윕 방식   
   기본 노출은 흰 배경(::before, 위) + 어두운 텍스트, 호버 시 ::before가 위쪽을 축으로
   scaleY(0)로 줄어들면서 아래에서부터 검정 배경이 차오르듯 드러나고 텍스트는 흰색으로 전환 */
.swiper1 .hero-cta {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.25em;
  color: #3b3b3b;
  background-color: #000;
  padding: 14px 40px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
}
.swiper1 .hero-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: #fff;
  z-index: -1;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.4s ease;
}
.swiper1 .hero-cta:hover { color: #fff; }
.swiper1 .hero-cta:hover::before { transform: scaleY(0); }


/* ============================================================
   ② LOVE & ENGAGEMENT    상품 탭 캐러셀(WEDDING/COUPLE/FASHION)
   ============================================================ */
.main_content {width:100%; margin:0 auto;}
/* [2026-08] 특별한 경험·부티크 상담예약과 동일하게 1680px 중앙정렬로 통일
   (LOVE&ENGAGEMENT/기념일상품/신상품 3개 섹션이 이 클래스를 공유) */
.main-prd { max-width: 1680px; margin: 0 auto; }

.main_title {text-align:center; margin:90px auto 0; font-size:0px;}
.title_main { font-family: 'Josefin Sans', sans-serif; font-size: 35px; }
.title_sub { font-size: 18px; padding-bottom: 40px; }
.love_title_warp .title_main { font-size: 2.2rem; letter-spacing: 0.2rem; word-break: break-all; }
.love_title_warp .title_sub { letter-spacing: 0.02rem; font-size: 1.0rem; padding: 0.3% 0% 3% 0%; word-break: keep-all; }

.m_tab01_area {position:relative;}
.m_tab01 {display:table; margin:0 auto; font-size:0; font-family: 'PT Sans', sans-serif; }
.m_tab01 li {position:relative; display:inline-block; margin:0 26px; color:#7d7d7d; font-size:16px; text-align:center; line-height:24px; cursor:pointer; font-family: 'Josefin Sans', sans-serif;}
.m_tab01 li.current {color:#111; }
.m_tab01 .move:hover { color:#000; }
/* [2026-08] 밑줄을 상단 헤더 nav와 동일한 scaleX 방식으로 변경    항상 존재하되 기본은
   scaleX(0)으로 숨겨두고, current일 때만 왼쪽에서 오른쪽으로 부드럽게 나타남(기존엔
   current일 때만 ::after 자체가 생겨서 순간적으로 뚝 끊겨 나타났음) */
.m_tab01 li::after {content:""; position:absolute; height:3px; background-color:#000; bottom:-8px; left:0; width:100%; transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;}
.m_tab01 li.current::after {transform: scaleX(1);}

.tabcontent01 {display:none; margin-top:100px; padding:0px;}
.tabcontent01.current {display: block;}
.tabcontent01 .tb-center { padding:0; }
.swiper_roll01.swiper-container {padding-bottom:30px; overflow:hidden; position:relative;}
.swiper_roll01 .swiper-scrollbar1.swiper-scrollbar {left:50%; transform:translateX(-50%); width:1680px; max-width:100%; height:1px;}

/* ------------------------------------------------------------
   상품 카드 공용 스타일    LOVE&ENGAGEMENT(위)/기념일상품/신상품이 전부 공유
   ------------------------------------------------------------ */
.tb-center .box {  }
.tb-center .box .info { height:110px; padding:0px; }
.tb-center .thumb img { max-width:300px; margin: 0 auto;}
.prd_grey_tab  { background-color: rgba(0, 0, 0, .02); padding: 18% 0; overflow: hidden; }
.prd_grey_tab img { mix-blend-mode: multiply; max-width: 90%; height: auto; transition: transform 0.5s ease; }
.prd_grey_tab a:hover img { transform: scale(1.06); }
.icon_list { position: absolute; bottom: 0; right: 0px; width: 100%; opacity: 0; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.icon_list li { display: inline-block; margin: 0 3px; vertical-align: top; }
/* [2026-08] 미리보기 버튼을 이미지(btn_zoom.png)에서 Material Symbols 아이콘으로 변경   
   기존과 동일하게 흰 원형 배경 + 검정 돋보기 아이콘.
   선택자를 .prd-list .icon_list .btn_zoom a로 준 이유: 상단(헤더, 사이트 전역 로드)
   CSS에 `.prd-list .btn_zoom a {display:inline-block;}`가 있어서 단순 `.btn_zoom a`
   (specificity 0,1,1)로는 그 규칙(0,2,1)한테 항상 져서 44px 원이 전혀 안 먹혔음   
   0,3,1로 확실히 이기도록 조상 클래스를 더 붙임 */
.btn_zoom { text-align: center; }
.prd-list .icon_list .btn_zoom a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; margin: 0 auto; box-sizing: border-box;
}
.ss-main-zoom-icon { font-size: 18px; line-height: 1; color: #222; }
/* [2026-08] 관심상품(찜) 버튼    검색페이지(my-wish-list)와 동일 위젯, 메인 상품카드용으로
   이식. .thumb는 이미 상단 공통CSS에서 position:relative라 별도 지정 불필요.
   배경 없이 하트 아이콘만 노출(원 배경 제거 요청 반영) */
.ss-main-wish { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 2; }
.ss-main-wish .my-wish-list {
  display: flex !important; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  cursor: pointer; color: #222; box-sizing: border-box; pointer-events: auto;
}
.ss-main-wish .material-symbols-outlined { font-size: 20px; line-height: 1; color: #222; }
.ss-main-wish .ss-main-heart-fill { color: #222; font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 18; }
.ss-main-wish .ss-main-heart-line { color: #222; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 18; }
.prd-list .salebox2 .sale_bg .sale_text {color:#ff4800; font-size:14px; font-weight:400;}


/* ============================================================
   ③ 기념일컬렉션    영상 히어로 배너
   ============================================================ */
#anniversary_warp { max-width:1900px; margin: 0 auto; }
.main_visual { margin-top: 100px; position: relative; }
/* [2026-08] 요청: 영상을 진짜 뷰포트 100%로 - #contentWrapper가 1680px 고정폭이라
   그냥 width:100%로는 1680px까지만 차서 넓은 모니터에서 좌우 여백이 남았음. 음수 마진으로
   컨테이너 밖까지 풀블리드(pc/상품분류 히어로와 동일 기법). 텍스트 오버레이(.anniversary_info_warp)는
   .main_visual 기준 absolute라 그대로 1680px 폭 안에서 중앙정렬 유지됨(영상만 배경처럼 확장) */
.anniversary_video {
  width: calc(100vw - var(--ss-pc-sbw, 0px));
  margin-left: calc(50% - 50vw + (var(--ss-pc-sbw, 0px) / 2));
  margin-right: calc(50% - 50vw + (var(--ss-pc-sbw, 0px) / 2));
}
.main_visual video { display: block; width: 100%; }
/* [2026-08] 히어로(.hero-content)와 동일하게 중앙→하단 정렬로 변경 */
.anniversary_info_warp { position: absolute; bottom: 50px; left: 0; right: 0; text-align: center; color: #fff; padding: 0 20px; }
.anniversary_info_warp .anniversary_title_warp { text-align: center; }
.anniversary_title_warp .anniversary_subtitle  { font-size: 1rem; text-align: center; line-height: 1.8rem; letter-spacing: 0.1em; }
.anniversary_title_warp .anniversary_title { font-size: 1.6rem; padding: 0px 0px 15px 0px; font-family: 'Noto Serif KR', serif !important; font-weight: 600; letter-spacing: -0.03em; }
.anniversary_info_warp .anniversary_detail { max-width: 700px; margin: 0 auto; line-height: 1.5rem; text-align: center; padding: 35px 0px 0px; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02rem; font-size: 1.0rem; word-break: keep-all;}
/* [2026-08] 히어로 DISCOVER 버튼(.hero-cta)과 폰트·크기·호버 방식 전부 동일하게 통일
   (기존 SHOP NOW 텍스트도 DISCOVER로 변경, html.txt 참고) */
.anniversary_info_warp .anniversary_btn {
  display: inline-block; font-family: 'Josefin Sans', sans-serif;
  padding: 14px 40px; font-weight: 400; font-size: 13px; letter-spacing: 0.02em;
  color: #3b3b3b; background-color: #000;
  position: relative; overflow: hidden; z-index: 1; transition: color 0.4s ease;
}
.anniversary_info_warp .anniversary_btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: #fff;
  z-index: -1;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.4s ease;
}
.anniversary_info_warp .anniversary_btn:hover { color: #fff; }
.anniversary_info_warp .anniversary_btn:hover::before { transform: scaleY(0); }


/* ============================================================
   ④ 기념일상품    ANNIVERSARY 상품 캐러셀
   ============================================================ */
.m_tab05_area {position:relative;}
.tabcontent05 {display:none; margin-top:100px; padding:0px;} /* [2026-08] LOVE&ENGAGEMENT와 동일 간격으로 통일(기존 60px) */
.tabcontent05.current {display: block;}
.swiper_roll05.swiper-container {padding-bottom:30px; overflow:hidden; position:relative;}
.swiper_roll05 .swiper-scrollbar5.swiper-scrollbar {left:50%; transform:translateX(-50%); width:1680px; max-width:100%; height:1px;}
.tabcontent05 .prd-list .thumb img { max-width:300px; }
.tabcontent05 .prd-list .thumb .icon_list img { width:100%; }
.tabcontent05 .tb-center {width:300px; padding:0;}
.tabcontent05 .prd-list .info {height:110px;} /* [2026-08] LOVE&ENGAGEMENT·신상품과 동일 높이로 통일(기존 150px) */
.tabcontent05 .prd-list .sale_bg {right:18px;}


/* ============================================================
   ⑤ PROMOTION    카테고리 배너 3분할
   ============================================================ */
/* [2026-08] 배너형 섹션임을 상품 섹션과 구분하기 위해 폭 100%로 변경(1680px 고정폭 해제),
   텍스트를 이미지 아래가 아니라 위에 오버레이로 배치(히어로 .hero-content와 동일한
   그라데이션+하단정렬 방식)    3열 구성은 유지 */
.promotion_warp { width: 100%; margin: 100px auto 120px; }
.promotion_warp .half_warp { display: flex; flex-wrap: wrap; }
.promotion_warp .half_warp .half_right { flex-basis: 32%; max-width: 32%; }
.promotion_warp .half_warp .half_center { flex-basis: 32%; max-width: 32%; margin: 0% 2%; }
.promotion_warp .half_warp .half_left { flex-basis: 32%; max-width: 32%; }
.promotion_warp .company_imgbox { position: relative; overflow: hidden; }
.promotion_warp .company_imgbox img { width:100%; display: block; }
.promotion_warp .half_overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.5));
  pointer-events: none;
  z-index: 1;
}
.promotion_warp dl {
  position: absolute;
  bottom: 30px; left: 0; right: 0;
  text-align: center;
  z-index: 2;
  padding: 0 20px;
}
/* [2026-08] 메인타이틀 크기·자간    특별한 경험 섹션(.special_experience_warp dt)과 동일하게 통일 */
.promotion_warp dt { font-family: 'Josefin Sans', sans-serif; font-size: 1.3rem; word-break: break-all; letter-spacing: 0.15rem; color: #fff; }
.promotion_warp dd { letter-spacing: 0.02rem; font-size: 1.0rem; word-break: keep-all; }
/* [2026-08] 영문 타이틀 아래 한글 서브타이틀    특별한 경험의 .experience_subtitle과 동일 톤,
   타이틀-서브타이틀 8px / 서브타이틀-버튼 30px 간격도 그쪽과 맞춤 */
.promotion_warp .half_info_detail { display: block; margin: 8px 0 30px; font-size: 0.85rem; letter-spacing: 0.02rem; color: #fff; font-weight: 300; word-break: keep-all; }
/* 히어로 DISCOVER 버튼과 동일한 스윕 방식    기본 흰 배경, 호버 시 검정이 아래에서부터 드러남 */
.promotion_warp .half_btn {
    display: inline-block;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: 0.02em;
    font-size: 13px;
    font-weight: 400;
    color: #3b3b3b;
    background-color: #000;
    padding: 14px 40px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
}
.promotion_warp .half_btn::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #fff;
    z-index: -1;
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.4s ease;
}
.promotion_warp .half_btn:hover { color: #fff; }
.promotion_warp .half_btn:hover::before { transform: scaleY(0); }


/* ============================================================
   ⑥ 신상품    THE FIRST GLEAM
   ============================================================ */
.hotrank_warp { width: 100%; margin: 0 auto; }
/* [2026-08] 다른 swiper들과 동일하게 overflow:hidden 누락    가로 스크롤바 원인.
   position:relative도 같이 빠져있어서, 내부 스크롤바 드래그 핸들(swiper-scrollbar,
   position:absolute)이 가까운 위치기준 조상을 못 찾고 페이지 하단 쪽 조상 기준으로
   튀어서 부티크 상담예약 섹션 부근에 엉뚱하게 렌더링되던 원인이었음(제보로 발견) */
/* [2026-08] padding-bottom:60px 추가    LOVE&ENGAGEMENT·기념일상품과 동일한 그리드→스크롤바
   간격으로 통일(기존엔 html.txt의 별도 .pdt50(50px) 스페이서 div로 다르게 처리하고 있었음,
   그 div는 제거하고 이 padding으로 일원화) */
.hot_rank.swiper-container { overflow: hidden; position: relative; padding-bottom: 30px; }
.hotrank_title_warp { text-align:center; }
/* [2026-08] 타이틀→그리드 간격도 100px로 통일(기존엔 사실상 간격이 거의 없었음) */
.hot_rank .prd-list { margin-top: 100px; }
/* [2026-08] 클래스명 불일치 버그 수정: 마크업은 .title_main/.title_sub를 쓰는데
   이 규칙은 존재하지 않는 .hotrank_title_main/.hotrank_title_sub를 타겟팅하고 있어서
   한 번도 적용된 적이 없었음(다른 섹션의 기본 35px/18px로 노출 중이었음)    실제
   클래스명으로 고쳐서 의도한 2.2rem/1.0rem 크기가 적용되게 함 */
.hotrank_title_warp .title_main { font-family: 'Josefin Sans', sans-serif; font-size: 2.2rem; letter-spacing: 0.2rem; word-break: break-all; }
.hotrank_title_warp .title_sub { letter-spacing: 0.02rem; font-size: 1.0rem; padding: 0.5% 0% 0% 0%; word-break: keep-all; }
.rankwarp .box {  }
.rankwarp .box .info { max-width: 300px; height:110px;}
.rankwarp .thumb img { max-width:300px; margin: 0 auto;}
/* 실제 마크업에서 <!--num--<div class="ranknum">...</div><!--num--> 형태로 통째로
   주석 처리돼 렌더링 안 됨(의도적으로 비활성화된 상태로 보임    재활성화 대비 규칙은 유지) */
.ranknum { position: absolute; top: 0px; left: 0px; font-size: 13px; background: #1c1c1c; width: 70px; height: 20px; border-radius: 0px 0px 15px 0px; padding-top: 17px; color: #ffffff; font-family: 'Nanum Gothic', serif; }
.hot_rank .swiper-pagination-bullets {bottom:-1px !important;}
.hot_rank .swiper-pagination-bullet {margin:0 9px !important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.hot_rank .swiper-pagination-bullet {width:8px; height:8px; display:inline-block; border-radius:8px; background: none; opacity:0.7; border: 1px solid #c39562;}
.hot_rank .swiper-pagination-bullet-active {opacity:1; background:#c39562; }
.hot_rank .swiper-hotrank.swiper-scrollbar {left:50%; transform:translateX(-50%); width:1680px; max-width:100%; height:1px;}


/* ============================================================
   ⑦ 특별한 경험    pc/상품상세 하단 섹션 이식(기존 2열 EXPERIENCE 대체)
   ============================================================ */
/* [2026-08] 프로모션과 동일하게 배너형 취급    폭 100%, 타이틀("특별한 경험") 제거,
   텍스트를 이미지 아래가 아니라 위에 오버레이로 배치(히어로/프로모션과 동일 방식) */
.special_experience_warp { width: 100%; margin: 100px auto 0px; box-sizing: border-box; }
.special_experience_warp .experience_flex_warp { display: flex; flex-wrap: wrap; justify-content: space-between; }
.special_experience_warp .experience_card_item { flex: 0 1 32%; max-width: 32%; box-sizing: border-box; }
.special_experience_warp .experience_imgbox { position: relative; overflow: hidden; }
.special_experience_warp .experience_imgbox img { width: 100%; display: block; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.special_experience_warp .experience_imgbox a:hover img { transform: scale(1.06); }
/* [2026-08] 텍스트 가독성 보강 요청으로 다른 섹션(히어로 등)보다 진하게 조정
   (기존 height:55%/rgba(.5) → 65%/rgba(.72)) */
.special_experience_warp .experience_overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
  pointer-events: none;
  z-index: 1;
}
.special_experience_warp dl {
  position: absolute;
  bottom: 30px; left: 0; right: 0;
  text-align: center;
  z-index: 2;
  padding: 0 20px;
}
.special_experience_warp dt {     
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.3rem;
    word-break: break-all;
    letter-spacing: 0.15rem;
    padding-bottom: 30px;
    color: #fff; 
}
.special_experience_warp .boutique_info_title { font-family: 'Josefin Sans', sans-serif; margin: 0; padding: 0; line-height: 1.2; color: #fff; }
.special_experience_warp .boutique_subtitle { display: inline-block; font-size: 0.85rem; letter-spacing: 0.05rem; margin-top: 5px; color: #fff; padding-left: 8px; }
/* [2026-08] 영문 타이틀 아래 한글 서브타이틀    Josefin Sans는 라틴 전용이라 한글은
   기본 폰트(Lato/Noto Sans KR)로 상속, word-break:break-all인 dt와 별개로 줄바꿈 방지 */
.special_experience_warp .experience_subtitle { display: block; margin-top: 8px; font-size: 0.85rem; letter-spacing: 0.02rem; color: #fff; font-weight: 300; word-break: keep-all; }
.special_experience_warp dd { margin: 0; }
/* 히어로/프로모션과 동일한 스윕 방식    기본 흰 배경, 호버 시 검정이 아래에서부터 드러남 */
.special_experience_warp .experience_btn {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0.02em;
  font-size: 13px;
  font-weight: 400;
  color: #3b3b3b;
  background-color: #000;
  padding: 14px 40px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
}
.special_experience_warp .experience_btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: #fff;
  z-index: -1;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.4s ease;
}
.special_experience_warp .experience_btn:hover { color: #fff; }
.special_experience_warp .experience_btn:hover::before { transform: scaleY(0); }


/* ============================================================
   ⑧ 부티크 상담예약 문의하기    개별페이지(boutique.css.txt) 하단 섹션 이식
   ============================================================ */
/* 특별한 경험(1680px)과 가로폭 맞춤(원본 개별페이지의 1480px에서 확대) */
.what_title_warp { max-width: 1680px; margin: 0 auto; box-sizing: border-box; }
.what_title { font-family: 'Noto Serif KR', serif !important; font-size: 2.2rem; text-align: center; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; padding: 100px 0px 0px 0px; }
.what_detail { font-size: 1rem; text-align: center; line-height: 1.8rem; letter-spacing: initial; padding: 30px 0px 30px 0px; }
.private-btn-wrap.center-align {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10px 0 0 0;
}
.boutique-private-btn {
    min-width: 200px;
    text-align: center;
    padding: 1.2em;
    display: inline-block;
    font-size: 0.9rem;
    border: 1px solid #ffffff;
    position: relative;
    overflow: hidden;
    background-color: #111111;
    color: #ffffff;
    z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease;
    cursor: pointer;
    text-decoration: none;
}
.boutique-private-btn::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s ease;
}
.boutique-private-btn:hover {
    color: #111111;
    border-color: #111111;
}
.boutique-private-btn:hover::before { transform: scaleY(1); }
.kakao_info { letter-spacing: 0.1em; font-size: 0.9rem; text-align: center; line-height: 1.8rem; padding: 0px 0px 20px 0px; margin: 100px 0px 0px 0px; }
.kakao_btn_wrap { text-align: center; }
.kakao-link { display: inline-block; text-decoration: none; }
.kakao_btn { position: relative; display: inline-block; text-align: center; padding-bottom: 4px; color: #111; letter-spacing: 0.02em; font-size: 0.9rem; }
.kakao_btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #c7a97b; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease; }
.kakao-link:hover .kakao_btn::after { transform: scaleX(0); }

/* BASIC css end */