/*
 * 色は背景・文字・強調の3色を基本とし、強調色の淡色と補助の灰色を面と線に使う。
 *
 * 発表形態はオンライン (画面共有) を前提とする。
 * - 本文の下限は 28px (21pt)。
 * - 本文は全幅を使い、キャラクターとの重なりは許容する。
 */
:root {
  --c-bg: #ffffff;
  --c-text: #1f2937;
  --c-accent: #0759b5;
  --c-accent-tint: #eaf1fa;
  --c-muted: #4b5563;
  --c-muted-tint: #f1f3f5;
  --c-line: #c9d6e8;
  --c-warn: #b42318;

  --r-background-color: var(--c-bg);
  --r-main-color: var(--c-text);
  --r-heading-color: var(--c-text);
  --r-heading-text-transform: none;
  --r-heading-font-weight: 700;
  --r-heading-line-height: 1.3;
  --r-link-color: var(--c-accent);
  --r-link-color-hover: var(--c-accent);
  --r-main-font: "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  --r-heading-font: "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  --r-main-font-size: 28px;
  --r-heading1-size: 54px;
  --r-heading2-size: 38px;
  --r-heading3-size: 32px;
}

/* ---- 基本レイアウト ---- */

.reveal .slides {
  text-align: left;
}

.reveal .slides section > :not(section) {
  box-sizing: border-box;
  max-width: 100%;
}

.reveal .slides section > h2 {
  margin: 0 0 24px;
}

/* 日本語を文節単位で折り返す (未対応のブラウザでは通常の折り返しになる) */
.reveal h1,
.reveal h2,
.reveal p,
.reveal li,
.reveal dt,
.reveal dd,
.reveal th,
.reveal td {
  word-break: auto-phrase;
}

.reveal p,
.reveal li,
.reveal dd {
  line-height: 1.45;
}

.reveal p {
  margin: 0 0 20px;
}

.reveal ul,
.reveal ol {
  margin: 0;
}

/* ---- 表紙 ---- */

.reveal .slides section:has(> h1) h1 {
  max-width: 100%;
  margin: 150px 0 32px;
  font-size: var(--r-heading1-size);
  line-height: 1.35;
  color: var(--c-accent);
}

.reveal .subtitle p {
  color: var(--c-muted);
  font-size: 30px;
}

/* section の高さは内容に合わせて変わるため、下端ではなく上端から位置を決める */
.reveal .byline {
  position: absolute;
  top: 520px;
  left: 0;
}

.reveal .byline p {
  margin: 0 0 4px;
  color: var(--c-muted);
}

.reveal .byline p:first-child {
  color: var(--c-text);
  font-weight: 700;
}

/* ---- 自己紹介 ---- */

.reveal .profile {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.reveal img.profile-icon {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
}

.reveal .accounts p {
  margin: 0 0 20px;
  color: var(--c-muted);
}

/* ---- 章ラベル: 見出しの上に置く ---- */

.reveal .eyebrow {
  position: absolute;
  top: 0;
  left: 0;
}

.reveal .eyebrow p {
  margin: 0;
  color: var(--c-accent);
  font-weight: 700;
}

.reveal .slides section:has(> .eyebrow) > h2 {
  margin-top: 46px;
}

.reveal .slides section:has(> h1) > .eyebrow {
  top: 96px;
}

/* ---- 章ナビ: chapter-nav.js が eyebrow を置き換える ---- */

.reveal .chapter-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
}

.reveal .chapter-nav .ch {
  padding: 2px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-muted);
  font-weight: 400;
}

.reveal .chapter-nav .ch.current {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #ffffff;
  font-weight: 700;
}

.reveal .chapter-nav .sep {
  color: var(--c-line);
}

.reveal .slides section:has(> .eyebrow.has-chapter-nav) > h2 {
  margin-top: 60px;
}

/* ---- 締めのスライド ---- */

.reveal .slides section:has(> .closing) > h2 {
  margin-top: 150px;
  font-size: 48px;
  line-height: 1.4;
  color: var(--c-accent);
}

.reveal .closing p {
  color: var(--c-muted);
  font-size: 30px;
}

.reveal .closing p:last-child {
  margin-top: 120px;
  color: var(--c-text);
  font-weight: 700;
}

/* ---- アジェンダ: 番号付きの丸 ---- */

.reveal .agenda ol {
  list-style: none;
  counter-reset: agenda;
  padding: 0;
}

.reveal .agenda li {
  counter-increment: agenda;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 18px;
}

.reveal .agenda li::before {
  content: counter(agenda);
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #ffffff;
  font-weight: 700;
}

.reveal .agenda li p {
  margin: 0;
}

/* ---- カード ---- */

.reveal .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.reveal .cards.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 文節が列幅より長いときだけ文節の途中で折り返す */
.reveal .cards p,
.reveal .cards li {
  overflow-wrap: anywhere;
}

.reveal .card {
  padding: 28px;
  border-radius: 16px;
  background: var(--c-accent-tint);
}

.reveal .card p {
  margin: 0 0 12px;
}

.reveal .card > p:first-child {
  color: var(--c-accent);
  font-weight: 700;
}

.reveal .card > :last-child {
  margin-bottom: 0;
}

.reveal .card ul {
  padding-left: 1.1em;
}

.reveal .card li + li {
  margin-top: 6px;
}

