/* ===========================================================================
 * フォント読み込み
 * =========================================================================== */

/* Rouault Sans
 * - Noto Sans JP Variable をベースにしたプロジェクト用エイリアス
 * - 和文とアイコンの視覚中心差を吸収するため、font metrics を調整 */
@import './fonts/rouault-sans.css';

/* Inter Variable Font（欧文用）
 * - 将来的な追加を見越してコメント残し
 * - 現在は Noto Sans JP のラテン文字グリフを使用 */

@import './tokens.css';

@import './code-surfaces.css';

/* ===========================================================================
 * View Transitions API サポート
 * =========================================================================== */

@supports (view-transition-name: root) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 0.2s;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    mix-blend-mode: var(--view-transition-fade);
  }
}

/* 非対応ブラウザではシンプルなフェード */
@supports not (view-transition-name: root) {
  .page-transition {
    animation: fade-in var(--duration-normal) var(--ease-out);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ===========================================================================
 * Box Sizing Reset
 * =========================================================================== */

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

/* ===========================================================================
 * Document & Body
 * =========================================================================== */

html {
  /* アンカー移動時にヘッダー分のスペースを確保 */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  /* スクロールを滑らかに */
  scroll-behavior: smooth;
}

/* reduced-motion時は即座に移動 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--line-height-normal);
  color: var(--fg-default);
  background: var(--bg-default);
  /* 和文フォントのデフォルトの字送りを維持 */
  letter-spacing: 0;
  /* テキスト選択時の背景色 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-ui-dialog-open] {
  overflow: hidden;
  scrollbar-gutter: stable;
}

body[data-ui-search-dialog-open] {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ===========================================================================
 * Typography - Headings
 * =========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  /* 見出しは文字を詰めて密度を高める */
  letter-spacing: var(--tracking-tight);
  /* 和文の文字詰めを有効化 */
  font-feature-settings: 'palt';
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-normal);
}

h5 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
}

h6 {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
}
/* ===========================================================================
 * Typography - Body Text
 * =========================================================================== */

p,
dl,
dd {
  margin: 0;
}

/* ===========================================================================
 * Inline Code
 * @see docs/design-system/components.md - インラインコード
 * =========================================================================== */

:not(pre) > code {
  font-family: var(--font-mono);
  /* 12px未満を防ぎつつ本文サイズに追従 */
  font-size: max(var(--text-xs), 0.875em);
  line-height: inherit;
  vertical-align: baseline;
  color: var(--fg-default);
  background: var(--bg-fill-muted);
  padding: 0.2em 0.4em;
  border: none;
  border-radius: var(--radius-sm);
  overflow-wrap: break-word;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* リンク文脈でもインラインコードの可読性を維持 */
a > code {
  color: var(--fg-default);
}

ui-article-header + .prose {
  margin-top: var(--space-6);
}

/* Reading surfaces（記事本文 / About本文） */
:is(.prose, .about-prose) {
  font-size: var(--reading-body-size);
  line-height: var(--reading-body-line-height);
  letter-spacing: 0;
}

.prose {
  max-width: var(--reading-measure);
  margin-inline: auto;
}

:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6) {
  margin: 0;
  line-height: var(--line-height-tight);
  font-feature-settings: 'palt';
  overflow-wrap: break-word;
}

:is(.prose, .about-prose) h2 {
  font-size: var(--reading-h2-size);
  font-weight: var(--reading-h2-weight);
  letter-spacing: var(--tracking-tight);
  color: var(--reading-h2-color);
}

:is(.prose, .about-prose) h3 {
  font-size: var(--reading-h3-size);
  font-weight: var(--reading-h3-weight);
  letter-spacing: var(--tracking-tight);
  color: var(--reading-h3-color);
}

:is(.prose, .about-prose) h4 {
  font-size: var(--reading-h4-size);
  font-weight: var(--reading-h4-weight);
  letter-spacing: var(--tracking-normal);
  color: var(--reading-h4-color);
}

:is(.prose, .about-prose) h5 {
  font-size: var(--reading-h5-size);
  font-weight: var(--reading-h5-weight);
  letter-spacing: var(--tracking-normal);
  color: var(--reading-h5-color);
}

:is(.prose, .about-prose) h6 {
  font-size: var(--reading-h6-size);
  font-weight: var(--reading-h6-weight);
  letter-spacing: var(--tracking-normal);
  color: var(--reading-h6-color);
}

:is(.prose, .about-prose) mark {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  box-shadow: inset 0 -0.5em 0 color-mix(in oklch, var(--bg-highlight-subtle) 88%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

:is(.prose, .about-prose) mark[data-current-match='true'] {
  box-shadow:
    inset 0 -0.68em 0
      color-mix(in oklch, var(--bg-highlight-current, var(--bg-highlight-subtle)) 72%, transparent),
    inset 0 -0.32em 0 color-mix(in oklch, var(--bg-highlight-subtle) 92%, transparent);
}

:is(.prose, .about-prose) hr,
hr[data-divider-variant='layout'] {
  border: 0;
  border-top: var(--border-style-subtle, 1px solid var(--border-default, oklch(20% 0 0 / 0.12)));
  margin: var(--space-12) 0;
  width: 100%;
}

@media (forced-colors: active) {
  :is(.prose, .about-prose) mark {
    background: transparent;
    color: inherit;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.08em;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  :is(.prose, .about-prose) hr,
  hr[data-divider-variant='layout'] {
    border-top-color: var(--border-ghost);
    forced-color-adjust: auto;
  }
}

@media print {
  :is(.prose, .about-prose) mark {
    background: transparent !important;
    color: currentColor;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.08em;
    box-shadow: none;
  }

  :is(.prose, .about-prose) hr,
  hr[data-divider-variant='layout'] {
    margin: var(--space-12) 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

:is(.prose, .about-prose)
  > *
  + :where(
    p,
    ul,
    ol,
    dl,
    pre,
    table,
    figure,
    blockquote,
    [data-callout],
    ui-card,
    ui-code-block,
    ui-code-group,
    pre[data-code-block],
    section[data-code-group],
    [data-code-block-root],
    ui-details,
    [data-info-box],
    [data-image],
    ui-video,
    ui-score,
    [data-table-root],
    ui-tabs,
    ui-translation,
    .translation-static
  ) {
  margin-block-start: var(--reading-flow-space);
}

:is(.prose, .about-prose) > * + h2 {
  margin-block-start: var(--reading-h2-space);
}

:is(.prose, .about-prose) > * + h3 {
  margin-block-start: var(--reading-h3-space);
}

:is(.prose, .about-prose) > * + h4 {
  margin-block-start: var(--reading-h4-space);
}

:is(.prose, .about-prose) > * + h5 {
  margin-block-start: var(--reading-h5-space);
}

:is(.prose, .about-prose) > * + h6 {
  margin-block-start: var(--reading-h6-space);
}

.prose > ui-translation,
.prose > .translation-static,
.about-prose > ui-translation {
  display: block;
}

.about-prose > .translation-static {
  display: block;
}

:is(.prose, .about-prose) > .translation-static {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-inline-start: var(--border-width-thick, 2px) solid var(--border-subtle);
  background: var(--bg-surface-1);
}

:is(.prose, .about-prose) > .translation-static > .translation-original,
:is(.prose, .about-prose) > .translation-static > .translation-translated {
  margin: 0;
}

:is(.prose, .about-prose) > .translation-static > .translation-original {
  color: var(--fg-default);
}

:is(.prose, .about-prose) > .translation-static > .translation-translated {
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

:is(.prose, .about-prose) > ui-tabs > [slot='panel'] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-inline: 0;
  text-align: start;
}

:is(.prose, .about-prose)
  > ui-tabs
  > [slot='panel']
  > :is(
    ui-code-block,
    ui-code-group,
    pre[data-code-block],
    section[data-code-group],
    [data-code-block-root]
  ) {
  width: 100%;
  margin-inline: 0;
}

:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > :is([data-table-root], ui-score, ui-math) {
  --ui-table-breakout-width: 100%;
  --ui-table-breakout-margin: 0;
}

:is(.prose, .about-prose)
  > ui-tabs
  > [slot='panel']
  > *
  + :where(
    p,
    ul,
    ol,
    dl,
    pre,
    table,
    figure,
    blockquote,
    [data-callout],
    ui-card,
    ui-code-block,
    ui-code-group,
    pre[data-code-block],
    section[data-code-group],
    [data-code-block-root],
    ui-details,
    [data-info-box],
    [data-image],
    ui-video,
    ui-score,
    [data-table-root],
    ui-tabs,
    ui-translation
  ) {
  margin-block-start: var(--reading-flow-space);
}

:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > * + h2 {
  margin-block-start: var(--reading-h2-space);
}

:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > * + h3 {
  margin-block-start: var(--reading-h3-space);
}

:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > * + h4 {
  margin-block-start: var(--reading-h4-space);
}

:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > * + h5 {
  margin-block-start: var(--reading-h5-space);
}

:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > * + h6 {
  margin-block-start: var(--reading-h6-space);
}

:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id] {
  display: block;
  max-inline-size: 100%;
  padding-inline: var(--space-1, 4px);
  margin-inline: calc(var(--space-1, 4px) * -1);
  position: relative;
  scroll-margin-top: calc(var(--header-height) + var(--space-8, 32px));
}

:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id] > .heading-text {
  text-decoration: none;
}

:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id] > .heading-text:hover,
:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id]:focus-within > .heading-text {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 0.15em;
  text-decoration-color: var(--border-strong, var(--fg-muted));
}

:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id] > .heading-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.25em;
  block-size: 1.25em;
  margin-inline-start: var(--space-2, 8px);
  line-height: 1;
  vertical-align: -0.1em;
  color: var(--fg-muted);
  text-decoration: none;
  opacity: 0;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id] > .heading-anchor > ui-icon {
  display: block;
  inline-size: 1em;
  block-size: 1em;
}

:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id] > .heading-text:hover + .heading-anchor,
:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id] > .heading-anchor:hover,
:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id]:focus-within > .heading-anchor {
  opacity: 1;
}

:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id] > .heading-anchor:hover,
:is(.prose, .about-prose) :is(h2, h3, h4, h5, h6)[id] > .heading-anchor:focus-visible {
  color: var(--primary);
}

@media print {
  .prose .heading-anchor,
  .about-prose .heading-anchor {
    display: none;
  }
}

@media (max-width: 767px) {
  .prose > ui-tabs,
  .about-prose > ui-tabs {
    --ui-tabs-inline-bleed: var(--space-1);
  }
}

/* Proseコンテナ内のメディア要素はテキスト幅を超えて拡張 */
.prose > img,
.prose > pre,
.prose > table,
.prose > [data-table-root],
.prose > video {
  max-width: none;
}

.prose
  > :is(
    ui-code-block,
    ui-code-group,
    pre[data-code-block],
    section[data-code-group],
    [data-code-block-root]
  ),
.about-prose
  > :is(
    ui-code-block,
    ui-code-group,
    pre[data-code-block],
    section[data-code-group],
    [data-code-block-root]
  ) {
  width: 100%;
  margin-inline: 0;
}

.prose > [data-table-root] {
  --ui-table-breakout-width: 100%;
  --ui-table-breakout-margin: 0;
}

.prose > ui-score {
  --ui-table-breakout-width: 100%;
  --ui-table-breakout-margin: 0;
}

.prose > ui-math {
  --ui-table-breakout-width: 100%;
  --ui-table-breakout-margin: 0;
}

:is(.prose, .about-prose) > [data-table-root],
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > [data-table-root] {
  --_table-breakout-width-default: calc(100% + var(--space-8, 2rem));
  --_table-breakout-margin-default: var(--space-n4, -1rem);
  width: var(--ui-table-breakout-width, var(--_table-breakout-width-default));
  margin-inline: var(--ui-table-breakout-margin, var(--_table-breakout-margin-default));
  overflow-x: auto;
  overflow-y: visible;
}

@media (min-width: 768px) {
  :is(.prose, .about-prose) > [data-table-root],
  :is(.prose, .about-prose) > ui-tabs > [slot='panel'] > [data-table-root] {
    --_table-breakout-width-default: calc(100% + var(--space-16, 4rem));
    --_table-breakout-margin-default: var(--space-n8, -2rem);
  }
}

:is(.prose, .about-prose) > [data-table-root]:focus-visible,
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > [data-table-root]:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, oklch(60% 0.15 250));
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--radius-sm, 4px);
  animation: var(--animation-focus);
}

@media (prefers-reduced-motion: reduce) {
  :is(.prose, .about-prose) > [data-table-root]:focus-visible,
  :is(.prose, .about-prose) > ui-tabs > [slot='panel'] > [data-table-root]:focus-visible {
    animation: none;
  }
}

