:root {
  --text-color: #1A1A1A;
  --bg-color: #FFFFFF;
  --surface-0:#f4f6f8;
  --surface-1:#ffffff;
  --surface-2:#ffffff;
  --border-color:#e5e7eb;
  --muted-text:#64748b;

  /* 헤더는 흰색 유지 */
  --header-bg: #FFFFFF;
  --header-fg: #1A1A1A;

  --btn-bg: #007BFF;
  --btn-text: #FFFFFF;
  --link-color: #0056B3;
  --link-hover: #003F88;
  --font-family: 'Noto Sans KR', sans-serif;
  --table-border: #e5e7eb;
  --table-head-bg: #f1f5f9;
  --table-head-text: #111827;
  --table-body-bg:#ffffff;
  --table-row-alt: #fafafa;
  --table-text: #111827;
  --toc-bg:#f8fafc;
  --toc-border:#e5e7eb;
  --quote-bg:#f7f9fc;
  --quote-border:#cbd5e1;
  --quote-text:#475569;
  --inline-code-bg:rgba(2,6,23,0.06);


/* ===== Footer ===== */
--footer-bg:#f8fafc;
--footer-fg:#475569;
--footer-border:#e9edf2;
--footer-link:#334155;
--footer-link-hover:#0f172a;

/* ===== FAQ ===== */
--faq-bg:var(--surface-1);
--faq-border:var(--border-color);
--faq-q-bg:#f1f5f9;
--faq-q-border:#e5e7eb;
--faq-a-text:var(--text-color);
--faq-accent:#007BFF;
  /* sticky offset는 기존 로직이 덮어씀 */
}
/* 1. 기본 및 레이아웃 */
body{
  background:var(--surface-0);
  color:var(--text-color);
  font-size:16px;
  font-family:var(--font-family);
  line-height:1.8;
  margin:0;
  padding:0;
  font-display:swap;
}
main{
  background:var(--surface-1);
  max-width:960px;
  margin:14px auto 18px auto;
  border-left:1px solid var(--border-color);
  border-right:1px solid var(--border-color);
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
  border-radius:14px;
  overflow:hidden;
}
p, div, li{
  margin-top:0;
  margin-bottom:20px;
  letter-spacing:0.2px;
  overflow-wrap:break-word;
}
a{ color:var(--link-color); text-decoration:none; }
a:hover{ color:var(--link-hover); }
a:focus-visible, button:focus-visible{
  outline:3px solid #0ea5e9;
  outline-offset:2px;
  border-radius:6px;
}

img, video, iframe{ max-width:100%; height:auto; border-radius:4px; }
.container{ max-width:860px; margin:0 auto; padding:0 20px; }
main .container{ padding-top:24px; padding-bottom:40px; }

/* 2. 본문 바로가기 (웹 접근성) */
.skip-link{
  position:absolute; left:10px; top:-100px;
  padding:10px 15px; background:#333; color:#fff;
  z-index:9999; transition:top 0.3s; font-weight:bold; text-decoration:none;
}
.skip-link:focus{ top:10px; }

