/* PC 병목 진단(/tools/bottleneck/) 전용. templates/tools/bottleneck.html 의 extra_head 에서만 링크된다.
 *
 * 색은 base.css 의 --site-* 토큰만 쓴다(괄호 안은 토큰이 없을 때의 같은 값).
 * 구조: 제목 → 한 줄 입력 막대(.bn-bar) → 진단서(.bn-report: 판정 카드 + 점검 카드 열) → 설명(.bn-doc).
 * 대표 연출은 9칸 게이지 하나다. 켜진 칸이 옮겨 가는 전환만 움직인다(JS 가 이전 위치에서 출발시킨다).
 * ⚠ prefers-reduced-motion 은 CSS 전환을 끄는 데만 쓴다(JS 에서 기능을 막지 않는다).
 * ⚠ base.css 의 h1/h2(파랑·가운데·margin)와 .btn 이 새어 들어오므로 .bn 안에서 명시적으로 덮는다.
 */

.page-bneck {
    --bn-warn: var(--site-warning, #f39c12);
    --bn-gpu: var(--site-accent, #7aa5f2);   /* 그래픽카드 쪽 색은 하나: 판정 강조어·켜진 칸·해상도별 판정 */
    --bn-cell: #2f2f2f;
    --bn-cell-mid: #393939;
    --bn-font: "LUT Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
    --bn-mono: ui-monospace, "Cascadia Mono", Consolas, "LUT Sans", monospace;
}
html[lang="ja"] .page-bneck { --bn-font: "LUT CJK JA", "LUT Sans", "Yu Gothic UI", "Meiryo", sans-serif; }
html[lang="zh"] .page-bneck { --bn-font: "LUT CJK ZH", "LUT Sans", "Microsoft YaHei UI", "PingFang SC", sans-serif; }

.bn {
    width: min(100% - 2 * var(--site-gutter, 20px), 1200px);
    margin-inline: auto;
    padding: clamp(36px, 5vw, 64px) 0 clamp(72px, 9vw, 120px);
    font-family: var(--bn-font);
    color: var(--site-text, #f0f0f0);
    line-height: 1.6;
}
html[lang="ko"] .bn { word-break: keep-all; }
.bn ::selection { background: rgba(122, 165, 242, .35); color: var(--site-text, #f0f0f0); }
.bn :is(h1, h2, h3) { margin: 0; color: var(--site-text, #f0f0f0); text-align: left; background: none; -webkit-text-fill-color: currentColor; }
.bn p { margin: 0; }
.bn ul, .bn ol { margin: 0; padding: 0; list-style: none; }
.bn-mono { font-family: var(--bn-mono); font-variant-numeric: tabular-nums; }

/* ── 제목 ───────────────────────────────────────────────────────── */
.bn-head h1 { font-size: clamp(2rem, 1.35rem + 2.2vw, 2.875rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
.bn-lead { margin-top: 14px; font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); color: var(--site-text-2, #b0b0b0); text-wrap: pretty; }
/* 제휴 고지(쿠팡 '반드시 기재' 문구). 결과 조각 맨 앞 전체 폭 + 링크 카드 안 두 곳. 본문과 다른 색으로. */

/* ── 로그인 말풍선(상단 바 '로그인' 아래, Discord 스타일) ───────────
 * 브랜드 파랑 면 + 흰 글씨 + 위쪽 꼬리. 상단 바가 숨는 폭(base.css .hdr-right 가 사라지는 구간)에서는 함께 숨는다. */
.hdr-login { position: relative; display: inline-flex; }
.bn-hint {
    position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5; width: 296px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: start;
    padding: 12px 12px 12px 14px; border-radius: 10px;
    background: var(--site-brand, #0057d1); color: #fff;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .75);
    font: 500 .8125rem/1.5 var(--bn-font); text-align: left; white-space: normal; word-break: keep-all;
    transform: translateX(-50%); animation: bn-hint-in .28s cubic-bezier(.2, .8, .2, 1) both;
}
.bn-hint[hidden] { display: none !important; }
.bn-hint::before {          /* 꼬리 */
    content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
    background: inherit; border-radius: 2px; transform: rotate(45deg);
}
.bn-hint-text { grid-column: 1; }
.bn-hint-cta { grid-column: 1; justify-self: start; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bn-hint-cta:focus-visible, .bn-hint-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.bn-hint-x {
    grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 24px; height: 24px; margin: -2px -2px 0 0;
    border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, .85); cursor: pointer;
    font-size: .75rem; transition: background-color .15s, color .15s;
}
.bn-hint-x:hover { background: rgba(255, 255, 255, .16); color: #fff; }
@keyframes bn-hint-in { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translateX(-50%); } }

/* ── 입력 막대 ─────────────────────────────────────────────────── */
.bn-bar {
    margin-top: 28px;
    display: grid;
    /* 10칸: 1행 CPU 3 · GPU 3 · 해상도 2 · 주사율 2 / 2행 램 2 · 플레이하는 게임 6 · 초기화+진단 2 */
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    background: var(--site-surface, #232323);
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
}
.bn-field { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.bn-field--cpu, .bn-field--gpu { grid-column: span 3; }
.bn-field--res, .bn-field--hz, .bn-field--ram, .bn-actions { grid-column: span 2; }
/* 진단하기 + 왼쪽 초기화(기호 하나, 같은 높이의 정사각형). */
.bn-actions { display: flex; gap: 8px; min-width: 0; }
.bn-actions .bn-go { flex: 1 1 auto; min-width: 0; }
.bn-reset {
    display: none; flex: 0 0 58px; height: 58px; place-items: center; padding: 0; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); background: var(--site-bg-raise, #1e1e1e);
    color: var(--site-text-2, #b0b0b0); font-size: 1.25rem; transition: background-color .15s, color .15s;
}
html.bn-js .bn-reset { display: grid; }
.bn-reset:hover { background: var(--site-surface-2, #2a2a2a); color: var(--site-text, #f0f0f0); }
.bn-reset:hover .bi { transform: rotate(-60deg); }
.bn-reset .bi { transition: transform .25s ease; }
.bn-reset:active { transform: translateY(1px) scale(.97); }
.bn-reset:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.bn-field--title { grid-column: span 6; }

/* 안내 줄: 앱 PC 정보로 채움(서버) · 그래픽카드 자동 인식(JS). */
.bn-prefill { margin-top: 10px; font-size: .875rem; line-height: 1.5; color: var(--site-text-2, #b0b0b0); }
.bn-field > label, .bn-field > legend {
    position: absolute; left: 14px; top: 9px; z-index: 1;
    padding: 0; font-size: .75rem; font-weight: 500; color: var(--site-text-3, #949494); pointer-events: none;
}
.bn-field select {
    appearance: none; -webkit-appearance: none;
    width: 100%; height: 58px; padding: 24px 36px 8px 14px;
    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); text-overflow: ellipsis; cursor: pointer;
    transition: border-color .18s, background-color .18s;
}
.bn-field select option, .bn-field select optgroup { background: #232323; color: #f0f0f0; }
.bn-field--cpu::after, .bn-field--gpu::after, .bn-field--res::after, .bn-field--hz::after, .bn-field--ram::after, .bn-field--title::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 select:hover { background-color: var(--site-surface-3, #333); }
.bn-field select:focus-visible { outline: none; border-color: var(--site-focus, #a8c6ff); }

/* ── 드롭다운(JS 가 select 위에 얹는 버튼 + 목록 상자) ─────────────
 * 평평한 면, 1px 선, 12px 이하 모서리. 그림자는 목록이 결과 위로 떠 있다는 것만 알릴 정도로. */
.bn-field select.bn-native {
    position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important;
    padding: 0 !important; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.bn-combo {
    display: flex; align-items: baseline; gap: 8px; width: 100%; height: 58px; padding: 24px 36px 8px 14px;
    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); text-align: left; cursor: pointer;
    transition: border-color .18s, background-color .18s;
}
.bn-combo:hover { background-color: var(--site-surface-3, #333); }
.bn-combo:focus-visible, .bn-field.is-open .bn-combo { outline: none; border-color: var(--site-focus, #a8c6ff); }
.bn-combo-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-combo.is-placeholder .bn-combo-v { font-weight: 500; color: var(--site-text-3, #949494); }
.bn-combo-tag { flex: none; font-size: .75rem; font-weight: 500; color: var(--site-text-3, #949494); }
.bn-combo-tag:empty { display: none; }
.bn-field.is-open { z-index: 40; }
.bn-field.is-open::after { transform: translateY(-20%) rotate(-135deg); }
.bn-field.is-invalid .bn-combo { border-color: var(--site-danger, #ff6b5b); }

.bn-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
    width: 100%; min-width: 260px; padding: 6px;
    border-radius: 12px; background: var(--site-surface, #232323);
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
}
.bn-field--title .bn-pop, .bn-field--hz .bn-pop { left: auto; right: 0; }
.bn-pop[hidden] { display: none !important; }
.bn-pop-q {
    display: block; width: 100%; height: 40px; margin-bottom: 4px; padding: 0 12px;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); border-radius: 8px;
    background: var(--site-surface-2, #2a2a2a); color: var(--site-text, #f0f0f0);
    font: 500 .9375rem/1 var(--bn-font);
}
.bn-pop-q::placeholder { color: var(--site-text-3, #949494); }
.bn-pop-q:focus-visible { outline: none; border-color: var(--site-focus, #a8c6ff); }
.bn-pop-list {
    max-height: min(340px, 52vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px;
    /* 스크롤바: 트랙은 투명, 손잡이는 선 색 — 목록 상자의 평평한 면에 묻히게. */
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.bn-pop-list:hover { scrollbar-color: rgba(255, 255, 255, .28) transparent; }
@supports not (scrollbar-color: red transparent) {
    .bn-pop-list::-webkit-scrollbar { width: 8px; }
    .bn-pop-list::-webkit-scrollbar-track { background: transparent; }
    .bn-pop-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: rgba(255, 255, 255, .16) padding-box; }
    .bn-pop-list::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .28); }
}
.bn-pop-list:focus-visible { outline: none; }
.bn-pop-group {
    position: sticky; top: 0; z-index: 1; padding: 10px 10px 4px;
    background: var(--site-surface, #232323);
    font-size: .75rem; font-weight: 600; color: var(--site-text-3, #949494);
}
.bn-pop-opt {
    position: relative; display: flex; align-items: baseline; gap: 8px;
    padding: 9px 30px 9px 10px; border-radius: 8px;
    font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--site-text-2, #b0b0b0); cursor: pointer;
}
.bn-pop-opt.is-active { background: var(--site-surface-3, #333); color: var(--site-text, #f0f0f0); box-shadow: inset 0 0 0 1px var(--site-text-3, #949494); }   /* 테두리: 배경 차이만으로는 1.24:1(키보드 활성 항목, WCAG 1.4.11) */
.bn-pop-opt[aria-selected="true"] { color: var(--site-accent, #7aa5f2); }
.bn-pop-opt[aria-selected="true"]::after {
    content: ""; position: absolute; right: 13px; top: 50%; width: 4px; height: 9px; margin-top: -7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.bn-pop-opt[aria-disabled="true"] { cursor: default; color: var(--site-text-3, #949494); }
.bn-pop-name { min-width: 0; overflow-wrap: anywhere; }
/* 게임 아이콘(20px, 원본 40px). 아이콘이 없으면 게임패드 기호. */
.bn-ico { flex: none; width: 20px; height: 20px; border-radius: 5px; object-fit: cover; align-self: center; }
.bn-ico--none { display: inline-grid; place-items: center; font-size: 15px; color: var(--site-text-3, #949494); background: var(--site-surface-3, #333); }
.bn-combo-ico { display: inline-flex; align-self: center; }
.bn-combo-ico:empty { display: none; }
.bn-pop-opt .bn-ico { margin-right: 2px; }
.bn-pop-opt:has(.bn-ico) { align-items: center; }
.bn-pop-sub { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
.bn-pop-tag { flex: none; margin-left: auto; font-size: .75rem; font-weight: 500; color: var(--site-text-3, #949494); }
/* 맨 위 '자동 인식'(그래픽카드) · CPU 확인 안내 — 목록과 선 하나로 나눈다. */
.bn-pop-auto { margin-bottom: 4px; }
.bn-pop-auto .bn-pop-name::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--site-accent, #7aa5f2); vertical-align: middle; }
.bn-pop-auto[aria-disabled="true"] .bn-pop-name::before { background: var(--site-text-3, #949494); }
.bn-pop-note { margin: 2px 4px 6px; padding: 9px 10px; border-radius: 8px; background: var(--site-bg-raise, #1e1e1e); font-size: .8125rem; line-height: 1.5; color: var(--site-text-3, #949494); }
.bn-pop-empty { padding: 14px 10px; font-size: .875rem; color: var(--site-text-3, #949494); }
.bn-pop-empty[hidden] { display: none; }


.bn-go {
    height: 58px; padding: 0 26px; border: 0; border-radius: 10px;
    background: var(--site-brand, #0057d1); color: #fff;
    font: 700 1rem/1 var(--bn-font); white-space: nowrap; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 28px -14px rgba(0, 0, 0, .8);
    transition: background-color .18s, transform .18s;
}
.bn-go:hover { background: var(--site-brand-hover, #0a63e6); }
.bn-go:active { background: var(--site-brand-press, #004bb5); transform: translateY(1px) scale(.985); }
.bn-go:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }

/* ── 진단서 ───────────────────────────────────────────────────── */
.bn-report { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; transition: opacity .2s; }
.bn-report.is-loading { opacity: .55; }
.bn .bi { line-height: 1; }

.bn-main { padding: clamp(24px, 3vw, 34px); border-radius: 20px; background: var(--site-surface, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); }
.bn-nw { white-space: nowrap; }
/* 고른 조합: 아이콘 칩 한 줄(설명 문장 대신). */
.bn-setup { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px !important; }
.bn-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px;
    background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line, rgba(255, 255, 255, .08));
    font-size: .8125rem; font-weight: 600; color: var(--site-text, #f0f0f0);
}
.bn-chip .bi { font-size: .9375rem; color: var(--site-text-3, #949494); }
.bn-chip--plain { color: var(--site-text-2, #b0b0b0); }
/* 게임 성능 등급: 큰 글자 하나 + 부품별 작은 글자. 숫자(퍼센트)는 내보내지 않는다. */
.bn-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.bn-grade { --g: var(--site-text-2, #b0b0b0); display: grid; justify-items: center; gap: 4px; min-width: 104px; padding: 12px 14px; border-radius: 14px; background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.bn-grade-k { font-size: .75rem; font-weight: 600; color: var(--site-text-3, #949494); white-space: nowrap; }
.bn-grade-v { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--g); }
.bn-grade-parts { display: flex; gap: 10px; font-size: .8125rem; font-weight: 700; }
.bn-grade-parts span { display: inline-flex; align-items: center; gap: 4px; color: var(--g); }
.bn-grade-parts .bi { color: var(--site-text-3, #949494); }
.bn-grade--S { --g: var(--site-accent, #7aa5f2); }
.bn-grade--A { --g: var(--site-success, #2ecc71); }
.bn-grade--B { --g: var(--site-text, #f0f0f0); }
.bn-grade--C { --g: var(--bn-warn); }
.bn-grade--D { --g: var(--site-danger, #ff6b5b); }
.bn-verdict { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; text-wrap: balance; }
.bn-verdict b { font-weight: 800; }
.bn-hero-t { min-width: 0; }
.bn-verdict-sub { margin-top: 8px !important; font-size: .9375rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.bn-verdict--gpu b { color: var(--bn-gpu); }
.bn-verdict--cpu b { color: var(--bn-warn); }
.bn-verdict .bn-bad { color: var(--site-danger, #ff6b5b); }

.bn-ramwarn { display: flex; align-items: center; gap: 8px; margin-top: 12px !important; font-size: .9375rem; font-weight: 600; color: var(--site-danger, #ff6b5b); }
.bn-gauge { margin-top: 26px; }
.bn-cells { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.bn-cell { height: 26px; border-radius: 6px; background: var(--bn-cell); transition: background-color .32s var(--site-ease, ease), box-shadow .32s var(--site-ease, ease); }
.bn-cell.is-cpu { background: rgba(243, 156, 18, .14); }     /* 꺼진 칸도 구역색을 옅게: 세 구역이 있는 계기로 읽히게 */
.bn-cell.is-bal { background: var(--bn-cell-mid); }
.bn-cell.is-gpu { background: rgba(122, 165, 242, .16); }
.bn-cell.is-cpu.is-on { background: var(--bn-warn); box-shadow: 0 6px 16px -8px rgba(243, 156, 18, .8); }
.bn-cell.is-bal.is-on { background: var(--site-text-2, #b0b0b0); box-shadow: 0 6px 16px -8px rgba(240, 240, 240, .5); }
.bn-cell.is-gpu.is-on { background: var(--bn-gpu); box-shadow: 0 6px 16px -8px rgba(122, 165, 242, .9); }
.bn-gauge-legend { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; font-size: .8125rem; color: var(--site-text-3, #949494); }
.bn-gauge-legend span { display: flex; align-items: center; gap: 6px; }
.bn-gauge-legend span:nth-child(2) { justify-content: center; }
.bn-gauge-legend span:last-child { justify-content: flex-end; }
.bn-gauge-legend i { font-style: normal; }
.bn-gauge-legend .bi-cpu { color: var(--bn-warn); }
.bn-gauge-legend .bi-gpu-card { color: var(--bn-gpu); }
.bn-gauge-legend .bn-s { display: none; }

/* 부품별 점수 막대: 라벨 · 막대(등급 경계 눈금) · 등급 글자. 색은 등급(--g). */
.bn-bars { margin-top: 22px !important; display: grid; gap: 10px; }
.bn-bars li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 1.6em; align-items: center; gap: 12px; }
.bn-bars-k { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); white-space: nowrap; }
.bn-bars-k .bi { color: var(--site-text-3, #949494); }
.bn-bars-track {
    position: relative; height: 12px; border-radius: 6px; overflow: hidden; background: var(--bn-cell);
    /* 등급 경계 눈금(D|C 20%, C|B 33%, B|A 50%, A|S 75%) */
    background-image: linear-gradient(90deg, transparent calc(20% - 1px), rgba(255, 255, 255, .14) calc(20% - 1px), rgba(255, 255, 255, .14) 20%, transparent 20%,
        transparent calc(33% - 1px), rgba(255, 255, 255, .14) calc(33% - 1px), rgba(255, 255, 255, .14) 33%, transparent 33%,
        transparent calc(50% - 1px), rgba(255, 255, 255, .14) calc(50% - 1px), rgba(255, 255, 255, .14) 50%, transparent 50%,
        transparent calc(75% - 1px), rgba(255, 255, 255, .14) calc(75% - 1px), rgba(255, 255, 255, .14) 75%, transparent 75%);
}
.bn-bars-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--g); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.bn-bars-g { font-size: 1.125rem; font-weight: 800; text-align: right; color: var(--g); }
.bn-bars-ok { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--site-success, #2ecc71); }
.bn-tag { font-size: .75rem; font-weight: 500; color: var(--site-text-3, #949494); }

/* 신뢰도(점 3개) · 주의 칩 한 줄. */
.bn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; font-size: .8125rem; color: var(--site-text-3, #949494); }
.bn-conf { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.bn-dots { display: inline-flex; gap: 3px; }
.bn-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--bn-cell-mid); }
.bn-conf--high .bn-dots i { background: var(--site-success, #2ecc71); }
.bn-conf--medium .bn-dots i:nth-child(-n+2) { background: var(--site-text-2, #b0b0b0); }
.bn-conf--low .bn-dots i:first-child { background: var(--bn-warn); }
.bn-conf--low { color: var(--bn-warn); }
.bn-meta { position: relative; }
.bn-flag {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 0; border-radius: 999px;
    background: rgba(243, 156, 18, .1); color: var(--bn-warn); font: 600 .8125rem/1.4 var(--bn-font); cursor: help;
    transition: background-color .15s;
}
.bn-flag:hover, .bn-flag:focus-visible { background: rgba(243, 156, 18, .2); }
.bn-flag:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
/* 툴팁: 배지 줄(.bn-meta) 아래 전체 폭. 배지와 툴팁 사이 틈이 없게 위쪽 여백은 padding 으로(마우스가 옮겨 가도 hover 유지). */
.bn-tip {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20; padding-top: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity .15s, transform .15s, visibility 0s .15s;
    pointer-events: none;
}
.bn-tip-box {
    display: block; max-width: 34em; padding: 10px 12px; border-radius: 10px;
    background: var(--site-surface-3, #333); border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9);
    font-size: .8125rem; font-weight: 500; line-height: 1.55; color: var(--site-text, #f0f0f0); text-align: left;
}
.bn-flag-wrap:hover .bn-tip, .bn-flag:focus-visible + .bn-tip, .bn-flag:focus + .bn-tip {
    opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; pointer-events: auto;
}
.bn-flag-wrap.is-closed .bn-tip { opacity: 0 !important; visibility: hidden !important; }


/* 게임 사양 확인: 미달(빨강) · 최소(주황) · 권장·여유(초록). 4칸 눈금에서 해당 칸만 켠다. */
.bn-spec { --lv: var(--site-text-2, #b0b0b0); margin-top: 22px; padding: 16px; border-radius: 14px; background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.bn-spec--below { --lv: var(--site-danger, #ff6b5b); }
.bn-spec--min { --lv: var(--bn-warn); }
.bn-spec--rec, .bn-spec--plenty { --lv: var(--site-success, #2ecc71); }
.bn-spec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.bn-spec h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; }
.bn-spec h3 .bi { font-size: 1.125rem; color: var(--site-text-3, #949494); }
.bn-spec-badge { font-weight: 700; color: var(--lv); }
.bn-spec-scale { margin-top: 12px !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.bn-spec-scale li { padding: 6px 4px; border-radius: 7px; background: var(--bn-cell); font-size: .75rem; font-weight: 600; line-height: 1.25; text-align: center; color: var(--site-text-3, #949494); }
.bn-spec-scale li.is-on { background: var(--lv); color: #111; }
.bn-spec-parts { margin-top: 12px !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.bn-spec-parts li { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 10px; background: var(--site-surface, #232323); }
.bn-spec-parts li > .bi { font-size: 1.125rem; color: var(--site-text-3, #949494); }
.bn-spec-part { font-size: .75rem; color: var(--site-text-3, #949494); }
.bn-lv { display: inline-flex; align-items: center; gap: 5px; font-size: .875rem; font-weight: 700; color: var(--site-text-2, #b0b0b0); }
.bn-lv--below .bn-lv { color: var(--site-danger, #ff6b5b); }
.bn-lv--min .bn-lv { color: var(--bn-warn); }
.bn-lv--rec .bn-lv, .bn-lv--plenty .bn-lv, .bn-lv--met .bn-lv { color: var(--site-success, #2ecc71); }
.bn-lv--unknown .bn-lv { font-size: .75rem; font-weight: 500; color: var(--site-text-3, #949494); }
.bn-spec-note { margin-top: 10px !important; font-size: .8125rem; color: var(--site-text-3, #949494); }

/* 결과 공유: 추천 카드 오른쪽 위(제목과 한 줄). 좁으면 제목 아래로 내려간다. */
.bn-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.bn-card-head h3 { flex: 1 1 12em; min-width: 0; }
.bn-share { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-left: auto; }
.bn-share-btn {
    display: none; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid rgba(122, 165, 242, .45);
    border-radius: 8px; background: rgba(122, 165, 242, .12); color: var(--site-accent, #7aa5f2); font: 700 .875rem/1.2 var(--bn-font);
    white-space: nowrap; cursor: pointer; transition: background-color .15s, transform .15s;
}
.bn-share-btn .bi { font-size: 1.0625rem; }
html.bn-js .bn-share-btn { display: inline-flex; }
.bn-share-btn:hover { background: rgba(122, 165, 242, .22); }
.bn-share-btn:active { transform: translateY(1px); }
.bn-share-btn:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.bn-share-msg { font-size: .8125rem; color: var(--site-success, #2ecc71); }
.bn-caveat { margin-top: 18px !important; font-size: .8125rem; color: var(--site-text-3, #949494); }

/* 자세히 보기: 접힌 항목들. 선 하나로 나누고 +/− 로 연다. */
.bn-more { grid-column: 1 / -1; margin-top: 8px; }
.bn-more > h3 { margin-bottom: 4px !important; font-size: .875rem; font-weight: 600; color: var(--site-text-3, #949494); }
.bn-more details { border-bottom: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.bn-more summary { position: relative; padding: 14px 32px 14px 0; font-weight: 600; color: var(--site-text, #f0f0f0); cursor: pointer; list-style: none; }
.bn-more summary::-webkit-details-marker { display: none; }
.bn-more summary::before, .bn-more summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 2px; margin-top: -1px; background: var(--site-text-3, #949494); transition: transform .2s; }
.bn-more summary::after { transform: rotate(90deg); }
.bn-more details[open] summary::after { transform: rotate(0); }
.bn-more summary:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 4px; }
.bn-more-body { padding: 0 0 18px; max-width: 46em; font-size: .9375rem; color: var(--site-text-2, #b0b0b0); }
.bn-more-body p + p, .bn-more-body p + ul, .bn-more-body table + ul { margin-top: 10px !important; }
.bn-more-body a { color: var(--site-accent, #7aa5f2); text-decoration: underline; text-underline-offset: 3px; }
.bn-cond { color: var(--site-text-2, #b0b0b0); overflow-wrap: break-word; }
.bn-why-list { margin-top: 8px !important; display: grid; gap: 4px; color: var(--site-text-3, #949494); }
.bn-why-list li { position: relative; padding-left: 14px; }
.bn-why-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 1px; background: currentColor; }
.bn-spec-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: .875rem; }
.bn-spec-table th, .bn-spec-table td { padding: 9px 8px; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); text-align: left; vertical-align: top; }
.bn-spec-table thead th { border-top: 0; font-size: .75rem; font-weight: 600; color: var(--site-text-3, #949494); }
.bn-spec-table tbody th { font-weight: 600; white-space: nowrap; color: var(--site-text, #f0f0f0); }
.bn-spec-table td { overflow-wrap: anywhere; }

.bn-side { display: grid; gap: 12px; }
.bn-card { padding: 20px 22px; border-radius: 16px; background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.bn-card h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.bn-card p { margin-top: 6px; font-size: .9375rem; color: var(--site-text-2, #b0b0b0); }
.bn-card--flag h3 { color: var(--bn-warn); }
.bn-aff-note { font-weight: 600; color: var(--site-accent, #7aa5f2) !important; }
/* 쿠팡 심볼(쿠팡 공식 파비콘 원본). 이미지는 꾸밈 — 바로 뒤 글자가 '쿠팡 파트너스' 다. */
.bn-ad-logo { display: inline-block; width: 14px; height: 14px; margin: 0 4px 0 1px; vertical-align: -2px; }
.bn-ad { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(122, 165, 242, .45); font-size: .75rem; font-weight: 700; letter-spacing: 0; color: var(--site-accent, #7aa5f2); vertical-align: 2px; }

/* 업그레이드 후보: 부품 이름 · (CPU) 메인보드 여부 · 링크 한 줄씩. */
.bn-up { margin-top: 12px !important; display: grid; }
.bn-up li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px;
    padding: 11px 0; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08));
}
.bn-up li:first-child { border-top: 0; padding-top: 4px; }
/* 맨 아래 루티미제 줄: 부품 후보(광고)와 구분되게 굵은 선 하나 위에. */
/* 루티미제 카드(자사): 추천(광고) 카드 아래 따로, 결과가 있으면 항상. */
.bn-card--lut h3 { display: inline-flex; align-items: center; gap: 8px; }
.bn-card--lut h3 .bi { color: var(--site-accent, #7aa5f2); }
.bn-lut-hook { margin-top: 8px !important; font-size: .875rem !important; line-height: 1.55; color: var(--site-text-2, #b0b0b0) !important; }
.bn-card--lut .bn-lut-link { margin-top: 12px; }
.bn-up-hook { grid-column: 1 / -1; font-size: .8125rem; line-height: 1.5; color: var(--site-text-2, #b0b0b0); }
.bn-up-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-weight: 650; color: var(--site-text, #f0f0f0); }
.bn-up-name .bi { color: var(--site-text-3, #949494); }
/* 바꾸면: 지금 등급 → 바꾼 뒤 등급 · 판정. */
.bn-up-after { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .8125rem; color: var(--site-text-3, #949494); }
.bn-up-after b { color: var(--g); font-weight: 800; }
.bn-up-after .bi { font-size: .75rem; }
.bn-up-after-v { margin-left: 4px; color: var(--site-text-2, #b0b0b0); }
.bn-up-after .bn-up-socket { margin-left: 6px; }
/* 램 행: 그 게임 사양 단계 변화(미달 → 권장 등). 색은 사양 단계 색과 같다. */
.bn-up-spec { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .8125rem; color: var(--site-text-3, #949494); }
.bn-up-spec b { font-weight: 700; color: var(--site-text-2, #b0b0b0); }
.bn-up-spec b.bn-lv--below { color: var(--site-danger, #ff6b5b); }
.bn-up-spec b.bn-lv--min { color: var(--bn-warn); }
.bn-up-spec b.bn-lv--rec, .bn-up-spec b.bn-lv--plenty { color: var(--site-success, #2ecc71); }
.bn-up-spec .bi { font-size: .75rem; }
.bn-up-spec .bi-controller { font-size: .9375rem; margin-right: 2px; }
/* 그래픽카드 후보의 '파워 ○○W 이상'(지금 CPU 기준). 파워 링크는 행의 '바로가기'(카드)와 겹치지 않게 글자 링크. */
.bn-up-psu { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .8125rem; color: var(--site-text-2, #b0b0b0); }
.bn-up-psu .bi-lightning-charge { color: var(--bn-warn); }
/* 파워 줄 글자 자체가 파워 용량 계산기로 가는 링크(자사 페이지 — 쿠팡 '파워 보기'와 구분되게 점선 밑줄만). */
.bn-psu-calc { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--site-text-3, #949494); text-underline-offset: 3px; }
.bn-psu-calc:hover { color: var(--site-text, #f0f0f0); text-decoration-style: solid; }
.bn-psu-calc:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 3px; }
.bn-psu-link { display: inline-flex; align-items: center; gap: 2px; color: var(--site-accent, #7aa5f2); font-weight: 650; text-decoration: none; }
.bn-psu-link:hover { text-decoration: underline; }
.bn-psu-link:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 3px; }
.bn-psu-link .bi { font-size: .6875rem; }
.bn-up-socket { grid-column: 1; font-size: .8125rem; color: var(--site-success, #2ecc71); }
.bn-up-socket.is-new { color: var(--site-text-3, #949494); }
.bn-up-link {
    /* '바로가기' 버튼(오너 지시 2026-11-06): 행마다 오른쪽 위, 브랜드 파랑. 쿠팡 링크·루티미제 줄 공통. */
    grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 8px;
    background: var(--site-brand, #0057d1); color: #fff; font-size: .8125rem; font-weight: 700; text-decoration: none;
    transition: background-color .15s, transform .15s;
}
.bn-up-link:hover { background: var(--site-brand-hover, #0a63e6); }
.bn-up-link:active { background: var(--site-brand-press, #004bb5); transform: translateY(1px); }
.bn-up-link:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.bn-up-note { margin-top: 10px !important; font-size: .8125rem !important; color: var(--site-text-3, #949494) !important; }

.bn-empty { grid-column: 1 / -1; padding: clamp(28px, 4vw, 44px); border-radius: 20px; background: var(--site-surface, #232323); }
.bn-empty h2 { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; }
.bn-empty p { margin-top: 10px; max-width: 42em; color: var(--site-text-2, #b0b0b0); }
.bn-empty .bn-cells { margin-top: 26px; opacity: .7; }
.bn-empty--error h2 { color: var(--bn-warn); }

/* ── 설명 ──────────────────────────────────────────────────────── */
.bn-doc { max-width: 760px; margin-top: clamp(64px, 8vw, 104px); display: grid; gap: clamp(40px, 5vw, 56px); }
.bn-doc-sec h2 { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.3; }
.bn-doc-sec h3 { margin-top: 22px !important; font-size: 1rem; font-weight: 700; }
.bn-doc-sec p { margin-top: 14px; font-size: 1rem; line-height: 1.8; color: var(--site-text-2, #b0b0b0); }
.bn-not { margin-top: 14px !important; display: grid; gap: 8px; }
.bn-not li { position: relative; padding-left: 18px; color: var(--site-text-2, #b0b0b0); }
.bn-not li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 8px; height: 2px; border-radius: 1px; background: var(--site-text-3, #949494); }
.bn-faq details { margin-top: 12px; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.bn-faq details:last-of-type { border-bottom: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.bn-faq summary { position: relative; padding: 16px 32px 16px 0; font-weight: 650; cursor: pointer; list-style: none; }
.bn-faq summary::-webkit-details-marker { display: none; }
.bn-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--site-text-3, #949494); border-bottom: 2px solid var(--site-text-3, #949494); transform: rotate(45deg); transition: transform .2s; }
.bn-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.bn-faq summary:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 4px; }
.bn-faq details p { margin: 0 0 18px; }
.bn-reviewed { font-size: .875rem !important; color: var(--site-text-3, #949494) !important; }

.bn-gs-link { margin-top: 28px !important; }
.bn-gs-link a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--site-surface, #232323); color: var(--site-text, #f0f0f0); font-weight: 600; text-decoration: none; }
.bn-gs-link a:hover { background: var(--site-surface-2, #2a2a2a); }

/* ── 게임별 사양 페이지(/tools/game-specs/) ───────────────────────── */
.gs { max-width: 920px; }
.gs-crumb { font-size: .875rem; }
.gs-crumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--site-text-3, #949494); text-decoration: none; }
.gs-crumb a .bi { font-size: .8em; transition: transform .15s ease; }
.gs-crumb a:hover .bi { transform: translateX(-2px); }
.gs-crumb a:hover { color: var(--site-text, #f0f0f0); }
.gs-head { display: flex; align-items: flex-start; gap: 16px; margin-top: 14px; }
.gs-head h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.gs-head .bn-lead a { color: var(--site-accent, #7aa5f2); text-decoration: underline; text-underline-offset: 3px; }
.gs-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; margin-top: 4px; }
.gs-card { margin-top: 20px; padding: clamp(20px, 3vw, 28px); border-radius: 16px; background: var(--site-surface, #232323); }
.gs-card h2, .gs-cta h2, .gs-others h2 { font-size: 1.125rem; font-weight: 700; }
.gs-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .9375rem; }
.gs-table th, .gs-table td { padding: 12px 10px; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); text-align: left; vertical-align: top; }
.gs-table thead th { border-top: 0; font-size: .8125rem; font-weight: 600; color: var(--site-text-3, #949494); }
.gs-table tbody th { white-space: nowrap; font-weight: 600; }
.gs-table tbody th .bi { margin-right: 8px; color: var(--site-text-3, #949494); }
.gs-table td { color: var(--site-text-2, #b0b0b0); overflow-wrap: anywhere; }
.gs-note, .gs-method { margin-top: 12px !important; font-size: .8125rem; color: var(--site-text-3, #949494); }
.gs-modern { margin-top: 12px !important; display: grid; gap: 10px; }
.gs-modern li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.gs-modern-k { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.gs-modern-v { color: var(--site-text, #f0f0f0); }
.gs-modern-v b { font-weight: 700; }
.gs-ok { margin-right: 6px; color: var(--site-success, #2ecc71); }
.gs-muted { color: var(--site-text-3, #949494); }
.gs-short { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 14px !important; color: var(--bn-warn); font-weight: 600; font-size: .9375rem; }
.gs-short b { color: var(--site-text, #f0f0f0); }
.gs-notes { color: var(--site-text-2, #b0b0b0) !important; }
.gs-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 20px; padding: clamp(20px, 3vw, 28px); border-radius: 16px; background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); }
.gs-cta p { margin-top: 6px !important; color: var(--site-text-2, #b0b0b0); max-width: 36em; }
.gs-cta-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.gs-others { margin-top: 32px; }
.gs-others ul { margin-top: 12px !important; display: flex; flex-wrap: wrap; gap: 8px; }
.gs-others a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--site-surface, #232323); color: var(--site-text, #f0f0f0); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.gs-others a:hover { background: var(--site-surface-2, #2a2a2a); }
.gs-grid { margin-top: 26px !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.gs-grid a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--site-surface, #232323); color: var(--site-text, #f0f0f0); text-decoration: none; font-weight: 700; transition: background-color .15s; }
.gs-grid a:hover { background: var(--site-surface-2, #2a2a2a); }
.gs-grid a span { flex: 1; min-width: 0; }
.gs-grid a .bi { color: var(--site-text-3, #949494); }
.gs-grid-ico { width: 40px; height: 40px; border-radius: 10px; }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bn-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bn-bar > * { grid-column: auto; }
    .bn-field--title, .bn-actions { grid-column: 1 / -1; }
    .bn-report { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .bn-pop-q { font-size: 16px; }   /* iOS Safari 는 16px 미만 입력칸에 포커스하면 화면을 확대한다 */
    .bn-bar { grid-template-columns: minmax(0, 1fr); }
    .bn-bar > * { grid-column: 1 / -1; }
    .bn-pop { min-width: 0; }
    .bn-bars li { grid-template-columns: 7.5em minmax(0, 1fr) 1.4em; gap: 10px; }
    .bn-spec { padding: 14px; }
    .gs-table thead { display: none; }
    .gs-table tr { display: block; padding: 10px 0; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
    .gs-table th, .gs-table td { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px; padding: 3px 0; border: 0; }
    .gs-table tbody th { display: block; padding-bottom: 4px; }
    .gs-table td::before { content: attr(data-label); color: var(--site-text-3, #949494); font-size: .75rem; }
    .gs-modern li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .bn-hero { gap: 12px; }
    .bn-grade { min-width: 84px; padding: 10px; }
    .bn-grade-v { font-size: 2.375rem; }
    .bn-spec-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 표를 부품별 블록으로 쌓는다(칸 이름은 data-label). */
    .bn-spec-table thead { display: none; }
    .bn-spec-table tr { display: block; padding: 10px 0; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
    .bn-spec-table th, .bn-spec-table td { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px; padding: 2px 0; border: 0; }
    .bn-spec-table tbody th { display: block; padding-bottom: 4px; }
    .bn-spec-table td::before { content: attr(data-label); color: var(--site-text-3, #949494); font-size: .75rem; }
    .bn-cells { gap: 4px; }
    .bn-gauge-legend .bn-l { display: none; }
    .bn-gauge-legend .bn-s { display: inline; }
}

/* 움직임은 CSS 전환으로만 줄인다(기능은 그대로). */
@media (prefers-reduced-motion: reduce) {
    .bn-hint { animation: none !important; }
    .bn-cell, .bn-report, .bn-go, .bn-bars-fill, .bn-field select, .bn-combo, .bn-field::after, .bn-faq summary::after { transition: none !important; }
}

/* 일본어: 낱말 중간에서 줄이 끊기지 않게(지원 브라우저만, 2026-11-06 QA). 한국어 keep-all 과 짝. */
html[lang="ja"] .bn { word-break: auto-phrase; }

/* ── 2026-11-08 SEO 본문 보강(새 클래스만 — 위 규칙은 바꾸지 않는다) ─────────────────── */
/* 빈 화면 안내: 제목(h2)이 아니라 문단이 됐다. 모양은 예전 .bn-empty h2 그대로. */
.bn-empty .bn-empty-t { margin-top: 0; max-width: none; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--site-text, #f0f0f0); text-wrap: balance; }
/* 부품 이름을 모를 때 → 내 컴퓨터 사양 확인 */
.bn-name-help { margin-top: 10px; font-size: .875rem; color: var(--site-text-3, #949494); }
.bn-name-help a { display: inline-flex; align-items: center; gap: 4px; color: var(--site-text-2, #b0b0b0); text-decoration: underline; text-underline-offset: 3px; }
.bn-name-help a:hover { color: var(--site-text, #f0f0f0); }
.bn-name-help .bi { font-size: .85em; }
/* 부품 진단 → 게임별 사양 페이지 칩 */
.bn-gs-chips { margin-top: 12px !important; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.bn-gs-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--site-line, rgba(255, 255, 255, .08)); color: var(--site-text-2, #b0b0b0); text-decoration: none; font-size: .875rem; font-weight: 600; transition: background-color .15s, color .15s; }
.bn-gs-chips a:hover { background: var(--site-surface, #232323); color: var(--site-text, #f0f0f0); }
/* 직접 확인하는 법(번호 목록) · 관련 글 한 줄 */
.bn-steps { margin-top: 14px !important; padding-left: 1.4em; display: grid; gap: 10px; color: var(--site-text-2, #b0b0b0); line-height: 1.8; }
.bn-steps li::marker { color: var(--site-text-3, #949494); font-weight: 700; }
.bn-doc-more a, .gs-posts a { color: var(--site-accent, #7aa5f2); text-decoration: underline; text-underline-offset: 3px; }
/* 함께 쓰면 좋은 무료 도구(tools/_more_tools.html) */
.bn-more-list { margin-top: 16px !important; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.bn-more-list a { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px 16px; border-radius: 12px; 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; }
.bn-more-list a:hover { background: var(--site-surface, #232323); border-color: var(--site-line-2, rgba(255, 255, 255, .14)); }
.bn-more-list .bi { flex: none; margin-top: 2px; font-size: 1.125rem; color: var(--site-text-3, #949494); }
.bn-more-list b { display: block; font-weight: 700; }
.bn-more-list span span { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.55; color: var(--site-text-2, #b0b0b0); }
/* 게임 사양 페이지: 끊길 때 · FAQ · 함께 쓰는 도구 · 목록 요약표 */
.gs-p { margin-top: 10px !important; font-size: .9375rem; line-height: 1.75; color: var(--site-text-2, #b0b0b0); }
.gs-links { margin-top: 14px !important; }
.gs-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--site-bg-raise, #1e1e1e); color: var(--site-text, #f0f0f0); font-weight: 600; text-decoration: none; }
.gs-links a:hover { background: var(--site-surface-2, #2a2a2a); }
.gs-h3 { margin-top: 18px !important; font-size: .9375rem; font-weight: 700; }
.gs-posts { margin-top: 8px !important; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9375rem; }
.gs-faq details p { font-size: .9375rem; line-height: 1.75; color: var(--site-text-2, #b0b0b0); }
.gs-more { margin-top: 32px; }
.gs-more .bn-doc-sec h2 { font-size: 1.125rem; font-weight: 700; }
.gs-scroll { overflow-x: auto; }
.gs-sum th a { color: var(--site-text, #f0f0f0); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--site-line-2, rgba(255, 255, 255, .14)); }
.gs-sum th a:hover { text-decoration-color: currentColor; }