/* ══════════════════════════════════════════════════════════
   오브의원 · 커뮤니티(목록·갤러리·게이트) · 전환(예약·지원) · 문서(약관)
   10장 공유 CSS — 접두사 cm-
   site.css 의 .tband .subnav .tbl .clist .gal .tabs .lock .form .doc .drband 를
   그대로 쓰고, 여기서는 그 부품들 사이를 잇는 것만 정의한다.
   박스 규격은 --r-card / --r-pill 2종만. 새 색을 만들지 않는다.
   ══════════════════════════════════════════════════════════ */

/* ── 화면에 안 보이지만 스크린리더는 읽는 라벨 ──────── */
.cm-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

/* ── 서브내비 띠 (커뮤니티 6장 공통) ─────────────────── */
.cm-subnav{background:#fff; border-bottom:1px solid var(--line-s)}
.cm-subnav .subnav{border-bottom:0}

/* ── 게시판 표 머리 — 375 에서 「번호」가 두 줄로 접히지 않게 ── */
.tbl thead th{white-space:nowrap}

/* .tabs a 는 inline-flex 라 텍스트와 개수 사이 공백이 사라진다 — gap 으로 되살린다. */
.tabs a{gap:.35rem}

/* ── 목록 섹션 머리 ─────────────────────────────────── */
.cm-listhead{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem}
.cm-count{font-size:var(--f-sub); color:var(--muted)}
.cm-count b{color:var(--brand); font-family:var(--serif); font-weight:700}

/* ── 개발 예정·안내 힌트 한 줄 ──────────────────────── */
.cm-hint{margin-top:.6rem; font-size:var(--f-cap); color:var(--muted); line-height:1.6}

/* ── 병원 자산 요청 배지 (data-request 와 1:1) ───────── */
/* `data-request` 속성은 요청 목록(REQUEST.md)을 뽑는 원천이라 남겨 두지만,
   `.cm-req` 는 같은 문구를 눈에 보이는 블록으로 이미 쓰고 있다 —
   전역 `[data-request]::after` 배지까지 찍히면 **같은 말이 두 번** 나온다(10개 페이지에서 그랬다). */
.cm-req::after{display:none !important}
.cm-req{
  margin-top:1.4rem; display:flex; gap:.75rem; align-items:flex-start;
  padding:.95rem 1.1rem; background:var(--soft);
  border:1px dashed var(--accent); border-radius:var(--r-card);
  font-size:var(--f-cap); color:var(--muted); line-height:1.65;
}
.cm-req b{flex:0 0 auto; color:var(--brand); font-weight:700}

/* ── 컴플라이언스 고지 한 문단 ──────────────────────── */
.cm-note{
  margin-top:1.1rem; padding:.9rem 1.1rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  font-size:var(--f-cap); color:var(--muted); line-height:1.7;
}

/* ── 공지 상세 ──────────────────────────────────────── */
.cm-meta{
  display:flex; flex-wrap:wrap; gap:.45rem 1.1rem; margin-top:1rem;
  font-size:var(--f-cap); color:var(--muted);
}
.cm-meta span{display:inline-flex; align-items:center; gap:.35rem}
.cm-meta b{color:var(--body-c); font-weight:600}
.cm-body{margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid var(--line)}
.cm-body p{margin-top:1rem; font-size:var(--f-body); line-height:1.85}
.cm-body p:first-child{margin-top:0}
.cm-body h2{margin-top:2.4rem}
.cm-body > *:first-child{margin-top:0}
.cm-body ul{margin-top:1rem; display:grid; gap:.5rem}
.cm-body ul li{position:relative; padding-left:1.1rem; font-size:var(--f-sub); line-height:1.7}
.cm-body ul li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:5px; border-radius:var(--r-pill); background:var(--accent)}

