@charset "UTF-8";
/* ============================================================
   이소율의 산후케어 — 공개 사이트 디자인 시스템

   컨셉: 더스티 로즈 + 따뜻한 크림/샌드
     · 핑크 계열이되 채도를 낮춰 "안정감"을 만든다
     · 기존 sy5550.com 의 밝은 마젠타(#e95b86)와 톤이 달라
       별개 브랜드로 읽힌다
     · 순검정 대신 따뜻한 브라운-그레이(#3D3436)로 부드럽게

   ※ 관리자(portal.css, 네이비+블루)와는 완전히 분리된 시스템이다.
   ============================================================ */

:root {
  /* 밝은 화면 전용. 인앱 브라우저의 강제 다크 변환을 끈다 (head 의 meta 와 한 쌍) */
  color-scheme: light;

  /* 브랜드 — 더스티 로즈 */
  --rose:         #C4667A;
  --rose-dark:    #A34F62;
  --rose-darker:  #833F4E;
  --rose-light:   #E3A3B0;
  --rose-pale:    #F6DFE3;
  /* 크림(#FDFAF7)과 나란히 놓였을 때 면이 갈려 보이도록 채도를 조금 올렸다.
     이전 값 #FCF3F1 은 크림과 채널 차이가 1~7 에 불과해 경계가 보이지 않았다. */
  --blush:        #F9ECE8;

  /* 따뜻한 중립 */
  --cream:        #FDFAF7;
  --sand:         #F4E9DF;
  --sand-dark:    #E6D5C6;

  /* 포인트 — 따뜻한 카라멜 */
  --accent:       #C98A5B;
  --accent-pale:  #FBEFE3;

  /* 텍스트 */
  --ink:          #3D3436;
  --ink-soft:     #6B5E61;
  --ink-muted:    #9C8F92;

  /* 선·면 */
  --line:         #EDE0DC;
  --line-strong:  #DFCCC7;
  --white:        #FFFFFF;

  /* 상태 */
  --success:      #5F8C6E;
  --danger:       #C4574F;

  --radius:       14px;
  --radius-sm:    9px;
  --radius-lg:    22px;
  --shadow:       0 2px 14px rgba(131, 63, 78, .07);
  --shadow-lg:    0 10px 34px rgba(131, 63, 78, .11);
  --wrap:         1120px;

  --font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream);
  word-break: keep-all;      /* 한글 단어 단위 줄바꿈 — 가독성 */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--rose-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; line-height: 1.4; font-weight: 700; letter-spacing: -.02em; }
p, ul, ol { margin: 0; }
ul, ol { padding-left: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rose-dark); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ============================================================
   헤더
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 250, 247, .93);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
/* 헤더만 본문(1120px)보다 넓게 — 메뉴가 두 줄로 넘어가지 않도록 */
.site-header .wrap { max-width: 1260px; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 70px; }

.logo { display: flex; align-items: center; gap: 10px; color: var(--rose); flex-shrink: 0; }
.logo:hover { text-decoration: none; }
/* 모노그램만 들어간다(588:551). 높이를 기준으로 잡아야 옆 글자와 줄이 맞는다.
   한 벌을 통째로 넣던 때보다 그림이 커져 같은 높이에서도 훨씬 또렷하다. */
.logo-mark { display: flex; align-items: center; color: var(--rose); }
.logo-mark img { width: auto; height: 40px; display: block; }
/* 브랜드명과 그 아래 한 줄은 붙여 놓으면 두 줄이 한 덩어리로 뭉쳐 읽힌다.
   틈을 두고, 아래 줄 색도 한 단계 진하게 한다 —
   --ink-muted(#9C8F92)는 흰 바탕에서 대비가 3:1 밖에 안 돼 흐려 보였다. */
.logo-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; }
.logo-text strong { font-size: 18px; color: var(--ink); letter-spacing: -.03em; }
.logo-text small  {
  font-size: 11.5px; color: var(--ink-soft); font-weight: 500; letter-spacing: -.01em;
}

.nav-toggle {
  margin-left: auto; width: 42px; height: 42px; display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 0 9px;
}
/* 막대 세 개.
   background-color 대신 currentColor 로 칠한다 — 인앱 브라우저가 색을 뒤집을 때
   '배경' 은 바탕으로 취급해 지워 버리지만 '글자색' 은 읽히게 남겨 둔다.
   width 도 명시한다. 안 쓰면 flex 의 stretch 에 기대게 되는데,
   바깥에서 스타일이 하나만 어긋나도 폭이 0 이 되어 사라진다. */
.nav-toggle { color: var(--ink, #3D3436); }
.nav-toggle span {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background-color: #3D3436;              /* 변수를 못 읽는 환경용 */
  background-color: currentColor;
  transition: .25s;
}
/* 윈도우 고대비 모드에서도 같은 이유로 사라진다 — 거기서는 시스템 글자색으로 칠한다 */
@media (forced-colors: active) {
  .nav-toggle span { background-color: CanvasText; }
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.gnb { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.gnb > ul { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.gnb > ul a {
  display: block; padding: 9px 12px; font-size: 15px; font-weight: 500;
  color: var(--ink-soft); border-radius: var(--radius-sm); transition: .18s;
  white-space: nowrap;              /* 메뉴명이 중간에 끊기지 않게 */
}
.gnb > ul a:hover { background: var(--blush); color: var(--rose-dark); text-decoration: none; }
.gnb > ul a.is-active { color: var(--rose-dark); background: var(--rose-pale); font-weight: 700; }
.gnb-cta { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   버튼
   ============================================================ */
/* ⚠️ display 를 명시한 요소는 hidden 속성이 먹지 않는다.
   (.btn 은 inline-flex, .rv-steps 는 grid — 브라우저 기본
   [hidden]{display:none} 을 작성자 스타일이 이겨버린다)
   숨김이 조용히 무시되면 화면에 나오면 안 될 버튼이 그대로 보인다. */
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 14px 26px; border: 1px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2;
  cursor: pointer; transition: .18s; text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 9px 17px; font-size: 14px; }
.btn-lg { padding: 17px 38px; font-size: 17px; }
.btn-block { display: flex; width: 100%; }

.btn-primary { background: var(--rose); color: #fff; box-shadow: 0 3px 12px rgba(196,102,122,.28); }
.btn-primary:hover { background: var(--rose-dark); color: #fff; }

.btn-ghost { background: transparent; color: var(--rose-dark); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--blush); border-color: var(--rose-light); }

.btn-white { background: #fff; color: var(--rose-dark); }
.btn-white:hover { background: var(--blush); }

/* ============================================================
   섹션 공통
   ============================================================ */
.section { padding: 76px 0; }
.section-tight { padding: 48px 0; }

/* ── 면 구분 ────────────────────────────────────────────
   크림(#FDFAF7)·블러시(#FCF3F1)·흰색은 서로 색 차이가 매우 작아
   배경색만으로는 섹션 경계가 읽히지 않는다.
   그래서 색이 있는 면에는 위아래 경계선을 함께 둔다.
   (크림 섹션은 양옆 면의 선으로 자연히 구분된다)
   ------------------------------------------------------ */
.section-blush {
  background: var(--blush);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-sand {
  background: var(--sand);
  border-top: 1px solid var(--sand-dark);
  border-bottom: 1px solid var(--sand-dark);
}
.section-white {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.eyebrow {
  display: inline-block; margin-bottom: 12px; padding: 5px 15px;
  background: var(--rose-pale); color: var(--rose-darker);
  border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.section-head h2 { font-size: clamp(23px, 3.4vw, 32px); margin-bottom: 14px; }
.section-head p  { color: var(--ink-soft); font-size: 16px; }

/* ============================================================
   히어로 — 가로 전체 폭
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 520px at 15% -20%, var(--rose-pale) 0%, transparent 60%),
    radial-gradient(760px 440px at 88% 8%,  #FDEBDF 0%, transparent 58%),
    /* 아래쪽을 크림보다 살짝 진하게 끝내 다음 섹션과 면이 갈리게 한다 */
    linear-gradient(180deg, var(--blush) 0%, #FAF1EC 100%);
  padding: 92px 0 96px;
  text-align: center;
  /* 아래 섹션(.section-white)의 border-top 이 경계를 만들므로 여기서는 선을 두지 않는다 */
}

.hero-inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; }

.hero h1 {
  font-size: clamp(29px, 5vw, 50px);
  line-height: 1.3; margin-bottom: 22px; letter-spacing: -.03em;
}
.hero h1 em { font-style: normal; color: var(--rose-dark); }

.hero-lead {
  font-size: clamp(16px, 1.7vw, 18.5px); color: var(--ink-soft);
  margin: 0 auto 34px; max-width: 640px;
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-bottom: 34px;
}

.hero-points { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hero-points li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 17px; background: rgba(255,255,255,.86);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  box-shadow: 0 1px 6px rgba(131,63,78,.05);
}
.hero-points svg { color: var(--rose); flex-shrink: 0; }

/* ── 장식: 풍선 ──────────────────────────────────────────
   전부 장식이므로 aria-hidden + pointer-events:none.
   위로 천천히 떠오르며 좌우로 살짝 흔들린다.
   과하면 산모 대상 사이트에 어울리지 않으므로 느리고 옅게.
   ------------------------------------------------------ */
.hero-deco {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}

.balloon {
  position: absolute; bottom: -170px;
  width: var(--bw, 54px);
  opacity: 0;
  animation: balloon-rise var(--dur, 22s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.balloon svg { width: 100%; height: auto; display: block; }
.balloon-sway { animation: balloon-sway var(--sway, 6s) ease-in-out infinite alternate; }

@keyframes balloon-rise {
  0%   { transform: translateY(0)             scale(.92); opacity: 0; }
  12%  {                                                  opacity: .85; }
  80%  {                                                  opacity: .7; }
  100% { transform: translateY(calc(-100vh - 260px)) scale(1.04); opacity: 0; }
}
@keyframes balloon-sway {
  from { transform: translateX(-14px) rotate(-5deg); }
  to   { transform: translateX(14px)  rotate(5deg); }
}

/* 배치 — 본문(880px)을 피해 좌우로 */
.balloon:nth-child(1) { left: 4%;  --bw: 58px; --dur: 24s; --delay: 0s;   --sway: 6.5s; }
.balloon:nth-child(2) { left: 13%; --bw: 40px; --dur: 30s; --delay: 5s;   --sway: 8s; }
.balloon:nth-child(3) { left: 78%; --bw: 64px; --dur: 26s; --delay: 2.5s; --sway: 7s; }
.balloon:nth-child(4) { left: 90%; --bw: 44px; --dur: 32s; --delay: 8s;   --sway: 9s; }
.balloon:nth-child(5) { left: 66%; --bw: 34px; --dur: 28s; --delay: 12s;  --sway: 7.5s; }
.balloon:nth-child(6) { left: 26%; --bw: 32px; --dur: 34s; --delay: 16s;  --sway: 8.5s; }

/* 은은한 배경 원 */
.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(46px);
  opacity: .5; animation: blob-drift 17s ease-in-out infinite alternate;
}
.hero-blob-1 { width: 300px; height: 300px; background: var(--rose-pale); top: -70px; left: -60px; }
.hero-blob-2 { width: 250px; height: 250px; background: #FBE3D2; bottom: -90px; right: -50px; animation-delay: 4s; }

@keyframes blob-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(26px, -22px) scale(1.09); }
}

@media (max-width: 860px) {
  .hero { padding: 62px 0 66px; }
  /* 좁은 화면에서는 본문을 가리므로 큰 풍선만 남긴다 */
  .balloon:nth-child(2),
  .balloon:nth-child(5),
  .balloon:nth-child(6) { display: none; }
  .balloon:nth-child(1) { left: 2%; --bw: 40px; }
  .balloon:nth-child(3) { left: 84%; --bw: 44px; }
  .balloon:nth-child(4) { display: none; }
}

/* ============================================================
   카드
   ============================================================ */
.card-grid { display: grid; gap: 22px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
  transition: .2s;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card h3 { font-size: 18px; margin-bottom: 10px; }
.card p  { font-size: 15px; color: var(--ink-soft); }

.card-icon {
  width: 46px; height: 46px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rose-pale); color: var(--rose-dark); border-radius: 12px;
}

/* 지역 카드 */
a.region-card { display: block; color: inherit; }
a.region-card:hover { text-decoration: none; }
.region-card .region-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.region-card .region-sub  { font-size: 13px; color: var(--ink-muted); margin-bottom: 12px; }
.region-card .region-go   { font-size: 14px; font-weight: 700; color: var(--rose-dark); }

/* ============================================================
   리스트 · 표
   ============================================================ */
.check-list li {
  position: relative; padding-left: 28px; margin-bottom: 11px;
  font-size: 15px; color: var(--ink-soft);
}
.check-list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 16px; height: 9px; border-left: 2.5px solid var(--rose);
  border-bottom: 2.5px solid var(--rose); transform: rotate(-45deg);
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; min-width: 560px; border-collapse: collapse;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); font-size: 15px;
}
table.data th, table.data td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.data thead th { background: var(--rose-pale); color: var(--rose-darker); font-weight: 700; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--blush); }

/* ============================================================
   바우처 예상 계산기
   2026-09-02 : 시안(gemini-code) 구조로 교체.
   이전 구조는 이 블록 끝에 주석으로 남겨 두었다.
   ============================================================ */
.calc { margin-bottom: 12px; }

/* ── 머리말 ── */
.calc-head { text-align: center; margin-bottom: 22px; }
.calc-badge {
  display: inline-block; padding: 5px 15px; border-radius: 999px;
  background: var(--rose); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
}
.calc-lead {
  margin: 12px auto 0; max-width: 30em;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
}

/* ── 본체 카드 ── */
.calc-card {
  background: #fff; border: 2px solid var(--rose-pale);
  border-radius: 26px; padding: 28px;
  box-shadow: 0 12px 40px rgba(131, 63, 78, .07);
  display: grid; gap: 22px;
}

/* 입력 2열 — 태아 구분 / 이용 기간 */
.calc-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.calc-label {
  display: block; margin-bottom: 9px;
  font-size: 14px; font-weight: 700; color: var(--ink);
}

.calc select {
  width: 100%; padding: 14px 15px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  font-family: inherit; font-size: 15.5px; color: var(--ink); background: #fff;
}
.calc select:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-pale); }

.calc-hint { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.calc-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.calc-btn {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 13px 10px; background: #fff; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  font-family: inherit; text-align: center; transition: .15s;
}
.calc-btn strong { font-size: 14.5px; color: var(--ink); }
.calc-btn small  { font-size: 11.5px; color: var(--ink-muted); line-height: 1.45; }
.calc-btn:hover  { border-color: var(--rose-light); background: var(--blush); }
.calc-btn.is-active { border-color: var(--rose); background: var(--rose-pale); }
.calc-btn.is-active strong { color: var(--rose-darker); }
.calc-btn.is-active small  { color: var(--rose-dark); }

/* ── 결과 ── */
.calc-result {
  background: #EEF6FC; border: 1px solid #CFE3F2;
  border-radius: 20px; padding: 24px 22px; text-align: center;
}
.calc-result-cap {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-muted);
}

/* 총액 − 정부지원 을 한 줄로 */
.calc-sum {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 10px 14px;
}
.calc-sum-item { display: inline-flex; align-items: baseline; gap: 7px; }
.calc-sum-item em { font-style: normal; font-size: 12.5px; color: var(--ink-muted); }
.calc-sum-item b {
  font-size: clamp(18px, 2.4vw, 22px); color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.calc-sum-gov em { color: var(--rose-dark); font-weight: 700; }
.calc-sum-gov b  { color: var(--rose-dark); }
.calc-sum-minus { font-size: 20px; font-weight: 700; color: var(--ink-muted); }

/* 본인부담금 — 이 화면에서 가장 크게 */
.calc-final { margin-top: 18px; padding-top: 18px; border-top: 1px solid #CFE3F2; }
.calc-final p { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.calc-final strong {
  display: block; font-size: clamp(34px, 6vw, 52px); line-height: 1.15;
  color: var(--rose); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}

/* 쌍태아처럼 금액을 낼 수 없을 때 */
.calc-ask { text-align: left; }
.calc-ask p { margin: 0 0 6px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.calc-ask p:last-child { margin-bottom: 0; font-size: 13px; color: var(--ink-muted); }
.calc-ask strong { color: var(--rose-darker); }
.calc-ask[hidden], .calc-sum[hidden], .calc-final[hidden] { display: none !important; }

.calc-cta { margin: 0; }

.calc-note {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 16px 0 18px; font-size: 13px; line-height: 1.65; color: var(--ink-muted);
}
.calc-note svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

@media (max-width: 560px) {
  .calc-card { padding: 20px; border-radius: 20px; }
  .calc-inputs { grid-template-columns: 1fr; }
  .calc-btns { grid-template-columns: 1fr; }
  .calc-btn { flex-direction: row; align-items: center; gap: 8px; }
  .calc-btn small { font-size: 11px; }
  .calc-sum-minus { display: none; }
  .calc-sum { flex-direction: column; gap: 6px; }
}

/* ─── 이전 구조 (2026-09-02 이전). 되돌릴 때 살릴 것 ───────────
.calc { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
        padding:26px; box-shadow:var(--shadow); margin-bottom:12px; }
.calc-body   { display:grid; gap:20px; margin-bottom:22px; }
.calc-btn    { align-items:flex-start; text-align:left; border-radius:var(--radius-sm); }
.calc-result { background:var(--blush); border-radius:var(--radius); padding:20px 22px; margin-bottom:16px; }
.calc-row    { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
               padding:7px 0; font-size:15px; color:var(--ink-soft); }
.calc-row strong    { font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums; }
.calc-row .calc-gov { color:var(--success); }
.calc-row-final     { margin-top:8px; padding-top:15px; border-top:1px dashed var(--line-strong); }
.calc-row-final strong { font-size:clamp(22px,3.2vw,27px); color:var(--rose-dark); }
─────────────────────────────────────────────────────────── */

/* ── 대표 인용문 ── */
.founder-quote {
  margin: 0 0 30px; padding: 28px 30px;
  background: var(--blush); border-left: 4px solid var(--rose);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: clamp(17px, 2.2vw, 21px); line-height: 1.65;
  color: var(--rose-darker); font-weight: 500;
}
.founder-quote cite {
  display: block; margin-top: 14px;
  font-size: 14px; font-style: normal; font-weight: 400; color: var(--ink-muted);
}

/* ── 이력·자격 ── */
.cred-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cred-item {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500;
}
.cred-item svg { color: var(--rose); flex-shrink: 0; }

/* ── 4대 핵심 케어 카드 ── */
.pillar-no {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 26px; font-weight: 700; color: var(--rose-light); line-height: 1;
}
.pillar-no span {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  color: var(--ink-muted);
}
a.pillar-card { display: block; color: inherit; }
a.pillar-card:hover { text-decoration: none; border-color: var(--rose-light); }
a.pillar-card .region-go { display: inline-block; margin-top: 14px; }

/* ── 하루 일정 타임라인 ── */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; background: var(--rose-pale);
}
.timeline li { position: relative; padding: 0 0 26px 0; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -22px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--rose); border: 2px solid var(--cream);
}
.timeline time {
  display: inline-block; margin-bottom: 5px;
  font-size: 13px; font-weight: 700; color: var(--rose-dark);
  letter-spacing: .02em;
}
.timeline strong { display: block; font-size: 16.5px; margin-bottom: 3px; }
.timeline span { font-size: 14.5px; color: var(--ink-soft); }

@media (max-width: 640px) {
  .cred-grid { grid-template-columns: 1fr; }
}

/* ── 단계 (이용 절차) ──────────────────────────────────
   세로로 길게 늘어지지 않도록 카드 그리드로 배치한다.
   8단계 → 4열 2줄, 3단계 → 3열 1줄.
   ---------------------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.steps--3 { grid-template-columns: repeat(3, 1fr); }

.steps li {
  counter-increment: step;
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px 22px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 번호를 카드 위쪽에 배지로 */
.steps li::before {
  content: counter(step);
  width: 32px; height: 32px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rose); color: #fff; border-radius: 50%;
  font-size: 14.5px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px rgba(196,102,122,.3);
}

/* 카드 사이 연결선 — 진행 흐름이 읽히도록 */
.steps li::after {
  content: ''; position: absolute; top: 40px; right: -16px;
  width: 16px; height: 1px; background: var(--line-strong);
}
.steps li:last-child::after { display: none; }

.steps strong { display: block; font-size: 16px; margin-bottom: 6px; line-height: 1.45; }
.steps span   { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; }

@media (max-width: 1000px) {
  .steps, .steps--3 { grid-template-columns: repeat(2, 1fr); }
  /* 2열에서는 줄 끝 카드의 연결선을 숨긴다 */
  .steps li:nth-child(2n)::after { display: none; }
}
@media (max-width: 560px) {
  .steps, .steps--3 { grid-template-columns: 1fr; }
  .steps li { padding: 20px; }
  .steps li::after { display: none; }
  .steps li::before { position: absolute; top: 20px; left: 20px; margin-bottom: 0; }
  .steps strong { padding-left: 44px; min-height: 32px; display: flex; align-items: center; }
}

/* ============================================================
   FAQ (details/summary — JS 없이 동작, 크롤러가 텍스트를 읽음)
   ============================================================ */
.faq-list { display: grid; gap: 12px; }
.faq-item {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.faq-item summary {
  padding: 20px 52px 20px 22px; position: relative; cursor: pointer;
  font-size: 16.5px; font-weight: 700; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 22px; top: 27px;
  width: 9px; height: 9px; border-right: 2px solid var(--rose);
  border-bottom: 2px solid var(--rose); transform: rotate(45deg); transition: .2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item[open] summary { background: var(--blush); }
.faq-answer { padding: 4px 22px 22px; color: var(--ink-soft); font-size: 15.5px; }

/* ============================================================
   답변 상자 (AI 브리핑 인용 겨냥 — 결론을 먼저)
   ============================================================ */
.answer-box {
  background: var(--accent-pale); border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px; margin: 14px 0 22px; font-size: 16px;
}
.answer-box strong { color: var(--rose-darker); }

.notice-box {
  background: #fff; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); padding: 20px 22px; font-size: 15px; color: var(--ink-soft);
}

/* ============================================================
   후기
   ============================================================ */
.review-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.review-card .review-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-muted); }
.review-card h3 { font-size: 16.5px; line-height: 1.5; }
.review-card h3 a { color: var(--ink); }
.review-card .review-excerpt { font-size: 14.5px; color: var(--ink-soft); }
.tag {
  display: inline-block; padding: 3px 10px; background: var(--rose-pale);
  color: var(--rose-darker); border-radius: 999px; font-size: 12px; font-weight: 700;
}
.stars { color: var(--accent); letter-spacing: 1px; }

/* ============================================================
   폼
   ============================================================ */
.form-row { margin-bottom: 18px; }
.form-row label { display: block; margin-bottom: 7px; font-size: 14.5px; font-weight: 700; }
.form-row .req { color: var(--rose); margin-left: 3px; }

/* type 을 하나씩 나열하지 않는다.
   month·email·number 처럼 나중에 쓰는 타입이 목록에서 빠지면
   그 칸만 스타일 없이 렌더된다 (실제로 type="month" 가 그랬다).
   선택·버튼 계열만 제외하는 방식으로 뒤집는다. */
.form-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.form-row select,
.form-row textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 16px;  /* iOS 자동 확대 방지: 16px 이상 */
  color: var(--ink); background: #fff; transition: .15s;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-pale);
}
.form-row .hint { margin-top: 6px; font-size: 13px; color: var(--ink-muted); }
.form-row .err  { margin-top: 6px; font-size: 13px; color: var(--danger); font-weight: 500; }
.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea { border-color: var(--danger); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.form-agree { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--ink-soft); }
.form-agree input { margin-top: 5px; width: 17px; height: 17px; accent-color: var(--rose); flex-shrink: 0; }

/* 허니팟 — 사람에게는 보이지 않고 스크린리더에서도 제외 */
.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

.form-alert { padding: 15px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 15px; }
.form-alert.ok  { background: #EAF3EC; color: #38614A; border: 1px solid #C3DCCB; }
.form-alert.bad { background: #FBEDEC; color: #8E322C; border: 1px solid #EFCCC9; }

.form-foot { text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--ink-muted); }

/* 폼 카드 (하단 상담 섹션) */
.form-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-lg);
}

/* ============================================================
   모달 — 상담 신청
   JS 가 꺼져 있으면 트리거는 그냥 /contact 링크로 동작한다.
   ============================================================ */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(61, 52, 54, .55);
  backdrop-filter: blur(3px);
  animation: modal-fade .2s ease;
}
.modal-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; max-height: calc(100vh - 40px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--cream); border-radius: var(--radius-lg);
  padding: 32px 30px 28px;
  box-shadow: 0 24px 60px rgba(61,52,54,.3);
  animation: modal-pop .24s cubic-bezier(.2, .9, .3, 1.1);
}
.modal-head { margin-bottom: 22px; padding-right: 40px; }
.modal-head h2 { font-size: 21px; margin-bottom: 7px; }
.modal-head p  { font-size: 14.5px; color: var(--ink-soft); }

.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); border: 1px solid var(--line);
  border-radius: 50%; cursor: pointer; color: var(--ink-soft);
  font-size: 20px; line-height: 1; transition: .15s;
}
.modal-close:hover { background: var(--rose-pale); color: var(--rose-darker); }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

