@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

:root {
  --gold: #F5C400;
  --orange: #E8890C;
  --warm: #1C1917;
  --warm-card: #242019;
  --warm-grid: #222018;
  --warm-sep: #2E2A26;
  --white: #FFFFFF;
  --off-white: #F7F6F4;
  --light-card: #F0EDE8;
  --light-sep: #E8E4DE;
  --text-muted-dark: #6B6560;
  --text-body-dark: #A09890;
  --text-muted-light: #B0A89E;
  --text-body-light: #6B6560;
  --font-en: 'Inter', sans-serif;
  --font-ja: 'Noto Sans JP', sans-serif;
  /* 統一タイポグラフィ（全レイアウト共通） */
  --type-en-label: 9px;
  --type-en-display: 32px;
  --type-heading: 22px;
  --type-sub: 12px;
  --type-body: 11px;
  --type-card-title: 14px;
  --type-card-tag: 8px;
  --type-index-num: 20px;
  --type-index-en: 12px;
  --type-index-ja: 11px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============ DECK LAYOUT (preview / export) ============ */
.deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-family: var(--font-ja);
}

.deck--preview {
  background: #141210;
  padding: 24px 16px;
}

.deck--standalone {
  background: #141210;
  min-height: 100vh;
  padding: 40px 32px;
}

.slide-wrapper { width: 100%; max-width: 960px; margin-bottom: 4px; }

.slide {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

.deck-spacer { width: 100%; max-width: 960px; height: 32px; }

/* ============ SHARED ============ */
.accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0%, var(--orange) 100%); }
.accent-bar-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0%, var(--orange) 100%); }

.logo-img {
  display: block;
  height: 28px;
  width: auto;
  border-radius: 4px;
}

/* ============ COVER ============ */
.s-cover {
  background: var(--warm);
  display: flex;
  align-items: center;
  padding: 7% 9%;
}

.cover-logo { position: absolute; top: 6%; right: 7%; }

.cover-left { flex: 1; display: flex; flex-direction: column; }

