05The day's sun riding an arc from sunrise to sunset

<main class="stage stage--ink">
  <section class="sa is-demo" id="sa" aria-label="Path of the sun">
    <p class="sa__title">Path of the sun</p>
    <div class="sa__skywrap">
      <span class="sa__band sa__band--morning" aria-hidden="true"></span>
      <span class="sa__band sa__band--noon" aria-hidden="true"></span>
      <span class="sa__band sa__band--evening" aria-hidden="true"></span>
      <svg class="sa__arc" viewBox="0 0 240 90" aria-hidden="true">
        <path class="sa__path" d="M 20 80 A 120 60 0 0 1 220 80" fill="none" stroke="rgba(23,20,26,.35)" stroke-width="2" stroke-dasharray="4 6"/>
        <line x1="8" y1="80" x2="232" y2="80" stroke="rgba(23,20,26,.3)" stroke-width="2"/>
      </svg>
      <span class="sa__sun" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M184,128a56,56,0,1,1-56-56A56,56,0,0,1,184,128Z" opacity="0.2"/><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg></span>
      <span class="sa__rise" aria-hidden="true"><svg viewBox="0 0 256 256" width="14" height="14" fill="currentColor"><path d="M192,144a64.33,64.33,0,0,1-2,16H66a64,64,0,1,1,126-16Z" opacity="0.2"/><path d="M240,152H199.55a73.54,73.54,0,0,0,0-48H240a8,8,0,0,1,0,16ZM117.66,53.66,128,43.31l10.34,10.35a8,8,0,0,0,11.32-11.32l-18-18a8,8,0,0,0-11.32,0l-18,18a8,8,0,0,0,11.32,11.32ZM72,24a8,8,0,0,0-8,8V48H48a8,8,0,0,0,0,16h16v16a8,8,0,0,0,16,0V64h16a8,8,0,0,0,0-16H80V32A8,8,0,0,0,72,24ZM168,184H32a8,8,0,0,1,0-16H168a48,48,0,0,1,0,96h-4.6a8,8,0,1,1-3.2-15.68c1.28-.26,2.53-.32,3.8-.32a32,32,0,0,0,0-64ZM120,96a40,40,0,0,0-38.66,29.76A8,8,0,0,0,88.9,136a8.14,8.14,0,0,0,2.22-.31A40,40,0,1,0,120,96Zm0,64a24,24,0,0,1-8.69-1.63,56,56,0,0,1,15.06-25.74A23.94,23.94,0,0,1,120,160Z"/></svg></span>
      <span class="sa__set" aria-hidden="true"><svg viewBox="0 0 256 256" width="14" height="14" fill="currentColor"><path d="M192,144a64.33,64.33,0,0,1-2,16H66a64,64,0,1,1,126-16Z" opacity="0.2"/><path d="M240,152H199.55a73.54,73.54,0,0,0,0-48H240a8,8,0,0,1,0,16ZM117.66,53.66,128,43.31l10.34,10.35a8,8,0,0,0,11.32-11.32l-18-18a8,8,0,0,0-11.32,0l-18,18a8,8,0,0,0,11.32,11.32ZM72,24a8,8,0,0,0-8,8V48H48a8,8,0,0,0,0,16h16v16a8,8,0,0,0,16,0V64h16a8,8,0,0,0,0-16H80V32A8,8,0,0,0,72,24ZM168,184H32a8,8,0,0,1,0-16H168a48,48,0,0,1,0,96h-4.6a8,8,0,1,1-3.2-15.68c1.28-.26,2.53-.32,3.8-.32a32,32,0,0,0,0-64ZM120,96a40,40,0,0,0-38.66,29.76A8,8,0,0,0,88.9,136a8.14,8.14,0,0,0,2.22-.31A40,40,0,1,0,120,96Zm0,64a24,24,0,0,1-8.69-1.63,56,56,0,0,1,15.06-25.74A23.94,23.94,0,0,1,120,160Z"/></svg></span>
    </div>
    <div class="sa__ctrl">
      <label class="sa__lab" for="sa-hour">Time</label>
      <input class="sa__range" id="sa-hour" type="range" min="6" max="20" step="1" value="14" aria-label="Pick a time of day">
      <output class="sa__time" id="sa-time" for="sa-hour">2 PM</output>
    </div>
  </section>
