/* SvndexUi 모달(.svx-ui-modal) — svndex.css 토큰을 그대로 쓴다.
   토스트(.svx-toast)도 이 파일이 한 벌이다 — 관리자 · 인증 · 방문자 화면이 모두 이 파일을 싣는다. */
.svx-ui-modal { padding: 0; border: 1px solid var(--svx-line, #e5e7eb); border-radius: 12px; background: var(--svx-card, #fff); color: var(--svx-ink, #111); box-shadow: 0 20px 50px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .08); max-width: calc(100vw - 32px); width: min(420px, calc(100vw - 32px)); margin: auto; }
.svx-ui-modal::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
/* showModal 시 트랜지션 */
.svx-ui-modal[open] { animation: svx-ui-modal-in .18s ease-out; }
.svx-ui-modal[open]::backdrop { animation: svx-ui-backdrop-in .15s ease-out; }
@keyframes svx-ui-modal-in { from { transform: translateY(-12px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes svx-ui-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.svx-ui-modal-form { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 18px; margin: 0; }
.svx-ui-modal-title { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--svx-ink, #111); line-height: 1.35; }
.svx-ui-modal-lead { font-size: .92rem; line-height: 1.55; color: var(--svx-error, #dc2626); font-weight: 700; white-space: pre-wrap; word-break: keep-all; }
.svx-ui-modal-body { font-size: .92rem; line-height: 1.55; color: var(--svx-ink); white-space: pre-wrap; word-break: keep-all; }
.svx-ui-modal-input-wrap { margin-top: 4px; }
.svx-ui-modal-input { width: 100%; padding: 10px 12px; font-size: .92rem; border: 1px solid var(--svx-line, #d1d5db); border-radius: 8px; background: var(--svx-card, #fff); color: var(--svx-ink, #111); transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box; }
.svx-ui-modal-input:focus { outline: none; border-color: var(--svx-primary, var(--brand-color, var(--c-primary, #7c3aed))); box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 124, 58, 237), .14); }
/* 확인 체크박스(requireCheck) — 체크해야 OK 활성 */
.svx-ui-modal-check-wrap { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 4px; padding: 11px 13px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; cursor: pointer; font-size: .86rem; line-height: 1.45; color: #991b1b; user-select: none; }
/* requireCheck 미사용 다이얼로그 — display:flex 가 [hidden] 의 UA display:none 을 덮어쓰지 못하게 명시 */
.svx-ui-modal-check-wrap[hidden] { display: none; }
.svx-ui-modal-check-wrap input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #dc2626; cursor: pointer; }
.svx-ui-modal-ok:disabled { opacity: .45; cursor: not-allowed; }
.svx-ui-modal-ok:disabled:hover { background: var(--svx-error, #dc2626); border-color: var(--svx-error, #dc2626); }
body[data-theme="dark"] .svx-ui-modal-check-wrap { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .35); color: #fca5a5; }
/* 다크 — 취소 버튼(보조): 위 전역 버튼 규칙에서 :not(.svx-ui-modal-cancel) 로 제외됨 → 여기서 뉴트럴 보조로 명시 */
body[data-theme="dark"] .svx-ui-modal-cancel { background: var(--svx-d-bg-alt); color: var(--svx-d-ink); border-color: var(--svx-d-line-strong); }
body[data-theme="dark"] .svx-ui-modal-cancel:hover { background: var(--svx-d-card-alt); border-color: var(--svx-d-line-violet); }
.svx-ui-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.svx-ui-modal-cancel, .svx-ui-modal-ok { appearance: none; border: 1px solid var(--svx-line, #e5e7eb); background: var(--svx-card, #fff); color: var(--svx-ink, #111); font-size: .9rem; font-weight: 500; padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; min-width: 72px; }
.svx-ui-modal-cancel:hover { background: var(--svx-bg-alt, #f3f4f6); }
.svx-ui-modal-ok { background: var(--svx-primary, var(--brand-color, var(--c-primary, #7c3aed))); border-color: var(--svx-primary, var(--brand-color, var(--c-primary, #7c3aed))); color: #fff; }
.svx-ui-modal-ok:hover { background: var(--svx-primary-d, var(--brand-color-d, var(--c-secondary, #6d28d9))); border-color: var(--svx-primary-d, var(--brand-color-d, var(--c-secondary, #6d28d9))); }
.svx-ui-modal-ok:focus, .svx-ui-modal-cancel:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 124, 58, 237), .22); }
/* ── variant ── */
.svx-ui-modal[data-variant="danger"] .svx-ui-modal-ok { background: var(--svx-error, #dc2626); border-color: var(--svx-error, #dc2626); }
.svx-ui-modal[data-variant="danger"] .svx-ui-modal-ok:hover { background: #b91c1c; border-color: #b91c1c; }
.svx-ui-modal[data-variant="warn"] .svx-ui-modal-ok { background: var(--svx-warn, #d97706); border-color: var(--svx-warn, #d97706); }
.svx-ui-modal[data-variant="warn"] .svx-ui-modal-ok:hover { background: #b45309; border-color: #b45309; }
.svx-ui-modal[data-variant="success"] .svx-ui-modal-ok { background: var(--svx-success, #059669); border-color: var(--svx-success, #059669); }
.svx-ui-modal[data-variant="success"] .svx-ui-modal-ok:hover { background: #047857; border-color: #047857; }
/* ── 다크모드 ── */
body[data-theme="dark"] .svx-ui-modal { background: var(--svx-d-card, #1f2937); border-color: var(--svx-d-line-strong, #374151); color: var(--svx-d-ink-strong, #f3f4f6); box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .35); }
body[data-theme="dark"] .svx-ui-modal::backdrop { background: rgba(0, 0, 0, .65); }
body[data-theme="dark"] .svx-ui-modal-title { color: var(--svx-d-ink-strong, #f3f4f6); }
body[data-theme="dark"] .svx-ui-modal-lead { color: #f87171; }
body[data-theme="dark"] .svx-ui-modal-body { color: var(--svx-d-ink, #d1d5db); }
body[data-theme="dark"] .svx-ui-modal-input { background: var(--svx-d-bg, #111827); border-color: var(--svx-d-line, #374151); color: var(--svx-d-ink-strong, #f3f4f6); }
body[data-theme="dark"] .svx-ui-modal-cancel { background: var(--svx-d-card, #1f2937); border-color: var(--svx-d-line, #374151); color: var(--svx-d-ink, #d1d5db); }
body[data-theme="dark"] .svx-ui-modal-cancel:hover { background: var(--svx-d-bg-alt, #111827); }
/* ── 모바일 ── */
@media (max-width: 480px) { .svx-ui-modal { width: calc(100vw - 24px); border-radius: 10px; } .svx-ui-modal-form { padding: 18px 16px 14px; } }
/* ──────────────────────────────────────────────────────────── */
/* HTMX 로딩 인디케이터 (= 진입 지연 시 = 토스트 형태) */
/* ──────────────────────────────────────────────────────────── */
.svndex-loading-indicator { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(55, 65, 81, 0.96); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3), 0 2px 6px rgba(0, 0, 0, 0.18); pointer-events: none; opacity: 0; transform: translateY(-10px); transition: opacity 0.18s ease, transform 0.18s ease; }
.svndex-loading-indicator.is-visible { opacity: 1; transform: translateY(0); }
.svndex-loading-spinner { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: svndex-loading-spin 0.7s linear infinite; flex-shrink: 0; }
.svndex-loading-msg { white-space: nowrap; }
@keyframes svndex-loading-spin { to { transform: rotate(360deg); } }
body[data-theme="dark"] .svndex-loading-indicator { background: rgba(75, 85, 99, 0.96); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.5); }
@media (max-width: 480px) { .svndex-loading-indicator { top: 12px; right: 12px; padding: 8px 14px; font-size: 12px; } }
/* ──────────────────────────────────────────────────────────── */
/* 토스트(.svx-toast) — 관리자 · 인증 · 방문자 화면 공용 한 벌. 틀 = svndex-ui.js toastNode(아이콘 원 + 제목 + 문구) */
/* ──────────────────────────────────────────────────────────── */
/* 패널 = 색 없는 유리(흰 칠 52→20→32% · 흐림 14px) — 아이콘 원과 글자만 또렷하게. 글자 크기는 px(사이트마다 html 글자 크기가 다를 수 있다).
   클릭을 막지 않는다(보일 때도 pointer-events:none) — 토스트 뒤 단추가 그대로 눌린다.
   폭 = 내용폭(max-content) + 화면 안(100vw − 40px): left:50% 이면 가용폭이 화면 절반이라 좁은 화면에서 글자가 한 글자씩 쌓인다.
   움직임 = 아래 10px · 0.97 에서 떠올라 자리 잡고(넘침 없음) 사라질 때 위로 짧게 빠진다. 움직임 줄이기 = 나타나기·사라지기만.
   업로드 진행(is-progress) = 페이지 이동 전까지 유지 — 실제 진행률이 아니라 «처리 중» 인지만 전달한다. */
.svx-toast { --svx-toast-c1: #22c55e; --svx-toast-c2: #15803d; --svx-toast-glow: rgba(22, 163, 74, .34); position: fixed; top: 50%; left: 50%; z-index: 300000; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: max-content; min-width: min(280px, calc(100vw - 40px)); max-width: min(360px, calc(100vw - 40px)); margin: 0; padding: 26px 30px 22px; border: 1px solid rgba(255, 255, 255, .62); border-radius: 22px; isolation: isolate; text-align: center; font-family: inherit; color: #15131d; background: linear-gradient(135deg, rgba(255, 255, 255, .52) 0%, rgba(255, 255, 255, .20) 48%, rgba(255, 255, 255, .32) 100%); -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.05); backdrop-filter: blur(14px) saturate(190%) brightness(1.05); box-shadow: 0 30px 70px rgba(20, 14, 48, .20), 0 2px 8px rgba(20, 14, 48, .08), inset 0 1px 0 rgba(255, 255, 255, .95), inset 1px 0 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .22), inset 0 0 28px rgba(255, 255, 255, .20); opacity: 0; pointer-events: none; transform: translate(-50%, calc(-50% + 10px)) scale(.97); transition: opacity .22s ease-out, transform .34s cubic-bezier(.16, 1, .3, 1); }
.svx-toast::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(130% 70% at 18% -8%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, 0) 64%); }
.svx-toast::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(315deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 30%); }
.svx-toast.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.svx-toast.is-leaving { opacity: 0; transform: translate(-50%, calc(-50% - 6px)) scale(.98); transition: opacity .18s ease-in, transform .18s ease-in; }
.svx-toast.is-error { --svx-toast-c1: #f05252; --svx-toast-c2: #b91c1c; --svx-toast-glow: rgba(220, 38, 38, .34); }
.svx-toast.is-warn { --svx-toast-c1: #f5a524; --svx-toast-c2: #c2580c; --svx-toast-glow: rgba(217, 119, 6, .34); }
.svx-toast.is-info { --svx-toast-c1: #38bdf8; --svx-toast-c2: #0369a1; --svx-toast-glow: rgba(14, 165, 233, .34); }
.svx-toast.is-lock { --svx-toast-c1: var(--brand-color, var(--c-primary, #8b5cf6)); --svx-toast-c2: var(--brand-color-d, var(--c-secondary, var(--brand-color, #5b21b6))); --svx-toast-glow: rgba(var(--brand-rgb, 124, 58, 237), .34); }
.svx-toast.is-progress { --svx-toast-c1: #94a3b8; --svx-toast-c2: #475569; --svx-toast-glow: rgba(71, 85, 105, .30); }
.svx-toast-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 0 0 12px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--svx-toast-c1), var(--svx-toast-c2)); box-shadow: 0 8px 22px var(--svx-toast-glow), inset 0 1px 0 rgba(255, 255, 255, .35); }
.svx-toast-icon svg { display: block; width: 28px; height: 28px; }
.svx-toast.is-progress .svx-toast-icon::after { content: ""; width: 46%; height: 46%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; box-sizing: border-box; animation: svndex-loading-spin .8s linear infinite; }
.svx-toast-title { display: block; margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: #15131d; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.svx-toast-msg { display: block; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: #2c2a36; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-toast { color: #f5f3ff; border-color: rgba(255, 255, 255, .20); background: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, .09) 100%), rgba(22, 16, 40, .34); box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .10), inset 0 0 28px rgba(255, 255, 255, .05); }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-toast::before { background: radial-gradient(130% 70% at 18% -8%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, 0) 64%); }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-toast::after { background: linear-gradient(315deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 30%); }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-toast-title { color: #f5f3ff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-toast-msg { color: #e4def2; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .svx-toast { background: rgba(255, 255, 255, .96); } :where(html[data-theme="dark"], body[data-theme="dark"]) .svx-toast { background: rgba(34, 27, 56, .96); } }
@media (max-width: 480px) { .svx-toast { padding: 22px 22px 18px; border-radius: 18px; } .svx-toast-icon { width: 48px; height: 48px; margin-bottom: 10px; } .svx-toast-icon svg { width: 24px; height: 24px; } .svx-toast-title { font-size: 16px; } .svx-toast-msg { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .svx-toast, .svx-toast.is-visible, .svx-toast.is-leaving { transform: translate(-50%, -50%); transition: opacity .15s linear; } .svx-toast.is-progress .svx-toast-icon::after { animation: none; border-top-color: rgba(255, 255, 255, .7); } }

/* ── 공용 스크롤바 — 엔진 스크롤 영역 ──
 *
 * 스크롤바 스타일이 여러 파일에 흩어져 있었고, 아예 없는 곳은 브라우저 기본(두꺼운 회색)이 그대로 나와
 * 화면마다 달라 보였다. `.svx-scroll` 을 정본으로 두고 svndex-ui.js 가 엔진 스크롤 영역에 자동으로 붙인다
 * (같은 목록으로 data-lenis-prevent 도 함께 부여 — 새 영역은 그 목록에만 추가하면 된다).
 *
 * ⚠️ 페이지 전체 스크롤바(body)는 여기 대상이 아니다 — 사이트 디자인 소유다. */
.svx-scroll { scrollbar-width: thin; scrollbar-color: var(--svx-scroll-thumb, #e2e8f0) transparent; }
.svx-scroll:hover { scrollbar-color: var(--svx-scroll-thumb-hov, #cbd5e1) transparent; }
.svx-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.svx-scroll::-webkit-scrollbar-track { background: transparent; }
.svx-scroll::-webkit-scrollbar-thumb { background: var(--svx-scroll-thumb, #e2e8f0); border-radius: 5px; transition: background .15s; }
.svx-scroll:hover::-webkit-scrollbar-thumb { background: var(--svx-scroll-thumb-hov, #cbd5e1); }
.svx-scroll::-webkit-scrollbar-thumb:hover { background: var(--svx-scroll-thumb-act, #94a3b8); }

/* 다크 — 막대 색은 «놓인 바탕» 을 따라야 한다. 그래서 선택자가 아니라 토큰으로 준다: 다크 페이지는 어두운 막대,
   다크에서도 흰 채로 두는 부품(에디터 셸)은 자기 안에서 토큰을 밝게 되돌린다(가장 가까운 조상의 값이 이긴다 — 특이도 싸움이 없다).
   종전엔 관리자 다크(body[data-theme])에만 걸려 방문자 다크에서 밝은 막대가 어두운 바탕 위에 흰 줄로 떴다(§2026-09-29).
   :where() = 사이트가 덮으면 순서와 무관하게 이긴다(§12-110). */
:where(html[data-theme="dark"], body[data-theme="dark"]) { --svx-scroll-thumb: #3a3f4b; --svx-scroll-thumb-hov: #4b5563; --svx-scroll-thumb-act: #5b6371; }

/* ═══ 사이트 헤더 오른쪽 단추 — 마이 · 세팅 · 로그아웃 · 번역 · 다크 (8사이트 공통 · §2026-10-06 대표님 «전역으로 통일») ═══
   마크업 = svndex_header_utils()(api/header-utils.php) · 모양 · 크기 · 간격 = 여기 한 곳.
   모양 = 투명 바탕 + 1px 선 원 · 선 = 아이콘 색의 24%(사이트가 따로 정하지 않는다) · 올렸을 때 = 선·아이콘이 강조색.
   사이트가 정하는 것 = 헤더에 변수 둘뿐: --svx-hd-fg(아이콘 = 그 사이트 글자색 토큰) · --svx-hd-hover(강조색 토큰). 어두운 화면은 토큰이 뒤집혀 따라온다.
   ⚠️ 바탕 · 선 · 둥글기 · 크기 · 간격을 사이트가 바꾸지 않는다(§2026-10-06 대표님 «8사이트 공통 · 한두 곳 다르면 신뢰 못 한다» —
      종전 변수 넷이라 슬찬(회색 바탕) · 엔진(흰 바탕) · 우리조은(선 없음)이 갈렸다). 셸 검사 H2 · H4 가 막는다.
   이 파일은 사이트 CSS «뒤» 에 실린다(head-assets). 기준(대표님): PC = 엔진 사이트 값 · 폰 = 강남 값 · 태블릿 = 그 중간.
   폰(≤768)에서는 마이 · 세팅 · 로그아웃을 숨긴다 — 같은 셋이 푸터 카피라이트 왼쪽(svndex_footer_account)에 있다(대표님 결정). */
:root { --svx-hd-btn: 32px; --svx-hd-ico: 15px; --svx-hd-gap: 8px; --svx-hd-flag: 18px; --svx-hd-code: 11px; --svx-hd-code-w: 600; }
@media (max-width: 1024px) { :root { --svx-hd-btn: 30px; --svx-hd-ico: 14.5px; --svx-hd-gap: 7px; --svx-hd-flag: 17px; --svx-hd-code: 10.5px; --svx-hd-code-w: 600; } }
@media (max-width: 768px) { :root { --svx-hd-btn: 26px; --svx-hd-ico: 14.4px; --svx-hd-gap: 6px; --svx-hd-flag: 16px; --svx-hd-code: 9.5px; --svx-hd-code-w: 500; } }
.svx-hd-utils { display: inline-flex; align-items: center; gap: var(--svx-hd-gap); flex-shrink: 0; }
.svx-hd-utils .svx-hd-form { display: inline-flex; margin: 0; }
.svx-hd-utils .svndex-lang { width: var(--svx-hd-btn); height: var(--svx-hd-btn); }
.svx-hd-utils .svx-hd-btn,
.svx-hd-utils .svndex-lang .svndex-lang-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--svx-hd-btn); height: var(--svx-hd-btn); padding: 0; margin: 0; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 24%, transparent); border-radius: 50%; background: transparent; color: var(--svx-hd-fg, inherit); font: inherit; font-size: var(--svx-hd-ico); line-height: 1; text-decoration: none; box-shadow: none; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.svx-hd-utils .svx-hd-btn .ph { font-size: var(--svx-hd-ico); line-height: 1; }
.svx-hd-utils .svndex-lang .svndex-lang-cur.svndex-flag { width: var(--svx-hd-flag); height: var(--svx-hd-flag); }
/* KO · EN 글자 방식 — 폰에서 옆 아이콘보다 커 보였다(대표님 «폰트 크기랑 굵기 줄이면 된다» · 비온) → 11 / 10.5 / 9.5px · 굵기 600 / 600 / 500 */
.svx-hd-utils .svndex-lang .svndex-lang-btn .svndex-lang-code { font-size: var(--svx-hd-code); font-weight: var(--svx-hd-code-w); letter-spacing: .02em; line-height: 1; color: inherit; }
/* 투명 방식(CONTENT 기본 «헤더 단추 배경 = 투명») — 아이콘 색을 사이트 토큰 대신 헤더 글자색에서 받는다(비온처럼 사진 위 어두운 헤더). 모양은 같다 */
.svx-hd-utils.is-ghost .svx-hd-btn,
.svx-hd-utils.is-ghost .svndex-lang .svndex-lang-btn { color: inherit; }
.svx-hd-utils .svx-hd-btn:hover,
.svx-hd-utils .svx-hd-btn:focus-visible,
.svx-hd-utils .svndex-lang:hover .svndex-lang-btn,
.svx-hd-utils .svndex-lang.is-open .svndex-lang-btn { border-color: var(--svx-hd-hover, currentColor); color: var(--svx-hd-hover, inherit); background: transparent; box-shadow: none; }
/* 폰 = 단추가 26px 라 누르는 영역만 42px 로 넓힌다(보이는 크기는 그대로 · 슬찬에서 쓰던 처리를 공통으로) */
@media (max-width: 768px) {
  .svx-hd-utils .svx-hd-btn, .svx-hd-utils .svndex-lang .svndex-lang-btn { position: relative; }
  .svx-hd-utils .svx-hd-btn::after, .svx-hd-utils .svndex-lang .svndex-lang-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); border-radius: 50%; }
  /* 폰 = 마이 · 세팅 · 로그아웃 숨김(번역 · 다크만) — 같은 셋이 푸터 카피라이트 왼쪽에 있다 */
  .svx-hd-utils .svx-hd-acct { display: none; }
}
/* 다크 단추 = 밝은 화면엔 달 · 어두운 화면엔 해 */
.svx-hd-utils .svx-hd-sun { display: none; }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-hd-utils .svx-hd-moon { display: none; }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-hd-utils .svx-hd-sun { display: inline-block; }

/* ═══ 사이트 푸터 계정 단추 — 마이 · 세팅 · 로그아웃 (카피라이트 왼쪽 · 8사이트 공통 · §2026-10-06 대표님 «폰에서 3개 숨기고 푸터로») ═══
   마크업 = svndex_footer_account()(헤더와 같은 구성 · 로그인 전에는 없음) · 모양 = 여기 한 곳:
   26px 원 · 바탕 = 글자색의 10% · 아이콘 = 카피라이트 글자색 그대로 · 카피라이트와 사이 세로선 = 글자색의 25% · 올렸을 때 = 강조색 원 + 흰 아이콘.
   사이트가 정하는 것 = 푸터에 --svx-ft-hover(강조색 토큰) 하나. 모양 · 크기를 사이트 CSS 에 적지 않는다(셸 검사 H4). */
.svx-ft-acct { display: inline-flex; align-items: center; gap: 8px; margin: 0 5px 0 0; padding: 0 11px 0 0; border-right: 1px solid currentColor; border-right-color: color-mix(in srgb, currentColor 25%, transparent); vertical-align: middle; }
.svx-ft-acct .svx-ft-btn { box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; text-decoration: none; line-height: 1; transition: color .2s ease, background-color .2s ease; }
.svx-ft-acct .svx-ft-btn .ph { font-size: 13.6px; line-height: 1; }
.svx-ft-acct .svx-ft-btn:hover,
.svx-ft-acct .svx-ft-btn:focus-visible { background: var(--svx-ft-hover, currentColor); color: #fff; }
@media (max-width: 768px) {
  .svx-ft-acct .svx-ft-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; }
}
/* 폰 푸터 아래 여백 — 오른쪽 아래 떠 있는 단추(챗봇 런처 · 빠른상담 · 맨 위로)가 푸터 마지막 줄을 덮지 않게.
   강남이 먼저 둔 처리(대표님 «다른 사이트도 저런 식으로»)를 공통 값 하나로 — 사이트 푸터가 폰에서 padding-bottom: var(--svx-ft-safe) 를 쓴다.
   값 = 런처 윗변이 화면 아래에서 74px(실측 8사이트 같음) + 여유 16px. */
:root { --svx-ft-safe: 0px; }
@media (max-width: 768px) { :root { --svx-ft-safe: calc(90px + env(safe-area-inset-bottom, 0px)); } }   /* 아이폰 홈 막대 높이만큼 더 */

/* 본문 사진 — 가로·세로가 붙은 사진은 높이를 비율대로(사진이 늦게 와도 아래 글이 밀리지 않게). 특이도 0 — 사이트·게시판 규칙이 늘 이긴다. */
:where(img[data-svx-dim]) { height: auto; }

/* ── 상담 상태 뱃지 · 댓글 개수(공용 · §2026-10-13 대표님 «게시판 쪽과 맞춰 · 8사이트 공통 · 공용으로») ──
   부품 = counsel.php svndex_counsel_state_pill() · svndex_post_state_badge() · svndex_post_comment_badge().
   COUNSEL(관리자) 목록·글 머리와 8곳 상담·예약·접수 게시판 목록이 같은 모양을 쓴다. 사이트 CSS 로 색을 바꾸지 않는다(모두 같은 말·같은 색).
   대기 = 회색 · 상담 중 = 연두 · 완료 = 검정 · 보류 = 연보라 · 댓글 개수 = 파랑 사각 말풍선. 글자 크기는 px(사이트마다 html 글자 크기가 다를 수 있다). */
.svx-state { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 76px; height: 26px; padding: 0 11px; border: 1px solid transparent; border-radius: 999px; box-sizing: border-box; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
.svx-state .ph { font-size: 14px; line-height: 1; }
.svx-state.is-st-new { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }
.svx-state.is-st-progress { background: #ecfccb; border-color: #d9f99d; color: #3f6212; }
.svx-state.is-st-done { background: #111827; border-color: #111827; color: #ffffff; }
.svx-state.is-st-hold { background: #f3e8ff; border-color: #e9d5ff; color: #7e22ce; }
/* 댓글 개수 = 사각 말풍선(§2026-10-13 대표님 B안 · 모든 게시판 같은 모양) — 꼬리 = 왼쪽 아래 모서리에서 왼쪽으로.
   왼쪽 여백 8px = 꼬리 5px + 3px · 뒤에 오는 «N» 도 3px(board-common · svndex.css) — 목록이 칸 사이를 띄우든(flex gap) 띄어쓰기든 «제목 → 꼬리 끝» 과 «말풍선 → N» 이 늘 같다.
   꼬리는 몸통 안쪽으로 1px 겹쳐 그린다(배율이 소수점인 화면 · 브라우저 확대에서 꼬리와 몸통 사이 밝은 이음새가 생기지 않게). 색은 변수 하나 — 몸통·꼬리가 같이 바뀐다. */
.svx-cmt-count { --svx-cmt-bg: #2563eb; position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 8px; padding: 0 5px; border-radius: 4px 4px 4px 0; box-sizing: border-box; background: var(--svx-cmt-bg); color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; }
.svx-cmt-count::before { content: ""; position: absolute; left: -5px; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 6px 6px; border-color: transparent transparent var(--svx-cmt-bg) transparent; pointer-events: none; }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-state.is-st-new { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #a1a1aa; }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-state.is-st-progress { background: rgba(132, 204, 22, .16); border-color: rgba(132, 204, 22, .38); color: #bef264; }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-state.is-st-done { background: #f4f4f5; border-color: #f4f4f5; color: #111827; }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-state.is-st-hold { background: rgba(168, 85, 247, .18); border-color: rgba(168, 85, 247, .38); color: #d8b4fe; }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-cmt-count { --svx-cmt-bg: #3b82f6; }
/* 답변 알림 메일이 못 가는 글(빠른상담 접수 등) — 댓글 칸 위 강조 안내(§2026-10-13 · comment.php svndex_comment_reply_mail_notice_html · 사이트 게시판 · COUNSEL 공용) */
.svx-cmt-mailnote { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 10px 14px; border: 1px solid #fcd34d; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 13px; font-weight: 600; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.svx-cmt-mailnote .ph { flex: 0 0 auto; margin-top: 2px; font-size: 16px; }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-cmt-mailnote { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .12); color: #fcd34d; }
/* 답변 메일이 가는 글 — 관리자 안내 한 줄(사이트 글 댓글 칸 · 파랑 정보 · 노란 경고와 같은 틀) */
.svx-cmt-mailhint { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 10px 14px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; color: #1e40af; font-size: 13px; font-weight: 500; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.svx-cmt-mailhint .ph { flex: 0 0 auto; margin-top: 2px; font-size: 16px; }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-cmt-mailhint { border-color: rgba(96, 165, 250, .45); background: rgba(59, 130, 246, .12); color: #93c5fd; }