/*! nanona-ui v1.0.0 | https://ui.nanona.me/ */
/*
 * nanona-ui tokens
 * 値は Wikimedia Codex のデザイントークンに揃えている（括弧内は対応する Codex トークン）。
 * サイト側では色を直書きせず、必ずこの変数を使う。
 */

:root {
  color-scheme: light;

  /* 面 */
  --nn-bg: #ffffff;               /* background-color-base */
  --nn-bg-subtle: #f8f9fa;        /* background-color-interactive-subtle */
  --nn-bg-muted: #eaecf0;         /* background-color-interactive */

  /* 文字 */
  --nn-text: #202122;             /* color-base */
  --nn-text-subtle: #54595d;      /* color-subtle */
  --nn-text-placeholder: #72777d; /* color-placeholder */
  --nn-text-inverted: #ffffff;    /* color-inverted */

  /* 罫線 */
  --nn-border: #a2a9b1;           /* border-color-base */
  --nn-border-subtle: #c8ccd1;    /* border-color-subtle */
  --nn-border-muted: #dadde3;     /* border-color-muted */

  /* リンク・操作 */
  --nn-link: #3366cc;             /* color-progressive */
  --nn-link-hover: #3056a9;       /* color-progressive--hover */
  --nn-link-active: #233566;      /* color-progressive--active */
  --nn-link-visited: #6a60b0;     /* color-visited */
  --nn-focus: #3366cc;            /* border-color-progressive--focus */

  /* アクセント：水色（線・帯・面のみ。文字色には使わない） */
  --nn-sky: #a7d7f9;
  --nn-sky-subtle: #eaf3ff;       /* background-color-progressive-subtle */

  /* アクセント：黄色（「現在地」「強調」「新着」のみ。1画面に1〜2か所） */
  --nn-yellow: #f5c400;
  --nn-yellow-subtle: #fef6e7;
  --nn-on-yellow: #202122;

  /* 状態 */
  --nn-success: #177860;          /* color-success */
  --nn-success-subtle: #dff2eb;   /* background-color-success-subtle */
  --nn-error: #bf3c2c;            /* color-error */
  --nn-error-subtle: #ffe9e5;     /* background-color-error-subtle */
  --nn-warning: #886425;          /* color-warning */
  --nn-warning-subtle: #fdf2d5;   /* background-color-warning-subtle */
  --nn-notice: #54595d;
  --nn-notice-subtle: #f8f9fa;    /* background-color-notice-subtle */

  /* 文字 */
  --nn-font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif;
  --nn-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "BIZ UDGothic", monospace;
  --nn-font-size-xs: 0.75rem;   /* 12px */
  --nn-font-size-s: 0.875rem;   /* 14px：UI・補足 */
  --nn-font-size-m: 1rem;       /* 16px：本文 */
  --nn-font-size-l: 1.125rem;   /* 18px：h3 */
  --nn-font-size-xl: 1.375rem;  /* 22px：h2 */
  --nn-font-size-xxl: 1.75rem;  /* 28px：h1 */
  --nn-line-height: 1.75;
  --nn-line-height-tight: 1.4;

  /* 余白（4px 単位） */
  --nn-space-1: 0.25rem;
  --nn-space-2: 0.5rem;
  --nn-space-3: 0.75rem;
  --nn-space-4: 1rem;
  --nn-space-6: 1.5rem;
  --nn-space-8: 2rem;
  --nn-space-12: 3rem;

  /* 形 */
  --nn-radius: 2px;               /* border-radius-base */
  --nn-radius-card: 4px;
  --nn-border-width: 1px;
  --nn-content-width: 42rem;
  --nn-wide-width: 72rem;
  --nn-header-height: 3.25rem;
  --nn-shadow-popup: 0 2px 6px rgb(0 0 0 / 0.2); /* ドロップダウン等の重なりにだけ使う */

  /* 動き：基本は色の変化だけ。メニュー開閉とテーマ切替だけ少し長い */
  --nn-transition: 100ms ease;    /* transition-duration-base */
  --nn-duration-menu: 200ms;
  --nn-transition-menu: var(--nn-duration-menu) cubic-bezier(0.2, 0, 0, 1);
  --nn-duration-theme: 300ms;
  --nn-duration-page-out: 120ms;  /* ページ遷移：前のページが消える */
  --nn-duration-page-in: 260ms;   /* ページ遷移：次のページが現れる */
  --nn-duration-shared: 420ms;    /* ページ遷移：共有要素の変形 */
}

