/* =====================================================================
   ui6.css — UI 개선 6번 「전환 동선」 (2026-10-19, KR 전용)
   A. PC 헤더 전화번호  ·  B. 시술 랜딩 본문 중간 CTA  ·  C. 긴 랜딩 목차
   로드 순서: wune-ds.css → ui23_override.css → langswitch.css → ui45_override.css → ui6.css
   - A 는 header.php 조각(ui6_header_snippet.php)과 짝. 조각이 없으면 A 의 1440–1599 압축만 적용된다.
   - B 는 common/include/mid_cta.php, C 는 common/include/landing_toc.php + /common/js/wune-toc.js 와 짝.
   - 특이도: DS 가 !important 로 고정한 속성만 !important + :not(#\#)(=id 1개) 로 이김(ui23·ui45 와 같은 전략).
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. PC 헤더 전화번호  `.dn-nav-right > a.dn-nav-tel` (언어 · 로그인 · ☎ 번호 · 상담 예약하기)
   실측(hdr_variants.py, 비로그인/로그인): 헤더가 PC 로 보이는 1280px 이상 전 구간에서 번호까지 한 줄.
   1440–1599 는 지금도 우측 묶음이 헤더 안쪽 여백을 55px(로그인 96px) 넘고 로고가 220px 치우쳐 있어,
   기존 1366–1439 압축값(메뉴 14px·좌우 9 · 로고 118)을 1599 까지 늘려 그 넘침도 같이 없앴다.
   --------------------------------------------------------------------- */
