/* =============================================
   드림맘 산후케어 - Main Stylesheet
   ============================================= */

/* ---------- CSS Variables ---------- */
:root {
  /* 브랜드 핑크 */
  --pink: #b03579;
  --pink-dark: #93245f;
  --pink-light: #e58ab8;
  --pink-pale: #fae5f1;

  /* 글자 */
  --dark: #221c20;        /* 본문 강조·작은 제목 */
  --title: #522b44;       /* 큰 제목 */

  --gray: #4f464c;        /* 본문 */
  --ink-3: #8d8289;       /* 보조·캡션 */

  /* 면 */
  --paper: #ffffff;
  --wash: #faf6f8;
  --border: #ece3e8;
  --border-pink: #f2d9e6;  /* 핑크 계열 요소의 테두리 */

  /* 그림자 2종 */
  --shadow: 0 1px 2px rgba(36,26,30,.04), 0 8px 24px rgba(36,26,30,.06);
  --shadow-hover: 0 12px 32px rgba(36,26,30,.13);

  /* 모서리 2종 + 알약(칩 전용) */
  --r-lg: 14px;
  --r-sm: 8px;
  --r-pill: 50px;
  --radius: 14px;

  --transition: 0.25s ease;

  /* 글꼴 */
  --font: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --font-display: var(--font);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 고정 헤더(70px)에 앵커 이동한 내용이 가려지지 않게 */
html { font-size: 16px; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* 메뉴·문의창이 열려 있는 동안 뒤 페이지 스크롤을 막는다 (스크롤바 자리는 남겨 화면이 옆으로 흔들리지 않게) */
html.scroll-lock { overflow: hidden; scrollbar-gutter: stable; }

body {
  font-family: var(--font);
  color: var(--gray);
  line-height: 1.65;
  letter-spacing: -.005em;
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
address { font-style: normal; }

/* ---------- Mobile table scroll hint ---------- */
.scroll-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--pink);
  margin-bottom: 8px;
}
.scroll-hint .scroll-hint-arrow { display: inline-block; animation: scrollHintSlide 1.3s ease-in-out infinite; }
@keyframes scrollHintSlide { 0%, 100% { transform: translateX(0); opacity: .6; } 50% { transform: translateX(5px); opacity: 1; } }
@media(max-width:640px) { .scroll-hint { display: flex; } }

h1, h2, h3, h4, h5 { letter-spacing: -0.01em; }
/* 줄바꿈 끝에 한두 글자만 남지 않게 */
p { text-wrap: pretty; }
.sec-title, .section-title, .page-hero h1 { text-wrap: balance; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  font-family: var(--font);
}

.btn-primary {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
  box-shadow: 0 4px 14px rgba(176,53,121,.28);
}

.btn-primary:hover {
  background: var(--pink-dark);
  border-color: var(--pink-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(176,53,121,.38);
}

.btn-outline-dark {
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
  padding: 10px 24px;
}

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

/* =============================================
   HEADER
   ============================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(30,16,22,.03), 0 4px 16px rgba(30,16,22,.05);
  transition: var(--transition);
}
.header.is-scrolled { box-shadow: 0 1px 2px rgba(30,16,22,.04), 0 6px 22px rgba(30,16,22,.10); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 70px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo { flex-shrink: 0; }
.logo a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gnb-list {
  display: flex;
  gap: 0;
}

.gnb-list li a {
  display: block;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gray);
  border-radius: 6px;
  transition: var(--transition);
}

.gnb-list li a:hover {
  color: var(--pink);
  background: var(--pink-pale);
}

/* ── 드롭다운 메뉴 ── */
.gnb-list > li {
  position: relative;
}

.gnb-list > li > a {
  white-space: nowrap;
}

/* 마우스를 올리면 살짝 내려오며 나타나고, 떼면 짧게 흐려지며 닫힌다 (흐려지는 사이 다시 올리면 유지) */
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--border-pink);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 8px 0 6px;
  z-index: 1000;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.has-sub { padding-bottom: 4px; }

.sub-menu li a {
  padding: 9px 18px;
  font-size: 0.85rem;
  color: var(--gray);
  border-radius: 0;
  white-space: nowrap;
}

.sub-menu li a:hover {
  color: var(--pink);
  background: var(--pink-pale);
}

.has-sub:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

/* 키보드로 이동할 때도 열린다 (:has를 모르는 브라우저에서 위 규칙까지 무시되지 않게 따로 둔다) */
.has-sub:has(a:focus-visible) .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.header-contact {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-tel {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: var(--pink);
  color: #fff;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  transition: var(--transition);
}

.header-tel:hover {
  background: var(--pink-dark);
  transform: translateY(-1px);
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: var(--transition);
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 999;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 닫혀 있을 땐 탭 이동·화면낭독에서도 빠진다 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.mobile-nav.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.3,1), visibility 0s;
}

.mobile-nav > ul > li {
  border-bottom: 1px solid var(--border);
}

.mobile-nav > ul > li:last-child {
  border-bottom: none;
}

.mobile-nav li a {
  display: block;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--dark);
  transition: var(--transition);
}

@media (hover: hover) {
  .mobile-nav li a:hover {
    color: var(--pink);
    padding-left: 28px;
  }
}

.m-menu-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--dark);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: var(--transition);
}

.m-menu-title i {
  font-size: .78rem;
  color: var(--ink-3);
  transition: transform .25s ease;
}

.m-has-sub.open .m-menu-title { color: var(--pink); }
.m-has-sub.open .m-menu-title i { transform: rotate(180deg); color: var(--pink); }

/* 실제 높이만큼만 펼치고 접는다 (max-height 방식은 접을 때 잠깐 멈칫한다) */
.m-has-sub {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows .28s ease;
}

.m-has-sub.open {
  grid-template-rows: auto 1fr;
}

.m-sub {
  min-height: 0;
  overflow: hidden;
  background: var(--wash);
  visibility: hidden;
  transition: visibility 0s linear .28s;
}

.m-has-sub.open .m-sub {
  visibility: visible;
  transition: visibility 0s;
}

.m-sub li a {
  padding: 12px 20px 12px 36px;
  font-size: .92rem;
  color: var(--gray);
  border-bottom: 1px solid #f0e6ea;
}

.m-sub li:last-child a {
  border-bottom: none;
}

@media (hover: hover) {
  .m-sub li a:hover {
    padding-left: 42px;
  }
}

/* 모바일 메뉴 아래 로그인·회원가입 (헤더 버튼이 숨는 폭에서만) */
.m-auth { display: none; }
@media (max-width: 768px) {
  .m-auth { display: flex; gap: 8px; padding: 18px 20px 8px; }
  .m-auth a { flex: 1; text-align: center; padding: 11px 0; border: 1.5px solid var(--pink); border-radius: 50px; color: var(--pink); font-size: .92rem; font-weight: 600; }
  .m-auth a.m-auth-fill { background: var(--pink); color: #fff; }
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: #383838;
  color: rgba(255,255,255,0.75);
}

.footer-top {
  padding: 60px 0 44px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}

.footer-logo-img {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* SNS 아이콘은 로고 오른쪽에 나란히 */
.footer-logo { gap: 14px; }
.footer-sns {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  transition: var(--transition);
}

.footer-sns:hover {
  background: var(--pink);
  color: #fff;
}

.footer-address {
  font-size: 0.83rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.62);
}

.footer-address-block {
  display: block;
  margin-top: 14px;
  color: rgba(255,255,255,0.5);
}

.footer-address-block .fkey { color: rgba(255,255,255,0.34); margin-right: 3px; }
.footer-address-block .fsep { color: rgba(255,255,255,0.22); margin: 0 2px; }
.footer-address-block .fnote { color: rgba(255,255,255,0.34); }

.footer-links h4,
.footer-call h4 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  margin-bottom: 20px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.flink-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 18px;
  font-size: 0.85rem;
}
.flink-list a { color: rgba(255,255,255,0.62); transition: color .2s; }
.flink-list a:hover { color: #fff; }

.fcall-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.fcall-time { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.7; margin-top: 7px; }
.fcall-time .fnote { color: rgba(255,255,255,0.34); }
.fcall-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--r-pill);
  font-size: 0.83rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  transition: all .2s;
}
.fcall-btn:hover { background: #fff; color: #383838; border-color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 26px 0;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.copyright {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}

/* =============================================
   FLOATING CONTACT
   ============================================= */
.floating-contact {
  position: fixed;
  right: 24px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 500;
  /* 숨어 있는 '맨 위로' 자리가 뒤 내용의 클릭을 막지 않게 */
  pointer-events: none;
}
.float-btn { pointer-events: auto; }

.float-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  transition: var(--transition);
  color: #fff;
  box-sizing: border-box;
}

