/* ══ 화면 겹침 순서(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_schedule_render 가 내는 .svx-tk-schedule. 위치·그림자·닫기·하단티커 회피는 좌하단 티커(.svx-tk-normal · ticker.js)가 맡고, 이 파일은 z-index 우선 + 헤더색 + 공지바 + 달력 + 확대 모달을 담당한다. 관리자 미리보기도 같은 파일을 쓴다. 설계 근거·실패한 시도 = docs/widget-design-notes.md §진료일정 */
/* 티커(normal 9000 · top/bottom 9100)보다 위 → 겹치면 스케쥴이 무조건 최상단 */
/* 축소 카드 = 가로 500px. 세로는 내용이 정한다(좁은 화면은 calc 가 받는다) */
.svx-tk-schedule { z-index:201000; width:min(500px, calc(100vw - 28px)); background:#fff; }
/* ── 헤더 = 타이틀바 (실제 타이틀) + 확대 버튼 ── */
.svx-tk-schedule .svx-sch-header { padding:6px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
/* 타이틀 헤더도 확대/축소 스위치다(배선 = schedule.js). 확대 기능이 꺼진 위젯에서는 손가락 커서를 내지 않는다 — 눌러도 반응이 없으면 고장으로 읽힌다. user-select:none = 반복 클릭 시 제목 선택 방지. */
.svx-tk-schedule .svx-sch-header:has(.svx-sch-expand:not([hidden])) { cursor:pointer; -webkit-user-select:none; user-select:none; }
.svx-tk-schedule .svx-sch-title { padding:0 !important; margin:0; background:none; border-radius:0; flex:1; min-width:0; font-weight:600; font-size:1.06rem; line-height:1.3; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.svx-sch-expand { flex-shrink:0; border:0; background:rgba(255,255,255,.18); color:#fff; width:30px; height:30px; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; line-height:1; transition:background .15s; }
.svx-sch-expand:hover { background:rgba(255,255,255,.34); }
/* ⚠ [hidden] 을 명시해야 한다 — 위 display:inline-flex 가 브라우저 기본 [hidden]{display:none} 을 이겨서, 관리자에서 「확대/축소」를 꺼도 버튼이 보이고 눌렸다. */
.svx-sch-expand[hidden] { display:none; }
/* 헤더 색상 14종(§2026-09-28 — 공용 목록 svndex_widget_palette() 와 같은 키·순서) — 배경 + 글자색. 색 값은 사용자 지정(레드·로즈·핑크·오렌지는 같은 날 다시 고름) */
.svx-tk-schedule.hd-7dex .svx-sch-header { background:#7c3aed; }
.svx-tk-schedule.hd-navy .svx-sch-header { background:#191970; }
.svx-tk-schedule.hd-royal .svx-sch-header { background:#0c2ac0; }
.svx-tk-schedule.hd-blue .svx-sch-header { background:#2563eb; }
.svx-tk-schedule.hd-red .svx-sch-header { background:#b21010; }
.svx-tk-schedule.hd-rose .svx-sch-header { background:#e51a4f; }
.svx-tk-schedule.hd-pink .svx-sch-header { background:#dd26ad; }
.svx-tk-schedule.hd-black .svx-sch-header { background:#232323; }
.svx-tk-schedule.hd-slate .svx-sch-header { background:#475569; }
.svx-tk-schedule.hd-gray .svx-sch-header { background:#d6d9dd; }
.svx-tk-schedule.hd-white .svx-sch-header { background:#ffffff; border-bottom:1px solid #e5e7eb; }
.svx-tk-schedule.hd-orange .svx-sch-header { background:#ffaa00; }
.svx-tk-schedule.hd-green .svx-sch-header { background:#16a34a; }
.svx-tk-schedule.hd-cyan .svx-sch-header { background:#0891b2; }
.svx-tk-schedule[class*=" hd-"] .svx-sch-title { color:#fff; }
/* 밝은 두 색(그레이·화이트) = 흰 글자가 안 읽힌다 — 어두운 글자를 쓴다. 확대버튼도 어둡게. 오렌지는 흰 글자(사용자 결정 §2026-09-28 — 대비 1.9:1 을 알고 정했다 · #ffaa00). */
.svx-tk-schedule:is(.hd-gray, .hd-white) .svx-sch-title { color:#1e293b; }
.svx-tk-schedule:is(.hd-gray, .hd-white) .svx-sch-expand { background:rgba(0,0,0,.07); color:#334155; }
.svx-tk-schedule:is(.hd-gray, .hd-white) .svx-sch-expand:hover { background:rgba(0,0,0,.14); }
/* ── 관련 공지 바로가기 바 (notice_label 있을 때만 출력) ── */
.svx-sch-notice { display:flex; align-items:center; gap:8px; padding:9px 16px; background:#f3f4f6; border-bottom:1px solid #e5e7eb; color:#374151; font-size:.85rem; font-weight:600; text-decoration:none; transition:background .15s; }
.svx-sch-notice[hidden] { display:none; }
.svx-sch-notice:hover { background:#e9eaed; }
.svx-sch-notice-text { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 링크 써클 = 좌측 아이콘이 «무엇인지»(링크)를, 우측 「바로가기」가 «무엇을 하는지»를 말한다. 초록은 달력의 «오늘» 핀과 같은 값 — 위젯 안에서 초록의 뜻을 하나로 묶어 색이 늘어나지 않게 한다. */
.svx-sch-notice-go { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#16a34a; color:#fff; font-size:.8rem; line-height:1; }
.svx-sch-notice-cta { flex-shrink:0; display:inline-flex; align-items:center; gap:2px; color:#5b6270; font-size:.74rem; font-weight:500; letter-spacing:-.01em; }
.svx-sch-notice-cta i { font-size:.88rem; }
.svx-sch-notice:hover .svx-sch-notice-cta { color:#6b7280; }
/* 푸터(오늘 하루 보지 않기 / 닫기) = 배경 + 위 구분선 + 버튼 사이 세로 구분선. 프론트·관리자 공통 */
.svx-tk-schedule .svx-tk-footer { background:#f5f5f5; border-top:1px solid #e5e7eb; }
.svx-tk-schedule .svx-tk-foot-btn:first-child { border-right:1px solid #e5e7eb; }
/* ── 본문 = 달력 (기본 크기 확대 → 날짜 밑 문구 보이게) ── */
.svx-tk-schedule .svx-sch-body { padding:0; }
.svx-sch-body .sch-cal { border:0; border-radius:0; overflow:visible; }
.svx-sch-body .sch-dow, .svx-sch-body .sch-week { display:grid; grid-template-columns:repeat(7,1fr); }
.svx-sch-body .sch-dow-cell { text-align:center; padding:5px 0; font-size:.72rem; font-weight:700; color:#64748b; background:#f8fafc; border-bottom:1px solid #e5e7eb; }
/* 달력 «글자» 의 적/청은 한 단계 진한 값을 쓴다 — 옅은 배경칸 위에서 대비가 기준(4.5)에 못 미쳤다. 채우는 색(동그라미·배경)은 흰 글자와 대비가 충분해 그대로 둔다. */
.svx-sch-body .sch-dow-cell.is-sun { color:#b91c1c; }
.svx-sch-body .sch-dow-cell.is-sat { color:#1d4ed8; }
.svx-sch-body .sch-cell { position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px; min-height:62px; padding:6px var(--sch-pad-x,3px); border-right:1px solid #eef0f3; border-bottom:1px solid #eef0f3; background:#fff; text-align:left; }
.svx-sch-body .sch-week:last-child .sch-cell { border-bottom:0; }
.svx-sch-body .sch-week .sch-cell:last-child { border-right:0; }
/* 달력 양끝 여백 — 컨테이너에 일반 패딩을 주면 칸 배경 바깥에 흰 띠가 생긴다. 그래서 **첫칸의 좌측· 끝칸의 우측에만** 더한다. ⚠ 반대쪽(일요일 우측·토요일 좌측)은 다른 칸과 같은 --sch-pad-x 를 유지한다 — 0 으로 깎으면 날짜가 칸 보더에 붙는다. .sch-cell 보다 특이도가 높아야 해서 :first-child/:last-child 로 둔다. */
.svx-sch-body .sch-week .sch-cell:first-child { padding-left:calc(var(--sch-pad-x,3px) + var(--sch-edge,6px)); }
.svx-sch-body .sch-week .sch-cell:last-child { padding-right:calc(var(--sch-pad-x,3px) + var(--sch-edge,6px)); }
.svx-sch-body .sch-dow .sch-dow-cell:first-child { padding-left:var(--sch-edge,6px); }
.svx-sch-body .sch-dow .sch-dow-cell:last-child { padding-right:var(--sch-edge,6px); }
/* 오늘 = **초록 핀 하나로만** 표시한다. 배경은 프리셋(주말 휴무·오전진료)·직접지정에 맡긴다. ⚠ 여기에 배경색을 주면 특이도가 프리셋보다 높아 일요일 휴무의 붉은 배경을 덮는다. */
.svx-sch-body .sch-cell.is-today { outline:0; }
.svx-sch-body .sch-cell:hover { box-shadow:0 4px 14px rgba(15,23,42,.16); position:relative; z-index:2; }
.svx-sch-body .sch-cell-date { align-self:flex-start; font-size:.75rem; font-weight:700; color:#1e293b; line-height:1.1; text-align:left; }
.svx-sch-body .sch-cell.is-sun .sch-cell-date { color:#b91c1c; }
.svx-sch-body .sch-cell.is-sat .sch-cell-date { color:#1d4ed8; }
/* 라벨 «크기» 는 모드(축소·확대)와 기기가, «굵기» 는 종류(프리셋 400 / 개별입력 500)가 정한다. ⚠ 크기를 선택자에 직접 쓰면 프리셋 선택자가 확대 선택자를 이겨 «확대해도 프리셋만 안 커진다». 그래서 값은 변수로 컨테이너에 얹고 규칙은 var 만 읽는다 — 특이도 싸움이 생기지 않는다. ⚠ 미디어쿼리는 특이도를 올리지 않는다. 모바일에서도 .is-expanded 를 같이 재정의해야 PC 확대값이 새지 않는다. */
/* 자간·줄간격은 위젯이 출고한다 — 안 정하면 사이트 body 값을 상속해 병원마다 갈린다. 달력은 숫자가 주역이라 음수 자간이 오히려 좁아 보여 normal 로 고정한다. */
.svx-tk-schedule { line-height:1.3; letter-spacing:normal; /* 폴백은 취향이 아니라 기술 문제다 — Pretendard 가 늦거나 실패하면 메트릭 호환본이 받아 글자 «폭» 이 안 바뀌므로 로딩 전후로 레이아웃이 안 튄다. 그다음이 시스템 한글 폰트다. */ font-family:Pretendard, "Pretendard-fallback", -apple-system, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* font-smoothing 은 auto 를 «명시» 한다 — 지우면 사이트 값을 상속해 세 사이트가 갈린다. 이 위젯은 면적의 대부분이 흰 배경 + 어두운 글자라 antialiased 는 오히려 손해다. */ -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; }
/* 사이트 <a> 규칙이 엔진 색을 이기는 곳이 있어 위젯 스코프로 특이도를 올린다 */
.svx-tk-schedule .svx-sch-notice { color:#374151; }
/* 연회색 바탕에서 대비가 모자라 한 단계 진한 회색을 쓴다(접근성 기준 4.5) */
.svx-tk-schedule .svx-sch-notice-cta { color:#5b6270; }
.svx-tk-schedule { --sch-label:.8125rem; --sch-label-preset:.8rem; --sch-pad-x:3px; --sch-edge:6px; }
.svx-tk-schedule.is-expanded { --sch-label:1.0625rem; --sch-label-preset:1.1rem; --sch-pad-x:12px; --sch-edge:10px; }
/* 굵기 500 = 관리자 좌측 달력(svndex.css .sch-cell-label)과 같은 값이고, 프리셋 라벨은 400 이다. ⚠ 검사기 두 개(setup-notice #SN7 · checkbox-partial-update #CB3)가 이 값을 계약으로 고정한다. */
.svx-sch-body .sch-cell-label { flex:1 1 auto; display:flex; align-items:center; justify-content:center; text-align:center; font-size:var(--sch-label,.85rem); font-weight:500; line-height:1.16; }
/* 배지는 «정원» 이어야 한다 — padding 을 두면 두 자리 숫자에서 가로만 늘어난 타원이 된다. 지름을 두 자리 숫자보다 넉넉히 잡고 padding 은 0 으로 둔다. ⚠ line-height:1 이 핵심 — 상속값이면 숫자가 baseline 에 앉아 위로 치우친다. ⚠ 폭을 고정하지 않는 이유 = 매월 1일은 「10/1」 4글자로 렌더된다. min-width 는 «바닥» 이라 넓은 값은 그대로 늘어난다. */
.svx-sch-body .has-circle .sch-cell-date { color:#fff !important; min-width:22px; height:22px; padding:0; line-height:1; font-weight:600; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; }
/* 날짜 라인 = 날짜 + 공휴일명 + 오늘핀(우측) */
.svx-sch-body .sch-cell-top { display:flex; align-items:center; gap:5px; width:100%; }
.svx-sch-body .sch-cell-holiday { min-width:0; font-size:.59375rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sch-htext-red { color:#b91c1c; }
/* blue·white 는 방문자 CSS 에도 있어야 한다 — 관리자에서 고른 색이 여기 없으면 사이트엔 기본색으로 나간다 */
.sch-htext-blue { color:#1d4ed8; }
.sch-htext-black { color:#1e293b; }
.sch-htext-white { color:#fff; }
.svx-sch-body .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; }
.svx-sch-body .sch-cell-pin i { display:none; }
@keyframes schTodayBreath { 0%, 100% { transform:scale(.82); } 50% { transform:scale(1.28); } }
@media (prefers-reduced-motion: reduce) { .svx-sch-body .sch-cell-pin { animation:none; } }
.svx-sch-body .sch-cell-x { display:none !important; }
/* 프론트/미리보기 = 삭제 X 숨김 */
/* 흰색 동그라미 = 흰 배경 + 검정 글자 / 배경 white·gray 프리셋 */
/* 1일은 «10/1» 로 월을 같이 적어 네 글자다 — 동그라미 표시가 걸리면 알약이 되는데 padding 이 0 이라 글자가 가장자리에 닿아 답답했다(2026-09-22 사용자 지적). ⚠️ 다른 날짜에 같이 주면 안 된다 — min-width 가 content 기준이라 한 자리 숫자까지 24 → 34px 로 커진다(실측). 그래서 .is-md 로 1일에만 건다. */
.svx-sch-body .has-circle .sch-cell-date.is-md { padding:0 5px; }
.svx-sch-body .sch-circle-white .sch-cell-date { background:#ffffff !important; color:#1e293b !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); }
.svx-sch-body .sch-bg-white { background:#f5f5f5; }
/* sky·rose 는 «불투명» 값이다. 반투명이면 다크 테마에서 뒤 배경과 합성돼 어두운 남색·검붉은색이 된다. ⚠ 행 색조(.sch-wk-*) 쪽은 계속 rgba 다 — 그쪽은 테마에 묻어가야 하고 다크 전용 규칙이 따로 있다. 운영자가 «고른 색» 은 테마와 무관하게 그대로 보여야 한다. */
.svx-sch-body .sch-bg-sky { background:#f3f6fe; }
.svx-sch-body .sch-bg-rose { background:#fdf3f3; }
.svx-sch-body .sch-bg-gray { background:#e5e5e5; }
/* 확대 시 공휴일·핀 크게 */
.svx-tk-schedule.is-expanded .sch-cell-holiday { font-size:.875rem; }
.svx-tk-schedule.is-expanded .sch-cell-pin { width:11px; height:11px; }
/* 색상 프리셋 — admin 정본과 동일 hex */
/* 흰 테두리만 — 속은 비운다. 진한 배경 위에서 날짜를 감싸되 배경을 가리지 않는다. 글자색은 .has-circle 규칙(#fff !important)을 그대로 쓴다. */
.svx-sch-body .sch-circle-white-line .sch-cell-date { background:transparent; box-shadow:inset 0 0 0 1px #ffffff; }
.svx-sch-body .sch-circle-red .sch-cell-date { background:#dc2626; }
.svx-sch-body .sch-circle-blue .sch-cell-date { background:#2563eb; }
/* 노랑은 밝아 흰 글자가 안 읽힌다(1.8:1) — white 와 같이 어두운 글자를 쓴다(9:1). */
.svx-sch-body .sch-circle-yellow .sch-cell-date { background:#fbbf24; color:#1e293b !important; }
.svx-sch-body .sch-circle-green .sch-cell-date { background:#16a34a; }
.svx-sch-body .sch-circle-violet .sch-cell-date { background:#7c3aed; }
.svx-sch-body .sch-circle-slate .sch-cell-date { background:#475569; }
.svx-sch-body .sch-text-red { color:#b91c1c !important; }
.svx-sch-body .sch-text-blue { color:#1d4ed8 !important; }
.svx-sch-body .sch-text-black { color:#1e293b !important; }
.svx-sch-body .sch-text-white { color:#fff !important; }
.svx-sch-body .sch-bg-soft-red { background:#fee2e2; }
.svx-sch-body .sch-bg-soft-blue { background:#dbeafe; }
.svx-sch-body .sch-bg-soft-amber { background:#fef3c7; }
.svx-sch-body .sch-bg-soft-green { background:#dcfce7; }
.svx-sch-body .sch-bg-pure-white { background:#ffffff; }
.svx-sch-body .sch-bg-red { background:#dc2626; }
.svx-sch-body .sch-bg-blue { background:#2563eb; }
.svx-sch-body .sch-bg-slate { background:#334155; }
/* ── 확대 = 정가운데 큰 모달 + 옅은 백드랍 (데스크톱). use_expand 토글 ON 일 때만 확대버튼 노출 ── */
/* 확대 중 배경 스크롤 잠금 — 에디터 모달과 같은 관례. 스크롤바가 사라져도 중앙정렬이 틀어지지 않게 한다 */
body.svx-sch-modal-open { overflow:hidden; }
/* 확대(모달)는 화면 중앙 정렬이다 — 티커가 하단 장애물을 피하려고 거는 translate 를 여기서 상쇄한다 */
.svx-tk-schedule.is-expanded { translate:none !important; }
.svx-sch-backdrop { position:fixed; inset:0; z-index:205000; background:rgba(15,23,42,.34); opacity:0; transition:opacity .26s ease; }
.svx-sch-backdrop.is-on { opacity:1; }
/* 확대 = 정가운데 큰 모달(16:9 팝업만큼 폭 + 세로 채움). transition:none 으로 즉시 스냅하고 animation 으로 팝인 */
.svx-tk-schedule.is-expanded { z-index:205010; left:50%; right:auto; top:50%; bottom:auto; transform:translate(-50%, -50%); width:min(1180px, 94vw); height:min(760px, 90vh); display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.42); transition:none; animation:schExpandIn .2s ease-out; }
@keyframes schExpandIn { from { opacity:0; transform:translate(-50%, -50%) scale(.94); } to { opacity:1; transform:translate(-50%, -50%) scale(1); } }
.svx-tk-schedule.is-expanded .svx-sch-header { flex:0 0 auto; padding:11px 24px; }
/* 확대모드에서만 링크바를 키운다 — 화면을 키운 만큼 「어디로 가는 링크인지」가 먼저 읽혀야 한다. 양쪽 원도 같이 키워야 문구만 커지고 아이콘이 남는 어긋남이 안 생긴다. */
.svx-tk-schedule.is-expanded .svx-sch-notice { flex:0 0 auto; padding:14px 24px; font-size:1.18rem; }
.svx-tk-schedule.is-expanded .svx-sch-notice-go { width:27px; height:27px; font-size:.95rem; }
.svx-tk-schedule.is-expanded .svx-sch-notice-cta { font-size:.86rem; }
.svx-tk-schedule.is-expanded .svx-sch-notice-cta i { font-size:1rem; }
.svx-tk-schedule.is-expanded .svx-tk-footer { flex:0 0 auto; }
.svx-tk-schedule.is-expanded .svx-sch-title { font-size:1.35rem; }
.svx-tk-schedule.is-expanded .svx-sch-body { flex:1 1 auto; min-height:0; display:flex; padding:0; }
.svx-tk-schedule.is-expanded .sch-cal { flex:1 1 auto; display:flex; flex-direction:column; }
.svx-tk-schedule.is-expanded .sch-dow { flex:0 0 auto; }
.svx-tk-schedule.is-expanded .sch-week { flex:1 1 0; display:grid; grid-auto-rows:1fr; }
.svx-tk-schedule.is-expanded .sch-cell { min-height:0; gap:4px; padding:9px var(--sch-pad-x,12px); }
.svx-tk-schedule.is-expanded .sch-dow-cell { font-size:1rem; padding:12px 0; }
.svx-tk-schedule.is-expanded .sch-cell-date { font-size:1.0625rem; }
.svx-tk-schedule.is-expanded .has-circle .sch-cell-date { min-width:30px; height:30px; }
/* 표시범위가 짧으면(1~2주) 확대해도 «세로로 늘어난 한 줄» 이 되지 않게 높이를 내용에 맡긴다. 기본 확대는 높이 고정 + .sch-week{flex:1 1 0} 이라 한 줄이 700px 가까이 늘어난다. */
.svx-tk-schedule.is-expanded.sch-weeks-1 { height:auto; max-height:90vh; }
.svx-tk-schedule.is-expanded.sch-weeks-1 .sch-week { flex:0 0 auto; grid-auto-rows:minmax(124px, auto); }
/* 모바일 기본 = 하단 좌측 카드 / 확대 = 챗봇처럼 화면 꽉(풀스크린 flex 채움). 중앙모달·백드랍 해제 */
@media (max-width:640px) { .svx-tk-schedule { width:calc(100vw - 24px); } .svx-tk-schedule.is-expanded { inset:0; left:0; right:0; top:0; bottom:auto; width:100vw; height:100vh; height:100dvh; max-height:none; transform:none; border-radius:0; animation:none; display:flex; flex-direction:column; } .svx-tk-schedule.is-expanded .sch-cell { padding:6px var(--sch-pad-x,2px); gap:4px; } .svx-tk-schedule.is-expanded .sch-cell-date { font-size:.8rem; } /* 요일 헤더도 같이 줄인다 — 안 하면 PC 확대용 1rem 이 그대로 걸려 375px 에서 «날짜(13.76px)보다 요일(16px)이 큰» 역전이 된다(2026-09-22 사용자 지적). */ .svx-tk-schedule.is-expanded .sch-dow-cell { font-size:.75rem; } .svx-tk-schedule.is-expanded { --sch-label:.7rem; --sch-label-preset:.7rem; --sch-pad-x:2px; --sch-edge:6px; } .svx-tk-schedule.is-expanded .sch-cell-label { letter-spacing:-.02em; } /* ⚠ 확대 규칙이 이 미디어쿼리 안의 규칙보다 특이도가 높다 — 미디어쿼리는 특이도를 안 올린다. 그래서 모바일 확대용으로 «같은 모양» 의 선택자를 여기서 다시 쓴다. 안 하면 375px 칸에서 글자가 잘린다. */ .svx-tk-schedule.is-expanded .has-circle .sch-cell-date { min-width:21px; height:21px; padding:0; } /* 1일(「10/1」)은 네 글자라 축소 모드와 똑같이 가로로 늘린다 — 위 padding:0 이 특이도 동률로 기본 규칙을 덮으므로 여기서 다시 준다. */ .svx-tk-schedule.is-expanded .has-circle .sch-cell-date.is-md { padding:0 5px; } .svx-tk-schedule.is-expanded .sch-cell-holiday { font-size:.55rem; } /* 모바일 확대에서만 «법정» 을 날짜 아래 줄로 내린다(PC 확대는 칸이 넓어 같은 줄로 충분하다). ⚠ 마크업 순서가 날짜 → 법정 → 핀 이라, 법정만 100% 로 주면 핀이 3번째 줄로 밀린다 → order 로 고정한다. */ /* 법정 줄 자리를 «모든 칸» 에 미리 잡아 둔다 — 안 그러면 법정 유무에 따라 윗줄 높이가 갈려 아래의 표시 텍스트가 칸마다 어긋난다. */ .svx-tk-schedule.is-expanded .sch-cell-top { flex-wrap:wrap; row-gap:4px; align-items:baseline; min-height:39px; align-content:flex-start; } .svx-tk-schedule.is-expanded .sch-cell-pin { order:1; } /* 아래 줄로 내려온 «법정» 은 칸 모서리에 붙는다 — 왼쪽·위로 살짝 띄운다. ⚠ flex-basis 100% 라 margin-left 를 쓰면 줄이 넘친다. */ .svx-tk-schedule.is-expanded .sch-cell-holiday { order:2; flex:0 0 100%; box-sizing:border-box; padding-left:3px; margin-top:1px; overflow:visible; text-overflow:clip; line-height:1.15; } .svx-sch-backdrop { display:none; } }
/* 주말 프리셋 전용 톤(관리자와 같은 값 — 미리보기 = 실제 노출). 일요일 휴무·토요일 오전진료는 당연한 일정이라 조용하게 둔다 */
.svx-sch-body .sch-wk-closed { background:rgba(220,38,38,.055); }
/* 프리셋 라벨(휴진·오전진료)만 400 — 당연한 일정이라 시선을 끌면 안 된다. ⚠ **날짜 숫자는 건드리지 않는다.** 운영자가 직접 지정한 날의 라벨도 원래 굵기를 유지한다. */
.svx-sch-body .sch-wk-closed.is-recurring .sch-cell-label, .svx-sch-body .sch-wk-open.is-recurring .sch-cell-label { font-size:var(--sch-label-preset,.8rem); font-weight:400; }
/* 개수가 많아 진하면 시끄럽다 — 굵기(400)는 유지하고 **크기**를 줄여 은은하게. */
/* 달 경계 — 매달 1일 좌측에 노랑 보더. 어디서부터 다음 달인지 한눈에. 년·월 무관 공통. */
/* 월 경계는 «말일의 오른쪽» 에 그린다. 1일 칸에는 아무것도 안 그린다. ⚠ ::before 를 안 쓰는 이유 = 칸 안 글자가 static 이라 absolute 의사요소가 글자를 덮는다. background-image 는 배경색 위·글자 아래라 그 문제가 없고 프리셋과도 겹쳐 보인다. */
.svx-sch-body .sch-cell.is-month-last { border-right-color:rgba(100,116,139,.16); background-image:linear-gradient(to left, rgba(100,116,139,.08) 0, rgba(100,116,139,0) 38px); }
/* 프리셋 글자색 — 개수가 많아(주 1~2회) 진한 적/청이면 달력이 시끄럽다. 주중 직접 지정이 도드라지도록 톤을 낮춘다 */
.svx-sch-body .sch-wk-closed.is-recurring .sch-cell-label, .svx-sch-body .sch-wk-closed.is-recurring .sch-text-red { color:rgba(185,28,28,.9) !important; }
.svx-sch-body .sch-wk-open.is-recurring .sch-cell-label, .svx-sch-body .sch-wk-open.is-recurring .sch-text-blue { color:rgba(29,78,216,.9) !important; }
/* 다크 기본값 — :where() 로 특이도를 낮춰 사이트 덮어쓰기가 순서와 무관하게 이긴다(§12-69). html·body 둘 다 받는다 — 방문자 사이트는 data-theme 을 <html> 에 단다(§12-45). 종전 body[...] 만으로는 사이트에서 걸리지 않았다(§2026-09-26 감사 #08). */
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-sch-body .sch-wk-closed.is-recurring .sch-cell-label { color:rgba(248,113,113,.85) !important; }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-sch-body .sch-wk-open.is-recurring .sch-cell-label { color:rgba(96,165,250,.85) !important; }
.svx-sch-body .sch-wk-open { background:rgba(37,99,235,.055); }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-sch-body .sch-wk-closed { background:rgba(248,113,113,.09); }
:where(html[data-theme="dark"], body[data-theme="dark"]) .svx-sch-body .sch-wk-open { background:rgba(96,165,250,.09); }
/* ═══ 모바일·태블릿 = PC 스타일의 축소판 ═══ 셀 폭에 맞춰 글자·여백을 같이 줄이고, 어떤 값이 와도 옆 칸을 침범하지 못하게 셀에서 클립한다. (PC 값을 그대로 두면 393px 화면에서 「오전진료」 라벨이 셀을 9px 삐져나가 옆 칸을 침범한다) */
/* [구조 안전장치] 라벨이 아무리 길어도 셀 밖으로 새지 않는다 — 전 화면폭 공통 */
.svx-sch-body .sch-cell { overflow:hidden; }
.svx-sch-body .sch-cell-label { min-width:0; max-width:100%; }
@media (max-width:640px) { .svx-sch-body .sch-dow-cell { font-size:.62rem; padding:4px 0; } .svx-sch-body .sch-cell { min-height:50px; padding:5px var(--sch-pad-x,2px); gap:3px; } .svx-sch-body .sch-cell-date { font-size:.7rem; } .svx-tk-schedule { --sch-label:.7rem; --sch-label-preset:.7rem; --sch-pad-x:2px; --sch-edge:6px; } .svx-sch-body .sch-cell-label { letter-spacing:-.02em; line-height:1.12; } /* 주말 프리셋 라벨은 한 단계 더 조용하게 (PC 의 1.05rem ↔ 1.15rem 관계를 그대로 축소) */ .svx-sch-body .sch-cell-holiday { font-size:.55rem; } .svx-sch-body .has-circle .sch-cell-date { min-width:20px; height:20px; padding:0; } .svx-sch-body .sch-cell-pin { width:7px; height:7px; } .svx-tk-schedule .svx-sch-title { font-size:.98rem; } .svx-sch-notice { padding:8px 12px; font-size:.78rem; } }
/* 최협폭(갤럭시 S9+ 320px 등) — 셀이 42px 까지 좁아진다 */
@media (max-width:380px) { .svx-tk-schedule { --sch-pad-x:1px; } .svx-sch-body .sch-cell { min-height:46px; padding:4px var(--sch-pad-x,1px); } .svx-sch-body .sch-cell-date { font-size:.7rem; } .svx-sch-body .has-circle .sch-cell-date { min-width:19px; height:19px; padding:0; } }
/* 태블릿 세로(≤900px)는 PC 값이 그대로 들어간다(카드 폭 고정) — 확대 모달만 폭을 화면에 맞춘다 */
@media (max-width:900px) and (min-width:641px) { .svx-tk-schedule.is-expanded { width:94vw; height:min(760px, 86vh); } }
@media (max-width:900px) and (min-width:641px) { .svx-tk-schedule.is-expanded.sch-weeks-1 { height:auto; max-height:86vh; } }
/* 모바일 확대에서도 1주 표시는 줄이 늘어나지 않게 한다 — 1주는 전체화면이 아니라 가운데 카드다(아래 «1주 확대» 참고). */
@media (max-width:640px) { .svx-tk-schedule.is-expanded.sch-weeks-1 .sch-week { flex:0 0 auto; grid-auto-rows:minmax(92px, auto); } }
/* ═══ 화면보다 길면 본문만 스크롤 — 푸터(닫기)는 항상 손에 닿아야 한다 ═══ ticker.js 가 남은 세로 공간만큼 max-height 를 잡아 준다. 그 안에서 헤더·공지바·푸터는 고정하고 달력만 스크롤시킨다(쿠키 동의 배너가 카드 하단을 덮어 닫기가 안 눌린 적이 있다). */
.svx-tk-schedule:not(.is-expanded) { display:flex; flex-direction:column; }
.svx-tk-schedule:not(.is-expanded) .svx-sch-header, .svx-tk-schedule:not(.is-expanded) .svx-sch-notice, .svx-tk-schedule:not(.is-expanded) .svx-tk-footer { flex:0 0 auto; }
.svx-tk-schedule:not(.is-expanded) .svx-sch-body { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* 푸터 버튼 = 손가락으로 누르는 곳 — 최소 44px 확보 (WCAG 2.5.5 / 애플 HIG) */
.svx-tk-schedule .svx-tk-foot-btn { min-height:44px; }
/* 확대 버튼도 동일 — 시각 크기는 유지하고 터치 영역만 넓힌다 */
@media (hover:none) and (pointer:coarse) { .svx-sch-expand { width:44px; height:44px; } .svx-sch-notice { min-height:44px; } }
/* PC 셀 좌우 여백 4px — 8px 이면 셀 63px 중 라벨 칸이 47px 밖에 안 남아 「오전진료」가 잘린다 */
/* 확대 모드에서는 티커 JS 가 걸어 둔 인라인 위치·높이를 무시한다 — 남아 있으면 풀스크린이어야 할 모달이 잘려 마지막 주가 사라진다. 인라인이 이기므로 !important. */
.svx-tk-schedule.is-expanded { max-height:none !important; }
@media (max-width:640px) { .svx-tk-schedule.is-expanded { bottom:auto !important; top:0 !important; left:0 !important; } }
/* 모바일 1주 확대 = 태블릿·PC 와 같은 «가운데 카드 + 흐린 배경». 한 줄짜리 달력을 전체화면 틀에 두면 위 PC 1주 규칙(height:auto, 특이도 한 단계 위)이 높이만 줄여 맨 위에 붙은 채 아래로 페이지가 비쳤다 (흐린 배경도 모바일에선 꺼져 있다 — 2026-09-29 사용자 신고). 바로 위 모바일 규칙이 !important 라 여기도 !important + 특이도 한 단계 위. 흐린 배경은 body 끝의 별도 요소라 :has() 로 켠다(미지원이면 배경만 없음). */
@media (max-width:640px) { .svx-tk-schedule.is-expanded.sch-weeks-1 { top:50% !important; left:50% !important; right:auto; bottom:auto !important; transform:translate(-50%, -50%); width:calc(100vw - 24px); height:auto; max-height:calc(100dvh - 24px) !important; border-radius:12px; animation:schExpandIn .2s ease-out; } body:has(.svx-tk-schedule.is-expanded.sch-weeks-1) .svx-sch-backdrop { display:block; } }
/* ═══ 모바일 헤더·링크바 — 실기기 기준 ═══ 브라우저 창을 줄여 보면 멀쩡한데 실제 휴대폰에서만 타이틀·아이콘·링크가 과하게 컸다. 원인이 셋이다: ① 확대 버튼 44px 이 «폭 조건 없이» 터치기기 전체에 걸려 헤더(42px)보다 커졌다 → 좁은 화면에서는 32px 로 줄이고, 터치 타깃은 헤더 패딩이 받친다. ② 확대 모드 헤더·링크바에 미디어쿼리가 없어 PC 값이 393px 화면에 그대로 왔다. ③ iOS 텍스트 자동 확대 — 선언이 없어 기본값 auto 로 글자를 스스로 부풀렸다. → **위젯 루트에만** 100% 로 고정한다. 사이트 전역에 걸면 다른 화면들이 한꺼번에 작아진다. ⚠ 미디어쿼리는 특이도를 올리지 않는다 → 순서에 기대지 않도록 클래스를 하나 더 붙여 명시한다. ⚠ PC·태블릿(641px 이상)은 손대지 않는다. */
.svx-tk-schedule { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (max-width:640px) { /* ── 축소(기본 카드) ── */ .svx-tk-schedule .svx-sch-header { padding:6px 12px; gap:6px; } .svx-tk-schedule .svx-sch-expand { width:32px; height:32px; font-size:.95rem; border-radius:6px; } .svx-tk-schedule .svx-sch-notice { padding:8px 12px; font-size:.8rem; gap:6px; min-height:0; } .svx-tk-schedule .svx-sch-notice-go { width:20px; height:20px; font-size:.72rem; } .svx-tk-schedule .svx-sch-notice-cta { font-size:.68rem; } .svx-tk-schedule .svx-sch-notice-cta i { font-size:.82rem; } /* ── 확대(전체화면) ── 축소보다 한 단계만 크게. PC 처럼 벌리면 393px 에서 제목이 줄을 먹는다. */ .svx-tk-schedule.is-expanded .svx-sch-header { padding:9px 14px; } .svx-tk-schedule.is-expanded .svx-sch-title { font-size:1.08rem; } .svx-tk-schedule.is-expanded .svx-sch-expand { width:34px; height:34px; font-size:1rem; } .svx-tk-schedule.is-expanded .svx-sch-notice { padding:10px 14px; font-size:.92rem; } .svx-tk-schedule.is-expanded .svx-sch-notice-go { width:22px; height:22px; font-size:.78rem; } .svx-tk-schedule.is-expanded .svx-sch-notice-cta { font-size:.74rem; } .svx-tk-schedule.is-expanded .svx-sch-notice-cta i { font-size:.88rem; } }