/*
Theme Name: Clinic Child
Theme URI: https://github.com/clinic-factory
Description: 병원 SEO/AEO 콘텐츠 사이트 — GeneratePress 자식 테마. clinic-factory 가 생성·배포한다.
Author: clinic-factory
Template: generatepress
Version: 2.15.4
Text Domain: wp-clinic-child
*/

/* ============================================================
   0. 토큰 기본값 — 런타임에 inc/brand-css.php 가 같은 :root 블록을 덮어쓴다
   디자인 기준: docs/design-reference/apple/DESIGN.md
   병원 브랜드 색(primary·secondary·accent)은 병원별 추출값을 그대로 쓰고,
   중립색·타이포·여백·반경(10/28/980px)·그림자 없는 평면은 애플 기준을 따른다.
   ============================================================ */
:root {
  --color-primary: #1F6FB2;
  --color-secondary: #0B3D6E;
  --color-accent: #3CB4AC;
  --color-text: #1D1D1F;
  --color-bg: #FFFFFF;
  --color-surface: #F5F5F7;
  --color-border: #D2D2D7;
  --color-on-primary: #FFFFFF;
  --color-muted: #6E6E73;   /* 보조 글자 — 애플 Platinum(#86868B)을 WCAG 4.5 에 맞춰 한 단계 어둡게 */
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-heading: var(--font-body);
  --radius: 28px;           /* 카드·사진 */
  --radius-sm: 10px;        /* 작은 요소 */
  --radius-pill: 980px;     /* 버튼·칩·페이지 번호 */
  --max-width: 1120px;
  --content-width: 720px;
  --section-pad: clamp(4rem, 9vw, 7.5rem);
  --tracking-tight: -0.022em;
  --tracking-display: -0.03em;
}

