@charset "utf-8";
/* 해봄재활주간보호센터
   구성은 참고사이트(연세올케어)를 그대로 따르고, 색과 활자만 해봄 것으로 바꾼다.
   - 컨테이너 1200 / 내부 1170 · 고정 헤더 100 (레퍼런스 실측)
   - 강조는 '노란 형광펜 + 먹색 글자'. 브로슈어가 실제로 쓰는 방식이다.
     로고 노랑(#FFE100)은 흰 바탕에서 글자색으로 못 쓴다(대비 1.1:1). 배경으로만 쓴다.
   - 사진을 아직 받지 못했다. ★사진 자리는 '빈 화면'으로 둔다★ — 밝은 판에 먹색 글자.
     어두운 판에 광원 그라디언트를 깔아 채우면 업종과 맞지 않고 생성기 티가 난다.
     사진이 들어오면 data-bg 값만 채우면 어두운 오버레이 + 흰 글씨로 알아서 바뀐다. */

/* ── 토큰 ────────────────────────────────────────────────────────────────── */
:root {
  --brand: #ffe100;          /* 로고 심볼 노랑 */
  --brand-soft: #fff57f;     /* 로고 밝은 원 */
  --brand-deep: #e0b400;     /* 노랑 계열 어두운 톤 — 선·아이콘용 */
  --tint: #fffbe6;           /* 아주 옅은 노랑 판 */
  --ink: #33362f;            /* 먹색(로고 회색 계열을 더 깊게) */
  --ink-2: #5a5e55;          /* 로고 워드마크 회색 — 브랜드 정본 */
  --muted: #8a8e83;
  --line: #e4e5df;
  --bg-soft: #f6f7f3;
  --wrap: 1200px;
  --hd: 81px;
  --radius: 22px;
  --shadow: 0 18px 40px rgba(51, 54, 47, .1);
  --font: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-brand: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* 타이포 스케일 — 메인/서브/내용 3단으로 통일. clamp() 최소값이 곧 모바일 최적 크기라
     화면별 폰트를 따로 또 지정할 필요가 없다(줄바꿈이 늘어나지 않도록 최소값을 넉넉히 잡았다). */
  --fs-h1: clamp(34px, 5.2vw, 66px);     /* 메인 — 히어로 대제목 전용 */
  --fs-h2: clamp(30px, 4vw, 50px);       /* 메인 — 섹션·서브페이지 대제목 공통 */
  --fs-h3: clamp(22px, 1.8vw, 25px);     /* 메인 — 카드·블록 소제목 */
  --fs-eyebrow: 19px;                     /* 서브 — EN 라벨/카테고리 태그 */
  --fs-lead: clamp(20.5px, 1.6vw, 24px); /* 서브 — 섹션·서브페이지 리드 문구 */
  --fs-body: 20.5px;                      /* 내용 — 본문/설명/목록 */
  --fs-body-sm: 18.5px;                   /* 내용 — 캡션·보조 설명 */
}

/* 모바일 전용 타이포 스케일 — PC 가독성을 위해 위 토큰들을 키운 뒤로는
   고정 px 값(eyebrow/body/body-sm)이 좁은 화면에서도 그대로 유지되어
   버튼 밖으로 글자가 밀려나거나 불필요한 줄바꿈이 생겼다. 여기서만 다시 낮춘다. */
@media (max-width: 760px) {
  :root {
    --fs-h3: 19px;
    --fs-eyebrow: 16px;
    --fs-lead: 17.5px;
    --fs-body: 17.5px;
    --fs-body-sm: 15.5px;
  }
}

/* 로컬 폰트 — 헤더 브랜드 워드마크 전용(하드코딩 텍스트) */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/PretendardVariable.woff2") format("woff2-variations"),
       url("../assets/fonts/PretendardVariable.woff2") format("woff2");
}

/* ── 바탕 ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; width: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); font-weight: 400; line-height: 1.75;
  letter-spacing: -.01em; word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; width: 100%; max-width: 100vw;
}
img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.35; letter-spacing: -.03em; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 2px; }

.hb-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 15px; }
.hb-skip { position: absolute; left: -9999px; }
.hb-skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }

/* 형광펜 강조 — 브로슈어의 표현을 그대로 옮겼다 */
em { font-style: normal; background: linear-gradient(transparent 55%, var(--brand-soft) 55%); padding: 0 .06em; }

/* 사진이 없는 자리. 채우지 않고 비워 둔다 — 옅은 판과 얇은 테두리뿐. */
.hb-plate {
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

/* ── 헤더 (떠 있는 캡슐형 내비) ──────────────────────────────────────────── */
/* 전체폭 흰 바 대신, 위쪽에 여백을 두고 뜨는 먹색 알약 모양 — 어느 배경 위에서도
   또렷하게 읽히도록 완전 불투명한 --ink 배경 + 그림자로 만든다(유리 효과 아님). */
.hb-hd {
  position: fixed; inset: 0 0 auto; z-index: 90; height: var(--hd);
  padding-top: 6px; background: transparent;
  /* 일부 인앱 브라우저(webview)가 fixed+flex 조합을 첫 페인트에서 완전히
     그리지 못하는 버그가 있어, 별도 컴포지팅 레이어로 강제 분리한다 */
  transform: translateZ(0);
}
.hb-hd-in {
  height: 75px; max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; padding: 0 18px 0 30px;
  background: var(--ink); border-radius: 999px;
  box-shadow: 0 14px 32px rgba(20, 22, 18, .24);
  transition: box-shadow .25s;
}
.hb-hd.is-stuck .hb-hd-in { box-shadow: 0 18px 40px rgba(20, 22, 18, .34); }
.hb-brand { flex: none; display: flex; align-items: center; gap: 12px; }
.hb-brand img { width: 78px; max-width: none; height: auto; }
.hb-brand-text {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -.02em;
  color: #fff;
  white-space: nowrap;
}
.hb-gnb { margin-left: auto; }
.hb-gnb > ul { display: flex; align-items: center; gap: 2px; }
.hb-gnb-a {
  display: block; padding: 0 12px; height: 75px; line-height: 75px;
  font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .78); position: relative;
  white-space: nowrap; /* '후원·자원봉사' 처럼 긴 이름이 두 줄로 접혀 잘리던 것 */
}
.hb-gnb-a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 17px; height: 2.5px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .28s;
}
.hb-gnb-i:hover .hb-gnb-a, .hb-gnb-i.is-on .hb-gnb-a { color: #fff; }
.hb-gnb-i:hover .hb-gnb-a::after, .hb-gnb-i.is-on .hb-gnb-a::after { transform: scaleX(1); }
.hb-hd-cta {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 58px; padding: 0 20px; margin-left: 0;
  border-radius: 999px; background: var(--brand); color: var(--ink);
  white-space: nowrap;
  transition: background .18s;
}
.hb-hd-cta:hover { background: var(--brand-soft); }
.hb-hd-cta-t { font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.hb-hd-cta-p {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1.15;
}
.hb-hd-cta-p svg { width: 13px; height: 13px; }

/* 드롭다운 — li 자신의 높이 기준으로 붙인다(헤더 높이 토큰과 분리해 안전하게) */
.hb-drop {
  position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 190px; padding: 12px 0;
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--brand); border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s, transform .22s, visibility .22s;
}
.hb-gnb-i { position: relative; }
.hb-gnb-i:hover .hb-drop, .hb-gnb-i:focus-within .hb-drop { opacity: 1; visibility: visible; transform: none; }
.hb-drop-in a {
  display: block; padding: 9px 22px; font-size: 17px; color: var(--ink-2); white-space: nowrap;
  transition: color .18s, background .18s;
}
.hb-drop-in a:hover, .hb-drop-in a.is-on { color: var(--ink); background: var(--tint); font-weight: 600; }

/* 얇은 2px div 선(hairline) 대신 SVG로 그린다 — 일부 인앱 브라우저(webview)가
   고배율(devicePixelRatio 3 등)에서 이런 얇은 요소를 간헐적으로 페인트 누락시킨다 */
.hb-burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; color: #fff; }
.hb-burger svg { width: 24px; height: 24px; }
.hb-burger-x { display: none; }
.hb-burger[aria-expanded="true"] .hb-burger-menu { display: none; }
.hb-burger[aria-expanded="true"] .hb-burger-x { display: block; }

/* 모바일 전체 메뉴 */
.hb-mo { position: fixed; inset: 0; z-index: 95; background: rgba(51, 54, 47, .5); }
.hb-mo[hidden] { display: none; }
.hb-mo-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(86vw, 340px);
  background: #fff; display: flex; flex-direction: column; animation: hb-slide .28s ease;
}
@keyframes hb-slide { from { transform: translateX(100%); } }
.hb-mo-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.hb-mo-head b { font-size: 17px; }
.hb-mo-x { font-size: 30px; line-height: 1; color: var(--ink-2); }
.hb-mo-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.hb-mo-top {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 22px; font-size: 18px; font-weight: 600; text-align: left;
}
.hb-mo-top i { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .22s; }
.hb-mo-g.is-open .hb-mo-top i { transform: rotate(-135deg); }
.hb-mo-sub { display: none; padding: 4px 0 10px; background: var(--bg-soft); }
.hb-mo-g.is-open .hb-mo-sub { display: block; }
.hb-mo-sub a { display: block; padding: 11px 34px; font-size: 17px; color: var(--ink-2); }
.hb-mo-call { margin: 12px 22px 22px; padding: 11px; border-radius: 22px; background: var(--brand); color: var(--ink); text-align: center; }
.hb-mo-call span { display: block; font-size: 13.5px; font-weight: 600; }
.hb-mo-call b { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 17px; letter-spacing: -.02em; }
.hb-mo-call b svg { width: 14px; height: 14px; flex: none; }

/* ── 히어로 ──────────────────────────────────────────────────────────────── */
/* 첫 화면. 사진이 없는 동안은 밝은 판에 글자만 둔다(빈 화면). */
.hb-hero {
  position: relative; min-height: max(720px, 100vh); padding-top: var(--hd);
  display: flex; align-items: center; overflow: hidden;
  background: var(--bg-soft) center/cover no-repeat;
}
@supports (height: 100dvh) {
  .hb-hero { min-height: max(720px, 100dvh); }
}
/* 커서를 따라 사진이 미세하게 움직인다(사진이 있을 때만) — JS(photo-parallax.js)가 각 요소에
   --mx/--my 를 채운다. 히어로뿐 아니라 사진이 들어가는 모든 자리(배너·카드·본문사진)에 공통 적용. */
.hb-hero.has-photo,
.hb-sv.has-photo,
.hb-photo.has-photo {
  background-size: 116%;
  background-position: calc(50% + var(--mx, 0) * 1px) calc(50% + var(--my, 0) * 1px);
  transition: background-size .35s var(--ease, ease);
}
.hb-hero.has-photo:hover, .hb-sv.has-photo:hover, .hb-photo.has-photo:hover {
  background-size: 124%;
}
/* 히어로만 더 다이나믹하게: 배경 확대폭을 키우고, 커서 위치에 따라 카드 전체를 아주 살짝
   3D로 기울여 렌더링된 패널처럼 보이게 한다(사진이 없을 때는 --mx/--my가 0이라 평평하다). */
.hb-hero.has-photo {
  background-size: 120%;
  transform: perspective(1600px) rotateX(calc(var(--my, 0) * -0.045deg)) rotateY(calc(var(--mx, 0) * 0.06deg));
  transition: background-size .35s var(--ease, ease), transform .5s cubic-bezier(.16, .84, .44, 1);
}
.hb-hero.has-photo:hover {
  background-size: 132%;
}
@media (prefers-reduced-motion: reduce) {
  .hb-hero.has-photo, .hb-sv.has-photo, .hb-photo.has-photo { background-position: center; background-size: cover; }
  .hb-hero.has-photo { transform: none; }
}
.hb-hero-wash { position: absolute; inset: 0; }
.hb-hero.has-photo .hb-hero-wash { background: linear-gradient(100deg, rgba(20, 22, 18, .59) 0%, rgba(20, 22, 18, .5) 50%, rgba(20, 22, 18, .41) 100%); }
.hb-hero.has-photo .hb-hero-wash::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(560px 560px at calc(50% + var(--mx, 0) * 3px) calc(42% + var(--my, 0) * 3px), rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 62%);
  mix-blend-mode: screen;
}
/* 상단 배너(캡슐)의 왼쪽 내부 여백(30px)과 같은 지점에서 시작하도록 맞춘다.
   히어로가 flex 컨테이너라 .hb-wrap 의 margin:auto 가 전체 뷰포트 기준으로
   계산돼 버려서(1200 래퍼가 아니라) 여기서 마진을 직접 계산해 덮어쓴다. */
