/* 에임 연습(/tools/aim-trainer/) 전용.
 * tools-bottleneck.css · tools-sensitivity.css · tools-measure.css 다음에 링크된다 — 토큰(--site-*, --bn-*)과
 * .bn·.bn-doc·.gs-cta·.sv-links·.mt-label·.mt-unit·.mt-stats·.mt-again·.mt-steps·.mt-pad-meter·.my-best* 를 그대로 쓴다.
 * 구조: 제목 → 모드·시간 고르기 → 무대(경기장 | 점수 칸) → 설명.
 * 어떤 문구를 보일지는 루트 .aim 의 data-state(idle·countdown·running·done·stopped)·data-mode(flick·track·multi)로 고른다.
 * 캔버스 색은 아래 --aim-* 토큰을 tools-aim.js 가 읽어 쓴다(색 값을 JS·여기에 직접 적지 않는다 — 사이트 토큰만).
 * 모서리: 무대 20px · 칸 12~16px · 칩·버튼 10px(다른 측정 도구와 같은 단계).
 * ⚠ 광과민성: 명중·빗나감 표시는 캔버스 안 표적 자리의 작은 고리·×뿐. 경기장 배경을 바꾸는 효과를 넣지 말 것.
 * ⚠ prefers-reduced-motion 은 CSS 전환만 끈다. 게임은 막지 않는다.
 */
.aim {
    --aim-target: var(--site-accent);
    --aim-core: var(--site-bg);
    --aim-grid: var(--site-line);
    --aim-hit: var(--site-success);
    --aim-miss: var(--site-danger);
    --aim-on: var(--site-success);
}

/* ── 모드·시간 고르기 ─────────────────────────────────────────── */
.aim-opts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.aim-opt { margin: 0; padding: 0; border: 0; min-width: 0; }
.aim-opt legend { padding: 0; margin-bottom: 8px; font-size: .8125rem; font-weight: 600; color: var(--site-text-3); }
.aim-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.aim-chip { position: relative; display: inline-flex; cursor: pointer; }
.aim-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aim-chip > span {
    display: inline-flex; align-items: baseline; gap: 1px; min-height: 40px; padding: 10px 14px; border-radius: 10px;
    background: var(--site-surface-2); border: 1px solid transparent;
    font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--site-text-2);
    transition: background-color .15s, border-color .15s, color .15s;
}
.aim-chip:hover > span { background: var(--site-surface-3); color: var(--site-text); }
.aim-chip input:checked + span {
    border-color: var(--site-accent); color: var(--site-text);
    background: color-mix(in srgb, var(--site-accent) 10%, transparent);
}
.aim-chip input:focus-visible + span { outline: 2px solid var(--site-focus); outline-offset: 2px; }
.aim-chip:active > span { transform: translateY(1px); }
.aim-chip input:disabled + span { opacity: .45; cursor: default; }
.aim-chip input:disabled:not(:checked) + span:hover { background: var(--site-surface-2); color: var(--site-text-2); }

/* ── 무대 ─────────────────────────────────────────────────────── */
.aim-stage {
    margin-top: 16px;
    display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px; align-items: start;
}

/* 경기장: 논리 좌표 5:3(aim.ARENA_W × ARENA_H)과 같은 비율. */
.aim-arena {
    position: relative; aspect-ratio: 5 / 3; border-radius: 20px; overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--site-accent) 7%, transparent), transparent 64%),
        var(--site-bg-raise);
    border: 1px solid var(--site-line-2);
    cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* 터치 스크롤·확대는 진행 중에만 막는다(그 밖에는 경기장 위에서도 페이지를 쓸어 넘길 수 있다). */
.aim[data-state="countdown"] .aim-arena, .aim[data-state="running"] .aim-arena { touch-action: none; }
.aim-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.aim-hud {
    position: absolute; left: 16px; right: 16px; top: 12px; display: flex; justify-content: space-between; gap: 12px;
    font-size: .8125rem; font-weight: 600; color: var(--site-text-2); pointer-events: none;
}
.aim-hud > span { display: inline-flex; align-items: baseline; gap: 8px; }
.aim-hud .bn-mono { font-size: 1.0625rem; font-weight: 700; color: var(--site-text); }
.aim-hud-k { color: var(--site-text-3); }

