/* 프레임 드랍 원인 진단(/tools/frame-drop/) 전용. tools-bottleneck.css 다음에 링크된다.
 * 토큰(--site-*, --bn-*)·.bn 블록·.bn-field·.bn-go·.bn-doc·.bn-faq 를 그대로 쓴다. 색은 토큰만.
 * 모양 규칙: 입력·칩·버튼 10px, 카드 16px, 큰 패널 20px, 작은 표시 6px(PC 부품 진단과 같다).
 * 구조: 제목 → [질문 패널 | 결과] 2단(1024px 이하 1단) → 설명(.bn-doc).
 * ⚠ prefers-reduced-motion 은 CSS 전환을 끄는 데만 쓴다(JS 에서 기능을 막지 않는다).
 */

.page-lag { --lg-ok: var(--site-success, #2ecc71); }

.lg-layout {
    margin-top: 28px;
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ── 질문 패널 ─────────────────────────────────────────────────── */
.lg-form {
    display: grid; gap: 22px;
    padding: 20px;
    border-radius: 20px;
    background: var(--site-surface, #232323);
    border: 1px solid var(--site-line, rgba(255, 255, 255, .08));
}
.lg-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.lg-q legend { padding: 0; margin-bottom: 10px; font-size: .9375rem; font-weight: 700; color: var(--site-text, #f0f0f0); }
.lg-hint { margin-left: 6px; font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
.lg-frame-only { display: grid; gap: 22px; }
/* JS 가 있으면 인터넷 렉·PC 전반 갈래에서는 프레임 질문(양상·상황·GPU 사용률·PC 종류)을 숨긴다(서버도 그 갈래에서는 무시한다).
 * ⚠ 게임 칸은 인터넷 렉 갈래에서도 보인다(게임별 네트워크 안내가 나온다). '더 정확하게' 묶음은 PC 전반 갈래에서만 숨긴다. */
html.lg-js .lg-form[data-kind="net"] .lg-frame-only,
html.lg-js .lg-form[data-kind="pc"] .lg-frame-only,
html.lg-js .lg-form[data-kind="net"] .lg-frame-q,
html.lg-js .lg-form[data-kind="pc"] .lg-opt { display: none; }

/* 숨긴 입력: 화면에서 감추되 키보드 포커스는 받는다. */
.lg-kind input, .lg-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

/* 데스크톱 2단에서는 질문 칸이 좁아 한 줄에 하나, 1단(1024px 이하)이 되면 두 개씩(아래 반응형). */
.lg-kinds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lg-kind {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 12px; border-radius: 10px; cursor: pointer;
    background: var(--site-surface-2, #2a2a2a); border: 1px solid transparent;
    transition: background-color .15s, border-color .15s;
}
.lg-kind:hover { background: var(--site-surface-3, #333); }
.lg-kind-ico {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
    background: var(--site-bg-raise, #1e1e1e); color: var(--site-text-2, #b0b0b0); font-size: 1rem;
    transition: background-color .15s, color .15s;
}
.lg-kind-t { font-size: .875rem; font-weight: 650; line-height: 1.4; color: var(--site-text, #f0f0f0); }
.lg-kind-t small { display: block; margin-top: 3px; font-size: .75rem; font-weight: 500; line-height: 1.45; color: var(--site-text-3, #949494); }
.lg-kind:has(input:checked) { border-color: var(--site-accent, #7aa5f2); background: rgba(122, 165, 242, .1); }
/* 밝아진 배경(hover #333 · 선택 파란 틴트) 위 12px 보조 문구는 text-3 이면 4.5:1 에 못 미친다(4.16·4.37) → text-2. */
.lg-kind:hover .lg-kind-t small,
.lg-kind:has(input:checked) .lg-kind-t small { color: var(--site-text-2, #b0b0b0); }
.lg-kind:has(input:checked) .lg-kind-ico { background: var(--site-accent, #7aa5f2); color: #10213f; }
.lg-kind:has(input:focus-visible) { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }

.lg-chips, .lg-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-chip { position: relative; display: inline-flex; cursor: pointer; }
.lg-chip span {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 12px; border-radius: 10px;
    background: var(--site-surface-2, #2a2a2a); border: 1px solid transparent;
    font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--site-text-2, #b0b0b0);
    transition: background-color .15s, border-color .15s, color .15s;
}
.lg-chip:hover span { background: var(--site-surface-3, #333); color: var(--site-text, #f0f0f0); }
.lg-chip input:checked + span { border-color: var(--site-accent, #7aa5f2); background: rgba(122, 165, 242, .1); color: var(--site-text, #f0f0f0); }
.lg-chip--check input:checked + span::before { content: "\f272"; font-family: "bootstrap-icons"; font-size: .8125rem; color: var(--site-accent, #7aa5f2); }
.lg-chip input:focus-visible + span { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.lg-chip:active span { transform: translateY(1px); }

.lg-help { display: flex; gap: 7px; margin-top: 10px !important; font-size: .8125rem; line-height: 1.55; color: var(--site-text-3, #949494); }
.lg-help .bi { flex: none; margin-top: 3px; }

.lg-opt { border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); padding-top: 16px; }
.lg-opt summary {
    position: relative; padding-right: 28px; font-size: .9375rem; font-weight: 700; color: var(--site-text-2, #b0b0b0);
    cursor: pointer; list-style: none;
}
.lg-opt summary::-webkit-details-marker { display: none; }
.lg-opt 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 .18s;
}
.lg-opt[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lg-opt summary:hover { color: var(--site-text, #f0f0f0); }
.lg-opt summary:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 4px; }
.lg-opt[open] { display: grid; gap: 18px; }
.lg-opt[open] > summary { margin-bottom: 0; }
.lg-game select { height: 58px; }
.lg-game.has-combo::after { content: none; }
.lg-game::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;
}

.lg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-submit { flex: 1 1 auto; }
.lg-reset {
    display: none; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 14px;
    border-radius: 10px; border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); background: transparent;
    color: var(--site-text-2, #b0b0b0); font: 600 .875rem/1.2 var(--bn-font); cursor: pointer;
    transition: background-color .15s, color .15s;
}
.lg-reset:hover { background: var(--site-surface-2, #2a2a2a); color: var(--site-text, #f0f0f0); }
.lg-reset:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.lg-reset:active { transform: translateY(1px); }
/* JS 가 있으면 고르는 즉시 결과가 바뀌므로 제출 버튼 대신 '처음부터 다시'만. */
html.lg-js .lg-submit { display: none; }
html.lg-js .lg-reset { display: inline-flex; flex: 1 1 auto; }

/* ── 결과 ──────────────────────────────────────────────────────── */
.lg-report { display: grid; gap: 12px; transition: opacity .2s; }
/* 카드의 '루티미제에서 바꿀 수 있는 설정'(#lg-lut) 같은 앵커로 이동하면 고정 헤더 아래에 제목이 오게. */
.lg-report [id] { scroll-margin-top: calc(var(--site-hdr-h, 65px) + 16px); }
.lg-report.is-loading, .lg-live.is-loading .lg-report { opacity: .55; }
.lg-sec-t { margin-top: 4px !important; font-size: 1.0625rem !important; font-weight: 750; letter-spacing: -.01em; }
.lg-sec-t--more { margin-top: 18px !important; color: var(--site-text-2, #b0b0b0) !important; }
.lg-sec-hint { margin-top: -4px !important; font-size: .875rem; color: var(--site-text-3, #949494); }
.lg-cards, .lg-more { display: grid; gap: 10px; }

.lg-empty {
    display: grid; justify-items: start; gap: 10px;
    padding: clamp(28px, 4vw, 44px); border-radius: 20px; background: var(--site-surface, #232323);
}
.lg-empty-ico {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
    background: var(--site-bg-raise, #1e1e1e); color: var(--site-accent, #7aa5f2); font-size: 1.25rem;
}
.lg-empty h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-weight: 800; letter-spacing: -.02em; }
.lg-empty p { max-width: 38em; color: var(--site-text-2, #b0b0b0); }

.lg-tip {
    display: flex; gap: 10px; padding: 14px 16px; border-radius: 16px;
    background: rgba(122, 165, 242, .08); border: 1px solid rgba(122, 165, 242, .22);
    font-size: .9375rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0);
}
.lg-tip .bi { flex: none; margin-top: 3px; color: var(--site-accent, #7aa5f2); }

.lg-card {
    display: block; padding: 20px 22px; border-radius: 16px;
    background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line, rgba(255, 255, 255, .08));
}
.lg-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.lg-ico {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    background: var(--site-surface-2, #2a2a2a); color: var(--site-text-2, #b0b0b0); font-size: 1.0625rem;
}
.lg-card--win .lg-ico { color: var(--site-accent, #7aa5f2); }
.lg-card--hw .lg-ico { color: var(--bn-warn); }
.lg-card-t { min-width: 0; }
.lg-card h3, .lg-h3 { display: block; font-size: 1.0625rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.35; color: var(--site-text, #f0f0f0); }
.lg-why { margin-top: 6px !important; font-size: .9375rem; line-height: 1.65; color: var(--site-text-2, #b0b0b0); text-wrap: pretty; }
.lg-ev {
    padding: 3px 8px; border-radius: 6px; white-space: nowrap;
    font-size: .75rem; font-weight: 650; line-height: 1.4;
    color: var(--lg-ok); background: rgba(46, 204, 113, .1);
}
.lg-ev.is-likely { color: var(--bn-warn); background: rgba(243, 156, 18, .12); }

.lg-steps { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lg-step { padding: 14px 16px; border-radius: 12px; background: var(--site-surface, #232323); }
.lg-step h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: .8125rem; font-weight: 700; color: var(--site-text-3, #949494); }
.lg-list { display: grid; gap: 8px; counter-reset: lg; }
.lg-list li { position: relative; padding-left: 26px; font-size: .9rem; line-height: 1.6; color: var(--site-text, #f0f0f0); counter-increment: lg; }
.lg-list li::before {
    content: counter(lg); position: absolute; left: 0; top: .2em;
    display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px;
    background: var(--site-surface-3, #333); font-size: .6875rem; font-weight: 700; color: var(--site-text-2, #b0b0b0);
}
.lg-list--dot li::before { content: ""; top: .72em; width: 6px; height: 6px; border-radius: 50%; left: 6px; background: var(--site-text-3, #949494); }
.lg-list--num { margin-top: 16px !important; }
.lg-note { margin-top: 14px !important; font-size: .875rem; color: var(--site-text-3, #949494); }

.lg-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); display: grid; gap: 8px; }
.lg-k { flex: none; margin-right: 10px; font-size: .75rem; font-weight: 650; color: var(--site-text-3, #949494); }
.lg-posts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: .875rem; }
.lg-posts .lg-k { flex-basis: 100%; }
.lg-posts a, .lg-app a { color: var(--site-accent, #7aa5f2); text-decoration: none; font-weight: 600; line-height: 1.5; }
.lg-posts a:hover, .lg-app a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg-app { font-size: .875rem; }
.lg-bneck {
    justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 9px 12px;
    border-radius: 10px; background: var(--site-surface-2, #2a2a2a); color: var(--site-text, #f0f0f0);
    font-size: .875rem; font-weight: 650; text-decoration: none; transition: background-color .15s;
}
.lg-bneck:hover { background: var(--site-surface-3, #333); }
.lg-bneck .bi-arrow-right { font-size: .75rem; color: var(--site-text-3, #949494); transition: transform .15s; }
.lg-bneck:hover .bi-arrow-right { transform: translateX(2px); }
.lg-posts a:focus-visible, .lg-app a:focus-visible, .lg-bneck:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 4px; }

/* 접힌 카드(함께 확인할 것) */
.lg-card--fold { padding: 0; }
.lg-card--fold > summary { padding: 14px 44px 14px 16px; cursor: pointer; list-style: none; position: relative; align-items: center; }
.lg-card--fold > summary::-webkit-details-marker { display: none; }
.lg-card--fold > summary::after {
    content: ""; position: absolute; right: 20px; 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 .18s;
}
.lg-card--fold[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lg-card--fold > summary:hover { background: rgba(255, 255, 255, .02); border-radius: 16px; }
.lg-card--fold > summary:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 16px; }
.lg-card--fold .lg-ico { width: 30px; height: 30px; font-size: .9375rem; }
.lg-card--fold .lg-h3 { font-size: 1rem; }
.lg-card--fold > .lg-why, .lg-card--fold > .lg-steps, .lg-card--fold > .lg-foot { margin-inline: 16px; }
.lg-card--fold > .lg-why--fold { margin-top: 0 !important; }
.lg-card--fold > .lg-foot { margin-bottom: 16px; }

/* 게임 공식 안내 */
.lg-game-card { padding: 18px 20px; border-radius: 16px; background: var(--site-surface, #232323); }
.lg-game-card h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 750; }
.lg-game-card h3 img { border-radius: 6px; }
.lg-game-card h3 .bi { color: var(--site-text-3, #949494); }
.lg-game-card .lg-list { margin-top: 12px !important; }

/* 루티미제(자사 제품) */
.lg-lut {
    margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: end;
    padding: clamp(20px, 3vw, 26px); border-radius: 20px;
    background: var(--site-surface, #232323); border: 1px solid rgba(122, 165, 242, .28);
}
.lg-lut h2 { display: flex; align-items: center; gap: 9px; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); font-weight: 750; letter-spacing: -.015em; }
.lg-lut h2 .bi { color: var(--site-accent, #7aa5f2); }
.lg-lut-text > p { margin-top: 8px !important; max-width: 40em; font-size: .9375rem; color: var(--site-text-2, #b0b0b0); }
.lg-lut-list { margin-top: 12px !important; display: flex; flex-wrap: wrap; gap: 6px; }
.lg-lut-list li {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px;
    background: var(--site-bg-raise, #1e1e1e); font-size: .8125rem; font-weight: 600; color: var(--site-text, #f0f0f0);
}
.lg-lut-list .bi { color: var(--lg-ok); }
.lg-lut .lg-lut-note { margin-top: 12px !important; font-size: .8125rem; color: var(--site-text-3, #949494); }
.lg-lut-btn { display: inline-flex; align-items: center; justify-content: center; padding-inline: 22px; text-decoration: none; white-space: nowrap; }

/* ── 반응형 ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .lg-layout { grid-template-columns: minmax(0, 1fr); }
    .lg-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .lg-form { padding: 14px; border-radius: 16px; }
    .lg-kinds { grid-template-columns: minmax(0, 1fr); }
    .lg-steps { grid-template-columns: minmax(0, 1fr); }
    .lg-card { padding: 16px; }
    .lg-card-head { grid-template-columns: auto minmax(0, 1fr); }
    .lg-card-head .lg-ev { grid-column: 2; justify-self: start; }
    .lg-card--fold > summary { padding: 12px 40px 12px 12px; }
    .lg-card--fold > .lg-why, .lg-card--fold > .lg-steps, .lg-card--fold > .lg-foot { margin-inline: 12px; }
    .lg-lut { grid-template-columns: minmax(0, 1fr); }
    .lg-lut-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-kind, .lg-kind-ico, .lg-chip span, .lg-reset, .lg-report, .lg-bneck, .lg-bneck .bi-arrow-right,
    .lg-opt summary::after, .lg-card--fold > summary::after { transition: none; }
}

/* ── 빈 상태 안내 문단(2026-11-08 SEO: H2 → p, 모양은 그대로) ───────────── */
.lg-empty .lg-empty-t { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--site-text, #f0f0f0); }

/* ── 기본 화면 '주요 원인' 목록(서버 렌더, 색인 대상) ─────────────────── */
.lg-cause-list { margin-top: 12px !important; display: grid; gap: 10px; }
.lg-cause { padding: 14px 16px; border-radius: 12px; background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.bn-doc-sec .lg-cause-n { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1rem; line-height: 1.4; color: var(--site-text, #f0f0f0); }
.lg-cause-n strong { font-weight: 700; }
.bn-doc-sec .lg-cause-why { margin-top: 6px; font-size: .9375rem; line-height: 1.65; }
.lg-cause-tool {
    margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 9px;
    background: var(--site-surface-2, #2a2a2a); color: var(--site-text, #f0f0f0); font-size: .875rem; font-weight: 600; text-decoration: none;
}
.lg-cause-tool:hover { background: var(--site-surface-3, #333); }
.lg-cause-tool .bi-arrow-right { font-size: .75rem; color: var(--site-text-3, #949494); }
.lg-cause-tool:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.lg .lg-links { display: flex; flex-wrap: wrap; gap: 8px; }