.cm-pn{margin-top:2rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cm-pn li{display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:center; border-bottom:1px solid var(--line-s)}
.cm-pn li:last-child{border-bottom:0}
.cm-pn .k{padding-left:.2rem; font-size:var(--f-cap); color:var(--muted); white-space:nowrap}
.cm-pn a, .cm-pn em{
  display:flex; align-items:center; min-height:52px; padding-right:.2rem;
  font-size:var(--f-sub); color:var(--ink); text-decoration:none; line-height:1.5; font-style:normal;
}
.cm-pn a:hover{color:var(--brand)}
.cm-pn em{color:var(--muted)}
.cm-back{display:flex; justify-content:center; margin-top:1.8rem}

/* ── 게이트 안내 (시술 전후) ────────────────────────── */
.cm-cond{margin-top:1.6rem; display:grid; gap:.85rem}
@media (min-width:760px){.cm-cond{grid-template-columns:repeat(3,1fr); gap:1rem}}
.cm-cond li{
  padding:1.1rem 1.2rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-card);
}
.cm-cond .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-bottom:.6rem;
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--serif); font-weight:700; font-size:var(--f-cap); color:var(--accent);
}
.cm-cond b{display:block; color:var(--ink); font-size:var(--f-body); line-height:1.5}
.cm-cond span{display:block; margin-top:.35rem; font-size:var(--f-cap); color:var(--muted); line-height:1.65}


/* ── 정보 블록 (리얼모델 조건·제공·유의) ────────────── */
.cm-blocks{margin-top:1.6rem; display:grid; gap:1rem}
@media (min-width:900px){.cm-blocks{grid-template-columns:1.15fr .85fr .9fr; align-items:start}}
.cm-block{
  padding:clamp(1.25rem, 1rem + 1.2vw, 1.8rem); background:#fff;
  border:1px solid var(--line); border-radius:var(--r-card);
}
.cm-block--soft{background:var(--soft)}
.cm-block h2{font-size:var(--f-h3)}
.cm-block ul{margin-top:.9rem; display:grid; gap:.55rem}
.cm-block li{position:relative; padding-left:1.1rem; font-size:var(--f-sub); color:var(--body-c); line-height:1.7}
.cm-block li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:5px; border-radius:var(--r-pill); background:var(--accent)}
.cm-block p{margin-top:.9rem; font-size:var(--f-sub); color:var(--body-c); line-height:1.75}
.cm-block .cm-tel{margin-top:1rem}

/* ── 예약 안내 배너 (전환) ──────────────────────────── */
.cm-guide li{position:relative; margin-top:.75rem; padding-left:1.1rem; font-size:var(--f-body); line-height:1.7}
.cm-guide li::before{content:""; position:absolute; left:0; top:.78em; width:5px; height:5px; border-radius:var(--r-pill); background:var(--accent)}
.cm-warn{
  margin-top:1.3rem; padding:.9rem 1.1rem; background:var(--accent-w);
  border-radius:var(--r-card); font-size:var(--f-sub); color:var(--brand); line-height:1.7;
}
.cm-tel{
  display:inline-flex; align-items:center; gap:.5rem; min-height:52px;
  font-family:var(--serif); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.5rem, 1.1rem + 1.7vw, 2.1rem);
  color:var(--brand); text-decoration:none;
}
.cm-tel:hover{color:var(--brand-d)}
.cm-telk{display:block; margin-top:1.3rem; font-size:var(--f-cap); color:var(--muted)}

/* ── 폼 보조 ────────────────────────────────────────── */
/* fieldset 은 UA 기본 border·padding 이 있다 — .field 그리드 안에서 이중 테두리가 된다. */
.form fieldset{margin:0; padding:0; border:0; min-width:0}
.form legend{padding:0}
.chk i{font-style:normal; color:var(--accent)}
.file label{font-size:var(--f-sub); color:var(--ink); font-weight:600}
.file input[type="file"]{max-width:100%}
.cm-fsec{margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line-s)}
.cm-fsec:first-of-type{margin-top:0; padding-top:0; border-top:0}
.cm-flabel{font-size:var(--f-sub); color:var(--ink); font-weight:600}
.cm-flabel i{font-style:normal; color:var(--accent); margin-left:.2em}
.cm-radio{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem}
.cm-radio label{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:0 1.1rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:var(--f-sub); color:var(--body-c); cursor:pointer;
}
.cm-radio label:has(input:checked){border-color:var(--brand); background:var(--brand); color:#fff}
.cm-radio input{width:16px; height:16px; margin:0; accent-color:var(--brand)}
.cm-files{display:grid; gap:1rem; margin-top:.5rem}
@media (min-width:700px){.cm-files{grid-template-columns:repeat(3,1fr)}}

/* ── 링크 카드 묶음 여백 ────────────────────────────── */
.cm-links{margin-top:1.5rem}

/* ── 문서(약관·방침) ────────────────────────────────── */
/* .tblwrap 의 브랜드 상단선은 게시판 표의 장치다 — 약관 본문 표에는 얹지 않는다. */
.doc .tblwrap{border-top:0; margin-top:0}
.cm-docmeta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin-top:.4rem;
  font-size:var(--f-cap); color:var(--muted);
}
.doc .cm-req{margin-top:1.6rem}

