/* 블루스크린 코드 검색(/tools/blue-screen-codes/, 2026-11-12). 공용 토큰·.bn 블록은 tools-bottleneck.css,
 * 단계 목록(.mt-steps)은 tools-measure.css, 관련 도구 줄·CTA(.sv-links·.sv-cta)는 tools-sensitivity.css.
 * 색은 --site-* 토큰만 쓴다(hex 금지). 모서리: 칸·카드 12px, 입력 12px, 칩 8px(사이트 버튼 10px 계열). */

/* 코드 표기(0x1A)가 글꼴 문맥 대체로 '0×1A' 처럼 보이지 않게 이 페이지만 문맥 대체를 끈다(2026-11-12 실측, 영어 리드). */
.bs { font-variant-ligatures: no-contextual; }

/* ── 검색 칸 ───────────────────────────────────────────────────────── */
.bs-tool {
    margin-top: 28px; padding: clamp(18px, 3vw, 28px); border-radius: 16px;
    background: var(--site-bg-raise); border: 1px solid var(--site-line);
}
.bs-q-label { display: block; margin-bottom: 10px; font-size: .9375rem; font-weight: 650; color: var(--site-text); }
.bs-field { position: relative; }
.bs-field > .bi-search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--site-text-3); pointer-events: none; }
.bs-field input {
    width: 100%; height: 56px; padding: 0 52px 0 46px; border-radius: 12px;
    border: 1px solid var(--site-line-2); background: var(--site-surface-2); color: var(--site-text);
    font: 600 1.0625rem/1 var(--bn-font); letter-spacing: -.005em;
}
.bs-field input::placeholder { color: var(--site-text-3); font-weight: 500; }
.bs-field input:focus-visible { outline: none; border-color: var(--site-focus); }
.bs-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.bs-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: transparent; color: var(--site-text-3); cursor: pointer;
}
.bs-clear[hidden] { display: none !important; }
.bs-clear:hover { color: var(--site-text); background: var(--site-surface-3); }
.bs-clear:focus-visible { outline: 2px solid var(--site-focus); outline-offset: 2px; }

.bs-ex { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bs-ex-l { margin-right: 2px; font-size: .8125rem; color: var(--site-text-3); }
.bs-chip {
    height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--site-line-2);
    background: transparent; color: var(--site-text-2); font-size: .8125rem; cursor: pointer;
    transition: background-color .15s var(--site-ease), color .15s var(--site-ease);
}
.bs-chip:hover { background: var(--site-surface-2); color: var(--site-text); }
.bs-chip:active { transform: translateY(1px); }
.bs-chip:focus-visible { outline: 2px solid var(--site-focus); outline-offset: 2px; }

/* ── 결과 ──────────────────────────────────────────────────────────── */
.bs-out { margin-top: 22px; }
.bs-status { font-size: .9375rem; color: var(--site-text-2); }
.bs-status[data-state="count"] { color: var(--site-text); font-weight: 650; }
.bs-note { margin-top: 4px !important; font-size: .875rem; color: var(--site-text-3); }
.bs-note[hidden] { display: none !important; }
.bs-results {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: start;
}
.bs-results:not(:empty) { margin-top: 14px; }
.bs-card {
    padding: 18px 20px; border-radius: 12px; background: var(--site-surface);
    border: 1px solid var(--site-line);
    animation: bs-in .22s var(--site-ease) both;
}
@keyframes bs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 카드·목록 공용 글자 ────────────────────────────────────────────── */
.bs-h { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 1rem; line-height: 1.4; }
.bs-hex { font-weight: 700; color: var(--site-accent); white-space: nowrap; }
.bs-name { font-weight: 700; color: var(--site-text); overflow-wrap: anywhere; word-break: break-word; }
.bs-mean { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.6; color: var(--site-text-2); }
.bs-body .bs-lbl { margin-top: 14px; font-size: .8125rem; font-weight: 700; color: var(--site-text-3); }
.bs-body .bs-why { margin-top: 4px; font-size: .9375rem; line-height: 1.7; color: var(--site-text-2); }
.bs-checks { margin-top: 6px !important; display: grid; gap: 6px; }
.bs-checks li { position: relative; padding-left: 18px; font-size: .9375rem; line-height: 1.6; color: var(--site-text); }
.bs-checks li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 2px; border-radius: 1px; background: var(--site-accent); }

/* ── 전체 목록 ─────────────────────────────────────────────────────── */
.bs-list { margin-top: clamp(56px, 7vw, 88px); }
.bs-list h2 { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.3; }
.bs-list-intro { margin-top: 10px; font-size: 1rem; color: var(--site-text-2); }
.bs-codes { margin-top: 18px !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.bs-code {
    border-radius: 12px; background: var(--site-bg-raise); border: 1px solid var(--site-line);
    scroll-margin-top: calc(var(--site-hdr-h, 64px) + 16px);
    transition: border-color .15s var(--site-ease);
}
.bs-code[open], .bs-code:hover { border-color: var(--site-line-2); }
.bs-code:target { border-color: var(--site-accent); }
.bs-code summary { position: relative; display: block; padding: 14px 44px 14px 16px; cursor: pointer; list-style: none; }
.bs-code summary::-webkit-details-marker { display: none; }
.bs-code summary::after {
    content: ""; position: absolute; right: 18px; top: 22px; width: 8px; height: 8px;
    border-right: 2px solid var(--site-text-3); border-bottom: 2px solid var(--site-text-3);
    transform: rotate(45deg); transition: transform .2s var(--site-ease);
}
.bs-code[open] summary::after { transform: rotate(-135deg); top: 26px; }
.bs-code summary:focus-visible { outline: 2px solid var(--site-focus); outline-offset: 2px; border-radius: 12px; }
.bs-code .bs-mean { font-size: .875rem; }
.bs-code .bs-body { padding: 0 16px 16px; }

@media (max-width: 860px) {
    .bs-codes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .bs-field input { height: 52px; font-size: 1rem; }
    .bs-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .bs-card { animation: none; }
    .bs-chip, .bs-code, .bs-code summary::after { transition: none; }
}

/* 도구 목록 카드 아이콘 색(목록 통합은 총괄) — 블루스크린(중지 오류)이라 경고색. */