/* AMUGONA lecture-page system
   Applies the DESIGN-AMUGONA lecture guide across the list and lesson pages. */
:root {
  --amg-ink: #151515;
  --amg-paper: #ffffff;
  --amg-soft: #f6f6f3;
  --amg-muted: #555555;
  --amg-line: #151515;
  --amg-accent: #315fba;
  --amg-output: #dde8ff;
  --amg-warning: #c92a2a;
  --amg-container: min(1120px, calc(100% - 32px));
  --amg-copy: min(720px, 100%);
  --amg-headline: "Freesentation 9 Black", "Paperlogy 8 ExtraBold", "Malgun Gothic", sans-serif;
  --amg-section: "Paperlogy 5 Medium", "Malgun Gothic", sans-serif;
  --amg-body: "RIDIBatang", "리디바탕", "Batang", "Malgun Gothic", serif;
  --amg-mono: "Space Mono", Consolas, "RIDIBatang", "리디바탕", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--amg-paper);
}

body {
  margin: 0;
  color: var(--amg-ink);
  background:
    linear-gradient(rgba(21, 21, 21, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 21, 21, 0.028) 1px, transparent 1px),
    var(--amg-paper) !important;
  background-size: 32px 32px !important;
  font-family: var(--amg-body) !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--amg-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

img,
video,
canvas,
iframe {
  max-width: 100%;
}

img {
  display: block;
  height: auto;
  background: var(--amg-soft);
}

main,
.page,
.shell,
.wrap,
.container,
.lesson-page {
  width: var(--amg-container) !important;
  max-width: var(--amg-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page,
.lesson-page {
  min-height: 100vh;
}

main,
.page,
.lesson-page {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.shell,
.wrap,
.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

section,
.section,
.lesson-section,
.overview,
.practice,
.session,
.output-section,
.conclusion {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(48px, 7vw, 80px);
  border-top: 1px solid rgba(21, 21, 21, 0.14);
}

.hero {
  padding-top: clamp(40px, 6vw, 72px) !important;
  padding-bottom: clamp(48px, 7vw, 88px) !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(21, 21, 21, 0.18) !important;
  background: transparent !important;
}

h1,
.hero-title,
.page-title {
  margin: 0 0 18px;
  max-width: var(--amg-copy);
  color: var(--amg-ink);
  font-family: var(--amg-headline) !important;
  font-size: clamp(34px, 6vw, 44px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

h2,
.section-title {
  margin: 0 0 18px;
  max-width: var(--amg-copy);
  color: var(--amg-ink);
  font-family: var(--amg-section) !important;
  font-size: clamp(23px, 3.4vw, 26px) !important;
  font-weight: 500 !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
}

h3,
.card-title,
.session-title {
  margin: 0 0 12px;
  color: var(--amg-ink);
  font-family: var(--amg-section) !important;
  font-size: clamp(19px, 2.5vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
}

p,
li,
figcaption,
.lead,
.body-copy,
.description {
  max-width: var(--amg-copy);
  color: var(--amg-muted);
  font-family: var(--amg-body) !important;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.82;
}

.lead {
  color: var(--amg-ink);
  font-size: 17px !important;
}

.kicker,
.session-label,
.tag,
.chip,
.badge,
.pill,
.eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  margin: 0 0 14px;
  padding: 5px 11px;
  border: 1px solid var(--amg-accent) !important;
  border-radius: 0 !important;
  background: var(--amg-paper) !important;
  color: var(--amg-accent) !important;
  font-family: var(--amg-section) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

button,
.button,
.btn,
.cta,
.link-button,
.open-button,
.download,
.download-link,
a[class*="button"],
a[class*="btn"],
a[class*="download"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--amg-line) !important;
  border-radius: 0 !important;
  background: var(--amg-paper) !important;
  color: var(--amg-ink) !important;
  font-family: var(--amg-section) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35;
  text-decoration: none !important;
  white-space: normal;
  cursor: pointer;
}

button:hover,
.button:hover,
.btn:hover,
.cta:hover,
.link-button:hover,
.open-button:hover,
.download:hover,
.download-link:hover,
a[class*="button"]:hover,
a[class*="btn"]:hover,
a[class*="download"]:hover {
  background: var(--amg-ink) !important;
  color: var(--amg-paper) !important;
}

pre,
code,
kbd,
samp,
.prompt,
.prompt-box,
.code,
.path,
.mono,
.file-path,
.data-box {
  font-family: var(--amg-mono) !important;
  font-size: 14px !important;
  line-height: 1.75;
  letter-spacing: 0;
}

pre,
.prompt,
.prompt-box,
.code,
.data-box {
  max-width: 100%;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid rgba(21, 21, 21, 0.18) !important;
  border-radius: 0 !important;
  background: var(--amg-soft) !important;
  color: var(--amg-ink) !important;
  overflow-x: auto;
}

figure {
  margin: 0;
}

figure img,
.figure img,
.image-card img,
.media-card img,
.hero-media img,
.result-card img {
  width: 100%;
  object-fit: contain !important;
  border: 1px solid rgba(21, 21, 21, 0.16);
  border-radius: 0 !important;
  background: var(--amg-soft);
}

figcaption,
.caption {
  margin-top: 10px;
  color: var(--amg-muted);
  font-size: 14px !important;
}

.setup-guide {
  --amg-container: min(920px, calc(100% - 40px));
  --amg-copy: min(760px, 100%);
  font-size: 18px;
}

.setup-guide main {
  padding-top: clamp(44px, 6vw, 76px);
}

.setup-guide section {
  padding-top: clamp(44px, 6vw, 64px);
  padding-bottom: clamp(44px, 6vw, 64px);
}

.setup-guide .hero {
  padding-bottom: clamp(44px, 6vw, 72px) !important;
}

.setup-guide h1 {
  font-size: clamp(38px, 6vw, 52px) !important;
}

.setup-guide h2 {
  font-size: clamp(26px, 3.4vw, 32px) !important;
  margin-bottom: 22px;
}

.setup-guide p,
.setup-guide li,
.setup-guide .lead {
  font-size: clamp(18px, 1.6vw, 20px) !important;
  line-height: 1.9;
}

.setup-guide ol,
.setup-guide ul {
  margin-top: 0;
  padding-left: 1.5em;
}

.setup-guide li + li {
  margin-top: 0.35em;
}

.setup-guide figure {
  width: min(760px, 100%);
  margin-top: 22px;
}

.setup-guide figure + figure {
  margin-top: 30px;
}

.setup-guide figure img {
  width: 100%;
  max-height: min(62vh, 620px);
  object-fit: contain !important;
  object-position: left top;
}

.lecture-grid,
.hero-grid,
.hero .shell,
.two-col,
.three-col,
.input-strip,
.input-guide,
.media-grid,
.slide-grid,
.figure-grid,
.figure-grid.three,
.result-grid,
.render-result-grid,
.download-grid,
.sensor-grid,
.summary-grid,
.schedule-grid,
.meta-grid,
.hero-meta,
.step-grid,
.comparison-grid,
.cards,
.card-grid,
.gallery,
.gallery-grid,
.asset-grid,
.output-grid,
.practice-grid,
.tools-grid,
.preset-grid,
.matrix-grid,
.result-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(14px, 3vw, 24px);
}

.lecture-card,
.card,
.info-card,
.meta-card,
.result-card,
.asset-card,
.download-card,
.session-card,
.practice-card,
.panel {
  max-width: 100%;
  padding: clamp(18px, 3vw, 26px) !important;
  border: 1px solid rgba(21, 21, 21, 0.22) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
}

.output-section,
.output,
.result,
.result-card {
  background-color: color-mix(in srgb, var(--amg-output) 30%, var(--amg-paper)) !important;
}

.part-gallery,
.image-list,
.caption-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
  gap: clamp(12px, 2.4vw, 18px) !important;
  align-items: stretch;
}

.part-card,
.image-list > *,
.caption-grid > * {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr;
  gap: 12px !important;
  align-content: start;
  padding: 14px !important;
}

.part-card img,
.image-list img,
.caption-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: clamp(132px, 18vw, 180px);
  object-fit: contain !important;
  background: var(--amg-soft);
}

.part-card b,
.image-list b,
.caption-grid b {
  display: block;
  margin-bottom: 5px;
  color: var(--amg-ink);
  font-family: var(--amg-section) !important;
  font-size: 16px;
  line-height: 1.35;
}

.part-card span,
.image-list span,
.caption-grid span {
  display: block;
  color: var(--amg-muted);
  font-size: 14px !important;
  line-height: 1.6;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--amg-paper);
}

th,
td {
  padding: 10px 12px;
  border: 1px solid rgba(21, 21, 21, 0.2);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--amg-ink);
  font-family: var(--amg-section);
  font-weight: 700;
}

@media (max-width: 720px) {
  :root {
    --amg-container: min(100% - 24px, 1120px);
  }

  body {
    font-size: 16px;
  }

  main,
  .page,
  .lesson-page {
    padding-top: 32px;
  }

  section,
  .section,
  .lesson-section,
  .overview,
  .practice,
  .session,
  .output-section,
  .conclusion {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  button,
  .button,
  .btn,
  .cta,
  .link-button,
  .open-button,
  .download,
  .download-link {
    width: 100%;
  }

  .setup-guide {
    --amg-container: min(100% - 40px, 920px);
  }

  .setup-guide h1 {
    font-size: 34px !important;
  }

  .setup-guide h2 {
    font-size: 24px !important;
  }

  .setup-guide p,
  .setup-guide li,
  .setup-guide .lead {
    font-size: 17px !important;
    line-height: 1.82;
  }

  .setup-guide figure img {
    max-height: none;
  }
}