.cover-eyebrow {
  font-family: var(--font-en);
  font-size: var(--type-en-label);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.cover-en-title {
  font-family: var(--font-en);
  font-size: 54px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.cover-ja-title {
  font-size: var(--type-heading);
  font-weight: 500;
  color: #C8BFB5;
  line-height: 1.4;
  margin-bottom: 26px;
}

.cover-rule { width: 36px; height: 2px; background: var(--gold); margin-bottom: 20px; }

.cover-desc {
  font-size: var(--type-sub);
  font-weight: 300;
  color: var(--text-muted-dark);
  line-height: 1.8;
  max-width: 380px;
}

.cover-meta {
  position: absolute;
  bottom: 6%;
  left: 9%;
  display: flex;
  align-items: center;
  gap: 18px;
}

.cover-meta-item {
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #3E3830;
  text-transform: uppercase;
}

.cover-meta-sep { width: 1px; height: 10px; background: #2E2A25; }

/* ============ INDEX（白背景） ============ */
.s-index {
  background: var(--white);
  padding: 6% 8%;
  display: flex;
  flex-direction: column;
}

.slide-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 4%;
}

.sec-label {
  font-family: var(--font-en);
  font-size: var(--type-en-label);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
}

.sec-title { font-size: var(--type-heading); font-weight: 700; color: #1A1714; }

.index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  flex: 1;
}

.index-grid--count-1 { grid-template-rows: 1fr; }
.index-grid--count-2 { grid-template-rows: 1fr; }
.index-grid--count-3 { grid-template-rows: 1fr; }
.index-grid--count-4 { grid-template-rows: repeat(2, 1fr); }
.index-grid--count-5 { grid-template-rows: repeat(2, 1fr); }

.index-card {
  background: var(--off-white);
  padding: 5% 7%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 2px solid var(--orange);
}

.index-num { font-family: var(--font-en); font-size: var(--type-index-num); font-weight: 900; color: var(--orange); line-height: 1; }
.index-en { font-family: var(--font-en); font-size: var(--type-index-en); font-weight: 500; color: #1A1714; }
.index-ja { font-size: var(--type-index-ja); font-weight: 300; color: var(--text-body-light); }

/* ============ CONTENT DARK ============ */
.s-dark {
  background: var(--warm);
  padding: 6% 8%;
  display: flex;
  flex-direction: column;
}

.pg-label-dark { font-family: var(--font-en); font-size: var(--type-en-display); font-weight: 900; color: var(--gold); line-height: 1; margin-bottom: 1px; }
.pg-cat-dark { font-family: var(--font-en); font-size: var(--type-en-label); font-weight: 600; letter-spacing: 0.25em; color: var(--text-muted-dark); text-transform: uppercase; margin-bottom: 10px; }
.pg-heading-dark { font-size: var(--type-heading); font-weight: 700; color: var(--white); line-height: 1.2; margin-bottom: 5px; }
.pg-sub-dark { font-size: var(--type-sub); font-weight: 300; color: var(--text-body-dark); margin-bottom: 18px; line-height: 1.6; }
.pg-sub-dark strong { color: var(--gold); font-weight: 500; }

.card-row-dark { display: flex; gap: 1px; flex: 1; background: var(--warm-sep); }
.c-dark { flex: 1; background: var(--warm-card); padding: 5% 6%; display: flex; flex-direction: column; gap: 8px; border-top: 1.5px solid var(--warm-sep); }
.c-tag-dark { font-family: var(--font-en); font-size: var(--type-card-tag); font-weight: 700; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; }
.c-title-dark { font-size: var(--type-card-title); font-weight: 700; color: var(--white); line-height: 1.35; }
.c-body-dark { font-size: var(--type-body); font-weight: 300; color: var(--text-body-dark); line-height: 1.75; }

/* ============ CONTENT LIGHT ============ */
.s-light {
  background: var(--white);
  padding: 6% 8%;
  display: flex;
  flex-direction: column;
}

.pg-label-light { font-family: var(--font-en); font-size: var(--type-en-display); font-weight: 900; color: var(--orange); line-height: 1; margin-bottom: 1px; }
.pg-cat-light { font-family: var(--font-en); font-size: var(--type-en-label); font-weight: 600; letter-spacing: 0.25em; color: var(--text-muted-light); text-transform: uppercase; margin-bottom: 10px; }
.pg-heading-light { font-size: var(--type-heading); font-weight: 700; color: #1A1714; line-height: 1.2; margin-bottom: 5px; }
.pg-sub-light { font-size: var(--type-sub); font-weight: 300; color: var(--text-body-light); margin-bottom: 18px; line-height: 1.6; }
.pg-sub-light strong { color: var(--orange); font-weight: 500; }

.card-row-light { display: flex; gap: 10px; flex: 1; }
.c-light { flex: 1; background: var(--off-white); border-top: 2px solid var(--orange); padding: 5% 6%; display: flex; flex-direction: column; gap: 8px; }
.c-tag-light { font-family: var(--font-en); font-size: var(--type-card-tag); font-weight: 700; letter-spacing: 0.2em; color: var(--orange); text-transform: uppercase; }
.c-title-light { font-size: var(--type-card-title); font-weight: 700; color: #1A1714; line-height: 1.35; }
.c-body-light { font-size: var(--type-body); font-weight: 300; color: var(--text-body-light); line-height: 1.75; }

/* ============ CHAPTER TITLE (型A) ============ */
.s-chapter {
  background: var(--warm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapter-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.chapter-part-label {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.chapter-rule {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--orange) 100%);
  margin-bottom: 22px;
}

.chapter-title {
  font-size: 38px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.chapter-sub {
  font-size: var(--type-sub);
  font-weight: 300;
  color: var(--text-body-dark);
  line-height: 1.6;
}

/* ============ ENDING ============ */
.s-end {
  background: var(--warm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
}

.end-rule-top { width: 1px; height: 40px; background: #2E2A26; margin-bottom: 28px; }
.end-label { font-family: var(--font-en); font-size: var(--type-en-label); font-weight: 600; letter-spacing: 0.35em; color: var(--gold); text-transform: uppercase; margin-bottom: 20px; }
.end-message { font-size: 26px; font-weight: 700; color: var(--white); text-align: center; line-height: 1.4; margin-bottom: 28px; }
.end-message span { color: var(--gold); }
.end-contact { font-family: var(--font-en); font-size: var(--type-sub); font-weight: 300; color: var(--text-muted-dark); letter-spacing: 0.05em; margin-bottom: 28px; }
.end-rule-bottom { width: 1px; height: 40px; background: #2E2A26; }
.end-logo {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
}

/* ============ PRESENTER MODE ============ */
.presenter-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
}

.presenter-overlay.is-active { display: flex; }

.presenter-overlay .slide-wrapper {
  max-width: min(96vw, calc(96vh * 16 / 9));
  margin: 0;
}

.presenter-overlay .slide { width: 100%; height: auto; }

.presenter-hud {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: rgba(28, 25, 23, 0.92);
  border: 1px solid #2E2A26;
  border-radius: 8px;
  color: #A09890;
  font-family: var(--font-en);
  font-size: 12px;
  z-index: 9001;
}

.presenter-hud kbd {
  display: inline-block;
  padding: 2px 6px;
  background: #242019;
  border: 1px solid #3A3630;
  border-radius: 4px;
  color: var(--gold);
  font-size: 11px;
}

/* ============ PRINT / PDF ============ */
@media print {
  @page { size:  landscape; margin: 0; }

  body { background: #fff !important; margin: 0; padding: 0; }

  .deck--standalone,
  .deck--preview {
    background: #fff;
    padding: 0;
  }

  .slide-wrapper {
    max-width: none;
    width: 100vw;
    height: 100vh;
    page-break-after: always;
    break-after: page;
    margin: 0;
  }

  .deck-spacer { display: none; }

  .slide {
    width: 100vw;
    height: 100vh;
    aspect-ratio: unset;
  }

  .presenter-hud,
  .no-print { display: none !important; }
}
