/* =====================================================================
   아이누리 한의원 — 콘텐츠(아카이브) 페이지 스타일
   ===================================================================== */
.page-head { background: radial-gradient(circle at 80% -10%, var(--accent-wash) 0, transparent 55%), #fff; padding: clamp(48px,7vw,84px) 0 clamp(36px,5vw,52px); border-bottom: 1px solid var(--inuri-line); }
.page-head .kick { margin-bottom: 16px; }
.page-head h1 { font-size: var(--t-display); margin: 0; letter-spacing: -0.04em; }
.page-head p { font-size: var(--t-lead); color: var(--inuri-ink-2); margin: 18px 0 0; font-weight: 500; max-width: 560px; }

/* ---------- 단일 글 (single post) ---------- */
/* 제목/본문 컨테이너 폭을 하나의 글 너비로 통일 */
.single { --article-w: 1104px; }
.single .wrap { max-width: var(--article-w); }
/* 글 제목은 디스플레이(히어로) 크기 대신 h1 스케일 — 본문과의 위계 정돈 */
.single .page-head { padding: clamp(40px,6vw,72px) 0 clamp(28px,4vw,40px); }
.single .page-head h1 { font-size: var(--t-h1); line-height: 1.25; letter-spacing: -0.03em; }
.single .page-head .post-date { font-size: var(--t-sm); color: var(--inuri-ink-3); font-weight: 500; margin-top: 16px; max-width: none; }
/* 제목 영역과 본문/리스팅 사이 여백 축소 (기본 sec-pad 의 큰 상단 패딩 완화) */
.single .sec-pad { padding-top: clamp(24px, 3.5vw, 40px); }
.content-archive { padding-top: clamp(16px, 2.5vw, 28px); }
/* 리스팅 페이지: 제목 영역 하단 패딩도 함께 축소 */
.content-archive-head { padding-bottom: clamp(20px, 3vw, 32px); }

/* 본문 타이포그래피 */
.entry { font-size: var(--t-body); line-height: 1.8; color: var(--inuri-ink-2); }
.entry > * { margin: 0; }                       /* 자식 기본 여백 리셋 (owl 패턴 기준선) */
.entry > * + * { margin-top: 1.8em; }           /* 문단 사이 기본 상하 여백 */
.entry h2 { font-size: var(--t-h3); line-height: 1.35; color: var(--inuri-ink); letter-spacing: -0.02em; margin-top: 2.4em; }
.entry h3 { font-size: calc(var(--t-body) * 1.15); line-height: 1.4; color: var(--inuri-ink); margin-top: 2em; }
.entry h2 + *, .entry h3 + * { margin-top: 0.6em; }  /* 헤딩 바로 다음 단락은 붙임 */
.entry a { color: var(--inuri-ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .14s ease; }
.entry a:hover { color: var(--accent-deep); }
.entry strong { color: var(--inuri-ink); font-weight: 700; }
.entry ul, .entry ol { margin-left: 0; padding-left: 1.3em; }
.entry li + li { margin-top: 0.5em; }
.entry img { max-width: 100%; height: auto; border-radius: var(--r-lg); }
.entry blockquote { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); color: var(--inuri-ink); font-weight: 500; }
.entry hr { border: 0; border-top: 1px solid var(--inuri-line); }

/* 참고 자료 · 외부 링크 (본문 하단) */
.post-refs { margin-top: 48px; padding: 26px 28px; background: var(--inuri-cream-2); border: 1px solid var(--inuri-line); border-radius: var(--r-lg); }
.post-refs-title { font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.04em; color: var(--inuri-ink-3); margin: 0 0 14px; text-transform: uppercase; }
.post-refs-title::before { content: "🔗 "; }
.ref-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ref-item { margin: 0; }
.ref-item a { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; margin: 0 -12px; border-radius: var(--r-md, 12px); color: var(--inuri-ink); text-decoration: none; transition: background .14s ease, color .14s ease; }
.ref-item a:hover { background: #fff; color: var(--accent-deep); box-shadow: var(--sh-sm); }
.ref-title { font-weight: 600; font-size: 15px; line-height: 1.5; }
.ref-host { font-size: 12.5px; color: var(--inuri-ink-3); white-space: nowrap; }
.ref-go { margin-left: auto; color: var(--accent-deep); font-weight: 700; flex: none; }

.single .post-nav { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--inuri-line); }

.fchips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 36px; }
.fchip { font-family: var(--head-font); font-weight: 700; font-size: 14px; color: var(--inuri-ink-2); background: #fff; border: 1px solid var(--inuri-line); padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer; transition: all .14s ease; }
.fchip:hover { border-color: var(--accent); color: var(--inuri-ink); }
.fchip.active { background: linear-gradient(180deg, var(--accent-bright), var(--accent)); color: var(--accent-on); border-color: transparent; box-shadow: var(--sh-yellow); }

.cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 920px) { .cards { grid-template-columns: repeat(3,1fr); } }
.ccard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--inuri-line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; }
.ccard:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.ccard .thumb { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--inuri-cream-2); }
.ccard .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard .thumb.placeholder { display: grid; place-items: center; color: var(--inuri-ink-3); font-size: 13px; font-weight: 600; }
.ccard .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.ccard .cat { font-size: 12.5px; font-weight: 700; color: var(--accent-deep); }
.ccard h3 { font-size: 19px; margin: 9px 0 9px; line-height: 1.42; }
.ccard .ex { font-size: 14px; color: var(--inuri-ink-2); font-weight: 500; line-height: 1.6; margin: 0 0 16px; }
.ccard .date { font-size: 12.5px; color: var(--inuri-ink-3); margin-top: auto; }

