/* ============================================================
   인트로 오버레이 — 진입 시 하얀 배경에서 사진+문구 시퀀스 후
   차분한 페이드로 홈페이지 진입
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  overflow: hidden;
  cursor: none; /* 커스텀 SKIP 커서 사용 */
  opacity: 1;
  transition: opacity 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro.is-hidden {
  opacity: 0;
  pointer-events: none;
}

body.is-intro-active {
  /* 인트로 동안 뒤 페이지 스크롤/상호작용 방지 */
  overflow: hidden;
}

/* --- 씬(그룹) 공통 --- */
.intro-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 6vw;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro-scene[hidden] {
  display: none;
}

/* --- 문구 --- */
.intro-text {
  font-family: "SDMyeongjoNeoaUltLt", "SDMyeongjoNeoa UltLt", "SDMyeongjoNeo",
    "Nanum Myeongjo", "Noto Serif KR", serif;
  font-size: 35px;
  font-weight: 300;
  line-height: 1.2;
  color: #2b2b2b;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* --- 사진 --- */
.intro-photo {
  display: block;
  height: 54vh;
  width: auto;
  max-width: 24vw;
  object-fit: cover;
}

/* =====================================================
   그룹1 — 공원과 · 집의 · 만남 (가로 트립틱, 페이드업)
   ===================================================== */
.intro-scene--1 {
  gap: clamp(46px, 5.4vw, 104px);
}

.intro-col {
  display: flex;
  flex-direction: column;
}

/* 공원과: 이미지 아래, '과'가 이미지 우측 끝선에 맞게(우측 정렬) + 위여백 */
.intro-col--a .intro-text {
  align-self: flex-end;
  margin-top: 28px;
  text-align: right;
}

/* 집의: 이미지 위, '의'가 이미지(img2) 우측 끝선에 맞게(우측 정렬) */
.intro-col--b {
  align-items: center;
  justify-content: flex-end;
}
.intro-col--b .intro-text {
  align-self: flex-end;
  margin-bottom: 28px;
  text-align: right;
}

/* 만남: 이미지 아래, '남'이 이미지(img3) 우측 끝선에 맞게(우측 정렬) */
.intro-col--c {
  align-items: center;
}
.intro-col--c .intro-text {
  align-self: flex-end;
  margin-top: 28px;
  text-align: right;
}

/* =====================================================
   그룹2 — 자연과 · 주거가 · 하나되는 이곳 (세로 지그재그, 페이드 좌/우)
   ===================================================== */
.intro-scene--2 {
  flex-direction: column;
  gap: clamp(38px, 5.2vh, 78px);
}

.intro-row {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 48px);
  width: min(780px, 90vw);
}

/* 세 행 모두 좌측 기준 정렬:
   → 주거가(5) 우측끝 = img4 우측끝, 하나되는 이곳(6) 좌측끝 = img5 좌측끝 (자동·반응형) */
.intro-row--d {
  justify-content: flex-start;
}
.intro-row--e {
  justify-content: flex-start;
}
.intro-row--f {
  justify-content: flex-start;
}

.intro-scene--2 .intro-photo {
  height: 23vh;
  max-width: 34vw;
}

/* =====================================================
   진입/퇴장 애니메이션
   ===================================================== */
.intro-photo,
.intro-text {
  opacity: 0;
  will-change: opacity, transform;
}

