:root {
  --canvas: #f3f3ef;
  --surface: #fbfbf8;
  --surface-overlay: rgba(243, 243, 239, 0.94);
  --surface-overlay-hover: rgba(243, 243, 239, 0.99);
  --ink: #17181a;
  --ink-muted: #5e6065;
  --ink-faint: #686a6f;
  --rule: #cfcfc8;
  --rule-strong: #17181a;
  --accent: #2457d6;
  --accent-hover: #163da7;
  --inverse: #17181a;
  --inverse-ink: #f7f7f2;
  --font-display: "Iowan Old Style", "Noto Serif CJK KR", "AppleMyungjo",
    "Nanum Myeongjo", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "SFMono-Regular", "Roboto Mono", "Noto Sans Mono CJK KR",
    monospace;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --gutter: var(--space-4);
  --small: 0.875rem;
  --micro: 0.6875rem;
  --meta: 0.75rem;
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-8);
  }
}

@media (min-width: 80rem) {
  :root {
    --gutter: var(--space-12);
  }
}

series-nav,
series-sources,
source-module-links,
series-library,
archive-library,
content-facets,
transcript-reader {
  display: block;
}

.series-navigation {
  display: contents;
}

.banner {
  position: relative;
  margin: var(--space-10) 0;
}

.banner > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.banner__cards {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.5%;
  margin: 0;
  padding: 0 3.5% 4%;
  list-style: none;
}

.banner__cards li {
  display: flex;
  min-width: 0;
}

.banner__cards a,
.banner__cards .card {
  display: grid;
  grid-template-rows: auto minmax(2.4375rem, auto);
  align-content: start;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  min-height: 5.5rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(23, 24, 26, 0.4);
  background: var(--surface-overlay);
  color: var(--ink);
  text-decoration: none;
}

.banner__cards a {
  transition:
    border-color 150ms ease-out,
    background 150ms ease-out;
}

.banner__cards a:hover {
  border-color: var(--accent);
  background: var(--surface-overlay-hover);
}

