@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;600;700&display=swap');
.miniHeaderGroup { position:relative; }
.miniHeaderToggle,
.miniSubHeaderToggle { display:none; }

#header { position:fixed; top:0; left:0; z-index:1000; width:100%; height:100px; color:var(--colorWhite); transition:color .3s ease; }
#header.scroll { background:var(--colorWhite); color:var(--colorText); }
#header.scroll .headerTop { background:var(--colorWhite); color:var(--colorText); }
#header.scroll { color:#222; }
#header.scroll .headerTop { border-color:#EBEBEB; background:var(--colorWhite); }
#header.scroll .headerTop .headerInner .headerLogo a img { filter:none; }
#header.scroll .headerTop .headerInner .headerNav .depth1 > li > a { color:#222; }


#header .headerTop { position:relative; z-index:2; height:100px; border-bottom:1px solid transparent; background: rgb(0 0 0 / 25%); transition:background .3s ease, border-color .3s ease; }
#header .headerTop .headerInner { display:flex; align-items:center; width:100%; max-width:1250px; height:100%; margin:0 auto; }
#header .headerTop .headerInner .headerLogo { flex-shrink:0; width:107px; margin:0 168px 0 0; }
#header .headerTop .headerInner .headerLogo a { display:block; }
#header .headerTop .headerInner .headerLogo a img { display:block; width:100%; filter:brightness(0) invert(1); transition:filter .3s ease; }
#header .headerTop .headerInner .headerNav { height:100%; }
#header .headerTop .headerInner .headerNav .depth1 { display:flex; align-items:center; gap:50px; height:100%; margin:0; padding:0; list-style:none; }
#header .headerTop .headerInner .headerNav .depth1 > li { flex-shrink:0; height:100%; text-align:center; }
#header .headerTop .headerInner .headerNav .depth1 > li > a { position:relative; display:flex; align-items:center; justify-content:center; height:100px; color:var(--colorWhite); font-family: 'Pretendard' !important; font-size:18px; line-height:20px; letter-spacing: -0.36px; }
#header .headerTop .headerInner .headerNav .depth1 > li > a::after { content:""; position:absolute; bottom:-1px; left:50%; z-index:3; width:0; max-width:100%; height:2px; background:var(--colorPoint); transform:translateX(-50%); transition:width .25s ease; }
#header .headerTop .headerInner .headerNav .depth1 > li:hover > a::after { width:60px; }
#header:hover .headerTop .headerInner .headerNav .depth1 > li > a { color:var(--colorText); }
#header .headerTop .headerInner .headerNav .depth1 > li:hover > a { color: var(--colorText); }
/*
 * 뎁스2는 흰 배경(.headerDropdown, height .35s ease)과 같은 속도로 높이가 펼쳐져서
 * 배경이 내려오는 만큼만 보인다. 닫힐 때는 높이가 다 접힌 뒤(.35s) 숨김 처리.
 */
#header .headerTop .headerInner .headerNav .depth1 > li .depth2 { position:relative; z-index:2; height:0; margin:0; padding:25px 0 0;  display: flex; flex-direction: column; gap: 11px; overflow:hidden; opacity:0; visibility:hidden; list-style:none; transition:height .35s ease, opacity .2s ease, visibility 0s linear .35s; }
#header .headerTop .headerInner .headerNav .depth1 > li .depth2 li { min-height:20px; }
#header .headerTop .headerInner .headerNav .depth1 > li .depth2 li a { display:inline-block; color:#636363; font-size:16px; line-height:20px; transition:color .2s ease; }
#header .headerTop .headerInner .headerNav .depth1 > li .depth2 li a:hover { color:var(--colorPoint); }
#header .headerTop .headerInner .allMenuBtn { position: absolute; right: 65px; flex-shrink:0; width:38px; height:37px; margin-left:35px; padding:0; overflow:hidden; border:0; background:transparent; cursor:pointer; }
#header .headerTop .headerInner .allMenuBtn img { display:block; width:100%; height:100%; object-fit:cover; }
#header .headerDropdown { position:absolute; top:100px; left:0; z-index:1; width:100%; height:0; overflow:hidden; background:var(--colorWhite); box-shadow:0 10px 25px rgba(0,0,0,.04); transition:height .35s ease; }
#header:hover { color:#222; }
#header:hover .headerTop { border-color:#EBEBEB; background:var(--colorWhite); }
#header:hover .headerTop .headerInner .headerLogo a img { filter:none; }
#header .headerTop .headerInner .headerNav:hover .depth1 > li .depth2 { height:306px; opacity:1; visibility:visible; transition:height .35s ease, opacity .3s ease .05s, visibility 0s; }
#header:has(.headerNav:hover) .headerDropdown { height:306px; }

/* PC 전체메뉴 (사이트맵형, allMenuBtn) - 1024px 이하는 customResponsive.css 에서 숨기고 mobileMenu 를 쓴다 */
.pcAllMenu { display:none; }
.pcAllMenu.isOpen { display:block; }
.pcAllMenu .pcAllMenuDim { position:fixed; left:0; right:0; bottom:0; top:var(--pcAllMenuTop, 100px); z-index:10000; background:rgba(0, 0, 0, .45); }
.pcAllMenu .pcAllMenuPanel { position:fixed; left:0; right:0; top:var(--pcAllMenuTop, 100px); z-index:10001; max-height:calc(100vh - var(--pcAllMenuTop, 100px)); overflow-y:auto; border-top:1px solid #EEE; background:#fff; box-shadow:0 12px 24px rgba(0, 0, 0, .08); animation:pcAllMenuDown .3s ease; }
.pcAllMenu .pcAllMenuList { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:30px 24px; max-width:1400px; margin:0 auto; padding:50px 40px 60px; list-style:none; }
.pcAllMenu .pcAllMenuTitle { display:block; margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid #111; color:#111; font-size:18px; font-weight:700; letter-spacing:-0.4px; text-decoration:none; word-break:keep-all; }
.pcAllMenu .pcAllMenuTitle:hover { color:var(--colorPoint); border-color:var(--colorPoint); }
.pcAllMenu .pcAllMenuSub { margin:0; padding:0; list-style:none; }
.pcAllMenu .pcAllMenuSub a { display:block; padding:6px 0; color:#555; font-size:15px; letter-spacing:-0.3px; text-decoration:none; word-break:keep-all; transition:color .2s ease; }
.pcAllMenu .pcAllMenuSub a:hover { color:var(--colorPoint); }
body.isPcAllMenuOpen { overflow:hidden; }
@keyframes pcAllMenuDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
#header .headerTop .headerInner .headerNav .depth1 > li.isActive > a::after { right:26px; left:26px; }
#header .headerTop .headerInner .headerNav .depth1 > li.isActive .depth2 li a.isActive { color:var(--colorPoint); }
body:not(:has(.isIndexPage)) #header .headerTop { border-color:#EBEBEB; background-color: #fff; color:var(--colorText); }
body:not(:has(.isIndexPage)) #header .headerTop .headerInner .headerLogo a img { filter:none; }
body:not(:has(.isIndexPage)) #header .headerTop .headerInner .headerNav .depth1 > li > a { color:#222; }
.myPageIcon {  position: absolute;  right: 115px;  flex-shrink: 0; width: 38px; height: 36px; margin-left: 35px; padding: 0; overflow: hidden; border: 0;  background: transparent; cursor: pointer; }


.miniHeader { position:fixed; top:100px; left:0; z-index:900; width:100%; height:50px; overflow:hidden; background:var(--colorPoint); }
.miniHeader .miniHeaderNav { position:absolute; top:0; left:50%; width:max-content; height:100%; transform:translateX(-50%); }
.miniHeader .miniHeaderNav .miniHeaderList { display:flex; align-items:center; gap:53px; width:max-content; height:100%; }
.miniHeader .miniHeaderNav .miniHeaderList li { flex-shrink:0; height:100%; }
.miniHeader .miniHeaderNav .miniHeaderList li a { display:flex; align-items:center; height:100%; color:rgb(255 255 255 / 80%); font-family: 'Pretendard' !important; font-size:16px; font-weight:600; line-height:1; transition:color .2s ease; }
.miniHeader .miniHeaderNav .miniHeaderList li:hover a,
.miniHeader .miniHeaderNav .miniHeaderList li.isActive a { color:var(--colorWhite); font-weight:700; }

.miniSubHeader { position:fixed; top:150px; left:0; z-index:895; width:100%; height:46px; overflow:hidden; background:#f5f5f5; }
.miniSubHeader .miniSubHeaderNav { position:absolute; top:0; left:50%; width:max-content; height:100%; transform:translateX(-50%); }
.miniSubHeader .miniSubHeaderNav .miniSubHeaderList { display:flex; align-items:center; gap:32px; width:max-content; height:100%; margin:0; padding:0; list-style:none; }
.miniSubHeader .miniSubHeaderNav .miniSubHeaderList li { flex-shrink:0; height:100%; }
.miniSubHeader .miniSubHeaderNav .miniSubHeaderList li a { display:flex; align-items:center; height:100%; color:rgb(69 69 74 / 80%); font-family: 'Pretendard' !important; font-size:15px; font-weight:500; line-height:1; transition:color .2s ease; }
.miniSubHeader .miniSubHeaderNav .miniSubHeaderList li:hover a,
.miniSubHeader .miniSubHeaderNav .miniSubHeaderList li.isActive a { color:var(--colorPoint); font-weight:700; }


.quickMenu { position:fixed; top:50%; right:53px; z-index:900; width:90px; padding:25px 20px; overflow:hidden; border:1px solid rgba(125,127,136,.7); border-radius:20px; background:rgba(114,115,124,.78); box-shadow:0 8px 15px rgba(0,0,0,.3); transform:translateY(-50%); transition:background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.4,0,.2,1); }
.quickMenu:hover { border-color:rgba(255,255,255,.22); background:rgba(114,115,124,.88); box-shadow:0 12px 30px rgba(0,0,0,.4); transform:translateY(-50%) translateX(-12px); }
.quickMenu ul { margin:0; padding:0; list-style:none; }
.quickMenuItem { margin-top:21px; }
.quickMenuItem:first-child { margin-top:0; }
.quickMenuItem a { display:flex; flex-direction:column; align-items:center; color:var(--colorWhite); text-decoration:none; transition:transform .3s cubic-bezier(.4,0,.2,1); }
.quickMenuItem a:hover { transform:translateY(-3px); }
.quickMenuItem a:active { transform:translateY(-1px) scale(.97); }
.quickMenuIcon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; transition:background .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.4,0,.2,1); }
.quickMenuIcon img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .3s cubic-bezier(.4,0,.2,1), filter .3s ease; }
.quickMenuText strong { display:block; margin-top:4px; font-size:14px; font-weight:500; line-height:1.3; text-align:center; white-space:nowrap; transition:color .3s ease, transform .3s ease; }
.quickMenuItem a:hover .quickMenuIcon { background:rgba(255,255,255,.16); box-shadow:0 5px 12px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.15); transform:scale(1.06); }
.quickMenuItem a:hover .quickMenuIcon img { transform:scale(1.05); }
.quickMenuItem a:hover .quickMenuText strong { transform:translateY(1px); }
.quickMenuItem a:hover .quickMenuSns { background:transparent; box-shadow:none; transform:scale(1.08); }
.quickMenuItem a:hover .quickMenuSns img { transform:none; }