/* ---------- 콘텐츠 게시판형 리스트 (블로그 아카이브) ---------- */
.post-list { border-top: 1px solid var(--inuri-line); }
.post-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  grid-template-areas: "thumb main date";
  align-items: center; gap: 24px;
  padding: 22px 12px;
  border-bottom: 1px solid var(--inuri-line);
  transition: background .2s ease;
}
.post-row:hover { background: var(--inuri-cream-2); }
.post-row__thumb {
  grid-area: thumb; width: 132px; aspect-ratio: 16 / 11;
  border-radius: var(--r-md); overflow: hidden; background: var(--inuri-cream-2);
}
.post-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.post-row:hover .post-row__thumb img { transform: scale(1.05); }
.post-row__thumb-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--inuri-ink-3); font-size: 12px; font-weight: 600; }
.post-row__main { grid-area: main; min-width: 0; }
.post-row__cat { font-size: 12px; font-weight: 700; color: var(--accent-deep); letter-spacing: .01em; }
.post-row__title {
  font-size: 18px; line-height: 1.45; color: var(--inuri-ink); margin: 4px 0 6px; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.post-row:hover .post-row__title { color: var(--accent-deep); }
.post-row__ex {
  font-size: 13.5px; color: var(--inuri-ink-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-row__date {
  grid-area: date; justify-self: end; white-space: nowrap;
  font-size: 13px; color: var(--inuri-ink-3); font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .post-row {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas: "thumb main" "thumb date";
    align-items: start; gap: 4px 16px; padding: 18px 4px;
  }
  .post-row__thumb { width: 92px; }
  .post-row__title { -webkit-line-clamp: 2; font-size: 16px; }
  .post-row__date { justify-self: start; margin-top: 6px; }
}

.more-wrap { display: flex; justify-content: center; margin-top: 48px; }
.content-empty { text-align: center; color: var(--inuri-ink-3); font-weight: 500; padding: 60px 0; }

/* 팝업: .popup-ov 가 display:grid 라서 [hidden] 기본 규칙을 덮어쓰므로 명시적으로 숨김 */
.popup-ov[hidden] { display: none !important; }

/* ---------- 브랜드 로고 (공식 아이누리 로고 + 지점명) ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-sub { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; white-space: nowrap; color: var(--inuri-ink-3); padding-left: 10px; border-left: 1px solid var(--inuri-line); }
.brand--light .brand-sub { color: rgba(255,255,255,.65); border-left-color: rgba(255,255,255,.22); }
.ft .brand-logo { height: 28px; }

/* logo.gif(헤더)는 1회 재생(5.36s) 후 마지막 프레임에서 멈추며 오른쪽에 공백이 남는다.
   재생이 끝나는 시점에 지점명(평촌점)을 10px 왼쪽으로 당겨 로고에 붙인다. */
.hd .brand-sub { animation: brand-sub-shift 0.35s ease 4.7s forwards; }
@keyframes brand-sub-shift { to { transform: translateX(-30px); } }
@media (prefers-reduced-motion: reduce) {
  .hd .brand-sub { animation: none; transform: translateX(-30px); }
}

/* ---------- GNB active / hover (브랜드색 + 노란 밑줄) ---------- */
/* 최상위 GNB 링크만 — 메가메뉴 안 링크(.hd-mega)에 밑줄이 번지지 않도록 스코프 제한 */
.hd nav > a, .hd nav .hd-drop > a { position: relative; padding-bottom: 4px; font-size: 17px; font-weight: 700; }
.hd nav > a::after, .hd nav .hd-drop > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.hd nav > a:hover::after, .hd nav .hd-drop > a:hover::after,
.hd nav .hd-drop:hover > a::after, .hd nav .hd-drop:focus-within > a::after, /* 메가 패널 열림 동안 유지 */
.hd nav > a.is-active::after, .hd nav .hd-drop > a.is-active::after { transform: scaleX(1); }
.hd nav > a.is-active, .hd nav .hd-drop > a.is-active { color: var(--accent-deep); }

/* PC GNB 확대 — 가독성 ↑ (높이·메뉴·로고·버튼), 메뉴↔버튼 간격 확대 */
@media (min-width: 768px) {
  .hd-in { height: 88px; }
  .hd nav { gap: 36px; margin-left: auto; }
  .hd nav > a, .hd nav .hd-drop > a { font-size: 18.5px; }
  .hd-cta { margin-left: 40px; }
  .hd-cta .btn.sm { font-size: 15.5px; padding: 13px 27px; }
  .brand-logo { height: 34px; }
  .brand-sub { font-size: 15px; }
}

/* 모바일 메뉴 active 색상 */
.hd-mobile a.is-active { color: var(--accent-deep); }

/* ---------- 모바일 헤더: 햄버거 메뉴 ---------- */
.hd-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: none; background: transparent; cursor: pointer; flex: none; }
.hd-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--inuri-ink); margin: 0 auto; transition: transform .25s ease, opacity .2s ease; }
.hd.menu-open .hd-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd.menu-open .hd-burger span:nth-child(2) { opacity: 0; }
.hd.menu-open .hd-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hd-mobile { display: none; flex-direction: column; gap: 2px; padding: 10px var(--pad-mob) 18px; border-top: 1px solid var(--inuri-line); background: rgba(255,255,255,.97); backdrop-filter: blur(14px); }
.hd-mobile a { padding: 13px 6px; font-family: var(--head-font); font-weight: 700; font-size: 16px; color: var(--inuri-ink-2); }
.hd-mobile a:hover { color: var(--inuri-ink); }
.hd-mobile a.btn { margin-top: 8px; justify-content: center; color: var(--accent-on); }
.hd.menu-open .hd-mobile { display: flex; }

