/*
 * 配色はダークに固定する（ライトモードは持たない）。
 * 黒地に、アクセント色を 3 つ使う。--yellow が主、--green / --green-2 が従、--red はヘッダーなどの差し色だけ。
 */
:root {
  --background: #0d1210;
  --background-2: #141b17;
  --surface: #1a2320;
  --border: #2a3630;
  --foreground: #f1f3f2;
  --muted: #a9b3ad;

  --yellow: #ffe100;
  --green: #0d9b4e;
  --green-2: #11c061;
  --red: #e5002b;

  /* アクセント色を薄く敷くとき（タグの地など） */
  --yellow-dim: #2a2600;
  --green-dim: #0f2a1b;

  --focus: var(--yellow);
  --content-width: 1024px;
  color-scheme: dark;
}

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

html,
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Noto Sans JP", system-ui, "Hiragino Sans", sans-serif;
  line-height: 1.7;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  line-height: 1.4;
}

/* ページの見出しは控えめな大きさにそろえる（記事のタイトルだけ PostDetail で大きくする） */
h1 {
  font-size: 1.5rem;
}

/* キーボード操作のフォーカスは黄のリングで統一する */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* shared/app/layout.module.css */
.layout_main {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 32px 16px 64px;
}

/* shared/components/SiteHeader.module.css */
.SiteHeader_header {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

/*
 * PC: 左に赤→黄→緑を 62° の斜めで並べ、右（420px から 640px）と下（30% から）へ黒に溶かす。
 * mask が効かない環境では 3 色が溶けずに切れるだけで、ナビは黒地の上にあるので読める。
 */
.SiteHeader_header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    62deg,
    var(--red) 0 190px,
    var(--yellow) 190px 392px,
    var(--green) 392px 560px,
    transparent 560px
  );
  -webkit-mask:
    linear-gradient(90deg, #000 0 420px, transparent 640px),
    linear-gradient(180deg, #000 0 30%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, #000 0 420px, transparent 640px),
    linear-gradient(180deg, #000 0 30%, transparent 100%);
  mask-composite: intersect;
}

/* スマホ用の帯。PC では出さない */
.SiteHeader_band {
  display: none;
}

.SiteHeader_inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 64px;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 16px;
}

.SiteHeader_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.SiteHeader_nav a {
  display: inline-block;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.SiteHeader_nav a:hover,
.SiteHeader_nav a:focus-visible {
  border-bottom-color: var(--muted);
}

/* 現在地は黄の下線 */
.SiteHeader_nav a[aria-current="page"] {
  border-bottom-color: var(--yellow);
}

@media (max-width: 640px) {
  .SiteHeader_header::before {
    display: none;
  }

  /* 上端に 14px の帯。3 色を幅いっぱいに並べ、右端だけ黒へ溶かす */
  .SiteHeader_band {
    display: block;
    height: 14px;
    background: linear-gradient(
      62deg,
      var(--red) 0 30%,
      var(--yellow) 30% 70%,
      var(--green) 70% 100%
    );
    -webkit-mask: linear-gradient(90deg, #000 0 84%, transparent 100%);
    mask: linear-gradient(90deg, #000 0 84%, transparent 100%);
  }

  .SiteHeader_inner {
    justify-content: flex-start;
    height: 44px;
  }

  .SiteHeader_nav {
    gap: 4px 16px;
    font-size: 0.875rem;
  }
}

/* shared/components/SiteFooter.module.css */
.SiteFooter_footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.875rem;
}

.SiteFooter_inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 16px;
}

.SiteFooter_inner a {
  color: var(--yellow);
  text-decoration: none;
}

.SiteFooter_inner a:hover {
  text-decoration: underline;
}

/* src/FooterBackButton.module.css */
/* フッターのリンク（SiteFooter.module.css の .inner a）と同じ見た目にする */
.FooterBackButton_button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--yellow);
  font: inherit;
  cursor: pointer;
}

.FooterBackButton_button:hover {
  text-decoration: underline;
}