[data-table-root] > table {
  border-collapse: collapse;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

[data-table-root] > table > caption {
  caption-side: top;
  font-size: var(--text-xs, 0.75rem);
  color: var(--fg-muted, oklch(48% 0 0));
  padding: var(--space-2, 0.5rem) 0;
  text-align: left;
}

[data-table-root] > table th {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  letter-spacing: var(--tracking-wide, 0.04em);
  color: var(--fg-muted, oklch(48% 0 0));
  vertical-align: bottom;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-bottom: var(--border-width-thick, 2px) solid var(--border-default, oklch(0% 0 0 / 0.08));
  text-align: left;
}

[data-table-root] > table td {
  font-size: var(--text-base, 0.875rem);
  color: var(--fg-default, oklch(20% 0 0));
  vertical-align: top;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  white-space: normal;
}

[data-table-root] > table tr {
  border-bottom: var(--border-width, 1px) solid var(--border-default, oklch(0% 0 0 / 0.08));
  transition: background-color var(--duration-fast, 70ms)
    var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
}

@media (hover: hover) and (pointer: fine) {
  [data-table-root] > table tbody tr:hover {
    background-color: var(--bg-table-ruler, oklch(0% 0 0 / 0.04));
  }
}

@media (hover: none) and (pointer: coarse) {
  [data-table-root] > table tbody tr:hover {
    background-color: transparent;
  }
}

[data-table-root] > table tfoot tr:first-child {
  border-top: var(--border-width-thick, 2px) solid var(--border-default, oklch(0% 0 0 / 0.08));
}

[data-table-root] > table tbody + tbody {
  border-top: var(--border-width-thick, 2px) solid var(--border-default, oklch(0% 0 0 / 0.08));
}

[data-table-root][data-density='compact'] > table th {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
}

[data-table-root][data-density='compact'] > table td {
  font-size: var(--text-sm, 0.8125rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
}

[data-table-root] > table th[align='center'],
[data-table-root] > table td[align='center'] {
  text-align: center;
}

[data-table-root] > table th[align='right'],
[data-table-root] > table td[align='right'] {
  text-align: right;
}

[data-table-root] > table th[align='left'],
[data-table-root] > table td[align='left'] {
  text-align: left;
}

[data-table-root] > table td[align='right'] {
  font-feature-settings: 'tnum';
}

@media (hover: none) and (pointer: coarse) {
  [data-table-root] > table td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (forced-colors: active) {
  [data-table-root] > table tr {
    border-bottom: 1px solid CanvasText;
  }

  [data-table-root] > table tfoot tr:first-child,
  [data-table-root] > table tbody + tbody {
    border-top: 2px solid CanvasText;
  }
}

:is(.prose, .about-prose) > blockquote,
:is(.prose, .about-prose) > figure > blockquote,
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > blockquote,
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > figure > blockquote {
  margin: 0;
  padding-inline-start: var(--space-4, 16px);
  border-inline-start: var(--border-width-thick, 2px) solid
    var(--border-muted, var(--border-default, oklch(70% 0 0 / 0.28)));
  color: var(--fg-default, oklch(20% 0 0));
  font-style: normal;
}

:is(.prose, .about-prose) > blockquote > :first-child,
:is(.prose, .about-prose) > figure > blockquote > :first-child,
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > blockquote > :first-child,
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > figure > blockquote > :first-child {
  margin-block-start: 0;
}

:is(.prose, .about-prose) > blockquote > :last-child,
:is(.prose, .about-prose) > figure > blockquote > :last-child,
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > blockquote > :last-child,
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > figure > blockquote > :last-child {
  margin-block-end: 0;
}

:is(.prose, .about-prose) > figure[data-blockquote-variant='nested'] > blockquote,
:is(.prose, .about-prose) > blockquote[data-blockquote-variant='nested'],
:is(.prose, .about-prose)
  > ui-tabs
  > [slot='panel']
  > figure[data-blockquote-variant='nested']
  > blockquote,
:is(.prose, .about-prose)
  > ui-tabs
  > [slot='panel']
  > blockquote[data-blockquote-variant='nested'] {
  margin-block: var(--space-4, 16px);
  margin-inline-start: 0;
}

:is(.prose, .about-prose) > figure > figcaption.source,
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > figure > figcaption.source {
  margin-block-start: var(--space-2, 8px);
  color: var(--fg-muted, oklch(48% 0 0));
  font-size: var(--text-xs, 12px);
  font-weight: var(--font-medium, 500);
  letter-spacing: var(--tracking-wide, 0.025em);
  line-height: var(--line-height-normal, 1.5);
}

:is(.prose, .about-prose) > figure > figcaption.source cite,
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > figure > figcaption.source cite {
  color: inherit;
  font-style: normal;
}

:is(.prose, .about-prose) > [data-callout],
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > [data-callout] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  border-radius: var(--radius-md, 6px);
  border-inline-start: var(--border-width-thick, 2px) solid var(--fg-muted);
  background: var(--bg-note-subtle);
  color: var(--fg-default);
}

[data-callout][data-callout-kind='note'] {
  background: var(--bg-note-subtle);
  border-inline-start-color: var(--fg-muted);
  --callout-accent-color: var(--fg-muted);
}

[data-callout][data-callout-kind='tip'] {
  background: var(--bg-tip-subtle);
  border-inline-start-color: var(--fg-info);
  --callout-accent-color: var(--fg-info);
}

[data-callout][data-callout-kind='success'] {
  background: var(--bg-success-subtle);
  border-inline-start-color: var(--fg-success);
  --callout-accent-color: var(--fg-success);
}

[data-callout][data-callout-kind='warning'] {
  background: var(--bg-warning-subtle);
  border-inline-start-color: var(--fg-warning);
  --callout-accent-color: var(--fg-warning);
}

[data-callout][data-callout-kind='danger'] {
  background: var(--bg-danger-subtle);
  border-inline-start-color: var(--fg-danger);
  --callout-accent-color: var(--fg-danger);
}

[data-callout] > .callout-icon,
[data-callout] > [data-callout-icon-svg] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: var(--icon-base, 16px);
  height: calc(1em * var(--line-height-relaxed, 1.75));
  stroke-width: 1.5;
  color: var(--callout-accent-color, var(--fg-muted));
}

[data-callout] > [data-callout-content='true'] {
  min-width: 0;
  line-height: var(--line-height-relaxed, 1.75);
  color: var(--fg-default);
}

[data-callout] [data-callout-heading='true'] {
  margin: 0 0 var(--space-2, 8px) 0;
  font-weight: var(--font-semibold, 600);
  line-height: var(--line-height-relaxed, 1.75);
  color: inherit;
  font-size: inherit;
}

[data-callout] [data-callout-body='true'] {
  color: inherit;
}

[data-callout] [data-callout-body='true'] > :first-child {
  margin-block-start: 0;
}

[data-callout] [data-callout-body='true'] > :last-child {
  margin-block-end: 0;
}

@media (forced-colors: active) {
  [data-callout] {
    border: var(--border-width, 1px) solid var(--border-default);
    border-inline-start: var(--border-width-thick, 2px) solid var(--primary);
  }

  [data-callout][data-callout-kind='danger'] {
    border-inline-start-color: var(--danger);
  }
}

:is(.prose, .about-prose) > [data-info-box],
:is(.prose, .about-prose) > ui-tabs > [slot='panel'] > [data-info-box] {
  display: grid;
  border: var(--border-style-subtle, 1px solid oklch(20% 0 0 / 0.12));
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  background: transparent;
  color: var(--fg-default, oklch(20% 0 0));
}

[data-info-box][data-variant='filled'] {
  background: var(--bg-fill-muted, oklch(96% 0 0));
}

[data-info-box] > [data-info-box-header='true'] {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: var(--border-style-subtle, 1px solid oklch(20% 0 0 / 0.12));
  font-size: var(--text-xs, 12px);
  font-weight: var(--font-semibold, 600);
  letter-spacing: var(--tracking-wide, 0.025em);
  line-height: var(--line-height-tight, 1.4);
  font-feature-settings: 'palt';
  color: var(--fg-muted, oklch(48% 0 0));
}

[data-info-box][data-variant='filled'] > [data-info-box-header='true'] {
  color: var(--fg-default, oklch(20% 0 0));
}

[data-info-box] > [data-info-box-header='true'] > .info-box-icon,
[data-info-box] > [data-info-box-header='true'] > [data-info-box-icon-svg] {
  display: flex;
  align-items: end;
  flex-shrink: 0;
  width: var(--icon-xs, 12px);
  height: calc(1em * var(--line-height-tight, 1.4));
  color: currentColor;
  stroke-width: 1.5;
  transform: translateY(0.5px);
}

[data-info-box] [data-info-box-heading='true'] {
  min-width: 0;
  color: currentColor;
  margin: 0;
  font-size: inherit;
}

[data-info-box] > [data-info-box-body='true'] {
  padding: var(--space-4, 16px);
  min-width: 0;
}

[data-info-box][data-density='compact'] > [data-info-box-header='true'] {
  padding: var(--space-2, 8px) var(--space-3, 12px);
}

[data-info-box][data-density='compact'] > [data-info-box-body='true'] {
  padding: var(--space-3, 12px);
}

[data-info-box] > [data-info-box-body='true'] > :first-child {
  margin-block-start: 0;
}

[data-info-box] > [data-info-box-body='true'] > :last-child {
  margin-block-end: 0;
}

@media (forced-colors: active) {
  [data-info-box] {
    border-color: CanvasText;
  }

  [data-info-box] > [data-info-box-header='true'] {
    border-bottom-color: CanvasText;
    color: CanvasText;
  }

  [data-info-box] > [data-info-box-header='true'] > [data-info-box-icon-svg] {
    color: CanvasText;
  }
}

@media print {
  [data-info-box],
  [data-info-box][data-variant='filled'] {
    background: transparent;
  }

  :is(.prose, .about-prose) > blockquote,
  :is(.prose, .about-prose) > figure > blockquote,
  :is(.prose, .about-prose) > ui-tabs > [slot='panel'] > blockquote,
  :is(.prose, .about-prose) > ui-tabs > [slot='panel'] > figure > blockquote,
  :is(.prose, .about-prose) > figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  :is(.prose, .about-prose) > blockquote,
  :is(.prose, .about-prose) > figure > blockquote,
  :is(.prose, .about-prose) > ui-tabs > [slot='panel'] > blockquote,
  :is(.prose, .about-prose) > ui-tabs > [slot='panel'] > figure > blockquote {
    border-inline-start-color: #000 !important;
  }
}

/* Mobile: コンテナより広く */
@media (max-width: 767px) {
  /* --bp-md */
  .prose > img,
  .prose > pre,
  .prose > table,
  .prose > [data-table-root],
  .prose > video {
    width: calc(100% + var(--space-8));
    margin-inline: var(--space-n4);
  }
}

/* Desktop: さらに広く強調 */
@media (min-width: 768px) {
  /* --bp-md */
  .prose > img,
  .prose > pre,
  .prose > table,
  .prose > [data-table-root],
  .prose > video {
    width: calc(100% + var(--space-16));
    margin-inline: var(--space-n8);
  }
}

/* ===========================================================================
 * Links
 * =========================================================================== */

/* グローバルリンク（デフォルト） */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a[href] {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: var(--border-width);
  text-decoration-color: var(--primary);
}

@supports (color: oklch(from white l c h)) {
  a[href] {
    text-decoration-color: var(--link-decoration-color);
  }
}

a:focus-visible {
  outline-style: solid;
  outline-width: var(--focus-ring-width);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-ring-color);
  border-radius: var(--focus-ring-radius);
  animation: var(--animation-focus);
}

