/* ═══════════════════════════════════════════════════════════
   온새미로병원 — 케어형 (AI6 클리닉 번들)
   원본 시안(../온새미로병원.html)의 CSS 그대로. 관리자 시안 부분만 뺐고,
   맨 아래 「AI6 추가」 절에 서버가 그리는 게시판 화면과 예약 폼 상태를 칠했다.
   시안 1안과 의도적으로 다르게 잡은 지점
     색   : 딥 틸(#005d5d) + 웜 샌드 배경 + 코랄 포인트
     서체 : 제목에 IBM Plex Serif, 본문은 Plex Sans KR
     모서리: 8px 라운드 (1안은 각짐)
     헤더 : 전체 메가메뉴 패널 (1안은 개별 드롭다운)
     서브 : 상단 가로 탭 (1안은 좌측 LNB)
     히어로: 비대칭 2단 + 오늘 진료 카드 (1안은 그라디언트 풀블리드)
   ═══════════════════════════════════════════════════════════ */
:root{
  --sp-02:.25rem; --sp-03:.5rem; --sp-04:.75rem; --sp-05:1rem; --sp-06:1.5rem;
  --sp-07:2rem;   --sp-08:2.5rem; --sp-09:3rem;  --sp-10:4rem; --sp-11:5rem; --sp-12:6rem;

  --sans:'IBM Plex Sans KR','IBM Plex Sans',system-ui,sans-serif;
  --serif:'IBM Plex Serif',Georgia,serif;

  /* 팔레트 — 웜 뉴트럴 위의 딥 틸 */
  --teal:#005d5d;
  --teal-700:#004144;
  --teal-300:#3ddbd9;
  --teal-050:#d9fbfb;
  --coral:#ba4e00;
  --coral-050:#fff2e8;

  --ink:#1c1917;
  --ink-2:#57534e;
  --ink-3:#8a8580;
  --sand:#faf8f5;
  --sand-2:#f2ede6;
  --line:#e3ddd4;
  --paper:#fff;

  --r:8px;
  --wrap:78rem;

  /* ── Carbon 토큰 리매핑 ──────────────────────────────────
     1안은 Carbon 기본 팔레트를 그대로 씁니다.
     2안은 같은 Carbon CSS를 쓰되 --cds-* 토큰만 이 팔레트로
     덮어써서, 여기에 <button class="cds--btn cds--btn--primary">
     같은 Carbon 컴포넌트를 그대로 넣어도 틸 색으로 나옵니다.
     즉 "다른 디자인"이 CSS를 새로 짜는 게 아니라 토큰 교체입니다.
     ──────────────────────────────────────────────────────── */
  --cds-background:var(--sand);
  --cds-layer-01:var(--paper);
  --cds-layer-02:var(--sand-2);
  --cds-text-primary:var(--ink);
  --cds-text-secondary:var(--ink-2);
  --cds-text-placeholder:var(--ink-3);
  --cds-text-on-color:#fff;
  --cds-icon-primary:var(--ink);
  --cds-icon-secondary:var(--ink-2);
  --cds-border-subtle-00:var(--line);
  --cds-border-subtle-01:var(--line);
  --cds-border-subtle-02:var(--line);
  --cds-border-strong-01:var(--ink-3);
  --cds-field-01:var(--paper);
  --cds-field-02:var(--sand-2);
  --cds-link-primary:var(--teal);
  --cds-link-primary-hover:var(--teal-700);
  --cds-interactive:var(--teal);
  --cds-focus:var(--teal);
  --cds-button-primary:var(--teal);
  --cds-button-primary-hover:var(--teal-700);
  --cds-button-primary-active:var(--teal-700);
  --cds-button-secondary:var(--ink-2);
  --cds-button-tertiary:var(--teal);
  --cds-button-tertiary-hover:var(--teal-700);
  --cds-support-success:#0e6027;
  --cds-support-error:#a2191f;
  --cds-support-warning:var(--coral);
  --cds-support-info:var(--teal);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--sand);color:var(--ink);
  font-size:.9375rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-inline-size:var(--wrap);margin-inline:auto;padding-inline:var(--sp-06)}
h1,h2,h3{margin:0;font-weight:400}
.serif{font-family:var(--serif)}

/* ── 상단 바 ── */
.topbar{background:var(--teal-700);color:#cfe9e9}
.topbar__in{display:flex;justify-content:space-between;align-items:center;block-size:2.5rem;font-size:.75rem}
.topbar__tel{display:flex;align-items:center;gap:var(--sp-03);letter-spacing:.02em}
.topbar__nav{display:flex;gap:var(--sp-06)}
.topbar a:hover{color:#fff}

/* ── 헤더 + 메가메뉴 ── */
.hd{background:var(--paper);border-block-end:1px solid var(--line);position:sticky;inset-block-start:0;z-index:200}
.hd__in{display:flex;align-items:center;justify-content:space-between;block-size:5rem;gap:var(--sp-07)}
.brand{display:flex;align-items:center;gap:var(--sp-04);flex:none}
.brand__mark{inline-size:2.5rem;block-size:2.5rem;border-radius:50%;background:var(--teal);
  display:grid;place-items:center;color:#fff;font-size:1.1rem}
.brand__name{font-family:var(--serif);font-size:1.35rem;letter-spacing:-.01em;display:block}
.brand__en{font-size:.65rem;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}

.mnav{display:flex;gap:var(--sp-02)}
.mnav__btn{background:none;border:0;padding:var(--sp-04) var(--sp-05);font-size:.9375rem;
  color:var(--ink);cursor:pointer;border-radius:var(--r);white-space:nowrap}
.mnav__btn:hover,.mnav__btn.is-active{background:var(--teal-050);color:var(--teal)}
.mnav__btn.is-active{font-weight:500}

.hd__cta{display:flex;align-items:center;gap:var(--sp-03);flex:none}
.pill{border:0;border-radius:999px;padding:.6rem 1.15rem;font-size:.875rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--sp-03);white-space:nowrap}
.pill--solid{background:var(--teal);color:#fff}
.pill--solid:hover{background:var(--teal-700)}
.pill--ghost{background:transparent;color:var(--teal);border:1px solid var(--line)}
.pill--ghost:hover{background:var(--teal-050);border-color:var(--teal-050)}
.pill--coral{background:var(--coral);color:#fff}
.pill--coral:hover{filter:brightness(.92)}
.iconbtn{inline-size:2.5rem;block-size:2.5rem;border-radius:50%;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--ink-2)}
.iconbtn:hover{background:var(--sand-2)}
.mnav-toggle{display:none}

/* 메가메뉴 — 7개 메뉴를 한 판에 전부 펼침 */
.mega{position:absolute;inset-inline:0;inset-block-start:100%;background:var(--paper);
  border-block-end:1px solid var(--line);box-shadow:0 12px 28px rgba(28,25,23,.08);display:none}
.mega.is-open{display:block}
.mega__in{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-07);padding-block:var(--sp-08)}
.mega__col h4{font-size:.8125rem;color:var(--teal);letter-spacing:.06em;margin:0 0 var(--sp-05);
  font-weight:600;text-transform:uppercase}
.mega__col a{display:block;padding:var(--sp-03) 0;font-size:.875rem;color:var(--ink-2);border-radius:4px}
.mega__col a:hover{color:var(--teal);padding-inline-start:var(--sp-03)}

/* ── 히어로 : 비대칭 2단 + 오버랩 카드 ── */
.hero{background:var(--sand);padding-block:var(--sp-10) var(--sp-09);position:relative;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-09);align-items:center}
/* 오른쪽 비주얼 — 사진(없으면 그라디언트 + 상호·소개 글) 위에 오늘 진료 카드가 떠 있다. 빈 네모로 안 둔다(2026-09-17). */
.hero__visual{position:relative}
.hero__photo{inline-size:100%;aspect-ratio:4/5;max-block-size:32rem;position:relative;overflow:hidden;border-radius:var(--r);
  background:radial-gradient(120% 90% at 20% 10%, #cfeceb 0%, #a7d8d6 45%, #6bbcbb 100%)}
.hero__cap{position:absolute;inset-block-start:0;inset-inline:0;padding:var(--sp-07);
  display:flex;flex-direction:column;gap:var(--sp-04)}
.hero__cap b{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--teal-700);letter-spacing:-.015em}
.hero__cap p{margin:0;font-size:.875rem;line-height:1.8;color:var(--teal-700);opacity:.85;max-inline-size:20rem}
.hero__card{position:absolute;inset-inline:var(--sp-06);inset-block-end:var(--sp-06);
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-06);box-shadow:0 12px 30px rgba(28,25,23,.12);
  display:flex;flex-direction:column;gap:var(--sp-04)}
.hero__card[hidden]{display:none}
.hero__card>h3{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.hero__today{display:flex;align-items:baseline;gap:var(--sp-04);flex-wrap:wrap}
.hero__today b{font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--ink)}
.hero__today span{font-size:.8125rem;color:var(--ink-2)}
.hero__today em{font-style:normal;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;
  background:var(--teal-050);color:var(--teal-700)}
.hero__today em.is-off{background:var(--coral-050);color:var(--coral)}
.hero__rows{display:flex;flex-direction:column;gap:var(--sp-03);padding-block-start:var(--sp-04);
  border-block-start:1px solid var(--line)}
.hero__rows div{display:flex;justify-content:space-between;gap:var(--sp-04);font-size:.8125rem;color:var(--ink-2)}
.hero__rows div span:first-child{color:var(--ink-3)}
.hero__tel{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-04);
  padding-block-start:var(--sp-04);border-block-start:1px solid var(--line)}