/* ══════════════════════════════════════════════════════════
   블로그 — 목록(blog.html) · 상세(blog-detail.html)
   블로그는 admin 이 SEO·지역(GEO)·광고 랜딩 글을 발행하는 자리다.
   여기 규칙은 「CMS 가 렌더할 골격」을 잡는 것이고, 지금 화면의 글은 전부 예시다.
   위쪽 규칙은 건드리지 않고 뒤에 덧붙이기만 한다. 접두사 cm-.
   ══════════════════════════════════════════════════════════ */

/* ── 「예시」 배지 ─────────────────────────────────── */
.cm-eg{
  flex:0 0 auto; display:inline-block; padding:.18em .62em;
  background:var(--brand); color:#fff; border-radius:var(--r-pill);
  font-family:var(--sans); font-size:var(--f-cap); font-weight:700;
  line-height:1.55; letter-spacing:.02em; white-space:nowrap;
}
/* 썸네일 위에 얹는 배지 — 사진 위에서도 읽히게 흰 테두리를 두른다. */
.cm-blog .thumb, .cm-lead__fig{position:relative}
.cm-eg--on{position:absolute; top:.5rem; left:.5rem; z-index:2; border:1px solid #fff}

.cm-egnote{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem;
  margin-top:1.25rem; padding:.85rem 1.05rem;
  background:var(--accent-w); border-radius:var(--r-card);
  font-size:var(--f-cap); color:var(--brand); line-height:1.7;
}
.cm-egnote > span:not(.cm-eg){flex:1 1 240px; min-width:0}

.cm-egbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem;
  margin-top:1.35rem; padding:.85rem 1.05rem;
  background:#fff; border:1px dashed var(--accent); border-radius:var(--r-card);
  font-size:var(--f-cap); color:var(--muted); line-height:1.7;
}
.cm-egbar > span:not(.cm-eg){flex:1 1 240px; min-width:0}

/* ── 발행 파이프라인 안내 (운영자용 한 줄) ────────── */
.cm-pipe{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem .8rem;
  padding:1rem 1.2rem; background:var(--soft);
  border:1px solid var(--line); border-radius:var(--r-card);
  font-size:var(--f-sub); color:var(--body-c); line-height:1.75;
}
.cm-pipe > b{
  flex:0 0 auto; padding:.18em .7em; background:var(--brand); color:#fff;
  border-radius:var(--r-pill); font-size:var(--f-cap); font-weight:700; white-space:nowrap;
}
.cm-pipe > span{flex:1 1 260px; min-width:0}
.cm-pipe span b{color:var(--brand); font-weight:700}
.cm-pipe a{color:var(--brand)}

/* ── 분류 · 발행 용도 칩 ──────────────────────────── */
.cm-cat{
  display:inline-block; padding:.12em .62em; border-radius:var(--r-pill);
  background:var(--accent-w); color:var(--brand);
  font-family:var(--sans); font-size:var(--f-cap); font-weight:700; line-height:1.6;
}
.cm-use{
  display:inline-block; padding:.12em .6em; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--sans); font-size:var(--f-cap); font-weight:600;
  color:var(--muted); line-height:1.6; white-space:nowrap;
}
.clist .meta .cm-use{margin-right:.5rem}