</main>

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

// 해의 길 — 해가 offset-path 로 타원 아치를 따라 굴러간다. top/left 계산이 사라진다.
// 하늘 밴드 교체는 steps(1, end) 컷 — 세 하늘이 반투명하게 겹치는 프레임을 만들지 않는다.
$duration: $dur-loop;
$easing: $ease-out;
$color: #ba9f72;

@include stage($stage-ink);

.sa {
  box-sizing: border-box;
  display: grid;
  gap: $sp-1;
  width: min(280px, 92vw);
  padding: $sp-2;
  border-radius: $r-card;
  background: $subject-cream;
  color: $subject-ink;
  box-shadow: $shadow-raised;
}
.sa * { box-sizing: border-box; }

.sa__title {
  margin: 0;
  padding: 0 $sp-1;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.sa__skywrap {
  position: relative;
  height: 92px;
  border-radius: $r-control;
  overflow: hidden;
}
.sa__band {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sa__band--morning { background: linear-gradient(180deg, #ffd9a3 0%, #ffeccc 100%); opacity: 0; }
.sa__band--noon { background: linear-gradient(180deg, #bfe3ff 0%, #e8f4ff 100%); opacity: 0; }
.sa__band--evening { background: linear-gradient(180deg, #ddc9b9 0%, #ffd9b8 100%); opacity: 0; }
.sa.is-morning .sa__band--morning { opacity: 1; }
.sa.is-noon .sa__band--noon { opacity: 1; }
.sa.is-evening .sa__band--evening { opacity: 1; }

.sa__arc {
  position: absolute;
  left: 50%;
  bottom: $sp-1;
  width: 240px;
  height: 90px;
  margin-left: -120px;
}
.sa__sun {
  position: absolute;
  left: 50%;
  bottom: $sp-1;
  width: 240px;
  height: 90px;
  margin-left: -120px;
  pointer-events: none;
  color: #ba9f72;
  // 아치를 따라가는 길 — SVG 아치(M 20 80 A 120 60 0 0 1 220 80)와 반지름·시작끝 x 는 같고
  // y 만 9px(해 아이콘 18px 의 절반) 올렸다. 해 심이 길 위에 놓이므로 아이콘이 선을 타고 굴러간다.
  // 좁은 화면(340px) 길은 아래 미디어쿼리에 같은 방식으로 손으로 한 벌 더 적어 둔다 — 자동 추종이 아니다
  offset-path: path("M 20 71 A 120 60 0 0 1 220 71");
  offset-distance: 57%;
  offset-rotate: 0deg;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 2px rgba(23, 20, 26, .25));
}
.sa__rise, .sa__set {
  position: absolute;
  bottom: $sp-1;
  color: rgba($subject-ink, .72);
}
.sa__rise { left: $sp-2; }
.sa__set { right: $sp-2; }

.sa__ctrl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: $sp-2;
  padding: 0 $sp-1;
}
.sa__lab {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba($subject-ink, .72);
}
.sa__range {
  width: 100%;
  margin: 0;
  accent-color: $subject-blue;
  &:focus-visible { outline: 2px solid $subject-blue; outline-offset: 2px; }
}
.sa__time {
  min-width: 32px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

// ── 격자 미리보기 루프 (2초) ──
// 해가 일출에서 일몰까지 아치를 한 바퀴(2s) 돌고, 루프 처음으로 컷 복귀 — 다음 일출이다.
@keyframes sa-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
@keyframes sa-morning { 0%, 27% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes sa-noon { 0%, 27% { opacity: 0; } 28%, 65% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes sa-evening { 0%, 65% { opacity: 0; } 66%, 100% { opacity: 1; } }
.sa.is-demo {
  .sa__sun {
    animation-name: sa-travel;
    animation-duration: $duration;
    animation-timing-function: $easing;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
  }
  .sa__band--morning { animation-name: sa-morning; animation-duration: $duration; animation-timing-function: steps(1, end); animation-iteration-count: infinite; animation-fill-mode: backwards; }
  .sa__band--noon { animation-name: sa-noon; animation-duration: $duration; animation-timing-function: steps(1, end); animation-iteration-count: infinite; animation-fill-mode: backwards; }
  .sa__band--evening { animation-name: sa-evening; animation-duration: $duration; animation-timing-function: steps(1, end); animation-iteration-count: infinite; animation-fill-mode: backwards; }
}

@media (max-width: 340px) {
  .sa { padding: $sp-1; }
  .sa__skywrap { height: 84px; }
  .sa__arc, .sa__sun { width: 216px; height: 81px; margin-left: -108px; }
  .sa__sun { offset-path: path("M 16 64 A 108 54 0 0 1 200 64"); }
}

@media (prefers-reduced-motion: reduce) {
  .sa.is-demo .sa__sun,
  .sa.is-demo .sa__band {
    animation: none !important;
  }
  // 정지 상태에서도 해는 아치 위, 하늘은 한 밴드 — 실제 조작 경로(is-*)가 값을 준다
  .sa.is-demo .sa__band--noon { opacity: 1 !important; }
}

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

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

.sa {
  box-sizing: border-box;
  display: grid;
  gap: 4px;
  width: min(280px, 92vw);
  padding: 8px;
  border-radius: 16px;
  background: #fff7e6;
  color: #17141a;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}

.sa * {
  box-sizing: border-box;
}

.sa__title {
  margin: 0;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.sa__skywrap {
  position: relative;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
}

.sa__band {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sa__band--morning {
  background: linear-gradient(180deg, #ffd9a3 0%, #ffeccc 100%);
  opacity: 0;
}

.sa__band--noon {
  background: linear-gradient(180deg, #bfe3ff 0%, #e8f4ff 100%);
  opacity: 0;
}

.sa__band--evening {
  background: linear-gradient(180deg, #ddc9b9 0%, #ffd9b8 100%);
  opacity: 0;
}

.sa.is-morning .sa__band--morning {
  opacity: 1;
}

.sa.is-noon .sa__band--noon {
  opacity: 1;
}

.sa.is-evening .sa__band--evening {
  opacity: 1;
}

.sa__arc {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 240px;
  height: 90px;
  margin-left: -120px;
}

.sa__sun {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 240px;
  height: 90px;
  margin-left: -120px;
  pointer-events: none;
  color: #ba9f72;
  offset-path: path("M 20 71 A 120 60 0 0 1 220 71");
  offset-distance: 57%;
  offset-rotate: 0deg;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 2px rgba(23, 20, 26, 0.25));
}

.sa__rise, .sa__set {
  position: absolute;
  bottom: 4px;
  color: rgba(23, 20, 26, 0.72);
}

.sa__rise {
  left: 8px;
}

.sa__set {
  right: 8px;
}

.sa__ctrl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.sa__lab {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(23, 20, 26, 0.72);
}

.sa__range {
  width: 100%;
  margin: 0;
  accent-color: #2f6df6;
}
.sa__range:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
}

.sa__time {
  min-width: 32px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@keyframes sa-travel {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
@keyframes sa-morning {
  0%, 27% {
    opacity: 1;
  }
  28%, 100% {
    opacity: 0;
  }
}
@keyframes sa-noon {
  0%, 27% {
    opacity: 0;
  }
  28%, 65% {
    opacity: 1;
  }
  66%, 100% {
    opacity: 0;
  }
}
@keyframes sa-evening {
  0%, 65% {
    opacity: 0;
  }
  66%, 100% {
    opacity: 1;
  }
}
.sa.is-demo .sa__sun {
  animation-name: sa-travel;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.sa.is-demo .sa__band--morning {
  animation-name: sa-morning;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.sa.is-demo .sa__band--noon {
  animation-name: sa-noon;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.sa.is-demo .sa__band--evening {
  animation-name: sa-evening;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@media (max-width: 340px) {
  .sa {
    padding: 4px;
  }
  .sa__skywrap {
    height: 84px;
  }
  .sa__arc, .sa__sun {
    width: 216px;
    height: 81px;
    margin-left: -108px;
  }
  .sa__sun {
    offset-path: path("M 16 64 A 108 54 0 0 1 200 64");
  }
}
@media (prefers-reduced-motion: reduce) {
  .sa.is-demo .sa__sun,
  .sa.is-demo .sa__band {
    animation: none !important;
  }
  .sa.is-demo .sa__band--noon {
    opacity: 1 !important;
  }
}

// 해는 아치를 따라 굴러가고(offset-path), 시각을 고르면 그 높이에 멈춘다.
// 하늘색은 아침/낮/저녁 세 밴드 — 실제 조작에서는 클래스로, 루프에서는 컷으로 맞바뀐다.
var saRoot = document.getElementById('sa');
var saSun = saRoot.querySelector('.sa__sun');
var saRange = document.getElementById('sa-hour');
var saTime = document.getElementById('sa-time');
// Time 낱말은 배열 리터럴에서 뽑는다 — 언어팩 사본에서 배열 안 글자가 통째로 바뀐다
var saHours = ['6 AM', '7 AM', '8 AM', '9 AM', '10 AM', '11 AM', 'Noon', '1 PM', '2 PM', '3 PM', '4 PM', '5 PM', '6 PM', '7 PM', '8 PM'];
function saBandClass(t) {
  if (t < 0.25) return 'is-morning';
  if (t < 0.72) return 'is-noon';
  return 'is-evening';
}
function saApply(hour) {
  var t = (hour - 6) / 14;
  saSun.style.offsetDistance = (t * 100) + '%';
  saRoot.classList.remove('is-morning', 'is-noon', 'is-evening');
  saRoot.classList.add(saBandClass(t));
  saTime.textContent = saHours[hour - 6];
  saRange.setAttribute('aria-valuenow', String(hour));
}
saRange.addEventListener('input', function () {
  saRoot.classList.remove('is-demo');
  saApply(Number(saRange.value));
});
saApply(Number(saRange.value));

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./WeatherSunArc.module.scss";

// vanilla 판(run/281/demo/05-weather-sun-arc/index.html) 의 React 포트.
// 해는 아치를 따라 굴러가고(offset-path), 시각을 고르면 그 높이에 멈춘다.
// 하늘색은 아침/낮/저녁 세 밴드 — 실제 조작에서는 클래스로, 루프에서는 컷으로 맞바뀐다.

export type WeatherSunArcProps = {
  title?: string;
  groupLabel?: string;
  hourLabel?: string;
  rangeAria?: string;
  /** 시각 낱말("6시" … "20시") — 언어팩이 배열째로 바꾼다 */
  hourWords?: string[];
  /** 처음에 골라 둔 시각 */
  hour?: number;
  min?: number;
  max?: number;
  /** 격자 미리보기 2초 자동 루프. 사람이 손대면 꺼진다 */
  demo?: boolean;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
// 해 심의 아치 위치 — inline style 로 넣는다
type SunVars = CSSProperties & { offsetDistance?: string };

const DEFAULT_HOUR_WORDS: string[] = [
  "6시", "7시", "8시", "9시", "10시", "11시", "12시", "13시", "14시",
  "15시", "16시", "17시", "18시", "19시", "20시",
];

const BAND_CLASS: { [k: string]: string } = {
  morning: styles.isMorning,
  noon: styles.isNoon,
  evening: styles.isEvening,
};

function SunOrb() {
  return (
    <svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M184,128a56,56,0,1,1-56-56A56,56,0,0,1,184,128Z" opacity="0.2"/><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg>
  );
}
function SunRiseIcon() {
  return (
    <svg viewBox="0 0 256 256" width="14" height="14" fill="currentColor"><path d="M192,144a64.33,64.33,0,0,1-2,16H66a64,64,0,1,1,126-16Z" opacity="0.2"/><path d="M240,152H199.55a73.54,73.54,0,0,0,0-48H240a8,8,0,0,1,0,16ZM117.66,53.66,128,43.31l10.34,10.35a8,8,0,0,0,11.32-11.32l-18-18a8,8,0,0,0-11.32,0l-18,18a8,8,0,0,0,11.32,11.32ZM72,24a8,8,0,0,0-8,8V48H48a8,8,0,0,0,0,16h16v16a8,8,0,0,0,16,0V64h16a8,8,0,0,0,0-16H80V32A8,8,0,0,0,72,24ZM168,184H32a8,8,0,0,1,0-16H168a48,48,0,0,1,0,96h-4.6a8,8,0,1,1-3.2-15.68c1.28-.26,2.53-.32,3.8-.32a32,32,0,0,0,0-64ZM120,96a40,40,0,0,0-38.66,29.76A8,8,0,0,0,88.9,136a8.14,8.14,0,0,0,2.22-.31A40,40,0,1,0,120,96Zm0,64a24,24,0,0,1-8.69-1.63,56,56,0,0,1,15.06-25.74A23.94,23.94,0,0,1,120,160Z"/></svg>
  );
}

export default function WeatherSunArc({
  title = "해의 길",
  groupLabel = "해의 길",
  hourLabel = "시각",
  rangeAria = "하루 시각 고르기",
  hourWords = DEFAULT_HOUR_WORDS,
  hour = 14,
  min = 6,
  max = 20,
  demo = true,
  duration = 2000,
  easing = "ease-out",
  color = "#e8960c",
}: WeatherSunArcProps) {
  const [now, setNow] = useState(hour);
  const [live, setLive] = useState(demo);

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  const span = max - min;
  const t = (now - min) / span;
  const sunVars: SunVars = { offsetDistance: `${t * 100}%` };
  // 하늘 밴드 — 시각 비율로 고른다
  const band = t < 0.25 ? "morning" : t < 0.72 ? "noon" : "evening";
  const word = hourWords[now - min] || "";

  function slide(e: { target: { value: string } }): void {
    setLive(false);
    setNow(Number(e.target.value));
  }

  const cls = [styles.sa, live ? styles.isDemo : "", BAND_CLASS[band] || ""].filter(Boolean).join(" ");

  return (
    <main className={styles.stage}>
      <section className={cls} style={vars} aria-label={groupLabel}>
        <p className={styles.title}>{title}</p>
        <div className={styles.skywrap}>
          <span className={`${styles.band} ${styles["band--morning"]}`} aria-hidden="true" />
          <span className={`${styles.band} ${styles["band--noon"]}`} aria-hidden="true" />
          <span className={`${styles.band} ${styles["band--evening"]}`} aria-hidden="true" />
          <svg className={styles.arc} viewBox="0 0 240 90" aria-hidden="true">
            <path className={styles.path} d="M 20 80 A 120 60 0 0 1 220 80" fill="none" stroke="rgba(23,20,26,.35)" strokeWidth="2" strokeDasharray="4 6" />
            <line x1="8" y1="80" x2="232" y2="80" stroke="rgba(23,20,26,.3)" strokeWidth="2" />
          </svg>
          <span className={styles.sun} style={sunVars} aria-hidden="true"><SunOrb /></span>
          <span className={styles.rise} aria-hidden="true"><SunRiseIcon /></span>
          <span className={styles.set} aria-hidden="true"><SunRiseIcon /></span>
        </div>
        <div className={styles.ctrl}>
          <label className={styles.lab} htmlFor="sa-hour">{hourLabel}</label>
          <input
            className={styles.range}
            id="sa-hour"
            type="range"
            min={min}
            max={max}
            step={1}
            value={now}
            aria-label={rangeAria}
            aria-valuenow={now}
            onChange={slide}
          />
          <output className={styles.time} htmlFor="sa-hour">{word}</output>
        </div>
      </section>
    </main>
  );
}