/* 타이머 — 숫자가 주인공이다. */

.tm-display {
    text-align: center;
    font-size: clamp(3.5rem, 16vw, 8rem);
    font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-color, #1b1e24);
    padding: var(--spacing-md, 1rem) 0 .25rem;
}
.tm-status { text-align: center; margin: 0 0 var(--spacing-lg, 1.5rem); color: var(--text-muted, #626977); font-size: var(--text-sm, .875rem); }

.tm-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; max-width: 28rem; margin: 0 auto; }
.tm-num { text-align: center; font-variant-numeric: tabular-nums; font-size: 1.25rem; }

.tm-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: var(--spacing-md, 1rem) 0; }
.tm-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: var(--spacing-md, 1rem); }
.tm-controls .btn-tool { min-width: 9rem; justify-content: center; }
.tm-sound { justify-content: center; display: flex; }

/* 끝났을 때 — 깜빡임. 움직임을 줄이도록 설정한 사람에게는 색만 바꾼다. */
.tm-section.is-done .tm-display { color: #d6453d; animation: tm-blink 1s steps(2, start) infinite; }
.tm-section.is-done { box-shadow: 0 0 0 3px #d6453d inset; }
@keyframes tm-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
    .tm-section.is-done .tm-display { animation: none; }
}

/* 전체 화면 — 숫자만 크게 */
.tm-section:fullscreen { display: flex; flex-direction: column; justify-content: center; background: var(--bg-surface, #fff); padding: 2rem; overflow: auto; }
.tm-section:fullscreen .tm-display { font-size: min(24vw, 40vh); }