/* =========================================================
   진료시간 및 오시는 길 (/hours-location)  — Figma 1090:21567 (PC 1920)
   ========================================================= */

.hours-location-page{
    font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
    color:#1c1917;
    background:#fff;
}
/* 테마 래퍼 #s007{overflow:hidden}이 position:sticky(탭바)를 무력화함.
   가로는 clip(가로스크롤 차단 유지)·세로는 visible로 교체해 sticky 복원. (doctors.css와 동일) */
#s007{ overflow-x:clip; overflow-y:visible; }

/* 브레드크럼(테마 #site_config) 폭을 본문과 동일 1440으로 통일.
   common.css의 body:has(.basePage) #site_config .site{max-width:1370px}를 2-id specificity로 덮음 */
#hoursLocationPage #site_config .site{ max-width:1440px; }
.hours-location-page [class^="hl-"],
.hours-location-page [class*=" hl-"]{ box-sizing:border-box; }
/* 리셋: :where()로 0-specificity 부여 → 아래 .hl-* 컴포넌트 규칙(margin/padding)이 이기도록.
   (그냥 .hours-location-page p 로 하면 0,1,1 specificity가 .hl-intro__title(0,1,0)을 덮어 margin이 죽음) */
.hours-location-page :where(p, h2, h3, ul, li){ margin:0; padding:0; list-style:none; }
.hours-location-page a:link,
.hours-location-page a:visited{ text-decoration:none; }

/* 공통 컨테이너 (Figma 좌우 240 거터 → 1440 콘텐츠) */
.hl-wrap{ width:1440px; max-width:calc(100% - 80px); margin:0 auto; }
.hl-section{ padding:80px 0; } /* Figma: 대부분 섹션 상·하 80 (주소만 하단 130 오버라이드) */

