@charset "utf-8";

/*
  Lumen 1.1.0 — てがろぐスキン（個人用）
  設計: 誰かの日誌を、時間の順で開く。
  書く面は「場」であり枠ではない。日付が骨格。道具は脇。
  個人用: 操作はアイコン（マスクSVG）、アクセントは控えめなネオン、著者UIは出さない。

  情報の優先順位:
    1. 読む文章（タイトル／本文）
    2. 行き先の手がかり（題名・ドメイン・画像）
    3. 装飾は付けない

  画像の見せ方（「形の慣習」ではなく目的で決める）:
    本文中 …… 内容そのもの。自然な縦横比のまま
    埋め込みリンク（CGI の S/L）:
      S …… 参照。題名が主＋横の短い手がかり（横並びのまま）
      L …… 提示。作者が L を選んだ＝絵を本文幅で渡す
             OGP 比＋ contain。高さ制限で幅を縮め横空白を作らない
             （横空白は読みやすさに寄与せず、提示を弱めるだけだった）
      塗り・影の広告カードにしない。左線は引用と同じ「他人の声」
    サイド …… 補足。contain＋高さ上限
    ギャラリー …… 見比べ。4:3＋ cover
    アイコン／ピッカー …… 識別用の定形＋ cover

  余白の意味:
    本文まわり …… 読む息継ぎ
    埋め込み S …… 段落程度
    埋め込み L …… 本文幅を使う。枠内の帯は元画像が OGP 比でないときだけ
    装飾のための余白・塗りは置かない

  文字設計（一つの声。差はサイズ・太さ・色で付ける）:
    書体は端末ゴシックに統一。タイトルだけ明朝は「特別感」になりやすく、
    位置と大きさで既に区別できる名前に、第二の書体は不要だった。
    外部 Web フォントは使わない。
    サイズ:
      fs-md …… 読む本文の基準
      fs-sm …… 道具・メタ・ナビ
      fs-xs / status …… 注記・状態
      サイト名 …… ナビより大きく・やや太く（書体は変えず階層だけ）
    太さ: 400 本文 / 500–600 強調と UI / 700 は主ボタンと状態のみ

  情報の出し方（個人利用）:
    サイト名 …… 誰の日誌か（ヘッダで足りる）
    日付・本文 …… 読む本体
    投稿者名／アイコン／投稿者パネル …… 出さない（一人利用前提）
    管理・編集・字数 …… ログイン中だけ
    「表示できるから出す」はしない

  操作の置き場（同じ機能を上下に重ねない）:
    明るさ …… 広い画面はヘッダのみ／狭い画面は下ドックのみ
      （両方出すのは「念のため」であり、迷いとノイズになる）
    探す …… 広い画面はサイド／狭い画面はドック→シート（本文中の重複リンクは置かない）
    上へ …… 広い画面は右下／狭い画面はドック内（浮遊ボタンとドックを併用しない）
    一覧へ …… 個別ページ先頭の文脈リンク＋狭い画面ドック（スクロール後用）。役割が違う

  サイドバー:
    どのブロックも同じ details.panel
    探す …… 道具。必要なとき開く
    フリースペース …… 題名はヘッダ about と同じ「はじめに」（FREESPTITLE は使わない）
    投稿者 …… 2人以上のときだけ

  状態ラベル（新着・固定・下書き）:
    同じ行の文字と「ひと続きの情報」として読む（装飾バッジにしない）
    入れ子 flex や font-size:0 で文字を消すと baseline が壊れ、下ズレして見える
    新着 …… 時刻メタと同じ行（鮮度）
    固定・下書き …… 投稿全体の状態。本文の前に同じ型で置く（隅の絶対配置にしない）
*/

