MODE — 오직 그라데이션만
  ============<div class="demo-wrapper" style="width:100vw; height:200vh; background:#fff; position:relative; overflow:hidden;">
  
  <!-- ✅ 추가: 그라데이션 오버레이 -->
  <div class="gradient-bg"></div>

  <!-- ✅ 1. 상단바 -->
  <div class="top-bar">
    <span class="left-text">See What Data Feels like</span>
    <span class="right-text">색으로 데이터를 읽다</span>
  </div>

  <!-- ✅ 2. 좌측 세로바 -->
  <div class="left-bar">
    <div class="numbers">
      <span>10</span>
      <span>9</span>
      <span>8</span>
      <span>7</span>
      <span>6</span>
      <span>5</span>
      <span>4</span>
      <span>3</span>
      <span>2</span>
      <span>1</span>
      <span>0</span>
    </div>
  </div>

  <!-- ✅ 3. 우측 세로바 -->
  <div class="right-bar">
    <div class="color red"></div>
    <div class="space-block"></div>
    <div class="color orange"></div>
    <div class="space-block"></div>
    <div class="color yellow"></div>
    <div class="space-block"></div>
    <div class="color green"></div>
    <div class="space-block"></div>
    <div class="color cyan"></div>
    <div class="space-block"></div>
    <div class="color blue"></div>
  </div>
  
   <!-- ✅ 4. 중앙 로고 -->
  <div class="logo-container">
  <!-- CHROMADATA LOGO -->
  <svg class="chromadata-logo" viewBox="0 0 853 179" xmlns="http://www.w3.org/2000/svg">
    <path d="M73.088 109.312L86.272 109.44C83.456 127.104 69.632 138.624 47.616 138.624C22.016 138.624 5.12 119.68 5.12 88.704C5.12 57.856 22.016 38.784 47.616 38.784C69.504 38.784 83.2 49.664 86.016 67.072L72.704 67.2C70.656 57.344 61.568 49.664 47.616 49.664C31.36 49.664 18.176 64.768 18.176 88.704C18.176 112.64 31.36 127.744 47.616 127.744C61.568 127.744 71.04 119.936 73.088 109.312ZM158.462 41.344H171.518V136.064H158.462V93.312H109.054V136.064H95.998V41.344H109.054V82.688H158.462V41.344ZM184.441 41.344H226.553C248.057 41.344 258.937 51.712 258.937 68.352C258.937 83.2 250.233 93.056 233.209 94.976L263.417 136.064H248.313L218.745 95.36H197.497V136.064H184.441V41.344ZM226.553 51.968H197.497V84.736H226.553C239.865 84.736 245.881 78.592 245.881 68.352C245.881 57.984 239.865 51.968 226.553 51.968ZM353.656 88.704C353.656 119.296 335.096 138.624 309.24 138.624C283.384 138.624 264.824 119.296 264.824 88.704C264.824 58.112 283.384 38.784 309.24 38.784C335.096 38.784 353.656 58.112 353.656 88.704ZM340.6 88.704C340.6 64.128 328.056 49.664 309.24 49.664C290.424 49.664 277.88 64.128 277.88 88.704C277.88 113.28 290.424 127.744 309.24 127.744C328.056 127.744 340.6 113.28 340.6 88.704ZM444.461 41.472H458.157V136.064H445.357V69.888L417.069 136.32H405.165L376.877 69.888V136.064H364.077V41.472H377.773L411.053 119.552L444.461 41.472ZM499.817 41.088H511.849L547.945 136.064H534.249L524.137 108.032H487.529L477.417 136.064H463.721L499.817 41.088ZM505.833 57.088L491.369 97.408H520.297L505.833 57.088ZM579.319 136.064H553.463V41.344H579.319C612.343 41.344 629.239 58.496 629.239 88.704C629.239 118.912 612.343 136.064 579.319 136.064ZM579.319 51.968H566.519V125.44H579.319C603.767 125.44 616.183 112.896 616.183 88.704C616.183 64.512 603.767 51.968 579.319 51.968ZM664.453 41.088H676.485L712.581 136.064H698.885L688.773 108.032H652.165L642.053 136.064H628.357L664.453 41.088ZM670.469 57.088L656.005 97.408H684.933L670.469 57.088ZM777.546 41.344V51.968H746.826V136.064H733.77V51.968H703.05V41.344H777.546ZM804.089 41.088H816.121L852.217 136.064H838.521L828.409 108.032H791.801L781.689 136.064H767.993L804.089 41.088ZM810.105 57.088L795.641 97.408H824.569L810.105 57.088Z" fill="black"/>
    <rect width="11" height="66" transform="matrix(-8.74228e-08 1 1 2.18557e-08 0 19)" fill="#EB000E"/>
    <rect width="11" height="67" transform="matrix(-2.64128e-07 1 1 7.23393e-09 157 19)" fill="#FF6A00"/>
    <rect width="11" height="67" transform="matrix(-2.64128e-07 1 1 7.23393e-09 314 19)" fill="#FFFF00"/>
    <rect width="11" height="66" transform="matrix(-2.64128e-07 1 1 7.23393e-09 786 19)" fill="#0000FF"/>
    <rect width="11" height="67" transform="matrix(-2.64128e-07 1 1 7.23393e-09 471 19)" fill="#00FF00"/>
    <rect width="11" height="67" transform="matrix(-2.64128e-07 1 1 7.23393e-09 628 19)" fill="#00FFFF"/>
  </svg>
