@charset "utf-8"; /* ============================================================ Fraser Place 인트로(welcome) 전용 스타일 [intro.*] - 개발본 전용 / 인트로 페이지 1개에만 적용 - 공통 파일 미수정, 클래스 prefix(intro-) 로 충돌 방지 - global.css(리셋/box-sizing) + futura.css 만 재사용 ============================================================ */ @import url('css/global.css?v=260527_1'); @import url('fonts/futura.css'); /* 폰트: 시안(PSD) 기준 KoPubWorld 돋움/바탕 — /assets/kopub.css 에서 @font-face 로드 (welcome.php link) */ :root{ --intro-navy:#152232; --intro-navy-deep:#0b1523; --intro-gold:#b08d57; --intro-cream:#f4efe6; --intro-ink:#243040; --intro-gray:#8a8f98; --intro-line:#e2ddd3; } /* ---------- base ---------- */ .intro-body{ font-family:'KoPub Dotum','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','Noto Sans KR',sans-serif; color:var(--intro-ink); background:#fff; -webkit-font-smoothing:antialiased; } .intro-body img{ display:block; max-width:100%; } .intro-body a{ color:inherit; text-decoration:none; transition:all .25s ease; } /* global.css 의 `button{display:none}` 리셋을 인트로 범위에서만 복원 */ .intro-body button{ display:inline-block; font-family:inherit; } /* 폼 컨트롤(input/select/textarea/button)은 브라우저 규칙상 페이지 font-family 를 '상속하지 않고' OS 기본 폼 폰트로 렌더된다 → font:inherit 로 조상 요소의 font-family 를 그대로 쓰게 강제 (.intro-reserve 하위는 아래 system-first 규칙을 물려받음. select 는 별도 전용 규칙이 우선) */ .intro-body input, .intro-body select, .intro-body textarea{ font-family:inherit; } .intro-serif{ font-family:'KoPub Batang','Nanum Myeongjo',serif; } /* [2026-07-30] 공지 바/모달·호텔선택·예약폼·언어선택기 : PC(Windows Chrome)에서만 이 소형 UI 요소들이 깨져 보이는 문제가 KoPub-first 스택(및 !important 강제)으로도 반복 해결되지 않아, 사용자 지침에 따라 이 요소들만 "시스템 한글폰트 우선" 스택으로 전환한다. Mac→Apple SD Gothic Neo, Windows→맑은 고딕, 그 외→Noto Sans KR, 폴백→KoPub Dotum(서버) → 어떤 환경이든 OS 네이티브 한글폰트로 또렷하게 렌더되어 절대 깨지지 않는다. 대형 디스플레이 요소(히어로 타이틀/설명, 오퍼 타이틀 등)는 KoPub 유지(문제 없음). */ .intro-notice, .intro-notice-modal, .intro-lang, .intro-mobile__lang, .intro-reserve{ font-family:'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','Noto Sans KR','KoPub Dotum',sans-serif; } .intro-page{ display:flex; flex-direction:column; width:100%; overflow-x:hidden; } .intro-inner{ width:100%; max-width:1400px; margin:0 auto; padding:0 40px; } /* order (PC) : notice → brand → hero → reserve → offer → footer */ .intro-topbar{ order:1; } .intro-hero{ order:3; } .intro-reserve{ order:4; } .intro-offer{ order:5; } .intro-footer{ order:6; } /* ============================================================ NOTICE BAR (항목3: z-index 상향) ============================================================ */ .intro-topbar{ position:relative; background:#fff; border-bottom:1px solid #ece7dd; z-index:20; } .intro-topbar__inner{ position:relative; max-width:1720px; margin:0 auto; padding:22px 48px; display:flex; align-items:center; justify-content:center; min-height:88px; } /* PSD: 공지 텍스트 전체 동일한 다크그레이(#333 톤), "[공지]" 별도 강조색 없음 */ .intro-notice{ position:absolute; left:48px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:12px; font-size:13px; color:#333433; } /* [수정] "[공지]" 태그는 절대 줄바꿈되지 않도록 고정 폭(줄어들지 않음) */ .intro-notice__tag{ color:#333433; font-weight:600; letter-spacing:.02em; flex:0 0 auto; white-space:nowrap; } /* [DEV] PC 공지 제한영역 축소 : 컨테이너가 아니라 제목 텍스트 span 자체에 max-width 를 줘서 [공지] 태그/버튼은 항상 한 줄 그대로 유지하고, 긴 제목만 여기서 일찍 말줄임(ellipsis) 되도록 한다. */ .intro-notice__text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; flex:0 1 auto; min-width:0; max-width:220px; } /* PSD: "확인하기" 버튼 = 진한 다크그레이 채움 + 흰 글자(테두리 아님) */ .intro-notice__btn{ flex:0 0 auto; border:none; border-radius:2px; padding:5px 14px; font-size:12px; color:#fff; cursor:pointer; background:#333433; } .intro-notice__btn:hover{ background:#4d4f4e; } /* [DEV] 공개 공지 0건 : 공지바 자체를 숨김(레이아웃은 유지, 로고 중앙정렬에 영향 없음) */ .intro-notice.intro-notice--empty{ display:none; } .intro-logo img{ height:32px; width:auto; } /* ============================================================ [DEV] 공지 상세 모달 (관리자 게시판 NOTICE_NAMDAEMU 연동) - 공지 텍스트/버튼/모바일 핫스팟 클릭 시 노출. 기존 .intro-notice 다크그레이 톤 준수(과한 디자인 지양). ============================================================ */ .intro-notice-modal{ position:fixed; inset:0; z-index:200; display:none; } .intro-notice-modal.is-open{ display:block; } .intro-notice-modal__overlay{ position:absolute; inset:0; background:rgba(20,20,20,.55); } .intro-notice-modal__panel{ position:relative; width:min(560px,92vw); max-height:min(82vh,640px); margin:6vh auto 0; background:#fff; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.28); display:flex; flex-direction:column; overflow:hidden; } .intro-notice-modal__close{ position:absolute; top:6px; right:8px; width:36px; height:36px; border:none; background:transparent; font-size:24px; line-height:1; color:#8a8f98; cursor:pointer; z-index:2; } .intro-notice-modal__close:hover{ color:#333433; } .intro-notice-modal__body{ padding:34px 30px 28px; overflow-y:auto; -webkit-overflow-scrolling:touch; } .intro-notice-modal__date{ margin:0 0 8px; font-size:12px; color:#9a9d9f; letter-spacing:.02em; } .intro-notice-modal__title{ margin:0 0 16px; padding-right:26px; font-family:'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','Noto Sans KR','KoPub Dotum',sans-serif; font-size:19px; font-weight:700; color:#243040; line-height:1.4; } .intro-notice-modal__cover{ margin:0 0 16px; } .intro-notice-modal__cover img{ display:block; max-width:100%; height:auto; border-radius:4px; } .intro-notice-modal__content{ font-size:14px; line-height:1.7; color:#4a4f55; word-break:break-word; } .intro-notice-modal__content img{ display:block; max-width:100%; height:auto; margin:10px 0; } .intro-notice-modal__extra{ margin-top:20px; padding-top:16px; border-top:1px solid #ece7dd; font-size:13px; color:#6b7576; } .intro-notice-modal__extra a{ display:block; margin:4px 0; color:#333433; text-decoration:underline; word-break:break-all; } .intro-notice-modal__extra:empty{ display:none; } /* 모달 오픈 중 배경 스크롤 잠금 (닫으면 클래스 제거되어 정상 복구) */ body.intro-modal-open{ overflow:hidden; } @media (max-width:600px){ .intro-notice-modal__panel{ width:94vw; margin-top:4vh; } .intro-notice-modal__body{ padding:30px 20px 22px; } } /* ============================================================ LANG (항목3: z-index 상향 / 항목8: 글로브 아이콘) ============================================================ */ .intro-lang{ position:absolute; right:48px; top:50%; transform:translateY(-50%); z-index:60; } .intro-lang__cur{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--intro-ink); cursor:pointer; letter-spacing:.05em; } /* 항목8: 글로브 아이콘 (::before SVG) */ .intro-lang__globe{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex:0 0 auto; } .intro-lang__globe::before{ content:""; display:block; width:16px; height:16px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23243040' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='8'/%3E%3Cellipse cx='10' cy='10' rx='4' ry='8'/%3E%3Cline x1='2' y1='10' x2='18' y2='10'/%3E%3Cline x1='4' y1='6' x2='16' y2='6'/%3E%3Cline x1='4' y1='14' x2='16' y2='14'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:contain; } .intro-lang__cur::after{ content:""; width:6px; height:6px; border-right:1px solid #7b818b; border-bottom:1px solid #7b818b; transform:rotate(45deg); margin-top:-3px; flex:0 0 auto; } .intro-lang__list{ position:absolute; right:0; top:100%; margin-top:8px; background:#fff; border:1px solid var(--intro-line); min-width:96px; box-shadow:0 8px 24px rgba(0,0,0,.08); opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .2s ease; z-index:60; } .intro-lang:hover .intro-lang__list,.intro-lang.is-open .intro-lang__list{ opacity:1; visibility:visible; transform:translateY(0); } .intro-lang__list a{ display:block; padding:9px 16px; font-size:13px; color:#4b5563; } .intro-lang__list a:hover{ background:var(--intro-cream); color:var(--intro-gold); } /* ============================================================ HERO (항목1: 사선 가파름, 균일 높이, 라벨 좌정렬, 자세히보기 상시, 섬오름 위계) ============================================================ */ /* [2026-07-30] 한 화면 수용 위해 히어로 상단여백 축소(36→22) + 카드 620→540 */ .intro-hero{ position:relative; z-index:1; padding:22px 0 0; overflow-x:clip; } .intro-hero::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:linear-gradient(180deg,#faf7f1 0%,#f4efe6 62%,#f6f1e9 100%); z-index:-1; } /* [간격수정] 카피↔배너 더 붙임: head 하단여백 축소 */ .intro-hero__head{ text-align:center; margin-bottom:4px; } /* PSD: KoPubWorld Batang Medium(400), 80px, #3C3C3E */ /* [2026-07-30] 데스크탑 히어로 타이틀 80→64px 축소 후, 추가 요청으로 한 단계 더 축소(64→54px) */ .intro-hero__title{ font-family:'KoPub Batang',serif; font-weight:400; font-size:54px; line-height:1.08; letter-spacing:.01em; color:#3C3C3E; } /* PSD: Dotum Medium, 22px, #898A8C */ .intro-hero__desc{ margin-top:18px; font-size:22px; line-height:1.6; color:#898A8C; font-weight:400; } /* PSD 시안: 풀폭 3배너, 중앙(남대문) peak, 대각선 이음새 ∧ 구조 센트럴(좌)·섬오름(우) 하단 기준선 공유, 남대문(중앙)이 위로 솟음 align-items:flex-end → 세 배너 하단 맞춤, 중앙만 더 긴 높이로 위로 솟음 */ .intro-hero__cards{ position:relative; z-index:1; display:flex; align-items:flex-end; gap:0; width:100%; padding:0; margin:-28px 0 0; /* [간격수정] 배너 밴드를 카피쪽으로 당김(상단 클립 투명영역이 흡수) */ } /* 각 배너: 겹침 폭 분할(사선 이음새용). 중앙이 좌우를 덮으며 사선 이음새 형성 */ .intro-hero__card{ position:relative; overflow:hidden; filter:drop-shadow(0 18px 30px rgba(20,30,45,.26)); } /* PSD 시안 psd_hero_pc.png (1600x820) 정밀 측정: 3개 배너 모두 "/" 방향 동일 사선. 남대문만 더 높음(h=620). align-items:flex-end, off=120px. 센트럴: 좌x=50→y=214, 우이음새x=534→y=172 남대문: 좌이음새x=534→y=172, 우이음새x=1067→y=179 섬오름: 좌이음새x=1067→y=179, 우x=1550→y=125 */ /* 2026-07-29 Opus 재정합: PSD(인트로 pc-01.psd[0]) 픽셀 정밀측정 기반 전면 재보정. psd_full 좌표(공유 하단 baseline y=1299) 측정 상단 코너: 센트럴 : TL(0,562) → TR(715,499) "/" 우상향 남대문 : TL(760,562)→ TR(1310,506) "/" 우상향 섬오름 : TL(1339,581)→TR(1919,440) "/" 우상향(가장 가파름) → 3배너 모두 우상향 사선, 높이 거의 균등(중앙 봉우리/삼각형 아님). 이음새 노치: 좌TR(499)>중TL(562), 중TR(506)>우TL(581) 로 각 이음새에서 한 단 내려앉아 사선 이음새/입체감 형성. 클립%는 밴드높이(859px) 대비 비율. 높이는 3배너 균등(620) + align-items:flex-end 공유 baseline. */ /* 2026-07-29 Opus: 3배너 = 평행 "/" 사선 이음새의 스큐 평행사변형. psd_sec_hero.png(1920x1180, baseline y=1078) 픽셀 실측 코너 → 로컬%: 좌 : TL(0,562) TR(698,500) BR(559,1078) BL(0,1078) 중 : TL(682,565) TR(1320,510) BR(1199,1078) BL(559,1078) 우 : TL(1309,575) TR(1919,480) BR(1919,1078) BL(1199,1078) 두 이음새 모두 우상→좌하 평행 사선(하강할수록 좌로 ~130px). 봉우리/삼각형 아님. flex 폭(40/42/38%) + 음수 margin으로 박스를 겹쳐 사선이 정확히 맞물림. z: 좌<중<우 (상단 노치에서 앞 배너가 살짝 솟아 사선 이음새 입체감). */ /* 센트럴(좌) box 0~40% */ .intro-hero__card.is-central{ height:540px; flex:0 0 40%; clip-path:polygon(0% 16.8%, 89.3% 6.8%, 71.2% 100%, 0% 100%); /* [간격] 우측 사선을 남대문 좌변과 평행하게 0.6%컨테이너(~11px) 왼쪽으로 → 크림 대각선 간격 */ z-index:1; } /* 남대문(중앙) box 28~70% (margin-left:-12%) */ .intro-hero__card.is-namdaemun{ height:540px; flex:0 0 42%; margin-left:-12%; clip-path:polygon(17.9% 17.3%, 96.0% 8.4%, 80.6% 100%, 2.6% 100%); /* [간격] 우측 사선을 섬오름 좌변과 평행하게 0.6%컨테이너(~11px) 왼쪽으로 → 크림 대각선 간격. 좌변(17.9/2.6) 유지=라벨 패딩 보존 */ z-index:2; } /* 섬오름(우) box 62~100% (margin-left:-8%) */ .intro-hero__card.is-sumorum{ height:540px; flex:0 0 38%; margin-left:-8%; clip-path:polygon(16.3% 18.9%, 100% 3.5%, 100% 100%, 1.2% 100%); z-index:3; } .intro-hero__media{ position:absolute; inset:0; overflow:hidden; } .intro-hero__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .intro-hero__card:hover .intro-hero__media img{ transform:scale(1.06); } .intro-hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,21,35,0) 38%,rgba(11,21,35,.80) 100%); z-index:1; } .intro-hero__card:after{ content:""; position:absolute; inset:0; background:rgba(11,21,35,.0); transition:background .3s ease; z-index:2; } .intro-hero__card:hover:after{ background:rgba(11,21,35,.22); } /* 항목1: 라벨 좌하단 정렬 */ .intro-hero__label{ position:absolute; left:0; bottom:0; width:100%; padding:0 32px 60px 58px; text-align:left; color:#fff; z-index:3; } /* [라벨 가림 버그 수정] 중앙(남대문)·우(섬오름) 배너는 clip-path 좌변이 사선(위로 갈수록 우측으로 침범)이라 라벨 윗줄(브랜드명)이 잘림. 넓은 화면일수록 침범 px이 커져 더 심함. clip-path는 자식(라벨)까지 클립하므로 좌측 패딩을 '카드폭 대비 %'로 주어 모든 화면폭에서 사선 안쪽에 위치하게 함(센트럴은 좌변 수직이라 불필요). */ .intro-hero__card.is-namdaemun .intro-hero__label{ padding-left:9.5%; } .intro-hero__card.is-sumorum .intro-hero__label{ padding-left:8.5%; } /* PSD: 브랜드(작은 줄) Dotum Bold 24px, 지역명(큰 줄) Dotum Bold 40px, 흰색 */ .intro-hero__label em{ display:block; font-style:normal; font-weight:700; font-size:24px; letter-spacing:.01em; opacity:1; margin-bottom:4px; } .intro-hero__label strong{ display:block; font-size:40px; font-weight:700; letter-spacing:.01em; line-height:1.1; } /* 항목1: 자세히보기 → 항상 표시 (opacity:0 제거) */ /* PSD: "자세히 보기 →" Dotum Bold 16px 흰색 */ .intro-hero__more{ display:inline-block; margin-top:16px; font-size:16px; font-weight:700; letter-spacing:.02em; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.6); opacity:1; transform:translateY(0); transition:all .3s ease; } .intro-hero__card:hover .intro-hero__more{ opacity:1; transform:translateY(0); border-bottom-color:rgba(255,255,255,.9); } /* 항목9: 섬오름만 위계 반전 — 지역명(strong.intro-hero__label-region) 크게, 브랜드(em.intro-hero__label-brand) 작게 */ .intro-hero__label.is-sumorum-label .intro-hero__label-region{ display:block; font-size:40px; font-weight:700; letter-spacing:.01em; font-style:normal; opacity:1; line-height:1.1; margin-bottom:4px; } .intro-hero__label.is-sumorum-label .intro-hero__label-brand{ display:block; font-style:normal; font-size:24px; letter-spacing:.01em; opacity:1; margin-bottom:0; font-weight:700; order:-1; } /* ============================================================ RESERVE BAR (항목2: 테두리 박스, 라벨+입력박스, gap 방식 / 항목7: 버튼 크기/아이콘) ============================================================ */ /* 항목2: 배너와 겹침 — margin-top 음수로 예약바가 히어로 아랫부분과 겹침 */ /* 시안처럼 예약박스가 배너 하단을 크게 덮어 겹침(44px) */ /* [간격수정] 예약박스↔오퍼 간격 과다(하단74+오퍼상단76=150px) → 하단 34px 로 축소 */ .intro-reserve{ position:relative; z-index:5; margin-top:-44px; padding:0 40px 34px; } .intro-reserve__inner{ position:relative; max-width:1464px; margin:0 auto; background:#fff; box-shadow:0 26px 54px rgba(20,30,45,.16); border:1px solid #eee7dc; border-radius:10px; /* 항목2: 더 둥근 외곽 */ padding:28px 28px; } .intro-reserve .tab{ display:none; } /* 근본정렬: 상단정렬 + 라벨 고정높이 + 박스 48px 고정 → 필드 높이 편차와 무관하게 라벨/박스 항상 일치 */ .intro-reserve #frm-reservation{ display:flex; align-items:flex-start; gap:16px; padding:0; flex-wrap:nowrap; } /* 항목2: 각 필드 = 라벨(위) + 테두리 있는 입력박스 */ .intro-reserve__field{ position:relative; display:flex; flex-direction:column; gap:0; flex:1 1 0; } .intro-reserve__field.is-hotel{ flex:1.6 1 0; } .intro-reserve__field.input-box{ flex:1 1 0; } /* 항목2: 라벨 스타일 — 위, 작은 회색, 좌측정렬 */ /* PSD: 예약 라벨 Dotum Medium, #6B7576, ~15px */ .intro-reserve__lb{ display:block; height:22px; line-height:22px; font-size:15px; color:#6B7576; letter-spacing:.01em; margin:0 0 10px; font-weight:400; } /* 항목2: 호텔선택 select — 테두리 있는 둥근 박스 */ .intro-reserve .select{ position:relative; display:block; height:48px; } .intro-reserve .select .label{ display:none; } .intro-reserve .select select{ position:absolute; /* 4방향 inset+margin0 으로 컨테이너에 꽉 채움 → select 밀림(7px) 원천 제거 */ top:0; right:0; bottom:0; left:0; margin:0; width:auto; height:auto; border:1px solid #d9d3c8; border-radius:6px; background:#fff; /* [2026-07-30] select 는 기본적으로 페이지 font-family 를 상속하지 않아 시스템 UI 폰트로 렌더된다. Windows Chrome 에서 KoPub-first 스택으로도 이 닫힌 select("프레이저 플레이스 남대문 서울")가 깨지는 문제가 반복 재현되어, 시스템 한글폰트를 최우선으로 명시(맑은고딕 등) → 어떤 OS 에서도 네이티브 폰트로 또렷하게 렌더. !important : select 는 브라우저 폼 컨트롤 기본 스타일(UA stylesheet)이 font-family 를 강제하는 경우가 있어 다른 전역 스타일보다 확실히 우선하도록 방어적으로 고정(전역 파일은 건드리지 않음). */ font-family:'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','Noto Sans KR','KoPub Dotum',sans-serif !important; font-size:15px; font-weight:500; color:var(--intro-ink); cursor:pointer; -webkit-appearance:none; appearance:none; padding:0 36px 0 14px; line-height:46px; vertical-align:top; } /* 드롭다운 목록(option) 펼침 팝업은 네이티브(OS)라 웹폰트(KoPub) 사용 불가 → 시스템 한글폰트만 사용(위 select 와 동일 스택으로 통일). */ .intro-reserve .select select option{ font-family:'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','Noto Sans KR',sans-serif !important; color:#243040; } .intro-reserve .select:after{ content:""; position:absolute; right:14px; top:50%; width:7px; height:7px; border-right:1px solid #9aa0a8; border-bottom:1px solid #9aa0a8; transform:translateY(-50%) rotate(45deg); pointer-events:none; } /* 항목2: 날짜 input — 테두리 있는 둥근 박스, 달력 아이콘 우측 배치, 세로 중앙 정렬 */ .intro-reserve .input-box .intro-reserve__date-wrap{ position:relative; display:flex; align-items:center; border:1px solid #d9d3c8; border-radius:6px; height:48px; background:#fff; padding:0 44px 0 14px; } .intro-reserve .input-box input{ display:block; width:100%; border:none; background:transparent; font-size:15px; color:var(--intro-ink); font-weight:500; cursor:pointer; padding:0; line-height:1; height:auto; outline:none; } .intro-reserve .input-box .intro-reserve__cal-icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; pointer-events:none; background:url('/assets/img/main/ico-calendar.png') no-repeat center/contain; display:block; flex:0 0 auto; } .intro-reserve dl{ display:none; } .intro-reserve__opts{ display:none; position:absolute; left:0; top:100%; z-index:20; width:100%; min-width:110px; background:#fff; border:1px solid #ece7de; border-top:none; box-shadow:0 10px 24px rgba(20,30,45,.10); } .intro-reserve dl:hover .intro-reserve__opts,.intro-reserve dl.is-open .intro-reserve__opts{ display:block; } .intro-reserve dl dd{ display:block; text-align:center; padding:11px 0; cursor:pointer; font-size:14px; } .intro-reserve dl dd:hover{ background:var(--intro-cream); } .intro-reserve dl dd + dd{ border-top:1px solid #f0ebe2; } /* 항목7: 버튼 크기 축소(height 46px), 아이콘 ::before */ /* 버튼은 라벨(18)+여백(8)=26px 만큼 내려 박스 행(48px)과 정확히 일치 */ /* [정렬수정] 라벨(height22+margin-bottom10=32px)만큼 내려 입력박스 행과 버튼 상단을 정확히 일치(기존 26 → 6px 높이 뜸) */ .intro-reserve__actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-top:32px; } .intro-reserve__actions button, .intro-reserve__promo{ display:inline-flex; align-items:center; gap:8px; justify-content:center; background:#6B7576; color:#fff; border:none; height:48px; padding:0 20px; font-size:14px; font-weight:500; cursor:pointer; border-radius:6px; letter-spacing:.02em; white-space:nowrap; text-decoration:none; transition:background .2s ease; } .intro-reserve__actions button:hover, .intro-reserve__promo:hover{ background:#565f60; } /* 프로모션(a 링크) 버튼: 클릭/방문(:visited) 후에도 텍스트 흰색 유지 (검게 변하는 문제 수정) */ .intro-reserve__actions .intro-reserve__promo, .intro-reserve__actions .intro-reserve__promo:link, .intro-reserve__actions .intro-reserve__promo:visited, .intro-reserve__actions .intro-reserve__promo:hover, .intro-reserve__actions .intro-reserve__promo:focus, .intro-reserve__actions .intro-reserve__promo:active{ color:#fff; } /* 항목7: 좌측 아이콘 — PSD는 캘린더(검색버튼), 태그(프로모션버튼) */ .intro-reserve__btn-search::before{ content:""; flex:0 0 auto; width:16px; height:16px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='2.2' y='4.2' width='15.6' height='13.6' rx='2'/%3E%3Cline x1='2.2' y1='8.4' x2='17.8' y2='8.4'/%3E%3Cline x1='6.4' y1='2.2' x2='6.4' y2='6'/%3E%3Cline x1='13.6' y1='2.2' x2='13.6' y2='6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:contain; } .intro-reserve__btn-promo::before{ content:""; flex:0 0 auto; width:16px; height:16px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='M3 10.5L10.5 3l6.5 0 0 6.5L10.5 17Z'/%3E%3Ccircle cx='14' cy='6' r='1.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:contain; } /* 항목7: 우측 > 화살표 */ .intro-reserve__actions button::after, .intro-reserve__promo::after{ content:""; flex:0 0 auto; width:6px; height:6px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); opacity:.75; } /* ============================================================ SPECIAL OFFER ============================================================ */ .intro-offer{ position:relative; background:radial-gradient(120% 90% at 50% 0%,#0e1b2a 0%,#070f18 55%,#02070c 100%); padding:54px 0 90px; overflow:hidden; } /* [2026-07-30] desc(설명 카피) 삭제분만큼 슬라이더가 위로 올라오도록 헤드 하단여백 축소(48→20) */ .intro-offer__head{ text-align:center; color:#fff; margin-bottom:20px; } /* PSD: KoPubWorld Batang Medium(400), 70px, 흰색 */ .intro-offer__title{ font-family:'KoPub Batang',serif; font-size:70px; font-weight:400; letter-spacing:.02em; } /* 항목5: 서브타이틀 좌우 양쪽 가로선 */ /* PSD: 'PANORAMA LOUNGE & BAR' 텍스트는 은은한 실버/그레이(골드 아님), 양옆 — 선만 골드. */ .intro-offer__subtitle{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; font-size:14px; letter-spacing:.32em; color:#D6D6D6; font-weight:400; padding-top:0; } .intro-offer__subtitle::before, .intro-offer__subtitle::after{ content:""; flex:0 0 40px; height:1px; background:var(--intro-gold); opacity:.8; } /* 항목6: 설명 카피 가운데 정렬 */ /* PSD: 설명문은 더 밝은 중립 그레이 + 약간 큼 */ .intro-offer__desc{ margin-top:20px; font-size:15px; line-height:1.9; color:#C7CDD3; font-weight:400; text-align:center; } .intro-offer__slider{ position:relative; max-width:1680px; margin:0 auto; padding:0 30px; } /* [DEV] 자체 캐러셀(Swiper 미사용, 의존성 없음). viewport=overflow:hidden 뷰포트, track=실카드가 가로로 나열된 flex 트랙(클론 없음). intro.js 가 "활성 인덱스"만 상태로 갖고, 매 렌더마다 track.transform 을 실제 DOM 레이아웃(offsetLeft/offsetWidth) 기준으로 다시 계산해 적용한다(idempotent) → resize/scroll 이 수백 번 발생해도 상태가 누적되지 않고 항상 동일한 결과. 정방형 카드 유지(944² 원본과 동일 비율) → object-fit:cover 가 어떤 폭에서도 크롭 없이 카드에 꽉 참(글자 잘림 원천 차단). */ .intro-offer__viewport{ overflow:hidden; padding:44px 0; position:relative; touch-action:pan-y; } /* 첫 렌더(JS is-ready) 전 카드가 잠깐 미정렬 상태로 보이는 플래시 방지. JS 가 즉시 실행되지만 안전장치로 2.5초 뒤 애니메이션으로 강제 노출(스크립트 오류 시에도 슬라이더가 영구히 숨지 않게). */ @keyframes intro-offer-reveal-fallback{ to{ opacity:1; } } .intro-offer__viewport{ opacity:0; transition:opacity .25s ease; animation:intro-offer-reveal-fallback 0s linear 2.5s forwards; } .intro-offer__viewport.is-ready{ opacity:1; } /* PSD: 코버플로우, 중앙 지배+중앙정렬, 좌우 살짝 작고 어둡게. 순환(무한) 배치: 카드를 절대배치하고 JS 가 활성 기준 "순환 부호거리 d"(…-1,0,+1…)로 translateX(d*step) 를 매 렌더마다 다시 계산 → 어느 카드가 중앙이든 좌(-1)·중앙(0)·우(+1) 3개가 항상 채워진다(첫 카드가 중앙이어도 좌측이 비지 않음). 정반대 카드(+n/2)는 화면 밖 먼 우측으로 나가 뷰포트 overflow 로 잘린다. 클론 DOM 없음 → resize 수백 번에도 누적 붕괴 불가. */ .intro-offer__track{ position:relative; width:100%; transform:translateX(0); transition:transform .5s ease; will-change:transform; cursor:grab; } .intro-offer__track.is-dragging{ transition:none; cursor:grabbing; } .intro-offer__card{ position:absolute; left:50%; top:50%; width:500px; height:500px; border-radius:6px; overflow:hidden; opacity:.93; transform:translate(-50%,-50%) scale(.9); transition:opacity .5s ease, transform .5s ease, box-shadow .5s ease; box-shadow:0 20px 44px rgba(0,0,0,.45); } .intro-offer__card.is-active{ opacity:1; z-index:2; box-shadow:0 34px 70px rgba(0,0,0,.6); } .intro-offer__card a{ display:block; width:100%; height:100%; position:relative; overflow:hidden; } .intro-offer__card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; -webkit-user-drag:none; user-select:none; } /* 중앙(활성) 카드에 마우스를 올렸을 때만 우아하게 확대 */ .intro-offer__card.is-active:hover img{ transform:scale(1.07); } .intro-offer__nav{ display:block; position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.04); cursor:pointer; z-index:5; transition:all .2s ease; } .intro-offer__nav:hover{ background:var(--intro-gold); border-color:var(--intro-gold); } .intro-offer__nav:before{ content:""; position:absolute; top:50%; left:50%; width:9px; height:9px; border-top:1px solid #fff; border-right:1px solid #fff; } .intro-offer__nav.is-prev{ left:8px; } .intro-offer__nav.is-prev:before{ transform:translate(-30%,-50%) rotate(-135deg); } .intro-offer__nav.is-next{ right:8px; } .intro-offer__nav.is-next:before{ transform:translate(-70%,-50%) rotate(45deg); } .intro-offer__dots{ text-align:center; margin-top:34px; } .intro-offer__dots button{ display:inline-block; width:8px; height:8px; padding:0; margin:0 5px; border:0; border-radius:50%; background:#5b6a7c; opacity:1; cursor:pointer; transition:all .25s ease; vertical-align:middle; } .intro-offer__dots button.is-active{ background:var(--intro-gold); width:22px; border-radius:4px; } /* 스와이프 힌트: 시안(PSD)엔 PC에도 노출 → display:block, 색 #C9CACA, 14px */ /* PSD: 힌트 문구 좌측에 화살표+스와이프(손가락) 아이콘 */ .intro-offer__hint{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:26px; font-size:14px; letter-spacing:.02em; color:#C9CACA; } /* PSD: 좌향 화살표(←) + 한손가락 탭 제스처(검지 위로+상단 반원 아크, 나머지 손가락 말림) */ .intro-offer__hint-icon{ flex:0 0 auto; display:inline-block; vertical-align:middle; width:44px; height:24px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 26' fill='none' stroke='%23C9CACA' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='13' x2='15' y2='13'/%3E%3Cpath d='M8 8 L2 13 L8 18'/%3E%3Cpath d='M24.6 7a4.6 4.6 0 0 1 9.2 0'/%3E%3Cpath d='M29.2 5.4V16'/%3E%3Cpath d='M29.2 13.2a1.5 1.5 0 0 1 3 0V14.2'/%3E%3Cpath d='M32.2 13.4a1.5 1.5 0 0 1 2.9 0V15'/%3E%3Cpath d='M35.1 14a1.5 1.5 0 0 1 2.8 0V17a5.6 5.6 0 0 1-5.6 5.6h-1.3a4.8 4.8 0 0 1-3.4-1.4L25 18.4a1.7 1.7 0 0 1 2.4-2.4L29.2 17'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:contain; } /* ============================================================ FOOTER (항목4: 좌 연락처+SNS / 우 로고 4개) ============================================================ */ /* 개정 시안(bottom_pc.psd): 배경 #04080E, 텍스트 #738789, Dotum Medium 14px */ .intro-footer{ background:#04080E; color:#738789; font-size:14px; padding:56px 0 44px; } .intro-footer__inner{ max-width:1400px; margin:0 auto; padding:0 60px; display:flex; align-items:center; justify-content:space-between; gap:40px; } /* 좌: 회사정보 + 저작권 (개정 시안) */ .intro-footer__info{ flex:0 1 auto; } .intro-footer__company{ font-size:14px; line-height:1.75; color:#738789; letter-spacing:.01em; } .intro-footer__copyright{ margin-top:20px; font-size:14px; line-height:1.6; color:#738789; letter-spacing:.01em; } /* 우: 로고 4개 가로 배치 */ .intro-footer__logos{ flex:0 1 auto; display:flex; align-items:center; gap:36px; flex-wrap:nowrap; } .intro-footer__logos a{ display:inline-flex; align-items:center; justify-content:center; } /* 리버스(화이트) 로고 사용 → 필터 불필요 */ .intro-footer__logos img{ height:44px; width:auto; opacity:.92; transition:opacity .2s ease; } .intro-footer__logos a:hover img{ opacity:1; } /* DSDL 로고는 어두워 밝기 보정 */ .intro-footer__logo-dsdl{ filter:grayscale(1) brightness(1.6); } /* THE GRAND SUMORUM 은 가로로 긴 로고 → 높이 축소 */ .intro-footer__logo-sumorum{ height:22px !important; } /* THE GRAND sumorum 텍스트 대체 로고 */ .intro-footer__logo-text{ display:block; text-align:center; line-height:1.3; font-size:10px; letter-spacing:.18em; color:#6b7886; text-transform:uppercase; opacity:.8; white-space:nowrap; } .intro-footer__logo-text strong{ display:block; font-size:16px; font-weight:700; letter-spacing:.08em; color:#8b97a6; font-family:'KoPub Batang',serif; font-style:italic; } .intro-footer__logos a:hover .intro-footer__logo-text, .intro-footer__logos a:hover .intro-footer__logo-text strong{ color:#c9a96e; opacity:1; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1280px){ .intro-hero__title{ font-size:54px; } .intro-hero__card.is-namdaemun{ height:540px; } .intro-hero__card.is-central,.intro-hero__card.is-sumorum{ height:540px; } .intro-footer__inner{ padding:0 40px; gap:32px; } .intro-footer__logos{ gap:28px; } .intro-footer__logos img{ height:40px; } } @media (max-width:1024px){ .intro-hero{ padding:54px 0 0; } .intro-hero__title{ font-size:46px; } .intro-hero__card.is-namdaemun{ height:440px; } .intro-hero__card.is-central,.intro-hero__card.is-sumorum{ height:440px; } .intro-hero__media img{ transform:none; } .intro-hero__card:hover .intro-hero__media img{ transform:scale(1.06); } .intro-reserve #frm-reservation{ gap:12px; flex-wrap:wrap; } .intro-reserve__field.is-hotel{ flex:1 1 100%; } .intro-offer__slider{ padding:0 54px; } /* [글자 잘림 수정] 오퍼 이미지가 정방형(944²)으로 교체됐는데(위 469행 참고) 이 구간만 세로형 카드(320x464)로 남아있어 object-fit:cover 가 좌우를 크롭 → 좌측 정렬된 내장 텍스트/VIEW MORE 가 잘림(재현: 900px 폭 스크린샷에서 "SUMMER"→"MMER", "VIEW MORE"→"ORE" 등 확인). 다른 구간(768/430)과 동일하게 정방형으로 맞춰 크롭 자체를 없앤다. */ .intro-offer__card{ width:320px; height:320px; } .intro-footer__inner{ flex-direction:column; align-items:flex-start; gap:36px; } .intro-footer__logos{ flex-wrap:wrap; gap:24px; } .intro-footer__logos img{ height:36px; } } /* 태블릿/모바일 */ @media (max-width:768px){ .intro-inner,.intro-footer__inner{ padding-left:18px; padding-right:18px; } /* order (모바일 시안) : 공지 → 예약검색 → 로고+언어 → 히어로 → 오퍼 → 푸터. 시안은 공지바(최상단)와 로고밴드(예약검색 아래)를 분리한다. topbar/inner 를 display:contents 로 해체해 공지·로고·언어를 페이지 레벨 플렉스 아이템으로 끌어올려 재정렬. */ .intro-topbar,.intro-topbar__inner{ display:contents; } .intro-notice{ order:1; } .intro-reserve{ order:2; } .intro-logo{ order:3; } .intro-lang{ order:4; } .intro-hero{ order:5; } .intro-offer{ order:6; } .intro-footer{ order:7; } /* 공지바 : 시안대로 전폭 다크 바 + 흰 텍스트 + 흰 버튼(가운데 정렬) */ .intro-notice{ position:static; transform:none; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:none; margin:0; padding:12px 18px; background:#000; border:none; color:#fff; font-size:13px; } .intro-notice__tag{ color:#fff; } .intro-notice__text{ color:#fff; overflow:visible; white-space:normal; } /* [수정] PSD 모바일: 확인하기 = 다크그레이(#303030) 박스 + 라이트그레이 텍스트 (흰색 아님) */ .intro-notice__btn{ background:#303030; color:#c8c8c8; } .intro-notice__btn:hover{ background:#3d3d3d; } /* 로고 밴드(흰 배경) : 로고 중앙 + 언어(KR) 를 밴드 우측에 겹쳐 배치 (height:0 로 히어로 위치 불변) */ .intro-logo{ width:100%; text-align:center; padding:18px 0; background:#fff; } .intro-logo img{ height:34px; display:inline-block; } .intro-lang{ position:static; transform:translateY(-46px); align-self:flex-end; height:0; margin:0 18px 0 0; z-index:30; } /* 모바일 예약 : 넉넉한 간격 (컨텐츠 붙음 해소), 성인/어린이는 데스크탑·시안과 동일 숨김 */ .intro-reserve{ margin-top:0; padding:16px 14px 14px; } .intro-reserve__inner{ box-shadow:0 8px 22px rgba(20,30,45,.10); overflow:visible; padding:18px 16px; border-radius:8px; } .intro-reserve #frm-reservation{ flex-wrap:wrap; padding:0; gap:14px; align-items:flex-start; } .intro-reserve__field{ padding:0; border-top:none; } .intro-reserve__field.is-hotel{ flex:1 1 100%; } .intro-reserve__field.is-hotel .intro-reserve__lb{ display:block; } .intro-reserve__field.input-box{ flex:1 1 calc(50% - 7px); } .intro-reserve__lb{ height:auto; line-height:1.3; margin:0 0 6px; } .intro-reserve .select{ height:46px; } .intro-reserve .select select{ height:46px; line-height:46px; font-size:14px; } .intro-reserve .input-box .intro-reserve__date-wrap{ height:46px; } .intro-reserve .input-box input{ font-size:14px; } .intro-reserve dl{ display:none; } .intro-reserve__actions{ flex:1 1 100%; margin-top:2px; margin-left:0; padding:0; gap:10px; } /* min-width:0 로 flex 아이템이 컨텐츠보다 작게 줄어들 수 있게 해 좁은 폭에서 넘침 방지 */ .intro-reserve__actions > *{ flex:1 1 0; min-width:0; justify-content:center; text-align:center; height:48px; padding:0 14px; font-size:13px; gap:6px; letter-spacing:.01em; } /* 모바일에선 우측 화살표를 숨겨 좁은 폭에서 버튼 텍스트 넘침 여유 확보 */ .intro-reserve__actions button::after,.intro-reserve__promo::after{ display:none; } .intro-hero{ padding:34px 0 46px; } .intro-hero::before{ bottom:0; } .intro-hero__head{ margin-bottom:24px; } .intro-hero__title{ font-size:42px; } .intro-hero__desc{ font-size:16px; margin-top:16px; } .intro-hero__cards{ gap:0; padding:0; } .intro-hero__card{ filter:drop-shadow(0 10px 18px rgba(20,30,45,.22)); } /* [모바일 배너 높이] PSD 모바일 배너 밴드는 뷰포트폭의 ~0.8배로 길쭉 → 고정 280px는 짧음. 시안 비율(가시밴드≈0.8×폭, 상단 사선클립 감안 box≈0.95×폭)에 맞춰 폭비례(vw)로 상향, 태블릿폭 과대는 상한으로 제한 */ .intro-hero__card.is-namdaemun{ height:95vw; max-height:400px; } .intro-hero__card.is-central,.intro-hero__card.is-sumorum{ height:95vw; max-height:400px; } .intro-hero__media img{ transform:none; } .intro-hero__label{ padding:0 8px 12px 16px; } .intro-hero__label em{ font-size:10px; margin-bottom:3px; } .intro-hero__label strong{ font-size:14px; } .intro-hero__label.is-sumorum-label .intro-hero__label-region{ font-size:14px; } .intro-hero__label.is-sumorum-label .intro-hero__label-brand{ font-size:10px; } /* [모바일] PSD 모바일 배너에는 "자세히 보기 →" 미표시 → 숨김(라벨 지역/브랜드만) */ .intro-hero__more{ display:none; } .intro-offer{ padding:50px 0 60px; } .intro-offer__title{ font-size:46px; } .intro-offer__subtitle::before,.intro-offer__subtitle::after{ flex:0 0 24px; } .intro-offer__slider{ padding:0 12px; } .intro-offer__card{ width:280px; height:280px; } .intro-offer__nav{ display:none; } /* [모바일 버그수정] display:block 이 힌트를 좌측정렬시킴 → 기본 flex 중앙정렬 유지(시안=중앙) */ .intro-offer__hint{ display:flex; justify-content:center; flex-wrap:nowrap; font-size:13px; gap:8px; } /* 모바일 푸터(bottom.psd): 텍스트 중앙정렬 + 로고 한 줄 중앙 */ .intro-footer{ padding:44px 0 30px; } .intro-footer__inner{ flex-direction:column; align-items:center; gap:28px; padding:0 20px; } .intro-footer__info{ flex:1 1 100%; width:100%; min-width:0; text-align:center; } /* 로고 4개 한 줄 확정: 균등 4셀(flex:1 1 0)에 각 이미지를 contain 으로 넣어 어떤 폭(≤375 포함)에서도 합계가 100%를 넘지 않게 → 우측 잘림 원천 차단. sumorum 의 height:22px !important 를 여기서 무력화(폭 과대 방지). */ .intro-footer__logos{ flex-wrap:nowrap; justify-content:center; align-items:center; gap:10px; width:100%; } .intro-footer__logos a{ flex:1 1 0; min-width:0; display:flex; justify-content:center; } .intro-footer__logos img{ height:auto; width:100%; max-height:20px; object-fit:contain; } .intro-footer__logo-sumorum{ height:auto !important; max-height:20px; } } /* 소형 폰: 시안(2버튼 가로 나란히)을 유지하되 좁은 폭에서 넘치지 않도록 여백/폰트만 축소 */ @media (max-width:480px){ .intro-reserve__actions{ gap:8px; } .intro-reserve__actions > *{ height:46px; font-size:13px; padding:0 10px; letter-spacing:0; } } @media (max-width:430px){ .intro-hero__title{ font-size:34px; } .intro-hero__card.is-namdaemun{ height:95vw; } .intro-hero__card.is-central,.intro-hero__card.is-sumorum{ height:95vw; } .intro-offer__card{ width:250px; height:250px; } /* 초소형: 푸터 로고 간격만 좁힘(폭 부족 시 축소는 flex-shrink+object-fit 로 처리) */ .intro-footer__logos{ gap:8px; } .intro-footer__logos img{ height:20px; } } /* ============================================================ [DEV] 모바일(폰 ≤600px) 통이미지 오버레이 - 상단 공지 ~ Special Offer/Promotion&Event 헤더까지를 시안 통이미지(mobile.jpg)로 대체. - 그 아래 Special Offer 슬라이더/푸터는 기존 레이아웃 유지. - 좌표(%) 핫스팟으로 링크/호텔선택/체크인·아웃 달력/검색·프로모션 동작. - 예약폼(.intro-reserve)은 intro.js 가 .intro-mobile 안으로 이동(핸들러·datepicker 유지). - 태블릿(601~)은 미적용(기존 반응형 유지). 파일 최하단에 두어 768/480/430 규칙보다 우선. ============================================================ */ .intro-mobile{ display:none; } @media (max-width:600px){ /* .intro-reserve 를 이미지 위에 절대배치하기 위한 기준 */ .intro-page{ position:relative; } /* 통이미지 표시 (order:0 → 페이지 최상단) */ .intro-mobile{ display:block; order:0; position:relative; width:100%; line-height:0; } .intro-mobile__img{ width:100%; height:auto; display:block; } /* 이미지로 대체되는 영역 숨김 (히어로, 스페셜오퍼 헤더) — 통이미지에 이미 포함됨 */ .intro-page > .intro-hero{ display:none !important; } .intro-offer__head{ display:none !important; } /* [260810] 공지바만 통이미지 "위에" 실제 요소로 노출(태블릿 다크바 스타일 상속). 로고는 통이미지에 이미 포함되므로 상단바 로고는 숨겨 중복을 없애고, 언어선택기는 상단바가 아니라 "이미지 속 로고 우측"에 오버레이(.intro-mobile__lang)로 배치한다. (≤768 의 display:contents 로 공지/로고/언어가 페이지 플렉스 아이템이 되므로 order 로만 정렬) */ .intro-notice{ order:-3; } .intro-logo{ display:none !important; } .intro-topbar .intro-lang{ display:none !important; } /* [색맞춤] 통이미지 하단 Special Offer 배경(#020C16, flat)과 그 아래 라이브 오퍼 섹션(쇼룸) 배경 일치. 라이브 기본은 radial-gradient 라 상단이 밝게 떠 이음새 색이 어긋남 → 모바일만 flat 로 통일. [간격축소] 타이틀(통이미지)~슬라이더 사이 여백이 과함 → 상단패딩 축소. 스와이퍼 84px 상하패딩은 활성 슬라이드 scale(1.14) 미절림용이지만 작은 모바일 슬라이드엔 과하므로 축소. */ .intro-offer{ background:#020c16 !important; padding-top:6px !important; padding-bottom:34px !important; } .intro-offer__viewport{ padding:32px 0 !important; } /* 순수 네비 핫스팟 (좌표는 인라인 style 로 지정) */ .intro-mobile__hs{ position:absolute; margin:0; padding:0; border:0; background:transparent; cursor:pointer; z-index:5; display:block; -webkit-tap-highlight-color:rgba(0,0,0,.06); } /* 달력 선택값 미러 텍스트 (체크인/아웃 슬롯 위 표시) */ .intro-mobile__dateval{ position:absolute; z-index:7; margin:0; display:flex; align-items:center; justify-content:center; font-family:'KoPub Dotum','Noto Sans KR',sans-serif; font-size:12px; font-weight:500; color:#3a4350; letter-spacing:-.02em; line-height:1; pointer-events:none; white-space:nowrap; } /* ── 예약폼 : 이미지 위로 절대배치(투명 오버레이) ── [260810] intro.js 가 모바일에서 .intro-reserve 를 .intro-mobile(=이미지) 안으로 이동시키므로 아래 position:absolute; top:0 은 "이미지 상단" 기준이다(상단바를 위에 얹어도 폭 무관 정합 유지). 좌표는 새 통이미지(mobile_new.jpg 567×1178) 실측 vw. 개별 컨트롤만 투명화해 클릭·datepicker·submit 유지. */ .intro-reserve{ position:absolute; top:0; left:0; width:100%; height:0; order:0; margin:0; padding:0; background:none; box-shadow:none; z-index:6; pointer-events:none; } .intro-reserve__inner{ position:static; margin:0; padding:0; background:none; box-shadow:none; border:0; border-radius:0; overflow:visible; } #frm-reservation{ position:static; margin:0; padding:0; display:block; gap:0; } .intro-reserve .tab, .intro-reserve__lb, .intro-reserve dl, .intro-reserve__cal-icon{ display:none !important; } /* 개별 필드는 이미지 좌표(vw)에 절대배치, 필드만 클릭 허용 */ .intro-reserve__field{ position:absolute; margin:0; padding:0; border:0; background:none; pointer-events:auto; } /* [260810] 호텔 선택 드롭다운 : 새 통이미지(mobile_new.jpg 567×1178) 최상단 흰 영역 "호텔 선택 ▽"(y≈0~65px) */ .intro-reserve__field.is-hotel{ left:0; top:0; width:100%; height:11.5vw; } .intro-reserve .select, .intro-reserve__field.is-hotel .select{ width:100%; height:100%; background:none !important; border:0 !important; box-shadow:none !important; } .intro-reserve__field.is-hotel select{ width:100%; height:100%; opacity:0 !important; -webkit-appearance:none; appearance:none; border:0; color:transparent !important; background:transparent !important; text-shadow:none !important; } /* 드롭다운 목록(펼침 시 네이티브 팝업)은 정상 색+폰트로 노출(닫힌 select 자체만 이미지 정합을 위해 투명화) */ .intro-reserve__field.is-hotel select option{ font-family:'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','Noto Sans KR',sans-serif !important; color:#243040; } .intro-reserve__field.is-hotel .label{ display:none !important; } /* 이미지에 이미 드롭다운 ▽ 화살표가 있으므로, 라이브 select 의 CSS 화살표(:after)는 모바일에서 숨김(중복 제거) */ .intro-reserve .select:after{ display:none !important; } /* 체크인(좌) / 체크아웃(우) — 탭하면 jQuery UI datepicker 팝업. 이미지 y≈12.2%~16.6%. ⚠️ 기본 date-wrap(.intro-reserve .input-box .intro-reserve__date-wrap = 0,3,0)이 흰배경/테두리를 주므로 동일 이상 specificity + !important 로 완전 투명화해야 이미지의 "체크인/체크아웃+아이콘"이 보인다. */ /* [260810] 새 통이미지엔 체크인/체크아웃 필드가 없음 → 모바일 오버레이 제거. (기본값 내일/모레는 welcome-intro.js 가 자동입력하므로 숨겨도 최저가검색 정상 동작) */ .intro-reserve__field.input-box{ display:none !important; } .intro-reserve .input-box .intro-reserve__date-wrap{ width:100%; height:100%; background:none !important; border:0 !important; border-radius:0 !important; padding:0 !important; } .intro-reserve .input-box input.date{ width:100%; height:100%; margin:0; padding:0; border:0 !important; background:transparent !important; color:transparent !important; opacity:0 !important; cursor:pointer; } /* [260810] 호텔 최저가 검색(좌) / 객실 프로모션(우) : 새 통이미지 회색 버튼 밴드(y≈72~145px) */ .intro-reserve__actions{ position:absolute; left:2.6%; top:12.7vw; width:94.8%; height:12.5vw; display:flex; gap:1.1%; margin:0; padding:0; pointer-events:none; } .intro-reserve__actions > *{ flex:1 1 0; min-width:0; height:100%; margin:0; padding:0; border:0; background:none; opacity:0; pointer-events:auto; } /* ── 상단 공지바 : 통이미지 최상단 검정 바(박힌 텍스트)를 실제 퍼블리싱 오버레이로 대체 ── .intro-notice 클래스를 그대로 재사용해 위 @media(max-width:768px) 의 다크바 스타일 (background:#000/색상/버튼 톤/0건 시 display:none)을 그대로 상속받고, 여기서는 이미지 위 절대배치 + 폭 100% + 정확한 바 높이만 추가한다(중복 스타일 최소화). 바 높이 17.2vw = mobile.jpg(567×1332) 실측 픽셀 경계(검정→흰색 전환 y≈97~98px)/567. */ /* line-height:1.3 명시 : .intro-mobile{line-height:0}(이미지 하단 여백제거용)이 상속되어 내부 텍스트(태그/제목/버튼)의 라인박스가 0으로 눌려 안 보이는 문제 방지 */ .intro-mobile__notice{ position:absolute; left:0; top:0; width:100%; height:17.2vw; z-index:8; padding:0 4.4vw; gap:2vw; line-height:1.3; } /* 위 768px 규칙이 white-space:normal/overflow:visible 로 풀어두므로(태블릿 줄바꿈 허용), ≤600 통이미지 오버레이에서는 한 줄 말줄임으로 다시 좁혀 이미지 폭 안에서 넘치지 않게 한다. max-width:none 으로 PC용 .intro-notice__text{max-width:220px} 캡을 취소 → 남은 flex 공간을 꽉 채워 사용. */ .intro-mobile__notice .intro-notice__text{ flex:1 1 auto; min-width:0; max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .intro-mobile__notice .intro-notice__tag{ flex:0 0 auto; } .intro-mobile__notice .intro-notice__btn{ flex:0 0 auto; font-size:11px; padding:5px 11px; white-space:nowrap; } /* ── 언어선택기 오버레이 : 통이미지 속 로고(FRASERPLACE, 객실 프로모션 버튼 아래) 우측에 배치 ── .intro-lang 클래스 재사용(데스크탑과 동일 마크업/링크) → intro.js 의 $('.intro-lang__cur') 클릭 토글이 이 요소도 자동 처리(JS 무변경). [260810] 새 통이미지(mobile_new.jpg 567×1178) 로고 실측 y≈200px → top 200/567≈35vw, 로고 우측 끝(우측 여백 5%)에 세로 중앙정렬. .intro-mobile__lang.intro-lang 2클래스로 @media(max-width:768px) 규칙보다 특이도 우선. */ .intro-mobile__lang.intro-lang{ position:absolute; left:auto; right:5%; top:35vw; transform:translateY(-50%); align-self:auto; height:auto; margin:0; z-index:9; line-height:1.3; } .intro-mobile__lang .intro-lang__cur{ font-size:12px; } /* [260810] 상단 공지바(태블릿형)는 페이지 상단 .intro-notice 로 노출하므로, 통이미지 내부의 공지 오버레이(.intro-mobile__notice)는 중복이라 숨김. 언어선택기는 위 로고 우측 오버레이 사용. */ .intro-mobile__notice{ display:none !important; } }