@charset "utf-8";
/* ============================================================
   lydia-main.css
   리디아 여성의원 — 메인 홈 전용 스타일
   (헤더·푸터 제외 / reset.css·font.css 선적용 전제)
   ============================================================ */


/* ─────────────────────────────────────────────
   0. 공통 유틸
────────────────────────────────────────────── */
.lydia-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left:  var(--safe-padding);
  padding-right: var(--safe-padding);
}

/* 섹션 공통 상하 여백 */
.section-pad {
  padding-top:    var(--sp-5xl);
  padding-bottom: var(--sp-5xl);
}


/* ─────────────────────────────────────────────
   2. 서비스 카드 그리드
────────────────────────────────────────────── */
.service-grid {
  background: var(--bg-soft);
  padding: var(--sp-4xl) var(--safe-padding);
}

.service-grid-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.service-grid-logo {
  text-align: center;
  margin-bottom: var(--sp-xl);
}
.service-grid-logo img {
  height: 38px;
  width: auto;
  opacity: 0.75;
}

/* 6칸 카드 그리드: 3열 × 2행 */
.service-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: var(--sp-sm);
}

/* ── 개별 카드 */
.service-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  cursor: pointer;
  color: var(--txt-base);
  text-decoration: none;
}

/* 카드별 배경 이미지 — 실제 서버 이미지 경로로 교체 */
.card-vaginal-filler { 
  background: url("https://jplydia.oneup-creative.kr/wp-content/uploads/2026/07/subj01.jpg") center/cover no-repeat; 
  color: var(--txt-base);
}
.card-whitening      { 
  background: url("https://jplydia.oneup-creative.kr/wp-content/uploads/2026/07/subj02.jpg") center/cover no-repeat;
  color: var(--txt-base);
}
.card-myoma          { 
  background: url("https://jplydia.oneup-creative.kr/wp-content/uploads/2026/07/subj03.jpg") center/cover no-repeat; 
  color: var(--txt-base);
}
.card-lifting        { background: url("https://jplydia.oneup-creative.kr/wp-content/uploads/2026/07/subj04.jpg") center/cover no-repeat; }
.card-dotblemish     { background: url("https://jplydia.oneup-creative.kr/wp-content/uploads/2026/07/subj05.jpg") center/cover no-repeat; }
.card-acne           { background: url("https://jplydia.oneup-creative.kr/wp-content/uploads/2026/07/subj06.jpg") center/cover no-repeat; }

/* 그라디언트 오버레이 */
.card-overlay {
  position: absolute;
  inset: 0;
  transition: opacity var(--duration);
}

/* hover 시 오버레이 어둡게 */
.service-card:hover .card-overlay { opacity: 0.85; }
.service-card:hover { transform: scale(1.015); z-index: 2; }
.service-card { transition: transform var(--duration) var(--ease-out); }

/* 카드 텍스트 본문 */
.card-body {
    position: relative;
    z-index: 1;
    padding: var(--sp-lg) var(--sp-lg) var(--sp-xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    gap: var(--sp-2xs);
    margin-top: var(--sp-sm);
}

.card-en {
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: 500;
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-xs);
}

.card-label {
  font-size: var(--fs-body);
  opacity: 0.9;
}

.card-title {
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl));
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.card-desc {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  opacity: 0.9;
  margin-top: var(--sp-r);
  word-break: keep-all;
}


/* ─────────────────────────────────────────────
   3. 정품 · 정량
────────────────────────────────────────────── */
.genuine-section {
  position: relative;
  background-color: var(--bg-genuine);
  background-image: url("/wp-content/uploads/2026/06/main_con02_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--sp-5xl) var(--safe-padding);
  text-align: center;
}
 
/* 텍스트 가독성 보조 — 이미지가 밝으므로 흰색 반투명 오버레이 */
.genuine-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  z-index: 0;
}
 
.genuine-inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-r);
}
 
.genuine-badge {
  display: inline-block;
  border: 1px solid var(--accent-purple);
  color: var(--accent-purple);
  font-size: var(--fs-sm);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  padding: 0.35em 1.2em;
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-align: center;
}
 
.genuine-title {
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-hero));
  color: var(--accent-purple);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
}

.genuine-bar {
  display: block;
  width: 96px;
  height: 2px;
  background: var(--accent-purple);
  margin: var(--sp-r) auto 0;
}
 