/* ============================================================
   1. 기본 타이포그래피
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.75;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .main-title { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-tight); color: var(--color-text); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 시술 전용 페이지 — 과정 단계 · 비교표 · 사진 */
.clinic-steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: .75rem; }
.clinic-steps li { counter-increment: step; position: relative; padding: .9rem 1rem .9rem 3.2rem; background: var(--color-surface, #f5f5f7); border-radius: var(--radius-sm, 10px); }
.clinic-steps li::before { content: counter(step); position: absolute; left: 1rem; top: .85rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; font-size: .875rem; display: flex; align-items: center; justify-content: center; }
.clinic-table-wrap { overflow-x: auto; }
.clinic-compare { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
.clinic-compare th, .clinic-compare td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--color-border, #d2d2d7); }
.clinic-compare thead th { font-size: .8125rem; color: var(--color-muted, #6e6e73); }
.clinic-landing-figure { margin: 0 0 1.25rem; }
.clinic-landing-figure img { width: 100%; height: auto; border-radius: var(--radius-sm, 10px); }
.clinic-landing-figure--doctor img { max-width: 420px; }
.clinic-landing-lead { font-size: 1.125rem; }

/* 칼럼 카드 묶음 — 정사각 썸네일 + 짧은 제목 (라파셀 수정안) */
.clinic-cluster { margin-top: 2.5rem; }
.clinic-cluster-link a { display: inline-block; font-weight: 700; padding: .7em 1.2em; border-radius: 999px; background: var(--color-primary); color: var(--color-on-primary); text-decoration: none; }
.clinic-cardset__grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.clinic-cardset__grid a { display: flex; flex-direction: column; gap: .5rem; color: var(--color-text); text-decoration: none; }
.clinic-cardset__grid img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm, 10px); }
.clinic-cardset__grid span { font-weight: 600; font-size: .9375rem; line-height: 1.4; }
.clinic-cardset__grid a:hover span { text-decoration: underline; }

/* 정보 페이지 아래 '○년 ○월 ○일 기준' 한 줄 */
.clinic-asof { margin-top: 2.5rem; color: var(--color-muted, #6e6e73); font-size: .875rem; }

/* 헤더 — 반투명 흰 바탕 + 흐림, 스크롤해도 따라온다 */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation a { font-size: .9375rem; font-weight: 500; color: var(--color-text); }
.main-navigation a:hover { color: var(--color-primary); text-decoration: none; }
.main-navigation .current-menu-item > a { color: var(--color-primary); }
.site-logo .header-image, .custom-logo { max-height: 48px; width: auto; }
/* 로고가 있으면 글자 제목은 중복 — GeneratePress 는 로고 다음에 제목을 놓으므로 형제 선택자로 숨긴다 */
.site-logo + .site-branding .main-title, .site-logo + .site-branding .site-description { display: none; }
.inside-header, .inside-article, .site-content { max-width: var(--max-width); }
.entry-content > * { max-width: var(--content-width); }
.entry-content > .alignwide, .entry-content > .clinic-section--wide { max-width: var(--max-width); }

/* 버튼 — 알약 모양. 한 화면에 채운 버튼은 하나, 나머지는 테두리만 */
.clinic-btn {
  display: inline-flex; align-items: center; gap: .4em; padding: .75em 1.4em; border-radius: var(--radius-pill);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-decoration: none;
  background: var(--color-primary); color: var(--color-on-primary); border: 1px solid var(--color-primary);
  transition: background-color .2s, color .2s, border-color .2s;
}
.clinic-btn:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-on-primary); text-decoration: none; }
.clinic-btn--ghost { background: transparent; color: var(--color-primary); }
.clinic-btn--ghost:hover { background: var(--color-primary); color: var(--color-on-primary); }

/* ============================================================
   2. 첫 화면
   ============================================================ */
/* 화면 폭을 꽉 채우는 띠 — 본문 폭(1120)에 갇힌 색 상자가 아니라, 헤더·푸터처럼 좌우 끝까지 */
.site-content > .clinic-front { width: 100%; }
/* 100vw 에는 세로 스크롤바 폭이 포함돼 오른쪽이 살짝 넘친다 — body 에서 잘라낸다.
   (main 에 걸면 main 자신이 띠를 본문 폭으로 잘라버린다 — 2026-09-18 실서버에서 그랬다.)
   overflow: clip 은 스크롤 컨테이너를 만들지 않아 고정 헤더(sticky)에 영향이 없다. */
body { overflow-x: clip; }
.clinic-bleed, .clinic-hero, .clinic-home-section--surface { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.clinic-hero { position: relative; padding: clamp(5rem, 12vw, 9rem) 1.25rem clamp(4rem, 9vw, 7rem); background: var(--color-surface); }
.clinic-hero--solid { background: var(--color-primary); color: var(--color-on-primary); }
.clinic-hero--gradient { background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: var(--color-on-primary); }
.clinic-hero--soft { background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)); }
/* 병원 사진이 있으면 배경으로 — 글자가 읽히도록 브랜드색 → 투명 그라데이션을 덮는다 */
.clinic-hero--image { background-size: cover; background-position: center; color: var(--color-on-primary); }
/* 좁은 화면에서는 사진의 왼쪽을 보여준다 — 가로로 긴 사진이 가운데로 잘리면 글자 위에 사진 속 글자가 겹친다 */
@media (max-width: 768px) { .clinic-hero--image { background-position: left center; } }
.clinic-hero--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--color-secondary) 88%, transparent) 0%, color-mix(in srgb, var(--color-secondary) 55%, transparent) 55%, color-mix(in srgb, var(--color-secondary) 20%, transparent) 100%); }
.clinic-hero--image > .clinic-hero__inner { position: relative; }
.clinic-hero--solid h1, .clinic-hero--gradient h1, .clinic-hero--image h1,
.clinic-hero--solid .clinic-hero__eyebrow, .clinic-hero--gradient .clinic-hero__eyebrow, .clinic-hero--image .clinic-hero__eyebrow,
.clinic-hero--solid .clinic-hero__sub, .clinic-hero--gradient .clinic-hero__sub, .clinic-hero--image .clinic-hero__sub { color: var(--color-on-primary); }
.clinic-hero--solid .clinic-hero__sub, .clinic-hero--gradient .clinic-hero__sub, .clinic-hero--image .clinic-hero__sub { opacity: .88; }
.clinic-hero--solid .clinic-btn, .clinic-hero--gradient .clinic-btn, .clinic-hero--image .clinic-btn { background: var(--color-on-primary); color: var(--color-primary); border-color: var(--color-on-primary); }
.clinic-hero--solid .clinic-btn:hover, .clinic-hero--gradient .clinic-btn:hover, .clinic-hero--image .clinic-btn:hover { background: transparent; color: var(--color-on-primary); }
.clinic-hero--solid .clinic-btn--ghost, .clinic-hero--gradient .clinic-btn--ghost, .clinic-hero--image .clinic-btn--ghost { background: transparent; color: var(--color-on-primary); }
.clinic-hero--solid .clinic-btn--ghost:hover, .clinic-hero--gradient .clinic-btn--ghost:hover, .clinic-hero--image .clinic-btn--ghost:hover { background: var(--color-on-primary); color: var(--color-primary); }
.clinic-hero__inner { max-width: var(--max-width); margin: 0 auto; }
.clinic-hero__eyebrow { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-secondary); margin-bottom: .9rem; }
.clinic-hero h1 { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1.05; letter-spacing: var(--tracking-display); margin: 0 0 1.1rem; }
.clinic-hero__sub { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; letter-spacing: -0.015em; color: var(--color-muted); max-width: 34em; margin: 0 0 2.2rem; }
.clinic-hero__actions { display: flex; gap: .75rem 1rem; flex-wrap: wrap; align-items: center; }

