/* 화이트 모드 색 (기본) */
:root {
  --page-width: 1200px;
  color-scheme: light;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1b1d22;
  --muted: #6b7280;
  --line: #e3e5ea;
  --accent: #2f6fed;
  --accent-text: #ffffff;
  --danger: #e5484d;
}

/* 다크 모드 색: theme.js 가 <html data-theme="dark"> 로 켬 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111317;
  --surface: #1a1d23;
  --text: #eef0f3;
  --muted: #9aa1ad;
  --line: #2c3038;
  --accent: #5b8cff;
  --accent-text: #0b0d10;
  --danger: #ff6b6f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  line-height: 1.6;
}

/* 일본어·중국어는 한국어 글꼴(한자 모양이 다름) 대신 각 언어 글꼴로 */
body:lang(ja) { font-family: system-ui, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; }
body:lang(zh) { font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; }

a { color: var(--accent); }

/* ===== 헤더 / 푸터 ===== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 16px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--muted); }
.lang-select {
  height: 36px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.logo {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  text-decoration: none;
}
.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 24px 16px 40px;
}

/* ===== 레이아웃: 광고 | 본문 | 광고 ===== */
.layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 160px;
  gap: 24px;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 16px;
  align-items: start;
}

/* ===== 광고 자리 =====
   크기 고정 자리(① 상단, ②③ 양옆)는 화면 폭에 따라 아래 크기로 광고가 들어갑니다.
   (애드센스 '화면 폭별 정확한 크기' 방식: 광고 코드의 ins 태그 크기를 CSS가 정함) */
.ad {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-top,
.ad-top .adsbygoogle { width: 728px; height: 90px; }
.ad-top { margin: 0 auto 16px; }
.ad-side,
.ad-side .adsbygoogle { width: 160px; height: 600px; }
/* 반응형 자리는 가로 폭을 꽉 채워야 애드센스가 크기를 잡을 수 있음 */
.ad-inline { display: block; min-height: 100px; margin: 24px 0; }
.ad-placeholder {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.8rem;
}

/* ===== 도구 카드 ===== */
.tool {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px 32px;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.tab {
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: var(--accent-text); }

.icon-btn {
  margin-left: auto;
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); }

.display {
  margin: 40px 0 8px;
  text-align: center;
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.display.done {
  color: var(--danger);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

.sub {
  text-align: center;
  color: var(--muted);
  font-size: 1.1rem;
}

.time-inputs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  color: var(--muted);
}
.time-inputs input {
  width: 4.2em;
  padding: 8px;
  font: inherit;
  font-size: 1.2rem;
  text-align: center;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.time-inputs label { white-space: nowrap; }
.time-inputs input:disabled { opacity: 0.5; }

.controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.btn {
  padding: 10px 22px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary {
  min-width: 120px;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}
.presets .btn { padding: 6px 14px; font-size: 0.9rem; }

.laps {
  max-width: 380px;
  max-height: 240px;
  margin: 24px auto 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-variant-numeric: tabular-nums;
}
.laps li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
}
.laps .diff { color: var(--muted); }

/* 전체화면일 때는 시간만 크게 */
.tool:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: var(--surface);
}
.tool:fullscreen .tabs { position: absolute; top: 16px; left: 20px; right: 20px; }
.tool:fullscreen .display { font-size: min(15vw, 35vh); }

/* ===== 설명 글 ===== */
.info {
  padding: 8px 4px 24px;
  color: var(--text);
}
.info h2 { font-size: 1.2rem; margin: 28px 0 8px; }
.info h3 { font-size: 1rem; margin: 18px 0 4px; }
.info p, .info li { color: var(--muted); }

/* ===== 일반 문서 페이지 (개인정보처리방침 등) ===== */
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 24px;
}
.page h1 { font-size: 1.5rem; }
.page h2 { font-size: 1.1rem; margin-top: 28px; }
.page p, .page li { color: var(--muted); }

/* ===== 넓은 화면: 양옆 광고를 단가가 높은 300x600 으로 ===== */
@media (min-width: 1440px) {
  :root { --page-width: 1440px; }
  .layout { grid-template-columns: 300px minmax(0, 1fr) 300px; }
  .ad-side,
  .ad-side .adsbygoogle { width: 300px; }
}

/* ===== 좁은 화면: 양옆 광고 숨기고 본문 광고만 ===== */
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .ad-side { display: none; }
}

/* ===== 모바일: 상단 광고 작게, 글 중간 광고 숨김 (모바일 광고 비율 30% 이하 유지) ===== */
@media (max-width: 760px) {
  .ad-top,
  .ad-top .adsbygoogle { width: 320px; height: 100px; }
  .ad-desktop-only { display: none; }
}
@media (max-width: 480px) {
  .tool { padding: 12px 12px 24px; }
  .tab { padding: 6px 12px; }
  .time-inputs { gap: 6px; }
  .time-inputs input { width: 3.2em; }
}