body.modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-panel {
    max-width: none; max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 26px 20px 22px;
    animation: modal-slide .26s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes modal-slide {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* ============================================================
   CTA 밴드
   ============================================================ */
.cta-band {
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-darker) 100%);
  color: #fff; padding: 60px 0; text-align: center;
}
.cta-band h2 { font-size: clamp(21px, 3vw, 29px); margin-bottom: 12px; color: #fff; }
.cta-band p  { color: rgba(255,255,255,.9); margin-bottom: 26px; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ============================================================
   빵부스러기
   ============================================================ */
.breadcrumb { padding: 16px 0; font-size: 13.5px; color: var(--ink-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.breadcrumb li::after { content: '›'; margin-left: 7px; color: var(--line-strong); }
.breadcrumb li:last-child::after { content: ''; }
.breadcrumb a { color: var(--ink-muted); }

/* 페이지 헤더 */
.page-head { background: var(--blush); padding: 40px 0 46px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(24px, 3.8vw, 35px); margin-bottom: 12px; }
.page-head p  { color: var(--ink-soft); max-width: 760px; }
/* 페이지 제목 아래 한 줄을 조금 키워 부제처럼 읽히게 한다 */
.page-head p.page-head-lead {
  font-size: clamp(17px, 2vw, 20px); font-weight: 600; color: var(--rose-dark);
}

/* 페이지네이션 */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-soft); background: #fff;
}
.pagination a:hover { background: var(--blush); text-decoration: none; }
.pagination .current { background: var(--rose); border-color: var(--rose); color: #fff; font-weight: 700; }

/* ============================================================
   모바일 하단 CTA
   ============================================================ */
.mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--line);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  gap: 9px; box-shadow: 0 -3px 16px rgba(131,63,78,.09);
}
.mobile-cta a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 50px; border-radius: 999px; font-size: 15.5px; font-weight: 700;
}
.mobile-cta-tel  { background: var(--blush); color: var(--rose-dark); border: 1px solid var(--rose-light); }
.mobile-cta-form { background: var(--rose); color: #fff; }
.mobile-cta a:hover { text-decoration: none; }

/* ============================================================
   푸터
   ============================================================ */
.site-footer { background: var(--sand); border-top: 1px solid var(--sand-dark); padding: 56px 0 32px; margin-top: 0; }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; padding-bottom: 34px; border-bottom: 1px solid var(--sand-dark); }
.footer-brand strong { display: block; font-size: 18px; margin-bottom: 6px; }
.footer-brand p { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.footer-tel { display: inline-block; font-size: 24px; font-weight: 700; color: var(--rose-dark); margin-bottom: 8px; letter-spacing: -.02em; }
.footer-hours { font-size: 13.5px; color: var(--ink-soft); }
.footer-hours span { color: var(--ink-muted); }

.footer-nav h2 { font-size: 14px; margin-bottom: 14px; color: var(--ink); }
.footer-nav li { margin-bottom: 8px; }
.footer-nav a { font-size: 14px; color: var(--ink-soft); }
.footer-nav a:hover { color: var(--rose-dark); }

.footer-legal { padding-top: 26px; font-size: 13px; color: var(--ink-muted); }
.footer-legal p { margin-bottom: 6px; }
.footer-legal span { display: inline-block; margin-right: 14px; }
.footer-legal a { color: var(--ink-soft); text-decoration: underline; }
.copyright { margin-top: 14px !important; }

/* ============================================================
   반응형
   ============================================================ */
/* ── 헤더: 좁아질수록 단계적으로 줄여 한 줄 유지 ── */
@media (max-width: 1240px) {
  .gnb { gap: 14px; }
  .gnb > ul a { padding: 9px 9px; font-size: 14.5px; }
}
@media (max-width: 1120px) {
  .logo-text small { display: none; }         /* 로고 밑 태그라인 생략 */
  .logo-mark img { height: 34px; }            /* 좁은 화면에서는 조금 줄인다 */
  .gnb > ul a { padding: 9px 7px; font-size: 14px; }
}
@media (max-width: 1000px) {
  /* 전화 버튼 생략 — 푸터와 모바일 하단 CTA 에 그대로 있다 */
  .gnb-cta .btn-ghost { display: none; }
}

@media (max-width: 1024px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .gnb {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 10px 20px 20px; box-shadow: var(--shadow-lg);

    /* 하위 메뉴가 생기면서 6줄이던 메뉴가 17줄이 됐다.
       화면 밖으로 넘친 부분은 손에 닿지 않아 '고객센터가 안 보인다' 가 된다.
       헤더와 하단 상담바를 뺀 만큼만 쓰고, 넘치면 메뉴 안에서 굴린다.
       dvh 는 주소창이 접혔다 폈다 해도 실제 보이는 높이를 따라간다 —
       vh 는 주소창이 펼쳐진 상태를 기준으로 잡아 아래가 잘린다. */
    max-height: calc(100vh - 70px - 66px);
    max-height: calc(100dvh - 70px - 66px - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;      /* 끝까지 굴려도 뒤 페이지가 따라 밀리지 않게 */
    -webkit-overflow-scrolling: touch;
  }
  .gnb.is-open { display: flex; }
  .gnb > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .gnb > ul > li > a { padding: 13px 12px; font-size: 16px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .gnb-cta { margin-top: 16px; }
  .gnb-cta .btn { flex: 1; }
  /* 1000px 이하에서 숨겼던 전화 버튼을 모바일 메뉴에서는 다시 보인다 */
  .gnb-cta .btn-ghost { display: inline-flex; }

  .section { padding: 52px 0; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }

  .mobile-cta { display: flex; }
  body { padding-bottom: 74px; }   /* 하단 고정 CTA 만큼 여백 */
}

@media (max-width: 480px) {
  .cols-4 { grid-template-columns: 1fr; }
  .hero { padding: 46px 0 44px; }
  .card { padding: 22px; }
  .hero-card { padding: 24px; }
  .btn { width: 100%; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .btn:hover { transform: none; }
  /* 움직임을 끄면 풍선이 화면 밖에 멈춰 있으므로 아예 감춘다 */
  .hero-deco { display: none; }
}

@media print {
  .site-header, .mobile-cta, .cta-band, .nav-toggle { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
}

/* ── 후기 이미지 ── */
.review-thumb {
  display: block; margin: -24px -24px 4px; border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; aspect-ratio: 16 / 10; background: var(--blush);
}
.review-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.review-thumb:hover img { transform: scale(1.04); }

.review-hero {
  width: 100%; border-radius: var(--radius); margin-bottom: 26px;
  background: var(--blush);
}

/* 에디터로 작성한 본문 */
.review-body { font-size: 16.5px; line-height: 1.9; color: var(--ink-soft); }
.review-body p { margin: 0 0 16px; }
.review-body h2 { font-size: 22px; margin: 32px 0 12px; color: var(--ink); }
.review-body h3 { font-size: 18.5px; margin: 26px 0 10px; color: var(--ink); }
.review-body h4 { font-size: 17px; margin: 22px 0 8px; color: var(--ink); }
.review-body ul, .review-body ol { margin: 0 0 16px; padding-left: 24px; }
.review-body ul { list-style: disc; }
.review-body ol { list-style: decimal; }
.review-body li { margin-bottom: 7px; }
.review-body blockquote {
  margin: 20px 0; padding: 16px 22px;
  background: var(--blush); border-left: 4px solid var(--rose);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--rose-darker);
}
.review-body a { color: var(--rose-dark); text-decoration: underline; }
.review-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 0 auto; }
.review-body figure { margin: 24px 0; }
.review-body figcaption {
  margin-top: 9px; font-size: 13.5px; color: var(--ink-muted); text-align: center;
}
.review-body hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.review-body .align-center { text-align: center; }
.review-body .align-right  { text-align: right; }

/* ============================================================
   아이콘
   ============================================================ */

/* 제목 앞 아이콘 — 텍스트와 같은 줄에 기준선을 맞춘다 */
.h-icon {
  display: flex; align-items: center; gap: 10px;
}
.h-icon svg {
  flex-shrink: 0; color: var(--rose);
  padding: 7px; width: 38px !important; height: 38px !important;
  background: var(--rose-pale); border-radius: 10px;
}

/* 사실 나열 — 근무시간처럼 짧은 항목을 가로로 */
.fact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 4px;
}
.fact {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.5;
}
.fact svg { flex-shrink: 0; color: var(--rose); }

/* notice-box 안 아이콘 배지는 위쪽에 */
.notice-box .card-icon { margin-bottom: 14px; }

@media (max-width: 760px) {
  .fact-grid { grid-template-columns: 1fr; }
  .h-icon svg { width: 32px !important; height: 32px !important; padding: 6px; }
  .h-icon { gap: 8px; }
}

/* ============================================================
   산후정보 칼럼
   ============================================================ */

/* 분류 칩 */
.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft); transition: .16s;
}
.cat-chip:hover { border-color: var(--rose-light); background: var(--blush); text-decoration: none; }
.cat-chip.is-active { background: var(--rose); border-color: var(--rose); color: #fff; font-weight: 700; }
.cat-chip svg { flex-shrink: 0; }
.cat-chip em {
  font-style: normal; font-size: 11.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--rose-pale); color: var(--rose-darker);
}
.cat-chip.is-active em { background: rgba(255,255,255,.25); color: #fff; }

/* 글 카드 */
.post-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: .2s;
}
.post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.post-thumb {
  display: block; aspect-ratio: 16 / 10; background: var(--blush); overflow: hidden;
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.post-card:hover .post-thumb img { transform: scale(1.04); }
.post-thumb-empty {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--rose-light);
}

