.app-page {
	--app-drawer-width: 280px;
	--app-work-image-width: 150px;
	min-height: 100vh;
	overflow-x: clip;
	background: #f5f7f6;
	/* テキスト階層。--app-ink=見出し/主要, --app-ink-2=本文・説明, --app-ink-3=メタ・ラベル・補助。
	   以前は#8a969a〜#7a868b のような近似グレーが50種以上散らばっていて、
	   ライトモードでコントラスト比3.0程度(WCAG AA 4.5未満)の読めない文字が大量にあった。 */
	--app-ink-2: #4f5b61;
	--app-ink-3: #616d73;
	--app-tag-surface: #f5f7f6;
	--app-tag-border: #d8dfde;
	--app-danger: #b04752;
	/* 注意(警告)。危険(--app-danger)ほど強くないが、中立でもない状態に使う。
	   例: プロフィールの「除外中」「ステキミュート中」(表示を絞るだけで、相手からは見える)。 */
	--app-warn: #8a5a10;
	--app-accent-text: #16728e;
	--app-accent-text: color-mix(in srgb, var(--welcome-accent-dark) 88%, #000);
	/* PREMIUMバッジ専用。読ませる文字ではなく「有料である」ことの添え字なので、
	   文字色(--app-accent-text)より一段淡くして見出しより主張させない。
	   置き場所が3か所(ドロワー・プロフィール・各設定行)あるので必ずここで一括指定する。 */
	--app-premium-badge: color-mix(in srgb, var(--welcome-accent-dark) 85%, #fff);
	--app-ink-disabled: #8a959a;
	/* アクセントの面と線。ドメインごとに色が変わるので、各所に色を直接書かずここから引く。
	   pictBLandは今までの値をそのまま置いている(見え方を変えないため)。
	   他のドメインは下の .welcome-site--* で、そのサイトの色から作り直す。 */
	--app-accent-bright: var(--app-accent-text);
	--app-accent-line: var(--welcome-accent-dark);
	--app-accent-strong: var(--welcome-accent-dark);
	--app-accent-on-surface: var(--app-accent-text);
	--app-accent-surface: #edf3f2;
	--app-accent-surface-strong: #e8f2f2;
	--app-accent-surface-hover: #dcecec;
	color: var(--welcome-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
	-webkit-font-smoothing: antialiased;
	color-scheme: light;
}

/* pictBLand以外は、淡い面もそのサイトの色から作る(青い面だけが残らないように)。 */
.welcome-site--pictmalfem .app-page,
.welcome-site--pictgland .app-page {
	--app-accent-surface: color-mix(in srgb, var(--site-accent) 12%, #fff);
	--app-accent-surface-strong: color-mix(in srgb, var(--site-accent) 18%, #fff);
	--app-accent-surface-hover: color-mix(in srgb, var(--site-accent) 28%, #fff);
}
.app-page svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* CKEditorのアイコンは塗り(fill)で描かれている。上の共通ルール(線アイコン用のfill:none+stroke)が
   被さると輪郭だけが太く描かれて潰れて見えるため、CKEditor配下だけ塗りに戻す。
   サイズはCKEditor側の.ck-iconが持っているのでここでは触らない。 */
.app-page .ck svg { fill: currentColor; stroke: none; }
.app-skip { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 8px 14px; border-radius: 9px; background: var(--welcome-ink); color: #fff; transform: translateY(-160%); transition: transform 160ms var(--welcome-ease-out); }
.app-skip:focus { transform: translateY(0); }
.app-surface { min-height: 100vh; transition: transform 180ms var(--welcome-ease-out); }
.app-page.is-menu-open .app-surface { transform: translateX(var(--app-drawer-width)); }
.app-drawer { position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--app-drawer-width); overflow-y: auto; padding: 18px 14px; border-right: 1px solid #dfe5e4; background: #fff; transform: translateX(-100%); transition: transform 180ms var(--welcome-ease-out); }
.app-page.is-menu-open .app-drawer { transform: translateX(0); }
.app-drawer__profile { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 54px; padding: 4px 8px 14px; }
.app-drawer__avatar { position: relative; width: 42px; height: 42px; }
.app-drawer__avatar img { display: block; width: 42px; height: 42px; border-radius: 50%; background: #eef2f1; object-fit: cover; }
.app-drawer__profile strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.app-drawer__premium-badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; color: var(--app-premium-badge); }
.app-drawer__premium-badge i { font-size: 12px; }
.app-drawer__settings { display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; border: 1px solid #dce3e2; border-radius: 50%; background: #fff; color: var(--app-ink-2); font-size: 15px; text-decoration: none; transition: transform 140ms var(--welcome-ease-out), border-color 160ms ease, color 160ms ease; }
.app-drawer__settings:active { transform: scale(.96); }
.app-drawer__settings[aria-current="page"] { border-color: var(--welcome-accent-dark); background: var(--app-accent-surface); color: var(--app-accent-text); }
/* プレミアムの有効期限。プロフィール欄(3カラムのグリッド)の下に1行で敷く。 */
.app-drawer__premium-limit { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; margin: 2px 0 -6px; padding: 6px 8px; border-radius: 8px; background: var(--app-accent-surface); color: var(--app-ink-2); font-size: 12px; font-weight: 700; line-height: 1.45; text-decoration: none; }
.app-drawer__premium-limit i { flex: 0 0 auto; color: var(--app-premium-badge); font-size: 12px; }
.app-drawer__premium-limit.is-soon { background: #fff6df; color: #80682e; }
.app-drawer__premium-limit.is-soon i { color: #80682e; }
.app-drawer__notice { display: block; margin: 0 2px 10px; padding: 10px 11px; border-radius: 8px; background: #fff6df; color: #80682e; font-size: 12px; font-weight: 800; text-decoration: none; }
.app-drawer nav { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid #edf0ef; }
.app-drawer nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 9px; color: var(--app-ink-2); font-size: 14px; font-weight: 750; line-height: 1.4; text-decoration: none; }
.app-drawer nav a i { width: 18px; margin-right: 11px; flex: 0 0 auto; color: var(--app-ink-3); font-size: 15px; text-align: center; }
.app-drawer nav a.is-active { background: var(--app-accent-surface); color: var(--app-accent-text); }
.app-drawer nav a.is-active i { color: var(--app-accent-text); }
.app-drawer nav a b { display: inline-grid; min-width: 17px; height: 17px; margin-left: auto; padding: 0 4px; place-items: center; border-radius: 999px; background: #d75c68; color: #fff; font-size: 12px; }
.app-drawer__section-label { margin: 15px 11px 5px; color: var(--app-ink-3); font-size: 12px; font-weight: 850; letter-spacing: .1em; }
.app-drawer__group { border-top: 1px solid #edf0ef; }
.app-drawer__group summary { position: relative; min-height: 44px; padding: 0 34px 0 12px; cursor: pointer; color: var(--app-ink-2); font-size: 14px; font-weight: 800; line-height: 44px; list-style: none; }
.app-drawer__group summary::-webkit-details-marker { display: none; }
.app-drawer__group summary::after { position: absolute; top: 50%; right: 13px; content: '+'; font-size: 17px; font-weight: 500; transform: translateY(-50%); }
.app-drawer__group[open] summary::after { content: '−'; }
.app-drawer__group > div { display: grid; padding: 2px 0 10px 10px; }
.app-drawer__group > div a { min-height: 38px; font-size: 13px; }
.app-drawer nav .app-drawer__services a i { width: auto; margin-right: 0; margin-left: auto; font-size: 12px; }
.app-drawer nav a em { margin-left: auto; color: #d8b86e; font-size: 12px; font-style: normal; letter-spacing: .05em; }
/* 区切り線を自分のborder-topで引くと、線と余白まで押した範囲(＝フォーカス枠や
   ホバーの下地)に入ってしまい、文字より上へはみ出して見える。
   線は外側に置き、ボタン自体は他の項目と同じ1行の箱にする。 */
.app-drawer nav .app-drawer__logout { position: relative; margin: 13px 2px 2px; padding: 0 12px; color: var(--app-danger); }
.app-drawer nav .app-drawer__logout::before { content: ""; position: absolute; top: -7px; right: 0; left: 0; border-top: 1px solid #edf0ef; }
/* テーマ切り替えと同じ「表示の設定」のかたまりなので、間に線は引かない。
   区切りの線は、上のメニューとの境目(.app-drawer__theme-switch)に1本だけ。 */
.app-drawer__ui-switch { margin: 8px 2px 0; padding: 0 2px 2px; }
.app-drawer__ui-switch a { display: flex; min-height: 40px; align-items: center; justify-content: center; border: 1px solid #dce3e2; border-radius: 9px; color: var(--app-ink-2); font-size: 12px; font-weight: 800; text-decoration: none; }
/* 見出しとの間が空きすぎて、どのメニューに属するのか読み取りにくかった。
   線の上下の余白を詰めて、メニュー(行間2px)との差を付けすぎないようにする。 */
.app-drawer__theme-switch { display: flex; gap: 5px; margin: 6px 2px 0; padding: 6px 2px 2px; border-top: 1px solid #edf0ef; }
.app-drawer__theme-switch button { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 52px; align-items: center; justify-content: center; gap: 4px; border: 1px solid #dce3e2; border-radius: 9px; background: #fff; color: var(--app-ink-2); font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; font-family: inherit; }
.app-drawer__theme-switch button.is-active { border-color: var(--welcome-accent-dark); background: var(--app-accent-surface); color: var(--app-accent-text); }
.app-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #e1e6e5; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }
.app-header__inner { display: grid; grid-template-columns: 88px 1fr 88px; align-items: center; width: min(1040px, calc(100% - 32px)); min-height: 62px; margin: 0 auto; }
.app-brand { display: inline-flex; justify-self: center; }
.app-brand img { width: 116px; height: auto; }
.app-brand__logo--dark { display: none; }
.app-brand--home { width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; color: var(--app-ink-2); }
.app-brand--home svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-menu-toggle, .app-icon-button { position: relative; display: grid; width: 40px; height: 40px; padding: 0; cursor: pointer; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--app-ink-2); text-decoration: none; transition: transform 140ms var(--welcome-ease-out), background-color 160ms ease, color 160ms ease; }
.app-menu-toggle { justify-self: start; }
.app-menu-toggle:active, .app-icon-button:active { transform: scale(.96); }
.app-page.is-menu-open .app-menu-toggle { background: #eef2f1; color: var(--app-accent-text); }
.app-header__actions { display: flex; justify-self: end; }
.app-header__search, .app-header__actions .app-header__search-detail { display: none; }
.app-header__search input { box-sizing: border-box; width: 100%; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #d8dfde; border-right: 0; border-radius: 10px 0 0 10px; background: #fff; color: var(--welcome-ink); font: inherit; font-size: 14px; }
.app-header__search input::placeholder { color: var(--app-ink-3); }
.app-header__search { border-radius: 10px; }
.app-header__search:focus-within { outline: 2px solid var(--welcome-accent-dark); outline-offset: 2px; }
.app-header__search input:focus-visible { outline: none; }
.app-header__search .section-button, .app-header__search-detail { flex: 0 0 auto; white-space: nowrap; }
.app-header__search .section-button { border-radius: 0 10px 10px 0; }
.app-icon-button b { position: absolute; top: 3px; right: 1px; display: grid; min-width: 16px; height: 16px; padding: 0 4px; place-items: center; border: 2px solid #fff; border-radius: 999px; background: #d75c68; color: #fff; font-size: 12px; line-height: 1; }
.home-main { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 72px; }
.home-mail-notice { display: grid; gap: 10px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #f0d991; border-radius: 10px; background: #fff3cd; color: #755400; font-size: 13px; line-height: 1.7; }
.home-mail-notice[hidden] { display: none; }
.responsive-pc-home-ad { display: none; }
.responsive-pc-right-ad { display: none; }
.home-mail-notice p { margin: 0; }
.home-mail-notice__actions { display: grid; justify-items: center; gap: 6px; }
.home-mail-notice__actions .section-button { min-height: 34px; padding: 6px 12px; border-color: #898989; background: #898989; color: #fff; font-size: 12px; text-decoration: none; }
.home-mail-notice__actions button { padding: 3px 8px; border: 0; background: none; color: var(--app-accent-text); font: inherit; font-size: 12px; cursor: pointer; }
.is-dark-theme .home-mail-notice { border-color: #6c5730; background: #352b1b; color: #f1d99e; }
/* 右カラムはPCサイズだけ。狭い画面では出さない(タイムラインの1カラムを優先する)。 */
.home-sidebar { display: none; }
.home-tabs-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; align-items: center; margin-bottom: 16px; }
.home-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.home-tabs::-webkit-scrollbar { display: none; }
.home-tabs a { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; color: var(--app-ink-2); font-size: 12px; font-weight: 750; text-decoration: none; }
.home-tabs a.is-active { background: var(--welcome-ink); color: #fff; }
.home-tabs__settings { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #dce3e2; border-radius: 50%; background: #fff; color: var(--app-ink-2); transition: transform 140ms var(--welcome-ease-out), border-color 160ms ease, color 160ms ease; }
.home-tabs__settings svg { width: 17px; height: 17px; }
.home-tabs__settings:active { transform: scale(.96); }
.home-feed { display: grid; gap: 12px; }
.home-blog-compose-trigger { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 25; min-height: 48px; padding: 0 20px; box-shadow: 0 12px 30px rgba(20,30,30,.24); }
.home-blog-compose__error { margin: 0; color: var(--app-error, #b42318); font-size: 13px; }
.home-blog-compose__error[hidden], [data-home-blog-attach][hidden] { display: none; }
@media (max-width: 959px) { .home-main:has(> .home-blog-compose-trigger) { padding-bottom: 112px; } }
@media (min-width: 960px) { .home-main > .home-blog-compose-trigger { position: static; display: flex; width: max-content; margin: 0 0 16px auto; box-shadow: none; } }
.home-sidebar__block { padding: 14px 15px; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; }
.home-sidebar__block h2 { margin: 0 0 10px; color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.home-sidebar__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.home-sidebar__list a { display: grid; gap: 2px; padding: 7px 8px; border-radius: 8px; color: var(--welcome-ink); font-size: 12px; text-decoration: none; }
.home-sidebar__list time { color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.home-sidebar__list span { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.home-sidebar__more { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 0 8px; color: var(--app-accent-text); font-size: 12px; font-weight: 800; text-decoration: none; }
.home-sidebar__empty { margin: 0; padding: 0 8px; color: var(--app-ink-3); font-size: 12px; }
/* 投稿ガイドラインはビットマップのバナーをやめて組版で出す。
   どの解像度でも文字がぼけず、ダークテーマにも追従し、読み上げにもそのまま乗る。 */
.home-sidebar__guideline { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 14px 15px; border: 1px solid var(--welcome-accent-dark); border-radius: 14px; background: var(--app-accent-surface-strong); color: var(--app-accent-text); text-decoration: none; }
.home-sidebar__guideline > i:first-child { font-size: 18px; }
.home-sidebar__guideline > i:last-child { font-size: 12px; opacity: .8; }
.home-sidebar__guideline span { display: grid; gap: 2px; }
.home-sidebar__guideline strong { font-size: 13px; font-weight: 800; }
.home-sidebar__guideline small { font-size: 12px; opacity: .85; }
/* 公式企画のロゴは実際のグラフィックなので画像のまま置く */
.home-sidebar__banner img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
/* 姉妹サービスは毎回1件だけをカードで紹介する(リンク集にすると素通りされるため) */
.home-sidebar__promo { display: grid; gap: 6px; color: var(--welcome-ink); text-decoration: none; }
/* 画像がある場合は用意されたカード画像そのもの(正方形)を切り取らずに見せる。
   無い場合だけ、高さを決めたアイコン面で代用する。 */
.home-sidebar__promo-visual { display: grid; place-items: center; overflow: hidden; border-radius: 10px; }
.home-sidebar__promo-visual:not(:has(img)) { height: 84px; background: color-mix(in srgb, var(--welcome-accent) 10%, #fff); color: var(--app-premium-badge); font-size: 26px; }
.home-sidebar__promo-visual img { display: block; width: 100%; height: auto; }
.home-sidebar__promo strong { font-size: 14px; font-weight: 800; }
.home-sidebar__promo small { color: var(--app-ink-3); font-size: 12px; line-height: 1.7; }
.home-sidebar__promo-cta { display: inline-flex; align-items: center; gap: 5px; color: var(--app-accent-text); font-size: 12px; font-weight: 800; }
.is-dark-theme .home-sidebar__promo { color: #edf1f3; }
.is-dark-theme .home-sidebar__promo-visual { background: #223139; }
.home-entry { display: grid; min-width: 0; gap: 8px; }
.home-entry__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.home-entry .comment-list, .home-entry .blog-timeline { border: 1px solid #e0e6e5; border-radius: 12px; padding: 0 14px; background: #fff; }
/* 詳細画面と同じ行をそのまま使うので本文が全文出る。フィードでは長すぎるので数行で打ち切る。 */
.home-entry .thread-timeline__text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.home-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 190px; overflow: hidden; border: 1px solid #e0e6e5; border-radius: 16px; background: #fff; }
.home-card__thumb { display: grid; min-height: 190px; overflow: hidden; place-items: center; background: #edf1f0; }
.home-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-card__thumb img.blur { filter: blur(12px); transform: scale(1.08); }
.home-card__body { display: flex; min-width: 0; flex-direction: column; padding: 20px 22px; }
.home-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 10px; color: var(--app-ink-3); font-size: 12px; font-weight: 750; }
.home-card__meta span { color: var(--app-accent-text); letter-spacing: .04em; }
.home-card__context { margin: -4px 0 5px; color: var(--app-ink-3); font-size: 12px; }
.home-card__title { color: var(--welcome-ink); font-size: 18px; font-weight: 800; line-height: 1.5; text-decoration: none; }
.home-card__excerpt { display: -webkit-box; overflow: hidden; margin: 7px 0 10px; color: var(--app-ink-2); font-size: 13px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-card__text-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.home-card__media { display: block; overflow: hidden; width: 64px; height: 64px; border-radius: 9px; background: #edf1f0; }
.home-card__media img { width: 100%; height: 100%; object-fit: cover; }
.home-card__badges, .home-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.home-card__badges span { padding: 3px 7px; border-radius: 5px; background: #f2eeee; color: #795d5d; font-size: 12px; font-weight: 800; }
.home-card__badges span.is-type { background: var(--app-accent-surface); color: var(--app-ink-2); }
.home-card__footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; }
.home-card__tags { min-width: 0; }
.home-card__tags span { color: var(--app-ink-3); font-size: 12px; }
.home-card__footer > a { flex: 0 0 auto; color: var(--app-ink-2); font-size: 12px; font-weight: 750; }
/* まとまった複数件は、先頭もそれ以外も同じカードのまま横一列に並べる。
   横へ続くことは (1)次カードの見切れ (2)端のグラデーション (3)常時表示のスクロールバー で示す。 */
.home-feed-strip { position: relative; min-width: 0; }
.home-feed-strip__viewport { position: relative; min-width: 0; }
.home-feed-strip__track { display: flex; min-width: 0; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-color: #c3cdcb transparent; scrollbar-width: thin; }
.home-feed-strip[data-scrollable="1"] .home-feed-strip__track { padding-bottom: 8px; }
.home-feed-strip__track::-webkit-scrollbar { height: 7px; }
.home-feed-strip__track::-webkit-scrollbar-thumb { border-radius: 4px; background: #c3cdcb; }
.home-feed-strip__track::-webkit-scrollbar-track { border-radius: 4px; background: #e6ebea; }
/* 88%止まりにするのは、1枚しか入らない幅でも必ず次のカードを見切れさせるため */
.home-feed-strip__track > * { flex: 0 0 min(340px, 88%); scroll-snap-align: start; }
/* カード幅が340pxだと本文カラムが150px画像に押されて読みにくいので、画像列を狭める */
.home-feed-strip__track > .history-work-card { grid-template-columns: 120px minmax(0,1fr); }
.home-feed-strip__track > .history-work-card .history-work-card__body { padding: 12px; }
/* 端のグラデーション。スクロールの余地がある側だけJSが1にする。 */
.home-feed-strip__viewport::before, .home-feed-strip__viewport::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 34px; opacity: 0; pointer-events: none; transition: opacity 140ms ease; }
.home-feed-strip__viewport::before { left: 0; background: linear-gradient(90deg, #f5f7f6, rgba(245,247,246,0)); }
.home-feed-strip__viewport::after { right: 0; background: linear-gradient(270deg, #f5f7f6, rgba(245,247,246,0)); }
.home-feed-strip[data-scroll-start="1"] .home-feed-strip__viewport::before, .home-feed-strip[data-scroll-end="1"] .home-feed-strip__viewport::after { opacity: 1; }
/* スクロールの余地が無いときにヒントを出すと嘘になるので、JSが1にした時だけ見せる */
.home-feed-strip__hint { display: none; align-items: center; gap: 5px; margin: 6px 0 0; color: var(--app-ink-3); font-size: 12px; font-weight: 700; }
.home-feed-strip[data-scrollable="1"] .home-feed-strip__hint { display: flex; }
.home-entry__count { padding: 1px 7px; border-radius: 99px; background: #e6ebea; color: var(--app-ink-2); font-size: 12px; }
.home-card--text { grid-template-columns: 58px minmax(0, 1fr); }
.home-card__mark { display: grid; margin: 18px 0 18px 18px; border-radius: 14px; background: color-mix(in srgb, var(--welcome-accent) 10%, #fff); color: var(--app-accent-text); font-size: 18px; font-weight: 900; place-items: center; }
.home-card--text .home-card__footer > span { color: var(--app-ink-3); font-size: 12px; }
.home-card--unavailable { min-height: 120px; }
.home-card--unavailable .home-card__mark { color: var(--app-ink-3); background: #f0f3f2; }
.home-empty { padding: 68px 24px; border: 1px dashed #cbd5d4; border-radius: 16px; background: rgba(255,255,255,.7); text-align: center; }
.home-empty h1 { margin: 0 0 8px; font-size: 18px; }
.home-empty p { margin: 0; color: var(--app-ink-3); font-size: 13px; }
.home-empty a { display: inline-flex; margin-top: 20px; padding: 8px 13px; border: 1px solid #d8dfde; border-radius: 9px; background: #fff; color: var(--welcome-ink); font-size: 12px; font-weight: 800; text-decoration: none; }
/* 番号ページャの代わりの追加読み込み。自動で継ぎ足しつつ、上限に達したらボタンに戻す。 */
/* 自動読み込み中は中身が全部hiddenになり高さ0になる。監視対象が高さ0だと
   IntersectionObserverが交差を報告しない実装があるため1pxだけ残す。 */
.home-more { display: grid; justify-items: center; gap: 8px; margin-top: 18px; min-height: 1px; }
.home-more__status, .home-more__end, .home-more__error { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.home-more__error { color: var(--app-danger); }
/* 読み込み中であることを見た目で伝える。止まって見えると二度押しされるため。 */
.home-more__spinner { width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid #d3dcda; border-top-color: var(--app-accent-text); border-radius: 50%; animation: home-more-spin 700ms linear infinite; }
@keyframes home-more-spin { to { transform: rotate(360deg); } }
.home-more .section-button--wide { width: min(320px, 100%); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; clip: rect(0,0,0,0); white-space: nowrap; }
.section-main { width: min(1080px, calc(100% - 32px)); box-sizing: border-box; margin: 0 auto; padding: 32px 0 72px; }
.post-layout { display: grid; gap: 24px; align-items: start; }
.post-layout__main { min-width: 0; }
.post-layout__hint { display: grid; gap: 14px; align-content: start; }
/* 広告枠。配信されなかったときに空白の帯だけが残らないよう、高さを先に取らない。
   広告が入らなかった枠は、差し込まれるiframeの高さが0になるのでそのまま潰れる。
   さらに、スクリプトが動かず中身が何も入らなかったときのために既定を display:none にし、
   要素が差し込まれたときだけ表示する(:has() はその変化に追従する)。
   余白も同じ条件で付け、空の枠が余白だけ残さないようにする。
   引き換えに、配信されたときは本文が下へずれる。 */
.ad-slot { display: none; }
.ad-slot:has([data-cptid] > *:not(script)) { display: grid; justify-items: center; overflow: hidden; }
.ad-slot--footer:has([data-cptid] > *:not(script)) { margin: 24px 0 0; }
/* 画面下に貼り付く枠。下部の操作(作品詳細のステキ等)と重ならないよう、
   配信されたときだけ本文側に余白を足す。
   :has() は入れ子にできないので、兄弟をたどる形で書く。 */
.ad-slot--overlay { position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; }
.app-page:has(~ .ad-slot--overlay [data-cptid] > *:not(script)) { padding-bottom: 60px; }
/* 旧PC版と同じ728×90の下部広告。配信が空なら操作を塞がず、余白も足さない。 */
body:has(.responsive-pc-ad-overlay.is-filled) .app-page { padding-bottom: 90px; }
body:has(.responsive-pc-ad-overlay.is-filled) .item-detail-page > .item-actions { bottom: 102px; }
body:has(.responsive-pc-ad-overlay.is-filled) .thread-compose-bar { bottom: 104px; }
body:has(.responsive-pc-ad-overlay.is-filled) .form-submit { bottom: 102px; }
body:has(.responsive-pc-ad-overlay.is-filled) .bulk-select-bar { bottom: 104px; }
/* ドロワーを開いている間は、画面下に貼り付くものを隠す。
   ドロワー(z-index:60)より手前に出るので、メニューの一番下(ログアウト)に重なって押せない。
   #geniee_overlay_outer はGenieeのインタースティシャルがbody直下に差し込む枠で、
   z-indexが10億・display:blockを自前のスタイルシートで当ててくるため !important で上書きする。 */
.app-page.is-menu-open ~ .ad-slot--overlay { display: none; }
.app-page.is-menu-open ~ #geniee_overlay_outer { display: none !important; }
/* 貼り付く広告の「×」(#geniee_overlay_close)は13pxの黒いSVGで、下敷きを持たない。
   枠そのものは背景を持たないので、後ろの画面がそのまま透ける。
   ライトテーマでは明るい画面に黒い×で読めるが、ダークテーマでは黒に黒で消える。
   枠に白を敷くとダークテーマで白い帯が出てしまうので、敷くのは×の下だけにして、
   テーマに合わせて下敷きと×の色をひっくり返す。 */
#geniee_overlay_close { border-radius: 50%; background-color: rgba(255,255,255,.85) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.85); }
.is-dark-theme #geniee_overlay_close { background-color: rgba(16,19,24,.85) !important; box-shadow: 0 0 0 3px rgba(16,19,24,.85); }
.is-dark-theme #geniee_overlay_close polygon { fill: #fff !important; stroke: #fff !important; }
/* インタースティシャルは、全画面の割り込みを閉じたあとも画面下100pxに帯として残る。
   下端に貼り付く操作(ステキ・書き込み・保存・一括選択)がその下に隠れるので、
   帯があるあいだだけ持ち上げる。旧SP版も同じ100pxを下駄として履かせていた。
   スマートフォンにしか出さないので、PCサイズには影響しない。 */
body:has(#geniee_overlay_outer) .item-detail-page > .item-actions { bottom: calc(100px + max(12px, env(safe-area-inset-bottom))); }
body:has(#geniee_overlay_outer) .thread-compose-bar { bottom: 114px; }
body:has(#geniee_overlay_outer) .form-submit { bottom: 112px; }
body:has(#geniee_overlay_outer) .bulk-select-bar { bottom: 114px; }
.section-layout > .post-layout__hint { display: none; }
.hint-panel { display: grid; gap: 14px; padding: 20px; border: 1px solid #e0e6e5; border-radius: 15px; background: #f7f9f8; }
.hint-panel h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--welcome-ink); font-size: 14px; }
.hint-panel h2 i { color: #d8b86e; }
.hint-panel h3 { margin: 0; color: var(--welcome-ink); font-size: 15px; }
.hint-panel > p { margin: 0; color: var(--app-ink-3); font-size: 13px; line-height: 1.7; }
.hint-panel > p a { color: var(--app-accent-text); font-weight: 700; }
/* 右カラムではなく本文の流れに置くヒント枠(設定の保存完了画面)。
   隣の .saved-panel と同じ幅・同じ間隔で並べる。 */
.hint-panel__action { margin: 0; }
.hint-panel__action a { display: inline-flex; align-items: center; gap: 7px; color: var(--app-accent-text); font-size: 13px; font-weight: 800; text-decoration: none; }
.hint-panel__action a:hover { text-decoration: underline; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading:has(.section-heading__count) > div { min-width: 0; overflow-wrap: anywhere; }
.section-heading__count { flex: 0 0 auto; color: var(--app-ink-3); font-size: 13px; font-weight: 750; white-space: nowrap; }
.items-index-heading__actions { display: flex; align-items: center; gap: 8px; }
.items-index-heading__actions .icon-button { width: 40px; height: 40px; }
.items-index-menu > div button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--welcome-ink); cursor: pointer; font: inherit; font-size: 12px; font-weight: 750; text-align: left; }
.items-index-menu > div button:hover { background: #f2f5f4; }
.items-index-menu > div button.is-active { background: var(--app-accent-surface); color: var(--app-accent-text); }
.items-bulk-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.items-bulk-hint p { margin: 0; }
.items-bulk-hint .section-button { min-height: 34px; }
.item-url-search-dialog { width: min(620px,calc(100% - 32px)); }
.item-url-search-dialog form { display: grid; gap: 12px; margin-bottom: 20px; }
.item-url-search-dialog form .section-button { justify-self: start; }
.item-url-search-dialog .section-notice { margin-bottom: 0; }
.item-url-search-dialog .section-notice p { margin: 0; }
.item-url-search-dialog .section-notice--premium { margin-top: 16px; }
.section-heading h1 { margin: 0; color: var(--welcome-ink); font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -.035em; }
.section-heading > div > p:last-child { margin: 8px 0 0; color: var(--app-ink-3); font-size: 13px; line-height: 1.6; }
.section-lead { margin: 0 0 18px; color: var(--app-ink-3); font-size: 13px; line-height: 1.6; }
.section-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid #d8dfde; border-radius: 10px; background: #fff; color: var(--welcome-ink); cursor: pointer; font-size: 12px; font-weight: 800; text-decoration: none; }
.section-button i { margin-right: 6px; font-size: 13px; }
.section-button--primary { border-color: var(--welcome-accent-dark); background: var(--welcome-accent-dark); color: #fff; }
.section-button--secondary { border-color: var(--app-ink-3); background: var(--app-ink-3); color: #fff; }
.section-button.is-active { border-color: var(--welcome-accent-dark); background: var(--app-accent-surface); color: var(--app-accent-text); }
.section-button.is-active::before { margin-right: 5px; font-family: "Font Awesome 6 Pro"; font-weight: 400; content: "\f00c"; }
/* 送信中の待ち表示。押したボタンのアイコンをスピナーに差し替える。 */
/* display:inline-block が要る。.section-button(inline-flex)の中では不要だが、
   .form-inline-link のような素のボタンの中では素のspanのままだと幅も高さも効かず、
   スピナーが出ない。 */
.ui-spinner { display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; margin-right: 6px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; vertical-align: -2px; opacity: .8; animation: ui-spin 700ms linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.is-loading { cursor: progress; }
/* 元のアイコンは隠す。消すとボタン幅が動いて位置がずれるため visibility で残す。 */
.is-loading > i { display: none; }
.is-loading.is-active::before { content: none; }
.section-button:disabled, .section-button[disabled] { opacity: .72; cursor: not-allowed; }
.section-button.is-loading:disabled { opacity: .9; cursor: progress; }
/* 待ち表示中はボタンのアイコンを隠し、スピナーにその場所を譲る。
   両方並べると幅の狭いボタン(開催回の削除など)で文字が押し出されて行が増える。 */
.section-button.is-loading > i { display: none; }
/* 自前のアイコンを持つボタン(ブックマーク済み・ステキ！済みなど)にチェックまで足すと
   アイコンが2つ並んで意味が取りにくいので、その場合はチェックを出さない。 */
.section-button.is-active:has(i)::before { content: none; }
.section-button--wide { width: 100%; min-height: 48px; }
/* PRIMARYほど主張しないが、素の.section-buttonよりは操作として目立たせたいとき用。
   塗りつぶさずアクセント色の枠と薄い下地でまとめる(.icon-button.is-activeと同じ考え方)。 */
.section-button--sub { border-color: var(--welcome-accent-dark); background: var(--app-accent-surface-strong); color: var(--app-accent-text); }
.section-button--sub:hover { background: var(--app-accent-surface-hover); }
.section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.section-toolbar--wrap { flex-wrap: wrap; }
.section-segments { display: flex; gap: 5px; overflow-x: auto; padding: 3px; border: 1px solid #dfe5e4; border-radius: 11px; background: #fff; scrollbar-width: none; }
.section-segments::-webkit-scrollbar { display: none; }
.section-segments a, .section-segments button { display: inline-flex; gap: 5px; align-items: center; flex: 0 0 auto; border: 0; background: none; padding: 7px 12px; border-radius: 8px; color: var(--app-ink-2); font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; font-family: inherit; }
/* ラベルの後ろにPREMIUMバッジを添えるタブがある。間隔はgapで取るので自前の余白は要らない */
.section-segments .premium-label { margin-left: 0; }
/* ブックマークタグの絞り込み。件数の添え字は月別アーカイブのチップと同じ扱い。 */
.bookmark-tag-filter { margin: 0 0 14px; }
.bookmark-tag-filter .tag-chip-list { margin-top: 10px; }
.bookmark-tag-filter .tag-chip-list small { margin-left: 2px; color: var(--app-ink-3); font-size: 12px; }
.bookmark-tag-filter .is-active small { color: inherit; opacity: .75; }
.section-segments a.is-active, .section-segments button.is-active { background: var(--welcome-ink); color: #fff; }
/* display指定を持つ要素はhidden属性だけでは消えない(著者スタイルがUAの[hidden]に勝つ)。
   全体に!importantを当てるとjQueryのfadeToggleが付けるinline displayまで殺してしまう
   (夢小説パネルがそれ)ので、該当するクラスだけ個別に打ち消す。
   **hidden属性を付け外しする要素にdisplayを足したら、ここにも足すこと。**
   忘れると「隠したつもりが出たまま」になる。ホームの「もっと見る」「読み込み中…」
   「これ以上の投稿はありません」が3つ同時に出ていたのがこれ。 */
.search-input-block[hidden], .section-notice[hidden], .bulk-select-bar[hidden], .item-nice__menu[hidden], .item-nice__secondary[hidden], .stamp-picker[hidden], .wall-color-grid[hidden], .section-button[hidden], .form-field[hidden], .home-more__status[hidden], .home-more__end[hidden], .home-more__error[hidden], .comment-item__reply-form[hidden], .comment-compose[hidden], .section-grid[hidden], .history-work-list[hidden] { display: none; }
.search-input-rows { display: grid; gap: 8px; margin-top: 7px; }
.search-input-row { display: flex; gap: 8px; }
.search-input-row input { flex: 1; min-width: 0; }
.search-input-row select { flex: 0 0 auto; }
.section-select { display: flex; align-items: center; gap: 8px; color: var(--app-ink-3); font-size: 12px; font-weight: 750; }
.section-select select, .section-search input, .section-form input[type=text], .section-form input[type=email], .section-form input[type=password], .section-form input[type=url], .section-form input[type=file], .section-form select, .section-form textarea { border: 1px solid #d9e0df; border-radius: 9px; background: #fff; color: var(--welcome-ink); font: inherit; outline: none; }
.section-select select { min-height: 38px; padding: 0 30px 0 10px; }
.section-search { display: flex; }
.section-search input { width: min(280px, 52vw); min-height: 40px; padding: 0 12px; border-radius: 9px 0 0 9px; }
.section-search button { min-width: 56px; border: 0; border-radius: 0 9px 9px 0; background: var(--welcome-ink); color: #fff; cursor: pointer; font-size: 12px; font-weight: 800; }
/* 使い道はほとんどが案内文(「ステキ！を送ってみましょう」「コメントを投稿しましょう」など)。
   クリーム色＋くすんだ文字は警告に見えてしまうので、サイトの色に寄せた落ち着いた面にする。
   本当の警告・危険は .section-notice--danger を使う。 */
.section-notice { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #dde7e6; border-radius: 10px; background: #f3f8f7; color: var(--app-ink-2); font-size: 13px; line-height: 1.7; }
.section-notice a { color: var(--app-accent-text); font-weight: 800; }
.form-inline-link { padding: 0; border: 0; background: none; color: var(--app-accent-text); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.section-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.section-card { position: relative; display: grid; grid-template-columns: 132px minmax(0,1fr); min-height: 170px; overflow: hidden; border: 1px solid #e0e6e5; border-radius: 15px; background: #fff; }
.section-card__select { display: none; position: absolute; top: 8px; left: 8px; z-index: 6; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); cursor: pointer; box-shadow: 0 2px 8px rgba(20,30,30,.2); }
.section-grid.is-select-mode .section-card__select { display: grid; }
.bulk-select-bar { position: sticky; bottom: 14px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 16px; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(20,30,30,.16); font-size: 13px; font-weight: 800; color: var(--welcome-ink); }
.section-card__select input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.section-card__select span { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid #c9d2d1; border-radius: 50%; color: transparent; font-size: 13px; }
.section-card__select input:checked + span { border-color: var(--welcome-accent-dark); background: var(--welcome-accent-dark); color: #fff; }
.section-card--work, .section-card--collection { overflow: visible; }
.section-card--work { grid-template-columns: var(--app-work-image-width) minmax(0,1fr); }
.section-card__visual { position: relative; display: grid; overflow: hidden; place-items: center; border-radius: 15px 0 0 15px; background: #edf1f0; color: var(--app-accent-text); font-size: 24px; font-weight: 900; text-decoration: none; }
.section-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.section-card__visual img.blur { filter: blur(2px); }
/* 画像の高さを170px固定にしていたため、本文側が伸びるとカードの下端と画像の下端がずれていた。
   行いっぱいに伸ばして、カードの高さに追従させる(最低の高さは .section-card の min-height が持つ)。 */
.section-card--work > .section-card__visual { position: relative; align-self: stretch; }
.section-card__type-badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(20,24,28,.6); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.section-card__body { position: relative; display: flex; width: 100%; min-width: 0; box-sizing: border-box; flex-direction: column; padding: 16px 17px; }
.section-card__meta { display: flex; justify-content: space-between; gap: 8px; color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.section-card__meta > span { color: var(--app-accent-text); letter-spacing: .04em; }
.section-card__meta b { padding: 2px 6px; border-radius: 4px; background: var(--app-accent-surface); color: #65767a; }
.section-card h2 { overflow: hidden; margin: 7px 0 0; font-size: 15px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.section-card h2 a { color: var(--welcome-ink); text-decoration: none; }
.section-card--collection .section-card__body > h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.section-card--collection:has(.section-card__body > h2 a:focus-visible) { outline: 2px solid var(--welcome-accent-dark); outline-offset: 2px; }
.section-card--collection .section-card__body > h2 a:focus-visible { outline: none; }
.section-card__body > p { display: -webkit-box; overflow: hidden; margin: 6px 0 8px; color: var(--app-ink-2); font-size: 12px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.section-card__tags { display: flex; gap: 6px; overflow: hidden; color: var(--app-ink-3); font-size: 12px; white-space: nowrap; }
/* カード内のキーワードは、小さな枠で本文・閲覧条件と区別する。 */
.home-card__tags, .section-card__tags { flex-wrap: wrap; gap: 5px; max-height: calc(2 * (1.4em + 4px) + 5px); overflow: hidden; font-size: 12px; }
.home-card__tags > span, .section-card__tags > span, .section-card__tags > a { min-width: 0; max-width: 100%; overflow: hidden; padding: 1px 5px; border: 1px solid var(--app-tag-border); border-radius: 4px; background: var(--app-tag-surface); color: var(--app-ink-3); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.section-card__actions { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; color: var(--app-ink-3); font-size: 12px; }
.section-card__actions a { color: var(--app-accent-text); font-size: 12px; font-weight: 800; }
/* ブックマークのカードは「タグを編集」だけを操作として残している。
   文字リンクだと押せると分かりにくいので、他画面と同じ小さなボタンにする。 */
.section-card__actions .section-button { flex: 0 0 auto; min-height: 32px; padding: 0 11px; font-size: 12px; white-space: nowrap; }
.management-card__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.management-card__badges span { padding: 4px 7px; border-radius: 5px; background: var(--app-accent-surface); color: var(--app-ink-2); font-size: 12px; font-weight: 800; }
.management-card__badges span.is-lock { background: #e6e9ea; color: #4a5358; }
.management-card__metrics { display: grid; width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; box-sizing: border-box; margin: auto 0 0; padding: 10px 0 0; }
.section-card--collection .management-card__metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
.section-card--work .management-card__metrics dt { white-space: nowrap; }
.management-card__metrics div, .management-card__metrics div + div { display: grid; min-width: 0; justify-items: center; gap: 3px; padding: 8px 2px; border: 0; border-radius: 8px; background: #f1f4f3; }
.management-card__metrics dt { color: var(--app-ink-3); font-size: 12px; line-height: 1.2; }
.management-card__metrics .management-card__metric--hidden { align-content: center; padding: 8px 6px; text-align: center; }
.management-card__metric--hidden dt { max-width: 100%; line-height: 1.5; }
.management-card__metrics dd { margin: 0; color: var(--welcome-ink); font-size: 14px; font-weight: 850; line-height: 1.2; }
.management-card__actions { display: flex; flex-wrap: wrap; gap: 6px 12px; padding-top: 8px; border-top: 1px solid #e4e9e8; }
.management-card__actions a { color: var(--app-accent-text); font-size: 12px; font-weight: 800; }
.management-card__menu { position: absolute; top: 10px; right: 10px; z-index: 20; width: 40px; height: 40px; }
.management-card__menu[open] { z-index: 30; }
.management-card__menu summary { display: grid; width: 40px; height: 40px; box-sizing: border-box; padding: 0; place-items: center; border: 1px solid #d9e1e1; border-radius: 50%; background: #f6f9f8; color: var(--app-accent-text); cursor: pointer; list-style: none; transition: transform 140ms cubic-bezier(.23,1,.32,1), border-color 160ms ease, background-color 160ms ease; }
.management-card__menu summary::-webkit-details-marker { display: none; }
.management-card__menu summary svg { width: 19px; height: 19px; }
.management-card__menu[open] summary { border-color: var(--welcome-accent-dark); background: var(--app-accent-surface-strong); }
.management-card__menu summary:active { transform: scale(.98); }
.management-card__menu-list { position: absolute; top: 46px; right: 0; display: grid; width: 320px; max-width: calc(100vw - 32px); grid-template-columns: 1fr; gap: 1px; overflow: hidden; border: 1px solid #d8e0df; border-radius: 11px; background: #e4e9e8; box-shadow: 0 14px 38px rgba(23,31,34,.18); transform-origin: top right; }
.management-card__menu-list > a, .management-card__menu-list > span, .management-card__menu-list .management-card__delete-form button { display: grid; gap: 2px; min-width: 0; min-height: 55px; align-content: center; padding: 8px 11px; border: 0; background: #f8faf9; color: var(--welcome-ink); cursor: pointer; font: inherit; text-align: left; text-decoration: none; }
.management-card__menu-list > a > span, .management-card__menu-list > span > span, .management-card__menu-list .management-card__delete-form button > span { font-size: 13px; font-weight: 800; }
.management-card__menu-list small { overflow: hidden; color: var(--app-ink-3); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.management-card__menu-list > .is-disabled { cursor: not-allowed; opacity: .5; }
.management-card__delete-form { margin: 0; }
/* メニュー行として敷き詰めるのはメニューの中だけ。開催回の削除ボタンは普通の .section-button で、
   ここまで掛かると幅いっぱいの枠なし・左寄せになり、隣の「編集」と揃わなくなる。 */
.management-card__menu-list .management-card__delete-form button { width: 100%; color: var(--app-danger); }
.management-card__delete-form button:disabled { cursor: wait; opacity: .55; }
/* メニューの行は見出しと説明の2行組み。スピナーを先頭に足すと3行目が増えてメニューが跳ねるので、
   待ち表示中だけ左に1列足してそこへ収める。 */
.management-card__menu-list .management-card__delete-form button.is-loading { grid-template-columns: auto minmax(0,1fr); gap: 2px 9px; align-items: center; }
.management-card__menu-list .management-card__delete-form button.is-loading > .ui-spinner { grid-row: 1 / span 2; margin-right: 0; border-color: var(--app-danger); border-top-color: transparent; opacity: 1; }
.analysis-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.analysis-summary > div { display: grid; gap: 5px; padding: 18px; border: 1px solid #e0e6e5; border-radius: 13px; background: #fff; }
.analysis-summary span { color: var(--app-ink-3); font-size: 12px; font-weight: 750; }
.analysis-summary strong { font-size: 22px; }
/* プレミアム限定で数値が出せない枠。値が無いことが分かればよいので、数字より控えめにする。 */
.analysis-summary strong.is-locked { color: var(--app-ink-disabled); }
.analysis-summary span { display: flex; gap: 6px; align-items: center; }
.analysis-panel { overflow: hidden; border: 1px solid #e0e6e5; border-radius: 15px; background: #fff; }
.analysis-panel > header { padding: 18px; border-bottom: 1px solid #e9edec; }
.analysis-panel h2 { margin: 0; font-size: 17px; }
.analysis-panel p { margin: 5px 0 0; color: var(--app-ink-3); font-size: 12px; }
.analysis-chart { margin: 0; padding: 16px 16px 8px; border-bottom: 1px solid #edf0ef; }
.analysis-chart figcaption { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 8px 24px; color: var(--app-ink-2); font-size: 12px; font-weight: 750; }
.analysis-chart figcaption span { display: inline-flex; align-items: center; gap: 6px; }
.analysis-chart figcaption i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.analysis-chart svg { display: block; width: 100%; height: 220px; overflow: visible; }
.analysis-chart text { fill: #7f8b90; font-size: 12px; }
.analysis-chart__grid { stroke: #e5eae9; stroke-width: 1; vector-effect: non-scaling-stroke; }
.analysis-chart__line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.analysis-chart .is-view { color: #e47d88; stroke: #e47d88; }
.analysis-chart .is-nice { color: #58afc1; stroke: #58afc1; }
.analysis-chart .is-bookmark { color: #c5a34e; stroke: #c5a34e; }
.analysis-table-wrap { overflow-x: auto; }
.analysis-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.analysis-table th, .analysis-table td { padding: 12px 16px; border-bottom: 1px solid #edf0ef; text-align: right; }
.analysis-table th:first-child, .analysis-table td:first-child { text-align: left; }
.analysis-table th { color: var(--app-ink-2); font-size: 12px; }
.section-table-wrap { overflow-x: auto; margin-top: 14px; }
.section-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.section-table th, .section-table td { padding: 10px 12px; border-bottom: 1px solid #edf0ef; text-align: left; vertical-align: top; }
.section-table th { color: var(--app-ink-2); font-size: 12px; font-weight: 800; }
.section-table td code { color: var(--app-accent-text); font-size: 12px; }
.reaction-user { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 13px; align-items: center; min-height: 74px; padding: 13px 16px; border-bottom: 1px solid #edf0ef; color: var(--welcome-ink); text-decoration: none; }
.reaction-user:last-child { border-bottom: 0; }
.reaction-user img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.reaction-user > span { display: grid; gap: 3px; min-width: 0; }
.reaction-user strong { font-size: 14px; }
.reaction-user small { overflow: hidden; color: var(--app-ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reaction-user i { color: var(--app-ink-3); font-size: 20px; font-style: normal; }
.section-back { margin-top: 18px; }
.item-detail-page > .section-back:first-child { margin-top: 0; margin-bottom: 12px; }
.section-back a { color: var(--app-accent-text); font-size: 13px; font-weight: 800; }
.management-dialog { width: min(760px,calc(100% - 32px)); max-width: none; max-height: min(82vh,760px); padding: 0; overflow: hidden; border: 1px solid #dce3e2; border-radius: 16px; background: #fff; color: var(--welcome-ink); box-shadow: 0 24px 80px rgba(18,25,28,.28); }
.management-dialog[open] { animation: management-dialog-in 180ms cubic-bezier(.23,1,.32,1); }
.management-dialog::backdrop { background: rgba(8,12,15,.66); backdrop-filter: blur(3px); }
/* 添付画像の拡大。画像そのものを見せたいので、枠や地色は持たせない。 */
/* width:auto だと inset:0 と噛み合って画面幅いっぱいに広がり、中の画像が左端に寄る。
   fit-content にして margin:auto で中央に置く。 */
.image-lightbox { width: fit-content; height: fit-content; max-width: min(96vw, 1200px); max-height: 92vh; margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; }
/* 閉じるボタンの基準。dialog自体はUAがfixedで配置するので、内側に基準を作る。 */
.image-lightbox__inner { position: relative; display: block; }
.image-lightbox::backdrop { background: rgba(8,12,15,.82); backdrop-filter: blur(3px); }
.image-lightbox img { display: block; max-width: 100%; max-height: 92vh; border-radius: 10px; object-fit: contain; }
.image-lightbox__close { position: absolute; top: -14px; right: -14px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid #dce3e2; border-radius: 50%; background: #fff; color: var(--welcome-ink); cursor: pointer; }
.image-lightbox__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* 同じ記事に複数枚あるときの左右送り。画像の上に重ねる。 */
.image-lightbox__nav { position: absolute; top: 50%; display: grid; width: 40px; height: 40px; padding: 0; place-items: center; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(18,22,26,.72); color: #fff; cursor: pointer; }
.image-lightbox__nav--prev { left: 10px; }
.image-lightbox__nav--next { right: 10px; }
.image-lightbox__nav[hidden] { display: none; }
.image-lightbox__count { position: absolute; bottom: 10px; left: 50%; margin: 0; padding: 3px 10px; transform: translateX(-50%); border-radius: 999px; background: rgba(18,22,26,.72); color: #fff; font-size: 12px; font-weight: 800; }
.image-lightbox__count[hidden] { display: none; }
.management-dialog__panel { display: flex; max-height: min(82vh,760px); flex-direction: column; }
.management-dialog__panel > header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid #e6ebea; background: #fff; }
.management-dialog__panel > header p { overflow: hidden; margin: 0 0 3px; color: var(--app-ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.management-dialog__panel > header h2 { margin: 0; font-size: 20px; }
.management-dialog__panel > header button { display: grid; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; cursor: pointer; place-items: center; border: 1px solid #dce3e2; border-radius: 50%; background: #f6f8f7; color: var(--app-ink-2); transition: transform 140ms cubic-bezier(.23,1,.32,1), background-color 160ms ease; }
.management-dialog__panel > header button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.management-dialog__panel > header button:active { transform: scale(.96); }
.management-dialog__content { min-height: 180px; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.management-dialog__content .analysis-panel h3 { margin: 0; font-size: 17px; }
.management-dialog__loading, .management-dialog__error { display: grid; min-height: 180px; place-items: center; color: var(--app-ink-3); font-size: 13px; text-align: center; }
@keyframes management-dialog-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.bookmark-tags-open { gap: 8px; }
.bookmark-tags-open svg { width: 18px; height: 18px; }
.bookmark-tag-dialog { width: min(620px,calc(100% - 32px)); }
.bookmark-tags-manager, .bookmark-item-tags { display: grid; gap: 20px; }
.bookmark-tags-manager__help, .bookmark-item-tags > p { margin: 0; color: var(--app-ink-2); font-size: 13px; line-height: 1.7; }
.bookmark-tags-sort { display: flex; gap: 5px; padding: 3px; border-radius: 10px; background: #eef2f1; }
.bookmark-tags-sort a { flex: 1; padding: 8px 10px; border-radius: 8px; color: var(--app-ink-3); font-size: 12px; font-weight: 800; text-align: center; text-decoration: none; }
.bookmark-tags-sort a.is-active { background: #fff; color: var(--welcome-ink); box-shadow: 0 1px 4px rgba(25,33,36,.1); }
.bookmark-tag-add { display: grid; gap: 7px; margin: 0; }
.bookmark-tag-add label, .bookmark-item-tags h3 { color: var(--welcome-ink); font-size: 13px; font-weight: 850; }
.bookmark-tag-add > div { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.bookmark-tag-add input { min-width: 0; min-height: 42px; box-sizing: border-box; padding: 0 12px; border: 1px solid #d9e0df; border-radius: 9px 0 0 9px; background: #fff; color: var(--welcome-ink); font: inherit; font-size: 13px; outline: none; }
.bookmark-tag-add button { min-width: 68px; border: 0; border-radius: 0 9px 9px 0; background: var(--welcome-accent-dark); color: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; transition: transform 140ms cubic-bezier(.23,1,.32,1); }
.bookmark-tag-add button:active { transform: scale(.97); }
.bookmark-tag-add button:disabled { cursor: wait; opacity: .55; }
.bookmark-tag-add small { justify-self: end; color: var(--app-ink-3); font-size: 12px; }
.bookmark-tag-list { overflow: hidden; border: 1px solid #e0e6e5; border-radius: 12px; }
.bookmark-tag-row { display: grid; grid-template-columns: minmax(0,1fr) 48px; border-bottom: 1px solid #e9edec; }
.bookmark-tag-row:last-child { border-bottom: 0; }
.bookmark-tag-row > a { display: flex; min-width: 0; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; color: var(--welcome-ink); text-decoration: none; }
.bookmark-tag-row > a span { overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-tag-row > a small { flex: 0 0 auto; color: var(--app-ink-3); font-size: 12px; }
.bookmark-tag-row form { display: grid; margin: 0; place-items: center; }
.bookmark-tag-row button { display: grid; width: 36px; height: 36px; padding: 0; cursor: pointer; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--app-danger); transition: transform 140ms cubic-bezier(.23,1,.32,1), background-color 160ms ease; }
.bookmark-tag-row button svg { width: 18px; height: 18px; }
.bookmark-tag-row button:active { transform: scale(.96); }
.bookmark-tags-empty { padding: 28px 16px; border: 1px dashed #d4dcda; border-radius: 12px; color: var(--app-ink-3); font-size: 13px; text-align: center; }
.bookmark-item-tags section { display: grid; gap: 10px; }
.bookmark-item-tags h3 { margin: 0; }
.bookmark-item-tags__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bookmark-item-tags__chips form { margin: 0; }
.bookmark-item-tags__chips button { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 11px; cursor: pointer; border: 1px solid #d9e1e0; border-radius: 999px; background: #f7f9f8; color: var(--app-ink-2); font: inherit; font-size: 12px; font-weight: 800; transition: transform 140ms cubic-bezier(.23,1,.32,1), border-color 160ms ease, background-color 160ms ease; }
.bookmark-item-tags__chips button.is-selected { border-color: #7ec4cf; background: #eaf4f5; color: #367f8e; }
.bookmark-item-tags__chips button b { font-size: 15px; font-weight: 500; line-height: 1; }
.bookmark-item-tags__chips button:active { transform: scale(.97); }
.bookmark-item-tags__empty { margin: 0; color: var(--app-ink-3); font-size: 12px; }
.bookmark-tag-page { width: min(680px,100%); box-sizing: border-box; }
.section-empty { grid-column: 1/-1; padding: 64px 24px; border: 1px dashed #cad5d3; border-radius: 15px; background: rgba(255,255,255,.7); text-align: center; }
.section-empty h2 { margin: 0 0 7px; font-size: 17px; }
.section-empty p { margin: 0 0 18px; color: var(--app-ink-3); font-size: 13px; }
.section-empty--search { padding: 18px 20px; border-style: solid; text-align: left; }
.section-empty--search h2 { margin-bottom: 10px; font-size: 15px; }
.section-empty--search p { margin-bottom: 12px; color: var(--app-ink-2); line-height: 1.7; }
.section-empty__action { text-align: center; }
.section-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 22px; color: var(--app-ink-3); font-size: 12px; }
.section-pagination__step { color: var(--app-accent-text); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.section-pagination__step:last-child { justify-self: end; }
.section-pagination__step.is-disabled { color: var(--app-ink-disabled); }
.section-pagination:has(> .section-pagination__steps) { display: flex; justify-content: center; gap: 4px; overflow-x: auto; }
.section-pagination__steps { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.section-pagination__steps--next { justify-self: end; justify-content: flex-end; }
.section-pagination__steps .section-pagination__step { box-sizing: border-box; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; padding: 0; border: 1px solid #dce3e2; border-radius: 8px; background: #fff; color: var(--welcome-ink); }
.section-pagination__steps .section-pagination__step > span { font-size: 18px; line-height: 1; }
.section-pagination__steps a.section-pagination__step:hover { border-color: var(--welcome-accent-dark); color: var(--app-accent-text); }
.section-pagination__steps .section-pagination__step.is-disabled { border-color: #e1e6e5; background: #f0f3f2; color: var(--app-ink-disabled); cursor: default; }
.section-pagination__numbers { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.section-pagination:has(> .section-pagination__steps) .section-pagination__numbers { flex-wrap: nowrap; flex: 0 0 auto; }
.section-pagination .section-pagination__numbers--mobile { display: none; }
.section-pagination__page { display: grid; min-width: 30px; height: 30px; padding: 0 7px; place-items: center; border: 1px solid #dce3e2; border-radius: 8px; background: #fff; color: var(--welcome-ink); font-size: 12px; font-weight: 800; text-decoration: none; }
.section-pagination__page:hover { border-color: var(--welcome-accent-dark); color: var(--app-accent-text); }
.section-pagination__page.is-current { border-color: var(--welcome-accent-dark); background: var(--welcome-accent-dark); color: #fff; }
.section-pagination__gap { display: grid; height: 30px; place-items: center; color: var(--app-ink-disabled); }
.section-pagination:not(:last-child) { margin-bottom: 18px; }

.section-list { overflow: hidden; border: 1px solid #e0e6e5; border-radius: 15px; background: #fff; }
.message-row, .attention-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 72px; padding: 12px 15px; border-bottom: 1px solid #edf0ef; color: var(--welcome-ink); text-decoration: none; }
.message-row:last-child, .attention-row:last-child { border-bottom: 0; }
.message-row img, .attention-row__mark { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
/* 通知の対象そのものを見せる。作品・ピクログ・スレッドは四角、相手のアイコンは丸。 */
.attention-row__thumb { width: 40px; height: 40px; border-radius: 9px; background: var(--app-accent-surface); object-fit: cover; }
.attention-row__thumb.is-round { border-radius: 50%; }
.message-row > span, .attention-row > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.message-row b, .attention-row b { color: var(--app-accent-text); font-size: 12px; }
.message-row strong, .attention-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.message-row time, .attention-row time { color: var(--app-ink-3); font-size: 12px; }
.attention-row { position: relative; }
.attention-row.is-unread::before { position: absolute; top: 50%; left: 5px; width: 5px; height: 5px; border-radius: 50%; background: #d75c68; content: ''; transform: translateY(-50%); }
.attention-row__mark { display: grid; place-items: center; background: var(--app-accent-surface); color: var(--app-accent-text); font-size: 12px; font-weight: 900; }
.section-actions { display: flex; gap: 12px; }
.section-actions a { color: var(--app-ink-2); font-size: 12px; font-weight: 800; }
.post-type-tabs { display: flex; gap: 20px; margin-bottom: 20px; border-bottom: 1px solid #dfe5e4; }
.post-type-tabs a { padding: 0 2px 11px; border-bottom: 2px solid transparent; color: var(--app-ink-3); font-size: 12px; font-weight: 800; text-decoration: none; }
.post-type-tabs a.is-active { border-color: var(--welcome-accent-dark); color: var(--welcome-ink); }
.section-form { display: grid; width: min(720px,100%); gap: 14px; }
.section-form + .section-form { margin-top: 14px; }
.post-upload { padding: 20px; border: 1px solid #dfe5e4; border-radius: 15px; background: #fff; }
/* CKEditorの本文はダークテーマでも白い用紙。親フォームの明るい文字色とラベル用の太さを継承させない。 */
.post-upload .ck-editor__editable[role="textbox"] { background: #fff; color: #20272c; color-scheme: light; font-weight: 400; }
/* paddingが無いと、プレビュー画像が枠いっぱいに伸びたときに上下が枠に貼り付いて見える。
   box-sizing: border-boxなので、min-heightはpadding込みの値のまま据え置きでよい。 */
.upload-drop { display: grid; min-height: 230px; box-sizing: border-box; padding: 20px; cursor: pointer; place-items: center; align-content: center; gap: 7px; border: 1px dashed #aebdba; border-radius: 12px; background: #f9fbfa; text-align: center; }
.upload-drop > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #e7efed; color: var(--app-accent-text); font-size: 24px; }
.upload-drop strong { font-size: 14px; }
.upload-drop small, .form-help { color: var(--app-ink-3); font-size: 12px; line-height: 1.7; }
.upload-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-drop.is-selected { border-style: solid; border-color: var(--welcome-accent-dark); background: #f2f8f7; }
/* プレビューは背景画像ではなく実の<img>で出す。背景だと固定サイズの枠に押し込むことになり、
   4000px級は小さく潰れ、小さい画像は逆に引き伸ばされてぼやけるため。
   max-width/max-heightだけ与えれば、大きい画像は縮小・小さい画像は原寸のままになる。 */
.upload-drop.is-selected > span { display: none; }
.upload-drop img { display: none; max-width: 100%; max-height: 320px; border-radius: 10px; }
.upload-drop.is-selected img { display: block; }
.upload-drop.is-selected strong { overflow-wrap: anywhere; }
.album-thumb { position: relative; padding: 8px; border: 1px solid #e0e6e5; border-radius: 12px; background: #fff; }
.album-thumb img { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; }
.album-thumb__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.album-thumb__actions button { flex: 1 1 auto; padding: 6px 8px; border: 1px solid #d8dfde; border-radius: 8px; background: #f7f9f8; color: var(--app-ink-2); font-size: 12px; cursor: pointer; }
.piclog-import { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; margin-bottom: 14px; }
.piclog-import__item { min-width: 0; }
.piclog-import__item img { display: block; }
.piclog-import__item [data-import-token].is-selected { border-color: var(--welcome-accent-dark); background: var(--welcome-accent-dark); color: #fff; }
.piclog-import__more, .piclog-import__message, .piclog-import__selection-error { grid-column: 1 / -1; }
.dream-info { display: grid; gap: 10px; padding: 12px 0; border-bottom: 1px solid #edf0ef; }
.dream-info:last-child { border-bottom: 0; }
.dream-panel { display: grid; gap: 14px; margin-top: 14px; }
.dream-panel[hidden] { display: none; }
.section-details { margin: 14px 0; padding: 12px 14px; border: 1px solid #dfe6e4; border-radius: 10px; background: #ebf0ef; color: var(--app-ink-2); font-size: 12px; }
/* フォーム直下の詳細設定は、上に並ぶ .form-panel と同じ「節」なので同じカードで出す。
   薄いグレーの小箱(既定の .section-details)は、パネルの中に置く補助的なもの(「これまで
   投稿したタグ」など)用。13項目入る節がその見た目だと、前後で枠の色も角も変わって見える。 */
.section-form > .section-details { margin: 0; padding: 22px; border-color: #e0e6e5; border-radius: 15px; background: #fff; }
.section-form > .section-details > summary { font-size: 15px; }
/* .form-helpは自前で16pxのmarginを持つので、gapを持つ.section-formの直下だと二重に効く */
.section-form > .form-help { margin: 0; }
.section-details summary { cursor: pointer; font-weight: 800; }
.section-details > label:not(.form-field):not(.switch-field) { display: grid; gap: 6px; margin: 12px 0; }
.section-details select { min-height: 40px; padding: 0 10px; }
.section-details > p { margin: 10px 0 0; }
.view-stat-filter form > button { margin-top: 6px; }
.tag-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag-chip-list .section-button { min-height: 34px; padding: 5px 12px; }
.tag-chip-list span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 5px 5px 12px; border: 1px solid #dbe2e1; border-radius: 999px; background: #fff; color: var(--welcome-ink); font-size: 12px; font-weight: 750; }
.tag-chip-list span button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--app-ink-3); cursor: pointer; font-size: 12px; }
.tag-chip-list span button:hover { background: #eef1f0; color: var(--app-danger); }
.form-error { color: var(--app-danger); font-size: 12px; }
/* err() が出すバリデーションエラー。危険系の注記(.section-notice--danger)と同じ面にそろえる。 */
.field-error { display: block; margin-top: 8px; padding: 8px 11px; border: 1px solid #edd1d4; border-radius: 9px; background: #fff4f5; color: var(--app-danger); font-size: 12px; font-weight: 750; line-height: 1.6; white-space: pre-wrap; }
.form-help { margin: 16px 0; }
.form-help a { color: var(--app-accent-text); }
.post-upload #import_items { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 8px; margin-bottom: 14px; }
.post-upload .tweet_item { display: grid; width: auto !important; height: auto !important; margin: 0 !important; padding: 10px !important; float: none !important; gap: 8px; border: 1px solid #e0e6e5 !important; border-radius: 10px; }
.post-upload .tweet_item img { width: 100% !important; height: 110px !important; object-fit: cover; border-radius: 7px; }
.post-upload .impfile_button, .post-upload .read_button button { min-height: 34px; border: 1px solid #d8dfde; border-radius: 8px; background: #fff; color: var(--app-ink-2); cursor: pointer; font-size: 12px; font-weight: 800; }
.post-upload .impfile_button.is-selected { border-color: var(--welcome-accent-dark); background: var(--welcome-accent-dark); color: #fff; }
.post-upload .read_button { grid-column: 1/-1; }
.post-upload .read_button button { width: 100%; }
.profile-form { display: grid; gap: 14px; }
.form-panel { padding: 22px; border: 1px solid #e0e6e5; border-radius: 15px; background: #fff; }
.saved-panel + .form-panel { margin-top: 16px; }
.blog-access-info { display: grid; gap: 16px; }
.blog-access-info__label, .blog-access-info__updated { margin: 0; color: var(--app-ink-3); font-size: 12px; line-height: 1.5; }
.blog-access-info__label { font-weight: 800; }
.blog-access-info + .form-panel { margin-top: 16px; }
.form-panel h2 { margin: 0 0 5px; font-size: 15px; }
.form-panel > p { margin: 0 0 18px; color: var(--app-ink-3); font-size: 13px; line-height: 1.7; }
.form-panel > p.form-help { margin: 16px 0; color: var(--app-ink-3); font-size: 12px; line-height: 1.7; }
.static-notice .section-notice { margin-top: 12px; }
/* .section-notice は単独のバナー用に margin-top を持たない。
   フォーム枠の中で入力欄の続きに置くと直前とくっつくので、ここだけ上を空ける。
   末尾に来たときは枠のpaddingと二重になるため下は詰める。 */
.form-panel > .section-notice { margin-top: 16px; }
/* パネル下端の余白はパネル自身のpaddingに任せる。
   後ろに隠しフィールド(execute・CSRF)しか無い場合も「最後の要素」として扱う。 */
.form-panel > .section-notice:not(:has(~ :not(input[type="hidden"]))) { margin-bottom: 0; }
.static-notice__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.blog-password-form > .section-button { margin-top: 14px; }
.form-field { display: grid; gap: 7px; margin-top: 18px; color: var(--app-ink-2); font-size: 13px; font-weight: 800; }
.form-field > span b { color: var(--app-danger); font-size: 12px; }
.form-field input, .form-field textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #d9e0df; border-radius: 9px; background: #fff; color: var(--welcome-ink); font: inherit; line-height: 1.6; outline: none; }
.password-reveal-field__control { position: relative; }
.password-reveal-field__control input { padding-right: 78px; }
.password-reveal-field__toggle { position: absolute; top: 50%; right: 6px; min-width: 64px; min-height: 34px; transform: translateY(-50%); border: 0; border-radius: 6px; background: transparent; color: var(--app-accent-text); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.password-reveal-field__toggle:focus-visible { outline: 2px solid var(--welcome-accent-dark); outline-offset: -2px; }
.form-field small { color: var(--app-ink-3); font-size: 13px; font-weight: 500; line-height: 1.6; }
/* selectは枠線と背景だけが当たっていて、余白も幅も持たないまま素のセレクトに見えていた
   (ホーム画面タブの表示オプションがその状態)。同じ枠に並ぶinputと同じ箱にそろえる。
   矢印はブラウザ既定のものをそのまま使うので、右側だけ広めに空けておく。
   直接の子だけを対象にするのは、.search-input-row(詳細検索の条件行・予約投稿の時刻)のように
   横並びを前提にしたselectまで幅いっぱいにしてしまわないため。 */
.form-field > select { width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 32px 0 12px; border: 1px solid #d9e0df; border-radius: 9px; background: #fff; color: var(--welcome-ink); font: inherit; line-height: 1.6; outline: none; }
/* .form-field の font-weight はラベル文字のためのもの。入力欄は font:inherit で
   受け取ってしまい、同じ画面でも .form-field の中だけ入力文字が太くなっていた
   (プロフィール設定のニックネーム/自己紹介だけ太字、活動サイトは通常、という状態)。 */
/* .section-form input[type=text] の font:inherit の方が詳細度が高いので、
   同じ詳細度の指定も併記しないと input だけ太字のまま残る。 */
.form-field input, .form-field textarea, .form-field select,
.section-form .form-field input, .section-form .form-field textarea, .section-form .form-field select { font-weight: 400; }
.form-static { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 12px; border-radius: 9px; background: #f2f5f4; }
.form-static a { color: var(--app-accent-text); }
.site-fields { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin: 16px 0 0; padding: 0; border: 0; }
.site-fields legend { grid-column: 1/-1; color: var(--app-ink-2); font-size: 12px; font-weight: 800; }
.site-fields label { display: grid; gap: 5px; color: var(--app-ink-3); font-size: 12px; }
.site-fields input { width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px; }
.choice-field { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; padding: 0; border: 0; }
#analys-settings { scroll-margin-top: 86px; }
.choice-field legend { width: 100%; margin: 0 0 7px; color: var(--app-ink-2); font-size: 13px; font-weight: 800; }
.choice-field legend.sr-only { width: 1px; margin: -1px; }
.choice-field label { cursor: pointer; }
.choice-field input { position: absolute; opacity: 0; }
.choice-field span { display: block; padding: 9px 12px; border: 1px solid #dbe2e1; border-radius: 9px; color: var(--app-ink-2); font-size: 12px; font-weight: 750; }
.choice-field input:checked + span { border-color: var(--welcome-accent-dark); background: var(--app-accent-surface); color: var(--app-accent-text); }
.choice-field input:checked + span::before { margin-right: 5px; font-family: "Font Awesome 6 Pro"; font-weight: 400; content: "\f00c"; }
/* プレミアム限定の選択肢は disabled にしているが、見た目が普通の選択肢と同じだと
   押しても何も起きないだけで理由が伝わらない。触れないことが分かる色に落とす。
   「なぜ選べないか」はPREMIUMバッジ(.premium-label)が示す。 */
.choice-field input:disabled + span { border-color: #e6ebea; background: #f6f8f7; color: var(--app-ink-disabled); }
.choice-field label:has(input:disabled) { cursor: not-allowed; }
.switch-field:has(> input:disabled) { cursor: not-allowed; }
.switch-field:has(> input:disabled) b, .switch-field:has(> input:disabled) small { color: var(--app-ink-disabled); }
.is-dark-theme .choice-field input:disabled + span { border-color: #2c323b; background: #20252c; color: var(--app-ink-disabled); }
.switch-field { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; margin-top: 20px; cursor: pointer; }
.switch-field > input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--welcome-accent-dark); }
.switch-field > span { display: grid; gap: 4px; }
.switch-field b { color: var(--app-ink-2); font-size: 13px; }
.switch-field small { color: var(--app-ink-3); font-size: 13px; line-height: 1.6; }
/* プレミアム設定。旧PC版の本文をそのまま持ち込んでいるので、見出し・箱・表をアプリの粒度にそろえる */
.premium-page { display: grid; gap: 16px; }
.premium-page h2 { margin: 0; color: var(--welcome-ink); font-size: 18px; }
.premium-page h3 { margin: 0 0 6px; color: var(--welcome-ink); font-size: 15px; }
.premium-page p { margin: 0; color: var(--app-ink-2); font-size: 14px; line-height: 1.9; }
.premium-hero, .premium-box, .premium-plan { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid #e0e6e5; border-radius: 16px; background: #fff; }
.premium-hero h2 { font-size: 20px; line-height: 1.5; }
.premium-cta { display: flex; justify-content: center; }
.premium-cta iframe { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; }
.premium-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.premium-card { display: grid; gap: 8px; padding: 16px; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; }
.premium-card-image img { width: 100%; height: 140px; border-radius: 10px; object-fit: cover; }
.premium-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--app-ink-2); font-size: 14px; }
.premium-list li { position: relative; padding-left: 16px; }
.premium-list li::before { position: absolute; top: .72em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--welcome-accent-dark); content: ""; }
/* 比較表は列が多いので、画面をはみ出さず枠の中で横スクロールさせる */
.table-scroll { overflow-x: auto; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; }
.premium-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.premium-table th, .premium-table td { padding: 10px 12px; border-bottom: 1px solid #edf0ef; color: var(--app-ink-2); text-align: left; vertical-align: top; }
.premium-table th { color: var(--welcome-ink); font-weight: 800; white-space: nowrap; }
.premium-table tr:last-child td { border-bottom: 0; }
.premium-table td:first-child { color: var(--welcome-ink); font-weight: 700; }
.premium-plan-title { margin: 0 0 4px; color: var(--welcome-ink); font-size: 16px; font-weight: 800; }
.premium-page .section-button { margin-top: 6px; }
.premium-page .form-help { margin: 0; }
.is-dark-theme .premium-hero, .is-dark-theme .premium-box, .is-dark-theme .premium-plan, .is-dark-theme .premium-card, .is-dark-theme .table-scroll { border-color: #2c323b; background: #191d23; }
.is-dark-theme .premium-page h2, .is-dark-theme .premium-page h3, .is-dark-theme .premium-table th, .is-dark-theme .premium-table td:first-child, .is-dark-theme .premium-plan-title { color: #edf2f4; }
.is-dark-theme .premium-table th, .is-dark-theme .premium-table td { border-color: #2c323b; }
@media (min-width: 601px) { .premium-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* 画像編集。差し替え前の画像は正方形に切り出したサムネイルなので、枠も正方形にそろえる */
.edit-pic-current { width: 160px; height: 160px; border-radius: 12px; object-fit: cover; }
/* アルバム編集。1枚ずつカードにして、変更・削除・並べ替えをカード内で完結させる */
.album-edit { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.album-edit__item { display: grid; gap: 8px; padding: 10px; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; }
.album-edit__item.is-changed { border-color: var(--welcome-accent-dark); }
.album-edit__item img { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; background: #eef2f1; object-fit: cover; }
.album-edit__name { margin: 0; overflow: hidden; color: var(--app-ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.album-edit__tools { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 4px; }
.album-edit__tools .section-button { min-width: 0; padding: 0 6px; font-size: 12px; white-space: nowrap; }
/* 送信行に補助ボタンを並べるとき。主ボタンを右端に置く */
.form-submit--split { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.form-submit--split .section-button--primary { margin-left: auto; }
.is-dark-theme .album-edit__item { border-color: #2c323b; background: #191d23; }
.is-dark-theme .album-edit__item img { background: #20252c; }
@media (min-width: 601px) { .album-edit { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 961px) { .album-edit { grid-template-columns: repeat(4, minmax(0,1fr)); } }
/* AJAXで何かを変えたときの短い通知。画面下に重ねて数秒で消す。
   固定表示の送信バー(.form-submit)より手前に出す必要があるのでz-indexを上に取る。 */
/* AJAXで一覧を取り直している間の表示。空のままだと「0件」と見分けが付かない */
.list-loading { display: flex; align-items: center; gap: 4px; margin: 0; padding: 12px 2px; color: var(--app-ink-3); font-size: 13px; }
.list-loading.is-error { color: var(--app-danger); }
/* トーストは .app-page の**外**(body直下、またはdialog直下)に生やす。
   そのため .app-page 側で定義しているトークン(--app-danger など)は届かず、
   エラートーストが「背景色なし＋白文字」になって画面上から消えていた。
   面の色はこのコンテナ自身に持たせ、どこに生やしても同じ見た目になるようにする。 */
/* 画面上部に横いっぱいの帯で出す。下の中央に小さく出していたときは、
   画面の情報量に埋もれて気付かれなかった。ヘッダー(z-index:50)・ドロワー(60)より前へ。 */
.app-toasts { --app-toast-face: #197f9e; --app-toast-error-face: #b04752; position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: grid; gap: 1px; pointer-events: none; }
/* 地の文字色(ほぼ黒)だと画面に溶けるので、ブランド色の面に白文字で置く */
.app-toast { padding: calc(13px + env(safe-area-inset-top)) 16px 13px; background: var(--app-toast-face); box-shadow: 0 6px 22px rgba(23,32,39,.20); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.6; text-align: center; pointer-events: auto; cursor: pointer; animation: app-toast-in 200ms cubic-bezier(.23,1,.32,1); }
.app-toast--error { background: var(--app-toast-error-face); }
.app-toast.is-leaving { opacity: 0; transition: opacity 200ms ease; }
@keyframes app-toast-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
/* ダークでも同じ面の色。地色との差が十分あるので反転はしない */
@media (prefers-reduced-motion: reduce) { .app-toast { animation: none; } }
.form-submit { position: sticky; bottom: 12px; z-index: 10; padding: 8px; border-radius: 13px; background: rgba(245,247,246,.9); backdrop-filter: blur(10px); }
/* メール設定は独立した2フォーム。各保存ボタンをそのフォームの末尾に置く。 */
.section-form.mail-settings-form > .form-submit { position: static; bottom: auto; z-index: auto; padding: 0; border-radius: 0; background: none; backdrop-filter: none; }
/* 固定の保存バーが最後の項目を覆わないよう、バーの手前にスクロール余白を取る。
   最後のカードが非表示になるフォームでも効くよう、余白は送信バー自身に付ける。
   広告の帯があるとバーが100px上がるので、その分も足す。 */
.section-form:not(.mail-settings-form) > .form-submit { margin-top: calc(88px + env(safe-area-inset-bottom)); }
body:has(#geniee_overlay_outer) .section-form:not(.mail-settings-form) > .form-submit { margin-top: calc(188px + env(safe-area-inset-bottom)); }
body:has(.responsive-pc-ad-overlay.is-filled) .section-form:not(.mail-settings-form) > .form-submit { margin-top: calc(178px + env(safe-area-inset-bottom)); }
.settings-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 14px; align-items: start; }
.settings-group { min-width: 0; }
.settings-group > header { padding: 0 3px 11px; }
.settings-group > header h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 20px; font-weight: 900; line-height: 1.35; letter-spacing: -.015em; }
.settings-group > header h2::before { width: 4px; height: 21px; flex: 0 0 auto; border-radius: 999px; background: var(--welcome-accent-dark); content: ''; }
.settings-group > header p { margin: 5px 0 0 13px; color: var(--app-ink-3); font-size: 13px; line-height: 1.65; }
.settings-group > div { overflow: hidden; border: 1px solid #e0e6e5; border-radius: 15px; background: #fff; }
.settings-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 68px; padding: 13px 18px; border-bottom: 1px solid #edf0ef; color: var(--welcome-ink); text-decoration: none; }
.settings-row:last-child { border-bottom: 0; }
.settings-row > span { display: grid; gap: 4px; }
.settings-row strong { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 13px; }
.settings-row small { color: var(--app-ink-3); font-size: 13px; line-height: 1.55; }
.settings-row b { padding: 2px 5px; border-radius: 4px; font-size: 12px; font-style: normal; letter-spacing: .05em; background: #f4dfe1; color: var(--app-danger); }
.settings-row > i { color: var(--app-ink-3); font-size: 24px; font-style: normal; font-weight: 300; }
.settings-group--danger { grid-column: 1/-1; }
.settings-group--danger > header h2 { color: var(--app-danger); }
.settings-group--danger > header h2::before { background: #bd525e; }
.settings-group--danger .settings-row strong { color: var(--app-danger); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; width: min(720px,100%); margin-top: 14px; }
.section-button--danger { border-color: #e2c7ca; color: var(--app-danger); }
.avatar-editor { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 20px; align-items: center; margin-top: 18px; }
.avatar-editor > img { width: 112px; height: 112px; border-radius: 50%; background: #eef2f1; object-fit: cover; }
.avatar-editor__file { margin-top: 0; }
.section-notice { display: grid; gap: 3px; }
/* 上のdisplay:gridで中の要素が1つずつ別の行に割れる。
   「〇〇を表示しています ＋ 解除リンク」のように1文で流したいものはこちら。
   クラスを2つ重ねているのは、同じ詳細度だと並び順で負けるため(実際に負けて改行が直らなかった)。 */
.section-notice.section-notice--inline { display: block; }
.section-notice strong { color: inherit; font-size: 13px; }
.section-notice span { font-size: 12px; }
.section-notice--danger { border-color: #edd1d4; background: #fff4f5; color: var(--app-danger); }
/* プレミアム限定の案内(elements/premium_upsell)。ただの注意書きではなく誘導なので、
   見出しにバッジを添えて、設定名の横に付く .premium-label と同じ色でつなげる。 */
.section-notice--premium strong { display: flex; gap: 6px; align-items: center; color: var(--app-accent-text); }
.section-notice--premium strong i { color: var(--app-premium-badge); font-size: 12px; font-style: normal; }
.section-notice--premium a { justify-self: start; margin-top: 4px; }
.tag-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.tag-row > .tag-chip-list { margin-top: 0; }
.tag-edit-button { min-height: 34px; padding: 5px 12px; border-color: transparent; background: #eef2f1; color: var(--app-accent-text); }
.tag-edit-button:hover, .tag-edit-button[aria-expanded="true"] { background: #e0eae8; }
.tag-edit-panel[hidden] { display: none; }
.tag-edit-panel { display: grid; gap: 12px; animation: compose-panel-in 200ms cubic-bezier(.23,1,.32,1); }
.tag-edit-panel .tag-add-form { margin-top: 0; }
.tag-edit-panel p { margin: 0; color: var(--app-ink-3); font-size: 12px; line-height: 1.7; }
.tag-add-form { display: flex; gap: 8px; margin-top: 16px; }
.tag-add-form input { flex: 1; min-width: 0; box-sizing: border-box; padding: 11px 12px; border: 1px solid #d9e0df; border-radius: 9px; background: #fff; color: var(--welcome-ink); font: inherit; line-height: 1.6; outline: none; }
.tag-add-form .section-button { flex: 0 0 auto; }
.profile-tags { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.profile-tags > li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 6px 8px 6px 14px; border: 1px solid #e2e7e6; border-radius: 10px; }
.profile-tags__name { overflow: hidden; color: var(--welcome-ink); font-size: 14px; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.profile-tags__actions { display: flex; gap: 5px; }
.profile-tags__actions a, .profile-tags__actions button { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid #dce3e2; border-radius: 8px; background: #f7f9f8; color: var(--app-ink-2); cursor: pointer; font-size: 13px; text-decoration: none; }
.profile-tags__actions button { color: var(--app-danger); }
.empty-panel { margin: 16px 0 0; padding: 18px; border: 1px dashed #d7dfdd; border-radius: 10px; color: var(--app-ink-3); font-size: 13px; text-align: center; }
.form-captcha { margin: 20px 0; }
.inline-action { display: inline-flex; margin-top: 15px; color: var(--app-accent-text); font-size: 13px; font-weight: 800; }
.stacked-choices { display: grid; gap: 9px; margin: 18px 0 0; padding: 0; border: 0; }
.stacked-choices label { position: relative; cursor: pointer; }
.stacked-choices input { position: absolute; top: 18px; left: 16px; width: 18px; height: 18px; accent-color: var(--welcome-accent-dark); }
.stacked-choices label > span { display: grid; gap: 4px; min-height: 58px; box-sizing: border-box; padding: 12px 14px 12px 48px; border: 1px solid #dce3e2; border-radius: 11px; }
.stacked-choices input:checked + span { border-color: var(--welcome-accent-dark); background: var(--app-accent-surface); }
.stacked-choices b { font-size: 14px; }
.stacked-choices small { color: var(--app-ink-3); font-size: 12px; line-height: 1.55; }
.stacked-choices .is-disabled { cursor: not-allowed; opacity: .58; }
.password-fields { padding-top: 2px; }
.premium-label { margin-left: 6px; color: var(--app-premium-badge); font-size: 12px; font-style: normal; vertical-align: middle; }
.history-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.history-toolbar .section-button, .session-list .section-button { gap: 7px; }
.session-list { overflow: hidden; margin: 0; padding: 0; border: 1px solid #e0e6e5; border-radius: 15px; background: #fff; list-style: none; }
.session-list > li { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 13px; align-items: center; min-height: 72px; padding: 12px 16px; border-bottom: 1px solid #edf0ef; }
.session-list > li:last-child { border-bottom: 0; }
.session-list__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--app-accent-surface); color: var(--app-accent-text); font-size: 16px; }
.session-list__body { display: grid; gap: 4px; }
.session-list__body strong { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 14px; }
.session-list__body strong em { padding: 2px 6px; border-radius: 5px; background: #dfeeed; color: #397986; font-size: 12px; font-style: normal; }
.session-list__body span, .session-list__ended { color: var(--app-ink-3); font-size: 12px; }
.connection-sections { display: grid; gap: 14px; }
.connection-card { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 14px; align-items: center; margin-top: 14px; padding: 14px; border: 1px solid #e0e6e5; border-radius: 12px; }
.connection-card--stack { grid-template-columns: minmax(0,1fr) auto; }
.connection-card__service { display: flex; min-width: 0; gap: 11px; align-items: center; }
.connection-card__service > span:last-child { display: grid; min-width: 0; gap: 3px; }
.connection-card__service b { font-size: 14px; }
.connection-card__service small { color: var(--app-ink-3); font-size: 12px; }
.connection-card__service a { color: var(--welcome-ink); text-decoration: none; }
.connection-card__logo { display: grid; width: 40px; height: 40px; flex: 0 0 auto; overflow: hidden; place-items: center; border-radius: 10px; background: var(--app-accent-surface); color: #477b85; font-size: 16px; font-weight: 900; }
/* サービスのロゴ画像は正方形。枠いっぱいに敷いて、枠の背景色は見せない */
.connection-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.connection-card__status { display: grid; justify-items: end; gap: 5px; }
.connection-card__status a, .connection-card__help a, .connection-details a { color: var(--app-accent-text); font-size: 12px; font-weight: 800; }
.status-badge { display: inline-flex; width: max-content; padding: 3px 7px; border-radius: 6px; background: #eff1f1; color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.status-badge--connected { background: #dfeeed; color: #397986; }
.connection-details { display: grid; grid-column: 1/-1; gap: 1px; margin: 0; overflow: hidden; border-radius: 9px; background: #e5e9e8; }
.connection-details > div { display: grid; grid-template-columns: minmax(130px,.45fr) minmax(0,1fr); gap: 10px; padding: 9px 11px; background: #f7f9f8; }
.connection-details dt { color: var(--app-ink-3); font-size: 12px; font-weight: 700; }
.connection-details dd { margin: 0; overflow-wrap: anywhere; font-size: 12px; }
.connection-card__help { grid-column: 1/-1; margin: 0; color: var(--app-ink-3); font-size: 12px; line-height: 1.7; }
.form-panel.is-disabled { opacity: .58; }
.section-button:disabled { cursor: not-allowed; opacity: .48; }
.notification-form { gap: 10px; }
.notification-setting { padding: 17px 20px; }
.notification-setting > header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: start; }
.notification-setting > header h2 { font-size: 15px; }
.notification-setting > header p { margin: 4px 0 0; color: var(--app-ink-3); font-size: 13px; line-height: 1.6; }
.notification-setting > header .choice-field { justify-content: flex-end; margin-top: 0; }
.notification-setting > .switch-field { padding-top: 14px; border-top: 1px solid #edf0ef; }
.filter-manager .form-panel > .section-button { margin-top: 14px; }
.form-field + .section-button, .switch-field + .section-button, .choice-field + .section-button, .form-help + .section-button { margin-top: 14px; }
.filter-manager-tabs { display: inline-flex; margin-bottom: 14px; }
.filter-items__list { overflow: hidden; margin: 16px 0 0; padding: 0; border: 1px solid #e1e7e5; border-radius: 11px; list-style: none; }
.filter-items__list li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 48px; padding: 6px 7px 6px 14px; border-bottom: 1px solid #edf0ef; }
.filter-items__list li:last-child { border-bottom: 0; }
.filter-items__list a { overflow: hidden; color: var(--welcome-ink); font-size: 14px; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
/* 一覧の行に置く「×」だけの操作ボタン。.section-button を持つものは普通のボタンとして扱う
   (開催回の削除は「編集」と並ぶ .section-button で、36px角に詰めると文字が折り返す)。 */
.filter-items__list button:not(.section-button) { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid #e5d6d8; border-radius: 8px; background: #fff8f8; color: var(--app-danger); cursor: pointer; font-size: 13px; }
/* 削除ボタンは文字を持たないので、スピナーの右余白(文字との間隔用)が中心をずらす */
.filter-items__list button:not(.section-button) > .ui-spinner { margin-right: 0; border-color: var(--app-danger); border-top-color: transparent; opacity: 1; }
/* 36px角にアイコンとスピナーが両方入ると縦に積まれて潰れる。待ち表示中はスピナーだけにする */
.filter-items__list button:not(.section-button).is-loading > :not(.ui-spinner) { display: none; }
.filter-help > p { margin-bottom: 0; }
.event-body-item { min-height: 0; padding: 12px 14px; align-items: start; }
.event-body-item > a { display: grid; gap: 5px; overflow: visible; white-space: normal; }
.event-body-item time { color: var(--app-ink-3); font-size: 12px; font-weight: 700; }
.event-body-item .item-actions { flex-wrap: nowrap; }
.event-body-item .management-card__delete-form { flex: 0 0 auto; }
.management-card__badges span.is-now { background: #e2f1ed; color: #2f8267; }
.management-card__badges span.is-before { background: var(--app-accent-surface); color: var(--app-accent-text); }
.management-card__badges span.is-ended { background: #f1f3f2; color: var(--app-ink-3); }
.item-detail-thumb { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; background: #edf1f0; }
.event-body-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 13px; }
.event-body-pager a { color: var(--app-accent-text); font-weight: 800; text-decoration: none; }
.filter-help__examples { display: grid; gap: 1px; margin: 14px 0 0; overflow: hidden; border-radius: 9px; background: #e5e9e8; }
.filter-help__examples > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px; padding: 10px 12px; background: #fff; }
.filter-help__examples dt { color: var(--app-ink-2); font-size: 12px; font-weight: 800; }
.filter-help__examples dd { margin: 0; color: var(--app-ink-3); font-size: 12px; line-height: 1.65; }
.filter-help code { padding: 2px 5px; border-radius: 5px; background: #eef2f1; color: #526168; font-size: 12px; }
.filter-view-choice { margin-top: 15px; }
.tab-manager-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* シリーズの並び替え。並び順そのものが情報なので番号を振る(CSSカウンタなので入れ替えに追従する)。
   操作は上下の矢印。文字ボタンだと行が横に伸びるうえ、タブ管理の削除ボタン(赤)の見た目を
   借りていて消す操作に見えていた。 */
.series-order-list { display: grid; gap: 8px; margin: 0; padding: 0; counter-reset: series; list-style: none; }
.series-order-list > li { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #e0e6e5; border-radius: 12px; background: #fff; counter-increment: series; }
.series-order-list__no { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #eef2f1; color: var(--app-ink-2); font-size: 12px; font-weight: 800; }
.series-order-list__no::before { content: counter(series); }
.series-order-list img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; }
.series-order-list__title { overflow: hidden; color: var(--welcome-ink); font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.series-order-list__actions { display: flex; gap: 6px; }
.series-order-list .icon-button { width: 36px; height: 36px; font-size: 13px; }
.series-order-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0ef; color: var(--app-ink-3); font-size: 12px; line-height: 1.7; }
.series-order-note__form { display: inline; }
.tab-manager-list > li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 15px; align-items: center; padding: 16px 18px; border: 1px solid #e0e6e5; border-radius: 13px; background: #fff; }
.tab-manager-list__main { display: grid; min-width: 0; gap: 8px; }
.tab-manager-list__main > strong { font-size: 16px; }
.tab-manager-list__main > small { color: var(--app-ink-3); font-size: 12px; }
.tab-manager-list__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tab-manager-list__chips span { padding: 3px 7px; border-radius: 6px; background: #eef2f1; color: var(--app-ink-2); font-size: 12px; }
.tab-manager-list__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.tab-manager-list__actions a, .tab-manager-list__actions button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #dce3e2; border-radius: 8px; background: #f7f9f8; color: var(--app-ink-2); cursor: pointer; font-size: 12px; font-weight: 800; text-decoration: none; }
.tab-manager-list__actions button { border-color: #e5d6d8; background: #fff8f8; color: var(--app-danger); }
.tab-manager-note { width: min(720px,100%); box-sizing: border-box; margin-top: 14px; }
.tab-feed-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 22px 0 0; padding: 0; border: 0; }
.tab-feed-group legend { grid-column: 1/-1; margin-bottom: 2px; color: var(--app-ink-2); font-size: 13px; font-weight: 900; }
.tab-feed-option { position: relative; cursor: pointer; }
.tab-feed-option input { position: absolute; top: 15px; left: 13px; width: 17px; height: 17px; accent-color: var(--welcome-accent-dark); }
.tab-feed-option > span { display: flex; min-height: 48px; box-sizing: border-box; align-items: center; gap: 7px; padding: 10px 10px 10px 40px; border: 1px solid #dce3e2; border-radius: 10px; }
.tab-feed-option input:checked + span { border-color: var(--welcome-accent-dark); background: var(--app-accent-surface); }
.tab-feed-option b { font-size: 12px; line-height: 1.5; }
.tab-feed-option .premium-label { flex: 0 0 auto; }
.tab-feed-option.is-disabled { cursor: not-allowed; opacity: .52; }
.history-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.history-filters .section-segments { margin-bottom: 0; }
.history-work-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.history-work-card { position: relative; display: grid; grid-template-columns: var(--app-work-image-width) minmax(0,1fr); min-height: 176px; overflow: hidden; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; transition: border-color 140ms ease, box-shadow 140ms ease; }
/* カード全体を作品詳細へのリンクにする。aの入れ子は作れないので、タイトルのaを
   擬似要素でカード全面に広げる(stretched link)。フォーカス対象は1つのままで、
   ブックマークボタン・別ウィンドウ・作者名だけをその上に重ねて操作できるようにする。 */
.item-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.item-card:hover { border-color: #c9d6d4; box-shadow: 0 2px 10px rgba(20,30,30,.07); }
.item-card:has(.item-card__link:focus-visible) { outline: 2px solid var(--welcome-accent-dark); outline-offset: 2px; }
.item-card__link:focus-visible { outline: none; }
.item-card__author, .item-card__footer > div { position: relative; z-index: 2; }
/* スレッド・ピクログのフィードカード。作品カードと同じ枠・同じ余白のまま画像列だけ無くす。 */
.history-work-card.item-card--textonly { grid-template-columns: minmax(0,1fr); min-height: 0; }
.feed-card__kind { display: inline-flex; min-width: 0; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 5px; background: #edf2f1; color: var(--welcome-ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.feed-card__kind > i { flex: 0 0 auto; color: var(--app-ink-3); }
.feed-card__kind > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-card .history-work-card__meta { align-items: center; }
.feed-card .history-work-card__meta time { flex: 0 0 auto; }
/* 「○○さんがステキ！しました」等の注記。カード外にはタブ設定の区分名しか出さないので、ここに置く。 */
.item-card__note { margin: 4px 0 0; color: var(--app-ink-3); font-size: 12px; }
.item-card__note + .history-work-card__title-row { margin-top: 4px; }
.feed-card .history-work-card__body > p { -webkit-line-clamp: 3; margin-top: 8px; }
.feed-card__restriction { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--app-ink-3); font-size: 12px; }
.feed-card__counts { display: flex; gap: 10px; color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.feed-card__counts span { display: inline-flex; align-items: center; gap: 4px; }
/* 添付があること。旧SP版と同じく日付の隣に、日付と同じ調子で置く。
   見出しと日付は space-between で両端に寄るので、印は日付と1組にして右端へ運ぶ。 */
.feed-card__meta-right { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.feed-card__attach { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--app-accent-surface); color: var(--app-accent-text); font-size: 12px; }
.history-work-card__image { position: relative; display: grid; min-height: 176px; place-items: center; overflow: hidden; background: #eef2f1; }
.history-work-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.history-work-card__image img.blur { filter: blur(2px); }
.history-work-card__body { display: flex; min-width: 0; flex-direction: column; padding: 14px; }
.history-work-card__meta { display: flex; justify-content: space-between; gap: 8px; color: var(--app-ink-3); font-size: 12px; }
.history-work-card h2 { margin: 7px 0 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
/* 日付は上のメタ行で右寄せし、タイトルには横幅全体を使う。 */
.history-work-card__title-row { display: flex; align-items: baseline; gap: 10px; margin-top: 7px; }
.history-work-card__title-row h2 { min-width: 0; flex: 1 1 auto; margin: 0; }
.item-card .history-work-card__meta { flex-wrap: wrap; align-items: center; }
.item-card .history-work-card__meta > .history-work-card__badges { margin: 0; }
.item-card .history-work-card__meta time { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.history-work-card h2 a { color: var(--welcome-ink); text-decoration: none; }
.history-work-card__body > p { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: var(--app-ink-2); font-size: 12px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.history-work-card__badges, .history-work-card .section-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
/* 閲覧条件はカードの先頭。可視性の制御がこのサービスの中心なので、タイトルより先に見せる。 */
.history-work-card__body > .history-work-card__badges:first-child { margin: 0 0 7px; }
.history-work-card__badges:first-child + .history-work-card__title-row, .history-work-card__badges:first-child + .history-work-card__meta { margin-top: 0; }
/* 閲覧条件の色分けはSP版（--r18 / --r18g / --lock / --out）を踏襲する。 */
.history-work-card__badges span { padding: 2px 6px; border-radius: 5px; background: #edf2f1; color: var(--app-ink-2); font-size: 12px; }
.history-work-card__badges span.is-r18 { background: #f8e6e6; color: #a8494b; font-weight: 800; }
.history-work-card__badges span.is-r18g { background: #f1e8ef; color: #7c5271; font-weight: 800; }
.history-work-card__badges span.is-lock { background: #000; color: #fff; font-weight: 800; }
.history-work-card__badges span.is-out { background: #f6ece3; color: #98572a; font-weight: 800; }
.history-work-card .section-card__tags a, .history-work-card .section-card__tags span { color: var(--app-ink-3); font-size: 12px; text-decoration: none; }
.wall-color-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.wall-color-grid button { display: grid; gap: 5px; padding: 6px; border: 1px solid #dce3e2; border-radius: 9px; background: #f7f9f8; color: var(--app-ink-3); cursor: pointer; }
.wall-color-grid button > span { height: 42px; border: 1px solid rgba(0,0,0,.1); border-radius: 6px; background: var(--wall-color); }
.wall-color-grid button small { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.wall-color-grid button.is-selected { border-color: var(--welcome-accent-dark); box-shadow: 0 0 0 2px rgba(74,155,171,.18); }
.wall-current { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 16px; align-items: center; margin-bottom: 18px; }
.wall-current > img { width: 120px; height: 90px; border-radius: 10px; object-fit: cover; }
.wall-current .switch-field { margin-top: 0; }
.design-panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.design-panel-heading p { margin: 4px 0 0; color: var(--app-ink-3); font-size: 13px; }
.design-color-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.color-field { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 7px; }
.color-field input[type=color] { width: 46px; height: 46px; box-sizing: border-box; padding: 3px; border: 1px solid #dce3e2; border-radius: 8px; background: #fff; cursor: pointer; }
.saved-panel { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; width: min(720px,100%); box-sizing: border-box; padding: 22px; border: 1px solid #dce5e2; border-radius: 15px; background: #fff; }
.saved-panel__icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: #e2f1ed; color: #398271; font-size: 20px; }
.saved-panel h2 { margin: 3px 0 0; font-size: 18px; }
.saved-panel p { margin: 7px 0 0; color: var(--app-ink-3); font-size: 13px; line-height: 1.7; }
.saved-panel__actions { display: flex; grid-column: 2; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.follower-nav { margin-bottom: 0; }
.follower-total, .follower-counts { color: var(--app-ink-3); font-size: 13px; }
.follower-counts { display: flex; align-items: center; gap: 9px; }
.follower-counts span { padding-left: 9px; border-left: 1px solid #dce3e2; }
.follower-list, .follow-request-list { display: grid; width: min(780px,100%); gap: 11px; }
.follower-card { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 15px; padding: 17px; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; }
.follower-card__avatar { display: block; width: 76px; height: 76px; overflow: hidden; border-radius: 50%; background: #edf1f0; }
.follower-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.follower-card__body { display: grid; min-width: 0; align-content: start; }
.follower-card__body > header { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.follower-card__identity { display: flex; min-width: 0; flex-wrap: wrap; gap: 7px; align-items: center; }
.follower-card__identity > a { overflow: hidden; color: var(--welcome-ink); font-size: 15px; font-weight: 850; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.follower-card__badges { display: flex; gap: 5px; }
.follower-card__badges span { padding: 3px 6px; border-radius: 5px; background: #f1ecec; color: var(--app-danger); font-size: 12px; font-weight: 800; }
.follower-card__badges span.is-mutual { background: #e6f1ee; color: #397c70; }
.follower-card__actions { display: flex; flex: 0 0 auto; gap: 7px; }
.follower-card__actions .section-button { min-height: 36px; padding: 0 10px; }
.follower-card__body > p { display: -webkit-box; overflow: hidden; margin: 7px 0 10px; color: var(--app-ink-2); font-size: 13px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.follower-card__metrics { display: flex; gap: 20px; margin: auto 0 0; }
.follower-card__metrics div { display: flex; gap: 6px; align-items: baseline; }
.follower-card__metrics dt { color: var(--app-ink-3); font-size: 12px; }
.follower-card__metrics dd { margin: 0; color: var(--app-ink-2); font-size: 13px; font-weight: 850; }
.follower-card--profile { position: relative; grid-template-columns: 68px minmax(0,1fr); min-height: 146px; gap: 12px; padding: 14px; overflow: visible; }
.follower-card--profile > .follower-card__avatar { width: 68px; height: 68px; align-self: start; border-radius: 50%; }
.follower-card--profile > .follower-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.follower-card--profile .follower-card__body { display: flex; flex-direction: column; padding: 0; }
.follower-card--profile .follower-card__body > header { display: block; }
.follower-card--has-menu .follower-card__body > header { padding-right: 42px; }
.follower-card--profile .follower-card__identity { display: grid; justify-items: start; gap: 6px; }
.follower-card--profile .follower-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.follower-card--profile .follower-card__body > p { margin: 7px 0 0; }
.follower-card--profile .follower-card__metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: auto 0 0; padding: 10px 0 0; }
.follower-card--profile .follower-card__metrics div { display: grid; min-width: 0; justify-items: center; gap: 3px; padding: 8px 2px; border-radius: 8px; background: #f1f4f3; }
.follower-card--profile .follower-card__metrics dt { font-size: 12px; line-height: 1.2; }
.follower-card--profile .follower-card__metrics dd { color: var(--welcome-ink); font-size: 14px; line-height: 1.2; }
.follower-card--profile > .follower-card__menu { position: absolute; top: 10px; right: 10px; z-index: 3; }
.follower-card__request-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.follower-card__request-actions .section-button { min-height: 36px; }
.follower-card__menu > div button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--app-danger); cursor: pointer; font: inherit; font-size: 12px; font-weight: 750; text-align: left; }
.follower-card__menu > div button:hover { background: #f2f5f4; }
.follower-request-filter { width: max-content; margin: 0 0 14px; }
.section-button.is-disabled { cursor: default; opacity: .52; }
.search-actions__register .section-button.is-registered { border-color: var(--app-accent-line); background: var(--app-accent-surface); color: var(--app-accent-on-surface); }
.signout-panel .section-notice { display: grid; gap: 3px; }
.signout-panel .section-notice strong { font-size: 14px; }
.signout-complete-main { display: grid; min-height: calc(100vh - 132px); padding: 48px 16px; place-items: center; }
.signout-complete { width: min(560px,100%); box-sizing: border-box; padding: 38px 30px; border: 1px solid #dfe5e4; border-radius: 18px; background: #fff; text-align: center; }
.signout-complete__icon { display: grid; width: 54px; height: 54px; margin: 0 auto 17px; place-items: center; border-radius: 50%; background: #e3f1ed; color: #3d8575; font-size: 21px; }
.signout-complete h1 { margin: 4px 0 10px; font-size: 25px; }
.signout-complete > p:not(.welcome-eyebrow) { margin: 0 0 22px; color: var(--app-ink-2); font-size: 13px; line-height: 1.8; }
.resource-access-manager__target { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 0 14px; border: 1px solid #dce3e2; border-radius: 10px; background: #fff; color: var(--welcome-ink); font-size: 14px; font-weight: 850; text-decoration: none; }
.resource-access-manager__target span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-access-manager__target i { color: var(--app-ink-3); font-size: 20px; font-style: normal; }
.resource-access-manager .form-panel > .resource-access-manager__add-heading { margin-top: 22px; }
.comment-block-list { display: grid; width: min(780px,100%); gap: 10px; }
.comment-block-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 15px; align-items: center; padding: 16px 18px; border: 1px solid #e0e6e5; border-radius: 13px; background: #fff; }
.comment-block-card time { color: var(--app-ink-3); font-size: 12px; }
.comment-block-card h2 { margin: 5px 0 0; font-size: 14px; line-height: 1.5; }
.message-detail { width: min(780px,100%); overflow: hidden; border: 1px solid #e0e6e5; border-radius: 15px; background: #fff; }
.message-detail__header { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid #edf0ef; }
.message-detail__avatar { display: grid; width: 50px; height: 50px; overflow: hidden; place-items: center; border-radius: 50%; background: #edf2f1; color: var(--app-ink-3); }
.message-detail__avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-detail__header > div { display: grid; min-width: 0; gap: 2px; }
.message-detail__header small, .message-recipient small, .message-confirm > div > small { color: var(--app-ink-3); font-size: 12px; }
.message-detail__header a { color: var(--welcome-ink); text-decoration: none; }
.message-detail__header strong { font-size: 14px; }
.message-detail__header time { color: var(--app-ink-3); font-size: 12px; }
.message-detail__content { padding: 23px 22px 28px; }
.message-detail__content h1 { margin: 0 0 20px; font-size: 18px; line-height: 1.55; }
.message-detail__content > div { color: var(--app-ink-2); font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.message-detail__content a { color: var(--app-accent-text); }
.message-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid #edf0ef; }
.message-recipient { display: flex; gap: 11px; align-items: center; margin: 14px 0 20px; color: var(--welcome-ink); text-decoration: none; }
.message-recipient img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.message-recipient span { display: grid; gap: 2px; }
.message-recipient strong { font-size: 14px; }
.message-confirm { display: grid; gap: 18px; }
.message-confirm .message-recipient { margin: 0; }
.message-confirm > div:not(.form-actions) { display: grid; gap: 5px; padding-top: 17px; border-top: 1px solid #edf0ef; }
.message-confirm > div > strong { font-size: 15px; }
.message-confirm > div > p { margin: 0; color: var(--app-ink-2); font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; }
.information-list { overflow: hidden; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; }
.information-list > a { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; gap: 15px; align-items: center; min-height: 62px; padding: 0 18px; border-bottom: 1px solid #edf0ef; color: var(--welcome-ink); text-decoration: none; }
.information-list > a:last-child { border-bottom: 0; }
.information-list time { color: var(--app-ink-3); font-size: 12px; }
.information-list strong { font-size: 14px; line-height: 1.5; }
.information-list i { color: var(--app-ink-3); font-size: 20px; font-style: normal; }
.information-detail__body { color: var(--app-ink-2); font-size: 14px; line-height: 1.95; overflow-wrap: anywhere; }
.information-detail__body a { color: var(--app-accent-text); }
.information-detail__image { margin: 24px 0 0; }
.information-detail__image img { display: block; width: 100%; height: auto; border-radius: 12px; }
.information-detail__pager { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: center; margin-top: 30px; }
.information-detail__pager a { display: grid; min-width: 0; gap: 3px; color: var(--welcome-ink); font-size: 12px; text-decoration: none; }
.information-detail__pager a strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.information-detail__pager a span { color: var(--app-ink-3); }
.information-detail__pager .is-next { text-align: right; }
.information-detail__pager .is-index { min-height: 38px; padding: 0 13px; place-items: center; border: 1px solid #dce3e2; border-radius: 9px; }
.information-social { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 30px; padding: 16px 18px; border-radius: 12px; background: #f1f5f4; }
.information-social p { margin: 0; color: var(--app-ink-2); font-size: 13px; line-height: 1.65; }
.information-social__links { display: flex; flex-wrap: wrap; gap: 8px; }
.search-toolbar,.search-actions{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}.search-actions{margin-bottom:18px}.search-actions__register{display:flex;flex-wrap:wrap;gap:9px;margin-left:auto}.search-period{width:min(720px,100%);box-sizing:border-box;margin-bottom:18px}.search-period h2 span{margin-left:7px}.search-period__choices{grid-template-columns:repeat(4,minmax(0,1fr))}.search-period__dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.search-period input[type=date]{min-height:42px;padding:0 10px;border:1px solid #d9e0df;border-radius:9px;background:#fff;color:var(--welcome-ink);font:inherit}.item-card__footer{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:auto;padding-top:10px}.item-card__author{display:flex;min-width:0;gap:6px;align-items:center;overflow:hidden;color: var(--app-ink-3);font-size:12px;font-weight:700;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.item-card__author img{width:22px;height:22px;flex:0 0 auto;border-radius:50%;object-fit:cover}.item-card__footer>div{display:flex;gap:5px}.item-card__footer button,.item-card__footer>div a{display:grid;width:34px;height:34px;padding:0;place-items:center;border:1px solid #dce3e2;border-radius:8px;background:#f7f9f8;color: var(--app-ink-3);cursor:pointer}.item-card__footer button.is-active{color:#d2a33c}.search-related{margin-top:30px}.search-related>h2{margin:0 0 13px;font-size:18px}.search-premium{margin-top:24px}.search-premium>.section-notice{margin-bottom:0}.popular-tag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.popular-tag-grid a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:center;min-height:48px;padding:0 13px;border:1px solid #e0e6e5;border-radius:10px;background:#fff;color:var(--welcome-ink);text-decoration:none}.popular-tag-grid a>span{color:var(--app-accent-text)}.popular-tag-grid strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.popular-tag-grid small{color: var(--app-ink-3);font-size:12px}.user-search-list{display:grid;width:min(780px,100%);gap:11px}
.item-gate { padding: 20px; border: 1px solid #e0e6e5; border-radius: 15px; background: #fff; }
.item-gate h1 { margin: 0; font-size: 17px; line-height: 1.5; }
.gate-notice__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.gate-notice__tags a { padding: 4px 10px; border: 1px solid #e0e6e5; border-radius: 999px; color: var(--app-ink-2); font-size: 12px; font-weight: 700; text-decoration: none; }
.gate-notice__about { margin: 6px 0 18px; color: var(--app-ink-2); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.gate-notice__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gate-author { margin-top: 20px; }
.gate-author h2 { margin: 0 0 10px; font-size: 15px; }
.gate-author__card { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 14px; align-items: center; padding: 14px; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; }
.gate-author__avatar { display: block; width: 58px; height: 58px; overflow: hidden; border-radius: 50%; background: #edf1f0; }
.gate-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gate-author__name { color: var(--welcome-ink); font-size: 14px; font-weight: 850; text-decoration: none; }
.gate-author__profile { margin: 4px 0 0; color: var(--app-ink-2); font-size: 13px; line-height: 1.65; }
.gate-author__metrics { display: flex; gap: 18px; margin: 6px 0 0; }
.gate-author__metrics div { display: flex; gap: 6px; align-items: baseline; }
.gate-author__metrics dt { color: var(--app-ink-3); font-size: 12px; }
.gate-author__metrics dd { margin: 0; color: var(--app-ink-2); font-size: 13px; font-weight: 850; }
.profile-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 14px; padding: 20px; border: 1px solid #e0e6e5; border-radius: 16px; background: #fff; margin-bottom: 18px; }
.profile-hero__own-notice { margin: 0; width: max-content; padding: 4px 9px; border-radius: 6px; background: var(--app-accent-surface); color: var(--app-ink-2); font-size: 12px; font-weight: 750; }
.profile-hero__edit { position: absolute; top: 20px; right: 20px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #dce3e2; border-radius: 50%; background: #fff; color: var(--app-ink-2); font-size: 15px; text-decoration: none; transition: transform 140ms var(--welcome-ease-out), border-color 160ms ease, color 160ms ease; }
.profile-hero__edit:active { transform: scale(.96); }
.profile-hero__main { display: flex; gap: 14px; align-items: center; }
.profile-hero__avatar { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 50%; background: #edf1f0; object-fit: cover; }
.profile-hero__identity { display: grid; gap: 6px; min-width: 0; }
.profile-hero__identity > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profile-hero__identity h1 { margin: 0; color: var(--welcome-ink); font-size: 20px; }
.profile-hero__identity > div:first-child span { padding: 3px 8px; border-radius: 6px; background: var(--app-accent-surface); color: var(--app-accent-text); font-size: 12px; font-weight: 800; }
.profile-hero__identity > div:first-child span.is-premium { padding: 0; background: none; color: var(--app-premium-badge); font-size: 16px; }
.profile-hero__identity > button[data-copy-user-code] { justify-self: start; padding: 4px 9px; border: 1px solid #d8dfde; border-radius: 8px; background: #f7f9f8; color: var(--app-ink-2); font-size: 12px; cursor: pointer; }
.profile-hero__actions { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.profile-action-menu summary { list-style: none; }
/* 相手への管理操作は右上の丸ボタン。自分のプロフィールの編集ボタン(.profile-hero__edit)と同じ位置・同じ形。
   absoluteなのでドロップダウンの位置(top:46px/right:0)もこのボタン基準になる。 */
.profile-hero__menu { position: absolute; top: 20px; right: 20px; }
.profile-hero__menu > summary { display: grid; width: 36px; height: 36px; min-height: 0; padding: 0; place-items: center; border-radius: 50%; color: var(--app-ink-2); font-size: 15px; }
.profile-hero__menu > summary i { margin: 0; }
/* フォローと匿名フォローのボタングループ。匿名フォローはフォローの種類違いなので、
   同じ大きさで横に並べず、フォローボタンと地続きのドロップダウンに寄せる。 */
.profile-follow-group { position: relative; display: inline-flex; }
.profile-follow-group__more { position: static; }
.profile-follow-group > [data-follow-primary] { flex: 0 1 auto; }
.profile-follow-group:has(> [data-follow-more]:not([hidden])) > [data-follow-primary] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.profile-follow-group__more > summary { margin-left: -1px; padding: 0 11px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* 1つのボタンに見せるので、開閉つまみ側もフォローボタンと同じ面の色にする。
   境目は白の縦線1本(重なった左枠線)だけで示す。 */
.profile-follow-group:has(> [data-follow-primary].section-button--primary) > .profile-follow-group__more > summary { border-color: var(--welcome-accent-dark); border-left-color: rgba(255,255,255,.45); background: var(--welcome-accent-dark); color: #fff; }
.profile-follow-group__more > summary i { margin: 0; }
.profile-follow-group__more > div { top: 46px; left: 0; right: auto; min-width: 180px; }
.profile-follow-group__more > div button i { margin-right: 6px; }
.profile-action-menu summary::-webkit-details-marker { display: none; }
.profile-action-menu > div { position: absolute; top: 46px; right: 0; z-index: 20; display: grid; gap: 2px; width: max-content; min-width: 220px; padding: 6px; border: 1px solid #e0e6e5; border-radius: 12px; background: #fff; box-shadow: 0 14px 38px rgba(23,31,34,.16); }
.profile-action-menu > div button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--welcome-ink); font-size: 12px; font-weight: 750; text-align: left; cursor: pointer; }
.profile-action-menu > div button:hover { background: #f2f5f4; }
.profile-action-menu > div button small { margin-left: 5px; padding: 1px 5px; border-radius: 4px; background: var(--app-accent-surface); color: var(--app-accent-text); font-size: 12px; }
.profile-hero__stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; margin: 0; }
.profile-hero__stats a { display: grid; gap: 3px; justify-items: center; padding: 8px 2px; border-radius: 8px; background: #f1f4f3; color: inherit; text-decoration: none; }
.profile-hero__stats dt { color: var(--app-ink-3); font-size: 12px; line-height: 1.2; }
.profile-hero__stats dd { margin: 0; color: var(--welcome-ink); font-size: 14px; font-weight: 850; line-height: 1.2; }
.profile-hero__stats-link { display: flex; justify-content: flex-end; margin-top: 6px; }
.profile-hero__stats-link a { color: var(--app-accent-text); font-size: 12px; font-weight: 800; text-decoration: none; }
.profile-hero__stats-link a:hover { text-decoration: underline; }
.profile-hero__stats-link i { margin-right: 5px; }
.profile-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profile-hero__badges[hidden] { display: none; }
.profile-hero__badges a, .profile-hero__badges span { padding: 4px 9px; border-radius: 6px; background: var(--app-accent-surface); color: var(--app-ink-2); font-size: 12px; font-weight: 750; text-decoration: none; }
/* アクセスブロックは相手から完全に見えなくする強い状態。除外・ステキミュート(表示を絞るだけ)と
   同じ見た目だと重さの差が伝わらないので、設定行の注意ラベル(.settings-row b)と同じ警告色にする。 */
/* 除外・ステキミュートは表示を絞るだけ(相手からは今までどおり見える)なので、
   アクセスブロックの警告色とは分けて一段弱い注意色にする。 */
.profile-hero__badges a.is-warn { background: #f7edd9; color: var(--app-warn); }
.profile-hero__badges a.is-danger { background: #f4dfe1; color: var(--app-danger); }
.profile-hero > * { min-width: 0; }
.profile-hero__bio { color: var(--welcome-ink); font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-links { border: 1px solid #e0e6e5; border-radius: 12px; padding: 0 14px; }
/* 旧SP版と同じく、活動サイト・作品シリーズは畳まずに見出し+一覧を常に見せる */
.profile-links h2 { margin: 0; padding: 12px 0 8px; color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.profile-links > div { display: grid; gap: 1px; padding-bottom: 8px; }
.profile-links > div > a, .profile-links > div > span { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; color: var(--welcome-ink); text-decoration: none; }
.profile-links > div > a > span { display: block; flex: 1 1 0; min-width: 0; }
.profile-links strong { display: block; word-break: normal; overflow-wrap: anywhere; }
.profile-links small { display: block; color: var(--app-ink-3); font-size: 12px; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.profile-links > div > a > i { flex: 0 0 auto; }
.profile-follow-request { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.profile-follow-request > div { display: flex; gap: 8px; }
.profile-item-tags > .tag-chip-list { margin-top: 12px; }
/* .section-emptyはグリッドの中に置く前提でmarginを持たない。プロフィールはmainの直下に
   直接置くためgapが効かず、タブや下の案内文とくっついて見えるので、
   作品一覧(.history-work-list)と同じ上余白とブロック間の下余白を与える。 */
.profile-empty { margin: 14px 0 18px; }
.profile-more { display: flex; justify-content: center; margin-top: 16px; }
/* 「作品をすべて見る」の末尾アイコンは共通ルールの margin-right が効くと文字から離れるので上書き */
.profile-more .section-button i { margin: 0 0 0 6px; }
/* 右カラムを持たない詳細画面。幅は他の画面の本文列(752px)に合わせる */
.item-detail-page { display: grid; gap: 16px; width: min(752px,100%); margin: 0 auto; }
.item-detail-page.is-gated > :not(.item-gate-overlay) { display: none; }
/* 「閲覧する」を押すと is-gated が外れて本体が出る。確認パネル側も必ず消すこと。
   JSのhidden属性では .item-gate-overlay の display:grid に負けて消えないので、ここで出し分ける。 */
.item-detail-page:not(.is-gated) > .item-gate-overlay { display: none; }
/* 小説のみ表示(読書モード)。本文と読むための操作だけを残す。
   .item-viewer の中身は小説ではツールバーと本文だけなので、直下で畳めば足りる。 */
.item-detail-page.is-reading > :not(.item-viewer) { display: none; }
/* 読書モードでは右カラムも畳む。本文だけを残すのが目的なので、隣に別のものを置かない。 */
.section-layout:has(> .item-detail-page.is-reading) > :not(.item-detail-page) { display: none; }
.section-layout:has(> .item-detail-page.is-reading) { grid-template-columns: minmax(0, 1fr); }
.app-page:has(.item-detail-page.is-reading) > .app-drawer { display: none; }
.app-page:has(.item-detail-page.is-reading) > .app-surface { margin-left: 0; transform: none; transition: none; }
.app-page:has(.item-detail-page.is-reading) .app-menu-toggle { display: none; }

.item-detail-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--app-ink-3); font-size: 13px; }
.item-detail-toolbar { display: flex; justify-content: flex-end; gap: 8px; }
.icon-button { display: inline-grid; box-sizing: border-box; width: 40px; height: 40px; place-items: center; border: 1px solid #d9e1e1; border-radius: 50%; background: #f6f9f8; color: var(--app-accent-text); cursor: pointer; list-style: none; text-decoration: none; }
.icon-button::-webkit-details-marker { display: none; }
.icon-button.is-active { border-color: var(--welcome-accent-dark); background: var(--app-accent-surface-strong); }
.icon-menu { position: relative; }
.icon-menu > div { position: absolute; top: 46px; right: 0; z-index: 20; display: grid; gap: 2px; width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 32px)); padding: 6px; border: 1px solid #e0e6e5; border-radius: 12px; background: #fff; box-shadow: 0 14px 38px rgba(23,31,34,.16); }
.icon-menu > div a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; color: var(--welcome-ink); font-size: 12px; font-weight: 750; text-decoration: none; }
.icon-menu > div a:hover { background: #f2f5f4; }
.icon-menu__info { display: grid; gap: 6px; padding: 10px; font-size: 12px; }
.icon-menu__info div { display: flex; justify-content: space-between; gap: 12px; }
.icon-menu__info span { color: var(--app-ink-3); }
.icon-menu__info b { color: var(--welcome-ink); font-weight: 750; }
.icon-menu__section { display: grid; gap: 8px; padding: 10px; }
.icon-menu > div > .icon-menu__section:not(:first-child) { border-top: 1px solid #edf0ef; margin-top: 4px; padding-top: 12px; }
.item-detail-title { margin: 0; color: var(--welcome-ink); font-size: clamp(20px,3vw,26px); line-height: 1.35; }
.item-detail-about { margin: 0; color: var(--app-ink-2); font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 自由入力の本文内リンク。旧ヘルパーのインライン文字色にも優先してテーマ色を適用する。 */
.item-detail-about a[href],
.gate-notice__about a[href],
.profile-hero__bio a[href],
.thread-timeline__text a[href] { color: var(--app-accent-text) !important; text-decoration: underline; text-underline-offset: 2px; }

/* シリーズ。丸ボタン2つとシリーズ名を並べるだけだと、前後の作品が無いときに
   中身の無い丸が残り、何の操作ができるのか分からなかった。文字で示す。 */
.item-series { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid #dce3e2; border-radius: 14px; background: #fff; }
.item-series__head { display: grid; gap: 3px; min-width: 0; }
.item-series__label { display: inline-flex; align-items: center; gap: 6px; color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
/* 「全N作中M作目」は見出しの添え字。区切りが無いと見出しと地続きに読める */
.item-series__label b { padding-left: 6px; border-left: 1px solid #dfe5e4; font-weight: 800; }
/* シリーズ名自体が一覧への入口。主役はその下の前後移動なので控えめに置く */
.item-series__title { display: inline-flex; min-width: 0; align-items: center; gap: 6px; color: var(--welcome-ink); font-size: 15px; font-weight: 800; text-decoration: none; }
.item-series__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-series__title > i { flex: 0 0 auto; color: var(--app-ink-3); font-size: 12px; }
/* 前後移動。左右で半分ずつ使い、飛び先の作品名まで出す */
.item-series__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 10px; border-top: 1px solid #edf0ef; }
.item-series__step { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--welcome-ink); text-decoration: none; }
.item-series__step--next { justify-content: flex-end; text-align: right; }
.item-series__step > span { display: grid; min-width: 0; gap: 1px; }
.item-series__step > i { flex: 0 0 auto; }
.item-series__step small { color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.item-series__step b { overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
/* 進めない側は押せないことが分かるよう色を落とす */
.item-series__step.is-disabled { color: var(--app-ink-disabled); }
.item-series__step.is-disabled b { font-weight: 700; }
.item-viewer { display: grid; gap: 10px; }
/* 投稿物の保護。旧PC/SP版の .protect と同じ扱いで、投稿物そのものだけに掛ける。
   画面の他の場所(説明文・コメント・書き込みの文章)は選択・コピーできるままにする。 */
.item-viewer img, .item-viewer__novel, .blog-timeline__images img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.item-viewer__toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* ツールバーのボタン(40px)と高さをそろえる。 */
.item-viewer__font select { min-height: 40px; }
.item-viewer__image-wrap { display: grid; place-items: center; overflow: hidden; border-radius: 15px; background: #101318; }
.item-viewer__image-wrap img { max-width: 100%; height: auto; }
/* 画像をクリックすると原寸ビューアが開く */
.item-viewer__image-wrap[data-zoom-open] { cursor: zoom-in; }
/* 原寸ビューア。画面いっぱいを使い、拡大しても端が切れないよう自前で移動できるようにする。
   ダイアログ自体は余白ゼロで、中の .zoom-viewer__stage が操作面。 */
.zoom-viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: #0b0e11; }
.zoom-viewer::backdrop { background: #0b0e11; }
.zoom-viewer__stage { position: absolute; inset: 0; overflow: hidden; cursor: default; touch-action: none; }
.zoom-viewer__stage.is-pannable { cursor: grab; }
.zoom-viewer__stage.is-pannable:active { cursor: grabbing; }
.zoom-viewer__stage img { position: absolute; top: 0; left: 0; display: block; max-width: none; transform-origin: 0 0; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.zoom-viewer__loading, .zoom-viewer__error { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; margin: 0; transform: translate(-50%,-50%); color: #e4e8eb; font-size: 13px; }
.zoom-viewer__loading[hidden], .zoom-viewer__error[hidden] { display: none; }
.zoom-viewer__close { position: absolute; top: 12px; right: 12px; display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(18,22,26,.72); color: #fff; cursor: pointer; }
.zoom-viewer__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.zoom-viewer__nav { position: absolute; top: 50%; display: grid; width: 40px; height: 40px; padding: 0; place-items: center; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(18,22,26,.72); color: #fff; cursor: pointer; }
.zoom-viewer__nav--prev { left: 10px; }
.zoom-viewer__nav--next { right: 10px; }
.zoom-viewer__nav[hidden] { display: none; }
.zoom-viewer__bar { position: absolute; bottom: 16px; left: 50%; display: flex; align-items: center; gap: 4px; padding: 4px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(18,22,26,.82); }
.zoom-viewer__bar button { min-width: 44px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.zoom-viewer__bar button:hover { background: rgba(255,255,255,.12); }
.zoom-viewer__count { padding: 0 12px 0 8px; border-left: 1px solid rgba(255,255,255,.18); color: #e4e8eb; font-size: 12px; font-weight: 800; white-space: nowrap; }
.zoom-viewer__count[hidden] { display: none; }
.zoom-viewer__hint { position: absolute; top: 12px; left: 50%; margin: 0; padding: 6px 14px; transform: translateX(-50%); border-radius: 999px; background: rgba(18,22,26,.82); color: #e4e8eb; font-size: 12px; }
.zoom-viewer__hint[hidden] { display: none; }
/* アルバムの「N / M」は画像の下に1つだけ置く注記なので、画像に対して中央に寄せる */
.item-viewer__caption { display: flex; justify-content: center; color: var(--app-ink-3); font-size: 12px; }
/* pre-wrapを外枠に当てると、ページャなどのマークアップの間の改行・インデントまで
   そのまま描画されて謎の空白になる。改行を保持したいのは本文だけなので.item-viewer__pageへ移す。 */
.item-viewer__novel { scroll-margin-top: 86px; padding: 24px; border: 1px solid #e0e6e5; border-radius: 15px; background: #fff; color: var(--welcome-ink); font-size: 15px; line-height: 1.9; }
.item-viewer__page { white-space: pre-wrap; }
.item-viewer__page.is-html { white-space: normal; }
/* ルビ・ルビで付けた傍点は対象文字と一緒に折り返す。途中で分割すると注釈だけ前の行に残る。 */
.item-viewer__page ruby { white-space: nowrap; }
.item-viewer__novel.is-font-small { font-size: 13px; }
.item-viewer__novel.is-font-large { font-size: 18px; }
/* 選んだ場合だけ本文に適用する。「標準」に戻すと作品の指定をそのまま表示する。 */
.item-viewer__novel.is-typeface-gothic .item-viewer__page,
.item-viewer__novel.is-typeface-gothic .item-viewer__page * { font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important; }
.item-viewer__novel.is-typeface-mincho .item-viewer__page,
.item-viewer__novel.is-typeface-mincho .item-viewer__page * { font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif !important; }
.item-viewer__novel.is-leading-compact .item-viewer__page,
.item-viewer__novel.is-leading-compact .item-viewer__page p,
.item-viewer__novel.is-leading-compact .item-viewer__page div { line-height: 1.5 !important; }
.item-viewer__novel.is-leading-wide .item-viewer__page,
.item-viewer__novel.is-leading-wide .item-viewer__page p,
.item-viewer__novel.is-leading-wide .item-viewer__page div { line-height: 3 !important; }
/* 読む人の設定(文字サイズ・配色)。本文の枠の中、本文の上に置く。
   枠が文字サイズを持っているので、操作の側は元の大きさに戻しておく。 */
.item-viewer, .item-viewer__novel { min-width: 0; }
.item-viewer__reading { display: flex; flex-wrap: nowrap; gap: 6px; margin: -4px 0 16px; font-size: 14px; min-width: 0; }
.item-viewer__reading > .section-select { flex: 1 1 0; min-width: 0; }
.item-viewer__reading > .section-select:has([data-novel-typeface]) { flex-grow: 1.6; }
.item-viewer__reading select { width: 100%; min-width: 0; padding: 0 4px; }
/* 配色の切り替えはダークテーマでしか効かないので、ライトでは出さない */
.item-viewer__colors { display: none; }
.is-dark-theme .item-viewer__colors { display: block; }
.item-viewer__pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item-viewer__page + .item-viewer__pager { margin-top: 24px; }
.item-viewer__pager span { color: var(--app-ink-3); font-size: 12px; }
.item-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.item-detail-page > .section-notice { margin-bottom: 0; }
.item-nice-count-note { margin: 0 2px; color: var(--app-ink-3); font-size: 13px; }
.item-nice__count { margin-left: 6px; font-variant-numeric: tabular-nums; }
.item-nice { position: relative; display: flex; gap: 8px; }
.item-nice__secondary { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid #d8dfde; border-radius: 10px; background: #fff; color: var(--app-ink-2); cursor: pointer; }
.item-nice__menu { position: absolute; top: 46px; left: 0; z-index: 5; display: grid; gap: 2px; width: max-content; min-width: 200px; padding: 6px; border: 1px solid #e0e6e5; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(20,30,30,.14); }
.item-nice__menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--welcome-ink); font-size: 12px; font-weight: 750; text-align: left; cursor: pointer; }
.item-nice__menu button:hover { background: #f2f5f4; }
/* ステキ！はこの画面で最も重要な操作。作品を見ている間ずっと手が届くよう、
   画面下に貼り付ける(設定画面の送信バー .form-submit と同じ作法)。
   スクロールして行き過ぎれば自然な位置に戻るので、コメント欄を覆い続けることはない。 */
.item-detail-page > .item-actions { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 10; flex-wrap: nowrap; padding: 8px; border-radius: 15px; background: rgba(245,247,246,.92); backdrop-filter: blur(10px); }
/* ステキ！・非公開ステキ・ブックマークは役割が別なので、ひとかたまりのボタンにはしない。
   3つとも同じ間隔・同じ高さの独立したボタンとして並べる。 */
.item-detail-page > .item-actions .item-nice { flex: 1 1 auto; gap: 10px; }
.item-detail-page > .item-actions [data-nice-primary] { flex: 1 1 auto; min-height: 54px; font-size: 14px; }
.item-detail-page > .item-actions [data-nice-primary] i { margin-right: 8px; font-size: 16px; }
.item-detail-page > .item-actions .item-nice__secondary { width: 54px; height: 54px; border-radius: 12px; }
.item-detail-page > .item-actions .section-button { min-height: 54px; }
/* 下に貼り付いているので、メニューは下ではなく上へ開く */
.item-detail-page > .item-actions .item-nice__menu { top: auto; bottom: 62px; }
.is-dark-theme .item-detail-page > .item-actions { background: rgba(18,21,26,.92); }
.item-author { display: grid; gap: 10px; }
.item-author h2, .item-comments h2, .item-other-works h2 { margin: 0; font-size: 16px; color: var(--welcome-ink); }
.item-other-works { display: grid; gap: 14px; }
.item-other-works .tag-chip-list small { margin-left: 2px; color: var(--app-ink-3); font-size: 12px; }
/* 記事検索の引き出しの中に置く月別アーカイブ。検索フォームとの間に区切りを入れる。 */
.blog-archive { margin-top: 14px; padding-top: 14px; border-top: 1px solid #edf0ef; }
.blog-archive h3 { margin: 0 0 8px; color: var(--welcome-ink); font-size: 13px; font-weight: 800; }
.blog-archive .tag-chip-list small { margin-left: 2px; color: var(--app-ink-3); font-size: 12px; }
.item-other-works h2 { display: flex; align-items: center; justify-content: space-between; }
/* 「このユーザーの他の作品」は .item-other-works の gap:14px で見出しと離すので、
   .history-work-list 自身の margin-top と足し算にならないようにする */
.item-other-works .history-work-list { margin-top: 0; }
.item-other-works__toggle { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 1px solid #d8dfde; border-radius: 50%; background: #fff; color: var(--app-ink-2); cursor: pointer; }
.item-comments { display: grid; gap: 14px; }
.item-comments > .section-notice, .item-comments > .section-details { margin: 0; }
.item-comments > .thread-access-panel h2 { margin: 0 0 5px; font-size: 15px; }
/* コメント欄の末尾に置く一言。入力欄からひと呼吸置く */
.comment-promotion { margin: 16px 0 0; }
.comment-promotion span { line-height: 1.75; }
.item-detail-header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
.item-detail-header > * { grid-column: 1 / -1; margin: 0; }
.item-detail-header > .item-detail-toolbar { grid-row: 1; grid-column: 2; align-self: center; }
.item-detail-header > .item-detail-toolbar + .item-detail-title { grid-row: 1; grid-column: 1; align-self: center; }
/* 作品詳細は見出しの前に投稿日などのメタ行が来るので、そちらを1行目に並べる */
.item-detail-header > .item-detail-toolbar + .item-detail-meta { grid-row: 1; grid-column: 1; align-self: center; }
.item-detail-header > .blog-owner-card { justify-self: start; }
/* ピクログのタイトル画像とピクログ名。旧PC/SP版と同じ180x180の正方形。 */
.blog-detail-identity { display: flex; min-width: 0; align-items: center; gap: 12px; }
/* スレッドには画像が無いので、画像ぶんの間隔が残らないようにする */
.blog-detail-identity:not(:has(.blog-detail-identity__image)) { gap: 0; }
/* 元画像は180x180。プロフィールのアイコン(72px)より大きく見せてよい要素なので、そこには揃えない。 */
.blog-detail-identity__image { width: 96px; height: 96px; flex: 0 0 auto; border: 1px solid #e0e6e5; border-radius: 12px; background: #eef2f1; object-fit: cover; }
.blog-detail-identity__text { display: grid; min-width: 0; gap: 4px; }
/* 数字とラベルを1つのまとまりにする。素のテキストのままflexに入れると
   「投稿」「お気に入り」が別々のflexアイテムになり、数字との間にgapが入ってしまう。 */
.blog-detail-identity__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.blog-detail-identity__stats span { display: inline-flex; align-items: baseline; gap: 4px; }
.blog-detail-identity__stats b { color: var(--welcome-ink); font-size: 14px; }
.blog-detail-identity__stats small { padding: 2px 6px; border-radius: 5px; background: var(--app-accent-surface); color: var(--app-ink-2); font-size: 12px; }
/* ヘッダを1枚のカードにまとめる。囲いが無いと、条件バッジ・画像・説明・タグ・お気に入りが
   同じ重さで縦に並ぶだけになり「ただ並べた」見え方になる。
   プロフィール画面(.profile-hero)が同じ作りなので、粒度をそちらに合わせる。
   スレッド詳細(threads/detail)も同じ構成なので、このクラスを共有している。 */
.item-detail-header--blog { padding: 20px; border: 1px solid #e0e6e5; border-radius: 16px; background: #fff; }
/* 一番上の行はアイコン列と条件バッジで分け合う(旧SP版と同じ並び)。
   .management-card__badges の margin-top はここでは行間と二重になるので消す。 */
.item-detail-header--blog > .item-detail-toolbar + .management-card__badges { grid-row: 1; grid-column: 1; align-self: center; margin-top: 0; }
/* お気に入りはタグの下。スマホでは押しやすいよう全幅にするが、
   PC幅で全幅のままだと主張が強すぎるので内容ぶんの幅に戻す。 */
.blog-detail-fav { display: flex; }
.blog-detail-fav .section-button { width: 100%; min-height: 46px; }

.item-detail-header > details.section-details:last-child { margin-bottom: 0; }
/* h2.〜 にしているのは .item-comments h2 (margin:0/16px) と同じ詳細度にして勝つため。
   下の余白が消えると見出しとコメント1件目がくっつく。 */
h2.blog-comments-title { margin: 0 0 10px; color: var(--welcome-ink); font-size: 15px; font-weight: 800; }
.comment-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.thread-empty-notice { display: none; }
.comment-list.is-empty + .thread-empty-notice { display: block; }
.comment-item { padding: 14px 0; border-bottom: 1px solid #edf0ef; }
/* 見出しの下余白と1件目の上余白が足し算になって24pxも空いていた */
.comment-list > .comment-item:first-child { padding-top: 0; }
.comment-item:last-child { border-bottom: 0; }
.comment-item header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.comment-item header a { color: var(--welcome-ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.comment-item header span { color: var(--app-ink-3); font-size: 13px; font-weight: 800; }
.comment-item header time { margin-left: auto; color: var(--app-ink-3); font-size: 12px; }
.comment-item__delete { display: grid; width: 26px; height: 26px; padding: 0; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--app-danger); cursor: pointer; }
.comment-item__body p { margin: 0; color: var(--welcome-ink); font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
/* .comment-item__body p(0,1,1)に負けて地の文字色のままだったので、同じ強さで指定する */
.comment-item__body p.comment-item__private { color: var(--app-ink-3); font-style: italic; }
/* 読めないコメント・返信は並べず、件数だけを1行で伝える(.comment-item と同じ行の高さに合わせる) */
.comment-list__hidden { display: flex; gap: 7px; align-items: center; margin: 0; padding: 14px 0; color: var(--app-ink-3); font-size: 13px; }
.comment-list__hidden i { font-size: 12px; }
.comment-list__hidden b { color: var(--welcome-ink); font-size: 13px; }
.comment-list > .comment-list__hidden:first-child { padding-top: 0; }
.comment-item__replies > .comment-list__hidden { padding: 0; }
.comment-item__replies { display: grid; gap: 10px; margin: 10px 0 0 18px; padding-left: 14px; border-left: 2px solid #edf0ef; }
/* 本文ではなく操作なので右端に寄せる。左に置くとコメント本文の続きに見える。 */
.comment-item__reply-toggle { display: block; width: fit-content; margin: 8px 0 0 auto; padding: 0; border: 0; background: none; color: var(--app-accent-text); font-size: 12px; font-weight: 800; cursor: pointer; }
.comment-item__reply-form { display: grid; gap: 8px; margin-top: 8px; }
.comment-item__reply-form textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #dbe2e1; border-radius: 9px; font: inherit; resize: vertical; }
.comment-item__reply-note { margin: 0; color: var(--app-ink-3); font-size: 12px; }
/* #tm… で個々の書き込みを指せる。ヘッダーは貼り付いているので、その分だけ手前で止める */
.thread-timeline__item { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 5px 10px; padding: 10px 0; border-bottom: 1px solid #edf0ef; scroll-margin-top: 86px; }
.thread-timeline__item:last-child { border-bottom: 0; }
.thread-timeline__avatar { display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #edf1f0; }
.thread-timeline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.thread-timeline__item > header { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.thread-timeline__author { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; }
.thread-timeline__anchor { margin-left: -5px; padding: 1px 5px; border: 0; border-radius: 5px; background: none; color: var(--app-ink-3); font: inherit; font-size: 12px; font-weight: 800; }
button.thread-timeline__anchor { color: var(--app-accent-text); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(88,175,193,.4); text-underline-offset: 2px; }
button.thread-timeline__anchor:hover { background: var(--app-accent-surface); text-decoration-color: currentColor; }
.thread-timeline__badge { padding: 2px 7px; border-radius: 5px; background: var(--app-accent-surface); color: var(--app-accent-text); font-size: 12px; font-weight: 800; }
.thread-timeline__badge.is-manager { background: #fff3d6; color: #8a6b1f; }
.thread-timeline__name { color: var(--welcome-ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.thread-timeline__item > header time { color: var(--app-ink-3); font-size: 12px; }
.thread-timeline__menu { position: relative; margin-left: auto; }
.thread-timeline__menu summary { display: grid; width: 26px; height: 20px; place-items: center; border-radius: 6px; cursor: pointer; color: var(--app-ink-3); list-style: none; }
.thread-timeline__menu summary::-webkit-details-marker { display: none; }
.thread-timeline__menu > div { position: absolute; top: 24px; right: 0; z-index: 5; min-width: 200px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid #e0e6e5; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(20,30,30,.14); }
/* リンク項目にも同じ見た目を当てる。buttonだけに当てていたため、
   aの項目(ステキ！一覧・記事の詳細画面へ・この記事をシェア)が素の下線リンクのまま
   横に流れて重なっていた。 */
/* flexにしているのは、折り返した2行目がアイコンの下に潜り込まないようにするため。 */
.thread-timeline__menu button, .thread-timeline__menu > div a { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--welcome-ink); font-size: 13px; font-weight: 800; text-align: left; text-decoration: none; cursor: pointer; }
.thread-timeline__menu > div i { width: 16px; flex: 0 0 auto; color: var(--app-ink-3); text-align: center; }
.thread-timeline__menu > div form { margin: 0; }
.thread-timeline__menu button[data-timeline-delete], .thread-timeline__menu button[data-blog-body-delete] { color: var(--app-danger); }
.thread-timeline__menu button:disabled { cursor: not-allowed; opacity: .48; }
.thread-timeline__menu button:hover, .thread-timeline__menu > div a:hover { background: #f2f5f4; }
/* 開いているメニューは、右下に浮いている「記事を書く」(.thread-compose-bar は z-index:20)より前に出す */
.thread-timeline__menu[open] { z-index: 30; }
.blog-timeline__footer:has(.blog-timeline__more[open]) { z-index: 30; }
.thread-timeline__item-embed { display: block; margin-bottom: 8px; padding: 10px 12px; border: 1px solid #e0e6e5; border-radius: 10px; text-decoration: none; }
.thread-timeline__item-embed span { display: block; color: var(--welcome-ink); font-size: 13px; font-weight: 800; }
.thread-timeline__item-embed small { color: var(--app-ink-3); font-size: 12px; }
.thread-timeline__text { margin: 0; color: var(--welcome-ink); font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.thread-timeline__edited { margin: 6px 0 0; color: var(--app-ink-3); font-size: 12px; text-align: right; }
.thread-timeline__edit-textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #dbe2e1; border-radius: 9px; font: inherit; resize: vertical; }
/* 編集中の「保存」「キャンセル」。本文と入れ替わる要素なので、
   入力欄との間隔をどこも持っておらず、ボタンが入力欄に貼り付いていた。
   他の添付・フッターと同じ10pxにそろえる。 */
.thread-timeline__edit-textarea + .item-actions { margin-top: 10px; }
.blog-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.blog-timeline.is-empty { display: none; }
.blog-timeline__item { padding: 14px 0; border-bottom: 1px solid #edf0ef; }
.blog-timeline__item:last-child { border-bottom: 0; }
.blog-timeline__header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--app-ink-3); font-size: 13px; }
.blog-timeline__header time { color: var(--app-ink-3); font-size: 12px; }
/* 添付作品の作品カード。一覧で使う寸法のままだと記事本文より目立ってしまうので、
   記事の中に置くぶんだけ小さくする(サムネ150->104px、高さ176->112px)。
   見た目の系統は item_card のままにして、寸法だけここで詰める。 */
/* 記事の幅いっぱいに広げると、タイトルの右が大きく空いて添付に見えない。 */
.blog-timeline__attach { max-width: 460px; margin-top: 10px; }
.blog-timeline__attach .history-work-card { grid-template-columns: 104px minmax(0, 1fr); min-height: 112px; border-radius: 12px; }
.blog-timeline__attach .history-work-card__image { min-height: 112px; }
.blog-timeline__attach .history-work-card__body { padding: 10px 12px; }
.blog-timeline__attach .history-work-card h2 { font-size: 14px; }
.blog-timeline__attach .history-work-card__title-row { margin-top: 5px; }
.blog-timeline__attach .history-work-card__body > p { -webkit-line-clamp: 1; margin-top: 4px; }
.blog-timeline__attach .history-work-card__badges, .blog-timeline__attach .history-work-card .section-card__tags { margin-top: 5px; }
.blog-timeline__attach .item-card__footer { padding-top: 6px; }
.blog-timeline__attach .item-card__author img { width: 18px; height: 18px; }
.blog-timeline__attach .item-card__footer button, .blog-timeline__attach .item-card__footer > div a { width: 28px; height: 28px; }
.blog-timeline__attach .section-card__type-badge { top: 6px; left: 6px; padding: 2px 6px; }
/* 余白は上に持たせる。添付を本文の前に置いていた頃の名残で margin-bottom だけを持っており、
   本文を先にした結果、本文と画像がくっついて見えていた。
   作品カード(.blog-timeline__attach)と同じ10pxに揃える。 */
.blog-timeline__images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.blog-timeline__images img { width: 90px; height: 90px; border-radius: 10px; object-fit: cover; }
.blog-timeline__footer { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.blog-timeline__footer .section-button { box-sizing: border-box; min-height: 32px; padding: 0 10px; border-radius: 8px; font-weight: 600; }
.blog-timeline__nice-count { display: inline-flex; align-items: center; gap: 5px; color: var(--app-ink-3); font-size: 13px; font-weight: 800; }
/* 投稿ごとのアクション行。狭い画面でも1行に収めたいので、
   副次的な操作(非公開ステキ！/ステキ！を見る)は…にたたむ。
   ヘッダの…(.thread-timeline__menu)と中身の見た目を共有し、
   ボタン列に並ぶぶんだけ大きさと位置を上書きする。 */
/* 開いた中身は…ではなく行そのもの(.blog-timeline__footerのposition:relative)を基準に置く。
   …は行の途中にあるので、…を基準にすると狭い画面で右にはみ出す。 */
.blog-timeline__more { position: static; margin-left: 0; }
.blog-timeline__more > summary { box-sizing: border-box; width: 32px; height: 32px; border: 1px solid #d8dfde; border-radius: 8px; background: #fff; color: var(--app-ink-2); }
/* 非公開ステキはステキ！と地続きの操作なので、離れたボタンではなく
   ステキ！と1つながりのグループボタン(右端の▼)にする。 */
.blog-nice-group { display: flex; min-width: 0; }
.blog-nice-group > .section-button { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.blog-nice-group__more > summary { width: 28px; height: 32px; border-radius: 0 8px 8px 0; border-color: var(--welcome-accent-dark); border-left-color: rgba(255,255,255,.38); background: var(--welcome-accent-dark); color: #fff; font-size: 12px; }
.blog-timeline__more > div { top: 38px; right: 0; left: auto; min-width: 200px; max-width: 100%; }
.blog-timeline__comment-count { margin-left: 5px; }
.thread-timeline__text [data-timeline-cont-toggle][aria-expanded="true"] { display: block; margin-top: 8px; }
[data-blog-cont-attachment][hidden],
[data-thread-cont-attachment][hidden] { display: none; }
/* 先頭の上余白は要らない。親(.item-detail-page の gap / .item-comments の gap)が
   既に間隔を持っており、足し算になって開きすぎる。 */
.blog-timeline__item:first-child { padding-top: 0; }
/* 記事一覧も囲う。地色に直接並ぶと、どこからどこまでが記事なのか分かりにくい。
   ホームのフィード(.home-entry .blog-timeline)と同じ扱い。 */
/* 公開ページ(welcome-responsive.css)の読み物をアプリシェルの中に入れたときの調整。
   公開ページは全画面のマーケ用に余白も文字も大きいので、アプリ画面の粒度に寄せる。
   本文のマークアップは公開ページと共有しているので、ここでは見た目だけを上書きする。 */
.document-rich--app { display: grid; gap: 16px; }
.document-rich--app .document-intro,
.document-rich--app .document-index,
.document-rich--app .document-sections,
.document-rich--app .document-closing,
.document-rich--app .guideline-summary,
.document-rich--app .company-panel,
.document-rich--app .about-values,
.document-rich--app .about-actions,
.document-rich--app .about-community { width: 100%; margin: 0; }
.document-rich--app .document-intro { grid-template-columns: 1fr; gap: 14px; padding: 22px; border-radius: 16px; }
.document-rich--app .document-intro h2 { font-size: 20px; }
.document-rich--app .document-index, .document-rich--app .document-index--guide { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* アプリの地色(#f5f7f6)の上では、公開ページ前提の淡い面がほとんど見えない。
   目次・各節・囲みを白いカードに載せ直して、面の境目が分かるようにする。 */
.document-rich--app .document-index a { min-height: 0; gap: 6px; padding: 12px 14px; background: #fff; }
.document-rich--app .document-sections { display: grid; gap: 14px; border-top: 0; }
.document-rich--app .document-section { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; border: 1px solid #e0e6e5; border-bottom: 1px solid #e0e6e5; border-radius: 16px; background: #fff; }
/* 節番号は本文と同じ流れに置くと埋もれるので、見出しの上のラベルとして立たせる */
.document-rich--app .document-section__number { justify-self: start; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--welcome-accent) 12%, #fff); color: var(--app-accent-text); }
.document-rich--app .document-section h2 { font-size: 20px; }
/* 節の説明文が薄すぎて小見出しと見分けが付かなかったので、本文の濃さまで上げる */
.document-rich--app .document-section__lead { margin-top: 4px; color: var(--app-ink-2); font-size: 14px; line-height: 1.85; }
.document-rich--app .document-section > div > p:not(.document-section__lead, .document-note) { color: var(--app-ink-2); }
.document-rich--app .document-subsection { margin-top: 22px; padding-top: 20px; }
.document-rich--app .document-subsection h3 { font-size: 16px; }
/* 用語リストの面(#f6f7f5)はアプリの地色とほぼ同じで、枠が消えていた */
.document-rich--app .document-subsection li, .document-rich--app .guideline-checklist li { background: #f1f5f4; }
.document-rich--app .document-subsection li { grid-template-columns: 1fr; gap: 4px; padding: 13px 15px; }
.document-rich--app .document-subsection li span { color: var(--app-ink-2); }
.document-rich--app .document-closing { padding: 22px; border-radius: 16px; }
.document-rich--app .document-closing h2 { font-size: 18px; }
.document-rich--app .guideline-summary { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; background: #fff; }
.document-rich--app .guideline-columns { grid-template-columns: 1fr; margin-top: 20px; }
/* 推奨と不可がどちらも地色に近い淡さで、並べても区別が付かなかった */
.document-rich--app .guideline-box { padding: 18px 20px; border: 1px solid transparent; border-radius: 14px; }
.document-rich--app .guideline-box--ok { border-color: color-mix(in srgb, var(--welcome-accent) 34%, #fff); background: color-mix(in srgb, var(--welcome-accent) 11%, #fff); }
.document-rich--app .guideline-box--care { border-color: #e4d7cd; background: #faf2ec; }
.document-rich--app .guideline-box li { color: var(--app-ink-2); }
.document-rich--app .document-note { color: var(--app-ink-2); }
/* 公開ページの .company-panel は地色(#f6f7f5)と同じ面なので、アプリ内では線だけが浮いて見える。
   他の画面と同じ白いカードにして、枠に意味を持たせる。 */
.document-rich--app .company-panel { grid-template-columns: 1fr; gap: 14px; padding: 22px; border-radius: 16px; background: #fff; }
.document-rich--app .company-panel__heading h2 { font-size: 20px; }
.document-rich--app .company-list > div { grid-template-columns: 1fr; gap: 5px; padding: 14px 0; }
/* aboutは画面幅いっぱいの帯で区切る作りなので、アプリ内ではカードに読み替える */
.document-rich--app .about-values, .document-rich--app .about-actions, .document-rich--app .about-community { padding: 22px; border-radius: 16px; }
.document-rich--app .about-section-heading { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
.document-rich--app .about-section-heading h2, .document-rich--app .about-community h2 { font-size: 20px; }
.document-rich--app .about-value-grid { grid-template-columns: 1fr; }
.document-rich--app .about-value { min-height: 0; padding: 20px; border-radius: 14px; }
.document-rich--app .about-icon { margin-bottom: 14px; }
.document-rich--app .about-value h3 { font-size: 17px; }
.document-rich--app .about-community { grid-template-columns: 1fr; gap: 16px; }
.document-rich--app .about-action-list article { grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0; }
.document-rich--app .about-action-list article > svg { display: none; }
.document-rich--app .about-action-list h3 { font-size: 17px; }
/* ダークテーマ。公開ページはライト固定なので、アプリ内の面だけを差し替える */
.is-dark-theme .document-rich--app { color: #b4bdc4; }
.is-dark-theme .document-rich--app .document-intro,
.is-dark-theme .document-rich--app .document-closing,
.is-dark-theme .document-rich--app .about-community { background: #20252c; }
.is-dark-theme .document-rich--app .document-index a { border-color: #303741; background: #191d23; color: #cfd6dc; }
.is-dark-theme .document-rich--app .document-sections, .is-dark-theme .document-rich--app .document-section { border-color: #2c323b; }
.is-dark-theme .document-rich--app .document-section, .is-dark-theme .document-rich--app .guideline-summary { background: #191d23; }
.is-dark-theme .document-rich--app .document-section__number { background: #223139; }
.is-dark-theme .document-rich--app .guideline-box--ok { border-color: #2c4a52; background: #1b2a30; }
.is-dark-theme .document-rich--app .guideline-box--care { border-color: #3a3128; background: #241f1b; }
.is-dark-theme .document-rich--app .document-section h2, .is-dark-theme .document-rich--app .document-subsection h3, .is-dark-theme .document-rich--app .guideline-box h3, .is-dark-theme .document-rich--app .company-panel__heading h2, .is-dark-theme .document-rich--app .about-value h3, .is-dark-theme .document-rich--app .about-action-list h3, .is-dark-theme .document-rich--app .about-section-heading h2 { color: #edf2f4; }
.is-dark-theme .document-rich--app .document-section__lead, .is-dark-theme .document-rich--app .document-section > div > p, .is-dark-theme .document-rich--app .document-subsection p, .is-dark-theme .document-rich--app .guideline-summary p, .is-dark-theme .document-rich--app .about-value p, .is-dark-theme .document-rich--app .about-action-list article div p, .is-dark-theme .document-rich--app .about-section-heading > p:last-child { color: #9ba6af; }
.is-dark-theme .document-rich--app .document-subsection { border-color: #2c323b; }
.is-dark-theme .document-rich--app .document-subsection li, .is-dark-theme .document-rich--app .guideline-box, .is-dark-theme .document-rich--app .guideline-checklist li, .is-dark-theme .document-rich--app .document-note, .is-dark-theme .document-rich--app .guideline-summary, .is-dark-theme .document-rich--app .about-values, .is-dark-theme .document-rich--app .about-value { background: #20252c; }
.is-dark-theme .document-rich--app .document-subsection li strong { color: #edf2f4; }
.is-dark-theme .document-rich--app .document-subsection li span, .is-dark-theme .document-rich--app .guideline-box li, .is-dark-theme .document-rich--app .guideline-checklist li, .is-dark-theme .document-rich--app .document-note { color: #9ba6af; }
.is-dark-theme .document-rich--app .guideline-summary, .is-dark-theme .document-rich--app .about-value { border-color: #2c323b; }
.is-dark-theme .document-rich--app .about-actions, .is-dark-theme .document-rich--app .about-action-list, .is-dark-theme .document-rich--app .about-action-list article { border-color: #2c323b; }
.is-dark-theme .document-rich--app .about-actions { background: #20252c; }
.is-dark-theme .document-rich--app .company-panel { border-color: #2c323b; background: #20252c; }
.is-dark-theme .document-rich--app .company-list, .is-dark-theme .document-rich--app .company-list > div { border-color: #2c323b; }
.is-dark-theme .document-rich--app .company-list dd { color: #cfd6dc; }
@media (min-width: 601px) { .document-rich--app .document-index, .document-rich--app .document-index--guide { grid-template-columns: repeat(3, minmax(0,1fr)); } .document-rich--app .guideline-columns { grid-template-columns: 1fr 1fr; } .document-rich--app .about-value-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* ガイド・サービス情報などの文書ページ。公開ページ(welcome-responsive.css)と本文を共有し、
   アプリ内(ログイン中)ではカード1枚に収めてテーマに追従させる。
   ※以前は welcome-responsive.css 側で --app を常にダークカードにしていたため、
     ライトテーマのアプリ内で文書だけが真っ黒になっていた。 */
.document-legal--app { width: 100%; box-sizing: border-box; padding: 22px 18px; border: 1px solid #e0e6e5; border-radius: 16px; background: #fff; }
.is-dark-theme .document-legal--app { border-color: #2c323b; background: #191d23; color: #b4bdc4; }
.is-dark-theme .document-legal--app h2, .is-dark-theme .document-legal--app h3 { color: #edf2f4; }
.is-dark-theme .document-legal--app small { color: #929da6; }
.is-dark-theme .document-legal--app .document-legal__intro { background: #223139; }
.is-dark-theme .document-legal--app .commerce-list, .is-dark-theme .document-legal--app .commerce-list > div { border-color: #303741; }
.is-dark-theme .document-legal--app > .commerce-list { background: #191d23; }
.is-dark-theme .document-legal--app .commerce-list dt { color: #9ba6af; }
.is-dark-theme .document-legal--app .document-callout { background: #223139; }
.is-dark-theme .document-legal--app .banner-grid figure { border-color: #303741; }
.is-dark-theme .document-legal--app .banner-grid figcaption { color: #a8b2ba; }
@media (min-width: 601px) { .document-legal--app { padding: 28px 32px; } }
/* 中身が自前で面を持っている画面では、この外枠が二重の囲いになる。
   例: 特商法(.commerce-list)・お知らせ一覧(.information-list)はそれ自体が枠付きのリスト。
   お知らせ詳細も、本文・前後移動・公式X の3ブロックに分かれるので1枚に包まない。 */
.document-legal--app:has(> .commerce-list), .document-legal--app:has(> .information-list), .document-legal--app:has(> .information-detail__body) { padding: 0; border: 0; background: none; }
/* 外枠を外したぶん、お知らせ本文は自前のカードに載せる(地色に直接置くと読み面が決まらない) */
.document-legal--app:has(> .information-detail__body) > .information-detail__body { padding: 18px 20px; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; }
/* 枠だけが地色の上に浮かないよう、リスト自体を他の画面と同じ白いカードにする */
.document-legal--app > .commerce-list { background: #fff; }
.is-dark-theme .document-legal--app:has(> .information-detail__body) > .information-detail__body { border-color: #2c323b; background: #191d23; }

.blog-timeline--card, .item-comments__panel { padding: 14px 16px; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; }
.comment-empty { margin: 0; color: var(--app-ink-3); font-size: 13px; }
/* コメントが1件も無いときは、入力欄との間隔を空きすぎないようにする */
.comment-empty + .comment-compose { margin-top: 14px; padding-top: 14px; border-top: 1px solid #edf0ef; }
/* 「まだコメントはありません。」はDOMに残したままhiddenで隠すので、
   隠れているときは直前のコメント一覧に続く間隔（=.comment-list + .comment-compose）に戻す */
.comment-empty[hidden] + .comment-compose { margin-top: 0; }
/* 記事本文とコメント欄の境目。行間だけだと本文の続きに見える。 */
.blog-timeline__comments { margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf0ef; }
.blog-timeline__comments:empty { display: none; }
/* 記事1件だけの画面(view_body)に出す「どのピクログの記事か」のカード。
   カード全体がピクログ本体へのリンク。 */
.blog-source-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 14px 16px; border: 1px solid #e0e6e5; border-radius: 14px; background: #fff; color: var(--welcome-ink); text-decoration: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
.blog-source-card > * { grid-column: 1; min-width: 0; }
.blog-source-card:hover { border-color: #c9d6d4; box-shadow: 0 2px 10px rgba(20,30,30,.07); }
.blog-source-card__label { display: inline-flex; align-items: center; gap: 5px; color: var(--app-ink-3); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.blog-source-card__name { font-size: 16px; line-height: 1.4; }
.blog-source-card__owner { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--app-ink-2); font-size: 13px; font-weight: 800; }
.blog-source-card__owner img { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #edf1f0; }
.blog-source-card__about { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; color: var(--app-ink-3); font-size: 13px; line-height: 1.6; }
.blog-source-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.blog-source-card__meta b { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; }
.blog-source-card__go { grid-row: 1 / -1; grid-column: 2; align-self: center; color: var(--app-ink-3); font-size: 15px; }
/* 管理ユーザー。基本情報の枠の中に置くので、枠を重ねず区切り線の行にする。 */
/* gridで列を切ると、行をまたぐ指定のせいで矢印が真ん中に入り込む。flexで素直に並べる。 */
.blog-detail-owner { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid #edf0ef; color: var(--welcome-ink); text-decoration: none; }
.blog-detail-owner__avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: #edf1f0; object-fit: cover; }
.blog-detail-owner__body { display: grid; min-width: 0; flex: 1 1 auto; gap: 2px; }
.blog-detail-owner__body small { color: var(--app-ink-3); font-size: 12px; font-weight: 800; }
.blog-detail-owner__body strong { font-size: 14px; }
.blog-detail-owner__profile { overflow: hidden; color: var(--app-ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.blog-detail-owner__metrics { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; color: var(--app-ink-2); font-size: 12px; }
.blog-detail-owner__metrics b { font-weight: 800; }
.blog-detail-owner > i { flex: 0 0 auto; color: var(--app-ink-3); }
.blog-detail-owner:hover strong { text-decoration: underline; }
.blog-owner-card { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--welcome-ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.blog-owner-card img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #edf1f0; }
.blog-canvas { display: grid; gap: 10px; justify-items: start; }
.blog-canvas canvas { max-width: 100%; border: 1px solid #d9e0df; border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.blog-canvas__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.blog-canvas__colors { display: flex; flex-wrap: wrap; gap: 4px; }
.blog-canvas__colors button { width: 22px; height: 22px; padding: 0; border: 1px solid #d9e0df; border-radius: 5px; background: var(--canvas-color); cursor: pointer; }
.comment-compose { display: grid; gap: 8px; }
/* コメント同士の間隔より狭いと、入力欄が最後のコメントの一部に見える */
.comment-list + .comment-compose { padding-top: 14px; border-top: 1px solid #edf0ef; }
.compose-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.compose-tools .section-button { min-height: 34px; padding: 5px 12px; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; }
.comment-compose [data-thread-compose-panel] { animation: compose-panel-in 200ms cubic-bezier(.23,1,.32,1); }
@keyframes compose-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.thread-compose-bar { position: sticky; bottom: 14px; z-index: 20; display: flex; justify-content: flex-end; padding-top: 4px; pointer-events: none; }
.thread-compose-bar .section-button { min-height: 48px; padding: 0 26px; box-shadow: 0 12px 30px rgba(20,30,30,.24); pointer-events: auto; }
.thread-compose-dialog { width: min(620px,calc(100% - 32px)); }
.comment-compose textarea { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #dbe2e1; border-radius: 10px; font: inherit; resize: vertical; }
.stamp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* チップは .stamp-chip-area の中に並ぶので、.stamp-row の gap は効かない。
   指定が無いままチップ同士がくっついていたので、ここで間隔を持たせる。 */
.stamp-chip-area { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stamp-row.is-empty, .comment-list.is-empty { display: none; }
/* 送られたスタンプは作品への反応そのもの。地色に溶ける小さな文字だと気付かれないので、
   隣の「スタンプを送る」と同じ高さの白いチップにして、絵文字を大きく見せる。 */
.stamp-chip { display: inline-flex; min-height: 40px; box-sizing: border-box; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid #dfe6e4; border-radius: 999px; background: #fff; color: var(--welcome-ink); font-size: 13px; font-weight: 800; }
.stamp-chip__mark { font-size: 20px; line-height: 1; }
/* 見出しに続く独立したまとまり。チップを大きくしたぶん、見出しと詰まって見えるので少し離す。
   .item-comments の gap(14px)に足されて20pxになる。 */
.item-comments > .stamp-row { margin-top: 6px; }
.stamp-chip b { font-weight: 800; }
.stamp-picker { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.stamp-picker button { padding: 8px; border: 1px solid #e0e6e5; border-radius: 10px; background: #fff; font-size: 20px; cursor: pointer; }
/* 送信中は絵文字を隠してスピナーだけにする。横に並べるとマス目の幅が動いてしまう。
   スピナーは currentColor で描くが、待ち表示中のボタンは disabled なので
   ブラウザ既定の灰色(rgba(16,16,16,.3))に落ちて、ほとんど見えなかった。色は自前で指定する。 */
/* :not(.ui-spinner) が要る。待ち表示のスピナーもボタン直下のspanとして差し込まれるので、
   単に > span を隠すとスピナーごと消えてしまう(実際これで見えなくなっていた)。 */
.stamp-picker button.is-loading > span:not(.ui-spinner) { display: none; }
.stamp-picker button > .ui-spinner { width: 18px; height: 18px; margin-right: 0; border-color: var(--app-accent-text); border-top-color: transparent; opacity: 1; }
.item-gate-overlay { display: grid; gap: 14px; padding: 22px; border: 1px solid #e0e6e5; border-radius: 15px; background: #fff; }
.item-gate-overlay h2 { margin: 0; font-size: 17px; }
/* 説明文にルールが無く、ブラウザ既定(16px・line-height:normal・地の文字色)のまま出ていて、
   同じ閲覧確認でも作品説明(.gate-notice__about)や他の画面と大きさが揃っていなかった。
   読ませて判断させる文なので、同じゲート画面の説明文と同じ組みにそろえる。 */
.item-gate-overlay p { margin: 0; color: var(--app-ink-2); font-size: 14px; line-height: 1.8; }
/* 閲覧を決めるための作品情報。警告文とは別のかたまりに見えるよう線で区切る。
   中の余白はgapで取り、子のmarginは殺す(marginとgapが足されて間延びするため)。 */
.item-gate-overlay .gate-notice__item { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid #edf0ef; }
.item-gate-overlay .gate-notice__item > * { margin: 0; }
.item-gate-overlay .gate-notice__item h3 { font-size: 15px; font-weight: 800; line-height: 1.5; }
/* この画面の説明文だけは本体(.item-detail-about)と同じくpre-wrapで改行を出す。
   .gate-notice__about を使う他の画面(item_access_notice)はnl2br済みなので、ここだけに当てる。 */
.item-gate-overlay .gate-notice__about { white-space: pre-wrap; }
.is-dark-theme .item-gate-overlay .gate-notice__item { border-top-color: #2c323b; }
.is-dark-theme .app-page {
	--welcome-ink: #f1f4f6;
	--welcome-accent: #58afc1;
	--welcome-accent-dark: #72c9d8;
	--app-ink-2: #b8c1c8;
	--app-ink-3: #9ba6af;
	--app-tag-surface: #20262d;
	--app-tag-border: #3d4751;
	--app-danger: #e3949c;
	--app-warn: #e0bb76;
	--app-accent-text: var(--welcome-accent-dark);
	--app-premium-badge: var(--app-accent-bright);
	/* 暗い面の上では、明るい面と同じ色は沈んで読めない。一段明るい対を持つ。 */
	--app-accent-bright: #8dd6e2;
	--app-accent-line: #56b3c5;
	--app-accent-strong: #338da2;
	--app-accent-on-surface: var(--app-accent-bright);
	--app-accent-surface: #223239;
	--app-accent-surface-strong: #243238;
	--app-accent-surface-hover: #2a3b42;
	--app-ink-disabled: #6b7580;
	color-scheme: dark;
	background: #101318;
	color: #f1f4f6;
}
/* ダークテーマのアクセントも、青の固定値ではなくそのサイトの色から作る。
   .is-dark-theme .app-page が --welcome-accent を青で上書きしていたため、
   pictMalFem・pictGLandではダークだけ配色がpictBLandのままになっていた。 */
.is-dark-theme .welcome-site--pictmalfem .app-page,
.is-dark-theme .welcome-site--pictgland .app-page {
	--welcome-accent: color-mix(in srgb, var(--site-accent) 72%, #fff);
	--welcome-accent-dark: color-mix(in srgb, var(--site-accent) 55%, #fff);
	--app-accent-bright: color-mix(in srgb, var(--site-accent) 55%, #fff);
	--app-accent-line: color-mix(in srgb, var(--site-accent) 80%, #fff);
	--app-accent-strong: var(--site-accent-dark);
	--app-accent-surface: color-mix(in srgb, var(--site-accent) 22%, #101318);
	--app-accent-surface-strong: color-mix(in srgb, var(--site-accent) 26%, #101318);
	--app-accent-surface-hover: color-mix(in srgb, var(--site-accent) 34%, #101318);
}
.is-dark-theme .app-drawer { border-color: #292f38; background: #15181e; }
.is-dark-theme .app-drawer__avatar img { background: #29323a; }
.is-dark-theme .app-drawer__settings { border-color: #343b45; background: #1a1e24; }
.is-dark-theme .app-drawer__settings[aria-current="page"] { border-color: #8ed7e3; background: #243137; color: #8ed7e3; }
.is-dark-theme .app-drawer nav a.is-active i { color: #8ed7e3; }
.is-dark-theme .app-drawer__premium-limit.is-soon { background: #302918; color: #e5c979; }
.is-dark-theme .app-drawer__premium-limit.is-soon i { color: #e5c979; }
.is-dark-theme .app-drawer__notice { background: #302918; color: #e5c979; }
.is-dark-theme .app-drawer nav { border-color: #292f38; }
.is-dark-theme .app-drawer nav a.is-active { background: #243137; color: #8ed7e3; }
.is-dark-theme .app-drawer__group { border-color: #292f38; }
.is-dark-theme .app-drawer nav .app-drawer__logout::before { border-color: #292f38; }
.is-dark-theme .app-drawer__ui-switch a { border-color: #343b45; color: var(--app-ink-3); }
.is-dark-theme .app-drawer__theme-switch { border-color: #292f38; }
.is-dark-theme .app-drawer__theme-switch button { border-color: #343b45; background: #1a1e24; }
.is-dark-theme .app-drawer__theme-switch button.is-active { border-color: #8ed7e3; background: #243137; color: #8ed7e3; }
.is-dark-theme .app-header { border-color: #292f38; background: rgba(21,24,30,.92); }
.is-dark-theme .app-header__search input { border-color: #38414b; background: #12161b; color: #eef2f4; }
.is-dark-theme .app-brand__logo--light { display: none; }
.is-dark-theme .app-brand__logo--dark { display: block; }
.is-dark-theme .app-page.is-menu-open .app-menu-toggle { background: #293139; color: #8ed7e3; }
.is-dark-theme .home-tabs a { color: var(--app-ink-3); }
.is-dark-theme .home-tabs a.is-active { background: #edf2f4; color: #171b20; }
.is-dark-theme .home-tabs__settings, .is-dark-theme .home-empty a { border-color: #343b45; background: #1a1e24; color: var(--app-ink-2); }
.is-dark-theme .home-entry .comment-list, .is-dark-theme .home-entry .blog-timeline { border-color: #2c323b; background: #191d23; }
.is-dark-theme .home-sidebar__block { border-color: #2c323b; background: #191d23; }
.is-dark-theme .home-more__spinner { border-color: #343c46; border-top-color: var(--app-accent-text); }
.is-dark-theme .home-sidebar__guideline { border-color: var(--app-accent-line); background: var(--app-accent-surface); }
.is-dark-theme .item-detail-header--blog, .is-dark-theme .blog-timeline--card, .is-dark-theme .item-comments__panel, .is-dark-theme .blog-source-card, .is-dark-theme .home-card, .is-dark-theme .section-card, .is-dark-theme .section-list, .is-dark-theme .post-upload, .is-dark-theme .form-panel, .is-dark-theme .hint-panel { border-color: #2c323b; background: #191d23; }
.is-dark-theme .home-card__thumb, .is-dark-theme .home-card__media, .is-dark-theme .section-card__visual { background: #242a31; }
.is-dark-theme .section-card__select { background: rgba(21,24,30,.85); }
.is-dark-theme .section-card__select span { border-color: #454f58; }
.is-dark-theme .section-card__select input:checked + span { border-color: var(--app-accent-line); background: var(--app-accent-line); color: #101318; }
.is-dark-theme .bulk-select-bar { border-color: #2c323b; background: #191d23; color: #edf1f3; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.is-dark-theme .home-card__context, .is-dark-theme .home-card__excerpt, .is-dark-theme .home-card--text .home-card__footer > span, .is-dark-theme .section-card__body > p { color: var(--app-ink-2); }
.is-dark-theme .home-card__badges span { background: #35292c; color: #e0afb5; }
.is-dark-theme .home-card__badges span.is-type { background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme .home-card__tags span, .is-dark-theme .section-card__tags { color: #8f9ca6; }
.is-dark-theme .home-card__mark { background: var(--app-accent-surface); color: var(--app-accent-bright); }
.is-dark-theme .management-card__badges span { background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme .management-card__metrics div, .is-dark-theme .management-card__metrics div + div { background: #222830; }
.is-dark-theme .management-card__actions { border-color: #303741; }
.is-dark-theme .management-card__menu summary { border-color: #38424c; background: #222830; }
.is-dark-theme .management-card__menu[open] summary { border-color: var(--app-accent-line); background: var(--app-accent-surface-strong); }
.is-dark-theme .management-card__menu-list { background: #303741; }
.is-dark-theme .management-card__menu-list > a, .is-dark-theme .management-card__menu-list > span, .is-dark-theme .management-card__menu-list .management-card__delete-form button { background: #20252c; color: #e5e9eb; }
.is-dark-theme .analysis-summary > div, .is-dark-theme .analysis-panel { border-color: #2c323b; background: #191d23; }
.is-dark-theme .analysis-panel > header, .is-dark-theme .analysis-chart, .is-dark-theme .analysis-table th, .is-dark-theme .analysis-table td, .is-dark-theme .reaction-user { border-color: #2c323b; }
.is-dark-theme .section-table th, .is-dark-theme .section-table td { border-color: #2c323b; }
.is-dark-theme .section-table td code { color: var(--app-accent-bright); }
.is-dark-theme .analysis-chart__grid { stroke: #303741; }
.is-dark-theme .analysis-chart text { fill: #8f9aa4; }
.is-dark-theme .image-lightbox__close { border-color: #38414b; background: #20252c; color: #e4e8eb; }
.is-dark-theme .management-dialog { border-color: #39414a; background: #15191f; color: #edf1f3; }
.is-dark-theme .management-dialog__panel > header { border-color: #303741; background: #191d23; }
.is-dark-theme .management-dialog__panel > header button { border-color: #38414b; background: #222830; }
.is-dark-theme .bookmark-tags-manager__help, .is-dark-theme .bookmark-item-tags > p { color: var(--app-ink-3); }
.is-dark-theme .bookmark-tags-sort { background: #12161b; }
.is-dark-theme .bookmark-tags-sort a.is-active { background: #293039; color: #eef2f4; box-shadow: none; }
.is-dark-theme .bookmark-tag-add input { border-color: #343c46; background: #12161b; color: #eef2f4; }
.is-dark-theme .bookmark-tag-add input::placeholder { color: #747f89; }
.is-dark-theme .bookmark-tag-list { border-color: #303741; }
.is-dark-theme .bookmark-tag-row { border-color: #303741; }
.is-dark-theme .bookmark-tag-row > a { color: #edf1f3; }
.is-dark-theme .bookmark-tags-empty { border-color: #39414a; }
.is-dark-theme .bookmark-item-tags__chips button { border-color: #38414b; background: #20252c; }
.is-dark-theme .bookmark-item-tags__chips button.is-selected { border-color: var(--app-accent-line); background: var(--app-accent-surface); color: var(--app-accent-bright); }
.is-dark-theme .home-card--unavailable .home-card__mark { background: #262b32; }
.is-dark-theme .home-empty, .is-dark-theme .section-empty { border-color: #3a424c; background: rgba(25,29,35,.72); }
.is-dark-theme .section-pagination__page { border-color: #343c46; background: #20252c; color: #edf1f3; }
.is-dark-theme .section-pagination__page:hover { border-color: var(--app-accent-bright); color: var(--app-accent-bright); }
.is-dark-theme .section-pagination__page.is-current { border-color: var(--app-accent-line); background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme .section-pagination__step { color: var(--app-accent-bright); }
.is-dark-theme .section-pagination__steps .section-pagination__step { border-color: #343c46; background: #20252c; color: #edf1f3; }
.is-dark-theme .section-pagination__steps a.section-pagination__step:hover { border-color: var(--app-accent-bright); color: var(--app-accent-bright); }
.is-dark-theme .section-pagination__steps .section-pagination__step.is-disabled { background: #181d23; color: var(--app-ink-disabled); }
.is-dark-theme .section-button { border-color: #38414b; background: #20252c; color: #e4e8eb; }
.is-dark-theme .section-button--primary { border-color: var(--app-accent-strong); background: var(--app-accent-strong); color: #fff; }
.is-dark-theme .section-button--secondary { border-color: #303942; background: #303942; color: #f1f4f6; }
.is-dark-theme .section-button.is-active { border-color: var(--app-accent-line); background: var(--app-accent-surface); color: var(--app-accent-bright); }
.is-dark-theme .section-segments { border-color: #303741; background: #191d23; }
.is-dark-theme .section-segments a.is-active, .is-dark-theme .section-segments button.is-active { background: #edf2f4; color: #171b20; }
.is-dark-theme .section-select select, .is-dark-theme .section-search input, .is-dark-theme .section-form input[type=text], .is-dark-theme .section-form input[type=email], .is-dark-theme .section-form input[type=password], .is-dark-theme .section-form input[type=url], .is-dark-theme .section-form input[type=file], .is-dark-theme .section-form select, .is-dark-theme .section-form textarea, .is-dark-theme .tag-add-form input, .is-dark-theme .form-field input, .is-dark-theme .form-field textarea, .is-dark-theme .form-field select { border-color: #343c46; background: #12161b; color: #eef2f4; }
.is-dark-theme [data-home-blog-compose] select[name="blog_id"] { color-scheme: dark; }
.is-dark-theme [data-home-blog-compose] select[name="blog_id"] option { background: #12161b; color: #eef2f4; }
.is-dark-theme .section-search input::placeholder, .is-dark-theme .section-form input::placeholder, .is-dark-theme .section-form textarea::placeholder, .is-dark-theme .form-field input::placeholder, .is-dark-theme .form-field textarea::placeholder { color: #747f89; }
.is-dark-theme .section-search button { background: #303942; color: #f1f4f6; }
.is-dark-theme .section-notice { border-color: #2a333b; background: #1a2026; color: var(--app-ink-2); }
.is-dark-theme .message-row, .is-dark-theme .attention-row { border-color: #292f38; color: #edf1f3; }
.is-dark-theme .attention-row__mark { background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme .attention-row__thumb { background: var(--app-accent-surface-strong); }
.is-dark-theme .post-type-tabs { border-color: #303741; }
.is-dark-theme .post-type-tabs a.is-active { color: #eff3f5; }
.is-dark-theme .upload-drop { border-color: #4a5661; background: #14181d; }
.is-dark-theme .upload-drop > span { background: var(--app-accent-surface); color: var(--app-accent-bright); }
.is-dark-theme .upload-drop.is-selected { border-color: var(--app-accent-line); background: var(--app-accent-surface); }
.is-dark-theme .album-thumb { border-color: #2c323b; background: #191d23; }
.is-dark-theme .album-thumb__actions button { border-color: #343c46; background: #20252c; }
.is-dark-theme .dream-info { border-color: #2c323b; }
.is-dark-theme .feed-card__attach { background: var(--app-accent-surface); color: var(--app-accent-text); }
.is-dark-theme .section-details { border-color: #2c323b; background: var(--app-accent-surface); }
.is-dark-theme .section-form > .section-details { border-color: #2c323b; background: #191d23; }
.is-dark-theme .tag-chip-list span { border-color: #343c46; background: #20252c; color: #edf1f3; }
.is-dark-theme .tag-edit-button { border-color: transparent; background: var(--app-accent-surface); color: var(--app-accent-bright); }
.is-dark-theme .tag-edit-button:hover, .is-dark-theme .tag-edit-button[aria-expanded="true"] { background: #2a3038; }
.is-dark-theme .tag-chip-list span button:hover { background: #2a3038; }
.is-dark-theme .post-upload .tweet_item { border-color: #303741 !important; }
.is-dark-theme .post-upload .impfile_button, .is-dark-theme .post-upload .read_button button { border-color: #38414b; background: #20252c; }
.is-dark-theme .post-upload .impfile_button.is-selected { border-color: var(--app-accent-strong); background: var(--app-accent-strong); color: #fff; }
.is-dark-theme .form-static { background: var(--app-accent-surface); }
.is-dark-theme .choice-field span { border-color: #343c46; }
.is-dark-theme .choice-field input:checked + span { border-color: var(--app-accent-line); background: var(--app-accent-surface); color: var(--app-accent-bright); }
.is-dark-theme .switch-field > input[type=checkbox] { accent-color: #45a5b9; }
.is-dark-theme .form-submit { background: rgba(16,19,24,.88); }
.is-dark-theme .settings-group > div { border-color: #2c323b; background: #191d23; }
.is-dark-theme .settings-row { border-color: #2c323b; }
.is-dark-theme .settings-group--danger > header h2::before { background: #c6646e; }
.is-dark-theme .settings-row b { background: #38272b; }
.is-dark-theme .section-button--danger { border-color: #59383e; color: var(--app-danger); }
.is-dark-theme .avatar-editor > img { background: #252b32; }
.is-dark-theme .section-notice--danger { border-color: #5b353b; background: #2d2024; }
.is-dark-theme .field-error { border-color: #5b353b; background: #2d2024; color: #e3949c; }
.is-dark-theme .profile-tags > li, .is-dark-theme .profile-tags__actions a, .is-dark-theme .profile-tags__actions button { border-color: #343c46; }
.is-dark-theme .profile-tags__actions a, .is-dark-theme .profile-tags__actions button { background: #20252c; color: var(--app-ink-2); }
.is-dark-theme .empty-panel { border-color: #39414a; }
.is-dark-theme .stacked-choices label > span { border-color: #343c46; }
.is-dark-theme .stacked-choices input:checked + span { border-color: var(--app-accent-line); background: var(--app-accent-surface); }
.is-dark-theme .session-list { border-color: #2c323b; background: #191d23; }
.is-dark-theme .session-list > li { border-color: #2c323b; }
.is-dark-theme .session-list__icon, .is-dark-theme .connection-card__logo { background: var(--app-accent-surface); color: var(--app-accent-bright); }
.is-dark-theme .session-list__body strong em, .is-dark-theme .status-badge--connected { background: var(--app-accent-surface); color: var(--app-accent-bright); }
.is-dark-theme .connection-card { border-color: #343c46; }
.is-dark-theme .status-badge { background: #282e35; color: var(--app-ink-2); }
.is-dark-theme .connection-details { background: #303741; }
.is-dark-theme .connection-details > div { background: #20252c; }
.is-dark-theme .notification-setting > .switch-field { border-color: #303741; }
.is-dark-theme .filter-items__list, .is-dark-theme .filter-items__list li { border-color: #303741; }
.is-dark-theme .filter-items__list button:not(.section-button) { border-color: #51363b; background: #2a2024; }
.is-dark-theme .management-card__badges span.is-lock { background: #2c3339; color: #aebac1; }
.is-dark-theme .management-card__badges span.is-now { background: #1c332a; color: #7fd3ae; }
.is-dark-theme .management-card__badges span.is-before { background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme .management-card__badges span.is-ended { background: #242a2f; }
.is-dark-theme .item-detail-thumb { background: #252b32; }
.is-dark-theme .filter-help__examples { background: #303741; }
.is-dark-theme .filter-help__examples > div { background: #20252c; }
.is-dark-theme .filter-help code { background: #282e35; color: #c6ced4; }
.is-dark-theme .tab-manager-list > li { border-color: #2c323b; background: #191d23; }
.is-dark-theme .series-order-list > li { border-color: #2c323b; background: #191d23; }
.is-dark-theme .series-order-list__no { background: #282e35; }
.is-dark-theme .series-order-note { border-top-color: #2c323b; }
.is-dark-theme .tab-manager-list__chips span { background: #282e35; }
.is-dark-theme .tab-manager-list__actions a, .is-dark-theme .tab-manager-list__actions button { border-color: #38414b; background: #20252c; color: var(--app-ink-2); }
.is-dark-theme .tab-manager-list__actions button { border-color: #51363b; background: #2a2024; }
.is-dark-theme .tab-feed-option > span { border-color: #343c46; }
.is-dark-theme .tab-feed-option input:checked + span { border-color: var(--app-accent-line); background: var(--app-accent-surface); }
.is-dark-theme .history-work-card { border-color: #2c323b; background: #191d23; }
.is-dark-theme .item-card:hover { border-color: #3c4550; box-shadow: none; }
.is-dark-theme .feed-card__kind { background: #282e35; color: var(--welcome-ink); }
.is-dark-theme .history-work-card__image { background: #252b32; }
.is-dark-theme .home-entry__count { background: #262c33; }
.is-dark-theme .home-feed-strip__track { scrollbar-color: #3a434d transparent; }
.is-dark-theme .home-feed-strip__track::-webkit-scrollbar-thumb { background: #3a434d; }
.is-dark-theme .home-feed-strip__track::-webkit-scrollbar-track { background: #20252c; }
.is-dark-theme .home-feed-strip__viewport::before { background: linear-gradient(90deg, #101318, rgba(16,19,24,0)); }
.is-dark-theme .home-feed-strip__viewport::after { background: linear-gradient(270deg, #101318, rgba(16,19,24,0)); }
.is-dark-theme .history-work-card__meta, .is-dark-theme .history-work-card__body > p { color: var(--app-ink-2); }
.is-dark-theme .history-work-card__badges span { background: #282e35; color: var(--app-ink-2); }
.is-dark-theme .history-work-card__badges span.is-r18 { background: #3a262a; color: #e29a9c; }
.is-dark-theme .history-work-card__badges span.is-r18g { background: #332a35; color: #c9a6c1; }
.is-dark-theme .history-work-card__badges span.is-lock { background: #fff; color: #000; }
.is-dark-theme .history-work-card__badges span.is-out { background: #3a2e25; color: #d9a274; }
.is-dark-theme .history-work-card .section-card__tags a, .is-dark-theme .history-work-card .section-card__tags span { color: var(--app-ink-3); }
.is-dark-theme .wall-color-grid button { border-color: #343c46; background: #20252c; }
.is-dark-theme .wall-color-grid button > span { border-color: rgba(255,255,255,.14); }
.is-dark-theme .color-field input[type=color] { border-color: #343c46; background: #12161b; }
.is-dark-theme .saved-panel { border-color: #2c323b; background: #191d23; }
.is-dark-theme .saved-panel__icon { background: #22352f; color: #79ccb6; }
.is-dark-theme .follower-counts span { border-color: #39414a; }
.is-dark-theme .follower-card { border-color: #2c323b; background: #191d23; }
.is-dark-theme .follower-card__avatar { background: #252b32; }
.is-dark-theme .follower-card__badges span { background: #38272b; }
.is-dark-theme .follower-card__badges span.is-mutual { background: #22352f; color: #83d1bd; }
.is-dark-theme .follower-card__body > p { color: var(--app-ink-3); }
.is-dark-theme .follower-card--profile .follower-card__metrics div { background: #222830; }
.is-dark-theme .follower-card__menu > div button:hover { background: #20252c; }
.is-dark-theme .resource-access-manager__target { border-color: #343b45; background: #20252c; }
.is-dark-theme .comment-block-card { border-color: #2c323b; background: #191d23; }
.is-dark-theme .message-detail { border-color: #2c323b; background: #191d23; }
.is-dark-theme .message-detail__header, .is-dark-theme .message-detail__actions, .is-dark-theme .message-confirm > div:not(.form-actions) { border-color: #303741; }
.is-dark-theme .message-detail__avatar { background: #252b32; }
.is-dark-theme .app-page .information-list { border-color: #2c323b; background: #191d23; }
.is-dark-theme .app-page .information-list > a { border-color: #2c323b; }
.is-dark-theme .app-page .information-list time, .is-dark-theme .app-page .information-list i, .is-dark-theme .app-page .information-detail__pager a span { color: var(--app-ink-3); }
.is-dark-theme .app-page .information-detail__body { color: var(--app-ink-2); }
.is-dark-theme .app-page .information-detail__pager .is-index { border-color: #38414b; }
.is-dark-theme .app-page .information-social { background: #222830; }
.is-dark-theme .app-page .information-social p { color: var(--app-ink-2); }
.is-dark-theme .item-gate { border-color: #2c323b; background: #191d23; }
.is-dark-theme .gate-notice__tags a { border-color: #343c46; background: #20252c; color: var(--app-ink-3); }
.is-dark-theme .gate-notice__about { color: var(--app-ink-3); }
.is-dark-theme .gate-author__card { border-color: #2c323b; background: #191d23; }
.is-dark-theme .gate-author__avatar { background: #252b32; }
.is-dark-theme .gate-author__profile { color: var(--app-ink-3); }
.is-dark-theme .profile-hero { border-color: #2c323b; background: #191d23; }
.is-dark-theme .profile-hero__own-notice { background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme .profile-hero__edit { border-color: #343c46; background: #20252c; }
.is-dark-theme .profile-hero__menu > summary { color: var(--app-ink-2); }
.is-dark-theme .profile-hero__avatar { background: #252b32; }
.is-dark-theme .profile-hero__identity > div:first-child span { background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme .profile-hero__identity > div:first-child span.is-premium { background: none; }
.is-dark-theme .profile-hero__identity > button[data-copy-user-code] { border-color: #343c46; background: #20252c; }
.is-dark-theme .profile-action-menu > div { border-color: #2c323b; background: #191d23; box-shadow: 0 14px 38px rgba(0,0,0,.4); }
.is-dark-theme .profile-action-menu > div button { color: #edf1f3; }
.is-dark-theme .profile-action-menu > div button:hover { background: #20252c; }
.is-dark-theme .profile-action-menu > div button small { background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme .profile-hero__stats a { background: #222830; }
.is-dark-theme .profile-hero__stats-link a { color: var(--app-accent-bright); }
.is-dark-theme .profile-hero__stats dd { color: #edf1f3; }
.is-dark-theme .profile-hero__badges a, .is-dark-theme .profile-hero__badges span { background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme .profile-hero__badges a.is-warn { background: #3a3128; color: #e0bb76; }
.is-dark-theme .profile-hero__badges a.is-danger { background: #38272b; color: #e3949c; }
.is-dark-theme .profile-hero__bio { color: var(--app-ink-2); }
.is-dark-theme .profile-links { border-color: #2c323b; }
.is-dark-theme .profile-links a, .is-dark-theme .profile-links span { color: #edf1f3; }
.is-dark-theme .profile-links h2 { color: var(--app-ink-3); }
.is-dark-theme .item-detail-about { color: var(--app-ink-3); }
.is-dark-theme .icon-button { border-color: #38424c; background: #222830; color: var(--app-accent-bright); }
.is-dark-theme .icon-button.is-active { border-color: var(--app-accent-line); background: var(--app-accent-surface-strong); }
.is-dark-theme .section-button--sub { border-color: var(--app-accent-line); background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme .section-button--sub:hover { background: var(--app-accent-surface-hover); }
.is-dark-theme .icon-menu > div { border-color: #2c323b; background: #191d23; box-shadow: 0 14px 38px rgba(0,0,0,.4); }
.is-dark-theme .icon-menu > div a { color: #edf1f3; }
.is-dark-theme .icon-menu > div a:hover { background: #20252c; }
.is-dark-theme .items-index-menu > div button { color: #edf1f3; }
.is-dark-theme .items-index-menu > div button:hover { background: #20252c; }
.is-dark-theme .items-index-menu > div button.is-active { background: var(--app-accent-surface); color: var(--app-accent-bright); }
.is-dark-theme .icon-menu__info b { color: #edf1f3; }
.is-dark-theme .icon-menu > div > .icon-menu__section:not(:first-child) { border-top-color: #2c323b; }
.is-dark-theme .item-series { border-color: #2c323b; background: #191d23; }
.is-dark-theme .item-series__head { color: #edf1f3; }
.is-dark-theme .item-series__label b { border-color: #343c46; }
.is-dark-theme .item-series__steps { border-color: #2c323b; }
.is-dark-theme .item-series__step { color: #edf1f3; }
.is-dark-theme .item-series__step.is-disabled { color: var(--app-ink-disabled); }
.is-dark-theme .item-viewer__novel { border-color: #2c323b; background: #191d23; color: #edf1f3; }
/* ダークテーマでは作者が指定した色を使わない。既存の小説はすべて白い紙の上で
   組まれているので、暗い背景に置くと読めなくなる(濃いグレーで実測コントラスト比1.34)。
   打ち消すのは作者がstyleを書いた要素だけ。ページ送りなどこちらの部品には触らない。
   文字色と背景色は対で指定されることがあるので、片方だけ残さず両方そろえて外す。 */
.is-dark-theme .item-viewer__novel:not(.is-author-colors) .item-viewer__page [style] { color: inherit !important; background-color: transparent !important; }
.is-dark-theme .item-nice__secondary { border-color: #343c46; background: #20252c; color: var(--app-ink-3); }
.is-dark-theme .item-nice__menu { border-color: #2c323b; background: #191d23; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.is-dark-theme .item-nice__menu button { color: #edf1f3; }
.is-dark-theme .item-nice__menu button:hover { background: #20252c; }
.is-dark-theme .comment-item { border-color: #2c323b; }
.is-dark-theme .item-other-works__toggle { border-color: #343c46; background: #20252c; color: var(--app-ink-3); }
.is-dark-theme .comment-item__body p { color: #edf1f3; }
.is-dark-theme .comment-empty + .comment-compose, .is-dark-theme .blog-archive, .is-dark-theme .blog-detail-owner, .is-dark-theme .comment-item__replies, .is-dark-theme .blog-timeline__comments, .is-dark-theme .comment-list + .comment-compose { border-color: #2c323b; }
.is-dark-theme .comment-compose textarea, .is-dark-theme .comment-item__reply-form textarea, .is-dark-theme .thread-timeline__edit-textarea { border-color: #343c46; background: #20252c; color: #edf1f3; }
.is-dark-theme .thread-timeline__item { border-color: #2c323b; }
.is-dark-theme .thread-timeline__avatar { background: #252b32; }
.is-dark-theme .thread-timeline__badge { background: var(--app-accent-surface-strong); color: var(--app-accent-bright); }
.is-dark-theme button.thread-timeline__anchor { color: var(--app-accent-bright); }
.is-dark-theme button.thread-timeline__anchor:hover { background: var(--app-accent-surface-strong); }
.is-dark-theme .thread-compose-bar .section-button { box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.is-dark-theme .thread-timeline__badge.is-manager { background: #332e22; color: #dfc47e; }
.is-dark-theme .thread-timeline__name { color: #edf1f3; }
.is-dark-theme .thread-timeline__menu > div { border-color: #2c323b; background: #191d23; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.is-dark-theme .thread-timeline__menu button, .is-dark-theme .thread-timeline__menu > div a { color: #edf1f3; }
.is-dark-theme .thread-timeline__menu button:hover, .is-dark-theme .thread-timeline__menu > div a:hover { background: #20252c; }
.is-dark-theme .blog-detail-identity__image { border-color: #2c323b; background: #242a31; }
.is-dark-theme .blog-detail-identity__stats small { background: #242a31; }
.is-dark-theme .blog-source-card:hover { border-color: #3a444f; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.is-dark-theme .blog-timeline__more > summary { border-color: #343c46; background: #20252c; color: var(--app-ink-3); }
.is-dark-theme .blog-nice-group__more > summary { border-color: var(--app-accent-strong); border-left-color: rgba(255,255,255,.34); background: var(--app-accent-strong); color: #fff; }
.is-dark-theme .thread-timeline__item-embed { border-color: #343c46; }
.is-dark-theme .thread-timeline__item-embed span { color: #edf1f3; }
.is-dark-theme .thread-timeline__text { color: #edf1f3; }
.is-dark-theme .blog-timeline__item { border-color: #2c323b; }
.is-dark-theme .blog-owner-card { color: #edf1f3; }
.is-dark-theme .blog-canvas canvas { border-color: #343c46; }
.is-dark-theme .blog-canvas__colors button { border-color: #343c46; }
.is-dark-theme .stamp-chip { border-color: #343c46; background: #20252c; color: #edf1f3; }
.is-dark-theme .stamp-picker button { border-color: #343c46; background: #20252c; }
.is-dark-theme .item-gate-overlay { border-color: #2c323b; background: #191d23; }
.is-dark-theme .search-period input[type=date] {border-color:#343c46;background:#12161b;color:#eef2f4}
/* カードのブックマークはアイコンだけのボタン。文字との間隔用の余白は要らない。
   色は currentColor に任せない(待ち表示中は disabled になり、ブラウザ既定の灰色に落ちるため)。 */
.item-card__footer button > .ui-spinner { margin-right: 0; border-color: var(--app-accent-text); border-top-color: transparent; opacity: 1; }
/* ドロップダウン内の「非公開ステキ！」も待ち表示中は disabled になり、currentColorが
   ブラウザ既定の灰色に落ちる。スピナーの色は自前で持つ。 */
.blog-nice-group__more > div button > .ui-spinner { border-color: var(--app-accent-text); border-top-color: transparent; opacity: 1; }
.is-dark-theme .item-card__footer button, .is-dark-theme .item-card__footer>div a { border-color:#38414b;background:#20252c; }
.is-dark-theme .popular-tag-grid a {border-color:#2c323b;background:#191d23}
.is-dark-theme .app-page :focus-visible { outline: 2px solid #78d0df; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	.is-dark-theme .app-menu-toggle:hover, .is-dark-theme .app-icon-button:hover { background: #262c33; color: var(--app-accent-text); }
	.is-dark-theme .app-drawer nav a:hover { background: #20262c; color: var(--welcome-ink); }
	.is-dark-theme .app-drawer__settings:hover { background: var(--app-accent-surface); color: var(--app-accent-text); }
	.is-dark-theme .app-drawer__ui-switch a:hover { border-color: var(--welcome-accent); color: var(--app-accent-text); }
	.home-sidebar__list a:hover { background: #f2f5f4; }
	.home-sidebar__guideline:hover { background: #dceceb; }
	.is-dark-theme .home-sidebar__guideline:hover { background: #1b3138; }
	.home-sidebar__promo:hover .home-sidebar__promo-cta { text-decoration: underline; text-underline-offset: 2px; }
	.is-dark-theme .home-sidebar__list a:hover { background: #20252c; }
	.is-dark-theme .home-tabs a:not(.is-active):hover { background: #242a31; color: var(--welcome-ink); }
	.is-dark-theme .home-tabs__settings:hover { border-color: var(--welcome-accent); color: var(--app-accent-text); }
	.is-dark-theme .home-card__title:hover, .is-dark-theme .home-card__footer > a:hover { color: var(--app-accent-text); }
	.is-dark-theme .section-card h2 a:hover, .is-dark-theme .section-card__actions a:hover { color: var(--app-accent-text); }
	.is-dark-theme .message-row:hover, .is-dark-theme .attention-row:hover { background: #20252c; }
	.is-dark-theme .section-button:hover { border-color: var(--welcome-accent); }
	.is-dark-theme .bookmark-tag-row > a:hover, .is-dark-theme .bookmark-tag-row button:hover { background: #252b33; }
	.is-dark-theme .bookmark-item-tags__chips button:hover { border-color: var(--app-accent-line); }
	.is-dark-theme .settings-row:hover { background: #20252c; }
}
@media (min-width: 601px) {
	/* PCでは全幅だと目立ちすぎる。内容ぶんの幅に戻す(左寄せ) */
	.blog-detail-fav .section-button { width: auto; min-width: 200px; }
	/* 幅に余裕があるので原寸(180px)に近づける */
	.blog-detail-identity__image { width: 112px; height: 112px; }
}
@media (min-width: 960px) {
	.responsive-pc-home-ad { display: flex; justify-content: center; margin: 0 0 18px; }
	.responsive-pc-right-ad { display: flex; justify-content: center; }
	/* .section-main の中で3カラムにする版(ホームの .home-layout と同じ列幅)。
	   横幅は .section-main が持っているので、ここでは列だけ作る。
	   狭い画面では .home-sidebar が display:none なので、この指定ごと効かなくてよい。 */
	/* 本文の列はどの画面でも同じ幅(752px)にする。
	   以前は画面によって全体の上限が1032pxだったり1080pxだったりして、
	   本文が704px/752px/756px/760px/784pxとばらついていた。画面を行き来すると
	   本文の左右がそのたびに動いて落ち着かない。
	   1080 − 右カラム300 − 間隔28 = 752px に揃える。 */
	.section-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; width: 100%; margin: 0 auto; }
	.section-layout > .item-detail-page, .section-layout > .section-layout__main { width: 100%; min-width: 0; margin: 0; }
	/* padding を 0 にするのが要。ホーム版の .home-sidebar は上に30pxの余白を持っており
	   (ホームでは .home-main の28pxと釣り合う)、.section-main の32pxに足されると
	   右カラムだけ30px下にずれる。 */
	.section-layout > .home-sidebar { display: grid; gap: 14px; padding: 0; position: sticky; top: 78px; }
	.section-layout > .post-layout__hint { display: grid; gap: 14px; align-content: start; padding: 0; position: sticky; top: 78px; }
	/* 設定画面の右カラム。同じグループの他の設定へ、一覧に戻らず移れるようにする。 */
	.settings-sidebar__list { display: grid; gap: 2px; }
	.settings-sidebar__row { display: grid; gap: 2px; padding: 9px 8px; border-radius: 9px; color: var(--welcome-ink); text-decoration: none; }
	.settings-sidebar__row:hover { background: var(--app-accent-surface); }
	.settings-sidebar__row.is-current { background: var(--app-accent-surface); color: var(--app-accent-on-surface); }
	.settings-sidebar__row strong { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; }
	.settings-sidebar__row strong b { padding: 1px 5px; border-radius: 4px; background: #fdeceb; color: var(--app-danger); font-size: 12px; }
	.settings-sidebar__row small { overflow: hidden; color: var(--app-ink-3); font-size: 12px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
	/* 間隔も .section-layout と同じにする(本文の幅を揃えるため) */
	.post-layout { grid-template-columns: minmax(0,1fr) 300px; gap: 28px; }
	.post-layout__hint { position: sticky; top: 78px; }
	.ad-slot--overlay:has([data-cptid] > *:not(script)) { display: none; }
	.app-page:has(~ .ad-slot--overlay [data-cptid] > *:not(script)) { padding-bottom: 0; }
	.app-page { --app-drawer-width: 232px; }
	.app-drawer { transform: none; }
	.app-drawer__profile { padding-top: 8px; }
	.app-surface { min-width: 0; margin-left: var(--app-drawer-width); transition: none; }
	.app-page.is-menu-open .app-surface { transform: none; }
	.app-menu-toggle { visibility: hidden; pointer-events: none; }
	/* 検索と通知は右側にまとめ、ロゴはサイドバー幅の半分を補正して画面全体の中央に置く。 */
	.app-header__inner { width: min(1080px, calc(100% - 48px)); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
	.app-header .app-menu-toggle { display: none; }
	.app-header .app-brand { grid-column: 2; grid-row: 1; justify-self: center; transform: translateX(calc(var(--app-drawer-width) / -2)); }
	.app-header__actions { grid-column: 3; grid-row: 1; width: min(100%, 400px); min-width: 0; align-items: center; gap: 8px; }
	.app-header__search { display: flex; flex: 1; min-width: 0; gap: 0; }
	.app-header__actions .app-header__search-detail { display: inline-flex; }
	.app-header__search-icon { display: none; }
	.home-main { width: 100%; min-width: 0; margin: 0; padding-top: 30px; }
	/* ドロワー・タイムライン・サイドバーの3カラム。タイムラインは1列のまま縦に積む。 */
	.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; width: min(1080px, calc(100% - 48px)); margin: 0 auto; align-items: start; }
	/* 右カラムが画面より長い場合も、その中だけをスクロールして下のリンクへ届くようにする。 */
	.home-layout > .home-sidebar, .section-layout > .home-sidebar { display: grid; gap: 14px; align-content: start; box-sizing: border-box; max-height: calc(100dvh - 90px); padding: 0 4px 12px 0; overflow-y: auto; scrollbar-width: thin; position: sticky; top: 78px; }
	.home-layout > .home-sidebar { margin-top: 30px; }
	body:has(.responsive-pc-ad-overlay.is-filled) .home-layout > .home-sidebar, body:has(.responsive-pc-ad-overlay.is-filled) .section-layout > .home-sidebar { max-height: calc(100dvh - 180px); }
	.home-card { grid-template-columns: 148px minmax(0, 1fr); min-height: 174px; }
	.home-card__thumb { min-height: 174px; }
	.home-card__body { padding: 17px 18px; }
	.home-card__title { font-size: 16px; }
	.home-card__excerpt { font-size: 12px; }
	.home-card--text { grid-template-columns: 52px minmax(0, 1fr); }
	.home-card__mark { margin: 15px 0 15px 15px; border-radius: 12px; }
	.home-empty { grid-column: 1 / -1; }
	.section-main { width: min(1080px, calc(100% - 48px)); }
}
@media (max-width: 820px) {
	.section-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.app-page { --app-work-image-width: 126px; }
	.item-viewer__reading { gap: 4px; }
	.item-viewer__reading select { font-size: 10px; padding-inline: 1px; }
	.section-pagination:has(> .section-pagination__steps) .section-pagination__numbers { display: none; }
	.section-pagination:has(> .section-pagination__steps) .section-pagination__numbers--mobile { display: flex; }

	/* 3つ横並びのままだとラベルが2行に折れて崩れる。
	   アイコンだけにするのはブックマークだけ。非公開ステキは絵柄でも「非公開」の3文字でも
	   何の操作か伝わらないので、狭い画面でも「非公開ステキ」の6文字をそのまま出す。
	   落とす文字は読み上げ用に残す(消すとボタンの読み上げ名まで変わってしまう)。 */
	.item-detail-page > .item-actions [data-bookmark-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; clip: rect(0,0,0,0); white-space: nowrap; }
	.item-detail-page > .item-actions [data-nice-private] { flex: 0 0 auto; padding: 0 12px; }
	.item-detail-page > .item-actions [data-nice-private] > span { white-space: nowrap; }
	.item-detail-page > .item-actions [data-bookmark-button] { width: 54px; flex: 0 0 auto; padding: 0; }
	.item-detail-page > .item-actions [data-bookmark-button] i { margin: 0; font-size: 16px; }
	.app-page { --app-drawer-width: 268px; }
	.app-header__inner { width: calc(100% - 24px); min-height: 58px; }
	.app-brand img { width: 108px; }
	.app-drawer nav { gap: 3px; }
	.app-drawer nav a { min-height: 46px; font-size: 15px; }
	.app-drawer__group summary { min-height: 46px; font-size: 15px; line-height: 46px; }
	.app-drawer__group > div a { min-height: 42px; font-size: 14px; }
	.home-main { width: 100%; padding: 18px 12px 48px; }
	.home-tabs-row { margin-bottom: 12px; }
	.home-tabs { margin-left: -2px; }
	.home-tabs a { padding: 7px 12px; }
	.home-card { grid-template-columns: 104px minmax(0, 1fr); min-height: 150px; border-radius: 14px; }
	.home-card__thumb { min-height: 150px; }
	.home-card__body { padding: 13px 14px; }
	.home-card__meta { margin-bottom: 6px; }
	.home-card__title { font-size: 15px; }
	.home-card__excerpt { margin: 5px 0 8px; font-size: 12px; -webkit-line-clamp: 2; }
	.home-card--text { grid-template-columns: 44px minmax(0, 1fr); }
	.home-card__mark { margin: 13px 0 13px 13px; border-radius: 10px; font-size: 15px; }
	.section-main { width: 100%; padding: 22px 12px 52px; }
	.section-heading { align-items: center; margin-bottom: 19px; }
	.section-heading h1 { font-size: 24px; }
	.section-heading > div > p:last-child { margin-top: 5px; }
	.section-heading .section-button { min-height: 36px; padding: 0 11px; }
	.section-toolbar { align-items: stretch; flex-direction: column; }
	.items-index-heading { flex-wrap: wrap; gap: 8px; }
	.items-index-heading__actions { gap: 6px; margin-left: auto; }
	.items-index-heading .section-button { padding: 0 8px; white-space: nowrap; }
	.items-index-heading__actions .icon-button { width: 36px; height: 36px; }
	.items-index-filters { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
	.items-index-filters .section-segments { width: auto; min-width: 0; flex: 1 1 0; }
	.items-index-filters .section-select { flex: 0 0 auto; }
	.section-segments { width: 100%; box-sizing: border-box; }
	.section-segments--scroll { width: calc(100vw - 24px); }
	.section-search input { width: 100%; box-sizing: border-box; }
	.section-search label { flex: 1; }
	.section-grid { grid-template-columns: 1fr; }
	.section-card { grid-template-columns: 108px minmax(0,1fr); min-height: 152px; }
	.section-card--work { grid-template-columns: var(--app-work-image-width) minmax(0,1fr); }
	.section-card__body { padding: 13px 14px; }
	.message-row, .attention-row { grid-template-columns: 38px minmax(0,1fr); gap: 10px; padding: 11px 12px; }
	.message-row img, .attention-row__mark, .attention-row__thumb { width: 36px; height: 36px; }
	.message-row time, .attention-row time { grid-column: 2; }
	.section-actions { justify-content: flex-end; }
	.post-upload, .form-panel, .section-form > .section-details { padding: 16px; }
	.section-form { gap: 20px; }
	.section-form + .section-form { margin-top: 20px; }
	.upload-drop { min-height: 190px; }
	.site-fields { grid-template-columns: 1fr; }
	.site-fields legend { grid-column: 1; }
	.settings-groups { grid-template-columns: 1fr; gap: 24px; }
	.settings-group--danger { grid-column: auto; }
	.settings-group > header { padding: 0 2px 10px; }
	.settings-row { min-height: 72px; padding: 13px 15px; }
	.settings-row strong { font-size: 14px; }
	.settings-row small { font-size: 13px; }
	.avatar-editor { grid-template-columns: 82px minmax(0,1fr); gap: 14px; }
	.avatar-editor > img { width: 82px; height: 82px; }
	.form-actions { display: grid; grid-template-columns: 1fr; }
	.form-actions .section-button { width: 100%; }
	.session-list > li { grid-template-columns: 38px minmax(0,1fr); padding: 12px; }
	.session-list__icon { width: 38px; height: 38px; }
	.session-list > li > form, .session-list__ended { grid-column: 2; justify-self: start; }
	.connection-card, .connection-card--stack { grid-template-columns: 1fr; align-items: start; }
	.connection-card__status { justify-items: start; }
	.connection-card > .section-button, .connection-card > form .section-button { width: 100%; }
	.connection-details, .connection-card__help { grid-column: 1; }
	.connection-details > div { grid-template-columns: 1fr; gap: 3px; }
	.notification-setting { padding: 16px; }
	.notification-setting > header { grid-template-columns: 1fr; }
	.notification-setting > header .choice-field { justify-content: flex-start; }
	.filter-help__examples > div { grid-template-columns: 1fr; gap: 4px; }
	.tab-manager-list > li { grid-template-columns: 1fr; padding: 15px; }
	.tab-manager-list__actions { justify-content: flex-start; }
	.tab-feed-group { grid-template-columns: 1fr; }
	.tab-feed-group legend { grid-column: 1; }
	/* 対になる絞り込み(スレッド種別と閲覧区分など)は、狭い画面でも横に並べる。
	   1つずつ縦に積むと、絞り込みだけで一覧が押し下げられてしまう。
	   幅が足りないときは .section-segments 自身が横スクロールする。 */
	.history-filters { display: flex; }
	.history-filters .section-segments { width: auto; min-width: 0; flex: 1 1 0; }
	/* 2本並べると3つ目の項目が6pxだけはみ出して横スクロールになるので、左右の余白を詰める。 */
	.history-filters .section-segments a, .history-filters .section-segments button { padding: 7px 10px; }
	.history-work-list { grid-template-columns: 1fr; }
	.history-work-card { min-height: 158px; }
	.history-work-card__image { min-height: 158px; }
	.wall-color-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
	.wall-current { grid-template-columns: 82px minmax(0,1fr); }
	.wall-current > img { width: 82px; height: 72px; }
	.design-panel-heading { display: grid; }
	.design-color-fields { grid-template-columns: 1fr; }
	.saved-panel { grid-template-columns: 44px minmax(0,1fr); padding: 18px 16px; }
	.saved-panel__icon { width: 44px; height: 44px; }
	.saved-panel__actions { grid-column: 1/-1; }
	.follower-nav { width: calc(100vw - 24px); }
	.follower-card { grid-template-columns: 58px minmax(0,1fr); gap: 12px; padding: 14px; }
	.follower-card__avatar { width: 58px; height: 58px; }
	.follower-card--profile { grid-template-columns: 58px minmax(0,1fr); min-height: 140px; gap: 10px; padding: 12px; }
	.follower-card--profile > .follower-card__avatar { width: 58px; height: 58px; }
	.follower-card__body > header { display: grid; gap: 10px; }
	.follower-card__actions { width: 100%; }
	.follower-card__actions .section-button { flex: 1; }
	.signout-complete { padding: 30px 20px; }
	.comment-block-card { padding: 14px; }
	.message-detail__header { grid-template-columns: 44px minmax(0,1fr); padding: 14px; }
	.message-detail__avatar { width: 44px; height: 44px; }
	.message-detail__header time { grid-column: 2; }
	.message-detail__content { padding: 19px 16px 24px; }
	.message-detail__actions { padding: 13px 14px; }
	.information-list > a { grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; padding: 12px 14px; }
	.information-list time { grid-column: 1; }
	.information-list strong { grid-column: 1; }
	.information-list i { grid-column: 2; grid-row: 1/3; }
	.information-detail__pager { grid-template-columns: 1fr 1fr; }
	.information-detail__pager .is-index { grid-column: 1/-1; grid-row: 2; }
	.information-social { display: grid; }
	.search-toolbar{display:grid}.search-toolbar .section-segments{width:100%;box-sizing:border-box}.search-actions>.section-button,.search-actions__register .section-button{flex:1 1 auto}.search-actions__register{width:100%;margin-left:0}.search-period__choices,.search-period__dates{grid-template-columns:1fr}.popular-tag-grid{grid-template-columns:1fr}
	/* 並び順と作品種別を同じ行に置く。狭い幅では各タブ群を横スクロールできる。 */
	.search-toolbar { display: flex; flex-wrap: nowrap; }
	.search-toolbar .section-segments { width: auto; min-width: 0; flex: 0 1 auto; }
	.search-toolbar .section-segments:last-child { flex: 1 1 auto; }
	.analysis-summary { grid-template-columns: 1fr; }
	.analysis-summary > div { grid-template-columns: 1fr auto; align-items: center; padding: 14px 16px; }
	.analysis-summary strong { font-size: 18px; }
	.analysis-chart { padding: 14px 10px 6px; }
	.analysis-chart figcaption { margin-left: 20px; }
	.analysis-chart svg { height: 190px; }
	.management-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
	.management-dialog__panel { max-height: calc(100dvh - 16px); }
	.management-dialog__panel > header { padding: 15px 16px; }
	.management-dialog__content { padding: 14px; }
	.section-card__actions { align-items: flex-start; }
	/* 投稿ごとのアクション行を1行に収める。
	   「コメント」はアイコンと件数だけにし(何の数かはアイコンで分かる)、
	   ボタンの左右余白と間隔も詰める。文字の読み上げ用にaria-labelを持たせてある。 */
	/* 画像の端に寄せる(画面外に出さない) */
	.image-lightbox__close { top: -10px; right: -6px; }
	/* 原寸ビューアはスマホでこそ使うので、操作系は下端(親指の届く位置)にまとめる */
	.zoom-viewer__bar { bottom: max(16px, env(safe-area-inset-bottom)); }
	.zoom-viewer__nav { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: none; }
	.zoom-viewer__hint { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 52px); width: max-content; max-width: calc(100vw - 32px); left: 50%; }
	.blog-timeline__comment-label { display: none; }
	.blog-timeline__comment-count { margin-left: 0; }
	.blog-timeline__footer { gap: 8px; }
	.blog-timeline__footer .section-button { padding: 0 8px; }
}
@media (max-width: 390px) {
	.home-card { grid-template-columns: 92px minmax(0, 1fr); }
	.home-card__footer { display: block; }
	.home-card__footer > a { display: inline-block; margin-top: 5px; }
	.section-card--work .management-card__metrics { gap: 4px; }
	.section-card--work .management-card__metrics dt { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.app-skip, .app-surface, .app-drawer, .app-menu-toggle, .app-icon-button, .home-tabs__settings { transition-duration: 0ms; }
	.management-dialog[open] { animation: none; }
	.home-more__spinner { animation: none; border-top-color: #d3dcda; }
	.ui-spinner { animation: none; border-top-color: currentColor; opacity: .5; }
}

/* 閲覧条件の配色を一覧・詳細で共通にする。公開範囲は同じグレー。 */
.management-card__badges span.is-r18 { background: #f8e6e6; color: #a8494b; }
.management-card__badges span.is-r18g { background: #f1e8ef; color: #7c5271; }
.management-card__badges span.is-password { background: #000; color: #fff; }
.management-card__badges span.is-scope,
.history-work-card__badges span.is-scope { background: #e6e9ea; color: #4a5358; }
.is-dark-theme .management-card__badges span.is-r18 { background: #3a262a; color: #e29a9c; }
.is-dark-theme .management-card__badges span.is-r18g { background: #332a35; color: #c9a6c1; }
.is-dark-theme .management-card__badges span.is-password { background: #fff; color: #000; }
.is-dark-theme .management-card__badges span.is-scope,
.is-dark-theme .history-work-card__badges span.is-scope { background: #2c3339; color: #aebac1; }