/* 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;
}

/* The page tree for the current section, rendered server-side. Sits above the
   heading list and is separated from it, because it moves you between pages
   while the list below only moves you within one.
   현재 섹션의 페이지 트리. 서버에서 렌더링한다. 제목 목록 위에 두되 구분한다.
   이것은 페이지 사이를 이동하고, 아래 목록은 한 페이지 안에서만 이동한다. */
.side-tree {
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
  border-left: 1px solid var(--border);
}

.side-tree li { margin: 0; }

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

.side-tree > li.side-child > a {
  padding-left: 18px;
  font-weight: 400;
  color: var(--fg-muted);
}

.side-tree > li > a:hover { color: var(--fg); background: var(--bg-soft); }

/* The page you are on is marked, not filled. The filled accent belongs to the
   heading you are currently reading, and two filled rows read as two
   selections.
   현재 페이지는 표시만 하고 배경은 채우지 않는다. 채워진 강조는 지금 읽고 있는
   제목의 몫이며, 채워진 행이 둘이면 선택이 둘로 보인다. */
.side-tree > li > a.here {
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Headings of the current page, nested one level below it.
   현재 페이지의 제목들. 그 페이지보다 한 단계 아래에 중첩된다. */
.side-tree .side-toc {
  margin: 2px 0 6px;
  padding-left: 8px;
  border-left: 0;
}

.side-tree .side-toc a { font-size: 12.5px; }
.side-tree .side-toc a.lvl-2 { padding-left: 18px; }
.side-tree .side-toc a.lvl-3 { padding-left: 30px; }

/* 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; }
}