/* ==========================================================================
   Study notes (/studies/…): pages generated by scripts/vault_export.py.
   Loaded only on note pages and the Studies hub (see _includes/head.html).
   ========================================================================== */

.note-header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.note-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.note-crumbs a {
  text-decoration: none;
}

.note-crumbs a:hover {
  color: var(--course, var(--accent));
}

.note-crumbs a + span + a,
.note-crumbs a:last-child {
  color: var(--course, inherit);
  font-weight: 600;
}

.note-title {
  max-width: none;
  margin-top: 0.75rem;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  line-height: 1.2;
  word-break: keep-all;
}

.note-header .article-meta dd {
  margin: 0;
}

.note-aliases {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* -- body ---------------------------------------------------------------- */

.note-body {
  max-width: 50rem;
  font-size: 1.08rem;
  line-height: 1.8;
  word-break: keep-all;
}

/* the drop cap belongs to essays, not to notes */
.note-body > p:first-of-type::first-letter {
  float: none;
  font: inherit;
  padding: 0;
  color: inherit;
}

.note-body h2 {
  font-size: 1.5rem;
  margin-top: 2.4em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--rule);
}

.note-body h2::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.5em;
  vertical-align: 0.12em;
  background: var(--course, var(--accent));
}

.note-body h2:nth-of-type(3n + 2)::before { border-radius: 50%; }
.note-body h2:nth-of-type(3n)::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.note-body h3 {
  font-size: 1.2rem;
  margin-top: 1.8em;
}

.note-body ul,
.note-body ol {
  padding-left: 1.5em;
}

.note-body ul {
  list-style: disc;
}

.note-body ol {
  list-style: decimal;
}

.note-body ul ul {
  list-style: circle;
}

.note-body li + li,
.note-body li > ul,
.note-body li > ol {
  margin-top: 0.35em;
}

.note-body li > p + p {
  margin-top: 0.6em;
}

.note-body blockquote {
  margin: 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--rule);
  font-size: 1rem;
  font-style: normal;
  color: var(--ink-muted);
}

.note-body a {
  color: var(--course, var(--accent));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.note-body code {
  padding: 0.1em 0.3em;
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.note-body pre code {
  padding: 0;
  background: none;
}

.note-body pre {
  font-size: 0.86rem;
  line-height: 1.55;
}

.note-body mark {
  background: color-mix(in srgb, var(--accent-ochre) 30%, transparent);
  color: inherit;
}

.note-body table {
  font-size: 0.88rem;
  line-height: 1.55;
}

.note-body th {
  white-space: normal;
}

/* -- math ---------------------------------------------------------------- */

.note-body mjx-container[display="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0;
}

.note-body mjx-container:not([display="true"]) {
  white-space: nowrap;
}

/* -- callouts ------------------------------------------------------------ */

.callout {
  --callout: var(--accent-inkblue);
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--callout);
  border-radius: var(--radius);
  background: var(--card);
  background: color-mix(in srgb, var(--callout) 7%, var(--card));
  font-size: 1rem;
}

.callout > * + * {
  margin-top: 0.7em;
}

.callout-title {
  font-weight: 600;
}

/* a folded question shows the whole prompt; only its label (**C1**) is bold */
summary.callout-title:not(.callout-title--default) {
  font-weight: 400;
}

.callout-title--default {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--callout);
}

.callout-summary { --callout: var(--course, var(--accent-inkblue)); }
.callout-info,
.callout-note { --callout: var(--accent-inkblue); }
.callout-definition,
.callout-theorem { --callout: var(--accent-ochre); }
.callout-proof { --callout: var(--accent-plum); }
.callout-example,
.callout-check,
.callout-tip { --callout: var(--accent-moss); }
.callout-question,
.callout-answer,
.callout-hint { --callout: var(--accent-inkblue); }
.callout-misconception,
.callout-warning,
.callout-important { --callout: var(--accent-rust); }

body[data-bg="midnight"] .callout {
  --accent-inkblue: #8fb3c7;
  --accent-ochre: #d8aa52;
  --accent-plum: #b892ba;
  --accent-moss: #9db57f;
  --accent-rust: #e0824f;
}

/* -- folds: callouts, answer lists, inline answers ----------------------- */

.note-body details > summary {
  cursor: pointer;
  list-style: none;
}

.note-body details > summary::-webkit-details-marker {
  display: none;
}

.note-body details > summary::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(-45deg);
  transition: transform 0.15s ease;
  opacity: 0.6;
}

.note-body details[open] > summary::before {
  transform: translateY(-0.25em) rotate(45deg);
}

details.callout > summary {
  margin: -0.85rem -1.1rem;
  padding: 0.85rem 1.1rem;
}

details.callout[open] > summary {
  margin-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--callout) 20%, transparent);
}

details.callout[open] > summary + * {
  margin-top: 1.4em;
}

.answer-fold,
.inline-fold,
.note-body details:not([class]) {
  padding: 0.5rem 0.9rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  font-size: 1rem;
}

.inline-fold {
  margin-top: 0.4em;
}