/* ===========================================================================
 * Text Links（テキストリンク）
 * @see docs/design-system/components.md - Prose Link仕様
 * =========================================================================== */

/*
 * テキストリンク契約:
 * - 色以外のシグナル（常時下線）を必須にする
 * - link-text は Shadow DOM/Light DOM 共通の明示クラス
 * - 読書面は .prose と .about-prose の両方を対象にする
 */
.link-text[href],
:is(.prose, .about-prose) a[href]:not(.heading-anchor) {
  cursor: pointer;
  color: var(--fg-default); /* 本文色を維持し、読むリズムを優先 */
  text-decoration: underline;
  text-underline-offset: 0.15em; /* Noto Sans JPのベースラインに最適化 */

  /* Baseline: Relative Color Syntax 非対応ブラウザ向けの安全なフォールバック */
  text-decoration-color: var(--primary);

  text-decoration-thickness: var(--border-width); /* UI全体の線幅との一貫性 */

  transition:
    text-decoration-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);

  /* 改行時もスタイルを行ごとに適用（Firefox未サポート、Progressive Enhancement） */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Progressive Enhancement: Relative Color Syntax 対応環境 */
@supports (color: oklch(from white l c h)) {
  .link-text[href],
  :is(.prose, .about-prose) a[href]:not(.heading-anchor) {
    text-decoration-color: var(--link-decoration-color);
  }
}

/* Hover状態 - テキストと下線の両方を色付け */
.link-text[href]:hover,
:is(.prose, .about-prose) a[href]:not(.heading-anchor):hover {
  color: var(--primary-hover);
  text-decoration-color: var(--primary-hover);
}

/* Focus-Visible状態 - テキスト色は変更せず、フォーカスリングのみで状態を示す */
.link-text[href]:focus-visible,
:is(.prose, .about-prose) a[href]:not(.heading-anchor):focus-visible {
  outline-style: solid;
  outline-width: var(--focus-ring-width);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-ring-color);
  border-radius: var(--focus-ring-radius);
  animation: var(--animation-focus);

  color: var(--fg-default);
  text-decoration-color: var(--primary);
}

/* Visited状態 - 個人メモでは既読管理より読むリズムを優先 */
.link-text[href]:visited,
:is(.prose, .about-prose) a[href]:not(.heading-anchor):visited {
  color: var(--fg-default);
  text-decoration-color: var(--primary);
}

/* 外部リンク:
 * 1. data-link-kind がある場合はそれを正本として使う
 * 2. hand-authored な about ページ等のために href scheme でも保守的 fallback を持つ
 */
:is(.prose, .about-prose)
  a[href]:not(.heading-anchor):is(
    [data-link-kind='external-web'],
    [data-link-kind='external-action'],
    [href^='http://'],
    [href^='https://'],
    [href^='mailto:'],
    [href^='tel:']
  ) {
  text-decoration-style: dotted;
}

:is(.prose, .about-prose)
  a[href]:not(.heading-anchor):is(
    [data-link-kind='external-web'],
    [data-link-kind='external-action'],
    [href^='http://'],
    [href^='https://'],
    [href^='mailto:'],
    [href^='tel:']
  )::after {
  content: '↗';
  display: inline-block;
  margin-inline-start: 0.28em;
  color: var(--fg-muted);
  font-size: 0.78em;
  line-height: 1;
  text-decoration: none;
  vertical-align: 0.08em;
}

:is(.prose, .about-prose)
  a[href]:not(.heading-anchor):is(
    [data-link-kind='external-web'],
    [data-link-kind='external-action'],
    [href^='http://'],
    [href^='https://'],
    [href^='mailto:'],
    [href^='tel:']
  ):hover::after,
:is(.prose, .about-prose)
  a[href]:not(.heading-anchor):is(
    [data-link-kind='external-web'],
    [data-link-kind='external-action'],
    [href^='http://'],
    [href^='https://'],
    [href^='mailto:'],
    [href^='tel:']
  ):focus-visible::after {
  color: currentColor;
}

/* Progressive Enhancement: Relative Color Syntax 対応環境 */
@supports (color: oklch(from white l c h)) {
  .link-text[href]:visited,
  :is(.prose, .about-prose) a[href]:not(.heading-anchor):visited {
    text-decoration-color: var(--link-decoration-color);
  }
}

/* Touch (No Hover) 判定 - タッチデバイスでは発見可能性を優先 */
@media (hover: none) and (pointer: coarse) {
  .link-text[href],
  :is(.prose, .about-prose) a[href]:not(.heading-anchor) {
    color: var(--primary);
    text-decoration-color: var(--link-decoration-color-touch);
  }
}

/* ===========================================================================
 * Control Links（構造型リンク / UIリンク）
 * @see docs/design-system/components.md - Contextual Link仕様
 *
 * カード、サイドバー等のUIコンポーネント内に配置される
 * ナビゲーションやアクションを目的としたリンク。
 * Prose Link（読み物内）とは明確に区別される。
 * =========================================================================== */

/**
 * Base Style
 * - デフォルトは Nav バリアント（ニュートラル）
 * - Prose Linkと同じ下線オフセット・太さを共有し一貫性を保証
 */
.ui-link[href],
.link-control[href] {
  cursor: pointer;
  color: var(--fg-default);
  text-decoration: none;
  text-underline-offset: 0.15em; /* Noto Sans JPのベースラインに最適化 */
  text-decoration-thickness: var(--border-width); /* UI全体の線幅との一貫性 */
  font-weight: var(--font-medium); /* 周辺テキストより一段階強調 */
  transition:
    color var(--duration-fast) var(--ease-out),
    text-decoration-color var(--duration-fast) var(--ease-out);
}

