(() => {
  'use strict';

  const field = document.querySelector('.artwork');
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  if (!context) return;

  const styles = ['orbit', 'wave', 'mesh', 'bloom', 'particles', 'type',
    'moire', 'slits', 'trails', 'pixels', 'negative', 'eclipse', 'hexagons',
    'planes', 'flowmap', 'vortex', 'ribbons', 'checker', 'dunes', 'constellation',
    'lens', 'sweep', 'window', 'mosaic', 'fragments', 'soundfield',
    'blobs', 'tiles', 'monogram', 'glyphs'];
  const names = {
    orbit: 'Orbit', wave: 'Wave', mesh: 'Mesh', bloom: 'Light Bloom',
    particles: 'Particle Field', type: 'Kinetic Type', moire: 'Moiré',
    slits: 'Color Slits', trails: 'Afterimage', pixels: 'Pixel Field',
    negative: 'Negative Space', eclipse: 'Eclipse', hexagons: 'Hex Field',
    planes: 'Offset Planes', flowmap: 'Flow Map', vortex: 'Vortex', ribbons: 'Silk Ribbons',
    checker: 'Soft Checker', dunes: 'Dunes', constellation: 'Constellation', lens: 'Lens',
    sweep: 'Band Sweep', window: 'Elastic Window', mosaic: 'Tri Mosaic', fragments: 'Fragments',
    soundfield: 'Sound Field', blobs: 'Duotone Blobs', tiles: 'Arc Tiles',
    monogram: 'Chromatic N', glyphs: 'Glyph Field'
  };
  const schedule = globalThis.NNCArtworkSchedule;
  const initialSelection = schedule.selectionAt(Date.now(), styles.length);
  let currentSlot = initialSelection.slot;
  let variant = initialSelection.variant;
  field.dataset.artwork = styles[variant];
  const extendedHues = [12, 190, 275, 335, 165, 28, 215, 185, 35, 320, 155, 205, 265, 15, 170, 240, 175];
  if (variant >= 13) {
    field.dataset.series = 'extended';
    field.style.setProperty('--art-hue', extendedHues[variant - 13]);
  }
  field.append(canvas);
  const picker = document.querySelector('#artwork-picker');
  styles.forEach((style, index) => {
    const option = document.createElement('option');
    option.value = String(index);
    option.textContent = `${String(index + 1).padStart(2, '0')} / ${names[style]}`;
    picker.append(option);
  });
  picker.value = String(variant);

  const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
  const theme = matchMedia('(prefers-color-scheme: dark)');
  const pointer = { x: 0, y: 0, targetX: 0, targetY: 0, active: 0, targetActive: 0 };
  function particleSet() {
    const random = schedule.createRandom(Math.imul(currentSlot, 31) + variant);
    return Array.from({ length: 1800 }, () => ({
      x: random(), y: random(), offset: random() * Math.PI * 2,
      depth: random(), size: 0.5 + random() * 1.2
    }));
  }
  let particles = particleSet();
  let width = 0;
  let height = 0;
  let stroke;
  let frame = 0;
  let lastTime = 0;
  let phase = 0;
  let visible = true;

  function localPointer() {
    const bounds = field.getBoundingClientRect();
    return {
      x: (pointer.x + 1) / 2 * innerWidth - bounds.left,
      y: (pointer.y + 1) / 2 * innerHeight - bounds.top
    };
  }

  function path(points) {
    context.beginPath();
    points.forEach(([x, y], index) => {
      if (index === 0) context.moveTo(x, y);
      else context.lineTo(x, y);
    });
    context.stroke();
  }

  function polygon(points, color) {
    context.fillStyle = color;
    context.beginPath();
    points.forEach(([x, y], index) => {
      if (index === 0) context.moveTo(x, y);
      else context.lineTo(x, y);
    });
    context.closePath();
    context.fill();
  }

  function drawExtended(style, px, py) {
    const hue = extendedHues[variant - 13];
    const color = (offset = 0, light = 50, saturation = 45) =>
      `hsl(${hue + offset}, ${saturation}%, ${theme.matches ? light * 0.8 : light}%)`;
    const ink = color(0, theme.matches ? 80 : 35, 30);
    const unit = Math.min(width, height);
    const cx = width * (0.5 + px * 0.06);
    const cy = height * (0.5 + py * 0.06);
    context.strokeStyle = ink;
    context.fillStyle = ink;
    context.lineCap = 'round';

    switch (style) {
      case 'planes': {
        context.save();
        context.globalCompositeOperation = theme.matches ? 'screen' : 'multiply';
        const size = unit * 0.6;
        for (let plane = 0; plane < 4; plane++) {
          context.save();
          const direction = plane % 2 ? 1 : -1;
          context.translate(cx + direction * size * (0.17 + px * 0.12),
            cy + (plane - 1.5) * size * 0.12 + py * size * direction * 0.1);
          context.rotate(direction * 0.2 + Math.sin(phase * 0.2 + plane) * 0.03);
          context.globalAlpha = 0.7;
          context.fillStyle = color(plane * 65, 55 + plane * 5, 50);
          context.fillRect(-size * 0.47, -size * 0.43, size * 0.94, size * 0.86);
          context.restore();
        }
        context.restore();
        break;
      }
      case 'flowmap': {
        const cell = Math.max(28, Math.sqrt(width * height / 700));
        const cursor = localPointer();
        const reach = Math.max(unit * 0.35, 80);
        context.lineWidth = 1.6;
        for (let y = cell / 2; y < height; y += cell) {
          for (let x = cell / 2; x < width; x += cell) {
            const dx = x - cursor.x, dy = y - cursor.y;
            const focus = Math.exp(-(dx * dx + dy * dy) / (reach * reach)) * pointer.active;
            const angle = Math.sin(x / width * 5 + phase * 0.2)
              + Math.cos(y / height * 4 - phase * 0.15) + focus * 1.4;
            const length = cell * (0.26 + focus * 0.1);
            const ax = Math.cos(angle) * length, ay = Math.sin(angle) * length;
            context.strokeStyle = color(focus * 55, theme.matches ? 72 : 42, 35);
            path([[x - ax, y - ay], [x + ax, y + ay]]);
          }
        }
        break;
      }
      case 'vortex': {
        for (let arm = 0; arm < 12; arm++) {
          const points = [];
          for (let step = 0; step <= 150; step++) {
            const u = step / 150;
            const angle = arm / 12 * Math.PI * 2 + u * 7 + phase * 0.12 + px * 0.6;
            const radius = u * Math.hypot(width, height) * 0.65;
            points.push([cx + Math.cos(angle) * radius, cy + Math.sin(angle) * radius * (0.72 + py * 0.08)]);
          }
          context.strokeStyle = color(arm * 3, theme.matches ? 72 : 46);
          context.lineWidth = 1.5;
          path(points);
        }
        break;
      }
      case 'ribbons': {
        const thickness = unit * 0.045;
        for (let ribbon = 0; ribbon < 7; ribbon++) {
          const upper = [], lower = [];
          for (let step = 0; step <= 100; step++) {
            const u = step / 100;
            const y = height * (0.12 + ribbon * 0.12 + Math.sin(u * 5 + ribbon * 0.5 + phase * 0.2 + px) * 0.16)
              + py * height * 0.06 * Math.sin(u * Math.PI);
            upper.push([u * width, y - thickness]);
            lower.push([u * width, y + thickness]);
          }
          polygon([...upper, ...lower.reverse()], color(ribbon * 9, 38 + ribbon * 6, 48));
        }
        break;
      }
      case 'checker': {
        const cell = Math.max(48, Math.sqrt(width * height / 170));
        const bend = (x, y) => [x + Math.sin(y / height * 5 + phase * 0.2 + py) * cell * 0.25,
          y + Math.sin(x / width * 6 + phase * 0.25 + px) * cell * 0.25];
        for (let row = -1; row < height / cell + 1; row++) {
          for (let column = -1; column < width / cell + 1; column++) {
            if ((row + column) % 2 === 0) continue;
            const x = column * cell, y = row * cell;
            polygon([bend(x, y), bend(x + cell, y), bend(x + cell, y + cell), bend(x, y + cell)], color(0, theme.matches ? 48 : 63, 24));
          }
        }
        break;
      }
      case 'dunes': {
        for (let layer = 0; layer < 7; layer++) {
          const points = [[0, height]];
          for (let step = 0; step <= 100; step++) {
            const u = step / 100;
            points.push([u * width, height * (0.15 + layer * 0.125
              + Math.sin(u * 4 + layer * 0.65 + phase * 0.12 + px * (layer + 1) * 0.15) * 0.1
              + py * 0.025 * layer)]);
          }
          points.push([width, height]);
          polygon(points, color(layer * -3, 78 - layer * 7, 42));
        }
        break;
      }
      case 'constellation': {
        const count = width < 680 ? 35 : 65;
        const points = particles.slice(0, count).map(point => [
          width * (0.05 + point.x * 0.9) + Math.sin(phase * 0.2 + point.offset) * 8 + px * point.depth * 16,
          height * (0.06 + point.y * 0.88) + Math.cos(phase * 0.2 + point.offset) * 8 + py * point.depth * 16]);
        const reach = Math.sqrt(width * height / count) * 1.4;
        points.forEach((point, index) => {
          for (let other = index + 1; other < count; other++) {
            const distance = Math.hypot(point[0] - points[other][0], point[1] - points[other][1]);
            if (distance < reach) {
              context.globalAlpha = (1 - distance / reach) * 0.6;
              path([point, points[other]]);
            }
          }
          context.globalAlpha = 0.8;
          context.beginPath();
          context.arc(point[0], point[1], 1.8 + particles[index].depth * 1.5, 0, Math.PI * 2);
          context.fill();
        });
        break;
      }
      case 'lens': {
        const gap = Math.max(14, width / 90);
        const radius = unit * 0.38;
        for (let x = -radius; x < width + radius; x += gap) {
          const points = [];
          for (let step = 0; step <= 100; step++) {
            const y = step / 100 * height;
            const distance = Math.hypot(x - cx, y - cy) / radius;
            const warp = Math.max(0, 1 - distance * distance) * 0.75;
            points.push([x + (x - cx) * warp, y]);
          }
          context.lineWidth = gap * 0.3;
          path(points);
        }
        break;
      }
      case 'sweep': {
        context.save();
        context.translate(cx, cy);
        context.rotate(-0.5 + px * 0.2);
        const span = Math.hypot(width, height) * 1.5;
        const thickness = unit * 0.13;
        for (let band = 0; band < 5; band++) {
          const y = (band - 2) * thickness * 1.3 + py * thickness * (band - 2) * 0.3;
          const gradient = context.createLinearGradient(-span / 2, 0, span / 2, 0);
          gradient.addColorStop(0, color(band * 15, 45, 55));
          gradient.addColorStop(0.5, color(band * 15 + 30, 72, 50));
          gradient.addColorStop(1, color(band * 15 + 55, 48, 40));
          context.fillStyle = gradient;
          context.fillRect(-span / 2 + Math.sin(phase * 0.2 + band) * 10, y - thickness / 2, span, thickness);
        }
        context.restore();
        break;
      }
      case 'window': {
        const size = unit * 0.62;
        const half = size / 2;
        const thickness = unit * 0.065;
        const shear = px * size * 0.18;
        const tilt = py * size * 0.13;
        const corner = (x, y) => [cx + x + y / half * shear,
          cy + y + x / half * tilt];
        const outer = [corner(-half, -half), corner(half, -half),
          corner(half, half), corner(-half, half)];
        const inset = half - thickness;
        const inner = [corner(-inset, -inset), corner(inset, -inset),
          corner(inset, inset), corner(-inset, inset)];
        const gradient = context.createLinearGradient(cx - half + px * size * 0.2,
          cy - half, cx + half, cy + half + py * size * 0.2);
        gradient.addColorStop(0, color(px * 65, 48, 55));
        gradient.addColorStop(0.5, color(75 + py * 55, 64, 55));
        gradient.addColorStop(1, color(155 + px * 65, 48, 50));
        context.fillStyle = gradient;
        context.beginPath();
        for (const points of [outer, inner]) {
          points.forEach(([x, y], index) => {
            if (index === 0) context.moveTo(x, y);
            else context.lineTo(x, y);
          });
          context.closePath();
        }
        context.fill('evenodd');
        break;
      }
      case 'mosaic': {
        const cell = Math.max(70, Math.sqrt(width * height / 90));
        const cursor = localPointer();
        const reach = Math.max(unit * 0.4, 100);
        const vertex = (column, row) => {
          const point = particles[((row + 2) * 37 + column + 2) % particles.length];
          return [column * cell + (point.x - 0.5) * cell * 0.24,
            row * cell + (point.y - 0.5) * cell * 0.24];
        };
        for (let row = -1; row < height / cell + 1; row++) {
          for (let column = -1; column < width / cell + 1; column++) {
            const a = vertex(column, row), b = vertex(column + 1, row);
            const c = vertex(column + 1, row + 1), d = vertex(column, row + 1);
            const focus = Math.exp(-Math.pow(Math.hypot(a[0] - cursor.x, a[1] - cursor.y) / reach, 2)) * pointer.active;
            const point = particles[((row + 2) * 23 + column + 2) % particles.length];
            const light = 45 + point.depth * 25 + focus * 10;
            polygon([a, b, c], color(point.x * 50 + focus * 25, light, 28));
            polygon([a, c, d], color(point.y * 50 + 20, light - 9, 32));
          }
        }
        break;
      }
      case 'fragments': {
        const count = width < 680 ? 55 : 100;
        const cursor = localPointer();
        const reach = Math.max(unit * 0.3, 80);
        for (let index = 0; index < count; index++) {
          const point = particles[index];
          let x = width * (0.04 + point.x * 0.92), y = height * (0.05 + point.y * 0.9);
          const dx = x - cursor.x, dy = y - cursor.y;
          const focus = Math.exp(-(dx * dx + dy * dy) / (reach * reach)) * pointer.active;
          x += dx * focus * 0.15;
          y += dy * focus * 0.15;
          const angle = point.offset + Math.sin(phase * 0.2 + point.offset) * 0.12 + focus * 0.9;
          const length = unit * (0.015 + point.depth * 0.025);
          context.lineWidth = 2 + point.size;
          context.strokeStyle = color(point.depth * 60 + focus * 20, 42 + point.depth * 20, 35);
          path([[x - Math.cos(angle) * length, y - Math.sin(angle) * length],
            [x + Math.cos(angle) * length, y + Math.sin(angle) * length]]);
        }
        break;
      }
      case 'soundfield': {
        const count = width < 680 ? 32 : 72;
        const gap = width / (count + 1);
        context.lineWidth = gap * 0.4;
        for (let bar = 1; bar <= count; bar++) {
          const u = bar / count;
          const envelope = Math.sin(u * Math.PI);
          const amplitude = height * (0.04 + envelope * (0.12 + (Math.sin(u * 17 + phase * 0.6 + px * 2) + 1) * 0.12));
          const center = height * (0.5 + py * 0.1 * envelope);
          context.strokeStyle = color(bar * 0.5, theme.matches ? 74 : 45);
          path([[bar * gap, center - amplitude], [bar * gap, center + amplitude]]);
        }
        break;
      }
      case 'blobs': {
        const size = unit * 0.3;
        context.save();
        context.globalCompositeOperation = theme.matches ? 'screen' : 'multiply';
        for (let blob = 0; blob < 2; blob++) {
          const direction = blob === 0 ? -1 : 1;
          const x = width * 0.5 + direction * size * (0.4 + px * 0.35);
          const y = height * 0.5 + direction * py * size * 0.3;
          const points = [];
          for (let step = 0; step <= 160; step++) {
            const angle = step / 160 * Math.PI * 2;
            const contour = 1 + Math.sin(angle * 3 + blob * 2 + phase * 0.25) * 0.13
              + Math.cos(angle * 2 - py * 0.7) * 0.1;
            const rotation = direction * (0.15 + px * 0.2);
            const bx = Math.cos(angle) * size * contour;
            const by = Math.sin(angle) * size * contour * 0.87;
            points.push([x + bx * Math.cos(rotation) - by * Math.sin(rotation),
              y + bx * Math.sin(rotation) + by * Math.cos(rotation)]);
          }
          context.globalAlpha = 0.85;
          polygon(points, color(blob === 0 ? 0 : 155, blob === 0 ? 52 : 62, 60));
        }
        context.restore();
        break;
      }
      case 'tiles': {
        const cell = Math.max(70, Math.sqrt(width * height / 60));
        for (let row = 0; row < height / cell; row++) {
          for (let column = 0; column < width / cell; column++) {
            context.save();
            context.translate((column + 0.5) * cell, (row + 0.5) * cell);
            context.rotate(((row * 3 + column) % 4) * Math.PI / 2);
            context.beginPath();
            context.rect(-cell / 2, -cell / 2, cell, cell);
            context.clip();
            context.fillStyle = color((row + column) % 3 * 22, 40 + (row % 3) * 9, 35);
            context.beginPath();
            context.moveTo(-cell / 2, -cell / 2);
            context.arc(-cell / 2, -cell / 2, cell * (0.82 + px * 0.08 + Math.sin(phase * 0.2) * 0.03), 0, Math.PI / 2);
            context.closePath();
            context.fill();
            context.restore();
          }
        }
        break;
      }
      case 'monogram': {
        // 큰 글자 하나를 중심으로 구성해 반복 패턴과 다른 분위기를 만듭니다.
        context.save();
        const size = unit * 0.92;
        const shift = px * unit * 0.28;
        const hueShift = px * 110 + py * 65 + Math.sin(phase * 0.3) * 25;
        const gradient = context.createLinearGradient(cx - size * 0.5 + shift,
          cy - size * 0.3 + py * unit * 0.12, cx + size * 0.5 + shift, cy + size * 0.3);
        gradient.addColorStop(0, color(hueShift, 42, 70));
        gradient.addColorStop(0.35, color(hueShift + 50, 62, 75));
        gradient.addColorStop(0.65, color(hueShift + 130, 65, 70));
        gradient.addColorStop(1, color(hueShift + 200, 48, 65));
        context.fillStyle = gradient;
        context.fillRect(0, 0, width, height);
        const lightX = cx + px * size * 0.35;
        const lightY = cy + py * size * 0.35;
        const light = context.createRadialGradient(lightX, lightY, 0, lightX, lightY, size * 0.5);
        light.addColorStop(0, 'rgba(255, 255, 255, 0.75)');
        light.addColorStop(0.4, 'rgba(255, 245, 225, 0.25)');
        light.addColorStop(1, 'rgba(255, 255, 255, 0)');
        context.globalCompositeOperation = 'screen';
        context.fillStyle = light;
        context.fillRect(0, 0, width, height);
        context.globalCompositeOperation = 'destination-in';
        context.fillStyle = '#000';
        context.font = `700 ${size}px Arial, sans-serif`;
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.translate(cx, cy);
        context.rotate(px * 0.075);
        const growth = 1 + pointer.active * 0.045 + Math.sin(phase * 0.25) * 0.01;
        context.scale(growth, growth);
        context.fillText('N', 0, size * 0.045);
        context.restore();
        break;
      }
      case 'glyphs': {
        const cell = Math.max(64, Math.sqrt(width * height / 130));
        const cursor = localPointer();
        const reach = Math.max(cell * 1.8, unit * 0.3);
        let index = 0;
        for (let y = cell * 0.5; y < height; y += cell) {
          for (let x = cell * 0.5; x < width; x += cell) {
            const point = particles[index++ % particles.length];
            const focus = Math.exp(-Math.pow(Math.hypot(x - cursor.x, y - cursor.y) / reach, 2) * 2) * pointer.active;
            const size = cell * (0.16 + focus * 0.03);
            const glyph = Math.floor(point.depth * 5);
            context.save();
            context.translate(x, y);
            context.rotate(Math.floor(point.x * 4) * Math.PI / 2 + focus * Math.PI / 2
              + Math.sin(phase * 0.15 + point.offset) * 0.025);
            context.strokeStyle = color(focus * 70 + glyph * 8, theme.matches ? 72 : 40, 32 + focus * 20);
            context.fillStyle = context.strokeStyle;
            context.lineWidth = Math.max(1.5, cell * 0.024);
            if (glyph === 0) {
              path([[-size, 0], [size, 0]]);
              path([[0, -size], [0, size]]);
            } else if (glyph === 1) {
              path([[-size, -size], [-size, size], [size, size]]);
            } else if (glyph === 2) {
              path([[-size, -size * 0.4], [size, -size * 0.4]]);
              path([[-size, size * 0.4], [size, size * 0.4]]);
            } else if (glyph === 3) {
              context.beginPath();
              context.arc(0, 0, size, -Math.PI / 2, Math.PI / 2);
              context.stroke();
              context.beginPath();
              context.arc(-size * 0.5, 0, size * 0.16, 0, Math.PI * 2);
              context.fill();
            } else {
              path([[-size * 0.7, size], [0, -size], [size * 0.7, size]]);
            }
            context.restore();
          }
        }
        break;
      }
    }
    context.globalAlpha = 1;
  }

  function draw() {
    context.clearRect(0, 0, width, height);
    context.strokeStyle = stroke;
    context.fillStyle = stroke;
    context.lineWidth = 0.8;
    context.lineCap = 'butt';
    const drift = reducedMotion.matches ? 0 : Math.sin(phase) * 0.012;
    const px = pointer.x;
    const py = pointer.y;
    const scale = Math.max(width, height * 1.35);
    if (width <= 0 || height <= 0) return;

    if (variant === 0) {
      const angle = -0.42 + px * 0.14 + drift;
      const cos = Math.cos(angle);
      const sin = Math.sin(angle);
      for (let ring = 0; ring < 64; ring++) {
        const rx = scale * (0.086 + ring * 0.014);
        const ry = height * (0.11 + ring * 0.023);
        const cx = width * (0.66 - ring * 0.0028 + px * 0.055);
        const cy = height * (0.58 - ring * 0.0046 + py * 0.07);
        const points = [];
        for (let step = 0; step <= 160; step++) {
          const t = step / 160 * Math.PI * 2;
          const flex = 1 + Math.sin(t * 3 + ring * 0.04) * (0.012 + py * 0.015);
          const x = Math.cos(t) * rx * flex;
          const y = Math.sin(t) * ry * flex;
          points.push([cx + x * cos - y * sin, cy + x * sin + y * cos]);
        }
        path(points);
      }
    } else if (variant === 1) {
      for (let line = -18; line < 58; line++) {
        const points = [];
        for (let step = 0; step <= 150; step++) {
          const x = step / 150 * width;
          const u = x / width;
          const envelope = Math.sin(u * Math.PI);
          const wave = Math.sin(u * Math.PI * 2.1 + line * 0.048 + px * 0.6 + drift);
          const y = height * (line / 40 + wave * envelope * (0.24 + py * 0.07));
          points.push([x, y]);
        }
        path(points);
      }
    } else if (variant === 2) {
      const bend = (u, v) => {
        const dx = u - (0.54 + px * 0.12);
        const dy = v - (0.48 + py * 0.12);
        const influence = Math.exp(-(dx * dx + dy * dy) * 5);
        const twist = influence * (0.85 + drift * 3);
        return [
          width * (u + (dx * (Math.cos(twist) - 1) - dy * Math.sin(twist)) * 0.7),
          height * (v + (dx * Math.sin(twist) + dy * (Math.cos(twist) - 1)) * 0.7)
        ];
      };
      for (let line = -8; line <= 48; line++) {
        const horizontal = [];
        const vertical = [];
        for (let step = 0; step <= 120; step++) {
          const position = -0.3 + step / 120 * 1.6;
          horizontal.push(bend(position, line / 40));
          vertical.push(bend(line / 40, position));
        }
        path(horizontal);
        path(vertical);
      }
    } else if (variant === 3) {
      // 넓은 빛 영역을 겹쳐 표현하고, 전체 캔버스의 블러 연산은 피합니다.
      context.save();
      context.globalCompositeOperation = theme.matches ? 'screen' : 'multiply';
      const colors = theme.matches
        ? ['255, 99, 61', '114, 90, 238', '38, 170, 178']
        : ['255, 123, 84', '158, 139, 242', '82, 193, 185'];
      for (let pool = 0; pool < 3; pool++) {
        const t = phase * 0.5 + pool * 2.1;
        const x = width * (0.25 + pool * 0.25 + Math.sin(t) * 0.05 + px * 0.08);
        const y = height * (0.5 + Math.cos(t) * 0.14 + py * 0.12);
        const radius = Math.max(width * 0.36, height * 0.7);
        const glow = context.createRadialGradient(x, y, 0, x, y, radius);
        glow.addColorStop(0, `rgba(${colors[pool]}, 0.85)`);
        glow.addColorStop(0.35, `rgba(${colors[pool]}, 0.4)`);
        glow.addColorStop(1, `rgba(${colors[pool]}, 0)`);
        context.fillStyle = glow;
        context.fillRect(0, 0, width, height);
      }
      context.restore();
    } else if (variant === 4) {
      const bounds = field.getBoundingClientRect();
      const cursorX = (px + 1) / 2 * innerWidth - bounds.left;
      const cursorY = (py + 1) / 2 * innerHeight - bounds.top;
      const radius = Math.min(width, height) * 0.28;
      const count = Math.min(particles.length, Math.max(350, Math.round(width * height / 480)));
      for (let index = 0; index < count; index++) {
        const point = particles[index];
        // 입자를 전체 영역에 분산하고, 가장자리를 지나면 반대편에서 이어집니다.
        const flowX = point.x + phase * (0.025 + point.depth * 0.025)
          + Math.sin(phase * 0.5 + point.offset) * 0.025;
        const flowY = point.y + Math.sin(phase * 0.35 + point.offset) * 0.045;
        let x = ((flowX % 1 + 1) % 1) * width;
        let y = ((flowY % 1 + 1) % 1) * height;
        const dx = x - cursorX;
        const dy = y - cursorY;
        const distance = Math.hypot(dx, dy);
        const force = Math.pow(Math.max(0, 1 - distance / Math.max(radius, 1)), 2)
          * radius * 0.65 * pointer.active;
        x += dx / Math.max(distance, 1) * force;
        y += dy / Math.max(distance, 1) * force;
        context.globalAlpha = 0.3 + point.depth * 0.7;
        context.beginPath();
        context.arc(x, y, point.size, 0, Math.PI * 2);
        context.fill();
      }
      context.globalAlpha = 1;
    } else if (variant === 5) {
      const wide = width > 680;
      const rows = wide ? Math.max(3, Math.round(height / 160)) : 5;
      const rowHeight = height / rows;
      const text = 'NO NAME';
      context.font = `700 ${Math.max(rowHeight * 1.12, 1)}px Arial, sans-serif`;
      context.textBaseline = 'middle';
      const textWidth = context.measureText(text).width;
      const stretch = wide ? 1 : width * 0.91 / Math.max(textWidth, 1);
      const spacing = textWidth * stretch + rowHeight * 0.32;
      for (let row = 0; row < rows; row++) {
        const proximity = Math.exp(-Math.pow((row + 0.5) / rows - (py + 1) / 2, 2) * 18);
        const shift = px * width * 0.07 * proximity;
        const breathing = Math.sin(phase * 0.6 + row * 0.7) * 0.015;
        context.save();
        context.beginPath();
        context.rect(0, row * rowHeight, width, rowHeight);
        context.clip();
        const offset = wide ? -spacing * (row % 2 ? 0.45 : 0.08) : width * 0.045;
        context.translate(offset + shift, (row + 0.5) * rowHeight);
        context.scale(stretch * (1 + breathing), 0.95 + proximity * pointer.active * 0.16);
        const copies = wide ? Math.ceil(width / spacing) + 2 : 1;
        for (let copy = 0; copy < copies; copy++) {
          const x = copy * spacing / stretch;
          if (row % 2 === 0) context.fillText(text, x, 0);
          else {
            context.lineWidth = 1.2 / Math.max(stretch, 0.1);
            context.strokeText(text, x, 0);
          }
        }
        context.restore();
      }
    } else if (variant === 6) {
      context.save();
      context.globalAlpha = 0.5;
      const gap = Math.max(8, Math.min(width, height) / 48);
      const extent = Math.hypot(width, height);
      for (let layer = 0; layer < 2; layer++) {
        const direction = layer === 0 ? -1 : 1;
        const cx = width * (0.5 + direction * 0.055) + direction * px * width * 0.04;
        const cy = height * 0.5 + direction * (py * height * 0.06 + Math.sin(phase * 0.3) * 8);
        for (let radius = gap; radius < extent; radius += gap) {
          context.beginPath();
          context.ellipse(cx, cy, radius, radius * (1 + layer * 0.018),
            layer * 0.08, 0, Math.PI * 2);
          context.stroke();
        }
      }
      context.restore();
    } else if (variant === 7) {
      const columns = Math.max(24, Math.min(64, Math.round(width / 24)));
      const boundaries = [];
      for (let column = 0; column <= columns; column++) {
        const u = column / columns;
        const focus = (px + 1) / 2;
        const bend = Math.sin((u - focus) * Math.PI * 2) * 0.045 * pointer.active;
        boundaries.push(width * (u + bend * Math.sin(u * Math.PI)));
      }
      for (let column = 0; column < columns; column++) {
        const u = column / columns;
        const hue = 15 + u * 215 + Math.sin(phase * 0.25) * 8;
        const lightness = theme.matches ? 36 : 62;
        const color = context.createLinearGradient(0, 0, 0, height);
        color.addColorStop(0, `hsl(${hue}, 55%, ${lightness + 10}%)`);
        color.addColorStop(0.5 + py * 0.15, `hsl(${hue + 18}, 65%, ${lightness - 9}%)`);
        color.addColorStop(1, `hsl(${hue - 10}, 45%, ${lightness}%)`);
        context.fillStyle = color;
        context.fillRect(boundaries[column], 0,
          Math.max(0, boundaries[column + 1] - boundaries[column] - 1.5), height);
      }
    } else if (variant === 8) {
      // 커서 입력 없이도 완성된 구성이 보이도록 수식으로 궤적을 그립니다.
      for (let ribbon = 0; ribbon < 5; ribbon++) {
        const points = [];
        for (let step = 0; step <= 160; step++) {
          const t = step / 160 * Math.PI * 2;
          points.push([
            width * 0.5 + Math.sin(t * 2 + phase * 0.12 + ribbon * 0.065) * width * 0.4,
            height * 0.5 + Math.sin(t * 3 + ribbon * 0.085) * height * 0.35
          ]);
        }
        context.globalAlpha = 0.3 + ribbon * 0.1;
        context.strokeStyle = `hsl(${190 + ribbon * 18}, 65%, ${theme.matches ? 65 : 38}%)`;
        context.lineWidth = 0.9;
        path(points);
      }
      context.globalAlpha = 1;
    } else if (variant === 9) {
      const cell = Math.max(12, Math.sqrt(width * height / 1800));
      const cursor = localPointer();
      for (let y = 0; y < height; y += cell) {
        for (let x = 0; x < width; x += cell) {
          const distance = Math.hypot(x - cursor.x, y - cursor.y) / Math.max(height, 1);
          const wave = Math.sin(x / width * 8 + phase * 0.55)
            * Math.cos(y / height * 7 - phase * 0.35);
          const ripple = Math.cos(distance * 18 - phase * 1.3)
            * Math.exp(-distance * 3) * pointer.active;
          const value = Math.max(0, Math.min(1, (wave + ripple + 1) / 2));
          context.fillStyle = `hsl(${175 + value * 75}, 45%, ${
            (theme.matches ? 18 : 35) + value * (theme.matches ? 40 : 38)}%)`;
          const inset = cell * (0.1 + (1 - value) * 0.12);
          context.fillRect(x + inset, y + inset, cell - inset * 2, cell - inset * 2);
        }
      }
    } else if (variant === 10) {
      // 단색 면을 뚫어 아래에 있는 색 영역을 드러냅니다.
      context.save();
      context.fillStyle = theme.matches ? '#172e3d' : '#263f55';
      context.fillRect(0, 0, width, height);
      const cursor = localPointer();
      const restingX = width * (0.56 + Math.sin(phase * 0.25) * 0.045);
      const restingY = height * (0.5 + Math.cos(phase * 0.2) * 0.04);
      const blend = pointer.active * 0.85;
      const cx = restingX * (1 - blend) + Math.max(0, Math.min(width, cursor.x)) * blend;
      const cy = restingY * (1 - blend) + Math.max(0, Math.min(height, cursor.y)) * blend;
      context.globalCompositeOperation = 'destination-out';
      context.beginPath();
      context.ellipse(cx, cy, Math.min(width * 0.31, height * 0.48),
        Math.min(width * 0.24, height * 0.35), -0.35 + px * 0.2, 0, Math.PI * 2);
      context.fill();
      context.restore();
    } else if (variant === 11) {
      const radius = Math.min(width * 0.3, height * 0.37);
      const cx = width * 0.5;
      const cy = height * 0.5;
      const offsetX = radius * (0.45 + Math.sin(phase * 0.3) * 0.12 + px * 0.22);
      const offsetY = radius * (-0.2 + py * 0.2);
      context.save();
      const glow = context.createRadialGradient(cx, cy, radius * 0.65, cx, cy, radius * 1.65);
      glow.addColorStop(0, theme.matches ? 'rgba(245, 167, 79, 0.65)' : 'rgba(222, 113, 44, 0.35)');
      glow.addColorStop(1, 'rgba(222, 113, 44, 0)');
      context.fillStyle = glow;
      context.fillRect(0, 0, width, height);
      context.fillStyle = theme.matches ? '#f1b76a' : '#d87c38';
      context.beginPath();
      context.arc(cx, cy, radius, 0, Math.PI * 2);
      context.fill();
      // 빛나는 원 내부로 가리는 형태를 제한해 원 밖에는 표시되지 않도록 합니다.
      context.clip();
      context.fillStyle = theme.matches ? '#182631' : '#e5ddd0';
      context.beginPath();
      context.arc(cx + offsetX, cy + offsetY, radius * 0.98, 0, Math.PI * 2);
      context.fill();
      context.restore();
    } else if (variant === 12) {
      const cell = Math.max(44, Math.sqrt(width * height / 360));
      const rowStep = cell * Math.sqrt(3) / 2;
      const cursor = localPointer();
      const reach = Math.max(cell * 2.2, Math.min(width, height) * 0.3);
      for (let row = 0; row * rowStep < height + cell; row++) {
        const y = row * rowStep;
        for (let x = cell * (row % 2 ? 0.5 : 0); x < width + cell; x += cell) {
          const u = x / width;
          const v = y / height;
          const wave = Math.sin(u * 4 - v * 3 + phase * 0.2)
            * Math.cos(v * 3 + phase * 0.12);
          const distance = Math.hypot(x - cursor.x, y - cursor.y) / reach;
          const focus = Math.exp(-distance * distance * 2.5) * pointer.active;
          const base = 0.34 + (wave + 1) * 0.03;
          const radius = cell * (base * (1 - focus) + 0.5 * focus);
          const lightness = theme.matches ? 34 + focus * 28 : 68 - focus * 18;
          context.fillStyle = `hsl(${315 + focus * 22}, ${18 + focus * 30}%, ${lightness}%)`;
          context.globalAlpha = 0.7 + focus * 0.2;
          context.beginPath();
          for (let corner = 0; corner < 6; corner++) {
            const angle = corner / 6 * Math.PI * 2 - Math.PI / 2;
            const hx = x + Math.cos(angle) * radius;
            const hy = y + Math.sin(angle) * radius;
            if (corner === 0) context.moveTo(hx, hy);
            else context.lineTo(hx, hy);
          }
          context.closePath();
          context.fill();
        }
      }
      context.globalAlpha = 1;
    } else {
      drawExtended(styles[variant], px, py);
    }
  }

  function tick(time) {
    frame = 0;
    if (!visible || document.hidden || reducedMotion.matches) return;
    if (time - lastTime >= 1000 / 30) {
      const elapsed = Math.min(time - lastTime, 64);
      lastTime = time;
      phase += elapsed * 0.00018;
      const response = variant === 12 || variant === 28 ? 0.24 : 0.09;
      pointer.x += (pointer.targetX - pointer.x) * response;
      pointer.y += (pointer.targetY - pointer.y) * response;
      pointer.active += (pointer.targetActive - pointer.active) * response;
      draw();
    }
    frame = requestAnimationFrame(tick);
  }

  function resume() {
    if (!frame && visible && !document.hidden && !reducedMotion.matches) {
      lastTime = performance.now();
      frame = requestAnimationFrame(tick);
    }
  }

  function resize() {
    const bounds = field.getBoundingClientRect();
    width = bounds.width;
    height = bounds.height;
    const ratio = Math.min(devicePixelRatio || 1, 2);
    canvas.width = Math.round(width * ratio);
    canvas.height = Math.round(height * ratio);
    context.setTransform(ratio, 0, 0, ratio, 0, 0);
    stroke = getComputedStyle(field).getPropertyValue('--contour').trim();
    draw();
    field.classList.add('is-ready');
    resume();
  }

  // 개발용 선택 기능: 새로고침 없이 현재 화면에서 작품을 전환합니다.
  function selectArtwork(index) {
    variant = (index + styles.length) % styles.length;
    field.dataset.artwork = styles[variant];
    if (variant >= 13) {
      field.dataset.series = 'extended';
      field.style.setProperty('--art-hue', extendedHues[variant - 13]);
    } else {
      delete field.dataset.series;
      field.style.removeProperty('--art-hue');
    }
    phase = 0;
    pointer.x = pointer.y = pointer.targetX = pointer.targetY = 0;
    pointer.active = pointer.targetActive = 0;
    picker.value = String(variant);
    particles = particleSet();
    resize();
  }
  picker.addEventListener('change', () => selectArtwork(Number(picker.value)));
  document.querySelector('#artwork-previous').addEventListener('click', () => selectArtwork(variant - 1));
  document.querySelector('#artwork-next').addEventListener('click', () => selectArtwork(variant + 1));
  document.querySelector('#artwork-random').addEventListener('click', () => {
    const random = schedule.createRandom(Date.now());
    selectArtwork(variant + 1 + Math.floor(random() * (styles.length - 1)));
  });

  // 작품은 현재 시간만으로 결정하고, 개발자 선택은 임시 미리보기로 사용합니다.
  // 패널을 닫거나 다음 시간 슬롯에 진입하면 예정된 작품으로 돌아갑니다.
  let scheduleTimer;
  function syncSchedule(restore = false) {
    clearTimeout(scheduleTimer);
    const now = Date.now();
    const selection = schedule.selectionAt(now, styles.length);
    if (restore || selection.slot !== currentSlot) {
      currentSlot = selection.slot;
      selectArtwork(selection.variant);
    }
    const untilBoundary = schedule.SLOT_DURATION - (now % schedule.SLOT_DURATION);
    scheduleTimer = setTimeout(syncSchedule, Math.min(untilBoundary, 60000));
  }
  syncSchedule();

  const controls = document.querySelector('.artwork-controls');
  const trigger = document.querySelector('#developer-trigger');
  let holdTimer;
  let holdPointer = null;
  let holdOrigin;

  function cancelHold() {
    clearTimeout(holdTimer);
    const pointerId = holdPointer;
    holdPointer = null;
    if (pointerId !== null && trigger.hasPointerCapture(pointerId)) {
      trigger.releasePointerCapture(pointerId);
    }
  }

  function openControls() {
    cancelHold();
    controls.hidden = false;
    controls.open = true;
    document.querySelector('#artwork-close').focus({ preventScroll: true });
  }

  trigger.addEventListener('pointerdown', event => {
    if (!event.isPrimary || event.button !== 0) return;
    event.preventDefault();
    cancelHold();
    holdPointer = event.pointerId;
    holdOrigin = { x: event.clientX, y: event.clientY };
    trigger.setPointerCapture(event.pointerId);
    holdTimer = setTimeout(openControls, 5000);
  });
  trigger.addEventListener('pointermove', event => {
    if (event.pointerId === holdPointer && Math.hypot(event.clientX - holdOrigin.x,
      event.clientY - holdOrigin.y) > 12) cancelHold();
  });
  for (const event of ['pointerup', 'pointercancel', 'lostpointercapture']) {
    trigger.addEventListener(event, cancelHold);
  }
  trigger.addEventListener('contextmenu', event => event.preventDefault());
  trigger.addEventListener('keydown', event => {
    if ((event.key === ' ' || event.key === 'Enter') && !event.repeat) {
      event.preventDefault();
      clearTimeout(holdTimer);
      holdTimer = setTimeout(openControls, 5000);
    }
  });
  trigger.addEventListener('keyup', cancelHold);
  trigger.addEventListener('blur', cancelHold);

  function closeControls() {
    controls.hidden = true;
    cancelHold();
    syncSchedule(true);
    trigger.focus({ preventScroll: true });
  }
  document.querySelector('#artwork-close').addEventListener('click', event => {
    event.preventDefault();
    event.stopPropagation();
    closeControls();
  });
  controls.addEventListener('keydown', event => {
    if (event.key === 'Escape') { event.preventDefault(); closeControls(); }
  });
  window.addEventListener('blur', cancelHold);
  window.addEventListener('focus', () => syncSchedule());

  document.addEventListener('pointermove', event => {
    if (reducedMotion.matches) return;
    if (event.target.closest('.artwork-controls, #developer-trigger')) { release(); return; }
    pointer.targetX = Math.max(-1, Math.min(1, event.clientX / innerWidth * 2 - 1));
    pointer.targetY = Math.max(-1, Math.min(1, event.clientY / innerHeight * 2 - 1));
    pointer.targetActive = 1;
  }, { passive: true });
  function release() {
    pointer.targetX = 0;
    pointer.targetY = 0;
    pointer.targetActive = 0;
  }
  document.documentElement.addEventListener('pointerleave', release);
  document.addEventListener('pointerup', event => { if (event.pointerType !== 'mouse') release(); });
  window.addEventListener('blur', release);
  document.addEventListener('visibilitychange', () => {
    cancelHold();
    if (!document.hidden) syncSchedule();
    resume();
  });
  reducedMotion.addEventListener('change', () => {
    pointer.x = pointer.y = pointer.targetX = pointer.targetY = 0;
    pointer.active = pointer.targetActive = 0;
    draw();
    resume();
  });
  theme.addEventListener('change', resize);
  new ResizeObserver(resize).observe(field);
  new IntersectionObserver(entries => {
    visible = entries[0].isIntersecting;
    resume();
  }).observe(field);
})();