/* ══ 화면 겹침 순서(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 가 안 실린다) ═══════════════════════════════════════════════════════════════════ */ /* 번역 위젯 — 커스텀 언어 드롭다운 + 숨긴 Google Element + 자동번역 고지. 자기완결 모듈(translate.php 가 head 에서 link 한다) */ /* Google 가젯/배너/로고 완전 숨김 — 우리 select 만 노출 */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.skiptranslate, .skiptranslate > iframe, .goog-logo-link, .goog-te-gadget-icon { display: none !important; } /* html body = Google 이 동적으로 주입하는 body{top:40px} 보다 우선하도록 특이도를 맞춘다. position:static 은 이중 안전 */ html body { top: 0 !important; position: static !important; } #goog-gt-tt, .goog-te-balloon-frame, .goog-te-gadget { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* Element 컨테이너는 DOM 에 살려두되 화면 밖으로 (쿠키 번역은 동작, 가젯은 안 보임) */ #google_translate_element { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* 언어 드롭다운 (국기 버튼 + 호버/클릭 리스트) */ .svndex-lang { position: relative; display: inline-flex; align-items: center; } .svndex-lang-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(0, 0, 0, .14); border-radius: 50%; background: #fff; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } /* 투명 방식(site.translate_btn_style=ghost) — 헤더가 어두운 사이트용. 배경을 비우고 헤더 글자색을 따라간다. 테두리는 그 글자색의 16%(비온 아이콘 버튼 기준) · color-mix 미지원 브라우저는 앞 줄로 내려간다. ⚠️ 이 블록은 «펼침 강조»(아래 규칙)와 특이도가 같다 — 반드시 그보다 «앞»에 둘 것. 뒤로 옮기면 hover 링이 죽는다. */ .svndex-lang.is-ghost .svndex-lang-btn { background: transparent; color: inherit; border-color: currentColor; border-color: color-mix(in srgb, currentColor 16%, transparent); } .svndex-lang.is-ghost .svndex-lang-code { color: inherit; } /* 펼침 상태(호버 or 클릭) = 보더 강조 + 은은한 링 */ .svndex-lang:hover .svndex-lang-btn, .svndex-lang.is-open .svndex-lang-btn { border-color: var(--brand-color, var(--c-primary, #7c3aed)); box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 124, 58, 237), .14); } .svndex-lang-list { position: absolute; top: calc(100% + 10px); right: 0; min-width: 162px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .24s ease; z-index: 203000; } .svndex-lang:hover .svndex-lang-list, .svndex-lang.is-open .svndex-lang-list { opacity: 1; visibility: visible; transform: none; } .svndex-lang-list a { display: flex; align-items: center; gap: 11px; padding: 9px 16px; font-size: .92rem; color: #333; text-decoration: none; transition: background .15s ease, color .15s ease; } .svndex-lang-list a:hover { background: rgba(var(--brand-rgb, 124, 58, 237), .07); color: #111; } /* 기본 목록은 흰 카드(다크에서도 사이트가 덮지 않으면 흰색) — 선택 항목도 흰 바탕용 브랜드 글자색을 쓴다(§2026-09-29). --brand-color 는 사이트가 다크에서 밝게 바꿔 흰 카드 위 대비 2.7 이 됐다(엔진 사이트). 목록을 어둡게 칠하는 사이트는 선택 색도 직접 덮는다. */ .svndex-lang-list a.is-active { color: var(--brand-color-text, var(--brand-color, var(--c-primary, #7c3aed))); font-weight: 600; } /* 투명 방식의 목록 = 글래스. 흰 카드는 어두운 헤더 밑에서 혼자 떠 보인다. 버튼과 목록이 같이 바뀐다. ⚠️ 글자색·hover 는 :where() 로 특이도를 «0 + a» 까지 낮춰 사이트가 덮을 수 있게 뒀다(§12-69). 그래서 바로 위 기본 규칙들과 특이도가 같다 — 이 블록은 반드시 «그 뒤» 에 둘 것. 앞으로 옮기면 글자가 흰 카드용 #333 으로 되돌아가 어두운 유리 위에서 안 읽힌다(실측으로 한 번 그랬다). ⚠️ 활성 항목은 (0,2,1) 이라 여기 영향을 안 받는다 — 브랜드색이 그대로 유지된다(의도). ⚠️ backdrop-filter 는 사파리가 -webkit- 접두사를 따로 본다. 둘 다 적는다. */ .svndex-lang.is-ghost .svndex-lang-list { background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); border-color: rgba(255, 255, 255, .18); box-shadow: 0 14px 36px rgba(0, 0, 0, .34); } :where(.svndex-lang.is-ghost) .svndex-lang-list a { color: #f1f2f4; } /* hover 배경만 특이도를 살려 둔다 — 사이트의 라이트용 hover(브랜드색 8%)는 어두운 유리 위에서 보이지 않아 «눌러지는 줄» 표시가 통째로 사라진다(실측 비온). 가시성은 방식의 본질이라 방식이 이긴다. 사이트가 굳이 바꾸려면 `.svndex-lang.is-ghost` 를 명시해 덮으면 된다. */ .svndex-lang.is-ghost .svndex-lang-list a:hover { background: rgba(255, 255, 255, .13); color: #fff; } .svndex-flag { width: 22px; height: 16px; border-radius: 3px; flex-shrink: 0; display: inline-block; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(14, 23, 26, .08) inset; } .svndex-lang-cur { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(14, 23, 26, .1) inset; } /* 리스트는 opacity/visibility 로만 숨기므로(부드러운 트랜지션 유지) 상자 자체는 항상 생긴다 — background-image 를 «펼쳐졌을 때만» 주지 않으면 국기 SVG 16개가 접힌 상태에도 전부 미리 받아진다. 항상 보이는 현재 언어 아이콘만 예외로 즉시 로드한다(아래 별도 규칙). */ .svndex-lang:hover .svndex-flag-kr, .svndex-lang.is-open .svndex-flag-kr, .svndex-lang-cur.svndex-flag-kr { background-image: url("/images/flags/kr.svg"); } .svndex-lang:hover .svndex-flag-us, .svndex-lang.is-open .svndex-flag-us, .svndex-lang-cur.svndex-flag-us { background-image: url("/images/flags/us.svg"); } .svndex-lang:hover .svndex-flag-cn, .svndex-lang.is-open .svndex-flag-cn, .svndex-lang-cur.svndex-flag-cn { background-image: url("/images/flags/cn.svg"); } .svndex-lang:hover .svndex-flag-jp, .svndex-lang.is-open .svndex-flag-jp, .svndex-lang-cur.svndex-flag-jp { background-image: url("/images/flags/jp.svg"); } .svndex-lang:hover .svndex-flag-vn, .svndex-lang.is-open .svndex-flag-vn, .svndex-lang-cur.svndex-flag-vn { background-image: url("/images/flags/vn.svg"); } .svndex-lang:hover .svndex-flag-th, .svndex-lang.is-open .svndex-flag-th, .svndex-lang-cur.svndex-flag-th { background-image: url("/images/flags/th.svg"); } .svndex-lang:hover .svndex-flag-id, .svndex-lang.is-open .svndex-flag-id, .svndex-lang-cur.svndex-flag-id { background-image: url("/images/flags/id.svg"); } .svndex-lang:hover .svndex-flag-ru, .svndex-lang.is-open .svndex-flag-ru, .svndex-lang-cur.svndex-flag-ru { background-image: url("/images/flags/ru.svg"); } .svndex-lang:hover .svndex-flag-mn, .svndex-lang.is-open .svndex-flag-mn, .svndex-lang-cur.svndex-flag-mn { background-image: url("/images/flags/mn.svg"); } .svndex-lang:hover .svndex-flag-uz, .svndex-lang.is-open .svndex-flag-uz, .svndex-lang-cur.svndex-flag-uz { background-image: url("/images/flags/uz.svg"); } .svndex-lang:hover .svndex-flag-arab-league, .svndex-lang.is-open .svndex-flag-arab-league, .svndex-lang-cur.svndex-flag-arab-league { background-image: url("/images/flags/arab-league.svg"); } .svndex-lang:hover .svndex-flag-es, .svndex-lang.is-open .svndex-flag-es, .svndex-lang-cur.svndex-flag-es { background-image: url("/images/flags/es.svg"); } .svndex-lang:hover .svndex-flag-fr, .svndex-lang.is-open .svndex-flag-fr, .svndex-lang-cur.svndex-flag-fr { background-image: url("/images/flags/fr.svg"); } .svndex-lang:hover .svndex-flag-de, .svndex-lang.is-open .svndex-flag-de, .svndex-lang-cur.svndex-flag-de { background-image: url("/images/flags/de.svg"); } .svndex-lang:hover .svndex-flag-pt, .svndex-lang.is-open .svndex-flag-pt, .svndex-lang-cur.svndex-flag-pt { background-image: url("/images/flags/pt.svg"); } .svndex-flag-none { background: #e5e7eb; } /* 국기 대신 언어 약어로 표시하는 방식(site.translate_icon_style=text) — 칸 너비를 국기와 같은 22px 로 맞춰 목록 정렬이 방식에 따라 흔들리지 않게 한다. 약어는 두 글자 고정(버튼이 26px 까지 줄어든다). */ .svndex-lang-code { width: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1; color: #374151; } /* 버튼의 현재 언어 표시 — .svndex-lang-cur 의 원형 상자·안쪽 링은 국기용이라 글자에서는 푼다. */ .svndex-lang-cur.svndex-lang-code { width: auto; height: auto; border-radius: 0; box-shadow: none; font-size: .72rem; } /* 목록 안에서는 그 줄의 글자색을 따른다 — 다크모드·활성색을 사이트가 이미 정해 둔다. 국기와 «같은 22×16 자리» 에 테두리를 둘러 칸이 보이게 한다 — 글자만 두면 국기 모드보다 허전하다. 테두리·글자를 한 덩이로 흐리므로 색은 opacity 로만 조절한다(다크·활성색을 안 건드린다). */ .svndex-lang-list .svndex-lang-code { box-sizing: border-box; height: 16px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 34%, transparent); border-radius: 999px; font-size: .62rem; color: inherit; opacity: .8; } .svndex-lang-list a.is-active .svndex-lang-code { opacity: 1; } /* 다크 기본값은 :where() 로 — 이 파일이 사이트 CSS 뒤에 실려서, 특이도가 같으면 사이트가 진다(§12-69). */ :where(html[data-theme="dark"], body[data-theme="dark"]) .svndex-lang-cur.svndex-lang-code { color: #e5e7eb; } /* 버튼 바탕도 같은 다크 기본값으로 짝을 맞춘다(§2026-09-29) — 위 약어 글자만 밝게 바꾸고 바탕을 흰색으로 두면, 다크 바탕을 따로 칠하지 않은 사이트(슬찬)에서 약어 모드가 흰 원 위 흰 글자(대비 1.24)가 됐다. 반투명이라 사이트 헤더 색을 그대로 비친다. 특이도는 기본 규칙과 같다(뒤라서 이긴다) — 사이트가 덮은 다크 바탕(강남 등 (0,2,1) 이상)과 투명 방식(.is-ghost)은 그대로 이긴다. */ :where(html[data-theme="dark"], body[data-theme="dark"]) .svndex-lang-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); } /* 자동번역 고지 바 (번역 활성 시 노출) */ .svndex-translate-notice { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 202000; padding: 8px 44px 8px 16px; font-size: .8rem; text-align: center; background: rgba(20, 20, 20, .88); color: #fff; } html.translated-ltr .svndex-translate-notice, html.translated-rtl .svndex-translate-notice { display: block; } /* Google 은 번역문을 로 감싼다. 그 태그가 자체 크기를 물고 들어오면 타이포가 통째로 틀어진다 — 상속으로 고정한다. ⚠️ 언어를 안 가리는 가드라 «항상 실리는» 이 파일에 둔다. 긴 언어 전용 파일에 두면 일본어·중국어 번역에서 빠진다. */ font, font *, .goog-text-highlight { font-size: inherit !important; line-height: inherit !important; } .svndex-translate-notice.is-dismissed { display: none !important; } .svndex-tr-notice-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 6px; } /* FOUC 가드 해제 — seo-extras.php 가 이 부품을 visibility:hidden 으로 숨겨 두고, 이 파일이 도착하면 드러낸다. ⚠ 이 규칙을 지우면 언어변경 위젯이 영영 안 보인다. */ .svndex-lang { visibility: visible; } /* 쿠키 동의 배너가 떠 있는 동안에는 번역 고지를 내린다 — 배너는 누르면 사라지고, 그 동안 동의·거부 버튼이 가려지면 방문자가 아무것도 선택할 수 없다(§2026-09-23). */ .svndex-translate-notice.is-behind-consent { display: none !important; }