:root {
  /* Typography compliance tokens: IBM Plex Sans KR** slightly technical civic signage. */
  --cream: #FFF0D5;
  --red: #E83F2F;
  --rose: #C75B52;
  --yellow: #FFD34E;
  --navy: #18233A;
  --orange: #FF8A2A;
  --teal: #17A6A3;
  --p: 0;
  --s1: 0;
  --s2: 0;
  --s3: 0;
  --s4: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.street-nav {
  position: fixed;
  z-index: 50;
  top: 20px;
  left: 22px;
  display: flex;
  gap: 8px;
  transform: rotate(-2deg);
  font-family: "IBM Plex Sans KR", sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 15px);
}

.street-nav a {
  padding: 8px 12px;
  background: var(--yellow);
  border: 3px solid var(--navy);
  box-shadow: 5px 5px 0 rgba(24,35,58,.28);
  border-radius: 999px 999px 999px 18px;
  transition: transform .45s cubic-bezier(.2,1.4,.34,1), background .25s;
}

.street-nav a:hover { transform: translateY(-5px) rotate(4deg); background: var(--orange); }

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--cream);
  border-bottom: 10px solid var(--navy);
}

.chapter::before {
  content: "";
  position: absolute;
  inset: auto -6vw 0 -6vw;
  height: 17vh;
  background: var(--navy);
  opacity: .08;
  transform: skewY(-3deg);
}

.chapter-number {
  position: absolute;
  z-index: 8;
  top: 9vh;
  right: 6vw;
  padding: 10px 18px;
  background: var(--navy);
  color: var(--cream);
  font-family: "IBM Plex Sans KR", sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 8px 30px 8px 30px;
}

.cropped-title,
.final-title {
  position: absolute;
  z-index: 4;
  margin: 0;
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif;
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.07em;
  color: var(--navy);
  text-shadow: 12px 12px 0 var(--yellow);
}

.chapter-hero { background: var(--cream); }

.sun-disc {
  position: absolute;
  width: 36vmin;
  height: 36vmin;
  right: 10vw;
  top: 12vh;
  background: var(--yellow);
  border-radius: 50%;
  box-shadow: 14px 14px 0 var(--orange);
  transform: translateY(calc(var(--p) * 35px)) scale(calc(1 + var(--p) * .08));
}

.city-back {
  position: absolute;
  bottom: 0;
  background: var(--rose);
  border: 5px solid var(--navy);
  box-shadow: 12px 0 0 rgba(24,35,58,.18);
}

.city-back-one { left: -5vw; width: 42vw; height: 36vh; transform: skewX(-10deg) translateY(calc(var(--p) * 45px)); }
.city-back-two { right: -4vw; width: 32vw; height: 48vh; background: var(--teal); transform: skewX(8deg) translateY(calc(var(--p) * 70px)); }

.hero-sign {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-left: 3vw;
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif;
  font-size: clamp(74px, 19vw, 310px);
  line-height: .78;
  letter-spacing: -.08em;
  white-space: nowrap;
  color: var(--red);
  text-shadow: 12px 12px 0 var(--navy), 24px 24px 0 var(--yellow);
}

.sign-piece {
  display: inline-block;
  transform: translate3d(calc(var(--p) * var(--tx, 0px)), calc(var(--p) * var(--ty, 0px)), 0) rotate(calc(var(--p) * var(--rot, 0deg))) scale(calc(1 - var(--p) * .1));
  transition: filter .2s;
}

.piece-han { --tx: -38px; --ty: -58px; --rot: -5deg; }
.piece-geul { --tx: 52px; --ty: 42px; --rot: 4deg; color: var(--orange); }
.piece-dot { --tx: 24px; --ty: -78px; --rot: 12deg; color: var(--yellow); }
.piece-name { --tx: 88px; --ty: 80px; --rot: -3deg; color: var(--navy); }

.paint-label {
  position: absolute;
  right: 6vw;
  top: 34vh;
  z-index: 10;
  background: var(--teal);
  color: var(--cream);
  border: 4px solid var(--navy);
  font-family: "Do Hyeon", sans-serif;
  font-size: clamp(22px, 3vw, 46px);
  padding: 10px 22px;
  transform: rotate(7deg) translateX(calc(var(--p) * -38px));
  box-shadow: 9px 9px 0 rgba(24,35,58,.25);
}

.shop-strip {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 8vh;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  font-family: "Do Hyeon", sans-serif;
  font-size: clamp(18px, 2vw, 30px);
}

.shop-strip span {
  background: var(--yellow);
  border: 4px solid var(--navy);
  padding: 12px 16px;
  box-shadow: 8px 8px 0 var(--red);
  transform: translateY(calc(var(--p) * -35px));
}

