@charset "UTF-8";
/* =========================================================
   한신한의원 — WordPress · Elementor 보정
   ---------------------------------------------------------
   우리 HTML(common.css · main.css)을 엘리멘터 HTML 위젯에 넣었을 때
   엘리멘터 · 워드프레스 기본 스타일과 부딪히는 부분만 바로잡음.
   디자인 수정은 여기서 하지 말고 common.css · main.css(원본 HTML 쪽)에서.

   붙여넣기 코드는 전부 <div class="hs-raw"> … </div> 로 감싸져 있음
   1. 엘리멘터 컨테이너 여백 · 폭 제한 제거
   2. 위젯 래퍼 transform 제거 (고정 헤더 · 퀵메뉴)
   3. 엘리멘터 이미지 기본값 덮어쓰기
   4. 관리자 바(로그인 시) 높이만큼 헤더 내리기
   5. 접근성 (Hello theme.css 를 끄면서 빠진 부분)
   ========================================================= */

/* ---------- 1. 컨테이너 ----------
   엘리멘터 기본값 : 안쪽 여백 10px · 위젯 간격 20px · 최대 폭 1140px
   → 우리 HTML 이 들어간 컨테이너는 0 · 전체 폭 (섹션 배경이 화면 끝까지, 컨텐츠 폭은 .wrap 이 잡음) */
.e-con:has(.hs-raw){
  --padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
  --gap:0px;--row-gap:0px;--column-gap:0px;
  --content-width:100%;--container-max-width:100%;
}

/* ---------- 2. 고정 요소 (안전장치) ----------
   엘리멘터 위젯 래퍼에 transform 이 걸리면 안쪽 position:fixed 가 화면이 아니라 위젯 기준이 됨
   (헤더 · 퀵메뉴가 스크롤 따라 내려오지 않는 문제) → 위젯에 모션 효과 등을 넣어도 고정되도록 */
.elementor-widget-container:has(> .hs-raw),
.elementor-element:has(> .hs-raw){transform:none}

/* ---------- 3. 이미지 ----------
   엘리멘터 : .elementor img { height:auto; max-width:100% } 가 우리 높이 지정을 덮어씀 */
:is(.hs-raw,.hs-el) .cover{height:100%}
:is(.hs-raw,.hs-el) .f-logo{height:48px}
:is(.hs-raw,.hs-el) .quick-slim img{height:100%}
:is(.hs-raw,.hs-el) .gnb-logo img{height:auto}
@media (max-width:999px){ :is(.hs-raw,.hs-el) .facts img{height:52px} }
@media (max-width:690px){ :is(.hs-raw,.hs-el) .facts img{height:34px} }
@media (max-width:480px){ :is(.hs-raw,.hs-el) .facts img{height:28px} }

/* figure 여백 : 엘리멘터 .elementor .elementor-widget:not(…) figure { margin:0 } 이 지워버림
   (메인 3대 100년 사진 — PC 제목 아래 40px · 999 이하 가운데 정렬) → 원래 값 복원 */
.elementor .elementor-widget-html .hs-raw .legacy-side figure.legacy-photo{margin-top:40px}
@media (max-width:999px){ .elementor .elementor-widget-html .hs-raw .legacy-side figure.legacy-photo{margin:var(--head-gap) auto 0} }
/* 서브 : 한신슬림환 유지관리 그래프 (page.css .maintain .graph) */
.elementor .elementor-widget-html .hs-raw .maintain figure.graph{margin:36px auto 0}

/* ---------- 4. 관리자 바 ----------
   로그인한 상태에서만 보이는 상단 검은 바(32px · 782px 이하 46px) 만큼 헤더를 내림 */
.admin-bar .gnb{top:32px}
.admin-bar .legacy-side{top:calc(var(--header-h) + 32px)}
@media (max-width:999px){
  .admin-bar .gnb-nav{top:calc(var(--header-h) + 32px)}
  .admin-bar .gnb.on .gnb-nav{top:calc(var(--header-h-on) + 32px)}
}
@media (max-width:782px){
  .admin-bar .gnb{top:46px}
  .admin-bar .gnb-nav{top:calc(var(--header-h) + 46px)}
  .admin-bar .gnb.on .gnb-nav{top:calc(var(--header-h-on) + 46px)}
}

/* ---------- 5. 접근성 ----------
   Hello 의 "콘텐츠로 건너뛰기" 링크 : 평소엔 숨기고 키보드 포커스 때만 표시 */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal!important}
