/* =============================================================================
   EN 사이트 (lang=en, en-US, en-GB 등) 전용 모바일 타이포그래피·레이아웃 일관성
   2026-06-03 사용자 사양서(13개 규칙) 적용
   셀렉터 전략: html[lang|="en"] — en, en-US, en-GB 등 모든 EN 변종 매칭
                KR/JP/CN 영향 0
   ============================================================================= */

/* ---------- 1. 모바일 기준 공통 폰트 크기 체계 (base) ---------- */
html[lang|="en"] {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* CSS 변수 토큰 */
  --en-font-body-mobile: 17px;
  --en-font-small-mobile: 14.5px;
  --en-font-h1-mobile: clamp(32px, 8.4vw, 42px);
  --en-font-h2-mobile: clamp(25px, 6.4vw, 32px);
  --en-font-h3-mobile: clamp(21px, 5.2vw, 26px);
  --en-line-body: 1.68;
}
html[lang|="en"] body {
  font-size: 17px;
  line-height: 1.68;
  letter-spacing: -0.005em;
  color: #222;
}

/* ---------- 6. 영문 줄바꿈 (전역 base — 데스크탑 기본) ---------- */
html[lang|="en"] {
  word-break: normal;
  overflow-wrap: anywhere;
}
html[lang|="en"] h1,
html[lang|="en"] h2,
html[lang|="en"] h3,
html[lang|="en"] p,
html[lang|="en"] li {
  word-break: normal;
  overflow-wrap: break-word;
}

/* =============================================================================
   📐 모바일 줄바꿈: 단어 단위 → 글자 단위 (2026-06-03 사용자 사양서 v2)
   목적: 영문 모바일에서 단어 단위 줄바꿈으로 생기는 어색한 우측 빈공간 제거,
        문장 흐름을 조밀하고 안정적으로 보이게.
   적용: 모든 텍스트 요소(*)에 break-all + anywhere + normal.
   예외: tel/phone(짧음, 잘리면 X), 인라인 nowrap 의도 요소.
        email/URL은 break-all로 잘리되 nowrap은 X (긴 URL이 화면 넘침 방지).
   ============================================================================= */
