@charset "UTF-8";
/* ==========================================================================
   내포더봄치과 — 공용 스타일시트
   index.html / treatment.html / visit.html 3개 페이지가 공유합니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root{
  /* ★★ 색은 전부 여기서만 바꾸면 5개 페이지에 한 번에 반영됩니다 ★★
     아래 값만 고치고 저장 → 브라우저 새로고침(Ctrl+Shift+R)

     --forest      가장 어두운 배경 (히어로, 하단바)
     --green-deep  메인 딥그린 (제목, 버튼, 푸터 로고 글씨)
     --green       중간 초록 (체크 표시, 링크)
     --sage        연한 초록 (테두리, 숫자)
     --sage-soft   더 연한 초록
     --gold        섹션 라벨, 장식선, 활성 표시
     --gold-soft   위 색의 밝은 버전 (어두운 배경 위에서 사용)
     --accent      '한 번 더' 같은 문장 속 강조 글씨
     --accent-soft 위 색의 밝은 버전 (어두운 배경 위에서 사용)
     --btn         주 버튼 배경 (네이버 예약 등)
     --btn-hover   주 버튼에 마우스 올렸을 때
     --btn-text    주 버튼 글씨색
     --cream       기본 배경색
     --cream-deep  번갈아 쓰는 배경색 (한 칸 걸러 나오는 섹션)
     --ink         가장 진한 본문 글씨
     --ink-soft    일반 본문 글씨
     --ink-sub     메인 문구 아래 보조 설명 */
  --forest:#041c14;         /* 가장 어두운 배경 */
  --green-deep:#00271a;     /* 메인 딥그린 */
  --green:#4e7a60;          /* 중간 초록 */
  --sage:#77917c;           /* 연한 초록 */
  --sage-soft:#e7eee7;      /* 더 연한 초록 */
  --gold:#355744;           /* 섹션 라벨 · 장식선 */
  --gold-soft:#c7d3c7;      /* 섹션 라벨 (밝은 버전) */
  --accent:#b65e36;         /* 강조 글씨 */
  --accent-soft:#e0a57a;    /* 강조 글씨 (밝은 버전) */
  --btn:#b65e36;            /* 주 버튼 배경 */
  --btn-hover:#9e4f2f;      /* 주 버튼 (마우스 올릴 때) */
  --btn-text:#ffffff;       /* 주 버튼 글씨색 */
  --cream:#f4f0e8;          /* 기본 배경색 */
  --cream-deep:#e7ddd0;     /* 번갈아 쓰는 배경색 */
  --card:#f1ebe1;           /* 모든 밝은 카드 배경 (같은 역할 = 같은 색) */
  --photo:#efe9e0;          /* 사진 영역 배경 */
  --ink:#1f2b24;            /* 가장 진한 본문 글씨 */
  --ink-soft:#3e433d;       /* 일반 본문 글씨 */
  --ink-sub:#6b6a63;        /* 보조 설명 글씨 */

  /* 다크(forest) 섹션 위에서 쓰는 파생 색 */
  --on-dark:#d9dfd8;        /* 어두운 배경 위 본문 */
  --on-dark-soft:#f7f6f2;   /* 어두운 배경 위 작은 글 */
  --on-dark-line:rgba(197,212,193,.22);

  /* 서체 — 가독성을 위해 디스플레이·본문·UI 모두 프리텐다드로 통일 */
  --sans:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --display:var(--sans);

  /* 타입 스케일 — 유동값이라 데스크톱 재정의 블록이 필요 없습니다 */
  --fs-xs:.82rem;
  --fs-sm:.92rem;
  --fs-base:clamp(1.02rem, .98rem + .22vw, 1.16rem);
  --fs-lead:clamp(1.12rem, 1.04rem + .38vw, 1.34rem);
  --fs-h4:clamp(1.28rem, 1.12rem + .72vw, 1.72rem);
  --fs-h3:clamp(1.42rem, 1.22rem + .92vw, 2.02rem);
  --fs-h2:clamp(1.68rem, 1.36rem + 1.5vw, 2.5rem);
  --fs-h1:clamp(2.05rem, 1.55rem + 2.5vw, 3.5rem);

  /* 텍스처 — 종이 결(그레인). 얼룩·캔버스·패턴 없이 균일한 미세 노이즈만.
     타일이 너무 작으면 모바일 고해상도에서 결이 사라지므로 200px로 크게 잡습니다. */
  /* numOctaves를 1로 낮춰 큰 구름·얼룩 없이 미세 입자만 남깁니다 */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-size:180px;
  --grain-on-light:.065;   /* 아이보리·베이지 배경 */
  --grain-on-dark:.045;    /* 딥그린 배경 — 아주 약하게 */

  /* 간격·치수 */
  --measure:32em;          /* 본문 최대 폭 — 국문 한 줄 30자 내외 */
  --measure-wide:44em;
  --header-h:74px;
  --maxw:1240px;           /* 전체 콘텐츠 폭 — 이미지·카드·섹션은 넓게 */
  --measure-text:46em;     /* 줄글만 있는 영역 — 읽기 편한 폭으로 따로 제한 */
  --pad-block:clamp(78px, 9vw, 138px);
  --r-sm:6px;              /* 버튼 — 살짝 둥글게 */
  --r-md:10px;             /* 카드 */
  --r-lg:16px;             /* 큰 패널 */
}

/* --------------------------------------------------------------------------
   2. 리셋 & 베이스
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}

html{
  font-size:100%;                 /* 사용자 브라우저 글꼴 설정을 존중합니다 */
  scroll-behavior:auto;
  background:var(--cream);        /* 페이지 이동 시 흰색 깜빡임 방지 */
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:1.75;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lock{overflow:hidden}

/* ── 공통 종이 결 텍스처 ─────────────────────────────────────────────────
   면마다 붙이는 방식(absolute)이라 스크롤 시 다시 그리지 않습니다.
   그래서 예전의 fixed 오버레이와 달리 모바일에서도 끄지 않습니다.
   밝은 면은 multiply(결이 눌린 종이), 어두운 면은 screen(필름 그레인). */
.tex{position:relative;isolation:isolate}
.tex::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);
  background-size:var(--grain-size) var(--grain-size);
  opacity:var(--grain-on-light);
  mix-blend-mode:multiply;
}
.tex.on-dark::after{
  opacity:var(--grain-on-dark);
  mix-blend-mode:screen;
}
/* 텍스처 위로 내용이 올라오게 */
.tex > *{position:relative;z-index:1}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}

/* 키보드 포커스는 항상 보이게 */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

section{scroll-margin-top:calc(var(--header-h) + 12px)}
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

.inwrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,4vw,56px);width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   3. 섹션 골격
   -------------------------------------------------------------------------- */
/* 모든 주요 면에 같은 계열의 결을 깝니다 (섹션별 강약만 다르게) */
.block{padding:var(--pad-block) 0;position:relative;isolation:isolate}
.block::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);
  background-size:var(--grain-size) var(--grain-size);
  opacity:var(--grain-on-light);
  mix-blend-mode:multiply;
}
.block > .inwrap{position:relative;z-index:1}

.block.alt{background:var(--cream-deep)}

/* 딥그린 면 — 결을 아주 약하게, screen으로 필름 그레인처럼 */
.block.forest{background:var(--forest);color:var(--on-dark);overflow:hidden}
.block.forest::after{
  opacity:var(--grain-on-dark);
  mix-blend-mode:screen;
}

/* 섹션 헤드 --------------------------------------------------------------- */
/* 라벨 = 골드 사용처 ① */
.label{
  font-family:var(--display);font-weight:600;
  font-size:16px;letter-spacing:.01em;
  color:var(--gold);margin-bottom:14px;
  display:inline-flex;align-items:center;gap:11px;
}
/* 장식선 — 좌우 길이·간격을 정확히 대칭으로 */
.label::before,
.label.center::after{content:"";flex:none;width:28px;height:1px;background:var(--gold);opacity:.75}
.label.center{justify-content:center}
/* 다크(forest) 배경에서는 밝은 골드로 대비 확보 */
.block.forest .label{color:var(--gold-soft)}