@layer tokens, base, layout, components, cgi, states;
@layer tokens {
	:root {
		color-scheme: light dark;

		/*
		  アクセント: 控えめなネオン感。
		  情報を引き立てる光として使い、塗りつぶしや装飾の多用はしない。
		*/
		--lumen-accent: #6e5aa0;
		--lumen-accent-hover: #574788;
		--lumen-accent-soft: color-mix(in srgb, var(--lumen-accent) 8%, transparent);
		--lumen-accent-glow: color-mix(in srgb, var(--lumen-accent) 28%, transparent);
		--lumen-on-accent: #ffffff;
		--lumen-warm: #8a7040;
		--lumen-danger: #b42318;

		/* 地（机）と表（日誌の面）。枠線で「紙」を装わない */
		--lumen-bg: #e4e6ea;
		--lumen-surface: #fbfbfc;
		--lumen-surface-2: #f0f2f4;
		--lumen-ink: #1a1d21;
		--lumen-ink-soft: #3d4650;
		--lumen-muted: #5c6570;
		--lumen-faint: #6a7380;
		--lumen-line: #c8ced6;
		--lumen-line-strong: #a8b1bc;
		--lumen-sheet-pad-x: clamp(1.25rem, 3.2vw, 2.35rem);
		--lumen-sheet-pad-y: clamp(1.5rem, 3.4vw, 2.6rem);

		/* 書体: ゴシック／明朝を切替（外部Webフォントなし・端末書体） */
		--lumen-font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
		--lumen-font-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "MS PMincho", "MS Mincho", "Noto Serif JP", "Hiragino Sans", serif;
		--lumen-font: var(--lumen-font-sans);
		--lumen-font-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;

		--lumen-fs-xs: 0.75rem;
		--lumen-fs-sm: 0.875rem;
		--lumen-fs-md: 1.0625rem;
		--lumen-fs-xl: 1.375rem;
		--lumen-lh-tight: 1.35;
		--lumen-lh-body: 1.88;

		--lumen-space-2: 0.5rem;
		--lumen-space-3: 0.75rem;
		--lumen-space-4: 1rem;
		--lumen-space-5: 1.5rem;
		--lumen-space-6: 2rem;
		--lumen-space-7: 3rem;
		--lumen-radius-sm: 0.2rem;
		--lumen-radius-md: 0.3rem;
		--lumen-radius-lg: 0.4rem;

		--lumen-sidebar-w: 18.5rem;
		--lumen-content-max: 72rem;
		--lumen-read-max: 40rem;
		/*
		  s-h …… 参照サムネの高さ（題名と並ぶ手がかり）
		  og-ratio …… L は本文幅×この比で高さを決める（幅を縮めて横空白を作らない）
		*/
		--lumen-embed-og-ratio: 1.91;
		--lumen-embed-s-h: 4.25rem;
		/* 状態ラベル。本文より一段小さく、同じ文字として並ぶ */
		--lumen-status-fs: 0.68rem;
		--lumen-status-lh: 1.2;
		--lumen-status-tracking: 0.04em;
		--lumen-page-gutter: clamp(1.05rem, 3.2vw, 1.85rem);
		--lumen-page-stack: clamp(1.25rem, 2.4vw, 2.25rem);
		--lumen-touch-min: 2.5rem;

		--lumen-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
		--lumen-duration: 160ms;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--lumen-accent: #b4a0e6;
			--lumen-accent-hover: #c9b8f0;
			--lumen-accent-soft: color-mix(in srgb, var(--lumen-accent) 10%, transparent);
			--lumen-accent-glow: color-mix(in srgb, var(--lumen-accent) 32%, transparent);
			--lumen-on-accent: #0e1216;
			--lumen-warm: #c9a85a;
			--lumen-danger: #f97066;
			--lumen-bg: #0c1014;
			--lumen-surface: #151a20;
			--lumen-surface-2: #1c232a;
			--lumen-ink: #e8edf2;
			--lumen-ink-soft: #c5ced6;
			--lumen-muted: #97a2ad;
			--lumen-faint: #87919c;
			--lumen-line: #2c343c;
			--lumen-line-strong: #3d4752;
		}
	}

	/*
	  手動テーマ。
	  ライト／ダークの色値は :root と prefers-color-scheme と揃えること（片方だけ変えない）。
	*/
	html:has(#theme-light:checked),
	html[data-theme="light"] {
		color-scheme: light;
		--lumen-accent: #6e5aa0;
		--lumen-accent-hover: #574788;
		--lumen-accent-soft: color-mix(in srgb, var(--lumen-accent) 8%, transparent);
		--lumen-accent-glow: color-mix(in srgb, var(--lumen-accent) 28%, transparent);
		--lumen-on-accent: #ffffff;
		--lumen-warm: #8a7040;
		--lumen-danger: #b42318;
		--lumen-bg: #e4e6ea;
		--lumen-surface: #fbfbfc;
		--lumen-surface-2: #f0f2f4;
		--lumen-ink: #1a1d21;
		--lumen-ink-soft: #3d4650;
		--lumen-muted: #5c6570;
		--lumen-faint: #6a7380;
		--lumen-line: #c8ced6;
		--lumen-line-strong: #a8b1bc;
	}

	html:has(#theme-dark:checked),
	html[data-theme="dark"] {
		color-scheme: dark;
		--lumen-accent: #b4a0e6;
		--lumen-accent-hover: #c9b8f0;
		--lumen-accent-soft: color-mix(in srgb, var(--lumen-accent) 10%, transparent);
		--lumen-accent-glow: color-mix(in srgb, var(--lumen-accent) 32%, transparent);
		--lumen-on-accent: #0e1216;
		--lumen-warm: #c9a85a;
		--lumen-danger: #f97066;
		--lumen-bg: #0c1014;
		--lumen-surface: #151a20;
		--lumen-surface-2: #1c232a;
		--lumen-ink: #e8edf2;
		--lumen-ink-soft: #c5ced6;
		--lumen-muted: #97a2ad;
		--lumen-faint: #87919c;
		--lumen-line: #2c343c;
		--lumen-line-strong: #3d4752;
	}
	/* 書体切替（data-font を後に置き、初期ラジオと食い違ってもフラッシュしない） */
	html:has(#font-serif:checked) {
		--lumen-font: var(--lumen-font-serif);
		--lumen-lh-body: 1.95;
	}
	html:has(#font-sans:checked) {
		--lumen-font: var(--lumen-font-sans);
	}
	html[data-font="serif"] {
		--lumen-font: var(--lumen-font-serif);
		--lumen-lh-body: 1.95;
	}
	html[data-font="sans"] {
		--lumen-font: var(--lumen-font-sans);
		--lumen-lh-body: 1.88;
	}

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

	html {
		scroll-behavior: smooth;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		overflow-x: clip;
	}

	@media (prefers-reduced-motion: reduce) {
		html { scroll-behavior: auto; }
		*, *::before, *::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	body {
		margin: 0;
		min-height: 100vh;
		max-width: 100%;
		overflow-x: clip;
		font-family: var(--lumen-font);
		font-size: var(--lumen-fs-md);
		line-height: var(--lumen-lh-body);
		color: var(--lumen-ink);
		background-color: var(--lumen-bg);
		background-image: none;
		overflow-wrap: anywhere;
		-webkit-font-smoothing: antialiased;
	}

	img, svg, video { max-width: 100%; height: auto; }
	img { vertical-align: middle; }

	a {
		color: var(--lumen-accent);
		text-decoration-thickness: 0.08em;
		text-underline-offset: 0.18em;
		transition: color var(--lumen-duration) var(--lumen-ease);
	}
	a:visited { color: color-mix(in srgb, var(--lumen-accent) 75%, var(--lumen-ink)); }
	a:hover { color: var(--lumen-accent-hover); }

	:focus-visible {
		outline: 2px solid var(--lumen-accent);
		outline-offset: 2px;
		box-shadow: 0 0 0 3px var(--lumen-accent-glow);
	}

	::selection {
		background: var(--lumen-accent-soft);
		color: var(--lumen-ink);
	}

	h1, h2, h3, h4, h5, h6 {
		line-height: var(--lumen-lh-tight);
		font-weight: 600;
	}

	p { margin: 0 0 0.85em; }
	p:last-child { margin-bottom: 0; }
	ul, ol { margin: 0 0 1em; padding-left: 1.35em; }

	button, input, select, textarea { font: inherit; color: inherit; }
	textarea, input[type="text"], input[type="search"], input[type="password"], select { font-size: 16px; }

	.u-state {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

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

	.skip-link {
		position: absolute;
		left: var(--lumen-space-4);
		top: -100px;
		z-index: 1000;
		padding: 0.65em 1em;
		border-radius: var(--lumen-radius-md);
		background: var(--lumen-ink);
		color: var(--lumen-surface);
		text-decoration: none;
		font-weight: 600;
	}
	.skip-link:focus,
	.skip-link:focus-visible {
		top: var(--lumen-space-4);
		background: var(--lumen-ink);
		color: var(--lumen-surface);
		outline: 2px solid var(--lumen-accent);
		outline-offset: 2px;
	}
	.skip-link--second:focus,
	.skip-link--second:focus-visible { top: calc(var(--lumen-space-4) + 3rem); }

	.url, .labeledlink {
		overflow-wrap: anywhere;
		text-decoration: underline;
		text-decoration-thickness: 0.06em;
		text-underline-offset: 0.18em;
	}
}
@layer layout {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 40;
		/* 表紙ではなく机の上の名札。日誌の面（main）と役割を分ける */
		background: var(--lumen-bg);
		border-bottom: 1px solid color-mix(in srgb, var(--lumen-line) 70%, transparent);
	}
	.site-header.is-compact .site-header__inner {
		padding-block: 0.55rem;
	}
	.site-header.is-compact .brand__title {
		font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
	}
	/* スクロール中もサイト説明は消さない（ヘッダ全体が退く is-away で読む邪魔だけ避ける） */

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--lumen-space-5);
		max-width: var(--lumen-content-max);
		margin: 0 auto;
		padding: 1.05rem var(--lumen-page-gutter);
		min-width: 0;
		transition: padding var(--lumen-duration) var(--lumen-ease);
	}

	.brand { min-width: 0; flex: 1 1 auto; }

	/*
	  サイト名: 書体は本文と同じ。区別は大きさ・太さ・ヘッダ位置だけ。
	  （タイトルだけ別書体は、利用者が意味を読み取れない差になりやすい）
	  ポスター見出しにはしない。長い名前は折り返す。
	*/
	.brand__title {
		margin: 0;
		font-family: var(--lumen-font);
		font-size: clamp(1.35rem, 1.2rem + 0.55vw, 1.7rem);
		font-weight: 600;
		letter-spacing: 0.01em;
		line-height: 1.25;
		overflow-wrap: anywhere;
		text-wrap: balance;
		transition: font-size var(--lumen-duration) var(--lumen-ease);
	}
	.brand__title a { color: var(--lumen-ink); text-decoration: none; display: inline-block; max-width: 100%; }
	.brand__title a:hover { color: var(--lumen-accent); }
	.brand__subtitle {
		display: block;
		margin-top: 0.25em;
		font-family: inherit;
		font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
		font-weight: 500;
		letter-spacing: 0.01em;
		line-height: 1.4;
		color: var(--lumen-muted);
	}
	.brand__subtitle:empty { display: none; }
	.brand__guide {
		margin: 0.35rem 0 0;
		max-width: 34rem;
		font-family: inherit;
		font-size: var(--lumen-fs-sm);
		font-weight: 400;
		color: var(--lumen-ink-soft);
		line-height: 1.55;
	}
	.brand__guide:empty { display: none; }

	.header-actions {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0.65rem 1rem;
		flex: 0 1 auto;
		min-width: 0;
		max-width: 100%;
	}

	.site-nav {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lumen-space-2);
		justify-content: flex-end;
		max-width: 100%;
	}

	.shell {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lumen-space-5);
		width: 100%;
		max-width: var(--lumen-content-max);
		margin: 0 auto;
		padding: var(--lumen-page-stack) var(--lumen-page-gutter);
		min-width: 0;
	}

	.mainarea, .side, .subarea, .postarea, .site-footer__inner {
		min-width: 0;
		max-width: 100%;
	}

	/* 日誌の面: 地との色差だけで場をつくる（囲み枠・左線は使わない） */
	.mainarea {
		background: var(--lumen-surface);
		border: 0;
		padding: var(--lumen-sheet-pad-y) var(--lumen-sheet-pad-x);
	}

	.subarea {
		display: grid;
		gap: var(--lumen-space-3);
		align-content: start;
	}

	/*
	  投稿ヒートマップ（[[HEATMAP]]）
	  てがろぐ本体が .calendarheatmap を出力。個人用にフッター直上へ。
	*/
	.lumen-heatmap {
		width: 100%;
		max-width: var(--lumen-content-max);
		margin: var(--lumen-space-6) auto 0;
		padding: 0 var(--lumen-page-gutter);
		box-sizing: border-box;
	}
	.lumen-heatmap:not(:has(.calendarheatmap)),
	.lumen-heatmap:not(:has(.chmDay)) {
		display: none;
	}
	.calendarheatmap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 3px;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding: 0.15rem 0 0.35rem;
		-webkit-overflow-scrolling: touch;
	}
	.chmWeek {
		display: flex;
		flex-direction: column;
		flex: 0 0 auto;
		gap: 3px;
	}
	.weekNames .chmWeek0,
	.weekNames .chmWeek1,
	.weekNames .chmWeek2,
	.weekNames .chmWeek3,
	.weekNames .chmWeek4,
	.weekNames .chmWeek5,
	.weekNames .chmWeek6 {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 1.1rem;
		height: 0.7rem;
		font-size: 0.58rem;
		line-height: 1;
		color: var(--lumen-faint);
		user-select: none;
	}
	/* 曜日は月・水・金だけ（GitHub風に間引く） */
	.weekNames .chmWeek0,
	.weekNames .chmWeek2,
	.weekNames .chmWeek4,
	.weekNames .chmWeek6 {
		visibility: hidden;
	}
	.weekNames .chmWeek1::before { content: "月"; }
	.weekNames .chmWeek3::before { content: "水"; }
	.weekNames .chmWeek5::before { content: "金"; }
	.weekNames .chmWeek1,
	.weekNames .chmWeek3,
	.weekNames .chmWeek5 {
		font-size: 0;
	}
	.weekNames .chmWeek1::before,
	.weekNames .chmWeek3::before,
	.weekNames .chmWeek5::before {
		font-size: 0.58rem;
	}
	.weekhead {
		display: block;
		height: 0.85rem;
		margin: 0 0 1px;
		font-size: 0.58rem;
		line-height: 0.85rem;
		color: var(--lumen-faint);
		white-space: nowrap;
		overflow: visible;
		user-select: none;
	}
	.chmDay {
		display: block;
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 2px;
		box-sizing: border-box;
		text-decoration: none;
		cursor: default;
	}
	a.chmDay,
	.chmDay[data-linkto] {
		cursor: pointer;
	}
	.chmDay time,
	.chmDay b {
		display: none;
	}
	/* フラットなバイオレット段階（控えめネオン） */
	.chmDay.exist0 {
		background: color-mix(in srgb, var(--lumen-line) 55%, var(--lumen-surface));
	}
	.chmDay.exist1 { background: color-mix(in srgb, var(--lumen-accent) 22%, var(--lumen-surface-2)); }
	.chmDay.exist2 { background: color-mix(in srgb, var(--lumen-accent) 36%, var(--lumen-surface-2)); }
	.chmDay.exist3 { background: color-mix(in srgb, var(--lumen-accent) 50%, var(--lumen-surface-2)); }
	.chmDay.exist4 { background: color-mix(in srgb, var(--lumen-accent) 64%, var(--lumen-surface-2)); }
	.chmDay.exist5 { background: color-mix(in srgb, var(--lumen-accent) 78%, var(--lumen-surface-2)); }
	.chmDay.over5 { background: var(--lumen-accent); }
	.chmDay.over10 { background: color-mix(in srgb, var(--lumen-accent) 85%, #fff); }
	.chmDay.over15 { background: color-mix(in srgb, var(--lumen-accent-hover) 70%, var(--lumen-accent)); }
	.chmDay.over20 { background: var(--lumen-accent-hover); }
	@media (hover: hover) {
		a.chmDay:hover,
		.chmDay[data-linkto]:hover {
			outline: 1px solid var(--lumen-ink-soft);
			outline-offset: 1px;
		}
	}
	.chmDay:focus-visible {
		outline: 2px solid var(--lumen-accent);
		outline-offset: 1px;
	}
	.chmDay.past0 {
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lumen-ink) 35%, transparent);
	}
	@media (max-width: 1023px) {
		.lumen-heatmap {
			padding-bottom: 0.25rem;
		}
		.chmDay {
			width: 0.62rem;
			height: 0.62rem;
		}
		.weekNames .chmWeek0,
		.weekNames .chmWeek1,
		.weekNames .chmWeek2,
		.weekNames .chmWeek3,
		.weekNames .chmWeek4,
		.weekNames .chmWeek5,
		.weekNames .chmWeek6 {
			height: 0.62rem;
		}
	}

	.site-footer {
		border-top: 1px solid color-mix(in srgb, var(--lumen-line) 70%, transparent);
		background: var(--lumen-bg);
		margin-top: var(--lumen-space-4);
	}
	.site-footer__inner {
		max-width: var(--lumen-content-max);
		margin: 0 auto;
		padding: var(--lumen-space-6) var(--lumen-page-gutter);
		text-align: center;
	}
	.footer-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--lumen-space-2) var(--lumen-space-4);
		margin: 0 0 var(--lumen-space-2);
	}
	
	.footer-nav--browse,
	.footer-nav--meta,
	.footer-nav--author {
		margin-bottom: 0;
		padding-top: 0;
		border-top: 0;
	}
	.footer-nav--meta {
		margin-bottom: var(--lumen-space-4);
	}
	.footer-nav a {
		font-size: var(--lumen-fs-sm);
		font-weight: 500;
		text-decoration: none;
		color: var(--lumen-ink-soft);
	}
	.footer-nav a:hover { color: var(--lumen-accent); }
	.footer-nav--meta a {
		color: var(--lumen-muted);
	}
	.backlink, .poweredby {
		margin: 0 0 var(--lumen-space-3);
		font-size: var(--lumen-fs-sm);
		color: var(--lumen-muted);
		overflow-wrap: anywhere;
	}
	.poweredby { margin: 0; font-size: var(--lumen-fs-xs); color: var(--lumen-faint); }
	.poweredby a { color: inherit; }

	html {
		scroll-padding-top: 1.25rem;
	}
	#tools {
		scroll-margin-top: 4.5rem;
		scroll-margin-bottom: 5.5rem;
	}
	#site-notes {
		scroll-margin-top: 4.5rem;
		scroll-margin-bottom: 5.5rem;
	}

	/* 1024px未満は1カラム（本文の幅を優先） */
	@media (min-width: 1024px) {
		.shell {
			grid-template-columns: minmax(0, var(--lumen-read-max)) minmax(15rem, var(--lumen-sidebar-w));
			justify-content: center;
			align-items: start;
			column-gap: clamp(1.5rem, 3vw, 2.75rem);
			padding-block: var(--lumen-space-6);
		}
		/* 投稿欄の幅を本文に合わせる */
		.postarea {
			display: grid;
			grid-template-columns: minmax(0, var(--lumen-read-max)) minmax(15rem, var(--lumen-sidebar-w));
			column-gap: clamp(1.5rem, 3vw, 2.75rem);
			justify-content: center;
			padding-top: var(--lumen-space-5);
		}
		.postform { grid-column: 1; }
		.side {
			display: grid;
			gap: var(--lumen-space-3);
			align-content: start;
			position: sticky;
			top: 1rem;
			max-height: calc(100vh - 2rem);
			min-width: 0;
			padding-inline: 0.2rem;
			overflow: auto;
			scrollbar-width: thin;
			overscroll-behavior: contain;
		}
		.subarea { min-width: 0; }
	}

	/* 広い画面: 読む幅をわずかに伸ばす（1920 専用の再指定は差が説明できないので置かない） */
	@media (min-width: 1400px) {
		:root {
			--lumen-read-max: 42rem;
			--lumen-sidebar-w: 19.5rem;
			--lumen-page-gutter: clamp(1rem, 2vw, 2rem);
		}
	}

	/*
	  片手幅（〜1023px）: PCの縮小ではない。
	  上は名札と移動、下は「読みながら触る」操作。
	*/
	@media (max-width: 1023px) {
		:root {
			--lumen-dock-h: calc(3.15rem + env(safe-area-inset-bottom, 0px));
		}
		html {
			scroll-padding-top: 4.25rem;
			scroll-padding-bottom: calc(var(--lumen-dock-h) + 0.75rem);
		}
		body {
			padding-bottom: var(--lumen-dock-h);
		}

		.site-header__inner {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.25rem 0.75rem;
			padding-block: 0.55rem;
		}
		.brand {
			flex: 1 1 auto;
			min-width: 0;
		}
		.brand__title {
			font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.4rem);
			line-height: 1.25;
		}
		/* 狭い画面でもサイト名・説明は残す（ヘッダを痩せさせるため行数だけ抑える） */
		.brand__subtitle {
			display: inline;
			font-size: 0.78em;
			font-family: var(--lumen-font);
		}
		.brand__guide {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin: 0.2rem 0 0;
			font-size: 0.72rem;
			line-height: 1.35;
			color: var(--lumen-muted);
			font-family: var(--lumen-font);
		}
		.header-actions {
			flex: 1 1 100%;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			gap: 0.25rem;
		}
		/* 明るさの非表示は @layer components 側（レイヤー順でこちらが負けるため） */
		.site-nav {
			justify-content: flex-start;
			flex-wrap: wrap;
			gap: 0.1rem 0.15rem;
			width: 100%;
		}
		.nav-btn {
			min-height: 2.35rem;
			padding: 0.3em 0.55em;
			font-size: var(--lumen-fs-sm);
			letter-spacing: 0;
		}
		.site-header.is-compact .site-header__inner {
			padding-block: 0.35rem;
		}
		.site-header.is-compact .brand__title {
			font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.25rem);
		}
		.site-header {
			transition: transform 200ms var(--lumen-ease);
		}
		.site-header.is-away {
			transform: translateY(-110%);
		}

		.shell {
			padding-inline: var(--lumen-page-gutter);
			padding-block: var(--lumen-space-4);
			gap: var(--lumen-space-5);
		}
		.mainarea {
			padding: var(--lumen-sheet-pad-y) var(--lumen-space-4);
		}
		.side {
			display: contents;
		}
		.subarea--notes {
			padding: var(--lumen-space-4) 0 var(--lumen-space-5);
			margin: 0;
			overflow: visible;
		}

		.postarea {
			padding-inline: var(--lumen-page-gutter);
		}
		.postform {
			padding: var(--lumen-sheet-pad-y) var(--lumen-space-4);
		}

		/* 右下の↑はドックの「先頭」に統合（二重にしない） */
		.to-top {
			display: none !important;
		}
	}

	@media (max-width: 719px) {
		.brand__title {
			font-size: clamp(1.15rem, 1.05rem + 0.7vw, 1.3rem);
		}
	}
}
@layer components {

	/*
	  明るさ・書体: 画面幅ごとに置き場はひとつ。
	  広い画面 …… ヘッダ（セグメントで直接選択）
	  狭い画面 …… 下ドックのトグルのみ（ヘッダは出さない）
	*/
	.reader-controls {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: var(--lumen-space-2) var(--lumen-space-4);
	}
	@media (max-width: 1023px) {
		.site-header .reader-controls {
			display: none !important;
		}
	}
	/* 配色切替は枠付きセグメントにしない（道具の見え方） */
	.seg {
		display: inline-flex;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		gap: 0.15rem;
	}
	.seg__item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 1.85rem;
		min-width: 1.85rem;
		padding: 0.2em 0.45em;
		border-radius: 0;
		font-size: 0.7rem;
		font-weight: 600;
		color: var(--lumen-faint);
		cursor: pointer;
		user-select: none;
		box-sizing: border-box;
		white-space: nowrap;
	}
	.seg__item:hover { color: var(--lumen-ink); }
	html:has(#theme-auto:checked) label[for="theme-auto"],
	html[data-theme="auto"] label[for="theme-auto"],
	html:has(#theme-light:checked) label[for="theme-light"],
	html[data-theme="light"] label[for="theme-light"],
	html:has(#theme-dark:checked) label[for="theme-dark"],
	html[data-theme="dark"] label[for="theme-dark"] {
		background: transparent;
		color: var(--lumen-ink);
		box-shadow: inset 0 -1px 0 var(--lumen-ink);
	}

	/* 選択表示は data-font 基準（ラジオ初期値と一時的に食い違っても二重選択にしない） */
	html[data-font="sans"] label[for="font-sans"],
	html[data-font="serif"] label[for="font-serif"] {
		background: transparent;
		color: var(--lumen-ink);
		box-shadow: inset 0 -1px 0 var(--lumen-ink);
	}
	html:has(#font-sans:focus-visible) label[for="font-sans"],
	html:has(#font-serif:focus-visible) label[for="font-serif"] {
		outline: 2px solid var(--lumen-accent);
		outline-offset: 2px;
	}

	/* 非表示ラジオの選択リングはラベル側に描く */
	html:has(#theme-auto:focus-visible) label[for="theme-auto"],
	html:has(#theme-light:focus-visible) label[for="theme-light"],
	html:has(#theme-dark:focus-visible) label[for="theme-dark"] {
		outline: 2px solid var(--lumen-accent);
		outline-offset: 2px;
	}

	.nav-btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.25rem;
		padding: 0.3em 0.55em;
		border: 0;
		/* アイコンナビは角丸なし（inset下線が端で持ち上がるのを防ぐ） */
		border-radius: 0;
		background: transparent;
		color: var(--lumen-ink-soft);
		font-size: var(--lumen-fs-sm);
		font-weight: 600;
		text-decoration: none;
		box-shadow: none;
		white-space: nowrap;
		transition: color var(--lumen-duration) var(--lumen-ease), background var(--lumen-duration) var(--lumen-ease);
	}
	.nav-btn:visited { color: var(--lumen-ink-soft); }
	@media (hover: hover) {
		.nav-btn:hover {
			color: var(--lumen-accent);
			background: transparent;
		}
	}
	.nav-btn--primary {
		background: var(--lumen-accent);
		border: 0;
		border-radius: var(--lumen-radius-sm);
		color: var(--lumen-on-accent);
		padding-inline: 0.85em;
	}
	.nav-btn--primary:visited { color: var(--lumen-on-accent); }
	.nav-btn--primary:hover {
		background: var(--lumen-accent-hover);
		color: var(--lumen-on-accent);
	}

	/*
	  現在ページの下線は ::after の直線。
	  box-shadow inset + border-radius だと端が弧を描いて持ち上がって見える。
	  また :focus-visible の box-shadow と競合しない。
	*/
	.site-nav .nav-btn:not(.nav-btn--primary)::after {
		content: "";
		position: absolute;
		left: 0.35em;
		right: 0.35em;
		bottom: 0.15em;
		height: 1px;
		background: transparent;
		pointer-events: none;
	}
	body.mode-gallery .site-nav a[href*="mode=gallery"],
	body.mode-about .site-nav a[href*="mode=about"],
	.site-nav a[aria-current="page"] {
		color: var(--lumen-ink);
		box-shadow: none;
	}
	body.mode-gallery .site-nav a[href*="mode=gallery"]::after,
	body.mode-about .site-nav a[href*="mode=about"]::after,
	.site-nav a[aria-current="page"]::after {
		background: var(--lumen-ink);
	}
	body.mode-sitemap .footer-nav--browse a[href*="sitemap"] {
		color: var(--lumen-ink);
		font-weight: 700;
	}

	/* 投稿欄まわり */
	.postarea {
		width: 100%;
		max-width: var(--lumen-content-max);
		margin: 0 auto;
		padding: var(--lumen-page-stack) var(--lumen-page-gutter) 0;
	}
	.postarea:empty,
	.postarea:not(:has(.postform)) { display: none; }
	/* 投稿欄も日誌の面と同じ場 */
	.postform {
		background: var(--lumen-surface);
		border: 0;
		border-radius: 0;
		padding: var(--lumen-sheet-pad-y) var(--lumen-sheet-pad-x);
		box-shadow: none;
	}
	.postform p { margin: 0; }
	textarea.tegalogpost {
		display: block;
		width: 100%;
		min-height: 8.5rem;
		margin: 0 0 var(--lumen-space-3);
		padding: var(--lumen-space-4) 0.15rem;
		border: 0;
		border-bottom: 1px solid var(--lumen-line);
		border-radius: 0;
		background: transparent;
		line-height: 1.85;
		resize: vertical;
	}
	textarea.tegalogpost::placeholder {
		color: var(--lumen-faint);
		opacity: 0.9;
	}
	textarea.tegalogpost:focus,
	textarea.tegalogpost:focus-visible {
		outline: none;
		border-color: var(--lumen-accent);
		box-shadow: none;
		background: transparent;
	}
	.line-control {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lumen-space-3);
	}
	.postbutton, input.postbutton {
		appearance: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--lumen-touch-min);
		padding: 0.45em 1.1em;
		border: 1px solid var(--lumen-ink);
		border-radius: 0;
		background: transparent;
		color: var(--lumen-ink);
		font-weight: 700;
		cursor: pointer;
	}
	.postbutton:hover, input.postbutton:hover {
		background: var(--lumen-ink);
		border-color: var(--lumen-ink);
		color: var(--lumen-surface);
	}
	.decoBtns { display: flex; flex-wrap: wrap; gap: 0.25rem; }
	.decoBtns input {
		min-width: 2rem; min-height: 2rem;
		padding: 0.2em 0.45em;
		border: 1px solid var(--lumen-line);
		border-radius: var(--lumen-radius-sm);
		background: var(--lumen-surface-2);
		cursor: pointer;
		font-size: 0.8rem;
	}
	.decoBtns input:hover { border-color: var(--lumen-accent); background: var(--lumen-accent-soft); }
	.decoBtnB { font-weight: 700; }
	.decoBtnD { text-decoration: line-through; text-decoration-color: var(--lumen-danger); }
	.decoBtnE { color: var(--lumen-accent); font-weight: 700; }
	.decoBtnI { font-style: italic; }
	.decoBtnU { text-decoration: underline; }
	.decoBtnC { color: var(--lumen-danger); }
	.decoBtnM { background: var(--lumen-accent-soft) !important; }
	.decoBtnS { font-size: 0.8rem; }
	.decoBtnT { font-size: 0.65rem !important; }
	.decoBtnQ { border-left: 3px solid var(--lumen-accent) !important; }
	.decoBtnH { background: color-mix(in srgb, var(--lumen-warm) 25%, transparent) !important; }
	.decoBtnL { border-left: 2px solid var(--lumen-line-strong) !important; }
	.decoBtnO { outline: 1px dashed var(--lumen-line-strong); }
	.decoBtnF { font-family: var(--lumen-font-mono); }
	.decoBtnR { text-decoration: overline; }
	.catChecks { width: 100%; font-size: var(--lumen-fs-sm); color: var(--lumen-ink-soft); }
	.catChecks label { display: inline-flex; align-items: center; gap: 0.3em; margin: 0.2em 0.85em 0.2em 0; cursor: pointer; }
	.funcUIs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lumen-space-2) var(--lumen-space-3); width: 100%; margin-top: var(--lumen-space-2); }
	/* 投稿UIの挿入ピッカー: 選択肢を密集表示するための小タイル（鑑賞ではない） */
	.recentimginsert img { width: 2.25rem; height: 2.25rem; object-fit: cover; border-radius: var(--lumen-radius-sm); border: 1px solid var(--lumen-line); }

	/*
	  件数は「いま何件見えているか」の状態表示。
	  いつも出ると日誌の冒頭を騒がしくするので、絞り込んだときだけ出す。
	*/
	.stream-meta {
		display: none;
		flex-wrap: wrap;
		gap: 0.35em 1em;
		margin: 0 0 var(--lumen-space-5);
		padding: 0;
		border: 0;
		font-size: var(--lumen-fs-xs);
		color: var(--lumen-faint);
		font-variant-numeric: tabular-nums;
	}
	.stream-meta p { margin: 0; }
	.stream-meta span { color: var(--lumen-muted); font-weight: 600; }
	body.search-result .stream-meta,
	body.selected-cat .stream-meta,
	body.selected-tag .stream-meta,
	body.selected-date .stream-meta {
		display: flex;
	}

	/* 絞り込みなどの状況表示は UI。日付の骨格（区切り）とは別 */
	.situation {
		margin: 0 0 var(--lumen-space-5);
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		font-family: var(--lumen-font);
		font-weight: 600;
		font-size: var(--lumen-fs-sm);
		letter-spacing: 0.01em;
		color: var(--lumen-ink-soft);
	}
	.situation:empty { display: none; }

	/* CGIのモード見出しはスキン側の mode-lead に置き換える */
	body.mode-gallery .situation,
	body.mode-picts .situation,
	body.mode-sitemap .situation,
	body.mode-about .situation {
		display: none !important;
	}
	/* ギャラリー等のモード名は画面の状態表示（UI） */
	.mode-lead {
		margin: 0 0 var(--lumen-space-5);
		padding: 0;
		border: 0;
		font-family: var(--lumen-font);
		font-weight: 600;
		font-size: var(--lumen-fs-sm);
		color: var(--lumen-ink-soft);
		letter-spacing: 0.01em;
	}
	.mode-lead__hint {
		display: block;
		margin-top: 0.4em;
		font-weight: 500;
		font-size: var(--lumen-fs-xs);
		color: var(--lumen-muted);
		line-height: 1.55;
	}
	.mode-lead__hint a { color: var(--lumen-accent); }

	/* 日付区切り = 時間の骨格。位置と余白で示す（別書体にしない） */
	.dateseparator {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.35em 0.85em;
		margin: clamp(2.5rem, 5vw, 3.75rem) 0 var(--lumen-space-3);
		padding: 0 0 0.15em;
		border: 0;
		background: transparent;
		color: var(--lumen-muted);
		font-family: var(--lumen-font);
		font-size: var(--lumen-fs-sm);
		font-weight: 600;
		letter-spacing: 0.01em;
		text-transform: none;
	}
	.dateseparator .datetitle,
	.dateseparator a {
		font-family: inherit;
		color: var(--lumen-ink-soft);
		font-weight: 600;
		font-size: 0.95em;
		letter-spacing: 0.01em;
		text-decoration: none;
		text-transform: none;
		padding: 0;
		border: 0;
		border-radius: 0;
	}
	.dateseparator a:hover { color: var(--lumen-accent); }
	.dateseparator.fixedseparator {
		color: var(--lumen-accent);
	}
	.fixedlabel { display: inline-flex; align-items: center; gap: 0.4em; }

	/* ストリームに常時のタイムライン装飾線は置かない */
	.stream { min-width: 0; }

	.onelogbox {
		position: relative;
		margin: 0;
		padding: clamp(1.85rem, 3.6vw, 2.65rem) 0;
		border: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--lumen-line) 55%, transparent);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		min-width: 0;
		max-width: 100%;
		scroll-margin-top: 1.25rem;
	}
	
	.onelogbox:last-child { border-bottom: 0; }
	/* 該当投稿への到達感は面の色だけで示す */
	.onelogbox:target {
		background: color-mix(in srgb, var(--lumen-accent) 6%, transparent);
		box-shadow: none;
	}

	/* 時間 → 本文。作者は脇（1人運用では隠す） */
	.onelog__header {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--lumen-space-2) var(--lumen-space-4);
		margin-bottom: var(--lumen-space-4);
		min-width: 0;
	}
	.onelog__author {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		flex: 0 1 auto;
		min-width: 0;
		max-width: 12rem;
		text-decoration: none;
		color: var(--lumen-muted);
	}
	.onelog__author:visited { color: var(--lumen-muted); }
	.onelog__author:hover { color: var(--lumen-accent); }
	.iconarea {
		flex: 0 0 auto;
		width: 1.65rem;
		height: 1.65rem;
		overflow: hidden;
		border-radius: 50%;
		background: var(--lumen-surface-2);
		border: 0;
	}
	.iconarea img, .usericon {
		display: block;
		width: 1.65rem; height: 1.65rem;
		border-radius: 50%;
		object-fit: cover;
		border: 0;
		background: var(--lumen-surface-2);
	}
	.username {
		font-weight: 500;
		font-size: var(--lumen-fs-xs);
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.onelog__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: flex-start;
		gap: 0.35em 0.75em;
		flex: 1 1 auto;
		min-width: 0;
		font-size: var(--lumen-fs-xs);
		color: var(--lumen-muted);
	}
	/* 日付・No. はその投稿のURL */
	.onelog__id {
		color: var(--lumen-faint);
		text-decoration: none;
		font-variant-numeric: tabular-nums;
	}
	.onelog__id:hover {
		color: var(--lumen-accent);
		text-decoration: underline;
		text-decoration-thickness: 0.06em;
		text-underline-offset: 0.18em;
	}
	/* 投稿の時刻 = メタ行の先頭。太さと桁揃えで見つける */
	a.onelog__date {
		font-family: var(--lumen-font);
		font-size: 0.95rem;
		font-weight: 600;
		color: var(--lumen-ink);
		font-variant-numeric: tabular-nums;
		text-decoration: none;
		letter-spacing: 0.01em;
	}
	a.onelog__date time { font: inherit; }
	a.onelog__date:hover {
		color: var(--lumen-accent);
		text-decoration: underline;
		text-decoration-thickness: 0.06em;
		text-underline-offset: 0.18em;
	}

	.context-bar {
		margin: 0 0 var(--lumen-space-5);
		padding: 0;
		border: 0;
		font-family: var(--lumen-font);
		font-size: var(--lumen-fs-sm);
	}
	.context-bar__back {
		font-weight: 600;
		color: var(--lumen-ink-soft);
		text-decoration: none;
	}
	.context-bar__back::before { content: none; }
	.context-bar__back:hover { color: var(--lumen-accent); }

	/*
	  新着: 日付・No. と同じメタ行の「鮮度」情報。
	  原因（下ズレ）: font-size:0 ＋ 入れ子 inline-flex だと、親の
	  align-items:baseline に対する基準線が箱の下端になり、文字だけ沈む。
	  文言置換は JS。ここでは普通の文字として同じ基準線に乗せる。
	*/
	.newsign:empty { display: none; }
	.newsign:not(:empty) {
		font-size: var(--lumen-status-fs);
		font-weight: 600;
		letter-spacing: var(--lumen-status-tracking);
		line-height: var(--lumen-status-lh);
		color: var(--lumen-muted);
		white-space: nowrap;
	}
	.comment {
		font-size: var(--lumen-fs-md);
		line-height: var(--lumen-lh-body);
		letter-spacing: 0;
		overflow-wrap: anywhere;
		text-wrap: pretty;
		color: var(--lumen-ink);
	}
	.comment > *:first-child { margin-top: 0; }
	.comment > *:last-child { margin-bottom: 0; }
	.comment p { margin: 0 0 1em; }
	.comment p:last-child { margin-bottom: 0; }
	.comment img { border-radius: var(--lumen-radius-sm); max-width: 100%; height: auto; }
	/* 公式ライトボックス用（CGIが data-lightbox を付与） */
	.comment a.imagelink,
	.comment a.enlargeimage,
	a.imagelink,
	a.enlargeimage {
		display: inline-block;
		max-width: 100%;
		border-radius: var(--lumen-radius-md);
		outline-offset: 2px;
		cursor: zoom-in;
	}
	.comment a.imagelink img,
	.comment a.enlargeimage img,
	a.imagelink img,
	a.enlargeimage img {
		display: block;
		max-width: 100%;
		height: auto;
		transition: opacity var(--lumen-duration) var(--lumen-ease);
	}
	@media (hover: hover) {
		.comment a.imagelink:hover img,
		.comment a.enlargeimage:hover img,
		a.imagelink:hover img,
		a.enlargeimage:hover img {
			opacity: 0.92;
		}
	}
	/* タグ一覧はギャラリーのみ（本文内のタグと二重にしない） */
	.onelog__tags {
		display: none;
		flex-wrap: wrap;
		gap: 0.35em;
		margin: 0.35em 0 0;
	}
	body.mode-gallery .onelog__tags:not(:empty) { display: flex; }
	.onelog__tags a {
		display: inline-flex;
		padding: 0.1em 0.45em;
		border: 1px solid var(--lumen-line);
		border-radius: var(--lumen-radius-sm);
		background: transparent;
		color: var(--lumen-ink-soft);
		font-size: var(--lumen-fs-xs);
		font-weight: 600;
		text-decoration: none;
	}
	.onelog__tags a:hover {
		border-color: var(--lumen-accent);
		color: var(--lumen-accent);
	}
	.oneloginfo {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.4em 0.85em;
		margin: var(--lumen-space-4) 0 0;
		font-size: var(--lumen-fs-xs);
		line-height: var(--lumen-status-lh);
		color: var(--lumen-muted);
	}
	.oneloginfo a { color: var(--lumen-muted); text-decoration: none; }
	.oneloginfo a:hover { color: var(--lumen-accent); }
	.categories:empty, .length:empty, .editlink:empty, .postuserid:empty { display: none; }
	/* カテゴリ絞り込み中は一覧メタのカテゴリを隠す（重複回避） */
	body.selected-cat:not(.onelog) .onelog__meta .categories { display: none; }
	/* ゲスト時は投稿フッターを出さない（カテゴリはメタへ移動済み） */
	body.loginNO .oneloginfo { display: none; }
	/*
	  カテゴリを入れ子 flex にすると、それ自体の baseline が下端になり
	  日付行から沈んで見える。中身をメタ行へ直接並べる。
	*/
	.onelog__meta .categories {
		display: contents;
	}
	.onelog__meta .categorylink {
		margin: 0;
		color: var(--lumen-ink-soft);
	}
	.categorylink {
		display: inline-flex;
		align-items: center;
		gap: 0.25em;
		padding: 0;
		margin: 0 0.65em 0 0;
		border-radius: 0;
		background: transparent;
		border: 0;
		color: var(--lumen-muted);
		text-decoration: none;
		font-size: var(--lumen-fs-xs);
		font-weight: 600;
		line-height: var(--lumen-status-lh);
	}
	.categorylink:hover { color: var(--lumen-accent); text-decoration: underline; text-underline-offset: 0.15em; }
	.categoryicon img {
		width: 1em;
		height: 1em;
		border-radius: 2px;
		display: block;
	}
	.editlink a {
		padding: 0;
		border-radius: 0;
		border: 0;
		font-weight: 600;
		color: var(--lumen-muted);
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}
	.editlink a:hover { color: var(--lumen-accent); background: transparent; }

	/*
	  固定・下書き: 投稿全体の状態。隅に絶対配置すると「別物の装飾」に見える。
	  新着（鮮度）とは役割が違うので行は分けるが、字の型は揃える。
	*/
	.logstatus-fixed {
		border-inline-start: 2px solid var(--lumen-accent);
		padding-inline-start: 0.85rem;
	}
	.logstatus-fixed::before,
	.logstatus-draft::before {
		display: block;
		width: fit-content;
		margin: 0 0 0.65rem;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		font-size: var(--lumen-status-fs);
		font-weight: 700;
		letter-spacing: 0.02em;
		line-height: var(--lumen-status-lh);
	}
	.logstatus-fixed::before {
		content: "固定";
		color: var(--lumen-accent);
	}
	.logstatus-lock {
		background: transparent;
		border-inline-start: 2px solid var(--lumen-warm);
		padding-inline-start: 0.85rem;
	}
	.logstatus-rear { opacity: 0.78; }
	.logstatus-draft { border-bottom-style: dashed; }
	.logstatus-draft::before {
		content: "下書き";
		color: var(--lumen-muted);
	}

	/* ページ送り */
	.pagenavi {
		display: grid;
		gap: var(--lumen-space-3);
		margin-top: var(--lumen-space-6);
		padding: var(--lumen-space-5) 0 0;
		border-top: 1px solid var(--lumen-line);
		text-align: center;
	}
	/* ページ送りの日本語化は JS（old/new テキスト基準）。クラス名では判断しない */
	.pagenavi:not(:has(a)) { display: none; }
	/* 空欄判定は :has(a)（空白だけの枠対策） */
	.pagenavi__prevnext:not(:has(a)),
	.pagenavi__pages:not(:has(a)),
	.pagenavi__home:not(:has(a)) { display: none; }
	.pagenavi a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--lumen-touch-min);
		padding: 0.25em 0.45em;
		margin: 0.1em 0.35em;
		border-radius: 0;
		border: 0;
		background: transparent;
		color: var(--lumen-ink-soft);
		text-decoration: underline;
		text-decoration-thickness: 0.06em;
		text-underline-offset: 0.22em;
		font-size: var(--lumen-fs-sm);
		font-weight: 600;
	}
	.pagenavi a:hover {
		color: var(--lumen-accent);
		background: transparent;
		text-decoration-thickness: 0.1em;
	}

	/* サイドパネルはカード型にしない */
	.panel {
		border: 0;
		border-bottom: 1px solid var(--lumen-line);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		min-width: 0;
		max-width: 100%;
		overflow: visible;
	}
	.panel:last-child { border-bottom: 0; }
	.panel > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75em;
		list-style: none;
		cursor: pointer;
		min-height: 2.5rem;
		padding: 0.55em 0;
		font-size: var(--lumen-fs-sm);
		font-weight: 600;
		letter-spacing: 0.01em;
		text-transform: none;
		/* 閉じたパネルも操作できる見た目にする */
		color: var(--lumen-ink-soft);
		background: transparent;
		border-bottom: 1px solid transparent;
		border-radius: 0;
		user-select: none;
	}
	.panel > summary:hover { color: var(--lumen-ink); }
	.panel > summary::-webkit-details-marker { display: none; }
	.panel > summary:focus-visible {
		outline: 2px solid var(--lumen-accent);
		outline-offset: -2px;
		z-index: 1;
	}
	.panel > summary::after {
		content: "";
		flex: 0 0 auto;
		width: 0.5em; height: 0.5em;
		border-right: 2px solid var(--lumen-muted);
		border-bottom: 2px solid var(--lumen-muted);
		transform: rotate(45deg);
		transition: transform var(--lumen-duration) var(--lumen-ease);
	}
	.panel[open] > summary {
		border-bottom-color: transparent;
		color: var(--lumen-ink);
		border-radius: 0;
	}
	.panel[open] > summary::after { transform: rotate(-135deg); }
	/* フリースペース題名は「はじめに」（ヘッダ about と同一） */
	.panel--freespace .panel-label:empty::before { content: "はじめに"; }
	.panel__body {
		/* パネル内のフォーカスリングが切れないよう余白を確保 */
		padding: 0.35rem 0.2rem 1.1rem;
		font-size: var(--lumen-fs-sm);
		min-width: 0;
		max-width: 100%;
		overflow-x: visible;
		overflow-wrap: anywhere;
	}
	.panel__body a { text-decoration: none; }
	/* フリースペース本文のリンクは下線を残す（分類リンクとは別） */
	.panel .freespacebody a {
		text-decoration: underline;
		text-decoration-thickness: 0.06em;
		text-underline-offset: 0.18em;
	}
	.panel__stack { display: grid; gap: var(--lumen-space-5); }
	.subblock__title {
		margin: 0 0 var(--lumen-space-3);
		font-size: var(--lumen-fs-xs);
		font-weight: 700;
		letter-spacing: 0.04em;
		color: var(--lumen-faint);
	}
	/* 分類リストはパネル内スクロール */
	.taxonomy-scroll {
		min-width: 0;
		max-width: 100%;
		max-height: min(16rem, 40vh);
		overflow: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
	.search-complex-wrap { margin-top: var(--lumen-space-3); }
	.search-date-hint {
		margin: 0 0 var(--lumen-space-3);
		font-size: var(--lumen-fs-xs);
		color: var(--lumen-muted);
		line-height: 1.5;
	}
	.search-complex-wrap > summary {
		display: inline-flex;
		align-items: center;
		gap: 0.45em;
		cursor: pointer;
		color: var(--lumen-accent);
		font-weight: 600;
		font-size: var(--lumen-fs-xs);
		line-height: 1.3;
		border-radius: var(--lumen-radius-sm);
		padding: 0.15em 0.1em;
		list-style: none;
	}
	.search-complex-wrap > summary::-webkit-details-marker { display: none; }
	/* vertical-align の微調整ではなく、行内で中央揃え（文字と印を同じ高さに） */
	.search-complex-wrap > summary::before {
		content: "";
		flex: 0 0 auto;
		width: 0.35em;
		height: 0.35em;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(-45deg);
	}
	.search-complex-wrap[open] > summary::before {
		transform: rotate(45deg);
	}
	.search-complex-wrap > summary:focus-visible {
		outline: 2px solid var(--lumen-accent);
		outline-offset: 2px;
	}
	.searchboxform,
	form.complexsearch { display: grid; gap: var(--lumen-space-2); }
	/* 検索フォームの部品位置 */
	.searchinputs,
	#complexsearch p.searchbox {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: var(--lumen-space-2);
		min-width: 0;
		margin: 0;
	}
	.searchbox .queryinput,
	.searchbox input[type="text"],
	.searchbox input[type="search"],
	#complexsearch .queryinput,
	#complexsearch input[type="text"],
	#complexsearch select {
		flex: 1 1 8rem;
		width: auto;
		min-width: 0;
		min-height: 2.4rem;
		padding: 0.4em 0.7em;
		border: 2px solid var(--lumen-line);
		border-radius: var(--lumen-radius-md);
		background: var(--lumen-surface-2);
	}
	/* フォーカスは枠線の色だけ（overflow で影が切れるため） */
	.searchbox .queryinput:focus,
	.searchbox .queryinput:focus-visible,
	.searchbox input[type="text"]:focus,
	.searchbox input[type="text"]:focus-visible,
	.searchbox input[type="search"]:focus,
	.searchbox input[type="search"]:focus-visible,
	#complexsearch .queryinput:focus,
	#complexsearch .queryinput:focus-visible,
	#complexsearch input[type="text"]:focus,
	#complexsearch input[type="text"]:focus-visible,
	#complexsearch select:focus,
	#complexsearch select:focus-visible,
	.passkeyinput:focus,
	.passkeyinput:focus-visible {
		outline: none;
		border-color: var(--lumen-accent);
		box-shadow: none;
		background: var(--lumen-surface);
	}
	.searchbox .submitcover { flex: 0 0 auto; }
	.searchbox .submitbutton,
	#complexsearch .submitbutton,
	#complexsearch input[type="submit"] {
		appearance: none;
		min-width: 2.75rem;
		min-height: var(--lumen-touch-min);
		padding: 0.45em 0.9em;
		border: 0;
		border-radius: var(--lumen-radius-md);
		background: var(--lumen-accent);
		color: var(--lumen-on-accent);
		font-weight: 700;
		cursor: pointer;
		line-height: 1;
	}
	.searchbox .submitbutton:hover,
	#complexsearch .submitbutton:hover,
	#complexsearch input[type="submit"]:hover { background: var(--lumen-accent-hover); }
	.searchbox .submitbutton:focus-visible,
	#complexsearch .submitbutton:focus-visible,
	#complexsearch input[type="submit"]:focus-visible,
	.passkeysubmit:focus-visible,
	.postbutton:focus-visible,
	input.postbutton:focus-visible,
	.decoBtns input:focus-visible {
		outline: 2px solid var(--lumen-accent);
		outline-offset: 2px;
	}
	.searchoptions {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--lumen-space-2);
	}
	.searchoptions .solabel {
		display: block;
		margin-bottom: 0.25em;
		font-size: var(--lumen-fs-xs);
		font-weight: 600;
		color: var(--lumen-faint);
	}

	.searcharea input[type="checkbox"] {
		accent-color: var(--lumen-accent);
		margin-right: 0.3em;
	}

	.hashtaglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
	.hashtaglist li { margin: 0; }
	.hashtaglist a {
		display: inline-flex; align-items: center; gap: 0.3em;
		padding: 0.15em 0; margin-right: 0.85em; border-radius: 0;
		background: transparent; border: 0;
		color: var(--lumen-ink-soft); font-size: var(--lumen-fs-xs);
		text-decoration: none;
	}
	.hashtaglist a:hover { color: var(--lumen-accent); text-decoration: underline; text-underline-offset: 0.15em; }
	.hashtaglist .num { color: var(--lumen-faint); font-variant-numeric: tabular-nums; }

	.categoryTree ul { list-style: none; margin: 0; padding: 0; }
	.categoryTree li { margin: 0.35em 0; }
	.categoryTree ul ul { padding-left: 0.9em; margin-top: 0.25em; border-left: 1px solid var(--lumen-line); }
	.categoryTree a { color: var(--lumen-ink-soft); }
	.categoryTree a:hover { color: var(--lumen-accent); }
	.categoryTree .num { color: var(--lumen-faint); font-size: 0.9em; }

	.userlist, .userlistarea ul { list-style: none; margin: 0; padding: 0; }
	.oneuser, .userlistarea li {
		display: flex; flex-wrap: wrap; align-items: center; gap: 0.55em;
		padding: 0.45em 0; border-bottom: 1px solid var(--lumen-line);
	}
	.oneuser:last-child, .userlistarea li:last-child { border-bottom: 0; }
	/* 人の識別。円形は「誰か」を顔として読む慣習。写真鑑賞ではない */
	.oneusericon img, .userlistarea img {
		width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--lumen-line);
	}
	.oneuserlink, .userlistarea a { color: var(--lumen-ink-soft); font-weight: 600; }
	.oneuserlink:hover, .userlistarea a:hover { color: var(--lumen-accent); }
	.nowshowing { color: var(--lumen-accent); }
	/* 状態語はバッジ化せず、脇の注記として出す（サイドのトーンに合わせる） */
	.nowloggedin::after, .nowshowing::after {
		display: inline;
		margin-left: 0.35em;
		font-size: 0.7em;
		font-weight: 600;
		color: var(--lumen-faint);
	}
	.nowloggedin::after { content: "（ログイン中）"; }
	.nowshowing:not(.nowloggedin)::after { content: "（表示中）"; }
	.oneusername { font-weight: 600; }

	.freespaceedit {
		margin: 0.35rem 0 var(--lumen-space-4);
		font-size: var(--lumen-fs-xs);
	}
	.freespaceedit a {
		color: var(--lumen-muted);
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}
	.freespaceedit a:hover { color: var(--lumen-accent); }

	.subarea--notes .freespacebody {
		overflow-x: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
	/*
	  サイド画像 = 補足の挿絵（本文より弱い）。
	  全体が見える contain。高さ上限は本文を奪わないため（識別用の S サムネとは役割が違う）。
	*/
	.subarea .freespacebody img,
	.subarea .freespacebody video {
		display: block;
		max-width: 100%;
		max-height: 6.5rem;
		width: auto;
		height: auto;
		object-fit: contain;
	}

	/* cat-note は説明・アイコンのみ（名前の重複禁止）。中身があるときだけ表示 */
	.cat-note {
		display: flex;
		gap: var(--lumen-space-3);
		align-items: flex-start;
		margin: 0 0 var(--lumen-space-4);
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--lumen-muted);
		font-size: var(--lumen-fs-sm);
		line-height: 1.55;
	}
	.cat-note[hidden] { display: none !important; }
	.cat-note__icon:empty { display: none; }
	.cat-note__icon img {
		width: 2.5rem; height: 2.5rem;
		border-radius: var(--lumen-radius-sm);
		object-fit: cover;
	}
	.cat-note__desc { margin: 0; }
	.cat-note__desc:empty { display: none; }

	.about-lead {
		margin: 0 0 var(--lumen-space-5);
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}
	/* はじめに = 読む本文。一覧の投稿（.comment）と同じ字サイズ */
	.about-lead__body {
		font-size: var(--lumen-fs-md);
		line-height: var(--lumen-lh-body);
		max-width: 40rem;
		color: var(--lumen-ink);
		text-wrap: pretty;
	}
	.about-lead__body:empty { display: none; }
	.about-lead__body > p:last-child { margin-bottom: 0; }


	.nodata,
	.nolist {
		margin: var(--lumen-space-5) 0;
		padding: var(--lumen-space-5);
		border: 1px dashed var(--lumen-line-strong);
		border-radius: var(--lumen-radius-lg);
		background: var(--lumen-surface);
		color: var(--lumen-muted);
		text-align: center;
		font-size: var(--lumen-fs-sm);
	}

	.passkeyform {
		margin: 0 0 var(--lumen-space-4); padding: var(--lumen-space-5);
		border: 1px dashed var(--lumen-line-strong); border-radius: var(--lumen-radius-lg); background: var(--lumen-surface);
	}
	.passkeyinput {
		min-height: 2.4rem;
		padding: 0.4em 0.7em;
		border: 2px solid var(--lumen-line);
		border-radius: var(--lumen-radius-md);
		background: var(--lumen-surface-2);
	}
	.passkeysubmit {
		min-height: var(--lumen-touch-min); padding: 0.45em 1em; border: 0; border-radius: var(--lumen-radius-md);
		background: var(--lumen-accent); color: var(--lumen-on-accent); font-weight: 700; cursor: pointer;
	}
	.passkeyerror { color: var(--lumen-danger); font-weight: 600; }

	.to-top {
		position: fixed;
		right: var(--lumen-page-gutter);
		bottom: var(--lumen-page-gutter);
		z-index: 30;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.5rem;
		padding: 0.35em 0.7em;
		border-radius: var(--lumen-radius-sm);
		border: 1px solid var(--lumen-line);
		background: var(--lumen-surface);
		color: var(--lumen-ink-soft);
		text-decoration: none;
		font-size: 0.75rem;
		font-weight: 700;
		box-shadow: none;
		opacity: 0;
		pointer-events: none;
		transition:
			opacity var(--lumen-duration) var(--lumen-ease),
			color var(--lumen-duration) var(--lumen-ease),
			border-color var(--lumen-duration) var(--lumen-ease);
	}
	.to-top.is-visible {
		opacity: 1;
		pointer-events: auto;
	}
	.to-top:hover { color: var(--lumen-accent); border-color: var(--lumen-accent); }
	.to-top[hidden] { display: none !important; }

	/* 狭い画面用ドック。広い画面ではヘッダの明るさだけを使う（二重にしない） */
	.read-dock {
		display: none;
	}

	/* シート用 UI は狭い画面のメディアクエリでだけ出す（ドック本体は上で非表示） */
	.tools-sheet__head,
	.tools-backdrop {
		display: none;
	}

	@media (max-width: 1023px) {
	/* 探す（検索・分類）だけシート。フリースペース等は本文の下に置く */
	.side { display: contents; }
	.tools-sheet__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		margin: 0 0 var(--lumen-space-3);
		padding: 0 0 0.65rem;
		border-bottom: 1px solid var(--lumen-line);
	}
	/* 探すシートの題名は道具のラベル（UI） */
	.tools-sheet__title {
		margin: 0;
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		font-family: var(--lumen-font);
		font-size: var(--lumen-fs-sm);
		font-weight: 600;
		color: var(--lumen-ink);
	}
	.tools-sheet__title .lumen-ico {
		width: 1.15em;
		height: 1.15em;
		color: var(--lumen-accent);
	}
	.tools-sheet__close {
		appearance: none;
		min-height: 2.5rem;
		padding: 0.35em 0.75em;
		border: 0;
		background: transparent;
		color: var(--lumen-ink-soft);
		font-size: var(--lumen-fs-sm);
		font-weight: 600;
		cursor: pointer;
	}
	.tools-sheet__close:hover { color: var(--lumen-accent); }

	.tools-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 48;
		margin: 0;
		padding: 0;
		border: 0;
		background: color-mix(in srgb, #0b1216 42%, transparent);
		cursor: pointer;
	}
	.tools-backdrop[hidden] { display: none !important; }

	.subarea--tools {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: grid;
		gap: var(--lumen-space-3);
		width: 100%;
		max-height: min(82vh, 36rem);
		margin: 0;
		padding: 1rem var(--lumen-page-gutter);
		padding-bottom: calc(1rem + var(--lumen-dock-h, 3.15rem));
		overflow: auto;
		overscroll-behavior: contain;
		background: var(--lumen-surface);
		border-top: 1px solid var(--lumen-line);
		transform: translateY(110%);
		visibility: hidden;
		pointer-events: none;
		transition:
			transform 220ms var(--lumen-ease),
			visibility 220ms;
	}
	html[data-tools="1"] .subarea--tools {
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
	}
	.subarea--notes {
		position: relative;
		transform: none;
		visibility: visible;
		pointer-events: auto;
		max-height: none;
		overflow: visible;
		background: transparent;
		border-top: 1px solid color-mix(in srgb, var(--lumen-line) 70%, transparent);
		padding: var(--lumen-space-5) var(--lumen-page-gutter);
		padding-bottom: calc(var(--lumen-space-5) + 0.25rem);
		scroll-margin-bottom: calc(var(--lumen-dock-h, 3.15rem) + 1rem);
		scroll-margin-top: 4.5rem;
	}
	html[data-tools="1"] {
		overflow: hidden;
	}
	html[data-tools="1"] .read-dock {
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}
	/* 探すシートが開いているとき、ドックの「探す」を使用中として示す */
	html[data-tools="1"] .read-dock__find {
		color: var(--lumen-ink);
		box-shadow: inset 0 -1px 0 var(--lumen-ink);
	}

	.read-dock {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		align-items: center;
		justify-content: space-between;
		gap: 0.35rem 0.45rem;
		min-height: 3.15rem;
		padding: 0.35rem var(--lumen-page-gutter);
		padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
		border-top: 1px solid color-mix(in srgb, var(--lumen-line) 75%, transparent);
		background: color-mix(in srgb, var(--lumen-bg) 94%, var(--lumen-surface));
		box-sizing: border-box;
		transition:
			transform 200ms var(--lumen-ease),
			opacity 200ms var(--lumen-ease);
	}
	.read-dock.is-away {
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}
	.read-dock__theme,
	.read-dock__font,
	.read-dock__find,
	.read-dock__notes,
	.read-dock__home,
	.read-dock__top {
		appearance: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.5rem;
		padding: 0.3em 0.6em;
		border: 0;
		background: transparent;
		color: var(--lumen-ink-soft);
		font-size: 0.75rem;
		font-weight: 600;
		font-family: inherit;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		flex: 0 1 auto;
	}
	.read-dock__theme {
		display: inline-flex;
		color: var(--lumen-ink-soft);
	}
	.read-dock__theme[data-theme-now="light"],
	.read-dock__theme[data-theme-now="dark"],
	.read-dock__theme[data-theme-now="auto"] {
		color: var(--lumen-ink);
		box-shadow: inset 0 -1px 0 var(--lumen-ink);
	}
	.read-dock__theme:hover,
	.read-dock__font:hover,
	.read-dock__find:hover,
	.read-dock__notes:hover,
	.read-dock__home:hover,
	.read-dock__top:hover {
		color: var(--lumen-accent);
	}
	.read-dock__top[hidden] { display: none !important; }
	.read-dock__home { display: none; }

	body.mode-about .read-dock__find {
		display: none !important;
	}
	body.onelog .read-dock__home {
		display: inline-flex;
	}
	.panel > summary { min-height: 2.75rem; }
	.panel > summary {
		display: flex;
		align-items: center;
		gap: 0.45em;
	}
	.panel > summary .lumen-ico {
		width: 1.05em;
		height: 1.05em;
		color: var(--lumen-accent);
		opacity: 0.9;
	}
	.site-footer__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0.35rem 0.75rem;
	}
	.pict-tile__ctrl {
		display: flex;
		gap: 0.25rem;
		justify-content: center;
	}
	.pict-detail__search a {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		text-decoration: none;
	}

	.pagenavi { padding-bottom: var(--lumen-space-4); }
	.pagenavi__prevnext {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.35rem 0.75rem;
	}
	.pagenavi a {
		min-height: 2.75rem;
		padding-inline: 0.75em;
	}

	.stream-meta {
		margin-bottom: var(--lumen-space-4);
	}
	}

	@media (max-width: 380px) {
		.read-dock__theme,
		.read-dock__font,
		.read-dock__find,
		.read-dock__notes,
		.read-dock__home,
		.read-dock__top {
			padding-inline: 0.35em;
			font-size: 0.68rem;
		}
		.read-dock {
			gap: 0.2rem;
		}
	}

	/* 画像拡大中はドックを退ける */
	html:has(.lumen-lightbox[open]) .read-dock {
		display: none !important;
	}


	.mainarea:focus { outline: none; }
	.mainarea:focus-visible {
		outline: 2px solid var(--lumen-accent);
		outline-offset: 2px;
	}

	@media (max-width: 719px) {
		.onelog__header { flex-direction: column; align-items: flex-start; }
		.onelog__author, .onelog__meta { width: 100%; }
		.onelog__meta {
			justify-content: flex-start;
			font-size: 0.8125rem;
			gap: 0.4em 0.75em;
		}
		.stream-meta { font-size: 0.8125rem; }
		.onelogbox {
			padding-block: 1.5rem;
		}
		.comment {
			font-size: 1.125rem;
			line-height: 1.9;
		}
		/* 埋め込み枠サイズは .cardlink 付近のメディアクエリで管理（ここで小さくしない） */
		/* 狭い画面の検索 */
		.searchinputs,
		#complexsearch p.searchbox {
			flex-wrap: nowrap;
		}
		.searchbox .queryinput,
		#complexsearch .queryinput {
			flex: 1 1 auto;
			min-width: 0;
		}
		.subarea {
			margin-top: var(--lumen-space-2);
			padding-top: var(--lumen-space-2);
			border-top: 1px solid var(--lumen-line);
		}
		.panel > summary {
			min-height: var(--lumen-touch-min);
		}
	}

	/* タブレット: 1カラム、検索は下 */
	@media (min-width: 720px) and (max-width: 1023px) {
		.shell {
			max-width: min(42rem, 100%);
			padding-block: var(--lumen-space-5);
		}
		.postarea {
			max-width: min(42rem, 100%);
		}
		.site-header__inner {
			max-width: min(42rem, 100%);
		}
		.site-footer__inner {
			max-width: min(42rem, 100%);
		}
		.subarea {
			margin-top: var(--lumen-space-4);
			padding-top: var(--lumen-space-4);
			border-top: 1px solid var(--lumen-line);
		}
		.panel > summary {
			min-height: 2.5rem;
		}
	}
}