html[lang|="ko"]:not(#\#) body.wds .dn-nav-wrap .dn-nav-right a.dn-nav-tel{
  display:inline-flex !important; align-items:center; gap:6px; flex:0 0 auto;
  height:40px; padding:0 2px !important; box-sizing:border-box;
  background:none !important; border:0 !important; border-radius:0 !important;
  color:var(--wds-text) !important; font-size:15px !important; font-weight:600 !important;
  line-height:1 !important; letter-spacing:0 !important; white-space:nowrap; text-decoration:none !important;
  font-variant-numeric:tabular-nums;
}
html[lang|="ko"]:not(#\#) body.wds .dn-nav-wrap .dn-nav-right a.dn-nav-tel .dn-nav-tel__icon{
  flex:0 0 auto; width:18px; height:18px; color:var(--wds-primary);
}
html[lang|="ko"]:not(#\#) body.wds .dn-nav-wrap .dn-nav-right a.dn-nav-tel .dn-nav-tel__num{
  font-size:inherit !important; font-weight:inherit !important; letter-spacing:0 !important;
  color:inherit !important; line-height:1 !important;   /* 헤더 span 공통 15.5px 규칙을 끊는다 */
}
html[lang|="ko"]:not(#\#) body.wds .dn-nav-wrap .dn-nav-right a.dn-nav-tel:hover{color:var(--wds-primary) !important}
html[lang|="ko"]:not(#\#) body.wds .dn-nav-wrap .dn-nav-right a.dn-nav-tel:hover .dn-nav-tel__num{text-decoration:underline; text-underline-offset:3px}
html[lang|="ko"]:not(#\#) body.wds .dn-nav-wrap .dn-nav-right a.dn-nav-tel:focus-visible{outline:2px solid var(--wds-primary) !important; outline-offset:2px !important}

/* 1280–1599: 번호 14px (기존 압축 구간의 CTA 14px·로그인 13px 와 맞춤) */
@media (min-width:1280px) and (max-width:1599px){
  html[lang|="ko"]:not(#\#) body.wds .dn-nav-wrap .dn-nav-right a.dn-nav-tel{font-size:14px !important; gap:5px}
}
/* 1440–1599: 기존 1366–1439 압축값을 그대로 연장 (wune-ds.css L185~191 과 같은 값) */
@media (min-width:1440px) and (max-width:1599px){
  html[lang|="ko"]:not(#\#):not(#\#) .dn-nav-wrap .dn-nav-left .head_menu > li > a{font-size:14px !important; padding-left:9px !important; padding-right:9px !important; letter-spacing:0.02em !important}
  html[lang|="ko"]:not(#\#):not(#\#) .dn-nav-wrap .dn-nav-logo{padding:0 12px !important}
  html[lang|="ko"]:not(#\#):not(#\#) .dn-nav-wrap .dn-nav-logo a img{max-width:118px !important}
  html[lang|="ko"]:not(#\#):not(#\#) .dn-nav-wrap .dn-nav-right{gap:8px !important}
  html[lang|="ko"]:not(#\#):not(#\#) .dn-nav-wrap .dn-nav-right .head-cta-btn{padding-left:18px !important; padding-right:18px !important}
  html[lang|="ko"]:not(#\#):not(#\#) .dn-nav-wrap .dn-nav-right .wls__btn{padding-left:8px !important; padding-right:8px !important}
}
/* 1600–1769: 메뉴 15.5px 유지, 좌우 여백 21 → 14 만 (번호 15px 자리) */
@media (min-width:1600px) and (max-width:1769px){
  html[lang|="ko"]:not(#\#):not(#\#) .dn-nav-wrap .dn-nav-left .head_menu > li > a{padding-left:14px !important; padding-right:14px !important}
  html[lang|="ko"]:not(#\#):not(#\#) .dn-nav-wrap .dn-nav-right{gap:8px !important}
}

/* ---------------------------------------------------------------------
   B. 본문 중간 CTA  `aside.wds-cta.wune-midcta` (common/include/mid_cta.php)
   기존 DS 컴포넌트 wds-cta + 버튼 4종(wds-btn--primary / --secondary, 48h·r0) 재사용.
   PC = 한 줄 띠(문구 왼쪽 · 버튼 2개 오른쪽) / 모바일 = 문구 위 · 버튼 2개 나란히(각 50%).
   기존 카카오 띠(.dn-kakao-cta, 크고 문단형)와 구별되게 낮고 얇게: 위 2px 버건디 선.
   --------------------------------------------------------------------- */
html body.wds .content_wrap aside.wds-cta.wune-midcta:not(#\#){
  box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px 32px;
  width:auto; max-width:var(--wds-container);
  margin:48px auto !important; padding:24px 32px !important;
  background:var(--wds-surface); border:0; border-top:2px solid var(--wds-primary);
  border-radius:0 !important; text-align:left;
}
html body.wds .content_wrap .wune-midcta:not(#\#) .wune-midcta__text{
  flex:1 1 280px; margin:0 !important; max-width:none !important;
  color:var(--wds-text) !important; font-size:var(--wds-fs-body) !important; font-weight:600 !important;
  line-height:1.5 !important; letter-spacing:var(--wds-ls-body, -0.01em);
}
html body.wds .content_wrap .wune-midcta:not(#\#) .wds-cta__actions{
  display:flex !important; flex:0 0 auto; flex-wrap:nowrap; gap:12px;
  width:auto !important; max-width:none !important; margin:0 !important; justify-content:flex-end;
}
html body.wds .content_wrap .wune-midcta:not(#\#) .wds-cta__actions > .wds-btn{
  min-width:160px; margin:0 !important; white-space:nowrap;
}
@media (max-width:767px){
  html body.wds .content_wrap aside.wds-cta.wune-midcta:not(#\#){
    flex-direction:column; align-items:stretch; gap:16px;
    margin:32px var(--wds-gutter) !important; padding:20px 16px !important;
  }
  html body.wds .content_wrap :is(.cont, .dn-geo-content__block, .breast-hub) .wune-midcta:not(#\#){margin-left:0 !important; margin-right:0 !important}
  html body.wds .content_wrap .wune-midcta:not(#\#) .wune-midcta__text{flex:none; text-align:center; font-size:var(--wds-fs-body) !important}
  html body.wds .content_wrap .wune-midcta:not(#\#) .wds-cta__actions{display:grid !important; grid-template-columns:1fr 1fr; gap:8px}
  html body.wds .content_wrap .wune-midcta:not(#\#) .wds-cta__actions > .wds-btn{min-width:0; width:100% !important; padding-left:8px !important; padding-right:8px !important}
}

/* ---------------------------------------------------------------------
   C. 긴 랜딩 목차  `nav.blog-read__toc.wune-toc` (블로그 상세 목차와 같은 클래스·같은 모양)
   블로그 실측값(1440): 바탕 #F7F7F8 · 테두리 1px #E6E6E8 · r0 · 패딩 20/22/22 · 제목 17px · 항목 15.5/500 행 47px.
   랜딩에서는 <details> 로 접이식: PC 기본 펼침(2열) · 모바일 기본 접힘(1열). JS: /common/js/wune-toc.js
   --------------------------------------------------------------------- */
html body.wds .content_wrap nav.wune-toc{
  box-sizing:border-box; max-width:var(--wds-container); margin:40px auto 8px; padding:0 20px;
}
html body.wds .content_wrap nav.wune-toc[hidden]{display:none !important}
html body.wds .content_wrap nav.wune-toc .wune-toc__box{
  background:var(--wds-surface); border:1px solid #E6E6E8; border-radius:0; padding:0;
}
/* 사이트 공통 FAQ 아코디언 규칙(summary display:block·18px·「Q.」·「+/−」 가상요소)을 목차에서만 끊는다 */
html body.wds .content_wrap nav.wune-toc:not(#\#) .wune-toc__box > summary{
  position:relative; display:flex !important; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px; margin:0 !important; padding:0 22px !important; cursor:pointer; list-style:none;
  color:var(--wds-text) !important; font-size:17px !important; font-weight:700 !important; line-height:1.4 !important;
}
html body.wds .content_wrap nav.wune-toc:not(#\#) .wune-toc__box > summary::before,
html body.wds .content_wrap nav.wune-toc:not(#\#) .wune-toc__box > summary::after{content:none !important; display:none !important}
html body.wds .content_wrap nav.wune-toc .wune-toc__box > summary::-webkit-details-marker{display:none}
html body.wds .content_wrap nav.wune-toc .wune-toc__count{margin-left:8px; color:var(--wds-text-sub); font-size:var(--wds-fs-label); font-weight:500}
html body.wds .content_wrap nav.wune-toc .wune-toc__chev{flex:0 0 auto; width:14px; height:14px; color:var(--wds-text-sub); transition:transform .2s}
html body.wds .content_wrap nav.wune-toc .wune-toc__box[open] .wune-toc__chev{transform:rotate(180deg)}
html body.wds .content_wrap nav.wune-toc .wune-toc__box > summary:focus-visible{outline:2px solid var(--wds-primary); outline-offset:-2px}
html body.wds .content_wrap nav.wune-toc .blog-read__toc-list{
  list-style:none !important; margin:0 !important; padding:0 22px 14px !important;
  display:grid; grid-template-columns:1fr 1fr; column-gap:32px; counter-reset:wtoc;
}
html body.wds .content_wrap nav.wune-toc .blog-read__toc-list > li{
  list-style:none !important; margin:0 !important; padding:0 !important; border-bottom:1px solid #ECECEC; counter-increment:wtoc;
}
html body.wds .content_wrap nav.wune-toc .blog-read__toc-list > li > a{
  display:flex; gap:10px; align-items:baseline; min-height:46px; padding:12px 0; box-sizing:border-box;
  color:#111 !important; font-size:15.5px !important; font-weight:500 !important; line-height:1.4 !important;
  text-decoration:none !important;
}
html body.wds .content_wrap nav.wune-toc .blog-read__toc-list > li > a::before{
  content:counter(wtoc, decimal-leading-zero); flex:0 0 auto; min-width:22px;
  color:var(--wds-primary); font-size:var(--wds-fs-label); font-weight:600; font-variant-numeric:tabular-nums;
}
html body.wds .content_wrap nav.wune-toc .blog-read__toc-list > li > a:hover{color:var(--wds-primary) !important; text-decoration:underline !important; text-underline-offset:3px}
html body.wds .content_wrap nav.wune-toc .blog-read__toc-list > li > a:focus-visible{outline:2px solid var(--wds-primary); outline-offset:2px}
/* 목차로 이동한 제목이 고정 헤더(PC 73 · 모바일 81)에 가리지 않게 — 주소창 #해시 직접 진입에도 적용 */
html body.wds [data-wune-toc-target]{scroll-margin-top:calc(var(--ui6-header, 81px) + 16px)}
@media (max-width:767px){
  html body.wds .content_wrap nav.wune-toc{margin:24px auto 0; padding:0 var(--wds-gutter)}
  html body.wds .content_wrap nav.wune-toc .wune-toc__box > summary{padding:0 16px; font-size:16px; min-height:52px}
  html body.wds .content_wrap nav.wune-toc .blog-read__toc-list{grid-template-columns:1fr; padding:0 16px 8px !important}
  html body.wds .content_wrap nav.wune-toc .blog-read__toc-list > li > a{font-size:15px !important; min-height:44px; padding:11px 0}
}
@media (prefers-reduced-motion:reduce){html body.wds .content_wrap nav.wune-toc .wune-toc__chev{transition:none}}

/* 2026-10-20 원장: 가슴확대 페이지 상담 띠 6개 → 5개 — 붙어 있던 카카오 띠 2개(7,205·8,538) 중 「모티바·멘토 차이」 띠 숨김(간격 균등) */
html body.wds .dn-kakao-cta[data-loc="breast_aug_after_implant_tabs"]{display:none !important}

/* 10-20 원장: 휴대폰에서 히어로 버튼을 한 번 누르고 돌아오면 「올림(hover)」 상태가 남아 테두리 버튼이 흰색으로 바뀜 → 터치 기기에선 누른 뒤에도 처음 모습 유지 */
@media (hover:none){
html body.wds .dn-hero .dn-hero__cta-wrap a.dn-hero__cta-btn--outline:hover:not(#\#),
html body.wds .bac-cta__btn--line.bac-cta__btn--line:hover:not(#\#){background:transparent !important; border-color:var(--wds-text-invert) !important; color:var(--wds-text-invert) !important}
html body.wds .dn-hero .dn-hero__cta-wrap a.dn-hero__cta-btn--primary:hover:not(#\#){background:var(--wds-text-invert) !important; border-color:var(--wds-text-invert) !important; color:var(--wds-primary) !important}
}