/* ==========================================================================
   이호석한의원 — 공통 스타일
   팔레트 기준: 01. 메인페이지
   헤더 2변형: .site-header(흰 배경, 02~10) / .site-header--overlay(투명, 01)
   제목 폰트: 기본 Noto Serif KR(명조) · 질환 페이지는 body.page--article → Pretendard(고딕)
   ========================================================================== */

/* --------------------------------------------------------------- 1. 토큰 */
:root{
  --accent:      #2f5d4f;
  --accent-soft: #edf2ef;
  --accent-deep: #24483d;
  --gold:        #b08a4e;
  --gold-soft:   #f6efe3;

  --ink:   #1a1c19;
  --sub:   #3c423b;
  --muted: #5f6a63;
  --faint: #8b938c;

  --bg:    #fbfaf7;
  --panel: #ffffff;
  --line:  #e6e3db;

  --font-sans:  Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-serif: "Noto Serif KR", serif;

  --wrap: 1240px;
  --header-h: 83px;

  --shadow-header: 0 6px 20px rgba(26,28,25,.06);
  --shadow-drop:   0 20px 44px rgba(26,28,25,.18);
}

/* ---------------------------------------------------------------- 2. 리셋 */
*{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.9;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* 질환 아티클은 긴 본문을 읽는 페이지라 순백 배경을 쓴다 (원본 10번 기준)
 *
 * --toc-* : 좌측 목차 스크롤스파이 색. 원본 10번이 렌더링하던 값을 그대로 둔다
 *   (활성 #2f8a45 = 당시 --accent, 비활성 #191e14 = 당시 --muted).
 *   사이트 공통 --accent/--muted 와 분리해 둬서 팔레트가 바뀌어도 목차는 영향받지 않는다. */
body.page--article{
  /* 질환 템플릿 전용 색 상수 — 값은 원본 10번이 렌더링하던 색 그대로.
     공통 --accent/--ink 계열과 이름을 분리해 둬서, 사이트 팔레트를 바꿔도
     질환 페이지 본문은 영향받지 않고, 반대로 여기만 따로 바꿀 수도 있다.
     헤더·내비·드로어는 공통 토큰을 그대로 쓴다(마크업이 site.css 클래스 기반). */
  --article-accent:       #26703A;   /* 본문 지배 초록 — 원본에 77곳 하드코딩돼 있던 값 */
  --article-accent-hi:    #2f8a45;   /* 원본 --accent  — 목차 활성 등 */
  --article-accent-deep:  #256f37;   /* 원본 --accent-deep */
  --article-accent-press: #1F5E30;   /* CTA 버튼 hover */
  --article-soft:         #eef6ea;   /* 원본 --tint / --gold-soft */
  --article-gold:         #C79233;   /* 소제목 라벨 금색 */
  --article-ink:          #191e14;   /* 원본 --ink */
  --article-muted:        #191e14;   /* 원본에서 --ink 와 같은 값이었음 — 의도적으로 유지 */
  --article-line:         #CCCCCC;   /* 원본 --line */

  /* 본문 마크업에 rgb() 리터럴로 박혀 있던 아티클 전용 색 (gerd.html 실측값) */
  --article-title:        #1b1f1a;   /* 제목·강조 텍스트  rgb(27,31,26) */
  --article-text:         #4a4f46;   /* 본문 텍스트       rgb(74,79,70) */
  --article-muted2:       #6b7263;   /* 브레드크럼·태그   rgb(107,114,99) */
  --article-dot:          #c9cec3;   /* 목차 점·구분 기호 rgb(201,206,195) */
  --article-box:          #f6f7f4;   /* 카드·박스 배경    rgb(246,247,244) */
  --article-border:       #e4e6e0;   /* 카드·박스 테두리  rgb(228,230,224) */

  --toc-active: var(--article-accent-hi);
  --toc-idle:   var(--article-ink);

  background:#fff;
  letter-spacing:-.3px;
}

/* 본문 리셋(p/li 줄바꿈, img max-width, blockquote/figure 여백, summary 마커 등)은
 * 여기 두지 않는다. 각 페이지 <style> 이 원본 리셋을 그대로 가지고 있고,
 * 원본은 word-break:keep-all 과 img{max-width:100%} 를 768px 이하에서만 적용했다.
 * 전역으로 두면 데스크톱 줄바꿈 위치와 이미지 폭이 원본과 달라진다. */
ul,ol{ margin:0; padding:0; list-style:none }

a{ color:inherit; text-decoration:none }
a:hover{ color:var(--accent) }

/* 접근성: 키보드 포커스는 남기고 마우스 클릭 아웃라인만 제거 */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ------------------------------------------------------------ 3. 타이포 */
/* color 를 지정하지 않는다 — 어두운 배너 위의 제목은 부모의 흰색을 상속받아야 한다.
   일반 제목은 body 의 var(--ink) 가 그대로 내려온다. */
/* 제목은 글꼴 계열만 정한다.
 *
 * 크기·행간·자간은 페이지마다 다르게 설계돼 있고 각 페이지 <style> 과
 * 인라인 스타일이 그 값을 들고 있다. 여기서 수치를 강제하면 기존 화면이 바뀌므로
 * 의도적으로 지정하지 않는다. 새 페이지를 만들 때는
 * disease/gerd.html 또는 about.html 의 <style> 을 출발점으로 삼으면 된다.
 *
 * color 도 지정하지 않는다 — 어두운 배너 위 제목이 부모의 흰색을 상속받아야 한다. */
h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-serif);
}

