/* 기본 */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: white;
}

/* 네비게이션 (우측 상단 텍스트 링크) */
.nav {
  position: fixed;
  top: 30px;
  right: 40px;
  display: flex;
  gap: 20px;
  z-index: 1000;
}

.nav a {
  text-decoration: none;
  color: black;
  font-size: 16px;
}

.nav a:hover {
  opacity: 0.6;
}

/* 페이지 타이틀 (왼쪽 중앙) */
.main-title {
  position: fixed;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0;
  color: #000;
  z-index: 900;
}

/* 갤러리 영역 (랜덤 배치) */
.gallery {
  position: relative;
  width: 100%;
  height: 220vh;
  margin-top: 0;
}

.gallery img {
  position: absolute;
  width: 200px;
  object-fit: cover;
  display: block;
}

/* 랜덤 위치 */
.gallery img:nth-child(1) { top: 100px; left: 50px; }
.gallery img:nth-child(2) { top: 300px; left: 400px; }
.gallery img:nth-child(3) { top: 600px; left: 150px; }
.gallery img:nth-child(4) { top: 50px; left: 100px; }
.gallery img:nth-child(5) { top: 150px; left: 800px; }
.gallery img:nth-child(6) { top: 500px; left: 900px; }
.gallery img:nth-child(7) { top: 0px; left: 400px; }
.gallery img:nth-child(9) { top: 1000px; left: 100px; }
.gallery img:nth-child(2) { 
  top: 300px; 
  left: 400px; 
  width: 420px;        /* ← 지금 기본이 260px이면 정확히 2배 */
  animation: none;    /* ← 둥둥/비/굴러감 전부 제거 */
  transition: none;   /* ← hover 효과도 제거 */
}
.gallery img:nth-child(4) { 
  top: 00px; 
  left: 100px; 
  width: 2220px;        /* ← 지금 기본이 260px이면 정확히 2배 */
  animation: none;    /* ← 둥둥/비 효과 제거 */
  transition: none;   /* ← hover 효과 제거 */
}
@keyframes sparkle {
  0% {
    transform: translate(0, 0);
    opacity: 0.8;
  }
  50% {
    transform: translate(20px, -20px);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.8;
  }
}
.gallery img:nth-child(4) {
  top: -200px;
  left: 100px;
  width: 1220px;
  position: absolute;
animation: sparkle 1.2s steps(1) infinite;
  transition: none;
}
.gallery img:nth-child(8) {
  top: 140px;     /* 원하는 위치 */
  left: 1000px;
  width: 420px;   /* 크기 */
  position: absolute;
}
.gallery img:nth-child(9) {
  top: 920px;     /* 원하는 위치 */
  left: 360px;
  width: 820px;   /* 크기 */
  position: absolute;
}
.about-wrapper {
  width: 40%;
  margin: 150px auto 100px;
  font-family: Arial, Helvetica, sans-serif;
}

.about-title {
  font-size: 22px;
  margin-bottom: 40px;
  font-weight: normal;
}

.about-text {
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 40px;
}

.about-divider {
  margin: 50px 0;
  border: none;
  border-top: 1px solid #ccc;
}
.about-dots {
  position: relative;
  width: 100%;
  height: 600px;  /* 이미지가 흩어지는 영역 높이 */
  overflow: hidden;
  margin-top: 80px;
}

/* 모든 이미지 공통 스타일 */
.about-dots img {
  width: 180px;                 /* 이미지 크기 (땡땡이처럼) */
  position: absolute;
  animation: float 5s ease-in-out infinite;
  opacity: 1;
}

