/* =========================================================
   장형석한의원 — 게시판
   ---------------------------------------------------------
   style.css 를 먼저 불러온 뒤에 이 파일을 불러옵니다.
   색·둥근모서리·그림자는 전부 style.css 의 토큰을 그대로 씁니다.
   따라서 다크 테마는 따로 손대지 않아도 함께 따라옵니다.
   ========================================================= */

/* ---------- 안내문 · 알림 ---------- */
.bd-guide{
  font-size:var(--fs-xs);line-height:1.7;color:var(--ink-2);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-s);
  background:var(--acc-soft);border:1px solid var(--line);
  margin-bottom:var(--sp-6);
}
.bd-flash{
  font-size:var(--fs-sm);font-weight:700;color:var(--acc);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-s);
  background:var(--surface);border:1.5px solid var(--acc);
  margin-bottom:var(--sp-5);display:flex;align-items:center;gap:var(--sp-2);
}
.bd-flash::before{content:"✓";font-weight:700}
.bd-flash.bad{color:#C62A2F;border-color:#E5484D}
.bd-flash.bad::before{content:"!"}

/* ---------- 도구 줄 (분류 · 검색 · 글쓰기) ---------- */
.bd-tools{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-5);
}
.bd-cats{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.bd-cat{
  padding:var(--sp-2) var(--sp-4);border-radius:999px;font-size:var(--fs-xs);font-weight:700;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  min-height:40px;transition:.2s var(--ease);
}
.bd-cat:hover{border-color:var(--acc);color:var(--acc)}
.bd-cat.on{background:var(--acc);color:var(--acc-ink);border-color:transparent}

/* 게시판 사이 이동 — 같은 모양의 링크 버전 */
.bd-boards{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.bd-boards .bd-cat{display:inline-flex;align-items:center;text-decoration:none}

.bd-search{display:flex;margin-left:auto;position:relative}
.bd-search input{
  width:min(15rem,52vw);min-height:44px;padding:var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-4);
  border-radius:999px;border:1.5px solid var(--line-2);background:var(--surface);
  color:var(--ink);font:inherit;font-size:var(--fs-sm);transition:.2s var(--ease);
}
.bd-search input::placeholder{color:var(--ink-3)}
.bd-search input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.bd-search button{
  position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-3);transition:.2s var(--ease);
}
.bd-search button:hover{color:var(--acc);background:var(--surface-2)}

/* ---------- 목록 ---------- */
.bd-head,
.bd-row > a{
  display:grid;
  grid-template-columns:1fr 7rem 6rem 4rem;
  gap:var(--sp-4);align-items:center;
}
.bd-head{
  padding:var(--sp-3) var(--sp-5);font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);
  letter-spacing:.06em;border-bottom:1.5px solid var(--line-2);
}
.bd-head span:not(:first-child){text-align:center}
/* 칸을 뺀 목록(2026-09-19, board-config.js 의 hideMeta) — 빈 칸 폭만큼 벌어지지 않게 격자를 좁힙니다.
   .no-d 날짜 없음 · .no-w 작성자 없음. 좁은 화면(768px 이하)은 아래 두 줄 배치를 그대로 씁니다. */
@media (min-width:769px){
  .no-d.bd-head,.no-d .bd-row > a{grid-template-columns:1fr 7rem 4rem}
  .no-w.no-d.bd-head,.no-w.no-d .bd-row > a{grid-template-columns:1fr 4rem}
}

.bd-list{border-bottom:1px solid var(--line)}
.bd-row{border-bottom:1px solid var(--line)}
.bd-row:last-child{border-bottom:0}
.bd-row > a{
  padding:var(--sp-4) var(--sp-5);transition:background .2s var(--ease);
  border-radius:var(--r-s);
}
.bd-row > a:hover{background:var(--surface)}
.bd-row.pinned{background:color-mix(in srgb,var(--acc) 5%,transparent)}

