/* ==========================================================================
   class-timer 전용 스타일

   🔴 CSP 가 인라인 style 을 막습니다. JS 는 data-* 속성과 SVG 표시 속성만 바꾸고
      색·크기는 전부 이 파일이 정합니다.
   🔴 게이지 색은 UI 토큰(--color-*)에서 빌려 오지 않습니다(STYLE.md).
      "남은 시간"은 데이터라서, 접근성 때문에 UI 토큰을 바꿀 때 뜻이 같이 바뀌면 안 됩니다.
   ========================================================================== */

.timer-tool {
  /* 게이지 전용 색 4단계 + 트랙. 흰 배경(#FFFFFF)과 페이지 배경(#F6F8FB) 양쪽에서
     본문 대비 4.5:1 을 넘깁니다(숫자에도 같은 색을 쓰므로 3:1 이 아니라 4.5:1 기준).
       평상  #14685E  흰 6.62 · 페이지 6.22
       30초  #9A5B00  흰 5.47 · 페이지 5.15
       10초  #B3261E  흰 6.54 · 페이지 6.15
       종료  #4A3C8C  흰 9.07 · 페이지 8.52
       대기  #5B6B85  흰 5.60 · 페이지 5.26 */
  --timer-idle: #5B6B85;
  --timer-normal: #14685E;
  --timer-warn: #9A5B00;
  --timer-alert: #B3261E;
  --timer-done: #4A3C8C;
  --timer-track: #DCE3EE;

  /* 결과 숫자의 별도 축입니다(common.css 의 --text-stat 과 같은 성격).
     본문 9단계로는 교실 뒤에서 읽히는 크기를 만들 수 없어 이 도구에만 둡니다.
     단위는 SVG 사용자 좌표(viewBox 320)입니다 — 링 안쪽 지름이 244 라
     6자까지는 56, 7자 이상은 42 로 낮춰야 넘치지 않습니다. */
  --timer-clock: 56px;
  --timer-clock-wide: 42px;
}

