/* =============================================================================
   JP 사이트 (lang=ja, ja-JP) 전용 타이포그래피·내부링크 일관성
   2026-08-07 — 기준: 한국어 페이지 디자인

   셀렉터 전략: html[lang|="ja"] — ja / ja-JP 모두 매칭. KR/EN/CN/TH 영향 0.
   로드 순서: combined.min.css → (cn-mobile / en-typography) → jp-mobile.css
             즉 이 파일이 마지막이므로 base 는 !important 없이 덮인다.
             단 JP 페이지 본문에 인라인 style 로 박힌 컴포넌트
             (.jp-related-columns 등)는 !important 가 필요하다.

   측정 근거 (2026-08-07, 375px 모바일 실측):
     · KR /breast/augmentation/ 과 /jp/breast/augmentation/ 계산값 대조
     · 실제 텍스트 겹침 0건 / 가로 넘침 0건 → 레이아웃 재배치는 하지 않는다
     · KR 과 동일한 값인 공유 컴포넌트(.dn-view-more-btn 12.3px,
       .dn-sub-hero__eyebrow 10.2px, .dn-insight-card__desc 12.3px)는 건드리지 않는다
   ============================================================================= */

/* =============================================================================
   §1. 폰트 — Noto Sans JP 복원 + 중국어(SC) 폰트 혼입 차단
   combined.min.css 는 html[lang|="ja"] 에 Noto Sans JP 를 지정하지만,
   header_i18n.php 의 html[lang|="ja"] body{font-family:'Pretendard',... !important}
   가 이를 덮어써 일본어 페이지가 한국어 폰트로 렌더링되고 있었다.
   ============================================================================= */
