/* Runpod HOL — self-contained stylesheet. No framework, no remote theme.
   Runpod HOL — 자체 스타일시트. 프레임워크와 원격 테마를 쓰지 않는다.

   Palette taken from Runpod's own brand assets:
   색상은 Runpod 공식 자산에서 가져왔다:
     #5F4CFE  primary violet   (docs.json colors.primary)
     #9289FE  accent violet    (docs.json colors.dark / colors.light)
     #BBB6FD  pale violet      (runpod.io)
     #673AB7  logo purple      (og-icon-trim.svg)
     #223354  navy             (og-logo-light.svg)
     #050505  near-black       (runpod.io)

   Dark is the default. Light is opt-in via [data-theme="light"].
   기본은 다크. 라이트는 [data-theme="light"] 로 선택한다. */

:root,
[data-theme="dark"] {
  --bg: #08080c;
  --bg-soft: #101017;
  --bg-inset: #191922;
  --fg: #e9e9f2;
  --fg-muted: #9b9bb2;
  --border: #262631;
  --border-strong: #34343f;

  --accent: #9289fe;        /* readable violet on dark */
  --accent-strong: #5f4cfe; /* brand primary, for filled controls */
  --accent-soft: #191534;
  --on-accent: #ffffff;

  /* Heading gradient stops. Both ends stay bright on dark so the h1 keeps
     well clear of the 3:1 large-text minimum.
     제목 그라디언트. 다크에서는 양 끝을 모두 밝게 유지해
     대형 텍스트 최소 대비 3:1 을 여유 있게 넘긴다. */
  --h1-from: #bbb6fd;
  --h1-to: #9289fe;

  --warn-bg: #2a2113;
  --warn-border: #d0a03c;
  --warn-fg: #f0d9a8;
  --danger-bg: #2c1720;
  --danger-border: #e0567c;
  --danger-fg: #f6bdcd;
  --ok-bg: #10281c;
  --ok-fg: #7fd7a4;

  --radius: 8px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-soft: #f4f7fb;   /* runpod.io light surface */
  --bg-inset: #e9edf5;
  --fg: #223354;        /* runpod navy */
  --fg-muted: #5a6a85;
  --border: #d7dee9;
  --border-strong: #c2ccdb;

  --accent: #5f4cfe;
  --accent-strong: #5f4cfe;
  --accent-soft: #efecff;
  --on-accent: #ffffff;

  --h1-from: #5f4cfe;
  --h1-to: #673ab7;   /* logo purple / 로고 퍼플 */

  --warn-bg: #fff7e6;
  --warn-border: #d99b1a;
  --warn-fg: #6b4c07;
  --danger-bg: #fdeef1;
  --danger-border: #d84e70;
  --danger-fg: #8a1f3c;
  --ok-bg: #e2f5e9;
  --ok-fg: #146138;

  --shadow: 0 1px 2px rgba(34, 51, 84, 0.08);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Apple SD Gothic Neo", "Noto Sans KR", Roboto, sans-serif;
  word-break: keep-all; /* keeps Korean line breaks sane / 한글 줄바꿈 개선 */
}

.wrap { max-width: 900px; margin: 0 auto; padding: 0 20px; }

/* --- Two-column layout ----------------------------------------------
   Page-level navigation stays in the header bar at every width. This left
   column holds only the current page's sections, and only where there is
   room for it — below 1000px the page falls back to a single column.
   페이지 이동은 모든 너비에서 상단 바가 담당한다. 이 좌측 열은 현재 페이지의
   섹션만 담으며, 공간이 있을 때만 나타난다. 1000px 미만에서는 한 열로 돌아간다. */

.layout { display: block; }

.sidebar { display: none; }

@media (min-width: 1000px) {
  .wrap { max-width: 1180px; }

  .layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }

  .sidebar {
    display: block;
    position: sticky;
    top: calc(var(--topbar-h, 100px) + 20px);
    max-height: calc(100vh - var(--topbar-h, 100px) - 40px);
    overflow-y: auto;
    padding: 32px 0 40px;
    font-size: 14px;
    scrollbar-width: thin;
  }

  /* hidden is set by script when a page has no sections */
  .sidebar[hidden] { display: none; }
}

.side-group {
  margin: 0 0 8px;
  padding-left: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  opacity: 0.75;
}

/* In-page headings for the current page, injected by script.
   현재 페이지의 제목 목록. 스크립트가 삽입한다. */
.side-toc {
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
  border-left: 1px solid var(--border);
}

.side-toc:empty { display: none; }

.side-toc a {
  display: block;
  padding: 3px 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: 4px;
}

/* Two levels: h2 sections, h3 beneath them.
   두 단계: h2 섹션과 그 아래 h3. */
.side-toc a.lvl-2 { font-weight: 600; color: var(--fg); }
.side-toc a.lvl-3 { padding-left: 18px; }

.side-toc a:hover { color: var(--fg); background: var(--bg-soft); }
.side-toc a.active { color: var(--accent); background: var(--accent-soft); }