.genuine-desc {
  font-size: var(--fs-body);
  color: var(--accent-purple);
  line-height: var(--lh-loose);
  word-break: normal;
}


/* ─────────────────────────────────────────────
   4. 공지 / 이벤트 / 카카오
────────────────────────────────────────────── */
.notice-section {
  background: var(--bg-notice);
  padding: var(--sp-4xl) var(--safe-padding);
}
 
.notice-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 240px;
  gap: var(--sp-xl);
  align-items: stretch;
}
 
/* ── 게시판 컬럼 공통 */
.notice-col {
  display: flex;
  flex-direction: column;
}
 
/* ── 헤더 (타이틀 + more 버튼) */
.notice-board-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-r);
  border-bottom: 1px solid #ddd;
}
 
.notice-board-title {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--txt-base);
  letter-spacing: -0.02em;
}
 
/* 타이틀 내 강조 텍스트 (공지사항, 이벤트) */
.notice-board-title strong {
  font-weight: 700;
}
 
.notice-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--white);
  background: var(--main-color);
  padding: 0.25em 0.9em;
  border-radius: var(--radius-pill);
  transition: background var(--duration);
  letter-spacing: 0.02em;
}
.notice-more-btn:hover { background: var(--main-color-dark); }
 
/* ── 게시판 본문: 이미지 위 → 목록 아래 (세로 배치) */
.notice-board-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-r);
  flex: 1;
}
 
/* 고정 이미지 — 가로 꽉 차게, 비율 유지 */
.notice-thumb {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.notice-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
 
/* ── 제목 목록 */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
 
.notice-list li a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  transition: color var(--duration);
}
.notice-list li:first-child a { padding-top: 0; }
.notice-list li:last-child  a { border-bottom: none; }
 
.notice-date {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--txt-light);
  font-weight: 400;
  letter-spacing: 0.02em;
}
 
.notice-title-txt {
  font-size: var(--fs-sm);
  color: var(--txt-muted);
  line-height: var(--lh-normal);
  word-break: keep-all;
  transition: color var(--duration);
  /* 한 줄 말줄임 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notice-list li a:hover .notice-title-txt,
.notice-list li a:hover .notice-date { color: var(--main-color); }
 
.notice-empty {
  font-size: var(--fs-sm);
  color: var(--txt-light);
  padding-top: var(--sp-sm);
}
 
/* ── 카카오톡 박스 */
.kakao-col {
  /* notice-inner grid 3번째 열 */
}
 
.kakao-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: box-shadow var(--duration), transform var(--duration);
    cursor: pointer;
}
.kakao-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
 
/* 카카오 로고 상단 (리디아 심볼 이미지) */
.kakao-symbol {
  width: 40px;
  height: auto;
}
 
.kakao-label {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--white);
  text-align: center;
  letter-spacing: -0.02em;
}
 
/* 카카오톡 아이콘 이미지 래퍼 */
.kakao-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.kakao-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
 
.kakao-id {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
  letter-spacing: 0.02em;
}
 
.kakao-label {
  font-size: var(--fs-body);
  font-weight: 700;
  color: #3c1e1e;
  text-align: center;
}
 
.kakao-id {
  font-size: var(--fs-sm);
  color: #5a3a3a;
  font-weight: 500;
}


/* ─────────────────────────────────────────────
   5. 클리닉 소개 (어두운 배경 + 영문 대형)
────────────────────────────────────────────── */
.clinic-intro {
  position: relative;
  background-color: var(--bg-clinic);
  /* 배경 이미지 — 실제 클리닉 내부 사진으로 교체 */
  background-image: url("https://jplydia.oneup-creative.kr/wp-content/uploads/2026/06/main_con05.jpg");
  background-size: cover;
  background-position: center;
  padding: var(--sp-5xl) var(--safe-padding);
  text-align: center;
  overflow: hidden;
}

.clinic-intro-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}

.clinic-intro-small {
  font-size: var(--fs-body);
  color: var(--accent-golden);
  letter-spacing: 0.2em;
  font-family: var(--font-serif);
}

.clinic-intro-en {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-3xl), 7vw, 3rem);
  color: var(--accent-golden);
  letter-spacing: 0.05em;
  line-height: 1;
  margin: var(--sp-r) auto;
}

