:root{
  --cream:#F5F1E8; --cream-deep:#EFE9DC; --ink:#2B2722; --sub:#6E685C;
  --sage:#5B6F5C; --sage-text:#4A5B4B; --beige:#DDD3C0; --gold:#B89B6E;
  --line:rgba(43,39,34,.12);
  --serif:"Noto Serif KR",serif; --sans:"Pretendard","Noto Sans KR",-apple-system,"Segoe UI",sans-serif; --en:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* 한글은 어절 단위로만 줄을 바꾼다 ("보겠습니 / 다", "24 / 개월" 같은 사고 방지 — 2026-09-07 검수). 끝줄 한 단어 고아는 pretty 로 줄인다 */
h1,h2,h3,p,li,.visit .side{word-break:keep-all;overflow-wrap:break-word}
.nb{white-space:nowrap}   /* 가운뎃점으로 이은 목록("어지럼·메스꺼움·배뭉침·출혈")은 keep-all 이어도 점 앞에서 갈라진다 — 한 덩어리로 */
.screen p,.act p,.visit p,.sel-lead,.sel-rb,.fact .fn,.foot p{text-wrap:pretty}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;
  background:linear-gradient(to bottom,rgba(245,241,232,.95) 0%,rgba(245,241,232,.88) 60%,rgba(245,241,232,0) 100%);pointer-events:none}
.top a{pointer-events:auto}
.mark{font-family:var(--en);font-size:26px;font-weight:500;letter-spacing:.12em;color:var(--sage-text);line-height:1}
.mark span{display:block;font-size:10px;letter-spacing:.34em;color:var(--gold);margin-top:4px;text-transform:lowercase}
.menu{display:flex;gap:26px;font-size:13.5px;letter-spacing:.06em;color:var(--sub)}
.menu a:hover{color:var(--sage-text)}
.menu .cta{color:var(--sage-text);border:1px solid var(--sage);padding:5px 14px;border-radius:2px}
/* 대상 전환(산모 ↔ 병원). 휴대폰에서도 항상 보인다 */
.top .right{display:flex;align-items:center;gap:22px;pointer-events:auto}
.switch{font-size:12.5px;letter-spacing:.08em;color:var(--sage-text);border:1px solid rgba(91,111,92,.5);padding:6px 13px;border-radius:999px;background:rgba(245,241,232,.9);white-space:nowrap}
.switch:hover{background:var(--sage);color:var(--cream)}
@media (max-width:760px){.menu{display:none}.top{padding:14px 20px}.switch{font-size:12px;padding:5px 11px}}

/* screens */
.screen{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;background:var(--cream)}
.screen .media{position:absolute;inset:0}
.screen .media img,.screen .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
/* 영상은 실제로 프레임이 흐르기 시작한 뒤(live)에만 보인다. 그 전에는 그림/사진만 보인다.
   안드로이드 웹뷰는 아직 프레임이 없는 video 를 회색 상자+재생 버튼으로 그리기 때문 (2026-09-03 갤럭시 실측). */