.blob {
  position: absolute;
  z-index: 5;
  background: var(--orange);
  border: 5px solid var(--navy);
  border-radius: 58% 42% 64% 36% / 46% 57% 43% 54%;
}

.crowd-one { width: 13vw; height: 9vw; left: 18vw; bottom: 24vh; background: var(--teal); transform: rotate(-10deg); }
.crowd-two { width: 10vw; height: 12vw; right: 26vw; bottom: 18vh; background: var(--rose); transform: rotate(18deg); }
.speech-one { right: 16vw; top: 19vh; width: 135px; height: 78px; display: grid; place-items: center; font-family: "Do Hyeon"; font-size: 32px; background: var(--cream); }

.poster {
  position: absolute;
  z-index: 12;
  border: 5px solid var(--navy);
  box-shadow: 10px 10px 0 rgba(24,35,58,.25);
  padding: 20px;
  font-family: "Noto Sans KR", sans-serif;
}

.poster b { display: block; font-family: "Do Hyeon", sans-serif; font-size: clamp(24px, 3vw, 45px); line-height: .95; margin-bottom: 10px; }
.poster span { display: block; font-weight: 700; }
.poster-red { left: 7vw; top: 17vh; max-width: 340px; background: var(--red); color: var(--cream); transform: rotate(-5deg); }

.chapter-blocks { background: var(--orange); }
.chapter-blocks .cropped-title { left: -2vw; top: 8vh; font-size: clamp(76px, 15vw, 245px); color: var(--cream); text-shadow: 12px 12px 0 var(--red); }

.shutter-grid {
  position: absolute;
  inset: 24vh 8vw 8vh 8vw;
  display: grid;
  grid-template-columns: 1.2fr .9fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  z-index: 5;
}

.jamo {
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--navy);
  border: 7px solid var(--navy);
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(70px, 11vw, 170px);
  line-height: 1;
  box-shadow: 14px 14px 0 rgba(24,35,58,.22);
  transform: translateY(calc((1 - var(--s1)) * -120px)) rotate(calc((1 - var(--s1)) * 12deg));
  border-radius: calc(40px * var(--s1)) calc(4px + 60px * var(--s1)) calc(16px + 34px * var(--s1)) calc(4px + 20px * var(--s1));
  transition: transform .22s cubic-bezier(.16,1.5,.45,1), border-radius .22s;
}

.jamo-giyeok { background: var(--red); color: var(--cream); }
.jamo-mieum { background: var(--yellow); }
.jamo-ieung { background: var(--teal); color: var(--cream); border-radius: 50%; }
.jamo-siot { background: var(--rose); color: var(--cream); }
.jamo-i { background: var(--cream); }
.jamo-eu { background: var(--navy); color: var(--yellow); }

.storefront {
  position: absolute;
  z-index: 9;
  width: min(340px, 36vw);
  background: var(--cream);
  border: 5px solid var(--navy);
  box-shadow: 10px 10px 0 rgba(24,35,58,.28);
  padding: 18px;
  transform: translateX(calc((1 - var(--s1)) * -50px));
}
.storefront span { display: block; font-family: "Do Hyeon"; font-size: 32px; color: var(--red); }
.storefront p { margin: 8px 0 0; font-weight: 700; }
.storefront-left { left: 5vw; bottom: 8vh; }
.storefront-right { right: 5vw; top: 20vh; transform: rotate(3deg) translateX(calc((1 - var(--s1)) * 50px)); }
.awning { position: absolute; height: 7vh; background: repeating-linear-gradient(90deg, var(--yellow) 0 42px, var(--red) 42px 84px); border: 5px solid var(--navy); z-index: 4; }
.awning-one { left: 18vw; top: 19vh; width: 28vw; }
.awning-two { right: 12vw; bottom: 16vh; width: 24vw; transform: rotate(-3deg); }
.window-stack { position: absolute; right: 9vw; bottom: 12vh; display: grid; grid-template-columns: repeat(2, 54px); gap: 12px; z-index: 3; }
.window-stack i { height: 48px; background: var(--yellow); border: 4px solid var(--navy); }