/* Hover: 下線追加 + プライマリカラーへ変化 */
.ui-link[href]:hover,
.link-control[href]:hover {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Active: Tactile Feedback（ボタンと同様のスケール変化） */
.ui-link[href]:active,
.link-control[href]:active {
  transform: scale(var(--scale-pressed));
}

/* Focus-Visible: Adaptive Focusリング */
.ui-link[href]:focus-visible,
.link-control[href]:focus-visible {
  outline-style: solid;
  outline-width: var(--focus-ring-width);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-ring-color);
  border-radius: var(--focus-ring-radius); /* グローバル定義に追従 */
  animation: var(--animation-focus);
}

/* Visited: UIの透明化を優先、Default状態と統合 */
.ui-link[href]:visited,
.link-control[href]:visited {
  color: var(--fg-default);
}

.ui-link[data-link-kind='external-web']::after,
.ui-link[data-link-kind='external-action']::after,
.link-control[data-link-kind='external-web']::after,
.link-control[data-link-kind='external-action']::after {
  content: '↗';
  display: inline-block;
  margin-inline-start: 0.28em;
  color: var(--fg-muted);
  font-size: 0.78em;
  line-height: 1;
  text-decoration: none;
  vertical-align: 0.08em;
}

.ui-link[data-link-kind='external-web']:hover::after,
.ui-link[data-link-kind='external-action']:hover::after,
.link-control[data-link-kind='external-web']:hover::after,
.link-control[data-link-kind='external-action']:hover::after {
  color: currentColor;
}

/* Sidebar Nav: 階層構造を示すため muted を基準色とする */
.sidebar .ui-link[href]:not(.link-action),
.sidebar .link-control[href]:not(.link-action) {
  color: var(--fg-muted);
}

.sidebar .ui-link[href]:not(.link-action):visited,
.sidebar .link-control[href]:not(.link-action):visited {
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------------------
 * Action Variant - ユーザーに操作を促す強いリンク
 * 「編集」「作成」などの明確なアクション
 * --------------------------------------------------------------------------- */
.ui-link.link-action,
.link-action {
  color: var(--primary);
}

.ui-link.link-action:visited,
.link-action:visited {
  color: var(--primary);
}

.ui-link.link-action:hover,
.link-action:hover {
  color: var(--primary-hover);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Current (Nav only): 現在地は色と物理的インジケータで示す */
.ui-link[href]:not(.link-action)[aria-current='page'],
.ui-link[href]:not(.link-action).is-active,
.link-control[href]:not(.link-action)[aria-current='page'],
.link-control[href]:not(.link-action).is-active {
  color: var(--primary);
  font-weight: var(--font-medium);
  border-inline-start: var(--border-width-thick) solid var(--primary);
  padding-inline-start: var(--space-2);
}

/* ---------------------------------------------------------------------------
 * Subtle Variant - メタデータ、日付、タグ等
 * 控えめに存在を示唆し、ホバーで明確化
 * 
 * 注意: --bg-default または --bg-surface-2 上でのみ使用可能
 *       --bg-fill-muted (3.8:1) では WCAG AA 未達
 * --------------------------------------------------------------------------- */
.ui-link.link-subtle,
.link-subtle {
  color: var(--fg-muted);
  font-weight: var(--font-normal); /* Subtleは強調しない */
  text-decoration: none;
}

.ui-link.link-subtle:hover,
.link-subtle:hover {
  color: var(--fg-default);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.ui-link.link-subtle:focus-visible,
.link-subtle:focus-visible {
  outline-style: solid;
  outline-width: var(--focus-ring-width);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-ring-color);
  border-radius: var(--focus-ring-radius);
  animation: var(--animation-focus);
  color: var(--fg-muted);
  text-decoration: underline;
}

.ui-link.link-subtle:visited,
.link-subtle:visited {
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------------------
 * Touch (No Hover) 判定
 * タッチデバイスではホバーによる発見可能性が得られないため、
 * デフォルト状態から視覚的ヒントを強化
 * --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  /* Nav バリアント: デフォルトで色付き */
  .ui-link[href]:not(.link-action),
  .link-control[href]:not(.link-action) {
    color: var(--primary);
  }

  /* Icon Only: 最小タップ領域を確保 */
  .ui-link.icon-only {
    min-inline-size: var(--control-min-touch);
    min-block-size: var(--control-min-touch);
  }

  /* Subtle バリアント: 発見可能性を優先し、fg-default に格上げ */
  .ui-link.link-subtle,
  .link-subtle {
    color: var(--fg-default);
  }
}

/* ---------------------------------------------------------------------------
 * Legacy Compatibility（移行レイヤ）
 *
 * card / callout / sidebar 内の未分類リンクを段階的に削減するための暫定措置。
 * 新規実装では .link-text または .link-control を必ず付与すること。
 * --------------------------------------------------------------------------- */
.card :where(a[href]):not(:where(.prose a[href])):not(.link-text):not(.link-control):not(.ui-link),
.callout
  :where(a[href]):not(:where(.prose a[href])):not(.link-text):not(.link-control):not(.ui-link),
.sidebar
  :where(a[href]):not(:where(.prose a[href])):not(.link-text):not(.link-control):not(.ui-link) {
  color: var(--fg-default);
}

.sidebar
  :where(a[href]):not(:where(.prose a[href])):not(.link-text):not(.link-control):not(.ui-link) {
  color: var(--fg-muted);
}

/* ui-list-item 内のリンクは、本文リンクや touch 強調リンクとは分離し、
   索引・一覧向けの静かな下線として扱う */
ui-list-item > a[slot][href]:not([slot='actions']),
ui-list-item > [slot]:not([slot='actions']) a[href] {
  color: inherit;
  font-weight: inherit;
  text-decoration-line: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: var(--border-width);
  text-decoration-color: var(--link-decoration-color-subtle);
  transition:
    text-decoration-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

ui-list-item > a[slot][href]:not([slot='actions']):hover,
ui-list-item > [slot]:not([slot='actions']) a[href]:hover {
  color: inherit;
  text-decoration-color: currentColor;
}

ui-list-item > a[slot][href]:not([slot='actions']):focus-visible,
ui-list-item > [slot]:not([slot='actions']) a[href]:focus-visible {
  outline-style: solid;
  outline-width: var(--focus-ring-width);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-ring-color);
  border-radius: var(--focus-ring-radius);
  animation: var(--animation-focus);
  color: inherit;
  text-decoration-color: currentColor;
}

ui-list-item > a[slot][href]:not([slot='actions']):visited,
ui-list-item > [slot]:not([slot='actions']) a[href]:visited {
  color: inherit;
  text-decoration-color: var(--link-decoration-color-subtle);
}

/* ---------------------------------------------------------------------------
 * Block Link (Card Action)
 * カード全体をリンク化する Stretched Link パターン
 * 
 * 使用条件:
 * - 親コンテナ（.card 等）に position: relative が必須
 * - 内部の別リンク/ボタンには position: relative + z-index: 2 以上を設定
 * --------------------------------------------------------------------------- */
.card-link::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* Block Link (card-link) にフォーカス時、親カード全体を強調 */
.card:focus-within {
  outline-style: solid;
  outline-width: var(--focus-ring-width);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-ring-color);
  border-radius: var(--radius-md);
  animation: var(--animation-focus);
}

/* Enhancement: :has() 対応環境では card-link のフォーカスに限定 */
.card:has(.card-link:focus-visible) {
  outline-style: solid;
  outline-width: var(--focus-ring-width);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-ring-color);
  border-radius: var(--radius-md);
  animation: var(--animation-focus);
}