.answer-fold > summary,
.inline-fold > summary,
.note-body details:not([class]) > summary {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.answer-fold[open] > summary,
.inline-fold[open] > summary,
.note-body details:not([class])[open] > summary {
  margin-bottom: 0.6em;
}

.answer-fold > * + *,
.note-body details:not([class]) > * + * {
  margin-top: 0.7em;
}

/* -- footnotes ------------------------------------------------------------ */

.note-body .footnotes {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.note-body .footnotes li + li {
  margin-top: 0.5em;
}

.note-body .footnote,
.note-body .reversefootnote {
  text-decoration: none;
}

/* "에이전트 보충." in the vault: something added beyond the course material */
.note-body .fn-tag {
  display: inline-block;
  margin-right: 0.3em;
  padding: 0 0.4em;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: 600 0.7rem/1.5 var(--font-sans);
  color: var(--ink-muted);
  vertical-align: 0.08em;
}

/* -- diagrams --------------------------------------------------------------- */

.note-body pre.mermaid {
  background: none;
  padding: 0;
  text-align: center;
}

.note-body pre.mermaid svg {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* too wide to shrink without losing the text: scroll sideways (notes-mermaid.js) */
.note-body pre.mermaid.is-wide {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  padding-bottom: 0.4rem;
  margin-bottom: 0.3rem;
}

.note-body pre.mermaid.is-wide svg {
  display: block;
  margin: 0;
}

.note-body .mermaid-hint {
  margin: 0 0 1.4rem;
  font: 500 0.75rem var(--font-sans);
  color: var(--ink-muted);
  text-align: right;
}

/* edge labels: the page colour instead of white boxes */
.note-body pre.mermaid .edgeLabel,
.note-body pre.mermaid .edgeLabel p,
.note-body pre.mermaid .labelBkg {
  background-color: var(--bg) !important;
}

.note-body pre.mermaid .edgeLabel rect {
  fill: var(--bg) !important;
}

/* -- syntax highlighting (rouge) -------------------------------------------- */

.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs { color: var(--ink-muted); font-style: italic; }
.highlight .k, .highlight .kn, .highlight .kd, .highlight .kc, .highlight .ow { color: var(--accent-plum); font-weight: 600; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sd, .highlight .si, .highlight .sa { color: var(--accent-moss); }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .il { color: var(--accent-rust); }
.highlight .nf, .highlight .fm, .highlight .nc { color: var(--accent-inkblue); font-weight: 600; }
.highlight .nb, .highlight .bp { color: var(--accent-ochre); }

body[data-bg="midnight"] .highlight {
  --accent-plum: #c9a3cb;
  --accent-moss: #a9c28a;
  --accent-inkblue: #9cc0d4;
}

/* -- Studies hub -------------------------------------------------------------- */

.study-track + .study-track {
  margin-top: 3.5rem;
}

.study-track__title {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

.course-row__counts {
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .course-row__counts {
    order: 1;
    flex-direction: row;
    gap: 0.9em;
  }
}

.course-row:hover .index-list__title {
  color: var(--accent);
}

/* -- course roadmap --------------------------------------------------------- */

.note--course .note-body {
  max-width: 60rem;
}

.course-header {
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

.course-header .note-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

.course-header .note-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 6px;
  margin-top: 1rem;
  background: var(--course);
}

.note--course .note-body table td:first-child {
  white-space: nowrap;
  color: var(--ink-muted);
}

/* -- Note sidebar: the course roadmap as contents (_layouts/note.html) ------
   Wide screens: flush against the left edge with no box, like the Studies
   contents; the note column moves right by the same width.
   Narrow screens: a drawer opened from the 목차 button. */
.note-toc {
  --toc-w: clamp(15rem, 19vw, 19.5rem);
  position: fixed;
  /* --toc-top: how much of the site header is still on screen (note-toc.js),
     so a long, scrolled list never slides under the logo */
  top: var(--toc-top, 0px);
  left: 0;
  z-index: 30;
  width: var(--toc-w);
  height: calc(100vh - var(--toc-top, 0px));
  padding: 1.5rem 1rem 2rem clamp(1rem, 1.8vw, 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  isolation: isolate;
  font-family: var(--font-sans);
}

.note-toc::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: var(--toc-w);
  height: 100vh;
  z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg) 75%, transparent) 70%,
    transparent 100%);
  pointer-events: none;
}

.note-toc ol,
.note-toc li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-toc a {
  background-image: none !important;
  text-decoration: none;
}

.note-toc__top {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

/* folds the whole sidebar away (wide screens) or closes the drawer (narrow) */
.note-toc__hide {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0 0 0.1rem;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-muted);
  font: 600 0.95rem/1 var(--font-sans);
  cursor: pointer;
}

.note-toc__hide:hover,
.note-toc__hide:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.note-toc__course {
  display: block;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.note-toc__course::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  margin-top: 0.55rem;
  background: var(--course, var(--ink));
}

.note-toc__part summary {
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-muted);
}

.note-toc__part summary::-webkit-details-marker {
  display: none;
}

.note-toc__part summary::before {
  content: "›";
  flex: none;
  width: 0.8rem;
  transition: transform 0.2s ease;
}

.note-toc__part[open] > summary::before {
  transform: rotate(90deg);
}

.note-toc__part.is-current > summary {
  color: var(--ink);
}

.note-toc__part > ol {
  margin: 0.2rem 0 0.6rem 0.35rem;
  padding-left: 0.75rem;
  border-left: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

.note-toc__link {
  position: relative;
  display: flex;
  gap: 0.45rem;
  padding: 0.24rem 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--ink-muted);
}

.note-toc__link:hover {
  color: var(--ink);
}

.note-toc__no {
  flex: none;
  min-width: 1.4rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--course, var(--accent));
}