/* 그룹1: 페이드업(아래에서 위로) */
.intro-scene--1 .intro-photo,
.intro-scene--1 .intro-text {
  transform: translateY(48px);
  transition:
    opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 인트로2(집의 + 두번째 이미지)는 위에서 아래로 내려오며 등장 */
.intro-col--b .intro-photo,
.intro-col--b .intro-text {
  transform: translateY(-48px);
}
.intro-scene--1 .is-in {
  opacity: 1;
  transform: translateY(0);
}
/* 그룹1 퇴장: 문구와 이미지가 같은 방향으로 함께 이동하며 사라짐(1·3 아래로 / 2 위로) */
.intro-col--a .intro-photo.is-out,
.intro-col--a .intro-text.is-out,
.intro-col--c .intro-photo.is-out,
.intro-col--c .intro-text.is-out {
  opacity: 0;
  transform: translateY(150px);
}
.intro-col--b .intro-photo.is-out,
.intro-col--b .intro-text.is-out {
  opacity: 0;
  transform: translateY(-150px);
}

/* 그룹2: d·f 페이드레프트(오른쪽에서), e 페이드라이트(왼쪽에서) */
.intro-row--d .intro-photo,
.intro-row--d .intro-text,
.intro-row--f .intro-photo,
.intro-row--f .intro-text {
  transform: translateX(60px);
  transition:
    opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intro-row--e .intro-photo,
.intro-row--e .intro-text {
  transform: translateX(-60px);
  transition:
    opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intro-row .is-in {
  opacity: 1;
  transform: translateX(0);
}
/* 그룹2 퇴장: 4·6 우측으로 쭉 / 5 좌측으로 쭉 */
.intro-row--d .is-out,
.intro-row--f .is-out {
  opacity: 0;
  transform: translateX(210px);
}
.intro-row--e .is-out {
  opacity: 0;
  transform: translateX(-210px);
}

/* =====================================================
   타이틀·로고 이미지 (그룹3·4) — 차분한 페이드
   ===================================================== */
.intro-titleimg,
.intro-logoimg {
  display: block;
  width: auto;
  height: auto;
  max-width: 74vw;
  max-height: 60vh;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.intro-titleimg.is-in,
.intro-logoimg.is-in {
  opacity: 1;
}
.intro-titleimg.is-out,
.intro-logoimg.is-out {
  opacity: 0;
}

/* =====================================================
   SKIP — 마우스 따라다니는 커서형 + 클릭 시 건너뛰기
   ===================================================== */
/* SKIP — 마우스를 따라다니는 커서: 검은 원 + skip + 뒤에 펄스 링 (어나드 방식) */
.intro-skip-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  /* 위치는 JS가 transform: translate(x,y) translate(-50%,-50%)로 제어 */
}
.intro-skip-cursor.is-visible {
  opacity: 1;
}
.intro-skip-cursor p {
  font-family: "Lexend", "Jost", sans-serif;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.intro-skip-cursor::before {
  content: "";
  position: absolute;
  left: -12px;
  top: -12px;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: #000000;
  opacity: 0.6;
  animation:
    intro-skip-scale 2.1s ease infinite,
    intro-skip-fade 2.1s ease infinite;
}
@keyframes intro-skip-scale {
  0%,
  30% {
    transform: scale(0.7);
  }
  80%,
  100% {
    transform: scale(1);
  }
}
@keyframes intro-skip-fade {
  0% {
    opacity: 0;
  }
  20%,
  70% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

/*!* 모바일: 사진 크기·문구 축소 *!*/
/*@media (max-width: 768px) {*/
/*  .intro-text {*/
/*    font-size: 24px;*/
/*  }*/
/*  .intro-scene--1 {*/
/*    gap: 14px;*/
/*    padding: 8vh 5vw;*/
/*  }*/
/*  .intro-photo {*/
/*    height: 40vh;*/
/*    max-width: 30vw;*/
/*  }*/
/*  .intro-scene--2 .intro-photo {*/
/*    height: 16vh;*/
/*    max-width: 42vw;*/
/*  }*/
/*  .intro-row {*/
/*    width: 92vw;*/
/*    gap: 18px;*/
/*  }*/
/*  .intro-skip-cursor {*/
/*    display: none; !* 모바일은 터치 → 커서형 숨김 *!*/
/*  }*/
/*  .intro {*/
/*    cursor: pointer;*/
/*  }*/
/*}*/





/* ============================================================
   INTRO MOBILE
   ============================================================ */
@media (max-width: 768px) {

  .intro {
    width: 100%;
    height: 100dvh;
    cursor: default;
  }


  /* =====================================================
     SCENE 01
     PC의 3열 느낌은 유지하되 모바일 화면 안에 정확히 수납
     ===================================================== */

  .intro-scene--1 {
    width: 100%;
    gap: clamp(10px, 3vw, 18px);
    padding:
            max(50px, env(safe-area-inset-top))
            18px
            max(90px, calc(env(safe-area-inset-bottom) + 70px));
  }

  .intro-col {
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
  }

  .intro-scene--1 .intro-photo {
    width: 100%;
    height: clamp(210px, 38vh, 310px);
    max-width: 100%;
    object-fit: cover;
  }

  .intro-text {
    font-size: clamp(20px, 6vw, 26px);
  }

  .intro-col--a .intro-text,
  .intro-col--c .intro-text {
    margin-top: 18px;
  }

  .intro-col--b .intro-text {
    margin-bottom: 18px;
  }


  /* =====================================================
     SCENE 02
     ===================================================== */

  .intro-scene--2 {
    gap: clamp(26px, 5vh, 44px);
    padding:
            max(50px, env(safe-area-inset-top))
            20px
            max(90px, calc(env(safe-area-inset-bottom) + 70px));
  }

  .intro-row {
    width: min(100%, 420px);
    gap: clamp(14px, 4vw, 22px);
    margin-left: auto;
    margin-right: auto;
  }

  .intro-row--d,
  .intro-row--e,
  .intro-row--f {
    justify-content: center;
  }

  .intro-scene--2 .intro-photo {
    width: auto;
    height: clamp(105px, 16vh, 145px);
    max-width: 48%;
    object-fit: cover;
  }

  .intro-scene--2 .intro-text {
    font-size: clamp(19px, 5.5vw, 25px);
  }


  /* =====================================================
     TITLE / LOGO
     ===================================================== */

  .intro-titleimg,
  .intro-logoimg {
    max-width: 78vw;
    max-height: 42vh;
  }


  /* =====================================================
   SKIP — 모바일은 항상 우측 하단 고정 노출
   ===================================================== */

  .intro-skip-cursor {
    display: flex !important;

    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 20px !important;
    bottom: 24px !important;

    width: 62px !important;
    height: 62px !important;

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

    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #000 !important;

    /* 핵심 */
    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    z-index: 10001 !important;

    pointer-events: auto !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* is-visible 클래스가 없어도 모바일에서는 항상 노출 */
  .intro-skip-cursor.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .intro-skip-cursor p {
    position: relative !important;
    z-index: 2 !important;

    margin: 0 !important;

    color: #fff !important;
    font-family: "Lexend", "Jost", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    pointer-events: none !important;
  }

  /* 기존 PC 펄스링 그대로 */
  .intro-skip-cursor::before {
    content: "" !important;

    position: absolute !important;
    top: -10px !important;
    left: -10px !important;

    width: 82px !important;
    height: 82px !important;

    border-radius: 50% !important;

    background: #000 !important;
    opacity: 0.3;

    pointer-events: none !important;

    animation:
            intro-skip-scale 2.1s ease infinite,
            intro-skip-fade 2.1s ease infinite !important;
  }
}