/* 랜덤처럼 보이게 nth-child 개별 위치 지정 */
.about-dots img:nth-child(1)  { top: 20px; left: 0%; animation-delay: 0s; }
.about-dots img:nth-child(2)  { top: 80px; left: 25%; animation-delay: .5s; }
.about-dots img:nth-child(3)  { top: 150px; left: 40%; animation-delay: 1s; }
.about-dots img:nth-child(4)  { top: 250px; left: 60%; animation-delay: 1.3s; }
.about-dots img:nth-child(5)  { top: 330px; left: 80%; animation-delay: .3s; }
.about-dots img:nth-child(6)  { top: 400px; left: 15%; animation-delay: 1.6s; }
.about-dots img:nth-child(7)  { top: 450px; left: 50%; animation-delay: .8s; }
.about-dots img:nth-child(8)  { top: 50px; left: 70%; animation-delay: 2s; }
.about-dots img:nth-child(9)  { top: 300px; left: 5%; animation-delay: .2s; }
.about-dots img:nth-child(10) { top: 120px; left: 55%; animation-delay: 1.1s; }
.about-dots img:nth-child(11) { top: 380px; left: 35%; animation-delay: 1.5s; }
.about-dots img:nth-child(12) { top: 10px; left: 85%; animation-delay: 2.3s; }
.about-dots img:nth-child(13) { top: 200px; left: 30%; animation-delay: .9s; }
.about-dots img:nth-child(14) { top: 420px; left: 75%; animation-delay: 1.8s; }
.about-dots img:nth-child(15) { top: 500px; left: 45%; animation-delay: .6s; }