.note-toc__name {
  word-break: keep-all;
}

.note-toc__link.is-practice .note-toc__name::before {
  content: "연습 · ";
  color: var(--ink-muted);
}

.note-toc__link.is-current {
  color: var(--ink);
  font-weight: 600;
}

.note-toc__link.is-current::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: calc(-0.75rem - 2px);
  width: 3px;
  border-radius: 2px;
  background: var(--course, var(--accent));
}

/* this note's own headings, under its entry: one indent deeper, on their
   own thin rail, folded and unfolded by the small arrow beside the entry */
.note-toc__entry {
  display: flex;
  align-items: flex-start;
}

.note-toc__entry .note-toc__link {
  flex: 0 1 auto;
  min-width: 0;
}

.note-toc__fold {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.15rem 0 0 0.35rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 5px;
  background: transparent;
  color: var(--course, var(--accent));
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.note-toc__fold:hover,
.note-toc__fold:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.note-toc__fold[aria-expanded="false"] {
  transform: rotate(-90deg);
}

.note-toc .note-toc__here {
  margin: 0.15rem 0 0.45rem 2.15rem;
  padding-left: 0.7rem;
  border-left: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
}

.note-toc__here a {
  display: block;
  padding: 0.16rem 0;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--ink-muted);
}

.note-toc__here a.is-sub {
  padding-left: 0.85rem;
  font-size: 0.76rem;
}

.note-toc__here a.is-active {
  color: var(--course, var(--accent));
}

/* The 목차 pill: opens the drawer on narrow screens, and brings a folded
   sidebar back on wide ones. */
.note-toc-toggle {
  display: none;
  align-items: center;
  gap: 0.35rem;
  position: fixed;
  left: 1rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 600 0.9rem var(--font-sans);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.note-toc-scrim {
  display: none;
}

/* The note column: header, text and prev/next share one left edge. */
.note-shell {
  --note-w: 50rem;
  --note-pad-r: 0px;
}

.note-shell .note-header {
  width: auto;
  max-width: none;
  /* the rule under the header runs on to the right edge of the page */
  margin-right: calc(-1 * var(--note-pad-r));
  padding-left: max(var(--gutter), calc((100% - var(--note-w)) / 2 + var(--gutter)));
  padding-right: calc(var(--gutter) + var(--note-pad-r));
}

.note-shell .note-title {
  max-width: calc(var(--note-w) - 2 * var(--gutter));
}

.note-shell .note-nav {
  max-width: var(--note-w);
}

@media (min-width: 1100px) {
  /* The sidebar's width is mirrored on the right while there is room, so the
     text column sits on the page's centre line (where the background is
     cleared for it) instead of being pushed right by the sidebar. */
  .note-shell.has-toc {
    --note-toc-w: clamp(15rem, 19vw, 19.5rem);
    --note-pad-r: clamp(0px, calc(100vw - var(--note-toc-w) - var(--note-w) - 2rem), var(--note-toc-w));
    padding-left: var(--note-toc-w);
    padding-right: var(--note-pad-r);
  }

  .note-toc {
    transition: opacity 0.2s ease, visibility 0s;
  }

  .note-toc-collapsed .note-toc {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s 0.2s;
  }

  .note-toc-collapsed .note-shell.has-toc {
    --note-pad-r: 0px;
    padding-left: 0;
  }

  .note-toc-collapsed .note-toc-toggle {
    display: inline-flex;
    top: calc(var(--toc-top, 0px) + 1rem);
    z-index: 30;
  }
}

@media (max-width: 1099.98px) {
  .note-toc {
    top: 0;
    height: 100vh;
    width: min(20rem, 86vw);
    padding-top: 1.5rem;
    background: var(--bg);
    border-right: 1px solid var(--rule);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.18);
    transform: translateX(-102%);
    transition: transform 0.25s ease;
    z-index: 960;
  }

  .note-toc::before {
    display: none;
  }

  body.note-toc-open .note-toc {
    transform: none;
  }

  .note-toc-toggle {
    display: inline-flex;
    bottom: 1rem;
    z-index: 940;
  }

  .note-toc-scrim {
    position: fixed;
    inset: 0;
    z-index: 955;
    background: rgba(0, 0, 0, 0.35);
  }

  body.note-toc-open .note-toc-scrim {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-toc {
    transition: none;
  }
}