.bd-t{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
/* 제목 칸. 안쪽이 두 겹인 이유가 있습니다 (2026-09-07) —
   .bd-title-t 가 글자(길면 … 로 자름), 그 뒤에 붙는 .bd-lock 이 자물쇠입니다.
   ⚠ 자물쇠를 이 칸 바깥으로 빼지 마세요. 좁은 화면에서는 제목이 여러 줄로
     풀리는데, 바깥에 있으면 자물쇠만 아랫줄로 뚝 떨어져 딴 표식처럼 보입니다.
   ⚠ … 로 자르는 것은 안쪽 .bd-title-t 입니다. 자물쇠는 그 바깥이라
     제목이 아무리 길어도 함께 잘리지 않습니다. */
.bd-title{
  font-weight:700;font-size:var(--fs-md);letter-spacing:-.028em;line-height:1.5;
  display:flex;align-items:center;min-width:0;max-width:100%;
}
.bd-title-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bd-row > a:hover .bd-title{color:var(--acc)}
.bd-w,.bd-d,.bd-v{
  text-align:center;font-size:var(--fs-xs);color:var(--ink-3);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.bd-w{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 제목 옆 작은 표식들 */
.bd-badge,.bd-chip,.bd-reply,.bd-new,.bd-pending,.bd-lock-tag{
  flex:none;font-size:var(--fs-2xs);font-weight:700;padding:.2rem var(--sp-2);
  border-radius:999px;letter-spacing:-.01em;line-height:1.6;
}
.bd-badge{background:var(--acc);color:var(--acc-ink)}
.bd-chip{background:var(--surface-2);color:var(--acc);border:1px solid var(--line)}
.bd-reply{background:var(--acc-soft);color:var(--acc);border:1px solid var(--line)}
.bd-new{background:#C62A2F;color:#fff}  /* 2026-09-07 #E5484D → 흰 글씨 3.9:1 이라 (README 29-2 절) */
.bd-pending{background:#C8A20A;color:#1A1F26}  /* 노랑 위 흰 글씨 2.4:1 → 검정 7.0:1 */
.bd-lock-tag{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
/* 제목 옆 자물쇠 — 비밀글 표시입니다 (2026-09-07).
   ⚠ 눈에 보이는 것은 그림뿐이라, 화면을 읽어주는 프로그램을 쓰시는 분께는
     안에 넣어 둔 <span class="sr">비밀글</span> 이 대신 읽힙니다. 지우지 마세요. */
.bd-lock{flex:none;display:inline-flex;align-items:center;margin-left:.26rem;color:var(--ink-3)}
.bd-row > a:hover .bd-lock{color:var(--acc)}

/* ---------- 페이지 번호 ---------- */
.bd-pager{display:flex;justify-content:center;gap:var(--sp-1);margin-top:var(--sp-7);flex-wrap:wrap}
.bd-pager button{
  min-width:42px;height:42px;border-radius:var(--r);font-weight:700;font-size:var(--fs-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  transition:.2s var(--ease);font-variant-numeric:tabular-nums;
}
.bd-pager button:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
.bd-pager button.on{background:var(--acc);color:var(--acc-ink);border-color:transparent}
.bd-pager button:disabled{opacity:.35;cursor:default}

.bd-count{margin-top:var(--sp-4);text-align:right;font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}
.bd-loading,.bd-empty{
  text-align:center;padding:3.5rem var(--sp-4);color:var(--ink-3);font-size:var(--fs-sm);
}
.bd-empty{
  background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r);
}
.bd-mode{
  margin-top:var(--sp-6);padding:var(--sp-4) var(--sp-4);border-radius:var(--r-s);
  background:var(--surface-2);border:1px dashed var(--line-2);
  font-size:var(--fs-2xs);line-height:1.7;color:var(--ink-2);
}
.bd-mode code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--surface);padding:.1rem var(--sp-1);border-radius:6px;border:1px solid var(--line);
}

/* ---------- 글 보기 ---------- */
.bd-view{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:clamp(1.4rem,4vw,2.4rem);
}
.bd-view-head{border-bottom:1.5px solid var(--line);padding-bottom:var(--sp-5);margin-bottom:var(--sp-6)}
.bd-view-head .bd-chip,.bd-view-head .bd-pending{display:inline-block;margin-bottom:var(--sp-3)}
/* 분류 딱지 + 제목 한 줄 (2026-09-19). 딱지는 제목 첫 줄 높이에 맞추고, 제목이 길면 딱지 옆에서 줄바꿈합니다. */
.bd-view-title{display:flex;align-items:baseline;gap:var(--sp-3)}
.bd-view-title .bd-chip{flex:none;margin-bottom:0;position:relative;top:-.2em}
.bd-view-title h2{min-width:0}
.bd-view-head h2{
  font-size:var(--fs-h3);letter-spacing:-.04em;line-height:1.35;
}
.bd-meta{
  display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;
  margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--ink-3);font-weight:600;
}
/* 치료후기 글 화면에서는 이 줄을 오른쪽 끝으로 붙입니다 (2026-09-19 병원 요청).
   자필치료후기는 '가린 이름 · 조회', 치료성공 STORY · 치료사례보고는 '조회' 만 남아 있습니다
   (빼는 칸은 board-config.js 의 hideMeta). 다른 게시판은 예전처럼 왼쪽입니다. */
#board[data-board="review"] .bd-meta{justify-content:flex-end}
.bd-meta time{font-variant-numeric:tabular-nums}

.bd-body{font-size:var(--fs-sm);line-height:1.85;color:var(--ink-2);word-break:keep-all}
.bd-body p{margin-bottom:var(--sp-4)}
.bd-body p:last-child{margin-bottom:0}
.bd-body h3,.bd-body h4{
  color:var(--ink);letter-spacing:-.035em;margin:var(--sp-7) 0 var(--sp-3);line-height:1.4;
}
.bd-body h3{font-size:var(--fs-h5)}
.bd-body h4{font-size:var(--fs-md)}
.bd-body strong,.bd-body b{color:var(--ink);font-weight:700}
.bd-body ul,.bd-body ol{margin:0 0 var(--sp-4) var(--sp-5)}
.bd-body ul li{list-style:disc;margin-bottom:var(--sp-1)}
.bd-body ol li{list-style:decimal;margin-bottom:var(--sp-1)}
/* 공지 본문의 휴진일 목록은 style.css 의 .notice-days 를 그대로 씁니다.
   목록 기본 스타일이 끼어들지 않게 여기서 되돌립니다. */
.bd-body .notice-days{margin-left:0}
.bd-body .notice-days li{list-style:none;margin-bottom:0}
/* width 는 auto 입니다(100% 아닙니다). 옮겨온 사진은 크기가 제각각이라 100% 로 두면
   작은 사진까지 460px 로 늘려 뭉갭니다(2009 수상 사진 200px → 2.3배). 원본보다 크게는
   늘리지 않고, 460px 보다 큰 것만 460px 로 줄입니다.
   ⚠ max-width 에서 100% 를 빼지 마세요. auto 라서 460px 을 못 넘게만 막아 두면
   휴대폰(375px)에서 사진이 화면 밖으로 삐져나갑니다. (2026-09-03) */
.bd-body img{
  width:auto;max-width:min(460px,100%);height:auto;border-radius:var(--r);
  border:1px solid var(--line);margin:var(--sp-4) 0;
}
/* 자필 후기 원본 스캔.
   ⚠ 2026-09-18 부터 쓰이지 않습니다 — 스캔을 저장소·배포에서 뺐고, 본문에 남은 자리는
     board.js 의 dropScans 가 그리기 전에 걷어냅니다. 스캔을 다시 싣게 되면 쓰려고 남겨 둡니다.
   공지 안내문과 달리 손글씨라, 460px 로 줄이면 읽기가 어렵습니다.
   원본 크기(가로 600px)까지는 키워서 보여주고, 휴대폰처럼 화면이 좁을 때는
   눌러서 원본을 그대로 열 수 있게 링크로 감싸 두었습니다. */
.bd-body img.bd-scan{max-width:min(600px,100%);margin:0}
.bd-body a.bd-scan-link{
  display:block;text-decoration:none;max-width:600px;margin:.2rem 0 var(--sp-6);
}
.bd-body a.bd-scan-link:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:var(--r-l)}
.bd-body a{color:var(--acc);font-weight:700;text-decoration:underline}
/* 출처 표시 — 칼럼·언론보도 글 끝에 붙는 한 줄 */
.bd-body .bd-src{
  margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--ink-3);
}
/* ── 2026-09-03 옮겨온 병원소식 217건이 쓰는 것들 ──────────────────
   원본 글의 본문은 대부분 안내문 사진 한두 장입니다. 사진을 누르면
   원본 크기로 열리게 해 두었습니다(기존 사이트와 같은 동작). */
.bd-body .bd-fig{margin:var(--sp-4) 0}
.bd-body .bd-fig img{margin:0}
/* ⚠ display 를 inline-block 으로 두지 마세요. 안쪽 .bd-body img 가 width:100% 라
   서로의 너비를 기다리다가 링크가 2px 로 찌부러지고, loading="lazy" 가 "화면에 안
   들어왔다" 고 판단해 사진 파일을 아예 받지 않습니다(2026-09-03에 이래서 병원소식
   사진 257장이 전부 안 나왔습니다). 위 .bd-scan-link 와 같이 block 이어야 합니다. */
.bd-body a.bd-zoom{display:block;max-width:460px;text-decoration:none;
  border-radius:var(--r)}
.bd-body a.bd-zoom:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.bd-body video{width:100%;max-width:560px;height:auto;border-radius:var(--r);
  border:1px solid var(--line);background:#000;display:block}
/* 보도자료 머리에 붙는 '- 무엇무엇' 줄 */
.bd-body .bd-kicker{font-weight:700;color:var(--ink);margin-bottom:var(--sp-2)}
/* 요즘 브라우저가 재생하지 못하는 WMV 파일 안내 */
.bd-body .bd-file{margin:var(--sp-4) 0;padding:var(--sp-4) var(--sp-4);border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line)}
.bd-body .bd-file span{display:block;margin-top:var(--sp-2);font-size:var(--fs-xs);
  font-weight:600;color:var(--ink-3);line-height:1.7}
/* 어느 원본 쪽에서 가져왔는지 적어 두는 줄 */
.bd-body .bd-note-s{margin-top:var(--sp-2);font-size:var(--fs-2xs);color:var(--ink-3)}
.bd-body .bd-note-s span{display:inline-block;margin-left:var(--sp-1);padding:.08rem var(--sp-2);
  border-radius:5px;background:var(--surface-2);border:1px solid var(--line);
  font-weight:700}

.bd-body blockquote{
  border-left:3px solid var(--acc);padding:var(--sp-1) 0 var(--sp-1) var(--sp-4);
  margin:var(--sp-5) 0;color:var(--ink-2);
}
.bd-body table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:var(--sp-4) 0}
.bd-body th,.bd-body td{border:1px solid var(--line);padding:var(--sp-2) var(--sp-3);text-align:left}
.bd-body th{background:var(--surface-2);font-weight:700;color:var(--ink)}

