/* 마우스 감도 변환기(/tools/sensitivity/) · eDPI 계산기(/tools/edpi/) 전용.
 * tools-bottleneck.css 다음에 링크된다 — 토큰(--site-*, --bn-*)·.bn 블록·.bn-field·.bn-doc·.gs-cta 를 그대로 쓴다.
 * 구조: 제목 → 입력 패널(변환 전 | 바꾸기 | 변환 후) → 결과(큰 숫자 + 수치 네 칸) → 모든 게임 표 → 설명.
 * 모서리: 패널 16px · 칸 10px · 결과 20px(PC 부품 진단과 같은 단계).
 */

/* ── 입력 패널 ─────────────────────────────────────────────────── */
.sv-panel {
    margin-top: 28px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch;
    padding: 8px; border-radius: 16px;
    background: var(--site-surface, #232323);
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
}
.sv-panel--one { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.sv-side { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; align-content: start; }
.sv-side > legend {
    float: left; width: 100%; margin: 4px 0 2px; padding: 0 6px;
    font-size: .8125rem; font-weight: 600; color: var(--site-text-2, #b0b0b0);
}
.sv-side > legend + * { clear: both; }
.sv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }

.sv-field input, .sv-field select {
    appearance: none; -webkit-appearance: none;
    width: 100%; height: 58px; padding: 24px 14px 8px;
    border: 1px solid transparent; border-radius: 10px;
    background: var(--site-surface-2, #2a2a2a); color: var(--site-text, #f0f0f0);
    font: 600 1rem/1.2 var(--bn-font);
    transition: border-color .18s, background-color .18s;
}
.sv-field input { font-family: var(--bn-mono); font-variant-numeric: tabular-nums; }
.sv-field input::placeholder { color: var(--site-text-3, #949494); opacity: 1; }
.sv-field select { padding-right: 36px; cursor: pointer; }
.sv-field input:hover, .sv-field select:hover { background-color: var(--site-surface-3, #333); }
.sv-field input:focus-visible, .sv-field select:focus-visible { outline: none; border-color: var(--site-focus, #a8c6ff); }
.sv-field--game::after {
    content: ""; position: absolute; right: 16px; top: 29px; width: 7px; height: 7px; margin-top: -2px;
    border-right: 2px solid var(--site-text-2, #b0b0b0); border-bottom: 2px solid var(--site-text-2, #b0b0b0);
    transform: translateY(-50%) rotate(45deg); pointer-events: none; transition: transform .18s;   /* 열리면 뒤집힌다(.bn-field.is-open::after) */
}

/* 바꾸기: 두 쪽 사이 세로 막대. */
.sv-swap {
    align-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 22px; padding: 0;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); border-radius: 10px;
    background: var(--site-bg-raise, #1e1e1e); color: var(--site-text-2, #b0b0b0);
    font-size: 1.125rem; cursor: pointer; transition: background-color .15s, color .15s;
}
.sv-swap:hover { background: var(--site-surface-2, #2a2a2a); color: var(--site-text, #f0f0f0); }
.sv-swap .bi { transition: transform .25s ease; }
.sv-swap:hover .bi { transform: rotate(180deg); }
.sv-swap:active { transform: translateY(1px) scale(.97); }
.sv-swap:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }

/* ── 결과 ─────────────────────────────────────────────────────── */
.sv-result {
    margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch;
}
.sv-hero, .sv-stats { padding: clamp(22px, 3vw, 30px); border-radius: 20px; background: var(--site-surface, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); }
.sv-hero-label { font-size: .875rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.sv-hero-row { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sv-hero-v {
    font-size: clamp(2.75rem, 2rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
    color: var(--bn-gpu); min-width: 0; overflow-wrap: anywhere;   /* 범위 없는 게임에 아주 큰 감도를 넣어도 375px 에서 잘리지 않게 */
}
.sv[data-state="empty"] .sv-hero-v { color: var(--site-text-3, #949494); }
.sv-copy {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); border-radius: 10px;
    background: transparent; color: var(--site-text-2, #b0b0b0); font: 600 .875rem/1 var(--bn-font); cursor: pointer;
    transition: background-color .15s, color .15s;
}
.sv-copy:hover { background: var(--site-surface-2, #2a2a2a); color: var(--site-text, #f0f0f0); }
.sv-copy:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.sv-copy .bi-check2, .sv-copy.is-done .bi-copy { display: none; }
.sv-copy.is-done .bi-check2 { display: inline; color: var(--site-success, #2ecc71); }
.sv[data-state="empty"] .sv-copy, html:not(.sv-js) .sv-copy { display: none; }
.sv-warn { margin-top: 12px !important; font-size: .875rem; line-height: 1.5; color: var(--bn-warn); }
.sv-warn:empty { display: none; }
.sv-note { margin-top: 12px !important; font-size: .875rem; line-height: 1.55; color: var(--site-text-2, #b0b0b0); }

/* 직접 측정(목록에 없는 게임): 숨긴 칸은 .bn-field 의 display 를 이겨야 한다. */
.sv-field > label { right: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 두 줄로 넘어가 입력값과 겹치지 않게 */
.sv-field[hidden], .sv-pair[hidden], .sv-note[hidden], .sv-custom-help[hidden], .sv-err[hidden] { display: none !important; }
/* 숫자 칸 오류(2026-11-08): 숫자 밖의 글자를 지웠을 때(잠깐), 숫자로 읽을 수 없거나 0일 때(고칠 때까지). */
.sv-field.is-invalid input { border-color: var(--site-danger, #ff6b5b); }
.sv-err {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .875rem; line-height: 1.5;
    color: var(--site-danger, #ff6b5b);
}
.sv-custom-help {
    margin-top: 10px !important; display: flex; gap: 10px; align-items: flex-start;
    padding: 14px 16px; border-radius: 10px; background: var(--site-surface, #232323);
    font-size: .875rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0);
}
.sv-custom-help .bi { flex: none; margin-top: 2px; color: var(--site-text, #f0f0f0); }
/* 어느 쪽을 쟀느냐에 따른 DPI 안내(원래 게임 쪽 · 바꿀 게임 쪽): 재는 법 아래 줄로. */
.sv-custom-help-line { display: block; margin-top: 6px; }
.sv-custom-help-line[hidden] { display: none !important; }

.sv-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; align-content: center; }
.sv-stats dt { font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
.sv-stats dd { margin: 4px 0 0; font-size: 1.375rem; font-weight: 700; color: var(--site-text, #f0f0f0); }
.sv-noscript { grid-column: 1 / -1; color: var(--site-text-2, #b0b0b0); }

/* ── 모든 게임 표 ─────────────────────────────────────────────── */
.sv-all { margin-top: clamp(40px, 5vw, 56px); }
.sv-all h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 750; letter-spacing: -.02em; }
.sv-all-lead { margin-top: 8px !important; color: var(--site-text-2, #b0b0b0); }
.sv-table { width: 100%; max-width: 760px; margin-top: 16px; border-collapse: collapse; }
.sv-table th, .sv-table td { padding: 11px 12px; text-align: left; font-weight: 500; }
.sv-table thead th { font-size: .8125rem; color: var(--site-text-3, #949494); border-bottom: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); }
.sv-table tbody tr + tr > * { border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.sv-table tbody th { font-weight: 650; }
.sv-table td { font-size: 1.0625rem; font-weight: 650; white-space: nowrap; }
.sv-table tr.is-active > * { background: var(--site-surface, #232323); }
.sv-table tr.is-active > :first-child { border-radius: 10px 0 0 10px; box-shadow: inset 3px 0 0 var(--bn-gpu); }
.sv-table tr.is-active > :last-child { border-radius: 0 10px 10px 0; }
.sv-game { display: inline-flex; align-items: center; gap: 10px; }
.sv-game img { width: 24px; height: 24px; border-radius: 6px; }
.sv-row-warn { margin-left: 6px; font-size: .75rem; font-weight: 600; color: var(--bn-warn); }
.sv-row-warn[hidden] { display: none !important; }

.sv-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-cta { margin-top: 0; }
.sv-cta h2 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 750; letter-spacing: -.02em; }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .sv-panel, .sv-panel--one { grid-template-columns: minmax(0, 1fr); }
    .sv-swap { justify-self: center; margin: 0; transform: rotate(90deg); }
    .sv-swap:active { transform: rotate(90deg) translateY(1px) scale(.97); }
    .sv-result { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .sv-table th, .sv-table td { padding: 10px 8px; }
    .sv-game img { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-swap, .sv-swap .bi, .sv-copy, .sv-field input, .sv-field select { transition: none !important; }
}

/* ── 무료 도구 목록(/tools/): 앱 아이콘 카드 ──────────────────────────
 * 아이콘 칸은 스쿼클(18px) 하나에 흰 기호. 색은 도구마다 사이트 토큰에서 하나씩. 카드는 16px(패널과 같은 단계). */
/* grid-auto-rows: 1fr — 모든 줄을 가장 높은 카드에 맞춘다(오너 지시 2026-11-08: 줄마다 카드 높이가 달랐다). */
/* 카테고리별 묶음(오너 지시 2026-11-08): 한 줄에 3개, 좁으면 2개·1개. 카테고리마다 그리드가 따로라
   1fr 줄 높이는 묶음 안에서만 같아진다 — 묶음끼리도 높이가 맞도록 카드에 최소 높이를 둔다. */
.tl-group { margin-top: 40px; }
.tl-group:first-of-type { margin-top: 32px; }
/* .bn :is(h1, h2, h3) { margin: 0 } (tools-bottleneck.css) 보다 앞서도록 .tl 을 붙인다. */
.tl .tl-group-h { margin: 0 0 14px; font-size: 1.125rem; font-weight: 750; letter-spacing: -.01em; color: var(--site-text, #f0f0f0); }
.tl-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
/* 최소 높이: static/js/tools-index.js 가 가장 높은 카드의 내용 높이를 --tl-h 로 넣는다(모든 폭·언어에서 묶음끼리 같게).
   스크립트가 없으면 160px(영어 4줄 카드까지). 재는 동안(.is-measuring)에는 줄 높이를 내용대로 둔다. */
.tl-grid > li { min-height: var(--tl-h, 160px); }
.tl.is-measuring .tl-grid { grid-auto-rows: auto; }
.tl.is-measuring .tl-grid > li { min-height: 0; }
@media (max-width: 960px) { .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tl-grid { grid-template-columns: minmax(0, 1fr); } }
.tl-card {
    height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
    padding: 18px; border-radius: 16px;
    background: var(--site-surface, #232323); border: 1px solid var(--site-line, rgba(255, 255, 255, .08));
    color: var(--site-text, #f0f0f0); text-decoration: none;
    transition: background-color .15s, border-color .15s, transform .18s;
}
.tl-card:hover { background: var(--site-surface-2, #2a2a2a); border-color: var(--site-line-2, rgba(255, 255, 255, .14)); }
.tl-card:active { transform: translateY(1px) scale(.99); }
.tl-card:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.tl-icon {
    display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
    color: #fff; font-size: 1.625rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.tl-icon--bottleneck { background: var(--site-brand, #0057d1); }
.tl-icon--psu { background: var(--site-accent, #7aa5f2); color: var(--site-bg, #181818); }
.tl-icon--specs { background: var(--site-success, #2ecc71); }
.tl-icon--sens { background: var(--site-warning, #f39c12); }
.tl-icon--edpi { background: var(--site-danger, #e74c3c); }
.tl-icon--kbd { background: var(--site-surface-3, #333); color: var(--site-accent, #7aa5f2); }
.tl-icon--gpu_tier { background: var(--site-surface-3, #333); color: var(--site-success, #2ecc71); }
.tl-icon--cpu_tier { background: var(--site-surface-3, #333); color: var(--site-warning, #f39c12); }   /* 키보드(파란 글자)와 구분 */
.tl-icon--lagcheck { background: var(--site-surface-3, #333); color: var(--site-danger, #e74c3c); }
/* 2026-11-12 새 도구 카드. 목록 페이지만 쓰는 색이라 목록이 싣는 이 파일 한 곳에 둔다(도구별 CSS 를 목록에 싣지 않게).
   같은 묶음 안에서 겹치지 않게: 게임(반응속도 하늘·프레임 드랍 회색+빨강·사양 초록) · 오디오 · PC 부품 · 입력 · 모니터. */
.tl-icon--elec { background: var(--site-warning, #f39c12); color: var(--site-bg, #1a1a1a); }
.tl-icon--dpi { background: var(--site-text-2, #b0b0b0); color: var(--site-bg, #1a1a1a); }
.tl-icon--msize { background: linear-gradient(135deg, var(--site-accent, #7aa5f2), var(--site-logo-blue, #2d5bff)); }
.tl-icon--mic { background: var(--site-success, #2ecc71); color: var(--site-bg, #1a1a1a); }
.tl-icon--spk { background: var(--site-warning, #f39c12); color: var(--site-bg, #1a1a1a); }
.tl-icon--aim { background: var(--site-danger, #e74c3c); }
.tl-icon--pad { background: var(--site-surface-3, #333); color: var(--site-success, #2ecc71); }
.tl-icon--bsod { background: var(--site-logo-blue, #2d5bff); }
.tl-text { display: grid; gap: 4px; min-width: 0; }
.tl-name { font-size: 1.0625rem; font-weight: 750; letter-spacing: -.01em; }
.tl-desc { font-size: .875rem; line-height: 1.5; color: var(--site-text-2, #b0b0b0); }
.tl-go { color: var(--site-text-3, #949494); transition: transform .18s, color .15s; }
.tl-card:hover .tl-go { color: var(--site-text, #f0f0f0); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .tl-card, .tl-go { transition: none !important; }
}

/* 도구 목록 카테고리 소개 한 문장(tools.cat_<키>_desc, 2026-11-08 SEO). */
.tl .tl-group-desc { margin: -6px 0 14px; max-width: 46em; font-size: .9375rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0); }

/* ── SEO 본문(2026-11-08): 자주 찾는 게임 쌍 배율 · 쌍별 설명 · 같은 eDPI 조합 · 관련 글 ───────────── */
/* 쌍 이름이 곧 '계산기에서 열기' 링크(375px 에서 열 하나를 더 두면 표가 넘쳤다). */
.sv-pair-table th[scope="row"] a { color: var(--site-text, #f0f0f0); text-decoration: underline; text-decoration-color: var(--site-line-2, rgba(255, 255, 255, .14)); text-underline-offset: 4px; }
.sv-pair-table th[scope="row"] a:hover { text-decoration-color: currentColor; }
.sv-pair-guides { max-width: 760px; margin-top: 28px; display: grid; gap: 22px; }
.sv-pair-guide h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.sv-pair-guide p { margin-top: 8px; line-height: 1.7; color: var(--site-text-2, #b0b0b0); }
.sv-pair-guide p a { color: var(--site-text, #f0f0f0); text-underline-offset: 3px; }
.sv-pair-ex { margin-top: 8px !important; display: grid; gap: 4px; font-size: .9375rem; font-variant-numeric: tabular-nums; color: var(--site-text, #f0f0f0); }
.sv-combo-table { max-width: 420px; }
.sv-combo-table tbody th { font-size: 1.0625rem; }
.sv-posts ul { margin-top: 14px !important; display: grid; gap: 8px; }
.sv-posts a { color: var(--site-text, #f0f0f0); text-underline-offset: 3px; line-height: 1.6; }
@media (max-width: 420px) {
    .sv-pair-table td { font-size: .9375rem; }
}