/* 3. 상단 헤더(전역) */
header.site-header{
  background-color:var(--header-bg);
  position:relative;
  z-index:1000;
  border-bottom:1px solid var(--border-color);   /* ✅ 경계 */
  box-shadow:0 6px 18px rgba(0,0,0,0.18);        /* ✅ 분리감 */
}
header.site-header .container{
  max-width:960px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  min-height:60px;
  gap:16px;
}
.site-logo img{ display:block; max-height:40px; width:auto; }
.header-actions{ display:flex; align-items:center; gap:16px; height:60px; z-index:2; justify-self:end; }
.header-icon{ background:none; border:none; padding:8px; cursor:pointer; line-height:0; }
.header-icon svg{ width:24px; height:24px; fill:var(--header-fg); }
.site-nav{ display:none; }
.site-nav a[aria-current="page"]{ text-decoration:underline; font-weight:bold; }
.site-nav.open{
  display:block;
  position:absolute;
  top:100%; left:0; right:0;
  background:var(--header-bg);
  padding:10px 20px;
  box-shadow:0 4px 6px rgba(0,0,0,0.2);
  z-index:3;
}
.site-nav a{
  display:block;
  color:var(--header-fg);
  padding:12px 0;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-weight:600;
}
.site-nav a:last-child{ border-bottom:none; }
#search-bar{
  display:none;
  position:absolute;
  top:100%; left:0; right:0;
  width:100%;
  background:var(--surface-2);
  padding:12px 20px;
  box-sizing:border-box;
  z-index:2;
}
#search-bar.show{ display:flex; gap:8px; }
#search-bar input{
  flex-grow:1;
  padding:10px 12px;
  border:1px solid var(--border-color);
  background:rgba(255,255,255,0.04);
  color:var(--text-color);
  border-radius:6px;
}
#search-bar button{
  padding:10px 14px;
  border:none;
  background:rgba(255,255,255,0.08);
  color:var(--text-color);
  cursor:pointer;
  border-radius:6px;
}
@media (min-width:769px){
  header.site-header{ position:sticky; top:0; box-shadow:0 1px 10px rgba(0,0,0,.25); }
  .header-icon.menu-toggle{ display:none; }
  .site-nav{
    display:flex !important;
    position:static;
    background:none;
    box-shadow:none;
    padding:0;
    gap:24px;
    justify-self:end;
  }
  .site-nav a{
    display:inline-block;
    padding:0;
    margin:0;
    border-bottom:none;
    font-weight:700;
    color:var(--header-fg);
  }
  #search-bar{ position:absolute; }
}

/* 4. 본문 콘텐츠 */
.content-frame{ padding:1px 0; }
h1, h2, h3, h4, h5, h6{
  color:var(--text-color);
  margin:1.25em 0 0.7em 0;
  line-height:1.3;
}
h1{ font-size:2.5rem; }
h2{ font-size:2rem; }
h3{ font-size:1.5rem; }

ul, ol{ padding-left:25px; }

blockquote{
  border-left:4px solid var(--quote-border);
  padding-left:20px;
  margin:20px 0;
  color:var(--quote-text);
  background:var(--quote-bg);
  border-radius:10px;
}
mark{ background:#fffb91; padding:0 4px; font-weight:bold; }

pre{
  background:#0b1020;
  color:#e5e7eb;
  border:1px solid var(--border-color);
  border-radius:10px;
  padding:16px;
  overflow-x:auto;
  white-space:pre;
  word-wrap:normal;
}
code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
:not(pre) > code{
  background-color:var(--inline-code-bg);
  padding:.2em .4em;
  margin:0;
  font-size:85%;
  border-radius:6px;
}

.page-top{ margin:6px 0 8px 0; background:transparent; }
.page-meta{ font-size:13px; color:var(--muted-text); margin:2px 0 6px 0; background:transparent; }
h1,h2,h3,h4,h5,h6,:target{ scroll-margin-top:var(--sticky-offset); }

.breadcrumb{ font-size:14px; color:var(--muted-text); margin:6px 0 8px 0; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; }
.breadcrumb a{ color:inherit; text-decoration:none; }
.breadcrumb li::after{ content:"›"; opacity:.4; margin:0 6px; }
.breadcrumb li:last-child::after{ content:""; }

/* 5. 추가 컴포넌트 (FAQ 등) */
.toc{
  margin-bottom:2em;
  padding:1em 1.5em;
  background:var(--toc-bg);
  border-radius:12px;
  border:1px solid var(--toc-border);
  border-left:4px solid #0ea5e9;
}
.toc ul{ padding-left:20px; margin-bottom:0; }

/* ---- FAQ (All Themes via variables) ---- */
.faq-box{
  margin:24px 0 28px 0;
  padding:18px 18px;
  background:var(--faq-bg);
  border:1px solid var(--faq-border);
  border-radius:14px;
}
.faq-box h2{
  margin:0 0 12px 0;
  font-size:1.6rem;
}
.faq-box dl{ margin:0; }
.faq-box dt{
  margin:14px 0 8px 0;
  padding:10px 12px;
  background:var(--faq-q-bg);
  border:1px solid var(--faq-q-border);
  border-left:5px solid var(--faq-accent);
  border-radius:12px;
  font-weight:800;
}
.faq-box dd{
  margin:0 0 10px 0;
  padding:0 12px 12px 12px;
  color:var(--faq-a-text);
  border-bottom:1px dashed var(--faq-border);
}
.faq-box dd:last-child{ border-bottom:none; }

.howto-box ol{ padding-left:22px; }

.search-results{
  background:var(--surface-2);
  border:1px solid var(--border-color);
  padding:12px 16px;
  border-radius:12px;
  margin:12px 0 20px 0;
}
.search-results ul{ padding-left:18px; }

/* ---- Tables (All Themes via variables) ---- */
table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0 28px 0;
  font-size:14px;
  color:var(--table-text);
  border:1px solid var(--table-border);
  border-radius:12px;
  overflow:hidden;
}
thead th{
  background:var(--table-head-bg);
  color:var(--table-head-text);
  font-weight:700;
  text-align:left;
  padding:10px 12px;
  border-bottom:2px solid var(--table-border);
}
tbody tr{
  background:var(--table-body-bg); /* ✅ odd rows visible */
}
tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--table-border);
  vertical-align:top;
}
tbody tr:nth-child(even){
  background:var(--table-row-alt);
}
.table-wrap{ overflow-x:auto; }
.table-wrap table{ min-width:520px; }