/* card-link 自体のフォーカスリングは非表示（親カードに委譲） */
.card-link:focus-visible {
  outline: none;
}

/* ===========================================================================
 * Print Styles - Contextual Links
 * =========================================================================== */

@media print {
  /* ナビゲーションリンク: 印刷時は非表示（ページ内でのみ意味を持つため） */
  .sidebar a[href],
  .ui-link.link-nav {
    display: none;
  }

  /* アクションリンク: 外部URLの場合のみ展開 */
  .ui-link.link-action[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.875em;
    color: var(--fg-muted);
    text-decoration: none;
  }

  /* カード内リンク: 下線を表示し、リンクであることを明示 */
  .card a,
  .callout a {
    text-decoration: underline;
    text-decoration-color: currentColor;
  }
}

/* ===========================================================================
 * Print Styles - Prose Links
 * =========================================================================== */

@media print {
  /* 外部リンク（http/https）のURLを表示 */
  :is(.prose, .about-prose) a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.875em;
    color: var(--fg-muted);
    text-decoration: none;
  }

  /* 内部リンク（相対パス、アンカー）はURL展開しない */
  :is(.prose, .about-prose) a[href^='#']::after,
  :is(.prose, .about-prose) a[href^='/']::after {
    content: none;
  }

  /* 下線は常に表示し、リンクであることを明示 */
  :is(.prose, .about-prose) a:not(.heading-anchor) {
    text-decoration: underline;
    text-decoration-color: currentColor;
  }
}

/* ===========================================================================
 * Focus Visible (Global)
 * =========================================================================== */

:focus-visible {
  outline-style: solid;
  outline-width: var(--focus-ring-width);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-ring-color);
  border-radius: var(--focus-ring-radius);
  animation: var(--animation-focus);
}

/* ===========================================================================
 * Scrollbar Styling
 * =========================================================================== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* WebKit / Chromium */
*::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  /* 透明なボーダーでパディングを作り、視覚的な幅を細くする */
  border: 4px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* ===========================================================================
 * Utility Classes
 * =========================================================================== */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Glass Panel：ヘッダー、フローティングパネル用 */
.glass-panel {
  /* Baseline: 明確な境界線による構造化 */
  background: var(--glass-panel);
  border: var(--border-style-subtle);
}

@supports (backdrop-filter: blur(12px)) {
  .glass-panel {
    /* Enhanced: 背後のコンテキストを感じさせる透過性 */
    background: oklch(from var(--bg-default) l c h / 0.85);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));

    /* Edge Highlight: 1pxの光の反射を表現 */
    box-shadow:
      inset 0 1px 0 0 oklch(100% 0 0 / 0.05),
      inset 0 0 0 1px oklch(100% 0 0 / 0.03);
  }
}

/* Dark Mode時の調整 */
@media (prefers-color-scheme: dark) {
  @supports (backdrop-filter: blur(12px)) {
    .glass-panel {
      box-shadow:
        inset 0 1px 0 0 oklch(100% 0 0 / 0.08),
        inset 0 0 0 1px oklch(100% 0 0 / 0.05);
    }
  }
}

/* Skeleton UI */
.skeleton {
  background: var(--skeleton-bg);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-shimmer), transparent);
  animation: shimmer 1.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

/* ===========================================================================
 * Layout System
 * =========================================================================== */

/* Container */
.container {
  width: 100%;
  max-width: var(--bp-xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  /* --bp-md */
  .container {
    padding-inline: var(--space-8);
  }
}

.container-reading {
  max-width: min(100%, var(--reading-measure, var(--width-reading)));
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  /* --bp-md */
  .container-reading {
    padding-inline: var(--space-8);
  }
}

/* ===========================================================================
 * Application Shell
 * =========================================================================== */

.app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

app-router {
  flex: 1 1 auto;
  display: block;
}

.note-shell {
  --note-toc-track: var(--aside-width);
  display: grid;
  align-items: start;
  min-height: calc(100vh - var(--header-height));
  max-width: var(--bp-xl);
  margin-inline: auto;
  width: 100%;
}

.note-shell[data-sidebar-presence='present'] {
  grid-template-columns:
    var(--sidebar-width)
    minmax(0, 1fr)
    var(--note-toc-track);
}

.note-shell[data-sidebar-presence='absent'] {
  grid-template-columns:
    minmax(0, 1fr)
    var(--note-toc-track);
}

.about-shell {
  --about-toc-track: var(--aside-width);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--about-toc-track);
  align-items: start;
  min-height: calc(100vh - var(--header-height));
  max-width: var(--bp-xl);
  margin-inline: auto;
  width: 100%;
}

.layout-sidebar-col,
.layout-main-col,
.layout-toc-col {
  box-sizing: border-box;
  min-inline-size: 0;
}

.note-shell[data-sidebar-presence='present'] .layout-sidebar-col {
  grid-column: 1;
}

.note-shell[data-sidebar-presence='present'] .layout-main-col {
  grid-column: 2;
}

.note-shell[data-sidebar-presence='present'] .layout-toc-col {
  grid-column: 3;
}

.note-shell[data-sidebar-presence='absent'] .layout-main-col {
  grid-column: 1;
}

.note-shell[data-sidebar-presence='absent'] .layout-toc-col {
  grid-column: 2;
}

.layout-sidebar-col {
  position: sticky;
  top: var(--header-height);
  align-self: start;
  max-block-size: var(--layout-sticky-max-block-size, calc(100vh - var(--header-height)));
  border-right: var(--border-width) solid var(--border-ghost);
  overflow: visible;
  transform: translateY(calc(var(--layout-sticky-footer-offset, 0px) * -1));
}

.layout-main-col {
  padding-block: var(--space-8);
}

.layout-toc-col {
  position: sticky;
  top: var(--header-height);
  align-self: start;
  block-size: var(--layout-sticky-max-block-size, calc(100vh - var(--header-height)));
  max-block-size: var(--layout-sticky-max-block-size, calc(100vh - var(--header-height)));
  border-left: var(--border-width) solid color-mix(in oklab, var(--border-ghost) 62%, transparent);
  overflow: hidden;
  padding-block: var(--space-6);
  padding-inline-start: var(--space-4);
  transform: translateY(calc(var(--layout-sticky-footer-offset, 0px) * -1));
}

.about-content {
  display: grid;
  gap: var(--space-8);
}

.about-main-col {
  max-width: min(100%, calc(var(--width-reading) + 12rem));
}

.about-hero {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--border-default);
}

.about-eyebrow {
  margin: 0;
  color: var(--fg-default);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.about-title {
  margin: 0;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  line-height: var(--line-height-tight);
}

.about-lead {
  max-width: 62ch;
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
}

.about-summary {
  display: grid;
  gap: var(--space-3);
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-width-thick) solid var(--border-default);
}

.about-summary-label {
  margin: 0;
  color: var(--fg-default);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.about-summary-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--fg-default);
}

.about-summary-list li + li {
  margin-top: var(--space-2);
}

.home-shell {
  box-sizing: border-box;
  width: min(100%, var(--page-shell-max-width, 72rem));
  margin-inline: auto;
  min-height: calc(100vh - var(--header-height));
  padding: var(
      --home-shell-padding-block-start,
      clamp(var(--space-4, 16px), 2.5vw, var(--space-8, 32px))
    )
    var(--page-shell-padding-inline, clamp(var(--space-4, 16px), 2vw, var(--space-6, 24px)))
    var(--home-shell-padding-block-end, var(--space-12, 48px));
}

