/* ============================================================
   에이프릴마치 M&C — 슬라이드 재구현 공통 스타일
   모든 페이지는 1600 × 1131 px 고정 캔버스 위에 그려지고,
   뷰포트에 맞춰 transform: scale() 로 축소/확대된다.
   ============================================================ */

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("./font/PretendardVariable.woff2") format("woff2-variations");
}

/* 손글씨/필기체 헤드라인용 (예: "For tomorrow", "Your Dream").
   Pretendard 에는 필기체가 없어 이탤릭 세리프로 대체되면 원본과 크게 달라진다. */
@font-face {
  font-family: "Script Elegant";      /* 가늘고 우아한 필기체 */
  font-weight: 400;
  font-display: swap;
  src: url("./font/allura-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Script Calligraphy";  /* 굵기 대비가 큰 캘리그래피 */
  font-weight: 400;
  font-display: swap;
  src: url("./font/great-vibes-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Display Serif";       /* 획 대비가 큰 우아한 세리프 */
  font-weight: 400 900;
  font-display: swap;
  src: url("./font/playfair.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Geometric Sans";      /* 기하학적 산세리프 (Futura/Century Gothic 계열) */
  font-weight: 100 900;
  font-display: swap;
  src: url("./font/jost.woff2") format("woff2-variations");
}

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

:root {
  --slide-w: 1600;
  --slide-h: 1131;

  /* 브랜드 토큰 */
  --ink:        #16181c;
  --ink-soft:   #4a4f57;
  --ink-mute:   #8b929c;
  --line:       #e3e6ea;
  --paper:      #ffffff;
  --paper-alt:  #f4f5f7;
  --accent:     #e8503a;
  --accent-2:   #1f6feb;
  --dark:       #0e1013;

  --sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
          "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, sans-serif;
}

html, body { height: 100%; margin: 0; }

body {
  background: #0b0c0e;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* 캔버스를 화면 중앙에 배치하는 무대 */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* 1600 × 1131 고정 캔버스 — 내부는 전부 px 단위로 작성한다 */
.slide {
  position: relative;
  width: 1600px;
  height: 1131px;
  flex: none;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  transform-origin: center center;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .55);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* 슬라이드 내부 공통 요소 */
.slide img { display: block; max-width: none; }
.slide h1, .slide h2, .slide h3, .slide h4, .slide p, .slide ul, .slide ol {
  margin: 0;
  padding: 0;
}
.slide ul, .slide ol { list-style: none; }

/* 페이지 번호 */
.pageno {
  position: absolute;
  right: 42px;
  bottom: 30px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  z-index: 40;
}

/* 자주 쓰는 유틸 (원하면 페이지별 <style>에서 덮어쓴다) */
.fill    { position: absolute; inset: 0; }
.cover   { width: 100%; height: 100%; object-fit: cover; }
.contain { width: 100%; height: 100%; object-fit: contain; }
.center  { display: flex; align-items: center; justify-content: center; }

/* 단독 페이지에서만 보이는 상하단 내비게이션 */
.slide-nav {
  position: fixed;
  z-index: 100;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 88px;
  border: 1px solid #2a2e34;
  border-radius: 8px;
  background: rgba(18, 20, 23, .72);
  color: #eef0f3;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: opacity .2s, background .2s;
  opacity: 0;
  font-family: var(--sans);
}
.stage:hover .slide-nav { opacity: 1; }
.slide-nav:hover  { background: rgba(40, 44, 50, .95); }
.slide-nav.prev   { left: 16px; }
.slide-nav.next   { right: 16px; }
.slide-nav[hidden]{ display: none; }

/* iframe(덱 뷰어) 안에서는 그림자·내비게이션 제거 */
body.embed { background: transparent; }
body.embed .slide { box-shadow: none; }
body.embed .slide-nav { display: none; }