@layer cgi {

/*
  埋め込みリンク（CGI: .cardlink / cardsize-S|L）

  本文中の参照の強さ。一覧の穴埋め装飾でも広告カードでもない。

  作者が選ぶ意味をスキンが歪めない:
    S = 参照 …… 読書を止めず行き先が分かる（題名が主、画像は手がかり）
    L = 提示 …… 絵を含めて判断してほしい（全体が見えるプレビュー）

  共通: 左線のみ（引用と同じ）。塗り・影・角丸・ overflow で切る演出はしない。
*/
.cardlink {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1em;
	padding: 0;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}
.cardlink:visited { color: inherit; }
.cardlink:focus { outline: none; }
.cardlink:focus-visible {
	outline: 2px solid var(--lumen-accent);
	outline-offset: 2px;
}

.cardlinkbox {
	display: flex;
	align-items: center;
	/* hidden だとモバイルで画像が「途切れた」ように見える原因になるので使わない */
	overflow: visible;
	width: 100%;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	box-sizing: border-box;
	border-inline-start: 2px solid color-mix(in srgb, var(--lumen-line-strong) 80%, transparent);
	transition: border-color var(--lumen-duration) var(--lumen-ease);
}
.cardlink:hover .cardlinkbox {
	border-inline-start-color: var(--lumen-accent);
}
.cardlink:hover .cardlinktitle { color: var(--lumen-accent); }

.cardlinkimage {
	display: block;
	flex: 0 0 auto;
	background-color: color-mix(in srgb, var(--lumen-surface-2) 88%, var(--lumen-line));
	background-image: none;
	background-position: center;
	background-repeat: no-repeat;
}
.cardlinkimage:not([style*="url("]):not([style*="url ("]) {
	display: none;
}

.cardlinktextbox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15em;
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.cardlinktitle,
.cardlinkdescription,
.cardlinkurl {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-clamp: 1;
	-webkit-line-clamp: 1;
	margin: 0;
}

.cardlinktitle {
	font-weight: 600;
	color: var(--lumen-ink);
	font-size: var(--lumen-fs-sm);
	line-height: 1.35;
	line-clamp: 2;
	-webkit-line-clamp: 2;
}

.cardlinkdescription {
	color: var(--lumen-muted);
	font-size: var(--lumen-fs-xs);
	line-height: 1.4;
	line-clamp: 2;
	-webkit-line-clamp: 2;
}
.cardlinkdescription:empty { display: none; }

.cardlinkurl {
	color: var(--lumen-faint);
	font-size: var(--lumen-status-fs);
	letter-spacing: 0.01em;
}

/*
  S: 参照（PC・モバイル共通で横並び）
  題名＋ドメインが先に読める。画像は左の短い手がかり。
  下へ積み替えると「落ちた・切れた」印象になり、参照の簡潔さも失うのでやらない。
*/
.cardsize-S {
	flex-direction: row;
	align-items: center;
	gap: 0.65em;
}
.cardsize-S .cardlinkimage {
	width: calc(var(--lumen-embed-s-h) * var(--lumen-embed-og-ratio));
	height: var(--lumen-embed-s-h);
	max-width: 38%;
	margin: 0;
	align-self: center;
	background-size: cover;
}
.cardsize-S .cardlinktextbox {
	padding: 0.05em 0.1em 0.05em 0;
}
.cardsize-S .cardlinkimage:not([style*="url("]):not([style*="url ("]) ~ .cardlinktextbox {
	padding-inline-start: 0.85em;
}

/*
  L: 提示
  作者／相手が L を選ぶ＝画像を重要な情報として見せたい、という意図を受け取る。
  幅は本文カラムいっぱい（題名インデントに揃える）。高さは OGP 比から決める。
  中は contain で欠けない。
  高さ上限で幅を縮め横空白を作るのはやめる
  （空白に読みやすさの効果がなく、提示を弱めるだけだった）。
  max-height は極端な縦長画面用の安全弁。通常の日誌幅では幅いっぱいになる。
*/
.cardsize-L {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.cardsize-L .cardlinktextbox {
	order: 1;
	padding: 0.1em 0 0.5em 0.85em;
	justify-content: flex-start;
}
.cardsize-L .cardlinkimage {
	order: 2;
	margin: 0 0 0 0.85em;
	width: min(
		calc(100% - 0.85em),
		calc(min(70vh, 22rem) * var(--lumen-embed-og-ratio))
	);
	max-width: calc(100% - 0.85em);
	aspect-ratio: var(--lumen-embed-og-ratio) / 1;
	height: auto;
	background-size: contain;
}
.cardsize-L .cardlinktitle {
	font-size: var(--lumen-fs-md);
	line-height: 1.4;
}

@media (min-width: 1024px) {
	:root {
		--lumen-embed-s-h: 4.5rem;
	}
}

@media (max-width: 719px) {
	:root {
		--lumen-embed-s-h: 3.5rem;
	}
	.cardsize-S {
		gap: 0.55em;
	}
	.cardsize-S .cardlinkimage {
		max-width: 34%;
	}
	.cardsize-L .cardlinkimage {
		/* 狭い画面でも本文幅いっぱい＝L の提示を弱めない */
		width: calc(100% - 0.85em);
		max-width: calc(100% - 0.85em);
	}
}

/* 文字装飾 */
.decorationB { font-weight: 700; }

.decorationD {
	color: var(--lumen-faint);
	text-decoration: line-through;
	text-decoration-color: var(--lumen-danger);
}

.decorationE {
	font-weight: 700;
	color: var(--lumen-accent);
	background: var(--lumen-accent-soft);
	padding: 0 0.2em;
	border-radius: 0.2em;
}

.decorationI { font-style: italic; }

/* 引用も埋め込みリンクと同じ「他人の声」言語（塗りカードにしない） */
.decorationQ {
	display: block;
	margin: 1em 0;
	padding: 0.15em 0 0.15em 0.85em;
	border-left: 2px solid var(--lumen-accent);
	border-radius: 0;
	background: transparent;
	color: var(--lumen-ink-soft);
	font-size: 0.95em;
}

.decorationQ::before,
.decorationQ::after { content: none; }

.decorationQ + br { display: none; }

.decorationS { font-size: 0.85em; color: var(--lumen-ink-soft); }
.decorationT { font-size: 0.72em; color: var(--lumen-muted); }

.decorationU {
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-decoration-color: color-mix(in srgb, var(--lumen-accent) 65%, transparent);
	text-underline-offset: 0.18em;
}

.decorationC { color: var(--lumen-danger); }
.decorationM {
	background: color-mix(in srgb, var(--lumen-warm) 22%, transparent);
	padding: 0 0.15em;
	border-radius: 0.15em;
}

/* decorationH（隠す）には背景を付けない */
.decorationH {
	background: transparent;
	padding: 0;
}

.decorationL {
	display: block;
	margin: 0.75em 0;
	padding-left: 1em;
	border-left: 2px solid var(--lumen-line-strong);
}

.decorationO { outline: 1px dashed var(--lumen-line-strong); padding: 0 0.2em; }

/* 本文・フリースペース・はじめに 共通 */
:is(.comment, .freespacebody, .about-lead__body) {
	overflow-wrap: anywhere;
	word-break: normal;
	line-height: inherit;
}
:is(.comment, .freespacebody, .about-lead__body) > *:first-child { margin-top: 0; }
:is(.comment, .freespacebody, .about-lead__body) > *:last-child { margin-bottom: 0; }

.freespacebody {
	font-size: var(--lumen-fs-sm);
	line-height: 1.7;
	color: var(--lumen-ink-soft);
	min-width: 0;
	max-width: 100%;
}
.freespacebody:empty { display: none; }

/* 本文中の見出しは同じ書体で、太さと大きさだけ一段上 */
:is(.comment, .freespacebody, .about-lead__body) h1,
:is(.comment, .freespacebody, .about-lead__body) h2,
:is(.comment, .freespacebody, .about-lead__body) h3,
:is(.comment, .freespacebody, .about-lead__body) h4,
:is(.comment, .freespacebody, .about-lead__body) h5,
:is(.comment, .freespacebody, .about-lead__body) h6 {
	margin: 1.25em 0 0.45em;
	font-family: var(--lumen-font);
	font-weight: 700;
	line-height: var(--lumen-lh-tight);
	color: var(--lumen-ink);
	letter-spacing: 0.01em;
	text-wrap: balance;
}
:is(.comment, .freespacebody, .about-lead__body) h1 { font-size: 1.35em; }
:is(.comment, .freespacebody, .about-lead__body) h2 { font-size: 1.22em; }
:is(.comment, .freespacebody, .about-lead__body) h3 { font-size: 1.1em; }
:is(.comment, .freespacebody, .about-lead__body) h4,
:is(.comment, .freespacebody, .about-lead__body) h5,
:is(.comment, .freespacebody, .about-lead__body) h6 { font-size: 1em; color: var(--lumen-ink-soft); }

:is(.comment, .freespacebody, .about-lead__body) p {
	margin: 0 0 0.85em;
}
:is(.comment, .freespacebody, .about-lead__body) p:last-child { margin-bottom: 0; }

:is(.comment, .freespacebody, .about-lead__body) ul,
:is(.comment, .freespacebody, .about-lead__body) ol {
	margin: 0 0 0.9em;
	padding-left: 1.35em;
}
:is(.comment, .freespacebody, .about-lead__body) li { margin: 0.25em 0; }
:is(.comment, .freespacebody, .about-lead__body) li > ul,
:is(.comment, .freespacebody, .about-lead__body) li > ol { margin: 0.25em 0 0.35em; }

:is(.comment, .freespacebody, .about-lead__body) dl {
	margin: 0 0 0.9em;
}
:is(.comment, .freespacebody, .about-lead__body) dt {
	margin: 0.55em 0 0.15em;
	font-weight: 700;
	color: var(--lumen-ink);
}
:is(.comment, .freespacebody, .about-lead__body) dd {
	margin: 0 0 0.35em 1em;
	color: var(--lumen-ink-soft);
}

:is(.comment, .freespacebody, .about-lead__body) hr {
	margin: 1.25em 0;
	border: 0;
	border-top: 1px solid var(--lumen-line);
}

:is(.comment, .freespacebody, .about-lead__body) strong,
:is(.comment, .freespacebody, .about-lead__body) b { font-weight: 700; color: var(--lumen-ink); }
:is(.comment, .freespacebody, .about-lead__body) em,
:is(.comment, .freespacebody, .about-lead__body) i { font-style: italic; }
:is(.comment, .freespacebody, .about-lead__body) small {
	font-size: 0.88em;
	color: var(--lumen-muted);
}
:is(.comment, .freespacebody, .about-lead__body) mark {
	background: color-mix(in srgb, var(--lumen-warm) 28%, transparent);
	color: inherit;
	padding: 0 0.15em;
}
:is(.comment, .freespacebody, .about-lead__body) sup,
:is(.comment, .freespacebody, .about-lead__body) sub { font-size: 0.75em; line-height: 0; }

:is(.comment, .freespacebody, .about-lead__body) a {
	overflow-wrap: anywhere;
}
.about-lead__body a,
.freespacebody a {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.18em;
}

:is(.comment, .freespacebody, .about-lead__body) img,
:is(.comment, .freespacebody, .about-lead__body) video {
	max-width: 100%;
	height: auto;
	border-radius: var(--lumen-radius-sm);
}
:is(.comment, .freespacebody, .about-lead__body) figure {
	margin: 1em 0;
	max-width: 100%;
}
:is(.comment, .freespacebody, .about-lead__body) figcaption {
	margin-top: 0.4em;
	font-size: var(--lumen-fs-xs);
	color: var(--lumen-muted);
	line-height: 1.5;
}

/* 引用・コード */
:is(.comment, .freespacebody, .about-lead__body) blockquote,
blockquote:not(.twitter-tweet) {
	margin: 0.9em 0;
	padding: 0.65em 0.9em;
	border-left: 3px solid var(--lumen-accent);
	background: var(--lumen-surface-2);
	border-radius: 0 var(--lumen-radius-sm) var(--lumen-radius-sm) 0;
	color: var(--lumen-ink-soft);
}
:is(.comment, .freespacebody, .about-lead__body) blockquote > *:first-child { margin-top: 0; }
:is(.comment, .freespacebody, .about-lead__body) blockquote > *:last-child { margin-bottom: 0; }

:is(.comment, .freespacebody, .about-lead__body) pre,
pre {
	margin: 0.9em 0;
	padding: 0.85em 1em;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	border: 1px solid var(--lumen-line);
	border-radius: var(--lumen-radius-sm);
	background: var(--lumen-surface-2);
	font-family: var(--lumen-font-mono);
	font-size: var(--lumen-fs-sm);
	line-height: 1.55;
	tab-size: 2;
}

:is(.comment, .freespacebody, .about-lead__body) code,
code {
	font-family: var(--lumen-font-mono);
	font-size: 0.92em;
}

:is(.comment, .freespacebody, .about-lead__body) :not(pre) > code {
	padding: 0.1em 0.35em;
	border-radius: var(--lumen-radius-sm);
	background: var(--lumen-surface-2);
	border: 1px solid var(--lumen-line);
}

:is(.comment, .freespacebody, .about-lead__body) details,
details.deco-fold {
	margin: 0.85em 0;
	padding: 0.35em 0.75em 0.6em;
	border: 1px solid var(--lumen-line);
	border-radius: var(--lumen-radius-sm);
	background: var(--lumen-surface-2);
}

:is(.comment, .freespacebody, .about-lead__body) details > summary,
details.deco-fold > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--lumen-ink);
	padding: 0.35em 0;
}

