/* 웹 슬라이드 전용. style.css 의 토큰을 그대로 쓰므로 style.css 뒤에 로드한다. */
/* ==========================================================================
   Deck — PDF에서 재조판한 웹 슬라이드. 홈/주차 페이지와 같은 토큰을 쓴다.
   ========================================================================== */

.deck {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
  padding: clamp(0.9rem, 0.5rem + 1.2vw, 1.6rem) var(--gutter);
}

/* --- 상단 바 --------------------------------------------------------- */

.deck__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--ink);
}

.deck__id {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}

.deck__back {
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.deck__back:hover { color: var(--accent); }

.deck__name {
  font-size: clamp(0.78rem, 0.7rem + 0.4vw, 0.95rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* PDF로 저장 — 우측 상단 */
.deck__save {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.deck__save:hover { background: var(--accent); border-color: var(--accent); }
.deck__save:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- 무대 ------------------------------------------------------------ */

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

.slide {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100%, calc((100dvh - 230px) * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 2cqh;
  padding: 6cqh 6cqw 4cqh;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule), 0 18px 40px -28px oklch(21% 0.015 265 / 0.5);
  font-size: calc(3.1cqw * var(--fit, 1));
}

.slide[data-active] { visibility: visible; }

.slide__inner {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 4cqw;
  align-items: flex-start;
}

.slide__text { flex: 1 1 auto; min-width: 0; }

/* 항목이 많은 장은 2단으로 흘려 글자 크기를 지킨다 (deck.js 가 켠다). */
.slide.is-dense .slide__text {
  columns: 2;
  column-gap: 5cqw;
  column-rule: 1px solid var(--rule);
}
.slide.is-dense .slide__title { column-span: all; }
.slide.is-dense .slide__list li,
.slide.is-dense .slide__para { break-inside: avoid; }

.slide__title {
  margin: 0 0 0.7em;
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  padding-bottom: 0.35em;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  max-width: 100%;
}

/* 간지 슬라이드 — 제목 하나만 크게 */
.slide--section .slide__inner { align-items: center; }
.slide--section .slide__title {
  font-size: 3.2em;
  border-bottom-width: 4px;
  margin: 0;
  letter-spacing: -0.05em;
}

.slide__list { margin: 0; padding: 0; list-style: none; }

.slide__list li {
  position: relative;
  padding-left: 1.15em;
  margin-bottom: 0.55em;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

.slide__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.42em;
  height: 0.42em;
  background: var(--accent);
}

.slide__list li.lv1 { padding-left: 2.4em; font-size: 0.88em; color: var(--ink-soft); }
.slide__list li.lv1::before { left: 1.25em; background: var(--ink-faint); }
.slide__list li.lv2 { padding-left: 3.5em; font-size: 0.82em; color: var(--ink-soft); }
.slide__list li.lv2::before { left: 2.4em; background: var(--rule-strong); width: 0.3em; height: 0.3em; }

.slide__caption {
  margin: 0.3em 0 0.6em;
  font-family: var(--font-mono);
  font-size: 0.52em;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.slide__para {
  margin: 0 0 0.6em;
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -0.015em;
}

.slide__table {
  border-collapse: collapse;
  margin: 0.4em 0 0.8em;
  font-size: 0.92em;
  min-width: min(100%, 22em);
}
.slide__table th,
.slide__table td {
  text-align: left;
  padding: 0.4em 1.1em 0.4em 0;
  border-bottom: 1px solid var(--rule);
}
.slide__table th {
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--ink);
}
.slide__table td:first-child { font-weight: 650; }

.slide__figs {
  flex: 0 1 38%;
  display: flex;
  flex-direction: column;
  gap: 2cqh;
  align-self: stretch;
  justify-content: center;
  min-width: 0;
}
.slide__figs img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid var(--rule);
  background: var(--paper);
}
/* 그림만 여럿인 페이지는 가로로 편다 */
.slide__figs[data-count="1"] { flex-basis: 42%; }

.slide__raster {
  margin: 0;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}
.slide__raster img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.slide__foot {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.42em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 1.6cqh;
}

.slide__no {
  font-family: var(--font-display);
  font-size: 1.6em;
  letter-spacing: 0;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* --- 하단 컨트롤 ------------------------------------------------------ */

.deck__bottom {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}

.deck__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.deck__nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.deck__nav:disabled { opacity: 0.3; cursor: default; }
.deck__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.deck__count {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}
.deck__count b { color: var(--ink); font-weight: 700; }

.deck__bar {
  flex: 1;
  height: 3px;
  background: var(--rule);
  position: relative;
  min-width: 60px;
}
.deck__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}

.deck__hint {
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .slide { width: 100%; font-size: calc(3.6cqw * var(--fit, 1)); }
  .slide__inner { flex-direction: column; gap: 2cqh; }
  .slide__figs { flex: 0 0 auto; max-height: 42cqh; }
  .deck__hint { display: none; }
}

/* --- 인쇄 = PDF로 저장 -------------------------------------------------
   슬라이드 한 장이 정확히 한 페이지가 되도록 16:9 용지를 지정한다.
   ---------------------------------------------------------------------- */

@page {
  size: 297mm 167mm;
  margin: 0;
}

@media print {
  html, body {
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body { background-image: none; }

  .deck { display: block; padding: 0; min-height: 0; }
  .deck__top, .deck__bottom { display: none !important; }

  .stage { display: block; }

  .slide {
    position: static;
    visibility: visible;
    width: 297mm;
    height: 167mm;
    margin: 0;
    border: none;
    box-shadow: none;
    background: var(--paper-deep);
    break-after: page;
    page-break-after: always;
    /* 글자 크기는 화면과 동일하게 컨테이너 폭(3.1cqw)에 비례한다. pt로 덮어쓰면
       297mm 용지에서 깨알같이 작아진다. --fit 비율은 화면 계산값을 그대로 쓴다. */
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }

  .slide__figs img, .slide__raster img { break-inside: avoid; }
}