.hero__tel span{font-size:.75rem;color:var(--ink-3)}
.hero__tel a{font-family:var(--serif);font-size:1.25rem;color:var(--teal)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:var(--sp-03);font-size:.75rem;
  letter-spacing:.12em;color:var(--teal);text-transform:uppercase;
  background:var(--teal-050);padding:.35rem .8rem;border-radius:999px}
.hero__title{font-family:var(--serif);font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.24;
  font-weight:300;margin-block:var(--sp-06) var(--sp-05);text-wrap:balance;letter-spacing:-.015em}
.hero__title em{font-style:normal;color:var(--teal)}
.hero__lead{color:var(--ink-2);max-inline-size:30rem;font-size:1rem}
.hero__actions{display:flex;gap:var(--sp-04);margin-block-start:var(--sp-07);flex-wrap:wrap}
.hero__stats{display:flex;gap:var(--sp-08);margin-block-start:var(--sp-08);flex-wrap:wrap}
.hstat b{display:block;font-family:var(--serif);font-size:1.75rem;font-weight:400;color:var(--teal)}
.hstat span{font-size:.75rem;color:var(--ink-3)}

/* 오버랩 퀵카드 */
/* 히어로 아래 퀵카드 — 겹치지 않고 한 칸 띄운다(2026-09-17). */
.quickcards{margin-block-start:var(--sp-08);position:relative;z-index:5;padding-block-end:var(--sp-10)}
.quickcards__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-05)}
.qcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-06);text-align:start;cursor:pointer;display:flex;flex-direction:column;
  gap:var(--sp-04);transition:transform .16s,box-shadow .16s}
.qcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(28,25,23,.09);border-color:var(--teal-050)}
.qcard__ico{inline-size:2.5rem;block-size:2.5rem;border-radius:var(--r);background:var(--teal-050);
  color:var(--teal);display:grid;place-items:center}
.qcard__t{font-size:1rem;font-weight:500}
.qcard__d{font-size:.8125rem;color:var(--ink-3)}
.qcard__go{font-size:.8125rem;color:var(--teal);margin-block-start:auto}

/* ── 홈 섹션 ── */
.sec{padding-block:var(--sp-11)}
.sec--paper{background:var(--paper);border-block:1px solid var(--line)}
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-05);
  flex-wrap:wrap;margin-block-end:var(--sp-08)}
.sec__eyebrow{font-size:.75rem;letter-spacing:.14em;color:var(--coral);text-transform:uppercase;font-weight:600}
.sec__title{font-family:var(--serif);font-size:1.875rem;font-weight:300;margin-block-start:var(--sp-03);letter-spacing:-.01em}
.sec__desc{color:var(--ink-2);margin-block-start:var(--sp-04);max-inline-size:34rem;font-size:.9375rem}
.textlink{font-size:.875rem;color:var(--teal);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--sp-02);border-block-end:1px solid var(--teal);padding:0 0 2px}

/* 진료과 카드 3열 */
.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-05)}
.dept{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-06);
  text-align:start;cursor:pointer;display:block;inline-size:100%}
.dept:hover{border-color:var(--teal);background:var(--teal-050)}
.dept__n{display:block;font-size:1.0625rem;font-weight:500;margin-block-end:var(--sp-03)}
.dept__d{display:block;font-size:.8125rem;color:var(--ink-2);line-height:1.55}

/* 소식 : 1안과 좌우 반전 + 카드 3열 */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-06)}
.ncard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  text-align:start;cursor:pointer;display:flex;flex-direction:column;inline-size:100%;padding:0}
.ncard:hover{border-color:var(--teal)}
.ncard__thumb{aspect-ratio:16/9;background:var(--sand-2);display:grid;place-items:center;
  font-size:.75rem;color:var(--ink-3)}
.ncard__b{padding:var(--sp-06);display:flex;flex-direction:column;gap:var(--sp-04);flex:1}
.chip{align-self:flex-start;font-size:.6875rem;padding:.2rem .55rem;border-radius:999px;
  background:var(--coral-050);color:var(--coral);font-weight:500}
.chip--teal{background:var(--teal-050);color:var(--teal)}
.ncard__t{font-size:.9375rem;font-weight:500;line-height:1.5}
.ncard__d{font-size:.75rem;color:var(--ink-3);margin-block-start:auto}

.notice-list{border-block-start:1px solid var(--line)}
.nrow{display:flex;gap:var(--sp-05);align-items:center;padding-block:var(--sp-05);
  border-block-end:1px solid var(--line);cursor:pointer;inline-size:100%;text-align:start;
  background:none;border-inline:0;border-block-start:0}