/* 섹션 — 흰 바탕과 옅은 회색 바탕을 번갈아 쌓는다 */
/* 흰 섹션은 좌우 여백까지 포함한 폭 — 글 시작선이 히어로·회색 섹션과 같은 세로줄에 맞도록 */
.clinic-home-section { max-width: calc(var(--max-width) + 2.5rem); margin: 0 auto; padding: var(--section-pad) 1.25rem; }
.clinic-home-section > h2, .clinic-home-section__inner > h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.15; letter-spacing: var(--tracking-display); margin: 0 0 2rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap;
}
.clinic-more { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.clinic-muted { color: var(--color-muted); font-weight: 500; }
.clinic-home-section--surface { background: var(--color-surface); max-width: none; padding-left: 1.25rem; padding-right: 1.25rem; }
.clinic-home-section--surface > .clinic-home-section__inner { max-width: var(--max-width); margin: 0 auto; }
.clinic-home-section--surface .clinic-doctor-card, .clinic-home-section--surface .clinic-post-card, .clinic-home-section--surface .clinic-treatment-card,
.clinic-home-section--surface .clinic-hours-panel, .clinic-home-section--surface .clinic-dept-grid li span { background: var(--color-bg); }

/* 병원 소개·장비 띠 */
.clinic-intro-grid { display: grid; grid-template-columns: minmax(220px, 2fr) 3fr; gap: 2.5rem; align-items: center; }
/* 병원 소개 사진 — 갤러리·히어로 사진이 있으면 그대로, 없으면 진료과 아이콘을 같은 자리에(빈 칸으로 보이지 않게) */
.clinic-intro__photo { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--color-bg); }
.clinic-intro__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clinic-intro__photo iframe { width: 100%; height: 100%; border: 0; display: block; }
.clinic-intro__photo--icon { display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg)); color: var(--color-primary); }
.clinic-intro__photo--icon svg { width: 30%; height: 30%; }
.clinic-intro__lead { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.5; letter-spacing: -0.015em; margin: 0 0 .75rem; }
.clinic-intro__depts { color: var(--color-muted); margin: 0; }
.clinic-intro__h3 { font-size: .9375rem; color: var(--color-muted); margin: 1.5rem 0 .6rem; }
.clinic-equipment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.clinic-equipment-list li { background: var(--color-bg); border-radius: var(--radius-sm); padding: .55em .9em; font-weight: 600; font-size: 1rem; }
@media (max-width: 768px) { .clinic-intro-grid { grid-template-columns: 1fr; gap: 1.5rem; } .clinic-intro__photo { aspect-ratio: 16 / 9; } }

