@charset "utf-8";
/* 마미캠프 산후도우미 — 공통 스타일
   모바일 우선. 기본 CSS 가 모바일이고 min-width 미디어쿼리를 얹는다.
   기준: ../../레퍼런스/00_안내웹앱_적용지식.md
     · 본문 18px 이상, 제목 28px 이상 (운영자가 60대 전후)
     · 대비 4.5:1
     · 터치 타깃 48px 이상
     · 입력 필드 16px 이상 (iOS 확대 방지). maximum-scale 로 막지 않는다
     · border-radius 24px 이하, box-shadow 2종, backdrop-filter 안 씀
     · 보라·인디고 대역(#6366f1~#8b5cf6) 안 씀
*/

/* ── 글꼴 ──────────────────────────────────────────────
   완성형 상용 2,350자 고정 서브셋. 페이지 텍스트 기준으로 자르지 않는다 —
   본문이 DB에서 오므로 고객이 새 글자를 입력하면 두부가 뜬다.
   서브셋에 없는 글자는 브라우저가 글자 단위로 다음 글꼴로 넘긴다.
   그래서 뒤에 시스템 한글 글꼴을 반드시 둔다. */
@font-face {
  font-family: 'Pretendard KR';
  /* /assets/ 밖에 둔다. _headers 의 /assets/* 규칙과 겹치면 Cloudflare 가
     Cache-Control 을 합쳐서 max-age 가 두 번 실린다(2026-08-14 배포에서 확인).
     주소를 / 부터 적는 이유는 이 파일이 /assets/app.css 로 서빙되기 때문이다. */
  src: url('/fonts/pretendard-subset.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2000-206F, U+3000-303F,
                 U+AC00-D7A3, U+3131-318E, U+FF00-FFEF, U+20A9, U+2460-24FF,
                 U+2190-21FF, U+2600-26FF, U+25A0-25FF;
}

/* ── 토큰 ────────────────────────────────────────────── */
:root {
  --ink:        #2b2430;   /* 본문 */
  --ink-sub:    #675d6d;   /* 보조 */
  --line:       #e9e2e8;
  --page:       #fbf8fa;
  --card:       #ffffff;
  --accent:     #c04a68;   /* 예약 블록·주요 버튼 */
  --accent-ink: #8f2f49;
  --accent-bg:  #fdecf0;
  --focus:      #1b6fb8;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 20px;

  /* 그림자 2종만 쓴다 */
  --sh:    0 2px 6px rgba(76, 56, 68, .07);
  --sh-lg: 0 6px 18px rgba(76, 56, 68, .10);

  --wrap: 720px;          /* 페이지 최대 폭 */
  --read: 23em;           /* 본문 줄 길이. 한글 40자 안팎 */
}

/* 카드 색 20종은 assets/ui.css 에 있다.
   관리자 화면에서도 실제 색으로 골라야 해서 공용 파일로 옮겼다. */

/* ── 기본 ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Pretendard KR', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  word-break: keep-all;      /* 한글은 어절 단위로 줄바꿈 */
  overflow-wrap: anywhere;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: inherit; }

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

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.hidden { display: none !important; }

/* ── 업체 배너 ───────────────────────────────────────
   가게 간판. 상호 하나만 크게 둔다.
   메인에만 쓴다. 상세·폼 화면은 뒤로가기와 화면 제목이 있어 배너가 없어도 된다. */
.site-head {
  background: linear-gradient(180deg, #fdeef2 0%, #fbe2ea 100%);
  border-bottom: 1px solid #f4cfda;
  padding: 34px 0 30px;
  text-align: center;
}
.brand-name {
  margin: 0;
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  color: var(--accent-ink);
}

@media (min-width: 640px) {
  .site-head { padding: 44px 0 38px; }
  .brand-name { font-size: 38px; }
}

/* ── 예약 블록 (고정 요소. 관리자가 건드리지 않는다) ── */
.reserve-box {
  margin: 20px 0 26px;
  background: linear-gradient(160deg, #fdeaef 0%, #fbdde6 100%);
  border: 1px solid #f6cfda;
  border-radius: var(--r-lg);
  padding: 22px 20px;
  box-shadow: var(--sh);
}
.reserve-box h2 {
  margin: 0 0 4px;
  font-size: 28px; font-weight: 700; letter-spacing: -.02em;
  color: var(--accent-ink);
}
.reserve-box .lede { margin: 0 0 18px; font-size: 15px; color: #7d4256; }

.reserve-act { display: grid; gap: 10px; }

/* ── 버튼 ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 52px; padding: 12px 22px;
  border: 0; border-radius: 999px;
  font: inherit; font-size: 17px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: filter .15s ease;
}
.btn:hover { filter: brightness(.96); }
.btn:active { filter: brightness(.92); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost {
  background: rgba(255,255,255,.85); color: var(--accent-ink);
  border: 1px solid #f0c3d0;
}
.btn-line {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--sh);
}
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── 카드 그리드 ─────────────────────────────────────── */
/* 카드 높이는 가장 긴 것에 맞춰 전부 같게. grid-auto-rows:1fr 이 그 역할을 한다.
   li 가 격자 칸이고 .card 는 그 안의 자식이라, li 를 flex 로 두고 카드를 늘려야
   칸 높이가 카드에 전달된다. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0; list-style: none;
}
.grid > li { display: flex; }
/* 좁은 화면에서도 2열을 유지한다. 1열이 되면 스크롤이 두 배로 길어진다. */

.card {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 168px;
  padding: 16px 14px 14px;
  background: var(--bg, #f4f1f4);
  border-radius: var(--r);
  box-shadow: var(--sh);
  text-decoration: none;
  color: var(--fg, var(--ink));
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.card .ico { width: 30px; height: 30px; margin-bottom: 8px; }
.card h3 { margin: 0 0 5px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.card p  { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg); opacity: .82; }
.card .go {
  margin-top: auto; padding-top: 12px;
  font-size: 14px; font-weight: 700;
}

/* ── 하단 링크 ───────────────────────────────────────── */
.links-title { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
/* 링크 개수가 4~5개로 바뀔 수 있어 칸 수를 고정하지 않는다. */
.links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin: 0 0 22px; padding: 0; list-style: none;
}
.links a {
  min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px; text-decoration: none; color: var(--ink);
}
.links svg { width: 22px; height: 22px; color: var(--ink-sub); }

.site-foot {
  border-top: 1px solid var(--line);
  /* 아래쪽 여백이 넉넉한 이유 — 떠 있는 카카오톡 버튼이 마지막 줄을 가리면 안 된다. */
  padding: 18px 0 96px;
  font-size: 14px; color: var(--ink-sub); text-align: center;
}
.foot-note { margin: 0; }
.foot-legal { margin: 12px 0 0; }

/* 버튼인데 링크처럼 보여야 하는 것 — 처리방침 열기, 맨 위로 가기 */
.linklike {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 6px 12px;
  font: inherit; font-size: 14px;
  color: var(--ink-sub); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.linklike:hover { color: var(--ink); }

.to-top { margin: 0 0 30px; text-align: center; }

/* ── 상세 ────────────────────────────────────────────── */
.page-head { padding: 18px 0 8px; }
.back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; font-size: 15px; color: var(--ink-sub); text-decoration: none;
}
.page-title {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 18px;
}
.page-title .ico {
  flex: none; width: 46px; height: 46px; padding: 9px;
  background: var(--bg, var(--accent-bg)); color: var(--fg, var(--accent-ink));
  border-radius: 14px;
}
.page-title h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.025em; }

/* article — 글 1개, 제목 없이 본문만 */
.article {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 18px; margin: 0 0 20px;
  box-shadow: var(--sh);
}
.article .body { max-width: var(--read); }

/* accordion — 글 여러 개, 제목만 보이다가 펼쳐진다 */
.acc { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.acc > li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh); overflow: hidden;
}
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px 16px;
  font-size: 17px; font-weight: 700; cursor: pointer;
  list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ''; flex: none;
  width: 10px; height: 10px; margin-right: 4px;
  border-right: 2.5px solid var(--ink-sub);
  border-bottom: 2.5px solid var(--ink-sub);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .18s ease;
}
.acc details[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.acc .body { padding: 0 16px 16px; max-width: var(--read); }

.body { font-size: 18px; line-height: 1.8; }   /* 본문 18px 이상 — 운영자·산모 양쪽 가독성 */
.body p { margin: 0 0 .9em; }
.body p:last-child { margin-bottom: 0; }

/* 본문 안의 주소. 링크인 것이 보여야 누른다 */
.body a {
  color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.body a:hover { color: var(--accent); }

/* 유튜브 — 줄 전체가 주소인 곳에 재생창을 놓는다.
   동영상 파일은 올리지 않는다(무료 용량 한계). 링크로 대신한다 */
.video {
  margin: 0 0 1em;
  aspect-ratio: 16 / 9;
  background: #efeaee;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

.empty {
  margin: 0; padding: 26px 16px;
  text-align: center; color: var(--ink-sub); font-size: 16px;
}

.files { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.files a {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 15px; text-decoration: none;
}
.shot { border-radius: var(--r-sm); border: 1px solid var(--line); }

/* ── 폼 ──────────────────────────────────────────────── */
.bar { display: flex; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.bar li {
  flex: 1; text-align: center;
  font-size: 12px; color: var(--ink-sub);
  padding-top: 10px; border-top: 4px solid var(--line);
}
.bar li[aria-current='step'] { color: var(--accent-ink); font-weight: 700; border-top-color: var(--accent); }
.bar li.done { border-top-color: #eab9c8; }

.step { display: none; }
.step.on { display: block; }

.fieldset {
  border: 0; margin: 0 0 18px; padding: 0;
}
.fieldset > legend {
  padding: 0; margin: 0 0 12px;
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
}

.field { margin: 0 0 16px; }
.field > label, .field > .lb {
  display: block; margin: 0 0 6px;
  font-size: 15px; font-weight: 700;
}
.field .help { display: block; margin: 4px 0 0; font-size: 14px; color: var(--ink-sub); }
.req { color: var(--accent); margin-left: 3px; }

input[type=text], input[type=tel], input[type=date], select, textarea {
  width: 100%;
  min-height: 52px; padding: 12px 14px;
  font: inherit;
  font-size: 16px;             /* 16px 미만이면 iOS 가 포커스 시 확대한다 */
  color: var(--ink); background: var(--card);
  border: 1px solid #ddd3da; border-radius: var(--r-sm);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
input:invalid, select:invalid { box-shadow: none; }   /* 기본 빨간 테두리 억제 */
.field.err input, .field.err select, .field.err textarea { border-color: #c0392b; }
.err-msg { display: none; margin: 6px 0 0; font-size: 14px; color: #b03225; }
.field.err .err-msg { display: block; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 16px;
  border: 1px solid #ddd3da; border-radius: 999px;
  background: var(--card); font-size: 16px; cursor: pointer;
}
.choice input { width: 20px; height: 20px; accent-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }

.checks { display: grid; gap: 8px; }
.check {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 48px; padding: 10px 14px;
  border: 1px solid #ddd3da; border-radius: var(--r-sm);
  background: var(--card); font-size: 16px; cursor: pointer;
}
.check input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.check .nm { font-weight: 600; }
.check .ds { display: block; font-size: 14px; color: var(--ink-sub); }

/* ── 약관동의 ────────────────────────────────────────
   항목마다 접었다 펴고, 그 아래 개별 동의. 맨 끝에 전체 동의.
   표준적인 동의 화면과 같은 순서라 처음 보는 사람도 헤매지 않는다. */
.term { margin: 0 0 12px; }
.term > details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden;
}
.term summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 10px 14px;
  font-size: 16px; font-weight: 700; cursor: pointer; list-style: none;
}
.term summary::-webkit-details-marker { display: none; }
.term summary::after {
  content: ''; flex: none;
  width: 9px; height: 9px; margin-right: 2px;
  border-right: 2.5px solid var(--ink-sub);
  border-bottom: 2.5px solid var(--ink-sub);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .18s ease;
}
.term details[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.term-name { flex: 1; }
.term .tag {
  flex: none; font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent-ink);
}
.term-body {
  max-height: 240px; overflow-y: auto;
  padding: 0 14px 14px;
  font-size: 15px; line-height: 1.7;
}
.term-body p { margin: 0 0 .6em; }
.term > .check { margin-top: 8px; }
.check-all { margin-top: 16px; }

/* 전화번호 형식·글자 수 경고는 칸의 오른쪽 아래에 붙인다 */
.err-msg.right { text-align: right; }

.nav { display: flex; gap: 10px; margin: 22px 0 40px; }
.nav .btn { flex: 1; }

.done-box { text-align: center; padding: 30px 16px 40px; }
.done-box .mark {
  width: 66px; height: 66px; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent-ink);
  border-radius: 50%; font-size: 30px;
}
.done-box h2 { margin: 0 0 8px; font-size: 26px; }
.done-box p  { margin: 0 0 20px; color: var(--ink-sub); font-size: 16px; }

/* 예약 폼 안의 선택 블록 — 「출산 후 정보」.
   예약은 보통 출산 전에 하므로 이 자리는 대개 비어 있다.
   접어 두어 필수 항목이 묻히지 않게 한다. */
.opt-block > summary {
  cursor: pointer; list-style: none;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  min-height: 48px; padding: 4px 0;
}
.opt-block > summary::-webkit-details-marker { display: none; }
.opt-block > summary::after {
  content: '▾'; margin-left: auto; color: var(--ink-sub); transition: transform .15s;
}
.opt-block[open] > summary::after { transform: rotate(180deg); }
.opt-block > summary .nm { font-weight: 700; font-size: 17px; }
.opt-block > summary .ds { font-size: 14px; color: var(--ink-sub); }

.alert {
  margin: 0 0 16px; padding: 14px 16px;
  border-radius: var(--r-sm); font-size: 15px; line-height: 1.6;
}
.alert-err  { background: #fdecea; border: 1px solid #f3c2bb; color: #96291b; }
.alert-info { background: var(--accent-bg); border: 1px solid #f3cbd6; color: var(--accent-ink); }

.mock-flag {
  margin: 0; padding: 8px 16px;
  background: #fff6d9; border-bottom: 1px solid #eddca4;
  font-size: 13px; color: #7a5c10; text-align: center;
}

/* ── 카카오톡 상담 버튼 ───────────────────────────────
   오른쪽 아래에 늘 떠 있다. 색은 카카오 브랜드값이라 눈에 익어 설명이 필요 없다.

   z-index 는 90 — ui.css 의 모달이 100 이다. 처리방침 모달을 열었을 때
   이 버튼이 그 위로 튀어나오면 안 된다.

   위치에 safe-area 를 더한다. 아이폰 홈 인디케이터 위로 겹치면 누르기 어렵다.
   viewport-fit=cover 를 쓰고 있어서 이 값이 실제로 들어온다. */
.kakao-float {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;              /* 터치 영역 48px 이상 */
  border-radius: 50%;
  background: #fee500;                    /* 카카오 브랜드 노랑 */
  color: #3c1e1e;                         /* 같은 브랜드의 진갈색 */
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kakao-float:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.kakao-float:active { transform: translateY(0); }
.kakao-float .ico { width: 28px; height: 28px; }
.kakao-float-txt { font-size: 17px; font-weight: 700; }

@media (min-width: 640px) {
  .kakao-float {
    right: calc(24px + env(safe-area-inset-right));
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

@media print { .kakao-float { display: none; } }

/* ── 404 ─────────────────────────────────────────────
   Pages 가 못 찾은 주소에 404.html 을 내보낸다.
   이 화면은 데이터를 부르지 않으므로 스타일도 여기서 끝난다. */
.notfound { padding: 56px 0 72px; text-align: center; }
.notfound-mark {
  margin: 0 0 6px;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--accent);
  opacity: .28;
}
.notfound h1 { margin: 0 0 12px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.notfound-lede { margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--ink-sub); }

/* ── 넓은 화면 ───────────────────────────────────────── */
@media (min-width: 640px) {
  body { font-size: 18px; }
  .grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
  .card { min-height: 182px; padding: 18px 16px 16px; }
  .reserve-box { padding: 28px 26px; }
  .reserve-box h2 { font-size: 32px; }
  .reserve-act { grid-template-columns: auto auto; justify-content: start; }
  /* 링크 칸 수는 고정하지 않는다. 개수가 4~5개로 바뀐다 (assets/app.css 위쪽 .links 참고) */
  .page-title h1 { font-size: 32px; }
}

@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .card:hover { transform: none; }
}