/* shared/components/PostList.module.css */
.PostList_heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.PostList_heading h1 {
  margin: 0;
  font-size: 1.5rem;
}

.PostList_count {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.PostList_lead {
  margin: 4px 0 24px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.PostList_list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 左に 3px の縦線。accent のカードだけ黄 */
.PostList_card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-2);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 0.15s;
}

.PostList_card.PostList_accent {
  border-left-color: var(--yellow);
}

.PostList_card:hover {
  border-top-color: var(--green-2);
  border-right-color: var(--green-2);
  border-bottom-color: var(--green-2);
}

/* カード全体でキーボードのフォーカスが見えるようにする */
.PostList_card:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.PostList_title {
  margin: 0 0 4px;
  font-size: 1.0625rem;
}

.PostList_title a {
  color: var(--foreground);
  text-decoration: none;
}

/* 下書きの印。右肩のバッジと見分けるため、灰の破線枠にする */
.PostList_draft {
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px dashed var(--muted);
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}

/* リンクの当たり判定をカード全体に広げる */
.PostList_title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* フォーカスリングはカード側（:focus-within）で出す */
.PostList_title a:focus-visible {
  outline: none;
}

.PostList_summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.PostList_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.PostList_chips li {
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.8;
}

.PostList_date {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.PostList_empty {
  color: var(--muted);
}

@media (max-width: 640px) {
  .PostList_card {
    padding: 16px;
  }

  /* 右に日付を出すカードは、日付をタイトルの上に回し、本文の幅を確保する */
  .PostList_post {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .PostList_post .PostList_date {
    order: -1;
  }
}

/* shared/components/PostDetail.module.css */
/*
 * PC は本文（左）と目次（右、220px、sticky）の 2 列。目次は本文の高さいっぱいの列に置き、
 * 900px 以下では 1 列にして、目次を見出しと本文のあいだに入れる。
 */
.PostDetail_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "content";
}

.PostDetail_layout.PostDetail_withToc {
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header aside"
    "content aside";
  column-gap: 48px;
}

.PostDetail_header {
  grid-area: header;
  margin-bottom: 32px;
}

.PostDetail_aside {
  grid-area: aside;
}

.PostDetail_aside > * {
  position: sticky;
  top: 24px;
}

.PostDetail_content {
  grid-area: content;
  min-width: 0;
}

@media (max-width: 900px) {
  .PostDetail_layout.PostDetail_withToc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "header"
      "aside"
      "content";
  }

  .PostDetail_aside {
    margin-bottom: 32px;
  }

  .PostDetail_aside > * {
    position: static;
  }
}

.PostDetail_breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0 0 8px;
  padding: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  list-style: none;
}

.PostDetail_breadcrumb li + li::before {
  content: "／";
  margin-right: 8px;
}

.PostDetail_breadcrumb a {
  color: var(--yellow);
  text-decoration: none;
}

.PostDetail_breadcrumb a:hover {
  text-decoration: underline;
}

.PostDetail_dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* 下書きの印。一覧と同じ灰の破線枠 */
.PostDetail_draft {
  padding: 0 8px;
  border: 1px dashed var(--muted);
  border-radius: 4px;
  font-weight: 600;
}

.PostDetail_title {
  margin: 4px 0 8px;
  font-size: 1.75rem;
}

.PostDetail_summary {
  margin: 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

/* 主ボタン（黄地に黒字）。1 ページに 1 つだけ */
.PostDetail_primaryButton {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--yellow);
  color: #111;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.PostDetail_primaryButton:hover {
  background: #fff04d;
}