.banner__cards a:hover .t {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.banner__cards .card {
  border-color: var(--rule-strong);
}

.banner__cards .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.banner__cards .n,
.banner__cards .go,
.banner__cards .cur {
  font-family: var(--font-mono);
  font-size: var(--micro);
  letter-spacing: 0.03em;
}

.banner__cards .n {
  color: var(--accent);
  letter-spacing: 0.08em;
}

.banner__cards .go {
  color: var(--accent);
  font-weight: 600;
}

.banner__cards a:hover .go {
  color: var(--accent-hover);
}

.banner__cards .cur {
  color: var(--ink-faint);
}

.banner__cards .t {
  display: -webkit-box;
  min-height: 2.4375rem;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.banner--many .banner__cards {
  position: static;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-2);
  padding: var(--space-3) 0 0;
}

.banner--many .banner__cards a,
.banner--many .banner__cards .card {
  background: var(--surface);
}

.sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sources li {
  min-width: 0;
}

.sources a {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 150ms ease-out;
}

.sources a:hover {
  border-color: var(--accent);
}

.sources .k {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.sources .t {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.sources .s {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  /* 설명이 길어져도 카드 높이가 튀지 않게 두 줄에서 자른다 (2026-08-07). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 48rem) {
  .sources {
    grid-template-columns: 1fr;
  }
}

.library-page {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.78;
  letter-spacing: -0.005em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.library-page *,
.library-page *::before,
.library-page *::after {
  box-sizing: border-box;
}

.library-page a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

.library-page a:hover {
  color: var(--accent-hover);
}

.library-page .sources a {
  color: var(--ink);
}

.library-page .sources a:hover {
  color: var(--accent-hover);
}

.library-page a:focus-visible,
.banner__cards a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.library-page button:focus-visible,
.library-page input:focus-visible,
.library-page select:focus-visible,
.library-page summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.library-page img {
  max-width: 100%;
  height: auto;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  z-index: 9;
  top: var(--space-2);
  left: var(--gutter);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
}

.site-header {
  border-block-end: 1px solid var(--rule);
}

.site-header__in {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, var(--shell));
  min-height: 4.5rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  gap: var(--space-4);
}

.brand {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--meta);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-decoration: none;
}

.meta-label {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.library-main {
  width: min(100%, calc(var(--wide) + var(--gutter) * 2));
  margin-inline: auto;
  /* 3.5rem은 시리즈 랜딩 .idx와 같은 값 — 홈↔시리즈를 오갈 때 표제가 흔들리지 않게 */
  padding: 3.5rem var(--gutter) 0;
}

.library-head {
  display: grid;
  max-width: var(--measure);
}

/* 아래 세 여백도 시리즈 랜딩(.idx > .meta-label / .idx h1 / .idx > .lead)과 같은 수치 */
.library-head > .meta-label {
  margin-block-end: 0.5rem;
}

.library-head .lead {
  margin: 0 0 var(--space-8);
}

.library-head h1 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3.3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.library-head .lead {
  color: var(--ink-muted);
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.62;
}

.library-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--rule);
}

.library-paths a {
  display: grid;
  grid-template-columns: 2rem minmax(8rem, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-4);
  color: var(--ink);
  text-decoration: none;
}

.library-paths a + a {
  padding-inline-start: var(--space-6);
  border-inline-start: 1px solid var(--rule);
}

.library-paths a:hover .library-paths__title {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.library-paths__index {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.library-paths__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.library-paths__description {
  color: var(--ink-muted);
  font-size: var(--small);
  line-height: 1.6;
}

.source-page main {
  width: min(100%, calc(var(--wide) + var(--gutter) * 2));
  margin-inline: auto;
  padding: 3.5rem var(--gutter) 0;
}

.source-page .wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

.source-page .source-head {
  display: grid;
  max-width: var(--measure);
  padding: 0;
  gap: 0;
}

.source-page .source-head .cmeta {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.09em;
}

.source-page .source-head h1 {
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3.3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.source-page .source-head .lead {
  max-width: none;
  margin: 0 0 var(--space-8);
  color: var(--ink-muted);
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.62;
}

.source-page .source-section {
  margin-block: var(--space-16) var(--space-8);
}

.source-page .source-section .library-section__label {
  margin: 0 0 var(--space-3);
}

/* 리드가 2rem을 이미 쓰므로 여기서 2rem만 더해 전체 4rem을 유지한다 */
.library-section {
  margin-block-start: var(--space-8);
}

.library-section__label {
  margin: 0 0 var(--space-3);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.library-main > .library-section {
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--rule-strong);
  scroll-margin-block-start: var(--space-4);
}

.library-section__marker {
  margin: 0 0 var(--space-4);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
}

.series-library__status {
  margin: 0 0 var(--space-3);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 100%), 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 시리즈가 둘 이상이면 카드 높이를 한 줄에서 맞춘다.
   ol > li > article > a 네 겹이라 li·article도 grid로 늘려야 a까지 전달된다 */
.library-grid > li,
.library-card {
  display: grid;
}

.library-card a {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 150ms ease-out;
}

.library-card a:hover {
  border-color: var(--accent);
}

.library-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  border-block-end: 1px solid var(--rule);
}

.library-card__copy {
  display: grid;
  /* 메타·제목·설명·액션 — 설명이 여백을 흡수해 액션이 항상 바닥에 붙는다 */
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-4);
}

.library-card__meta {
  display: flex;
  /* 카드가 3열로 좁아지면서 「03 · Autonomous Worlds」 같은 긴 라벨이 낱말 중간에서
   * 접혔다. 조각 단위로 줄을 바꾸고 각 조각은 통째로 유지한다 (2026-08-07). */
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem var(--space-3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.library-card__meta > span {
  white-space: nowrap;
}

.library-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.3;
  text-wrap: balance;
}

.library-card__description {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.library-card__action {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.series-pager,
.archive-pagination {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-block: 1px solid var(--rule);
  background: var(--surface);
}

.series-pager[hidden],
.archive-pagination[hidden] {
  display: none;
}

.series-pager__rail {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.series-pager__status,
.series-pager__hint,
.archive-pagination__progress {
  margin: 0;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--micro);
  letter-spacing: 0.05em;
}

.series-pager__hint {
  text-align: end;
}

.series-pager__segments {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
}

.series-pager__segment {
  inline-size: clamp(1.5rem, 5vw, 3.5rem);
  block-size: 1.5rem;
  padding: 0;
  border: 0;
  background: linear-gradient(var(--rule), var(--rule)) center / 100% 2px no-repeat;
  cursor: pointer;
}

.series-pager__segment[aria-current="page"] {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 4px;
}

.series-pager__direction,
.archive-pagination__button {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font: 600 var(--meta)/1.3 var(--font-mono);
  cursor: pointer;
}

.series-pager__direction:hover:not(:disabled),
.archive-pagination__button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.series-pager__direction:disabled,
.archive-pagination__button:disabled {
  color: var(--ink-faint);
  cursor: default;
  opacity: 0.55;
}

archive-library {
  border: 1px solid var(--rule);
  background: var(--surface);
}

.archive-controls {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(4, minmax(7rem, 1fr));
  gap: var(--space-3);
  padding: var(--space-6);
  border: 0;
  border-block-end: 1px solid var(--rule);
  background: var(--canvas);
}

.archive-field {
  display: grid;
  align-content: end;
  gap: var(--space-2);
  min-width: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.archive-field input,
.archive-field select,
.archive-reset {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 0.9375rem/1.4 var(--font-body);
}

.archive-field input,
.archive-field select {
  padding-inline: var(--space-3);
}

.archive-field input::placeholder {
  color: var(--ink-faint);
}

.archive-reset {
  align-self: end;
  padding-inline: var(--space-3);
  color: var(--accent);
  cursor: pointer;
  transition:
    border-color 150ms ease-out,
    color 150ms ease-out;
}

.archive-reset:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.archive-topics {
  grid-column: 1 / -1;
  margin: var(--space-1) 0 0;
  padding: 0;
  border: 0;
}

.archive-topics legend {
  margin-block-end: var(--space-2);
  padding: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.archive-topics__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.archive-topics__more {
  flex-basis: 100%;
}

.archive-topics__more summary {
  width: fit-content;
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule);
  color: var(--accent);
  font: 500 var(--meta)/1.8 var(--font-mono);
  cursor: pointer;
}

.archive-topics__additional {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
}

.archive-topic,
.archive-active-filter {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink-muted);
  font: 500 var(--meta)/1.3 var(--font-mono);
  cursor: pointer;
  transition:
    border-color 150ms ease-out,
    color 150ms ease-out,
    background 150ms ease-out;
}

.archive-topic:hover,
.archive-active-filter:hover,
.archive-topic[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent-hover);
  background: var(--surface);
}

.archive-topic[aria-pressed="true"] {
  font-weight: 600;
}

.archive-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.archive-active-filters:not(:empty) {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--rule);
}

.archive-results {
  margin: 0;
  padding-inline: var(--space-4);
  background: var(--surface);
  list-style: none;
}

.archive-item {
  display: grid;
  grid-template-areas:
    "meta"
    "title"
    "facets";
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--rule);
}

.archive-item__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--micro);
  letter-spacing: 0.04em;
}

