/* docs.css — keyfree/docs 공용 라이트 문서 테마 (2026-08-29, 인라인 <style> 중복 제거)
   구성:
   ① 전 문서 공통 — :root 토큰 + 상·하단 백링크(.doc-backnav). 9개 문서 전부 사용.
   ② body.doc 문서 테마 — 원리·개요 5종(AUTO-PASS·원격시동·원격제어·제품개요·키없이) 공통 규칙.
      셀렉터를 :where(.doc) 로 감싸 특이도를 원본과 동일하게 유지 —
      각 파일 인라인 <style>(이 파일보다 나중에 로드)이 같은 특이도로 그대로 덮어쓴다.
      검증 리포트 2종·RF 문서 2종은 body.doc 이 아니므로 ①만 적용된다. */

/* ── ① 공통 토큰 ── */
:root{
  --blue:#1B4ED1; --blue-soft:#EFF4FF;
  --orange:#F97316; --orange-soft:#FFF3EA; --orange-ink:#B4490F;  /* 글자용 — 연한 배경에서 4.87:1 (2026-09-15) */
  --gray-card:#F3F4F6; --card:#F3F4F6; --gray:#F3F4F6;
  --ink:#1F2937; --ink-soft:#4B5563; --ink-faint:#6B7280; --sub:#5B6472;
  --line:#E5E7EB; --white:#FFFFFF;
  --green:#157A43; --green-soft:#F0FDF4; --green-line:#BBF7D0;
  --red:#C81E1E; --pass:#157A43; --fail:#C81E1E;
}

html{scroll-behavior:smooth;}

/* ── ① 상·하단 백링크 ── */
.doc-backnav{max-width:880px;margin:0 auto;padding:18px 24px 0;font-size:14px;font-family:'Pretendard',sans-serif;}
.doc-backnav.bottom{padding:0 24px 44px;text-align:center;}
.doc-backnav a{color:var(--blue);font-weight:700;text-decoration:none;}

/* ── ② body.doc 문서 테마 ── */
:where(.doc,.doc *){box-sizing:border-box;margin:0;padding:0;}
body.doc{font-family:'Pretendard','Inter',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.7;-webkit-font-smoothing:antialiased;word-break:keep-all;}
:where(.doc) .wrap{max-width:880px;margin:0 auto;padding:0 24px;}

:where(.doc) header.hero{background:linear-gradient(180deg,#fff 0%,var(--blue-soft) 100%);border-bottom:1px solid var(--line);padding:84px 0 64px;text-align:center;}
:where(.doc) .hero .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--blue);background:#fff;border:1px solid var(--line);padding:7px 16px;border-radius:999px;margin-bottom:22px;}
:where(.doc) .hero h1{font-size:40px;font-weight:800;line-height:1.25;letter-spacing:-.02em;margin-bottom:18px;}
:where(.doc) .hero h1 .pt{color:var(--blue);}
:where(.doc) .hero p.lead{font-size:18px;color:var(--ink-soft);max-width:680px;margin:0 auto;}

:where(.doc) section{padding:54px 0;border-bottom:1px solid var(--line);}
:where(.doc) section:last-of-type{border-bottom:none;}
:where(.doc) .sec-num{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.08em;margin-bottom:10px;}
:where(.doc) h2{font-size:27px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px;line-height:1.3;}
:where(.doc) .sub{font-size:16px;color:var(--ink-soft);margin-bottom:6px;}
:where(.doc) p{font-size:16px;color:var(--ink-soft);margin-bottom:14px;}
:where(.doc) p strong,:where(.doc) li strong{color:var(--ink);font-weight:700;}
:where(.doc) .note{font-size:13.5px;color:var(--ink-faint);margin-top:16px;}

:where(.doc) .quote{background:var(--blue-soft);border-left:4px solid var(--blue);border-radius:0 12px 12px 0;padding:18px 22px;margin:20px 0;font-size:18px;font-weight:700;color:var(--blue);line-height:1.5;}
:where(.doc) .quote.orange{background:var(--orange-soft);border-left-color:var(--orange);color:var(--orange-ink);}

:where(.doc) .grid.three{grid-template-columns:1fr 1fr 1fr;}
:where(.doc) .card{background:var(--gray-card);border-radius:16px;padding:22px;}
:where(.doc) .card p{font-size:14.5px;color:var(--ink-soft);margin:0;}
:where(.doc) .card .k{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--blue);margin-bottom:8px;}
:where(.doc) .card.warm{background:var(--orange-soft);}
:where(.doc) .card.warm .k{color:var(--orange-ink);}
:where(.doc) .card.good{background:var(--green-soft);border:1px solid var(--green-line);}
:where(.doc) .card.bad{background:var(--orange-soft);}
:where(.doc) .card.good .k{color:var(--green);}
:where(.doc) .card.bad .k{color:var(--orange-ink);}

:where(.doc) .final{background:linear-gradient(135deg,#1E3A8A 0%,var(--blue) 100%);color:#fff;border-radius:20px;padding:38px 34px;margin-top:8px;}
:where(.doc) .final h2{color:#fff;}
:where(.doc) .final p{color:rgba(255,255,255,.92);}
:where(.doc) .final strong{color:#fff;}
:where(.doc) .final .big{font-size:20px;font-weight:700;line-height:1.6;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.25);}

:where(.doc) footer{padding:34px 0 46px;text-align:center;color:var(--ink-faint);font-size:13px;}

@media(max-width:680px){
  :where(.doc) .hero h1{font-size:29px;}
  :where(.doc) h2{font-size:22px;}
  :where(.doc) .grid,:where(.doc) .grid.three{grid-template-columns:1fr;}
}