#index {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#index form,
#index .bg {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#index .bg img {
  width: auto;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(5px 5px 5px #000);
}

/* 기본 이미지 공통 */
#index .bg img.logo {
  position: relative;
  z-index: 3;
  filter: drop-shadow(5px 5px 5px #000);
  animation: glitch-skew 3s infinite steps(20);
  will-change: transform, filter;
}

/* 기존 .logo에 준 z-index=3 유지, 글리치 레이어는 그 위 */
#index .bg img.glitch-layer {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;   /* 배경 어두울수록 밝게 겹침 */
  opacity: 0.9;
  z-index: 4;               /* 로고(3) 위 */
  will-change: transform, clip-path, filter, left, top, width, height;
}

/* 수평 스캔(가로 이동) – 레드/시안 채널이 좌우로 흔들림 */
@keyframes glitch-h-shift {
  0%   { transform: translateX(0); }
  6%   { transform: translateX(6px); }
  12%  { transform: translateX(-6px); }
  18%  { transform: translateX(4px); }
  24%  { transform: translateX(-4px); }
  30%  { transform: translateX(8px); }
  60%  { transform: translateX(0); }
  62%  { transform: translateX(-10px); }
  64%  { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/* 수평 밴드(클립) – 위아래로 얇은 띠만 보이게 번갈아 잘라냄 */
@keyframes glitch-h-bands {
  0%   { clip-path: inset(0   0 0   0); }
  5%   { clip-path: inset(8%  0 70%  0); }
  10%  { clip-path: inset(42% 0 44%  0); }
  15%  { clip-path: inset(5%  0 78%  0); }
  20%  { clip-path: inset(80% 0 6%   0); }
  25%  { clip-path: inset(25% 0 60%  0); }
  30%  { clip-path: inset(55% 0 25%  0); }
  35%  { clip-path: inset(12% 0 72%  0); }
  40%  { clip-path: inset(68% 0 12%  0); }
  60%  { clip-path: inset(0   0 0   0); }
  62%  { clip-path: inset(46% 0 36%  0); }
  64%  { clip-path: inset(48% 0 32%  0); }
  100% { clip-path: inset(0   0 0   0); }
}

/* 원본 로고는 스큐 제거(세로 흔들림 방지). 필요하면 아주 미세한 흔들림만 */
#index .bg img.logo {
  position: relative;
  z-index: 3;
  filter: drop-shadow(5px 5px 5px #000);
  animation: none; /* 가로 전용이라면 원본은 고정 */
}

/* 모션 줄이기 */
@media (prefers-reduced-motion: reduce) {
  .glitch-layer,
  #index .bg img.logo { animation: none !important; }
}


#index .bg img.planet {
  position: absolute;
  z-index: 1;
  right: 5%;
  top: 5%;
  opacity: 0.5;
  animation: planet 5s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-mask-image: linear-gradient(35deg, transparent 0%, black 100%);
  mask-image: linear-gradient(35deg, transparent 40%, black 100% 100%);
  filter: unset;
}

@keyframes planet {
  0%   { transform: translateY(-10px); }
  50%  { transform: translateY( 10px); }
  100% { transform: translateY(-10px); }
}

#index form label,
#index form input[type=text],
#index form input[type=tel],
#index form textarea {
  display: block;
}

#index form .card {
  width: 100%;
  max-width: 60%;
  height: auto;
}

#index form .card h2 {
  font-family: 'PB_B';
	font-weight: bold;
  font-size: 40px;
  color: #fff;
  margin-bottom: 30px;
}

#index form .card label {
  font-family: 'PB_M';
	font-weight: normal;
  font-size: 24px;
  color: #fff;
  margin-bottom: 10px;
}

#index form input[type=text],
#index form input[type=tel] {
  width: 100%;
  height: 40px;
  background: transparent;
  border: 1px solid  rgba(255,255,255,0.4);
  margin-bottom: 30px;
  border-radius: 5px;
  font-family: 'PB_R';
	font-weight: normal;
  color: #fff;
  font-size: 18px;
  padding: 0 10px;
}

