/* Khairon 홈페이지 — 다크 테마(앱 색감과 통일, 배경은 한 톤 밝게) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #26262d; color: #dcdcdc;
  /* 본문 폰트 = Pretendard(자체 호스팅, /fonts/pretendard.css). 못 받으면 기존 시스템 폰트로 폴백. */
  font-family: 'Pretendard', "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: #5aa9ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: #202027; border-bottom: 1px solid #38383f;
  position: sticky; top: 0; z-index: 10;
}
.nav .brand { font-size: 20px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 9px; }
/* 로고 이미지는 자체적으로 둥근 모서리(투명 배경)라 border-radius 를 따로 주지 않는다. */
.nav .brand .brand-mark { width: 24px; height: 24px; display: block; }
.nav .brand:hover { text-decoration: none; }
.nav nav a { margin-left: 20px; color: #c4c4c4; }
.nav nav a:hover { color: #fff; text-decoration: none; }
.nav nav a.active { color: #fff; border-bottom: 2px solid #4a86e8; padding-bottom: 3px; }
.nav nav a.active:hover { text-decoration: none; }
.btn-sm {
  background: #2d6cdf; color: #fff !important; padding: 6px 14px;
  border-radius: 6px; font-size: 14px;
}
/* 언어 전환 — 다른 언어로 넘어가는 링크(현재 언어가 아니라 "바꿀 언어"를 표시한다) */
.nav nav a.lang {
  margin-left: 16px; padding: 5px 11px; font-size: 13px; color: #b8b8b8;
  border: 1px solid #4a4a54; border-radius: 6px;
}
.nav nav a.lang:hover { color: #fff; border-color: #7b7b88; text-decoration: none; }
.nav nav a.lang::before { content: "\1F310"; margin-right: 6px; opacity: .75; }

/* layout */
main { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.foot { text-align: center; color: #808080; padding: 40px 0; font-size: 13px; }

/* hero */
.hero {
  display: flex; gap: 32px; align-items: center; padding: 56px 0 40px;
  flex-wrap: wrap;
}
.hero-text { flex: 1 1 340px; }
.hero-text h1 { font-size: 44px; margin: 0 0 12px; color: #fff; }
.tagline { font-size: 17px; color: #b6b6b6; margin: 0 0 24px; }
.cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn {
  background: #2d6cdf; color: #fff !important; padding: 11px 22px;
  border-radius: 8px; font-weight: 600; font-size: 15px;
}
.btn:hover { background: #3a78ea; text-decoration: none; }
.btn-ghost { color: #d0d0d0 !important; padding: 11px 18px; border: 1px solid #48484f; border-radius: 8px; }
.btn-ghost:hover { border-color: #777; text-decoration: none; }
.ver { color: #8a8a8a; font-size: 14px; }
.hero-shot { flex: 1 1 340px; }
/* main.png(메달리온 아이콘)은 자체 라운드 모서리 + 투명 배경이라 보더·radius 를 씌우지 않는다. */
.hero-shot img {
  display: block; width: 200px; max-width: 100%; margin: 0 auto;
}

/* features */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 24px 0 8px; }
.feat { background: #30303a; border: 1px solid #3f3f49; border-radius: 10px; padding: 18px 20px; }
.feat h3 { margin: 0 0 6px; color: #e6dfa8; font-size: 16px; display: flex; align-items: center; gap: 9px; }
.feat p { margin: 0; color: #bcbcbc; font-size: 14px; }
/* 카드 제목 아이콘 — 정의는 views/icons.svg 스프라이트. stroke 가 currentColor 라 제목 색을 따라간다. */
.icon-sprite { display: none; }
.feat h3 .fi {
  flex: 0 0 auto; width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* quick start */
.quick { padding: 32px 0 48px; }
.quick h2 { color: #fff; }
.quick ol { color: #d0d0d0; }
.quick .more { color: #9a9a9a; }

/* guide 2단 레이아웃 (좌측 목차 + 본문) */
/* 목차 클릭 시 스크롤 애니메이션 없이 즉시 이동한다(scroll-behavior: smooth 제거 — 사용자 요청). */
.guide-layout { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: flex; gap: 34px; align-items: flex-start; }
.guide-layout .guide { flex: 1 1 auto; min-width: 0; }
.toc { flex: 0 0 220px; position: sticky; top: 60px; align-self: flex-start; max-height: calc(100vh - 80px); overflow-y: auto; padding: 32px 0; }
/* 목차 글자색은 본문(body #dcdcdc)과 같은 톤으로 맞춘다 — 흐릿해서 읽기 어렵다는 피드백 반영.
   대신 레벨 구분을 색 대비(흐리게)로 하지 않으므로, 굵기 · 들여쓰기 · 그룹 간격 · 서브 항목 앞
   가이드 선으로 계층을 만든다. h1=문서 제목 / h2=메인 목차 / h3=서브 목차. */
.toc-title { color: #a0a0a0; font-size: 11px; letter-spacing: .6px; margin: 0 0 10px 10px; text-transform: uppercase; }
.toc nav { display: flex; flex-direction: column; }
.toc a { display: block; color: #dcdcdc; font-size: 14px; line-height: 1.55; padding: 4px 10px; border-left: 2px solid transparent; text-decoration: none; }
.toc a:hover { color: #fff; text-decoration: none; }
.toc a.active { color: #fff; border-left-color: #4a86e8; background: rgba(255,255,255,0.05); }
/* 문서 제목 — 목차 맨 위 1개. 아래 항목들과 선으로 끊어 준다. */
.toc a.toc-l1 {
  font-weight: 700; color: #fff; font-size: 15px;
  margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid #3c3c45;
}
/* 메인 목차(h2) — 굵게 + 위쪽 여백으로 그룹의 시작임을 보인다. */
.toc a.toc-l2 { font-weight: 600; color: #f2f2f2; margin-top: 10px; }
/* 서브 목차(h3) — 한 단 들여쓰고 보통 굵기. 왼쪽 세로선으로 상위 그룹에 속함을 표시.
   (a 의 border-left 는 active 표시가 쓰므로 여기서는 ::before 로 그린다) */
.toc a.toc-l3 {
  position: relative; padding-left: 26px; font-weight: 400; font-size: 13.5px;
}
.toc a.toc-l3::before {
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0;
  border-left: 1px solid #4a4a54;
}
.guide h1, .guide h2, .guide h3 { scroll-margin-top: 72px; }
@media (max-width: 860px) {
  .guide-layout { display: block; padding: 0 24px; }
  .toc { display: none; }
}

/* guide (markdown) */
.guide { padding: 32px 0 56px; }
.guide h1 { color: #fff; border-bottom: 1px solid #3c3c45; padding-bottom: 10px; }
.guide h2 { color: #fff; margin-top: 32px; border-bottom: 1px solid #34343d; padding-bottom: 6px; }
.guide h3, .guide h4 { color: #e6e6e6; }
.guide code { background: #3a3a42; padding: 1px 6px; border-radius: 4px; color: #e0a07a; font-size: 90%; }
.guide pre { background: #1a1a1f; border: 1px solid #3c3c45; border-radius: 8px; padding: 14px; overflow-x: auto; }
.guide pre code { background: none; padding: 0; color: #dcdcdc; }
.guide table { border-collapse: collapse; width: 100%; margin: 14px 0; display: block; overflow-x: auto; }
.guide th, .guide td { border: 1px solid #46464f; padding: 7px 10px; text-align: left; font-size: 14px; }
.guide th { background: #313139; color: #f0f0f0; }
.guide blockquote { border-left: 3px solid #4a4a54; margin: 12px 0; padding: 4px 14px; color: #a6a6a6; }
.guide a { color: #5aa9ff; }
/* 가이드 제목 줄 — 제목 + PDF 다운로드 버튼(build-guide.js 가 h1 을 .guide-head 로 감싼다 · 2026-10-14) */
.guide .guide-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #3c3c45; padding-bottom: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.guide .guide-head h1 { border-bottom: 0; padding-bottom: 0; margin: 0; }
.guide .pdf-btn { flex: 0 0 auto; background: #2d6cdf; color: #fff; padding: 7px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.guide .pdf-btn::before { content: "\2913  "; }
.guide .pdf-btn:hover { background: #3b7cf0; text-decoration: none; }
/* 업데이트 내역 — 변경점 제목(번호 붙음)은 밝게, 세부 목록은 한 톤 흐리게 해 제목과 구분한다(build-guide.js 가 class 를 단다). */
.guide .cl-item { margin: 22px 0 6px; font-size: 16.5px; }
.guide .cl-item strong { color: #fff; }
.guide .cl-detail { margin: 0 0 4px; color: #a4a4ae; }
.guide .cl-detail strong { color: #c9c9d1; }

@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; }
  .hero-text h1 { font-size: 34px; }
}

/*----------------- Scrollbar (webkit, 전역) -----------------------------------
   Khairon 앱과 동일한 다크 스크롤바 — 원본: AIAssistClient/Template/Theme/black/common.css.
   ::-webkit-scrollbar 는 전역 셀렉터라 별도 한정 없이 모든 스크롤 영역(페이지 본문·가이드 목차·
   코드 블록·표)에 적용된다. 화살표 이미지는 앱 Assets 에서 public/img/scroll/ 로 복사해 왔다.
   ------------------------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: #404040;
}

::-webkit-scrollbar-thumb {
  background-color: #777777;
  border: 2px solid transparent;
  border-radius: 2px;
  background-clip: content-box;
}

/* 가로 + 세로 스크롤바가 동시에 있는 영역의 우하단 교차점 */
::-webkit-scrollbar-corner {
  background-color: #303030;
}

/* 스크롤바 화살표 버튼 (상단↑ / 하단↓ / 좌측← / 우측→).
   Chromium 기본값이 사실상 hidden 이라 display:block + 명시적 사이즈로 강제 표시한다.
   ★ :start / :end 위치 한정 필수 — :vertical:decrement 만 쓰면 increment 와 둘 다 상단에
     같이 그려져 상하 화살표가 위에 붙어 버린다. 가로도 동일. */
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment {
  display: block;
  background-color: #404040;
  background-position: center center;
  background-repeat: no-repeat;
}

::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment   { height: 12px; }

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment { width: 12px; }

::-webkit-scrollbar-button:vertical:start:decrement    { background-image: url('/img/scroll/scroll_up_arrow.png'); }
::-webkit-scrollbar-button:vertical:end:increment      { background-image: url('/img/scroll/scroll_down_arrow.png'); }
::-webkit-scrollbar-button:horizontal:start:decrement  { background-image: url('/img/scroll/scroll_left_arrow.png'); }
::-webkit-scrollbar-button:horizontal:end:increment    { background-image: url('/img/scroll/scroll_right_arrow.png'); }

/* Firefox 등 ::-webkit-scrollbar 를 지원하지 않는 브라우저용 근사치(색만 맞춘다. 화살표는 없음).
   앱은 Electron(Chromium) 전용이라 원본에 없던 규칙이지만, 홈페이지는 다른 브라우저로도 열린다.
   ★ @supports 로 감싸는 이유 — Chromium 121+ 는 표준 scrollbar-color 를 지원하고, 이 속성이
     선언되면 위의 ::-webkit-scrollbar 커스터마이즈가 통째로 무시된다. 조건 없이 쓰면 안 된다. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto; scrollbar-color: #777777 #404040; }
}

/*----------------- 인쇄 · PDF (build-pdf.js 가 헤드리스 Chrome 으로 이 규칙을 써서 가이드 PDF 를 만든다 · 2026-10-14) -----
   화면은 다크 테마지만 종이는 흰 배경 · 검은 글자. 메뉴·목차·푸터·버튼은 뺀다. ------------------------------------------ */
@page { size: A4; margin: 16mm 14mm; }
@media print {
  html, body { background: #fff !important; color: #111 !important; font-size: 11.5pt; }
  .nav, .toc, .foot, .pdf-btn { display: none !important; }
  .guide-layout { display: block !important; max-width: none; padding: 0 !important; }
  .guide { padding: 0; }
  .guide .guide-head { border-bottom-color: #999; }
  .guide h1, .guide h2, .guide h3, .guide h4 { color: #000 !important; border-color: #bbb !important; page-break-after: avoid; }
  .guide h2 { margin-top: 24px; }
  .guide a { color: #0b5cad; text-decoration: none; }
  .guide code { background: #eee !important; color: #9a2f12 !important; }
  .guide pre { background: #f4f4f4 !important; border-color: #ccc !important; page-break-inside: avoid; }
  .guide pre code { color: #111 !important; background: none !important; }
  .guide blockquote { color: #444 !important; border-left-color: #bbb !important; }
  .guide table { display: table !important; width: 100%; page-break-inside: auto; }
  .guide th, .guide td { border-color: #bbb !important; }
  .guide th { background: #e8e8e8 !important; color: #000 !important; }
  .guide img { max-width: 100%; page-break-inside: avoid; }
  li, p { orphans: 3; widows: 3; }
}