/* ダーク：OS 設定に従う（明示的にライトを選んだ場合を除く） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --nn-bg: #101418;
    --nn-bg-subtle: #1b1e22;
    --nn-bg-muted: #27292d;
    --nn-text: #eaecf0;
    --nn-text-subtle: #a2a9b1;
    --nn-text-placeholder: #898f97;
    --nn-text-inverted: #101418;
    --nn-border: #72777d;
    --nn-border-subtle: #54595d;
    --nn-border-muted: #2e3136;
    --nn-link: #88a3e8;
    --nn-link-hover: #b0c1f0;
    --nn-link-active: #d9e2f9;
    --nn-link-visited: #a799cd;
    --nn-focus: #88a3e8;
    --nn-sky: #3e7cad;
    --nn-sky-subtle: #172536;
    --nn-yellow: #e0b400;
    --nn-yellow-subtle: #2f2715;
    --nn-on-yellow: #101418;
    --nn-success: #3cb38c;
    --nn-success-subtle: #12302a;
    --nn-error: #fd7865;
    --nn-error-subtle: #3c1a17;
    --nn-warning: #e0b44d;
    --nn-warning-subtle: #33280f;
    --nn-notice: #a2a9b1;
    --nn-notice-subtle: #1b1e22;
    --nn-shadow-popup: 0 2px 6px rgb(0 0 0 / 0.6);
  }
}

/* ダーク：明示的に選んだ場合（上と同じ値） */
:root[data-theme="dark"] {
  color-scheme: dark;
  --nn-bg: #101418;
  --nn-bg-subtle: #1b1e22;
  --nn-bg-muted: #27292d;
  --nn-text: #eaecf0;
  --nn-text-subtle: #a2a9b1;
  --nn-text-placeholder: #898f97;
  --nn-text-inverted: #101418;
  --nn-border: #72777d;
  --nn-border-subtle: #54595d;
  --nn-border-muted: #2e3136;
  --nn-link: #88a3e8;
  --nn-link-hover: #b0c1f0;
  --nn-link-active: #d9e2f9;
  --nn-link-visited: #a799cd;
  --nn-focus: #88a3e8;
  --nn-sky: #3e7cad;
  --nn-sky-subtle: #172536;
  --nn-yellow: #e0b400;
  --nn-yellow-subtle: #2f2715;
  --nn-on-yellow: #101418;
  --nn-success: #3cb38c;
  --nn-success-subtle: #12302a;
  --nn-error: #fd7865;
  --nn-error-subtle: #3c1a17;
  --nn-warning: #e0b44d;
  --nn-warning-subtle: #33280f;
  --nn-notice: #a2a9b1;
  --nn-notice-subtle: #1b1e22;
  --nn-shadow-popup: 0 2px 6px rgb(0 0 0 / 0.6);
}

:root[data-theme="light"] {
  color-scheme: light;
}

/*
 * nanona-ui base
 * 要素セレクタはすべて :where() で詳細度 0 にしてあるので、各サイトの CSS で簡単に上書きできる。
 */

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

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(body) {
  margin: 0;
  background: var(--nn-bg);
  color: var(--nn-text);
  font-family: var(--nn-font-sans);
  font-size: var(--nn-font-size-m);
  line-height: var(--nn-line-height);
  overflow-wrap: anywhere;
  line-break: strict;
}

/* 見出し：大きさの差は控えめに。h1/h2 は Wikipedia と同じく下線で区切る */
:where(h1, h2, h3, h4, h5, h6) {
  margin: var(--nn-space-8) 0 var(--nn-space-3);
  font-weight: 700;
  line-height: var(--nn-line-height-tight);
}
:where(h1) { font-size: var(--nn-font-size-xxl); }
:where(h2) { font-size: var(--nn-font-size-xl); }
:where(h3) { font-size: var(--nn-font-size-l); }
:where(h4, h5, h6) { font-size: var(--nn-font-size-m); }
:where(h1, h2) {
  padding-bottom: var(--nn-space-1);
  border-bottom: var(--nn-border-width) solid var(--nn-border-subtle);
}
:where(h1:first-child, h2:first-child, h3:first-child) {
  margin-top: 0;
}