/* 둥글둥글 굴러다니는 반짝 효과 */
@keyframes float {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-10px, -15px) rotate(10deg); }
  50%  { transform: translate(10px, 15px) rotate(-10deg); }
  75%  { transform: translate(-5px, -10px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
/* about 전체 배경 패턴 */
.about-page {
  background-image: url("img/img10.jpg");
  background-repeat: repeat;      /* 패턴처럼 반복되게 */
  background-size: 10px;         /* 패턴 크기 — 원하면 키우거나 줄일 수 있음 */
  background-position: center;
}
.about-page {
  background-image: url("img/img11.jpg"); /* 이미지 경로 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.back-home-btn {
  display: inline-block;
  margin: 20px;
  padding: 14px 20px;
  background: #fff8ff;
  border: 2px solid #ffb3e6;
  color: #cc66cc;
  font-family: "Comic Sans MS", "Brush Script MT", cursive;
  font-size: 14px;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 0 6px rgba(25,0,20,0.3);
}

.back-home-btn:hover {
  background: #ffe6ff;
  transform: scale(1.05);
}
/* 버튼 컨테이너 */
.cute-buttons {
  position: relative;
  width: 100%;
  height: 300px; /* 버튼이 떠다닐 공간 */
}

/* 공통 버튼 스타일 */
.cute-btn {
  position: absolute;
  padding: 18px 28px;
  border-radius: 40px;
  font-family: "shell",  cursive;
  font-size: 15px;
  text-decoration: none;
  color: gray;
  font-weight: normal;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

/* 각 버튼 색·위치 (랜덤 배치 느낌) */
.btn1 {
  background: #AEE2FF; /* 연하늘 */
  top: -1200px;
  left: 20%;
}

.btn2 {
  background: #E9D1FF; /* 연보라 */
  top: -1000px;
  left: 55%;
}

.btn3 {
  background: #C8FFB2; /* 연두 */
  top: -1500px;
  left: 35%;
}

.cute-btn:hover {
  transform: scale(1.08) rotate(-2deg);
}
.about-dots {
  position: relative;
  width: 100%;
  height: 600px;  /* 이미지가 흩어지는 영역 높이 */
  overflow: hidden;
  margin-top: 80px;
}

/* 모든 이미지 공통 스타일 */
.about-dots img {
  width: 180px;                 /* 이미지 크기 (땡땡이처럼) */
  position: absolute;
  animation: float 3s ease-in-out infinite;
  opacity: 1;
}

/* 랜덤처럼 보이게 nth-child 개별 위치 지정 */
.about-dots img:nth-child(1)  { top: 20px; left: 0%; animation-delay: 0s; }
.about-dots img:nth-child(2)  { top: 80px; left: 25%; animation-delay: .5s; }
.about-dots img:nth-child(3)  { top: 20px; left: 40%; animation-delay: 1s; }
.about-dots img:nth-child(4)  { top: 250px; left: 60%; animation-delay: 1.3s; }
.about-dots img:nth-child(5)  { top: 330px; left: 80%; animation-delay: .3s; }
.about-dots img:nth-child(6)  { top: 400px; left: 115%; animation-delay: 1.6s; }
.about-dots img:nth-child(7)  { top: 450px; left: 50%; animation-delay: .8s; }
.about-dots img:nth-child(8)  { top: 50px; left: 70%; animation-delay: 2s; }
.about-dots img:nth-child(9)  { top: 100px; left: 5%; animation-delay: .2s; }
.about-dots img:nth-child(10) { top: 120px; left: 55%; animation-delay: 1.1s; }
.about-dots img:nth-child(11) { top: 380px; left: 35%; animation-delay: 1.5s; }
.about-dots img:nth-child(12) { top: 10px; left: 55%; animation-delay: 2.3s; }
.about-dots img:nth-child(13) { top: 200px; left: 30%; animation-delay: .9s; }
.about-dots img:nth-child(14) { top: 420px; left: 75%; animation-delay: 1.8s; }
.about-dots img:nth-child(15) { top: 500px; left: 45%; animation-delay: .6s; }

.long-bg {
  display: flex;
  justify-content: center;  /* 가로 중앙정렬 */
  margin-top: 120px;         /* 필요하면 조절 가능 */
}

.long-bg img {
  width: 60%;    /* 원래 100% → 60% 로 줄임 = 40% 작아짐 */
  height: auto;
}
/* 이미지 26 랜덤 배치 + 회전 애니메이션 */
.img26-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2800px; /* 페이지 전체 영역 — 필요하면 늘려 */
  overflow: visible;
  pointer-events: none; /* 클릭 방해 안 하도록 */
}

.img26-wrap img {
  width: 160px;        /* 이미지 크기 */
  position: absolute;
  animation: spin 6s linear infinite;
  opacity: 0.9;
}

/* 골고루 흩뿌려진 위치 10개 */
.img26-wrap img:nth-child(1) { top: 100px;  left: 5%;  animation-delay: .2s; }
.img26-wrap img:nth-child(2) { top: 350px;  left: 25%; animation-delay: .9s; }
.img26-wrap img:nth-child(3) { top: 600px;  left: 50%; animation-delay: .4s; }
.img26-wrap img:nth-child(4) { top: 900px;  left: 75%; animation-delay: 1.3s; }
.img26-wrap img:nth-child(5) { top: 1200px; left: 15%; animation-delay: .7s; }
.img26-wrap img:nth-child(6) { top: 1500px; left: 65%; animation-delay: 1.7s; }
.img26-wrap img:nth-child(7) { top: 1800px; left: 35%; animation-delay: .5s; }
.img26-wrap img:nth-child(8) { top: 2100px; left: 85%; animation-delay: 1.1s; }
.img26-wrap img:nth-child(9) { top: 2400px; left: 45%; animation-delay: .8s; }
.img26-wrap img:nth-child(10){ top: 2700px; left: 10%; animation-delay: 1.5s; }

/* 회전 애니메이션 */
@keyframes spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.random-img {
  position: absolute;
  width: 120px;
  pointer-events: none;
}

/* 각 이미지마다 완전 다르게 튀게 만들기 */
.random-img:nth-child(1) { transform: translate(10vw, 5vh) rotate(13deg) scale(1.1); }
.random-img:nth-child(2) { transform: translate(55vw, 12vh) rotate(-27deg) scale(0.9); }
.random-img:nth-child(3) { transform: translate(25vw, 45vh) rotate(48deg) scale(1.2); }
.random-img:nth-child(4) { transform: translate(70vw, 30vh) rotate(-5deg) scale(0.95); }
.random-img:nth-child(5) { transform: translate(15vw, 80vh) rotate(77deg) scale(1.05); }
.random-img:nth-child(6) { transform: translate(82vw, 60vh) rotate(-63deg) scale(1.15); }
.random-img:nth-child(7) { transform: translate(40vw, 110vh) rotate(22deg) scale(0.85); }
.random-img:nth-child(8) { transform: translate(5vw, 130vh) rotate(-40deg) scale(1.25); }
.random-img:nth-child(9) { transform: translate(65vw, 150vh) rotate(90deg) scale(1.1); }
.random-img:nth-child(10){ transform: translate(30vw, 170vh) rotate(-15deg) scale(0.95); }

.img27 {
  position: absolute;
  width: 600px;      /* 필요하면 조절해 */
  left: 6%;         /* 왼쪽으로 치우치게 */
  top: 68vh;         /* 화면 중간 아래쯤 */
  transform: translateY(50px); /* 조금 더 아래 느낌 */
}
@keyframes crazy-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(3600deg); } /* 한 번에 3600도 회전 (엄청 빠름) */
}

.spin-crazy {
  animation: crazy-spin 0.4s linear infinite; /* 클릭하면 미친 속도로 회전 */
}
#img27 {
  transition: transform 0.3s ease;
}