/* --- 탭 -------------------------------------------------------------------- */
.mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.mode-tab {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.mode-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.mode-tab[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.mode-panel {
  margin-bottom: var(--space-4);
}

/* --- 시간 입력 --------------------------------------------------------------- */
.field {
  min-width: 0;
}

.time-fields {
  display: grid;
  max-width: 420px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.time-fields--three {
  max-width: 560px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.time-input {
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.chip {
  min-width: 60px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* --- 구간 편집기 ------------------------------------------------------------- */
.seg-row {
  display: grid;
  align-items: center;
  margin-bottom: var(--space-2);
  gap: var(--space-2);
  grid-template-areas: "order name min sec tools";
  grid-template-columns: 28px minmax(0, 1fr) 120px 120px auto;
}

.seg-row .text-input {
  min-height: 48px;
}

.seg-order {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  grid-area: order;
  text-align: center;
}

.seg-name {
  grid-area: name;
}

.seg-num {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-1);
}

/* 🔴 :nth-of-type 로 잡으면 안 됩니다 — 같은 줄의 .seg-order·.seg-tools 도 span 이라
   "몇 번째 span 인가"가 어긋납니다. 칸 이름을 클래스로 직접 붙입니다. */
.seg-num--min {
  grid-area: min;
}

.seg-num--sec {
  grid-area: sec;
}

.seg-num .text-input {
  min-width: 0;
  flex: 1 1 auto;
}

.seg-unit {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.seg-tools {
  display: flex;
  gap: var(--space-1);
  grid-area: tools;
}

.seg-btn {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1;
}

.seg-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.seg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.seg-total {
  margin-top: var(--space-3);
}

/* --- 표시부 ------------------------------------------------------------------ */
.timer-panel {
  margin-top: var(--space-5);
}

.stage {
  display: grid;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr) 260px;

  /* 기본값. 아래 data-phase 규칙이 덮어씁니다. */
  --ring: var(--timer-idle);
  --digits: var(--color-text);
}

.stage[data-phase="normal"] { --ring: var(--timer-normal); --digits: var(--color-text); }
.stage[data-phase="warn"]   { --ring: var(--timer-warn);   --digits: var(--timer-warn); }
.stage[data-phase="alert"]  { --ring: var(--timer-alert);  --digits: var(--timer-alert); }
.stage[data-phase="done"]   { --ring: var(--timer-done);   --digits: var(--timer-done); }

.stage[data-mode="stopwatch"] {
  grid-template-columns: minmax(0, 1fr);
}

.stage[data-mode="stopwatch"] .stage__side {
  display: none;
}

.stage__main {
  min-width: 0;
}

.stage__side {
  min-width: 0;
}

.gauge-wrap {
  max-width: 340px;
  margin: 0 auto;
}

.gauge {
  display: block;
  width: 100%;
  height: auto;
}

.gauge__track {
  fill: none;
  stroke: var(--timer-track);
  stroke-width: 18;
}

.gauge__arc {
  fill: none;
  stroke: var(--ring);
  stroke-linecap: round;
  stroke-width: 18;
  transition: stroke-dashoffset 140ms linear, stroke 200ms ease;
}

.clock {
  fill: var(--digits);
  font-size: var(--timer-clock);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.stage[data-wide="true"] .clock {
  font-size: var(--timer-clock-wide);
}

.phase-name {
  margin: var(--space-3) 0 0;
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-align: center;
}

.sub-line {
  min-height: 1.7em;
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* --- 진행 순서 --------------------------------------------------------------- */
.side-title {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.plan-list {
  display: flex;
  max-height: 360px;
  flex-direction: column;
  padding: 0;
  margin: 0;
  gap: var(--space-2);
  list-style: none;
  overflow-y: auto;
}

.plan-item {
  display: grid;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  gap: 0 var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}

.plan-item__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-item__time {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.plan-item__state {
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  grid-column: 1 / -1;
}

.plan-item[data-state="current"] {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
}

.plan-item[data-state="current"] .plan-item__state {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.plan-item[data-state="done"] .plan-item__name {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.plan-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* --- 조작 -------------------------------------------------------------------- */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.controls__main {
  flex: 1 1 200px;
}

.live-status {
  min-height: 1.7em;
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.switch-row {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-top: var(--space-4);
  cursor: pointer;
  gap: var(--space-3);
}

.switch-row input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 3px;
}

.switch-row__text {
  font-size: var(--text-sm);
}

.switch-row__sub {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* --- 스톱워치 기록 ------------------------------------------------------------ */
.laps {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-5);
  background: var(--color-surface);
}

.lap-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: var(--space-3) 0 0;
  gap: var(--space-1);
  list-style: none;
}

.lap-item {
  display: flex;
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  gap: var(--space-3);
}

.lap-item__no {
  min-width: 68px;
  color: var(--color-text-muted);
}

.lap-item__total {
  margin-left: auto;
  color: var(--color-text-muted);
}

/* --- 안내 -------------------------------------------------------------------- */
.screen-notice strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.screen-notice p {
  margin: 0 0 var(--space-2);
}

.screen-notice p:last-child {
  margin-bottom: 0;
}

.wake-note:empty {
  display: none;
}

/* --- 전체화면 ----------------------------------------------------------------
   🔴 `:fullscreen` 과 `.timer-panel--fill` 을 한 선택자 목록에 묶지 마세요.
      `:fullscreen` 을 모르는 브라우저는 **목록 전체**를 버려서 대체 모드까지 죽습니다.
   ---------------------------------------------------------------------------- */
.timer-panel--fill {
  position: fixed;
  z-index: 50;
  display: flex;
  overflow: auto;
  padding: var(--space-5);
  background: var(--color-bg);
  flex-direction: column;
  inset: 0;
  justify-content: center;
}

.timer-panel:fullscreen {
  display: flex;
  overflow: auto;
  padding: var(--space-5);
  background: var(--color-bg);
  flex-direction: column;
  justify-content: center;
}

.timer-panel--fill .gauge-wrap {
  max-width: min(64vh, 620px);
}

.timer-panel:fullscreen .gauge-wrap {
  max-width: min(64vh, 620px);
}

.timer-panel--fill .phase-name {
  font-size: var(--text-xl);
}

.timer-panel:fullscreen .phase-name {
  font-size: var(--text-xl);
}

body.is-timer-fill {
  overflow: hidden;
}

/* --- 모바일 ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .stage {
    padding: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
  }

  .seg-row {
    grid-template-areas:
      "order name  name"
      ".     min   sec"
      ".     tools tools";
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .seg-order {
    align-self: center;
  }

  .seg-tools {
    justify-content: flex-end;
  }

  .plan-list {
    max-height: 260px;
  }

  .controls__main {
    flex: 1 1 100%;
  }
}

/* --- 동작 줄이기 -------------------------------------------------------------- */
.stage[data-reduced="true"] .gauge__arc {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .gauge__arc {
    transition: none;
  }
}

/* --- 다크 모드 ---------------------------------------------------------------
   어두운 표면(#172131)에서 위 색들은 3:1 도 못 넘깁니다. 네 단계를 모두 다시 잡습니다.
     평상  #5FD3C1  8.97 · 30초 #F2B347  8.74 · 10초 #FF8A80  7.11
     종료  #B9AEFF  7.86 · 대기 #93A2BC  5.36
   ---------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .timer-tool {
    --timer-idle: #93A2BC;
    --timer-normal: #5FD3C1;
    --timer-warn: #F2B347;
    --timer-alert: #FF8A80;
    --timer-done: #B9AEFF;
    --timer-track: #334158;
  }
}