/* 게임패드 테스트(/tools/gamepad-test/) 전용.
 * tools-bottleneck.css · tools-sensitivity.css · tools-measure.css 다음에 링크된다 — 토큰(--site-*, --bn-*)과
 * .bn·.bn-doc·.gs-cta·.sv-links·.mt-steps 를 그대로 쓴다. 색은 토큰만(hex 는 토큰이 없을 때의 폴백 값뿐).
 * 구조: 제목 → 검사 무대(패드 그림·버튼 목록 | 스틱 원·쏠림 재기·진동) → 설명.
 * 어떤 문구를 보일지는 루트 .gp 의 data-state · data-* 플래그로 고른다(tools-gamepad.js 가 바꾼다).
 * 모서리: 무대 20px · 칸 14px · 칩·버튼 10px(다른 측정 도구와 같은 단계).
 * ⚠ prefers-reduced-motion 은 CSS 전환만 끈다. 검사 자체는 막지 않는다.
 * ⚠ 번쩍임 없음: 눌린 버튼은 작은 부분만 켜지고, 화면 전체 색 전환을 쓰지 않는다(WCAG 2.3.1).
 */
.page-gp {
    --gp-ring: var(--site-line-2, rgba(255, 255, 255, .14));
    --gp-axis: var(--site-line, rgba(255, 255, 255, .08));
    --gp-dz: var(--site-text-3, #949494);
    --gp-trail: var(--bn-gpu);
    --gp-dot: var(--site-text, #f0f0f0);
}
.gp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 검사 무대 ─────────────────────────────────────────────────── */
.gp-stage {
    margin-top: 28px;
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start;
}
.gp-main, .gp-side {
    min-width: 0; padding: clamp(20px, 2.6vw, 28px); border-radius: 20px;
    background: var(--site-surface, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.gp-side { display: grid; gap: 22px; }

.gp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.gp-pads { display: none; flex-wrap: wrap; gap: 6px; }
.gp[data-multi] .gp-pads { display: flex; }
.gp-stats { margin: 0 0 0 auto; }
.gp-stats dt { font-size: .75rem; font-weight: 500; color: var(--site-text-3, #949494); }
.gp-stats dd { margin: 2px 0 0; font-size: 1.125rem; font-weight: 700; color: var(--site-text, #f0f0f0); white-space: nowrap; }
.gp-of { color: var(--site-text-3, #949494); font-weight: 600; }

.gp-chip, .gp-reset, .gp-go {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 9px 14px; border-radius: 10px;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); background: transparent;
    font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--site-text-2, #b0b0b0); cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.gp-chip:hover, .gp-reset:hover, .gp-go:hover { background: var(--site-surface-2, #2a2a2a); color: var(--site-text, #f0f0f0); }
.gp-chip:active, .gp-reset:active, .gp-go:active { transform: translateY(1px); }
.gp-chip:focus-visible, .gp-reset:focus-visible, .gp-go:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.gp-chip[aria-pressed="true"] { border-color: var(--site-accent, #7aa5f2); background: rgba(122, 165, 242, .1); color: var(--site-text, #f0f0f0); }
.gp-chip:disabled, .gp-go:disabled { opacity: .45; cursor: default; }
.gp-chip:disabled:hover, .gp-go:disabled:hover { background: transparent; color: var(--site-text-2, #b0b0b0); }
.gp-chip:disabled:active, .gp-go:disabled:active { transform: none; }
html:not(.gp-js) .gp-reset { visibility: hidden; }

/* 상태 문구: 기본은 숨기고 상태에 맞는 줄만. */
.gp-status { margin-top: 14px; }
.gp-msg { display: none; margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0); }
.gp-msg--warn { color: var(--bn-warn); }
.gp-noscript { display: block; margin-top: 14px; }
.gp[data-state="idle"] [data-for="idle"],
.gp[data-state="active"] [data-for="active"],
.gp[data-state="lost"] [data-for="lost"],
.gp[data-state="nosupport"] [data-for="nosupport"] { display: flex; gap: 10px; }
.gp-msg > .bi { flex: none; font-size: 1.25rem; color: var(--site-text, #f0f0f0); }

.gp-name { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .8125rem; color: var(--site-text-3, #949494); }
.gp[data-state="idle"] .gp-name, .gp[data-state="nosupport"] .gp-name { display: none; }
.gp-name code { min-width: 0; overflow-wrap: anywhere; font-size: .8125rem; color: var(--site-text-2, #b0b0b0); background: none; padding: 0; }
.gp-map { padding: 2px 8px; border-radius: 6px; background: var(--site-surface-2, #2a2a2a); color: var(--site-text-2, #b0b0b0); }
.gp-map--raw { color: var(--bn-warn); }
.gp-raw-only { display: none; }
.gp[data-raw] .gp-raw-only { display: inline; }
.gp[data-raw] .gp-std-only { display: none; }

/* ── 패드 그림(자체 디자인 실루엣) ─────────────────────────────── */
.gp-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 14px auto 0; overflow: visible; }
.gp-body { fill: var(--site-surface-2, #2a2a2a); stroke: var(--site-line-2, rgba(255, 255, 255, .14)); stroke-width: 1.5; }
.gp-part, .gp-trig-well, .gp-dpad-mid { fill: var(--site-bg-raise, #1e1e1e); stroke: var(--site-line-2, rgba(255, 255, 255, .14)); stroke-width: 1; transition: fill .1s, stroke .1s; }
.gp-dpad-mid { stroke: none; }
.gp-well { fill: var(--site-bg, #1a1a1a); stroke: var(--site-line, rgba(255, 255, 255, .08)); }
.gp-part.is-done, .gp-trig.is-done .gp-trig-well { stroke: var(--bn-gpu); }
.gp-part.is-down { fill: var(--bn-gpu); stroke: var(--bn-gpu); }
.gp-trig-fill {
    fill: var(--bn-gpu); stroke: none;
    transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--v, 0));
}
.gp[data-raw] .gp-svg { opacity: .35; }
.gp[data-state="idle"] .gp-svg, .gp[data-state="lost"] .gp-svg { opacity: .6; }

/* ── 버튼 목록 ─────────────────────────────────────────────────── */
.gp-btns { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.gp-btns li {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 34px; padding: 6px 10px; border-radius: 10px;
    background: var(--site-bg-raise, #1e1e1e); border: 1px solid transparent;
    font-size: .8125rem; line-height: 1.3; color: var(--site-text-3, #949494);
    transition: background-color .1s, border-color .1s, color .1s;
}
.gp-btns li.is-done { border-color: var(--site-line-2, rgba(255, 255, 255, .14)); color: var(--site-text, #f0f0f0); }
.gp-btns li.is-done::before { content: ""; order: 2; width: 6px; height: 6px; border-radius: 50%; background: var(--bn-gpu); flex: none; }
.gp-btns li.is-down { background: var(--bn-gpu); border-color: var(--bn-gpu); color: var(--site-bg, #1a1a1a); }
.gp-btns li.is-down::before { background: var(--site-bg, #1a1a1a); }
.gp-bval { order: 3; font-size: .75rem; font-weight: 700; }
.gp[data-raw] .gp-btns { display: none; }

/* ── 원시 값(표준 배열이 아닐 때만) ────────────────────────────── */
.gp-raw { display: none; margin-top: 16px; }
.gp[data-raw] .gp-raw { display: block; }
.gp-raw h3 { margin: 0 0 8px; font-size: .875rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.gp-raw-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.gp-raw-list--axes { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gp-raw-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px;
    background: var(--site-bg-raise, #1e1e1e); font-size: .8125rem; color: var(--site-text-2, #b0b0b0);
}
.gp-raw-list li.is-down { background: var(--bn-gpu); color: var(--site-bg, #1a1a1a); }
.gp-raw-k b { font-weight: 700; }
.gp-raw-v { font-weight: 700; }
.gp-raw-bar { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--site-line, rgba(255, 255, 255, .08)); overflow: hidden; }
.gp-raw-bar i { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; background: var(--bn-gpu); transform-origin: 0 50%; transform: scaleX(0); }

/* ── 스틱 ─────────────────────────────────────────────────────── */
.gp-sticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gp-stick { margin: 0; min-width: 0; }
.gp-canvas { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 14px; background: var(--site-bg-raise, #1e1e1e); }
.gp-stick figcaption { margin-top: 8px; font-size: .875rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.gp-xy { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .8125rem; }
.gp-xy > div { display: contents; }
.gp-xy dt { color: var(--site-text-3, #949494); }
.gp-xy dd { margin: 0; text-align: right; font-weight: 700; color: var(--site-text, #f0f0f0); white-space: nowrap; }
.gp-legend { margin: -8px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--site-text-3, #949494); }

/* ── 쏠림 재기 ─────────────────────────────────────────────────── */
.gp-drift, .gp-vib { border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); padding-top: 18px; }
.gp-drift h3, .gp-vib h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--site-text, #f0f0f0); }
.gp-drift-body { margin: 6px 0 12px; font-size: .875rem; line-height: 1.55; color: var(--site-text-2, #b0b0b0); }
.gp-go { border-color: var(--site-accent, #7aa5f2); color: var(--site-text, #f0f0f0); }
.gp-go-busy { display: none; }
.gp[data-drift="measuring"] .gp-go-idle { display: none; }
.gp[data-drift="measuring"] .gp-go-busy { display: inline; }
.gp-wait { margin: 8px 0 0; font-size: .8125rem; color: var(--site-text-3, #949494); }
.gp[data-state="active"] .gp-wait { display: none; }
.gp-prog { display: none; margin-top: 12px; height: 4px; border-radius: 2px; background: var(--site-bg-raise, #1e1e1e); overflow: hidden; }
.gp-prog span { display: block; height: 100%; background: var(--bn-gpu); transform-origin: left; transform: scaleX(var(--gp-prog, 0)); }
.gp[data-drift="measuring"] .gp-prog { display: block; }
.gp-drift-out { display: none; margin-top: 12px; }
.gp[data-drift="done"] .gp-drift-out { display: grid; gap: 10px; }
.gp-drift-row { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .875rem; line-height: 1.5; }
.gp-drift-k { color: var(--site-text-3, #949494); }
.gp-drift-row output { font-size: 1.125rem; font-weight: 800; color: var(--site-text, #f0f0f0); }
.gp-verdict { display: none; flex-basis: 100%; color: var(--site-text-2, #b0b0b0); }
.gp-drift-row[data-verdict="in"] [data-for="in"],
.gp-drift-row[data-verdict="out"] [data-for="out"] { display: block; }
.gp-verdict--out { color: var(--bn-warn); }
.gp-drift-row[data-verdict="out"] output { color: var(--bn-warn); }

/* ── 진동 ─────────────────────────────────────────────────────── */
.gp-vib-btns { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.gp-vib-none { display: none; margin: 10px 0 0; font-size: .8125rem; line-height: 1.5; }
.gp[data-state="active"][data-novib] .gp-vib-none { display: block; }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .gp-stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .gp-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gp-sticks { gap: 10px; }
    .gp-xy { font-size: .75rem; gap: 2px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .gp-chip, .gp-reset, .gp-go, .gp-part, .gp-trig-well, .gp-btns li { transition: none !important; }
}