/* ============================================================ * 스케쥴 일정 팝업 위젯 — svndex_schedule_render 출력(.svx-tk-schedule). * 좌하단 티커 .svx-tk-normal(ticker.css) 를 그대로 공유 → 위치·그림자·슬라이드·닫기/오늘하루·하단티커 위 재배치는 ticker.js 담당. * 본 파일 = z-index 우선 + 헤더색상 + 관련공지 바 + 달력 콘텐츠 + 확대(중앙 모달+백드랍). * 관리자 미리보기도 동일 파일 로드 → 프론트와 100% 동일 모습. * ============================================================ */
/* 티커(normal 9000 · top/bottom 9100)보다 위 → 겹치면 스케쥴이 무조건 최상단 */
/* §2026-09-09 — 축소 카드 가로 440 → 500px(사용자 지정). 세로는 내용이 정하므로 건드리지 않는다. 좁은 화면에서는 calc(100vw - 28px) 가 이겨 화면 밖으로 안 나간다. */
.svx-tk-schedule { z-index:9200; width:min(500px, calc(100vw - 28px)); background:#fff; }
/* ── 헤더 = 타이틀바 (실제 타이틀) + 확대 버튼 ── */
/* §2026-09-09 — 헤더 세로폭을 살짝 줄인다(사용자 지정). 높이는 확대버튼(30px)이 정하므로 상하 패딩만 8→6px = 46→42px. 확대모드(.is-expanded)는 아래에서 따로 잡으므로 영향 없다. */
.svx-tk-schedule .svx-sch-header { padding:6px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
/* 타이틀 헤더도 확대/축소 스위치다(2026-09-10 사용자 지시 · 배선 = 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] 필수(§감사3 HIGH) — 위 display:inline-flex 가 UA 기본 [hidden]{display:none} 을 origin 우선순위로 이겨, 관리자 미리보기에서 schedule.php 의 `pvExpand.hidden = !use_expand` 가 무효였다(「확대/축소」를 꺼도 버튼이 보이고 눌리기까지 함 — schedule.js 위임 리스너가 _layout.php 를 통해 전 관리자 페이지에 로드됨). 같은 파일 아래 .svx-sch-notice[hidden] 은 있는데 이 한 건만 빠져 있었다. 공개 프론트는 seo-extras.php 가 PHP if 로 조건부 출력이라 영향 없음. */
.svx-sch-expand[hidden] { display:none; }
/* 헤더 색상 7종 (7dex / 네이비 / 그린 / 레드 / 블랙 / 오렌지 / 화이트) — bg + 글자색 ⚠️ 레드 #9f1b1b = 티커 .tk-color-c7 과 **같은 값**이다(두 위젯이 같은 빨강을 쓴다). 한쪽만 바꾸지 말 것. */
.svx-tk-schedule.hd-7dex .svx-sch-header { background:#7c3aed; }
.svx-tk-schedule.hd-7dex .svx-sch-title { color:#fff; }
.svx-tk-schedule.hd-navy .svx-sch-header { background:#191970; }
.svx-tk-schedule.hd-navy .svx-sch-title { color:#fff; }
.svx-tk-schedule.hd-green .svx-sch-header { background:#16a34a; }
.svx-tk-schedule.hd-green .svx-sch-title { color:#fff; }
.svx-tk-schedule.hd-red .svx-sch-header { background:#9f1b1b; }
.svx-tk-schedule.hd-red .svx-sch-title { color:#fff; }
.svx-tk-schedule.hd-black .svx-sch-header { background:#232323; }
.svx-tk-schedule.hd-black .svx-sch-title { color:#fff; }
/* 오렌지 = 중간 톤이라 흰 글자 대비가 2.1:1 로 모자란다 — 어두운 글자(6.9:1)를 쓴다. */
.svx-tk-schedule.hd-orange .svx-sch-header { background:#F0A027; }
.svx-tk-schedule.hd-orange .svx-sch-title { color:#1e293b; }
.svx-tk-schedule.hd-white .svx-sch-header { background:#ffffff; border-bottom:1px solid #e5e7eb; }
.svx-tk-schedule.hd-white .svx-sch-title { color:#1e293b; }
/* 밝은 헤더(그레이·화이트)에선 확대버튼도 어둡게 */
.svx-tk-schedule.hd-orange .svx-sch-expand, .svx-tk-schedule.hd-white .svx-sch-expand { background:rgba(0,0,0,.07); color:#334155; }
.svx-tk-schedule.hd-orange .svx-sch-expand:hover, .svx-tk-schedule.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; }
/* 링크 써클 = 문구 «좌측» / 「바로가기」 = 우측 끝 (§2026-09-11 사용자 지정) 좌측 원이 «무엇인지»(링크)를 아이콘으로, 우측이 «무엇을 하는지»(바로가기)를 글자로 말한다. 초록은 달력의 «오늘» 핀(.sch-cell-pin #16a34a)과 같은 값 — 위젯 안에서 초록의 뜻을 「지금 살아 있는 것」 하나로 맞춰 두면 색이 늘어나지 않는다. 우측 문구는 «은은하게» 둔다: 본문보다 작고 흐린 회색이라 제목을 가리지 않는다. */
.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:#9096a1; 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 변수 없어 명시) */
.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; }
.svx-sch-body .sch-dow-cell.is-sun { color:#dc2626; }
.svx-sch-body .sch-dow-cell.is-sat { color:#2563eb; }
.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 으로 깎아 보정했더니 날짜가 칸 보더에 붙어버렸다(2026-08-09 사용자 지적). 바깥쪽만 더하므로 양끝 칸의 내용폭은 --sch-edge 만큼 좁아지지만, 그리드 7칸(1fr)은 그대로다. 여백은 모드가 정한다(축소 +6px · 확대 +10px · 모바일 +6px). .sch-cell 의 좌우값보다 특이도가 높아야 해서 :first-child/:last-child 4-클래스 선택자로 둔다. */
.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); }
/* 오늘 = 밝은 그레이 배경 (보라 아웃라인/틴트 없음). 호버 = 옅은 드롭 쉐도우(보라 아웃라인 상속 override) */
/* 오늘 = **초록 핀 하나로만** 표시한다. 배경은 프리셋(주말 휴무/오전진료)·직접지정 규칙에 맡긴다. §2026-08-09: 여기 회색 배경이 있었는데 선택자 특이도(클래스 3개)가 프리셋(.sch-wk-closed, 2개)보다 높아 **일요일 휴무의 붉은 배경을 덮었다** — 오늘이 일요일이면 프리셋이 사라져 보였다(사용자 지적). */
.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:.82rem; font-weight:700; color:#1e293b; line-height:1.1; text-align:left; }
/* TODAY = 날짜와 동일 폰트 크기(1em)·같은 baseline (날짜 우측 한 칸 띄고) */
.svx-sch-body .sch-cell-today { margin-left:6px; color:var(--brand-color, var(--c-primary, #7c3aed)); font-size:1em; font-weight:700; font-style:normal; letter-spacing:.01em; vertical-align:baseline; }
.svx-sch-body .sch-cell.is-sun .sch-cell-date { color:#dc2626; }
.svx-sch-body .sch-cell.is-sat .sch-cell-date { color:#2563eb; }
/* 라벨 크기 = 모드(축소·확대)와 기기가 정하고, 굵기는 종류(프리셋 400 / 개별입력 500)가 정한다. ⚠️ 크기를 선택자에 직접 쓰면 프리셋 선택자(.sch-wk-*.is-recurring = 클래스 4개)가 확대 선택자(.svx-tk-schedule.is-expanded = 3개)를 이겨, 확대해도 프리셋만 안 커진다. 그래서 값은 변수로 컨테이너에 얹고 규칙은 var() 만 읽는다 — 특이도 싸움이 생기지 않는다. ⚠️ 미디어쿼리는 특이도를 올리지 않는다. 모바일에서도 .is-expanded 를 같이 재정의해야 PC 확대값(1.1rem)이 모바일로 새지 않는다. */
.svx-tk-schedule { --sch-label:.85rem; --sch-label-preset:.8rem; --sch-pad-x:3px; --sch-edge:6px; }
.svx-tk-schedule.is-expanded { --sch-label:1.1rem; --sch-label-preset:1.1rem; --sch-pad-x:12px; --sch-edge:10px; }
.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:600; line-height:1.16; }
.svx-sch-body .has-circle .sch-cell-date { color:#fff !important; min-width:22px; height:22px; padding:0 5px; 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:.62rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sch-htext-red { color:#dc2626; }
.sch-htext-black { color:#1e293b; }
.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 프리셋 */
.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; }
/* 하늘색 — 토요일 오전진료 프리셋(.sch-wk-open)과 «같은 값» 을 쓴다. 숫자를 따로 적으면 갈린다. */
.svx-sch-body .sch-bg-sky { background:rgba(37,99,235,.055); }
/* 더 연한 빨강 — 일요일 휴진 프리셋(.sch-wk-closed)과 «같은 값». sky 와 같은 방식이다. */
.svx-sch-body .sch-bg-rose { background:rgba(220,38,38,.055); }
.svx-sch-body .sch-bg-gray { background:#e5e5e5; }
/* 확대 시 공휴일·핀 크게 */
.svx-tk-schedule.is-expanded .sch-cell-holiday { font-size:.82rem; }
.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; }
.svx-sch-body .sch-text-red { color:#dc2626 !important; }
.svx-sch-body .sch-text-blue { color:#2563eb !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 일 때만 확대버튼 노출 ── */
/* 확대 중 배경 스크롤 잠금 — svx-img/link/vid/btnm-modal-open(editor.css) 와 동일 컨벤션. 스크롤바가 사라져 left:50% 중앙정렬이 스크롤바 유무에 흔들리지 않고, 모달 뒤 배경 스크롤도 막는다. */
body.svx-sch-modal-open { overflow:hidden; }
.svx-sch-backdrop { position:fixed; inset:0; z-index:10050; background:rgba(15,23,42,.34); opacity:0; transition:opacity .26s ease; }
.svx-sch-backdrop.is-on { opacity:1; }
/* 확대 = 정가운데 큰 모달 (16:9 팝업만큼 폭 + 세로 채움). transition:none = 대각선 잼 제거(즉시 스냅), animation 으로 팝인. 스크롤바 없음(달력이 세로 flex 로 딱 채움). */
.svx-tk-schedule.is-expanded { z-index:10051; 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; }
/* 확대모드에서만 링크바를 키운다 — 축소모드(팝업 원래 크기)는 종전 그대로 둔다(§2026-09-11 사용자 지정). 화면을 키운 만큼 「어디로 가는 링크인지」가 먼저 읽혀야 해서 문구를 제목 다음 크기로 올린다. 양쪽 원(노랑 화살표·초록 링크)도 같이 키워야 문구만 커지고 아이콘이 남는 어긋남이 안 생긴다. */
.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.18rem; }
.svx-tk-schedule.is-expanded .sch-cell-today { margin-left:8px; }
/* §2026-09-09 — 확대모드 동그라미가 너무 컸다(사용자 지적). 날짜가 주인공이 아니라 라벨이 주인공인 칸이라 32→26px. 같은 줄의 «법정» 칸에 글자 자리를 돌려주는 목적도 있다. */
.svx-tk-schedule.is-expanded .has-circle .sch-cell-date { min-width:26px; height:26px; }
/* §2026-09-09 — 표시범위가 짧으면(1~2주) 확대해도 «세로로 늘어난 한 줄» 이 되지 않게 한다. 기본 확대는 height:min(760px,90vh) 고정 + .sch-week{flex:1 1 0} 이라, 주가 1줄이면 그 한 줄이 700px 가까이 늘어나 칸이 통짜 사각형이 된다. 짧은 범위는 높이를 «내용» 에 맡겨 가로로 넓은 비율이 된다. */
.svx-tk-schedule.is-expanded.sch-weeks-1, .svx-tk-schedule.is-expanded.sch-weeks-2 { height:auto; max-height:90vh; }
.svx-tk-schedule.is-expanded.sch-weeks-1 .sch-week, .svx-tk-schedule.is-expanded.sch-weeks-2 .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); } .svx-tk-schedule.is-expanded .sch-cell-date { font-size:.86rem; } .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; } /* ⚠️ 확대 규칙은 (0,4,0)/(0,3,0) 이라 이 미디어쿼리 안의 (0,3,0)/(0,2,0) 규칙을 이긴다 — 미디어쿼리는 특이도를 안 올린다(파일 머리 주석 참조). 그래서 모바일 확대용으로 «같은 모양»의 선택자를 여기서 다시 쓴다. 안 하면 375px 화면에서도 동그라미 32px·법정란 .82rem 이 그대로 걸려 폭 53px 짜리 칸에서 «연휴» 가 «연..» 으로 잘렸다(실측). */ .svx-tk-schedule.is-expanded .has-circle .sch-cell-date { min-width:20px; height:20px; padding:0 4px; } .svx-tk-schedule.is-expanded .sch-cell-holiday { font-size:.66rem; } /* §2026-09-09 — 모바일 확대에서만 «법정» 을 날짜 아래 줄로 내린다(사용자 지정). PC 확대는 칸이 넓어 같은 줄로 충분하다 — 여기서만 바꾼다. ⚠️ 마크업 순서가 날짜 → 법정 → 오늘핀 이라, 법정만 100% 로 주면 핀이 3번째 줄로 밀린다. order 로 핀을 날짜 옆에 붙여 «두 줄» 로 고정한다. */ /* 법정 줄 자리를 «모든 칸» 에 미리 잡아 둔다(사용자 지정) — 안 그러면 법정 유무에 따라 윗줄 높이가 36px/15px 로 갈려 아래의 표시 텍스트가 칸마다 21px 씩 어긋난다(실측). 36px = 동그라미 20 + row-gap 3 + margin 1 + 법정 한 줄 약 12. */ .svx-tk-schedule.is-expanded .sch-cell-top { flex-wrap:wrap; row-gap:3px; align-items:baseline; min-height:36px; align-content:flex-start; } .svx-tk-schedule.is-expanded .sch-cell-pin { order:1; } /* 아래 줄로 내려온 «법정» 은 칸 모서리에 딱 붙는다 — 왼쪽·위로 살짝 띄운다(사용자 지정). ⚠️ flex-basis 100% 라 margin-left 를 쓰면 줄이 넘쳐 또 접힌다. border-box + padding-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; } }
/* 주말 프리셋 전용 톤 (관리자 svndex.css 와 동일 값 — 미리보기 = 실제 노출) §2026-08-08 일요일 휴무·토요일 오전진료는 당연한 일정이라 조용하게. 주중 별도 일정이 묻히지 않도록. */
.svx-sch-body .sch-wk-closed { background:rgba(220,38,38,.055); }
/* 프리셋 라벨(휴진·오전진료 텍스트)만 400 — 당연한 일정이라 시선을 끌면 안 된다. ⚠️ **날짜 숫자는 건드리지 않는다.** 운영자가 직접 지정한 날의 라벨도 원래 굵기(700) 유지 — .is-recurring(= 주말 프리셋 자동 생성) 인 것에만 적용한다. */
.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:500; }
/* 개수가 많아 진하면 시끄럽다 — 굵기(400)는 유지하고 **크기**를 줄여 은은하게. */
/* 프리셋 크기는 따로 두지 않는다 — 크기는 모드(확대/축소)가, 굵기는 종류(프리셋400/개별500)가 정한다. */
/* 달 경계 — 매달 1일 좌측에 노랑 보더. 어디서부터 다음 달인지 한눈에. 년·월 무관 공통. */
/* §2026-09-09 — 월 경계는 «말일의 오른쪽» 에 그린다(사용자 지정). 1일 칸은 아무것도 안 그린다. ⚠️ ::before 를 안 쓰는 이유 = 칸 안 글자가 static 이라 absolute 의사요소가 글자 위를 덮는다. background-image 는 배경색 위·글자 아래라 그 문제가 없고 .sch-bg-* 프리셋과도 겹쳐 보인다. */
.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(220,38,38,.82) !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(37,99,235,.82) !important; }
body[data-theme="dark"] .svx-sch-body .sch-wk-closed.is-recurring .sch-cell-label { color:rgba(248,113,113,.85) !important; }
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); }
body[data-theme="dark"] .svx-sch-body .sch-wk-closed { background:rgba(248,113,113,.09); }
body[data-theme="dark"] .svx-sch-body .sch-wk-open { background:rgba(96,165,250,.09); }
/* ═══ 모바일/태블릿 — PC 스타일의 축소판 (2026-08-08 신설) ═══════════════════ 종전 @media 블록은 **확대(.is-expanded) 상태만** 다뤘다. 기본 카드는 PC 값 그대로라 폭만 좁아지고 글자는 그대로 → 칸 대비 글자가 압도적으로 커졌다. 실측(iPhone 14 Pro 393px): 셀 폭 49px 인데 "오전진료" 라벨이 58px — **9px 삐져나가 옆 칸을 침범**했다(PC 는 셀 60px 라 겨우 들어가서 안 보였던 문제). → 셀 폭에 맞춰 글자·여백을 같이 줄이고, 어떤 값이 와도 옆 칸을 침범하지 못하게 셀에서 클립한다. */
/* [구조 안전장치] 라벨이 아무리 길어도 셀 밖으로 새지 않는다 — 전 화면폭 공통 */
.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:1px; } .svx-sch-body .sch-cell-date { font-size:.72rem; } .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:18px; height:18px; padding:0 4px; } .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:16px; height:16px; padding:0 3px; } }
/* 태블릿 세로(≤900px)는 PC 값이 그대로 들어간다(카드 폭 440 고정) — 별도 축소 불필요. 확대 모달만 폭을 화면에 맞춘다. */
@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, .svx-tk-schedule.is-expanded.sch-weeks-2 { height:auto; max-height:86vh; } }
/* 모바일 확대는 전체화면이라 높이를 줄이지 않는다 — 대신 줄이 늘어나지만 않게 한다(아래 여백은 정상). */
@media (max-width:640px) { .svx-tk-schedule.is-expanded.sch-weeks-1 .sch-week, .svx-tk-schedule.is-expanded.sch-weeks-2 .sch-week { flex:0 0 auto; grid-auto-rows:minmax(92px, auto); } }
/* ═══ 화면보다 길면 본문만 스크롤 — 푸터(닫기)는 항상 손에 닿아야 한다 (2026-08-08) ═══ ticker.js 의 adjustNormalPosition() 이 남은 세로 공간만큼 max-height 를 잡아준다. 그 높이 안에서 헤더·공지바·푸터는 고정, 달력만 스크롤시킨다. 실측 계기: 쿠키 동의 배너(158px)가 카드 하단을 덮어 "오늘 하루 보지 않기 / 닫기" 가 안 눌렸다. */
.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 로 좁힌 이유 — 실측: 셀 63px 인데 좌우 8px 씩 먹어 라벨 칸이 47px 밖에 안 남고 "오전진료"(16.8px 기준 52px)가 잘렸다. 여백만 줄이면 글자 크기를 안 건드리고 55px 가 확보된다. */
/* 확대 모드에서는 티커 JS 가 잡아둔 인라인 위치·높이를 무시한다 (2026-08-08) 실측: adjustNormalPosition() 이 걸어둔 `bottom`·`max-height` 인라인 스타일이 확대 시에도 남아 풀스크린이어야 할 모달이 460px 로 잘리고 마지막 주가 잘려 나갔다(모바일 확대). 인라인이 이기므로 !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; } }
/* ═══ 모바일 헤더·링크바 — 실기기 기준 재조정 (2026-09-12) ════════════════════ 증상: 실제 휴대폰에서만 타이틀·확대아이콘·링크제목이 과하게 컸다. 브라우저 창을 줄여 보면 멀쩡해서 한참 안 드러났다. 원인이 셋이고 **전부 이 파일(공용 부품)** 이라 세 사이트가 같은 상태였다. ① 확대 버튼 44px 이 «폭 조건 없이» 걸린다 — `@media (hover:none) and (pointer:coarse)`. 터치기기면 화면 크기와 무관하게 44px 이라, 헤더(42px)보다 버튼이 커져 튀어나왔다. 브라우저 창만 줄이면 pointer:fine 이라 이 규칙이 안 걸린다 = «브라우저에선 괜찮다» 의 정체. → 좁은 화면에서는 32px 로 줄이되 터치 타깃은 헤더 패딩이 받쳐 준다. ② 확대 모드 헤더·링크바에 미디어쿼리가 아예 없었다 — PC 값(타이틀 1.35rem · 링크 1.18rem)이 393px 화면에 그대로 왔다. 위쪽 640px 블록은 달력 셀만 줄이고 헤더는 손대지 않는다. ③ iOS 텍스트 자동 확대(text inflation). `-webkit-text-size-adjust` 선언이 세 사이트 어디에도 없어 기본값 auto 로 동작했고, 좁은 화면에서 글자를 스스로 부풀린다. 데스크톱 에뮬레이션은 이 동작을 안 해서 «실기기에서만» 커 보였다. → **위젯 루트에만** 100% 로 고정한다. 사이트 전역(html/body)에 걸면 지금 부풀려져 있던 다른 화면들이 한꺼번에 작아진다 — 운영 중인 사이트라 그 범위는 따로 판단한다. ⚠️ 미디어쿼리는 특이도를 올리지 않는다(이 파일 149행 주석과 같은 함정). ①은 (0,1,0) 이라 여기서도 (0,1,0) 으로 쓰면 «나중에 나온 쪽» 으로만 이긴다 — 이 블록을 파일 끝에 두는 이유다. 순서에 기대지 않도록 클래스를 하나 더 붙여 (0,2,0) 으로 명시한다. ⚠️ 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; } }