@font-face{
  font-family:"HS활공명조";
  src:url("../font/HSHwalkongSerif-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* =========================================================
   봄 한의원 (안산 상록구 석호로 54) — 초록 CI 버전
   브랜드색은 로고 원본에서 뽑았다: #4f6d39 올리브 그린
   원칙: 간판·로고와 같은 색으로 · 첫 화면에서 할 일이 바로 보이게
   ========================================================= */

:root{
  /* ── 색 (로고에서 추출) ───────────────── */
  --leaf:      #4f6d39;   /* 브랜드 그린 — 로고 원본색 */
  --leaf-deep: #3a5229;   /* 반전 섹션 배경 */
  --leaf-mid:  #6d8c55;   /* 버튼 hover */
  --leaf-soft: #8ea577;   /* 면·테두리·장식 전용 — 글자에 쓰지 말 것 (흰 배경 대비 2.7:1) */
  --ink-soft:  #6b7864;   /* 보조 글자 — 흰 카드 4.67:1 / 배경 4.50:1 */
  --sprout:    #e7eedd;   /* 면 — 옅은 새싹색 */
  --sprout-l:  #f2f6ec;   /* 아주 옅게 */
  --paper:     #fbfbf6;   /* 웜 아이보리 — 로고 배경색 */
  --paper-lt:  #fdfdf9;   /* 어두운 배경 위 밝은 글자 */
  --ink:       #2f3a28;   /* 제목 글자 */
  --ink-read:  #4d5646;   /* 본문 */
  --line:      rgba(79,109,57,.14);

  --sh-card: 0 6px 28px rgba(47,58,40,.08);
  --sh-lift: 0 14px 40px rgba(47,58,40,.14);

  --container: 1120px;
  --pad-x: 20px;

  --font-title: "HS활공명조", "Gowun Batang", serif;
  --font-body:  "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:150px; overflow-x:clip; }
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--paper); line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
.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;
}
.skip{ position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--leaf); color:#fff; padding:10px 18px; border-radius:0 0 8px 0; }
.skip:focus{ left:0; }

.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x); }
.section{ padding-block:84px; }
.section--tight{ padding-block:0 84px; }
.section__eyebrow{
  font-size:13px; letter-spacing:.16em; color:var(--ink-soft);
  text-align:center; margin-bottom:12px; font-weight:600;
}
.section__label{
  font-family:var(--font-title); font-weight:400; color:var(--leaf);
  font-size:clamp(28px, 4vw, 40px); line-height:1.4; text-align:center;
}
.section__desc{
  text-align:center; color:var(--ink-read); font-size:17px;
  max-width:620px; margin:14px auto 44px;
}
.card{
  background:#fff; border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--sh-card);
}

/* =========================================================
   상단 — 로고 + 전화 + 예약. 모바일에서도 두 버튼은 안 숨긴다
   ========================================================= */
.tabbar{
  position:sticky; top:0; z-index:100;
  background:rgba(251,251,246,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top, 0px);
}
.tabbar__inner{
  max-width:var(--container); margin-inline:auto; padding:0 var(--pad-x);
  height:68px; display:flex; align-items:center; gap:16px;
}
.brand{ display:block; flex:none; margin-right:auto; }
.brand img{ height:30px; width:auto; }
.gnb{ display:flex; align-items:center; gap:26px; font-size:15.5px; color:var(--ink-read); }
.gnb a:hover{ color:var(--leaf); }
@media (max-width:980px){ .gnb{ display:none; } }

