/* /var/www/html/assets/css/life-tools.css
   생활·편의 도구 스타일 (스톱워치·타이머). style.css 다크 테마 위에 얹는다.
   단위 변환기는 calc-tools.css를 재사용하므로 여기서는 다루지 않는다. */

.sw-page { --life: #6ec8c4; --life-soft: rgba(110, 200, 196, 0.16); }

.sw-tool {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 8px 0 34px;
}

.sw-card {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 120px at 50% 0%, var(--life-soft), transparent 70%),
    rgba(255, 255, 255, 0.03);
  text-align: center;
}

/* 모드 세그먼트 (스톱워치 / 타이머) */
.sw-modes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.sw-mode { position: relative; display: inline-flex; }
.sw-mode input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sw-mode > span {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  color: rgba(245, 245, 242, 0.78);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.sw-mode input:hover:not(:checked) + span { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sw-mode input:checked + span { background: #f5f5f2; color: #141414; }
.sw-mode input:focus-visible + span { outline: 2px solid #8ab4ff; outline-offset: 2px; }

/* 큰 시간 표시 */
.sw-display {
  font-size: clamp(2.8rem, 13vw, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.sw-display .sw-ms {
  font-size: 0.42em;
  color: rgba(245, 245, 242, 0.55);
  margin-left: 2px;
}
.sw-display.is-alarm {
  color: #f0a3a3;
  animation: sw-flash 0.7s steps(1) infinite;
}
@keyframes sw-flash {
  50% { color: rgba(240, 163, 163, 0.35); }
}

/* 타이머 설정 입력 */
.sw-timer-set {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.sw-field { display: flex; flex-direction: column; gap: 6px; }
.sw-field label { font-size: 0.8rem; color: rgba(245, 245, 242, 0.6); }
.sw-num {
  width: 84px;
  height: 50px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 1.3rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sw-num:focus { outline: none; border-color: var(--life); }
.sw-colon { font-size: 1.6rem; font-weight: 800; padding-bottom: 8px; color: rgba(245, 245, 242, 0.5); }

/* 빠른 설정 버튼 */
.sw-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.sw-preset {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 245, 242, 0.82);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sw-preset:hover { background: var(--life-soft); border-color: var(--life); }

.sw-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.sw-note {
  margin: 14px 0 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: rgba(245, 245, 242, 0.6);
}
.sw-note.is-alarm { color: #f0a3a3; font-weight: 700; }

/* 랩 기록 */
.sw-laps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.sw-lap {
  display: flex;
  justify-content: space-between;
  padding: 10px 6px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.sw-lap-no { color: rgba(245, 245, 242, 0.6); }
.sw-lap-time { font-weight: 700; }

/* 안내 영역 */
.sw-guide {
  margin: 34px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}
.sw-guide h2 { margin: 0 0 14px; font-size: 1.3rem; }
.sw-guide h3 { margin: 18px 0 6px; font-size: 1.02rem; }
.sw-guide p, .sw-guide li { color: rgba(245, 245, 242, 0.72); line-height: 1.7; }
.sw-guide ol, .sw-guide ul { margin: 0; padding-left: 20px; }
.sw-guide li + li { margin-top: 6px; }
.sw-guide p { margin: 0 0 8px; }

@media (max-width: 560px) {
  .sw-card { padding: 20px 14px; }
  .sw-num { width: 68px; height: 46px; font-size: 1.15rem; }
}

/* ---------- 뽀모도로 타이머 ---------- */
.pomo-phase {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--life);
}
.sw-card.is-focus { --life: #ef9aa8; --life-soft: rgba(239, 154, 168, 0.16); }
.sw-card.is-break { --life: #6ec8c4; --life-soft: rgba(110, 200, 196, 0.16); }
.sw-card.is-long { --life: #93cbf2; --life-soft: rgba(147, 203, 242, 0.16); }
.sw-card.is-focus .sw-display,
.sw-card.is-break .sw-display,
.sw-card.is-long .sw-display { color: var(--life); }

.pomo-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  min-height: 14px;
  flex-wrap: wrap;
}
.pomo-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 245, 242, 0.35);
}
.pomo-dot.is-done { background: #ef9aa8; border-color: #ef9aa8; }

.pomo-count {
  margin-top: 12px;
  color: rgba(245, 245, 242, 0.7);
  font-size: 0.92rem;
}
.pomo-count b { color: var(--text); font-variant-numeric: tabular-nums; }