@charset "utf-8";
/* ============================================================================
   wuneprs.com UI 개선 4·5번 — 모바일 첫 화면 확보(A) + 하단 가림 정리(B) + 햄버거 메뉴(C)  (2026-10-16)
   - 마크업·JS 수정 없음. wune-ds.css · ui23_override.css · langswitch.css 뒤에 로드하는 「덮어쓰기 레이어」.
   - 전부 @media (max-width: 768px) 안 — PC(≥769) 는 한 줄도 바뀌지 않는다.
   - 특이도: `html body.wds` 접두(0,1,2) + 필요 시 `:not(#\#)`(=id 1개, (1,0,0)) 로 라이브 DS·페이지 인라인의
     (0,4,x) !important 를 넘는다. DS 가 !important 로 고정한 속성(min-height·padding·font-size·display 등)에만 !important.
   - 토큰은 --wds-* 만. 토큰 외 값: 고정 헤더 높이 81px(실측) 1개 → --ui45-header.
   - 선택자 중 `:has()` 는 iOS 15.4+/Chrome 105+ 지원. 미지원 브라우저에선 그 규칙만 통째로 무시된다
     (퀵바 5칸·메뉴 스크롤 잠금·리얼리뷰 상세 히어로 숨김 → 현재 라이브 상태로 남음, 깨지지 않음).
   ========================================================================== */
:root { --ui45-header: 81px; }   /* div.head_wrap 실측 높이(375×812) */

