main.css

/* Global */
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, "Noto Sans KR", sans-serif;
  background: linear-gradient(180deg, #1F2125 0%, #141414 100%);
}

.container {
  height: 100%; width: 100%;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

section {
  height: 100vh; width: 100%;
  scroll-snap-align: start;
  position: relative; color: white; overflow: hidden;
  perspective: 1000px;
}

/* Section 1 */
.section1-stage { position: relative; width: 100%; height: 100%; }
.logo { position: absolute; left: 100px; top: 100px; }
.section1-tickets,
.section1-title {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.section1-headline {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center;
}
.headline { font-size: 64px; margin: 0; }
.headline.accent { color: #FFF3B6; }

/* Common centered box */
.centered {
  text-align: center; margin: auto;
  position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%);
}

/* Upload */
.upload-box {
  width: 500px; height: 250px;
  border: 2px dashed #ccc; border-radius: 12px;
  background: rgba(255,255,255,0.1);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  cursor: pointer;
}
.upload-box input { display: none; }

.file-hints {
  margin-top: 20px; display: flex; gap: 10px; justify-content: center;
}
.file-hints span {
  background: rgba(255,255,255,0.2);
  padding: 4px 8px; border-radius: 6px;
}
.subtle { color: #bbb; margin-top: 10px; }
.muted { color: #C7C9D9; }

.file-btn {
  margin-top: 20px; padding: 12px 24px;
  background: white; color: #031859; font-weight: bold;
  border: none; border-radius: 8px; cursor: pointer;
  transition: opacity .3s ease;
}
.file-btn:disabled {
  opacity: .2;
  cursor: not-allowed;
}

/* Login */
.login-form {
  display: flex; flex-direction: column; gap: 16px;
  width: 400px; margin: 0 auto;
}
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-icon {
  position: absolute; left: 12px; width: 20px; height: 20px; pointer-events: none;
}
.input-wrapper input {
  width: 100%; padding: 12px 12px 12px 40px; font-size: 16px;
  border: 1px solid #ccc; border-radius: 20px; background: transparent; color: #fff;
}

.login-btn {
  padding: 20px; background: #fff; color: #031859; font-weight: bold;
  border: none; border-radius: 20px; cursor: pointer; transition: opacity .3s ease;
}
.login-btn:disabled {
  opacity: .2; cursor: not-allowed;
}

.signup-link { margin-top: 10px; color: #bbb; cursor: pointer; }

/* Divider */
.divider {
  width: 100%; display: inline-flex; justify-content: space-between; align-items: center;
  height: 100%; margin-top: 10px;
}
.divider .line {
  width: 130px; height: 0; outline: .78px white solid; outline-offset: -.39px;
}
.divider .label {
  text-align: center; color: white; font-size: 15px; font-weight: 500; line-height: 15.7px;
}

/* Social login */
.social-login { display: flex; gap: 20px; justify-content: center; margin-top: 20px; }
.social-login button {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background-size: cover; background-position: center;
}
.google { background-image: url("public/images/google-icon.svg"); background-color: white; }
.kakao  { background-image: url("public/images/kakao-icon.svg");  background-color: #FEE500; }

/* Tickets (animation) */
.ticket {
  position: absolute; will-change: transform, opacity;
  transform-style: preserve-3d; backface-visibility: hidden;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
}
.ticket1-pos { bottom: 0%; left: 11%; }
.ticket2-pos { top: -2%; left: 10%; }