@charset "UTF-8";
/* =========================================================
   한신한의원 — 공통 스타일 (메인 · 서브페이지 공용)
   ---------------------------------------------------------
   1. 디자인 토큰        6. 목록 행 (line-list)
   2. 리셋 · 기본        7. 이미지 유틸 · 등장 효과
   3. 레이아웃 (wrap/sec) 8. 헤더 (GNB)
   4. 섹션 타이틀        9. 플로팅 퀵메뉴
   5. 버튼              10. 푸터
                        11. 반응형 (토큰 재정의 · 공통 컴포넌트)
   ---------------------------------------------------------
   사용 규칙
   · 섹션마다 다른 값은 새 클래스 대신 CSS 변수(--title-gap 등)를 섹션에서 덮어써서 조정
   · 반응형은 11번에서 토큰만 바꾸면 모든 섹션 타이틀 · 버튼 · 여백이 함께 줄어듦
   · 기준 해상도 1920px / 컨텐츠 1400px
   ========================================================= */

/* ---------- 1. 디자인 토큰 ---------- */
:root{
  /* 색 */
  --ink:#111110; --ink-2:#474440; --muted:#8C8A83; --gray:#999893;
  --line:#E3E2DE; --line-soft:#EDEDEB;
  --bg:#FFFFFF; --bg-2:#F7F7F5;
  --green:#253F36; --gold:#B08A3F; --accent:#8A7355; --yellow:#F2E9A6;
  --footer:#171614;
  /* 글꼴 */
  --sans:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --lat:'Inter','Pretendard',sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --kserif:'Noto Serif KR',serif;
  /* 레이아웃 */
  --container:1400px; --gutter:40px;
  --header-h:120px; --header-h-on:84px;
  /* 섹션 타이틀 */
  --eyebrow-size:14px; --eyebrow-ls:.3em;
  --title-size:68px; --title-lh:82px; --title-gap:29px;
  --lead-size:19px; --lead-lh:34px; --lead-gap:29px;
  /* 버튼 */
  --btn-h:58px; --btn-px:36px; --btn-fs:17px; --btn-radius:6px;
  /* 모션 */
  --ease:cubic-bezier(.2,.7,.3,1);
  /* PC 유동값 : 1000px 에서 최소값 → 1920px 에서 시안값 (그 이상은 고정) */
  --fl-75:clamp(20px,calc(20px + (100vw - 1000px) * 55 / 920),75px);
  --fl-76:clamp(20px,calc(20px + (100vw - 1000px) * 56 / 920),76px);
  --fl-logo:clamp(96px,calc(96px + (100vw - 1000px) * 22 / 920),118px);
  --fl-nav:clamp(24px,calc(24px + (100vw - 1000px) * 91 / 920),115px);
  --fl-menu-gap:clamp(14px,calc(14px + (100vw - 1000px) * 33 / 920),47px);
  --fl-menu-fs:clamp(15px,calc(15px + (100vw - 1000px) * 4 / 920),19px);
  --fl-util-gap:clamp(16px,calc(16px + (100vw - 1000px) * 25 / 920),41px);
  --fl-tel-fs:clamp(14px,calc(14px + (100vw - 1000px) * 3 / 920),17px);
}