.float-tel { background: var(--pink); }
.float-kakao { background: #FEE500; color: #3C1E1E; }
.float-naver { background: #03C75A; color: #fff; }
.float-top { background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: translateY(8px); }
.float-top.visible { opacity: 1; visibility: visible; transform: none; }

/* 터치 기기에선 누른 뒤 떠오른 채로 남지 않게 마우스일 때만 */
@media (hover: hover) {
  .float-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  }
}

/* =============================================
   FAQ (inner pages)
   ============================================= */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
}

.faq-arrow {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--gray);
  transition: transform 0.3s ease;
}

.faq-item.open .faq-arrow { transform: rotate(180deg); }

/* =============================================
   RESPONSIVE
   ============================================= */
/* 중간 폭: 메뉴 간격을 좁힌다 */
@media (max-width: 1280px) {
  .header-inner { gap: 14px; }
  .gnb-list li a { padding: 8px 9px; font-size: 0.84rem; }
  .header-tel { padding: 8px 14px; }
}

/* 태블릿 이하: 햄버거 메뉴 */
@media (max-width: 1080px) {
  .gnb { display: none; }
  .mobile-menu-btn { display: flex; }
  .mobile-nav { display: block; }
}

@media (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .gnb { display: none; }
  .mobile-menu-btn { display: flex; }
  .mobile-nav { display: block; }

  .header-tel { display: none; }

  .btn { padding: 12px 24px; font-size: 0.9rem; }

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

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fcall-num { font-size: 1.35rem; }

  .floating-contact { right: 12px; bottom: 16px; gap: 8px; }
  .float-btn { width: 42px; height: 42px; font-size: .95rem; }

  /* 전화·온라인 문의 버튼은 세로 전체폭으로 */
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }
}

/* ===== 타이포 ===== */
.hero-title,
.sec-title,
.page-hero h1,
.cta-box h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--title);
}

/* ===== 서브페이지 상단 ===== */
/* 띠도 구분선도 없다. 흰 바탕 위에서 여백만으로 본문과 나눈다 */
.page-hero {
  background: var(--paper);
  /* 고정 헤더(70px) 높이만큼 위 여백 포함 */
  padding: 132px 0 48px;
}
/* 제목 위 분류 이름 한 줄 */
.page-eyebrow {
  display: inline-block;
  font-size: .84rem;
  font-weight: 800;
  color: var(--pink);
  letter-spacing: .03em;
  margin-bottom: 13px;
  text-decoration: none;
}
a.page-eyebrow:hover { color: var(--pink-dark); text-decoration: underline; text-underline-offset: 3px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--title);
  letter-spacing: -.04em;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}
.page-hero p { margin: 14px 0 0; font-size: 1rem; color: var(--gray); max-width: 62ch; }
/* 상단이 이미 아래 여백을 갖고 있으니 바로 뒤 본문은 위 여백을 비운다 */
.page-hero + .inner-section { padding-top: 0; }
@media(max-width:768px){
  .page-hero { padding: 104px 0 30px; }
  .page-eyebrow { font-size: .78rem; margin-bottom: 9px; }
  .page-hero h1 { font-size: 1.85rem; }
  .page-hero p { margin-top: 10px; font-size: .92rem; }
}

/* ===== 공통 CTA 박스 ===== */
.cta-box { background: var(--wash); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 48px; text-align: center; margin-top: 20px; }
.cta-box h3 { font-size: 1.5rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
.cta-box p { color: var(--gray); margin-bottom: 24px; }
.cta-box .cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-box .btn-outline-dark { background: #fff; color: var(--pink); border: 1.5px solid var(--border-pink); padding: 12px 28px; border-radius: var(--r-pill); text-decoration: none; font-weight: 700; transition: all .3s; }
.cta-box .btn-outline-dark:hover { background: var(--pink); color: #fff; border-color: var(--pink); }


/* ===== 스크롤 리빌 =====
   첫 화면 아래에 있는 요소에만 JS가 fx를 붙이므로 JS가 없거나 첫 화면에 보이는 내용은 그대로 보인다.
   카드마다 걸린 transition이 달라 떠오르는 동안만 !important로 통일하고, 다 떠오르면 JS가 클래스를 떼어 원래 hover 효과로 돌아간다 */
@media (prefers-reduced-motion: no-preference) {
  .fx:not(.fx-in) { opacity: 0; transform: translateY(20px); transition: none !important; }
  .fx.fx-in { transition: opacity .6s ease var(--fx-delay, 0s), transform .75s cubic-bezier(.2,.7,.3,1) var(--fx-delay, 0s) !important; }
}
@media print { .fx { opacity: 1 !important; transform: none !important; } }

/* 탭을 바꾸면 새 내용이 살짝 떠오르며 나타난다 */
@media (prefers-reduced-motion: no-preference) {
  .tab-in { animation: tabIn .35s ease both; }
}
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 페이지 전환 효과(@view-transition)는 쓰지 않는다: 이전 화면을 새 화면 위에 겹쳐 흐리게 지우므로
   실제 서버에서는 메뉴를 옮길 때 이전 화면이 남았다가 사라지는 것처럼 보였다.
   흰 화면 깜빡임은 브라우저가 새 화면이 그려질 때까지 이전 화면을 붙잡아 두어 원래 생기지 않는다 */

@media (prefers-reduced-motion: reduce) {
  .scroll-hint .scroll-hint-arrow { animation: none; }
}

/* ===== PC에서 전화번호를 눌렀을 때 뜨는 번호 안내 ===== */
.tel-pop { position: fixed; z-index: 3000; width: 264px; background: #fff; border: 1px solid var(--border-pink); border-radius: 14px; box-shadow: 0 16px 40px rgba(30,16,22,.18); padding: 18px 18px 14px; text-align: center; opacity: 0; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease; }
.tel-pop.above { transform: translateY(4px); }
.tel-pop.in { opacity: 1; transform: none; }
.tel-pop:focus { outline: none; }
.tel-pop-label { font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.tel-pop-num { font-size: 1.55rem; font-weight: 800; color: var(--title); letter-spacing: -.01em; line-height: 1.35; user-select: all; }
.tel-pop-time { font-size: .78rem; color: var(--ink-3); margin-top: 2px; }
.tel-pop-acts { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 14px; }
.tel-pop-copy { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 10px; border: none; border-radius: 50px; background: var(--pink); color: #fff; font-family: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: background .2s; }
.tel-pop-copy:hover { background: var(--pink-dark); }
.tel-pop-copy.done { background: #2e8b57; }
.tel-pop-call { font-size: .8rem; color: var(--ink-3); padding: 4px 8px; }
.tel-pop-call:hover { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }