/* 파워 용량 계산기(/tools/psu/) 전용. tools-bottleneck.css 위에 얹는다(입력 막대·카드·문서 칸은 그 파일 것).
 * 색은 --site-* 토큰과 부품 진단의 --bn-* 변수만 쓴다. 그래픽카드 = --bn-gpu, CPU = --bn-warn(부품 진단과 같은 짝).
 * 대표 시각물은 '파워 정격 막대' 하나: 막대 전체 = 파워 정격, 칸 = 각 부품의 최대 전력, 세로선 = 정격의 80%.
 */

/* 입력 막대: CPU 4 · 그래픽카드 4 · 초기화+계산 2(10칸 격자는 tools-bottleneck.css). */
.ps-bar .bn-field--cpu, .ps-bar .bn-field--gpu { grid-column: span 4; }
.ps-bar .bn-actions { grid-column: span 2; }
/* 그래픽카드 목록 상자는 오른쪽 끝 칸이 아니므로 왼쪽 정렬 그대로. */

.ps-empty .bn-empty-t { text-wrap: balance; }

/* ── 결과: 큰 W 값 ───────────────────────────────────────────── */
.ps-hero { display: grid; gap: 6px; }
.ps-k { font-size: .9375rem !important; font-weight: 650 !important; letter-spacing: 0 !important; color: var(--site-text-2, #b0b0b0) !important; }
.ps-watts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; line-height: 1; }
.ps-watts b {
    font-size: clamp(3.5rem, 2.6rem + 3.4vw, 5rem); font-weight: 800; letter-spacing: -.045em;
    font-variant-numeric: tabular-nums; color: var(--site-text, #f0f0f0);
}
.ps-unit { margin-left: -6px; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 800; color: var(--site-text, #f0f0f0); }
.ps-up { font-size: 1rem; font-weight: 650; color: var(--site-text-2, #b0b0b0); }
.ps-why { margin-top: 6px !important; max-width: 40em; font-size: .9375rem; color: var(--site-text-2, #b0b0b0); text-wrap: pretty; }

/* ── 파워 정격 막대 ──────────────────────────────────────────── */
.ps-load { margin-top: 26px; }
.ps-track {
    position: relative; display: flex; height: 16px; border-radius: 8px; overflow: hidden;
    background: var(--bn-cell);
}
.ps-seg { display: block; height: 100%; flex: none; transform-origin: left center; animation: ps-grow .5s cubic-bezier(.2, .8, .2, 1) both; }
.ps-seg + .ps-seg { box-shadow: inset 2px 0 0 var(--site-surface, #232323); }   /* 칸 사이 틈 */
.ps-seg--gpu { background: var(--bn-gpu); }
.ps-seg--cpu { background: var(--bn-warn); }
.ps-seg--other { background: var(--site-text-3, #949494); }
.ps-line { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--site-text, #f0f0f0); }
@keyframes ps-grow { from { transform: scaleX(0); } to { transform: none; } }
.ps-legend { margin-top: 12px !important; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8125rem; color: var(--site-text-2, #b0b0b0); }
.ps-legend li { display: inline-flex; align-items: center; gap: 7px; }
.ps-dot { width: 10px; height: 10px; border-radius: 3px; animation: none; }
.ps-tick { width: 2px; height: 12px; background: var(--site-text, #f0f0f0); }

/* ── 계산 근거 ───────────────────────────────────────────────── */
.ps-basis-h { margin-top: 30px !important; font-size: 1rem !important; font-weight: 700 !important; }
.ps-basis { margin: 10px 0 0; display: grid; }
.ps-basis > div {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px;
    padding: 10px 0;
}
.ps-basis > div + div { border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.ps-basis dt { font-size: .9375rem; color: var(--site-text-2, #b0b0b0); }
.ps-basis dd { margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 10px; text-align: right; }
.ps-basis dd b { font-size: 1rem; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--site-text, #f0f0f0); white-space: nowrap; }
.ps-calc { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--site-text-3, #949494); white-space: nowrap; }
.ps-na { font-size: .875rem; color: var(--site-text-3, #949494); }
.ps-basis-final { border-top-color: var(--site-line-2, rgba(255, 255, 255, .14)) !important; }
.ps-basis-final dt { font-weight: 650; color: var(--site-text, #f0f0f0); }
.ps-basis-final dd b { font-size: 1.125rem; color: var(--site-accent, #7aa5f2); }

/* ── 옆 칸: 부품 진단으로 ─────────────────────────────────────── */
.ps-card-bn h3 { display: inline-flex; align-items: center; gap: 8px; }
.ps-card-bn h3 .bi { color: var(--bn-gpu); }
.ps-card-bn .bn-lut-link { margin-top: 12px; }

/* ── 그래픽카드별 보드 전력·권장 파워 표(시리즈별 접기, 2026-11-08) ───────────────────── */
.ps-tbl-grp { margin-top: 10px; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.ps-tbl-grp:last-of-type { border-bottom: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.ps-tbl-grp summary { position: relative; padding: 14px 32px 14px 0; font-weight: 700; cursor: pointer; list-style: none; }
.ps-tbl-grp summary::-webkit-details-marker { display: none; }
.ps-tbl-grp 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; }
.ps-tbl-grp[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.ps-tbl-grp summary:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 4px; }
.ps-tbl-t { width: 100%; margin-bottom: 14px; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.ps-tbl-t th, .ps-tbl-t td { padding: 9px 8px; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); text-align: left; vertical-align: baseline; }
.ps-tbl-t th:first-child { padding-left: 0; }
.ps-tbl-t thead th { border-top: 0; font-size: .75rem; font-weight: 600; color: var(--site-text-3, #949494); }
.ps-tbl-t tbody th { font-weight: 600; }
.ps-tbl-t tbody 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)); }
.ps-tbl-t tbody th a:hover { text-decoration-color: currentColor; }
.ps-tbl-t td { white-space: nowrap; color: var(--site-text-2, #b0b0b0); }
.ps-tbl-t td b { color: var(--site-text, #f0f0f0); font-weight: 700; }

@media (max-width: 1024px) {
    .ps-bar .bn-field--cpu, .ps-bar .bn-field--gpu { grid-column: auto; }
    .ps-bar .bn-actions { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .ps-bar > * { grid-column: 1 / -1 !important; }
    .ps-basis > div { grid-template-columns: minmax(0, 1fr); }
    .ps-basis dd { justify-content: flex-start; text-align: left; }
    .ps-tbl-t { font-size: .8125rem; }
    .ps-tbl-t th, .ps-tbl-t td { padding: 8px 5px; }
    .ps-tbl-t tbody th { overflow-wrap: anywhere; }
}

/* 움직임은 CSS 로만 줄인다(기능은 그대로). */
@media (prefers-reduced-motion: reduce) {
    .ps-seg { animation: none !important; }
    .ps-tbl-grp summary::after { transition: none !important; }
}