:root {
  /* DESIGN typography phrase: IBM Plex Mono** for signal coordinates */
  --deep-glass: #071018;
  --ink-violet: #171126;
  --frost-pane: #D9F2F4;
  --mist-gray: #8EA4AD;
  --neon-cyan: #45F3FF;
  --orchid-static: #B16CFF;
  --signal-rose: #FF5C9A;
  --underline-ice: #BFFBFF;
  --pane: rgba(217, 242, 244, 0.12);
  --cyan-pane: rgba(69, 243, 255, 0.18);
}

* { box-sizing: border-box; }

html {
  background: #071018;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--frost-pane);
  font-family: "Noto Sans KR", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(177, 108, 255, 0.22), transparent 30rem),
    radial-gradient(circle at 82% 26%, rgba(69, 243, 255, 0.18), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgba(23, 17, 38, 0.94), transparent 42rem),
    linear-gradient(120deg, #071018 0%, #171126 58%, #071018 100%);
}

.static-grain,
.glass-vapor {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.static-grain {
  z-index: 80;
  opacity: 0.22;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(217, 242, 244, 0.32) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 60%, rgba(69, 243, 255, 0.22) 0 1px, transparent 1.4px),
    linear-gradient(90deg, rgba(191, 251, 255, 0.035) 1px, transparent 1px);
  background-size: 31px 37px, 47px 43px, 6px 100%;
}

.glass-vapor {
  z-index: 1;
  background:
    linear-gradient(100deg, transparent 0 8%, rgba(217, 242, 244, 0.04) 8.4% 9.2%, transparent 9.8% 28%, rgba(69, 243, 255, 0.035) 28.3% 29%, transparent 29.6%),
    radial-gradient(ellipse at 50% 12%, rgba(217, 242, 244, 0.11), transparent 44%);
  filter: blur(0.2px);
}

.archive { position: relative; z-index: 2; }

.gallery {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 4rem);
  isolation: isolate;
}

.signal-nav {
  position: fixed;
  right: 1.1rem;
  top: 50%;
  z-index: 90;
  display: grid;
  gap: 0.55rem;
  transform: translateY(-50%);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

.signal-nav a {
  color: #8EA4AD;
  text-decoration: none;
  padding: 0.3rem 0.2rem 0.3rem 0.7rem;
  border-left: 1px solid rgba(191, 251, 255, 0.32);
  opacity: 0.58;
  transition: opacity 400ms ease, color 400ms ease, transform 400ms ease, border-color 400ms ease;
}

.signal-nav a.active,
.signal-nav a:hover {
  color: #45F3FF;
  opacity: 1;
  border-color: #FF5C9A;
  transform: translateX(-0.35rem);
}

.tuning-pearl {
  position: fixed;
  z-index: 95;
  left: 0;
  top: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: #BFFBFF;
  box-shadow: 0 0 18px #45F3FF, 0 0 36px rgba(177, 108, 255, 0.42);
}

.hero-gallery { padding-top: min(7vh, 5rem); }

.wordmark-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  min-height: 34vh;
  margin-left: -5vw;
  filter: drop-shadow(0 0 24px rgba(69, 243, 255, 0.18));
}

.wordmark {
  font-family: "Monoton", cursive;
  font-size: clamp(5.2rem, 14.5vw, 17rem);
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: rgba(217, 242, 244, 0.82);
  text-shadow: 2px 0 rgba(69, 243, 255, 0.72), -2px 0 rgba(255, 92, 154, 0.54), 0 0 35px rgba(191, 251, 255, 0.18);
}

.wordmark-cyan { grid-column: 1 / 7; }
.wordmark-rose { grid-column: 5 / 10; transform: translateY(0.25em); color: rgba(217, 242, 244, 0.64); }
.wordmark-domain { grid-column: 9 / 13; transform: translateY(0.45em); font-size: clamp(3.4rem, 9vw, 10rem); color: rgba(142, 164, 173, 0.42); }

.wordmark::before,
.chapter-head h2::before {
  content: attr(data-echo);
}

.hero-wave {
  position: absolute;
  left: 24vw;
  top: 30vh;
  width: min(72vw, 980px);
  height: 10rem;
  z-index: 5;
}