@media (max-width: 768px) {
  html[lang|="en"] *,
  html[lang|="en"] body * {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
  }
  /* 핵심 컨테이너에 명시 (이전 적용한 word-break:normal 인라인/CSS 덮어쓰기) */
  html[lang|="en"] h1,
  html[lang|="en"] h2,
  html[lang|="en"] h3,
  html[lang|="en"] h4,
  html[lang|="en"] h5,
  html[lang|="en"] h6,
  html[lang|="en"] p,
  html[lang|="en"] li,
  html[lang|="en"] span,
  html[lang|="en"] a,
  html[lang|="en"] button,
  html[lang|="en"] .btn,
  html[lang|="en"] .cta,
  html[lang|="en"] .button,
  html[lang|="en"] a[class*="btn"],
  html[lang|="en"] a[class*="cta"],
  html[lang|="en"] .hero-title,
  html[lang|="en"] .page-title,
  html[lang|="en"] .section-title,
  html[lang|="en"] .sub-title,
  html[lang|="en"] .card-title,
  html[lang|="en"] .card-desc,
  html[lang|="en"] .faq-question,
  html[lang|="en"] .faq-answer,
  html[lang|="en"] .blog-content,
  html[lang|="en"] .blog-content p,
  html[lang|="en"] .blog-detail-title,
  html[lang|="en"] article,
  html[lang|="en"] article *,
  html[lang|="en"] .card,
  html[lang|="en"] .card *,
  html[lang|="en"] .faq,
  html[lang|="en"] .faq *,
  html[lang|="en"] .accordion,
  html[lang|="en"] .accordion *,
  html[lang|="en"] footer,
  html[lang|="en"] footer *,
  html[lang|="en"] .footer,
  html[lang|="en"] .footer * {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
  /* 버튼 텍스트가 화면 밖으로 안 나가게 + 가운데 정렬 */
  html[lang|="en"] .btn,
  html[lang|="en"] .button,
  html[lang|="en"] .cta,
  html[lang|="en"] a[class*="btn"],
  html[lang|="en"] a[class*="button"],
  html[lang|="en"] a[class*="cta"] {
    text-align: center !important;
  }

  /* ─── 예외 처리 ─── */
  /* 전화번호·짧은 nowrap 의도 요소는 한 줄 유지 */
  html[lang|="en"] .tel,
  html[lang|="en"] .phone,
  html[lang|="en"] a[href^="tel:"],
  html[lang|="en"] .business-number,
  html[lang|="en"] .nowrap {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
  }
  /* 이메일·URL은 길어 화면 넘침 방지: 글자단위 줄바꿈 허용(nowrap 금지) */
  html[lang|="en"] .email,
  html[lang|="en"] .url,
  html[lang|="en"] a[href^="mailto:"],
  html[lang|="en"] a[href^="http"]:not([class*="btn"]):not([class*="cta"]):not([class*="button"]) {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
}

/* =============================================================================
   모바일 ≤768px — 메인 규칙 (사양서 2~11번)
   ============================================================================= */
@media (max-width: 768px) {

  /* 2. Heading scale 통일 */
  html[lang|="en"] h1,
  html[lang|="en"] .page-title,
  html[lang|="en"] .hero-title {
    font-size: clamp(32px, 8.4vw, 42px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    font-weight: 600 !important;
  }
  html[lang|="en"] h2,
  html[lang|="en"] .section-title {
    font-size: clamp(25px, 6.4vw, 32px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.03em !important;
    font-weight: 600 !important;
  }
  html[lang|="en"] h3,
  html[lang|="en"] .sub-title,
  html[lang|="en"] .card-title {
    font-size: clamp(21px, 5.2vw, 26px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    font-weight: 600 !important;
  }
  html[lang|="en"] h4,
  html[lang|="en"] .small-title {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  /* 3. 본문·설명문·FAQ 글자 크기 통일 */
  html[lang|="en"] p,
  html[lang|="en"] li,
  html[lang|="en"] .body-text,
  html[lang|="en"] .section-desc,
  html[lang|="en"] .page-desc,
  html[lang|="en"] .card-desc,
  html[lang|="en"] .faq-answer,
  html[lang|="en"] .blog-content,
  html[lang|="en"] .blog-content p {
    font-size: 17px !important;
    line-height: 1.68 !important;
    letter-spacing: -0.005em;
  }
  html[lang|="en"] .caption,
  html[lang|="en"] .eyebrow,
  html[lang|="en"] .meta,
  html[lang|="en"] .date,
  html[lang|="en"] .category {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  /* FAQ 질문 강조 */
  html[lang|="en"] .faq-question,
  html[lang|="en"] .faq-title,
  html[lang|="en"] .accordion-title {
    font-size: 18px !important;
    line-height: 1.42 !important;
    font-weight: 600 !important;
  }
  html[lang|="en"] .faq-answer {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }

  /* 4. 좌우 여백 통일 (22px) */
  html[lang|="en"] .container,
  html[lang|="en"] .section-inner,
  html[lang|="en"] .content-inner,
  html[lang|="en"] .page-inner,
  html[lang|="en"] .blog-inner {
    width: 100%;
    max-width: 100%;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box;
  }

  /* 5. 섹션 간격 통일 */
  html[lang|="en"] section,
  html[lang|="en"] .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  html[lang|="en"] .hero,
  html[lang|="en"] .page-hero {
    padding-top: 96px;
    padding-bottom: 72px;
  }
  html[lang|="en"] .section-title + .section-desc,
  html[lang|="en"] h2 + p,
  html[lang|="en"] h3 + p {
    margin-top: 16px;
  }
  html[lang|="en"] p + p {
    margin-top: 14px;
  }

  /* 7. 카드형 콘텐츠 글자 크기 통일 */
  html[lang|="en"] .card,
  html[lang|="en"] .procedure-card,
  html[lang|="en"] .review-card,
  html[lang|="en"] .blog-card {
    padding: 22px;
    border-radius: 18px;
  }
  html[lang|="en"] .card-title,
  html[lang|="en"] .procedure-card-title,
  html[lang|="en"] .blog-card-title {
    font-size: 20px !important;
    line-height: 1.32 !important;
    font-weight: 600 !important;
  }
  html[lang|="en"] .card-desc,
  html[lang|="en"] .procedure-card-desc,
  html[lang|="en"] .review-card-text,
  html[lang|="en"] .blog-card-excerpt {
    font-size: 16.5px !important;
    line-height: 1.62 !important;
  }

  /* 8. 의사 소개 페이지 경력/논문/언론 리스트 */
  html[lang|="en"] .doctor-profile p,
  html[lang|="en"] .doctor-profile li,
  html[lang|="en"] .career-list li,
  html[lang|="en"] .paper-list li,
  html[lang|="en"] .media-list li {
    font-size: 16.5px !important;
    line-height: 1.65 !important;
  }
  html[lang|="en"] .career-list,
  html[lang|="en"] .paper-list,
  html[lang|="en"] .media-list {
    padding-left: 0;
    margin-top: 18px;
  }
  html[lang|="en"] .career-list li,
  html[lang|="en"] .paper-list li,
  html[lang|="en"] .media-list li {
    margin-bottom: 10px;
  }

  /* 9. 블로그 상세(article) 모바일 본문 기준 */
  html[lang|="en"] .blog-detail,
  html[lang|="en"] .post-content,
  html[lang|="en"] article {
    font-size: 17px !important;
    line-height: 1.72 !important;
  }
  html[lang|="en"] .blog-detail h1,
  html[lang|="en"] article h1 {
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.16 !important;
    margin-bottom: 22px;
  }
  html[lang|="en"] .blog-detail h2,
  html[lang|="en"] article h2 {
    font-size: clamp(24px, 6.2vw, 31px) !important;
    line-height: 1.22 !important;
    margin-top: 56px;
    margin-bottom: 18px;
  }
  html[lang|="en"] .blog-detail h3,
  html[lang|="en"] article h3 {
    font-size: 21px !important;
    line-height: 1.32 !important;
    margin-top: 36px;
    margin-bottom: 14px;
  }
  html[lang|="en"] .blog-detail p,
  html[lang|="en"] article p {
    font-size: 17px !important;
    line-height: 1.72 !important;
    margin-bottom: 16px;
  }
  html[lang|="en"] .blog-detail ul,
  html[lang|="en"] .blog-detail ol,
  html[lang|="en"] article ul,
  html[lang|="en"] article ol {
    padding-left: 1.2em;
    margin-top: 14px;
    margin-bottom: 20px;
  }
  html[lang|="en"] .blog-detail li,
  html[lang|="en"] article li {
    font-size: 17px !important;
    line-height: 1.68 !important;
    margin-bottom: 9px;
  }

  /* 10. 푸터 */
  html[lang|="en"] footer,
  html[lang|="en"] .footer {
    font-size: 14.5px !important;
    line-height: 1.58 !important;
  }
  html[lang|="en"] .footer p,
  html[lang|="en"] .footer li,
  html[lang|="en"] .footer-info,
  html[lang|="en"] .footer-address,
  html[lang|="en"] .footer-keywords {
    font-size: 14.5px !important;
    line-height: 1.58 !important;
  }
  html[lang|="en"] .footer-title,
  html[lang|="en"] .footer-logo-text {
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  /* 11. 버튼 / CTA 최소 터치 영역 + 일관 크기 */
  html[lang|="en"] .btn,
  html[lang|="en"] .cta,
  html[lang|="en"] .button,
  html[lang|="en"] a[class*="btn"],
  html[lang|="en"] a[class*="cta"] {
    min-height: 48px;
    padding: 13px 20px;
    font-size: 16px !important;
    line-height: 1.25 !important;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

} /* /max-width: 768px */

/* =============================================================================
   모바일 ≤390px — iPhone SE 등 작은 화면 (사양서 4번 추가 룰)
   ============================================================================= */
@media (max-width: 390px) {
  html[lang|="en"] .container,
  html[lang|="en"] .section-inner,
  html[lang|="en"] .content-inner,
  html[lang|="en"] .page-inner,
  html[lang|="en"] .blog-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}