/* ── 대표 글 (가로형 큰 카드) ─────────────────────── */
.cm-lead{
  margin-top:1.3rem; display:grid; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
}
@media (min-width:760px){.cm-lead{grid-template-columns:1.05fr .95fr; align-items:stretch}}
.cm-lead__fig{margin:0; overflow:hidden; background:var(--sand)}
.cm-lead__fig img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover}
@media (min-width:760px){
  .cm-lead__fig{min-height:340px}
  .cm-lead__fig img{position:absolute; inset:0; height:100%; aspect-ratio:auto}
}
.cm-lead__b{padding:clamp(1.2rem, 0.95rem + 1.3vw, 2rem); display:flex; flex-direction:column}
.cm-lead__k{display:flex; flex-wrap:wrap; gap:.4rem}
.cm-lead__t{
  margin-top:.8rem; font-family:var(--serif); font-weight:700; color:var(--ink);
  font-size:var(--f-h3); line-height:1.5; letter-spacing:-.01em;
}
.cm-lead__t a{color:inherit; text-decoration:none}
.cm-lead__t a:hover{color:var(--brand)}
.cm-lead__d{margin-top:.75rem; font-size:var(--f-sub); color:var(--muted); line-height:1.75}
.cm-lead__m{margin-top:auto; padding-top:1.15rem; font-family:var(--serif); font-size:var(--f-cap); color:var(--muted)}

/* ── 목록 카드 — 제목 링크 터치 타깃 ──────────────── */
/* 카드 제목 링크는 목록에서 가장 많이 눌리는 곳이다 — 44px 를 준다(이벤트 목록이 20px 였다) */
.clist .cb b a{display:flex; align-items:center; min-height:44px}

/* ── 대표 이미지가 없는 글의 자리 ───────────────────
   회색 빈 박스가 아니라 분류를 크게 쓴 글자 자리다(플레이스홀더 아님). */
.cm-thumb--none{
  aspect-ratio:16/10; display:flex; flex-direction:column; justify-content:center; gap:.45rem;
  padding:1.15rem 1.25rem; background:var(--accent-w); border-bottom:1px solid var(--line);
}
.cm-thumb--none .cm-eg{align-self:flex-start}
.cm-thumb--none b{font-family:var(--serif); font-weight:700; color:var(--brand); font-size:var(--f-h3); line-height:1.4}
.cm-thumb--none span:not(.cm-eg){font-size:var(--f-cap); color:var(--muted); line-height:1.65}

/* ── 상세 — 공유 · 목록 링크 줄 ───────────────────── */
.cm-tools{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem}
.cm-tools a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 1rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:var(--f-sub); color:var(--body-c); text-decoration:none;
}
.cm-tools a:hover{border-color:var(--accent); color:var(--brand)}

/* ── 상세 — 목차 ──────────────────────────────────── */
.cm-toc{
  padding:1.05rem 1.25rem 1.15rem; background:var(--soft);
  border:1px solid var(--line); border-radius:var(--r-card);
}
.cm-toc > p{font-size:var(--f-cap); letter-spacing:.18em; color:var(--muted)}
.cm-toc ol{margin-top:.35rem; list-style:none; counter-reset:cmtoc; display:grid}
.cm-toc li{counter-increment:cmtoc; border-top:1px solid var(--line-s)}
.cm-toc li:first-child{border-top:0}
.cm-toc a{
  display:flex; align-items:center; gap:.65rem; min-height:44px;
  font-size:var(--f-sub); color:var(--body-c); text-decoration:none; line-height:1.5;
}
.cm-toc a::before{
  content:counter(cmtoc, decimal-leading-zero); flex:0 0 auto;
  font-family:var(--serif); font-weight:700; font-size:var(--f-cap); color:var(--accent);
}
.cm-toc a:hover{color:var(--brand)}

/* ── 상세 — 본문 (admin 본문이 통째로 들어올 자리) ── */
.cm-art{margin-top:2rem}
.cm-art h2{
  margin-top:2.6rem; padding-top:1.7rem; border-top:1px solid var(--line);
  scroll-margin-top:84px;
  font-family:var(--serif); font-weight:700; color:var(--ink);
  font-size:var(--f-h3); line-height:1.5; letter-spacing:-.01em;
}
.cm-art > h2:first-child{margin-top:0; padding-top:0; border-top:0}
.cm-art h3{margin-top:1.7rem; color:var(--ink); font-size:var(--f-body); font-weight:700; line-height:1.6}
.cm-art p{margin-top:.95rem; font-size:var(--f-body); color:var(--body-c); line-height:1.85}
.cm-art h2 + p, .cm-art h3 + p{margin-top:.8rem}
.cm-art a{color:var(--brand)}
.cm-art ul{margin-top:1.1rem; display:grid; gap:.55rem}
.cm-art ul li{position:relative; padding-left:1.1rem; font-size:var(--f-sub); color:var(--body-c); line-height:1.75}
.cm-art ul li::before{content:""; position:absolute; left:0; top:.75em; width:5px; height:5px; border-radius:var(--r-pill); background:var(--accent)}
/* site.css 의 부품이 .cm-art p 에 먹히지 않게 원래 값을 되돌려 준다. */
.cm-art .quote{margin-top:1.8rem}
.cm-art .quote p{margin-top:0; font-family:var(--serif); font-size:var(--f-lead); color:var(--ink); line-height:1.65}
.cm-art .acc{margin-top:1.2rem}
.cm-art .acc p{margin-top:0; padding:0 0 1.15rem; font-size:var(--f-sub); color:var(--muted); line-height:1.75}
.cm-art .cmpwrap{margin-top:1.4rem}