.clinic-intro-desc {
  font-size: var(--fs-body);
  color: var(--accent-golden);
  line-height: var(--lh-loose);
  word-break: keep-all;
}

.clinic-intro-point {
  font-size: var(--fs-body);
  color: var(--accent-golden);
  line-height: var(--lh-loose);
  font-weight: 500;
  word-break: keep-all;
}


/* ─────────────────────────────────────────────
   6. 오시는 길
────────────────────────────────────────────── */
.location-section {
  background: var(--bg-base);
  padding: var(--sp-5xl) var(--safe-padding);
}
 
.location-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--sp-4xl);
  align-items: flex-start;
}
 
/* ── 왼쪽: 지도 이미지 + 주소 박스 */
.location-map-col {
  display: flex;
  flex-direction: column;
}
 
.location-map-wrap {
  border: 1px solid #e8e8e8;
  overflow: hidden;
}
.location-map-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
 
.location-address {
  border: 1px solid #e8e8e8;
  border-top: none;
  padding: var(--sp-r) var(--sp-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  background: #fff;
}
.location-address span {
  font-size: var(--fs-sm);
  color: var(--txt-muted);
}
.location-address strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--txt-base);
  letter-spacing: -0.02em;
}
 
/* ── 오른쪽: 교통 정보 */
.location-info-col {
  padding-top: var(--sp-xs);
}
 
.location-title {
  font-size: clamp(var(--fs-lg), 2.5vw, var(--fs-2xl));
  font-weight: 400;
  color: var(--txt-base);
  margin-bottom: var(--sp-xl);
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
}
.location-title strong {
  font-weight: 700;
}
 
.location-routes {
  display: flex;
  flex-direction: column;
}
 
/* ── 공통 행 */
.route-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-r) 0;
  border-top: 1px solid #ebebeb;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--txt-base);
}
.route-row:last-child {
  border-bottom: 1px solid #ebebeb;
}
 