/* Anchor jumps must clear the pinned bar.
   앵커 이동 시 고정된 상단 바에 가려지지 않도록. */
h2[id], h3[id] { scroll-margin-top: calc(var(--topbar-h, 100px) + 16px); }

/* --- Header --------------------------------------------------------- */

/* Header + nav pinned together, so the menu stays reachable while reading.
   Its measured height is published as --topbar-h by script, and anything that
   needs to clear it reads that variable rather than guessing.
   헤더와 네비게이션을 함께 고정해 읽는 동안에도 메뉴에 접근할 수 있게 한다.
   실제 높이는 스크립트가 --topbar-h 로 노출하고, 이를 피해야 하는 요소들은
   값을 추측하지 않고 그 변수를 읽는다. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 650;
  color: var(--fg);
  text-decoration: none;
  font-size: 15px;
}

.brand-mark { color: var(--accent); }

.header-right { display: flex; align-items: center; gap: 10px; }

/* Segmented switches, shared by language and theme.
   언어·테마 토글이 공유하는 세그먼트 스위치. */
.switch {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.switch button {
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}

.switch button + button { border-left: 1px solid var(--border-strong); }
.switch button:hover { background: var(--bg-inset); color: var(--fg); }

.switch button.active {
  background: var(--accent-strong);
  color: var(--on-accent);
}

.switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.gh { font-size: 13px; color: var(--fg-muted); text-decoration: none; }
.gh:hover { color: var(--accent); }

/* --- Nav ------------------------------------------------------------ */

.site-nav {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.nav-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }

.nav-inner a {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.nav-inner a:hover { color: var(--fg); }

.nav-inner a.current {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Separates the three kinds of page — start, lab tracks, reference — without
   spending a second nav row on group headings.
   시작 / 실습 트랙 / 레퍼런스 세 종류를 구분한다.
   그룹 제목을 위해 두 번째 줄을 쓰지 않아도 되도록. */
.nav-divider {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 14px;
  margin: 0 10px;
  background: var(--border-strong);
}

/* --- Content -------------------------------------------------------- */

.content { padding: 32px 20px 64px; }

h1, h2, h3, h4 { line-height: 1.3; margin: 1.8em 0 0.6em; }

h1 {
  font-size: 30px;
  margin-top: 0;
  letter-spacing: -0.02em;
  background: linear-gradient(92deg, var(--h1-from) 0%, var(--h1-to) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

h2 {
  font-size: 22px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

h3 { font-size: 17px; }

p, ul, ol { margin: 0.8em 0; }
li { margin: 0.3em 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }

[data-theme="dark"] a:hover { color: #bbb6fd; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-inset);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

pre {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
}

pre code { background: none; padding: 0; font-size: inherit; }

blockquote {
  margin: 1.2em 0;
  padding: 2px 16px;
  border-left: 3px solid var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--fg);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}

th, td {
  border: 1px solid var(--border);
  padding: 8px 11px;
  text-align: left;
  vertical-align: top;
}

th { background: var(--bg-soft); font-weight: 600; }

/* --- Language blocks ------------------------------------------------ */

.lang[hidden] { display: none; }
.lang > h2:first-child { margin-top: 0.6em; }

/* --- Callouts ------------------------------------------------------- */

.note, .warn, .danger {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-left-color: var(--accent-strong);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 1.2em 0;
  background: var(--bg-soft);
}

.warn {
  background: var(--warn-bg);
  border-left-color: var(--warn-border);
  color: var(--warn-fg);
}

.danger {
  background: var(--danger-bg);
  border-left-color: var(--danger-border);
  color: var(--danger-fg);
}

.warn code, .danger code { background: rgba(127, 127, 127, 0.18); }
.warn a, .danger a { color: inherit; }

.note > :first-child, .warn > :first-child, .danger > :first-child { margin-top: 0; }
.note > :last-child, .warn > :last-child, .danger > :last-child { margin-bottom: 0; }

/* --- Track cards ---------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 1.5em 0;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--bg-soft);
  box-shadow: var(--shadow);
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.card:hover {
  border-color: var(--accent-strong);
  transform: translateY(-1px);
}

.card h3 { margin: 0 0 6px; font-size: 16px; }
.card h3 a { text-decoration: none; }
.card p { margin: 0 0 8px; font-size: 14px; color: var(--fg-muted); }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-inset);
  color: var(--fg-muted);
}

.badge.ready { background: var(--ok-bg); color: var(--ok-fg); }
.badge.planned { background: var(--accent-soft); color: var(--accent); }
.badge.tbd { background: var(--warn-bg); color: var(--warn-border); }

/* --- Footer --------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 48px;
  font-size: 13px;
  color: var(--fg-muted);
  background: var(--bg-soft);
}

.site-footer p { margin: 0.4em 0; }

@media (max-width: 600px) {
  h1 { font-size: 25px; }
  .content { padding-top: 24px; }
  .header-inner { padding-bottom: 8px; }
}