.sec-head{margin-bottom:clamp(38px,5vw,58px);max-width:var(--measure-wide)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{
  font-family:var(--display);font-weight:800;
  font-size:var(--fs-h2);line-height:1.36;letter-spacing:-.01em;
  color:var(--green-deep);word-break:keep-all;text-wrap:balance;
}
.block.forest .sec-head h2{color:var(--cream)}
/* 헤드라인 강조 = 골드 사용처 ② */
.sec-head h2 em{font-style:normal;color:var(--accent);white-space:nowrap}
.block.forest .sec-head h2 em{color:var(--accent-soft)}
.sec-head .lead{
  margin-top:16px;font-size:var(--fs-lead);color:var(--ink-soft);
  max-width:var(--measure);word-break:keep-all;
}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
.block.forest .sec-head .lead{color:var(--on-dark-soft)}

/* 스크롤 리빌 */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .reveal.show{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   4. 이미지 플레이스홀더
   실사진을 넣을 때는 class에 has-img를 추가하고
   style="background-image:url('파일명.jpg')" 를 지정하세요.
   -------------------------------------------------------------------------- */
.ph{
  position:relative;width:100%;overflow:hidden;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--cream-deep);border:1px dashed var(--sage);
  background-image:
    linear-gradient(to top right,transparent calc(50% - .8px),color-mix(in srgb, var(--sage) 45%, transparent) calc(50% - .8px),color-mix(in srgb, var(--sage) 45%, transparent) calc(50% + .8px),transparent calc(50% + .8px)),
    linear-gradient(to top left, transparent calc(50% - .8px),color-mix(in srgb, var(--sage) 45%, transparent) calc(50% - .8px),color-mix(in srgb, var(--sage) 45%, transparent) calc(50% + .8px),transparent calc(50% + .8px));
}
.ph span{
  position:relative;z-index:1;background:var(--cream);color:var(--green);
  font-size:var(--fs-xs);font-weight:600;padding:6px 13px;
  border-radius:var(--r-sm);border:1px solid var(--sage-soft);
}
.ph.dark{background:rgba(255,255,255,.05);border-color:var(--on-dark-line)}
.ph.dark span{background:rgba(255,255,255,.07);color:var(--sage-soft);border-color:var(--on-dark-line)}
.ph.r-16x9{aspect-ratio:16/9}
.ph.r-4x3{aspect-ratio:4/3}
.ph.r-3x4{aspect-ratio:3/4}
.ph.r-1x1{aspect-ratio:1/1}
.ph.r-a4{aspect-ratio:1/1.414}   /* 자격증 A4 세로 */
.ph.has-img{border:none;background-size:cover;background-position:center;background-repeat:no-repeat}
.ph.has-img.contain{background-size:contain;background-color:#fff}
.ph.has-img span{display:none}
/* 실사진 크롭 보정 — 인물 얼굴·손·기구가 잘리면 사진별로 하나만 추가해 기준점을 옮기세요 */
.ph.has-img.pos-top{background-position:center 18%}
.ph.has-img.pos-bottom{background-position:center 82%}
.ph.has-img.pos-left{background-position:22% center}
.ph.has-img.pos-right{background-position:78% center}
/* 일러스트 이미지 — 원본 배경(웜크림)이 섹션 배경보다 밝아 사각형 자국이 남습니다.
   multiply로 흰 계열을 뒤 배경에 녹여서, 섹션 색을 바꿔도 자동으로 따라오게 합니다. */
.ph.blend{mix-blend-mode:multiply;background-color:transparent}

/* --------------------------------------------------------------------------
   5. 버튼
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;font-weight:600;font-size:1rem;line-height:1.2;
  border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
  transition:background .22s, color .22s, border-color .22s;
}
/* 주 CTA = 테라코타(예약) */
.btn-gold{background:var(--btn);color:var(--btn-text)}
.btn-gold:hover{background:var(--btn-hover)}
.btn-gold:active{filter:brightness(.94)}
/* 보조 채움 CTA = 그린(블로그) — 예약보다 한 단계 아래 */
.btn-green{background:var(--gold);color:var(--on-dark-soft)}
.btn-green:hover{background:color-mix(in srgb, var(--gold) 86%, #f7f6f2)}
.btn-green:active{filter:brightness(.94)}
.btn-line{background:transparent;color:var(--on-dark-soft);border:1px solid rgba(247,246,242,.45)}
.btn-line:hover{background:rgba(247,243,233,.12)}
/* URL이 아직 없는 링크 — app.js가 hidden과 함께 부여, 컴포넌트별 display를 이겨야 함 */
.link-unavailable[hidden]{display:none}
/* 예약 URL이 없어 예약 버튼이 숨겨지면 전화 버튼이 첫 행 전체를 사용 */
.shared-bottom-cta .cta-btns [data-link="booking"][hidden]+.btn-line{grid-column:1 / -1}
.btn-ink{background:var(--green-deep);color:var(--cream)}
.btn-ink:hover{background:var(--forest)}
.btn-ghost{background:transparent;color:var(--green-deep);border:1px solid var(--sage)}
.btn-ghost:hover{background:var(--green-deep);color:var(--cream);border-color:var(--green-deep)}

/* --------------------------------------------------------------------------
   6. 헤더 / 내비게이션
   -------------------------------------------------------------------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-h);
  background:var(--cream);border-bottom:1px solid color-mix(in srgb, var(--sage) 30%, transparent);
  transition:background .3s, border-color .3s;
}
/* 메인 첫 화면 — 헤더를 영상 위에 투명하게 얹고 글자를 밝게.
   스크롤해서 영상을 벗어나면 body.scrolled가 붙어 원래 웜베이지 헤더로 돌아옵니다. */
body.hero-top header{
  background:transparent;border-bottom-color:transparent;
}
body.hero-top header .brand strong{color:#fff;text-shadow:0 1px 12px rgba(4,28,20,.45)}
body.hero-top header nav.gnb a{color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(4,28,20,.45)}
body.hero-top header nav.gnb a:hover,
body.hero-top header nav.gnb a.active,
body.hero-top header nav.gnb a.current{color:#fff}
body.hero-top header .menu_but span{background:#fff}
/* 모바일 메뉴가 열리면 시트가 밝은 면이므로 투명 헤더를 해제 */
body.hero-top.menu-open header{background:var(--cream)}
body.hero-top.menu-open header .brand strong{color:var(--green-deep);text-shadow:none}
body.hero-top.menu-open header .menu_but span{background:var(--forest)}
header .inwrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;min-height:44px}
/* logo.png 원본 파일에 아이콘 주변 여백이 많아, 확대해 여백을 잘라냅니다 */
.brand .mark-crop{width:50px;height:50px;border-radius:7px;overflow:hidden;flex:none;display:flex}
.brand .mark-crop img{width:100%;height:100%;object-fit:cover;transform:scale(1.6);display:block}
.brand strong{font-family:var(--display);font-size:25px;line-height:1.1;font-weight:800;color:var(--green-deep);letter-spacing:-.01em}

nav.gnb ul{display:flex;list-style:none;gap:clamp(20px,2.6vw,40px);align-items:center}
nav.gnb a{
  position:relative;display:inline-block;padding:6px 0;
  font-weight:500;font-size:1rem;color:rgba(38,43,39,.78);
  white-space:nowrap;transition:color .2s;
}
/* 활성 상태 = 골드 사용처 ④ */
nav.gnb a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
nav.gnb a:hover,
nav.gnb a.active,
nav.gnb a.current{color:var(--green-deep)}
nav.gnb a:hover::after,
nav.gnb a.active::after,
nav.gnb a.current::after{transform:scaleX(1)}

.menu_but{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:none;cursor:pointer;z-index:1100}
.menu_but span{width:24px;height:2px;background:var(--forest);border-radius:2px;transition:.3s}
body.menu-open .menu_but span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .menu_but span:nth-child(2){opacity:0}
body.menu-open .menu_but span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-dim{position:fixed;inset:0;background:rgba(5,33,21,.55);opacity:0;visibility:hidden;transition:.3s;z-index:999}
body.menu-open .nav-dim{opacity:1;visibility:visible}
/* 모바일 메뉴가 열리면 배경 스크롤 잠금 */
body.menu-open{overflow:hidden}

/* --------------------------------------------------------------------------
   7. 히어로 (index) / 페이지 배너 (하위 페이지)
   -------------------------------------------------------------------------- */
.hero{
  /* 영상이 첫 화면을 꽉 채웁니다. 헤더는 위에 투명하게 얹히므로 상단 여백 없음 */
  position:relative;margin-top:0;
  /* 화면을 완전히 덮지 않고 아래 섹션이 살짝 보이게 남깁니다 */
  height:92svh;min-height:540px;
  /* 촬영 영상의 크롭 기준점 — 얼굴·진료 장면이 잘리면 이 값만 조정
     (PC와 모바일을 따로 지정할 수 있습니다) */
  --hero-focus:center;
  --hero-focus-m:center 30%;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  object-position:var(--hero-focus);
  /* 영상·포스터가 모두 없을 때도 빈 흰 화면 대신 딥그린 면 유지 */
  background:linear-gradient(150deg,var(--green-deep),var(--forest));
}
/* .62로 낮춰 영상이 보이게 하고, 대비는 text-shadow로 확보 */
.hero-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(94deg, rgba(5,33,21,.72), rgba(5,33,21,.40) 52%, rgba(5,33,21,.14));
}
/* 히어로 결 — 딥그린 면과 같은 계열, 아주 약하게 */
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--grain);
  background-size:var(--grain-size) var(--grain-size);
  opacity:var(--grain-on-dark);
  mix-blend-mode:screen;
}
/* 헤더가 위에 겹치므로 그 높이만큼 밀어 실제 보이는 영역의 가운데에 오게 합니다 */
.hero-copy{position:relative;z-index:3;height:100%;padding-top:var(--header-h);display:flex;flex-direction:column;justify-content:center}
.hero-copy .rule{width:48px;height:2px;background:var(--gold);margin-bottom:24px}
.hero-copy h1{
  font-family:var(--display);font-weight:800;
  font-size:var(--fs-h1);line-height:1.28;letter-spacing:-.015em;
  color:var(--cream);text-shadow:0 2px 18px rgba(5,33,21,.55);
  word-break:keep-all;text-wrap:balance;
}
/* '한 번 더' 글자 위 강조점(드러냄표) */
.hero-copy h1 em{
  font-style:normal;color:var(--accent-soft);white-space:nowrap;
  -webkit-text-emphasis:'·';
  text-emphasis:'·';
  -webkit-text-emphasis-position:over right;
  text-emphasis-position:over right;
}
.hero-copy p{
  margin-top:20px;font-size:var(--fs-lead);color:rgba(247,243,233,.9);
  max-width:26em;text-shadow:0 1px 12px rgba(5,33,21,.6);word-break:keep-all;
}
.hero-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
/* 영상 위에서는 테두리만으로 버튼이 잘 안 보여, 어두운 면을 깔아 형태를 잡아줍니다.
   영상 장면이 밝아져도 글자가 묻히지 않습니다. */
.hero-cta .btn-line{
  background:rgba(4,28,20,.34);
  border-color:rgba(247,246,242,.75);
  backdrop-filter:blur(2px);
}
.hero-cta .btn-line:hover{background:rgba(4,28,20,.52);border-color:#fff}

/* 하위 페이지 배너 — 영상 없음, 38vh */
.page-hero{
  position:relative;margin-top:var(--header-h);
  min-height:38vh;display:flex;align-items:center;
  padding:clamp(48px,7vw,80px) 0;
  background:var(--forest);color:var(--on-dark);overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);
  background-size:var(--grain-size) var(--grain-size);
  opacity:var(--grain-on-dark);
  mix-blend-mode:screen;
}
.page-hero .inwrap{position:relative;z-index:1}
.page-hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,1.5rem + 1.9vw,2.9rem);line-height:1.32;letter-spacing:-.015em;
  color:var(--cream);word-break:keep-all;text-wrap:balance;
}
.page-hero p{margin-top:16px;font-size:var(--fs-lead);color:var(--on-dark-soft);max-width:var(--measure);word-break:keep-all}
.crumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:rgba(247,243,233,.5);margin-bottom:14px}
.crumb a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;margin:-11px -8px}
.crumb a:hover{color:var(--sage-soft)}
.crumb span[aria-hidden]{opacity:.6}