.chapter-routes { background: var(--teal); }
.title-routes { right: -3vw; top: 7vh; font-size: clamp(70px, 14vw, 220px); color: var(--yellow); text-shadow: 12px 12px 0 var(--navy); }
.route-map { position: absolute; inset: 18vh 5vw 8vh 5vw; z-index: 4; }
.route { position: absolute; height: 34px; border: 6px solid var(--navy); border-radius: 999px; transform-origin: left center; box-shadow: 9px 9px 0 rgba(24,35,58,.18); }
.route-main { left: 0; top: 45%; width: calc(30vw + var(--s2) * 55vw); background: var(--yellow); transform: rotate(-10deg) scaleX(calc(.35 + var(--s2) * .65)); }
.route-teal { left: 16vw; top: 27%; width: calc(22vw + var(--s2) * 32vw); background: var(--cream); transform: rotate(31deg) scaleX(calc(.45 + var(--s2) * .55)); }
.route-red { right: -6vw; bottom: 23%; width: calc(24vw + var(--s2) * 42vw); background: var(--red); transform: rotate(-34deg) scaleX(calc(.3 + var(--s2) * .7)); }
.station { position: absolute; z-index: 7; display: grid; place-items: center; width: clamp(88px, 12vw, 150px); height: clamp(88px, 12vw, 150px); border-radius: 50%; border: 7px solid var(--navy); background: var(--cream); font-family: "Black Han Sans"; font-size: clamp(52px, 8vw, 105px); box-shadow: 10px 10px 0 rgba(24,35,58,.25); transform: scale(calc(.65 + var(--s2) * .35)); }
.station-one { left: 10vw; top: 40%; background: var(--yellow); }
.station-two { left: 40vw; top: 18%; background: var(--orange); color: var(--cream); }
.station-three { right: 18vw; top: 48%; }
.station-four { right: 7vw; bottom: 10%; background: var(--red); color: var(--cream); }
.crosswalk { position: absolute; left: 4vw; bottom: 11vh; width: 44vw; display: flex; gap: 16px; transform: rotate(-10deg); }
.crosswalk span { flex: 1; height: 56px; background: var(--yellow); border: 4px solid var(--navy); transform: scaleY(calc(.25 + var(--s2) * .75)); transform-origin: bottom; }
.scooter { position: absolute; z-index: 9; left: calc(5vw + var(--s2) * 68vw); bottom: calc(12vh + var(--s2) * 22vh); width: 82px; height: 54px; display: grid; place-items: center; background: var(--orange); border: 5px solid var(--navy); border-radius: 40px 40px 10px 10px; font-family: "Black Han Sans"; font-size: 48px; transform: rotate(-10deg); box-shadow: 8px 8px 0 rgba(24,35,58,.25); }
.tile-wall { position: absolute; left: 7vw; top: 18vh; width: 310px; padding: 18px; background: var(--cream); border: 5px solid var(--navy); box-shadow: 10px 10px 0 rgba(24,35,58,.25); font-family: "IBM Plex Sans KR"; }
.tile-wall b { display: block; font-family: "Do Hyeon"; font-size: 35px; color: var(--red); }
.tile-wall em { font-style: normal; font-weight: 700; line-height: 2; }
.puddle { right: 10vw; bottom: 16vh; width: 19vw; height: 10vw; background: var(--cream); transform: rotate(-7deg) scale(calc(.8 + var(--s2) * .25)); }

.chapter-map { background: var(--rose); }
.title-map { left: -4vw; top: 8vh; font-size: clamp(72px, 13vw, 220px); color: var(--cream); text-shadow: 12px 12px 0 var(--red); }
.name-map { position: absolute; inset: 23vh 7vw 8vh 7vw; background: var(--cream); border: 8px solid var(--navy); box-shadow: 18px 18px 0 rgba(24,35,58,.25); transform: rotate(-2deg); z-index: 5; overflow: hidden; }
.name-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--navy) 4px, transparent 4px), linear-gradient(90deg, var(--navy) 4px, transparent 4px); background-size: 80px 80px; opacity: .08; }
.map-block { position: absolute; display: grid; place-items: center; border: 7px solid var(--navy); font-family: "Black Han Sans"; font-size: clamp(72px, 10vw, 160px); box-shadow: 12px 12px 0 rgba(24,35,58,.25); transform: scale(calc(.7 + var(--s3) * .3)) rotate(calc((1 - var(--s3)) * -10deg)); }
.block-red { left: 8%; top: 15%; width: 25%; height: 34%; background: var(--red); color: var(--cream); }
.block-yellow { left: 36%; top: 38%; width: 26%; height: 39%; background: var(--yellow); }
.block-teal { right: 9%; top: 17%; width: 24%; height: 45%; background: var(--teal); color: var(--cream); }
.map-lane { position: absolute; height: 26px; background: var(--orange); border: 5px solid var(--navy); border-radius: 999px; transform-origin: left center; }
.lane-one { left: 4%; top: 61%; width: calc(20% + var(--s3) * 55%); transform: rotate(-18deg); }
.lane-two { left: 22%; top: 26%; width: calc(12% + var(--s3) * 50%); background: var(--teal); transform: rotate(20deg); }
.lane-three { left: 12%; bottom: 10%; width: calc(18% + var(--s3) * 66%); background: var(--yellow); transform: rotate(2deg); }
.plaza-ring { position: absolute; right: 28%; bottom: 9%; width: 18vmin; height: 18vmin; display: grid; place-items: center; background: var(--cream); border: 9px solid var(--navy); border-radius: 50%; font-family: "Black Han Sans"; font-size: 12vmin; color: var(--red); transform: scale(calc(.55 + var(--s3) * .45)); }
.address-tag { position: absolute; right: 5%; bottom: 7%; padding: 14px 18px; background: var(--navy); color: var(--cream); font-family: "IBM Plex Sans KR"; font-weight: 700; transform: rotate(3deg); }
.address-tag span { color: var(--yellow); }
.poster-cream { left: 8vw; bottom: 10vh; width: min(390px, 38vw); background: var(--cream); }
.sticker { position: absolute; z-index: 8; display: grid; place-items: center; width: 110px; height: 82px; border: 5px solid var(--navy); background: var(--yellow); font-family: "Do Hyeon"; font-size: 46px; box-shadow: 9px 9px 0 rgba(24,35,58,.23); }
.sticker-one { right: 12vw; top: 18vh; transform: rotate(9deg); }
.sticker-two { right: 22vw; bottom: 12vh; background: var(--orange); color: var(--cream); transform: rotate(-11deg); }
.organic-island { position: absolute; left: 28vw; bottom: 6vh; width: 26vw; height: 13vw; background: var(--teal); border: 6px solid var(--navy); border-radius: 64% 36% 70% 30% / 42% 58% 42% 58%; transform: rotate(8deg); }

