/* ============================================================
   Light Theme — Blue Pattern | vibe-coding docs
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,900&display=swap');

:root {
  --bg-page:     #FAFAFA;
  --bg-card:     #FFFFFF;
  --bg-code-inline: #F3F6FB;
  --bg-code-block:  #1A1A2E;
  --text-main:   #1A1A1A;
  --text-sub:    #666666;
  --text-code:   #E8EAF0;
  --border:      #E8ECF0;
  --accent-main: #1F5795;
  --accent-sub:  #001C58;
  --nav-width:   240px;
  --max-width:   1100px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg-page);
  color: var(--text-main);
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  font-size: 16px;
}

/* ── Layout ──────────────────────────────────────────────── */
.site-wrapper { display: flex; min-height: 100vh; }

.site-nav {
  width: var(--nav-width);
  min-width: var(--nav-width);
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 2.5rem 1.5rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.site-nav .nav-logo {
  font-family: 'Cabinet Grotesk', 'Noto Sans KR', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.04em;
  color: var(--accent-sub);
  text-decoration: none;
  display: block;
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.site-nav .nav-tagline {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.site-nav ul { list-style: none; }
.site-nav ul li { margin-bottom: 0.2rem; }

.site-nav ul li a {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 5px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-sub);
  text-decoration: none;
  transition: all 0.15s ease;
}

.site-nav ul li a:hover,
.site-nav ul li a.active {
  background: #EEF3FB;
  color: var(--accent-main);
}

.site-nav ul li a.active { font-weight: 700; }

.site-main {
  flex: 1;
  min-width: 0;
  padding: 4rem 5rem;
  max-width: calc(var(--max-width) + 4rem);
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Cabinet Grotesk', 'Noto Sans KR', sans-serif;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--text-main);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 1.5rem; }
h2 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 800; margin-top: 3.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); color: var(--accent-sub); }
h3 { font-size: 1.15rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.6rem; color: var(--accent-main); }
h4 { font-size: 1rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1.2rem; }
strong { font-weight: 700; }

a { color: var(--accent-main); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
a:hover { border-bottom-color: var(--accent-main); }

/* ── Components ──────────────────────────────────────────── */
.badge {
  display: inline-block;
  background: var(--accent-sub);
  color: #fff;
  padding: 6px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.78rem;
  margin-bottom: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.text-mark { position: relative; display: inline; z-index: 1; }
.text-mark::after {
  content: '';
  position: absolute;
  bottom: 0.1em; left: -1%;
  width: 102%; height: 0.4em;
  background: var(--accent-main);
  opacity: 0.15;
  z-index: -1;
  border-radius: 2px;
}

.page-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.page-header h1 { margin-bottom: 0.5rem; }
.page-header .page-meta { font-size: 0.85rem; color: var(--text-sub); }

/* ── Blockquote ──────────────────────────────────────────── */
blockquote {
  border-left: 4px solid var(--accent-main);
  background: #EEF3FB;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 0 6px 6px 0;
}
blockquote p { margin: 0; color: var(--accent-sub); font-size: 0.95rem; font-weight: 500; }

/* ── Code ────────────────────────────────────────────────── */
/*
  Rouge HTML 구조:
  <div class="language-bash highlighter-rouge">   ← 언어 있을 때 외부 래퍼
    <div class="highlight">                        ← 항상 있는 래퍼
      <pre class="highlight">                      ← pre에도 highlight 클래스 붙음
        <code>...</code>
      </pre>
    </div>
  </div>

  언어 없는 코드블록:
  <div class="highlighter-rouge">
    <div class="highlight">
      <pre class="highlight"><code>...</code></pre>
    </div>
  </div>
*/

/* 인라인 코드 — pre 밖의 code만 */
code {
  display: inline;           /* 블록 전환 방지 — 명시적으로 인라인 고정 */
  font-family: 'Nanum Gothic Coding', monospace;
  font-size: 0.875em;
  background: var(--bg-code-inline);
  color: var(--accent-main);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* Rouge 래퍼들 — 전부 블록 레이아웃 강제 */
.highlighter-rouge,
div.highlight,
pre.highlight,
pre {
  display: block !important;
  position: static !important;
}

/* 바깥 래퍼 */
.highlighter-rouge {
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #2D2D4A;
}

/* 안쪽 div.highlight */
div.highlight {
  background: var(--bg-code-block);
  margin: 0 !important;
  padding: 0;
  border: none !important;
  border-radius: 0;
}

/* pre — 언어 없는 단독 pre 포함 */
pre,
pre.highlight {
  background: var(--bg-code-block);
  color: var(--text-code);
  font-family: 'Nanum Gothic Coding', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  padding: 1.5rem;
  margin: 0 !important;
  overflow-x: auto;
  white-space: pre;
  border: none !important;
  border-radius: 0;
}

/* pre 안의 code — 인라인 스타일 전부 제거 */
pre code,
pre.highlight code,
div.highlight pre code {
  display: inline !important;
  background: transparent !important;
  color: var(--text-code) !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  white-space: inherit !important;
}

/* 언어 없는 단독 pre (highlighter-rouge 래퍼 없을 때) */
.page-content > pre,
article > pre {
  margin: 1.5rem 0 !important;
  border-radius: 8px;
  border: 1px solid #2D2D4A !important;
}

/* ── Tables ──────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
th { background: var(--accent-sub); color: #fff; font-weight: 700; padding: 0.75rem 1rem; text-align: left; font-family: 'Cabinet Grotesk', 'Noto Sans KR', sans-serif; }
td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); }
tr:nth-child(even) td { background: #F5F7FA; }
tr:hover td { background: #EEF3FB; }

/* ── Lists ───────────────────────────────────────────────── */
ul, ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
li { margin-bottom: 0.4rem; line-height: 1.7; }

ul.task-list { list-style: none; padding-left: 0.25rem; }
ul.task-list li { padding-left: 1.75rem; position: relative; }
ul.task-list li input[type="checkbox"] { position: absolute; left: 0; top: 0.35rem; accent-color: var(--accent-main); }

/* ── Misc ────────────────────────────────────────────────── */
hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }

.site-footer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-sub);
  padding: 2rem 5rem;
  border-top: 1px solid var(--border);
}

/* ── Dark Mode — Cyber Electric Blue (Dark_Theme v1.0) ─────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:        #000000;
    --bg-card:        #111111;
    --bg-code-inline: #0D1117;
    --bg-code-block:  #0D1117;
    --text-main:      #FFFFFF;
    --text-sub:       #888888;
    --text-code:      #E8EAF0;
    --border:         #222222;
    --accent-main:    #007AFF;
    --accent-sub:     #003EB3;
    --glow-color:     rgba(0, 122, 255, 0.25);
  }

  /* 사이드바 */
  .site-nav {
    background: #0A0A0A;
    border-right-color: #222222;
  }
  .site-nav .nav-logo { color: #60A5FA; }
  .site-nav .nav-tagline { border-bottom-color: #222222; }
  .site-nav ul li a { color: #888888; }
  .site-nav ul li a:hover,
  .site-nav ul li a.active {
    background: rgba(0, 122, 255, 0.12);
    color: #007AFF;
  }

  /* 타이포그래피 */
  h2 { color: #60A5FA; border-bottom-color: #222222; }
  h3 { color: #007AFF; }
  a  { color: #58A6FF; }
  a:hover { border-bottom-color: #58A6FF; }

  /* 페이지 헤더 */
  .page-header { border-bottom-color: #222222; }

  /* 모드에서 blockquote 배경은 더 어둥게 */
  blockquote {
    background: rgba(0, 122, 255, 0.08);
    border-left-color: #007AFF;
  }
  blockquote p { color: #60A5FA; }

  /* 인라인 코드 */
  code {
    background: #0D1117;
    color: #58A6FF;
    border-color: #30363D;
  }

  /* 코드블록 */
  .highlighter-rouge {
    border-color: #30363D;
  }
  div.highlight {
    background: #0D1117;
  }
  pre,
  pre.highlight {
    background: #0D1117;
  }
  .page-content > pre,
  article > pre {
    border-color: #30363D !important;
  }

  /* 테이블 */
  th { background: var(--accent-sub); }
  td { border-bottom-color: #222222; }
  tr:nth-child(even) td { background: #111111; }
  tr:hover td { background: rgba(0, 122, 255, 0.08); }

  /* badge — Dark Theme 스타일 (outline) */
  .badge {
    background: transparent;
    border: 1.5px solid var(--accent-main);
    color: var(--accent-main);
  }

  /* 기타 */
  hr { border-top-color: #222222; }
  .site-footer { border-top-color: #222222; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .site-main { padding: 2rem 1.5rem; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.3rem; }
}