/* ============================================================ 예약 전용 주소(/{진료과}/reserve) 같은 예약 조각을 "떠 있는 창"이 아니라 "페이지 본문"처럼 그린다. 카톡 등으로 링크를 받은 사람의 첫 화면이 되기 때문이다. 표식 .reserve-as-page 는 reserve-page.html 의 head 스크립트가 에 붙인다. 진행 단계·예약 버튼은 조각이 이미 갖고 있으므로 새로 만들지 않는다. 여기서 하는 일은 겉껍질을 벗기고 단계 줄에 구분 배경을 주는 것뿐이다. ============================================================ */ .reserve-as-page { --rsv-point: #8C79B3; /* 사이트 공통 포인트색 */ --rsv-ink: #1d1d1f; --rsv-ink-2: #6b6b76; --rsv-ink-3: #9a9aa4; --rsv-line: #e5e5ea; } /* 피부과 레이아웃은 "사이드 + 본문" flex 다. 이 페이지는 본문이 예약 폼 하나뿐이고 폼 안쪽이 % 폭이라 칸이 내용 폭(705px)까지 쪼그라들어 폼이 삐져나온다. 남는 폭을 채우게 해서 1,085px 을 온전히 쓰게 한다. */ .reserve-as-page .main-content { flex: 1 1 auto; min-width: 0; } /* ── 1. 조각 겉껍질을 페이지로 ─────────────────────────── */ .reserve-as-page .reserve-container { position: static; inset: auto; z-index: auto; /* 열기 함수가 인라인 style 로 flex 를 넣으므로 !important 로 되돌린다 */ display: block !important; } /* ⚠ 아래 규칙은 반드시 직계 자식(>)으로 좁힐 것. 조각 안에는 최종확인·중복안내·수정완료 같은 "진짜 모달"이 형제로 들어 있고 그것들도 .dim / .inner 를 쓴다. 후손 전체에 걸면 그 모달들의 어두운 배경과 흰 카드까지 지워져 본문에 뒤섞여 보인다. */ /* 배경 어둡게 + 닫기 X + 제목은 페이지에선 필요 없다(머리말이 대신한다) */ .reserve-as-page .reserve-container > .dim, .reserve-as-page .reserve-container > .inner > .modal-close-btn, .reserve-as-page .reserve-container > .inner > h2 { display: none !important; } /* 창 상자 → 본문 블록. 높이 고정을 풀어 페이지 자체가 스크롤되게 한다 */ .reserve-as-page .reserve-container > .inner { width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: transparent; } /* 창 안에서 따로 스크롤되던 영역들도 페이지 흐름에 맡긴다. ⚠ flex 는 건드리지 말 것 — reserve-right 의 flex:1 을 지우면 오른쪽이 안 늘어나 여백이 생긴다 */ .reserve-as-page .reserve-container > .inner > .reserve-content-wrap, .reserve-as-page .reserve-container > .inner > .reserve-content-wrap > .reserve-right { overflow: visible; } /* JS가 켜져 있으면 예약 화면이 뜨므로 대체 문구는 감춘다 */ .reserve-as-page .rsv-fallback { display: none; } .rsv-fallback { text-align: center; padding: 60px 20px; color: var(--rsv-ink-2); font-size: 16px; } /* ── 2. 머리말 ─────────────────────────────────────────── */ .rsv-hero { padding: 36px 20px 24px; border-bottom: 1px solid var(--rsv-line); } /* 성형·모발·여성 헤더는 position:fixed 라 본문 위에 뜬다 — 머리말이 그 아래로 가린다. (피부과 헤더는 absolute + main-content 의 margin-top 이 있어 이미 비켜 있다.) 헤더 높이가 폭에 따라 달라져서(실측 70~105px) 구간별로 값을 다르게 준다. */ .rsv-under-fixed-header { --rsv-header-h: 85px; /* 1241px 이상 */ } .rsv-under-fixed-header .rsv-hero { padding-top: calc(36px + var(--rsv-header-h)); } @media (max-width: 1240px) { .rsv-under-fixed-header { --rsv-header-h: 105px; /* 헤더 inner 에 위 여백 20px 이 붙는 구간 */ } } @media (max-width: 768px) { .rsv-under-fixed-header { --rsv-header-h: 70px; } .rsv-under-fixed-header .rsv-hero { padding-top: calc(24px + var(--rsv-header-h)); } } .rsv-hero-inner { max-width: 1180px; margin: 0 auto; } .rsv-crumb { font-size: 13px; color: var(--rsv-ink-3); margin-bottom: 8px; } .rsv-crumb a { color: var(--rsv-ink-3); text-decoration: none; } .rsv-crumb a:hover { color: var(--rsv-ink-2); text-decoration: underline; } .rsv-crumb span { margin: 0 6px; } .rsv-hero h1 { font-size: 28px; font-weight: 700; letter-spacing: -.8px; line-height: 1.3; color: var(--rsv-ink); } /* ── 3. 조각이 가진 단계 줄에 구분 배경 ────────────────── */ /* 머리말과 예약 폼 사이를 눈으로 끊어 주는 띠. 색이 아니라 옅은 회색 면으로만 구분한다 */ .reserve-as-page .reserve-container > .inner > .reserve-step { margin: 0 0 20px; padding: 18px 20px; background: #f7f7f9; border-bottom: 1px solid var(--rsv-line); justify-content: center; gap: 36px; } /* ── 4. 본문 ───────────────────────────────────────────── */ .rsv-page { max-width: 1180px; margin: 0 auto; padding: 0 20px 60px; } /* 단계 띠는 본문 좌우 여백을 넘어 화면 폭 전체로 편다 */ .reserve-as-page .reserve-container > .inner > .reserve-step { margin-left: -20px; margin-right: -20px; } /* ── 5. 반응형 ─────────────────────────────────────────── */ @media (max-width: 768px) { .rsv-hero { padding: 24px 16px 18px; } .rsv-hero h1 { font-size: 22px; } .rsv-page { padding: 0 14px 40px; } .reserve-as-page .reserve-container > .inner > .reserve-step { margin-left: -14px; margin-right: -14px; padding: 14px 12px; gap: 14px; } .reserve-as-page .reserve-container > .inner > .reserve-content-wrap { overflow: visible; } }