:where(p, ul, ol, dl, table, pre, blockquote, figure) {
  margin: 0 0 var(--nn-space-4);
}
:where(ul, ol) {
  padding-left: 1.5em;
}
:where(li + li) {
  margin-top: var(--nn-space-1);
}

/* リンク */
:where(a) {
  color: var(--nn-link);
  text-decoration: none;
  transition: color var(--nn-transition);
}
:where(a:visited) { color: var(--nn-link-visited); }
:where(a:hover) { color: var(--nn-link-hover); text-decoration: underline; }
:where(a:active) { color: var(--nn-link-active); }

/* フォーカス */
:where(:focus-visible) {
  outline: 2px solid var(--nn-focus);
  outline-offset: 2px;
}

:where(hr) {
  height: 0;
  margin: var(--nn-space-8) 0;
  border: 0;
  border-top: var(--nn-border-width) solid var(--nn-border-subtle);
}

:where(strong, b) { font-weight: 700; }
:where(small) { font-size: var(--nn-font-size-s); }

:where(mark) {
  padding: 0 0.1em;
  background: var(--nn-yellow-subtle);
  color: inherit;
  box-shadow: inset 0 -0.25em 0 var(--nn-yellow);
}

:where(code, kbd, samp, pre) {
  font-family: var(--nn-font-mono);
  font-size: 0.9em;
}
:where(:not(pre) > code, kbd) {
  padding: 0.1em 0.3em;
  border: var(--nn-border-width) solid var(--nn-border-muted);
  border-radius: var(--nn-radius);
  background: var(--nn-bg-subtle);
}
:where(pre) {
  overflow-x: auto;
  padding: var(--nn-space-3) var(--nn-space-4);
  border: var(--nn-border-width) solid var(--nn-border-muted);
  border-radius: var(--nn-radius);
  background: var(--nn-bg-subtle);
  line-height: 1.6;
}

:where(blockquote) {
  padding: var(--nn-space-1) var(--nn-space-4);
  border-left: 4px solid var(--nn-sky);
  color: var(--nn-text-subtle);
}
:where(blockquote > :last-child) {
  margin-bottom: 0;
}

/* 表：Wikipedia の wikitable に近い形 */
:where(table) {
  border-collapse: collapse;
}
:where(th, td) {
  padding: var(--nn-space-1) var(--nn-space-2);
  border: var(--nn-border-width) solid var(--nn-border);
  vertical-align: top;
  text-align: left;
}
:where(th) {
  background: var(--nn-bg-muted);
  font-weight: 700;
}
:where(caption) {
  padding: var(--nn-space-1) 0;
  font-weight: 700;
}

:where(img, svg, video) {
  max-width: 100%;
  height: auto;
}

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(::selection) {
  background: var(--nn-sky);
  color: var(--nn-text);
}

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/*
 * nanona-ui components
 * クラス名は nn- で始める。見た目は Codex の CSS-only コンポーネントに合わせている。
 */

/* ---------- ユーティリティ ---------- */

.nn-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nn-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: var(--nn-space-2) var(--nn-space-4);
  background: var(--nn-bg);
  transform: translateY(-100%);
}
.nn-skip-link:focus {
  transform: none;
}

.nn-muted { color: var(--nn-text-subtle); }
.nn-small { font-size: var(--nn-font-size-s); }
.nn-mono { font-family: var(--nn-font-mono); }

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

.nn-page {
  width: 100%;
  max-width: calc(var(--nn-content-width) + 2 * var(--nn-space-4));
  margin: 0 auto;
  padding: var(--nn-space-8) var(--nn-space-4) var(--nn-space-12);
}
.nn-page--wide {
  max-width: calc(var(--nn-wide-width) + 2 * var(--nn-space-4));
}

.nn-stack > * + * {
  margin-top: var(--nn-space-4);
}

.nn-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nn-space-2);
}