.cm-artfig{margin:1.75rem 0 0}
.cm-artfig img{display:block; width:100%; max-height:460px; object-fit:cover; border-radius:var(--r-card)}
.cm-artfig figcaption{margin-top:.7rem; font-size:var(--f-cap); color:var(--muted); line-height:1.65}

.cm-tcap{margin-bottom:.7rem; text-align:left; font-size:var(--f-cap); color:var(--muted); line-height:1.6}
.cm-art .cm-tnote{margin-top:.85rem; font-size:var(--f-cap); color:var(--muted); line-height:1.7}
.cm-art .cm-tnote b{color:var(--ink)}

/* 지역(GEO) 문단 — 본문 안에서 한 번만 쓴다. */
.cm-art .cm-geo{
  margin-top:1.25rem; padding:1rem 1.2rem; background:var(--accent-w);
  border-radius:var(--r-card); font-size:var(--f-sub); color:var(--brand-d); line-height:1.8;
}
.cm-art .cm-geo b{color:var(--brand)}

/* ── 상세 — 하단 CTA ──────────────────────────────── */
.cm-ctak{margin-top:1.9rem; font-size:var(--f-cap); color:var(--muted); line-height:1.65}
.cm-cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.8rem}
.cm-cta .btn{margin-top:0}

/* ── 잔손질 ───────────────────────────────────────── */
.cm-note a{color:var(--brand)}
.cm-pn .cm-eg{margin-left:.4rem}

/* 넓은 화면 — 읽는 폭을 지키려고 본문만 좁히니 오른쪽이 통째로 비었다(지적).
   목차를 옆으로 빼서 두 열로 채운다: 본문은 읽는 폭을 유지하고 화면은 꽉 찬다. */
@media (min-width:1000px){
  /* 목차가 있는 글(블로그 상세)에만 건다. 예전에는 `article` 전체에 걸려 있어
     목차가 없는 상세(공지·이벤트·전후)까지 오른쪽에 260px 빈 칸을 잡고 본문이 왼쪽으로 쏠렸다. */
  .sec > .wrap > article:has(> .cm-toc){
    display:grid; grid-template-columns:minmax(0,1fr) 260px;
    column-gap:clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items:start;
  }
  .sec > .wrap > article:has(> .cm-toc) > *{grid-column:1}
  /* 위의 `article > *` 규칙이 더 구체적이라 그대로 두면 목차가 1열에 남는다 — 같은 깊이로 이긴다. */
  .sec > .wrap > article:has(> .cm-toc) > .cm-toc{
    grid-column:2; grid-row:1 / span 30; margin-top:0;
    position:sticky; top:88px; max-width:none; align-self:start;
  }
  .cm-art{max-width:none}
  /* 목차가 없는 상세는 읽는 폭으로 가운데 정렬 — 왼쪽에 붙어 오른쪽이 비는 것보다 낫다 */
  .sec > .wrap > article:not(:has(> .cm-toc)){max-width:900px; margin-inline:auto}
  /* 목록 페이지의 대표 카드(.cm-lead)는 상세 글이 아니다 — 목록 폭을 그대로 쓴다 */
  .sec > .wrap > article.cm-lead{max-width:none}
}


/* ══ 검수 2라운드 ══════════════════════════════════════════════════════
   ⑨ 탭이 위 요소에 붙어 있었다 · ⑫ 커뮤니티 페이지 첫 섹션의 위 여백이 과했다
   ⑩⑪ 「요청」 자리를 글로만 두지 않고 「어떤 크기·어떻게 보이는지」를 눈으로 보여준다 */
