/* 그래픽카드·CPU 등급표(/tools/gpu-tier/, /tools/cpu-tier/) 전용. tools-bottleneck.css 위에 얹는다(입력 막대·카드·문서 칸은 그 파일 것).
 * 색은 --site-* 토큰과 부품 진단의 등급 색 짝(S 파랑 · A 초록 · B 글자색 · C 주황 · D 빨강, .bn-grade--*)만 쓴다.
 * 대표 시각물은 등급표 하나: 왼쪽 단계 칸(S+ … D-) + 오른쪽 부품 칩이 빠른 순으로 흐른다. 막대·점수는 없다(원 수치 금지).
 * 근거 표시: 측정 = 실선 칩, 추정 = 점선 칩, 교차 확인 = 점선 + 체크 기호(색이 아니라 모양으로 구분, 글자는 sr-only 로도).
 */

.page-tier .tr-tier--S { --g: var(--site-accent, #7aa5f2); }
.page-tier .tr-tier--A { --g: var(--site-success, #2ecc71); }
.page-tier .tr-tier--B { --g: var(--site-text, #f0f0f0); }
.page-tier .tr-tier--C { --g: var(--bn-warn); }
.page-tier .tr-tier--D { --g: var(--site-danger, #ff6b5b); }

.tr-other { margin-top: 12px !important; }
.tr-other a { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 650; color: var(--site-accent, #7aa5f2); text-decoration: none; }
.tr-other a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tr-other a:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 4px; }
.tr-other .bi { font-size: .8125rem; }

/* H1 의 연도(검토일의 해, SEO 2026-11-08) — 제목 글자보다 한 단계 옅게. */
.tr-year { color: var(--site-text-3, #949494); font-weight: inherit; }

/* 비교 폼 위 보이는 제목('그래픽카드 비교'·'CPU 비교'). */
.tr-cmp-title { margin-top: clamp(28px, 4vw, 40px) !important; margin-bottom: 12px !important; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.3; }

/* 입력 막대: 부품 4 · 부품 4 · 비교 2(10칸 격자는 tools-bottleneck.css). */
.tr-bar .bn-field--gpu, .tr-bar .bn-field--cpu { grid-column: span 4; }
.tr-bar .bn-actions { grid-column: span 2; }

/* ── 비교 결과 ─────────────────────────────────────────────────── */
.tr-result { margin-top: 14px; scroll-margin-top: calc(var(--site-hdr-h, 64px) + 16px); }
.tr-result:focus { outline: none; }
.tr-cmp-msg { padding: 2px 4px; font-size: .9375rem; color: var(--site-text-3, #949494); }
.tr-cmp-msg--error { color: var(--bn-warn); }
.tr-cmp-wrap { display: grid; gap: 16px; }
.tr-cmp-wrap.has-aff { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.tr-cmp { padding: clamp(22px, 3vw, 30px); border-radius: 20px; background: var(--site-surface, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); }
.tr-cmp-parts { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.tr-cmp-part {
    display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 18px; border-radius: 14px;
    background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line, rgba(255, 255, 255, .08));
}
.tr-cmp-part.is-hi { border-color: color-mix(in srgb, var(--g) 55%, transparent); }
.tr-cmp-tier { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--g); }
.tr-cmp-name { font-weight: 700; color: var(--site-text, #f0f0f0); overflow-wrap: anywhere; }
.tr-cmp-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .8125rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); text-decoration: none; }
.tr-cmp-link:hover { color: var(--site-text, #f0f0f0); text-decoration: underline; text-underline-offset: 3px; }
.tr-cmp-link:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 3px; }
.tr-cmp-link .bi { font-size: .6875rem; }
.tr-cmp-vs { align-self: center; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--site-surface-2, #2a2a2a); color: var(--site-text-2, #b0b0b0); font-size: 1rem; }
.tr-cmp-head { margin-top: 20px !important; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
.tr-cmp-note { margin-top: 8px !important; color: var(--site-text-2, #b0b0b0); }
.tr-cmp-step { margin-top: 6px !important; font-size: .8125rem; color: var(--site-text-3, #949494); }

/* ── 등급표 ───────────────────────────────────────────────────── */
.tr-list { margin-top: clamp(40px, 5vw, 56px); }
.tr-list-head h2 { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.3; }
.tr-hint { margin-top: 8px !important; max-width: 52em; font-size: .9375rem; color: var(--site-text-2, #b0b0b0); text-wrap: pretty; }
.tr-tools { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.tr-find { position: relative; flex: 0 1 340px; min-width: 0; }
.tr-find[hidden] { display: none !important; }
.tr-find .bi { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: .875rem; color: var(--site-text-3, #949494); pointer-events: none; }
.tr-find input {
    width: 100%; height: 44px; padding: 0 14px 0 36px; border-radius: 10px;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); background: var(--site-surface-2, #2a2a2a);
    color: var(--site-text, #f0f0f0); font: 500 .9375rem/1 var(--bn-font);
}
.tr-find input::placeholder { color: var(--site-text-3, #949494); }
.tr-find input:focus-visible { outline: none; border-color: var(--site-focus, #a8c6ff); }
.tr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8125rem; color: var(--site-text-2, #b0b0b0); }
.tr-legend li { display: inline-flex; align-items: center; gap: 7px; }
.tr-mark { display: inline-grid; place-items: center; width: 22px; height: 14px; border-radius: 4px; border: 1px solid var(--site-line-2, rgba(255, 255, 255, .24)); font-size: .625rem; color: var(--site-text-2, #b0b0b0); }
.tr-mark--estimated, .tr-mark--xcheck { border-style: dashed; }
.tr-none { margin-top: 14px !important; font-size: .9375rem; color: var(--site-text-3, #949494); }
.tr-none[hidden] { display: none; }

.tr-tiers { margin-top: 18px !important; display: grid; gap: 6px; }
.tr-tier {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0; min-height: 64px;
    border-radius: 14px; overflow: hidden; background: var(--site-surface, #232323);
}
.tr-tier[hidden] { display: none; }
.tr-tag {
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--g) 14%, var(--site-bg-raise, #1e1e1e));
    border-right: 2px solid color-mix(in srgb, var(--g) 55%, transparent);
}
.tr-tag b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--g); }
.tr-parts { display: flex; flex-wrap: wrap; align-content: center; gap: 6px; padding: 10px 12px; }
.tr-parts li[hidden] { display: none; }
.tr-part {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 11px; border-radius: 8px;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); background: var(--site-bg-raise, #1e1e1e);
    font-size: .875rem; font-weight: 650; color: var(--site-text, #f0f0f0); text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.tr-part--estimated, .tr-part--xcheck { border-style: dashed; border-color: rgba(255, 255, 255, .22); }
.tr-part .bi { align-self: center; font-size: .75rem; color: var(--site-text-3, #949494); }
.tr-part:hover { background: var(--site-surface-2, #2a2a2a); border-color: color-mix(in srgb, var(--g) 60%, transparent); }
.tr-part:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.tr-vram { font-size: .75rem; font-weight: 500; color: var(--site-text-3, #949494); }

/* 이 브라우저가 알려 준 그래픽카드(tools-tier.js 가 브라우저 안에서만 표시). 색이 아니라 굵은 테두리 + 글자로도 알린다. */
.tr-mine { margin-top: 14px !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .9375rem; color: var(--site-text-2, #b0b0b0); }
.tr-mine[hidden] { display: none !important; }
.tr-mine > .bi { align-self: center; color: var(--site-accent, #7aa5f2); }
.tr-mine b { color: var(--site-text, #f0f0f0); }
.tr-mine-note { flex-basis: 100%; font-size: .8125rem; color: var(--site-text-3, #949494); }
.tr-parts li.is-mine .tr-part { border: 2px solid var(--site-accent, #7aa5f2); padding: 6px 10px; }

/* ── 자주 비교하는 조합(SEO 2026-11-08) — 줄마다 두 부품 + 단계 + 비교와 같은 판정 한 줄. ── */
.tr-pairs { margin-top: clamp(32px, 4vw, 44px); }
.tr-pairs h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.3; }
.tr-pair-list { margin-top: 14px !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tr-pair {
    height: 100%; display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px;
    background: var(--site-surface, #232323); 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;
}
.tr-pair:hover { background: var(--site-surface-2, #2a2a2a); border-color: var(--site-line-2, rgba(255, 255, 255, .14)); }
.tr-pair:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.tr-pair-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-weight: 700; overflow-wrap: anywhere; }
.tr-pair-t { margin-left: 2px; font-weight: 800; color: var(--g); }
.tr-pair-vs { font-size: .8125rem; font-weight: 600; color: var(--site-text-3, #949494); }
.tr-pair-verdict { font-size: .875rem; color: var(--site-text-2, #b0b0b0); }

/* 등급표 아래 카드 두 장(부품 진단 · 루티미제). */
.tr-more { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-card-bn h3 { display: inline-flex; align-items: center; gap: 8px; }
.tr-card-bn h3 .bi { color: var(--site-accent, #7aa5f2); }
.tr-more .bn-lut-link { display: inline-flex; margin-top: 12px; }

@media (max-width: 1024px) {
    .tr-bar .bn-field--gpu, .tr-bar .bn-field--cpu { grid-column: auto; }
    .tr-bar .bn-actions { grid-column: 1 / -1; }
    .tr-cmp-wrap.has-aff { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .tr-bar > * { grid-column: 1 / -1 !important; }
    .tr-cmp-parts { grid-template-columns: minmax(0, 1fr); }
    .tr-cmp-vs { justify-self: center; transform: rotate(90deg); }
    .tr-tier { grid-template-columns: 52px minmax(0, 1fr); }
    .tr-tag b { font-size: 1.125rem; }
    .tr-parts { padding: 8px; gap: 5px; }
    .tr-part { padding: 6px 9px; font-size: .8125rem; }
    .tr-find { flex-basis: 100%; }
    .tr-find input { font-size: 16px; }   /* iOS Safari 는 16px 미만 입력칸에 포커스하면 화면을 확대한다 */
    .tr-more { grid-template-columns: minmax(0, 1fr); }
    .tr-pair-list { grid-template-columns: minmax(0, 1fr); }
}

/* 움직임은 CSS 전환으로만 줄인다(기능은 그대로). */
@media (prefers-reduced-motion: reduce) {
    .tr-part, .tr-pair { transition: none !important; }
}