@media (max-width: 768px) {

  /* =============================== A. 첫 화면 확보 =============================== */

  /* ---- A-1. 사진 히어로(.dn-page-hero--photo): 전후사진·리얼리뷰·리얼셀피·블로그 목록·예약
          560px → 최대 300px. 고정 헤더(81) 아래로 글이 들어오도록 상단 패딩 = 헤더 + 20.
          라이브: html body.wds .dn-page-hero--photo{min-height:560px; padding:0 20px 36px !important} (0,1,3) ------- */
  html body.wds .dn-page-hero--photo:not(#\#) {
    min-height: 0 !important;
    height: auto !important;
    max-height: 300px !important;
    align-items: flex-end !important;
    padding: calc(var(--ui45-header) + 20px) 20px 22px !important;
    box-sizing: border-box !important;
  }
  /* 배경 사진은 absolute inset:0 + object-fit:cover 라 높이를 따라온다. 얼굴·피사체가 위에 있으므로 초점만 조금 내림 */
  html body.wds .dn-page-hero--photo:not(#\#) .dn-page-hero__media img {
    object-fit: cover !important;
    object-position: 50% 30% !important;
  }
  html body.wds .dn-page-hero--photo:not(#\#) .dn-page-hero__label {
    font-size: 12px !important;
    letter-spacing: .12em !important;
    line-height: 1.3 !important;
    margin: 0 0 var(--wds-2) !important;      /* 12 → 8 */
  }
  html body.wds .dn-page-hero--photo:not(#\#) .dn-page-hero__label::after { width: 24px; margin-left: 10px; }
  html body.wds .dn-page-hero--photo:not(#\#) .dn-page-hero__title {
    font-size: var(--wds-fs-h3) !important;   /* 30 → 24 (2줄 = 65px) */
    line-height: 1.35 !important;
    margin: 0 0 var(--wds-2) !important;      /* 16 → 8 */
  }
  /* 한 줄 설명: 2줄까지만(16px 3~4줄 82px → 15px 2줄 48px). 텍스트는 그대로, 넘치는 줄만 말줄임 */
  html body.wds .dn-page-hero--photo:not(#\#) .dn-page-hero__sub {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    font-size: var(--wds-fs-sm) !important;   /* 15 */
    line-height: 1.6 !important;
    margin: 0 !important;
  }
  /* 블로그 목록 히어로의 네이버 블로그 링크(69px 2줄): 1줄 링크만 남김(설명 줄 line1 은 접고, 링크 줄 line2 유지) */
  html body.wds .dn-page-hero--photo:not(#\#) .blog-hero-cta {
    margin-top: var(--wds-2) !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  html body.wds .dn-page-hero--photo:not(#\#) .blog-hero-cta__line1 { display: none !important; }
  html body.wds .dn-page-hero--photo:not(#\#) .blog-hero-cta__line2 {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;              /* 터치 44 */
    font-size: var(--wds-fs-label) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* 히어로 바로 아래 본문 간격 40 → 24 */
  html body.wds .dn-page-hero--photo:not(#\#) + .content_wrap { padding-top: var(--wds-5) !important; }

  /* ---- A-2. 시술 랜딩 사진 히어로(.dn-sub-hero): 560 → 240 (60px 스페이서 아래에 놓여 헤더와 겹치지 않음)
          라이브: html body.wds .dn-sub-hero{min-height:560px !important; padding:0 20px 36px !important} (0,1,2) ---- */
  html body.wds .dn-sub-hero:not(#\#) {
    min-height: 240px !important;
    max-height: 300px !important;
    padding: 24px 20px 24px !important;
    align-items: flex-end !important;
    overflow: hidden !important;               /* 배경 picture(absolute) 가 300 밖으로 새지 않게 */
  }
  html body.wds .dn-sub-hero:not(#\#) picture img { object-fit: cover !important; object-position: 50% 25% !important; }
  html body.wds .dn-sub-hero:not(#\#) .dn-sub-hero__eyebrow { font-size: 12px !important; margin: 0 0 var(--wds-2) !important; line-height: 1.3 !important; }
  html body.wds .dn-sub-hero:not(#\#) .dn-sub-hero__title { font-size: var(--wds-fs-h3) !important; line-height: 1.35 !important; }
  /* 히어로 뒤 소개 블록 상단 여백(40) → 24 */
  html body.wds .dn-sub-hero:not(#\#) + .dn-sub-hero__intro { padding-top: var(--wds-5) !important; }

  /* ---- A-3. 크림 배경 히어로(.dn-page-hero 비사진형, 다른 하위 페이지): 상단 62+64 → 헤더+16 (검증 페이지 밖 — 미검증) */
  html body.wds .dn-page-hero:not(.dn-page-hero--photo):not(#\#) {
    padding-top: calc(var(--ui45-header) + 16px) !important;
    padding-bottom: var(--wds-5) !important;
    margin-bottom: var(--wds-5) !important;
  }

  /* ---- A-4. 리얼리뷰 상세: 목록 히어로를 숨기고 글 제목(h1)이 첫 화면에
          상세만의 표지 = .rr-page-wrap 안에 .read02(본문 상자). 목록(/community/realreview/)엔 .read02 가 없다. ---- */
  html body.wds:has(.rr-page-wrap .read02) .dn-page-hero:not(#\#) { display: none !important; }
  html body.wds:has(.rr-page-wrap .read02) .content_wrap.rr-page-wrap:not(#\#) {
    padding-top: calc(var(--ui45-header) + 16px) !important;   /* 고정 헤더 밑으로 */
  }
  html body.wds:has(.rr-page-wrap .read02) .rr-page-wrap .cont_wrap.community_wrap:not(#\#) { padding-top: 0 !important; }
  html body.wds:has(.rr-page-wrap .read02) .rr-page-wrap .read02:not(#\#) { padding-top: 0 !important; }
  html body.wds .rr-page-wrap .read_title:not(#\#) { padding: 8px 0 16px !important; }
  html body.wds .rr-page-wrap .read_title h1.cont_text_title:not(#\#) {
    font-size: var(--wds-fs-h3) !important;   /* 21 → 24 */
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  /* ---- A-5. 예약 폼: 첫 화면(≤812)에 달력 첫 칸이 보이게
          (1) 빈 공지 박스 .notice01(padding 100+28, 내용 0) 접기
          (2) 「카톡/전화/방문」 분기 카드 박스를 폼 **아래**로 (order) — 카드·문구는 그대로, 순서만 바뀜
          (3) 폼 카드 머리(104+40) 압축 ---- */
  html body.wds .reservation_wrap:not(#\#) { display: flex !important; flex-direction: column !important; padding-bottom: var(--wds-9) !important; }
  html body.wds .reservation_wrap > .cont_box1.notice01:not(#\#) { padding: 0 !important; min-height: 0 !important; }
  html body.wds .reservation_wrap > .cont_box1.notice01:not(#\#):empty { display: none !important; }
  html body.wds .reservation_wrap > .cont_box1:not(.notice01):not(#rv_form):not(#\#) { order: 2; padding-top: 0 !important; }
  html body.wds .reservation_wrap > #rv_form:not(#\#) { order: 1; padding-top: 0 !important; }
  html body.wds .reservation_wrap .form_card:not(#\#) { margin-top: 0 !important; padding-top: var(--wds-5) !important; }
  html body.wds .reservation_wrap .form_card_header:not(#\#) { padding-bottom: var(--wds-3) !important; margin-bottom: var(--wds-4) !important; }
  html body.wds .reservation_wrap .form_card_header > h2:not(#\#) { font-size: var(--wds-fs-h4) !important; margin: 0 0 var(--wds-1) !important; }
  html body.wds .reservation_wrap .form_card_header > p:not(#\#) { font-size: var(--wds-fs-label) !important; margin: 0 !important; line-height: 1.5 !important; }
  html body.wds .reservation_wrap .wune-consult:not(#\#) { margin-top: var(--wds-6) !important; }

  /* =============================== B. 하단 가림 정리 =============================== */

  /* ---- B-1. 퀵바 6칸 → 5칸(KR): 「인스타그램」 칸 숨김, 나머지 20% 균등.
          라이브: .quick_menu_wrap .quick_menu_m ul li{width:16.66% !important} (max-width:768, (0,3,2))
          :has() 미지원 브라우저는 두 규칙이 함께 무시되어 6칸 그대로(깨짐 없음). /en/ 은 이미 5칸이라 KR 만. ---- */
  html[lang|="ko"] body.wds .quick_menu_wrap .quick_menu_m ul:has(> li > a[href*="/event/insta"]) > li:not(#\#) {
    width: 20% !important;
    flex: 0 0 20% !important;
  }
  html[lang|="ko"] body.wds .quick_menu_wrap .quick_menu_m ul > li:has(> a[href*="/event/insta"]):not(#\#) { display: none !important; }
  /* 라벨: 14px 자간 -0.08em(밀착) → 12px 자간 -0.02em. 5칸 = 71px, 가장 긴 「라 벨 윈느」 ≈ 52px */
  html body.wds .quick_menu_wrap .quick_menu_m ul li a .q_text:not(#\#) {
    font-size: 12px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.4 !important;
    margin-top: 3px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body.wds .quick_menu_wrap .quick_menu_m ul li a:not(#\#) { min-height: 44px !important; height: auto !important; }   /* 터치 44 → 퀵바 전체 60(li 패딩 6×2 + 상단 4) */

  /* ---- B-2. 카카오 플로팅 버튼: 모바일에선 숨김(퀵바 「카톡상담」과 목적지 동일 /event/kakao.php).
          라이브: 페이지 인라인 .wune-kakao-fab{position:fixed; display:flex}(0,1,0) — !important 없음 ---- */
  html body.wds a.wune-kakao-fab:not(#\#) { display: none !important; }

  /* ---- B-3. 하단 패딩: body 0 + footer padding-bottom 96(실측) → 마지막 푸터 링크 아래 여백 162 ≥ 퀵바 62. 변경 없음(기록만).
          단 footer 가 없는 페이지(404 등) 대비 안전장치 ---- */
  html body.wds:not(:has(footer)) { padding-bottom: 72px !important; }

  /* =============================== C. 햄버거 메뉴 =============================== */

  /* ---- C-1. 로그인·회원가입(로그인 시 마이페이지·로그아웃)을 패널 맨 위로.
          패널(.head_right_wrap)은 block → flex column, .m-menu-auth 만 order:-1. 나머지 순서(메뉴 → 언어 → CTA) 그대로.
          로그인 상태 토글은 body.is-logged-in + .js-login-only/.js-logout-only 의 display 규칙이 맡으므로 display 는 건드리지 않는다. ---- */
  html body.wds .head_right_wrap:not(#\#) {
    display: flex !important;
    flex-direction: column !important;
    /* 패널 top 은 60 인데 고정 헤더는 81 → 위 21px 이 헤더에 가린다(라이브도 동일). 버튼 줄이 맨 위로 오므로 40 유지 */
    padding-top: calc(var(--ui45-header) - 60px + 20px) !important;   /* = 41 */
    overscroll-behavior: contain;
  }
  html body.wds .head_right_wrap > .m-menu-auth:not(#\#) {
    order: -1;
    gap: var(--wds-2) !important;
    padding: 0 0 var(--wds-4) !important;
    margin: 0 0 var(--wds-2) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--wds-border) !important;
  }
  html body.wds .head_right_wrap > .m-menu-auth > a:not(#\#) {
    flex: 1 1 0;
    min-height: 44px;                          /* 터치 44 */
    box-sizing: border-box;
    padding: 0 var(--wds-3);
    line-height: 42px;                         /* 44 − 테두리 1×2 */
    text-align: center;
    font-size: var(--wds-fs-sm) !important;    /* 13.5 → 15 */
    font-weight: 600 !important;
    letter-spacing: var(--wds-ls-body) !important;
    color: var(--wds-primary) !important;
    border: 1px solid var(--wds-primary);
    border-radius: 0;
    text-decoration: none !important;
    white-space: nowrap;
  }
  /* 첫 항목(로그인 / 마이페이지)은 채움 = Primary, 둘째(회원가입 / 로그아웃)는 외곽선 = Secondary (ui23 규격 48 대신 44: 패널 상단 보조 줄) */
  html body.wds .head_right_wrap > .m-menu-auth > a.js-login-only:first-of-type:not(#\#),
  html body.wds.is-logged-in .head_right_wrap > .m-menu-auth > a.js-logout-only[href*="/mypage"]:not(#\#) {
    background: var(--wds-primary);
    color: var(--wds-text-invert) !important;
  }
  html body.wds .head_right_wrap > .head_menu:not(#\#) { padding-top: var(--wds-1) !important; }

  /* ---- C-2. 메뉴 열림 시 배경 스크롤 잠금 + 퀵바·FAB 숨김.
          라이브 JS 는 body 에 클래스를 주지 않고 .head_right_wrap 에 .right0 만 토글 → :has() 로 CSS 만으로 처리.
          (iOS Safari 는 overflow:hidden 만으로는 완전히 안 잠기는 경우가 있음 → 설계노트 JS 3줄 제안 참조) ---- */
  html:has(body.wds .head_right_wrap.right0) { overflow: hidden !important; }
  html body.wds:has(.head_right_wrap.right0) { overflow: hidden !important; touch-action: none; }
  html body.wds:has(.head_right_wrap.right0) .head_right_wrap { touch-action: pan-y; }
  html body.wds:has(.head_right_wrap.right0) .quick_menu_wrap:not(#\#) { display: none !important; }
  html body.wds:has(.head_right_wrap.right0) a.wune-kakao-fab:not(#\#) { display: none !important; }
  /* 패널 높이: 헤더(60 기준) 아래 전체. 퀵바가 숨으므로 바닥 패딩 90 → 32 */
  html body.wds .head_right_wrap:not(#\#) { padding-bottom: var(--wds-6) !important; }

  /* ---- C-3. 햄버거 터치 40 → 44 (아이콘·간격은 그대로, 히트 영역만) ---- */
  html body.wds .menu__wrapper.m-hamburger:not(#\#) { width: 44px !important; height: 44px !important; margin: -2px !important; }
}