/* ---------- ヘッダー（骨組みは共通、タイトル・メニュー・道具は各サイト） ---------- */

.nn-header {
  position: relative;
  z-index: 10;
  border-bottom: var(--nn-border-width) solid var(--nn-border-subtle);
  background: var(--nn-bg);
}
.nn-header__inner {
  display: flex;
  align-items: center;
  gap: var(--nn-space-2) var(--nn-space-6);
  max-width: calc(var(--nn-wide-width) + 2 * var(--nn-space-4));
  min-height: var(--nn-header-height);
  margin: 0 auto;
  padding: 0 var(--nn-space-4);
}

/* メインホームページへのリンク ／ サイト名 */
.nn-header__brand {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: var(--nn-space-2);
  min-width: 0;
}
.nn-header__home,
.nn-header__home:visited {
  color: var(--nn-text-subtle);
  font-size: var(--nn-font-size-s);
}
.nn-header__home:hover { color: var(--nn-text); }
/* 「nanona15dobato / サイト名」の区切り（文字ではなく CSS で描くので読み上げられない） */
.nn-header__home::after {
  content: "/";
  display: inline-block;
  margin-left: var(--nn-space-2);
  color: var(--nn-border);
  text-decoration: none;
}
.nn-header__title,
.nn-header__title:visited {
  color: var(--nn-text);
  font-size: var(--nn-font-size-l);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.nn-header__title:hover {
  color: var(--nn-text);
  text-decoration: none;
}

/* サイト内メニュー。現在地は黄色の下線 */
.nn-header__nav {
  display: flex;
  align-self: stretch;
  min-width: 0;
}
.nn-header__nav ul {
  display: flex;
  gap: var(--nn-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nn-header__nav li {
  display: flex;
  margin: 0;
}
.nn-header__nav a {
  display: flex;
  align-items: center;
  padding: 0 var(--nn-space-2);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  color: var(--nn-text-subtle);
  font-size: var(--nn-font-size-s);
  white-space: nowrap;
}
.nn-header__nav a:visited { color: var(--nn-text-subtle); }
.nn-header__nav a:hover {
  color: var(--nn-text);
  text-decoration: none;
  border-bottom-color: var(--nn-border-subtle);
}
/* 太字にすると幅が変わってページ遷移でずれるので、色と下線だけで示す */
.nn-header__nav a[aria-current] {
  color: var(--nn-text);
  border-bottom-color: var(--nn-yellow);
}

/* 道具欄：各サイトのボタン（検索など）＋テーマ切替＋ハンバーガー */
.nn-header__tools {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--nn-space-1);
  margin-left: auto;
}

/* ハンバーガーボタン（スマホ幅でメニューがあるときだけ表示）。開くと 3 本線が × に変わる */
.nn-header__menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: calc(-1 * var(--nn-space-2));
  padding: 0;
  border: 0;
  border-radius: var(--nn-radius);
  background: transparent;
  color: var(--nn-text);
  cursor: pointer;
  transition: background-color var(--nn-transition);
}
.nn-header__menu-button:hover { background: var(--nn-bg-subtle); }
.nn-burger {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 0.875rem;
}
.nn-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--nn-transition-menu), opacity var(--nn-transition-menu), top var(--nn-transition-menu);
}
.nn-burger span:nth-child(1) { top: 0; }
.nn-burger span:nth-child(2) { top: calc(50% - 1px); }
.nn-burger span:nth-child(3) { top: calc(100% - 2px); }
[aria-expanded="true"] > .nn-burger span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
[aria-expanded="true"] > .nn-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
[aria-expanded="true"] > .nn-burger span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