.cm-subnav + .sec{padding-top:clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem)}
.cm-subnav + .sec .tabs{margin-top:0}
.tabs{margin-top:1.7rem}
.cm-listhead{margin-top:1.1rem}

/* ⑩ 이벤트 배너 자리 — 비율·크기를 보여주는 예시 */
.cm-thumb--spec,
.clist .thumb.cm-thumb--spec{
  /* `.clist .thumb` 가 더 구체적이라 클래스 하나로는 16:10 비율을 못 이긴다 — 같은 깊이로 쓴다(모바일에서 문구가 잘렸다). */
  aspect-ratio:auto; height:auto; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem;
  padding:1.3rem 1.1rem; text-align:center; background:var(--soft); border-bottom:1px solid var(--line-s);
}
/* 목록 카드 밖(상세 화면 본문)에서 쓸 때는 스스로 카드가 된다 */
.cm-artfig .cm-thumb--spec{border:1px solid var(--line); border-radius:var(--r-card); padding-block:2.2rem}
.cm-spec__frame{
  display:grid; place-items:center; width:min(72%, 190px); aspect-ratio:16/10;
  border:1px dashed var(--accent); border-radius:var(--r-card); background:#fff;
}
.cm-spec__ratio{font-family:var(--serif); font-size:var(--f-sub); color:var(--accent); letter-spacing:.06em}
.cm-spec__t{font-size:var(--f-sub); color:var(--ink); font-weight:600}
.cm-spec__s{font-size:var(--f-cap); color:var(--muted); line-height:1.6}

/* ⑪ 전후 게시판 예시 — 실제 사례가 아니라 「자리와 크기」를 보여준다 */
.cm-ba{display:grid; gap:1.25rem; margin-top:1.4rem}
@media (min-width:760px){.cm-ba{grid-template-columns:1fr 1fr}}
.cm-ba__case{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.cm-ba__pair{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-s)}
.cm-ba__slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  aspect-ratio:3/4; background:var(--soft); color:var(--muted);
}
.cm-ba__slot b{font-family:var(--serif); font-size:var(--f-h3); color:var(--brand)}
.cm-ba__slot i{font-style:normal; font-size:var(--f-cap)}
.cm-ba__case figcaption{padding:.95rem 1.1rem 1.15rem}
.cm-ba__case figcaption b{display:block; color:var(--ink); font-size:var(--f-body)}
.cm-ba__case figcaption span{display:block; margin-top:.25rem; font-size:var(--f-cap); color:var(--muted); line-height:1.6}


/* 「발행 자리」는 운영자에게만 필요한 설명이다 — 방문자에게 보이는 문구가 아니므로
   파란 개발 배지(data-dev)로 바꾸고, 배포 전 body.no-review 로 함께 꺼진다. */
.cm-pipe{position:relative; margin:0 0 1.5rem; min-height:0}
.cm-pipe[data-dev]::after{margin-top:0}
body.no-review .cm-pipe{display:none}

/* ⑬ 이벤트 금액표 — 게시판 표(.tbl min-width:560px)를 그대로 쓰면 모바일에서 「금액」이 잘려
   가장 중요한 칸을 가로로 밀어야 보인다. 이 표만 좁은 화면에 맞춰 접는다. */
.cm-price{min-width:0}
.cm-price th, .cm-price td{padding-inline:.4rem}
.cm-price td:last-child, .cm-price th:last-child{text-align:right; white-space:nowrap}
.cm-price td:last-child b{color:var(--brand)}
@media (max-width:520px){
  .cm-price{font-size:var(--f-cap)}
  .cm-price th, .cm-price td{padding-block:.7rem}
}


/* ══ ⑭ 전후 게시판 갤러리 .ba-* ═══════════════════════════════════════
   레퍼런스(대상 사이트 로그인 뒤 화면)의 골격 — 3열 카드 · 카드 안에 전/후 한 쌍 · 아래 크림색 캡션 블록.
   사진은 로그인 뒤에만 열리므로 여기서는 **잠금 자리**로 둔다. 자리·비율·캡션은 그대로 성립한다. */
.ba-tools{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem; margin-top:1.4rem}
.ba-grid{display:grid; gap:1rem; margin-top:1.3rem}
@media (min-width:640px){.ba-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.ba-grid{grid-template-columns:repeat(3,1fr); gap:1.25rem}}

