02Contour map — hypsometric bands on canvas

<main class="stage">
<div class="cm" id="cm">
  <p class="cm__hint">
    <svg class="cm__ico" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M144 52a20 20 0 1 1 20 20a20 20 0 0 1-20-20m49.44 55.92a8 8 0 0 0-13.77 0l-33 55.75l-21-35.67H50.35L8 200h240Z" opacity=".2"/><path d="M164 80a28 28 0 1 0-28-28a28 28 0 0 0 28 28m0-40a12 12 0 1 1-12 12a12 12 0 0 1 12-12m90.88 155.92l-54.56-92.08A15.87 15.87 0 0 0 186.55 96a15.85 15.85 0 0 0-13.76 7.84L146.63 148l-44.84-76.1a16 16 0 0 0-27.58 0L1.11 195.94A8 8 0 0 0 8 208h240a8 8 0 0 0 6.88-12.08M88 80l23.57 40H64.43ZM22 192l33-56h66l33 56Zm150.57 0l-16.66-28.28L186.55 112L234 192Z"/></g></svg>
    <span>The mountains slowly swell and the contour lines are redrawn</span>
  </p>
  <div class="cm__field" id="field" role="img" aria-label="A terrain map drawn with 5 elevation bands and contour lines">
    <canvas class="cm__cv" id="cv"></canvas>
  </div>
  <div class="cm__legend" aria-hidden="true">
    <div class="cm__lg"><i class="cm__sw" style="background:var(--c0)"></i>0</div>
    <div class="cm__lg"><i class="cm__sw" style="background:var(--c1)"></i>250</div>
    <div class="cm__lg"><i class="cm__sw" style="background:var(--c2)"></i>500</div>
    <div class="cm__lg"><i class="cm__sw" style="background:var(--c3)"></i>750</div>
    <div class="cm__lg"><i class="cm__sw" style="background:var(--c4)"></i>1000</div>
    <span class="cm__unit">m</span>
  </div>
  <div class="cm__bar">
    <label class="cm__dial">Seed
      <input type="number" id="seed" min="1" max="9999" step="1" value="7" aria-label="Seed number">
    </label>
    <button class="cm__shuffle" id="shuffle" type="button">
      <svg class="cm__ico" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M32 72h32l16 24-13 9-11-17H32a8 8 0 0 1 0-16" opacity=".2"/><path d="M237.66 178.34a8 8 0 0 1 0 11.32l-24 24A8 8 0 0 1 200 208V184h-29.41a40 40 0 0 1-33.94-18.75L102.71 115.5A24 24 0 0 0 82.75 104H32a8 8 0 0 1 0-16h50.75a40 40 0 0 1 33.94 18.75l33.94 49.75a24 24 0 0 0 19.96 11.5H200v-24a8 8 0 0 1 13.66-5.66ZM32 152h50.75a24 24 0 0 0 19.96-11.5l8.11-11.87 9.51 13.93-6.9 10.11a40 40 0 0 1-33.94 18.72H32a8 8 0 0 1 0-16m150.34-82.34a8 8 0 0 0 13.66 5.66V96h-34.46a40 40 0 0 1-33.94-18.75l-6.9-10.11 9.51-13.93 8.11 11.87A24 24 0 0 0 158.29 80H196V56a8 8 0 0 0-13.66-5.66" fill-rule="evenodd"/></g></svg>
      <span>New terrain</span>
    </button>
    <b class="cm__val" id="seedOut">Seed <span id="seedNum">7</span></b>
  </div>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 등고선 지도 — 움직임은 전부 캔버스 rAF 루프(2D fbm 높이맵을 createImageData 로 픽셀마다 채색).
// CSS 는 무대·판·범례·시드 컨트롤만. @keyframes 를 두지 않는다 — 렌더러가 시계를 고정하지 않고
// 실시간 프레임을 찍어야 지형이 부푸는 게 측정된다. 색은 파스텔 5단(hypsometric) — vivid 리터럴 0(BD26).

// 파스텔 — 토큰 그대로 쓰면 vivid(채도≥.55·명도.2~.8)라 BD26 이 잡는다. mix() 로 옅게 섞는다(브리프 실측 조합)
$terrain-blue:  mix($subject-blue,  $stage-paper, 34%);
$terrain-sky:   mix($subject-sky,   $stage-paper, 42%);
$terrain-mint:  mix($subject-mint,  $stage-paper, 42%);
$terrain-peach: mix($subject-orange-deep, $stage-paper, 30%);
$terrain-lilac: $subject-lilac;   // 이미 명도 .81 이라 그대로 써도 통과

