/* i18n-geo-mobile.css — common/include/i18n/header_i18n.php 에서 분리 (2026-09-05 테크니컬 P2, 인라인 14235자) */
@media (max-width: 768px) {
        .dn-geo-content { padding: 36px 0 !important; }
        .dn-geo-content .cont { padding: 0 16px !important; }
        .dn-geo-content__block { margin-bottom: 28px !important; padding: 22px 18px !important; }
        .dn-geo-content__block:last-child { margin-bottom: 0 !important; }
        .dn-geo-content__block > h2 {
            font-size: 19px !important;
            line-height: 1.45 !important;
            margin: 0 0 14px !important;
            word-break: keep-all;
        }
        .dn-geo-content__block > div[style*="display:grid"],
        .dn-geo-content__block > div[style*="display: grid"] {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 12px !important;
        }
        .dn-geo-content__block > div > div {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            padding: 18px 18px !important;
        }
        .dn-geo-content__block > div > div h3 {
            font-size: 16px !important;
            line-height: 1.4 !important;
            word-break: keep-all;
        }
        .dn-geo-content__block > div > div p,
        .dn-geo-content__block > div > div ul,
        .dn-geo-content__block > div > div li {
            font-size: 14px !important;
            line-height: 1.7 !important;
            word-break: keep-all;
            overflow-wrap: break-word;
        }
        .dn-geo-content__block details {
            padding: 14px 16px !important;
        }
        .dn-geo-content__block details summary {
            font-size: 14.5px !important;
            line-height: 1.5 !important;
        }
        .dn-geo-content__block details p {
            font-size: 13.5px !important;
        }
        .dn-geo-content,
        .dn-geo-content section,
        .dn-geo-content .cont {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }
        .dn-geo-content,
        .dn-geo-content * {
            writing-mode: horizontal-tb !important;
        }
    }
    /* CN 중국어 추가 보호 — 한자 단위 줄바꿈 방지 */
    html[lang|="zh"] .dn-geo-content,
    html[lang|="zh"] .dn-geo-content * {
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }

    /* ================================================================
       JP 모바일 UI 완성도 패치 (2026-05-19 user 강제 지시)
       - 모바일 헤더 바로 아래 hero 텍스트 붙음 문제 → padding-top 확보
       - 일본어 카드/박스 텍스트 잘림 → word-break: keep-all + overflow visible
       ================================================================ */
    @media (max-width: 768px) {
        /* Hero 상단 여백 확보 — 모든 hero 패턴 (fixed header + 24px 여유) */
        html[lang|="ja"] .dn-sub-hero,
        html[lang|="ja"] .dn-hero,
        html[lang|="ja"] .kbg-hero,
        html[lang|="ja"] .cc-hero,
        html[lang|="ja"] .mk-hero,
        html[lang|="ja"] .mv-hero,
        html[lang|="ja"] .br-hero,
        html[lang|="ja"] .bk-hero,
        html[lang|="ja"] [class$="-hero"],
        html[lang|="ja"] .cont_title_wrap {
            padding-top: 72px !important;
        }
        /* dn-sub-hero는 absolute-positioned text overlay 사용 — overlay에 top 여백 */
        html[lang|="ja"] .dn-sub-hero__text {
            padding-top: 56px !important;
        }
        /* 일본어 카드/박스 안 텍스트 잘림 방지 */
        html[lang|="ja"] [class*="-card"],
        html[lang|="ja"] [class*="dn-insight"],
        html[lang|="ja"] [class*="dn-implant"],
        html[lang|="ja"] [class*="dn-rv"],
        html[lang|="ja"] [class*="dn-testimonial"],
        html[lang|="ja"] [class*="dn-proc"],
        html[lang|="ja"] [class*="dn-related"],
        html[lang|="ja"] .kbg-section details,
        html[lang|="ja"] .cc-faq details,
        html[lang|="ja"] .mk-faq details,
        html[lang|="ja"] .mv-faq details,
        html[lang|="ja"] .br-faq details,
        html[lang|="ja"] .bk-faq details,
        html[lang|="ja"] .cont_list li,
        html[lang|="ja"] .cont_text_box,
        html[lang|="ja"] .info-box {
            height: auto !important;
            min-height: 0 !important;
            overflow: visible !important;
        }
        html[lang|="ja"] [class*="-card"] *,
        html[lang|="ja"] [class*="dn-insight"] *,
        html[lang|="ja"] [class*="dn-implant"] *,
        html[lang|="ja"] [class*="dn-rv"] *,
        html[lang|="ja"] [class*="dn-testimonial"] *,
        html[lang|="ja"] [class*="dn-proc"] *,
        html[lang|="ja"] [class*="dn-related"] *,
        html[lang|="ja"] .cont_list li *,
        html[lang|="ja"] .cont_text_box * {
            white-space: normal !important;
            word-break: keep-all !important;
            overflow-wrap: anywhere !important;
            line-height: 1.55;
        }
        /* 버튼/탭에서도 일본어 잘림 방지 */
        html[lang|="ja"] .dn-btn,
        html[lang|="ja"] button,
        html[lang|="ja"] .cc-cta__btn,
        html[lang|="ja"] .mk-cta__btn,
        html[lang|="ja"] .mv-cta__btn,
        html[lang|="ja"] .br-cta__btn,
        html[lang|="ja"] .bk-cta__btn {
            white-space: normal !important;
            word-break: keep-all !important;
            overflow-wrap: anywhere !important;
            height: auto !important;
            min-height: 0 !important;
        }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
        /* 태블릿 hero 상단 여백 80px */
        html[lang|="ja"] .dn-sub-hero,
        html[lang|="ja"] .dn-hero,
        html[lang|="ja"] .kbg-hero,
        html[lang|="ja"] [class$="-hero"],
        html[lang|="ja"] .cont_title_wrap {
            padding-top: 80px !important;
        }
    }

    /* ================================================================
       JP 모바일 UI 추가 패치 #2 (2026-05-19 user 강제 지시)
       #3 카드 fixed height 제거 + 제목/설명 gap + CTA min-height 48px
       #4 일본어 줄바꿈 최적화 (body 전체)
       #5 모바일 좌우 흔들림 방지 (overflow-x + media max-width)
       ================================================================ */
    /* #4. JP 전체 body 줄바꿈 최적화 — 영문 제품명·URL은 overflow-wrap:anywhere로 화면 밖 밀림 방지 */
    html[lang|="ja"] body {
        word-break: keep-all;
        overflow-wrap: anywhere;
        line-break: strict;
    }

    @media (max-width: 768px) {
        /* #5. 모바일 좌우 흔들림 방지 — JP 사이트만 */
        html[lang|="ja"],
        html[lang|="ja"] body {
            overflow-x: hidden !important;
        }
        html[lang|="ja"] img,
        html[lang|="ja"] video,
        html[lang|="ja"] iframe,
        html[lang|="ja"] table,
        html[lang|="ja"] [class*="slider"],
        html[lang|="ja"] [class*="swiper"],
        html[lang|="ja"] [class*="carousel"],
        html[lang|="ja"] [class*="dn-cards"],
        html[lang|="ja"] [class*="dn-rv__"] {
            max-width: 100% !important;
        }
        /* 슬라이더 width:100vw 사용 시 부모 padding과 충돌 방지 */
        html[lang|="ja"] [class*="slider"][style*="100vw"],
        html[lang|="ja"] [class*="swiper"][style*="100vw"] {
            width: 100% !important;
            max-width: 100% !important;
        }

        /* #3. 카드 fixed height 제거 (이미 follow-up #5에서 일부 적용됨) — 보강 */
        html[lang|="ja"] [class*="dn-timeline"],
        html[lang|="ja"] [class*="dn-recovery"],
        html[lang|="ja"] [class*="dn-step"],
        html[lang|="ja"] [class*="dn-event"],
        html[lang|="ja"] [class*="-faq-item"],
        html[lang|="ja"] [class*="dn-method"],
        html[lang|="ja"] [class*="dn-placement"],
        html[lang|="ja"] details[open],
        html[lang|="ja"] details {
            height: auto !important;
            min-height: 0 !important;
            overflow: visible !important;
        }

        /* 카드 내부 제목과 설명 사이 8~12px 간격 + 적정 line-height */
        html[lang|="ja"] [class*="-card"] h2,
        html[lang|="ja"] [class*="-card"] h3,
        html[lang|="ja"] [class*="-card"] h4,
        html[lang|="ja"] [class*="dn-insight"] h2,
        html[lang|="ja"] [class*="dn-insight"] h3,
        html[lang|="ja"] [class*="dn-implant"] h2,
        html[lang|="ja"] [class*="dn-implant"] h3,
        html[lang|="ja"] [class*="__title"]:not(h1):not(.dn-hero__title) {
            margin-bottom: 10px !important;
            line-height: 1.4 !important;
        }
        html[lang|="ja"] [class*="-card"] p,
        html[lang|="ja"] [class*="dn-insight"] p,
        html[lang|="ja"] [class*="dn-implant"] p,
        html[lang|="ja"] [class*="__desc"],
        html[lang|="ja"] [class*="__subtitle"] {
            line-height: 1.6 !important;
        }

        /* #7. CTA 버튼 최소 높이 48px (접근성 + 일본어 2줄 대응) */
        html[lang|="ja"] .dn-btn,
        html[lang|="ja"] .cc-cta__btn,
        html[lang|="ja"] .mk-cta__btn,
        html[lang|="ja"] .mv-cta__btn,
        html[lang|="ja"] .br-cta__btn,
        html[lang|="ja"] .bk-cta__btn,
        html[lang|="ja"] .kbg-cta__btn,
        html[lang|="ja"] [class*="cta__btn"],
        html[lang|="ja"] button[type="submit"],
        html[lang|="ja"] a.dn-btn,
        html[lang|="ja"] .head-cta-btn {
            min-height: 48px !important;
            height: auto !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding-top: 12px !important;
            padding-bottom: 12px !important;
            line-height: 1.4 !important;
            white-space: normal !important;
            word-break: keep-all !important;
            overflow-wrap: anywhere !important;
        }

        /* 수직 중앙 정렬 카드(/jp/breast/nipple/ 등)의 텍스트 잘림 제거 */
        html[lang|="ja"] [class*="-card"][style*="align-items: center"],
        html[lang|="ja"] [class*="-card"][style*="justify-content: center"],
        html[lang|="ja"] [class*="dn-implant-panel"] {
            align-items: flex-start !important;
            justify-content: flex-start !important;
        }
    }

    /* ================================================================
       JP 모바일 상단 잘림 종합 수정 (2026-05-19 follow-up #7 user 강제 지시)
       fixed header + anchor scroll + hero transform + overflow hidden + iOS
       safe-area + 100vh + margin collapse 종합 해결.
       JS로 실제 헤더 높이를 측정해서 --jp-header-height CSS 변수에 주입.
       ================================================================ */
    html[lang|="ja"] {
        /* JS가 더 정확한 값을 setProperty()로 덮어씀 (fallback 88px) */
        --jp-header-height: 88px;
        scroll-padding-top: var(--jp-header-height);
    }
    html[lang|="ja"] section,
    html[lang|="ja"] [id]:not(html):not(body),
    html[lang|="ja"] h1,
    html[lang|="ja"] h2,
    html[lang|="ja"] h3,
    html[lang|="ja"] .anchor-target,
    html[lang|="ja"] [class*="-faq"] details,
    html[lang|="ja"] [class*="-toc"],
    html[lang|="ja"] [class*="-tab"],
    html[lang|="ja"] [data-scroll-section] {
        scroll-margin-top: var(--jp-header-height);
    }

    @media (max-width: 768px) {
        html[lang|="ja"] {
            --jp-header-height: 72px;
        }
        /* Hero — safe-area-inset-top + overflow:visible (잘린 부분 노출) */
        html[lang|="ja"] .dn-hero,
        html[lang|="ja"] .dn-sub-hero,
        html[lang|="ja"] .kbg-hero,
        html[lang|="ja"] .cc-hero,
        html[lang|="ja"] .mk-hero,
        html[lang|="ja"] .mv-hero,
        html[lang|="ja"] .br-hero,
        html[lang|="ja"] .bk-hero,
        html[lang|="ja"] [class$="-hero"] {
            padding-top: calc(var(--jp-header-height) + env(safe-area-inset-top, 0px)) !important;
            overflow: visible !important;
        }
        /* Hero 자식 transform 비활성화 (모바일 translateY 충돌로 인한 상단 잘림 방지) */
        html[lang|="ja"] .dn-hero *,
        html[lang|="ja"] .dn-sub-hero *,
        html[lang|="ja"] [class$="-hero"] * {
            transform: none !important;
        }
        /* 100vh 사용 시 iOS Safari 주소창 변동으로 상단 잘림 → 100svh로 대체 */
        html[lang|="ja"] [class*="hero"][style*="100vh"],
        html[lang|="ja"] [class*="fullscreen"],
        html[lang|="ja"] .dn-hero {
            min-height: 100svh;
            height: auto;
        }
        /* margin collapse 방지 — content-wrap 첫 자식 margin이 부모 밖으로 빠지는 현상 */
        html[lang|="ja"] .content_wrap,
        html[lang|="ja"] main {
            display: flow-root;
        }
        /* iOS safe-area-inset-top — viewport-fit=cover 또는 PWA에서만 효과,
           일반 페이지에서는 0px이라 무해 */
        html[lang|="ja"] body {
            padding-top: env(safe-area-inset-top, 0px);
        }
    }

    /* ================================================================
       2026-06-08 JP 상세페이지 dn- 컴포넌트 모바일 일괄 통일 (KR 기준) — 근본수정
       위 광역 셀렉터 [class*="dn-insight"]/[class*="dn-implant"] {overflow:visible; height:auto}
       가 가로 스크롤 트랙·보형물 영상 박스까지 덮고, [class$="-hero"] 헤더여백 padding이
       dn-sub-hero(상세 hero)에도 중복 적용됨 → 구조 요소만 KR·base 값으로 복구.
       (CN은 정확한 클래스명만 타겟해 안 깨짐 — 동일 취지)
       대상: augmentation/nipple/reduction/reoperation/sagging/wune 등 dn-sub-hero 상세페이지. */
    @media (max-width: 768px) {
        /* #1 Insight 슬라이더 — 가로 스크롤(스와이프)·좌우 화살표 복구 (트랙만) */
        html[lang|="ja"] .dn-insight-slider .dn-insight-track {
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch;
        }
        /* #2 보형물 영상 — KR과 동일하게 박스 클리핑 복구 (letterbox iframe 잘림) */
        html[lang|="ja"] .dn-implant-panel .dn-implant-panel__video {
            height: 100% !important;
            overflow: hidden !important;
        }
        /* #3 dn-sub-hero(상세 hero) — KR과 동일한 깔끔한 중앙정렬 (중복 padding/이미지 넘침 제거).
           헤더 여백은 content_wrap이 이미 처리 → 상세 hero엔 padding 불필요. 홈/기타 -hero는 유지. */
        html[lang|="ja"] .content_wrap .dn-sub-hero {
            padding-top: 0 !important;
            overflow: hidden !important;
        }
        html[lang|="ja"] .content_wrap .dn-sub-hero__text {
            padding-top: 80px !important;
        }
        /* hero 이미지 — JP 전역 img{height:auto}가 가로형 hero 이미지를 박스높이 못채우게 해
           하단 검은 여백 생김(예: nipple). cover 강제로 KR과 동일하게 박스 꽉 채움. */
        html[lang|="ja"] .content_wrap .dn-sub-hero img {
            height: 100% !important;
            object-fit: cover !important;
        }
    }