.ba-case{margin:0; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.ba-case a{text-decoration:none; color:inherit; display:flex; flex-direction:column; flex:1}
.ba-case:hover{border-color:var(--accent)}

/* 한 쌍 — 정면은 좌우로, 측면·부분은 위아래로 나눈다(레퍼런스가 그렇게 나뉘어 있다) */
.ba-pair{position:relative; display:grid; gap:2px; background:var(--line-s); aspect-ratio:4/3}
.ba-pair--lr{grid-template-columns:1fr 1fr}
.ba-pair--tb{grid-template-rows:1fr 1fr}
.ba-slot{
  position:relative; display:grid; place-content:center; gap:.3rem; padding:.7rem;
  background:var(--sand); text-align:center;
}
.ba-slot__k{font-family:var(--serif); font-size:var(--f-h3); font-weight:700; color:var(--accent); opacity:.75}
.ba-slot__s{font-size:var(--f-cap); color:var(--muted); line-height:1.5}
.ba-pair__lock{
  position:absolute; left:50%; top:.55rem; transform:translateX(-50%); z-index:2;
  display:inline-flex; align-items:center; gap:.3rem; padding:.15em .6em;
  border-radius:var(--r-pill); background:rgba(255,255,255,.92); border:1px solid var(--line);
  font-size:var(--f-cap); color:var(--brand); font-weight:600; white-space:nowrap;
}

.ba-case__b{flex:1; display:flex; flex-direction:column; padding:1.05rem 1.1rem 1.25rem; text-align:center; background:var(--soft); border-top:1px solid var(--line-s)}
.ba-case__no{display:block; margin-bottom:.3rem; font-family:var(--serif); font-size:var(--f-cap); letter-spacing:.1em; color:var(--accent)}
.ba-case__t{color:var(--ink); font-size:var(--f-body); font-weight:700; line-height:1.45}
.ba-case__m{margin-top:.55rem; display:grid; gap:.25rem; font-size:var(--f-cap); color:var(--muted); line-height:1.6}
.ba-case__go{margin-top:auto; padding-top:.9rem; font-size:var(--f-cap); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600}

/* 상세 — 큰 한 쌍 + 가운데 정렬 메타 */
.ba-view{margin:1.6rem 0 0}
.ba-view .ba-pair{aspect-ratio:16/11; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
@media (max-width:640px){.ba-view .ba-pair{aspect-ratio:4/5}}
.ba-view__m{margin-top:1.4rem; display:grid; gap:.35rem; text-align:center; font-size:var(--f-sub); color:var(--body-c); line-height:1.7}
.ba-view__m b{color:var(--ink)}
.ba-warn{margin-top:1.4rem; text-align:center; font-size:var(--f-cap); color:var(--muted); line-height:1.7}
.ba-more{margin-top:2.4rem}
.ba-more > p{font-size:var(--f-cap); letter-spacing:.18em; color:var(--muted)}
.ba-more .acc summary{font-size:var(--f-sub)}
.ba-more .acc .m{display:block; margin-top:.2rem; font-size:var(--f-cap); color:var(--muted); font-weight:400}


/* ⑮ 시술 사진 갤러리 — 아직 안 온 사진 자리는 규격을 보여 준다 */
.cm-gal--slot{background:var(--soft)}
.cm-gal--slot .cm-thumb--spec{aspect-ratio:4/3; border:0; border-radius:0; padding:1.2rem}


/* ══ ⑯ 학회 — 원장 강연·시연 흑백 스트립 ═══════════════════════
   병원이 준 7장은 960~1170px 저해상이라 큰 자리에는 못 쓴다(플레이북: 해상도가 자리 크기를 정한다).
   가로로 미는 스트립에 작게 놓으면 저해상이 안 드러나고, 흑백이라 한 묶음으로 읽힌다. */
.ac-bw__strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr);
  gap:.75rem; margin-top:1.4rem; overflow-x:auto; padding-bottom:.6rem;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
}
.ac-bw__i{margin:0; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.ac-bw__i img{width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(1) contrast(1.05)}
.ac-bw__i figcaption{padding:.55rem .8rem .7rem; font-size:var(--f-cap); color:var(--muted); letter-spacing:.04em}
@media (min-width:1000px){ .ac-bw__strip{grid-auto-columns:minmax(260px, 1fr)} }