/* --------------------------------------------------------------------------
   8. 컴포넌트
   -------------------------------------------------------------------------- */

/* 8-1. 브랜드 문장 (meaning) — 사이트의 핵심 히어로 선언문 */
#meaning{min-height:500px;display:flex;align-items:center}
#meaning .inwrap{width:100%}
.statement{max-width:900px;margin:0 auto;text-align:center;padding-top:52px}
.statement .label{margin-bottom:14px}
.statement-main{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.85rem,1.5rem + 1.8vw,2.9rem);line-height:1.32;letter-spacing:-.01em;
  color:var(--green-deep);word-break:keep-all;
}
.statement-main .ln-medium{font-weight:500}
.statement em{font-style:normal;font-weight:700;color:var(--accent);white-space:nowrap}
/* 짧은 마무리 구절이 혼자 떨어지지 않게 묶습니다 */
.statement .nb{white-space:nowrap}
.statement-sub{
  margin-top:25px;font-family:var(--sans);font-weight:400;
  font-size:20px;line-height:1.6;
  color:var(--ink-sub);word-break:keep-all;
}

/* 8-2. 철학 4분할 */
.about-state{text-align:center;max-width:700px;margin:0 auto clamp(52px,6vw,72px)}
.about-state .label{margin-bottom:10px}
.about-state h2{
  font-family:var(--display);font-weight:700;
  font-size:calc(var(--fs-h2) * .97);line-height:1.28;letter-spacing:-.01em;
  color:var(--green-deep);word-break:keep-all;text-wrap:balance;
  /* '…지키는 치료를 / 먼저 고민합니다' 두 줄 배치를 유지하는 폭 */
  max-width:560px;margin:0 auto;
}
.about-state h2 em{font-style:normal;color:var(--accent);white-space:nowrap}
.about-state p{
  margin-top:16px;color:var(--ink-soft);
  font-size:calc(var(--fs-lead) + 1px);line-height:1.78;word-break:keep-all;
}

/* 표처럼 보이던 십자 분할을 독립 카드 4장으로 */
.phil{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  max-width:1000px;margin:0 auto;
}
.phil-item{
  background:var(--cream-deep);
  border:1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius:13px;
  padding:clamp(26px,3vw,36px) clamp(24px,2.6vw,34px);
  box-shadow:0 8px 24px rgba(0,39,26,.04);
  position:relative;isolation:isolate;overflow:hidden;
}
/* 카드 안쪽 결은 바깥 배경보다 약하게 */
.phil-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);
  background-size:var(--grain-size) var(--grain-size);
  opacity:calc(var(--grain-on-light) * .55);
  mix-blend-mode:multiply;
}
.phil-item > *{position:relative;z-index:1}
/* alt 섹션 위에서는 카드가 한 톤 밝게 떠야 구분됩니다 */
.block.alt .phil-item{background:var(--cream)}
.phil-item .n{
  font-family:var(--display);font-weight:500;color:var(--sage);
  font-size:27px;line-height:1;display:block;margin-bottom:16px;
}
.phil-item h3{
  font-family:var(--display);font-weight:700;
  font-size:24px;line-height:1.4;color:var(--green-deep);
  margin:0 0 20px;word-break:keep-all;text-wrap:balance;
}
.phil-item p{
  color:var(--ink-soft);font-size:17px;line-height:1.8;
  font-weight:400;word-break:keep-all;
}

/* 8-3. 보존 교차 행 */
.pres-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.6vw,60px);align-items:center;margin-bottom:clamp(44px,6vw,72px)}
.pres-row:last-child{margin-bottom:0}
.pres-row.flip .pres-text{order:2}
.pres-text h3{font-family:var(--display);font-weight:800;font-size:var(--fs-h3);line-height:1.42;color:var(--cream);word-break:keep-all;text-wrap:balance}
.pres-text h3 span{color:var(--accent-soft)}
.pres-text p{margin-top:16px;color:var(--on-dark);font-size:var(--fs-base);line-height:1.78;max-width:var(--measure);word-break:keep-all}
.pres-text .mini{margin-top:14px;font-size:var(--fs-xs);color:rgba(247,243,233,.42);line-height:1.6}

/* 설명형 진료 — 병원소개 카드와 반복되지 않게 카드 없는 열린 4열 */
.explain-steps{display:grid;grid-template-columns:repeat(4,1fr)}
.explain-step{padding:0 clamp(20px,2.3vw,30px)}
.explain-step:first-child{padding-left:0}
.explain-step:last-child{padding-right:0}
.explain-step+.explain-step{border-left:1px solid rgba(53,87,68,.16)}
.explain-step .n{display:block;font-size:15px;font-weight:600;color:var(--sage);letter-spacing:.04em;margin-bottom:14px}
.explain-step h3{
  font-family:var(--display);font-weight:700;font-size:var(--fs-h4);
  color:var(--green-deep);margin-bottom:12px;word-break:keep-all;
}
.explain-step p{color:var(--ink-soft);font-size:var(--fs-base);line-height:1.75;word-break:keep-all}

