/* ==========================================================================
   codelab 커스텀 테마 — 깔끔한 기술문서 톤 + 다크/라이트
   honkit 기본 테마(theme-default) 위에 색/간격/타이포를 덮어쓴다.
   색은 전부 CSS 변수로 두고, 라이트 기본값 → 다크는 [data-theme] / prefers-color-scheme.
   ========================================================================== */

/* 한글 가독성 표준: Pretendard */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --ink: #16191d;          /* 본문 텍스트 — 거의 검정, 또렷하게 */
  --ink-soft: #4b5563;     /* 보조 텍스트 */
  --ink-faint: #6b7480;    /* 더 흐린 텍스트 */
  --bg: #ffffff;           /* 본문 배경 */
  --bg-sidebar: #f7f8fa;   /* 사이드바 배경 */
  --bg-code: #eef1f4;      /* 인라인 코드 배경 */
  --bg-pre: #f6f8fa;       /* 코드블록 배경 */
  --border: #e1e4e8;       /* 경계선 */
  --border-soft: #eaecef;
  --accent: #2f6feb;       /* 링크/포인트 */
  --accent-soft: rgba(47, 111, 235, 0.1);
  --select: rgba(47, 111, 235, 0.18);
  --tip-bg: #f2f7ff;       /* 💡 인용 박스 배경 */
  --tip-border: #2f6feb;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Menlo", Consolas,
    "Liberation Mono", monospace;
}

html[data-theme="dark"] {
  --ink: #e6edf3;
  --ink-soft: #9aa4af;
  --ink-faint: #7d8896;
  --bg: #0f1117;
  --bg-sidebar: #12141b;
  --bg-code: #1c2029;
  --bg-pre: #161a22;
  --border: #262b36;
  --border-soft: #21262d;
  --accent: #6ea8ff;
  --accent-soft: rgba(110, 168, 255, 0.14);
  --select: rgba(110, 168, 255, 0.22);
  --tip-bg: #14203a;
  --tip-border: #6ea8ff;
}

/* 시스템이 다크이고 사용자가 수동 선택을 안 했을 때(html에 data-theme 없음) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --ink: #e6edf3;
    --ink-soft: #9aa4af;
    --ink-faint: #7d8896;
    --bg: #0f1117;
    --bg-sidebar: #12141b;
    --bg-code: #1c2029;
    --bg-pre: #161a22;
    --border: #262b36;
    --border-soft: #21262d;
    --accent: #6ea8ff;
    --accent-soft: rgba(110, 168, 255, 0.14);
    --select: rgba(110, 168, 255, 0.22);
    --tip-bg: #14203a;
    --tip-border: #6ea8ff;
  }
}

/* ---- 전역 ---- */
/* 배경과 글자를 항상 같이 묶는다 (시스템 다크일 때 배경만 흰색으로 남는 버그 방지) */
.book,
.book.font-family-0,
.book.font-family-1 {
  font-family: var(--font-sans) !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
}
.book-body,
.page-wrapper,
.body-inner { background: var(--bg) !important; }
::selection { background: var(--select); }

/* ---- 사이드바 ---- */
.book-summary {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  font-size: 14px;
}
.book-summary ul.summary li a {
  color: var(--ink-soft);
  padding: 8px 16px;
  transition: color .12s, background .12s;
}
.book-summary ul.summary li a:hover {
  color: var(--ink);
  background: var(--accent-soft);
}
.book-summary ul.summary li.active > a {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
  border-right: 2px solid var(--accent);
}
.book-summary ul.summary li.divider {
  background: var(--border-soft);
}

/* honkit 하단 "HonKit에 게시" 링크 숨김 */
.book-summary .gitbook-link,
.gitbook-link { display: none !important; }

/* ---- 본문 ---- */
.page-inner { max-width: 800px; padding: 36px 28px 72px; }
.markdown-section {
  color: var(--ink) !important;
  font-size: 17px;
  line-height: 1.82;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* honkit 기본 CSS가 연회색으로 칠하는 걸 확실히 덮어쓴다 */
.markdown-section,
.markdown-section p,
.markdown-section li,
.markdown-section td,
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section strong,
.markdown-section b {
  color: var(--ink) !important;
}
.markdown-section p { margin: 1em 0; }
.markdown-section strong { font-weight: 700; }

.markdown-section h1,
.markdown-section h2,
.markdown-section h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.markdown-section h1 { font-size: 1.9em; margin: 0 0 .8em; }
.markdown-section h2 {
  font-size: 1.35em; margin: 2em 0 .8em;
  padding-bottom: .3em; border-bottom: 1px solid var(--border-soft);
}
.markdown-section h3 { font-size: 1.1em; margin: 1.6em 0 .6em; }
.markdown-section a { color: var(--accent); text-decoration: none; }
.markdown-section a:hover { text-decoration: underline; }
.markdown-section hr { border: none; border-top: 1px solid var(--border-soft); margin: 2em 0; }

/* 인라인 코드 */
.markdown-section code {
  background: var(--bg-code);
  color: var(--ink);
  padding: .15em .4em;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: .88em;
}

/* 코드 블록 */
.markdown-section pre {
  background: var(--bg-pre);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
}
.markdown-section pre code { background: transparent; padding: 0; }

/* 인용(💡, ▶ 박스) */
.markdown-section blockquote {
  background: var(--tip-bg);
  border-left: 3px solid var(--tip-border);
  color: var(--ink);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 1.4em 0;
}
.markdown-section blockquote p { margin: .3em 0; }

/* 표 */
.markdown-section table th,
.markdown-section table td { border: 1px solid var(--border); }
.markdown-section table th { background: var(--bg-sidebar); }
.markdown-section table tr { background: var(--bg); border-top: 1px solid var(--border); }
.markdown-section table tr:nth-child(2n) { background: var(--bg-sidebar); }

/* ---- 상단 헤더(토글 아이콘 영역) ---- */
.book-header { color: var(--ink-soft); background: var(--bg); }
.book-header .btn { color: var(--ink-soft); }
.book-header .btn:hover { color: var(--ink); }
.book-header h1 { display: none; }

/* ---- 검색창 ---- */
#book-search-input {
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
}
#book-search-input input,
#book-search-input input:focus {
  color: var(--ink);
}
#book-search-input input::placeholder { color: var(--ink-faint); }

/* ---- 좌우 네비 화살표 ---- */
.navigation { color: var(--ink-faint); }
.navigation:hover { color: var(--accent); }

/* ---- 복사 버튼(copy-code-button 플러그인) ---- */
.markdown-section pre .copy-code-button,
button.copy-code-button {
  background: var(--bg-code);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
button.copy-code-button:hover { color: var(--ink); border-color: var(--accent); }

/* ---- 다크/라이트 토글 (해님/달님 스위치, 화면 우상단 고정) ---- */
#theme-toggle {
  position: fixed;
  top: 24px;
  right: 30px;
  z-index: 100;
  width: 72px;
  height: 34px;
  padding: 0;
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #5bb8ec 0%, #a9def8 100%);  /* 라이트: 낮 하늘 */
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.2);
  transition: background .4s ease;
}
#theme-toggle.is-dark {
  background: linear-gradient(135deg, #141d3b 0%, #34407a 100%);  /* 다크: 밤 하늘 */
}

/* 배경 별 (다크일 때만) */
#theme-toggle .tt-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background-image:
    radial-gradient(1.3px 1.3px at 14px 9px,  #fff 99%, transparent),
    radial-gradient(1.1px 1.1px at 25px 23px, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 34px 11px, #fff 99%, transparent),
    radial-gradient(1px 1px at 20px 16px, rgba(255,255,255,.8) 99%, transparent);
}
#theme-toggle.is-dark .tt-stars { opacity: 1; }

/* 미끄러지는 노브 */
#theme-toggle .tt-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  transition: transform .4s cubic-bezier(.4,.1,.3,1.3);
}
#theme-toggle.is-dark .tt-knob {
  transform: translateX(38px);        /* 다크일 때 오른쪽으로 */
}

/* 노브 안 해/달 SVG — 교차 페이드 (겹쳐두고 opacity 로 전환) */
#theme-toggle .tt-knob svg {
  position: absolute;
  inset: 0;
  width: 26px;
  height: 26px;
  transition: opacity .3s ease, transform .4s ease;
}
/* 해: 진한 노랑/주황 광선 */
#theme-toggle .tt-sun {
  fill: #ffcf33;
  stroke: #ff9500;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 4px rgba(255,170,20,.95));
}
/* 달: 크림빛 초승달 */
#theme-toggle .tt-moon {
  fill: #fff4c2;
  stroke: #ffe27a;
  stroke-width: 0.8;
  filter: drop-shadow(0 0 4px rgba(255,240,160,.85));
  opacity: 0;
  transform: rotate(-45deg);
}
/* 라이트=해 보임/달 숨김, 다크=반대 */
#theme-toggle.is-dark .tt-sun  { opacity: 0; transform: rotate(45deg); }
#theme-toggle.is-dark .tt-moon { opacity: 1; transform: rotate(0deg); }