.screen .media video{opacity:0;transition:opacity .5s ease;pointer-events:none}
.screen.live .media video,.screen.done .media video{opacity:1}
.screen .veil{position:absolute;inset:0;background:linear-gradient(to right,rgba(245,241,232,.94) 0%,rgba(245,241,232,.82) 30%,rgba(245,241,232,0) 55%)}
.screen .text{position:relative;z-index:2;align-self:center;padding:120px 32px 96px;max-width:min(46ch,52vw)}
.screen .eyebrow{font-size:12px;letter-spacing:.24em;color:var(--gold);margin:0 0 14px}
/* 영문 라벨: 세리프 대문자 자간 넓게, 한글은 그 뒤에 작게 */
.eyebrow .en,.k .en,.fk .en,.sel-k .en{font-family:var(--en);font-size:13px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.eyebrow .ko,.fk .ko,.sel-k .ko{font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.16em;color:var(--sub);opacity:.85;margin-left:12px}
/* 라벨은 본문용 최대 폭(34ch)에 걸리면 PC 에서 두 줄로 꺾인다 — 라벨 줄은 폭 제한을 푼다 (2026-09-06 검수) */
.screen .eyebrow,.act .k,.visit .eyebrow{max-width:none;white-space:nowrap}
.screen.cover .eyebrow .en{color:var(--sage-text)}
.act .k .en{display:block;margin-bottom:8px}
/* 顧·多·仁 한 글자 — 이름의 뜻을 케어 화면마다 보인다 */
.eyebrow .hj{font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:0;color:var(--sage-text);margin-right:7px;vertical-align:-1px}
.act .k b{font-weight:400;color:var(--sub)}
/* 화면 번호가 사진 위에서 묻히지 않게 */
.screen .num{text-shadow:0 0 8px rgba(245,241,232,.95),0 0 2px rgba(245,241,232,.9)}
/* PC 에서는 오른쪽 아래 음악 단추가 번호를 가린다 — 왼쪽 아래(글 기둥 밑)로 */
@media (min-width:761px){.screen .num{right:auto;left:32px}}
.fact .fk .ko{margin-left:8px;font-size:11px}
.visit .eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:.24em;color:var(--gold)}
.screen h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,40px);line-height:1.35;margin:0 0 18px;text-wrap:balance;word-break:keep-all;overflow-wrap:break-word;color:var(--ink)}
.screen p,.group p,.visit p{word-break:keep-all;overflow-wrap:break-word}
.screen h2.hanja{font-size:clamp(40px,6vw,64px);letter-spacing:.2em}
.screen p{margin:0;font-size:17px;line-height:1.9;color:var(--ink);max-width:34ch}
.screen .num{position:absolute;right:28px;bottom:22px;z-index:2;font-family:var(--en);font-size:13px;letter-spacing:.16em;color:var(--sub);opacity:.75}

/* 자동재생이 막힌 기기: 사진을 보여주고 탭 안내 */
.screen.noplay .media video{opacity:0}
.screen.noplay .media::after{content:"탭하면 영상이 재생됩니다";position:absolute;right:14px;bottom:14px;z-index:3;font-size:12px;letter-spacing:.06em;color:var(--cream);background:rgba(43,39,34,.55);padding:6px 10px;border-radius:2px;pointer-events:none}

/* section cover screens get a stronger left panel */
.screen.cover .veil{background:linear-gradient(to right,rgba(245,241,232,.97) 0%,rgba(245,241,232,.9) 34%,rgba(245,241,232,0) 60%)}
.screen.cover .eyebrow{color:var(--sage-text)}

/* hero */
.screen.hero .veil{background:linear-gradient(to right,rgba(245,241,232,.9) 0%,rgba(245,241,232,.72) 28%,rgba(245,241,232,0) 52%)}
.screen.hero .text{padding-top:150px}
.screen.hero .mark-big{font-family:var(--en);font-size:clamp(56px,9vw,96px);font-weight:500;letter-spacing:.1em;color:var(--sage-text);line-height:1;margin:0 0 6px}
.screen.hero .sub-en{font-family:var(--en);font-size:15px;letter-spacing:.4em;color:var(--gold);margin:0 0 30px;text-transform:lowercase}

/* mobile: text above media */
@media (max-width:760px){
  .screen{grid-template-rows:auto 1fr;min-height:auto}
  .screen .media{position:relative;height:62vh;order:2}
  .screen .media img,.screen .media video{object-position:78% center}
  .screen .veil{display:none}
  .screen .text{order:1;padding:96px 22px 22px;max-width:none}
  .screen p{max-width:none;font-size:16px}
  .screen .num{bottom:auto;top:12px;right:16px;color:var(--sub)}
  .screen.hero .text{padding-top:110px}
}

/* act — 이유 하나를 여는 간지. 영상 없음. 고민 한 줄 + 답 한 줄.
   v2(9/3)부터 그림도 두지 않는다(.noimg) — 두 페이지가 같은 그림·영상을 나눠 쓰지 않기 위해. bg 를 주면 그림이 붙는 구조는 남겨 둠. */
/* scroll-margin-top 은 고정 상단바 실측 높이(68~76px)보다 커야 착지가 상단바 밑에 온다 (2026-09-07 실측) */
.act{position:relative;min-height:58vh;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;background:var(--cream-deep);border-top:1px solid var(--line);scroll-margin-top:84px}
.visit{scroll-margin-top:84px}
.act .media{position:absolute;inset:0}
.act .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block;opacity:.92}
.act .veil{position:absolute;inset:0;background:linear-gradient(to right,rgba(239,233,220,.97) 0%,rgba(239,233,220,.9) 40%,rgba(239,233,220,.15) 70%)}
.act .text{position:relative;z-index:2;align-self:center;padding:88px 32px;max-width:min(50ch,56vw)}
.act .k{font-family:var(--en);font-size:13px;letter-spacing:.3em;color:var(--gold);margin:0 0 16px}
.act .k b{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.22em;color:var(--sage-text)}
/* 그림 없는 간지: 두 페이지가 같은 그림을 나눠 쓰지 않도록 글만 둔다 */
.act.noimg{min-height:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* 간지 글은 안내 카드·마무리 블록과 같은 왼쪽 선(960 컨테이너)에 맞춘다 — 스크롤 중 왼쪽 정렬선이 튀지 않게 */
.act.noimg .text{width:100%;max-width:1024px;margin:0 auto;padding:96px 32px}
@media (max-width:760px){.act.noimg .text{padding:64px 22px 56px}}
.act h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.45;margin:0 0 16px;color:var(--ink);word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}
.act p{margin:0;font-size:16.5px;line-height:1.9;color:var(--sub);max-width:36ch;word-break:keep-all;overflow-wrap:break-word}
@media (max-width:760px){
  .act{grid-template-rows:auto 1fr;min-height:auto}
  .act .media{position:relative;height:38vh;order:2}
  .act .media img{object-position:78% center}
  .act .veil{display:none}
  .act .text{order:1;padding:64px 22px 20px;max-width:none}
}

/* pending */
.pending{padding:26px 32px 80px}
.pending-in{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.pending .slot{border:1px dashed rgba(91,111,92,.45);border-radius:2px;padding:14px 14px 12px;color:var(--sub);font-size:13px;line-height:1.5;background:var(--cream-deep)}
.pending .slot b{display:block;font-family:var(--en);letter-spacing:.14em;color:var(--sage-text);font-weight:600;margin-bottom:4px}
.pending .note{grid-column:1/-1;font-size:13px;color:var(--sub);margin:4px 0 0}

/* facts — 히어로 바로 뒤의 짧은 안내 카드 (시간·시기·위치·예약) */
.facts{padding:34px 32px;background:var(--cream-deep);border-bottom:1px solid var(--line)}
.facts-in{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.fact{background:var(--cream-deep);padding:16px 18px}
.fact .fk{margin:0 0 8px;font-size:11px;letter-spacing:.22em;color:var(--gold)}
.fact .fv{margin:0 0 4px;font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);word-break:keep-all}
.fact .fn{margin:0;font-size:13.5px;line-height:1.6;color:var(--sub);word-break:keep-all}
@media (max-width:760px){
  .facts{padding:22px 16px}
  .facts-in{grid-template-columns:1fr 1fr}
  .fact{padding:13px 14px}
  .fact .fv{font-size:17px}
  .fact .fn{font-size:13px}
}

/* 배경 음악 단추 — 오른쪽 아래. 재생 중이면 막대 세 개가 움직인다 */
.music{position:fixed;right:18px;bottom:18px;z-index:31;display:flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:999px;border:1px solid rgba(91,111,92,.45);background:rgba(245,241,232,.92);
  color:var(--sage-text);font-family:var(--en);font-size:12px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer}
.music[hidden]{display:none}
.music-ic{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.music-ic i{display:block;width:2px;height:4px;background:var(--sage);opacity:.55;border-radius:1px}
.music.on .music-ic i{opacity:1;animation:eq 1.1s ease-in-out infinite}
.music.on .music-ic i:nth-child(2){animation-delay:.2s}
.music.on .music-ic i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}
@media (max-width:760px){
  .music{right:14px;bottom:calc(74px + env(safe-area-inset-bottom));padding:8px 12px;gap:7px}
  .music-t{font-size:10px;letter-spacing:.2em}   /* 글자 없는 막대 셋은 뭔지 모른다 (2026-09-07 검수) */
}

/* 휴대폰에서 아래에 붙어 따라오는 예약 단추 */
.sticky{display:none}
@media (max-width:760px){
  .sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(245,241,232,.98) 60%,rgba(245,241,232,0))}
  .sticky a{display:block;text-align:center;padding:14px;border-radius:2px;background:var(--sage);color:var(--cream);
    font-size:15px;letter-spacing:.08em}
  .foot{padding-bottom:120px}   /* 고정 단추가 마지막 글을 가리지 않게 */
}

/* sel — 예약 전 선택 절차. 검사지처럼 보이지 않게 선을 줄이고 여백을 넓게 둔다 */
.sel{padding:96px 32px 80px;border-top:1px solid var(--line);background:var(--cream);scroll-margin-top:64px}
.sel-in{max-width:960px;margin:0 auto}
.sel-k{margin:0 0 12px;font-size:12px;letter-spacing:.24em;color:var(--gold)}
.sel h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,32px);margin:0 0 12px;color:var(--ink)}
.sel-lead{margin:0 0 40px;font-size:16px;line-height:1.9;color:var(--sub);max-width:38ch;word-break:keep-all}
.sel-step{margin-bottom:30px}
.sel-q{margin:0 0 12px;font-size:14.5px;letter-spacing:.02em;color:var(--sage-text)}
.sel-n{display:inline-block;margin-right:10px;font-family:var(--en);font-size:12px;letter-spacing:.1em;color:var(--gold)}
.sel-opts{display:flex;flex-wrap:wrap;gap:8px}
.sel-opt{appearance:none;cursor:pointer;text-align:left;font-family:inherit;
  border:1px solid var(--line);background:var(--cream-deep);color:var(--ink);
  border-radius:2px;padding:11px 15px;line-height:1.4;transition:background .2s,border-color .2s,color .2s}
.sel-opt b{display:block;font-weight:500;font-size:15px}
.sel-opt span{display:block;margin-top:3px;font-size:12px;color:var(--sub)}
.sel-opt:hover{border-color:var(--sage)}
.sel-opt.on{background:var(--sage);border-color:var(--sage);color:var(--cream)}
.sel-opt.on span{color:rgba(245,241,232,.8)}
.sel-out{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);display:none}
.sel-out.on{display:block}
.sel-rt{margin:0 0 8px;font-size:12px;letter-spacing:.22em;color:var(--gold)}
.sel-sum{margin:0 0 14px;font-family:var(--serif);font-size:19px;color:var(--ink);line-height:1.6;word-break:keep-all}
.sel-rb{margin:0;font-size:15px;line-height:1.9;color:var(--sub);max-width:40ch;word-break:keep-all}
.sel-out .btn{display:inline-block;margin-top:18px;padding:13px 26px;border-radius:2px;background:var(--sage);color:var(--cream);letter-spacing:.08em;font-size:14.5px}
@media (max-width:760px){
  .sel{padding:64px 20px 56px}
  .sel-lead{margin-bottom:30px}
  .sel-opts{gap:7px}
  .sel-opt{padding:10px 13px}
  .sel-opt b{font-size:14.5px}
}

/* visit */
.visit{padding:110px 32px;border-top:1px solid var(--line);background:var(--cream-deep)}
.visit-in{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.visit h3{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,36px);margin:0 0 14px;text-wrap:balance}
.visit p{margin:0 0 10px;color:var(--ink);max-width:40ch}
.visit .first{color:var(--sage-text)}
.visit .btn{display:inline-block;margin-top:18px;padding:13px 26px;border-radius:2px;background:var(--sage);color:var(--cream);letter-spacing:.08em;font-size:14.5px}
/* 연락처가 정해지기 전까지 단추 밑에 두는 한 줄 */
.visit .pend{margin:10px 0 0;font-size:12.5px;color:var(--sub)}
.visit .side{font-size:14px;color:var(--sub);line-height:1.9;border-left:1px solid var(--line);padding-left:28px}
.visit .cross{margin-top:22px;font-size:13.5px}
.visit .cross a{color:var(--sub);border-bottom:1px solid var(--line)}
.visit .cross a:hover{color:var(--sage-text)}
.foot .fine a{border-bottom:1px solid rgba(245,241,232,.4)}
@media (max-width:760px){.visit-in{grid-template-columns:1fr}.visit .side{border-left:none;padding-left:0}}

/* footer */
.foot{padding:56px 32px 70px;background:var(--sage);color:var(--cream)}
.foot-in{max-width:960px;margin:0 auto;font-size:14px;line-height:1.9}
.foot-mark{font-family:var(--en);font-size:24px;letter-spacing:.14em;margin:0 0 10px}
.foot-mark span{font-family:var(--serif);font-size:15px;letter-spacing:.3em;margin-left:14px;opacity:.85}
.foot p{margin:0 0 6px}
.foot .fine{opacity:.72;font-size:12.5px;margin-top:16px}

/* 동작 줄이기 설정: 영상을 숨기지 않는다(영상이 곧 내용). 자동재생만 끄고 탭하면 재생 — app.js 에서 처리 */