/* ---------- 답변 ---------- */
.bd-answers{margin-top:var(--sp-7);display:grid;gap:var(--sp-3)}
.bd-answer{
  padding:var(--sp-5) var(--sp-6);border-radius:var(--r);
  background:var(--bg);border:1px solid var(--line);
}
.bd-answer.staff{background:var(--acc-soft);border-color:transparent}
.bd-answer-head{
  display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2);
  font-size:var(--fs-xs);color:var(--ink-3);font-weight:700;
}
.bd-answer-head b{color:var(--acc);font-size:var(--fs-xs);font-weight:700}
.bd-answer p{font-size:var(--fs-sm);line-height:1.8;color:var(--ink-2)}
.bd-await{
  margin-top:var(--sp-7);padding:var(--sp-4);border-radius:var(--r-s);text-align:center;
  background:var(--bg);border:1px dashed var(--line-2);
  font-size:var(--fs-xs);color:var(--ink-3);
}

.bd-view-foot{
  display:flex;gap:var(--sp-2);flex-wrap:wrap;
  margin-top:var(--sp-7);padding-top:var(--sp-6);border-top:1px solid var(--line);
}
.bd-view-foot .btn{min-height:48px}

/* ---------- 비밀글 암호 · 글쓰기 폼 ---------- */
.bd-pw,.bd-form{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:clamp(1.4rem,4vw,2.4rem);
}
.bd-pw{max-width:26rem;margin-inline:auto;text-align:left}
.bd-pw h2,.bd-form h2{
  font-size:clamp(1.2rem,2.6vw,1.6rem);letter-spacing:-.04em;margin-bottom:var(--sp-2);
}
.bd-pw p{font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:var(--sp-5)}
.bd-form .bd-view-foot{margin-top:var(--sp-6)}

