/* 마디푸시 프라이빗 아일랜드 몰디브 상세페이지 오가아트 리조트 상세페이지(oaga-detail) 레이아웃/구조를 기반으로 제작 ? class prefix: madifushi- 변경 사항: 클래스/ID prefix, 포인트 컬러(네이비 #16233f · 에메랄드 블루 #2680c2/#1f74ab · 코럴 #d98a5e/#c9835a), 콘텐츠 전체 CSS: /events/madifushi/css/madifushi-detail.css ※ 폰트 사이즈 위계 정리(가독성 개선) 적용본 - 본문/설명문 계열을 16px(밀도 높은 리스트) / 18px(문단·인트로)로 통일 - 카드/아이템 타이틀 계열을 20px(패널 내 소제목) / 22px(카드 타이틀) / 28px(단일 카드형 아이템명)로 통일 - 각주/캡션 계열을 16px로 통일 - 예약 필독사항 중 중요 유의사항(panel-list)이 지나치게 작았던 부분을 18px로 상향 - Dining & Bar 레스토랑명(dining__name)이 섹션 타이틀(40px)과 지나치게 가까웠던 문제를 28px로 조정(rate__name과 동일 위계) */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap'); @font-face { font-family: 'Cafe24ClassicType'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Cafe24ClassicType-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } #madifushi-detail, #madifushi-detail * { box-sizing: border-box; line-height: normal; letter-spacing: normal; } #madifushi-detail img { display: block; max-width: 100%; } #madifushi-detail { width: 100%; overflow-x: hidden; } #madifushi-detail .madifushi-rate__photo { width: 447px !important; height: auto !important; flex-shrink: 0 !important; align-self: stretch !important; } #madifushi-detail .madifushi-rate__photo img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; display: block !important; } #madifushi-detail .madifushi-rate__seasons { flex: 1 1 0 !important; min-width: 0 !important; } /* ===================== Section 01. Hero ===================== */ #madifushi-detail .madifushi-hero__bg[data-madifushi-modal-open] { cursor: pointer; } #madifushi-detail .madifushi-hero { position: relative; width: 1920px; max-width: 100%; height: 880px; margin: 0 auto; overflow: hidden; } #madifushi-detail .madifushi-hero__bg { position: absolute; inset: 0; } #madifushi-detail .madifushi-hero__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ===================== Section 02. 예약 시 필독사항 ===================== */ #madifushi-detail .madifushi-notice { position: relative; padding: 140px 0 120px; background-color: #f4f8fb; overflow: hidden; } .madifushi-notice { position: relative; } .madifushi-notice__bg { position: absolute; inset: 0; z-index: 0; } .madifushi-notice__bg-texture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .madifushi-notice__bg-tint { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.8); z-index: 1; } .madifushi-notice__container { position: relative; z-index: 2; } #madifushi-detail .madifushi-notice__container { position: relative; width: 1240px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 55px; } #madifushi-detail .madifushi-notice__head { display: flex; flex-direction: column; gap: 12px; } #madifushi-detail .madifushi-notice__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; } #madifushi-detail .madifushi-notice__eyebrow-rule { display: block; width: 34px; height: 1px; background-color: #2680c2; flex-shrink: 0; } #madifushi-detail .madifushi-notice__eyebrow-text { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 5.12px; text-transform: uppercase; color: #2680c2; white-space: nowrap; } #madifushi-detail .madifushi-notice__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 40px; line-height: 50px; color: #16233f; } #madifushi-detail .madifushi-notice__body { display: flex; flex-direction: column; gap: 24px; width: 100%; } #madifushi-detail .madifushi-notice__cards { display: flex; align-items: stretch; gap: 24px; width: 100%; } #madifushi-detail .madifushi-notice__card { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 24px 32px; border-radius: 4px; background-color: #fff; border: 1px solid rgba(38, 128, 194, 0.25); box-shadow: 0 2px 12px rgba(22, 35, 63, 0.06); } #madifushi-detail .madifushi-notice__card-head { display: flex; align-items: center; gap: 9px; } #madifushi-detail .madifushi-notice__icon { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; } #madifushi-detail .madifushi-notice__card-title { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 20px; line-height: normal; letter-spacing: -0.4px; color: #08222f; } #madifushi-detail .madifushi-notice__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; } #madifushi-detail .madifushi-notice__list li { position: relative; padding-left: 27px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.4; color: rgba(18, 41, 59, 0.9); } #madifushi-detail .madifushi-notice__list li::before { content: ''; position: absolute; left: 9px; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background-color: currentColor; } #madifushi-detail .madifushi-notice__panel { width: 100%; padding: 40px 32px 64px; border-radius: 4px; background-color: #fff; box-shadow: 0 2px 12px rgba(22, 35, 63, 0.06); display: flex; flex-direction: column; gap: 40px; } #madifushi-detail .madifushi-notice__group { display: flex; flex-direction: column; gap: 18px; } #madifushi-detail .madifushi-notice__group-title { margin: 0 0 6px; padding-left: 6px; font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 18px; line-height: normal; letter-spacing: -0.38px; color: #2680c2; } #madifushi-detail .madifushi-notice__group-sub { margin: 0; padding-left: 6px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; color: #16233f; opacity: 0.9; } #madifushi-detail .madifushi-notice__panel-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; } #madifushi-detail .madifushi-notice__panel-list li { position: relative; padding-left: 25.5px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.4; color: rgba(18, 41, 59, 0.9); } #madifushi-detail .madifushi-notice__panel-list li::before { content: ''; position: absolute; left: 8px; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background-color: currentColor; } #madifushi-detail .madifushi-notice__panel-list-item--strong { color: #16233f; } #madifushi-detail .madifushi-notice__panel-list--ordered { counter-reset: madifushi-notice-count; } #madifushi-detail .madifushi-notice__panel-list--ordered li { counter-increment: madifushi-notice-count; padding-left: 0; margin-bottom: 2px; } #madifushi-detail .madifushi-notice__panel-list--ordered li::before { content: counter(madifushi-notice-count) '.'; position: static; width: auto; height: auto; border-radius: 0; background-color: transparent; margin-right: 10px; font-weight: 400; } #madifushi-detail .madifushi-notice__panel-list--ordered li:last-child { margin-bottom: 0; } .madifushi-notice .madifushi-notice__group ol li{margin-left:-20px;} /* ===================== Section 03. Rate Guide ===================== */ #madifushi-detail .madifushi-rate { padding: 140px 0; background-color: #f1f7fb; } #madifushi-detail .madifushi-rate__container { width: 1240px; max-width: 100%; margin: 0 auto; } #madifushi-detail .madifushi-rate__head { display: flex; flex-direction: column; gap: 20px; width: 600px; max-width: 100%; padding-top: 5px; } #madifushi-detail .madifushi-rate__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; } #madifushi-detail .madifushi-rate__eyebrow-rule { display: block; width: 34px; height: 1px; background-color: #2680c2; flex-shrink: 0; } #madifushi-detail .madifushi-rate__eyebrow-text { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 5.12px; text-transform: uppercase; color: #2680c2; white-space: nowrap; } #madifushi-detail .madifushi-rate__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 40px; line-height: 50px; color: #16233f; } #madifushi-detail .madifushi-rate__card { width: 100%; padding-top: 40px; padding-bottom: 56px; border-top: 1px solid rgba(38, 128, 194, 0.2); display: flex; flex-direction: column; gap: 40px; } #madifushi-detail .madifushi-rate__card:first-child { padding-top: 89px; } #madifushi-detail .madifushi-rate__card-top { display: flex; flex-direction: column; gap: 12px; } #madifushi-detail .madifushi-rate__combo-tag { display: inline-flex; align-self: flex-start; padding: 4px 11px; border: 1px solid rgba(18, 41, 59, 0.22); border-radius: 999px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 13px; line-height: normal; letter-spacing: 0.52px; color: rgba(27, 27, 24, 0.62); } #madifushi-detail .madifushi-rate__name { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 28px; line-height: 39.2px; letter-spacing: -0.14px; color: #16233f; } #madifushi-detail .madifushi-rate__meta { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 18px; line-height: 27px; color: rgba(27, 27, 24, 0.62); } #madifushi-detail .madifushi-rate__card-body { display: flex; align-items: stretch; gap: 40px; width: 100%; } #madifushi-detail .madifushi-rate__photo { width: 447px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background-color: #e2e8ee; } #madifushi-detail .madifushi-rate__photo img { width: 100%; height: 100%; object-fit: cover; } #madifushi-detail .madifushi-rate__seasons { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; } #madifushi-detail .madifushi-rate__seasons-label { margin: 0 0 20px; font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.3px; text-transform: uppercase; color: rgba(18, 41, 59, 0.55); } #madifushi-detail .madifushi-rate__season { display: flex; flex-direction: column; gap: 9px; padding: 16px 0; border-top: 1px solid rgba(38, 128, 194, 0.18); } #madifushi-detail .madifushi-rate__season:first-of-type { padding-top: 0; padding-bottom: 16px; border-top: none; } #madifushi-detail .madifushi-rate__season-range { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: 16px; line-height: normal; color: rgba(18, 41, 59, 0.6); } #madifushi-detail .madifushi-rate__price-line { display: flex; flex-wrap: nowrap; gap: 16px; } #madifushi-detail .madifushi-rate__price-item { display: inline-flex; align-items: center; gap: 10px; } #madifushi-detail .madifushi-rate__price-label { font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 20px; line-height: normal; color: #16233f; white-space: nowrap; } #madifushi-detail .madifushi-rate__price-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; line-height: normal; color: #16233f; white-space: nowrap; } #madifushi-detail .madifushi-rate__card--combo .madifushi-rate__season { gap: 16px; padding: 24px 0; } #madifushi-detail .madifushi-rate__card--combo .madifushi-rate__season:first-of-type { padding-top: 0; padding-bottom: 24px; } #madifushi-detail .madifushi-rate__price-item--lg .madifushi-rate__price-label, #madifushi-detail .madifushi-rate__price-item--lg .madifushi-rate__price-value { font-size: 25px; } #madifushi-detail .madifushi-rate__price-line--sm .madifushi-rate__price-label, #madifushi-detail .madifushi-rate__price-line--sm .madifushi-rate__price-value { font-size: 17px; } #madifushi-detail .madifushi-rate__note { max-width: 820px; margin: 0; padding-top: 22px; border-top: 1px solid rgba(201, 131, 90, 0.4); font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.4; word-break: keep-all; overflow-wrap: break-word; color: rgba(27, 27, 24, 0.62); } /* Rate Guide 확장 ? 식사타입(HB/FB/AI) 플랜별 가격 테이블 */ #madifushi-detail .madifushi-rate__plans { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } #madifushi-detail .madifushi-rate__plan-row { display: flex; align-items: baseline; gap: 48px; flex-wrap: wrap; } #madifushi-detail .madifushi-rate__plan-cell { display: flex; flex-direction: row; align-items: baseline; gap: 8px; } #madifushi-detail .madifushi-rate__plan-label { font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; color: #2680c2; text-transform: uppercase; } #madifushi-detail .madifushi-rate__plan-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; color: #16233f; white-space: nowrap; } #madifushi-detail .madifushi-rate__child-block { margin-top: 8px; padding-top: 32px; border-top: 1px dashed rgba(38, 128, 194, 0.25); display: flex; flex-direction: column; gap: 6px; } #madifushi-detail .madifushi-rate__child-label { font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.3px; color: rgba(18, 41, 59, 0.7); padding-bottom:12px;} #madifushi-detail .madifushi-rate__child-row { display: flex; gap: 18px; flex-wrap: wrap; } #madifushi-detail .madifushi-rate__child-value { font-family: 'Pretendard', sans-serif; font-size: 15px; color: rgba(18, 41, 59, 0.75); } #madifushi-detail .madifushi-rate__child-value b { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #16233f; } /* ===================== 카탈로그 보기 버튼 ===================== */ #madifushi-detail .madifushi-rate__head-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; flex-wrap: wrap; } #madifushi-detail .madifushi-rate__catalog-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border: 1px solid rgba(38, 128, 194, 0.5); border-radius: 2px; background-color: transparent; font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 1.2px; color: #2680c2; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } #madifushi-detail .madifushi-rate__catalog-btn:hover { background-color: #2680c2; border-color: #2680c2; color: #fff; } /* ===================== 카탈로그 모달(iframe) ===================== */ #madifushi-detail .madifushi-catalog-modal { position: fixed; inset: 0; z-index: 1000; display: none; } #madifushi-detail .madifushi-catalog-modal.is-active { display: block; } #madifushi-detail .madifushi-catalog-modal__dim { position: absolute; inset: 0; background-color: rgba(18, 41, 59, 0.6); } #madifushi-detail .madifushi-catalog-modal__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, calc(100% - 32px)); height: min(85vh, 900px); background-color: #fff; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; } #madifushi-detail .madifushi-catalog-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(18, 41, 59, 0.1); flex-shrink: 0; } #madifushi-detail .madifushi-catalog-modal__title { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 16px; color: #16233f; } #madifushi-detail .madifushi-catalog-modal__close { width: 32px; height: 32px; border: none; background: transparent; font-size: 24px; line-height: 1; color: rgba(18, 41, 59, 0.5); cursor: pointer; } #madifushi-detail .madifushi-catalog-modal__body { flex: 1 1 0; min-height: 0; } #madifushi-detail .madifushi-catalog-modal__iframe { width: 100%; height: 100%; border: 0; display: block; } /* ===================== Section 04. Villas & Suites ===================== */ #madifushi-detail .madifushi-rooms { padding: 140px 0; background-color: #123a56; } #madifushi-detail .madifushi-rooms__container { width: 1240px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 76px; } #madifushi-detail .madifushi-rooms__head { display: flex; flex-direction: column; gap: 20px; width: 600px; max-width: 100%; padding-top: 5px; } #madifushi-detail .madifushi-rooms__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; } #madifushi-detail .madifushi-rooms__eyebrow-rule { display: block; width: 34px; height: 1px; background-color: #d98a5e; flex-shrink: 0; } #madifushi-detail .madifushi-rooms__eyebrow-text { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 5.12px; text-transform: uppercase; color: #d98a5e; white-space: nowrap; } #madifushi-detail .madifushi-rooms__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 40px; line-height: 50px; color: #f5f8f7; } #madifushi-detail .madifushi-rooms__group { display: flex; flex-direction: column; gap: 28px; } #madifushi-detail .madifushi-rooms__group-title { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: #d98a5e; } #madifushi-detail .madifushi-rooms__group-title span { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(245, 248, 247, 0.6); margin-left: 8px; } #madifushi-detail .madifushi-rooms__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; width: 100%; } #madifushi-detail .madifushi-rooms__grid--3 { grid-template-columns: repeat(3, 1fr); } #madifushi-detail .madifushi-rooms__card { display: flex; flex-direction: column; gap: 22px; } #madifushi-detail .madifushi-rooms__photo { position: relative; margin: 0; height: 348px; border-radius: 4px; overflow: hidden; background-color: #e2e8ee; } #madifushi-detail .madifushi-rooms__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; } #madifushi-detail .madifushi-rooms__badge { position: absolute; left: 16px; top: 16px; padding: 7px 12px; background-color: rgba(10, 27, 40, 0.82); font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: 13px; line-height: normal; letter-spacing: 1.82px; text-transform: uppercase; color: #d98a5e; } #madifushi-detail .madifushi-rooms__body { display: flex; flex-direction: column; gap: 8px; } #madifushi-detail .madifushi-rooms__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } #madifushi-detail .madifushi-rooms__name { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.4; letter-spacing: -0.24px; color: #f5f8f7; } #madifushi-detail .madifushi-rooms__size { flex-shrink: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 16px; line-height: normal; color: #d98a5e; } #madifushi-detail .madifushi-rooms__desc { margin: 0; padding-right: 16px; font-family: 'Pretendard', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.4; word-break: keep-all; overflow-wrap: break-word; color: rgba(247, 242, 230, 0.6); } /* ===================== Section 05. Why ===================== */ #madifushi-detail .madifushi-why { position: relative; padding: 140px 0; background-color: #1f74ab; overflow: hidden; } #madifushi-detail .madifushi-why__bg { position: absolute; inset: 0; pointer-events: none; } #madifushi-detail .madifushi-why__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; mix-blend-mode: overlay; } #madifushi-detail .madifushi-why__container { position: relative; width: 1240px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 56px; } #madifushi-detail .madifushi-why__top { display: flex; flex-direction: column; gap: 16px; width: 100%; } #madifushi-detail .madifushi-why__head { display: flex; flex-direction: column; gap: 19.36px; width: 900px; max-width: 100%; padding-top: 5px; } #madifushi-detail .madifushi-why__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; } #madifushi-detail .madifushi-why__eyebrow-rule { display: block; width: 34px; height: 1px; background-color: #f6f6f6; flex-shrink: 0; } #madifushi-detail .madifushi-why__eyebrow-text { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 5.12px; text-transform: uppercase; color: #f6f6f6; white-space: nowrap; } #madifushi-detail .madifushi-why__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 40px; line-height: 1.4; color: #f6f6f6; word-break: keep-all; } #madifushi-detail .madifushi-why__intro { margin: 0; width: 1200px; max-width: 100%; text-align: left; font-family: 'Pretendard', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.5; color: #f6f6f6; word-break: keep-all; overflow-wrap: break-word; } #madifushi-detail .madifushi-why__panels { display: flex; flex-direction: column; gap: 32px; width: 100%; } #madifushi-detail .madifushi-why__stats { display: flex; align-items: center; gap: 13px; height: 159px; padding: 24px 32px; border-radius: 4px; background-color: #f6f6f6; border: 1px solid rgba(38, 128, 194, 0.25); } #madifushi-detail .madifushi-why__stat { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px; } #madifushi-detail .madifushi-why__stat:first-child { padding-left: 0; padding-right: 20px; } #madifushi-detail .madifushi-why__stat:not(:first-child) { border-left: 1px solid rgba(38, 128, 194, 0.22); } #madifushi-detail .madifushi-why__stat-value { margin: 0; text-align: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 32px; line-height: normal; letter-spacing: -0.32px; color: #2680c2; white-space: nowrap; } #madifushi-detail .madifushi-why__stat-unit { margin: 0; padding-top: 2px; text-align: center; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 11px; line-height: normal; letter-spacing: 1.54px; text-transform: uppercase; color: #c9835a; white-space: nowrap; } #madifushi-detail .madifushi-why__stat-kr { margin: 0; text-align: center; font-family: 'Pretendard', sans-serif; font-weight: 300; font-size: 18px; line-height: normal; color: #16233f; white-space: nowrap; } #madifushi-detail .madifushi-why__features { width: 100%; padding: 32px 56px; border-radius: 4px; background-color: #f6f6f6; border: 1px solid rgba(219, 219, 219, 0.5); display: flex; flex-direction: column; gap: 24px; } #madifushi-detail .madifushi-why__features-label { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 28px; line-height: normal; color: #2680c2; } #madifushi-detail .madifushi-why__features-label-sm { font-size: 26px; } #madifushi-detail .madifushi-why__feature-list { display: flex; flex-direction: column; gap: 8px; width: 100%; } #madifushi-detail .madifushi-why__feature { display: flex; align-items: flex-start; gap: 12px; width: 100%; } #madifushi-detail .madifushi-why__feature-num { flex-shrink: 0; align-self: stretch; width: 32px; display: flex; align-items: baseline; justify-content: center; padding: 4px 0; border-radius: 5px; background-color: #2680c2; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 17px; line-height: normal; color: #fff; } #madifushi-detail .madifushi-why__feature-title { flex: 1 0 0; min-width: 0; margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.4; color: #16233f; } /* ===================== Section 06. Stay Combination ===================== */ #madifushi-detail .madifushi-stay { padding: 140px 0; background-color: #fff; } #madifushi-detail .madifushi-stay__container { width: 1240px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; } #madifushi-detail .madifushi-stay__head { display: flex; flex-direction: column; gap: 20px; width: 600px; max-width: 100%; padding-top: 5px; } #madifushi-detail .madifushi-stay__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; } #madifushi-detail .madifushi-stay__eyebrow-rule { display: block; width: 34px; height: 1px; background-color: #2680c2; flex-shrink: 0; } #madifushi-detail .madifushi-stay__eyebrow-text { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 5.12px; text-transform: uppercase; color: #2680c2; white-space: nowrap; } #madifushi-detail .madifushi-stay__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 40px; line-height: 50px; color: #16233f; } #madifushi-detail .madifushi-stay__grid { display: flex; align-items: flex-start; justify-content: center; gap: 72px; padding-top: 20px; width: 100%; } #madifushi-detail .madifushi-stay__panel { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; } #madifushi-detail .madifushi-stay__panel-label { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 22px; line-height: normal; letter-spacing: 0.35px; color: #16233f; } #madifushi-detail .madifushi-stay__panel-sub { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; color: rgba(27, 27, 24, 0.62); } #madifushi-detail .madifushi-stay__list { display: flex; flex-direction: column; width: 100%; padding-top: 21px; } #madifushi-detail .madifushi-stay__row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 15px 0; border-bottom: 1px solid rgba(38, 128, 194, 0.2); } #madifushi-detail .madifushi-stay__row--first { border-top: 1px solid rgba(38, 128, 194, 0.2); } #madifushi-detail .madifushi-stay__idx { flex-shrink: 0; width: 20px; font-family: 'Space Grotesk', sans-serif; font-weight: 400; font-size: 15.5px; line-height: normal; color: #2680c2; } #madifushi-detail .madifushi-stay__name { flex: 1 0 0; min-width: 0; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 18px; line-height: 31px; color: #16233f; } #madifushi-detail .madifushi-stay__plus { display: inline-block; margin: 0 4px; font-weight: 600; color: #c9835a; } #madifushi-detail .madifushi-stay__tag { flex-shrink: 0; padding: 4px 10px; border: 1px solid rgba(18, 41, 59, 0.2); border-radius: 999px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 14px; line-height: normal; letter-spacing: 0.28px; color: rgba(27, 27, 24, 0.62); white-space: nowrap; } #madifushi-detail .madifushi-stay__foot { width: 1200px; max-width: 100%; margin: 0; padding-top: 21.09px; border-top: 1px solid rgba(201, 131, 90, 0.3); font-family: 'Pretendard', sans-serif; font-weight: 300; font-size: 16px; line-height: 26px; color: rgba(27, 27, 24, 0.62); } /* ===================== Section 07. Island Map ===================== */ #madifushi-detail .madifushi-mapsec { padding: 160px 0 90px; background-color: #eaf3f9; } #madifushi-detail .madifushi-mapsec__container { width: 1240px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } #madifushi-detail .madifushi-mapsec__top { display: flex; flex-direction: column; gap: 48px; width: 100%; } #madifushi-detail .madifushi-mapsec__head { display: flex; flex-direction: column; gap: 20px; width: 900px; max-width: 100%; padding-top: 5px; } #madifushi-detail .madifushi-mapsec__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; } #madifushi-detail .madifushi-mapsec__eyebrow-rule { display: block; width: 34px; height: 1px; background-color: #2680c2; flex-shrink: 0; } #madifushi-detail .madifushi-mapsec__eyebrow-text { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 5.12px; text-transform: uppercase; color: #2680c2; white-space: nowrap; } #madifushi-detail .madifushi-mapsec__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 40px; line-height: 50px; color: #16233f; } #madifushi-detail .madifushi-mapsec__desc { margin: 0; width: 900px; max-width: 100%; padding-top: 1.4px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 18px; line-height: 29px; color: rgba(18, 41, 59, 0.9); word-break: keep-all; overflow-wrap: break-word; } #madifushi-detail .madifushi-mapsec__map { position: relative; width: 100%; height: 500px; border-radius: 4px; overflow: hidden; background-color: #e2e8ee; } #madifushi-detail .madifushi-mapsec__map img { width: 100%; height: 100%; object-position: center; } #madifushi-detail .madifushi-mapsec__map-tint { position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.2); mix-blend-mode: soft-light; } #madifushi-detail .madifushi-mapsec__caption { margin: 0; width: 100%; text-align: right; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 18px; line-height: 31px; color: #16233f; } /* ===================== Section 08. All-Inclusive / Plans ===================== */ #madifushi-detail .madifushi-incl { padding: 80px 0 159px; background-color: #eaf3f9; } #madifushi-detail .madifushi-incl__container { width: 1240px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 0px; } #madifushi-detail .madifushi-incl__head { display: flex; flex-direction: column; gap: 20px; width: 1200px; max-width: 100%; padding-top: 5px; } #madifushi-detail .madifushi-incl__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; } #madifushi-detail .madifushi-incl__eyebrow-rule { display: block; width: 34px; height: 1px; background-color: #2680c2; flex-shrink: 0; } #madifushi-detail .madifushi-incl__eyebrow-text { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 5.12px; text-transform: uppercase; color: #2680c2; white-space: nowrap; } #madifushi-detail .madifushi-incl__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 40px; line-height: 1.4; color: #16233f; } #madifushi-detail .madifushi-incl__intro { margin: 0; max-width: 1180px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.6; color: rgba(18, 41, 59, 0.85); padding-bottom:56px; word-break: keep-all; overflow-wrap: break-word; } #madifushi-detail .madifushi-incl__row { display: flex; align-items: stretch; gap: 24px; width: 100%; } #madifushi-detail .madifushi-incl__card { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; border-radius: 4px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 12px rgba(22, 35, 63, 0.06); } #madifushi-detail .madifushi-incl__photo { position: relative; height: 205px; overflow: hidden; background-color: #e2e8ee; } #madifushi-detail .madifushi-incl__photo img { width: 100%; height: 100%; object-fit: cover; } #madifushi-detail .madifushi-incl__photo--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #madifushi-detail .madifushi-incl__photo--split img { height: 100%; } #madifushi-detail .madifushi-incl__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 24px 24px; } #madifushi-detail .madifushi-incl__meta { display: flex; align-items: baseline; gap: 9.99px; margin-bottom: 4px; } #madifushi-detail .madifushi-incl__meta-num { font-family: 'Space Grotesk', sans-serif; font-weight: 400; font-size: 13px; line-height: normal; color: #222; } #madifushi-detail .madifushi-incl__meta-label { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 11px; line-height: normal; letter-spacing: 1.32px; text-transform: uppercase; color: #222; } #madifushi-detail .madifushi-incl__meta--light .madifushi-incl__meta-num, #madifushi-detail .madifushi-incl__meta--light .madifushi-incl__meta-label { color: #fff; } #madifushi-detail .madifushi-incl__title-sm { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 22px; line-height: 31.5px; color: #222; } #madifushi-detail .madifushi-incl__text { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.4; color: rgba(18, 41, 59, 0.8); } #madifushi-detail .madifushi-incl__list { margin: 0; padding: 0; list-style: none; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6 !important; color: rgba(18, 41, 59, 0.8); } #madifushi-detail .madifushi-incl__list li { position: relative; padding-left: 14px; line-height: 1.6 !important;} #madifushi-detail .madifushi-incl__list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background-color: currentColor; } #madifushi-detail .madifushi-incl__list--light { font-size: 18px; color: rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; gap: 12px; } #madifushi-detail .madifushi-incl__list--light li { display: flex; align-items: center; gap: 12px; padding-left: 0; } #madifushi-detail .madifushi-incl__list--light li::before { content: none; } #madifushi-detail .madifushi-incl__list--light .madifushi-incl__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #6bb6d6; } #madifushi-detail .madifushi-incl__list--light .madifushi-incl__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #madifushi-detail .madifushi-incl__wide { position: relative; flex: 1 0 0; min-width: 0; height: auto; display: flex; align-items: center; justify-content: center; border-radius: 4px; overflow: visible; background-color: #eaf3f9; padding: 48px 0; } #madifushi-detail .madifushi-incl__float-card { width: 100%; max-width: 1240px; padding: 40px 44px 36px; border-radius: 10px; background-color: #fff; box-shadow: 0 2px 12px rgba(22, 35, 63, 0.06); text-align: center; } #madifushi-detail .madifushi-incl__float-sub { margin: 0 0 8px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 0.3px; color: rgba(18, 41, 59, 0.5); } #madifushi-detail .madifushi-incl__float-title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 28px; line-height: 1.4; color: #16233f; } #madifushi-detail .madifushi-incl__float-title span { color: #2680c2; } #madifushi-detail .madifushi-incl__float-grid { margin-top: 26px; display: flex; justify-content: center; gap: 14px; } #madifushi-detail .madifushi-incl__float-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; max-width: 150px; } #madifushi-detail .madifushi-incl__float-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background-color: rgba(38, 128, 194, 0.1); color: #2680c2; } #madifushi-detail .madifushi-incl__float-icon img { width: 22px; height: 22px; } #madifushi-detail .madifushi-incl__float-label { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.4; color: #16233f; word-break: keep-all; } #madifushi-detail .madifushi-incl__foot { margin: 0; text-align: left; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: 28px; color: #16233f; } /* ===================== Section 09. Dining & Bar ===================== */ #madifushi-detail .madifushi-dining { padding: 160px 0; background-color: #f4f8fb; } #madifushi-detail .madifushi-dining__container { width: 1280px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; } #madifushi-detail .madifushi-dining__head { display: flex; flex-direction: column; gap: 20px; width: 600px; max-width: 100%; padding-top: 5px; } #madifushi-detail .madifushi-dining__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; } #madifushi-detail .madifushi-dining__eyebrow-rule { display: block; width: 34px; height: 1px; background-color: #2680c2; flex-shrink: 0; } #madifushi-detail .madifushi-dining__eyebrow-text { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 5.12px; text-transform: uppercase; color: #2680c2; white-space: nowrap; } #madifushi-detail .madifushi-dining__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 40px; line-height: 1.4; color: #16233f; } #madifushi-detail .madifushi-dining__intro { margin: 0; max-width: 900px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.6; color: rgba(18, 41, 59, 0.85); } #madifushi-detail .madifushi-dining__row { display: flex; align-items: stretch; gap: 36px; width: 100%; } #madifushi-detail .madifushi-dining__row--lg { padding-bottom: 40px; } #madifushi-detail .madifushi-dining__card { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; padding-bottom: 30px; border-radius: 4px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 12px rgba(22, 35, 63, 0.06); } #madifushi-detail .madifushi-dining__photo { position: relative; height: 261px; background-color: #e2e8ee; } #madifushi-detail .madifushi-dining__photo--lg { height: 382px; } #madifushi-detail .madifushi-dining__photo img { width: 100%; height: 100%; object-fit: cover; } #madifushi-detail .madifushi-dining__body { display: flex; flex-direction: column; gap: 8px; padding: 0 32px; } #madifushi-detail .madifushi-dining__row--lg .madifushi-dining__body { padding: 0 40px; } #madifushi-detail .madifushi-dining__no { font-family: 'Space Grotesk', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; color: #2680c2; } #madifushi-detail .madifushi-dining__name { margin: 0; padding-top: 13px; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 28px; line-height: 39.2px; color: #16233f; } #madifushi-detail .madifushi-dining__type { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 0.96px; color: rgba(27, 27, 24, 0.62); } #madifushi-detail .madifushi-dining__desc { margin: 0; max-width: 360px; padding: 13.4px 0 16.01px; font-family: 'Pretendard', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.4; color: rgba(18, 41, 59, 0.62); word-break: keep-all; overflow-wrap: break-word; } #madifushi-detail .madifushi-dining__hours { margin: 0; padding-top: 18px; border-top: 1px solid rgba(38, 128, 194, 0.25); font-family: 'Space Grotesk', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #16233f; } /* ===================== Section 10. Made For ===================== */ #madifushi-detail .madifushi-fit { padding: 160px 0; background-color: #eaf3f9; } #madifushi-detail .madifushi-fit__container { width: 1240px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; } #madifushi-detail .madifushi-fit__head { display: flex; flex-direction: column; gap: 20px; width: 600px; max-width: 100%; } #madifushi-detail .madifushi-fit__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; } #madifushi-detail .madifushi-fit__eyebrow-rule { display: block; width: 34px; height: 1px; background-color: #2680c2; flex-shrink: 0; } #madifushi-detail .madifushi-fit__eyebrow-text { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 5.12px; text-transform: uppercase; color: #2680c2; white-space: nowrap; } #madifushi-detail .madifushi-fit__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 40px; line-height: 50px; color: #16233f; white-space: nowrap; } #madifushi-detail .madifushi-fit__grid { display: flex; align-items: stretch; gap: 36px; width: 100%; } #madifushi-detail .madifushi-fit__card { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-bottom: 32px; border-radius: 4px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 12px rgba(22, 35, 63, 0.06); } #madifushi-detail .madifushi-fit__photo { height: 247px; background-color: #e2e8ee; } #madifushi-detail .madifushi-fit__photo img { width: 100%; height: 100%; object-fit: cover; } #madifushi-detail .madifushi-fit__desc { margin: 0; padding: 0 16px; font-family: 'Pretendard', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.4; color: #16233f; word-break: keep-all; overflow-wrap: break-word; } /* ===================== Section 11. Final CTA ===================== */ #madifushi-detail .madifushi-final { position: relative; height: 900px; display: flex; align-items: center; justify-content: center; overflow: hidden; } #madifushi-detail .madifushi-final__bg { position: absolute; inset: 0; } #madifushi-detail .madifushi-final__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } #madifushi-detail .madifushi-final__scrim { position: absolute; inset: 0; background-image: linear-gradient(to bottom, rgba(10, 27, 40, 0.55) 0%, rgba(10, 27, 40, 0.35) 50%, rgba(10, 27, 40, 0.72) 100%); } #madifushi-detail .madifushi-final__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 44px; padding: 0 86.4px; } #madifushi-detail .madifushi-final__heading { display: flex; flex-direction: column; align-items: center; } #madifushi-detail .madifushi-final__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 61.5px; line-height: 92.25px; text-align: center; color: #f5f8f7; white-space: nowrap; } #madifushi-detail .madifushi-final__subtitle { margin: 0; font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.6; text-align: center; color: #f5f8f7; white-space: nowrap; } #madifushi-detail .madifushi-final__btn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 44px; border: 1px solid rgba(247, 242, 230, 0.7); font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 17.5px; line-height: normal; letter-spacing: 1.75px; text-align: center; color: #f5f8f7; text-decoration: none; white-space: nowrap; cursor: pointer; } /* ===================== 예약 문의 버튼(CTA) ===================== */ #madifushi-detail .madifushi-rate__cta { align-self: flex-start; margin-top: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 14px 34px; border: 1px solid rgba(38, 128, 194, 0.5); border-radius: 2px; background-color: transparent; font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 1.4px; color: #2680c2; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } #madifushi-detail .madifushi-rate__cta:hover { background-color: #2680c2; border-color: #2680c2; color: #fff; } /* ===================== 예약 문의 모달(Reservation Inquiry Modal) ===================== */ #madifushi-detail .madifushi-modal { position: fixed; inset: 0; z-index: 1000; display: none; } #madifushi-detail .madifushi-modal.is-active { display: block; } #madifushi-detail .madifushi-modal__dim { position: absolute; inset: 0; background-color: rgba(18, 41, 59, 0.6); } #madifushi-detail .madifushi-modal__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 560px; max-width: calc(100% - 32px); max-height: calc(100vh - 64px); overflow-y: auto; background-color: #fff; border-radius: 6px; padding: 44px 40px 40px; } #madifushi-detail .madifushi-modal__close { position: absolute; top: 18px; right: 20px; width: 32px; height: 32px; border: none; background: transparent; font-size: 26px; line-height: 1; color: rgba(18, 41, 59, 0.5); cursor: pointer; } #madifushi-detail .madifushi-modal__head { margin-bottom: 28px; } #madifushi-detail .madifushi-modal__eyebrow { margin: 0 0 6px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #2680c2; } #madifushi-detail .madifushi-modal__title { margin: 0; font-family: 'Cafe24ClassicType', serif; font-weight: 400; font-size: 26px; color: #16233f; } #madifushi-detail .madifushi-modal__form { display: flex; flex-direction: column; gap: 22px; } #madifushi-detail .madifushi-modal__group { display: flex; flex-direction: column; gap: 10px; } #madifushi-detail .madifushi-modal__group-title, #madifushi-detail .madifushi-modal__field-label { font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 14px; color: #16233f; } #madifushi-detail .madifushi-modal__row { display: flex; gap: 16px; } #madifushi-detail .madifushi-modal__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } #madifushi-detail .madifushi-modal__field label { font-family: 'Pretendard', sans-serif; font-size: 13px; color: rgba(18, 41, 59, 0.7); } #madifushi-detail .madifushi-modal__field input, #madifushi-detail .madifushi-modal__field textarea { width: 100%; padding: 11px 12px; border: 1px solid rgba(18, 41, 59, 0.18); border-radius: 3px; font-family: 'Pretendard', sans-serif; font-size: 14px; color: #16233f; background-color: #fff; } #madifushi-detail .madifushi-modal__field textarea { resize: vertical; } #madifushi-detail .madifushi-modal__field input:focus, #madifushi-detail .madifushi-modal__field textarea:focus { outline: none; border-color: #2680c2; } /* 브라우저 기본 달력 아이콘/포커스 링에 사이트 포인트 컬러 적용 (크로미움 계열만 반영, 팝업 자체 색상은 OS/브라우저가 렌더링해 CSS로 제어 불가) */ #madifushi-detail .madifushi-modal__field input[type="date"] { accent-color: #2680c2; } #madifushi-detail .madifushi-modal__radio-group { display: flex; gap: 22px; flex-wrap: nowrap; } #madifushi-detail .madifushi-modal__radio-group label { display: inline-flex; align-items: center; gap: 8px; font-family: 'Pretendard', sans-serif; font-size: 14px; color: #16233f; cursor: pointer; white-space: nowrap; } #madifushi-detail .madifushi-modal__radio-group input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 0; border-radius: 50%; border: 1.5px solid rgba(18, 41, 59, 0.35); background-color: #fff; position: relative; flex-shrink: 0; cursor: pointer; transition: border-color 0.2s ease; } #madifushi-detail .madifushi-modal__radio-group input[type="radio"]:checked { border-color: #2680c2; } #madifushi-detail .madifushi-modal__radio-group input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; background-color: #2680c2; transform: translate(-50%, -50%); } #madifushi-detail .madifushi-modal__radio-group label:has(input:checked) span { color: #2680c2; font-weight: 600; } #madifushi-detail .madifushi-modal__pax-row { display: flex; gap: 16px; flex-wrap: wrap; } #madifushi-detail .madifushi-modal__pax { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; } #madifushi-detail .madifushi-modal__pax label { font-family: 'Pretendard', sans-serif; font-size: 13px; color: rgba(18, 41, 59, 0.7); } #madifushi-detail .madifushi-modal__pax-input { display: flex; align-items: center; gap: 8px; } #madifushi-detail .madifushi-modal__pax-input input { width: 70px; padding: 9px 10px; border: 1px solid rgba(18, 41, 59, 0.18); border-radius: 3px; } #madifushi-detail .madifushi-modal__pax-input span { font-family: 'Pretendard', sans-serif; font-size: 13px; color: rgba(18, 41, 59, 0.6); } #madifushi-detail .madifushi-modal__submit { margin-top: 8px; padding: 15px; border: none; border-radius: 3px; background-color: #2680c2; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.5px; color: #fff; cursor: pointer; transition: background-color 0.25s ease; } #madifushi-detail .madifushi-modal__submit:hover { background-color: #1d669e; } /* 모달 열림 시 배경 스크롤 잠금 · body에 붙는 클래스라 예외적으로 body 태그 포함 */ body.madifushi-modal-open { overflow: hidden; }