/*
 * Nettoge shared design tokens.
 *
 * Single source for front-end and block editor. Static light/dark design
 * values live here; Customizer-derived accent values remain in PHP.
 *
 * AI edit map:
 * - Global scale: font / space / radius / shadow near the start of :root.
 * - Component palettes: syntax, blogcard, forms, chrome, parchment in :root.
 * - Dark equivalents: the single html[data-nettoge-theme="dark"] block.
 * - Do not add selectors or component layout here; edit the owning module CSS.
 */

/* Nettoge custom styles — design tokens & typography (:root) */
:root {
  --nettoge-page-bg: var(--color_bg, #ffffff);
  --nettoge-content-width: 740px;
  --block_max_width: var(--nettoge-content-width, 740px);
  --nettoge-border-hairline: rgba(0, 0, 0, 0.06);
  --nettoge-border-muted: #f0f0f0;
  --nettoge-border-warm: #e0ddd6;
  --nettoge-border-strong: rgba(0, 0, 0, 0.15);
  --nettoge-border-input: rgba(0, 0, 0, 0.22);
  --nettoge-border-button: rgba(0, 0, 0, 0.25);
  --nettoge-border-row: 0.5px solid var(--nettoge-border-hairline);
  --nettoge-border-frame: 1px solid var(--nettoge-border-muted);

  --font-body: Meiryo, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: var(--font-body);
  --font-sans-base: var(--font-sans);
  --font-heading: var(--font-serif);
  --font-display: var(--font-body);
  --swl-font_weight: 400;

  --jp-font-size: 16px;
  --jp-font-weight: 400;
  --base-font-size: 16px;
  --jp-line-height: 1.85;
  --jp-letter-spacing: 0.02em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-control: 2px;
  --radius-card: 0;
  --radius-pill: 999px;
  --shadow-control: 0 1px 3px var(--shadow-sidebar-keycap, rgba(0, 0, 0, 0.12));
  --shadow-card: var(--shadow-blogcard, 4px 4px 0 rgba(0, 0, 0, 0.08));
  --state-info: #2563eb;
  --state-warning: #d97706;
  --state-success: #16a34a;
  --state-danger: #dc2626;

  --color-step: var(--color_main);
  --color-reason: var(--state-info);
  --color-warn: var(--state-warning);
  --color-tip: #0284c7;
  --color-success: var(--state-success);

  --color-step-bg: #ecfdf5;
  --color-reason-bg: #eff6ff;
  --color-warn-bg: #fffbeb;
  --color-tip-bg: #f0f9ff;
  --color-success-bg: #f0fdf4;
  --surface-table-header: var(--nettoge-page-bg);
  --surface-table-row-odd: var(--nettoge-page-bg);
  --surface-table-row-even: var(--nettoge-page-bg);
  --border-table-row: var(--nettoge-border-warm);
  --border-table-header-divider: #c8c4bc;
  /* ヘッダー系の面トークンは用途別（混同しないこと）:
       --surface-header        … gnav サブメニュー/サイドバー面（sidebar-nettoge.css）
       --surface-floating-header … 追従見出しの番号バッジ背景（.fh-number）
       --surface-fixed-header-glass … 固定/追従ヘッダー・BGMバーの「フロスト面」(下方で定義) */
  --surface-floating-header: var(--nettoge-page-bg);
  --border-floating-badge: rgba(26, 26, 26, 0.14);
  /*
   * Header surface tokens — 固定ヘッダー / 追従見出しバー / BGM追従バー 共通の「面」。
   * 現在は平面ソリッド（装飾グラデーション無し）。別要素にも同じ面を付けたいとき:
   *     background: var(--surface-fixed-header-glass);
   *     -webkit-backdrop-filter: var(--nettoge-frost-backdrop);   (SP: -sp)
   *     backdrop-filter: var(--nettoge-frost-backdrop);
   *
   * ── 透明フロストに戻したいとき（現在は OFF＝不透明・平面） ──────────────
   *   (1) --nettoge-frost-backdrop / -sp を下のコメント値（blur...）へ
   *   (2) --surface-fixed-header-glass（ライト/ダーク）を color-mix の半透明値へ
   *   (3) 各 ::before に background-image(refract/highlight)+background-blend-mode を復活
   */
  --nettoge-frost-backdrop: none; /* ON時: blur(14px) saturate(145%) */
  --nettoge-frost-backdrop-sp: none; /* ON時: blur(12px) saturate(135%) */
  --shadow-floating-header: 0 18px 34px -26px rgba(24, 20, 18, 0.32), 0 6px 18px rgba(24, 20, 18, 0.08);
  --text-floating-heading-primary: var(--border-blogcard-accent);
  --text-floating-heading-secondary: var(--color-tip);
  --text-floating-badge: #5f5f5f;
  --surface-main-content: var(--surface-widget);
  --floating-heading-h2-size: 1rem;
  --floating-heading-h3-size: 0.875rem;
  --floating-heading-h2-size-sp: 0.9375rem;
  --floating-heading-h3-size-sp: 0.8125rem;
  --floating-heading-badge-size: 0.625rem;
  --floating-heading-badge-size-sp: 0.6rem;
  /* シンプル・モノクロ方針：コメントのみ控えめなグレー、他は本文色（緑/紫/赤/青を排除） */
  --syntax-comment: #8a8a85;
  --syntax-keyword: var(--text-code-block-body, #2a2a28);
  --syntax-property: var(--text-code-block-body, #2a2a28);
  --syntax-string: var(--text-code-block-body, #2a2a28);
  --syntax-function: var(--text-code-block-body, #2a2a28);
  --syntax-punctuation: var(--text-code-block-body, #2a2a28);
  --text-accent-prose: var(--color_main);
  --text-deep-prose: var(--color_deep01, #e44141);
  --surface-tab-active: var(--color_text);
  --text-tab-active: var(--color_content_bg);
  --border-tab-simple: #ddd;
  --surface-tab-simple-hover: #ddd;
  --text-tab-simple: #666;
  --text-tab-simple-active: #333;
  --surface-tab-body-border: var(--color_text);
  --surface-callout-box: #fff;
  --text-callout-box: #333;
  --surface-note-box: #f7f7f7;
  --text-note-box: #5f5a59;
  --border-note-box-dash: hsla(0, 0%, 78%, 0.6);
  --surface-crease-box: #f7f7f7;
  --surface-dent-box: rgba(0, 0, 0, 0.05);
  --surface-faq-stripe: var(--color_gray);
  --surface-balloon-inline-bg: var(--color_main);
  --text-balloon-inline: var(--text-on-accent);
  /* 7.css balloon (light defaults; dark overrides in html[data-nettoge-theme="dark"]) */
  --w7-bl-bg-top: #ffffff;
  --w7-el-bg-s-1: #ebebeb;
  --w7-bl-bd: rgba(0, 0, 0, 0.4);
  --w7-bl-shadow: 5px 5px 3px -3px rgba(0, 0, 0, 0.4);
  --w7-balloon-tail-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23fff' stroke='%23fff'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%23939393'/%3E%3C/svg%3E");
  --w7-balloon-tail-top-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23ebebeb' stroke='%23ddd'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%23939393'/%3E%3C/svg%3E");
  --border-step-arrow: #dedede;
  --share-brand-facebook: #3b5998;
  --share-brand-twitter: #1da1f2;
  --share-brand-hatebu: #00a4de;
  --share-brand-pocket: #ef3f56;
  --share-brand-pinterest: #bb0f23;
  --share-brand-line: #00c300;
  --surface-browser-frame: #ced1d5;
  --border-swell-box: var(--color_border);
  --border-balloon-circle: var(--color_border);
  --surface-accordion-title: var(--color_gray);
  --surface-capbox-content: var(--color_content_bg);
  --text-capbox-content: var(--color_text);
  --border-capbox: var(--capbox-color, var(--color_main));
  --surface-more-btn: #fff;
  --border-more-btn: #dcdcdc;
  --text-more-btn: #666;
  --shadow-btn-normal-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 12px 24px -12px rgba(0, 0, 0, 0.2);
  --shadow-btn-solid: 0 4px 0 var(--the-solid-shadow, var(--color_main_dark));
  --surface-review-card: #fff;
  --border-review-card: #000;
  --surface-review-rating-bg: #111;
  --text-review-muted: #454545;
  --border-box-menu: #eee;
  --surface-floating-hover: rgba(26, 26, 26, 0.02);
  /* Fixed/floating/BGM 共通の面トークン。固定/追従ヘッダー・BGMバーが参照する。
     注: SWELLカスタマイザーの --color_header_bg は半透明設定があり得るため、
     不透明にしたい面は --surface-widget（不透明）を基準にする。 */
  --surface-fixed-header-glass: var(--surface-widget, #ffffff); /* 不透明化(透明フロスト停止)。ON時: color-mix(in srgb, var(--surface-widget, #ffffff) 74%, transparent) */
  --border-fixed-header-glass: rgba(34, 30, 26, 0.1);
  --surface-fixed-header-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.12));
  --surface-fixed-header-refract:
    radial-gradient(130% 180% at 0% 0%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 20%, transparent 40%),
    radial-gradient(110% 140% at 100% 0%, rgba(166, 214, 255, 0.14) 0%, transparent 34%),
    radial-gradient(120% 140% at 52% 120%, rgba(255, 226, 200, 0.12) 0%, transparent 36%);
  --shadow-fixed-header-glass: 0 14px 32px -24px rgba(24, 20, 18, 0.34), 0 6px 16px rgba(24, 20, 18, 0.08);
  --nettoge-heading-accent: var(--color_htag, var(--color_text));
  --nettoge-heading-sub: #555;
  --nettoge-heading-muted: var(--swl-text_color--black, #333);
  --text-lead: #161b22;
  --surface-lead: linear-gradient(180deg, rgba(107, 114, 128, 0.08), rgba(107, 114, 128, 0.03));
  --border-lead-accent: var(--color_htag, var(--border-blogcard-accent));
  --surface-alert-warning: #fff9ef;
  --text-alert-warning: #111;
  --border-alert-stripe-dark: #000;
  --border-alert-stripe-accent: #f7c600;
  --shadow-alert-warning: 0 6px 18px rgba(0, 0, 0, 0.25);
  --shadow-alert-icon: 0 2px 2px rgba(0, 0, 0, 0.2);
  --surface-focus-box: #f6f5f3;
  --border-focus-box: #2f2f2f;
  --text-focus-box-title: #242424;
  --text-focus-box-body: #303030;
  --surface-warning-box: var(--surface-comment-toolbar);
  --text-blogcard-muted: #6a6a6a;
  --text-blogcard-body: var(--color_text, #333);
  --surface-blogcard-caption: var(--color_content_bg, var(--surface-blogcard));
  --surface-blogcard-pattern-dot: #3a3a3a;
  --shadow-blogcard: 4px 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-blogcard-hover: 5px 5px 0 rgba(0, 0, 0, 0.12);
  --shadow-blogcard-lift: 0 4px 16px rgba(0, 0, 0, 0.1), 0 12px 28px -12px rgba(0, 0, 0, 0.05);
  --surface-code-block: #f9f9f7;
  --border-code-block: #e3e3e0;
  --border-code-block-header: #ececea;
  --text-code-block-muted: #8a8a85;
  --text-code-block-body: #2a2a28;
  --scrollbar-code-block: #d4d3cf;
  --surface-inline-code-markup: #f6f7f8;
  --border-inline-code-markup: rgba(0, 0, 0, 0.1);
  --text-inline-code-markup: #1f2328;
  --border-blockquote: #d7dce3;
  --surface-blockquote: #f7f8fa;
  --text-blockquote: #343a42;
  /* pre / HCB / core code block を一系統（ライト・ネオブルータリズム）へ統一 */
  --surface-pre: var(--surface-code-block);
  --text-pre: var(--text-code-block-body);
  --surface-inline-code-article: #f6f7f8;
  --text-code-block-dark-caption: var(--text-code-block-muted);
  --surface-code-block-dark-header: var(--border-code-block-header);
  --border-code-block-dark-header: var(--border-blogcard-accent);
  --scrollbar-pre-thumb: var(--scrollbar-code-block);
  --text-article-title: #161b22;
  --border-blogcard-line: #d0d0d0;
  --border-blogcard-line-soft: #e5e5e5;
  --surface-blogcard-soft: #f4f4f4;
  --surface-blogcard-tint: #fafafa;
  --nettoge-floating-heading-top: calc(var(--swl-adminbarH, 0px) + var(--swl-fix_headerH, 0px));
  --nettoge-floating-heading-height: 0px;
  --nettoge-bgm-sticky-top: var(--nettoge-floating-heading-top);
  --surface-header: var(--nettoge-page-bg);
  --surface-footer: var(--nettoge-page-bg);
  --nettoge-logo-illust-color: var(--color_main, #bf1313);
  --nettoge-header-min-height: 118px;
  --nettoge-header-min-height-desktop: 132px;
  --nettoge-header-padding: 4px 12px;
  --nettoge-header-padding-desktop: 6px 16px;
  --nettoge-fixed-header-min-height: 44px;
  --surface-widget-title: var(--nettoge-page-bg);
  --surface-widget: #ffffff;
  --text-on-accent: #fff;
  --brand-terracotta: #6b6b6b;
  --brand-terracotta-dark: #4f4f4f;
  --surface-toc-active: #ececec;
  --toc-active-text: #404040;
  --surface-comment-panel: var(--nettoge-page-bg);
  --surface-comment-input: #ffffff;
  --surface-comment-toolbar: #f2f2f2;
  --surface-comment-popover: #f6f6f6;
  --overlay-postlist-thumb: rgba(0, 0, 0, 0.5);
  --nettoge-manual-ad-min-height: 250px;
  --nettoge-infeed-ad-min-height: 280px;
  --nettoge-ad-placeholder-image: url("../../assets/img/ad-placeholder.svg");
  --border-comment: var(--nettoge-border-warm);
  --text-comment-muted: #6b7280;
  --text-comment-author-regular: #166534;
  --text-comment-author-admin: #b91c1c;
  --surface-inline-code-bg: #f6f7f8;
  --text-inline-code: #1f2328;
  --border-form-input: #c8c4bc;
  --text-form-placeholder: #a8a39d;
  --surface-form-error: #fff8f7;
  --border-form-error: #b91c1c;
  --text-form-error: #b91c1c;
  --surface-form-disabled: var(--nettoge-page-bg);
  --border-form-disabled: var(--nettoge-border-warm);
  --text-form-disabled: #a8a39d;
  --scrollbar-track: var(--nettoge-page-bg);
  --scrollbar-thumb: #c8c4bc;
  --scrollbar-thumb-hover: #6b6b6b;
  --toc-subtext: #6b6560;
  --surface-blogcard: #ffffff;
  --border-blogcard: #e0ddd6;
  --border-blogcard-accent: #1a1a1a;
  --border-blogcard-hover: var(--color_main);
  --blogcard-external-domain: #a8a39d;
  --blogcard-badge-bg: var(--nettoge-page-bg);
  --nettoge-file-thumb-ink: #1c1c1c;
  --nettoge-file-thumb-icon-filter: none;
  --nettoge-file-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M4 2h10l6 6v20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z' stroke='%231c1c1c' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M14 2v6h6' stroke='%231c1c1c' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8 14h8M8 18h6' stroke='%231c1c1c' stroke-width='1.25' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E");
  --nettoge-file-card-bg: var(--surface-blogcard);
  --nettoge-file-card-border: var(--border-blogcard-accent);
  --nettoge-file-card-line: var(--border-blogcard-line);
  --nettoge-file-card-body: var(--text-blogcard-body);
  --nettoge-file-card-thumb-base: var(--surface-code-block);
  --nettoge-file-card-thumb-pattern: var(--surface-blogcard-pattern-dot);
  --nettoge-file-card-thumb-stripe-a: #f7f5f1;
  --nettoge-file-card-thumb-stripe-b: #ece8e1;
  /* SWELL marker — Customizer が swell_custom で上書き。ダークは html[data-nettoge-theme="dark"] で差し替え */
  --color_mark_blue: #b7e3ff;
  --color_mark_green: #bdf9c3;
  --color_mark_yellow: #fcf69f;
  --color_mark_orange: #ffddbc;

  /* HCB (Highlighting Code Block) — light bridge */
  --hcb--c: var(--text-code-block-body, #2a2a28);
  --hcb--bgc: var(--surface-code-block, #f9f9f7);
  --hcb--tsh: none;
  --hcb--data-label--c: var(--text-code-block-muted, #8a8a85);
  --hcb--data-label--bgc: var(--border-code-block-header, #ececea);
  --hcb--line-numbers--c: var(--text-code-block-muted, #8a8a85);
  --hcb--highlight-color: color-mix(in srgb, var(--color_main) 10%, transparent);
  --hcb--scbar-track--bgc: color-mix(in srgb, var(--color_text) 8%, transparent);
  --hcb--scbar-thumb--bgc: color-mix(in srgb, var(--color_text) 22%, transparent);
  --hcb-syntax-comment: var(--syntax-comment);
  --hcb-syntax-punctuation: var(--syntax-punctuation);
  --hcb-syntax-property: var(--syntax-property);
  --hcb-syntax-number: var(--syntax-keyword);
  --hcb-syntax-selector: var(--syntax-string);
  --hcb-syntax-neutral: var(--text-code-block-body);
  --hcb-syntax-string: var(--syntax-string);
  --hcb-syntax-function: var(--syntax-function);
  --hcb-syntax-keyword: var(--syntax-keyword);
  --hcb-syntax-regex: var(--syntax-property);
  --hcb-syntax-delimiter: var(--syntax-function);

  /* App Buttons Layout */
  --columns: 1fr;
  --gap: 1.5rem;

  /* Table override (table-override.css) */
  --swl-table-modern-header-bg: #111111;
  --swl-table-modern-header-text: #ffffff;
  --swl-table-modern-cell-bg: #ffffff;
  --swl-table-modern-cell-text: #222222;
  --swl-table-modern-row-border: rgba(17, 17, 17, 0.14);
  --swl-table-modern-column-border: rgba(17, 17, 17, 0.14);
  --swl-table-modern-hover-bg: #f8f8f8;
  --swl-table-modern-bottom-border: rgba(17, 17, 17, 0.22);
  --swl-table-modern-font-size: 0.875rem;
  --swl-table-modern-header-font-size: 0.75rem;
  --swl-table-modern-cell-pad-y: 0.7em;
  --swl-table-modern-cell-pad-x: 0.95em;
  --swl-table-modern-header-pad-y: 0.75em;

  /* Phase 12 — chrome tokens (light) */
  --surface-header-control: var(--surface-widget, var(--nettoge-page-bg));
  --surface-header-control-active: #f3f3f3;
  --surface-theme-toggle-thumb: var(--surface-header-control-active);
  --shadow-theme-toggle-thumb: 0 1px 2px rgba(0, 0, 0, 0.08);
  --surface-gnav-submenu: var(--surface-widget, #ffffff);
  --surface-gnav-submenu-hover: var(--surface-header-control-active);
  --surface-sp-menu-overlay: rgba(0, 0, 0, 0.35);
  --surface-sp-menu-header: rgba(0, 0, 0, 0.025);
  --surface-sp-menu-hover: rgba(0, 0, 0, 0.02);
  --surface-sp-menu-nested: rgba(0, 0, 0, 0.02);
  --surface-sp-menu-divider: rgba(0, 0, 0, 0.04);
  --surface-sp-menu-sub-active: rgba(0, 0, 0, 0.05);
  --border-sp-menu: rgba(0, 0, 0, 0.2);
  --text-sp-menu-muted: rgba(0, 0, 0, 0.4);
  --text-sp-menu-secondary: rgba(0, 0, 0, 0.55);
  --text-sp-menu-desc: rgba(0, 0, 0, 0.6);
  --text-sp-menu-emphasis: rgba(0, 0, 0, 0.78);
  --text-sp-menu-faint: rgba(0, 0, 0, 0.3);
  --surface-sidebar-row-hover: rgba(0, 0, 0, 0.02);
  --nettoge-sidebar-row-hover-bar: rgba(10, 10, 10, 0.86);
  --nettoge-toc-tree-color: rgba(0, 0, 0, 0.24);
  --nettoge-sidebar-text-muted: rgba(0, 0, 0, 0.62);
  --nettoge-sidebar-text-secondary: rgba(0, 0, 0, 0.66);
  --nettoge-sidebar-text-strong: rgba(0, 0, 0, 0.7);
  --nettoge-sidebar-text-faint: rgba(0, 0, 0, 0.35);
  --nettoge-sidebar-text-body: rgba(0, 0, 0, 0.65);
  --surface-ad-loading: rgba(17, 17, 17, 0.04);
  --shadow-sidebar-popover: rgba(0, 0, 0, 0.1);
  --shadow-sidebar-keycap: rgba(0, 0, 0, 0.08);
  --surface-mobile-toc-panel: var(--nettoge-page-bg);
  --border-mobile-toc: rgba(17, 17, 17, 0.88);

  /* Parchment component palette: presentation remains in parchment-nettoge.css. */
  --nettoge-parchment-bg: #f0e3be;
  --nettoge-parchment-ink: #111;
  --nettoge-parchment-ink-muted: #2f2f2f;
  --nettoge-parchment-ink-faint: #4a4a4a;
  --nettoge-parchment-heading: #111;
  --nettoge-parchment-strong: #111;
  --nettoge-parchment-accent: #8a5a1a;
  --nettoge-parchment-link: #6b3810;
  --nettoge-parchment-border01: #7a430d;
  --nettoge-parchment-border02: #5f2d04;
  --nettoge-parchment-border03: rgba(70, 49, 22, .48);
  --nettoge-parchment-border04: rgba(122, 67, 13, .32);
  --nettoge-parchment-border05: #2f2f2f;
  --nettoge-parchment-body-font: var(--font-body, "Noto Sans JP", Meiryo, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif);
  --nettoge-parchment-heading-font: var(--font-heading, var(--font-serif, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif));
  --nettoge-parchment-body-weight: var(--jp-font-weight, var(--swl-font_weight, 400));
  --nettoge-parchment-strong-weight: 700;
  --nettoge-parchment-letter-spacing: .005em;
  --nettoge-parchment-image: url("../../assets/img/Papier.webp");
  --nettoge-parchment-shadow:
      inset 0 0 36px rgba(122, 67, 13, .08),
      0 2px 8px rgba(73, 46, 12, .08);
  --nettoge-parchment-edge-color: #6f3b0a;
  --nettoge-parchment-edge-opacity: .24;
  --nettoge-parchment-vignette-color: #4b2203;
  --nettoge-parchment-vignette-opacity: .14;
}

/* Phase 12 — dark semantic tokens (Customizer overrides --color_* via nettoge-theme-vars) */
html[data-nettoge-theme="dark"] {
  /* Parchment dark palette. */
  --nettoge-parchment-bg: #2b2117;
  --nettoge-parchment-ink: #e0d3b8;
  --nettoge-parchment-ink-muted: #cbbb9f;
  --nettoge-parchment-ink-faint: #a7987d;
  --nettoge-parchment-heading: #ecddb3;
  --nettoge-parchment-strong: var(--nettoge-parchment-ink);
  --nettoge-parchment-accent: #d4af5a;
  --nettoge-parchment-link: #f2e2b8;
  --nettoge-parchment-border01: #d4af5a;
  --nettoge-parchment-border02: rgba(212, 175, 90, .74);
  --nettoge-parchment-border03: rgba(230, 220, 194, .36);
  --nettoge-parchment-border04: rgba(212, 175, 90, .24);
  --nettoge-parchment-border05: #d4af5a;
  --nettoge-parchment-image: url("../../assets/img/Papier-dark.webp");
  --nettoge-parchment-shadow:
      inset 0 0 80px rgba(0, 0, 0, .28),
      0 10px 28px rgba(0, 0, 0, .34);
  --nettoge-parchment-edge-color: #000;
  --nettoge-parchment-edge-opacity: .18;
  --nettoge-parchment-vignette-color: #000;
  --nettoge-parchment-vignette-opacity: .12;
  --nettoge-parchment-body-weight: var(--jp-font-weight, var(--swl-font_weight, 400));
  --nettoge-parchment-strong-weight: 800;
  --nettoge-parchment-letter-spacing: .01em;
  --w7-bl-bg-top: #2d2d30;
  --w7-el-bg-s-1: #353535;
  --w7-bl-bd: rgba(255, 255, 255, .14);
  --w7-bl-shadow: 5px 5px 3px -3px rgba(0, 0, 0, .55);
  --w7-balloon-tail-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%232d2d30' stroke='%232d2d30'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%235a5a5a'/%3E%3C/svg%3E");
  --w7-balloon-tail-top-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23353535' stroke='%23454545'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%235a5a5a'/%3E%3C/svg%3E");
  --shiny-overlay-before: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35) 80%, transparent);
  --shiny-overlay-after: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45));
  color-scheme: dark;
  --swl-font_weight: 300;
  --jp-font-weight: 300;
  --swl-color_hov_gray: rgba(255, 255, 255, 0.06);
  /* --color_htag / --color_main_* / mark_* は nettoge-theme-vars（Customizer ダーク色）が上書き */
  --nettoge-page-bg: var(--color_bg, #1e1e1e);
  --color_content_bg: var(--surface-widget);
  --nettoge-border-hairline: rgba(255, 255, 255, 0.08);
  --nettoge-border-muted: #3e3e42;
  --nettoge-border-warm: #454545;
  --nettoge-border-strong: rgba(255, 255, 255, 0.18);
  --nettoge-border-input: rgba(255, 255, 255, 0.28);
  --nettoge-border-button: rgba(255, 255, 255, 0.32);
  --surface-widget: #2d2d30;
  --surface-header: var(--color_header_bg, #252526);
  --surface-footer: var(--color_footer_bg, var(--nettoge-page-bg));
  --nettoge-logo-illust-color: #fff;
  --surface-widget-title: var(--surface-widget);
  --surface-header-control: var(--surface-widget);
  --surface-header-control-active: #3e3e42;
  --surface-theme-toggle-thumb: var(--surface-widget);
  --shadow-theme-toggle-thumb: 0 1px 3px rgba(0, 0, 0, 0.35);
  --surface-gnav-submenu: #2d2d30;
  --surface-gnav-submenu-hover: #3e3e42;
  --surface-header-input: var(--surface-widget);
  --surface-sp-menu: var(--color_header_bg, #252526);
  --surface-sp-menu-overlay: rgba(0, 0, 0, 0.55);
  --surface-sp-menu-header: rgba(255, 255, 255, 0.04);
  --surface-sp-menu-hover: rgba(255, 255, 255, 0.05);
  --surface-sp-menu-nested: rgba(255, 255, 255, 0.04);
  --surface-sp-menu-divider: rgba(255, 255, 255, 0.08);
  --surface-sp-menu-sub-active: rgba(255, 255, 255, 0.08);
  --surface-main-content: var(--surface-widget);
  --border-sp-menu: rgba(255, 255, 255, 0.14);
  --text-sp-menu-muted: rgba(255, 255, 255, 0.55);
  --text-sp-menu-secondary: rgba(255, 255, 255, 0.55);
  --text-sp-menu-desc: rgba(255, 255, 255, 0.55);
  --text-sp-menu-emphasis: rgba(255, 255, 255, 0.85);
  --text-sp-menu-faint: rgba(255, 255, 255, 0.35);
  --surface-sidebar-row-hover: rgba(255, 255, 255, 0.05);
  --nettoge-sidebar-row-hover-bar: rgba(255, 255, 255, 0.72);
  --nettoge-toc-tree-color: rgba(255, 255, 255, 0.26);
  --nettoge-sidebar-text-muted: rgba(255, 255, 255, 0.55);
  --nettoge-sidebar-text-secondary: rgba(255, 255, 255, 0.5);
  --nettoge-sidebar-text-strong: rgba(255, 255, 255, 0.78);
  --nettoge-sidebar-text-faint: rgba(255, 255, 255, 0.38);
  --nettoge-sidebar-text-body: rgba(255, 255, 255, 0.72);
  --surface-ad-loading: rgba(255, 255, 255, 0.05);
  --shadow-sidebar-popover: rgba(0, 0, 0, 0.35);
  --shadow-sidebar-keycap: rgba(0, 0, 0, 0.25);
  --surface-mobile-toc-panel: var(--surface-widget);
  --border-mobile-toc: rgba(255, 255, 255, 0.22);
  --surface-control: var(--surface-widget);
  --text-on-accent: #fff;
  /* --color-step / --color_list_check|num / mark_* → nettoge-theme-vars（Customizer ダーク色） */
  --state-info: #60a5fa;
  --state-warning: #fbbf24;
  --state-success: #4ade80;
  --state-danger: #f87171;
  --color-reason: var(--state-info);
  --color-warn: var(--state-warning);
  --color-tip: #38bdf8;
  --color-success: var(--state-success);
  --text-tab-active: var(--color_bg, #1e1e1e);
  --border-tab-simple: var(--nettoge-border-muted);
  --surface-tab-simple-hover: var(--surface-toc-active);
  --text-tab-simple: var(--text-comment-muted);
  --text-tab-simple-active: var(--color_text);
  --surface-tab-body-border: var(--nettoge-border-muted);
  --surface-callout-box: var(--surface-widget);
  --text-callout-box: var(--color_text);
  --surface-note-box: var(--surface-widget);
  --text-note-box: var(--color_text);
  --border-note-box-dash: var(--nettoge-border-muted);
  --surface-crease-box: var(--surface-widget);
  --surface-dent-box: rgba(255, 255, 255, 0.04);
  --surface-faq-stripe: var(--surface-widget);
  --surface-balloon-inline-bg: var(--text-accent-prose);
  --text-balloon-inline: var(--color_bg, #1e1e1e);
  --border-step-arrow: var(--nettoge-border-muted);
  --surface-browser-frame: #454545;
  --color_border: var(--nettoge-border-muted);
  --color_gray: rgba(255, 255, 255, 0.06);
  --border-swell-box: var(--nettoge-border-warm);
  --border-balloon-circle: var(--nettoge-border-warm);
  --surface-accordion-title: var(--surface-widget);
  --surface-capbox-content: var(--surface-widget);
  --text-capbox-content: var(--color_text);
  --surface-more-btn: var(--surface-widget);
  --border-more-btn: var(--nettoge-border-muted);
  --text-more-btn: var(--text-comment-muted);
  --surface-review-card: var(--surface-widget);
  --border-review-card: var(--nettoge-border-muted);
  --surface-review-rating-bg: var(--surface-widget);
  --text-review-muted: var(--text-comment-muted);
  --border-box-menu: var(--nettoge-border-muted);
  --shadow-btn-normal-hover: 0 4px 12px rgba(0, 0, 0, 0.35), 0 12px 24px -12px rgba(0, 0, 0, 0.45);
  --shadow-btn-solid: 0 4px 0 color-mix(in srgb, var(--color_main) 55%, #000);
  --color_list_good: #7bc47a;
  --color_list_bad: #d97979;
  --color_list_triangle: #c9b84a;
  --color_icon_good: #7bc47a;
  --color_icon_good_bg: color-mix(in srgb, #3cd250 14%, var(--surface-widget));
  --color_icon_bad: #e07070;
  --color_icon_bad_bg: color-mix(in srgb, #f36060 14%, var(--surface-widget));
  --color_icon_info: #d97979;
  --color_icon_info_bg: color-mix(in srgb, #c44a3a 12%, var(--surface-widget));
  --color_icon_announce: #e8b56a;
  --color_icon_announce_bg: color-mix(in srgb, #ffa537 14%, var(--surface-widget));
  --color_icon_pen: #b3b3b3;
  --color_icon_pen_bg: var(--surface-widget);
  --color_icon_book: #a39e8f;
  --color_icon_book_bg: color-mix(in srgb, #787364 14%, var(--surface-widget));
  --color_icon_point: #e8b56a;
  --color_icon_check: #7bc47a;
  --color_icon_batsu: #e07070;
  --color_icon_hatena: #7eb3e0;
  --color_icon_caution: #ddd050;
  --color_icon_memo: #a3a3a3;
  --color-reason-bg: #1e252e;
  --color-warn-bg: #2a2618;
  --color-tip-bg: #1a2830;
  --color-success-bg: #1a2a22;
  --border-table-header-divider: #5a5a5a;
  --surface-floating-header: var(--color_header_bg, #252526);
  --border-floating-badge: rgba(255, 255, 255, 0.18);
  --shadow-floating-header: 0 22px 42px -28px rgba(0, 0, 0, 0.72), 0 8px 22px rgba(0, 0, 0, 0.26);
  --text-floating-heading-primary: var(--color_text, #cccccc);
  --text-floating-heading-secondary: #a3a3a3;
  --text-floating-badge: #9ca3af;
  --surface-floating-hover: rgba(255, 255, 255, 0.05);
  --surface-fixed-header-glass: var(--surface-widget, #252526); /* 不透明化(透明フロスト停止)。--color_header_bg はカスタマイザーで半透明のため不透明トークンを使う。ON時: color-mix(in srgb, var(--color_header_bg, #252526) 78%, transparent) */
  --border-fixed-header-glass: rgba(255, 255, 255, 0.12);
  --surface-fixed-header-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
  --surface-fixed-header-refract:
    radial-gradient(130% 170% at 0% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 18%, transparent 36%),
    radial-gradient(110% 140% at 100% 0%, rgba(125, 200, 255, 0.08) 0%, transparent 32%),
    radial-gradient(120% 140% at 52% 120%, rgba(255, 196, 168, 0.06) 0%, transparent 34%);
  --shadow-fixed-header-glass: 0 20px 38px -28px rgba(0, 0, 0, 0.8), 0 8px 18px rgba(0, 0, 0, 0.3);
  --nettoge-heading-sub: #a3a3a3;
  --nettoge-heading-muted: #9ca3af;
  --text-lead: var(--color_text, #cccccc);
  --surface-lead: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  --surface-alert-warning: #3a3428;
  --text-alert-warning: #f5f0e6;
  --border-alert-stripe-dark: #252526;
  --shadow-alert-warning: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-alert-icon: 0 2px 2px rgba(0, 0, 0, 0.35);
  --surface-focus-box: #2d2d30;
  --border-focus-box: #858585;
  --text-focus-box-title: #cccccc;
  --text-focus-box-body: #b3b3b3;
  --text-blogcard-muted: #9ca3af;
  --text-blogcard-body: var(--color_text, #cccccc);
  --surface-blogcard-caption: var(--surface-blogcard);
  --surface-blogcard-pattern-dot: #5a5a5a;
  --shadow-blogcard: 4px 4px 0 rgba(0, 0, 0, 0.35);
  --shadow-blogcard-hover: 5px 5px 0 rgba(0, 0, 0, 0.45);
  --shadow-blogcard-lift: 0 4px 16px rgba(0, 0, 0, 0.35), 0 12px 28px -12px rgba(0, 0, 0, 0.2);
  --surface-code-block: #252526;
  --border-code-block: #454545;
  --border-code-block-header: #3e3e42;
  --text-code-block-muted: #9ca3af;
  --text-code-block-body: #cccccc;
  --scrollbar-code-block: #5a5a5a;
  --surface-pre: var(--surface-code-block);
  --text-pre: var(--text-code-block-body);
  --scrollbar-pre-thumb: var(--scrollbar-code-block);
  /* --text-accent-prose / --text-deep-prose → nettoge-theme-vars */
  --surface-inline-code-markup: #30343a;
  --border-inline-code-markup: rgba(255, 255, 255, 0.16);
  --text-inline-code-markup: #eef2f6;
  --border-blockquote: #454545;
  --surface-blockquote: #252526;
  --text-blockquote: #b3b3b3;
  --surface-inline-code-article: #30343a;
  --text-article-title: var(--color_text, #cccccc);
  --border-blogcard-line: #454545;
  --border-blogcard-line-soft: #3e3e42;
  --surface-blogcard-soft: #2d2d30;
  --surface-blogcard-tint: #252526;
  --surface-toc-active: #3e3e42;
  --toc-active-text: #cccccc;
  --surface-comment-panel: var(--surface-widget);
  --surface-comment-input: #2d2d30;
  --surface-comment-toolbar: #252526;
  --surface-comment-popover: #2d2d30;
  --text-comment-muted: #9ca3af;
  --text-comment-author-regular: #86efac;
  --text-comment-author-admin: #f87171;
  --surface-inline-code-bg: #30343a;
  --text-inline-code: #eef2f6;
  --border-form-input: #5a5a5a;
  --overlay-postlist-thumb: rgba(0, 0, 0, 0.65); /* Phase 12-P */
  --text-form-placeholder: #858585;
  --surface-form-error: #3a2828;
  --surface-form-disabled: #252526;
  --text-form-disabled: #858585;
  --scrollbar-track: var(--nettoge-page-bg);
  --scrollbar-thumb: #5a5a5a;
  --scrollbar-thumb-hover: #858585;
  --toc-subtext: #9ca3af;
  --surface-blogcard: var(--surface-widget);
  --border-blogcard: var(--nettoge-border-warm);
  --border-blogcard-accent: var(--color_text, #cccccc);
  --border-blogcard-hover: var(--color_main, var(--color-step));
  --blogcard-external-domain: #858585;
  --blogcard-badge-bg: var(--surface-widget);
  --nettoge-file-thumb-ink: rgba(255, 255, 255, 0.92);
  --nettoge-file-thumb-icon-filter: none;
  --nettoge-file-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M4 2h10l6 6v20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z' stroke='%23f2f2f2' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M14 2v6h6' stroke='%23f2f2f2' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8 14h8M8 18h6' stroke='%23f2f2f2' stroke-width='1.25' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E");
  --nettoge-file-card-bg: var(--surface-widget);
  --nettoge-file-card-border: var(--border-blogcard-accent);
  --nettoge-file-card-line: var(--border-blogcard-line);
  --nettoge-file-card-body: var(--text-blogcard-body);
  --nettoge-file-card-thumb-base: var(--surface-code-block);
  --nettoge-file-card-thumb-pattern: var(--surface-blogcard-pattern-dot);
  --nettoge-file-card-thumb-stripe-a: #2a2b2f;
  --nettoge-file-card-thumb-stripe-b: #323438;
  --hcb--c: var(--text-code-block-body);
  --hcb--bgc: var(--surface-code-block);
  --hcb--tsh: none;
  --hcb--data-label--c: var(--text-code-block-dark-caption, #b8c0cc);
  --hcb--data-label--bgc: var(--surface-code-block-dark-header, rgba(255, 255, 255, 0.04));
  --hcb--line-numbers--c: #a3a3a3;
  --hcb--highlight-color: rgba(255, 255, 255, 0.08);
  --hcb--scbar-track--bgc: rgba(255, 255, 255, 0.1);
  --hcb--scbar-thumb--bgc: rgba(255, 255, 255, 0.2);
  --swl-table-modern-header-bg: #3e3e42;
  --swl-table-modern-header-text: var(--color_text, #cccccc);
  --swl-table-modern-cell-bg: var(--surface-widget);
  --swl-table-modern-cell-text: var(--color_text, #cccccc);
  --swl-table-modern-row-border: rgba(255, 255, 255, 0.14);
  --swl-table-modern-column-border: rgba(255, 255, 255, 0.14);
  --swl-table-modern-hover-bg: #353535;
  --swl-table-modern-bottom-border: rgba(255, 255, 255, 0.22);
  --brand-terracotta: #a3a3a3;
  --brand-terracotta-dark: #8a8a8a;
  /* シンプル・モノクロ方針（ダーク）：コメントのみ控えめ、他は本文色 */
  --syntax-comment: #9ca3af;
  --syntax-keyword: var(--text-code-block-body, #cccccc);
  --syntax-property: var(--text-code-block-body, #cccccc);
  --syntax-string: var(--text-code-block-body, #cccccc);
  --syntax-function: var(--text-code-block-body, #cccccc);
  --syntax-punctuation: var(--text-code-block-body, #cccccc);
  --hcb-syntax-comment: var(--syntax-comment);
  --hcb-syntax-punctuation: var(--syntax-punctuation);
  --hcb-syntax-property: var(--syntax-property);
  --hcb-syntax-number: var(--text-code-block-body);
  --hcb-syntax-selector: var(--text-code-block-body);
  --hcb-syntax-neutral: var(--text-code-block-body);
  --hcb-syntax-string: var(--syntax-string);
  --hcb-syntax-function: var(--syntax-function);
  --hcb-syntax-keyword: var(--syntax-keyword);
  --hcb-syntax-regex: var(--text-code-block-body);
  --hcb-syntax-delimiter: var(--text-code-block-body);
}

@media (max-width: 599px) {
  :root {
    --nettoge-manual-ad-min-height: 280px;
    --nettoge-infeed-ad-min-height: 280px;
  }
}