/* textarea 는 style.css 의 input 과 같은 모양을 씁니다 */
.field textarea{
  width:100%;padding:var(--sp-3) var(--sp-4);border-radius:var(--r);
  border:1.5px solid var(--line-2);background:var(--bg);
  color:var(--ink);font:inherit;font-size:var(--fs-sm);line-height:1.75;
  resize:vertical;min-height:9rem;transition:.2s var(--ease);
}
.field textarea::placeholder{color:var(--ink-3)}
.field textarea:focus{
  outline:none;border-color:var(--acc);background:var(--surface);
  box-shadow:0 0 0 3px var(--acc-soft);
}

/* 자동 등록 프로그램용 미끼 칸 — 사람에게는 보이지 않습니다.
   display:none 은 일부 봇이 걸러내므로 화면 밖으로 밀어냅니다. */
.bd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 관리자 ----------
   ⚠ 이름을 ad- 로 시작하지 마세요 (2026-09-19). 예전 이름 .ad-bar · .ad-item · .ad-title · .ad-new 는
     광고 차단 목록 EasyList 의 일반 숨김 규칙(##.ad-bar 등)과 같아서, 광고 차단 확장이 켜진 브라우저에서는
     로그인 줄 · 글 목록 · 제목 · '새 글 작성' 이 통째로 사라졌습니다(건수와 쪽 번호만 보임).
     확장은 보통 file:// 에서는 안 돌아 로컬에서는 멀쩡해 보였습니다. 그래서 mgr- (manager)로 바꿨습니다. */
.mgr-login{max-width:26rem;margin-inline:auto}
.mgr-bar{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r);margin-bottom:var(--sp-5);
  background:var(--surface);border:1px solid var(--line);
}
.mgr-who{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.mgr-bar-act{margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.mgr-bar-act .btn{min-height:44px;--pad:1.1rem;font-size:var(--fs-xs)}
/* 2026-09-19 — 연결된 게시판 서버 표시 · 상태 단추의 글 수 · 빈 '승인 대기' 에서 바로 가는 단추 */
.mgr-conn{display:block;margin-top:var(--sp-1);font-size:var(--fs-2xs);font-weight:600;color:var(--ink-3);word-break:break-all}
.mgr-login .mgr-conn{margin:calc(var(--sp-2) * -1) 0 var(--sp-4)}
.bd-cat .mgr-n{font-variant-numeric:tabular-nums}
.bd-cat .mgr-n:empty{display:none}
.mgr-empty-act{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-4)}
.mgr-empty-act .btn{min-height:44px}

.mgr-filters{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.mgr-filters select{
  min-height:44px;padding:var(--sp-2) var(--sp-4);border-radius:var(--r);
  border:1.5px solid var(--line-2);background:var(--surface);
  color:var(--ink);font:inherit;font-size:var(--fs-sm);
}

.mgr-list{display:grid;gap:var(--sp-3)}
.mgr-item{
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
}
.mgr-item-top{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.mgr-item-top time{margin-left:auto;font-size:var(--fs-2xs);color:var(--ink-3);font-weight:600}
.mgr-state{font-size:var(--fs-2xs);font-weight:700;padding:.2rem var(--sp-2);border-radius:999px}
.mgr-state.pending{background:#C8A20A;color:#1A1F26}
.mgr-state.published{background:var(--acc);color:var(--acc-ink)}
.mgr-state.hidden{background:var(--ink-3);color:var(--bg)}  /* 어두운 화면에서 흰 글씨 2.9:1 → 바탕색 글씨 6.5:1 */
.mgr-title{
  display:block;text-align:left;font-size:var(--fs-md);font-weight:700;
  letter-spacing:-.03em;line-height:1.5;color:var(--ink);
}
.mgr-title:hover{color:var(--acc)}
.mgr-item-meta{font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--sp-1)}
.mgr-act{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.mgr-act button{
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-s);font-size:var(--fs-xs);font-weight:700;
  border:1px solid var(--line-2);color:var(--ink-2);background:var(--bg);
  min-height:38px;transition:.2s var(--ease);
}
.mgr-act button:hover{border-color:var(--acc);color:var(--acc)}
.mgr-act button.danger:hover{border-color:#E5484D;color:#C62A2F}
.mgr-cdel{
  margin-left:auto;font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);
  text-decoration:underline;
}
.mgr-cdel:hover{color:#C62A2F}

.mgr-reply{margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--line)}
.mgr-reply label{display:block;font-size:var(--fs-xs);font-weight:700;margin-bottom:var(--sp-2)}
.mgr-reply textarea{
  width:100%;padding:var(--sp-3) var(--sp-4);border-radius:var(--r);margin-bottom:var(--sp-3);
  border:1.5px solid var(--line-2);background:var(--bg);
  color:var(--ink);font:inherit;font-size:var(--fs-sm);line-height:1.75;resize:vertical;
}
.mgr-reply textarea:focus{
  outline:none;border-color:var(--acc);background:var(--surface);
  box-shadow:0 0 0 3px var(--acc-soft);
}

/* ---------- 좁은 화면 ---------- */
@media (max-width:768px){
  .bd-head{display:none}
  .bd-row > a{
    grid-template-columns:1fr auto;
    grid-template-areas:"t t" "w d";
    gap:var(--sp-1) var(--sp-3);padding:var(--sp-4) var(--sp-2);
  }
  .bd-t{grid-area:t}
  /* 좁은 화면에서는 제목이 여러 줄로 풀립니다. .bd-title 을 block 으로 돌리면
     안쪽 글자와 자물쇠가 보통 글줄처럼 흘러서, 자물쇠가 마지막 낱말 바로
     뒤에 붙습니다(따로 떨어지지 않습니다). */
  .bd-title{display:block}
  .bd-title-t{white-space:normal;overflow:visible}
  .bd-lock{vertical-align:-2px}
  .bd-w{grid-area:w;text-align:left}
  .bd-d{grid-area:d;text-align:right}
  .bd-v{display:none}
  .bd-tools{gap:var(--sp-2)}
  .bd-search{margin-left:0;width:100%;order:3}
  .bd-search input{width:100%}
  .bd-write{width:100%;order:4}
  .field-row{grid-template-columns:1fr}
  .mgr-bar-act{width:100%;margin-left:0}
  .mgr-bar-act .btn{flex:1}
}

/* ---------- 게시판 위 안내 상자 (.bd-note) ----------
   2026-09-03 신설. 기존 사이트 치료사례보고에 붙어 있던 통증수치(VNRS) 안내를
   옮겨오면서 만들었습니다. 다른 게시판에서도 같은 모양으로 쓰실 수 있습니다. */
.bd-note{border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:var(--r);background:var(--surface-2);
  padding:var(--sp-5) var(--sp-6);margin:0 0 var(--sp-6)}
.bd-note-h{font-size:var(--fs-md);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 var(--sp-2)}
.bd-note p{font-size:var(--fs-sm);line-height:1.9;color:var(--ink-2);margin:0 0 var(--sp-2)}
.bd-note p:last-of-type{margin-bottom:0}
.vnrs-scale{list-style:none;display:flex;gap:var(--sp-2);flex-wrap:wrap;
  padding:0;margin:var(--sp-4) 0 0}
.vnrs-scale li{display:inline-flex;align-items:baseline;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border-radius:999px;background:var(--surface);
  border:1px solid var(--line)}
.vnrs-scale b{font-size:var(--fs-md);font-weight:700;color:var(--acc);
  font-variant-numeric:tabular-nums}
.vnrs-scale span{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}

/* ---------- 목록 위 안내 상자 (.bd-notice) · 글 아래 문구 (.bd-post-note) ----------
   2026-09-18 신설(치료후기 — 자필 원본 이미지를 싣지 않는다는 병원 안내). 문구는
   board-config.js 의 review.notice · review.postNote 에 있고 board.js 가 그립니다.
   · 상자는 위 .bd-note 와 같은 모양(옅은 판 · 왼쪽 파란 줄)이되, 목록을 가리지 않게
     글자를 한 단계 줄였습니다. 배너처럼 칠하지 않습니다.
   · 글 아래 문구는 본문(--fs-sm)보다 작은 회색 글씨로, 본문과 '목록으로' 줄 사이에 둡니다. */
.bd-notice .bd-note-h{font-size:var(--fs-sm)}
.bd-notice p{font-size:var(--fs-xs);line-height:1.8;word-break:keep-all}
.bd-post-note{margin:var(--sp-6) 0 0;font-size:var(--fs-2xs);line-height:1.7;
  color:var(--ink-3);word-break:keep-all}
@media (max-width:560px){
  .bd-notice{padding:var(--sp-4) var(--sp-5)}
}

/* ---------- 열람 동의 게이트 (.bd-gate) — review.html ----------
   2026-09-07 신설. 심의기관 답변에 따라 치료사례·후기는 안내문을 확인한 뒤에만
   보입니다(README 33번 절). 동작 원리:
     · <html> 에 gate-open 이 붙기 전까지 main[data-gate] 안의 본문 구획을 숨깁니다
       (dx-hero 제목 띠만 남습니다). 스크립트가 아니라 CSS 가 숨기므로 깜빡임이 없습니다.
     · 안내문(.bd-gate)은 자바스크립트가 켜진 브라우저(html.js)에서만 띄웁니다.
       꺼진 브라우저는 확인 단추를 누를 수 없으니 안내문도 본문도 나오지 않습니다.
     · z-index 150 — 상단 메뉴(100)·하단 독(110)·고정 전화 단추(95)를 전부 덮고,
       본문 바로가기(.skip, 200)만 위에 남깁니다. */
html:not(.gate-open) main[data-gate] > section:not(.dx-hero){display:none}
.bd-gate{display:none}
html.js:not(.gate-open) .bd-gate{
  display:flex;position:fixed;inset:0;z-index:150;
  align-items:center;justify-content:center;
  padding:var(--sp-5);background:var(--bg);overflow:auto;
}
.bd-gate-lock{overflow:hidden}
.bd-gate-box{
  width:100%;max-width:640px;margin:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-l);padding:var(--sp-7) var(--sp-6);
}
.bd-gate-h{font-size:var(--fs-h5);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 var(--sp-4)}
.bd-gate-box p{font-size:var(--fs-sm);line-height:1.85;color:var(--ink-2);margin:0 0 var(--sp-3);word-break:keep-all}
.bd-gate-btns{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin-top:var(--sp-5)}
@media (max-width:560px){
  .bd-gate-box{padding:var(--sp-6) var(--sp-5)}
  .bd-gate-btns .btn{width:100%}
}

/* ── 치료사례보고 — 통증수치 그래프와 항목 상자 ──────────────────
   board.js 의 caseBlock() 이 그립니다. 본문 맨 앞 [사례] 묶음이 있는
   글에만 나옵니다. 색은 전부 토큰이라 어두운 화면도 따라갑니다. */
.cr-chart{margin:0 0 var(--sp-6);padding:var(--sp-5) var(--sp-4) var(--sp-4);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.cr-chart figcaption{
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.02em;
  color:var(--ink-3);margin:0 0 var(--sp-3);padding-left:var(--sp-1)}
/* 좁은 화면에서 눈금 글자가 뭉개지지 않게 가로로 스크롤합니다 */
.cr-chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cr-chart-scroll svg{display:block;width:100%;min-width:600px;height:auto}
.cr-grid{stroke:var(--line);stroke-width:1}
.cr-axis{stroke:var(--line-2);stroke-width:1.5}
.cr-bar{fill:var(--acc)}
.cr-ytick,.cr-xtick,.cr-val{fill:var(--ink-3);font-size:var(--fs-2xs);
  font-family:inherit;text-anchor:middle}
.cr-ytick{text-anchor:end}
.cr-val{fill:var(--ink);font-weight:700;font-size:var(--fs-xs)}

.cr-facts{margin:0 0 var(--sp-6);padding:0;display:grid;gap:var(--sp-3)}
.cr-fact{display:grid;grid-template-columns:8.5rem 1fr;gap:var(--sp-3);
  align-items:baseline;padding:var(--sp-3) var(--sp-4);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s)}
.cr-fact dt{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);margin:0}
.cr-fact dd{font-size:var(--fs-sm);color:var(--ink);margin:0;word-break:keep-all}
.cr-h{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);
  margin:0 0 var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}

