/* @theme dc */

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

@font-face {
  font-family: 'Latin Override';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 108%;
}

:root {
  --dc-bg: #fbfaf7;
  --dc-text: #1b1f23;
  --dc-text-2: #3a4046;
  --dc-text-3: #5a6066;
  --dc-muted: #7d838a;
  --dc-muted-3: #9aa0a6;
  --dc-accent: #0a7c98;
  --dc-accent-hover: #0a6076;
  --dc-panel: #f0eee7;
  --dc-border: #c4ccd0;
  --dc-border-2: #eae6dd;
  --dc-font-sans: 'Latin Override', 'Noto Sans JP', sans-serif;
  --dc-font-mono: 'JetBrains Mono', monospace;
}

section {
  width: 1920px;
  height: 1080px;
  background: var(--dc-bg);
  color: var(--dc-text);
  font-family: var(--dc-font-sans);
  padding: 104px 130px;
  font-size: 32px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

section a { color: var(--dc-accent); text-decoration: none; }
section a:hover { color: var(--dc-accent-hover); }

::selection { background: var(--dc-accent); color: #fff; }

/* Headings */
section h1 {
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.26;
  margin: 0 0 24px;
}
section h2 {
  font-size: 58px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 36px;
  max-width: 1620px;
}
section h3 {
  color: var(--dc-accent);
  font-family: var(--dc-font-mono);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 26px 0 14px;
  line-height: 1.3;
}
section h3:first-of-type { margin-top: 0; }

/* Prose */
section p {
  color: var(--dc-text-2);
  margin: 0 0 24px;
  max-width: 1620px;
}
section strong { color: inherit; font-weight: 700; }

/* Lists */
section ul {
  color: var(--dc-text-2);
  padding-left: 60px;
  margin: 0 0 24px;
}
section ul li { margin-bottom: 16px; }
section ol {
  font-size: 44px;
  color: var(--dc-text-2);
  line-height: 1.4;
  padding-left: 60px;
  margin: 0 0 24px;
  max-width: 1620px;
}
section ol > li { margin-bottom: 24px; padding-left: 8px; }
section ol > li::marker {
  color: var(--dc-accent);
  font-family: var(--dc-font-mono);
  font-weight: 700;
}

/* Inline code */
section :not(pre) > code {
  font-family: var(--dc-font-mono);
  font-size: 0.9em;
  color: var(--dc-text-3);
  background: none;
  padding: 0;
}
section strong code { color: inherit; }

/* Code blocks */
section pre {
  background: var(--dc-panel);
  border-radius: 8px;
  padding: 22px 40px;
  font-family: var(--dc-font-mono);
  font-size: 30px;
  line-height: 1.6;
  color: var(--dc-text-2);
  max-width: 1400px;
  overflow: auto;
  white-space: pre;
  margin: 0 0 20px;
}
section pre code {
  font-family: inherit;
  background: transparent;
}

/* highlight.js token colors (subset used by go/shell/js). Kept muted to fit the palette. */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal { color: #b0396a; }
.hljs-string,
.hljs-attr { color: #4a6b4a; }
.hljs-number,
.hljs-built_in,
.hljs-type { color: var(--dc-accent-hover); }
.hljs-title { color: #6b3fa0; }
.hljs-comment,
.hljs-meta { color: var(--dc-muted); font-style: italic; }
.hljs-params { color: var(--dc-text-2); }

/* Blockquote (used for image captions and quotes) */
section blockquote {
  border-left: 3px solid var(--dc-accent);
  padding-left: 28px;
  margin: 0 0 16px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 30px;
  line-height: 1.5;
  max-width: 1620px;
}
section blockquote p { font-size: inherit; color: inherit; margin: 0; max-width: none; }

/* Small text (used for captions after quotes, image credits, etc.) */
section small {
  font-size: 24px;
  color: var(--dc-muted);
  line-height: 1.5;
  display: block;
  margin: 0 0 18px;
}

/* Tables */
section table {
  border-collapse: collapse;
  font-size: 32px;
  max-width: 1720px;
  margin: 0 0 24px;
}
section thead tr { border-bottom: 2px solid var(--dc-border); }
section th {
  text-align: left;
  padding: 12px 28px;
  font-weight: 700;
  white-space: nowrap;
}
section td {
  padding: 12px 28px;
  color: var(--dc-text-2);
  line-height: 1.5;
  border-bottom: 1px solid var(--dc-border-2);
}

/* Images centered */
section img { display: block; margin: 0 auto; max-width: 100%; }

/* Pagination + footer (hashtag) — same style, mirrored to bottom corners.
   `padding: 0` overrides Marp's `padding: inherit` on ::after, which would
   otherwise push the pagination up by section's padding-bottom. */
section::after,
section > footer {
  color: var(--dc-muted-3);
  font-family: var(--dc-font-mono);
  font-size: 22px;
  font-weight: 400;
  padding: 0;
  bottom: 40px;
}
section::after { right: 130px; }
section > footer { left: 130px; position: absolute; }

/* -- Cover + Section divider — both center content and hide chrome -- */
section.cover,
section.section {
  justify-content: center;
  align-items: flex-start;
}
section.cover::after,
section.cover > footer,
section.section::after,
section.section > footer { display: none; }

/* -- Cover slide (<!-- _class: cover -->) -- */
section.cover h1 {
  font-size: 96px;
  line-height: 1.2;
  margin: 0 0 48px;
}
section.cover p {
  font-size: 28px;
  color: var(--dc-muted);
  margin: 0 0 8px;
}

/* -- Section divider (<!-- _class: section -->) -- */
section.section h1 {
  font-size: 128px;
  line-height: 1.15;
  margin: 0;
}
section.section p {
  font-family: var(--dc-font-mono);
  font-size: 32px;
  color: var(--dc-accent);
  letter-spacing: 0.08em;
  margin: 0 0 32px;
}

/* -- Profile slide (<!-- _class: profile -->) --
   Image left, facts table right. h2 spans the top full width.
   Rows are `auto 1fr` so the heading pins to the top like every other
   content slide (without it, the grid's default align-content:stretch grows
   both rows and align-items:center drops a phantom margin above the heading).
   Markdown structure:
     ## 自己紹介
     ![](./public/shared/icon.jpg)   ← 幅は指定しない（カラム幅いっぱいに表示する）
     | key | value |
     ...
*/
section.profile {
  display: grid;
  grid-template-columns: 440px 1fr;
  grid-template-rows: auto auto;
  column-gap: 80px;
  align-content: start;
  align-items: start;
}
section.profile > h2 { grid-column: 1 / -1; }
/* 行の高さは表なりなので、画像だけその中で上下中央に置く */
section.profile > p { margin: 0; align-self: center; }
section.profile img { width: 100%; border-radius: 50%; }
section.profile > table { margin: 0; font-size: 32px; }
/* 行を厚くして、画像と表の高さを近づける（上寄せだと下に余白が固まるため） */
section.profile th,
section.profile td { padding: 24px 28px; }

/* -- Compare slide (<!-- _class: compare -->) --
   図を2枚横に並べる。画像を含む段落が1カラム分（図＋その図のキャプション）、
   画像を含まない段落は全幅に置く（結論の1行）。
   画像は `object-fit: contain` の固定枠に入れるので、縦横比が違う図でも
   歪まずカラムいっぱいまで拡大される。
   Markdown structure:
     ## 見出し
     ![](./public/a.svg)
     **A** — 説明
     (空行)
     ![](./public/b.svg)
     **B** — 説明
     (空行)
     結論の1行
*/
section.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
  align-content: start;
}
section.compare > h2 { grid-column: 1 / -1; }
section.compare > p {
  margin: 0;
  max-width: none;
  text-align: center;
}
section.compare > p:not(:has(img)) {
  grid-column: 1 / -1;
  margin-top: 32px;
  text-align: left;
}
section.compare img {
  width: 100%;
  height: 560px;
  object-fit: contain;
  margin-bottom: 20px;
}

/* -- Logo slide (<!-- _class: logo -->) --
   本文は必要な幅だけ取り、ロゴは「残った余白」の中央に置く。
   Marp の `![bg right:N%]` は画面右 N% の帯の中央に置く指定なので、本文が短いと
   ロゴだけ極端に離れる。余白基準で決めたいのでグリッドで組む。
   Markdown structure:
     ## PlantUMLとは
     ![w:220](./public/plantuml-logo.png)
     - 本文
*/
section.logo {
  display: grid;
  grid-template-columns: fit-content(1150px) 1fr;
  column-gap: 40px;
  align-content: start;
}
section.logo > :is(h3, p, ul, ol, table, pre, blockquote) { grid-column: 1; }
section.logo > h2 { grid-column: 1 / -1; }
section.logo > p:has(img) {
  grid-column: 2;
  grid-row: 2 / span 99;
  align-self: center;
  margin: 0;
}