:root {
  /* Brand Colors */
  --brand-navy: #0f172a;      /* Slate 900 for high contrast text */
  --brand-navy-mid: #1e293b;  /* Slate 800 */
  --brand-blue: #0ea5e9;      /* Sky 500 for fresh air feel */
  --brand-blue-hover: #0284c7; /* Sky 600 */
  --brand-blue-soft: rgba(14, 165, 233, 0.08);
  --brand-blue-gradient: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  --brand-lime: #65a30d;      /* Lime 600 */
  --brand-lime-hover: #4d7c0f; /* Lime 700 */
  --brand-lime-soft: rgba(101, 163, 13, 0.1);
  --brand-lime-gradient: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);

  /* Layout Colors */
  --bg: #f8fafc;              /* Slate 50 */
  --bg-subtle: #f1f5f9;       /* Slate 100 */
  --surface: #ffffff;
  --ink: #334155;             /* Slate 700 */
  --ink-strong: #0f172a;      /* Slate 900 */
  --muted: #64748b;           /* Slate 500 */
  --border: rgba(15, 23, 42, 0.08);

  /* Measurements */
  --radius: 20px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.06);

  /* Typography */
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* 세로 스크롤 유무·오버레이 스크롤바에도 가로 너비가 흔들리지 않게.
   전역 smooth는 해시·페이지 진입 시 화면 전체가 미끄러지며 헤더가 어색해 보일 수 있음 */
html {
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  overflow-y: scroll;
  /* iOS Safari: 사용자 설정·자동 조정과 맞춰 의도한 rem 크기 유지 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 삽입 caret·콜아웃 최소화(전역 user-select와 함께) */
  caret-color: transparent;
  -webkit-touch-callout: none;
}

/* 앵커 스크롤 시 sticky 헤더 여유(JS 없을 때 폴백). 소개는 2줄 헤더 대비 조금 더 크게 */
main#top,
#process,
#blog {
  scroll-margin-top: 5.5rem;
}

/* 소개 메뉴 → 히어로 카피(Why FREESUM 위 본문) */
#intro {
  scroll-margin-top: clamp(5.5rem, 4rem + 4vw, 7rem);
}

@media (max-width: 720px) {
  #intro {
    scroll-margin-top: min(8.5rem, 22vh);
  }
}

#about {
  scroll-margin-top: clamp(6.75rem, 10vh, 9rem);
}

@media (max-width: 720px) {
  #about {
    scroll-margin-top: min(9.5rem, 24vh);
  }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  /* 짧은 페이지(문의·오시는 길)에서 로드 직후 높이 튐·헤더 흔들림 완화 */
  min-height: 100dvh;
  /* 텍스트 선택·편집 커서 억제(요청사항). 전화번호 등은 링크·버튼으로 이용 */
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

/* 넓은 화면: 모바일(≤720px) 보정은 아래 미디어쿼리 유지, 웹에서 가독성 소폭 상향 */
@media (min-width: 721px) {
  body {
    font-size: 1.125rem;
  }

  .logo-wordmark {
    font-size: clamp(1.12rem, 2.65vw, 1.42rem);
  }

  .nav a {
    font-size: 1.125rem;
    padding: 0.42rem 0.48rem;
  }

  .nav a::after {
    width: calc(100% - 0.96rem);
    left: 0.48rem;
  }

  .btn {
    font-size: 1.0625rem;
  }

  .btn-header {
    font-size: 1.125rem;
    padding: 0.52rem 1rem;
  }

  .hero-title {
    font-size: clamp(2.35rem, 4.75vw, 3.65rem);
  }

  .hero-eyebrow {
    font-size: 0.8125rem;
  }

  .hero-lead {
    font-size: 1.1875rem;
  }

  .section-label {
    font-size: 0.9375rem;
  }

  .section-title {
    font-size: clamp(1.85rem, 3.2vw, 2.65rem);
  }

  .section-lead {
    font-size: 1.1875rem;
  }

  .section-desc {
    font-size: 1.125rem;
  }

  .promo-video__fallback {
    font-size: 0.9375rem;
  }

  .promo-video__footer {
    font-size: 1.0625rem;
  }

  .about-icon {
    font-size: 1rem;
  }

  .about-card h3 {
    font-size: 1.1875rem;
  }

  .about-card p {
    font-size: 1rem;
  }

  .about-statement {
    font-size: 1.125rem;
  }

  .about-statement-eyebrow {
    font-size: 0.875rem;
  }

  .about-statement-title {
    font-size: clamp(1.45rem, 3.1vw, 1.75rem);
  }

  .about-statement-open {
    font-size: 1.125rem;
  }

  .about-statement-slogan p {
    font-size: 1.4375rem;
  }

  .about-registry dt {
    font-size: 0.875rem;
  }

  .about-registry dd {
    font-size: 1rem;
  }

  .step-num {
    font-size: 1.1rem;
  }

  .step-heading {
    font-size: 1.125rem;
  }

  .step-detail {
    font-size: 1.0625rem;
  }

  .blog-channel-links {
    font-size: 1.0625rem;
  }

  .filter-btn {
    font-size: 1rem;
  }

  .post-cat {
    font-size: 0.8125rem;
  }

  .post-title {
    font-size: 1.3125rem;
  }

  .post-date {
    font-size: 0.9375rem;
  }

  .care-members__lead {
    font-size: 1.1875rem;
  }

  .care-members__h {
    font-size: 1.125rem;
  }

  .care-members__block p {
    font-size: 1.125rem;
  }

  .contact-intro {
    font-size: 1.1875rem;
  }

  .contact-phone {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
  }

  .contact-phone-hint {
    font-size: 1rem;
  }

  .contact-note dt {
    font-size: 0.9375rem;
  }

  .contact-note dd {
    font-size: 1.0625rem;
  }

  .site-footer {
    font-size: 1rem;
  }

  .footer-brand {
    font-size: clamp(1.125rem, 2.3vw, 1.25rem);
  }

  .footer-channels-label {
    font-size: 1rem;
  }

  .footer-meta {
    font-size: 0.9375rem;
  }

  .modal-cat {
    font-size: 0.9rem;
  }

  .modal-box h3 {
    font-size: 1.5625rem;
  }

  .modal-excerpt {
    font-size: 1.125rem;
  }

  .modal-date {
    font-size: 1rem;
  }

  .directions-card__badge {
    font-size: 0.75rem;
  }

  .directions-card__title {
    font-size: 1.4375rem;
  }

  .directions-card__address {
    font-size: 1.0625rem;
  }

  .directions-card__meta dt {
    font-size: 0.875rem;
  }

  .directions-card__meta dd {
    font-size: 1rem;
  }

  .directions-card__map {
    font-size: 1rem;
  }
}

