/* ===== OVERLAY ===== */
.overlay__logo {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: 4px; color: var(--t-primary);
}
.overlay__label {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.3); letter-spacing: 1px;
}
.overlay__skip {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.4); padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; background: rgba(255,255,255,0.03);
}

/* ===== HERO ===== */
#hero {
  min-height: 100vh;
  background: radial-gradient(ellipse at center, #0D0D30 0%, var(--bg-base) 70%);
}
.hero__content {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
  gap: 32px; padding: 180px 120px 120px;
  text-align: center;
}
.hero__tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 20px;
  background: rgba(255,255,255,0.08);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  color: var(--c-hero);
}
.hero__tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-hero); }
.hero__title {
  font-family: var(--font-display); font-size: 96px; font-weight: 700;
  line-height: 1.1; color: var(--t-primary); max-width: 1100px;
  overflow: hidden; /* SplitText clip */
}
.hero__subtitle {
  font-size: 18px; color: var(--t-muted); line-height: 1.6; max-width: 600px;
}
.hero__cta-row { display: flex; gap: 16px; align-items: center; }
.hero__cta-main {
  padding: 16px 36px; border-radius: 2px;
  background: var(--c-hero); color: #050812;
  font-size: 16px; font-weight: 700;
}
.hero__cta-secondary {
  padding: 16px 36px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05); color: var(--t-primary);
  font-size: 16px;
}

