:root {
  --bg: #f2f2f2;
  --clock-body: #0a0a0a;
  --disc: #f2f2f2;
  --pie: #f62525;
  --tick: #d9d9d9;
  --digits: #0a0a0a;
  --control: #d9d9d9;
  --text: #0a0a0a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh; /* 모바일 브라우저 UI 높이 변화 대응 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  /* 드래그로 시간을 맞추는 앱이므로 글자가 선택되거나 끌리면 안 된다 */
  user-select: none;
  -webkit-user-select: none;   /* iOS Safari */
  -webkit-touch-callout: none; /* iOS 길게 누르기 메뉴 차단 */
}
img { -webkit-user-drag: none; user-drag: none; }

/* 시계만 흐름에 남겨 항상 뷰포트 정중앙에 오도록 한다.
   컨트롤과 저작권은 흐름에서 빼내 시계 위치에 영향을 주지 않는다
   (버튼 크기가 달라져도 시계가 들썩이지 않음) */
.stage { display: flex; align-items: center; justify-content: center; }

/* 상단 재생/일시정지 — 피그마 기준 시계 위 약 27/1024 = 2.6vmin 간격.
   position:fixed 로 흐름에서 분리(= 시계 위치 불변) + 위치 지정 요소이므로
   Dark 테마의 전체 화면 파이 위에 그려져 클릭도 가로채이지 않는다 */
.controls {
  position: fixed;
  left: 50%;
  /* translateZ(0)로 독립 합성 레이어를 유지 — 버튼이 바뀔 때 아래 파이를
     다시 그리지 않고 합성만 하도록 해 잘림 아티팩트를 막는다 */
  transform: translateX(-50%) translateZ(0);
  bottom: calc(50% + min(37vmin, 400px) + 2.6vmin); /* 시계 상단에서 일정 간격 */
  height: 4.6vmin;          /* 재생/일시정지 크기가 달라도 줄 높이 고정 */
  /* 두 버튼을 같은 칸에 겹쳐 컨테이너 크기가 절대 변하지 않게 한다.
     크기가 변하면 이 고정 레이어가 다시 합성되면서, 아래에 넘쳐 그려진
     파이가 그 사각형만큼 지워져 보이는 문제가 iOS Safari에서 발생한다 */
  display: grid;
  place-items: center;
}
.controls button {
  grid-area: 1 / 1;         /* 두 버튼이 같은 칸을 공유 */
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 0.55vmin;
}
/* 원본 에셋은 위쪽을 가리키는 삼각형(▲)으로 내보내짐 — 피그마 프레임에서는 90도 회전되어
   오른쪽(▶)을 가리킴. 실제 에셋 path는 그대로 두고 방향만 회전으로 보정. */
#btn-play img { width: 4.3vmin; height: auto; display: block; transform: rotate(90deg); } /* 원본 SVG(39.8495x34.5107) 종횡비 유지 — 정사각형으로 강제하지 않음 */
.controls .bar { width: 1.25vmin; height: 3.45vmin; background: var(--control); }
/* 상태에 따라 재생/일시정지 중 하나만 보인다. display를 바꾸면 고정 레이어의
   크기가 변해 iOS Safari에서 아래 파이가 잘려 보이므로, 자리는 유지한 채
   visibility만 전환한다 (접근성 트리와 탭 순서에서도 함께 빠진다) */
.controls button.is-hidden { visibility: hidden; }

#dial {
  width: min(74vmin, 800px);
  height: min(74vmin, 800px);
  overflow: visible;
  touch-action: none;
  cursor: default;
  outline: none;
}
/* 빨간 판의 경계선 위에 있을 때만 "잡을 수 있다"는 신호를 준다.
   Dark 테마에서는 경계선이 SVG 바깥까지 이어지므로 body 기준으로 표시한다 */
body.on-edge, body.on-edge #dial { cursor: grab; }
body.grabbing, body.grabbing #dial { cursor: grabbing; }
#body { fill: var(--clock-body); }
#disc { fill: var(--disc); }
#pie  { fill: var(--pie); }
#ticks rect { fill: var(--tick); }
#digits {
  font-family: 'Krona One', sans-serif;
  font-size: 160px;             /* viewBox 800 기준 */
  letter-spacing: -3.2px;
  fill: var(--digits);
  pointer-events: none;
  user-select: none;
}

/* 저작권 — 피그마 기준 뷰포트 하단에서 약 28/1024 = 2.7vh 위치 */
.copyright {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(2.7vh, 12px);
  white-space: nowrap;
  font-size: 10px; font-weight: 300; letter-spacing: -0.6px; color: var(--text);
}
.copyright a { color: inherit; }

.corner { position: fixed; top: 12px; right: 16px; display: flex; gap: 8px; }
.corner button {
  background: none; border: none; cursor: pointer;
  font-size: 13px; color: var(--text); opacity: 0.45;
}
.corner button:hover { opacity: 1; }

/* Task 6: Button spring motion and color transitions */
.controls button {
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.controls button:active {
  transform: scale(0.92);
  transition-duration: 80ms;
  transition-timing-function: ease-out;
}

body { transition: background-color 200ms ease; }
#body, #disc, #pie, #ticks rect, #digits { transition: fill 200ms ease; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

/* Task 7: 테마 3종 — Basic은 :root 기본값 */
body[data-theme='light'] {
  --clock-body: transparent;
  --disc: transparent;
}
body[data-theme='dark'] {
  --bg: #2e2e2e;
  --clock-body: transparent;
  --disc: transparent;
  --tick: #f4f4f4;
  --digits: #f4f4f4;
  --text: #f4f4f4;
}