img {
  -webkit-user-drag: none;
}

/* 제목·리드: 가능한 브라우저에서 줄 길이 균형 */
.text-balance {
  text-wrap: balance;
}

@supports not (text-wrap: balance) {
  .text-balance {
    text-wrap: pretty;
  }
}

/* 넓은 화면에서는 자연스러운 자동 줄바꿈, 좁을 때만 의도적 끊기 */
@media (min-width: 720px) {
  br.break-md {
    display: none;
  }
}

@media (min-width: 640px) {
  br.break-sm {
    display: none;
  }

  br.hero-lead-br-mobile {
    display: none;
  }

  /* 문의 안내: 좁은 화면 전용 줄바꿈 — 태블릿·데스크톱에선 한 덩어리로 흐름 */
  br.contact-hint-br-mo {
    display: none;
  }
}

@media (min-width: 520px) {
  br.break-step {
    display: none;
  }
}

@media (min-width: 560px) {
  br.break-card {
    display: none;
  }
}

a {
  color: var(--brand-blue);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--brand-blue-hover);
}

/* 92vw는 스크롤바/100vw 정의 차이로 페이지마다 실제 너비가 달라질 수 있음 → % 기반 */
.inner {
  box-sizing: border-box;
  width: min(1140px, calc(100% - 2rem));
  margin-inline: auto;
}

/* —— Header —— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-sm);
  transition: background 0.3s, backdrop-filter 0.3s;
}

/* 3존 그리드: 로고 | 내비(가운데 정렬 클러스터) | CTA — wide 화면에서 내비 주변 덩어리 공백 방지 */
.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto max-content;
  align-items: center;
  column-gap: clamp(0.45rem, 0.9vw, 1.05rem);
  row-gap: 0.5rem;
  padding: 0.6rem 0;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.45rem, 1.1vw, 0.65rem);
  justify-self: start;
  text-decoration: none !important;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.logo-wordmark {
  font-weight: 800;
  font-size: clamp(1.0625rem, 2.55vw, 1.28rem);
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* 투명 PNG 로고: 검정/불투명 박스 없이 페이지 배경만 비침 */
.site-logo,
.hero-logo-breathe,
.hero-banner-img,
.footer-badge-main {
  display: block;
  background: transparent;
  background-color: transparent;
}

.site-logo {
  height: 48px;
  width: auto;
  transition: transform 0.2s;
}

.logo-link:hover .site-logo {
  transform: scale(1.02);
}

.logo-link:hover .logo-wordmark {
  color: var(--brand-blue);
}

.nav {
  display: flex;
  justify-self: center;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.08rem clamp(0.08rem, 0.35vw, 0.42rem);
  max-width: min(100%, 40rem);
}

.nav a {
  color: var(--muted);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  position: relative;
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav a::after {
  content: '';
  position: absolute;
  width: calc(100% - 0.9rem);
  left: 0.45rem;
  transform: scaleX(0);
  height: 2px;
  bottom: 0.2rem;
  background-color: var(--brand-blue);
  transform-origin: bottom right;
  transition: transform 0.15s ease-out;
}

.nav a:hover {
  color: var(--brand-blue);
  background: rgba(14, 165, 233, 0.07);
}

.nav a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* scale 제거: 클릭 후 전환·폰트 로드와 겹치면 글자가 커졌다 작아지는 것처럼 보임 */
.nav a:active {
  color: var(--brand-blue);
  background-color: rgba(14, 165, 233, 0.12);
}

.nav a:active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* 같은 메뉴 재클릭(이미 맨 위)일 때 살짝 눌렀다는 느낌 */
@keyframes nav-same-page-ack {
  0% {
    background-color: rgba(14, 165, 233, 0.16);
  }
  100% {
    background-color: rgba(14, 165, 233, 0.06);
  }
}

.nav a.nav-same-page-ack {
  animation: nav-same-page-ack 0.22s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .nav a,
  .nav a::after {
    transition: none;
  }

  .nav a.nav-same-page-ack {
    animation: none;
  }

  .hero-logo-breathe {
    animation: none;
    filter:
      drop-shadow(0 0 1px rgba(14, 165, 233, 0.28))
      drop-shadow(0 0 2px rgba(186, 230, 253, 0.32))
      drop-shadow(0 12px 28px rgba(14, 165, 233, 0.14));
    will-change: auto;
  }
}

/* —— Buttons —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: scale(0.96);
}

.btn-header {
  justify-self: end;
  background: var(--surface);
  color: var(--brand-navy);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 0.95rem;
  font-size: 1.0625rem;
  line-height: 1.1;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-header:hover {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(14, 165, 233, 0.25);
}

.btn-primary {
  background: var(--brand-blue); /* More professional primary blue */
  color: #fff;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
}

.btn-primary:hover {
  background: var(--brand-blue-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink-strong);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* 카카오톡 오픈채팅 (브랜드 옐로) */
.btn-kakao {
  background: #fee500;
  color: #191919;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-weight: 800;
}

.btn-kakao:hover {
  color: #191919;
  filter: brightness(0.97);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* —— Hero —— */
.hero {
  position: relative;
  padding: 0 0 clamp(0.5rem, 2vw, 1.25rem);
  overflow: hidden;
  background: #ffffff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* 이미지~카피 사이 여백에 청색이 비치지 않도록 데코 레이어 없음 */
  background: none;
  z-index: 0;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  /* 메인 비주얼과 카피 사이 간격 최소화 */
  margin-top: clamp(0.25rem, 1.5vw, 0.85rem);
  padding-top: clamp(0.65rem, 2.5vw, 1.75rem);
  padding-bottom: clamp(0.75rem, 2vw, 1.5rem);
  background-color: #ffffff;
}

/*
 * 본문 영역 세로만, 가로는 뷰포트 풀블리드 — 히어로-본문 이음부 청색 비침 최소화.
 */
.hero-inner::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.62) 12%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.58) 14%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(ellipse 72vw 190% at 0% 50%, rgba(101, 163, 13, 0.05) 0%, transparent 58%),
    radial-gradient(ellipse 68vw 185% at 100% 48%, rgba(14, 165, 233, 0.028) 0%, transparent 56%),
    linear-gradient(
      90deg,
      rgba(220, 252, 231, 0.04) 0%,
      rgba(255, 255, 255, 0) 22%,
      rgba(255, 255, 255, 0) 78%,
      rgba(224, 242, 254, 0.02) 100%
    );
}

