:root { --fg: #171717; --muted: #525252; --line: #e5e5e5; --accent: #0b6bcb; --on-accent: #fff; --warn: #b54708; --bg: #fff; --card: #fafafa; --ease: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-color-scheme: dark) {
  :root { --fg: #ededed; --muted: #a1a1a6; --line: #2c2c2f; --accent: #5aa9ff; --on-accent: #0b1726; --warn: #f5a524; --bg: #141415; --card: #19191b; }
}
* { box-sizing: border-box; }
/* Component rules like `dl.result { display: grid }` would otherwise defeat the hidden attribute. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.top { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--fg); text-decoration: none; }
main { max-width: 680px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; margin: 8px 0 12px; }
h2 { font-size: 1.15rem; font-weight: 600; margin-top: 32px; }
form, .card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
/* Grid items and fieldsets default to min-content width; let wide tables scroll inside .scroll instead of widening the page. */
form > *, .card > *, fieldset { min-width: 0; }
label { display: grid; gap: 4px; font-weight: 500; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
input, select, textarea, button { font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); width: 100%; }
input[type="checkbox"] { width: auto; }
textarea { min-height: 220px; resize: vertical; }
button { background: var(--accent); color: var(--on-accent); border: 0; font-weight: 600; cursor: pointer; }
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
dl.result { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
dl.result dt { color: var(--muted); }
dl.result dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
/* Receipt-style total line above the headline figure. */
dl.result dt:has(+ dd.big), dl.result dd.big { border-top: 1px dashed var(--line); padding-top: 12px; }
.big { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.warn { color: var(--warn); font-size: .9rem; }
.note { color: var(--muted); font-size: .85rem; }
.err { color: var(--warn); margin: 0; }
.err:empty { display: none; }
/* A label wrapping a checkbox/radio directly reads inline, not as a stacked field. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.faq dt { font-weight: 600; margin-top: 16px; }
.faq dd { margin: 4px 0 0; color: var(--muted); }
.related ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.related a { display: inline-block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--fg); text-decoration: none; }
.search { margin: 16px 0 0; }
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 0; list-style: none; }
.tools a { display: block; padding: 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--fg); text-decoration: none; height: 100%; }
.tools strong { display: block; font-weight: 600; margin-bottom: 4px; }
#pad { min-height: 260px; display: grid; place-items: center; border-radius: 12px; font-size: 1.4rem; font-weight: 600; color: #fff; user-select: none; touch-action: manipulation; cursor: pointer; text-align: center; padding: 16px; }
#pad.idle { background: #2563eb; } #pad.wait { background: #dc2626; } #pad.go { background: #16a34a; } #pad.done, #pad.retry { background: #475569; }
.clock { font-size: 3rem; font-weight: 500; text-align: center; margin: 0; font-variant-numeric: tabular-nums; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.presets button { width: auto; flex: 1 0 auto; }
.laps, .result-list { margin: 0; padding-left: 1.5em; font-variant-numeric: tabular-nums; }
.result-text { word-break: break-all; }
.scroll { overflow-x: auto; }
.schedule { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.schedule th, .schedule td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
summary { cursor: pointer; font-weight: 600; }
footer { max-width: 680px; margin: 40px auto; padding: 16px; font-size: .85rem; color: var(--muted); }
a { color: var(--accent); }
/* States: quick color/border steps, a small press, and a visible keyboard focus ring. */
:where(a, button, input, select, textarea) { transition: border-color .15s var(--ease), background-color .15s var(--ease), filter .15s var(--ease), transform .15s var(--ease); }
:where(input, select, textarea):focus { border-color: var(--accent); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(button):active { transform: scale(.98); }
@media (hover: hover) {
  :where(button):hover { filter: brightness(1.08); }
  .tools a:hover, .related a:hover { border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.result-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); font-weight: 600; font-variant-numeric: tabular-nums; }
.result-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-bar button { width: auto; flex: none; min-height: 40px; padding: 8px 16px; }