/* 진료 카드 그리드 (첫 화면) */
.clinic-treatment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1.75rem; }
.clinic-treatment-card--compact { margin: 0; padding: 1.75rem 1.75rem 1.5rem; }
.clinic-treatment-card--compact h3 { font-size: 1.25rem; }
.clinic-treatment-card--compact h3 a { color: var(--color-text); }
.clinic-treatment-card--compact h3 a:hover { color: var(--color-primary); text-decoration: none; }
.clinic-treatment-card--compact > p { margin: 0 0 .5rem; }

/* 주제 카드 (글이 없을 때) — 카드 위쪽 색면에 주제 이름을 크게 */
.clinic-post-card__ph { position: relative; }

/* 진료시간·오시는 길 패널 */
.clinic-hours-panel { background: var(--color-surface); border-radius: var(--radius); padding: 1.5rem 1.75rem; }
.clinic-hours-panel .clinic-hours { max-width: none; margin: 0; }
.clinic-hours-panel .clinic-hours tr:last-child th, .clinic-hours-panel .clinic-hours tr:last-child td { border-bottom: 0; }
.clinic-hours-panel .clinic-directions p, .clinic-hours-panel .clinic-directions__phone { margin: 0 0 .75rem; }
.clinic-hours-panel .clinic-directions p:last-child { margin-bottom: 0; }
/* 오시는 길 약도 — 주소 문자만 있던 자리에 지도를 보여준다. 그림자 없이 둥근 모서리로 자른다(디자인 기준). */
.clinic-map { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--color-border); margin: 0 0 1.1rem; }
.clinic-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clinic-hours-panel .clinic-map { margin-bottom: .9rem; }

/* 헤더 전화 버튼 (데스크톱) · 하단 고정 바 (모바일) */
.clinic-header-cta { display: inline-flex; align-items: center; gap: .4rem; margin-left: .75rem; }
.clinic-header-cta .clinic-btn { padding: .55em 1.1em; font-size: .9375rem; }
/* 예약 버튼 — 강조색(accent)이 있으면 그걸로, 없으면 primary. 예약은 병원 홈페이지에서 받는다(이 사이트는 보내기만) */
.clinic-btn--booking { background: var(--color-accent, var(--color-primary)); color: var(--color-on-primary); border-color: transparent; }
.clinic-btn--booking:hover { filter: brightness(.94); color: var(--color-on-primary); }
/* 헤더의 예약 버튼 글씨 — 상위 테마의 메뉴 링크 색(#222)이 덮어써서 색 배경 위에서 어둡게 보였다 */
.site-header .main-navigation .clinic-header-cta .clinic-btn--booking, .site-header .main-navigation .clinic-header-cta .clinic-btn--booking:hover { color: var(--color-on-primary); }
/* 화면을 내리면 따라오는 상단 예약 바 — **좁은 화면 전용**.
   넓은 화면은 헤더(.site-header)가 이미 따라오고 그 안에 예약 버튼이 있어서 이 바를 띄우면 두 겹이 된다.
   맨 위에서는 숨고(첫 화면 버튼과 겹치지 않게), 조금 내리면 나타나 계속 따라다닌다. */
.clinic-sticky-cta { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 80; visibility: hidden; opacity: 0; transform: translateY(-100%);
  transition: transform .22s ease, opacity .22s ease, visibility .22s;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .08); }