.deco-code {
	display: inline-block;
	max-width: 100%;
	font-family: var(--lumen-font-mono);
	font-size: 0.9em;
	padding: 0.1em 0.4em;
	border-radius: var(--lumen-radius-sm);
	background: var(--lumen-surface-2);
	border: 1px solid var(--lumen-line);
	color: var(--lumen-ink);
	overflow-wrap: anywhere;
	word-break: break-all;
}

.deco-separator {
	display: block;
	margin: 1em 0;
	border-bottom: 1px dashed var(--lumen-line-strong);
}

.deco-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: flex-start;
}

.deco-scream {
	font-size: 1.35em;
	font-weight: 700;
}

/* 画像・埋め込み */
.embeddedpictbox {
	display: inline-table;
	margin: 0.4em 0.4em 0.4em 0;
	border: 1px solid var(--lumen-line);
	border-radius: var(--lumen-radius-md);
	overflow: hidden;
	background: var(--lumen-surface-2);
	vertical-align: top;
	border-collapse: collapse;
}

.embeddedpictbox figcaption {
	display: table-caption;
	caption-side: bottom;
	padding: 0.4em 0.65em;
	font-size: var(--lumen-fs-xs);
	color: var(--lumen-muted);
	background: var(--lumen-surface);
}

.embeddedpictbox img,
.embeddedimage {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--lumen-radius-md);
}

