/* ============================================================================
 * 관리자 화면 공용 스타일 — 동경하이치과의원 기준 (2026-09-11 추출)
 *
 * 원본: D:\Claude\동경하이치과의원\홈페이지\app\globals.css
 * 추출 기준: 클래스가 .adm / .ed / .pp 로 시작하는 규칙 전부 (@media 안쪽 포함)
 *
 * 🔴 **그대로 복사해서** 각 프로젝트에 넣는다. 바꾸는 것은 아래 --adm-brand 한 줄뿐이다.
 *    구조를 고칠 일이 생기면 동경하이 globals.css 를 고치고 이 파일을 다시 뽑는다.
 *    (그래야 기준이 하나로 유지된다)
 *
 * 접두사가 하는 일
 *   .adm-*  관리자 셸·카드·표·입력칸·버튼 — 거의 전부가 여기
 *   .ed-*   본문 편집기 (위지윅 · 도구모음 · 사진 크기 손잡이)
 *   .pp-*   팝업 그림 목록 (미리보기 · 끌어서 순서 바꾸기)
 *
 * ⚠️ 공개 화면 스타일은 한 줄도 들어 있지 않다. 두 쪽이 클래스 이름을 공유하지 않는 것을
 *    확인하고 뽑았다 — 공개 화면(site-client.tsx)은 adm-/ed-/pp- 를 전혀 쓰지 않는다.
 * ========================================================================== */

/* ── 업체 색 ──────────────────────────────────────────────────────────────
   🔴 **여기 한 줄만 그 홈페이지의 메인 색으로 바꾸면 관리자 화면 전체가 따라온다.**
      나머지 둘은 본색에서 자동으로 만들어지므로 건드릴 필요가 없다.

      예) 무브태권도장이 주황이면  --adm-brand:#e2601a;

   ⚠️ **어두운 색을 쓴다.** 이 색 위에 흰 글자가 올라간다(활성 탭·기본 버튼).
      밝은 색을 넣으면 글자가 안 보인다. 밝은 브랜드색이면 한 단계 어두운 값을 쓴다.
   ⚠️ --adm-focus 는 입력칸을 눌렀을 때의 테두리다. 업체 색과 상관없이
      **눈에 띄어야 하는 값**이라 그대로 둔다.
   ─────────────────────────────────────────────────────────────────────── */
