/* ══════════════════════════════════════════════════════════════ 비급여 진료비용 — 외부 사이트 출력 스타일 대상: svndex_fee_render 가 출력하는 .svx-fee 마크업. 로드: 비급여 표를 노출하는 외부 페이지 에 토큰: style.css :root 의 --c-* 사용 (단독 로드 대비 fallback 동봉). ══════════════════════════════════════════════════════════════ */
.svx-fee { color: var(--c-body, #334155); font-size: 1rem; line-height: 1.6; }
/* ── 분류 묶음 ── */
.svx-fee-cat { margin: 0 0 52px; }
.svx-fee-cat:last-child { margin-bottom: 0; }
/* ── 헤더: 분류명(좌) + 기준일(우) + 하단 구분선 ── */
.svx-fee-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 2px solid var(--c-ink, #0f172a); }
.svx-fee-name { margin: 0; font-size: 1.375rem; font-weight: 700; color: var(--c-ink, #0f172a); letter-spacing: -.01em; line-height: 1.3; }
.svx-fee-date { flex-shrink: 0; font-size: .875rem; font-weight: 500; color: var(--c-mute, #64748b); }
/* ── 가격표 ── */
.svx-fee-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 표 규칙 = 외부 출력(.svx-fee-table) + 비급여 에디터(.fee-editor) 단일 소스 → 에디터·미리보기·외부 동일. 에디터의 table-layout:fixed/resize 핸들은 건드리지 않음(미설정). */
.svx-fee-table table, .fee-editor .svx-editor-content table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--c-white, #fff); }
.svx-fee-table caption { caption-side: top; text-align: left; padding: 0 0 8px; color: var(--c-mute, #64748b); font-size: .85rem; }
.svx-fee-table th, .svx-fee-table td, .fee-editor .svx-editor-content table th, .fee-editor .svx-editor-content table td { padding: 12px 14px; border: 1px solid var(--c-line, #e2e8f0); text-align: left; vertical-align: middle; word-break: break-word; }
.svx-fee-table th, .fee-editor .svx-editor-content table th { background: var(--c-bg, #f8fafc); color: var(--c-ink, #0f172a); font-weight: 600; white-space: nowrap; }
/* 셀 안 문단 — 큰 폰트/줄간격/마진 제거 (셀 높이 컴팩트). 헤더는 font-weight inherit 로 굵게 유지. */
.svx-fee-table td p, .svx-fee-table th p, .fee-editor .svx-editor-content table td p, .fee-editor .svx-editor-content table th p { margin: 0; font-size: .95rem; line-height: 1.5; font-weight: inherit; }
/* zebra/hover 제거 — Tiptap 표는 헤더가 tbody 안(1행)이라 짝수행 얼룩(#fafbfc)이 헤더 배경(#f8fafc)과 겹쳐 헤더가 두 줄처럼 보였고, 셀에 직접 칠한 배경색도 덮어썼다. 행 배경 = 흰색 단일 + 헤더만 음영. */
/* ── 반응형 ── */
@media (max-width: 640px) { .svx-fee-cat { margin-bottom: 40px; } .svx-fee-head { padding-bottom: 10px; margin-bottom: 14px; } .svx-fee-name { font-size: 1.2rem; } .svx-fee-table table { font-size: .9rem; } .svx-fee-table th, .svx-fee-table td { padding: 9px 11px; } }
/* ── 모바일 가로스크롤 ───────────────────────────────────────────── 래퍼(.svx-fee-table)는 원래부터 overflow-x:auto 였는데 **한 번도 발동한 적이 없었다.** 표가 width:100% 라 컨테이너를 넘을 수가 없어서다. 넘치지 않으니 스크롤도 없고, 대신 5열이 좁은 폭에 압착됐다 — 실측(슬찬 제증명표, 390px): scrollWidth 342 === clientWidth 342, 열당 68px, "분류"가 세로로 한 글자씩, "200,000"이 3줄로 분절. 값이 안 읽히는 상태였다. ① 셀 min-width — 표를 넘치게 만드는 최소 조건. 표 전체에 min-width 를 걸지 않고 셀에 거는 이유는 **열 개수에 자동으로 적응**하기 때문이다(실측: 5열 → 563px 스크롤 O / 2열 → 342px 스크롤 X). 병원이 열 구성을 자유롭게 짜는 비급여표라 열 수를 가정하면 언젠가 깨진다. ② word-break — 기본이 break-word 라 금액·원내코드가 글자 단위로 쪼개진다. 스크롤을 켜도 이건 별도로 풀어야 한다. 셀 안 는 상위 스타일에서 overflow-wrap:anywhere 를 물려받아 "ABZ010001"이 두 줄로 잘렸으므로
까지 같이 되돌린다(실측으로 확인). ③ 가장자리 그림자 — 넘칠 때만 보이는 스크롤 힌트. background-attachment 의 local(내용과 함께 스크롤되는 흰 덮개) + scroll(고정된 그림자) 조합이라 **JS·마크업 없이** 스크롤 여부에 따라 저절로 나타나고 끝까지 밀면 사라진다. 표 배경을 transparent 로 내려야 래퍼 배경이 보인다 (셀에 직접 칠한 배경색은 인라인 style 이라 그대로 이긴다). ⚠️ 위 규칙은 .svx-fee-table 에만 건다. 표 기본 규칙은 .fee-editor(관리자 비급여 편집화면)와 선택자를 공유하는데, 편집화면까지 넘치게 만들면 좁은 창에서 편집이 불편해진다. ⚠️ 에디터 본문 표(content.css)는 대상이 아니다. 문장이 든 2열 표는 줄바꿈이 정답이고, 금액·코드가 든 데이터표는 가로스크롤이 정답이다 — 같은 '표'라도 처방이 반대다. */
@media (max-width: 640px) { .svx-fee-table th, .svx-fee-table td { min-width: 7em; word-break: keep-all; overflow-wrap: normal; } .svx-fee-table th p, .svx-fee-table td p { word-break: keep-all; overflow-wrap: normal; } .svx-fee-table table { background: transparent; } .svx-fee-table { background-color: var(--c-white, #fff); background-image: linear-gradient(to right, var(--c-white, #fff), rgba(255, 255, 255, 0)), linear-gradient(to left, var(--c-white, #fff), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(15, 23, 42, .26), rgba(15, 23, 42, 0)), linear-gradient(to left, rgba(15, 23, 42, .26), rgba(15, 23, 42, 0)); background-position: 0 0, 100% 0, 0 0, 100% 0; background-repeat: no-repeat; background-size: 24px 100%, 24px 100%, 18px 100%, 18px 100%; background-attachment: local, local, scroll, scroll; } }