.hb-hero-in {
  position: relative; z-index: 2; color: var(--ink); padding-bottom: 40px; max-width: 800px;
  margin: 0 0 0 max(30px, calc((100vw - var(--wrap)) / 2 + 30px));
}
.hb-hero.has-photo .hb-hero-in { color: #fff; }
.hb-hero-eb {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px;
  font-size: var(--fs-eyebrow); font-weight: 600; color: var(--ink-2); letter-spacing: -.01em;
}
.hb-hero-eb::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.hb-hero.has-photo .hb-hero-eb { color: rgba(255, 255, 255, .9); }
.hb-hero-t { font-size: var(--fs-h1); font-weight: 800; line-height: 1.24; white-space: pre-line; letter-spacing: -.04em; }
/* H1 안에 지역 키워드 줄(아이브로)과 슬로건을 함께 담는다 — 보이는 모양은 그대로 두고 검색엔진이 읽는 제목만 강화 */
.hb-hero-t .hb-hero-eb { line-height: 1.4; }
.hb-hero-t-main { display: block; }
.hb-hero-sub {
  margin-top: 18px; font-size: var(--fs-body); font-weight: 500;
  color: var(--ink-2); letter-spacing: -.01em; line-height: 1.6;
}
.hb-hero.has-photo .hb-hero-sub { color: rgba(255, 255, 255, .88); }
.hb-hero-stats {
  margin-top: 36px; display: flex; flex-wrap: wrap;
  border-top: 1px solid rgba(51, 54, 47, .16); border-bottom: 1px solid rgba(51, 54, 47, .16);
  padding: 24px 0;
}
.hb-hero.has-photo .hb-hero-stats { border-color: rgba(255, 255, 255, .3); }
.hb-hero-stat { padding: 0 34px; }
.hb-hero-stat:first-child { padding-left: 0; }
.hb-hero-stat + .hb-hero-stat { border-left: 1px solid rgba(51, 54, 47, .16); }
.hb-hero.has-photo .hb-hero-stat + .hb-hero-stat { border-color: rgba(255, 255, 255, .3); }
.hb-hero-stat b { display: flex; align-items: baseline; gap: 4px; font-size: clamp(34px, 3.8vw, 48px); font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.hb-hero-stat b span { font-size: 17px; font-weight: 700; color: var(--brand-deep); }
.hb-hero-stat b span.hb-hero-plus { color: inherit; }
.hb-hero-stat p { margin-top: 8px; font-size: var(--fs-body-sm); color: var(--ink-2); letter-spacing: -.01em; }
.hb-hero.has-photo .hb-hero-stat b { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .3); }
.hb-hero.has-photo .hb-hero-stat b span { color: var(--brand); text-shadow: none; }
.hb-hero.has-photo .hb-hero-stat b span.hb-hero-plus { color: inherit; text-shadow: inherit; }
.hb-hero.has-photo .hb-hero-stat p { color: rgba(255, 255, 255, .82); }
.hb-hero-btns { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.hb-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 168px;
  height: 58px; padding: 0 30px; border-radius: 999px; font-size: 17px; font-weight: 700; letter-spacing: .04em;
  transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.hb-btn.is-fill { background: var(--brand); color: var(--ink); }
.hb-btn.is-fill:hover { background: var(--brand-soft); }
.hb-btn.is-line { border: 1.5px solid var(--ink); color: var(--ink); }
.hb-btn.is-line:hover { background: var(--ink); color: #fff; }
.hb-hero.has-photo .hb-btn.is-line, .hb-cta .hb-btn.is-line { border-color: rgba(255, 255, 255, .6); color: #fff; }
.hb-hero.has-photo .hb-btn.is-line:hover, .hb-cta .hb-btn.is-line:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hb-hero-scroll { position: absolute; left: 50%; bottom: 32px; width: 24px; height: 40px; border: 1.5px solid rgba(51, 54, 47, .28); border-radius: 999px; transform: translateX(-50%); }
.hb-hero.has-photo .hb-hero-scroll { border-color: rgba(255, 255, 255, .45); }
.hb-hero-scroll i { position: absolute; left: 50%; top: 9px; width: 3px; height: 8px; margin-left: -1.5px; background: var(--brand-deep); border-radius: 2px; animation: hb-drop 1.7s infinite; }
.hb-hero.has-photo .hb-hero-scroll i { background: var(--brand); }
@keyframes hb-drop { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(13px); } }

/* ── 섹션 공통 ───────────────────────────────────────────────────────────── */
.hb-sec { padding: 120px 0; }
.hb-shead { margin-bottom: 54px; }
.hb-en { margin-bottom: 10px; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; color: var(--brand-deep); }
.hb-shead h2 { font-size: var(--fs-h2); font-weight: 800; }
.hb-shead-lead { margin-top: 16px; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.8; white-space: pre-line; }

/* ── ABOUT ───────────────────────────────────────────────────────────────── */
/* 이 섹션만: 헤더 블록과 아래 문장 사이 간격을 25% 좁힌다(스크린샷 지적 반영, 다른 페이지엔 적용 안 함) */
.hb-about .hb-shead { margin-bottom: 40px; }
.hb-about-line { line-height: 1.7; }
.hb-about-q { font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.03em; }
.hb-about-l { font-size: var(--fs-body); color: var(--ink-2); }
.hb-bubble { position: relative; width: fit-content; margin: 56px auto 0; padding: 20px 38px; border-radius: 16px; background: var(--tint); border: 1px solid #f0e7bb; text-align: center; }
.hb-bubble p { font-size: var(--fs-lead); font-weight: 700; line-height: 1.6; white-space: pre-line; letter-spacing: -.03em; }
.hb-bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 15px; height: 15px; margin-left: -8px; background: var(--tint); border-right: 1px solid #f0e7bb; border-bottom: 1px solid #f0e7bb; transform: rotate(45deg); }
/* 시네마 필름릴 — 사진 자체엔 아무 효과도 주지 않고, 한 줄로 이어 붙여 오른쪽에서 왼쪽으로 흘려보낸다 */
.hb-reel { margin-top: 56px; position: relative; overflow: hidden; }
.hb-reel::before, .hb-reel::after { content: ''; position: absolute; top: 0; bottom: 0; width: 8vw; z-index: 2; pointer-events: none; }
.hb-reel::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.hb-reel::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.hb-reel-track { display: flex; gap: 28px; width: max-content; animation: hb-reel-scroll 50s linear infinite; }
.hb-reel:hover .hb-reel-track { animation-play-state: paused; }
@keyframes hb-reel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hb-reel-tile { flex: none; width: 340px; }
.hb-reel-img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); background-color: var(--bg-soft); background-size: cover; background-position: center; }
.hb-reel-tile h3 { margin-top: 18px; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.hb-reel-tile p { margin-top: 6px; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .hb-reel-track { animation: none; overflow-x: auto; } }
.hb-about-intro { margin-top: 52px; padding: 34px 38px; border-left: 4px solid var(--brand); background: var(--tint); font-size: var(--fs-body); line-height: 1.9; color: var(--ink); }

/* ── WHY (감성적 선언 — 다크, 바이링구얼 스탯) ──────────────────────────────── */
.hb-why { position: relative; background: #2b2e27; overflow: hidden; padding: 100px 0; }
.hb-why::before {
  content: ''; position: absolute; top: 0; left: -80px; width: 900px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 225, 0, .6) 0%, rgba(255, 225, 0, .32) 32%, rgba(255, 225, 0, .1) 55%, transparent 75%);
  filter: blur(45px); pointer-events: none;
}
.hb-why .hb-wrap { position: relative; z-index: 1; }
.hb-why .hb-en { color: var(--brand); }
.hb-why-t { margin-top: 14px; font-size: var(--fs-h2); font-weight: 800; line-height: 1.32; color: #fff; letter-spacing: -.03em; }
.hb-why-t em { font-style: normal; background: none; padding: 0; color: var(--brand); }
.hb-why-row {
  margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap;
}
.hb-why-lead { max-width: 480px; font-size: var(--fs-lead); line-height: 1.85; color: rgba(255, 255, 255, .68); }

/* ── PROCESS (왼쪽 제목 고정 + 오른쪽 카드가 위로 끊임없이 흐른다 — 호버에도 멈추지 않음) ── */
.hb-proc-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; }
.hb-proc-title { position: sticky; top: calc(var(--hd) + 40px); }
.hb-proc-stack { position: relative; height: 700px; overflow: hidden; }
.hb-proc-stack::before, .hb-proc-stack::after {
  content: ''; position: absolute; left: 0; right: 0; height: 70px; z-index: 2; pointer-events: none;
}
.hb-proc-stack::before { top: 0; background: linear-gradient(#fff, transparent); }
.hb-proc-stack::after { bottom: 0; background: linear-gradient(transparent, #fff); }
.hb-proc-track { display: flex; flex-direction: column; gap: 22px; width: 100%; animation: hb-proc-rise 26s linear infinite; }
@keyframes hb-proc-rise { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.hb-proc-card {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: center;
  padding: 34px 30px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line);
}
.hb-proc-card b { font-size: 42px; font-weight: 800; color: var(--brand-deep); letter-spacing: -.02em; }
.hb-proc-card h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.hb-proc-card p { font-size: var(--fs-body-sm); line-height: 1.7; color: var(--ink-2); }
/* 짝수 카드는 노란색으로, 오른쪽으로 살짝 밀어 리듬을 준다 */
.hb-proc-card:nth-child(even) { background: var(--brand-soft); border-color: transparent; margin-left: 28px; }
.hb-proc-card:nth-child(even) b { color: var(--ink); }
.hb-proc-card:nth-child(even) p { color: rgba(51, 54, 47, .72); }

/* ── 해봄의 하루 — 사진 카드 + 순서대로 한 장씩 노란 틴트로 자동 강조 ──────── */
.hb-daily { padding: 160px 0; }
.hb-daycard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hb-daycard {
  position: relative; display: flex; align-items: flex-end; justify-content: flex-start;
  aspect-ratio: 1 / .85; padding: 18px; text-align: left; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--line); background: var(--bg-soft) center/cover no-repeat; cursor: default;
  box-shadow: 0 10px 26px rgba(51, 54, 47, .07);
  transition: transform .35s ease, box-shadow .35s ease;
}
/* 사진이 어두워도 글자가 읽히도록 하단에 그라디언트를 깐다 */
.hb-daycard::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(20, 22, 18, 0) 45%, rgba(20, 22, 18, .62) 100%);
}
/* 강조되는 카드 위에 노란 틴트를 얹는다 — 사진이라 배경색 자체를 바꿀 수 없어 오버레이로 표현 */
.hb-daycard::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(224, 227, 230, .55) 0%, rgba(150, 157, 165, .5) 45%, rgba(210, 214, 218, .55) 100%);
  opacity: 0; transition: opacity .35s ease;
}
.hb-daycard span { position: relative; z-index: 2; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.25; }
.hb-daycard.is-auto-active {
  transform: translateY(-4px); box-shadow: var(--shadow);
}
.hb-daycard.is-auto-active::after { opacity: 1; }

/* ── 신청부터 이용까지 (WHY 섹션과 같은 다크 톤 + 글로우) ───────────────────── */
.hb-ltci { position: relative; background: #2b2e27; overflow: hidden; padding: 100px 0; }
.hb-ltci::before {
  content: ''; position: absolute; bottom: -120px; right: -100px; width: 900px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 225, 0, .6) 0%, rgba(255, 225, 0, .32) 32%, rgba(255, 225, 0, .1) 55%, transparent 75%);
  filter: blur(45px); pointer-events: none;
}
.hb-ltci .hb-wrap { position: relative; z-index: 1; }
.hb-ltci .hb-en { color: var(--brand); }
.hb-ltci-t {
  margin-bottom: 50px; font-size: var(--fs-h2); font-weight: 800; color: #fff; letter-spacing: -.03em;
}
.hb-ltci-steps { max-width: 900px; }
.hb-ltci-step {
  display: grid; grid-template-columns: 56px auto 1fr; align-items: center; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); position: relative;
}
.hb-ltci-step:last-child { border-bottom: 0; }
.hb-ltci-step i {
  font-style: normal; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3);
  display: grid; place-items: center; font-weight: 800; color: var(--brand); font-size: 15px; letter-spacing: -.02em;
}
.hb-ltci-step:not(:last-child)::after {
  content: ''; position: absolute; left: 21px; top: 66px; bottom: -4px; width: 1px; background: var(--brand); opacity: .45;
}
.hb-ltci-step b { font-size: var(--fs-h3); font-weight: 800; color: #fff; white-space: nowrap; }
.hb-ltci-step span { font-size: var(--fs-body); color: rgba(255, 255, 255, .62); line-height: 1.6; }

/* ── FAQ (홈으로 이동, WHY 섹션과 같은 다크 톤) ─────────────────────────────── */
.hb-faq { position: relative; background: #2b2e27; overflow: hidden; }
.hb-faq::before {
  content: ''; position: absolute; top: 0; right: -80px; width: 900px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 225, 0, .6) 0%, rgba(255, 225, 0, .32) 32%, rgba(255, 225, 0, .1) 55%, transparent 75%);
  filter: blur(45px); pointer-events: none;
}
.hb-faq .hb-wrap { position: relative; z-index: 1; }
.hb-faq .sr-faq { max-width: 900px; margin: 0 auto; }
.hb-faq .hb-en { color: var(--brand); }
.hb-faq .hb-shead h2 { color: #fff; }
.hb-faq .hb-shead h2 em { background: none; color: var(--brand); }
.hb-faq .hb-shead-lead { color: rgba(255, 255, 255, .68); }
.hb-faq .sr-faq { border-top-color: rgba(255, 255, 255, .25); }
.hb-faq .sr-faq-item { border-bottom-color: rgba(255, 255, 255, .14); }
.hb-faq .sr-faq-item > summary b { color: #fff; }
.hb-faq .sr-faq-item > summary i { border-color: rgba(255, 255, 255, .5); }
.hb-faq .sr-faq-item > summary:hover,
.hb-faq .sr-faq-item[open] > summary { background: rgba(255, 255, 255, .06); }
.hb-faq .sr-faq-a { background: rgba(255, 255, 255, .05); }
.hb-faq .sr-faq-a p { color: rgba(255, 255, 255, .72); }

/* ── LOCATION ────────────────────────────────────────────────────────────── */
.hb-loc-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.hb-loc-map .sf-map-embed { position: relative; height: 420px; }
.hb-loc-map .sf-map-embed iframe, .hb-loc-map .sf-map-embed > div { width: 100%; height: 100%; border: 0; }
.hb-loc-map .sf-map-links { display: flex; gap: 10px; padding: 14px; background: var(--bg-soft); }
.hb-loc-map .sf-map-links a { padding: 9px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.hb-loc-map .sf-map-fallback { padding: 40px; text-align: center; background: var(--bg-soft); }
.hb-loc-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 46px; }
.hb-loc-i { display: flex; align-items: flex-start; gap: 14px; }
.hb-loc-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--ink); }
.hb-loc-ic svg { width: 19px; height: 19px; }
.hb-loc-i b { display: block; margin-bottom: 4px; font-size: var(--fs-body); font-weight: 700; }
.hb-loc-i p { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-2); }
.hb-loc-i a { border-bottom: 1px solid transparent; }
.hb-loc-br-mobile { display: none; }
.hb-loc-i a:hover { border-color: var(--brand-deep); }