.nrow:hover .nrow__t{color:var(--teal)}
.nrow__t{flex:1;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nrow__d{font-size:.75rem;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* 검진 프로그램 강조 밴드 */
.band{background:var(--teal);color:#fff;border-radius:var(--r);padding:var(--sp-09);
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-07);align-items:center}
.band__t{font-family:var(--serif);font-size:1.75rem;font-weight:300;line-height:1.3}
.band__d{color:#b8ddde;margin-block-start:var(--sp-04);max-inline-size:34rem;font-size:.9375rem}

/* ── 서브페이지 : 상단 가로 탭 ── */
.subhead{background:var(--paper);border-block-end:1px solid var(--line);padding-block:var(--sp-09) 0}
.subhead__crumb{font-size:.75rem;color:var(--ink-3);margin-block-end:var(--sp-04)}
.subhead__title{font-family:var(--serif);font-size:2.125rem;font-weight:300;letter-spacing:-.015em}
.subtabs{display:flex;gap:var(--sp-06);margin-block-start:var(--sp-07);overflow-x:auto}
.subtab{background:none;border:0;padding:var(--sp-05) 0;font-size:.9375rem;color:var(--ink-3);
  cursor:pointer;border-block-end:2px solid transparent;white-space:nowrap}
.subtab:hover{color:var(--ink)}
.subtab.is-active{color:var(--teal);border-block-end-color:var(--teal);font-weight:500}
.subbody{padding-block:var(--sp-09) var(--sp-11)}
.ct{font-family:var(--serif);font-size:1.625rem;font-weight:300;margin-block-end:var(--sp-03)}
.cd{color:var(--ink-2);margin-block-end:var(--sp-08);font-size:.9375rem;max-inline-size:42rem}
.h3{font-size:1.125rem;font-weight:500;margin-block:var(--sp-08) var(--sp-05)}
.h3:first-child{margin-block-start:0}
.p{color:var(--ink-2);max-inline-size:44rem;margin-block-end:var(--sp-05)}

/* 의료진 — 1안(3열 정사각 카드)과 다르게 가로형 리스트 */
.doc-list{display:grid;gap:var(--sp-05)}
.docrow{display:grid;grid-template-columns:5.5rem 1fr auto;gap:var(--sp-06);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-05)}
.docrow__ph{inline-size:5.5rem;block-size:5.5rem;border-radius:var(--r);background:var(--sand-2);
  display:grid;place-items:center;font-size:.6875rem;color:var(--ink-3)}
.docrow__n{font-size:1.0625rem;font-weight:500}
.docrow__dp{font-size:.8125rem;color:var(--teal);margin-block:var(--sp-02) var(--sp-03)}
.docrow__f{font-size:.8125rem;color:var(--ink-3)}

/* 표 — 라운드 카드 안에 */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card + .card{margin-block-start:var(--sp-05)}
.tblwrap{overflow-x:auto}
.tbl{inline-size:100%;border-collapse:collapse;font-size:.875rem}
.tbl th,.tbl td{padding:var(--sp-05) var(--sp-06);text-align:start;border-block-end:1px solid var(--line)}
.tbl thead th{background:var(--sand-2);font-weight:500;color:var(--ink-2);font-size:.8125rem}
.tbl tbody tr:last-child td{border-block-end:0}
.tbl tbody tr:hover{background:var(--sand)}

/* FAQ — 1안(번호 뱃지)과 다르게 +/- 토글 */
.acc{border-block-start:1px solid var(--line)}
.acc__q{inline-size:100%;text-align:start;background:none;border:0;border-block-end:1px solid var(--line);
  padding:var(--sp-06) 0;font-size:.9375rem;cursor:pointer;display:flex;gap:var(--sp-05);align-items:center}
.acc__q:hover{color:var(--teal)}
.acc__sign{margin-inline-start:auto;inline-size:1.5rem;block-size:1.5rem;border-radius:50%;
  background:var(--teal-050);color:var(--teal);display:grid;place-items:center;flex:none;font-size:1rem}
.acc__a{padding:var(--sp-06);margin-block-end:var(--sp-02);background:var(--paper);
  border-radius:var(--r);color:var(--ink-2);font-size:.875rem}
.acc__a[hidden]{display:none}

/* 폼 */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-06)}
.fgrid .full{grid-column:1/-1}
.f label{display:block;font-size:.8125rem;color:var(--ink-2);margin-block-end:var(--sp-03)}
.f input,.f select,.f textarea{inline-size:100%;padding:.7rem var(--sp-05);border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper);font-family:inherit;font-size:.9375rem;color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--teal);outline-offset:-2px;border-color:transparent}
.note{background:var(--coral-050);border-radius:var(--r);padding:var(--sp-05) var(--sp-06);
  font-size:.875rem;color:#7a3400;margin-block-end:var(--sp-08)}
.mapbox{aspect-ratio:16/6;border-radius:var(--r);background:
  linear-gradient(135deg,var(--sand-2) 0%, #e7e0d5 100%);display:grid;place-items:center;
  color:var(--ink-3);font-size:.8125rem;margin-block-end:var(--sp-06)}

/* 오시는 길 — 두 클리닉 디자인이 같은 정보 구조를 쓰고 색·모서리만 각 브랜드 토큰을 따른다. */
.access-map{min-block-size:15rem;border-radius:var(--r);padding:var(--sp-08);margin-block-end:var(--sp-06);
  display:grid;grid-template-columns:auto 1fr;align-content:center;align-items:center;gap:var(--sp-05);
  background-color:var(--sand-2);background-image:linear-gradient(rgba(255,255,255,.62) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.62) 1px,transparent 1px);
  background-size:2rem 2rem;border:1px solid var(--line)}
.access-map__pin{inline-size:3rem;block-size:3rem;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:grid;place-items:center;background:var(--teal);color:#fff;box-shadow:0 8px 20px rgba(0,65,68,.2)}
.access-map__pin::first-letter{transform:rotate(45deg)}
.access-map b{display:block;font-size:1.1rem;color:var(--ink)}
.access-map span{display:block;color:var(--ink-2);margin-block-start:var(--sp-02)}
.access-map__actions{grid-column:1/-1;display:flex;gap:var(--sp-03);flex-wrap:wrap;margin-block-start:var(--sp-05)}
.access-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-06);margin-block-start:var(--sp-06)}
.access-layout .card{padding:var(--sp-07)}
.access-layout .h3{margin-block-start:0}
.access-info dl{margin:0}
.access-info dl>div{display:grid;grid-template-columns:6rem 1fr;gap:var(--sp-04);padding-block:var(--sp-04);border-block-start:1px solid var(--line)}
.access-info dl>div:first-child{border-block-start:0}
.access-info dt{font-size:.8125rem;color:var(--ink-3)}
.access-info dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.access-info a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.access-guide .page-body>:first-child{margin-block-start:0}.access-guide .page-body>:last-child{margin-block-end:0}
.access-sketch{margin:var(--sp-08) 0 0}.access-sketch .dept__img{max-inline-size:100%;aspect-ratio:auto}
.access-sketch figcaption{font-size:.75rem;color:var(--ink-3);margin-block-start:var(--sp-03)}

/* ── 푸터 : 딥 틸 ── */
.ft{background:var(--teal-700);color:#a9d3d4;padding-block:var(--sp-10) var(--sp-07);margin-block-start:auto}
.ft__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-08);
  padding-block-end:var(--sp-08);border-block-end:1px solid rgba(255,255,255,.14)}