/* Nebula blobs */
.hero__nebula {
  position: absolute; border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.hero__nebula[data-index="1"] { width:600px;height:600px;top:-100px;right:-100px;background:radial-gradient(#9333EA55,transparent 70%);opacity:.5; }
.hero__nebula[data-index="2"] { width:500px;height:500px;bottom:0;left:-150px;background:radial-gradient(#4F46E544,transparent 70%);opacity:.4; }
.hero__nebula[data-index="3"] { width:300px;height:300px;top:200px;left:300px;background:radial-gradient(#C084FC22,transparent 70%);opacity:.3; }
.hero__nebula[data-index="4"] { width:400px;height:400px;bottom:100px;right:200px;background:radial-gradient(#818CF822,transparent 70%);opacity:.3; }

/* Stars */
.hero__star-big, .hero__star-small {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: #fff;
}
.hero__star-big  { width:8px;height:8px;box-shadow:0 0 8px 2px rgba(255,255,255,0.5); }
.hero__star-small{ width:3px;height:3px;opacity:.6; }

/* Randomly place stars via nth-child */
.hero__star-big:nth-child(1)  { top:15%;left:10%; }
.hero__star-big:nth-child(2)  { top:25%;right:20%; }
.hero__star-big:nth-child(3)  { top:40%;left:30%; }
.hero__star-big:nth-child(4)  { top:60%;right:10%; }
.hero__star-big:nth-child(5)  { top:75%;left:60%; }
.hero__star-big:nth-child(6)  { top:10%;left:70%; }
.hero__star-small:nth-child(1) { top:8%;left:5%; }
.hero__star-small:nth-child(2) { top:20%;left:45%; }
.hero__star-small:nth-child(3) { top:30%;right:35%; }
.hero__star-small:nth-child(4) { top:50%;left:15%; }
.hero__star-small:nth-child(5) { top:65%;right:25%; }
.hero__star-small:nth-child(6) { top:80%;left:80%; }
.hero__star-small:nth-child(7) { top:12%;right:15%; }
.hero__star-small:nth-child(8) { top:45%;right:55%; }
.hero__star-small:nth-child(9) { top:55%;left:55%; }
.hero__star-small:nth-child(10){ top:72%;left:35%; }
.hero__star-small:nth-child(11){ top:85%;right:45%; }
.hero__star-small:nth-child(12){ top:35%;left:85%; }

/* SVG constellation overlays */
.hero__const-group-a,
.hero__const-group-b {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero__const-line-a, .hero__const-line-b {
  fill: none; stroke: rgba(192,132,252,0.4); stroke-width: 1;
}
.hero__const-dot-a, .hero__const-dot-b {
  fill: #fff; opacity: 0.7;
}

/* Scroll indicator */
.hero__scroll-indicator {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  color: rgba(255,255,255,0.4); z-index: 10;
}
.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
}
.hero__page-index {
  position: absolute; bottom: 40px; right: 64px;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.3); letter-spacing: 1px;
}

/* ===== UPLOAD ===== */
#upload {
  background: linear-gradient(180deg, var(--bg-base) 0%, #080820 100%);
}
#upload .section-inner { padding: 120px; text-align: center; }
.upload__title {
  font-family: var(--font-display); font-size: 48px; font-weight: 700;
  line-height: 1.2; margin-bottom: 24px;
}
.upload__dropzone {
  border: 1px solid rgba(192,132,252,0.3);
  border-radius: 4px; padding: 64px 48px;
  background: rgba(13,13,34,0.8);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 640px; margin: 0 auto 32px;
  transition: border-color var(--dur-mid) ease, box-shadow var(--dur-mid) ease;
}
.upload__dropzone:hover { border-color: var(--c-hero); }
.upload__dropzone-icon { font-size: 32px; color: var(--c-hero); }
.upload__dropzone p { color: var(--t-muted); font-size: 15px; }
.upload__dropzone small { color: rgba(255,255,255,0.3); font-family: var(--font-mono); font-size: 11px; }
.upload__btn {
  padding: 16px 40px; border-radius: 2px;
  background: var(--c-hero); color: #050812;
  font-size: 16px; font-weight: 700;
}

/* ===== HOW IT WORKS ===== */
#how { background: #080820; }
#how .section-inner { padding: 120px; }
.how__tag {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px;
  color: var(--c-how); margin-bottom: 16px; display: block; text-align: center;
}
.how__title {
  font-family: var(--font-display); font-size: 48px; font-weight: 700;
  text-align: center; line-height: 1.2;
}
.how__card {
  background: linear-gradient(135deg, #0D1526 0%, #131830 100%);
  border: 1px solid rgba(192,132,252,0.1);
  border-radius: 4px; padding: 48px 40px;
  display: flex; flex-direction: column; gap: 20px;
  height: 380px;
}
.how__card[data-index="2"] {
  background: linear-gradient(135deg, #0F1020 0%, #141428 100%);
  border-color: rgba(129,140,248,0.1);
}
.how__card-line {
  height: 2px; background: var(--c-hero);
  transform-origin: left; /* scaleX 애니메이션용 */
}
.how__card[data-index="2"] .how__card-line { background: var(--c-upload); }
.how__card-num {
  font-family: var(--font-display); font-size: 80px; font-weight: 700;
  color: rgba(192,132,252,0.27); line-height: 1;
}
.how__card[data-index="2"] .how__card-num { color: rgba(129,140,248,0.27); }
.how__card-title { font-size: 24px; font-weight: 700; }
.how__card-desc  { font-size: 15px; color: var(--t-muted); line-height: 1.7; }

/* ===== GALLERY ===== */
#gallery { background: var(--bg-base); }
#gallery .section-inner { padding: 120px; }
.gallery__tag {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px;
  color: var(--c-gallery); display: block; text-align: center; margin-bottom: 16px;
}
.gallery__title {
  font-family: var(--font-display); font-size: 48px; font-weight: 700; text-align: center;
}
.gallery__item {
  position: relative; overflow: hidden; border-radius: 2px;
  cursor: pointer;
}
.gallery__item-img { height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery__item:hover .gallery__item-img { transform: scale(1.04); }
.gallery__item-label {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 12px; border-radius: 20px;
  background: rgba(192,132,252,0.13); color: var(--c-hero);
  pointer-events: none;
}
.gallery__item:nth-child(2) .gallery__item-label {
  background: rgba(129,140,248,0.13); color: var(--c-upload);
}
.gallery__bar {
  margin-top: 24px; display: flex; justify-content: center;
}
.gallery__count {
  font-family: var(--font-mono); font-size: 12px; color: var(--t-muted); letter-spacing: 0.5px;
}

/* ===== CONSTELLATIONS ===== */
#constellations { background: var(--bg-base); }
.const__header {
  padding: 48px 120px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.const__tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: rgba(192,132,252,0.53); display: flex; align-items: center; gap: 12px;
}
.const__tag::before, .const__tag::after {
  content: ''; display: block; width: 20px; height: 1px;
  background: rgba(192,132,252,0.6);
}
.const__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; color: var(--c-hero); }
.const__title  { font-family: var(--font-display); font-size: 64px; font-weight: 700; }
.const__subtitle { font-size: 15px; color: var(--t-muted); }
.const__grid { padding: 0 120px 120px; }
.const__card {
  background: linear-gradient(135deg, #0D1526 0%, #131830 100%);
  border-radius: 4px;
  border: 1px solid rgba(192,132,252,0.13);
  display: flex; flex-direction: column;
  overflow: hidden; cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.const__card:hover { border-color: rgba(192,132,252,0.4); }
.const__card-draw { flex: 1; overflow: hidden; }
.const__card-draw svg { width: 100%; height: 100%; }
.const__card-path {
  fill: none;
  stroke-width: 1.2;
  /* stroke-dasharray/offset는 JS가 설정 */
}
.const__card-star {
  fill: #fff;
  filter: drop-shadow(0 0 3px rgba(192,132,252,0.6));
}
.const__card-info {
  padding: 12px 16px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.const__card-name { font-size: 14px; font-weight: 600; color: var(--t-primary); }
.const__card-date { font-family: var(--font-mono); font-size: 10px; color: rgba(192,132,252,0.53); }

/* ── Row 2: Indigo #818CF8 */
.const__row:nth-child(2) .const__card {
  background: linear-gradient(135deg, #0F1020 0%, #141428 100%);
  border-color: rgba(129,140,248,0.13);
}
.const__row:nth-child(2) .const__card:hover { border-color: rgba(129,140,248,0.4); }
.const__row:nth-child(2) .const__card-date  { color: rgba(129,140,248,0.53); }
.const__row:nth-child(2) .const__card-star  { filter: drop-shadow(0 0 3px rgba(129,140,248,0.6)); }

/* ── Row 3: Emerald #34D399 */
.const__row:nth-child(3) .const__card {
  background: linear-gradient(135deg, #0A1A18 0%, #0D1E1C 100%);
  border-color: rgba(52,211,153,0.13);
}
.const__row:nth-child(3) .const__card:hover { border-color: rgba(52,211,153,0.4); }
.const__row:nth-child(3) .const__card-date  { color: rgba(52,211,153,0.53); }
.const__row:nth-child(3) .const__card-star  { filter: drop-shadow(0 0 3px rgba(52,211,153,0.6)); }

/* ── Row 4: Amber #F59E0B */
.const__row:nth-child(4) .const__card {
  background: linear-gradient(135deg, #1A1200 0%, #1E1500 100%);
  border-color: rgba(245,158,11,0.13);
}
.const__row:nth-child(4) .const__card:hover { border-color: rgba(245,158,11,0.4); }
.const__row:nth-child(4) .const__card-date  { color: rgba(245,158,11,0.53); }
.const__row:nth-child(4) .const__card-star  { filter: drop-shadow(0 0 3px rgba(245,158,11,0.6)); }

/* ===== CTA ===== */
#cta {
  min-height: 500px;
  background: radial-gradient(ellipse at center, #1A0A3E 0%, #0F0520 60%, var(--bg-base) 100%);
}
.cta__decor {
  position: absolute; top: 80px; right: 120px;
  font-family: var(--font-display); font-size: 320px; font-weight: 700;
  color: rgba(255,255,255,0.02); pointer-events: none; line-height: 1;
  user-select: none;
}
.cta__nebula {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.cta__nebula[data-index="1"] { width:600px;height:600px;top:-80px;right:-100px;background:radial-gradient(#9333EA55,transparent 70%);filter:blur(55px);opacity:.65; }
.cta__nebula[data-index="2"] { width:500px;height:500px;top:100px;left:-150px;background:radial-gradient(#4F46E544,transparent 70%);filter:blur(45px);opacity:.5; }
.cta__nebula[data-index="3"] { width:320px;height:320px;top:280px;left:50%;background:radial-gradient(#C084FC33,transparent 70%);filter:blur(30px);opacity:.4; }
.cta__ring {
  position: absolute; top:50%;left:50%;
  border-radius:50%; border:1px solid rgba(192,132,252,0.15);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.cta__ring:nth-of-type(1) { width:120px;height:120px; }
.cta__ring:nth-of-type(2) { width:200px;height:200px;border-color:rgba(192,132,252,0.07); }
.cta__star-glow {
  position: absolute; border-radius: 50%;
  background: #fff; pointer-events: none;
}
.cta__star-glow:nth-child(1) { width:7px;height:7px;top:55px;left:182px;box-shadow:0 0 12px 4px rgba(255,255,255,0.47); }
.cta__star-glow:nth-child(2) { width:6px;height:6px;top:42px;left:748px;background:var(--c-hero);box-shadow:0 0 14px 5px rgba(192,132,252,0.53); }
.cta__star-glow:nth-child(3) { width:7px;height:7px;top:78px;right:182px;background:var(--c-upload);box-shadow:0 0 12px 4px rgba(129,140,248,0.47); }
.cta__star-glow:nth-child(4) { width:5px;height:5px;bottom:135px;left:458px;box-shadow:0 0 10px 3px rgba(255,255,255,0.4); }
.cta__star-glow:nth-child(5) { width:6px;height:6px;bottom:118px;right:278px;background:var(--c-hero);box-shadow:0 0 14px 5px rgba(192,132,252,0.47); }
.cta__tag {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: rgba(192,132,252,0.53);
}
.cta__tag::before, .cta__tag::after {
  content: ''; display: block; width: 20px; height: 1px;
  background: rgba(192,132,252,0.6);
}
.cta__title {
  font-family: var(--font-display); font-size: 76px; font-weight: 700;
  line-height: 1.2; max-width: 1100px;
}
.cta__subtitle { font-size: 18px; color: var(--t-muted); }
.cta__btn {
  padding: 18px 48px; border-radius: 2px;
  background: var(--c-hero); color: #050812;
  font-size: 18px; font-weight: 700;
}

/* ===== FOOTER ===== */
#footer { background: var(--bg-base); }
.footer__line-top, .footer__line-bottom {
  height: 1px; background: rgba(255,255,255,0.08);
}
.footer__logo {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: 5px;
}
.footer__links a {
  font-size: 14px; color: var(--t-muted);
  transition: color 0.2s ease;
}
.footer__links a:hover { color: var(--t-primary); }
.footer__tagline {
  font-family: var(--font-display); font-style: italic;
  font-size: 16px; color: rgba(255,255,255,0.19);
  text-align: center;
}
.footer__copyright, .footer__legal {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,0.27);
}

/* ===== SECTION TAG (공통 — [line] SECTION 0X [line]) ===== */
.upload__sec-tag, .how__sec-tag, .gallery__sec-tag, .const__sec-tag {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: rgba(192,132,252,0.53); margin-bottom: 8px;
}
.upload__sec-line, .how__sec-line, .gallery__sec-line, .const__sec-line {
  display: block; width: 20px; height: 1px;
  background: rgba(192,132,252,0.6);
}

/* ===== HERO — Bottom Caption ===== */
.hero__bottom-caption {
  position: absolute; bottom: 40px; left: 64px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.15); pointer-events: none; z-index: 5;
}
.hero__bottom-caption-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(192,132,252,0.4); flex-shrink: 0;
}

/* ===== UPLOAD — 추가 스타일 ===== */
.upload__tag {
  font-family: var(--font-display); font-size: 48px; font-weight: 700;
  line-height: 1.1; color: var(--t-primary);
  letter-spacing: 2px; margin-bottom: 16px;
}
.upload__subtitle {
  font-size: 16px; color: var(--t-muted); margin-bottom: 40px;
}

/* ===== HOW IT WORKS — 추가 스타일 ===== */
.how__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px;
  color: var(--c-hero); margin-bottom: 8px;
}

/* ===== GALLERY — 추가 스타일 ===== */
.gallery__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px;
  color: var(--c-gallery); margin-bottom: 8px;
}
.gallery__bar { justify-content: space-between; }
.gallery__action {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(192,132,252,0.87);
  transition: color 0.2s ease;
}
.gallery__action:hover { color: var(--c-hero); }
.gallery__action svg { stroke: currentColor; }

/* ===== CONSTELLATIONS — 추가 스타일 ===== */
.const__accent {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
}
.const__accent-line {
  display: block; width: 120px; height: 1px;
  background: rgba(255,255,255,0.08);
}
.const__accent-dot {
  display: block; width: 3px; height: 3px; border-radius: 50%;
}
.const__accent-dot--purple { background: rgba(192,132,252,0.4); }
.const__accent-dot--indigo { background: rgba(129,140,248,0.4); }

/* ===== CTA TAG — 인라인 스팬 방식 ===== */
.cta__tag { justify-content: center; }
.cta__tag::before, .cta__tag::after { display: none; }
.cta__tag-line {
  display: block; width: 20px; height: 1px;
  background: rgba(192,132,252,0.6);
}