.wave-line { fill: none; pointer-events: none; }
.draw-path {
  fill: none;
  stroke: #45F3FF;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  filter: drop-shadow(0 0 10px rgba(69, 243, 255, 0.72));
}
.draw-path.is-drawn { animation: lineDraw 2600ms cubic-bezier(.2, 1.05, .3, 1) forwards; }
.echo { opacity: 0.42; stroke-width: 1.4; }
.echo-a { stroke: #B16CFF; }
.echo-b { stroke: #FF5C9A; }
.echo-c { stroke: #BFFBFF; }

@keyframes lineDraw { to { stroke-dashoffset: 0; } }

.masonry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(2.4rem, auto);
  gap: clamp(0.75rem, 1.4vw, 1.35rem);
}

.hero-masonry { margin-top: 3vh; padding-right: 4vw; }

.tile {
  position: relative;
  min-height: 9rem;
  padding: clamp(0.9rem, 1.8vw, 1.5rem);
  overflow: hidden;
  color: #D9F2F4;
  background: linear-gradient(145deg, rgba(217, 242, 244, 0.12), rgba(69, 243, 255, 0.055));
  border: 1px solid rgba(191, 251, 255, 0.28);
  border-top-color: rgba(217, 242, 244, 0.48);
  border-radius: 1.2rem 0.35rem 1.45rem 0.55rem;
  box-shadow: inset 0 1px 0 rgba(217, 242, 244, 0.24), 0 24px 70px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px) saturate(1.25);
  transform: translateY(28px) scale(0.985);
  opacity: 0;
  filter: blur(7px);
  transition: opacity 900ms ease, transform 1200ms cubic-bezier(.18, 1.2, .3, 1), filter 900ms ease, border-color 300ms ease;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.18), transparent 25%), linear-gradient(90deg, transparent, rgba(191,251,255,0.05), transparent);
  pointer-events: none;
}

.tile.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.tile:hover,
.tile.tuned {
  border-color: rgba(69, 243, 255, 0.72);
  transform: translateY(-4px) scale(1.01);
  box-shadow: inset 0 1px 0 rgba(217, 242, 244, 0.38), 0 0 36px rgba(69, 243, 255, 0.12), 0 34px 80px rgba(0, 0, 0, 0.32);
}

.tile h2 {
  margin: 0 0 1rem;
  font-family: "Bungee Hairline", "IBM Plex Mono", sans-serif;
  font-size: clamp(1.8rem, 3.7vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: #BFFBFF;
}

.tile p { margin: 0; line-height: 1.72; color: rgba(217, 242, 244, 0.82); }
.tile-id, .vertical-label, .chapter-head span, .tile-node span, .final-domain { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.tile-id { display: block; margin-bottom: 1rem; color: #8EA4AD; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }

.tile-tall { grid-column: span 4; min-height: 24rem; }
.tile-thin { grid-column: span 2; min-height: 28rem; }
.tile-wave { grid-column: span 3; min-height: 15rem; }
.tile-soft { grid-column: span 2; min-height: 13rem; display: grid; place-items: end start; }
.tile-syllable { grid-column: span 1; min-height: 18rem; font-family: "Monoton"; font-size: clamp(4rem, 8vw, 8rem); color: rgba(255, 92, 154, 0.62); writing-mode: vertical-rl; }
.tile-large { grid-column: span 5; min-height: 25rem; }
.tile-node { grid-column: span 2; min-height: 16rem; display: grid; place-items: center; text-align: center; }
.tile-caption { grid-column: span 3; min-height: 12rem; }
.tile-reflect { grid-column: span 2; min-height: 22rem; color: rgba(217,242,244,0.28); font-family: "Bungee Hairline"; font-size: 2.6rem; }
.tile-diagram { grid-column: span 4; min-height: 17rem; }
.tile-mini { grid-column: span 1; min-height: 13rem; font-family: "Monoton"; font-size: 2rem; color: #B16CFF; }
.tile-korean { grid-column: span 3; min-height: 18rem; }

.vertical-label { writing-mode: vertical-rl; color: #BFFBFF; letter-spacing: 0.22em; text-transform: uppercase; }

.signal-node,
.final-pearl {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #BFFBFF;
  box-shadow: 0 0 14px #45F3FF, 0 0 32px rgba(177, 108, 255, 0.6);
}

.signal-node.pulse,
.final-pearl.pulse { animation: pearlPulse 1200ms ease-out; }
@keyframes pearlPulse { 35% { transform: scale(1.75); box-shadow: 0 0 28px #45F3FF, 0 0 60px #B16CFF; } }

.chapter-head {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  position: relative;
  z-index: 4;
  margin: 2vh 0 6vh;
}

.chapter-head span {
  font-family: "Monoton";
  font-size: clamp(3rem, 8vw, 8rem);
  color: rgba(255, 92, 154, 0.58);
}

.chapter-head h2 {
  margin: 0;
  font-family: "Monoton";
  font-size: clamp(4rem, 12vw, 13rem);
  line-height: 0.78;
  color: rgba(217, 242, 244, 0.76);
  text-shadow: 2px 0 rgba(69, 243, 255, 0.58), -2px 0 rgba(255, 92, 154, 0.42);
}

.dense-gallery { background: linear-gradient(180deg, rgba(7,16,24,0), rgba(23,17,38,0.82)); }
.naming-gallery { background: radial-gradient(circle at 18% 28%, rgba(177,108,255,0.16), transparent 28rem); }
.final-gallery { display: grid; place-items: center; background: linear-gradient(180deg, rgba(23,17,38,0.72), #071018 72%); }

.thread-wave { position: absolute; left: -4vw; top: 32vh; width: 108vw; opacity: 0.65; z-index: 1; }
.horizon-wave { position: absolute; left: 8vw; bottom: 34vh; width: 84vw; opacity: 0.8; }
.constellation { position: relative; z-index: 3; }
.constellation-a { padding-left: 8vw; }
.constellation-b { padding-right: 7vw; }

.underlined { position: relative; display: inline; background-image: linear-gradient(#BFFBFF, #BFFBFF); background-repeat: no-repeat; background-size: var(--underline-size, 0%) 1px; background-position: 0 100%; transition: background-size 1200ms ease; }
.tile.in-view .underlined, .underlined.is-drawn { --underline-size: 100%; }

.ghost-glyph {
  position: absolute;
  z-index: -1;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: clamp(9rem, 25vw, 25rem);
  color: rgba(217, 242, 244, 0.045);
  filter: blur(1px);
  pointer-events: none;
}
.glyph-one { right: -4vw; top: 1vh; }
.glyph-two { left: -6vw; top: 18vh; color: rgba(177, 108, 255, 0.08); }

.tile-diagram i { display: block; height: 1px; margin: 2.1rem 0; background: linear-gradient(90deg, transparent, #45F3FF, #FF5C9A, transparent); transform: translateX(var(--slide, 0)); }
.tile-diagram i:nth-child(2) { --slide: 16px; opacity: 0.65; }
.tile-diagram i:nth-child(3) { --slide: -10px; opacity: 0.42; }

.glitchable.glitch { animation: refinedGlitch 420ms steps(2, end); }
@keyframes refinedGlitch {
  0%, 100% { transform: translateY(0); filter: blur(0); }
  32% { transform: translate(3px, -2px); filter: drop-shadow(-3px 0 #FF5C9A) drop-shadow(3px 0 #45F3FF); }
  64% { transform: translate(-2px, 1px); }
}

.after-tiles { position: absolute; top: 16vh; left: 8vw; right: 8vw; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; opacity: 0.72; }
.fade-tile { min-height: 14rem; }
.final-pearl { position: relative; z-index: 4; width: 1.15rem; height: 1.15rem; }
.final-domain { position: absolute; bottom: 18vh; margin: 0; color: rgba(191, 251, 255, 0.74); font-size: clamp(1.3rem, 3vw, 3.2rem); letter-spacing: 0.32em; text-transform: uppercase; }

@media (max-width: 820px) {
  .signal-nav { right: 0.35rem; font-size: 0.55rem; }
  .wordmark-stack { display: block; margin-left: -10vw; }
  .wordmark { display: block; font-size: 22vw; }
  .wordmark-domain { font-size: 16vw; }
  .hero-wave { left: 4vw; top: 33vh; width: 92vw; }
  .masonry, .after-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile, .tile-tall, .tile-thin, .tile-wave, .tile-soft, .tile-syllable, .tile-large, .tile-node, .tile-caption, .tile-reflect, .tile-diagram, .tile-mini, .tile-korean { grid-column: span 4; min-height: 12rem; }
  .tile-thin, .tile-syllable { min-height: 8rem; writing-mode: horizontal-tb; }
  .chapter-head { display: block; }
  .chapter-head h2 { font-size: 18vw; }
  .constellation-a, .constellation-b { padding: 0 1.7rem 0 0; }
  .after-tiles { position: relative; inset: auto; }
}