/* 공통 섹션 헤딩 (보라 바 + 40px 라벨) */
.hl-heading{ display:flex; align-items:center; gap:10px; }
.hl-heading__bar{ flex:0 0 3px; width:3px; height:28px; background:#5e2c7b; }
.hl-heading__label{ font-size:40px; font-weight:700; line-height:1.3; letter-spacing:-1.5px; color:#5e2c7b; }

/* =================== Hero (500px 배너) =================== */
.hl-hero{
    position:relative; height:500px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    padding:60px; background:#dddddd;
}
.hl-hero::before{ content:""; position:absolute; inset:0; background:var(--hl-hero-bg) center center / cover no-repeat; }
.hl-hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); }
.hl-hero__inner{
    position:relative; z-index:1; width:1440px; max-width:calc(100% - 80px);
    display:flex; flex-direction:column; align-items:center; gap:20px;
    text-align:center; color:#fff;
}
.hl-hero__eyebrow{ color:#fff; font-size:22px; font-weight:500; letter-spacing:2.2px; text-transform:uppercase; opacity:.8; }
.hl-hero__title{ font-size:64px; font-weight:800; line-height:1.3; letter-spacing:-1.92px; color:#fff; }

/* 한국어 제목은 공백 단위로만 줄바꿈(음절 중간 끊김 방지) — 좁은 폭(태블릿/모바일)에서 Figma와 동일한 단어 줄바꿈.
   PC에서는 한 줄에 들어가므로 영향 없음. */
.hl-hero__title,
.hl-intro__title,
.hl-where__title,
.hl-faq__title,
.hl-promo__title{ word-break:keep-all; }

/* ── 줄바꿈 <br> 가시성 분기 (PC≥1200 / 태블릿 768~1199 / 모바일 ≤767) ──
   규칙: 공백은 항상 <br> "앞"에 둘 것 — br이 숨겨질 때 양옆 단어가 붙지 않도록(공백 유실 방지). */
.hl-br-pc{ display:inline; }   /* PC 전용         : ≤1199(태블릿+모바일) 숨김 */
.hl-br-d { display:inline; }   /* PC+태블릿       : ≤767(모바일) 숨김 */
.hl-br-to{ display:none; }     /* 태블릿 전용     : 768~1199에서만 표시 */
.hl-br-t { display:none; }     /* 태블릿+모바일   : ≤1199에서 표시 */
.hl-br-m { display:none; }     /* 모바일 전용     : ≤767에서만 표시 */

/* =================== Intro =================== */
.hl-intro{ padding:80px 0 130px; text-align:center; }
.hl-intro__eyebrow{ padding-top:20px; font-size:24px; font-weight:700; line-height:30px; letter-spacing:-.72px; color:#292524; }
.hl-intro__title{ margin-top:30px; font-size:56px; font-weight:700; line-height:1.3; letter-spacing:-1.68px; color:#1c1917; } /* Figma heading3 = Bold 700 */
.hl-intro__desc{ margin-top:15px; font-size:26px; font-weight:500; line-height:36px; letter-spacing:-.78px; color:#57534e; }

/* =================== 섹션 탭 네비게이션 (단일 sticky) =================== */
.hl-nav-bar{
    position:sticky; top:0; z-index:50;
    background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.hl-nav{
    width:1440px; max-width:calc(100% - 80px); margin:0 auto;
}
.hl-nav__row{ display:flex; }
.hl-nav__row .hl-nav__tab{ flex:1 1 0; min-width:0; }
.hl-nav__tab{
    display:flex; align-items:center; justify-content:center;
    min-height:66px; padding:16px 32px;
    font-size:24px; font-weight:500; line-height:34px; letter-spacing:-1.2px;
    text-align:center; white-space:nowrap;
    background:#fff; border:1px solid #e8ebeb;
    margin-right:-1px; margin-bottom:-1px;
    transition:background-color .15s, color .15s;
}
.hl-nav__tab:link,.hl-nav__tab:visited{ color:#78716c; }
.hl-nav__tab:hover{ background:#faf7fb; }
.hl-nav__tab.is-active{ position:relative; z-index:1; background:#5e2c7b; border-color:#5e2c7b; }
.hl-nav__tab.is-active:link,.hl-nav__tab.is-active:visited{ color:#fff; }

/* =================== 진료시간 (평일 / 주말·공휴일 / 명절 3열) =================== */
.hl-times__grid{ display:flex; gap:20px; align-items:flex-start; }
.hl-times__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px; }
.hl-times__body{ display:flex; flex-direction:column; gap:10px; }
.hl-times__body .hl-bullets{ gap:10px; }
.hl-times__big{ font-size:56px; font-weight:700; line-height:1.3; letter-spacing:-2.8px; color:#1c1917; white-space:nowrap; } /* Figma label/41 = Bold 700 */

/* =================== 문의전화 · 예약 =================== */
.hl-contact__head{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.hl-contact__phone{ display:flex; align-items:center; gap:13px; }
.hl-contact__phone-ic{ width:30px; height:30px; flex-shrink:0; }
.hl-contact__num{ font-size:56px; font-weight:700; line-height:1.3; letter-spacing:-2.8px; color:#1c1917; } /* Bold 700 */

/* outline 버튼 행 (문의전화·길찾기 공용) */
.hl-btnrow{ display:flex; gap:20px; width:100%; margin-top:40px; }
.hl-obtn{
    flex:1 1 0; min-width:0;
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:20px 52px 20px 32px;
    border:1.538px solid #1c1917; border-radius:12px;
    transition:background-color .15s;
}
.hl-obtn__ic{ width:44px; height:44px; flex-shrink:0; border-radius:12px; object-fit:cover; }
.hl-obtn__label{ font-size:28px; font-weight:700; letter-spacing:-1.4px; white-space:nowrap; }
.hl-obtn:link .hl-obtn__label,.hl-obtn:visited .hl-obtn__label{ color:#1c1917; }
/* Figma: hover 시 버튼 다크 배경 + 흰 글자 */
.hl-obtn:hover{ background:#1c1917; border-color:#1c1917; }
.hl-obtn:hover .hl-obtn__label{ color:#fff; }

/* =================== 프로모 카드 (평일 야간=야경 / 주말 공휴일=밝은 회색) ===================
   카드는 풀폭. 텍스트는 좌측 240거터에 맞추고(=본문 정렬), 이미지는 우측 뷰포트 끝까지 블리드 */
.hl-promo{ position:relative; overflow:hidden; }
.hl-promo--soft{ background:#f9f9f9; }
.hl-promo--night{ background:#1c1917; }
.hl-promo--night::before{ content:""; position:absolute; inset:0; background:var(--hl-promo-bg) center center / cover no-repeat; }
.hl-promo--night::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); }
.hl-promo__inner{
    position:relative; z-index:1;
    display:flex; align-items:stretch;
    padding-left:max(15px, calc((100% - 1440px) / 2));
}
.hl-promo__text{
    width:853px; height:424px; flex-shrink:0;
    padding:60px 60px 40px 0;
    display:flex; flex-direction:column; justify-content:space-between;
}
.hl-promo__title{ font-size:56px; font-weight:800; line-height:1.3; letter-spacing:-2.8px; }
.hl-promo__desc{ margin-top:20px; font-size:28px; font-weight:500; line-height:1.4; letter-spacing:-1.4px; }
.hl-promo__info{ display:flex; flex-direction:column; gap:10px; }
.hl-promo__info li{ display:flex; gap:12px; align-items:baseline; font-size:28px; font-weight:500; line-height:1.3; letter-spacing:-1.4px; }
.hl-promo__k{ flex-shrink:0; white-space:nowrap; }
.hl-promo__img{ position:relative; flex:1 1 0; min-width:0; height:424px; }
.hl-promo__img picture{ display:block; width:100%; height:100%; }
.hl-promo__img img{ display:block; width:100%; height:100%; object-fit:cover; }
/* 이미지 좌상단 pill (Figma 태블릿 Frame226). PC는 이미지에 baked되어 있어 숨김(아래 ≤1199에서만 표시) */
.hl-promo__pill{
    display:none;
    position:absolute; top:16px; left:16px; z-index:2;
    padding:13px 22px; border-radius:100px;
    background:#5e2c7b; color:#fff;
    font-size:17px; font-weight:700; line-height:1; letter-spacing:-.51px; white-space:nowrap;
}
/* 주말(밝은 회색): 보라 제목 */
.hl-promo--soft .hl-promo__title{ color:#5e2c7b; }
.hl-promo--soft .hl-promo__desc{ color:#57534e; }
.hl-promo--soft .hl-promo__info li{ color:#1c1917; }
/* 평일 야간(야경): 흰 글자 */
.hl-promo--night .hl-promo__title{ color:#fff; }
.hl-promo--night .hl-promo__desc{ color:#f5f5f4; }
.hl-promo--night .hl-promo__info li{ color:#fff; }

/* =================== 주소 (주소 / 방문 편의 안내 2열 + 지도) =================== */
.hl-address{ padding-bottom:130px; } /* Figma: 주소 섹션만 하단 130 */
.hl-address .hl-wrap{ display:flex; flex-direction:column; gap:80px; }
.hl-address__cols{ display:flex; gap:20px; align-items:flex-start; }
.hl-address__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px; }
.hl-address__body{ display:flex; flex-direction:column; gap:10px; }
.hl-address__body .hl-bullets{ gap:10px; }
.hl-address__title{ font-size:56px; font-weight:700; line-height:1.3; letter-spacing:-2.8px; color:#1c1917; } /* Bold 700 */
.hl-address__mapblock{ display:flex; flex-direction:column; gap:40px; }
.hl-address__mapblock .hl-btnrow{ margin-top:0; }
.hl-map{ width:100%; height:600px; overflow:hidden; background:#eee; }
.hl-map .root_daum_roughmap{ width:100% !important; }
.hl-map .root_daum_roughmap .wrap_map{ height:600px !important; }
.hl-map .root_daum_roughmap *{ box-sizing:content-box; }

/* =================== 어디에 있나요 =================== */
.hl-where__title{ font-size:56px; font-weight:800; line-height:1.3; letter-spacing:-1.68px; color:#292524; }
.hl-where__desc{ margin-top:20px; font-size:26px; font-weight:500; line-height:36px; letter-spacing:-.78px; color:#78716c; }

/* =================== 도보 / 주차 (info) =================== */
.hl-info__block{ margin-top:20px; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.hl-info .hl-bullets{ margin-top:20px; }
.hl-info__block .hl-bullets{ margin-top:0; }

/* 라벨 pill */
.hl-pill{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 22px; border-radius:100px;
    background:#5e2c7b; color:#fff;
    font-size:17px; font-weight:700; letter-spacing:-.51px;
}

/* 불릿 목록 (회색 점 + 24px). 라벨:값(kv) 행은 __k + __v */
.hl-bullets{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; width:100%; }
.hl-bul{ display:flex; gap:10px; align-items:flex-start; width:100%; }
.hl-bul__mk{ position:relative; flex:0 0 4px; width:4px; align-self:stretch; min-height:34px; }
.hl-bul__mk::before{ content:""; position:absolute; left:0; top:17px; width:4px; height:4px; border-radius:50%; background:#57534e; transform:translateY(-50%); }
.hl-bul__tx{ font-size:24px; font-weight:500; line-height:34px; letter-spacing:-1.2px; color:#44403c; }
.hl-bul__k{ flex-shrink:0; white-space:nowrap; font-size:24px; font-weight:500; line-height:34px; letter-spacing:-1.2px; color:#44403c; }
.hl-bul__v{ flex:1 1 0; min-width:0; font-size:24px; font-weight:500; line-height:34px; letter-spacing:-1.2px; color:#44403c; }

/* =================== 대중교통 =================== */
.hl-transit__group{ margin-top:20px; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.hl-transit__cols{ margin-top:20px; display:flex; gap:20px; align-items:flex-start; }
.hl-transit__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px; }
.hl-line{ display:flex; align-items:center; gap:10px; }
.hl-line__badge{
    flex:0 0 60px; width:60px; height:60px; border-radius:1000px;
    background:var(--c,#5e2c7b); color:#fff;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-size:21px; font-weight:700; line-height:1; letter-spacing:-1.05px;
}
.hl-line__badge--1{ font-size:21px; }
.hl-line__name{ font-size:28px; font-weight:700; letter-spacing:-1.4px; color:#000; opacity:.8; }

/* =================== Q&A =================== */
.hl-faq{ background:#fff; padding:130px 0; }
.hl-faq__container{ width:1440px; max-width:calc(100% - 80px); margin:0 auto; padding:0; }
.hl-faq__head{ text-align:center; }
.hl-faq__eyebrow{ font-size:24px; font-weight:700; line-height:30px; letter-spacing:-.72px; color:#a8599e; } /* Figma title_center eyebrow = point2 #a8599e (진보라 아님) */
.hl-faq__title{ margin-top:30px; font-size:56px; font-weight:800; line-height:1.3; letter-spacing:-2.8px; color:#292524; }
.hl-faq__list{ margin-top:60px; display:flex; flex-direction:column; gap:20px; }
.hl-qna{ width:100%; overflow:hidden; }
.hl-qna__q{
    display:flex; gap:10px; align-items:center;
    padding:15px 25px;
    background:rgba(94,44,123,.07); border-top:2px solid #5e2c7b;
}
.hl-qna__mark{ flex:0 0 24px; width:24px; font-size:21px; font-weight:700; line-height:31px; letter-spacing:-1.05px; color:#5e2c7b; }
.hl-qna__text{ font-size:21px; font-weight:700; line-height:31px; letter-spacing:-1.05px; color:#5e2c7b; }
.hl-qna__a{ display:flex; gap:10px; align-items:flex-start; padding:25px; background:rgba(247,247,247,.5); }
.hl-qna__ic{ flex:0 0 24px; width:24px; height:24px; margin-top:2px; }
.hl-qna__atext{ font-size:17px; font-weight:400; line-height:1.6; letter-spacing:-.51px; color:rgba(0,0,0,.7); }

/* =========================================================
   반응형 — 태블릿(≤1199, Figma 883:30351 768px 1:1) / 모바일(≤600 최소 안전)
   PC 진료시간 3열(56px nowrap 큰시간)이 ~1110px 미만에서 클리핑되므로 1199를 태블릿 경계로 둠.
   히어로는 PC와 동일(64/22/p60) — 768에서 제목이 자동 3줄 줄바꿈되어 Figma와 일치(변경 없음).
   ========================================================= */
@media (max-width:1199px){
    /* ── 히어로: 배경 이미지를 좌측 정렬(Figma 태블릿 Hero_Banner_tablet은 좌측 크롭). 동일 장면·비율이라 position만 보정 ── */
    .hl-hero::before{ background-position:left center; }

    /* ── 브레드크럼(테마 공통 #site_config) — doctors/doctor-detail 페이지와 100% 동일 처리.
       common.css가 ≤768px에서 .home을 12px·체브론을 10px로 줄이므로 2-id specificity로 17px/22px 복원 ── */
    #hoursLocationPage #site_config .site .home { font-size: 17px; }
    #hoursLocationPage #site_config .site .home.home2:after,
    #hoursLocationPage #site_config .site .home.home3:after { right: 20px; width: 22px; background-size: auto; }
    #hoursLocationPage #site_config .site .home > ul li a { font-size: 17px; padding: 12px 20px; }
    #hoursLocationPage #site_config .site .home > ul { min-width: 260px; }
    #hoursLocationPage #site_config .site .home.act { position: relative; z-index: 30; }
    #hoursLocationPage #site_config .site .home.act > ul.toggle_menu { z-index: 30; }

    /* ── 태블릿 전용 줄바꿈(<br class="hl-br-t">) 활성화 / PC 전용 줄바꿈(<br class="hl-br-pc">)은 숨김 ── */
    .hl-br-t{ display:inline; }
    .hl-br-pc{ display:none; }

    /* ── 프로모 이미지 좌상단 pill 표시(태블릿) ── */
    .hl-promo__pill{ display:inline-flex; align-items:center; justify-content:center; }

    /* ── 공통 타이포 스케일 (Figma 768 토큰) ── */
    .hl-heading__label{ font-size:30px; letter-spacing:-.45px; }                  /* 40→30 */
    .hl-times__big,
    .hl-contact__num,
    .hl-address__title{ font-size:41px; letter-spacing:-2.05px; }                 /* 56→41 */
    .hl-bul__tx,.hl-bul__k,.hl-bul__v{ font-size:17px; line-height:1.5; letter-spacing:-.68px; }  /* 24→17 */
    .hl-bul__mk{ min-height:26px; }
    .hl-bul__mk::before{ top:13px; }

    .hl-section{ padding:60px 0; }                                                /* 80→60 */

    /* ── 인트로 (중앙) ── */
    .hl-intro{ padding:40px 0 80px; }                                             /* 80/130→40/80 */
    .hl-intro__title{ font-size:40px; letter-spacing:-1.5px; }                    /* 56→40 (eyebrow 24 유지) */
    .hl-intro__desc{ font-size:24px; letter-spacing:-1.2px; }                     /* 26→24 */

    /* ── 섹션 탭 네비 (3+4 유지, 폰트 축소) ──
       Figma 토큰은 24px이나 768에서 172px 탭에 물리적으로 안 들어가 스크린샷 기준 18px로 둠 */
    .hl-nav__tab{ font-size:18px; padding:14px 6px; letter-spacing:-.9px; }       /* 24→18 */

    /* ── 진료시간 → 단일 컬럼 스택 ── */
    .hl-times__grid{ flex-direction:column; gap:40px; }
    .hl-times__col{ gap:10px; }
    .hl-times__body .hl-bullets{ gap:8px; }

    /* ── 진료 예약·문의 — 전화 + 세로 버튼(중앙, max 466) ── */
    .hl-contact__head{ gap:10px; }
    .hl-contact__phone-ic{ width:24px; height:24px; }
    .hl-contact .hl-btnrow{ flex-direction:column; align-items:center; margin-top:30px; }
    .hl-contact .hl-obtn{ flex:0 0 auto; width:100%; max-width:466px; }

    /* ── 프로모 카드 — 좌:텍스트(콘텐츠 hug) + 우:이미지(나머지). 50/50 아님(Figma: 텍스트 shrink-0) ── */
    .hl-promo__inner{ padding-left:0; }
    .hl-promo__text{ flex:0 0 auto; width:auto; height:auto; padding:40px 20px; gap:40px; justify-content:flex-start; white-space:nowrap; }
    .hl-promo__title{ font-size:32px; letter-spacing:-.96px; }                    /* 56→32 */
    .hl-promo__desc{ margin-top:10px; font-size:20px; line-height:normal; letter-spacing:-1px; }  /* 28→20 */
    .hl-promo__info{ gap:5px; }
    .hl-promo__info li{ font-size:18px; gap:10px; letter-spacing:-.54px; }         /* 28→18 */
    /* 카드 높이는 텍스트 높이에 맞춤(align-self:stretch). picture를 absolute로 빼서 이미지 자연높이가
       카드를 늘리지 않게 함(특히 세로형 soft 이미지가 폭 넓어지면 카드가 수백px 늘어나던 버그 방지) */
    .hl-promo__img{ flex:1 1 0; min-width:0; height:auto; align-self:stretch; overflow:hidden; }
    .hl-promo__img picture{ position:absolute; inset:0; width:100%; height:100%; }
    /* 태블릿 전용 클린 이미지 프레이밍 */
    .hl-promo--night .hl-promo__img img{ object-position:center 50%; }
    .hl-promo--soft  .hl-promo__img img{ object-position:center 50%; }

    /* ── 주소 → 2열을 단일 컬럼 스택 + 지도 + 2×2 버튼 ── */
    .hl-address{ padding-bottom:100px; }                                          /* 130→100 */
    .hl-address .hl-wrap{ gap:60px; }                                             /* 80→60 */
    .hl-address__cols{ flex-direction:column; gap:40px; }
    .hl-address__body .hl-bullets{ gap:8px; }
    .hl-address__mapblock{ gap:30px; }                                            /* 40→30 */
    .hl-map{ height:300px; }                                                      /* 600→300 */
    .hl-map .root_daum_roughmap .wrap_map{ height:300px !important; }
    .hl-address__mapblock .hl-btnrow{ flex-wrap:wrap; }
    .hl-address__mapblock .hl-obtn{ flex:1 1 calc(50% - 10px); }

    /* ── 어디에 — 제목 56 유지, desc만 24/투명도 조정 ── */
    .hl-where__desc{ font-size:24px; color:#44403c; opacity:.7; letter-spacing:-1.2px; }

    /* ── 대중교통 → 노선 컬럼 단일 스택, 배지 60→50, 노선명 28→24 ── */
    .hl-transit__cols{ flex-direction:column; gap:20px; }
    .hl-line__badge{ flex:0 0 50px; width:50px; height:50px; font-size:16px; letter-spacing:-.8px; }
    .hl-line__badge--1{ font-size:16px; }
    .hl-line__name{ font-size:24px; letter-spacing:-.72px; }

    /* ── Q&A — 폰트 동일(56/21/17), 패딩만 130→100 ── */
    .hl-faq{ padding:100px 0; }
}

/* ── 브레드크럼 태블릿(768–1199) — doctors.css와 동일. 테마가 ≤768서 .home을 calc(30%)=230px로 줄여
   17px 텍스트+체브론이 안 들어가 체브론이 안쪽으로 밀려 잘리므로 home2 300/home3 auto·span padding 0 48 0 20으로 복원 ── */
@media (min-width: 768px) and (max-width: 1199px) {
    /* 태블릿 전용 줄바꿈(<br class="hl-br-to">) — 모바일에서는 자연 줄바꿈으로 풀리도록 분리 */
    .hl-br-to{ display:inline; }

    #hoursLocationPage #site_config .site .home { height: 60px; }
    #hoursLocationPage #site_config .site .home.home1 { width: 60px; height: 60px; }
    #hoursLocationPage #site_config .site .home.home1 img { width: 20px; height: 20px; }
    #hoursLocationPage #site_config .site .home.home2 { width: 300px; }
    #hoursLocationPage #site_config .site .home.home3 { width: auto; }
    #hoursLocationPage #site_config .site .home > span { padding: 0 48px 0 20px; }
}

/* ── 브레드크럼 모바일(≤767) — doctors.css와 동일: 2줄 스택(가로 바가 안 들어감) ── */
@media (max-width: 767px) {
    #hoursLocationPage #site_config .site { display: flex; flex-wrap: wrap; align-items: stretch; }
    #hoursLocationPage #site_config .site .home { height: 60px; line-height: 1.3; }
    #hoursLocationPage #site_config .site .home.home1 { flex: 0 0 60px; width: 60px; height: 60px; }
    #hoursLocationPage #site_config .site .home.home1 img { width: 20px; height: 20px; }
    #hoursLocationPage #site_config .site .home.home2 { flex: 1 1 0; width: auto; min-width: 0; }
    #hoursLocationPage #site_config .site .home.home3 { flex: 0 0 calc(100% - 60px); width: calc(100% - 60px); margin-left: 60px; }
    #hoursLocationPage #site_config .site .home > span { padding-left: 20px; }
}

/* =========================================================
   모바일 (≤767, Figma 883:30167 375px 1:1)
   ≤1199(태블릿) 위에 "얹는" 블록 — 태블릿에서 set한 구조/flex/폰트를 모바일 값으로 명시 재설정.
   태블릿이 건드린 2-class 셀렉터는 모바일도 동일 specificity로 덮어야 새지 않음.
   ========================================================= */
@media (max-width:767px){
    /* ── 줄바꿈: 모바일 전용 활성 / PC+태블릿 br 숨김 ── */
    .hl-br-m{ display:inline; }
    .hl-br-d{ display:none; }

    /* ── 공통 거터(좌우 20px) ── */
    .hl-wrap{ max-width:calc(100% - 40px); }
    .hl-section{ padding:30px 0; }

    /* ── 섹션 헤딩(보라 바 3×28 + 20px 라벨) ── */
    .hl-heading{ gap:7px; }
    .hl-heading__label{ font-size:20px; letter-spacing:-1px; }                 /* 30→20 */

    /* ── 불릿(13px) ── */
    .hl-bul__tx,.hl-bul__k,.hl-bul__v{ font-size:13px; line-height:1.5; letter-spacing:-.52px; }  /* 17→13 */
    .hl-bul__mk{ min-height:19px; }
    .hl-bul__mk::before{ top:9px; }

    /* ── 라벨 pill(자가용/버스/지하철) 13px ── */
    .hl-pill{ padding:8px 16px; font-size:13px; }

    /* ── outline 버튼: 1열 세로, radius 8, border .8, 라벨 24, 아이콘 36 ── */
    .hl-btnrow{ flex-direction:column; gap:10px; margin-top:20px; }
    .hl-obtn{ flex:1 1 auto; width:100%; max-width:none; padding:16px 40px 16px 24px; border-width:.8px; border-radius:8px; }
    .hl-obtn__ic{ width:36px; height:36px; border-radius:8px; }
    .hl-obtn__label{ font-size:24px; letter-spacing:-1.2px; }

    /* ── 히어로 320 / eyebrow 14(ls +1.4) / 제목 32 (3줄) ── */
    .hl-hero{ height:320px; padding:40px 15px; }
    .hl-hero__inner{ gap:20px; max-width:none; }   /* PC용 calc(100%-80px)=265px 해제(eyebrow 1줄) */
    .hl-hero__eyebrow{ font-size:14px; letter-spacing:1.4px; }                  /* 22→14 */
    .hl-hero__title{ font-size:32px; letter-spacing:-.96px; }                   /* 64→32 */

    /* ── 인트로(중앙) — eyebrow 17 / 제목 28 ExtraBold(800) / desc 15 ── */
    .hl-intro{ padding:30px 0 60px; }
    .hl-intro__eyebrow{ padding-top:16px; font-size:17px; letter-spacing:-.51px; }   /* 24→17 */
    .hl-intro__title{ margin-top:20px; font-size:28px; font-weight:800; letter-spacing:-.84px; } /* 모바일 제목 800·28 */
    .hl-intro__desc{ margin-top:10px; font-size:15px; line-height:1.5; letter-spacing:-.6px; }    /* 24→15 */

    /* ── 섹션 탭 네비(3+4) — 13px, py8, base의 min-height:66 리셋 ── */
    .hl-nav{ max-width:calc(100% - 40px); }   /* PC용 calc(100%-80px)=295px → 335(좌우 20) */
    .hl-nav__tab{ min-height:0; padding:8px 4px; font-size:13px; line-height:1.4; letter-spacing:-.6px; white-space:nowrap; }

    /* ── 진료시간 — 단일 컬럼(태블릿 상속) / 항목 간격 30 / 큰시간 32 ── */
    .hl-times__grid{ gap:30px; }                                               /* 40→30 */
    .hl-times__col{ gap:16px; }                                                /* 10→16 */
    .hl-times__big{ font-size:32px; letter-spacing:-1.6px; }                   /* 41→32 */
    .hl-times__body{ gap:20px; }
    .hl-times__body .hl-bullets{ gap:6px; }

    /* ── 문의 — 전화 32 / 아이콘 24 / 버튼 1열 풀폭 ── */
    .hl-contact__head{ gap:16px; }
    .hl-contact__phone{ gap:8px; }
    .hl-contact__phone-ic{ width:24px; height:24px; }
    .hl-contact__num{ font-size:32px; letter-spacing:-1.6px; }                 /* 41→32 */
    .hl-contact .hl-btnrow{ align-items:stretch; margin-top:20px; }            /* 태블릿 align:center·mt30 덮기(2-class) */
    .hl-contact .hl-obtn{ max-width:none; }                                    /* 태블릿 max-width:466 덮기(2-class) */

    /* ── 프로모 — 세로형: 상단 이미지(160) + 하단 텍스트 ── */
    .hl-promo__inner{ flex-direction:column; align-items:stretch; padding-left:0; }
    .hl-promo__img{ order:-1; flex:0 0 160px; width:100%; height:160px; align-self:auto; }  /* 태블릿 flex:1·height:auto·stretch 리셋 */
    .hl-promo__pill{ top:10px; left:10px; }                                    /* 16→10 (Figma p-10) */
    .hl-promo__text{ width:100%; height:auto; padding:20px 10px 30px; gap:20px; justify-content:flex-start; white-space:normal; }  /* 태블릿 nowrap·hug 리셋 */
    .hl-promo__title{ font-size:32px; letter-spacing:-.96px; }
    .hl-promo__desc{ margin-top:5px; font-size:15px; line-height:1.5; letter-spacing:-.6px; } /* 20→15 */
    .hl-promo__info{ gap:2px; }
    .hl-promo__info li{ font-size:17px; gap:10px; letter-spacing:-.85px; line-height:1.3; }   /* 18→17 */
    .hl-promo--night .hl-promo__img img,
    .hl-promo--soft  .hl-promo__img img{ object-position:center center; }

    /* ── 주소 — 단일 컬럼 / 제목 32 / 지도 300 / 버튼 1열 ── */
    .hl-address{ padding-bottom:30px; }                                        /* 100→30 */
    .hl-address .hl-wrap{ gap:30px; }                                          /* 60→30 (2-class) */
    .hl-address__cols{ gap:30px; }                                             /* 40→30 */
    .hl-address__body .hl-bullets{ gap:6px; }
    .hl-address__title{ font-size:32px; letter-spacing:-1.6px; }               /* 41→32 */
    .hl-address__mapblock{ gap:10px; }                                         /* 30→10 (지도→버튼) */
    .hl-map{ height:300px; }
    .hl-map .root_daum_roughmap .wrap_map{ height:300px !important; }
    .hl-address__mapblock .hl-btnrow{ flex-direction:column; flex-wrap:nowrap; margin-top:0; } /* 태블릿 wrap(2×2) 덮기(2-class) */
    .hl-address__mapblock .hl-obtn{ flex:1 1 auto; width:100%; }               /* 태블릿 calc(50%-10) 덮기(2-class) */

    /* ── 어디에 — 제목 28 ExtraBold / desc 17 ── */
    .hl-where__title{ font-size:28px; letter-spacing:-.84px; }                 /* 56→28 */
    .hl-where__desc{ font-size:17px; line-height:1.3; letter-spacing:-.85px; } /* 24→17 */

    /* ── 대중교통 — 배지 40 / 노선명 17 / 단일 스택 ── */
    .hl-transit__group{ gap:18px; }
    .hl-transit__cols{ gap:18px; }                                             /* 20→18 */
    .hl-transit__col{ gap:10px; }                                              /* 20→10 */
    .hl-line{ gap:6px; }                                                       /* 10→6 */
    .hl-line__badge{ flex:0 0 40px; width:40px; height:40px; font-size:13px; letter-spacing:-.65px; }  /* 50→40 */
    .hl-line__badge--1{ font-size:13px; }
    .hl-line__name{ font-size:17px; letter-spacing:-.51px; }                   /* 24→17 */

    /* ── Q&A — 제목 28 / eyebrow 17(#a8599e) / Q 15 / A 13 ── */
    .hl-faq{ padding:80px 0; }                                                 /* 100→80 */
    .hl-faq__container{ max-width:calc(100% - 30px); }                         /* 15px 거터 */
    .hl-faq__eyebrow{ font-size:17px; }                                        /* 24→17 */
    .hl-faq__title{ margin-top:12px; font-size:28px; letter-spacing:-.84px; }  /* 56→28, mt 30→12 */
    .hl-qna__q{ padding:12px 20px; }
    .hl-qna__mark{ font-size:15px; line-height:1.5; }
    .hl-qna__text{ font-size:15px; line-height:1.5; letter-spacing:-.75px; }   /* 21→15 */
    .hl-qna__a{ padding:20px; }
    .hl-qna__ic{ width:15px; height:15px; }
    .hl-qna__atext{ font-size:13px; line-height:1.5; letter-spacing:-.39px; }  /* 17→13 */
}