/* ---------- 2. 리셋 · 기본 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-top:var(--header-h);background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;letter-spacing:-.02em;word-break:keep-all;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol,dl,dd,figure{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p{margin:0;font-weight:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. 레이아웃 ---------- */
.wrap{width:min(var(--container),100% - var(--gutter)*2);margin-inline:auto;position:relative}
.sec{position:relative;padding-top:var(--sec-pt,154px);padding-bottom:var(--sec-pb,149px)}
.sec--gray{background:var(--bg-2)}
.sec--dark{background:var(--green);color:#fff;--eyebrow-color:#8A9793;--lead-color:#B4BDBA}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--acts-gap,30px)}
.acts--center{justify-content:center}
.center{text-align:center}

/* ---------- 4. 섹션 타이틀 ----------
   <div class="sec-head [sec-head--center | sec-head--split]">
     <div class="sec-head__main">            ← split 일 때만 감싸기
       <span class="eyebrow">English</span>
       <h2 class="sec-title">가는 글씨 <b>굵은 글씨</b></h2>
       <p class="sec-lead">설명 문장</p>
     </div>
     <div class="sec-head__action">버튼</div>  ← split 일 때 오른쪽
   </div>                                                           */
.eyebrow{display:block;font-family:var(--serif);font-size:var(--eyebrow-size);line-height:var(--eyebrow-size);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--eyebrow-color,var(--gray))}
.eyebrow--line{display:flex;align-items:center;gap:14px}
.eyebrow--line::after{content:"";width:220px;height:1px;background:var(--line)}
.sec-title{margin-top:var(--title-gap);font-size:var(--title-size);line-height:var(--title-lh);font-weight:200;letter-spacing:-.052em;color:var(--title-color,inherit)}
.sec-title b{font-weight:600}
.sec-lead{margin-top:var(--lead-gap);font-size:var(--lead-size);line-height:var(--lead-lh);font-weight:var(--lead-weight,400);letter-spacing:-.023em;color:var(--lead-color,var(--ink-2))}
.sec-head--center{text-align:center}
.sec-head--split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px}
.sec-head__action{flex:none;margin-bottom:var(--action-mb,0)}
.sec-foot{margin-top:var(--foot-gap,54px)}

/* ---------- 5. 버튼 ----------
   .btn               검정 (앞에 가는 선)
   .btn--yellow       비대면 신청 노랑
   .btn--ghost        어두운 배경 위 흰 테두리
   .btn--outline      밝은 배경 위 회색 테두리
   .btn--icon         앞 선 대신 아이콘(svg)                          */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--btn-h);padding:0 var(--btn-px);border:1px solid transparent;border-radius:var(--btn-radius);background:var(--ink);color:#fff;font-size:var(--btn-fs);font-weight:600;line-height:1;letter-spacing:-.03em;white-space:nowrap;transition:.4s var(--ease)}
.btn::before{content:"";width:24px;height:1px;background:currentColor;opacity:.7}
.btn:hover{background:var(--accent)}
.btn--yellow{background:var(--yellow);color:#1A1A18}
.btn--yellow:hover{background:var(--accent);color:#fff}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--outline{background:transparent;border-color:#C9CBD1;color:#19283B;border-radius:8px}
.btn--outline:hover{background:var(--accent);border-color:var(--accent);color:#fff}   /* 기본 버튼(.btn) hover 와 같은 색 (10-01) */
.btn--icon::before{display:none}
.btn--icon svg{width:14px;height:14px}

/* ---------- 6. 목록 행 ----------
   <ul class="line-list"> <li class="line-row"> … </li> </ul>
   행 구성(열 너비)은 각 섹션에서 grid-template-columns 로 지정          */
.line-list{border-top:1px solid var(--list-top,var(--line))}
.line-row{position:relative;border-bottom:1px solid var(--line);transition:padding .45s var(--ease),background-color .45s var(--ease)}
.line-row:hover{padding-left:var(--row-shift,18px)}

/* ---------- 7. 이미지 유틸 · 등장 효과 ---------- */
.cover{width:100%;height:100%;object-fit:cover}
.zoom{overflow:hidden}
.zoom img{transition:transform 1.4s var(--ease)}
a:hover .zoom img,.zoom:hover img{transform:scale(1.04)}
/* JS 가 켜져 있을 때만 숨겼다가 화면에 들어오면 나타남 (?static=1 · 동작 줄이기 설정 시 바로 노출) */
html.js-anim .rv{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
html.js-anim .rv.in{opacity:1;transform:none}

/* ---------- 8. 헤더 ----------
   배경은 화면 전체, 안쪽 내용은 최대 1920px 가운데 정렬
   1000~1920px 사이에서는 간격 · 글자만 비례해서 줄어듦 (1920에서 시안값)            */
.gnb{position:fixed;left:0;right:0;top:0;z-index:100;height:var(--header-h);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:height .4s var(--ease)}
.gnb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:.6s var(--ease)}
.gnb.on{height:var(--header-h-on)}
.gnb.on::after{transform:scaleX(1)}
.gnb-in{display:flex;align-items:center;height:100%;max-width:1920px;margin:0 auto;padding:0 var(--fl-75) 0 var(--fl-76)}
.gnb-logo{flex:none}
.gnb-logo img{width:var(--fl-logo);height:auto;transition:width .4s var(--ease)}
.gnb.on .gnb-logo img{width:88px}
.gnb-nav{align-self:stretch;margin-left:var(--fl-nav)}
.gnb-menu{display:flex;gap:var(--fl-menu-gap);height:100%}
.gnb-menu > li{position:relative;display:flex;align-items:center}   /* 헤더 높이만큼 늘려서 아래 드롭다운까지 마우스가 끊기지 않게 */
.gnb-menu > li > a{display:block;position:relative;font-size:var(--fl-menu-fs);line-height:20px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.gnb-menu > li > a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:.45s var(--ease)}
.gnb-menu > li:hover > a::after,.gnb-menu > li:focus-within > a::after{transform:scaleX(1);transform-origin:left}
/* 2차 메뉴 (PC) : 메뉴에 마우스를 올리면 아래로 흰 상자 */
.gnb-sub{position:absolute;top:calc(50% + 26px);left:50%;z-index:2;min-width:180px;padding:12px 0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.gnb-menu > li:hover > .gnb-sub,.gnb-menu > li:focus-within > .gnb-sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.gnb-sub a{display:block;margin:0 8px;padding:9px 16px;border-radius:6px;font-size:15px;line-height:20px;font-weight:400;letter-spacing:-.02em;color:#555;white-space:nowrap;transition:.25s}
.gnb-sub a:hover{background:#F3F0EB;color:var(--ink)}   /* 드롭다운 · 메가 메뉴 소분류 공통 hover : 둥근 연한 배경 */
/* 진료안내 메가 메뉴 (PC) : 헤더 아래 전체 폭 · 중분류 7개 가로 · 각 아래 소분류 (메뉴 항목 CSS 클래스 mega) */
.gnb-sub3{margin:0;padding:0;list-style:none}
@media (min-width:1000px){
  .gnb-menu > li.mega{position:static}
  .gnb-menu > li.mega > .gnb-sub{top:100%;left:0;right:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 28px;min-width:0;padding:34px max(var(--fl-75),calc((100% - 1920px) / 2 + var(--fl-75))) 38px var(--mega-left);border-width:1px 0;border-radius:0;transform:translateY(8px)}
  .gnb-menu > li.mega:hover > .gnb-sub,.gnb-menu > li.mega:focus-within > .gnb-sub{transform:none}
  /* 첫 열을 첫 메뉴(한신소개) 왼쪽 선에 맞춤 : 헤더 안쪽 여백 + 로고 폭 + 로고~메뉴 간격 (1920 초과 시 가운데 정렬분 더함) */
  .gnb{--mega-left:calc(max(0px,(100% - 1920px) / 2) + var(--fl-76) + var(--fl-logo) + var(--fl-nav))}
  .gnb.on{--mega-left:calc(max(0px,(100% - 1920px) / 2) + var(--fl-76) + 88px + var(--fl-nav))}   /* 스크롤 시 로고 88px */
  .gnb-menu > li.mega > .gnb-sub > li > a{padding:0 0 12px;margin:0 0 8px;border-radius:0;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;color:var(--ink);white-space:normal}
  .gnb-menu > li.mega > .gnb-sub > li > a:hover{background:none;color:var(--accent)}   /* 중분류 제목은 글자색만 */
  .gnb-sub3 a{margin:0 -10px;padding:6px 10px;font-size:14.5px;color:#666;white-space:normal}   /* 배경이 생겨도 글자 시작선은 그대로 */
}
/* 현재 페이지 표시 (워드프레스 메뉴가 붙여 주는 클래스) */
.gnb-menu > li.current-menu-item > a::after,.gnb-menu > li.current-menu-ancestor > a::after{transform:scaleX(1)}
.gnb-sub .current-menu-item > a{color:var(--ink);font-weight:600}
.gnb-util{margin-left:auto;display:flex;align-items:center;gap:var(--fl-util-gap)}   /* 로고 · 메뉴와 같은 세로 중앙 */
.gnb-tel{font-family:var(--lat);font-size:var(--fl-tel-fs);font-weight:400;letter-spacing:.01em;white-space:nowrap}
.gnb-book{display:flex;align-items:center;justify-content:center;width:108px;height:46px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:500;white-space:nowrap;transition:.4s var(--ease)}
.gnb-book:hover{background:var(--accent)}
/* 헤더 로그인 · 회원가입 (10-20 · 워드프레스 [hs_member]) — 전화번호 앞 작은 글자 2개, 모바일은 메뉴를 열면 맨 아래 버튼 2개 */
.gnb-member{display:flex;align-items:center;gap:18px}
.gnb-member a{position:relative;font-size:13px;line-height:1;letter-spacing:-.02em;color:var(--ink-2);white-space:nowrap;transition:color .3s var(--ease)}
.gnb-member a + a::before{content:"";position:absolute;left:-9px;top:50%;width:1px;height:10px;margin-top:-5px;background:#CFCDC8}   /* 10-20 : 글자를 진하게 하면서 구분선도 한 단계 진하게 */
.gnb-member a:hover{color:var(--ink)}
.gnb-member--m{display:none}
.gnb-burger{display:none;position:relative;width:44px;height:44px;margin-left:8px}
.gnb-burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:.35s var(--ease)}
.gnb-burger i:nth-child(1){top:16px}.gnb-burger i:nth-child(2){top:27px}
.gnb.open .gnb-burger i:nth-child(1){top:21px;transform:rotate(45deg)}
.gnb.open .gnb-burger i:nth-child(2){top:21px;transform:rotate(-45deg)}

/* ---------- 9. 플로팅 퀵메뉴 ---------- */
.quick{position:fixed;right:max(clamp(10px,calc(10px + (100vw - 1000px) * 39 / 920),49px),calc((100vw - 1920px) / 2 + 49px));top:325px;z-index:90;width:70px;display:flex;flex-direction:column;align-items:center;gap:10px}
/* 슬림환 : 시안 원(90px) 그대로 — 버튼 열(70px) 중심에 맞춰 양옆으로 10px 넘침 */
.quick-slim{width:90px;height:90px;margin:0 -10px 2px;border-radius:50%;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.quick-slim img{width:100%;height:100%;transition:transform .6s var(--ease)}
.quick-slim:hover img{transform:scale(1.06)}
.quick-btn{width:58px;height:58px;border-radius:50%;background:#121110;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:0 6px 14px rgba(0,0,0,.18);transition:.4s var(--ease)}
.quick-btn svg{width:18px;height:18px}
.quick-btn span{font-size:11px;line-height:1;font-weight:600;letter-spacing:-.02em}
.quick-btn:hover{background:var(--accent);color:#fff}
.quick-btn--kakao{background:#FAE100;color:#1A1A1A}
.quick-btn--top{background:#fff;color:#555;border:1px solid #E6E3DC;font-family:var(--lat);font-size:11px;letter-spacing:.12em;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.quick-btn--kakao:hover,.quick-btn--top:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- 10. 푸터 ---------- */
.footer{padding-bottom:58px;background:var(--footer);color:#fff}
.f-top{display:flex;align-items:center;gap:28px;height:101px;padding-top:51px;border-bottom:1px solid #3A3936}
.f-logo{width:151px;height:48px;margin-left:-4px}
.f-slogan{font-family:var(--kserif);font-size:14px;letter-spacing:.04em;color:#C6C5C4}
.f-up{margin-left:auto;margin-right:5px;font-size:11.5px;color:#C9C8C6;transition:.3s}
.f-mid{display:flex;align-items:center;flex-wrap:wrap;min-height:66px;font-size:14.3px;color:#EDEDED}
.f-info{display:flex;flex-wrap:wrap;column-gap:33px}
.f-links{margin-left:auto;margin-right:1px;display:flex;gap:21px}
.f-links a{transition:.3s}
.f-links a:first-child{color:#F5C518}
.f-links a:hover,.f-up:hover{color:#fff}
.f-copy{padding-top:29px;font-family:var(--lat);font-size:12px;line-height:20px;letter-spacing:.02em;color:#AEAEAE}

/* ---------- 11. 반응형 ----------
   max-width 999 · 690 · 480 · 370 (회사 표준)
   · 1000~1920px : PC 레이아웃 유지 (헤더 간격 · 그리드만 유동)
   · 1920px 초과 : 컨텐츠 폭은 그대로, 배경만 꽉 채움
   · 999 이하    : 타이틀 그룹 · 버튼 · 문단은 가운데 정렬 (목록 행 · 카드 안쪽은 왼쪽 유지)
   · 690 이하    : 섹션 상하 50px · 타이틀 그룹 → 컨텐츠 30px · 컨텐츠 → 버튼 30px
   · 공통 간격 토큰
       --sec-pt / --sec-pb : 섹션 상하 여백 (섹션이 아닌 .anywhere 여백도 이 값을 씀)
       --head-gap          : 타이틀 그룹 → 첫 컨텐츠
       --foot-gap          : 컨텐츠 → 하단 버튼
       --item-gap          : 카드 · 목록 사이
   ※ 999 이하 값은 모바일 시안 확정 전 기본값                                              */
@media (max-width:999px){
  :root{--qbar-h:58px;--gutter:30px;--header-h:72px;--header-h-on:64px;--eyebrow-size:12px;--title-size:44px;--title-lh:56px;--title-gap:18px;--lead-size:17px;--lead-lh:30px;--lead-gap:18px;--btn-h:52px;--btn-px:28px;--btn-fs:15px;
         --head-gap:40px;--foot-gap:40px;--item-gap:20px;--sec-pt:90px;--sec-pb:90px}
  /* 가운데 정렬 */
  .sec-head,.sec-foot{text-align:center}
  .sec-head--split{flex-direction:column;align-items:center;gap:20px}
  .sec-head__action{margin-bottom:0}
  .eyebrow--line{justify-content:center}
  .eyebrow--line::after{display:none}
  .acts{justify-content:center}
  /* 헤더 */
  .gnb-in{padding:0 20px 0 var(--gutter)}
  .gnb-logo img,.gnb.on .gnb-logo img{width:72px}
  .gnb-tel{display:none}
  .gnb-util{align-self:center;margin-top:0!important;gap:0}
  .gnb-book{width:auto;height:38px;padding:0 14px}
  .gnb-burger{display:block}
  /* 헤더 로그인 · 회원가입 : 헤더 줄에서는 숨기고 열린 메뉴 맨 아래 버튼으로 (10-20) */
  .gnb-util .gnb-member{display:none}
  .gnb-member--m{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}
  .gnb-member--m a{display:flex;align-items:center;justify-content:center;height:46px;border:1px solid var(--line);border-radius:8px;font-size:14.5px;color:var(--ink)}
  .gnb-member--m a + a::before{display:none}
  .gnb-member--m .gnb-member__join,.gnb-member--m .gnb-member__mypage{border-color:var(--ink);background:var(--ink);color:#fff}
  .gnb-nav{position:fixed;left:0;right:0;top:var(--header-h);margin:0;padding:8px var(--gutter) 24px;background:#fff;border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.35s var(--ease)}
  .gnb.on .gnb-nav{top:var(--header-h-on)}
  .gnb.open .gnb-nav{opacity:1;visibility:visible;transform:none}
  .gnb-nav{max-height:calc(100vh - var(--header-h));overflow-y:auto}
  .gnb-menu{flex-direction:column;gap:0;height:auto}
  .gnb-menu > li{display:block}
  .gnb-menu > li > a{padding:16px 0;font-size:17px;border-bottom:1px solid var(--line-soft)}
  .gnb-menu > li > a::after{display:none}
  /* 2차 메뉴 (모바일) : 누르면 펼쳐짐 (+ / −) */
  .gnb-menu > li.has-sub > a{display:flex;justify-content:space-between;align-items:center}
  .gnb-menu > li.has-sub > a::before{content:"+";order:2;font-size:20px;font-weight:300;line-height:1;color:var(--gray);transition:transform .3s var(--ease)}
  .gnb-menu > li.has-sub.open > a::before{transform:rotate(45deg)}
  .gnb-sub,.gnb-menu > li:hover > .gnb-sub,.gnb-menu > li:focus-within > .gnb-sub{position:static;display:none;min-width:0;padding:6px 0 10px;border:0;border-radius:0;box-shadow:none;background:var(--bg-2);opacity:1;visibility:visible;transform:none}
  .gnb-menu > li.open > .gnb-sub{display:block}
  .gnb-sub a{margin:0;padding:11px 16px;border-radius:0;font-size:15px}
  .gnb-sub3{display:flex;flex-wrap:wrap;padding:0 16px 8px;margin-top:-4px}
  .gnb-sub3 a{padding:3px 12px 3px 0;font-size:13.5px;color:var(--gray)}
  .line-row:hover{padding-left:0}
  /* 퀵메뉴 : 한신슬림환은 왼쪽 아래 떠 있는 동그라미 · 전화 · 카톡 · 톡톡 · 예약은 하단 한 줄 바 (TOP 은 푸터 「맨 위로」로 대신) */
  body{padding-bottom:calc(var(--qbar-h) + env(safe-area-inset-bottom))}   /* 하단 바에 푸터가 가리지 않게 */
  .quick{left:0;right:0;top:auto;bottom:0;width:auto;flex-direction:row;gap:0;padding-bottom:env(safe-area-inset-bottom);background:#121110}
  .quick-btn{flex:1;width:auto;height:var(--qbar-h);border-radius:0;box-shadow:none;gap:4px}
  .quick-btn + .quick-btn{border-left:1px solid rgba(255,255,255,.12)}
  .quick-btn--kakao{border-left:0!important}
  .quick-btn--kakao + .quick-btn{border-left:0}
  .quick-btn--top{display:none}
  .quick-slim{position:fixed;left:16px;bottom:calc(var(--qbar-h) + 16px + env(safe-area-inset-bottom));width:74px;height:74px;margin:0;box-shadow:0 6px 18px rgba(0,0,0,.16);animation:quick-float 3.2s ease-in-out infinite}
  /* 푸터 : 가운데 정렬 · 「맨 위로」는 카피라이트 바로 위로 (f-top 안의 요소를 순서만 바꿔 배치) */
  .footer{padding-bottom:100px;text-align:center}   /* 맨 아래에서 떠 있는 슬림환 동그라미가 카피라이트를 가리지 않게 */
  .footer .wrap{display:flex;flex-direction:column;align-items:center}
  .f-top{display:contents}
  .f-logo{order:1;margin:44px 0 0}
  .f-slogan{order:2;width:100%;margin-top:12px;padding-bottom:24px;border-bottom:1px solid #3A3936}
  .f-mid{order:3;width:100%;flex-direction:column;justify-content:center;padding:20px 0;gap:10px}
  .f-up{order:4;margin:4px 0 0}
  .f-copy{order:5;padding-top:14px}
  .f-info{justify-content:center;column-gap:20px}
  .f-links{margin:0;justify-content:center}
}
@keyframes quick-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:999px) and (prefers-reduced-motion:reduce){ .quick-slim{animation:none} }
@media (max-width:690px){
  /* 모바일 : 좌우 여백 넉넉히 · 설명 줄간격 좁게 · 버튼 약 70% 크기 · 버튼 2개 간격 축소 */
  :root{--gutter:24px;--title-size:32px;--title-lh:42px;--title-gap:12px;--lead-size:15.5px;--lead-lh:23px;--lead-gap:10px;--eyebrow-ls:.24em;--btn-h:36px;--btn-px:18px;--btn-fs:13px;--acts-gap:8px;
         --head-gap:30px;--foot-gap:30px;--item-gap:14px;--sec-pt:50px;--sec-pb:50px;--qbar-h:54px}
  .btn{gap:8px;border-radius:5px}
  .btn::before{width:14px}
  .btn--icon svg{width:12px;height:12px}
  .acts{flex-direction:column}
  .acts .btn{width:196px}   /* 버튼 2개일 때 같은 크기 */
  .f-info{flex-direction:column;row-gap:2px}
  .f-logo{margin-top:36px}
  .f-slogan{padding-bottom:20px}
  .quick-slim{width:68px;height:68px;left:14px}
}
@media (max-width:480px){
  :root{--gutter:22px;--header-h:64px;--header-h-on:58px;--title-size:27px;--title-lh:37px;--lead-size:15px;--lead-lh:22.5px;--btn-h:34px;--btn-fs:12.5px;--item-gap:12px}
  .gnb-book{display:none}
  .gnb-logo img,.gnb.on .gnb-logo img{width:64px}
}
@media (max-width:370px){
  :root{--gutter:20px;--title-size:24px;--title-lh:33px;--eyebrow-size:11px;--lead-size:14px;--lead-lh:21px;--head-gap:26px;--foot-gap:26px}
}

/* 요일 색 : 토요일 파랑 · 일요일 빨강 (진료시간 표기 · 10-01) */
.day-sat{color:#2D62C4}
.day-sun{color:#D2423B}

/* ===== 엘리멘터 max-width · margin · flex 보정 (tools/sync_theme.py 자동 생성 · 직접 고치지 말 것) ===== */
.elementor.elementor.elementor.elementor body{margin:0}
.elementor.elementor.elementor.elementor img{max-width:100%}
.elementor.elementor.elementor.elementor ul,.elementor.elementor.elementor.elementor ol,.elementor.elementor.elementor.elementor dl,.elementor.elementor.elementor.elementor dd,.elementor.elementor.elementor.elementor figure{margin:0}
.elementor.elementor.elementor.elementor h1,.elementor.elementor.elementor.elementor h2,.elementor.elementor.elementor.elementor h3,.elementor.elementor.elementor.elementor h4,.elementor.elementor.elementor.elementor h5,.elementor.elementor.elementor.elementor p{margin:0}
.elementor.elementor.elementor.elementor .wrap{margin-inline:auto}
.elementor.elementor.elementor.elementor .acts{flex-wrap:wrap;align-items:center}
.elementor.elementor.elementor.elementor .acts--center{justify-content:center}
.elementor.elementor.elementor.elementor .eyebrow--line{align-items:center}
.elementor.elementor.elementor.elementor .sec-title{margin-top:var(--title-gap)}
.elementor.elementor.elementor.elementor .sec-lead{margin-top:var(--lead-gap)}
.elementor.elementor.elementor.elementor .sec-head--split{flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.elementor.elementor.elementor.elementor .sec-head__action{flex:none;margin-bottom:var(--action-mb,0)}
.elementor.elementor.elementor.elementor .sec-foot{margin-top:var(--foot-gap,54px)}
.elementor.elementor.elementor.elementor .btn{align-items:center;justify-content:center}
.elementor.elementor.elementor.elementor .gnb-in{align-items:center;max-width:1920px;margin:0 auto}
.elementor.elementor.elementor.elementor .gnb-logo{flex:none}
.elementor.elementor.elementor.elementor .gnb-nav{margin-left:var(--fl-nav)}
.elementor.elementor.elementor.elementor .gnb-menu > li{align-items:center}
.elementor.elementor.elementor.elementor .gnb-sub a{margin:0 8px}
.elementor.elementor.elementor.elementor .gnb-sub3{margin:0}
@media (min-width:1000px){.elementor.elementor.elementor.elementor .gnb-menu > li.mega > .gnb-sub > li > a{margin:0 0 8px}}
@media (min-width:1000px){.elementor.elementor.elementor.elementor .gnb-sub3 a{margin:0 -10px}}
.elementor.elementor.elementor.elementor .gnb-util{margin-left:auto;align-items:center}
.elementor.elementor.elementor.elementor .gnb-book{align-items:center;justify-content:center}
.elementor.elementor.elementor.elementor .gnb-member{align-items:center}
.elementor.elementor.elementor.elementor .gnb-member a + a::before{margin-top:-5px}
.elementor.elementor.elementor.elementor .gnb-burger{margin-left:8px}
.elementor.elementor.elementor.elementor .quick{flex-direction:column;align-items:center}
.elementor.elementor.elementor.elementor .quick-slim{margin:0 -10px 2px}
.elementor.elementor.elementor.elementor .quick-btn{flex-direction:column;align-items:center;justify-content:center}
.elementor.elementor.elementor.elementor .f-top{align-items:center}
.elementor.elementor.elementor.elementor .f-logo{margin-left:-4px}
.elementor.elementor.elementor.elementor .f-up{margin-left:auto;margin-right:5px}
.elementor.elementor.elementor.elementor .f-mid{align-items:center;flex-wrap:wrap}
.elementor.elementor.elementor.elementor .f-info{flex-wrap:wrap}
.elementor.elementor.elementor.elementor .f-links{margin-left:auto;margin-right:1px}
@media (max-width:999px){.elementor.elementor.elementor.elementor .sec-head--split{flex-direction:column;align-items:center}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .sec-head__action{margin-bottom:0}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .eyebrow--line{justify-content:center}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .acts{justify-content:center}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .gnb-util{margin-top:0!important}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .gnb-member--m{margin-top:20px}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .gnb-member--m a{align-items:center;justify-content:center}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .gnb-nav{margin:0}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .gnb-menu{flex-direction:column}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .gnb-menu > li.has-sub > a{justify-content:space-between;align-items:center}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .gnb-sub a{margin:0}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .gnb-sub3{flex-wrap:wrap;margin-top:-4px}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .quick{flex-direction:row}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .quick-btn{flex:1}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .quick-slim{margin:0}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .footer .wrap{flex-direction:column;align-items:center}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .f-logo{margin:44px 0 0}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .f-slogan{margin-top:12px}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .f-mid{flex-direction:column;justify-content:center}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .f-up{margin:4px 0 0}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .f-info{justify-content:center}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .f-links{margin:0;justify-content:center}}
@media (max-width:690px){.elementor.elementor.elementor.elementor .acts{flex-direction:column}}
@media (max-width:690px){.elementor.elementor.elementor.elementor .f-info{flex-direction:column}}
@media (max-width:690px){.elementor.elementor.elementor.elementor .f-logo{margin-top:36px}}