figure.embeddedvideo,
.embeddedmovie,
.embeddedyoutube,
.embeddednicovideo {
	margin: 1em 0;
	max-width: 100%;
}

.embeddedmovie iframe,
.embeddedyoutube iframe,
.embeddednicovideo iframe,
:is(.comment, .freespacebody, .about-lead__body) iframe {
	display: block;
	width: 100%;
	max-width: 40rem;
	aspect-ratio: 16 / 9;
	height: auto;
	min-height: 12rem;
	border: 0;
	border-radius: var(--lumen-radius-sm);
	background: var(--lumen-surface-2);
}
.subarea--notes .freespacebody iframe {
	max-width: 100%;
	min-height: 10rem;
}

video.embeddedvideo {
	display: block;
	width: 100%;
	max-width: 36rem;
	border-radius: var(--lumen-radius-md);
	background: #000;
}

/* 表 */
:is(.comment, .freespacebody, .about-lead__body) table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	border-collapse: collapse;
	margin: 0.85em 0;
	font-size: var(--lumen-fs-sm);
}
:is(.comment, .freespacebody, .about-lead__body) th,
:is(.comment, .freespacebody, .about-lead__body) td {
	padding: 0.4em 0.65em;
	border: 1px solid var(--lumen-line);
	text-align: left;
	vertical-align: top;
	min-width: 4.5rem;
}
:is(.comment, .freespacebody, .about-lead__body) th {
	background: var(--lumen-surface-2);
	font-weight: 700;
	color: var(--lumen-ink);
}