/* 왼쪽: 카피 전체 / 오른쪽: 로고만 — 서로 레이아웃에 관여하지 않음 */
.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5.5vw, 4.25rem);
  align-items: start;
}

.hero-copy {
  min-width: 0;
  max-width: 38rem;
}

.hero-logo-aside {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 0.2rem;
}

.hero-title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: var(--ink-strong);
}

.hero-logo-breathe {
  display: block;
  width: auto;
  max-width: min(26.25rem, 36vw);
  height: auto;
  object-fit: contain;
  object-position: center;
  /* PNG 실루엣 따라 잡히는 얇은 테두리 + 옅은 하늘 헤일로 + 기존 깊이 그림자 */
  filter:
    drop-shadow(0 0 1px rgba(14, 165, 233, 0.28))
    drop-shadow(0 0 2px rgba(186, 230, 253, 0.32))
    drop-shadow(0 12px 28px rgba(14, 165, 233, 0.14));
  animation: hero-logo-breathe 5.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes hero-logo-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-14px) scale(1.035);
  }
}

/* 풀폭 메인 비주얼: 원본 비율 유지 · 하단 페이드(<figure> 기본 마진 제거·서브픽셀 줄무늬 방지) */
.hero-media {
  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 0;
  line-height: 0;
  overflow: hidden;
}

.hero-media::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* 아래로 1px 넘겨 이미지·그라데이션 경계의 헤어라인 제거 */
  bottom: -1px;
  height: calc(min(5.5vh, 3rem) + 2px);
  background: linear-gradient(
    to top,
    #ffffff 0%,
    #ffffff 38%,
    rgba(255, 255, 255, 0.97) 52%,
    rgba(255, 255, 255, 0.55) 78%,
    rgba(255, 255, 255, 0.06) 96%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* 비트맵 하단 1px 잔선(특정 뷰포트 배율) 보정 */
.hero-media::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #ffffff;
  z-index: 3;
  pointer-events: none;
}

.hero-banner-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.hero-eyebrow {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: var(--brand-lime-soft);
  color: var(--brand-lime-hover);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}

.hero-accent {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-lime) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* Fallback */
}

.hero-lead {
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.8;
  margin: 0 0 2rem;
  max-width: 26rem;
}

/* 좁은 뷰: 2×2 / 넓은 뷰: 한 줄(버튼 문구 길이 고려해 992px↑) */
.hero-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  width: 100%;
  max-width: 26rem;
}

.hero-cta .btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 992px) {
  .hero-cta {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    width: auto;
    max-width: none;
  }

  .hero-cta .btn {
    width: auto;
  }
}

/* —— Sections —— */
.section {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  position: relative;
}

/* 히어로 직후 블록: 공통 section 패딩만으로 상단이 과하지 않게 */
.section.about {
  padding-top: clamp(2rem, 4.5vw, 3.25rem);
}

