/* 내 컴퓨터 사양 확인(/tools/pc-specs/) 전용.
 * tools-bottleneck.css · tools-sensitivity.css · tools-measure.css 다음에 링크된다 — 토큰(--site-*, --bn-*)과
 * .bn-head · .bn-doc · .mt-steps · .mt-again · .gs-cta · .sv-links 를 그대로 쓴다(새 색·글꼴을 만들지 않는다).
 * 구조: 제목 → (로그인) 앱이 보낸 사양 → 브라우저가 알려 준 사양(칸 6개) → 브라우저가 모르는 항목 → 다음 도구 → 설명.
 * 칸의 안내 문구는 data-st, 확인 정도 표시는 data-q 로 고른다(tools-pcspecs.js 가 바꾼다).
 * 모서리: 큰 판 20px · 칸 16px · 표시·버튼 10px(PC 부품 진단과 같은 단계).
 */
.pcs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.pcs-head h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); font-weight: 750; letter-spacing: -.02em; }
.pcs-head h2 .bi { color: var(--site-success, #2ecc71); }
.pcs-head p { flex-basis: 100%; font-size: .875rem; color: var(--site-text-3, #949494); }

/* ── 앱이 보낸 사양(로그인 사용자) ─────────────────────────────── */
.pcs-app {
    margin-top: 28px; padding: clamp(20px, 3vw, 28px); border-radius: 20px;
    background: var(--site-surface, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.pcs-list { margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.pcs-row { min-width: 0; }
.pcs-row dt { font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
.pcs-row dd { margin: 4px 0 0; font-size: 1rem; font-weight: 650; color: var(--site-text, #f0f0f0); overflow-wrap: anywhere; }

.pcs-sub-title { margin-top: 24px !important; padding-top: 18px; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); font-size: .9375rem; font-weight: 700; color: var(--site-text-2, #b0b0b0); }
.pcs-list--state { margin-top: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 앱 정보가 없을 때 안내(비로그인: 로그인 링크 / 로그인했지만 앱 정보 없음: 앱 실행 안내) */
.pcs-hint {
    margin-top: 28px; padding: 18px 20px; border-radius: 16px;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 16px; align-items: center;
    background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
}
.pcs-hint > .bi { align-self: start; margin-top: 2px; font-size: 1.25rem; color: var(--site-success, #2ecc71); }
.pcs-hint h2 { font-size: 1.0625rem; font-weight: 700; }
.pcs-hint p { margin-top: 6px !important; font-size: .9375rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0); max-width: 52em; }
.pcs-hint-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; white-space: nowrap; text-decoration: none; }
/* 첫 화면 '가장 빠른 방법'(SEO 2026-11-08): 리드 바로 아래, 로그인 안내 위. */
.pcs-quick {
    margin-top: 22px; padding: 16px 20px; border-radius: 16px;
    background: var(--site-surface, #232323);
    border: 1px solid color-mix(in srgb, var(--site-accent, #7aa5f2) 35%, transparent);
}
.pcs-quick h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 750; }
.pcs-quick h2 .bi { color: var(--site-accent, #7aa5f2); }
/* 근거(Microsoft 지원 문서) 줄은 화면에서 뺐다(오너 지시 2026-11-08). 선택자 우선순위는 예전(.pcs-quick > p:not(.pcs-src))과 같게. */
.pcs .pcs-quick > p { margin-top: 6px !important; font-size: .9375rem; line-height: 1.65; color: var(--site-text-2, #b0b0b0); max-width: 60em; text-wrap: pretty; }
.pcs-quick + .pcs-hint, .pcs-quick + .pcs-app { margin-top: 16px; }
.pcs-sheet-note { margin-top: 6px !important; font-size: .875rem; color: var(--site-text-3, #949494); }

/* ── 브라우저가 알려 준 사양 ─────────────────────────────────── */
.pcs-sheet { margin-top: 28px; }
.pcs-copy { height: 40px; }
html:not(.pcs-js) .pcs-copy { visibility: hidden; }
html.pcs-js .pcs-copy { visibility: visible; }   /* .mt-again 의 'html:not(.mt-js)' 숨김을 이 페이지에서 푼다 */
.pcs-tile[data-q="none"] .pcs-v output { font-family: inherit; }   /* '알 수 없음' 같은 글은 고정폭으로 쓰지 않는다 */
.pcs-copy-msg { min-height: 1.4em; margin-top: 6px !important; font-size: .875rem; color: var(--site-text-2, #b0b0b0); text-align: right; }
.pcs-grid { margin-top: 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pcs-tile {
    min-width: 0; display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 24px); border-radius: 16px;
    background: var(--site-surface, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.pcs-tile--gpu, .pcs-tile--screen { grid-column: span 2; }
.pcs-k { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.pcs-k .bi { font-size: 1rem; color: var(--site-text-3, #949494); }
.pcs-v {
    margin-top: 10px !important; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 750; letter-spacing: -.015em;
    line-height: 1.3; color: var(--site-text, #f0f0f0); overflow-wrap: anywhere;
}
.pcs-tile--gpu .pcs-v, .pcs-tile--screen .pcs-v { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); color: var(--bn-gpu); }
.pcs-tile--screen .pcs-v output { font-family: var(--bn-mono); }
.pcs-tile[data-st="wait"] .pcs-v, .pcs-tile[data-q="none"] .pcs-v { color: var(--site-text-3, #949494); }

/* 확인 정도: 정확히 확인 / 근사값 / 알 수 없음 — 칸의 data-q 에 맞는 것 하나만. */
.pcs-q { margin-top: 10px !important; font-size: .8125rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.pcs-q span { display: none; align-items: center; gap: 6px; }
.pcs-tile[data-q="exact"] [data-q-for="exact"],
.pcs-tile[data-q="approx"] [data-q-for="approx"],
.pcs-tile[data-q="none"] [data-q-for="none"] { display: inline-flex; }
[data-q-for="exact"] .bi { color: var(--site-success, #2ecc71); }
[data-q-for="approx"] .bi { color: var(--bn-warn); }
[data-q-for="none"] .bi { color: var(--site-text-3, #949494); }

.pcs-sub { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pcs-sub dt { font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
.pcs-sub dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--site-text, #f0f0f0); white-space: nowrap; }

.pcs-note { display: none; margin-top: 10px !important; font-size: .875rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0); }
.pcs-note--always { display: block; color: var(--site-text-3, #949494); }
.pcs-note a { color: var(--site-text, #f0f0f0); text-underline-offset: 3px; }
.pcs-tile[data-st="ok"] [data-for="ok"],
.pcs-tile[data-st="none"] [data-for="none"],
.pcs-tile[data-st="cap"] [data-for="cap"],
.pcs-tile[data-st="masked"] [data-for="masked"],
.pcs-tile[data-st="software"] [data-for="software"],
.pcs-tile[data-st="igpu"] [data-for="igpu"],
.pcs-tile[data-st="laptop"] [data-for="laptop"],
.pcs-tile[data-st="ua"] [data-for="ua"],
.pcs-tile[data-st="mobile"] [data-for="mobile"] { display: block; }

/* ── 브라우저가 모르는 항목: 확인할 곳으로 가는 바로가기 ─────────── */
.pcs-unk, .pcs-next { margin-top: clamp(40px, 5vw, 56px); }
.pcs-unk h2, .pcs-next h2 { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); font-weight: 750; letter-spacing: -.02em; }
.pcs-next > p:not(.sv-links) { margin-top: 8px !important; color: var(--site-text-2, #b0b0b0); max-width: 42em; }
.pcs-next .bn-gs-link { margin-top: 16px !important; }
.pcs-unk-list { margin-top: 16px !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pcs-unk-list a {
    height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-content: start;
    padding: 16px; border-radius: 16px; 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;
}
.pcs-unk-list a:hover { background: var(--site-surface, #232323); border-color: var(--site-line-2, rgba(255, 255, 255, .14)); }
.pcs-unk-list a:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.pcs-unk-list .bi { grid-row: span 2; font-size: 1.25rem; color: var(--site-text-3, #949494); margin-top: 1px; }
.pcs-unk-list strong { font-weight: 700; }
.pcs-unk-list span { font-size: .875rem; line-height: 1.5; color: var(--site-text-2, #b0b0b0); }
.pcs [id^="pcs-win"], .pcs-doc-anchor, #pcs-board, #pcs-ram, #pcs-storage, #pcs-temp, #pcs-gpu, #pcs-cpu { scroll-margin-top: calc(var(--site-hdr-h, 64px) + 16px); }

/* 설명 영역: .bn-doc 은 열 크기를 정하지 않은 그리드라, 줄바꿈하지 않는 명령(white-space:pre)이 열을 명령 너비까지
 * 늘려 좁은 화면에서 설명 전체의 오른쪽이 html 의 overflow-x:clip 에 잘렸다(scrollWidth 로는 안 드러난다, 2026-11-08 QA).
 * 열을 0~1fr 로 묶어 명령 상자만 가로로 스크롤되게 한다. */
.pcs .bn-doc { grid-template-columns: minmax(0, 1fr); }
.pcs .bn-doc > * { min-width: 0; }

/* 설명 안의 PowerShell 명령: 가로로 넘치면 칸 안에서만 스크롤(페이지 가로 넘침 0). */
.pcs-cmd {
    max-width: 100%;
    margin-top: 14px !important; padding: 14px 16px; border-radius: 10px; overflow-x: auto;
    background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line, rgba(255, 255, 255, .08));
    font: 600 .875rem/1.6 var(--bn-mono); color: var(--site-text, #f0f0f0); white-space: pre; user-select: all;
    /* 스크롤바(오너 지시 2026-11-08: 기본 회색 막대가 톤과 안 맞음) — 부품 진단 목록 상자(.bn-pop-list)와 같은 규칙:
       트랙은 투명, 손잡이는 선 색, 올리면 조금 밝게. */
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.pcs-cmd:hover { scrollbar-color: rgba(255, 255, 255, .28) transparent; }
@supports not (scrollbar-color: red transparent) {
    .pcs-cmd::-webkit-scrollbar { height: 8px; }
    .pcs-cmd::-webkit-scrollbar-track { background: transparent; }
    .pcs-cmd::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: rgba(255, 255, 255, .16) padding-box; }
    .pcs-cmd:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .28); }
}

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .pcs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pcs-hint { grid-template-columns: auto minmax(0, 1fr); }
    .pcs-hint-btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 520px) {
    .pcs-grid, .pcs-list, .pcs-list--state { grid-template-columns: minmax(0, 1fr); }
    .pcs-tile--gpu, .pcs-tile--screen { grid-column: auto; }
    .pcs-copy-msg { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .pcs-unk-list a { transition: none !important; }
}