.ft h5{color:#fff;font-size:.8125rem;letter-spacing:.08em;margin:0 0 var(--sp-05);text-transform:uppercase;font-weight:600}
.ft a{display:block;padding-block:var(--sp-03);font-size:.875rem}
.ft a:hover{color:#fff}
.ft__brand{font-family:var(--serif);font-size:1.375rem;color:#fff;margin-block-end:var(--sp-05)}
.ft__addr{font-size:.875rem;line-height:1.8}
.ft__bottom{padding-block-start:var(--sp-06);font-size:.75rem;color:#7fb3b5;
  display:flex;justify-content:space-between;gap:var(--sp-05);flex-wrap:wrap}

/* ── 관리자 : 밝은 사이드바 + 상단바 (1안은 검정 사이드바) ── */

/* 라우팅 */
.view{display:none}.view.is-on{display:block}
.site{display:flex;flex-direction:column;min-block-size:100vh}

@media (max-width:1055px){
  .hero__in{grid-template-columns:1fr}
  .hero__photo{aspect-ratio:16/10;max-block-size:none}
  .hero__card{position:static;inset:auto;margin-block-start:var(--sp-05)}
  .quickcards__grid,.dept-grid,.news-grid,.ft__top{grid-template-columns:repeat(2,1fr)}
  .mega__in{grid-template-columns:repeat(2,1fr)}
  .mnav{display:none;position:absolute;inset-block-start:5rem;inset-inline:0;background:var(--paper);
    flex-direction:column;padding:var(--sp-05);border-block-end:1px solid var(--line);gap:0}
  .mnav.is-open{display:flex}
  .mnav-toggle{display:grid}
  .hd__in{position:relative}
}
@media (max-width:671px){
  .quickcards__grid,.dept-grid,.news-grid,.ft__top,.fgrid,.mega__in{grid-template-columns:1fr}
  .access-layout{grid-template-columns:1fr}.access-map{padding:var(--sp-06);min-block-size:13rem}
  .access-info dl>div{grid-template-columns:1fr;gap:var(--sp-02)}
  .docrow{grid-template-columns:4rem 1fr}
  .band{grid-template-columns:1fr}
}

/* ═══════ AI6 추가 — 서버가 그리는 게시판 화면(규약 §4-1-2)과 폼 상태 ═══════ */
/* 틀(shell.html)의 머리말·바닥글은 .ai6-shell-head / .ai6-shell-foot 안에, 게시판 화면은 article.page 안에 들어간다(실측). */
/*
 * 틀의 상호 자리 — `brand` 블록이 그린 것(brand-mark·brand-text·brand-name·brand-intro)을
 * 번들 머리말(.brand__mark·.brand__name·.brand__en)과 **같은 모습**으로 칠한다 (2026-09-21).
 * 서버는 번들의 클래스 이름을 모르므로 제 이름으로 그린다 — 메뉴(.nav-*)와 같은 규칙이다.
 *
 * ⚠️ `font-weight` 를 **반드시 적는다.** 게시판 화면에는 렌더러의 globals.css 가 함께 실리고
 *    거기 `.brand{font-weight:800}` 이 있다 — 번들이 굵기를 안 정해 두면 상호가 홈에서는 400,
 *    게시판에서는 800 으로 보인다(2026-09-21 실측, 「글씨체도 달라짐」의 원인).
 */
/*
 * 값이 없는 줄은 **아예 안 그린다** — 번들 SPA 와 같은 태도(site.js renderChrome 은 전화가 비면 빈 글자를 넣는다).
 * 틀에는 조건이 없어서, 빈 값이면 「대표전화」 라벨만 남고 눌러도 아무 데도 안 가는 tel: 링크가 생긴다(2026-09-21 한빛 실측).
 * `{{site.phone}}` 을 속성에도 한 번 꽂아 두면 빈 값인지를 CSS 가 알아본다.
 */
.ai6-shell-head .topbar__tel[data-tel=""]{display:none}
/*
 * 아이콘은 **CSS 가 넣는다** — 틀 HTML 에 인라인 SVG 를 두면 `viewBox` 가 소문자로 나가 하이드레이션이 매번 어긋난다(위 shell.html 주석).
 * 색은 currentColor 를 못 쓰므로(배경 그림이다) 그 자리 글자색을 그대로 적는다.
 */
.ai6-shell-head .topbar__tel::before{content:"";inline-size:13px;block-size:13px;flex:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%20fill%3D%27%2523cfe9e9%27%3E%3Cpath%20d%3D%27M26%2029h-.17C6.18%2027.87%203.39%2011.29%203%206.23A3%203%200%20015.76%203h5.51a2%202%200%20011.86%201.26L14.65%208a2%202%200%2001-.44%202.16l-2.13%202.15a9.37%209.37%200%20007.58%207.6l2.17-2.15a2%202%200%20012.17-.41l3.77%201.51A2%202%200%200129%2020.72v5.38A3%203%200%200126%2029z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ai6-shell-head .hd__cta .pill--solid::after{content:"";inline-size:13px;block-size:13px;flex:none;margin-inline-start:.35rem;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%20fill%3D%27%2523ffffff%27%3E%3Cpath%20d%3D%27M18%206l-1.43%201.393L24.15%2015H4v2h20.15l-7.58%207.573L18%2026l10-10z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ai6-shell-head .hd__cta .pill--solid{display:inline-flex;align-items:center}
.ai6-shell-head .brand{font-weight:400;font-size:inherit;letter-spacing:normal}
.ai6-shell-head .brand-mark{inline-size:2.5rem;block-size:2.5rem;border-radius:50%;background:var(--teal);
  display:grid;place-items:center;color:#fff;font-size:1.1rem;flex:none;overflow:hidden}
.ai6-shell-head .brand-mark img{inline-size:100%;block-size:100%;height:auto;object-fit:cover;border-radius:50%}
.ai6-shell-head .brand-text{min-inline-size:0}
.ai6-shell-head .brand-name{font-family:var(--serif);font-size:1.35rem;font-weight:400;letter-spacing:-.01em;display:block}
.ai6-shell-head .brand-intro{display:block;font-size:.65rem;font-weight:400;letter-spacing:0;color:var(--ink-3)}

.ai6-shell-head .mnav{display:flex}
.ai6-shell-head .nav-list,.ai6-shell-head .nav-sub{list-style:none;margin:0;padding:0}
.ai6-shell-head .nav-list{display:flex;gap:var(--sp-02);flex-wrap:wrap}
.ai6-shell-head .nav-item{position:relative}
/* 대메뉴 한 칸은 번들의 .mnav__btn 과 같은 값이다 — 게시판에서만 더 굵어 보이던 것을 맞춘다. */
.ai6-shell-head .nav-link{display:block;padding:var(--sp-04) var(--sp-05);font-size:.9375rem;font-weight:400;color:var(--ink);border-radius:var(--r);white-space:nowrap}
.ai6-shell-head .nav-list > .nav-item > .nav-link:hover{background:var(--teal-050);color:var(--teal)}
/* 지금 보고 있는 메뉴의 모습 — quick.js 가 머리에 끼우는 규칙이 이 값을 읽는다(그쪽 주석 참고). */
.ai6-shell-head{--ai6-nav-on-bg:var(--teal-050);--ai6-nav-on-fg:var(--teal);--ai6-nav-on-weight:500}
.ai6-shell-head .nav-sub .nav-link:hover{background:var(--sand-2)}
.ai6-shell-head .nav-sub{display:none;position:absolute;inset-block-start:100%;inset-inline-start:0;min-inline-size:11rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-03);box-shadow:0 12px 32px rgba(28,25,23,.1);z-index:30}
.ai6-shell-head .nav-item:hover .nav-sub{display:block}
.ai6-shell-head .nav-sub .nav-link{font-size:.875rem;font-weight:400;padding:.5rem .75rem}
article.page{padding-block:var(--sp-09) var(--sp-12);inline-size:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.ai6-shell-head .hd{position:static}
.page .board-head h1{font-family:var(--serif);font-size:2rem;font-weight:300;margin:0 0 var(--sp-06)}
.page .board-nav ul{display:flex;gap:var(--sp-03);list-style:none;margin:0 0 var(--sp-06);padding:0;flex-wrap:wrap}
.page .board-nav a{display:inline-block;padding:.45rem 1rem;border:1px solid var(--line);border-radius:999px;font-size:.875rem;color:var(--ink-2);background:var(--paper)}
.page .board-nav a[aria-current="page"]{background:var(--teal);border-color:var(--teal);color:#fff}
.page .ai6-block{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-07)}
.page .board-search{display:flex;gap:var(--sp-03);margin-block-end:var(--sp-05);flex-wrap:wrap}
/*
 * ⚠️ **높이·줄높이를 되돌린다.** 렌더러의 globals.css 는 이 칸들을 `height:38px;line-height:38px;padding:0 16px`
 *    으로 잡아 둔다 — 여기서 안여백만 바꾸면 38px 상자 안에 38px 짜리 줄이 들어가고 위아래 8.8px 이 더 얹혀
 *    글자가 잘린다(2026-09-22 실측: 「글쓰기」 상자 72×38 인데 속내용 72×47).
 * ★ 셀렉트는 오른쪽에 화살표 자리를 비워 둔다 — 안 비우면 「제목+내용」 위에 화살표가 겹친다.
 */
/* 단추 굵기는 이 디자인의 제 단추(.pill)와 같게 — globals.css 는 「글쓰기」만 600 으로 두어 옆의 「검색」(400)과 달라 보였다(2026-09-22 지적). */
.page .board-search select,.page .board-search input,.page .board-search button,
.page .board-tools a,.page .board-actions a{block-size:auto;line-height:1.5;font-weight:400}
.page .board-search select,.page .board-search input{border:1px solid var(--line);border-radius:var(--r);padding:.55rem .75rem;font:inherit;line-height:1.5}
.page .board-search select{padding-inline-end:1.9rem}
.page .board-search button{border:0;background:var(--teal);color:#fff;border-radius:var(--r);padding:.55rem 1rem;font:inherit;line-height:1.5;font-weight:400;cursor:pointer}
.page ul.list{list-style:none;margin:0;padding:0}
.page ul.list > li{border-block-start:1px solid var(--line)}
.page ul.list > li:first-child{border-block-start:0}
.page ul.list > li > a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-05);padding:var(--sp-05) 0;color:var(--ink)}
.page ul.list > li > a:hover .t{color:var(--teal)}
.page ul.list .thumb{inline-size:4.5rem;aspect-ratio:16/10;border-radius:4px;background:var(--sand-2);overflow:hidden;display:grid;place-items:center;font-size:.6875rem;color:var(--ink-3)}
.page ul.list .thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.page ul.list .thumb:not(:has(img)) span{display:none}
.page ul.list time,.page .meta{font-size:.8125rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.page ul.faq{list-style:none;margin:0;padding:0}
.page ul.faq > li{border-block-start:1px solid var(--line)}
.page ul.faq summary{cursor:pointer;padding:var(--sp-05) 0 var(--sp-05) 2.25rem;font-weight:500;position:relative;list-style:none}
.page ul.faq summary::-webkit-details-marker{display:none}
.page ul.faq summary::before{content:"Q";position:absolute;inset-inline-start:0;top:calc(var(--sp-05) - .05rem);inline-size:1.6rem;block-size:1.6rem;border-radius:999px;background:var(--teal-050);color:var(--teal);font-size:.8125rem;display:grid;place-items:center}
.page ul.faq summary::after{content:"+";position:absolute;inset-inline-end:0;top:var(--sp-05);color:var(--ink-3)}
.page ul.faq details[open] summary::after{content:"−"}
.page ul.faq details[open] summary{color:var(--teal)}
.page ul.faq details > .ai6-prose{padding:0 0 var(--sp-06) 2.25rem;color:var(--ink-2)}
.page p.muted,.page p.empty{color:var(--ink-3);text-align:center;padding-block:var(--sp-09)}
.page .board-tools{display:flex;justify-content:flex-end;margin-block-start:var(--sp-05)}
.page .board-tools a{background:var(--teal);color:#fff;border-radius:var(--r);padding:.55rem 1rem;font-size:.9375rem;font-weight:400;text-decoration:none}
.page .board-tools a:hover{background:var(--teal-700,var(--teal))}
.page nav.pager{display:flex;justify-content:center;gap:var(--sp-02);margin-block-start:var(--sp-06)}
.page nav.pager a{padding:.4rem .7rem;border-radius:4px;font-size:.875rem;color:var(--ink-2)}
.page nav.pager a.on{background:var(--teal);color:#fff}
.page article.ai6-block h1{font-family:var(--serif);font-size:1.75rem;font-weight:300;margin:0 0 var(--sp-04)}
.page .ai6-prose{line-height:1.85;color:var(--ink-2)}
.page .ai6-prose img{max-inline-size:100%;block-size:auto}
.page nav.post-nav{display:flex;justify-content:space-between;gap:var(--sp-05);margin-block-start:var(--sp-07);padding-block-start:var(--sp-05);border-block-start:1px solid var(--line);font-size:.875rem}
/*
 * 글쓰기 칸 한 줄.
 *
 * ⚠️ `border`·`padding`·`background` 를 **반드시 0 으로 적는다.** 게시판 화면의 폼은 렌더러가 그리고
 *    `label.field` 라는 흔한 이름을 쓴다 — 이 디자인에도 같은 이름의 클래스가 있으면(한빛의 `.field` 는
 *    진료과 카드다) 칸마다 카드 테두리가 둘러진다(2026-09-22 실측: 한빛 494×122, 온새미로 494×72).
 */
.page form.form label.field{display:block;border:0;padding:0;background:none;margin-block-end:var(--sp-05);font-size:.875rem;color:var(--ink-2)}
.page form.form input,.page form.form textarea,.page form.form select{display:block;inline-size:100%;margin-block-start:.35rem;border:1px solid var(--line);border-radius:var(--r);padding:.6rem .75rem;font:inherit;background:var(--paper)}
.page form.form button{border:0;background:var(--teal);color:#fff;border-radius:var(--r);padding:.7rem 1.4rem;font:inherit;cursor:pointer}
/*
 * 체크박스는 **제 크기로** 둔다 (2026-09-22). 바로 위 규칙의 `inline-size:100%` 는 글자 칸을 위한 것인데
 * 체크박스까지 먹어서 「비밀글로 올리기」 네모가 줄 전체로 늘어나 있었다(실측 336×13).
 */
.page form.form input[type="checkbox"],.page form.form input[type="radio"]{inline-size:auto;display:inline-block;flex:none;margin-block-start:.2rem}
.page .board-actions{margin-block-start:var(--sp-06);display:flex;gap:var(--sp-03)}
.page .board-actions a{display:inline-block;padding:.6rem 1.2rem;border-radius:var(--r);border:1px solid var(--teal);color:var(--teal);font-size:.875rem}

/* 예약 폼 상태 */
.form-msg{margin-block-start:var(--sp-05);font-size:.875rem;padding:var(--sp-04) var(--sp-05);border-radius:var(--r)}
.form-msg--err{background:#fff1f1;color:#a2191f}
.form-msg--ok{background:#defbe6;color:#0e6027}
.appointment-check-head{max-inline-size:42rem;margin-block-end:var(--sp-08)}
.appointment-check-head .ct{margin-block:var(--sp-04) var(--sp-03)}
.appointment-check-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(16rem,.65fr);gap:var(--sp-06);align-items:start}
.appointment-check-form{padding:var(--sp-08)}
.appointment-check-form h3{font-family:var(--serif);font-size:1.35rem;font-weight:400;margin:0 0 var(--sp-03)}
.appointment-check-form>p{color:var(--ink-3);font-size:.875rem;margin:0 0 var(--sp-07)}
.appointment-check-help{background:var(--teal-050);border:1px solid rgba(14,116,111,.16);border-radius:var(--r);padding:var(--sp-07)}
.appointment-check-help h3{font-size:1rem;margin:0 0 var(--sp-04);color:var(--teal-700,var(--teal))}
.appointment-check-help ul{margin:0;padding-inline-start:1.15rem;color:var(--ink-2);font-size:.875rem;line-height:1.9}
.appointment-check-help p{border-block-start:1px solid rgba(14,116,111,.16);margin:var(--sp-05) 0 0;padding-block-start:var(--sp-05);font-size:.8125rem;color:var(--ink-3)}
.appointment-history{margin-block-start:var(--sp-09)}
.appointment-history__head{display:flex;justify-content:space-between;align-items:end;gap:var(--sp-05);margin-block-end:var(--sp-05)}
.appointment-history__head h3{font-family:var(--serif);font-size:1.65rem;font-weight:400;margin:var(--sp-02) 0 0}
.appointment-history__head>b{color:var(--teal);font-size:.875rem}
.appointment-history__list{display:grid;gap:var(--sp-04)}
.appointment-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-06)}
.appointment-item__top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-04);padding-block-end:var(--sp-04);border-block-end:1px solid var(--line);font-size:.8125rem;color:var(--ink-3)}
.appointment-item dl{margin:var(--sp-04) 0 0}.appointment-item dl>div{display:grid;grid-template-columns:6rem 1fr;gap:var(--sp-04);padding-block:var(--sp-03)}
.appointment-item dt{font-size:.8125rem;color:var(--ink-3)}.appointment-item dd{margin:0;font-weight:500;color:var(--ink)}
.appointment-status{padding:.25rem .55rem;border-radius:999px;font-weight:600}.appointment-status--new{background:#e8f4ff;color:#075985}.appointment-status--confirmed{background:#defbe6;color:#0e6027}.appointment-status--done{background:var(--teal-050);color:var(--teal-700,var(--teal))}.appointment-status--canceled{background:#fff1f1;color:#a2191f}
/* 다가오는 예약 — 「언제 가면 되는지」를 키운다(Square 예약 완료 화면과 같은 무게). */
.appointment-item--next .appointment-item__when dd{font-family:var(--serif);font-size:1.6rem;line-height:1.3;font-weight:400}
.appointment-item--next .appointment-item__when{align-items:center}

/* 예약 한 장의 단추 줄 — 다가오는 예약에만 붙는다(캘린더에 담기·전화로 변경). */
.appointment-item__act{display:flex;flex-wrap:wrap;gap:var(--sp-03);margin-block-start:var(--sp-05);padding-block-start:var(--sp-05);border-block-start:1px solid var(--line)}
.appointment-item__act>*{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:.5rem 1rem;font:inherit;font-size:.8125rem;color:var(--ink-2);cursor:pointer;text-decoration:none}
.appointment-item__act>*:hover{border-color:var(--teal);color:var(--teal)}
.appointment-empty{margin-block-start:var(--sp-08);padding:var(--sp-09);border:1px dashed var(--line);border-radius:var(--r);text-align:center;background:var(--paper)}
.appointment-empty b{display:block;font-family:var(--serif);font-size:1.4rem;font-weight:400}.appointment-empty p{color:var(--ink-3);margin:var(--sp-03) 0 var(--sp-06)}
.f .req::after{content:" *";color:var(--coral)}
.f .consent{display:flex;align-items:flex-start;gap:var(--sp-03);font-size:.875rem;color:var(--ink-2)}
.f .consent input{inline-size:auto;margin-block-start:.2rem}
.hero__photo img,.dept__img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:var(--r)}
.dept__img{aspect-ratio:16/10;margin-block-end:var(--sp-04);display:block}
.prog-items{margin:0;padding-inline-start:1.1rem;font-size:.8125rem;color:var(--ink-2);line-height:1.7}
.empty{color:var(--ink-3);padding-block:var(--sp-08);text-align:center}
.page-body{line-height:1.85;color:var(--ink-2)}
.page-body img{max-inline-size:100%;block-size:auto}
.topbar__tel a{color:#fff}
.qcard,.dept,.nrow,.mnav__btn,.subtab{color:inherit;text-decoration:none}
.mapbox a{color:var(--teal-700);background:rgba(255,255,255,.8);padding:var(--sp-03) var(--sp-05);border-radius:999px;font-size:.875rem}

/* 의료진 상세 · 진료 요일 */
.docrow__n:hover{color:var(--teal)}
.day{display:inline-grid;place-items:center;inline-size:1.5rem;block-size:1.5rem;border-radius:999px;font-size:.6875rem;color:var(--ink-3);background:var(--sand-2);margin-inline-end:.15rem}
.day--on{background:var(--teal);color:#fff}
.docrow__days{display:flex;align-items:center;gap:var(--sp-02);flex-wrap:wrap;font-size:.8125rem;color:var(--ink-2)}
.doc-profile{display:grid;grid-template-columns:14rem 1fr;gap:var(--sp-08);align-items:start}
.doc-profile__ph{inline-size:14rem;aspect-ratio:4/5;border-radius:var(--r);background:var(--sand-2);object-fit:cover;display:grid;place-items:center;font-family:var(--serif);font-size:3rem;color:var(--teal)}
.doc-profile .ct small{font-size:1rem;font-weight:400;color:var(--ink-2);margin-inline-start:var(--sp-03)}
.doc-hist{margin:0;padding-inline-start:1.1rem;color:var(--ink-2);line-height:1.8;font-size:.9375rem}
@media(max-width:700px){.doc-profile{grid-template-columns:1fr}.doc-profile__ph{inline-size:10rem}}
@media(max-width:700px){.appointment-item__act>*{flex:1 1 100%;justify-content:center}.appointment-check-layout{grid-template-columns:1fr}.appointment-check-form{padding:var(--sp-06)}.appointment-item dl>div{grid-template-columns:1fr;gap:var(--sp-02)}}
/* 사진 게시판(건강 칼럼) — 서버가 ul.grid > li.card 로 그린다(규약 §4-1-2) */
.page ul.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-06)}
.page ul.grid > li.card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);margin:0}
.page ul.grid > li.card > a{display:block;color:var(--ink)}
.page ul.grid .thumb{aspect-ratio:16/10;background:var(--sand-2);display:grid;place-items:center;font-size:.75rem;color:var(--ink-3);overflow:hidden}
.page ul.grid .thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.page ul.grid .thumb:not(:has(img)) span{display:none}
.page ul.grid h2{font-size:1rem;font-weight:500;margin:0;padding:var(--sp-05) var(--sp-05) var(--sp-03);line-height:1.4}
.page ul.grid time{display:block;padding:0 var(--sp-05) var(--sp-05)}
.page ul.grid > li.card:hover h2{color:var(--teal)}
@media(max-width:800px){.page ul.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.page ul.grid{grid-template-columns:1fr}}

/* 진료 시간 · 휴진 · 비급여 · 팝업 */
.hours-band{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-05)}
.hours-card{padding:var(--sp-07)}
.hours-band .card+.card{margin-block-start:0}
.hours-card .sec__title{margin-block:var(--sp-03) var(--sp-05)}
.hours{display:grid;gap:var(--sp-03);margin:0}
.hours>div{display:grid;grid-template-columns:7rem 1fr;gap:var(--sp-04);padding-block:var(--sp-03);border-block-end:1px solid var(--line)}
.hours>div:last-child{border-block-end:0}
.hours dt{color:var(--ink-2);font-size:.875rem}
.hours dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.hours--lg>div{grid-template-columns:9rem 1fr;padding-block:var(--sp-04)}
.hours--lg dd{font-size:1.0625rem}
.closure{display:flex;justify-content:space-between;gap:var(--sp-04);padding-block:var(--sp-03);border-block-end:1px solid var(--line);font-size:.875rem}
.closure:last-of-type{border-block-end:0}
.closure span{color:var(--coral);font-variant-numeric:tabular-nums;white-space:nowrap}
.closure--lg{display:block;padding:var(--sp-06);margin-block-end:var(--sp-04);font-size:1rem;border:1px solid var(--line)}
.closure--lg>div{display:flex;justify-content:space-between;gap:var(--sp-04);flex-wrap:wrap}
.closure--lg .page-body{margin-block-start:var(--sp-04);font-size:.9375rem}
.hours-card .textlink{display:inline-block;margin-block-start:var(--sp-05)}
/*
  창이 여럿 뜬다(2026-09-21) — **전부 같은 자리, 같은 크기**로 포개 놓는다(더봄치과와 같은 방식).
  계단처럼 어긋나게도 해 봤는데, 창마다 자리를 찾아 눈이 옮겨 다녀야 해서 오히려 불편했다.
  같은 자리면 맨 위 창을 닫을 때마다 다음 안내가 **그 자리 그대로** 나타난다 — 닫기 단추도 안 움직인다.
  뒤 창은 보이지 않지만 없어진 것이 아니다. 앞의 것이 위에 온다(z-index 는 site.js 가 준다).
*/
/* ⚠️ 머리글(.hd/.gnb)이 sticky 에 z-index 200 이다 — 100 이면 팝업 윗부분이 머리글에 덮여 잘린 것처럼 보인다
   (2026-09-21 지적). 팝업은 화면에서 가장 위다. 퀵바(60)·메가메뉴(30)보다도 위. */
.popup{position:fixed;inset:0;z-index:1000;background:rgba(28,25,23,.45);padding:var(--sp-06)}
/*
  ★ **크기가 진짜로 고정이어야 한다** (2026-09-21 지적: 「사이즈가 고정이 아니잖아」).
    너비만 맞추고 높이를 내용에 맡겼더니 창을 닫을 때마다 네모가 커졌다 작아졌다 했다(실측 297·258·232·258·368).
    같은 자리에 포개는 방식에서는 그게 특히 거슬린다 — 닫기 단추가 위아래로 뛴다.
    그래서 높이도 못 박고, 속이 길면 **본문만** 스크롤한다(머리와 발은 제자리).
*/
.popup__box{position:absolute;inset-block-start:max(1rem,6vh);inset-inline-start:50%;transform:translateX(-50%);
  inline-size:min(30rem,calc(100% - 3rem));block-size:min(34rem,80vh);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border-radius:var(--r);padding:var(--sp-07);box-shadow:0 24px 64px rgba(28,25,23,.25)}
.popup__head{flex:none}
.popup__body{flex:1 1 auto;min-block-size:0;overflow:auto}
.popup__foot{flex:none}
.popup__head h3{font-family:var(--serif);font-size:1.5rem;font-weight:300;margin:var(--sp-02) 0 var(--sp-05)}
.popup__box .closure--lg{margin-block-end:var(--sp-04)}
.popup__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-04);margin-block-start:var(--sp-05);font-size:.875rem;color:var(--ink-2)}
.popup__foot label{display:flex;align-items:center;gap:var(--sp-02);cursor:pointer}
.popup__foot .pill{border-radius:var(--r);cursor:pointer;border:0}
@media(max-width:800px){.hours-band{grid-template-columns:1fr}}

/* 진료과 계층 — 상위 진료과의 색을 유지하고 하위 카드를 묶는다. */
.dept-tree{display:grid;gap:1.25rem}
.dept-group{grid-column:1/-1;min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.dept-group>summary{display:flex;align-items:center;gap:1rem;padding:1.5rem;cursor:pointer;list-style:none;background:linear-gradient(110deg,#eef7f4,var(--paper))}
.dept-group>summary::-webkit-details-marker{display:none}
.dept-group>summary:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
.dept-group__icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--teal);color:white;font-size:1.4rem}
.dept-group__heading{display:grid;gap:.3rem;flex:1;min-width:0}
.dept-group__heading b{font-size:1.2rem;color:var(--teal-700)}
.dept-group__heading>span{font-size:.84rem;color:var(--ink-2)}
.dept-group__count{white-space:nowrap;font-size:.75rem;color:var(--teal);background:#e4f2ee;border-radius:99px;padding:.35rem .65rem}
.dept-group__chevron{color:var(--teal);transition:transform .15s}.dept-group[open]>summary .dept-group__chevron{transform:rotate(180deg)}
.dept-group__body{padding:1.25rem 1.5rem 1.5rem;border-top:1px solid var(--line)}
.dept-group__body>.dept-grid{margin-top:1rem}
.dept-group .dept{box-shadow:none;background:var(--sand);border-radius:10px;min-width:0}
.dept__n{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.dept__n>span{font-size:1rem;color:var(--teal)}
.dept__meta{display:block;font-size:.75rem;color:var(--teal);border-top:1px solid var(--line);padding-top:.75rem;margin-top:1rem}
.dept-breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.8rem;color:var(--ink-2);margin-bottom:1rem}.dept-breadcrumb a{color:var(--teal)}
@media(max-width:600px){.dept-group>summary{padding:1rem;gap:.65rem}.dept-group__heading>span{display:none}.dept-group__body{padding:1rem}.dept-group__icon{width:32px;height:32px}.dept-group__count{font-size:.68rem}}
@media(max-width:671px){
  .hd__in{gap:.6rem}.hd__cta .pill--ghost{display:none}.hd__cta .pill--solid{padding:.5rem .7rem;font-size:.75rem}
  .hd__in .brand{flex:1;min-width:0;gap:.5rem}.brand>span:last-child{min-width:0}
  .hd__in .brand__mark{flex:none;width:32px;height:32px}.hd__in .brand__name{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hd__in .brand__en{display:none}
}

/* ═══════ 예약 — 달력 · 의료진 · 시각 · 문진 (156 · 2026-09-17) ═══════ */
/* 의료진이 「진료 시간표」를 적어 둔 사이트에서만 뜬다. 안 적었으면 옛 날짜·시간 칸(#legacyPick)이 그대로다. */
.booking{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:var(--sp-06);
  margin-block:var(--sp-06);padding:var(--sp-06);border:1px solid var(--line);border-radius:var(--r);background:var(--sand)}
.booking[hidden]{display:none}
.booking__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-04);margin-block-end:var(--sp-05)}
.booking__nav b{font-family:var(--serif);font-size:1.0625rem;font-weight:400;color:var(--ink)}
.booking__arrow{inline-size:2rem;block-size:2rem;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-2);cursor:pointer;font-size:1.125rem;line-height:1}
.booking__arrow:hover{border-color:var(--teal);color:var(--teal)}
.booking__wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:.6875rem;color:var(--ink-3);text-align:center}
.booking__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-block-start:var(--sp-03)}
.cal__pad{display:block}
.cal__day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  aspect-ratio:1;border:1px solid transparent;border-radius:var(--r);background:var(--paper);
  color:var(--ink);cursor:pointer;font-size:.8125rem;padding:0}