.mainVisual { position:relative; width:100%; height:100vh; min-height:750px; overflow:hidden; }
/* 메인 비주얼 위에 깔리는 얇은 어두운 막 - 진하기는 마지막 숫자(0~1)로 조절 */
.mainVisual::after { content:""; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(8,10,25,.20); pointer-events:none; }
.mainVisualImg { position:absolute; top:0; left:0; width:100%; height:100%; }
.mainVisualImg img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; animation:mainVisualScale 8s ease-out forwards; }
/* 메인 비주얼 스와이퍼: 확대 애니메이션은 현재 슬라이드에서만 매번 다시 재생 */
.mainVisual .mainVisualSwiper { position:absolute; top:0; left:0; width:100%; height:100%; }
.mainVisual .mainVisualSwiper .mainVisualList { margin:0; padding:0; list-style:none; }
.mainVisual .mainVisualSwiper .mainVisualImg video { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.mainVisual .mainVisualSwiper .mainVisualVideoMo { display:none !important; }
.mainVisual .mainVisualSwiper .swiper-slide { position:relative; overflow:hidden; }
.mainVisual .mainVisualSwiper .mainVisualImg img { animation:none; }
.mainVisual .mainVisualSwiper .swiper-slide-active .mainVisualImg img { animation:mainVisualScale 8s ease-out forwards; }
.mainVisual .mainVisualPagination { position:absolute; bottom:60px; left:0; z-index:10; display:flex; justify-content:center; gap:10px; width:100%; }
.mainVisual .mainVisualPagination .swiper-pagination-bullet { width:30px; height:3px; margin:0 !important; border-radius:0; background:rgba(255, 255, 255, 0.5); opacity:1; transition:background .3s ease, width .3s ease; }
.mainVisual .mainVisualPagination .swiper-pagination-bullet-active { width:50px; background:#fff; }
/* 메인 비주얼 문구 (roa/index.php) - 슬라이드별 문구 + 아래 페이지네이션/자동넘김 버튼 */
.mainVisualText { position:absolute; top:51%; left:calc(50% - 620px); z-index:2; color:var(--colorWhite); text-align:left; }
.mainVisualText .mainVisualTextItem { display:none; }
.mainVisualText .mainVisualTextItem.isActive { display:block; animation:mainVisualTextIn .8s ease both; }
.mainVisualText h2 { margin:0; color:var(--colorWhite); font-family:"Pretendard", sans-serif; font-size:57px; font-weight:700; line-height:1.19; letter-spacing:-1.71px; }
.mainVisualText p { margin:14px 0 0; color:var(--colorWhite); font-size:22px; font-weight:600; letter-spacing:-0.66px; }
.mainVisualText .mainVisualControl { display:flex; align-items:center; gap:15px; margin-top:28px; }
.mainVisualText .mainVisualPagination { position:static; display:flex; gap:15px; width:auto; }
.mainVisualText .mainVisualPagination .swiper-pagination-bullet { position:relative; width:26px; height:26px; margin:0 !important; border:1px solid transparent; border-radius:50%; background:transparent; opacity:1; transition:border-color .3s ease; }
.mainVisualText .mainVisualPagination .swiper-pagination-bullet::after { content:""; position:absolute; top:50%; left:50%; width:7px; height:7px; border-radius:50%; background:#fff; transform:translate(-50%, -50%); }
.mainVisualText .mainVisualPagination .swiper-pagination-bullet-active { width:26px; border-color:#fff; background:transparent; }
.mainVisualText .mainVisualAutoplay { position:relative; width:26px; height:26px; padding:0; border:0; background:transparent; cursor:pointer; }
/* 재생 중: 멈춤(❚❚) 아이콘 / 멈춘 상태: 재생(▶) 아이콘 */
.mainVisualText .mainVisualAutoplay::before,
.mainVisualText .mainVisualAutoplay::after { content:""; position:absolute; top:50%; width:2px; height:10px; background:#fff; transform:translateY(-50%); }
.mainVisualText .mainVisualAutoplay::before { left:9px; }
.mainVisualText .mainVisualAutoplay::after { left:15px; }
.mainVisualText .mainVisualAutoplay.isPaused::after { display:none; }
.mainVisualText .mainVisualAutoplay.isPaused::before { left:9px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid #fff; background:transparent; }
@keyframes mainVisualTextIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

/* 스크롤 힌트 */
.scrollHint { position:absolute; bottom:120px; left:50%; z-index:10; width:40px; height:80px; transform:translateX(-50%) !important; }
.scrollHint .mouseIcon { position:absolute; top:0; left:50%; width:26px; height:40px; border:2px solid #fff; border-radius:100px; box-sizing:border-box; transform:translateX(-50%); }
.scrollHint .mouseIcon::before { content:""; position:absolute; top:7px; left:50%; width:2px; height:8px; background:#fff; transform:translateX(-50%); animation:scrollAni 2s infinite; }
.scrollHint .arrow::before { content:""; position:absolute; bottom:10px; left:50%; width:8px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:translateX(-50%) rotate(45deg); animation:scrollArrow 2s infinite; }
.scrollHint .arrow::after { content:""; position:absolute; bottom:0; left:50%; width:8px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:translateX(-50%) rotate(45deg); animation:scrollArrow 2s infinite; }

@keyframes scrollAni {
    0% { transform:translateX(-50%) translateY(0); }
    80%, 100% { transform:translateX(-50%) translateY(10px); }
}

@keyframes scrollArrow {
    0% { opacity:0; transform:translateX(-50%) translateY(0) rotate(45deg); }
    50% { opacity:1; }
    100% { opacity:0; transform:translateX(-50%) translateY(10px) rotate(45deg); }
}

.titText { font-size: 40px; line-height: 1; letter-spacing: -0.8px; margin-bottom:28px; color: var(--colorText); text-align: center; }
.textBox .titText { font-size: 40px; line-height: 1; letter-spacing: -0.8px; margin-bottom:28px; color: var(--colorText); text-align: center; }
.textBox .text { font-size:24px; font-weight:400; line-height:20px; text-align: center; color: var(--colorText); }

.mainEventSection { position:relative; overflow:hidden; padding:90px 0 0; background:var(--colorWhite); }
.mainEventSection h2 { margin-bottom:58px; }
.mainEventSection .mainEventSwiper { overflow:visible; }
.mainEventSection .mainEventSwiper .mainEventList { margin:0; padding:0; list-style:none; }
.mainEventSection .mainEventSwiper .mainEventList .mainEventItem { margin-bottom: 16px; }
.mainEventSection .mainEventSwiper .mainEventList .mainEventItem a { display:block; color:var(--colorText); }
.mainEventSection .mainEventSwiper .mainEventList .mainEventItem a .imageBox { overflow:hidden; border-radius:6px; background:#f5f5f5; }
.mainEventSection .mainEventSwiper .mainEventList .mainEventItem a .imageBox img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.mainEventSection .mainEventSwiper .mainEventList .mainEventItem:hover a .imageBox img { transform:scale(1.04); }
.mainEventSection .mainEventSwiper .mainEventList .mainEventItem a p { overflow:hidden; margin-top:16px; font-size:22px; font-weight:600; line-height:30px; color:var(--colorText); text-overflow:ellipsis; white-space:nowrap; }
.mainEventSection .mainEventEmpty { padding:60px 20px; font-size:16px; color:#999; text-align:center; }
.mainEventSection .mainEventBackgroundText { overflow:hidden; width:100%; margin-top:30px; pointer-events:none; }
.mainEventSection .mainEventBackgroundText .mainEventTextTrack { display:flex; width:max-content; animation:mainEventTextRolling 25s linear infinite; }
.mainEventSection .mainEventBackgroundText .mainEventTextTrack span { flex:none; padding-right:10px; font-size:140px; font-weight:500; line-height:1; letter-spacing:2.8px; color:#F2D6D633; white-space:nowrap; }

@keyframes mainEventTextRolling {
    0% { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}


/* 베스트 시술 */
.bestSection { overflow:hidden; padding:90px 0 100px; background:#35161A; }
.bestSection .bestInner { width:calc(100% - 80px); max-width:1660px; margin:0 auto; overflow: hidden; }
.bestSection .bestInner .textBox { margin-bottom:80px; color:var(--colorWhite); text-align:center; }
.bestSection .bestInner .textBox h2 {  color: var(--colorWhite); }
.bestSection .bestInner .textBox p { color: var(--colorWhite); font-size:24px; font-weight:400; line-height:20px; }
.bestSection .bestInner .bestSwiper { overflow:visible; }
.bestSection .bestInner .bestSwiper .bestList { margin:0; padding:0; list-style:none; }
.bestSection .bestInner .bestSwiper .bestList .bestItem { overflow:hidden; height:734px; background:var(--colorWhite); }
.bestSection .bestInner .bestSwiper .bestList .bestItem a { position:relative; display:block; width:100%; height:100%; color:var(--colorText); }
.bestSection .bestInner .bestSwiper .bestList .bestItem a .textBox { position:relative; z-index:2; padding:96px 20px 0; text-align:center; }
.bestSection .bestInner .bestSwiper .bestList .bestItem a .textBox strong { display:block; margin-bottom:28px; font-size:34px; font-weight:600; line-height:20px; color:var(--colorText); }
.bestSection .bestInner .bestSwiper .bestList .bestItem a .textBox p { margin-bottom:28px; font-size:19px; font-weight:400; line-height:23px; color:var(--colorText); }
.bestSection .bestInner .bestSwiper .bestList .bestItem a .textBox .tagList { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; }
.bestSection .bestInner .bestSwiper .bestList .bestItem a .textBox .tagList span { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding: 3px 8px 3px 9px; border-radius:30px; background:var(--colorPoint); font-size:14px; font-weight:500; line-height:30px; color:var(--colorWhite); }
.bestSection .bestInner .bestSwiper .bestList .bestItem a .imageBox { position:absolute; bottom:0; left:0; overflow:hidden; width:100%; height:445px; }
.bestSection .bestInner .bestSwiper .bestList .bestItem a .imageBox img { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; transition:transform .6s ease; }
.bestSection .bestInner .bestSwiper .bestList .bestItem:hover a .imageBox img { transform:scale(1.04); }
.bestSection .bestInner .bestControl { display:flex; align-items:center; gap:17px; margin-top:50px; }
.bestSection .bestInner .bestControl .bestPrev,
.bestSection .bestInner .bestControl .bestNext { position:relative; flex:0 0 auto; width:51px; height:51px; padding: unset; background: unset; border: unset;  cursor: pointer;}
.bestSection .bestInner .bestControl .bestPrev { transform: scaleX(-1) }
.bestSection .bestInner .bestControl .bestScrollbar { position:relative; flex:1; height:2px; background:var(--colorWhite) }
.bestSection .bestInner .bestControl .bestScrollbar .swiper-scrollbar-drag { height:100%; border-radius:0; background:var(--colorPoint); }


.beforeAfter { padding: 120px 0; background: var(--colorWhite); }
.beforeAfter .beforeAfterInner .textBox { margin-bottom: 50px; }
.beforeAfter .beforeAfterInner .beforeAfterSwiper {  }
.beforeAfter .beforeAfterInner .beforeAfterSwiper ul {  }
.beforeAfter .beforeAfterInner .beforeAfterSwiper ul li { width: 100%; height: 550px;  }
.beforeAfter .beforeAfterInner .beforeAfterSwiper ul li a .imageBox { width: 100%; height: 550px; }
.beforeAfter .beforeAfterInner .beforeAfterSwiper ul li a .imageBox img { width: 100%; height: 100%; border-radius: 40px; object-fit: cover; }
.beforeAfter .beforeAfterInner .beforeAfterSwiper ul li a .textBox { margin-bottom: unset; position: absolute; left: 35px; bottom: 50px; color: var(--colorWhite)  }
.beforeAfter .beforeAfterInner .beforeAfterSwiper ul li a .textBox span { display: inline-block; margin-bottom: 10px; background: #69696983; border-radius: 20px; text-align: center; padding: 5px 20px; font-size: 15px; }
.beforeAfter .beforeAfterInner .beforeAfterSwiper ul li a .textBox p { font-size: 21px; line-height: 1.3; font-weight: 500; }

.dragCursorArea, .dragCursorArea * { cursor:none !important; }
.dragCursor { position:fixed; top:0; left:0; z-index:9999; width:100px; opacity:0; visibility:hidden; transform:translate(-50%, -50%) scale(.8); pointer-events:none; transition:opacity .2s ease, visibility .2s ease, transform .3s ease; will-change:left, top; }
.dragCursor img { display:block; width:100%; height:auto; }
.dragCursor.on { opacity:1; visibility:visible; transform:translate(-50%, -50%) scale(1); }
.dragCursor.dragging { transform:translate(-50%, -50%) scale(.85); }
.dragCursorArea:active { cursor:url("/img/drag_cursor.svg") 50 50, grabbing; }



.brandValueSection { overflow:hidden; min-height:660px; padding:85px 0 75px; background-image:linear-gradient(90deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.65) 100%), url("/img/brand_value_bg.webp"); background-position:center; background-repeat:no-repeat; background-size:cover; color:var(--colorWhite); }
.brandValueSection .brandValueInner { width:100%; max-width:1115px; margin:0 auto; }
.brandValueSection .brandValueInner .textBox { margin-bottom:81px; text-align:center; }
.brandValueSection .brandValueInner .textBox img { margin: 0 auto 33px; }
.brandValueSection .brandValueInner .textBox p { font-size:24px; font-weight:300; line-height:40px; }
.brandValueSection .brandValueInner .textBox p b { display:block; font-size:30px; line-height: 40px; font-weight:600; }
.brandValueSection .brandValueInner .brandValueList { display:flex; justify-content: center; gap:44px; margin:0 0 122px; }
.brandValueSection .brandValueInner .brandValueList li {  min-width:0; }
.brandValueSection .brandValueInner .brandValueList li .valueTitle { display:flex; align-items:flex-end; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--colorWhite); }
.brandValueSection .brandValueInner .brandValueList li .valueTitle span { font-family:"Bellefair", serif !important;  font-size:27px; font-weight:400; line-height:1; }
.brandValueSection .brandValueInner .brandValueList li .valueTitle strong { font-family:"Bellefair", serif !important;  font-size:41px; font-weight:400; line-height:1; }
.brandValueSection .brandValueInner .brandValueList li p { margin-top:8px; font-size:22px; font-weight:400; line-height:30px; }
.brandValueSection .brandValueInner .brandValueCount { display:flex; align-items:flex-end; justify-content:space-between; padding: 43px 38px 38px; border-radius: 20px; background: rgb(49 34 44 / 20%); }
.brandValueSection .brandValueInner .brandValueCount li { flex:1; text-align:center; }
.brandValueSection .brandValueInner .brandValueCount li span { display:block; margin-bottom:10px; font-size:27px; font-weight:600; line-height:1.3; }
.brandValueSection .brandValueInner .brandValueCount li strong { display:block; font-size:89px; font-weight:700; line-height:1; }
.brandValueSection .brandValueInner .brandValueCount li strong em { font-style:normal; }


.doctorSection { overflow:hidden; padding:105px 0 60px; background:var(--colorWhite); }
.doctorSection .doctorInner { width:100%; margin:0 auto; }
.doctorSection .doctorInner .textBox { margin-bottom:64px; color:var(--colorText); text-align:center; }
.doctorSection .doctorInner .textBox > p { margin-bottom:27px; font-size:33px; font-weight:400; line-height:1.5; }
.doctorSection .doctorInner .textBox > span { display:block; font-size:16px; font-weight:300; line-height:1.6; color:var(--colorText); }
.doctorSection .doctorInner .doctorSwiper { width:100%; padding:0 10px; }
.doctorSection .doctorInner .doctorSwiper .doctorList { margin:0; padding:0; list-style:none; }
.doctorSection .doctorInner .doctorSwiper .doctorList .doctorItem { overflow:hidden; height:472px; border-radius:20px; background:#F8F9FA; }
.doctorSection .doctorInner .doctorSwiper .doctorList .doctorItem a { position:relative; display:block; width:100%; height:100%; color:var(--colorText); }
.doctorSection .doctorInner .doctorSwiper .doctorList .doctorItem a .textBox { position:relative; z-index:2; padding:34px 34px 0; margin: unset; text-align: start; }
.doctorSection .doctorInner .doctorSwiper .doctorList .doctorItem a .textBox span { display:block; margin-bottom:6px; font-size:18px; font-weight:700; color:var(--colorPoint); }
.doctorSection .doctorInner .doctorSwiper .doctorList .doctorItem a .textBox p { font-size:17px; font-weight:600; line-height:1.4; margin: unset; }
.doctorSection .doctorInner .doctorSwiper .doctorList .doctorItem a .textBox p strong { margin-right:3px; font-size:28px; font-weight:600; }
.doctorSection .doctorInner .doctorSwiper .doctorList .doctorItem a .imageBox { text-align: end; }
.doctorSection .doctorInner .doctorSwiper .doctorList .doctorItem a .imageBox img { transition:transform .5s ease; }
.doctorSection .doctorInner .doctorSwiper .doctorList .doctorItem:hover a .imageBox img { transform:scale(1.04); }
.roughmap_maker_label .roughmap_lebel_text { font-size: 17px !important; }


.faqSection { padding:110px 20px 86px; background:#EFECE3; }
.faqSection .faqInner { position:relative; display:flex; align-items:flex-start; gap:100px; width:100%; max-width:1110px; margin:0 auto; }
.faqSection .faqInner .faqTitle { position:sticky; top:160px; flex:0 0 325px; }
.faqSection .faqInner .faqTitle h2 { margin-bottom:11px; font-size:40px; font-weight:500; line-height:1.3; color:var(--colorText); }
.faqSection .faqInner .faqTitle p { font-size:16px; font-weight:400; line-height:1.7; color:var(--colorText); }
.faqSection .faqInner .faqList { flex:1; min-width:0; margin:0; padding:0; list-style:none; }
.faqSection .faqInner .faqList .faqItem { overflow:hidden; margin-bottom:10px; border:1px solid #D7D1BF; border-radius:10px; background:var(--colorWhite); transition:border-color .3s ease, box-shadow .3s ease; }
.faqSection .faqInner .faqList .faqItem:last-child { margin-bottom:0; }
.faqSection .faqInner .faqList .faqItem.active { border-color:#CFC6B6; box-shadow:0 2px 6px rgba(49,34,44,.04); }
.faqSection .faqInner .faqList .faqItem .faqQuestion { display:flex; align-items:center; gap:11px; width:100%; min-height:72px; padding:24px 34px; border:0; background:transparent; color:var(--colorText); text-align:left; cursor:pointer; }
.faqSection .faqInner .faqList .faqItem .faqQuestion .questionMark { flex:0 0 auto; font-size:18px; font-weight:600; line-height:1.5; color:#FFBCD7; }
.faqSection .faqInner .faqList .faqItem .faqQuestion strong { flex:1; min-width:0; font-size:18px; font-weight:500; line-height:1.5; word-break:keep-all; }
.faqSection .faqInner .faqList .faqItem .faqQuestion .arrow { position:relative; flex:0 0 auto; width:14px; height:14px; margin-left:10px; }
.faqSection .faqInner .faqList .faqItem .faqQuestion .arrow::before,
.faqSection .faqInner .faqList .faqItem .faqQuestion .arrow::after { content:""; position:absolute; top:50%; width:8px; height:1px; background:#B9B1AA; transition:transform .35s ease; }
.faqSection .faqInner .faqList .faqItem .faqQuestion .arrow::before { left:0; transform:rotate(45deg); }
.faqSection .faqInner .faqList .faqItem .faqQuestion .arrow::after { right:0; transform:rotate(-45deg); }
.faqSection .faqInner .faqList .faqItem.active .faqQuestion .arrow::before { transform:rotate(-45deg); }
.faqSection .faqInner .faqList .faqItem.active .faqQuestion .arrow::after { transform:rotate(45deg); }
.faqSection .faqInner .faqList .faqItem .faqAnswer { overflow:hidden; height:0; transition:height .45s cubic-bezier(.25,.8,.25,1); }
.faqSection .faqInner .faqList .faqItem .faqAnswer .answerInner { padding:0 30px 26px 35px; font-size:16px; font-weight:300; line-height:1.8; color:var(--colorText); word-break:keep-all; }


.reviewSection { overflow:hidden; padding:88px 0 57px; background:#FFE8F1; }
.reviewSection .reviewInner { width:100%; margin:0 auto; }
.reviewSection .reviewInner .reviewTitle { margin-bottom:38px; padding:0 20px; color:var(--colorText); text-align:center; }
.reviewSection .reviewInner .reviewTitle h2 { margin-bottom:7px; font-size:25px; font-weight:600; line-height:1.4; }
.reviewSection .reviewInner .reviewTitle p { font-size:14px; font-weight:400; line-height:1.5; color:#555; }
.reviewSection .reviewInner .textBox { margin-bottom: 66px; }
.reviewSection .reviewInner .reviewSwiper { overflow:visible; width:100%; padding:0 16px; }
.reviewSection .reviewInner .reviewSwiper .reviewList { margin:0; padding:0; list-style:none; }
.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem { overflow:hidden; height:500px; border-radius:30px; background:#E8E8E8; }
.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem a { position:relative; display:block; width:100%; height:100%; color:var(--colorWhite); }
.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem a::after { content:""; position:absolute; bottom:0; left:0; z-index:1; width:100%; height:45%; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.55)); pointer-events:none; }
.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem a .imageBox { width:100%; height:100%; }
.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem a .imageBox img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem:hover a .imageBox img { transform:scale(1.05); }

.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem a .heartBox { position:absolute; top:11px; left:11px; z-index:2; }
.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem a .heartBox .heartIcon { display:block; font-size:46px; line-height:1; color:#FF008A; }
.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem a .heartBox strong { display:block; font-size:23px; font-weight:700; line-height:1.3; color:var(--colorWhite); }

.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem a .textBox { position:absolute; bottom:17px; left:12px; z-index:2; display:flex; align-items:flex-end; gap:5px; max-width:calc(100% - 24px); margin-bottom: unset; }
.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem a .textBox strong { font-size:28px; font-weight:700; line-height:55px; word-break:keep-all; }
.reviewSection .reviewInner .reviewSwiper .reviewList .reviewItem a .textBox span { font-size:13px; font-weight:400; line-height:43px; }

.reviewSection .reviewInner .reviewMore { margin-top:37px; text-align:center; }
.reviewSection .reviewInner .reviewMore a { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:134px; height:42px; padding:0 13px; border-radius:30px; background:#FF61A0; color:var(--colorWhite); }
.reviewSection .reviewInner .reviewMore a span { font-size:18px; font-weight:400; line-height:1; }
.reviewSection .reviewInner .reviewMore a i { font-size:18px; font-style:normal; font-weight:400; line-height:1; }

.reviewSection .reviewInner .emptyText { padding:50px 20px; font-size:14px; color:#777; text-align:center; }





/* 서브페이지 공통 */
.section { padding:200px 0 160px; background:var(--colorWhite); }
.searchList { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:30px; margin-bottom:30px; }
.searchList .searchListBranch { position:relative; z-index:20; width:240px; }
.searchList .searchListBranch .searchListBranchBtn { display:flex; align-items:center; justify-content:space-between; width:100%; height:52px; padding:0 18px; border:1px solid #ddd; background:#fff; font-size:15px; font-weight:400; color:#444; cursor:pointer; }
.searchList .searchListBranch .searchListBranchBtn i { width:8px; height:8px; border-right:1px solid #999; border-bottom:1px solid #999; transform:translateY(-2px) rotate(45deg); transition:transform .3s ease; }
.searchList .searchListBranch.active .searchListBranchBtn i { transform:translateY(2px) rotate(225deg); }
.searchList .searchListBranch .branchList { visibility:hidden; position:absolute; top:calc(100% + 6px); left:0; width:100%; margin:0; padding:7px; border:1px solid #e5e5e5; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.08); opacity:0; transform:translateY(-8px); transition:visibility .3s ease, opacity .3s ease, transform .3s ease; }
.searchList .searchListBranch.active .branchList { visibility:visible; opacity:1; transform:translateY(0); }
.searchList .searchListBranch .branchList li { width:100%; }
.searchList .searchListBranch .branchList li a { display:flex; align-items:center; width:100%; height:42px; padding:0 12px; font-size:14px; font-weight:400; color:#555; transition:background .3s ease, color .3s ease; }
.searchList .searchListBranch .branchList li:hover a,
.searchList .searchListBranch .branchList li.active a { background:#fff0f6; color:#FF61A0; }
.searchForm { display:flex; align-items:center; width:400px; gap: 10px; }
.searchForm input[type="text"] { flex:1; min-width:0; height:48px; padding:0 17px; border:1px solid #DADADA; background:var(--colorWhite); font-size:14px; font-weight:300; color:var(--colorText); outline:none; }
.searchForm input[type="text"]:focus { border-color:var(--colorPoint); }
.searchForm input[type="text"]::placeholder { color:#636363; }
.searchForm button { width:90px; height:48px; border:0; background:#F67CAD; font-size:14px; font-weight:500; color:var(--colorWhite); cursor:pointer; transition:background .3s ease; }
.searchForm button:hover { background:var(--colorPoint); }
.empty { padding:100px 20px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; font-size:16px; font-weight:400; color:#888; text-align:center; }
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:75px; }
.pagination a,
.pagination span { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; font-size:14px; font-weight:400; color:#888; }
.pagination a { transition:background .3s ease, color .3s ease; }
.pagination a:hover { background:#f5f5f5; color:var(--colorPoint); }
.pagination .active { background:var(--colorPoint); color:var(--colorWhite); }
.pagination .pageArrow { border:1px solid #eee; font-size:17px; color:#aaa; }
.pagination .disabled { border:1px solid #f2f2f2; color:#ddd; }
.writeBox { display:flex; justify-content:flex-end; margin:30px 0 20px; }
.writeBox a { display:flex; align-items:center; justify-content:center; min-width:130px; height:46px; padding:0 24px; border:1px solid #FF61A0; border-radius:30px; background:#FF61A0; color:var(--colorWhite); font-size:15px; font-weight:500; transition:background .3s ease, color .3s ease; }
.writeBox a:hover { background:var(--colorWhite); color:#FF61A0; }
.subPageTitle { margin-bottom:82px; text-align:center; }
.subPageTitle h2 { position:relative; margin-bottom:28px; padding-bottom:8px; font-size:23px; font-weight:500; line-height:48px; color:var(--colorBlack); }
.subPageTitle h2::after { content:""; position:absolute; bottom:0; left:50%; width:74px; height:1px; background-color:var(--colorBlack); transform:translateX(-50%); }
.subPageTitle p { font-size:16px; font-weight:400;  color:var(--colorBlack); }
.categoryTab { margin-bottom:48px; }
.categoryTab ul { display:flex; margin:0; padding:0; background:#F9F9FB; list-style:none; }
.categoryTab ul li { flex:1; }
.categoryTab ul li a { display:flex; align-items:center; justify-content:center; height:48px; font-size:16px; font-weight:500; color:var(--colorBlack); transition:background .3s ease, color .3s ease; }
.categoryTab ul li:hover a,
.categoryTab ul li.active a { background:var(--colorPoint); color:var(--colorWhite); }



.reviewListSection .reviewListInner { width:calc(100% - 80px); max-width:1160px; margin:0 auto; }
.reviewListSection .reviewListInner .reviewList { display:flex; flex-wrap:wrap; gap:24px 1.6%; margin:0; padding:0; list-style:none; }
.reviewListSection .reviewListInner .reviewList .reviewItem { width:23.8%; }
.reviewListSection .reviewListInner .reviewList .reviewItem a { display:block; height:100%; padding:38px; border:1px solid #d8d8d8; color:var(--colorText); transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.reviewListSection .reviewListInner .reviewList .reviewItem a:hover { border-color:#FF61A0; }
.reviewListSection .reviewListInner .reviewList .reviewItem a .imageBox { overflow:hidden; width:100%; height:210px; margin-bottom:28px; background:#f5f5f5; }
.reviewListSection .reviewListInner .reviewList .reviewItem a .imageBox img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.reviewListSection .reviewListInner .reviewList .reviewItem a:hover .imageBox img { transform:scale(1.05); }
.reviewListSection .reviewListInner .reviewList .reviewItem a .reviewInfo p { overflow:hidden; margin:0; font-size:14px; font-weight:400; line-height:1.65; color:#555; text-overflow:ellipsis; white-space:nowrap; }
.reviewListSection .reviewListInner .reviewList .reviewItem a .reviewInfo p strong { margin-right:4px; font-weight:600; color:#333; }
.reviewListSection .reviewListInner .reviewList .reviewItem a .reviewInfo .reviewSubject { margin-bottom:5px; font-size:15px; font-weight:600; color:#222; }
.roaTvListSection .roaTvListInner .roaTvList .roaTvItem a { padding:0; border:0; }
.roaTvListSection .roaTvListInner .roaTvList .roaTvItem a .roaTvInfo .reviewSubject { text-align:center; }


.beforeAfterListSection .beforeAfterListInner { width:calc(100% - 80px); max-width:1160px; margin:0 auto; }
.beforeAfterListSection .beforeAfterListInner .beforeAfterList { display:flex; flex-wrap:wrap; gap:35px 2.6%; margin:0; padding:0; list-style:none; }
.beforeAfterListSection .beforeAfterListInner .beforeAfterList .beforeAfterItem { width:31.6%; border:1px solid #EEE; background:var(--colorWhite); }
.beforeAfterListSection .beforeAfterListInner .beforeAfterList .beforeAfterItem a { display:block; height:100%; color:var(--colorText); }
.beforeAfterListSection .beforeAfterListInner .beforeAfterList .beforeAfterItem a .imageBox { position:relative; overflow:hidden; width:100%; height:345px; background:#C8C8C8; }
.beforeAfterListSection .beforeAfterListInner .beforeAfterList .beforeAfterItem a .imageBox img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.beforeAfterListSection .beforeAfterListInner .beforeAfterList .beforeAfterItem:hover a .imageBox img { transform:scale(1.04); }
.beforeAfterListSection .beforeAfterListInner .beforeAfterList .beforeAfterItem a .imageBox .branchName { position:absolute; bottom:10px; left:18px; padding:5px 10px; background:#989395; color:var(--colorWhite); font-size:15px; font-weight:600; line-height:1; }
.beforeAfterListSection .beforeAfterListInner .beforeAfterList .beforeAfterItem a .beforeAfterInfo { padding:14px 10px 14px 25px; }
.beforeAfterListSection .beforeAfterListInner .beforeAfterList .beforeAfterItem a .beforeAfterInfo .categoryName { display:block; margin-bottom:8px; color:var(--colorPoint); font-size:17px; font-weight:600; line-height:1.4; }
.beforeAfterListSection .beforeAfterListInner .beforeAfterList .beforeAfterItem a .beforeAfterInfo h3 { color:var(--colorText); font-size:23px; font-weight:600; line-height:1.3; word-break:keep-all; }



/* =============================================
   병원소개 (about/clinic.php)
   ============================================= */
.aboutPage { --aboutPink:#FFBCD7; --aboutText:#292929; --aboutDark:#4C4545; --aboutSerif:"Noto Serif KR", serif; }
.aboutPage .aboutInner { width:calc(100% - 80px); max-width:1250px; margin:0 auto; }
.aboutPage .aboutMobBr { display:none; } /* 모바일 전용 줄바꿈 (customResponsive.css 에서 표시) */
/* 메인 비주얼 */
.aboutPage .subVisual.section { padding:0 0 0;  background-color: unset; }
.aboutPage .subVisual .imgBox { position:relative; width:100%; height:764px; overflow:hidden; }
.aboutPage .subVisual .imgBox > img,
.aboutPage .subVisual .imgBox > video { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.aboutPage .subVisual .imgBox > img.forMob,
.aboutPage .subVisual .imgBox > video.forMob { display:none; }
@media (max-width:780px) {
    .aboutPage .subVisual .imgBox > video.forPc { display:none; }
    .aboutPage .subVisual .imgBox > video.forMob { display:block; }
}
.aboutPage .subVisual .imgBox::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.12); }
.aboutPage .subVisual .subVisualText { position:absolute; top:53%; left:50%; z-index:2; color:var(--colorWhite); text-align:center; transform:translate(-50%,-50%); }
.aboutPage .subVisual .subVisualText .tag { position:relative; display:inline-block; margin-bottom:30px; padding-bottom:16px; font-size:23px; font-weight:500; line-height:1; letter-spacing:-0.46px; }
.aboutPage .subVisual .subVisualText .tag::after { content:""; position:absolute; bottom:0; left:50%; width:75px; height:1px; background:rgba(255,255,255,.9); transform:translateX(-50%); }
.aboutPage .subVisual .subVisualText .tit { font-size:44px; font-weight:600; line-height:55px; letter-spacing:-0.44px; }

/* 인트로 문구 */
.aboutPage .aboutIntro { padding:130px 0 120px; background:var(--colorWhite); text-align:center; }
.aboutPage .aboutIntro .introTit { margin-bottom:66px; color:var(--aboutText); font-family:var(--aboutSerif) !important; font-size:39px; font-weight:600; line-height:1.35; letter-spacing:-0.78px; }
.aboutPage .aboutIntro .introText { color:var(--aboutText); font-size:24px; font-weight:400; line-height:45px; letter-spacing:-0.6px; }
.aboutPage .aboutIntro .introText span { display:block; margin-top:45px; }

.aboutPage .aboutView { padding:133px 0 135px; background:linear-gradient(180deg, #FDDDEB 0%, #FFF6FA 14%, #FFFFFF 44%, #FFFFFF 64%, #FEE7F1 100%); }
.aboutPage .aboutView .aboutInner { max-width:1266px; }
.aboutPage .aboutView .viewTit { margin-bottom:76px; color:var(--aboutText); font-family:var(--aboutSerif) !important; font-size:43px; font-weight:600; line-height:1.35; letter-spacing:-2.15px; text-align:center; }
.aboutPage .aboutView .viewTit em { font-style:normal; font-family:"Times New Roman", serif; letter-spacing:0; }
.aboutPage .aboutView .viewList { display:flex; justify-content:center; gap:51px; margin:0; padding:0; list-style:none; }
.aboutPage .aboutView .viewItem { position:relative; flex:0 0 391px; width:391px; height:340px; padding:54px 44px 0; border:1px solid var(--aboutPink); border-radius:20px; background:var(--colorWhite); }
.aboutPage .aboutView .viewItem .num { display:block; color:var(--aboutPink); font-family:var(--aboutSerif) !important; font-size:40px; font-weight:600; line-height:1; letter-spacing:-2px; }
.aboutPage .aboutView .viewItem .num::after { content:""; display:block; width:38px; height:1px; margin-top:23px; background:var(--aboutPink); }
.aboutPage .aboutView .viewItem .tit { display:block; margin-top:24px; color:var(--aboutText); font-family:var(--aboutSerif) !important; font-size:30px; font-weight:600; line-height:1.35; letter-spacing:-1.5px; }
.aboutPage .aboutView .viewItem .desc { margin-top:26px; color:var(--aboutText); font-size:19px; font-weight:400; line-height:23px; }


.aboutPage .aboutStats { padding:130px 0; background:var(--colorWhite); }
.aboutPage .aboutStats .aboutInner { max-width:1260px; }
.aboutPage .aboutStats .statsTit { margin-bottom:65px; color:var(--aboutText); font-size:39px; font-weight:600; line-height:50px; letter-spacing:-0.78px; }
.aboutPage .aboutStats .statsBody { display:flex; align-items:center; justify-content:space-between; gap:60px; }
.aboutPage .aboutStats .statsImg { flex:0 0 466px; width:466px; height:516px; overflow:hidden; border-radius:20px; background:#f2f2f2; }
.aboutPage .aboutStats .statsImg img { display:block; width:100%; height:100%; object-fit:cover; }
.aboutPage .aboutStats .statsList { flex:1; min-width:0; margin:0; padding:0; list-style:none; text-align:right; }
.aboutPage .aboutStats .statsItem { margin-top:56px; }
.aboutPage .aboutStats .statsItem:first-child { margin-top:0; }
.aboutPage .aboutStats .statsItem .count { display:block; color:var(--aboutText); font-family:var(--aboutSerif) !important; font-size:80px; font-weight:600; line-height:1.05; letter-spacing:-1.6px; }
.aboutPage .aboutStats .statsItem .count sup { font-size:0.33em; font-weight:600; vertical-align:top; margin-left:2px; }
.aboutPage .aboutStats .statsItem .label { display:block; margin-top:8px; color:var(--aboutText); font-size:20px; font-weight:500; letter-spacing:-0.4px; }
.aboutPage .aboutStats .statsItem .sub { display:block; margin-top:6px; color:var(--aboutText); font-size:15px; font-weight:500; letter-spacing:-0.3px; }

.aboutPage .aboutHistory { padding:127px 0 170px; background:#F9F9F9; overflow:hidden; }
.aboutPage .aboutHistory .historyTit { color:#000; font-size:39px; font-weight:600; line-height:1.35; letter-spacing:-0.78px; text-align:center; }
.aboutPage .aboutHistory .historyText { margin-top:38px; color:var(--aboutText); font-size:25px; font-weight:400; line-height:1.5; text-align:center; }
.aboutPage .aboutHistory .historyText span { display:block; margin-top:22px; font-size:19px; }
.aboutPage .aboutHistory .historyWave { position:relative; width:100%; max-width:1920px; height:360px; margin:70px auto 0; }
.aboutPage .aboutHistory .historyWave .waveLine { position:absolute; top:0; left:0; width:100%; height:221px; }
.aboutPage .aboutHistory .historyItem { position:absolute; top:0; width:240px; margin-left:-120px; text-align:center; }
.aboutPage .aboutHistory .historyItem .dot { position:absolute; top:var(--dot); left:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%; background:var(--aboutPink); }
.aboutPage .aboutHistory .historyItem .year { position:absolute; top:var(--year); left:0; width:100%; color:#363636; font-family:var(--aboutSerif) !important; font-size:45px; font-weight:600; line-height:1; letter-spacing:-0.9px; }
.aboutPage .aboutHistory .historyItem .label { position:absolute; top:var(--label); left:0; width:100%; color:#45454A; font-size:18px; font-weight:400; line-height:1.35; letter-spacing:-0.36px; }


.aboutPage .aboutStandard { padding:140px 0 167px; background:var(--aboutDark); }
.aboutPage .aboutStandard .aboutInner { max-width:1245px; }
.aboutPage .aboutStandard .standardTit { color:var(--colorWhite); font-size:39px; font-weight:600; line-height:1.35; letter-spacing:-0.78px; text-align:center; }
.aboutPage .aboutStandard .standardText { margin-top:36px; color:var(--colorWhite); font-size:25px; font-weight:400; line-height:1.5; text-align:center; }
.aboutPage .aboutStandard .standardText span { display:block; margin-top:20px; font-size:19px; }
.aboutPage .aboutStandard .standardList { display:flex; justify-content:center; gap:15px; margin:70px 0 0; padding:0; list-style:none; }
.aboutPage .aboutStandard .standardItem { position:relative; flex:0 0 300px; width:300px; height:522px; overflow:hidden; border-radius:20px; }
.aboutPage .aboutStandard .standardItem .thumb { position:absolute; inset:0; }
.aboutPage .aboutStandard .standardItem .thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.aboutPage .aboutStandard .standardItem .num { position:absolute; left:22px; bottom:126px; z-index:2; color:var(--colorWhite); font-family:var(--aboutSerif) !important; font-size:40px; font-weight:300; line-height:1; letter-spacing:-0.8px; }
.aboutPage .aboutStandard .standardItem .tit { position:absolute; left:22px; bottom:45px; z-index:2; color:var(--colorWhite); font-size:29px; font-weight:600; line-height:1.25; letter-spacing:-0.58px; }



/* =============================================
   지점 · 의료진안내 (about/branches_doctors.php)
   ============================================= */
.branchesPage .bdInner { width:calc(100% - 80px); max-width:1250px; margin:0 auto; }
.branchesPage .bdMobBr,
.branchesPage .mapLinks { display:none; } /* 모바일 전용 (customResponsive.css 에서 표시) */
.branchesPage .branchesSection { position:relative; padding:200px 0 0; overflow:hidden; }
.branchesPage .subPageTitle { margin-bottom:56px; }

/* 지점 탭 */
.branchesPage .branchTab { margin-bottom:47px; }
.branchesPage .branchTab ul { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0; padding:0; list-style:none; }
.branchesPage .branchTab li { position:relative; padding:0 49px; }
.branchesPage .branchTab li::after { content:""; position:absolute; top:50%; right:0; width:1px; height:14px; background:#d5d5d5; transform:translateY(-50%); }
.branchesPage .branchTab li:last-child::after { display:none; }
.branchesPage .branchTab li button { padding:0; border:0; background:none; font-family:inherit; font-size:16px; font-weight:500; line-height:48px; color:#111; cursor:pointer; transition:color .2s ease; }
.branchesPage .branchTab li:hover button { color:var(--colorPoint); }
.branchesPage .branchTab li.active button { color:var(--colorPoint); font-weight:600; }

/* 지점 패널 */
/* 비활성 탭은 display:none 대신 화면 밖으로 — 카카오맵 컨테이너 크기가 유지돼야 지도가 정상 렌더됨 */
.branchesPage .branchPanel { position:absolute; top:0; left:0; width:100%; visibility:hidden; }
.branchesPage .branchPanel.active { position:static; visibility:visible; }

/* 지점 정보 */
.branchesPage .branchInfo { padding:60px 0; background:#FBFBFB; }
.branchesPage .branchInfoInner { display:flex; align-items:flex-start; gap:60px; }
.branchesPage .branchMap { flex:0 0 490px; width:490px; }
.branchesPage .branchMap .daumRoughmap,
.branchesPage .branchMap .root_daum_roughmap { width:100% !important; margin:0 !important; border:0 !important; }
.branchesPage .branchMapEmpty { display:flex; align-items:center; justify-content:center; width:100%; height:340px; background:#f0f0f0; color:#999; font-size:15px; }
.branchesPage .branchDetail { flex:1; min-width:0; padding-top:6px; }
.branchesPage .branchName { font-size:30px; font-weight:600; line-height:1; letter-spacing:-0.6px; color:#111; }
.branchesPage .branchAddr { margin-top:8px; font-size:20px; font-weight:400; line-height:1.5; letter-spacing:-0.46px; color:#111; }
.branchesPage .branchAddr span { font-size:16px; color:#111; }
.root_daum_roughmap .cont .section.lst { display:none; }
.root_daum_roughmap .cont { margin:0; border-top:1px solid #e5e5e5; }
.branchesPage .branchBtns { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.branchesPage .branchBtns a { display:inline-flex; align-items:center; gap:8px; height:39px; padding:0 16px; border-radius:10px; font-size:15px; font-weight:600; letter-spacing:-0.3px; color:var(--colorWhite); }
.branchesPage .branchBtns a img { width:20px; height:20px; object-fit:contain; }
.branchesPage .branchBtns a i { font-style:normal; font-weight:300; }
.branchesPage .branchBtns .btnNaver { background:#17C462; }
.branchesPage .branchBtns .btnKakao { gap: 4px; background:#FED801; color:#231916; }
.branchesPage .branchBtns .btnKakao span { font-weight:500;}
.branchesPage .branchBtns .btnHome { background:var(--colorPoint); }

.branchesPage .branchContact { display:flex; flex-wrap:wrap; gap:20px 64px; margin-top:22px; }
.branchesPage .contactItem .contactLabel { display:block; margin-bottom:6px; font-size:16px; font-weight:600; letter-spacing:-0.3px; color:var(--colorPoint); }
.branchesPage .contactItem .contactNum { font-size:30px; font-weight:400; line-height:1; letter-spacing:-0.6px; color:#111; }
.branchesPage .contactItem .contactNum .roaPhoneLight,
.branchesPage .contactItem .contactNum .roaPhoneDot { font-size:30px; color:#111; font-weight:300; line-height:1; }

.branchesPage .branchHours { margin-top:34px; }
.branchesPage .branchHours .hoursTitle { display:block; margin-bottom:10px; font-size:17px; font-weight:600; line-height:30px; letter-spacing:-0.51px; color:#f57f9b; }
.branchesPage .branchHours ul { margin:0; padding:0; list-style:none; }
.branchesPage .branchHours .hoursList { display:grid; grid-template-columns:repeat(2, max-content); grid-template-rows:repeat(2, auto); grid-auto-flow:column; column-gap:30px; }
.branchesPage .branchHours .hoursList li { display:flex; gap:10px; font-size:17px; line-height:32px; letter-spacing:-0.34px; color:#111; }
.branchesPage .branchHours .hoursList li strong { flex:0 0 110px; font-weight:500; text-align:justify; text-align-last:justify; }
.branchesPage .branchHours .hoursList li span { font-weight:300; }
.branchesPage .branchHours .hoursList li span b { font-weight:600; }
.branchesPage .branchHours .hoursNotice { margin-top:14px; }
.branchesPage .branchHours .hoursNotice li { font-size:15px; line-height:25px; color:#111; }
.branchesPage .branchHours .hoursNotice li::before { content:"※ "; }


/* 공통 영역 타이틀 */
.branchesPage .areaTit { margin-bottom:48px; font-size:27px; font-weight:500; line-height:1.3; letter-spacing:-1.08px; color:#111; text-align:center; }
.branchesPage .areaEmpty { padding:30px 0 10px; font-size:16px; font-weight:300; color:#999; text-align:center; }

/* 의료진 소개 - 한 줄 4명 */
.branchesPage .doctorArea { margin-top:110px; max-width:1320px; }
.branchesPage .doctorList { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:44px 2.4%; margin:0; padding:0; list-style:none; }
.branchesPage .doctorItem { width:23.2%; max-width:300px; min-width:0; }
/* 의료진 5명 이상: 한 줄 3명씩 (5명이면 3·2), 마지막 줄도 가운데 정렬 */
.branchesPage .doctorList:has(> .doctorItem:nth-child(5)) { max-width:980px; margin:0 auto; column-gap:40px; }
.branchesPage .doctorList:has(> .doctorItem:nth-child(5)) .doctorItem { width:calc((100% - 80px) / 3); }
.branchesPage .doctorPhoto { position:relative; width:100%; margin-bottom:30px; }
.branchesPage .doctorPhoto .photoBg { position:absolute; left:0; right:0; top:16%; bottom:0; z-index:0; border-radius:15px; background:#F6F5F4; }
.branchesPage .doctorPhoto img { position:relative; z-index:1; display:block; width:100%; height:auto; }
.branchesPage .doctorName { display:flex; align-items:baseline; justify-content:center; gap:15px; margin-bottom:26px; }
.branchesPage .doctorName strong { margin-right:-3.2px; font-size:32px; font-weight:500; letter-spacing:3.2px; color:#111; }
.branchesPage .doctorName span { font-size:22px; font-weight:400; letter-spacing:-0.88px; color:#111; }
.branchesPage .doctorCareer { margin:0; padding:0 0 0 15px; list-style:none; }
.branchesPage .doctorCareer li { position:relative; padding-left:15px; font-size:18px; font-weight:300; line-height:35px; letter-spacing:-0.54px; color:#111; word-break:keep-all; }
.branchesPage .doctorCareer li::before { content:"•"; position:absolute; left:0; top:0; }

/* 병원 둘러보기 */
.branchesPage .tour { background:url('/roa/img/common/tour_bg.png') no-repeat center center; background-size:cover; padding:110px 0 130px; margin-top:100px;  }
.branchesPage .tourGallery { width:1100px; max-width:100%; margin:0 auto; }

/* 메인 스와이퍼 */
.branchesPage .tourViewer { position:relative; display:flex; align-items:center; justify-content:center; gap:22px; }
.branchesPage .tourSwiper { flex:1 1 auto; min-width:0; overflow:hidden; background:#f2f2f2; }
.branchesPage .tourSwiper .swiper-slide { height:675px; }
.branchesPage .tourSwiper .swiper-slide img { display:block; width:100%; height:100%; object-fit:cover; }
.branchesPage .tourNav { position: absolute;  flex:0 0 54px; width:54px; height:54px; padding:0; border:0; background:none; cursor:pointer; transition:opacity .2s ease; z-index:2; }
.branchesPage .tourNav:hover { opacity:.6; }
.branchesPage .tourNav img { display:block; width:100%; height:100%; }
.branchesPage .tourNav.tourPrev { left:-124px; }
.branchesPage .tourNav.tourNext { transform:rotate(180deg); right:-124px; }
.branchesPage .tourNav.swiper-button-disabled { opacity:.25; cursor:default; }

/* 썸네일 스와이퍼 */
.branchesPage .tourThumbsSwiper { margin-top:14px; overflow:hidden; }
.branchesPage .tourThumbsSwiper .swiper-slide { height:131px; overflow:hidden; border:2px solid transparent; cursor:pointer; transition:border-color .2s ease; }
.branchesPage .tourThumbsSwiper .swiper-slide img { display:block; width:100%; height:100%; object-fit:cover; }
.branchesPage .tourThumbsSwiper .swiper-slide-thumb-active,
.branchesPage .tourThumbsSwiper .swiper-slide.isActive { border-color:var(--colorPoint); }

/* Swiper 미로드 시 폴백 : 첫 이미지만 */
.branchesPage .tourGallery.noSwiper .tourNav,
.branchesPage .tourGallery.noSwiper .tourThumbsSwiper { display:none; }
.branchesPage .tourGallery.noSwiper .tourSwiper .swiper-wrapper { display:block; }
.branchesPage .tourGallery.noSwiper .tourSwiper .swiper-slide:not(:first-child) { display:none; }


/* =============================================================
   서브페이지 이미지 코딩
   ============================================================= */
   .imgCode.forTeb { display: none; }
   .imgCode { margin-top: 146px; }
   .imgCode img { width: 100%; }
   .dampness_syndrome, 
   .roa_herbal_medicine, 
   .area_slimming,
   .breast_treatment,
   .fat_dissolving_acupuncture,
   .machine_slimming,
   .cheek_sagging,
   .facial_paralysis,
   .fibrosis,
   .post_liposuction_care,
   .swelling
    { max-width: 1000px; margin: 0 auto; }

   /* 후기 인터뷰 영상 (회원 전용) */
   .interviewVideo { text-align: center; padding-bottom: 50px; }
   .interviewVideo .interviewLoginLink { display: inline-block; cursor: pointer; }
   .interviewVideo .videoWrap { position: relative; width: 100%; max-width: 900px; margin: 0 auto; height: 0; padding-bottom: 56.25%; }
   .interviewVideo .videoWrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

    .contour_acupuncture, 
    .anti_aging_acupuncture, 
    .tmj_disorder, 
    .under_eye_treatment, 
    .wrinkle_treatment, 
    .salmon_pn_booster,
    .exosome_booster,
    .pelvic_imbalance
    { margin-top: 146px; }


/* =============================================================
   시술 상세페이지 공통 (.tpPage) + 비너스코 (.subpage)
   색상 테마는 .subpage 의 CSS 변수만 교체하면 리브랜딩됨
   ============================================================= */
.subpage {
    --tpAccent:#c6738f;        /* 세리프 헤딩 · 포인트 텍스트 */
    --tpAccentSoft:#f1d3dd;    /* POINT 배지 배경 */
    --tpAccentFaint:#fff4f9;   /* 섹션 배경 틴트 */
    --tpDark:#3b4151;          /* CASE 섹션 배경 */
    --tpTipBg:#e7e8ec;         /* Doctor's TIP 배경 */
    --tpTipSide:#e7cdd8;       /* Doctor's TIP 우측 패널 */
    --tpHi:#ffbf25;            /* 매트릭스 마취 하이라이트 */
    --tpInk:#252525;
    --tpGray:#7e7e7e;
    --tpGrayLite:#939393;
    --tpSerif:"Noto Serif KR", serif;
    --tpEn:"Oswald", "Pretendard", sans-serif;
}
.tpPage { overflow:hidden; color:var(--tpInk); font-family:"Pretendard", sans-serif; }
.tpPage img { display:block; max-width:100%; }
.tpPage section { position:relative; }
.tpPage .tpPointsInner,
.tpPage .tpCaseInner,
.tpPage .tpKnowhowInner,
.tpPage .tpCardsInner,
.tpPage .tpDoctorInner,
.tpPage .tpCompareInner,
.tpPage .tpFaqInner,
.tpPage .tpMechanismInner,
.tpPage .tpCartridgeInner,
.tpPage .tpAmpouleInner,
.tpPage .tpFeatureInner,
.tpPage .tpTipInner,
.tpPage .tpAboutInner,
.tpPage .tpThreadInner,
.subpage .ultheraInfoInner { width:calc(100% - 80px); max-width:1520px; margin:0 auto; }
.tpPage .tpHeroInner { width:calc(100% - 80px); max-width:1220px; margin:0 auto; }
.tpPage .tpIntroInner { width:calc(100% - 80px); max-width:1480px; margin:0 auto; }
.tpPage .tpSectionTitle { display:block; font-family:var(--tpEn) !important; font-weight:600; font-size:55px; line-height:1; letter-spacing:1px; color:var(--tpInk); text-align:center; }
.tpPage .tpSectionTitle.kr { font-family: 'Pretendard' !important;; }
/* ── 비너스코 ── */
.subpage.venusNose .tpHero { background:#f7edf0 url("/roa/img/main/hero_bg_001.png") center/cover no-repeat; }
/* ── 남자 비너스코 ── */
.subpage.venusNoseMaens .tpHero { background:#428FCE url("/roa/img/main/hero_bg_002.webp") center/cover no-repeat; }
/* ── 울쎄라 ── */
.subpage.ulthera .tpHero { background: url("/roa/img/main/hero_bg_003.webp") center/cover no-repeat; }
/* ── 써마지 ── */
.subpage.thermage_flx .tpHero { background: url("/roa/img/main/hero_bg_004.webp") center/cover no-repeat; }
/* ── 퀸텀핏 ── */
.subpage.quantum_fit .tpHero { background: url("/roa/img/main/hero_bg_008.webp") center/cover no-repeat; }
/* ── 리크로웨이브 ── */
.subpage.recrowave .tpHero { background: url("/roa/img/main/hero_bg_009.webp") center/cover no-repeat; }
/* ── 실리프팅 ── */
.subpage.thread_lifting .tpHero { background: url("/roa/img/main/hero_bg_010.webp") center/cover no-repeat; }

/* ── 히어로 ── */
.subpage .tpHero { margin-top: 146px; height: 750px; overflow:hidden; }
.subpage .tpHero .tpHeroInner { position:relative; height:100%; }
.subpage .tpHero .tpHeroText { position:absolute; left:0; top:350px; z-index:2; }
.subpage .tpHero .tpHeroTitle { font-family:"Pretendard", sans-serif; font-weight:700; font-size:70px; line-height:1; letter-spacing:-4px; color:var(--tpInk); }
.subpage .tpHero .tpHeroDesc { margin-top:30px; padding-left: 3px; font-size:21px; font-weight:500; line-height:1.42; letter-spacing:-1px; color:var(--tpInk); }
.subpage .tpHero .tpHeroTags { margin-top:30px; padding-left: 3px; font-size:17px; font-weight:400; line-height:1.55; letter-spacing:-1px; color:var(--tpInk); }
.subpage .tpHero.White .tpHeroTitle { color:var(--colorWhite); }
.subpage .tpHero.White .tpHeroDesc { color:var(--colorWhite); }
.subpage .tpHero.White .tpHeroTags { color:var(--colorWhite); }
.subpage .tpHero .tpHeroModel { position:absolute; right:0; bottom:0; z-index:1; width:620px; height:811px; overflow:hidden; }
.subpage .tpHero .tpHeroModel img { width:118%; height:auto; margin-left:-5%; margin-top:-8%; }
.subpage .tpHero:has(.imgBox video) .tpHeroTitle,
.subpage .tpHero:has(.imgBox video) .tpHeroDesc,
.subpage .tpHero:has(.imgBox video) .tpHeroTags {color: var(--colorWhite); }
/* 비디오가 들어간 히어로만 적용 */
.subpage .tpHero:has(.imgBox video) { position: relative; }
/* 텍스트 영역 */
.subpage .tpHero:has(.imgBox video) .tpHeroInner { position: relative; z-index: 2; }
/* 비디오 영역 */
.subpage .tpHero:has(.imgBox video) .imgBox { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; }
.subpage .tpHero:has(.imgBox video) .imgBox video { width: 100%; height: 100%; object-fit: cover; }
/* PC/모바일 영상이 따로 있으면 forPc / forMob 로 나눠 보여준다 */
.subpage .tpHero .imgBox video.forMob { display: none; }
@media (max-width:780px) {
    .subpage .tpHero .imgBox video.forPc { display: none; }
    .subpage .tpHero .imgBox video.forMob { display: block; }
}
.subpage .tpHero:has(.imgBox video) .imgBox::after { content: ""; position: absolute; inset: 0; z-index: 1;background: linear-gradient( to bottom,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%); pointer-events: none; }
    
/* ── 시술 요약 아이콘 바 ── */
.subpage .tpSpec { padding:100px 0 0; background:#fff; }
.subpage .tpSpecList { display:flex; justify-content:center; align-items:stretch; margin:0; padding:0; list-style:none; }
.subpage .tpSpecList li { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 42px; text-align:center; }
.subpage .tpSpecList li + li::before { content:""; position:absolute; left:0; top:50%; width:1px; height:78px; background:#e7e7e7; transform:translateY(-50%); }
.subpage .tpSpecList .ic { display:flex; align-items:flex-end; justify-content:center; width: 55px; height:74px; margin-bottom:16px; }
.subpage .tpSpecList .ic img { max-height:100%; width:100%; height:100%; }
.subpage .tpSpecList b { font-size:18px; font-weight:300; color:#706f6f; }
.subpage .tpSpecList em { margin-top:5px; font-size:18px; font-style:normal; font-weight:500; color:#3a3a3a; }

.subpage.ulthera .tpSpecList li:not(:first-child) .ic img { filter: brightness(0) saturate(100%) invert(84%) sepia(24%) saturate(1047%) hue-rotate(326deg) brightness(103%) contrast(101%); }
.subpage.thermage_flx .tpSpecList li:not(:first-child) .ic img { filter: brightness(0) saturate(100%) invert(46%) sepia(26%) saturate(803%) hue-rotate(209deg) brightness(188%) contrast(88%); }
.subpage.onda_lifting .tpSpecList li:not(:first-child) .ic img { filter: brightness(0) saturate(100%) invert(62%) sepia(78%) saturate(941%) hue-rotate(126deg) brightness(89%) contrast(85%); }
.subpage.shurink_universe .tpSpecList li:not(:first-child) .ic img { filter: brightness(0) saturate(100%) invert(69%) sepia(20%) saturate(1035%) hue-rotate(166deg) brightness(95%) contrast(88%); }
.subpage.volnewmer .tpSpecList li:not(:first-child) .ic img { filter: brightness(0) saturate(100%) invert(23%) sepia(23%) saturate(1136%) hue-rotate(358deg) brightness(90%) contrast(87%); }
.subpage.quantum_fit .tpSpecList li:not(:first-child) .ic img { filter: brightness(0) saturate(100%) invert(17%) sepia(17%) saturate(883%) hue-rotate(171deg) brightness(91%) contrast(89%); } 
.subpage.recrowave .tpSpecList li:not(:first-child) .ic img {  filter: brightness(0) saturate(100%) invert(23%) sepia(23%) saturate(1136%) hue-rotate(358deg) brightness(90%) contrast(87%); } 


/* ── 리드 ── */
.subpage .tpLead { padding:100px 0; background:#fff; text-align:center; }
.subpage .tpLead h2 { font-family:var(--tpSerif) !important; font-size:62px; font-weight:400; letter-spacing:-3px; color:#414141; }

/* ── 누적 통계 ── */
.subpage .tpStats { padding:40px 0 130px; background:#fff; }
.subpage .tpStats .tpStatsCard { position:relative; width:calc(100% - 80px); max-width:1670px; margin:0 auto; padding:120px 20px; display:flex; flex-direction:column; align-items:center; background:#c9c9c9 url("/roa/img/main/stats_bg_001.png") center/cover no-repeat; }
.subpage .tpStats .tpStatsCard::before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:calc(100% - 160px); height:calc(100% - 160px); background:rgba(255,255,255,.9); }
.subpage .tpStats .tpStatsHead { position:relative; z-index:1; margin-bottom:56px; font-family:var(--tpSerif) !important; font-size:44px; font-weight:500; letter-spacing:-2px; color:var(--tpAccent); text-align:center; }
.subpage .tpStats .tpStatsHead::after { content:""; display:block; width:42px; height:1px; margin:28px auto 0; background:var(--tpAccent); }
.subpage .tpStats .tpStatsList { position:relative; z-index:1; margin:0; padding:0; list-style:none; }
.subpage .tpStats .tpStatsList li { display:flex; align-items:flex-end; justify-content:center; gap:16px; margin-top:22px; }
.subpage .tpStats .tpStatsList li:first-child { margin-top:0; }
.subpage .tpStats .tpStatsList .lbl { align-self:center; width:430px; font-size:34px; font-weight:500; letter-spacing:-1.8px; color:#515151; text-align:right; white-space:nowrap; }
.subpage .tpStats .tpStatsList .num { font-family:var(--tpSerif) !important; font-size:70px; font-weight:500; line-height:1; letter-spacing:-2px; color:#515151; }
.subpage .tpStats .tpStatsList .num span { font-family:var(--tpSerif) !important;  }
.subpage .tpStats .tpStatsList .num i { margin-left:6px; font-size:30px; font-style:normal; }
.subpage .tpStats .tpStatsList .date { padding-bottom:10px; font-size:16px; font-weight:400; color:#515151; }

.subpage.venusNoseMaens .tpStats .tpStatsCard { background:#c9c9c9 url("/roa/img/main/stats_bg_002.webp") center/cover no-repeat; }
.subpage.venusNoseMaens .tpStats .tpStatsText { margin-bottom: 32px; font-size: 33px; line-height: 42px; letter-spacing: -1.65px; color: #808080; z-index: 9; text-align: center;}
.subpage.venusNoseMaens .tpStats .tpStatsText span { color: #5C71E1; }
.subpage.venusNoseMaens .tpStats .tpStatsList { display: flex; align-items: center; gap: 20px;  }
.subpage.venusNoseMaens .tpStats .tpStatsList li { margin-top: unset; }

.subpage.thread_lifting .tpStats .tpStatsHead { font-family: 'Pretendard' !important;  font-size: 35px; line-height: 50px; margin-bottom: 30px; }
.subpage.thread_lifting .tpStats .tpStatsInfo { font-size: 25px; line-height: 38px; letter-spacing: -1.25px; color: #515151; z-index: 9; text-align: center; }


/* ── 비너스코란 ── */
.subpage .tpIntro { padding:0 0 0; background:var(--tpAccentFaint); }
.subpage .tpIntroInner { display:flex; align-items:flex-start; gap:150px; }
.subpage .tpIntroMedia { position:relative;  }
.subpage .tpIntroMedia .main { width:100%; height:710px; }
.subpage .tpIntroMedia .main.forMob{ display: none; }
.subpage .tpIntroMedia .sub { position:absolute; right:-40px; bottom:70px; width:300px; box-shadow:0 24px 50px rgba(0,0,0,.14); }
.subpage .tpIntroText { flex:1; min-width:0; padding-top:80px; }
.subpage .tpIntroTitle { margin-bottom:54px; font-family:"Pretendard", sans-serif; font-size:64px; font-weight:600; letter-spacing:-2px; color:var(--tpInk); }
.subpage .tpIntroText .lead { margin-bottom:38px; font-size:25px; font-weight:400; line-height:1.4; letter-spacing:-1.6px; color:var(--tpInk); }
.subpage .tpIntroText p { margin-top:22px; font-size:18px; font-weight:400; line-height:1.65; letter-spacing:-0.8px; color:var(--tpInk); }

.subpage.venusNoseMaens .tpIntro { background: #EFF1FB; }
.subpage.venusNoseMaens .tpIntroInner { gap: 70px; }


/* ── POINT  ── */
.subpage .tpPoints { padding:100px 0 100px; background:#fff; overflow:hidden; }
.subpage .tpPointsWatermarkBox {  position: relative;  min-height: 500px; }
.subpage .tpPointsWatermarkBox .tpPointsWatermark { position:absolute; left:48%; top:50%; transform:translate(-50%,-50%); z-index:0;  font-family: "Playfair Display", serif !important; font-size:200px; font-weight: 400; line-height:40px; letter-spacing:-6px; color:#f6f5f7; text-transform:uppercase; white-space:nowrap; pointer-events:none; }
.subpage .tpPoints .tpPointsInner { position:relative; z-index:1; max-width:1200px; }
.subpage .tpPointsTitle { margin-bottom:118px;  font-family: 'Oswald', sans-serif !important; }
.subpage .tpPointRow { display:flex; align-items:flex-start; justify-content:space-between; gap: 50px; }
.subpage .tpPointRow:first-of-type { margin-top:0; }
.subpage .tpPointRow:last-of-type { margin-top:100px; }
.subpage .tpPointRow--reverse { flex-direction:row-reverse; }
.subpage .tpPointMedia { position:relative;  }
.subpage .tpPointMedia > img { display:block; width:100%; object-fit:cover; }
.subpage .tpPointMedia--cert { align-self:flex-start; }
.subpage .tpPointMedia--cert > img { width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 20px 45px rgba(0,0,0,.09)); }
.subpage .tpPointMedia--tint {  box-sizing:border-box; display:flex; align-items:flex-end; justify-content:center; }
.subpage .tpPointMedia--tint > img { width:auto; object-fit:cover; object-position:bottom; }

.subpage .tpPointText { flex:0 0 597px; padding-top:4px; }
.subpage .tpPointText .badge { position:relative; z-index:2; display:inline-block; box-sizing:border-box; font-family: 'Oswald', sans-serif !important;  width:182px; height:50px; margin-left:-86px; margin-bottom:32px; padding-right:8px; line-height:50px; background:var(--tpAccentSoft); font-family:var(--tpEn); font-weight:600; font-size:26px; letter-spacing:0; color:var(--tpInk); text-align:right; }
.subpage .tpPointText h3 { margin-bottom:30px; font-size:31px; font-weight:300; line-height:1.25; letter-spacing:-1.2px; color:var(--tpInk); }
.subpage .tpPointText p { margin-top:22px; font-size:18px; font-weight:400; line-height:1.56; letter-spacing:-.9px; color:#7b7b7b; }
.subpage.venusNoseMaens .tpPointText .badge { background: #D3D7F0; }
.subpage.ulthera .tpPointMedia--cert { flex-basis: unset; }
.subpage.ulthera .tpPointMedia--tint { height: unset; }
.subpage.ulthera .tpPointMedia > img { width: 100%; height: unset; }
.subpage.ulthera .tpPointText .badge { background: #FFDFBC; }
.subpage.thermage_flx .tpPointText .badge { background: #DBC7FA; }
.subpage.venusNose .tpPointMedia--tint > img { height: 554px; }
.subpage.venusNose .tpPointMedia--tint > img.forPc { display: block; }
.subpage.venusNose .tpPointMedia--tint > img.forMob { display: none; }
.subpage.onda_lifting .tpPointText .badge { background: #DBF7EB; }
.subpage.shurink_universe .tpPointText .badge { background: #C9E8FB; }
.subpage.quantum_fit .tpPointText .badge{ background: #D9EFFF; }
.subpage.recrowave .tpPointText .badge { background: #F2C9C0; }
.subpage.thread_lifting .tpPointText .badge { background: #F1D3DD; }
.subpage.thread_lifting .tpPointMedia--cert > img { filter:unset; }
.subpage.waxing .tpPointText .badge { background: #F6D5D5; }
.subpage.man_waxing .tpPointText .badge { background: #CDE7FF; }

/* ── CASE ── */
.subpage .tpCase { padding:100px 0 130px; background:var(--tpDark); }
.subpage .tpCase .tpCaseInner { max-width:760px; }
.subpage .tpCaseTitle { margin-bottom:64px; color:#fff; font-family: 'Oswald', sans-serif !important;  }
.subpage .tpCaseTitle.kr { font-family: 'Pretendard' !important; font-size: 45px; letter-spacing: -1.35px; }
.subpage .tpCaseList { display:flex; flex-wrap:wrap; justify-content:center; gap:56px 40px; margin:0; padding:0; list-style:none; }
.subpage .tpCaseList li { width:355px; }
.subpage .tpCaseList .cap { margin-bottom:18px; font-size:25px; font-weight:400; letter-spacing:-2px; color:#fff; text-align:center; }
.subpage .tpCaseList .pair img { width:100%; height:334px; object-fit:cover; }
.ulthera.subpage .tpCaseList li { width:500px; }
.ulthera.subpage .tpCaseList .pair img { height: 520px; }
.subpage .tpCaseList .ba { display:flex; }
.subpage .tpCaseList .ba i { flex:1; height:50px; display:flex; align-items:center; justify-content:center; background:#fff; font-size:17px; font-weight:500; font-style:normal; letter-spacing:-.85px; color:var(--tpInk); }
.subpage .tpCaseList .ba i:first-child { border-right:1px solid #ececec; }

.subpage.ulthera .tpCase { background: #FAF3EC; }
.subpage.ulthera .tpCaseTitle.kr { color: var(--colorText); }
.subpage.thread_lifting .tpCase { background: var(--colorWhite); }
.subpage.thread_lifting .tpCaseTitle { color: var(--colorText); }

/* ── know how ── */
.subpage .tpKnowhow { padding:100px 0 92px; background:#fbfbfb; }
.subpage .tpKnowhow .tpSectionTitle { margin-bottom:72px; font-family: 'Oswald', sans-serif !important;  }
.subpage .tpKnowhow .tpSectionTitle.kr { font-family: 'Pretendard' !important; font-size: 45px; letter-spacing: -1.35px; }
.subpage .tpKnowhowList { display:flex; justify-content:center; gap:38px; margin:0; padding:0; list-style:none; }
.subpage .tpKnowhowList .circle { display:flex; flex-direction:column; align-items:center; justify-content:center; width:226px; height:226px; border-radius:50%; border:8px solid var(--tpAccentSoft); text-align:center; }
.subpage .tpKnowhowList em { margin-bottom:14px; font-family: 'Oswald', sans-serif !important; font-weight:600; font-size:28px; font-style:normal; color:var(--tpInk); }
.subpage .tpKnowhowList p { font-size:22px; font-weight:400; line-height:1.35; letter-spacing:-1.1px; color:var(--tpInk); }

.subpage.venusNoseMaens .tpKnowhowList .circle { border-color: #D3D7F0;  }
.subpage.ulthera .tpKnowhow { background: #FAF3EC; }
.subpage.ulthera .tpKnowhowList .circle { border-color: #EDD9C6; background-color: var(--colorWhite); }
.subpage.thermage_flx .tpKnowhow { background: #FBF7FE; }
.subpage.thermage_flx .tpKnowhowList .circle { border-color: #E0C6F0; background-color: var(--colorWhite); }
.subpage.onda_lifting .tpKnowhow { background: #FBFBFB; }
.subpage.onda_lifting .tpKnowhowList .circle { border-color: #AFDBC8; background-color: var(--colorWhite); }
.subpage.onda_lifting .tpKnowhowList p { color: #0B2A1D; }
.subpage.shurink_universe .tpKnowhow { background: #F1FBFF; }
.subpage.shurink_universe .tpKnowhowList .circle { border-color: #A5C6EC; background-color: var(--colorWhite); }
.subpage.shurink_universe .tpKnowhowList p { color: #252525; }
.subpage.volnewmer .tpKnowhow { background: #FAF3EC; }
.subpage.volnewmer .tpKnowhowList .circle { border-color: #EDD9C6; background-color: var(--colorWhite); }
.subpage.volnewmer .tpKnowhowList p { color: #55401E; }
.subpage.quantum_fit .tpKnowhow { background: #FBFBFB; }
.subpage.quantum_fit .tpKnowhowList .circle { border-color: #C2D7E6; background-color: var(--colorWhite); }
.subpage.quantum_fit .tpKnowhowList p { color: #252525; }
.subpage.thread_lifting .tpKnowhow { background: #FEF0FA; }
.subpage.thread_lifting .tpKnowhowList .circle { border-color: #FFDBF5; background-color: var(--colorWhite); }
.subpage.thread_lifting .tpKnowhowList p { color: #252525; }
.subpage.waxing .tpKnowhow { background: #FFF5F5; }
.subpage.waxing .tpKnowhowList .circle { border-color: #F6D5D5; background-color: var(--colorWhite); }
.subpage.waxing .tpKnowhowList p { color: #252525; }
.subpage.man_waxing .tpKnowhow { background: #F8FBFE; }
.subpage.man_waxing .tpKnowhowList .circle { border-color: #B8D3F8; background-color: var(--colorWhite); }
.subpage.man_waxing .tpKnowhowList p { color: #252525; }

/* ── 01 / 02 / 03 ── */
.subpage .tpCards { padding:100px 0; background:#252a34 url("/roa/img/main/card_bg.png") center/cover no-repeat; }
.subpage .tpCardsList { display:flex; justify-content:center; gap:30px; margin:0; padding:0; list-style:none; }
.subpage .tpCardsList li { position:relative; width:407px; padding-bottom:48px; background:#fff; }
.subpage .tpCardsList .thumb { height:247px; overflow:hidden; }
.subpage .tpCardsList .thumb img { width:100%; height:100%; object-fit:cover; }
.subpage .tpCardsList .num { position:absolute; left:50%; top:247px; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%; background:#252525; font-family:var(--tpEn); font-weight:600; font-size:30px; color:#fff; }
.subpage .tpCardsList h3 { margin:66px 0 26px; font-size:28px; font-weight:300; letter-spacing:-.84px; color:var(--tpInk); text-align:center; }
.subpage .tpCardsList p { margin:0 23px; font-size:17px; font-weight:300; line-height:1.53; letter-spacing:-.51px; color:#7e7e7e; text-align:center; }
.subpage .tpCardsList p + p { margin-top:16px; }

/* ── Doctor's TIP ── */
.subpage .tpDoctor { position:relative; overflow:hidden; background:var(--tpTipBg); padding:88px 0 0; min-height:1030px; }
.subpage .tpDoctor::before { content:""; position:absolute; right:0; top:0; bottom:0; width:36.4%; background:var(--tpTipSide); }
.subpage .tpDoctorLabel { display:block; position:relative; z-index:1; margin-bottom:46px; text-align:center; }
.subpage .tpDoctor .tpDoctorInner { position:relative; z-index:2; max-width:1290px; padding-bottom:0; }
.subpage .tpDoctorText { max-width:640px; }
.subpage .tpDoctorText h3 { margin-bottom:36px; padding-left:8px; font-size:32px; font-weight:300; line-height:1.35; letter-spacing:-1.6px; color:var(--tpInk); }
.subpage .tpDoctorText p { margin-top:20px; font-size:19px; font-weight:300; line-height:1.5; letter-spacing:-.57px; color:#8a8a8a; }
.subpage .tpDoctorMedia { position:absolute; right: 15%; bottom:-10px; z-index:1; pointer-events:none; }
.subpage .tpDoctorMedia img { display:block; width:100%; height:auto; }
.subpage .tpDoctorQuote { position:relative; max-width:640px; margin:50px 0 0; padding:44px 0 64px; text-align:center; font-size:35px; font-weight:300; line-height:1.4; letter-spacing:-1.75px; color:var(--tpInk); }
.subpage .tpDoctorQuote b { font-weight:300; color:var(--tpAccent); }
.subpage .tpDoctorQuote::before,
.subpage .tpDoctorQuote::after { position:absolute; left:50%; font-family:Georgia, "Times New Roman", serif; font-size:74px; line-height:1; color:#fff; }
.subpage .tpDoctorQuote::before { content:"\201C"; top:0; }
.subpage .tpDoctorQuote::after { content:"\201D"; bottom:-18px; }
.subpage .tpDoctorVert { position:absolute; top:118px; right:15%; z-index:2; writing-mode:vertical-rl; text-orientation:sideways; white-space:nowrap; font-family:"Pretendard", sans-serif; font-size:15px; font-weight:500; letter-spacing:14px; color:#fff; pointer-events:none; }


.subpage.venusNoseMaens .tpDoctorQuote { max-width: 680px; }
.subpage.venusNoseMaens .tpDoctor::before { background: #CDD4E7; }
.subpage.venusNoseMaens .tpDoctorQuote b { color: #4A5FAE; }
.subpage.thread_lifting .tpDoctor { background: url(/roa/img/main/tpDoctorBg_01.png) no-repeat center/cover ;  min-height:1070px;}
.subpage.thread_lifting .tpDoctorText { padding-bottom: 100px; }
.subpage.thread_lifting .tpDoctorMedia { bottom: 0; }


/* ── 피부 속 정밀 시술 ── */
.subpage .ultheraInfo { padding:120px 0 0; background:#fff; }
.subpage .ultheraInfoBlock { text-align:center; }
.subpage .ultheraInfoBlock + .ultheraInfoBlock { margin-top:160px; }
.subpage .ultheraInfoTitle { margin-bottom:40px; font-size:45px; font-weight:600; line-height:1.4; letter-spacing:-1px; color:var(--tpInk); }
.subpage .ultheraInfoTitle--accent { color:var(--tpAccent); }
.subpage .ultheraInfoDesc {  margin:0 auto; font-size:19px; font-weight:300; line-height:1.6; letter-spacing:-.5px; color:var(--colorText); }
.subpage .ultheraInfoMedia { margin-top:60px; }
.subpage .ultheraInfoMedia img { display:block; width:100%; height:auto; }
.subpage .ultheraInfoMedia--wide { margin-top:80px; }

.subpage.ulthera .ultheraInfoTitle--accent { color:#ef7d00; }

/* ── 매트릭스 스마일 마취 ── */
.subpage .tpCompare { padding:110px 0 130px; background:#fefaf7; }
.subpage .tpCompareHead { margin-bottom:70px; text-align:center; }
.subpage .tpCompareHead .en { display:block; margin-bottom:14px; font-family:"Times New Roman", var(--tpSerif) !important; font-weight:700; font-size:30px; color:var(--tpHi); }
.subpage .tpCompareHead .sub { font-size:44px; font-weight:300; letter-spacing:-3px; color:var(--tpInk); }
.subpage .tpCompareHead h2 { margin-top:8px; font-size:52px; font-weight:700; letter-spacing:-2.6px; color:var(--tpInk); }
.subpage .tpCompareHead .desc { margin-top:36px; font-size:20px; font-weight:300; line-height:1.4; letter-spacing:-1px; color:var(--tpInk); }
.subpage .tpCompareHead .desc b { font-weight:500; }
.subpage .tpCompareHead .note { margin-top:22px; font-size:20px; font-weight:300; letter-spacing:-1.2px; color:var(--tpInk); }
.subpage .tpCompareCards { display:flex; justify-content:center; align-items:center; }
.subpage .tpCompareCards .card { width:313px; border:2px solid #999; background:#fff; }
.subpage .tpCompareCards .card .ttl { padding:20px 0; background:#999; font-size:25px; font-weight:400; letter-spacing:-1.25px; color:#fff; text-align:center; }
.subpage .tpCompareCards .card ul { margin:0; padding:14px 0 20px; list-style:none; }
.subpage .tpCompareCards .card li { position:relative; padding:19px 0; font-size:20px; font-weight:400; letter-spacing:-1px; color:var(--tpInk); text-align:center; }
.subpage .tpCompareCards .card li + li::before { content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:66%; height:2px; background:#dbdbdb; }
.subpage .tpCompareCards .card--on { position:relative; z-index:1; width:382px; border:4px solid var(--tpHi); margin-right:-2px; }
.subpage .tpCompareCards .card--on .ttl { background:var(--tpHi); font-weight:700; font-size:34px; letter-spacing:-1.7px; color:#fff; }
.subpage .tpCompareCards .card--on ul { padding:20px 0 26px; }
.subpage .tpCompareCards .card--on li { padding:23px 0; font-weight:700; font-size:27px; letter-spacing:-1.35px; }
.subpage .tpCompareCards .card--on li + li::before { width:60%; background:var(--tpHi); }

/* ── FAQ ── */
.subpage .tpFaq { padding:110px 0 130px; background:#fffbfd; }
.subpage .tpFaq .tpFaqInner { max-width:1020px; }
.subpage .tpFaqTitle { margin-bottom:54px; font-size:47px; font-weight:400; letter-spacing:-1.4px; color:var(--tpInk); text-align:center; }
.subpage .tpFaqTitle b { font-weight:600; }
.subpage .tpFaqList { margin:0; padding:0; list-style:none; border-top:1px solid #e6dfe3; }
.subpage .tpFaqList > li { border-bottom:1px solid #e6dfe3; }
.subpage .tpFaqList .q { display:flex; align-items:center; gap:33px; width:100%; padding:34px 6px; border:0; background:none; text-align:left; cursor:pointer; font-family:inherit; }
.subpage .tpFaqList .q .mark { flex:0 0 auto; font-size:20px; font-weight:500; letter-spacing:-2px; color:#f5819c; }
.subpage .tpFaqList .q .txt { flex:1; min-width:0; font-size:28px; font-weight:600; letter-spacing:-.69px; color:var(--tpInk); }
.subpage .tpFaqList .q .arw { flex:0 0 auto; position:relative; width:14px; height:10px; }
.subpage .tpFaqList .q .arw::before,
.subpage .tpFaqList .q .arw::after { content:""; position:absolute; top:4px; width:9px; height:1.5px; background:#8a8a8a; transition:transform .3s ease; }
.subpage .tpFaqList .q .arw::before { left:0; transform:rotate(35deg); }
.subpage .tpFaqList .q .arw::after { right:0; transform:rotate(-35deg); }
.subpage .tpFaqList > li.active .q .arw::before { transform:rotate(-35deg); }
.subpage .tpFaqList > li.active .q .arw::after { transform:rotate(35deg); }
.subpage .tpFaqList .a { height:0; overflow:hidden; transition:height .4s ease; }
.subpage .tpFaqList .a .inner { padding:2px 40px 34px 55px; font-size:16px; font-weight:400; line-height:1.6; letter-spacing:-.6px; color:#666; }

.subpage.venusNoseMaens .tpFaq { background:#F8FAFF; }
.subpage.onda_lifting .tpFaq { background:#F3FFFA; }
.subpage.onda_lifting .tpFaqList .q .mark { color: #62A489; }
.subpage.quantum_fit .tpFaq { background:#F3F9FF; }
.subpage.quantum_fit .tpFaqList .q .mark { color: #3A77BC; }
.subpage.recrowave .tpFaq { background:#FFF2EF; }
.subpage.recrowave .tpFaqList .q .mark { color: #F5819C; }
.subpage.man_waxing .tpFaq { background:#F8FBFE; }
.subpage.man_waxing .tpFaqList .q .mark { color: #91B3E1; }

/* ── 원리 & 기술 (슈링크 유니버스) ── */
.subpage .tpMechanism { padding:100px 0 110px; background:#fff; text-align:center; }
.subpage .tpMechanism .tpSectionTitle { margin-bottom:40px; font-size: 45px; font-family: 'Pretendard' !important; }
.subpage .tpMechanism .tpSectionTitle {  }
.subpage .tpMechanismDesc { font-size:19px; font-weight:300; line-height:30px; letter-spacing:-.95px; color:var(--tpInk); }
.subpage .tpMechanismSubTitle { margin:70px 0 30px; font-size:35px; font-weight:600; line-height:58px; letter-spacing:-1.05px; color:var(--tpInk); }
.subpage .tpMechanismMedia { display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap;  margin-top:70px; }
.subpage .tpMechanismCol { position:relative; flex:0 1 695px; max-width:100%; }
.subpage .tpMechanismCol img { display:block; width:100%; height:auto; }
.subpage .tpMechanismLabel { position:absolute; display:flex; flex-direction:column; text-align:left; }
.subpage .tpMechanismLabel b { font-size:19px; font-weight:400; letter-spacing:-.95px; color:var(--tpInk); }
.subpage .tpMechanismLabel em { display:block; margin-top:4px; font-style:normal; font-size:18px; font-weight:300; letter-spacing:-.9px; color:var(--tpInk); white-space:nowrap; }
.subpage .tpMechanismLabel--geometric { left:7%; top:52%; text-align:center; transform:translateX(-50%); }
.subpage .tpMechanismLabel--aperture { left:67.6%; top:13%; }
.subpage .tpMechanismLabel--intensity { left:67.6%; top:59%; }

/* ── 다양한 7개 카트리지 구성 (슈링크 유니버스) ── */
.subpage .tpCartridge { padding:100px 0 130px; background:#F1FBFF; text-align:center; }
.subpage .tpCartridge .tpSectionTitle { margin-bottom:80px; }
.subpage .tpCartridgePill { display:inline-flex; align-items:center; justify-content:center; height:55px; padding:0 32px; border-radius:27.5px; background:#6DAEF4; font-size:29px; font-weight:400; letter-spacing:-1.45px; color:#fff; white-space:nowrap; }
.subpage .tpCartridgeMedia { display:flex; flex-wrap:wrap; justify-content:space-between; max-width: 1110px; width: 100%;  margin:80px auto 0; padding:0; list-style:none; }
.subpage .tpCartridgeMedia li { display:flex; flex-direction:column; align-items:center; }
.subpage .tpCartridgeMedia img { display:block; margin-bottom:20px; }
.subpage .tpCartridgeMedia strong { font-size:25px; font-weight:500; letter-spacing:-1.25px; }
.subpage .tpCartridgeMedia span { margin-top:8px; font-size:20px; font-weight:300; letter-spacing:-1px; color:var(--tpInk); }
.subpage .tpCartridgeMedia .ultraf01 { color:#02B7AB; }
.subpage .tpCartridgeMedia .ultraf02 { color:#FF4A96; }
.subpage .tpCartridgeMedia .ultraf03 { color:#FF8B00; }
.subpage .tpCartridgeMedia .ultraf04 { color:#0365D2; }
.subpage .tpCartridgeSet { margin-top:90px; }
.subpage .tpCartridgeSet .tpCartridgePill--booster { margin-bottom:80px; }
.subpage .tpCartridgeList { display:flex; justify-content:space-between; max-width: 630px; width: 100%; margin:0 auto; padding:0; list-style:none; }
.subpage .tpCartridgeList li { display:flex; flex-direction:column; align-items:center; }
.subpage .tpCartridgeList img { display:block;  margin-bottom:20px; }
.subpage .tpCartridgeList strong { font-size:25px; font-weight:500; letter-spacing:-1.25px; }
.subpage .tpCartridgeList span { margin-top:8px; font-size:20px; font-weight:300; letter-spacing:-1px; color:var(--tpInk); }
.subpage .tpCartridgeList .derma { color:#33B59D; }
.subpage .tpCartridgeList .cellup { color:#EB8649; }
.subpage .tpCartridgeList .lineup { color:#3FB3DB; }

/* ── 슈링크 유니버스 오로라 앰플 ── */
.subpage .tpAmpoule { padding:110px 0 130px; background:#fff; text-align:center; }
.subpage .tpAmpoule .tpSectionTitle { margin-bottom:10px; font-size:45px; font-family: 'Pretendard' !important; }
.subpage .tpAmpouleSubTitle { margin:0 0 70px; font-size:45px; font-weight:600; letter-spacing:-1.35px; color:#6DAEF4; }
.subpage .tpAmpouleContent { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:90px; text-align:left; }
.subpage .tpAmpouleMedia { flex:0 1 511px; max-width:100%; }
.subpage .tpAmpouleMedia img { display:block; width:100%; height:auto; }
.subpage .tpAmpouleList { flex:0 1 616px; max-width:100%; margin:0; padding:0; list-style:none; }
.subpage .tpAmpouleList li { display:flex; align-items:center; gap:20px; min-height:106px; padding:20px 24px; border:1px solid #E0E0E0; border-radius:20px; background:#fff; box-sizing:border-box; }
.subpage .tpAmpouleList li + li { margin-top:14px; }
.subpage .tpAmpouleList .num { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:37px; height:37px; border-radius:50%; background:#6DAEF4; font-family:"Noto Serif KR", serif !important; font-size:20px; font-weight:500; color:#fff; }
.subpage .tpAmpouleList p { margin:0; font-size:20px; font-weight:400; line-height:1.4; letter-spacing:.02px; color:var(--tpInk); }
.subpage .tpAmpouleList strong { font-weight:600; }

/* ── 볼뉴머 특징 ── */
.subpage .tpFeature { padding:100px 0; background:#fff; }
.subpage .tpFeature .tpSectionTitle { margin-bottom:56px; text-align:center; }
.subpage .tpFeatureRow { display:flex; align-items:stretch; max-width: 1400px; margin: 0 auto; }
.subpage .tpFeatureRow:first-of-type { margin-top:0; }
.subpage .tpFeatureRow--reverse { flex-direction:row-reverse; }
.subpage .tpFeatureMedia { flex:0 0 50%; max-width:50%; overflow:hidden; }
.subpage .tpFeatureMedia img { display:block; width:100%; height:100%; object-fit:cover; }
.subpage .tpFeatureText { flex:0 0 50%; max-width:50%; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; padding:40px 60px; background:#F5EADE; }
.subpage .tpFeatureText > div { display: flex; align-items: center;  gap: 10px; }
.subpage .tpFeatureText > div:first-child { margin-bottom: 7px; }
.subpage .tpFeatureText h3 { line-height: 45.273px; font-size:28px; font-weight:600; letter-spacing:-1.4px; color:var(--tpInk); }
.subpage .tpFeatureText p { margin:16px 0 0; font-size:18px; font-weight:300; line-height:1.6; letter-spacing:-.9px; color:var(--tpInk); }
.subpage .tpFeatureText p:first-child { margin-top:0; }
.subpage .tpFeatureText .tag { display:block; font-size:17px; font-weight:500; letter-spacing:-.8px; color:#CB585A; }
.subpage .tpFeatureText .tag.tag2 { color:#0E3871; }

.subpage.recrowave .tpFeatureText { background: #F8E1DC; }

/* ── 노티드리프팅이란 ── */
.subpage .tpAbout { padding:100px 0 130px; background:#fff; text-align:center; }
.subpage .tpAbout .tpSectionTitle { margin-bottom:40px; }
.subpage .tpAboutDesc { font-size:19px; font-weight:300; line-height:30px; letter-spacing:-.95px; color:var(--tpInk); }
.subpage .tpAboutList { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin:70px 0 0; padding:0; list-style:none; }
.subpage .tpAboutList li { width:294px; max-width:100%; text-align:left; filter:drop-shadow(6px 10px 20px rgba(0,0,0,.1)); }
.subpage .tpAboutMedia { height:252px; overflow:hidden; border-radius:10px 10px 0 0; background:#d9d9d9; }
.subpage .tpAboutMedia img { display:block; width:100%; height:100%; object-fit:cover; }
.subpage .tpAboutText { padding:24px 15px 30px; border-radius:0 0 10px 10px; background:#fff; text-align:center; max-height: 230px; height: 100%; }
.subpage .tpAboutText strong { display:block; margin-bottom:16px; font-size:24px; font-weight:600; letter-spacing:-1.2px; color:var(--tpInk); }
.subpage .tpAboutText p { margin:0; font-size:18px; font-weight:400; line-height:26px; letter-spacing:-.9px; color:var(--tpInk); }

/* ── 노티드실의구조 ── */
.subpage .tpThread { padding:100px 0 130px; background:#FEF0FA; overflow:hidden; }
.subpage .tpThread .tpThreadInner { text-align:center; }
.subpage .tpThreadEyebrow { margin:0 0 8px; font-size:20px; font-weight:400; letter-spacing:-.6px; color:var(--tpInk); }
.subpage .tpThread .tpSectionTitle { margin-bottom:56px; }
.subpage .tpThreadRows { position:relative; }
.subpage .tpThreadRow { display:flex; align-items:stretch; }
.subpage .tpThreadRow--reverse { flex-direction:row-reverse; }
.subpage .tpThreadMedia { flex:0 0 50%; max-width:50%; overflow:hidden; background:#fff; }
.subpage .tpThreadMedia img { display:block; width:100%; height:100%; object-fit:cover; }
.subpage .tpThreadText { flex:0 0 50%; max-width:50%; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; padding:40px 60px; text-align:left; }
.subpage .tpThreadText--pcl { background:#FFD7F2; }
.subpage .tpThreadText--pdo { background:#EDE4FF; }
.subpage .tpThreadText h3 { margin:0 0 16px; font-size:29px; font-weight:500; letter-spacing:-1.45px; color:var(--tpInk); }
.subpage .tpThreadText p { margin:0; font-size:19px; font-weight:300; line-height:1.5; letter-spacing:-.95px; color:var(--tpInk); }
.subpage .tpThreadPlus { position:absolute; top:50%; left:50%; z-index:2; box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:82px; height:82px; border:4px solid #FEE1F5; border-radius:50%; background:#fff; transform:translate(-50%,-50%); font-family:'Pretendard'; font-size:40px; font-weight:100; line-height:1; color:#838383; }
.subpage .tpThreadPlus::before { content:""; position:absolute; top:50%; left:50%; z-index:-1; width:118px; height:118px; border-radius:50%; background:#FEE1F5; opacity:.5; transform:translate(-50%,-50%); }
.subpage .tpFeatureText .num { font-size: 28px; color: #791648; font-weight: 500; }
.subpage.thread_lifting .tpFeatureText { background: #FFF6FD; }

/* ── 볼뉴머 팁 구성 ── */
.subpage .tpTip { padding:100px 0 130px; background:#FCF8F4; text-align:center; }
.subpage .tpTip .tpSectionTitle { margin-bottom:60px; font-family: 'Pretendard' !important; }
.subpage .tpTipDesc { font-size:19px; font-weight:300; line-height:30px; letter-spacing:-.95px; color:var(--tpInk); }
.subpage .tpTipList { display:flex; flex-wrap:wrap; justify-content:center; gap:60px 40px; margin:70px 0 0; padding:0; list-style:none; }
.subpage .tpTipList li { display:flex; flex-direction:column; align-items:center; width:260px; max-width:100%; }
.subpage .tpTipList img { display:block; width:100%; height:auto; margin-bottom:30px; }
.subpage .tpTipList strong { font-size:25px; font-weight:600; letter-spacing:-1.25px; }
.subpage .tpTipList span { margin-top:15px; font-size:18px; font-weight:300; line-height:1.5; letter-spacing:-.9px; color:var(--tpInk); }
.subpage .tpTipList .tipE { color:#8BCA5C; }
.subpage .tpTipList .tipF { color:#9DADE6; }
.subpage .tpTipList .tipV { color:#FA8DAB; }
.subpage .tpTipList .tipS { color:#DABC5F; }




.subVisual { position:relative; overflow:hidden; background: #EED9C6; background-size: cover; margin-top: 100px; display: flex; gap: 70px; }
.subVisual .imgBox img { display:block;  }
.subVisual .textBox { max-width: 651px; width: 100%; padding: 120px 20px 0 0px; color:#55401E; }
.subVisual .textBox h2 { margin-bottom:10px; font-size:90px; font-weight:500; letter-spacing: -4.5px; text-align:center; }
.subVisual .textBox .subTitle { margin-bottom:50px; font-size:46px; font-weight:400; letter-spacing: -0.46px; text-align:center; }
.subVisual .reasonList { display: flex; flex-direction: column; gap: 10px; width: 100%;  margin: 0; padding: 0; list-style: none; }
.subVisual .reasonList li { display: flex; align-items: flex-start; gap: 19px; width: 100%; min-height: 72px; padding: 14px 14px; border-radius: 20px; background: #FFF; box-sizing: border-box; }
.subVisual .reasonList li .reasonNumber { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: #DA9986; color: #FFF; font-family: "Noto Serif KR", serif !important; font-size: 22px; font-weight: 500; line-height: 1; }
.subVisual .reasonList li .reasonContent { flex: 1; min-width: 0; }
.subVisual .reasonList li p { color:#55401E; font-size:27px; letter-spacing: -1.4px; font-weight:400; line-height:1.35; word-break:keep-all; }
.subVisual .reasonList li p span { display:block; font-size:20px; line-height:1.2; text-align:right; margin-top: 3px; }
.subVisual .reasonList li .reasonContent .reasonTitle { display: block; margin-bottom: 4px;  color: #C85B83;  font-size: 28px;  font-weight: 600;  line-height: normal;  letter-spacing: -1.4px; word-break: keep-all; }
.subVisual .reasonList li .reasonContent .reasonDescription { margin: 0; color: #383838; font-size: 24px; font-weight: 400; line-height: normal; letter-spacing: -1.2px;  word-break: keep-all; }
.thermage_flx .subVisual { background: #F2E5FA; }
.thermage_flx .subVisual .textBox { color: #8842B0; }
.thermage_flx .subVisual .reasonList li .reasonNumber { background: #CE98F0; }
.onda_lifting .subVisual { background: #EEF5F2; }
.onda_lifting .subVisual .textBox { color: #0B2A1D; }
.onda_lifting .subVisual .reasonList li .reasonNumber { background: #5CC397; }
.shurink_universe .subVisual { background: #A5C6EC; }
.shurink_universe .subVisual .textBox h2 { color: #FFFFFF; }
.shurink_universe .subVisual .textBox .subTitle  { color: #FFFFFF; }
.shurink_universe .subVisual .reasonList li p { color: #252525; }
.shurink_universe .subVisual .reasonList li .reasonNumber { background: #A5C6EC; }
.volnewmer .subVisual { background: #EED9C6; }
.volnewmer .subVisual .textBox h2 { color: #55401E; }
.volnewmer .subVisual .textBox .subTitle  { color: #55401E; }
.volnewmer .subVisual .reasonList li p { color: #55401E; }
.volnewmer .subVisual .reasonList li .reasonNumber { background: #DA9986; }
.quantum_fit .subVisual { background: #DFE4E9; }
.quantum_fit .subVisual .textBox h2 { color: #263342; }
.quantum_fit .subVisual .textBox .subTitle  { color: #263342; }
.quantum_fit .subVisual .reasonList li p { color: #263342; }
.quantum_fit .subVisual .reasonList li .reasonNumber { background: #263342; }
.recrowave .subVisual { background: #F5D4CD; }
.recrowave .subVisual .textBox h2 { color: #55401E; }
.recrowave .subVisual .textBox .subTitle  { color: #55401E; }
.recrowave .subVisual .reasonList li p { color: #55401E; }
.recrowave .subVisual .reasonList li .reasonNumber { background: #DA9986; }
.waxing .subVisual { background: url(/roa/img/main/bg_sub_visual_008.png) no-repeat center center; background-size: cover; }
.waxing .subVisual .imgBox img { padding-top: 160px; }
.waxing .subVisual .textBox h2 { color: #383838; }
.waxing .subVisual .textBox .subTitle  { color: #383838; }
.waxing .subVisual .reasonList li p { color: #383838; }
.waxing .subVisual .reasonList li .reasonNumber { background: #C85B83; }
.man_waxing .subVisual { background: url(/roa/img/main/bg_sub_visual_009.png) no-repeat center center; background-size: cover; }
.man_waxing .subVisual .imgBox img { padding-top: 160px; }
.man_waxing .subVisual .textBox h2 { color: #383838; }
.man_waxing .subVisual .textBox .subTitle  { color: #383838; }
.man_waxing .subVisual .reasonList li p { color: #383838; }
.man_waxing .subVisual .reasonList li .reasonNumber { background: #2F65B2; }
.man_waxing .subVisual .reasonList li .reasonContent .reasonTitle { color: #2F65B2; }


/* ── 시술과정&시술효과 ── */
.subpage .tpProcess { padding:110px 0 95px; background:var(--colorWhite); }
.subpage .tpProcess .tpProcessInner { max-width:1300px; margin:0 auto; text-align:center; }
.subpage .tpProcess .tpSectionTitle { margin-bottom:60px; font-size: 45px; }
.subpage .tpProcessList { display: flex; justify-content: center; align-items: stretch; gap: 30px; margin: 0; padding: 0; list-style: none; }
.subpage .tpProcessList li { display: flex; flex-direction: column; width: 100%; max-width: 295px; filter: drop-shadow(6px 10px 20px rgba(0, 0, 0, 0.10)); }
.subpage .tpProcessList .thumb { height: 220px; border-radius: 10px 10px 0 0; overflow: hidden; background: #d9d9d9; }
.subpage .tpProcessList .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.subpage .tpProcessList .txt { flex: 1; padding: 26px 7px 32px; border-radius: 0 0 10px 10px; background:var(--colorWhite); }
.subpage .tpProcessList .step { display:block; margin-bottom:14px; font-size:24px; font-weight:600; letter-spacing:-1.2px; color:#bd65cb; }
.subpage .tpProcessList .txt p { margin:0; font-size:17px; font-weight:400; line-height:1.45; letter-spacing:-.9px; color:#252525; }

.subpage .tpEffect { padding:0 0 130px; background:var(--colorWhite); }
.subpage .tpEffect .tpEffectInner { max-width:1300px; margin:0 auto; text-align:center; }
.subpage .tpEffect .tpSectionTitle { margin-bottom:64px; font-size: 45px; }
.subpage .tpEffectList { display:flex; justify-content:center; gap:30px; margin:0; padding:0; list-style:none; }
.subpage .tpEffectList li { flex:1 1 0; max-width:420px; }
.subpage .tpEffectList .thumb { overflow:hidden; background:#d9d9d9; }
.subpage .tpEffectList .thumb img { display:block; width:100%; height:auto; aspect-ratio:420/384; object-fit:cover; }
.subpage .tpEffectList .txt { position:relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding:13px 24px 32px; background:#fae0fd; }
.subpage .tpEffectList .icon { display: flex; justify-content: center; width:56px; height:56px; }
.subpage .tpEffectList .icon img { display:block; width:100%; height:100%; }
.subpage .tpEffectList strong { display:block; font-size:24px; font-weight:500; letter-spacing:-1.2px; color:#252525; }
.subpage .tpEffectList .txt p { margin:0; font-size:18px; font-weight:400; line-height:1.45; letter-spacing:-.9px; color:#252525; }


/* ── 온다리프팅이 필요한 이유 ── */
.ondaSection { position:relative; width:100%; padding:200px 0 90px; overflow:hidden; }
.ondaSection .ondaBg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
.ondaSection .ondaBg img { display:block; width:100%; height:100%; object-fit:cover; }
.ondaSection .ondaInner { position:relative; z-index:2; max-width:1320px; margin:0 auto; }
.ondaSection .ondaTextBox { text-align:center; }
.ondaSection .ondaTextBox h2 { margin-bottom:37px; color:#252525; font-size:51px; font-weight:600; line-height:43px; }
.ondaSection .ondaTextBox strong { display:block; margin-bottom:8px; color:#099785; font-size:45px; font-weight:600; line-height:48px; }
.ondaSection .ondaSubTitle { margin-bottom:16px; color:#099785; font-size:33px; font-weight:400; line-height:48px; }
.ondaSection .ondaDesc { color:#252525; font-size:18px; font-weight:350; line-height:30px; letter-spacing:.18px; }
.ondaSection .ondaContent { display:flex; align-items:flex-start; justify-content:center; gap:90px; margin-top:80px; }
.ondaSection .ondaImgBox { flex-shrink:0; width:320px; margin-top:-20px; }
.ondaSection .ondaImgBox img { display:block; width:100%; }
.ondaSection .ondaRightBox { width:650px; text-align:center; }
.ondaSection .ondaLogoBox { width:310px; margin:0 auto 45px; }
.ondaSection .ondaLogoBox img { display:block; width:100%; }
.ondaSection .ondaList { display:grid; grid-template-columns:repeat(3, 216px); gap:30px; justify-content:center; }
.ondaSection .ondaList li { display:flex; align-items:center; justify-content:center; width:216px; height:216px; background-color: #fff; border:2px solid #108C73; border-radius:50%; color:#108C73; font-size:24px; font-weight:600; line-height:32px; text-align:center; }
        
.ondaHandpieceSection { width:100%; padding:150px 0 200px; background:#F6F9F8; }
.ondaHandpieceSection .ondaHandpieceInner { max-width:1100px; margin:0 auto; text-align:center; }
.ondaHandpieceSection .ondaHandpieceText { margin-bottom:100px; }
.ondaHandpieceSection .ondaHandpieceSubTitle { margin-bottom:6px; color:#252525; font-size:33px; font-weight:400; line-height:48px; }
.ondaHandpieceSection .ondaHandpieceText h2 { margin-bottom:45px; color:#252525; font-size:45px; font-weight:600; line-height:48px; }
.ondaHandpieceSection .ondaHandpieceDesc { color:#252525; font-size:18px; font-weight:350; line-height:30px; letter-spacing:.16px; }
.ondaHandpieceSection .ondaHandpieceList { display:flex; justify-content:center; gap:33px; }
.ondaHandpieceSection .ondaHandpieceList li { max-width:400px; width: 100%; }
.ondaHandpieceSection .ondaHandpieceList li img { display:block; width:100%; }
.ondaHandpieceSection .bottomBox { padding-top: 155px }
.ondaHandpieceSection .bottomBox h3 { display: flex; flex-direction: column; font-size: 45px; font-weight: 600; line-height: 48px; margin-bottom: 68px; }
.ondaHandpieceSection .bottomBox h3 span { font-weight: 500; }
.ondaHandpieceSection .bottomBox .imgBox { margin-bottom: 60px; }
.ondaHandpieceSection .bottomBox p { font-size: 22px; line-height: 35px; font-weight: 500; }
.ondaHandpieceSection .bottomBox p strong { margin-bottom: 60px; font-weight: 400px; }


/* ── 퀸텀핏 ── */
.quantum_fit_section { position:relative; width:100%; padding:200px 0 0; overflow:hidden; }
.quantum_fit_section .quantum_fit_Bg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
.quantum_fit_section .quantum_fit_Bg img { display:block; width:100%; height:100%; object-fit:cover; }
.quantum_fit_section .quantum_fit_Bg img.forMob { display:none; }
.quantum_fit_section .quantum_fit_Inner { position:relative; z-index:2; max-width:1320px; margin:0 auto; }
.quantum_fit_section .quantum_fit_TextBox { text-align:center; }
.quantum_fit_section .quantum_fit_TextBox h2 { margin-bottom:37px; color:#FFFFFF; font-size:51px; font-weight:600; line-height:43px; }
.quantum_fit_section .quantum_fit_TextBox strong { display:block; margin-bottom:8px; color:#72ABD3; font-size:45px; font-weight:600; line-height:48px; }
.quantum_fit_section .quantum_fit_SubTitle { margin-bottom:16px; color:#72ABD3; font-size:33px; font-weight:400; line-height:48px; }
.quantum_fit_section .quantum_fit_Desc { color:#FFFFFF; font-size:18px; font-weight:350; line-height:30px; letter-spacing:.18px; }
.quantum_fit_section .quantum_fit_Content { display:flex; align-items:flex-end; justify-content:center; gap:90px; margin-top:80px; }
.quantum_fit_section .quantum_fit_ImgBox { flex-shrink:0; margin-top:0; }
.quantum_fit_section .quantum_fit_ImgBox img { display:block; width:100%; }
.quantum_fit_section .quantum_fit_RightBox { width:650px; padding-bottom:90px; text-align:center; box-sizing:border-box; }
.quantum_fit_section .quantum_fit_LogoBox { margin:0 auto 45px;     width: fit-content; }
.quantum_fit_section .quantum_fit_LogoBox img { display:block; }
.quantum_fit_section .quantum_fit_List { display:grid; grid-template-columns:repeat(6, 113px); gap:30px 15px; justify-content:center; }
.quantum_fit_section .quantum_fit_List li { grid-column:span 2; display:flex; align-items:center; justify-content:center; width:216px; height:216px; border:2px solid #263342; border-radius:50%; background-color:#FFF; color:#263342; font-size:24px; font-weight:600; line-height:32px; text-align:center; box-sizing:border-box; }
.quantum_fit_section .quantum_fit_List li:nth-last-child(2) { grid-column:2 / span 2; }
.quantum_fit_section .info_note { position: absolute; right: 27px;  bottom: 20px; color: var(--colorWhite); font-size: 15px; font-weight: 400; z-index: 9; }

.quantum_fit_info_section { width:100%; padding:150px 0 200px; background:#F3F9FF; }
.quantum_fit_info_section .quantum_fit_info_section_Inner { max-width:1100px; margin:0 auto; text-align:center; }
.quantum_fit_info_section .quantum_fit_info_section_Text { margin-bottom:100px; }
.quantum_fit_info_section .quantum_fit_info_section_SubTitle { margin-bottom:6px; color:#252525; font-size:33px; font-weight:400; line-height:48px; }
.quantum_fit_info_section .quantum_fit_info_section_Text h2 { margin-bottom:45px; color:#252525; font-size:45px; font-weight:600; line-height:48px; }
.quantum_fit_info_section .quantum_fit_info_section_Desc { color:#252525; font-size:18px; font-weight:350; line-height:30px; letter-spacing:.16px; }
.quantum_fit_info_section .quantum_fit_info_section_List { display:flex; justify-content:center; gap:33px; }
.quantum_fit_info_section .quantum_fit_info_section_List li { max-width:400px; width: 100%; }
.quantum_fit_info_section .quantum_fit_info_section_List li img { display:block; width:100%; }
.quantum_fit_info_section .bottomBox { padding-top: 155px }
.quantum_fit_info_section .bottomBox h3 { display: flex; flex-direction: column; font-size: 45px; font-weight: 600; line-height: 48px; margin-bottom: 68px; }
.quantum_fit_info_section .bottomBox h3 span { font-weight: 500; }
.quantum_fit_info_section .bottomBox .imgBox { margin-bottom: 60px; }
.quantum_fit_info_section .bottomBox .imgBox img { width: 100%; }
.quantum_fit_info_section .bottomBox .imgBox img.forMob { display: none; }
.quantum_fit_info_section .bottomBox p { font-size: 22px; line-height: 35px; font-weight: 500; }
.quantum_fit_info_section .bottomBox p strong { margin-bottom: 60px; font-weight: 400px; }


.laserSystemSection { width: 100%; padding: 100px 0; background: #FFF; }
.laserSystemSection .laserSystemInner { width: 100%; max-width: 960px; margin: 0 auto; text-align: center; }
.laserSystemSection .laserSystemInner .laserSystemHeading .laserSystemTitle { color: #252525; font-size: 45px; font-weight: 600; line-height: normal; letter-spacing: -1.35px; margin-bottom: 60px; }
.laserSystemSection .laserSystemInner .laserSystemHeading .laserSystemDescription { color: #252525; font-size: 19px; font-weight: 300; line-height: 30px; letter-spacing: -0.95px; }
.laserSystemSection .laserSystemInner .laserSystemContent { margin-top: 85px; }
.laserSystemSection .laserSystemInner .laserSystemContent .laserSystemSubTitle { color: #252525; font-size: 35px; font-weight: 600; line-height: normal; letter-spacing: -1.35px; margin-bottom: 60px; }
.laserSystemSection .laserSystemInner .laserSystemContent .laserSystemSubDescription { color: #252525; font-size: 19px; font-weight: 300; line-height: 30px; letter-spacing: -0.95px;  }
.laserSystemSection .laserSystemInner .laserSystemContent .laserSystemImage { overflow: hidden; width: 100%; margin-top: 40px; }
.laserSystemSection .laserSystemInner .laserSystemContent .laserSystemImage img { display: block; width: 100%; height: auto; }





.laserAreaSection { width: 100%; padding: 100px 20px; background: #fff; color: #252525; box-sizing: border-box; }
.laserAreaSection .laserAreaInner { width: 100%; max-width: 1200px; margin: 0 auto; }
.laserAreaSection .laserAreaInner .laserAreaHeading { margin-bottom: 52px; text-align: center; }
.laserAreaSection .laserAreaInner .laserAreaHeading .laserAreaTitle { margin: 0 0 40px; font-size: 45px; font-weight: 600; line-height: normal; letter-spacing: -1.35px; }
.laserAreaSection .laserAreaInner .laserAreaHeading .laserAreaDescription { margin: 0; color: #252525; font-size: 19px; font-weight: 300; line-height: 30px; letter-spacing: -0.95px; }
.laserAreaSection .laserAreaInner .laserAreaCategory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: 680px; margin: 0 auto 45px; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton { display: flex; align-items: center; justify-content: center; gap: 13px; height: 72px; margin: 0; padding: 9px 20px; border: 1px solid #B8B7B8; border-radius: 20px; background: #FFF; color: #B8B7B8; font-family: var(--fontFreesentation); font-size: 25px; font-weight: 400; cursor: pointer; transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton .laserAreaCategoryIcon { display: flex; align-items: center; justify-content: center; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton .laserAreaCategoryIcon img { object-fit: contain; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton .laserAreaCategoryIcon .laserAreaCategoryIconOff { display: block; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton .laserAreaCategoryIcon .laserAreaCategoryIconOn { display: none; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton:hover,
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton.active { border-color: #C85B83; background: #FFF9FA; color: #C85B83; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton:hover .laserAreaCategoryIcon .laserAreaCategoryIconOff,
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton.active .laserAreaCategoryIcon .laserAreaCategoryIconOff { display: none; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton:hover .laserAreaCategoryIcon .laserAreaCategoryIconOn,
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton.active .laserAreaCategoryIcon .laserAreaCategoryIconOn { display: block; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton.active .laserAreaCategoryIcon .laserAreaCategoryIconOn { opacity: 1; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton:hover,
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton.active { border-color: #e65d8f; background: #fff8fa; color: #df4f84; }
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton:hover .laserAreaCategoryIcon img,
.laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton.active .laserAreaCategoryIcon img { opacity: 1; }
.laserAreaSection .laserAreaInner .laserAreaContent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); gap: 22px; width: 100%; margin: 0 auto; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaVisual { overflow: hidden; display: flex; flex-direction: column; width: 500px; min-height: 660px; border-radius: 15px; background: #fff8fa; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaVisual .laserAreaImageWrap { display: flex; align-items: center; justify-content: center;  overflow: hidden; flex: 1; min-height: 0; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaVisual .laserAreaImageWrap .laserAreaImage { display: flex; align-items: center; justify-content: center; height: 100%; object-fit: cover; object-position: center; transition: opacity 0.2s ease, transform 0.35s ease; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaVisual .laserAreaImageWrap .laserAreaImage.changing { opacity: 0; transform: scale(0.98); }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaVisual .laserAreaVisualNotice { font-family: var(--fontFreesentation); display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 15px; color: #252525; font-size: 20px; line-height: 20px; text-align: center; box-sizing: border-box; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaVisual .laserAreaVisualNotice span { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #C85B83; color: #fff; font-size: 11px; font-weight: 500; letter-spacing: -0.557px; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation { display: flex; flex-direction: column; min-height: 660px; padding: 32px; border: 1px solid #d7d7d7; border-radius: 15px; background: #fff; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.06); box-sizing: border-box; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartTitle { margin: 0 0 16px; font-size: 25px; font-weight: 600; line-height: 33px; letter-spacing: -1.25px; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartList .laserAreaPartButton { display: flex; align-items: center; min-height: 77px; margin: 0; padding: 9px 10px; border: 1px solid #B8B7B8; border-radius: 13px; background: #fff; color: #252525; font-family: var(--fontFreesentation); cursor: pointer; box-sizing: border-box; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartList .laserAreaPartButton .laserAreaPartThumbnail { overflow: hidden; flex-shrink: 0; display: block;margin-right: 6px; border-radius: 8px; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartList .laserAreaPartButton .laserAreaPartThumbnail img { display: block; object-fit: contain; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartList .laserAreaPartButton .laserAreaPartName { font-family: var(--fontFreesentation); flex: 1; display: block; font-size: 21px; font-weight: 400; line-height: 1.35; word-break: keep-all; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartList .laserAreaPartButton:hover,
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartList .laserAreaPartButton.active { border-color: #C85B83; background: #FFF9FA; color: #C85B83; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartList .laserAreaPartButton.active .laserAreaPartName { font-weight: 700; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaDetail { margin-top: auto; padding: 22px; border-radius: 12px; background: #FFF9FA; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaDetail .laserAreaDetailTitle { display: block; margin-bottom: 10px; color: #C85B83; font-size: 22px; font-weight: 600; }
.laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaDetail .laserAreaDetailDescription { margin: 0; color: #252525; font-family: var(--fontFreesentation); font-size: 17px; font-weight: 400; line-height: 25px; letter-spacing: -0.85px; word-break: keep-all; }


.man_waxing .laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton:hover,
.man_waxing .laserAreaSection .laserAreaInner .laserAreaCategory .laserAreaCategoryButton.active { border-color: #2F65B2; background: #F8FBFE; color: #2F65B2; }
.man_waxing .laserAreaSection .laserAreaInner .laserAreaContent .laserAreaVisual { background: #F8FBFE; }
.man_waxing .laserAreaSection .laserAreaInner .laserAreaContent .laserAreaVisual .laserAreaVisualNotice { background: #E3EEFF; }
.man_waxing .laserAreaSection .laserAreaInner .laserAreaContent .laserAreaVisual .laserAreaVisualNotice span { background: #2F65B2; }
.man_waxing .laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartList .laserAreaPartButton:hover,
.man_waxing .laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaPartList .laserAreaPartButton.active { border-color: #2F65B2; background: #F8FBFE; color: #2F65B2; }
.man_waxing .laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaDetail { background: #F8FBFE; }
.man_waxing .laserAreaSection .laserAreaInner .laserAreaContent .laserAreaInformation .laserAreaDetail .laserAreaDetailTitle { color: #2F65B2; }


/* =============================================================
   지점상세페이지_상세페이지 (3-1) - 시술 상세 + 시술 선택
   ============================================================= */
.branchDetailWrap { display: flex; align-items: flex-start; gap: 20px; width: calc(100% - 80px); max-width: 1250px; margin: 220px auto 120px; }

.branchDetailContent { flex: 1; min-width: 0; }
.branchDetailContent .branchDetailImage { width: 100%; aspect-ratio: 2 / 1.2; overflow: hidden;  background: linear-gradient(180deg, rgba(255, 159, 159, 0.2) 0%, rgba(255, 255, 255, 0.2) 71.195%); }
.branchDetailContent .branchDetailImage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.branchDetailContent .branchDetailHead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-top: 32px; }
.branchDetailContent .branchDetailHead h2 { color: #252525; font-size: 45px; font-weight: 600; letter-spacing: -2.7px; }
.branchDetailContent .branchDetailPrice { color: #ff61a0; font-size: 45px; font-weight: 600; letter-spacing: -1.35px; white-space: nowrap; }
.branchDetailContent .branchDetailPrice .branchDetailPriceUnit { margin-left: 2px; font-size: 20px; letter-spacing: -0.9px; }
.branchDetailContent .branchDetailSummary { margin-top: 15px; color: #252525; font-size: 19px; letter-spacing: -1.14px; }
.branchDetailContent .branchDetailTitle { margin-top: 70px; color: #252525; font-size: 62px; font-weight: 500; letter-spacing: -3.72px; }
.branchDetailContent .branchDetailTags { margin-top: 25px; color: #252525; font-size: 15px; font-weight: 500; line-height: 25px; letter-spacing: -0.75px; word-break: keep-all; }

.treatmentSelectCard { position: sticky; top: 220px; align-self: flex-start; flex-shrink: 0; display: flex; flex-direction: column; width: 500px; max-height: calc(100vh - 260px);  background: #fff; overflow: hidden; }
.treatmentSelectCard .treatmentSelectCardBox { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid #d4d4d8; overflow: hidden; }
.treatmentSelectCard .treatmentSelectHead { flex-shrink: 0; padding: 22px 24px 18px; border-bottom: 1px solid #d4d4d8; }
.treatmentSelectCard .treatmentSelectHead h3 { color: #333; font-size: 22px; font-weight: 700; letter-spacing: -1.1px; }
.treatmentSelectCard .treatmentSelectList { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; }
.treatmentSelectCard .treatmentSelectItem,
.treatmentSheet .treatmentSelectItem { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid #ddd; border-radius: 5px; background: #fffbfd; cursor: pointer; transition: border-color .2s ease; }
.treatmentSelectCard .treatmentSelectItem:has(input:checked),
.treatmentSheet .treatmentSelectItem:has(input:checked) { border-color: #787878; }
.treatmentSelectCard .treatmentSelectItem input[type="checkbox"],
.treatmentSheet .treatmentSelectItem input[type="checkbox"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.treatmentSelectCard .treatmentSelectCheck,
.treatmentSheet .treatmentSelectCheck { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid #d4d4d4;  background: #fff; }
.treatmentSelectCard .treatmentSelectItem input:checked ~ .treatmentSelectCheck,
.treatmentSheet .treatmentSelectItem input:checked ~ .treatmentSelectCheck { border-color: #ff61a0; background: #ff61a0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.2 11.5L13 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px; }
.treatmentSelectCard .treatmentSelectName,
.treatmentSheet .treatmentSelectName { flex: 1; min-width: 0; color: #333; font-size: 16px; font-weight: 600; letter-spacing: -0.9px; word-wrap: anywhere; }
.treatmentSelectCard .treatmentSelectPrice,
.treatmentSheet .treatmentSelectPrice { display: flex; flex-direction: column; align-items: end; justify-content: end; gap: 4px; }
.treatmentSelectCard .treatmentSelectPrice em,
.treatmentSheet .treatmentSelectPrice em { color: #b8b8b8; font-size: 14px; font-style: normal; text-decoration: line-through; }
.treatmentSelectCard .treatmentSelectPrice strong,
.treatmentSheet .treatmentSelectPrice strong { color: #f60000; font-size: 20px; font-weight: 600; }
.treatmentSelectCard .treatmentSelectPrice strong small,
.treatmentSheet .treatmentSelectPrice strong small { margin-left: 2px; color: #333; font-size: 16px; font-weight: 400; }
.treatmentSelectCard .treatmentSelectTotal { flex-shrink: 0; display: flex; align-items: baseline; justify-content: space-between; padding: 20px 24px; border-top: 1px solid #d4d4d8; background: #fffbfd; }
.treatmentSelectCard .treatmentSelectTotalLabel { color: #333; font-size: 20px; font-weight: 600; letter-spacing: -1px; }
.treatmentSelectCard .treatmentSelectTotalPrice { font-size: 19px; font-weight: 600; }
.treatmentSelectCard .treatmentSelectTotalPrice span { color: #f60000; font-size: 25px; font-weight: 600; }
.treatmentSelectCard .price { display: flex; flex-direction: column; align-items: end; gap: 8px; }
.treatmentSelectCard .treatmentSelectVat { margin-left: 8px; color: #f60000; font-size: 13px; letter-spacing: -0.65px; }
.treatmentSelectCard .treatmentSelectSubmit { margin-top: 15px; flex-shrink: 0; display: block; width: 100%; padding: 18px; border: 0; background: #ff61a0; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -1px; cursor: pointer; transition: background .2s ease; }
.treatmentSelectCard .treatmentSelectSubmit:hover { background: #f0629e; }

/* 시술 상세 하단 고정 바 + 시술 상품 시트 (태블릿/모바일 전용, 반응형은 customResponsive.css) */
.detailFloatBar { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 950; align-items: stretch; gap: 8px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16); }
.detailConsult { position: relative; flex-shrink: 0; }
.detailConsultBtn { height: 52px; padding: 0 18px; border: 0; border-radius: 10px; background: #ff61a0; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.75px; white-space: nowrap; cursor: pointer; }
.detailConsultMenu { display: none; position: absolute; left: 0; bottom: calc(100% + 16px); flex-direction: column; gap: 6px; width: 200px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16); }
.detailConsult.isOpen .detailConsultMenu { display: flex; }
.detailConsultMenu a { display: flex; justify-content: center; align-items: center; height: 44px; border-radius: 8px; font-size: 15px; font-weight: 700; letter-spacing: -0.75px; text-decoration: none; }
.detailConsultMenu .detailConsultNaver { background: #17c462; color: #fff; }
.detailConsultMenu .detailConsultKakao { background: #fed801; color: #231916; }
.detailFloatSelect { flex: 1; min-width: 0; height: 52px; border: 0; border-radius: 10px; background: #1a1a1a; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.8px; cursor: pointer; }

.treatmentSheet { display: none; position: fixed; inset: 0; z-index: 900; }
.treatmentSheet.isOpen { display: block; }
.treatmentSheetDim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.treatmentSheetBox { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 80vh; padding-bottom: 80px; border-radius: 20px 20px 0 0; background: #fff; }
.treatmentSheetHead { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 16px; }
.treatmentSheetHead h3 { color: #252525; font-size: 18px; font-weight: 700; letter-spacing: -0.9px; }
.treatmentSheetClose { position: relative; width: 28px; height: 28px; border: 0; background: none; cursor: pointer; }
.treatmentSheetClose::before,
.treatmentSheetClose::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background: #999; }
.treatmentSheetClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.treatmentSheetClose::after { transform: translate(-50%, -50%) rotate(-45deg); }
.treatmentSheetList { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; overflow-y: auto; }
.treatmentSheetTotal { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid #eee; background: #fffbfd; }
.treatmentSheetTotal > span { color: #333; font-size: 16px; font-weight: 600; letter-spacing: -0.8px; }
.treatmentSheetTotal .price { display: flex; align-items: baseline; gap: 6px; }
.treatmentSheetTotal strong { color: #333; font-size: 16px; font-weight: 600; }
.treatmentSheetTotal strong span { color: #f60000; font-size: 20px; }
.treatmentSheetTotal em { color: #f60000; font-size: 12px; font-style: normal; }

/* =============================================================
   지점상세페이지_상세페이지_희망예약일 (3-2)
   ============================================================= */
.reservationWrap { display: flex; align-items: flex-start; gap: 24px; width: calc(100% - 80px); max-width: 1300px; margin: 235px auto 120px; }
.reservationCard { flex: 1; min-width: 0; border: 1px solid #d4d4d8; background: #fff; box-shadow: 4px 4px 30px 0 rgba(0, 0, 0, 0.1); overflow: hidden; }
.reservationCard > h3 { padding: 22px 24px 18px; border-bottom: 1px solid #d4d4d8; color: #333; font-size: 22px; font-weight: 700; letter-spacing: -1.1px; }

/* 선택한 시술 */
.reservationSelectedList { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; max-height: 400px; overflow-y: auto; }
.reservationSelectedItem { position: relative; padding: 16px 10px 16px 16px; border: 1px solid #e8e8ee; }
.reservationSelectedItem .reservationSelectedName { display: block; color: #333; font-size: 20px; font-weight: 600; letter-spacing: -1px; }

.reservationSelectedItem .reservationSelectedPrice { display: flex; flex-direction: column; align-items: end; gap: 8px; margin-top: 6px; }
.reservationSelectedItem .reservationSelectedPrice em { color: #b8b8b8; font-size: 15px; font-style: normal; text-decoration: line-through; }
.reservationSelectedItem .reservationSelectedPrice strong { color: #f60000; font-size: 22px; font-weight: 600; }
.reservationSelectedItem .reservationSelectedRemove { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border: 0; background: transparent; color: #b8b8b8; font-size: 20px; line-height: 1; cursor: pointer; }
.reservationSelectedEmpty { display: none; padding: 40px 24px; color: #999; font-size: 15px; text-align: center; }
.reservationSelectedTotal { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 24px; border-top: 1px solid #d4d4d8; background: #fffbfd; }
.reservationSelectedTotal > span { color: #333; font-size: 20px; font-weight: 600; }
.reservationSelectedTotal .price span { color: #f60000; font-size: 28px; font-weight: 600; }
.reservationSelectedTotal .price strong { color: #333; font-size: 17px; font-weight: 600; }
.reservationSelectedTotal em { margin-left: 8px; color: #f60000; font-size: 13px; font-style: normal; }
.reservationSelectedTotal .price { display: flex; flex-direction: column; align-items: end; gap: 8px; }
/* 희망예약일 & 시간 선택 */
.reservationCalendar { padding: 20px 24px 8px; }
.reservationCalendarHead { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 16px; }
.reservationCalendarHead strong { color: #ff61a0; font-size: 22px; font-weight: 600; }
.reservationCalendarHead .calendarNavBtn { width: 28px; height: 28px; border: 0; background: transparent; color: #999; font-size: 20px; line-height: 1; cursor: pointer; }
.reservationCalendarWeek { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 12px; color: #333; font-size: 15px; letter-spacing: -0.75px; text-align: center; }
.reservationCalendarWeek .isSun { color: #f60000; }
.reservationCalendarWeek .isSat { color: #2563eb; }
.reservationCalendarDays { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 14px; text-align: center; }
.reservationCalendarDays span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 auto; border-radius: 50%; color: #333; font-size: 16px; letter-spacing: -0.8px; cursor: pointer; }
.reservationCalendarDays span.isOtherMonth,
.reservationCalendarDays span.isPast { color: #d4d4d8; cursor: default; }
.reservationCalendarDays span.isSun:not(.isOtherMonth):not(.isPast) { color: #f60000; }
.reservationCalendarDays span.isSat:not(.isOtherMonth):not(.isPast) { color: #2563eb; }
.reservationCalendarDays span.isSelected { background: #f0629e; color: #fff !important; font-weight: 700; }
.reservationCalendarDays span.isHoliday { position: relative; background: #f4f4f6; color: #b4b4bb !important; font-weight: 500; cursor: default; }
.reservationCalendarDays span.isHoliday em { font-style: normal; font-size: 15px; line-height: 1; }
.reservationCalendarDays span.isHoliday small { position: absolute; top: 100%; left: 50%; margin-top: 1px; transform: translateX(-50%); color: #b0a2ac; font-size: 9px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; white-space: nowrap; }
.reservationTimeList { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 24px 24px; }
.reservationTimeBtn { height: 28px; border: 1px solid #cfcfcf; border-radius: 5px; background: #fff; color: #333; font-size: 15px; letter-spacing: -0.75px; cursor: pointer; transition: all .2s ease; }
.reservationTimeBtn.isActive { border-color: #ff61a0; background: #ff61a0; color: #fff; font-weight: 700; }
.reservationTimeEmpty { grid-column: 1 / -1; padding: 8px 0; color: #999; font-size: 14px; letter-spacing: -0.7px; text-align: center; }
.reservationCalendarDays span.isShortDay { position: relative; }
.reservationCalendarDays span.isShortDay em { font-style: normal; font-size: 15px; line-height: 1; }
.reservationCalendarDays span.isShortDay small { position: absolute; top: 100%; left: 50%; margin-top: 1px; transform: translateX(-50%); color: #f0629e; font-size: 9px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; white-space: nowrap; }

/* 예약자 정보 */
.reservationFormCard form { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px; }
.reservationField label { display: block; margin-bottom: 8px; color: #333; font-size: 16px; font-weight: 600; letter-spacing: -0.8px; }
.reservationField input[type="text"],
.reservationField input[type="tel"],
.reservationField textarea { width: 100%; padding: 10px 14px; border: 1px solid #e8e8ee; border-radius: 4px; outline: none; font-size: 14px; letter-spacing: -0.7px; color: #333; }
.reservationField input::placeholder,
.reservationField textarea::placeholder { color: #b6b7b6; }
.reservationField textarea { min-height: 90px; resize: vertical; }
.reservationField .reservationPhoneRow { display: flex; gap: 8px; }
.reservationField .reservationPhoneRow input { flex: 1; min-width: 0; }
.reservationField .phoneVerifyBtn { flex-shrink: 0; padding: 0 18px; border: 1px solid #ff61a0; border-radius: 4px; background: #ff61a0; color: #fff; font-family: "Pretendard", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.7px; cursor: pointer; }
.reservationCheckList { display: flex; flex-direction: column; gap: 10px; }
.reservationCheckList label { display: flex; align-items: center; gap: 8px; color: #686868; font-family: "Pretendard", sans-serif; font-size: 14px; letter-spacing: -0.7px; }
.reservationCheckList input[type="checkbox"] { width: 15px; height: 15px; }
.reservationCheckList .reservationAgreeMore { margin-left: auto; color: #333; font-size: 14px; text-decoration: underline; }
.reservationSubmitBtn { padding: 18px; border: 0; background: #ff61a0; color: #fff; font-family: "Pretendard", sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.9px; cursor: pointer; transition: background .2s ease; }
.reservationSubmitBtn:hover { background: #f0629e; }

/* 카테고리 상세페이지 - 관리자 에디터 콘텐츠 / 빈 옵션 안내 */
.branchDetailContent .info { margin-top: 40px; }
.branchDetailContent .info img { display: block; max-width: 100%;  width: 100%; height: auto; margin: 20px 0; }

/* 로그인 필요 모달 */
.loginRequiredModal { display: none; position: fixed; top: 0; left: 0; z-index: 2000; width: 100%; height: 100%; }
.loginRequiredModal.isOpen { display: block; }
.loginRequiredModal .loginRequiredModalDim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.loginRequiredModal .loginRequiredModalBox { position: relative; width: 90%; max-width: 360px; margin: 0 auto; top: 50%; transform: translateY(-50%); padding: 40px 30px 30px; border-radius: 16px; background: #fff; text-align: center; }
.loginRequiredModal .loginRequiredModalText { color: #252525; font-family: "Pretendard", sans-serif; font-size: 17px; font-weight: 500; line-height: 1.6; }
.loginRequiredModal .loginRequiredModalBtns { display: flex; gap: 10px; margin-top: 28px; }
.loginRequiredModal .loginRequiredModalCancel,
.loginRequiredModal .loginRequiredModalConfirm { flex: 1; display: flex; align-items: center; justify-content: center; height: 48px; border: 0; border-radius: 8px; font-family: "Pretendard", sans-serif; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.loginRequiredModal .loginRequiredModalCancel { background: #f0f0f0; color: #555; }
.loginRequiredModal .loginRequiredModalConfirm { background: #ff61a0; color: #fff; }
.loginRequiredModal .loginRequiredModalConfirm:hover { background: #f0629e; }

/* =============================================================
   이벤트 (5-1 이벤트 검색하기 / 5-2 지점별 이벤트 둘러보기)
   + 이벤트 상세(5-3) / 희망예약일(5-4)에서 쓰는 이벤트 표시
   ============================================================= */
.eventListWrap [hidden] { display: none !important; }
.eventListWrap { width: calc(100% - 80px); max-width: 1320px; margin: 220px auto 120px; }

/* 탭 */
.eventTabs { display: flex; max-width: 900px; margin: 0 auto; }
.eventTabs a { flex: 1; padding: 16px 0; border-bottom: 2px solid #e2e2e6; color: #999; font-size: 18px; font-weight: 500; letter-spacing: -0.9px; text-align: center; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.eventTabs a.isActive { border-bottom-color: #ff61a0; color: #ff61a0; font-weight: 600; }

/* 검색 필터 (지역 / 지점 / 시술명) */
.eventFilter { display: flex; align-items: flex-end; gap: 24px; max-width: 1020px; margin: 90px auto 60px; }
.eventFilter select { flex: 0 0 200px; height: 44px; padding: 0 28px 0 4px; border: 0; border-bottom: 1px solid #333; border-radius: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 2v8M2.5 6.5L6 10l3.5-3.5' stroke='%23333' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center; color: #333; font-size: 17px; letter-spacing: -0.85px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.eventFilterSearch { position: relative; flex: 1; min-width: 0; }
.eventFilterSearch input { width: 100%; height: 44px; padding: 0 40px 0 4px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; color: #333; font-size: 16px; letter-spacing: -0.8px; }
.eventFilterSearch input::placeholder { color: #b0b0b0; }
.eventFilterSearch input:focus { outline: 0; border-bottom-color: #ff61a0; }
.eventFilterSearch button { position: absolute; top: 50%; right: 4px; display: flex; padding: 4px; border: 0; background: transparent; transform: translateY(-50%); cursor: pointer; }

/* 지점 선택 (지점별 이벤트 둘러보기) */
.eventBranchPick { max-width: 970px; margin: 70px auto 60px; text-align: center; }
.eventBranchPick h2 { color: #aaa; font-size: 30px; font-weight: 600; letter-spacing: -1.5px; }
.eventBranchPick p { margin-top: 12px; color: #b5b5b5; font-size: 16px; letter-spacing: -0.8px; }
.eventBranchButtons { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 36px; }
.eventBranchButtons a { display: block; width: 180px; padding: 11px 0; border: 1px solid #b8b8b8; border-radius: 5px; background: #fff; color: #333; font-size: 15px; text-align: center; text-decoration: none; transition: all .2s ease; }
.eventBranchButtons a:hover { border-color: #ff61a0; }
.eventBranchButtons a.isActive { border-color: #ff61a0; background: #ff61a0; color: #fff; font-weight: 600; }

/* 이벤트 카드 */
.eventCardList { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; margin: 0; padding: 0; list-style: none; }
.eventCard { display: flex; flex-direction: column; min-width: 0; }
.eventCard .eventCardThumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(180deg, rgba(255, 159, 159, 0.2) 0%, rgba(255, 255, 255, 0.2) 71%); }
.eventCard .eventCardThumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.eventCard .eventCardThumb:hover img { transform: scale(1.03); }
.eventCard .eventCardMeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.eventCard .eventCardBranch { padding: 2px 12px; border: 1px solid #ff61a0; border-radius: 12px; color: #ff61a0; font-size: 12px; letter-spacing: -0.6px; white-space: nowrap; }
.eventCard .eventCardDate { color: #888; font-size: 12px; letter-spacing: -0.6px; }
.eventCard .eventCardTitle { margin-top: 10px; color: #252525; font-size: 17px; font-weight: 700; letter-spacing: -0.85px; word-break: keep-all; }
.eventCard .eventCardSummary { display: -webkit-box; flex: 1; margin-top: 8px; overflow: hidden; color: #777; font-size: 13px; line-height: 1.5; letter-spacing: -0.65px; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; }
.eventCard .eventCardBtn { display: block; margin-top: 18px; padding: 11px 0; border: 1px solid #d4d4d8; background: #fff; color: #333; font-size: 14px; text-align: center; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.eventCard .eventCardBtn:hover { border-color: #ff61a0; color: #ff61a0; }
.eventCardList { transition: opacity .2s ease; }
.eventCardList.isLoading { opacity: .4; pointer-events: none; }
.eventListEmpty { padding: 100px 0; color: #999; font-size: 17px; text-align: center; }

/* 더 많은 이벤트 불러오기 */
.eventMoreBtn { display: block; width: 100%; margin-top: 60px; padding: 18px 0; border: 1px solid #e2e2e6; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); color: #333; font-size: 16px; letter-spacing: -0.8px; cursor: pointer; }
.eventMoreBtn span { margin-left: 6px; color: #ff61a0; font-size: 18px; }
.eventMoreBtn:disabled { opacity: .6; cursor: default; }

/* 이벤트 상세(detail.php?ev_id=)의 기간·뱃지 */
.branchDetailContent .eventDetailMeta { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.branchDetailContent .eventDetailMeta + .branchDetailHead { margin-top: 14px; }
.eventBadge {display: inline-flex; align-items: center; justify-content: center; height: 23px; margin-bottom: 8px; padding: 3px 12px; border-radius: 50px; background: #ff61a0; color: #fff; font-size: 14px; font-weight: 600; }
.eventDetailPeriod { color: #888; font-size: 15px; letter-spacing: -0.75px; }

/* 희망예약일(reservation_date.php)의 선택 시술 종류 뱃지 */
.reservationSelectedItem .reservationItemBadge { display: inline-flex; align-items: center; justify-content: center; height: 23px; margin-bottom: 8px; padding: 3px 12px; border-radius: 50px; background: #9b9b9b; color: #fff; font-size: 14px; font-weight: 600; }
.reservationSelectedItem .reservationItemBadge.isEvent { background: #ff61a0; }



.eventBannerSlider { position: relative; width: 100%; overflow: hidden; margin-top: 150px; }
.eventBannerSlider .swiper-slide { width: 100%; }
.eventBannerSlider .swiper-slide a,
.eventBannerSlider .swiper-slide img { display: block; width: 100%; height: auto; }
.eventBannerSlider .swiper-button-prev,
.eventBannerSlider .swiper-button-next { display: none; }
.eventBannerSlider .swiper-pagination-bullet { width: 11px; height: 11px; background: #949494; opacity: 1; }
.eventBannerSlider .swiper-pagination-bullet-active { opacity: 1; background-color: #FF61A0; }
.eventBannerSlider + .eventListWrap { margin-top: 30px; }

/* =============================================================
   시술예약 (4-1 시술예약 / roa/page/reservation/index.php)
   오른쪽 장바구니는 기존 .treatmentSelectCard / .reservationSelectedItem /
   .reservationItemBadge 를 그대로 재사용한다 (3-1/3-2 참고).
   ============================================================= */
.reservationBrowseWrap { display: grid; grid-template-columns: 280px minmax(0, 1fr) 418px; align-items: start; gap: 24px; width: calc(100% - 80px); max-width: 1320px; margin: 220px auto 120px; }

/* 왼쪽: 대분류/중분류 아코디언 ("이벤트" 그룹이 맨 위) */
.reservationCategoryNav { display: flex; flex-direction: column; gap: 8px; }
.reservationCategoryGroup { border: 1px solid #d4d4d8; background: #fff; }
.reservationCategoryToggle { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 53px; padding: 0 20px; border: 0; background: transparent; color: #333; font-size: 17px; font-weight: 700; letter-spacing: -0.85px; text-align: left; cursor: pointer; }
.reservationCategoryArrow { flex-shrink: 0; width: 9px; height: 9px; border-right: 1.5px solid #999; border-bottom: 1.5px solid #999; transform: rotate(45deg); transition: transform .2s ease; }
.reservationCategoryGroup.isOpen .reservationCategoryArrow { transform: rotate(-135deg); }
/*
 * 아코디언 펼침 트릭은 <ul> 자체가 아니라, 그 <ul>을 감싸는 wrapper 하나를
 * grid row로 써야 한다 (<ul>에 직접 걸면 <li>마다 별도 row가 암묵적으로
 * 생겨서 첫 번째 중분류만 제대로 접히고 나머지는 접힘 애니메이션과
 * 무관하게 항상 그대로 보여버린다).
 */
.reservationSubListWrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.reservationCategoryGroup.isOpen .reservationSubListWrap { grid-template-rows: 1fr; }
.reservationSubList { min-height: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.reservationSubItem { display: block; width: 100%; height: 41px; padding: 0 28px; border: 0; border-top: 1px solid #eee; background: #fff; color: #555; font-size: 15px; font-weight: 500; letter-spacing: -0.75px; text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease; }
.reservationSubItem:hover { background: #fff5f9; color: #ff61a0; }
.reservationSubItem.isActive { background: #ff61a0; color: #fff; font-weight: 600; }

/* 가운데: 선택한 시술/이벤트 상세 카드 (여러 개 동시에 펼쳐질 수 있음) */
.reservationDetailPanels { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/*
 * .isOpen = 이 카드가 가운데 목록에 나타나는지 (왼쪽 목록 클릭으로 결정).
 * .isCollapsed = 나타난 카드의 본문(요약+옵션)만 접었는지 (Group 82 버튼으로 결정).
 * 제목 줄(head)은 이 둘과 무관하게 항상 보여야, 접어놓은 카드를 버튼으로
 * 다시 펼 수 있다 (안 그러면 접자마자 버튼째로 사라져서 못 됨 - 실수했었음).
 */
.reservationDetailPanel { display: none; border: 1px solid #d4d4d8; background: #fff; }
.reservationDetailPanel.isOpen { display: block; }
.reservationDetailHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 22px 24px 18px; border-bottom: 1px solid #d4d4d8; transition: border-color .25s ease; }
/* 접혔을 땐 본문 높이가 거의 0이 돼서 head의 밑줄과 카드 바깥 테두리가 겹쳐 두꺼워 보이므로, 접힌 동안은 밑줄을 투명하게 */
.reservationDetailPanel.isCollapsed .reservationDetailHead { border-bottom-color: transparent; }
.reservationDetailHead h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; color: #333; font-size: 22px; font-weight: 700; letter-spacing: -1.1px; }
.reservationDetailHead .reservationDetailTitleText { min-width: 0; }
.reservationDetailPrice { flex-shrink: 0; color: #f60000; font-size: 20px; font-weight: 700; letter-spacing: -1px; white-space: nowrap; }

/* 본문(요약+옵션) 접기 - 제목 줄 아래, grid 트릭으로 부드럽게 */
.reservationDetailCollapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.reservationDetailPanel.isCollapsed .reservationDetailCollapse { grid-template-rows: 0fr; }
.reservationDetailBody { min-height: 0; overflow: hidden; }

/* 카드 제목 옆 개별 접기/펼치기 버튼 (Figma "Group 82") */
.reservationDetailToggle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; border: 1px solid #d4d4d8; border-radius: 50%; background: #fff; cursor: pointer; }
.reservationDetailToggle::before { content: ""; width: 8px; height: 8px; margin-top: 2px; border-right: 1.5px solid #767676; border-bottom: 1.5px solid #767676; transform: rotate(-135deg); transition: transform .2s ease, margin .2s ease; }
.reservationDetailPanel.isCollapsed .reservationDetailToggle::before { margin-top: -3px; transform: rotate(45deg); }
.reservationDetailSummary { padding: 16px 24px 0; color: #555; font-size: 14px; line-height: 1.6; letter-spacing: -0.7px; }
/*
 * .treatmentSelectList/.treatmentSelectItem 등은 원래 .treatmentSelectCard
 * 안에서만 스타일이 먹도록 스코프돼 있어서 (3-1 참고), 가운데 상세카드
 * (.reservationDetailPanel) 쪽에도 같은 모양으로 한 벌 더 정의해 둔다.
 */
.reservationDetailPanel .treatmentSelectList { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; }
.reservationDetailPanel .treatmentSelectItem { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid #ddd; border-radius: 5px; background: #fffbfd; cursor: pointer; transition: border-color .2s ease; }
.reservationDetailPanel .treatmentSelectItem:has(input:checked) { border-color: #787878; }
.reservationDetailPanel .treatmentSelectItem input[type="checkbox"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.reservationDetailPanel .treatmentSelectCheck { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid #d4d4d4; background: #fff; }
.reservationDetailPanel .treatmentSelectItem input:checked ~ .treatmentSelectCheck { border-color: #ff61a0; background: #ff61a0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.2 11.5L13 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px; }
.reservationDetailPanel .treatmentSelectName { flex: 1; min-width: 0; color: #333; font-size: 18px; font-weight: 600; letter-spacing: -0.9px; word-wrap: anywhere; }
.reservationDetailPanel .treatmentSelectPrice { display: flex; align-items: center; gap: 4px; }
.reservationDetailPanel .treatmentSelectPrice em { color: #b8b8b8; font-size: 14px; font-style: normal; text-decoration: line-through; }
.reservationDetailPanel .treatmentSelectPrice strong { color: #f60000; font-size: 20px; font-weight: 600; }
.reservationDetailPanel .treatmentSelectPrice strong small { margin-left: 2px; color: #333; font-size: 16px; font-weight: 400; }
.reservationPanelEmpty { padding: 40px 24px; color: #999; font-size: 15px; letter-spacing: -0.75px; text-align: center; }


/* =============================================================
   마이페이지 (6-1 시술상담예약조회 / roa/page/mypage/index.php)
   ============================================================= */
.mypagePage .mypageInner { display: flex; align-items: flex-start; gap: 34px; width: calc(100% - 80px); max-width: 1250px; margin: 0 auto; }

/* 왼쪽 메뉴 */
.mypagePage .mypageSide { flex: 0 0 270px; width: 270px; }
.mypagePage .mypageSideBox { border: 1px solid #d4d4d8; background: #fff; }
.mypagePage .mypageSideTitle { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 20px 0 17px; border-bottom: 1px solid #d4d4d8; }
.mypagePage .mypageSideTitle strong { font-size: 20px; font-weight: 700; letter-spacing: -1px; color: #333; }
.mypagePage .mypageSideTitleDash { display: block; width: 13px; height: 1px; background: #333; }
.mypagePage .mypageSideMenu { margin: 0; padding: 0; list-style: none; }
.mypagePage .mypageSideMenu li { border-bottom: 1px solid #d4d4d8; }
.mypagePage .mypageSideMenu li:last-child { border-bottom: 0; }
.mypagePage .mypageSideMenu li a { display: flex; align-items: center; height: 41px; padding: 0 17px; font-size: 16px; font-weight: 600; letter-spacing: -0.8px; color: #333; }
.mypagePage .mypageSideMenu li.isActive { background: #ff61a0; }
.mypagePage .mypageSideMenu li.isActive a { color: #fff; }
.mypagePage .mypageLogoutBox { margin-top: 6px; border: 1px solid #d4d4d8; background: #fff; }
.mypagePage .mypageLogoutBox a { display: flex; align-items: center; height: 54px; padding: 0 17px; font-size: 20px; font-weight: 700; letter-spacing: -1px; color: #333; }

/* 오른쪽 콘텐츠 */
.mypagePage .mypageContent { flex: 1; min-width: 0; }
.mypagePage .mypageTitle { margin: 0 0 36px; font-size: 30px; font-weight: 700; letter-spacing: -1.5px; color: #333; }

/* 상태 탭 (전체/예약완료/지난예약/취소예약) */
.mypagePage .mypageStatusTab { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 30px; padding: 0 0 20px; border-bottom: 1px solid #d4d4d8; list-style: none; }
.mypagePage .mypageStatusTab li { position: relative; padding: 0 22px; }
.mypagePage .mypageStatusTab li:first-child { padding-left: 0; }
.mypagePage .mypageStatusTab li:not(:first-child)::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 15px; background: #d4d4d8; transform: translateY(-50%); }
.mypagePage .mypageStatusTab li button { padding: 0; border: 0; background: none; font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: -0.8px; color: #333; cursor: pointer; }
.mypagePage .mypageStatusTab li button em { font-style: normal; }
.mypagePage .mypageStatusTab li.isActive button { color: #f60000; }

.mypagePage .mypageEmpty { margin: 0; padding: 100px 20px; border-top: 1px solid #d4d4d8; border-bottom: 1px solid #d4d4d8; font-size: 16px; color: #888; text-align: center; }

/* 예약 카드 리스트 */
.mypagePage .mypageReservationList { margin: 0; padding: 0; list-style: none; }
.mypagePage .mypageReservationItem { position: relative; margin-top: 20px; border: 1px solid #d4d4d8; border-radius: 10px; overflow: hidden; background: #fff; }
.mypagePage .mypageReservationItem:first-child { margin-top: 0; }

.mypagePage .mypageCardMain { position: relative; padding: 27px 28px; }
.mypagePage .mypageCardRow { display: flex; align-items: center; margin-top: 16px; }
.mypagePage .mypageCardRow:first-child { margin-top: 0; }
.mypagePage .mypageCardRow dt { flex: 0 0 127px; margin: 0; font-size: 18px; font-weight: 400; letter-spacing: -0.9px; color: #575757; }
.mypagePage .mypageCardRow dd { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.9px; color: #333; }
.mypagePage .mypageCardRow dd.mypageStatusText { color: #ff61a0; }

.mypagePage .mypageCardActions { position: absolute; top: 19px; right: 23px; display: flex; align-items: center; gap: 25px; }
.mypagePage .mypageCancelBtn { display: flex; align-items: center; justify-content: center; width: 123px; height: 37px; padding: 0; border: 1px solid #6d6d6d; border-radius: 8px; background: #fff; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.8px; color: #6d6d6d; cursor: pointer; transition: background .2s ease, color .2s ease; }
.mypagePage .mypageCancelBtn:hover { background: #6d6d6d; color: #fff; }
.mypagePage .mypageToggleBtn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 37px; height: 37px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.mypagePage .mypageToggleBtn img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.mypagePage .mypageReservationItem.isOpen .mypageToggleBtn img { transform: rotate(180deg); }

/* 펼침 상세 (예약시술/요청사항/안내문구) */
.mypagePage .mypageCardDetail { height: 0; overflow: hidden; background: #f9f9f9; transition: height .3s ease; }
.mypagePage .mypageCardDetailInner { padding: 24px 28px 26px; }
.mypagePage .mypageCardDetailInner .mypageCardRow dd { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.mypagePage .mypageEventTag { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; padding: 3px 12px; border-radius: 50px; background: #ff61a0; font-size: 14px; font-weight: 400; letter-spacing: -0.7px; color: #fff; }
.mypagePage .mypageItemsBtn { padding: 0; border: 0; background: none; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: -0.9px; color: #333; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 예약 시술 전체보기 팝업 */
.mypagePage .mypageItemsModal { display: none; position: fixed; top: 0; left: 0; z-index: 2000; width: 100%; height: 100%; }
.mypagePage .mypageItemsModal.isOpen { display: block; }
.mypagePage .mypageItemsModal .mypageItemsModalDim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.mypagePage .mypageItemsModal .mypageItemsModalBox { position: relative; width: 90%; max-width: 400px; margin: 0 auto; top: 50%; transform: translateY(-50%); padding: 32px 28px 28px; border-radius: 16px; background: #fff; }
.mypagePage .mypageItemsModal .mypageItemsModalTitle { margin: 0 0 20px; font-size: 18px; font-weight: 700; letter-spacing: -0.9px; color: #333; }
.mypagePage .mypageItemsModal .mypageItemsModalList { margin: 0; padding: 0; max-height: 300px; overflow-y: auto; list-style: none; }
.mypagePage .mypageItemsModal .mypageItemsModalList li { padding: 12px 0; border-top: 1px solid #eee; font-size: 16px; letter-spacing: -0.8px; color: #333; }
.mypagePage .mypageItemsModal .mypageItemsModalList li:first-child { border-top: 0; }
.mypagePage .mypageItemsModal .mypageItemsModalClose { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 24px; padding: 0; border: 0; border-radius: 8px; background: #ff61a0; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; }

/* 예약 취소 확인 팝업 (Figma 6-2.마이페이지_예약취소창) */
.mypagePage .mypageCancelConfirmModal { display: none; position: fixed; top: 0; left: 0; z-index: 2100; width: 100%; height: 100%; }
.mypagePage .mypageCancelConfirmModal.isOpen { display: block; }
.mypagePage .mypageCancelConfirmModal .mypageCancelConfirmModalDim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.mypagePage .mypageCancelConfirmModal .mypageCancelConfirmModalBox { position: relative; width: 90%; max-width: 436px; margin: 0 auto; top: 50%; transform: translateY(-50%); padding: 36px 31px 30px; border-radius: 20px; background: #fffbfd; box-shadow: 4px 4px 30px rgba(0, 0, 0, .05); text-align: center; }
.mypagePage .mypageCancelConfirmModal .mypageCancelConfirmModalText { margin: 0 0 28px; font-size: 22px; font-weight: 500; letter-spacing: -1.1px; color: #333; }
.mypagePage .mypageCancelConfirmModal .mypageCancelConfirmModalBtns { display: flex; justify-content: center; gap: 14px; }
.mypagePage .mypageCancelConfirmModal .mypageCancelConfirmModalCancel,
.mypagePage .mypageCancelConfirmModal .mypageCancelConfirmModalConfirm { flex: 0 1 180px; min-width: 0; display: flex; align-items: center; justify-content: center; height: 45px; padding: 0; border-radius: 5px; font-family: inherit; font-size: 18px; font-weight: 500; letter-spacing: -0.9px; cursor: pointer; }
.mypagePage .mypageCancelConfirmModal .mypageCancelConfirmModalCancel { border: 1px solid #d4d4d8; background: #fffbfd; color: #5d5d5d; }
.mypagePage .mypageCancelConfirmModal .mypageCancelConfirmModalConfirm { border: 1px solid #ff61a0; background: #ff61a0; color: #fff; }

/* 회원정보 수정 (Figma 6-4.마이페이지_회원정보수정 창) */
.mypagePage .mypageProfileDesc { margin: 0 0 14px; font-size: 20px; font-weight: 600; letter-spacing: -1px; color: #333; }
.mypagePage .mypageProfileDivider { height: 1px; margin: 0 0 30px; background: #d4d4d8; }
.mypagePage .mypageProfileForm { max-width: 936px; }
.mypagePage .mypageFormSection { margin-top: 40px; }
.mypagePage .mypageFormSection:first-child { margin-top: 0; }
.mypagePage .mypageFormSection h3 { margin: 0 0 15px; font-size: 22px; font-weight: 600; letter-spacing: -1.1px; color: #333; }
.mypagePage .mypageFormRow { max-width: 432px; margin-top: 15px; }
.mypagePage .mypageFormSection h3 + .mypageFormRow { margin-top: 0; }
.mypagePage .mypageFormLabel { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; letter-spacing: -0.7px; color: #767676; }
.mypagePage .mypageFormRow.isHalf { display: flex; gap: 10px; }
.mypagePage .mypageFormRow input { display: block; width: 100%; height: 47px; padding: 0 16px; border: 1px solid #e0e0e0; background: #fff; font-family: inherit; font-size: 18px; font-weight: 400; color: #333; }
.mypagePage .mypageFormRow input::placeholder { color: #a3a1a0; }
.mypagePage .mypageFormRow input[readonly] { background: #f9f9f9; color: #a3a1a0; }
.mypagePage .mypageFormRow.isHalf input { flex: 1; min-width: 0; }
.mypagePage .mypageFormHint { margin: 9px 0 0; font-size: 14px; font-weight: 400; letter-spacing: -0.7px; color: #333; }
.mypagePage .mypageFormSubmit { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 432px; height: 47px; margin-top: 21px; padding: 0; border: 1px solid #ff61a0; background: #ff61a0; font-family: inherit; font-size: 20px; font-weight: 600; letter-spacing: -1px; color: #fff; cursor: pointer; transition: background .2s ease, color .2s ease; }
.mypagePage .mypageFormSubmit:hover { background: #fff; color: #ff61a0; }
.mypagePage .mypageCardNotice { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0 155px; font-size: 15px; font-weight: 400; letter-spacing: -0.75px; color: #7c7c7c; }
.mypagePage .mypageCardNotice i { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 15px; height: 15px; border: 1px solid #7c7c7c; border-radius: 50%; font-size: 10px; font-style: normal; line-height: 1; color: #7c7c7c; }


/* =============================================================
   지점별 상담안내 (roa/page/reservation/guide.php, Figma 415:463)
   ============================================================= */
.guidePage .guideBar { display: flex; align-items: center; justify-content: center; margin-top: 100px; height: 57px; background: #f0629e; }
.guidePage .guideBar p { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }

.guidePage .guideInner { width: calc(100% - 80px); max-width: 1173px; margin: 0 auto; }

.guidePage .guideTitle { padding: 40px 0 0; text-align: center; }
.guidePage .guideTitle h2 { position: relative; margin: 0 0 16px; padding-bottom: 8px; font-size: 23px; font-weight: 500; line-height: 48px; letter-spacing: -0.46px; color: #292929; }
.guidePage .guideTitle h2::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 74.5px; height: 1px; background: #292929; transform: translateX(-50%); }
.guidePage .guideTitle p { margin: 0; font-size: 16px; font-weight: 300; line-height: 55px; letter-spacing: -0.16px; color: #292929; }

.guidePage .guideTab { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 32px 0 0; padding: 0; list-style: none; }
.guidePage .guideTab li { position: relative; padding: 0 49px; }
.guidePage .guideTab li::after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 14px; background: #d5d5d5; transform: translateY(-50%); }
.guidePage .guideTab li:last-child::after { display: none; }
.guidePage .guideTab li a { display: block; font-size: 16px; font-weight: 500; line-height: 48px; color: #000; text-decoration: none; }
.guidePage .guideTab li.isActive a { color: #f0629e; font-weight: 600; }

.guidePage .guideList { margin-top: 40px; }
.guidePage .guideItem { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding: 30px 0; border-top: 1px solid #ddd; scroll-margin-top: 170px; }
.guidePage .guideItem:first-child { padding-top: 0; border-top: 0; }
.guidePage .guideItem:last-child { padding-bottom: 90px; }

.guidePage .guideItemInfo { flex: 1; min-width: 0; }
.guidePage .guideItemInfo h3 { margin: 0 0 20px; font-size: 30px; font-weight: 600; letter-spacing: -0.6px; color: #111; }
.guidePage .guideItemAddress { margin: 0 0 26px; font-size: 20px; font-weight: 400; letter-spacing: -0.46px; color: #111; }
.guidePage .guideItemAddress span { font-size: 17px; }

.guidePage .guideItemBtns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.guidePage .guideBtn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; text-decoration: none; white-space: nowrap; }
.guidePage .guideBtn img { width: 20px; height: 20px; object-fit: contain; }
.guidePage .guideBtn i { font-style: normal; font-weight: 300; }
.guidePage .guideBtnNaver { background: #17c462; color: #fff; }
.guidePage .guideBtnKakao { gap: 4px; background: #fed801; color: #231916; }
.guidePage .guideBtnKakao em { font-style: normal; font-weight: 500; }
.guidePage .guideBtnHome,
.guidePage .guideBtnEvent { background: #fff; border: 1px solid #f0629e; color: #f0629e; transition: background .2s ease, color .2s ease; }
.guidePage .guideBtnHome .guideBtnIconOn,
.guidePage .guideBtnEvent .guideBtnIconOn { display: none; }
.guidePage .guideBtnHome:hover,
.guidePage .guideBtnEvent:hover { background: #f0629e; color: #fff; }
.guidePage .guideBtnHome:hover .guideBtnIconDefault,
.guidePage .guideBtnEvent:hover .guideBtnIconDefault { display: none; }
.guidePage .guideBtnHome:hover .guideBtnIconOn,
.guidePage .guideBtnEvent:hover .guideBtnIconOn { display: block; }

.guidePage .guidePhoneGrid { display: flex; }
.guidePage .guidePhoneItem { display: flex; flex-direction: column; flex: 0 0 242px; }
.guidePage .guidePhoneItem:last-child { flex: 1; min-width: 0; }
.guidePage .guidePhoneItem span { margin-bottom: 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.34px; color: #f4809b; }
.guidePage .guidePhoneItem strong { font-size: 31px; font-weight: 400; line-height: 30px; letter-spacing: -0.62px; color: #111; }
.guidePage .guidePhoneItem strong .roaPhoneLight,
.guidePage .guidePhoneItem strong .roaPhoneDot { font-size: 31px; color: #111; font-weight: 300; line-height: 30px; }

.guidePage .guideItemImage { flex-shrink: 0; width: 406px; height: 225px; border-radius: 15px; overflow: hidden; background: #f2f2f2; }
.guidePage .guideItemImage img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 메인 팝업 (관리자 > 팝업 설정) */
.roaPopup { display: none; position: fixed; inset: 0; z-index: 10000; }
.roaPopup.isOpen { display: flex; justify-content: center; align-items: center; padding: 16px; }
.roaPopupDim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
/*
 * 이미지 영역: PC 1190 × 513, 모바일 360 × 492 비율 고정.
 * 화면이 작으면 탭/하단 바까지 포함해 화면 안에 들어오도록 비율대로 줄어든다.
 * (PC 탭 44px + 하단 바 36px = 80px, 바깥 여백 16px × 2)
 */
.roaPopupBox { position: relative; background: #fff; overflow: hidden; }
.roaPopupPc { width: min(1190px, calc(100vw - 32px), calc((100vh - 112px) * 1190 / 513)); }
.roaPopupMo { display: none; width: min(360px, calc(100vw - 32px), calc((100vh - 68px) * 360 / 492)); }
.roaPopupSwiper { position: relative; width: 100%; }
.roaPopupPc .roaPopupSwiper .swiper-slide { aspect-ratio: 1190 / 513; }
.roaPopupMo .roaPopupSwiper .swiper-slide { aspect-ratio: 360 / 492; }
.roaPopupSwiper .swiper-slide a { display: block; width: 100%; height: 100%; }
.roaPopupSwiper .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.roaPopupContent { height: 100%; padding: 24px; overflow-y: auto; }
.roaPopupTabs { display: flex; border-top: 1px solid #e5e5e5; background: #fff; }
.roaPopupTab { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 6px; border: 0; border-right: 1px solid #e5e5e5; background: #fff; color: #222; font-size: 15px; letter-spacing: -0.5px; line-height: 1.2; word-break: keep-all; cursor: pointer; transition: color .2s ease; }
.roaPopupTab:last-child { border-right: 0; }
.roaPopupTab.isActive { color: #d23237; font-weight: 700; }
.roaPopupFooter { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 12px; background: #1a1a1a; }
.roaPopupFooter button { border: 0; background: none; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.5px; cursor: pointer; }
.roaPopupDots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 4px; }
.roaPopupDots .swiper-pagination-bullet { width: 12px; height: 3px; margin: 0 !important; border-radius: 0; background: rgba(255, 255, 255, 0.45); opacity: 1; transition: background .2s ease; }
.roaPopupDots .swiper-pagination-bullet-active { background: #fff; }

@media (max-width: 780px) {
    .roaPopupPc { display: none; }
    .roaPopupMo { display: block; }
    .roaPopupMo .roaPopupFooter { padding: 0; }
    .roaPopupMo .roaPopupFooter button { position: relative; flex: 1; height: 100%; }
    .roaPopupMo .roaPopupFooter button + button::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 14px; background: #777; transform: translateY(-50%); }
}

/* =============================================================
   의료진 칼럼 (roa/page/column/list.php) - 목록(블로그 카드) / 상세
   ============================================================= */
.columnPage .columnInner { width:calc(100% - 80px); max-width:1250px; margin:0 auto; }
.columnPage .columnLabel { display:inline-block; color:#FF61A0; font-size:13px; font-weight:700; letter-spacing:1.3px; }

/* 목록 */
.columnPage .columnList { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:56px 30px; margin:0; padding:0; list-style:none; }
.columnPage .columnItem a { display:block; color:inherit; text-decoration:none; }
.columnPage .columnThumb { position:relative; overflow:hidden; aspect-ratio:16 / 10; border-radius:16px; background:#F6F5F4; }
.columnPage .columnThumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.columnPage .columnItem a:hover .columnThumb img { transform:scale(1.04); }
.columnPage .columnThumbEmpty { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(135deg, #FFE3EE 0%, #FFF6FA 100%); color:#F0A6C4; font-size:20px; font-weight:700; letter-spacing:4px; }
.columnPage .columnText { padding:22px 4px 0; }
.columnPage .columnTitle { display:-webkit-box; overflow:hidden; margin-top:10px; color:#111; font-size:21px; font-weight:600; line-height:1.45; letter-spacing:-0.63px; word-break:keep-all; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition:color .2s ease; }
.columnPage .columnExcerpt { display:-webkit-box; overflow:hidden; margin-top:10px; color:#777; font-size:15px; line-height:1.65; letter-spacing:-0.3px; word-break:keep-all; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.columnPage .columnDate { display:block; margin-top:16px; padding-top:14px; border-top:1px solid #EEE; color:#AAA; font-size:14px; letter-spacing:0.28px; }

/* 1페이지 첫 글: 가로로 크게 */
.columnPage .columnItem.isFeatured { grid-column:1 / -1; }
.columnPage .columnItem.isFeatured a { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); align-items:center; gap:56px; }
.columnPage .columnItem.isFeatured .columnThumb { border-radius:20px; }
.columnPage .columnItem.isFeatured .columnText { padding:0; }
.columnPage .columnItem.isFeatured .columnTitle { margin-top:14px; font-size:32px; line-height:1.4; letter-spacing:-0.96px; }
.columnPage .columnItem.isFeatured .columnExcerpt { margin-top:18px; font-size:17px; -webkit-line-clamp:3; }
.columnPage .columnItem.isFeatured .columnDate { margin-top:28px; }

.columnPage .columnEmpty { padding:80px 0; color:#999; font-size:16px; text-align:center; }

/* 상세 */
.columnPage .columnView { max-width:880px; margin:0 auto; }
.columnPage .columnViewHead { padding-bottom:36px; border-bottom:1px solid #E5E5E5; text-align:center; }
.columnPage .columnViewTitle { margin-top:14px; color:#111; font-size:36px; font-weight:600; line-height:1.4; letter-spacing:-1.08px; word-break:keep-all; }
.columnPage .columnViewMeta { display:flex; justify-content:center; gap:16px; margin-top:18px; color:#AAA; font-size:15px; }
.columnPage .columnViewMeta span::before { content:""; display:inline-block; width:1px; height:11px; margin-right:16px; background:#DDD; }
.columnPage .columnViewBody { padding:50px 0 70px; color:#333; font-size:17px; line-height:1.9; letter-spacing:-0.34px; word-break:keep-all; }
.columnPage .columnViewBody img { max-width:100%; height:auto; }
.columnPage .columnViewBody .columnViewImage { margin-bottom:30px; text-align:center; }
.columnPage .columnViewBody .columnViewImage img { border-radius:16px; }
.columnPage .columnViewNav { border-top:1px solid #111; }
.columnPage .columnViewNav a { display:flex; align-items:center; gap:24px; padding:20px 10px; border-bottom:1px solid #E5E5E5; color:#333; font-size:16px; text-decoration:none; transition:background .2s ease; }
.columnPage .columnViewNav a:hover { background:#FFF7FA; }
.columnPage .columnViewNav a em { flex:0 0 56px; color:#FF61A0; font-size:14px; font-style:normal; font-weight:700; }
.columnPage .columnViewNav a span { overflow:hidden; min-width:0; text-overflow:ellipsis; white-space:nowrap; }
.columnPage .columnViewBtns { display:flex; justify-content:center; margin-top:50px; }
.columnPage .columnListBtn { display:inline-flex; align-items:center; justify-content:center; min-width:160px; height:52px; padding:0 30px; border-radius:26px; background:#111; color:#fff; font-size:16px; font-weight:600; text-decoration:none; transition:background .2s ease; }
.columnPage .columnListBtn:hover { background:#FF61A0; }



/* 탑버튼 (roa/include/footer.php) : 링 = 스크롤 진행률, 호버 시 화살표가 위로 빠져나가고 아래에서 다시 올라옴 */
.topBtn { position:fixed; right:66px; bottom:40px; z-index:890; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:64px; height:64px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.72); color:#111; box-shadow:0 10px 30px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.6); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(20px) scale(.9); transition:opacity .4s ease, visibility .4s ease, transform .5s cubic-bezier(.22,1,.36,1), background .35s ease, color .35s ease, box-shadow .35s ease; }
.topBtn.isShow { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.topBtn:hover { background:#111; color:#fff; box-shadow:0 14px 34px rgba(255,97,160,.35); transform:translateY(-4px) scale(1); }
.topBtn:focus-visible { outline:2px solid var(--colorPoint, #FF61A0); outline-offset:4px; }
.topBtn .topBtnRing { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; }
.topBtn .topBtnRing circle { fill:none; stroke-width:2; }
.topBtn .topBtnTrack { stroke:rgba(0,0,0,.08); }
.topBtn:hover .topBtnTrack { stroke:rgba(255,255,255,.15); }
.topBtn .topBtnProgress { stroke:var(--colorPoint, #FF61A0); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .15s linear; }
.topBtn .topBtnArrow { position:relative; display:block; width:18px; height:18px; overflow:hidden; }
.topBtn .topBtnArrow svg { position:absolute; left:0; top:0; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.topBtn .topBtnArrow svg + svg { transform:translateY(120%); }
.topBtn:hover .topBtnArrow svg:first-child { transform:translateY(-120%); }
.topBtn:hover .topBtnArrow svg + svg { transform:translateY(0); }
.topBtn .topBtnText { position:relative; font-family:'Pretendard'; font-size:10px; font-weight:700; line-height:1; letter-spacing:.12em; }
@media (prefers-reduced-motion: reduce) {
    .topBtn, .topBtn .topBtnArrow svg { transition:opacity .2s ease, visibility .2s ease; }
}

/* 빠른상담 패널 : 열렸을 때 뒤 배경 블러 (기본 스타일은 roa/include/consult.php) */
.quickConsult.isOpen .quickConsultPanel { -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }