/* ============================================================
   mobile.css — 모바일 (≤768px) 반응형
   * main.css, pad.css 다음에 로드
   * 데스크톱 규칙을 확실히 덮기 위해 레이아웃 핵심은 !important 사용
   ============================================================ */

/* 데스크톱/태블릿에서는 모바일 전용 요소 숨김 */
.brand-logo-m {
  display: none;
}

.hero-copy-image-m {
  display: none;
}

.forest-map-image-m {
  display: none;
}

.premium-thumb-image-m {
  display: none;
}

/* PC에서는 데스크톱 지도(.contact-map-pc)만 — 모바일 지도 숨김
   (.contact-map-frame img 규칙이 더 구체적이라 !important 필요) */
.contact-map-m {
  display: none !important;
}

/* 모바일 전용 줄바꿈(PC에서는 숨겨 한 줄 유지) */
.br-m {
  display: none;
}

/* S3 전환화면(밝은 지도)용 진한 로고 — 기본 숨김 */
.brand-logo-detail {
  display: none;
}

.open-badge {
  display: none;
}

@media (max-width: 768px),
(min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {
  /* =====================================================
     기본: 데스크톱과 동일한 풀페이지 스크롤(스와이프 단계 전환) 사용
     → 구조(fullpage/track/section 높이·위치)는 main.css 그대로 두고,
       모바일에서는 각 단의 '콘텐츠 크기/배치'만 조정한다.
     ===================================================== */

  /* =====================================================
     헤더 — 좌: 민간공원 특례사업 / 우: 전화아이콘 + 햄버거
     ===================================================== */
  .open-schedule,
  .header-left .header-divider {
    display: none !important;
  }

  .site-header {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .header-left {
    left: 24px !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
  }

  /* 좌측: 민간공원 특례사업 — 흰색, 더 작게 + 더 굵게 + 자간 더 좁게 */
  .project-type {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: -0.06em !important;
    margin: 0 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
  }

  .brand-logo {
    display: none !important;
  }

  /* 중앙 로고: 화면 정중앙 배치 */
  .header-logo {
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
  }

  /* 모바일 로고: 원본 비율 유지 · 정중앙, 좌우 요소와 겹치지 않게 축소 */
  .brand-logo-m {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: 16px !important;
  }

  /* 우측 아이콘군: 우측 여백 = 좌측(민간공원) 여백 = 24px */
  .header-right {
    right: 24px !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
  }

  /* 전화: 아이콘만 노출(번호 숨김) · 잘리지 않게 contain */
  .telephone {
    display: inline-flex !important;
    align-items: center !important;
  }

  .telephone-icon-wrap {
    display: inline-flex !important;
  }

  .telephone-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
  }

  .telephone-number {
    display: none !important;
  }

  /* 햄버거: 길이(가로)·크기 축소 */
  .menu-button {
    width: 24px !important;
    height: 16px !important;
  }

  .menu-line {
    width: 24px !important;
  }

  .menu-line-top {
    top: 4px !important;
  }

  .menu-line-bottom {
    bottom: 4px !important;
  }

  /* 햄버거→X 전환: 버튼 높이 16px 기준(중앙 8px)으로 재계산
     (데스크톱 7px는 30px 버튼 기준이라 모바일 16px 버튼엔 안 맞아 어긋났음) */
  body.is-menu-open .menu-line-top {
    transform: translateY(4px) rotate(45deg) !important;
  }

  body.is-menu-open .menu-line-bottom {
    transform: translateY(-4px) rotate(-45deg) !important;
  }

  /* =====================================================
     헤더 단계별 색상 (모바일)
     - S2 축소(비지02, 어두운 숲 상단): 전화·햄버거 흰색
     - S3 전환(밝은 지도): 로고 logo_w(진한색) + 특례사업 블랙
     ===================================================== */
  /* S2 축소 = is-overview-header 이지만 is-detail-header 아님 */
  body.is-overview-header:not(.is-detail-header) .telephone-icon {
    filter: brightness(0) invert(1) !important;
  }

  body.is-overview-header:not(.is-detail-header) .menu-line-top,
  body.is-overview-header:not(.is-detail-header) .menu-line-bottom {
    background: #ffffff !important;
    opacity: 1 !important;
  }

  /* 밝은 배경 섹션(S3 전환화면 is-detail-header, S5·S6 is-light-header):
     흰색 m_logo → 진한 logo_w로 교체하고, 헤더 요소도 진한색으로 (로고 2개 중복/흰 로고 사라짐 방지) */
  body.is-detail-header .brand-logo-m,
  body.is-light-header .brand-logo-m {
    display: none !important;
  }

  body.is-detail-header .brand-logo-detail,
  body.is-light-header .brand-logo-detail {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: 16px !important;
  }

  body.is-detail-header .project-type,
  body.is-light-header .project-type {
    color: #3e3b39 !important;
  }

  /* 밝은 배경: 전화 아이콘 네이비 + 햄버거 진한색 */
  body.is-light-header .telephone-icon {
    filter: brightness(0) saturate(100%) invert(19%) sepia(25%) saturate(2380%)
      hue-rotate(195deg) brightness(88%) contrast(94%) !important;
  }

  body.is-light-header .menu-line-top {
    background: #000000 !important;
    opacity: 0.38 !important;
  }

  body.is-light-header .menu-line-bottom {
    background: var(--navy) !important;
    opacity: 1 !important;
  }

  /* 어사이드(전체메뉴) 열림: 배경이 항상 진한 남색이므로,
     어떤 섹션 상태였든(S3/S5/S6 등) 로고는 항상 흰색(m_logo) + 특례사업 문구도 항상 흰색으로 고정 */
  body.is-menu-open .brand-logo-detail {
    display: none !important;
  }

  body.is-menu-open .brand-logo-m {
    display: block !important;
  }

  body.is-menu-open .project-type {
    color: #ffffff !important;
  }

  /* 어사이드 하단 카피라이트: 한 줄에 들어오도록 축소 */
  .site-aside-copyright {
    font-size: 11px !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
  }

  /* =====================================================
     섹션1 — 카피 우측 상단 정렬(이미지 → 세로선 → 문구)
     ===================================================== */
  /* 카피이미지·세로선·부제를 화면 중앙(가로) 정렬 + 위에서 아래로 내림 */
  .hero-copy {
    left: 0 !important;
    right: 0 !important;
    top: 21% !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hero-copy-image-wrap {
    min-height: 0 !important;
  }

  /* 데스크톱 카피 이미지 숨기고 모바일 전용 이미지 사용 */
  .hero-copy-image {
    display: none !important;
  }

  /* 모바일 카피 이미지: 좌우 여백을 두고 축소(잘림 없음) */
  .hero-copy-image-m {
    display: block !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-width: 72vw !important;
  }

  /* 세로선: 더 길게 + 중앙 */
  .hero-copy-line {
    width: 1px !important;
    height: 220px !important;
    flex: 0 0 220px !important;
    margin: 22px 0 !important;
    align-self: center !important;
    opacity: 1 !important;
    transform: scaleY(1) !important;
    transform-origin: top center !important;
  }

  /* 부제: 중앙 2줄(검단에서 처음 만나는 / 민간공원 특례사업), 글자 키움 */
  .hero-copy-text {
    margin-left: 0 !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .br-m {
    display: inline !important;
  }

  /* 스크롤다운: 텍스트 제거, 세로선만 하단 중앙 */
  .scroll-label {
    display: none !important;
  }

  .scroll-guide {
    left: 50% !important;
    top: auto !important;
    bottom: 0 !important;
    width: 1px !important;
    height: 60px !important;
    transform: translateX(-50%) !important;
  }

  .scroll-line {
    top: 0 !important;
    left: 0 !important;
    height: 60px !important;
  }

  /* 물방울 낙하 거리를 모바일 선(60px)에 맞춤 */
  .scroll-drop {
    --drop-end: 60px !important;
  }

  /* =====================================================
     관심고객 플로팅 + 오픈예정 뱃지(전 섹션 공통)
     ===================================================== */
  .register-control--floating {
    right: 14px !important;
    bottom: 14px !important;
    width: 66px !important;
    height: 66px !important;
  }

  .register-control--floating .register-circle {
    width: 66px !important;
    height: 66px !important;
  }

  .register-fill {
    width: 66px !important;
    height: 66px !important;
  }

  .register-button-text {
    top: 0 !important;
    left: 0 !important;
    width: 66px !important;
    height: 66px !important;
  }

  .register-button-label {
    font-size: 10px !important;
  }

  .open-badge {
    display: flex;
    position: fixed;
    right: 14px;
    bottom: 88px;
    z-index: 5;
    width: 66px;
    height: 66px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #23316c;
    color: #ffffff;
    line-height: 1.15;
    text-align: center;
    font-family: "Jost", "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
    font-size: 13px;
  }

  .open-badge strong {
    font-weight: 700;
  }

  .open-badge .open-badge-row {
    font-weight: 400;
  }

  body.is-footer-section .open-badge {
    opacity: 0;
    pointer-events: none;
  }

  /* 오버뷰 축소(S2, 대지위치 1열 표시) + 프리미엄 디테일(S3, 지도+격자) + 프리미엄7(S5) 중에는
     우측 하단 플로팅 2개(관심고객·오픈예정 뱃지)를 잠시 페이드아웃 — 콘텐츠와 겹치지 않게.
     (is-overview-header는 isOverviewSplit || isDetailView 로 두 상태 모두 포함,
      is-light-header는 S5·S6 공통이라 is-contact-header(S6)는 제외해 S5만 선택) */
  body.is-overview-header .register-control--floating,
  body.is-overview-header .open-badge,
  body.is-light-header:not(.is-contact-header) .register-control--floating,
  body.is-light-header:not(.is-contact-header) .open-badge {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
  }

  /* =====================================================
     섹션2 — 초기: 배경 위 OVERVIEW(중앙) / 이후 축소(자동): 배경 상단 + 대지위치 1열
     ===================================================== */
  /* 비지02(main02_bg02) = 하단 배경. 초기 숨김 → 축소 시 하단 56%에 표시
     (회색 섹션 배경 대신 bg02가 대지위치 뒤를 채움) */
  .overview-panel-secondary {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 44% !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    opacity: 0 !important;
    transform: none !important;
    z-index: 1 !important;
  }

  .section02.is-overview-split .overview-panel-secondary {
    opacity: 1 !important;
  }

  .overview-image-secondary {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  /* 초기: 배경 전체 → 축소: 상단 44% */
  .overview-panel-primary {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transition: height 1.2s var(--motion-soft-ease) !important;
  }

  .section02.is-overview-split .overview-panel-primary {
    height: 44% !important;
  }

  .overview-image-primary {
    object-position: center center !important;
  }

  /* OVERVIEW: 초기 크게 → 축소 시 작게, 단어 사이 공백 제거(OVERVIEW) */
  .overview-title,
  .section02.is-overview-visible .overview-title {
    font-size: 62px !important;
    letter-spacing: 0.02em !important;
    word-spacing: -0.34em !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  .section02.is-overview-split .overview-title {
    font-size: 36px !important;
  }

  .overview-statement {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  /* 초기: 카피 화면 중앙 → 축소: 상단 44% */
  .overview-copy {
    width: 100% !important;
    inset: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* 축소 시 카피: 상단 44%에서 중앙 정렬(데스크톱 좌측정렬 덮음) */
  .section02.is-overview-split .overview-copy {
    height: 44% !important;
    inset: 0 0 auto 0 !important;
    transform: none !important;
    align-items: center !important;
    padding-left: 0 !important;
    text-align: center !important;
    z-index: 2 !important;
  }

  /* '검단 센트레빌 그랑포레' 브랜드 카피: 오버뷰 위 중앙 */
  .overview-message {
    align-items: center !important;
    text-align: center !important;
  }

  /* 브랜드 카피: PC처럼 초기 숨김 → 축소(split) 시 중앙에 표시 */
  .overview-brand {
    justify-content: center !important;
    text-align: center !important;
    opacity: 0 !important;
  }

  .section02.is-overview-split .overview-brand {
    opacity: 1 !important;
  }

  /* 대지위치: 초기 숨김(데스크톱 opacity 0) → 축소 시 하단 1열로 표시 */
  .overview-data {
    top: 44% !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-content: normal !important;
    justify-content: space-between !important;
    gap: 0 !important;
    /* 배경(overview-panel-secondary) 하단까지 8개 행을 고르게 분산 배치,
       하단 여백(padding-bottom)만큼 배경 끝단 전에 여유를 둠 */
    padding: 40px !important;
    z-index: 2 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .overview-data-item {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 3px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
  }

  .overview-data dt::after {
    display: none !important;
  }

  .overview-data dt {
    font-size: 14px !important;
    padding: 0 !important;
  }

  .overview-data dd {
    font-size: 14px !important;
    text-align: right !important;
  }

  /* =====================================================
     섹션3 — 풀페이지: 인트로(GRAND FORET) → 스와이프 → 디테일(4아이템)
       데스크톱의 절대배치·전환(is-forest-detail)은 그대로 두고,
       모바일에서는 각 화면의 콘텐츠 배치/크기만 조정한다.
     ===================================================== */

  /* --- 인트로 카피: 화면 중앙 세로 정렬 --- */
  .forest-intro-copy {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 24px !important;
  }

  .forest-eyebrow {
    position: static !important;
    order: 1 !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    text-align: center !important;
    font-size: 19px !important;
    line-height: 1.5 !important;
    margin: 0 0 34px !important;
  }

  .forest-eyebrow span {
    opacity: 1 !important;
    transform: none !important;
  }

  .forest-title {
    position: static !important;
    order: 2 !important;
    transform: none !important;
    font-size: 46px !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
  }

  .forest-word i {
    transform: none !important;
  }

  .forest-description {
    position: static !important;
    order: 3 !important;
    right: auto !important;
    top: auto !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    margin: 48px 0 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* 모자이크(바둑판) 전환 숨김 → 단순 페이드/오버레이만 사용 */
  .forest-blind {
    display: none !important;
  }

  /* --- 디테일: 흰 배경 + 상단 지도이미지(m_main03_map) + 그 아래 4아이템 --- */
  .forest-detail {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .forest-detail-media-image {
    display: none !important;
  }

  /* 배경: 사진 대신 흰 배경 */
  .forest-detail-media {
    position: absolute !important;
    inset: 0 !important;
    background: #ffffff !important;
    animation: none !important;
    clip-path: none !important;
    transform: none !important;
  }

  .forest-detail-media::after {
    display: none !important;
  }

  /* 지도(상단) + 4아이템(그 아래): 세로 스택, 헤더 아래부터 시작 */
  .forest-detail-inner {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;
    height: 100% !important;
    max-height: none !important;

    padding: 0 18px 14px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 전환: 어두워지지 않게 단순 페이드 + 차분하게(느리게) */
  .section03.is-forest-detail .forest-detail {
    transition: opacity 1.3s var(--motion-soft-ease) !important;
  }

  /* 지도 프레임: 상단에 이미지로 노출(격자보다 항상 위) — 데스크톱 절대배치·연출 초기화 */
  .forest-map-frame {
    display: block !important;
    position: static !important;
    order: -1 !important;
    /* flex-shrink 기본값(1)이면 세로 공간이 부족할 때 이미지 실제 높이보다
       박스가 찌그러들어서(overflow:visible로 이미지만 삐져나와) 아래 격자와
       겹치는 문제가 있었음 — 절대 안 찌그러지게 고정 */
    flex-shrink: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    margin: 0 0 12px !important;
  }

  /* 데스크톱용 지도 이미지는 숨기고 모바일 전용 이미지로 교체 */
  .forest-map-image {
    display: none !important;
  }

  .forest-map-image-m {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* 4아이템: 2×2 그리드 — PC처럼 옅은 외곽선 + 부분 십자선(표 테두리 아님) */
  .forest-feature-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;

    width: 100% !important;

    /* 지도 아래 남은 높이를 4개 카드가 채움 */
    flex: 1 1 auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    gap: 0 !important;
    border: none !important;
  }

  .forest-feature {
    justify-content: flex-start !important;
    padding: 18px 12px !important;
    text-align: center !important;
    border: none !important;
  }

  .forest-feature-image-wrap {
    justify-content: center !important;
    height: 46px !important;
  }

  .forest-feature-image {
    max-height: 46px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .forest-feature h3 {
    font-size: 15px !important;
    margin-top: 8px !important;
    color: #1f2937 !important;
  }

  .forest-feature p {
    font-size: 11px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    color: rgba(31, 41, 55, 0.72) !important;
  }

  .forest-feature-image-wrap,
  .forest-feature h3,
  .forest-feature p {
    opacity: 1 !important;
    transform: none !important;
  }

  /* PC식 부분 십자선 노출(표 테두리 대신) */
  .forest-feature::before,
  .forest-feature::after {
    transform: scale(1) !important;
    opacity: 1 !important;
  }



  .forest-special-info {
    position: static !important;
    order: 4 !important;

    width: 80% !important;
    margin: 100px 0 0 !important;

    text-align: center !important;

    opacity: 0.8 !important;
    transform: unset !important;

    color: #fff !important;
  }

  .forest-special-info strong {
    display: block !important;
    margin-bottom: 10px !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .forest-special-info p {
    font-size: 10px !important;
    line-height: 1.7 !important;
  }

  .forest-info-br-pc {
    display: none !important;
  }


  /* =====================================================
     섹션4 — 파크라이프(좌측정렬)
     ===================================================== */
  .park-copy {
    transform: none !important;
    padding: 0 24px !important;
    align-items: flex-start !important;
  }

  .park-brand {
    margin-left: 0 !important;
    font-size: 15px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .park-title {
    font-size: 58px !important;
    letter-spacing: 0.02em !important;
  }

  .park-title-word i {
    transform: none !important;
  }

  /* 데스크톱은 is-park-shift 스크롤 단계에서 등장하지만
     모바일은 해당 단계가 없으므로 is-active 문구를 바로 표시.
     park-desc-wrap이 0폭이라 normal이면 한 단어씩 줄바꿈 → <br> 기준 nowrap 유지 */
  .park-desc {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transform: none !important;
  }

  .park-desc.is-active,
  .section04.is-park-shift .park-desc.is-active {
    opacity: 1 !important;
    transform: none !important;
  }

  .park-desc-wrap {
    margin-top: 20px !important;
    min-height: 3.4em !important;
  }

  /* 네비바(01·02·03): 크기 축소 + PARK LIFE의 P 기준 좌측 정렬(x24) */
  .park-slidenav {
    left: 24px !important;
    transform: none !important;
    gap: 16px !important;
  }

  .section04.is-park-shift .park-slidenav {
    transform: none !important;
  }

  .park-slide-btn {
    gap: 8px !important;
  }

  .park-slide-btn em {
    font-size: 14px !important;
  }

  /* 파크라이프 마우스 드래그 커서: 터치기기에는 마우스 커서 개념이 없으므로 항상 숨김
     (드래그 전환 자체도 JS에서 터치/모바일은 비활성화 — 스와이프로만 전환) */
  .premium-cursor {
    display: none !important;
  }






  /* =====================================================
     섹션5 — 풀페이지: 가로 2화면 지그재그
       화면1: 인트로(위) + P1·P2·P3 지그재그
       스크롤 → 화면2: P4(카피 자리) + P5·P6·P7 지그재그
       스냅은 데스크톱 로직 그대로(후보 1920이 트랙 total로 클램프 → 0/끝 2지점)
     ===================================================== */
  .premium-track {
    width: 200vw !important;
    height: var(--app-height, 100vh) !important;
  }

  /* 인트로 카피 3개: 크기 축소 + 아래로 */
  .premium-intro {
    left: 22px !important;
    top: calc(var(--app-height, 100vh) * 0.16) !important;
  }

  .premium-eyebrow {
    font-size: 18px !important;
  }

  .premium-title {
    font-size: 36px !important;
    margin-top: 6px !important;
  }

  .premium-lead {
    font-size: 12px !important;
    margin-top: 14px !important;
  }

  /* 아이템: 이미지+문구 가로 세트(지그재그), 이미지 축소 */
  .premium-item {
    position: absolute !important;
    width: 88vw !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .premium-thumb {
    flex: 0 0 42% !important;
    height: 98px !important;
    clip-path: none !important;
    overflow: hidden !important;
  }

  .premium-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 모바일 전용 이미지(m_)로 교체 */
  .premium-thumb-image-pc {
    display: none !important;
  }

  .premium-thumb-image-m {
    display: block !important;
  }

  .premium-caption {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    flex: 1 1 auto !important;
    width: auto !important;
    text-align: left !important;
  }

  .premium-label {
    font-size: 13px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .premium-desc {
    font-size: 10px !important;
    margin-top: 7px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* (축구장 14개 크기): 위 줄(premium-desc)과 동일한 크기로 */
  .premium-desc-sub {
    font-size: 10px !important;
  }

  /* 화면1: P1·P2·P3 지그재그(이미지 좌/우/좌)
     위치는 뷰포트 높이 비율(%)로 지정 — 작은 기기(iPhone SE 667px 기준)에서
     안 잘리는 선은 지키면서, 큰 기기에서는 아래쪽 빈 공간을 줄여 중앙 쪽으로 내림 */
  .premium-item--1 { left: 18px !important; top: calc(var(--app-height, 100vh) * 0.375) !important; flex-direction: row !important; }
  .premium-item--2 { left: 18px !important; top: calc(var(--app-height, 100vh) * 0.577) !important; flex-direction: row-reverse !important; }
  .premium-item--3 { left: 18px !important; top: calc(var(--app-height, 100vh) * 0.78) !important; flex-direction: row !important; }

  /* 화면2(x+100vw): P4는 인트로 카피 자리(위), 그 아래 P5·P6·P7 지그재그 */
  .premium-item--4 { left: calc(100vw + 18px) !important; top: calc(var(--app-height, 100vh) * 0.135) !important; flex-direction: row !important; }
  .premium-item--5 { left: calc(100vw + 18px) !important; top: calc(var(--app-height, 100vh) * 0.375) !important; flex-direction: row-reverse !important; }
  .premium-item--6 { left: calc(100vw + 18px) !important; top: calc(var(--app-height, 100vh) * 0.577) !important; flex-direction: row !important; }
  .premium-item--7 { left: calc(100vw + 18px) !important; top: calc(var(--app-height, 100vh) * 0.78) !important; flex-direction: row-reverse !important; }

  /* =====================================================
     섹션6 — 풀페이지: CONTACT(한 화면, 지도 2개 세로) → 스와이프 → 푸터
       지도는 모바일 이미지(./img/m/m_main06_mapXX)로 교체 + 글자 축소로
       한 화면에 맞추고, 푸터는 데스크톱 서브스크롤(is-footer-open) 그대로.
     ===================================================== */
  /* 요소 전체를 위로: 상단부터 배치(플로팅과 최대한 안 겹치게) */
  .contact-inner {
    padding: 26px 20px 12px !important;
    justify-content: center !important;
  }

  .contact-eyebrow {
    font-size: 13px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .contact-title {
    font-size: 30px !important;
    margin-top: 4px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .contact-maps {
    flex-direction: column !important;
    width: 100% !important;
    gap: 30px !important;
    margin-top: 12px !important;
    transform: scale(0.8);
    transform-origin: top;
  }

  .contact-map {
    width: 100% !important;
  }

  .contact-map-frame {
    width: 100% !important;
    opacity: 1 !important;
    /* 흰 배경 제거 */
    background: transparent !important;
  }

  /* 데스크톱 지도 숨기고 모바일 지도 사용 */
  .contact-map-pc {
    display: none !important;
  }

  /* 지도 이미지: 섹션 안에 다 들어오도록 높이 상한(뷰포트 비율)을 두고 축소,
     폭은 버튼 줄과 맞춰 100% 유지하면서 살짝만 크롭(cover) */
  .contact-map-m {
    display: block !important;
    width: 100% !important;
    height: 193px !important;
    object-fit: cover !important;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
  }

  .contact-map-caption {
    font-size: 15px !important;
    margin-top: 6px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .contact-map-buttons {
    margin-top: 8px !important;
    gap: 10px !important;
    justify-content: center !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* 버튼: 크기 축소해서 섹션 안에 다 들어오도록 */
  .contact-btn {
    min-width: 0 !important;
    width: 40% !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 12px !important;
  }

  /* 가로모드 등 세로 공간이 부족한 기기에서도 내용이 잘리지 않게(안전장치) —
     한 화면에 다 들어오면 스크롤은 필요 없고, 정말 모자랄 때만 섹션 내부 스크롤.
     justify-content를 flex-start로 둬야 넘칠 때도 처음부터 스크롤로 다 닿을 수 있음 */
  .contact-inner {
    justify-content: flex-start !important;
    overflow-y: hidden !important;
  }

  /* 지도·버튼을 줄여 플로팅과 안 겹치므로 CONTACT(6단)에서도 노출 유지
     (푸터가 보이는 상태(is-footer-section)는 기존 규칙대로 계속 숨김) */
  body.is-contact-header:not(.is-footer-section) .register-control--floating,
  body.is-contact-header:not(.is-footer-section) .open-badge {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

.site-footer {
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #fff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

  .footer-inner {
    text-align: center !important;
    padding-top: 36px !important;
    padding-bottom: 0px !important;
  }

  .footer-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* 로고: 더 작게 축소 + 가운데 + 아래 여백(위 여백은 footer-inner 패딩이 담당) */
  .footer-logo {
    order: 1 !important;
    margin: 0 0 22px !important;
  }

  .footer-logo img {
    width: auto !important;
    height: auto !important;
    max-height: 22px !important;
  }

  /* 로고 아래: 번호(키움) → 시행/시공/위탁(한 줄, 축소) */
  .footer-contact {
    order: 2 !important;
    flex-direction: column !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
  }

  .footer-tel {
    order: 1 !important;
    font-size: 30px !important;
  }

  .footer-partners,
  .footer-partners strong,
  .footer-partners .footer-role {
    font-size: 12px !important;
    letter-spacing: -0.01em !important;
  }

  .footer-partners {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  /* 시행/시공/위탁 라벨 간격 축소(한 줄에 들어가도록) */
  .footer-partners .footer-role {
    margin: 0 2px 0 5px !important;
  }

  .footer-partners .footer-role:first-child {
    margin-left: 0 !important;
  }

  /* PC용 구분선(ㅣ)은 모바일에서 숨김(주소/카피 2줄 분리) */
  .footer-sep {
    display: none !important;
  }

  .footer-text {
    width: 100% !important;
    text-align: center !important;
    margin-top: 24px !important;
  }

  /* 견본주택주소 / 카피라이트: 각 한 줄, 가운데 (글자 키움 — 각 줄 안 넘치는 선에서) */
  .footer-copy {
    font-size: 10px !important;
    line-height: 2.1 !important;
    letter-spacing: -0.01em !important;
    text-align: center !important;
  }

  /* ※(당구장) 문구: 뒤 문장 들여쓰기 줄맞춤(행잉 인덴트) + 살짝 축소 */
  .footer-note {
    font-size: 8px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-indent: -1.35em !important;
    padding: 0 10px 0 20px !important;
    margin-top: 18px !important;
  }

  /* 두 ※ 문구 사이 간격은 좁게 */
  .footer-note + .footer-note {
    margin-top: 6px !important;
  }

  .footer-note:last-of-type {
    margin-bottom: 0px !important;
  }



  .guest-regist {
    padding: 40px 22px 40px;
    /*overflow-y: scroll !important;*/
    /*height: 90vh !important;*/
  }

  html.in-frame .register-card {
    transform: unset !important;
    overflow-y: scroll !important;
  }



  /* GRAND FORET에서는 우측 하단 플로팅 모두 숨김 */
  body.is-forest-section .register-control--floating,
  body.is-forest-section .open-badge {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

















}



/* ============================================================
   일반 모바일 세부 보정
   ============================================================ */

@media (max-width: 480px) {

  .site-header {
    height: 72px !important;
  }

  .site-header {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .header-left {
    left: 18px !important;
  }

  .header-right {
    right: 18px !important;
  }

  .brand-logo-m,
  body.is-detail-header .brand-logo-detail,
  body.is-light-header .brand-logo-detail {
    max-width: 36vw !important;
    max-height: 18px !important;
    object-fit: contain !important;
  }

  .project-type {
    font-size: 10px !important;
  }

  .hero-copy {
    top: 18% !important;
  }

  .hero-copy-image-m {
    max-width: 68vw !important;
  }

  .hero-copy-line {
    height: min(190px, 25vh) !important;
    flex-basis: min(190px, 25vh) !important;
  }

  .hero-copy-text {
    font-size: clamp(15px, 4vw, 18px) !important;
  }

  .overview-title,
  .section02.is-overview-visible .overview-title {
    font-size: clamp(44px, 14vw, 62px) !important;
  }

  .section02.is-overview-split .overview-title {
    font-size: clamp(28px, 9vw, 36px) !important;
  }

  .forest-title {
    font-size: clamp(38px, 12vw, 46px) !important;
  }

  .park-title {
    font-size: clamp(44px, 14vw, 58px) !important;
  }

  .contact-map-caption {
    font-size: clamp(12px, 3.6vw, 15px) !important;
  }
}








/* ============================================================
   Galaxy Fold 외부화면 / 초협폭
   ============================================================ */

@media (max-width: 360px) {

  .site-header {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .header-left {
    left: 12px !important;
  }

  .header-right {
    right: 12px !important;
    gap: 8px !important;
  }

  .project-type {
    font-size: 9px !important;
  }

  .brand-logo-m,
  body.is-detail-header .brand-logo-detail,
  body.is-light-header .brand-logo-detail {
    max-width: 31vw !important;
    max-height: 10px !important;
  }

  .telephone-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .menu-button,
  .menu-line {
    width: 21px !important;
  }


  /* 메인 */

  .hero-copy-image-m {
    max-width: 62vw !important;
  }

  .hero-copy-line {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

  .hero-copy-text {
    font-size: 14px !important;
  }


  /* OVERVIEW */

  .overview-data {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .overview-data-item {
    gap: 8px !important;
  }

  .overview-data dt,
  .overview-data dd {
    font-size: 11px !important;
  }


  /* FOREST */

  .forest-intro-copy {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }

  .forest-eyebrow {
    font-size: 16px !important;
  }

  .forest-title {
    font-size: 37px !important;
  }

  .forest-description {
    font-size: 11px !important;
  }

  .forest-detail-inner {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .forest-feature {
    padding-right: 7px !important;
    padding-left: 7px !important;
  }

  .forest-feature h3 {
    font-size: 13px !important;
  }

  .forest-feature p {
    font-size: 9.5px !important;
  }


  /* PARK */

  .park-copy {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .park-slidenav {
    left: 18px !important;
  }


  /* PREMIUM */

  .premium-intro {
    left: 15px !important;
  }

  .premium-item {
    left: 15px;
    width: calc(100vw - 30px) !important;
  }

  .premium-thumb {
    flex-basis: 40% !important;
  }

  .premium-label {
    font-size: 11px !important;
  }

  .premium-desc,
  .premium-desc-sub {
    font-size: 9px !important;
  }


  /* CONTACT */

  .contact-inner {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .contact-btn {
    font-size: 10px !important;
  }


  /* floating */

  .register-control--floating,
  .register-control--floating .register-circle,
  .register-fill,
  .register-button-text,
  .open-badge {
    width: 58px !important;
    height: 58px !important;
  }

  .open-badge {
    right: 10px !important;
    bottom: 78px !important;
    font-size: 11px !important;
  }

  .register-control--floating {
    right: 10px !important;
    bottom: 12px !important;
  }
}
















@media (max-width: 768px) and (min-height: 850px) {

  .hero-copy {
    top: 22% !important;
  }

  .premium-intro {
    top: 17% !important;
  }

  .premium-item--1 {
    top: 39% !important;
  }

  .premium-item--2 {
    top: 58.5% !important;
  }

  .premium-item--3 {
    top: 78% !important;
  }
}











/* ============================================================
   모바일 가로모드
   ============================================================ */

@media (max-width: 768px) and (orientation: landscape) {

  .site-header {
    height: 58px !important;
  }

  .hero-copy {
    top: 14% !important;
  }

  .hero-copy-image-m {
    max-width: 34vw !important;
  }

  .hero-copy-line {
    height: 70px !important;
    flex-basis: 70px !important;
    margin: 8px 0 !important;
  }

  .hero-copy-text {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .overview-panel-primary,
  .section02.is-overview-split .overview-copy {
    height: 48% !important;
  }

  .overview-panel-secondary,
  .overview-data {
    top: 48% !important;
  }

  .forest-intro-copy {
    transform: scale(.8) !important;
    transform-origin: center center !important;
  }

  .forest-detail-inner {
    padding-top: 60px !important;
  }

  .park-title {
    font-size: 42px !important;
  }

  .premium-intro {
    top: 12% !important;
  }

  .premium-thumb {
    height: 70px !important;
  }

  .contact-inner {
    padding-top: 54px !important;
  }

  .contact-map-m {
    height: 78px !important;
  }
}













@supports (padding: env(safe-area-inset-left)) {

  @media (max-width: 768px),
  (min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {

    .header-left {
      left: max(14px, env(safe-area-inset-left)) !important;
    }

    .header-right {
      right: max(14px, env(safe-area-inset-right)) !important;
    }

    .register-control--floating {
      right: max(14px, env(safe-area-inset-right)) !important;
      bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }

    .open-badge {
      right: max(14px, env(safe-area-inset-right)) !important;
    }

    .forest-detail-inner,
    .contact-inner {
      padding-left:
              0!important;

      padding-right:
              0 !important;
    }
  }
}






/* ============================================================
   태블릿 세로 전용
   Galaxy Tab / iPad portrait
   ============================================================ */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {

  .site-header {
    height: 82px !important;
  }

  .contact-inner {
    padding: 280px 40px 50px !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .contact-head {
    margin-top: 0 !important;
  }

  .contact-eyebrow {
    font-size: 15px !important;
  }

  .contact-title {
    margin-top: 8px !important;
    font-size: 38px !important;
  }

  .contact-maps {
    width: min(720px, 88vw) !important;
    gap: 34px !important;
    margin-top: 30px !important;

    transform: scale(0.7) !important;
  }

  .contact-map {
    width: 100% !important;
  }

  .contact-map-frame {
    width: 100% !important;
  }

  .contact-map-m {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .contact-map-caption {
    margin-top: 10px !important;
    font-size: 14px !important;
  }

  .contact-map-buttons {
    margin-top: 12px !important;
  }

  .contact-btn {
    width: 44% !important;
    height: 42px !important;
    font-size: 12px !important;
  }
}


@media (max-width: 768px) {
  .guest-modal {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .guest-modal-panel {
    height: calc(100vh - 24px) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    min-height: 0;
    overflow: hidden !important;
  }

  .guest-modal-frame {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    border: 0;
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
}
/* ========================================
   GRAND FORET 지도 + 유의문구 - MOBILE
======================================== */
@media (max-width: 767px) {

  /* PC bg02 위에 표시되는 안내문은 모바일에서 숨김 */
  .section03 .forest-detail-notice {
    display: none !important;
  }

  /*
   * 모바일 지도 영역
   * 안내문구가 이미지 아래로 나올 수 있도록
   * overflow를 반드시 visible로 변경
   */
  .section03 .forest-map-frame {
    position: relative !important;

    display: block !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    overflow: visible !important;

    background: transparent !important;

    clip-path: none !important;

    opacity: 1 !important;

    transform: none !important;
  }

  /* PC 지도 이미지 숨김 */
  .section03 .forest-map-image {
    display: none !important;
  }

  /* 모바일 지도 이미지 */
  .section03 .forest-map-image-m {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;

    object-fit: contain !important;
  }

  /* 모바일 지도 아래 안내문구 */
  .section03 .forest-map-frame .forest-map-notice {
    position: static !important;

    display: block !important;

    width: 100% !important;

    margin: 7px 0 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box;

    color: #555555 !important;

    font-family:
            "Noto Sans CJK KR",
            "Noto Sans KR",
            sans-serif !important;

    font-size: 8px !important;
    font-weight: 300 !important;
    line-height: 1.55 !important;
    letter-spacing: -0.04em !important;

    text-align: left !important;

    white-space: normal !important;
    word-break: keep-all !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    z-index: 10 !important;
  }

}

/* ========================================
   GRAND FORET 지도 + 유의문구 - MOBILE
======================================== */
@media (max-width: 768px),
(min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {

  /* PC bg02 하단 유의문구는 모바일에서 숨김 */
  .section03 .forest-detail-notice {
    display: none !important;
  }

  /*
   * 지도 + 안내문구가 잘리지 않도록
   * 부모 overflow 해제
   */
  .section03 .forest-detail {
    overflow: hidden !important;
  }

  .section03 .forest-detail-inner {
    overflow: visible !important;
  }

  /* 모바일 지도 프레임 */
  .section03 .forest-map-frame {
    position: relative !important;

    display: block !important;
    order: -1 !important;
    flex: 0 0 auto !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 0 12px !important;

    aspect-ratio: auto !important;

    overflow: visible !important;

    background: transparent !important;

    clip-path: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    transition: none !important;
  }

  /* PC 지도 숨김 */
  .section03 .forest-map-image {
    display: none !important;
  }

  /* 모바일 m_main03_map 노출 */
  .section03 .forest-map-image-m {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;

    margin: 0 !important;

    object-fit: contain !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  /* m_main03_map 바로 아래 안내문구 */
  .section03 .forest-map-frame .forest-map-notice {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 6px 0 0 !important;
    padding: 0 10px !important;

    box-sizing: border-box !important;

    color: #555555 !important;

    font-family:
            "Noto Sans CJK KR",
            "Noto Sans KR",
            sans-serif !important;

    font-size: 8px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.045em !important;

    text-align: left !important;

    white-space: normal !important;
    word-break: keep-all !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    z-index: 10 !important;
  }
}


/* ========================================
   GRAND FORET 지도 + 유의문구 - MOBILE
======================================== */
@media (max-width: 768px),
(min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {

  /* PC bg02 하단 유의문구는 모바일에서 숨김 */
  .section03 .forest-detail-notice {
    display: none !important;
  }

  /*
   * 지도 + 안내문구가 잘리지 않도록
   * 부모 overflow 해제
   */
  .section03 .forest-detail {
    overflow: hidden !important;
  }

  .section03 .forest-detail-inner {
    overflow: visible !important;
  }

  /* 모바일 지도 프레임 */
  .section03 .forest-map-frame {
    position: relative !important;

    display: block !important;
    order: -1 !important;
    flex: 0 0 auto !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 0 12px !important;

    aspect-ratio: auto !important;

    overflow: visible !important;

    background: transparent !important;

    clip-path: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    transition: none !important;
  }

  /* PC 지도 숨김 */
  .section03 .forest-map-image {
    display: none !important;
  }

  /* 모바일 m_main03_map 노출 */
  .section03 .forest-map-image-m {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;

    margin: 0 !important;

    object-fit: contain !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  /* m_main03_map 바로 아래 안내문구 */
  .section03 .forest-map-frame .forest-map-notice {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 6px 0 0 !important;
    padding: 0 10px !important;

    box-sizing: border-box !important;

    color: #555555 !important;

    font-family:
            "Noto Sans CJK KR",
            "Noto Sans KR",
            sans-serif !important;

    font-size: 8px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.045em !important;

    text-align: left !important;

    white-space: normal !important;
    word-break: keep-all !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    z-index: 10 !important;
  }
}


.hero-copy-image-m {
  opacity: 0 !important;
  transform: translateY(20px) !important;
}

.hero-copy-line {
  transform: scaleY(0) !important;
}

.hero-copy-text {
  opacity: 0 !important;
  transform: translateY(28px) !important;
}

.section01.is-copy-expanded .hero-copy-image-m {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.section01.is-copy-expanded .hero-copy-line {
  transform: scaleY(1) !important;
}

.section01.is-copy-expanded .hero-copy-text {
  opacity: 1 !important;
  transform: translateY(0) !important;
}