@media (max-width: 559px) {
  .hd .hd-cta { display: none !important; }   /* 모바일 GNB에서 예약하기 버튼 제거 */
  .hd .hd-burger { display: flex !important; }
  .hd-in .logo { min-width: 0; flex: 0 1 auto; }
  .hd-burger { margin-left: auto; }           /* 항상 우측 정렬 */
  .brand-logo { height: 26px; }               /* 모바일 로고 축소 → 햄버거 공간 확보 */
  .brand-sub { font-size: 13px; padding-left: 8px; }
}
@media (min-width: 560px) {
  .hd-mobile { display: none !important; }  /* 데스크탑에선 모바일 패널 숨김 */
}

/* ---------- 본원 페이지 삽입 (template-embed.php) ---------- */
/* 스크린리더 전용 제목 — iframe 콘텐츠가 시각적 제목을 가지므로 숨김 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 헤더(74px sticky) 아래 화면을 가득 채우는 본원 iframe — 내부 스크롤 */
.embed-frame { display: block; width: 100%; height: calc(100vh - 74px); border: 0; background: #fff; }
@supports (height: 100svh) {
  .embed-frame { height: calc(100svh - 74px); }  /* 모바일 주소창 변동 대응 */
}
/* iframe 아래 관련 글로 점프하는 플로팅 버튼 (JS: initEmbedScroll) */
.embed-jump { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60;
  display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border-radius: 999px;
  background: var(--inuri-ink, #2b2b2b); color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); transition: opacity .25s ease, transform .25s ease; }
.embed-jump:hover { color: #fff; transform: translateX(-50%) translateY(-2px); }
.embed-jump.is-hidden { opacity: 0; pointer-events: none; }

/* iframe 아래 관련 진료과목 블로그 카드 (inc/post-medical.php) */
.medical-related { background: var(--inuri-cream, #faf7f2); border-top: 1px solid var(--inuri-line); }
.medical-related-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.medical-related-head h2 { font-size: clamp(20px, 3vw, 26px); margin: 0; }

/* ---------- 원고 HTML (inc/post-html.php, Shadow DOM 격리) ---------- */
.inuri-doc { border-radius: var(--r-lg); overflow: hidden; }

/* ── 치료후기 잠금(비로그인) — 제목만 공개, 썸네일 블러, 클릭 시 로그인 ── */
.ccard.is-locked .thumb,
.post-row--locked .post-row__thumb { position: relative; overflow: hidden; }
.ccard.is-locked .thumb img,
.post-row--locked .post-row__thumb img { filter: blur(18px) saturate(.8); transform: scale(1.15); }
.ccard.is-locked:hover .thumb img { transform: scale(1.15); }

.lock-badge {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #fff;
    background: rgba(43, 39, 35, .34);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.lock-badge svg { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.lock-badge--sm { font-size: 0; gap: 0; } /* 행 리스팅의 작은 썸네일은 자물쇠 아이콘만 */
.lock-badge--sm svg { width: 20px; height: 20px; }

.ccard.is-locked .lock-note,
.post-row__lock-note { color: var(--text-faint, #9a938b); }

/* 잠긴 후기 상세(비로그인) — 본문 자리의 안내 상자. 로그인 시엔 같은 .entry 에 본문이 온다(JSON-LD hasPart cssSelector) */
.review-lock {
    max-width: 640px; margin: 0 auto; padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 36px);
    text-align: center; background: #fff; border: 1px solid var(--inuri-line); border-radius: var(--r-lg);
}
.review-lock__icon { width: 36px; height: 36px; color: var(--accent); margin: 0 auto 14px; display: block; }
.review-lock__text { font-weight: 700; color: var(--inuri-ink); margin: 0 0 8px; }
.review-lock__sub { font-size: 15px; color: var(--inuri-ink-3); margin: 0 0 22px; }
.review-lock__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- 진료과목 승격 랜딩 (inc/medical-landing.php) ----------
   본원 iframe 은 그대로 두고, 위아래에 지점 고유 블록을 붙인 페이지. */
.ml-head { background: var(--inuri-cream); border-bottom: 1px solid var(--inuri-line); padding: clamp(28px, 5vw, 52px) 0 clamp(22px, 4vw, 36px); }
.ml-crumb { font-size: 13px; color: var(--inuri-ink-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; }
.ml-crumb a { color: inherit; text-decoration: none; }
.ml-crumb a:hover { color: var(--accent); text-decoration: underline; }
.ml-h1 { font-size: clamp(26px, 4.4vw, 40px); line-height: 1.25; margin: 0 0 12px; letter-spacing: -.01em; }
.ml-meta { font-size: 15px; color: var(--inuri-ink-2); margin: 0 0 18px; line-height: 1.6; }
.ml-meta strong { color: var(--inuri-ink); font-weight: 700; }
.ml-dot { margin: 0 8px; color: var(--inuri-ink-3); }
.ml-cta { display: flex; flex-wrap: wrap; gap: 10px; }

.ml-info { background: var(--inuri-cream-2); border-top: 1px solid var(--inuri-line); }
.ml-info-title { font-size: clamp(20px, 3vw, 26px); margin: 0 0 26px; }
.ml-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }
.ml-card { padding: 24px; }
.ml-card-title { font-size: 15px; font-weight: 700; margin: 0 0 16px; color: var(--inuri-ink); }
.ml-card .info-row:first-of-type { padding-top: 0; }
.ml-doc { display: flex; gap: 14px; align-items: flex-start; }
.ml-doc-photo { flex: none; }
.ml-doc-name { margin: 0 0 6px; font-weight: 700; font-size: 17px; color: var(--inuri-ink); }
.ml-doc-name span { font-weight: 500; font-size: 14px; color: var(--inuri-ink-3); margin-left: 6px; }
.ml-doc-quote { margin: 0; font-size: 14px; line-height: 1.65; color: var(--inuri-ink-2); }
.ml-note { margin: 16px 0 0; font-size: 14px; }
.ml-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
.ml-note a:hover { text-decoration: underline; }
.ml-source { margin: 26px 0 0; font-size: 13.5px; color: var(--inuri-ink-3); line-height: 1.7; }
.ml-source a { color: var(--accent); font-weight: 600; }

@media (max-width: 640px) {
  .ml-card { padding: 20px; }
  .ml-info-title { margin-bottom: 18px; }
}