/* 8-4. 의료진 — 사진 45% / 소개 55% 2단 */
/* 슬림 배너 — 빈 딥그린 띠 대신 브레드크럼만 담은 낮은 스트립 */
.page-hero.slim{min-height:0;padding:15px 0}
.page-hero.slim .crumb{margin-bottom:0}
/* 히어로가 더 위에서 시작하도록 상단 여백 축소 */
#profile{padding-top:clamp(40px,4.5vw,60px)}
.doctor{display:grid;grid-template-columns:45fr 55fr;gap:clamp(48px,6.2vw,84px);align-items:center}
/* 사진 뒤 연한 웜베이지 면 — 페이지 배경과 층 분리 */
.doctor-photo{background:var(--card);border-radius:16px;padding:clamp(12px,1.4vw,18px)}
.doctor-photo .ph{border-radius:10px;background-position:center top}
.doctor-info .label{margin-bottom:10px}
.doctor-info h1,
.doctor-info h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.4rem,1.9rem + 1.9vw,3rem);line-height:1.1;letter-spacing:-.02em;
  color:var(--green-deep);margin-bottom:20px;
}
/* 자격은 본문에 섞지 않고 짧은 태그 줄로 */
.cred-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.cred-tags li{
  font-size:var(--fs-sm);font-weight:600;color:var(--green-deep);
  background:var(--card);border:1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  border-radius:999px;padding:8px 16px;word-break:keep-all;
}
/* 원장 메시지 — 독립 강조 블록 */
.doctor-quote{
  font-family:var(--display);font-weight:500;font-style:normal;
  font-size:clamp(1.2rem,1.05rem + .5vw,1.42rem);line-height:1.62;
  color:var(--green-deep);background:var(--card);
  border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  padding:24px 28px;margin:0;word-break:keep-all;text-wrap:balance;
}
/* 인용문 아래 일반 소개문 — 홍보 문구처럼 굵지 않게 */
.doctor-intro{
  margin-top:22px;font-size:16.5px;font-weight:400;line-height:1.75;
  color:var(--ink-soft);word-break:keep-all;max-width:34em;
}
/* 진료 범위 — 카드가 아닌 열린 4열 + 얇은 세로 구분선 */
.field-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.field-item{padding:0 clamp(20px,2.3vw,30px)}
.field-item:first-child{padding-left:0}
.field-item:last-child{padding-right:0}
.field-item+.field-item{border-left:1px solid rgba(53,87,68,.16)}
.field-item .fnum{display:block;font-size:15px;font-weight:600;color:var(--sage);letter-spacing:.04em;margin-bottom:14px}
.field-item h3{
  font-family:var(--display);font-weight:700;font-size:var(--fs-h4);
  color:var(--green-deep);margin-bottom:12px;word-break:keep-all;
}
.field-item p{color:var(--ink-soft);font-size:var(--fs-base);line-height:1.75;word-break:keep-all}

/* 전문성 — 카드가 아니라 정돈된 정보 블록 3열 */
#career{padding:calc(var(--pad-block) * .82) 0}
.career{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,48px)}
.career-group .cnum{
  display:block;font-size:15px;font-weight:600;color:var(--sage);
  letter-spacing:.04em;margin-bottom:8px;
}
.career-group h3,
.career-group h4{
  font-size:var(--fs-base);color:var(--green-deep);font-weight:700;letter-spacing:0;
  padding-bottom:12px;margin-bottom:20px;
  border-bottom:1px solid rgba(53,87,68,.16);
}
.career-group ul{list-style:none;display:grid;gap:17px}
.career-group li{
  color:var(--ink-soft);font-size:var(--fs-base);line-height:1.65;word-break:keep-all;
}
/* 핵심 경력은 살짝만 강조 */
.career-group li.hl{font-weight:600;color:var(--ink)}

/* 8-5. 전문의 수련과정 비교 — 이 사이트의 시그니처 도표 */
.spec{margin-top:clamp(52px,7vw,92px)}
/* 기본 과정(좁게) → 연결 캡슐 → 추가 전문 수련(넓게) — 경쟁이 아닌 연속 과정 */
.spec-grid{
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(120px,150px) minmax(340px,1.1fr);
  gap:24px;align-items:start;max-width:940px;margin:0 auto;
}
/* 두 과정을 잇는 연결 캡슐 — 왼쪽 면허 취득과 오른쪽 첫 단계 사이 높이에 정렬 */
.spec-connector{
  align-self:center;justify-self:center;box-sizing:border-box;
  /* 왼쪽 '면허 취득' 박스와 오른쪽 첫 단계 사이의 수직 중심에 오도록 소폭 하향 */
  margin-top:70px;
  min-width:120px;text-align:center;
  display:flex;flex-direction:column;gap:4px;
  background:rgba(119,145,124,.13);
  border:1px solid rgba(53,87,68,.20);
  border-radius:12px;padding:12px 14px;
}
.spec-connector__eyebrow{font-size:13.5px;line-height:1.3;font-weight:600;color:var(--green)}
.spec-connector__main{font-size:15.5px;line-height:1.3;font-weight:700;color:var(--green-deep);white-space:nowrap}
.spec-connector__m{display:none}
.spec-col{display:flex;flex-direction:column;align-items:stretch}
.spec-tag{text-align:center;font-family:var(--display);font-weight:700;font-size:var(--fs-base);padding:11px 8px;border-radius:30px;margin-bottom:18px}
.spec-tag.muted{background:color-mix(in srgb, var(--sage) 22%, transparent);color:var(--ink-soft)}
.spec-tag.hl{background:var(--green-deep);color:var(--cream)}
.spec-step{
  display:flex;align-items:center;gap:11px;
  background:var(--cream);border:1px solid color-mix(in srgb, var(--sage) 40%, transparent);
  border-radius:var(--r-md);padding:13px 16px;
  font-size:var(--fs-base);color:var(--ink);line-height:1.4;
}
.block.alt .spec-step{background:var(--cream-deep)}
.spec-step b{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;border-radius:50%;
  font-family:var(--display);font-size:.86rem;font-weight:700;color:#fff;
}
.muted-col .spec-step b{background:var(--sage)}
.hl-col .spec-step b{background:var(--green-deep)}
.spec-arr{width:0;height:0;margin:7px auto;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--sage)}
.spec-final{text-align:center;font-family:var(--display);font-weight:700;font-size:var(--fs-base);padding:13px 16px;border-radius:var(--r-md)}
.spec-final.muted{background:color-mix(in srgb, var(--sage) 30%, transparent);color:var(--ink-soft)}
.spec-final.hl{background:var(--green-deep);color:var(--cream)}
.spec-note{max-width:var(--measure-wide);margin:clamp(28px,4vw,44px) auto 0;text-align:center;color:var(--ink-soft);font-size:var(--fs-base);line-height:1.72;word-break:keep-all}
.spec-figure{text-align:center;font-family:var(--display);font-weight:700;font-size:var(--fs-h4);color:var(--green-deep);margin-top:14px;word-break:keep-all;text-wrap:balance}

/* 8-6. 자격 자료 — 담백한 자료 구역, 여백은 일반 섹션보다 낮게.
   실제 자격증 이미지가 들어오기 전까지 hidden 속성으로 비노출 */
#credentials[hidden]{display:none}
#credentials{padding:calc(var(--pad-block) * .78) 0}
.certs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px);max-width:760px;margin:clamp(28px,3.8vw,42px) auto 0}
.cert{margin:0}
/* 자격증 원본이 잘리지 않게 — 실제 이미지가 들어가면 contain으로 표시 */
/* 자격 서류는 잘리면 안 되므로 전체를 보여주고, 남는 여백은 종이색으로 채웁니다 */
#credentials .ph.has-img{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#fff;border-radius:8px}
.cert figcaption{text-align:center;margin-top:14px;color:var(--ink-soft);font-size:var(--fs-sm);word-break:keep-all}
.block.forest .cert figcaption{color:var(--sage-soft)}

/* 8-7. 증상 체크 */
.symptoms{
  background:var(--cream);border:1px solid color-mix(in srgb, var(--sage) 45%, transparent);
  border-radius:var(--r-lg);padding:clamp(24px,4vw,44px);
  margin-top:clamp(28px,4vw,44px);
}
.block.alt .symptoms{background:var(--cream-deep)}
.symptoms h3{font-family:var(--display);font-weight:700;font-size:var(--fs-h4);color:var(--green-deep);margin-bottom:22px;text-align:center;word-break:keep-all;text-wrap:balance}
.symptoms ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:13px 30px;max-width:760px;margin:0 auto}
.symptoms li{position:relative;padding-left:30px;color:var(--ink);font-size:var(--fs-base);line-height:1.5;word-break:keep-all}
.symptoms li::before{
  content:"";position:absolute;left:0;top:.42em;width:19px;height:19px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}
.symptoms-note{text-align:center;color:var(--ink-soft);margin-top:24px;font-size:var(--fs-base);word-break:keep-all}