/* Tweet埋め込み */
.twitter-tweet {
	margin: 1em auto !important;
}

/* 隠す／続きを読む */
.readmorearea {
	margin: 0.35em 0 0.75em;
}

.readmorebutton {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 2.1rem;
	margin: 0.15em 0;
	padding: 0.3em 0.75em;
	border-radius: var(--lumen-radius-sm);
	border: 1px solid var(--lumen-line);
	background: var(--lumen-surface);
	color: var(--lumen-ink-soft);
	font-size: var(--lumen-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	vertical-align: baseline;
}

.readmorebutton:link,
.readmorebutton:visited {
	color: var(--lumen-ink-soft);
	background: var(--lumen-surface);
}

.readmorebutton:hover {
	border-color: var(--lumen-accent);
	color: var(--lumen-accent);
	background: var(--lumen-accent-soft);
}

/* 検索ハイライト */
.searchword {
	font-weight: 700;
	background: color-mix(in srgb, var(--lumen-warm) 28%, transparent);
	color: inherit;
	padding: 0 0.12em;
}

/* 本文内ハッシュタグ */
.comment a[href*="tag="],
.hashtag {
	color: var(--lumen-accent);
	font-weight: 500;
	text-decoration: none;
}

.comment a[href*="tag="]:hover {
	text-decoration: underline;
}

/* 投稿フォーム周辺の補助UI */
.hashtagEasyInput, .hashIns, .decoDoor6BuPB, .funcDoor6BuPB, .catDoor6BuPB, .hashDoor6BuPB { font-size: var(--lumen-fs-sm); }

/* 公式ライトボックス: 色だけ合わせる（寸法を触ると操作が壊れやすい） */
.lightboxOverlay {
	background: color-mix(in srgb, #0b1216 82%, transparent) !important;
}
.lb-caption,
.lb-number {
	font-family: var(--lumen-font);
	font-size: var(--lumen-fs-sm);
}

/* スキン側の画像ビューア（リンクなし画像など） */
.lumen-zoomable {
	cursor: zoom-in;
}
.lumen-lightbox {
	padding: 0;
	border: 0;
	max-width: min(96vw, 72rem);
	max-height: min(92vh, 56rem);
	width: auto;
	background: transparent;
	color: #e8eef3;
}
.lumen-lightbox::backdrop {
	background: color-mix(in srgb, #0b1216 82%, transparent);
}
.lumen-lightbox__figure {
	margin: 0;
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	padding: 2.75rem 3.25rem 2rem;
}
.lumen-lightbox__img {
	display: block;
	max-width: min(92vw, 68rem);
	max-height: min(78vh, 48rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--lumen-radius-md);
	background: #000;
}
.lumen-lightbox__cap {
	margin: 0;
	max-width: 40rem;
	text-align: center;
	font-size: var(--lumen-fs-sm);
	color: #c5d0da;
}
.lumen-lightbox__chrome {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	margin: 0;
}
.lumen-lightbox__close {
	appearance: none;
	min-height: 2.5rem;
	padding: 0.35em 0.85em;
	border: 1px solid color-mix(in srgb, #fff 35%, transparent);
	border-radius: var(--lumen-radius-md);
	background: color-mix(in srgb, #141c22 88%, transparent);
	color: #fff;
	font-weight: 700;
	font-size: var(--lumen-fs-sm);
	cursor: pointer;
}
.lumen-lightbox__close:focus-visible,
.lumen-lightbox__nav:focus-visible {
	outline: 2px solid var(--lumen-accent);
	outline-offset: 2px;
}
.lumen-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	appearance: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid color-mix(in srgb, #fff 30%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, #141c22 88%, transparent);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.lumen-lightbox__nav:disabled {
	opacity: 0.35;
	cursor: default;
}
.lumen-lightbox__prev { left: 0.35rem; }
.lumen-lightbox__next { right: 0.35rem; }
.lumen-lightbox__status {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.45rem;
	margin: 0;
	text-align: center;
	font-size: var(--lumen-fs-xs);
	color: #9aa7b4;
}
@media (max-width: 600px) {
	.lumen-lightbox__figure { padding: 3rem 0.5rem 2.25rem; }
	.lumen-lightbox__nav {
		width: 2.5rem;
		height: 2.5rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lumen-lightbox::backdrop { backdrop-filter: none; }
}

}
@layer states {
	/*
	  サイド補足が空なら出さない。
	  投稿者は2人目から「中身」と数える（1人は公開UIに出さない）。
	*/
	.subarea--notes:not(:has(.freespacebody:not(:empty))):not(:has(.userlist .oneuser:nth-child(2))) {
		display: none;
	}
	body:not(:has(#site-notes .freespacebody:not(:empty))):not(:has(#site-notes .userlist .oneuser:nth-child(2))) .read-dock__notes,
	body:not(:has(#site-notes .freespacebody:not(:empty))):not(:has(#site-notes .userlist .oneuser:nth-child(2))) a.skip-link[href="#site-notes"] {
		display: none !important;
	}

	/* 未ログイン時は編集リンク等を隠す（FOUC対策） */
	.loginNO .editlink,
	.loginNO .freespaceedit,
	.loginNO .length,
	.level0 .editlink,
	.level0 .freespaceedit,
	.level1 .editlink,
	.level1 .freespaceedit {
		display: none !important;
	}

	/* 個別ページ: サイドバーは一覧と同じ。投稿欄だけ出さない */
	body.onelog .postarea { display: none; }
	body.onelog .onelogbox {
		border-bottom: 0;
	}
	/* 個別ページでも日付・No. は同じ投稿URL（共有用） */
	body.onelog a.onelog__date,
	body.onelog a.onelog__id {
		color: var(--lumen-muted);
		text-decoration-color: transparent;
	}
	body.onelog a.onelog__date:hover,
	body.onelog a.onelog__id:hover {
		color: var(--lumen-accent);
		text-decoration-color: var(--lumen-accent);
	}
	body.onelog .pagenavi {
		margin-top: var(--lumen-space-7);
		padding-top: var(--lumen-space-5);
		border-top: 1px solid var(--lumen-line);
		gap: var(--lumen-space-4);
	}
	body.onelog .pagenavi::before {
		content: "前後の投稿";
		display: block;
		font-size: var(--lumen-fs-xs);
		font-weight: 700;
		letter-spacing: 0.02em;
		color: var(--lumen-muted);
	}
	/* 個別ではページ番号を出さない */
	body.onelog .pagenavi__pages { display: none; }
	body.onelog .pagenavi__prevnext {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem 1.25rem;
	}
	
	body.onelog .pagenavi__home a {
		color: var(--lumen-accent);
		font-weight: 700;
		text-decoration-thickness: 0.1em;
	}

	body.mode-about .postarea { display: none; }
	/* はじめに = FREESPACE:1（0番以外）。サイド補足は FREESPACE:0。探す／サイドは出さない */
	body.mode-about .subarea--tools,
	body.mode-about .subarea--notes,
	body.mode-about .read-dock__notes {
		display: none !important;
	}
	body.mode-about .shell {
		grid-template-columns: minmax(0, min(var(--lumen-read-max), 100%));
		justify-content: center;
	}
	body.mode-about a.skip-link[href="#tools"],
	body.mode-about a.skip-link[href="#site-notes"] {
		display: none !important;
	}
	/* 件数そのものは絞り込時のみ（.stream-meta の display で制御） */
	body.onelog .stream-meta,
	body.mode-about .stream-meta,
	body.mode-sitemap .stream-meta,
	body.mode-picts .stream-meta {
		display: none !important;
	}

	/* 個別ページで番号の重複を避ける */
	body.onelog .situation { display: none !important; }

	/* はじめには投稿一覧を出さない */
	body.mode-about .stream,
	body.mode-about .pagenavi { display: none !important; }
	body.mode-about .nodata,
	body.mode-about .nolist { display: none; }
	body.mode-picts .comment img,
	body.mode-picts .pict-detail__media img { width: 100%; max-width: 100%; }
	body.mode-sitemap .sitemap-row__title { font-size: var(--lumen-fs-sm); }

	/* 画像ファイル: 未ログイン時は一覧を出さない */
	body.loginNO.mode-picts .stream,
	body.loginNO.mode-picts .stream-meta,
	body.loginNO.mode-picts .pagenavi {
		display: none !important;
	}

	/* NSFW（てがろぐ標準） */
	figure.nsfw,
	.imagelink.nsfw,
	a.nsfw {
		overflow: hidden;
	}
	img.nsfw {
		filter: blur(9px);
		transition: filter var(--lumen-duration) var(--lumen-ease);
		cursor: pointer;
	}
	@media (hover: hover) {
		figure.nsfw:hover img.nsfw,
		a.nsfw:hover img.nsfw,
		img.nsfw:hover {
			filter: none;
		}
	}
	figure.nsfw:focus-within img.nsfw,
	a.nsfw:focus img.nsfw,
	img.nsfw:focus,
	img.nsfw.is-revealed {
		filter: none !important;
	}

	/* カスタム絵文字 */
	img.cemoji,
	/* 絵文字は字形より視覚重心が低いので、行の中で少し沈める（装飾ズレではない） */
	.cemoji img,
	img[class^="ce-"],
	img[class*=" ce-"] {
		height: 1.35em;
		width: auto;
		max-width: 2.5em;
		vertical-align: -0.2em;
	}

	/* 現在のページ番号 */
	a.pagenumhere {
		background: transparent !important;
		border: 0 !important;
		color: var(--lumen-ink) !important;
		font-weight: 700;
		text-decoration-thickness: 0.12em;
	}

	.logstatus-unlocked {
		border-inline-start: 2px solid var(--lumen-warm);
		padding-inline-start: 0.85rem;
	}

	/*
	  一人の日誌: 投稿ごとの名前・アイコンは読者に新しい情報を渡さない。
	  JS がパネルを消すと :has(.oneuser:only-child) が外れ再表示されるので、
	  「2人目がいない」ことと body.lumen-solo-author の両方で隠す。
	*/
	body.lumen-solo-author .panel--authors,
	body:not(:has(.userlist .oneuser:nth-child(2))) .panel--authors {
		display: none !important;
	}
	body.lumen-solo-author .onelog__author,
	body.lumen-solo-author .gallery-card__foot,
	body.lumen-solo-author .sitemap-row__meta > .username,
	body.lumen-solo-author .pict-detail__meta .onelog__author,
	body.lumen-solo-author .postuserid,
	body:not(:has(.userlist .oneuser:nth-child(2))) .onelog__author,
	body:not(:has(.userlist .oneuser:nth-child(2))) .gallery-card__foot,
	body:not(:has(.userlist .oneuser:nth-child(2))) .sitemap-row__meta > .username,
	body:not(:has(.userlist .oneuser:nth-child(2))) .pict-detail__meta .onelog__author,
	body:not(:has(.userlist .oneuser:nth-child(2))) .postuserid {
		display: none !important;
	}
	/* 一人のとき: ヘッダは日付など読むためのメタだけ */
	body.lumen-solo-author .onelog__header,
	body:not(:has(.userlist .oneuser:nth-child(2))) .onelog__header {
		justify-content: flex-start;
	}
	body.lumen-solo-author .onelog__meta,
	body:not(:has(.userlist .oneuser:nth-child(2))) .onelog__meta {
		justify-content: flex-start;
		flex: 1 1 auto;
	}
	/* ギャラリー等 */
	body.mode-gallery .stream {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
		gap: var(--lumen-space-5) var(--lumen-space-4);
	}
	body.mode-gallery .gallery-card {
		border: 0;
		border-radius: 0;
		background: transparent;
		padding: 0;
		border-bottom: 0;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
	}
	body.mode-gallery .gallery-card__media {
		display: block;
		overflow: hidden;
		border-radius: var(--lumen-radius-sm);
		background: var(--lumen-surface-2);
		text-decoration: none;
		color: inherit;
	}
	body.mode-gallery .gallery-card__media:focus {
		outline: none;
	}
	body.mode-gallery .gallery-card__media:focus-visible {
		outline: 2px solid var(--lumen-accent);
		outline-offset: 2px;
	}
	/*
	  一覧は同じマスで見比べるUI。
	  正方形は SNS グリッド都合。日誌の写真は横長が多いので 4:3 にする
	  （見比べやすさを保ちつつ、被写体を過度に落とさない）。
	*/
	body.mode-gallery .gallery-card__media img {
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--lumen-radius-sm);
	}
	body.mode-gallery .gallery-card__title {
		margin: 0;
		font-size: var(--lumen-fs-sm);
		font-weight: 600;
		line-height: 1.45;
		color: var(--lumen-ink);
	}
	body.mode-gallery .gallery-card__title a {
		color: inherit;
		text-decoration: none;
	}
	body.mode-gallery .gallery-card__title a:hover {
		color: var(--lumen-accent);
	}
	body.mode-gallery .gallery-card__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.35em 0.65em;
		margin: 0;
		font-size: var(--lumen-fs-xs);
		color: var(--lumen-muted);
		line-height: var(--lumen-status-lh);
	}
	body.mode-gallery .gallery-card__foot {
		margin: 0;
		font-size: var(--lumen-fs-xs);
		color: var(--lumen-muted);
	}
	body.mode-gallery .gallery-card__meta a {
		color: var(--lumen-muted);
		text-decoration: none;
	}
	body.mode-gallery .gallery-card__meta a:hover {
		color: var(--lumen-accent);
	}
	body.mode-picts .stream {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
		gap: var(--lumen-space-3);
	}
	body.mode-picts.mode-view .stream,
	body.onelog.mode-picts .stream {
		display: block;
	}
	.pict-tile {
		border: 0;
		border-radius: 0;
		background: transparent;
		padding: 0 0 var(--lumen-space-3);
	}
	.pict-tile__media {
		position: relative;
	}
	/* 画像一覧もギャラリーと同じ思想（見比べ＋横長写真への配慮） */
	.pict-tile__media img {
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--lumen-radius-sm);
	}
	/*
	  タイル上の新着は文字行がないので、画像の「状態」として角に置く。
	  字の型はメタ行の新着と同じ（別バッジ言語にしない）。
	*/
	.pict-tile__media .newsign:not(:empty) {
		position: absolute;
		top: 0.4rem;
		inset-inline-start: 0.4rem;
		z-index: 1;
		padding: 0.1em 0.3em;
		background: color-mix(in srgb, var(--lumen-surface) 88%, transparent);
		color: var(--lumen-ink-soft);
	}
	.pict-tile__ctrl {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		margin: 0.4em 0 0;
		font-size: var(--lumen-fs-xs);
	}
	.pict-detail__title { margin: 0 0 var(--lumen-space-3); font-size: var(--lumen-fs-xl); }
	.pict-detail__meta { list-style: none; margin: var(--lumen-space-4) 0 0; padding: 0; font-size: var(--lumen-fs-sm); color: var(--lumen-muted); }
	.sitemap-row {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--lumen-line);
	}
	.sitemap-row__title {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.35em 0.55em;
		margin: 0 0 0.35em;
		font-weight: 600;
		line-height: 1.4;
	}
	.sitemap-row__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.35em 0.85em;
		margin: 0;
		font-size: var(--lumen-fs-xs);
		line-height: var(--lumen-status-lh);
		color: var(--lumen-muted);
	}

	@media print {
		body { background: #fff; color: #000; }
		.site-header, .postarea, .side, .subarea, .site-nav, .reader-controls, .read-dock,
		.pagenavi, .editlink, .skip-link, .to-top, .stream-meta { display: none !important; }
		.shell { display: block; max-width: none; padding: 0; }
		.mainarea {
			border: 0;
			padding: 0;
			background: #fff;
		}
		.onelogbox { break-inside: avoid; border-bottom: 1px solid #ccc; }
	}

	@media (prefers-contrast: more) {
		:root { --lumen-line: #8a96a3; --lumen-line-strong: #5a6570; }
		.panel, .postform { border-width: 2px; }
		.pagenavi a { text-decoration-thickness: 0.12em; }
	}

	@media (forced-colors: active) {
		.panel,
		.nav-btn,
		.cardlinkbox {
			border: 1px solid CanvasText;
		}
		.pagenavi a { text-decoration: underline; }
	}

	@media (pointer: coarse), (max-width: 600px) {
		.onelog__id, .onelog__date, .editlink a, .categorylink, .hashtaglist a,
		.onelog__tags a, .dateseparator a,
		.footer-nav a, .oneuserlink,
		.search-complex-wrap > summary {
			min-height: var(--lumen-touch-min);
			display: inline-flex;
			align-items: center;
			padding: 0.35em 0.55em;
			box-sizing: border-box;
		}
		.nav-btn {
			min-height: var(--lumen-touch-min);
			display: inline-flex;
			align-items: center;
			white-space: nowrap;
			box-sizing: border-box;
		}
		/* タッチしやすい高さ。狭すぎる min-width で文字が縦にならないように */
		.seg__item {
			min-height: var(--lumen-touch-min);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0.35em 0.65em;
			box-sizing: border-box;
			white-space: nowrap;
		}
		.pagenavi a { min-width: var(--lumen-touch-min); }
		.decoBtns input { min-width: var(--lumen-touch-min); min-height: var(--lumen-touch-min); }
		.passkeyinput, .passkeysubmit,
		.searchbox input[type="text"], .searchbox input[type="search"], .searchbox .submitbutton,
		#complexsearch .submitbutton, #complexsearch input[type="submit"] {
			min-height: var(--lumen-touch-min);
		}
	}

	@media (max-width: 719px) {
		/* ヘッダは sticky のまま（is-away と矛盾させない） */
		.to-top {
			width: 2.5rem;
			height: 2.5rem;
			bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
			right: max(0.75rem, env(safe-area-inset-right, 0px));
		}
	}
}


/* ========== Lumen icons (mask / icon-font equivalent) ========== */
.lumen-ico {
	display: inline-block;
	width: 1.125em;
	height: 1.125em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--lumen-ico) center / contain no-repeat;
	mask: var(--lumen-ico) center / contain no-repeat;
	vertical-align: -0.14em;
	pointer-events: none;
	opacity: 0.92;
}
.lumen-icon-btn:hover .lumen-ico,
.seg__item:hover .lumen-ico,
a:hover > .lumen-ico {
	opacity: 1;
}
.lumen-ico--md { width: 1.25em; height: 1.25em; }
.lumen-ico--lg { width: 1.4em; height: 1.4em; }
.lumen-ico--search { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.25%22%2F%3E%3Cpath%20d%3D%22m15.2%2015.2%204.3%204.3%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--home { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2011%2012%204.5%2019.5%2011v8.2a.8.8%200%200%201-.8.8H5.3a.8.8%200%200%201-.8-.8V11z%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--gear { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M12%203.5v2.2m0%2012.6v2.2M3.5%2012h2.2m12.6%200h2.2M6.1%206.1l1.6%201.6m8.6%208.6%201.6%201.6M6.1%2017.9l1.6-1.6m8.6-8.6%201.6-1.6%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--sun { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M12%203.8v1.8m0%2012.8v1.8M3.8%2012h1.8m12.8%200h1.8%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--moon { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.6%203.8A7.8%207.8%200%201%200%2020.2%2014%206.2%206.2%200%200%201%2015.6%203.8z%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--theme-auto { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M12%204v16%22%20stroke-width%3D%221.75%22%2F%3E%3Cpath%20d%3D%22M12%204a8%208%200%200%200%200%2016%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--close { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%206.5%2017.5%2017.5M17.5%206.5%206.5%2017.5%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--up { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2018.5V5.5m0%200L7%2010.5m5-5%205%205%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--chevron-left { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m14.5%206-6%206%206%206%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--chevron-right { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9.5%206%206%206-6%206%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--images { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225.5%22%20width%3D%2216%22%20height%3D%2213%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22m4%2014.5%204.2-3.4%203.3%202.6%203-2.2L20%2015%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--info { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M12%2011v5.2%22%2F%3E%3Cpath%20d%3D%22M12%207.6h.01%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--plus { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205.5v13M5.5%2012h13%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--edit { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.2%206.2%2017.8%2010.8%22%2F%3E%3Cpath%20d%3D%22M5.5%2018.5%206.8%2014.2%2015.6%205.4a1.4%201.4%200%200%201%202%200l1%201a1.4%201.4%200%200%201%200%202L9.8%2017.2%205.5%2018.5z%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--trash { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%207.5h14m-1.2%200-.7%2011.2a1.4%201.4%200%200%201-1.4%201.3H8.3a1.4%201.4%200%200%201-1.4-1.3L6.2%207.5m2.3%200V6a1.4%201.4%200%200%201%201.4-1.4h4.2A1.4%201.4%200%200%201%2015.5%206v1.5%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--bookmark { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.5%204.5h9a1%201%200%200%201%201%201v14l-5.5-3.2L7.5%2019.5v-14a1%201%200%200%201%201-1z%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--rss { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2018.2a1.2%201.2%200%201%200%200-2.4%201.2%201.2%200%200%200%200%202.4z%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M5.5%2012.2a6%206%200%200%201%206.3%206.3M5.5%207.2A11%2011%200%200%201%2016.8%2018.5%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--list { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%207.5h10M9%2012h10M9%2016.5h10M5.2%207.5h.01M5.2%2012h.01M5.2%2016.5h.01%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--image { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225.5%22%20width%3D%2216%22%20height%3D%2213%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22m4%2015%204-3.2%203.2%202.5%202.8-2.1L20%2015.2%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--notes { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%224.5%22%20width%3D%2212%22%20height%3D%2215%22%20rx%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M9%209h6M9%2012.5h6M9%2016h4%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--calendar { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225.5%22%20width%3D%2216%22%20height%3D%2214%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M4%2010h16M8%203.8v3.2m8-3.2v3.2%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--tag { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19.5%2012.2%2012.2%204.9H5.5v6.7l7.3%207.3%206.7-6.7z%22%2F%3E%3Ccircle%20cx%3D%228.6%22%20cy%3D%228.6%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--folder { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208a1.5%201.5%200%200%201%201.5-1.5H9l1.8%201.8H18.5A1.5%201.5%200%200%201%2020%2010v7.5a1.5%201.5%200%200%201-1.5%201.5h-13A1.5%201.5%200%200%201%204%2017.5V8z%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--layers { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%205%207.5%204L12%2013%204.5%209%2012%205z%22%2F%3E%3Cpath%20d%3D%22m4.5%2013%207.5%204%207.5-4%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--sort { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%207.5h9M5%2012h13M5%2016.5h7%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--font-sans { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%2018.5%2012%205.5l5.5%2013%22%2F%3E%3Cpath%20d%3D%22M8.8%2013.5h6.4%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--font-serif { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%2018.5%2012%205.5l5.5%2013%22%2F%3E%3Cpath%20d%3D%22M8.6%2013.2h6.8%22%2F%3E%3Cpath%20d%3D%22M5.5%2018.5h3M15.5%2018.5h3M10.2%205.5h3.6%22%2F%3E%3C%2Fsvg%3E"); }
.lumen-ico--hash { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.2%204.5%207.5%2019.5M16.5%204.5%2014.8%2019.5M4.5%209h15M4%2015h15%22%2F%3E%3C%2Fsvg%3E"); }

/* アイコンのみ操作。ラベルは aria-label / title / .u-sr-only */
.lumen-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-width: var(--lumen-touch-min);
	min-height: var(--lumen-touch-min);
	padding: 0.35em;
	line-height: 1;
}
.lumen-icon-btn .lumen-ico {
	width: 1.25em;
	height: 1.25em;
}

/* ヘッダ明るさ: アイコンのみ */
.seg__item {
	min-width: 2.1rem;
	padding: 0.25em;
}
.seg__item .lumen-ico {
	width: 1.05em;
	height: 1.05em;
}

/* ナビ: アイコンのみ（意味は title / aria-label） */
.site-nav .nav-btn.lumen-icon-btn {
	min-width: 2.35rem;
	padding: 0.35em;
}
.site-nav .nav-btn--primary.lumen-icon-btn {
	min-width: 2.5rem;
}

/* ドック: アイコンのみ（表示／非表示は既存の .read-dock__home 等を維持） */
.read-dock__theme,
.read-dock__font,
.read-dock__find,
.read-dock__notes,
.read-dock__home,
.read-dock__top {
	min-width: 2.75rem;
	padding: 0.35em;
	font-size: 1rem;
}
/* 上書きで home を常時表示にしない */
body:not(.onelog) .read-dock__home { display: none !important; }
body.onelog .read-dock__home { display: inline-flex; }
.read-dock__top[hidden] { display: none !important; }

.read-dock__theme .lumen-ico,
.read-dock__font .lumen-ico,
.read-dock__find .lumen-ico,
.read-dock__notes .lumen-ico,
.read-dock__home .lumen-ico,
.read-dock__top .lumen-ico {
	width: 1.3em;
	height: 1.3em;
}
.read-dock__theme[data-theme-now="auto"] .lumen-ico { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M12%204v16%22%20stroke-width%3D%221.75%22%2F%3E%3Cpath%20d%3D%22M12%204a8%208%200%200%200%200%2016%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.read-dock__theme[data-theme-now="light"] .lumen-ico { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M12%203.8v1.8m0%2012.8v1.8M3.8%2012h1.8m12.8%200h1.8%22%2F%3E%3C%2Fsvg%3E"); }
.read-dock__theme[data-theme-now="dark"] .lumen-ico { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.6%203.8A7.8%207.8%200%201%200%2020.2%2014%206.2%206.2%200%200%201%2015.6%203.8z%22%2F%3E%3C%2Fsvg%3E"); }

/* 上へ（広い画面） */
.to-top {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.45em;
	font-size: 1rem;
}
.to-top .lumen-ico { width: 1.25em; height: 1.25em; }

/* 探すシート閉じる */
.tools-sheet__close.lumen-icon-btn {
	min-width: 2.5rem;
	padding: 0.35em;
}

/* ライトボックス */
.lumen-lightbox__close {
	min-width: 2.5rem;
	padding: 0.45em;
	font-size: 1rem;
}
.lumen-lightbox__close .lumen-ico,
.lumen-lightbox__nav .lumen-ico {
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
}
.lumen-lightbox__nav {
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* 検索送信をアイコン化（input は疑似要素不可のため背景SVG） */
.searchbox .submitbutton,
#complexsearch .submitbutton,
#complexsearch input[type="submit"] {
	width: var(--lumen-touch-min);
	min-width: var(--lumen-touch-min);
	min-height: var(--lumen-touch-min);
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
	text-indent: -999px;
	overflow: hidden;
	background-color: var(--lumen-accent);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.25%22%2F%3E%3Cpath%20d%3D%22m15.2%2015.2%204.3%204.3%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.15rem 1.15rem;
	border: 0;
	border-radius: var(--lumen-radius-md);
	cursor: pointer;
	box-shadow: 0 0 0 0 transparent;
	transition: background-color var(--lumen-duration) var(--lumen-ease), box-shadow var(--lumen-duration) var(--lumen-ease);
}
@media (hover: hover) {
	.searchbox .submitbutton:hover,
	#complexsearch .submitbutton:hover,
	#complexsearch input[type="submit"]:hover {
		background-color: var(--lumen-accent-hover);
		box-shadow: 0 0 16px var(--lumen-accent-glow);
	}
}
html:has(#theme-dark:checked) .searchbox .submitbutton,
html:has(#theme-dark:checked) #complexsearch .submitbutton,
html:has(#theme-dark:checked) #complexsearch input[type="submit"],
html[data-theme="dark"] .searchbox .submitbutton,
html[data-theme="dark"] #complexsearch .submitbutton,
html[data-theme="dark"] #complexsearch input[type="submit"] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230e1216%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.25%22%2F%3E%3Cpath%20d%3D%22m15.2%2015.2%204.3%204.3%22%2F%3E%3C%2Fsvg%3E");
}
@media (prefers-color-scheme: dark) {
	html[data-theme="auto"] .searchbox .submitbutton,
	html[data-theme="auto"] #complexsearch .submitbutton,
	html[data-theme="auto"] #complexsearch input[type="submit"],
	html:not([data-theme]) .searchbox .submitbutton {
		background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230e1216%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.25%22%2F%3E%3Cpath%20d%3D%22m15.2%2015.2%204.3%204.3%22%2F%3E%3C%2Fsvg%3E");
	}
}

/* フッタ・文脈・編集をアイコン化 */
.footer-nav a.lumen-icon-btn {
	min-width: 2.35rem;
	color: var(--lumen-muted);
	text-decoration: none;
}
.footer-nav a.lumen-icon-btn:hover {
	color: var(--lumen-accent);
}
.context-bar__back {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}
.context-bar__back::before { content: none; }
.context-bar__back .lumen-ico {
	width: 1em;
	height: 1em;
	color: var(--lumen-faint);
}
.editlink a.lumen-icon-btn,
.deletelink a.lumen-icon-btn {
	min-width: 1.85rem;
	min-height: 1.85rem;
	padding: 0.2em;
	text-decoration: none;
	border: 0;
}
.editlink a .lumen-ico,
.deletelink a .lumen-ico {
	width: 1.05em;
	height: 1.05em;
}
.deletelink a:hover { color: var(--lumen-danger); }

/* ページ送りアイコン（JSが .lumen-ico を挿入） */
.pagenavi a.prevlink,
.pagenavi a.nextlink {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}
.pagenavi a.prevlink.lumen-icon-only,
.pagenavi a.nextlink.lumen-icon-only,
.pagenavi .pagehome a.lumen-icon-only {
	min-width: 2.75rem;
	justify-content: center;
	gap: 0;
	font-size: 0;
}
.pagenavi a.lumen-icon-only .lumen-ico {
	width: 1.25em;
	height: 1.25em;
	font-size: 1rem;
}

/* 控えめネオン: 主ボタンと使用中状態だけ弱い光 */
.nav-btn--primary {
	box-shadow: 0 0 0 0 transparent;
}
@media (hover: hover) {
	.nav-btn--primary:hover {
		box-shadow: 0 0 18px var(--lumen-accent-glow);
	}
}
html[data-tools="1"] .read-dock__find {
	color: var(--lumen-ink);
	box-shadow: inset 0 -1px 0 var(--lumen-ink);
}
a:hover {
	text-decoration-color: color-mix(in srgb, var(--lumen-accent) 55%, transparent);
}

/* 個人利用: 投稿者UIは出さない */
body.lumen-personal .panel--authors,
body.lumen-personal .onelog__author,
body.lumen-personal .postuserid,
body.lumen-personal .gallery-card__foot {
	display: none !important;
}
body.lumen-personal .poweredby,
body.lumen-personal .backlink:empty {
	display: none !important;
}

/* サイドのラベルをアイコン化 */
.tools-sheet__title.lumen-icon-label,
.panel > summary.lumen-icon-label,
.subblock__title.lumen-icon-label,
.search-complex-wrap > summary.lumen-icon-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
.panel > summary.lumen-icon-label {
	display: flex;
}
.lumen-icon-label .lumen-ico {
	width: 1.05em;
	height: 1.05em;
	color: var(--lumen-accent);
	opacity: 0.95;
}
.search-date-hint { display: none; }

.solabel.lumen-icon-label {
	display: inline-flex;
	align-items: center;
	min-width: 1.5rem;
}
.solabel.lumen-icon-label .lumen-ico {
	width: 1.05em;
	height: 1.05em;
	color: var(--lumen-muted);
}

.read-dock__font {
	min-width: 2.75rem;
	padding: 0.35em;
	font-size: 1rem;
}
.read-dock__font .lumen-ico {
	width: 1.3em;
	height: 1.3em;
}
.read-dock__font[data-font-now="sans"] .lumen-ico { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%2018.5%2012%205.5l5.5%2013%22%2F%3E%3Cpath%20d%3D%22M8.8%2013.5h6.4%22%2F%3E%3C%2Fsvg%3E"); }
.read-dock__font[data-font-now="serif"] .lumen-ico { --lumen-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%2018.5%2012%205.5l5.5%2013%22%2F%3E%3Cpath%20d%3D%22M8.6%2013.2h6.8%22%2F%3E%3Cpath%20d%3D%22M5.5%2018.5h3M15.5%2018.5h3M10.2%205.5h3.6%22%2F%3E%3C%2Fsvg%3E"); }
.read-dock__font[data-font-now="sans"],
.read-dock__font[data-font-now="serif"] {
	color: var(--lumen-ink);
	box-shadow: inset 0 -1px 0 var(--lumen-ink);
}