/* 모니터 테스트(/tools/monitor-test/ — 불량화소·잔상) 전용.
 * tools-bottleneck.css · tools-sensitivity.css · tools-measure.css 다음에 링크된다 — 토큰(--site-*, --bn-*)·.bn·.bn-doc·
 * .gs-cta·.sv-links·.mt-stats 를 그대로 쓴다. 칩은 프레임 드랍 진단의 .lg-chip 모양을 여기서 같은 값으로 이어 쓴다.
 * 구조: 제목 → 불량화소 칸(설명 | 색 순서) → 전체 화면 단색(숨김) → 잔상 칸(레인·조작·읽은 값) → 설명.
 * 모서리: 칸 20px · 레인·색 견본 16px · 칩·버튼 10px(PC 부품 진단과 같은 단계).
 * 검사 색(#000·#fff·원색·회색)은 서버 tools/monitor.py 값이 인라인으로 들어온다 — 테마 토큰이 아니라 검사용 순수 값이다.
 * ⚠ prefers-reduced-motion 은 CSS 전환만 끈다. 검사(도형 움직임 포함)는 막지 않는다.
 */

/* ── 제목 아래 바로가기 ───────────────────────────────────────── */
.mn-jump { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.mn-jump a {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); color: var(--site-text, #f0f0f0);
    font-weight: 600; font-size: .9375rem; text-decoration: none; transition: background-color .15s;
}
.mn-jump a:hover { background: var(--site-surface-2, #2a2a2a); }
.mn-jump a:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }

/* ── 공통 칸 ─────────────────────────────────────────────────── */
.mn-panel {
    margin-top: 28px; padding: clamp(22px, 3vw, 32px); border-radius: 20px;
    background: var(--site-surface, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    scroll-margin-top: calc(var(--site-hdr-h, 64px) + 16px);
}
.mn-panel h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; }
.mn-panel h2 + p { margin-top: 10px !important; color: var(--site-text-2, #b0b0b0); line-height: 1.7; max-width: 38em; }
.mn-caution {
    margin-top: 16px !important; display: flex; gap: 10px; align-items: flex-start;
    font-size: .875rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0); max-width: 40em;
}
.mn-caution .bi { color: var(--bn-warn); margin-top: 3px; }
.mn-warn { color: var(--bn-warn); }

/* ── 불량화소 ─────────────────────────────────────────────────── */
.mn-pixel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.mn-actions { margin-top: 22px; }
.mn-start { display: inline-flex; align-items: center; gap: 10px; }
.mn-keys { margin-top: 12px !important; font-size: .8125rem; line-height: 1.6; color: var(--site-text-3, #949494); }
html:not(.mn-js) .mn-start, html:not(.mn-js) .mn-keys { display: none; }

.mn-sub { font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
.mn-swatches { margin-top: 10px !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: mn; }
.mn-swatch {
    width: 100%; display: grid; gap: 4px; padding: 10px 10px 12px; border-radius: 16px; text-align: left;
    border: 1px solid var(--site-line, rgba(255, 255, 255, .08)); background: var(--site-bg-raise, #1e1e1e);
    color: var(--site-text, #f0f0f0); font: inherit; cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.mn-swatch:hover { background: var(--site-surface-2, #2a2a2a); border-color: var(--site-line-2, rgba(255, 255, 255, .14)); }
.mn-swatch:active { transform: translateY(1px) scale(.99); }
.mn-swatch:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
html:not(.mn-js) .mn-swatch { cursor: default; pointer-events: none; }
.mn-chip {
    display: block; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: 10px; background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.mn-swatch-name { font-weight: 700; font-size: .9375rem; }
.mn-swatch-name::before { counter-increment: mn; content: counter(mn) ". "; font-family: var(--bn-mono); color: var(--site-text-3, #949494); }
.mn-swatch-look { font-size: .8125rem; line-height: 1.5; color: var(--site-text-2, #b0b0b0); }

/* 전체 화면 단색. 전체 화면이 안 되는 브라우저에서는 화면을 덮는 칸(최상위 — 토스트·팝업보다 위)으로 쓴다.
 * body 바로 아래로 옮겨지므로 transform 조상 문제가 없다. 안내는 잠깐 뒤 숨고 커서도 숨긴다(화소로 오인하지 않게). */
.mn-full {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100dvh; z-index: 10002;
    background: #000; cursor: pointer; outline: none;
    -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.mn-full[hidden] { display: none !important; }
.mn-full[data-idle] { cursor: none; }
html.mn-locked { overflow: hidden; }
.mn-hint {
    position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 32px); display: grid; gap: 8px; justify-items: center; padding: 14px 16px;
    border-radius: 16px; background: rgba(24, 24, 24, .92); color: #f0f0f0; text-align: center; cursor: default;
    font-family: var(--bn-font); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
    transition: opacity .3s;
}
.mn-full[data-idle] .mn-hint { opacity: 0; pointer-events: none; }
.mn-hint-now { display: flex; gap: 10px; align-items: baseline; font-weight: 700; }
.mn-hint-now .bn-mono { font-weight: 500; color: #b0b0b0; font-size: .875rem; }
.mn-hint-keys { font-size: .8125rem; line-height: 1.5; color: #b0b0b0; }
.mn-hint-btns { display: flex; gap: 8px; }
.mn-hint-btns button {
    width: 44px; height: 40px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
    background: transparent; color: #f0f0f0; font-size: 1rem; cursor: pointer;
}
.mn-hint-btns button:hover { background: rgba(255, 255, 255, .08); }
.mn-hint-btns button:focus-visible { outline: 2px solid #a8c6ff; outline-offset: 2px; }

/* ── 잔상 ────────────────────────────────────────────────────── */
.mn-track-wrap { position: relative; margin-top: 22px; }
.mn-track {
    position: relative; height: clamp(170px, 20vw, 240px); border-radius: 16px; overflow: hidden; cursor: pointer;
    --mn-bg: var(--site-bg-raise, #1e1e1e); --mn-tick: rgba(255, 255, 255, .06);
    --mn-obj: var(--bn-gpu); --mn-bar: #141414;
    background: repeating-linear-gradient(90deg, transparent 0 79px, var(--mn-tick) 79px 80px), var(--mn-bg);
}
/* 배경: 어두운(사이트 면) · 회색(중간 밝기) · 밝은. 배경에 따라 도형 색을 바꿔 경계 대비를 유지한다. */
.mn-ghost[data-bg="gray"] .mn-track { --mn-bg: #808080; --mn-tick: rgba(0, 0, 0, .12); --mn-obj: #fafafa; --mn-bar: #141414; }
.mn-ghost[data-bg="light"] .mn-track { --mn-bg: #f2f2f2; --mn-tick: rgba(0, 0, 0, .08); --mn-obj: #141414; --mn-bar: #fafafa; }
.mn-obj {
    position: absolute; left: 0; top: 50%; width: 88px; height: 88px; border-radius: 16px;
    display: flex; justify-content: space-evenly; align-items: stretch; padding: 14px 0;
    background: var(--mn-obj); will-change: transform; transform: translate3d(0, -50%, 0);
}
.mn-obj span { width: 8px; border-radius: 2px; background: var(--mn-bar); }
.mn-track-full {
    position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(24, 24, 24, .72); color: #f0f0f0; cursor: pointer;
}
.mn-track-full:hover { background: rgba(24, 24, 24, .9); }
/* 레인 위 버튼의 초점 표시: 어두운 안쪽 링 + 밝은 바깥 링. 레인 배경이 어둡든(밝은 링) 밝든·회색이든(어두운 링)
 * 한쪽이 3:1 이상 대비를 낸다(WCAG 1.4.11). 바깥 한 겹 링만 쓰면 밝은 배경에서 약 1.5:1 이었다. */
.mn-track-full:focus-visible, .mn-play--fs:focus-visible {
    outline: 2px solid #141414; outline-offset: 0; box-shadow: 0 0 0 4px #a8c6ff;
}
html:not(.mn-js) .mn-track-full { display: none; }
/* 레인 안 시작·멈춤: 레인이 전체 화면일 때만 보인다(밖의 '시작' 버튼은 전체 화면 밖이라 키보드로 닿지 않는다). */
.mn-track-wrap .mn-play--fs {   /* 아래 .mn-play 규칙(높이·표시)보다 먼저 쓰이게 한 단계 구체적으로 */
    display: none; position: absolute; top: 10px; left: 10px; height: 40px; min-width: 0; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(24, 24, 24, .72); color: #f0f0f0;
    font: 600 .9375rem/1 var(--bn-font); cursor: pointer;
}
.mn-track-wrap .mn-play--fs:hover { background: rgba(24, 24, 24, .9); }
.mn-track-wrap:fullscreen .mn-play--fs { display: inline-flex; align-items: center; }
.mn-track-wrap:-webkit-full-screen .mn-play--fs { display: inline-flex; align-items: center; }
.mn-track-wrap:fullscreen { margin: 0; background: #000; }
.mn-track-wrap:fullscreen .mn-track { height: 100%; border-radius: 0; }
.mn-track-wrap:-webkit-full-screen { margin: 0; background: #000; width: 100%; height: 100%; }
.mn-track-wrap:-webkit-full-screen .mn-track { height: 100%; border-radius: 0; }

.mn-ghost-bar { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; }
.mn-play { display: inline-flex; align-items: center; height: 48px; min-width: 120px; justify-content: center; }
.mn-play > span { display: inline-flex; align-items: center; gap: 8px; }
.mn-play .mn-play-off, .mn-ghost[data-state="running"] .mn-play .mn-play-on { display: none; }
.mn-ghost[data-state="running"] .mn-play .mn-play-off { display: inline-flex; }
html:not(.mn-js) .mn-play, html:not(.mn-js) .mn-seg { display: none; }
.mn-seg { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mn-seg legend { float: left; width: 100%; margin-bottom: 6px; padding: 0; font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
/* 칩 모양(프레임 드랍 진단 .lg-chip 과 같은 값 — 그 CSS 를 이 페이지에 싣지 않으므로 여기 둔다) */
.mn-seg .lg-chip { position: relative; display: inline-flex; cursor: pointer; }
.mn-seg .lg-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.mn-seg .lg-chip > span {
    display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 10px; white-space: nowrap;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); color: var(--site-text-2, #b0b0b0);
    font-size: .875rem; font-weight: 600; transition: background-color .15s, color .15s, border-color .15s;
}
.mn-seg .lg-chip:hover > span { background: var(--site-surface-3, #333); color: var(--site-text, #f0f0f0); }
.mn-seg .lg-chip input:checked + span { border-color: var(--site-accent, #7aa5f2); background: rgba(122, 165, 242, .1); color: var(--site-text, #f0f0f0); }
.mn-seg .lg-chip input:focus-visible + span { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }

.mn-stats { margin-top: 20px !important; max-width: 420px; }
.mn-approx { display: none; font-size: .875rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.mn-ghost[data-measured]:not([data-match]) .mn-approx { display: inline; }
.mn-msg { display: none; margin-top: 12px !important; font-size: .9375rem; line-height: 1.6; }
.mn-msg a { color: var(--site-text, #f0f0f0); font-weight: 600; text-underline-offset: 3px; }
.mn-ghost[data-low] [data-for="low"],
.mn-ghost[data-failed] [data-for="failed"],
.mn-ghost[data-state="hidden"] [data-for="hidden"] { display: block; }

/* ── 설명: 불량화소 종류 ─────────────────────────────────────── */
.mn-kinds { margin: 18px 0 0; display: grid; gap: 10px; }
.mn-kinds > div {
    display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 6px 18px;
    padding: 14px 16px; border-radius: 16px; background: var(--site-surface, #232323);
}
.mn-kinds dt { font-weight: 700; color: var(--site-text, #f0f0f0); }
.mn-kinds dd { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--site-text-2, #b0b0b0); }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .mn-pixel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .mn-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mn-kinds > div { grid-template-columns: minmax(0, 1fr); }
    .mn-obj { width: 72px; height: 72px; padding: 12px 0; }
    .mn-hint-keys { display: none; }    /* 휴대폰: 키 안내 대신 버튼만 */
}
@media (prefers-reduced-motion: reduce) {
    .mn-jump a, .mn-swatch, .mn-hint, .mn-seg .lg-chip > span { transition: none !important; }
}

/* 도구 목록 카드 아이콘 색(tools-sensitivity.css 의 .tl-icon 규칙에 이어서). */
.tl-icon--monitor { background: var(--site-text, #f0f0f0); color: var(--site-bg, #1a1a1a); }

/* 본문 앵커(2026-11-08 SEO 보강). 근거 자료 목록은 화면에서 뺐다(오너 지시 2026-11-08). */
#mn-howto, #mn-bleed { scroll-margin-top: calc(var(--site-hdr-h, 64px) + 16px); }