$duration: $dur-loop;
$easing: $ease-out;
$color: $terrain-blue;

@include stage($stage-paper);

.cm {
  // 고도띠 5단 — 낮은 곳(물가)에서 높은 곳(봉우리)으로. JS 가 --c0~--c4 를 읽어 LUT 를 만든다
  --c0: #{$terrain-blue};
  --c1: #{$terrain-sky};
  --c2: #{$terrain-mint};
  --c3: #{$terrain-peach};
  --c4: #{$terrain-lilac};
  // 등고선 선 색 — 잉크를 종이 쪽으로 섞어 은은하게(순수 검정 리터럴 대신 토큰 mix)
  --c-line: #{mix($subject-ink, $stage-paper, 74%)};

  display: flex; flex-direction: column; gap: $sp-2;
  width: 100%; max-width: 424px;
}

.cm__hint {
  display: flex; align-items: center; gap: $sp-1; margin: 0;
  font-weight: 700; font-size: clamp(10px, 2.8vw, 12px); line-height: 1.35;
  color: $subject-ink;
}
.cm__ico { width: 16px; height: 16px; flex: 0 0 auto; color: $subject-ink; }

.cm__field {
  position: relative; height: 148px;
  border-radius: $r-card; overflow: hidden;
  background: $stage-paper;
  box-shadow: inset 0 0 0 1px rgba($subject-ink, .16);
}

.cm__cv { display: block; width: 100%; height: 100%; }

.cm__legend {
  display: flex; align-items: center; gap: $sp-2;
  font-weight: 700; font-size: 10px; color: $subject-ink;
}
.cm__lg { display: flex; align-items: center; gap: $sp-1; }
.cm__sw { width: 10px; height: 10px; border-radius: $r-xs; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba($subject-ink, .18); }
.cm__unit { color: rgba($subject-ink, .74); font-weight: 700; }

.cm__bar { display: flex; align-items: center; gap: $sp-3; flex-wrap: wrap; }
.cm__dial {
  display: flex; align-items: center; gap: $sp-2;
  font-weight: 700; font-size: 11px; color: $subject-ink;
}
.cm__dial input {
  width: 64px; margin: 0;
  padding: $sp-1 $sp-2; border: 0; border-radius: $r-sm;
  background: rgba($subject-ink, .08); color: $subject-ink;
  font-weight: 700; font-size: 12px; font-family: inherit;
}
.cm__dial input:focus-visible { outline: 2px solid $subject-blue; outline-offset: 2px; }

.cm__shuffle {
  display: flex; align-items: center; gap: $sp-1;
  padding: $sp-1 $sp-3; border: 0; border-radius: $r-pill;
  background: rgba($subject-ink, .08); color: $subject-ink;
  font-weight: 700; font-size: 11px; font-family: inherit; cursor: pointer;
}
.cm__shuffle:hover { background: rgba($subject-ink, .16); }
.cm__shuffle:focus-visible { outline: 2px solid $subject-blue; outline-offset: 2px; }

.cm__val { color: $subject-blue; font-size: 11px; font-weight: 700; }

@media (max-width: 340px) {
  .cm { gap: $sp-1; }
  .cm__field { height: 92px; }
  .cm__hint { font-size: 10px; }
  .cm__legend { gap: $sp-1; font-size: 9px; }
  .cm__bar { gap: $sp-2; }
  .cm__dial input { width: 52px; }
}

// reduce — 루프가 안 돈다. 시드 입력은 여전히 결정적으로 한 장을 다시 그린다(is-still 만 표시)
@media (prefers-reduced-motion: reduce) {
  .cm.is-still .cm__field { cursor: default !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.cm {
  --c0: rgb(72.2666666667%, 80.5333333333%, 98.8%);
  --c1: rgb(76.1176470588%, 90.9411764706%, 100%);
  --c2: rgb(70.5176470588%, 92.9176470588%, 85.3411764706%);
  --c3: rgb(93.6470588235%, 75.6470588235%, 70%);
  --c4: #b9a0ff;
  --c-line: rgb(32.6745098039%, 31.8039215686%, 33.5450980392%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 424px;
}

.cm__hint {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: 700;
  font-size: clamp(10px, 2.8vw, 12px);
  line-height: 1.35;
  color: #17141a;
}

.cm__ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #17141a;
}

.cm__field {
  position: relative;
  height: 148px;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(23, 20, 26, 0.16);
}

.cm__cv {
  display: block;
  width: 100%;
  height: 100%;
}

.cm__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 10px;
  color: #17141a;
}

.cm__lg {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cm__sw {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(23, 20, 26, 0.18);
}

.cm__unit {
  color: rgba(23, 20, 26, 0.74);
  font-weight: 700;
}

.cm__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cm__dial {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 11px;
  color: #17141a;
}

.cm__dial input {
  width: 64px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(23, 20, 26, 0.08);
  color: #17141a;
  font-weight: 700;
  font-size: 12px;
  font-family: inherit;
}

.cm__dial input:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
}

.cm__shuffle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.08);
  color: #17141a;
  font-weight: 700;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}

.cm__shuffle:hover {
  background: rgba(23, 20, 26, 0.16);
}

.cm__shuffle:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
}