/* ── 도보 / 버스 대분류 뱃지 */
.route-type-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
  margin-top: 0.1em;
}
.badge-walk,
.badge-bus { background: #333; }

 
/* ── 도보 4칸 그리드 */
.walk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xs) var(--sp-xl);
  color: var(--txt-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
 
/* ── 버스 상세 테이블 */
.route-detail {
  flex: 1;
}
 
.bus-table {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
 
.bus-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3xl);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
 
/* 정류장명 */
.bus-stop {
  flex-shrink: 0;
  width: 80px;
  color: var(--txt-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  word-break: keep-all;
}
 
/* 노선 번호 영역 */
.bus-lines {
  flex: 1;
  color: var(--txt-base);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
}
 
/* ── 직행/간선/급행/공항/광역 강조 뱃지 */
.bus-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  line-height: 1.6;
}
.kind-direct  { background: #e8222a; }   /* 직행 — 빨강 */
.kind-local   { background: #1a6abf; }   /* 간선 — 파랑 */
.kind-express { background: #e8222a; }   /* 급행 — 빨강 */
.kind-airport { background: #5c8ec7; }   /* 공항 — 하늘 */
.kind-wide    { background: #e8222a; }   /* 광역 — 빨강 */


/* ─────────────────────────────────────────────
   7. 반응형 — 태블릿 (≤ 1024px)
────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* 배너 */
  .banner-image-area { display: none; }
  .banner-text-area  { max-width: 100%; }

  /* 서비스 카드: 2열 */
  .service-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 공지 → 2열 */
  .notice-inner {
    grid-template-columns: 1fr 1fr;
  }
  .kakao-col {
    grid-column: 1 / -1;
  }
  .kakao-card {
    flex-direction: row;
    justify-content: center;
    gap: var(--sp-xl);
    padding: var(--sp-r) var(--sp-xl);
    height: auto;
  }

  /* 오시는 길 */
  .location-inner {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────
   8. 반응형 — 모바일 (≤ 639px)
────────────────────────────────────────────── */
@media (max-width: 639px) {

  /* 배너 */
  .banner-slider { height: 320px; }
  .banner-title  { font-size: var(--fs-2xl); }
  .banner-en     { font-size: var(--fs-xs); }
  .banner-desc   { font-size: var(--fs-sm); }
  .banner-text-area { padding-bottom: var(--sp-3xl); }

  /* 서비스 카드: 1열 */
  .service-cards,
  .notice-inner {
    grid-template-columns: 1fr;
  }
  .service-card {
    aspect-ratio: 5/4;
  }
  .card-body {
    justify-content: center;
    padding: var(--sp-lg) var(--sp-r) var(--sp-xl);
  }

  /* 공지 → 1열 */
  
  .kakao-card {
    padding: var(--sp-lg);
    height: auto;
  }

  /* 오시는 길 */
  .location-inner {
    gap: var(--sp-xl);
  }
  .route-row {
    flex-wrap: wrap;
  }
}


/* ============================================================================
   jplydia.oneup-creative.kr — 모바일 정리 패치 (메인 페이지 기준, 전 페이지 적용 가능)
   자식 테마 style.css 최하단 또는 Customizer > 추가 CSS 에 붙여넣기

   실측 환경: 뷰포트 345px (iPhone 390pt / Galaxy 360pt 계열)
   검증 결과: 카드 텍스트 잘림 3건 → 0건 / 44px 미만 터치영역 4종 → 1종
             가로 overflow 0 유지
   ============================================================================ */


/* ══════════════════════════════════════════════════════════════════════════
   [0] 최우선 — 메인 슬라이더 카피가 화면 밖에 있습니다

   #n2-ss-8 (모바일 전용 슬라이더) 텍스트 레이어에 인라인 스타일로
       transform: translate3d(-192.593px, 0, 0);
       opacity: 0.6588;
   가 남아 있습니다. 레이어 등장 애니메이션이 완료되지 않고 중간에서 멈춘
   상태라, 모바일 히어로에 카피가 한 글자도 보이지 않습니다.
   (10초간 0.6초 간격 샘플링 — left 값이 계속 -177px 로 고정)

   ★ 근본 해결: Smart Slider 관리화면 > 해당 슬라이드 > 레이어 선택 >
     Animations 탭에서 In 애니메이션을 끄거나 재저장.
     아래는 그 전까지 쓰는 CSS 응급처치입니다.
   ══════════════════════════════════════════════════════════════════════════ */

#n2-ss-8 .n2-ss-layer--block.n2-ss-has-self-align {
  transform: none !important;
  opacity: 1 !important;
}

/* 흰 카피가 밝은 라벤더 배경 위에 놓여 대비가 부족합니다.
   좌→우로 사라지는 스크림. 농도는 취향껏 조절하세요. */
#n2-ss-8 .n2-ss-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(58, 26, 58, .50) 0%,
              rgba(58, 26, 58, .24) 48%,
              rgba(58, 26, 58, 0)   72%);
  pointer-events: none;
  z-index: 1;
}
#n2-ss-8 .n2-ss-layers-container { position: relative; z-index: 2; }


/* ══════════════════════════════════════════════════════════════════════════
   [1] 폰트 — 일본어 사이트인데 한국어 폰트를 쓰고 있습니다

     body            : "Noto Sans KR"   → 한자가 한국 지역자형(K)으로 렌더링
     .clinic-intro-* : Ridibatang(리디바탕, 한국어 명조)
                       → 이 요소엔 카나가 들어 있는데 Ridibatang 에는 카나
                         글리프가 없어 시스템 명조로 폴백됩니다.
                         한 줄 안에서 서체가 둘로 갈리는 게 "부자연스러움"의
                         가장 큰 원인입니다.

   ★ 근본 해결: 테마가 로드하는 Noto Sans KR 을 Noto Sans JP 로 교체.
     아래는 그 전까지 쓰는 덮어쓰기입니다.
     (테마 리셋 규칙이 `*` 와 긴 엘리먼트 목록으로 폰트를 지정하고 있어
      선택자 특이도를 맞춰야 먹힙니다)
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;600&display=swap');

:root {
  --font-jp-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans KR", sans-serif;
  --font-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* 아이콘 폰트(tabler-icons, dashicons 등)는 제외 */
html body,
html body *:not(i):not([class*="dashicon"]):not([class*="ti-"]):not([class*="icon"]):not([class*="fa-"]) {
  font-family: var(--font-jp-sans);
}

/* Smart Slider 는 슬라이더 관리화면에서 폰트가 따로 박혀 있어 별도 지정 */
div#n2-ss-2 [class*="n2-font-"], div#n2-ss-2 [class*="n2-font-"] *,
div#n2-ss-8 [class*="n2-font-"], div#n2-ss-8 [class*="n2-font-"] * {
  font-family: var(--font-jp-sans) !important;
}

/* Ridibatang(한국어 명조)을 쓰던 곳은 일본어 명조로 */
html body .clinic-intro-small,
html body .clinic-intro-en { font-family: var(--font-jp-serif) !important; }


/* ══════════════════════════════════════════════════════════════════════════
   [2] 기본 행간 — body { line-height: 16px } (= 1.0) 으로 리셋돼 있습니다
   일본어는 한글보다 글자 밀도가 높아 1.7~1.9 가 편합니다.
   ══════════════════════════════════════════════════════════════════════════ */

body { line-height: 1.75; }


/* ══════════════════════════════════════════════════════════════════════════
   [3] 타이포 스케일 — 데스크톱 값이 그대로 모바일로 내려와 있습니다

     .clinic-intro-en   40px lh1.0  → 26px lh1.3
     .genuine-title     32px lh1.25 → 24px lh1.4
     .card-title        20px lh1.25 → 18px lh1.5
     .location-title    20px lh1.25 → 18px lh1.5
     .card-label        15px lh1.0  → 14px lh1.6

   본문 행간도 1.0 / 1.6 / 1.85 가 섞여 있어 1.8 로 통일했습니다.
   자간은 px 고정값(-0.96px, -1.04px …)을 em 상대값으로 바꿔
   글자 크기가 변해도 비율이 유지되게 했습니다.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .clinic-intro-en {
    font-size: clamp(1.5rem, 4.5vw + .6rem, 2.5rem);
    line-height: 1.3;
    letter-spacing: .08em;
  }

  .genuine-title {
    font-size: clamp(1.375rem, 3.6vw + .7rem, 2rem);
    line-height: 1.4;
  }

  .card-title,
  .location-title {
    font-size: clamp(1.0625rem, 1.6vw + .8rem, 1.25rem);
    line-height: 1.5;
  }

  .card-label { font-size: .875rem; line-height: 1.6; }
  .card-en    { letter-spacing: .08em; }

  .card-desc,
  .genuine-desc,
  .clinic-intro-desc,
  .clinic-intro-point { font-size: .9375rem; line-height: 1.8; }

  /* 한글 기준으로 잡힌 과한 음수 자간 완화 */
  .genuine-title,
  .card-title,
  .location-title,
  .sub-title { letter-spacing: -.01em; }
}


/* ══════════════════════════════════════════════════════════════════════════
   [4] 서비스 카드 — 텍스트가 카드 아래로 잘려 나갑니다

   .service-card 에 aspect-ratio: 5/4 (데스크톱 비율)이 걸려 있어
   309×247px 로 고정되는데, 4·5·6번 카드는 내용이 264~265px 필요합니다.
   → 17~18px 이 잘려 마지막 줄이 반쯤 사라집니다. (실측)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .service-card {
    aspect-ratio: auto;    /* 고정 비율 해제 */
    min-height: 15.5rem;   /* 대신 최소 높이로 카드 리듬 유지 */
  }

  .card-body {
    padding: 1.375rem 1rem 1.5rem;
    position: relative;
    z-index: 1;
  }

  /* 짙은 본문(#222)이 인물 사진 위에 바로 얹혀 대비가 들쭉날쭉합니다.
     좌→우로 옅어지는 화이트 스크림으로 가독성 확보 (사진은 우측에 살림) */
  .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg,
                rgba(255, 255, 255, .88) 0%,
                rgba(255, 255, 255, .66) 52%,
                rgba(255, 255, 255, .10) 100%);
    pointer-events: none;
  }

  /* PC 기준으로 넣은 <br> 이 모바일에선 "抑えま / す。" 같은
     고아 줄을 만듭니다 → 자연 줄바꿈에 맡김.
     ※ <br> 앞뒤 공백이 한 칸으로 접혀 문장 중간에 미세한 띄어쓰기가
       남습니다. 완전히 없애려면 워드프레스 본문에서 <br> 을 지우세요.
       그 방식이 싫으면 이 한 줄만 주석 처리하면 됩니다.
       ([4]의 aspect-ratio 수정만으로도 잘림은 이미 해결됩니다) */
  .card-desc br { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   [5] 섹션 여백 — 세로 80px / 64px 은 모바일에서 과합니다
   화면 높이가 740px 인데 섹션 하나당 상하 합계 160px 이 빈 공간입니다.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .service-grid,
  .notice-section     { padding-block: 3rem; }    /* 64px → 48px */

  .genuine-section,
  .clinic-intro,
  .location-section   { padding-block: 3.5rem; }  /* 80px → 56px */

  .service-grid, .genuine-section, .notice-section,
  .clinic-intro, .location-section { padding-inline: 1.25rem; } /* 18px → 20px */
}