.reveal .card.pending {
  background: var(--c-muted-tint);
}

.reveal .card.pending > p:first-child {
  color: var(--c-text);
}

/* ---- ラベルと説明の行 (定義リスト) ---- */

.reveal .rows dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 14px 28px;
  align-items: center;
  margin: 0;
}

.reveal .rows dt {
  margin: 0;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--c-accent);
  color: #ffffff;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.reveal .rows dd {
  margin: 0;
}

.reveal .rows dd p {
  margin: 0;
}

/* 説明が2段落あるときは1段落目を小見出しとして扱う */
.reveal .rows dd > p:first-child:not(:last-child) {
  color: var(--c-accent);
  font-weight: 700;
}

/* 手順: 定義リストの各組を横に並べ、番号付きの列にする */
.reveal .steps dl {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-template-rows: auto 1fr;
  gap: 0 24px;
  margin: 0;
  counter-reset: step;
}

.reveal .steps dt {
  counter-increment: step;
  margin: 0;
  padding: 28px 28px 12px;
  border-radius: 16px 16px 0 0;
  background: var(--c-accent);
  color: #ffffff;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.reveal .steps dt::before {
  content: counter(step);
  display: block;
  margin-bottom: 8px;
  font-size: 48px;
  line-height: 1;
}

.reveal .steps dd {
  margin: 0;
  padding: 20px 28px 28px;
  border-radius: 0 0 16px 16px;
  background: var(--c-accent-tint);
}

.reveal .steps dd p {
  margin: 0;
}

.reveal .steps dd p + p {
  margin-top: 8px;
}

/* 層: 1行目にラベルと小見出し、2行目に説明を全幅で置く */
.reveal .rows.layers dl {
  gap: 8px 24px;
}

.reveal .rows.layers dd {
  display: contents;
}

.reveal .rows.layers dd > p:last-child {
  grid-column: 1 / -1;
  margin-bottom: 20px;
}

.reveal .rows.compact dt {
  text-align: center;
}

/* ---- チェックリスト ---- */

.reveal .checklist ul {
  list-style: none;
  padding: 0;
}

.reveal .checklist li {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 16px;
}

.reveal .checklist li::before {
  content: "✓";
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #ffffff;
  font-weight: 700;
}

.reveal .checklist li p {
  margin: 0;
}

/* ---- 結論・補足の帯 ---- */

.reveal .callout {
  margin: 24px 0;
  padding: 14px 28px;
  border-radius: 12px;
  background: var(--c-accent-tint);
}

.reveal .callout p {
  margin: 0;
  font-weight: 700;
}

.reveal .callout p + p {
  margin-top: 8px;
  font-weight: 400;
}

/* 想定外の挙動など、注意を引く帯 */
.reveal .callout.warn {
  background: #fdeceb;
}

.reveal .callout.warn p:first-child {
  color: var(--c-warn);
}

.reveal .footnote p {
  margin: 20px 0 0;
  color: var(--c-muted);
}

/* ---- 2段組み ---- */

.reveal .split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

.reveal .split > :first-child img {
  display: block;
  margin: 0;
}

.reveal .stack {
  display: grid;
  gap: 20px;
}

.reveal .card ul + p {
  margin-top: 16px;
}

.reveal .panel p:first-child {
  color: var(--c-accent);
  font-weight: 700;
}

/* ---- 図 ---- */

.reveal .slides img {
  max-width: 100%;
  margin: 0;
}

/* ---- 表 ---- */

.reveal table {
  margin: 0;
  border-collapse: collapse;
  font-size: 28px;
}

/* Sphinx はセルの中身を <p> で包むため、段落の余白を打ち消す */
.reveal table p {
  margin: 0;
}

/* 1列目は項目名なので折り返さず、説明の列に幅を回す */
.reveal table tbody td:first-child {
  white-space: nowrap;
}

.reveal table th,
.reveal table td {
  padding: 5px 16px;
  border-bottom: 1px solid var(--c-line);
  line-height: 1.4;
  vertical-align: middle;
}

.reveal table thead th {
  border-bottom: 2px solid var(--c-accent);
  color: var(--c-accent);
}

.reveal table tbody td:first-child {
  font-weight: 700;
}

.reveal .ok {
  color: var(--c-accent);
  font-weight: 700;
}

.reveal .mid {
  color: var(--c-muted);
  font-weight: 700;
}

.reveal .ng {
  color: var(--c-warn);
  font-weight: 700;
}

/* ---- コード ---- */

.reveal pre {
  width: 100%;
  margin: 0 0 16px;
  font-size: 28px;
  box-shadow: none;
}

/* 長い行はスライド外へはみ出さないよう折り返す */
.reveal pre code {
  max-height: none;
  padding: 16px 20px;
  border-radius: 12px;
  background: #1f2937;
  color: #f3f4f6;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.reveal pre code span {
  color: inherit !important;
}

.reveal code {
  font-family: "Cascadia Mono", "Consolas", "BIZ UDGothic", monospace;
}

.reveal p code,
.reveal li code,
.reveal td code {
  padding: 0 6px;
  border-radius: 6px;
  background: var(--c-muted-tint);
  font-size: 0.9em;
}

/* ---- 画面の画像 ---- */

.reveal img.screenshot {
  display: block;
  width: 100%;
  border-radius: 12px;
}