.home-content {
  display: grid;
  gap: var(--space-8, 32px);
}

.home-hero {
  display: grid;
  gap: var(--space-2, 8px);
  padding-bottom: var(--space-6, 24px);
  border-bottom: var(--border-width, 1px) solid var(--border-default);
}

.home-title {
  margin: 0;
  font-size: clamp(var(--text-2xl, 24px), 3.2vw, var(--text-3xl, 30px));
  line-height: 1.2;
}

.home-eyebrow {
  margin-bottom: 2px;
  color: var(--fg-subtle, var(--fg-muted));
  font-family: var(--font-mono);
  font-size: var(--text-xs, 12px);
  letter-spacing: var(--tracking-normal);
}

.home-lead {
  margin: 0;
  max-inline-size: var(--reading-measure, 72ch);
  color: var(--fg-default);
  font-size: var(--text-base, 14px);
  line-height: 1.8;
}

.home-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
  margin-bottom: 0;
  color: var(--fg-muted);
  font-size: var(--text-xs, 12px);
  line-height: var(--line-height-tight);
}

.home-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.home-meta-separator {
  color: var(--fg-ghost, var(--fg-muted));
}

.home-meta-link {
  color: var(--fg-muted);
  text-decoration-line: underline;
  text-decoration-color: var(--border-default);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.home-meta-link:hover,
.home-meta-link:focus-visible {
  color: var(--fg-default);
  text-decoration-color: currentColor;
}

.home-meta-link:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, oklch(60% 0.15 250));
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--focus-ring-radius, 4px);
}

.home-entry[href] {
  text-decoration: none;
}

.home-feed-section {
  display: grid;
  gap: var(--space-4, 16px);
}

.home-feed-title {
  margin: 0;
  font-size: var(--text-xl, 18px);
  line-height: var(--line-height-tight);
}

.home-feed-meta {
  margin: 0;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs, 12px);
  letter-spacing: var(--tracking-wide);
}

.home-feed-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4, 16px);
}

.home-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-feed-item + .home-feed-item {
  border-top: var(--border-width, 1px) solid var(--border-ghost);
}

.home-entry {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(5rem, 5.5rem) minmax(0, 1fr);
  gap: var(--space-4, 16px);
  padding-block: var(--space-4, 16px);
  color: inherit;
  text-decoration: none;
}

.home-entry:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, oklch(60% 0.15 250));
  outline-offset: var(--focus-ring-offset, 2px);
}

.home-entry__date {
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs, 12px);
  letter-spacing: var(--tracking-wide);
}

.home-entry__body {
  display: grid;
  gap: var(--space-1, 4px);
  min-inline-size: 0;
}

.home-entry__path {
  margin: 0;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs, 12px);
  letter-spacing: var(--tracking-wide);
  overflow-wrap: anywhere;
}