.cal__day b{font-weight:500}
.cal__day i{font-style:normal;font-size:.625rem;color:var(--teal)}
.cal__day:hover:not(:disabled){border-color:var(--teal)}
.cal__day.is-on,.cal__day.is-on:hover{background:var(--teal);color:#fff}
.cal__day.is-on i{color:#cfeceb}
.cal__day.is-off{background:transparent;color:var(--ink-3);cursor:not-allowed}
.booking__hint{margin-block-start:var(--sp-04);font-size:.6875rem;color:var(--ink-3)}
.booking__side{display:flex;flex-direction:column;gap:var(--sp-05);min-inline-size:0}
.booking__label{font-size:.75rem;letter-spacing:.08em;color:var(--teal);margin-block-end:var(--sp-04);text-transform:uppercase}
.booking__ask{font-size:.875rem;color:var(--ink-3)}
.pickdocs{display:flex;flex-direction:column;gap:var(--sp-03)}
.pickdoc{display:flex;align-items:center;gap:var(--sp-04);padding:var(--sp-04);text-align:start;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);cursor:pointer}
.pickdoc:hover:not(:disabled){border-color:var(--teal)}
.pickdoc.is-on{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.pickdoc.is-off{opacity:.5;cursor:not-allowed}
.pickdoc img,.pickdoc__ph{inline-size:2.5rem;block-size:2.5rem;border-radius:999px;object-fit:cover;flex:none}
.pickdoc__ph{display:grid;place-items:center;background:var(--teal-050);color:var(--teal);font-size:.875rem}
.pickdoc__t{display:flex;flex-direction:column;gap:1px;min-inline-size:0}
.pickdoc__t b{font-size:.875rem;font-weight:500;color:var(--ink)}
.pickdoc__t i{font-style:normal;font-size:.75rem;color:var(--ink-3)}
.pickslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr));gap:var(--sp-03)}
.pickslot{padding:.55rem var(--sp-04);border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);cursor:pointer;font-size:.8125rem}
.pickslot:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.pickslot.is-on,.pickslot.is-on:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.pickslot.is-off{color:var(--ink-3);background:var(--sand-2);cursor:not-allowed;text-decoration:line-through}

