/* 타이머 + 스톱워치 전용 스타일 — common.css 토큰(var(--kt-…))만 쓴다 */

/* hidden 속성이 컴포넌트의 display(.kt-btn inline-flex, .kt-num block 등)에 덮이지 않게 */
.kt-stage [hidden] { display: none !important; }

/* ---- 모드 전환 ---- */
.tm-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kt-space-1);
}
.tm-mode .kt-hint { color: var(--kt-danger); font-weight: 700; }

/* ---- 패널 ---- */
.tm-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kt-space-4);
}
.tm-panel[hidden] { display: none; }

/* ---- 남은 시간 막대(점수판 안 아래쪽 6px) ---- */
.tm-bar {
  width: 100%;
  height: 4px;
  margin-top: var(--kt-space-4);
  background: var(--kt-board-chalk);
  border-radius: 3px;
  overflow: hidden;
}
.tm-bar__fill {
  width: 100%;
  height: 100%;
  background: var(--kt-board-ink);
  transform-origin: left center;
}
/* 마지막 10초: 판이 뒤집히면 --kt-board-ink가 함께 바뀌므로 막대 채움은 따로 정하지 않는다 */
.kt-is-fullscreen .tm-bar { margin-top: var(--kt-space-5); }

/* ---- 분·초 맞추기 ---- */
.tm-set {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kt-space-3);
}
.tm-set .kt-stepper { gap: var(--kt-space-1); }
.tm-set .kt-stepper__value {
  width: 3ch;
  min-height: 44px;
  font-size: var(--kt-fs-2xl);
  border-bottom: 2px solid var(--kt-ui-line);
}
.tm-set .kt-stepper__value:focus { border-bottom-color: var(--kt-ink); }
.tm-set .kt-stepper__value:disabled { opacity: 0.4; }
.tm-set__colon {
  font-weight: 700;
  font-size: var(--kt-fs-2xl);
  color: var(--kt-ink-soft);
  padding-top: var(--kt-space-3);
}

/* 안내 줄은 높이를 미리 잡아 버튼이 밀리지 않게 */
.tm-hint { min-height: 1.5em; }

/* ---- 알림음 고르기 ---- */
.tm-sound__label {
  font-size: var(--kt-fs-s);
  font-weight: 700;
  color: var(--kt-ink-soft);
}

/* 숫자 크기는 common.css 수식어로 정한다: 타이머 .kt-num--short, 스톱워치 .kt-num
   (1시간 이상 .kt-num--long, 10시간 이상 .kt-num--xlong — main.js render에서 붙인다) */

/* 최근 랩 3개: 전체화면에서만 */
.sw-recent {
  display: none;
  list-style: none;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.kt-is-fullscreen .sw-recent:not([hidden]) { display: block; }
.kt-is-fullscreen .sw-recent { font-size: var(--kt-fs-l); }
.sw-recent li + li { margin-top: var(--kt-space-1); }

/* ---- 랩 목록 ---- */
.sw-laps {
  width: 100%;
  max-width: 560px;
}
.sw-laps .kt-table th:not(:first-child),
.sw-laps .kt-table td { text-align: right; }
.sw-laps .kt-table tbody th {
  font-weight: 700;
  font-size: var(--kt-fs-m);
  color: var(--kt-ink);
  white-space: nowrap;
}
.sw-laps .kt-table td { white-space: nowrap; }
.sw-empty { margin-top: var(--kt-space-2); }

.sw-tag {
  display: inline-block;
  margin-right: var(--kt-space-2);
  font-size: var(--kt-fs-s);
  font-weight: 700;
}
/* 가장 빠름/느림은 색 대신 굵기와 표시 글자로 구분한다(분홍은 글자색으로 쓰지 않음) */
.sw-fast, .sw-slow { color: var(--kt-ink); font-weight: 600; }

/* 새 랩 줄: 옅은 면이 0.6초 동안 사라진다 */
.sw-new { animation: sw-new-row 0.6s ease-out; }
@keyframes sw-new-row {
  from { background: var(--kt-muted-bg); }
  to   { background: transparent; }
}

/* ---- 전체화면: 제목 자리 안내 글자 숨김 ---- */
.kt-is-fullscreen .kt-title-input::placeholder { color: transparent; }

@media (max-width: 380px) {
  .tm-presets { gap: 5px; }
  .tm-presets .kt-btn--sm { padding: 0 12px; }
  .tm-sound { gap: var(--kt-space-2); }
  .tm-sound .kt-seg > button { padding: 0 var(--kt-space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .sw-new { animation: none; }
}