.home-entry__title {
  margin: 0;
  font-size: var(--text-lg, 16px);
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.home-entry__summary {
  margin: 0;
  color: var(--fg-default);
  font-size: var(--text-sm, 13px);
  line-height: 1.8;
  opacity: 0.82;
  overflow-wrap: anywhere;
}

.home-entry__genre {
  margin: 0;
  color: var(--fg-subtle, var(--fg-muted));
  font-size: var(--text-xs, 12px);
  line-height: var(--line-height-snug, 1.35);
  overflow-wrap: anywhere;
}

.home-empty {
  margin: 0;
  padding-block: var(--space-5, 20px);
  border-top: var(--border-width, 1px) solid var(--border-default);
  color: var(--fg-muted);
}

/* Tablet: 2カラム（本文 + TOC） */
@media (max-width: 767px) {
  .note-shell[data-sidebar-presence='present'] {
    grid-template-columns:
      0px
      minmax(0, 1fr)
      minmax(200px, 34vw);
  }

  .note-shell[data-sidebar-presence='absent'] {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(200px, 34vw);
  }

  .about-shell {
    --about-toc-track: minmax(200px, 34vw);
  }

  .home-meta {
    gap: var(--space-1, 4px) var(--space-2, 8px);
  }

  .home-entry {
    grid-template-columns: 1fr;
    gap: var(--space-2, 8px);
  }

  .layout-sidebar-col {
    border-right: none;
  }
}

/* Mobile: 1カラム（本文のみ） */
@media (max-width: 639px) {
  .note-shell[data-sidebar-presence='present'] {
    grid-template-columns:
      0px
      minmax(0, 1fr)
      0px;
  }

  .note-shell[data-sidebar-presence='absent'] {
    grid-template-columns:
      minmax(0, 1fr)
      0px;
  }

  .about-shell {
    --about-toc-track: 0px;
  }

  .home-shell {
    padding-inline: var(--space-3, 12px);
  }

  .layout-toc-col {
    border-left: none;
    padding: 0;
  }
}

/* ===========================================================================
 * Disabled State (グローバル)
 * =========================================================================== */

button:disabled,
input:disabled,
[aria-disabled='true'] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Forced Colors Modeでの対応 */
@media (forced-colors: active) {
  :not(pre) > code {
    outline: var(--border-width) solid CanvasText;
  }

  button:disabled,
  [aria-disabled='true'] {
    opacity: 1;
    color: GrayText;
  }

  /* ボーダーレスなデザインでも境界線を明確化 */
  .card,
  .button {
    border: var(--border-width) solid CanvasText;
  }
}

/* ===========================================================================
 * Print Styles
 * =========================================================================== */

@media print {
  /* レイアウトのリセット */
  body {
    background: white;
    color: black;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* ナビゲーション・UIコントロールの非表示 */
  header,
  nav,
  aside,
  footer,
  .sidebar,
  .header,
  .toc,
  .ui-button,
  .ui-search-trigger,
  .ui-dropdown {
    display: none !important;
  }

  /* コンテンツ幅のリセット */
  main,
  .prose,
  .container {
    max-width: 100% !important;
    margin: 0;
    padding: 0;
  }

  /* 装飾の除去 */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* 境界線は構造を示すため残す */
  table,
  th,
  td,
  blockquote,
  pre {
    border-color: #000 !important;
  }

  /* リンクの処理（グローバル） */
  a {
    color: #000;
    text-decoration: underline;
  }

  /* タイポグラフィの最適化 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
    break-after: avoid;
  }

  h1 {
    font-size: 24pt;
    margin-top: 0;
  }
  h2 {
    font-size: 18pt;
  }
  h3 {
    font-size: 14pt;
  }
  h4 {
    font-size: 12pt;
    font-weight: 700;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }

  /* コードブロックとテーブル */
  pre,
  code,
  blockquote,
  table {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  pre {
    border: 1px solid #ccc;
    padding: 8pt;
    font-size: 9pt;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  :not(pre) > code {
    background: #f5f5f5 !important;
    padding: 2pt 4pt;
    border: none;
    font-size: 10pt;
  }

  /* 画像とメディア */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* 動画や埋め込みコンテンツは非表示 */
  video,
  iframe,
  embed,
  object {
    display: none;
  }

  /* ページ設定 */
  @page {
    margin: 2cm;
  }
}

/* ===========================================================================
 * KaTeX（Light DOM）
 *
 * rehype-katex が .prose 等の Light DOM へ直接出力する KaTeX HTML に対する
 * グローバルスタイル。ui-math の Shadow DOM 内では同等ルールをコンポーネント
 * スタイルで管理するため、ここでは Light DOM のみを対象とする。
 *
 * KaTeX は出力に .katex-mathml（MathML / スクリーンリーダー用）と
 * .katex-html（視覚レンダリング）の両方を含む。
 * .katex-mathml を視覚的に非表示にしないと両者が重複して表示される。
 * =========================================================================== */

/* .katex-mathml: スクリーンリーダーのみに公開し、視覚的には非表示 */
.katex .katex-mathml {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===========================================================================
 * Static Image / Footnote roots for note prose
 * =========================================================================== */

figure[data-image] {
  position: relative;
  display: grid;
  gap: var(--space-2, 8px);
  margin: 0;
}

figure[data-image] > picture {
  display: block;
  width: 100%;
  overflow: hidden;
  border: var(--border-width, 1px) solid var(--border-ghost, oklch(20% 0 0 / 0.04));
  border-radius: var(--radius-md, 6px);
  background: var(--bg-fill-neutral, oklch(95% 0 0));
}

figure[data-image] img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

figure[data-image] > figcaption {
  color: var(--fg-muted, oklch(48% 0 0));
  font-size: var(--text-sm, 13px);
  line-height: var(--line-height-relaxed, 1.75);
}

figure[data-image] > [data-image-zoom-trigger] {
  position: absolute;
  inset-block-start: var(--space-2, 8px);
  inset-inline-end: var(--space-2, 8px);
  z-index: 1;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: var(--border-width, 1px) solid var(--border-ghost, oklch(20% 0 0 / 0.08));
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.78);
  color: var(--fg-muted, oklch(48% 0 0));
  cursor: zoom-in;
  backdrop-filter: blur(var(--blur-md, 12px));
  -webkit-backdrop-filter: blur(var(--blur-md, 12px));
}

figure[data-image] > [data-image-zoom-trigger]:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, oklch(60% 0.15 252));
  outline-offset: var(--focus-ring-offset, 2px);
}

figure[data-image] dialog[data-image-lightbox-dialog] {
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  padding: var(--space-4, 16px);
  border: 0;
  background: oklch(0% 0 0 / 0.6);
}

figure[data-image] dialog[data-image-lightbox-dialog]::backdrop {
  background: oklch(0% 0 0 / 0.6);
  backdrop-filter: blur(var(--blur-md, 12px));
  -webkit-backdrop-filter: blur(var(--blur-md, 12px));
}

.image-lightbox-surface {
  position: relative;
  display: grid;
  gap: var(--space-3, 12px);
  justify-items: center;
  align-content: center;
  width: 100%;
  height: 100%;
}

.image-lightbox-image {
  display: block;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border: var(--border-width, 1px) solid var(--border-ghost, oklch(20% 0 0 / 0.04));
  border-radius: var(--radius-md, 6px);
  background: var(--bg-fill-neutral, oklch(95% 0 0));
}

.image-lightbox-close {
  position: absolute;
  inset-block-start: var(--space-2, 8px);
  inset-inline-end: var(--space-2, 8px);
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: var(--border-width, 1px) solid var(--border-ghost, oklch(20% 0 0 / 0.08));
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.78);
  cursor: pointer;
}

.image-lightbox-caption {
  margin: 0;
  color: oklch(98% 0 0);
  font-size: var(--text-sm, 13px);
  line-height: var(--line-height-relaxed, 1.75);
}

a[data-footnote-ref] {
  display: inline-flex;
  align-items: baseline;
  margin-inline: 0.1em;
  color: var(--fg-muted, oklch(48% 0 0));
  font-size: max(var(--text-xs, 12px), 12px);
  font-weight: var(--font-medium, 500);
  letter-spacing: var(--tracking-wide, 0.02em);
  line-height: var(--line-height-none, 1);
  text-decoration: none;
  border-radius: var(--radius-sm, 4px);
}

a[data-footnote-ref] > sup {
  font-size: inherit;
  line-height: 1;
  vertical-align: super;
}

a[data-footnote-ref]:hover,
a[data-footnote-ref]:focus-visible {
  color: var(--primary, oklch(56% 0.16 252));
  text-decoration: underline;
}

a[data-footnote-ref].is-active-trigger {
  background: var(--bg-active, oklch(95% 0 0));
}

[data-footnote-popover] {
  z-index: var(--z-popover, 400);
  box-sizing: border-box;
  max-width: min(90vw, 400px);
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--bg-surface-2, oklch(100% 0 0));
  border: var(--border-width, 1px) solid var(--border-default, oklch(86% 0 0));
  border-radius: var(--radius-md, 6px);
  box-shadow: var(--elevation-lg, 0 8px 24px oklch(0% 0 0 / 0.12));
  color: var(--fg-default, oklch(20% 0 0));
  font-size: var(--text-sm, 13px);
  line-height: var(--line-height-relaxed, 1.75);
}

.footnote-popover-body > :first-child {
  margin-block-start: 0;
}

.footnote-popover-body > :last-child {
  margin-block-end: 0;
}

.footnote-popover-footer {
  margin-block-start: var(--space-3, 12px);
  padding-block-start: var(--space-2, 8px);
  border-top: 1px solid var(--border-ghost, oklch(88% 0 0 / 0.5));
}

.footnote-list-link {
  color: var(--fg-muted, oklch(48% 0 0));
  font-size: var(--text-xs, 12px);
  font-weight: var(--font-medium, 500);
  letter-spacing: var(--tracking-wide, 0.02em);
  text-decoration: none;
}

.footnote-list-link:hover,
.footnote-list-link:focus-visible {
  color: var(--primary, oklch(56% 0.16 252));
  text-decoration: underline;
}

section.footnotes .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

section.footnotes {
  margin-block-start: var(--space-16, 64px);
  padding-block-start: var(--space-8, 32px);
  border-block-start: var(--border-width, 1px) solid var(--border-default, oklch(86% 0 0));
}

section.footnotes ol {
  list-style-position: inside;
  padding-inline-start: 0;
}

section.footnotes li {
  margin-block-end: var(--space-3, 12px);
  color: var(--fg-default, oklch(20% 0 0));
  font-size: var(--text-sm, 13px);
}

section.footnotes li:target {
  background: var(--bg-active, oklch(95% 0 0));
  border-radius: var(--radius-sm, 4px);
}

section.footnotes a[data-footnote-backref] {
  color: var(--fg-muted, oklch(48% 0 0));
  text-decoration: none;
}

section.footnotes a[data-footnote-backref]:hover,
section.footnotes a[data-footnote-backref]:focus-visible {
  color: var(--primary, oklch(56% 0.16 252));
}

@media (prefers-reduced-motion: reduce) {
  [data-footnote-popover] {
    transition-duration: var(--duration-instant, 0ms);
  }
}

@media (forced-colors: active) {
  a[data-footnote-ref] {
    color: LinkText;
  }

  [data-footnote-popover] {
    border: 2px solid CanvasText;
    box-shadow: none;
  }

  section.footnotes {
    border-block-start: 1px solid CanvasText;
  }
}

@media print {
  figure[data-image] > [data-image-zoom-trigger],
  figure[data-image] dialog[data-image-lightbox-dialog],
  [data-footnote-popover] {
    display: none !important;
  }
}

/* ===========================================================================
 * Dark Mode - Media Brightness Adjustment
 * =========================================================================== */

@media (prefers-color-scheme: dark) {
  img,
  video {
    /* 画像・動画の眩しさを抑える */
    filter: brightness(var(--brightness-dimmed));
  }
}