/* 8-8. 진료과목 / 장비 2단 레이아웃 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,48px);align-items:center}
.split .info .cat-tag{
  display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
  color:var(--green);margin-bottom:10px;
}
.block.forest .split .info .cat-tag{color:var(--sage-soft)}
.split .info h2{font-family:var(--display);font-weight:800;font-size:var(--fs-h3);letter-spacing:-.01em;color:var(--green-deep);margin-bottom:14px;word-break:keep-all;text-wrap:balance}
.block.forest .split .info h2{color:var(--cream)}
.split .info p{color:var(--ink-soft);font-size:var(--fs-base);line-height:1.78;max-width:var(--measure);word-break:keep-all}
.block.forest .split .info p{color:var(--on-dark)}
/* 치료 진행 순서 — 원리를 단계로 보여주는 소형 리스트 (신경치료·임플란트) */
.split .info .steps-cap{margin-top:20px;font-size:13.5px;font-weight:600;letter-spacing:.03em;color:var(--sage)}
.steps{list-style:none;counter-reset:tstep;margin-top:10px;display:grid;gap:9px}
.steps li{
  counter-increment:tstep;position:relative;padding-left:31px;
  color:var(--ink-soft);font-size:15px;line-height:1.55;word-break:keep-all;
}
.steps li::before{
  content:counter(tstep);position:absolute;left:0;top:.08em;
  width:21px;height:21px;border-radius:50%;
  background:color-mix(in srgb, var(--sage) 22%, transparent);
  color:var(--green-deep);font-size:.72rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

.feats{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px}
.feats span{position:relative;padding-left:19px;color:var(--green);font-size:var(--fs-base);font-weight:600;white-space:nowrap}
.feats span::before{content:"✓";position:absolute;left:0;top:0;color:var(--sage);font-weight:700}
.block.forest .feats span{color:var(--sage-soft)}
.block.forest .feats span::before{color:var(--sage)}

/* 세로 스택 (treatment.html 진료과목) — 짝수 항목은 이미지·글 좌우 반전, 항목 사이 구분선으로 구획 */
.stack{display:grid;gap:clamp(52px,7vw,88px)}
.stack > .split:nth-child(even) > .info{order:2}
.stack > .split:not(:first-child){border-top:1px solid rgba(30,86,65,.15);padding-top:clamp(44px,5.6vw,68px)}

/* 페이지 내 앵커 바 */
.anchorbar{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-bottom:clamp(38px,5vw,56px);
}
.anchorbar a{
  display:inline-flex;align-items:center;min-height:50px;
  padding:9px 21px;border-radius:999px;line-height:1.3;
  border:1px solid color-mix(in srgb, var(--sage) 55%, transparent);
  background:color-mix(in srgb, var(--gold) 7%, transparent);   /* 라벨이 아니라 탭으로 보이게 */
  font-size:1.06rem;font-weight:600;color:var(--ink-soft);transition:.2s;
  white-space:nowrap;
}
.anchorbar a:hover{background:var(--green-deep);color:var(--cream);border-color:var(--green-deep)}
/* 스크롤 위치에 따른 현재 탭 */
.anchorbar a.active{background:var(--green-deep);color:var(--cream);border-color:var(--green-deep)}

/* 좁은 화면에서는 줄바꿈 대신 가로 스크롤 한 줄로.
   3줄까지 늘어나면 배너 아래 150px 가까이 낭비됩니다. */
@media (max-width:720px){
  .anchorbar{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    width:100vw;max-width:100vw;position:relative;left:50%;margin-left:-50vw;
    padding:0 clamp(22px,4vw,56px);
  }
  .anchorbar::-webkit-scrollbar{display:none}
  .anchorbar a{flex:none}
  /* 진료공간 페이지(탭 3개)는 스크롤 없이 화면 폭에 고정 */
  #interior .anchorbar{
    flex-wrap:nowrap;overflow:visible;justify-content:center;
    position:static;width:auto;max-width:none;left:auto;margin-left:0;padding:0;gap:7px;
  }
  #interior .anchorbar a{flex:1 1 auto;justify-content:center;min-height:46px;padding:9px 6px;font-size:.95rem}
}
@media (max-width:360px){
  #interior .anchorbar a{font-size:.88rem;padding:9px 4px}
}

/* 진료과목 — 페이지를 3개 대그룹(주요 진료/디지털/턱관절)으로 묶는 그룹 헤더 */
.tx-group{display:flex;align-items:center;gap:14px;margin-bottom:clamp(30px,4vw,44px)}
.tx-group-num{font-size:15px;font-weight:600;color:var(--sage);letter-spacing:.06em}
.tx-group h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.45rem,1.2rem + 1vw,1.85rem);
  color:var(--green-deep);word-break:keep-all;white-space:nowrap;
}
.tx-group::after{content:"";flex:1;height:1px;background:rgba(53,87,68,.16)}

/* 8-9. 캐러셀 (진료공간 투어 전용) */
.car{position:relative}
.car-viewport{overflow:hidden;position:relative}
.car-track{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1);touch-action:pan-y}
.car-slide{flex:0 0 100%;min-width:0}
.car-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:48px;height:64px;background:none;border:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:color .2s,transform .2s;
}
.car-arrow svg{width:32px;height:32px;stroke-width:1.5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.car-arrow:hover{color:var(--gold-soft)}
.car-arrow.prev{left:14px}
.car-arrow.next{right:14px}
.car-arrow.prev:hover{transform:translateY(-50%) translateX(-3px)}
.car-arrow.next:hover{transform:translateY(-50%) translateX(3px)}

/* 투어 타임라인 내비 */
.tour{position:relative}
.tour-nav{position:relative;display:flex;gap:6px;margin-bottom:34px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tour-nav::-webkit-scrollbar{display:none}
.tour-line{position:absolute;left:0;top:11px;width:0;height:1px;background:rgba(197,212,193,.3);z-index:0}
.tour-step{
  position:relative;z-index:1;flex:1 1 0;min-width:max-content;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:none;border:none;cursor:pointer;padding:5px 8px 0;
}
.tour-step .dot{
  width:13px;height:13px;border-radius:50%;
  background:var(--cream-deep);border:1.5px solid var(--sage);
  box-shadow:0 0 0 3px var(--cream-deep);transition:.25s;
}
.tour-step .txt{font-size:var(--fs-sm);font-weight:500;color:var(--ink-soft);white-space:nowrap;transition:color .2s}
.tour-step:hover .dot{border-color:var(--green)}
.tour-step:hover .txt{color:var(--green-deep)}
/* 활성 상태 = 골드 사용처 ④ */
.tour-step.on .dot{background:var(--gold);border-color:var(--gold);transform:scale(1.18)}
.tour-step.on .txt{color:var(--green-deep);font-weight:700}
.tour .car-slide{padding:0 6px}

/* 8-10. 오시는 길 */
.dir-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:clamp(34px,4.5vw,48px)}
.dir-photo{margin:0}
.dir-photo figcaption{margin-top:10px;font-size:var(--fs-sm);color:var(--on-dark);display:flex;align-items:center;gap:8px}
.dir-photo figcaption b{
  flex:none;width:19px;height:19px;border-radius:50%;
  background:var(--sage-soft);color:var(--forest);
  font-size:.7rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
/* 지도 + 통합 방문정보 패널 — 카드 3장 대신 좌우 한 덩어리 */
.contact-overview{
  display:grid;grid-template-columns:minmax(0,58fr) minmax(340px,42fr);
  gap:20px;align-items:stretch;margin-bottom:clamp(34px,4.5vw,48px);
}
.contact-map{border:1px solid var(--on-dark-line);border-radius:14px;overflow:hidden;min-height:500px;position:relative}
.contact-map .ph{display:block;width:100%;height:100%;border-radius:0}
/* 지도 이미지 — 표시된 글씨가 잘리지 않도록 전체가 보이게(contain) */
.map-slot.has-img{background-size:cover;background-repeat:no-repeat;background-position:center}
.visit-info-panel{
  background:rgba(255,255,255,.045);border:1px solid var(--on-dark-line);
  border-radius:13px;padding:24px;
  display:flex;flex-direction:column;
}
.vip-block+.vip-block{margin-top:12px;padding-top:12px;border-top:1px solid var(--on-dark-line)}
.visit-info-panel h3{font-size:var(--fs-sm);color:var(--gold-soft);font-weight:700;letter-spacing:.02em;margin-bottom:8px}
.visit-info-panel p{color:var(--cream);font-size:var(--fs-base);line-height:1.62;word-break:keep-all}
.vip-block a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin:0 -2px;font-size:calc(var(--fs-base) + 3px);font-weight:700}
.vip-block a:hover{color:var(--gold-soft)}
/* 도로명주소 아래 지번 병기 — 예전 주소로 찾는 분들을 위한 보조 줄 */
.visit-info-panel .vip-jibun{margin-top:6px;font-size:var(--fs-sm);color:var(--sage)}
/* 진료시간 아래 작은 주차 안내 */
.vip-parking{margin-top:10px;font-size:var(--fs-sm);color:var(--gold-soft);font-weight:600}
.vip-links{margin-top:auto;padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vip-links a{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  background:rgba(247,246,242,.09);
  border:1px solid rgba(247,246,242,.5);border-radius:var(--r-sm);
  font-size:15px;font-weight:600;color:var(--on-dark-soft);
  transition:background .2s,border-color .2s;
}
.vip-links a:hover{background:rgba(247,246,242,.18);border-color:rgba(247,246,242,.7)}
/* 플레이스 URL이 연결되기 전(href="#")에는 비활성으로 표시 */
.vip-links a[data-link][href="#"]{opacity:.5;pointer-events:none}

.dir-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:clamp(34px,4.5vw,48px)}
/* 안내 패널 — 다크 배경 위 은은한 정보 블록 */
.dir-col{
  background:rgba(255,255,255,.045);
  border:1px solid var(--on-dark-line);
  border-radius:13px;padding:clamp(24px,2.6vw,32px);
}
.dir-col h3{
  font-family:var(--display);font-weight:700;font-size:var(--fs-h4);color:var(--cream);
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--on-dark-line);
}
.dir-col ol,.dir-col ul{list-style:none;display:grid;gap:11px}
.dir-col li{position:relative;padding-left:27px;color:var(--on-dark);font-size:var(--fs-base);line-height:1.6;word-break:keep-all}
.dir-col ol{counter-reset:s}
.dir-col ol li{counter-increment:s}
.dir-col ol li::before{
  content:counter(s);position:absolute;left:0;top:.3em;
  width:19px;height:19px;border-radius:50%;
  background:var(--sage-soft);color:var(--forest);font-size:.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.dir-col ul li::before{content:"";position:absolute;left:5px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--sage)}