/* 질환 아티클은 제목도 고딕 */
body.page--article h1,
body.page--article h2,
body.page--article h3,
body.page--article h4{ font-family:var(--font-sans) }

/* --------------------------------------------------------------- 4. 헤더 */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-header);
}
.site-header__inner{
  max-width:var(--wrap); margin:0 auto;
  padding:21px 26px 14px;
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:nowrap;
}
.site-logo{ display:flex; align-items:center; flex:none }
.site-logo img{ display:block; height:52px; width:auto }
.site-logo .logo--light{ display:none }

/* 01. 메인페이지 — 히어로 위에 얹히고, 스크롤하면 흰 배경으로 바뀌는 헤더 */
.site-header--overlay{
  position:fixed; left:0; right:0; top:0;
  border-bottom:0;
  background:linear-gradient(180deg,
              rgba(30,24,16,.52) 0%,
              rgba(30,24,16,.22) 60%,
              rgba(30,24,16,0)  100%);
  box-shadow:none;
  transition:background .35s ease, box-shadow .35s ease;
}
.site-header--overlay .nav-item__link{
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.28);
}
.site-header--overlay .nav-item__link:hover{ color:#fff; opacity:.72 }
.site-header--overlay .site-logo .logo--dark{ display:none }
.site-header--overlay .site-logo .logo--light{ display:block }
.site-header--overlay .nav-toggle svg{ fill:#fff }

.site-header--overlay.is-scrolled{
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 20px rgba(26,28,25,.08);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
          backdrop-filter:saturate(180%) blur(8px);
}
.site-header--overlay.is-scrolled .nav-item__link{ color:var(--ink); text-shadow:none }
.site-header--overlay.is-scrolled .nav-item__link:hover{ color:var(--accent); opacity:1 }
.site-header--overlay.is-scrolled .site-logo .logo--dark{ display:block }
.site-header--overlay.is-scrolled .site-logo .logo--light{ display:none }
.site-header--overlay.is-scrolled .nav-toggle svg{ fill:var(--ink) }

/* ----------------------------------------------------------- 6. 주 내비 */
#site-nav{
  display:flex; align-items:center;
  gap:10px; flex-wrap:nowrap; flex:none;
  line-height:1;
}
.nav-item{ position:relative; flex:none }

.nav-item__link{
  display:flex; align-items:center;
  height:40px; padding:0 10px;
  font-size:16px; font-weight:600;
  color:var(--ink); white-space:nowrap;
}
.nav-item__link:hover{ color:var(--accent) }

/* 드롭다운 — 순수 CSS hover (JS 불필요) */
.nav-drop{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  padding-top:12px; min-width:206px; z-index:80;
  opacity:0; visibility:hidden;
  transition:opacity .16s ease;
}
.nav-item:hover > .nav-drop,
.nav-item:focus-within > .nav-drop{ opacity:1; visibility:visible }

/* 우측 끝 2개는 화면 밖으로 나가지 않도록 오른쪽 정렬 */
.nav-item--end > .nav-drop{ left:auto; right:0; transform:none }

.nav-drop__panel{
  background:var(--panel);
  border-radius:10px;
  padding:10px 8px;
  box-shadow:var(--shadow-drop);
}
.nav-drop a{
  display:block; padding:9px 14px;
  border-radius:6px;
  font-size:14.5px; color:var(--ink); white-space:nowrap;
}
/* 드롭다운 hover 는 전 페이지 동일하게 배경 + 글자색.
   (원본 10번 질환 페이지만 :root 에 --accent-soft 가 빠져 배경이 안 바뀌었는데,
    의도가 아닌 토큰 누락이라 통일했다.) */
.nav-drop a:hover{ background:var(--accent-soft); color:var(--accent) }
.nav-drop a.is-current{ background:var(--accent); color:#fff }

.nav-drop__head{
  display:block; padding:8px 14px 5px;
  font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--gold);
}
.nav-drop__sep{ display:block; height:1px; margin:7px 12px; background:var(--line) }
/* 대표 항목(김포한약 이호석의 기준 · 사상체질과 맞춤 처방)은 원본처럼 "* " 접두어, 굵기는 보통.
   ::before 로 붙여서 모바일 드로어(텍스트를 읽어 생성)에는 별표가 딸려가지 않게 한다. */
.nav-drop__lead a::before{ content:"* "; }

/* ---------------------------------------------- 7. 모바일 내비 (≤1000px) */
.nav-toggle{
  display:none;
  position:fixed; top:20px; right:12px; z-index:90;
  width:44px; height:44px;
  padding:0; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.nav-toggle svg{ display:block; width:24px; height:20px; fill:var(--ink) }

.drawer{
  position:fixed; inset:0; z-index:100;
  display:none; flex-direction:column;
  background:var(--panel);
  font-family:var(--font-sans);
}
.drawer.is-open{ display:flex }
.drawer__head{
  flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.drawer__head img{ display:block; height:34px; width:auto }
.drawer__close{
  width:44px; height:44px;
  border:0; background:none; cursor:pointer;
  font-size:26px; color:var(--muted);
}
.drawer__body{ flex:1; overflow-y:auto; padding:4px 0 28px }
.drawer__foot{
  flex:none; display:flex; gap:8px;
  padding:14px 18px 22px;
  border-top:1px solid var(--line);
}
.drawer__foot a{
  flex:1; display:flex; align-items:center; justify-content:center;
  height:52px; border-radius:8px;
  font-size:16px; font-weight:600;
}
.drawer__foot .btn-tel{ background:var(--accent-soft); color:var(--ink) }
.drawer__foot .btn-visit{ background:var(--accent); color:#fff }

.drawer__group{ border-bottom:1px solid var(--line) }
.drawer__trigger{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  padding:17px 20px;
  border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--font-serif);
  font-size:17px; font-weight:600; color:var(--ink);
}
.drawer__trigger span{
  font-family:var(--font-sans); font-size:14px; color:var(--accent);
  transition:transform .2s ease;
}
.drawer__group.is-open .drawer__trigger span{ transform:rotate(180deg) }
.drawer__items{ display:none; flex-wrap:wrap; gap:8px; padding:0 20px 18px }
.drawer__group.is-open .drawer__items{ display:flex }
.drawer__items a{
  display:inline-flex; align-items:center;
  min-height:38px; padding:0 13px;
  border:1px solid var(--line); border-radius:999px;
  font-size:14.5px; color:var(--ink);
}
.drawer__items a:active,
.drawer__items a.is-current{ background:var(--accent); color:#fff; border-color:var(--accent) }
.drawer__items b{
  flex-basis:100%;
  margin-top:6px;
  font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--gold);
}

/* 페이지 헤더 배너(02~09)와 푸터는 각 페이지 마크업이 원본 그대로 들고 있다.
   10개 페이지에서 완전히 동일하므로 별도 컴포넌트 CSS 를 두지 않는다. */

/* ========================================================== 8. 반응형 */

/* 내비 전환 — 전 페이지 공통 1000px */
@media (max-width:1000px){
  #site-nav{ display:none }
  .nav-toggle{ display:flex }
}

/* 본문 쪽 반응형(제목 크기 등)은 각 페이지 <style> 이 원본 그대로 가지고 있다.
   여기서는 공통 헤더만 다룬다 (원본의 header > div / header img 규칙에 해당). */
@media (max-width:768px){
  .site-header__inner{ padding-left:18px; padding-right:70px }
  .site-logo img{ height:44px }
}

/* 모바일 하단 고정 "상담 문의하기" (site-nav.js 가 body 끝에 넣음). 768px 이하에서만 보인다 */
.call-bar{ display:none }
@media (max-width:768px){
  .call-bar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding-bottom:env(safe-area-inset-bottom);
    background:#2E733B; box-shadow:0 -6px 20px -10px rgba(0,0,0,.35);
  }
  .call-bar a{
    display:flex; align-items:center; justify-content:center; gap:8px;
    height:60px; color:#fff; font-size:17px; font-weight:700; letter-spacing:-.2px; text-decoration:none;
  }
  .call-bar a svg{ width:20px; height:20px; flex:none }
  body.has-call-bar{ padding-bottom:calc(60px + env(safe-area-inset-bottom)) }
  /* 메인의 TOP 버튼은 바 위로 */
  body.has-call-bar [aria-label="빠른 상담"]{ bottom:calc(76px + env(safe-area-inset-bottom)) !important }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

@media print{
  .site-header, .nav-toggle, .drawer{ display:none !important }
}

/* ========================================================== 9. 모바일 보정 (2026-10-18 문서 "이호석한의원_mo 수정") */
/* 푸터: 휴대폰이 전화번호·사업자번호를 자동 링크로 바꾸며 녹색(a 색)이 되던 것 → 주변 글자색 */
footer a, footer a[x-apple-data-detectors]{ color:inherit !important; text-decoration:none !important; font:inherit !important }
@media (max-width:1000px){
  /* 제목도 의미 단위(balance) 대신 자연 줄바꿈 — 단어 단위는 유지 */
  body h1, body h2, body h3, body h4{ text-wrap:wrap !important }
}
@media (max-width:640px){
  /* 섹션 제목 조금 키우고 굵게 / 바로 아래 설명 17px·좁은 행간 */
  body section:not(.jy-sec) h2{ font-size:clamp(28px,8.4vw,34px) !important; font-weight:700 !important; line-height:1.38 !important }
  body section:not(.jy-sec) h2 + p{ font-size:17px !important; line-height:1.6 !important }
  /* 의미 단위 줄바꿈 숨김(자연 줄바꿈) */
  .br-d{ display:none }
  body section:not(.jy-sec) p, body section:not(.jy-sec) li, body section:not(.jy-sec) div{ word-break:keep-all; overflow-wrap:anywhere }
  /* 상담 문의 / 진료시간·위치 버튼 같은 길이 */
  .btn-pair{ flex-direction:column; align-items:center }
  .btn-pair > a{ width:min(280px,100%) }
  /* 대표전화 줄: 번호 왼쪽, 상담 버튼 오른쪽 작게 */
  .contact-row{ flex-wrap:nowrap !important; padding:18px 18px !important; gap:12px !important }
  .contact-row > a{ padding:10px 14px !important; font-size:13.5px !important; white-space:nowrap }
  .contact-row p:last-child{ font-size:21px !important }
  /* 사상체질 사례 카드 가운데 */
  .sa-case > div{ text-align:center }
  /* 질환 페이지: 제목 키우고 가운데, 작성자 프로필은 PC처럼 아이콘 옆 가로 배치 */
  body.page--article article h1, body.page--article article h1[class]{ font-size:clamp(30px,8.6vw,36px) !important; text-align:center }
  .jy-author{ flex-wrap:nowrap !important; align-items:center !important }
  .jy-author > div{ flex:1 1 auto; min-width:0 }
  /* 공지·FAQ 페이지 번호: 화살표가 숫자 양옆에 한 줄로 */
  nav[aria-label="페이지 이동"]{ flex-wrap:nowrap !important; gap:6px !important }
  nav[aria-label="페이지 이동"] > div:nth-child(2){ gap:2px !important }
  nav[aria-label="페이지 이동"] a, nav[aria-label="페이지 이동"] span[aria-current]{ width:32px !important; height:32px !important; font-size:14px !important }
  /* 칼럼 카테고리 버튼 모바일 숨김 */
  [role="tablist"][aria-label="칼럼 카테고리"]{ display:none !important }
}
/* 메인 진료시간·전화·주소 블록 모바일 가운데 정렬 (2026-10-18) */
@media (max-width:640px){
  div:has(> h2#contact-title){ text-align:center }
  div:has(> h2#contact-title) table{ margin-left:auto !important; margin-right:auto !important }
  div:has(> h2#contact-title) ul, div:has(> h2#contact-title) li{ text-align:center !important }
  div:has(> h2#contact-title) a{ margin-left:auto; margin-right:auto }
}
/* 질환 페이지 하단 원장 소개 + 상담 버튼 박스, 모바일 (2026-10-18) */
@media (max-width:640px){
  .page--article article > div:has(> a[href^="tel:"]){ justify-content:center !important; padding:24px 20px !important; gap:18px !important }
  .page--article article > div:has(> a[href^="tel:"]) > div{ width:100% }
  .page--article article > div:has(> a[href^="tel:"]) p > span:first-child{ font-size:19px !important }
  .page--article article > div:has(> a[href^="tel:"]) p > span + span{ font-size:15px !important }
  .page--article article > div:has(> a[href^="tel:"]) p + p{ font-size:16px !important; line-height:1.55 !important }
  .page--article article > div:has(> a[href^="tel:"]) > a[href^="tel:"]{ padding:12px 24px !important; font-size:16px !important }
}
/* 소개 페이지 첫 제목 "여러 병원을 다녀도, 같은 증상이…" 모바일 굵게 (2026-10-18) */
@media (max-width:640px){ h1#hero-title.h1-40{ font-weight:700 !important } }