/* ══════════════════════════════════════════════════════════════════════════
   [6] 터치 영역 — 44×44px 미만 (Apple HIG / WCAG 2.5.5 AAA)

     a.notice-more-btn       53×18
     .ast-scroll-top-icon    42×42
     .n2-bullet (슬라이더 도트) 8×8
     a.one-mo-tel-btn        43×43
   ══════════════════════════════════════════════════════════════════════════ */

.notice-more-btn {
  min-height: 2.75rem;
  padding-inline: 1rem;
  display: inline-flex;
  align-items: center;
}

.ast-scroll-top-icon { width: 2.75rem; height: 2.75rem; }
.one-mo-tel-btn      { min-width: 2.75rem; min-height: 2.75rem; }

/* 슬라이더 도트는 보이는 크기는 그대로 두고 히트 영역만 확장 */
.n2-bullet { position: relative; }
.n2-bullet::after { content: ""; position: absolute; inset: -1rem; }


/* ══════════════════════════════════════════════════════════════════════════
   [7] 고정 요소에 가려지는 콘텐츠

     상단 고정 헤더 .one-mo-hd  59px
     하단 고정 바   .quick_bar  64px
   body padding-bottom 이 0 이라 푸터 마지막 64px 이 영구히 가려집니다.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  body { padding-bottom: 4rem; }        /* quick_bar 높이 확보 */
  html { scroll-padding-top: 4.5rem; }  /* 앵커 이동 시 헤더 밑으로 숨는 것 방지 */

  .ast-scroll-to-top-right { bottom: 5.5rem; }        /* 하단 바와 겹침 해소 */
  .quick_bar { padding-bottom: env(safe-area-inset-bottom, 0); } /* 홈 인디케이터 */
}


