/* ══ 화면 겹침 순서(z-index) — 정본표. 여기 적힌 값 말고 다른 숫자를 쓰지 않는다 ══
   ⚠️ **병원 사이트 CSS 가 이미 99999 를 쓴다**(슬찬 전체메뉴·프리로더). 종전에는 CMS 위젯이
      9000~10051 이라 **사이트 요소가 팝업·진료일정을 덮었다.** 그래서 CMS 를 통째로 20만대로 올렸다.
   ⚠️ 1000 씩 띄운다 — 한 위젯 안에서 «본체·닫기·화살표» 를 곹칠 때 +10, +20 으로 끝난다.
      종전에는 팝업이 9999·10000·10001 로 **옆 칸을 침범**해서 순서가 역전됐다.
   ⚠️ CSS 변수로 두지 않는다 — 위젯마다 CSS 를 따로 실어서, 토큰을 한 파일에 두면
      그 위젯이 없는 페이지에서 값이 통째로 사라진다.

     200000  하단/상단 티커            (상시 노출 정보)
     201000  진료일정 팝업(티커 미러)
     202000  자동번역 고지 띠
     203000  번역 언어 목록          (버튼을 눌렀을 때 펌쳐지므로 고지보다 위)
     204000  이미지 팝업            (방문자가 닫아야 사라짐)
     205000  진료일정 확대 모달      (방문자가 직접 연 것)
     206000  쿠키 동의 배너          (법적 동의 — 무엇에도 가려지면 안 된다)
     300000  관리자 모달·토스트      (관리자 화면 전용 — 사이트 CSS 가 안 실린다)
   ═══════════════════════════════════════════════════════════════════ */
/* 팝업 위젯 — svndex_popup_render 가 내는 .svx-pop 의 스타일. 자기완결 모듈.
   설계 근거·실패한 시도 = docs/widget-design-notes.md §팝업 */
.svx-pop { position:fixed; inset:0; z-index:204000; display:flex; align-items:center; justify-content:center; overflow-y:auto; overflow-x:hidden; opacity:0; pointer-events:none; transition:opacity .26s ease-out; -webkit-overflow-scrolling:touch; }
.svx-pop-frame { position:relative; z-index:1; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; width:100%; max-width:1240px; box-sizing:border-box; }
/* 나열 모드 = 프레임 폭 제한 해제 + 좌우 패딩 제거 */
.svx-pop-frame:has(.svx-pop-box-list) { max-width:none; padding-left:0; padding-right:0; }
.svx-pop[hidden] { display:none; }
.svx-pop.is-open { opacity:1; pointer-events:auto; }
.svx-pop-backdrop { position:absolute; inset:0; z-index:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); overflow:hidden; }
.svx-pop-particles { position:absolute; inset:0; pointer-events:none; }
.svx-pop-particle { position:absolute; bottom:-12px; border-radius:50%; background:#fff; box-shadow:0 0 2px rgba(255,255,255,.9); animation:svxPopFloat 10s linear infinite; }
@keyframes svxPopFloat { 0% { transform:translate3d(0, 0, 0); opacity:0; } 8% { opacity:var(--svx-pop-peak, 1); } 92% { opacity:var(--svx-pop-peak, 1); } 100% { transform:translate3d(var(--svx-pop-drift, 0), -110vh, 0); opacity:0; } }
/* OS 「동작 줄이기」 존중 — 파티클만 멈추고 팝업은 그대로 */
@media (prefers-reduced-motion: reduce) { .svx-pop-particle { animation: none; opacity: var(--svx-pop-peak, 1); } }
.svx-pop-box { position:relative; max-width:560px; width:100%; flex-shrink:0; background:#fff; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.4); overflow:hidden; display:flex; flex-direction:column; transform:scale(.94) translateY(12px); transition:transform .32s cubic-bezier(.2, .9, .3, 1.15); }
.svx-pop.is-open .svx-pop-box { transform:scale(1) translateY(0); }
.svx-pop-close { position:fixed; top:20px; right:24px; z-index:204020; width:auto; height:auto; padding:0; background:transparent; color:#fff; border:0; font-size:2.6rem; line-height:1; font-weight:300; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:opacity .15s ease, transform .15s ease; opacity:.9; }
.svx-pop-close:hover { opacity:1; transform:scale(1.15); background:transparent; }
/* 열릴 때 닫기 X 에 자동 포커스가 걸린다. 그 포커스 링은 Tab 을 누르거나 포커스가 떠날 때만 보인다(pop.js).
   ⚠ 억제 해제를 「아무 키나」로 되돌리지 말 것 — 스크롤 키 한 번에 X 에 흰 사각 테두리가 그려진다. */
.svx-pop.is-autofocus .svx-pop-close:focus { outline:none; }
.svx-pop-close:focus-visible { outline:2px solid #fff; outline-offset:4px; border-radius:6px; }
/* 단일(1X) = 나열과 같은 카드 크기에 카드는 한 장. 그 안에서 이미지가 크로스페이드한다(트랙 이동 없음) */
.svx-pop-box-single .svx-pop-list-track { justify-content:center; transition:none; transform:none !important; }
.svx-pop-box-single .svx-pop-card-img { position:relative; }
.svx-pop-slide { position:absolute; inset:0; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.svx-pop-slide.is-active { opacity:1; pointer-events:auto; }
.svx-pop-slide a { display:block; width:100%; height:100%; }
.svx-pop-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.svx-pop-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* 태그박스 = 이미지 하단 캡션. 폭과 무관하게 같은 자리라 미리보기와 실출력이 같다 */
.svx-pop-tagbox { padding:11px 16px; background:#f7f7f9; color:#1a1d24; font-size:.9rem; font-weight:600; text-align:center; line-height:1.4; word-break:keep-all; }
.svx-pop-tagbox[hidden] { display:none; }
/* ── 나열(list) = 투명 배경 + 카드는 단일 팝업 크기 ── */
/* ⚠ transform 을 두지 말 것 — 항등값이라도 fixed 컨테이닝블록이 생겨 화살표가 화면이 아니라 이 박스 기준이 된다 */
.svx-pop-box.svx-pop-box-list { max-width:none; width:auto; background:transparent; box-shadow:none; border-radius:0; overflow:visible; transform:none; }
.svx-pop.is-open .svx-pop-box.svx-pop-box-list { transform:none; }
/* ⚠ border-radius 는 카드와 같은 값(12px). 이 요소가 클립 상자라, 다르면 슬라이드가 움직이는 순간
   카드의 둥근 모서리 자리에 상자의 직각 모서리가 깜빡인다. 카드 값을 바꾸면 여기도 같이. */
.svx-pop-box-list .svx-pop-list { position:relative; overflow:hidden; border-radius:12px; padding:0; margin:0 auto; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.svx-pop-box-list .svx-pop-list.is-dragging { cursor:grabbing; }
.svx-pop-box-list .svx-pop-list img { -webkit-user-drag:none; user-drag:none; }
.svx-pop-box-list .svx-pop-list-track { position:static; inset:auto; display:flex; gap:20px; transition:transform .45s cubic-bezier(.2, .9, .3, 1); }
/* ⚠ 나열 카드에는 box-shadow 를 두지 않는다. 리스트가 overflow:hidden 이라 그림자가 그 경계에서
   사각형으로 잘린다. 클립을 넓히면 옆 카드가 비치고, 클립을 풀면 무한루프용 복제가 드러나고,
   복제를 빼면 화살표가 죽는다 — 세 길 다 막혔다(docs/widget-design-notes.md §팝업).
   단일 팝업(.svx-pop-box)은 클립이 카드와 같아 잘리지 않으므로 그림자를 유지한다. */
.svx-pop-box-list .svx-pop-card { box-sizing:border-box; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:transparent; transform:translateZ(0); -webkit-transform:translateZ(0); }
/* translateZ(0) — iOS Safari 에서 트랙이 transform 전환 중일 때 카드가 모서리 클립을 놓쳐
   스와이프 동안만 직각으로 보인다. 독립 레이어로 올려 둔다. */
/* ══ 크기·칸 수 규칙 ══
   「한 장씩 / 나란히」는 가로 칸 수다. 슬라이드는 설정이 아니라 결과 — 등록 장수가 지금 화면의 칸 수를
   넘칠 때만 생기고, 그때 앞뒤가 살짝 걸쳐 «더 있다» 를 그림으로 알린다.
     4:5 · 1:1   ≥1700 = 3칸 · 1100~1699 = 2칸 · 그 아래 = 1장 + 걸침 (카드 상한 560)
     16:9        칸 나눔 없음 — 언제나 가운데 한 장 + 좌우 걸침
   ⚠ 틀은 «화면이 감당하는 칸» 과 «등록 장수» 중 작은 쪽만큼만 잡는다 — 크게 잡으면 한쪽이 비어 쏠린다.
   문턱을 그렇게 정한 근거 = docs/widget-design-notes.md §팝업 */
.svx-pop-list[data-pop-aspect="4:5"] { --svx-pop-cw:560px; }
.svx-pop-list[data-pop-aspect="1:1"] { --svx-pop-cw:560px; }
.svx-pop-list[data-pop-aspect="16:9"] { --svx-pop-cw:1200px; }
/* 기본(가장 좁은 화면) = 1장 + 좌우 걸침. 86vw 로 두어 남는 7vw 씩에 앞뒤 카드가 걸친다 —
   꽉 채우면 «다음 장이 있다» 는 신호가 사라진다. */
/* --svx-pop-mode = 지금 배치가 무엇인지 JS 에 알려 주는 표식. 칸 수는 CSS 가 정하므로 JS 는 읽기만 한다
   (JS 가 폭을 재서 추측하면 어긋난다 — 태블릿에서 카드가 화면 밖으로 밀린 적이 있다). */
.svx-pop-list { width:100vw; --svx-pop-mode:peek; }
/* ⚠ 카드 폭은 가로·세로를 같이 본다. 가로만 보면 세로형(4:5·1:1)이 태블릿 가로에서 화면보다 길어져 스크롤이 생긴다. */
/* ⚠ 세로 상한은 max-width 로 건다. flex-basis 로 걸면 아래 칸 규칙(미디어쿼리)이 덮어써 칸 모드에서
   상한이 사라지고 카드가 화면보다 길어진다.  4:5 = 68vh · 1:1 = 82vh · 16:9 = 150vh(가로가 먼저 걸린다) */
.svx-pop-list .svx-pop-card { flex:0 0 86vw; max-width:var(--svx-pop-cw, 560px); }
.svx-pop-list[data-pop-aspect="4:5"] .svx-pop-card  { max-width:min(560px, 68vh); }
.svx-pop-list[data-pop-aspect="1:1"] .svx-pop-card  { max-width:min(560px, 82vh); }
.svx-pop-list[data-pop-aspect="16:9"] .svx-pop-card { max-width:min(1200px, 150vh); }
.svx-pop-list[data-pop-aspect="4:5"] .svx-pop-card { flex-basis:min(86vw, 57vh); }
.svx-pop-list[data-pop-aspect="1:1"] .svx-pop-card { flex-basis:min(86vw, 72vh); }
.svx-pop-list[data-pop-aspect="16:9"] .svx-pop-card { flex-basis:min(76vw, 128vh); }
/* ── 2칸 (등록 장수 2장 이상) — 틀은 장수만큼만 잡고 margin:0 auto 로 가운데 ── */
@media (min-width: 900px) { .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="2"], .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="2"], .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="3"], .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="3"] { width:min(1140px, 88vw); --svx-pop-mode:grid; } .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="2"] .svx-pop-card, .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="2"] .svx-pop-card, .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="3"] .svx-pop-card, .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="3"] .svx-pop-card { flex:0 0 calc((100% - 20px) / 2); } }
/* ── 16:9 = 칸 나누기 대상이 아니다. 가로배너는 «가운데 한 장» 이 본체이고 좌우 이웃은 화면 밖으로
   흘러 걸치기만 한다. 2·3칸으로 쪼개면 1920 화면에서 장당 550px 이라 배너 구실을 못 한다. ── */
.svx-pop-list[data-pop-aspect="16:9"] { width:100vw; }
.svx-pop-list[data-pop-aspect="16:9"] .svx-pop-card { flex:0 0 min(1200px, 76vw); max-width:none; }
/* ⚠ 1장짜리도 같은 76vw 를 쓴다. 장수에 따라 카드 크기가 달라지면 안 된다 — 달라지는 건 걸침·화살표·닷뿐이다.
   파일 끝의 공통 cols="1" 규칙(88vw)을 여기서 되돌려 잠근다. */
.svx-pop-list[data-pop-aspect="16:9"][data-pop-cols="1"] { width:min(1200px, 76vw); --svx-pop-mode:grid; }
.svx-pop-list[data-pop-aspect="16:9"][data-pop-cols="1"] .svx-pop-card { flex-basis:100%; }
/* ── 3칸 (등록 장수 3장 이상) ── */
@media (min-width: 1400px) { .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="3"], .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="3"] { width:min(1720px, 88vw); --svx-pop-mode:grid; } .svx-pop-list[data-pop-aspect="4:5"][data-pop-cols="3"] .svx-pop-card, .svx-pop-list[data-pop-aspect="1:1"][data-pop-cols="3"] .svx-pop-card { flex:0 0 calc((100% - 40px) / 3); } }
/* ── 1장뿐 = 걸칠 상대가 없다 → 어느 화면에서든 기준폭 그대로 가운데.
   ⚠ 이 두 줄은 위 미디어쿼리보다 **뒤**에 있어야 한다(특이도가 낮아 순서로 이긴다). ── */
.svx-pop-list[data-pop-cols="1"] { width:min(var(--svx-pop-cw, 560px), 88vw); --svx-pop-mode:grid; }
.svx-pop-list[data-pop-cols="1"] .svx-pop-card { flex-basis:100%; max-width:none; }
/* 사파리에서 aspect-ratio 높이와 object-fit 이미지 사이 반올림 차이로 배경이 1px 실선처럼 비쳤다
   → 배경을 빼고 이미지를 inset:0 으로 밀착시킨다. */
/* ⚠ position:relative 필수 — 안쪽 이미지가 absolute 라, 이 컨테이너가 static 이면 기준점이 카드 전체로
   올라가 이미지가 태그띠까지 덮는다(태그가 멀쩡히 그려져 있는데 안 보인다). */
.svx-pop-card-img { position:relative; width:100%; aspect-ratio:4/5; background:transparent; overflow:hidden; }
.svx-pop-card-img[data-pop-aspect="1:1"] { aspect-ratio:1/1; }
.svx-pop-card-img[data-pop-aspect="16:9"] { aspect-ratio:16/9; }
.svx-pop-card-img a, .svx-pop-card-img img { display:block; width:100%; height:100%; }
.svx-pop-card-img img { object-fit:cover; }
/* ⚠ flex-shrink:0 필수 — 카드가 세로 flex 라, 높이가 모자라면 브라우저가 태그박스부터 0 으로 눌러
   캡션 띠가 통째로 사라진다. */
.svx-pop-card .svx-pop-tagbox { flex-shrink:0; background:#fff; border-top:1px solid #eef0f3; font-size:.82rem; padding:9px 10px; }
/* 나열 화살표 = 팝업 양옆 화면 끝. fixed = overflow:hidden 클립을 피하고 화면 기준으로 놓는다 */
.svx-pop-arrow { position:fixed; top:50%; transform:translateY(-50%); z-index:204010; width:auto; height:auto; padding:0 .4rem; border:0; border-radius:0; background:transparent; color:#fff; font-size:4.5rem; line-height:1; font-weight:300; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; opacity:.82; text-shadow:0 2px 10px rgba(0,0,0,.55); transition:opacity .15s ease, transform .15s ease; }
.svx-pop-arrow:hover { background:transparent; opacity:1; transform:translateY(-50%) scale(1.12); }
.svx-pop-arrow.is-prev { left:60px; right:auto; }
.svx-pop-arrow.is-next { right:60px; left:auto; }
.svx-pop-arrow[disabled] { opacity:.22; cursor:default; }
.svx-pop-arrow[disabled]:hover { transform:translateY(-50%); }
@media (max-width: 640px) { .svx-pop-arrow { font-size:3rem; } .svx-pop-arrow.is-prev { left:.2rem; } .svx-pop-arrow.is-next { right:.2rem; } }
/* ── 모바일 인디케이터(닷) — 화살표를 감추는 ≤767px 에서 위치를 알린다. 현재 = 흰 바, 대기 = 회색 점 ── */
.svx-pop-dots { position:relative; z-index:2; transform:translateZ(0); -webkit-transform:translateZ(0); display:flex; align-items:center; justify-content:center; gap:7px; padding:2px 0; }
/* translateZ(0) — backdrop-filter 를 쓰는 형제(백드롭) 옆에서 iOS Safari 가 페인트 순서를 놓쳐
   전환 프레임에만 보였다 사라졌다 했다. 독립 레이어로 고정한다(레이아웃 영향 없음).
   .svx-pop-dontshow 도 같은 이유로 같이 처리한다. */
/* flex:0 0 필수 — shrink 가 살아 있으면 컨테이너가 7px 기준으로 폭을 잡은 뒤 활성 닷(36px)을 도로 눌러 «바» 가 안 보인다 */
.svx-pop-dot { flex:0 0 7px; width:7px; height:7px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.42); cursor:pointer; transition:flex-basis .28s cubic-bezier(.2,.9,.3,1), width .28s cubic-bezier(.2,.9,.3,1), background-color .2s ease; }
.svx-pop-dot:hover { background:rgba(255,255,255,.68); }
.svx-pop-dot.is-active { flex-basis:36px; width:36px; background:#fff; }
.svx-pop-dot:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .svx-pop-dot { transition:none; } }
/* 누르는 상자는 24px, 보이는 점은 7px 그대로. 점 간격이 좁아 Lighthouse 접근성 «터치 대상 크기» 감점이었다.
   ⚠ 대상끼리 겹치면 검사가 «겹친 만큼 작다» 고 본다 → 음수 margin 으로 간격을 줄이지 않는다.
   세로로 늘어난 만큼은 컨테이너 음수 margin 으로 되돌려 아래 버튼 위치를 그대로 둔다. */
.svx-pop-dots { gap:0; margin-block:1.5px; }
.svx-pop-dot { box-sizing:content-box; padding:8.5px; background-clip:content-box; }
/* ⚠ hover·활성 규칙이 background 축약형이라 clip 을 되돌린다 — 다시 지정하지 않으면 활성 점이 24px 알약으로 칠해진다 */
.svx-pop-dot:hover, .svx-pop-dot.is-active { background-clip:content-box; }
/* ── 모바일(≤767px) = 칸 수를 무시하고 1장 + 좌우 걸침. 나열을 그대로 축소하면 360px 화면에서 카드가
   107px 이라 내용이 하나도 안 보인다. 화살표는 감추고 닷으로 대체한다 — 주 조작이 스와이프라 자리만 먹는다. ── */
@media (max-width: 767px) { .svx-pop-arrow { display:none; } .svx-pop-box-list .svx-pop-list-track { gap:10px; } }
/* 「오늘 하루 보지 않기」 = 기기와 무관하게 화면 맨 아래 고정. 팝업 흐름에 두면 슬라이드 높이에 따라
   위치가 오르내린다. 아이폰 하단 인디케이터·사파리 도구줄을 피하려고 safe-area 를 더한다.
   바닥 간격 44 → 32px(§2026-09-28 사용자 지정 — 닷과 조금 더 떨어지게). */
/* 모양 = 투명 바탕 + 흰 테두리·흰 글자 + 둘 다 옅은 그림자(§2026-09-29 사용자 지정 — 어두운 바탕 알약이 팝업만큼 눈에 띄었다).
   이미지 확대 버튼과 같은 방식이되 그보다 잘 보이게(테두리 1.5px · 글자 600 · 그림자 한 단계 진하게 · 흰색은 테두리 65%·글자 75% 로 낮춤 · 사용자 지정). 그림자가 밝은 사진 위에서도 테두리·글자를 떼어 낸다. */
.svx-pop-dontshow { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 32px); z-index:3; transform:translateX(-50%) translateZ(0); -webkit-transform:translateX(-50%) translateZ(0); flex-shrink:0; padding:9px 20px; background:transparent; color:rgba(255,255,255,.75); border:1.5px solid rgba(255,255,255,.65); border-radius:999px; cursor:pointer; font-size:.88rem; font-weight:600; font-family:inherit; text-shadow:0 1px 3px rgba(0,0,0,.6); box-shadow:0 1px 4px rgba(0,0,0,.4), inset 0 0 3px rgba(0,0,0,.25); transition:opacity .15s ease, background .15s ease; }
.svx-pop-dontshow:hover { background:rgba(255,255,255,.14); color:#fff; border-color:#fff; }
@media (max-width: 540px) { .svx-pop { padding:12px; } .svx-pop-box { max-width:100%; } }
.svx-pop-backdrop.is-no-blur { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
@media (min-width: 541px) { .svx-pop-frame { padding-top: 4vh; padding-bottom: 4vh; } }
/* 단일(1X)은 카드 한 장이 트랙 가운데에만 놓여 좌우에 빈 자리가 남는다. 그 자리가 .svx-pop-list 라
   pop.js 의 «박스 안쪽은 닫지 않음» 규칙에 걸려 «배경처럼 보이는데 안 닫히는» 상태가 됐다
   → 박스를 클릭 투과시키고 실제 조작 요소만 되살린다(크기·레이아웃 변화 없음). */
.svx-pop-box-single, .svx-pop-box-single .svx-pop-list, .svx-pop-box-single .svx-pop-list-track { pointer-events:none; cursor:default; }
.svx-pop-box-single .svx-pop-card, .svx-pop-box-single .svx-pop-arrow, .svx-pop-box-single .svx-pop-dots, .svx-pop-box-single .svx-pop-dontshow { pointer-events:auto; }
/* 터치 기기 = 시각 크기는 그대로, 손가락 영역만 44px 확보. 닫기 26×42 · 닷 7×7 로는 실제로 안 눌린다 */
@media (hover:none) and (pointer:coarse) { .svx-pop-close { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } /* 화살표는 폭만 44 로 — 세로는 이미 충분 */ .svx-pop-arrow { min-width:44px; } }

/* FOUC 가드 해제 — seo-extras.php 가 이 부품을 visibility:hidden 으로 숨겨 두고, 이 파일이 도착하면 드러낸다.
   ⚠ 이 규칙을 지우면 팝업이 영영 안 보인다. */
.svx-pop { visibility: visible; }

/* 줄간격·자간·font-smoothing 은 위젯이 출고한다 — 안 정하면 사이트 body 값을 상속해 병원마다 갈린다
   (실측 차이: 줄간격 1.7 vs normal · 자간 normal vs -.008em · smoothing auto vs antialiased).
   위젯 공통 기준 = line-height 1.3 · letter-spacing normal · font-smoothing auto. */
.svx-pop { line-height:1.3; }

.svx-pop { -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; }

.svx-pop { letter-spacing:normal; }