.clinic-sticky-cta.is-on { visibility: visible; opacity: 1; transform: none; }
.clinic-sticky-cta__inner { max-width: var(--clinic-content-width, 1100px); margin: 0 auto; display: flex; align-items: center; gap: .5rem; padding: .5rem 1.25rem; }
.clinic-sticky-cta__name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clinic-sticky-cta a { flex: 0 0 auto; display: inline-flex; align-items: center; padding: .5em 1.05em; border-radius: 999px; font-weight: 700; font-size: .9375rem; text-decoration: none; }
.clinic-sticky-cta .clinic-sticky-cta__call { border: 1px solid var(--color-primary); color: var(--color-primary); }
.clinic-sticky-cta .clinic-sticky-cta__book { background: var(--color-accent, var(--color-primary)); color: var(--color-on-primary); }
.clinic-sticky-cta .clinic-sticky-cta__book:hover { filter: brightness(.94); color: var(--color-on-primary); }
@media (prefers-reduced-motion: reduce) { .clinic-sticky-cta { transition: none; } }
.admin-bar .clinic-sticky-cta { top: 32px; }
@media (max-width: 768px) {
  .clinic-sticky-cta { display: block; }
  .clinic-sticky-cta__inner { padding: .45rem .9rem; }
  .clinic-sticky-cta__name { font-size: .95rem; }
  .admin-bar .clinic-sticky-cta { top: 46px; }
}
.clinic-cta-bar { display: none; }
@media (max-width: 768px) {
  /* 좁은 화면에서는 헤더를 따라오게 두지 않는다 — 로고·메뉴까지 계속 붙어 다니면 화면을 많이 먹는다.
     대신 얇은 .clinic-sticky-cta 한 줄(병원명·전화·예약)이 따라온다. 맨 위에서는 헤더의 예약 버튼이 보인다. */
  .site-header { position: static; }
  /* 좁은 화면에서도 예약 버튼은 상단에 남긴다 — 작게 */
  .clinic-header-cta { margin-left: .4rem; }
  .clinic-header-cta .clinic-btn { padding: .45em .9em; font-size: .875rem; }
  /* 상위 테마의 모바일 메뉴가 버튼 줄 높이를 60px 로 늘려 헤더가 두 줄로 깨졌다 — 로고·예약·메뉴를 한 줄에 */
  .site-header .inside-header { flex-wrap: nowrap; align-items: center; padding: .6rem 1rem; }
  .site-header .site-branding-container { flex: 0 0 auto; }
  .site-header .site-logo { max-width: none; }
  .site-header .site-logo img { width: auto; height: 34px; max-width: none; }
  .site-header .mobile-menu-control-wrapper { flex: 0 0 auto; display: flex; align-items: center; width: auto; margin-left: auto; }
  .site-header .main-navigation .clinic-header-cta .clinic-btn { line-height: 1.4; }
  .site-header .main-navigation .menu-toggle { line-height: 1.4; padding: .5rem .7rem; }
  .clinic-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
    background: rgba(0, 0, 0, .08); border-top: 1px solid rgba(0, 0, 0, .08); padding-bottom: env(safe-area-inset-bottom); }
  .clinic-cta-bar a { display: flex; align-items: center; justify-content: center; padding: .95rem .5rem; font-weight: 700; font-size: 1rem; text-decoration: none;
    background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: var(--color-text); }
  .clinic-cta-bar .clinic-cta-bar__call { background: var(--color-primary); color: var(--color-on-primary); }
  .clinic-cta-bar .clinic-cta-bar__book { background: var(--color-accent, var(--color-primary)); color: var(--color-on-primary); }
  body.has-clinic-cta-bar { padding-bottom: 3.6rem; }
}
/* 글 끝 — 홈페이지 링크 + 예약 버튼 (GA link_location=post) */
.clinic-post-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.clinic-post-cta__book { display: inline-block; padding: .5em 1.1em; border-radius: 980px; font-weight: 600; font-size: .9375rem; text-decoration: none;
  background: var(--color-accent, var(--color-primary)); color: var(--color-on-primary); }
.clinic-post-cta__book:hover { filter: brightness(.94); color: var(--color-on-primary); text-decoration: none; }

/* 진료과목 — 알약 모양 칩 */
.clinic-dept-grid { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.clinic-dept-grid li a, .clinic-dept-grid li span {
  display: inline-block; padding: .7em 1.3em; background: var(--color-surface); border-radius: var(--radius-pill);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.clinic-dept-grid li a { color: var(--color-primary); }
.clinic-dept-grid li a:hover { background: var(--color-primary); color: var(--color-on-primary); text-decoration: none; }

/* 칼럼·블로그 카드 — 그림자·테두리 없이 바탕색 차이와 둥근 모서리로만 구분 */
.clinic-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.clinic-post-card { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--color-text); }
.clinic-post-card:hover { text-decoration: none; }
.clinic-post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.clinic-post-card__ph { aspect-ratio: 16 / 9; background: var(--color-border); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); }
.clinic-post-card__body { padding: 1.5rem 1.75rem 1.75rem; }
.clinic-post-card__cat { font-size: .875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-secondary); }
.clinic-post-card__title { font-size: 1.1875rem; font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.35; margin: .4rem 0 .6rem; }
.clinic-post-card__date { font-size: .875rem; color: var(--color-muted); }
.clinic-post-card:hover .clinic-post-card__title { color: var(--color-primary); }
/* 칼럼·블로그에 아직 글이 없을 때 — 빈 색상 상자 여러 개 대신 아이콘 하나 + 안내 한 줄 (사진이 아니라 아이콘: specialty_icon 주석 참고) */
.clinic-empty-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  padding: 3.5rem 1.5rem; border-radius: var(--radius); background: var(--color-surface); text-align: center; }
.clinic-home-section--surface .clinic-empty-panel { background: var(--color-bg); }
.clinic-empty-panel__icon { width: 72px; height: 72px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.clinic-home-section--surface .clinic-empty-panel__icon { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)); }
.clinic-empty-panel__icon svg { width: 34px; height: 34px; }

.clinic-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 768px) { .clinic-info-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ============================================================
   3. 공통 블록 (페이지·글)
   ============================================================ */
.clinic-section { margin: 0 0 3.5rem; }
.clinic-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: var(--tracking-display); margin: 0 0 1.25rem; }
.clinic-hours { width: 100%; max-width: 480px; border-collapse: collapse; margin: 0 0 1rem; }
.clinic-hours th, .clinic-hours td { text-align: left; padding: .8rem 0; border-bottom: 1px solid var(--color-border); }
.clinic-hours th { width: 30%; color: var(--color-muted); font-weight: 600; }
.clinic-dept-list, .clinic-doctor-list { padding-left: 1.2rem; }
.clinic-badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: .2em .7em; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-secondary); vertical-align: middle; margin-left: .4em; }

/* 의료진 카드 — 사진(3:4)이 있으면 위에, 없으면 이름 첫 글자 원. 한 명뿐이어도 카드가 홀로 떠 보이지 않게 폭을 제한 */
.clinic-doctor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 420px)); gap: 1.5rem; justify-content: start; }
.clinic-doctor-card { background: var(--color-surface); border-radius: var(--radius); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.clinic-doctor-card__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block; }
.clinic-doctor-card--compact .clinic-doctor-card__photo { aspect-ratio: 4 / 3; }
.clinic-doctor-card__avatar { margin: 2rem 2rem 0; width: 4.5rem; height: 4.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; font-weight: 700; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg)); }
.clinic-doctor-card__body { padding: 1.5rem 2rem 2.25rem; }
.clinic-doctor-card h3 { margin: 0 0 .35rem; font-size: 1.5rem; }
.clinic-doctor-role { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--color-muted); margin-left: .4em; }
.clinic-doctor-license { color: var(--color-secondary); font-weight: 600; margin: 0 0 1rem; }
.clinic-doctor-bio { margin: 0 0 .75rem; }
.clinic-doctor-card h4 { font-size: .9375rem; margin: 1.1rem 0 .35rem; color: var(--color-muted); }
.clinic-doctor-card ul { margin: 0; padding-left: 1.1rem; font-size: 1rem; }
.clinic-doctor-card__more { margin: 1rem 0 0; font-weight: 600; }

/* 고정 페이지 제목·본문 — GeneratePress 기본 크기를 그대로 두면 첫 화면과 다른 사이트처럼 보인다 */
.page .entry-header h1, .page .entry-title { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: var(--tracking-display); margin: 0 0 1.25rem; }
.page .entry-content { line-height: 1.8; }
.page .entry-content > p:first-of-type { font-size: 1.1875rem; color: var(--color-muted); }

