/* 405.kr PC 점검 도구 공용 스타일 — 라이트 기본 + 야간모드(data-theme="dark")
   색은 docs/LUXSYSTEM-DESIGN.md (틸 + 웜그레이). theme.js 가 data-theme 토글. */
:root{
  --t-bg:#FAF9F7; --t-surf:#FFFFFF; --t-surf2:#F3F1ED; --t-head:#FFFFFF; --t-logo:#2C2A27;
  --t-ink:#1F1E1C; --t-h2:#2C2A27; --t-body:#5C5852; --t-sub:#7C776E; --t-muted:#7C776E;
  --t-line:#E7E4DE; --t-line2:#D6D2CA;
  --t-accent:#0E8A7E; --t-accent2:#13A597; --t-link:#0B6F66;
  --t-ok:#2E9E6B; --t-warn:#D98A2B; --t-bad:#D64C4C;
}
html[data-theme="dark"]{
  --t-bg:#121110; --t-surf:#1C1B19; --t-surf2:#26241F; --t-head:#1C1B19; --t-logo:#26241F;
  --t-ink:#F3F1ED; --t-h2:#D6D2CA; --t-body:#C9C4BB; --t-sub:#A9A49B; --t-muted:#7C776E;
  --t-line:#33302B; --t-line2:#45413C;
  --t-accent:#3FC2B2; --t-accent2:#5AD3C4; --t-link:#5AD3C4;
  --t-ok:#46C088; --t-warn:#E8A24A; --t-bad:#E87070;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Pretendard Variable',Pretendard,system-ui,-apple-system,'Malgun Gothic',sans-serif;background:var(--t-bg);color:var(--t-ink);line-height:1.75;letter-spacing:-.01em}
a{color:var(--t-link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:860px;margin:0 auto;padding:0 18px}
header{background:var(--t-head);border-bottom:1px solid var(--t-line);position:sticky;top:0;z-index:20}
header .wrap{display:flex;align-items:center;gap:11px;height:60px}
.logo{width:32px;height:32px;border-radius:9px;background:var(--t-logo);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:13px;position:relative;flex:none}
.logo::after{content:'';position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--t-accent)}
header b{font-size:15px;color:var(--t-ink)}
a.logo{text-decoration:none;cursor:pointer}
a.logo:hover{filter:brightness(1.18)}
header a.ttl{font-size:15px;color:var(--t-ink);font-weight:700;text-decoration:none;cursor:pointer}
header a.ttl:hover{color:var(--t-link)}
header nav{margin-left:auto;display:flex;gap:18px;font-size:14px}
header nav a{color:var(--t-sub)}
header nav a:hover{color:var(--t-ink);text-decoration:none}
header nav a[aria-current=page]{color:var(--t-link);font-weight:800}
h1{font-size:27px;margin:28px 0 8px;line-height:1.32;background:linear-gradient(100deg,var(--t-accent),var(--t-accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2{font-size:19px;margin:32px 0 10px;color:var(--t-h2)}
h3{font-size:16px;margin:6px 0;color:var(--t-ink)}
p{margin:11px 0;color:var(--t-body)}
.lead{font-size:16.5px;color:var(--t-sub);margin:6px 0 20px}
.card{background:var(--t-surf);border:1px solid var(--t-line);border-radius:16px;padding:22px;margin:18px 0}
.btn{display:inline-block;background:linear-gradient(120deg,var(--t-accent2),var(--t-accent));color:#fff;border:0;border-radius:10px;padding:12px 22px;font-weight:800;cursor:pointer;font-size:15px}
.btn.ghost{background:var(--t-surf2);border:1px solid var(--t-line2);color:var(--t-ink)}
.btn:disabled{opacity:.5;cursor:default}
.muted{color:var(--t-muted);font-size:13.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:20px 0}
.tool{display:block;background:var(--t-surf);border:1px solid var(--t-line);border-radius:14px;padding:20px;transition:.15s}
.tool:hover{border-color:var(--t-accent);transform:translateY(-2px);text-decoration:none}
.tool .ic{font-size:28px;display:block;margin-bottom:8px;color:var(--t-accent)}
.tool h3{margin:0 0 5px}
.tool p{font-size:13px;color:var(--t-muted);margin:0}
ul,ol{margin:10px 0 10px 22px;color:var(--t-body)}
li{margin:6px 0}
b,strong{color:var(--t-ink)}
.stat{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0}
.stat .box{flex:1 1 100px;background:var(--t-surf);border:1px solid var(--t-line);border-radius:12px;padding:13px 15px;text-align:center}
.stat .k{color:var(--t-muted);font-size:12.5px}
.stat .v{font-size:28px;font-weight:800;margin-top:4px;color:var(--t-ink)}
.ok{color:var(--t-ok)}.warn{color:var(--t-warn)}.bad{color:var(--t-bad)}
.note{background:var(--t-surf2);border-left:3px solid var(--t-accent);border-radius:8px;padding:12px 15px;margin:14px 0;font-size:14px;color:var(--t-body)}
.tag{display:inline-block;background:var(--t-surf2);border:1px solid var(--t-line);border-radius:999px;padding:3px 11px;font-size:12px;color:var(--t-link);margin:2px 3px 2px 0}
footer{border-top:1px solid var(--t-line);margin-top:44px;padding:26px 0 40px;color:var(--t-muted);font-size:12.5px}
footer a{color:var(--t-muted)}
footer .row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.kbd{display:inline-block;min-width:34px;text-align:center;padding:7px 6px;margin:2px;border:1px solid var(--t-line2);border-radius:7px;background:var(--t-surf);font-size:12px;color:var(--t-body);font-family:monospace}
.kbd.hit{background:var(--t-accent);border-color:var(--t-accent2);color:#fff}
@media(max-width:600px){h1{font-size:22px}.card{padding:16px}.stat .v{font-size:22px}
header .wrap{gap:8px}
header a.ttl{font-size:13px;white-space:nowrap;flex:none}
header nav{gap:11px;font-size:13px;flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
header nav::-webkit-scrollbar{display:none}
header nav a{white-space:nowrap;flex:none}}

/* ── 가이드 글 공용 요소 (표·FAQ·팁) — 라이트/다크 자동 ── */
.gtable{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.gtable caption{caption-side:top;text-align:left;color:var(--t-sub);font-size:13px;margin-bottom:7px}
.gtable th,.gtable td{border:1px solid var(--t-line);padding:10px 13px;text-align:left;vertical-align:top}
.gtable th{background:var(--t-surf2);color:var(--t-h2);font-weight:700;white-space:nowrap}
.gtable td b{color:var(--t-ink)}
.gtable tr:hover td{background:var(--t-surf2)}
.faq{border:1px solid var(--t-line);border-radius:10px;margin:9px 0;background:var(--t-surf)}
.faq>summary{padding:14px 16px;font-weight:700;cursor:pointer;color:var(--t-ink);list-style:none;font-size:15px}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary::before{content:'＋';color:var(--t-accent);font-weight:800;margin-right:9px}
.faq[open]>summary::before{content:'－'}
.faq .a{padding:0 16px 15px;color:var(--t-body);font-size:14.5px;line-height:1.8}
.tip{background:var(--t-surf2);border-left:3px solid var(--t-ok);border-radius:8px;padding:12px 15px;margin:14px 0;font-size:14px;color:var(--t-body)}
.warn{background:var(--t-surf2);border-left:3px solid var(--t-warn);border-radius:8px;padding:12px 15px;margin:14px 0;font-size:14px;color:var(--t-body)}
.crumb{font-size:13px;color:var(--t-sub);margin:18px 0 0}
.crumb a{color:var(--t-link)}
.toc{background:var(--t-surf);border:1px solid var(--t-line);border-radius:12px;padding:15px 18px;margin:18px 0}
.toc b{display:block;color:var(--t-h2);font-size:13.5px;margin-bottom:8px}
.toc a{color:var(--t-link);text-decoration:none;font-size:14px}
.toc li{margin:4px 0}
.relbox{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
@media(max-width:520px){.relbox{grid-template-columns:1fr}}
.relbox a{display:block;background:var(--t-surf);border:1px solid var(--t-line);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--t-ink);font-weight:700;font-size:14.5px;transition:.15s}
.relbox a:hover{border-color:var(--t-accent)}
.relbox a span{display:block;color:var(--t-sub);font-size:12.5px;font-weight:500;margin-top:3px}