.archive-item__meta > * + *::before {
  margin-inline-end: var(--space-3);
  color: var(--rule-strong);
  content: "·";
}

.archive-item__kind {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.archive-item__series {
  color: var(--ink-muted);
}

.archive-item__title {
  grid-area: title;
  margin: var(--space-1) 0 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}

.archive-item__title a {
  color: var(--ink);
  text-decoration-color: transparent;
  transition:
    color 150ms ease-out,
    text-decoration-color 150ms ease-out;
}

.archive-item__title a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

.archive-item__facets {
  grid-area: facets;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5, 1.25rem);
  margin-block-start: var(--space-1);
}

.archive-item__facet-group {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.archive-item__facet-label {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.archive-item__topics,
.archive-item__keywords,
.content-facets__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-item__topics a,
.archive-item__keywords a,
.content-facets__links a {
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.archive-item__keywords a::before {
  content: "#";
}

.archive-empty {
  margin: 0;
  padding-block: var(--space-8);
  border-block: 1px solid var(--rule);
  color: var(--ink-muted);
}

.content-facets {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-block: var(--space-4);
  border-block: 1px solid var(--rule);
}

.content-facets__group {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-3);
}

.content-facets dt,
.content-facets dd {
  margin: 0;
}

.content-facets dt {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.content-facets__links a {
  text-decoration-thickness: 1px;
}

.transcript-page .note {
  max-width: var(--measure);
  margin-block: var(--space-6) var(--space-12);
  padding: var(--space-4);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.transcript-page .note p {
  margin: 0;
}

.transcript-page .note p + p {
  margin-block-start: var(--space-2);
}

.transcript-page .note b {
  color: var(--ink);
  font-weight: 600;
}

.transcript-reader {
  display: grid;
  min-width: 0;
}

.transcript-index {
  min-width: 0;
  margin-block-end: var(--space-8);
  border-block: 1px solid var(--rule);
}

.transcript-index summary {
  padding-block: var(--space-3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--meta);
  font-weight: 600;
  cursor: pointer;
}

.transcript-index nav {
  padding-block: 0 var(--space-4);
}

.transcript-index ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.transcript-index__talks {
  display: grid;
  gap: var(--space-4);
}

.transcript-index__talks > li > a {
  display: block;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
}

.transcript-index__sections {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-3) !important;
  padding-inline-start: var(--space-3) !important;
  border-inline-start: 1px solid var(--rule);
}

.transcript-index__sections a {
  display: block;
  color: var(--ink-muted);
  font-size: var(--meta);
  line-height: 1.45;
  text-decoration: none;
}

.transcript-index__sections a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.transcript-reader__body {
  min-width: 0;
}

.talk {
  margin: 0;
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--rule-strong);
  scroll-margin-block-start: var(--space-4);
}

.talk + .talk {
  margin-block-start: var(--space-20);
}

.talk__h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.talk__d,
.talk__count {
  font-family: var(--font-mono);
  font-size: var(--micro);
  letter-spacing: 0.08em;
}

.talk__d {
  color: var(--accent);
}

.talk__count {
  color: var(--ink-faint);
}

.talk__t {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

.tr__segment {
  max-width: var(--measure-transcript);
  padding-block-start: var(--space-8);
  scroll-margin-block-start: var(--space-4);
}

.tr__sec {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px dashed var(--rule);
}

.tr__number {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--micro);
  letter-spacing: 0.08em;
}

.tr__sec h3 {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1.02rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-wrap: pretty;
}

.tr__p {
  max-width: var(--measure-transcript);
  margin: var(--space-4) 0 0;
  font-size: 1.0625rem;
  line-height: 1.85;
  text-wrap: pretty;
}

.tr__p.corrected {
  position: relative;
}

.tr__note {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 0 var(--space-1);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--micro);
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

.tr__omit,
.tr__mask {
  max-width: var(--measure-transcript);
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-3);
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.65;
}

.tr__omit {
  border-inline-start: 2px solid var(--rule);
  font-style: italic;
}

.tr__mask {
  border: 1px dashed var(--rule);
  background: var(--surface);
}

.tr__evidence {
  max-width: var(--measure-transcript);
  margin-block-start: var(--space-4);
  border-inline-start: 2px solid var(--rule);
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.tr__evidence summary {
  padding: var(--space-2) var(--space-3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-style: normal;
  cursor: pointer;
}

.tr__evidence p {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  line-height: 1.65;
}

@media (min-width: 70rem) {
  .transcript-reader {
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }

  .transcript-index {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - var(--space-8));
    margin: 0;
    overflow: auto;
  }

  .transcript-index summary {
    cursor: default;
    list-style: none;
  }

  .transcript-index summary::-webkit-details-marker {
    display: none;
  }
}

@media (min-width: 48rem) and (max-width: 69.99rem) {
  .archive-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-field--search,
  .archive-topics {
    grid-column: 1 / -1;
  }
}

.site-footer {
  margin-block-start: var(--space-20);
  background: var(--inverse);
  color: var(--inverse-ink);
}

.site-footer__in {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding: var(--space-10) var(--gutter);
  gap: var(--space-3) var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--micro);
  letter-spacing: 0.09em;
}

.site-footer a {
  color: var(--inverse-ink);
}

@media (min-width: 48rem) and (max-width: 69.99rem) {
  .library-paths a {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .library-paths__description {
    grid-column: 2;
  }
}

@media (max-width: 47.99rem) {
  .library-paths {
    grid-template-columns: 1fr;
  }

  .library-paths a {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .library-paths a + a {
    padding-inline-start: 0;
    border-block-start: 1px solid var(--rule);
    border-inline-start: 0;
  }

  .library-paths__description {
    grid-column: 2;
  }

  .banner__cards {
    position: static;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-3) 0 0;
  }

  .banner__cards a,
  .banner__cards .card {
    min-height: 5.5rem;
    background: none;
  }

  .banner__cards a {
    border-color: var(--rule);
  }

  .banner__cards .card {
    border-color: var(--rule-strong);
  }

  .archive-controls {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }

  .archive-topics {
    grid-column: 1;
  }

  .series-pager__direction,
  .archive-pagination__button {
    padding-inline: var(--space-2);
  }

  .series-pager__rail {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .series-pager__status,
  .series-pager__hint {
    text-align: center;
  }

  .archive-item {
    gap: var(--space-1);
  }

  .archive-item__title,
  .archive-item__facets {
    margin: 0;
  }

  .archive-item__meta > * + *::before {
    display: none;
  }

  .content-facets__group {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .talk__h {
    grid-template-columns: 1fr auto;
  }

  .talk__t {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* 본문 영상 클립 — video 에는 img 의 max-width 규칙이 안 걸려서 원본 폭(1280px)
   그대로 그려져 컬럼을 넘었다(2026-08-06 실측, 시리즈 05 라이브). */
.prose .clip {
  margin-inline: 0;
}
.prose .clip video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--surface);
}

/* 정사각·세로형 클립 — 컬럼 폭 기준이면 16:9 보다 훨씬 커진다(2026-08-06 본인 제보).
   표준 16:9 높이(약 26rem)보다 낮게 눌러 가운데 둔다. */
.prose .clip--tall video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 22rem;
  margin-inline: auto;
}

/* 장표 묶음 뷰어 — slide-strip.js 가 단추를 얹는다. JS 없이는 가로 스크롤 스트립. */
.prose .slides__strip{
  /* width 를 명시하지 않으면 자식의 flex-basis:100% 와 물려 폭이 0으로 접힌다(실측 2px). */
  display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  border:1px solid var(--rule);background:var(--surface);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.prose .slides__strip img{
  flex:0 0 100%;width:100%;height:auto;
  scroll-snap-align:start;scroll-snap-stop:always;border:0;margin:0;
}
.slides__bar{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.55rem}
.slides__btn{
  appearance:none;border:1px solid var(--rule);background:var(--surface);color:var(--ink);
  font:inherit;line-height:1;padding:.35rem .85rem;cursor:pointer;border-radius:2px;
}
.slides__btn:hover:not(:disabled){border-color:var(--rule-strong)}
.slides__btn:disabled{opacity:.35;cursor:default}
.slides__count{font-size:var(--meta);color:var(--ink-muted);font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* 아카이브·원자료의 안내문도 읽는 문장이다 — 셸이 넓어져도 46rem 에 묶는다 (2026-08-07) */
.note p {
  max-width: var(--measure);
}

/* ══════════════════════════════════════════════════════════════════
   말미 두 자리 [본인 지시 2026-08-09 · 시리즈 00 1편에 먼저 적용]

   앞 회차는 말미 안에 「도구 층」을 만들어 다른 판 링크와 넘겨받기 단추를 함께
   담았다. 본인 판정으로 그 층을 걷고 둘을 각자의 자리로 보낸다.

     넘겨받기 단추  본문 마지막 문단 바로 아래, 말미 가로선 **위**.
                    읽기를 막 끝낸 자리다. 이 글을 넘길지는 그때 정한다.
     다른 판 링크    말미 맨 아래, 「시리즈 홈으로」 왼쪽에 **같은 단추**로.
                    둘 다 「여기서 나가 다른 면으로 간다」라서 층이 같다.

   앞 회차가 두 단추의 색을 갈라 둔 근거(하나는 이동, 하나는 실행)는 그대로다.
   달라진 것은 **실행 단추가 이동 단추 옆에 있지 않게 됐다**는 것이고, 그래서
   색으로 층을 갈라 둘 이유 자체가 자리로 옮겨갔다.
   ══════════════════════════════════════════════════════════════════ */

/* 넘겨받기 단추가 서는 자리. 선을 긋지 않는다 — 바로 아래 말미의 가로선이
 * 그 일을 한다. 여기서 또 그으면 선 두 겹 사이에 빈 띠가 생긴다. */
/* ── 포스팅이 끝나는 자리 [2026-08-09 본인 지시] ────────────────────
   글은 **편 목록과 귀속 표기에서 끝난다.** 그 아래부터는 이 사이트의 기본
   템플릿 인터페이스이고, 도구 줄이 그 첫 칸이다. 두 층을 가르는 것은 여백이다 —
   말미가 이미 가로선으로 닫히므로 선을 한 번 더 긋지 않는다. */
.post-tools {
  /* main 의 글 기둥과 **정확히 같은 폭**이어야 한다.
     main : width min(100%, measure + gutter*2) + padding gutter
       → 안쪽 폭 = min(100% - gutter*2, measure). 그 값을 그대로 쓴다. */
  width: min(calc(100% - var(--gutter) * 2), var(--measure));
  margin: 0 auto 4rem;
  padding-block-start: 2rem;
  /* 포스팅이 끝나는 선. 위는 글(본문 + 귀속 표기)이고 아래는 이 사이트의
     인터페이스다 — 편 목록도 이동이므로 선 아래에 선다 [2026-08-09 본인 지시]. */
  border-block-start: 1px solid var(--rule-strong);
  display: grid;
  gap: 2rem;
}
/* 단추 둘은 왼쪽에 붙고 **가로폭이 같다.** 자동 폭에 맡기면 글자 수만큼 달라져
   둘이 다른 무게로 읽힌다. */
.post-tools__row {
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 11rem);
  justify-content: start;
  gap: .6rem;
}
@media (max-width: 26rem) {
  .post-tools__row { grid-auto-flow: row; grid-auto-columns: auto }
}
.post-tools__row > * { min-inline-size: 0 }
.post-tools .uplink {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--meta, .75rem);
  letter-spacing: .02em;
  padding: .5rem .85rem;
  border: 1px solid currentColor;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.post-tools .uplink:hover { background: var(--accent); color: var(--canvas) }

/* ── 다른 판본으로 가는 배너 ────────────────────────────────────────
   본문 위에 선다. 읽기 전에 어느 판을 읽을지 고르는 자리라 말미가 아니라
   상단이다(2026-08-09 본인 지시). 표제 아래·본문 위. */
.altview {
  display: block;
  margin-block: 2rem 2.5rem;
  padding: .9rem 1rem;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease-out;
}
.altview:hover { border-color: var(--accent) }
.altview .k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--micro);
  letter-spacing: .09em;
  color: var(--accent);
  margin-block-end: .3rem;
}
.altview .t { font-size: 1rem; line-height: 1.5 }
.altview .d {
  display: block;
  margin-block-start: .25rem;
  font-size: var(--micro);
  color: var(--ink-muted);
  line-height: 1.6;
}

/* 말미 맨 아래 단추 줄. 둘 이상이면 나란히 서고 좁으면 접힌다 */
.foot__nav {
  margin: 0;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}