@media (max-width: 40rem) {
  .nn-header__inner {
    flex-wrap: wrap;
    padding-top: var(--nn-space-2);
    padding-bottom: var(--nn-space-2);
  }
  /* スマホではホームへのリンクを小さく上に、サイト名を下に */
  .nn-header__brand {
    flex-direction: column;
    flex-shrink: 1;
    gap: 0;
  }
  .nn-header__home::after { display: none; }
  .nn-header__home,
  .nn-header__home:visited {
    font-size: var(--nn-font-size-xs);
    line-height: 1.4;
  }
  .nn-header__title,
  .nn-header__title:visited {
    font-size: var(--nn-font-size-m);
  }

  /* JS が無いとき：メニューは 2 行目に横スクロールで出す */
  :root:not(.nn-js) .nn-header__menu-button { display: none !important; }
  :root:not(.nn-js) .nn-header__nav,
  .nn-header:not(.nn-header--has-nav) .nn-header__nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
  :root:not(.nn-js) .nn-header__nav a,
  .nn-header:not(.nn-header--has-nav) .nn-header__nav a {
    padding-top: var(--nn-space-2);
    padding-bottom: var(--nn-space-2);
  }

  .nn-js .nn-header--has-nav .nn-header__menu-button { display: inline-flex; }

  /* メニュー本体：ヘッダーの下に重なって開く。高さは grid-template-rows 0fr → 1fr で動かす */
  .nn-js .nn-header--has-nav .nn-header__nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    border-bottom: var(--nn-border-width) solid transparent;
    background: var(--nn-bg);
    opacity: 0;
    visibility: hidden;
    transition:
      grid-template-rows var(--nn-transition-menu),
      opacity var(--nn-transition-menu),
      border-color var(--nn-transition-menu),
      visibility 0s linear var(--nn-duration-menu);
  }
  .nn-js .nn-header--has-nav.is-open .nn-header__nav {
    grid-template-rows: 1fr;
    border-bottom-color: var(--nn-border-subtle);
    box-shadow: var(--nn-shadow-popup);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nn-js .nn-header--has-nav .nn-header__nav ul {
    display: block;
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--nn-space-4);
  }
  .nn-js .nn-header--has-nav .nn-header__nav li + li {
    border-top: var(--nn-border-width) solid var(--nn-border-muted);
  }
  .nn-js .nn-header--has-nav .nn-header__nav a {
    flex: 1;
    min-height: 3rem;
    padding: 0 var(--nn-space-3);
    border: 0;
    border-left: 3px solid transparent;
    font-size: var(--nn-font-size-m);
    transform: translateY(-0.25rem);
    transition: color var(--nn-transition), transform var(--nn-transition-menu);
  }
  .nn-js .nn-header--has-nav.is-open .nn-header__nav a { transform: none; }
  .nn-js .nn-header--has-nav .nn-header__nav a:hover { border-left-color: var(--nn-border-subtle); }
  .nn-js .nn-header--has-nav .nn-header__nav a[aria-current] { border-left-color: var(--nn-yellow); }
}

/* ---------- テーマ切替 ---------- */

.nn-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--nn-space-1);
  min-height: 2rem;
  padding: 0 var(--nn-space-2);
  border: var(--nn-border-width) solid transparent;
  border-radius: var(--nn-radius);
  background: transparent;
  color: var(--nn-text-subtle);
  font-size: var(--nn-font-size-s);
  cursor: pointer;
  transition: background-color var(--nn-transition), color var(--nn-transition);
}
.nn-theme-toggle:hover {
  background: var(--nn-bg-subtle);
  color: var(--nn-text);
}
.nn-theme-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
/* 3 つのアイコン・ラベルのうち、今のモード（<html data-nn-mode>）の分だけ見せる */
.nn-theme-icon,
.nn-theme-label {
  display: none;
}
:root:not([data-nn-mode]) .nn-theme-icon--auto,
[data-nn-mode="auto"] .nn-theme-icon--auto,
[data-nn-mode="light"] .nn-theme-icon--light,
[data-nn-mode="dark"] .nn-theme-icon--dark {
  display: block;
}
:root:not([data-nn-mode]) .nn-theme-label--auto,
[data-nn-mode="auto"] .nn-theme-label--auto,
[data-nn-mode="light"] .nn-theme-label--light,
[data-nn-mode="dark"] .nn-theme-label--dark {
  display: inline;
}
/* JS が無いと切り替えられないので出さない */
:root:not(.nn-js) .nn-theme-toggle {
  display: none;
}