/* 진료과가 미리 적어 둔 문진 */
.survey{margin-block:var(--sp-06);padding:var(--sp-06);border:1px solid var(--line);border-radius:var(--r)}
.survey__title{font-family:var(--serif);font-size:1.0625rem;color:var(--ink);margin-block-end:var(--sp-05)}
.survey__q{margin-block-end:var(--sp-05)}
.survey__q>p,.survey__q>label{display:block;font-size:.8125rem;color:var(--ink-2);margin-block-end:var(--sp-03)}
.survey__q .req::after,.survey__q p.req::after{content:" *";color:var(--coral)}
.survey__q input[type=text],.survey__q input:not([type]),.survey__q textarea{inline-size:100%;padding:.7rem var(--sp-05);
  border:1px solid var(--line);border-radius:var(--r);font:inherit;color:var(--ink);background:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-03)}
.chip{display:inline-flex;align-items:center;gap:var(--sp-03);padding:.45rem var(--sp-05);
  border:1px solid var(--line);border-radius:999px;font-size:.8125rem;color:var(--ink-2);cursor:pointer}
.chip input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.chip:has(input:checked){border-color:var(--teal);background:var(--teal-050);color:var(--teal-700)}
.fhint{display:block;margin-block-start:var(--sp-03);font-size:.6875rem;color:var(--ink-3)}
#legacyPick[hidden]{display:none}

