/* svndex.css — 7dex 시스템 공통 UI 스타일(관리자 · 인증 · 마이페이지 · 시스템 출력). 관리자에서는 이 파일 단독이라 **자기완결**이어야 한다 — 토큰·폰트를 스스로 갖는다. 게시판 스킨(post/dev 의 skin.css)은 이 파일 소관이 아니다. 섹션 순서 = 사이드바 메뉴 순서 + 인증·마이페이지·시스템 출력 */
/* ─── 디자인 토큰 (medical-tone) ─── */
:root { --svx-primary: #7c3aed; --svx-primary-d: #6d28d9; --svx-ink: #1a1d24; --svx-mute: #6b7280; --svx-line: #e5e7eb; --svx-bg: #f7f7f9; --svx-bg-alt: #f5f5f7; --svx-card: #ffffff; --svx-card-shadow: 0 1px 3px rgba(0,0,0,.04); --svx-radius: 8px; --svx-success: #16a34a; --svx-success-bg: #dcfce7; --svx-success-tx: #166534; --svx-error: #dc2626; --svx-error-bg: #fee2e2; --svx-error-tx: #991b1b; --svx-warn: #d97706; --svx-warn-bg: #fef3c7; --svx-warn-tx: #92400e; --svx-warn-line: #fde68a; --svx-font-sans: 'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --svx-font-mono: 'Menlo','Monaco','Cascadia Code',monospace; color-scheme: light; }
/* 공개 회원화면(로그인·가입·비번찾기·마이페이지)은 병원 브랜드색을 따르고, 관리자는 7dex 아이덴티티를 쓴다. 값 소스 = 사이트가 정의하는 --brand-color(없으면 --c-primary). 엔진은 정의하지 않는다. */
.svndex-auth-shell { --svx-primary: var(--brand-color, var(--c-primary, #7c3aed)); --svx-primary-d: var(--brand-color-d, var(--c-secondary, #6d28d9)); }
* { box-sizing:border-box; }
/* 필수 표기 (* asterisk) — register/mypage/admin 공용 */
.svndex-req { color:var(--svx-error); font-weight:700; margin-left:2px; }
/* ── 관리자 공통 셸 — 사이드바 · 헤더 · 메인 · 카드 · 등급 뱃지 ── */
body:has(.svndex-admin-shell) { margin:0; font-family:var(--svx-font-sans); background:var(--svx-bg); color:var(--svx-ink); font-size:15px; -webkit-font-smoothing:antialiased; }
/* ⚠ position:relative 필수. static 이면 이 셸은 «클리핑은 하지만 컨테이닝 블록은 아닌» 상태라, 안쪽의 absolute 요소(에디터 툴바 드롭다운 등)가 overflow:hidden 을 빠져나가 **문서 높이를 늘린다** — 바깥 페이지 스크롤바가 하나 더 생기고 내리면 빈 화면이 나온다. */
.svndex-admin-shell { display:flex; position:relative; height:100vh; overflow:hidden; }
/* Skip-to-content (WCAG 2.4.1 Bypass Blocks) — 기본은 화면 밖, 키보드 포커스 시 노출 */
.svndex-skip { position:absolute; left:-9999px; top:0; z-index:10000; background:var(--svx-primary,#7c3aed); color:#fff; padding:8px 16px; border-radius:0 0 6px 0; font-size:.9rem; text-decoration:none; }
.svndex-skip:focus { left:0; }
.svndex-admin-sidebar { position:relative; width:200px; background:#170f2a; color:#dde; padding:0 0 16px; flex-shrink:0; overflow:visible; display:flex; flex-direction:column; transition:width .2s ease; }
/* 슬림 모드 — 56px, 텍스트 숨김, 아이콘만 */
/* S 전용 묶음 앞 구분선. 사이드바 배경(#170f2a) 위라 밝은 반투명으로 얇게. */
.svndex-admin-menu-sep { height:1px; margin:9px 16px; background:rgba(221,221,238,.16); list-style:none; padding:0; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-menu-sep { margin:9px 14px; }
.svndex-admin-sidebar[data-mode="slim"] { width:68px; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-menu-label { display:none; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-menu-item a { padding:12px 0; justify-content:center; gap:0; }
/* 새 글 점 — SUPPORT 메뉴 글자 오른쪽. 목록의 NEW 뱃지와 **같은 기준**이다. ⚠️ 숫자를 적지 않는다: 몇 건인지는 들어가서 보면 되고, 사이드바는 폭이 좁아 숫자가 붙으면 라벨이 밀린다. ⚠️ 슬림 모드에서는 라벨이 숨으므로(위 22줄) 아이콘 오른쪽 위로 옮겨 붙인다 — 안 그러면 점만 덩그러니 남는다. */
/* ⚠️ 이 링크는 `gap:10px` 이다 — margin 을 «더하면» 글자에서 15px 이나 떨어진다(실측). 음수 margin 으로 그 gap 을 상쇄한다 — 15px(너무 멀다) → 3px(너무 붙는다) → **7px** 로 잡았다. 세로는 `top:1px` — flex 는 «상자» 기준으로 가운데를 잡는데 대문자 글자는 상자 안에서 위쪽에 앉아 그대로 두면 살짝 높아 보인다(사용자 지정 2026-09-23). */
.svndex-menu-dot { position:relative; top:1px; flex:0 0 auto; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,.25); }
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-menu-item a { position:relative; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-menu-dot { position:absolute; top:9px; left:calc(50% + 8px); margin-left:0; }
/* SUPPORT 카드의 새 글 점 — 사이드바 점과 같은 색·크기. 카드 우측 상단 모서리 안쪽에 둔다. ⚠️ `.sdx-card` 는 position 선언이 없어 그대로 absolute 를 쓰면 화면 기준으로 날아간다 — 점이 있는 카드에만 relative 를 준다(모든 카드에 주면 다른 모듈의 카드까지 건드린다). */
.sdx-card.has-new { position:relative; }
.sdx-card-dot { position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.22); }
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-home { padding:10px 0; gap:0; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-home span { display:none; }
/* 슬림 모드 — 메뉴 이름 말풍선. 메뉴 칸이 세로 스크롤 상자라(아래 §2026-10-01) 칸 밖에 CSS 로 띄우던 말풍선은 잘린다 — layout.js 가 가리킨 메뉴 옆(메뉴 오른쪽 끝 + 10px · 세로 가운데)에 화면 기준 말풍선 하나를 띄운다. 모양은 종전 말풍선 그대로. */
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-menu-item { position:relative; }
/* §2026-10-12 대표님 «한글 메뉴명 · 말풍선이 너무 작고 꼬다리가 안 보인다 · 우측으로 벌려야» — 글자 키우고 꼬다리(왼쪽 삼각)를 몸통 «밖» 에 그린다
   (종전 ::before 꼬다리는 몸통 밑에 깔려 안 보였다 · §12-120). 테두리 대신 그림자 — 꼬다리와 몸통 색이 이어지게. */
.svndex-side-tip { position:fixed; left:0; top:0; z-index:1000; transform:translateY(-50%); background:#1a1d24; color:#fff; padding:8px 13px; border-radius:8px; font-size:.9rem; font-weight:600; letter-spacing:0; line-height:1.35; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.28); pointer-events:none; visibility:hidden; }
.svndex-side-tip::after { content:''; position:absolute; left:-7px; top:50%; transform:translateY(-50%); width:0; height:0; border-style:solid; border-width:7px 7px 7px 0; border-color:transparent #1a1d24 transparent transparent; }
.svndex-side-tip.is-on { visibility:visible; }
/* 토글 버튼 — 사이드바 우측 상단 외곽 핀 */
.svndex-sidebar-toggle-form { position:absolute; top:calc(50% - 10px); right:-28px; transform:translateY(-50%); margin:0; z-index:10; }
.svndex-sidebar-toggle { display:inline-flex; align-items:center; justify-content:center; width:28px; height:46px; padding:0; border:1px solid var(--svx-line); border-left:0; border-radius:0 50% 50% 0; background:var(--svx-card); color:#5b21b6; cursor:pointer; box-shadow:2px 2px 8px rgba(0,0,0,.12); transition:background .15s ease, color .15s ease, border-color .15s ease; }
.svndex-sidebar-toggle:hover { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.svndex-sidebar-toggle .ph { font-size:1.05rem; line-height:1; transition:transform .2s ease; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-sidebar-toggle .ph { transform:rotate(180deg); }
/* 모바일 ≤768px — 슬림 모드 무시, 토글 버튼 숨김 (가로 스크롤 메뉴 유지) */
@media (max-width: 768px) { .svndex-admin-sidebar[data-mode="slim"] { width:100%; } .svndex-admin-sidebar[data-mode="slim"] .svndex-menu-label { display:inline; } .svndex-admin-sidebar[data-mode="slim"] .svndex-admin-menu-item a { padding:6px 12px; gap:6px; justify-content:center; } .svndex-side-tip { display:none; } .svndex-sidebar-toggle-form { display:none; } }
.svndex-admin-sidebar > .svndex-admin-menu-wrap { flex:1; min-height:0; }
/* §2026-10-01 — 창 높이가 낮으면 메뉴가 아래 정보·문의·홈페이지 묶음 위로 흘러넘쳐 겹쳤다(대표님 신고). 메뉴 칸은 줄어들게(flex:1 · min-height:0) 돼 있었는데 넘칠 때의 처리가 없었다 — 메뉴 칸만 안에서 스크롤한다(로고·아래 묶음은 제자리). 넘칠 때만 위·아래 끝을 흐리게 한다(data-sx = layout.js · 어두운 사이드바라 공용 안쪽 그림자 대신 가장자리 흐림). 넘칠 때는 목록 끝에 20px 여백 — 끝까지 내려도 마지막 메뉴(S = SETTING · M·P = SUPPORT)가 아래 묶음에 붙지 않게(대표님 지적). 폰(≤768)은 가로 메뉴라 건드리지 않는다. */
@media (min-width: 769px) { .svndex-admin-sidebar > .svndex-admin-menu-wrap { overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(221,221,238,.22) transparent; } .svndex-admin-sidebar > .svndex-admin-menu-wrap[data-sx] { box-shadow:none; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 var(--sx-t, 0px), #000 calc(100% - var(--sx-b, 0px)), transparent); mask-image:linear-gradient(to bottom, transparent, #000 var(--sx-t, 0px), #000 calc(100% - var(--sx-b, 0px)), transparent); } .svndex-admin-sidebar > .svndex-admin-menu-wrap[data-sx~="t"] { --sx-t:28px; } .svndex-admin-sidebar > .svndex-admin-menu-wrap[data-sx~="b"] { --sx-b:28px; } .svndex-admin-sidebar > .svndex-admin-menu-wrap[data-sx] > .svndex-admin-menu { padding-bottom:20px; } }
.svndex-admin-sidebar-top { display:flex; flex-direction:column; }
.svndex-admin-sidebar-user { display:none; }
/* 높이 = 본문 타이틀영역(.svndex-admin-header) 높이에 정렬 — main 상단24 + h1행~29 + 헤더하단16 + 보더1 ≈ 70px. align-items:center 로 로고 세로중앙 */
.svndex-admin-sidebar-brand { display:flex; align-items:center; justify-content:center; height:74px; box-sizing:border-box; padding:0 16px; border-bottom:1px solid #2a2d34; margin-bottom:0; text-align:center; text-decoration:none; letter-spacing:.02em; transition:color .15s ease; }
.svndex-admin-sidebar-brand:hover { color:var(--svx-mute); }
.svndex-admin-sidebar-brand small { display:block; padding:0; margin:0 auto!important; }
/* SVG 로고 — 원본 색상 그대로 (눈으로 대비 확인용) */
.svndex-admin-sidebar-logo { display:block; width:100px; max-width:100%; height:auto; margin:0 auto; /* filter:brightness(0) invert(1); */transition:opacity .15s ease, filter .15s ease; }
.svndex-admin-sidebar-brand:hover .svndex-admin-sidebar-logo { opacity:.78; }
/* 슬림 모드 = 풀로고 숨기고 심볼만 표시 */
.svndex-admin-sidebar-symbol { display:none; width:36px; max-width:100%; height:auto; margin:0 auto!important; transition:opacity .15s ease; }
.svndex-admin-sidebar-brand:hover .svndex-admin-sidebar-symbol { opacity:.78; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-sidebar-logo { display:none; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-sidebar-symbol { display:block; }
/* 사업자명(병원명) 행 — DASH 상단, org 바로가기. 값 있으면 이름 / 비면 "사업자 정보" 밑줄 */
.svndex-admin-biz { display:flex; align-items:center; gap:10px; padding:14px 18px; color:#9aa3b2; font-size:1.05rem; font-weight:600; text-decoration:none; border-bottom:1px solid #2a2d34; white-space:nowrap; overflow:hidden; transition:color .15s ease; }
.svndex-admin-biz i { font-size:1.1rem; flex-shrink:0; }
.svndex-admin-biz .svndex-menu-label { overflow:hidden; text-overflow:ellipsis; }
.svndex-admin-biz:hover { color:#cce; }
.svndex-admin-biz.is-empty .svndex-menu-label { text-decoration:underline; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-biz { justify-content:center; padding:11px 0; gap:0; }
/* 슬림 = 높이 70px(expand 와 동일 = 타이틀 보더 정렬) 유지, 좌우 0(68px 폭 정중앙). align-items:center 로 심볼 세로중앙 */
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-sidebar-brand { padding:0; }
@media (max-width: 768px) { .svndex-admin-sidebar-logo { width:84px; margin:0; } }
.svndex-admin-menu-wrap { position:relative; }
.svndex-menu-arrow { display:none; }
.svndex-admin-menu { list-style:none; margin:0; padding:0; text-align:center; }
.svndex-admin-menu-item a { display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:12px 18px; color:#cce; text-decoration:none; font-weight:500; font-size:1.05rem; }
.svndex-admin-menu-item a .ph { font-size:1.15rem; line-height:1; flex-shrink:0; width:20px; text-align:center; }
.svndex-menu-label { font-weight:500; }
.svndex-admin-menu-item a:hover { background:#252830; color:#fff; }
.svndex-admin-menu-item.active a { background:#7c3aed; color:#fff; }
.svndex-admin-home { display:flex; align-items:center; justify-content:center; gap:7px; line-height:1; margin:14px 12px 12px; padding:10px 16px; background:rgba(255,255,255,.06); color:#dde; text-decoration:none; border:1px solid #2a2d34; border-radius:8px; font-size:1rem; font-weight:500; transition:background .15s ease, color .15s ease, border-color .15s ease; flex-shrink:0; }
.svndex-admin-home:hover { background:rgba(124,58,237,.18); color:#fff; border-color:#7c3aed; }
/* §2026-10-13 홈페이지 | 미리보기 반반 — 줄이 바깥 여백을 갖고 두 단추는 같은 폭 */
.svndex-admin-home-row { display:flex; gap:6px; margin:14px 12px 12px; flex-shrink:0; }
.svndex-admin-home-row > .svndex-admin-home { flex:7 1 0; min-width:0; margin:0; padding:10px 4px; gap:6px; font-size:.92rem; letter-spacing:.04em; }
.svndex-admin-home-row > .svndex-admin-preview-item { flex:3 1 0; min-width:0; display:flex; }   /* HOME : 프리뷰(아이콘만) = 7:3 · 말풍선 = 정보·문의 부품 */
.svndex-admin-preview-item > .svndex-admin-home { flex:1 1 0; min-width:0; margin:0; padding:10px 4px; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-home-row { flex-direction:column; gap:4px; margin:10px 8px; }
/* 아이콘·텍스트 세로 중앙 — 아이콘 폰트(Phosphor)와 본문 폰트의 메트릭이 달라 align-items 만으로는 기준선이 어긋난다. 둘 다 line-height:1 로 눕히고 flex 중앙에 맡긴다 (정렬 수정) */
.svndex-admin-home i.ph { display:inline-flex; align-items:center; line-height:1; font-size:1.05rem; }
.svndex-admin-home span { display:inline-flex; align-items:center; line-height:1; }
.svndex-admin-home .ph { font-size:1.15rem; line-height:1; }
/* 헤더 우측 다크모드 토글 — 동그란 버튼 (로그아웃 우측) */
.svndex-theme-form { margin:0; }
.svndex-theme-toggle, .svndex-logout-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid #c4b5fd; border-radius:50%; background:#ede9fe; color:#7c3aed; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .2s ease; box-shadow:0 1px 2px rgba(124,58,237,.10); }
.svndex-logout-icon { background:#fff; }
.svndex-theme-toggle:hover { background:#7c3aed; color:#fff!important; border-color:#7c3aed; }
.svndex-logout-icon:hover { background:#170f2a; color:#fff!important; border-color:#170f2a; }
.svndex-theme-toggle .ph, .svndex-logout-icon .ph { font-size:1rem; line-height:1; }
/* 사이드바 aux 버튼 (이메일 / 사업자 / 버전) — 홈보다 은은하게 */
.svndex-admin-aux { display:flex; gap:6px; margin:0 12px 6px; flex-shrink:0; }
.svndex-aux-item { position:relative; flex:1; }
.svndex-aux-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:7px 4px; border:1px solid rgba(42,45,52,.6); border-radius:6px; background:transparent; color:rgba(221,221,238,.72); font-size:.75rem; font-weight:500; text-decoration:none; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.svndex-aux-btn:hover { background:rgba(124,58,237,.12); color:#dde; border-color:#5b21b6; }
/* §2026-09-25 — 글자가 투명도 .45 라 짙은 남색 바탕에서 대비 약 3.5:1 로 흐렸다 → .72(좁은 화면 머리줄과 같은 값). */
.svndex-aux-btn .ph { font-size:.95rem; line-height:1; }
.svndex-aux-label { letter-spacing:.02em; }
.svndex-aux-tip { display:none; position:absolute; left:calc(100% + 14px); top:50%; transform:translateY(-50%); background:#1a1d24; color:#fff; padding:8px 12px; border-radius:6px; font-size:.78rem; font-weight:400; line-height:1.5; letter-spacing:.02em; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.25); border:1px solid #2a2d34; z-index:50; pointer-events:none; }
.svndex-aux-item:hover .svndex-aux-tip { display:block; }
.svndex-aux-item:hover::before { content:""; position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); border:6px solid transparent; border-right-color:var(--svx-ink); z-index:50; pointer-events:none; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-admin-aux { gap:4px; margin:0 8px 6px; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-aux-label { display:none; }
.svndex-admin-sidebar[data-mode="slim"] .svndex-aux-btn { padding:7px 0; gap:0; }
/* overscroll-behavior:contain — 안쪽 스크롤이 끝에 닿아도 바깥 페이지로 «넘어가지» 않게 한다(스크롤 체이닝 차단). 마우스로 내리다 화면이 훌쩍 벗어나던 증상의 직접 원인. */
.svndex-admin-main { flex:1; padding:24px 32px; overflow:auto; overscroll-behavior:contain; }
/* §2026-09-25 — 한글은 낱말 단위로 줄을 바꾼다. 기본값(글자 단위)이라 「신뢰 / 성」「개인정보처리방 / 침」「대응입니 / 다.」처럼 한 글자만 다음 줄로 떨어지는 곳이 관리자 전체에 232곳(81화면 × 4폭 실측) 있었다. 칸보다 긴 낱말은 그래도 끊는다(break-word). ⚠️ 편집기 본문은 보기 화면 값을 따른다 — §2026-10-05: 종전엔 편집 칸·.svx-content 를 여기서 normal 로 돌렸는데, 보기 화면(게시판 · 고객지원 · 병원 사이트 법정 고지)은 모두 keep-all 이라 편집 칸만 글자 단위로 줄이 바뀌었다(작성 화면 ≠ 보기 화면). 사이트 글 편집 칸(.svx-site-scope)은 사이트 CSS 다리가 값을 정한다. */
.svndex-admin-main { word-break:keep-all; overflow-wrap:break-word; }
.svndex-admin-main :is(pre, code, textarea):not(.svx-site-scope *) { word-break:normal; }
.svndex-admin-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--svx-line); margin-bottom:24px; }
.svndex-admin-header h1 { margin:0; font-size:1.4rem; display:flex; align-items:center; gap:14px; }
.svndex-admin-back { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; background:var(--svx-bg-alt); color:#7c3aed; border:1px solid var(--svx-line); border-radius:6px; font-size:.9375rem; font-weight:500; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
.svndex-admin-back:hover { background:#7c3aed; color:#fff; border-color:#7c3aed; }
/* 대시보드 타이틀 — TODAY 그라데이션 + 병원명(org 사업자명) / 없으면 등록 CTA */
.svndex-admin-header h1[data-page="dashboard"] { flex-wrap:wrap; gap:12px; }
/* 제목 옆 안내 한 줄(팝업 · 티커 · 스케줄 · §2026-10-12) — 본문보다 작은 글자 · 좁은 화면이면 제목 아래로 */
.svndex-admin-header h1:has(.svndex-admin-h1-note) { flex-wrap:wrap; row-gap:4px; }
.svndex-admin-h1-note { font-size:.84rem; font-weight:400; color:var(--svx-mute); line-height:1.5; }
body[data-theme="dark"] .svndex-admin-h1-note { color:var(--svx-d-mute); }
.dash-today-badge { font-size:1.55rem; font-weight:900; letter-spacing:-.02em; line-height:1; background:linear-gradient(120deg,#7c3aed 0%,#a78bfa 45%,#06b6d4 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.dash-hosp-name { font-size:1.4rem; font-weight:700; color:var(--svx-ink); }
.dash-hosp-cta { display:inline-flex; align-items:center; gap:5px; font-size:.9rem; font-weight:600; color:var(--svx-primary,#7c3aed); text-decoration:none; padding:5px 12px; border:1px dashed var(--svx-primary,#7c3aed); border-radius:8px; transition:background .15s ease; }
.dash-hosp-cta:hover { background:rgba(124,58,237,.12); }
/* 병원명 옆 기관정보 바로가기 — 평소엔 흐리게, hover 시 드러남 */
.dash-hosp-edit { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:4px; border-radius:6px; color:var(--svx-primary,#7c3aed); background:rgba(124,58,237,.1); opacity:1; transition:background .15s ease; }
.dash-hosp-edit:hover { background:rgba(124,58,237,.2); }
.dash-hosp-edit i { font-size:.9rem; line-height:1; }
.svndex-admin-user { display:flex; align-items:center; gap:10px; font-size:1rem; color:var(--svx-mute); margin-left:auto; }
/* §2026-09-25 margin-left:auto — 머리가 두 줄로 접히는 폭(1024 · 제목 옆 리포트 버튼)에서도 사용자 줄이 오른쪽에 남는다 */
.svndex-admin-user-link { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px; color:var(--svx-ink); text-decoration:none; transition:background .15s ease, color .15s ease; }
.svndex-admin-user-link:hover { background:var(--svx-bg-alt); color:var(--svx-primary); }
.svndex-admin-user-name { font-weight:500; }
.svndex-admin-user-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; border-radius:99px; font-size:.75rem; font-weight:700; line-height:1; letter-spacing:.04em; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.svndex-admin-user-badge.is-gold { background:linear-gradient(135deg,#fde68a,#f59e0b); color:#7c2d12; border:1px solid #f59e0b; }
.svndex-admin-user-badge.is-silver { background:linear-gradient(135deg,#f3f4f6,#9ca3af); color:#374151; border:1px solid #9ca3af; }
a.svndex-admin-user-badge, a.svndex-lvl-badge { text-decoration:none; cursor:pointer; transition:transform .12s ease, box-shadow .15s ease, filter .15s ease; }
a.svndex-admin-user-badge:hover, a.svndex-lvl-badge:hover { transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 2px 6px rgba(0,0,0,.18); }
.svndex-admin-user-sep { color:var(--svx-line); user-select:none; }
/* 알림 벨 위젯 (svndex-admin-user 안 — 등급 뱃지 우측) */
.svndex-notify-bell { position:relative; display:inline-block; }
/* ⚠ [hidden] 을 명시해야 한다 — 위 display:inline-block 이 브라우저 기본 [hidden]{display:none} 을 이겨, 마크업에서 숨긴 요소가 그대로 렌더된다. 좁은 화면에서 조상이 flex 로 바뀌는 순간 드러나고, aria-hidden 인데 포커스 가능한 자식을 품어 접근성 위반이 된다. */
.svndex-notify-bell[hidden] { display:none; }
.svndex-notify-bell summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:6px 10px; border-radius:6px; color:var(--svx-mute); font-size:1rem; transition:background .15s ease, color .15s ease; }
.svndex-notify-bell summary::-webkit-details-marker { display:none; }
.svndex-notify-bell summary:hover { background:var(--svx-bg-alt); color:var(--svx-primary); }
.svndex-notify-bell summary .ph { font-size:1.05rem; }
.svndex-notify-bell[open] summary { background:var(--svx-bg-alt); color:var(--svx-primary); }
.svndex-notify-label { font-weight:500; }
.svndex-notify-count { color:var(--svx-mute); font-variant-numeric:tabular-nums; }
.svndex-notify-count.is-on { color:var(--svx-error); font-weight:600; }
.svndex-notify-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:300px; max-width:380px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.12); overflow:hidden; }
.svndex-notify-pop-head { padding:10px 14px; background:var(--svx-bg-alt); font-size:.8125rem; font-weight:600; color:var(--svx-ink); border-bottom:1px solid var(--svx-line); }
.svndex-notify-empty { padding:18px 14px; text-align:center; color:var(--svx-mute); font-size:.875rem; margin:0; }
.svndex-notify-list { list-style:none; margin:0; padding:0; max-height:280px; overflow-y:auto; }
.svndex-notify-list li { display:flex; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--svx-line); font-size:.8125rem; }
.svndex-notify-list li:last-child { border-bottom:0; }
/* §2026-09-25 — 한 줄 말줄임은 「[시스템] cron 실패 — …」처럼 «어느 작업인지» 앞에서 끊겼다 → 두 줄까지 보이고 그 뒤를 줄인다. */
.svndex-notify-title { color:var(--svx-ink); flex:1; min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.svndex-notify-time { color:var(--svx-mute); font-size:.75rem; flex-shrink:0; }
.svndex-notify-all { display:block; padding:10px 14px; background:var(--svx-bg-alt); text-align:center; font-size:.8125rem; color:var(--svx-primary); text-decoration:none; border-top:1px solid var(--svx-line); }
.svndex-notify-all:hover { background:#eef2ff; }
.svndex-admin-user form { display:inline; }
.svndex-admin-user button:not(.svndex-theme-toggle):not(.svndex-logout-icon) { background:none; border:0; color:#c00; cursor:pointer; padding:0; font-size:1rem; transition:color .15s ease; }
.svndex-admin-user button:hover:not(.svndex-theme-toggle):not(.svndex-logout-icon) { color:#7f1d1d; text-decoration:underline; }
.svndex-admin-card { background:var(--svx-card); padding:20px 24px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:16px; }
/* §2026-09-25 회원 요약 카드 = 폭과 무관하게 한 줄 3칸(사용자 요청 — 폰에서 2+1 로 떨어지던 것). 라벨이 좁은 칸에서 두 줄이 돼도 숫자 줄이 나란하도록 숫자를 카드 바닥에 붙이고, 숫자 크기는 칸 폭(cqi)에 맞춰 줄인다. */
.svndex-admin-stat { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:24px; }
.svndex-admin-stat-card { display:flex; flex-direction:column; container-type:inline-size; background:var(--svx-card); padding:16px 20px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.svndex-admin-stat-card .label { font-size:.9375rem; color:var(--svx-mute); }
.svndex-admin-stat-card .value { font-size:min(1.5rem, 19cqi); font-weight:600; color:var(--svx-ink); margin-top:auto; padding-top:4px; white-space:nowrap; }
@media (max-width: 640px) { .svndex-admin-stat { gap:8px; } .svndex-admin-stat-card { padding:12px 10px; } .svndex-admin-stat-card .label { font-size:.75rem; line-height:1.35; } }
.svndex-admin-stub { padding:40px 24px; text-align:center; color:var(--svx-mute); }
/* 빈 main 안전망 (= 세션 만료 등 빈 swap 시 표시) */
.svndex-empty-main { max-width:480px; margin:80px auto; padding:40px 32px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:12px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.svndex-empty-main i { font-size:2.5rem; color:#f59e0b; margin-bottom:14px; display:block; }
.svndex-empty-main h2 { margin:0 0 10px; font-size:1.15rem; font-weight:600; color:var(--svx-ink); }
.svndex-empty-main p { margin:0 0 22px; font-size:.9rem; color:var(--svx-mute); line-height:1.55; }
.svndex-empty-main-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 22px; background:var(--svx-primary); color:#fff; text-decoration:none; border-radius:8px; font-size:.9rem; font-weight:600; transition:background .15s ease; }
.svndex-empty-main-btn:hover { background:var(--svx-primary-d); }
body[data-theme="dark"] .svndex-empty-main { background:var(--svx-d-card); border-color:var(--svx-d-line-strong); box-shadow:0 2px 8px rgba(0,0,0,.4); }
body[data-theme="dark"] .svndex-empty-main h2 { color:var(--svx-d-ink-strong); }
body[data-theme="dark"] .svndex-empty-main p { color:var(--svx-d-mute); }
/* 등급 인라인 뱃지 (테이블/뷰 안에서 사용) */
.svndex-lvl-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; border-radius:99px; font-size:.75rem; font-weight:700; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.svndex-lvl-badge.is-gold { background:linear-gradient(135deg,#fde68a,#f59e0b); color:#7c2d12; border:1px solid #f59e0b; }
.svndex-lvl-badge.is-silver { background:linear-gradient(135deg,#f3f4f6,#9ca3af); color:#374151; border:1px solid #9ca3af; }
/* 스크롤탑 버튼 (master/_layout.php — 사이트 .acc-btn 미러) */
/* HTMX swap 직후 한 프레임 깜빡임 방지 — flash 박스는 처음부터 숨김. JS = textContent 추출해서 토스트만 함. */
.svndex-admin-main [class$="-flash"], .svndex-admin-main [class*="-flash "], .svndex-admin-main .flash, .svndex-admin-main .post-flash { display: none !important; }
.svndex-acc-buttons { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:80; }
.svndex-acc-btn { width:48px; height:48px; border-radius:50%; background:var(--svx-primary); color:#fff; border:0; padding:0; box-shadow:0 6px 18px rgba(15,23,42,.18); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none; transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .15s ease; }
.svndex-acc-btn.is-shown { opacity:1; transform:translateY(0); pointer-events:auto; }
.svndex-acc-btn:hover { background:var(--svx-primary-d); transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.22); }
.svndex-acc-btn svg { display:block; }
/* ── 대시보드 — 인사 + 4분할 통계 + 활동·시스템 카드 ── */
.dash-greeting { margin:0 0 20px; padding:14px 20px; background:var(--svx-card); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); font-size:1rem; color:#555; }
.dash-greeting strong { color:var(--svx-ink); font-weight:600; }
.dash-row4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:20px; }
.dash-row5 { display:grid; grid-template-columns:58px repeat(5, minmax(0, 1fr)); gap:14px; margin-bottom:20px; }
/* 줄머리 버튼 — 첫 칸 정사각(58px). 평면 스타일(§2026-09-24 사용자 지시: 그라데이션 X, 관리자 톤). 평소 = 흰 바탕 + 보라 아이콘 + 같은 색 테두리 / 올리면 = 보라로 채움 + 흰 아이콘. 모서리 화살표로 «누르는 곳» 임을 알린다. ⚠️ 다크모드의 `body[data-theme=dark] a` 가 글자색을 덮으므로 색을 특이도로 지킨다. */
.dash-row5 .dash-sq { position:relative; display:flex; align-items:center; justify-content:center; min-height:58px; border-radius:8px; color:var(--svx-primary); text-decoration:none; background:var(--svx-card); border:1px solid #a78bfa; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:background .15s, color .15s, border-color .15s; }
.dash-row5 .dash-sq > .ph:first-child { font-size:24px; line-height:1; }
.dash-row5 .dash-sq-go { position:absolute; top:5px; right:6px; font-size:10px; opacity:.7; }
.dash-row5 a.dash-sq:hover, .dash-row5 a.dash-sq:focus-visible { background:var(--svx-primary); border-color:var(--svx-primary); color:#fff; }
.dash-row5 a.dash-sq:focus-visible { outline:2px solid var(--svx-primary-d); outline-offset:2px; }
.dash-row5 span.dash-sq { opacity:.45; cursor:default; }
body[data-theme="dark"] .dash-row5 .dash-sq { background:var(--svx-d-card); border-color:rgba(167,139,250,.55); }
body[data-theme="dark"] .dash-row5 a.dash-sq { color:var(--svx-d-primary); }
body[data-theme="dark"] .dash-row5 a.dash-sq:hover, body[data-theme="dark"] .dash-row5 a.dash-sq:focus-visible { background:var(--svx-primary); border-color:var(--svx-primary); color:#fff; }
.dash-row2 { display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:20px; align-items:stretch; }
/* PC = 7dex+시계+날씨 행만 min-height 고정 — 날씨 lazy-load 시 layout shift 방지. 방문자/시스템 행은 제외. */
@media (min-width: 769px) { .dash-row2:has(.dash-clock-weather) { min-height: 320px; } }
.dash-row3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:20px; }
/* 상단 4칸 = 가로형 `| 항목명 ········ ±증감 값 |` (§2026-09-24 사용자 지시). 마크업 순서(항목명 → 값 → 증감)는 그대로 두고 `order` 로 보이는 순서만 바꾼다 — 화면 낭독기는 「오늘 방문자, 0, 어제 대비 …」로 읽는 편이 자연스럽다. 좁은 화면 줄바꿈은 아래 640 블록. */
.dash-stat { background:var(--svx-card); padding:16px 20px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); display:flex; align-items:center; flex-wrap:wrap; column-gap:12px; row-gap:6px; }
.dash-stat .label { font-size:1rem; font-weight:500; color:#374151; flex:1 1 auto; min-width:0; }
.dash-stat .value { font-size:1.4rem; font-weight:700; color:var(--svx-ink); line-height:1; order:2; margin-left:auto; white-space:nowrap; }
.dash-stat .delta { font-size:.8125rem; order:1; white-space:nowrap; }
/* 칸이 내용보다 좁아지면(5칸 · 작은 화면) 억지로 줄바꿈하지 않고 단계적으로 접는다 — 칸 «자기 폭» 기준. ① 「(어제)」를 숨겨 한 줄을 지킨다 ② 그래도 좁으면 항목명을 윗줄로 올린다(아랫줄 = 증감 ··· 값). 자동 줄바꿈에 맡기면 값만 혼자 아랫줄로 떨어져 칸마다 모양이 달라진다. */
.dash-row5 .dash-stat { container:dashstat / inline-size; }
/* (i) 말풍선 — 모양은 statistics-admin.css 정본(.stat-kpi2-tip), 여기서는 자리만 잡는다(§2026-09-24). ⚠️ `container` 는 레이아웃 격리라 칸마다 쌓임 맥락이 생긴다 — 그대로 두면 말풍선이 **뒤에 오는 칸 밑으로** 깔린다. 올려 둔 칸(hover·focus)만 z-index 로 앞으로 꺼낸다. 오른쪽 두 칸은 왼쪽으로 펼친다. */
.dash-row5 .dash-stat { position:relative; }
.dash-row5 .dash-stat:hover, .dash-row5 .dash-stat:focus-within { z-index:5; }
.dash-stat .label .stat-kpi2-info { margin-left:5px; vertical-align:-2px; }
.dash-stat .stat-kpi2-tip { top:calc(100% + 6px); left:0; right:auto; }
/* 한 줄 = 줄머리 버튼 1 + 카드 5 → 오른쪽 두 칸 = 6n+5 · 6n (버튼도 형제로 센다). */
.dash-row5 > .dash-stat:nth-child(6n+5) .stat-kpi2-tip, .dash-row5 > .dash-stat:nth-child(6n) .stat-kpi2-tip { left:auto; right:0; }
@media (max-width: 1024px) { .dash-row5 > .dash-stat:nth-child(odd) .stat-kpi2-tip { left:0; right:auto; } .dash-row5 > .dash-stat:nth-child(even) .stat-kpi2-tip { left:auto; right:0; } }
@container dashstat (max-width: 300px) { .dash-stat .delta-ref { display:none; } }
@container dashstat (max-width: 225px) { .dash-stat .label { flex-basis:100%; } }
.dash-stat .delta.up { color:#16a34a; }
.dash-stat .delta.down { color:#dc2626; }
.dash-stat .delta.flat { color:var(--svx-mute); }
/* 권한이 없어 숫자를 가린 칸·카드(§2026-10-01 · 대시보드가 모든 관리자에게 열리면서) — 자리는 지키고 숫자 대신 «—» 와 자물쇠 */
.dash-stat.is-locked .value, .dash-stat.is-locked .delta { color:var(--svx-mute); }
.dash-locked-note { margin:14px 0 4px; padding:18px 12px; text-align:center; color:var(--svx-mute); font-size:.9rem; line-height:1.6; border:1px dashed var(--svx-line); border-radius:8px; }
.dash-locked-note .ph { margin-right:4px; }
/* 잠긴 카드는 안내가 카드 높이를 채운다 — 옆 칸(시계·날씨 · 방문자 그래프) 높이에 맞춰 늘어난 카드 아래가 통째로 비지 않게 */
.dash-row2 > :is(.dash-card, .dash-sys):has(> .dash-locked-note) { display:flex; flex-direction:column; }
.dash-row2 > :is(.dash-card, .dash-sys) > .dash-locked-note { flex:1; display:flex; align-items:center; justify-content:center; gap:2px; }
.dash-card { background:var(--svx-card); padding:18px 20px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
/* 대시보드 아이콘 — 이모지 대신 Phosphor 로 통일. 이모지는 OS·브라우저마다 다르게 그려져 화면이 기기별로 달라 보였다. */
.dash-card-head h3 .ph { font-size:1.05rem; margin-right:2px; color:var(--svx-mute); }
.dash-clock-weather h3 .ph { font-size:1rem; margin-right:2px; color:var(--svx-mute); }
.dash-7dex-tag .icon .ph { font-size:1.5rem; line-height:1; color:var(--svx-mute); }
/* 7DEX 인덱스 BASIC CARDS 도 같은 아이콘·크기로. */
.sdx-card.is-utility .icon .ph { font-size:1.6rem; line-height:1; color:var(--svx-mute); }
.dash-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.dash-card-head h3 { margin:0; font-size:1rem; font-weight:600; color:var(--svx-ink); }
.dash-card-head a { font-size:.8125rem; color:#7c3aed; text-decoration:none; }
.dash-card-head a:hover { text-decoration:underline; }
/* 진단 코멘트 — 개발사가 병원 담당자에게 남기는 메모. 제목 바로 옆 핑크 버튼. */
/* 배치 = 제목 바로 오른쪽. 헤더가 space-between 이라 그냥 두면 셋이 균등 분산돼 버튼이 가운데로 간다 — 버튼의 margin-right:auto 가 가드 게이지만 오른쪽 끝으로 민다. */
.dash-diag-btn { display:inline-flex; align-items:center; gap:5px; margin-left:12px; margin-right:auto; padding:5px 12px; border:0; border-radius:999px; background:#db2777; color:#fff; font-size:.78rem; font-weight:600; cursor:pointer; line-height:1.4; }
.dash-diag-btn:hover { background:#be185d; }
/* 값 없음 = 회색 (작성 여부를 색으로 알린다) */
.dash-diag-btn.is-empty { background:#e5e7eb; color:#9ca3af; }
.dash-diag-btn.is-empty:hover { background:#d1d5db; color:#6b7280; }
.dash-diag-btn .ph { font-size:.95rem; }
.dash-diag-modal { width:min(800px, calc(100vw - 32px)); padding:0; border:0; border-radius:12px; box-shadow:0 18px 48px rgba(0,0,0,.22); background:var(--svx-card); color:var(--svx-ink); }
.dash-diag-modal::backdrop { background:rgba(15,15,20,.45); }
/* 800×500 이 상한 — 화면이 그보다 작으면 뷰포트에 맞춰 줄어든다(가로 min, 세로 min). */
.dash-diag-form { display:flex; flex-direction:column; height:min(500px, calc(100vh - 96px)); }
.dash-diag-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--svx-line); }
.dash-diag-head h4 { margin:0; font-size:1.02rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.dash-diag-head h4 .ph { color:#db2777; font-size:1.05rem; }
.dash-diag-x { border:0; background:transparent; color:var(--svx-mute); font-size:1.1rem; line-height:1; padding:4px; cursor:pointer; border-radius:6px; }
.dash-diag-x:hover { background:var(--svx-bg-alt); color:var(--svx-ink); }
.dash-diag-text { flex:1 1 auto; min-height:0; margin:0; padding:16px 20px; border:0; resize:none; font-family:inherit; font-size:1rem; line-height:1.75; background:transparent; color:var(--svx-ink); box-sizing:border-box; }
.dash-diag-text:focus { outline:none; }
.dash-diag-text[readonly] { color:var(--svx-mute); }
.dash-diag-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid var(--svx-line); }
.dash-diag-hint { font-size:.85rem; color:var(--svx-mute); }
.dash-diag-hint a { color:var(--svx-primary); text-decoration:none; }
.dash-diag-hint a:hover { text-decoration:underline; }
.dash-diag-save { padding:8px 20px; border:0; border-radius:8px; background:#db2777; color:#fff; font-size:.88rem; font-weight:600; cursor:pointer; }
.dash-diag-save:hover { background:#be185d; }
.dash-diag-save.is-ghost { background:var(--svx-bg-alt); color:var(--svx-ink); }
@media (max-width:640px) { .dash-diag-form { height:min(70vh, 460px); } }
/* 의료광고 가드 게이지 — 대시보드 7dex 헤더 우측 (, 「상세 보기」 링크 자리 대체). 읽기 전용 표시다. 분모는 «우리 검사 항목 13종»이라 퍼센트만 두지 않고 분수를 같이 찍는다. */
.dash-guard { display:inline-flex; align-items:center; gap:8px; font-size:.8125rem; color:var(--svx-mute); }
.dash-guard .ph { font-size:1rem; line-height:1; }
.dash-guard-label { font-weight:600; color:var(--svx-ink); }
.dash-guard-bar { display:inline-flex; gap:2px; align-items:center; }
.dash-guard-bar i { width:8px; height:14px; border-radius:2px; background:#e5e7eb; display:block; }
.dash-guard-bar i.is-on { background:#22c55e; }
/* 소프트 룰 4종도 «켜짐»은 켜짐이다 — 게이지는 «얼마나 켜져 있나»를 보는 것이라 흐리게 두면 13/13 인데 안 찬 것처럼 보인다(실측). 구분은 툴팁이 맡는다. */
.dash-guard-num { font-weight:700; color:var(--svx-ink); font-variant-numeric:tabular-nums; }
.dash-card-spaced { margin-bottom:14px; }
.dash-card-meta-inline { color:var(--svx-mute); font-weight:400; }
/* 7dex 영역별 상태 — 카드 태그 + 운영 유틸 7열 그리드 / 우측 컬럼 높이 stretch */
.dash-row2 > .dash-card:has(.dash-7dex-tags) { display:flex; flex-direction:column; }
.dash-row2 > .dash-card:has(.dash-7dex-tags) > .dash-card-head { flex-shrink:0; }
.dash-7dex-tags { flex:1; display:grid; grid-template-columns:repeat(7, 1fr); grid-template-rows:repeat(2, 1fr); gap:8px; }
.dash-7dex-tag { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px 8px; background:var(--svx-bg-alt); border-radius:8px; text-decoration:none; color:var(--svx-ink); line-height:1.2; transition:background .15s ease, transform .1s ease, box-shadow .15s ease; min-width:0; min-height:0; text-align:center; position:relative; }
.dash-7dex-tag:hover { background:#eef2ff; transform:translateY(-2px); box-shadow:0 4px 12px rgba(91,33,182,.12); }
/* 권한 없는 카드는 <a> 대신 <span> 으로 나온다 — 숫자는 보여 주되 «누를 수 있는 것처럼» 보이면 안 되므로 커서·호버 반응을 죽인다. ⚠️ 흐리게(opacity) 처리하지 않는다 — 값을 읽는 것은 허용된 동작이고, 흐리면 «고장» 으로 읽힌다. */
.dash-7dex-tag[aria-disabled="true"], .dash-cstat[aria-disabled="true"] { cursor:default; }
.dash-7dex-tag[aria-disabled="true"]:hover { background:inherit; transform:none; box-shadow:none; }
.dash-cstat[aria-disabled="true"]:hover { background:inherit; transform:none; box-shadow:none; }
.dash-7dex-tag .no { position:absolute; top:6px; left:8px; font-size:.7rem; font-weight:700; color:var(--svx-mute); }
.dash-7dex-tag .icon { font-size:1.6rem; line-height:1; }
.dash-7dex-tag .label { font-size:.95rem; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* §2026-09-25 — 7열(1281px↑)은 칸이 약 90px 라 「GEO+LLMO」「MMO+VEO」가 「GEO+LL…」로 잘렸다(필요 84px · 안쪽 74px) → 좌우 여백과 글자를 한 단계 줄인다. */
@media (min-width: 1281px) { .dash-7dex-tag { padding-left:5px; padding-right:5px; } .dash-7dex-tag .label { font-size:.9rem; letter-spacing:-.01em; } }
.dash-7dex-tag .pct { font-size:1.4rem; font-weight:700; color:#5b21b6; font-variant-numeric:tabular-nums; line-height:1; }
.dash-7dex-tag.is-extend { background:var(--svx-bg-alt); }
.dash-7dex-tag.is-extend .pct { color:#6d28d9; }
.dash-7dex-tag.is-utility { background:var(--svx-bg-alt); }
.dash-7dex-tag.is-utility .status { font-size:.8rem; font-weight:600; padding:3px 10px; border-radius:99px; }
.dash-7dex-tag.is-utility .status.is-ok { background:#dcfce7; color:#166534; }
.dash-7dex-tag.is-utility .status.is-bad { background:#fee2e2; color:#991b1b; }
.dash-7dex-tag.is-utility .status.is-mute { background:#ede9fe; color:#5b21b6; }
@media (max-width: 1280px) { .dash-7dex-tags { grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:repeat(4, 1fr); } }
@media (max-width: 768px) { .dash-7dex-tags { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(7, 1fr); } }
/* §2026-09-24 — 카드 21개(점수 14 + 바로가기 7)인데 위 두 규칙은 줄을 7·4줄만 «같은 높이» 로 지정해, 넘친 줄(바로가기)이 내용 높이로 늘어났다 (실측 390px: 점수 69px · 바로가기 99px). 줄 수를 적지 않고 «모든 줄 같은 높이» 로 둔다. PC(7열 2줄 + 1줄)는 건드리지 않는다. */
@media (max-width: 1280px) { .dash-7dex-tags { grid-template-rows:none; grid-auto-rows:1fr; } }
/* §2026-09-25 — 2열인데 개수가 홀수면 마지막 카드 하나가 반쪽에 남아 옆이 빈다 → 마지막 카드는 한 줄 전체. 개수가 짝수면 아무 일도 없다. */
@media (max-width: 1280px) { .dash-7dex-tags > :last-child:nth-child(4n+1) { grid-column:1 / -1; } }
@media (max-width: 768px) { .dash-7dex-tags > :last-child:nth-child(odd) { grid-column:1 / -1; } }
/* 알림 + 날씨 (우측 컬럼) */
.dash-notify { list-style:none; margin:0; padding:0; font-size:.9375rem; }
.dash-notify li { padding:8px 0; border-bottom:1px solid var(--svx-line); line-height:1.5; }
.dash-notify li:last-child { border-bottom:0; }
.dash-notify-ago { color:var(--svx-mute); font-size:.8125rem; }
.dash-row2 > div:has(.dash-clock-weather) { display:flex; flex-direction:column; }
.dash-clock-weather { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:14px; min-height:340px; }
@media (max-width: 900px) { .dash-clock-weather { grid-template-columns:minmax(0, 1fr); min-height:auto; } }
.dash-clock { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:340px; box-sizing:border-box; }
.dash-weather { min-height:340px; box-sizing:border-box; }
.dash-clock .dash-card-head { width:100%; }
.dash-clock-date { font-size:1.2rem; color:var(--svx-mute); font-weight:500; margin:16px 0 15px; font-variant-numeric:tabular-nums; }
.dash-clock-time { font-family:'Menlo','Monaco','Cascadia Code',monospace; font-size:2.4rem; font-weight:700; color:var(--svx-ink); line-height:1; letter-spacing:.04em; font-variant-numeric:tabular-nums; margin-bottom:auto; }
/* 하단 미니 달력 — 며칠·무슨요일 확인용 (오늘 강조) */
.dash-clock-cal { width:100%; margin-top:24px; padding-top:16px; border-top:1px solid var(--svx-line); }
.dash-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px 2px; }
.dash-cal-dow { text-align:center; font-size:.7rem; font-weight:600; color:var(--svx-mute); padding:2px 0 4px; }
.dash-cal-dow.is-sun { color:#dc2626; }
.dash-cal-dow.is-sat { color:#2563eb; }
.dash-cal-cell { text-align:center; font-size:.78rem; color:var(--svx-ink); padding:4px 0; border-radius:7px; font-variant-numeric:tabular-nums; line-height:1.2; }
.dash-cal-cell.is-empty { visibility:hidden; }
.dash-cal-cell.is-sun { color:#dc2626; }
.dash-cal-cell.is-sat { color:#2563eb; }
.dash-cal-cell.is-today { background:var(--svx-primary); color:#fff; font-weight:700; }
.dash-weather { display:flex; flex-direction:column; gap:10px; min-height:340px; box-sizing:border-box; }
.dash-weather-form { margin:0; display:inline-flex; align-items:center; gap:4px; }
.dash-weather-form select { width:90px; padding:4px 6px; border:1px solid var(--svx-line); border-radius:5px; font-size:.75rem; font-family:inherit; background:var(--svx-card); cursor:pointer; }
.dash-weather-form select:hover { border-color:var(--svx-primary); }
.dash-weather-save { padding:3px 8px; background:var(--svx-primary); color:#fff; border:0; border-radius:5px; font-size:.75rem; cursor:pointer; }
.dash-weather-empty { color:var(--svx-mute); font-size:.875rem; line-height:1.6; padding:8px 0; margin:0; }
/* ⚠️ 이 줄과 아래 두 곳의 출처·빈상태 메타는 종전 `#bbb` 였다 — 흰 카드 위에서 **대비 1.92:1** 로 사실상 안 보였다(2026-09-23 실측·사용자 지적). 관리자의 흐린 글자 정본 톤인 `#888`(3.54:1)로 맞췄다. ⚠️ `#bbb` 로 되돌리지 말 것. 다크는 `darkmode.css` 가 `--svx-d-mute-deep` 로 따로 덮으므로 무관하다. */
.dash-weather-empty .dash-weather-meta { color:#888; font-size:.75rem; display:block; margin-top:4px; }
.dash-weather-now { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 0; }
.dash-weather-icon { font-size:2.8rem; line-height:1; }
.dash-weather-temp { font-size:1.8rem; font-weight:700; color:var(--svx-ink); line-height:1; font-variant-numeric:tabular-nums; }
.dash-weather-desc { font-size:0.85rem; color:var(--svx-mute); flex:1 1 auto; min-width:0; word-break:keep-all; }
.dash-weather-week { flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; align-content:stretch; }
.dash-weather-day { background:var(--svx-bg-alt); border-radius:4px; padding:16px 6px; text-align:center; display:flex; flex-direction:column; gap:6px; font-size:1rem; justify-content:center; }
.dash-weather-day.is-today { background:#eef2ff; }
.dash-weather-day .dow { color:var(--svx-mute); font-size:.95rem; }
.dash-weather-day .ico { font-size:2.2rem; line-height:1; }
.dash-weather-day .t { font-weight:600; color:var(--svx-ink); font-variant-numeric:tabular-nums; font-size:0.95rem; }
.dash-weather-meta { font-size:.7rem; color:#888; margin:0; word-break:keep-all; }
/* §2026-09-25 — PC 넓은 화면(1280 이상)에서는 시계 카드가 먼저 폭을 가져가 날씨 카드가 약 190px 로 좁아진다. 그 폭에서 제목줄(제목 + 도시 선택)과 현재날씨 줄이 줄바꿈을 못 해 「날씨」가 아이콘 아래로 떨어지고 「Overcast」가 카드 밖으로 나가며 「습/도」가 쪼개졌다. 좁을 때만 다음 줄로 내려가게 한다(넓으면 종전과 같다). ⚠️ 설명 칸은 flex-basis 가 0 이면 줄바꿈 판정에서 폭 0 으로 취급돼 절대 다음 줄로 안 간다 — auto 여야 한다. */
.dash-weather .dash-card-head { flex-wrap:wrap; gap:6px 8px; }
.dash-weather .dash-card-head h3 { white-space:nowrap; }
/* 트래픽 + 시스템 점검 (하단 좌우) */
.dash-traffic { padding:18px 20px; }
.dash-traffic-chart { display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:stretch; }
.dash-traffic-yaxis { display:flex; flex-direction:column; justify-content:space-between; padding:2px 0 22px; font-size:.7rem; color:var(--svx-mute); font-variant-numeric:tabular-nums; text-align:right; min-width:24px; }
.dash-traffic-plot { display:flex; flex-direction:column; gap:6px; min-width:0; }
.dash-traffic-line { width:100%; height:120px; display:block; }
.dash-traffic-grid { stroke:var(--svx-line); }
.dash-traffic-dates { display:flex; justify-content:space-between; padding:0 4px; font-size:.7rem; color:var(--svx-mute); font-variant-numeric:tabular-nums; }
.dash-traffic-dates span { flex:1; text-align:center; min-width:0; }
.dash-traffic-dates span:first-child { text-align:left; }
.dash-traffic-dates span:last-child { text-align:right; }
.dash-traffic-dates span.is-hidden { visibility:hidden; }
/* 빈 상태 여백 축소 — 40px 상하가 카드를 과하게 늘려 화면이 비어 보였다 */
.dash-traffic-empty { padding:18px 0 20px; text-align:center; color:var(--svx-mute); font-size:.95rem; line-height:1.6; }
.dash-traffic-empty-meta { display:block; margin-top:4px; color:#888; font-size:.8125rem; }
.dash-recent-posts { list-style:none; margin:0; padding:0; }
.dash-recent-posts li { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--svx-line); font-size:.9375rem; }
.dash-recent-posts li:last-child { border-bottom:0; }
.dash-recent-posts a { color:var(--svx-ink); text-decoration:none; flex:1; }
.dash-recent-posts a:hover { color:#7c3aed; }
.dash-recent-posts .meta { color:var(--svx-mute); font-size:.8125rem; white-space:nowrap; margin-left:12px; }
.dash-kv { list-style:none; margin:0; padding:0; font-size:.9375rem; }
.dash-kv li { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--svx-line); }
.dash-kv li:last-child { border-bottom:0; }
.dash-kv li span { color:var(--svx-mute); }
.dash-kv li strong { color:var(--svx-ink); font-weight:600; }
/* 전체 콘텐츠 현황 — 4×2 8칸(가로배열·얇은 셀). gap 1px + line 배경 = 셀 구분선. */
.dash-content-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--svx-line); border:1px solid var(--svx-line); border-radius:8px; overflow:hidden; margin-top:6px; }
.dash-cstat { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; background:var(--svx-card); min-width:0; text-decoration:none; transition:background .12s; }
.dash-cstat:hover { background:var(--svx-bg-alt); }
.dash-cstat:hover .value { color:#5b21b6; }
.dash-cstat .label { font-size:.82rem; color:var(--svx-mute); white-space:nowrap; }
.dash-cstat .label .sub { font-size:.68rem; opacity:.7; margin-left:1px; }
.dash-cstat .value { font-size:1.02rem; font-weight:700; color:var(--svx-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dash-cstat .value .unit { font-size:.72rem; font-weight:500; color:var(--svx-mute); }
.dash-cstat.is-multi .value { font-size:.8rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:720px) { .dash-content-grid { grid-template-columns:repeat(2,minmax(0, 1fr)); } }
.dash-bar-wrap { width:100%; height:8px; background:#eee; border-radius:4px; margin:8px 0 4px; overflow:hidden; }
.dash-bar { height:100%; background:#7c3aed; border-radius:4px; transition:width .3s ease; }
.dash-meta { margin:10px 0 0; padding-top:10px; border-top:1px solid var(--svx-line); font-size:.8125rem; color:var(--svx-mute); }
.dash-recent-act { list-style:none; margin:0; padding:0; font-size:.8125rem; }
.dash-recent-act li { padding:6px 0; border-bottom:1px solid var(--svx-line); line-height:1.5; }
.dash-recent-act li:last-child { border-bottom:0; }
.dash-recent-act .who { font-weight:600; color:var(--svx-ink); }
.dash-recent-act .ago { color:var(--svx-mute); }
.dash-empty { color:var(--svx-mute); font-size:.9375rem; padding:8px 0; text-align:center; }
.dash-sys { background:var(--svx-card); padding:18px 20px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.dash-sys h3 { margin:0 0 12px; font-size:1rem; font-weight:600; }
.dash-sys ul { list-style:none; margin:0; padding:0; font-size:.9375rem; line-height:1.85; }
.dash-sys li { display:flex; align-items:center; gap:8px; }
.dash-sys .ok { color:#16a34a; }
.dash-sys .warn { color:#d97706; }
.dash-sys .err { color:#dc2626; }
.dash-sys li { flex-wrap:wrap; }
.dash-sys-form { display:inline-block; margin:0 0 0 6px; }
.dash-sys-form input[type=date] { padding:2px 6px; border:1px solid var(--svx-line); border-radius:4px; font-size:.8125rem; font-family:inherit; cursor:pointer; }
.dash-sys-form input[type=date]:hover { border-color:var(--svx-primary); }
/* 7DEX 사용정보 — S 가 직접 적는 한 줄 메모. */
.dash-sys-li-note { align-items:center; }
.dash-note-form { display:inline-flex; flex:1; min-width:0; margin-left:6px; }
.dash-note-input { flex:1; min-width:0; font-size:.8125rem; padding:3px 9px; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); color:var(--svx-ink); }
.dash-note-input:focus { outline:none; border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.12); }
/* SSL 값 출처 뱃지 — 실측인지 수기값인지 화면이 스스로 밝힌다. */
.dash-ssl-auto, .dash-ssl-manual, .dash-ssl-free { margin-left:6px; font-size:.6875rem; font-weight:700; letter-spacing:.02em; border-radius:99px; padding:2px 9px; white-space:nowrap; }
.dash-ssl-auto { background:#dcfce7; color:#166534; }
.dash-ssl-manual { background:#fef3c7; color:#92400e; }
.dash-ssl-free { background:var(--svx-bg-alt); color:var(--svx-mute); border:1px solid var(--svx-line); }
.dash-sys-meta { color:var(--svx-mute); font-size:.8125rem; margin-left:6px; }
/* SSL 설치일 = 캘린더 아이콘 하나만 노출(S 전용), 실제 date input 은 숨기고 아이콘 클릭 시 showPicker 로 연다. */
.dash-ssl-date-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.dash-ssl-cal-btn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:6px; padding:0; border:1px solid var(--svx-line,#e5e7eb); border-radius:6px; background:var(--svx-card,#fff); color:var(--svx-mute,#64748b); cursor:pointer; vertical-align:middle; }
.dash-ssl-cal-btn:hover { border-color:var(--svx-primary,#7c3aed); color:var(--svx-primary,#7c3aed); }
.dash-ssl-cal-btn i { font-size:.8rem; line-height:1; }
/* ⚠️ 트랙은 `1fr`(= minmax(auto,1fr)) 이 아니라 `minmax(0,1fr)` 이다 — `1fr` 은 바닥이 «최소 콘텐츠 폭» 이라 칸이 내용보다 작아지지 못하고 그리드가 화면 밖으로 부푼다(§12-43). 부모가 잘라내기만 하면 가로 스크롤조차 안 생겨 «그냥 잘린» 모습이 된다(실측 390px: 카드 403px). PC(>1024)는 이 블록 밖이라 무영향. */
@media (max-width: 1024px) { .dash-row4, .dash-row3, .dash-row5 { grid-template-columns:repeat(2, minmax(0, 1fr)); } .dash-row5 .dash-sq { display:none; } .dash-row2 { grid-template-columns:minmax(0, 1fr); } }
/* ⚠️ 이 640 블록은 **한 번도 걸린 적이 없었다** — 뒤에 오는 `@media (max-width:768px)` 관리자 셸 블록이 같은 특이도로 `.dash-row4, .dash-row3` 를 2열로 되살려 덮고 있었다(§12-84 의 전형). 그래서 390px 폰에서도 카드가 2열(카드당 약 180px)로 눌렸다. 그쪽 선언을 걷어내 원 의도를 복원했다 — **폰 = 1열.** 겹치는 선언을 그 블록에 다시 만들지 말 것. */
/* ⚠️ **KPI 4칸은 1열로 내리지 않는다 — 2x2 가 사용자 지시다**(2026-09-23). 숫자 하나짜리 카드라 폭이 절반이어도 읽히고, 1열로 두면 화면이 불필요하게 길어진다. `.dash-row3` 는 본문이 든 큰 카드라 1열이 맞다 — 둘을 같이 적지 말 것. */
/* 가로형 4칸이 2x2 로 좁아지면(카드 안쪽 약 130px) 한 줄에 못 들어간다 — 항목명을 윗줄로 올리고 아랫줄에 «증감 ··· 값» 을 둔다. 자동 줄바꿈에 맡기면 값만 혼자 아랫줄로 떨어지는 어색한 모양이 된다. */
@media (max-width: 640px) { .dash-row4, .dash-row5 { grid-template-columns:repeat(2, minmax(0, 1fr)); } .dash-row3 { grid-template-columns:minmax(0, 1fr); } .dash-stat .label { flex-basis:100%; } }
/* ── 7DEX 메인 — 차트 2단(좌 세로막대 / 우 8각형 밸런스) + 카드 그리드 ── */
.sdx-charts { display:grid; grid-template-columns:minmax(0, 7fr) minmax(min(400px, 100%), 3fr); gap:1rem; margin-bottom:1.5rem; }
/* §2026-09-25 — 레이더 칸 최소 400px. 1440px 에서 3fr 은 약 348px 라, 이름 여백을 넣은 레이더가 그만큼 작아졌다. */
.sdx-chart-box { background:var(--svx-card); border-radius:8px; padding:1.2rem 1.4rem; display:flex; flex-direction:column; }
.sdx-chart-box h3 { margin:0 0 1.6rem; font-size:1rem; }
/* 세로막대 차트 */
.sdx-vbar-area { position:relative; flex:1; min-height:220px; display:flex; align-items:flex-end; gap:.4rem; padding:0 .2rem; margin-left:1.6rem; border-left:1px solid #e5e5e7; border-bottom:1px solid #e5e5e7; }
.sdx-vbar-grid { position:absolute; left:-1.6rem; right:0; top:0; bottom:0; pointer-events:none; }
.sdx-vbar-grid-line { position:absolute; left:1.6rem; right:0; border-top:1px dashed var(--svx-line); height:0; }
.sdx-vbar-grid-label { position:absolute; right:calc(100% - 1.6rem + 6px); transform:translateY(-50%); font-size:.65rem; color:var(--svx-mute); white-space:nowrap; text-align:right; }
/* §2026-09-25 — 종전엔 폭 1.4rem 상자 안에 오른쪽 정렬이었는데 「100%」가 그보다 넓어 오른쪽으로 넘쳐 세로축 선과 겹쳤다. 이제 라벨의 오른쪽 끝을 축 선 6px 앞에 고정하고, 넘치는 글자는 왼쪽(카드 안쪽 여백)으로 자란다. */
/* 「0」 눈금은 맨 아래(top:100%)다. 마크업이 쓰는 sdx-top-100 이 CSS 에 정의가 없어(유령 클래스 — §12-53) 「0」이 맨 위 「100%」 자리에 겹쳐 찍혀 「100%」가 「100%0」처럼 보였다. */
.sdx-vbar-grid-label.sdx-top-100 { top:100%; }
.sdx-vbar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:0; height:100%; position:relative; }
.sdx-vbar .pct { position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(-3px); font-size:.65rem; font-weight:600; color:#5b21b6; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* EXTEND = CORE(#5b21b6)와 같은 보라 계열의 한 톤 밝은 색. 빗금으로만 층을 구분하고 색으로 «덜 중요»를 말하지 않는다 — 관문이냐 확장이냐의 차이지 경중이 아니다. */
.sdx-vbar.is-extend .pct { color:#6d28d9; }
.sdx-vbar .bar { width:100%; max-width:32px; background:#5b21b6; border-radius:3px 3px 0 0; transition:height .4s; min-height:1px; cursor:pointer; }
.sdx-vbar.is-extend .bar { background:#6d28d9; background-image:repeating-linear-gradient(45deg, #8b5cf6 0 4px, #6d28d9 4px 9px); }
.sdx-vbar:hover .bar { filter:brightness(1.15); }
.sdx-vbar-xlabels { display:flex; gap:.4rem; padding:.5rem .2rem 0; margin-left:1.6rem; }
.sdx-vbar-xlabels .x { flex:1; text-align:center; font-size:.7rem; color:#3a3d44; min-width:0; line-height:1.25; word-break:keep-all; overflow-wrap:break-word; }
.sdx-vbar-header { display:flex; justify-content:space-between; align-items:center; gap:.8rem; margin-bottom:1.6rem; }
.sdx-vbar-header h3 { margin:0; }
/* ⚠️ **이 세 블록은 반드시 위 기본 규칙들 «뒤» 에 둔다.** 미디어쿼리는 특이도를 올리지 않으므로, 앞에 두면 같은 특이도의 기본 선언(.sdx-vbar-header margin-bottom / .sdx-vbar-area gap / .sdx-vbar-xlabels .x font-size·word-break / .pct font-size)에 **조용히 진다**(§12-80). 실측으로 당했다 — 처음엔 앞에 뒀는데 `writing-mode` 처럼 «기본 규칙에 선언이 없던» 속성만 먹고 여백·간격·글자크기 6개가 전부 죽어 있었다. 화면은 «대충 맞아 보여서» 눈으로는 못 잡는다. */
/* ⚠️ 트랙이 `1fr` 이면 칸이 «최소 콘텐츠 폭» 아래로 못 줄어든다(§12-43). 이 차트는 x축 라벨 14개가 `word-break:keep-all` 이라 단어가 안 쪼개져 최소폭을 크게 요구한다 → 1열로 접어도 칸이 **542px** 로 부풀어, 390px 폰에서 **관리자 본문 전체가 가로 스크롤**(390→560)됐다. 차트 하나 때문에 모든 화면이 좌우로 흔들린 것이다. ⚠️ 그 넘침은 «문서 가로 스크롤» 로는 안 잡힌다 — main 이 `overflow:auto` 라 거기서 흡수되기 때문이다. main 의 clientWidth/scrollWidth 를 같이 재야 보인다. */
/* ⚠️ 경계가 880px 이면 **881~1024 구간이 2열로 남아** 좌측 차트가 550px, 라벨 칸이 27px 이 된다 (실측 1024px: 라벨 14개가 전부 27x56 으로 쌓였다). 1024 까지 1열로 내리면 칸이 약 50px 이 되어 라벨이 가로로 들어간다 — 그래서 아래 «세로 라벨» 은 640 이하에만 둔다. PC(1025 이상)는 2열 그대로다. */
@media (max-width: 1024px) { .sdx-charts { grid-template-columns:minmax(0, 1fr); } .sdx-chart-box { min-width:0; } }
/* 칸이 화면 안으로 들어오면 이번엔 라벨 칸이 **14px** 이 된다(390px 기준: 본문 283px ÷ 14칸). 거기에 「Sitelink」를 가로로 넣으면 한 글자씩 98px 로 쌓인다 — 넣을 수 있는 폭이 아니다. 그래서 **막대 차트 관행대로 라벨을 세운다**(vertical-rl + 180° = 아래에서 위로 읽기). 카드 이름 14개가 전부 라틴 문자·숫자라 누워도 그대로 읽힌다(SEO·YMYL·UA-403·Sitelink…). ⚠️ 가로 스크롤로 푸는 방법은 쓰지 않았다 — 막대(.sdx-vbar-area)와 라벨(.sdx-vbar-xlabels)이 **형제라 각자 스크롤되면 x 위치가 어긋난다.** 둘을 감싸는 래퍼가 없어 마크업을 건드려야 하는데, 기능 배선을 손대지 않는 것이 이번 작업의 전제다. ⚠️ **막대와 라벨은 `gap`·`margin-left` 가 같아야 x 위치가 맞는다** — 한쪽만 줄이면 라벨이 어긋난다. */
/* ⚠️ **§2026-09-23 정정 — 위 주석의 «1024 까지 1열로 내리면 칸이 약 50px 이 되어 라벨이 가로로 들어간다» 는 실측과 어긋났다.** 768px 에서 라벨 칸은 41px 이고 「UA-403」은 11.2px 글자로 약 44px 를 요구해 **하이픈에서 쪼개졌다**(「Schema」·「GEO + LLMO」도 같이 2줄). `word-break:keep-all` 은 하이픈 줄바꿈을 막지 않는다. 그래서 라벨 세우기를 **1024 까지** 올린다 — PC(1025 이상)만 가로다(§12-85 「경계값이 1024 를 안 덮으면 태블릿 가로가 통째로 빈다」와 같은 실수였다). ⚠️ 이 블록은 640 블록 «앞» 에 둔다 — 640 이 글자크기·간격을 더 조이는 쪽이라 뒤에서 덮어야 한다. ⚠️ `gap` 은 건드리지 않는다. 막대와 라벨의 `gap` 이 어긋나면 x 위치가 밀린다(아래 주석). */
@media (max-width: 1024px) { .sdx-vbar-xlabels { align-items:flex-start; } .sdx-vbar-xlabels .x { writing-mode:vertical-rl; transform:rotate(180deg); text-orientation:mixed; white-space:nowrap; word-break:normal; overflow-wrap:normal; letter-spacing:0; margin:0 auto; } }
@media (max-width: 640px) { .sdx-vbar-area, .sdx-vbar-xlabels { gap:.2rem; } .sdx-vbar-xlabels { align-items:flex-start; } .sdx-vbar-xlabels .x { writing-mode:vertical-rl; transform:rotate(180deg); text-orientation:mixed; white-space:nowrap; word-break:normal; overflow-wrap:normal; font-size:.62rem; letter-spacing:0; margin:0 auto; } }
/* 막대 위 퍼센트도 같은 이유로 겹친다 — `white-space:nowrap` 인 「100%」가 14px 칸을 넘어 이웃을 덮어 「100%75%100%100%…」로 붙어 읽히지 않았다(화면으로 확인). 라벨과 같은 방향으로 세운다. ⚠️ **기존 transform 을 덮어쓰지 말 것** — `translateX(-50%)`(가운데 정렬)와 `translateY(-3px)`(막대와 간격)를 그대로 두고 뒤에 rotate 만 더한다. 빼면 숫자가 막대 왼쪽으로 밀리고 막대에 달라붙는다. ⚠️ 세운 숫자는 약 22px 를 차지한다 — 100% 막대 위로 나가므로 헤더 아래 여백을 그만큼 확보한다. 안 하면 차트 꼭대기에서 숫자가 잘린다. */
@media (max-width: 640px) { .sdx-vbar .pct { writing-mode:vertical-rl; transform:translateX(-50%) translateY(-3px) rotate(180deg); font-size:.55rem; } .sdx-vbar-header { margin-bottom:2.8rem; } }
.sdx-pdf-btn { display:inline-flex; align-items:center; gap:.4em; padding:.4rem .9rem; background:#7c3aed; color:#fff !important; font-size:.8rem; font-weight:500; border-radius:6px; text-decoration:none; white-space:nowrap; line-height:1.2; transition:background .15s, transform .1s, box-shadow .15s; }
.sdx-pdf-btn:hover { background:#6d28d9; transform:translateY(-1px); box-shadow:0 4px 12px rgba(124,58,237,.3); }
.sdx-pdf-btn--header { padding:.55rem 1.2rem; font-size:.95rem; font-weight:600; box-shadow:0 2px 8px rgba(124,58,237,.18); }
@media (max-width: 768px) { .sdx-pdf-btn--header { padding:.45rem .9rem; font-size:.85rem; } }
/* 콘텐츠 상세 타이틀 옆 — 외부 페이지 바로열기 아이콘 (심플 사각) */
.sdx-title-link { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:4px; flex:0 0 auto; border:1px solid var(--svx-line); border-radius:6px; background:#fff; color:var(--svx-mute); font-size:.88rem; line-height:1; text-decoration:none; vertical-align:middle; transition:border-color .15s, color .15s, background .15s; }
.sdx-title-link:hover { border-color:var(--svx-primary); color:var(--svx-primary); background:var(--svx-primary-soft,#f5f3ff); }
body[data-theme="dark"] .sdx-title-link { background:rgba(255,255,255,.04); }
/* 8각형 AI 밸런스 차트 */
.sdx-octagon-chart { align-items:center; justify-content:flex-start; }
.sdx-octagon-chart > h3 { align-self:stretch; }
.sdx-octagon-chart svg { width:100%; height:auto; max-width:400px; display:block; margin:0 auto; flex:1; min-height:0; }
/* viewBox 가 400 폭(좌우 여백 포함) — 레이더 자체는 종전과 같은 340 */
.sdx-octagon-chart .grid-poly { fill:none; stroke:#e5e5e7; stroke-width:1; }
.sdx-octagon-chart .grid-poly.is-100 { stroke:#d0d0d6; }
.sdx-octagon-chart .spoke { stroke:#e5e5e7; stroke-width:1; }
.sdx-octagon-chart .data-poly { fill:rgba(91,33,182,.22); stroke:#5b21b6; stroke-width:2; }
.sdx-octagon-chart .data-dot { fill:#5b21b6; }
.sdx-octagon-chart .vertex-label { font-size:11px; fill:#3a3d44; font-weight:600; font-family:inherit; }
.sdx-octagon-chart .vertex-pct { font-size:10px; fill:#888780; font-family:inherit; }
.sdx-octagon-chart .ring-label { font-size:8px; fill:#b8b8be; font-family:inherit; }
.sdx-balance-foot { font-size:.75rem; color:var(--svx-mute); margin:.8rem 0 0; }
/* 카드 그리드 (10 + 트렌드/유틸 분리) */
.sdx-section-title { font-size:1.1rem; color:#232323; font-weight:600; margin:1.5rem 0 .8rem; padding:0 .2rem; }
.sdx-section-title .hint { font-weight:400; color:#007288; font-size:1rem; }
.sdx-section-title .hint.is-mute { color:#777; }
/* 콘텐츠 관리 — CUSTOM(사용자 요청 기능) 영역. 타이틀 = 상단 페이지 헤더(h1)와 동일 폰트·색 + 하단 보더, 아래 카드 레이아웃 자리 */
.sdx-custom-section { margin-top:2.6rem; }
.sdx-custom-title { font-size:1.4rem; font-weight:700; color:var(--svx-ink); margin:0 0 1.1rem; padding-bottom:14px; border-bottom:1px solid var(--svx-line); }
.sdx-custom-title span { font-weight:400; color:var(--svx-mute); font-size:1rem; }
.sdx-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:1rem; margin-bottom:.5rem; grid-auto-rows:1fr; }
/* ⚠️ `1fr` 은 바닥이 «최소 콘텐츠 폭» 이라 칸이 내용보다 작아지지 못한다(§12-43). 실측 320px: 2열 칸이 144px 로 부풀어 카드 오른쪽 끝이 336 > 320 으로 잘렸다. 이 클래스는 §11 의 공용 카드 그리드라 7DEX·STATISTICS·AI-CHAT 인덱스가 **전부** 같이 겪는다. */
@media (max-width: 1280px) { .sdx-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
/* §2026-09-25 — 4열 구간에서 마지막 줄이 덜 차면(7장 = 4+3 · 14장 = …+2) 남은 카드가 줄을 채운다. 2열 구간은 아래 규칙이 대신한다. */
@media (min-width: 769px) and (max-width: 1280px) { .sdx-grid > :last-child:nth-child(4n+3), .sdx-grid > :nth-child(4n+1):nth-last-child(2), .sdx-grid > :nth-child(4n+2):last-child { grid-column:span 2; } .sdx-grid > :nth-child(4n+1):last-child { grid-column:1 / -1; } }
@media (max-width: 768px) { .sdx-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .sdx-grid > :last-child:nth-child(odd) { grid-column:1 / -1; } }
.sdx-card { background:var(--svx-card); border-radius:8px; padding:1.2rem 1.1rem; border:2px solid #5b21b6; transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; gap:.6rem; text-decoration:none; color:inherit; min-height:180px; }
.sdx-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(91,33,182,.18); }
.sdx-card.is-extend { border-style:solid; border-color:#8b5cf6; }
.sdx-card.is-locked { opacity:.55; cursor:not-allowed; border-color:#cbd5e1; }
.sdx-card.is-locked:hover { transform:none; box-shadow:none; }
/* §2026-10-02 잠긴 카드 = 공용 부품(svndex_card_lock_* · 콘텐츠·AI-CHAT·통계·CLICKFRAUD 첫 화면). 다크의 카드 hover 강조(darkmode.css · 0,3,1)가 잠긴 카드에도 걸려
   «누를 수 있는 카드» 처럼 보였다 — 라이트처럼 hover 에도 그대로 둔다. 키보드 초점은 보이게(누르면 안내가 뜨는 자리다). */
body[data-theme="dark"] .sdx-card.is-locked:hover { border-color:var(--svx-d-line); box-shadow:0 1px 3px rgba(0, 0, 0, .4); }
.sdx-card.is-locked:focus-visible { outline:2px solid var(--svx-primary); outline-offset:2px; }
/* §2026-10-02 대표님 «전부 맞춰» — 잠긴 바로가기 · 잠긴 단추 링크 · 권한 안내 한 줄(svndex_admin_quick_link · svndex_perm_note · permission.php).
   잠긴 것은 숨기지 않고 흐리게 + 자물쇠 · 누르면 플로팅 안내(layout.js data-svx-locked) · 안내 한 줄은 어느 화면에서나 같은 상자다. */
.svndex-quick-links a.is-locked, .sm-btn.is-locked { opacity:.55; cursor:not-allowed; }
.svndex-quick-links a.is-locked:hover { border-color:var(--svx-line); color:var(--svx-ink); background:var(--svx-card); }
body[data-theme="dark"] .svndex-quick-links a.is-locked:hover { background:var(--svx-d-card); border-color:var(--svx-d-line-strong); color:var(--svx-d-ink); }
.sm-btn.is-secondary.is-locked:hover { background:var(--svx-card); border-color:var(--svx-line); color:var(--svx-ink); }
body[data-theme="dark"] .sm-btn.is-secondary.is-locked:hover { background:var(--svx-d-bg-alt); color:var(--svx-d-ink); border-color:var(--svx-d-line-strong); }
.svndex-quick-links a.is-locked .svx-lock-ic, .sm-btn.is-locked .svx-lock-ic { font-size:12px; opacity:.85; }
.svndex-quick-links a.is-locked:focus-visible, .sm-btn.is-locked:focus-visible { outline:2px solid var(--svx-primary); outline-offset:2px; }
.svx-perm-note { display:flex; align-items:flex-start; gap:6px; margin:10px 0; padding:8px 12px; border-radius:8px; background:var(--svx-bg-alt); color:var(--svx-mute); font-size:.8rem; line-height:1.5; }
.svx-perm-note > i { flex:0 0 auto; font-size:.95rem; color:var(--svx-primary); margin-top:1px; }
body[data-theme="dark"] .svx-perm-note { background:var(--svx-d-bg-alt); color:var(--svx-d-mute); }
body[data-theme="dark"] .svx-perm-note > i { color:var(--svx-d-primary); }
.pop-slide-actions .svx-perm-note { margin:0 auto 0 0; padding:0; background:none; }
.svndex-tab.is-locked { opacity:.55; cursor:not-allowed; }
.svndex-tab.is-locked:hover { color:#6b6585; background:none; }
body[data-theme="dark"] .svndex-tab.is-locked:hover { color:var(--svx-d-mute); background:none; }
.svndex-tab.is-locked .svx-lock-ic { font-size:12px; }
.svndex-tab.is-locked:focus-visible { outline:2px solid var(--svx-primary); outline-offset:2px; }
.sdx-card-status.is-locked-badge { display:inline-flex; align-items:center; gap:3px; font-size:.7rem; font-weight:700; color:#64748b; padding:2px 8px; background:var(--svx-bg-alt); border-radius:99px; }
.sdx-card.is-utility { border-style:dashed; border-color:#888780; }
.sdx-card.is-utility:hover { box-shadow:0 4px 16px rgba(136,135,128,.22); }
.sdx-card .head { display:flex; justify-content:space-between; align-items:flex-start; gap:.4rem; }
.sdx-card .no { font-size:.7rem; font-weight:700; color:var(--svx-mute); padding:2px 8px; background:var(--svx-bg-alt); border-radius:99px; }
.sdx-card .pct { font-size:1.4rem; font-weight:700; color:var(--svx-primary); line-height:1; font-variant-numeric:tabular-nums; }
.sdx-card.is-extend .pct { color:#5b21b6; }
.sdx-card.is-utility .icon { font-size:1.6rem; line-height:1; }
/* 뱃지가 2개인 카드만 제목이 한 줄 내려가 다른 카드와 안 맞았다 — 가로로 눕히고 row-reverse 로 보조 뱃지를 왼쪽에 둔다(배열 첫 항목 = 주 상태 = 오른쪽 고정). */
.sdx-card.is-utility .status-stack { display:flex; flex-direction:row-reverse; align-items:center; gap:.3rem; flex-wrap:wrap; justify-content:flex-start; }
/* 상태 = 알약 뱃지 — 대시보드 유틸 카드와 같은 표기로 맞춘다. 맨 텍스트는 카드 배경에 묻혀 잘 안 보였다. */
.sdx-card.is-utility .status { font-size:.72rem; font-weight:700; line-height:1.2; white-space:nowrap; padding:3px 9px; border-radius:99px; background:#e5e7eb; color:#374151; }
.sdx-card.is-utility .status.is-ok { background:#dcfce7; color:#166534; }
.sdx-card.is-utility .status.is-bad { background:#fee2e2; color:#991b1b; }
.sdx-card.is-utility .status.is-mute { background:#ede9fe; color:#5b21b6; }
.sdx-card.is-utility .status.is-ok { color:#1a7c4a; }
.sdx-card.is-utility .status.is-bad { color:#c0392b; }
.sdx-card.is-utility .status.is-mute { color:#5b21b6; font-weight:600; }
.sdx-card .name { font-size:1.05rem; font-weight:600; margin:.2rem 0 0; }
.sdx-card .name .ⓘ { font-weight:400; color:#5b21b6; cursor:pointer; }
.sdx-card .desc { font-size:.8rem; color:var(--svx-mute); line-height:1.5; margin:0; }
.sdx-card .meta { font-size:.7rem; color:var(--svx-mute); margin-top:auto; }
/* sdx-card 공용 하위 컴포넌트 (정본) — 모든 모듈 카드 통일: head 아이콘 / 상태 뱃지 / 하단 KPI. STATISTICS / AI-CHAT / 향후 모듈이 동일 클래스 사용 (= 모듈별 중복 정의 금지). */
.sdx-card .head:has(i) { align-items:center; }
.sdx-card .head i { font-size:1.4rem; color:var(--svx-primary); line-height:1; }
.sdx-card-status { font-size:.7rem; padding:2px 8px; background:var(--svx-bg-alt); color:var(--svx-mute); border-radius:999px; font-weight:500; white-space:nowrap; }
.sdx-card-status.is-live { background:#dcfce7; color:#166534; }
/* content 카드 스키마 뱃지 + 상단 범례 — 카테고리별 색상(.cat-*) 공용 */
.sdx-content-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; }
.sdx-content-intro > p { flex:1 1 320px; min-width:0; }
.sdx-schema-legend { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; flex-wrap:wrap; }
.sdx-schema-legend-lbl { font-size:.66rem; font-weight:700; letter-spacing:.04em; color:var(--svx-mute); margin-right:2px; }
.sdx-card-seo { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; font-size:.72rem; font-weight:600; letter-spacing:.01em; padding:3px 9px; border-radius:999px; background:var(--svx-bg-alt); color:var(--svx-mute); border:1px solid var(--svx-line); }
.sdx-schema-legend .sdx-card-seo { margin-top:0; align-self:center; }
/* §2026-09-24 — 좁은 화면에서 범례가 아랫줄로 내려가면 «문단 아래 여백 16 + 줄 간격 16» 이 겹쳐 설명 아래 32px 가 비고, 범례는 카드에 **0px** 로 붙었다(실측 390px). 여백을 문단이 아니라 줄 전체의 아래에 둔다(한 줄일 때도 결과 16px 로 같다). */
@media (max-width: 1024px) { .sdx-content-intro { row-gap:10px; margin-bottom:16px; } .sdx-content-intro > p { margin-bottom:0; } }
/* 카테고리 색 (범례·카드 동일) */
.sdx-card-seo.cat-seo { background:#eff6ff; color:#2563eb; border-color:rgba(37,99,235,.28); }
.sdx-card-seo.cat-eeat { background:#ecfdf5; color:#059669; border-color:rgba(5,150,105,.28); }
.sdx-card-seo.cat-aeo { background:#f0f9ff; color:#0284c7; border-color:rgba(2,132,199,.28); }
body[data-theme="dark"] .sdx-card-seo { background:var(--svx-d-bg-alt); color:var(--svx-d-mute); border-color:var(--svx-d-line); }
body[data-theme="dark"] .sdx-card-seo.cat-seo { background:rgba(37,99,235,.14); color:#93c5fd; border-color:rgba(37,99,235,.34); }
body[data-theme="dark"] .sdx-card-seo.cat-eeat { background:rgba(5,150,105,.14); color:#6ee7b7; border-color:rgba(5,150,105,.34); }
body[data-theme="dark"] .sdx-card-seo.cat-aeo { background:rgba(2,132,199,.14); color:#7dd3fc; border-color:rgba(2,132,199,.34); }
.sdx-card-kpi { margin-top:auto; display:flex; align-items:baseline; gap:8px; padding-top:8px; border-top:1px dashed var(--svx-line); flex-wrap:wrap; }
.sdx-card-kpi strong { font-size:1.3rem; font-weight:700; color:var(--svx-primary); line-height:1; font-variant-numeric:tabular-nums; }
.sdx-card-kpi-lbl { font-size:.75rem; color:var(--svx-mute); }
.sdx-card-kpi-sub { font-size:.7rem; color:#64748b; margin-left:auto; }
body[data-theme="dark"] .sdx-card-status { background:var(--svx-d-bg-alt); color:var(--svx-d-mute); }
body[data-theme="dark"] .sdx-card-kpi { border-top-color:var(--svx-d-line); }
body[data-theme="dark"] .sdx-card-kpi-sub { color:var(--svx-d-mute); }
/* §2026-10-12 대표님 «권장값으로» — 관리자 흐린 글자 대비(밝은 화면 2.3~3.0:1 → 4.4~5.3:1 · 카드 보조 글자 · 잠김 표시 · 탭 숫자 · 빈 안내 · 입력 도움말).
   어두운 화면 = 어두운 바탕에 맞는 흐린 글자 토큰(진하게 한 밝은 값이 어두운 바탕에서는 오히려 흐려진다) */
body[data-theme="dark"] .sdx-card-status.is-locked-badge, body[data-theme="dark"] .svndex-tab small, body[data-theme="dark"] .ip-field-hint, body[data-theme="dark"] .ip-readonly, body[data-theme="dark"] .sdx-empty-60, body[data-theme="dark"] .sdx-empty-40, body[data-theme="dark"] .sdx-fs-11-9ca { color:var(--svx-d-mute); }
/* §2026-10-12 — 다크 짝이 없어 카드 숫자가 밝은 화면 보라(#7c3aed) 그대로였다(다크 카드 위 2.87:1 · STATISTICS·AI-CHAT·CLICKFRAUD 카드 공통). */
body[data-theme="dark"] .sdx-card-kpi strong { color:var(--svx-d-primary); }
/* ── 7DEX 카드 공통 — 헤더(이름 + %) · sub 섹션 · 푸터 ── */
.svndex-card-header { background:var(--svx-card); border-radius:8px; padding:1rem 1.4rem; margin-bottom:1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; border-left:4px solid #5b21b6; }
.svndex-card-header.is-extend { border-left-color:#8b5cf6; }
.svndex-card-header h2 { margin:0; font-size:1.15rem; }
.svndex-card-header h2 .no { color:var(--svx-mute); font-weight:400; margin-right:.4em; }
.svx-tail { white-space:nowrap; }
/* §2026-09-25 — 마지막 낱말 + 붙는 부품 한 덩어리 (helper.php svndex_h_tail) */
.svx-rpt .pct, .svx-rpt .st-measure { white-space:nowrap; }
/* 리포트 점수·「측정 전」이 폰에서 「측정 / 전」으로 갈렸다 */
.svndex-card-header .pct { font-size:1.6rem; font-weight:700; color:#5b21b6; line-height:1; font-variant-numeric:tabular-nums; }
.svndex-card-header.is-extend .pct { color:#6d28d9; }
.svndex-sub { background:var(--svx-card); border-radius:8px; padding:1.2rem 1.4rem; margin-bottom:1rem; }
.svndex-sub-title { margin:0 0 .3rem; font-size:1rem; }
.svndex-sub-purpose { margin:0 0 1rem; font-size:.85rem; color:var(--svx-mute); }
.svndex-card-footer { margin-top:1.5rem; padding:1rem 1.4rem; background:var(--svx-bg-alt); border-radius:8px; display:flex; justify-content:space-between; align-items:center; }
/* ── 모듈 공통 푸터 — 7DEX · 통계 · AI챗봇 상세 하단 「다른 영역 바로가기」 ── */
.svndex-module-footer { margin-top:28px; padding-top:20px; border-top:1px dashed var(--svx-line); }
.svndex-module-footer h3 { margin:0 0 12px; font-size:.78rem; color:var(--svx-mute); font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
.svndex-quick-links { display:flex; flex-wrap:wrap; gap:8px; }
.svndex-quick-links a { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:999px; font-size:12.5px; color:var(--svx-ink); text-decoration:none; transition:border-color .12s ease, color .12s ease, background .12s ease; }
.svndex-quick-links a:hover { border-color:var(--svx-primary); color:var(--svx-primary-d); background:#faf9ff; }
.svndex-quick-links a i { font-size:14px; opacity:.75; }
.svndex-quick-links .svndex-quick-back { background:var(--svx-primary); color:#fff; border-color:var(--svx-primary); }
.svndex-quick-links .svndex-quick-back:hover { background:var(--svx-primary-d); border-color:var(--svx-primary-d); color:#fff; }
.svndex-quick-links .is-active { border-color:var(--svx-primary); color:var(--svx-primary-d); background:#faf9ff; pointer-events:none; }
body[data-theme="dark"] .svndex-module-footer { border-color:var(--svx-d-line-strong); }
body[data-theme="dark"] .svndex-quick-links a { background:var(--svx-d-card); border-color:var(--svx-d-line-strong); color:var(--svx-d-ink); }
body[data-theme="dark"] .svndex-quick-links a:hover { background:rgba(124,58,237,.10); }
/* sub 헤더 우측 [M][P][S] 가시성 뱃지 (svndex_render_perm_badges) */
.svndex-sub-title { display:flex; align-items:center; gap:.5rem; }
.svndex-perm-badges { display:inline-flex; align-items:center; gap:4px; margin:0 0 0 auto; padding:0; border:0; background:transparent; }
.svndex-perm-badges form { margin:0; }
.svndex-perm-badge { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:22px; padding:0 7px; border-radius:99px; font-size:.7rem; font-weight:700; line-height:1; letter-spacing:.04em; box-shadow:0 1px 2px rgba(0,0,0,.08); border:1px solid transparent; transition:filter .15s ease, opacity .15s ease, transform .12s ease; }
/* 활성 (is-on) — 권한별 색상 */
.svndex-perm-badge.is-on { background:linear-gradient(135deg,#fde68a,#f59e0b); color:#7c2d12; border-color:#f59e0b; }
/* 비활성 (is-off) — 흑백 + opacity */
.svndex-perm-badge.is-off { background:#e5e7eb; color:#6b7280; border-color:#d1d5db; filter:grayscale(1); opacity:.5; }
/* 클릭 가능 (S 진입 시 M/P 뱃지) */
.svndex-perm-badge.is-clickable { cursor:pointer; }
.svndex-perm-badge.is-clickable:hover { transform:translateY(-1px); filter:brightness(1.1); opacity:1; }
.svndex-perm-badge.is-clickable.is-off:hover { filter:grayscale(1) brightness(1.15); }
/* S 뱃지 = 항상 활성 + 잠긴 상태 (클릭 X) */
.svndex-perm-badge.is-locked-on { background:linear-gradient(135deg,#fde68a,#f59e0b); color:#7c2d12; border-color:#f59e0b; cursor:default; }
/* sub 활성/비활성 상태 pill (svndex_render_sub_status) — 헤더 직후 노출 */
.svndex-sub-status { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .7rem; font-size:.78rem; font-weight:600; border-radius:99px; margin:.2rem 0 .8rem; }
.svndex-sub-status.is-active { background:#dff5e3; color:#1a7c4a; border:1px solid #b2e3c1; }
.svndex-sub-status.is-inactive { background:#fde2e2; color:#c0392b; border:1px solid #f5b8b8; }
.svndex-sub-status.is-measure { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.svndex-sub-status.is-neutral { background:var(--svx-bg-alt); color:var(--svx-mute); border:1px solid var(--svx-line); }
.ua-probe-form { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin:.2rem 0 .4rem; }
.cwv-flash { padding:.6rem .9rem; margin-bottom:.6rem; border-radius:5px; font-size:.85rem; }
.svndex-sub-status.is-error { background:#ffe4e6; color:#9f1239; border:1px solid #fda4af; }
.svndex-sub-status .ico { font-weight:700; }
.svndex-sub-status + .svndex-sub-status { margin-left:.45rem; }
/* §2026-09-25 — sub 여러 개 알약(MMO·AGO·CWV)이 0px 로 맞닿아 한 덩어리로 보였다 */
/* sub 잠금 stub (svndex_render_locked_stub) — blur skeleton 형태 */
.svndex-sub-locked { position:relative; padding:1.2rem 1.4rem; background:var(--svx-bg-alt); border:1px dashed var(--svx-line); border-radius:8px; margin:.4rem 0 .2rem; overflow:hidden; }
.svndex-sub-locked-mask { display:flex; flex-direction:column; gap:.7rem; filter:blur(4px); user-select:none; pointer-events:none; }
.svndex-sub-locked-row { display:flex; align-items:center; gap:1rem; }
.svndex-sub-locked-label { display:inline-block; width:120px; height:14px; background:#d8d8de; border-radius:3px; flex-shrink:0; }
.svndex-sub-locked-input { display:inline-block; flex:1; height:34px; background:#ebebef; border-radius:4px; }
/* S 전용 「시스템 판정문」 — 판정 기준·임계값·집계 예외. ⚠ 이 규칙은 «표시» 만 담당한다. 가리는 일은 서버가 한다 — 비-S 응답에는 문자열 자체가 없다. 여기서 display:none 류로 숨기려 들지 말 것(소스로 뚫린다). */
.sdx-sysnote { margin:.7rem 0 .2rem; padding:.7rem .9rem; border-radius:6px; background:#333333; color:#fff; font-size:.78rem; line-height:1.65; }
.sdx-sysnote pre { margin:.45rem 0 0; padding:.55rem .7rem; background:rgba(255,255,255,.08); color:#fff; border:0; border-radius:5px; font-size:.72rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.sdx-sysnote-tag { display:block; margin-bottom:.35rem; font-size:.7rem; font-weight:800; letter-spacing:.02em; color:#fde047; }
.sdx-sysnote-tag i { font-size:.85rem; vertical-align:-2px; margin-right:.15rem; }
.sdx-sysnote strong { color:#fff; font-weight:700; }
/* 노랑은 제목(-tag)만. 본문은 화이트 */
.sdx-sysnote code { background:rgba(255,255,255,.12); color:#fff; padding:.05rem .3rem; border-radius:4px; }
.sdx-sysnote a { color:#fde047; }
.sdx-sysnote .sdx-overflow-x { margin-top:.5rem; }
.sdx-sysnote .dx-table { color:#fff; }
.sdx-sysnote .dx-table th { color:#fde047; border-bottom-color:rgba(255,255,255,.28); background:transparent; }
/* ⚠️ `td` 는 «자기 색 선언» 을 갖는다(`.dx-table td { color:var(--svx-ink) }`) — 그러면 위 `.sdx-sysnote .dx-table` 의 흰색은 **상속으로 내려오지 못한다**(상속은 카스케이드 경쟁에 참여하지 않는다. 직접 선언이 언제나 이긴다). 실측: 어두운 카드(#333) 안에서 본문 글자가 `#1a1d24` 로 나와 **대비 1.33:1 = 사실상 안 보였다** (390px·1440px 동일 — 폭과 무관한 기존 결함이라 PC 에서도 안 보이고 있었다. 2026-09-23 사용자 지적). 같은 함정: 어두운 배경 카드 안에 라이트용 부품(표·알약·힌트)을 넣을 때는 **그 부품이 색을 직접 선언하는지** 본다. */
.sdx-sysnote .dx-table td { border-bottom-color:rgba(255,255,255,.14); color:#fff; }
.sdx-sysnote .dx-table tr:hover td { background:rgba(255,255,255,.05); }
.sdx-sysnote .dx-table strong { color:#fff; }
[data-theme="dark"] .sdx-sysnote { background:#2a2a2a; }
.svndex-sub-locked-row:nth-child(2) .svndex-sub-locked-label { width:100px; }
.svndex-sub-locked-row:nth-child(3) .svndex-sub-locked-label { width:140px; }
.svndex-sub-locked-row:nth-child(4) .svndex-sub-locked-label { width:90px; }
.svndex-sub-locked-row:nth-child(2) .svndex-sub-locked-input { max-width:65%; }
.svndex-sub-locked-row:nth-child(4) .svndex-sub-locked-input { max-width:80%; }
/* sub 잠금 안내 배너 (svndex_render_locked_notice — 구조 보존 + 값 마스킹용) */
.svndex-sub-locked-notice { padding:.6rem .9rem; background:#fffbe8; border:1px solid #f0d8a0; border-radius:6px; margin:.4rem 0 .8rem; font-size:.85rem; color:#7c5a18; display:flex; align-items:center; gap:.4rem; }
.svndex-sub-locked-notice .ph { font-size:1rem; color:#c89a2c; }
.svndex-sub-locked-notice strong { color:#7c2d12; }
/* 잠금 영역 안의 비활성 input/button — 시각적 강화 */
.svndex-sub input[disabled], .svndex-sub textarea[disabled], .svndex-sub select[disabled], .svndex-sub button[disabled] { background:#f4f4f6; color:#9aa0a6; cursor:not-allowed; opacity:.85; }
.svndex-sub input[readonly][aria-disabled="true"] { background:#f4f4f6; color:#9aa0a6; }
/* ── 7DEX 팝오버 — 카드명 옆 ⓘ 버튼 ── */
.svndex-info-btn { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; margin-left:.4em; border:1px solid #5b21b6; background:var(--svx-card); color:#5b21b6; border-radius:50%; font-size:11px; font-weight:600; line-height:1; cursor:pointer; vertical-align:middle; }
.svndex-info-btn:hover { background:#5b21b6; color:#fff; }
/* 터치 기기 = 누르는 상자만 28px 로 넓힌다(§12-63 의 팝업 점과 같은 처방). **보이는 원은 18px 그대로**라 PC·화면 모양이 한 픽셀도 안 바뀐다 — 마우스는 정확하지만 손가락은 18px 를 못 맞춘다. ⚠️ `position:relative` 를 같이 준다. 없으면 `::after` 가 더 위 조상을 기준으로 잡아 엉뚱한 자리를 덮는다. */
@media (pointer: coarse), (max-width: 1024px) { .svndex-info-btn { position:relative; } .svndex-info-btn::after { content:''; position:absolute; inset:-5px; border-radius:50%; } }
.svndex-popover-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998; display:none; align-items:center; justify-content:center; padding:20px; }
.svndex-popover-overlay.is-open { display:flex; }
.svndex-popover { width:640px; max-width:calc(100vw - 32px); max-height:calc(100vh - 80px); background:var(--svx-card); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.28); display:flex; flex-direction:column; position:relative; font-family:-apple-system,'Pretendard',sans-serif; }
.svndex-popover .pop-header { background:linear-gradient(135deg,#5b21b6 0%,#7c3aed 100%); color:#fff; padding:20px 26px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-radius:12px 12px 0 0; flex-shrink:0; }
.svndex-popover .pop-header .pop-fullname { font-size:.85rem; opacity:.9; margin:0 0 4px; letter-spacing:.01em; }
.svndex-popover .pop-header .pop-korean { font-size:1.35rem; font-weight:700; margin:0; letter-spacing:-.01em; }
.svndex-popover .pop-close { background:rgba(255,255,255,.12); border:0; color:#fff; font-size:24px; cursor:pointer; line-height:1; padding:0; width:32px; height:32px; border-radius:50%; flex-shrink:0; transition:background .15s ease; }
.svndex-popover .pop-close:hover { background:rgba(255,255,255,.24); }
.svndex-popover .pop-body { overflow-y:auto; padding:8px 0; }
.svndex-popover .pop-section { padding:18px 26px; border-bottom:1px solid #eef0f2; }
.svndex-popover .pop-section:last-of-type { border-bottom:0; }
.svndex-popover .pop-section-badge { display:inline-block; padding:5px 14px; background:#f3e8ff; color:#5b21b6; border-radius:99px; font-size:.78rem; font-weight:700; letter-spacing:.02em; margin-bottom:10px; }
.svndex-popover .pop-section-badge.is-super-only { background:#f1f2f4; color:#6b7280; }
.svndex-popover .pop-section-body { font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,sans-serif; font-size:.95rem; line-height:1.7; color:#3a3d44; margin:0; padding:0; white-space:pre-wrap; word-break:keep-all; }
@media (max-width: 768px) { .svndex-popover { width:100%; max-height:calc(100vh - 40px); border-radius:10px; } .svndex-popover .pop-header { padding:16px 20px; border-radius:10px 10px 0 0; } .svndex-popover .pop-header .pop-fullname { font-size:.78rem; } .svndex-popover .pop-header .pop-korean { font-size:1.15rem; } .svndex-popover .pop-section { padding:14px 20px; } .svndex-popover .pop-section-badge { font-size:.72rem; padding:4px 11px; margin-bottom:8px; } .svndex-popover .pop-section-body { font-size:.85rem; line-height:1.6; } }
/* ── 7DEX 카드 sub 섹션 — 폼 · 표 · 배너 ── */
.am-section { background:var(--svx-card); padding:20px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:14px; }
.am-section h3 { margin:0 0 12px; font-size:1rem; font-weight:600; color:var(--svx-ink); }
.am-section .sub { font-size:.9375rem; color:var(--svx-mute); margin:0 0 14px; line-height:1.6; }
.am-info { padding:12px 16px; background:#f5f3ff; border-left:4px solid #7c3aed; border-radius:4px; color:#5b21b6; font-size:.9375rem; line-height:1.6; margin-bottom:14px; }
.am-table { width:100%; border-collapse:collapse; font-size:1rem; }
.am-table th, .am-table td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--svx-line); }
.am-table th { background:var(--svx-bg-alt); color:var(--svx-mute); font-weight:500; font-size:.8125rem; }
.am-table .ok { color:#16a34a; font-weight:500; }
.am-table .endpoint { font-family:'Menlo','Monaco',monospace; font-size:.9375rem; color:var(--svx-ink); }
.am-coming { padding:24px; text-align:center; background:#fffbeb; border:1px dashed #f59e0b; border-radius:8px; color:#92400e; font-size:1rem; }
.dc-actions { display:flex; gap:8px; margin-bottom:16px; }
.dc-actions a, .dc-actions button { padding:8px 14px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:6px; color:var(--svx-ink); text-decoration:none; font-size:1rem; cursor:pointer; }
.dc-actions a:hover { border-color:#7c3aed; color:#7c3aed; }
.dc-actions a.is-primary { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.dc-table { width:100%; border-collapse:collapse; background:var(--svx-card); border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.dc-table th, .dc-table td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--svx-line); font-size:1rem; }
.dc-table th { background:var(--svx-bg-alt); font-weight:600; color:var(--svx-mute); font-size:.9375rem; }
.dc-table .col-name { font-weight:600; color:var(--svx-ink); }
.dc-table .ok { color:#16a34a; }
.dc-table .empty-cell { color:#6b7280; }
.dc-empty { padding:40px 24px; text-align:center; color:var(--svx-mute); background:var(--svx-card); border-radius:8px; }
.em-flash { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:1rem; }
.em-flash.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.em-flash.error { background:#fee2e2; color:#991b1b; border-left:4px solid #dc2626; }
.em-flash.info { background:#f5f3ff; color:#5b21b6; border-left:4px solid #7c3aed; }
.em-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:20px; }
.em-stats > div { padding:14px 18px; background:var(--svx-card); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.em-stats .label { font-size:.8125rem; color:var(--svx-mute); }
.em-stats .value { font-size:1.5rem; font-weight:700; color:var(--svx-ink); margin-top:4px; }
.em-form { background:var(--svx-card); padding:18px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:16px; }
.em-form h3 { margin:0 0 14px; font-size:1rem; font-weight:600; }
.em-form-row { display:grid; grid-template-columns:1fr 140px 2fr 100px; gap:10px; align-items:end; }
.em-form-row label { display:block; font-size:.8125rem; color:var(--svx-mute); margin-bottom:4px; }
.em-form-row select, .em-form-row input { width:100%; padding:10px 12px; border:1px solid var(--svx-line); border-radius:4px; font-size:1rem; box-sizing:border-box; }
.em-form-row button { padding:10px 16px; background:#7c3aed; color:#fff; border:0; border-radius:4px; font-size:1rem; cursor:pointer; height:42px; }
.em-table { width:100%; border-collapse:collapse; background:var(--svx-card); border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.em-table th, .em-table td { padding:10px 12px; border-bottom:1px solid var(--svx-line); font-size:1rem; text-align:left; }
.em-table th { background:var(--svx-bg-alt); color:var(--svx-mute); font-weight:600; font-size:.8125rem; }
.em-table .col-target { font-family:'Menlo',monospace; font-size:.9375rem; }
.em-table .col-action button { padding:4px 10px; background:var(--svx-card); color:#dc2626; border:1px solid #fecaca; border-radius:4px; font-size:.8125rem; cursor:pointer; }
.em-table .col-action button:hover { background:#fee2e2; }
/* 매핑 표 — 글쓰기에서 고를 때마다 쌓이므로 길이를 예측할 수 없다. 10줄 남짓에서 끊고 안에서 스크롤한다. 머리행은 붙여 둔다. */
.em-table-scroll { max-height:420px; overflow-y:auto; overscroll-behavior:contain; border-radius:8px; }
.em-table-scroll .em-table th { position:sticky; top:0; z-index:1; }
.em-table .col-where { line-height:1.35; }
.em-where { display:block; font-size:.8125rem; color:#5b21b6; font-weight:600; }
.em-what { display:block; font-size:.8125rem; color:var(--svx-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:320px; }
.em-gone { font-size:.8125rem; color:#b91c1c; }
.em-stat-sub { display:block; font-size:.75rem; font-weight:500; color:var(--svx-mute); margin-top:2px; }
.em-form-note { margin:0 0 12px; font-size:.8125rem; color:#475569; line-height:1.7; }
.em-empty { padding:32px; text-align:center; color:var(--svx-mute); background:var(--svx-card); border-radius:8px; }
.em-tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.8125rem; }
.em-tag.page { background:#f5f3ff; color:#5b21b6; }
.em-tag.post { background:#dcfce7; color:#166534; }
.em-tag.board { background:#fef3c7; color:#92400e; }
.in-flash { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:1rem; }
.in-flash.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.in-flash.error { background:#fee2e2; color:#991b1b; border-left:4px solid #dc2626; }
.in-section { background:var(--svx-card); padding:20px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:14px; }
.in-section h3 { margin:0 0 14px; font-size:1rem; font-weight:600; padding-bottom:8px; border-bottom:1px solid var(--svx-line); }
.in-preset-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:14px; }
.in-preset { padding:14px 18px; border:1px solid var(--svx-line); border-radius:8px; cursor:pointer; transition:border-color .15s ease; }
.in-preset:hover { border-color:#7c3aed; }
.in-preset.is-active { border-color:#7c3aed; background:linear-gradient(135deg,#f5f3ff,#fff); }
.in-preset label { display:block; cursor:pointer; }
.in-preset input[type=radio] { margin-right:8px; }
/* Custom 한도 입력 — 라디오 label 밖으로 뺐다(label 하나에 컨트롤 2개 금지 · ). */
.in-preset .in-custom-label { display:block; margin:6px 0 4px; font-size:.75rem; color:var(--svx-mute); cursor:default; }
.in-preset h4 { margin:0 0 4px; font-size:1rem; font-weight:600; display:inline; }
.in-preset h4 .badge { display:inline-block; padding:2px 8px; background:#7c3aed; color:#fff; font-size:.75rem; border-radius:99px; margin-left:6px; }
.in-preset .desc { font-size:.8125rem; color:var(--svx-mute); margin:6px 0 4px; line-height:1.5; }
.in-preset .recommend { font-size:.8125rem; color:var(--svx-mute); margin:0; }
.in-custom-input { margin-top:10px; padding:8px 12px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:4px; width:140px; font-size:1rem; }
.in-form-actions { display:flex; gap:8px; justify-content:flex-end; }
.in-btn { padding:10px 18px; background:#7c3aed; color:#fff; border:0; border-radius:6px; font-size:1rem; cursor:pointer; font-weight:500; }
.in-btn:hover { background:#6d28d9; }
.in-btn.is-secondary { background:var(--svx-card); color:var(--svx-ink); border:1px solid var(--svx-line); }
.in-btn.is-danger { background:#dc2626; }
.in-key { font-family:'Menlo',monospace; font-size:1rem; padding:8px 12px; background:var(--svx-bg-alt); border-radius:4px; }
.in-bar-wrap { width:100%; height:14px; background:#eee; border-radius:7px; overflow:hidden; margin:10px 0; }
.in-bar { height:100%; background:linear-gradient(90deg,#7c3aed,#6d28d9); }
.in-stat { display:flex; gap:18px; margin-bottom:10px; font-size:1rem; flex-wrap:wrap; }
.in-stat strong { color:var(--svx-ink); }
.in-table { width:100%; border-collapse:collapse; font-size:.9375rem; }
.in-table th, .in-table td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--svx-line); }
.in-table th { background:var(--svx-bg-alt); color:var(--svx-mute); font-weight:500; font-size:.8125rem; }
.in-table .ok { color:#16a34a; }
.in-table .bad { color:#dc2626; }
.mlw-flash { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:1rem; }
.mlw-flash.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.mlw-warn { padding:14px 18px; background:#fef2f2; border-left:4px solid #dc2626; border-radius:4px; color:#991b1b; font-size:1rem; margin-bottom:20px; line-height:1.6; }
.mlw-master { background:var(--svx-card); padding:18px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; }
.mlw-master h3 { margin:0; font-size:1rem; font-weight:600; }
/* §2026-09-25 전체 가드 칸 좌우 여백 22 → 18(아래 1~9 항목과 같게) — 스위치 오른쪽 끝이 4px 어긋나 세로 줄이 안 맞았다 */
.mlw-cat { background:var(--svx-card); padding:14px 18px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.mlw-cat .info { flex:1; }
.mlw-cat .info h4 { margin:0 0 4px; font-size:1rem; font-weight:600; color:var(--svx-ink); }
.mlw-cat .info p { margin:0; font-size:.9375rem; color:var(--svx-mute); }
/* 의료광고 가드 — 항목마다 근거 조문을 나란히 둔다. 토글만 있으면 임의 기준으로 읽힌다. 조문을 옆에 붙여 «법에서 온 것»임을 화면이 스스로 말하게 한다. */
/* 제목 줄 = 「N. 가드명」 + 한 줄 설명을 같은 줄에. */
.mlw-cat-title { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
/* 가드명이 주인공 — 칩·조문보다 확실히 앞서게 크기·굵기·색을 준다. */
.mlw-cat-title h4 { margin:0; font-size:1.0625rem; font-weight:700; color:var(--svx-ink); letter-spacing:-.01em; }
/* 한 줄 설명 = 예시 문구라 칩으로 감싼다 — 조문(사실)과 예시를 눈으로 구분한다. */
.mlw-cat-desc { font-size:.75rem; color:var(--svx-mute); background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:99px; padding:2px 10px; line-height:1.6; }
/* 근거 조문 = 제목과 같은 왼쪽 선에 맞춘다(들여쓰기·세로선 없음). */
.mlw-law { margin-top:7px; display:flex; flex-direction:column; gap:2px; }
.mlw-law .cite { font-size:.75rem; font-weight:700; color:#5b21b6; letter-spacing:.01em; }
.mlw-law .text { font-size:.8125rem; line-height:1.5; color:var(--svx-mute); }
/* 덮는 범위 + 못 덮는 4호 */
/* 짚어주기 4종 — 토글이 없어 안 보이던 것을 목록으로 드러낸다. */
.mlw-soft { margin-top:18px; padding:16px 20px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:8px; }
.mlw-soft-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.mlw-soft-head h4 { margin:0; font-size:.9375rem; font-weight:700; color:var(--svx-ink); }
.mlw-soft-note { font-size:.75rem; color:var(--svx-mute); }
.mlw-soft-lead { margin:0 0 12px; font-size:.8125rem; line-height:1.7; color:var(--svx-mute); }
.mlw-soft ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.mlw-soft li { display:grid; grid-template-columns:30px 150px 108px 1fr auto; gap:10px; align-items:baseline; padding:8px 0; border-top:1px solid var(--svx-line-2, var(--svx-line)); }
.mlw-soft .no { font-size:.8125rem; font-weight:700; color:var(--svx-ink); font-variant-numeric:tabular-nums; }
/* 끌 수 없는 항목이라 토글 대신 상태만 박아 둔다 — 토글을 놓으면 조작할 수 있다고 오해한다. */
.mlw-soft-on { justify-self:end; font-size:.6875rem; font-weight:700; letter-spacing:.04em; color:#166534; background:#dcfce7; border-radius:99px; padding:3px 10px; }
.mlw-soft li:first-child { border-top:0; padding-top:0; }
.mlw-soft .cite { font-size:.75rem; font-weight:700; color:#5b21b6; }
.mlw-soft .label { font-size:.8125rem; font-weight:600; color:var(--svx-ink); }
.mlw-soft .why { font-size:.75rem; line-height:1.6; color:var(--svx-mute); }
@media (max-width:900px) { .mlw-soft li { grid-template-columns:30px minmax(0, 1fr) auto; gap:2px 10px; } .mlw-soft .why { grid-column:2 / -1; } }
.mlw-scope { margin-top:18px; padding:18px 20px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:8px; }
.mlw-scope-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.mlw-scope-head h4 { margin:0; font-size:.9375rem; font-weight:700; color:var(--svx-ink); }
.mlw-scope-count { font-size:.8125rem; color:var(--svx-mute); font-variant-numeric:tabular-nums; }
.mlw-scope-count strong { color:#5b21b6; }
.mlw-scope-lead { margin:0 0 14px; font-size:.8125rem; line-height:1.7; color:var(--svx-mute); }
.mlw-uncovered { padding:14px 16px; background:var(--svx-bg-alt); border-radius:6px; }
.mlw-uncovered .head { display:flex; align-items:center; gap:6px; font-size:.8125rem; font-weight:700; color:#b45309; margin-bottom:10px; }
.mlw-uncovered ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.mlw-uncovered li { display:grid; grid-template-columns:104px 1fr; gap:2px 12px; align-items:baseline; }
.mlw-uncovered .cite { grid-row:span 2; font-size:.75rem; font-weight:700; color:#5b21b6; }
.mlw-uncovered .law { font-size:.8125rem; line-height:1.5; color:var(--svx-ink); }
.mlw-uncovered .why { font-size:.75rem; line-height:1.5; color:var(--svx-mute); }
.mlw-uncovered .foot { margin:12px 0 0; font-size:.75rem; line-height:1.6; color:var(--svx-mute); }
.mlw-disclaimer { margin:14px 0 0; font-size:.75rem; line-height:1.7; color:var(--svx-mute); }
.mlw-src { margin:8px 0 0; font-size:.7rem; color:var(--svx-mute); }
.mlw-src a { color:#5b21b6; text-decoration:none; }
.mlw-src a:hover { text-decoration:underline; }
@media (max-width:900px) { .mlw-cat-body { flex-direction:column; gap:8px; } .mlw-cat-body > p { flex:none; } .mlw-law { padding-left:0; border-left:0; border-top:1px solid var(--svx-line); padding-top:8px; } .mlw-uncovered li { grid-template-columns:minmax(0, 1fr); } .mlw-uncovered .cite { grid-row:auto; } }
.mlw-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; padding:16px; background:var(--svx-card); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.mlw-btn { padding:10px 22px; background:#7c3aed; color:#fff; border:0; border-radius:6px; font-size:1rem; font-weight:500; cursor:pointer; }
.mlw-bottom { margin-top:14px; padding:14px 18px; background:#f8fafc; border:1px solid var(--svx-line); border-radius:6px; font-size:.8125rem; color:#475569; line-height:1.7; }
/* eeat sub⑤ 검수자 정책 일괄 설정 */
.eeat-rev-flash { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:1rem; }
.eeat-rev-flash.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.eeat-rev-flash.error { background:#fee2e2; color:#991b1b; border-left:4px solid #dc2626; }
.eeat-rev-toggle { display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; background:var(--svx-bg-alt); border-radius:6px; cursor:pointer; }
.eeat-rev-toggle input[type="checkbox"] { margin:0; }
.eeat-rev-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.eeat-rev-btn { padding:10px 22px; background:#7c3aed; color:#fff; border:0; border-radius:6px; font-size:1rem; font-weight:500; cursor:pointer; }
.eeat-rev-btn:hover { background:#6d28d9; }
.eeat-rev-btn:disabled { background:#9ca3af; cursor:not-allowed; }
/* eeat sub⑥ 검수자 일괄 지정 + 현황 */
.eeat-asg-wrap { margin-top:22px; padding-top:20px; border-top:1px solid var(--svx-line); }
.eeat-asg-title { margin:0 0 6px; font-size:1rem; font-weight:600; color:var(--svx-ink); }
.eeat-asg-desc { margin:0 0 12px; font-size:.8125rem; color:#475569; line-height:1.7; }
.eeat-asg-flash { padding:12px 16px; border-radius:6px; margin-bottom:14px; font-size:1rem; }
.eeat-asg-flash.error { background:#fee2e2; color:#991b1b; border-left:4px solid #dc2626; }
.eeat-asg-flash.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.eeat-asg-count { margin:0 0 12px; font-size:.8125rem; color:#475569; }
.eeat-asg-count strong { color:#5b21b6; font-size:.95rem; }
.eeat-asg-sub { color:var(--svx-mute); }
.eeat-asg-bar { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.eeat-asg-pick { display:flex; flex-direction:column; gap:5px; font-size:.8125rem; color:#475569; }
.eeat-asg-pick select { min-width:220px; padding-top:10px; padding-bottom:10px; font-size:1rem; }
/* 검수자 지정 경고 — 저장 버튼 오른쪽 남는 자리에 둔다. */
.eeat-asg-warn { flex:1 1 340px; display:flex; gap:8px; margin:0; font-size:.8125rem; line-height:1.75; color:#7c2d12; }
.eeat-asg-warn i { flex:0 0 auto; display:inline-flex; align-items:center; height:calc(.8125rem * 1.75); font-size:1.05rem; color:#ea580c; }
.eeat-asg-warn strong { color:#9a3412; }
.eeat-asg-warn code { background:rgba(234,88,12,.1); padding:1px 4px; border-radius:3px; }
.eeat-asg-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:900px) { .eeat-asg-grid { grid-template-columns:minmax(0, 1fr); } }
.eeat-asg-col { border:1px solid var(--svx-line); border-radius:8px; padding:12px 14px; background:#fff; /* 페이지가 36개까지 늘어나 카드가 화면을 통째로 밀어냈다 — 높이를 묶고 안에서 스크롤한다. */ max-height:400px; overflow-y:auto; overscroll-behavior:contain; }
.eeat-asg-col h5 { margin:0 0 8px; font-size:.8125rem; font-weight:600; color:var(--svx-ink); letter-spacing:.02em; /* 안에서 스크롤하므로 제목은 붙여 둔다 — 어느 목록을 보고 있는지 잃지 않게. */ position:sticky; top:-12px; z-index:1; background:#fff; padding:12px 0 6px; margin-top:-12px; }
.eeat-asg-col h5 span { color:var(--svx-mute); font-weight:500; }
.eeat-asg-group { margin:10px 0 4px; font-size:.6875rem; font-weight:600; color:#a78bfa; letter-spacing:.06em; text-transform:uppercase; }
.eeat-asg-group:first-of-type { margin-top:0; }
.eeat-asg-all { margin-left:6px; padding:1px 7px; border:1px solid var(--svx-line); border-radius:999px; background:#fff; color:var(--svx-mute); font-size:.625rem; font-weight:600; letter-spacing:0; text-transform:none; cursor:pointer; }
.eeat-asg-all:hover { border-color:#a78bfa; color:#5b21b6; background:#f5f3ff; }
/* EEAT ⑦ 일괄 검수일 */
.rev-grid { display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start; }
@media (max-width:900px) { .rev-grid { grid-template-columns:minmax(0, 1fr); } }
.rev-list { max-height:420px; }
.rev-box { padding:14px 16px; border:1px solid var(--svx-line); border-radius:8px; background:#fff; }
.rev-label { display:block; font-size:.8125rem; font-weight:600; color:var(--svx-ink); margin-bottom:6px; }
.rev-date { width:100%; }
.rev-count { margin:10px 0 12px; font-size:.8125rem; color:var(--svx-mute); }
.rev-count strong { color:#5b21b6; font-size:.95rem; }
.rev-actions { display:flex; flex-direction:column; gap:8px; }
.rev-btn-ghost { padding:8px 14px; background:#fff; color:#b91c1c; border:1px solid #fecaca; border-radius:6px; font-size:.8125rem; font-weight:500; cursor:pointer; }
.rev-btn-ghost:hover { background:#fee2e2; }
.rev-side { display:flex; flex-direction:column; gap:12px; }
.rev-auto-box { display:flex; flex-direction:column; gap:8px; }
.rev-toggle { display:inline-flex; align-items:center; gap:7px; font-size:.95rem; color:var(--svx-ink); cursor:pointer; }
.rev-months { width:100%; }
.rev-auto-state { margin:0; font-size:.8125rem; color:var(--svx-mute); }
.rev-auto-save { width:100%; }
.rev-auto-box.is-locked { opacity:.55; }
.rev-auto-box.is-locked .rev-toggle { cursor:not-allowed; }
.rev-warn { margin-top:14px; }
.rev-warn { display:flex; gap:8px; margin:12px 0 0; font-size:.8125rem; line-height:1.75; color:#7c2d12; }
.rev-warn i { flex:0 0 auto; display:inline-flex; align-items:center; height:calc(.8125rem * 1.75); font-size:1.05rem; color:#ea580c; }
.rev-warn strong { color:#9a3412; }
.eeat-asg-row { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:5px; cursor:pointer; font-size:.8125rem; }
.eeat-asg-row:hover { background:#f5f3ff; }
/* 지정된 행 = 한눈에 구분되게 바탕과 왼쪽 띠를 준다(이름만으로는 눈에 안 들어온다). */
.eeat-asg-row.is-set { background:#faf8ff; box-shadow:inset 3px 0 0 #a78bfa; }
.eeat-asg-row.is-set .eeat-asg-name { color:#3b0764; font-weight:600; }
.eeat-asg-row.is-set:hover { background:#f3efff; }
.eeat-asg-row input[type="checkbox"] { margin:0; flex:0 0 auto; }
.eeat-asg-name { flex:1 1 auto; min-width:0; color:var(--svx-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eeat-asg-now { flex:0 0 auto; font-size:.6875rem; color:var(--svx-mute); }
.eeat-asg-now.is-set { color:#5b21b6; font-weight:600; }
.rb-flash { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:1rem; }
.rb-flash.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.rb-flash.info { background:#f5f3ff; color:#5b21b6; border-left:4px solid #7c3aed; }
.rb-warn { padding:12px 16px; background:#fef2f2; border-left:4px solid #dc2626; border-radius:4px; color:#991b1b; font-size:1rem; margin-bottom:20px; }
.rb-tier { background:var(--svx-card); padding:18px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:14px; }
.rb-tier h3 { margin:0; font-size:1rem; font-weight:600; color:var(--svx-ink); }
.rb-tier .desc { font-size:.8125rem; color:var(--svx-mute); margin:4px 0 14px; }
.rb-bots { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:0; padding:0; list-style:none; }
.rb-bot { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--svx-bg-alt); border-radius:4px; font-size:.9375rem; }
.rb-bot label { display:flex; align-items:center; gap:8px; flex:1; cursor:pointer; }
.rb-bot input[type=checkbox] { width:16px; height:16px; cursor:pointer; }
.rb-bot .name { font-family:'Menlo',monospace; color:var(--svx-ink); }
.rb-bot .badge { font-size:.75rem; padding:2px 6px; border-radius:99px; }
.rb-bot .badge.allow { background:#dcfce7; color:#166534; }
.rb-bot .badge.block { background:#fee2e2; color:#991b1b; }
.rb-actions { display:flex; gap:8px; justify-content:flex-end; padding:16px; background:var(--svx-card); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-top:14px; }
.rb-btn { padding:10px 22px; background:#7c3aed; color:#fff; border:0; border-radius:6px; font-size:1rem; font-weight:500; cursor:pointer; }
.rb-preview { padding:10px 16px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:6px; color:var(--svx-ink); text-decoration:none; font-size:1rem; }
/* robots-base-section.php — 정책 토글 + 라이브 미리보기 */
.rb-policy-form { background:var(--svx-card); padding:18px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:14px; }
.rb-policy-title { margin:0 0 12px; font-size:1rem; font-weight:600; color:var(--svx-ink); }
.rb-policy-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px; }
@media (max-width:880px) { .rb-policy-list { grid-template-columns:minmax(0, 1fr); } }
.rb-policy { display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid var(--svx-line); border-radius:8px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.rb-policy:hover { border-color:#7c3aed; }
.rb-policy.is-active { border-color:#7c3aed; background:linear-gradient(135deg,#f5f3ff,#fff); }
.rb-policy input[type=radio] { margin:0 0 4px; }
.rb-policy strong { font-size:.95rem; color:var(--svx-ink); }
.rb-policy .desc { font-size:.8125rem; color:var(--svx-mute); line-height:1.5; }
.rb-policy-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rb-preview-box { background:var(--svx-card); padding:18px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.rb-preview-box h4 { margin:0 0 10px; font-size:1rem; font-weight:600; color:var(--svx-ink); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.rb-preview-meta { font-size:.8125rem; color:var(--svx-mute); font-weight:400; }
.rb-preview-meta code { font-size:.75rem; background:var(--svx-bg-alt); padding:1px 6px; border-radius:3px; color:#5b21b6; }
.rb-preview-pre { padding:14px 16px; background:#fafafa; border:1px solid var(--svx-line); border-radius:6px; font-family:'Menlo','Monaco',monospace; font-size:.85rem; line-height:1.6; color:var(--svx-ink); max-height:320px; overflow:auto; white-space:pre; margin:0; }
.rb-preview-note { margin:8px 0 0; font-size:.8rem; color:var(--svx-mute); }
.rb-preview-box-current { margin-top:12px; background:#fffbeb; border:1px solid #fde68a; box-shadow:none; }
.rb-preview-box-current h4 { color:#92400e; }
.rb-preview-box-current .rb-preview-pre { background:var(--svx-card); }
.rb-preview-open { margin-left:auto; padding:4px 10px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:4px; font-size:.75rem; color:#5b21b6; text-decoration:none; font-weight:400; }
.rb-preview-open:hover { border-color:#5b21b6; background:#f5f3ff; }
/* GEO sub② AI 봇 27종 정책 — ai-bots-section.php */
.ab-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.ab-link { padding:.4rem .9rem; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:6px; text-decoration:none; color:var(--svx-ink); font-size:.85rem; white-space:nowrap; line-height:1.2; }
.ab-link:hover { border-color:#5b21b6; color:#5b21b6; }
/* §2026-09-25 — GEO 의 두 저장 버튼만 짙은 색(#5b21b6)·다른 크기라 다른 카드의 저장 버튼과 모양이 달랐다 → 공용 작은 저장 버튼(.sm-btn.is-sm)과 같게. */
.ab-btn { padding:6px 14px; background:#7c3aed; color:#fff; border:0; border-radius:5px; font-size:.84rem; font-weight:500; cursor:pointer; white-space:nowrap; line-height:1.2; }
.ab-btn:hover { background:#6d28d9; }
.ab-hint { margin:1rem 0 0; font-size:.8rem; color:var(--svx-mute); }
.ab-policy-banner { padding:.85rem 1.1rem; margin-bottom:1.2rem; border-radius:6px; font-size:.85rem; line-height:1.6; border-left:3px solid; }
.ab-policy-banner.is-ok { background:#dcfce7; color:#166534; border-left-color:#16a34a; }
.ab-policy-banner.is-warn { background:#fef3c7; color:#92400e; border-left-color:#d97706; }
.ab-policy-banner.is-err { background:#fee2e2; color:#991b1b; border-left-color:#dc2626; }
.ab-policy-banner code { padding:1px 6px; background:rgba(0,0,0,.06); border-radius:3px; font-size:.78rem; }
.ab-policy-banner a { text-decoration:underline; }
/* GEO sub① llms.txt 라이브 응답 표시 — geo.php */
.gl-llms-status { padding:1rem 1.2rem; background:#dff5e3; border-radius:6px; margin-bottom:.6rem; }
.gl-llms-status-ok { color:#1a7c4a; font-size:.9rem; }
.gl-llms-status-meta { margin:.4rem 0 0; font-size:.8125rem; color:#3a5040; line-height:1.6; }
.gl-llms-status-meta code { background:var(--svx-card); padding:1px 5px; border-radius:3px; font-size:.78rem; }
.gl-llms-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.gl-llms-link { padding:.4rem .9rem; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:6px; text-decoration:none; color:var(--svx-ink); font-size:.8125rem; white-space:nowrap; line-height:1.2; }
.gl-llms-link:hover { border-color:#5b21b6; color:#5b21b6; }
.gl-llms-foot { margin:0; font-size:.78rem; color:var(--svx-mute); }
.gl-llms-foot code { background:var(--svx-bg-alt); padding:1px 5px; border-radius:3px; }
.gl-llms-on { color:#1a7c4a; font-weight:600; }
.gl-llms-off { color:#888780; }
.gl-llms-flash { padding:.6rem .9rem; margin-bottom:.6rem; border-radius:5px; font-size:.85rem; }
.gl-llms-flash.is-success { background:#dcfce7; color:#166534; border-left:3px solid #16a34a; }
.gl-llms-flash.is-error { background:#fee2e2; color:#991b1b; border-left:3px solid #dc2626; }
.gl-llms-filters { padding:.8rem 1.2rem; background:var(--svx-bg-alt); border-radius:6px; margin-bottom:.8rem; font-size:.8125rem; }
.gl-llms-filters h4 { margin:0 0 .4rem; font-size:.875rem; color:var(--svx-ink); }
.gl-llms-filters ul { margin:0; padding-left:1.4rem; line-height:1.7; }
.gl-llms-filters li strong { color:#5b21b6; }
.gl-llms-filters .gl-llms-stat { color:#3a3d44; }
.gl-llms-filters .gl-llms-stat strong { color:#1a7c4a; font-weight:700; }
.gl-llms-form { padding:1rem 1.2rem; background:#fffbeb; border:1px solid #fde68a; border-radius:6px; margin-bottom:.8rem; }
.gl-llms-form h4 { margin:0 0 .6rem; font-size:.9rem; color:#92400e; }
.gl-llms-toggle { display:flex; align-items:center; gap:.5rem; font-size:.85rem; margin-bottom:.5rem; cursor:pointer; }
.gl-llms-num { display:flex; align-items:center; gap:.5rem; font-size:.85rem; margin-bottom:.5rem; }
.gl-llms-num input[type=number] { width:6rem; padding:.25rem .5rem; border:1px solid var(--svx-line); border-radius:4px; font-size:.85rem; }
.gl-llms-num small { color:var(--svx-mute); font-size:.75rem; }
.gl-llms-warn { margin:.5rem 0; font-size:.78rem; color:#92400e; line-height:1.5; }
.gl-llms-save { padding:6px 14px; background:#7c3aed; color:#fff; border:0; border-radius:5px; font-size:.84rem; font-weight:500; cursor:pointer; }
.gl-llms-save:hover { background:#6d28d9; }
.sc-flash { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:1rem; }
.sc-flash.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.sc-flash.error { background:#fee2e2; color:#991b1b; border-left:4px solid #dc2626; white-space:pre-wrap; font-family:'Menlo',monospace; }
.sc-section { background:var(--svx-card); padding:20px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:14px; }
.sc-section h3 { margin:0 0 12px; font-size:1rem; font-weight:600; color:var(--svx-ink); }
.sc-warn { padding:14px 18px; background:#fff8e1; border-left:4px solid #d97706; border-radius:4px; color:#92400e; font-size:1rem; margin:0 0 14px; line-height:1.6; }
.sc-catalog { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-bottom:14px; }
@media (max-width: 560px) { .sc-catalog { grid-template-columns:minmax(0, 1fr); } }
/* §2026-09-25 — 폰에서 오른쪽 칸이 화면 밖으로 34px 나갔다 */
.sc-cat { padding:10px 14px; background:var(--svx-bg-alt); border-radius:6px; }
.sc-cat .no { display:inline-block; width:20px; height:20px; line-height:20px; text-align:center; background:#7c3aed; color:#fff; border-radius:50%; font-size:.75rem; font-weight:700; margin-right:6px; }
.sc-cat .name { font-weight:600; color:var(--svx-ink); font-size:1rem; font-family:'Menlo',monospace; }
.sc-cat .desc { font-size:.8125rem; color:var(--svx-mute); margin:4px 0 0 26px; }
.sc-meta { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:14px; }
.sc-meta > div { padding:12px 14px; background:var(--svx-bg-alt); border-radius:6px; text-align:center; }
.sc-meta .label { font-size:.8125rem; color:var(--svx-mute); }
.sc-meta .value { font-size:1.2rem; font-weight:700; color:var(--svx-ink); }
@media (min-width: 641px) { .sc-meta > :last-child:nth-child(4n+3), .sc-meta > :nth-child(4n+1):nth-last-child(2), .sc-meta > :nth-child(4n+2):last-child { grid-column:span 2; } .sc-meta > :nth-child(4n+1):last-child { grid-column:1 / -1; } }
/* §2026-09-25 — 7칸(4+3)의 마지막 칸이 줄을 채운다 */
.sc-editor-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.sc-editor-head .meta { font-size:.8125rem; color:var(--svx-mute); }
/* 엔진코어 A·B·C 에디터 헤더 우측 묶음 — 파일 경로 + [P][M][S] 뱃지. */
.sdx-cc-head-right { display:flex; align-items:center; gap:12px; justify-content:flex-end; flex:1 1 auto; min-width:0; }
/* 절대경로가 길어 제목을 두 줄로 밀어냈다 — 경로만 말줄임하고 제목은 줄이지 않는다. */
.sdx-cc-head-right .meta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sm-editor-head > h3, .sc-editor-head > h3, .cg-editor-head > h3 { flex:0 0 auto; }
.sm-editor-head, .sc-editor-head, .cg-editor-head { flex-wrap:wrap; gap:6px 14px; }
.sc-textarea { width:100%; min-height:480px; padding:14px 16px; border:1px solid #fde68a; border-radius:6px; font-family:ui-monospace,'Menlo','Monaco',monospace; font-size:.82rem; line-height:1.55; background:#fffbeb; color:var(--svx-ink); resize:vertical; box-sizing:border-box; }
.sc-textarea:focus { outline:none; border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.12); background:#fffefa; }
.sc-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.sc-btn { padding:10px 20px; background:#7c3aed; color:#fff; border:0; border-radius:6px; font-size:1rem; font-weight:500; cursor:pointer; }
.sc-btn.is-secondary { background:var(--svx-card); color:var(--svx-ink); border:1px solid var(--svx-line); text-decoration:none; line-height:1; }
.se-flash { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:1rem; }
.se-flash.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.se-flash.info { background:#f5f3ff; color:#5b21b6; border-left:4px solid #7c3aed; }
.se-form { background:var(--svx-card); padding:24px 28px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.se-engine { padding:18px 0; border-bottom:1px solid var(--svx-line); display:grid; grid-template-columns:240px 1fr 100px; gap:16px; align-items:center; }
.se-engine:last-of-type { border-bottom:0; }
.se-engine .label { font-weight:600; color:var(--svx-ink); display:flex; align-items:center; gap:.5rem; }
.se-badge { display:inline-block; padding:2px 8px; border-radius:99px; font-size:.7rem; font-weight:700; line-height:1.4; letter-spacing:.02em; flex-shrink:0; }
.se-badge.is-required { background:#ffedd5; color:#c2410c; }
/* 주황 = 필수 */
.se-badge.is-recommended { background:#f5e9dc; color:#7c4a1d; }
/* 브라운 = 권장 */
.se-badge.is-optional { background:#eef0f4; color:#6b7280; }
/* 회색 = 선택 */
.se-engine.is-disabled { opacity:.85; }
.se-engine .disabled-note { display:block; padding:.5rem .8rem; background:var(--svx-bg-alt); border-radius:4px; font-size:.78rem; color:var(--svx-mute); line-height:1.5; }
.se-engine .note { font-size:.8125rem; color:var(--svx-mute); margin-top:4px; display:block; }
.se-engine input[type=text] { width:100%; padding:10px 12px; font-family:'Menlo',monospace; font-size:1rem; border:1px solid var(--svx-line); border-radius:4px; }
.se-engine input[type=text]:focus { outline:none; border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.se-engine .guide { font-size:.8125rem; color:#7c3aed; text-decoration:none; }
.se-engine .guide:hover { text-decoration:underline; }
.se-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid var(--svx-line); }
.se-btn { padding:10px 22px; background:#7c3aed; color:#fff; border:0; border-radius:6px; font-size:1rem; font-weight:500; cursor:pointer; }
.se-btn:hover { background:#6d28d9; }
.se-baidu { margin-top:14px; padding:14px 18px; background:var(--svx-bg-alt); border-radius:6px; color:var(--svx-mute); font-size:.9375rem; }
/* sm- 클래스 = seo-mapping + sitemap 양쪽에서 공유 사용 */
.sm-flash { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:1rem; }
.sm-flash.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.sm-flash.error { background:#fee2e2; color:#991b1b; border-left:4px solid #dc2626; white-space:pre-wrap; font-family:'Menlo',monospace; }
.sm-flash.info { background:#f5f3ff; color:#5b21b6; border-left:4px solid #7c3aed; }
.sm-flash.warn { background:var(--svx-warn-bg); color:var(--svx-warn-tx); border-left:4px solid var(--svx-warn); }
.sm-section { background:var(--svx-card); padding:20px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:14px; }
.sm-section h3 { margin:0 0 12px; font-size:1rem; font-weight:600; color:var(--svx-ink); }
.sm-fallback { list-style:none; margin:0; padding:0; counter-reset:step; }
.sm-fallback li { counter-increment:step; padding:10px 14px 10px 44px; border-radius:6px; margin-bottom:6px; background:var(--svx-bg-alt); position:relative; font-size:1rem; }
.sm-fallback li::before { content:counter(step); position:absolute; left:14px; top:50%; transform:translateY(-50%); width:22px; height:22px; line-height:22px; text-align:center; background:#7c3aed; color:#fff; border-radius:50%; font-size:.8125rem; font-weight:700; }
.sm-warn { padding:14px 18px; background:#fff8e1; border-left:4px solid #d97706; border-radius:4px; color:#92400e; font-size:1rem; margin:0 0 14px; line-height:1.6; }
/* §2026-09-25 — 칸이 6개라 4열이면 둘째 줄 오른쪽 두 칸이 비었다 → 3열(3+3). 폰은 아래 640 규칙이 2열로 바꾼다. */
.sm-meta { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-bottom:14px; }
.sm-meta > div { padding:12px 14px; background:var(--svx-bg-alt); border-radius:6px; text-align:center; }
.sm-meta .label { font-size:.8125rem; color:var(--svx-mute); }
.sm-meta .value { font-size:1.2rem; font-weight:700; color:var(--svx-ink); }
.sm-editor-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.sm-editor-head .meta { font-size:.8125rem; color:var(--svx-mute); }
.sm-textarea { width:100%; min-height:480px; padding:14px 16px; border:1px solid #fde68a; border-radius:6px; font-family:ui-monospace,'Menlo','Monaco',monospace; font-size:.82rem; line-height:1.55; background:#fffbeb; color:var(--svx-ink); resize:vertical; box-sizing:border-box; }
.sm-textarea:focus { outline:none; border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.12); background:#fffefa; }
.sm-card { background:var(--svx-card); padding:18px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:14px; }
.sm-card h3 { margin:0 0 14px; font-size:1rem; font-weight:600; color:var(--svx-ink); }
.sm-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--svx-line); font-size:1rem; }
.sm-row:last-child { border-bottom:0; }
.sm-row span { color:var(--svx-mute); }
.sm-row strong { color:var(--svx-ink); }
/* 보조 안내 — 오른쪽 값 «왼쪽»에 붙는다(값이 우측 끝 정렬을 유지) */
.sm-row .sm-row-note { margin-left:auto; margin-right:10px; color:var(--svx-mute); font-size:.8rem; }
.sm-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:14px; }
/* §2026-09-25 — 폰에서 폭이 제각각인 버튼 4개가 오른쪽 정렬로 쌓여 들쭉날쭉했다 → 한 줄에 하나씩 같은 폭. */
@media (max-width:640px) { .sm-actions { flex-direction:column; align-items:stretch; } .sm-actions > a, .sm-actions > form, .sm-actions > form > button { width:100%; box-sizing:border-box; justify-content:center; text-align:center; } }
.sm-btn { padding:10px 20px; background:#7c3aed; color:#fff; border:0; border-radius:6px; font-size:1rem; font-weight:500; cursor:pointer; text-decoration:none; display:inline-block; }
.sm-btn:hover { background:#6d28d9; }
.sm-btn.is-secondary { background:var(--svx-card); color:var(--svx-ink); border:1px solid var(--svx-line); }
.sm-btn.is-secondary:hover { border-color:#7c3aed; color:#7c3aed; }
.sm-btn.is-warn { background:var(--svx-card); color:#92400e; border:1px solid #fde68a; }
.sm-btn.is-warn:hover { background:#fef3c7; }
/* 카드 단위 저장 버튼 — 기본 .sm-btn 은 «페이지 전체 저장» 크기(1rem)라, 카드마다 하나씩 붙는 자리에 쓰면 제목보다 커져 화면을 지배한다. 공용 변형으로 둔다(다음 카드도 이걸 쓴다). */
.sm-btn.is-sm { padding:6px 14px; font-size:.84rem; border-radius:5px; }
.sm-btn.is-ghost { padding:6px 12px; font-size:.82rem; font-weight:500; background:transparent; color:var(--svx-mute); border:1px solid var(--svx-line); }
.sm-btn.is-ghost:hover { color:var(--svx-primary); border-color:var(--svx-primary); background:rgba(124,58,237,.05); }
.sm-btn.is-ghost i { font-size:.95rem; margin-right:3px; vertical-align:middle; }
/* 사이트맵 «검색엔진 제출 표시» — 제출 여부는 시스템이 알 수 없어 운영자가 직접 켜는 칸이다. 위 표와 같은 «한 줄에 하나» 결로 맞춘다 — 체크박스·링크·버튼을 한 줄에 몰면 무엇을 켜는 칸인지 안 읽힌다. */
.sm-submit { margin-top:20px; padding:16px 22px 0; border-top:1px solid var(--svx-line); }
/* §2026-09-25 좌우 22px — 위 상태·액션 카드의 안쪽 시작선과 맞춘다(22px 바깥으로 나와 있었다) */
.sm-submit h3 { margin:0 0 6px; font-size:.95rem; font-weight:600; color:var(--svx-ink); }
.sm-submit .sdx-hint { margin:0 0 14px; font-size:.82rem; line-height:1.65; color:var(--svx-mute); }
.sm-check { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--svx-line); font-size:.95rem; color:var(--svx-ink); cursor:pointer; }
.sm-check input[type="checkbox"] { flex:0 0 auto; }
.sm-check > span { flex:1 1 auto; }
.sm-check input[disabled] { cursor:default; }
.sm-when { flex:0 0 auto; font-size:.76rem; color:var(--svx-mute); font-style:normal; padding:2px 9px; background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:99px; }
.sm-go { flex:0 0 auto; font-size:.8rem; color:var(--svx-primary); text-decoration:none; white-space:nowrap; }
.sm-go:hover { text-decoration:underline; }
.sm-submit-actions { display:flex; justify-content:flex-end; margin-top:14px; }
.sm-submit .sm-btn { padding:9px 20px; font-size:.92rem; }
body[data-theme="dark"] .sm-when { background:rgba(0,0,0,.25); border-color:rgba(167,139,250,.28); }
/* 권한 매트릭스 헬퍼 */
.svndex-matrix-bulk { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px !important; background:linear-gradient(180deg, #faf8ff, #fff) !important; border:1px solid #ddd6fe !important; }
.svndex-matrix-bulk strong { font-size:.95rem; color:var(--svx-primary); }
.svndex-matrix-bulk small { font-size:.8rem; color:var(--svx-mute); }
.svndex-matrix-bulk-actions { margin-left:auto; display:inline-flex; flex-wrap:wrap; gap:6px; }
/* 좁은 화면에서는 버튼이 줄을 바꾼다(글자는 쪼개지 않는다) — 종전엔 한 줄 고정이라 768px 에서 «프리셋 / 저장» 처럼 글자가 쪼개지고 390px 이하에서 카드 밖으로 넘쳤다(§12-92 · §2026-10-01 자가검증) */
.svndex-matrix-bulk-actions .sm-btn { white-space:nowrap; }
/* 역할 프리셋 = [이름][디스켓] 한 덩어리(§2026-10-02 대표님) — 이름 = 체크 채우기 · 디스켓 = 지금 체크를 그 프리셋으로 저장. 줄이 바뀌어도 둘이 떨어지지 않는다.
   비어 있는 프리셋(운영자 심층 · 운영자 최소는 저장 전까지)은 이름 버튼 테두리를 점선으로 */
.svndex-role-preset { display:inline-flex; }
.svndex-role-preset > .sm-btn:first-child { border-top-right-radius:0; border-bottom-right-radius:0; }
.svndex-role-preset > .svndex-role-save { margin-left:-1px; padding-left:9px; padding-right:9px; border-top-left-radius:0; border-bottom-left-radius:0; }
.svndex-role-preset > .svndex-role-save i { margin-right:0; }
.svndex-role-preset > .sm-btn:hover, .svndex-role-preset > .sm-btn:focus-visible { position:relative; z-index:1; }
.svndex-role-preset.is-empty > [data-role-preset] { border-style:dashed; }
/* 역할 프리셋 다섯 = 은은한 색으로 구분(§2026-10-02 대표님 «운영자 심층 붉은 톤 · 운영자 표준 하늘색 · 이름과 옆 디스켓은 같은 색»).
   색은 묶음(data-role)의 변수로만 정하고 이름·디스켓이 같은 변수를 쓴다 — 한쪽만 다른 색이 될 수 없게. 다크 짝 = 아래 .sm-btn.is-ghost 다크 줄 뒤 */
.svndex-role-preset[data-role="operator_deep"] { --rp-fg:#be123c; --rp-bd:#fecdd3; --rp-bg:#fff1f2; --rp-bg-h:#ffe4e6; }
.svndex-role-preset[data-role="operator"]      { --rp-fg:#0369a1; --rp-bd:#bae6fd; --rp-bg:#f0f9ff; --rp-bg-h:#e0f2fe; }
.svndex-role-preset[data-role="operator_min"]  { --rp-fg:#b45309; --rp-bd:#fde68a; --rp-bg:#fffbeb; --rp-bg-h:#fef3c7; }
.svndex-role-preset[data-role="minimal"]       { --rp-fg:#047857; --rp-bd:#a7f3d0; --rp-bg:#ecfdf5; --rp-bg-h:#d1fae5; }
.svndex-role-preset[data-role="posting"]       { --rp-fg:#6d28d9; --rp-bd:#ddd6fe; --rp-bg:#f5f3ff; --rp-bg-h:#ede9fe; }
.svndex-role-preset[data-role] > .sm-btn { color:var(--rp-fg); border-color:var(--rp-bd); background:var(--rp-bg); }
.svndex-role-preset[data-role] > .sm-btn:hover, .svndex-role-preset[data-role] > .sm-btn:focus-visible { color:var(--rp-fg); border-color:var(--rp-fg); background:var(--rp-bg-h); }
/* 엔진 사이트 자신의 «엔진(기준)» 표시 — 버튼 모양이지만 누르는 것이 아니다(«엔진설정» 자리) */
.sm-btn.is-ghost.is-static { cursor:default; }
.sm-btn.is-ghost.is-static:hover { color:var(--svx-mute); border-color:var(--svx-line); background:transparent; }
body[data-theme="dark"] .sm-btn.is-ghost.is-static:hover { color:var(--svx-d-mute); border-color:var(--svx-d-line-strong); background:transparent; }
/* 버튼 묶음 사이 세로 구분선(역할 프리셋 | 전체 체크·해제·엔진설정 — §2026-10-02) */
.svndex-matrix-bulk-sep { flex:0 0 1px; align-self:stretch; margin:3px 4px; background:#ddd6fe; }
@media (max-width:640px) { .svndex-matrix-bulk-sep { display:none; } }   /* 버튼이 여러 줄로 접히면 구분선이 줄 끝에 홀로 남는다 */
.svndex-matrix-cat-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.svndex-matrix-cat-head h3 { margin:0; font-size:1rem; }
.svndex-matrix-cat-head h3 small { color:#888; font-weight:400; }
/* 카테고리 접기/펴기 */
.svndex-matrix-collapse { border:0; background:transparent; cursor:pointer; padding:2px 4px; color:var(--svx-mute); font-size:1rem; line-height:1; display:inline-flex; transition:transform .15s ease; }
.svndex-matrix-collapse:hover { color:var(--svx-primary); }
.svndex-matrix-cat-title { cursor:pointer; user-select:none; }
.svndex-matrix-cat.is-collapsed .svndex-matrix-list { display:none; }
.svndex-matrix-cat.is-collapsed .svndex-matrix-cat-head { margin-bottom:0; }
.svndex-matrix-cat.is-collapsed .svndex-matrix-collapse { transform:rotate(-90deg); }
.svndex-matrix-cat-actions { margin-left:auto; display:inline-flex; gap:6px; }
body[data-theme="dark"] .svndex-matrix-bulk { background:linear-gradient(180deg, rgba(124,58,237,.08), var(--svx-d-card)) !important; border-color:var(--svx-d-line-strong) !important; }
body[data-theme="dark"] .svndex-matrix-bulk-sep { background:var(--svx-d-line-strong); }
body[data-theme="dark"] .sm-btn.is-ghost { color:var(--svx-d-mute); border-color:var(--svx-d-line-strong); }
body[data-theme="dark"] .sm-btn.is-ghost:hover { background:rgba(124,58,237,.12); }
/* 역할 프리셋 다섯 — 다크 짝(위 «은은한 색» 의 어두운 판 · 테두리형 다크 줄보다 특이도가 높아 이긴다) */
body[data-theme="dark"] .svndex-role-preset[data-role="operator_deep"] { --rp-fg:#fda4af; --rp-bd:rgba(244,63,94,.40); --rp-bg:rgba(244,63,94,.09); --rp-bg-h:rgba(244,63,94,.18); }
body[data-theme="dark"] .svndex-role-preset[data-role="operator"]      { --rp-fg:#7dd3fc; --rp-bd:rgba(14,165,233,.40); --rp-bg:rgba(14,165,233,.09); --rp-bg-h:rgba(14,165,233,.18); }
body[data-theme="dark"] .svndex-role-preset[data-role="operator_min"]  { --rp-fg:#fcd34d; --rp-bd:rgba(245,158,11,.40); --rp-bg:rgba(245,158,11,.09); --rp-bg-h:rgba(245,158,11,.18); }
body[data-theme="dark"] .svndex-role-preset[data-role="minimal"]       { --rp-fg:#6ee7b7; --rp-bd:rgba(16,185,129,.40); --rp-bg:rgba(16,185,129,.09); --rp-bg-h:rgba(16,185,129,.18); }
body[data-theme="dark"] .svndex-role-preset[data-role="posting"]       { --rp-fg:#c4b5fd; --rp-bd:rgba(139,92,246,.45); --rp-bg:rgba(139,92,246,.10); --rp-bg-h:rgba(139,92,246,.20); }
body[data-theme="dark"] .svndex-role-preset[data-role] > .sm-btn { color:var(--rp-fg); border-color:var(--rp-bd); background:var(--rp-bg); }
body[data-theme="dark"] .svndex-role-preset[data-role] > .sm-btn:hover, body[data-theme="dark"] .svndex-role-preset[data-role] > .sm-btn:focus-visible { color:var(--rp-fg); border-color:var(--rp-fg); background:var(--rp-bg-h); }
/* ─────────────────────────────────────────────────────────── 403 Forbidden — 안내 페이지 ─────────────────────────────────────────────────────────── */
.svndex-403-card { max-width:640px; margin:30px auto; padding:36px 36px 30px !important; text-align:center; border:1px solid #e9d5ff !important; background:linear-gradient(180deg, #fbfaff 0%, #fff 50%) !important; }
/* 403 페이지 = 카드를 콘텐츠 영역 정중앙에 (해당 페이지에만 적용 — :has) */
.svndex-admin-main:has(.svndex-403-card) { display:flex; flex-direction:column; }
.svndex-admin-main:has(.svndex-403-card) .svndex-403-card { margin-top:auto; margin-bottom:auto; }
.svndex-403-icon { display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; margin:0 auto 14px; background:linear-gradient(135deg, #7c3aed, #5b21b6); border-radius:50%; box-shadow:0 8px 24px rgba(124,58,237,.28); }
.svndex-403-icon i { font-size:2.2rem; color:#fff; }
.svndex-403-title { margin:0 0 6px; font-size:1.4rem; font-weight:700; color:var(--svx-ink); letter-spacing:-.01em; }
.svndex-403-sub { margin:0 0 22px; font-size:.92rem; color:var(--svx-mute); }
.svndex-403-sub strong { color:var(--svx-primary); font-weight:600; }
.svndex-403-detail { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; max-width:520px; margin:0 auto 22px; padding:14px 18px; background:var(--svx-bg-alt); border-radius:8px; text-align:left; }
.svndex-403-detail dt { font-size:.78rem; font-weight:600; color:var(--svx-mute); align-self:center; }
.svndex-403-detail dd { margin:0; font-size:.85rem; color:var(--svx-ink); }
.svndex-403-detail dd code { padding:2px 7px; background:#fff; border:1px solid var(--svx-line); border-radius:4px; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size:.82rem; color:#5b21b6; }
.svndex-403-desc { color:var(--svx-mute); }
.svndex-403-hint { display:flex; gap:12px; max-width:520px; margin:0 auto 24px; padding:14px 16px; text-align:left; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; }
.svndex-403-hint i { font-size:1.3rem; color:#d97706; flex-shrink:0; margin-top:1px; }
.svndex-403-hint strong { display:block; margin-bottom:4px; font-size:.88rem; color:#92400e; }
.svndex-403-hint p { margin:0; font-size:.83rem; line-height:1.55; color:#78350f; }
.svndex-403-hint code { padding:1px 5px; background:#fff7ed; border:1px solid #fed7aa; border-radius:3px; font-size:.78rem; color:#9a3412; }
.svndex-403-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.svndex-403-actions .sm-btn { padding:9px 16px; font-size:.88rem; display:inline-flex; align-items:center; gap:5px; }
.svndex-403-actions .sm-btn i { font-size:1rem; }
body[data-theme="dark"] .svndex-403-card { background:linear-gradient(180deg, rgba(124,58,237,.08) 0%, var(--svx-d-card) 50%) !important; border-color:var(--svx-d-line-strong) !important; }
body[data-theme="dark"] .svndex-403-title { color:var(--svx-d-ink-strong); }
body[data-theme="dark"] .svndex-403-detail { background:var(--svx-d-bg-alt); }
body[data-theme="dark"] .svndex-403-detail dd { color:var(--svx-d-ink); }
body[data-theme="dark"] .svndex-403-detail dd code { background:var(--svx-d-card); border-color:var(--svx-d-line-strong); color:var(--svx-mute); }
body[data-theme="dark"] .svndex-403-hint { background:rgba(217,119,6,.12); border-color:rgba(217,119,6,.4); }
body[data-theme="dark"] .svndex-403-hint p { color:#fbbf24; }
/* cg- 클래스 = 엔진코어-C (content-guard) — sm- 와 동일 패턴 */
.cg-flash { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:1rem; }
.cg-flash.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.cg-flash.error { background:#fee2e2; color:#991b1b; border-left:4px solid #dc2626; white-space:pre-wrap; font-family:'Menlo',monospace; }
.cg-section { background:var(--svx-card); padding:20px 22px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:14px; }
.cg-warn { padding:14px 18px; background:#fff8e1; border-left:4px solid #d97706; border-radius:4px; color:#92400e; font-size:1rem; margin:0 0 14px; line-height:1.6; }
.cg-editor-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cg-editor-head .meta { font-size:.8125rem; color:var(--svx-mute); }
.cg-textarea { width:100%; min-height:480px; padding:14px 16px; border:1px solid #fde68a; border-radius:6px; font-family:ui-monospace,'Menlo','Monaco',monospace; font-size:.82rem; line-height:1.55; background:#fffbeb; color:var(--svx-ink); resize:vertical; box-sizing:border-box; }
.cg-textarea:focus { outline:none; border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.12); background:#fffefa; }
.cg-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:14px; }
.cg-btn { padding:10px 20px; background:#7c3aed; color:#fff; border:0; border-radius:6px; font-size:1rem; font-weight:500; cursor:pointer; text-decoration:none; display:inline-block; }
.cg-btn:hover { background:#6d28d9; }
.cg-btn.is-secondary { background:var(--svx-card); color:var(--svx-ink); border:1px solid var(--svx-line); }
.cg-btn.is-secondary:hover { border-color:#7c3aed; color:#7c3aed; }
/* ── 7DEX PDF 리포트 (인쇄용) ── */
/* ── 진단 리포트 디자인 시스템(svx-rpt) — 7DEX · 통계 · AI챗봇 공용 셸. 모던 화이트 · 전부 --svx-* 토큰(다크 자동) · 고대비. 좌측보더·특수폰트는 쓰지 않는다 ── */
.svx-rpt { max-width:920px; margin:0 auto; background:var(--svx-card); color:var(--svx-ink); line-height:1.65; border:1px solid var(--svx-line); border-radius:12px; overflow:hidden; font-family:var(--svx-font-sans); box-shadow:var(--svx-card-shadow); }
/* 헤더 (화이트 · 좌측정렬 · 큰 타이틀 · 우상단 인쇄버튼) */
.svx-rpt-masthead { position:relative; padding:2.4rem 2.3rem 1.7rem; border-bottom:1px solid var(--svx-line); }
.svx-rpt-eyebrow { display:inline-block; margin:0 0 .7rem; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--svx-primary); }
.svx-rpt-title { margin:0 0 .5rem; font-size:2.05rem; font-weight:800; line-height:1.15; letter-spacing:-.02em; color:var(--svx-ink); }
.svx-rpt-subject { margin:0; font-size:1.02rem; color:var(--svx-mute); }
.svx-rpt-subject strong { color:var(--svx-ink); font-weight:600; }
.svx-rpt-meta { display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; margin-top:1.4rem; font-size:.82rem; color:var(--svx-mute); }
.svx-rpt-meta b { color:var(--svx-ink); font-weight:600; }
/* 헤더 우상단 액션 묶음 (기간 토글 + PDF 버튼) — 3개 리포트 공통. PDF 버튼 왼쪽에 기간. */
.svx-rpt-actions { position:absolute; top:2.1rem; right:2.3rem; z-index:6; display:flex; align-items:center; gap:.55rem; }
/* §2026-09-25 — 리포트 카드가 좁으면(폰 · 태블릿 가로 900px 전후) 우상단 액션이 제목 위에 겹쳤다 (「방문 종합 리포트」가 기간 토글에 덮이고 PDF 버튼 글자가 「PDF / · 인 / 쇄」 세 줄). 좁으면 제목 위 한 줄로 내린다. 판정은 화면 폭이 아니라 «리포트 카드 폭» 이다 — 사이드바 유무로 같은 화면 폭에서도 카드 폭이 다르다(900px 634 vs 768px 730). ⚠️ 컨테이너를 머리(masthead)가 아니라 카드(.svx-rpt)에 둔다. 머리에 두면 머리가 쌓임 맥락이 되어 「기간」 달력 팝업이 아래 본문 밑으로 깔릴 수 있다. */
.svx-rpt { container-type:inline-size; }
.svx-rpt-print { white-space:nowrap; }
.svx-rpt-title, .svx-rpt-subject { word-break:keep-all; }
/* 좁은 폭에서 「리 / 포트」「노 / 출」처럼 낱말 가운데서 끊기지 않게 */
@container (max-width: 700px) { .svx-rpt-actions { position:static; flex-wrap:wrap; justify-content:flex-end; margin:0 0 1.1rem; } }
.svx-rpt-print { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .95rem; font-size:.82rem; font-weight:600; font-family:inherit; color:#fff; background:var(--svx-primary); border:0; border-radius:8px; cursor:pointer; transition:background .15s ease; }
.svx-rpt-print:hover { background:var(--svx-primary-d); }
.svx-rpt-print .ph { font-size:1.05rem; }
/* 본문 */
.svx-rpt-body { padding:2.6rem 2.6rem 2.4rem; }
/* 섹션 헤더 */
.svx-rpt-section { margin:0 0 4.4rem; }
.svx-rpt-shead { display:flex; align-items:baseline; gap:.6rem; margin:0 0 1.8rem; padding-bottom:.9rem; border-bottom:2px solid var(--svx-line); }
.svx-rpt-num { font-size:1rem; font-weight:800; color:var(--svx-primary); font-variant-numeric:tabular-nums; }
.svx-rpt-stitle { font-size:1.3rem; font-weight:700; color:var(--svx-ink); letter-spacing:-.01em; }
/* 노트 (심플 박스 · 좌측보더 X) */
.svx-rpt-note { margin:0 0 1.9rem; padding:1.05rem 1.3rem; font-size:.88rem; line-height:1.6; color:var(--svx-ink); background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:9px; }
.svx-rpt-note strong { color:var(--svx-ink); font-weight:600; }
.svx-rpt-note.is-foot { margin:1.2rem 0 0; }
/* 섹션 하단 고지용 — 상단 여백만 */
.svx-rpt-note-legend { display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; margin-top:.7rem; font-size:.8rem; font-weight:500; }
.svx-rpt-note-legend > span { display:inline-flex; align-items:center; white-space:nowrap; color:var(--svx-ink); }
/* KPI 타일 */
.svx-rpt-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.95rem; }
.svx-rpt-kpi { padding:1.2rem 1.3rem; background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:10px; }
.svx-rpt-kpi-label { display:flex; align-items:center; gap:.4rem; margin-bottom:.55rem; font-size:.82rem; font-weight:500; color:var(--svx-mute); }
.svx-rpt-kpi-label .ph { font-size:1rem; color:var(--svx-primary); }
.svx-rpt-kpi-val { font-size:1.35rem; font-weight:700; color:var(--svx-ink); letter-spacing:-.01em; }
.svx-rpt-kpi.is-ok .svx-rpt-kpi-val { color:var(--svx-success); }
.svx-rpt-kpi.is-bad .svx-rpt-kpi-val { color:var(--svx-error); }
.svx-rpt-kpi.is-mute .svx-rpt-kpi-val { color:var(--svx-mute); }
.svx-rpt-kpi-sub { margin-top:.25rem; font-size:.78rem; color:var(--svx-mute); font-variant-numeric:tabular-nums; }
/* KPI 4열·균형막대 230px 고정 라벨이 모바일(375px)에서 뭉개지던 것 — 2단계 완화 */
/* §2026-09-25 — KPI 가 3장뿐인 곳(통계 리포트 07)은 4칸 격자에 한 칸이 비었다 → 3칸. 2칸일 때 홀수면 마지막 한 줄 전체. */
@media (min-width:861px) { .svx-rpt-kpis:has(> :nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:561px) and (max-width:860px) { .svx-rpt-kpis > :last-child:nth-child(odd) { grid-column:1 / -1; } }
@media (max-width:860px) { .svx-rpt-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .svx-rpt-kpis { grid-template-columns:minmax(0,1fr); } }
/* 푸터 */
.svx-rpt-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.1rem 2.3rem; border-top:1px solid var(--svx-line); font-size:.8rem; color:var(--svx-mute); }
.svx-rpt-foot b { color:var(--svx-ink); font-weight:600; }
.svx-rpt-foot .mark { font-weight:700; color:var(--svx-primary); }
/* AI 밸런스 8각형 (리포트 단독 섹션 · 토큰 기반 · 다크모드/인쇄 안전) */
.svx-rpt-octa { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:1.9rem; align-items:center; padding:1.9rem 1.9rem; background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:12px; }
.svx-rpt-octa-fig { margin:0; min-width:0; }
.svx-rpt-octa-fig svg { width:100%; height:auto; max-width:380px; display:block; margin:0 auto; }
.svx-rpt-octa .octa-grid { fill:none; stroke:var(--svx-line); stroke-width:1; }
.svx-rpt-octa .octa-grid.is-100 { stroke:var(--svx-mute); opacity:.45; }
.svx-rpt-octa .octa-spoke { stroke:var(--svx-line); stroke-width:1; }
.svx-rpt-octa .octa-data { fill:rgba(124,58,237,.18); stroke:var(--svx-primary); stroke-width:2; stroke-linejoin:round; }
.svx-rpt-octa .octa-dot { fill:var(--svx-primary); }
.svx-rpt-octa .octa-vnum-bg { fill:var(--svx-primary); }
.svx-rpt-octa .octa-vnum { fill:#fff; font-size:11px; font-weight:700; font-family:inherit; }
.svx-rpt-octa-side { min-width:0; }
.svx-rpt-octa-avg { display:flex; align-items:baseline; flex-wrap:wrap; gap:.1rem .6rem; margin:0 0 1.05rem; padding-bottom:.95rem; border-bottom:1px solid var(--svx-line); }
.svx-rpt-octa-avg strong { font-size:2.3rem; font-weight:800; color:var(--svx-primary); line-height:1; letter-spacing:-.02em; }
.svx-rpt-octa-avg span { font-size:.88rem; color:var(--svx-ink); font-weight:600; }
.svx-rpt-octa-avg small { display:block; font-size:.74rem; color:var(--svx-mute); font-weight:400; }
.svx-rpt-octa-legend { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.72rem; }
.svx-rpt-octa-legend li { display:grid; grid-template-columns:1.4rem minmax(0,1fr) 4.2rem 2.7rem; gap:.55rem; align-items:center; font-size:.86rem; }
.svx-rpt-octa-legend .n { width:1.4rem; height:1.4rem; display:inline-flex; align-items:center; justify-content:center; background:var(--svx-primary); color:#fff; border-radius:50%; font-size:.72rem; font-weight:700; }
.svx-rpt-octa-legend .l { color:var(--svx-ink); font-weight:600; line-height:1.25; }
/* §2026-09-25 말줄임 → 줄바꿈(폰에서 「GEO + …」로 잘렸다) */
.svx-rpt-octa-legend .track { height:6px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:99px; overflow:hidden; }
.svx-rpt-octa-legend .fill { display:block; height:100%; background:var(--svx-primary); border-radius:99px; }
.svx-rpt-octa-legend .p { text-align:right; font-weight:700; color:var(--svx-ink); font-variant-numeric:tabular-nums; }
@media (max-width:680px) { .svx-rpt-octa { grid-template-columns:minmax(0, 1fr); gap:1.2rem; } }
/* 리포트 공통 — 가로 막대 리스트 (통계·챗봇 리포트 공용: 유입경로/인기페이지/디바이스 등) */
.svx-rpt-bars { list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.15rem; }
/* 라벨(아이콘+한글명) + 풀폭 막대(track=1fr 가 좌우폭 채움) + 값. 길어도 OK = 충분히 큼직하게. */
.svx-rpt-bars > li { display:grid; grid-template-columns:minmax(0,23rem) minmax(0,1fr) 5.2rem; gap:1.1rem; align-items:center; font-size:1rem; }
.svx-rpt-bars .lbl { color:var(--svx-ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.svx-rpt-bars .lbl .sub { color:var(--svx-mute); font-weight:400; font-size:.86em; margin-left:.35em; }
.svx-rpt-bars .track { height:11px; background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:99px; overflow:hidden; }
.svx-rpt-bars .fill { display:block; height:100%; background:var(--svx-primary); border-radius:99px; min-width:2px; }
.svx-rpt-bars .fill.is-alt { background:var(--svx-mute); }
.svx-rpt-bars .val { text-align:right; font-weight:700; color:var(--svx-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* 단위/퍼센트 = 숫자 옆 인라인 (block 줄바꿈 제거 — "59회" / "3,485 73%" 한 줄) */
.svx-rpt-bars .val small { display:inline; margin-left:.3em; color:var(--svx-mute); font-weight:500; font-size:.78rem; }
.svx-rpt-bars .rank { display:inline-flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; margin-right:.5rem; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:50%; font-size:.7rem; font-weight:700; color:var(--svx-mute); flex:0 0 auto; }
/* 리포트 2열 분할 (좁은 표/막대 나란히) */
.svx-rpt-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.7rem; }
.svx-rpt-split > div { min-width:0; }
/* split(반쪽 폭) 내부 막대 = 기본 그리드(190px 라벨+120px 바)가 넘쳐 값이 겹침 → 라벨 유연(생략)+바/값 컴팩트로 폭 안에 안착 (가로넘침 방지) */
.svx-rpt-split .svx-rpt-bars > li { grid-template-columns:minmax(0,1fr) minmax(52px,6.5rem) 3rem; gap:.9rem; }
.svx-rpt-subhead { margin:0 0 1.25rem; font-size:1.05rem; font-weight:700; color:var(--svx-ink); display:flex; align-items:center; gap:.45rem; }
.svx-rpt-lead { margin:-.4rem 0 1.8rem; padding:14px 18px; font-size:.95rem; line-height:1.65; color:var(--svx-ink); background:#f5f3ff; border:1px solid #ddd6fe; border-radius:10px; }
.svx-rpt-lead strong { color:var(--svx-primary-d); font-weight:700; }
body[data-theme="dark"] .svx-rpt-lead { background:rgba(167,139,250,.08); border-color:rgba(167,139,250,.28); }
body[data-theme="dark"] .svx-rpt-lead strong { color:var(--svx-d-primary); }
.svx-rpt-subhead .ph { color:var(--svx-primary); font-size:1.15rem; }
.svx-rpt-subhead.is-gap { margin-top:2.6rem; }
/* 헤딩 내 부가 카운트 small (부모 bold 상속을 400으로 되돌림 + mute 색) */
.stat-count-sub { font-weight:400; color:var(--svx-mute); }
@media (max-width:680px) { .svx-rpt-split { grid-template-columns:minmax(0, 1fr); gap:1.3rem; } }
/* 리포트 화면 전용 툴바 (기간 토글 등 — 인쇄 시 숨김) */
.svx-rpt-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:.6rem; flex-wrap:wrap; max-width:920px; margin:0 auto .9rem; }
/* 빈 데이터 안내 (정직 — 데이터 없을 때) */
.svx-rpt-empty { padding:1rem 1.15rem; font-size:.86rem; color:var(--svx-mute); background:var(--svx-bg-alt); border:1px dashed var(--svx-line); border-radius:9px; text-align:center; }
/* 리포트 스펙 그리드 (key/value — 챗봇 답변 엔진 구성 등) */
.svx-rpt-spec { display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; }
.svx-rpt-spec > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:9px; font-size:.88rem; }
.svx-rpt-spec .k { color:var(--svx-mute); font-weight:500; display:inline-flex; align-items:center; gap:.4rem; }
.svx-rpt-spec .k .ph { color:var(--svx-primary); font-size:1rem; }
.svx-rpt-spec .v { color:var(--svx-ink); font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.svx-rpt-spec .v.is-mono { font-family:'SF Mono','Menlo','Monaco',monospace; font-size:.82rem; }
@media (min-width:681px) { .svx-rpt-spec > :last-child:nth-child(odd) { grid-column:1 / -1; } }
/* §2026-09-25 홀수 칸이면 마지막 칸 한 줄 전체 */
@media (max-width:680px) { .svx-rpt-spec { grid-template-columns:minmax(0, 1fr); } }
/* 막대 없는 평면 리스트 (근거부족 질문 등 — 라벨 + 보조정보) */
.svx-rpt-bars.is-plain > li { grid-template-columns:minmax(0,1fr) auto; }
.svx-rpt-bars.is-plain .lbl { white-space:normal; }
.svx-rpt-bars.is-plain .meta { color:var(--svx-mute); font-size:.78rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* 리포트 시간 패턴 — 컴팩트 세로 막대 (시간대 24 / 요일 7 / 일별 추이) */
.svx-rpt-spark { display:flex; align-items:flex-end; gap:7px; height:96px; margin:1.2rem 0 .2rem; }
.svx-rpt-spark > i { flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; }
/* 막대 자체는 최대 40px 로 캡 + 슬롯 중앙 = 일수 적어도(일별추이) 뚱뚱해지지 않음. 슬롯은 채워서 축 라벨 정렬 유지. */
.svx-rpt-spark > i > b { display:block; width:100%; max-width:40px; background:var(--svx-primary); border-radius:4px 4px 0 0; min-height:3px; }
.svx-rpt-spark > i.is-peak > b { background:var(--svx-primary-d,#6d28d9); }
.svx-rpt-spark.is-week > i > b { background:var(--svx-mute); }
.svx-rpt-spark.is-week > i.is-peak > b { background:var(--svx-primary); }
.svx-rpt-spark > i > em { position:absolute; top:-1rem; left:-2px; right:-2px; text-align:center; font-size:.58rem; font-weight:700; font-style:normal; color:var(--svx-ink); font-variant-numeric:tabular-nums; }
.svx-rpt-spark-axis, .svx-rpt-spark-wklabels { display:flex; font-size:.66rem; color:var(--svx-mute); font-variant-numeric:tabular-nums; }
.svx-rpt-spark-axis { justify-content:space-between; margin-top:.3rem; }
.svx-rpt-spark-wklabels { margin-top:.3rem; }
.svx-rpt-spark-wklabels > span { flex:1 1 0; text-align:center; }
/* ════ 리포트 심플 화이트 모던 다듬기 (svx-rpt 공용 — 통계·챗봇·7dex) ════ */
.svx-rpt { border-radius:14px; box-shadow:0 1px 3px rgba(20,22,30,.04), 0 10px 30px rgba(20,22,30,.06); }
.svx-rpt-masthead { padding:2.7rem 2.4rem 1.7rem; }
.svx-rpt-masthead::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--svx-primary), var(--svx-primary-d, #6d28d9)); }
.svx-rpt-eyebrow { letter-spacing:.18em; }
.svx-rpt-title { font-size:2.2rem; letter-spacing:-.025em; }
.svx-rpt-meta { gap:.4rem 0; }
.svx-rpt-meta span { padding:0 1rem; border-left:1px solid var(--svx-line); line-height:1; }
.svx-rpt-meta span:first-child { padding-left:0; border-left:0; }
.svx-rpt-shead { align-items:center; gap:.65rem; }
.svx-rpt-num { display:inline-flex; align-items:center; justify-content:center; min-width:1.7rem; height:1.7rem; padding:0 .4rem; background:var(--svx-primary); color:#fff; border-radius:7px; font-size:.78rem; }
.svx-rpt-stitle { font-size:1.26rem; }
.svx-rpt-kpi { background:var(--svx-card); border:1px solid var(--svx-line); border-radius:12px; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.svx-rpt-kpi:hover { border-color:var(--svx-primary); box-shadow:0 6px 18px rgba(124,58,237,.09); transform:translateY(-1px); }
.svx-rpt-kpi-val { font-size:1.6rem; }
.svx-rpt-note { background:var(--svx-card); border:1px solid var(--svx-line); border-left:3px solid var(--svx-primary); }
.svx-rpt-spec > div { background:var(--svx-card); }
.svx-rpt-bars .track { height:9px; background:var(--svx-bg-alt); border-color:transparent; }
.svx-rpt-bars .fill { border-radius:99px; }
.svx-rpt-bars .rank { background:var(--svx-bg-alt); }
.svx-rpt-octa-legend .fill { border-radius:99px; }
.pr-balance-row .bar-fill { border-radius:99px; }
.svx-rpt-subhead { font-size:.95rem; }
/* 상태 닷 (챗봇 학습메뉴 스타일 — 크고 밝게: 흰 헤일로 + 컬러 글로우) */
.st-dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin:0 .55em 0 1px; background:#cbd5e1; vertical-align:middle; flex:0 0 auto; box-shadow:0 0 0 2px var(--svx-card), 0 0 0 3px rgba(148,163,184,.3); }
.st-applied .st-dot, .st-dot.st-applied { background:#22c55e; box-shadow:0 0 0 2px var(--svx-card), 0 0 0 3px rgba(34,197,94,.4); }
.st-capable .st-dot, .st-dot.st-capable { background:#8b5cf6; box-shadow:0 0 0 2px var(--svx-card), 0 0 0 3px rgba(139,92,246,.4); }
.st-measure .st-dot, .st-dot.st-measure { background:#f59e0b; box-shadow:0 0 0 2px var(--svx-card), 0 0 0 3px rgba(245,158,11,.45); }
.st-off .st-dot, .st-dot.st-off { background:#cbd5e1; box-shadow:0 0 0 2px var(--svx-card), 0 0 0 3px rgba(148,163,184,.3); }
.st-error .st-dot, .st-dot.st-error { background:#ef4444; box-shadow:0 0 0 2px var(--svx-card), 0 0 0 3px rgba(239,68,68,.55); }
/* 세부요소 상태를 색상(닷) 단독이 아니라 기호로도 전달 — 흑백 인쇄·저시력 사용자 대비 */
.st-symbol { display:inline-block; font-size:.75rem; font-weight:700; margin-right:.35em; color:var(--svx-mute); }
.st-applied .st-symbol { color:#22c55e; }
.st-capable .st-symbol { color:#8b5cf6; }
.st-measure .st-symbol { color:#f59e0b; }
.st-error .st-symbol { color:#ef4444; }
/* ── 7dex 진단 콘텐츠 (셸 안 — 토큰 기반) ── */
/* 균형 차트 */
/* §2026-09-25 — 이름 칸이 230px 고정 + 한 줄 말줄임이라 「8. GEO + LLMO 생성 엔진 + …」가 잘렸다(1440 에서도 막대 칸만 넓었다). 넓으면 이름 칸을 키우고, 모자라면 줄을 바꾼다. */
.pr-balance-row { display:grid; grid-template-columns:minmax(230px, 38%) minmax(0, 1fr) 52px; gap:1rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--svx-line); }
.pr-balance-row:last-child { border-bottom:0; }
.pr-balance-row .label { font-size:.96rem; line-height:1.35; color:var(--svx-ink); }
.pr-balance-row .label .no { margin-right:.4em; color:var(--svx-mute); font-variant-numeric:tabular-nums; }
.pr-balance-row .label strong { margin-right:.35em; color:var(--svx-ink); font-weight:700; }
.pr-balance-row .label .ko { color:var(--svx-mute); font-weight:400; font-size:.86em; }
.pr-balance-row .bar-track { height:9px; background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:99px; overflow:hidden; }
.pr-balance-row .bar-fill { height:100%; background:var(--svx-primary); border-radius:99px; }
.pr-balance-row.is-extend .bar-fill { background:#6d28d9; }
.pr-balance-row .pct { text-align:right; font-weight:700; font-size:.96rem; color:var(--svx-ink); font-variant-numeric:tabular-nums; }
.pr-balance-row.is-measure .pct { color:var(--svx-warn); font-size:.74rem; }
.pr-balance-row.is-measure .bar-fill { background:repeating-linear-gradient(45deg,var(--svx-warn) 0 4px,transparent 4px 8px); opacity:.55; }
/* ⚠️ §2026-09-25 — 이 좁은 화면 규칙은 종전에 위쪽(.svx-rpt-kpis 옆)에 있어서 **뒤에 오는 기본 규칙에 눌려 한 번도 적용되지 않았다** (미디어쿼리는 특이도를 올리지 않는다 — §12-80·85). 그래서 폰에서도 이름 칸이 230px 고정이라 이름이 잘리고 퍼센트가 카드 끝에 붙었다. 기본 규칙 «뒤»에 둔다. */
@media (max-width:860px) { .pr-balance-row { grid-template-columns:minmax(120px, 34%) minmax(0, 1fr) 46px; gap:.5rem; } }
@media (max-width:560px) { .pr-balance-row { grid-template-columns:minmax(0, 1fr); gap:.3rem; } .pr-balance-row .pct { text-align:left; } }
/* 색인수단 뱃지 (브랜드 색 — 양 테마 공통) */
.pr-badge { display:inline-flex; align-items:center; justify-content:center; min-height:21px; padding:2px 9px 0; font-size:.6rem; font-weight:700; letter-spacing:.06em; line-height:1; color:#fff; border-radius:99px; white-space:nowrap; }
.pr-badge--inline { min-height:17px; font-size:.58rem; padding:0 7px; margin-left:.25rem; vertical-align:middle; }
.pr-badge.is-search { background:#2563eb; }
.pr-badge.is-ai { background:#7c3aed; }
.pr-badge.is-voice { background:#0ea5e9; }
.pr-badge.is-visual { background:#db2777; }
.pr-badge.is-agent { background:#4f46e5; }
.pr-badge.is-trust { background:#059669; }
.pr-badge.is-perf { background:#d97706; }
.pr-badge.is-law { background:#dc2626; }
.pr-badge.is-schema { background:#475569; }
/* 색인수단 뱃지 범례 */
.pr-badge-legend { display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.5rem; margin:0 0 1.3rem; padding:1.1rem 1.25rem; background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:10px; }
.pr-badge-legend-title { grid-column:1/-1; margin-bottom:.3rem; font-size:.82rem; font-weight:700; color:var(--svx-ink); }
.pr-badge-legend-item { display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--svx-ink); line-height:1.45; }
.pr-badge-legend-item .pr-badge { flex:0 0 auto; }
@media (max-width:640px) { .pr-badge-legend { grid-template-columns:minmax(0, 1fr); } }
/* 카드 상세 (간격↑ · 큰 타이틀 · 풀 보더) */
.pr-card-detail { position:relative; margin:0 0 1.5rem; padding:1.3rem 1.4rem; background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:12px; }
.pr-card-detail:last-child { margin-bottom:0; }
.pr-card-badges { position:absolute; top:1.3rem; right:1.4rem; display:inline-flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; max-width:55%; }
.pr-card-detail h4 { margin:0 0 .7rem; padding-right:7rem; font-weight:700; font-size:1.18rem; color:var(--svx-ink); }
.pr-card-detail h4 .ko { color:var(--svx-mute); font-weight:500; font-size:.82em; }
.pr-card-detail h4 .pct { margin-left:.4rem; color:var(--svx-primary); }
.pr-card-detail.is-extend h4 .pct { color:#6d28d9; }
.pr-card-detail.is-measure h4 .pct { color:var(--svx-warn); }
.pr-card-detail h4 .sdx-text-mute-888 { font-weight:400; font-size:.78rem; color:var(--svx-mute); }
.pr-card-detail .subs { list-style:none; margin:.6rem 0 0; padding:0; font-size:.92rem; line-height:1.7; }
.pr-card-detail .subs > li { padding:.22rem 0; color:var(--svx-ink); }
.pr-card-detail .subs > li strong { color:var(--svx-ink); }
.pr-card-detail .subs li .st-tag { margin-left:.45em; font-size:.74rem; font-weight:500; color:var(--svx-mute); }
.pr-card-detail .subs li .sub-el-count { margin-left:.4em; padding:1px 8px; font-size:.7rem; font-weight:700; color:var(--svx-primary); background:var(--svx-card); border:1px solid var(--svx-line); border-radius:99px; vertical-align:middle; }
.pr-card-detail .sub-elements { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.2rem 1rem; margin:.5rem 0 .55rem; padding:.75rem .9rem; font-size:.87rem; line-height:1.55; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:8px; }
.pr-card-detail .sub-elements li { display:flex; align-items:center; color:var(--svx-ink); }
@media (max-width:640px) { .pr-card-detail .sub-elements { grid-template-columns:minmax(0, 1fr); } }
/* 보강 우선순위 (풀 보더 · 좌측보더 X) */
.pr-priority { padding:1.2rem 1.4rem; background:var(--svx-error-bg); border:1px solid var(--svx-error); border-radius:12px; }
.pr-priority h4 { margin:0 0 .6rem; font-weight:700; font-size:1.08rem; color:var(--svx-error-tx); }
.pr-priority ul { margin:0; padding-left:1.3rem; font-size:.92rem; line-height:1.85; color:var(--svx-ink); }
/* 인쇄/PDF — A4 기준 · 관리자 셸 숨김 · 화면과 동일 색 출력 (브랜드 색 유지) */
@page { size:A4; margin:13mm 12mm; }
@media print { html, body { background:#fff !important; } /* PDF/인쇄에서 배경·닷·배지·막대 색이 누락되지 않도록 강제 (브라우저 기본은 잉크 절약차 제거) */ .svx-rpt, .svx-rpt * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; } .svndex-admin-sidebar, .svndex-admin-header, .svndex-acc-buttons, .svndex-aichat-launcher, .svndex-menu-arrow, .svx-rpt-print, .svx-rpt-actions, .svx-rpt-toolbar, .svndex-module-footer { display:none !important; } .svndex-admin-shell { display:block !important; height:auto !important; overflow:visible !important; } .svndex-admin-main { padding:0 !important; overflow:visible !important; } /* A4 폭 100% · 외곽 카드 장식 제거 (외곽 여백은 @page 가 담당) */ .svx-rpt { max-width:100% !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; } .svx-rpt-masthead { padding:0 0 1.1rem !important; } .svx-rpt-body { padding:1.2rem 0 0 !important; } .svx-rpt-foot { padding:1rem 0 0 !important; } .svx-rpt-section { margin-bottom:1.5rem !important; } .svx-rpt-title { font-size:1.75rem !important; } /* 페이지 넘김 보호 — 카드/타일/막대/8각형이 두 장에 걸쳐 잘리지 않게 */ .pr-card-detail, .pr-badge-legend, .pr-priority, .svx-rpt-kpi, .pr-balance-row, .svx-rpt-octa, .sub-elements { break-inside:avoid; page-break-inside:avoid; } .svx-rpt-shead { break-inside:avoid; break-after:avoid; page-break-after:avoid; } /* 인쇄 폭(A4 186mm)은 화면보다 훨씬 좁다 — 열 수를 명시하고 넘침을 원천 차단한다(§12-43). ⚠ 인쇄 미디어쿼리는 «페이지 박스» 폭으로 평가돼 화면 브레이크포인트와 어긋난다. 여기서 못박는다. */ @media print { .svx-rpt, .svx-rpt-body, .svx-rpt-section { max-width:100% !important; overflow:visible !important; } .svx-rpt-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .svx-rpt-split { grid-template-columns:minmax(0,1fr) !important; } .svx-rpt-octa { grid-template-columns:minmax(0,1fr) !important; } .svx-rpt-bars > li { grid-template-columns:minmax(0,1fr) minmax(0,8rem) 4rem !important; } .svx-rpt table { width:100% !important; table-layout:fixed; } .svx-rpt img, .svx-rpt svg { max-width:100% !important; height:auto !important; } } }
/* ── 화면 미세 정돈 (여백·위계 — 레퍼런스: 넉넉한 화이트스페이스·명확한 위계) ── */
.svx-rpt-body { padding:2.1rem 2.4rem 2.2rem; }
.svx-rpt-section { margin-bottom:2.5rem; }
.svx-rpt-shead { margin-bottom:1.2rem; padding-bottom:.7rem; }
.svx-rpt-kpis { gap:.7rem; }
.svx-rpt-kpi { padding:1.05rem 1.15rem; }
.svx-rpt-kpi-val { font-variant-numeric:tabular-nums; }
/* ── 인쇄(A4) 폰트 크기 — 본문 10.5pt · 제목 19pt · 소제목 13pt (출력 가독성, 업계 표준) ── */
@media print { .svx-rpt { font-size:10.5pt !important; line-height:1.5 !important; } .svx-rpt-eyebrow { font-size:8pt !important; } .svx-rpt-title { font-size:19pt !important; } .svx-rpt-subject { font-size:10.5pt !important; } .svx-rpt-meta { font-size:8.5pt !important; } .svx-rpt-num { font-size:8.5pt !important; min-width:1.5rem; height:1.5rem; } .svx-rpt-stitle { font-size:13pt !important; } .svx-rpt-note { font-size:9pt !important; } .svx-rpt-subhead { font-size:10pt !important; } .svx-rpt-kpi-label { font-size:8.5pt !important; } .svx-rpt-kpi-val { font-size:15pt !important; } .svx-rpt-kpi-sub { font-size:8pt !important; } .svx-rpt-bars { font-size:9.5pt !important; } .svx-rpt-spec { font-size:9.5pt !important; } .svx-rpt-foot { font-size:8pt !important; } .pr-card-detail h4 { font-size:12pt !important; } .pr-card-detail .subs { font-size:9.5pt !important; } .pr-balance-row .label { font-size:9.5pt !important; } .svx-rpt-octa-legend { font-size:9pt !important; } }
/* ── 7DEX 정직 표기 — 상태 색상 + 고지 배너 + 「측정 전」 변형. % 는 «기능 적용·설정 완성도» 이지 검색순위·성능 점수가 아니라는 것을 시각적으로 분리한다 ── */
/* 상태 색상 (적용/자동제공/측정전/미적용) — 범례 dot + 텍스트 공통 */
.st-applied { color:#1a7c4a; }
.st-capable { color:#4f46e5; }
.st-measure { color:#d97706; }
.st-off { color:#8a8d93; }
/* 인라인 상태 텍스트 녹/적 (MMO/AGO 섹션 등 — PHP 인라인 style 제거용) */
.sdx-txt-ok { color:#1a7c4a; }
.sdx-txt-bad { color:#c0392b; }
.st-error { color:#dc2626; }
/* ⓘ 아이콘 정렬 — 상자 높이를 본문 첫 줄 높이와 같게 주고 그 안에서 글리프를 중앙에 둔다. top:-1px 은 광학 보정(원형 글리프는 기하학적 중앙에 두면 눈에는 살짝 아래로 보인다). ⚠️ height 에 em 을 쓰지 말 것 — «아이콘 자기 font-size» 기준이 되어 상자가 커진다. rem 으로 둔다. ⚠️ align-items:center 도 쓰지 말 것 — 두 줄이 되면 아이콘이 가운데로 내려간다. */
/* 아이콘은 «첫 줄» 에 붙인다 — 줄 수가 늘어도 위치가 그대로다. 상자 높이를 본문 line-height 와 같게 주면 «계산» 이 아니라 상속값을 그대로 쓰므로 폰트가 바뀌어도 따라간다. */
/* 범례는 본문 흐름 안의 조각이다 — margin-top 으로 줄을 밀면 줄 높이가 비대칭이 된다. 세로 정렬은 vertical-align 로 잡고, 좌우 간격만 둔다. */
/* '측정 전' 변형 — 인덱스 세로막대 / 카드 / 대시보드 태그 / 카드 헤더 */
.sdx-vbar.is-measure .pct, .sdx-vbar.is-measure .bar { color:#d97706; }
.sdx-vbar.is-measure .pct { font-size:.58rem; }
.sdx-vbar.is-measure .bar { background:repeating-linear-gradient(45deg, #f3d8a8 0 4px, #fbe6c8 4px 8px); }
.sdx-card .pct.is-measure, .dash-7dex-tag .pct.is-measure, .svndex-card-header .pct.is-measure { color:#d97706; font-size:.95rem; }
.dash-7dex-tag.is-measure .pct.is-measure { font-size:.85rem; }
.sdx-card.is-measure-card { border-color:#f0c987; }
/* ── 7DEX 공통 유틸 클래스(.dx-*) — 전부 var 토큰이라 다크가 자동으로 따라온다 ── */
.dx-info-box { padding:1rem 1.2rem; border-radius:6px; font-size:.85rem; line-height:1.7; margin-bottom:1rem; }
.dx-info-box.is-warn { background:var(--svx-warn-bg); color:var(--svx-warn-tx); }
.dx-info-box.is-mute { background:var(--svx-bg-alt); color:var(--svx-ink); }
.dx-info-box.is-card { background:var(--svx-card); border:1px solid var(--svx-line); color:var(--svx-ink); }
.dx-info-box.is-error { background:var(--svx-error-bg); color:var(--svx-error-tx); }
.dx-info-box.is-success { background:var(--svx-success-bg); color:var(--svx-success-tx); }
/* 7dex 카드 → 콘텐츠 마스터 바로가기 배너 */
.svndex-card-orglink { display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap; margin-bottom:18px; }
.svndex-card-orglink-msg { display:inline-flex; align-items:center; gap:7px; }
.svndex-card-orglink-go { flex-shrink:0; white-space:nowrap; }
/* 노출 관리 카드(content/exposure) 상단 안내 배너 — 기본값은 여기, 튜닝은 7DEX */
.svndex-exposure-guide { border-left:3px solid var(--svx-primary); margin-bottom:20px; }
.svndex-exposure-guide p { margin:0 0 .55rem; }
.svndex-exposure-guide p:last-child { margin-bottom:0; }
.svndex-exposure-guide__lead { font-size:.95rem; font-weight:700; color:var(--svx-primary); }
.svndex-exposure-guide__tune { margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--svx-line); color:var(--svx-mute); }
.svndex-exposure-guide__tune strong { color:var(--svx-ink); }
.svndex-exposure-guide a { color:var(--svx-primary); font-weight:600; text-decoration:underline; }
.dx-status-box { padding:.6rem .9rem; border-radius:4px; font-size:.85rem; margin:.4rem 0; background:var(--svx-bg-alt); color:var(--svx-mute); }
/* §2026-09-25 수식어 없는 상자(«판정하지 않습니다» 류)에 배경이 없어 여백만 남아 들여 쓴 맨 글자처럼 보였다 → 중립 상자 */
.dx-status-box.is-ok { background:var(--svx-success-bg); color:var(--svx-success-tx); }
.dx-status-box.is-bad { background:var(--svx-error-bg); color:var(--svx-error-tx); }
.dx-status-pill { display:inline-block; padding:1px 8px; border-radius:99px; font-size:.7rem; font-weight:600; }
.dx-status-pill.is-ok { background:var(--svx-success-bg); color:var(--svx-success-tx); }
.dx-status-pill.is-bad { background:var(--svx-error-bg); color:var(--svx-error-tx); }
.dx-status-pill.is-mute { background:var(--svx-bg-alt); color:var(--svx-mute); border:1px solid var(--svx-line); }
/* §2026-09-25 「미사용」이 알약 없는 굵은 글자로 보여 「사용 중」 알약과 모양이 달랐다 */
.dx-cmd { display:block; padding:.4rem .6rem; margin:.4rem 0; background:#23262c; color:#dff5e3; border-radius:4px; font-size:.78rem; font-family:'Menlo','Monaco',monospace; line-height:1.5; overflow:auto; }
.dx-cmd-inline { display:inline-block; padding:.3rem .5rem; background:#23262c; color:#dff5e3; border-radius:4px; font-size:.75rem; font-family:'Menlo','Monaco',monospace; }
.dx-code-chip { display:inline-block; padding:1px 6px; background:var(--svx-card); color:var(--svx-ink); border:1px solid var(--svx-line); border-radius:3px; font-size:.75rem; font-family:'Menlo','Monaco',monospace; margin-right:.2em; }
.dx-info-row { display:flex; justify-content:space-between; align-items:center; padding:.5rem .7rem; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:4px; font-size:.85rem; }
.dx-back-btn { display:inline-block; padding:10px 14px; background:var(--svx-card); color:var(--svx-ink); border:1px solid var(--svx-line); border-radius:4px; font-size:1rem; line-height:1.2; text-decoration:none; box-sizing:border-box; transition:border-color .15s ease, color .15s ease; }
.dx-back-btn:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.dx-tr-mute td { background:var(--svx-bg-alt); }
.dx-tr-bad td { background:var(--svx-error-bg); }
.dx-tr-divider { border-top:1px solid var(--svx-line); }
.dx-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.dx-table th { padding:.5rem; text-align:left; border-bottom:1px solid var(--svx-line); font-weight:600; color:var(--svx-ink); }
.dx-table th.is-center { text-align:center; }
.dx-table th.is-right { text-align:right; }
.dx-table td { padding:.5rem; border-bottom:1px solid var(--svx-line); color:var(--svx-ink); }
.dx-table td.is-center { text-align:center; }
.dx-table td.is-right { text-align:right; }
.dx-table td.is-mono { font-family:'SF Mono','Menlo','Monaco',monospace; font-size:.8rem; }
.dx-table.is-sm { font-size:.8rem; }
.dx-table.is-xs { font-size:.75rem; }
.dx-table tr:last-child td { border-bottom:0; }
.dx-table td.is-status-sent { color:var(--svx-success-tx); }
.dx-table td.is-status-failed { color:var(--svx-error-tx); }
.dx-table td.is-status-pending, .dx-table td.is-status-queued { color:var(--svx-mute); }
/* .dx-btn — 표 안·인라인용 공용 버튼. 값·색은 .sm-btn 계열과 같은 토큰을 쓴다 */
.dx-btn { padding:8px 16px; background:var(--svx-primary); color:#fff; border:0; border-radius:6px; font-size:.875rem; font-weight:500; cursor:pointer; text-decoration:none; display:inline-block; line-height:1.3; }
.dx-btn:hover { background:var(--svx-primary-d); }
.dx-btn.is-sm { padding:6px 12px; font-size:.8rem; }
.dx-btn.is-xs { padding:4px 10px; font-size:.75rem; }
.dx-btn.is-secondary { background:var(--svx-card); color:var(--svx-ink); border:1px solid var(--svx-line); }
.dx-btn.is-secondary:hover { background:var(--svx-card); border-color:var(--svx-primary); color:var(--svx-primary); }
.dx-btn[disabled] { opacity:.5; cursor:not-allowed; }
/* 진료 과목 → 어디로 출력되는지 안내 (한방 대응). */
.org-spec-route { margin-top:6px; font-size:.78rem; line-height:1.6; }
.org-spec-route p { margin:2px 0; color:var(--svx-ink); }
.org-spec-route code { font-size:.72rem; }
/* 메인(홈) 행 SEO 탭 상단 안내 — 제목·설명·공유이미지는 노출관리 소관. */
.pt-home-notice { margin-bottom:14px; }
.pt-home-notice em { font-style:normal; font-weight:600; color:var(--svx-primary); }
.dx-pre { background:var(--svx-bg-alt); padding:12px; border-radius:6px; max-height:600px; overflow:auto; font-size:.8125rem; line-height:1.4; color:var(--svx-ink); font-family:'SF Mono','Menlo','Monaco',monospace; }
.dx-tab-link { display:inline-block; padding:6px 12px; margin:0 4px 4px 0; border:1px solid var(--svx-line); border-radius:4px; background:var(--svx-bg-alt); color:var(--svx-ink); text-decoration:none; transition:background .15s ease, color .15s ease; }
.dx-tab-link:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.dx-tab-link.is-active { background:var(--svx-primary); color:#fff; border-color:var(--svx-primary); }
.dx-log-filter { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.dx-log-filter label { display:flex; flex-direction:column; gap:3px; font-size:.75rem; color:var(--svx-mute); }
.dx-log-filter button { align-self:end; }
/* 에디터 도구줄 — 줄바꿈 자리에 걸린 구분선(layout.js 가 표시). 관리자 화면에서만 붙는다. */
.svx-editor-toolbar > .svx-editor-tb-sep.is-line-edge { display:none; }
/* 폰 — 오른쪽 끝 묶음(되돌리기·다시하기·문서·미리보기)이 줄 끝에서 1+3 으로 갈렸다 → 빈칸을 한 줄 전체로 두어 그 묶음이 새 줄에서 함께 시작한다. */
@media (max-width:640px) { .svndex-admin-main .svx-editor-toolbar > .svx-editor-tb-spacer { flex-basis:100%; height:0; } }
/* §2026-09-25 — 칸 종류(글자·날짜·선택)마다 높이가 달라 라벨 줄이 들쭉날쭉했다 → 높이를 맞춘다. 검색칸은 안내 문구가 다 보이게 넓게. */
.dx-log-filter input:not([type=checkbox]):not([type=radio]), .dx-log-filter select, .dx-log-filter button { height:36px; box-sizing:border-box; }
.dx-log-filter label:has(input[name="q"]) { flex:1 1 280px; max-width:420px; }
.dx-log-filter label:has(input[name="q"]) input { width:100%; }
/* 로그 표 — 행 전체 JSON 한 줄(`<pre>`) 대신 칸별 표(log-view.php). 짧은 값은 한 줄, 긴 값·JSON 은 앞부분만 보이고 눌러 펼친다. */
.dx-log-table th, .dx-log-table td { white-space:nowrap; vertical-align:top; }
.dx-log-table .dx-log-empty { color:var(--svx-mute); }
.dx-log-more > summary { cursor:pointer; color:var(--svx-ink); list-style-position:inside; }
.dx-log-more > summary:hover { color:var(--svx-primary); }
.dx-log-more[open] > summary { color:var(--svx-primary); }
.dx-log-full { margin-top:6px; padding:8px 10px; background:var(--svx-bg-alt); border-radius:6px; white-space:pre-wrap; word-break:break-all; min-width:260px; max-width:560px; max-height:320px; overflow:auto; font-family:'SF Mono','Menlo','Monaco',monospace; font-size:.75rem; line-height:1.45; }
/* 페이지 넘김 — 목록 «밖» 임이 보여야 한다. 종전엔 구분선 없이 margin-top:10px 로 표에 붙어 있어 운영자가 «없는 줄 알았다»(2026-09-23 지적). 선으로 끊고, 띄우고, 가운데 두고, 버튼을 키운다. ⚠️ 이 클래스는 LOG·알림·문의·공지 목록도 같이 쓴다 — 고치면 그 화면들도 같이 바뀐다(같은 결함이었다). */
.dx-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:22px; padding-top:16px; border-top:1px solid var(--svx-line); }
.dx-pager .dx-tab-link { margin:0; padding:8px 18px; font-weight:600; }
.dx-pager .dx-tab-link:hover { background:var(--svx-primary); color:#fff; border-color:var(--svx-primary); }
.dx-checkbox-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.dx-checkbox-row label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; }
/* 노출 차단 대조 «예외» 토글 — 체크 여부가 곧 상태다(동작 라벨 금지). */
.exb-ack { display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; font-size:.8rem; }
.exb-ack input { margin:0; flex-shrink:0; }
.exb-ack.is-readonly { cursor:default; color:var(--svx-mute); }
.dx-masked-display { font-size:1.6rem; font-weight:600; padding:1.4rem 1rem; text-align:center; letter-spacing:.04em; background:var(--svx-bg-alt); color:var(--svx-ink); border-radius:6px; margin:1rem 0; }
.dx-flash { padding:.8rem 1rem; margin-bottom:1rem; border-radius:6px; font-size:.9rem; }
.dx-flash.is-success { background:var(--svx-success-bg); color:var(--svx-success-tx); }
.dx-flash.is-error { background:var(--svx-error-bg); color:var(--svx-error-tx); }
.dx-flash.is-warn { background:var(--svx-warn-bg); color:var(--svx-warn-tx); }
.dx-form-mute { padding:1rem; background:var(--svx-bg-alt); border-radius:6px; margin-bottom:2rem; }
/* 일반 폼 row — 라벨 위 / input 아래 (block 형태) — admin/setting 페이지용 */
.dx-form-row { margin-bottom:14px; display:block; }
.dx-form-row > label { display:block; margin-bottom:6px; font-size:.875rem; color:var(--svx-ink); font-weight:500; }
.dx-form-row > label small { color:var(--svx-mute); font-weight:400; }
.dx-form-row > input[type=text], .dx-form-row > input[type=email], .dx-form-row > input[type=password], .dx-form-row > input[type=tel], .dx-form-row > input[type=url], .dx-form-row > input[type=number], .dx-form-row > select, .dx-form-row > textarea { width:100%; padding:10px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:.95rem; font-family:inherit; background:var(--svx-card); color:var(--svx-ink); box-sizing:border-box; }
.dx-form-row > input:focus, .dx-form-row > select:focus, .dx-form-row > textarea:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.dx-form-row > textarea { min-height:80px; resize:vertical; line-height:1.5; }
/* placeholder = 입력값과 확실히 구분되게 흐리게 — CMS 전역 단일 규칙 (관리자·인증·마이페이지 전체 통일) */
input::placeholder, textarea::placeholder { color:#b8bdc7; opacity:1; }
body[data-theme="dark"] input::placeholder, body[data-theme="dark"] textarea::placeholder { color:#565d68; }
.dx-form-row > .hint { margin:6px 0 0; font-size:.8rem; color:var(--svx-mute); line-height:1.5; }
/* 법적 주의가 필요한 입력칸 힌트 (· 기관 award 등) */
/* ⚠ display:flex 금지 — 문장 안 <strong>·텍스트 조각이 각각 flex 아이템이 되어 4칸으로 쪼개졌다(실측). */
.dx-form-row > .hint.is-warn { color:#7c2d12; }
.dx-form-row > .hint.is-warn i { color:#ea580c; font-size:1rem; margin-right:4px; vertical-align:-2px; }
.dx-form-row > .hint.is-warn strong { color:#9a3412; }
.dx-form-row > .hint a { color:var(--svx-primary); margin-right:10px; }
/* 관리자 설정 폼 공통 행/입력 (소셜 설정 · 캡차 설정 등 — 라벨 위, 입력 풀폭) */
.svndex-form-row { margin-bottom:14px; }
.svndex-form-row > label { display:block; margin-bottom:6px; font-size:.875rem; color:var(--svx-ink); font-weight:500; }
.svndex-form-row > label small { color:var(--svx-mute); font-weight:400; }
.svndex-input { width:100%; max-width:480px; padding:10px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:.95rem; font-family:inherit; background:var(--svx-card); color:var(--svx-ink); box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease; }
.svndex-input:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.svndex-input[readonly] { background:var(--svx-bg-alt); color:var(--svx-mute); cursor:default; }
/* 설정 그룹 fieldset (네이버/카카오/일반가입 묶음) */
/* ⚠️ min-width:0 — fieldset 은 브라우저 기본값이 min-inline-size:min-content 라 그리드 칸보다 넓어질 수 있다. */
.sdx-social-fieldset { border:1px solid var(--svx-line); border-radius:8px; padding:14px 16px 4px; margin:0 0 16px; min-width:0; }
.sdx-social-fieldset > legend { padding:0 8px; font-size:.9rem; color:var(--svx-ink); }
.sdx-social-fieldset > legend label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
/* §2026-09-26 소셜 로그인 배치 — 제공자 한 곳 = 한 칸. 칸 최소 폭만 정하고 개수는 폭이 정한다 (제공자가 늘면 옆으로 붙고, 좁으면 한 줄에 하나로 접힌다). 칸 안 = ID·Secret 두 칸 + Redirect URI 전체 폭. */
.sdx-social-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap:16px; margin:0 0 16px; }
.sdx-social-grid > .sdx-social-fieldset { margin:0; }
.sdx-social-grid:last-child { margin-bottom:0; }
/* 가입 경로 상태 — 경로 하나 = 칸 하나(MEMBER 가입정책 탭 · EXTEND 소셜 로그인 공용 조각) */
.sdx-route-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:10px; margin:14px 0 0; padding:0; list-style:none; }
.sdx-route-item { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; padding:12px 16px; border:1px solid var(--svx-line); border-radius:8px; }
.sdx-route-item > strong { font-size:.92rem; color:var(--svx-ink); }
.sdx-route-act { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.sdx-social-hint { margin:-4px 0 12px; font-size:.78rem; line-height:1.5; color:var(--svx-mute); }
/* 로그인 화면 버튼 미리보기 = Redirect URI 칸 오른쪽에 버튼만(§2026-09-26 사용자 지시). 높이는 입력칸에 맞춘다(줄 늘이기). */
.sdx-social-uri { display:flex; flex-wrap:wrap; gap:10px; }
.sdx-social-uri > .svndex-input { flex:1 1 240px; min-width:0; }
/* ⚠️ 선택자를 한 단계 높인다 — 기본 .svx-social-btn(width:100% · padding 12px)이 이 파일 뒤쪽에 있어, 같은 특이도면 그쪽이 이겨 버튼이 줄 전체로 늘어나 아래로 떨어진다(1280 실측). */
.sdx-social-uri > .sdx-social-uri-btn { flex:0 0 auto; width:auto; padding:0 18px; font-size:.92rem; cursor:default; }
@media (max-width: 640px) { .sdx-social-uri > .sdx-social-uri-btn { flex:1 1 100%; padding:10px 16px; } }
/* «연결 시험» 버튼(§2026-09-26 — 미리보기였던 자리). 링크라 누를 수 있게 보이고, 키가 저장되지 않았으면 잠긴다. ⚠️ 글자색은 선택자를 올려 지킨다 — 관리자 다크모드의 body[data-theme=dark] a:hover (0,2,2) 가 브랜드 버튼 글자색을 덮는다. */
.sdx-social-uri > a.sdx-social-uri-btn { cursor:pointer; text-decoration:none; }
.sdx-social-uri > a.sdx-social-uri-btn.is-naver, .sdx-social-uri > a.sdx-social-uri-btn.is-naver:hover { color:#fff; }
.sdx-social-uri > a.sdx-social-uri-btn.is-kakao, .sdx-social-uri > a.sdx-social-uri-btn.is-kakao:hover { color:rgba(0,0,0,.85); }
.sdx-social-uri > .sdx-social-uri-btn.is-disabled { opacity:.45; cursor:not-allowed; filter:none; }
.sdx-social-test-list { margin:6px 0 14px; padding-left:18px; line-height:1.6; }
/* EXTEND → 외부 스크립트(§2026-09-26) — 서비스 하나 = 칸 하나(사용 체크 · 코드 · 넣는 자리). 칸 개수는 폭이 정한다. */
.sdx-script-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:14px; }
/* 칸 = 제목 줄 · 입력칸 · 아래 세 줄. subgrid 로 한 줄에 놓인 칸끼리 세 줄 높이를 맞춘다 — 이름이 두 줄로 접혀도 입력칸이 나란히 선다(§2026-09-27). subgrid 를 모르는 브라우저는 각자 높이로(종전과 같은 모양). */
.sdx-script-item { display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:8px; align-content:start; min-width:0; padding:14px 16px; border:1px solid var(--svx-line); border-radius:8px; }
.sdx-script-foot { display:flex; flex-direction:column; gap:6px; }
.sdx-script-top { display:flex; align-items:center; align-self:start; gap:8px; flex-wrap:wrap; }
.sdx-script-top > small { color:var(--svx-mute); font-size:.78rem; }
.sdx-script-top > .sdx-script-on { margin-left:auto; }
/* «사용자 추가» 칸 머리 = 서비스명 입력(§2026-09-27) — «사용» 체크 앞까지 늘어난다 */
.sdx-script-top > .sdx-script-name { flex:1 1 140px; min-width:0; }
.sdx-script-code { width:100%; min-height:112px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.8rem; line-height:1.5; resize:vertical; }
.sdx-script-hint { margin:0; font-size:.8rem; color:var(--svx-mute); }
.sdx-script-hint select { margin-left:4px; }
.sdx-script-warn { margin:0; font-size:.8rem; color:var(--svx-warn-tx); }
/* 카드마다 3칸(§2026-09-27 사용자 지시 — 로그분석·광고 전환·상담 위젯이 3개씩) · 항목이 하나인 카드는 한 줄 전체 · 카드가 좁으면 2칸(홀수 개의 마지막 칸은 한 줄 전체 — 오른쪽이 비지 않게) → 1칸 */
.sdx-script-card { container-type:inline-size; }
/* 안내만 하는 칸(§2026-09-27) — 입력칸 없는 한 줄 알림. 글자색은 카드에서 물려받는다(다크 카드에서 어두운 글자가 되지 않게). */
/* 안내 한 줄 칸 = 아이콘 + 제목(다른 카드 h3 와 같은 크기·굵기) | 문장 — 글자색은 카드 기본(§2026-09-27 사용자 지시). 다크 테두리는 darkmode.css. */
.sdx-script-card.is-note { padding-top:14px; padding-bottom:14px; border:1px solid rgba(124,58,237,.14); }
.sdx-script-note { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0; min-height:calc(.84rem * 1.4 + 14px); font-size:.9375rem; line-height:1.6; }
/* min-height = 이동 버튼 높이(.sm-btn.is-sm 글자 줄 + 위아래 6px + 테두리) — 칸 높이를 같게 */
/* 제목 | 문장 — 문장은 자기 칸 안에서 줄을 바꾼다(둘째 줄이 제목 밑으로 가지 않게). 제목 = 다른 카드 h3 와 같은 1.17em·700(카드 글자 15px → 17.55px) */
.sdx-script-note-text { flex:1 1 300px; min-width:0; display:flex; align-items:baseline; }
.sdx-script-note-title { flex:none; font-size:1.17em; font-weight:700; white-space:nowrap; }
.sdx-script-note-sep { flex:none; align-self:center; width:1px; height:.95em; margin:0 12px; background:var(--svx-line); }
.sdx-script-note-msg { flex:1 1 auto; min-width:0; }
/* 문장 오른쪽 바로가기 버튼 묶음 — 좁아서 한 줄에 못 들어가면 다음 줄 오른쪽으로 내려간다 */
.sdx-script-note > .sdx-script-note-links { flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.sdx-script-note-link { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; line-height:1.4; }
/* 맨 위 Lighthouse 안내(§2026-10-05 U-33) = 기본 흰 안내 칸 + 제목만 작게·경고색(대표님 «살짝 더 줄이고 · 색깔은 아까처럼» — 17.55px → 15px · 처음 노란 칸의 제목·아이콘 색).
   바탕·테두리는 건드리지 않는다(«노랑이 너무 강해 · 화이트 기본으로») · 어두운 화면은 경고 토큰 재정의로 따라간다 · 다른 안내 칸 제목은 h3 크기·기본색 그대로 */
.sdx-script-card.is-note.is-caution .sdx-script-note-title { font-size:1em; color:var(--svx-warn-tx); }
.sdx-script-card.is-note.is-caution .sdx-script-note-title i { color:var(--svx-warn); }
/* 좁은 칸(폰) = 제목 아래로 문장을 내린다 — 구분선은 숨긴다 */
@container (max-width: 560px) { .sdx-script-note-text { flex-wrap:wrap; } .sdx-script-note-sep { display:none; } .sdx-script-note-msg { flex-basis:100%; margin-top:2px; } }
.sdx-script-item:only-child { grid-column:1 / -1; }
@container (max-width: 900px) { .sdx-script-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .sdx-script-item:nth-child(odd):last-child { grid-column:1 / -1; } }
@container (max-width: 560px) { .sdx-script-grid { grid-template-columns:minmax(0, 1fr); } }
/* 다른 메뉴가 처리하는 칸(구글 GA4 = STATISTICS) — 눈으로 «여기서 안 넣는다» 가 읽히게 흐리게 */
.sdx-script-item.is-linked { background:var(--svx-bg-alt); }
.sdx-script-item.is-linked .sdx-script-code { color:var(--svx-mute); cursor:not-allowed; resize:none; }
.sdx-script-lock { position:relative; }
/* 글자만 흐리게(테두리는 선명) — filter:blur 는 입력칸 테두리까지 번진다. 바로 위 .is-linked 글자색 규칙(0,3,0)을 이기도록 같은 사슬로 쓴다(§12-40), 비활성 입력칸은 크롬이 -webkit-text-fill-color 로 글자를 칠하므로 그것도 투명으로. */
.sdx-script-item.is-linked .sdx-script-lock > .sdx-script-code { color:transparent; -webkit-text-fill-color:transparent; text-shadow:0 0 6px rgba(120,120,140,.85); user-select:none; pointer-events:none; overflow:hidden; }
.sdx-script-lock-badge { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:7px 16px; border-radius:999px; background:var(--svx-primary); color:#fff; font-size:.82rem; font-weight:600; white-space:nowrap; box-shadow:0 2px 8px rgba(124,58,237,.25); }
/* 소셜 가입 동의 화면의 수집 항목 안내 — 인라인 style 을 옮겨 왔다(§3 인라인 금지 · 2026-09-26 검증) */
.svndex-auth-hint-lh { line-height:1.6; }
.sdx-social-fields { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 14px; }
.sdx-social-fields > .is-wide { grid-column:1 / -1; }
.sdx-social-fields .svndex-input { max-width:none; }
@media (max-width: 640px) { .sdx-social-fields { grid-template-columns:minmax(0, 1fr); } }
/* 보안문자(캡차) 설정 카드 */
.svndex-captcha-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.svndex-captcha-head h3 { margin:0; }
.svndex-captcha-active { font-size:.78rem; font-weight:600; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.svndex-captcha-active.is-builtin { background:var(--svx-bg-alt); color:var(--svx-mute); border:1px solid var(--svx-line); }
.svndex-captcha-active.is-recaptcha { background:#ecfdf3; color:#03A150; border:1px solid #a7f3d0; }
.svndex-captcha-providers { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 16px; }
.svndex-captcha-opt { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--svx-line); border-radius:8px; cursor:pointer; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.svndex-captcha-opt:hover { border-color:var(--svx-primary); }
.svndex-captcha-opt:has(input:checked) { border-color:var(--svx-primary); background:#f5f3ff; box-shadow:inset 0 0 0 1px var(--svx-primary); }
.svndex-captcha-opt > input { margin-top:3px; flex:0 0 auto; accent-color:var(--svx-primary); }
.svndex-captcha-opt-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.svndex-captcha-opt-body strong { font-size:.92rem; color:var(--svx-ink); }
.svndex-captcha-opt-body small { font-size:.78rem; color:var(--svx-mute); line-height:1.45; }
.svndex-captcha-keys { padding:14px 16px 4px; border:1px solid var(--svx-line); border-left:3px solid var(--svx-primary); border-radius:8px; background:var(--svx-bg-alt); transition:opacity .15s ease; }
.svndex-captcha-keys.is-dim { opacity:.5; }
.svndex-captcha-keys .svndex-input { max-width:none; background:var(--svx-card); }
@media (max-width: 640px) { .svndex-captcha-providers { grid-template-columns:minmax(0, 1fr); } }
/* 보안문자 카드(§2026-10-01) — 설정 한 곳이 가입·비회원 글쓰기·비회원 댓글에 함께 적용 · 구글은 연결 시험 통과 뒤에만 고른다. 색은 의미 토큰이라 다크에서 저절로 짝이 맞는다. */
.svndex-captcha-lead { margin:10px 0 0; font-size:.85rem; color:var(--svx-mute); line-height:1.55; }
.svndex-captcha-warn { display:flex; align-items:flex-start; gap:6px; margin:10px 0 0; padding:9px 12px; border-radius:8px; background:var(--svx-warn-bg); color:var(--svx-warn-tx); font-size:.85rem; line-height:1.5; }
.svndex-captcha-stats { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:12px 0 0; padding:9px 12px; border:1px solid var(--svx-line); border-radius:8px; background:var(--svx-bg-alt); font-size:.84rem; color:var(--svx-ink); }
.svndex-captcha-stats-k { font-weight:600; color:var(--svx-mute); }
.svndex-captcha-stats b { font-variant-numeric:tabular-nums; }
.svndex-captcha-stats small { color:var(--svx-mute); }
.svndex-captcha-tag { margin-left:4px; padding:1px 7px; border:1px solid var(--svx-line); border-radius:999px; background:var(--svx-bg-alt); font-size:.7rem; font-style:normal; font-weight:600; color:var(--svx-mute); vertical-align:middle; }
.svndex-captcha-opt.is-locked { cursor:not-allowed; opacity:.65; }
.svndex-captcha-opt.is-locked:hover { border-color:var(--svx-line); }
.svndex-captcha-keys-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 12px; }
.svndex-captcha-keys-head strong { font-size:.9rem; color:var(--svx-ink); }
.svndex-captcha-test { margin-left:auto; }
.svndex-captcha-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border:1px solid var(--svx-line); border-radius:14px; background:var(--svx-card); font-size:.74rem; font-weight:600; color:var(--svx-mute); max-width:100%; }   /* «연결 확인됨 · 날짜 · 도메인» 이 320px 폰에서 카드 밖으로 넘쳤다 — 줄을 바꿀 수 있게(한 줄일 때 모양은 같다 · §2026-10-01 자가검증) */
.svndex-captcha-pill.is-ok { background:var(--svx-success-bg); color:var(--svx-success-tx); border-color:transparent; }
.svndex-captcha-pill.is-wait { background:var(--svx-warn-bg); color:var(--svx-warn-tx); border-color:transparent; }
.svndex-captcha-clear { display:inline-flex; align-items:center; gap:6px; margin:0 0 12px; font-size:.82rem; color:var(--svx-mute); cursor:pointer; }
.svndex-captcha-keyhint { margin:0 0 12px; font-size:.82rem; color:var(--svx-warn-tx); }
.svndex-captcha-privacy { margin:14px 0 0; padding:10px 14px; border:1px solid var(--svx-line); border-radius:8px; }
.svndex-captcha-privacy summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; cursor:pointer; font-size:.88rem; font-weight:600; color:var(--svx-ink); }
.svndex-captcha-privacy p { margin:10px 0 8px; }
.svndex-captcha-privacy-text { width:100%; min-height:132px; font-size:.82rem; line-height:1.6; resize:vertical; }
/* 구글 위젯 칸(가입 화면 · 연결 시험 화면) — 위젯 높이만큼 자리를 미리 잡아 그려질 때 아래가 밀리지 않게. 게시판 쪽 칸은 board-common.scss */
.svx-cap-widget { min-height:78px; }
.svx-cap-msg { margin:6px 0 0; font-size:.84rem; color:var(--svx-error-tx); }
.svx-cap-test-form .svx-cap-widget { margin:14px 0 4px; }
.dx-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
@media (max-width: 768px) { .dx-form-grid { grid-template-columns:minmax(0, 1fr); } }
.dx-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--svx-line); }
.dx-form-actions button { padding:10px 28px; }
/* 관리자 카드 헤더 — 타이틀 블록(좌) + 액션 버튼(우 상단). 버튼은 form="id" 로 폼 연결. */
.svndex-card-head-row { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.svndex-card-head-row > .svndex-card-head-main { min-width:0; }
.svndex-card-head-row > .sm-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; }
/* 3열 폼 그리드 */
.dx-form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 24px; }
/* §2026-09-25 — 같은 줄에서 라벨이 두 줄로 꺾인 칸만 입력칸이 17~18px 아래로 내려가 줄이 들쭉날쭉했다(1024·768). 칸마다 «라벨 · 입력칸 · 도움말» 세 줄을 옆 칸과 공유한다(subgrid) — 라벨 줄 높이가 같아져 입력칸이 한 선에 선다. 도움말이 있는 칸이 섞여도 입력칸 줄은 같다. 라벨로 시작하지 않는 칸은 종전처럼 위에서부터 쌓는다. */
.dx-form-grid-3 > .dx-form-row { grid-row:span 3; }
.dx-form-grid-3 > .dx-form-row:has(> label:first-child) { display:grid; grid-template-rows:subgrid; align-content:start; }
.dx-form-grid-3 > .dx-form-row:has(> label:first-child) > label:first-child { align-self:end; }
@media (max-width: 900px) { .dx-form-grid-3 { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .dx-form-grid-3 > :last-child:nth-child(odd) { grid-column:1 / -1; } }
@media (max-width: 600px) { .dx-form-grid-3 { grid-template-columns:minmax(0, 1fr); } }
.dx-form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
@media (max-width: 600px) { .dx-form-grid-2 { grid-template-columns:minmax(0, 1fr); } }
/* ── 맞춤 카드 폼 — 3열, 칸마다 1~3칸 차지. 기관정보 폼보다 상하폭을 넉넉히 준다(이미지·첨부 칸이 섞여 같은 간격이면 줄이 붙어 보인다). row-gap 은 그리드가 직접 갖는다 — 칸마다 margin 을 주면 마지막 줄에 여백이 남는다. ⚠️ 트랙은 `minmax(0,1fr)` — 그냥 `1fr` 은 «최소 콘텐츠 폭» 이 바닥이라 안 줄어드는 것(긴 파일명·미리보기)이 하나만 있어도 트랙이 그 폭까지 벌어진다. ── */
/* 이 카드의 머리줄은 «제목 + 저장 버튼» 뿐이라 세로 가운데로 맞춘다(공용 규칙은 설명 두 줄이 붙는 카드 기준이다) */
.dx-cc-form .svndex-card-head-row { align-items:center; }
/* 페이지 이름 = 뱃지. 카드가 여러 장 쌓이므로 «여기부터 이 페이지» 임이 한눈에 걸려야 한다. */
.dx-cc-title { display:inline-flex; align-items:center; gap:6px; margin:0; padding:5px 13px; border-radius:999px; background:#f5f3ff; color:#5b21b6; font-size:.9rem; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.dx-cc-title i { font-size:1rem; }
/* 열 수는 페이지 카드마다 정한다(data-cols, 기본 4). 넓은 칸이 많은 페이지는 2 를 쓴다. ⚠️ 좁아질 때 줄이는 폭이 열 수마다 다르다 — 2열짜리를 1280px 에서 또 줄이면 근거 없이 휑해진다. 그래서 «시작 열 수별»로 따로 적는다. */
.dx-cc-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px 20px; margin-top:18px; }
.dx-cc-grid[data-cols="3"] { grid-template-columns:repeat(3, minmax(0,1fr)); }
.dx-cc-grid[data-cols="2"] { grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px 24px; }
.dx-cc-grid[data-cols="1"] { grid-template-columns:minmax(0,1fr); }
@media (max-width: 1280px) { .dx-cc-grid[data-cols="4"] { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px) { .dx-cc-grid[data-cols="4"], .dx-cc-grid[data-cols="3"] { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .dx-cc-grid { grid-template-columns:minmax(0,1fr); } }
.dx-cc-cell { min-width:0; }
/* 여러 칸을 먹는 칸(본문 분량 등)은 열 수가 줄면 같이 줄인다 — 안 줄이면 트랙보다 넓어져 그 줄이 통째로 깨진다(`span 4` 를 2열 그리드에 그대로 두면 넘친다). */
.dx-cc-cell[data-span="2"] { grid-column:span 2; }
.dx-cc-cell[data-span="3"] { grid-column:span 3; }
.dx-cc-cell[data-span="4"] { grid-column:span 4; }
@media (max-width: 1280px) { .dx-cc-cell[data-span="4"] { grid-column:span 3; } }
@media (max-width: 900px) { .dx-cc-cell[data-span="3"], .dx-cc-cell[data-span="4"] { grid-column:span 2; } }
@media (max-width: 600px) { .dx-cc-cell[data-span="2"], .dx-cc-cell[data-span="3"], .dx-cc-cell[data-span="4"] { grid-column:span 1; } }
/* 칸 머리줄 = 라벨 · 종류 뱃지 · 글자수. 한 줄에 다 들어가되 라벨만 줄어든다. ⚠️ 라벨이 이 칸의 «주인공» 이다 — 운영자는 이것만 보고 외부 페이지 어디를 고치는 칸인지 판단한다. 입력값보다 약해 보이면 안 되므로 크기·굵기를 올리고 왼쪽 브랜드색 바로 시선을 먼저 건다. */
.dx-cc-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; min-height:22px; }
.dx-cc-head > label { display:flex; align-items:center; gap:6px; min-width:0; flex:1 1 auto; font-size:1rem; font-weight:700; letter-spacing:-.015em; color:var(--svx-ink); cursor:pointer; }
.dx-cc-head > label > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 칸 종류 아이콘 — 그레이. 포커스가 들어온 칸만 브랜드색으로 살아난다. */
.dx-cc-head > label > i { flex-shrink:0; font-size:1.05rem; color:#9ca3af; transition:color .15s ease; }
.dx-cc-cell.is-focus > .dx-cc-head > label { color:var(--svx-primary-d); }
.dx-cc-cell.is-focus > .dx-cc-head > label > i { color:var(--svx-primary); }
.dx-cc-type { flex-shrink:0; font-size:.68rem; color:var(--svx-mute); border:1px solid var(--svx-line); border-radius:10px; padding:1px 7px; }
/* 글자수 — 평소엔 거의 안 보이다가, 칸을 만지는 동안과 상한에 가까워질 때 또렷해진다. */
.dx-cc-count { flex-shrink:0; font-size:.68rem; color:var(--svx-line); font-variant-numeric:tabular-nums; transition:color .15s ease; }
.dx-cc-cell.is-focus .dx-cc-count { color:var(--svx-mute); }
.dx-cc-count.is-near { color:#c2410c; }
/* 위치 안내 — 운영자가 「이 칸이 외부 페이지 어디인지」 찾는 유일한 단서라 입력칸 바로 위에 둔다. */
.dx-cc-where { display:flex; align-items:center; gap:4px; margin:0 0 7px; font-size:.76rem; color:var(--svx-mute); line-height:1.45; }
.dx-cc-where i { font-size:.9rem; flex-shrink:0; }
.dx-cc-cell > input[type=text], .dx-cc-cell > textarea { width:100%; padding:10px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:.95rem; font-family:inherit; background:var(--svx-card); color:var(--svx-ink); box-sizing:border-box; }
/* 문구 칸은 비어 있으면 한 줄로 보인다 — 큰 min-height 를 주면 짧은 문구에도 큰 상자가 생겨 화면이 성기다. 내용이 늘면 스크립트가 높이를 올리고 손으로도 늘릴 수 있다. 가로는 막는다(3열 그리드라 옆 칸을 민다). */
.dx-cc-cell > textarea { min-height:42px; height:42px; resize:vertical; line-height:1.6; overflow:hidden; }
.dx-cc-cell > input[type=text]:focus, .dx-cc-cell > textarea:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
/* ── 이미지 교체 부품 — 문구 칸과 «같은 상자» 로 보이게 한다(칸마다 모양이 다르면 화면이 성기게 읽힌다). 상자 안 우측에 보기·올리기 아이콘, 아래 한 칸이 대체텍스트 ── */
.dx-cc-img { position:relative; display:flex; flex-direction:column; gap:8px; }
.dx-cc-imgfield { display:flex; align-items:center; gap:6px; min-height:42px; padding:6px 8px 6px 12px; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); box-sizing:border-box; }
.dx-cc-imgfield:focus-within { border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.dx-cc-imgname { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; color:var(--svx-ink); }
.dx-cc-imgname.is-empty { color:var(--svx-mute); }
.dx-cc-imgname.is-new { color:var(--svx-primary-d); font-weight:600; }
/* 아이콘 둘 — 상자 안 우측 끝. label 이라 button 광역 규칙(다크모드)을 안 건드린다. */
.dx-cc-eye, .dx-cc-pick { position:relative; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; color:var(--svx-mute); cursor:pointer; transition:background .15s ease, color .15s ease; }
.dx-cc-eye:hover, .dx-cc-pick:hover { background:var(--svx-bg); color:var(--svx-primary); }
.dx-cc-eye i, .dx-cc-pick i { font-size:1.05rem; }
.dx-cc-eye.is-empty { color:var(--svx-line); cursor:default; }
.dx-cc-eye.is-empty:hover { background:none; color:var(--svx-line); }
/* 플로팅 미리보기 — **올린 이미지의 실제 비율 그대로** 띄운다. 고정 비율 상자로 감싸면 여백이 생겨 「이렇게 잘리나?」로 오해한다. 칸 밖으로 나가므로 z-index 를 카드 위로 두고, pointer-events:none 이라야 포인터가 팝업에 걸려 hover 가 끊기지 않는다. */
.dx-cc-prev-pop { position:absolute; right:0; bottom:calc(100% + 8px); z-index:60; display:none; padding:6px; border:1px solid var(--svx-line); border-radius:8px; background:var(--svx-card); box-shadow:0 8px 24px rgba(0,0,0,.16); pointer-events:none; line-height:0; }
.dx-cc-prev-pop > img { display:block; width:auto; height:auto; max-width:360px; max-height:280px; border-radius:3px; }
.dx-cc-eye:not(.is-empty):hover > .dx-cc-prev-pop, .dx-cc-eye:not(.is-empty):focus > .dx-cc-prev-pop { display:block; }
/* 파일 입력은 «보이지 않게» 둔다 — display:none 이면 키보드로 못 닿는다. */
.dx-cc-file { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* 아래 한 칸 = 대체텍스트. 상자보다 한 단 낮게 보이도록 배경을 깐다. */
.dx-cc-altfield { width:100%; padding:9px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:.84rem; font-family:inherit; background:var(--svx-bg); color:var(--svx-ink); box-sizing:border-box; }
.dx-cc-altfield:focus { outline:none; border-color:var(--svx-primary); background:var(--svx-card); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
/* 권장 크기 — 칸 맨 아래 작은 안내. 운영자가 «얼마짜리를 올려야 하나» 를 판단하는 유일한 단서다. */
.dx-cc-size-note { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:-2px 0 0; font-size:.72rem; color:var(--svx-mute); letter-spacing:-.01em; }
.dx-cc-size-note > span:first-child { display:inline-flex; align-items:center; gap:4px; min-width:0; overflow:hidden; white-space:nowrap; }
/* 안내 아이콘 — 글자보다 살짝 크게 잡아야 «ⓘ» 로 읽힌다. 줄어들 때 아이콘은 안 줄인다. */
.dx-cc-size-note > span:first-child > i { flex-shrink:0; font-size:.92rem; }
.dx-cc-size-note > span:last-child { flex-shrink:0; }
/* ── 메인 롤링 관리(목록형 맞춤 카드) — 슬라이드 한 장 = 이미지 + 영문 데코 + 타이틀 + 설명 + 링크. ⚠️ 이미지 부분은 **새로 만들지 않고** 위 dx-cc-imgfield 계열을 그대로 쓴다 — 같은 부품이 두 벌이 되면 한쪽만 고쳐져 화면이 갈린다. 여기서는 «배치» 만 정한다. ── */
.dx-roll-list { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.dx-roll-item { border:1px solid var(--svx-line); border-radius:8px; background:var(--svx-bg); padding:12px 14px 14px; }
.dx-roll-head { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.dx-roll-no { font-size:.92rem; font-weight:700; color:var(--svx-primary-d); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.dx-roll-spacer { flex:1 1 auto; }
/* 순서·삭제 버튼 — darkmode 광역 button 규칙을 피하려고 배경·테두리를 직접 확정한다. (§12-42 주의: 새 색버튼은 darkmode.css 예외 목록에도 넣어야 보라색으로 안 덮인다.) */
.dx-roll-btn { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); color:var(--svx-mute); cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.dx-roll-btn:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.dx-roll-btn i { font-size:.9rem; }
.dx-roll-btn.is-del:hover { border-color:var(--svx-error); color:var(--svx-error); }
.dx-roll-body { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width: 820px) { .dx-roll-body { grid-template-columns:minmax(0,1fr); } }
.dx-roll-media { position:relative; display:flex; flex-direction:column; gap:7px; }
.dx-roll-fields { display:flex; flex-direction:column; gap:9px; min-width:0; }
.dx-roll-row { display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; align-items:start; }
@media (max-width: 560px) { .dx-roll-row { grid-template-columns:minmax(0,1fr); gap:4px; } }
.dx-roll-row > label { padding-top:9px; font-size:.78rem; font-weight:600; color:var(--svx-mute); }
@media (max-width: 560px) { .dx-roll-row > label { padding-top:0; } }
.dx-roll-row > input[type=text], .dx-roll-row > textarea { width:100%; padding:8px 11px; border:1px solid var(--svx-line); border-radius:6px; font-size:.88rem; font-family:inherit; background:var(--svx-card); color:var(--svx-ink); box-sizing:border-box; }
.dx-roll-row > textarea { min-height:38px; line-height:1.55; resize:vertical; overflow:hidden; }
.dx-roll-row > input[type=text]:focus, .dx-roll-row > textarea:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.dx-roll-add { margin-top:14px; }
.dx-roll-add .sm-btn { display:inline-flex; align-items:center; gap:5px; }
/* 첨부 칸 */
.dx-cc-media { display:flex; gap:12px; align-items:flex-start; }
.dx-cc-media-side { flex:1 1 auto; min-width:0; }
.dx-cc-thumb { flex:0 0 auto; width:104px; height:78px; object-fit:cover; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-bg); }
.dx-cc-thumb.is-empty { display:flex; align-items:center; justify-content:center; color:var(--svx-mute); font-size:1.6rem; border-style:dashed; }
.dx-cc-filebox { flex:0 0 auto; display:flex; align-items:center; gap:6px; max-width:190px; padding:9px 11px; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-bg); font-size:.8rem; }
.dx-cc-filebox i { font-size:1.1rem; color:var(--svx-primary); flex-shrink:0; }
.dx-cc-filebox a { color:var(--svx-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-cc-size { color:var(--svx-mute); font-size:.74rem; flex-shrink:0; }
.dx-cc-note { margin:6px 0 0; font-size:.73rem; color:var(--svx-mute); line-height:1.45; }
/* 이미지·첨부 삭제 = 체크박스가 아니라 «휴지통 버튼 + 확인 모달» 이다. ⚠️ 체크박스였을 때 운영자가 «칸만 비는 것» 으로 읽었다. 실제로는 저장 시 파일이 지워지고 되돌릴 수 없으므로 무게가 다른 동작임이 모양으로도 드러나야 한다. ⚠️ «교체» 용이 아니다 — 새 이미지를 올리면 옛 파일은 자동 삭제된다. 아예 없앨 때만 쓴다. */
.dx-cc-remove { margin-top:7px; }
.dx-cc-remove-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); color:var(--svx-mute); font-size:.75rem; font-family:inherit; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.dx-cc-remove-btn:hover { border-color:var(--svx-error); color:var(--svx-error); }
.dx-cc-remove-btn i { font-size:.9rem; }
/* 삭제 예정 — 저장 전까진 되돌릴 수 있으므로 «예약된» 상태임을 분명히 보여 준다. */
.dx-cc-remove.is-armed .dx-cc-remove-btn { border-color:var(--svx-error); background:var(--svx-error-bg); color:var(--svx-error-tx); font-weight:600; }
.dx-cc-remove.is-armed .dx-cc-remove-btn span::after { content:" 예정 · 누르면 취소"; font-weight:400; }
.dx-cc-cell.is-removing .dx-cc-imgfield, .dx-cc-cell.is-removing .dx-cc-filebox { opacity:.45; }
.dx-cc-clear { display:inline-flex; align-items:center; gap:5px; margin-top:7px; font-size:.76rem; color:var(--svx-mute); cursor:pointer; }
/* 파일 선택 — 브라우저 기본 버튼이 그대로 나가지 않게 한다(네이티브 폼컨트롤 금지 컨벤션). 공용 부품으로 둔다 — 다음 업로드 화면도 이 모양을 그대로 쓴다. */
.dx-cc-media-side > input[type=file] { width:100%; max-width:100%; font-size:.78rem; color:var(--svx-mute); }
.dx-cc-media-side > input[type=file]::file-selector-button { margin-right:9px; padding:6px 12px; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); color:var(--svx-ink); font-size:.78rem; font-family:inherit; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.dx-cc-media-side > input[type=file]::file-selector-button:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
/* content 메뉴 M/P 관리 폼(노출관리·기본관리) — 항목 상하 갭을 넉넉하게 (스코프 전용, 다른 폼 무영향) */
.svndex-content-mp-form .dx-form-row { margin-bottom:22px; }
/* 관리자 폼 — 주소 그룹 (auth-form 과 별도 스코프). 1×4 그리드 (우편번호/도로명/상세/추가설명). */
/* ⚠️ 이 그리드를 다시 짜지 말 것. nth-child 로 자리를 지정하면 안 된다 — `data-field-code` JS 가 입력칸을 <span> 으로 **감싸기 때문에** 그리드의 자식이 input 이 아니라 그 span 이라 `> input:nth-child(N)` 가 한 개도 안 걸린다(서버 렌더 직후엔 걸리고 JS 가 돈 뒤엔 안 걸려 더 헷갈린다). 칸을 늘릴 때는 **입력칸을 뒤에 덧붙이기만** 한다 — 균등 열이 알아서 다음 줄로 넘긴다. */
.dx-form-row .svndex-address-group { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px 14px; }
@media (max-width: 900px) { .dx-form-row .svndex-address-group { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dx-form-row .svndex-address-group { grid-template-columns:minmax(0, 1fr); } }
.dx-form-row .svndex-address-group > input { width:100%; padding:10px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:.95rem; font-family:inherit; background:var(--svx-card); color:var(--svx-ink); box-sizing:border-box; }
.dx-form-row .svndex-address-group > input:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
/* 진료시간 요일 그리드 (정본 = hospital.hours_json). 7열: 요일 / 진료 스위치 / 시작 / 종료 / 점심시작 / 점심종료 / 점심없음. ⚠️ 트랙은 minmax(0,1fr) — 1fr 은 최소콘텐츠 폭이 바닥이라 칸이 벌어진다. */
.dx-hours-grid { border:1px solid var(--svx-line); border-radius:8px; overflow:hidden; background:var(--svx-card); }
/* 행마다 같은 트랙을 선언한다 — subgrid 를 쓰지 않는다(지원 편차 + 부모까지 그리드가 돼야 한다). */
/* 시각 칸은 「09:30」 5글자면 되므로 **상한(94px)** 을 건다 — 종전엔 4칸이 전부 1fr 이라 남는 폭을 시각이 다 먹고 요일·진료가 눌려 있었다. 남는 폭은 fr 인 칸(요일·진료·점심없음)으로 간다. */
/* 요일·진료는 «고정폭», 시각 4칸이 남는 폭을 나눠 가진다. ⚠️ 고정폭 칸에 fr 을 주지 말 것 — 관리자 본문이 1500px 넘어서 남는 폭이 그리로 쏠리면 요일이 640px 이 된다(실측). */
.dx-hours-head, .dx-hours-row { display:grid; grid-template-columns:110px 72px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 64px; align-items:center; column-gap:8px; padding:7px 12px; }
.dx-hours-head { background:var(--svx-bg-alt,#f8fafc); border-bottom:1px solid var(--svx-line); }
.dx-hours-head > span { font-size:.74rem; font-weight:600; color:var(--svx-mute); text-align:center; }
.dx-hours-row + .dx-hours-row, .dx-hours-head + .dx-hours-row { border-top:1px solid var(--svx-line); }
.dx-hours-row.is-off { background:var(--svx-bg-alt,#f8fafc); }
.dx-hours-row.is-off > input { opacity:.45; }
.dx-hours-day { font-size:.85rem; font-weight:500; color:var(--svx-ink); white-space:nowrap; text-align:center; }
.dx-hours-row > .svx-switch { justify-self:center; }
.dx-hours-row > input { width:100%; min-width:0; text-align:center; padding:6px 4px; font-size:.85rem; font-variant-numeric:tabular-nums; }
.dx-hours-nolunch { display:flex; align-items:center; justify-content:center; cursor:pointer; }
/* 진료시간 2단 — 좌 6(입력: 요일표 + 공휴일) · 우 4(그 입력이 어떻게 나가는지). 고치는 자리와 결과가 한 화면에 나란히 있어야 운영자가 스크롤 없이 대조한다. */
.dx-hours-split { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr); gap:0 32px; align-items:start; }
.dx-hours-col-main, .dx-hours-col-side { min-width:0; }
/* 칸 사이를 띄운다 — 설정 블록이 붙어 있으면 어디까지가 한 덩어리인지 안 읽힌다 */
.dx-hours-col-main > .dx-form-row, .dx-hours-col-side > .dx-form-row { margin-bottom:26px; }
.dx-hours-col-main > .dx-form-row:last-child, .dx-hours-col-side > .dx-form-row:last-child { margin-bottom:0; }
.dx-hours-col-side > .dx-form-row > label { margin-bottom:10px; }
.dx-hours-col-side .hint { margin-top:10px; }
.dx-hours-col-side .hint + .hint { margin-top:8px; }
@media (max-width: 1100px) { .dx-hours-split { grid-template-columns:minmax(0,1fr); gap:24px 0; } }
/* §2026-09-25 위아래로 쌓이면 표 밑단과 다음 제목 사이가 4px 로 붙었다 → 24px */
/* 표 머리줄 — 좌측 제목 · 우측 공통 점심시간(표의 점심 칸이 비면 이 값을 물려받는다) */
.dx-hours-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap; margin-bottom:8px; }
.dx-hours-toolbar-t { font-size:.875rem; font-weight:500; color:var(--svx-ink); }
/* 공통 점심시간 / 공휴일 한 줄 — [라벨] [시각] ~ [시각] */
.dx-hours-lunch-all { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dx-hours-lunch-all > label { margin:0; font-size:.8rem; font-weight:500; color:var(--svx-mute); white-space:nowrap; }
.dx-hours-lunch-all > label small { font-weight:400; }
.dx-hours-lunch-all > input { width:84px; text-align:center; padding:7px 6px; font-size:.88rem; font-variant-numeric:tabular-nums; }
/* 한 줄짜리 설정의 안내 — 줄을 바꾸지 않고 입력칸 오른쪽에 붙인다 */
.dx-hours-side-note { flex:1 1 320px; min-width:0; font-size:.78rem; color:var(--svx-mute); line-height:1.5; }
.dx-hours-side-note a { color:var(--svx-primary); }
.dx-hours-tilde { color:var(--svx-mute); font-size:.9rem; }
.dx-hours-legacy { display:inline-block; margin-right:12px; }
.dx-hours-legacy b { color:var(--svx-ink); font-weight:600; margin-right:4px; }
/* 파생 표기 미리보기 — 「지금 저장값으로 사이트·검색·챗봇에 이렇게 나간다」 */
/* 맞춤 카드 수치 칸 — 숫자만 받는 입력. 자릿수가 세로로 맞게 tabular-nums. */
.dx-cc-num { font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.dx-hours-preview { margin-top:0; border:1px solid var(--svx-line); border-radius:10px; padding:16px 18px; background:var(--svx-bg-alt,#f8fafc); }
/* 라벨 → 값 두 칸. 둘 다 «내용 폭» 이라 값이 라벨 바로 옆에 붙는다 (표로 width:100% 를 주면 값이 패널 오른쪽 끝까지 밀려 라벨과 멀어진다). */
.dx-hours-pv-list { margin:0; display:grid; grid-template-columns:minmax(0,max-content) minmax(0,max-content); gap:7px 22px; align-items:baseline; }
.dx-hours-pv-k { font-size:.84rem; font-weight:500; color:var(--svx-mute); white-space:nowrap; }
.dx-hours-pv-v { margin:0; font-size:.88rem; font-weight:600; color:var(--svx-ink); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.dx-hours-pv-k.is-closed { color:#b91c1c; }
.dx-hours-pv-v.is-closed { color:#b91c1c; font-weight:700; }
.dx-hours-pv-inline { display:flex; align-items:flex-start; gap:7px; margin:13px 0 0; padding-top:12px; border-top:1px dashed var(--svx-line); font-size:.8rem; color:var(--svx-mute); line-height:1.55; }
.dx-hours-pv-inline i { flex:0 0 auto; margin-top:2px; font-size:.95rem; opacity:.75; }
/* 「푸터 한 줄 표기시」 꼬리표 — 위 표와 «같은 값의 다른 형태» 임을 알린다(운영자가 둘을 헷갈리지 않게) */
.dx-hours-pv-tag { flex:0 0 auto; padding:2px 8px; border-radius:999px; background:var(--svx-card); border:1px solid var(--svx-line); font-size:.72rem; font-weight:600; color:var(--svx-mute); white-space:nowrap; }
.dx-hours-pv-empty { margin:0; font-size:.85rem; color:var(--svx-mute); }
@media (max-width: 560px) { .dx-hours-pv-list { grid-template-columns:minmax(0,1fr); gap:2px; } .dx-hours-pv-v { margin-bottom:6px; } }
@media (max-width: 820px) { .dx-hours-head, .dx-hours-row { grid-template-columns:76px 56px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 48px; column-gap:5px; padding:6px 8px; } .dx-hours-head > span { font-size:.66rem; } .dx-hours-day { font-size:.78rem; } .dx-hours-row > input { font-size:.76rem; padding:5px 2px; } }
body[data-theme="dark"] .dx-hours-grid { background:var(--svx-d-card); border-color:rgba(255,255,255,.14); }
body[data-theme="dark"] .dx-hours-head { background:var(--svx-d-bg-alt); border-bottom-color:rgba(255,255,255,.14); }
body[data-theme="dark"] .dx-hours-row + .dx-hours-row, body[data-theme="dark"] .dx-hours-head + .dx-hours-row { border-top-color:rgba(255,255,255,.14); }
body[data-theme="dark"] .dx-hours-row.is-off { background:var(--svx-d-bg-alt); }
body[data-theme="dark"] .dx-hours-preview { background:var(--svx-d-bg-alt); border-color:rgba(255,255,255,.14); }
body[data-theme="dark"] .dx-hours-pv-tag { background:var(--svx-d-card); border-color:rgba(255,255,255,.16); }
body[data-theme="dark"] .dx-hours-pv-k.is-closed, body[data-theme="dark"] .dx-hours-pv-v.is-closed { color:#fca5a5; }
/* 관리자 폼 — 내선/부서 연락처 (3열 그리드 안, 슬롯별 명칭+번호 스택) */
.org-ext-slot { display:flex; flex-direction:column; gap:8px; }
.org-ext-slot > input { width:100%; padding:10px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:.95rem; font-family:inherit; background:var(--svx-card); color:var(--svx-ink); box-sizing:border-box; }
.org-ext-slot > input:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
/* 필드 출력 코드 애드온 — 입력칸 좌측(배경+우측보더), 값 있는 필드만 노출. JS 가 data-field-code 입력칸을 감쌈. */
.svndex-fieldcode { display:flex; align-items:stretch; width:100%; min-width:0; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); box-sizing:border-box; }
.svndex-fieldcode:focus-within { border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.svndex-fieldcode > input { flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none; box-shadow:none; padding:10px 12px; font-size:.95rem; font-family:inherit; color:var(--svx-ink); border-radius:6px; }
.svndex-fieldcode-btn { display:none; flex:0 0 auto; align-items:center; justify-content:center; width:34px; padding:0; background:var(--svx-bg-alt); border:0; border-right:1px solid var(--svx-line); border-radius:6px 0 0 6px; color:var(--svx-mute); cursor:pointer; font-size:1rem; transition:color .15s ease, background .15s ease; }
.svndex-fieldcode.has-value > .svndex-fieldcode-btn { display:inline-flex; }
.svndex-fieldcode.has-value > input { border-radius:0 6px 6px 0; }
.svndex-fieldcode-btn:hover { color:var(--svx-primary); background:#ededf2; }
/* 코드 복사 팝오버 */
.svndex-fieldcode-pop { position:fixed; z-index:1100; display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.16); }
/* white-space:pre — 종전 nowrap 은 여러 줄 스니펫을 한 줄로 뭉갰다 (진료일정 블록 코드). 한 줄짜리는 pre 에서도 동작이 같아 기존 스니펫엔 영향이 없다. */
.svndex-fieldcode-snippet { font-family:var(--svx-font-mono); font-size:.82rem; color:var(--svx-primary-d); background:#f5f3ff; padding:4px 8px; border-radius:5px; white-space:pre; max-height:40vh; overflow:auto; }
.svndex-fieldcode-copy { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; background:var(--svx-primary); color:#fff; border:0; border-radius:5px; font-size:.82rem; font-family:inherit; font-weight:500; cursor:pointer; white-space:nowrap; }
.svndex-fieldcode-copy:hover { background:var(--svx-primary-d); }
body[data-theme="dark"] .svndex-fieldcode { background:var(--svx-d-card); border-color:var(--svx-d-line-strong); }
body[data-theme="dark"] .svndex-fieldcode:focus-within { border-color:var(--svx-d-primary); box-shadow:0 0 0 3px rgba(167,139,250,.18); }
body[data-theme="dark"] .svndex-fieldcode > input { color:var(--svx-d-ink); }
body[data-theme="dark"] .svndex-fieldcode-btn { background:var(--svx-d-bg-alt); border-right-color:var(--svx-d-line-strong); color:var(--svx-d-mute); }
body[data-theme="dark"] .svndex-fieldcode-btn:hover { color:var(--svx-d-primary); background:var(--svx-d-card-alt); }
body[data-theme="dark"] .svndex-fieldcode-pop { background:var(--svx-d-card); border-color:var(--svx-d-line-strong); }
body[data-theme="dark"] .svndex-fieldcode-snippet { background:rgba(167,139,250,.16); color:#c4b5fd; }
/* 폼 내 섹션 구분 소제목 — 아이콘 + 타이틀 + 상단 구분선 (첫 섹션은 선 없음) */
.dx-form-section-h { display:flex; align-items:center; gap:8px; margin:34px 0 14px; padding-top:22px; border-top:1px solid var(--svx-line); font-size:1rem; font-weight:600; color:var(--svx-ink); }
.dx-form-section-h i { color:var(--svx-primary); font-size:1.15rem; }
.dx-form-section-h small { font-size:.78rem; font-weight:400; color:var(--svx-mute); margin-left:2px; }
/* 팝업 관리 인라인 편집 테이블 (POP) */
.pop-mtbl { font-size:.85rem; }
.pop-mtbl td { padding:6px 8px; vertical-align:middle; }
.pop-row { transition:background .15s ease, opacity .15s ease; }
.pop-row[draggable="true"] { cursor:default; }
.pop-row.is-dragging { opacity:.45; background:var(--svx-primary-soft, rgba(124,58,237,.08)); }
.pop-row-handle { cursor:grab; user-select:none; -webkit-user-select:none; color:var(--svx-mute); font-weight:700; letter-spacing:-1px; text-align:center; }
.pop-row-handle:active { cursor:grabbing; }
.pop-row:not(.pop-row-new):hover .pop-row-handle { color:var(--svx-primary, #7c3aed); }
.pop-cell-input { width:100%; padding:6px 8px; font-size:.85rem; border:1px solid var(--svx-line); border-radius:4px; background:var(--svx-card); color:var(--svx-ink); font-family:inherit; box-sizing:border-box; }
.pop-cell-input:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 2px rgba(124,58,237,.12); }
.pop-cell-mono { font-family:'Menlo','Monaco',monospace; font-size:.78rem; max-width:140px; }
/* §2026-09-25 — 칸 폭 바닥값. 입력칸이 width:100% 라 표가 좁아지면 글자 칸만 한없이 눌렸다(제목 「4:5 ·」, 기기 값 없이 화살표만). */
.pop-cell-name { min-width:170px; }
.pop-cell-name .pop-cell-input { min-width:150px; }
.pop-cell-sub { display:block; margin-top:4px; font-size:.72rem; color:var(--svx-mute); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pop-mtbl td:has(> select[name="device"]) { min-width:92px; }
.pop-mtbl td:has(> select[name="close_cookie"]) { min-width:84px; }
.pop-cell-period label { display:flex; align-items:center; gap:6px; margin:0; }
.pop-cell-period label + label { margin-top:4px; }
.pop-cell-period label > span { flex:0 0 auto; font-size:.72rem; color:var(--svx-mute); }
.pop-cell-period .pop-cell-input { min-width:0; flex:1 1 auto; }
.pop-toggle { padding:5px 14px; min-width:54px; border-radius:99px; font-size:.78rem; font-weight:600; cursor:pointer; border:0; transition:background .15s ease, color .15s ease, opacity .15s ease; }
.pop-toggle.is-on { background:var(--svx-success-bg); color:var(--svx-success-tx); }
.pop-toggle.is-off { background:var(--svx-bg-alt); color:var(--svx-mute); }
.pop-toggle:hover { opacity:.8; }
.pop-toggle-label { display:inline-block; cursor:pointer; position:relative; }
.pop-toggle-cb { position:absolute !important; left:-9999px !important; width:0 !important; height:0 !important; opacity:0 !important; padding:0 !important; margin:0 !important; border:0 !important; pointer-events:none !important; }
/* ── 비급여(fee) 관리 — 팝업 테이블 시각언어 미러 + 아코디언 에디터 ── */
.fee-mtbl { font-size:.9rem; }
.fee-mtbl td { padding:8px; vertical-align:middle; }
.fee-mtbl th { white-space:nowrap; }
.fee-row { transition:background .15s ease, opacity .15s ease; }
.fee-row.is-dragging { opacity:.45; background:rgba(124,58,237,.08); }
/* 정본 드래그 핸들 — 순서조정 테이블 공용 (팝업·비급여 등 '추가하며 관리' 라인형식). 숫자 X, 그립 아이콘만. */
.svndex-drag-handle { cursor:grab; user-select:none; -webkit-user-select:none; text-align:center; white-space:nowrap; color:var(--svx-ink); }
.svndex-drag-handle:active { cursor:grabbing; }
.svndex-drag-handle i { font-size:1.2rem; line-height:1; vertical-align:middle; }
body[data-theme="dark"] .svndex-drag-handle { color:var(--svx-d-ink); }
.svndex-sort-hint { font-size:.82em; color:var(--svx-mute); vertical-align:middle; margin-left:1px; }
.fee-cell-input { width:100%; padding:7px 9px; font-size:.9rem; border:1px solid var(--svx-line); border-radius:5px; background:var(--svx-card); color:var(--svx-ink); font-family:inherit; box-sizing:border-box; }
.fee-cell-input:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 2px rgba(124,58,237,.12); }
/* FAQ 분류 — 관리 바(칩 추가/이름/순서/삭제) + 행 분류 select(칩) */
.faq-cat-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px 14px; margin:0 0 14px; background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:10px; }
.faq-cat-bar-label { display:inline-flex; align-items:center; gap:5px; font-size:.85rem; font-weight:700; color:var(--svx-mute); flex-shrink:0; }
.faq-cat-chips { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex:1; min-width:0; }
.faq-cat-chip { display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 6px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:99px; }
.faq-cat-chip.is-dragging { opacity:.45; }
.faq-cat-chip.is-off { opacity:.55; border-style:dashed; }
.faq-cat-drag { color:var(--svx-mute); cursor:grab; font-size:.85rem; }
.faq-cat-chip-toggle { display:inline-flex; align-items:center; cursor:pointer; color:var(--svx-mute); font-size:.85rem; }
.faq-cat-chip-toggle input { position:absolute; opacity:0; width:1px; height:1px; }
.faq-cat-chip-toggle:hover { color:var(--svx-primary); }
.faq-cat-chip-input { width:96px; border:0; background:transparent; color:var(--svx-ink); font-size:.85rem; font-family:inherit; padding:2px; }
.faq-cat-chip-input:focus { outline:none; box-shadow:0 0 0 2px rgba(124,58,237,.35); border-radius:4px; }
.faq-cat-chip-btn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:0; border-radius:50%; background:transparent; cursor:pointer; font-size:.8rem; line-height:1; }
.faq-cat-chip-btn.is-save { color:var(--svx-primary); }
.faq-cat-chip-btn.is-save:hover { background:rgba(124,58,237,.12); }
.faq-cat-chip-btn.is-del { color:#c0392b; }
.faq-cat-chip-btn.is-del:hover { background:rgba(192,57,43,.12); }
.faq-cat-empty { font-size:.82rem; color:var(--svx-mute); }
.faq-cat-add-form { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.faq-cat-add-input { width:120px; padding:6px 9px; font-size:.85rem; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); color:var(--svx-ink); font-family:inherit; }
.faq-cat-add-input:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 2px rgba(124,58,237,.12); }
.faq-q-cell { display:flex; align-items:center; gap:8px; }
.faq-q-cell .fee-cell-input { flex:1; min-width:0; }
.faq-cat-select { flex-shrink:0; max-width:130px; padding:7px 9px; font-size:.78rem; border:1px solid var(--svx-line); border-radius:99px; background:var(--svx-bg-alt); color:var(--svx-ink); font-family:inherit; cursor:pointer; }
.faq-cat-select:focus { outline:none; border-color:var(--svx-primary); }
.fee-cell-date { white-space:nowrap; }
.fee-cell-date .fee-cell-input { width:150px; display:inline-block; }
.fee-today-btn { margin-left:6px; padding:6px 10px; font-size:.78rem; border:1px solid var(--svx-line); border-radius:5px; background:var(--svx-card); color:var(--svx-ink); font-weight:500; cursor:pointer; font-family:inherit; white-space:nowrap; }
.fee-today-btn:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.fee-edit-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; font-size:.85rem; font-weight:600; white-space:nowrap; border-radius:8px; border:1px solid var(--svx-primary); background:var(--svx-card); color:var(--svx-primary); cursor:pointer; transition:background .15s ease, color .15s ease; }
.fee-edit-btn:not(:disabled):hover { background:var(--svx-primary); color:#fff; }
.fee-edit-btn.is-open { background:var(--svx-primary); color:#fff; }
.fee-edit-btn:disabled { cursor:not-allowed; opacity:.5; border-color:var(--svx-line); color:var(--svx-mute); }
.fee-toggle { padding:5px 14px; min-width:54px; border-radius:99px; font-size:.78rem; font-weight:600; cursor:pointer; border:0; transition:background .15s ease, color .15s ease, opacity .15s ease; }
.fee-toggle.is-on { background:var(--svx-success-bg); color:var(--svx-success-tx); }
.fee-toggle.is-off { background:var(--svx-bg-alt); color:var(--svx-mute); }
.fee-toggle:hover { opacity:.8; }
.fee-toggle-label { display:inline-block; cursor:pointer; position:relative; }
.fee-toggle-cb { position:absolute !important; left:-9999px !important; width:0 !important; height:0 !important; opacity:0 !important; pointer-events:none !important; }
.fee-detail-cell { padding:0 !important; background:var(--svx-bg-alt); }
.fee-editor-wrap { padding:14px 12px; }
.fee-code-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid var(--svx-line); border-radius:8px; background:var(--svx-bg-alt); color:var(--svx-mute); font-size:1.1rem; cursor:pointer; transition:color .15s ease, background .15s ease, border-color .15s ease; }
.fee-code-btn:hover { color:var(--svx-primary); border-color:var(--svx-primary); background:#f5f3ff; }
.sdx-flex-gap-8 { display:flex; align-items:center; gap:8px; }
.sdx-w-220 { width:220px; }
body[data-theme="dark"] .fee-cell-input { background:var(--svx-d-card); border-color:var(--svx-d-line-strong); color:var(--svx-d-ink); }
body[data-theme="dark"] .fee-detail-cell { background:var(--svx-d-bg-alt); }
body[data-theme="dark"] .fee-today-btn, body[data-theme="dark"] .fee-code-btn { background:var(--svx-d-bg-alt); border-color:var(--svx-d-line-strong); color:var(--svx-d-mute); }
body[data-theme="dark"] .fee-row.is-dragging { background:rgba(167,139,250,.12); }
body[data-theme="dark"] .fee-toggle.is-off { background:var(--svx-d-bg-alt); color:var(--svx-d-mute); }
/* 비급여 에디터 표 모양은 여기서 정하지 않는다 — 편집 칸이 보기 틀(.svx-fee > .svx-fee-cat > .svx-fee-table)과 그 병원 페이지 CSS 를 그대로 쓴다(svndex-editor.js 사이트 CSS 다리 · §2026-10-05). 종전 4줄이 병원 맞춤 표 모양(슬찬 글자 크기·칸 여백)을 눌렀다. */
/* 공용 작은 유틸 + 비급여 제증명 연동 행(읽기전용) */
.sdx-mute-sm { font-size:.78rem; color:var(--svx-mute); font-weight:400; }
.sdx-warn-strong { font-weight:700; color:#dc2626; }
/* 엔진코어-A·B·C 제목 앞 경고 표시 — S 전용 코드 영역임을 아이콘으로만 알린다(문구 없이). */
.sdx-cc-warn { color:var(--svx-warn); margin-right:.35em; font-size:1em; display:inline-flex; align-items:center; vertical-align:-.16em; }
body[data-theme="dark"] .sdx-cc-warn { color:#fbbf24; }
body[data-theme="dark"] .sdx-warn-strong { color:#f87171; }
.sdx-inline-form { display:inline; margin:0; }
.fee-row-cert td { background:var(--svx-bg-alt); color:var(--svx-mute); vertical-align:middle; }
.fee-row-cert .fee-cert-link { opacity:.7; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.fee-row-cert .fee-cert-link:hover { opacity:1; }
.fee-row-cert .fee-cert-datecell { display:flex; flex-direction:row; align-items:center; gap:8px; flex-wrap:nowrap; }
.fee-row-cert .fee-cert-date-ro { color:var(--svx-mute); background:#f8fafc; border-color:#e5e7eb; cursor:default; opacity:.85; }
.fee-row-cert .fee-cert-date-ro::-webkit-calendar-picker-indicator { opacity:.35; cursor:default; }
body[data-theme="dark"] .fee-row-cert .fee-cert-date-ro { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); color:var(--svx-d-mute); }
body[data-theme="dark"] .fee-row-cert td { background:var(--svx-d-bg-alt); color:var(--svx-d-mute); }
/* ── 서식 다운로드 관리(_download-section.php) — 2열: 좌(업로드) / 우(리스트) ── */
.dl-2col { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.dl-col-left { min-width:0; }
/* 우측 콘텐츠 하단 정렬 — 좌측 업로드 박스 밑단과 리스트 밑단을 일치시킨다(파일 적을 때 살짝 내려옴) */
.dl-col-right { min-width:0; display:flex; flex-direction:column; justify-content:flex-end; }
@media (max-width:860px) { .dl-2col { grid-template-columns:minmax(0, 1fr); gap:16px; } .dl-col-right { justify-content:flex-start; } }
/* 업로드 (좌) — 한 줄: 파일선택 · 표시이름 · 업로드(우측 작게). nowrap 으로 줄바꿈 방지 */
.dl-upload-form { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:9px; padding:14px 16px; margin-top:6px; background:var(--svx-bg-alt,#f8fafc); border:1px dashed #cbd5e1; border-radius:12px; }
.dl-filepick { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; max-width:200px; height:38px; padding:0 14px; background:#fff; border:1px solid #d1d5db; border-radius:8px; font-size:.85rem; font-weight:500; color:#334155; cursor:pointer; transition:border-color .15s,color .15s; }
.dl-filepick:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.dl-filepick i { font-size:1.05rem; line-height:1; flex:0 0 auto; }
.dl-filepick-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-file-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.dl-upload-label { flex:1 1 auto; min-width:60px; height:38px; padding:6px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:.875rem; color:#1e293b; background:#fff; }
.dl-upload-label:focus { border-color:var(--svx-primary); outline:none; }
.dl-upload-form .dl-upload-btn { width:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; height:38px; padding:0 16px; font-size:.85rem; font-weight:600; }
/* 첨부파일 목록 (우) */
.dl-empty { margin:0; }
/* §2026-09-25 — 빈 안내 상자(55px)가 옆 업로드 상자(68px)보다 낮아 밑단만 맞고 윗선이 13px 어긋났다 → 같은 높이로. 좁은 화면(1열)은 해당 없음. */
@media (min-width:861px) { .dl-col-right > .dl-empty { min-height:68px; display:flex; align-items:center; box-sizing:border-box; } }
.dl-list-title { display:flex; align-items:center; gap:7px; margin:0 0 10px; font-size:1.15rem; font-weight:700; color:var(--svx-text,#1e293b); }
.dl-list-title i { font-size:1.2rem; }
.dl-list-count { font-size:.78rem; font-weight:700; color:var(--svx-primary); background:#f5f3ff; border-radius:999px; padding:2px 9px; }
.dl-list-hint { display:flex; align-items:center; gap:5px; margin:0 0 12px; font-size:.76rem; color:var(--svx-mute); }
.dl-list { display:flex; flex-direction:column; gap:10px; }
.dl-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid #e5e7eb; border-radius:14px; background:#fff; transition:box-shadow .15s,border-color .15s; }
.dl-row:hover { border-color:#d8d3f0; box-shadow:0 3px 12px rgba(124,58,237,.07); }
.dl-row.is-dragging { opacity:.45; border-style:dashed; border-color:var(--svx-primary); }
.dl-drag-handle { cursor:grab; color:#cbd5e1; display:inline-flex; align-items:center; flex:0 0 auto; }
.dl-drag-handle i { font-size:1.2rem; line-height:1; }
.dl-drag-handle:hover { color:#94a3b8; }
.dl-drag-handle:active { cursor:grabbing; }
.dl-move-btns { display:flex; flex-direction:column; gap:2px; flex:0 0 auto; }
.dl-icon-tile { flex:0 0 auto; width:48px; height:48px; border-radius:12px; background:#f5f3ff; color:var(--svx-primary); display:flex; align-items:center; justify-content:center; }
.dl-icon-tile i { font-size:1.7rem; line-height:1; }
.dl-main-form { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.dl-row-top { display:flex; align-items:center; gap:8px; }
.dl-row-top .dl-row-label { flex:1 1 auto; min-width:0; height:36px; padding:5px 11px; border:1px solid #e5e7eb; border-radius:8px; font-size:.92rem; font-weight:500; color:#1e293b; background:#fff; transition:border-color .15s; }
.dl-row-top .dl-row-label:focus { border-color:var(--svx-primary); outline:none; }
.dl-row-meta { font-size:.76rem; color:var(--svx-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:2px; }
.dl-row-actions { flex:0 0 auto; display:flex; align-items:center; gap:5px; }
.dl-act-btn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:var(--svx-mute); cursor:pointer; text-decoration:none; transition:border-color .15s,color .15s; }
.dl-act-btn i { font-size:1.1rem; line-height:1; }
.dl-act-btn:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.dl-save-btn:hover { border-color:#16a34a; color:#16a34a; }
.dl-del-btn:hover { border-color:#dc2626; color:#dc2626; }
body[data-theme="dark"] .dl-upload-form { background:var(--svx-d-bg-alt); border-color:rgba(255,255,255,.15); }
body[data-theme="dark"] .dl-filepick, body[data-theme="dark"] .dl-upload-label { background:transparent; border-color:rgba(255,255,255,.16); color:#cbd5e1; }
body[data-theme="dark"] .dl-row { background:var(--svx-d-card,#1e293b); border-color:rgba(255,255,255,.1); }
body[data-theme="dark"] .dl-icon-tile, body[data-theme="dark"] .dl-list-count { background:rgba(124,58,237,.22); color:#c4b5fd; }
body[data-theme="dark"] .dl-row-label, body[data-theme="dark"] .dl-act-btn { background:transparent; border-color:rgba(255,255,255,.14); color:#cbd5e1; }
/* ── 의료진 인덱스 카드 그리드(doctor/_index.php) — 세로형(외부페이지 유사): 세로 사각 이미지 + 하단 직책·이름 ── */
.doc-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:16px; margin-top:14px; }
@media (max-width:1280px) { .doc-grid { grid-template-columns:repeat(6, minmax(0, 1fr)); } }
@media (max-width:1080px) { .doc-grid { grid-template-columns:repeat(5, minmax(0, 1fr)); } }
@media (max-width:860px) { .doc-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:640px) { .doc-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:440px) { .doc-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.doc-card { position:relative; display:flex; flex-direction:column; border:1px solid #e5e7eb; border-radius:14px; background:#fff; overflow:hidden; transition:box-shadow .15s,border-color .15s; }
.doc-card:hover { border-color:#d8d3f0; box-shadow:0 4px 16px rgba(124,58,237,.09); }
.doc-card.is-dragging { opacity:.45; border-style:dashed; border-color:var(--svx-primary); }
.doc-card-drag { position:absolute; top:8px; left:8px; z-index:2; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; background:rgba(15,23,42,.42); color:#fff; cursor:grab; font-size:1rem; line-height:1; }
.doc-card-drag:hover { background:rgba(15,23,42,.6); }
/* 대표원장 뱃지 — 사진 우측상단 (is_chief 시) */
.doc-card-chief { position:absolute; top:8px; right:8px; z-index:2; display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:99px; background:linear-gradient(135deg,#f59e0b,#fbbf24); color:#fff; font-size:.72rem; font-weight:700; line-height:1; box-shadow:0 1px 5px rgba(245,158,11,.45); }
.doc-card-chief .ph { font-size:.82rem; }
.doc-card-drag:active { cursor:grabbing; }
.doc-card-link { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
/* 세로 사각 이미지 풀(원형 X) */
.doc-card-photo { width:100%; aspect-ratio:3/4; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#f9f9f9; color:#cbd5e1; }
/* object-position 이 없으면 기본값(center)으로 잘려 인물 사진마다 얼굴 위치가 제각각이 된다 (실측 2026-08-07: 허리춤에서 잘린 원본만 확대·하강해 보였다). 외부 페이지와 동일하게 상단 기준. */
.doc-card-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.doc-card-photo.is-empty .doc-card-ph-icon { font-size:3.4rem; }
/* 하단: 직책 + 이름 */
.doc-card-info { padding:11px 12px 13px; display:flex; align-items:baseline; justify-content:center; gap:6px; flex-wrap:wrap; border-top:1px solid #e5e7eb; }
.doc-card-pos { font-size:.9rem; font-weight:600; color:var(--svx-primary); }
.doc-card-name { position:relative; top:1px; font-size:1.14rem; font-weight:700; color:var(--svx-text,#1e293b); }
/* 관리 푸터(드래그·on/off·편집·삭제) */
.doc-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 11px; border-top:1px solid #e5e7eb; background:#fafafa; }
.doc-card-actions { display:flex; align-items:center; gap:4px; }
/* §2026-09-25 — 카드가 좁아지는 폭(1024 전후 5열 · 1100 전후 6열 — 카드 105~130px)에서 켜기/끄기 + 버튼 두 개(약 141px)가 안 들어가 오른쪽 삭제 버튼이 카드 밖으로 잘렸다. 카드 폭이 모자랄 때만 버튼을 줄이고, 그래도 모자라면 두 줄로 내린다. 기준은 «카드 폭» 이다(컨테이너) — 화면 폭 구간으로 잡으면 열 수가 바뀌는 경계마다 어긋난다. 넓은 카드(1440 · 147px)는 그대로다. */
.doc-card { container-type:inline-size; }
.doc-card-name { word-break:keep-all; }
/* 같은 줄 카드끼리 관리줄(켜기·수정·삭제) 높이를 맞춘다. 이름이 두 줄인 카드가 있으면 나머지 카드의 관리줄이 위로 떠서 아래가 비어 보였다. 이름 칸이 남는 높이를 먹고 글자는 그 안에서 세로 가운데. */
.doc-card-link { flex:1 1 auto; }
.doc-card-info { flex:1 1 auto; align-content:center; }
@container (max-width: 140px) { .doc-card-foot { flex-wrap:wrap; justify-content:center; gap:5px 4px; padding:7px 6px; } .doc-card-actions { gap:2px; } .doc-card-foot .doc-card-act-btn { width:26px; height:26px; font-size:.92rem; } }
/* ⚠️ 버튼 기본 규칙이 이 블록보다 뒤에 있어 한 단계 올려 이긴다 */
.doc-card-act-btn { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; border-radius:7px; background:#fff; color:var(--svx-mute); cursor:pointer; text-decoration:none; font-size:1rem; transition:border-color .15s,color .15s; }
.doc-card-act-btn:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.doc-del-btn:hover { border-color:#dc2626; color:#dc2626; }
body[data-theme="dark"] .doc-card { background:var(--svx-d-card,#1e293b); border-color:rgba(255,255,255,.1); }
body[data-theme="dark"] .doc-card-photo { background:var(--svx-d-card); color:#64748b; }
body[data-theme="dark"] .doc-card-info { border-top-color:rgba(255,255,255,.1); }
body[data-theme="dark"] .doc-card-foot { border-top-color:rgba(255,255,255,.1); background:var(--svx-d-bg-alt); }
body[data-theme="dark"] .doc-card-act-btn { background:transparent; border-color:rgba(255,255,255,.14); }
/* ── 의료진 상세 편집(doctor/_detail.php) ── */
.doc-edit-2col { display:grid; grid-template-columns:200px 1fr; gap:28px; align-items:stretch; margin-top:14px; }
@media (max-width:820px) { .doc-edit-2col { grid-template-columns:minmax(0, 1fr); gap:20px; justify-items:center; } .doc-edit-fields { width:100%; } }
.doc-edit-photo { display:flex; flex-direction:column; align-items:center; gap:11px; }
/* 세로 프로필 비율(3:4) */
.doc-edit-photo { height:100%; }
.doc-photo-frame { position:relative; width:200px; flex:1 1 auto; min-height:260px; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#f9f9f9; color:#cbd5e1; border:1px solid #e5e7eb; }
.doc-photo-frame img { width:100%; height:100%; object-fit:cover; }
.doc-photo-frame.is-empty > i { font-size:4.5rem; }
/* 사진 제거 = 이미지 위 코너 오버레이(사진 있을 때만) */
.doc-photo-remove-x { position:absolute; top:7px; right:7px; z-index:3; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:rgba(15,23,42,.5); color:#fff; cursor:pointer; font-size:1rem; line-height:1; }
.doc-photo-remove-x:hover { background:#dc2626; }
/* 액션 = 한 줄: [사진 선택(채움)] [ⓘ] [</>] · 폭 = 이미지(200px)에 딱 맞춤 */
.doc-photo-actions { display:flex; flex-direction:row; align-items:center; gap:6px; width:200px; max-width:100%; }
.doc-photo-actions .doc-photo-pick { flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; height:38px; cursor:pointer; font-weight:600; background:#fff; border:1px solid #d1d5db; border-radius:8px; color:var(--svx-text,#1e293b); }
.doc-photo-actions .doc-photo-pick:hover { border-color:var(--svx-primary); color:var(--svx-primary); background:#fff; }
.doc-photo-actions .doc-photo-pick i { color:inherit; font-size:1.05rem; }
body[data-theme="dark"] .doc-photo-actions .doc-photo-pick { background:var(--svx-d-card); border-color:rgba(255,255,255,.16); color:var(--svx-d-ink); }
/* 편집 헤더 [목록] — 저장 버튼(8px 18px / .9rem)과 동일 크기, 보조(아웃라인) 스타일 */
.doc-back-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; font-size:.9rem; font-weight:600; line-height:1.2; white-space:nowrap; text-decoration:none; border:1px solid #d1d5db; border-radius:8px; background:#fff; color:var(--svx-text,#1e293b); cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.doc-back-btn:hover { border-color:var(--svx-primary); color:var(--svx-primary); text-decoration:none; }
.doc-back-btn i { font-size:1.05rem; color:inherit; }
body[data-theme="dark"] .doc-back-btn { background:var(--svx-d-card); border-color:rgba(255,255,255,.16); color:var(--svx-d-ink); }
/* 프로필 이미지 호버 = 돋보기 오버레이 (클릭 시 모달 확대) */
.doc-photo-zoom { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.34); color:#fff; font-size:2.2rem; opacity:0; transition:opacity .15s ease; pointer-events:none; }
.doc-photo-frame:not(.is-empty):hover .doc-photo-zoom { opacity:1; }
.doc-photo-frame.is-empty .doc-photo-zoom { display:none; }
.doc-photo-actions .doc-photo-btn { flex:0 0 38px; width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:var(--svx-mute); cursor:pointer; position:relative; }
.doc-photo-actions .doc-photo-btn:hover, .doc-photo-actions .doc-photo-btn:focus-visible { border-color:var(--svx-primary); color:var(--svx-primary); outline:none; }
.doc-photo-actions .doc-photo-btn i { font-size:1.05rem; }
/* 추가 옵션(진료일정 카드 아래) — 대표원장 토글 */
.doc-extra-options { border:1px solid #e5e7eb; border-radius:12px; background:#fafafa; padding:14px; display:flex; flex-direction:column; gap:12px; }
.doc-extra-head { font-size:.85rem; font-weight:600; color:var(--svx-mute); display:flex; align-items:center; gap:6px; }
.doc-extra-head i { font-size:1.02rem; color:var(--svx-primary); }
/* 좌측 컬럼 — 추가옵션 헤더 + 대표원장 (SNS 타이틀과 같은 상단 라인 시작) */
.doc-extra-main { display:flex; flex-direction:column; gap:12px; min-width:0; }
.doc-extra-grid { position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:12px; align-items:start; }
.doc-extra-grid > * { padding:0 18px; }
.doc-extra-grid > *:first-child { padding-left:0; }
.doc-extra-grid > *:last-child { padding-right:0; }
/* 칸 사이 세로 구분선 — 3등분 경계(33.3% · 66.6%) */
.doc-extra-grid::before, .doc-extra-grid::after { content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--svx-line); pointer-events:none; }
.doc-extra-grid::before { left:33.333%; }
.doc-extra-grid::after { left:66.666%; }
body[data-theme="dark"] .doc-extra-grid::before, body[data-theme="dark"] .doc-extra-grid::after { background:rgba(255,255,255,.12); }
@media (max-width:560px) { .doc-extra-grid { grid-template-columns:minmax(0, 1fr); } .doc-extra-grid > * { padding:0; } .doc-extra-grid::before, .doc-extra-grid::after { display:none; } }
.doc-meta-chief { display:flex; flex-direction:column; gap:5px; min-width:0; }
/* 의료진 개별 SNS — 가운데+우측 칸 스팬(col2~col3, 폭 확보). 66% 구분선 숨김(이 그리드 전용). */
.doc-extra-grid::after { display:none; }
.doc-sns { grid-column: 2 / 4; position:relative; display:flex; flex-direction:column; gap:9px; min-width:0; padding-right:0 !important; }
.doc-sns-head { font-size:.85rem; font-weight:600; color:var(--svx-ink); display:flex; align-items:center; gap:6px; }
.doc-sns-head i { font-size:1.02rem; color:var(--svx-primary); }
.doc-sns-icons { display:flex; flex-wrap:wrap; gap:6px; }
/* §2026-09-25 — nowrap 이라 1440px 에서도 마지막 아이콘 2개가 칸 밖(본문 카드 밖 15px)으로 나갔다 */
.doc-sns-ico { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 auto; padding:0; background:#fff; border:1.5px solid var(--svx-line); border-radius:10px; color:var(--svx-mute); font-size:1.15rem; cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.doc-sns-ico:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.doc-sns-ico.is-active { border-color:var(--svx-primary); color:var(--svx-primary); background:var(--svx-primary-soft, #f5f3ff); }
.doc-sns-ico.is-set { border-color:var(--svx-primary); color:var(--svx-primary); box-shadow:0 0 0 2px rgba(124,58,237,.14); }
/* §2026-09-24 — 좁은 화면(≤560)에서 격자를 1열로 바꿔도 `.doc-sns { grid-column: 2 / 4 }` 가 남아 **없는 2~4열을 새로 만들었다.** 그래서 첫 열(「추가 옵션」·대표원장)이 수십 px 로 눌려 글자가 세로로 쪼개지고 SNS 칸과 겹쳤다(모바일 실측). ⚠️ 이 규칙은 위 `.doc-sns` 정의보다 «뒤» 에 둬야 이긴다(특이도 같음 · 1978줄 미디어쿼리는 앞이라 졌다). */
@media (max-width:560px) { .doc-sns { grid-column:auto; } .doc-sns-icons { flex-wrap:wrap; } }
.doc-sns-hint { margin:0; font-size:.74rem; color:var(--svx-faint,#9aa0aa); line-height:1.5; }
/* 플로팅 팝오버 — 아이콘 줄 위에 떠서 입력. 레이아웃에 영향 X. */
.doc-sns-pop { position:absolute; z-index:30; left:0; right:0; bottom:calc(100% - 18px); min-width:240px; padding:10px 12px; background:#fff; border:1px solid var(--svx-line); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.16); display:flex; flex-direction:column; gap:7px; }
.doc-sns-pop[hidden] { display:none; }
.doc-sns-pop-label { font-size:.78rem; font-weight:700; color:var(--svx-ink); }
.doc-sns-pop-row { display:flex; align-items:center; gap:6px; }
.doc-sns-pop-url { flex:1; min-width:0; height:34px; padding:0 11px; border:1px solid var(--svx-line); border-radius:8px; background:#fff; color:var(--svx-ink); font-size:.85rem; }
.doc-sns-pop-url:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.1); }
.doc-sns-pop-clear, .doc-sns-pop-close { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:0 0 auto; padding:0; background:transparent; border:1px solid var(--svx-line); color:var(--svx-mute); cursor:pointer; border-radius:8px; }
.doc-sns-pop-clear:hover { border-color:#fecaca; background:#fef2f2; color:var(--svx-danger,#dc2626); }
.doc-sns-pop-close:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
body[data-theme="dark"] .doc-sns-ico { background:rgba(255,255,255,.04); }
body[data-theme="dark"] .doc-sns-pop { background:#1e293b; }
.doc-chief-toggle { display:flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; color:var(--svx-text,#1e293b); cursor:pointer; white-space:nowrap; }
.doc-chief-toggle i { color:var(--svx-primary); }
/* [중요] 뱃지 — 노랑 배경 흰 글씨 */
.doc-chief-badge { display:inline-flex; align-items:center; padding:1px 7px; border-radius:999px; background:#eab308; color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.02em; line-height:1.55; }
/* 다른 의료진이 대표면 = 클릭 잠김 표시(클릭 시 토스트) */
.doc-chief-toggle:has(input[data-chief-owner]) { cursor:not-allowed; }
.doc-chief-toggle:has(input[data-chief-owner]) input { cursor:not-allowed; }
.doc-chief-hint { margin:0; font-size:.72rem; color:var(--svx-mute); line-height:1.4; }
body[data-theme="dark"] .doc-chief-toggle { color:var(--svx-d-ink); }
/* 번역 제공 언어 = 다중 체크박스 그리드 (doc-chief-toggle 항목을 wrap 배치) */
.svndex-lang-picker { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:4px; }
.svndex-lang-picker .doc-chief-toggle { font-weight:500; }
/* 미리보기 = 클릭 확대 (사진 있을 때) */
.doc-photo-frame:not(.is-empty) { cursor:zoom-in; }
.doc-lightbox { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:32px; background:rgba(15,23,42,.82); cursor:zoom-out; animation:doc-lb-in .14s ease-out; }
.doc-lightbox-frame { display:flex; flex-direction:column; align-items:center; gap:12px; }
.doc-lightbox img { width:min(62vh, 88vw); aspect-ratio:4 / 5; height:auto; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); object-fit:cover; background:#0f172a; }
.doc-lightbox-cap { margin:0; color:rgba(255,255,255,.72); font-size:.82rem; letter-spacing:-.01em; text-align:center; }
@keyframes doc-lb-in { from { opacity:0; } to { opacity:1; } }
.doc-photo-btn[data-tip]:hover::after, .doc-photo-btn[data-tip]:focus-visible::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:max-content; max-width:220px; padding:7px 10px; background:rgba(15,23,42,.95); color:#fff; font-size:.73rem; line-height:1.45; border-radius:7px; white-space:normal; text-align:center; z-index:50; box-shadow:0 4px 12px rgba(0,0,0,.2); pointer-events:none; font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif; }
/* 우측 = 필드 그리드(2열) + 진료일정 박스(1열) */
.doc-edit-fields { min-width:0; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px; align-items:stretch; }
@media (max-width:1080px) { .doc-edit-fields { grid-template-columns:minmax(0, 1fr); gap:16px; } }
.doc-fields-left { min-width:0; display:flex; flex-direction:column; }
.doc-fields-right { min-width:0; display:flex; flex-direction:column; gap:14px; }
.doc-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; align-content:start; }
.doc-field-grid .doc-field-full { grid-column:1 / -1; }
/* 진료일정 빈 박스(레이아웃) */
.doc-schedule-box { display:flex; flex-direction:column; border:1px solid #e5e7eb; border-radius:12px; background:#fafafa; }
.doc-schedule-head { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:10px 12px; border-bottom:1px solid #e5e7eb; font-size:1.1rem; font-weight:600; color:var(--svx-text,#1e293b); }
.doc-schedule-head > span { display:inline-flex; align-items:center; gap:6px; }
/* ⚠ 바로 위 `.doc-schedule-head > span` 이 gap 을 걸고 있어 클래스 하나로는 진다 — 자식 결합자를 붙여 특이도를 올린다 */
.doc-schedule-head > .doc-sched-head-right { display:inline-flex; align-items:center; gap:18px; }
/* 온오프 스위치 — 「값은 두고 노출만 끈다」류 토글의 공용 부품. 새 토글은 이걸 쓴다(모양이 서너 벌로 갈리는 것을 막는다). 실제 input 은 숨기고 트랙·썸을 그린다. 전역 커스텀 체크박스 규칙은 스위치 안 input 을 스스로 비켜 가므로(아래 «공통 체크박스») 마크업에 dx-keep-native 를 붙일 필요가 없다 — 붙어 있는 옛 마크업도 그대로 둬도 된다. */
.svx-switch { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:.78rem; font-weight:500; color:var(--svx-mute,#64748b); user-select:none; }
.svx-switch input { position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none; }
.svx-switch-track { position:relative; flex:0 0 auto; width:34px; height:20px; border-radius:999px; background:#cbd5e1; transition:background .18s ease; }
.svx-switch-thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.28); transition:transform .18s ease; }
.svx-switch input:checked + .svx-switch-track { background:var(--svx-primary,#7c3aed); }
.svx-switch input:checked + .svx-switch-track .svx-switch-thumb { transform:translateX(14px); }
.svx-switch input:focus-visible + .svx-switch-track { box-shadow:0 0 0 3px rgba(124,58,237,.28); }
.svx-switch input:checked ~ .svx-switch-label { color:var(--svx-primary,#7c3aed); }
.svx-switch-label { line-height:1; }
body[data-theme="dark"] .svx-switch-track { background:#4b5563; }
body[data-theme="dark"] .svx-switch-thumb { background:#e5e7eb; }
.doc-schedule-body { flex:0 0 auto; display:flex; flex-direction:column; padding:16px 14px; }
/* 7x2 그리드 — 요일/오전·오후 크게 */
.doc-sched-grid { display:grid; grid-template-columns:auto repeat(7, minmax(0, 1fr)); gap:7px; align-items:center; }
.doc-sched-dayhead { text-align:center; font-size:.95rem; font-weight:400; color:var(--svx-text,#1e293b); padding:2px 0 6px; }
.doc-sched-period { padding-right:10px; font-size:.95rem; font-weight:400; color:var(--svx-text,#1e293b); white-space:nowrap; }
.doc-sched-cell { width:100%; min-width:0; height:40px; padding:2px 6px; text-align:center; font-size:.84rem; font-weight:600; border:1px solid #e2e8f0; border-radius:9px; background:#fff; transition:border-color .12s, box-shadow .12s; }
.doc-sched-cell:hover { border-color:#cbd5e1; }
.doc-sched-cell:focus { border-color:var(--svx-primary); outline:none; box-shadow:0 0 0 3px rgba(124,58,237,.14); }
.doc-sched-cell[data-color="black"] { color:#1e293b; }
.doc-sched-cell[data-color="gray"] { color:#9ca3af; }
.doc-sched-cell[data-color="blue"] { color:#2563eb; }
.doc-sched-cell[data-color="red"] { color:#dc2626; }
.doc-sched-cell[data-color="orange"] { color:#ea580c; }
.doc-sched-cell[data-color="green"] { color:#16a34a; }
/* §2026-09-24 — 폰 폭(≤560)에서 한 칸이 약 32px 라 요일이 「월요 / 일」 두 줄로 쪼개지고, 칸 안 「진료」가 좌우 여백 12px 에 먹혀 잘렸다(실측 390px). 요일은 세 글자 원형 그대로 두고(§12-14 — 한 글자로 줄이면 번역이 깨진다) 글자·여백만 줄인다. */
@media (max-width:560px) { .doc-sched-grid { gap:4px; } .doc-sched-dayhead { font-size:.72rem; white-space:nowrap; letter-spacing:-.02em; } .doc-sched-cell { padding:2px 1px; font-size:.78rem; height:38px; border-radius:8px; } }
/* 색상 팔레트 — 우측하단 고정 pill (글자색 선택 툴바) */
.doc-sched-palette { align-self:flex-end; margin-top:12px; display:inline-flex; align-items:center; gap:8px; }
.doc-sched-pal-label { font-size:.76rem; font-weight:600; color:var(--svx-mute); }
.doc-sched-swatch { width:22px; height:22px; padding:0; border-radius:50%; border:2px solid transparent; cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,.08); transition:transform .1s; display:inline-flex; align-items:center; justify-content:center; }
.doc-sched-swatch:hover { transform:scale(1.12); }
.doc-sched-swatch.is-active { border-color:#1e293b; }
.doc-sched-swatch.is-active::after { content:"\2713"; color:#fff; font-size:.74rem; font-weight:900; line-height:1; }
.doc-sched-swatch[data-color="black"] { background:#1e293b; }
.doc-sched-swatch[data-color="gray"] { background:#9ca3af; }
.doc-sched-swatch[data-color="blue"] { background:#2563eb; }
.doc-sched-swatch[data-color="red"] { background:#dc2626; }
.doc-sched-swatch[data-color="orange"] { background:#ea580c; }
.doc-sched-swatch[data-color="green"] { background:#16a34a; }
body[data-theme="dark"] .doc-schedule-box { background:var(--svx-d-bg-alt); border-color:rgba(255,255,255,.1); }
body[data-theme="dark"] .doc-schedule-head { border-bottom-color:rgba(255,255,255,.1); }
body[data-theme="dark"] .doc-sched-cell { background:#fff; }
body[data-theme="dark"] .doc-sched-palette { background:var(--svx-d-card); border-color:rgba(255,255,255,.14); }
body[data-theme="dark"] .doc-extra-options { background:var(--svx-d-bg-alt); border-color:rgba(255,255,255,.1); }
@media (max-width:560px) { .doc-field-grid { grid-template-columns:minmax(0, 1fr); } }
/* 2열 정렬 — 라벨이 1줄인 칸과 2줄인 칸이 나란히 놓이면 입력칸 높이가 어긋났다. margin-top 눈대중 대신 셀을 flex 로 세워 입력칸을 셀 바닥에 붙인다(라벨 줄수와 무관하게 일치). */
.doc-field { min-width:0; display:flex; flex-direction:column; }
.doc-field-label { display:block; font-size:.95rem; font-weight:600; color:var(--svx-text,#1e293b); margin-bottom:4px; }
.doc-req { color:#dc2626; }
.doc-field-row { display:flex; align-items:center; gap:6px; margin-top:auto; }
.doc-field-input { flex:1 1 auto; min-width:0; }
/* 코드버튼이 없는 칸(사진 대체텍스트 등)의 폭 보정 — 없으면 그 칸 입력칸만 38px 더 넓어 좌우가 반반으로 안 보인다 */
.doc-field-code-spacer { flex:0 0 auto; width:38px; }
/* 리스트 섹션 카드(하단) */
.doc-sections-card { margin-top:18px; }
.doc-sections-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.doc-sections-head .svndex-card-head-main { flex:1 1 320px; min-width:0; }
#doc-sections { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.doc-section { border:1px solid #e5e7eb; border-radius:12px; background:#fafafa; padding:12px 14px; }
.doc-section.is-dragging { opacity:.45; border-style:dashed; border-color:var(--svx-primary); }
.doc-section-head { display:flex; align-items:center; gap:8px; }
/* 핸들·삭제 = 섹션/항목 공통(정렬 일치) */
.doc-row-drag { cursor:grab; color:#475569; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:20px; }
.doc-row-drag i { font-size:1.25rem; line-height:1; }
.doc-row-drag:hover { color:#1e293b; }
.doc-row-drag:active { cursor:grabbing; }
body[data-theme="dark"] .doc-row-drag { color:#94a3b8; }
body[data-theme="dark"] .doc-row-drag:hover { color:#cbd5e1; }
.doc-row-del { flex:0 0 auto; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; border-radius:7px; background:#fff; color:var(--svx-mute); cursor:pointer; }
.doc-row-del i { font-size:1rem; line-height:1; }
.doc-row-del:hover { border-color:#dc2626; color:#dc2626; }
/* 분류 제목 = 항목보다 강조 */
.doc-section-title { flex:1 1 auto; min-width:0; height:38px; font-size:1.02rem; font-weight:700; color:var(--svx-text,#1e293b); background:#fff; border-color:#c7c2e8; }
.doc-section-items { display:flex; flex-direction:column; gap:6px; margin:11px 0 9px; }
.doc-item { display:flex; align-items:center; gap:7px; }
.doc-item.is-dragging { opacity:.45; }
.doc-item-bullet { flex:0 0 auto; width:5px; height:5px; border-radius:50%; background:#94a3b8; margin:0 3px; }
.doc-item-input { flex:1 1 auto; min-width:0; }
.doc-item-add { margin-left:25px; }
body[data-theme="dark"] .doc-photo-frame { background:var(--svx-d-card); color:#64748b; border-color:rgba(255,255,255,.12); }
body[data-theme="dark"] .doc-section { background:var(--svx-d-bg-alt); border-color:rgba(255,255,255,.1); }
body[data-theme="dark"] .doc-section-title { background:var(--svx-d-card); border-color:var(--svx-d-line-violet,#4c1d95); }
body[data-theme="dark"] .doc-row-del { background:transparent; border-color:rgba(255,255,255,.14); }
body[data-theme="dark"] .doc-item-bullet { background:#6b7280; }
/* CONTENT 단일 본문 페이지 — 타이틀 행(제목 + 기본서식 버튼) */
/* h2(.sdx-m-0-8px-flex)의 margin-bottom 을 행으로 옮김 — align-items:center 에서 h2 마진박스 비대칭으로 버튼이 처지는 것 방지 */
/* 타이틀 옆 아이콘 버튼 간격 — 12px 은 제목과 너무 벌어진다 */
.content-title-row { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; margin:0 0 8px; }
/* §2026-09-25 제목과 「기본서식 불러오기」가 4px 로 붙어 있었다 */
.content-title-row .sdx-m-0-8px-flex { margin:0; }
.content-template-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; font-size:.8rem; font-weight:600; white-space:nowrap; text-decoration:none; border:1px solid var(--svx-primary); border-radius:7px; background:var(--svx-card); color:var(--svx-primary); cursor:pointer; transition:background .15s ease, color .15s ease; }
.content-template-btn:hover { text-decoration:none; }
.content-template-btn:hover { background:var(--svx-primary); color:#fff; }
.content-template-btn i { font-size:1rem; }
body[data-theme="dark"] .content-template-btn { background:var(--svx-d-card); }
.pop-slides-btn { display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; font-size:.85rem; font-weight:600; white-space:nowrap; border-radius:8px; border:1px solid var(--svx-primary, #7c3aed); background:var(--svx-primary, #7c3aed); color:#fff; transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease; }
.pop-slides-btn:not(:disabled) { cursor:pointer; }
.pop-slides-btn:not(:disabled):hover { background:var(--svx-primary-d, #6d28d9); border-color:var(--svx-primary-d, #6d28d9); box-shadow:0 4px 10px rgba(124,58,237,.28); }
.pop-slides-btn:not(:disabled):active { transform:translateY(1px); box-shadow:none; }
.pop-slides-btn:disabled { cursor:not-allowed; opacity:.5; background:#cbd5e1; border-color:#cbd5e1; color:#fff; box-shadow:none; }
[data-theme="dark"] .pop-slides-btn:disabled { background:#334155; border-color:#334155; }
/* 미리보기(눈 아이콘) — . 슬라이드·ON/OFF 사이 칸. 켜지 않은 팝업도 확인하는 자리라 저장을 부르지 않는 링크로 둔다(새 탭). 슬라이드가 없으면 볼 것이 없어 비활성 표시. */
.pop-preview-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; border:1px solid var(--svx-line); background:var(--svx-card); color:var(--svx-ink); text-decoration:none; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.pop-preview-btn .ph { font-size:1.15rem; }
.pop-preview-btn:hover { border-color:var(--svx-primary); color:var(--svx-primary); background:var(--svx-bg-alt); }
.pop-preview-btn:focus-visible { outline:2px solid var(--svx-primary); outline-offset:2px; }
.pop-preview-btn.is-disabled { opacity:.4; cursor:not-allowed; color:var(--svx-mute); }
.pop-preview-btn.is-disabled:hover { border-color:var(--svx-line); color:var(--svx-mute); background:var(--svx-card); }
/* §2026-10-12 대표님 «미리보기 버튼도 강조» → 같은 날 «너무 눈에 띈다 · 크기 줄이고 연한 노랑(아이보리)» — 아이보리 바탕 · 연한 노랑 테두리 · 32px(원래 34px) */
.pop-preview-btn:not(.is-disabled) { width:32px; height:32px; background:#fffbeb; border-color:#f3dc8f; color:#92400e; }
.pop-preview-btn:not(.is-disabled) .ph { font-size:1.1rem; }
.pop-preview-btn:not(.is-disabled):hover { background:#fef3c7; border-color:#e9c46a; color:#78350f; }
body[data-theme="dark"] a.pop-preview-btn:not(.is-disabled) { background:rgba(254,243,199,.1); border-color:rgba(253,230,138,.4); color:#fde68a; }
body[data-theme="dark"] a.pop-preview-btn:not(.is-disabled):hover { background:rgba(254,243,199,.18); border-color:rgba(253,230,138,.6); color:#fef3c7; }
/* 팝업 도움말 — 2열 × 3행. 좁은 화면에서는 1열로 접힌다. 색: 라이트 = 그레이(본문에 묻히지 않게 한 톤 눌러 구분) · 다크 = 바이올렛 계열. */
.pop-help code { background:#e3e7ed; color:#2b303a; padding:1px 5px; border-radius:3px; }
.pop-help strong { color:#1f242c; }
.pop-help-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 24px; margin:0; padding-left:18px; }
.pop-help-grid li { line-height:1.6; }
.pop-help-grid code { font-size:.8em; }
@media (max-width: 900px) { .pop-help-grid { grid-template-columns:minmax(0, 1fr); } }
/* 팝업 유형 프리셋 — 박스 + 아코디언. 도움말 바로 아래에 놓인다. */
.pop-preset-acc { margin-top:12px; border:1px solid var(--svx-line); border-radius:10px; background:var(--svx-card); overflow:hidden; }
.pop-preset-sum { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:var(--svx-bg-alt); transition:background .15s ease; }
.pop-preset-sum::-webkit-details-marker { display:none; }
.pop-preset-sum:hover { background:var(--svx-card); }
.pop-preset-sum:focus-visible { outline:2px solid var(--svx-primary); outline-offset:-2px; }
.pop-preset-sum-l, .pop-preset-sum-r { display:flex; align-items:center; gap:8px; min-width:0; }
.pop-preset-sum-l .ph { font-size:1.15rem; color:var(--svx-primary); }
.pop-preset-count { font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:99px; background:var(--svx-primary); color:#fff; }
.pop-preset-hint { font-size:.8rem; color:var(--svx-mute); }
.pop-preset-caret { font-size:1rem; color:var(--svx-mute); transition:transform .18s ease; }
.pop-preset-acc[open] .pop-preset-caret { transform:rotate(180deg); }
.pop-preset-acc[open] .pop-preset-sum { border-bottom:1px solid var(--svx-line); }
.pop-preset-body { padding:14px 16px 16px; }
.pop-preset-tbl td { vertical-align:middle; }
@media (max-width: 720px) { .pop-preset-hint { display:none; } }
/* 팝업 미리보기 모달 — iframe 이 화면 폭을 그대로 쓴다. ★ 축소(transform:scale)를 쓰지 않는다. iframe 은 자체 뷰포트를 가지므로 폭을 그대로 두면 88vw·100vw·미디어쿼리가 실제 브라우저와 똑같이 계산된다. 조작 바만 그 위에 얹는다. */
.pop-pv-modal { position:fixed; inset:0; z-index:10050; background:rgba(15,18,24,.55); }
.pop-pv-modal.svx-site-pv { background:#2b2f36; }   /* §2026-10-13 사이트 미리보기 바깥 = 짙은 회색 단색(대표님) */
/* 화면 = 브라우저 꽉 찬 높이(PC = 꽉 찬 폭 · 태블릿·모바일 = 그 폭 가운데 · 양옆 회색) — X·아이콘은 그 위에 뜬다(대표님 «브라우저 꽉 찬 화면 · 버튼은 위에 떠 있게»).
   iframe 은 top·bottom 만으로는 안 늘어난다(기본 150px) — 높이를 직접. 흰 사이트 위에서도 보이게 X·아이콘 바탕을 짙게. */
.svx-site-pv .pop-pv-frame { top:0; height:100%; border-radius:0; box-shadow:0 0 40px rgba(0,0,0,.35); }
.svx-site-pv-dock { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:max-content; z-index:2; display:flex; flex-direction:column; gap:6px; padding:5px; border-radius:12px; background:rgba(20,22,28,.82); box-shadow:0 4px 18px rgba(0,0,0,.28); }
.svx-site-pv-dock .pop-pv-dev { width:38px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; border-radius:8px; }   /* 같은 날 대표님 «크기 더 줄여도 돼» — 52×44 → 38×34 */
.svx-site-pv-dock .svx-site-pv-close { margin-top:4px; font-size:1rem; background:#9f1b1b; border-color:#9f1b1b; color:#fff; }   /* 닫기 = 붉은 바탕 + 흰 × — «미리보기 중» 표시도 겸한다(외부 페이지로 착각하지 않게). 색 = 티커 빨강(ticker.css .tk-color-c7 · 같은 날 대표님 «티커에 빨강 그 색») */   
.svx-site-pv-dock .svx-site-pv-close:hover { background:#b52323; border-color:#b52323; color:#fff; }   /* 닫기 = 폭 단추들과 한 칸 띄운다 */
.pop-pv-frame { position:absolute; top:0; height:100%; width:100%; border:0; background:#fff; }
/* §2026-10-12 대표님 «좀 더 키워줘» — 미리보기인 줄 모르고 새 창으로 아는 일이 있어 막대를 키웠다(글자·단추 약 1.3배) */
.pop-pv-bar { position:absolute; top:16px; right:16px; z-index:2; display:flex; align-items:center; gap:14px; padding:10px 12px 10px 18px; border-radius:12px; background:rgba(20,23,30,.86); backdrop-filter:blur(6px); box-shadow:0 6px 22px rgba(0,0,0,.32); color:#fff; }
.pop-pv-title { font-size:1.05rem; font-weight:700; max-width:360px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pop-pv-size { font-size:.88rem; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pop-pv-devices { display:flex; gap:6px; }
.pop-pv-dev { padding:7px 15px; font-size:.95rem; font-weight:600; white-space:nowrap; border:1px solid rgba(255,255,255,.26); background:transparent; color:rgba(255,255,255,.78); border-radius:8px; cursor:pointer; }
.pop-pv-dev:hover { border-color:rgba(255,255,255,.5); color:#fff; }
.pop-pv-dev.is-on { background:#7c3aed; border-color:#7c3aed; color:#fff; }
.pop-pv-x { width:38px; height:38px; border:0; background:transparent; color:rgba(255,255,255,.8); font-size:1.8rem; line-height:1; cursor:pointer; border-radius:8px; }
.pop-pv-x:hover { background:rgba(255,255,255,.14); color:#fff; }
.pop-pv-dev:focus-visible, .pop-pv-x:focus-visible { outline:2px solid #a78bfa; outline-offset:2px; }
/* 막대 폭(제목 포함 약 750px)보다 좁은 화면 — 화면 안에 묶고 넘치면 줄을 바꾼다(721px 에서 넘쳤다) */
@media (max-width: 900px) { .pop-pv-bar { left:8px; right:8px; top:8px; gap:8px 12px; flex-wrap:wrap; justify-content:flex-end; } }
@media (max-width: 720px) {
  .pop-pv-title, .pop-pv-size { display:none; }
  /* 폰 — 단추를 한 단 줄인다(390px 에서 448px 이던 막대) */
  .pop-pv-bar { gap:8px; padding:8px 10px; }
  .pop-pv-devices { flex-wrap:wrap; justify-content:flex-end; }
  .pop-pv-dev { padding:6px 11px; font-size:.86rem; }
  .pop-pv-x { width:34px; height:34px; }
}
/* 라이트 = 그레이 톤 (도움말과 한 묶음으로 읽히게 같은 계열) */
.pop-preset-acc { border-color:#c8cfd9; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.pop-preset-sum { background:#eaeef3; }
.pop-preset-sum:hover { background:#e0e5ec; }
.pop-preset-acc[open] .pop-preset-sum { border-bottom-color:#c8cfd9; }
.pop-preset-sum-l strong { color:#2b303a; }
.pop-preset-sum-l .ph { color:#5b6472; }
.pop-preset-count { background:var(--svx-error); } /* §2026-10-12 대표님 «6종 뱃지를 빨강으로 강조» — 흰 글자 대비 4.8:1 */
/* 다크 = 바이올렛 계열 (그레이는 다크 배경에서 죽는다) */
body[data-theme="dark"] .pop-help code { background:rgba(124,58,237,.22); color:#ddd6fe; }
body[data-theme="dark"] .pop-help strong { color:#ede9fe; }
body[data-theme="dark"] .pop-preset-acc { border-color:rgba(167,139,250,.32); background:rgba(124,58,237,.06); }
body[data-theme="dark"] .pop-preset-sum { background:rgba(124,58,237,.16); }
body[data-theme="dark"] .pop-preset-sum:hover { background:rgba(124,58,237,.24); }
body[data-theme="dark"] .pop-preset-acc[open] .pop-preset-sum { border-bottom-color:rgba(167,139,250,.32); }
body[data-theme="dark"] .pop-preset-sum-l strong { color:#ede9fe; }
body[data-theme="dark"] .pop-preset-sum-l .ph { color:#a78bfa; }
body[data-theme="dark"] .pop-preset-count { background:#dc2626; }
/* 팝업 슬라이드 편집 모달 (1000×600) */
.pop-slide-modal { padding:20px; }
.pop-slide-box { position:relative; width:100%; max-width:1360px; height:min(720px, calc(100vh - 40px)); background:var(--svx-card); border-radius:10px; box-shadow:0 16px 48px rgba(0,0,0,.3); display:flex; flex-direction:column; overflow:hidden; }
.pop-slide-form { flex:1; display:flex; flex-direction:column; min-height:0; }
.pop-slide-cols { flex:1; display:grid; grid-template-columns:4fr 6fr; gap:16px; padding:18px 20px; min-height:0; overflow:hidden; }
/* 좌측 미리보기 */
.pop-slide-preview { display:flex; flex-direction:column; min-height:0; }
/* 작업 권장 사이즈 안내 (인포 아이콘 + 호버 툴팁) — 회색 옵션 바 안 마지막 항목 */
.pop-guide-info { position:absolute; right:12px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--svx-mute); cursor:help; user-select:none; }
.pop-guide-info i { font-size:.95rem; color:var(--svx-primary); }
/* 옵션 줄 안에 두는 변형 — 툴팁 규칙(:hover::after)은 그대로 쓰고 자리만 흐름 안으로 되돌린다. position 은 유지해야 한다(툴팁이 자기 자신 기준으로 붙는다). */
.pop-guide-info.is-inline { position:relative; right:auto; bottom:auto; margin-left:2px; }
/* §2026-10-12 대표님 «저걸 보고 팝업을 만들어야 하는데 지나친다» — 미리보기 오른쪽 아래 안내를 빨강 알약으로 강조 */
.pop-guide-info:not(.is-inline) { padding:6px 13px 6px 11px; gap:6px; border:1px solid #fca5a5; border-radius:99px; background:#fef2f2; color:#b91c1c; font-size:.84rem; font-weight:700; }
.pop-guide-info:not(.is-inline) i { font-size:1.05rem; color:#dc2626; }
.pop-guide-info:not(.is-inline):hover, .pop-guide-info:not(.is-inline):focus-visible { color:#fff; background:#dc2626; border-color:#dc2626; }
.pop-guide-info:not(.is-inline):hover i, .pop-guide-info:not(.is-inline):focus-visible i { color:#fff; }
body[data-theme="dark"] .pop-guide-info:not(.is-inline) { background:rgba(220,38,38,.18); border-color:rgba(248,113,113,.55); color:#fecaca; }
body[data-theme="dark"] .pop-guide-info:not(.is-inline) i { color:#f87171; }
body[data-theme="dark"] .pop-guide-info:not(.is-inline):hover, body[data-theme="dark"] .pop-guide-info:not(.is-inline):focus-visible { background:#dc2626; border-color:#dc2626; color:#fff; }
body[data-theme="dark"] .pop-guide-info:not(.is-inline):hover i, body[data-theme="dark"] .pop-guide-info:not(.is-inline):focus-visible i { color:#fff; }
/* 말풍선(내용 상자)도 크게 — 대표님 «더 크게 · 내용 박스». 굵기는 알약(700)을 물려받지 않게 보통으로 · tab-size = «4:5 / 1:1 / 16:9» 화살표 줄 맞춤(16:9 만 다음 칸으로 밀렸다) */
.pop-guide-info:not(.is-inline):hover::after, .pop-guide-info:not(.is-inline):focus-visible::after { font-size:.95rem; font-weight:500; line-height:1.8; padding:16px 20px; border-radius:10px; min-width:0; width:max-content; max-width:calc(100cqi - 24px); white-space:pre-wrap; tab-size:14; -moz-tab-size:14; }
/* 말풍선 폭 기준 = 미리보기 칸(좁은 창에서 칸보다 넓어져 화면 왼쪽 밖으로 잘렸다 · 1024px) — 칸을 폭 컨테이너로 두고 그 안으로 묶는다(넘치면 줄을 바꾼다) */
#pop-slide-modal .pop-preview-frame { container-type:inline-size; }
/* 옵션 하나 + 그 안내 아이콘을 한 덩어리로 — 줄의 gap(14px)이 둘 사이에 끼지 않게 한다. */
.pop-opt-pair { display:inline-flex; align-items:center; gap:4px; }
.pop-guide-info:hover, .pop-guide-info:focus-visible { color:var(--svx-primary); outline:none; }
.pop-guide-info:hover::after, .pop-guide-info:focus-visible::after { content:attr(data-tip); white-space:pre; position:absolute; bottom:calc(100% + 8px); right:0; background:#1a1d24; color:#fff; padding:10px 13px; border-radius:8px; font-size:.72rem; line-height:1.7; box-shadow:0 10px 28px rgba(0,0,0,.3); z-index:60; min-width:214px; text-align:left; pointer-events:none; font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif; }
.pop-preview-frame { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--svx-bg-alt); border-radius:8px; padding:14px; gap:10px; min-height:0; }
.pop-preview-empty { color:var(--svx-mute); font-size:.85rem; text-align:center; padding:20px; }
/* PC/모바일 미리보기 스위치 — 좌상단 고정, 기본 PC. 실제 반응형 감지가 아니라 두 고정 프레임을 전환하는 방식(진짜 뷰포트 재현은 iframe/컨테이너쿼리가 필요해 배보다 배꼽이 큼). */
.pop-device-toggle { position:absolute; top:10px; left:10px; z-index:3; display:inline-flex; gap:4px; background:#fff; border:1px solid var(--svx-line); border-radius:8px; padding:3px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.pop-device-toggle button { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--svx-mute); cursor:pointer; font-size:1rem; transition:background .15s ease, color .15s ease; }
.pop-device-toggle button:hover { color:var(--svx-primary); }
.pop-device-toggle button.is-active { background:var(--svx-primary); color:#fff; }
/* 어두운 화면 — 광역 단추 규칙(darkmode.css)에서 빼고(.pop-dev-ico) 여기서 짝을 준다. 종전엔 셋 다 보라 채움이라 고른 기기가 안 보였다(8사이트 공통 · §2026-10-12) */
body[data-theme="dark"] .pop-device-toggle { background:var(--svx-d-card); border-color:var(--svx-d-line-strong); box-shadow:none; }
body[data-theme="dark"] .pop-device-toggle button.pop-dev-ico { background:transparent; color:var(--svx-d-mute); }
body[data-theme="dark"] .pop-device-toggle button.pop-dev-ico:hover { color:var(--svx-d-primary); }
body[data-theme="dark"] .pop-device-toggle button.pop-dev-ico.is-active { background:#7c3aed; color:#fff; }
/* ── 미리보기 = iframe. 예전에는 이 아래에 팝업 크기를 다시 정하는 규칙이 수십 개 있었다 — 즉 **팝업 레이아웃이 두 벌**이라 pop.css 를 고쳐도 이 화면은 옛 배치를 유지했고, 관리자 창 폭 기준으로 vw 가 계산돼 사이트 어디에도 없는 모양이 나왔다. 이제 iframe 안에서 실제 pop.css + pop.js 가 돈다 — 여기서는 «액자» 만 그린다. ── */
/* ⚠ 액자는 **절대배치로 고정 크기**를 갖는다. 흐름 안에 두면 미리보기 높이가 액자를 키우고 → 액자가 커지니 미리보기도 커지는 **되먹임**이 생긴다. 크기는 패널이 정하고 미리보기는 그 안에 들어가기만 한다. */
.pop-device-frame { position:absolute; inset:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* ⚠ iframe 은 **반드시 absolute**. 흐름 안에 두면 축소(transform)는 «그려지는 크기» 만 줄일 뿐 레이아웃이 차지하는 크기는 원래 폭 그대로라 모달 전체를 밀어 버린다. */
/* ⚠ max-width/height 는 **JS 가 틀려도** 액자 밖으로 못 나가게 하는 마지막 안전장치다. 크기는 스크립트가 인라인으로 정하지만, 창 크기가 바뀌는 타이밍에 잘못 재면 미리보기가 패널을 뚫고 나온다. */
.pop-preview-viewport { position:relative; z-index:1; width:100%; height:0; max-width:100%; max-height:100%; overflow:hidden; border-radius:10px; background:#20232a; }
/* iframe 폭 = «실제 뷰포트 폭»(1280/1024/390). 패널이 좁으므로 통째로 축소해 넣는다 — 축소는 이미 맞게 계산된 화면을 줄이는 것이라 배치가 안 틀어진다(값을 바꿔치기하면 틀어진다). */
.pop-preview-iframe { position:absolute; top:0; left:0; display:block; border:0; transform-origin:top left; background:#20232a; }
.pop-preview-iframe[hidden] { display:none; }
/* 우측 입력 */
/* position:relative = 바로가기 플로팅(.pop-link-pop)의 위치 기준. 목록(.pop-slide-list)은 overflow 가 걸려 있어 그 안에 두면 팝오버가 잘린다 — 한 단계 위에 건다. */
.pop-slide-inputs { position:relative; display:flex; flex-direction:column; min-height:0; }
.pop-slide-inputs-head { font-size:1.1rem; font-weight:600; color:var(--svx-ink); padding:20px 0 20px 0; margin-bottom:8px; border-bottom:1px solid var(--svx-line); }
.pop-slide-inputs-head span { font-size:.78rem; font-weight:400; color:var(--svx-mute); margin-left:6px; }
/* 옵션바 = 2행 고정. 폭이 좁아 라벨이 한 글자씩 세로로 쪼개지던 것을 nowrap + 명시적 줄바꿈으로 해소했다. 높이가 늘어난 만큼 위 미리보기(flex:1)가 자동으로 줄어든다. */
.pop-slide-options { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center; padding:12px 14px; background:var(--svx-bg-alt); border-radius:6px; margin-top:10px; font-size:.85rem; flex:0 0 auto; min-height:88px; box-sizing:border-box; }
.pop-slide-break { flex:0 0 100%; height:0; margin:0; }
.pop-radio-label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; user-select:none; white-space:nowrap; }
.pop-slide-sep { color:var(--svx-line); }
/* 바로가기가 넓은 텍스트필드 → 버튼 1개로 바뀌면서 그 폭을 태그(1fr)와 옵션열에 재배분. 기존 84px 옵션열은 새창·삭제·기기선택 3개를 담기엔 좁아 서로 겹치고 목록에 가로 스크롤을 만들었다. */
.pop-slide-thead, .pop-slide-item { display:grid; grid-template-columns:38px 52px 56px minmax(0,1fr) 52px 74px; align-items:center; gap:6px; padding:6px 8px; box-sizing:border-box; }
.pop-opt-stashed { display:none; }
/* 숨김(코드 유지) — 좌 일일노출 · 우 슬라이드 기기선택. 필요 시 클래스 제거로 부활 */
.pop-slide-thead { padding:0 8px 6px; margin-bottom:6px; font-size:.7rem; font-weight:700; color:var(--svx-mute); border-bottom:1px solid var(--svx-line); letter-spacing:.4px; flex:0 0 auto; }
.pop-slide-thead .th-order { text-align:center; }
.pop-slide-thead .th-active { text-align:center; }
.pop-slide-thead .th-image { text-align:center; }
.pop-slide-thead .th-tag { text-align:center; }
.pop-slide-thead .th-link { text-align:center; min-width:0; }
.pop-slide-thead .th-opt { text-align:center; }
.pop-slide-item > .pop-slide-order { justify-self:center; }
.pop-slide-item > .pop-slot-toggle { justify-self:center; }
.pop-slide-item > .pop-slot-image { justify-self:center; }
.pop-slide-item > .pop-slot-opt { justify-self:stretch; }
.pop-slide-list { position:relative; flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:6px; padding-right:4px; }
/* 바로가기 = 버튼 + 공용 플로팅 입력 (의료진 SNS .doc-sns-pop 과 동형) */
.pop-slot-linkwrap { display:flex; align-items:center; justify-content:center; min-width:0; }
.pop-slot-linkbtn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; background:var(--svx-card); border:1.5px solid var(--svx-line); border-radius:8px; color:var(--svx-mute); font-size:.95rem; cursor:pointer; transition:border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.pop-slot-linkbtn:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.pop-slot-linkbtn.is-set { border-color:var(--svx-primary); color:var(--svx-primary); box-shadow:0 0 0 2px rgba(124,58,237,.14); }
.pop-link-pop { position:absolute; z-index:30; left:10px; right:10px; padding:10px 12px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.16); display:flex; flex-direction:column; gap:7px; }
.pop-link-pop[hidden] { display:none; }
.pop-link-pop-label { font-size:.78rem; font-weight:700; color:var(--svx-ink); }
.pop-link-pop-row { display:flex; align-items:center; gap:6px; }
.pop-link-pop-url { flex:1; min-width:0; padding:7px 9px; font-size:.82rem; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); color:var(--svx-ink); }
.pop-link-pop-url:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.pop-link-pop-clear, .pop-link-pop-close { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 auto; padding:0; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); color:var(--svx-mute); cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.pop-link-pop-clear:hover { border-color:var(--svx-error); color:var(--svx-error); }
.pop-link-pop-close:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.pop-link-pop-hint { margin:0; font-size:.72rem; color:var(--svx-faint,#9aa0aa); line-height:1.5; }
.pop-slide-item { background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:6px; font-size:.78rem; }
.pop-slide-item.is-dragging { opacity:.5; }
.pop-slide-order { display:flex; align-items:center; gap:4px; min-width:0; }
.pop-slide-handle { cursor:grab; color:var(--svx-mute); font-size:.85rem; user-select:none; }
.pop-slide-handle:active { cursor:grabbing; }
.pop-slide-no { flex:1; color:var(--svx-mute); text-align:center; font-weight:600; min-width:0; }
.pop-slot-toggle { justify-self:center; }
.pop-slot-toggle input { display:none; }
.pop-slot-onoff { display:inline-block; padding:3px 8px; min-width:36px; border-radius:99px; background:var(--svx-bg-alt); border:1px solid var(--svx-line); color:var(--svx-mute); font-size:.7rem; font-weight:600; cursor:pointer; transition:background .15s ease; }
.pop-slot-toggle input:checked + .pop-slot-onoff { background:var(--svx-success-bg); border-color:var(--svx-success); color:var(--svx-success-tx); }
.pop-slot-image { position:relative; flex:0 0 56px; width:56px; height:56px; }
.pop-slot-thumb { width:100%; height:100%; background:var(--svx-card); border:1px dashed var(--svx-line); border-radius:4px; position:relative; cursor:pointer; overflow:hidden; }
.pop-slot-thumb-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pop-slot-thumb[data-empty]::after { content:attr(data-empty); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.65rem; color:var(--svx-mute); }
.pop-slot-file { position:absolute; inset:0; opacity:0; cursor:pointer; }
.pop-slot-clear { position:absolute; top:-4px; right:-4px; width:16px; height:16px; padding:0; border:0; background:var(--svx-error); color:#fff; border-radius:50%; font-size:.7rem; line-height:1; cursor:pointer; display:none; }
.pop-slot-image:has(.pop-slot-image-url:not([value=""])) .pop-slot-clear { display:flex; align-items:center; justify-content:center; }
.pop-slot-tag { width:100%; min-width:0; box-sizing:border-box; padding:5px 7px; font-size:.78rem; border:1px solid var(--svx-line); border-radius:4px; background:var(--svx-card); color:var(--svx-ink); }
.pop-slot-link { width:100%; min-width:0; box-sizing:border-box; padding:5px 7px; font-size:.78rem; border:1px solid var(--svx-line); border-radius:4px; background:var(--svx-card); color:var(--svx-ink); }
/* 옵션 셀 — 새창 체크 + 노출기기 셀렉트를 한 칸(옵션)에 세로 스택 (구: device 셀렉트가 7번째 자식이라 그리드 밖으로 래핑되던 버그 수정) */
.pop-slot-opt { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px; min-width:0; }
.pop-slot-newwin { display:inline-flex; align-items:center; gap:3px; font-size:.72rem; color:var(--svx-mute); white-space:nowrap; cursor:pointer; }
.pop-slot-newwin input { margin:0; }
.pop-slot-del { flex:0 0 auto; width:20px; height:20px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--svx-line); background:var(--svx-card); color:var(--svx-mute); border-radius:4px; font-size:1rem; line-height:1; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.pop-slot-del:hover { border-color:var(--svx-error); background:var(--svx-error-bg); color:var(--svx-error); }
.pop-slot-device { width:100%; max-width:100px; box-sizing:border-box; padding:4px 6px; font-size:.72rem; border:1px solid var(--svx-line); border-radius:4px; background:var(--svx-card); color:var(--svx-ink); }
.pop-slide-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:0 14px; margin-top:10px; background:var(--svx-bg-alt); border-radius:6px; flex:0 0 auto; min-height:48px; box-sizing:border-box; }
.pop-slide-actions button { padding:8px 22px; font-size:.85rem; min-width:90px; width:auto; flex:0 0 auto; }
.pop-slide-actions .svndex-btn-primary { width:auto; padding:9px 36px; font-size:.9rem; font-weight:600; }
/* 모달 헤더 */
.pop-slide-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--svx-line); }
.pop-slide-head h3 { margin:0; font-size:1rem; color:var(--svx-ink); }
.pop-slide-head-meta { font-size:.78rem; color:var(--svx-mute); }
@media (max-width: 1400px) { .pop-slide-box { max-width:calc(100vw - 32px); } }
@media (max-width: 900px) { .pop-slide-cols { grid-template-columns:minmax(0, 1fr); } .pop-slide-preview { display:none; } .pop-slide-box { height:calc(100vh - 32px); } }
/* ── 공통 체크박스 · 라디오 — 네이티브 appearance 를 제거한 커스텀 ── */
/* 공용 스위치(.svx-switch) 안의 숨은 체크박스는 이 규칙들이 비켜 간다 — 이 규칙(특이도 0,2,1)이 스위치의 «숨김» 규칙(0,1,1)을 이겨 보이지 않는 16px 칸이 생겼다(§2026-10-01 · 7DEX 의료법 가드 스위치가 22px 들여 써짐). :not() 안의 목록은 특이도를 올리지 않는다(둘 다 0,1,0). */
input[type="checkbox"]:not([class*="dx-keep-native"], .svx-switch *) { appearance:none; -webkit-appearance:none; width:16px; height:16px; padding:0; margin:0; border:1.5px solid #94a3b8; border-radius:4px; background:var(--svx-card); cursor:pointer; vertical-align:middle; position:relative; flex-shrink:0; transition:background .12s ease, border-color .12s ease, box-shadow .12s ease; }
input[type="checkbox"]:not([class*="dx-keep-native"], .svx-switch *):hover { border-color:var(--svx-primary); }
input[type="checkbox"]:not([class*="dx-keep-native"], .svx-switch *):checked { background:var(--svx-primary); border-color:var(--svx-primary); }
input[type="checkbox"]:not([class*="dx-keep-native"], .svx-switch *):checked::after { content:""; position:absolute; left:4px; top:0; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
input[type="checkbox"]:not([class*="dx-keep-native"], .svx-switch *):focus-visible { outline:2px solid rgba(124,58,237,.35); outline-offset:1px; }
input[type="checkbox"]:not([class*="dx-keep-native"], .svx-switch *):disabled { opacity:.5; cursor:not-allowed; }
input[type="radio"]:not([class*="dx-keep-native"]) { appearance:none; -webkit-appearance:none; width:16px; height:16px; padding:0; margin:0; border:1.5px solid #94a3b8; border-radius:50%; background:var(--svx-card); cursor:pointer; vertical-align:middle; position:relative; flex-shrink:0; transition:background .12s ease, border-color .12s ease, box-shadow .12s ease; }
input[type="radio"]:not([class*="dx-keep-native"]):hover { border-color:var(--svx-primary); }
input[type="radio"]:not([class*="dx-keep-native"]):checked { border-color:var(--svx-primary); border-width:5px; background:#fff; }
input[type="radio"]:not([class*="dx-keep-native"]):focus-visible { outline:2px solid rgba(124,58,237,.35); outline-offset:1px; }
input[type="radio"]:not([class*="dx-keep-native"]):disabled { opacity:.5; cursor:not-allowed; }
/* 커스텀 select 화살표 — 우측 padding 충분히 + 보라 chevron SVG */
select:not([class*="dx-keep-native"]):not([multiple]) { appearance:none; -webkit-appearance:none; padding-right:32px; background-image:url("data:image/svg+xml; utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:11px 7px; }
/* 공통 폼컨트롤 박스 기본형 — 컨테이너 밖 «맨» select/input/textarea 가 네이티브로 보이지 않게 저특이도(:where)로 기본 상자를 준다. 어떤 클래스 규칙이든 이깁니다 → 기존 스타일에는 회귀가 없다. */
select:where(:not([class*="dx-keep-native"]):not([multiple])) { border:1px solid var(--svx-line); border-radius:6px; padding:5px 32px 5px 10px; font-size:.8rem; color:var(--svx-ink); background-color:var(--svx-card); cursor:pointer; box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease; }
:where(input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],input[type=number],input[type=search],input[type=datetime-local],input[type=date],input[type=time],textarea):where(:not([class*="dx-keep-native"])) { border:1px solid var(--svx-line); border-radius:6px; padding:7px 10px; font-size:.85rem; font-family:inherit; color:var(--svx-ink); background-color:var(--svx-card); box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease; }
:where(select,input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],input[type=number],input[type=search],input[type=datetime-local],input[type=date],input[type=time],textarea):where(:not([class*="dx-keep-native"])):hover { border-color:var(--svx-primary); }
:where(select,input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],input[type=number],input[type=search],input[type=datetime-local],input[type=date],input[type=time],textarea):where(:not([class*="dx-keep-native"])):focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
/* ── 게시판 관리 — 8컬럼 표 + 드래그 정렬 + SEO·설정 펼침 + 두 번 확인 일괄저장 ── */
.bt-card { padding:1.2rem 1.4rem; }
.bt-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.bt-header h3 { margin:0; font-size:1.05rem; }
.bt-count { color:var(--svx-mute); font-weight:400; font-size:.9rem; }
.bt-actions { display:flex; gap:.5rem; }
.bt-btn { padding:.5rem .9rem; border:1px solid var(--svx-line); background:var(--svx-card); border-radius:6px; cursor:pointer; font-size:.85rem; }
.bt-btn:hover { background:var(--svx-bg-alt); }
.bt-btn.is-primary { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.bt-btn.is-primary:hover { background:#6d28d9; }
.bt-flash { padding:.6rem .8rem; margin-bottom:.8rem; border-radius:5px; font-size:.85rem; }
.bt-flash.is-success { background:#e8f5e9; color:#2e7d32; }
.bt-flash.is-error { background:#ffebee; color:#c62828; }
.bt-table { width:100%; border-collapse:collapse; font-size:.85rem; table-layout:fixed; }
.bt-table th { background:#f3f3f6; padding:.5rem; text-align:center; font-weight:600; border-bottom:2px solid #e0e0e6; }
.bt-table td { padding:.4rem .5rem; border-bottom:1px solid #efeff3; vertical-align:middle; text-align:center; }
.bt-table td.bt-cell-code, .bt-table td.bt-cell-title { text-align:left; }
/* 설정 비교 테이블(권장 프리셋 등) — 기본 bt-table 중앙정렬 해제, 좌측·자동폭 */
.bt-table-cfg { table-layout:auto; font-size:.9rem; }
.bt-table-cfg th, .bt-table-cfg td { text-align:left; padding:.7rem .85rem; }
.bt-table-cfg th { color:var(--svx-mute); }
/* ── 배포 프리셋 트리 (SETTING > PRESET 탭) ── */
.sdx-preset-tree { table-layout:fixed; }
.sdx-preset-tree td { text-align:left; vertical-align:middle; }
.sdx-preset-menu td { background:var(--svx-bg-alt); padding:.65rem .6rem .5rem; border-top:1px solid var(--svx-line); font-size:.9rem; }
.sdx-preset-menu td > i { color:var(--svx-primary); }
.sdx-preset-node-label { font-weight:600; color:var(--svx-ink); }
.sdx-preset-node-need { color:var(--svx-mute); font-size:.82rem; line-height:1.5; }
/* nowrap 을 두지 않는다 — 긴 뱃지가 칸에서 안 줄어들면 표를 밀어 **페이지에 가로 스크롤**을 만든다. ⚠️ 안 줄어드는 것이 든 칸이 트랙을 벌리는 것과 같은 축이다 — 폭이 아니라 줄바꿈으로 흡수한다. */
.sdx-preset-node-act { text-align:right !important; }
.sdx-preset-node-act .svndex-state { display:inline-block; max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; line-height:1.45; }
.btn-preset-apply { display:inline-flex; align-items:center; gap:4px; padding:.34rem .72rem; font-size:.8rem; font-weight:600; color:#fff; background:var(--svx-primary); border:none; border-radius:6px; cursor:pointer; transition:background .15s; }
.btn-preset-apply:hover { background:var(--svx-primary-d); }
.sdx-preset-done { display:inline-flex; align-items:center; gap:4px; font-size:.8rem; color:var(--svx-success); }
.sdx-preset-info { font-size:.78rem; color:#9aa0aa; }
.sdx-preset-save-card { border:1px solid var(--svx-primary); }
.sdx-preset-save-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.sdx-preset-save-row strong > i { color:var(--svx-primary); }
.sdx-m-6-0-0-mute { margin:.4rem 0 0; color:var(--svx-mute); font-size:.82rem; }
.sdx-ml-8 { margin-left:.5rem; }
@media (max-width:640px) { .sdx-preset-node-label { white-space:normal; } }
/* ── 배포 개방도 3단계 선택 ── */
.sdx-tier-select { display:flex; flex-direction:column; gap:.55rem; margin-top:1rem; }
.sdx-tier-opt { display:flex; align-items:flex-start; gap:.6rem; padding:.7rem .85rem; border:1px solid var(--svx-line); border-radius:8px; cursor:pointer; transition:border-color .15s, background .15s; }
.sdx-tier-opt:hover { border-color:var(--svx-primary); }
.sdx-tier-opt.is-active { border-color:var(--svx-primary); background:#faf7ff; }
.sdx-tier-opt input[type=radio] { margin-top:.2rem; accent-color:var(--svx-primary); }
.sdx-tier-opt-body { display:flex; flex-direction:column; gap:.15rem; }
.sdx-tier-opt-body strong { font-size:.92rem; color:var(--svx-ink); }
.sdx-tier-opt-body small { font-size:.8rem; color:var(--svx-mute); line-height:1.5; }
.sdx-tier-default { display:inline-block; margin-left:.35rem; padding:.05rem .4rem; font-size:.68rem; font-weight:700; color:#fff; background:var(--svx-primary); border-radius:4px; vertical-align:middle; }
/* ── 현황 체크 트리 ── */
.sdx-preset-chk { text-align:center !important; }
.sdx-chk-on { color:var(--svx-success); font-size:1.1rem; }
.sdx-chk-off { color:#b6bcc6; font-size:1.05rem; }
.sdx-preset-node.is-hidden-tier .sdx-preset-node-label { color:#9aa0aa; }
.sdx-preset-cat { display:inline-block; margin-left:.4rem; padding:.05rem .4rem; font-size:.68rem; font-weight:600; border-radius:4px; vertical-align:middle; }
.sdx-cat-core { color:#166534; background:#dcfce7; }
.sdx-cat-basic { color:#3730a3; background:#e0e7ff; }
.sdx-cat-advanced { color:#92400e; background:#fef3c7; }
.sdx-cat-super { color:#475569; background:#e2e8f0; }
.sdx-preset-blur { font-size:.8rem; color:#9aa0aa; }
.sdx-text-ok { color:var(--svx-success); }
.sdx-text-mute { color:var(--svx-mute); }
/* ── 콘텐츠·서비스 입력 프리셋 목록 ── */
.sdx-content-preset-list { margin:.9rem 0 0; padding:0; list-style:none; }
.sdx-content-preset-list li { padding:.5rem .2rem; border-bottom:1px solid var(--svx-line); font-size:.86rem; color:var(--svx-mute); }
.sdx-content-preset-list li:last-child { border-bottom:none; }
.sdx-content-preset-list li strong { display:inline-block; min-width:76px; color:var(--svx-ink); }
.bt-th-handle, .bt-handle { width:28px; text-align:center; cursor:grab; color:#475569; font-size:1.05rem; }
.bt-handle:hover { color:#1e293b; }
.bt-handle:active { cursor:grabbing; }
/* 드래그 전용 순서변경의 키보드 대체수단(WCAG 2.1.1) — 핸들 아이콘 아래 위/아래 버튼 */
.bt-handle { display:flex; flex-direction:column; align-items:center; gap:.1rem; cursor:default; }
.bt-handle .ph-dots-six-vertical { cursor:grab; }
.bt-move-up, .bt-move-down { display:inline-flex; align-items:center; justify-content:center; width:18px; height:14px; padding:0; border:1px solid transparent; border-radius:3px; background:transparent; color:#94a3b8; font-size:.7rem; cursor:pointer; }
.bt-move-up:hover, .bt-move-down:hover { color:var(--svx-primary); border-color:var(--svx-line); background:#f5f3ff; }
/* §2026-09-25 — 18×14px 화살표는 손가락으로 누르기 어려웠다 → 손가락·태블릿 폭에서만 누르는 칸을 키운다(PC 마우스 화면은 그대로). */
@media (pointer: coarse), (max-width: 1024px) { .bt-move-up, .bt-move-down { width:28px; height:22px; font-size:.85rem; color:#64748b; } }
body[data-theme="dark"] .bt-move-up:hover, body[data-theme="dark"] .bt-move-down:hover { background:rgba(167,139,250,.12); }
/* 홈(시스템 고정) 행 핸들 — 드래그 불가, 핀 표시 */
.bt-handle-fixed { cursor:default; color:var(--svx-primary); }
.bt-handle-fixed:hover { color:var(--svx-primary); }
body[data-theme="dark"] .bt-th-handle, body[data-theme="dark"] .bt-handle { color:#94a3b8; }
body[data-theme="dark"] .bt-handle:hover { color:#cbd5e1; }
.bt-cell-code { width:200px; }
/* §2026-10-13 게시판 설정 — «자. 비밀글 · 목록 제목 가림» 비밀글 제목 가림(끄면 경고) */
.bt-secret-title-warn { display: none; margin-left: 6px; color: #b45309; font-size: .78rem; font-weight: 600; }
.bt-secret-title:has(input:not(:checked)) .bt-secret-title-warn { display: inline; }
.bt-secret-title-warn .ph { vertical-align: -2px; }
body[data-theme="dark"] .bt-secret-title-warn { color: #fbbf24; }
.bt-cell-code .bt-code-wrap { display:flex; align-items:center; gap:.3rem; position:relative; }
.bt-cell-code input { width:140px; padding:.3rem .5rem; border:1px solid var(--svx-line); border-radius:4px; font-family:monospace; font-size:.85rem; }
.bt-code-locked .bt-code-input[readonly] { background:var(--svx-bg-alt,#f5f5f7); color:var(--svx-mute); cursor:not-allowed; }
.bt-home-ico { cursor:default; color:var(--svx-primary); }
.bt-info { color:var(--svx-mute); cursor:help; font-size:1rem; }
.bt-info:hover, .bt-info:focus { color:#7c3aed; }
/* 등록됐지만 실제로 404 인 페이지 경로 경고 (page-table). 회색 info 와 구별되도록 경고색 고정. */
.bt-info.bt-path-missing { color:#dc2626; }
.bt-info.bt-path-missing:hover, .bt-info.bt-path-missing:focus { color:#b91c1c; }
.bt-info.bt-name-dup { color:#dc2626; margin-left:.25rem; }
.bt-info.bt-name-dup:hover, .bt-info.bt-name-dup:focus { color:#b91c1c; }
.bt-cell-title { position:relative; }
.bt-info[data-tip]:hover::after, .bt-info[data-tip]:focus::after { content:attr(data-tip); position:absolute; left:100%; top:-.3rem; margin-left:.5rem; background:#222; color:#fff; padding:.5rem .7rem; border-radius:4px; font-size:.75rem; line-height:1.4; width:300px; z-index:10; white-space:normal; font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif; }
.bt-cell-title input { width:100%; padding:.3rem .5rem; border:1px solid var(--svx-line); border-radius:4px; font-size:.85rem; }
.bt-cell-perm select, .bt-cell-status select { padding:.25rem; border:1px solid var(--svx-line); border-radius:4px; font-size:.85rem; }
.bt-cell-status select { width:80px; }
.bt-cell-open { text-align:center; width:48px; }
/* ── 컬럼 폭 배분 — 코드/타이틀 넓게, 권한/펼침/상태/이동 좁게 ── */
/* board-table (post/dev) = 11 컬럼: 핸들 / 코드 / 타이틀 / 목록 / 읽기 / 쓰기 / SEO / AI / 속성 / 상태 / 이동 */
/* board-table (post/dev) — 11 컬럼 — 핸들/코드/타이틀/목록/읽기/쓰기/SEO/AI/속성/상태/이동 */
.bt-card[data-board-type="post"] .bt-table, .bt-card[data-board-type="dev"] .bt-table { table-layout:fixed; }
.bt-card[data-board-type="post"] .bt-table th:nth-child(1), .bt-card[data-board-type="dev"] .bt-table th:nth-child(1) { width:32px; }
.bt-card[data-board-type="post"] .bt-table th:nth-child(2), .bt-card[data-board-type="dev"] .bt-table th:nth-child(2) { width:180px; }
/* §2026-09-25 — 타이틀 칸은 폭을 정하지 않는다(= 남는 폭). 종전엔 11칸을 모두 고정해 합이 1,242px 라 1440px 화면(칸 1,131px)에서도 「상태」「이동」 열이 가로 스크롤 뒤로 숨었다. 표 최소 폭 1,100px 로 타이틀 칸이 너무 좁아지는 것은 막는다(그보다 좁으면 가로 스크롤). */
.bt-card[data-board-type="post"] .bt-table, .bt-card[data-board-type="dev"] .bt-table { min-width:1100px; }
.bt-card[data-board-type="post"] .bt-table th:nth-child(4), .bt-card[data-board-type="dev"] .bt-table th:nth-child(4), .bt-card[data-board-type="post"] .bt-table th:nth-child(5), .bt-card[data-board-type="dev"] .bt-table th:nth-child(5), .bt-card[data-board-type="post"] .bt-table th:nth-child(6), .bt-card[data-board-type="dev"] .bt-table th:nth-child(6) { width:92px; }
.bt-card[data-board-type="post"] .bt-table th:nth-child(7), .bt-card[data-board-type="dev"] .bt-table th:nth-child(7), .bt-card[data-board-type="post"] .bt-table th:nth-child(8), .bt-card[data-board-type="dev"] .bt-table th:nth-child(8), .bt-card[data-board-type="post"] .bt-table th:nth-child(9), .bt-card[data-board-type="dev"] .bt-table th:nth-child(9) { width:84px; }
.bt-card[data-board-type="post"] .bt-table th:nth-child(10), .bt-card[data-board-type="dev"] .bt-table th:nth-child(10) { width:110px; }
.bt-card[data-board-type="post"] .bt-table th:nth-child(11), .bt-card[data-board-type="dev"] .bt-table th:nth-child(11) { width:72px; }
/* page-table — 7 컬럼 — 핸들/path/타이틀/SEO/AI/상태/이동 */
.bt-card[data-board-type="page"] .bt-table { table-layout:fixed; }
.bt-card[data-board-type="page"] .bt-table th:nth-child(1) { width:32px; }
.bt-card[data-board-type="page"] .bt-table th:nth-child(2) { width:280px; }
.bt-card[data-board-type="page"] .bt-table th:nth-child(3) { width:360px; }
.bt-card[data-board-type="page"] .bt-table th:nth-child(4), .bt-card[data-board-type="page"] .bt-table th:nth-child(5) { width:96px; }
.bt-card[data-board-type="page"] .bt-table th:nth-child(6) { width:130px; }
.bt-card[data-board-type="page"] .bt-table th:nth-child(7) { width:72px; }
/* 모바일/태블릿 — 다컬럼 테이블은 압착 대신 가로 스크롤(.sdx-overflow-x 래퍼). 데스크탑(>1024px)은 무영향. */
@media (max-width: 1024px) { .bt-card[data-board-type="post"] .sdx-overflow-x > .bt-table, .bt-card[data-board-type="dev"] .sdx-overflow-x > .bt-table { min-width: 1180px; } .bt-card[data-board-type="page"] .sdx-overflow-x > .bt-table { min-width: 1000px; } }
/* td 도 같은 폭 (table-layout:fixed 면 thead 가 결정하지만 안전상 명시) */
.bt-card .bt-table .bt-cell-code input { width:100%; box-sizing:border-box; }
.bt-card .bt-table .bt-cell-title input { width:100%; box-sizing:border-box; }
.bt-cell-perm select, .bt-cell-status select { width:100%; box-sizing:border-box; }
.bt-cell-toggle { text-align:center; }
.bt-cell-toggle .bt-toggle { width:auto; padding:.3rem .6rem; }
.bt-open-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--svx-line); border-radius:6px; background:#fff; color:var(--svx-mute); text-decoration:none; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.bt-open-btn:hover { border-color:var(--svx-primary); background:#f5f3ff; color:var(--svx-primary); }
.bt-open-btn i { font-size:1rem; }
.bt-open-btn.is-disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.bt-toggle { background:var(--svx-bg-alt); border:1px solid var(--svx-line); padding:.3rem .6rem; border-radius:4px; cursor:pointer; font-size:.75rem; }
.bt-toggle[aria-expanded="true"] { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.bt-row-template, .bt-expand[hidden] { display:none; }
.bt-row-pending-delete td { background:#fff5f5; opacity:.6; }
.bt-row-pending-delete .bt-cell-code input { text-decoration:line-through; }
.bt-row-new td { background:#f0fbf3; }
.bt-row-changed td { background:#fff8e1; }
/* ═══ 게시판 펼침 영역 ([SEO] / [AI] / [설정]) ═══ */
.bt-expand .bt-expand-inner { padding:14px 18px 16px; background:linear-gradient(180deg, #faf8ff 0%, #f3f0ff 100%); border-left:3px solid var(--svx-primary); margin:.3rem 0 .5rem; border-radius:0 8px 8px 0; box-shadow:0 1px 3px rgba(91,33,182,.05); text-align:left; }
.bt-expand h4 { margin:0 0 2px; font-size:.98rem; font-weight:700; color:#5b21b6; letter-spacing:-.01em; display:flex; align-items:center; gap:7px; }
.bt-expand h4::before { content:""; width:3px; height:14px; background:var(--svx-primary); border-radius:2px; }
.bt-expand h5 { margin:12px 0 6px; font-size:.88rem; font-weight:600; color:#1a1a1a; letter-spacing:-.01em; }
.bt-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 16px; margin-top:10px; }
.bt-grid-full { grid-column:span 2; }
/* EEAT 블록 — 종전엔 매핑·검수자가 각각 한 줄을 통째로 먹어 우측이 비었다. 반칸 2열로 접었다. 날짜 칸은 EEAT 「일괄 검수일」로 옮겨 여기서는 뺐다. */
.bt-eeat-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px; }
.bt-eeat-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:var(--svx-primary); color:#fff; border-radius:6px; font-size:.83rem; font-weight:600; text-decoration:none; }
.bt-eeat-btn:hover { background:var(--svx-primary-d); color:#fff; }
.bt-eeat-actions .bt-hint-inline { margin:0; }
.bt-grid label, .bt-cfg-section > label { display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:.83rem; font-weight:600; color:#374151; }
.bt-grid label.is-disabled { opacity:.45; pointer-events:none; }
/* 콘텐츠 유형 — 고른 값이 무엇을 만드는지 한 줄 안내 */
.bt-ct-hint { color:#5b21b6 !important; font-weight:500; }
/* 라벨 + (선택) 한 줄 — 라벨이 flex column 이라 <small> 이 줄바꿈되어 좌우 높이가 어긋났다. */
.bt-grid label > .bt-l { display:block; }
.bt-grid label > .bt-l small { font-weight:400; color:var(--svx-mute); }
/* 설정 탭의 가로 정렬 체크박스 라벨 (= 비밀글 / 첨부 등) */
.bt-cfg-section label:not(:has(> select)):not(:has(> textarea)) { display:inline-flex; align-items:center; gap:7px; flex-direction:row; margin-right:1rem; flex-wrap:nowrap; font-weight:500; font-size:.83rem; color:#1a1a1a; }
.bt-cfg-section { padding:10px 0; border-top:1px dashed rgba(124,58,237,.18); }
.bt-cfg-section label.is-locked { opacity:.5; cursor:not-allowed; }
.bt-cfg-section label.is-locked input { cursor:not-allowed; }
/* §2026-10-11 U-37 상담 패널(«COUNSEL 적용» 아래 펼침) · «받을 항목» 줄 — 게시판 설정 «차. 비회원 입력 · 상담 접수» */
.bt-cfg-section .bt-counsel-panel { margin:8px 0 6px; padding:10px 12px; border-left:3px solid var(--svx-primary); border-radius:0 8px 8px 0; background:rgba(124,58,237,.04); }
.bt-cfg-section .bt-counsel-panel[hidden] { display:none; }
.bt-cfg-section .bt-intake { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 8px; }
.bt-cfg-section .bt-intake-label { font-size:.8rem; font-weight:600; color:var(--svx-mute); margin-right:2px; }
.bt-cfg-section .bt-intake-pw-hint { margin:-2px 0 8px; color:#b45309; font-weight:600; }
/* §2026-10-13 «차. 비회원 입력 · 상담 접수» 한 묶음 — 줄마다 왼쪽 이름표(받을 항목 · 필수 · 알림 · 개인정보) + 칸 · 긴 설명은 «도움말» 로 접는다 */
.bt-cfg-section .bt-cfg-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 8px; }
.bt-cfg-section .bt-cfg-line-label { flex:0 0 4.6rem; font-size:.8rem; font-weight:600; color:var(--svx-mute); }
.bt-cfg-section.bt-cfg-counsel > .bt-cfg-line, .bt-cfg-section.bt-cfg-counsel > .bt-cfg-help, .bt-cfg-section.bt-cfg-counsel > [data-bt-mail-hint] { padding-left:15px; }   /* 상담 패널(왼쪽 선 3 + 안쪽 12)과 줄 머리를 같은 세로선에 */
.bt-cfg-section .bt-counsel-panel .bt-cfg-line { margin-bottom:6px; }
.bt-cfg-section label[hidden] { display:none; }
.bt-cfg-section.bt-cfg-stack > label { display:flex; width:fit-content; max-width:100%; margin:0 0 6px; }   /* §2026-10-13 대표님 «항목 한 줄씩» — 비밀글 묶음 */
.bt-cfg-section.bt-cfg-stack > label:last-child { margin-bottom:0; }
.bt-cfg-section .bt-cfg-sep { height:0; border-top:1px solid rgba(124,58,237,.16); margin:8px 0 10px; }   /* «COUNSEL 적용» 아래 구분선 */
.bt-cfg-section .bt-cfg-guest.is-off > :not(.bt-cfg-line-label):not(.bt-cfg-off-note) { opacity:.45; }   /* 비회원 글쓰기 불가 게시판 — 흐리게(inert 로 잠김 · 값은 전송) */
.bt-cfg-section .bt-cfg-off-note { display:none; font-size:.76rem; font-weight:600; color:var(--svx-mute); }
.bt-cfg-section .bt-cfg-guest.is-off .bt-cfg-off-note { display:inline; }
.bt-cfg-section .bt-cfg-help { margin-top:4px; }
.bt-cfg-section .bt-cfg-help > summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer; width:max-content; padding:6px 14px; border:1px solid rgba(124,58,237,.35); border-radius:999px; background:#fff; color:var(--svx-primary); font-size:.8rem; font-weight:600; list-style:none; box-shadow:0 1px 2px rgba(91,33,182,.08); transition:background-color .15s ease, color .15s ease, border-color .15s ease; }   /* §2026-10-13 대표님 «도움말도 단추처럼 · 흰 바탕으로 눈에 띄게» */
.bt-cfg-section .bt-cfg-help > summary::-webkit-details-marker { display:none; }
.bt-cfg-section .bt-cfg-help > summary::after { content:''; width:6px; height:6px; margin-left:2px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .15s ease; }
.bt-cfg-section .bt-cfg-help[open] > summary::after { transform:translateY(1px) rotate(-135deg); }
.bt-cfg-section .bt-cfg-help > summary:hover, .bt-cfg-section .bt-cfg-help[open] > summary { background:var(--svx-primary); border-color:var(--svx-primary); color:#fff; }
.bt-cfg-section .bt-cfg-help > summary:focus-visible { outline:2px solid var(--svx-primary); outline-offset:2px; }
.bt-cfg-section .bt-cfg-help-body { margin-top:8px; padding:14px 16px; border:1px solid #e4e0f2; border-radius:10px; background:#fff; box-shadow:0 1px 3px rgba(91,33,182,.06); }
.bt-cfg-section .bt-cfg-help-body > .bt-hint { margin:10px 0 0; }
.bt-cfg-section .bt-cfg-help-block { margin-top:0; padding:10px 12px; border-radius:8px; background:rgba(124,58,237,.05); line-height:1.65; }   /* 답변 알림 메일 기준(도움말 맨 위) */
.bt-cfg-section .bt-cfg-help-block > strong { display:block; margin-bottom:4px; }
.bt-cfg-section .bt-cfg-help-block ul { margin:0; padding-left:1.1em; }
.bt-cfg-section .bt-cfg-help-block li { margin:2px 0; }
@media (max-width:640px) { .bt-cfg-section .bt-cfg-line-label { flex-basis:100%; } }
.bt-cfg-section .bt-intake-pw-hint[hidden] { display:none; }
.bt-cfg-section .bt-intake-pw-hint i { vertical-align:-2px; margin-right:3px; }
.bt-cfg-section:first-of-type { border-top:0; padding-top:4px; }
/* 유형선택 (가) — 라디오 단일선택 나열 */
.bt-layout-types { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:6px; }
.bt-layout-type { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:.9rem; color:var(--svx-ink); }
/* 댓글 / 공유 = "사용" 체크박스 + "권한" select 한 줄 정렬 */
.bt-cfg-row { display:flex; flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap; }
.bt-cfg-section .bt-inline-select { display:inline-flex !important; flex-direction:row !important; align-items:center; gap:8px; margin-right:0 !important; }
.bt-cfg-section .bt-inline-select > select { width:auto !important; min-width:90px !important; max-width:160px !important; }
.bt-overview { background:#fff; padding:10px 14px; border-radius:8px; margin-bottom:10px; font-size:.83rem; display:flex; gap:18px; align-items:center; flex-wrap:wrap; border:1px solid rgba(124,58,237,.16); box-shadow:0 1px 2px rgba(91,33,182,.04); }
.bt-overview code { background:#ede9fe; color:#5b21b6; padding:2px 8px; border-radius:4px; font-weight:600; font-family:ui-monospace,monospace; font-size:.8rem; }
.bt-overview strong { color:var(--svx-primary); font-weight:700; font-size:.9rem; }
/* 입력 컨트롤 — 컴팩트 모던 룩 */
.bt-grid input[type=text], .bt-grid input[type=number], .bt-grid input[type=url], .bt-grid textarea, .bt-grid select, .bt-cfg-section input[type=number], .bt-cfg-section select, .bt-cfg-section input[type=text] { padding:6px 10px; border:1px solid #d8dce5; border-radius:6px; font-size:.85rem; font-family:inherit; background:#fff; color:#1a1a1a; line-height:1.4; transition:border-color .15s ease, box-shadow .15s ease; }
/* SEO 2컬럼 grid 안 input = 셀 폭 채움 */
.bt-grid > label > input[type=text], .bt-grid > label > input[type=url], .bt-grid > label > textarea, .bt-grid > label > select { width:100%; box-sizing:border-box; }
/* AI / 설정 탭의 select / text = 자체 폭 (가로 무한확장 차단) */
.bt-cfg-section > label > select, .bt-cfg-section > label > input[type=text] { width:auto; min-width:200px; max-width:380px; box-sizing:border-box; }
.bt-cfg-section input[type=number] { width:5rem; }
.bt-grid input:hover, .bt-grid textarea:hover, .bt-grid select:hover, .bt-cfg-section input:hover, .bt-cfg-section select:hover { border-color:var(--svx-mute); }
.bt-grid input:focus, .bt-grid textarea:focus, .bt-grid select:focus, .bt-cfg-section input:focus, .bt-cfg-section select:focus { outline:0; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.13); background:#fefcff; }
.bt-grid textarea { line-height:1.5; min-height:48px; resize:vertical; }
/* [설정] 카. 작성 완료 전환 추적 — 업체 코드 칸(§2026-09-27). 설정 탭의 유일한 여러 줄 칸이라 폭을 채운다. */
.bt-cfg-section > label.bt-conv-code { width:100%; margin-top:8px; }
/* 특이도를 일부러 낮게(.bt-conv-code textarea) — 다크 공통 textarea 규칙이 이겨야 어두운 화면에서 흰 칸으로 남지 않는다. */
.bt-conv-code textarea { width:100%; box-sizing:border-box; min-height:92px; padding:8px 10px; border:1px solid #d8dce5; border-radius:6px; font-size:.8rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.5; background:#fff; color:#1a1a1a; resize:vertical; }
.bt-conv-code textarea:focus { outline:0; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.13); }
/* 작은 number input */
.bt-num-sm { width:4.5rem !important; padding:5px 9px !important; border:1px solid #d8dce5 !important; border-radius:5px !important; font-size:.82rem; }
/* 체크박스 */
.bt-cfg-section input[type=checkbox] { width:16px; height:16px; accent-color:var(--svx-primary); cursor:pointer; flex-shrink:0; }
/* 힌트 텍스트 */
.bt-hint { color:#6b7280; font-size:.78rem; margin:5px 0 8px; line-height:1.55; }
.bt-hint-bottom { margin-top:12px; padding-top:10px; border-top:1px dashed rgba(124,58,237,.18); }
.bt-hint-inline { color:#6b7280; font-size:.72rem; line-height:1.4; margin-top:2px; font-weight:400; }
/* EEAT 매핑 read-only 카드 */
.bt-eeat-readonly { padding:9px 13px; background:#fff; border:1px solid #c4b5fd; border-radius:6px; color:#5b21b6; font-size:.86rem; line-height:1.55; font-weight:600; box-shadow:0 1px 2px rgba(91,33,182,.04); }
.bt-eeat-readonly small { color:var(--svx-mute); font-weight:400; margin-left:4px; font-size:.78rem; }
.bt-eeat-readonly strong { color:#1a1a1a; font-weight:700; }
.bt-eeat-link { color:var(--svx-primary); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.bt-eeat-link:hover { color:var(--svx-primary-d); text-decoration-thickness:2px; }
/* [분류] 카테고리 설정 — 칩바 (board-table [설정] 안). faq-cat 칩 시각언어 계승 */
.bt-cfg-cat .bt-cat-wrap { margin:2px 0; }
.bt-cat-empty { color:var(--svx-mute); font-size:.82rem; margin:2px 0 10px; }
.bt-cat-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.bt-cat-chip { display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 6px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:99px; }
.bt-cat-chip.is-off { opacity:.55; }
.bt-cat-drag { color:var(--svx-mute); cursor:grab; font-size:.9rem; flex-shrink:0; }
.bt-cat-chip .bt-cat-name { width:104px; min-width:60px !important; max-width:160px; border:0 !important; background:transparent !important; box-shadow:none !important; color:var(--svx-ink); font-size:.83rem; font-family:inherit; padding:2px 4px !important; }
.bt-cat-chip .bt-cat-name:focus { outline:none !important; background:rgba(124,58,237,.08) !important; border-radius:4px; box-shadow:none !important; }
.bt-cat-vis, .bt-cat-del { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:0; border-radius:50%; background:transparent; cursor:pointer; font-size:.85rem; line-height:1; color:var(--svx-mute); flex-shrink:0; }
.bt-cat-vis:hover { color:var(--svx-primary); background:rgba(124,58,237,.12); }
.bt-cat-del:hover { color:#c0392b; background:rgba(192,57,43,.12); }
.bt-cat-chip.is-off .bt-cat-vis { color:#b45309; }
.bt-cat-add { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bt-cfg-cat .bt-cat-add-input { min-width:160px !important; max-width:220px; }
.bt-cat-add-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:1px solid var(--svx-primary); border-radius:6px; background:var(--svx-card); color:var(--svx-primary); font-size:.82rem; font-weight:600; font-family:inherit; cursor:pointer; white-space:nowrap; }
.bt-cat-add-btn:hover { background:rgba(124,58,237,.08); }
/* ── 회원 — 3탭(관리자 / 일반회원 / 권한 매트릭스) + 표 + 액션 팝오버 ── */
/* 세그먼트(필) 탭 — 연보라 트랙 위에 활성 탭이 흰 카드로 떠오름 */
.svndex-tabs { display:inline-flex; flex-wrap:wrap; gap:3px; margin:0 0 20px; padding:5px; background:#ebe7f6; border:1px solid #e0d9f1; border-radius:13px; }
.svndex-tab { display:inline-flex; align-items:baseline; gap:5px; padding:8px 17px; color:#6b6585; text-decoration:none; font-weight:600; font-size:.9rem; border-radius:9px; transition:color .14s ease, background .14s ease, box-shadow .14s ease; }
.svndex-tab:hover { color:var(--svx-primary-d); background:rgba(255,255,255,.55); }
.svndex-tab.is-active { color:var(--svx-primary); background:#fff; box-shadow:0 1px 2px rgba(91,33,182,.08), 0 3px 8px rgba(91,33,182,.12); }
.svndex-tab.is-active:hover { background:#fff; }
.svndex-tab small { color:#625a85; font-weight:500; font-size:.76rem; }
.svndex-tab.is-active small { color:var(--svx-primary); opacity:.62; }
/* §2026-09-25 — 설정 탭(6개)은 1024 에서 PRESET 하나만 둘째 줄, 폰에서는 2·2·1·1 로 들쭉날쭉했다 → 같은 폭 칸(3+3 · 폰 2+2+2). 탭 수가 다른 곳(회원)은 그대로. */
@media (max-width:1280px) { .svndex-tabs:has(> :nth-child(6):last-child) { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); } .svndex-tabs:has(> :nth-child(6):last-child) > .svndex-tab { justify-content:center; flex-wrap:wrap; text-align:center; } }
@media (max-width:560px) { .svndex-tabs:has(> :nth-child(6):last-child) { grid-template-columns:repeat(2, minmax(0, 1fr)); } .svndex-tabs:has(> :nth-child(6):last-child) > .svndex-tab { padding:8px 6px; } }
body[data-theme="dark"] .svndex-tabs { background:rgba(124,58,237,.10); border-color:rgba(124,58,237,.28); }
body[data-theme="dark"] .svndex-tab { color:var(--svx-d-mute); }
body[data-theme="dark"] .svndex-tab.is-active { color:#ddd6fe; background:var(--svx-d-card); box-shadow:0 2px 6px rgba(0,0,0,.45); }
body[data-theme="dark"] .svndex-tab.is-active small { color:#c4b5fd; }
.svndex-mtbl { width:100%; border-collapse:collapse; font-size:.9375rem; }
.svndex-mtbl thead tr { background:var(--svx-bg-alt); }
.svndex-mtbl th { padding:10px 12px; text-align:left; font-weight:600; color:var(--svx-ink); border-bottom:1px solid var(--svx-line); vertical-align:middle; }
.svndex-mtbl th.num { text-align:center; }
.svndex-mtbl td { padding:10px 12px; border-bottom:1px solid var(--svx-line); vertical-align:middle; }
.svndex-mtbl td.num { text-align:center; }
.svndex-mtbl td.actions { white-space:nowrap; }
.svndex-mtbl td .meta { color:var(--svx-mute); font-size:.8125rem; margin-top:2px; }
/* 회원관리 3탭 — 한 항목이라도 줄바꿈되면 압착 대신 가로스크롤로 통일한다(칸이 늘 때마다 개별 대응하지 않는다). 관리 버튼 열만 sticky 로 우측 고정해 스크롤해도 항상 닿는다 */
/* ⚠ border-collapse:collapse 에서는 대부분 브라우저가 td/th 의 position:sticky 를 무시한다 — sticky 가 실제로 붙게 하려면 separate 로 바꿔야 한다(테두리는 border-bottom 뿐이라 이중선이 안 생긴다) */
.svndex-mtbl-nowrap { border-collapse:separate; border-spacing:0; }
.svndex-mtbl-nowrap th, .svndex-mtbl-nowrap td { white-space:nowrap; }
/* 특이도를 일부러 한 단계 올린다 — 아래쪽의 `.svndex-mtbl td.actions { position:relative }` 와 특이도가 같아 소스 순서로 그쪽이 이기면 sticky 가 무효가 된다(헤더는 멀쩡하고 바디만 스크롤을 따라가 더 헷갈린다). 순서에 기대지 않도록 특이도로 확실히 이기게 둔다. */
table.svndex-mtbl-nowrap th.no-sort, table.svndex-mtbl-nowrap td.actions { position:sticky; right:0; z-index:2; box-shadow:-6px 0 6px -6px rgba(0,0,0,.2); }
/* §2026-10-03 V-4 — 고정 칸은 줄마다 같은 층(z-index 2)이라 아래 줄의 고정 칸이 위 줄에서 펼친 «관리» 메뉴를 덮었다. 메뉴가 열린 칸만 한 층 올린다. */
table.svndex-mtbl-nowrap td.actions:has(> details.svndex-act-menu[open]) { z-index:5; }
.svndex-mtbl-nowrap thead th.no-sort { background:var(--svx-bg-alt); }
.svndex-mtbl-nowrap tbody td.actions { background:var(--svx-card); }
.svndex-mtbl-inactive { color:var(--svx-mute); font-size:.8125rem; }
/* §2026-09-25 — 기울임+투명도 .55 는 흰 바탕과 거의 구분되지 않았다(대비 약 2:1) → 흐린 회색만 */
/* 회원/매트릭스 테이블 카드 — overflow X (드롭다운 absolute 가 카드 밖으로 빠지도록) */
.svndex-admin-card:has(> .svndex-mtbl) { overflow:visible; }
.svndex-mtbl { word-break:keep-all; }
.svndex-mtbl td.actions { position:relative; }
.svndex-mtbl td .svndex-name { color:var(--svx-ink); }
.svndex-mtbl td .svndex-nick { color:var(--svx-mute); margin-left:6px; font-size:.9375rem; }
.svndex-mtbl td.num .svndex-lvl-badge { vertical-align:middle; }
.svndex-mtbl tr:last-child td { border-bottom:0; }
/* 컬럼 정렬 — thead th 클릭 가능 + 화살표 표시 */
.svndex-mtbl thead th { cursor:pointer; user-select:none; transition:color .12s ease; padding-right:18px; position:relative; }
.svndex-mtbl thead th::after { content:""; position:absolute; right:6px; top:50%; transform:translateY(-50%); border:4px solid transparent; border-top-color:var(--svx-mute); opacity:0; transition:opacity .12s ease, transform .12s ease; }
.svndex-mtbl thead th:hover { color:var(--svx-primary); }
.svndex-mtbl thead th:hover::after { opacity:.4; }
.svndex-mtbl thead th.is-sorted-asc, .svndex-mtbl thead th.is-sorted-desc { color:var(--svx-primary); }
.svndex-mtbl thead th.is-sorted-asc::after { opacity:1; border-top-color:var(--svx-primary); transform:translateY(-50%) rotate(180deg); margin-top:-1px; }
.svndex-mtbl thead th.is-sorted-desc::after { opacity:1; border-top-color:var(--svx-primary); }
.svndex-mtbl thead th.no-sort { cursor:default; padding-right:12px; }
.svndex-mtbl thead th.no-sort:hover { color:inherit; }
.svndex-mtbl thead th.no-sort::after { display:none; }
/* ⚠ margin-bottom 을 주지 말 것 — inline-block 이라 표 셀 안에서 뱃지가 위로 밀린다 (회원관리에서 실제로 어긋났다). 가로 간격만 준다. */
.svndex-state { display:inline-block; margin-right:6px; padding:3px 10px; border-radius:99px; font-size:.8125rem; font-weight:500; white-space:nowrap; }
.svndex-state.is-ok { background:var(--svx-success-bg); color:var(--svx-success-tx); }
.svndex-state.is-warn { background:var(--svx-warn-bg); color:var(--svx-warn-tx); border:1px solid var(--svx-warn-line); }
.svndex-state.is-mute { background:#e5e7eb; color:#374151; }
.svndex-state.is-bad { background:var(--svx-error-bg); color:var(--svx-error-tx); }
/* 액션 메뉴 (details/summary 팝오버) */
.svndex-act-menu { position:relative; display:inline-block; }
.svndex-act-menu summary { list-style:none; cursor:pointer; padding:6px 12px; background:var(--svx-card); color:var(--svx-ink); border:1px solid var(--svx-line); border-radius:6px; font-size:.875rem; font-weight:500; transition:border-color .15s ease, color .15s ease; }
.svndex-act-menu summary::-webkit-details-marker { display:none; }
.svndex-act-menu summary:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.svndex-act-menu[open] summary { background:var(--svx-bg-alt); border-color:var(--svx-primary); color:var(--svx-primary); }
.svndex-act-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:280px; padding:12px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.12); display:flex; flex-direction:column; gap:10px; }
.svndex-act-pop form { margin:0; padding:8px 0; border-bottom:1px solid var(--svx-line); display:flex; flex-direction:column; gap:6px; }
.svndex-act-pop form:last-child { border-bottom:0; padding-bottom:0; }
.svndex-act-pop label { display:flex; align-items:center; gap:6px; font-size:.875rem; color:var(--svx-ink); cursor:pointer; }
.svndex-act-pop .svndex-sel { padding:6px 10px; border:1px solid var(--svx-line); border-radius:6px; font-size:.875rem; font-family:inherit; }
.svndex-act-pop .sm-btn { padding:8px 14px; font-size:.875rem; }
.svndex-act-pop .sm-btn.is-danger { background:var(--svx-card); color:var(--svx-error-tx); border:1px solid var(--svx-error-bg); }
.svndex-act-pop .sm-btn.is-danger:hover { background:var(--svx-error); color:#fff; border-color:var(--svx-error); }
.svndex-act-pop .sm-btn.is-secondary { background:var(--svx-card); color:var(--svx-ink); border:1px solid var(--svx-line); }
.svndex-act-pop .sm-btn.is-secondary:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
/* 검색·필터 폼 */
.svndex-filter { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:14px 16px; background:var(--svx-card); border-radius:8px; box-shadow:var(--svx-card-shadow); }
.svndex-filter input[type=text], .svndex-filter select { padding:8px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:.9375rem; font-family:inherit; }
.svndex-filter input[type=text] { flex:1; min-width:240px; }
.svndex-filter-daterange { display:inline-flex; align-items:center; gap:6px; }
.svndex-filter-daterange input[type=date] { padding:7px 10px; border:1px solid var(--svx-line); border-radius:6px; font-size:.875rem; font-family:inherit; }
/* 권한 매트릭스 */
.svndex-matrix-pick { display:flex; align-items:center; gap:12px; }
.svndex-matrix-pick label { font-weight:600; color:var(--svx-ink); }
.svndex-matrix-pick select { flex:1; padding:8px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:1rem; font-family:inherit; }
.svndex-matrix-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:3px 22px; }
/* 배포 프리셋 «전 권한 열람 현황» — 권한 매트릭스와 같은 2컬럼 목록을 재사용하고, 목록이 길어 이 화면에서만 세로 스크롤을 준다. 가로 스크롤은 만들지 않는다 — 긴 설명은 줄바꿈으로 흡수한다. */
.sdx-preset-scroll { max-height:min(62vh, 720px); overflow-y:auto; overscroll-behavior:contain; padding-right:6px; border:1px solid var(--svx-line); border-radius:10px; }
.sdx-preset-cat-card { border:0; border-bottom:1px solid var(--svx-line); border-radius:0; box-shadow:none; padding:12px 14px; }
.sdx-preset-cat-card:last-child { border-bottom:0; }
.sdx-preset-key { display:flex; align-items:flex-start; gap:7px; padding:2px 0; font-size:.82rem; line-height:1.5; min-width:0; }
.sdx-preset-key > i { flex-shrink:0; margin-top:2px; font-size:.95rem; }
.sdx-preset-key code { flex-shrink:0; }
.sdx-preset-key .desc { min-width:0; overflow-wrap:anywhere; }
.sdx-preset-key.is-off { color:var(--svx-mute); }
.sdx-preset-key.is-off code { opacity:.55; }
.sdx-preset-why { flex-shrink:0; margin-left:auto; font-size:.7rem; color:var(--svx-mute); white-space:nowrap; }
.sdx-chk-on { color:var(--svx-success,#16a34a); }
.sdx-chk-off { color:var(--svx-mute); }
/* 1100px 이하 = 한 줄 — 861~1280px 에서 섹션 블러 항목(설명 안 «schema.medical_org_detect» 같은 끊을 곳 없는 식별자)이 칸을 522px 아래로 못 줄여
   본문이 옆으로 밀렸다(§2026-10-01 자가검증 실측 · 860 은 D-6 때 경계). 설명은 긴 식별자도 끊어 1101px 이상 두 줄 배치에서도 칸 안에 든다. */
@media (max-width:1100px) { .svndex-matrix-list { grid-template-columns:minmax(0, 1fr); } }
.svndex-matrix-list li { padding:0; }
.svndex-matrix-list label { display:flex; align-items:center; gap:11px; cursor:pointer; font-size:1rem; padding:9px 11px; border-radius:7px; transition:background .15s ease; }
.svndex-matrix-list label:hover { background:var(--svx-bg-alt); }
/* 전역 커스텀 체크박스(L1281~) 위에 매트릭스만 크기·테두리 강화 (미체크가 흐릿해 보이는 문제) */
.svndex-matrix-list input[type=checkbox] { width:19px; height:19px; flex-shrink:0; margin:0; border-width:1px; border-color:#64748b; }
.svndex-matrix-list input[type=checkbox]:checked::after { left:5px; top:1px; }
body[data-theme="dark"] .svndex-matrix-list input[type=checkbox] { border-color:#94a3b8; }
.svndex-matrix-list label code { font-size:.82rem; color:var(--svx-primary); font-family:var(--svx-font-mono); flex-shrink:0; }
.svndex-matrix-list label .desc { color:var(--svx-ink); font-weight:500; flex:1; min-width:0; overflow-wrap:anywhere; }
.svndex-tag { display:inline-block; padding:2px 8px; border-radius:99px; font-size:.75rem; font-weight:600; flex-shrink:0; }
.svndex-tag.is-super-only { background:#fde68a; color:#7c2d12; border:1px solid #f59e0b; }
/* S 전용(super_only) = 위임 불가 — 체크칸 비활성 + 금색 «S 전용 · 위임 불가» 배지(§NB6). «민감»(개인정보 원문·원래 IP·로그인 연결)은 아래 is-sensitive */
/* 섹션 블러 토글 항목 — 멤버별 부여 대상 아님 (카드 뱃지에서 레벨별 관리). 체크박스 대신 자물쇠 */
.svndex-tag.is-toggle { background:#ede9fe; color:#5b21b6; border:1px solid #a78bfa; }
.svndex-matrix-list label.is-toggle-item { cursor:default; }
.svndex-matrix-list label.is-toggle-item:hover { background:transparent; }
.svndex-matrix-list label.is-toggle-item code, .svndex-matrix-list label.is-toggle-item .desc { color:var(--svx-mute); }
.svndex-matrix-lock { font-size:18px; line-height:1; color:#c4b5d8; flex-shrink:0; width:19px; text-align:center; }
/* 폰(480px 이하) — 한 항목 = 첫 줄 «체크 · 키 · 배지» + 둘째 줄 설명. 종전엔 키(줄어들지 않음)와 배지가 한 줄을 다퉈 320px 에서 배지가 화면 밖으로 밀렸다.
   대상 관리자 고르기도 이름표를 위로 올린다(긴 이름이 든 선택칸이 넘쳤다) · §2026-10-01 자가검증 */
@media (max-width:480px) {
  .svndex-matrix-list label { flex-wrap:wrap; row-gap:2px; }
  .svndex-matrix-list label code { flex-shrink:1; min-width:0; overflow-wrap:anywhere; }
  .svndex-matrix-list label .desc { flex:1 1 100%; order:3; }
  .svndex-matrix-pick { flex-wrap:wrap; gap:6px 12px; }
  .svndex-matrix-pick select { min-width:0; max-width:100%; }
}
body[data-theme="dark"] .svndex-tag.is-toggle { background:rgba(124,58,237,.22); color:#c4b5fd; border-color:rgba(124,58,237,.5); }
/* 민감 권한 배지 — 일괄 체크(전체 체크 · 모두 체크)에서 빠지는 칸(§2026-10-01 · permission-matrix.js 의 data-sensitive) */
.svndex-tag.is-sensitive { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
body[data-theme="dark"] .svndex-tag.is-sensitive { background:rgba(220,38,38,.18); color:#fca5a5; border-color:rgba(220,38,38,.45); }
/* ── 인증 화면 공통 폼 — 로그인 · 회원가입 · 아이디찾기 · 비밀번호찾기 ── */
/* 타이포를 «명시» 로 못박는다 — 안 적으면 사이트 CSS(이 파일 «뒤» 에 로드된다)의 body 값이 상속으로 흘러들어 같은 로그인 카드가 사이트마다 다른 높이가 된다. ⚠️ 이건 «커스터마이징» 이 아니라 «누수» 였다 — .svndex-auth-* 를 실제로 덮어쓴 사이트는 0곳이다. ⚠️ 브랜드 «색» 상속은 의도다 — 여기서 고정하는 것은 타이포뿐이다. */
body:has(.svndex-auth-shell) { margin:0; font-family:var(--svx-font-sans); font-size:16px; letter-spacing:normal; background:var(--svx-bg-alt); color:var(--svx-ink); -webkit-font-smoothing:antialiased; }
.svndex-auth-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.svndex-auth-form { position:relative; width:100%; max-width:400px; background:var(--svx-card); padding:40px 32px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06); }
/* position = 우측 상단 «홈으로» 아이콘 버튼의 기준점 (U-3) */
.svndex-auth-form h1 { margin:0 0 24px; font-size:1.5rem; text-align:center; color:var(--svx-ink); font-weight:700; letter-spacing:-.02em; }
/* §2026-09-25 한국어는 낱말 단위로 줄을 바꾼다(관리자 본문 §12-99 와 같은 규칙) — 종전엔 «답해주세/요», «이용약관 동/의» 처럼 낱말 중간에서 끊겼다. break-word 는 넘칠 때만 끊으므로 긴 이메일·주소도 칸 밖으로 나가지 않는다. */
.svndex-auth-form, .svndex-mypage-export-page { word-break:keep-all; overflow-wrap:break-word; }
.svndex-auth-form .row { margin-bottom:16px; }
.svndex-auth-form label { display:block; margin-bottom:6px; font-size:1rem; color:#555; }
/* fieldset/legend 그룹(휴대전화·주소) — label 과 동일 시각, 브라우저 기본 border/padding/min-width 리셋 */
.svndex-auth-form fieldset.svndex-fieldset { border:0; margin:0; padding:0; min-width:0; }
/* §2026-09-25 위 margin:0 이 특이도가 더 높아 `.row { margin-bottom:16px }` 를 지워, 휴대전화·주소 묶음 바로 밑 칸(생년월일·마케팅 동의)이 붙어 있었다. */
.svndex-auth-form fieldset.svndex-fieldset.row { margin-bottom:16px; }
/* 규칙이 없어 브라우저 기본 <fieldset> 보더가 표 둘레에 그려지고 있었다. fieldset 은 S 전용 disabled 처리에만 쓰므로 시각 요소를 갖지 않는다. */
.sdx-signup-fieldset { border:0; margin:0; padding:0; min-width:0; }
.svndex-auth-form fieldset.svndex-fieldset legend { display:block; width:100%; margin-bottom:6px; padding:0; font-size:1rem; color:#555; }
.svndex-auth-form input[type=text], .svndex-auth-form input[type=email], .svndex-auth-form input[type=password] { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:6px; font-size:1rem; box-sizing:border-box; font-family:inherit; transition:border-color .15s ease, box-shadow .15s ease; }
.svndex-auth-form input[type=text]:focus, .svndex-auth-form input[type=email]:focus, .svndex-auth-form input[type=password]:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(var(--brand-rgb,124,58,237),.12); }
.svndex-auth-form .svndex-honeypot { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
/* 소셜 로그인 버튼 (로그인/가입 — 소셜 1순위 + 일반 폴백 구분선) */
.svx-social-login { display:flex; flex-direction:column; gap:10px; margin:0 0 16px; }
.svx-social-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 16px; border:0; border-radius:12px; font-size:1rem; font-weight:700; text-decoration:none; cursor:pointer; box-sizing:border-box; transition:filter .15s ease; }
.svx-social-btn:hover { filter:brightness(.96); }
.svx-social-btn .ph { font-size:1.25rem; }
/* §2026-10-13 공식 가이드에 맞춤 — 카카오 = 바탕 #FEE500 · 심볼 #000 · 글자 #000 85% · 모서리 12px · 문구 «카카오 로그인» / 네이버 = #03C75A · 흰 N 로고 · «네이버 로그인» (svndex_social_symbol) */
.svx-social-btn.is-kakao { background:#FEE500; color:rgba(0,0,0,.85); }
.svx-social-btn.is-naver { background:#03C75A; color:#fff; }
.svx-social-btn .svx-social-sym { flex:0 0 18px; width:18px; height:18px; }
.svx-social-btn.is-naver .svx-social-sym { flex-basis:15px; width:15px; height:15px; }
.svx-social-hint { margin:-4px 0 12px; text-align:center; font-size:.78rem; color:var(--svx-mute); }
.svx-auth-divider { display:flex; align-items:center; text-align:center; color:var(--svx-mute); font-size:.82rem; margin:4px 0 16px; }
.svx-auth-divider::before, .svx-auth-divider::after { content:""; flex:1; height:1px; background:#e5e7eb; }
.svx-auth-divider span { padding:0 12px; }
/* 소셜 설정 — provider 상태 안내(ON인데 키 없음 경고) + 로그인 화면 미리보기 */
.svndex-social-status { display:flex; align-items:center; gap:6px; margin:0 0 12px; font-size:.82rem; line-height:1.45; padding:7px 11px; border-radius:6px; }
.svndex-social-status.is-ok { background:var(--svx-success-bg); color:var(--svx-success-tx); }
.svndex-social-status.is-warn { background:var(--svx-warn-bg); color:var(--svx-warn-tx); }
.svndex-social-status .ph { font-size:1rem; flex:0 0 auto; }
/* 소셜 회원 마이페이지 — 비밀번호 없음 안내 카드 (provider 색상 좌측 보더) */
.svndex-mypage-social-note { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:8px; background:#f5f3ff; border-left:4px solid var(--svx-primary); margin:0 0 8px; }
.svndex-mypage-social-note.is-kakao { background:#fffbe6; border-left-color:#FEE500; }
.svndex-mypage-social-note.is-naver { background:#ecfdf3; border-left-color:#03C75A; }
.svndex-mypage-social-note .ph { font-size:1.35rem; line-height:1.4; color:var(--svx-primary); flex:0 0 auto; }
.svndex-mypage-social-note.is-naver .ph { color:#03A150; }
.svndex-mypage-social-note.is-kakao .ph { color:#7a6f00; }
.svndex-mypage-social-note p { margin:0; font-size:.9rem; line-height:1.55; color:#374151; }
/* 회원 관리 가입경로 뱃지 (K=카카오 / N=네이버 / ✉=이메일) */
.svndex-route-badge { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px; font-size:.72rem; font-weight:800; line-height:1; }
.svndex-route-badge.is-kakao { background:#FEE500; color:#191600; }
.svndex-route-badge.is-naver { background:#03C75A; color:#fff; }
.svndex-route-badge.is-email { background:#eef2f7; color:#64748b; font-weight:600; }
.svndex-btn-primary { width:100%; padding:12px; background:var(--svx-primary); color:#fff; border:0; border-radius:6px; font-size:1rem; cursor:pointer; font-family:inherit; font-weight:500; text-decoration:none; transition:background .15s ease; }
.svndex-btn-primary:hover { background:var(--svx-primary-d); }
/* §2026-10-12 대표님 «글씨가 좀 크다» — 인증 화면 안내 셋(오류·완료·경고) 16px → 14px */
.svndex-auth-error { padding:10px 14px; background:var(--svx-error-bg); color:var(--svx-error-tx); border-radius:6px; margin-bottom:16px; font-size:.875rem; line-height:1.55; border-left:4px solid var(--svx-error); }
.svndex-auth-success { padding:10px 14px; background:var(--svx-success-bg); color:var(--svx-success-tx); border-radius:6px; margin-bottom:16px; font-size:.875rem; line-height:1.55; border-left:4px solid var(--svx-success); }
.svndex-auth-warn { padding:10px 14px; background:var(--svx-warn-bg); color:var(--svx-warn-tx); border-radius:6px; margin-bottom:16px; font-size:.875rem; line-height:1.55; border-left:4px solid var(--svx-warn); }
.svndex-auth-links { margin-top:20px; text-align:center; font-size:1rem; color:var(--svx-mute); }
.svndex-auth-links a { color:var(--svx-primary); text-decoration:none; margin:0 8px; }
.svndex-auth-links a:hover { text-decoration:underline; }
/* 홈으로 나가는 길 — 인증 화면은 사이트 헤더·메뉴를 싣지 않으므로 이것이 유일한 출구다. 마크업 정본 = auth-page/_layout.php(셸 한 곳). ⚠️ 카드 아래 «구분선 + 글자» 줄이 아니라 **카드 머리 우측 상단의 동그란 아이콘 버튼**이다(사용자 지정). 줄로 두면 카드가 길어지고 링크 묶음이 두 덩이로 보인다 — 되돌리지 말 것. */
.svndex-auth-home { position:absolute; top:14px; right:14px; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--svx-line); background:var(--svx-card); color:var(--svx-mute); text-decoration:none; transition:color .15s ease, border-color .15s ease, background .15s ease; }
.svndex-auth-home:hover { color:var(--svx-primary); border-color:var(--svx-primary); background:var(--svx-bg-alt); }
.svndex-auth-home:focus-visible { outline:2px solid var(--svx-primary); outline-offset:2px; }
.svndex-auth-home .ph { font-size:1.02rem; line-height:1; }
.svndex-captcha-img { display:block; margin:8px 0; border:1px solid #ddd; border-radius:6px; }
.svndex-captcha-img-wrap { display:flex; align-items:center; gap:8px; margin:8px 0; }
.svndex-captcha-img-wrap .svndex-captcha-img { margin:0; }
.svndex-captcha-refresh { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; padding:0; border:1px solid var(--svx-line); border-radius:8px; background:var(--svx-card); color:var(--svx-ink); font:inherit; font-size:1.15rem; line-height:1; cursor:pointer; }
.svndex-captcha-refresh:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.svndex-captcha-refresh:focus-visible { outline:2px solid var(--svx-primary); outline-offset:2px; }
/* 보안문자 입력칸 = 이미지·새로고침 오른쪽 한 줄(좁으면 아랫줄로 내려간다) */
.svndex-captcha-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 0; }
.svndex-captcha-line .svndex-captcha-img-wrap { flex:0 0 auto; margin:0; }
.svndex-captcha-line > input { flex:1 1 110px; min-width:0; }
/* 인증 힌트 텍스트 색상(NB8 LOW) — JS 인라인 style.color 는 다크모드 CSS 가 덮어쓸 수 없어 클래스로 전환 */
.svndex-auth-hint.is-success { color:var(--svx-success-tx); }
.svndex-auth-hint.is-error { color:var(--svx-error-tx); }
.svndex-auth-hint.is-muted { color:var(--svx-mute); }
.svndex-auth-hint.is-warn { color:var(--svx-warn-tx); }
/* 회원가입 아이디 중복확인 — 확인 전 = 버튼 강조 · 확인 완료 = 초록(auth.js 가 붙인다) */
.svndex-btn-secondary.is-attention { border-color:var(--svx-primary); color:var(--svx-primary); background:rgba(var(--brand-rgb,124,58,237),.06); box-shadow:0 0 0 3px rgba(var(--brand-rgb,124,58,237),.14); font-weight:600; }
.svndex-btn-secondary.is-done, .svndex-btn-secondary.is-done:hover { border-color:var(--svx-success); color:var(--svx-success-tx); background:var(--svx-success-bg); }
/* 가입 버튼 — 위 동의 상자와 띄우고, 꺼져 있는 동안 아래에 이유 한 줄 */
.svndex-register-submit { margin-top:16px; }
.svndex-register-submit-hint { margin:8px 0 0; text-align:center; font-size:.85rem; }
/* ── 마이페이지 본문 ── */
.svndex-auth-form:has(.svndex-mypage-grid) { max-width:960px; padding:36px 36px; }
.svndex-auth-form:has(.svndex-mypage-grid) > h1 { padding-bottom:20px; margin-bottom:28px; border-bottom:1px solid var(--svx-line); }
/* 회원가입 — 회원 유형 + 약관 동의 (가입 버튼 위) */
.svndex-register-policy { margin-top:24px; padding:18px 20px; background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:8px; }
.svndex-register-radios { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--svx-line); }
.svndex-register-radios label { font-size:.95rem; line-height:1.5; }
.svndex-register-radios label small { color:var(--svx-mute); font-weight:400; }
.svndex-register-privacy { font-size:.95rem; }
/* §2026-09-25 `.svndex-auth-form label { display:block }` 이 inline-flex 를 이겨, 좁은 화면에서 전문 보기 돋보기만 다음 줄로 떨어졌다. */
.svndex-auth-form label.svndex-register-privacy { display:flex; align-items:center; gap:6px; }
.svndex-auth-form label.svndex-register-privacy > span { min-width:0; }
.svndex-auth-form label.svndex-register-privacy > .svndex-privacy-view { flex:0 0 auto; margin-left:0; }
.svndex-register-privacy a { color:var(--svx-primary); text-decoration:underline; }
.svndex-register-privacy a:hover { color:var(--svx-primary-d); }
.svndex-register-form .svndex-mypage-grid { margin-bottom:0; }
/* 휴대폰 분할 입력 — svndex-auth-form input width:100% 우선순위 이김 */
.svndex-auth-form .svndex-phone-group { display:flex; gap:6px; align-items:center; flex-wrap:nowrap; }
.svndex-auth-form .svndex-phone-prefix { width:80px; flex:0 0 80px; padding:10px 8px; border:1px solid var(--svx-line); border-radius:6px; font-size:1rem; background:var(--svx-card); }
.svndex-auth-form .svndex-phone-sep { color:var(--svx-mute); font-weight:500; flex:0 0 auto; }
.svndex-auth-form .svndex-phone-part { width:auto; flex:1 1 0; min-width:0; padding:10px 8px; border:1px solid var(--svx-line); border-radius:6px; font-size:1rem; text-align:center; box-sizing:border-box; }
/* 주소 — 우편번호 + 도로명 + 상세 */
.svndex-auth-form .svndex-address-group { display:flex; flex-direction:column; gap:8px; }
.svndex-auth-form .svndex-address-zip-row { display:flex; gap:6px; }
.svndex-auth-form .svndex-address-zip { width:140px; flex:0 0 140px; padding:10px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:1rem; background:var(--svx-bg-alt); box-sizing:border-box; }
.svndex-auth-form .svndex-address-zip-row button { flex:1 1 auto; white-space:nowrap; padding:10px 12px; font-size:.875rem; }
.svndex-auth-form .svndex-address-group input[readonly] { cursor:default; }
.svndex-auth-form .svndex-address-group > input { width:100%; padding:10px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:1rem; box-sizing:border-box; }
/* 이메일 로컬 @ 도메인 + 도메인 select (직접입력 = 편집 가능) */
.svndex-auth-form .svndex-email-group { display:flex; gap:6px; align-items:center; flex-wrap:nowrap; }
.svndex-auth-form .svndex-email-local { width:auto; flex:1 1 0; min-width:0; }
.svndex-auth-form .svndex-email-at { color:var(--svx-mute); font-weight:500; flex:0 0 auto; }
.svndex-auth-form .svndex-email-domain { width:auto; flex:1 1 0; min-width:0; }
.svndex-auth-form .svndex-email-domain[readonly] { background:var(--svx-bg-alt); cursor:default; }
.svndex-auth-form .svndex-email-domain-sel { flex:0 0 auto; width:132px; max-width:40%; padding:10px 8px; border:1px solid var(--svx-line); border-radius:6px; font-size:.95rem; background:var(--svx-card); box-sizing:border-box; }
/* 개인정보취급방침 돋보기 + 모달 */
.svndex-privacy-view { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; margin-left:6px; border:1px solid var(--svx-line); border-radius:50%; background:var(--svx-card); color:var(--svx-primary); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.svndex-privacy-view:hover { background:var(--svx-primary); color:#fff; border-color:var(--svx-primary); }
.svndex-privacy-view .ph { font-size:.85rem; line-height:1; }
/* 우편번호 검색 모달 (다음 임베드) */
.svndex-postcode-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.svndex-postcode-modal[hidden] { display:none; }
.svndex-postcode-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); }
.svndex-postcode-modal-box { position:relative; width:100%; max-width:560px; height:560px; background:#fff; border-radius:10px; box-shadow:0 16px 48px rgba(0,0,0,.3); overflow:hidden; }
.svndex-postcode-close { position:absolute; top:12px; right:12px; z-index:10; width:32px; height:32px; padding:0; background:rgba(0,0,0,.6); border:0; border-radius:50%; color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; }
.svndex-postcode-close:hover { background:rgba(0,0,0,.85); }
#svndex-postcode-container { width:100%; height:100%; }
.svndex-privacy-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.svndex-privacy-modal[hidden] { display:none; }
.svndex-privacy-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.svndex-privacy-modal-box { position:relative; width:100%; max-width:600px; max-height:80vh; background:var(--svx-card); border-radius:10px; box-shadow:0 16px 48px rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden; }
.svndex-privacy-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--svx-line); }
.svndex-privacy-modal-head h3 { margin:0; font-size:1.1rem; color:var(--svx-ink); }
.svndex-privacy-modal-close { background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--svx-mute); padding:0; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; }
.svndex-privacy-modal-close:hover { color:var(--svx-ink); }
.svndex-privacy-modal-body { padding:20px; overflow-y:auto; line-height:1.7; font-size:.95rem; color:var(--svx-ink); }
@media (max-width: 540px) { .svndex-auth-form .svndex-phone-group { flex-wrap:wrap; } .svndex-auth-form .svndex-phone-prefix { width:70px; flex:0 0 70px; } .svndex-auth-form .svndex-address-zip { width:110px; flex:0 0 110px; } .svndex-auth-form .svndex-email-group { flex-wrap:wrap; } .svndex-auth-form .svndex-email-local, .svndex-auth-form .svndex-email-domain { flex:1 1 40%; } .svndex-auth-form .svndex-email-domain-sel { flex:1 1 100%; width:100%; max-width:100%; margin-top:4px; } }
.svndex-mypage-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; margin:0; }
.svndex-mypage-col { display:flex; flex-direction:column; min-width:0; }
.svndex-mypage-section-title { margin:0 0 14px; font-size:1.0625rem; font-weight:600; color:var(--svx-ink); letter-spacing:-.01em; display:flex; align-items:baseline; gap:6px; }
.svndex-mypage-section-title small { font-size:.8125rem; color:var(--svx-mute); font-weight:400; }
.svndex-mypage-section-spaced { margin-top:32px; }
.svndex-mypage-info { list-style:none; margin:0; padding:0; }
/* padding 비대칭 (11/9) — 한글 폰트 광학적 중심 보정 / li 고정 높이 = padding 20 + content 22.4 + border 1 */
.svndex-mypage-info li { display:flex; justify-content:space-between; gap:12px; padding:11px 0 9px; border-bottom:1px solid var(--svx-line); font-size:1rem; line-height:1.4; align-items:center; height:43px; box-sizing:border-box; }
.svndex-mypage-info li:last-child { border-bottom:0; }
.svndex-mypage-info li > span:first-child { color:var(--svx-mute); font-weight:500; flex-shrink:0; }
.svndex-mypage-info li > span:last-child { color:var(--svx-ink); text-align:right; word-break:break-all; min-width:0; }
.svndex-mypage-info li .with-badge { display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; }
.svndex-mypage-info li .svndex-mypage-inactive { color:var(--svx-mute); font-style:italic; opacity:.6; }
.svndex-mypage-info li.is-meta > span:last-child { font-size:.8125rem; color:var(--svx-mute); }
/* 섹션 헤드 (제목 + 수정/저장 버튼) */
.svndex-mypage-section-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; gap:10px; min-height:32px; }
.svndex-mypage-section-head .svndex-mypage-section-title { margin:0; }
/* ─────────────────────────────────────────────────────────── mypage 비번 변경 폼 — UX 보강 ─────────────────────────────────────────────────────────── */
.svx-pw-form .svx-pw-row { margin-bottom:14px; }
.svx-pw-form label { display:block; margin-bottom:6px; font-size:.85rem; font-weight:600; color:var(--svx-ink); }
.svx-pw-form label small { margin-left:4px; font-size:.75rem; font-weight:400; color:var(--svx-mute); }
.svx-pw-wrap { position:relative; display:flex; }
.svx-pw-wrap input { flex:1; padding:9px 38px 9px 11px; font-size:.92rem; border:1px solid var(--svx-line); border-radius:6px; background:#fff; color:var(--svx-ink); font-family:inherit; }
.svx-pw-wrap input:focus { outline:0; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(var(--brand-rgb,124,58,237),.15); }
.svx-pw-eye { position:absolute; top:50%; right:8px; transform:translateY(-50%); width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; color:var(--svx-mute); cursor:pointer; border-radius:4px; }
.svx-pw-eye:hover { color:var(--svx-primary); background:var(--svx-bg-alt); }
.svx-pw-eye i { font-size:1.05rem; }
.svx-pw-rules { list-style:none; margin:8px 0 0; padding:10px 12px; display:flex; flex-wrap:wrap; gap:10px 18px; background:var(--svx-bg-alt); border-radius:6px; font-size:.78rem; color:var(--svx-mute); }
.svx-pw-rules li { display:inline-flex; align-items:center; gap:5px; transition:color .15s ease; }
.svx-pw-rules li i { font-size:.95rem; color:var(--svx-mute); }
.svx-pw-rules li.is-ok { color:#0d8c5b; }
.svx-pw-rules li.is-ok i { color:#10b981; }
.svx-pw-rules li.is-bad { color:#dc2626; }
.svx-pw-rules li.is-bad i { color:#ef4444; }
.svx-pw-msg { margin:6px 0 0; padding:0; font-size:.78rem; display:inline-flex; align-items:center; gap:5px; }
.svx-pw-msg[hidden] { display:none; }
.svx-pw-msg i { font-size:.95rem; }
.svx-pw-match.is-ok { color:#0d8c5b; }
.svx-pw-match.is-bad { color:#dc2626; }
.svx-pw-caps { color:#b45309; }
.svx-pw-caps i { color:#d97706; }
/* 로그인 폼 — svx-pw-* 룰 공유 + 고유 색상 */
.svx-login-form .svx-pw-row { margin-bottom:14px; }
.svx-login-form input[type="text"], .svx-login-form input[type="password"] { padding:9px 38px 9px 11px; font-size:.92rem; border:1px solid var(--svx-line); border-radius:6px; background:#fff; color:var(--svx-ink); font-family:inherit; width:100%; box-sizing:border-box; }
.svx-login-form input[type="text"]:focus, .svx-login-form input[type="password"]:focus { outline:0; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.svx-login-form .svx-pw-wrap input { padding-right:38px; }
.svx-login-form label { display:block; margin-bottom:6px; font-size:.85rem; font-weight:600; color:var(--svx-ink); }
.svx-login-hangul { color:#b45309; }
.svx-login-hangul i { color:#d97706; }
.svx-login-blank { color:#dc2626; padding:10px 12px; margin:0 0 12px !important; background:#fef2f2; border:1px solid #fecaca; border-radius:6px; font-size:.82rem; }
.svx-login-blank i { color:#ef4444; }
body[data-theme="dark"] .svx-login-form input[type="text"], body[data-theme="dark"] .svx-login-form input[type="password"] { background:var(--svx-d-card); border-color:var(--svx-d-line-strong); color:var(--svx-d-ink); }
body[data-theme="dark"] .svx-login-form label { color:var(--svx-d-ink-strong); }
body[data-theme="dark"] .svx-login-blank { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#f87171; }
body[data-theme="dark"] .svx-login-blank i { color:#fca5a5; }
.svx-pw-form button[type="submit"] { transition:background .18s ease, opacity .18s ease, transform .12s ease; }
.svx-pw-form button[type="submit"]:disabled { opacity:.55; cursor:not-allowed; }
.svx-pw-form button[type="submit"].is-ready { box-shadow:0 0 0 0 rgba(var(--brand-rgb,124,58,237),.4); animation:svx-pw-pulse 1.6s ease-in-out infinite; }
@keyframes svx-pw-pulse { 0%, 100% { box-shadow:0 0 0 0 rgba(124,58,237,.0); } 50% { box-shadow:0 0 0 4px rgba(124,58,237,.18); } }
body[data-theme="dark"] .svx-pw-wrap input { background:var(--svx-d-card); border-color:var(--svx-d-line-strong); color:var(--svx-d-ink); }
body[data-theme="dark"] .svx-pw-eye { color:var(--svx-d-mute); }
body[data-theme="dark"] .svx-pw-eye:hover { background:var(--svx-d-bg-alt); }
body[data-theme="dark"] .svx-pw-rules { background:var(--svx-d-bg-alt); color:var(--svx-d-mute); }
body[data-theme="dark"] .svx-pw-rules li.is-ok { color:#34d399; }
body[data-theme="dark"] .svx-pw-rules li.is-bad { color:#f87171; }
.svndex-mypage-section-head > .svndex-mypage-edit-btn, .svndex-mypage-section-head > .svndex-mypage-edit-actions-top { display:inline-flex; align-items:center; }
.svndex-mypage-edit-btn, .svndex-mypage-cancel, .svndex-mypage-edit-actions-top .svndex-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:0; padding:6px 14px; font-size:.875rem; line-height:1.4; font-weight:500; font-family:inherit; text-decoration:none; cursor:pointer; border-radius:6px; box-sizing:border-box; height:auto; min-height:0; }
.svndex-mypage-edit-btn, .svndex-mypage-cancel { background:transparent; color:var(--svx-mute); text-decoration:none; border:1px solid var(--svx-line); transition:color .15s ease, border-color .15s ease; }
.svndex-mypage-edit-btn:hover { color:var(--svx-primary); border-color:var(--svx-primary); }
.svndex-mypage-cancel:hover { color:var(--svx-error-tx); border-color:var(--svx-error); }
/* 수정 모드 — span 자리에 input/select 인라인 */
.svndex-mypage-edit-form { margin:0; padding:0; }
.svndex-mypage-info.is-editing li > span:last-child { flex:1; min-width:0; text-align:left; }
.svndex-mypage-info.is-editing > li { align-items:center; height:auto; padding:9px 0; }
.svndex-mypage-info.is-editing li .readonly { color:var(--svx-mute); }
/* ⚠ 새 입력 타입을 쓰면 여기에도 추가한다 — 빠지면 그 칸만 브라우저 기본 크기로 나와 위 행을 덮는다(2026-09-15 실측: password 칸이 빠져 수정모드가 깨져 있었다). */
.svndex-mypage-info.is-editing input[type=text], .svndex-mypage-info.is-editing input[type=email], .svndex-mypage-info.is-editing input[type=password], .svndex-mypage-info.is-editing input[type=tel], .svndex-mypage-info.is-editing input[type=date], .svndex-mypage-info.is-editing select { width:100%; height:auto; padding:7px 10px; margin:0; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); font:inherit; line-height:1.4; color:var(--svx-ink); text-align:left; outline:none; box-sizing:border-box; }
.svndex-mypage-info.is-editing select { cursor:pointer; }
.svndex-mypage-info.is-editing input:hover, .svndex-mypage-info.is-editing select:hover { border-color:var(--svx-primary); }
.svndex-mypage-info.is-editing input:focus, .svndex-mypage-info.is-editing select:focus { border-color:var(--svx-primary); box-shadow:0 0 0 2px rgba(124,58,237,.18); }
.svndex-mypage-info.is-editing .with-badge { gap:8px; }
.svndex-mypage-info.is-editing .with-badge input { flex:1; }
.svndex-mypage-info.is-editing .svndex-mypage-checkbox { justify-content:flex-end; line-height:1.4; height:1.4em; gap:6px; }
.svndex-mypage-info.is-editing input[type=checkbox] { margin:0; padding:0; width:1rem; height:1rem; vertical-align:middle; flex-shrink:0; }
/* 마이페이지 편집 — 휴대폰/주소 분할 input 은 박스 형태 (인라인 transparent 무력화) */
.svndex-mypage-info.is-editing .svndex-phone-group { justify-content:flex-end; flex-wrap:wrap; gap:4px; }
.svndex-mypage-info.is-editing .svndex-phone-group input, .svndex-mypage-info.is-editing .svndex-phone-group select { height:auto; padding:6px 8px; border:1px solid var(--svx-line); background:var(--svx-card); text-align:center; line-height:1.3; border-radius:6px; cursor:auto; }
.svndex-mypage-info.is-editing .svndex-phone-group select { cursor:pointer; padding-right:24px; }
.svndex-mypage-info.is-editing .svndex-phone-prefix { width:64px; flex:0 0 64px; }
.svndex-mypage-info.is-editing .svndex-phone-part { width:70px; flex:0 0 70px; }
/* §2026-09-25 꺼진 «본인인증» 버튼을 걷어낸 뒤 휴대전화만 오른쪽으로 쏠려 다른 칸과 정렬이 어긋났다 — 이름·생년월일처럼 칸 폭을 채운다. */
.svndex-mypage-info.is-editing .svndex-phone-group { justify-content:flex-start; flex-wrap:nowrap; }
.svndex-mypage-info.is-editing .svndex-phone-part { width:auto; flex:1 1 0; min-width:0; }
.svndex-mypage-info.is-editing .svndex-address-group { width:100%; }
.svndex-mypage-info.is-editing .svndex-address-group input { height:auto; padding:8px 10px; border:1px solid var(--svx-line); background:var(--svx-card); text-align:left; line-height:1.4; border-radius:6px; }
.svndex-mypage-info.is-editing .svndex-address-zip-row button { height:auto; padding:8px 12px; border-radius:6px; }
.svndex-mypage-info.is-editing > li:has(.svndex-phone-group), .svndex-mypage-info.is-editing > li:has(.svndex-address-group) { align-items:flex-start; height:auto; padding:11px 0; }
.svndex-mypage-info.is-editing > li:has(.svndex-address-group) > span:last-child { display:block; flex:1; min-width:0; }
/* 마이페이지 수정모드 — 이메일·힌트 줄. ⚠ .svndex-email-* 규칙은 .svndex-auth-form 에만 스코프돼 있어 마이페이지에는 한 줄도 안 걸린다 — 여기서 따로 잡는다 */
.svndex-mypage-info.is-editing > li:has(.svndex-email-group) { align-items:flex-start; height:auto; padding:11px 0; }
.svndex-mypage-info.is-editing > li:has(.svndex-email-group) > span:last-child { display:block; flex:1; min-width:0; }
.svndex-mypage-info.is-editing .svndex-email-group { display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:5px; width:100%; }
.svndex-mypage-info.is-editing .svndex-email-local { flex:1 1 0; min-width:0; }
.svndex-mypage-info.is-editing .svndex-email-at { flex:0 0 auto; color:var(--svx-mute); }
.svndex-mypage-info.is-editing .svndex-email-domain { flex:1 1 0; min-width:0; text-align:left; }
.svndex-mypage-info.is-editing .svndex-email-domain-sel { flex:0 0 auto; width:96px; height:auto; padding:3px 6px; border:1px solid var(--svx-line); border-radius:5px; background:var(--svx-card); font-size:.82rem; line-height:1.3; text-align:left; }
/* §2026-09-25 좁은 화면에서 선택칸(96px)이 한 줄을 같이 쓰면 아이디·도메인 칸이 60px 로 눌려 입력한 주소가 안 보였다 — 선택칸을 아랫줄로 내린다. */
@media (max-width: 540px) { .svndex-mypage-info.is-editing .svndex-email-group { flex-wrap:wrap; } .svndex-mypage-info.is-editing .svndex-email-domain-sel { flex:1 1 100%; width:100%; padding:6px 8px; } }
/* 힌트·설명 줄은 입력칸 아래 한 줄로 떨어뜨린다 — 인라인으로 두면 같은 줄에 끼어 덮는다. */
.svndex-mypage-info.is-editing .svndex-mypage-row-hint { display:block; margin-top:5px; font-size:.8rem; line-height:1.45; color:var(--svx-mute); text-align:left; }
.svndex-mypage-info.is-editing > li:has(.svndex-mypage-row-hint) { align-items:flex-start; height:auto; padding:11px 0; }
/* 회원 탈퇴 구획 — 「활동 내역」과 분리. 되돌릴 수 없는 동작이라 한 줄로 길게 둔다. */
.svndex-mypage-withdraw-row { display:flex; align-items:center; gap:8px; }
/* ⚠ .svndex-mypage-row form button { width:100% } (0,2,1) 가 이긴다 — 클래스를 겹쳐 특이도를 (0,3,1) 로 올려야 5:5 가 유지된다(§12-40, 2026-09-15 실측으로 두 번 당함). */
.svndex-mypage-row.svndex-mypage-withdraw-row form { display:flex; flex-wrap:nowrap; align-items:stretch; gap:10px; width:100%; }
/* ⚠ CSRF 히든 input 이 첫 flex 항목이다 — :not([type=hidden]) 을 빼면 그것까지 50% 를 먹어 50+50+50=150% 가 되어 줄바꿈된다(실측). */
.svndex-mypage-row.svndex-mypage-withdraw-row form input[type=hidden] { display:none; }
.svndex-mypage-row.svndex-mypage-withdraw-row form input:not([type=hidden]) { flex:1 1 50%; width:50%; min-width:0; }
.svndex-mypage-row.svndex-mypage-withdraw-row form button { flex:1 1 50%; width:50%; min-width:0; }
/* 비활성 표시 — auth-page 버튼 3종 공통. 클래스를 바꿔도 따라오도록 버튼 자체에 건다 (2026-09-15: membership 버튼을 svndex-btn-secondary 로 바꾸자 전용 규칙이 안 걸려 비활성이 안 보였다). */
.svndex-btn-secondary[disabled], .svndex-btn-danger[disabled], .svndex-btn-primary[disabled], .svndex-mypage-membership-btn[disabled] { opacity:1; cursor:not-allowed; background:var(--svx-bg-alt); color:#9aa0ab; border:1px solid #c6c6cf; pointer-events:none; }
/* 「변경」(비밀번호) 만 진하게 — 조건 미충족 상태를 눈에 띄게 한다(사용자 지시). */
#svx-pw-submit[disabled] { opacity:1; background:#c9c9d1; color:#5b616e; border-color:#b9b9c4; }
.svndex-mypage-membership .svndex-mypage-row-hint { display:block; margin-top:6px; font-size:.8rem; color:var(--svx-mute); }
/* 좌우 칸은 grid stretch 라 높이가 같다 — 오른쪽 내용이 짧으면 아래가 빈다. 마지막 구획을 바닥으로 밀어 왼쪽 「로그인 / 보안 이력」과 끝단을 맞춘다. */
.svndex-mypage-section-bottom { margin-top:auto; }
@media (max-width: 860px) { .svndex-mypage-section-bottom { margin-top:26px; } }
/* 수정모드 «입력칸이 여기 있다» 표시 — 테두리·배경이 없으면 값이 빈 칸은 통째로 안 보인다. 인라인 편집 모양은 유지하고 옅은 밑줄로 자리만 드러낸다 */
.svndex-mypage-info.is-editing input:hover, .svndex-mypage-info.is-editing select:hover { border-bottom-color:var(--svx-primary); }
.svndex-mypage-info.is-editing input:focus, .svndex-mypage-info.is-editing select:focus { border-bottom-color:var(--svx-primary); }
.svndex-mypage-info.is-editing input::placeholder { color:var(--svx-mute); opacity:.6; }
/* 테두리를 이미 가진 칸(전화·주소·이메일 셀렉트)은 점선을 겹치지 않게 되돌린다. */
.svndex-mypage-info.is-editing .svndex-phone-group input, .svndex-mypage-info.is-editing .svndex-phone-group select, .svndex-mypage-info.is-editing .svndex-address-group input, .svndex-mypage-info.is-editing .svndex-email-domain-sel { border-bottom-style:solid; border-radius:6px; }
.svndex-mypage-checkbox { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.svndex-mypage-edit-actions-top { display:inline-flex; align-items:stretch; gap:8px; }
.svndex-mypage-edit-actions-top .svndex-btn-primary { width:auto; padding:8px 18px; font-size:.9rem; line-height:1.3; border-radius:6px; }
/* 취소(a)와 저장(button)은 태그가 달라 기본 높이가 어긋난다 — 같은 상자 규격으로 맞춘다. */
.svndex-mypage-edit-actions-top .svndex-mypage-cancel { display:inline-flex; align-items:center; justify-content:center; padding:8px 18px; font-size:.9rem; line-height:1.3; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); color:var(--svx-ink); text-decoration:none; }
.svndex-mypage-edit-actions-top .svndex-mypage-cancel:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
/* 가로 정렬 행 */
.svndex-mypage-row { display:flex; gap:10px; align-items:stretch; }
.svndex-mypage-row > a, .svndex-mypage-row form { flex:1; margin:0; display:flex; }
.svndex-mypage-row form button { width:100%; }
.svndex-mypage-row.svndex-mypage-row-split { justify-content:space-between; }
.svndex-btn-secondary, .svndex-btn-danger { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 16px; border-radius:6px; font-size:.9375rem; font-weight:500; text-decoration:none; cursor:pointer; font-family:inherit; box-sizing:border-box; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.svndex-btn-secondary { background:var(--svx-card); color:var(--svx-ink); border:1px solid var(--svx-line); }
.svndex-btn-secondary:hover { border-color:var(--svx-primary); color:var(--svx-primary); background:#fefefe; }
.svndex-btn-danger { background:var(--svx-card); color:var(--svx-error-tx); border:1px solid var(--svx-error-bg); }
.svndex-btn-danger:hover { background:var(--svx-error); color:#fff; border-color:var(--svx-error); }
/* mypage — 회원유형 전환 / 탈퇴 비번 재확인 / 로그인·보안 이력 (회원 정합성 보강) */
.svndex-mypage-membership { margin:10px 0 0; }
.svndex-mypage-membership-btn { display:inline-flex; align-items:center; padding:7px 14px; font-size:.85rem; font-weight:500; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card); color:var(--svx-ink); cursor:pointer; font-family:inherit; transition:border-color .15s ease, color .15s ease; }
.svndex-mypage-membership-btn:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
/* ⚠ 종전 #svx-mypage-withdraw { flex-direction:column } 이 ID(1,0,0) 라 클래스 규칙을 전부 이겼다. 그래서 아래 5:5 규칙이 몇 번을 배포해도 세로로 남았다. 가로 한 줄로 고정한다. */
#svx-mypage-withdraw { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:stretch; gap:10px; width:100%; }
#svx-mypage-withdraw input[type=hidden] { display:none; }
#svx-mypage-withdraw input:not([type=hidden]) { flex:1 1 50%; width:50%; min-width:0; }
#svx-mypage-withdraw button { flex:1 1 50%; width:50%; min-width:0; }
.svndex-mypage-withdraw-pw { width:100%; padding:11px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:.9rem; font-family:inherit; background:var(--svx-card); color:var(--svx-ink); box-sizing:border-box; }
.svndex-mypage-withdraw-pw:focus { outline:none; border-color:var(--svx-error); }
/* 이력 상자가 왼쪽 칸의 남는 높이를 채운다 — 오른쪽 칸(회원 탈퇴까지)과 끝단이 맞는다. ⚠ min-height:0 이 없으면 flex 항목이 안 줄어 상자가 칸을 넘친다. */
.svndex-mypage-seclog { list-style:none; margin:0; padding:0; border:1px solid var(--svx-line); border-radius:8px; overflow-y:auto; overflow-x:hidden; flex:1 1 0; min-height:0; }
@media (max-width: 860px) { .svndex-mypage-seclog { flex:0 0 auto; max-height:200px; } }
.svndex-mypage-seclog li { display:flex; align-items:center; gap:12px; padding:9px 14px; font-size:.85rem; border-bottom:1px solid var(--svx-line); }
.svndex-mypage-seclog li:last-child { border-bottom:0; }
.svndex-mypage-seclog li.is-fail { color:var(--svx-error-tx); background:var(--svx-error-bg); }
.svndex-mypage-seclog .t { color:var(--svx-mute); font-variant-numeric:tabular-nums; min-width:118px; }
.svndex-mypage-seclog .e { font-weight:600; flex:1; }
.svndex-mypage-seclog .ip { color:var(--svx-mute); font-size:.8rem; }
.svndex-mypage-sec-empty { color:var(--svx-mute); font-size:.875rem; }
.svndex-mypage-footer { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; margin-top:32px; padding-top:24px; border-top:1px solid var(--svx-line); }
.svndex-mypage-footer form { margin:0; display:inline-flex; }
.svndex-mypage-footer > a, .svndex-mypage-footer form button { padding:10px 20px; font-size:1.05rem; font-weight:500; gap:16px; width:220px; justify-content:center; }
/* §2026-09-25 — 좌우 여백(56px)+글자 길이로 세 버튼 폭이 제각각이었다 → 같은 폭 */
.svndex-mypage-footer .ph { font-size:1.25rem; line-height:1; }
/* §2026-09-24 — 버튼 3개가 각각 최소 180px(+좌우 56px)이라 폰에서 화면을 넘어 양옆이 잘리고 글자가 세로로 쪼개졌다 (실측 390px: 묶음 443px > 칸 318px). 좁은 화면에서는 한 줄에 하나씩 전체 폭으로 쌓는다. */
@media (max-width:640px) { .svndex-mypage-footer { flex-direction:column; align-items:stretch; gap:8px; } .svndex-mypage-footer form { display:flex; } .svndex-mypage-footer > a, .svndex-mypage-footer form button { min-width:0; width:100%; padding:12px 16px; gap:10px; } }
.svndex-mypage-col form .row label small { color:var(--svx-mute); font-weight:400; }
.svndex-mypage-col form .svndex-btn-primary { margin-top:4px; }
/* ── 마이페이지 활동내역 내보내기 ── */
.svndex-mypage-export-page { margin:0; min-height:100vh; padding:32px 16px; display:flex; align-items:center; justify-content:center; font-family:var(--svx-font-sans); color:#334155; background:var(--svx-bg-alt); line-height:1.6; -webkit-font-smoothing:antialiased; color-scheme:light; }
.svndex-mypage-export-page .export-card { width:100%; max-width:720px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.06); padding:40px 36px; }
.svndex-mypage-export-page h1 { font-size:1.5rem; font-weight:700; color:var(--svx-ink); margin:0 0 6px; letter-spacing:-.02em; }
.svndex-mypage-export-page .meta { color:var(--svx-mute); font-size:.8125rem; margin:0 0 28px; padding-bottom:16px; border-bottom:2px solid var(--svx-line); }
.svndex-mypage-export-page .meta a { color:var(--svx-primary); }
.svndex-mypage-export-page h2 { font-size:1rem; font-weight:600; color:var(--svx-ink); margin:28px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--svx-line); }
.svndex-mypage-export-page table { width:100%; border-collapse:collapse; font-size:.875rem; }
.svndex-mypage-export-page th, .svndex-mypage-export-page td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--svx-line); }
.svndex-mypage-export-page th { width:28%; color:var(--svx-mute); font-weight:500; background:var(--svx-bg-alt); }
.svndex-mypage-export-page td { color:var(--svx-ink); }
.svndex-mypage-export-page tr:last-child th, .svndex-mypage-export-page tr:last-child td { border-bottom:0; }
.svndex-mypage-export-page .empty { color:var(--svx-mute); font-size:.875rem; padding:12px; background:var(--svx-bg-alt); border-radius:6px; text-align:center; }
.svndex-mypage-export-page .export-actions { display:flex; gap:10px; margin-top:32px; padding-top:24px; border-top:1px solid var(--svx-line); }
.svndex-mypage-export-page .btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 16px; border-radius:6px; font-size:.9rem; font-weight:500; text-decoration:none; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; border:1px solid var(--svx-line); background:var(--svx-card); color:var(--svx-ink); }
.svndex-mypage-export-page .btn:hover { border-color:var(--svx-primary); color:var(--svx-primary); background:var(--svx-bg-alt); }
@media (max-width: 640px) { .svndex-mypage-export-page { padding:16px 8px; } .svndex-mypage-export-page .export-card { padding:28px 20px; border-radius:8px; } .svndex-mypage-export-page .export-actions { flex-direction:column; } .svndex-mypage-export-page h1 { font-size:1.25rem; } }
/* ── 시스템 출력 — 게시판 폼 등 ── */
.post-form-honeypot { position:absolute; left:-9999px; top:-9999px; opacity:0; pointer-events:none; }
.post-form .captcha-img { cursor:pointer; vertical-align:middle; }
.post-form input[name="captcha"] { margin-left:.5rem; width:8rem; }
/* ── 티커 관리 ── */
.ticker-flash { padding:8px 12px; border-radius:6px; background:var(--svx-success-bg); color:var(--svx-success-tx); font-size:.85rem; }
.ticker-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap:14px; }
/* 종류별 컬럼 — 미리보기 (상단 고정) + 폼 N개 (스크롤) + + 버튼 */
/* §2026-09-25 — 폼은 칸 폭이 약 460px 는 돼야 날짜·시간 칸이 폼 안에 들어간다(380 이면 1100·1600px 에서 넘쳤다). 2열이 되는 폭에서는 세 번째(하단 티커)가 혼자 남아 오른쪽 절반(약 900px 높이)이 비었다 → 한 줄 전체로 펴고 안을 «미리보기 | 폼» 으로 나눈다. 폭 범위는 2열 구간 안쪽으로 잡았다(경계 몇 px 는 혼자 남는 종전 모양 그대로 — 넘치지는 않는다). */
.ticker-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap:14px; }
@media (min-width:1270px) and (max-width:1700px) { .ticker-cols > .ticker-col:nth-child(3):last-child { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 14px; align-items:start; } .ticker-cols > .ticker-col:nth-child(3):last-child > .ticker-preview { grid-column:1; grid-row:1 / span 2; } .ticker-cols > .ticker-col:nth-child(3):last-child > :not(.ticker-preview) { grid-column:2; } }
.ticker-col { background:transparent; border:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ticker-col > :first-child { margin-top:0; }
.ticker-col-head { padding-bottom:8px; border-bottom:1px solid var(--svx-line); }
.ticker-col-head strong { font-size:.95rem; color:var(--svx-ink); display:block; }
.ticker-col-forms { display:flex; flex-direction:column; gap:12px; }
.ticker-col-forms .ticker-card { background:; padding:12px; box-shadow:none; border:1px solid var(--svx-line); }
.ticker-card-id { font-size:.7rem; color:var(--svx-mute); font-weight:600; }
.ticker-add-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px; background:rgba(124,58,237,.05); border:1px dashed var(--svx-primary); border-radius:6px; color:var(--svx-primary); font-size:.82rem; font-family:inherit; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.ticker-add-btn:hover { background:rgba(124,58,237,.14); border-color:var(--svx-primary-d, #6d28d9); color:var(--svx-primary-d, #6d28d9); }
.ticker-add-btn .ph { font-size:1rem; }
.ticker-card { background:var(--svx-card); border:1px solid var(--svx-line); border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.ticker-card-head { display:flex; align-items:center; justify-content:space-between; padding-top: 0px; padding-bottom:10px; border-bottom:1px solid var(--svx-line); margin-bottom:4px; }
.ticker-card-head strong { font-size:.95rem; color:var(--svx-ink); display:block; }
.ticker-card-desc { display:block; font-size:.72rem; color:var(--svx-mute); margin-top:2px; }
.ticker-row { display:flex; gap:6px; }
.ticker-row-2col { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ticker-row-options { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:14px; padding:6px 0; }
.ticker-btn-row { display:grid; grid-template-columns:1fr 2fr auto; gap:6px; align-items:center; }
.ticker-newwin-label { display:inline-flex; align-items:center; gap:4px; font-size:.74rem; color:var(--svx-mute); white-space:nowrap; cursor:pointer; }
.ticker-input-mono { font-family:'Menlo','Monaco',monospace; font-size:.78rem; }
.ticker-input { width:100%; padding:7px 9px; font-size:.82rem; border:1px solid var(--svx-line); border-radius:4px; background:var(--svx-bg); color:var(--svx-ink); font-family:inherit; box-sizing:border-box; }
.ticker-input:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 2px rgba(124,58,237,.12); }
.ticker-input-title { font-weight:600; font-size:.95rem; }
.ticker-input-subtitle { font-weight:500; font-size:.85rem; }
.ticker-input-body { font-weight:400; resize:vertical; min-height:60px; }
.ticker-input-mini { width:auto; padding:5px 7px; font-size:.78rem; }
.ticker-opt-label { font-size:.74rem; color:var(--svx-mute); margin-right:6px; }
.ticker-bg-picker { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; flex-shrink:0; }
.ticker-bg-swatch { display:inline-block; width:24px; height:24px; flex:0 0 24px; padding:0; margin:0; border:0; background:transparent; border-radius:50%; cursor:pointer; position:relative; box-sizing:border-box; vertical-align:middle; line-height:0; font-size:0; transition:transform .1s ease, box-shadow .15s ease; }
.ticker-bg-swatch input { position:absolute; left:-9999px; opacity:0; pointer-events:none; width:0; height:0; }
.ticker-bg-swatch > span { position:absolute; inset:0; display:block; border-radius:50%; border:1px solid rgba(0,0,0,.18); box-sizing:border-box; background:var(--tk-color, transparent); }
.ticker-bg-swatch:hover { transform:scale(1.12); }
.ticker-bg-swatch:has(input:checked) > span { box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #1e293b; }
.ticker-bg-swatch:has(input:checked)::after { content:"\2713"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.72rem; font-weight:900; line-height:1; text-shadow:0 0 2px rgba(0,0,0,.55); pointer-events:none; }
.ticker-time-label { display:flex; align-items:center; gap:6px; font-size:.74rem; color:var(--svx-mute); }
.ticker-time-label span { flex-shrink:0; }
.ticker-card-actions { display:flex; gap:8px; justify-content:flex-end; padding-top:8px; border-top:1px solid var(--svx-line); margin-top:4px; }
/* ── 티커 카드 하단 미리보기(16:9 모니터 박스) ── */
.ticker-preview { margin-top:14px; }
.tp-monitor { aspect-ratio:16/9; background:#f0f0f0; border:1px solid var(--svx-line); border-radius:6px; position:relative; overflow:hidden; box-shadow:inset 0 0 0 3px #d0d0d0; }
[data-theme="dark"] .tp-monitor { background:#343434; box-shadow:inset 0 0 0 3px #4a4a4a; }
.tp-tk { background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.2); overflow:hidden; box-sizing:border-box; }
/* 일반 — 좌측 하단 미니 박스 */
/* 실제 360px / 1920px viewport ≒ 19% width. 박스 비율 1.2:1 (360x300) 유지. */
.tp-tk-normal { position:absolute; left:2.5%; bottom:5%; width:23%; border-radius:3px; box-shadow:0 3px 8px rgba(0,0,0,.25); }
.tp-tk-normal .tp-header { padding:3px 5px; }
.tp-tk-normal > .tp-header { font-size:.42rem; }
.tp-tk-normal .tp-body { padding:5px 6px 6px; }
.tp-tk-normal .tp-subtitle { font-size:.42rem; line-height:1.2; }
.tp-tk-normal .tp-text { font-size:.36rem; line-height:1.2; }
/* 일반 티커 버튼 — 1개=꽉채움 / 2개=균등 분배 (실제 .svx-tk-btn 의 flex:1 규칙 반영) */
.tp-tk-normal .tp-buttons { display:flex; gap:3px; margin-top:3px; }
.tp-tk-normal .tp-buttons[data-count="1"]::before, .tp-tk-normal .tp-buttons[data-count="2"]::before, .tp-tk-normal .tp-buttons[data-count="2"]::after { flex:1; padding:2px 4px; font-size:.34rem; box-sizing:border-box; text-align:center; }
/* 미리보기 푸터 — 일반: 좌우 분할 / top·bottom: 우측 inline 적용 */
.tp-footer { font-size:.32rem; color:#888; }
.tp-tk-normal .tp-footer { display:grid; grid-template-columns:1fr 1fr; background:#f5f5f5; border-top:1px solid rgba(0,0,0,.08); }
.tp-tk-normal .tp-footer .tp-foot-btn { padding:3px 4px; text-align:center; }
.tp-tk-normal .tp-footer .tp-foot-btn:first-child { border-right:1px solid rgba(0,0,0,.08); }
.tp-tk-top .tp-footer, .tp-tk-bottom .tp-footer { display:flex; flex-shrink:0; gap:0; font-size:.4rem; }
.tp-tk-top .tp-footer .tp-foot-btn, .tp-tk-bottom .tp-footer .tp-foot-btn { padding:2px 5px; text-align:center; }
.tp-tk-top .tp-footer .tp-foot-btn:first-child, .tp-tk-bottom .tp-footer .tp-foot-btn:first-child { border-right:1px solid rgba(0,0,0,.15); }
/* 상단 — 가로 풀 */
.tp-tk-top { position:absolute; top:4px; left:4px; right:4px; height:13%; display:flex; align-items:center; gap:6px; padding:0 6px; }
/* 하단 — 가로 풀 */
.tp-tk-bottom { position:absolute; bottom:4px; left:4px; right:4px; height:13%; display:flex; align-items:center; gap:6px; padding:0 6px; }
/* 헤더 (타이틀) */
.tp-header { background:var(--tk-color, #191970); color:#fff; padding:4px 7px; font-weight:700; font-size:.55rem; line-height:1.2; text-align:center; }
.tp-tk-top .tp-header, .tp-tk-bottom .tp-header { padding:2px 8px; border-radius:99px; flex-shrink:0; font-size:.5rem; }
/* 본문 */
.tp-body { padding:5px 7px; }
.tp-tk-top .tp-body, .tp-tk-bottom .tp-body { padding:0; flex:1; min-width:0; display:flex; align-items:center; gap:5px; }
.tp-subtitle { font-weight:600; font-size:.5rem; line-height:1.2; color:#1a1a1a; }
.tp-text { font-weight:400; font-size:.45rem; line-height:1.2; color:#666; margin-top:1px; }
.tp-tk-top .tp-text, .tp-tk-bottom .tp-text { margin-top:0; }
/* 버튼 개수 표시 (data-count 1 또는 2) */
.tp-buttons { display:flex; gap:3px; margin-top:4px; }
.tp-tk-top .tp-buttons, .tp-tk-bottom .tp-buttons { margin:0; flex-shrink:0; }
.tp-buttons[data-count="1"]::before, .tp-buttons[data-count="2"]::before { content:"버튼"; padding:2px 7px; border:1px solid #ccc; border-radius:3px; font-size:.45rem; color:#888; }
.tp-buttons[data-count="2"]::after { content:"버튼"; padding:2px 7px; border:1px solid #ccc; border-radius:3px; font-size:.45rem; color:#888; margin-left:2px; }
/* ── 설정 · 이미지 정책 카드 ── */
.ip-flash { padding:12px 16px; margin:0 0 14px; border-radius:8px; font-size:0.9rem; font-weight:500; }
.ip-flash.is-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.ip-flash.is-error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.ip-hint { margin:0 0 18px; padding:12px 14px; background:#f8fafc; border-radius:8px; color:#475569; font-size:0.875rem; line-height:1.6; }
.ip-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap:14px; margin:0 0 22px; }
.ip-card { padding:18px 20px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; transition:border-color .16s; }
.ip-card:hover { border-color:#cbd5e1; }
.ip-card-head { display:flex; align-items:center; gap:8px; margin:0 0 6px; }
.ip-card-head i { color:var(--svx-primary, #7c3aed); font-size:1.2em; }
.ip-card-head h4 { margin:0; flex:1; font-size:1rem; font-weight:700; color:#0f172a; }
.ip-card-head .ip-kind { padding:2px 8px; background:#f1f5f9; border-radius:4px; font-size:0.75rem; color:#64748b; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.ip-card-desc { margin:0 0 14px; color:#64748b; font-size:0.8125rem; line-height:1.55; }
.ip-fields { display:flex; flex-direction:column; gap:10px; }
.ip-field { display:flex; flex-direction:column; gap:4px; margin:0; padding:0; }
.ip-field-label { font-size:0.8125rem; color:#475569; font-weight:500; }
.ip-field input[type="number"] { width:100%; padding:8px 12px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.9rem; font-variant-numeric:tabular-nums; }
.ip-field input[type="number"]:focus { outline:none; border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,0.1); }
.ip-field-hint { color:#64748b; font-size:0.7375rem; }
.ip-field-toggle { flex-direction:row; align-items:center; gap:8px; cursor:pointer; padding:6px 0; }
.ip-field-toggle input[type="checkbox"] { width:16px; height:16px; margin:0; accent-color:#7c3aed; cursor:pointer; }
.ip-field-toggle .ip-field-label { font-size:0.8125rem; color:#0f172a; font-weight:500; }
.ip-actions { padding-top:16px; border-top:1px solid #f1f5f9; display:flex; justify-content:flex-end; gap:10px; }
.ip-readonly { color:#64748b; font-size:0.875rem; font-style:italic; }
/* ── 7DEX 유틸 ── */
/* 색상 (= 디자인 토큰 정본) */
.sdx-text-strong { color:#5b21b6; }
.sdx-text-primary { color:#7c3aed; }
.sdx-text-inherit { color:inherit; }
.sdx-text-mute-666 { color:#666; }
.sdx-text-mute-888 { color:#888; }
.sdx-text-strong-bold { color:#5b21b6; font-weight:600; }
/* table cell */
.sdx-td { padding:.4rem; vertical-align:top; }
.sdx-td-left { padding:.4rem; text-align:left; }
.sdx-th { padding:.4rem; }
.sdx-th-meta { text-align:left; padding:.3rem .4rem; font-size:.75rem; color:#888; }
/* meta text */
.sdx-meta-666 { margin:.4rem 0 0; font-size:.85rem; color:#666; }
.sdx-meta-888 { margin:.5rem 0 0; font-size:.75rem; color:#888; }
.sdx-meta-inline { font-size:.8125rem; color:#888; margin:0; }
.sdx-meta-block-line { margin:.6rem 0 0; font-size:.8125rem; color:#888; line-height:1.6; }
.sdx-meta-block-75 { margin:.6rem 0 0; font-size:.75rem; color:#888; }
.sdx-meta-block-66 { margin:.5rem 0 0; font-size:.85rem; color:#666; }
/* list */
.sdx-ul-padded { margin:.5rem 0 0; padding-left:1.4rem; }
/* form margin */
.sdx-m-0 { margin:0; }
.sdx-mb-h { margin:0 0 .5rem; font-size:.95rem; }
.sdx-mb-h-sm { margin:0 0 .5rem; font-size:.85rem; }
.sdx-mb-tight { margin:0 0 .3rem; }
/* display */
.sdx-inline { display:inline; }
.sdx-link-clean { text-decoration:none; line-height:1; }
.sdx-btn-pad { padding:10px 22px; }
.sdx-fs-80 { font-size:.8rem; }
/* 일반 관리자 페이지 (= popup / setting / member / dashboard / ticker / page / log / post) utility */
.sdx-mt-0 { margin-top:0; }
/* .sdx-mb-0 — 짝인 .sdx-mt-0 · .sdx-m-0 은 있는데 이것만 빠져 있어 두 화면의 제목 아래 여백이 안 지워졌다. 화면으로는 «조금 벌어졌네» 정도라 안 잡히는 부류다(유령 클래스). */
.sdx-mb-0 { margin-bottom:0; }
.sdx-mt-14 { margin-top:14px; }
.sdx-mb-8 { margin-bottom:.8rem; }
.sdx-input-full { width:100%; padding:.5rem; }
.sdx-btn-sm { padding:6px 12px; font-size:.8rem; }
.sdx-text-mute-normal { color:var(--svx-mute); font-weight:400; }
.sdx-text-mute-sm { color:var(--svx-mute); font-size:.75rem; }
.sdx-text-mute-icon { font-size:.78rem; color:var(--svx-mute); white-space:nowrap; }
.sdx-text-slate { color:#94a3b8; }
.sdx-text-888-normal { color:#888; font-weight:400; }
.sdx-text-meta-sm { color:#64748b; font-size:0.8125rem; }
.sdx-text-red { color:var(--svx-error); font-weight:600; }
.sdx-icon-violet { font-size:1.4em; color:#7c3aed; }
.sdx-meta-13 { margin:10px 0 0; font-size:13px; line-height:1.6; }
.sdx-pad-8 { padding:8px; }
.sdx-pad-td-left { padding:8px; text-align:left; }
.sdx-pad-td-right { padding:.4rem; text-align:right; }
.sdx-nowrap { white-space:nowrap; }
.sdx-text-center { text-align:center; }
.sdx-flex-1 { flex:1; }
.sdx-hidden { display:none; }
.sdx-label-large { display:block; font-size:0.95rem; }
.sdx-code-block { display:block; padding:8px 12px; margin-top:6px; background:#23262c; color:#34d399; border-radius:4px; }
.sdx-quick-card { display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff; border:1px solid #e2e8f0; border-radius:8px; text-decoration:none; color:#0f172a; transition:border-color .16s, transform .16s; }
.sdx-quick-card:hover { border-color:var(--svx-primary); transform:translateY(-1px); }
.sdx-empty-state { text-align:center; padding:32px 16px; color:var(--svx-mute); }
/* SETTING — 점검(유지보수) 모드 폼 */
.svndex-maint-form { display:flex; flex-direction:column; gap:14px; }
.svndex-maint-toggle { display:flex; align-items:center; gap:9px; font-weight:600; cursor:pointer; }
.svndex-maint-toggle input { width:17px; height:17px; accent-color:var(--svx-primary); cursor:pointer; }
.svndex-maint-msg { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.9rem; }
.svndex-maint-msg textarea { width:100%; padding:9px 11px; border:1px solid #e2e8f0; border-radius:8px; font:inherit; font-weight:400; resize:vertical; }
.svndex-maint-msg textarea:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
/* SETTING — DB 내보내기 카테고리 체크 */
/* §2026-09-25 — 6항목이 4열이면 둘째 줄이 반만 찼다 → 최대 3열(넓으면 3+3, 좁으면 2+2+2, 폰 1열). */
.svndex-export-cats { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, max(260px, calc((100% - 16px) / 3))), 1fr)); gap:8px; margin-bottom:14px; }
.svndex-export-cat { display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border:1px solid var(--svx-line); border-radius:9px; cursor:pointer; transition:border-color .14s ease, background .14s ease; }
.svndex-export-cat:hover { border-color:var(--svx-primary); background:var(--svx-bg-alt); }
.svndex-export-cat input { margin-top:2px; }
.svndex-export-cat-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.svndex-export-cat-label { font-weight:600; font-size:.92rem; }
.svndex-export-cat-note { color:var(--svx-mute); font-size:.76rem; }
.svndex-export-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
/* SETTING — 권한 매트릭스 상단 헤더(설명 + 저장 버튼) */
.svndex-matrix-top { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.svndex-matrix-top-desc { flex:1 1 auto; margin:0; }
.svndex-matrix-save-top { flex:0 0 auto; width:auto; min-width:0; align-self:center; padding:8px 22px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:.9rem; }
@media (max-width:680px) { .svndex-matrix-top { flex-direction:column; align-items:stretch; } .svndex-matrix-save-top { align-self:flex-end; } }
/* 추가 단일 패턴 */
.sdx-mb-1rem-666 { margin-bottom:1rem; color:#666; }
.sdx-meta-line-empty { margin:.4rem 0 0; min-height:1.1em; font-size:.85rem; }
.sdx-mt-1rem { margin-top:1rem; }
.sdx-mt-1rem-meta { margin-top:1rem; font-size:.85rem; color:#888; }
.sdx-mt-15rem { margin-top:1.5rem; }
.sdx-fs-8125-888 { font-size:.8125rem; color:#888; }
.sdx-opacity-50 { opacity:.5; }
.sdx-bg-violet { background:#7c3aed; }
.sdx-pad-14 { padding:14px; }
.sdx-empty-60 { text-align:center; padding:60px; color:#6b7280; }
.sdx-fs-75 { font-size:.75rem; }
.sdx-text-mute-only { color:var(--svx-mute); }
.sdx-code-err { color:#c00; font-size:20px; }
.sdx-flex-stretch { display:flex; gap:.5rem; align-items:stretch; }
.sdx-axis-row { display:flex; justify-content:space-between; font-size:10px; color:var(--svx-mute); margin-top:6px; }
/* width / height — 단일 사용 패턴 일괄 */
.sdx-w-100p { width:100%; }
.sdx-w-75p { width:75%; }
.sdx-w-55p { width:55%; }
.sdx-w-40p { width:40%; }
.sdx-w-30p { width:30%; }
.sdx-w-15p { width:15%; }
/* 회원가입 항목 정책 표 — 컨트롤 열은 내용에 맞춘 고정폭, 남는 폭은 «항목» 이 흡수. 표가 관리자 폭 전체로 늘어나 성기어 보이던 것을 멈춘다. */
.svndex-signup-tbl { max-width:1040px; }
.svndex-signup-tbl th:nth-child(2), .svndex-signup-tbl td:nth-child(2) { width:78px; }
.svndex-signup-tbl th:nth-child(3), .svndex-signup-tbl td:nth-child(3) { width:190px; }
.svndex-signup-tbl th:nth-child(4), .svndex-signup-tbl td:nth-child(4) { width:112px; }
.svndex-signup-tbl th:nth-child(5), .svndex-signup-tbl td:nth-child(5) { width:250px; }
.svndex-signup-tbl th { white-space:nowrap; }
.svndex-signup-tbl td:nth-child(3) label { white-space:nowrap; }
.svndex-signup-tbl td:nth-child(5) label { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; margin:4px 0 0; font-size:.8125rem; color:var(--svx-mute); }
.sdx-w-60 { width:60px; }
.sdx-w-56 { width:56px; }
.sdx-w-auto { width:auto; }
.sdx-h-42 { height:42px; line-height:22px; }
/* padding 변종 */
.sdx-pad-h-09 { white-space:nowrap; padding:0 .9rem; }
.sdx-pad-5-1 { padding:.5rem 1rem; }
.sdx-pad-5 { padding:.5rem; }
.sdx-pad-9-1-mb0 { padding:.9rem 1rem; margin-bottom:0; }
.sdx-pad-8-18 { padding:8px 18px; font-size:.9rem; width:auto; }
.sdx-pad-link-18 { text-decoration:none; line-height:1; padding:10px 18px; }
.sdx-pad-block { display:inline-block; padding:10px 20px; }
.sdx-btn-violet-large { display:inline-block; padding:10px 20px; background:#7c3aed; color:#fff; text-decoration:none; border-radius:6px; font-weight:600; }
.sdx-link-block { display:inline-block; padding:.7rem 1.4rem; text-decoration:none; }
/* margin 변종 */
.sdx-mr-14 { margin-right:14px; }
.sdx-mt-04 { margin-top:.4rem; }
.sdx-mt-12rem { margin-top:1.2rem; }
.sdx-mt-12 { margin-top:12px; }
/* §2026-09-25 — 마크업이 쓰는데 정의가 없던 유틸(유령 클래스 §12-53). 여백이 0 이 되어 위 요소에 붙어 있었다. */
.sdx-mt-6 { margin-top:6px; }
.sdx-mt-8 { margin-top:8px; }
.sdx-mt-10 { margin-top:10px; }
.sdx-mt-20 { margin-top:20px; }
.sdx-mt-1rem-666 { margin-top:1rem; color:#666; }
.sdx-w-full { width:100%; }
.sdx-mt-15rem-meta { margin-top:1.5rem; color:#888; font-size:.85rem; }
.sdx-mt-8-94 { margin-top:8px; font-size:.9375rem; }
.sdx-mt-rule-card { margin-top:14px; padding:14px 18px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:8px; }
.sdx-mb-2rem { margin-bottom:2rem; }
.sdx-mb-20 { margin-bottom:20px; }
.sdx-mb-1rem-only { margin-bottom:1rem; }
.sdx-mb-16 { margin-bottom:16px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sdx-mb-14 { margin-bottom:14px; }
.sdx-mb-10 { margin-bottom:10px; }
.sdx-mb-15rem { margin-bottom:1.5rem; }
.sdx-mb-8-888-9 { margin-bottom:.8rem; color:#888; font-size:.9rem; }
.sdx-mt-rule { margin-top:14px; padding:14px 18px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:8px; }
/* margin 0 0 X 지정된 변종 */
.sdx-m-0-9375-mute { margin:0 0 14px; font-size:.9375rem; color:var(--svx-mute); }
.sdx-m-0-12 { margin:0 0 12px; }
.sdx-m-0-95-ink { margin:0 0 10px; font-size:.95rem; color:var(--svx-ink); }
.sdx-m-0-8 { margin:0 0 .8rem; }
.sdx-m-0-8-95 { margin:0 0 .8rem; font-size:.95rem; }
.sdx-m-0-8-666 { margin:0 0 .8rem; font-size:.8rem; color:#666; }
.sdx-m-0-8-line { margin:0 0 .8rem; font-size:.8125rem; color:#666; line-height:1.6; }
.sdx-m-0-5-error { margin:0 0 .5rem; font-size:.9rem; color:#c0392b; }
.sdx-m-0-3-95 { margin:0 0 .3rem; font-size:.95rem; }
.sdx-m-0-3-85 { margin:0 0 .3rem; font-size:.85rem; }
.sdx-m-0-3-75-mute { margin:0 0 .3rem; font-size:.75rem; color:#888; }
.sdx-m-0-16-mute-line { margin:0 0 16px; color:var(--svx-mute); font-size:.92rem; line-height:1.6; }
.sdx-m-0-8px-flex { margin:0 0 8px; font-size:1.1rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.sdx-m-8-0-0-12 { margin:8px 0 0; font-size:12px; color:var(--svx-mute); }
.sdx-m-4-0-0-94-666 { margin:4px 0 0; font-size:.9375rem; color:#666; }
.sdx-m-1rem-mute { margin:1rem 0 0; font-size:.8rem; color:#888; }
.sdx-m-16-0-0-8125 { margin:16px 0 0; font-size:.8125rem; color:#888; }
.sdx-m-12-0-0-rule { margin:12px 0 0; padding:10px 14px; background:var(--svx-bg-alt); border-radius:6px; font-size:.8rem; color:var(--svx-mute); line-height:1.6; }
.sdx-m-12-0-0-85 { margin:12px 0 0; font-size:.85rem; }
.sdx-m-10-0-0-mute { margin:10px 0 0; font-size:.8125rem; color:#888; }
.sdx-m-15rem-0-8 { margin:1.5rem 0 .8rem; }
.sdx-m-rule-pad-list { margin:0; padding-left:20px; font-size:.9rem; color:var(--svx-mute); line-height:1.8; }
.sdx-m-0-8rem-meta { margin:0; font-size:.8rem; color:#888; }
.sdx-m-0-85 { margin:0; font-size:.85rem; }
.sdx-m-0-8125 { margin:0; font-size:.8125rem; color:#888; }
.sdx-m-0-7 { margin:0; font-size:.7rem; color:#888; }
.sdx-m-6-0-0-7 { margin:.6rem 0 0; font-size:.7rem; color:#888; }
.sdx-m-6-0-0-75 { margin:.6rem 0 0; font-size:.75rem; }
.sdx-m-6-0-8 { margin:.6rem 0 .8rem; padding:.8rem 1rem; font-size:.8rem; }
.sdx-m-8-0-4 { margin:.8rem 0 .4rem; padding:.7rem .9rem; font-size:.8rem; }
.sdx-m-4-0-1 { margin:.4rem 0 1rem; font-size:.85rem; color:#666; }
/* text-align */
.sdx-text-right { text-align:right; }
.sdx-text-right-mt12 { text-align:right; margin-top:12px; }
.sdx-empty-40 { text-align:center; padding:40px; color:#6b7280; }
.sdx-empty-32 { text-align:center; padding:32px 16px; color:var(--svx-mute); }
.sdx-empty-mute-24 { color:var(--svx-mute); padding:24px 0; }
.sdx-text-center-1rem { text-align:center; padding:1rem 0; }
.sdx-text-center-24 { text-align:center; margin:24px 0; }
.sdx-text-center-mute { text-align:center; color:#888; }
/* display / position */
/* 가로스크롤 래퍼 — 다컬럼 표를 압착하지 않고 이 래퍼만 밀어 페이지 전체 가로스크롤을 막는다. ⚠️ 마크업에 반드시 `tabindex="0"` 을 함께 줄 것 — 스크롤 컨테이너가 포커스를 못 받으면 키보드 사용자는 넘치는 칼럼에 접근할 수단이 아예 없다(WCAG 2.1.1). 새 래퍼를 추가할 때도 동일하게. 포커스 링은 :focus-visible 로만 표시해 마우스 사용자에게는 변화가 없다. */
.sdx-overflow-x { overflow-x:auto; }
.sdx-overflow-x:focus { outline:none; }
.sdx-overflow-x:focus-visible { outline:2px solid var(--svx-primary, #7c3aed); outline-offset:2px; border-radius:4px; }
.sdx-opacity-55 { opacity:.55; }
.sdx-pos-absurd-hidden { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.sdx-display-inline-ml { display:inline; margin-left:4px; }
.sdx-flex-clickable { display:flex; align-items:center; gap:.5rem; cursor:pointer; flex:1; min-width:0; }
.dx-info-row:has(> .sdx-flex-clickable) { gap:.6rem; }
.dx-info-row > .sdx-flex-clickable > span { overflow-wrap:anywhere; }
/* §2026-09-25 — 긴 봇 이름(SERankingBacklinksBot 등)이 허용/차단 알약에 0~3px 로 붙었다 */
.sdx-flex-gap-6 { display:flex; gap:6px; }
.sdx-flex-justify-between { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.sdx-flex-axis-4 { display:flex; justify-content:space-between; font-size:10px; color:var(--svx-mute); margin-top:4px; }
.sdx-grid-4col { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.sdx-grid-3col { display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem; margin-bottom:1rem; }
@media (max-width:560px) { .sdx-grid-3col { grid-template-columns:minmax(0, 1fr); } }
.sdx-grid-2col-tight { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sdx-grid-flex-cards { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%),1fr)); gap:10px; }
.sdx-grid-flex-cards-sm { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.5rem; }
.sdx-line-1-4 { line-height:1.4; }
.sdx-justify-end { justify-content:flex-end; }
.sdx-justify-end-mt { justify-content:flex-end; margin-top:16px; }
.sdx-justify-center { justify-content:center; }
.sdx-label-mb-violet { display:block; margin-bottom:.5rem; color:#5b21b6; }
.sdx-label-flex-meta { display:block; flex:1 0 100%; margin-top:4px; font-size:.78rem; color:var(--svx-mute); text-align:right; }
.sdx-label-mb-6 { display:block; margin-bottom:6px; }
/* color 단일 */
.sdx-text-primary-link { color:var(--svx-primary); text-decoration:none; }
.sdx-text-mute-11 { color:var(--svx-mute); font-size:11px; }
.sdx-text-999 { color:#999; }
.sdx-text-888-italic { color:#888; font-style:italic; }
.sdx-text-888-italic-m0 { color:#888; font-style:italic; margin:0; }
.sdx-text-888-1rem-pad { color:#888; font-size:1rem; padding:8px 0; }
.sdx-text-888-9 { color:#888; font-size:.9rem; }
.sdx-text-888-8125 { color:#888; font-size:.8125rem; }
.sdx-text-888-block { color:#888; display:block; margin-top:.5rem; }
.sdx-text-success { color:#1a7c4a; font-weight:500; }
.sdx-text-primary-9 { color:#7c3aed; font-size:.9375rem; }
.sdx-text-primary-800-sm { color:#5b21b6; font-size:.8rem; }
.sdx-text-mute-italic { font-weight:400; color:#888; font-size:.8rem; }
.sdx-text-374 { font-size:13px; color:#374151; line-height:1.6; }
/* font size 단일 */
.sdx-fs-11 { font-size:11px; }
.sdx-fs-72 { font-size:.72rem; }
.sdx-fs-105-mb12 { font-size:1.05rem; margin-bottom:1.2rem; }
.sdx-fs-14-letter { font-size:1.4rem; letter-spacing:.4em; text-align:center; }
.sdx-fs-8-888 { font-size:.8rem; color:#888; }
.sdx-fs-8125-888-mt14 { font-size:.8125rem; color:#888; margin:14px 0 0; }
.sdx-fs-8125-888-m6 { font-size:.8125rem; color:#888; margin:.6rem 0 0; }
.sdx-fs-75-888-normal { font-size:.75rem; color:#888; font-weight:400; }
.sdx-fs-11-9ca { font-size:11px; color:#6b7280; margin-top:24px; }
.sdx-fs-115-mute-mt { font-size:11.5px; color:var(--svx-mute); margin:8px 0 0; }
.sdx-fs-105-mute-mt { font-size:10.5px; color:var(--svx-mute); margin:6px 0 0; }
.sdx-input-sm-btn { font-size:11px; padding:3px 8px; color:#dc2626; border-color:#fca5a5; }
.sdx-input-sm-border { font-size:11.5px; padding:3px 6px; border:1px solid var(--svx-line); border-radius:4px; }
.sdx-rule-card-soft { border:1px solid var(--svx-line); border-radius:8px; padding:10px; }
.sdx-rule-card-info { background:var(--svx-bg-alt); border:1px solid var(--svx-line); border-radius:8px; padding:14px 16px; font-size:.9rem; line-height:1.7; }
/* small mini pill 정적 색 지정 = utility */
.sdx-pill-amber { background:#d97706; color:#fff; }   /* §2026-10-13 대표님 «주의 뱃지는 글씨가 흰색이어야 보인다» — 흰 글자 + 바탕 한 단계 진하게(#f59e0b 위 흰 글자는 2.2:1 · 이 바탕 3.2:1). 종전 10-12 = 진한 갈색 글자 · 밝게/어둡게 같은 알약 */
.sdx-pill-red { background:#dc2626; color:#fff; }
.sdx-pill-gray { background:#9ca3af; color:#fff; }
.sdx-pill-emerald { background:#10b981; color:#fff; }
.sdx-bg-card-soft { background:#f5f5f7; }
.sdx-bg-card-light { background:#f3f3f6; }
.sdx-bg-card-soft-row { background:#f3f3f6; }
.sdx-flex-1-pad { flex:1; padding:.5rem; }
.sdx-w-narrow-mono { width:100%; padding:8px 10px; border:1px solid var(--svx-line); border-radius:6px; font-size:12.5px; }
.sdx-color-swatch { display:inline-block; width:14px; height:14px; border-radius:3px; border:1px solid #cbd5e1; vertical-align:middle; }
/* CWV 카드 지표 값 (cwv.php 인라인 style 이전 — 2026-07-09) */
.cwv-metric-val { margin:0 0 .3rem; font-size:1.5rem; font-weight:700; }
.cwv-metric-val.is-unknown { color:#888; }
.cwv-metric-val.is-ok { color:#1a7c4a; }
.cwv-metric-val.is-bad { color:#c0392b; }
/* STATISTICS 셋업 위저드 (setting/statistics.php <style> 블록 이전 — 2026-07-09) */
.stat-setup-form { padding:14px; background:var(--svx-card); border:1px solid var(--svx-line); border-radius:10px; margin-bottom:18px; }
.stat-setup-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
/* §2026-09-25 칸 3개(담당자·이메일·전화)를 2열에 놓아 「전화」가 혼자 남았다 → 한 줄 3칸 */
.stat-setup-form .stat-setup-grid + .stat-field { margin-top:12px; }
/* 위 칸 사이 간격과 같게 */
.stat-callout-info .stat-form-actions + .stat-meta { margin-top:14px; }
/* 버튼 줄에 붙어 보였다(6px) */
@media (max-width:760px) { .stat-setup-grid { grid-template-columns:minmax(0, 1fr); } }
.stat-field { display:flex; flex-direction:column; gap:6px; }
.stat-field-label { font-size:13px; color:var(--svx-ink); font-weight:500; }
.stat-field-label small { font-weight:400; color:var(--svx-mute); margin-left:4px; }
.stat-field input, .stat-field textarea { padding:9px 12px; border:1px solid var(--svx-line); border-radius:6px; font-size:14px; font-family:inherit; }
.stat-field input:focus, .stat-field textarea:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.stat-form-actions { display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
/* 폼 필드 간 여백. 종전 sdx-mt-10(10px)은 위 입력칸과 아래 라벨이 붙어 보였다. */
.sdx-mt-16 { margin-top:16px; }
/* 비활성 입력 — 왜 못 쓰는지 옆 문구로 알리므로, 여기서는 "지금은 못 쓴다"만 분명히 보이면 된다. */
.stat-field input:disabled, .stat-field textarea:disabled { background:var(--svx-bg-alt); color:var(--svx-mute); cursor:not-allowed; }
.stat-field input:disabled::placeholder, .stat-field textarea:disabled::placeholder { color:#b6bcc6; }
.stat-btn:disabled { opacity:.5; cursor:not-allowed; }
/* SMTP 미설정 안내 — 버튼 옆 보라색(브랜드) 문구 */
.qna-smtp-notice { font-size:13px; font-weight:600; color:var(--svx-primary); }
.stat-wizard-list { display:flex; flex-direction:column; gap:8px; padding:14px; background:var(--svx-bg-alt); border:1px dashed var(--svx-line); border-radius:8px; margin-bottom:18px; }
.stat-wizard-step { font-size:13px; line-height:1.6; color:var(--svx-ink); }
.stat-wizard-step strong { display:inline-block; width:22px; color:var(--svx-primary-d); }
/* 셋업 도움 요청 목록(S 전용, setting/statistics.php) */
.stat-help-list { list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:10px; }
.stat-help-item { padding:10px 14px; border:1px solid var(--svx-line); border-left:3px solid #cbd5e1; border-radius:8px; background:var(--svx-card); }
.stat-help-item.is-open { border-left-color:#ef4444; }
.stat-help-item.is-in_progress { border-left-color:#f59e0b; }
.stat-help-item.is-closed { border-left-color:#22c55e; }
.stat-help-item-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:4px; }
.stat-help-item-msg { margin:4px 0 8px; font-size:.875rem; color:var(--svx-ink); white-space:pre-wrap; }
/* svx-rpt 리포트 정적 인라인 style 이전 (aichat/admin/report.php — 2026-07-09) */
.svx-rpt-strong { font-weight:600; }
.svx-rpt-kpi-val.is-lg { font-size:1.5rem; }
.svx-rpt-mt-lg { margin-top:1.2rem; }
.svx-rpt-subject.is-hint { margin:0 0 .8rem; font-size:.86rem; }
.svx-rpt-warn-ico { color:var(--svx-warn); margin-right:.35em; }
.svx-rpt-count { font-weight:400; color:var(--svx-mute); }
@media (max-width: 768px) { .svndex-auth-shell { padding:16px; } .svndex-auth-form { padding:32px 20px; border-radius:10px; } .svndex-auth-form h1 { font-size:1.25rem; margin-bottom:20px; } .svndex-auth-form:has(.svndex-mypage-grid) { padding:28px 20px; } .svndex-auth-form:has(.svndex-mypage-grid) > h1 { padding-bottom:16px; margin-bottom:22px; } .svndex-mypage-grid { grid-template-columns:minmax(0, 1fr); gap:24px; } .svndex-mypage-section-title { font-size:1rem; } .svndex-mypage-section-spaced { margin-top:24px; } .svndex-mypage-row { flex-direction:column; gap:8px; } .svndex-admin-shell { flex-direction:column; height:auto; overflow:visible; } .svndex-admin-sidebar { width:100%; padding:0; overflow-y:visible; } .svndex-admin-sidebar-top { flex-direction:row; align-items:center; justify-content:space-between; padding:8px 14px; border-bottom:1px solid #2a2d34; } .svndex-admin-sidebar-brand { height:auto; padding:0; border-bottom:0; margin: 0; text-align:center; flex-shrink:0; } .svndex-admin-sidebar-brand small { display:inline; margin:0 0 0 5px; font-size:.7rem; vertical-align:middle; } .svndex-admin-sidebar-user { display:flex; align-items:center; gap:5px; } .svndex-admin-sidebar-user .svndex-admin-user-link { padding:3px 6px; } .svndex-admin-sidebar-user .svndex-admin-user-name { font-size:.8rem; color:#dde; } .svndex-admin-sidebar-user .svndex-admin-user-badge { min-width:17px; height:17px; padding:0 5px; font-size:.6rem; } .svndex-admin-sidebar-user .svndex-admin-user-sep { color:#556; font-size:.75rem; } .svndex-admin-sidebar-user button:not(.svndex-theme-toggle):not(.svndex-logout-icon) { padding:3px 8px; font-size:.8rem; color:#f87171; } .svndex-admin-sidebar-user .svndex-theme-toggle, .svndex-admin-sidebar-user .svndex-logout-icon { width:18px; height:18px; padding:0; } .svndex-admin-sidebar-user .svndex-theme-toggle .ph, .svndex-admin-sidebar-user .svndex-logout-icon .ph { font-size:.7rem; } .svndex-admin-sidebar-user form { display:inline; } .svndex-admin-user { display:none; } .svndex-admin-menu-wrap { position:relative; } .svndex-menu-arrow { display:flex; position:absolute; top:0; bottom:0; width:34px; border:0; color:#aab; font-size:1.1rem; cursor:pointer; opacity:0; transition:opacity .2s; z-index:2; pointer-events:none; align-items:center; justify-content:center; padding:0; } .svndex-menu-arrow--left { left:0; justify-content:flex-start; padding-left:8px; background:linear-gradient(to right,#1a1d24 62%,rgba(26,29,36,0)); } .svndex-menu-arrow--right { right:0; justify-content:flex-end; padding-right:8px; background:linear-gradient(to left, #1a1d24 62%,rgba(26,29,36,0)); } .svndex-menu-arrow.is-visible { opacity:1; pointer-events:auto; } .svndex-admin-menu { display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; gap:2px; padding:6px 36px; scrollbar-width:none; } .svndex-admin-menu::-webkit-scrollbar { display:none; } .svndex-admin-menu-item { scroll-snap-align:center; flex-shrink:0; } .svndex-admin-menu-sep { width:1px; height:18px; margin:0 6px; align-self:center; flex-shrink:0; } .svndex-admin-menu-item a { padding:6px 12px; font-size:.875rem; border-radius:4px; white-space:nowrap; } .svndex-admin-main { padding:16px 18px; /* ⚠️⚠️ 이 두 줄을 빼지 말 것 — 빼면 **본문에서 휠이 통째로 안 먹는다**(실사고 §12-87). 이 블록이 셀을 `height:auto; overflow:visible` 로 바꿔 **문서가 스크롤 주체**가 되는데, main 은 PC용 `overflow:auto` + `overscroll-behavior:contain`(106줄)을 그대로 가지고 있었다. main 은 셀이 auto 라 높이가 내용만큼(clientH == scrollH) — 즉 **스크롤할 게 없는데** `contain` 이 부모로 넘기는 것까지 막아 휠이 그 자리에서 죽는다. */ overflow:visible; overscroll-behavior:auto; } .svndex-admin-header { flex-direction:column; align-items:flex-start; gap:10px; padding-bottom:12px; margin-bottom:16px; } .svndex-admin-header h1 { font-size:1.15rem; } .dx-quick { grid-template-columns:minmax(0, 1fr); } .svndex-acc-buttons { right:12px; bottom:12px; } .svndex-acc-btn { width:44px; height:44px; } }
/* ── SCHEDULE (일정공지 달력) — 2026-07-11 ── */
.svndex-schedule .sch-main { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr); gap:20px; align-items:stretch; }
/* 좌 달력 열 = 우 옵션열 높이에 맞춰 늘어남(align-items:stretch) → 달력 주(week) 행이 flex 로 남는 높이를 채움 = 월/6주 등 주 수 무관 우측 카드와 세로폭 일치. */
.sch-cal-col { display:flex; flex-direction:column; }
/* ⚠️ 경계가 1000px 이라 **1024px 태블릿 가로에서 2열이 유지**됐고, 그 상태의 달력 칸이 59px 이라 「문상현 원장님 휴진」이 40x171px 로 쌓였다(실측 7칸). 우측 칸도 292px 밖에 안 남아 노출기간 입력 두 개가 6px 넘쳐 **본문이 869>813 으로 가로 스크롤**됐다. 1024 까지 1열로 내린다 — PC(1025 이상)는 2열 그대로다. */
@media (max-width:1024px) { .svndex-schedule .sch-main { grid-template-columns:minmax(0, 1fr); } }
.sch-cal-head { display:flex; justify-content:space-between; align-items:center; gap:12px 16px; flex-wrap:wrap; margin-bottom:12px; }
.sch-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* 시작일 기준 안내 — 라벨(.sch-nav-lbl)보다 약하게. 좁은 폭에서는 줄이 바뀐다(.sch-nav flex-wrap). */
.sch-nav-hint { font-size:.78rem; font-weight:400; color:var(--svx-mute); margin-left:2px; }
.sch-nav-lbl { font-size:.82rem; font-weight:600; color:var(--svx-mute); margin-right:2px; white-space:nowrap; }
.sch-nav-btn { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border:1px solid var(--svx-line); border-radius:8px; color:var(--svx-ink); background:var(--svx-card,#fff); font-size:.9rem; cursor:pointer; text-decoration:none; }
.sch-nav-btn:hover:not(:disabled) { border-color:var(--svx-primary); color:var(--svx-primary); }
/* <a> 였던 것이 «누르면 저장되는» <button> 이 됐다(시작 주 = 방문자 설정). 네이티브 폰트·커서만 맞추고 나머지는 위 규칙 그대로. 「오늘」은 이미 해제 상태면 비활성. */
.sch-nav-btn { font-family:inherit; font-size:.85rem; cursor:pointer; appearance:none; }
.sch-nav-btn:disabled { opacity:.45; cursor:default; }
.sch-anchor { height:34px; border:1px solid var(--svx-line); border-radius:8px; padding:0 8px; background:var(--svx-card,#fff); color:var(--svx-ink); font:inherit; }
.sch-presets-wrap { display:inline-flex; align-items:center; gap:8px; }
.sch-presets { display:inline-flex; border:1px solid var(--svx-line); border-radius:8px; overflow:hidden; }
/* <a> 였던 것이 «누르면 저장되는» <button> 이 됐다(표시범위 = 방문자 설정). 네이티브 버튼 기본 배경·테두리·폰트를 지워 옛 모양을 그대로 유지한다(darkmode.css 의 광역 button 규칙 예외에도 추가). */
.sch-preset { padding:7px 15px; font-size:.85rem; font-weight:500; color:var(--svx-mute); border:0; border-right:1px solid var(--svx-line); text-decoration:none; background:transparent; font-family:inherit; line-height:1.35; cursor:pointer; appearance:none; }
.sch-preset:last-child { border-right:0; }
.sch-preset.is-active { background:var(--svx-primary); color:#fff; }
/* 달력 그리드 */
.sch-cal { border:1px solid var(--svx-line); border-radius:12px; overflow:visible; flex:1 1 auto; display:flex; flex-direction:column; }
.sch-dow, .sch-week { display:grid; grid-template-columns:repeat(7,1fr); }
.sch-dow { flex:0 0 auto; }
.sch-week { flex:1 1 auto; }
.sch-dow-cell { text-align:center; padding:9px 0; font-size:.82rem; font-weight:700; color:var(--svx-mute); background:var(--svx-bg-alt,#f8fafc); border-bottom:1px solid var(--svx-line); }
/* 방문자 위젯(schedule.css)과 같은 글자색. 옅은 배경칸 위 대비 4.5 미달이라 한 단계 진하게. */
.sch-dow-cell.is-sun { color:#b91c1c; }
.sch-dow-cell.is-sat { color:#1d4ed8; }
/* 편집 달력 = 팝업(schedule.css)과 동일 배치: 날짜 좌상단 · 라벨 중앙 · 호버 드롭쉐도우 · 오늘 밝은그레이 */
.sch-cell { position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px; min-height:72px; padding:7px 9px; border:0; border-right:1px solid var(--svx-line); border-bottom:1px solid var(--svx-line); background:var(--svx-card,#fff); cursor:pointer; text-align:left; font:inherit; transition:box-shadow .15s ease; }
.sch-week .sch-cell:last-child { border-right:0; }
/* §2026-10-13 대표님 «1주 선택 시 꽉 차게 나와 보기 안 좋다» — 달력은 오른쪽 설정 칸 높이로 늘어나는데(위 sch-cal-col), 1주는 한 줄뿐이라 그 줄이 800px 까지 늘었다.
   1주일 때만 늘이지 않고 한 줄 = 6주 보기 한 줄 높이 정도(140px) · 아래는 빈다. 한 열로 쌓이는 1024px 이하는 원래 늘지 않아 그대로.
   ⚠️ 편집 달력(.sch-cal-col)만 — 같은 화면의 방문자 미리보기 팝업도 .sch-week .sch-cell 이라, 범위를 안 좁히면 미리보기 칸까지 140px 이 돼 실제 메인과 달라진다(같은 날 대표님 지적). */
@media (min-width:1025px) { .svndex-schedule[data-mode="1w"] .sch-cal-col .sch-cal, .svndex-schedule[data-mode="1w"] .sch-cal-col .sch-week { flex:0 0 auto; } .svndex-schedule[data-mode="1w"] .sch-cal-col .sch-week .sch-cell { min-height:140px; } }
.sch-cell:hover { box-shadow:0 4px 14px rgba(15,23,42,.16); z-index:2; }
/* 오늘 = 초록 핀 하나로만 표시. 배경은 프리셋·직접지정 규칙이 갖는다. 회색 배경이 프리셋(.sch-wk-closed)보다 특이도가 높아 붉은 배경을 덮고 있었다. */
/* 날짜 라인 = 날짜 + 공휴일명 + 오늘핀(우측) */
.sch-cell-top { display:flex; align-items:center; gap:5px; width:100%; }
.sch-cell-date { font-size:.9rem; font-weight:700; color:var(--svx-ink); line-height:1.1; text-align:left; flex-shrink:0; }
.sch-cell-holiday { min-width:0; font-size:.72rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sch-htext-red { color:#b91c1c; }
.sch-htext-blue { color:#1d4ed8; }
.sch-htext-black { color:#1e293b; }
.sch-htext-white { color:#fff; }
.sch-cell-pin { margin-left:auto; flex-shrink:0; width:9px; height:9px; border-radius:50%; background:#16a34a; display:inline-block; animation:schTodayBreath 2.2s ease-in-out infinite; }
.sch-cell-pin i { display:none; }
/* 오늘 점과 삭제 X 는 «같은 자리» 이고, 오늘칸에 입력값이 있으면 X 가 초록을 덮는 것이 의도다 (사용자 확정) — 비켜 놓지 않는다. */
@keyframes schTodayBreath { 0%, 100% { transform:scale(.82); } 50% { transform:scale(1.28); } }
@media (prefers-reduced-motion: reduce) { .sch-cell-pin { animation:none; } }
/* 데이터 있는 칸 = 우상단 X (달력에서 바로 삭제) */
/* ⚠️ <button> 기본 테두리가 남아 원이 울퉁불퉁해 보였다(사용자 지적) — border/padding/appearance 를 명시로 지운다. */
.sch-cell-x { position:absolute; top:4px; right:4px; width:17px; height:17px; border:0; padding:0; -webkit-appearance:none; appearance:none; border-radius:50%; background:var(--svx-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; line-height:1; cursor:pointer; z-index:4; opacity:1; transition:background .12s; }
body[data-theme="dark"] .sch-cell-x { background:var(--svx-primary-d, #6d28d9); color:#fff; }
.sch-cell:hover .sch-cell-x { opacity:1; }
.sch-cell-x:hover { background:#dc2626; color:#fff; }
/* 터치 기기(hover 없음) = 삭제 X 상시 노출 + 타깃 확대(발견·오탭 방지) */
/* ⚠️ `(max-width: 1024px)` 를 같이 건다 — 조건이 `pointer: coarse` 뿐이면 **태블릿·폰 폭인데도 안 걸리는 경우**가 있다(실측 768px 에서 17px 그대로였다). 손가락으로 쓰는 폭이면 크기를 키우는 것이 이 규칙의 의도이므로 폭으로도 받는다. PC(1025 이상 · 마우스)는 종전대로 17px 이라 화면이 안 바뀐다. */
@media (pointer: coarse), (max-width: 1024px) { .sch-cell-x { opacity:1; width:22px; height:22px; } }   /* §2026-10-13 26 → 22(태블릿 칸에서 글자를 덜 가리게) */
/* §2026-10-13 대표님 «모바일 스케줄 난리» — 폰 폭(≤640)은 칸이 60px 안팎이라 × 가 칸 절반을 덮어 문구·공휴일 이름을 가렸다 → 칸 안 × 숨김(칸을 누르면 뜨는 창의 «지우기» 로 지운다).
   반복 표시(휴진·~13:00) 글자도 다른 칸과 같은 .7rem(반복 표시 font-size:inherit 가 폰 작은 글자 규칙을 이기고 있었다). 편집 달력(.sch-cal-col)만 — 같은 화면의 방문자 미리보기 팝업은 건드리지 않는다. */
@media (max-width: 640px) { .sch-cal-col .sch-cell-x { display:none; } .sch-cal-col .sch-cal .sch-wk-closed.is-recurring .sch-cell-label, .sch-cal-col .sch-cal .sch-wk-open.is-recurring .sch-cell-label { font-size:.7rem; } }
.sch-cell.is-sun .sch-cell-date { color:#b91c1c; }
.sch-cell.is-sat .sch-cell-date { color:#1d4ed8; }
/* 관리자 좌측 달력은 **실제 공개 팝업(확대 모드)과 같은 글자 규칙**을 쓴다 — 값이 다르면 운영자가 편집화면에서 본 모습과 실제 화면이 어긋난다. 정본 = widget/schedule/schedule.css (일반칸 1.1rem/500 · 프리셋 1.1rem/400) */
.sch-cell-label { flex:1 1 auto; display:flex; align-items:center; justify-content:center; text-align:center; font-size:1.1rem; font-weight:500; line-height:1.16; }
.sch-cell.is-recurring { opacity:.9; }
/* 날짜 동그라미 (숫자에 원형 배경 · 글자 흰색) */
.has-circle .sch-cell-date { color:#fff !important; min-width:26px; height:26px; padding:0; line-height:1; font-weight:600; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; }
/* 1일은 «10/1» 로 월을 같이 적어 네 글자다 — 동그라미 표시가 걸리면 알약이 되는데 padding 이 0 이라 글자가 가장자리에 닿아 답답했다(2026-09-22 사용자 지적). ⚠️ 다른 날짜에 같이 주면 안 된다 — min-width 가 content 기준이라 한 자리 숫자까지 24 → 34px 로 커진다(실측). 그래서 .is-md 로 1일에만 건다. */
.has-circle .sch-cell-date.is-md { padding:0 5px; }
.sch-circle-red .sch-cell-date { background:#dc2626; }
.sch-circle-blue .sch-cell-date { background:#2563eb; }
/* 흰 테두리만 — 관리자 달력·미리보기용. 프론트(.svx-sch-body 스코프)와 «같은 모양» 이어야 운영자가 고른 대로 보인다. 배경은 칸 색이 그대로 비친다. */
.sch-circle-white-line .sch-cell-date { background:transparent; box-shadow:inset 0 0 0 1px #ffffff; }
/* ⚠ 노랑·초록·보라·슬레이트 칸 규칙은 **관리자 CSS 에도 있어야 한다.** 나머지 4색과 달리 이 넷만 방문자 위젯 CSS 에만 있고 그 파일이 관리자에도 실려 «우연히» 동작한 적이 있다 — 그쪽 범위를 좁히는 순간 관리자 달력·미리보기에서 동그라미가 조용히 사라진다(에러 없음). ⚠️ 값은 위 스와치와 같은 색이다 — 고칠 땐 같이 본다. */
.sch-circle-yellow .sch-cell-date { background:#fbbf24; color:#1e293b !important; }
.sch-circle-green .sch-cell-date { background:#16a34a; }
.sch-circle-violet .sch-cell-date { background:#7c3aed; }
.sch-circle-slate .sch-cell-date { background:#475569; }
/* 색 프리셋 (PHP svndex_schedule_color_presets 미러). 강조 배경(red/blue/slate)=흰 글씨 */
.sch-text-red { color:#b91c1c !important; }
.sch-text-blue { color:#1d4ed8 !important; }
.sch-text-black { color:#1e293b !important; }
.sch-text-white { color:#fff !important; }
/* 주말 프리셋(일요일 휴무·토요일 오전진료) 전용 톤 — 대부분의 병·의원이 그렇게 운영하는 당연한 일정이라 강조 대상이 아니다. 직접 지정과 같은 색을 쓰면 달력이 온통 붉고 파래져 **주중에 실제로 넣은 일정이 묻힌다.** 프리셋 = 조용한 배경 / 직접 지정 = 그 위에 얹혀 도드라지는 표시. 이 위계를 지킬 것. */
.sch-wk-closed { background:rgba(220,38,38,.055); }
/* 프리셋 라벨(휴진·오전진료)만 400 — 당연한 일정이라 시선을 끌면 안 된다. ⚠️ **날짜 숫자는 건드리지 않는다.** 직접 지정한 날의 라벨도 원래 굵기를 유지한다. */
.sch-wk-closed.is-recurring .sch-cell-label, .sch-wk-open.is-recurring .sch-cell-label { font-weight:400; }
/* 개수가 많아 진하면 시끄럽다 — 굵기(400)는 유지하고 **크기**를 줄여 은은하게. */
.sch-wk-closed.is-recurring .sch-cell-label, .sch-wk-open.is-recurring .sch-cell-label { font-size:inherit; }
/* 달 경계 — 매달 1일 좌측에 노랑 보더. 어디서부터 다음 달인지 한눈에. 년·월 무관 공통. */
/* 월 경계는 실선이 아니라 «왼쪽에서 오른쪽으로 퍼지는» 노랑 띠다. ⚠️ ::before 를 안 쓰는 이유 = 칸 안 글자가 static 이라 absolute 의사요소가 글자를 덮는다. background-image 는 배경색 위·글자 아래라 그 문제가 없다. */
.sch-cell.is-month-last { border-right-color:rgba(100,116,139,.16) !important; background-image:linear-gradient(to left, rgba(100,116,139,.08) 0, rgba(100,116,139,0) 38px) !important; }
/* 좌측 설정 목록의 미니 달력·미리보기에서도 동일하게 보이도록 (셀 보더 규칙보다 우선) */
.sch-preview .sch-cell.is-month-last { border-right-color:rgba(100,116,139,.16) !important; background-image:linear-gradient(to left, rgba(100,116,139,.08) 0, rgba(100,116,139,0) 38px) !important; }
/* 프리셋 글자색 — 개수가 많아(주 1~2회 × 한 달) 진한 적/청이면 달력이 시끄럽다. 은은하게만 보이면 된다. 주중 직접 지정이 확실히 도드라지도록 톤을 더 낮춘다. */
.sch-wk-closed.is-recurring .sch-cell-label, .sch-wk-closed.is-recurring .sch-text-red { color:rgba(185,28,28,.9) !important; }
.sch-wk-open.is-recurring .sch-cell-label, .sch-wk-open.is-recurring .sch-text-blue { color:rgba(29,78,216,.9) !important; }
.sch-wk-open { background:rgba(37,99,235,.055); }
.sch-bg-soft-red { background:#fee2e2; }
.sch-bg-soft-blue { background:#dbeafe; }
.sch-bg-soft-amber { background:#fef3c7; }
.sch-bg-soft-green { background:#dcfce7; }
.sch-bg-pure-white { background:#ffffff; }
/* 순백 스와치는 흰 패널 위에서 안 보인다 — 테두리로 형태를 준다(체크도 어둡게). */
.sch-sw.sch-bg-pure-white { box-shadow:inset 0 0 0 1px #94a3b8; }
.sch-sw.sch-bg-pure-white:has(input:checked)::after, .sch-swatch.sch-bg-pure-white:has(input:checked)::after { color:#1e293b; text-shadow:none; }
.sch-bg-red { background:#dc2626; }
.sch-bg-blue { background:#2563eb; }
.sch-bg-slate { background:#334155; }
.sch-hint { font-size:.78rem; color:var(--svx-mute); margin:10px 0 0; }
/* 입력칸 바로 밑에 붙는 안내 — 기본 hint 의 10px 은 «그 칸의 설명» 으로 읽히기엔 멀다 */
.sch-hint-tight { margin-top:6px; }
/* 안내문 앞 ⓘ — 이 화면의 다른 안내와 같은 아이콘·같은 색. ⚠️ flex 로 만들지 말 것 — 이 클래스는 인라인 태그를 품은 자리에도 쓰여서, flex 로 바꾸면 그 태그가 별도 칸이 되며 간격이 벌어진다. */
.sch-hint > i { font-size:.9rem; color:var(--svx-primary); vertical-align:-1px; margin-right:4px; }
/* 우측 설정/리스트 */
.sch-side-col { display:flex; flex-direction:column; gap:16px; }
/* 플로팅 팝업 */
.sch-pop { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.4); }
.sch-pop[hidden] { display:none; }
/* 폭 340 → 680 (사용자 지정). 프리셋·색 스와치·라벨이 한 줄에 다 안 들어가 접히던 자리다. max-width:92vw 가 그대로 있어 좁은 화면에서는 종전처럼 화면에 맞춰 줄어든다. */
.sch-pop-panel { width:520px; max-width:92vw; background:var(--svx-card,#fff); color:var(--svx-ink); border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.28); padding:18px; max-height:90vh; overflow-y:auto; }
/* 제목을 «타이틀바» 로 만든다(구분선 말고 구분이 필요). 패널 패딩 밖으로 음수 마진으로 빼내 모서리까지 배경이 닿게 한다. ⚠️ 진료시간 플로팅도 같은 클래스를 쓴다 — 두 플로팅이 같은 모양이 된다. */
.sch-pop-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:-18px -18px 16px; padding:13px 18px; background:var(--svx-bg-alt,#f6f7f9); border-bottom:1px solid var(--svx-line); border-radius:14px 14px 0 0; font-size:1.05rem; font-weight:700; }
.sch-pop-x { border:0; background:transparent; cursor:pointer; font-size:1.15rem; color:var(--svx-mute); padding:2px; }
.sch-pop-x:hover { color:var(--svx-ink); }
.sch-pop-row { margin-bottom:12px; }
.sch-pop-lbl { display:block; font-size:.8rem; font-weight:600; color:var(--svx-mute); margin-bottom:7px; }
/* 진료구분 = 이 팝오버에서 «유일하게 사실을 정하는» 줄이다(챗봇 답변이 여기서 나온다). 강조는 라벨 굵기 + 빨간 (필수) 로만 한다 — 배경·좌측 띠는 뺐다(사용자 지정 2026-09-12). */
.sch-pop-status { display:flex; align-items:center; gap:12px; }
.sch-pop-status .sch-pop-lbl { font-weight:700; color:var(--svx-ink); }
.sch-req { font-style:normal; font-weight:600; font-size:.76rem; color:var(--svx-error,#dc2626); }
.sch-pop-status .sch-pop-lbl { margin:0; flex-shrink:0; }
/* 진료구분 안내문 + 구분선 — 이 값이 챗봇 답변까지 정한다는 사실을 그 자리에서 알린다. 운영자가 «색 고르기» 로 오해해 휴무를 누르던 것이 실제 오답의 원인이었다. */
/* 요일별 진료시간 플로팅 — 기관정보와 같은 폼을 달력 옆에서 연다. 요일 그리드가 7행 × 6열이라 날짜 팝오버(680px)보다 넓어야 한 줄에 들어간다. */
/* AI 우선순위 카드 — 값을 저장하지 않는 «고정 래퍼» 다. 규칙만 보여 준다. 달력을 만지는 사람이 제일 먼저 알아야 할 것: 어떤 값이 이겨서 챗봇 답이 되는가. */
/* ── 달력 표 = 다크모드 제외 「라이트 섬」(사용자 결정). 다크에서 «색을 고른 칸» 만 밝고 빈 칸은 어두워 체크무늬가 됐다. 이 표는 「방문자에게 이렇게 나간다」를 확인하는 자리라 절반만 테마를 입히면 무엇이 진짜 색인지 알 수 없다. 톤만 낮추는 필터(brightness)는 **쓰지 않는다** — 색을 확인하는 자리에서는 미세한 왜곡도 왜곡이고, filter 는 안쪽 absolute 의 컨테이닝 블록까지 바꾼다. ⚠️ 토큰을 다시 선언하는 이유 = 안쪽 규칙들이 그 토큰을 읽기 때문이다. ── */
body[data-theme="dark"] .sch-cal { --svx-ink:#1a1d24; --svx-mute:#6b7280; --svx-line:#e5e7eb; --svx-card:#ffffff; --svx-bg-alt:#f5f5f7; color-scheme:light; background:#ffffff; }
body[data-theme="dark"] .sch-cal .sch-cell:not([class*="sch-bg-"]) { background:#ffffff; color:#1a1d24; border-right-color:#e5e7eb; border-bottom-color:#e5e7eb; }
body[data-theme="dark"] .sch-cal .sch-cell.is-today:not([class*="sch-bg-"]) { background:#ffffff; }
body[data-theme="dark"] .sch-cal .sch-cell:hover { box-shadow:0 4px 14px rgba(0,0,0,.12); }
body[data-theme="dark"] .sch-cal .sch-dow-cell { background:#f5f5f7; color:#6b7280; border-bottom-color:#e5e7eb; }
/* 일·토 프리셋 바탕 = 위 «빈 칸 흰색» 과 같은 특이도(0,5,1)로 두고 그 뒤에 둔다 — 종전 (0,3,1) 이라 다크에서만 흰색에 덮여 사라졌다(§2026-09-29 사용자 발견). 날짜 칸에서 색을 직접 고른 칸(sch-bg-*)은 제외 — 라이트와 같이 직접 지정이 이긴다. */
body[data-theme="dark"] .sch-cal .sch-cell.sch-wk-closed:not([class*="sch-bg-"]) { background:rgba(220,38,38,.055); }
body[data-theme="dark"] .sch-cal .sch-cell.sch-wk-open:not([class*="sch-bg-"]) { background:rgba(37,99,235,.055); }
/* 요일 머리글 일(빨강)·토(파랑) — 위 머리글 회색 규칙(0,3,1)에 덮이지 않게 라이트와 같은 색을 다시 준다 */
body[data-theme="dark"] .sch-cal .sch-dow-cell.is-sun { color:#b91c1c; }
body[data-theme="dark"] .sch-cal .sch-dow-cell.is-sat { color:#1d4ed8; }
body[data-theme="dark"] .sch-cal .sch-wk-closed.is-recurring .sch-cell-label { color:rgba(220,38,38,.82) !important; }
body[data-theme="dark"] .sch-cal .sch-wk-open.is-recurring .sch-cell-label { color:rgba(37,99,235,.82) !important; }
.sch-prio-card { padding:12px 16px; }
.sch-prio-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sch-prio-t { font-size:.82rem; font-weight:600; color:var(--svx-ink); white-space:nowrap; }
.sch-prio-sep { width:1px; height:14px; background:var(--svx-line); flex-shrink:0; }
.sch-prio-chain { display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sch-prio-chain > i { font-size:.9rem; color:var(--svx-mute); }
/* 「날짜칸」은 누를 수 있는 것이 아니다 — 박스를 두면 옆의 «기관 정보» 버튼과 같은 것으로 읽힌다. 굵게만 해서 «이기는 값» 임을 표시한다. */
.sch-prio-1 { font-size:.8rem; font-weight:700; color:var(--svx-ink); }
.sch-prio-2 { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border:1px solid var(--svx-line); border-radius:7px; background:var(--svx-card,#fff); color:var(--svx-ink); font-size:.8rem; font-weight:600; cursor:pointer; }
.sch-prio-2:hover { border-color:var(--svx-primary); color:var(--svx-primary); background:var(--svx-bg-alt); }
.sch-prio-2 i { font-size:.95rem; }
/* 안내 두 줄 — 체인 «아래» 로 내린다(flex-basis:100% 로 줄을 통째로 차지). */
/* 안내를 「기관 정보」 오른쪽 «같은 줄» 로 둔다 — 폭을 고정하지 않으면 좁은 화면에서 부모의 flex-wrap 이 알아서 내린다 */
.sch-prio-note { display:flex; align-items:center; gap:5px; flex:0 1 auto; min-width:0; font-size:.78rem; line-height:1.5; color:var(--svx-primary,#7c3aed); font-weight:500; }
.sch-prio-note i { font-size:.92rem; flex-shrink:0; }
.sch-prio-t i { font-size:.98rem; vertical-align:-1px; margin-right:1px; }
/* 둘째 줄 라벨 — 첫째 줄과 같은 글자 크기로 두 줄의 «축» 을 나란히 읽히게 한다. */
.sch-style-t { flex-shrink:0; }
/* (학습X) — 이 줄의 토글은 챗봇 답변에 관여하지 않는다는 표시 (에 배선을 끊었다). */
.sch-style-nolearn { font-style:normal; font-weight:500; font-size:.74rem; color:var(--svx-mute); }
/* 구역 제목 뒤 보조 설명 — 제목보다 한 단계 낮춰 «제목의 일부» 로 읽히게 한다. */
/* 괄호를 빼고 보라색으로(사용자 지정). 괄호 없이 회색이면 제목의 일부처럼 읽혀서 «부가 설명» 임이 안 드러난다 — 색으로 구분한다. */
.sch-deco-sub { font-weight:400; font-size:.74rem; color:var(--svx-primary); }
/* 요일 표만 담으므로 날짜 팝오버보다 넓다(7열). 보기 전용이라 입력은 fieldset 이 잠근다. */
.sch-hours-panel { width:1180px; }
.sch-hours-panel .dx-hours-col-main { max-width:none; }
.dx-hours-ro { border:0; margin:0; padding:0; min-width:0; }
.dx-hours-ro input, .dx-hours-ro .svx-switch-track { cursor:default; }
/* ⚠ 패널의 `input[type=text] { width:100% }` 가 같은 특이도로 뒤에 나와 점심시간 칸의 고정폭을 «순서» 로 이긴다 — 그대로 두면 두 칸이 100% 가 되어 세로로 쌓인다. 이 패널 안에서는 원래 치수를 되찾아 준다 (기관정보와 «같은 모습» 이어야 한다). */
.sch-hours-panel .dx-hours-lunch-all > input[type=text] { width:84px; height:auto; text-align:center; padding:7px 6px; font-size:.88rem; }
/* 요일 표 칸도 같은 규칙에 덮여 높이 38px·패딩 11px 이 됐다 — 기관정보 치수로 되돌린다. */
.sch-hours-panel .dx-hours-row > input[type=text] { height:auto; padding:6px 4px; font-size:.85rem; }
/* 제목 줄 = [제목] …… [설정 바로가기] [닫기]. space-between 이라 제목을 밀어 두 버튼을 우측에 모은다. */
.sch-hours-panel .sch-pop-head > strong { margin-right:auto; }
.sch-hours-go { display:inline-flex; align-items:center; gap:5px; margin-right:10px; text-decoration:none; font-weight:600; }
.sch-hours-go i { font-size:1rem; }
/* 제목 아래 한 줄 안내 — 이 표가 «언제» 쓰이는지만 말한다(달력 칸이 비었을 때). */
.sch-hours-note { display:flex; align-items:center; gap:6px; margin:-8px 0 0; font-size:.8rem; color:var(--svx-primary,#7c3aed); font-weight:500; }
.sch-hours-note i { font-size:.95rem; flex-shrink:0; }
/* 안내 목록 — 항목마다 ⓘ 를 달아 «각각이 독립된 규칙» 임을 보인다(사용자 지정). ul 기본 여백·불릿은 지우고 아이콘이 그 자리를 대신한다. */
.sch-pop-help { list-style:none; margin:10px 0 0; padding:11px 13px; border-radius:9px; background:var(--svx-bg-alt,#f6f7f9); font-size:.85rem; line-height:1.65; color:color-mix(in srgb, var(--svx-mute) 72%, var(--svx-ink)); }
.sch-pop-help li { display:flex; align-items:flex-start; gap:5px; }
.sch-pop-help li + li { margin-top:3px; }
/* 아이콘을 첫 줄 «가운데» 에 맞춘다 — 줄높이 22.4px, 아이콘 약 15px 이라 위 여백 3.7px. align-items:center 로 하지 않는 이유 = 두 줄로 접힌 항목에서 아이콘이 가운데로 내려간다. */
.sch-pop-help li > i { font-size:.95rem; flex-shrink:0; margin-top:3.7px; line-height:1; color:var(--svx-primary); }
.sch-hours-panel .sch-pop-help { margin-left:0; }
.sch-pop-help b { color:var(--svx-ink); font-weight:600; }
.sch-pop-sep { margin:14px 0; border:0; border-top:1px solid var(--svx-line); }
/* 안내 목록 바로 위 구분선 — 아래 목록이 자체 여백(margin-top:10px)을 갖고 있어 위만 띄운다. */
.sch-pop-sep-tight { margin:12px 0 0; }
/* 소제목 - 텍스트필드 - 색상 스와치 한 줄 (법정공휴일 / 표시텍스트) */
.sch-pop-field { display:flex; align-items:center; gap:8px; }
.sch-pop-field > .sch-pop-lbl { margin:0; flex-shrink:0; width:66px; }
/* 15자 칸이라 폭을 1/3로 줄인다(사용자 지정). 남는 자리는 색 스와치가 바로 옆에 붙는다. */
.sch-pop-in { flex:0 1 33%; min-width:0; }
.sch-pop-panel input[type=text] { width:100%; height:38px; padding:0 11px; border:1px solid var(--svx-line); border-radius:8px; background:var(--svx-card,#fff); color:var(--svx-ink); font:inherit; font-size:.9rem; transition:border-color .15s, box-shadow .15s; }
.sch-pop-panel input[type=text]:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
/* 스와치는 한 줄에 8개가 들어가게 맞춘다 — gap 이 조금만 커도 «1px 차이» 로 7개만 들어간다. 폭은 그대로 둔다 */
.sch-swatches { display:flex; flex-wrap:wrap; gap:5px; }
.sch-swatches-sm { flex-shrink:0; gap:5px; flex-wrap:nowrap; }
.sch-swatches-sm .sch-sw { width:24px; height:24px; font-size:.72rem; border-radius:6px; }
.sch-sw { width:32px; height:32px; border:2px solid transparent; border-radius:8px; cursor:pointer; font-size:.85rem; font-weight:800; line-height:1; display:inline-flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); padding:0; transition:transform .1s; }
.sch-sw:hover { transform:scale(1.08); }
.sch-sw.is-sel { border-color:var(--svx-primary); box-shadow:0 0 0 2px var(--svx-primary); }
/* 법정공휴일 글자색 스와치 (가) = 빨강/검정/화이트(어두운 배경에 흰 글자로 표시) */
.sch-htext-sw-red { color:#b91c1c; }
.sch-htext-sw-blue { color:#1d4ed8; }
.sch-htext-sw-black { color:#1e293b; }
/* 표시 텍스트 스와치(.sch-text-white)와 «같은 모습» 이어야 한다 — 둘 다 글자색만 보여 주는 칸이다. 종전엔 여기만 진회색 배경이 붙어 한 줄만 튀었다(사용자 지적 2026-09-12). */
.sch-htext-sw-white { color:#fff; }
/* 날짜배경 스와치 — white/gray 추가 */
.sch-bg-white { background:#f5f5f5; }
/* ⚠ sky·rose 는 «불투명» 값이어야 한다. 반투명은 «뒤에 있는 것» 과 합성되므로 다크 관리자에서는 어두운 남색·검붉은색이 되어, 운영자가 고른 색(방문자 화면의 옅은 하늘·분홍)과 전혀 다른 색을 보고 고르게 된다. ⚠️ 값은 지어낸 것이 아니라 **라이트에서 실측한 합성 결과** 다 — 나머지 색들과 같은 방식이다. */
.sch-bg-sky { background:#f3f6fe; }
.sch-bg-rose { background:#fdf3f3; }
.sch-bg-gray { background:#e5e5e5; }
/* 날짜 동그라미 스와치 = 실제 색 원 (첫번째 흰색) */
.sch-sw.sch-circle-white { border-radius:50%; background:#ffffff; }
/* 「흰 테두리만」 옵션의 스와치 — 색을 칠하는 게 아니라 «속이 비었다» 를 알리는 칸이라 채우기 없이 회색 외곽선 + 가운데 대각선(색 없음 표준 표기)으로 그린다 */
/* 이 색의 쓰임 = «속은 비고 흰 테두리만». 스와치는 «비침» 을 그라데이션으로 암시하고, 그 위에 흰 링을 얹어 무엇이 칠해지는지 보인다. ⚠️ 흰 바탕에 회색 테두리 + 사선이면 «없음/취소» 로 읽힌다(사용자 지적 2026-09-12). */
.sch-sw.sch-circle-white-line { background:linear-gradient(135deg, #94a3b8 0%, #cbd5e1 45%, #f1f5f9 100%); border-radius:50%; box-shadow:inset 0 0 0 2px #ffffff; }
.sch-sw.sch-circle-red { background:#dc2626; border-radius:50%; }
.sch-sw.sch-circle-blue { background:#2563eb; border-radius:50%; }
.sch-sw.sch-circle-yellow { background:#fbbf24; border-radius:50%; }
.sch-sw.sch-circle-green { background:#16a34a; border-radius:50%; }
.sch-sw.sch-circle-violet { background:#7c3aed; border-radius:50%; }
.sch-sw.sch-circle-slate { background:#475569; border-radius:50%; }
/* 스타일 프리셋 버튼 — 색 네 칸을 한 번에 채우는 동그라미. ⚠️ **배경을 .sch-bg-{키} 재사용으로 두면 안 된다.** 이 규칙이 파일에서 그 뒤라 같은 특이도에서 늦은 쪽이 이겨 배경이 통째로 사라진다(라이트는 패널이 흰색이라 티가 안 나고 다크에서만 드러난다). 전용 규칙을 따로 둔다. */
.sch-stp-wrap { display:flex; flex-wrap:wrap; gap:6px; }
.sch-stp { width:29px; height:29px; flex:0 0 auto; border:2px solid transparent; border-radius:50%; padding:0; -webkit-appearance:none; appearance:none; background:#ffffff; font-family:inherit; font-size:.66rem; font-weight:800; line-height:1; letter-spacing:-.03em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:transform .1s, box-shadow .12s; }
.sch-stp:hover { transform:scale(1.1); }
.sch-stp.is-on { box-shadow:0 0 0 2px var(--svx-primary); }
/* 배경 — (0,2,0) 이라 위 .sch-stp 와 파일 순서에 상관없이 이긴다 */
.sch-stp.sch-bg-white { background:#f5f5f5; }
.sch-stp.sch-bg-rose { background:#fdf3f3; }
.sch-stp.sch-bg-soft-red { background:#fee2e2; }
.sch-stp.sch-bg-sky { background:#f3f6fe; }
.sch-stp.sch-bg-soft-blue { background:#dbeafe; }
.sch-stp.sch-bg-soft-amber { background:#fef3c7; }
.sch-stp.sch-bg-soft-green { background:#dcfce7; }
/* 테두리 = «날짜 강조» 색을 옅게 깐 것(원색 그대로는 너무 진하다). 색상값은 위 스와치와 같고 투명도만 다르다. ⚠️ 알파를 한 값으로 통일하지 않는다 — 밝은 노랑과 짙은 슬레이트를 같은 알파로 깔면 노랑만 사라진다. 화면에서 «무게가 비슷해 보이는» 값으로 맞춰 두었다. 흰색 계열 둘은 원래 옅어서 그대로 둔다. */
.sch-stpc-white { border-color:#e2e8f0; }
.sch-stpc-white-line { border-color:#cbd5e1; }
.sch-stpc-red { border-color:rgba(220,38,38,.42); }
.sch-stpc-blue { border-color:rgba(37,99,235,.42); }
.sch-stpc-yellow { border-color:rgba(251,191,36,.68); }
.sch-stpc-green { border-color:rgba(22,163,74,.45); }
.sch-stpc-violet { border-color:rgba(124,58,237,.42); }
.sch-stpc-slate { border-color:rgba(71,85,105,.40); }
/* §2026-10-13 «기본» 프리셋 = 색 없음 — 점선 테두리로 «아무 색도 안 칠함» 을 보인다 */
.sch-stp.sch-stp-reset { background:#ffffff; border:1px dashed #94a3b8; color:#64748b; }
/* 흰색 동그라미 = 흰 배경 + 검정 글자 (셀) */
.sch-circle-white .sch-cell-date { background:#ffffff !important; color:#1e293b !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); }
/* 미리보기 = 실제 날짜 칸 비율 (PC 절반 폭 · 기본 보더 · 둥글기 없음) */
/* 미리보기 = «방문자 확대 모드의 칸» 실측 크기. ⚠️ 정본(widget/schedule/schedule.css)의 폭·행높이를 바꾸면 여기도 같이 고친다 — 안 고치면 «실제와 다른 미리보기» 가 된다 */
.sch-preview { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px; width:169px; min-height:124px; padding:7px 9px; border:1px solid var(--svx-line); border-radius:0; text-align:left; }
.sch-preview .sch-cell-top { display:flex; align-items:center; gap:5px; }
.sch-preview .sch-cell-date { font-size:.9rem; font-weight:700; color:var(--svx-ink); flex-shrink:0; }
.sch-preview .sch-cell-holiday { font-size:.72rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sch-preview .sch-cell-label { flex:1 1 auto; display:flex; align-items:center; justify-content:center; text-align:center; font-size:1.1rem; font-weight:500; line-height:1.16; }
.sch-pop-actions { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
/* 미리보기 + 저장/지우기 = 한 줄 (미리보기 좌 50% · 버튼은 우측 빈공간 하단 = 공간 활용, 저장이 우측하단) */
/* 저장값이 있는 날짜는 [지우기]가 함께 나오는데, 미리보기가 50% 를 고정으로 물고 있어 버튼 영역이 눌리면서 '저 장'처럼 글자가 줄바꿈됐다. 미리보기는 줄어들 수 있게 하고 버튼은 줄바꿈·축소 금지로 둔다. */
.sch-pop-preview-row { display:flex; flex-wrap:nowrap; align-items:flex-end; gap:12px; margin-bottom:0; }
.sch-preview-wrap { flex:1 1 50%; min-width:0; }
/* 확대 모드 칸 크기(169×124) 고정 — 폭을 100% 로 늘리면 «그 칸이 이렇게 보인다» 가 아니게 된다. */
.sch-preview-wrap .sch-preview { width:169px; }
.sch-pop-preview-row .sch-pop-actions { flex:0 0 auto; margin-top:0; justify-content:flex-end; gap:8px; }
.sch-pop-actions > button { white-space:nowrap; flex-shrink:0; }
/* 지우기 = 빨강 보더 버튼 */
.sch-pop-del { border:1px solid #dc2626; background:transparent; color:#dc2626; font-size:.85rem; font-weight:600; cursor:pointer; padding:7px 15px; border-radius:8px; transition:background .15s, color .15s; }
.sch-pop-del:hover { background:#dc2626; color:#fff; text-decoration:none; }
/* SCHEDULE 우측 메타/리스트 (달력=게시물 모델) — 2026-07-11 */
.sch-meta { padding:14px 16px !important; }
.sch-title-in { width:100%; height:40px; padding:0 12px; border:1px solid var(--svx-line); border-radius:9px; background:var(--svx-card,#fff); color:var(--svx-ink); font:inherit; font-size:1rem; font-weight:600; }
.sch-title-in:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.sch-meta-sep { height:1px; background:var(--svx-line); margin:14px 0; }
.sch-meta-line { display:flex; align-items:center; gap:20px; margin-bottom:11px; flex-wrap:wrap; }
.sch-meta-line + .sch-meta-line { margin-bottom:0; }
.sch-meta-line .doc-chief-toggle { font-size:.88rem; }
/* 활성 = 토글 스위치 */
.sch-switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:.9rem; font-weight:700; color:var(--svx-ink); }
.sch-switch input[type="checkbox"] { position:absolute; opacity:0; width:1px; height:1px; margin:0; border:0; appearance:none; -webkit-appearance:none; }
.sch-switch-track { width:42px; height:24px; border-radius:999px; background:var(--svx-line); position:relative; transition:background .16s; flex-shrink:0; }
.sch-switch-track::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .16s; }
.sch-switch input:checked + .sch-switch-track { background:var(--svx-success,#16a34a); }
.sch-switch input:checked + .sch-switch-track::after { transform:translateX(18px); }
/* 토글 4종(팝업 게시 | 확대축소·일요일휴무·토요일오전진료) 한 줄 배치 — 좁은 메타패널에 맞춰 압축 */
.sch-meta-toggles { gap:8px; flex-wrap:wrap; align-items:center; }
.sch-meta-toggles .sch-switch { gap:5px; font-size:.8rem; font-weight:600; white-space:nowrap; }
/* 위젯 꾸미기의 «확대/축소» 토글도 같은 크기(§2026-09-28 사용자 지정) */
.sch-meta-toggles .sch-switch-track, .sch-deco-field-sw .sch-switch-track { width:33px; height:19px; }
.sch-meta-toggles .sch-switch-track::after, .sch-deco-field-sw .sch-switch-track::after { width:15px; height:15px; }
.sch-meta-toggles .sch-switch input:checked + .sch-switch-track::after, .sch-deco-field-sw .sch-switch input:checked + .sch-switch-track::after { transform:translateX(14px); }
/* 팝업 게시(on/off)와 나머지 표시옵션 구분 세로선 */
.sch-toggle-sep { flex:0 0 auto; align-self:stretch; width:1px; min-height:20px; margin:0 2px; background:var(--svx-line); }
/* 노출기간/기기/쿠키 = 라벨+컨트롤 붙임 (중간 안 비게) */
.sch-meta-field { display:grid; grid-template-columns:58px 1fr; align-items:center; gap:8px; font-size:.85rem; color:var(--svx-mute); margin-bottom:9px; }
.sch-meta-field > label { color:var(--svx-mute); }
.sch-meta-field select, .sch-meta-field input[type=date] { height:34px; width:100%; border:1px solid var(--svx-line); border-radius:7px; padding:0 8px; background:var(--svx-card,#fff); color:var(--svx-ink); font:inherit; font-size:.85rem; }
.sch-range { display:flex; align-items:center; gap:6px; color:var(--svx-mute); }
.sch-range input[type=date] { flex:1; min-width:0; }
/* 날짜칸 두 개가 한 줄에 안 들어가면 줄을 바꾼다 — 안 바꾸면 칸을 넘어 본문이 가로로 흔들린다(실측 1024px: 298px 가 292px 칸을 넘었다). */
@media (max-width:1024px) { .sch-range { flex-wrap:wrap; } }
.sch-meta-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sch-meta-2col .sch-meta-field { grid-template-columns:auto 1fr; margin-bottom:0; }
.sch-meta-actions { margin-top:14px; display:flex; justify-content:flex-end; align-items:center; gap:8px; }
/* 미리보기 버튼 = 저장(.sdx-pad-8-18 = 8px 18px·.9rem)과 동일 크기 (테두리 1px 감안해 7/17) */
.sch-meta-actions .sch-preview-btn { padding:7px 17px; font-size:.9rem; }
.sch-list-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sch-newbtn { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border:1px solid var(--svx-primary); border-radius:8px; color:var(--svx-primary); font-size:.82rem; font-weight:600; text-decoration:none; }
.sch-newbtn:hover { background:var(--svx-primary); color:#fff; }
.sch-callist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sch-cal-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--svx-line); border-radius:9px; }
.sch-cal-item.is-cur { border-color:var(--svx-primary); background:rgba(124,58,237,.05); }
.sch-cal-open { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--svx-ink); }
.sch-cal-name { font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sch-cal-meta { font-size:.74rem; color:var(--svx-mute); }
/* ON/OFF 뱃지 = 클릭 가능한 토글 버튼 (UX 통일). 조금 키우고, 우측 삭제(×)와 10px 떨어뜨려 오클릭을 막는다. */
.sch-cal-toggle { flex-shrink:0; margin-right:10px; display:flex; }
.sch-cal-badge { flex-shrink:0; padding:5px 13px; font-size:.82rem; font-weight:700; line-height:1.2; border:0; border-radius:999px; cursor:pointer; transition:filter .15s, transform .1s; }
.sch-cal-badge:hover { filter:brightness(.94); }
.sch-cal-badge:active { transform:scale(.96); }
.sch-cal-badge.is-static { cursor:default; } .sch-cal-badge.is-static:hover { filter:none; } .sch-cal-badge.is-static:active { transform:none; }
/* 달력 삭제 = 팝업 슬라이드 이미지삭제(.pop-slot-clear)와 동일한 빨간 원형 X 로 통일. 기존엔 투명배경 회색 휴지통 아이콘이라 눌러야 할 버튼으로 안 읽히고 호버도 색만 바뀌어 어색했다. */
.sch-cal-del button { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:var(--svx-error); color:#fff; font-size:.72rem; line-height:1; cursor:pointer; opacity:.85; transition:opacity .15s ease, transform .15s ease, box-shadow .15s ease; }
.sch-cal-del button:hover { opacity:1; transform:scale(1.12); box-shadow:0 2px 8px rgba(220,38,38,.42); }
.sch-cal-del button:focus-visible { outline:2px solid var(--svx-error); outline-offset:2px; }
/* 새 달력 = 미저장 신규 (리스트 임시 항목) */
.sch-newbtn.is-active { background:var(--svx-primary); color:#fff; }
.sch-cal-item.is-pending { border-style:dashed; border-color:var(--svx-primary); background:rgba(124,58,237,.05); }
.sch-cal-item.is-pending .sch-cal-open { cursor:default; }
.sch-cal-item.is-pending .sch-cal-name small { color:var(--svx-primary); font-weight:600; }
/* 캘린더 헤드 우측 그룹 + 미리보기 버튼 (item 9) */
.sch-preview-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border:1px solid var(--svx-line); border-radius:8px; background:var(--svx-card,#fff); color:var(--svx-ink); font-size:.82rem; font-weight:600; cursor:pointer; transition:background .14s, border-color .14s, color .14s; }
.sch-preview-btn i { color:var(--svx-primary); font-size:1rem; }
.sch-preview-btn:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.sch-preview-btn.is-on { background:var(--svx-primary); border-color:var(--svx-primary); color:#fff; }
.sch-preview-btn.is-on i { color:#fff; }
/* 미리보기는 방문자 팝업과 같은 부품을 쓴다 — 위치·그림자는 ticker.css, 색·달력·확대는 schedule.css. .svx-tk 클래스만 빼서 ticker.js 의 자동 열기를 피하고, 그 클래스가 갖던 표시 속성만 여기서 준다 */
.sch-preview-float { overflow:hidden; opacity:0; pointer-events:none; transition:opacity .26s ease-out, transform .35s cubic-bezier(.2,.9,.3,1.05), bottom .4s cubic-bezier(.2,.9,.3,1.05); }
.sch-preview-float[hidden] { display:none; }
.sch-preview-float.is-open { opacity:1; pointer-events:auto; }
/* 타이틀 밑 관련 공지 입력 (문구 + 링크 + 새창) — 입력값 있을 때만 프론트 타이틀바 밑에 바로가기 바 노출 */
.sch-notice-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr) auto; gap:6px; align-items:center; margin-top:8px; }
/* §2026-09-25 — 1fr 은 입력칸의 기본 폭(약 170px) 아래로 못 줄어, 1440px 오른쪽 설정 카드에서 「새 창」이 카드 밖으로 밀려 잘렸다(§12-43). */
.sch-notice-in { width:100%; padding:7px 9px; font-size:.8rem; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card,#fff); color:var(--svx-ink); box-sizing:border-box; }
.sch-notice-in:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 2px rgba(124,58,237,.12); }
.sch-notice-newwin { display:inline-flex; align-items:center; gap:4px; font-size:.74rem; color:var(--svx-mute); white-space:nowrap; cursor:pointer; }
/* 위젯 꾸미기 — 타이틀바 색상 스와치 (7dex/네이비/그린/레드/블랙/그레이/화이트) */
.sch-deco-title { display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:var(--svx-ink); margin-bottom:9px; }
.sch-deco-title i { color:var(--svx-primary); }
.sch-deco-field { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sch-deco-field > label { font-size:.85rem; color:var(--svx-mute); }
/* 토글 한 줄(확대/축소) — 위 색상 칸과 붙지 않게 간격만 준다. ⚠️ 이 스위치는 자기 라벨을 품고 있어 상위의 회색 라벨 규칙이 걸린다 — 다른 토글과 같은 진한 글씨로 되돌린다 */
.sch-deco-field-sw { margin-top:22px; }
/* 굵게 하지 않는다(사용자 지정). .sch-switch 기본이 700 이라 여기서 낮춘다. 위 .sch-deco-field > label 의 회색 규칙도 함께 이기려면 색을 명시해야 한다. */
.sch-deco-field-sw > label.sch-switch { gap:5px; font-size:.88rem; font-weight:500; color:var(--svx-ink); }
/* 위젯 꾸미기 = 2열(타이틀바 색상 | 노출 페이지 코드) + 세로 구분선 */
.sch-deco-cols { display:flex; align-items:stretch; gap:16px; flex-wrap:wrap; }
.sch-deco-col { display:flex; flex-direction:column; }
.sch-deco-col:first-child { flex:0 0 auto; }
.sch-deco-col-code { flex:1 1 180px; min-width:0; }
/* §2026-09-25 — 바탕 폭을 70px 로 두면 1440px 처럼 «한 줄에 겨우 들어가는» 폭에서 줄바꿈 대신 이 칸이 약 90px 로 눌려 「노/출/페/이/지」가 세로로 쌓였다. 180px 이 안 남으면 다음 줄로 내려간다(1280px 에서는 원래 그렇게 보였다). */
.sch-deco-col .sch-deco-title { margin-bottom:9px; }
.sch-deco-divider { align-self:stretch; width:1px; flex:0 0 auto; background:var(--svx-line); }
/* §2026-09-25 — 두 칸이 한 줄에 안 들어가면(첫 칸 308 + 구분 33 + 노출페이지 180) 세로로 쌓고 구분선을 숨긴다. 화면 폭이 아니라 «이 카드의 폭» 으로 판정한다 — 오른쪽 설정 카드는 1440px 에서 오히려 1024px 보다 좁다(430 vs 728). */
.sch-deco { container-type:inline-size; }
@container (max-width: 520px) { .sch-deco-cols { flex-direction:column; } .sch-deco-col:first-child, .sch-deco-col-code { flex:0 0 auto; min-width:0; } .sch-deco-divider { display:none; } }
/* ⚠️ 세로로 쌓으면 flex-basis 가 «높이» 가 된다 — 노출페이지 칸의 180px 이 빈 높이로 남지 않게 auto 로 되돌린다. */
.sch-code-wrap { display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0; }
.sch-code-in { width:100%; padding:7px 9px; font-size:.8rem; border:1px solid var(--svx-line); border-radius:6px; background:var(--svx-card,#fff); color:var(--svx-ink); box-sizing:border-box; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.sch-code-in:focus { outline:none; border-color:var(--svx-primary); box-shadow:0 0 0 2px rgba(124,58,237,.12); }
.sch-code-hint { font-size:.72rem; color:var(--svx-mute); line-height:1.4; }
.sch-code-hint code { background:var(--svx-bg-alt); padding:1px 5px; border-radius:3px; font-size:.92em; }
/* 14색 = 7칸 두 줄(§2026-09-28) — 순서는 공용 목록 svndex_widget_palette() 그대로. 챗봇 색 칸(aichat-admin.css)도 이 .schc-{키} 를 쓴다. */
.sch-hd-picker { display:inline-grid; grid-template-columns:repeat(7, 24px); align-items:center; gap:9px; }
.sch-hd-swatch { display:inline-block; width:24px; height:24px; flex:0 0 24px; padding:0; margin:0; border:0; background:transparent; border-radius:50%; cursor:pointer; position:relative; box-sizing:border-box; line-height:0; font-size:0; transition:transform .1s ease; }
.sch-hd-swatch input { position:absolute; left:-9999px; opacity:0; width:0; height:0; }
.sch-hd-swatch > span { position:absolute; inset:0; display:block; border-radius:50%; border:1px solid rgba(0,0,0,.18); box-sizing:border-box; background:var(--schc, transparent); }
.sch-hd-swatch:hover { transform:scale(1.12); }
/* 선택 표시 — 종전엔 보라 링 하나뿐이라 **보라 스와치를 고르면 표시가 안 보였고**, 흰색·연한 색에서도 구분이 어려웠다. 흰 안쪽 링 + 바깥 진한 링 + 체크 아이콘 3중으로 어떤 색 위에서도 "이걸 골랐다"가 보이게 한다. */
.sch-hd-swatch:has(input:checked) > span { box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #1e293b; }
.sch-hd-swatch:has(input:checked)::after { content:"\2713"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.72rem; font-weight:900; line-height:1; text-shadow:0 0 2px rgba(0,0,0,.55); pointer-events:none; }
/* 흰색·아주 밝은 스와치는 흰 체크가 안 보이므로 어두운 체크로 뒤집는다 */
.sch-hd-swatch.schc-white:has(input:checked)::after, .sch-hd-swatch.schc-gray:has(input:checked)::after { color:#1e293b; text-shadow:none; }
.schc-7dex { --schc:#7c3aed; }
.schc-navy { --schc:#191970; }
.schc-royal { --schc:#0c2ac0; }
.schc-blue { --schc:#2563eb; }
.schc-red { --schc:#b21010; }
.schc-rose { --schc:#e51a4f; }
.schc-pink { --schc:#dd26ad; }
.schc-black { --schc:#232323; }
.schc-slate { --schc:#475569; }
.schc-gray { --schc:#d6d9dd; }
.schc-white { --schc:#ffffff; }
.schc-orange { --schc:#ffaa00; }
.schc-green { --schc:#16a34a; }
.schc-cyan { --schc:#0891b2; }
/* ── 알림 벨 드롭다운 항목(클릭 딥링크) + /master/notifications 목록 ── */
.svndex-notify-item { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:8px 12px; text-decoration:none; color:inherit; border-radius:6px; }
.svndex-notify-item:hover { background:var(--svx-bg-alt); }
.svndex-notif-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.svndex-notif-summary { font-size:.9rem; color:var(--svx-mute); }
.svndex-notif-toolbar-actions { display:flex; gap:8px; }
.svndex-notif-full-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--svx-line); }
.svndex-notif-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 8px; border-bottom:1px solid var(--svx-line); border-left:3px solid transparent; }
.svndex-notif-row.is-unread { background:rgba(124,58,237,.04); border-left-color:var(--svx-primary); }
.svndex-notif-row-main { flex:1 1 auto; display:flex; align-items:baseline; gap:12px; text-decoration:none; color:var(--svx-ink); min-width:0; }
.svndex-notif-row-main:hover .svndex-notify-title { color:var(--svx-primary); }
.svndex-notif-row.is-unread .svndex-notify-title { font-weight:600; }
.svndex-notif-row-main .svndex-notify-title { flex:1 1 auto; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
/* §2026-09-25 두 줄까지(폰에서 작업 이름 앞에서 끊겼다) */
.svndex-notif-row-main .svndex-notify-time { flex:0 0 auto; font-size:.78rem; color:var(--svx-mute); }
.svndex-notif-row-actions { flex:0 0 auto; display:flex; gap:4px; }
/* ── 접근성 — prefers-reduced-motion 전역 가드. ※ 반드시 이 파일 최하단(모든 규칙 뒤). 관리자 화면의 무한 스피너·펄스는 다른 파일에도 흩어져 있어 * !important 로 일괄 정지한다. duration 을 0 이 아니라 .01ms 로 두는 이유 = transitionend/animationend 를 기다리는 JS 가 멈추지 않게 하려는 표준 관용구 ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
/* ── 코드복사·SNS 활성 표시 — 초록 = 그 값이 이 홈페이지에 **실제로 출력되는** 항목. 값이 있어도 사이트 마크업에 스니펫이 없으면 회색이라, 운영자가 「입력했는데 왜 안 보이지」를 알 수 있다 ── */
.fee-code-btn.is-live { color:#15803d; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); }
.fee-code-btn.is-live:hover { background:rgba(34,197,94,.2); }
.doc-sns-ico.is-live { color:#15803d; border-color:rgba(34,197,94,.45); background:rgba(34,197,94,.1); }
.doc-code-legend { margin-top:6px; font-size:.82rem; line-height:1.6; color:var(--svx-mute,#8b93a7); }
/* 범례 아이콘 = 본문 코드복사 버튼의 축소판 — 같은 모양이어야 무엇을 가리키는지 안다. ⚠️ 세로정렬은 아래 공용 유틸이 책임진다 — 여기에 vertical-align 매직넘버를 다시 넣지 말 것 */
.doc-code-legend i.is-live { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:1px solid rgba(34,197,94,.35); border-radius:5px; background:rgba(34,197,94,.12); color:#15803d; font-size:.72rem; line-height:1; }
/* ══ Phosphor 아이콘 세로정렬 — 전역 기본값. 아이콘 폰트는 글리프가 em 박스 위쪽에 붙어 있어 텍스트와 나란히 두면 항상 위로 뜬다. 필요할 때마다 개별로 붙이면 새 아이콘을 넣을 때마다 다시 어긋나므로 기본값을 여기서 한 번 정하고 예외만 덮는다. ⚠ flex/grid 안의 아이콘에는 vertical-align 이 안 먹는다(그쪽은 align-items 가 맡는다) — 이 규칙은 «글줄 안에 섞여 있는» 아이콘만 교정한다. ══ */
.svndex-admin-shell i.ph, .svndex-admin-shell i[class*=" ph-"], .svndex-admin-shell span.ph, .svndex-admin-shell span[class*=" ph-"] { vertical-align:-.135em; }
/* 버튼·알약처럼 이미 flex 로 가운데 맞추는 곳은 건드리지 않는다. */
.svndex-admin-shell .dx-btn .ph, .svndex-admin-shell .mlw-btn .ph, .svndex-admin-shell .svndex-btn .ph, .svndex-admin-shell .sdx-btn .ph, .svndex-admin-shell .dash-guard .ph, .svndex-admin-shell .svx-iconline-ico .ph { vertical-align:baseline; }
/* ══ 글머리 아이콘 + 텍스트 세로정렬 (공용 유틸) 아이콘마다 눈대중 값(vertical-align:-4px 류)으로 맞추면 글자크기·줄높이·아이콘크기 중 하나만 바뀌어도 어긋나고, 텍스트가 두 줄이 되면 아이콘이 두 줄 전체의 가운데로 내려가 또 어긋난다. 구조적 해법 — ① 줄 전체를 flex + align-items:flex-start(아이콘을 첫 줄에 고정) ② 아이콘 상자의 높이를 그 줄의 line-height 와 같게 두고 그 안에서 글리프를 중앙에 둔다. ══ */
.svx-iconline { display:flex; align-items:flex-start; gap:6px; }
.svx-iconline > .svx-iconline-ico { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; height:calc(1em * var(--svx-iconline-lh, 1.6)); }
.svx-iconline > .svx-iconline-txt { min-width:0; flex:1 1 auto; }
.doc-code-legend b { color:var(--svx-ink,#1f2430); font-weight:600; }
body[data-theme="dark"] .fee-code-btn.is-live { color:#4ade80; background:rgba(34,197,94,.16); border-color:rgba(34,197,94,.4); }
body[data-theme="dark"] .doc-sns-ico.is-live { color:#4ade80; border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.14); }
body[data-theme="dark"] .doc-code-legend i.is-live { color:#4ade80; }
/* ══ 진료과 프리셋 — 좌 = 목록(라디오 · 단일 선택) / 우 = 저장 전 미리보기. 두 박스는 같은 높이로 고정해 좌우 대칭을 맞추고 넘치는 쪽만 안에서 스크롤한다 (드롭다운은 목록 전체가 안 보이고 카드 아래가 통째로 비어 공간이 낭비된다). ══ */
.dx-preset-2col { --dx-preset-h:340px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
.dx-preset-col { min-width:0; display:flex; flex-direction:column; }
.dx-preset-colhead { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.dx-preset-colttl { font-size:.95rem; font-weight:600; color:var(--svx-text,#1e293b); }
.dx-preset-colsub { font-size:.78rem; color:var(--svx-mute); }
.dx-preset-list, .dx-preset-prev { height:var(--dx-preset-h); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--svx-line); border-radius:10px; background:var(--svx-bg-alt); }
.dx-preset-list { padding:8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:2px 6px; align-content:start; }
.dx-preset-group { grid-column:1/-1; margin:9px 0 3px; padding:0 6px; font-size:.72rem; font-weight:700; letter-spacing:.02em; color:var(--svx-mute); }
.dx-preset-group:first-child { margin-top:1px; }
.dx-preset-item { display:flex; align-items:center; gap:7px; min-width:0; padding:6px 8px; border-radius:7px; font-size:.86rem; line-height:1.3; color:var(--svx-text,#1e293b); cursor:pointer; transition:background .12s ease, color .12s ease; }
.dx-preset-item.is-wide { grid-column:1/-1; }
.dx-preset-item > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-preset-item:hover { background:rgba(124,58,237,.07); }
.dx-preset-item:has(input:checked) { background:rgba(124,58,237,.12); color:var(--svx-primary); font-weight:600; }
.dx-preset-prev { padding:2px 12px; }
.dx-preset-row { display:grid; grid-template-columns:98px minmax(0,1fr); gap:10px; align-items:start; padding:9px 0; border-bottom:1px solid var(--svx-line); font-size:.83rem; line-height:1.5; }
.dx-preset-row:last-child { border-bottom:0; }
.dx-preset-k { font-weight:600; color:var(--svx-text,#1e293b); }
.dx-preset-v { min-width:0; color:var(--svx-mute); word-break:keep-all; overflow-wrap:anywhere; }
.dx-preset-foot { margin:7px 0 0; font-size:.78rem; line-height:1.5; color:var(--svx-mute); }
@media (max-width:900px) { .dx-preset-2col { --dx-preset-h:300px; grid-template-columns:minmax(0, 1fr); gap:14px; } }
@media (max-width:560px) { .dx-preset-list { grid-template-columns:minmax(0, 1fr); } .dx-preset-row { grid-template-columns:minmax(0, 1fr); gap:2px; } }
body[data-theme="dark"] .dx-preset-list, body[data-theme="dark"] .dx-preset-prev { background:var(--svx-d-bg-alt); border-color:rgba(255,255,255,.1); }
body[data-theme="dark"] .dx-preset-item { color:var(--svx-d-text,#e2e8f0); }
body[data-theme="dark"] .dx-preset-item:hover { background:rgba(167,139,250,.12); }
body[data-theme="dark"] .dx-preset-item:has(input:checked) { background:rgba(167,139,250,.2); color:#c4b5fd; }
body[data-theme="dark"] .dx-preset-colttl, body[data-theme="dark"] .dx-preset-k { color:var(--svx-d-text,#e2e8f0); }
body[data-theme="dark"] .dx-preset-row { border-bottom-color:rgba(255,255,255,.08); }
/* ══ 초기 설정 미완 안내(화면 정가운데 플로팅) — 토스트와 달리 **중앙**에 떠서 놓칠 수 없게 한다. 배경은 살짝만 어둡게 해 뒤 화면 맥락이 보이게 둔다 — 모달처럼 조작을 막지 않는다(안내일 뿐이다). ══ */
.svx-setup-notice { position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.28); backdrop-filter:blur(2px); animation:svxSetupIn .18s ease-out; }
@keyframes svxSetupIn { from { opacity:0; } to { opacity:1; } }
.svx-setup-card { width:min(440px,100%); padding:30px 28px 24px; background:#fff; border:1px solid var(--svx-line,#e5e7eb); border-radius:18px; box-shadow:0 24px 60px -20px rgba(15,23,42,.35); text-align:center; animation:svxSetupCard .2s cubic-bezier(.2,.8,.2,1); }
@keyframes svxSetupCard { from { transform:translateY(10px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }
.svx-setup-ico { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; margin-bottom:14px; border-radius:50%; background:#fef3c7; color:#b45309; font-size:1.4rem; }
.svx-setup-title { margin:0 0 8px; font-size:1.05rem; font-weight:700; line-height:1.45; color:var(--svx-text,#1e293b); word-break:keep-all; }
.svx-setup-desc { margin:0 0 20px; font-size:.88rem; line-height:1.7; color:var(--svx-mute,#64748b); word-break:keep-all; }
.svx-setup-actions { display:flex; gap:8px; justify-content:center; }
/* 「닫기」 버튼이 이 클래스를 쓰므로 <a> 전용이던 규칙에 네이티브 <button> 리셋(font/line-height)을 더한다 — 안 주면 브라우저 기본 폰트로 떨어져 카드 안에서 혼자 작아진다. ⚠️ 다크모드 광역 button:not(...) 예외 목록에도 같이 넣어야 한다 — 안 하면 그 규칙이 배경을 가로챈다. */
.svx-setup-go { padding:9px 20px; border-radius:999px; font-size:.88rem; font-weight:600; cursor:pointer; border:1px solid transparent; font-family:inherit; line-height:1.4; background:var(--svx-primary,#7c3aed); color:#fff; text-decoration:none; }
.svx-setup-go:hover { filter:brightness(.94); }
body[data-theme="dark"] .svx-setup-card { background:var(--svx-d-card,#1a1525); border-color:rgba(255,255,255,.12); }
body[data-theme="dark"] .svx-setup-title { color:var(--svx-d-text,#e2e8f0); }
@media (max-width:480px) { .svx-setup-card { padding:24px 20px 20px; } }
/* PageSpeed 실측 — 기기별 2분할. 모바일·데스크톱은 가정이 달라 나란히 놓고 본다. */
.cwv-ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.cwv-ps-col { border: 1px solid var(--svx-line, #e6e8ee); border-radius: 10px; padding: 12px; }
.cwv-ps-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cwv-ps-head strong { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; }
.cwv-ps-head .ua-probe-form { margin: 0; }
.cwv-ps-at { margin: 6px 0 0; font-size: .72rem; color: var(--svx-mute, #888); text-align: right; }
.cwv-ps-empty { margin: 0; padding: 18px 0; text-align: center; font-size: .8rem; color: var(--svx-mute, #888); }
@media (max-width: 780px) { .cwv-ps-grid { grid-template-columns: minmax(0, 1fr); } }
/* PageSpeed 캡처 — 외부 도구(라이트하우스·PSI) 결과를 기기별로 붙여 두는 자리. */
/* 한 칸 = 캡처(왼쪽) + 메모·조작(오른쪽). 좁아지면 세로로 접힌다. */
.cwv-shot-item { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; }
.cwv-shot-item + .cwv-shot-item { border-top: 1px dashed var(--svx-line, #e6e8ee); }
.cwv-shot-item.is-summary { grid-template-columns: 1fr; }
.cwv-shot-sub { margin: 0 0 6px; font-size: .74rem; font-weight: 600; color: var(--svx-mute, #64748b); }
.cwv-shot-note.is-summary { height: auto; min-height: 92px; line-height: 1.6; }
@media (max-width: 1100px) { .cwv-shot-item { grid-template-columns: minmax(0, 1fr); } }
.cwv-shot-title { margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: var(--svx-ink, #1f2937); }
.cwv-shot { margin-top: 10px; border-top: 1px dashed var(--svx-line, #e6e8ee); padding-top: 10px; }
.cwv-shot-img { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid var(--svx-line, #e6e8ee); border-radius: 6px; }
.cwv-shot-none { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; max-width: 100%; min-height: 74px; padding: 10px; border: 1px dashed var(--svx-line, #e6e8ee); border-radius: 6px; font-size: .74rem; line-height: 1.5; color: var(--svx-mute, #888); }
.cwv-shot-form { margin: 8px 0 0; }
.cwv-shot-note { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 6px 8px; font-size: .76rem; line-height: 1.4; min-height: 0; height: 32px; resize: vertical; }
.cwv-shot-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cwv-shot-row .sdx-btn-sm { padding: 4px 10px; font-size: .74rem; line-height: 1.3; }
.cwv-shot-row input[type="file"] { flex: 1 1 130px; min-width: 0; font-size: .74rem; color: var(--svx-mute); }
/* 네이티브 파일 버튼 금지 — 화이트 심플로 통일(memory: feedback_no_native_form_controls). */
.cwv-shot-row input[type="file"]::file-selector-button { margin-right:8px; padding:4px 10px; font-size:.74rem; border:1px solid var(--svx-line); border-radius:5px; background:var(--svx-card); color:var(--svx-ink); cursor:pointer; }
.cwv-shot-row input[type="file"]::file-selector-button:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.cwv-shot-row input[type="file"]:disabled::file-selector-button { opacity:.5; cursor:not-allowed; }
/* 버튼 커서 — .sdx-btn-* 계열은 원래 <a> 용이라 cursor 선언이 없었다. 같은 클래스를 <button> 에도 쓰면서 «눌리는 것처럼 안 보이는» 버튼이 생겼다. 개별 클래스마다 붙이면 또 빠뜨리므로 셸의 버튼 전체를 한 번에 규정한다. ⚠ 색이 아니라 커서만 다루므로 다크모드 하이재킹 같은 부작용은 없다. */
.svndex-admin-shell button:not(:disabled):not([disabled]), .svndex-admin-shell a.sdx-btn-violet-large, .svndex-admin-shell a.sdx-btn-sm, .svndex-admin-shell label[for] { cursor: pointer; }
.svndex-admin-shell button:disabled, .svndex-admin-shell button[disabled] { cursor: not-allowed; }
/* PageSpeed API 키 — 제목 우측(권한 뱃지 아래). 측정 흐름과 섞이지 않게 헤더 쪽에 붙인다. */
.svndex-sub.is-pskey { position: relative; }
.cwv-pskey-form { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.cwv-pskey-form input[type="text"] { width: 230px; max-width: 46vw; font-size: .76rem; }
.cwv-pskey-form .sdx-btn-violet-large { padding: 5px 12px; font-size: .78rem; }
/* 등록 여부를 placeholder 색으로 — 초록이면 키가 들어 있다. */
.cwv-pskey-input.is-set::placeholder { color: #059669; opacity: 1; }
.cwv-pskey-input.is-set { border-color: #059669; }
@media (min-width: 900px) { .svndex-sub.is-pskey .cwv-pskey-form { position: absolute; top: 58px; right: 1.4rem; margin: 0; } }
/* §2026-09-25 right 14px → 카드 안쪽 여백(1.4rem)과 같은 선. 위 P·M·S 뱃지와 오른쪽 끝이 맞는다 */
/* §2026-09-25 — 좁은 화면에서는 제목 아래 한 줄 전체를 쓴다. 종전엔 오른쪽 정렬로 왼쪽이 비고(입력칸 230px 고정) 예시 문구가 잘렸으며, 아래 설명 글에 여백 없이 붙었다. */
@media (max-width: 899px) { .svndex-sub.is-pskey .cwv-pskey-form { justify-content:flex-start; margin:4px 0 12px; } .svndex-sub.is-pskey .cwv-pskey-form input[type="text"] { flex:1 1 200px; width:auto; max-width:none; min-width:0; } }
/* ⑤ 위반 알림 — 값 두 개짜리 설정이라 한 줄로. */
.cwv-alert-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.cwv-alert-row .dx-checkbox-row { margin: 0; }
.cwv-alert-num { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; }
.cwv-alert-num input[type="number"] { width: 84px; text-align: right; }
.cwv-alert-row .sdx-btn-violet-large { padding: 6px 16px; font-size: .82rem; }
.cwv-alert-hint { margin: 8px 0 0; font-size: .74rem; line-height: 1.6; color: var(--svx-mute, #888); }
/* 301 전송 목록 (PAGE 화면 하단 카드) */
.rd-card-body { padding: 18px 20px 20px; }
.rd-count { font-weight: 400; color: var(--svx-mute, #888); }
/* 제목 옆 풀이 — 「URL 브릿지」만으로는 무슨 기능인지 모르는 운영자가 있다(2026-09-23 개명). 이름은 굵게, 풀이는 한 단계 흐리게 둬서 제목 줄이 두 덩어리로 읽히게 한다. */
.rd-sub { font-weight: 400; font-size: .86em; color: var(--svx-mute, #888); }
.rd-desc { margin: 6px 0 0; font-size: .78rem; line-height: 1.6; color: var(--svx-mute, #888); }
.rd-flash { margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; font-size: .8rem; }
.rd-flash.is-success { background: var(--svx-success-bg, #dcfce7); color: var(--svx-success-tx, #065f46); }
.rd-flash.is-error { background: var(--svx-error-bg, #fee2e2); color: var(--svx-error-tx, #991b1b); }
.rd-empty { margin: 14px 0 0; font-size: .82rem; color: var(--svx-mute, #888); }
.rd-acc .sdx-overflow-x { margin-top: 16px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.rd-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.rd-table thead th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; text-align: left; white-space: nowrap; background: var(--svx-card, #fff); border-bottom: 1px solid var(--svx-line, #e5e7eb); font-weight: 600; }
.rd-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--svx-line, #e5e7eb); vertical-align: middle; }
.rd-table tbody tr:last-child td { border-bottom: 0; }
.rd-table code { font-size: .76rem; word-break: normal; overflow-wrap: anywhere; }
/* §2026-09-25 break-all 은 「seed-ful / l-demo」처럼 낱말 중간을 끊었다 → «/»·«-» 뒤를 먼저 쓰고, 그래도 넘칠 때만 아무 데서나 */
.rd-table .rd-from { min-width: 160px; }
.rd-table .rd-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-when { white-space: nowrap; color: var(--svx-mute, #888); }
.rd-code { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--svx-bg-alt, #eef2ff); color: var(--svx-ink, #3730a3); font-size: .7rem; }
.rd-warn { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: .72rem; color: var(--svx-warn-tx, #92400e); }
.rd-act { width: 1%; text-align: center; }
.rd-del-form { margin: 0; }
.rd-del { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--svx-line, #e5e7eb); border-radius: 7px; background: transparent; color: var(--svx-mute, #888); cursor: pointer; }
.rd-del:hover { border-color: var(--svx-error, #f87171); background: var(--svx-error-bg, #fee2e2); color: var(--svx-error-tx, #b91c1c); }
.rd-row:hover td { background: var(--svx-bg-alt, #f8f9fb); }
.rd-from, .rd-to { max-width: 320px; }
.rd-th-sub { margin-left: 4px; font-weight: 400; font-size: .72rem; color: var(--svx-mute, #888); }
.rd-desc em { font-style: normal; padding: 0 3px; border-radius: 4px; background: var(--svx-bg-alt, #f1f2f4); }
.rd-from a, .rd-to a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--svx-line, #e5e7eb); }
.rd-from a:hover, .rd-to a:hover { color: var(--svx-primary, #7c3aed); border-bottom-color: currentColor; }
.rd-acc .rd-count { font-size: .78rem; }
.rd-sum-hint { font-size: .76rem; color: var(--svx-mute, #888); }
.rd-acc .rd-card-body { padding: 16px 18px 18px; }
.rd-acc .rd-desc { margin-top: 0; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--svx-line, #e5e7eb); }
@media (max-width: 1100px) { .rd-sum-hint { display: none; } }
/* §2026-09-25 — 접이식 머리의 제목·부제·건수·경고가 각자 줄을 바꿔 「URL 브릿 / 지」「1046 / 건」「확인 필요 / 1046」처럼 쪼개졌다. 덩어리마다 한 줄로 두고, 모자라면 덩어리째 다음 줄로 넘긴다. 설명 문구는 1100px 이하에서 숨긴다(펼치면 같은 안내가 있다). */
.rd-acc .pop-preset-sum-l { flex-wrap:wrap; row-gap:4px; }
.rd-acc .pop-preset-sum-l > strong, .rd-acc .rd-sub, .rd-acc .rd-count, .rd-acc .rd-warn { white-space:nowrap; }
/* 깨진 유입 — 예전 주소 안내 안쪽 */
.rd-miss { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--svx-warn-line, #b45309); border-radius: 10px; background: var(--svx-warn-bg, #fffbeb); }
.rd-miss-tt { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--svx-warn-tx, #92400e); }
.rd-miss-desc { margin: 6px 0 0; font-size: .78rem; line-height: 1.6; color: var(--svx-ink, #333); }
.rd-miss .sdx-overflow-x { margin-top: 10px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.rd-miss-table thead th { background: transparent; }
.rd-miss-form { display: flex; align-items: center; gap: 6px; margin: 0; }
.rd-miss-sel { min-width: 200px; max-width: 280px; font-size: .76rem; }
.rd-miss-ok, .rd-miss-no { padding: 5px 12px; border-radius: 7px; font-size: .76rem; cursor: pointer; white-space: nowrap; }
.rd-miss-ok { border: 1px solid var(--svx-primary, #7c3aed); background: var(--svx-primary, #7c3aed); color: #fff; }
.rd-miss-ok:hover { background: var(--svx-primary-d, #6d28d9); }
.rd-miss-no { border: 1px solid var(--svx-line, #e5e7eb); background: transparent; color: var(--svx-mute, #888); }
.rd-miss-no:hover { border-color: var(--svx-mute, #888); color: var(--svx-ink, #333); }
.rd-act-wide { width: auto; text-align: left; }
.rd-ad { display: inline-block; margin-right: 5px; padding: 1px 6px; border-radius: 999px; background: var(--svx-error-bg, #fee2e2); color: var(--svx-error-tx, #991b1b); font-size: .68rem; font-weight: 600; }
.rd-server { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--svx-line, #e5e7eb); }
.rd-server-tt { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .88rem; }
.rd-kind { display: inline-block; min-width: 40px; margin-right: 7px; padding: 1px 6px; border-radius: 4px; font-size: .64rem; font-weight: 700; letter-spacing: .02em; text-align: center; vertical-align: 1px; }
.rd-kind.is-page { background: #eef2ff; color: #3730a3; }
.rd-kind.is-post { background: #ecfdf5; color: #065f46; }
.rd-kind.is-dev { background: #fef3c7; color: #92400e; }
.rd-kind.is-member { background: #f1f5f9; color: #334155; }   /* 회원 화면(로그인·가입·마이페이지 등 — 라우터가 여는 시스템 화면) */
.rd-kind.is-orphan { background: var(--svx-error-bg, #fee2e2); color: var(--svx-error-tx, #991b1b); }
/* SUPPORT 공지 본문 — 제작사가 쓴 서식(sanitize 통과분)을 그대로 보여주는 자리. 관리자 카드 안이라 폭·여백만 잡고 타이포는 셸을 따른다. */
.sdx-support-body { font-size: 1.125rem; line-height: 1.5; color: var(--svx-ink); word-break: keep-all; overflow-wrap: anywhere; }
.sdx-support-body p { margin: .6em 0; }
.sdx-support-body p:first-child { margin-top: 0; }
.sdx-support-body p:last-child { margin-bottom: 0; }
.sdx-support-body ul, .sdx-support-body ol { margin: .6em 0; padding-left: 1.6em; }
.sdx-support-body a { color: var(--svx-primary); }
.sdx-support-body img, .sdx-sup-bub .bb img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: .6em 0; }
/* 에디터에서 고른 이미지 폭(25·50·75·100%)이 보기 화면에도 그대로 따라오게 한다 — 종전에는 이 클래스가 보기 쪽에 아예 없어서, 반으로 줄여 저장해도 전폭으로 나왔다. */
.sdx-support-body img.svx-img-w-25, .sdx-sup-bub .bb img.svx-img-w-25 { width: 25%; max-width: 25%; }
.sdx-support-body img.svx-img-w-50, .sdx-sup-bub .bb img.svx-img-w-50 { width: 50%; max-width: 50%; }
.sdx-support-body img.svx-img-w-75, .sdx-sup-bub .bb img.svx-img-w-75 { width: 75%; max-width: 75%; }
.sdx-support-body img.svx-img-w-100, .sdx-sup-bub .bb img.svx-img-w-100 { width: 100%; max-width: 100%; }
/* SUPPORT 문의 — 주고받는 대화라 «버블» 로 그린다(2026-09-22 사용자 지정). ⚠️ 두 번 고쳤다: ①좌우 색띠 목록 → 낯설다 ②ㄴ 평면 나열 → 「답글이 아니라 댓글」. 1:1 대화에는 말풍선이 맞다 — 누가 말하는 차례인지 한눈에 보인다. ⚠️ 「내 쪽」은 **보는 사람 기준**이다. 엔진에서는 제작사가, 병원 화면에서는 병원이 오른쪽에 온다. */
.sdx-sup-talk { margin-top: 20px; border-top: 1px solid var(--svx-line); padding-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.sdx-sup-bub { max-width: 74%; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sdx-sup-bub.is-mine { align-self: flex-end; align-items: flex-end; }
.sdx-sup-bub .bh { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .88rem; color: var(--svx-mute); padding: 0 4px; }
.sdx-sup-bub .bh .nm { color: var(--svx-ink); font-weight: 600; }
/* ⚠️ 말풍선 배경은 «고정 밝은색» 이다(연보라·연노랑). 글자를 var(--svx-ink) 로 두면 다크모드에서 글자만 밝아져 **밝은 배경에 밝은 글자**가 된다 — 실측으로 한 글자도 안 읽혔다. 배경을 고정했으면 글자도 고정한다. */
.sdx-sup-bub .bb { border: 1px solid var(--svx-line); border-radius: 14px; border-top-left-radius: 4px; padding: 14px 18px; background: var(--svx-card); font-size: 1.125rem; line-height: 1.5; color: #1f2937; word-break: keep-all; overflow-wrap: anywhere; }
.sdx-sup-bub .bb a { color: #6d28d9; }
.sdx-sup-bub .bb strong, .sdx-sup-bub .bb b { color: #111827; }
/* 꼬리 방향만 «보는 사람» 기준 — 내 말풍선이 오른쪽에 온다. */
.sdx-sup-bub.is-mine .bb { border-top-left-radius: 14px; border-top-right-radius: 4px; }
/* ⚠️ 색은 «누가 썼는가» 로 고정한다(2026-09-22 사용자 지정). 어느 화면에서 보든 제작사 글은 연보라, 병원 글은 연노랑이다 — 위치(is-mine)와 섞지 말 것. 섞으면 같은 글이 엔진에서는 보라, 병원에서는 노랑으로 보여 대화를 못 따라간다. */
.sdx-sup-bub.is-hub .bb { background: #f5f3ff; border-color: #ddd6fe; }
.sdx-sup-bub.is-hub .bh .nm { color: var(--svx-primary); }
.sdx-sup-bub.is-site .bb { background: #fefce8; border-color: #fde68a; }
.sdx-sup-bub.is-site .bh .nm { color: #92400e; }
.sdx-sup-bub .bb p { margin: .6em 0; }
.sdx-sup-bub .bb p:first-child { margin-top: 0; }
.sdx-sup-bub .bb p:last-child { margin-bottom: 0; }
.sdx-sup-bub .bb img { max-width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 720px) { .sdx-sup-bub { max-width: 90%; } }
/* 원글 — 대화의 시작이라 전체 폭으로 둔다. */
.sdx-sup-origin { background: var(--svx-bg-alt); border: 1px solid var(--svx-line); border-radius: 8px; padding: 16px 18px; }
.sdx-sup-writebox { margin-top: 20px; border-top: 1px solid var(--svx-line); padding-top: 18px; }
/* SUPPORT 목록 — 관리자 일반 표(dx-table)를 게시판답게 다듬는다. ⚠️ 삭제 버튼은 여기서 따로 그린다. `.sm-btn.is-danger` 는 `.svndex-act-pop` 안에서만 정의돼 있어 그 밖에서는 «보라색 일반 버튼» 으로 보인다(실측 — member.php 강제탈퇴도 같은 상태다). */
/* 두 게시판의 목록·쓰기·보기 모두 1200px 까지만 쓴다(사용자 지정) — 넓은 화면에서 표가 늘어나면 제목 칸이 남는 폭을 다 먹고, 본문도 한 줄이 너무 길어져 읽기 어렵다. */
.sdx-sup-card { max-width: 1200px; }
.sdx-sup-tb td { vertical-align: middle; }
.sdx-sup-tb .ttl { font-size: 1.05rem; font-weight: 600; color: var(--svx-ink); text-decoration: none; }
.sdx-sup-tb .ttl:hover { color: var(--svx-primary); text-decoration: underline; }
/* 좁은 열은 머리글·값을 «가운데» 로 맞춘다 — 값이 알약·아이콘이라 좌측 정렬이면 머리글과 어긋나 보인다. 제목·병원(첫 열)은 글이라 좌측 그대로 둔다. */
/* ⚠️ 폭·줄바꿈만 열 전체에 준다. 글자 크기·색을 여기 두면 **머리글까지** 먹어 「날짜」 머리글만 작고 회색이 된다(실측 2026-09-22). 표시 속성은 td 에만. */
.sdx-sup-tb .col-date { white-space: nowrap; width: 1%; }
.sdx-sup-tb .col-act { white-space: nowrap; width: 1%; text-align: center; }
.sdx-sup-tb .col-site { white-space: nowrap; width: 1%; }
.sdx-sup-tb .col-state { white-space: nowrap; width: 1%; text-align: center; }
/* 머리글은 좁은 열 전부 가운데(사용자 지정). 값은 각자 자연스러운 쪽 — 날짜는 좌측 그대로 둔다. */
.sdx-sup-tb th.col-site, .sdx-sup-tb th.col-date, .sdx-sup-tb th.col-act, .sdx-sup-tb th.col-state { text-align: center; }
.sdx-sup-tb td.col-date { text-align: left; color: var(--svx-mute); font-size: .92rem; }
/* 셀 세로 가운데. td 기본값이 baseline 이라, 제목 칸의 flex(.sdx-sup-title) baseline 이 그 안의 별 아이콘 기준으로 내려가면 **날짜 칸이 통째로 따라 내려간다**(2026-09-22 실측). 별이 있는 행만 더 내려가서 «조금씩 어긋난» 모양이 된다 — 행마다 다른 것이 단서였다. */
.sdx-sup-tb th, .sdx-sup-tb td { vertical-align: middle; }
/* 행 높이 — 허브(관리 칸 있음)와 사이트(없음)가 달라 보이던 것을 맞춘다(2026-09-22 사용자 지적). 원인은 패딩이 아니라 «칸 안에 무엇이 들었나» 였다 — 허브는 관리 버튼 30px 이 행을 밀어 47px, 사이트는 제목 글줄 21px 뿐이라 38px 였다. 허브 쪽이 보기 좋다고 하셨으므로 그 30px 를 기준으로 삼아 제목 칸에 최소 높이를 준다(패딩을 건드리면 허브가 같이 높아진다). 공지·문의 같은 표라 한 번만. */
.sdx-sup-tb tbody .sdx-sup-title { min-height: 30px; }
/* 행 전체를 누를 수 있게 — 제목 링크의 ::after 를 행 크기로 펼친다(JS 없이. 기준이 되도록 tr 에 relative). ⚠️ 관리 칸의 수정·삭제는 덮개 «위» 로 올려 그대로 눌리게 한다 — 안 올리면 행 이동으로 먹힌다. */
.sdx-sup-tb tbody tr { position: relative; cursor: pointer; }
.sdx-sup-tb tbody .ttl::after { content: ""; position: absolute; inset: 0; }
.sdx-sup-tb tbody .sdx-sup-act { position: relative; z-index: 1; }
/* 「확인」 칸(사이트 전용) — 허브의 「관리」와 «같은 자리 · 같은 상자» 다. 30px 사각·테두리·반지름을 관리 버튼과 맞춰야 두 화면의 골격이 어긋나 보이지 않는다(2026-09-22 사용자 지정). 읽음 표시는 아이콘 색이 아니라 «상자 배경» 으로 한다 — 안 읽음 흰 배경 / 읽음 옅은 회색. ⚠️ 회색을 #eee 류로 박지 말 것: 다크에서 밝은 칩이 되어 반대로 도드라진다. color-mix 는 카드색 기준이라 라이트·다크 양쪽에서 «한 단계 어두운 배경» 으로 따라온다. ※ 읽음은 «그 계정이» 읽은 기록이다(support_notice_read.member_id) — S·M·P 가 각자 다르게 보인다. */
.sdx-sup-read { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--svx-line); border-radius: 6px; background: var(--svx-card); color: var(--svx-mute); font-size: .95rem; line-height: 1; }
.sdx-sup-read.is-read { background: var(--svx-bg-alt); }
.sdx-sup-read.is-read { background: color-mix(in srgb, var(--svx-mute) 14%, var(--svx-card)); }
/* 상세 = 제목·날짜(머리)와 본문 사이 구분선. */
.sdx-sup-card .sdx-sup-head { padding-bottom: 14px; border-bottom: 1px solid var(--svx-line, #e5e7eb); }
.sdx-sup-tb tbody tr:hover { background: var(--svx-bg-alt); }
/* 상태·표시 알약 */
.sdx-sup-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; line-height: 1.6; }
.sdx-sup-pill.is-open { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }
.sdx-sup-pill.is-answered { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.sdx-sup-pill.is-draft { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.sdx-sup-pill.is-wait { background: #fff7ed; color: #b45309; border: 1px dashed #fed7aa; }
.sdx-sup-site { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 8px; font-size: .95rem; font-weight: 600; background: var(--svx-card); color: var(--svx-ink); border: 1px solid var(--svx-primary); }
/* 제목 옆 «주고받은 글 수» — 게시판 댓글수 관례대로 제목 끝에 붙인다. */
.sdx-sup-cnt { display: inline-flex; align-items: center; gap: 3px; height: 21px; padding: 0 8px 0 6px; border-radius: 999px; background: #4b5563; color: #fff; font-size: .78rem; font-weight: 700; line-height: 1; flex: 0 0 auto; }
.sdx-sup-cnt i { font-size: .86rem; line-height: 1; }
/* 제목 칸은 «한 줄 안에서 세로 중앙» — 제목·메달·점·뱃지가 기준선이 아니라 가운데로 맞는다. */
.sdx-sup-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sdx-sup-title .sdx-sup-pill { flex: 0 0 auto; }
.sdx-sup-title .ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 안 읽은 공지 — 점만 찍으면 «말머리 기호» 로 읽혀 무슨 뜻인지 안 잡힌다(2026-09-22 지적). 국내 게시판 관례대로 글자 배지로 둔다. */
/* 공지 분류(§2026-09-29) — 목록 위 알약 버튼 · 쓰기 화면 분류 선택(같은 모양) · 제목 앞 분류 표시. 분류 정본 = svndex_support_notice_categories() */
.sdx-sup-cats { display:flex; flex-wrap:wrap; gap:8px; }
.sdx-sup-cats.is-filter { margin:4px 0 14px; }
.sdx-sup-cats .sdx-sup-cat { position:relative; display:inline-flex; align-items:center; height:32px; margin:0; padding:0 15px; border:1px solid var(--svx-line); border-radius:999px; background:var(--svx-card,#fff); color:var(--svx-ink); font-size:.86rem; font-weight:600; line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.sdx-sup-cats .sdx-sup-cat:hover { border-color:var(--svx-primary); color:var(--svx-primary); }
.sdx-sup-cats .sdx-sup-cat.is-active, .sdx-sup-cats .sdx-sup-cat:has(input:checked) { background:var(--svx-primary); border-color:var(--svx-primary); color:#fff; }
.sdx-sup-cats .sdx-sup-cat input { position:absolute; opacity:0; width:0; height:0; margin:0; }
.sdx-sup-cats .sdx-sup-cat:has(input:focus-visible) { outline:2px solid var(--svx-primary); outline-offset:2px; }
.sdx-sup-catb { flex:0 0 auto; display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:.74rem; font-weight:700; line-height:1; white-space:nowrap; vertical-align:middle; }
.sdx-sup-head .sdx-sup-catb { margin-right:6px; }
.sdx-sup-catb.is-general { background:#f1f5f9; color:#475569; }
.sdx-sup-catb.is-update { background:#ede9fe; color:#5b21b6; }
.sdx-sup-catb.is-security { background:#fee2e2; color:#b91c1c; }
/* 새 글 «N» 네모 상자(§2026-10-13 대표님 — SUPPORT 공지 · COUNSEL · 사이트 게시판 같은 모양 · 값 = board-common.scss «.board-list .badge-new» · 크기·둥글기 = 댓글 말풍선 몸통) */
.sdx-sup-new { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 4px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1; flex: 0 0 auto; }
/* 상단 고정 표시 = 노란 별(2026-09-22 사용자 지정). 메달·핀·화살표를 거쳐 여기로 왔다. ⚠️ transform 으로 기울이지 말 것 — 핀이 그래서 이상해 보였다. */
.sdx-sup-pin { color: #f59e0b; flex: 0 0 auto; line-height: 1; font-size: 1.15rem; }
/* 고정 글은 제목도 찐보라로 갈라 준다 — 아이콘만으로는 목록에서 눈에 안 들어온다. */
body .svndex-admin-main .sdx-sup-title.is-pinned .ttl { color: #5b21b6; font-weight: 700; }
/* §2026-09-24 — 좁은 화면 표 공용 규칙(`.sdx-overflow-x > table { min-width:max-content }`, 4123줄 부근)이 이 표에도 걸려 **제목 칸이 한 줄 전체 길이만큼** 늘었다(실측 390px: 표 10,150px · 제목 열 9,947px). 「관리」 열이 화면 밖으로 밀려 안 보였다. 이 표는 제목이 남는 폭을 쓰고, 날짜·관리·상태 칸만 제 폭을 지킨다(max-width:0 = 표 칸 말줄임의 정석). 폰에서는 제목을 두 줄까지 보인다. */
@media (max-width:1024px) { .sdx-overflow-x > table.sdx-sup-tb { min-width:0; width:100%; } .sdx-sup-tb td.col-title { max-width:0; width:100%; } }
@media (max-width:640px) { .sdx-sup-tb .sdx-sup-title .ttl { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35; font-size:.98rem; } .sdx-sup-tb td.col-date { font-size:.8rem; } }
/* 행 안의 아이콘 버튼 — 평소 무채색, 삭제만 hover 에서 위험색 */
.sdx-sup-act { display: inline-flex; align-items: center; gap: 6px; }
/* ⚠️ `> *` 로 잡으면 삭제 폼(<form>)에 상자가 그려져 «연필은 맨 아이콘, 휴지통만 네모» 가 된다. 실제 버튼인 a·button 만 잡는다. */
.sdx-sup-act a, .sdx-sup-act button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--svx-line); border-radius: 6px; background: var(--svx-card); color: var(--svx-mute); cursor: pointer; text-decoration: none; font-size: .95rem; line-height: 1; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.sdx-sup-act a:hover, .sdx-sup-act button:hover { color: var(--svx-primary); border-color: var(--svx-primary); }
.sdx-sup-act .is-del:hover { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
.sdx-sup-act form { display: inline-flex; margin: 0; padding: 0; border: 0; background: none; }
/* 편집 폼 아래 옵션 줄 — 상태 셀렉트와 체크박스의 «바닥» 을 맞춘다. dx-form-grid-3 는 3등분이라 셀렉트가 쓸데없이 길어지고, 라벨 높이가 달라 세로도 어긋났다. */
/* 편집 폼 아래 옵션 줄 — 두 칸이 «라벨 줄 + 선택 줄» 로 구조가 같다. ⚠️ 종전에는 한쪽이 셀렉트(41px)고 다른 쪽이 체크박스라 높이를 맞추려다 세 번 실패했다. 게다가 `.dx-form-row > label { display:block }`(0,1,1)이 `.doc-chief-toggle`(0,1,0)의 flex 를 이겨서 체크박스가 위로 붙었다 — 선택지를 div 로 한 번 감싸 그 상속을 끊는다. */
.sdx-sup-opts { display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; margin-bottom: 14px; }
.sdx-sup-opts .dx-form-row { margin-bottom: 0; }
.sdx-sup-choice { display: flex; align-items: center; gap: 20px; min-height: 26px; }
/* 빈 목록 — 표 대신 안내 카드가 나올 때의 여백 */
.sdx-sup-empty { text-align: center; padding: 28px 16px; color: var(--svx-mute); font-size: .9rem; }
/* SUPPORT 본문 서식 — 에디터로 쓴 글이 «쓴 대로» 보이게 한다. ⚠️ 이게 없으면 제목·목록·인용이 그냥 문단으로 나오고, 다크모드에서는 제목이 상속색을 받아 **밝은 말풍선 위 밝은 글자**가 된다(실측: 내용이 통째로 안 보였다). 색은 전부 inherit — 말풍선은 고정 밝은 배경이고 부모가 이미 어두운 글자를 정한다. */
.sdx-support-body h1, .sdx-sup-bub .bb h1 { font-size: 1.7rem; font-weight: 700; line-height: 1.35; margin: .7em 0 .35em; color: inherit; }
.sdx-support-body h2, .sdx-sup-bub .bb h2 { font-size: 1.42rem; font-weight: 700; line-height: 1.35; margin: .7em 0 .35em; color: inherit; }
.sdx-support-body h3, .sdx-sup-bub .bb h3 { font-size: 1.24rem; font-weight: 600; line-height: 1.4; margin: .7em 0 .35em; color: inherit; }
.sdx-support-body h4, .sdx-sup-bub .bb h4, .sdx-support-body h5, .sdx-sup-bub .bb h5, .sdx-support-body h6, .sdx-sup-bub .bb h6 { font-size: 1.1rem; font-weight: 600; line-height: 1.45; margin: .7em 0 .35em; color: inherit; }
.sdx-support-body h1:first-child, .sdx-sup-bub .bb h1:first-child, .sdx-support-body h2:first-child, .sdx-sup-bub .bb h2:first-child, .sdx-support-body h3:first-child, .sdx-sup-bub .bb h3:first-child { margin-top: 0; }
.sdx-sup-bub .bb ul, .sdx-sup-bub .bb ol { margin: .6em 0; padding-left: 1.6em; }
.sdx-support-body blockquote, .sdx-sup-bub .bb blockquote { margin: 0 0 10px; padding: 2px 0 2px 14px; border-left: 3px solid currentColor; opacity: .85; }
.sdx-support-body hr, .sdx-sup-bub .bb hr { border: 0; border-top: 1px solid currentColor; opacity: .2; margin: 14px 0; }
.sdx-support-body table, .sdx-sup-bub .bb table { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.sdx-support-body table td, .sdx-support-body table th, .sdx-sup-bub .bb table td, .sdx-sup-bub .bb table th { border: 1px solid currentColor; padding: 6px 10px; }
/* 빈 문단이 줄만 차지하지 않게 — 에디터가 끝에 <p></p> 를 남긴다. */
/* 빈 문단 = 글쓴이가 엔터로 «일부러» 띄운 줄이다. 종전에는 display:none 으로 지워서, 에디터에서 세 줄 띄우고 저장하면 보기 화면에서 그림이 글에 딱 붙어 나왔다(2026-09-22 사용자 지적). 에디터(ProseMirror)는 빈 문단에도 한 줄 높이를 주므로 여기서도 같은 한 줄을 준다 — 줄간격과 같은 값. */
.sdx-support-body p:empty, .sdx-sup-bub .bb p:empty { min-height: 1.5em; }
/* §2026-10-05 대표님 «작성 화면 = 보기 화면» — 에디터 기능이 고객지원 보기(공지 · 문의 원글 · 말풍선)에서도 제 모양으로 나오게.
   종전: 버튼 = 꾸밈 없는 링크 · 영상 = 빈 칸 · 체크 목록 = 점 목록 · 제목·문단 크기 변형 = 보통 크기 · 형광 글자 = 검정.
   에디터도 이 규칙을 그대로 쓴다(svndex-editor.js 보기 틀 — 본문이 같은 클래스를 단다) — 값은 이 한 곳.
   버튼 색 = 에디터 팔레트(BTN_COLORS) · 게시판·콘텐츠 페이지와 같은 값(검사기 editor-view-parity 가 대조한다).
   버튼 선택자가 길다 — 말풍선 링크 색(body .svndex-admin-main .sdx-sup-bub .bb a = 0,3,2)이 버튼 글자색을 덮지 않게(0,4,2). */
:is(.sdx-support-body, .sdx-sup-bub .bb) mark { color: inherit; padding: 0 .12em; border-radius: 2px; }
:is(.sdx-support-body, .sdx-sup-bub .bb) h2.svx-h-2xl { font-size: 2rem; line-height: 1.3; }
:is(.sdx-support-body, .sdx-sup-bub .bb) h2.svx-h-xl { font-size: 1.75rem; line-height: 1.3; }
:is(.sdx-support-body, .sdx-sup-bub .bb) p.svx-body-xl { font-size: 1.375rem; }
:is(.sdx-support-body, .sdx-sup-bub .bb) p.svx-body-lg { font-size: 1.25rem; }
:is(.sdx-support-body, .sdx-sup-bub .bb) p.svx-sub { font-size: 1rem; color: var(--svx-mute); }
:is(.sdx-support-body, .sdx-sup-bub .bb) p.svx-sub2 { font-size: .9rem; color: var(--svx-mute); }
:is(.sdx-support-body, .sdx-sup-bub .bb) p.svx-note { font-size: .85rem; color: var(--svx-mute); }
:is(.sdx-support-body, .sdx-sup-bub .bb) code { font-family: var(--svx-font-mono); font-size: .92em; }
:is(.sdx-support-body, .sdx-sup-bub .bb) :not(pre) > code { padding: 1px 5px; border-radius: 4px; background: rgba(127, 127, 127, .14); }
:is(.sdx-support-body, .sdx-sup-bub .bb) pre { margin: .6em 0; padding: 12px 14px; border-radius: 8px; background: rgba(127, 127, 127, .12); overflow-x: auto; white-space: pre-wrap; }
:is(.sdx-support-body, .sdx-sup-bub .bb) th { font-weight: 600; background: rgba(127, 127, 127, .08); }
:is(.sdx-support-body, .sdx-sup-bub .bb) .svx-video { position: relative; width: 100%; max-width: 100%; margin: .8em 0; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
:is(.sdx-support-body, .sdx-sup-bub .bb) .svx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
:is(.sdx-support-body, .sdx-sup-bub .bb) ul.svx-editor-tasklist { list-style: none; padding-left: .2em; }
:is(.sdx-support-body, .sdx-sup-bub .bb) ul.svx-editor-tasklist li.svx-editor-taskitem { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 6px; align-items: start; }
:is(.sdx-support-body, .sdx-sup-bub .bb) ul.svx-editor-tasklist li.svx-editor-taskitem > label { display: flex; align-items: center; padding-top: 4px; }
:is(.sdx-support-body, .sdx-sup-bub .bb) ul.svx-editor-tasklist li.svx-editor-taskitem > label > span { display: none; }
:is(.sdx-support-body, .sdx-sup-bub .bb) ul.svx-editor-tasklist li.svx-editor-taskitem > div > p { margin: 0; }
body .svndex-admin-main :is(.sdx-support-body, .sdx-sup-bub .bb) a.svx-btn { display: inline-block; padding: 10px 22px; border-radius: 5px; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
body .svndex-admin-main :is(.sdx-support-body, .sdx-sup-bub .bb) a.svx-btn:hover { opacity: .88; }
body .svndex-admin-main :is(.sdx-support-body, .sdx-sup-bub .bb) a.svx-btn-white { background: #ffffff; color: #111827; border-color: #d1d5db; }
body .svndex-admin-main :is(.sdx-support-body, .sdx-sup-bub .bb) a.svx-btn-gray { background: #e5e7eb; color: #111827; border-color: #d1d5db; }
body .svndex-admin-main :is(.sdx-support-body, .sdx-sup-bub .bb) a.svx-btn-black { background: #1a1d24; color: #ffffff; }
body .svndex-admin-main :is(.sdx-support-body, .sdx-sup-bub .bb) a.svx-btn-red { background: #dc2626; color: #ffffff; }
body .svndex-admin-main :is(.sdx-support-body, .sdx-sup-bub .bb) a.svx-btn-blue { background: #2563eb; color: #ffffff; }
body .svndex-admin-main :is(.sdx-support-body, .sdx-sup-bub .bb) a.svx-btn-green { background: #16a34a; color: #ffffff; }
body .svndex-admin-main :is(.sdx-support-body, .sdx-sup-bub .bb) a.svx-btn-purple { background: #7c3aed; color: #ffffff; }
/* 말풍선 글자색 — **테마와 무관하게 한 벌**이다. 배경이 고정색(연보라·연노랑)이라 라이트·다크에서 글자가 달라지면 안 된다. 🔴 특이도 주의: darkmode.css 가 `body[data-theme="dark"] .svndex-admin-main p|li|label` 을 (0,3,1) 로 **직접** 칠하고 그 파일이 이 파일보다 **뒤에** 로드된다. 상속으로는 절대 못 이기고 같은 (0,3,1) 로도 순서에서 진다 — 그래서 한 단계 높은 (0,3,2) 로 적는다. ⚠️ 관리자에 «배경을 고정색으로 칠하는» 영역을 새로 만들면 여기서 같은 확인을 할 것. darkmode.css 는 p·li·label 을 광역으로 칠한다(버튼 하이재킹과 같은 축). */
body .svndex-admin-main .sdx-sup-bub .bb, body .svndex-admin-main .sdx-sup-bub .bb p, body .svndex-admin-main .sdx-sup-bub .bb li, body .svndex-admin-main .sdx-sup-bub .bb label, body .svndex-admin-main .sdx-sup-bub .bb span, body .svndex-admin-main .sdx-sup-bub .bb div, body .svndex-admin-main .sdx-sup-bub .bb h1, body .svndex-admin-main .sdx-sup-bub .bb h2, body .svndex-admin-main .sdx-sup-bub .bb h3, body .svndex-admin-main .sdx-sup-bub .bb h4, body .svndex-admin-main .sdx-sup-bub .bb h5, body .svndex-admin-main .sdx-sup-bub .bb h6, body .svndex-admin-main .sdx-sup-bub .bb blockquote, body .svndex-admin-main .sdx-sup-bub .bb td, body .svndex-admin-main .sdx-sup-bub .bb th { color: #1f2937; }
body .svndex-admin-main .sdx-sup-bub .bb strong, body .svndex-admin-main .sdx-sup-bub .bb b { color: #111827; }
body .svndex-admin-main .sdx-sup-bub .bb a { color: #6d28d9; }
/* §2026-09-25 — 스크롤 상자 «더 있음» 표시(표 래퍼·고정 높이 목록). 판정 = uix/admin/layout.js 가 붙이는 data-sx(l r t b). 폰·태블릿은 스크롤바를 숨겨 표 뒤쪽 열·목록 아래쪽이 «잘린 것» 처럼 보였다. 다 보이는 상자에는 속성이 없어 모양이 그대로다. · 가로(l r) = 가장자리 «내용» 을 흐린다 — 배경 그림자는 머리글 회색 칸에 가려 안 보인다. · 세로(t b) = 안쪽 그림자 — 흐림으로 하면 목록 상자의 테두리까지 지워져 «잘린 상자» 로 보였다. */
[data-sx~="l"], [data-sx~="r"] { --sx-l: 0px; --sx-r: 0px; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--sx-l), #000 calc(100% - var(--sx-r)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--sx-l), #000 calc(100% - var(--sx-r)), transparent); }
[data-sx~="l"] { --sx-l: 32px; }
[data-sx~="r"] { --sx-r: 32px; }
[data-sx~="b"] { box-shadow: inset 0 -16px 14px -14px rgba(15, 23, 42, .22); }
[data-sx~="t"] { box-shadow: inset 0 16px 14px -14px rgba(15, 23, 42, .22); }
[data-sx~="t"][data-sx~="b"] { box-shadow: inset 0 16px 14px -14px rgba(15, 23, 42, .22), inset 0 -16px 14px -14px rgba(15, 23, 42, .22); }
body[data-theme="dark"] [data-sx~="b"] { box-shadow: inset 0 -16px 14px -14px rgba(0, 0, 0, .7); }
body[data-theme="dark"] [data-sx~="t"] { box-shadow: inset 0 16px 14px -14px rgba(0, 0, 0, .7); }
body[data-theme="dark"] [data-sx~="t"][data-sx~="b"] { box-shadow: inset 0 16px 14px -14px rgba(0, 0, 0, .7), inset 0 -16px 14px -14px rgba(0, 0, 0, .7); }
.svndex-sidebar-notify { display:none; }
/* §2026-09-25 폰·태블릿 머리줄 알림 바로가기 — 넓은 화면에서는 숨김(아래 ≤768 블록이 보인다) */
/* ── COUNSEL 상담 관리(§2026-10-05 U-36) — 화면 = master/pages/counsel.php · 챗봇 리드 표 = api/counsel.php(AI-CHAT 리드 화면과 같은 부품).
   탭 = SETTING 과 같은 .svndex-tabs · 탭 뱃지 = 빨간 원(새 글 수) · 글 상세 = 게시판 글 그대로(본문은 SUPPORT 본문 글꼴을 같이 쓴다). ── */
.sdx-counsel-tabs .svndex-tab .sdx-counsel-badge { align-self:center; }
.sdx-counsel-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:9px; background:#ef4444; color:#fff; font-size:.7rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.sdx-counsel-h-sub { margin-left:6px; color:var(--svx-mute); font-size:.8rem; font-weight:500; }
/* ── COUNSEL 목록·보기 (§2026-10-06 2차 · 대표님 «리스트·뷰 전부 예쁘게») ──
   목록 = 받은편지함 행(1줄 알약·제목 · 2줄 작성자·연락처·추가 항목 · 오른쪽 날짜·답변 상태 · 행 전체가 링크) — 상담 탭과 챗봇 리드(AI-CHAT 리드 화면도) 같은 부품.
   보기 = 위 막대(목록 · 사이트에서 보기) · 머리(알약 · 제목 · 정보) · 연락처·추가 항목 한 판 · 본문 · 답변 흐름(직원 답변 = 브랜드 옅은 칸). */
.sdx-counsel-listhead { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin-bottom:14px; }
.sdx-counsel-listhead h3 { margin:0; }
.sdx-counsel-search { display:flex; align-items:center; gap:6px; margin:0; }
.sdx-counsel-search input[type="search"] { width:220px; max-width:100%; }
.sdx-counsel-tbl { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--svx-line); border-radius:12px; overflow:hidden; background:var(--svx-card); font-size:.88rem; }
.sdx-counsel-tbl th { padding:11px 12px; background:var(--svx-bg-alt); border-bottom:1px solid var(--svx-line); color:var(--svx-mute); font-size:.78rem; font-weight:700; text-align:center; white-space:nowrap; vertical-align:middle; }
.sdx-counsel-tbl td { padding:12px; border-bottom:1px solid var(--svx-line); color:var(--svx-ink); text-align:center; vertical-align:middle; }
.sdx-counsel-tbl tbody tr:last-child td { border-bottom:0; }
.sdx-counsel-tr[data-href] { cursor:pointer; }
.sdx-counsel-tr:hover td { background:var(--svx-bg-alt); }
.sdx-counsel-tr.is-new td:first-child { box-shadow:inset 3px 0 0 #ef4444; }
.sdx-counsel-c-no, .sdx-counsel-c-name, .sdx-counsel-c-tel, .sdx-counsel-c-st, .sdx-counsel-c-chk, .sdx-counsel-c-date { width:1%; white-space:nowrap; }
.sdx-counsel-tbl td.sdx-counsel-c-no { color:var(--svx-mute); font-variant-numeric:tabular-nums; }
.sdx-counsel-tbl td.sdx-counsel-c-name { font-weight:600; }
.sdx-counsel-tbl td.sdx-counsel-c-tel { font-variant-numeric:tabular-nums; }
.sdx-counsel-tbl td.sdx-counsel-c-tel a { color:var(--svx-primary); font-weight:600; text-decoration:none; }
.sdx-counsel-tbl td.sdx-counsel-c-tel a:hover { text-decoration:underline; }
.sdx-counsel-tbl td.sdx-counsel-c-date { color:var(--svx-mute); font-variant-numeric:tabular-nums; }
.sdx-counsel-tbl td.sdx-counsel-c-title { text-align:left; min-width:220px; }
.sdx-counsel-tbl td.sdx-counsel-c-title a { color:var(--svx-ink); font-weight:600; text-decoration:none; }
.sdx-counsel-tr:hover td.sdx-counsel-c-title a { color:var(--svx-primary); }
.sdx-counsel-tbl td.sdx-counsel-c-title .sdx-sup-new { margin-left:6px; vertical-align:middle; }
.sdx-counsel-tbl td.sdx-counsel-c-title .svx-cmt-count + .sdx-sup-new { margin-left:3px; }   /* 말풍선 바로 뒤 «N» = 3px — 말풍선 왼쪽(꼬리 5px + 3px)과 같은 몫 */
.sdx-counsel-tbl td.sdx-counsel-c-title .sdx-counsel-lock { margin-right:4px; }
.sdx-counsel-tbl td.sdx-counsel-c-msg { text-align:left; min-width:220px; max-width:420px; color:var(--svx-mute); }
.sdx-counsel-tbl td.sdx-counsel-c-msg > span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sdx-counsel-tbl td.sdx-counsel-c-ex { text-align:left; }
.sdx-counsel-tbl td.sdx-counsel-c-ex .post-extras { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:2px 8px; margin:0; font-size:.84rem; }
.sdx-counsel-tbl td.sdx-counsel-c-ex .post-extras dt { color:var(--svx-mute); }
.sdx-counsel-tbl td.sdx-counsel-c-ex .post-extras dd { margin:0; }
.sdx-counsel-1line { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sdx-counsel-tbl td.sdx-counsel-c-title { max-width:0; width:46%; }
.sdx-counsel-tbl td.sdx-counsel-c-memo { max-width:0; width:30%; min-width:160px; text-align:left; color:var(--svx-ink); }
.sdx-counsel-tbl td.sdx-counsel-c-title .sdx-counsel-1line > * { vertical-align:middle; }
/* §2026-10-13 대표님 — 제목이 길면 «제목만» 줄임표로 잘리고 말풍선·N 은 늘 보인다(종전엔 줄 전체가 잘려 말풍선·N 이 사라졌다). 641px 이상만 — 폰은 아래 두 줄 접기 규칙. */
@media (min-width:641px) {
  .sdx-counsel-tbl td.sdx-counsel-c-title .sdx-counsel-1line { display:flex; align-items:center; gap:6px; }
  .sdx-counsel-tbl td.sdx-counsel-c-title .sdx-counsel-1line > * { flex:0 0 auto; margin-right:0; }
  .sdx-counsel-tbl td.sdx-counsel-c-title .sdx-counsel-1line > a,
  .sdx-counsel-tbl td.sdx-counsel-c-title .sdx-counsel-1line > .sdx-counsel-muted { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sdx-counsel-tbl td.sdx-counsel-c-title .sdx-counsel-1line > .sdx-sup-new { margin-left:0; }
  .sdx-counsel-tbl td.sdx-counsel-c-title .sdx-counsel-1line > .svx-cmt-count + .sdx-sup-new { margin-left:3px; }
}
.sdx-counsel-state { display:flex; flex-direction:column; gap:12px; margin:24px 0 0; padding:16px 18px; border:1px solid color-mix(in srgb, var(--svx-primary) 22%, var(--svx-line)); border-radius:12px; background:color-mix(in srgb, var(--svx-primary) 4%, var(--svx-card)); }
.sdx-counsel-state-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; }
.sdx-counsel-state-head h3 { display:flex; align-items:center; gap:6px; margin:0; color:var(--svx-ink); font-size:1rem; }
.sdx-counsel-state-head h3 small { margin-left:4px; color:var(--svx-mute); font-size:.78rem; font-weight:500; }
.sdx-counsel-state-row { display:grid; grid-template-columns:96px minmax(0, 1fr); align-items:center; gap:12px; }
.sdx-counsel-state-row.is-memo { align-items:start; }
.sdx-counsel-state-lbl { color:var(--svx-mute); font-size:.86rem; font-weight:600; }
.sdx-counsel-state-row.is-memo .sdx-counsel-state-lbl { padding-top:10px; }
.sdx-counsel-state .sdx-counsel-status { justify-self:start; height:36px; min-width:140px; font-size:.88rem; }
.sdx-counsel-state textarea { width:100%; min-height:84px; padding:10px 12px; border-radius:10px; background:var(--svx-card); resize:vertical; font-size:.92rem; line-height:1.6; }
@media (max-width:640px) { .sdx-counsel-state-row { grid-template-columns:minmax(0, 1fr); gap:6px; } .sdx-counsel-state-row.is-memo .sdx-counsel-state-lbl { padding-top:0; } .sdx-counsel-tbl td.sdx-counsel-c-title { min-width:200px; } .sdx-counsel-tbl td.sdx-counsel-c-memo { min-width:140px; } }
/* §2026-10-12 — 좁은 화면 표 공용 규칙(`.sdx-overflow-x > table { min-width:max-content }`)이 COUNSEL 표에도 걸려, «폭 1%» 칸(번호·작성자·상태·작성일)을 지키느라 표가 10,667px 로 늘었다(실측 1024·768·390 — 제목 열 6,134 · 메모 열 4,000). 폰에서는 제목이 화면 밖이었다. SUPPORT 표(위 §2026-09-24)와 같은 처방 — 표는 칸 폭에 맞추고 제목·메모가 남는 폭을 나눈다. 폰은 제목 두 줄(알약·비밀글 표시는 그 두 줄 안에서 줄을 바꾼다). */
@media (max-width:1024px) { .sdx-overflow-x > table.sdx-counsel-tbl { min-width:0; width:100%; } }
@media (max-width:640px) { .sdx-counsel-tbl td.sdx-counsel-c-title .sdx-counsel-1line { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.6; } }
.sdx-counsel-sub { margin-top:3px; color:var(--svx-mute); font-size:.78rem; font-weight:400; }
.sdx-counsel-tbl.sdx-counsel-leads td.sdx-counsel-c-msg { color:var(--svx-ink); }
.sdx-counsel-pill { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px; border-radius:999px; font-size:.72rem; font-weight:700; line-height:1; white-space:nowrap; }
.sdx-counsel-pill.is-wait { background:#fff7ed; color:#c2410c; }
.sdx-counsel-pill.is-done { background:#ecfdf5; color:#047857; }
.sdx-counsel-pill.is-seen, .sdx-counsel-pill.is-lock { background:var(--svx-bg-alt); color:var(--svx-mute); font-weight:600; }
/* 상태 뱃지 · 댓글 개수 = 공용 «.svx-state» · «.svx-cmt-count»(svndex-ui.css · 사이트 게시판과 같은 모양) */
.sdx-counsel-lock { color:var(--svx-mute); }
.sdx-counsel-cat { display:inline-flex; align-items:center; height:22px; padding:0 9px; margin-right:6px; border-radius:999px; background:#ede9fe; color:#5b21b6; font-size:.72rem; font-weight:700; white-space:nowrap; }
.sdx-counsel-inflow { display:inline-flex; align-items:center; height:22px; padding:0 9px; margin-right:6px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:.72rem; font-weight:700; white-space:nowrap; }
.sdx-counsel-inflow.is-normal { background:#e0f2fe; color:#0369a1; }
.sdx-counsel-muted { color:var(--svx-mute); }
.sdx-counsel-status-form, .sdx-counsel-chk-form { display:inline-flex; align-items:center; gap:4px; margin:0; }
.sdx-counsel-status { height:30px; padding:0 28px 0 10px; border:1px solid var(--svx-line); border-radius:8px; background:var(--svx-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center; color:var(--svx-ink); font-size:.8rem; font-family:inherit; appearance:none; -webkit-appearance:none; cursor:pointer; }
.sdx-counsel-status:focus { outline:none; border-color:var(--svx-primary); }
.sdx-counsel-icon-btn.sm-btn { width:30px; height:30px; min-height:0; padding:0; justify-content:center; }
.sdx-counsel-chk-by { max-width:7em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sdx-counsel-pager { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; color:var(--svx-mute); font-size:.9rem; }
.sdx-counsel-pager a { color:var(--svx-primary); font-weight:600; text-decoration:none; }
.sdx-counsel-pager a:hover { text-decoration:underline; }
/* 보기 */
.sdx-counsel-detail { max-width:1000px; }
.sdx-counsel-vbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
.sdx-counsel-back, .sdx-counsel-site { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.sdx-counsel-vhead { margin:0 0 20px; padding-bottom:18px; border-bottom:1px solid var(--svx-line); }
.sdx-counsel-pills { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px; }
.sdx-counsel-pills > * { margin:0; }
.sdx-counsel-title { margin:0 0 10px; color:var(--svx-ink); font-size:1.45rem; font-weight:800; line-height:1.4; letter-spacing:-.01em; overflow-wrap:anywhere; }
.sdx-counsel-title .sdx-sup-new { vertical-align:middle; }
/* §2026-10-13 대표님 — 글 보기 상태 뱃지 = 제목 줄 오른쪽 끝(첫 줄 높이에 맞춘다) · 위 칩 줄이 비면 숨김 */
.sdx-counsel-titlerow { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 10px; }
.sdx-counsel-titlerow > .sdx-counsel-title { flex:1 1 auto; min-width:0; margin:0; }
.sdx-counsel-titlerow > .svx-state { flex:0 0 auto; margin-top:3px; }
.sdx-counsel-pills:not(:has(*)) { display:none; }
.sdx-counsel-metaline { display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; margin:0; color:var(--svx-mute); font-size:.86rem; }
.sdx-counsel-metaline i { margin-right:2px; opacity:.85; }
.sdx-counsel-metaline small { margin-left:2px; padding:1px 6px; border-radius:999px; background:var(--svx-bg-alt); font-size:.72rem; }
.sdx-counsel-info { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin:0 0 22px; border:1px solid var(--svx-line); border-radius:12px; background:var(--svx-bg-alt); overflow:hidden; }
.sdx-counsel-info > * { margin:0; padding:18px 22px; }
.sdx-counsel-info > * + * { border-left:1px solid var(--svx-line); }
.sdx-counsel-contact, .sdx-counsel-extra .post-extras { display:grid; grid-template-columns:max-content minmax(0, 1fr); align-items:baseline; gap:12px 24px; margin:0; border:0; background:none; font-size:1.06rem; line-height:1.5; }   /* 더 크게(§2026-10-06 대표님) */
.sdx-counsel-extra .post-extras { padding:0; }   /* 안쪽 여백은 겉 칸(.sdx-counsel-info > *)이 준다 — 연락처 칸에 padding:0 을 같이 걸어 글자가 테두리에 붙었다(§2026-10-06) */
.sdx-counsel-contact dt, .sdx-counsel-extra .post-extras dt { color:var(--svx-mute); font-weight:600; }
.sdx-counsel-contact dd, .sdx-counsel-extra .post-extras dd { margin:0; color:var(--svx-ink); overflow-wrap:anywhere; }
.sdx-counsel-contact a { color:#5b21b6; font-weight:600; text-decoration:none; font-variant-numeric:tabular-nums; }   /* 진한 보라(대표님) */
.sdx-counsel-contact a:hover { text-decoration:underline; }
.sdx-counsel-contact dd strong { color:var(--svx-ink); font-weight:700; }
.sdx-counsel-contact dd small { margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--svx-card); color:var(--svx-mute); font-size:.72rem; font-weight:600; vertical-align:middle; }
.sdx-counsel-extra .post-extras img { max-width:240px; height:auto; border-radius:6px; }
.sdx-counsel-body { min-height:60px; margin:0 0 24px; }
.sdx-counsel-files .post-attachments-list { list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.9rem; }
.sdx-counsel-files .post-attachments-list a { color:var(--svx-primary); text-decoration:none; }
.sdx-counsel-files .post-attachments-list a:hover { text-decoration:underline; }
.sdx-counsel-files .post-attachments-list small { color:var(--svx-mute); }
.sdx-counsel-thread { padding-top:22px; border-top:1px solid var(--svx-line); }
.sdx-counsel-cmt-h { display:flex; align-items:center; gap:7px; margin:0 0 14px; font-size:1.02rem; color:var(--svx-ink); }
.sdx-counsel-cmt-h small { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 7px; border-radius:999px; background:var(--svx-bg-alt); color:var(--svx-mute); font-size:.75rem; font-weight:700; }
.sdx-counsel-cmts { display:flex; flex-direction:column; gap:12px; margin:0 0 16px; padding:0; list-style:none; }
.sdx-counsel-cmt { display:flex; gap:12px; padding:14px 16px; border:1px solid var(--svx-line); border-radius:12px; background:var(--svx-card); }
.sdx-counsel-cmt.is-staff { border-color:color-mix(in srgb, var(--svx-primary) 22%, var(--svx-line)); background:color-mix(in srgb, var(--svx-primary) 5%, var(--svx-card)); }
.sdx-counsel-cmt.is-reply { margin-left:28px; }
.sdx-counsel-avatar { flex:0 0 34px; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--svx-bg-alt); color:var(--svx-mute); font-size:.88rem; font-weight:700; }
.sdx-counsel-cmt.is-staff .sdx-counsel-avatar { background:var(--svx-primary); color:#fff; }
.sdx-counsel-avatar.has-img, .sdx-counsel-cmt.is-staff .sdx-counsel-avatar.has-img { overflow:hidden; background:#fff; border:1px solid color-mix(in srgb, var(--svx-primary) 25%, var(--svx-line)); }   /* 사이트 로고 심볼(§2026-10-13) — 흰 바탕이 정본 */
.sdx-counsel-avatar.has-img img { width:70%; height:70%; object-fit:contain; }
/* §2026-10-13 답변·댓글 수정·삭제(사이트 댓글과 같은 모양 — 본문 아래 작은 글자) */
.sdx-counsel-cmt-acts { display:flex; align-items:center; gap:12px; margin-top:6px; }
.sdx-counsel-cmt-delform { display:contents; }
.sdx-counsel-cmt-act { padding:0; border:0; background:none; color:var(--svx-mute); font:inherit; font-size:.8rem; cursor:pointer; }
.sdx-counsel-cmt-act:hover { color:var(--svx-ink); }
.sdx-counsel-cmt-act.is-danger:hover { color:var(--svx-danger, #dc2626); }
.sdx-counsel-cmt-edit { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.sdx-counsel-cmt-edit[hidden] { display:none; }
.sdx-counsel-cmt-edit textarea { width:100%; min-height:84px; padding:10px 12px; border-radius:10px; background:var(--svx-card); resize:vertical; font-size:.95rem; line-height:1.6; }
.sdx-counsel-cmt-edit-acts { display:flex; gap:6px; }
.sdx-counsel-cmt-main { flex:1 1 auto; min-width:0; }
.sdx-counsel-cmt-meta { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-bottom:5px; color:var(--svx-mute); font-size:.82rem; }
.sdx-counsel-cmt-meta strong { color:var(--svx-ink); font-size:.9rem; }
.sdx-counsel-cmt-secret { color:var(--svx-warn-tx); }
.sdx-counsel-cmt-body { color:var(--svx-ink); font-size:.95rem; line-height:1.65; overflow-wrap:anywhere; }
.sdx-counsel-cmt-empty { margin:0 0 16px; padding:18px; border:1px dashed var(--svx-line); border-radius:12px; color:var(--svx-mute); font-size:.9rem; text-align:center; }
.sdx-counsel-cmt-form { display:flex; flex-direction:column; gap:10px; margin:0; padding:16px; border:1px solid var(--svx-line); border-radius:12px; background:var(--svx-bg-alt); }
.sdx-counsel-cmt-label { color:var(--svx-ink); font-size:.92rem; font-weight:700; }
.sdx-counsel-cmt-label small { margin-left:6px; color:var(--svx-mute); font-weight:500; }
.sdx-counsel-cmt-form textarea { width:100%; min-height:110px; padding:12px 14px; border-radius:10px; background:var(--svx-card); resize:vertical; font-size:.95rem; line-height:1.6; }
.sdx-counsel-cmt-actions { display:flex; justify-content:flex-end; align-items:stretch; gap:8px; }
@media (max-width:640px) {
  .sdx-counsel-search { flex:1 1 100%; } .sdx-counsel-search input[type="search"] { flex:1 1 auto; width:auto; min-width:0; }
  .sdx-counsel-info > * + * { border-left:0; border-top:1px solid var(--svx-line); }
  .sdx-counsel-cmt.is-reply { margin-left:12px; }
  .sdx-counsel-title { font-size:1.25rem; }
}

/* ═══════════════ D-6 좁은 화면 보완 (§2026-09-23) ═══════════════ ⚠️ **PC 를 건드리지 않는다.** 이 구역의 모든 규칙은 `max-width` 안에만 있고, 1025px 이상은 종전 그대로다 (1440px 전 요소 계산값 대조로 «변화 0» 을 증명한 뒤 배포했다). ⚠️ **그리드 트랙 선언은 여기 두지 않는다** — `.dash-row*` 는 위쪽에서 1024/640 두 단계로 이미 선언한다. 여기에 또 적으면 «같은 속성 네 곳» 이 되고, 그게 이번에 640 블록을 죽인 원인이었다(§12-84). */
/* ── 대시보드 ── 실측(390px 슬찬): `.dash-card-head` 가 줄바꿈 없는 flex 한 줄에 제목·「진단 코멘트」·가드 게이지 셋을 넣고 있어 **「의료광고 가드」 라벨이 폭 11px · 높이 102px 로 세로 구겨졌다**(한 글자씩 줄바꿈). ⚠️ 라벨을 «줄여서» 넣지 않는다 — 줄이면 또 쌓인다. 줄을 바꾸게 하고 라벨·숫자는 nowrap 으로 고정한다. */
@media (max-width: 768px) { .dash-card { min-width: 0; } .dash-card-head { flex-wrap: wrap; gap: 8px 10px; } .dash-card-head > * { min-width: 0; } .dash-guard { flex-wrap: wrap; } .dash-guard-label, .dash-guard-num { white-space: nowrap; } .dash-guard-bar { flex-wrap: wrap; } }
/* ── 팝업 프리셋 표 ── 6컬럼인데 `.sdx-overflow-x` 안에서 **스크롤이 안 생기고 통째로 눌렸다** (실측 390px: 래퍼 320px = 표 320px · 눌린 칸 26개 · 최악 「한장씩」 27x530px). 래퍼가 `overflow-x:auto` 여도 표가 그 폭에 «맞춰지면» 스크롤이 생길 이유가 없다 — 표에 min-width 를 줘야 비로소 넘치고 스크롤이 생긴다. §2397 의 `.bt-table` 과 같은 처방(압착 대신 가로 스크롤)이다. 값 근거(PC 1440 실측): 유형 708 · 비율 55 · 레이아웃 71 · 권장크기 119 · 미리보기 71 · 추가 117. 설명문이 든 「유형」만 줄바꿈이 잘 되므로 그 칸에 약 210px 을 남기는 640px 으로 잡았다. ⚠️ min-width 는 «그보다 좁아질 때만» 작동한다 — 1024px 화면(본문 약 800px)에서는 걸리지 않으므로 경계를 1024 로 넉넉히 잡아도 태블릿 모습이 바뀌지 않는다(실측 확인). */
@media (max-width: 1024px) { .pop-preset-body .sdx-overflow-x > .pop-preset-tbl { min-width: 640px; } }
/* ── URL 브릿지 표(찾아온 주소 / 연결 목록) ── 같은 모양의 눌림이다. 실측 390px: 주소 칸이 **44px** 로 좁아져 URL 이 한두 글자씩 89px 높이로 쌓였다 — 어느 주소인지 못 읽는다. PC 1440 기준 칸 폭: 「찾아온 주소」 286 · 「어디로 보낼」 593(select+버튼) / 「예전 주소」 418 · 「지금 주소」 384. 주소를 읽을 수 있는 최소선으로 640px 을 준다. */
@media (max-width: 1024px) { .sdx-overflow-x > .rd-table { min-width: 640px; } }
/* ── 관리자 진료일정 달력 ── 방문자 위젯(widget/schedule/schedule.css)에는 640px 축소 규칙이 있는데 **관리자 달력에는 통째로 없어서** PC 용 1.1rem 이 390px 에도 그대로 걸렸다. 실측: 칸 폭 35px 에 글자 17.6px → 「문상현 원장님 휴진」이 한두 글자씩 쌓여 **35x102px** 이 됐다. 칸 패딩이 좌우 9px(= 18px)이라 내용에 17px 만 남은 것이 직접 원인이다. ⚠️ 값은 방문자 위젯 640 블록과 **같게** 둔다 — 3388줄 주석의 약속(「편집화면에서 본 모습 = 실제 화면」)이 값이 갈리는 순간 깨진다. 그쪽을 고치면 여기도 같이 고친다. */
@media (max-width: 640px) { .sch-cal .sch-dow-cell { font-size: .72rem; padding: 5px 0; letter-spacing:-.02em; } .sch-cal .sch-cell { min-height: 50px; padding: 5px 2px; gap: 3px; } .sch-cal .sch-cell-date { font-size: .7rem; } .sch-cal .sch-cell-label { font-size: .7rem; letter-spacing: -.02em; line-height: 1.12; } .sch-cal .sch-cell-holiday { font-size: .55rem; } .sch-cal .has-circle .sch-cell-date { min-width: 20px; height: 20px; padding: 0; } .sch-cal .has-circle .sch-cell-date.is-md { padding: 0 4px; } .sch-cal .sch-cell-pin { width: 7px; height: 7px; } }
/* ── 대시보드 작은 지표 칩 ── `.label` 과 `.value` 가 둘 다 `white-space:nowrap` 이라 한 줄에 안 들어가면 `.value` 가 칸 밖으로 밀린다(실측 320px: 오른쪽 끝 327 > 320). 부모의 `min-width:0` 으로는 안 막힌다 — 줄이지 못하는 것은 자식 쪽이기 때문이다. 줄을 바꾸게 한다(라벨은 nowrap 그대로 두어 «신규 문의» 가 안 쪼개진다). */
@media (max-width: 480px) { .dash-cstat { flex-wrap: wrap; } }
/* ── 진료일정 꾸미기 칸 ── `.sch-deco-col:first-child` 가 `flex:0 0 auto` 라 안 줄어들어, 320px 에서 컬럼이 308px 을 물고 부모(252px)를 넘었다(본문 342>320 가로 스크롤). 좁은 화면에서는 세로로 쌓는다. ⚠️ 세로로 쌓으면 세로 구분선(width:1px)이 «얇은 막대» 로 남는다 — 같이 숨긴다. */
@media (max-width: 640px) { .sch-deco-cols { flex-direction: column; } .sch-deco-col:first-child { flex: 1 1 auto; min-width: 0; } .sch-deco-divider { display: none; } }
/* ── §11 공용 카드 그리드 ── ⚠️ **좀은 폰에서도 2열을 유지한다**(2026-09-23 사용자 지시). 잠시 420px 이하를 1열로 내렸었는데(카드 설명문이 95px 폭에 쌓여서), 사용자는 **2열 배열**을 원한다. 설명문은 그 폭에서 감추고(아래 규칙) 카드는 2열로 둔다 — 카드 높이는 `grid-auto-rows:1fr` 이 이미 맞춘다. */
@media (max-width: 420px) { .sdx-grid .desc { display:none; } .sdx-grid > * { padding:14px 12px; min-height:0; } }
/* ── 관리자 헤더 ── 제목이 긴 화면(7DEX·통계)에서 태블릿 폭(약 900px)이면 사용자 영역이 눌려 **이름이 18px 폭에 60px 높이로 세로로 쌓였다**(실측 900px). 768 이하에는 이미 세로 전환 규칙이 있는데 769~1024 구간만 비어 있었다. 줄을 바꾸게 하고 이름은 쪼개지지 않게 고정한다. ⚠️ PC(1025 이상)는 이 블록 밖이라 한 줄 그대로다. */
@media (max-width: 1024px) { .svndex-admin-header { flex-wrap: wrap; } .svndex-admin-user-name { white-space: nowrap; } }
/* 등급 뱃지는 실제 링크(`<a href="/master">`)인데 22px 이라 손가락으로 누르기 어렵다. §12-63 처럼 **보이는 크기는 그대로 두고 누르는 상자만** 넓힌다(28px). */
@media (pointer: coarse), (max-width: 1024px) { a.svndex-admin-user-badge { position: relative; } a.svndex-admin-user-badge::after { content: ''; position: absolute; inset: -4px -2px; border-radius: 99px; } }
/* ── 티커 노출기간 두 칸 ── `.ticker-row-2col` 은 **미디어쿼리 밖** 기본 규칙이라 이번 일괄 교정에서 빠졌다. 280px 칸에 2열을 물려 각 칸이 191·205px 을 요구했고, 본문이 457>390 으로 가로 스크롤됐다(실측 390px). 그 폭에 2열을 우겨넣으면 칸당 137px 이라 「노출 시작」 라벨과 날짜 입력이 못 들어간다 — 한 열로 내린다. ⚠️ PC(641px 이상)는 이 블록 밖이라 두 칸 그대로다. */
@media (max-width: 640px) { .ticker-row-2col { grid-template-columns: minmax(0, 1fr); } .ticker-row { flex-wrap: wrap; } .ticker-row-2col > .ticker-time-label:first-child::before { content:'~'; visibility:hidden; flex-shrink:0; } }
/* 위아래로 쌓이면 종료 칸만 「~」 폭만큼 밀려 두 칸 왼쪽 끝이 안 맞았다 — 시작 칸에 같은 폭의 빈 자리 */
/* ⚠️ `.ticker-row-options` 는 **일부러** `flex-wrap:nowrap` 이라 건드리지 않는다 — 그 줄은 한 줄 유지가 의도다. */
/* ═══════════════ D-7 좁은 화면 2차 정비 (§2026-09-23, 사용자 지적 7건) ═══════════════ ⚠️ **PC 를 건드리지 않는다.** 표 규칙은 전부 `max-width` 안이고, 알약 nowrap 만 전역인데 넓은 화면에서는 어차피 쪼개지지 않으므로 1440px 전 요소 대조로 «변화 0» 을 증명한 뒤 배포했다. */
/* ── 관리자 표 ── 래퍼(`.sdx-overflow-x`)는 있는데 **표에 최소폭이 없어** 칸이 압착됐다. 실측 390px: UA-403 봇 표 5열이 309px 로 눌려 「검색」이 35px 폭에 2줄, EEAT 의료진 표는 이름이 14px 폭에 3줄이 됐다. 래퍼가 `overflow-x:auto` 여도 **표가 그 폭에 맞춰지면 스크롤이 생길 이유가 없다.** `min-width:max-content` 는 «칸 내용이 안 쪼개지는 최소 폭» 이라 컬럼 수를 CSS 가 몰라도 알아서 맞는다 — 고정 px 를 적으면 컬럼이 늘 때마다 다시 손봐야 한다. ⚠️ 헤더는 따로 nowrap 을 준다. 헤더 글자가 짧아 `max-content` 계산에서 먼저 접히는 일이 있다(실측 「이름」 42x85). */
@media (max-width: 1024px) { .sdx-overflow-x > table { min-width: max-content; } .sdx-overflow-x > table th { white-space: nowrap; } }
/* ── 상태 알약 ── 「사용 중」이 30px 폭에 **3줄**로 쪼개졌다(실측 SSR 부품 표). 알약은 어느 폭에서도 한 덩어리로 읽혀야 하므로 화면 크기와 무관하게 고정한다. */
.dx-status-pill { white-space: nowrap; }
/* ── 고정 px 트랙 그리드 ── D-6 은 `1fr` 만 봤고 **고정 px 트랙**은 안 봤다. 그쪽이 더 단순하게 넘친다 — 컨테이너가 얼마든 트랙 합은 그대로라 좁은 화면에서 그냥 삐져나간다. 실측 390px(본문 약 266~310px): · `.se-engine` 240+1fr+100 = 340 이상 → 가운데 1fr 이 46px 로 짜부라져 「중국 현지 휴대전화번호…」가 46x634px · **33줄**로 쌓였다(사용자 지적). 오른쪽 「발급」 링크는 366~466 으로 본문 밖. · `.em-form-row` 1fr+140+2fr+100 → 계산폭 46/140/78/100 이라 버튼 묶음이 357~457 로 넘쳤다. · `.rev-grid` 1fr+300 → 우측 300px 이 통째로 밀려난다. ⚠️ 한 줄에 우겨넣지 말고 **줄을 바꾼다**(§D-6 과 같은 원칙). PC(1025 이상)는 이 블록 밖이라 그대로 한 줄이다. */
@media (max-width: 1024px) { .se-engine { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; } .em-form-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .rev-grid { grid-template-columns: minmax(0, 1fr); } }
/* ── 버튼·액션 글자 ── 「✕ 삭제」(82px·2줄) · 「← 이전」(68px·2줄) · 「+ 의료진 추가」(103px·2줄) 처럼 **버튼 안 글자가 쪼개지면** 버튼으로 안 보인다. 표 안 액션과 폼 버튼은 한 덩어리로 유지한다. ⚠️ 버튼 전체에 일괄로 주지 않는다 — 긴 문구가 든 버튼은 줄바꿈이 맞고, 그런 것까지 nowrap 하면 버튼이 칸을 넘는다. 실측으로 쪼개진 자리(표 액션 · 뒤로 · 폼 제출)만 고정한다. */
@media (max-width: 1024px) { .sdx-overflow-x > table button, .sdx-overflow-x > table .dx-btn, .sdx-overflow-x > table a, .dx-back-btn, .em-form-row button { white-space: nowrap; } }
/* ── 긴 값 문자열(키·경로) ── 「위치: /700cc3bfa4afd399862e736deaab12ce…」 가 380px 폭을 요구해 본문이 443>390 으로 흔들렸다(실측 SEO IndexNow). 사람이 읽는 문장이 아니라 **기계 값**이라 아무 데서나 접혀도 뜻이 안 상한다 — 줄바꿈을 허용해 칸 안에 들여놓는다. */
@media (max-width: 1024px) { .in-stat { overflow-wrap: anywhere; word-break: break-all; } }
/* ── 카드 머리의 액션 버튼 줄 ── 「← 이전」·「+ 의료진 추가」가 68·103px 폭에 2줄로 쪼개졌다. 버튼 글자는 한 덩어리로 두고, 한 줄에 안 들어가면 **줄을 바꾼다**(§D-6 과 같은 원칙). */
@media (max-width: 1024px) { .dc-actions { flex-wrap: wrap; } .dc-actions > a, .dc-actions > button { white-space: nowrap; } }
/* ── 카드 머리 «제목 + 액션» 줄 ── `.svndex-card-head-row` 가 `flex-wrap:nowrap` 이라, 오른쪽 버튼 묶음(`.sdx-flex-gap-8`)이 `flex-shrink:1` 로 눌렸다. 실측 390px(콘텐츠 법정문서 9화면 공통): 묶음 94px · 「저장」 버튼 **56x52px 2줄**. 옆의 `.sm-btn` 은 1481줄에서 이미 `flex-shrink:0` 인데 이 묶음만 빠져 있었다 — 같은 자리의 형제인데 한쪽만 보호된 모양이다. 두 단계로 나눈다: 태블릿(≤1024)은 버튼만 안 쪼개지게, 폰(≤640)은 **줄을 바꿔** 제목이 폭을 다 쓰게. */
@media (max-width: 1024px) { .svndex-card-head-row { flex-wrap: wrap; } .svndex-card-head-row > .sdx-flex-gap-8 { flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .svndex-card-head-row > .sdx-flex-gap-8 > button, .svndex-card-head-row > .sdx-flex-gap-8 > a { white-space: nowrap; } }
@media (max-width: 1024px) { .svndex-card-head-row > .svndex-card-head-main { flex: 1 1 320px; } .svndex-card-head-row > .sdx-flex-gap-8 { margin-left: auto; } }
/* §2026-09-25 설명이 긴 카드(대리처방·의료급여)만 버튼이 제목 아래 왼쪽으로 떨어져 형제 화면(제증명)과 위치가 갈렸다 — 제목 칸이 줄어들어 버튼은 오른쪽 위 */
@media (max-width: 640px) { .svndex-card-head-row > .svndex-card-head-main { flex: 1 1 100%; } .svndex-card-head-row > .sdx-flex-gap-8 { margin-left: auto; } }
/* §2026-09-24 — 줄이 바뀌면 «설명 아래 여백 16 + 줄 간격 16» 이 겹쳐 설명과 버튼 사이가 32px 비고, 버튼은 다음 칸(표·입력칸·에디터)에 **0px** 로 붙었다(실측 390px: 기관 정보·법정문서·SUPPORT 공지 공통). 여백을 설명이 아니라 줄 전체의 아래에 둔다 — 한 줄일 때도 결과가 같은 16px 다. 단독 버튼(`.sm-btn`)도 묶음(`.sdx-flex-gap-8`)처럼 오른쪽에 둔다. */
@media (max-width: 1024px) { .svndex-card-head-row { row-gap: 12px; margin-bottom: 16px; } .svndex-card-head-row > .svndex-card-head-main > :last-child { margin-bottom: 0; } }
@media (max-width: 640px) { .svndex-card-head-row > .sm-btn { margin-left: auto; } }
/* ── 진료시간 그리드 ── 7열 중 시각 입력 4칸이 `minmax(0,1fr)` 이라 좁은 화면에서 **끝까지 줄어든다.** 실측 390px: 트랙이 `76px 56px 19.5px 19.5px 19.5px 19.5px 48px` — 시각 입력이 **19.5px** 라 값이 안 보이고 머리글 「점심 시작」이 20px 폭에 쌓였다. 이건 `1fr` 함정(§12-43)의 «반대» 경우다 — 바닥이 0 이라 마음껏 줄어든 것이고, 압착 대신 **가로 스크롤**로 보낸다(§D-6 관례). ⚠️ `.dx-hours-grid` 는 `overflow:hidden`(라운드 클리핑)이라 x 만 auto 로 덮는다 — y 는 그대로 hidden. */
@media (max-width: 1024px) { .dx-hours-grid { overflow-x: auto; overscroll-behavior-x: contain; } .dx-hours-head, .dx-hours-row { min-width: 500px; } .dx-hours-head > span { white-space: nowrap; } }
/* ── 좁은 화면 본문 가용폭 ── 아주 좁은 폰에서 **화면의 26%(84px)가 패딩**이었다(실측 320px: main 18px 좌우 + 카드 24px 좌우 → 본문 236px). 카드 안에 또 카드가 있는 «이중 패딩» 은 아니지만, 셸과 카드가 각자 PC 값을 그대로 쓰는 탓에 합계가 커진다. 값이 읽히는 폭을 벌어 준다 — 실측: 320px 236→268(+13.6%) · 390px 306→338. ⚠️ 480px 이하만 건드린다. 768px 이상(태블릿 가로·PC)은 이미 11~22% 라 줄일 이유가 없고, PC 는 여백이 곧 디자인이다. */
@media (max-width: 480px) { .svndex-admin-main { padding-left: 12px; padding-right: 12px; } .svndex-admin-card { padding: 16px 14px; } }
/* ── IndexNow 프리셋 2열 ── `repeat(2, 1fr)` 인데 「Balanced (권장) / 하루 500건까지 통보」 같은 설명이 든 칸이라 최소폭이 크다. 실측 320px: 트랙이 `137.6px 178px` 로 벌어져 **본문이 +64px 흔들렸다** (390px 에서는 안 나타난다 — 아주 좁은 폰에서만 드러나는 축이다). 아주 좁을 때만 한 줄로 세운다. */
@media (max-width: 420px) { .in-preset-list { grid-template-columns: minmax(0, 1fr); } }
/* ── 사이트맵 상태 줄 · SEO 매핑 4칸 ──────────────────────────────────────────── · `.sm-row` 는 `display:flex` + `space-between` 인데, 「색인 통보 대기」 줄만 자식이 **셋**이다 (라벨 + 괄호 설명 + 값). 세 자연폭 합이 약 365px 라 277px 칸에서 전부 눌려 라벨이 65px 2줄, 값 「0건」이 17px 2줄이 됐다. 설명을 **아랫줄 전폭**으로 내려 라벨·값을 한 줄에 둔다 (`order` 로 뒤로 보낸다 — 마크업은 그대로). · `.sm-meta` 는 `repeat(4, 1fr)` 라 320~390px 에서 칸이 62px 밖에 안 돼 「총 영향」·「메인 인덱스」가 쪼개졌다. 넷이라 **2x2** 로 접으면 딱 맞는다(사용자 지시 「모바일도 2열」과 같은 방향). */
@media (max-width: 1024px) { .sm-row { flex-wrap: wrap; gap: 2px 10px; } /* ⚠️ 값(`strong`)에는 nowrap 을 주지 말 것 — 같은 클래스에 「발행·수정·삭제 시 갱신 대상 등록 · XML 은 최대 1시간 내」 같은 **문장**이 들어 있어, 묶으면 359px 를 요구해 본문이 +96px 넘친다(실측으로 당했다. 이 파일 앞쪽 표·버튼 규칙에 같은 경고가 이미 있는데 되풀이했다). 라벨만 묶는다 — 라벨은 항상 짧다. */ .sm-row > span:first-child { white-space: nowrap; } .sm-row > span:not(:first-child) { flex: 1 1 100%; order: 3; } }
@media (max-width: 640px) { .sm-meta, .sc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm-meta > :last-child:nth-child(odd), .sc-meta > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 420px) { .sm-meta > div, .sc-meta > div { padding: 10px 8px; } }
/* §2026-09-25 — Schema 카드의 같은 부품(.sc-meta)은 이 규칙에서 빠져 있어 폰에서도 4열(칸 61px)로 「총 영/향」「POST/등록/→」처럼 쪼개졌다. */
/* ── 의료광고법 가드 카드(`mlw-*`) ── 둘 다 flex 인데 자식이 눌렸다. · `.mlw-actions`(251px)에서 「가드 룰 저장」 버튼이 **119px 2줄** — 버튼 글자는 한 덩어리로 둔다. · `.mlw-soft-head`(209px)는 제목과 오른쪽 개수 표시가 `space-between` 인데, 제목 「안내 항목 4종」이 **50px 2줄**로 눌렸다. 제목을 묶고, 한 줄에 안 들어가면 줄을 바꾼다. */
@media (max-width: 1024px) { .mlw-actions { flex-wrap: wrap; } .mlw-btn { white-space: nowrap; } .mlw-soft-head { flex-wrap: wrap; } .mlw-soft-head h4 { white-space: nowrap; } }
/* ── 카드 하단 액션 버튼줄(IndexNow · 엔진코어-C) ── 좁은 화면에서 버튼 글자가 쪼개졌다 (실측 320px: 「← 이전」 80px 2줄 · 「프리셋 저장」 104px 2줄). 글자는 한 덩어리로 두고 한 줄에 안 들어가면 **줄을 바꾼다**(§D-6·D-7 의 다른 버튼줄과 같은 처방). ⚠️ 긴 문구가 든 버튼에는 주지 않는다 — 이 두 클래스의 라벨은 전부 짧다(전수 확인). */
@media (max-width: 1024px) { .in-form-actions, .cg-actions { flex-wrap: wrap; } .in-btn, .cg-btn { white-space: nowrap; } }
/* ── §2026-09-25 폰·태블릿(≤768) 머리줄 정리 ── · 정보·문의(두 칸)와 홈페이지(큰 칸)가 메뉴 줄 아래 두 줄로 쌓여 머리가 약 190px 였고, 정보·문의는 메뉴 줄에 0~2px 로 붙어 있었다. → 셋을 한 줄로(정보·문의 | 홈페이지). 사이드바를 이 폭에서만 2열 격자로 바꾼다 — 위 두 줄(로고·메뉴)은 두 열을 다 쓴다. · 다크모드·로그아웃이 지름 18px 라 손가락으로 누르기 어려웠다 → 30px. · 알림 건수를 볼 곳이 없었다 → 바로가기(.svndex-sidebar-notify). 넓은 화면에서는 숨긴다(종은 본문 머리에 있다). ⚠️ 이 블록은 위의 큰 ≤768 규칙보다 «뒤» 에 있어야 이긴다(특이도가 같다). */
@media (max-width: 768px) { /* §2026-09-25 정보·문의·홈페이지 = 같은 폭 3칸(사용자 요청 — 홈페이지만 좁았다). 정보·문의 묶음을 display:contents 로 풀어 세 버튼을 같은 격자 칸에 직접 놓는다. 양 끝 6px 칸 + 칸 사이 6px = 화면 가장자리 12px(종전 여백 그대로). ⚠️ 묶음 안 버튼은 사이드바의 «직계 자식» 이 아니라서 칸 번호를 따로 줘야 한 줄에 선다(안 주면 1번 칸 = 6px 에 떨어진다). */ .svndex-admin-sidebar { display:grid; grid-template-columns:6px repeat(3, minmax(0, 1fr)) 6px; column-gap:6px; align-items:stretch; } .svndex-admin-sidebar > * { grid-column:1 / -1; } .svndex-admin-sidebar > .svndex-admin-aux { display:contents; } .svndex-admin-aux > .svndex-aux-item { margin:8px 0 10px; display:flex; } .svndex-admin-aux > .svndex-aux-item:nth-child(1) { grid-column:2; } .svndex-admin-aux > .svndex-aux-item:nth-child(2) { grid-column:3; } .svndex-admin-aux > .svndex-aux-item > .svndex-aux-btn { flex:1; } .svndex-admin-sidebar > .svndex-admin-home-row { display:contents; } .svndex-admin-sidebar .svndex-admin-preview-item { display:none; } .svndex-admin-sidebar .svndex-admin-home-row > .svndex-admin-home { grid-column:4; margin:8px 0 10px; padding:7px 4px; gap:6px; font-size:.75rem; } .svndex-admin-sidebar .svndex-admin-home-row > .svndex-admin-home .ph { font-size:.95rem; } .svndex-aux-btn { color:rgba(221, 221, 238, .72); border-color:rgba(221, 221, 238, .16); } .svndex-admin-sidebar-user .svndex-theme-toggle, .svndex-admin-sidebar-user .svndex-logout-icon { width:30px; height:30px; } .svndex-admin-sidebar-user .svndex-theme-toggle .ph, .svndex-admin-sidebar-user .svndex-logout-icon .ph { font-size:.95rem; } .svndex-sidebar-notify { position:relative; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; color:#dde; text-decoration:none; } .svndex-sidebar-notify .ph { font-size:1.05rem; } .svndex-sidebar-notify-count { position:absolute; top:-3px; right:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#dc2626; color:#fff; font-size:.6rem; font-weight:700; line-height:16px; text-align:center; } }