/* ── 서브페이지 ──────────────────────────────────────────────────────────── */
.hb-main { padding-top: var(--hd); }
.hb-sv {
  position: relative; height: 280px; display: flex; align-items: center;
  background: var(--bg-soft) center/cover no-repeat; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.hb-sv.has-photo { height: 400px; color: #fff; border-bottom: 0; }
.hb-sv.has-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(30, 32, 27, .76), rgba(30, 32, 27, .4)); }
.hb-sv-in { position: relative; z-index: 2; }
.hb-sv-g { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-eyebrow); font-weight: 600; color: var(--ink-2); }
.hb-sv-g::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.hb-sv.has-photo .hb-sv-g { color: var(--brand); }
.hb-sv.has-photo .hb-sv-g::before { background: var(--brand); }
.hb-sv-t { margin-top: 10px; font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.04em; }
.hb-crumb { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; }
.hb-crumb-in { display: flex; justify-content: flex-end; }
.hb-crumb-pill { display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.hb-sv.has-photo .hb-crumb-pill { background: rgba(51, 54, 47, .6); border-color: transparent; color: #fff; }
.hb-crumb-pill a { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--ink); display: grid; place-items: center; }
.hb-crumb-pill a svg { width: 17px; height: 17px; }
.hb-crumb-pill em { background: none; }
.hb-crumb-pill em:not(:empty)::after { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 0 3px 12px; border-radius: 50%; background: var(--line); }
.hb-crumb-pill b { font-weight: 700; color: var(--ink); }
.hb-sv.has-photo .hb-crumb-pill b { color: #fff; }

.hb-page { padding: 96px 0 120px; }
.hb-pt { margin-bottom: 34px; }
.hb-pt h2 { font-size: var(--fs-h2); font-weight: 800; }
.hb-pt p { margin-top: 16px; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.8; white-space: pre-line; }

/* 본문 조판 */
.hb-body { max-width: 1170px; margin: 0 auto; }
.hb-lead { font-size: var(--fs-lead); font-weight: 700; line-height: 1.65; letter-spacing: -.03em; white-space: pre-line; }
.hb-lead em { background: linear-gradient(transparent 58%, var(--brand-soft) 58%); }
.hb-text { margin-top: 24px; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-2); white-space: pre-line; }
.hb-text + .hb-text { margin-top: 20px; }
.hb-sign { margin-top: 34px; text-align: right; font-size: var(--fs-body-sm); font-weight: 700; color: var(--ink); }
.hb-photo { margin: 40px 0; border-radius: var(--radius); overflow: hidden; height: 360px; background-size: cover; background-position: center; }
.hb-photo:not(.has-photo) { position: relative; height: 240px; }
.hb-photo:not(.has-photo)::after { content: '사진 준비 중'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 15px; }
.hb-block { margin-top: 76px; }
.hb-block:first-child { margin-top: 0; }
.hb-h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.03em; }
.hb-h3::before { content: ''; flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--brand); }
.hb-h4 { margin-bottom: 14px; font-size: var(--fs-h3); font-weight: 700; }

/* 표 — 레퍼런스와 같은 구조(라벨 열 + 내용 열) */
.hb-table { border-top: 2px solid var(--ink); }
.hb-table th, .hb-table td { padding: 20px 24px; border-bottom: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.75; text-align: left; vertical-align: top; white-space: pre-line; }
.hb-table th { width: 230px; background: var(--tint); font-weight: 700; color: var(--ink); }
.hb-table td { color: var(--ink-2); }

/* 목록 */
.hb-list-box { padding: 26px 32px; background: var(--tint); border-radius: 16px; }
.hb-target { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; }
.hb-target span { flex: none; width: 9px; height: 9px; margin-top: 11px; border-radius: 50%; background: var(--brand-deep); }
.hb-target p { font-size: var(--fs-body); line-height: 1.7; }
/* 본문 아래 덧붙이는 한 줄 안내 */
.hb-note { margin-top: 16px; padding-left: 18px; border-left: 3px solid var(--brand); font-size: var(--fs-body); line-height: 1.75; color: var(--ink-2); white-space: pre-line; }
.hb-dots { display: grid; gap: 12px; }
.hb-dots li { position: relative; padding-left: 20px; font-size: var(--fs-body); line-height: 1.8; color: var(--ink-2); }
.hb-dots li::before { content: ''; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-deep); }

/* 강조 카드 3열 */
.hb-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hb-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.hb-card { padding: 32px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .24s, box-shadow .24s; }
.hb-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.hb-card h4 { margin-bottom: 12px; font-size: var(--fs-h3); }
.hb-card p { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-2); white-space: pre-line; }

