/* 스톱워치 — 숫자가 흔들리지 않게 고정폭 숫자를 쓴다. */

.sw-display {
    text-align: center;
    font-size: clamp(2.75rem, 13vw, 5.5rem);
    font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    padding: var(--spacing-md, 1rem) 0 var(--spacing-lg, 1.5rem);
    white-space: nowrap; overflow-x: auto;
}
.sw-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.sw-controls .btn-tool { min-width: 7rem; justify-content: center; }
.sw-keys { text-align: center; margin: var(--spacing-md, 1rem) 0 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.sw-keys kbd {
    display: inline-block; padding: 0 .35rem; border: 1px solid var(--border-color, #d8dce3);
    border-radius: 4px; background: var(--bg-subtle, #f5f6f8); color: var(--text-color, #1b1e24);
    font-family: inherit; font-size: .75rem;
}

.sw-empty { margin: 0; color: var(--text-muted, #626977); font-size: var(--text-sm, .875rem); text-align: center; padding: var(--spacing-lg, 1.5rem) 0; }
.sw-table-wrap { max-height: 22rem; overflow: auto; }
.sw-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, .875rem); }
.sw-table th, .sw-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--border-color, #e5e8ed); text-align: left; font-variant-numeric: tabular-nums; }
.sw-table th { position: sticky; top: 0; background: var(--bg-surface, #fff); font-weight: 600; color: var(--text-muted, #626977); font-size: var(--text-ui-sm, .8125rem); }
.sw-table tr.is-fastest td { color: #2e9e6a; font-weight: 700; }
.sw-table tr.is-slowest td { color: #d6453d; font-weight: 700; }
.sw-badge {
    margin-left: .4rem; padding: 0 .4rem; border-radius: 999px;
    font-size: .7rem; font-weight: 600; vertical-align: 1px;
}
.sw-table tr.is-fastest .sw-badge, .sw-table tr.is-slowest .sw-badge { color: inherit; background: var(--bg-subtle, #f5f6f8); border: 1px solid currentColor; }