/* 切り替えた直後だけアイコンを回転させながら差し替える */
.nn-theme-toggle.is-switching .nn-theme-icon {
  animation: nn-icon-in var(--nn-duration-theme) cubic-bezier(0.2, 0, 0, 1);
}
@keyframes nn-icon-in {
  from { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  to { opacity: 1; transform: none; }
}

/* テーマ切替：対応ブラウザでは画面全体をクロスフェード（nanona.js が View Transitions を使う） */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--nn-duration-theme);
  animation-timing-function: ease;
}
/* View Transitions 非対応ブラウザ向け：切替中だけ色を補間する */
.nn-theme-fading,
.nn-theme-fading *,
.nn-theme-fading *::before,
.nn-theme-fading *::after {
  transition:
    background-color var(--nn-duration-theme) ease,
    border-color var(--nn-duration-theme) ease,
    color var(--nn-duration-theme) ease,
    fill var(--nn-duration-theme) ease,
    stroke var(--nn-duration-theme) ease !important;
}

@media (max-width: 30rem) {
  .nn-theme-toggle__label { display: none; }
}

/* ---------- ページ遷移（View Transitions、同じオリジン内のみ） ---------- */

/* 同じサイト内のページ移動で、本文だけを入れ替える。ヘッダー・フッターは固定 */
@view-transition {
  navigation: auto;
}
.nn-header { view-transition-name: nn-header; }
.nn-footer { view-transition-name: nn-footer; }

/* 本文：前のページは少し上へ消え、次のページは少し下から現れる（テーマ切替のときは除く） */
:root:not(.nn-theme-switching)::view-transition-old(root) {
  animation: nn-page-out var(--nn-duration-page-out) ease both;
}
:root:not(.nn-theme-switching)::view-transition-new(root) {
  animation: nn-page-in var(--nn-duration-page-in) cubic-bezier(0.2, 0, 0, 1) var(--nn-duration-page-out) both;
}
@keyframes nn-page-out {
  to { opacity: 0; transform: translateY(-0.375rem); }
}
@keyframes nn-page-in {
  from { opacity: 0; transform: translateY(0.5rem); }
}

/* ヘッダー・フッター：重ねてフェードすると二重に見えるので、動かさずにその場で新しい方へ切り替える */
:root:not(.nn-theme-switching)::view-transition-group(nn-header),
:root:not(.nn-theme-switching)::view-transition-group(nn-footer),
:root:not(.nn-theme-switching)::view-transition-new(nn-header),
:root:not(.nn-theme-switching)::view-transition-new(nn-footer) {
  animation: none;
}
:root:not(.nn-theme-switching)::view-transition-old(nn-header),
:root:not(.nn-theme-switching)::view-transition-old(nn-footer) {
  display: none;
}

/* ページ間で共有する要素（例：一覧の記事タイトル → 記事ページの見出し）。
   各サイトで view-transition-name と view-transition-class: nn-shared を付ける */
:root:not(.nn-theme-switching)::view-transition-group(*.nn-shared) {
  animation-duration: var(--nn-duration-shared);
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
:root:not(.nn-theme-switching)::view-transition-old(*.nn-shared),
:root:not(.nn-theme-switching)::view-transition-new(*.nn-shared) {
  height: 100%;
  animation-duration: var(--nn-duration-shared);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ---------- フッター（骨組みは共通、中身は各サイト） ---------- */

.nn-footer {
  margin-top: var(--nn-space-12);
  border-top: var(--nn-border-width) solid var(--nn-border-subtle);
  background: var(--nn-bg-subtle);
  color: var(--nn-text-subtle);
  font-size: var(--nn-font-size-s);
  line-height: 1.6;
}
.nn-footer__inner {
  max-width: calc(var(--nn-wide-width) + 2 * var(--nn-space-4));
  margin: 0 auto;
  padding: var(--nn-space-6) var(--nn-space-4) var(--nn-space-8);
}
.nn-footer__inner > :first-child { margin-top: 0; }
.nn-footer__inner > :last-child { margin-bottom: 0; }

/* 各サイトが中身に使える部品 */
.nn-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--nn-space-6);
}
.nn-footer__heading {
  margin: 0 0 var(--nn-space-2);
  padding: 0;
  border: 0;
  color: var(--nn-text);
  font-size: var(--nn-font-size-s);
}
.nn-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nn-footer li + li { margin-top: var(--nn-space-1); }
/* 横並びのリンク（「RSS ・ このブログについて」など） */
.nn-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nn-space-1) var(--nn-space-4);
}
.nn-footer .nn-footer__links li + li { margin-top: 0; }
.nn-footer p { margin: 0 0 var(--nn-space-2); }