/* 시작 덮개: 대기·끝·중단일 때만. */
.aim-cover {
    position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 14px; padding: 20px;
    text-align: center; background: color-mix(in srgb, var(--site-bg) 70%, transparent);
}
.aim[data-state="idle"] .aim-cover, .aim[data-state="done"] .aim-cover, .aim[data-state="stopped"] .aim-cover { display: grid; }
.aim-cover-t { max-width: 26em; font-size: 1rem; font-weight: 600; line-height: 1.55; color: var(--site-text); text-wrap: pretty; }
.aim-cover-t > span { display: none; }
.aim[data-mode="flick"] [data-for-mode="flick"],
.aim[data-mode="track"] [data-for-mode="track"],
.aim[data-mode="multi"] [data-for-mode="multi"] { display: inline; }
.aim-start { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 9rem; }
.aim-start [data-label] { display: none; }
.aim[data-state="idle"] .aim-start [data-label="start"],
.aim[data-state="done"] .aim-start [data-label="again"],
.aim[data-state="stopped"] .aim-start [data-label="again"] { display: inline; }
.aim-cover-sub { font-size: .8125rem; color: var(--site-text-3); }
html:not(.aim-js) .aim-cover { display: none; }

.aim-count {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; pointer-events: none;
    font-size: clamp(3rem, 2rem + 5vw, 5.5rem); font-weight: 800; line-height: 1; color: var(--site-text);
}
.aim:not([data-state="countdown"]) .aim-count { display: none; }
.aim-meter span { transform: scaleX(var(--aim-progress, 0)); }
.aim:not([data-state="running"]) .aim-meter { opacity: 0; }

/* ── 점수 칸 ─────────────────────────────────────────────────── */
.aim-read {
    min-width: 0; padding: clamp(22px, 3vw, 28px); border-radius: 20px;
    background: var(--site-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--site-text) 4%, transparent);
    display: flex; flex-direction: column; align-items: flex-start;
}
.aim-big {
    margin-top: 6px !important; display: flex; align-items: baseline; gap: 8px;
    font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1;
    color: var(--site-text-3); white-space: nowrap;
}
.aim-big > .bn-mono { font-family: var(--bn-mono); font-weight: 800; }
.aim[data-state="running"] .aim-big, .aim[data-state="done"] .aim-big { color: var(--bn-gpu); }
.aim-live { width: 100%; }
.aim-msg { display: none; margin-top: 14px !important; font-size: .9375rem; line-height: 1.6; color: var(--site-text-2); max-width: 34em; }
.aim-msg--warn { color: var(--bn-warn); }
.aim-noscript { display: block; }
.aim[data-state="idle"] [data-for="idle"],
.aim[data-state="countdown"] [data-for="countdown"],
.aim[data-state="running"] [data-for="running"],
.aim[data-state="done"] [data-for="done"],
.aim[data-state="stopped"] [data-for="stopped"] { display: block; }
.aim-stats { margin-top: 20px !important; width: 100%; }
.aim[data-mode="track"] [data-only="shots"],
.aim:not([data-mode="track"]) [data-only="track"] { display: none; }

/* 중단 버튼: 카운트다운·진행 중에만. tools-measure.css 의 `html:not(.mt-js) .mt-again` 숨김은 이 페이지에 해당하지 않는다(.aim-js). */
html.aim-js .aim .mt-again { visibility: visible; }
html:not(.aim-js) .aim .mt-foot { display: none; }
.aim:not([data-state="countdown"]):not([data-state="running"]) .mt-foot { display: none; }

/* 내 최고 기록: 모드 × 시간 표. 지금 고른 칸만 살짝 밝게. */
.aim-best { width: 100%; }
.aim-best-t { margin-top: 10px; width: 100%; border-collapse: collapse; font-size: .8125rem; }
.aim-best-t th, .aim-best-t td { padding: 7px 6px; text-align: left; vertical-align: top; }
.aim-best-t thead th { font-weight: 500; color: var(--site-text-3); }
.aim-best-t tbody th { font-weight: 600; color: var(--site-text-2); white-space: nowrap; padding-left: 0; }
.aim-best-t tbody tr + tr { border-top: 1px solid var(--site-line); }
.aim-best-t td { border-radius: 8px; }
.aim-best-t td.is-current { background: var(--site-surface-3); }
.aim-best-score { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--site-text); }
.aim-best-detail { display: block; margin-top: 2px; font-size: .75rem; color: var(--site-text-3); white-space: nowrap; }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .aim-stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .aim-arena { border-radius: 16px; }
    .aim-hud { left: 12px; right: 12px; top: 8px; }
    .aim-cover { gap: 10px; padding: 12px; }
    .aim-cover-t { font-size: .875rem; }
    .aim-cover-sub { display: none; }
    .aim-best-detail { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .aim-chip > span { transition: none !important; }
}