/* ============================================================ * 티커 위젯 — svndex_ticker_render 출력(.svx-tk) 스타일. 자기완결 모듈. * (구: core/css/widget/widget.css TICKER 섹션 분리 — 2026-06-20) * ============================================================ */
.svx-tk { box-sizing:border-box; font-family:inherit; 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); 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; }
/* §NB15 MED(2026-08-04): 원래 #6699CC + 흰 제목 = 3.00:1, WCAG AA(4.5:1) 미달 — 실측 재검증 후 5.23: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:9000; 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; }
/* §2026-09-09 — 상단 티커는 «페이지 위에 얹히는» 것이 아니라 «페이지를 밀어내는» 띠다(사용자 지정).
   종전엔 fixed top:0 으로 사이트 헤더(같은 top:0)를 통째로 덮었다 — 실측 강남: 티커 60px 가
   헤더 69px 를 60px 만큼 가림.
   엔진이 «높이» 를 변수로 출고하고 사이트는 그 훅 하나만 쓴다(§12-12 와 같은 축 —
   병원 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:9100; 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:9100; 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; }
/* §NB15 LOW(2026-08-04): 키보드 포커스 표시 — seo-extras.php 가 top/bottom 에만 tabindex="0" 부여 */
.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; }/* §2026-09-09 — 모바일 푸터가 «아이콘 전제» 로 텍스트를 숨기고 있었는데, 그 아이콘은 2026-08-08 에 마크업에서 빠졌다(팝업과 통일). 짝이 어긋나 모바일에서 닫기 버튼 2개가 34x34 «빈 원» 으로 나왔다(실측: foot-ico 0개 / foot-text 2개 display:none). 아이콘을 되살리면 그 통일이 깨지므로, 모바일에서도 데스크톱과 같이 «글자» 를 쓴다. 대신 폭을 아끼려 글자·여백을 줄이고 제목이 폭을 독차지하지 않게 자른다. *//* 모바일은 폭이 없다 — 글자 대신 아이콘 2개로 줄여 좌측 본문에 폭을 돌려준다(사용자 지정).   데스크톱은 종전대로 «글자» 라 §2026-08-08 의 팝업-티커-스케줄 문구 통일은 그대로 유지된다.   ⚠️ 마크업엔 아이콘 요소가 없다(그때 뺐다) — 그래서 CSS ::after 로 그린다.   ⚠️ 아이콘 폰트(Phosphor)는 «사이트 소유»(core/fonts/ph_icon)다. 그 폰트를 안 싣는 병원에서는      두부(□)가 나오므로, 신규 병원 온보딩 시 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 가드 해제 (§2026-09-05) — seo-extras.php 의 svndex_widget_fouc_guard() 가 이 부품을
   visibility:hidden 으로 숨겨 둔다. 이 파일이 도착한 시점 = 스타일이 갖춰진 시점이므로 여기서 드러낸다.
   ⚠ 이 규칙을 지우면 티커 위젯이 영영 안 보인다. */
.svx-tk { visibility: visible; }