/*
 * Fluent 2(Microsoft 365 風)。既定のデザイン。
 * ブランド色の上の帯(ブランド・道具)と、左の明るい縦のメニュー。白いカードに薄い影、角の丸み 4px(カード 8px)、タブは下線 3px
 */
[data-theme="fluent"] {
  --font-body: "Segoe UI", "Yu Gothic UI", "Meiryo", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-field-bg: #ffffff;
  --color-border: #e0e0e0;
  --color-border-strong: #d1d1d1;
  --color-card-border: transparent;
  --color-divider: #f0f0f0;
  --color-text: #242424;
  --color-muted: #616161;
  --color-link: #0f6cbd;
  --color-focus: #0f6cbd;
  --color-primary: #0f6cbd;
  --color-primary-hover: #115ea3;
  --color-on-primary: #ffffff;
  --color-button-text: #242424;
  --color-button-bg: #ffffff;
  --color-button-border: #d1d1d1;
  --color-button-hover-bg: #f5f5f5;
  --color-header: #0f6cbd;
  --color-on-header: #ffffff;
  --color-header-field-bg: #ffffff;
  --color-header-field-border: transparent;
  --color-header-button-text: #ffffff;
  --color-header-button-bg: transparent;
  --color-header-button-border: rgba(255, 255, 255, 0.6);
  --color-nav-bg: #fafafa;
  --color-nav-text: #242424;
  --color-nav-hover-bg: #f0f0f0;
  --color-nav-active-bg: #ebebeb;
  --color-nav-active-text: #242424;
  --color-tab-text: #424242;
  --color-tab-active-text: #242424;
  --color-table-bg: #ffffff;
  --color-table-head-bg: #ffffff;
  --color-table-head-text: #242424;
  --color-info-bg: #ebf3fc;
  --color-info-fg: #0f6cbd;
  --color-success-bg: #f1faf1;
  --color-success-fg: #0e700e;
  --color-warning-bg: #fff9f5;
  --color-warning-fg: #8a3707;
  --color-danger-bg: #fdf3f4;
  --color-danger-fg: #b10e1c;
  --color-neutral-bg: #f5f5f5;
  --color-neutral-fg: #424242;
  --color-late-bg: #fff4ce;
  --color-late-fg: #835b00;
  --tag-border-color: currentColor;
  --radius: 4px;
  --radius-card: 8px;
  --radius-button: 4px;
  --radius-tag: 4px;
  --shadow-card: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
  --tab-underline: 3px;
  --header-height: 3rem;
}

/* 左の縦のメニュー */
@media (min-width: 40.0625rem) {
  [data-theme="fluent"] .app-shell-signed-in { grid-template-columns: 12rem minmax(0, 1fr); grid-template-areas: "brand tools" "links main"; grid-template-rows: auto 1fr; }
  [data-theme="fluent"] .site-links { flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 0.75rem 0.5rem; border-bottom: 0; border-right: 1px solid var(--color-border); }
  [data-theme="fluent"] .site-links a { position: relative; padding-left: 1rem; }
  [data-theme="fluent"] .site-links a[aria-current="page"] { font-weight: 600; }
  [data-theme="fluent"] .site-links a[aria-current="page"]::before { content: ""; position: absolute; left: 0.25rem; top: 0.55rem; bottom: 0.55rem; width: 3px; border-radius: 2px; background: var(--color-primary); }
}
[data-theme="fluent"] .site-brand { font-weight: 600; }
[data-theme="fluent"] .karte-tabs { border-bottom-color: transparent; }
[data-theme="fluent"] .karte-tabs a { border-radius: 2px; color: var(--color-tab-text); }
[data-theme="fluent"] .karte-table-wrap, [data-theme="fluent"] .karte-panel > .karte-table { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
[data-theme="fluent"] .karte-table th { border-bottom-color: var(--color-border); }