:root{
  --adm-brand:#061d54;
  --adm-brand-soft:color-mix(in srgb, var(--adm-brand) 70%, #fff);
  --adm-brand-tint:color-mix(in srgb, var(--adm-brand) 7%, #fff);
  --adm-focus:#3a8afd;
}

/* 🔴 이 한 줄이 없으면 세 칸짜리 줄(.adm-grid)의 입력칸이 «칸 밖으로 넘쳐 서로 붙는다».
      .adm input 은 width:100% + padding:10px 12px 인데, border-box 가 아니면
      260px 칸에 286px 입력칸이 들어가 칸 사이 14px 틈을 먹어 버린다(실측 −12px).
      동경하이 globals.css 18행의 `* { box-sizing:border-box }` 가 하던 일이다 —
      전역 리셋이라 접두사(.adm/.ed/.pp)로 추출할 때 통째로 빠졌다(2026-09-15 발견).
      ⚠️ 관리자 화면 안에만 건다. 공개 화면에는 영향을 주지 않는다. */
.adm, .adm *, .adm *::before, .adm *::after { box-sizing: border-box; }

/* 🔴 기본값은 위 :root **한 곳에만** 둔다.
      `.adm` 에도 같은 줄을 넣으면 그쪽이 더 가까워서 :root 덮어쓰기가 안 먹는다(실측으로 겪음).
      바꾸는 방법은 둘 중 아무거나 —
        ① 프로젝트 CSS 에서   :root{ --adm-brand:#c2410c }
        ② 화면에 직접        <main class="adm" style="--adm-brand:#c2410c">
      ②는 .adm 이 :root 보다 가까우므로 그대로 이긴다. */

/* ===== 관리자페이지 (/admin) — 공개 사이트와 분리된 화면 ===== */
.adm{min-height:100vh;padding:48px 20px;background:#f4f6f9;color:#1f2937;font-size:15px}

.adm h1{margin:0;font-size:24px;font-weight:800;color:var(--adm-brand);letter-spacing:-.5px}

.adm h2{margin:0 0 16px;font-size:17px;font-weight:700;color:var(--adm-brand)}

.adm code{padding:1px 6px;background:#e8edf5;border-radius:4px;font-size:13px}

.adm-box{max-width:380px;margin:8vh auto 0;padding:32px;background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(16,24,40,.08)}

.adm-box label{display:block;margin:22px 0 7px;font-size:13px;font-weight:600;color:#4b5563}

.adm-wide{max-width:860px;margin:0 auto}

.adm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}

.adm-head-btns{display:flex;align-items:center;gap:8px}

/* 관리자 상단 탭 (shell.tsx).
   🔴 **좁은 화면에서는 줄바꿈시킨다 (2026-08-20).** 예전에는 옆으로 밀어서 보게 했는데
      ("두 줄이 되면 본문이 밀린다"는 이유였다), 375px 에서 실측하니 탭 줄의 실제 너비가
      445px 라 **「휴진·알림」·「설정」 두 칸이 화면 밖에 통째로 숨었다.** 밀 수 있다는
      표시가 없어 병원이 그 두 화면을 찾지 못한다. 본문이 40px 내려가는 편이 낫다. */
.adm-tabs{display:flex;gap:4px;margin-bottom:22px;padding-bottom:2px;overflow-x:auto;border-bottom:1px solid #e3e8ef}

.adm-tabs a{flex:0 0 auto;padding:9px 16px;border-radius:8px 8px 0 0;font-size:14px;font-weight:600;color:#6b7280;white-space:nowrap}

.adm-tabs a:hover{background:#eef1f6;color:#374151}

.adm-tabs a.is-on{background:var(--adm-brand);color:#fff}

@media(max-width:760px) {
  /* 줄바꿈하면 "아래 선 위에 얹힌 탭" 모양이 성립하지 않는다. 알약 모양 칩으로 바꾼다 */
  .adm-tabs{flex-wrap:wrap;overflow-x:visible;gap:6px;padding-bottom:12px}
  .adm-tabs a{padding:8px 13px;border-radius:999px;font-size:13px;background:#eef1f6}
  .adm-tabs a.is-on{background:var(--adm-brand);color:#fff}
}

/* 첫 화면의 미확인 상담문의 알림 */
.adm-alert{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px;padding:16px 20px;border:1px solid #f0c7c7;border-radius:10px;background:#fdf4f4;color:#b42318}

.adm-alert b{font-size:15px;font-weight:800}

.adm-alert span{flex:1;min-width:200px;font-size:13px;color:#7a4a4a}

.adm-alert:hover{background:#fbeaea}

/* 첫 화면 바로가기 */
.adm-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

.adm-quick a{padding:9px 16px;border:1px solid #cbd5e1;border-radius:50px;font-size:14px;font-weight:600;color:var(--adm-brand)}

.adm-quick a:hover{background:var(--adm-brand);border-color:var(--adm-brand);color:#fff}

.adm-card{margin-bottom:22px;padding:26px;background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(16,24,40,.08)}

.adm-form label{display:block;margin:14px 0 6px;font-size:13px;font-weight:600;color:#4b5563}

.adm input,.adm textarea,.adm select{width:100%;padding:10px 12px;border:1px solid #d3dae5;border-radius:6px;font:inherit;color:inherit;background:#fff}

.adm textarea{resize:vertical;line-height:1.7}

.adm input:focus,.adm textarea:focus,.adm select:focus{outline:2px solid #3a8afd;outline-offset:-1px;border-color:#3a8afd}

.adm button{margin-top:16px;padding:10px 20px;border:0;border-radius:6px;background:var(--adm-brand);color:#fff;font:inherit;font-weight:600;cursor:pointer}

.adm button:hover{background:#0a2c7a}

.adm .adm-ghost{margin:0;background:transparent;border:1px solid #c6cede;color:#4b5563}

.adm .adm-ghost:hover{background:#eef1f6}

.adm .adm-danger{background:#fff;border:1px solid #e5b4b4;color:#b42318}

.adm .adm-danger:hover{background:#fdf2f2}

/* 목록 안의 작은 삭제 단추 (휴진일).
   🔴 `.adm` 을 반드시 붙일 것. `.adm-danger-sm`(0,1,0) 하나로는 뒤에 오는
   `.adm button`(0,1,1)에 져서 padding·margin-top:16px가 그대로 먹는다.
   그 탓에 단추가 커지고 행이 82px로 부풀어 있었다(2026-08-15). */
.adm .adm-danger-sm{margin-top:0;padding:4px 12px;font-size:12px}

.adm-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

.adm-meta{font-size:13px;color:#8494a7}

.adm-note{margin:0;font-size:14px;line-height:1.75;color:#6b7280;word-break:keep-all}

.adm-ok,.adm-error{margin:0 0 18px;padding:12px 16px;border-radius:6px;font-size:14px;font-weight:600}

.adm-ok{background:#e7f6ec;color:#116b32}

.adm-error{background:#fdecea;color:#b42318}

.adm-list{margin:0;padding:0;list-style:none}

.adm-list>li{padding:20px 0;border-top:1px solid #e8ecf1}

.adm-list>li:first-child{border-top:0;padding-top:4px}

@media(max-width:760px) {
  .adm{padding:28px 14px}
  .adm-card{padding:18px}
  .adm-box{margin-top:4vh;padding:24px}
}

.adm-hint{font-weight:400;color:#8494a7}

/* 라벨 안의 안내문은 **아랫줄로 내린다.** 한 줄에 이어 붙이면 안내가 길 때 라벨과 뒤엉켜
   줄이 지저분해진다(좁은 화면·3칸 배치에서 특히). 2026-08-31 지적. */
label>.adm-hint{display:block;margin-top:3px;font-size:12px;line-height:1.45;letter-spacing:-.2px}

.adm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}

/* 🔴 세 칸의 **입력칸 밑선을 맞춘다** (2026-09-11 병원 지적 「가독성이 떨어진다」).
   칸마다 라벨 줄 수가 다르다 — 「휴진 시작일」은 한 줄인데 「끝나는 날 / 하루만 쉬면 비워 두세요」는
   두 줄이라, 같은 줄에 놓아도 입력칸이 계단처럼 어긋나 보였다(팝업·알림 띠 화면도 같은 증상).
   칸을 세로 flex 로 만들고 **라벨이 남는 높이를 먹게** 하면 라벨은 위에, 입력칸은 아래에 나란히 선다.
   ⚠️ 한 칸에 라벨 하나 + 입력칸 하나인 구조를 전제한다. 칸에 입력칸을 둘 넣지 말 것 */
.adm-grid>*{display:flex;flex-direction:column}

.adm-grid>*>label{flex:1 0 auto}

.adm-check{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:600;color:#4b5563;cursor:pointer}

.adm-check input{width:auto;margin:0}

/* 팝업에 붙어 있는 그림 미리보기. 무엇이 올라가 있는지 보고 지울 수 있어야 한다 */
.adm-thumb{margin:6px 0 10px;padding:12px;border:1px solid #e3e8ef;border-radius:8px;background:#f8fafc}

.adm-thumb img{display:block;max-width:220px;max-height:150px;width:auto;height:auto;border-radius:4px}

.adm-thumb .adm-check{margin-top:10px}

.adm input[type=file]{padding:8px;background:#f8fafc;cursor:pointer}

/* 팝업 뜨는 자리 고르기 — 네모가 방문자 화면, 안의 상자가 팝업 */
.pp{margin-top:6px}

/* 16:10은 흔한 노트북 화면 비율이다. 팝업 상자도 같은 비율로 줄여 그려 실제로 얼마나 덮는지 보이게 한다 */
.pp-board{position:relative;aspect-ratio:16/10;border:1px solid #d3dae5;border-radius:8px;
  background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 10px,#f1f5f9 10px,#f1f5f9 20px);
  overflow:hidden;cursor:crosshair;touch-action:none;user-select:none}

.pp-hint{position:absolute;left:10px;top:8px;color:#94a3b8;font-size:12px;pointer-events:none}

.pp-box{position:absolute;transform:translate(-50%,-50%);min-width:44px;padding:10px 6px;
  display:grid;place-items:center;background:var(--adm-brand);color:#fff;border-radius:4px;
  font-size:12px;font-weight:700;cursor:grab;box-shadow:0 6px 16px rgba(6,29,84,.3)}

.pp-box:active{cursor:grabbing}

.pp-box:focus-visible{outline:3px solid #3a8afd;outline-offset:2px}

.pp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}

.pp-row .adm-ghost{margin:0;padding:6px 12px;font-size:13px}

/* 🔴 좁은 화면에서는 칸을 한 줄로 내린다.
   600px 이던 것을 760px 로 올렸다 — 600~760px(큰 휴대폰 가로·작은 태블릿)에서 3칸이 그대로라
   칸마다 폭이 200px 남짓이 되고, 라벨 옆 안내문이 서너 줄로 뭉개졌다 (2026-08-31 지적). */
@media(max-width:760px) {
  .adm-grid{grid-template-columns:1fr}
  /* 🔴 **아이폰은 16px 미만 입력칸을 누르면 화면을 확대한다.** 한 번 확대되면 그대로 남아
     관리자 화면 전체가 커진 채로 조작하게 된다. 모바일에서만 16px 로 올려 확대를 막는다.
     (.adm 이 15px 이라 font:inherit 인 입력칸이 전부 15px 였다) */
  .adm input,.adm textarea,.adm select{font-size:16px}
}

/* iOS Safari는 글자 16px 미만인 입력칸을 탭하면 화면을 확대하고 되돌리지 않는다.
   아이폰은 모두 모바일 폭이라 폭 기준으로 걸고, 폭이 넓은 터치 기기(아이패드)는
   포인터 종류로 함께 잡는다. 데스크톱 화면은 기존 15px 그대로 남는다. */
@media (max-width:760px), (hover:none) and (pointer:coarse) {
  .adm input,.adm textarea,.adm select{font-size:16px}
}

/* 관리자 · 상담문의함 */
.adm-badge{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:50px;background:#b42318;color:#fff;font-size:12px;font-weight:700;vertical-align:middle}

.adm-inq{margin:14px 0 0;padding:0;list-style:none}

.adm-inq>li{padding:16px;border:1px solid #e8ecf1;border-radius:8px;margin-bottom:10px;background:#fff}

.adm-inq>li.is-new{border-color:#f0c2bd;background:#fffaf9}

.adm-inq-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px}

.adm-inq-head strong{font-size:16px;color:var(--adm-brand)}

.adm-inq-head a{font-weight:700;color:#0a2c7a;text-decoration:underline}

.adm-tag-new{padding:2px 9px;border-radius:50px;background:#fdecea;color:#b42318;font-size:12px;font-weight:700}

.adm-tag-done{padding:2px 9px;border-radius:50px;background:#e7f6ec;color:#116b32;font-size:12px;font-weight:700}

.adm-inq-msg{margin:10px 0 0;padding:12px 14px;background:#f7f9fc;border-radius:6px;font-size:14px;line-height:1.7;color:#333;white-space:pre-line;word-break:keep-all}

.adm-inq-btns{display:flex;gap:10px;margin-top:12px}

.adm-inq-btns button{margin-top:0;padding:8px 14px;font-size:13px}

@media(max-width:600px) {
  .adm-inq-head{gap:6px}
  .adm-inq-btns{flex-wrap:wrap}
}

/* ===== 관리자 · 방문 현황 ===== */
.adm-note-inline{margin-left:8px;font-size:12px;font-weight:500;color:#6b7280}

.adm-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 6px}

.adm-stat{padding:14px 16px;border:1px solid #e3e8ef;border-radius:8px;background:#fff}

.adm-stat b{display:block;font-size:24px;font-weight:800;color:var(--adm-brand);line-height:1.2}

.adm-stat span{font-size:12px;color:#6b7280}

.adm-sub{margin:18px 0 8px;font-size:13px;font-weight:700;color:#374151}

/* 막대는 이미지가 아니라 div 높이다 — 차트 라이브러리를 넣을 만한 표현이 아니다 */
/* 기간 고르기 (14·30·90일). 링크지만 눌러서 고르는 것이라 버튼처럼 보이게 한다.
   ⚠️ 여기서 gap 은 인라인 style 이 덮어쓴다 — 막대 개수에 따라 달라져야 해서다(visit-stats.tsx) */
.adm-range{display:flex;gap:6px;margin:-4px 0 14px}

.adm-range a{padding:6px 14px;border:1px solid #dde3ea;border-radius:999px;font-size:13px;color:#5b6572;text-decoration:none;line-height:1.4}

.adm-range a:hover{border-color:#b9c4d2;color:#2f3a48}

.adm-range a.on{background:var(--adm-brand-soft);border-color:var(--adm-brand-soft);color:#fff}

.adm-bars{position:relative;display:flex;align-items:flex-end;gap:6px;height:120px;padding:0 2px}

/* 🔴 막대와 날짜 사이에 **가로 축선**을 둔다 (2026-09-11). 90일이면 막대가 90개라 날짜가
   막대 더미에 묻혀 읽히지 않았다. 선 하나로 「여기부터는 날짜」가 되어 눈이 갈라 읽는다.
   ⚠️ 아래 bottom 값 셋(축선 18 · 눈금 15 · 라벨 높이 약 13)은 서로 맞물려 있다. 하나만 바꾸지 말 것 */
.adm-bars::after{content:"";position:absolute;left:0;right:0;bottom:19px;height:1px;background:#dde3ea}

.adm-bar{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}

.adm-bar i{position:relative;display:block;width:100%;min-height:2px;border-radius:3px 3px 0 0;background:var(--adm-brand-soft);transition:background .12s}

/* 🔴 막대에 마우스를 올리면 그날 수치가 바로 뜬다 (2026-09-11 병원 요청).
   전에는 브라우저 기본 툴팁(`title`)이었는데 **1초쯤 기다려야 뜨고 글자가 작아** 쓰기 어려웠다.

   ⚠️ 말풍선은 막대(`i`)에 붙인다 — 칸(`.adm-bar`)은 항상 전체 높이라 거기 붙이면
      막대가 짧아도 말풍선이 천장에 뜬다. 반면 **집는 영역은 칸 전체**(`.adm-bar:hover`)여야 한다.
      90일이면 막대가 2px 라 막대만 노리면 아무도 못 맞춘다.
   ⚠️ `.adm-card` 에 `overflow:hidden` 을 넣지 말 것 — 말풍선이 잘린다 */
.adm-bar i::before{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  margin-bottom:8px;padding:7px 10px;border-radius:7px;
  background:#1f2937;color:#fff;font-size:12px;font-weight:600;line-height:1.4;letter-spacing:0;
  white-space:nowrap;box-shadow:0 4px 12px rgba(16,24,40,.22);
  opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none;z-index:5;
}

.adm-bar:hover i::before{opacity:1;visibility:visible}

.adm-bar:hover i{background:var(--adm-brand)}

/* 양 끝 막대는 말풍선이 카드 밖으로 넘치므로 안쪽으로 붙인다 */
.adm-bar:first-child i::before{left:0;transform:none}

.adm-bar:last-child i::before{left:auto;right:0;transform:none}

/* 🔴 마우스가 없는 기기에서는 말풍선을 아예 끈다 (2026-09-11 실측).
   휴대폰은 탭이 :hover 로 굳어 말풍선이 뜨는데, 375px 에서 말풍선 폭이 196px 라
   가장자리 막대에서 **가로 스크롤이 29px 생겼다.** 말풍선은 마우스용 장치다 */
@media(hover:none) {
  .adm-bar i::before{display:none}
}

/* 🔴 날짜는 **굵게·진하게** 적는다 (2026-09-11 병원 지적 「일자가 제대로 안 보인다」).
   10px 흐린 회색이라 30·90일에서 읽히지 않았다. 라벨이 붙는 칸에는 눈금(is-tick)을 함께 둬
   어느 막대의 날짜인지 알 수 있게 한다. 칸보다 글자가 넓으므로 넘쳐도 잘리지 않게 둔다 */
/* 🔴 **높이를 못박는다.** 날짜를 안 적는 칸은 글자가 없어 높이가 0 이 되는데, 그러면 그 칸의
   막대만 18px 아래까지 내려와 **밑선이 들쭉날쭉해진다**(2026-09-11 실측). 라벨 유무와 상관없이
   같은 자리에서 시작해야 막대 길이를 눈으로 견줄 수 있다 */
.adm-bar span{flex:0 0 14px;height:14px;font-size:11px;font-weight:700;color:#5b6572;white-space:nowrap;letter-spacing:-.2px;line-height:14px}

.adm-bar.is-tick{position:relative}

.adm-bar.is-tick::after{content:"";position:absolute;bottom:16px;left:50%;width:1px;height:4px;background:#aeb8c6}

/* 1fr 은 min-content 하한을 갖는다. 안에 긴 주소 문자열이 들어가면 트랙이 그만큼 벌어져
   칸을 넘친다 — 320px 에서 3px 가로 스크롤이 났다 (2026-08-20). minmax(0,1fr) 로 하한을 없앤다 */
.adm-stat-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:6px}

.adm-rank{margin:0;padding:0;list-style:none}

.adm-rank li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #eef1f5;font-size:13px}

.adm-rank li:last-child{border-bottom:0}

/* min-width:0 이 없으면 flex 항목의 기본값(min-width:auto) 때문에 글자 길이만큼 버텨서
   ellipsis 가 걸리지 않고 줄이 통째로 넘친다. 320px 에서 3px 가로 스크롤이 났다 (2026-08-20) */
.adm-rank span{min-width:0;color:#4b5563;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 방문 통계 — 사람이 읽는 이름(위) + 원래 주소(아래 작게). 둘 다 한 줄로 자른다 */
.adm-rank-name{display:flex;flex-direction:column;gap:1px;flex:1 1 auto}

.adm-rank-name>i{font-style:normal;color:#1f2937;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.adm-rank-name>small{font-size:11px;color:#9aa5b1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 외국어판 표시. 한국어는 대부분이라 붙이지 않는다 */
.adm-lang{display:inline-block;margin-right:5px;padding:0 5px;border-radius:3px;background:#e6ecf5;color:#33507f;font-size:10px;font-style:normal;font-weight:700;vertical-align:1px}

.adm-rank b{color:#111827;font-weight:700;white-space:nowrap}

@media(max-width:760px) {
  .adm-stat-row{grid-template-columns:1fr;gap:8px}
  .adm-stat b{font-size:20px}
  .adm-stat-cols{grid-template-columns:minmax(0,1fr);gap:16px}
  .adm-bars{height:96px;gap:4px}
  .adm-bar span{flex-basis:13px;height:13px;font-size:10px;line-height:13px}
  .adm-bars::after{bottom:18px}
  .adm-bar.is-tick::after{bottom:15px}
}

/* 발행한 글 목록 — 한 줄씩. 편집은 전용 화면(/admin/post/…)에서 한다 */
.adm-list-rows>li{padding:0;border:1px solid #e3e8ef;border-radius:8px;background:#fff;margin:0 0 8px}

/* 이 목록은 `adm-list`와 함께 쓰는데, `.adm-list>li:first-child`(0,2,1)가 윗선을 지우고
   위 여백 4px를 넣는다. 줄 사이를 선으로 나누는 목록용 규칙이라 카드형에는 맞지 않아
   첫 칸만 3px 높아 보였다(2026-08-15). 같은 우선순위를 뒤에 두어 되돌린다 */
.adm-list-rows>li:first-child{padding-top:0;border-top:1px solid #e3e8ef}

.adm-row-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:13px 16px}

/* 🔴 태그로 한정하지 말 것. 글 목록은 <a>, 휴진일 목록은 <span>이라
   `a.adm-row-title`로 두면 휴진일 쪽만 flex:1을 못 받아 삭제 단추가 줄마다
   다른 자리에 선다(2026-08-15 실측 476/447/446px). 링크 전용 꾸밈만 a로 한정한다 */
.adm-row-title{flex:1;min-width:0;font-weight:700;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

a.adm-row-title:hover{color:var(--adm-brand-soft);text-decoration:underline}

.adm-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:#6b7280}

.adm-row-meta b{padding:2px 8px;border-radius:50px;font-size:11px;font-weight:700}

.adm-row-meta b.on{background:#e7f3ec;color:#0f7b3f}

.adm-row-meta b.off{background:#f1f3f6;color:#6b7280}

.adm-row-meta a{color:var(--adm-brand-soft);font-weight:600}

.adm-row-edit{padding:5px 12px;border:1px solid #cbd5e1;border-radius:50px}

.adm-row-edit:hover{background:var(--adm-brand);border-color:var(--adm-brand);color:#fff}

/* 글 편집 전용 화면 */
.adm-editor{max-width:900px;margin-inline:auto}

.adm-editor-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}

.adm-editor-top a{color:var(--adm-brand-soft);font-size:14px;font-weight:600}

.adm-editor h1{margin:0 0 6px;font-size:22px;font-weight:800;color:var(--adm-brand)}

.adm-btn-link{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--adm-brand);border-radius:50px;color:var(--adm-brand);font-size:14px;font-weight:700;white-space:nowrap}

.adm-btn-link:hover{background:var(--adm-brand);color:#fff}

.adm-row-body code{padding:1px 5px;border-radius:4px;background:#f1f3f6;font-size:12px}

/* 글 발행 — 질문·답 한 쌍 */
.adm-faq-row{display:grid;grid-template-columns:1fr;gap:6px;margin:0 0 10px;padding:10px 12px;border:1px solid #e3e8ef;border-radius:6px;background:#f8fafc}

.adm-faq-row input,.adm-faq-row textarea{margin:0}

@media(min-width:761px) {
  .adm-faq-row{grid-template-columns:1fr 1.6fr;align-items:start}
}

.adm-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 10px}

.adm-thumbs .adm-thumb{position:relative;width:132px;margin:0}

.adm-thumbs .adm-thumb img{width:100%;height:auto;border:1px solid #e3e8ef;border-radius:6px;display:block}

.adm-thumb-no{position:absolute;top:4px;left:4px;z-index:1;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:9px;background:rgba(6,29,84,.82);color:#fff;font-size:11px;font-weight:700}

.adm-thumbs .adm-check{margin-top:4px;font-size:12px}

/* 팝업 이미지 삭제 — 체크박스를 분명히 보여 주고 여러 장을 한꺼번에 고른다 */
.adm-form .adm-thumb-select{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0 0;padding:7px 8px;
  border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#374151;font-size:13px;font-weight:700;cursor:pointer}

.adm-form .adm-thumb-select:hover{border-color:#64748b;background:#f8fafc}

.adm-thumb-select input{width:17px;height:17px;margin:0;accent-color:#b42318;cursor:pointer}

.adm-thumb.selected img{opacity:.42;filter:grayscale(1);outline:2px solid #b42318;outline-offset:-2px}

.adm-form .adm-thumb.selected .adm-thumb-select{border-color:#b42318;background:#fff1f0;color:#9f1d16}

.adm-image-delete-row{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:fit-content;max-width:100%;margin:14px 0 8px;padding:10px 12px;
  border:1px solid #e3e8ef;border-radius:7px;background:#f8fafc;color:#475569;font-size:13px}

.adm-delete-images{margin:0;white-space:nowrap}

.adm-delete-images:disabled{opacity:.45;cursor:not-allowed}

@media(max-width:520px) {
  .adm-image-delete-row{align-items:stretch;flex-direction:column}
  .adm-delete-images{width:100%}
}

.adm-file-picker{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin:16px 0 0;color:#64748b;font-size:13px}

.adm-form .adm-file-picker-button{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:10px 16px;
  border:1px solid #214d80;border-radius:7px;background:#eaf2fb;color:#123f73;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}

.adm-form .adm-file-picker-button:hover{border-color:var(--adm-brand);background:#dceafb;color:var(--adm-brand)}

.adm-file-picker:focus-within .adm-file-picker-button{outline:2px solid #3a8afd;outline-offset:2px}

.adm-file-picker-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:520px) {
  .adm-file-picker{align-items:flex-start;flex-direction:column;gap:7px}
}

/* 끌어서 순서 바꾸기 (popup-images.tsx). 끄는 칸은 흐리게 두고 자리는 그대로 비워 둔다 —
   놓을 자리가 어디인지 보이지 않으면 어디로 가는지 모른 채 끌게 된다 */
.adm-thumb-drag{cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none}

.adm-thumb-drag:active{cursor:grabbing}

.adm-thumb-drag:focus-visible{outline:2px solid var(--adm-brand-soft);outline-offset:2px}

.adm-thumb.dragging img{opacity:.4;outline:2px dashed var(--adm-brand-soft);outline-offset:-2px}

/* 새로 고른 그림 — 아직 저장 전이라는 것이 번호 색으로 구분된다 */
.adm-thumb-no.adm-thumb-new{background:#0f7b3f}

.adm-thumb-cap{display:block;margin-top:4px;font-size:11px;line-height:1.4;color:#6b7280;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.adm-thumb-cap.over{color:#b91c1c;font-weight:700;white-space:normal}

.adm-form .adm-new-image-remove{width:100%;margin-top:6px;padding:7px 6px;border:1px solid #d5a29d;border-radius:6px;
  background:#fff;color:#9f1d16;font-size:12px;font-weight:700}

.adm-form .adm-new-image-remove:hover{border-color:#b42318;background:#fff1f0}

.adm-note-warn{color:#b45309;font-weight:600}

/* ============================================================
   글 본문 편집기 (app/admin/body-editor.tsx) — 이클린치과 방식
   🔴 버튼 목록·본문 렌더러(app/post-data.ts)와 **셋이 짝**이다.
   ============================================================ */
.ed-bar{position:sticky;top:0;z-index:4;display:flex;flex-wrap:wrap;align-items:stretch;gap:3px;
  margin:0 0 8px;padding:6px;background:#f7f9fb;border:1px solid #dfe5ea;border-radius:10px}

.ed-b{border:1px solid transparent;background:none;border-radius:7px;padding:8px 11px;
  font:inherit;font-size:13px;color:#33404b;cursor:pointer;line-height:1.2}

.ed-b:hover{background:#e9eff6}

.ed-b:focus-visible{outline:2px solid var(--navy,var(--adm-brand));outline-offset:1px}

.ed-sep{width:1px;background:#e0e6ec;margin:5px 4px}

.ed-area{min-height:420px;background:#fff;border:1px solid #dfe5ea;border-radius:10px;
  padding:16px 18px;font-size:15px;line-height:1.85;color:#1f2937;overflow-wrap:anywhere}

.ed-area:focus{outline:none;border-color:var(--navy,var(--adm-brand));box-shadow:0 0 0 3px rgba(6,29,84,.13)}

.ed-area:empty:before{content:"여기에 글을 쓰세요";color:#b9c2cb}

.ed-area h2{margin:24px 0 8px;font-size:19px;font-weight:700;color:var(--navy,var(--adm-brand))}

.ed-area h3{margin:18px 0 6px;font-size:16px;font-weight:700;color:var(--navy,var(--adm-brand))}

.ed-area h2:first-child,.ed-area h3:first-child{margin-top:0}

.ed-area p{margin:0 0 13px}

.ed-area blockquote{margin:14px 0;padding:12px 16px;background:var(--adm-brand-tint);border-left:3px solid var(--navy,var(--adm-brand));border-radius:0 8px 8px 0}

.ed-area blockquote p{margin:0}

.ed-area table{border-collapse:collapse;width:100%;margin:14px 0}

.ed-area th,.ed-area td{border:1px solid #dfe5ea;padding:8px 12px;text-align:left}

.ed-area th{background:#f4f7fa;font-weight:700}

.ed-area ul{margin:0 0 13px;padding-left:22px;list-style:disc}

.ed-area ol{margin:0 0 13px;padding-left:22px;list-style:decimal}

.ed-area hr{border:0;border-top:1px solid #dfe5ea;margin:20px 0}

.ed-area img{max-width:100%;height:auto;border-radius:10px;margin:10px 0;display:block}

.ed-area a{color:#1b6fd0;text-decoration:underline}

/* 의료법 경고는 회색 안내문과 구분되어야 눈에 걸린다 */
.adm-warn{color:#9b1b30}

.adm-warn b{color:#9b1b30}

/* 관련 진료 — 체크박스가 21개라 여러 줄로 흐르게 둔다 */
.adm-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 14px;margin:4px 0 10px}

.adm-checks label{display:flex;align-items:center;gap:7px;min-height:34px;font-size:14px;font-weight:400;color:#374151;cursor:pointer}

.adm-checks input{width:auto;margin:0}

@media(max-width:760px) {
  /* 🔴 사파리는 16px 미만 입력칸을 누를 때마다 화면을 확대한다. 편집기도 입력칸이다 */
  .ed-area{min-height:320px;padding:13px 14px;font-size:16px}
  /* 버튼 13개가 375px 에서 여섯 줄(252px)로 접혔다(2026-09-07 실측). 위에 고정해 두면
     화면의 3분의 1을 도구모음이 차지해 정작 글이 안 보인다. 좁은 화면에서는 고정을 풀고
     버튼을 조인다 — 대신 스크롤로 언제든 올라올 수 있다 */
  .ed-bar{position:static;gap:2px;padding:4px}
  /* ⚠️ `.adm button` 규칙(모바일 44px)이 더 세다. .adm 을 붙여야 이긴다 — 안 붙이면 43px 그대로다 */
  .adm .ed-b{padding:7px 8px;font-size:12.5px;min-height:36px;height:auto}
  .ed-sep{display:none}
  .adm-checks{grid-template-columns:1fr}
  /* 누르는 영역 44px — 삭제·저장과 달리 오조작해도 되돌릴 수 있지만 손이 큰 사람이 못 누른다 */
  .adm-checks label{min-height:40px}
}

/* ── 편집기 사진 크기 조절 (app/admin/body-editor.tsx) ── */
.ed-wrap{position:relative}

.ed-area img.ed-img-sel{outline:2px solid var(--navy,var(--adm-brand));outline-offset:2px}

/* 손잡이 — 포인터 이벤트로 끈다. touch-action:none 이 없으면 휴대폰에서 끌기가 스크롤로 먹힌다 */
.ed-handle{position:absolute;z-index:6;width:18px;height:18px;border-radius:4px;background:var(--navy,var(--adm-brand));border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:nwse-resize;touch-action:none}

.ed-handle:focus-visible{outline:2px solid #c8a951;outline-offset:2px}

.ed-imgbar{position:absolute;z-index:6;display:flex;gap:2px;padding:3px;background:#fff;border:1px solid #dfe5ea;border-radius:7px;box-shadow:0 2px 8px rgba(0,0,0,.14)}

.adm .ed-imgbar button{border:1px solid transparent;background:none;border-radius:5px;padding:4px 8px;min-height:28px;height:auto;font:inherit;font-size:12px;color:#33404b;cursor:pointer}

.adm .ed-imgbar button:hover{background:var(--adm-brand-tint)}

.adm .ed-imgbar button.on{background:var(--navy,var(--adm-brand));color:#fff}

@media(max-width:760px) {
  .ed-handle{width:26px;height:26px}
  .adm .ed-imgbar button{min-height:36px;padding:6px 10px;font-size:13px}
}