.chapter-plaza { background: var(--navy); color: var(--cream); }
.sunset-band { position: absolute; inset: 0 0 auto 0; height: 44vh; background: var(--red); border-bottom: 9px solid var(--yellow); }
.chapter-plaza .chapter-number { background: var(--yellow); color: var(--navy); }
.final-title { top: 10vh; left: 2vw; right: 0; font-size: clamp(86px, 18vw, 300px); color: var(--cream); text-shadow: 14px 14px 0 var(--orange), 28px 28px 0 rgba(255,211,78,.75); transform: translateY(calc((1 - var(--s4)) * 40px)); }
.glyph-plaza { position: absolute; left: 6vw; right: 6vw; bottom: 12vh; z-index: 8; display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.glyph-plaza span { display: grid; place-items: center; aspect-ratio: 1; background: var(--cream); color: var(--navy); border: 6px solid var(--yellow); border-radius: calc(8px + var(--s4) * 50px); font-family: "Black Han Sans"; font-size: clamp(40px, 6vw, 94px); transform: translateY(calc((1 - var(--s4)) * 120px)) rotate(calc((1 - var(--s4)) * 20deg)); box-shadow: 9px 9px 0 rgba(255,138,42,.5); }
.glyph-plaza span:nth-child(2n) { background: var(--yellow); }
.glyph-plaza span:nth-child(3n) { background: var(--teal); color: var(--cream); }
.closing-poster { position: absolute; right: 7vw; top: 42vh; z-index: 10; width: min(390px, 40vw); background: var(--cream); color: var(--navy); border: 6px solid var(--yellow); padding: 22px; box-shadow: 12px 12px 0 var(--orange); transform: rotate(3deg); }
.closing-poster b { font-family: "Do Hyeon"; font-size: clamp(28px, 4vw, 56px); line-height: .9; color: var(--red); }
.closing-poster p { font-weight: 700; font-size: 18px; }
.plaza-blob { position: absolute; border: 5px solid var(--yellow); border-radius: 60% 40% 48% 52% / 44% 62% 38% 56%; z-index: 3; }
.blob-a { width: 24vw; height: 15vw; left: -3vw; bottom: 8vh; background: var(--rose); }
.blob-b { width: 18vw; height: 18vw; right: 18vw; bottom: 24vh; background: var(--teal); }
.blob-c { width: 16vw; height: 10vw; right: 4vw; bottom: 6vh; background: var(--orange); }

@media (max-width: 760px) {
  .street-nav { left: 10px; top: 10px; flex-wrap: wrap; width: 92vw; }
  .street-nav a { padding: 6px 8px; border-width: 2px; }
  .hero-sign { font-size: 22vw; flex-wrap: wrap; align-content: center; }
  .shop-strip { grid-template-columns: repeat(2, 1fr); bottom: 3vh; }
  .poster-red { top: 58vh; max-width: 80vw; }
  .shutter-grid { inset: 26vh 5vw 10vh 5vw; grid-template-columns: repeat(2, 1fr); }
  .storefront { width: 78vw; }
  .storefront-right { display: none; }
  .tile-wall { width: 78vw; top: 22vh; }
  .crosswalk { width: 80vw; }
  .name-map { inset: 25vh 4vw 19vh 4vw; }
  .poster-cream { width: 82vw; left: 7vw; bottom: 5vh; }
  .glyph-plaza { grid-template-columns: repeat(4, 1fr); bottom: 8vh; }
  .closing-poster { width: 82vw; right: 8vw; top: 36vh; }
}