.hbtn{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  border-radius:999px; padding:10px 18px; font-size:15px; font-weight:600;
  white-space:nowrap;
}
.hbtn--tel{ background:#fff; color:var(--leaf); border:1.5px solid var(--leaf); }
.hbtn--tel:hover{ background:var(--sprout-l); }
.hbtn--book{ background:var(--leaf); color:#fff; }
.hbtn--book:hover{ background:var(--leaf-mid); }
@media (max-width:600px){
  .tabbar__inner{ height:62px; gap:8px; }
  .brand img{ height:25px; }
  .hbtn{ padding:9px 13px; font-size:14px; }
  .hbtn--tel span{ display:none; }
}

/* =========================================================
   히어로
   ========================================================= */
.hero{
  position:relative; overflow:hidden; text-align:center;
  padding:64px 0 52px;
  background:
    radial-gradient(ellipse 64% 50% at 50% 0%, #eef3e7 0%, rgba(238,243,231,0) 72%),
    linear-gradient(180deg, #f6f8f1 0%, var(--paper) 70%);
}
.hero__logo{ width:min(330px, 74vw); height:auto; margin:0 auto 26px; }
.hero__title{
  font-family:var(--font-title); font-weight:400; color:var(--leaf);
  font-size:clamp(27px, 5.4vw, 44px); line-height:1.38;
}
.hero__sub{
  margin-top:16px; color:var(--ink-read); font-size:clamp(15.5px, 2vw, 18px);
  max-width:600px; margin-inline:auto;
}
.hero__where{
  margin-top:10px; color:var(--ink-soft); font-size:15px;
}
.hero__where b{ color:var(--leaf); font-weight:600; }

/* 세 가지 무기 — 저희 로고 카드에 쓰인 문구 그대로 */
.badges{
  display:flex; width:max-content; margin:26px auto 0; align-items:stretch;
  background:var(--leaf); color:#fff; border-radius:999px;
  padding:9px 6px; box-shadow:var(--sh-card);
  font-size:15px; font-weight:600; flex-wrap:wrap; justify-content:center;
}
.badges span{ padding:2px 18px; border-right:1px solid rgba(255,255,255,.34); }
.badges span:last-child{ border-right:0; }
@media (max-width:460px){
  .badges{ border-radius:20px; flex-direction:column; padding:10px 14px; gap:4px; width:auto; }
  .badges span{ border-right:0; padding:2px 0; }
}

/* 오늘 진료하나 — 첫 화면에서 답한다 */
.today{
  display:flex; width:max-content; max-width:100%; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content:center; margin:14px auto 0;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 20px; font-size:14.5px; box-shadow:var(--sh-card);
}
.today__dot{
  width:9px; height:9px; border-radius:50%; background:#2fa34f;
  box-shadow:0 0 0 4px rgba(47,163,79,.18); flex:none;
}
.today.is-closed .today__dot{ background:#c07a2c; box-shadow:0 0 0 4px rgba(192,122,44,.18); }
.today__state{ font-weight:700; color:var(--leaf); }
.today.is-closed .today__state{ color:#a8651f; }
.today__hours{ color:var(--ink-read); }

/* =========================================================
   빠른 안내 4버튼 — 뭘 눌러야 하는지 바로 보이게
   ========================================================= */
.quick{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  margin-top:38px;
}
@media (max-width:700px){ .quick{ grid-template-columns:repeat(2, 1fr); } }
.q{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:22px 14px 18px; text-align:center;
  box-shadow:var(--sh-card); transition:.2s ease;
}
.q:hover{ translate:0 -3px; box-shadow:var(--sh-lift); border-color:var(--leaf-soft); }
.q__ico{
  width:42px; height:42px; margin:0 auto 10px; display:block; color:var(--leaf);
}
.q__name{ display:block; font-size:16px; font-weight:700; color:var(--ink); }
.q__hint{ display:block; font-size:13.5px; color:var(--ink-soft); margin-top:3px; }

/* =========================================================
   진료 안내 카드
   ========================================================= */
.clinics{ display:grid; grid-template-columns:repeat(6, 1fr); gap:18px; }
.clinics > .cl{ grid-column:span 2; }
.clinics > .cl--lead{ grid-column:1 / -1; }
@media (max-width:980px){ .clinics > .cl{ grid-column:span 3; } }
@media (max-width:700px){
  .clinics{ grid-template-columns:1fr; }
  .clinics > .cl{ grid-column:1 / -1; }
}
.cl{
  border-radius:24px; padding:28px 26px 24px;
  display:flex; flex-direction:column; gap:11px; transition:.2s ease;
}
.cl:hover{ translate:0 -3px; box-shadow:var(--sh-lift); }
.cl__flag{
  align-self:flex-start; background:var(--leaf); color:#fff;
  border-radius:999px; padding:4px 13px; font-size:12.5px; font-weight:700;
}
.cl__title{ font-size:clamp(20px, 2.6vw, 24px); font-weight:700; line-height:1.4; color:var(--leaf); }
.cl--lead .cl__title{ font-size:clamp(23px, 3.2vw, 30px); }
.cl__body{ color:var(--ink-read); font-size:16px; }
.cl__chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:6px; }
.chip{
  background:var(--sprout-l); border:1px solid var(--line); color:var(--leaf);
  border-radius:999px; padding:5px 12px; font-size:13.5px;
}

/* =========================================================
   공간 — 2층 외래 / 3·4층 입원
   ========================================================= */
.stay{ background:var(--leaf-deep); color:var(--paper-lt); border-radius:32px; padding:64px 40px; }
.stay .section__label,
.stay .section__eyebrow{ color:var(--paper-lt); }
.stay .section__eyebrow{ color:rgba(253,253,249,.72); }
.stay .section__desc{ color:rgba(253,253,249,.82); }
@media (max-width:700px){ .stay{ padding:52px 20px; border-radius:24px; } }

.floors{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:820px){ .floors{ grid-template-columns:1fr; } }
.floor{
  background:rgba(253,253,249,.07); border:1px solid rgba(253,253,249,.18);
  border-radius:20px; overflow:hidden;
}
.floor img{ width:100%; aspect-ratio:466/350; height:auto; object-fit:cover; }
.floor__txt{ padding:18px 20px 22px; }
.floor__no{ font-weight:800; font-size:14px; letter-spacing:.06em; color:#cbdcb6; }
.floor__name{ font-size:18.5px; font-weight:700; margin-top:4px; }
.floor__desc{ color:rgba(253,253,249,.82); font-size:15px; margin-top:7px; }

/* =========================================================
   원장 소개
   ========================================================= */
.doctor--gap{ margin-top:40px; }
.doctor{ display:grid; grid-template-columns:1fr 1.15fr; gap:34px; align-items:center; }
@media (max-width:820px){ .doctor{ grid-template-columns:1fr; } }
.doctor__photo{ border-radius:24px; overflow:hidden; box-shadow:var(--sh-card); }
.doctor__photo img{ width:100%; height:auto; }
.doctor__word{
  font-family:var(--font-title); font-size:clamp(20px, 2.8vw, 27px);
  line-height:1.6; color:var(--leaf);
}
.doctor__body{ margin-top:18px; color:var(--ink-read); font-size:16px; }
.doctor__name{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-size:17px; font-weight:700;
}
.doctor__name small{ display:block; font-size:14px; font-weight:400; color:var(--ink-soft); margin-bottom:2px; }

/* =========================================================
   진료시간 · 오시는 길
   ========================================================= */
.visit{ display:flex; flex-direction:column; gap:18px; }
.vcard{ padding:32px 28px; }
.vcard__title{ font-size:20px; font-weight:700; color:var(--leaf); margin-bottom:18px; }

.hours{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
@media (max-width:640px){ .hours{ grid-template-columns:1fr; } }
.hours li{
  background:var(--sprout-l); border:1px solid var(--line); border-radius:16px;
  padding:18px 14px; text-align:center;
}
.hours .d{ display:block; font-size:14.5px; color:var(--ink-read); }
.hours .d small{ color:var(--ink-read); }   /* 타일(sprout-l) 위에서는 ink-soft 가 4.26:1 로 미달 */
.hours .t{
  display:block; margin-top:5px; font-size:20px; font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.hours li.is-today{ background:#fff; border-color:var(--leaf); box-shadow:0 0 0 3px rgba(79,109,57,.12); }
.hours li.is-today .d::after{
  content:"오늘"; margin-left:7px; background:var(--leaf); color:#fff;
  border-radius:999px; padding:1px 9px; font-size:11.5px; font-weight:700; vertical-align:1px;
}
.note{
  margin-top:16px; background:var(--sprout-l); border:1px solid var(--line);
  border-radius:16px; padding:14px 16px; font-size:14.5px; color:var(--ink-read);
}
.note b{ color:var(--leaf); }

.addr{ font-size:16px; color:var(--ink-read); }

/* 오시는 길 — 글은 3열로 나란히, 지도는 전체 폭.
   글과 지도를 좌우로 놓으면 높이가 안 맞아 한쪽에 큰 빈칸이 생긴다 */
.waylist{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  margin:20px 0 0; padding-top:20px; border-top:1px solid var(--line);
}
@media (max-width:760px){ .waylist{ grid-template-columns:1fr; gap:16px; } }
.addr__main{ font-size:17.5px; font-weight:700; color:var(--ink); line-height:1.6; }
.addr dl{ margin:18px 0 0; }
.waylist dt{
  font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--ink-soft);
  margin-top:16px;
}
.waylist dt{ margin-top:0; }
.waylist dd{ margin:6px 0 0; font-size:15.5px; color:var(--ink-read); }
.map{ border-radius:20px; overflow:hidden; border:1px solid var(--line); }
.map img{ width:100%; height:auto; }

/* 살아있는 지도 — 카드 전체 폭 */
.livemap{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.livemap iframe{
  width:100%; aspect-ratio:16/9; min-height:280px; border:0; display:block;
  border-radius:20px; background:var(--sprout-l);
  border:1px solid var(--line);
}
@media (max-width:760px){ .livemap iframe{ aspect-ratio:4/3; min-height:260px; } }
.livemap .btnrow{ margin-top:0; }
.exfig{
  margin-top:14px; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:var(--sprout-l);
}
.exfig img{ width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; object-position:center 30%; }
.exfig figcaption{
  padding:10px 12px; font-size:13.5px; color:var(--ink-soft);
  background:#fff; text-align:center; border-top:1px solid var(--line);
}

.btnrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; padding:15px 26px; font-size:16px; font-weight:700;
  transition:.2s ease; flex:1 1 auto;
}
.btn--book{ background:var(--leaf); color:#fff; box-shadow:var(--sh-card); }
.btn--book:hover{ background:var(--leaf-mid); translate:0 -2px; }
.btn--tel{ background:#fff; color:var(--leaf); border:1.5px solid var(--leaf); }
.btn--tel:hover{ background:var(--sprout-l); translate:0 -2px; }

/* =========================================================
   푸터
   ========================================================= */
.footer{
  background:var(--leaf-deep); color:rgba(253,253,249,.78);
  padding:56px 0 calc(150px + env(safe-area-inset-bottom, 0px)); font-size:14.5px;
}
@media (min-width:601px){ .footer{ padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px)); } }
.footer img{ height:30px; width:auto; }
.footer__meta{ margin-top:20px; line-height:1.95; }
.footer__meta a{ text-decoration:underline; text-underline-offset:3px; }
.footer__copy{ margin-top:26px; font-size:13px; color:rgba(253,253,249,.72); }

/* =========================================================
   하단 고정 전화·예약 — 모바일에서는 항상 보인다
   ========================================================= */
.fab{ display:none; }
@media (max-width:600px){
  .fab{
    position:fixed; z-index:95; display:flex; gap:10px;
    right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  }
}
.fab a{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:15px 24px; font-size:16px; font-weight:700;
  box-shadow:var(--sh-lift);
}
.fab__tel{ background:#fff; color:var(--leaf); border:1.5px solid var(--leaf); }
.fab__book{ background:var(--leaf); color:#fff; }
@media (max-width:600px){
  .fab{
    left:0; right:0; bottom:0; gap:0;
    background:rgba(251,251,246,.96); border-top:1px solid var(--line);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .fab a{ flex:1; justify-content:center; box-shadow:none; }
  .fab__tel{ margin-right:8px; }
}

/* =========================================================
   하위 페이지 (개인정보처리방침 등)
   ========================================================= */
.sub{
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, #eef3e7 0%, rgba(238,243,231,0) 70%),
    var(--paper);
  padding:44px 0 84px;
}
.backhome{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; font-size:14.5px; color:var(--leaf); font-weight:600;
  box-shadow:var(--sh-card);
}
.backhome:hover{ background:var(--sprout-l); }
.doc{ max-width:760px; margin:0 auto; }
.doc__title{
  font-family:var(--font-title); font-weight:400; color:var(--leaf);
  font-size:clamp(28px, 5vw, 40px); margin-top:26px; text-align:center;
}
.doc__lead{ text-align:center; color:var(--ink-read); margin-top:12px; font-size:16px; }
.policy{
  background:#fff; border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--sh-card); padding:38px 34px; margin-top:34px;
}
@media (max-width:560px){ .policy{ padding:28px 20px; border-radius:20px; } }
.policy h2{
  font-size:18px; font-weight:700; color:var(--leaf);
  margin:32px 0 10px; padding-top:22px; border-top:1px solid var(--line);
}
.policy h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.policy p{ color:var(--ink-read); font-size:15.5px; margin-bottom:10px; }
.policy ul{ list-style:disc; padding-left:20px; color:var(--ink-read); font-size:15.5px; }
.policy ul li{ margin-bottom:5px; }
.policy__table{ width:100%; border-collapse:collapse; margin:10px 0 14px; font-size:15.5px; }
.policy__table th,
.policy__table td{ border:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top; }
.policy__table th{ background:var(--sprout-l); color:var(--leaf); width:34%; font-weight:700; white-space:nowrap; }
.policy__table td{ color:var(--ink-read); }
.policy__updated{ margin-top:26px; font-size:14px; color:var(--ink-soft); }

.othergrid{ margin-top:40px; }
.othergrid__title{ text-align:center; color:var(--ink-soft); font-size:15px; margin-bottom:14px; }
.othergrid__list{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
@media (max-width:640px){ .othergrid__list{ grid-template-columns:repeat(2, 1fr); } }
.othercard{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:16px 12px; text-align:center; font-size:15px; font-weight:600;
  color:var(--leaf); box-shadow:var(--sh-card);
}
.othercard:hover{ background:var(--sprout-l); translate:0 -2px; }

/* 푸터 링크 */
.footer__links{ margin-top:18px; display:flex; flex-wrap:wrap; gap:18px; }
.footer__links a{ text-decoration:underline; text-underline-offset:3px; }


/* =========================================================
   일러스트 — 블로그 삽화를 그대로 쓴다
   ========================================================= */
.ill{
  border-radius:20px; overflow:hidden; border:1px solid var(--line);
  background:var(--sprout-l);
}
.ill img{ width:100%; aspect-ratio:3/2; object-fit:cover; }

/* 이야기 섹션 — 글과 그림을 나란히 */
.story{ display:grid; grid-template-columns:1.05fr 1fr; gap:34px; align-items:center; }
@media (max-width:820px){ .story{ grid-template-columns:1fr; gap:24px; } }
.story__title{
  font-family:var(--font-title); font-weight:400; color:var(--leaf);
  font-size:clamp(23px, 3.4vw, 32px); line-height:1.44;
}
.story__body{ margin-top:18px; color:var(--ink-read); font-size:16.5px; }
.story__body p + p{ margin-top:12px; }
.story--flip .ill{ order:-1; }
@media (max-width:820px){ .story--flip .ill{ order:0; } }

/* 진료 카드 안의 일러스트 */
.cl__ill{
  margin:-28px -26px 4px; border-bottom:1px solid var(--line);
  background:var(--sprout-l); overflow:hidden;
  border-radius:24px 24px 0 0;
}
.cl__ill img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.cl__note{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-soft); line-height:1.62;
}

/* 대표 카드는 그림 왼쪽 · 글 오른쪽 */
@media (min-width:761px){
  .cl--lead{ display:grid; grid-template-columns:1fr 1.15fr; gap:0; padding:0; overflow:hidden; }
  .cl--lead .cl__ill{ margin:0; border-bottom:0; border-right:1px solid var(--line); border-radius:24px 0 0 24px; height:100%; }
  .cl--lead .cl__ill img{ height:100%; aspect-ratio:auto; }
  .cl--lead .cl__inner{ padding:32px 32px 28px; display:flex; flex-direction:column; gap:11px; }
}
.cl--lead .cl__inner{ display:flex; flex-direction:column; gap:11px; }

/* 365일 진료 띠 */
.band{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:#fff; border:1px solid var(--line); border-radius:32px;
  overflow:hidden; box-shadow:var(--sh-card);
}
@media (max-width:820px){ .band{ grid-template-columns:1fr; } }
.band__ill{ background:var(--sprout-l); }
.band__ill img{ width:100%; height:100%; min-height:260px; object-fit:cover; }
.band__txt{ padding:40px 36px; align-self:center; }
.band__title{
  font-family:var(--font-title); font-weight:400; color:var(--leaf);
  font-size:clamp(22px, 3.2vw, 30px); line-height:1.44;
}
.band__body{ margin-top:14px; color:var(--ink-read); font-size:15.5px; }
.band__list{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }


/* =========================================================
   하단 CTA 띠 — 페이지의 끝맺음 겸 마지막 예약 자리
   ========================================================= */
.cta{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:0;
  background:#fff; border:1px solid var(--line); border-radius:32px;
  overflow:hidden; box-shadow:var(--sh-card);
}
@media (max-width:760px){ .cta{ grid-template-columns:1fr; } }
.cta__ill{ background:var(--sprout-l); }
.cta__ill img{ width:100%; height:100%; min-height:200px; object-fit:cover; }
.cta__txt{ padding:36px 34px; align-self:center; }
.cta__title{
  font-family:var(--font-title); font-weight:400; color:var(--leaf);
  font-size:clamp(21px, 3vw, 28px); line-height:1.44;
}
.cta__body{ margin-top:12px; color:var(--ink-read); font-size:16px; }


/* =========================================================
   봄이 — 병원 이름을 준 원장님 강아지.
   푸터를 천천히 산책하다가, 누르거나 마우스를 올리면 멈춰서 인사한다.
   의료 정보가 있는 자리에는 절대 넣지 않는다 (장난스러워 보여 신뢰를 깎는다)
   ========================================================= */
.footer{ position:relative; overflow:hidden; }
.footer .wrap > *{ position:relative; z-index:1; }

.bomi-track{
  position:absolute; z-index:2; left:0; right:0;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  height:0;
}
.bomi-walker{
  position:absolute; left:0; bottom:0;
  display:block; padding:0; border:0; background:none; cursor:pointer;
  transform:translateX(-140px);
  -webkit-tap-highlight-color:transparent;
}
.bomi{
  display:block;
  width:clamp(58px, 9vw, 92px); height:auto;
  color:var(--paper-lt); opacity:.16;
  transition:opacity .3s ease;
}
.bomi-walker:hover .bomi,
.bomi-walker:focus-visible .bomi,
.bomi-walker.is-saying .bomi{ opacity:.92; }
.bomi-walker:focus-visible{ outline:2px solid var(--paper-lt); outline-offset:6px; border-radius:8px; }

/* 말풍선 — 평소엔 없다 */
.bomi-say{
  position:absolute; left:50%; bottom:calc(100% + 10px);
  translate:-50% 0;
  background:var(--paper-lt); color:var(--leaf);
  border-radius:16px; padding:10px 15px;
  font:600 13.5px/1.45 var(--font-body);
  white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.bomi-say::after{
  content:""; position:absolute; left:50%; top:100%; translate:-50% 0;
  border:7px solid transparent; border-top-color:var(--paper-lt);
}
.bomi-walker:hover .bomi-say,
.bomi-walker:focus-visible .bomi-say,
.bomi-walker.is-saying .bomi-say{
  opacity:1; visibility:visible; transform:translateY(0);
}
@media (max-width:420px){
  .bomi-say{ white-space:normal; width:min(220px, 62vw); text-align:center; }
}

/* 푸터가 화면에 들어왔을 때만 걷는다 (js/main.js 가 붙인다) */
.footer.is-walking .bomi-walker{ animation:bomi-walk 19s linear infinite; }
.footer.is-walking .bomi__leg{ animation:bomi-leg .56s ease-in-out infinite alternate; }
.footer.is-walking .bomi__leg--b{ animation-delay:-.28s; }
.footer.is-walking .bomi__tail{ animation:bomi-tail .4s ease-in-out infinite alternate; }
.footer.is-walking .bomi__body{ animation:bomi-bob .28s ease-in-out infinite alternate; }

/* 인사하는 동안엔 멈춰 선다 (꼬리만 계속 흔든다) */
.footer.is-walking .bomi-walker:hover,
.footer.is-walking .bomi-walker:focus-visible,
.footer.is-walking .bomi-walker.is-saying{ animation-play-state:paused; }
.footer.is-walking .bomi-walker:hover .bomi__leg,
.footer.is-walking .bomi-walker:focus-visible .bomi__leg,
.footer.is-walking .bomi-walker.is-saying .bomi__leg,
.footer.is-walking .bomi-walker:hover .bomi__body,
.footer.is-walking .bomi-walker:focus-visible .bomi__body,
.footer.is-walking .bomi-walker.is-saying .bomi__body{ animation-play-state:paused; }

@keyframes bomi-walk{
  from{ transform:translateX(-140px); }
  to  { transform:translateX(calc(100vw + 140px)); }
}
.bomi__leg{ transform-box:fill-box; transform-origin:50% 0; }
@keyframes bomi-leg{ from{ transform:rotate(-13deg); } to{ transform:rotate(13deg); } }
.bomi__tail{ transform-box:fill-box; transform-origin:100% 100%; }
@keyframes bomi-tail{ from{ transform:rotate(-13deg); } to{ transform:rotate(15deg); } }
.bomi__body{ transform-box:fill-box; transform-origin:50% 100%; }
@keyframes bomi-bob{ from{ transform:translateY(0); } to{ transform:translateY(-2px); } }

/* 움직임을 줄이는 설정이면 오른쪽에 가만히 앉아 있는다 (인사는 그대로 된다) */
@media (prefers-reduced-motion: reduce){
  .footer.is-walking .bomi-walker,
  .footer.is-walking .bomi__leg,
  .footer.is-walking .bomi__tail,
  .footer.is-walking .bomi__body{ animation:none; }
  .bomi-walker{ left:auto; right:clamp(12px, 4vw, 48px); transform:none; }
  .bomi-say{ transition:none; }
}

/* =========================================================
   비급여 진료비용 표 (의료법 제45조 고지)
   ========================================================= */
.pricegroup{ margin-top:34px; }
.pricegroup:first-of-type{ margin-top:22px; }
.pricegroup__title{
  display:flex; align-items:baseline; gap:10px;
  font-size:18.5px; font-weight:700; color:var(--leaf);
  padding-bottom:10px; border-bottom:2px solid var(--leaf);
}
.pricegroup__note{ font-size:13.5px; font-weight:400; color:var(--ink-soft); }
.pricetable{ width:100%; border-collapse:collapse; font-size:16px; }
.pricetable th{
  text-align:left; font-size:13.5px; font-weight:700; color:var(--ink-soft);
  letter-spacing:.04em; padding:12px 14px; border-bottom:1px solid var(--line);
}
.pricetable th:last-child{ text-align:right; }
.pricetable td{
  padding:14px; border-bottom:1px solid var(--line); color:var(--ink);
}
.pricetable td:last-child{
  text-align:right; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.pricetable tr:last-child td{ border-bottom:0; }
.pricetable tbody tr:hover{ background:var(--sprout-l); }
.pricetable .unit{ font-size:13.5px; font-weight:400; color:var(--ink-soft); margin-left:3px; }
@media (max-width:520px){
  .pricetable{ font-size:15.5px; }
  .pricetable th,.pricetable td{ padding:12px 4px; }
}
.lawbox{
  background:var(--sprout-l); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; font-size:15px; color:var(--ink-read); line-height:1.7;
}
.lawbox b{ color:var(--leaf); }
.lawbox + .lawbox{ margin-top:12px; }

/* =========================================================
   자주 묻는 질문 — 검색 결과에 질문·답이 펼쳐지게 (FAQPage)
   ========================================================= */
.faq{ max-width:820px; margin:34px auto 0; }
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--sh-card); margin-bottom:12px; overflow:hidden;
}
.faq__q{
  list-style:none; cursor:pointer; padding:20px 54px 20px 24px; position:relative;
  font-size:17px; font-weight:700; color:var(--ink); line-height:1.5;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:""; position:absolute; right:24px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2.5px solid var(--leaf); border-bottom:2.5px solid var(--leaf);
  rotate:45deg; transition:rotate .22s ease;
}
.faq__item[open] .faq__q::after{ rotate:225deg; margin-top:-2px; }
.faq__q:hover{ color:var(--leaf); }
.faq__a{ padding:0 24px 22px; color:var(--ink-read); font-size:16px; }
.faq__a p{ margin:0; }
@media (prefers-reduced-motion: reduce){ .faq__q::after{ transition:none; } }

/* =========================================================
   블로그 — 네이버 글을 끌어와 목록으로 보여준다
   ========================================================= */
.blogfilter{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px; }
.chipbtn{
  font:inherit; font-size:14.5px; cursor:pointer;
  background:#fff; color:var(--ink-read); border:1px solid var(--line);
  border-radius:999px; padding:9px 16px; transition:.18s ease;
}
.chipbtn b{ color:var(--ink-soft); font-weight:700; margin-left:3px; }
.chipbtn:hover{ border-color:var(--leaf-soft); }
.chipbtn.is-on{ background:var(--leaf); color:#fff; border-color:transparent; }
.chipbtn.is-on b{ color:rgba(255,255,255,.72); }

.postlist{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
@media (max-width:720px){ .postlist{ grid-template-columns:1fr; } }
.post{
  display:flex; gap:16px; align-items:stretch;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--sh-card); overflow:hidden; transition:.2s ease;
}
.post:hover{ translate:0 -3px; box-shadow:var(--sh-lift); }
.post__thumb{ flex:none; width:118px; background:var(--sprout-l); }
.post__thumb img{ width:100%; height:100%; object-fit:cover; }
.post__thumb--none{
  background:
    radial-gradient(circle at 50% 42%, #fff 0 22%, transparent 23%),
    var(--sprout);
}
.post__text{ display:flex; flex-direction:column; gap:6px; padding:18px 18px 18px 0; min-width:0; }
.post__title{
  font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post__sum{
  font-size:14px; color:var(--ink-read); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post__meta{ margin-top:auto; font-size:13px; color:var(--ink-soft); }
.post__meta i{ font-style:normal; margin:0 6px; }
.blogmsg{ text-align:center; color:var(--ink-read); font-size:16px; padding:40px 0; }
.blogmsg a{ color:var(--leaf); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.blogmore{ text-align:center; margin-top:30px; }
.blogmore .btn{ flex:0 0 auto; padding-inline:34px; }

/* =========================================================
   교통사고 클리닉 페이지
   ========================================================= */
.subhero{
  text-align:center; padding:56px 0 48px;
  background:
    radial-gradient(ellipse 64% 54% at 50% 0%, #eef3e7 0%, rgba(238,243,231,0) 72%),
    linear-gradient(180deg, #f6f8f1 0%, var(--paper) 72%);
}
.subhero h1{
  font-family:var(--font-title); font-weight:400; color:var(--leaf);
  font-size:clamp(30px, 5.4vw, 48px); line-height:1.32; margin-top:12px;
}
.subhero__lead{
  margin:18px auto 0; max-width:640px; color:var(--ink-read);
  font-size:clamp(16px, 2vw, 18px);
}
.subhero .badges{ margin-top:26px; }
.subhero .btnrow{ max-width:520px; margin:28px auto 0; }

/* 증상 칩 */
.sym{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:8px; }
.sym span{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:10px 18px; font-size:15.5px; color:var(--ink); box-shadow:var(--sh-card);
}

/* 진료 흐름 */
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; counter-reset:s; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:26px 22px 24px; box-shadow:var(--sh-card); position:relative;
}
.step::before{
  counter-increment:s; content:counter(s);
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--leaf); color:#fff; font-weight:800; font-size:16px;
  margin-bottom:14px;
}
.step h3{ font-size:17.5px; font-weight:700; color:var(--leaf); }
.step p{ margin-top:8px; font-size:15px; color:var(--ink-read); }

/* 두 칸 짜리 설명 */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center; }
@media (max-width:820px){ .duo{ grid-template-columns:1fr; gap:20px; } }
.duo__body{ color:var(--ink-read); font-size:16.5px; }
.duo__body p + p{ margin-top:12px; }
.duo h2{ text-align:left; }
.duo .section__label{ text-align:left; }
.duo .section__label::before{ left:0; translate:0 -50%; }

/* 안내 상자 */
.callout{
  background:var(--sprout-l); border:1px solid var(--line); border-left:4px solid var(--leaf);
  border-radius:16px; padding:20px 22px; color:var(--ink-read); font-size:16px;
}
.callout b{ color:var(--leaf); }
.callout + .callout{ margin-top:12px; }
.callout--plain{ border-left-color:var(--leaf-soft); }