/* 모니터 크기 비교 · PPI 계산기(/tools/monitor-size/) 전용.
 * tools-bottleneck.css · tools-sensitivity.css 다음에 링크된다 — 토큰(--site-*, --bn-*)·.bn 블록·.bn-field·.sv-field·
 * .sv-pair·.sv-swap·.sv-err·.sv-table·.bn-doc 을 그대로 쓴다. 색은 토큰만(hex 없음).
 * 구조: 제목 → 입력 패널(A | 바꾸기 | B) → 결과(한 문장 판정 + 같은 축척 그림 | 숫자 표) → 본문.
 * 모서리: 패널 16px · 칸 10px · 결과 20px(감도 변환기와 같은 단계). 색 구분: A = 회색 선, B = 강조색(--bn-gpu) 하나.
 */

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

/* 목록 상자 칸의 펼침 화살표(감도 변환기 .sv-field--game 과 같은 모양) */
.mz-field--sel::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;
}
.mz-field--sel select { padding-right: 36px; }

/* A·B 색 표시(범례·표 머리·패널 제목 공용) */
.mz-key { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; vertical-align: baseline; margin-right: 6px; }
.mz-side > legend .mz-key { margin-right: 0; }
.mz-key--a { background: var(--site-surface-3, #333); box-shadow: inset 0 0 0 2px var(--site-text-2, #b0b0b0); }
.mz-key--b { background: var(--bn-gpu); }

/* ── 결과 ─────────────────────────────────────────────────────── */
.mz-result {
    margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: stretch;
}
.mz-stage, .mz-numbers {
    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);
}
.mz-stage { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
.mz-verdict {
    font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.3;
    color: var(--site-text, #f0f0f0);
}
.mz[data-state="empty"] .mz-verdict { color: var(--site-text-3, #949494); }

/* 같은 축척 그림: 높이를 고정하고 viewBox 를 그 안에 맞춘다(xMidYMax meet) — 32:9 처럼 납작해도, 4:3 처럼 높아도
   가로로 넘치지 않는다. 선 두께는 화면 픽셀 기준(non-scaling-stroke). */
.mz-fig-wrap { min-width: 0; height: clamp(180px, 24vw, 290px); }
.mz-fig { display: block; width: 100%; height: 100%; overflow: hidden; }
.mz-r { stroke-width: 2; }
.mz-r--a { fill: var(--site-surface-3, #333); stroke: var(--site-text-2, #b0b0b0); }
.mz-r--b { fill: transparent; fill: color-mix(in srgb, var(--bn-gpu) 14%, transparent); stroke: var(--bn-gpu); }
.mz-t { font-family: var(--bn-font); font-weight: 750; }
.mz-t--a { fill: var(--site-text-2, #b0b0b0); }
.mz-t--b { fill: var(--bn-gpu); }
.mz-fig.is-empty .mz-r, .mz-fig.is-empty .mz-t { visibility: hidden; }

.mz-legend { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .875rem; color: var(--site-text-2, #b0b0b0); }
.mz-legend li { display: inline-flex; align-items: center; min-width: 0; }
.mz-legend strong { margin-right: 6px; color: var(--site-text, #f0f0f0); }

.mz-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mz-table th, .mz-table td { padding: 10px 6px; text-align: right; vertical-align: top; font-weight: 500; }
.mz-table th:first-child { text-align: left; padding-left: 0; }
.mz-table td:last-child, .mz-table thead th:last-child { padding-right: 0; }
.mz-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)); white-space: nowrap; }
.mz-table tbody tr + tr > * { border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.mz-table tbody th { font-size: .875rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.mz-table td { font-size: .9375rem; color: var(--site-text-3, #949494); white-space: nowrap; }
.mz-table td > .bn-mono { font-size: 1.0625rem; font-weight: 700; color: var(--site-text, #f0f0f0); }
.mz-table td small { display: block; margin-top: 2px; font-size: .75rem; }
.mz-table td small .bn-mono { font-size: inherit; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.mz-table .mz-d { font-weight: 700; color: var(--bn-gpu); }
.mz-note { margin-top: 10px !important; font-size: .8125rem; line-height: 1.55; color: var(--site-text-3, #949494); }

/* ── 본문 ─────────────────────────────────────────────────────── */
.mz-terms { margin: 16px 0 0; max-width: 880px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.mz-terms dt { font-weight: 700; color: var(--site-text, #f0f0f0); }
.mz-terms dd { margin: 4px 0 0; line-height: 1.65; color: var(--site-text-2, #b0b0b0); }
/* 조합 이름 = 계산기에 채우는 버튼(링크처럼 보인다). */
.mz-load {
    padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
    font: inherit; font-weight: 650; color: var(--site-text, #f0f0f0);
    text-decoration: underline; text-decoration-color: var(--site-line-2, rgba(255, 255, 255, .14)); text-underline-offset: 4px;
}
.mz-load:hover { text-decoration-color: currentColor; }
.mz-load:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 4px; }
.mz-ppi-table th small { display: block; margin-top: 2px; font-size: .75rem; font-weight: 500; color: var(--site-text-3, #949494); }
.mz-pair-table, .mz-ppi-table { max-width: 640px; }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .mz-panel { grid-template-columns: minmax(0, 1fr); }
    .mz-swap { justify-self: center; margin: 0; transform: rotate(90deg); }
    .mz-swap:active { transform: rotate(90deg) translateY(1px) scale(.97); }
    .mz-result { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    /* 크기 | 비율 한 줄, 해상도는 이름표(QHD 등)까지 보이게 한 줄 전체 */
    .mz-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mz-row > :last-child { grid-column: 1 / -1; }
    .mz-terms { grid-template-columns: minmax(0, 1fr); }
    .mz-table th, .mz-table td { padding: 9px 4px; }
    .mz-table td > .bn-mono { font-size: .9375rem; }
    .mz-pair-table th, .mz-pair-table td, .mz-ppi-table th, .mz-ppi-table td { padding: 10px 6px; }
    .mz-pair-table td, .mz-ppi-table td { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mz-field--sel::after { transition: none !important; }
}

/* 도구 목록 카드 아이콘(카드 키 msize). 다른 카드와 겹치지 않게 강조색 → 로고 파랑 그라데이션(토큰만). */