/* ════════════════════════════════════════════════════════════
   힐링네임 모바일 반응형 보정 (2026-10-05)
   - 모든 페이지 <head> 맨 끝에서 로드 (페이지별 인라인 <style> 뒤)
   - 인라인 style 로 박힌 값은 !important + 속성 셀렉터로만 덮어쓸 수 있음
     (2026-09-21 모바일 그리드 버그와 같은 유형)
   - 공용 메뉴(햄버거)는 js/mobile-nav.js 가 자체 CSS 를 주입
   ════════════════════════════════════════════════════════════ */

/* ── 전역 ───────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 76px;            /* 고정/스티키 메뉴 아래로 앵커 이동 시 가려짐 방지 */
}
body {
  word-break: keep-all;                /* 한글을 음절 단위가 아니라 단어 단위로 줄바꿈 */
  overflow-wrap: break-word;           /* 긴 영문/URL 은 넘치지 않게 강제 줄바꿈 */
}
button, a.btn-primary, a.btn-outline { word-break: keep-all; }

/* ── 태블릿 이하 ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* [index] 미래흐름 리포트(WEROS FUTURE × 힐링네임) 카드 */
  .service-card div[style*="padding:28px 40px 0"] {
    padding: 20px 20px 18px !important;
    flex-wrap: wrap;
    gap: 10px 12px !important;
  }
  .service-card div[style*="padding:28px 40px 0"] > div { flex-wrap: wrap; row-gap: 4px; }
  .service-card div[style*="padding:28px 40px 0"] span { white-space: nowrap; }
  .service-card div[style*="padding:36px 40px"] {
    padding: 28px 20px !important;
    border-right: none !important;
  }
  .service-card div[style*="padding:36px 40px"] + div[style*="padding:36px 40px"] {
    border-top: 1px solid rgba(200,164,80,0.12);
  }
  /* style.css(~2485행)의 '인생 패턴 리포트 카드' 모바일 규칙이 이 카드에도 걸려
     헤더가 min-height:220px 로 늘어나고(빈 공간), 본문 그리드에 24px 패딩이 더해져 여백이 이중이 되던 문제 */
  .future-subsection > div[style*="grid-column:1/-1"] > div[style*="padding:28px 40px 0"] { min-height: 0 !important; }
  .future-subsection > div[style*="grid-column:1/-1"] > div[style*="grid-template-columns:1fr 1fr;gap:0"] { padding: 0 !important; }
  /* 가격 줄: 정가(취소선) + 할인가가 한 줄에 못 들어가면 줄바꿈 */
  div[style*="display:flex;align-items:center;gap:14px;margin-bottom:6px"] {
    flex-wrap: wrap;
    gap: 4px 12px !important;
  }
  div[style*="display:flex;align-items:center;gap:14px;margin-bottom:6px"] span { white-space: nowrap; }

  /* [index] 인라인 가로 패딩 32~40px 블록 → 모바일에서는 20px */
  [style*="padding:36px 40px 48px"],
  [style*="padding:32px 40px 24px"],
  [style*="padding:28px 40px;"],
  [style*="padding:28px 32px 20px"],
  [style*="padding:24px 32px 32px"],
  [style*="padding:16px 32px 0"],
  [style*="padding:40px 32px 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* 인라인 2열 그리드(진단 결과/옵션 등) 중 모바일에서 1열이 나은 것 */
  [style*="padding:36px 40px 48px"][style*="repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* [index] 진행 과정 — 세로 타임라인 형태로 정돈 (기존: 가운데 정렬 + 큰 간격) */
  #naming-process > div > div:last-child > .proc-step {
    display: grid !important;
    grid-template-columns: 52px 1fr;
    column-gap: 16px;
    align-items: center;
    text-align: left !important;
    padding: 0 !important;
  }
  #naming-process > div > div:last-child > .proc-step > .proc-dot {
    grid-row: 1 / span 2;
    margin: 0 !important;
  }
  #naming-process > div > div:last-child > .proc-step > .proc-txt { margin-bottom: 2px !important; }
  #naming-process > div > div:last-child > .proc-step > .proc-txt--2 { font-size: 12.5px !important; }
  #naming-process > div > div:last-child { gap: 18px !important; }

  /* [mypage] 메뉴 글자가 세로로 쪼개지던 문제 — 줄바꿈 금지 */
  .nav-links a { white-space: nowrap; }
}

/* ── 모바일 ─────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* [form] 서비스 선택 카드: 인라인 repeat(3,1fr) 이 미디어쿼리를 이기고 있었음 → 2열 */
  .svc-type-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .svc-type-card { padding: 14px 8px !important; }
  .svc-type-name { word-break: keep-all; }

  /* [form] 5단계 진행바 */
  .form-progress-step {
    padding: 10px 2px !important;
    font-size: 10.5px !important;
    letter-spacing: -0.02em;
    line-height: 1.3;
    word-break: keep-all;
  }
  .form-progress-num { font-size: 15px !important; }
  .form-progress { margin-bottom: 28px !important; }

  /* [form] 섹션 헤더: 번호 | 제목 | 설명 3개가 한 줄에 못 들어가 제목이 쪼개지던 문제 */
  .form-section-header {
    flex-wrap: wrap;
    padding: 14px 16px !important;
    row-gap: 4px;
  }
  .form-section-title { flex: 1 1 0; min-width: 0; }
  .form-section-desc { flex: 1 1 100%; margin-left: 40px !important; }
  .form-section-body { padding: 22px 16px !important; }

  /* [archive] 자료실 / [naming-story] 성명학 이야기 탭: '…' 로 잘리던 글자를 줄바꿈으로 표시 */
  .cat-inner .cat-btn,
  .tab-nav-wrap .tab-nav .tab-btn {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
    padding: 12px 6px !important;
    font-size: 12.5px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 아주 좁은 화면 (소형 폰) */
@media (max-width: 360px) {
  .svc-type-grid { grid-template-columns: 1fr !important; }
  .form-progress-step { font-size: 9.5px !important; }
}