.dir-col b{color:var(--sage-soft)}

.time-table{width:100%;border-collapse:collapse}
.time-table td{padding:5px 0;border-bottom:1px solid var(--on-dark-line);font-size:var(--fs-sm);color:var(--on-dark)}
.time-table td:last-child{text-align:right}
.time-table tr.off td{color:var(--sage)}

/* 8-11. 페이지 하단 CTA */
.cta{
  background:var(--green-deep);color:var(--cream);
  padding:clamp(58px,7vw,88px) 0;text-align:center;
  position:relative;isolation:isolate;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);
  background-size:var(--grain-size) var(--grain-size);
  opacity:var(--grain-on-dark);
  mix-blend-mode:screen;
}
.cta > .inwrap{position:relative;z-index:1}
.cta h2{font-family:var(--display);font-weight:800;font-size:var(--fs-h3);color:var(--cream);word-break:keep-all;text-wrap:balance}
.cta p{margin-top:14px;color:rgba(247,243,233,.78);font-size:var(--fs-base);max-width:var(--measure);margin-left:auto;margin-right:auto;word-break:keep-all}
.cta-btns{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* CTA 버튼은 전역 버튼보다 살짝 슬림하게 */
.cta .btn{padding:13px 34px}
/* 3순위 정보성 링크 — 버튼이 아니라 조용한 텍스트 링크 줄 */
.cta-sub{margin-top:18px;display:flex;gap:14px;justify-content:center;align-items:center}
.cta-sub a{
  color:var(--on-dark-soft);opacity:.8;font-size:15px;font-weight:500;
  min-height:44px;display:inline-flex;align-items:center;padding:0 4px;
  transition:opacity .2s;
}
.cta-sub a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.cta-sub span{color:var(--on-dark-soft);opacity:.3}

/* 좌우 분할형 CTA — 왼쪽 문구 / 오른쪽 행동 버튼 (visit) */
.cta-split{text-align:left}
.cta-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,4.5vw,64px);align-items:center}
.cta-split .cta-copy p{margin-left:0;margin-right:0}
.cta-actions{display:flex;flex-direction:column;align-items:flex-start}
.cta-split .cta-btns{margin-top:0;justify-content:flex-start}
.cta-split .cta-sub{margin-top:16px;justify-content:flex-start}
/* 전화는 메인 보조 CTA — 아웃라인을 또렷하게 */
.cta-split .cta-btns .btn-line{border-color:rgba(247,246,242,.5)}
@media (max-width:860px){
  .cta-grid{grid-template-columns:1fr;gap:24px}
  .cta-split{text-align:center}
  .cta-actions{align-items:center}
  .cta-split .cta-btns,.cta-split .cta-sub{justify-content:center}
  .cta-split .cta-copy p{margin-left:auto;margin-right:auto}
}
/* 글자 길이가 달라도 버튼 폭이 들쭉날쭉하지 않게 최소 폭을 맞춥니다 */
.cta-btns .btn{min-width:190px}

/* 공통 하단 CTA(.shared-bottom-cta) — 의료진/진료과목/진료공간 3곳 전용.
   좌 52% 라벨+문구 / 연한 세로 구분선 / 우 48% 버튼 2개 + 보조 링크 2개 */
.cta.shared-bottom-cta{padding:78px 0}
.shared-bottom-cta .cta-grid{grid-template-columns:52fr 1px 48fr;column-gap:32px}
.shared-bottom-cta .cta-label{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;letter-spacing:.14em;color:var(--gold-soft);margin:0 0 14px}
.shared-bottom-cta .cta-label::before{content:"";width:22px;height:1px;background:color-mix(in srgb, var(--gold-soft) 55%, transparent)}
.shared-bottom-cta h2{color:var(--on-dark-soft);line-height:1.32;min-height:2.64em}
.shared-bottom-cta .cta-copy > p:not(.cta-label){color:var(--on-dark);margin-top:16px;max-width:26em}
.cta-divider{width:1px;height:70%;min-height:110px;align-self:center;background:rgba(247,246,242,.10)}
.shared-bottom-cta .cta-actions{align-items:flex-start}
/* 2+1 그리드 — 첫 행: 예약/전화, 둘째 행: 오시는 길 확인하기(전체 폭) */
.shared-bottom-cta .cta-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 13px;width:min(100%,413px)}
.shared-bottom-cta .cta-btns .btn{min-width:0;width:100%;box-sizing:border-box;height:54px;padding:0 10px}
/* 딥그린 위에서 테두리만으로는 칸이 잘 안 보여, 옅은 면을 함께 깔아 형태를 드러냅니다 */
.shared-bottom-cta .cta-btns .btn-line{background:rgba(247,246,242,.10);border-color:rgba(247,246,242,.62)}
.shared-bottom-cta .cta-btns .btn-line:hover{background:rgba(247,246,242,.18)}
.shared-bottom-cta .cta-btns .cta-directions{
  grid-column:1 / -1;height:46px;gap:8px;
  background:rgba(247,246,242,.06);color:var(--gold-soft);
  border:1px solid rgba(247,246,242,.42);
}
.shared-bottom-cta .cta-btns .cta-directions:hover{background:rgba(247,246,242,.13);border-color:rgba(247,246,242,.5)}
@media (max-width:860px){
  .cta.shared-bottom-cta{padding:66px 0}
  .shared-bottom-cta .cta-grid{grid-template-columns:1fr}
  .cta-divider{display:none}
  .shared-bottom-cta .cta-actions{align-items:center}
  .shared-bottom-cta .cta-label{justify-content:center}
  .shared-bottom-cta .cta-copy > p:not(.cta-label){margin-inline:auto}
  .shared-bottom-cta .cta-btns{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:430px}
}
@media (max-width:600px){
  .shared-bottom-cta .inwrap{padding-inline:23px}
}
@media (max-width:340px){
  .shared-bottom-cta .cta-btns{grid-template-columns:1fr}
}

/* 8-12. 페이지 카드 (index → 하위 페이지 안내) — 비대칭 벤토
   왼쪽 55%에 대표 카드 1장, 오른쪽 45%에 카드 2장 */
/* 빈 베이지 띠의 원인 — 앞 섹션(#explain) 하단 패딩과 #more 상단 패딩이
   겹쳐 최대 260px의 빈 면이 생겼습니다. 양쪽을 절반 수준으로 줄입니다. */
#explain{padding-bottom:clamp(40px,4vw,54px)}
#more{padding:clamp(40px,4vw,54px) 0 clamp(78px,8vw,124px)}
/* 제목과 카드를 한 덩어리로 — 간격 축소 */
#more .sec-head{margin-bottom:clamp(42px,3.4vw,50px)}
#more .sec-head h2{font-size:clamp(2.05rem,1.6rem + 1.9vw,3rem);line-height:1.28}

.pagecards{
  display:grid;grid-template-columns:57fr 43fr;
  /* 오른쪽 두 칸을 완전히 같게 두지 않아 기계적인 안내판 느낌을 덜어냅니다 */
  grid-template-rows:1.06fr 1fr;gap:17px;
}
.pagecard-lead{grid-row:1 / span 2}

.pagecard{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid color-mix(in srgb, var(--gold) 16%, transparent);
  border-radius:14px;padding:clamp(32px,3.2vw,38px);
  box-shadow:0 10px 30px rgba(0,39,26,.035);
  transition:border-color .22s, transform .22s;
}
/* 진료공간 카드만 아주 미세하게 진한 웜베이지 */
/* 같은 역할의 카드는 전부 같은 최종 색(--card) — 개별 진한 베이지 오버라이드 제거 */
.pagecard:hover{border-color:color-mix(in srgb, var(--gold) 42%, transparent);transform:translateY(-2px)}
.pagecard h3{font-family:var(--display);font-weight:700;font-size:28px;color:var(--green-deep);margin-bottom:15px;word-break:keep-all;text-wrap:balance}
.pagecard p{color:#363c37;font-size:18px;line-height:1.75;word-break:keep-all}
/* 링크는 항상 카드 하단에 */
.pagecard .go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:22px;color:var(--gold);font-weight:700;font-size:var(--fs-sm)}
.pagecard:hover .go{color:var(--green-deep)}