/* 6. 푸터 */
footer{
  background-color:var(--footer-bg);
  color:var(--footer-fg);
  border-top:1px solid var(--footer-border);     /* ✅ 경계 */
}
footer .container{
  max-width:960px;
  padding-top:30px;
  padding-bottom:30px;
  text-align:center;
  opacity:1;                                     /* ✅ 다크에서 흐려보이면 1 추천 */
}

/* 7. 맨 위로 버튼 */
#back-to-top{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9999;
  display:none;
  padding:10px 14px;
  border:0;
  border-radius:999px;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  cursor:pointer;
  background:#0ea5e9;
  color:#fff;
  font-weight:bold;
}

/* 7-1. 모바일 목차 고정 버튼 */
#toc-fab{
  position:fixed;
  right:16px;
  top:16px;
  z-index:9999;
  display:none;               /* 기본 숨김(모바일에서만 표시) */
  padding:10px 14px;
  border:1px solid var(--border-color);
  border-radius:999px;
  box-shadow:0 2px 12px rgba(0,0,0,0.25);
  cursor:pointer;
  background:var(--surface-2);
  color:var(--text-color);
  font-weight:800;
}

/* 모바일에서만 목차 버튼 노출 */
@media (max-width:768px){
  #toc-fab{ display:inline-flex; align-items:center; gap:8px; }
}

/* details 목차(요약/화살표) */
.toc.toc-collapsible{ padding:0; }
.toc.toc-collapsible > summary{
  padding:16px 18px;
  cursor:pointer;
  font-weight:900;
  list-style:none;
}
.toc.toc-collapsible > summary::-webkit-details-marker{ display:none; }
.toc.toc-collapsible > summary::after{
  content:"▾";
  float:right;
  opacity:.6;
}
.toc.toc-collapsible[open] > summary::after{ content:"▴"; }
.toc.toc-collapsible > ul{
  margin:0;
  padding:0 18px 16px 34px;
}


/* Theme Additions */
/* ✅ 페이지 전체 바탕을 아주 연한 그레이로: 본문 카드가 떠 보이게 */
body {
  background: #f4f6f8;
}

/* ✅ 본문을 “화이트 카드”로 만들기: 헤더/푸터와 구분 핵심 */
main {
  background: #ffffff;
  border-left: 0;
  border-right: 0;
  margin: 18px auto 24px auto;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  overflow: hidden; /* 둥근 모서리에서 내부 요소 삐져나옴 방지 */
}

/* ✅ 헤더: 흰색이지만 하단 경계 + 은은한 그림자 */
header.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid #e9edf2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

/* 모바일 메뉴 펼침도 흰색 유지 */
.site-nav.open { background: var(--header-bg); }
.site-nav a { color: var(--header-fg); }

/* ✅ 푸터: 본문과 확실히 분리되도록 “연한 배경 + 상단 경계” */
footer {
  background: #f8fafc;
  color: #475569;
  border-top: 1px solid #e9edf2;
  opacity: 1;
}

footer a { color: #334155; }
footer a:hover { color: #0f172a; }

/* ✅ 본문 타이포 리듬 약간 개선 (화이트 테마에서 특히 체감 큼) */
p { margin-bottom: 1.05em; }
h2 { border-left-color: #d7dee8; }
blockquote { background: #f7f9fc; border-left-color: #cbd5e1; }