.post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-muted);
}
.post-meta .tag:hover { text-decoration: none; }
.post-body h2, .post-body h3 { font-size: 17px; line-height: 1.5; }
.post-body h2 a, .post-body h3 a { color: var(--ink); }
.post-body p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }

/* 글 상세 */
.post-head { margin-bottom: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.post-head h1 { font-size: clamp(24px, 3.6vw, 34px); line-height: 1.4; margin: 14px 0 0; }
.post-lead {
  margin-top: 16px; font-size: 17px; line-height: 1.75;
  color: var(--ink-soft); padding-left: 16px; border-left: 3px solid var(--rose-pale);
}

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.post-tag {
  padding: 6px 13px; background: var(--blush); color: var(--rose-darker);
  border-radius: 999px; font-size: 13px; font-weight: 500;
}

/* 글쓴이 */
.author-box {
  display: flex; gap: 18px; align-items: flex-start;
  margin-top: 34px; padding: 24px 26px;
  background: var(--blush); border-radius: var(--radius);
}
.author-box .card-icon { margin-bottom: 0; flex-shrink: 0; }
.author-box strong { display: block; font-size: 16px; margin-bottom: 7px; }
.author-box p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 10px; }

@media (max-width: 560px) {
  .author-box { flex-direction: column; gap: 14px; }
  .post-lead { font-size: 16px; }
}

/* ── 이용절차 카드 아이콘 ──────────────────────────────
   아이콘이 있는 목록은 <ol class="steps steps-icon"> 로 표시한다.
   (:has() 선택자에 의존하지 않기 위해 명시적 클래스를 쓴다)
   ---------------------------------------------------- */
.steps-icon li .step-icon {
  height: 46px; width: auto; margin-bottom: 13px;
  object-fit: contain;
}
/* 아이콘이 주인공이므로 숫자 배지는 우측 상단으로 작게 물러난다 */
.steps-icon li::before {
  position: absolute; top: 15px; right: 15px;
  width: 24px; height: 24px; margin-bottom: 0;
  font-size: 12px; box-shadow: none; opacity: .85;
}
@media (max-width: 560px) {
  .steps-icon li { padding: 20px; }
  .steps-icon li .step-icon { height: 40px; margin-bottom: 10px; }
  .steps-icon li::before { top: 16px; right: 16px; left: auto; }
  .steps-icon li strong { padding-left: 0; min-height: 0; display: block; }
}

/* ── 안심 보장 카드 ── */
.trust-card { text-align: center; }
.trust-card .trust-icon {
  height: 64px; width: auto; margin: 0 auto 16px;
  object-fit: contain;
}
.trust-card h3 { font-size: 16.5px; margin-bottom: 10px; line-height: 1.5; }
.trust-card p  { font-size: 14.5px; line-height: 1.7; }

@media (max-width: 560px) {
  .trust-card { text-align: left; display: flex; gap: 16px; align-items: flex-start; }
  .trust-card .trust-icon { height: 48px; margin: 4px 0 0; flex-shrink: 0; }
}

/* ═════════════════ 안심 케어 5단계 프로세스 (홈) ═════════════════ */
.safety-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  list-style: none; margin: 0; padding: 0; counter-reset: none;
}
.safety-step {
  position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 20px 26px; text-align: center; transition: .2s;
}
.safety-step:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-3px);
  border-color: var(--rose-light);
}

/* 카드 사이 점선 — 순서가 있는 흐름임을 보여준다 */
.safety-step::after {
  content: ''; position: absolute; top: 59px; right: -18px; width: 17px;
  border-top: 2px dashed var(--rose-pale);
}
.safety-step:last-child::after { display: none; }

.safety-badge {
  position: relative; width: 58px; height: 58px; margin: 0 auto 17px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--rose-light) 0%, var(--rose) 55%, var(--rose-dark) 100%);
  box-shadow: 0 6px 15px rgba(196, 102, 122, .26);
}
.safety-no {
  position: absolute; top: -7px; right: -9px;
  min-width: 25px; height: 25px; padding: 0 6px;
  border-radius: 13px; background: #fff; border: 1.5px solid var(--rose-pale);
  color: var(--rose-dark); font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Sans KR', sans-serif;
}
.safety-step h3 { font-size: 16.5px; margin-bottom: 9px; line-height: 1.45; }
.safety-step p  { font-size: 14.5px; color: var(--ink-soft); line-height: 1.72; }

@media (max-width: 1000px) {
  .safety-grid { grid-template-columns: repeat(3, 1fr); }
  .safety-step::after { display: none; }
}
@media (max-width: 760px) {
  .safety-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .safety-grid { grid-template-columns: 1fr; gap: 12px; }
  .safety-step {
    display: flex; gap: 16px; align-items: flex-start;
    text-align: left; padding: 22px;
  }
  .safety-badge { width: 50px; height: 50px; margin: 2px 0 0; flex-shrink: 0; }
  .safety-badge svg { width: 23px; height: 23px; }
}

/* ═════════════════ 교육원 사진 (/academy) ═════════════════ */

/* 페이지 상단 와이드 이미지 — 원본이 3:2 라 21:9 로 잘라 배너처럼 쓴다 */
.academy-hero { margin: 34px 0 0; }
.academy-hero img {
  width: 100%; height: clamp(200px, 30vw, 360px); object-fit: cover;
  object-position: center 42%;
  display: block; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.academy-hero figcaption,
.academy-feature figcaption,
.academy-gallery figcaption {
  margin-top: 10px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.6;
}
.academy-hero figcaption { text-align: center; }

/* 실습 강조 — 사진 + 설명 2단 */
.academy-feature {
  display: grid; grid-template-columns: 420px 1fr; gap: 30px;
  align-items: start; margin-top: 34px;
  padding: 26px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.academy-feature-img { margin: 0; }
.academy-feature-img img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-sm);
}
.academy-feature-body h3 {
  font-size: 19px; margin-bottom: 10px; color: var(--rose-darker);
}
.academy-feature-body > p {
  font-size: 15px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 16px;
}

/* 교육 현장 그리드 — academy_media.gallery 가 채워지면 노출된다 */
.academy-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.academy-gallery figure { margin: 0; }
.academy-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); transition: .2s;
}
.academy-gallery figure:hover img {
  box-shadow: var(--shadow-lg); transform: translateY(-2px);
}

@media (max-width: 1000px) {
  .academy-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .academy-feature { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
}
@media (max-width: 560px) {
  .academy-gallery { grid-template-columns: 1fr; }
  .academy-hero { margin-top: 24px; }
}

/* ═════════════════ 예약 신청서 (/reserve) ═════════════════ */

.reserve-head { background: linear-gradient(180deg, var(--blush) 0%, var(--cream) 100%); }
.reserve-head p { font-size: 15.5px; line-height: 1.8; }

/* ── 진행 표시 ── */
.rv-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; list-style: none; margin: 0 0 30px; padding: 0;
  counter-reset: none;
}
.rv-steps li {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding-top: 4px; position: relative;
  font-size: 13px; color: var(--ink-muted);
}
/* 단계 사이 연결선 */
.rv-steps li::before {
  content: ''; position: absolute; top: 20px; left: -50%;
  width: 100%; height: 2px; background: var(--line); z-index: 0;
}
.rv-steps li:first-child::before { display: none; }
.rv-steps li.is-done::before,
.rv-steps li.is-current::before { background: var(--rose-light); }

.rv-steps li span {
  position: relative; z-index: 1;
  width: 33px; height: 33px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--line);
  font-weight: 800; font-size: 14px; color: var(--ink-muted);
  transition: .2s;
}
.rv-steps li em { font-style: normal; font-size: 12.5px; }

.rv-steps li.is-current span {
  background: var(--rose); border-color: var(--rose); color: #fff;
  box-shadow: 0 4px 12px rgba(196, 102, 122, .3);
}
.rv-steps li.is-current { color: var(--rose-darker); font-weight: 700; }

.rv-steps li.is-done span { background: var(--rose-pale); border-color: var(--rose-light); color: var(--rose-dark); }
.rv-steps li.is-done { cursor: pointer; }

/* ── 단계 패널 ── */
.rv-panel { display: none; border: 0; padding: 0; margin: 0; }
.rv-panel.is-active { display: block; }

.rv-legend {
  display: block; width: 100%; padding: 0 0 14px;
  margin-bottom: 22px; border-bottom: 2px solid var(--rose-pale);
  font-size: 20px; font-weight: 800; color: var(--ink);
}
.rv-legend-step {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 800; letter-spacing: .07em;
  color: var(--rose); text-transform: uppercase;
}
.rv-intro { font-size: 14.5px; color: var(--ink-soft); margin: -10px 0 20px; }

/* form-row 안에서 label 대신 쓰는 그룹 제목 */
.rv-label {
  display: block; margin-bottom: 9px; font-size: 14.5px; font-weight: 700;
}
.rv-sub { font-style: normal; font-weight: 400; font-size: 13px; color: var(--ink-muted); }

/* ── 선택지 버튼 ── */
.opt-grid { display: grid; gap: 8px; }
.opt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.opt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.opt-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.opt-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.opt-list { display: grid; gap: 8px; }

.opt { position: relative; display: block; cursor: pointer; }
.opt input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.opt > span {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 8px; text-align: center;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.4;
  transition: .15s;
}
.opt:hover > span { border-color: var(--rose-light); }
.opt input:checked + span {
  background: var(--rose-pale); border-color: var(--rose);
  color: var(--rose-darker); font-weight: 700;
}
/* 키보드 사용자를 위한 포커스 표시 */
.opt input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }

.opt-wide > span {
  justify-content: flex-start; text-align: left; min-height: 54px;
  padding: 12px 18px; flex-wrap: wrap; gap: 4px 10px;
}
.opt-note {
  font-style: normal; font-size: 12.5px; font-weight: 500;
  color: var(--accent); background: #fff;
  padding: 2px 8px; border-radius: 20px; border: 1px solid var(--sand-dark);
}

/* 선택 항목 배지 — 필수(*)와 확실히 구분되게 */
.rv-optional {
  display: inline-block; margin-left: 4px; padding: 2px 8px;
  font-style: normal; font-size: 11.5px; font-weight: 700; vertical-align: 1px;
  color: var(--ink-muted); background: var(--sand); border-radius: 20px;
}

/* 주민번호로 읽은 생년월일 — 적으신 번호가 맞는지 그 자리에서 보시게 */
.rv-birth-read {
  margin: 8px 0 2px; padding: 8px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 700; color: var(--rose-darker, #7A3645); background: var(--blush, #FBEDEF);
}
.rv-birth-read.is-bad { color: #A8433C; background: #FBEDEC; }

/* ── 년 / 월 선택 ── */
.rv-ym { display: flex; gap: 8px; }
.rv-ym select { flex: 1; min-width: 0; }

/* ── 우편번호 검색 ── */
.rv-addr-search { display: flex; gap: 8px; align-items: stretch; }
.rv-addr-search input { flex: 0 1 160px; min-width: 0; }
.rv-addr-search .btn { flex-shrink: 0; padding: 0 18px; white-space: nowrap; }

/* ── 동의 ── */
.rv-consent {
  margin-top: 26px; padding: 20px; background: var(--blush);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; gap: 16px;
}
.rv-consent .form-agree { align-items: flex-start; }
.rv-consent .err { display: block; margin-top: 6px; font-size: 13px; color: var(--danger); font-weight: 500; }
.rv-consent-detail {
  display: block; margin: 5px 0 4px; font-style: normal;
  font-size: 12.5px; line-height: 1.65; color: var(--ink-muted);
}

/* ── 단계 이동 ──
   "다음"은 단계를 넘기는 버튼일 뿐이다. 최종 접수 버튼(.rv-submit)과
   같은 무게로 보이면 무엇을 눌러야 끝나는지 알 수 없다.
   그래서 크기·모양·색을 다르게 두고, 화면에도 동시에 나오지 않는다. */
.rv-nav {
  display: flex; gap: 10px; align-items: center;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line);
}
.rv-next {
  margin-left: auto; gap: 8px;
  padding: 13px 26px; font-size: 15.5px;
}
.rv-next-cap { font-weight: 600; opacity: .82; font-size: 14px; }
.rv-next-label { font-weight: 800; }
.rv-next-label::before { content: '· '; opacity: .5; }

/* ── 최종 접수 ── */
.rv-submit-zone {
  margin-top: 30px; padding: 22px;
  background: linear-gradient(180deg, var(--blush) 0%, #fff 100%);
  border: 1.5px solid var(--rose-pale); border-radius: var(--radius-lg);
  text-align: center;
}
.rv-final-note {
  margin-bottom: 15px; font-size: 14px; color: var(--ink-soft); line-height: 1.6;
}
.rv-final-note strong { display: block; margin-bottom: 3px; font-size: 16px; color: var(--rose-darker); }

.rv-submit {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 19px 24px;
  font-family: inherit; font-size: 18px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(196, 102, 122, .34);
  transition: .18s;
}
.rv-submit:hover:not(:disabled) {
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(196, 102, 122, .42);
}
.rv-submit:disabled { opacity: .6; cursor: default; box-shadow: none; }
.rv-submit svg { flex-shrink: 0; }

.rv-save-note {
  margin-top: 12px; font-size: 12.5px; color: var(--ink-muted); text-align: right;
}

/* ── 완료 ── */
.rv-done { text-align: center; padding: 40px 20px 20px; }
.rv-done-icon { color: var(--rose); margin-bottom: 16px; }
.rv-done h2 { font-size: 25px; margin-bottom: 14px; }
.rv-done p { color: var(--ink-soft); line-height: 1.8; }
.rv-code {
  display: inline-block; margin: 6px 0 20px; padding: 10px 22px;
  background: var(--rose-pale); border-radius: 30px;
  font-size: 15px; color: var(--rose-darker);
}
.rv-code strong { letter-spacing: .06em; }
.rv-done-foot { margin-top: 20px; font-size: 13px; color: var(--ink-muted); }

@media (max-width: 760px) {
  .rv-form .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rv-steps li em { font-size: 11px; }
  .rv-steps li span { width: 29px; height: 29px; font-size: 13px; }
  .rv-steps li::before { top: 18px; }
  .rv-legend { font-size: 18px; }
  .opt-grid.cols-4, .opt-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .opt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .rv-nav { gap: 8px; }
  .rv-next { flex: 1; margin-left: 0; padding: 14px 16px; font-size: 15px; }
  .rv-nav .btn-ghost { padding: 14px 18px; }
  .rv-submit-zone { padding: 18px 16px; }
  .rv-submit { font-size: 17px; padding: 18px 20px; }
  .rv-save-note { text-align: center; }
}

/* ═════════════════ 평생교육원 (홈) ═════════════════
   레퍼런스는 갈색 계열이었지만 이 사이트는 로즈 톤이다.
   배경도 스톡 사진 대신 실제 교육원 강의 사진을 쓴다 —
   "진짜 운영되는 곳"이라는 게 사진 한 장으로 전달된다. */
.edu-box {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 46px; align-items: center;
  padding: 54px 58px; border-radius: var(--radius-lg);
  color: #fff; box-shadow: var(--shadow-lg);
  background-image:
    linear-gradient(125deg, rgba(58, 26, 34, .94) 0%, rgba(131, 63, 78, .89) 52%, rgba(163, 79, 98, .82) 100%),
    url('/assets/img/academy/caregiver-training-lecture-1600.jpg');
  background-size: cover;
  background-position: center 38%;
}

.edu-tag {
  display: inline-block; margin-bottom: 16px;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: #FFE9D6;
}
.edu-info h2 {
  font-size: clamp(23px, 3.1vw, 31px); font-weight: 800;
  line-height: 1.38; color: #fff; margin-bottom: 16px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.edu-info p {
  font-size: 15.5px; line-height: 1.78; color: rgba(255, 255, 255, .88);
  margin-bottom: 28px;
}
.edu-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* 어두운 면 위에서는 기본 .btn-ghost 가 읽히지 않는다 */
.btn-ghost-light {
  background: rgba(255, 255, 255, .12); color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff;
}

/* 과정 목록 — 유리판처럼 띄운다 */
.edu-list {
  padding: 30px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
}
.edu-list h3 {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; font-size: 16.5px; font-weight: 800; color: #FFE9D6;
}
.edu-list ul { list-style: none; margin: 0; padding: 0; }
.edu-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: 14.5px; line-height: 1.5; color: #fff;
}
.edu-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.edu-list li em {
  flex-shrink: 0; font-style: normal;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-size: 11.5px; font-weight: 700; color: #FFF3E6;
}

@media (max-width: 900px) {
  .edu-box { grid-template-columns: 1fr; gap: 30px; padding: 38px 30px; }
}
@media (max-width: 560px) {
  .edu-box { padding: 30px 22px; border-radius: var(--radius); }
  .edu-list { padding: 22px; }
  .edu-actions .btn { flex: 1; justify-content: center; }
  .edu-list li { font-size: 14px; }
}

/* 곧 개강하는 과정 — 눈에 먼저 들어오게 */
.edu-list li.is-soon span { font-weight: 700; }
.edu-list li em.is-soon {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 8px rgba(201, 138, 91, .4);
}
.tag-soon { background: var(--accent) !important; color: #fff !important; }

/* ═════════════════ 상담 신청 카드 (홈) ═════════════════
   블러시 면 위에 흰 카드를 띄우고, 좌: 연락 안내 / 우: 폼 으로 나눈다.
   폼만 덩그러니 있을 때보다 "사람이 받는다"는 느낌이 산다. */
.contact-box {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: 52px; align-items: start;
  padding: 48px 54px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}

.contact-left h2 {
  font-size: clamp(23px, 3.1vw, 31px); font-weight: 800;
  line-height: 1.34; margin: 12px 0 14px;
}
.contact-left > p {
  font-size: 15.5px; line-height: 1.78; color: var(--ink-soft);
  margin-bottom: 30px;
}

.contact-info { list-style: none; margin: 0; padding: 0; }
.contact-info li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.contact-info li:last-child { border-bottom: 1px solid var(--line); }

.ci-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rose-pale); color: var(--rose-dark);
}
.contact-info div { font-size: 15px; color: var(--ink); line-height: 1.55; }
.contact-info strong {
  display: block; margin-bottom: 3px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .03em; color: var(--ink-muted);
}
.contact-info a { color: var(--rose-dark); font-weight: 700; }
.contact-info a:hover { text-decoration: underline; }
.ci-sub {
  display: block; margin-top: 2px;
  font-size: 13px; color: var(--ink-muted); font-weight: 400;
}

/* 카드 안이므로 폼은 자기 테두리를 갖지 않는다 */
.contact-form-side .form-row:last-of-type { margin-bottom: 22px; }

@media (max-width: 900px) {
  .contact-box { grid-template-columns: 1fr; gap: 34px; padding: 38px 32px; }
  .contact-left h2 br { display: none; }
}
@media (max-width: 560px) {
  .contact-box { padding: 28px 22px; border-radius: var(--radius); }
  .contact-info li { padding: 14px 0; gap: 12px; }
  .ci-icon { width: 36px; height: 36px; }
  .contact-info div { font-size: 14.5px; }
}

/* ═════════════════ 팝업 (레이어 배너) ═════════════════ */
.popup-layer { position: fixed; inset: 0; z-index: 900; pointer-events: none; }

.popup-box {
  position: absolute; width: var(--pw, 380px); max-width: calc(100vw - 32px);
  pointer-events: auto;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 18px 46px rgba(61, 52, 54, .26);
  animation: popup-in .22s ease-out both;
}
.popup-box.is-closing { animation: popup-out .18s ease-in both; }

@keyframes popup-in  { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes popup-out { to   { opacity: 0; transform: translateY(6px)  scale(.98); } }

/* 9분할 위치 — 가운데 계열은 transform 으로 축을 맞춘다 */
.popup-box[data-position^="top-"]    { top: var(--py, 24px); }
.popup-box[data-position^="bottom-"] { bottom: var(--py, 24px); }
.popup-box[data-position^="middle-"],
.popup-box[data-position="center"]   { top: 50%; }

.popup-box[data-position$="-left"]   { left: var(--px, 24px); }
.popup-box[data-position$="-right"]  { right: var(--px, 24px); }
.popup-box[data-position$="-center"],
.popup-box[data-position="center"]   { left: 50%; }

.popup-box[data-position$="-center"]                 { transform: translateX(-50%); }
.popup-box[data-position^="middle-"]                 { transform: translateY(-50%); }
.popup-box[data-position="center"]                   { transform: translate(-50%, -50%); }

/* 애니메이션이 transform 을 덮어써 위치가 튀는 것을 막는다 */
.popup-box[data-position$="-center"],
.popup-box[data-position^="middle-"],
.popup-box[data-position="center"] { animation-name: popup-fade; }
.popup-box[data-position$="-center"].is-closing,
.popup-box[data-position^="middle-"].is-closing,
.popup-box[data-position="center"].is-closing { animation-name: popup-fade-out; }
@keyframes popup-fade     { from { opacity: 0; } }
@keyframes popup-fade-out { to   { opacity: 0; } }

.popup-content a { display: block; color: inherit; }
.popup-img { width: 100%; height: auto; display: block; }
.popup-body { padding: 22px 24px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.popup-body :where(h2, h3) { font-size: 18px; margin-bottom: 8px; color: var(--rose-darker); }
.popup-body p { margin-bottom: 10px; }
.popup-body p:last-child { margin-bottom: 0; }
.popup-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

.popup-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; background: var(--blush); border-top: 1px solid var(--line);
}
.popup-foot button {
  font-family: inherit; font-size: 13px; color: var(--ink-soft);
  background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.popup-foot button:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.popup-close { font-weight: 700; color: var(--rose-dark) !important; }

/* 모바일 — 지정 위치를 무시하고 아래에 쌓는다.
   좁은 화면에서 9분할 좌표는 의미가 없고 본문만 가린다. */
@media (max-width: 640px) {
  .popup-layer {
    display: flex; flex-direction: column-reverse; justify-content: flex-start;
    gap: 10px; padding: 12px; inset: auto 0 0 0;
  }
  .popup-box {
    position: static !important; transform: none !important;
    width: 100% !important; max-width: 100%;
    animation-name: popup-in;
  }
  .popup-box.is-closing { animation-name: popup-out; }
  .popup-body { padding: 18px 18px; font-size: 14.5px; }
}

/* ═════════════════ 대표 소개 (홈, 히어로 바로 아래) ═════════════════ */
.about-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 56px; align-items: center;
}

/* ── 사진 + 하단 오버레이 ── */
.about-photo {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: var(--sand);
}
.about-photo img {
  width: 100%; height: 100%; min-height: 460px;
  object-fit: cover; object-position: center 18%;
  display: block;
}
.about-photo-overlay {
  position: absolute; inset: auto 0 0 0; padding: 30px 28px 26px;
  color: #fff;
  background: linear-gradient(to top,
    rgba(45, 28, 33, .95) 0%, rgba(45, 28, 33, .74) 58%, rgba(45, 28, 33, 0) 100%);
}
.about-badge {
  display: inline-block; margin-bottom: 12px;
  padding: 4px 12px; border-radius: 4px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
}
.about-photo-overlay :where(h2, h3) {
  font-size: 20px; font-weight: 700; line-height: 1.42;
  color: #fff; margin-bottom: 14px;
}
.about-photo-overlay :where(h2, h3) strong { font-weight: 800; }

.about-career { list-style: none; margin: 0; padding: 0; }
.about-career li {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 7px; font-size: 13.5px; color: rgba(255, 255, 255, .92);
}
.about-career li:last-child { margin-bottom: 0; }
.about-career svg { flex-shrink: 0; color: #F3C79A; }

/* ── 오른쪽 글 ── */
.about-text h2 {
  font-size: clamp(22px, 3vw, 30px); font-weight: 800;
  line-height: 1.45; margin: 12px 0 20px; color: var(--ink);
}
.about-text > p {
  font-size: 16px; line-height: 1.8; color: var(--ink-soft); margin-bottom: 16px;
}

.about-boxes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px;
}
.about-box {
  padding: 22px; border-radius: var(--radius);
  background: var(--blush); border: 1px solid var(--line);
  transition: .18s;
}
.about-box:hover { transform: translateY(-3px); border-color: var(--rose-light); }
.about-box svg { color: var(--rose); margin-bottom: 10px; }
.about-box h4 { font-size: 16px; font-weight: 700; margin-bottom: 7px; line-height: 1.45; }
.about-box p { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-photo img { min-height: 380px; }
  .about-text h2 br { display: none; }
}
@media (max-width: 560px) {
  .about-boxes { grid-template-columns: 1fr; gap: 12px; }
  .about-photo-overlay { padding: 24px 20px 20px; }
  .about-photo-overlay h3 { font-size: 18px; }
}

/* ═════════════════ 서비스 지역 (하단 간략 띠) ═════════════════ */
.region-strip {
  background: var(--sand); border-top: 1px solid var(--sand-dark);
  border-bottom: 1px solid var(--sand-dark);
}
.region-strip-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-bottom: 14px;
}
.region-strip-head strong { font-size: 15px; color: var(--ink); }
.region-strip-head span { font-size: 13.5px; color: var(--ink-muted); }

.region-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.region-chips a {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--sand-dark);
  font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: .15s;
}
.region-chips a:hover {
  background: var(--rose-pale); border-color: var(--rose-light); color: var(--rose-darker);
}

/* ═════════════════ 히어로 — 사진 배경 ═════════════════
   사진이 크림 톤으로 아주 밝다. 흰 글씨는 읽히지 않으므로
   어둡게 덮는 대신 왼쪽에 크림 베일을 씌우고 원래 글자색을 쓴다.
   사진의 왼쪽 3분의 1이 비어 있어 그 위가 글자 자리가 된다. */
.hero-photo {
  min-height: 620px;
  display: flex; align-items: center;
  padding: 80px 0;
  text-align: left;
  background-image:
    linear-gradient(100deg,
      rgba(253, 250, 247, .97) 0%,
      rgba(253, 250, 247, .93) 30%,
      rgba(253, 250, 247, .62) 48%,
      rgba(253, 250, 247, .12) 66%,
      rgba(253, 250, 247, 0)   80%),
    url('/assets/img/hero/hero-1672.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
/* ⚠️ .wrap 의 가운데 정렬을 풀면 글이 화면 맨 왼쪽에 붙어
   상단 로고보다 바깥으로 나간다. wrap 은 그대로 두고
   안쪽 내용만 좁혀야 로고와 같은 세로선에서 시작한다. */
.hero-photo .hero-inner { max-width: var(--wrap); margin: 0 auto; }
/* ⚠️ margin-left/right 를 0 으로 눌러야 한다.
   .hero-lead 가 자체적으로 margin:0 auto 를 갖고 있어서,
   폭만 좁히면 그 블록이 wrap 한가운데로 밀려간다. */
.hero-photo .hero-inner > * { max-width: 560px; margin-left: 0; margin-right: 0; }

/* 사진 옆 좁은 단이라 가운데 정렬 히어로보다 작게 잡는다 */
.hero-photo h1 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 18px; }
.hero-photo .hero-lead { font-size: clamp(14.5px, 1.35vw, 16px); margin-bottom: 30px; }

/* "소중한 엄마와 아기를 위한" 은 한 줄로 둔다.
   폭이 좁아지는 화면에서는 풀어야 넘치지 않는다. */
@media (min-width: 901px) {
  .hero-line1 { white-space: nowrap; }
}
.hero-photo .hero-actions,
.hero-photo .hero-points { justify-content: flex-start; }

/* 사진이 주인공이므로 배경 얼룩은 걷어낸다. 풍선만 남긴다. */
.hero-photo .hero-blob { display: none; }

@media (max-width: 900px) {
  .hero-photo {
    min-height: 0; padding: 64px 0 68px; text-align: center;
    /* 좁은 화면에서는 인물이 오른쪽으로 밀려 잘린다.
       위아래 방향 베일로 바꾸고 사진을 아래쪽에 둔다. */
    background-image:
      linear-gradient(180deg,
        rgba(253, 250, 247, .96) 0%,
        rgba(253, 250, 247, .88) 46%,
        rgba(253, 250, 247, .55) 72%,
        rgba(253, 250, 247, .35) 100%),
      url('/assets/img/hero/hero-1200.jpg');
    background-position: center bottom;
  }
  .hero-photo .hero-inner { max-width: 100%; }
  .hero-photo .hero-actions,
  .hero-photo .hero-points { justify-content: center; }
}
@media (max-width: 560px) {
  .hero-photo {
    background-image:
      linear-gradient(180deg,
        rgba(253, 250, 247, .97) 0%,
        rgba(253, 250, 247, .9) 52%,
        rgba(253, 250, 247, .6) 100%),
      url('/assets/img/hero/hero-760.jpg');
  }
}

/* ═════════════════ 중간 배너 — 밀려 올라가는 배경 ═════════════════ */
.feature-band {
  position: relative;
  padding: 104px 0;
  text-align: center; color: #fff;
  background-image:
    linear-gradient(rgba(42, 26, 30, .72), rgba(42, 26, 30, .72)),
    url('/assets/img/hero/parallax-2000.jpg');
  background-size: cover;
  background-position: center;
  /* 배경을 화면에 고정해 콘텐츠가 그 위를 지나가게 한다 */
  background-attachment: fixed;
}
.feature-band h2 {
  font-size: clamp(21px, 3.2vw, 32px); font-weight: 800;
  line-height: 1.5; color: #fff; margin-bottom: 18px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}
.feature-band p {
  font-size: 16.5px; line-height: 1.78; color: rgba(255, 255, 255, .9);
  max-width: 680px; margin: 0 auto 32px;
}

/* ⚠️ iOS 사파리는 background-attachment: fixed 를 무시하고
   배경을 뷰포트 크기로 늘려버린다. 사진이 엉뚱하게 잘려 보이므로
   좁은 화면에서는 고정을 풀고 일반 배경으로 되돌린다. */
@media (max-width: 900px) {
  .feature-band {
    background-attachment: scroll;
    background-image:
      linear-gradient(rgba(42, 26, 30, .74), rgba(42, 26, 30, .74)),
      url('/assets/img/hero/parallax-1200.jpg');
    padding: 76px 0;
  }
}
@media (max-width: 560px) {
  .feature-band {
    background-image:
      linear-gradient(rgba(42, 26, 30, .74), rgba(42, 26, 30, .74)),
      url('/assets/img/hero/parallax-760.jpg');
    padding: 62px 0;
  }
  .feature-band p { font-size: 15px; }
}

/* 움직임을 줄이도록 설정한 분에게는 고정하지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .feature-band { background-attachment: scroll; }
}

/* ── 히어로 지표 ──
   가로 구분선은 뺐다. 히어로 안을 위아래로 갈라놔
   문단이 끊긴 것처럼 보이던 원인이었다.
   대신 항목마다 짧은 강조 막대를 세워 리듬만 준다. */
.hero-stats {
  /* 칸 수를 3으로 못 박지 않는다 — 지표를 늘리거나 줄여도 배치가 그대로 따라온다 */
  display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: start;
  gap: 0 clamp(32px, 4vw, 58px);   /* 두 칸만 둘 때 너무 붙어 보이지 않게 */
  list-style: none; margin: 0; padding: 4px 0 0;
}
.hero-stats li { display: flex; flex-direction: column; gap: 5px; }

/* 숫자 위 짧은 막대 — 선이 아니라 점 같은 표시라 나뉘어 보이지 않는다 */
.hero-stats li::before {
  content: ''; width: 22px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--rose) 0%, var(--rose-light) 100%);
  margin-bottom: 4px;
}

.hero-stats strong {
  display: flex; align-items: baseline; gap: 2px;
  font-size: clamp(28px, 3.2vw, 38px); font-weight: 800;
  color: var(--rose-dark); line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* 단위는 숫자에 딸린 꼬리라 작게 — 숫자가 먼저 읽혀야 한다 */
.hero-stats strong em {
  font-style: normal; font-size: .46em; font-weight: 700;
  color: var(--rose); letter-spacing: 0;
}
.hero-stats span {
  font-size: 12.5px; color: var(--ink-muted); font-weight: 500; line-height: 1.45;
}

@media (max-width: 900px) {
  .hero-stats { justify-content: center; }
  .hero-stats li { align-items: center; text-align: center; }
}
@media (max-width: 420px) {
  .hero-stats { gap: 0 14px; }
  .hero-stats span { font-size: 11px; }
  .hero-stats li::before { width: 16px; height: 2.5px; }
}

/* ═════════════════ 배너형 히어로 ═════════════════
   문구·로고가 이미지 안에 이미 들어 있다.
   배경(background)이 아니라 img 로 넣는 이유는 잘리면 안 되기 때문이다 —
   배경으로 깔면 넓은 화면에서 위아래가 잘려 아래쪽 아이콘 줄이 사라진다. */
.hero-banner {
  position: relative;
  /* 헤더가 차지한 자리만큼 끌어올려 배너가 그 아래로 들어가게 한다 */
  margin-top: -71px;
  background: var(--blush);
}
.hero-banner img { width: 100%; height: auto; display: block; }

/* 이미지 하단에 겹쳐 놓는 버튼 */
.hero-banner-cta {
  position: absolute; left: 50%; bottom: clamp(14px, 3.4vw, 40px);
  transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 2;
}
.hero-banner-cta .btn { box-shadow: 0 6px 20px rgba(61, 52, 54, .2); }

/* ── 배너 위에 얹은 메뉴 ── */
.site-header.is-overlay {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  /* 이미지 위쪽이 밝아 글자가 묻힌다. 아주 옅은 흰 막만 깐다. */
  background-image: linear-gradient(to bottom,
    rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .34) 55%, rgba(255, 255, 255, 0) 100%);
}
/* 배너에 로고가 이미 크게 들어 있어 두 번 나오면 지저분하다 */
.site-header.is-overlay .logo { opacity: 0; pointer-events: none; }
.site-header.is-overlay .gnb { margin-left: auto; }

/* 스크롤하면 원래 헤더로 돌아온다 (site.js 가 클래스를 붙인다) */
.site-header.is-overlay.is-stuck {
  background: rgba(253, 250, 247, .95);
  background-image: none;
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom-color: var(--line);
}
.site-header.is-overlay.is-stuck .logo { opacity: 1; pointer-events: auto; }
.site-header.is-overlay.is-stuck .gnb { margin-left: 0; }
.site-header.is-overlay .logo,
.site-header.is-overlay .gnb { transition: opacity .2s ease; }

@media (max-width: 900px) {
  .hero-banner { margin-top: -71px; }
  /* 좁은 화면에서는 메뉴 버튼만 남아 겹쳐도 가릴 것이 없다 */
  .site-header.is-overlay .logo { opacity: 1; pointer-events: auto; }
}
@media (max-width: 560px) {
  .hero-banner-cta {
    left: 0; right: 0; transform: none; bottom: 10px;
    justify-content: center; padding: 0 12px;
  }
  .hero-banner-cta .btn { flex: 1; justify-content: center; padding: 12px 10px; font-size: 14px; }
}

/* ═════════════════ 일반 이용요금 표 ═════════════════ */
.fee-plan {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin: 28px 0 10px; font-size: 18px; font-weight: 800; color: var(--ink);
}
.fee-plan.is-premium { color: var(--rose-darker); }
.fee-plan em {
  font-style: normal; font-size: 12.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: var(--rose-pale); color: var(--rose-dark);
}

.fee-table th:first-child { width: 108px; }
.fee-table td { text-align: right; font-variant-numeric: tabular-nums; }
.fee-table thead th { text-align: center; }
.fee-table tbody th { font-weight: 600; color: var(--ink-soft); }
/* 총금액 줄은 눈이 먼저 가야 한다 */
.fee-table tr.is-total { background: var(--blush); }
.fee-table tr.is-total td strong { color: var(--rose-darker); font-size: 15.5px; }

/* 추가요금 — 표를 또 쓰면 무거워서 목록으로 */
.fee-extra-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.fee-extra {
  padding: 20px 22px; background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.fee-extra h4 { font-size: 14.5px; font-weight: 800; margin-bottom: 12px; color: var(--ink); }
.fee-extra ul { list-style: none; margin: 0; padding: 0; }
.fee-extra li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--line);
  font-size: 14px; color: var(--ink-soft);
}
.fee-extra li:last-child { border-bottom: 0; }
.fee-extra em {
  font-style: normal; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── 관리사 등급 근거 ── */
.grade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.grade-card {
  padding: 24px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.grade-card h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 800; margin-bottom: 14px; color: var(--rose-darker);
}
.grade-card .check-list li { font-size: 14.5px; margin-bottom: 9px; }
.grade-note {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-muted); line-height: 1.6;
}

@media (max-width: 700px) {
  .fee-extra-wrap, .grade-grid { grid-template-columns: 1fr; }
  .fee-table th:first-child { width: 84px; }
}

/* ═════════════════ 신뢰 지표 (홈) ═════════════════
   왼쪽에 대표 수치 하나, 오른쪽 어두운 판에 근거 셋.
   숫자만 나열하면 광고처럼 보이므로 각 줄에 설명을 붙인다. */
.trust-stats {
  display: grid; grid-template-columns: 330px 1fr;
  gap: 22px; align-items: stretch;
}

.ts-headline {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 40px 24px; text-align: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #fff 0%, var(--rose-pale) 100%);
  border: 1px solid var(--rose-pale);
  box-shadow: var(--shadow);
}
.ts-headline strong {
  display: flex; align-items: baseline; justify-content: center;
  font-size: clamp(46px, 6.4vw, 68px); font-weight: 800; line-height: 1;
  color: var(--rose); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.ts-headline strong em { font-style: normal; font-size: .52em; margin-left: 2px; }
.ts-headline span { font-size: 15px; font-weight: 700; color: var(--rose-darker); }
.ts-headline small { font-size: 12px; color: var(--ink-muted); }

.ts-detail {
  padding: 36px 40px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #3B2A2E 0%, #55383F 100%);
  color: #fff;
}
.ts-detail h2 {
  font-size: clamp(18px, 2.3vw, 23px); font-weight: 800;
  color: #FFE9D6; margin-bottom: 20px; line-height: 1.45;
}
.ts-detail ul { list-style: none; margin: 0; padding: 0; }
.ts-detail li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .13);
  font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .9);
}
.ts-detail li:last-child { border-bottom: 0; padding-bottom: 0; }
.ts-detail li strong {
  flex-shrink: 0; min-width: 78px;
  font-size: 17px; font-weight: 800; color: #FFD9A8;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .trust-stats { grid-template-columns: 1fr; }
  .ts-headline { padding: 30px 20px; }
  .ts-detail { padding: 28px 24px; }
  .ts-detail li { font-size: 14.5px; gap: 10px; }
  .ts-detail li strong { min-width: 66px; font-size: 16px; }
}