/* 대표 카드 — 왼쪽 글 / 오른쪽 인물, 사진은 카드 오른쪽 끝까지 채웁니다 */
.pagecard-lead{
  --lead-pad:clamp(38px,3.7vw,46px);
  display:grid;grid-template-columns:59fr 41fr;
  gap:clamp(24px,2.4vw,34px);align-items:center;
  background:var(--card);          /* 텍스트 영역도 다른 카드와 같은 색 */
  min-height:545px;padding:var(--lead-pad);
  overflow:hidden;position:relative;
}
/* padding-top의 절반만큼 내려가 시각적 세로 중앙에 가까워집니다 */
.pagecard-lead .pagecard-body{display:flex;flex-direction:column;justify-content:center;padding-top:26px}
.pagecard-lead h3{font-size:31px;margin-bottom:20px}
.pagecard-lead p{font-size:17.5px;line-height:1.78}
.pagecard-lead p b{display:inline-block;margin-bottom:8px;font-weight:700;color:var(--green-deep)}
/* 링크는 글 블록 바로 아래에 (하단 고정 아님) */
.pagecard-lead .go{margin-top:24px;padding-top:0}
/* 세로를 카드 높이만큼 쓰기 때문에 머리만 잘리지 않고 상반신이 들어옵니다 */
.pagecard-photo{
  align-self:stretch;
  margin:calc(var(--lead-pad) * -1) calc(var(--lead-pad) * -1) calc(var(--lead-pad) * -1) 0;
  background-size:cover;background-position:center 18%;
  background-color:var(--photo);
}

/* 진료항목 — 알약 버튼이 아니라 얇은 텍스트 구분 */
.pagecard-tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;
  font-size:var(--fs-sm);color:var(--ink-sub);
}
.pagecard-tags li{position:relative}
.pagecard-tags li+li::before{content:"";position:absolute;left:-8px;top:.42em;width:1px;height:.85em;background:color-mix(in srgb, var(--gold) 38%, transparent)}

/* 네이버 링크 — 떠 있는 작은 버튼 2개 대신 전체 폭 정보 바 */
/* 네이버 링크 — 목적지가 다른 독립 버튼 2개 (한 덩어리 바 아님) */
.naver-bar{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  width:93.5%;margin:38px auto 0;
}
.naver-bar a{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--green-deep);
  border-radius:13px;padding:12px 28px;min-height:62px;
  transition:transform .2s, filter .2s;
}
.naver-bar a.place{background:var(--gold)}
.naver-bar .txt{display:flex;flex-direction:column;gap:3px;text-align:left}
.naver-bar small{font-size:11.5px;font-weight:700;letter-spacing:.08em;line-height:1.3;color:var(--on-dark-soft);opacity:.72}
.naver-bar strong{font-size:16px;font-weight:600;line-height:1.4;color:var(--on-dark-soft);word-break:keep-all}
.naver-bar .arr{color:var(--on-dark-soft);opacity:.85;font-size:17px;transition:transform .2s}
.naver-bar a:hover{transform:translateY(-2px);filter:brightness(1.09)}
.naver-bar a:hover .arr{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   9. 푸터
   -------------------------------------------------------------------------- */
footer{
  background:var(--forest);color:var(--on-dark);padding:56px 0 100px;
  position:relative;isolation:isolate;overflow:hidden;
}
footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);
  background-size:var(--grain-size) var(--grain-size);
  opacity:var(--grain-on-dark);
  mix-blend-mode:screen;
}
footer > .inwrap{position:relative;z-index:1}
footer .f-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:30px}
footer .f-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}
footer .f-brand .mark-crop{width:40px;height:40px;border-radius:6px;overflow:hidden;flex:none;display:flex}
footer .f-brand .mark-crop img{width:100%;height:100%;object-fit:cover;transform:scale(1.6);display:block}
footer .f-brand strong{font-family:var(--display);font-weight:800;color:var(--on-dark-soft);font-size:1.2rem}
footer .f-col h3{font-size:var(--fs-sm);color:var(--gold-soft);font-weight:700;margin-bottom:8px}
footer .f-col p{font-size:var(--fs-sm);line-height:1.72;color:var(--on-dark)}
footer .f-col p a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin:0 -2px}
footer .f-col a:hover{color:var(--on-dark-soft)}
footer .f-top{margin-bottom:38px}   /* SNS 버튼 제거 후 소개문구-법적문구 간격 보정 */
footer .legal{border-top:1px solid var(--on-dark-line);padding-top:22px;font-size:var(--fs-xs);color:var(--on-dark-soft);opacity:.62;line-height:1.8}
/* 데스크톱에서는 병원 정보와 같은 줄, 모바일에서는 아래 줄로 내려갑니다 */
footer .legal .lg-biz::before{content:" · "}
footer .legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:0 -4px;text-decoration:underline;text-underline-offset:3px}
footer .legal a:hover{color:var(--on-dark-soft);opacity:1}

/* --------------------------------------------------------------------------
   10. 퀵메뉴 / 모바일 하단바
   -------------------------------------------------------------------------- */
/* 원형 72px → 라운드 스퀘어 52px. 그림자도 절반으로. */
.quick{position:fixed;right:20px;bottom:28px;z-index:880;display:flex;flex-direction:column;gap:8px}
.quick a{
  width:62px;height:62px;border-radius:16px;
  background:var(--green-deep);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:.71rem;font-weight:600;letter-spacing:-.02em;
  box-shadow:0 3px 10px rgba(5,33,21,.14);
  transition:background .2s,color .2s;
}
.quick a:hover{background:var(--btn);color:var(--btn-text)}
.quick a.top{background:var(--cream);color:var(--green-deep);border:1px solid var(--sage-soft);box-shadow:none}
.quick svg{width:24px;height:24px}

/* 열 개수를 고정하지 않고 실제 표시 항목 수만큼 균등 분할 — 예약이 숨겨지면 자동 3열 */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:900;background:var(--forest);border-top:1px solid rgba(247,246,242,.08);padding-bottom:env(safe-area-inset-bottom);grid-auto-flow:column;grid-auto-columns:1fr}
/* 항목 = 2행 그리드: 아이콘 행 28px 고정 + 라벨 행 — 네 항목의 기준선 통일 */
.bottom-nav a{display:grid;grid-template-rows:28px auto;justify-items:center;align-items:center;row-gap:6px;padding:8px 4px;font-size:.68rem;line-height:1;color:var(--on-dark);font-weight:500}
.bottom-nav svg{width:24px;height:24px;display:block;flex-shrink:0}
.bottom-nav span{line-height:1.2}
/* 예약 = 주 액션(테라코타), 블로그 = 웜오렌지로 한 단계 아래 구분 */
.bottom-nav a.hl{color:var(--btn)}
.bottom-nav a[data-link="blog"]{color:var(--accent-soft)}

/* --------------------------------------------------------------------------
   11. 반응형
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  /* 벤토가 좁아지면 1열로 — 카드가 세로로 눌리지 않게 */
  .pagecards{grid-template-columns:1fr;grid-template-rows:auto}
  /* 진료 범위·설명형 진료 — 태블릿 2×2, 세로선은 열 사이에만·행 사이엔 가로 헤어라인 */
  .field-grid,.explain-steps{grid-template-columns:1fr 1fr;row-gap:30px}
  .field-item:nth-child(odd),.explain-step:nth-child(odd){padding-left:0;border-left:none}
  .field-item:nth-child(even),.explain-step:nth-child(even){padding-right:0;border-left:1px solid rgba(53,87,68,.16)}
  .field-item:nth-child(n+3),.explain-step:nth-child(n+3){border-top:1px solid rgba(53,87,68,.16);padding-top:26px}
  /* 태블릿 이하 — 글 위 / 사진 아래. 세로를 넉넉히 줘서 얼굴만 잘리지 않게 */
  .pagecard-lead{grid-row:auto;grid-template-columns:1fr;min-height:0;padding-bottom:0}
  .naver-bar{width:100%}
  .pagecard-lead .pagecard-photo{
    aspect-ratio:16/10;margin:4px calc(var(--lead-pad) * -1) 0;
    background-position:center 12%;
  }
  .menu_but{display:flex}
  nav.gnb{
    position:fixed;top:0;right:0;height:100%;width:auto;min-width:220px;max-width:320px;
    background:var(--cream);padding:calc(var(--header-h) + 26px) 28px 28px;
    transform:translateX(100%);transition:transform .32s ease;z-index:1050;
    overflow-y:auto;border-left:1px solid color-mix(in srgb, var(--sage) 30%, transparent);box-shadow:-8px 0 30px rgba(0,0,0,.12);
  }
  body.menu-open nav.gnb{transform:translateX(0)}
  nav.gnb ul{flex-direction:column;gap:8px;align-items:stretch}
  nav.gnb a{padding:14px 18px;font-size:1.05rem;border-radius:8px;white-space:nowrap}
  nav.gnb a::after{display:none}
  nav.gnb a:hover,nav.gnb a.active,nav.gnb a.current{background:color-mix(in srgb, var(--sage) 18%, transparent)}
  .car-arrow.prev{left:6px}
  .car-arrow.next{right:6px}
}