.PostDetail_footer {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.PostDetail_back {
  color: var(--muted);
  text-decoration: none;
}

.PostDetail_back:hover {
  color: var(--foreground);
  text-decoration: underline;
}

/* 記事本文（Markdown から変換した HTML） */
.PostDetail_body {
  margin-bottom: 40px;
  /* 長い URL などでスマホ幅から横にはみ出さないようにする */
  overflow-wrap: anywhere;
}

.PostDetail_body > :first-child {
  margin-top: 0;
}

/* 本文の見出しは h2 から始まる（lib/markdown.ts で1段下げている） */
.PostDetail_body h2,
.PostDetail_body h3,
.PostDetail_body h4,
.PostDetail_body h5,
.PostDetail_body h6 {
  margin: 2em 0 0.75em;
}

.PostDetail_body h2 {
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
  font-size: 1.375rem;
  /* 目次から飛んだときに、見出しが画面の端に貼り付かないようにする */
  scroll-margin-top: 24px;
}

.PostDetail_body h3 {
  font-size: 1.25rem;
}

.PostDetail_body h4 {
  font-size: 1.125rem;
}

.PostDetail_body h5,
.PostDetail_body h6 {
  font-size: 1rem;
}

.PostDetail_body p,
.PostDetail_body ul,
.PostDetail_body ol,
.PostDetail_body blockquote,
.PostDetail_body pre,
.PostDetail_body table {
  margin: 0 0 1.25em;
}

.PostDetail_body ul,
.PostDetail_body ol {
  padding-left: 1.5em;
}

.PostDetail_body li + li {
  margin-top: 0.25em;
}

.PostDetail_body li > ul,
.PostDetail_body li > ol {
  margin: 0.25em 0 0;
}

.PostDetail_body blockquote {
  padding: 0 1em;
  border-left: 4px solid var(--border);
  color: var(--muted);
}

.PostDetail_body blockquote > :last-child {
  margin-bottom: 0;
}

.PostDetail_body a {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.PostDetail_body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.PostDetail_body hr {
  margin: 2em 0;
  border: none;
  border-top: 1px solid var(--border);
}

.PostDetail_body code {
  padding: 0.15em 0.35em;
  border-radius: 4px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.PostDetail_body pre {
  padding: 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  line-height: 1.5;
}

/* コードブロックは折り返さず、横スクロールで読む */
.PostDetail_body pre code {
  padding: 0;
  background: none;
  font-size: 0.875rem;
  overflow-wrap: normal;
}

/* 列の多い表は、表だけを横スクロールさせてページ全体をはみ出させない */
.PostDetail_body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  /* 本文の overflow-wrap: anywhere を表には効かせない（列幅が縮んで単語の途中で折れるため） */
  overflow-wrap: normal;
}

.PostDetail_body th,
.PostDetail_body td {
  padding: 6px 12px;
  border: 1px solid var(--border);
}

.PostDetail_body th {
  background: var(--surface);
  font-weight: 600;
}

.PostDetail_body th[align="center"],
.PostDetail_body td[align="center"] {
  text-align: center;
}

.PostDetail_body th[align="right"],
.PostDetail_body td[align="right"] {
  text-align: right;
}

/* shared/components/TableOfContents.module.css */
/* PC: 本文の右に縦に並べ、スクロールしても残す（sticky は PostDetail.module.css の .aside 側） */
.TableOfContents_toc {
  padding-left: 16px;
  border-left: 1px solid var(--border);
  font-size: 0.8125rem;
}

.TableOfContents_heading {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.6875rem;
}

.TableOfContents_list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.TableOfContents_list a {
  display: block;
  padding: 2px 0;
  color: var(--muted);
  line-height: 1.5;
  text-decoration: none;
}

.TableOfContents_list a:hover {
  color: var(--foreground);
}

/* 現在地は黄 */
.TableOfContents_list a[aria-current] {
  color: var(--yellow);
}

/* 900px 以下: 本文の上に、横に並んだチップとして畳む */
@media (max-width: 900px) {
  .TableOfContents_toc {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
  }

  .TableOfContents_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .TableOfContents_list a {
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background-2);
  }

  .TableOfContents_list a[aria-current] {
    border-color: var(--yellow);
  }
}

/* shared/components/MarpDeck.module.css */
.MarpDeck_deck {
  margin-bottom: 48px;
}

/* スライドは 16:9 の SVG。横幅いっぱいに縮めて、縦に並べる */
.MarpDeck_deck div.marpit > svg {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
}