@media (max-width:560px){
  .cr-fact{grid-template-columns:1fr;gap:var(--sp-1)}
}
/* 마지막 측정점 표시. 어두운 화면에서는 한 단계 밝은 빨강을 씁니다
   (style.css 의 .form-error 와 같은 계열). */
.cr-dot{fill:#E5484D}
.cr-dot-halo{fill:#E5484D;opacity:.22}
html[data-theme="dark"] .cr-dot{fill:#FF9DA2}
html[data-theme="dark"] .cr-dot-halo{fill:#FF9DA2;opacity:.24}

/* ---------- 온라인 상담 사진 첨부 (2026-10-14) ----------
   글쓰기 칸(.bd-photo-field)과 글 보기의 첨부 사진(.bd-photos). 동작은 board.js 의 bindPhotos · photosBlock. */
.bd-opt{font-weight:500;color:var(--ink-3);font-size:var(--fs-xs)}
.bd-photo-field input[type="file"]{display:block;width:100%;padding:var(--sp-3);border:1px dashed var(--line-2,var(--line));
  border-radius:var(--r-s);background:var(--surface-2);font-size:var(--fs-xs);color:var(--ink-2);cursor:pointer}
.bd-photo-field input[type="file"]:disabled{opacity:.5;cursor:not-allowed}
.bd-photo-list{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-3) 0 0;padding:0;list-style:none}
.bd-photo-list:empty{display:none}
.bd-photo-list li{position:relative;width:104px;height:104px;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--surface-2)}
.bd-photo-list img{width:100%;height:100%;object-fit:cover;display:block}
.bd-photo-list button{position:absolute;right:4px;top:4px;padding:2px 8px;border:0;border-radius:999px;
  background:rgba(15,23,42,.72);color:#fff;font-size:var(--fs-2xs);line-height:1.6;cursor:pointer}
.bd-photo-list button:hover{background:rgba(15,23,42,.9)}
.bd-photos{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.bd-photo{margin:0}
.bd-photo img{display:block;max-width:100%;width:auto;height:auto;border:1px solid var(--line);border-radius:var(--r-s);background:#fff}

/* 조회수 칸을 뺀 목록(2026-10-22, board-config.js 의 views: false — 공지 · 칼럼 · 언론보도 · 상담)
   .no-v 조회 없음. 좁은 화면은 두 줄 배치라 칸이 비기만 합니다. */
@media (min-width:769px){
  .no-v.bd-head,.no-v .bd-row > a{grid-template-columns:1fr 7rem 7.5rem}
  :is(.rv-v2,.bd-v2) #board .no-v.bd-head,:is(.rv-v2,.bd-v2) #board .no-v .bd-row > a{grid-template-columns:minmax(0,1fr) 7rem 7.5rem}
}

/* 본문 글자 크기 · 정렬(2026-10-22) — 관리자 편집기(admin-rich-editor.js)가 붙이는 클래스.
   방문자 글 화면(.bd-body)과 편집기(.rich-content)에 같은 모양으로 나옵니다. */
.txt-s{font-size:.875em}
.txt-l{font-size:1.25em;line-height:1.6}
.txt-xl{font-size:1.5em;line-height:1.5}
.txt-left{text-align:left}
.txt-center{text-align:center}
.txt-right{text-align:right}
/* 글자 색 다섯 가지 — 흰 바탕에서 읽기 쉬운 진한 색, 어두운 화면에서는 밝은 색 */
.txt-c-red{color:#C9252D}
.txt-c-blue{color:#1D5BB0}
.txt-c-green{color:#2F7D4F}
.txt-c-orange{color:#B85A0B}
.txt-c-gray{color:#6B7787}
html[data-theme="dark"] .txt-c-red{color:#FF8A8F}
html[data-theme="dark"] .txt-c-blue{color:#8FBCF5}
html[data-theme="dark"] .txt-c-green{color:#7FD3A2}
html[data-theme="dark"] .txt-c-orange{color:#F5B072}
html[data-theme="dark"] .txt-c-gray{color:#AAB4C0}
/* 편집기 추가 기능(2026-10-22) — 형광펜 · 줄 간격 · 구분선 · 인용 · 안내 상자 · 목록 · 표 · 링크.
   방문자 글 화면(.bd-body)과 관리자 편집기(.rich-content)가 같은 모양이 되게 함께 적습니다. */
.txt-hl{background:linear-gradient(transparent 55%,#FFE58A 55%);padding:0 .1em}
html[data-theme="dark"] .txt-hl{background:linear-gradient(transparent 55%,rgba(255,214,90,.35) 55%)}
:is(.bd-body,.rich-content) .lh-tight{line-height:1.5}
:is(.bd-body,.rich-content) .lh-wide{line-height:2.3}
:is(.bd-body,.rich-content) hr{border:0;border-top:1px solid var(--line-2,#d7dee8);margin:var(--sp-6,28px) 0}
:is(.bd-body,.rich-content) blockquote{margin:var(--sp-4,16px) 0;padding:var(--sp-3,12px) var(--sp-5,20px);border-left:4px solid var(--acc,#1D5BB0);background:var(--surface-2,#f4f7fb);color:var(--ink-2,#3a4a5c)}
:is(.bd-body,.rich-content) .note-box{margin:var(--sp-4,16px) 0;padding:var(--sp-4,16px) var(--sp-5,20px);border:1px solid var(--acc,#1D5BB0);border-radius:var(--r,10px);background:var(--acc-soft,#eef4fc)}
:is(.bd-body,.rich-content) :is(blockquote,.note-box) > :last-child{margin-bottom:0}
:is(.bd-body,.rich-content) u{text-underline-offset:.2em}
.rich-content ul,.rich-content ol{margin:0 0 14px 1.4em}
.rich-content ul li{list-style:disc}
.rich-content ol li{list-style:decimal}
.rich-content a{color:#1D5BB0;text-decoration:underline}
.rich-content table{width:100%;border-collapse:collapse;margin:14px 0}
.rich-content th,.rich-content td{border:1px solid #d7dee8;padding:6px 10px;min-width:3em;text-align:left}
.rich-content th{background:#f4f7fb;font-weight:700}