/* 전문성 항목을 서브페이지에서 목록으로 쓸 때 */
.hb-merit { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.hb-merit-n { flex: none; width: 108px; padding: 7px 0; border-radius: 999px; background: var(--ink); color: var(--brand); font-size: 16px; font-weight: 700; text-align: center; height: fit-content; }
.hb-merit h4 { margin-bottom: 8px; font-size: var(--fs-h3); }
.hb-merit p { font-size: var(--fs-body); line-height: 1.8; color: var(--ink-2); }

/* 상담 유도 띠 */
.hb-cta { margin-top: 80px; padding: 54px 44px; border-radius: var(--radius); background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.hb-cta h3 { font-size: var(--fs-h3); font-weight: 800; }
.hb-cta p { margin-top: 12px; font-size: var(--fs-body); line-height: 1.8; color: rgba(255, 255, 255, .78); white-space: pre-line; }
.hb-cta-b { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── 게시판 ──────────────────────────────────────────────────────────────── */
.hb-board-empty { padding: 90px 20px; text-align: center; color: var(--muted); font-size: 16.5px; border: 1px dashed var(--line); border-radius: var(--radius); }

/* ── 푸터 ────────────────────────────────────────────────────────────────── */
.hb-ft { background: #2b2e27; color: rgba(255, 255, 255, .68); padding: 56px 0; font-size: 15px; }
.hb-ft-in { display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.hb-ft-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.hb-ft-logo { height: 32px; width: auto; flex: none; }
.hb-ft-brand-text {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -.02em;
  color: #fff;
  white-space: nowrap;
}
.hb-ft-info { line-height: 1.9; }
.hb-ft-info a:hover { color: #fff; }
.hb-ft-r { text-align: right; }
.hb-ft-links { display: flex; gap: 18px; justify-content: flex-end; margin-bottom: 16px; }
.hb-ft-links a { font-weight: 600; color: rgba(255, 255, 255, .85); }
.hb-ft-links a:hover { color: var(--brand); }
.hb-ft small { font-size: 13.5px; color: rgba(255, 255, 255, .45); }

/* ── 우측 플로팅 ─────────────────────────────────────────────────────────── */
.hb-quick { position: fixed; right: 22px; bottom: 26px; z-index: 80; display: grid; gap: 10px; }
.hb-quick-b { width: 88px; padding: 14px 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; gap: 5px; text-align: center; transition: transform .2s; }
.hb-quick-b svg { width: 23px; height: 23px; color: var(--ink); }
.hb-quick-b b { font-size: 14px; font-weight: 600; line-height: 1.3; word-break: keep-all; }
.hb-quick-b.is-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.hb-quick-b.is-dark svg { color: var(--brand); }
.hb-quick-b.is-band { background: #17833c; border-color: #17833c; color: #fff; }
.hb-quick-b.is-band svg { color: #fff; }
.hb-quick-b.is-blog { background: #ffc98f; border-color: #ffc98f; }
.hb-quick-b:hover { transform: translateX(-3px); }
.hb-quick-top { width: 88px; height: 44px; border-radius: 16px; background: var(--brand); color: var(--ink); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
.hb-quick-top svg { width: 20px; height: 20px; }
.hb-quick-top.is-on { opacity: 1; pointer-events: auto; }

/* ── 문의 모달 ───────────────────────────────────────────────────────────── */
.hb-iq { position: fixed; inset: 0; z-index: 120; background: rgba(30, 32, 27, .62); display: grid; place-items: center; padding: 20px; }
.hb-iq[hidden] { display: none; }
.hb-iq-box { width: min(520px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: var(--radius); padding: 34px; }
.hb-iq-head { display: flex; align-items: center; justify-content: space-between; }
.hb-iq-head h3 { font-size: 24px; font-weight: 800; }
.hb-iq-x { font-size: 30px; line-height: 1; color: var(--muted); }
.hb-iq-lead { margin: 8px 0 22px; font-size: 16px; color: var(--ink-2); }
.hb-iq-form label { display: block; margin-bottom: 16px; font-size: 15.5px; font-weight: 600; }
.hb-iq-form input, .hb-iq-form textarea {
  width: 100%; margin-top: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 16px; font-weight: 400; background: var(--bg-soft);
}
.hb-iq-form textarea { min-height: 120px; resize: vertical; }
.hb-iq-form input:focus, .hb-iq-form textarea:focus { outline: none; border-color: var(--brand-deep); background: #fff; }
.hb-iq-err { min-height: 22px; font-size: 14.5px; color: #c0392b; }
.hb-iq-submit { width: 100%; height: 56px; border-radius: 999px; background: var(--brand); font-size: 17px; font-weight: 700; color: var(--ink); }
.hb-iq-note { margin-top: 14px; text-align: center; font-size: 14.5px; color: var(--muted); }
.hb-iq-note a { font-weight: 700; color: var(--ink); }
.hb-iq-ok { text-align: center; padding: 30px 0; }
.hb-iq-ok[hidden] { display: none; }
.hb-iq-check { width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; font-size: 30px; font-weight: 700; color: var(--ink); }
.hb-iq-ok h4 { font-size: 21px; margin-bottom: 8px; }
.hb-iq-ok p { color: var(--ink-2); }

/* ── 시설둘러보기 영상 모달 ──────────────────────────────────────────────── */
.hb-vm { position: fixed; inset: 0; z-index: 130; background: rgba(10, 11, 8, .88); display: grid; place-items: center; padding: 20px; }
.hb-vm[hidden] { display: none; }
.hb-vm-box { width: min(920px, 100%); }
.hb-vm-video { width: 100%; max-height: 82vh; border-radius: 16px; background: #000; display: block; }
.hb-vm-x {
  position: absolute; top: 22px; right: 22px; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center;
  transition: background .18s;
}
.hb-vm-x:hover { background: rgba(255, 255, 255, .22); }

/* ── 스크롤 등장 ─────────────────────────────────────────────────────────── */
.js [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.js [data-rv].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-rv] { opacity: 1; transform: none; transition: none; }
  .hb-hero-scroll i { animation: none; }
  html { scroll-behavior: auto; }
  .hb-proc-track { animation: none; }
  .hb-proc-stack { height: auto; overflow: visible; }
  .hb-proc-stack::before, .hb-proc-stack::after { display: none; }
  .hb-proc-card[aria-hidden] { display: none; }
}

/* ── 반응형 ──────────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .hb-gnb-a { padding: 0 14px; font-size: 18px; }
}
@media (max-width: 1080px) {
  /* 데스크톱 헤더(92px) 대비 30% 줄인 두께 */
  :root { --hd: 64px; }
  .hb-gnb { display: none; }
  .hb-hd-cta { display: none; }
  /* flex의 margin-left:auto 계산에 기대지 않고 절대 위치로 고정 —
     일부 인앱 브라우저에서 flex 정렬이 초기 페인트에 반영 안 되는 경우가 있어 위치를 확정적으로 만든다 */
  .hb-burger { display: flex; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin-left: 0; }
  .hb-hd { padding-top: 8px; }
  .hb-hd-in { height: 56px; padding: 0 6px 0 18px; gap: 12px; position: relative; }
  /* 버거 버튼(42px)+우측 여백(6px)을 뺀 나머지 영역을 100으로 놓고, 그 영역의 정중앙에 로고+센터명을 배치한다 */
  .hb-brand { position: absolute; left: calc(50% - 24px); top: 50%; transform: translate(-50%, -50%); }
  .hb-brand img { width: 44px; }
  .hb-brand-text { font-size: 17px; }
  .hb-sec { padding: 80px 0; }
  .hb-proc-grid { grid-template-columns: 1fr; gap: 32px; }
  .hb-proc-title { position: static; }
  .hb-sv { height: 300px; }
  .hb-page { padding: 66px 0 84px; }
}
@media (max-width: 760px) {
  .hb-sec { padding: 44px 0; }
  .hb-shead { margin-bottom: 24px; }
  .hb-about .hb-shead { margin-bottom: 18px; }
  .hb-hero { min-height: max(680px, 100vh); }
  .hb-hd-in { padding: 0 6px 0 14px; gap: 8px; }
  .hb-brand { gap: 8px; }
  .hb-brand img { width: 68px; max-width: 22vw; }
  .hb-brand-text { font-size: 15px; }
  /* 히어로만 30px 별도 여백을 쓰던 것을 없애 다른 섹션(hb-wrap 15px)과 좌측 들여쓰기를 맞춘다 */
  .hb-hero-in { margin-left: 0; padding-bottom: 54px; }
  .hb-hero-eb { margin-bottom: 14px; font-size: 16px; }
  .hb-hero-t { line-height: 1.1; }
  .hb-hero-sub { margin-top: 12px; font-size: var(--fs-body-sm); }
  .hb-hero.has-photo, .hb-sv.has-photo, .hb-photo.has-photo {
    background-size: cover; background-position: center; transform: none;
  }
  .hb-hero-scroll { display: none; }
  .hb-hero-stats { flex-direction: column; margin-top: 16px; padding: 4px 0; }
  .hb-hero-stat { padding: 9px 0; border-bottom: 1px solid rgba(51, 54, 47, .16); }
  .hb-hero-btns { margin-top: 20px; }
  .hb-hero.has-photo .hb-hero-stat { border-color: rgba(255, 255, 255, .22); }
  .hb-hero-stat:last-child { border-bottom: none; }
  .hb-hero-stat:first-child { padding-left: 0; padding-top: 0; }
  .hb-hero-stat + .hb-hero-stat { border-left: none; }
  .hb-hero-stat b { font-size: 30px; }
  .hb-hero-stat b span { font-size: 14px; }
  .hb-hero-stat p { margin-top: 5px; font-size: 17.5px; }
  .hb-hero-btns { gap: 10px; }
  .hb-btn { min-width: 0; flex: 1 1 46%; height: 52px; padding: 0 16px; font-size: 16px; }
  .hb-bubble { margin-top: 28px; padding: 16px 26px; }
  .hb-reel { margin-top: 28px; }
  .hb-reel-tile { width: 190px; }
  .hb-reel-tile h3 { margin-top: 12px; }
  .hb-why { padding: 44px 0; }
  /* 줄바꿈된 문장이 짧은 단어 하나만 남기고 넘어가지 않도록, 폰트를 줄여 한 줄에 맞춘다 */
  .hb-why-t { font-size: 26px; }
  .hb-why-row { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 24px; padding-top: 20px; }
  .hb-proc-grid { gap: 20px; }
  .hb-proc-stack { height: 350px; }
  .hb-daily { padding: 26px 0; }
  .hb-daily .hb-shead { margin-bottom: 16px; }
  .hb-daycard-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hb-daycard {
    align-items: flex-end; justify-content: flex-start; text-align: left;
    aspect-ratio: 1 / .7; padding: 10px; border-radius: 12px; box-shadow: 0 6px 14px rgba(51, 54, 47, .07);
  }
  .hb-daycard span { font-size: 14px; font-weight: 700; }
  .hb-ltci { padding: 26px 0; }
  .hb-ltci-t { margin-bottom: 16px; font-size: 26px; }
  .hb-ltci-step { grid-template-columns: 32px 1fr; column-gap: 12px; row-gap: 3px; padding: 8px 0; }
  .hb-ltci-step i { width: 28px; height: 28px; font-size: 11px; }
  .hb-ltci-step:not(:last-child)::after { left: 13px; top: 40px; }
  .hb-ltci-step b { grid-column: 2; font-size: 16px; }
  .hb-ltci-step span { grid-column: 2; font-size: 13.5px; line-height: 1.4; }
  .hb-proc-card { grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 20px; }
  .hb-proc-card:nth-child(even) { margin-left: 0; }
  .hb-proc-card b { font-size: 30px; }
  .hb-grid3, .hb-grid2 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* LOCATION 섹션이 모바일 한 화면에 들어오도록: 지도를 낮추고, 네 항목을 2열로 접는다 */
  .hb-loc { padding: 44px 0; }
  .hb-loc .hb-shead { margin-bottom: 20px; }
  /* 리드 문장이 짧은 단어 하나만 남기고 줄바꿈되는 것을 막는다 */
  .hb-loc .hb-shead-lead { font-size: var(--fs-body-sm); }
  .hb-loc-map .sf-map-embed { height: 220px; }
  .hb-loc-map .sf-map-links { padding: 10px; }
  .hb-loc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 16px; margin-top: 14px; }
  .hb-loc-i { gap: 10px; }
  .hb-loc-ic { width: 32px; height: 32px; }
  .hb-loc-ic svg { width: 16px; height: 16px; }
  .hb-loc-i b { font-size: var(--fs-body-sm); }
  .hb-loc-i p { font-size: var(--fs-body-sm); line-height: 1.55; }
  .hb-loc-note-pc { display: none; }
  .hb-loc-br-mobile { display: block; }
  .hb-table th, .hb-table td { display: block; width: auto; padding: 14px 16px; }
  .hb-table th { border-bottom: 0; }
  .hb-merit { flex-direction: column; gap: 12px; }
  /* 대상 목록 문장이 짧은 단어 하나만 남기고 줄바꿈되는 것을 막는다 */
  .hb-target p { font-size: var(--fs-body-sm); }
  .hb-lead.is-tight { font-size: var(--fs-body-sm); }
  .hb-about-intro { padding: 24px 22px; }
  .hb-cta { padding: 34px 24px; }
  /* 전화번호 버튼(031-287-5099)이 반반 폭에서 두 줄로 쪼개지는 것을 막는다 */
  .hb-cta-b { flex-direction: column; }
  .hb-cta-b .hb-btn { width: 100%; white-space: nowrap; }
  .hb-ft { padding-bottom: 150px; }
  .hb-ft-in { flex-direction: column; }
  .hb-ft-brand { flex-wrap: wrap; }
  .hb-ft-brand-text { font-size: 22px; }
  .hb-ft-r { text-align: left; }
  .hb-ft-links { justify-content: flex-start; }
  .hb-quick { right: 12px; bottom: 14px; gap: 8px; }
  /* 히어로 버튼과 겹치는 것을 막기 위해, 히어로를 지나 스크롤해야 나타나게 한다(JS: data-quick) */
  .hb-quick[data-quick] { opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s; }
  .hb-quick[data-quick].is-on { opacity: 1; transform: none; pointer-events: auto; }
  .hb-quick-b { width: 62px; padding: 10px 6px; border-radius: 13px; }
  .hb-quick-b svg { width: 19px; height: 19px; }
  .hb-quick-b b { font-size: 12px; }
  .hb-quick-pre { display: none; }
  /* 아이콘만 있는 버튼이라 라벨 있는 버튼(62px)만큼 넓을 필요가 없다 — 정사각 FAB로 축소 */
  .hb-quick-top { width: 44px; height: 44px; border-radius: 50%; justify-self: end; }
  .hb-iq-box { padding: 24px 20px; }
}

/* ══ 게시판 (board/lib.php 가 그리는 화면) ═══════════════════════════════════
   목록·앨범·일별활동·상세·페이저. 클래스 이름은 엔진이 정한 것이라 그대로 받는다. */
.sr-board-empty { padding: 90px 20px; text-align: center; color: var(--muted); font-size: 16.5px; border: 1px dashed var(--line); border-radius: var(--radius); }

/* 목록형 — 공지사항 / 보호자 안내사항 */
.sr-board-list { border-top: 2px solid var(--ink); }
.sr-board-list > li { border-bottom: 1px solid var(--line); }
.sr-board-list > li > a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 16px; transition: background .2s; }
.sr-board-list > li > a:hover { background: var(--tint); }
.sr-board-tt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sr-board-tt b { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-board-pin { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--brand); font-size: 13px; font-weight: 700; color: var(--ink); }
.sr-board-meta { flex: none; display: flex; gap: 16px; font-size: var(--fs-body-sm); color: var(--muted); }

/* 앨범형 — 식단표 / 이달의 프로그램 / 시설구경하기 */
.sr-album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sr-album-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: border-color .24s, box-shadow .24s; }
.sr-album-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.sr-album-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--bg-soft); overflow: hidden; }
.sr-album-thumb img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s;
  transform: translate3d(calc(var(--tx, 0) * 1px), calc(var(--ty, 0) * 1px), 0) scale(1);
}
.sr-album-card:hover .sr-album-thumb img { transform: translate3d(calc(var(--tx, 0) * 1px), calc(var(--ty, 0) * 1px), 0) scale(1.08); }
.sr-album-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: var(--fs-body-sm); }
.sr-album-noimg::after { content: '사진 준비 중'; }
.sr-album-cnt { position: absolute; right: 12px; bottom: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(51, 54, 47, .78); color: #fff; font-size: 13px; font-weight: 600; }
.sr-album-info { padding: 18px 20px; }
.sr-album-info b { display: block; font-size: var(--fs-body-sm); font-weight: 600; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-album-info span { display: block; margin-top: 6px; font-size: var(--fs-body-sm); color: var(--muted); }

/* 일별활동 — 한 주(6일치) 카드를 가로 스크롤로 보여준다(식단표 pv-meal-scroll과 같은 화살표 재사용). 카드 안에는 사진(4:3)과 라벨·설명이 나란히 4줄(점심/저녁/오전/오후) */
.sr-daily-nav { display: flex; align-items: center; gap: 14px; margin: 0 0 40px; }
.sr-daily-month { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.sr-daily-scroll { display: flex; align-items: center; gap: 12px; }
.sr-daily { flex: 1; min-width: 0; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; padding: 3px 3px 8px; }
.sr-daily::-webkit-scrollbar { display: none; }
.sr-daily[hidden] { display: none; }
.sr-daily-i { flex: 0 0 340px; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.sr-daily-empty-card { display: grid; place-items: center; min-height: 220px; padding: 30px 24px; color: var(--muted); font-size: var(--fs-body-sm); text-align: center; }
.sr-daily-head { padding: 16px 20px; background: var(--tint); border-bottom: 1px solid #f0e9c4; }
.sr-daily-head b { font-size: var(--fs-body); font-weight: 700; letter-spacing: -.03em; }
.sr-daily-rows { display: grid; gap: 18px; padding: 18px 20px; }
.sr-daily-row { display: flex; gap: 14px; align-items: center; min-height: 102px; }
.sr-daily-row[hidden] { display: none; }
.sr-daily-ph { flex: none; width: 136px; margin: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.sr-daily-ph img { width: 100%; height: 100%; object-fit: cover; }
.sr-daily-rt { min-width: 0; }
.sr-daily-rt b { display: inline-block; padding: 3px 11px; margin-bottom: 6px; border-radius: 999px; background: var(--brand); font-size: 12.5px; font-weight: 800; color: var(--ink); }
.sr-daily-rt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* 상세 */
.sr-view-head { padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
.sr-view-head h3, .sr-view-head h2 { font-size: var(--fs-h3); font-weight: 800; }
.sr-view-meta { margin-top: 12px; display: flex; gap: 18px; font-size: var(--fs-body-sm); color: var(--muted); }
.sr-view-body { padding: 34px 4px; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-2); }
.sr-view-imgs { display: grid; gap: 20px; margin: 10px 0 34px; }
.sr-view-img { margin: 0; }
.sr-view-img img { width: 100%; border-radius: var(--radius); }
.sr-view-img figcaption { margin-top: 10px; font-size: var(--fs-body-sm); color: var(--muted); text-align: center; }
.sr-view-nav { border-top: 1px solid var(--line); }
.sr-view-nav a, .sr-view-prev, .sr-view-next { display: flex; gap: 14px; padding: 18px 6px; border-bottom: 1px solid var(--line); font-size: 16px; }
.sr-view-back { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 52px; margin: 30px auto 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; }
.sr-view-back:hover { background: var(--brand); color: var(--ink); }

/* 페이저 */
.sr-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 46px; }
.sr-pager a, .sr-pager strong, .sr-pager span { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; font-size: 15.5px; font-weight: 600; color: var(--ink-2); }
.sr-pager a:hover { background: var(--tint); }
.sr-pager strong, .sr-pager .on { background: var(--ink); color: #fff; }
.sr-pg-arw { border: 1px solid var(--line); }

@media (max-width: 1080px) {
  .sr-album-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .sr-album-grid { grid-template-columns: 1fr; gap: 18px; }
  .sr-board-list > li > a { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 12px; }
  .sr-board-tt b { white-space: normal; }
  .sr-daily-month { font-size: 24px; }
  .sr-daily-nav { display: none; }
  .sr-daily-scroll { gap: 6px; }
  .sr-daily-head { padding: 14px 18px; }
  .sr-daily-rows { padding: 16px 18px; gap: 14px; }
  .sr-daily-row { min-height: 78px; gap: 12px; }
  .sr-daily-ph { width: 104px; }
}

/* 자주 묻는 질문 — 질문을 누르면 답이 펼쳐진다(details/summary) */
.sr-faq { border-top: 2px solid var(--ink); }
.sr-faq-item { border-bottom: 1px solid var(--line); }
.sr-faq-item > summary {
  display: flex; align-items: center; gap: 16px; padding: 24px 8px 24px 4px;
  cursor: pointer; list-style: none; transition: background .2s;
}
.sr-faq-item > summary::-webkit-details-marker { display: none; }
.sr-faq-item > summary::marker { content: ''; }
.sr-faq-item > summary:hover { background: var(--tint); }
.sr-faq-q {
  flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--brand);
  display: grid; place-items: center; font-size: 17px; font-weight: 800; color: var(--ink);
}
.sr-faq-item > summary b { flex: 1; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; }
.sr-faq-item > summary i {
  flex: none; width: 11px; height: 11px; margin-right: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s;
}
.sr-faq-item[open] > summary i { transform: rotate(-135deg) translate(-3px, -3px); }
.sr-faq-item[open] > summary { background: var(--tint); }
.sr-faq-a { display: flex; gap: 16px; padding: 4px 20px 30px 4px; background: var(--tint); }
.sr-faq-mark {
  flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ink);
  display: grid; place-items: center; font-size: 17px; font-weight: 800; color: var(--brand);
}
.sr-faq-a p { flex: 1; padding-top: 7px; font-size: var(--fs-body); line-height: 1.85; color: var(--ink-2); white-space: pre-line; }

@media (max-width: 760px) {
  .sr-faq-item > summary { gap: 12px; padding: 12px 4px; }
  .sr-faq-q, .sr-faq-mark { width: 32px; height: 32px; font-size: 15px; }
  /* 질문 문장이 짧은 한 단어만 남기고 줄바꿈되는 것을 막는다(한 단계 작은 본문 크기로 한 줄에 맞춘다) */
  .sr-faq-item > summary b { font-size: var(--fs-body); font-weight: 700; }
  .sr-faq-a { gap: 12px; padding: 4px 14px 22px 4px; }
}

/* ══ 주간 프로그램표 — 자료실 실데이터 표시용 ═══════════════════
   기존 sr-board 토큰(--brand, --ink, --tint, --line)을 그대로 쓴다. */
.hb-sched-table { overflow-x: auto; }
.hb-sched-table table { min-width: 780px; border-top: 2px solid var(--ink); }
.hb-sched-table th, .hb-sched-table td { text-align: center; padding: 13px 12px; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.hb-sched-table thead th { background: var(--tint); font-weight: 700; color: var(--ink); }
.hb-sched-table thead th:first-child { text-align: left; }
.hb-sched-table td.time { font-weight: 700; color: var(--brand-deep); white-space: nowrap; text-align: left; background: var(--bg-soft); }
.hb-sched-table tr.common td { background: var(--tint); color: var(--ink-2); font-style: italic; }

/* ── 배경음악 토글 — 우하단 고정 ──────────────────────────────────────────── */
.audio-toggle {
  position: fixed; left: 22px; bottom: 26px; z-index: 85;
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--brand); border-radius: 999px; box-shadow: var(--shadow);
  transition: transform .2s;
}
.audio-toggle:hover { transform: translateY(-3px); }
.audio-toggle svg { width: 22px; height: 22px; }
.audio-toggle .icon-muted { display: none; }
.audio-toggle.is-muted .icon-playing { display: none; }
.audio-toggle.is-muted .icon-muted { display: block; }
@media (max-width: 760px) {
  .audio-toggle { left: 12px; bottom: 14px; width: 44px; height: 44px; }
  .audio-toggle svg { width: 19px; height: 19px; }
}

/* 모바일 브라우저 주소창 접힘/펼침에 따른 100vh 흔들림 방지 */
@supports (height: 100dvh) {
  @media (max-width: 760px) {
    .hb-hero { min-height: max(680px, 100dvh); }
  }
}