/* 共通部分：メインホームページへのリンク（nanona.js が足す） */
.nn-footer__base {
  margin-top: var(--nn-space-6);
  padding-top: var(--nn-space-4);
  border-top: var(--nn-border-width) solid var(--nn-border-muted);
}
.nn-footer__base:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- ボタン（Codex の cdx-button と同じ構成） ---------- */

.nn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nn-space-1);
  min-height: 2rem;
  padding: 0 var(--nn-space-3);
  border: var(--nn-border-width) solid var(--nn-border);
  border-radius: var(--nn-radius);
  background: var(--nn-bg-subtle);
  color: var(--nn-text);
  font-size: var(--nn-font-size-s);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--nn-transition), border-color var(--nn-transition), color var(--nn-transition);
}
.nn-button:visited { color: var(--nn-text); }
.nn-button:hover {
  background: var(--nn-bg);
  color: var(--nn-text);
  text-decoration: none;
}
.nn-button:active { background: var(--nn-bg-muted); }
.nn-button:disabled,
.nn-button[aria-disabled="true"] {
  border-color: var(--nn-border-muted);
  background: var(--nn-bg-muted);
  color: var(--nn-text-placeholder);
  cursor: default;
}

.nn-button--primary {
  border-color: var(--nn-link);
  background: var(--nn-link);
  color: var(--nn-text-inverted);
}
.nn-button--primary:visited { color: var(--nn-text-inverted); }
.nn-button--primary:hover {
  border-color: var(--nn-link-hover);
  background: var(--nn-link-hover);
  color: var(--nn-text-inverted);
}
.nn-button--primary:active {
  border-color: var(--nn-link-active);
  background: var(--nn-link-active);
}

.nn-button--quiet {
  border-color: transparent;
  background: transparent;
}
.nn-button--quiet:hover { background: var(--nn-bg-subtle); }

/* ---------- フォーム ---------- */

.nn-field {
  display: flex;
  flex-direction: column;
  gap: var(--nn-space-1);
}
.nn-field__label {
  font-size: var(--nn-font-size-s);
  font-weight: 700;
}

.nn-input,
.nn-select,
.nn-textarea {
  min-height: 2rem;
  padding: var(--nn-space-1) var(--nn-space-2);
  border: var(--nn-border-width) solid var(--nn-border);
  border-radius: var(--nn-radius);
  background: var(--nn-bg);
  color: var(--nn-text);
  font-size: var(--nn-font-size-s);
  line-height: 1.4;
  transition: border-color var(--nn-transition);
}
.nn-input::placeholder,
.nn-textarea::placeholder { color: var(--nn-text-placeholder); }
.nn-input:focus,
.nn-select:focus,
.nn-textarea:focus {
  border-color: var(--nn-focus);
  outline: 1px solid var(--nn-focus);
  outline-offset: 0;
}

.nn-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--nn-space-2);
  font-size: var(--nn-font-size-s);
  cursor: pointer;
}
.nn-checkbox input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--nn-link);
}

/* ---------- タブ（選択中は青。黄色は使わない） ---------- */

.nn-tabs {
  display: flex;
  gap: var(--nn-space-1);
  overflow-x: auto;
  border-bottom: var(--nn-border-width) solid var(--nn-border-subtle);
}
.nn-tab {
  padding: var(--nn-space-2) var(--nn-space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--nn-text-subtle);
  font-size: var(--nn-font-size-s);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--nn-transition), border-color var(--nn-transition);
}
.nn-tab:hover { color: var(--nn-text); }
.nn-tab[aria-selected="true"] {
  border-bottom-color: var(--nn-link);
  color: var(--nn-link);
}

/* ---------- カード・リスト ---------- */