@media (max-width:860px){
  /* 세로로 긴 화면에서 16:9 영상을 100svh로 채우면 좌우가 대부분 잘려나갑니다.
     높이를 낮춰 잘리는 양을 줄이고, 대신 아래 섹션이 더 보이게 합니다. */
  .hero{height:64svh;min-height:420px}
  .doctor,.split,.pres-row{grid-template-columns:1fr;gap:28px}
  /* 사진이 작아지지 않게 화면 폭을 그대로 쓰고, 이력은 1열 연속 배치 */
  .doctor-photo .ph{max-width:none}
  .career{grid-template-columns:1fr;gap:34px}
  /* 경력 영역 사이 얇은 구분선 — 접지 않고 전부 펼쳐 보여줍니다 */
  .career-group+.career-group{border-top:1px solid rgba(53,87,68,.16);padding-top:30px}
  .pres-row.flip .pres-text{order:0}
  .split > .ph{order:-1}
  .stack > .split:nth-child(even) > .info{order:0}
  .dir-steps{grid-template-columns:1fr;gap:16px}
  /* 방문정보 패널 먼저, 지도는 그다음 (지도 높이는 모바일용으로 축소) */
  .contact-overview{grid-template-columns:1fr}
  .contact-map{order:2;min-height:0;height:clamp(340px,95vw,380px)}
  .visit-info-panel{order:1}
}

@media (max-width:920px){
  /* 좁은 태블릿 — 고정 최소폭(280/340px)이 화면을 넘치지 않게 완화 */
  .spec-grid{grid-template-columns:minmax(0,.9fr) auto minmax(0,1.1fr);gap:16px}
}
@media (max-width:760px){
  /* 세로 하나의 연속 과정: 기본 과정 → 연결 캡슐(아래 화살표) → 전문 수련 */
  .spec-grid{grid-template-columns:1fr;max-width:400px;gap:0}
  .spec-connector{width:100%;max-width:280px;min-width:0;margin:20px auto}
  .spec-connector__pc{display:none}
  .spec-connector__m{display:inline}
}

@media (max-width:640px){
  /* 모바일 푸터 하단 — 세 줄(병원 정보/개인정보처리방침/카피라이트)로 정리,
     Copyright 풀 문구와 가운데 점은 숨김 */
  footer .legal{display:grid;gap:8px;line-height:1.55}
  footer .legal br,footer .legal .lg-mid,footer .legal .lg-full{display:none}
  footer .legal .lg-line{font-size:14px}
  footer .legal .lg-biz{font-size:13px;opacity:.85}
  footer .legal .lg-biz::before{content:none}
  footer .legal a{font-size:14px;font-weight:600;justify-self:start}
  footer .legal .lg-copy{font-size:12px;opacity:.8}
  .certs{grid-template-columns:1fr;max-width:330px}
  .symptoms ul{grid-template-columns:1fr;gap:12px}
  /* 진료 범위·설명형 진료 — 모바일 1열, 항목 사이 가로 헤어라인 */
  .field-grid,.explain-steps{grid-template-columns:1fr;row-gap:0}
  .field-grid .field-item,.explain-steps .explain-step{padding:0;border-left:none;border-top:none}
  .field-grid .field-item+.field-item,.explain-steps .explain-step+.explain-step{margin-top:24px;padding-top:24px;border-top:1px solid rgba(53,87,68,.16)}
}

@media (max-width:600px){
  :root{--header-h:70px;--pad-block:68px;--mobile-bottom-nav-height:66px}
  /* 텍스처는 면마다 absolute로 깔려 스크롤 성능 부담이 없으므로 모바일에서도 유지.
     투명도만 올리지 않고 입자 크기를 20% 키워 결이 실제로 보이게 합니다. */
  :root{--grain-on-light:.08;--grain-on-dark:.05;--grain-size:216px}
  .brand{gap:9px}
  .brand .mark-crop{width:40px;height:40px}
  .brand strong{font-size:22px;line-height:1.1}
  /* 좁은 화면에서는 최소 폭을 풀어 버튼이 화면 밖으로 나가지 않게.
     flex-basis 0 — 글자 수가 달라도 두 버튼 폭을 똑같이 나눕니다 */
  .cta-btns .btn{min-width:150px;flex:1 1 0;max-width:100%}
  .hero{max-height:none}
  /* 모바일 — PC보다 전체를 조금 더 어둡게 해 제목·버튼 대비 확보 */
  .hero-overlay{background:linear-gradient(180deg,rgba(5,33,21,.42),rgba(5,33,21,.76))}
  .hero-video{object-position:var(--hero-focus-m)}
  .pagecards{gap:14px}
  .pagecard{padding:26px 24px}
  .pagecard h3{font-size:23px}
  .pagecard p{font-size:15.5px}
  .pagecard-lead{--lead-pad:24px;padding:26px 24px 0}
  .pagecard-lead h3{font-size:24px}
  .pagecard-lead p{font-size:16px}
  /* 모바일은 세로로 긴 비율 — 머리만 남는 crop 방지.
     위 1024px 규칙(.pagecard-lead .pagecard-photo)보다 특정성이 낮으면 덮이므로 같은 형태로 씁니다 */
  .pagecard-lead .pagecard-photo{aspect-ratio:4/5;margin:18px -24px 0;background-position:center top}
  .naver-bar{grid-template-columns:1fr;gap:12px}
  .naver-bar a{min-height:56px;padding:16px 22px}
  .phil{grid-template-columns:1fr;gap:13px}
  .phil-item{padding:26px 24px}
  .phil-item .n{font-size:22px;margin-bottom:14px}
  .phil-item h3{font-size:21px;margin-bottom:18px}
  .phil-item p{font-size:16px;line-height:1.78}
  .dir-photos{grid-template-columns:1fr;gap:24px}
  .quick{display:none}
  .bottom-nav{display:grid}
  .car-arrow svg{width:28px;height:28px}

  /* ── 모바일 여백 체계 — 배경은 full-width, 콘텐츠만 안쪽으로 ──────────
     일반 섹션 20~24px / 철학 문구 28px / 카드 안 20px 차등 적용 */
  .inwrap{padding-inline:clamp(20px,5.5vw,24px)}

  /* 히어로 — 글이 가장자리에 붙지 않게 */
  .hero-copy{padding-inline:24px}
  .hero-copy p{max-width:330px}
  .hero-cta{gap:11px}

  /* 철학 문구 — 데스크톱용 세로 채우기(min-height·optical padding)를 해제하고
     4줄 안팎으로 자연스럽게 흐르게 조정 */
  #meaning{min-height:0;display:block;padding:88px 0 100px}
  #meaning .inwrap{padding-inline:23px}
  .statement{padding-top:0}
  .statement .label{font-size:14px;margin-bottom:34px}
  .statement-main{
    font-size:25px;line-height:1.42;letter-spacing:-.03em;
    max-width:358px;margin-inline:auto;
  }
  .statement-sub{
    font-size:17.5px;line-height:1.75;color:var(--ink-sub);
    max-width:330px;margin-inline:auto;margin-top:44px;
  }

  /* 병원소개 — 텍스트 블록은 카드보다 좁게 */
  #about .inwrap{padding-inline:24px}
  .about-state h2,.about-state p{max-width:330px;margin-inline:auto}
  .about-state p{margin-top:12px}

  /* 01~04 카드 — 안쪽 패딩을 줄여 글이 답답하지 않게 */
  .phil-item{padding:21px 20px}
  .phil-item p{line-height:1.7}

  /* 딥그린 전문의 소개 — 문단 폭 제한 + 간격 확보 */
  #preserve .inwrap{padding-inline:24px}
  .pres-text h3{max-width:330px}
  .pres-text p{max-width:330px;line-height:1.7;margin-top:18px}
  .pres-text .mini{margin-top:16px}

  /* 하단 고정 바 클리어런스 — body가 아니라 어두운 푸터에 주어
     푸터와 고정바 사이에 밝은 베이지 띠가 생기지 않게 합니다 */
  body{padding-bottom:0}
  footer{padding-bottom:calc(var(--mobile-bottom-nav-height) + 24px + env(safe-area-inset-bottom))}
}

@media (max-width:768px){
  .tour .car-viewport{width:100vw;max-width:100vw;position:relative;left:50%;margin-left:-50vw}
  .tour .car-arrow.prev{left:14px}
  .tour .car-arrow.next{right:14px}
}

/* --------------------------------------------------------------------------
   12. 모션 최소화 설정 존중
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1!important;transform:none!important}
  .car-track{transition:none}
}

/* --------------------------------------------------------------------------
   13. 인쇄
   -------------------------------------------------------------------------- */
@media print{
  header,.quick,.bottom-nav,.car-arrow,.tour-nav,.nav-dim{display:none!important}
  /* 인쇄에서는 결·배경을 모두 제거 */
  .block::after,.cta::after,footer::after,.hero::after,.page-hero::before,.tex::after{display:none!important}
  body{padding:0;background:#fff}
  .block.forest,.cta,footer,.page-hero{background:#fff;color:#000}
  .block.forest .sec-head h2,.dir-col h3,.visit-info-panel p,
  footer .f-col p,footer .f-brand strong,footer .legal{color:#000}
}