.cm__val {
  color: #2f6df6;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 340px) {
  .cm {
    gap: 4px;
  }
  .cm__field {
    height: 92px;
  }
  .cm__hint {
    font-size: 10px;
  }
  .cm__legend {
    gap: 4px;
    font-size: 9px;
  }
  .cm__bar {
    gap: 8px;
  }
  .cm__dial input {
    width: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm.is-still .cm__field {
    cursor: default !important;
  }
}

// 등고선 지도 — 2D fbm 높이맵을 createImageData 로 픽셀마다 채색한다.
// 1) 높이(0~1)를 5단으로 나눠 고도띠 색을 칠하고(hypsometric bands)
// 2) 같은 높이맵을 더 촘촘한 10단으로 다시 나눠, 인접 8칸과 등급이 다른 경계 픽셀만 진하게 찍어 등고선을 겹친다.
// 시간이 흐르면 fbm 의 z(셋째 인자)가 흘러 산맥이 서서히 부풀고 줄어든다 — 등고선도 같이 다시 그어진다.
var root = document.getElementById('cm');
var field = document.getElementById('field');
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
var seedIn = document.getElementById('seed');
var shuffleBtn = document.getElementById('shuffle');
var seedNum = document.getElementById('seedNum');

var MW = 160, MH = 100;                 // 높이맵 버퍼 해상도 — 화면이 커져도 이 값은 그대로다
var small = document.createElement('canvas');
small.width = MW; small.height = MH;
var sctx = small.getContext('2d');
var buf = sctx.createImageData(MW, MH); // 한 번만 만들어 두고 프레임마다 같은 배열을 덮어쓴다
var px = buf.data;
var heights = new Float32Array(MW * MH); // 문턱선 검사에 다시 쓰려고 높이를 한 프레임만큼 남겨 둔다

// ── 결정적 난수 — mulberry32. Seed 하나 → 같은 테이블 ────────────────────────────
function mulberry32(a) {
  return function () {
    a |= 0; a = (a + 0x6D2B79F5) | 0;
    var t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}
var PERM = new Uint8Array(512);
var VAL = new Float32Array(256);
function buildTables(seed) {
  var rng = mulberry32(seed >>> 0);
  var p = [], i, j, t;
  for (i = 0; i < 256; i++) p[i] = i;
  for (i = 255; i > 0; i--) { j = (rng() * (i + 1)) | 0; t = p[i]; p[i] = p[j]; p[j] = t; }
  for (i = 0; i < 512; i++) PERM[i] = p[i & 255];
  for (i = 0; i < 256; i++) VAL[i] = rng();
}

function fade(t) { return t * t * (3 - 2 * t); }   // 스무스스텝 — 격자 경계에서 각이 안 지게

function vnoise(x, y, z) {
  var xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z);
  var xf = x - xi, yf = y - yi, zf = z - zi;
  xi &= 255; yi &= 255; zi &= 255;
  var u = fade(xf), v = fade(yf), w = fade(zf);
  var a = PERM[xi] + yi, b = PERM[xi + 1] + yi;
  var aa = PERM[a] + zi, ab = PERM[a + 1] + zi;
  var ba = PERM[b] + zi, bb = PERM[b + 1] + zi;
  var c000 = VAL[PERM[aa]], c100 = VAL[PERM[ba]];
  var c010 = VAL[PERM[ab]], c110 = VAL[PERM[bb]];
  var c001 = VAL[PERM[aa + 1]], c101 = VAL[PERM[ba + 1]];
  var c011 = VAL[PERM[ab + 1]], c111 = VAL[PERM[bb + 1]];
  var x00 = c000 + (c100 - c000) * u, x10 = c010 + (c110 - c010) * u;
  var x01 = c001 + (c101 - c001) * u, x11 = c011 + (c111 - c011) * u;
  var y0 = x00 + (x10 - x00) * v, y1 = x01 + (x11 - x01) * v;
  return y0 + (y1 - y0) * w;
}

// fbm — 옥타브를 겹쳐 산맥·골짜기 굴곡을 만든다. z 가 흐르면 지형 전체가 서서히 다시 태어난다
function fbm(x, y, z, oct) {
  var sum = 0, amp = 0.5, norm = 0, f = 1;
  for (var i = 0; i < oct; i++) {
    sum += vnoise(x * f, y * f, z * f) * amp;
    norm += amp;
    amp *= 0.5;
    f *= 2;
  }
  return sum / norm;
}

// ── 색 — 고도띠 5단을 CSS 커스텀 프로퍼티(파스텔 토큰)에서 읽어 온다 ────────────────
var css = getComputedStyle(root);
function rgbOf(name) {
  var v = css.getPropertyValue(name).trim().replace('#', '');
  if (v.length === 3) v = v.charAt(0) + v.charAt(0) + v.charAt(1) + v.charAt(1) + v.charAt(2) + v.charAt(2);
  return [parseInt(v.slice(0, 2), 16), parseInt(v.slice(2, 4), 16), parseInt(v.slice(4, 6), 16)];
}
var BANDS = [rgbOf('--c0'), rgbOf('--c1'), rgbOf('--c2'), rgbOf('--c3'), rgbOf('--c4')];
var LINE = rgbOf('--c-line');

var SCALE = 0.052;          // 격자 간격 — 작을수록 산과 골짜기가 굵어진다(실측 튜닝)
var FLOW = 0.5;             // 시간축이 흐르는 속도 — 산맥이 부푸는 빠르기
var OCT = 5;                // fbm 옥타브 수 — 많을수록 등고선이 촘촘해진다
var LINE_LEVELS = 11;       // 등고선 문턱 칸 수(색 밴드 5단과 별개 — 더 촘촘해야 지도처럼 보인다)
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var W = 0, H = 0, dpr = 1;
var raf = 0;

function fit() {
  var r = field.getBoundingClientRect();
  dpr = window.devicePixelRatio || 1;
  W = r.width; H = r.height;
  cv.width = Math.round(W * dpr);
  cv.height = Math.round(H * dpr);
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}

function paint(sec) {
  var z = sec * FLOW;
  var i = 0, hi = 0;
  // 1차 — 높이를 구하고 고도띠 5단 색을 채운다
  for (var y = 0; y < MH; y++) {
    var ny = y * SCALE;
    for (var x = 0; x < MW; x++) {
      var n = fbm(x * SCALE, ny, z, OCT);
      n = n * 1.5 - 0.25;                       // 값 노이즈는 가운데로 몰린다 — 대비를 펴 준다
      if (n < 0) n = 0; else if (n > 1) n = 1;
      heights[hi++] = n;
      var band = (n * 5) | 0; if (band > 4) band = 4;
      var c = BANDS[band];
      px[i] = c[0]; px[i + 1] = c[1]; px[i + 2] = c[2]; px[i + 3] = 255;
      i += 4;
    }
  }
  // 2차 — 같은 높이맵을 더 촘촘한 문턱(LINE_LEVELS)으로 다시 나눠, 8-이웃과 등급이
  // 다른 경계 픽셀만 등고선 색으로 덮는다(marching squares 없이 간단하게)
  for (var yy = 0; yy < MH; yy++) {
    for (var xx = 0; xx < MW; xx++) {
      var idx = yy * MW + xx;
      var li = (heights[idx] * LINE_LEVELS) | 0;
      var edge = false;
      for (var dy = -1; dy <= 1 && !edge; dy++) {
        var ny2 = yy + dy; if (ny2 < 0 || ny2 >= MH) continue;
        for (var dx = -1; dx <= 1; dx++) {
          if (dx === 0 && dy === 0) continue;
          var nx2 = xx + dx; if (nx2 < 0 || nx2 >= MW) continue;
          var nli = (heights[ny2 * MW + nx2] * LINE_LEVELS) | 0;
          if (nli !== li) { edge = true; break; }
        }
      }
      if (edge) {
        var p2 = idx * 4;
        var k = 0.62; // 등고선 진하기 — 채움색 위에 얇게 얹는 정도
        px[p2] = px[p2] * (1 - k) + LINE[0] * k;
        px[p2 + 1] = px[p2 + 1] * (1 - k) + LINE[1] * k;
        px[p2 + 2] = px[p2 + 2] * (1 - k) + LINE[2] * k;
      }
    }
  }
  sctx.putImageData(buf, 0, 0);
  ctx.imageSmoothingEnabled = false;   // 고도띠 경계를 또렷하게 — 지도다운 각진 결
  ctx.drawImage(small, 0, 0, MW, MH, 0, 0, W, H);
}

function frame(now) {
  paint(now / 1000);
  raf = requestAnimationFrame(frame);
}

function applySeed(v) {
  var s = Math.max(1, Math.min(9999, Math.floor(v) || 1));
  seedIn.value = String(s);
  seedNum.textContent = String(s);
  buildTables(s);
  if (reduce) paint(0);
}

seedIn.addEventListener('input', function () { applySeed(Number(seedIn.value)); });
seedIn.addEventListener('change', function () { applySeed(Number(seedIn.value)); });
shuffleBtn.addEventListener('click', function () {
  applySeed(1 + Math.floor(Math.random() * 9999));
});
window.addEventListener('resize', function () { fit(); if (reduce) paint(0); });

fit();
buildTables(Number(seedIn.value));
if (reduce) {
  // reduce — 루프를 시작하지 않고 지형이 멈춰 선 한 장만 그린다(빈 화면이 아니다)
  root.classList.add('is-still');
  paint(0);
} else {
  raf = requestAnimationFrame(frame);
}

// ContourMap — vanilla 판(run/309/demo/02-terrain-contour-map/index.html) 의 React 포트.
// 2D fbm 높이맵을 160x100 ImageData 에 픽셀 단위로 채색해 고도띠 5단(hypsometric bands)을 칠하고,
// 같은 높이맵을 더 촘촘한 문턱(LINE_LEVELS)으로 다시 나눠 8-이웃과 등급이 다른 경계 픽셀만
// 등고선 색으로 덮는다(marching squares 없이 간단하게). z(시간축)가 흐르면 산맥이 서서히 부푼다.
import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./ContourMap.module.scss";

export type ContourMapProps = {
  duration?: string;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type Box<T> = { current: T };
type InputEvt = { target: { value: string } };

const MW = 160, MH = 100;          // 높이맵 버퍼 해상도 — 화면이 커져도 이 값은 그대로다
const SCALE = 0.052;               // 격자 간격 — 작을수록 산과 골짜기가 굵어진다(실측 튜닝)
const FLOW = 0.5;                  // 시간축이 흐르는 속도 — 산맥이 부푸는 빠르기
const OCT = 5;                     // fbm 옥타브 수 — 많을수록 등고선이 촘촘해진다
const LINE_LEVELS = 11;            // 등고선 문턱 칸 수(색 밴드 5단과 별개 — 더 촘촘해야 지도처럼 보인다)
const FIELD_LABEL = "고도띠 5단과 등고선으로 그린 지형 지도";

function fade(t: number): number {
  return t * t * (3 - 2 * t);      // 스무스스텝 — 격자 경계에서 각이 안 지게
}

// ── 결정적 난수 — mulberry32. 시드 하나 → 같은 테이블 ────────────────────────────
class ValueNoise {
  perm: Uint8Array;
  val: Float32Array;

  constructor(seed: number) {
    const a0 = seed >>> 0;
    let a = a0;
    const rng = () => {
      a = (a + 0x6d2b79f5) | 0;
      let t = Math.imul(a ^ (a >>> 15), 1 | a);
      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
    };
    const p: number[] = [];
    for (let i = 0; i < 256; i++) p[i] = i;
    for (let i = 255; i > 0; i--) {
      const j = (rng() * (i + 1)) | 0;
      const t = p[i]; p[i] = p[j]; p[j] = t;
    }
    this.perm = new Uint8Array(512);
    for (let i = 0; i < 512; i++) this.perm[i] = p[i & 255];
    this.val = new Float32Array(256);
    for (let i = 0; i < 256; i++) this.val[i] = rng();
  }

  at(x: number, y: number, z: number): number {
    const xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z);
    const xf = x - xi, yf = y - yi, zf = z - zi;
    const X = xi & 255, Y = yi & 255, Z = zi & 255;
    const u = fade(xf), v = fade(yf), w = fade(zf);
    const a = this.perm[X] + Y, b = this.perm[X + 1] + Y;
    const aa = this.perm[a] + Z, ab = this.perm[a + 1] + Z;
    const ba = this.perm[b] + Z, bb = this.perm[b + 1] + Z;
    const c000 = this.val[this.perm[aa]], c100 = this.val[this.perm[ba]];
    const c010 = this.val[this.perm[ab]], c110 = this.val[this.perm[bb]];
    const c001 = this.val[this.perm[aa + 1]], c101 = this.val[this.perm[ba + 1]];
    const c011 = this.val[this.perm[ab + 1]], c111 = this.val[this.perm[bb + 1]];
    const x00 = c000 + (c100 - c000) * u, x10 = c010 + (c110 - c010) * u;
    const x01 = c001 + (c101 - c001) * u, x11 = c011 + (c111 - c011) * u;
    const y0 = x00 + (x10 - x00) * v, y1 = x01 + (x11 - x01) * v;
    return y0 + (y1 - y0) * w;
  }
}

// fbm — 옥타브를 겹쳐 산맥·골짜기 굴곡을 만든다. z 가 흐르면 지형 전체가 서서히 다시 태어난다
function fbm(n: ValueNoise, x: number, y: number, z: number, oct: number): number {
  let sum = 0, amp = 0.5, norm = 0, f = 1;
  for (let i = 0; i < oct; i++) {
    sum += n.at(x * f, y * f, z * f) * amp;
    norm += amp;
    amp *= 0.5;
    f *= 2;
  }
  return sum / norm;
}

function hex3to6(v: string): string {
  if (v.length === 3) return v.charAt(0) + v.charAt(0) + v.charAt(1) + v.charAt(1) + v.charAt(2) + v.charAt(2);
  return v;
}

function rgbOf(root: HTMLElement, name: string): number[] {
  const v = hex3to6(getComputedStyle(root).getPropertyValue(name).trim().replace("#", ""));
  return [parseInt(v.slice(0, 2), 16), parseInt(v.slice(2, 4), 16), parseInt(v.slice(4, 6), 16)];
}

export default function ContourMap({
  duration = "2s",           // vanilla $duration: $dur-loop
  easing = "ease-out",       // vanilla $easing: $ease-out
  color = "#82a9f8",         // vanilla $color: $terrain-blue (mix($subject-blue,$stage-paper,34%) 근사값)
}: ContourMapProps) {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const fieldRef = useRef<HTMLDivElement | null>(null);
  const cvRef = useRef<HTMLCanvasElement | null>(null);
  const ctxRef = useRef<CanvasRenderingContext2D | null>(null);
  const smallRef = useRef<HTMLCanvasElement | null>(null);
  const sctxRef = useRef<CanvasRenderingContext2D | null>(null);
  const bufRef = useRef<ImageData | null>(null);
  const heightsRef = useRef<Float32Array | null>(null);
  const noiseRef = useRef<ValueNoise | null>(null);
  const bandsRef = useRef<number[][] | null>(null);
  const lineRef = useRef<number[] | null>(null);
  const sizeRef = useRef({ w: 0, h: 0 }) as Box<{ w: number; h: number }>;
  const rafRef = useRef(0) as Box<number>;
  const [seed, setSeed] = useState(7);
  const [still, setStill] = useState(false);
  const vars: Vars = { "--duration": duration, "--easing": easing, "--color": color };

  function reduced(): boolean {
    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  }

  // 고DPI 대응 — 배킹 스토어는 devicePixelRatio 배, 그리기 좌표계는 CSS 픽셀 그대로
  function fit(): void {
    const field = fieldRef.current;
    const cv = cvRef.current;
    if (!field || !cv) return;
    const r = field.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    sizeRef.current.w = r.width;
    sizeRef.current.h = r.height;
    cv.width = Math.round(r.width * dpr);
    cv.height = Math.round(r.height * dpr);
    const ctx = ctxRef.current;
    if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }

  function paint(sec: number): void {
    const ctx = ctxRef.current, sctx = sctxRef.current, n = noiseRef.current;
    const buf = bufRef.current, bands = bandsRef.current, line = lineRef.current;
    const heights = heightsRef.current;
    if (!ctx || !sctx || !n || !buf || !bands || !line || !heights) return;
    const W = sizeRef.current.w, H = sizeRef.current.h;
    const z = sec * FLOW;
    const px = buf.data;
    let i = 0, hi = 0;
    // 1차 — 높이를 구하고 고도띠 5단 색을 채운다
    for (let y = 0; y < MH; y++) {
      const ny = y * SCALE;
      for (let x = 0; x < MW; x++) {
        let v = fbm(n, x * SCALE, ny, z, OCT);
        v = v * 1.5 - 0.25;                     // 값 노이즈는 가운데로 몰린다 — 대비를 펴 준다
        if (v < 0) v = 0; else if (v > 1) v = 1;
        heights[hi++] = v;
        let band = (v * 5) | 0; if (band > 4) band = 4;
        const c = bands[band];
        px[i] = c[0]; px[i + 1] = c[1]; px[i + 2] = c[2]; px[i + 3] = 255;
        i += 4;
      }
    }
    // 2차 — 같은 높이맵을 더 촘촘한 문턱으로 다시 나눠, 8-이웃과 등급이 다른
    // 경계 픽셀만 등고선 색으로 덮는다(marching squares 없이 간단하게)
    for (let yy = 0; yy < MH; yy++) {
      for (let xx = 0; xx < MW; xx++) {
        const idx = yy * MW + xx;
        const li = (heights[idx] * LINE_LEVELS) | 0;
        let edge = false;
        for (let dy = -1; dy <= 1 && !edge; dy++) {
          const ny2 = yy + dy; if (ny2 < 0 || ny2 >= MH) continue;
          for (let dx = -1; dx <= 1; dx++) {
            if (dx === 0 && dy === 0) continue;
            const nx2 = xx + dx; if (nx2 < 0 || nx2 >= MW) continue;
            const nli = (heights[ny2 * MW + nx2] * LINE_LEVELS) | 0;
            if (nli !== li) { edge = true; break; }
          }
        }
        if (edge) {
          const p2 = idx * 4;
          const k = 0.62;   // 등고선 진하기 — 채움색 위에 얇게 얹는 정도
          px[p2] = px[p2] * (1 - k) + line[0] * k;
          px[p2 + 1] = px[p2 + 1] * (1 - k) + line[1] * k;
          px[p2 + 2] = px[p2 + 2] * (1 - k) + line[2] * k;
        }
      }
    }
    sctx.putImageData(buf, 0, 0);
    ctx.imageSmoothingEnabled = false;   // 고도띠 경계를 또렷하게 — 지도다운 각진 결
    ctx.drawImage(sctx.canvas, 0, 0, MW, MH, 0, 0, W, H);
  }

  function frame(now: number): void {
    paint(now / 1000);
    rafRef.current = requestAnimationFrame(frame);
  }

  function applySeed(v: number): void {
    const s = Math.max(1, Math.min(9999, Math.floor(v) || 1));
    setSeed(s);
    noiseRef.current = new ValueNoise(s);
    if (reduced()) paint(0);
  }

  function onInput(e: InputEvt): void {
    applySeed(Number(e.target.value));
  }

  function onShuffle(): void {
    applySeed(1 + Math.floor(Math.random() * 9999));
  }

  function onResize(): void {
    fit();
    if (reduced()) paint(0);
  }

  useEffect(() => {
    const cv = cvRef.current;
    const root = rootRef.current;
    if (!cv || !root) return;
    ctxRef.current = cv.getContext("2d");
    if (!ctxRef.current) return;
    const small = document.createElement("canvas");
    small.width = MW;
    small.height = MH;
    smallRef.current = small;
    sctxRef.current = small.getContext("2d");
    if (!sctxRef.current) return;
    bufRef.current = sctxRef.current.createImageData(MW, MH);   // 한 번만 만들어 두고 프레임마다 같은 배열을 덮어쓴다
    heightsRef.current = new Float32Array(MW * MH);
    noiseRef.current = new ValueNoise(seed);
    bandsRef.current = [
      rgbOf(root, "--c0"), rgbOf(root, "--c1"), rgbOf(root, "--c2"), rgbOf(root, "--c3"), rgbOf(root, "--c4"),
    ];
    lineRef.current = rgbOf(root, "--c-line");
    fit();
    window.addEventListener("resize", onResize);
    if (reduced()) {
      // reduce — 루프를 시작하지 않고 지형이 멈춰 선 한 장만 그린다(빈 화면이 아니다)
      setStill(true);
      paint(0);
    } else {
      rafRef.current = requestAnimationFrame(frame);
    }
    return () => {
      window.removeEventListener("resize", onResize);
      cancelAnimationFrame(rafRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const cls = [styles.cm, still ? styles.isStill : ""].filter(Boolean).join(" ");
  return (
    <main className={styles.stage}>
      <div className={cls} ref={rootRef} style={vars}>
        <p className={styles.hint}>
          <svg className={styles.ico} viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M144 52a20 20 0 1 1 20 20a20 20 0 0 1-20-20m49.44 55.92a8 8 0 0 0-13.77 0l-33 55.75l-21-35.67H50.35L8 200h240Z" opacity=".2"/><path d="M164 80a28 28 0 1 0-28-28a28 28 0 0 0 28 28m0-40a12 12 0 1 1-12 12a12 12 0 0 1 12-12m90.88 155.92l-54.56-92.08A15.87 15.87 0 0 0 186.55 96a15.85 15.85 0 0 0-13.76 7.84L146.63 148l-44.84-76.1a16 16 0 0 0-27.58 0L1.11 195.94A8 8 0 0 0 8 208h240a8 8 0 0 0 6.88-12.08M88 80l23.57 40H64.43ZM22 192l33-56h66l33 56Zm150.57 0l-16.66-28.28L186.55 112L234 192Z"/></g></svg>
          <span>산맥이 천천히 부풀고 등고선이 다시 그어집니다</span>
        </p>
        <div className={styles.field} ref={fieldRef} role="img" aria-label={FIELD_LABEL}>
          <canvas className={styles.cv} ref={cvRef}></canvas>
        </div>
        <div className={styles.legend} aria-hidden="true">
          <div className={styles.lg}><i className={styles.sw} style={{ background: "var(--c0)" }} />0</div>
          <div className={styles.lg}><i className={styles.sw} style={{ background: "var(--c1)" }} />250</div>
          <div className={styles.lg}><i className={styles.sw} style={{ background: "var(--c2)" }} />500</div>
          <div className={styles.lg}><i className={styles.sw} style={{ background: "var(--c3)" }} />750</div>
          <div className={styles.lg}><i className={styles.sw} style={{ background: "var(--c4)" }} />1000</div>
          <span className={styles.unit}>m</span>
        </div>
        <div className={styles.bar}>
          <label className={styles.dial}>시드
            <input type="number" min={1} max={9999} step={1} value={seed} aria-label="시드 번호" onChange={onInput} />
          </label>
          <button className={styles.shuffle} type="button" onClick={onShuffle}>
            <svg className={styles.ico} viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M32 72h32l16 24-13 9-11-17H32a8 8 0 0 1 0-16" opacity=".2"/><path d="M237.66 178.34a8 8 0 0 1 0 11.32l-24 24A8 8 0 0 1 200 208V184h-29.41a40 40 0 0 1-33.94-18.75L102.71 115.5A24 24 0 0 0 82.75 104H32a8 8 0 0 1 0-16h50.75a40 40 0 0 1 33.94 18.75l33.94 49.75a24 24 0 0 0 19.96 11.5H200v-24a8 8 0 0 1 13.66-5.66ZM32 152h50.75a24 24 0 0 0 19.96-11.5l8.11-11.87 9.51 13.93-6.9 10.11a40 40 0 0 1-33.94 18.72H32a8 8 0 0 1 0-16m150.34-82.34a8 8 0 0 0 13.66 5.66V96h-34.46a40 40 0 0 1-33.94-18.75l-6.9-10.11 9.51-13.93 8.11 11.87A24 24 0 0 0 158.29 80H196V56a8 8 0 0 0-13.66-5.66" fillRule="evenodd"/></g></svg>
            <span>새 지형</span>
          </button>
          <b className={styles.val}>시드 <span>{seed}</span></b>
        </div>
      </div>
    </main>
  );
}