.nn-card {
  display: block;
  padding: var(--nn-space-4);
  border: var(--nn-border-width) solid var(--nn-border-subtle);
  border-radius: var(--nn-radius-card);
  background: var(--nn-bg);
  color: var(--nn-text);
}
a.nn-card { transition: border-color var(--nn-transition); }
a.nn-card:visited { color: var(--nn-text); }
a.nn-card:hover {
  border-color: var(--nn-link);
  color: var(--nn-text);
  text-decoration: none;
}
.nn-card__title {
  margin: 0 0 var(--nn-space-1);
  padding: 0;
  border: 0;
  font-size: var(--nn-font-size-m);
}
a.nn-card .nn-card__title { color: var(--nn-link); }
.nn-card__text {
  margin: 0;
  color: var(--nn-text-subtle);
  font-size: var(--nn-font-size-s);
}

.nn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--nn-space-3);
}

/* 区切り線つきの一覧（記事一覧・リンク集など） */
.nn-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--nn-border-width) solid var(--nn-border-muted);
}
.nn-list > li {
  margin: 0;
  padding: var(--nn-space-3) 0;
  border-bottom: var(--nn-border-width) solid var(--nn-border-muted);
}

/* ---------- メッセージ（Codex の cdx-message） ---------- */

.nn-message {
  padding: var(--nn-space-3) var(--nn-space-4);
  border: var(--nn-border-width) solid var(--nn-border);
  border-left-width: 4px;
  border-radius: var(--nn-radius);
  background: var(--nn-notice-subtle);
  font-size: var(--nn-font-size-s);
}
.nn-message > :last-child { margin-bottom: 0; }
.nn-message--success { border-color: var(--nn-success); background: var(--nn-success-subtle); }
.nn-message--warning { border-color: var(--nn-warning); background: var(--nn-warning-subtle); }
.nn-message--error { border-color: var(--nn-error); background: var(--nn-error-subtle); }

/* ---------- ラベル類 ---------- */

.nn-tag {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: var(--nn-border-width) solid var(--nn-sky);
  border-radius: var(--nn-radius);
  background: var(--nn-sky-subtle);
  color: var(--nn-text);
  font-size: var(--nn-font-size-xs);
  line-height: 1.6;
  white-space: nowrap;
}
a.nn-tag:visited { color: var(--nn-text); }
a.nn-tag:hover { border-color: var(--nn-link); text-decoration: none; }

.nn-badge-new {
  display: inline-block;
  padding: 0 0.4em;
  border-radius: var(--nn-radius);
  background: var(--nn-yellow);
  color: var(--nn-on-yellow);
  font-size: var(--nn-font-size-xs);
  font-weight: 700;
  line-height: 1.6;
}

/* 状態ラベル（ログ・クイズ結果など）。色だけに頼らず必ず文字も入れる */
.nn-status {
  display: inline-block;
  min-width: 3.5em;
  padding: 0 0.4em;
  border: var(--nn-border-width) solid currentColor;
  border-radius: var(--nn-radius);
  font-size: var(--nn-font-size-xs);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}
.nn-status--success { color: var(--nn-success); background: var(--nn-success-subtle); }
.nn-status--error { color: var(--nn-error); background: var(--nn-error-subtle); }
.nn-status--warning { color: var(--nn-warning); background: var(--nn-warning-subtle); }
.nn-status--info { color: var(--nn-notice); background: var(--nn-notice-subtle); }

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

.nn-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--nn-space-4);
}
.nn-table {
  width: 100%;
  margin: 0;
  font-size: var(--nn-font-size-s);
  line-height: 1.5;
}
.nn-table th,
.nn-table td {
  border-width: 0 0 var(--nn-border-width);
  border-color: var(--nn-border-muted);
  padding: var(--nn-space-2) var(--nn-space-3);
}
.nn-table thead th {
  position: sticky;
  top: 0;
  border-bottom-color: var(--nn-border);
  background: var(--nn-bg-subtle);
  white-space: nowrap;
}
.nn-table tbody tr:hover { background: var(--nn-bg-subtle); }

/* ---------- ページ見出し ---------- */

.nn-page-header {
  margin-bottom: var(--nn-space-6);
}
.nn-page-header h1 { margin-bottom: var(--nn-space-2); }
.nn-page-header p {
  margin: 0;
  color: var(--nn-text-subtle);
}