#index form textarea {
  width: 100%;
  height: 200px;
  background: transparent;
  border: 1px solid  rgba(255,255,255,0.4);
  margin-bottom: 10px;
  border-radius: 5px;
  font-family: 'PB_R';
	font-weight: normal;
  color: #fff;
  font-size: 18px;
  padding: 10px;
  resize: none;
}

#index form .agree {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-bottom: 30px;
}

/* 기본 스타일 */
#index form .agree input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid #fff;
  border-radius: 2px;
  background: transparent;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  vertical-align: middle;
}

/* 포커스(접근성) */
#index form .agree input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}

/* 호버 */
#index form .agree input[type="checkbox"]:hover {
  border-color: #fff;
}

/* 체크됐을 때: 하얀색 체크 표시 */
#index form .agree input[type="checkbox"]:checked {
  /* 배경은 투명 유지 */
  background-color: transparent;
  /* 정중앙 하얀 체크 아이콘(SVG) */
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'>\<polyline points='3.5 8.5 6.5 11.5 12.5 4.5'/>\</svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* 비활성화 */
#index form .agree input[type="checkbox"]:disabled{
  opacity: .5;
  cursor: not-allowed;
}

#index form .agree span {
  font-size: 16px;
  font-family: 'PB_R';
	font-weight: normal;
}

#index form button[type=submit] {
  width: 100%;
  height: 40px;
  border: 1px solid  rgba(255,255,255,0.4);
  border-radius: 5px;
  font-family: 'PB_B';
	font-weight: bold;
  font-size: 24px;
  color: #fff;
  -webkit-transition: border-color 0.3s, color 0.3s;
  transition: border-color 0.3s, color 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  overflow: hidden;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  background: transparent;
}

#index form button[type=submit]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  z-index: -1;
  -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
  transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
  transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}

#index form button[type=submit]:hover {
  color: #000;
  border-color: #fff;
}

#index form button[type=submit].button--inverted:hover {
  color: #fff;
  border-color: #000;
}

#index form button[type=submit]:hover::before {
  opacity: 1;
  background-color: #fff;
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

#index form button[type=submit].button--inverted:hover::before {
  background-color: #000;
}

#index form ul li {
  list-style: disc inside;
  font-family: 'PB_R';
	font-weight: normal;
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
}

#index form ul li:last-of-type {
  margin-bottom: 0;
}

/* 배경: 검정 → 회색 그대로 */
#index .bg {
  background: #474747;
  background: linear-gradient(336deg, rgba(71, 71, 71, 1) 0%, rgba(43, 43, 43, 1) 20%, rgba(0, 0, 0, 1) 100%);
  border-radius: 50% 0 0 50%;
  overflow: hidden;
  position: relative;
}

/* 흰색 별똥별 */
.shooting_star {
  position: absolute;
  height: 2px;
  /* 궤적을 흰색 그라데이션으로 */
  background: linear-gradient(-45deg, rgba(255,255,255,1), rgba(255,255,255,0));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
  animation:
    tail 3000ms ease-in-out infinite,
    shooting 3000ms ease-in-out infinite; /* 대각 이동 */
}

/* 번쩍이는 꼬리 끝 (흰색) */
.shooting_star::before,
.shooting_star::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
  border-radius: 100%;
  animation: shining 3000ms ease-in-out infinite;
}

.shooting_star::before { transform: translateX(50%) rotateZ(45deg); }
.shooting_star::after  { transform: translateX(50%) rotateZ(-45deg); }

/* ---------------- 분산 배치 ----------------
   컨테이너가 .bg.night 인 상태 기준.
   가운데 기준(calc(50% - …)) 대신 퍼센트로 화면 전체에 고루 배치.
   필요하면 top/left, delay 값만 취향에 맞게 조정해도 돼.
*/
.bg.night .shooting_star:nth-child(1)  { top: 5%; left:  8%; animation-delay:    0ms; }
.bg.night .shooting_star:nth-child(2)  { top: 20%; left: 28%; animation-delay:  300ms; }
.bg.night .shooting_star:nth-child(3)  { top: 16%; left: 48%; animation-delay:  600ms; }
.bg.night .shooting_star:nth-child(4)  { top: 40%; left: 68%; animation-delay:  900ms; }
.bg.night .shooting_star:nth-child(5)  { top: 10%; left: 88%; animation-delay: 1200ms; }

