/* sitehub 공통 모양 — 색 · 글꼴 · 둥글기는 병원 스킨(/_hub/skin.css)의 변수로 */
.hublayer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 9000; }
.hublayer--mobile { z-index: 9001; position: fixed; inset: 0; width: auto; height: auto; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .45); }
.hublayer--preview { position: absolute; z-index: 1; }
.hublayer--preview.hublayer--mobile { position: absolute; }
.hubpop { position: absolute; box-sizing: border-box; background: var(--hub-bg, #fff); color: var(--hub-ink, #222);
  font-family: var(--hub-font, system-ui, sans-serif); font-size: 15px; line-height: 1.6; overflow: hidden; }
.hublayer--mobile .hubpop { position: relative; width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.hubpop__body { overflow: auto; max-height: 70vh; }
.hubpop__body.is-link { cursor: pointer; }
.hubpop__body img { display: block; max-width: 100%; height: auto; }
.hubpop__body p { margin: 0 0 .6em; padding: 0 22px; }
.hubpop__body > :first-child { padding-top: 22px; }
.hubpop__body > :last-child { padding-bottom: 14px; margin-bottom: 0; }
.hubpop__body p:has(> img:only-child) { padding: 0; margin: 0; }
.hubpop__body p:has(> img:only-child) + p { padding-top: 18px; }
/* 본문에서 쓸 수 있는 모양 (sanitize 허용 class) — 색은 스킨 변수 */
.hub-kicker { font-size: 12px !important; letter-spacing: .3em; text-transform: uppercase; color: var(--hub-brand, #666); }
.hub-meta { font-size: 13px; color: var(--hub-ink-2, #777); line-height: 1.7; }
a.hub-btn { display: inline-block; margin: 4px 3px; padding: 10px 18px; border: 1px solid var(--hub-brand, #333); border-radius: var(--hub-radius, 6px);
  color: var(--hub-brand, #333); font-weight: 700; text-decoration: none; font-family: var(--hub-font, sans-serif) !important; }
a.hub-btn--primary { background: var(--hub-brand, #333); color: var(--hub-brand-ink, #fff); }
.hubpop__title { padding: 28px 22px; margin: 0; font-weight: 700; font-size: 17px; text-align: center; }
.hubpop__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hubpop__bar button { border: 0; background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; padding: 10px 14px; }
/* ── 팝업 모양 7가지 (색 · 둥글기 · 글꼴은 스킨 변수) ── */
/* 그누보드형 — 아래 진한 띠 */
.hubpop--classic { border: 1px solid var(--hub-line, #ccc); box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }
.hubpop--classic .hubpop__bar { background: var(--hub-bar, #333); color: var(--hub-bar-ink, #fff); }
/* 모던 카드 — 둥근 모서리 · 옅은 아래 띠 */
.hubpop--modern { border-radius: var(--hub-radius, 12px); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .35); }
.hubpop--modern .hubpop__bar { border-top: 1px solid var(--hub-line, #e5e5e5); background: var(--hub-soft, #f6f6f6); }
.hubpop--modern .hubpop__close { font-weight: 700; color: var(--hub-brand, #333); }
/* 개원 안내형 — 병원 로고 띠 · 가운데 정렬 · 아래 버튼 둘로 나눔 (송도화담 2026-10 개원 팝업) */
.hubpop--opening { box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.hubpop__band { display: flex; align-items: center; justify-content: center; min-height: 92px;
  background: radial-gradient(120% 90% at 75% 30%, var(--hub-paper, #faf7f2), var(--hub-soft, #eee) 50%, var(--hub-line, #ddd)); }
.hubpop__band img.is-band { display: block; width: 100%; height: auto; }
.hubpop__band img.is-logo { display: block; max-width: 70%; max-height: 64px; width: auto; height: auto; padding: 22px 0; }
.hubpop--opening .hubpop__body { text-align: center; }
.hubpop--opening .hubpop__body p { font-family: var(--hub-serif, var(--hub-font, serif)); }
.hubpop--opening .hubpop__body p.hub-kicker, .hubpop--opening .hubpop__body p.hub-meta { font-family: var(--hub-font, sans-serif); }
.hubpop--opening .hubpop__bar { gap: 0; border-top: 1px solid var(--hub-line, #e5e5e5); }
.hubpop--opening .hubpop__bar button { flex: 1; padding: 13px; color: var(--hub-ink-2, #777); }
.hubpop--opening .hubpop__bar button + button { border-left: 1px solid var(--hub-line, #e5e5e5); color: var(--hub-ink, #222); }
/* 제목 띠형 — 위에 병원 색 띠 + 제목 */
.hubpop--titlebar { border-radius: var(--hub-radius, 8px); box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .35); }
.hubpop__head { background: var(--hub-brand, #333); color: var(--hub-brand-ink, #fff); font-weight: 700; font-size: 16px; padding: 14px 20px; }
.hubpop--titlebar .hubpop__bar { border-top: 1px solid var(--hub-line, #e5e5e5); }
.hubpop--titlebar .hubpop__close { color: var(--hub-brand, #333); font-weight: 700; }
/* 미니멀 — 얇은 선, 글자 버튼만 오른쪽에 */
.hubpop--minimal { border: 1px solid var(--hub-line, #ddd); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .25); }
.hubpop--minimal .hubpop__bar { justify-content: flex-end; gap: 2px; }
.hubpop--minimal .hubpop__bar button { font-size: 12px; color: var(--hub-ink-2, #888); padding: 8px 12px; }
.hubpop--minimal .hubpop__close { color: var(--hub-ink, #222) !important; text-decoration: underline; }
/* 사진 꽉 채움 — 사진 위 아래쪽에 반투명 버튼 */
.hubpop--photo { border-radius: var(--hub-radius, 10px); box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .45); }
.hubpop--photo .hubpop__bar { position: absolute; left: 0; right: 0; bottom: 0; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62)); padding-top: 26px; }
.hubpop--photo .hubpop__body { max-height: none; }
.hublayer--mobile .hubpop--photo .hubpop__bar { position: absolute; }
/* 다크 — 어두운 카드 */
.hubpop--dark { background: #1E2328; color: #EEF1F4; border-radius: var(--hub-radius, 10px); box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .6); }
.hubpop--dark .hubpop__bar { border-top: 1px solid rgba(255, 255, 255, .12); color: #C9D1D9; }
.hubpop--dark .hubpop__close { color: var(--hub-accent, #F2B544); font-weight: 700; }
.hubpop--dark a { color: var(--hub-accent, #F2B544); }
.hubpop--dark .hub-meta { color: #AEB7C0; }

/* 공지 */
.hubnotice { font-family: var(--hub-font, system-ui, sans-serif); color: var(--hub-ink, #222); }
.hubnotice__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hub-brand, #333); }
.hubnotice__item { border-bottom: 1px solid var(--hub-line, #e5e5e5); }
.hubnotice__link { display: flex; align-items: center; gap: 10px; padding: 14px 6px; color: inherit; text-decoration: none; }
.hubnotice__link:hover .hubnotice__title { text-decoration: underline; }
.hubnotice__pin { flex: none; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--hub-brand, #333); color: var(--hub-brand-ink, #fff); }
.hubnotice__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hubnotice__date { flex: none; font-size: 13px; color: var(--hub-ink-2, #777); font-variant-numeric: tabular-nums; }
.hubnotice__empty { color: var(--hub-ink-2, #777); padding: 20px 6px; }
.hubnotice__pages { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 18px; }
.hubnotice__pages button { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--hub-line, #ddd); background: var(--hub-bg, #fff); color: inherit; border-radius: 6px; cursor: pointer; font: inherit; font-size: 14px; }
.hubnotice__pages button:disabled { opacity: .4; cursor: default; }
.hubnotice__pages button.is-on { background: var(--hub-brand, #333); color: var(--hub-brand-ink, #fff); border-color: transparent; cursor: default; }
.hubnotice__count { width: 100%; text-align: center; font-size: 13px; color: var(--hub-ink-2, #777); font-variant-numeric: tabular-nums; margin-top: 2px; }
.hubnotice__view { border-top: 2px solid var(--hub-brand, #333); padding-top: 14px; }
.hubnotice__vtitle { margin: 0 0 4px; font-size: 20px; }
.hubnotice__vdate { margin: 0 0 18px; color: var(--hub-ink-2, #777); font-size: 13px; }
.hubnotice__body { line-height: 1.8; overflow-wrap: anywhere; }
.hubnotice__body img { max-width: 100%; height: auto; }
.hubnotice__body table { border-collapse: collapse; max-width: 100%; }
.hubnotice__body td, .hubnotice__body th { border: 1px solid var(--hub-line, #ddd); padding: 6px 8px; }
.hubnotice__back { margin-top: 24px; padding: 10px 22px; border: 1px solid var(--hub-line, #ccc); background: var(--hub-bg, #fff); color: inherit; border-radius: 6px; cursor: pointer; }