#img27:hover {
  transform: scale(1.12);
}
#img28 {
  width: 450px;          /* PNG니까 너무 크지 않게 */
  position: absolute;
  left: 450%;
  top: 665%;              /* 화면 중간~아래 */
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

#img28:hover {
  transform: translate(-50%, -50%) scale(1.12);
}
/* 체크박스 숨기기 */
#trigger28 {
  display: none;
}

/* 하얘지는 레이어 */
#flash-overlay {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 3s ease;
}

/* img29 기본 상태 */
#img29 {
  position: fixed;
  left: 50%;
  top: 60%;
  width: 820px;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: 1000;
  transition:
    transform 0.6s cubic-bezier(.2,1.6,.4,1),
    opacity 0.3s ease;
}

/* ✅ 클릭 후 상태 */
#trigger28:checked ~ #flash-overlay {
  opacity: 1;
}

#trigger28:checked ~ #img29 {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
body.how-to-come {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 비디오를 배경처럼 */
.bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

/* 콘텐츠는 위로 */
.page-content {
  position: relative;
  z-index: 1;
}

/* 체크박스 숨기기 */
#moveBtn {
  display: none;
}

/* 이미지 기본 상태 */
.img30 {
  position: fixed;
  left: 40px;
  top: 50%;
  transform: translate(0, -50%);
  width: 180px;
  cursor: pointer;

  transition: transform 0.3s ease;
}

/* hover 효과 */
.img30:hover {
  transform: translate(0, -50%) scale(1.08);
}

/* ✅ 클릭(체크)되었을 때만 이동 */
#moveBtn:checked + label .img30 {
  animation: zigzagMove 4s ease-in-out forwards;
}

/* 지그재그 이동 */
@keyframes zigzagMove {
  0% {
    transform: translate(0, -50%);
  }

  20% {
    transform: translate(180px, 80px);
  }

  40% {
    transform: translate(360px, -120px);
  }

  60% {
    transform: translate(540px, 100px);
  }

  80% {
    transform: translate(720px, -80px);
  }

  100% {
    /* 오른쪽 중간 도착 */
    transform: translate(calc(100vw - 260px), -50%);
  }
}
.img31 {
  position: fixed;
  right: 40px;        /* 화면 오른쪽 여백 */
  top: 50%;           /* 세로 중앙 */
  transform: translateY(-50%);
  width: 260px;       /* 원하는 크기로 조절 */
}
h1 {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 2.6rem;      /* 기본보다 살짝 큼 */
  color: red;
  margin-bottom: 0.4em;
}
h1 + p {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 1.2rem;
  color: red;
}
.title {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 2.6rem;
  color: red;

  /* 위치 조절 */
  position: fixed;      /* 화면 기준 */
  top: 50px;
  left: 100%;
  transform: translateX(-50%);
}

.subtitle {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 1.2rem;
  color: red;

  /* 제목 아래로 */
  position: fixed;
  top: 100px;
  left: 100%;
  transform: translateX(-50%);
}
#img31Btn {
  display: none;
}

.img31 {
  position: fixed;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  cursor: pointer;

  transition: transform 0.2s ease, filter 0.2s ease;
}

.img31:hover {
  transform: translateY(-50%) scale(1.08);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

#img31Btn:checked + label .img31 {
  transform: translateY(-50%) scale(0.95);
}
/* img32 기본 상태: 안 보임 */
.img32 {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 120vh;
  object-fit: cover;

  opacity: 0;
  pointer-events: none;
  z-index: 50;
}

/* img31 클릭 시 img32 등장 */
#img31Btn:checked ~ .img32 {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.8s ease;
}
body {
  margin: 0;
  overflow: hidden;
  background: white;
}

.rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.drop {
  position: absolute;
  top: -30vh;
  left: -30vw;
  width: 100;
  opacity: 0.9;
}
.rain33 .drop {
  animation: fall33 linear infinite;
}

@keyframes fall33 {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    transform: translate(110vw, 130vh) rotate(360deg);
  }
}

.rain33 .d1  { animation-duration: 30s; width: 180px; animation-delay: -2s; }
.rain33 .d2  { animation-duration: 26s; width: 160px; animation-delay: -6s; }
.rain33 .d3  { animation-duration: 34s; width: 200px; animation-delay: -10s; }
.rain33 .d4  { animation-duration: 28s; width: 350px; animation-delay: -14s; }
.rain33 .d5  { animation-duration: 32s; width: 190px; animation-delay: -18s; }
.rain33 .d6  { animation-duration: 27s; width: 170px; animation-delay: -8s; }
.rain33 .d7  { animation-duration: 35s; width: 210px; animation-delay: -20s; }
.rain33 .d8  { animation-duration: 29s; width: 260px; animation-delay: -12s; }
.rain33 .d9  { animation-duration: 31s; width: 185px; animation-delay: -16s; }
.rain33 .d10 { animation-duration: 33s; width: 195px; animation-delay: -22s; }

.rain34 .drop {
  animation: fall34 linear infinite;
}

@keyframes fall34 {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    transform: translate(140vw, 160vh) rotate(720deg);
  }
}

.rain34 .d1  { animation-duration: 20s; width: 560px; animation-delay: -3s; }
.rain34 .d2  { animation-duration: 18s; width: 100px; animation-delay: -7s; }
.rain34 .d3  { animation-duration: 22s; width: 130px; animation-delay: -11s; }
.rain34 .d4  { animation-duration: 19s; width: 110px; animation-delay: -15s; }
.rain34 .d5  { animation-duration: 24s; width: 340px; animation-delay: -5s; }
.rain34 .d6  { animation-duration: 21s; width: 115px; animation-delay: -9s; }
.rain34 .d7  { animation-duration: 23s; width: 135px; animation-delay: -13s; }
.rain34 .d8  { animation-duration: 17s; width: 495px;  animation-delay: -17s; }
.rain34 .d9  { animation-duration: 26s; width: 500px; animation-delay: -19s; }
.rain34 .d10 { animation-duration: 20s; width: 125px; animation-delay: -21s; }

.rain35 .drop {
  animation: fall35 linear infinite;
}

@keyframes fall35 {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    transform: translate(160vw, 180vh) rotate(1080deg);
  }
}

.rain35 .d1  { animation-duration: 14s; width: 480px; animation-delay: -2s; }
.rain35 .d2  { animation-duration: 12s; width: 570px; animation-delay: -4s; }
.rain35 .d3  { animation-duration: 15s; width: 85px; animation-delay: -6s; }
.rain35 .d4  { animation-duration: 11s; width: 605px; animation-delay: -8s; }
.rain35 .d5  { animation-duration: 13s; width: 75px; animation-delay: -10s; }
.rain35 .d6  { animation-duration: 16s; width: 90px; animation-delay: -12s; }
.rain35 .d7  { animation-duration: 12s; width: 70px; animation-delay: -14s; }
.rain35 .d8  { animation-duration: 14s; width: 80px; animation-delay: -16s; }
.rain35 .d9  { animation-duration: 10s; width: 60px; animation-delay: -18s; }
.rain35 .d10 { animation-duration: 15s; width: 85px; animation-delay: -20s; }
/* =========================
   SIZE CONTROL ZONE
   ========================= */

/* img34 사이즈 */
:root {
  --img34-min: 190px;
  --img34-max: 250px;

  --img35-min: 250px;
  --img35-max: 500px;
}
/* =========================
   FORCE SCROLL RECOVERY
   ========================= */

html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 화면 덮는 fixed 요소가 스크롤 죽이는 거 방지 */
body > * {
  position: relative;
}

/* fixed 배경/오버레이 무력화 */
.fullscreen,
.overlay,
.bg,
.background {
  position: absolute !important;
}
.artist-info {
  position: fixed;
  top: 100px;   /* ← 기존 40px → 80px */
  right: 50px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}


.artist-image {
  width: 300px;        /* 텍스트 박스랑 비슷한 폭 */
  top: 80px;
  right: 40px;
  object-fit: cover;
}

.artist-text {
  max-width: 320px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #000;
}

.artist-text .name {
  font-weight: bold;
  margin-bottom: 12px;
}
body {
  margin: 0;
  overflow: hidden;
  background: white;
}

.rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.rain img {
  position: absolute;
  width: 160px;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ↓ 각각 위치 + 속도 다르게 */
.rain img:nth-child(1)  { left: 5%;  animation-duration: 18s; }
.rain img:nth-child(2)  { left: 15%; animation-duration: 22s; }
.rain img:nth-child(3)  { left: 28%; animation-duration: 20s; }
.rain img:nth-child(4)  { left: 38%; animation-duration: 26s; }
.rain img:nth-child(5)  { left: 48%; animation-duration: 19s; }
.rain img:nth-child(6)  { left: 58%; animation-duration: 24s; }
.rain img:nth-child(7)  { left: 68%; animation-duration: 21s; }
.rain img:nth-child(8)  { left: 78%; animation-duration: 27s; }
.rain img:nth-child(9)  { left: 88%; animation-duration: 23s; }
.rain img:nth-child(10) { left: 12%; animation-duration: 25s; }
.rain img:nth-child(11) { left: 32%; animation-duration: 17s; }
.rain img:nth-child(12) { left: 52%; animation-duration: 29s; }
.rain img:nth-child(13) { left: 72%; animation-duration: 20s; }

/* 비처럼 위 → 아래 */
@keyframes fall {
  from {
    top: -30%;
  }
  to {
    top: 110%;
  }
}
#img28 {
  position: sticky !important;
  left: 50% !important;
  bottom: 5vh !important;

  transform: translateX(-50%) !important;

  max-width: 40vw !important;
  height: auto !important;

  margin-top: calc(100vh - 40vh) !important;
}
#img28 {
  transition: transform 0.25s ease !important;
}

#img28:hover {
  transform: translateX(-50%) scale(1.08) !important;
}
html, body {
  margin: 0;
  padding: 0;
}

.image-wrapper {
  min-height: 120vh;              /* 살짝 스크롤 생기게 */
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 8vh 0;                 /* 위아래 여백 */
  box-sizing: border-box;
}

.image-wrapper img {
  width: 90vw;                    /* 좌우 여백 */
  height: auto;
  display: block;
}
h1, p {
  color: #B6FF00;
  text-shadow:
    0 0 6px rgba(182,255,0,0.6),
    0 0 14px rgba(182,255,0,0.8),
    0 0 28px rgba(182,255,0,0.6);
}
h1, p {
  color: #000000;
  animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 6px rgba(182,255,0,0.4);
  }
  to {
    text-shadow: 0 0 20px rgba(182,255,0,0.9);
  }
}
body {
  margin: 0;
  height: 300vh;           /* 스크롤 길이 */
  background: white;
  overflow-x: hidden;
}

.collage {
  position: relative;
  width: 100%;
  height: 300vh;
}

/* 공통 스타일 */
.collage img {
  position: absolute;
  width: 180px;
}

/* 하나하나 위치 + 크기 다르게 (랜덤 느낌) */
.collage img:nth-child(1)  { top: 10vh;  left: 15vw;  width: 620px; }
.collage img:nth-child(2)  { top: 30vh;  left: 55vw;  width: 940px; }
.collage img:nth-child(3)  { top: 69vh;  left: 0vw;  width: 260px; }
.collage img:nth-child(4)  { top: 80vh;  left: 45vw;  width: 380px; }

.collage img:nth-child(5)  { top: 110vh; left: 10vw;  width: 300px; }
.collage img:nth-child(6)  { top: 130vh; left: 45vw;  width: 860px; }
.collage img:nth-child(7)  { top: 150vh; left: 70vw;  width: 230px; }

.collage img:nth-child(8)  { top: 175vh; left: 20vw;  width: 200px; }
.collage img:nth-child(9)  { top: 190vh; left: 50vw;  width: 580px; }

.collage img:nth-child(10) { top: 215vh; left: 5vw;  width: 450px; }
.collage img:nth-child(11) { top: 275vh; left: 5vw;  width: 460px; }

.collage img:nth-child(12) { top: 255vh; left: 30vw;  width: 190px; }
.collage img:nth-child(13) { top: 270vh; left: 55vw;  width: 320px; }

.collage img:nth-child(14) { top: 290vh; left: 60vw;  width: 880px; }
.collage img:nth-child(15) { top: 305vh; left: 40vw;  width: 240px; }

.collage img:nth-child(16) { top: 420vh; left: -5vw;  width: 1000px; }
.collage img:nth-child(17) { top: 340vh; left: 20vw;  width: 280px; }

.collage img:nth-child(18) { top: 360vh; left: 50vw;  width: 660px; }
.collage img:nth-child(19) { top: 380vh; left: 30vw;  width: 300px; }
html, body {
  height: auto !important;
  min-height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden;
  position: static !important;
}
body {
  margin: 0;
  min-height: 100vh;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(235, 245, 210, 0.6) 0px,
      rgba(235, 245, 210, 0.6) 120px,
      rgba(220, 235, 220, 0.6) 120px,
      rgba(220, 235, 220, 0.6) 260px
    ),
    linear-gradient(
      180deg,
      #f4f8dc 0%,
      #eef6d2 50%,
      #eaf3dc 100%
    );
  background-attachment: fixed;
}
body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
img {
  transition: transform 0.25s ease;
}

img:hover {
  transform: translateY(-50px) scale(1.08);
}
/* 트리거 숨기기 */
#surprise-trigger {
  display: none;
}

/* 화면 전체 하얀 페이드 */
.white-fade {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 900;
  transition: opacity 5s ease;
}

/* 등장할 이미지 70 */
.surprise-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  z-index: 1000;
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1.6, 0.36, 1);
}

/* 클릭 후 상태 */
#surprise-trigger:checked ~ .white-fade {
  opacity: 1;
}

/* 배경 전체 블러 */
#surprise-trigger:checked ~ *:not(.white-fade):not(.surprise-image):not(label) {
  filter: blur(10px);
  transition: filter 1s ease;
}

/* 5초 뒤 이미지 70 등장 */
#surprise-trigger:checked ~ .surprise-image {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 5s;
}
.page-bg {
  position: absolute; /* fixed ❌ */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("img/img71.jpg") center / cover no-repeat;
  z-index: -1;
}
html, body {
  background: white !important;
}
body.click-page {
  background-image: url("img/img71.jpg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#img65 {
  width: 280px;   /* ← 여기 숫자만 조절 */
  height: auto;
}
#img65 {
  position: absolute;
  top: 300px;    /* ← 위아래 조절 */
  left: 200px;   /* ← 좌우 조절 */
}
.surprise-image {
  width: 450px;   /* ← 여기만 바꾸면 됨 */
  max-width: 100vw;
  height: auto;
}
body.about-page {
  background-image: url("img/img72.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll; /* fixed ❌ */
}
/* 🔥 모든 기존 배경 완전 무력화 */
html, body {
  background: transparent !important;
}

/* 🔥 about 전용 배경 바닥 */
.about-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("img/img72.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -9999;   /* ← 모든 것보다 아래 */
}

/* 내용은 위로 */
.about-content {
  position: relative;
  z-index: 1;
}