.bg.night .shooting_star:nth-child(6)  { top: 56%; left: 12%; animation-delay: 1500ms; }
.bg.night .shooting_star:nth-child(7)  { top: 72%; left: 32%; animation-delay: 1800ms; }
.bg.night .shooting_star:nth-child(8)  { top: 32%; left: 52%; animation-delay: 2100ms; }
.bg.night .shooting_star:nth-child(9)  { top: 80%; left: 72%; animation-delay: 2400ms; }
.bg.night .shooting_star:nth-child(10) { top: 48%; left: 92%; animation-delay: 2700ms; }

/* ===== keyframes ===== */
@keyframes tail {
  0%   { width: 0; }
  40%  { width: 100px; }
  100% { width: 0; }
}

@keyframes shining {
  0%   { width: 0; }
  50%  { width: 30px; }
  100% { width: 0; }
}

/* 대각선(↗/↘)은 회전각으로 조절 가능 */
@keyframes shooting {
  0%   { transform: rotate(45deg) translateX(0); }
  100% { transform: rotate(45deg) translateX(300px); } /* 300px 만큼 대각 진행 */
}

/* sky 회전 사용 안 하면 생략 가능 */
@keyframes sky {
  0%   { transform: rotate(45deg); }
  100% { transform: rotate(405deg); }
}

@media (max-width: 1200px) {
  #index {
    height: auto;
    flex-wrap: wrap;
  }

  #index form {
    order: 1;
  }

  #index .bg img {
    height: 150px;
  }

  #index .bg {
    height: 300px;
    border-radius: 0 0 50% 50%;
  }

  #index .bg img.planet {
    right: unset;
    top: unset;
    left: 50%;
    bottom: -40%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, black 100%);
    mask-image: linear-gradient(0deg, transparent 40%, black 100% 100%);
    height: auto;
  }

  @keyframes planet {
    0%   { transform: translate(-50%,-10px); }
    50%  { transform: translate(-50%, 10px); }
    100% { transform: translate(-50%,-10px); }
  }
}

@media (max-width: 700px) {
  #index .bg img {
    height: 100px;
  }

  #index .bg {
    height: 200px;
  }

  #index form .card {
    max-width: 90%;
  }

  #index .bg img.planet {
    height: 250px;
  }
}

@media (max-width: 500px) {
  #index form .card h2 {
    font-size: 30px;
  }

  #index form .card label {
    font-size: 20px;
  }

  #index form input[type=text], #index form input[type=tel] {
    height: 35px;
    font-size: 16px;
    padding: 0 5px;
  }

  #index form textarea {
    height: 150px;
    font-size: 16px;
    padding: 5px;
  }

  #index form .agree span {
    font-size: 14px;
  }

  #index form button[type=submit] {
    font-size: 20px;
  }
}

@media (max-width: 400px) {
  #index .bg img {
    height: 60px;
  }

  #index .bg {
    height: 120px;
  }

  .shooting_star {
    height: 1px;
  }

  .bg.night .shooting_star:nth-child(3n) {
    display: none;
  } 

  #index form .card h2 {
    font-size: 24px;
  }

  #index form .card label {
    font-size: 16px;
  }

  #index form input[type=text], #index form input[type=tel] {
    height: 30px;
    font-size: 12px;
    margin-bottom: 20px;
  }

  #index form textarea {
    font-size: 12px;
  }

  #index form .agree input[type="checkbox"] {
    width: 12px;
    height: 12px;
  }

  #index form .agree span {
    font-size: 12px;
  }

  #index form button[type=submit] {
    height: 35px;
    font-size: 16px;
  }

  #index form ul li {
    font-size: 12px;
  }

  #index .bg img.planet {
    height: 200px;
    bottom: -85%;
  }
}