/* ── 부가서비스 표 ── */
.addon-table th:first-child { width: auto; }
.addon-table .addon-unit { color: var(--ink-muted); font-size: 13.5px; white-space: nowrap; }
.addon-table .addon-amt {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.addon-table .addon-amt strong { color: var(--rose-darker); }
.addon-notes {
  list-style: none; margin: 14px 0 0; padding: 0;
  font-size: 13.5px; color: var(--ink-muted); line-height: 1.7;
}
.addon-notes li { position: relative; padding-left: 14px; margin-bottom: 5px; }
.addon-notes li::before { content: '·'; position: absolute; left: 4px; }

/* ═════════════════ 서브페이지 상단 사진 띠 ═════════════════
   기존 .page-head 는 블러시 단색이었다. 사진을 깔되
   글자는 원래 색을 그대로 쓴다 — 사진이 밝아 흰 글씨는 묻힌다.
   왼쪽에 블러시 베일을 씌워 글자 자리를 만든다.

   베일은 여기 한 번만 정의하고, 페이지별로는 사진 주소만 넘긴다.
   새 페이지에 적용하려면 아래 두 가지면 끝이다.
     1) <header class="page-head has-photo ph-이름">
     2) .ph-이름 { --ph: url(…-1671.jpg); --ph-m: …; --ph-s: …; }
   ------------------------------------------------------------ */
.page-head.has-photo {
  display: flex; align-items: center;
  min-height: 280px; padding: 48px 0;
  background-size: cover;
  background-repeat: no-repeat;
  /* 사진 층만 따로 잡아야 진입 애니메이션을 걸 수 있다.
     첫 층(베일)은 그라디언트라 위치가 의미 없다. */
  background-position: center center, center var(--ph-y, 50%);
  animation: ph-rise 2.6s cubic-bezier(.22, .61, .36, 1) both;
  background-image:
    linear-gradient(100deg,
      rgba(249, 236, 232, .97) 0%,
      rgba(249, 236, 232, .93) 30%,
      rgba(249, 236, 232, .60) 49%,
      rgba(249, 236, 232, .14) 68%,
      rgba(249, 236, 232, 0)   82%),
    var(--ph);
}
.page-head.has-photo .wrap { width: 100%; }
.page-head.has-photo h1,
.page-head.has-photo p { max-width: 560px; }

@media (max-width: 900px) {
  /* 좁은 화면에서는 인물이 오른쪽으로 밀려 잘린다.
     위아래 방향 베일로 바꾸고 사진을 아래쪽에 둔다. */
  .page-head.has-photo {
    min-height: 0; padding: 38px 0 42px;
    background-image:
      linear-gradient(180deg,
        rgba(249, 236, 232, .96) 0%,
        rgba(249, 236, 232, .88) 52%,
        rgba(249, 236, 232, .58) 100%),
      var(--ph-m, var(--ph));
  }
  .page-head.has-photo h1,
  .page-head.has-photo p { max-width: 100%; }
}
@media (max-width: 560px) {
  .page-head.has-photo {
    background-image:
      linear-gradient(180deg,
        rgba(249, 236, 232, .97) 0%,
        rgba(249, 236, 232, .9) 55%,
        rgba(249, 236, 232, .62) 100%),
      var(--ph-s, var(--ph-m, var(--ph)));
  }
}

/* ── 페이지별 사진 ──
   --ph-y 는 인물이 잘리지 않도록 맞춘 세로 위치다. 진입 애니메이션의 도착 지점이기도 하다.
   가로가 넓은 원본은 기본값(center right)으로 둔다. */
.ph-about {
  --ph:   url('/assets/img/pagehead/about-1671.jpg');
  --ph-m: url('/assets/img/pagehead/about-1200.jpg');
  --ph-s: url('/assets/img/pagehead/about-760.jpg');
  --ph-y: 40%;
}
.ph-goods {
  --ph:   url('/assets/img/pagehead/goods-1671.jpg');
  --ph-m: url('/assets/img/pagehead/goods-1200.jpg');
  --ph-s: url('/assets/img/pagehead/goods-760.jpg');
  --ph-y: 50%;
}
.ph-postpartum {
  --ph:   url('/assets/img/pagehead/postpartum-1671.jpg');
  --ph-m: url('/assets/img/pagehead/postpartum-1200.jpg');
  --ph-s: url('/assets/img/pagehead/postpartum-760.jpg');
  --ph-y: 45%;   /* 산모 얼굴 + 아기 온전 */
}
.ph-pricing {
  --ph:   url('/assets/img/pagehead/pricing-1671.jpg');
  --ph-m: url('/assets/img/pagehead/pricing-1200.jpg');
  --ph-s: url('/assets/img/pagehead/pricing-760.jpg');
  --ph-y: 30%;   /* 얼굴 + 차를 건네는 손 (아기는 아래 바구니라 함께 담기지 않는다) */
}
.ph-babysitter {
  --ph:   url('/assets/img/pagehead/babysitter-1671.jpg');
  --ph-m: url('/assets/img/pagehead/babysitter-1200.jpg');
  --ph-s: url('/assets/img/pagehead/babysitter-760.jpg');
  --ph-y: 45%;   /* 아기 얼굴 + 팔 */
}
.ph-academy {
  --ph:   url('/assets/img/pagehead/academy-1671.jpg');
  --ph-m: url('/assets/img/pagehead/academy-1200.jpg');
  --ph-s: url('/assets/img/pagehead/academy-760.jpg');
  --ph-y: 33%;   /* 부부 얼굴 + 아기 머리 */
}
.ph-column {
  --ph:   url('/assets/img/pagehead/column-1671.jpg');
  --ph-m: url('/assets/img/pagehead/column-1200.jpg');
  --ph-s: url('/assets/img/pagehead/column-760.jpg');
  --ph-y: 80%;   /* 산모·아기·관리사 모두 */
}

/* ═══════════ 이용자 준수사항 ═══════════ */

/* 접이식 — 산후도우미 페이지 안에서 바로 펼쳐 본다 */
.manner-fold {
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; overflow: hidden;
}
.manner-fold > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; cursor: pointer; list-style: none;
}
.manner-fold > summary::-webkit-details-marker { display: none; }
.manner-fold > summary:hover { background: var(--cream); }
.mf-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rose-pale); color: var(--rose-darker);
}
.mf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mf-txt strong { font-size: 17px; color: var(--ink); }
.mf-txt em { font-style: normal; font-size: 14px; color: var(--ink-soft); }
.mf-arrow {
  flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
.manner-fold[open] .mf-arrow { transform: rotate(-135deg) translate(-2px, -2px); }
.manner-fold[open] > summary { border-bottom: 1px solid var(--line); }
.manner-fold-body { padding: 22px 24px 24px; }
.manner-intro { margin: 0 0 18px; font-size: 15px; line-height: 1.75; color: var(--ink-soft); }
.manner-more { margin: 18px 0 0; font-size: 14.5px; color: var(--ink-soft); }

/* 항목 목록 */
.manner-list { counter-reset: mn; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px; }
.manner-item {
  counter-increment: mn; position: relative;
  padding: 15px 18px 15px 50px;
  background: var(--cream); border-radius: 12px;
}
.manner-item::before {
  content: counter(mn); position: absolute; left: 16px; top: 15px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rose); color: #fff; font-size: 12px; font-weight: 700;
}
.manner-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink); }
.manner-note {
  margin: 9px 0 0; padding: 9px 12px;
  background: #fff; border-radius: 8px;
  font-size: 13.5px; line-height: 1.65; color: var(--ink-soft);
}
.manner-note::before { content: '※ '; color: var(--rose-dark); }

/* 참고 범주 — 무거운 내용이라 접어 둔다 */
.manner-scopes { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.manner-scope { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.manner-scope > summary {
  padding: 12px 16px; cursor: pointer; font-size: 14px; color: var(--ink-soft);
  list-style: none;
}
.manner-scope > summary::-webkit-details-marker { display: none; }
.manner-scope > summary::before { content: '＋ '; color: var(--rose-dark); font-weight: 700; }
.manner-scope[open] > summary::before { content: '－ '; }
.manner-scope dl { margin: 0; padding: 0 16px 14px; font-size: 13.5px; line-height: 1.7; }
.manner-scope dt { font-weight: 700; color: var(--ink); margin-top: 8px; }
.manner-scope dd { margin: 2px 0 0; color: var(--ink-soft); }

@media (max-width: 560px) {
  .manner-fold > summary { padding: 16px 15px; gap: 11px; }
  .mf-ico { width: 36px; height: 36px; border-radius: 10px; }
  .mf-txt strong { font-size: 16px; }
  .manner-fold-body { padding: 18px 15px 20px; }
  .manner-item { padding: 13px 14px 13px 44px; }
  .manner-item::before { left: 13px; }
  .manner-text { font-size: 14.5px; }
}

/* 상단 사진 — 산후도우미와 같은 계열을 쓰되 위치만 달리한다 */
.ph-manners {
  --ph:   url('/assets/img/pagehead/postpartum-1671.jpg');
  --ph-m: url('/assets/img/pagehead/postpartum-1200.jpg');
  --ph-s: url('/assets/img/pagehead/postpartum-760.jpg');
  --ph-y: 40%;
}

/* ============================================================
   우측 스크롤 네비게이터
   서브 페이지가 길어져 넣었다. 모바일에서는 하단 CTA 위로 띄운다.
   ============================================================ */
.page-nav {
  position: fixed; right: 18px; bottom: 26px; z-index: 85;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s, transform .22s, visibility .22s;
}
.page-nav.is-on { opacity: 1; visibility: visible; transform: none; }

.pn-btn {
  width: 46px; height: 46px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  color: var(--rose-dark); font: inherit; font-size: 9px; font-weight: 700;
  letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 3px 12px rgba(131,63,78,.12);
  transition: background .15s, color .15s, transform .15s;
}
.pn-btn:hover { background: var(--rose); color: #fff; border-color: var(--rose); }
.pn-btn:active { transform: scale(.94); }
.pn-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.pn-btn[disabled] { opacity: .4; cursor: default; }
.pn-btn[disabled]:hover { background: rgba(255,255,255,.94); color: var(--rose-dark); border-color: var(--line); }

@media (max-width: 900px) {
  /* 모바일 하단 CTA(약 68px + 안전영역) 위로 올린다 */
  .page-nav { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); gap: 6px; }
  .pn-btn { width: 42px; height: 42px; }
}

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

@media print { .page-nav { display: none !important; } }

/* 이용후기 — 산모·아기·관리사가 한 장면에 담긴 사진 */
.ph-reviews {
  --ph:   url('/assets/img/pagehead/reviews-1671.jpg');
  --ph-m: url('/assets/img/pagehead/reviews-1200.jpg');
  --ph-s: url('/assets/img/pagehead/reviews-760.jpg');
  --ph-y: 50%;   /* 산모 얼굴 + 아기 + 곁의 손 */
}

/* 페이지에 들어오면 사진이 20px 아래에서 제자리로 천천히 올라온다.
   스크롤과 무관하고, 도착 지점이 --ph-y 라 구도는 그대로다. */
@keyframes ph-rise {
  from { background-position: center center, center calc(var(--ph-y, 50%) - 20px); }
  to   { background-position: center center, center var(--ph-y, 50%); }
}

@media (prefers-reduced-motion: reduce) {
  .page-head.has-photo { animation: none; }
}

/* ============================================================
   전체 요금표 모달
   ============================================================ */
.calc-all { margin: 14px 0 0; text-align: center; }
.calc-all button {
  border: 0; background: none; padding: 4px 2px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--rose-dark); text-decoration: underline; text-underline-offset: 3px;
}
.calc-all button:hover { color: var(--rose-darker); }

.fee-modal {
  width: min(920px, calc(100vw - 28px));
  max-height: min(86vh, 900px);
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: #fff; color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.fee-modal::backdrop { background: rgba(61, 52, 54, .45); }

.fee-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--blush);
}
.fee-modal-head h2 { margin: 0; font-size: 17px; color: var(--rose-darker); }
.fee-modal-x {
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-muted); padding: 0 4px;
}
.fee-modal-x:hover { color: var(--ink); }

.fee-modal-body { padding: 20px 22px; overflow-y: auto; max-height: calc(86vh - 150px); }
.fee-modal-lead { margin: 0 0 20px; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

.fee-group {
  margin: 24px 0 8px; font-size: 15px; color: var(--rose-darker);
  padding-left: 10px; border-left: 3px solid var(--rose);
}
.fee-group:first-of-type { margin-top: 0; }

/* 고시표 원본과 같은 줄 구성 — 유형 코드를 아는 분이 바로 찾도록 */
.fee-table { font-size: 13px; }
.fee-table td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fee-table .fee-rank,
.fee-table .fee-code,
.fee-table .fee-days { text-align: center; }
.fee-table .fee-rank {
  background: var(--blush); color: var(--rose-darker); font-weight: 700; vertical-align: middle;
}
.fee-table .fee-code {
  background: var(--cream); color: var(--ink); font-weight: 700; vertical-align: middle;
  letter-spacing: -.01em;
}
.fee-table td strong { color: var(--rose-darker); font-weight: 700; }
.fee-table tr.is-hit > td { background: #FFF6D6; }
.fee-table tr.is-hit td strong { color: var(--rose-darker); }

/* 유형으로 찾기 */
.fee-find { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fee-find label { font-size: 13px; font-weight: 700; color: var(--ink); }
.fee-find input {
  flex: 1; min-width: 190px; padding: 9px 12px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 13.5px;
}
.fee-find input:focus { outline: none; border-color: var(--rose); }
.fee-find-hint { font-size: 12.5px; color: var(--ink-muted); }

.fee-modal-foot {
  margin: 22px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-strong);
  font-size: 12px; line-height: 1.75; color: var(--ink-muted);
}

.fee-modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--line); background: var(--cream);
}

@media (max-width: 560px) {
  .fee-modal-body { padding: 16px; }
  .fee-modal-head { padding: 15px 16px; }
  .fee-modal-actions { padding: 12px 16px; }
  .fee-table { font-size: 12px; }
}


/* ── 브랜드 로고 소개 (브랜드소개 페이지) ──
   로고를 크게 보여주고 그 옆에서 뜻을 읽게 한다.
   좁은 화면에서는 로고가 위, 글이 아래로 쌓인다. */
.brandmark-sec { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 44px; align-items: center; }
.brandmark-fig {
  display: flex; align-items: center; justify-content: center;
  padding: 34px; border-radius: 20px; background: var(--blush);
}
.brandmark-fig img { width: 100%; max-width: 250px; height: auto; }
.brandmark-body h2 { margin-bottom: 16px; }
.brandmark-body p { margin-bottom: 16px; line-height: 1.9; color: var(--ink-soft); }
.brandmark-body p:last-child { margin-bottom: 0; }
/* 마지막 두 줄은 약속이라 눈에 남아야 한다 */
.brandmark-vow {
  margin-top: 24px; padding: 20px 22px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
  font-size: 16.5px; line-height: 1.85; color: var(--ink);
}
.brandmark-vow b { color: var(--rose-dark); }

@media (max-width: 860px) {
  .brandmark-sec { grid-template-columns: 1fr; gap: 26px; }
  .brandmark-fig { padding: 26px; }
  .brandmark-fig img { max-width: 190px; }
}


/* ── 히어로 사진 슬라이드 ──
   사진이 둘 이상일 때만 붙는다(.has-slides). 한 장이면 예전 그대로 배경 한 장이다.
   층을 겹쳐 놓고 투명도만 바꾼다 — 배경 이미지를 갈아끼우면 로딩 중에 한 번 깜빡인다.

   글자 위에 얹는 베일은 원래 .hero-photo 배경의 첫 층이었다.
   사진이 별도 층으로 빠졌으니 베일도 따로 세워 글자 가독성을 그대로 지킨다. */
.hero-photo.has-slides { background-image: none; }
.hero-photo.has-slides .hero-inner { position: relative; z-index: 2; }

.hero-slides { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-image: var(--ss);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.hero-slide.is-on { opacity: 1; }

@media (min-width: 561px) { .hero-slide { background-image: var(--sm); } }
@media (min-width: 901px) { .hero-slide { background-image: var(--s); } }

.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(100deg,
    rgba(253, 250, 247, .97) 0%,
    rgba(253, 250, 247, .93) 30%,
    rgba(253, 250, 247, .62) 48%,
    rgba(253, 250, 247, .12) 66%,
    rgba(253, 250, 247, 0)   80%);
}

/* 좁은 화면에서는 사진이 아래로 내려가고 글이 위에 온다.
   원래 .hero-photo 가 그렇게 동작하므로 베일도 같은 규칙을 따라야 한다. */
@media (max-width: 900px) {
  .hero-veil {
    background-image: linear-gradient(180deg,
      rgba(253, 250, 247, .96) 0%,
      rgba(253, 250, 247, .90) 42%,
      rgba(253, 250, 247, .40) 68%,
      rgba(253, 250, 247, .10) 100%);
  }
}

/* 지금 몇 번째인지 알려주는 점 */
.hero-dots {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(14px, 2.4vw, 26px);
  display: flex; gap: 8px;
}
.hero-dots button {
  width: 30px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(61, 52, 54, .22); cursor: pointer;
  transition: background .25s;
}
.hero-dots button.is-on { background: var(--rose); }
.hero-dots button:hover { background: var(--rose-light); }

/* 화면 움직임을 줄이도록 설정한 분에게는 넘기지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}


/* ============================================================
   브랜드 굿즈
   ============================================================ */

/* 아직 만들지 않았다는 것을 사진보다 먼저 보이게 둔다 */
.goods-status {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: fit-content; margin: 0 auto 20px; padding: 7px 16px;
  border-radius: 999px; background: var(--blush); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 700; color: var(--rose-dark, #A34F62);
}
.goods-status svg { flex: 0 0 auto; }

.goods-intro {
  font-size: 17px; line-height: 1.95; text-align: center; color: var(--ink-soft);
}
.goods-intro strong { color: var(--ink); }
.goods-intro-sub {
  margin-top: 14px; font-size: 14.5px; color: var(--ink-soft);
}
.goods-intro-sub b { color: var(--ink); }

/* 앞치마·근무복 — 산모가 실제로 마주하는 둘은 크게 */
.goods-lead-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px;
}
/* 나머지 셋 */
.goods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.goods-card { margin: 0; }
/* 사진은 4:5 로 통일한다. 원본 비율이 제각각이면 격자가 들쭉날쭉해진다 */
.goods-shot {
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--blush);
}
.goods-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.goods-card figcaption { padding: 16px 4px 0; }
.goods-no {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--rose); margin-bottom: 6px;
}
.goods-card h2 { font-size: 20px; margin: 0 0 6px; }
.goods-lead   { font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.goods-body   { font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); }
.goods-en {
  margin-top: 10px; font-size: 11.5px; letter-spacing: .14em;
  color: var(--ink-faint, #A99A9D); text-transform: uppercase;
}

.goods-quote {
  margin: 0 0 34px; padding: 0; text-align: center;
  font-size: clamp(20px, 3vw, 26px); line-height: 1.7; color: var(--ink);
}
.goods-quote cite {
  display: block; margin-top: 14px;
  font-size: 11.5px; font-style: normal; letter-spacing: .16em; color: var(--ink-soft);
}

.goods-values {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  list-style: none; margin: 0; padding: 0; text-align: center;
}
.goods-values li { display: grid; justify-items: center; gap: 4px; }
.gv-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 6px;
  border-radius: 50%; background: #fff; color: var(--rose);
}
.goods-values b { font-size: 16px; }
.goods-values span { font-size: 13.5px; color: var(--ink-soft); }

