/* =========================================================
   태블릿 / 모바일 반응형 보정
   - pad.css, m.css 다음에 로드 (기존 규칙 덮어쓰기)
   - PC(1401px 이상)에는 영향 없음
   ========================================================= */

/* 인트로 마지막 타이틀(EDITION WIRYE MY FIRST EDITION):
   글자가 아래에 숨어 있다 올라오는 방식이라 iOS Safari에서 글자 끝이 가는 줄처럼 비쳐 보임
   → 등장 전(intro6 전)에는 아예 숨김 */
.intro_txt_box.box04 h2 { opacity: 0; }
.main_wrap.intro6 .intro_txt_box.box04 h2 { opacity: 1; }
.intro_txt_box h2 i,
.intro_tit h2 i { transform: translateY(115%); }

/* PC: EDITION IV 화면일 때 왼쪽 상단 로고만 흰색 (min.js에서 .navi.logo_white 토글) */
.navi.logo_white #logo div { background: url(../img/common/logo2.svg) center no-repeat; background-size: cover; }

/* 모바일 전용 문구 (PC·태블릿에서는 숨김) */
.infra_m { display: none; }

@media all and (max-width: 1400px) {

/* ---------- 헤더 (스크롤 시) ---------- */

    /* 흰 배경 대신 반투명 어두운 배경 + 로고/전화/메뉴 모두 흰색 (전체 메뉴 열렸을 때는 기존 그대로) */
    .navi.active:not(.over) { background-color: rgba(0,0,0,0.45); border-bottom-color: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .navi.active:not(.over) #logo div { background: url(../img/common/logo2.svg) center no-repeat; background-size: cover; }
    .navi.active:not(.over) .tel_wrap .tel a div { background: url(../img/common/tel2.png) center no-repeat; background-size: 0.9375rem; }
    .navi.active:not(.over) .reserve:after { border: 1px solid #fff; background-color: transparent; }
    .navi.active:not(.over) .reserve p { color: #fff; }
    .navi.active:not(.over) .reserve .call:after { border-bottom: 1px solid #fff; border-right: 1px solid #fff; }
    .navi.active:not(.over) .tel_wrap a p { color: #fff; }
    .navi.active:not(.over) .guest_bt { border: 1px solid #fff; background-image: url(../img/common/guest2.png); }
    .ham.active2:not(.active) span { background: #fff; }
    .ham.active2:not(.active) p { color: #fff; }

/* ---------- 스크롤 ---------- */

    /* 오른쪽 세로 스크롤 표시(PC 전용 연출)가 태블릿에서 콘텐츠와 겹침 → 숨김 */
    .right_scroll_wrap,
    .right_scroll_wrap.pc { display: none !important; }

    /* pad.css의 #section1 { touch-action: none; } 때문에 일부 기기(안드로이드 등)에서
       OVERVIEW/SUMMARY 영역에서 손가락 스크롤이 막힘 → 해제
       (인트로 재생 중 스크롤 잠금은 body.locked 가 따로 담당) */
    #section1,
    #section1 * { touch-action: auto; }

/* ---------- INTRO ---------- */

    /* 영문 타이틀 + 라인 + 카피가 화면 안에 들어오도록 */
    .intro_txt_box .intro_line,
    .intro_txt_box.box01 .intro_line,
    .intro_txt_box.box02 .intro_line { width: min(36vw, 30rem); }
    .intro_txt_box.box02,
    .intro_txt_box.box03 { justify-content: center; }
    .intro_txt_box.box02>div,
    .intro_txt_box.box03>div { margin: 0; }
    .intro_txt_box p { white-space: nowrap; }

/* ---------- section1 : OVERVIEW + SUMMARY ---------- */

    /* 첫 화면(100dvh) = 인트로 → OVERVIEW, 그 아래 SUMMARY */
    .main01 { display: block; height: auto; padding-top: 100dvh; overflow: hidden; }
    .main_bd_box { display: none; }

    .main01 .infra_tit { top: 0; height: 100dvh; align-items: flex-start; padding-top: 20dvh; box-sizing: border-box; }
    .main01 .infra_tit>div { width: 90%; transform: none; text-align: center; }
    .main01 .infra_tit>div>div { flex-direction: column; gap: 0.75rem; margin-top: 0; transform: none; }
    .main01 .infra_tit h2 { font-size: 2.5rem; }
    .main01 .infra_tit h3 { font-size: 2rem; text-align: center; transform: translateY(2rem); }
    .main01 .infra_tit>div>div img { width: 22rem; max-width: 70%; margin-top: 0; }
    .main01 .infra_tit p { font-size: 1.0625rem; margin-top: 1.5rem; word-break: keep-all; }

    .main01 .infra_txt { top: 0; height: 100dvh; align-items: flex-start; padding-top: 48dvh; box-sizing: border-box; }
    .main01 .infra_txt>div { width: 92%; display: flex; flex-direction: column; align-items: flex-end; }
    .main01 .infra_txt img { width: 100%; }
    .main01 .infra_txt h4 { position: static; font-size: 0.9375rem; margin-top: -1rem; }
    .main01 .infra_txt h4 span { margin-right: 4rem; }

    .main01 .infra_img { top: calc(100dvh - 15rem - 28vw); bottom: auto; width: 94%; }

    .main_sum_box { padding: 6rem 0; justify-content: center; }
    .main_sum_box>div:first-child { width: 88%; gap: 3.5rem; }
    .sum_txt_box { width: 100%; }
    .sum_sum { width: 100%; }
    .sum_sum ul { width: 100%; gap: 2.5rem 1.5rem; }
    .sum_sum ul li p { word-break: keep-all; }
    .sum_ori { margin-top: 3.5rem; }

/* ---------- section2 : MASTER PLAN ---------- */

    /* 층별 하이라이트 이미지를 기본 도면 크기에 맞춤 */
    .master_img { width: 100%; }

/* ---------- section3 : EDITION ---------- */

    .edition_img_box { width: 90%; max-width: 744px; }

/* ---------- PR FILM ---------- */

    .film_wrap { height: auto; padding: 8rem 0; }
    .film_inner { flex-direction: column; align-items: stretch; }
    .film_txt { position: static; transform: none; text-align: center; }
    .film_txt h2 { width: 30rem; height: 8.9rem; margin: 0 auto; background-position: center; }
    .film_txt h3,
    .film_txt p { padding-left: 0; }
    .film_vd { width: 100%; margin-top: 3.5rem; }
    /* 태블릿/모바일은 스크롤 등장(data-active) 대신 바로 노출 */
    .film_txt h2, .film_txt h3, .film_txt p, .film_vd { opacity: 1; transform: none; }

/* ---------- section4 : NO REASON TO WAIT ---------- */

    /* 배경 영상이 섹션 전체 높이를 덮도록 */
    .reason_vd iframe { width: auto; height: 100%; aspect-ratio: 16 / 9; min-width: 100%; min-height: 0; }

    .reason_content_box { width: 90%; }
    .reason_content { height: auto; min-height: 9rem; padding-bottom: 1.5rem; }
    .reason_content p { word-break: keep-all; }

}

@media all and (max-width: 767px) {

/* ---------- 헤더 (스크롤 시) 높이 ---------- */

    .navi.active { height: 7rem; }
    .ham.active2 { top: 27px; }

    /* 로고 / 전화 / 메뉴 아이콘 120% */
    #logo { transform: scale(1.2); transform-origin: left center; }
    .tel_wrap .tel { width: 36px; height: 36px; }
    .tel_wrap { margin-right: 1.75rem; }  /* 커진 'menu' 글자와 겹치지 않게 */
    .tel_wrap .tel a div { background-size: 17px !important; }
    .ham { transform: scale(1.2); transform-origin: center; }
    .navi.active:not(.over) .tel_wrap .tel { border: 1px solid #fff; }

/* ---------- INTRO ---------- */

    /* 첫 화면 문구+로고를 이미지 띠 위로 여유 있게 올림 */
    .intro_tit>div { transform: translateY(calc(-50% - 14dvh)); }

    /* ENCOUNTER 장면: 세로 띠가 화면 정가운데에서 펼쳐지도록 */
    .main_vd_box>div { clip-path: polygon(33% 22%, 67% 22%, 67% 78%, 33% 78%); }

/* ---------- 전체 메뉴 ---------- */

    .site_list>li { margin: 1.25rem 0; }
    .site_list>li>a>span { font-size: 1.625rem; padding: 0.25rem 0; }

/* ---------- section1 : OVERVIEW + SUMMARY ---------- */

    /* 12월 오픈예정 바: 첫 화면 하단에 고정 */
    /* '12월 오픈예정': 검정 바 대신 건물 이미지 바로 아래 가운데 텍스트 */
    .main_guest,
    .main_guest.show { top: calc((100dvh - 125 * var(--u)) / 2 + 125 * var(--u) + 4 * var(--u)); bottom: auto; height: auto; background: none; color: #111; }
    .main_guest p { font-size: calc(5.3 * var(--u)); line-height: 1.2; font-weight: 500; }
    .main_guest p b { font-weight: 500; font-size: inherit; line-height: inherit; transform: none; }

    /* SUMMARY: 모바일 시안(600px 폭) 비율 그대로 - 하늘 배경 + 스카이라인 + 1열 목록 */
    .main_sum_box { padding: 24vw 0 12vw; background-color: #f3f4f5; }
    .main_sum_box::after { opacity: 1; background: linear-gradient(to bottom, rgba(243,244,245,0) 0%, rgba(243,244,245,0) 25%, rgba(243,244,245,0.75) 60%, #f3f4f5 100%), url(../img/main.jpg) center top / cover no-repeat; }
    .main_sum_box>div:first-child { width: 100%; gap: 13vw; }

    .sum_txt_box { color: #111; }
    .sum_txt_box h2 { font-size: 10vw; letter-spacing: 0.06em; padding-left: 0.06em; }
    .sum_txt_box h5 { font-size: 3vw; margin-top: 1.5vw; }
    /* 스카이라인 + 곡선 라인 (PC 메인 이미지 재사용) */
    /* 스카이라인 이미지 하단 곡선(가운데가 높음)에 라인 곡률을 맞춰 딱 붙게: 라인 110vw, 높이 24.7vw */
    .sum_txt_box::after { content: ''; display: block; width: 100vw; height: 24.7vw; margin-top: 6vw; background: url(../img/line.svg) center bottom / 110vw auto no-repeat, url(../img/main_bd.png) center top / 100vw auto no-repeat; }

    .sum_sum { color: #111; }
    .sum_sum ul { width: 74vw; margin: 0 auto; grid-template-columns: minmax(0, 1fr); gap: 11vw 0; }
    .sum_sum ul li h3 { font-size: 4.7vw; font-weight: 500; line-height: 1.2; }
    .sum_sum ul li p { font-size: 3.2vw; line-height: 1.6; color: #666; opacity: 1; border-top: 1px solid #a9a9a9; margin-top: 3.3vw; padding-top: 4vw; }

    .sum_ori { margin-top: 18vw; color: #444; }
    .sum_ori p { font-size: 1.85vw; }
    .sum_ori p br.mo { display: none !important; }

/* ---------- section2 : MASTER PLAN (모바일 시안 600px 폭 비율) ---------- */

    .master_wrap { padding: 23vw 0 12vw; }

    .master_tit h4 { font-size: 4vw; }
    .master_tit h2 { font-size: 11vw; line-height: 1; margin-top: 3vw; }
    .master_tit span { height: 11vw; margin-top: 9vw; }
    .master_tit img { width: 40vw; margin-top: 8.5vw; }

    .master02 { margin-top: 48vw; }
    /* 순서: REFINED LUXURY → 건물 도면 → 켜켜이 쌓아 올린 */
    .master02>div { width: 100%; max-width: none; display: flex; flex-direction: column; align-items: center; }
    .master_txt_box.box01 { order: 1; }
    .master_box { order: 2; width: 48vw; margin-top: 8vw; }
    .master_txt_box.box02 { order: 3; margin-top: 10vw; }

    .master_txt_box h4 { font-size: 6vw; }
    .master_txt_box h2 { font-size: 10.3vw; margin-top: 1.5vw; }
    .master_txt_box h5 { font-size: 2.7vw; line-height: 1.6; margin-top: 5vw; }
    .master_txt_box h3 { font-size: 4.2vw; line-height: 1.6; }
    .master_txt_box p { font-size: 2.2vw; line-height: 2.1; margin-top: 3vw; }

    /* 도면: 층별 라인을 모두 밝게 표시, 라벨은 도면 좌우에 배치 */
    .master_img_box,
    .master_img_box .master_img { opacity: 1; }
    .master_img_txt_box,
    .master_img_txt_box.box01 { position: absolute; margin: 0; opacity: 1; bottom: auto; }
    .master_img_txt { text-align: left !important; }
    .master_box .master_img_txt h3 { font-size: 1.6vw; line-height: 1.3; }
    .master_box .master_img_txt p { font-size: 1.2vw; line-height: 1.3; margin-top: 0.3vw; opacity: 0.7; }

    .master_img_txt_box.box01,
    .master_img_txt_box.box02 { right: 91.4%; left: auto; }
    .master_img_txt_box.box01 .master_img_txt,
    .master_img_txt_box.box02 .master_img_txt { text-align: right !important; }
    .master_img_txt_box.box01 { top: 10.6%; }
    .master_img_txt_box.box02 { top: 21.2%; }
    .master_img_txt_box.box03,
    .master_img_txt_box.box04,
    .master_img_txt_box.box05 { left: 92.4%; right: auto; }
    .master_img_txt_box.box03 { top: 51.4%; }
    .master_img_txt_box.box04 { top: 62.6%; }
    .master_img_txt_box.box05 { top: 73.2%; }
    .master_img_txt span { white-space: nowrap; }
    /* 긴 라벨(RESIDENT PRIVATE PARKING)은 화면 안에서 줄바꿈 */
    .master_img_txt_box.box04 .master_img_txt span { white-space: normal; width: 27vw; }

/* ---------- section3 : EDITION (모바일 시안 600px 폭 비율, 3개 공통) ---------- */

    .edition_wrap { padding-top: 0; }

    /* 3개 페이지를 [이미지+문구] → [EDITION 라벨+사진+설명] 순서로 반복 (슬라이드 대신 세로 나열) */
    .edition_wrap { display: flex; flex-direction: column; flex-wrap: nowrap; }
    .edition_bg_box,
    .edition_img_wrap { display: contents; }
    .edition_bg.bg01 { order: 1; }
    .edition_img_box.box01 { order: 2; }
    .edition_bg.bg02 { order: 3; }
    .edition_img_box.box02 { order: 4; }
    .edition_bg.bg03 { order: 5; }
    .edition_img_box.box03 { order: 6; }
    .edition_bg.bg04 { order: 7; }
    .edition_img_box.box04 { order: 8; }
    /* EDITION IV 문구도 다른 페이지와 같은 가운데 배치 */
    .edition_tit_box.box04 { justify-content: center; text-align: center; }
    .edition_tit_box.box04>div { margin: 0; }

    .edition_bg,
    .edition_bg.active,
    .edition_bg.prev { position: relative; width: 100%; height: auto; aspect-ratio: 600 / 605; transform: none !important; z-index: 1; }
    .edition_tit_box h2,
    .edition_tit_box p { opacity: 1; transform: none; }
    .edition_tit_box span::after { height: 100%; }

    .edition_tit_box { align-items: flex-start; padding-top: 28vw; box-sizing: border-box; text-align: center; }
    .edition_tit_box.box02 { text-align: center; }
    .edition_tit_box>div,
    .edition_tit_box.box02>div,
    .edition_tit_box.box03>div { width: 90%; max-width: none; transform: none; display: flex; flex-direction: column; align-items: center; }
    .edition_tit_box h2 { order: 1; font-size: 6vw; line-height: 1.3; margin-top: 0; }
    .edition_tit_box span { order: 2; height: 7.2vw; margin-top: 6vw; }
    .edition_tit_box p { order: 3; font-size: 2.85vw; line-height: 1.75; margin-top: 6vw; }
    .edition_tit_box.box01 p,
    .edition_tit_box.box03 p { margin-top: 6vw; }
    .edition_tit_box h3 { display: none; }

    /* 하단 EDITION I~III: 라벨 + 정사각 이미지 + 타이틀/설명 */
    .edition_img_box { margin: 22.5vw 0 20vw; }
    .edition_img_box { width: 100%; max-width: none; display: flex; justify-content: center; }
    .edition_img_box>div { width: 52.8vw; }
    .edition_img_box h5 { width: 100%; font-size: 2.2vw; max-width: none; }
    .edition_img { width: 100%; max-width: none; margin-top: 2vw; aspect-ratio: 1 / 1; }
    .edition_img img { width: 100%; height: 100%; object-fit: cover; }
    .edition_txt_box { width: 90vw; margin-left: calc((52.8vw - 90vw) / 2); margin-top: 7vw; text-align: center; }
    .edition_txt_box h3 { font-size: 5.3vw; }
    .edition_txt_box p { font-size: 2.5vw; line-height: 1.8; margin-top: 3.5vw; opacity: 0.8; word-break: keep-all; }
    .edition_line_box,
    .edition_line_box.box01 { display: none; }

/* ---------- section4 : NO REASON TO WAIT (모바일 시안 600px 폭 비율) ---------- */

    /* 모바일: 영상 대신 배경 이미지 */
    .reason_vd_box { background: #1f2a22 url(../img/reason.jpg) center / cover no-repeat; }
    .reason_vd { display: none; }

    .reason_wrap { padding: 33vw 0 38vw; }

    /* 회전 문구: 왼쪽 정렬, 강조 줄 오른쪽에 '이유가 없는 사람들이 있다' */
    .reason_tit_box { width: 100%; justify-content: flex-start; transform: none; }
    .reason_tit_box>div { margin-left: 11.3vw; }
    .reason_tit_box ul li { height: 9.5vw; }
    .reason_tit_box .rt { width: 27.5vw; font-size: 5vw; text-align: left; }
    .reason_tit_box .rt.lts { letter-spacing: 0.9vw; }
    .reason_tit_box ul li .rt::before { left: -4.3vw; font-size: 5vw; }
    .reason_tit_box ul li .rt::after { left: 28.7vw; font-size: 5vw; }
    .reason_tit_box ul li>div { top: 0.2vw; right: -4.8vw; left: auto; transform: translateX(100%); text-align: right; }
    .reason_tit_box h3 { font-size: 4.7vw; }
    .reason_tit_box h6 { font-size: 1.85vw; margin-top: 2vw; }

    /* 청약조건: 2열 박스 */
    .reason_content_box { width: 85.2vw; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7vw; margin-top: 27vw; }
    .reason_content_box h2 { font-size: 3vw; top: -6.5vw; }
    .reason_content { min-height: 16.3vw; padding-bottom: 3vw; }
    .reason_content>div { margin: 3.7vw 3.3vw 0; }
    .reason_content h3 { font-size: 2.5vw; line-height: 1.3; }
    .reason_content p { font-size: 1.5vw; line-height: 1.6; margin-top: 1.8vw; }

/* ---------- PR FILM ---------- */

    .film_wrap { padding: 22vw 0; }
    .film_txt h2 { width: 78vw; height: 23.1vw; }
    .film_txt h3 { font-size: 3.6vw; margin-top: 6vw; }
    .film_txt p { font-size: 3vw; margin-top: 4vw; }
    .film_vd { margin-top: 9vw; }
    .film_play { width: 14vw; height: 14vw; margin: -7vw 0 0 -7vw; }

/* ---------- section6 : LOCATION ---------- */

    .location_tit h3 b { display: block; }
    /* 프리미엄 카드(BRAND/TRAFFIC/INFRA/COMMUNITY) 사이 여백 */
    .location_content_box { gap: 9rem 3rem; }
    /* 지역도: 화면 폭의 300%, 좌우 스크롤 */
    .location_map { width: 100%; margin-top: 3.5rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; display: block; }
    .location_map img,
    .location_map.active img { width: 300vw; max-width: none; transform: none; }

}

/* 가로형 태블릿 / 작은 노트북 (768~1400px, 가로가 긴 화면) */
@media all and (min-width: 768px) and (max-width: 1400px) and (orientation: landscape) {

    .main01 .infra_tit { padding-top: 15dvh; }
    .main01 .infra_tit>div>div { flex-direction: row; gap: 1.5rem; }
    .main01 .infra_tit h2 { font-size: 2.25rem; }
    .main01 .infra_tit h3 { font-size: 1.875rem; text-align: left; transform: none; }
    .main01 .infra_tit>div>div img { width: 16rem; }
    .main01 .infra_tit p { margin-top: 1rem; }

    .main01 .infra_txt { padding-top: 38dvh; }
    .main01 .infra_txt>div { width: min(76%, 110dvh); }

    /* 이미지 비율(약 0.3) 기준으로 화면 높이에 맞춰 크기 제한 */
    .main01 .infra_img { width: min(94%, 130dvh); top: calc(100dvh - 4rem - min(28vw, 39dvh)); }

}

/* 세로형 화면(모바일, 세로 태블릿): 인트로 타이틀 / 라인 / 카피 세로 배치 */
@media all and (max-width: 1400px) and (orientation: portrait) {

    .intro_txt_box>div { flex-direction: column; gap: 1.25rem; }
    .intro_txt_box .intro_line,
    .intro_txt_box.box01 .intro_line,
    .intro_txt_box.box02 .intro_line { width: min(72vw, 32rem); }
    .intro_txt_box h3 { margin-top: 0; }
    .intro_txt_box p { transform: translateY(1.5rem); }
    .intro_txt_box.box01 p,
    .intro_txt_box.box02 p,
    .intro_txt_box.box03 p { margin: 0; letter-spacing: 0.125rem; }

    /* 첫 화면: 가운데 이미지 띠를 좌우 끝까지 */
    .intro_vd_box.box01 { clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); }
    .main_wrap.intro .intro_vd_box.box01>div { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

    /* REVEAL 단계: 이미지 화면 가득 + 타이틀/라인/카피 흰색 */
    .intro_img { width: 100%; }
    .intro_txt_box.box02 { color: #fff; }
    .intro_txt_box.box02 .intro_line { filter: brightness(0) invert(1); }

}

/* OVERVIEW 첫 화면: 모바일 + 세로형 태블릿(아이패드 미니/에어/프로 세로) 공통 - 모바일 시안 비율 */
@media all and (max-width: 767px), all and (min-width: 768px) and (max-width: 1400px) and (orientation: portrait) {

    /* 모바일 시안(600x1200) 비율 그대로: 콘텐츠 블록(125u)을 첫 화면 세로 중앙에 배치
       u = 기본 1vw, 화면이 낮은(가로가 넓은) 기기에서는 높이에 맞춰 축소 → 헤더/하단바와 겹치지 않음 */
    .main01 { --u: min(1vw, calc((100dvh - 10rem) / 125)); }
    .main01 .infra_tit { padding-top: calc((100dvh - 125 * var(--u)) / 2); }
    .main01 .infra_tit>div { width: 100%; }
    .main01 .infra_tit>div>div { gap: 0; }
    .main01 .infra_tit h2 { font-size: calc(6.7 * var(--u)); line-height: 1; }
    .main01 .infra_tit>div>div img { width: calc(70 * var(--u)); max-width: none; margin-top: calc(5.8 * var(--u)); }
    .main01 .infra_tit h3 { font-size: calc(5.7 * var(--u)); line-height: 1.45; margin-top: calc(4.2 * var(--u)); transform: translateY(2rem); }
    .main01 .infra_tit p { font-size: calc(2.85 * var(--u)); line-height: 1.88; margin-top: calc(8.2 * var(--u)); }
    span.infra_m { display: inline; }
    br.infra_m { display: initial; }

    .main01 .infra_txt { padding-top: calc((100dvh - 125 * var(--u)) / 2 + 77.5 * var(--u)); justify-content: flex-start; }
    .main01 .infra_txt>div { width: calc(85 * var(--u)); margin-left: calc(50% - 38.3 * var(--u)); display: block; position: relative; }
    .main01 .infra_txt h4 { position: absolute; right: calc(-0.8 * var(--u)); top: calc(13.3 * var(--u)); font-size: calc(1.85 * var(--u)); line-height: 1.45; margin: 0; }
    .main01 .infra_txt h4 span { margin-right: calc(6.7 * var(--u)); }

    /* 건물 이미지는 좌우가 살짝 잘리도록 113% 폭 (가운데 기준) */
    .main01 .infra_img { width: calc(113 * var(--u)); left: calc(50% - 56.5 * var(--u)); right: auto; margin: 0; top: calc((100dvh - 125 * var(--u)) / 2 + 90.8 * var(--u)); }

}

/* 세로형 태블릿: 왼쪽 아래 '12월 오픈예정' 원형 배지와 겹치지 않도록 여유를 더 둠 */
@media all and (min-width: 768px) and (max-width: 1400px) and (orientation: portrait) {

    .main01 { --u: min(1vw, calc((100dvh - 22rem) / 125)); }

}