/* 병원 둘러보기 (병원소개 페이지) */
.clinic-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.clinic-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius-sm); }

.clinic-treatment-card { background: var(--color-surface); border-radius: var(--radius); padding: 2rem; margin: 0 0 1.5rem; }
.clinic-treatment-card h3 { margin: 0 0 .75rem; font-size: 1.5rem; }

/* 부작용·한계 고지 — 제56조②7호: 본문과 같은 가독성. 글자 크기·색·줄간격을 줄이지 않는다. */
.clinic-notice { font-size: inherit; color: inherit; line-height: inherit; border-left: 3px solid var(--color-accent); padding: .25rem 0 .25rem 1.1rem; margin: 1.25rem 0; }
.clinic-notice h4 { font-size: inherit; margin: 0 0 .3rem; color: inherit; }
.clinic-notice p { margin: 0; }

/* 직접 답변 박스 — AI 인용 대상 */
.clinic-direct-answer { background: var(--color-surface); border-radius: var(--radius); padding: 1.75rem 2rem; margin: 0 0 2rem; font-size: 1.1875rem; line-height: 1.6; letter-spacing: -0.015em; }
.clinic-direct-answer strong { display: block; color: var(--color-secondary); font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: .5rem; }

.clinic-faq { margin: 3.5rem 0; }
.clinic-faq h2 { font-size: 1.75rem; }
.clinic-faq dl { margin: 0; }
.clinic-faq dt { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.015em; margin: 0; padding: 1.25rem 0 .4rem; border-top: 1px solid var(--color-border); }
.clinic-faq dt:first-child { border-top: 0; padding-top: 0; }
.clinic-faq dd { margin: 0; }

.clinic-sources { margin: 2.5rem 0; font-size: .9375rem; color: var(--color-muted); }
.clinic-sources h2 { font-size: 1.25rem; color: var(--color-text); }
.clinic-sources ol { padding-left: 1.3rem; }

.clinic-author-box { display: flex; gap: 1.25rem; align-items: flex-start; background: var(--color-surface); border-radius: var(--radius); padding: 1.75rem 2rem; margin: 3rem 0 1.25rem; }
.clinic-author-box__label { font-size: .875rem; font-weight: 600; color: var(--color-muted); }
.clinic-author-box__name { font-size: 1.1875rem; font-weight: 700; letter-spacing: var(--tracking-tight); }
.clinic-author-box__home { margin: .6rem 0 0; font-size: .9375rem; }
.clinic-author-box__home a { color: var(--color-primary); text-decoration: none; }
.clinic-author-box__home a:hover { text-decoration: underline; }
.clinic-author-box__cred { color: var(--color-secondary); font-size: .9375rem; font-weight: 600; }
.clinic-author-box__bio { font-size: .9375rem; margin: .4rem 0 0; }

.clinic-disclaimer { font-size: .95rem; color: var(--color-text); border-top: 1px solid var(--color-border); padding-top: 1.25rem; margin: 2rem 0 0; }
.clinic-disclaimer p { margin: 0 0 .4rem; }

.clinic-related { margin: 3.5rem 0 0; }
.clinic-related h2 { font-size: 1.5rem; margin-bottom: 1.25rem; }

.clinic-byline { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9375rem; color: var(--color-muted); margin: 0 0 2rem; }
.clinic-byline .clinic-byline__author { color: var(--color-text); font-weight: 600; }
.single-post .entry-meta, .single-post .posted-on, .single-post .byline { display: none; }

.clinic-breadcrumb { font-size: .875rem; color: var(--color-muted); margin: 0 0 1.25rem; }
.clinic-breadcrumb a { color: var(--color-muted); }
.clinic-breadcrumb a:hover { color: var(--color-primary); }

.clinic-legal-line { font-size: .875rem; color: var(--color-muted); margin-top: 2rem; }
.clinic-todo-note { color: #B45309; font-style: italic; }
.clinic-effective { color: var(--color-muted); font-size: .9375rem; }

/* 푸터 법정 표기 */
.site-info { background: var(--color-surface); }
.clinic-legal { font-size: .85rem; line-height: 1.8; color: var(--color-muted); }
.clinic-legal > div + div { margin-top: .3rem; }
.clinic-legal__links a { margin-right: 1.25rem; color: var(--color-text); }
.clinic-legal__links a:hover { color: var(--color-primary); }

/* 카테고리 아카이브 — 카드형 그리드 (archive.php) */
.clinic-archive { max-width: var(--max-width); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) 1.25rem var(--section-pad); }
.archive .page-header { margin-bottom: .5rem; }
.archive .page-header h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: var(--tracking-display); margin: 0; }
.clinic-archive-intro { color: var(--color-muted); font-size: 1.1875rem; line-height: 1.55; max-width: 40em; margin: 1rem 0 3rem; }
.clinic-archive-empty { color: var(--color-muted); padding: 2rem 0; }
.clinic-archive-sub { margin: 3rem 0 1.25rem; }
.clinic-archive-more { margin: 2rem 0 0; text-align: center; }
.clinic-archive .clinic-post-grid { margin-bottom: 3rem; }
.pagination, .navigation.pagination { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6em; height: 2.6em; padding: 0 .7em; border-radius: var(--radius-pill); background: var(--color-surface); text-decoration: none; color: var(--color-text); font-weight: 600; font-size: .9375rem; }
.pagination .page-numbers.current { background: var(--color-primary); color: var(--color-on-primary); }
.pagination .page-numbers:hover:not(.current) { color: var(--color-primary); }
.pagination .page-numbers.dots { background: none; }

/* 기사 본문 */
.single-post .entry-title, .single-post > h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; letter-spacing: var(--tracking-display); margin: 0 0 1rem; }
.single-post .entry-content { line-height: 1.85; }
.single-post .entry-content h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.25; letter-spacing: var(--tracking-display); margin: 3rem 0 1rem; scroll-margin-top: 90px; }
.single-post .entry-content h3 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.single-post .entry-content table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 1rem; }
.single-post .entry-content th, .single-post .entry-content td { text-align: left; border-bottom: 1px solid var(--color-border); padding: .7rem .8rem; }
.single-post .entry-content th { background: var(--color-surface); font-weight: 600; }
.single-post .entry-content img { border-radius: var(--radius); }

@media (max-width: 480px) {
  .clinic-hero { padding: 4rem 1.25rem 3.5rem; }
  .clinic-home-section { padding: 3.5rem 1.25rem; }
  .clinic-home-section > h2, .clinic-home-section__inner > h2 { font-size: 1.625rem; gap: .35rem .75rem; }
  .clinic-more { font-size: .9375rem; }
  .clinic-doctor-card__body, .clinic-treatment-card, .clinic-direct-answer, .clinic-author-box, .clinic-hours-panel { padding: 1.5rem; }
  .clinic-doctor-card__avatar { margin: 1.5rem 1.5rem 0; }
  .clinic-doctor-grid { grid-template-columns: 1fr; }
  .clinic-author-box { flex-direction: column; }
}

@media print {
  .site-header, .site-footer, .clinic-related, .clinic-hero__actions { display: none; }
  .site-header { position: static; }
}

/* ============================================================
   404 — 없는 주소 안내 (404.php)
   ============================================================ */
.clinic-404 { max-width: 720px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.clinic-404__lead { color: var(--color-muted); margin: .5rem 0 1.5rem; }
.clinic-404__search { margin: 0 0 2rem; }
.clinic-404__section { margin: 1.75rem 0; }
.clinic-404__section h2 { font-size: 1.125rem; margin: 0 0 .6rem; }
.clinic-404__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.clinic-404__links li { background: var(--color-surface); border-radius: var(--radius); padding: .5rem .9rem; }
.clinic-404__links a { color: var(--color-primary); text-decoration: none; }
.clinic-404__links a:hover { text-decoration: underline; }
.clinic-404__count { color: var(--color-muted); font-size: .875rem; margin-left: .25rem; }
.clinic-post-card__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }