/* ══ 화면 겹침 순서(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_ticker_render 가 내는 .svx-tk 스타일. 자기완결 모듈.
   설계 근거 = docs/widget-design-notes.md §티커 */
/* 글자 조건(폰트·줄간격·자간·smoothing)은 위젯이 출고한다 — font-family:inherit 로 두면 병원마다 갈린다.
   ⚠️ `.svx-tk` 는 티커와 **진료일정 팝업이 같이 쓰는 베이스**다 — 여기를 바꾸면 둘 다 바뀐다. */
.svx-tk {
  font-family:Pretendard, "Pretendard-fallback", -apple-system, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height:1.3; letter-spacing:normal;
  /* font-smoothing 은 auto 를 «명시» 한다 — 지우면 사이트 값을 상속해 세 사이트가 갈린다 */
  -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto;
}
.svx-tk { box-sizing:border-box; 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), translate .4s cubic-bezier(.2,.9,.3,1.05); will-change:transform, opacity; }
.svx-tk[hidden] { display:none; }
.svx-tk *, .svx-tk *::before, .svx-tk *::after { box-sizing:border-box; }
.svx-tk.is-open { opacity:1; pointer-events:auto; }
.tk-color-c1 { --tk-color:#191970; }
.tk-color-c2 { --tk-color:#0000CD; }
.tk-color-c3 { --tk-color:#0E3386; }
.tk-color-c4 { --tk-color:#2D68C4; }
/* 흰 제목과의 대비가 기준(4.5:1)에 못 미쳐 같은 계열의 더 어두운 톤으로 교체했다 */
.tk-color-c5 { --tk-color:#3A6FA8; }
.tk-color-c6 { --tk-color:#232323; }
.tk-color-c7 { --tk-color:#9f1b1b; }
/* 박스 = 흰색 고정. 헤더 색상은 .tk-color-c1~c7 클래스 적용된 결정. */
.svx-tk { background:#ffffff; color:#1a1a1a; --svx-tk-fg:#1a1a1a; --svx-tk-mute:#666; --svx-tk-line:rgba(0,0,0,.18); --svx-tk-foot-bg:#f5f5f5; --svx-tk-foot-line:rgba(0,0,0,.08); }
.svx-tk-header { padding:8px 20px; background:var(--tk-color, #191970); display:flex; align-items:center; justify-content:center; }
.svx-tk-title { display:inline-block; padding:4px 10px!important; color:#ffffff; font-weight:700; font-size:1.0rem; letter-spacing:.2px; border-radius:99px; line-height:1.3; text-align:center; }
/* 좌측 일반 티커 타이틀 전용 (top/bottom 은 하단 .svx-tk-top/.svx-tk-bottom 블록에서 override) */
.svx-tk-title-normal { font-size:1.2rem; }
.svx-tk-body { padding:26px 20px 22px; }
.svx-tk-subtitle { font-weight:600; font-size:1.1rem; line-height:1.35; margin:0 0 14px; text-align:left; color:var(--svx-tk-fg); }
.svx-tk-text { font-weight:400; font-size:1rem; line-height:1.55; margin:0; white-space:pre-wrap; text-align:left; color:var(--svx-tk-mute); }
.svx-tk-buttons { display:flex; gap:8px; margin-top:24px; flex-wrap:wrap; justify-content:center; }
.svx-tk-btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; font-size:.92rem; font-weight:600; border-radius:6px; text-decoration:none; cursor:pointer; background:transparent; color:var(--svx-tk-fg); border:1px solid var(--svx-tk-line); font-family:inherit; transition:opacity .15s ease, transform .1s ease, background .15s ease; min-height:40px; flex:1; min-width:120px; }
.svx-tk-btn:hover { opacity:.9; transform:translateY(-1px); }
.svx-tk-btn:active { transform:translateY(0); }
.svx-tk-top .svx-tk-btn:hover, .svx-tk-bottom .svx-tk-btn:hover { transform:none; border-color:var(--tk-color); box-shadow:inset 0 0 0 1px var(--tk-color); }
.svx-tk-top .svx-tk-btn:active, .svx-tk-bottom .svx-tk-btn:active { transform:none; }
.svx-tk-footer { display:grid; grid-template-columns:1fr 1fr; background:var(--svx-tk-foot-bg); border-top:1px solid var(--svx-tk-foot-line); }
.svx-tk-foot-btn { padding:10px 14px; background:transparent; border:0; color:var(--svx-tk-mute); font-size:.85rem; font-family:inherit; cursor:pointer; transition:color .15s ease, background .15s ease; }
.svx-tk-foot-btn:first-child { padding-left:14px; }
.svx-tk-foot-btn:last-child { padding-right:14px; }
.svx-tk-foot-btn:first-child { border-right:1px solid var(--svx-tk-foot-line); }
.svx-tk-foot-btn:hover { color:var(--svx-tk-fg); background:transparent; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.svx-tk-foot-ico { display:none; }
.svx-tk-foot-btn { display:flex; align-items:center; justify-content:center; gap:6px; }
.svx-tk-x { background:transparent; border:0; cursor:pointer; padding:0; font-size:1.4rem; line-height:1; opacity:.7; color:inherit; font-family:inherit; transition:opacity .15s ease; }
.svx-tk-x:hover { opacity:1; }
.svx-tk-normal { position:fixed; left:20px; bottom:20px; z-index:200000; width:min(360px, calc(100vw - 40px)); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.22); transform:translateX(calc(-100% - 40px)) scale(.96); }
.svx-tk-normal.is-open { transform:translateX(0) scale(1); }
.svx-tk-normal .svx-tk-x { position:absolute; top:-14px; right:-14px; width:32px; height:32px; border-radius:50%; background:var(--svx-tk-bg); color:var(--svx-tk-fg); box-shadow:0 4px 12px rgba(0,0,0,.28); display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; opacity:1; }
/* 상단 티커는 «페이지 위에 얹히는» 것이 아니라 «페이지를 밀어내는» 띠다.
   fixed top:0 으로 두면 같은 top:0 인 사이트 헤더를 통째로 덮는다.
   엔진이 높이를 변수로 출고하고 사이트는 훅 하나만 쓴다 — 병원 CSS 에서 다시 판정하게 두면 갈린다.
     --svx-tk-top-h      열린 상단 티커의 실제 높이(닫히면 0)
     html.svx-tk-top-on  열려 있는 동안만 붙는 표시
   사이트는 고정 헤더에 `top: var(--svx-tk-top-h, 0px)` 만 주면 된다. */
html { --svx-tk-top-h: 0px; }
html.svx-tk-top-on body { padding-top: var(--svx-tk-top-h); }
body { transition: padding-top .38s cubic-bezier(.2,.9,.3,1.05); }
.svx-tk-top { position:fixed; top:0; left:0; width:100vw; z-index:200100; box-shadow:0 2px 12px rgba(0,0,0,.12); transform:translateY(-100%) scale(.99); }
.svx-tk-top.is-open { transform:translateY(0) scale(1); }
.svx-tk-bottom { position:fixed; bottom:0; left:0; width:100vw; z-index:200100; box-shadow:0 -2px 12px rgba(0,0,0,.12); transform:translateY(100%) scale(.99); }
.svx-tk-bottom.is-open { transform:translateY(0) scale(1); }
.svx-tk-top, .svx-tk-bottom { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:14px; padding:0 0 0 32px; min-height:60px; }
.svx-tk-top .svx-tk-header, .svx-tk-bottom .svx-tk-header { padding:5px 14px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; align-self:center; line-height:1; }
.svx-tk-top .svx-tk-title, .svx-tk-bottom .svx-tk-title { padding:0; display:inline-flex; align-items:center; line-height:1; }
.svx-tk-top .svx-tk-body, .svx-tk-bottom .svx-tk-body { padding:0; min-width:0; display:flex; align-items:center; align-self:center; gap:10px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; touch-action:pan-x; line-height:1; }
/* 키보드 포커스 표시 — seo-extras.php 가 상단·하단 티커에만 tabindex 를 준다 */
.svx-tk-top .svx-tk-body:focus-visible, .svx-tk-bottom .svx-tk-body:focus-visible { outline:2px solid var(--tk-color, #191970); outline-offset:2px; }
.svx-tk-top .svx-tk-body::-webkit-scrollbar, .svx-tk-bottom .svx-tk-body::-webkit-scrollbar { display:none; }
.svx-tk-top .svx-tk-subtitle, .svx-tk-bottom .svx-tk-subtitle, .svx-tk-top .svx-tk-text, .svx-tk-bottom .svx-tk-text { white-space:nowrap; flex-shrink:0; line-height:1.2; display:inline-flex; align-items:center; }
.svx-tk-top .svx-tk-subtitle, .svx-tk-bottom .svx-tk-subtitle { margin:0; text-align:left; }
.svx-tk-top .svx-tk-text, .svx-tk-bottom .svx-tk-text { margin:0; text-align:left; }
.svx-tk-top .svx-tk-buttons, .svx-tk-bottom .svx-tk-buttons { margin:0 0 0 16px; flex-wrap:nowrap; gap:6px; flex-shrink:0; }
.svx-tk-top .svx-tk-btn, .svx-tk-bottom .svx-tk-btn { padding:7px 14px; min-height:34px; font-size:.75rem; min-width:auto; flex:0 0 auto; }
.svx-tk-top .svx-tk-footer, .svx-tk-bottom .svx-tk-footer { display:flex; gap:0; background:var(--svx-tk-foot-bg); border:0; padding-right:100vw; margin-right:calc(0px - 100vw); }
.svx-tk-top .svx-tk-footer, .svx-tk-bottom .svx-tk-footer { align-self:stretch; align-items:center; position:relative; }
.svx-tk-top .svx-tk-footer::before, .svx-tk-bottom .svx-tk-footer::before { content:""; position:absolute; right:100%; top:0; bottom:0; width:50px; background:linear-gradient(to right, rgba(245,245,245,0), var(--svx-tk-foot-bg)); pointer-events:none; opacity:1; transition:opacity .2s ease; }
.svx-tk-top.has-overflow .svx-tk-footer::before, .svx-tk-bottom.has-overflow .svx-tk-footer::before { opacity:1; }
.svx-tk-top.has-overflow .svx-tk-body, .svx-tk-bottom.has-overflow .svx-tk-body { cursor:grab; }
.svx-tk-top .svx-tk-body.is-dragging, .svx-tk-bottom .svx-tk-body.is-dragging { cursor:grabbing !important; user-select:none; -webkit-user-select:none; }
.svx-tk-top .svx-tk-foot-btn, .svx-tk-bottom .svx-tk-foot-btn { padding:7px 17px; font-size:.88rem; }
.svx-tk-top .svx-tk-foot-btn:first-child, .svx-tk-bottom .svx-tk-foot-btn:first-child { border-right:1px solid var(--svx-tk-foot-line); }
.svx-tk-top .svx-tk-x.svx-tk-x-inside, .svx-tk-bottom .svx-tk-x.svx-tk-x-inside { position:absolute; top:50%; right:18px; transform:translateY(-50%); font-size:1.4rem; }
@media (max-width:540px) { .svx-tk-normal { left:12px; right:12px; bottom:12px; width:auto; } /* 상단/하단 모바일 — grid: header(pill) | body | footer(아이콘) */ .svx-tk-top, .svx-tk-bottom { grid-template-columns:auto 1fr auto; padding:0 10px 0 18px; gap:10px; border-left:0; } /* 헤더 = pill 박스 (PC 와 동일 스타일, 폰트만 축소) */ .svx-tk-top .svx-tk-header, .svx-tk-bottom .svx-tk-header { display:inline-flex; padding:4px 12px; border-radius:99px; flex-shrink:0; } .svx-tk-top .svx-tk-title, .svx-tk-bottom .svx-tk-title { font-size:0.95rem; padding:0; white-space:nowrap; } /* buttons 박스 = 모바일에서 본문 아래 줄바꿈 (grid 전체 너비 차지) */ .svx-tk-top .svx-tk-buttons, .svx-tk-bottom .svx-tk-buttons { grid-column:1 / -1; } /* body = 가로 슬라이딩 영역 — subtitle/text 가 폭 초과 시 손가락 스와이프로 가로 스크롤 */ .svx-tk-top .svx-tk-body, .svx-tk-bottom .svx-tk-body { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; min-width:0; touch-action:pan-x; } .svx-tk-top .svx-tk-body::-webkit-scrollbar, .svx-tk-bottom .svx-tk-body::-webkit-scrollbar { display:none; } .svx-tk-top .svx-tk-subtitle, .svx-tk-bottom .svx-tk-subtitle, .svx-tk-top .svx-tk-text, .svx-tk-bottom .svx-tk-text { white-space:nowrap; flex-shrink:0; } /* 푸터 = 아이콘만 표시, 우측 끝 가로 정렬 */ .svx-tk-top .svx-tk-footer, .svx-tk-bottom .svx-tk-footer { display:flex; gap:0; background:var(--svx-tk-foot-bg); border:0; flex-shrink:0; }/* 모바일은 폭이 없다 — 글자 대신 아이콘 2개로 줄여 좌측 본문에 폭을 돌려준다(데스크톱은 종전대로 글자).
   ⚠️ 마크업에 아이콘 요소가 없어 CSS ::after 로 그린다.
   ⚠️ 아이콘 폰트(Phosphor)는 «사이트 소유» 다 — 안 싣는 병원에서는 두부(□)가 나오므로 온보딩 때 확인할 것.
   eye-slash = 오늘 그만 보기 · x-circle = 닫기. */ .svx-tk-top .svx-tk-foot-text, .svx-tk-bottom .svx-tk-foot-text { display:none; } .svx-tk-top .svx-tk-foot-btn::after, .svx-tk-bottom .svx-tk-foot-btn::after { font-family:"Phosphor"; font-weight:normal; font-style:normal; font-size:1.3rem; line-height:1; } .svx-tk-top [data-tk-dontshow]::after, .svx-tk-bottom [data-tk-dontshow]::after { content:"\e224"; } .svx-tk-top [data-tk-close]::after, .svx-tk-bottom [data-tk-close]::after { content:"\e4f8"; } .svx-tk-top .svx-tk-title, .svx-tk-bottom .svx-tk-title { max-width:34vw; overflow:hidden; text-overflow:ellipsis; display:inline-block; } .svx-tk-top .svx-tk-foot-btn, .svx-tk-bottom .svx-tk-foot-btn { width:34px; height:34px; padding:0; border-radius:50%; border-right:0 !important; color:var(--svx-tk-fg); opacity:.8; } .svx-tk-top .svx-tk-foot-btn:hover, .svx-tk-bottom .svx-tk-foot-btn:hover { opacity:1; background:rgba(0,0,0,.06); } .svx-tk-top .svx-tk-foot-btn:first-child, .svx-tk-bottom .svx-tk-foot-btn:first-child { padding:0; margin-left:8px; } }

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