@media (max-width:767px){
  .booking{grid-template-columns:1fr;padding:var(--sp-05)}
}

/* ── 단계형 예약 (2026-09-18) ─────────────────────────────────────── */
.rsv{padding:0}
.rsv-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:0;padding:0;border-block-end:1px solid var(--line);counter-reset:none}
.rsv-steps li{min-inline-size:0}
.rsv-steps li>button,.rsv-steps li>span{display:flex;align-items:center;gap:var(--sp-03);inline-size:100%;padding:var(--sp-05) var(--sp-05);background:none;border:0;border-block-end:3px solid transparent;font:inherit;text-align:start;color:var(--ink-3)}
.rsv-steps li>button{cursor:pointer}
.rsv-steps li>button:hover{color:var(--teal)}
.rsv-steps li.is-on>span{color:var(--ink);border-block-end-color:var(--teal)}
.rsv-steps li.is-done>button{color:var(--teal)}
.rsv-steps__n{flex:none;inline-size:1.5rem;block-size:1.5rem;border-radius:999px;display:grid;place-items:center;font-size:.75rem;border:1px solid currentColor}
.rsv-steps li.is-on .rsv-steps__n{background:var(--teal);border-color:var(--teal);color:#fff}
.rsv-steps li.is-done .rsv-steps__n{background:var(--teal-050);border-color:var(--teal-050)}
.rsv-steps__t{display:flex;flex-direction:column;min-inline-size:0;line-height:1.2}
.rsv-steps__t b{font-size:.8125rem;font-weight:500}
.rsv-steps__t i{font-style:normal;font-size:.6875rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsv-body{padding:var(--sp-07) var(--sp-07) var(--sp-06)}
.rsv-h{display:flex;flex-direction:column;gap:var(--sp-02);margin-block-end:var(--sp-06)}
.rsv-h b{font-family:var(--serif);font-size:1.25rem;font-weight:400;color:var(--ink)}
.rsv-h span{font-size:.875rem;color:var(--ink-3)}
.rsv-g{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-block:var(--sp-05) var(--sp-03)}
.rsv-g:first-of-type{margin-block-start:0}
.optgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--sp-03)}
.optgrid--doc{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.opt{display:flex;flex-direction:column;gap:var(--sp-02);padding:var(--sp-05);border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);text-align:start;cursor:pointer;font:inherit;min-block-size:4.5rem}
.opt:hover{border-color:var(--teal)}
.opt.is-on{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);background:var(--teal-050)}
.opt b{font-size:.9375rem;font-weight:500}
.opt b small{font-size:.75rem;font-weight:400;color:var(--ink-3);margin-inline-start:.25rem}
.opt i{font-style:normal;font-size:.75rem;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.opt--doc{flex-direction:row;align-items:center;gap:var(--sp-04)}
.opt--doc img,.opt__ph{flex:none;inline-size:3rem;block-size:3rem;border-radius:999px;object-fit:cover}
.opt__ph{display:grid;place-items:center;background:var(--teal-050);color:var(--teal);font-size:1rem}
.opt__t{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.opt__days{display:flex;gap:2px;margin-block-start:.25rem}
.opt--any .opt__ph{background:var(--sand-2);color:var(--ink-3)}
.rsv-when{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:var(--sp-07)}
.rsv-when .booking__cal{padding:0}
.rsv-when__d{font-family:var(--serif);font-size:1.0625rem;margin-block-end:var(--sp-04)}
.rsv-times .booking__label{margin-block-start:var(--sp-04)}
.rsv-sum{display:grid;gap:0;margin:0 0 var(--sp-06);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rsv-sum>div{display:grid;grid-template-columns:5rem minmax(0,1fr) auto;align-items:center;gap:var(--sp-04);padding:var(--sp-04) var(--sp-05);border-block-start:1px solid var(--line)}
.rsv-sum>div:first-child{border-block-start:0}
.rsv-sum dt{font-size:.75rem;color:var(--ink-3)}
.rsv-sum dd{margin:0;font-size:.9375rem;color:var(--ink)}
.rsv-sum button{background:none;border:0;font:inherit;font-size:.8125rem;color:var(--teal);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.rsv-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-04);padding:var(--sp-05) var(--sp-07);border-block-start:1px solid var(--line);background:var(--paper);position:sticky;bottom:0}
.rsv-nav .pill{border-radius:var(--r);padding:.75rem 1.5rem;font:inherit}
.rsv-nav .pill:disabled{opacity:.45;cursor:not-allowed}
.rsv-nav__sum{flex:1;min-inline-size:0;font-size:.8125rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.rsv-done{padding:var(--sp-08) var(--sp-05);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-03)}
.rsv-done__ok{inline-size:3rem;block-size:3rem;border-radius:999px;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:1.25rem;margin-block-end:var(--sp-03)}
.rsv-done .ct{margin-block-end:0}
.rsv-done__when{font-family:var(--serif);font-size:1.5rem;color:var(--ink)}
.rsv-done__what{font-size:.9375rem;color:var(--ink-2)}
.rsv-done__act{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-03);margin-block-start:var(--sp-05)}
.rsv-done__act .pill{border-radius:var(--r);padding:.75rem 1.5rem;font:inherit}
@media (max-width:767px){
  .rsv-steps{grid-template-columns:repeat(4,1fr)}
  .rsv-steps li>button,.rsv-steps li>span{flex-direction:column;align-items:center;gap:var(--sp-02);padding:var(--sp-04) var(--sp-02);text-align:center}
  .rsv-steps__t i{display:none}
  .rsv-steps__t b{font-size:.6875rem}
  .rsv-body{padding:var(--sp-05)}
  .rsv-when{grid-template-columns:1fr}
  .rsv-nav{padding:var(--sp-04) var(--sp-05)}
  .rsv-nav__sum{display:none}
  .rsv-sum>div{grid-template-columns:4rem minmax(0,1fr) auto}
}

/* 휴무 (159) */
.docrow__off{color:var(--coral,#b5532a)}
.doc-off{margin-block-start:var(--sp-04);padding:var(--sp-04) var(--sp-05);border-radius:var(--r);background:var(--sand-2);font-size:.875rem}
.doc-off b{display:block;margin-block-end:.25rem;color:var(--ink-1)}
.doc-off ul{margin:0;padding-inline-start:1.1rem;color:var(--ink-2)}

/* 지도 퍼가기 (2026-09-18) */
.access-embed{margin-block-end:var(--sp-06);border-radius:var(--r);overflow:hidden;border:1px solid var(--line,#e5e1d8)}
.access-embed iframe{display:block;inline-size:100%;aspect-ratio:16/8;border:0;min-block-size:18rem}
.access-embed--kakao{padding:0;background:#f4f2ec;min-block-size:360px}.access-embed--kakao iframe{aspect-ratio:auto;min-block-size:0}
.naver-book{white-space:nowrap}
.rsv-naver{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-04);padding:var(--sp-05) var(--sp-06);margin-block-end:var(--sp-05);background:#e9f7ee;border:1px solid #bfe3cc;border-radius:var(--r);font-size:.9375rem}
.rsv-naver b{color:#03c75a}

/* ─── SNS · 퀵바 · 배너 · 팝업 목록 (2026-09-21) ────────────────────────
   색·간격은 이 번들이 이미 쓰는 변수만 쓴다 — 두 번들의 팔레트가 서로 다르다. */

/* 바닥글 SNS — 값이 있는 것만 온다(site.js). */
/* 크기는 **누르는 표적**이 기준이다 (2026-09-21 지적: 「너무 작음」) — 44px 는 손가락으로 눌리는 최소 크기다. */
.sns{display:flex;flex-wrap:wrap;gap:var(--sp-04);margin-block-start:var(--sp-05)}
.sns__a{display:inline-flex;inline-size:2.75rem;block-size:2.75rem;border-radius:999px;overflow:hidden;
  text-decoration:none;transition:transform .15s,opacity .15s;opacity:.92}
.sns__a svg{inline-size:100%;block-size:100%;display:block}
.sns__a:hover{opacity:1;transform:translateY(-2px)}

/* 퀵바 — 넓은 화면은 오른쪽 세로, 좁은 화면은 아래 가로 고정 */
.quick{position:fixed;inset-block-start:50%;inset-inline-end:var(--sp-03);transform:translateY(-50%);
  z-index:60;display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 8px 24px rgba(28,25,23,.12)}
.quick__a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-02);
  inline-size:4.25rem;padding:var(--sp-04) var(--sp-02);background:var(--paper);color:var(--ink-2);
  font-size:.6875rem;line-height:1.2;text-align:center;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.quick__a svg{inline-size:1.125rem;block-size:1.125rem}
.quick__a:hover{background:var(--teal);color:#fff}
@media (max-width:1055px){
  /* 아래 막대로 바뀐다. 바닥글이 막대에 가리지 않게 본문 아래를 그만큼 비운다. */
  body{padding-block-end:4.25rem}
  .quick{inset:auto 0 0 0;transform:none;flex-direction:row;border-radius:0;border-inline:0;border-block-end:0;box-shadow:0 -4px 16px rgba(28,25,23,.12)}
  .quick__a{flex:1;inline-size:auto;padding:var(--sp-03) var(--sp-02)}
  .quick__top{display:none}
}

/* 홈 배너 — 사진 한 장씩 보여 주고 점으로 넘긴다 */
.bnr{padding:var(--sp-08) 0}
/*
  ★ **올린 사진을 자르지 않는다** (2026-09-21 지적: 「이거 올렸을 때 위아래가 좀 짤림」).
    전에는 3:1 로 못 박고 `cover` 로 채워서, 그 비율이 아닌 사진은 위아래가 잘렸다.
    이제 틀의 비율을 **사진 실제 비율에 맞춘다**(site.js 가 `--ratio` 를 준다). 사진이 로드되기 전에는 16:9 로 자리만 잡는다(기본값).
    여러 장이면 **첫 배너**가 띠 크기를 정하고, 나머지는 `contain` 이라 여백이 생길 뿐 잘리지 않는다.
*/
/*
  ★ `margin-inline:auto` 가 있어야 **가운데**에 선다 (2026-09-22 지적: 「배너가 가운데 정렬이 안 됨」).
    높이가 `max-block-size` 에 걸리면 브라우저가 비율로 **폭을 줄여서** 틀이 wrap 보다 좁아진다
    (실측: wrap 1200px 인데 틀 910px 이 왼쪽에 붙어 있었다 — 밑의 점은 가운데라 더 어긋나 보였다).
*/
.bnr__view{position:relative;margin-inline:auto;border-radius:var(--r);overflow:hidden;background:var(--sand-2);
  aspect-ratio:var(--ratio,16/9);max-block-size:min(70vh,32rem)}
/* 좌우 이동 — 사진 위에 얹는다. 한 장뿐이면 아예 안 그린다(site.js). */
.bnr__nav{position:absolute;inset-block-start:50%;translate:0 -50%;z-index:1;
  display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;padding:0;cursor:pointer;
  border:0;border-radius:999px;background:rgba(255,255,255,.85);color:#111;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.bnr__nav:hover{background:#fff}
.bnr__nav svg{inline-size:1.25rem;block-size:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bnr__nav--prev{inset-inline-start:var(--sp-04)}
.bnr__nav--next{inset-inline-end:var(--sp-04)}
.bnr__slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .5s;text-decoration:none}
.bnr__slide.is-on{opacity:1;visibility:visible}
.bnr__slide img{inline-size:100%;block-size:100%;object-fit:contain;display:block}
.bnr__cap{position:absolute;inset-block-end:0;inset-inline:0;padding:var(--sp-06);color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
.bnr__cap b{display:block;font-size:1.25rem}
.bnr__cap span{display:block;margin-block-start:var(--sp-02);font-size:.875rem;opacity:.9}
.bnr__dots{display:flex;justify-content:center;gap:var(--sp-03);margin-block-start:var(--sp-04)}
.bnr__dot{inline-size:.5rem;block-size:.5rem;border-radius:999px;border:0;padding:0;cursor:pointer;background:var(--line)}
.bnr__dot.is-on{background:var(--teal)}
@media (max-width:640px){.bnr__cap{padding:var(--sp-04)}.bnr__cap b{font-size:1rem}}

/* 팝업 안 목록 — 팝업 안내와 휴진이 한 창에 쌓인다 */
.popup__item{display:block;color:inherit;text-decoration:none;margin-block-end:var(--sp-05)}
.popup__item b{display:block;font-size:1rem}
.popup__item .page-body{margin-block-start:var(--sp-03);font-size:.875rem;color:var(--ink-2)}
a.popup__item:hover b{color:var(--teal)}
.popup__img{inline-size:100%;block-size:auto;border-radius:var(--r);margin-block-end:var(--sp-04);display:block}

/* 퀵바와 게시판 본문이 겹치던 것 (2026-09-21 실측) — 「검색」 단추가 퀵바 밑으로 들어갔다.
   게시판 화면(`article.page`)은 본문이 화면 끝까지 차므로 퀵바 폭만큼 오른쪽을 비운다.
   홈(SPA)은 전체폭 배경을 쓰는 구획이라 `.wrap` 은 건드리지 않는다. */
@media (min-width:1056px){
  article.page{padding-inline-end:6rem}
}

/* 게시판 화면의 서브 띠 (2026-09-22) — 껍데기(board-skins)가 SPA 서브 화면과 같은 띠를 적는다.
   서버는 껍데기를 article.page 안에 두므로 띠를 화면 폭으로 펴고, 위 여백은 띠가 대신한다. */
article.page:has(.subhead){padding-block-start:0}
article.page .subhead{inline-size:100vw;margin-inline-start:calc(50% - 50vw);margin-block-end:var(--sp-09)}
article.page .subhead .subtabs:empty{display:none}
/* 본문 링크 서식(.ai6-prose a — 밑줄·파란색)이 탭에 새지 않게 값을 비워 두지 않는다. */
.page .subhead .subtab{color:var(--ink-3);text-decoration:none}
.page .subhead .subtab:hover{color:var(--ink)}
.page .subhead .subtab.is-active{color:var(--teal)}
/* 휴진 안내 큰 카드는 마지막이어도 테두리를 다 그린다 (2026-09-22). */
.closure--lg:last-of-type{border-block-end:1px solid var(--line)}