/* ══════════════════════════════════════════════════════════════════════════
   [8] 오시는 길 — 버스 정류장 표

   .bus-stop 가 width: 80px 고정 + .bus-row 가 gap: 48px 라
   253px 영역에서 "シンノンヒョ / ンえき" 처럼 단어 중간이 끊깁니다.
   → 2열 그리드로 바꾸고 노선번호는 wrap 되게 처리
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .route-row { flex-wrap: wrap; gap: .5rem; }

  .bus-row {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: .5rem .75rem;
    align-items: baseline;
  }
  .bus-stop  { width: auto; flex: none; min-width: 0; }
  .bus-lines {
    flex: none; min-width: 0;
    display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   [9] 일본어 줄바꿈 — word-break: keep-all 은 한국어용 설정입니다
   (서브 페이지 패치와 동일. 메인에도 함께 넣어두면 안전합니다)
   ══════════════════════════════════════════════════════════════════════════ */

.site *, .one-container * {
  word-break: normal !important;
  line-break: auto !important;
  overflow-wrap: break-word;
}
#wpadminbar, #wpadminbar * { word-break: normal; overflow-wrap: normal; }


/* ══════════════════════════════════════════════════════════════════════════
   [참고] CSS 로는 못 고치는 것들 — 내용/설정 수정이 필요합니다

   1. 헤더·푸터 로고 아래 "리디아 여성의원" 이 한국어 그대로입니다.
   2. 푸터 주소·사업자등록번호·대표자명이 한국 사업자 정보 그대로입니다.
   3. 카카오톡 배너의 "@리디아여성의원" — 일본 이용자 대상이면
      LINE 이 훨씬 자연스럽습니다.
   4. 버스 정류장명이 한국 지명의 가타카나 음차("シンノンヒョンえき")입니다.
      "新論峴駅（シンノンヒョン駅）" 처럼 한자 병기가 읽기 편합니다.
   5. 서비스 카드 배경 이미지가 한국 도메인(lydia.oneup-creative.kr)에서
      로드됩니다. 일본 도메인으로 옮기는 편이 안정적입니다.
   ══════════════════════════════════════════════════════════════════════════ */