.screen-reader-text:focus{z-index:100000;left:5px;top:5px;display:block;width:auto;height:auto;padding:12px 24px;clip:auto!important;background:#eee;color:#333;font-size:1rem;line-height:normal}

/* ---------- 6. 서브 페이지 ----------
   LNB 는 스크롤 시 헤더 아래에 붙음 → 관리자 바만큼 더 내림
   서브 공통 하단 지도 : 시안은 이미지, 사이트는 메인과 같은 구글 지도(iframe)
   (690 이하는 LNB 가 2열 · 따라붙기 끔(sub.css) → 보정하면 relative 로 밀려 빈 칸이 생기므로 691 이상만) */
@media (min-width:691px){ .admin-bar .lnb{top:calc(var(--header-h-on) - 1px + 32px)} }
@media (min-width:691px) and (max-width:782px){ .admin-bar .lnb{top:calc(var(--header-h-on) - 1px + 46px)} }
.hs-raw .loc-map iframe{display:block;width:100%;aspect-ratio:650/637;border:0}
/* 섹션별 위젯으로 나누면서 <main> 대신 엘리멘터 본문 래퍼에 role=main (functions.php)
   → sub.css 의 main [id] 앵커 여백을 같은 대상에 */
.hs-sub [role="main"] [id]{scroll-margin-top:calc(var(--header-h-on) + 86px)}

/* ---------- 7. 엘리멘터 기본 요소로 만든 섹션 (.hs-el) ----------
   섹션 · 2단 · 그리드 = 컨테이너(우리 클래스) · 제목 = 제목 위젯 · 문단 = 텍스트 위젯 · 사진 = 이미지 위젯
   목록 · 버튼 · 슬라이드 · FAQ 등은 HTML 위젯. 기본 틀(display · 여백 0)은 style.css */
/* 제목 위젯 : 엘리멘터 기본(줄간격 1 · 글꼴)을 버리고 우리 클래스 값 그대로 (낮은 우선순위 → .vow-row h3 같은 우리 규칙이 이김) */
:where(.hs-el) .elementor-heading-title{font:inherit;letter-spacing:inherit;color:inherit;text-transform:inherit;margin:0;padding:0}
.hs-el .elementor-widget-image img{display:block}
/* 위젯 상자를 없애 안쪽 요소가 바로 배치되게 (HTML 위젯 · 줄 안 글자) */
.hs-c,.hs-c>.elementor-widget-container,.hs-contents,.hs-contents>.elementor-widget-container,.hs-flat>.elementor-widget-container{display:contents}
.hs-style{display:none}
/* 원래 줄 안 글자(span)였던 작은 제목(인사말 「이름에 담긴 뜻」) */
.hs-el .name-meaning>.k,.hs-el .name-meaning>.k>.elementor-widget-container{display:contents}
/* 엘리멘터 컨테이너의 ::before(배경 오버레이용 absolute)가 우리 장식선을 덮어쓰지 않게 */
.hs-el .heritage .sec-head::before,.hs-el.heritage .sec-head::before{position:static;inset:auto;mix-blend-mode:normal;opacity:1;border-radius:0}
/* 진료철학 기준 행 : 설명 위젯이 grid 칸에 오게 (원래 p 가 grid 칸이던 자리) */
@media (max-width:999px){ .hs-el .vow-row>.elementor-widget-text-editor{grid-column:2} }
@media (max-width:690px){ .hs-el .vow-row>.elementor-widget-text-editor{grid-column:auto} }
.greeting.hs-el .ph img{aspect-ratio:4/5;object-position:50% 6%}
/* 엘리멘터가 위젯 max-width 를 100% 로 강하게 고정(.elementor.elementor .e-con>.elementor-widget) → sync 가 우리 CSS 의 max-width 규칙을 각 파일 끝에 우선순위를 높여 한 번 더 써 둠 (「엘리멘터 max-width 보정」 블록) */
/* 사진 + 설명(이미지 위젯 캡션) : 엘리멘터 기본 figure · 캡션 꾸밈을 버리고 우리 figcaption 규칙 그대로 */
:where(.hs-el .elementor-widget-image .wp-caption){margin:0;max-width:none;width:auto}
:where(.hs-el .elementor-widget-image .widget-image-caption){display:block;margin:0;font:inherit;color:inherit;text-align:inherit;letter-spacing:inherit}   /* 우선순위 0 → .legacy-photo figcaption 같은 우리 규칙이 이김 */
.hs-el .elementor-widget-image .wp-caption img{display:block}
.hs-el .elementor-widget-image{text-align:inherit}   /* 엘리멘터 기본 가운데 정렬 대신 원래 흐름 */
/* 메인 상단 슬라이드 : 관리자 「메인 슬라이드」 [hs_hero_slides] — js/main.js 가 준비되기 전엔 첫 장 */
.hero-visual:not(.is-ready) .sl:first-child{opacity:1}
/* 바로 다음 형제(+) 규칙 : 문단이 각자 위젯 상자에 들어가 형제 관계가 상자끼리로 바뀜 → 상자 기준으로 다시 씀 (sync 의 margin 보정보다 높게) */
.elementor.elementor.elementor.elementor .hs-el .qa-main .elementor-widget:has(>.qa-answer)+.elementor-widget>p{margin-top:24px}
.elementor.elementor.elementor.elementor .hs-el .kit-card .kit-tag+.elementor-widget>p{margin-top:10px}
/* 제목 위젯 상자 안 줄바꿈이 ::before 장식선 뒤에 공백으로 끼는 것 막기 (슬림환 「진료 후 1:1 맞춤 구성」) */
.hs-el .kit-msg__foot.elementor-widget-heading{display:flex;align-items:center}
/* 치료후기 창(.rv-view)은 폭 100%+15px — 엘리멘터 위젯 max-width:100% 가 잘라서 카드가 5px 좁아짐 */
.elementor.elementor.elementor.elementor .hs-el .rv-view{max-width:none}