</div>
  
  <p id="modeText" class="mode-text">
    Current Mode: Default
  </p>
  
   <div id="click-counters" class="click-counters"></div>

   <div class="content-box">
    <h2>&lt;&lt;About Movement&gt;&gt;</h2>
    <p>
      이곳은 윈도우 창의 크기에 따라 변하는 실험적 공간입니다. <br>
      천천히 화면의 크기를 조정하며, 변화하는 색과 움직임을 경험해보세요.
    </p>
  </div>
  
    <div class="heatmap"></div>
  <div id="map"></div>

<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: #fff;
  overflow-x: hidden;
}
  
 /* ✅ gradient-bg: scroll 전용 */
.gradient-bg {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:9; /* bar 아래, heatmap 내부 최하단 */
  opacity:0;
  background:linear-gradient(
    to bottom,
    #ff0000,
    #ff6a00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff
  );
  transition:opacity 0.1s linear;
}

  
/* ✅ 대지 전체 */
.demo-wrapper {
  width: 100vw;
  min-height: 100vh; /* 스크롤 가능한 높이 확보 */
  background: #fff;
  position: relative;
  z-index: 0; /* 제일 뒤 */
}

#map {
  width: 100%;
  height: 100%;
}

/* ✅ 상단바 */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-family: 'Helvetica', sans-serif;
  font-size: 14px;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 30;
}

/* ✅ 좌측 세로바 */
.left-bar {
  position: fixed;
  left: 0;
  top: 0;
  margin-top: 20px;
  width: clamp(28px, 4vw, 50px); /* 화면 비율에 따라 자동 조정 */
  height: 100vh;
  border-right: 2px solid #000;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 25;
}

.left-bar .numbers {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90%;
  align-items: center;
  font-family: 'Helvetica', sans-serif;
  color: black;
  font-size: 14px;
}

/* ✅ 우측 세로바 */
.right-bar {
  position: fixed;
  right: 0;
  top: 0;
  margin-top: 20px;
  width: clamp(28px, 4vw, 50px); /* 반응형 폭 */
  height: 100vh; /* 전체 화면 높이로 확대 */
  display: flex;
  flex-direction: column;
  z-index: 25;
}

.right-bar::-webkit-scrollbar {
  display: none; /* 크롬 등에서 스크롤바 숨김 */
}

/* ✅ 실제 색상 블록 */
.color {
  height: 50vh;
  width: 100%;
}

.space-block {
  height: 50vh; /* 흰색 여백 높이 */
  background: #fff;
}
  
.red { background: #EB000E; }
.orange { background: #FF6A00; }
.yellow { background: #FFFF00; }
.green { background: #00FF00; }
.cyan { background: #00FFFF; }
.blue { background: #0000FF; }
  
 /* ✅ 중앙 로고 */
 .logo-container {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translate(-50%);
  width: 40vw; /* 화면 크기에 따라 자동 조절 */
  max-width: 600px;
  min-width: 200px;
  text-align: center;
  z-index: 20;
}

.chromadata-logo {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
  
/* ✅ "Current Mode" 텍스트 */
.mode-text {
  position: fixed;
  top: calc(40px + clamp(80px, 12vw, 200px)); /* 로고 아래 간격 자동 조정 */
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: 90vw;
  text-align: center;
  color: black;
  font-family: sans-serif;
  z-index: 20;
  font-size: clamp(15px, 1.3vw, 23px); /* 반응형 폰트 크기 */
  line-height: 1.4;
 }
  
/* ✅ 히트맵 */
.heatmap {
  position: absolute; /* fixed → absolute 로 변경 */
  top: 0;
  left: clamp(28px, 4vw, 50px);
  right: clamp(28px, 4vw, 50px);
  width: calc(100% - clamp(56px, 8vw, 100px));
  height: 200vh; /* 문서 전체 높이 */
  z-index: 10;
  pointer-events: none;
}
  
.heatmap canvas {
  background: transparent !important; /* 🔥 불필요한 회색 막 제거 */
  position: absolute;
  top: 0;
  left: clamp(28px, 4vw, 50px); /* 좌측 세로바 폭만큼 띄움 */
  right: clamp(28px, 4vw, 50px); /* 우측 세로바 폭만큼 띄움 */
  z-index: 10; /* content-box 위, 로고 아래 */
  pointer-events: none;
}
  
/* ✅ 중앙 회색 박스 */
.content-box {
  position: fixed;
  top: calc(350px + 24vh); /* 로고 아래 일정 거리 — 화면 크기 따라 자연스럽게 내려감 */
  left: 50%;
  transform: translateX(-50%); /* X축만 중앙 정렬 */
  width: 50vw; /* 로고와 같은 비율로 반응형 */
  max-width: 600px;
  min-width: 200px;
  background: rgba(240, 240, 240, 0.9);
  border-radius: 10px;
  
   /* 🔹 박스 내부 여백 (세로/가로 각각 별도 조정) */
  padding-top: clamp(12px, 1vh, 22px);   /* 제목 위쪽 여백 */
  padding-bottom: clamp(20px, 1vh, 30px); /* 본문 아래 여백 */
  padding-left: clamp(18px, 2vw, 30px);
  padding-right: clamp(18px, 2vw, 30px);

  text-align: center;
  z-index: 5; /* 로고보다 뒤, 히트맵 아래 */
  pointer-events: none; /* 히트맵 클릭 방해 안 하게 */
  box-sizing: border-box;
}
  
/* ✅ 제목 */
.content-box h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(16px, 1.5vw, 25px);
  font-weight: 600;
  color: #333;
  letter-spacing: 0.5px;
  }

/* ✅ 설명 텍스트 */
.content-box p {
  font-size: clamp(13px, 1.2vw, 17px);
  color: #333;
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
  }

/* ✅ 클릭 횟수 컨테이너 (숫자들이 히트맵 위에 오도록 z-index 설정) */
.click-counters {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 클릭 이벤트를 히트맵이 받도록 통과시킴 */
  z-index: 10; /* 히트맵보다 위에 위치 */
}

/* ✅ 개별 클릭 횟수 숫자 스타일 */
.click-counter-point {
  position: absolute;
  background: white; /* 숫자 가독성 강화 */
  color: white;
  font-size: 28px;
  font-weight: 800;
  border-radius: 8px;
  padding: 2px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -100%); /* 원 중심 기준 위쪽으로 배치 */
  pointer-events: none;
  z-index: 10;
  transition: transform 0.1s ease-out, opacity 0.3s;
}
</style>

<script src="https://unpkg.com/heatmap.js@2.0.5"></script>
<script>
/* ====== 기본 세팅 ====== */
const wrapper = document.querySelector('.demo-wrapper');
const container = document.querySelector('.heatmap');
const modeText = document.getElementById('modeText');
const contentBox = document.querySelector('.content-box');
const clickCounters = document.getElementById('click-counters');

let heatmapInstance;
let gradientOverlay = null;
let scrollHandler = null;

/* 클릭 좌표별 카운트 저장 */
const clickData = {};
const clickTolerance = 50;

/* ✅ 모드별 히트맵 설정 */
const config = {
  move: { radius: 80, blur: 0.85, maxOpacity: 0.7 },
  scroll: { radius: 300, blur: 0.95, maxOpacity: 0.5 },
  click: { radius: 40, blur: 0.5, maxOpacity: 1 }
};

/* ✅ 색상 그래디언트 */
const gradient = {
  0.0: '#000000', 0.2: '#0000ff', 0.4: '#00ffff',
  0.6: '#00ff00', 0.8: '#ffff00', 1.0: '#ff0000'
};

/* ✅ 모드 감지 */
function getMode() {
  const w = window.innerWidth;
  if (w > 900) return "scroll";
  if (w > 600) return "move";
  return "click";
}
let currentMode = getMode();

/* ✅ 콘텐츠 텍스트 변경 */
function setContentText(mode) {
  const title = contentBox.querySelector("h2");
  const desc = contentBox.querySelector("p");
  if (mode === "scroll") {
    title.innerHTML = "&lt;&lt;Scroll Movement&gt;&gt;";
    desc.innerHTML = `당신은 어느 정도 스크롤하나요?<br>마우스 휠을 이용해 위아래로 움직여보세요.`;
  } else if (mode === "move") {
    title.innerHTML = "&lt;&lt;Move Movement&gt;&gt;";
    desc.innerHTML = `당신이 마우스를 움직이는 경로는 어떤가요?<br>마우스를 이리저리 움직여보세요.`;
  } else {
    title.innerHTML = "&lt;&lt;Click Movement&gt;&gt;";
    desc.innerHTML = `당신은 얼마나 자주 클릭하나요?<br>클릭할수록 숫자 포인트가 올라갑니다.`;
  }
}

/* ✅ 히트맵 생성 */
function createHeatmap(mode) {
  container.innerHTML = "";
  heatmapInstance = h337.create({
    container,
    ...config[mode],
    gradient:mode==="scroll"?{0.0:"rgba(0,0,0,0)",1.0:"rgba(0,0,0,0)"}:gradient
  });
  // ✅ 추가: heatmap 캔버스 완전 투명 처리
  const canvas = container.querySelector("canvas");
  if (canvas) {
    canvas.style.background = "transparent";  // 🔥 핵심
  }
}

  

/* ✅ Scroll Gradient 생성 */
function createScrollGradient() {
  removeScrollGradient();
  gradientOverlay = document.createElement('div');
  gradientOverlay.className = 'gradient-bg';
  container.appendChild(gradientOverlay); // ✅ heatmap 내부로 이동
  scrollHandler=()=>{
  const scrollTop=window.scrollY;
  const docHeight=document.documentElement.scrollHeight-window.innerHeight;
const scrollPercent=scrollTop/docHeight;
gradientOverlay.style.opacity=Math.min(scrollPercent*2,0.6);
};
window.addEventListener('scroll',scrollHandler);
}


function removeScrollGradient(){
if(gradientOverlay){gradientOverlay.remove();gradientOverlay=null;}
if(scrollHandler){window.removeEventListener('scroll',scrollHandler);scrollHandler=null;}
}

/* ✅ "+1" 클릭 이펙트 */
function showClickBurst(x, y, count) {
  const burst = document.createElement('div');
  burst.textContent = `+${count}`;
  Object.assign(burst.style, {
    position: 'absolute',
    left: `${x}px`,
    top: `${y - 20}px`,
    color: 'rgba(255,69,0,1)',
    fontWeight: '700',
    fontSize: '22px',
    pointerEvents: 'none',
    zIndex: '999',
    transform: 'translate(-50%, -50%)',
    transition: 'all 0.8s ease-out'
  });
  clickCounters.appendChild(burst);
  setTimeout(() => {
    burst.style.transform = 'translate(-50%, -150%)';
    burst.style.opacity = '0';
  }, 50);
  setTimeout(() => burst.remove(), 800);
}

/* ✅ 클릭 카운트 표시 */
function updateClickCounter(x, y) {
  clickCounters.innerHTML = '';

  let nearestKey = null;
  let minDistance = clickTolerance;
  for (const key in clickData) {
    const [cx, cy] = key.split('_').map(Number);
    const dist = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2);
    if (dist < minDistance) {
      minDistance = dist;
      nearestKey = key;
    }
  }

  let keyToUse;
  if (nearestKey) {
    keyToUse = nearestKey;
    clickData[keyToUse].count++;
  } else {
    keyToUse = `${Math.round(x)}_${Math.round(y)}`;
    clickData[keyToUse] = { count: 1, x, y };
  }

  const data = clickData[keyToUse];
  const counter = document.createElement('div');
  counter.className = 'click-counter-point';
  counter.textContent = data.count;
  counter.style.left = `${data.x}px`;
  counter.style.top = `${data.y - 30}px`;

  const last = data.count % 10;
  const colors = ['#0000FF', '#00FFFF', '#00FFFF', '#00FF00', '#00FF00', '#FFFF00', '#FFFF00', '#FF6A00', '#FF6A00', '#EB000E'];
  const color = colors[last];
  const size = 50 + data.count * 3;

  Object.assign(counter.style, {
    position: 'absolute',
    background: color,
    boxShadow: `0 0 10px ${color}`,
    width: `${size}px`,
    height: `${size}px`,
    color: '#fff',
    fontSize: `${22 + Math.min(8, data.count)}px`,
    fontWeight: '800',
    borderRadius: '8px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    transform: 'translate(-50%, -100%)',
    pointerEvents: 'none',
    transition: 'all 0.2s ease-out'
  });

  clickCounters.appendChild(counter);
}

/* ✅ 모드 전환 */
function setHeatmapMode(mode) {
  // 1️⃣ 모든 이벤트 초기화
  wrapper.onmousemove = null;
  wrapper.onclick = null;
  window.onscroll = null;
  removeScrollGradient();
  clickCounters.innerHTML = '';
  for (const k in clickData) delete clickData[k];
  
  // 2️⃣ 공통 텍스트 업데이트
  setContentText(mode);  // ✅ 여기가 맞는 코드야 (자기 자신 호출 X)
  
  /* =============================
     ✅ SCROLL MODE — 오직 그라데이션만
  ============================== */
  if (mode === "scroll") {
    modeText.textContent = "Current Mode: Scroll Heatmap";
    // heatmap 생성 ❌ → 캔버스 없음, 회색막 제거
    createScrollGradient(); // 그라데이션만 표시
    return; // ✅ 여기서 종료 (heatmap 관련 실행 안 함)
  }
  
  /* =============================
     ✅ MOVE & CLICK MODE — heatmap 활성화
  ============================== */
  createHeatmap(mode);
  modeText.textContent = `Current Mode: ${mode.charAt(0).toUpperCase() + mode.slice(1)} Heatmap`;

  // 🔹 마우스 이동 히트맵
  if (mode === "move") {
    wrapper.onmousemove = (e) => {
      heatmapInstance.addData({
        x: e.clientX,
        y: e.clientY + window.scrollY,
        value: 1
      });
    };
  }
  // 🔹 클릭 히트맵
  else if (mode === "click") {
    wrapper.onclick = (e) => {
      const x = e.clientX, y = e.clientY + window.scrollY;
      heatmapInstance.addData({ x, y, value: 5 });
      updateClickCounter(x, y);
      showClickBurst(x, y, 1);
    };
  }
}
  
/* ✅ 리사이즈 대응 */
window.addEventListener('resize',()=>{
const newMode=getMode();
if(newMode!==currentMode){currentMode=newMode;setHeatmapMode(currentMode);}
});
</script>