.goods-note { margin-top: 30px; text-align: center; font-size: 13.5px; color: var(--ink-soft); }

/* ── 브랜드소개에 놓는 맛보기 띠 ───────────────────────── */
/* 띠 전체가 아니라 '브랜드 굿즈 보기' 만 링크다.
   덩어리째 링크로 감싸면 사진을 보려고 누른 사람도 페이지를 옮겨 간다. */
.goods-teaser {
  display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 30px;
  padding: 26px 30px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
}
.gt-body h2 { font-size: 21px; margin: 6px 0 8px; }
.gt-body p  { font-size: 14.5px; color: var(--ink-soft); }
a.gt-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 14px; font-weight: 700; color: var(--rose); text-decoration: none;
}
a.gt-more:hover, a.gt-more:focus-visible { text-decoration: underline; }

.gt-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.gt-thumbs img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--line);
}

@media (max-width: 860px) {
  .goods-lead-grid { grid-template-columns: 1fr; }
  .goods-grid      { grid-template-columns: 1fr 1fr; }
  .goods-teaser    { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .goods-grid   { grid-template-columns: 1fr; }
  .goods-values { grid-template-columns: 1fr; gap: 22px; }
  /* 좁은 화면에서 다섯 칸은 손톱만 해진다. 셋만 보여 준다 */
  .gt-thumbs li:nth-child(n + 4) { display: none; }
  .gt-thumbs { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   대·중분류 메뉴 · 고객센터 · 서비스 하위 띠
   ============================================================ */

/* ── 드롭다운 ─────────────────────────────────────────────
   여는 방식을 :hover 하나에만 맡기지 않는다. 마우스가 없는 기기와
   키보드 탭 이동에서는 hover 가 일어나지 않아 하위 메뉴에 닿을 수 없다.
   :focus-within 을 함께 걸어 탭으로도 열리게 한다. */
.gnb > ul > li { position: relative; }
.gnb-caret {
  display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: 2px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: .55;
}
.gnb-sub {
  position: absolute; top: 100%; left: 0; z-index: 40;
  min-width: 210px; margin: 0; padding: 7px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(90, 53, 64, .13);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
/* 대메뉴와 하위 사이의 빈 틈을 덮는다. 안 덮으면 내려가는 도중 hover 가 끊겨
   메뉴가 닫혀 버린다 — 마우스로 쓰기 답답해지는 흔한 원인이다. */
.gnb > ul > li.has-sub::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
}
.gnb > ul > li.has-sub:hover > .gnb-sub,
.gnb > ul > li.has-sub:focus-within > .gnb-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.gnb-sub a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
}
.gnb-sub a:hover, .gnb-sub a:focus-visible {
  background: var(--blush); color: var(--rose-dark); text-decoration: none;
}
.gnb-sub a.is-active { color: var(--rose-dark); background: var(--rose-pale); font-weight: 700; }

@media (max-width: 860px) {
  /* 좁은 화면에서는 접었다 펴는 대신 전부 펼쳐 둔다.
     손가락으로는 '누르면 이동' 과 '누르면 펼침' 이 헷갈린다. */
  .gnb > ul > li.has-sub::after { content: none; }
  .gnb-caret { display: none; }
  .gnb-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    background: #FBF7F7;
  }
  .gnb-sub a {
    padding: 10px 12px 10px 30px; border-radius: 0;
    border-bottom: 1px solid var(--line); font-size: 14.5px;
  }
  .gnb-sub a::before { content: '– '; color: var(--ink-muted); }
}

/* ── 서비스 하위 띠 (페이지 아래) ────────────────────────── */
.svc-nav { padding: 26px 0 30px; background: var(--blush); border-top: 1px solid var(--line); }
.svc-nav-title {
  margin: 0 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; color: var(--rose-dark);
}
.svc-nav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.svc-nav a, .svc-nav .is-here {
  display: block; padding: 8px 14px; border-radius: 999px;
  font-size: 13.5px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
}
.svc-nav a:hover { border-color: var(--rose); color: var(--rose-dark); text-decoration: none; }
.svc-nav .is-here { background: var(--rose); border-color: var(--rose); color: #fff; font-weight: 700; }

/* ── 자주 묻는 질문 ───────────────────────────────────────
   접힘 표시는 위쪽 FAQ 블록에 이미 있다 — summary::after 로 그린 아래 화살표다.
   여기서 또 그리면 표시가 둘이 되어 이상한 모양으로 겹쳐 보인다(실제로 그랬다).
   교육원·정리수납·지역 페이지도 같은 .faq-item 을 쓰므로,
   이 화면만을 위해 summary 배치를 바꾸면 그 세 곳이 함께 어긋난다.
   그래서 여기서는 '갈래 제목' 과 '위지윅 답변 여백' 만 더한다. */
.faq-group { font-size: 18px; margin: 34px 0 12px; color: var(--rose-dark); }
.faq-group:first-child { margin-top: 0; }

.faq-item summary:hover { background: #FDF9F9; }
.faq-item[open] { border-color: var(--rose-light); }

/* 답변은 관리자 위지윅에서 온 HTML 이라 문단·목록이 들어온다.
   첫·마지막 여백만 눌러 상자에 딱 맞게 앉힌다. */
.faq-answer > :first-child { margin-top: 0; }
.faq-answer > :last-child  { margin-bottom: 0; }

/* ── 공지사항 ───────────────────────────────────────────── */
.notice-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.notice-list li { border-bottom: 1px solid var(--line); }
.notice-list a:hover { background: #FDF9F9; text-decoration: none; }
.notice-list .nt-head { display: flex; align-items: center; gap: 8px; }
.notice-list .nt-head strong { font-size: 16px; color: var(--ink); }
.notice-list a:hover .nt-head strong { color: var(--rose-dark); }
.notice-list .nt-sum {
  margin: 6px 0 0; font-size: 14px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* time 은 이제 .nt-meta 안에서 달력 아이콘과 나란히 선다.
   예전 구조(제목 아래 한 줄)에서 쓰던 display:block · margin-top 이 남아 있어
   날짜만 아이콘 아래로 떨어지고 줄 높이가 들쭉날쭉해졌다. */
.notice-list .nt-meta time { font-size: inherit; color: inherit; }
.notice-list li.is-pinned { background: #FEFAFA; }
.nt-pin {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  background: var(--rose-pale); color: var(--rose-dark);
  font-size: 11.5px; font-weight: 700;
}

.notice-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.notice-head h1 { font-size: clamp(22px, 3vw, 29px); margin: 8px 0 10px; }
.notice-head time { font-size: 13px; color: var(--ink-muted); }
.notice-body { min-height: 120px; }
.notice-foot { margin-top: 34px; text-align: center; }

.notice-others { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.notice-others h2 { font-size: 16px; margin-bottom: 12px; }
.notice-others ul { list-style: none; margin: 0; padding: 0; }
.notice-others li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.notice-others time { flex: 0 0 auto; color: var(--ink-muted); font-size: 13px; }

.pager-public { display: flex; justify-content: center; gap: 6px; margin-top: 30px; }
.pager-public a, .pager-public .current {
  min-width: 36px; padding: 8px 10px; text-align: center; border-radius: 8px;
  border: 1px solid var(--line); font-size: 14px; color: var(--ink-soft);
}
.pager-public a:hover { border-color: var(--rose); color: var(--rose-dark); text-decoration: none; }
.pager-public .current { background: var(--rose); border-color: var(--rose); color: #fff; font-weight: 700; }

/* ── 준비 중 안내 ───────────────────────────────────────── */
.page-soon {
  display: grid; justify-items: center; gap: 10px;
  padding: 42px 20px; margin: 0 0 24px;
  border: 1px dashed var(--line); border-radius: 16px; background: var(--blush);
  color: var(--rose);
}
.page-soon b { font-size: 17px; color: var(--ink); }
.page-soon span { font-size: 14.5px; color: var(--ink-soft); line-height: 1.85; text-align: center; }


/* ============================================================
   고객센터 — 사진 머리 · 공지 목록 꾸밈 · 테두리 버튼
   ============================================================ */

/* 메뉴에서 내린 베이비시터 페이지가 쓰던 사진을 고객센터로 돌려 쓴다.
   잠든 아기와 왼쪽 여백이 넉넉해 제목이 얹히는 자리와 부딪히지 않는다. */
.ph-support {
  --ph:   url('/assets/img/pagehead/support-1671.jpg');
  --ph-m: url('/assets/img/pagehead/support-1200.jpg');
  --ph-s: url('/assets/img/pagehead/support-760.jpg');
  --ph-y: 48%;
}

/* ── 테두리 버튼 ──────────────────────────────────────────
   btn-outline 은 관리자 CSS 에만 있고 공개 쪽에는 없었다.
   그래서 '목록으로', '상담 남기기' 같은 버튼이 글자만 덩그러니 나왔다.
   (pages/manners.php · price.php · 410.php · grade.php · 요금표 닫기 버튼 모두 해당) */
.btn-outline {
  background: #fff;
  color: var(--ink-soft);
  border-color: var(--line);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--rose);
  color: var(--rose-dark);
  background: var(--blush);
  text-decoration: none;
}

/* ── 공지 목록 ───────────────────────────────────────────── */
/* 아이콘 · 본문 · 꺾쇠 세 칸이 한 줄이다.
   1fr 은 최소폭이 auto 라, 줄바꿈 없는 긴 요약이 칸을 밀어 화면 밖으로 나간다.
   minmax(0,1fr) 로 눌러야 말줄임(…)이 제대로 걸린다. */
.notice-list a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center; gap: 14px; padding: 18px 6px;
  color: inherit;
}
.nt-ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--blush); color: var(--rose); border: 1px solid var(--line);
}
.notice-list li.is-pinned .nt-ico { background: var(--rose-pale); border-color: var(--rose-light); }
.nt-main { min-width: 0; }
.nt-go {
  color: var(--ink-muted); opacity: .5; transition: transform .16s, opacity .16s;
}
.notice-list a:hover .nt-go { opacity: 1; transform: translateX(3px); color: var(--rose); }

.notice-list .nt-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 8px; font-size: 12.5px; color: var(--ink-muted);
}
.notice-list .nt-meta span { display: inline-flex; align-items: center; gap: 5px; }
.notice-list .nt-meta svg { opacity: .75; }

/* ── 공지 상세 ───────────────────────────────────────────── */
.notice-head { display: grid; justify-items: center; text-align: center; }
.notice-head .nt-crest {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: 14px;
  border-radius: 16px; background: var(--rose-pale); color: var(--rose-dark);
}
.notice-head .nt-meta {
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; color: var(--ink-muted);
}
.notice-head .nt-meta span { display: inline-flex; align-items: center; gap: 5px; }

.notice-foot { display: flex; justify-content: center; }
.notice-foot .btn { display: inline-flex; align-items: center; gap: 7px; }

.notice-others h2 { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.notice-others h2 svg { color: var(--rose); }
.notice-others li a { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.notice-others li a svg { flex: 0 0 auto; color: var(--rose-light); }
.notice-others li a:hover svg { color: var(--rose); }

/* ── 아무것도 없을 때 ─────────────────────────────────────── */
.empty-note {
  display: grid; justify-items: center; gap: 12px;
  padding: 54px 20px; margin: 0;
  border: 1px dashed var(--line); border-radius: 16px; background: var(--blush);
  color: var(--rose);
}
.empty-note b { font-size: 16px; color: var(--ink); }
.empty-note span { font-size: 14px; color: var(--ink-soft); text-align: center; line-height: 1.8; }

@media (max-width: 560px) {
  .notice-list a { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .nt-ico { width: 38px; height: 38px; border-radius: 10px; }
  .nt-go { display: none; }   /* 좁은 화면에서는 줄 전체가 누르는 자리라 화살표가 군더더기다 */
}


/* ============================================================
   표준 일과표 (/postpartum/schedule)
   ============================================================ */

/* 칸을 세로로 잇는 선. 시각 칸 한가운데를 지나간다.
   맨 위·아래를 조금 물려 잘라 선이 카드 밖으로 비어져 나오지 않게 한다. */
.daybook {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
}
.daybook::before {
  content: ''; position: absolute; z-index: 0;
  left: 66px; top: 34px; bottom: 34px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--rose-light), var(--rose-pale));
}

.db-card {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 134px minmax(0, 1fr);
  gap: 24px; align-items: start;
  background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 24px;
  transition: border-color .18s, box-shadow .18s;
}
.db-card:hover { border-color: var(--rose-light); box-shadow: 0 8px 24px rgba(163, 79, 98, .07); }

/* 휴게시간은 일하는 시간이 아니다 — 색을 달리해 훑을 때 바로 갈린다 */
.db-card.is-break { background: #FFFBF7; border-color: #F2DFCC; }
.db-card.is-break:hover { border-color: #E8C9AC; box-shadow: 0 8px 24px rgba(201, 138, 91, .09); }

/* ── 왼쪽: 시각과 그림 ── */
.db-when { display: grid; justify-items: center; gap: 11px; }
.db-time {
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: #fff; border: 1px solid var(--rose-pale);
  font-size: 13px; font-weight: 700; color: var(--rose-dark);
  font-variant-numeric: tabular-nums;
}
.db-card.is-break .db-time { border-color: #F0DCC6; color: var(--warning, #C98A5B); }

.db-art {
  display: grid; justify-items: center; gap: 3px;
  width: 74px; padding: 12px 0 10px; border-radius: 18px;
  background: var(--blush); color: var(--rose);
  border: 1px solid var(--line);
}
.db-card.is-break .db-art { background: #FDF4EA; color: #C98A5B; border-color: #F2E3D2; }
.db-tag { font-size: 11px; font-weight: 700; letter-spacing: -.02em; }

/* ── 오른쪽: 하는 일 ── */
.db-what h3 { font-size: 16.5px; margin: 2px 0 11px; color: var(--ink); }

.db-items { list-style: none; margin: 0; padding: 0; }
.db-items > li {
  position: relative; padding-left: 16px; margin-bottom: 6px;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
}
.db-items > li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rose-light);
}
.db-card.is-break .db-items > li::before { background: #E8B98E; }
.db-items > li:last-child { margin-bottom: 0; }

/* 서비스 범위 밖이라 밝혀 두는 단서 — 본문보다 한 톤 물린다 */
.db-aside {
  display: inline-block; margin-left: 4px;
  font-size: 12.5px; color: var(--ink-muted);
}
.db-aside::before { content: '('; }
.db-aside::after  { content: ')'; }

/* 첫 방문일처럼 그날만 하는 일 */
.db-note {
  margin-top: 12px; padding: 12px 15px;
  background: var(--blush); border: 1px solid var(--line); border-radius: 12px;
}
.db-note strong {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 13.5px; color: var(--rose-dark);
}
.db-note ul { list-style: none; margin: 0; padding: 0; }
.db-note li {
  position: relative; padding-left: 11px; margin-bottom: 3px;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-soft);
}
.db-note li::before { content: '–'; position: absolute; left: 0; color: var(--rose); }
.db-note li:last-child { margin-bottom: 0; }

/* 산모님께 드리는 한마디 */
.db-warm {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 12px 0 0; padding: 11px 14px;
  background: #FFF6EE; border-left: 3px solid #E8A87C; border-radius: 0 10px 10px 0;
  font-size: 13.5px; line-height: 1.65; color: #6B564C;
}
.db-warm svg { flex: 0 0 auto; margin-top: 3px; color: #D98F63; }

.db-foot {
  margin: 22px 0 0; padding: 16px 18px;
  border: 1px dashed var(--line); border-radius: 14px; background: var(--blush);
  font-size: 14px; line-height: 1.8; color: var(--ink-soft); text-align: center;
}
.db-foot strong { color: var(--rose-dark); }

@media (max-width: 700px) {
  /* 좁은 화면에서는 왼쪽 칸을 위로 눕힌다.
     134px 짜리 칸을 그대로 두면 오른쪽 글이 한 줄에 서너 글자밖에 안 들어간다. */
  .daybook::before { display: none; }
  .db-card { grid-template-columns: 1fr; gap: 14px; padding: 18px 16px; }
  .db-when {
    grid-auto-flow: column; justify-content: start; align-items: center;
    gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line);
  }
  .db-art {
    grid-auto-flow: column; align-items: center; justify-items: start;
    width: auto; padding: 6px 12px; gap: 7px; border-radius: 999px;
  }
  .db-art svg { width: 18px; height: 18px; }
}

/* ══════════════════════════════════════════════════════
   교육원 — 과정 카드 · 신규자/경력자 · 국비지원 안내
   (/academy)
   ══════════════════════════════════════════════════════ */
.prog-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.prog-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding-top: 26px; }
.prog-card h3 { margin-bottom: 8px; }
/* 사선 리본 — 샘플의 MOST POPULAR 자리. 색만 우리 로즈로 바꿨다 */
.prog-card.is-featured { border-color: var(--rose-light); box-shadow: var(--shadow-lg); }
.prog-ribbon { position: absolute; top: 18px; right: -44px; transform: rotate(45deg);
               background: var(--rose); color: #fff; font-size: 11.5px; font-weight: 700;
               letter-spacing: .08em; padding: 6px 48px; box-shadow: 0 3px 10px rgba(131,63,78,.25); }
.prog-ico { width: 54px; height: 54px; border-radius: 16px; background: var(--blush);
            color: var(--rose-darker); display: flex; align-items: center; justify-content: center;
            margin-bottom: 16px; }
.prog-lead { font-size: 15px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 4px; }
.prog-card .check-list { margin: 14px 0 18px; }
.prog-card .check-list li { font-size: 14.5px; }
/* 안내 상자는 카드 맨 아래에 붙여 카드 높이가 달라도 줄이 맞는다 */
.prog-note { margin-top: auto; padding: 12px 14px; border-radius: var(--radius-sm);
             background: var(--blush); font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.prog-note b { display: block; color: var(--rose-darker); margin-bottom: 2px; }

.course-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 0; padding: 0; }
.course-tags li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
                  border: 1px solid var(--line); border-radius: 22px; background: #fff;
                  font-size: 14px; color: var(--ink-soft); }
/* 개강 표시도 교육원에서는 로즈 톤으로 — 캐러멜 배지는 이 페이지에서 겉돈다 */
.course-tags .tag.tag-soon { background: var(--rose-dark) !important; color: #fff !important; }

.track-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.track-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.track-card.is-on { border-color: var(--rose-light); box-shadow: var(--shadow); }
.track-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.track-hours { font-size: 14.5px; font-weight: 700; color: var(--rose-darker); white-space: nowrap; }
.track-card h3 { font-size: 19px; margin: 0; }
.track-card dl { margin: 14px 0 0; }
.track-card dt { font-size: 13px; color: var(--ink-muted); }
.track-card dd { margin: 2px 0 12px; font-size: 15px; line-height: 1.6; }
.track-card dd:last-child { margin-bottom: 0; }

.hrd-box { margin-top: 0; padding: 30px 28px; border-radius: var(--radius-lg);
           background: var(--blush); border: 1px solid var(--rose-pale); }
.hrd-box h3 { font-size: 20px; line-height: 1.45; margin: 6px 0 8px; }
.hrd-box > .hrd-body > p { color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.hrd-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.hrd-steps li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.hrd-steps li span { flex: none; width: 26px; height: 26px; border-radius: 50%;
                     background: var(--rose); color: #fff; font-size: 13.5px; font-weight: 700;
                     display: flex; align-items: center; justify-content: center; }
.hrd-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .prog-grid { grid-template-columns: 1fr; }
  .track-grid { grid-template-columns: 1fr; }
}

/* ── 교육원 과정 상세 — 좌우 2단 (샘플의 COURSE 02·03 구성) ── */
.aca-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.aca-split.is-rev { grid-template-columns: .85fr 1.15fr; }
.aca-split.is-rev .aca-split-main { order: 2; }
.aca-split.is-rev .aca-side { order: 1; }
.aca-split h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.4; margin: 8px 0 12px; }
.aca-lead { color: var(--ink-soft); font-size: 16px; line-height: 1.85; }
.aca-num { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.aca-num li { display: flex; gap: 14px; padding: 18px 20px; background: #fff;
              border: 1px solid var(--line); border-radius: var(--radius); }
.aca-num .n { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--blush);
              color: var(--rose-darker); font-size: 14px; font-weight: 700;
              display: flex; align-items: center; justify-content: center; }
.aca-num strong { display: block; font-size: 15.5px; margin-bottom: 4px; }
.aca-num p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.aca-side { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
            padding: 28px 26px; box-shadow: var(--shadow); }
.aca-side h3 { display: flex; align-items: center; gap: 9px; font-size: 18px; margin: 0 0 16px; }
.aca-side h3::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); }
.aca-side-item { padding: 15px 16px; border-radius: var(--radius-sm); background: var(--cream); border: 1px solid var(--line); }
.aca-side-item + .aca-side-item { margin-top: 10px; }
.aca-side-item b { display: block; color: var(--rose-darker); font-size: 14px; margin-bottom: 4px; }
.aca-side-item p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }
.section-white .aca-num li, .section-white .aca-side-item { background: var(--cream); }

@media (max-width: 900px) {
  .aca-split, .aca-split.is-rev { grid-template-columns: 1fr; gap: 26px; }
  .aca-split.is-rev .aca-split-main { order: 1; }
  .aca-split.is-rev .aca-side { order: 2; }
}

/* ══════════════════════════════════════════════════════
   교육원 — 교육일정 게시판 (/academy/schedule)
   공지 목록(.notice-list) 위에 과정·모집상태 꼬리표를 얹는다.
   ══════════════════════════════════════════════════════ */
.class-list .nt-head { gap: 8px; flex-wrap: wrap; }
.cls-course { display: inline-block; padding: 3px 10px; border-radius: 20px;
              background: var(--blush); color: var(--rose-darker); font-size: 12.5px; font-weight: 700; }
.cls-state { display: inline-block; padding: 3px 10px; border-radius: 20px;
             font-size: 12.5px; font-weight: 700; }
.cls-open   { background: #E4F0E8; color: #2F5B41; }
.cls-soon   { background: #EAF0FA; color: #3C5A88; }
.cls-closed { background: #F4EFF1; color: #6E5C64; }
.cls-done   { background: #EEEBEA; color: #6B5E61; }
.class-list .cls-title { display: block; font-size: 17px; margin-top: 6px; }

/* 상세 — 기간·시간·장소·정원 요약 */
.na-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cls-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
             margin: 24px 0 30px; padding: 22px 24px; border-radius: var(--radius);
             background: var(--cream); border: 1px solid var(--line); }
.cls-facts > div { display: flex; flex-direction: column; gap: 4px; }
.cls-facts dt { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.cls-facts dt svg { color: var(--rose); }
.cls-facts dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; }

/* 본문도 상자에 담는다 — 안쪽 여백을 위 상자와 맞춰 좌우 끝이 어긋나지 않게,
   바탕은 흰색으로 두어 페이지 배경(크림)과 구분되게 한다 */
.cls-body { padding: 26px 24px 30px; border-radius: var(--radius);
            background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(120, 80, 80, .04); }
.cls-body > :first-child { margin-top: 0; }
.cls-body > :last-child  { margin-bottom: 0; }
.cls-body h3 { margin: 26px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 17px; }
.cls-body h3:first-child { margin-top: 0; }

@media (max-width: 640px) {
  .cls-facts { grid-template-columns: 1fr; gap: 14px; padding: 18px 18px; }
  .cls-body  { padding: 20px 18px 24px; }
}

/* ── 교육생 신청서 (/academy/apply) ─────────────────────────
   예약 신청서와 달리 한 화면에 담는다 — 항목이 적어 단계를 나눌 이유가 없다. */
.form-row .lbl-opt { display: inline; margin-left: 4px; font-size: 12.5px; font-weight: 600; font-style: normal; color: var(--ink-muted); }
.apply-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 30px; }
.apply-h { display: flex; align-items: center; gap: 8px; margin: 26px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line); font-size: 17px; }
.apply-h svg { color: var(--rose); flex: none; }
.apply-ico { color: var(--rose); vertical-align: -3px; margin-right: 5px; }

/* 머리글 아래 세 걸음 — 한 줄 띠. 머리 영역을 낮추되 셋이 이어진다는 것은 남긴다.
   가운데 화살표가 흐름을 대신하고, 지금 서 있는 걸음만 칠한다. */
.apply-head { padding: 28px 0 24px; }
.apply-head h1 { margin-bottom: 6px; }
.apply-head p { font-size: 15px; }
.apply-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 14px 0 0; padding: 0; }
.apply-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; color: var(--ink-soft); }
.apply-steps li b { font-weight: 700; color: var(--ink); }
.apply-steps li span { font-size: 12px; color: var(--ink-muted); }
.apply-steps li svg { color: var(--line-strong); flex: none; }
.apply-steps li:has(.st-arrow) { padding: 0 2px; background: none; border: 0; }
.apply-steps .is-now { background: var(--rose); border-color: var(--rose); }
.apply-steps .is-now b, .apply-steps .is-now span, .apply-steps .is-now svg { color: #fff; }
.apply-steps .is-now span { opacity: .85; }

@media (max-width: 520px) {
  .apply-steps li { padding: 5px 10px; font-size: 12.5px; }
  .apply-steps li span { display: none; }       /* 좁은 화면에서는 걸음 이름만 */
}

/* 보내고 난 화면 */
.apply-done { text-align: center; padding: 44px 24px; }
.apply-done-mark { display: inline-flex; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%;
  align-items: center; justify-content: center; background: #E8F3EC; color: #2F7A4F; }
.apply-done h2 { margin: 0 0 10px; }
.apply-h:first-of-type { margin-top: 0; }
.apply-choice { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.apply-choice label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; font-size: 15px; }
.apply-checks { display: grid; gap: 8px; margin-top: 10px; padding: 12px 14px; background: var(--cream); border-radius: 10px; }
.apply-checks label { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 400; font-size: 14px; line-height: 1.55; }
.apply-addr { display: flex; gap: 8px; }
.apply-addr input { flex: 1; min-width: 0; }
.apply-addr .btn { flex: 0 0 auto; white-space: nowrap; }
.apply-agree-box { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 10px; font-weight: 400; }
.apply-agree-box span { font-size: 13.5px; line-height: 1.65; color: var(--ink-muted); }
.apply-agree-box b { color: var(--ink); }

@media (max-width: 640px) {
  .apply-form { padding: 20px 16px 24px; }
  .apply-addr { flex-wrap: wrap; }
  .apply-addr .btn { width: 100%; }
}

/* ── 조사지 고르기 (/academy/form) ───────────────────────────
   글자만 늘어놓으면 눌러야 하는 줄인지 알 수 없다.
   한 줄씩 카드로 만들고, 왼쪽에 그림·오른쪽에 화살표를 둬서 누르는 자리임을 보인다. */
.form-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.form-pick > li { margin: 0; }
.form-pick a {
  display: flex; align-items: center; gap: 14px; padding: 18px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.form-pick a:hover { border-color: var(--rose); box-shadow: 0 4px 14px rgba(170, 110, 125, .12); transform: translateY(-1px); }
.form-pick .fp-mark {
  flex: none; display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--blush); color: var(--rose);
}
.form-pick .fp-mark.is-done { background: #E8F3EC; color: #2F7A4F; }
.form-pick .fp-body { flex: 1; min-width: 0; }
.form-pick .fp-body b { display: block; font-size: 16px; margin-bottom: 3px; }
.form-pick .fp-body small { display: block; font-size: 13px; color: var(--ink-muted); line-height: 1.5; }
.form-pick .fp-go { flex: none; color: var(--line-strong); }
.form-pick a:hover .fp-go { color: var(--rose); }

/* 아직 안 쓴 줄에는 「작성하기」 를 붙여 눌러야 할 곳임을 더 분명히 */
.form-pick a:not(.is-done)::after {
  content: '작성하기'; flex: none; padding: 10px 20px; border-radius: 999px;
  background: var(--rose); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap;
}
.form-pick a.is-done::after {
  content: '다시 보기'; flex: none; padding: 10px 20px; border-radius: 999px;
  background: #fff; color: var(--rose); border: 1px solid var(--rose-light, #E8C7CF);
  font-size: 15px; font-weight: 700; white-space: nowrap;
}
.form-pick a:not(.is-done):hover { border-color: #1F63C8; box-shadow: 0 4px 14px rgba(31, 99, 200, .14); }
.form-pick a:not(.is-done) .fp-mark { background: #EAF1FC; color: #1F63C8; }
.form-pick a:not(.is-done):hover .fp-go { color: #1F63C8; }

@media (max-width: 560px) {
  .form-pick a { flex-wrap: wrap; padding: 16px 14px; }
  .form-pick .fp-body { flex: 1 1 60%; }
  .form-pick a::after { margin-left: auto; }
  .form-pick .fp-go { display: none; }
}

/* 적는 화면(교육생 조사지 등)에서는 아래 고정 띠를 감춘다 —
   화면 아래쪽 단추를 가려 작성에 방해가 되고, 적다 말고 상담으로 새 나간다. */
body.no-cta .mobile-cta { display: none !important; }

/* 수강 목적 아래 딸린 두 칸 — 넓은 화면에서는 나란히, 좁으면 아래로 */
.apply-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
@media (max-width: 560px) { .apply-two { grid-template-columns: 1fr; } }

/* 주소 직접 입력 — 검색 창이 막힌 분을 위한 작은 길 */
.rv-addr-manual, .addr-manual {
  display: inline-block; margin-top: 8px; padding: 0; background: none; border: 0;
  font: inherit; font-size: 13px; color: #A34F62; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.rv-addr-manual:hover, .addr-manual:hover { color: #8B3F52; }

/* 설문 — 앞 문항에 딸린 칸 (「불만족 이하 선택 시 사유」)
   원본에서도 번호가 아니라 그 문항 아래 괄호라서, 한 칸 들여 작게 둔다. */
.form-row.sv-sub { margin-top: -8px; margin-bottom: 18px; padding-left: 14px;
  border-left: 2px solid var(--line, #EDE4E6); }
.form-row.sv-sub label { margin-bottom: 5px; font-size: 13px; font-weight: 500; color: #7a6c70; }
.form-row.sv-sub input { font-size: 14.5px; }