/* =============================================================================
   clinic.css — 병원 서브페이지 공통 스타일 시스템 (.bom-* 네임스페이스)
   -----------------------------------------------------------------------------
   - 값은 검증된 doctors 페이지(/doctors/index.php·detail.php)에서 추출 + Figma 신규 컴포넌트.
   - 이 파일이 <link>된 페이지에만 적용된다(홈은 미로드 → 영향 없음).
   - NOTE(2026-06): /doctors/ 자신은 이 공통 시스템으로 마이그레이션하지 않고 자체 인라인 스타일을
     의도적으로 유지한다. clinic.css가 이후 location 기준으로 분화돼(hero inner 640→760, faq 1340→1440,
     bom-check 36→32, banner 등) doctors로 되돌리려면 hero/heading/faq마다 doctors 전용 오버라이드가
     인라인 제거량만큼 필요 + index/detail hero가 모바일에서 서로 달라 단일 변형으로 무회귀 불가 →
     순이득 없음 + 회귀 위험. 재시도 금지. (현 사용처: /location/)
   - 헤더 좌우 스왑(회원가입/로그인 좌 · 햄버거 우)도 이 파일에 포함 → 페이지별 인라인 복제 불필요.
   - 브레이크포인트: 1200px(테마 헤더 120→84 햄버거 전환 경계) / 767px(모바일).
   - 함수 컴포넌트 마크업: theme/hy/clinic/components.php
   ============================================================================= */

:root{
  /* 컬러 토큰 (Figma 변수와 1:1) */
  --bom-navy:#0f2d44;        /* Subcolor_Navy — 탭 active, 강조 */
  --bom-navy-dark:#113a59;   /* Sub_Navy Dark */
  --bom-mint:#02bab4;        /* Mint Normal */
  --bom-mint-hover:#02a7a2;  /* Mint hover — heading eyebrow */
  --bom-mint-dark:#028c87;   /* Mint Dark */
  --bom-ink:#1b1d1f;         /* cool-gray-900 */
  --bom-ink-2:#101112;       /* 본문 제목용 진한 먹 */
  --bom-gray-700:#2d3035;    /* cool-gray-700 */
  --bom-gray-600:#40444a;    /* cool-gray-500(Figma) — 본문/버튼 텍스트 */
  --bom-gray-550:#4b4b4c;    /* 설명 텍스트 */
  --bom-gray-400:#66696e;    /* cool-gray-400 — 보조 설명 */
  --bom-line:#e8ebeb;        /* 탭/카드 경계 */
  --bom-line-2:#e7e5e4;
  --bom-warm:#f5f5f4;        /* warmGray/100 */
  /* 레이아웃 토큰 */
  --bom-head-pc:120px;       /* PC GNB 높이 */
  --bom-head-mo:85px;        /* 태블릿/모바일 햄버거 헤더 높이(84.84) */
  --bom-cw:1400px;           /* 콘텐츠 폭(1920 - 좌우 260) */
}