html[lang|="ja"] body,
html[lang|="ja"] textarea,
html[lang|="ja"] button,
html[lang|="ja"] input,
html[lang|="ja"] select {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic',
               'Meiryo', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* 일본어 페이지에 간체 중국어 폰트가 지정돼 있던 블록들 교정
   (SC 폰트는 한자 자형이 일본 상용한자와 달라 일본인 독자에게 이질적으로 보인다) */
html[lang|="ja"] .gmarket,
html[lang|="ja"] .btn_more,
html[lang|="ja"] .text.text1,
html[lang|="ja"] .text_wrap .text,
html[lang|="ja"] .minutes06 .cont_gallery_list_box .text_wrap .text,
html[lang|="ja"] .answer-summary p {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic',
               'Meiryo', sans-serif !important;
}
html[lang|="ja"] .answer-summary h2 {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif !important;
}

/* =============================================================================
   §2. 자간 — 일본어 양수 트래킹 제거
   combined.min.css: html[lang|="ja"] p,li,dd { letter-spacing:0.01em }
                     html[lang|="ja"] h1~h5   { letter-spacing:0.02em }
   → 실측 결과 JP 는 양수 97 / 음수 5, KR 은 normal 127 / 양수 33 / 음수 37.
     일본어는 글자폭이 이미 전각이라 양수 트래킹이 붙으면 성기고 산만해 보인다.
     KR 과 같은 방향(0 ~ 소폭 음수)으로 통일한다.
   ============================================================================= */
html[lang|="ja"] p,
html[lang|="ja"] li,
html[lang|="ja"] dd,
html[lang|="ja"] dt,
html[lang|="ja"] td,
html[lang|="ja"] th,
html[lang|="ja"] span,
html[lang|="ja"] div {
  letter-spacing: 0;
}
html[lang|="ja"] h1,
html[lang|="ja"] h2,
html[lang|="ja"] h3,
html[lang|="ja"] h4,
html[lang|="ja"] h5,
html[lang|="ja"] h6 {
  letter-spacing: -0.01em;
}
/* 영문 라벨류(EYEBROW/BRAND 등 대문자 조판)는 트래킹이 의도된 디자인 — 유지 */
html[lang|="ja"] .dn-label,
html[lang|="ja"] .dn-sub-hero__eyebrow,
html[lang|="ja"] .dn-view-more-btn,
html[lang|="ja"] .ev_viewmore,
html[lang|="ja"] [class*="__eyebrow"] {
  letter-spacing: 0.12em;
}

/* =============================================================================
   §3. 제목 크기 체계 — KR 스케일 미러링
   ⚠️ KR 은 홈과 서브페이지에서 .dn-heading 을 서로 다르게 쓴다.
      · KR 홈    : 섹션 컨테이너(.dn-procedures/.dn-cards/...) 하위만 26px/w700 (모바일)
      · KR 서브 : .dn-heading 은 17.25px/w300 그대로  ← 여기까지 키우면 KR 과 어긋난다
      따라서 KR home.php 의 셀렉터 목록을 그대로 미러링하고, 그 밖의 제목은 건드리지 않는다.
   ============================================================================= */
@media (max-width: 768px) {
  /* 페이지 최상단 H1 — KR: 33px / w300 */
  html[lang|="ja"] h1,
  html[lang|="ja"] .dn-sub-hero__title,
  html[lang|="ja"] .dn-hero__heading {
    font-size: 33px;
    line-height: 1.24;
    font-weight: 300;
  }

  /* 홈 섹션 제목 — KR home.php 와 동일한 셀렉터·값 (모바일 26px / w700 / lh 1.35) */
  html[lang|="ja"] .dn-procedures .dn-heading,
  html[lang|="ja"] .dn-cards .dn-heading,
  html[lang|="ja"] .dn-articles .dn-heading,
  html[lang|="ja"] .dn-testimonials .dn-heading,
  html[lang|="ja"] .dn-realreview .dn-heading,
  html[lang|="ja"] .main_03 .dn-heading,
  html[lang|="ja"] .main_shorts .dn-heading,
  /* JP 홈 전용 섹션 (KR 에 대응 섹션이 없어 KR 셀렉터 목록에 없던 것들) */
  html[lang|="ja"] .dn-whyune .dn-heading,
  html[lang|="ja"] .dn-guarantee .dn-heading,
  html[lang|="ja"] .dn-faq__title {
    margin: 0 0 26px !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.03em !important;
    color: #1a0d03 !important;
    text-align: left !important;
  }

  /* 서브페이지 h3 — KR: 19.5px / w700 */
  html[lang|="ja"] .cont h3 {
    font-size: 19.5px;
    font-weight: 700;
    line-height: 1.4;
  }

  /* KR 이 w500 인데 JP 만 w300 이던 항목 */
  html[lang|="ja"] .dn-natural-results__heading {
    font-weight: 500;
  }

  /* 본문 — KR: 15.75px / lh 1.8 */
  html[lang|="ja"] .cont p,
  html[lang|="ja"] .dn-geo-content p {
    font-size: 15.75px;
    line-height: 1.8;
  }
}

/* =============================================================================
   §4. 카드 내부 line-height 전역 강제 해제
   header_i18n.php 가 [class*="-card"] * 등 모든 자손에 line-height:1.55 를 걸어
   제목과 본문이 같은 리듬으로 눌려 위계가 사라져 있었다.
   제목은 1.35, 본문은 1.75 로 분리한다.
   ============================================================================= */
@media (max-width: 768px) {
  html[lang|="ja"] [class*="-card"] [class*="__title"],
  html[lang|="ja"] [class*="-card"] h2,
  html[lang|="ja"] [class*="-card"] h3,
  html[lang|="ja"] [class*="-card"] h4,
  html[lang|="ja"] [class*="dn-related"] [class*="__title"],
  html[lang|="ja"] [class*="dn-insight"] [class*="__title"] {
    line-height: 1.38 !important;
  }
  html[lang|="ja"] [class*="-card"] p,
  html[lang|="ja"] [class*="dn-insight"] p,
  html[lang|="ja"] [class*="dn-implant"] p {
    line-height: 1.75 !important;
  }
}

/* =============================================================================
   §5. 내부링크 — KR 디자인 이식
   ============================================================================= */

/* ── 5-1. 시술 상세 하단 「関連ページ」 (.dn-related)
        KR 대응: .wune-related  (aside → 제목 + 링크박스 리스트)
        KR 스펙: link padding 12px 14px / bg #FFFDF9 / name 13.5px w700 / gap 4 ── */
html[lang|="ja"] .dn-related {
  margin: 40px 0 20px;
  padding: 28px 16px;
  background: transparent;
}
html[lang|="ja"] body .dn-related .dn-label {
  display: block !important;
  margin: 0 0 14px !important;
  font-size: 12px !important;   /* KR .dn-label 과 동일 */
  font-weight: 600 !important;
  line-height: 1.6 !important;
  color: #6B5240 !important;
  letter-spacing: 0.12em !important;
}
html[lang|="ja"] .dn-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[lang|="ja"] .dn-related__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
html[lang|="ja"] body .dn-related .dn-related__item > a {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;   /* 탭 타깃 확보 */
  padding: 12px 14px !important;
  background: #FFFDF9 !important;
  color: #2C1A0E !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}
html[lang|="ja"] body .dn-related .dn-related__item > a:hover {
  background: #F7EFE5 !important;
  color: #704526 !important;
}

/* ── 5-2. 「豊胸に関するコラム」 (.jp-related-columns)
        KR 대응: .breast-related-posts (섹션 제목 24 w700 + 흰 카드 grid gap14)
        JP 마크업이 전부 인라인 style 이라 !important 필요 ── */
html[lang|="ja"] .jp-related-columns {
  margin: 64px auto 20px !important;
  padding: 0 20px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
html[lang|="ja"] .jp-related-columns > h2 {
  margin: 0 0 16px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  color: #222 !important;
}
html[lang|="ja"] .jp-related-columns > ul {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html[lang|="ja"] .jp-related-columns > ul > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html[lang|="ja"] .jp-related-columns > ul > li > a {
  display: block !important;
  padding: 20px 18px !important;
  background: #fff !important;
  color: #222 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}
html[lang|="ja"] .jp-related-columns > ul > li > a:hover {
  background: #FFFDF9 !important;
  color: #704526 !important;
}

/* ── 5-3. 블로그 리스트 카드 (.jp-blog-card)
        KR 대응: .blog-card__*  (cat 12.5 w600 / title 18 w700 ls-0.18 / summary 14.5 w300)
        JP 는 이미 근접 — 자간 방향·그리드 간격·카테고리 표현만 KR 로 맞춘다 ── */
html[lang|="ja"] body .blog-grid.jp-blog-list {
  gap: 24px !important;   /* KR .blog-grid 과 동일 */
}
html[lang|="ja"] .jp-blog-card {
  letter-spacing: 0;
}
html[lang|="ja"] .jp-blog-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  margin-bottom: 12px;
}
html[lang|="ja"] body .jp-blog-card .jp-blog-card__excerpt {
  font-size: 14.5px !important;   /* .cont p (0,2,2) 보다 특이도가 높아야 한다 */
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: #777 !important;
}
html[lang|="ja"] .jp-blog-card__category {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #B5895A;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
html[lang|="ja"] .jp-blog-card__date {
  font-size: 12.5px;
  color: #999;
}
html[lang|="ja"] .jp-blog-card__more {
  font-size: 13.5px;
  font-weight: 700;
  color: #704526;
}

/* ── 5-4. 홈 관련 카드 (.dn-related-blog) — 타이포만 KR 위계로 ── */
@media (max-width: 768px) {
  html[lang|="ja"] .dn-related-blog__heading {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #6B5240;
  }
  html[lang|="ja"] .dn-related-blog__link {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: #222;
  }
  html[lang|="ja"] .dn-related-blog__sub {
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.75;
    color: #666;
  }
}

/* =============================================================================
   §6. 버튼 — JP 에서만 과도하게 작았던 항목 보정
   (KR 과 동일 값인 .dn-view-more-btn 12.3px / .ev_viewmore 12px 는 유지)
   ============================================================================= */
@media (max-width: 768px) {
  /* JP 서브히어로 CTA 가 10.8px 까지 줄어 있었다 → 13px + 탭 타깃 44px */
  html[lang|="ja"] .dn-btn,
  html[lang|="ja"] .dn-btn--filled,
  html[lang|="ja"] .dn-hero__cta-btn {
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* KR 은 15px 인데 JP 만 12.3px 이던 항목 */
  html[lang|="ja"] .dn-outline-btn {
    font-size: 13px !important;
  }
  /* 시술 방법 카드 설명 11.7px → 본문 하한 13px
     (JP 페이지 본문의 인라인 <style> 이 문서상 이 파일보다 뒤에 오므로 특이도를 올린다) */
  html[lang|="ja"] body .dn-implant-method__desc,
  html[lang|="ja"] body [class*="dn-implant"] .dn-implant-method__desc {
    font-size: 13.125px !important;   /* KR 과 동일 */
    line-height: 1.7 !important;
  }
  /* 푸터 JP 키워드 줄 11.5px → 12.5px (footer_i18n.php 인라인 0,3,1 !important 를 이겨야 함) */
  html[lang|="ja"] body .dn-footer__mobile .dn-footer__mobile-jp-keywords,
  html[lang|="ja"] body .dn-footer .dn-footer__mobile-jp-keywords {
    font-size: 12.5px !important;
    line-height: 1.7 !important;
  }
}

/* =============================================================================
   §7. 일본어 줄바꿈 — 기존 정책 유지·보강
   keep-all 은 일본어에서 문절이 통째로 밀려 우측 여백이 크게 뜨는 원인이 된다.
   일본어는 금칙처리(line-break: strict)에 맡기는 것이 표준이다.
   ============================================================================= */
html[lang|="ja"] body {
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
@media (max-width: 768px) {
  html[lang|="ja"] [class*="-card"] *,
  html[lang|="ja"] [class*="dn-insight"] *,
  html[lang|="ja"] [class*="dn-implant"] *,
  html[lang|="ja"] [class*="dn-related"] *,
  html[lang|="ja"] .cont_list li *,
  html[lang|="ja"] .cont_text_box * {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict;
  }
}

/* =============================================================================
   §8. /jp/enlargement/minutes/ (27分豊胸) — KR 과 동일 렌더링 복원
   원인: header_i18n.php L1608~1622 의 minutes 전용 가드가
         html[lang|="ja"] .minutes-page [class*="cont_flex"] { overflow: visible !important }
         로 걸려 있어, combined.min.css 의 li.img_wrap{overflow:hidden!important} 를 뒤집었다.
         → li.cont_flex1_5.img_wrap 은 flex-basis:0 로 높이가 0 인데 overflow 만 visible 이 되어
           안쪽 464px 논문 이미지(27min-chapter-09)가 통째로 흘러넘쳐 다음 캡션을 덮었다.
   KR 실측: li.img_wrap 7개 전부 overflow:hidden / .cont padding 0 28px / 이미지 폭 319px
   JP 실측(수정 전): li.img_wrap overflow:visible / .cont padding 0 6px / 이미지 폭 363px
   ============================================================================= */
@media (max-width: 768px) {
  /* ① 이미지 래퍼 클리핑 복원 — 논문 이미지 겹침 + 하단 recovery 5개 동일 문제 해소
     경쟁 규칙: 페이지 본문 인라인의
       html[lang|="ja"] .minutes-page .minutes03 .cont_list ul li { overflow:visible!important }  = (0,4,3)
     이 파일보다 문서상 뒤이므로 순서로는 못 이긴다 → 특이도를 (0,5,4) 까지 올린다. */
  html[lang|="ja"] body .minutes-page .minutes03 .cont_list ul li.img_wrap,
  html[lang|="ja"] body .minutes-page .cont_list ul li.img_wrap,
  html[lang|="ja"] body .minutes-page ul li.img_wrap,
  html[lang|="ja"] body .minutes-page li.img_wrap,
  html[lang|="ja"] body .minutes-page [class*="cont_flex"].img_wrap {
    overflow: hidden !important;
  }

  /* ② 본문 좌우 여백 KR 과 동일하게 — 이미지 크기가 KR 과 같아진다
     KR: .minutes_wrap .cont { padding: 0 28px !important }  (모바일)
     JP: 인라인 패치가 40→32→20→16→10→6px 로 누적 오버라이드 중 (최종 6px)
     경쟁 최고 특이도 html[lang|="ja"] .minutes_wrap .cont_box1 .cont = (0,4,1) → (0,5,2) 로 넘긴다. */
  html[lang|="ja"] body .minutes-page .minutes_wrap .cont_box1 .cont,
  html[lang|="ja"] body .minutes-page .minutes_wrap .cont,
  html[lang|="ja"] body .minutes-page .cont {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* ③ 5개 회복 블록의 이미지/텍스트 순서 — KR 과 동일하게 복원
     원인: html[lang|="ja"] .minutes-page .minutes03 .cont_list ul { display:block !important } (페이지 인라인)
           이 flex 를 죽여, 이미지 li 의 order:-1 이 무시됐다.
           → DOM 순서가 [텍스트, 이미지] 인 2·4번 블록에서 JP 만 글자→이미지로 뒤집혀 있었다.
     KR: ul = display:flex / flex-direction:column → order:-1 이 살아 이미지가 항상 위. */
  html[lang|="ja"] body .minutes-page .minutes03 .cont_list ul.align_center,
  html[lang|="ja"] body .minutes-page .minutes03 .cont_list ul {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ④ 카드 안쪽 여백 — JP 에만 붙어 글자가 좁게 몰리던 패딩 제거 (KR 값 복원)
     KR: .minutes08_cont > .cont_list > ul > li { padding: 15px 0 }
         .minutes09 .cont_flex ul li { padding: 0 } */
  html[lang|="ja"] body .minutes-page .minutes08_cont > .cont_list ul li {
    padding: 15px 0 !important;
  }
  html[lang|="ja"] body .minutes-page .minutes09 .cont_flex ul li {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ⑤ 원장 논문 이미지(27min-chapter-09) — 사용자 요청으로 KR 과 달리 "보이게" 한다.
     KR 은 이 li 가 flex-basis:0 이라 높이 0 으로 접혀 모바일에서 표시되지 않는다(잠재 버그).
     JP 는 내용 높이만큼 커지게 해서 이미지 전체가 보이고 캡션과 겹치지 않도록 한다.
     li.img_wrap 의 aspect-ratio:4/5 (combined.min.css) 때문에 이미지가 23px 넘치던 것도 함께 해소. */
  html[lang|="ja"] body .minutes-page ul.align_center > li.cont_flex1_5.img_wrap {
    flex: 0 0 auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
  }
  html[lang|="ja"] body .minutes-page ul.align_center > li.cont_flex1_5.img_wrap > img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* =============================================================================
   §9. minutes 섹션별 타이포 — KR 실측값 1:1 미러링 (2026-08-07)
   KR/JP 를 섹션(.minutes0X) 단위로 계산값 대조해 어긋난 항목만 맞춘다.
     minutes01 .cont_text        KR 12.3/w800/pad13 25   ← JP 15/w800/pad8 14
     minutes02 .cont_title       KR 14.25/w700           ← JP 22.5/w700
     minutes03/06/08 .cont_title KR 18.75/w700           ← JP 21/w700
     .cont_text 굵기             KR w400                 ← JP w300  (minutes01 은 w800 로 양쪽 동일 → 제외)
     minutes09 .cont_text        KR 11.7                 ← JP 12.75
     minutes09 .cont_text_title  KR 12.3/center/pad16 20 ← JP 14.25/left/pad14 12
   ============================================================================= */
@media (max-width: 768px) {
  /* 본문 굵기 (minutes01 의 w800 라벨은 제외) */
  html[lang|="ja"] body .minutes-page .minutes02 .cont_text,
  html[lang|="ja"] body .minutes-page .minutes03 .cont_text,
  html[lang|="ja"] body .minutes-page .minutes06 .cont_text,
  html[lang|="ja"] body .minutes-page .minutes08 .cont_text,
  html[lang|="ja"] body .minutes-page .minutes08_cont .cont_text,
  html[lang|="ja"] body .minutes-page .minutes09 .cont_text {
    font-weight: 400 !important;
  }

  /* 섹션 제목 크기 */
  html[lang|="ja"] body .minutes-page .minutes02 .cont_title {
    font-size: 14.25px !important;
  }
  html[lang|="ja"] body .minutes-page .minutes03 .cont_title,
  html[lang|="ja"] body .minutes-page .minutes06 .cont_title,
  html[lang|="ja"] body .minutes-page .minutes08 .cont_title {
    font-size: 18.75px !important;
  }

  /* minutes01 상단 라벨
     경쟁: html[lang|="ja"] .minutes-page .minutes01 .cont_list ul li .cont_text = (0,5,3)
     → 같은 경로에 body 를 더해 (0,5,4) 로 넘긴다. */
  html[lang|="ja"] body .minutes-page .minutes01 .cont_list ul li .cont_text,
  html[lang|="ja"] body .minutes-page .minutes01 .cont_text {
    font-size: 12.3px !important;
    padding: 13px 25px !important;
  }

  /* minutes09 — 원장 논문 캡션 */
  html[lang|="ja"] body .minutes-page .minutes09 .cont_text {
    font-size: 11.7px !important;
  }
  html[lang|="ja"] body .minutes-page .minutes09 .cont_text_title {
    font-size: 12.3px !important;
    text-align: center !important;
    padding: 16px 20px !important;
  }
  /* .txt_box 좌우 margin 6px 때문에 KR(319w)보다 12px 좁았다 */
  html[lang|="ja"] body .minutes-page .minutes09 .txt_box {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}