/* 幻灯の見た目。deck（Google Slides）のテーマ「コードの垂直距離」を写す。
   スライドの中の寸法は cqw（スライド幅の 1%）で書く。一覧・発表者ビュー・OGP でも同じ比率で縮む */

:root {
  --accent: #274e13;
  --fig-on: #3b6d2a;
  --fig-sub: #b4c7ae;
  --fig-off: #e9ece6;
  --font: Murecho, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --mono: 'Noto Sans Mono', ui-monospace, Menlo, monospace;
}

html,
body {
  margin: 0;
  padding: 0;
}

body.gentou {
  background: #111;
  font-family: var(--font);
  overflow: hidden;
  height: 100dvh;
  -webkit-text-size-adjust: 100%;
}

/* ---- 1枚表示 ---- */
.gentou .deck {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

.slide {
  display: none;
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  background: var(--bg, #fff);
  color: #333;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
.gentou .deck > .slide.active {
  display: block;
}

.sl {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 4.1cqw 4.4cqw 3.4cqw;
  display: flex;
  flex-direction: column;
  font-size: calc(2.5cqw * var(--size, 1));
  line-height: 1.8;
}

.sl p,
.sl ul,
.sl ol {
  margin: 0 0 0.55em;
}
.sl ul,
.sl ol {
  padding-left: 1.2em;
}
.sl ul {
  list-style: '●';
}
.sl ul > li {
  padding-left: 0.9em;
}
.sl ul > li::marker {
  font-size: 0.72em;
}
.sl ol {
  padding-left: 1.75em;
}
.sl ol > li {
  padding-left: 0.35em;
}
.sl ul ul {
  list-style: '○';
  padding-left: 1.4em;
}
.sl li + li {
  margin-top: 0.1em;
}
.sl ul ul,
.sl ol ol,
.sl ul ol,
.sl ol ul {
  margin: 0;
}
.sl li::marker {
  color: #333;
}
.sl strong {
  /* 太字は本文と同じ文字色（2026-11-05 啓輔さん: 緑 → 黒に戻す）。地が暗いスライドでは白のまま */
  color: inherit;
  font-weight: 700;
}
.sl a {
  color: var(--accent);
}
.sl code {
  font-family: var(--mono);
  background: #f2f2f2;
  padding: 0 0.15em;
  font-size: 0.95em;
  border-radius: 0.1em;
}
.sl .small {
  font-size: 0.62em;
  color: #777;
  line-height: 1.6;
}
.sl h1,
.sl h2,
.sl h3,
.sl h4 {
  color: #000;
  margin: 0 0 0.4em;
  line-height: 1.4;
}
.sl-body h2 {
  font-size: 1.15em;
}
.sl-body h3,
.sl-body h4 {
  font-size: 1em;
}

/* ---- 本文（deck の title-and-body / title-sub-and-body） ---- */
.sl-head .sl-h {
  font-size: 4cqw;
  line-height: 1.7;
  font-weight: 700;
  color: #000;
  margin: 0 0 0 -1.4cqw;
  border-left: 0.4cqw solid var(--accent);
  padding-left: 1cqw;
}
.sl-head:has(.sl-sub) .sl-h {
  line-height: 1.4;
}
.sl-head .sl-sub {
  font-size: 1.75cqw;
  font-weight: 700;
  color: #666;
  margin: 0.2cqw 0 0;
  line-height: 1.4;
}
.sl-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 2.9cqw;
}
.sl-head:has(.sl-sub) + .sl-body {
  margin-top: 3.3cqw;
}
.sl-body:first-child {
  margin-top: 0;
}
.sl-cols {
  flex-direction: row;
  gap: 3cqw;
}
.sl-cols > .col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---- 表紙 ---- */
.layout-title .sl {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.sl-titlepage .t-main {
  font-size: calc(6.2cqw * var(--size, 1));
  font-weight: 700;
  line-height: 1.4;
  color: #000;
  margin: 0;
}
.sl-titlepage .t-rule {
  width: 5.75cqw;
  height: 0.3cqw;
  background: var(--accent);
  margin: 3.4cqw auto 5cqw;
}
.sl-titlepage .t-sub {
  font-size: calc(3cqw * var(--size, 1));
  line-height: 1.45;
  color: #333;
}
.sl-titlepage .t-sub > * {
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  margin: 0;
  line-height: inherit;
}

/* ---- 区切り（深緑・白） ---- */
.slide.layout-section {
  background: var(--bg, var(--accent));
  color: #fff;
}
.layout-section .sl,
.layout-section-white .sl {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.sl .sl-center > * {
  font-size: calc(5cqw * var(--size, 1));
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  color: inherit;
}
.layout-section .sl-center strong {
  color: inherit;
}
.sl .layout-section-white .sl-center > *,
.layout-section-white .sl .sl-center > * {
  color: #333;
}

/* ::bg=…:: で地を変えたとき */
.slide.is-dark {
  color: #fff;
}
.slide.is-dark .sl h1,
.slide.is-dark .sl h2,
.slide.is-dark .sl h3,
.slide.is-dark .sl h4,
.slide.is-dark .sl-head .sl-h {
  color: #fff;
}
.slide.is-dark .sl-head:has(.sl-sub) .sl-h {
  line-height: 1.4;
}
.sl-head .sl-sub {
  color: #ccc;
}
.slide.is-dark .sl code {
  background: rgba(255, 255, 255, 0.15);
}
.slide.layout-section.is-light {
  color: #333;
}

.slide.is-light,
.theme-dark .slide.is-light {
  color: #333;
}
.slide.is-light .sl h1,
.slide.is-light .sl h2,
.slide.is-light .sl h3,
.slide.is-light .sl h4,
.slide.is-light .sl-head .sl-h,
.slide.is-light .sl-titlepage .t-main {
  color: #000;
}
.slide.is-light .sl code {
  background: rgba(0, 0, 0, 0.07);
}
.slide.is-light .sl-head:has(.sl-sub) .sl-h {
  line-height: 1.4;
}
.sl-head .sl-sub {
  color: #555;
}

/* ---- コード ---- */
.code {
  position: relative;
  align-self: flex-start;
  width: fit-content;
  min-width: 55%;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 0.6cqw;
  padding: 1.2cqw 1.6cqw 1.3cqw;
  margin: 1cqw 0 1.4cqw;
  line-height: 1.4;
}
.code-lang {
  display: block;
  font-size: 1.1cqw;
  color: #666;
  min-height: 1.1cqw;
  margin-bottom: 1cqw;
}
.code-copy {
  position: absolute;
  top: 0.8cqw;
  right: 0.8cqw;
  font: 500 1.05cqw var(--font);
  color: #555;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 0.4cqw;
  padding: 0.2cqw 0.8cqw;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.code:hover .code-copy,
.code-copy:focus-visible,
.code-copy.done {
  opacity: 1;
}
.code pre {
  margin: 0;
  background: transparent !important;
  font-family: var(--mono);
  font-size: calc(1.5cqw * var(--size, 1));
  line-height: 1.65;
  overflow: auto;
  color: var(--shiki-light, #383a42);
}
.code pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.code .shiki span {
  color: var(--shiki-light);
}

/* ---- 表 ---- */
.sl table {
  border-collapse: collapse;
  font-size: 0.85em;
  margin: 0.4em 0 0.8em;
  align-self: flex-start;
}
.sl th,
.sl td {
  border-bottom: 1px solid #ccc;
  padding: 0.35em 0.9em;
  text-align: left;
  vertical-align: top;
}
.sl th {
  border-bottom: 0.2cqw solid var(--accent);
  font-weight: 700;
  color: #000;
}

/* ---- 画像 ---- */
.sl figure.img {
  margin: 0.8cqw 0;
  text-align: center;
  min-height: 0;
}
.sl figure.img img {
  max-width: 100%;
  max-height: 30cqw;
  object-fit: contain;
  vertical-align: top;
}
.sl figure.img img[style] {
  max-height: none;
}
.sl figcaption {
  font-size: 1.3cqw;
  color: #666;
  margin-top: 0.6cqw;
  line-height: 1.5;
}
.sl p img {
  max-width: 100%;
}

/* ---- 図（```pages ・ ```bars） ---- */
.fig {
  margin: auto 0;
  padding-top: 1cqw;
  text-align: center;
  line-height: 1.4;
  width: 100%;
}
.fig-title {
  font-size: 1.47cqw;
  color: #333;
  margin: 0 0 1.3cqw;
}
.pg-row + .fig-title {
  margin-top: 1.2cqw;
}
.fig-note {
  font-size: 1.27cqw;
  color: #666;
  margin-top: 0.5cqw;
}
.pg-row + .fig-note,
.bars + .fig-note {
  margin-top: 2.4cqw;
}
.pg-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(0.78cqw * var(--fig, 1));
}
.pg-row + .pg-row {
  margin-top: calc(3.2cqw * var(--fig, 1));
}
.pg-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: calc(6.85cqw * var(--fig, 1));
}
.pg-box {
  box-sizing: border-box;
  min-width: calc(6.85cqw * var(--fig, 1));
  height: calc(5.4cqw * var(--fig, 1));
  padding: 0 calc(0.9cqw * var(--fig, 1));
  border-radius: 0.4cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(2.15cqw * var(--fig, 1));
  font-weight: 700;
  white-space: nowrap;
}
.pg-on {
  background: var(--fig-on);
  color: #fff;
}
.pg-sub {
  background: var(--fig-sub);
  color: #1f3a12;
}
.pg-off {
  background: var(--fig-off);
  color: #333;
}
.pg-gap {
  height: calc(5.4cqw * var(--fig, 1));
  display: flex;
  align-items: center;
  font-size: calc(2.15cqw * var(--fig, 1));
  color: #333;
}
.pg-under {
  font-size: 1.17cqw;
  color: #333;
  margin-top: 0.6cqw;
  white-space: nowrap;
}
.pg-wide {
  min-width: calc(33cqw * var(--fig, 1));
  height: calc(7.3cqw * var(--fig, 1));
}
.pg-wide .pg-label {
  font-size: calc(1.75cqw * var(--fig, 1));
}
.pg-detail {
  font-size: calc(1.25cqw * var(--fig, 1));
  font-weight: 400;
  margin-top: 0.4cqw;
}
.bars {
  display: grid;
  grid-template-columns: 1.15fr 42cqw 0.85fr;
  row-gap: 2.9cqw;
  align-items: center;
}
.bar-label {
  text-align: right;
  padding-right: 1.4cqw;
  font-size: 1.66cqw;
  color: #333;
}
.bar-track {
  display: flex;
  align-items: center;
  gap: 1cqw;
  white-space: nowrap;
}
.bar {
  flex: none;
  height: 3.4cqw;
  background: var(--fig-on);
  border-radius: 0.3cqw;
}
.bar.bar-sub {
  background: var(--fig-sub);
}
.bar-value {
  font-size: 1.66cqw;
  font-weight: 700;
  color: #333;
}
.fig code {
  font-family: var(--mono);
  background: #f2f2f2;
  padding: 0 0.15em;
}

/* ---- dark テーマ ---- */
.theme-dark .slide {
  background: var(--bg, #161816);
  color: #e6e6e6;
}
.theme-dark .slide.layout-section {
  background: var(--bg, var(--accent));
}
.theme-dark .sl h1,
.theme-dark .sl h2,
.theme-dark .sl h3,
.theme-dark .sl h4,
.theme-dark .sl-head .sl-h,
.theme-dark .sl-titlepage .t-main {
  color: #fff;
}
.theme-dark .sl-head .sl-sub,
.theme-dark .sl-titlepage .t-sub,
.theme-dark .layout-section-white .sl .sl-center > * {
  color: #bbb;
}
.theme-dark .sl code,
.theme-dark .fig code {
  background: #2a2c2a;
}
.theme-dark .sl li::marker {
  color: #ccc;
}
.theme-dark .code {
  background: #0d1117;
  border-color: #333;
}
.theme-dark .code pre,
.theme-dark .code .shiki span {
  color: var(--shiki-dark);
}
.theme-dark .pg-off {
  background: #2b2f2a;
  color: #ddd;
}
.theme-dark .fig-title,
.theme-dark .pg-under,
.theme-dark .pg-gap,
.theme-dark .bar-label,
.theme-dark .bar-value {
  color: #ddd;
}
.theme-dark .sl th {
  color: #fff;
}

/* ---- 右下の表示（ページ・タイマー） ---- */
.hud {
  position: fixed;
  right: 10px;
  bottom: 6px;
  display: flex;
  gap: 12px;
  font: 500 12px/1 var(--font);
  color: rgba(150, 150, 150, 0.85);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.3s;
}
.hud.show {
  opacity: 1;
}

/* ---- 一覧（o） ---- */
body.overview {
  overflow: auto;
}
body.overview .deck {
  position: fixed;
  inset: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-content: start;
  place-items: stretch;
  gap: 16px;
  padding: 16px;
}
body.overview .deck > .slide {
  display: block;
  width: 100%;
  cursor: pointer;
  user-select: none;
}
body.overview .deck > .slide.active {
  outline: 3px solid #6fa457;
  outline-offset: 2px;
}
body.overview .hud {
  display: none;
}

/* ---- 埋め込み（発表者ビュー）・OGP ---- */
body.embed {
  background: #fff;
}
body.og .deck {
  display: block;
}
body.og .deck > .slide.active {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100vw;
  transform: translateY(-50%);
}

/* ---- スマホ縦持ち: 全スライドを縦に積む ---- */
@media (orientation: portrait) and (max-width: 900px) {
  body.gentou:not(.embed):not(.overview) {
    overflow: auto;
    height: auto;
    background: #d8d8d8;
  }
  body.gentou:not(.embed):not(.overview) .deck {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 40px;
  }
  body.gentou:not(.embed):not(.overview) .deck > .slide {
    display: block;
    width: 100vw;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }
  body.gentou:not(.embed) .hud {
    display: none;
  }
}

/* ---- 発表者ビュー ---- */
body.presenter {
  margin: 0;
  background: #1e1f1e;
  color: #eee;
  font-family: var(--font);
}
.pv {
  display: grid;
  grid-template-columns: 62fr 38fr;
  grid-template-rows: auto 1fr;
  height: 100dvh;
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
}
.pv-top {
  grid-column: 1 / -1;
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 18px;
}
.pv-timer {
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pv-clock {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: #aaa;
}
.pv-reset,
.pv-key button {
  font: 500 14px var(--font);
  background: #333;
  color: #eee;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.pv-cur iframe,
.pv-next iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #fff;
}
.pv-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.pv-label {
  font-size: 13px;
  color: #999;
}
.pv-notes {
  flex: 1;
  overflow: auto;
  font-size: 22px;
  line-height: 1.7;
  white-space: pre-wrap;
  background: #2a2b2a;
  padding: 12px 16px;
  border-radius: 6px;
}
.pv-notes.empty {
  color: #777;
}
.pv-key input {
  font: 16px var(--font);
  padding: 4px 8px;
}

/* ---- トップ ---- */
body.index {
  font-family: var(--font);
  color: #222;
  background: #fff;
}
.ix {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px;
}
.ix h1 {
  font-size: 28px;
  border-left: 4px solid var(--accent);
  padding-left: 12px;
}
.ix ul {
  list-style: none;
  padding: 0;
}
.ix li a {
  display: flex;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid #eee;
  color: inherit;
  text-decoration: none;
}
.ix li a:hover .ix-title {
  color: var(--accent);
}
.ix-date {
  color: #888;
  font-variant-numeric: tabular-nums;
  min-width: 6.5em;
}