/* 프로세스: Video 블록 직후라 상단만 촘촘하게(하단은 공통 section 패딩 유지) */
.section.process {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* Field & Insights(블로그): Process 직후 — 상단 여백 동일 톤 */
.section.blog-section {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.section-label {
  display: inline-block;
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  position: relative;
  padding-left: 1.65rem;
}

.section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.15rem;
  height: 3px;
  background: var(--brand-lime);
  border-radius: 2px;
}

.section-title {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  line-height: 1.3;
}

.section-lead {
  margin: 0 0 3rem;
  max-width: 44rem;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.75;
}

.section-desc {
  margin: 0;
  max-width: 40rem;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* 메인: 대표 유튜브 영상 */
.promo-video {
  background: var(--bg-subtle);
  border-block: 1px solid var(--border);
}

.promo-video__lead {
  margin-bottom: 2rem;
}

.video-shell {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto 1.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--brand-navy);
  aspect-ratio: 16 / 9;
}

.video-shell__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.promo-video__fallback {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

.promo-video__fallback a {
  font-weight: 600;
  color: var(--brand-blue);
}

.promo-video__fallback a:hover {
  color: var(--brand-blue-hover);
}

.promo-video__footer {
  margin: 0 auto;
  text-align: center;
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 36rem;
}

.promo-video__footer a {
  font-weight: 700;
  color: var(--brand-blue);
}

.promo-video__footer a:hover {
  color: var(--brand-blue-hover);
}

/* About: 한 행 안에서는 카드 높이를 동일하게(그리드 stretch) */
.about-grid {
  display: grid;
  align-items: stretch;
  gap: 1.25rem 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (min-width: 901px) and (max-width: 1024px) {
  .about-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-card:nth-child(3) {
    grid-column: 1 / -1;
  }
}

.about-card {
  background: var(--surface);
  padding: 1.5rem 1.35rem 1.6rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  position: relative;
  overflow: hidden;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
}

.about-card__copy {
  min-width: 0;
}

.about-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-lime));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.about-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(14, 165, 233, 0.18);
}

.about-card:hover::before {
  opacity: 1;
}

.about-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: 10px;
  margin: 0;
  align-self: start;
}

.about-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ink-strong);
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.about-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.about-statement {
  margin-top: 1.5rem;
  padding: clamp(1.75rem, 4vw, 2.35rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.9;
  border: 1px solid var(--border);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.about-statement p {
  margin: 0 0 1.15rem;
}

.about-statement-eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.about-statement-title {
  margin: 0 0 1.1rem;
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  font-weight: 800;
  color: var(--ink-strong);
  letter-spacing: -0.035em;
  line-height: 1.25;
}

.about-statement-open {
  margin: 0 0 1.6rem !important;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--ink-strong);
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: -0.02em;
}

.about-statement-body {
  max-width: 42rem;
}

.about-statement-body > p {
  margin: 0 0 1.4rem;
  color: var(--ink);
}

.about-statement-body > p:last-of-type {
  margin-bottom: 0;
}

.about-statement-slogan {
  margin: 1.45rem 0 1.45rem;
  padding: 1.5rem 1.35rem 1.5rem 1.45rem;
  border: 0;
  border-left: 5px solid var(--brand-blue);
  background: rgba(15, 23, 42, 0.058);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  quotes: none;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.06);
}

.about-statement-slogan p {
  margin: 0 !important;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--ink-strong);
  line-height: 1.62;
  letter-spacing: -0.032em;
}

.about-statement-slogan footer {
  margin: 0.75rem 0 0;
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink-strong);
  font-style: normal;
  line-height: 1.42;
  letter-spacing: -0.02em;
}

.about-brand-mark {
  font-style: normal;
  font-weight: 700;
  color: var(--brand-blue);
}

.about-statement-close {
  margin-top: 1.85rem !important;
  margin-bottom: 0.85rem !important;
  font-weight: 700;
  color: var(--ink-strong);
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

.about-statement-sign {
  margin: 0 0 1.35rem !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}

.about-statement-sign-block {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 100%;
}

.about-statement-sign-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  line-height: 1.28;
  text-align: right;
}

.about-statement-sign-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink-strong);
  line-height: 1.25;
}

.about-statement-sign-logo {
  height: clamp(2.65rem, 5.5vw, 3.05rem);
  width: auto;
  max-width: 10rem;
  object-fit: contain;
  object-position: center;
  display: block;
  flex-shrink: 0;
  opacity: 0.95;
}

.about-statement-sign-role {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.about-registry {
  margin: 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--border);
}

.about-registry-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem clamp(1rem, 3vw, 2rem);
  width: 100%;
}

.about-registry-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.45rem 0.6rem;
  flex: 0 0 auto;
}

.about-registry dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--muted);
  flex: 0 0 auto;
}

.about-registry dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-strong);
  word-break: keep-all;
}

.about-registry dd a {
  font-weight: 700;
  text-decoration: none;
}

.about-registry dd a:hover {
  text-decoration: underline;
}

.about-registry-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.6rem;
  flex: 1 1 12rem;
  margin-inline-start: auto;
  min-width: 0;
}

.about-mark {
  height: clamp(40px, 4.5vw, 52px);
  width: auto;
  max-width: min(26vw, 10rem);
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .about-statement {
    padding: 1.5rem 1.25rem 1.6rem;
  }

  /* 한 줄 강제 + 가로 스크롤 제거 → 세로·줄바꿈으로 가독성 */
  .about-registry-strip {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.85rem 0;
    overflow: visible;
    padding-bottom: 0;
  }

  .about-registry-item {
    flex: none;
    flex-wrap: wrap;
  }

  .about-registry-marks {
    flex: none;
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
    gap: 0.45rem 0.55rem;
    padding-top: 0.15rem;
  }

  .about-mark {
    height: 38px;
    max-width: min(30vw, 8.5rem);
  }
}

/* —— Process (Bright Redesign) —— */
.process {
  background: var(--brand-blue-gradient);
  position: relative;
  overflow: hidden;
}

.process::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.8;
  mix-blend-mode: overlay;
  z-index: 0;
}

.process .inner {
  position: relative;
  z-index: 1;
}

.process .section-label::before {
  background: var(--brand-blue);
}

.process-steps {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  max-width: 40rem;
}

.process-steps li {
  position: relative;
  display: block;
  padding: 0 0 1.85rem 4.35rem;
  margin: 0;
}

.process-steps li:last-child {
  padding-bottom: 0;
}

/* 단계 사이 세로 연결선 */
.process-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.5rem - 1px);
  top: 3.15rem;
  bottom: 0.35rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(14, 165, 233, 0.45) 0%,
    rgba(14, 165, 233, 0.12) 100%
  );
}

.process-steps li::after {
  content: "";
  position: absolute;
  left: 4.35rem;
  right: 0;
  top: 0;
  bottom: 1.85rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 28px rgba(14, 165, 233, 0.07);
  z-index: 0;
  pointer-events: none;
}

.process-steps li:last-child::after {
  bottom: 0;
}

.step-num {
  position: absolute;
  left: 0;
  top: 0.15rem;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
  transition: transform 0.2s ease;
}

.step-copy {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.5rem 1.35rem 1.5rem;
}

.step-heading {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  line-height: 1.35;
}

.step-detail {
  margin: 0.5rem 0 0;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--muted);
}

.process-steps li:hover::after {
  box-shadow: 0 12px 36px rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.2);
}

.process-steps li:hover .step-num {
  transform: scale(1.04);
}

/* —— Blog Section —— */
.blog-head {
  margin-bottom: 2rem;
}

.blog-channel-links {
  margin: 1rem 0 0;
  max-width: 40rem;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.75;
}

.blog-channel-links a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.blog-channel-links a:hover {
  text-decoration: underline;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  justify-content: center;
}

.filter-btn {
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  box-shadow: var(--shadow-sm);
}

.filter-btn[aria-selected="true"] {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.post-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(14, 165, 233, 0.2);
}

.post-card:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 4px;
}

.post-thumb-wrap {
  aspect-ratio: 16 / 10;
  background: var(--bg-subtle);
  overflow: hidden;
  position: relative;
}

.post-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-card:hover .post-thumb {
  transform: scale(1.05);
}

.post-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post-cat {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--brand-lime-hover);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.post-title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.post-date {
  margin: auto 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.post-date::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
}

/* —— Contact (문의 전용 페이지) —— */
.contact {
  text-align: left;
  background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
  padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(4rem, 9vw, 7rem);
}

.contact-inner {
  max-width: 42rem;
  margin: 0 auto;
}

.contact .section-label {
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.contact__head {
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

/* 히어로 없는 서브페이지: 공통 .section 상단 패딩보다 헤더~제목 사이를 촘촘하게 */
.section.care-members {
  padding-top: clamp(1.75rem, 3.75vw, 2.75rem);
  padding-bottom: clamp(3rem, 6.5vw, 5.5rem);
}

.care-members-inner {
  max-width: 48rem;
  margin: 0 auto;
}

.care-members__head {
  margin-bottom: 1.75rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.care-members__lead {
  margin-bottom: 0;
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--ink-strong);
  font-weight: 500;
}

.care-members__body {
  margin: 0 0 2.5rem;
}

.care-members__block + .care-members__block {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.care-members__h {
  margin: 0 0 0.65rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  line-height: 1.35;
}

.care-members__block p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.82;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.care-members__body a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.care-members__body a:hover {
  text-decoration: underline;
}

.care-members__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.contact .section-title {
  margin-bottom: 1.25rem;
}

.contact-intro {
  margin: 0;
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.78;
  color: var(--ink-strong);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.contact-summary {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.contact-phone {
  margin: 0 0 0.35rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: center;
}

.contact-phone a {
  color: var(--brand-blue);
  text-decoration: none;
  border-bottom: 2px solid rgba(14, 165, 233, 0.35);
  padding-bottom: 0.05em;
  transition: color 0.2s, border-color 0.2s;
}

.contact-phone a:hover {
  color: var(--brand-blue-hover);
  border-bottom-color: var(--brand-blue-hover);
}

.contact-phone-hint {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--muted);
  letter-spacing: -0.01em;
}

/* 전화번호 아래 첫 안내(운영·통화 지연)만 가운데 — 카카오 블록 문단은 좌측 유지 */
.contact-phone-hint:not(.contact-kakao-hint) {
  text-align: center;
}

.contact-note {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.contact-note-pair {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.contact-note-pair:first-child {
  padding-top: 0;
}

.contact-note-pair:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.contact-note dt {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.contact-note dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}

.contact-note dd a {
  font-weight: 700;
  text-decoration: none;
}

.contact-note dd a:hover {
  text-decoration: underline;
}

@media (max-width: 400px) {
  .contact-note-pair {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 0;
}

.contact-kakao-panel {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.contact-kakao-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.contact-kakao-hint {
  margin-top: 0;
  margin-bottom: 0;
}

.contact-kakao-url {
  display: inline-block;
  margin-top: 0.4rem;
  word-break: break-all;
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.contact-kakao-url:hover {
  text-decoration: underline;
}

.contact-kakao-hint a:not(.contact-kakao-url) {
  word-break: break-all;
}

/* —— Footer —— */
.site-footer {
  padding: clamp(3.25rem, 6vw, 4.75rem) 0;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.footer-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-brand-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.35rem, 3.5vw, 2rem);
  margin-bottom: clamp(2.25rem, 4vw, 2.85rem);
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}

/* 상단: 메인 로고 + 인증 마크 4종(한 행 · 참고 레이아웃) */
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: clamp(0.85rem, 2vw, 1.15rem);
  column-gap: clamp(0.65rem, 2vw, 1.2rem);
  width: 100%;
}

.footer-badge-main {
  height: clamp(46px, 5.2vw, 56px);
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* 상호·슬로건 문구만 (로고 없음) */
.footer-brand-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

.footer-brand-line .footer-brand {
  text-align: center;
  max-width: min(100%, 34rem);
}

/* KSAMA·클린존·워드마크 등 푸터 배지 (footerlogo1–3) */
.footer-mark {
  height: clamp(50px, 5.75vw, 60px);
  width: auto;
  max-width: min(52vw, 14rem);
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  display: block;
  flex-shrink: 0;
}

.footer-brand {
  margin: 0;
  font-weight: 700;
  color: var(--ink-strong);
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.footer-channels {
  margin: 0 0 clamp(1.85rem, 3vw, 2.35rem);
  padding: 0;
  width: 100%;
  max-width: 42rem;
}

.footer-channels-label {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink-strong);
  line-height: 1.4;
}

.footer-meta {
  margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
  padding: 0 0.75rem;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: #5c6673;
}

.footer-meta-line {
  margin: 0 0 0.5rem;
}

.footer-meta-line:last-child {
  margin-bottom: 0;
}

.footer-meta a {
  color: var(--ink-strong);
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}

.footer-meta a:hover {
  color: var(--brand-blue);
}

.footer-channel-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.15rem;
}

.footer-channel-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.footer-channel-icon svg {
  width: 1.28rem;
  height: 1.28rem;
  display: block;
}

.footer-channel-links > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--ink-strong);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.footer-channel-links > a:hover {
  color: var(--brand-blue);
  background: var(--brand-blue-soft);
  border-color: rgba(14, 165, 233, 0.2);
}

.footer-legal {
  max-width: 42rem;
  margin-inline: auto;
  padding: 0 0.5rem;
}

.footer-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 0.8125rem;
}

.footer-copy-strong {
  font-weight: 700;
  color: var(--ink-strong);
}

.footer-copy-suffix {
  color: #94a3b8;
  font-weight: 500;
}

/* —— Modal —— */
.post-modal {
  max-width: min(640px, 94vw);
  width: 100%;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

.post-modal::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-box {
  padding: 2.5rem 2.5rem 3rem;
  position: relative;
  background: var(--surface);
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: var(--bg-subtle);
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  user-select: none;
  -webkit-user-select: none;
}

.modal-close-icon {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.modal-close:focus {
  outline: none;
}

.modal-close:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

.modal-close:hover {
  background: #fee2e2;
  color: #ef4444;
  transform: rotate(90deg);
}

.modal-img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  background: var(--bg-subtle);
}

.modal-cat {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--brand-lime-hover);
  text-transform: uppercase;
}

.modal-box h3 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.modal-excerpt {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.7;
}

.modal-date {
  margin: 0 0 2rem;
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 500;
}

.modal-link {
  width: 100%;
  justify-content: center;
}

/* —— Responsive Design —— */
@media (max-width: 900px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .hero-copy {
    text-align: center;
    margin-inline: auto;
    max-width: 40rem;
  }

  .hero-logo-aside {
    justify-content: center;
    padding-top: 0;
  }

  .hero-logo-breathe {
    max-width: min(26.25rem, 88vw);
  }

  .hero-lead {
    margin-inline: auto;
  }

  .hero-cta {
    margin-inline: auto;
  }

  .section-label::before {
    display: none;
  }
  .section-label {
    padding-left: 0;
  }

  .process-steps {
    max-width: none;
  }

  .process-steps li {
    padding-left: 3.65rem;
    padding-bottom: 1.5rem;
  }

  .process-steps li:not(:last-child)::before {
    left: calc(1.325rem - 1px);
    top: 2.85rem;
  }

  .process-steps li::after {
    left: 3.65rem;
  }

  .step-num {
    width: 2.65rem;
    height: 2.65rem;
    font-size: 0.95rem;
  }

  .step-copy {
    padding: 1.05rem 1.15rem 1.15rem;
  }

  .step-heading {
    font-size: 1.12rem;
  }

  .step-detail {
    font-size: 1.0625rem;
  }
}

@media (max-width: 720px) {
  .header-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo phone"
      "nav nav";
    align-items: center;
  }

  .logo-link {
    grid-area: logo;
  }

  .nav {
    grid-area: nav;
    width: 100%;
    justify-self: stretch;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.2rem;
    column-gap: 0.12rem;
    margin-top: 0.12rem;
    padding: 0.3rem 0 0.3rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
  }

  .btn-header {
    grid-area: phone;
    display: inline-flex;
    justify-self: end;
    padding: 0.55rem 0.88rem;
    font-size: 1.3125rem;
  }

  .modal-box {
    padding: 1.5rem;
  }
}

/* ≤720px: 모바일·좁은 창 가독성 — 본문·제목·UI 글자 상향 (아이폰 등 터치 기기) */
@media (max-width: 720px) {
  body {
    font-size: 1.3125rem;
    line-height: 1.74;
  }

  /* 내비: 가운데 정렬·줄바꿈 허용(가로 스크롤 없음), 본문보다 약간만 작게 */
  .nav a {
    font-size: 1.125rem;
    padding: 0.4rem 0.4rem;
    letter-spacing: -0.02em;
  }

  .nav a::after {
    width: calc(100% - 0.8rem);
    left: 0.4rem;
  }

  .logo-wordmark {
    font-size: clamp(1.4rem, 4.5vw, 1.6rem);
  }

  .site-logo {
    height: 58px;
  }

  .btn {
    font-size: 1.1875rem;
    padding: 0.95rem 1.65rem;
  }

  .btn-header {
    font-size: 1.3125rem;
    padding: 0.55rem 0.92rem;
  }

  .hero-title {
    font-size: clamp(2.85rem, 10.5vw, 3.5rem);
    line-height: 1.17;
  }

  .hero-lead {
    font-size: 1.375rem;
    line-height: 1.76;
    max-width: none;
  }

  .hero-eyebrow {
    font-size: 0.9375rem;
    padding: 0.48rem 1.1rem;
  }

  .section-title {
    font-size: clamp(2.15rem, 8vw, 2.5rem);
    line-height: 1.27;
  }

  .section-label {
    font-size: 1.125rem;
    margin-bottom: 0.9rem;
    letter-spacing: 0.12em;
  }

  .section-lead {
    font-size: 1.375rem;
    line-height: 1.76;
  }

  .section-desc {
    font-size: 1.25rem;
    line-height: 1.76;
  }

  .about-card h3 {
    font-size: 1.3125rem;
  }

  .about-card p {
    font-size: 1.1875rem;
    line-height: 1.74;
  }

  .about-statement {
    font-size: 1.25rem;
    line-height: 1.84;
  }

  .about-statement-eyebrow {
    font-size: 1.0625rem;
    letter-spacing: 0.11em;
  }

  .about-statement-title {
    font-size: clamp(1.5rem, 4.6vw, 1.7rem);
  }

  .about-statement-open {
    font-size: 1.1875rem;
  }

  .about-statement-slogan p {
    font-size: 1.5rem;
  }

  .about-statement-slogan footer {
    font-size: 1.1875rem;
  }

  .about-statement-close {
    font-size: 1.1875rem;
  }

  .about-registry dt {
    font-size: 0.9375rem;
  }

  .about-registry dd {
    font-size: 1.125rem;
  }

  .step-heading {
    font-size: 1.28rem;
  }

  .step-detail {
    font-size: 1.1875rem;
    line-height: 1.78;
  }

  .step-num {
    font-size: 1.125rem;
  }

  .filter-btn {
    font-size: 1.1875rem;
    padding: 0.72rem 1.55rem;
  }

  .blog-channel-links {
    font-size: 1.1875rem;
  }

  .post-cat {
    font-size: 0.9375rem;
  }

  .post-title {
    font-size: 1.5rem;
    line-height: 1.4;
  }

  .post-date {
    font-size: 1.125rem;
  }

  .post-body {
    padding: 1.65rem 1.5rem;
  }

  .site-footer {
    font-size: 1.1875rem;
  }

  .footer-brand {
    font-size: clamp(1.15rem, 4.2vw, 1.3rem);
  }

  .footer-channels-label {
    font-size: 1.125rem;
  }

  .footer-channel-links > a {
    font-size: 1.125rem;
    padding: 0.55rem 0.95rem;
  }

  .footer-channel-icon svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  .footer-meta {
    font-size: 1.0625rem;
  }

  .footer-copy {
    font-size: 1rem;
  }

  .contact-intro {
    font-size: 1.375rem;
  }

  .contact-phone {
    font-size: clamp(2.2rem, 9.5vw, 3.35rem);
  }

  .contact-phone-hint {
    font-size: 1.125rem;
  }

  .contact-note dt {
    font-size: 1.0625rem;
  }

  .contact-note dd {
    font-size: 1.1875rem;
  }

  .contact-kakao-title {
    font-size: 1.1875rem;
  }

  .contact-kakao-hint {
    font-size: 1.125rem;
  }

  .care-members__block p {
    font-size: 1.25rem;
  }

  .care-members__lead {
    font-size: 1.375rem;
  }

  .care-members__h {
    font-size: 1.25rem;
  }

  .modal-box h3 {
    font-size: 1.75rem;
  }

  .modal-cat {
    font-size: 0.9375rem;
  }

  .modal-excerpt {
    font-size: 1.1875rem;
    line-height: 1.76;
  }

  .modal-date {
    font-size: 1.125rem;
  }

  .promo-video__fallback {
    font-size: 1.125rem;
  }

  .promo-video__footer {
    font-size: 1.1875rem;
  }

  .directions-card__badge {
    font-size: 0.82rem;
  }

  .directions-card__title {
    font-size: clamp(1.5rem, 4.35vw, 1.65rem);
  }

  .directions-card__address {
    font-size: 1.1875rem;
    line-height: 1.78;
  }

  .directions-card__meta dt {
    font-size: 0.9375rem;
  }

  .directions-card__meta dd {
    font-size: 1.125rem;
  }

  .directions-card__map {
    font-size: 1.125rem;
    padding: 0.88rem 1.35rem;
  }
}

/* 좁은 폰(아이폰 SE~15 등): 본문·부제 한 번 더 키워 눈 피로 감소 */
@media (max-width: 480px) {
  body {
    font-size: 1.375rem;
    line-height: 1.76;
  }

  .logo-wordmark {
    font-size: clamp(1.4rem, 4.75vw, 1.58rem);
  }

  .site-logo {
    height: 60px;
  }

  .btn-header {
    font-size: 1.375rem;
    padding: 0.58rem 0.9rem;
  }

  .nav a {
    font-size: 1.1875rem;
    padding: 0.42rem 0.36rem;
  }

  .nav a::after {
    width: calc(100% - 0.72rem);
    left: 0.36rem;
  }

  .hero-title {
    font-size: clamp(2.95rem, 11.5vw, 3.45rem);
  }

  .hero-lead {
    font-size: 1.4375rem;
  }

  .section-title {
    font-size: clamp(2.25rem, 8.8vw, 2.55rem);
  }

  .section-label {
    font-size: 1.1875rem;
    letter-spacing: 0.11em;
  }

  .about-statement-eyebrow {
    font-size: 1.125rem;
    letter-spacing: 0.1em;
  }

  .section-lead,
  .section-desc {
    font-size: 1.375rem;
  }

  .about-card h3 {
    font-size: 1.375rem;
  }

  .about-card p,
  .step-detail {
    font-size: 1.25rem;
  }

  .about-statement {
    font-size: 1.3125rem;
  }

  .about-statement-slogan p {
    font-size: 1.625rem;
  }

  .about-statement-slogan footer {
    font-size: 1.3125rem;
  }

  .post-title {
    font-size: 1.55rem;
  }

  .blog-channel-links,
  .filter-btn {
    font-size: 1.25rem;
  }

  .site-footer,
  .footer-channel-links > a {
    font-size: 1.25rem;
  }

  .footer-meta {
    font-size: 1.125rem;
  }

  .footer-copy {
    font-size: 1.0625rem;
  }

  .contact-intro,
  .care-members__lead {
    font-size: 1.4375rem;
  }

  .care-members__block p {
    font-size: 1.3125rem;
  }

  .modal-excerpt {
    font-size: 1.25rem;
  }

  .promo-video__footer {
    font-size: 1.25rem;
  }
}

@media (max-width: 400px) {
  .btn-header {
    display: none;
  }

  .header-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "nav";
  }

  .logo-link {
    justify-self: start;
  }
}

/* —— Nav: current page —— */
.nav a.nav-link-active {
  color: var(--brand-blue);
  background: var(--brand-blue-soft);
}

.nav a.nav-link-active:hover {
  background: rgba(14, 165, 233, 0.12);
}

.nav a.nav-link-active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* —— 오시는 길 (directions.html): 문의 페이지와 동일 상·하 패딩·헤더 리듬 —— */
.directions {
  text-align: left;
  background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
  padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(4rem, 9vw, 7rem);
}

.directions .section-label {
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.directions__head {
  margin-bottom: 1.75rem;
}

.directions .section-title {
  margin-bottom: 1.25rem;
}

.directions .contact-intro {
  max-width: 44rem;
}

/* 오시는 길: 같은 행 카드 높이 통일 (메인 소개 그리드는 align-items: start 유지) */
.about-grid.directions-grid {
  align-items: stretch;
}

.about-card.directions-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  height: 100%;
}

.directions-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 0 1rem;
  padding: 0.4rem 0.95rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-lime-hover);
  background: var(--brand-lime-soft);
  border-radius: 999px;
}

.directions-card__title {
  margin: 0 0 0.85rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  line-height: 1.32;
}

.directions-card__address {
  margin: 0 0 1.15rem;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.72;
  color: var(--ink-strong);
  word-break: keep-all;
}

.directions-card__meta {
  margin: 0 0 1.2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.directions-card__meta > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.3rem 1rem;
  align-items: start;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.directions-card__meta > div:last-child {
  border-bottom: none;
}

.directions-card__meta dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.45;
}

.directions-card__meta dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.5;
  word-break: keep-all;
}

.directions-card__meta a {
  font-weight: 700;
  text-decoration: none;
}

.directions-card__meta a[href^="mailto:"] {
  white-space: nowrap;
}

.directions-card__meta a:hover {
  text-decoration: underline;
}

.directions-card__map {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  padding: 0.7rem 1.25rem;
  font-size: 0.9375rem;
}

@media (max-width: 400px) {
  .directions-card__meta > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}