:root {
    --logo-area : 80px;
    --bottom-gap: 0px;  /* 하단 바와 더 띄우고 싶으면 여기만 조절 (예: 10px) */
    /* 이미지가 실제로 쓸 수 있는 높이 = 보이는 화면 - 로고 - 상하 안전영역 - 하단 여백 */
    --stage-h: calc(100dvh - var(--logo-area) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--bottom-gap));
}

html, body { touch-action: manipulation; overscroll-behavior: none; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

.Boucheron-2026 { overscroll-behavior: contain; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.Boucheron-2026 img { width: 100%; }

.Boucheron-2026 > .wrap { position: relative; width: 100%; }
.Boucheron-2026 > .wrap > .inner { position: relative; width: 100%; margin: 0 auto; height: 100vh; height: 100dvh; box-sizing: border-box; padding-top: env(safe-area-inset-top); padding-bottom: calc(env(safe-area-inset-bottom) + var(--bottom-gap)); }

.wrap .logo { z-index: 7; position: absolute; top: 6dvh; left: 50%; transform: translateX(-50%); width: 100%; max-width: 136px; aspect-ratio: 136 / 26; }

/* ===== intro ===== */
.intro { background: url(/img/intro_bg_mob.jpg) no-repeat center / cover; }
.intro > .inner { display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }

.intro .btn_share { cursor: pointer; z-index: 1; position: absolute; top: 25px; right: 20px; width: 46px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 10.455px rgba(255, 255, 255, 0.80); }
.intro .point_wrap { flex-shrink: 0; display: flex; justify-content: center; align-items: flex-start; width: 100%; box-sizing: border-box; padding-top: var(--logo-area); overflow: hidden; overflow: clip; }

/* 기준 캔버스 1635 x 2244 (원본 합성 이미지 비율). 안의 모든 위치는 이 캔버스 기준 % */
.intro .point_area { position: relative; flex-shrink: 0; height: min(var(--stage-h), 800px); width: auto; aspect-ratio: 1635 / 2244; container-type: inline-size; }

/* --- 분리 이미지 (섬 + 건물 3개) --- */
.intro .point_area .obj { position: absolute; display: block; height: auto; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.intro .point_area .obj.road  { z-index: 1; left: 0;      top: 7.58%;  width: 98.22%; }
.intro .point_area .obj.rink  { z-index: 2; left: 30.83%; top: 4.63%;  width: 63.21%; }
.intro .point_area .obj.kiosk { z-index: 3; left: 12.48%; top: 35.12%; width: 38.81%; }
.intro .point_area .obj.globe { z-index: 3; left: 51.13%; top: 55.79%; width: 38.47%; }

/* --- 라벨 (중심점 기준 배치) --- */
.intro .point_area .label { z-index: 4; position: absolute; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; pointer-events: none; color: #FFF; text-align: center; text-shadow: 0 0 1px #FFF, 0 0 20px #0349B0; font-size: 15px; font-weight: 850; line-height: 130%; letter-spacing: -0.05em; text-transform: uppercase; }

/* 이미지 크기에 비례해서 글자도 커지고 작아지도록 (지원 안 되는 브라우저는 위의 15px 사용) */
.intro .point_area .label { font-size: clamp(12px, 2.7cqw, 24px); letter-spacing: -0.05em; }
.intro .point_area .label.rink  { left: 63.88%; top: 3.43%; }
.intro .point_area .label.kiosk { left: 27.86%; top: 78.16%; }
.intro .point_area .label.globe { left: 70.86%; top: 96.41%; }

/* --- 가상 버튼 --- */
.intro .point_area .point_btn { z-index: 5; position: absolute; display: block; font-size: 0; color: transparent; -webkit-tap-highlight-color: transparent; }
.intro .point_area .point_btn.rink   { left: 34.9%; top: 7.4%;  width: 53.2%; height: 32.7%; }
.intro .point_area .point_btn.kiosk  { left: 16.2%; top: 37.4%; width: 30.0%; height: 28.1%; }
.intro .point_area .point_btn.globe  { left: 55.4%; top: 59.3%; width: 30.6%; height: 27.2%; }

/* .point_area.debug 위치 확인용 */
.intro .point_area.debug .point_btn { background: rgba(255, 0, 0, 0.2); outline: 2px solid red; }

/* --- 등장 애니메이션 ---
 * .intro에 is-ready 클래스가 붙으면 순서대로 등장 (--d = 시작 지연)
 * 위치 지정용 transform과 겹치지 않도록 개별 속성(translate / scale) 사용 */
.intro .point_area .obj,
.intro .point_area .label { opacity: 0; transition: opacity .7s ease var(--d, 0s), translate .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), scale .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }

.intro .point_area .obj.road   { --d: .1s;  scale: .96; }
.intro .point_area .obj.rink   { --d: .55s; translate: 0 -24px; }
.intro .point_area .obj.kiosk  { --d: .75s; translate: 0 -24px; }
.intro .point_area .obj.globe  { --d: .95s; translate: 0 -24px; }
.intro .point_area .label.rink  { --d: 1.3s;  translate: 0 8px; }
.intro .point_area .label.kiosk { --d: 1.45s; translate: 0 8px; }
.intro .point_area .label.globe { --d: 1.6s;  translate: 0 8px; }

.intro.is-ready .point_area .obj,
.intro.is-ready .point_area .label { opacity: 1; translate: none; scale: none; }

/* 등장 전에는 클릭 막기 */
.intro .point_area .point_btn { pointer-events: none; }
.intro.is-ready .point_area .point_btn { pointer-events: auto; }

/* 움직임 줄이기 설정 사용자는 애니메이션 없이 바로 표시 */
@media (prefers-reduced-motion: reduce) {
    .intro .point_area .obj,
    .intro .point_area .label { transition: none; opacity: 1; translate: none; scale: none; }
    .intro .point_area .point_btn { pointer-events: auto; }
}


.tostPop { position: fixed; bottom: 40%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; max-width: 330px; padding: 30px 0; font-family: 'Pretendard', sans-serif; color: #000; font-size: 18px; font-weight: 300; line-height: 150%; letter-spacing: -0.18px; word-break: keep-all; border-radius: 12px; background: rgba(255, 255, 255, 0.90); box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08); opacity: 0; pointer-events: none; transition: .3s; z-index: 10; }
.tostPop.on { opacity: 1;}

.tostPop.copy {position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 35px; color: #FFF; text-align: center; font-family: 'Pretendard' , sans-serif; font-size: 16px; font-weight: 400; border-radius: 12px; word-break: keep-all; background: rgba(0, 0, 0, 0.46); opacity: 0; pointer-events: none; transition: .3s; z-index: 50;}
.tostPop.copy.on { opacity: 1; bottom: 100px;}

.tostPop.download {position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 35px; color: #FFF; text-align: center; font-family: 'Pretendard' , sans-serif; font-size: 16px; font-weight: 400; border-radius: 12px; word-break: keep-all; background: rgba(0, 0, 0, 0.46); opacity: 0; pointer-events: none; transition: .3s; z-index: 50;}
.tostPop.download.on { opacity: 1; bottom: 100px;}


@media screen and (min-width: 450px) {
    .intro {background-image: url(/img/intro_bg_pc.jpg);}
    .intro .point_area { height: min(var(--stage-h), 900px);}
}