/* ===== 페이지 래퍼 ===== */
.bom-page{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  color:var(--bom-ink);background:#fff;padding-top:var(--bom-head-pc);padding-bottom:120px;-webkit-font-smoothing:antialiased;}
.bom-page *{box-sizing:border-box;}
/* 콘텐츠 폭 = Figma 1400 (1920 - 좌우 260). max-width 1440 + 좌우 20 padding → 데스크톱 실폭 1400, 탭바(1400)와 정렬 */
.bom-container{max-width:1440px;margin:0 auto;padding:0 20px;}
.bom-tac{text-align:center;}
/* 전 뷰포트 강제 줄바꿈(테마의 ≤1200 br{display:none} 규칙을 무시). plain <br>은 ≥1200에서만 보이므로
   모든 뷰포트에서 동일하게 끊으려면 <br class="bom-br"> 사용.
   뷰포트별 제어: bom-br=전체, m_br=≤1200(태블릿+모바일, 테마 제공), ta_br=태블릿(768~1199)만, mo_br=모바일(≤767)만.
   Figma는 폭마다 줄바꿈점이 달라(태블릿 3줄 ↔ 모바일 4줄 등) 같은 desc도 뷰포트별로 끊는 위치가 다르다. */
.bom-page br.bom-br{display:block !important;}
.bom-page br.ta_br{display:none;}
.bom-page br.mo_br{display:none;}
@media (min-width:768px) and (max-width:1199px){ .bom-page br.ta_br{display:block !important;} }
@media (max-width:767px){ .bom-page br.mo_br{display:block !important;} }

/* Banner 라이트 변형(주말진료 등): 좌측 텍스트 영역은 완전 불투명한 밝은 면(#f9fafb),
   건물은 우측 media에만 표시(좌측 가장자리만 #f9fafb로 부드럽게 페이드). 뷰포트 무관. */
.bom-banner--light .bom-banner__overlay{background:linear-gradient(122deg,#f4f8f8 12%,#f0ffff 93%);}
.bom-banner--light .bom-banner__media{
  /* 좌측 흰색 페이드(그라데이션) 제거 — 이미지 그대로 선명하게(Figma 동일) */
  background-image:var(--bom-banner-fg);
  background-size:cover;background-position:center;}
.bom-banner--light .bom-banner__tit{color:var(--bom-mint-dark);}
.bom-banner--light .bom-banner__desc{color:var(--bom-gray-600);}
.bom-banner--light .bom-banner__r{color:var(--bom-gray-400);}
.bom-banner--light .bom-banner__media::after{display:none;}

/* ===== Hero 배너 (Figma Hero_Banner_pc / doctors .doc-hero) ===== */
.bom-hero{position:relative;height:541px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;background:radial-gradient(circle at 50% 14%,#fdfdfd,#d4d4d4);}
.bom-hero__bg{position:absolute;inset:0;background-image:var(--bom-hero-bg);background-repeat:no-repeat;
  background-position:center center;background-size:cover;}
.bom-hero__overlay{position:absolute;inset:0;background:rgba(0,0,0,.42);}
.bom-hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:28px;
  padding:0 20px;width:min(760px,90%);}
.bom-hero__eyebrow{margin:0;font-size:16px;font-weight:500;letter-spacing:1.6px;color:rgba(255,255,255,.8);
  text-align:center;}
.bom-hero__title{margin:0;font-size:52px;font-weight:700;line-height:1.3;letter-spacing:-1.56px;color:#fff;
  text-align:center;}
.bom-hero__line{display:block;width:100%;height:1px;background:rgba(255,255,255,.85);}

/* ===== Heading (가운데 정렬, Figma Component 7 / doctors .doc-heading) ===== */
.bom-heading{max-width:1440px;margin:0 auto;padding:100px 20px;text-align:center;}
.bom-heading__eyebrow{margin:0 0 16px;font-size:16px;font-weight:500;letter-spacing:1.6px;color:var(--bom-mint-hover);
  opacity:.85;}
.bom-heading__eyebrow .accent{color:var(--bom-mint);}
.bom-heading__tit{margin:0 0 20px;font-size:50px;font-weight:700;line-height:1.3;letter-spacing:-1.5px;color:var(--bom-ink);}
.bom-heading__desc{margin:0;font-size:26px;font-weight:500;line-height:1.4;letter-spacing:-0.78px;color:var(--bom-gray-400);}

/* ===== Section heading (좌측 정렬, Figma Component 10) ===== */
.bom-shead{display:flex;flex-direction:column;gap:20px;width:100%;}
.bom-shead__tit{margin:0;font-size:40px;font-weight:700;line-height:1.3;letter-spacing:-1.2px;color:var(--bom-ink-2);}
.bom-shead__desc{margin:0;font-size:24px;font-weight:500;line-height:30px;letter-spacing:-0.48px;color:var(--bom-gray-550);}

/* ===== Check heading (민트 체크 + H4, Figma "평일 진료시간") ===== */
.bom-check{display:flex;align-items:center;gap:10px;}
.bom-check__icon{flex:0 0 24px;width:24px;height:24px;}
/* Figma 소제목 = PC/Headline/H3 32 bold (lh1.2, -0.96px). data--annotations: 32로 변경 */
.bom-check__txt{margin:0;font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-0.96px;color:var(--bom-gray-700);}

/* ===== Sticky 탭바 (Figma Component 8 / doctors .doctors-tabs) ===== */
.bom-tabs{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--bom-line);}
.bom-tabs__inner{display:flex;justify-content:center;align-items:stretch;max-width:var(--bom-cw);margin:0 auto;}
.bom-tabs a{flex:0 0 230px;display:flex;align-items:center;justify-content:center;height:60px;padding:16px;
  font-size:17px;font-weight:500;letter-spacing:-0.68px;color:var(--bom-gray-600);text-decoration:none;
  text-align:center;line-height:1.3;white-space:nowrap;background:#fff;border:1px solid var(--bom-line);
  transition:background .15s,color .15s;}
.bom-tabs a:hover{background:#f3f5f6;}
.bom-tabs a.on{background:var(--bom-navy);color:#fff;font-weight:700;border-color:var(--bom-navy);}
/* 풀폭 변형: 탭이 컨테이너를 균등 분할(Figma location 탭바) */
.bom-tabs--stretch a{flex:1 0 0;width:auto;}

/* ===== btn_outline (Figma btn_outiline) ===== */
.bom-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#fff;
  border:1px solid var(--bom-gray-600);border-radius:12px;padding:20px 52px 20px 32px;
  font-size:28px;font-weight:700;letter-spacing:-1.4px;color:var(--bom-gray-600);text-decoration:none;
  white-space:nowrap;transition:border-color .15s,color .15s,box-shadow .15s;}
.bom-btn:hover{border-color:var(--bom-navy);color:var(--bom-navy);box-shadow:0 6px 18px rgba(17,58,89,.08);}
.bom-btn__icon{flex:0 0 44px;width:44px;height:44px;border-radius:12px;object-fit:cover;}

/* ===== Banner_wide CTA (Figma Banner_wide) ===== */
.bom-banner{position:relative;overflow:hidden;background-image:var(--bom-banner-bg);background-size:cover;background-position:center;}
/* 다크 변형 좌측 패널 = 솔리드 네이비(Figma 61:14449 배경컬러 rgb(15,45,68)). 우측 미디어 이미지는 좌측 가장자리가 네이비로 baked-fade되어 자연 연결 */
.bom-banner__overlay{position:absolute;inset:0;background:#0f2d44;pointer-events:none;}
.bom-banner__row{position:relative;z-index:1;display:flex;align-items:stretch;min-height:361px;padding-left:260px;}
/* 텍스트 박스 720px 고정(Figma 56:16783) → 이미지=나머지(1920에서 940px). pr-60으로 콘텐츠폭 660(max-w-660) */
.bom-banner__text{flex:0 0 720px;max-width:720px;display:flex;flex-direction:column;justify-content:center;gap:30px;
  padding:40px 60px 60px 0;}
/* Figma Banner_wide: 제목 44/lh1.2/-2px, 설명 24/lh30/-0.48px (data--annotations: 44·24로 변경) */
.bom-banner__tit{margin:0;font-size:44px;font-weight:700;line-height:1.2;letter-spacing:-2px;color:#fff;}
.bom-banner__desc{margin:0;font-size:24px;font-weight:500;line-height:30px;letter-spacing:-0.48px;color:var(--bom-warm);}
.bom-banner__rows{display:flex;flex-direction:column;gap:10px;}
.bom-banner__r{display:flex;gap:12px;align-items:flex-start;font-size:26px;font-weight:500;letter-spacing:-0.78px;color:#fff;line-height:1.3;}
.bom-banner__r b{font-weight:500;white-space:nowrap;}
.bom-banner__r span{flex:1;text-align:right;}
.bom-banner__media{flex:1;position:relative;background-image:var(--bom-banner-fg);background-size:cover;background-position:center;}
/* 그라데이션(좌측 페이드 + 하단 어둠)은 미디어 이미지에 baked → CSS 오버레이 불필요 */
.bom-banner__media::after{display:none;}
.bom-banner__badge{position:absolute;top:30px;left:16px;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bom-mint);border-radius:100px;padding:13px 22px;font-size:17px;font-weight:700;letter-spacing:-0.51px;color:#fff;white-space:nowrap;}

/* ===== 자주 묻는 질문 FAQ 카드 (Figma qna / doctors .doctors-faq) ===== */
.bom-faq{max-width:1440px;margin:0 auto;padding:96px 20px 0;}
.bom-faq__tit{font-size:34px;font-weight:700;letter-spacing:-1.02px;color:var(--bom-navy-dark);margin:0 0 28px;text-align:center;}
.bom-faq__tit-pre{}
.bom-faq__list{display:flex;flex-direction:column;gap:20px;}
.bom-faq__item{border-radius:10px;overflow:hidden;}
.bom-faq__q{display:flex;align-items:center;gap:10px;background:rgba(230,248,248,.5);padding:15px 25px;}
.bom-faq__qmark{flex:0 0 24px;width:24px;font-size:21px;font-weight:700;line-height:31px;letter-spacing:-1.05px;color:var(--bom-ink);}
.bom-faq__qtext{margin:0;font-size:21px;font-weight:700;line-height:31px;letter-spacing:-1.05px;color:var(--bom-ink);white-space:nowrap;}
.bom-faq__a{background:rgba(247,247,247,.5);padding:25px;}
.bom-faq__a p{margin:0;font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-0.68px;color:rgba(0,0,0,.7);}
/* 인트로형 FAQ 헤딩(eyebrow 민트 + 50px 제목, 가운데) */
.bom-faq--intro{padding-top:100px;}
.bom-faq__eyebrow{text-align:center;margin:0 0 16px;}
.bom-faq--intro .bom-faq__tit{font-size:50px;color:var(--bom-ink);letter-spacing:-1.5px;margin-bottom:60px;}

/* =============================================================================
   태블릿 (≤1199px) — 테마 헤더가 햄버거형(84px)으로 전환되는 경계
   ============================================================================= */
@media (max-width:1199px){
  .bom-page{padding-top:var(--bom-head-mo);padding-bottom:100px;}
  /* 태블릿 좌우 패딩 30px (Figma 768: 콘텐츠 x30, width 708) */
  .bom-container{padding:0 30px;}

  /* GNB 헤더 좌우 스왑: 회원가입/로그인 좌 · 햄버거 우 (Figma 51-23510).
     전역 테마는 햄버거 좌/util 우라서, clinic.css 로드 페이지 한정으로 맞바꿈. */
  .spinner-master{left:auto;right:20px;}
  .menu .util_member{left:2%;right:auto;top:50%;transform:translateY(-50%);}

  /* ⚠️ Figma 768 태블릿은 데스크톱 폰트 크기를 그대로 사용한다(축소 금지). 레이아웃(스택/패딩/그리드)만 변경. */

  /* Hero (높이만 540) */
  .bom-hero{height:540px;}
  .bom-hero__overlay{background:rgba(0,0,0,.5);}
  .bom-hero__inner{width:min(648px,calc(100% - 80px));padding:0;}

  /* Heading: 패딩만(폰트 데스크톱 유지) */
  .bom-heading{padding:100px 30px;}

  /* 탭바: 3열 그리드(폰트는 데스크톱 17 유지) */
  .bom-tabs__inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .bom-tabs a{flex:none;width:auto;}

  /* 배너: 태블릿은 이미지 정확히 50%(384px). padding을 row가 아닌 text에 둬야 media가 full폭의 50%가 됨
     (row에 padding-left를 두면 flex컨테이너가 줄어 media가 48%로 작아짐). 폰트 데스크톱 52/26/26/17 유지 */
  .bom-banner__row{padding-left:0;min-height:auto;}
  .bom-banner__text{flex:1;max-width:none;padding:20px 30px 40px 30px;}
  .bom-banner__media{flex:0 0 50%;}
  /* 설명 줄간격: 데스크톱은 30px 절대값이지만 태블릿/모바일(폰트 24·26·14)에선 비율 1.3(Figma) — 절대값 30px이 작은 폰트에서 과대 간격되는 것 방지 */
  .bom-banner__desc{line-height:1.3;}

  /* FAQ: 패딩만 */
  .bom-faq{padding:64px 30px 0;}
  .bom-faq--intro{padding-top:64px;}
}

/* =============================================================================
   모바일 (≤767px) — ≤1199 블록 뒤에 와야 같은 셀렉터에서 모바일 값이 이김
   ============================================================================= */
@media (max-width:767px){
  /* 메인 GNB 헤더는 스크롤되어 사라지고(전역 fixed 해제), sticky 탭만 top:0에 붙도록 */
  .nav_wrapper{position:static;}

  /* 모바일 좌우 패딩 20px (Figma 375: 콘텐츠 335 = 375-40) — 태블릿 30px 무효화 */
  .bom-container{padding:0 20px;}

  /* Hero 320px / 타이틀 40px */
  .bom-hero{height:320px;}
  .bom-hero__inner{gap:20px;}
  .bom-hero__eyebrow{font-size:13px;letter-spacing:1.3px;}
  .bom-hero__title{font-size:40px;letter-spacing:-1.2px;}

  /* Heading */
  .bom-heading{padding:60px 20px;}
  .bom-heading__eyebrow{font-size:13px;letter-spacing:1.3px;}
  .bom-heading__tit{font-size:36px;letter-spacing:-1.08px;}     /* Figma 모바일 H2 36 */
  .bom-heading__desc{font-size:20px;letter-spacing:-0.6px;}     /* Figma 모바일 Label 20 */
  .bom-shead__tit{font-size:36px;letter-spacing:-1.08px;}        /* Figma 모바일 H2 36 */
  .bom-shead__desc{font-size:18px;line-height:24px;letter-spacing:-0.36px;}  /* Figma 모바일 Label 18(미적용→데스크톱 24px로 떠서 wrap 깨짐) */
  .bom-check__txt{font-size:30px;letter-spacing:-0.9px;}         /* Figma 모바일 H3 30 */
  .bom-check__icon{flex:0 0 22px;width:22px;height:22px;}

  /* 탭바: 2열 그리드 */
  .bom-tabs__inner{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bom-tabs a{height:auto;min-height:50px;font-size:14px;letter-spacing:-0.56px;white-space:normal;}
  .bom-tabs a.on{font-weight:600;}

  /* 버튼 (Figma 모바일 btn_outiline_mobile: 24px/-1.2, 아이콘 36, pl24/pr40/py16, gap8, radius8) */
  .bom-btn{font-size:24px;letter-spacing:-1.2px;padding:16px 40px 16px 24px;gap:8px;border-radius:8px;}
  .bom-btn__icon{flex:0 0 36px;width:36px;height:36px;border-radius:8px;}

  /* 배너: 가로형 — 텍스트(flex) + 이미지 160px (Figma 모바일 132:24688). 제목 26·desc14·행14 */
  .bom-banner__row{flex-direction:row;padding-left:0;min-height:auto;align-items:stretch;}
  .bom-banner__text{flex:1;min-width:0;max-width:none;padding:16px 10px 20px 16px;gap:20px;}
  .bom-banner__tit{font-size:24px;line-height:1.3;letter-spacing:-0.72px;}   /* Figma 모바일 배너 제목 24/-0.72/lh1.3 */
  .bom-banner__desc{font-size:14px;letter-spacing:-0.56px;}
  .bom-banner__rows{gap:2px;}
  .bom-banner__r{font-size:14px;letter-spacing:-0.56px;}
  .bom-banner__media{flex:0 0 160px;width:auto;height:auto;}
  /* 모바일 라이트 패널 = #f6f4f6 솔리드(Figma 132:24912) */
  .bom-banner--light .bom-banner__overlay{background:#f6f4f6;}
  .bom-banner__badge{display:inline-flex;top:16px;left:10px;padding:8px 13px;font-size:14px;letter-spacing:-0.56px;}

  /* FAQ */
  .bom-faq{padding:48px 20px 0;}
  .bom-faq__tit{font-size:24px;margin-bottom:16px;}
  .bom-faq--intro{padding-top:48px;}
  .bom-faq--intro .bom-faq__tit{font-size:26px;margin-bottom:24px;letter-spacing:-0.78px;}
  .bom-faq__tit-pre{display:none;}
  .bom-faq__list{gap:16px;}
  .bom-faq__item{border-radius:8px;}
  .bom-faq__q{align-items:flex-start;gap:5px;padding:12px 16px;}
  .bom-faq__qmark{flex:0 0 19px;width:19px;font-size:17px;line-height:1.2;letter-spacing:-0.34px;}
  .bom-faq__qtext{font-size:17px;line-height:1.2;letter-spacing:-0.34px;white-space:normal;}
  .bom-faq__a{padding:16px;}
  .bom-faq__a p{font-size:14px;line-height:1.5;letter-spacing:-0.5px;}
}