/* qfps shared auth UI — AM0 (light / dark via html[data-theme]) */

:root {
	--qfps-white: #ffffff;
	--qfps-black: rgb(20, 20, 20);
	--qfps-red: rgb(204, 0, 51);
	--qfps-gray-100: rgb(245, 245, 247);
	--qfps-gray-200: rgb(230, 230, 234);
	--qfps-gray-300: rgb(180, 180, 185);
	--qfps-gray-700: rgb(58, 58, 62);
	--qfps-gray-800: rgb(42, 42, 45);
	--qfps-gray-900: rgb(28, 28, 30);

	--color-bg: var(--qfps-white);
	--color-surface: var(--qfps-white);
	--color-text: var(--qfps-black);
	--color-text-muted: rgb(90, 90, 95);
	--color-accent: var(--qfps-red);
	--color-accent-text: var(--qfps-white);
	--color-link: #0052cc;
	--color-border: var(--qfps-gray-200);
	--color-border-control: rgb(150, 150, 160);
	--color-error: var(--qfps-red);
	--color-shadow: rgba(20, 20, 20, 0.08);
	--color-focus: rgba(204, 0, 51, 0.35);
	/* PF 一覧カード（明セット既定。client_brand が上書き） */
	--color-pf-media-bg: #fafafa;
	--color-pf-media-fg: #111111;
	--color-pf-media-muted: #333333;
	--color-pf-media-border: #cccccc;
	--color-pf-media-placeholder: #eeeeee;
	--color-pf-media-btn: #ffffff;
	--color-pf-mark-on-bg: var(--color-link);
	--color-pf-mark-on-fg: #ffffff;
	/* hover の下地（枠と文字の色は変えない・#MB5V-1 の画面の確認 ①・#VXSY-1 の 2 甲） */
	--color-hover-bg: color-mix(in srgb, var(--qfps-red) 8%, transparent);
	/* 文字のリンクを押している間の色（#VXSY-1 の 4 乙）。hover（ライトは濃く・ダークは明るく）より 1 段先 */
	--color-link-active: rgb(0, 40, 110);

	--auth-radius: 0.5rem;
	--auth-gap: 1rem;
	--auth-card-max: 32rem;
	--auth-card-wide: 48rem;
	--auth-label-col: 7.5rem;
	--auth-sublabel-col: 7.5rem;
	--auth-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="dark"] {
	--color-bg: var(--qfps-gray-900);
	--color-surface: var(--qfps-gray-800);
	--color-text: var(--qfps-gray-100);
	--color-text-muted: var(--qfps-gray-300);
	--color-accent: var(--qfps-red);
	--color-link: #7fb4ff;
	--color-border: var(--qfps-gray-700);
	--color-border-control: rgb(118, 118, 128);
	--color-error: rgb(255, 145, 165);
	--color-shadow: rgba(0, 0, 0, 0.35);
	--color-focus: rgba(255, 145, 165, 0.45);
	--color-pf-media-bg: #1a1a1a;
	--color-pf-media-fg: #ffffff;
	--color-pf-media-muted: #dddddd;
	--color-pf-media-border: #666666;
	--color-pf-media-placeholder: #2a2a2a;
	--color-pf-media-btn: #242424;
	--color-pf-mark-on-bg: var(--color-link);
	--color-pf-mark-on-fg: #111111;
	--color-hover-bg: var(--qfps-gray-700);
	--color-link-active: rgb(205, 228, 255);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--color-bg: var(--qfps-gray-900);
		--color-surface: var(--qfps-gray-800);
		--color-text: var(--qfps-gray-100);
		--color-text-muted: var(--qfps-gray-300);
		--color-accent: var(--qfps-red);
		--color-link: #7fb4ff;
		--color-border: var(--qfps-gray-700);
		--color-border-control: rgb(118, 118, 128);
		--color-error: rgb(255, 145, 165);
		--color-shadow: rgba(0, 0, 0, 0.35);
		--color-focus: rgba(255, 145, 165, 0.45);
		--color-pf-media-bg: #1a1a1a;
		--color-pf-media-fg: #ffffff;
		--color-pf-media-muted: #dddddd;
		--color-pf-media-border: #666666;
		--color-pf-media-placeholder: #2a2a2a;
		--color-pf-media-btn: #242424;
		--color-pf-mark-on-bg: var(--color-link);
		--color-pf-mark-on-fg: #111111;
		--color-hover-bg: var(--qfps-gray-700);
		--color-link-active: rgb(205, 228, 255);
	}
}

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

/* 🔴 素のリンク（class を持たない a）がブラウザ既定の色で出ていた。
   dark の実測: #0000ee on gray-900 = **1.81:1** / 訪問済み #551a8b = **1.54:1**。
   基準 4.5:1 に遠く及ばない。トークンを当てると light 6.82 / dark 8.00（surface 上で 6.73）。
   ⚠️ 下線は必ず付ける。色だけだと入れ物とリンクの比が dark で 1.95 しかない。

   🔴 `a { }` ではなく `a:not([class])` にしてある。
   素の `a` にすると **class を持つリンクにも下線が付く**（実測 11 セレクタ。うち
   `a.pfront-list-add-picker-btn.auth-btn-ghost` `a.pfront-list-edit-save`
   `a.pfront-browse-option` など **ボタン風のもの**が含まれる）。
   困っているのは「誰も色を当てていないリンク」だけなので、そこだけを狙う。
   詳細度 0-1-0 で、既存のリンク規則（すべて 0-1-1 以上）には触れない。 */
a:not([class]) {
	color: var(--color-link);
	text-decoration: underline;
}

/* 押している間は色を 1 段濃く（#VXSY-1 の 4 乙）。class を持つリンク（ボタン風）には当てない（上の理由と同じ） */
a:not([class]):active {
	color: var(--color-link-active);
}

body.auth-page {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--auth-font);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-bg);
}

.auth-main {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex: 1 1 auto;
	min-height: 0;
	padding: 1rem 1.25rem 2rem;
}

.auth-card {
	width: 100%;
	max-width: var(--auth-card-wide);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: calc(var(--auth-radius) + 0.25rem);
	box-shadow: 0 0.25rem 1.25rem var(--color-shadow);
	padding: 1.5rem;
}

/* pfront ログイン後: 画面幅いっぱい（browse 用旧クラスも互換） */
body.pfront-app-wide .auth-card,
body.pfront-browse-wide .auth-card {
	max-width: none;
}

body.pfront-app-wide .auth-main,
body.pfront-browse-wide .auth-main {
	width: 100%;
	padding-left: clamp(0.5rem, 1.5vw, 1.25rem);
	padding-right: clamp(0.5rem, 1.5vw, 1.25rem);
}

/* 超ワイドでも単行入力だけ読みやすい幅に（表・グリッドは全幅） */
@media (min-width: 640px) {
	body.pfront-app-wide .auth-form > .auth-field > .auth-input:not([type="file"]),
	body.pfront-app-wide .auth-form > .auth-field > textarea.auth-input {
		max-width: 28rem;
	}
}

/* 横スクロール可能な表はカード内ではみ出さない */
body.pfront-app-wide .auth-body {
	min-width: 0;
}

body.pfront-app-wide table {
	width: 100%;
}

/*
 * 成功フラッシュは薄い緑の面固定のため、暗色テーマの白字が乗らないよう
 * 文字色を濃色に固定する。
 */
.auth-flash-ok {
	margin: 0 0 0.75rem;
	padding: 0.6rem 0.75rem;
	background: #eef6ee;
	border: 1px solid #88cc88;
	color: #111111;
}

.auth-flash-ok.auth-field-note {
	color: #111111;
}

/*
 * PF 一覧カード色は色セットの media（--color-pf-media-*）。
 * 明セット: ほぼ白＋濃字 / 暗セット: 黒ベース＋白字（白内障対策）。
 */
.pfront-media-card {
	margin: 0;
	border: 1px solid var(--color-pf-media-border, #ccc);
	background: var(--color-pf-media-bg, #fafafa);
	padding: 0.35rem;
	color: var(--color-pf-media-fg, #111111);
}

.pfront-media-card,
.pfront-media-card .auth-field-note,
.pfront-media-card label,
.pfront-media-card code,
.pfront-media-card a {
	color: var(--color-pf-media-fg, #111111);
}

.pfront-media-card img,
.pfront-media-card .pfront-media-placeholder {
	background: var(--color-pf-media-placeholder, #eeeeee);
}

.pfront-media-card .pfront-media-placeholder {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	text-align: center;
	padding: 0.5rem;
	color: var(--color-pf-media-muted, #333333);
}

.pfront-media-card .auth-btn-ghost {
	color: var(--color-pf-media-fg, #111111);
	background: var(--color-pf-media-btn, #ffffff);
	border-color: var(--color-pf-media-border, #999999);
}

/* pfront 単頁プレビュー: フィット／等倍 */
.pfront-preview-zoom-tools {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-left: 0.5rem;
	vertical-align: middle;
}
.pfront-preview-zoom-tools .auth-btn-ghost {
	padding: 0.2rem 0.55rem;
	font-size: 0.8rem;
	line-height: 1.2;
}
.pfront-preview-zoom-tools .auth-btn-ghost.is-active {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.pfront-preview-zoom-label {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	min-width: 2.75rem;
}
.pfront-preview-slot {
	position: relative;
	width: 100%;
	/* 確定までは高さを取らない（伸びる過程を見せない） */
	min-height: 0;
}
.pfront-preview-frame {
	text-align: center;
	background: var(--color-pf-media-bg, var(--color-bg, #f5f5f5));
	border: 1px solid var(--color-pf-media-border, var(--color-border, #ccc));
	padding: 0.5rem;
	overflow: auto;
	max-width: 100%;
	box-sizing: border-box;
}
/* 計測中: 幅だけ確保し、画面上は見えずレイアウトも伸ばさない */
.pfront-preview-slot:not(.is-ready) .pfront-preview-frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}
.pfront-preview-slot.is-ready .pfront-preview-frame {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.pfront-preview-frame img {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
}
.plist-page-nav {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 20;
}
.plist-page-nav .plist-nav-btn {
	pointer-events: auto;
	position: absolute;
	top: 45%;
	padding: 0.75rem 0.9rem;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	text-decoration: none;
	border-radius: 0.25rem;
}
.plist-page-nav .plist-nav-btn[hidden] {
	display: none !important;
}
.plist-page-nav .plist-nav-first { left: 0.5rem; }
.plist-page-nav .plist-nav-prev { left: 3rem; }
.plist-page-nav .plist-nav-last { right: 0.5rem; }
.plist-page-nav .plist-nav-next { right: 3rem; }

/* pfront メインナビ: 全員のまとまりと管理者だけのまとまりの間をあける（#PNAV）。
   flex の column-gap は同じ行の間にだけ効く ＝ 狭い幅で折り返したとき、行の頭に余白が付かない */
.pfront-main-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 2rem;
	row-gap: 0.35rem;
}
/* pfront メインナビ: アーカイブ年ドロップダウン */
.pfront-main-nav .pfront-nav-disabled {
	color: var(--color-text-muted, #888);
	cursor: not-allowed;
	text-decoration: none;
}
.pfront-main-nav .pfront-nav-dd {
	position: relative;
	display: inline-block;
}
.pfront-main-nav .pfront-nav-dd-menu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 30;
	min-width: 11rem;
	margin-top: 0.15rem;
	padding: 0.25rem 0;
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #ddd);
	box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.08);
}
.pfront-main-nav .pfront-nav-dd:hover .pfront-nav-dd-menu,
.pfront-main-nav .pfront-nav-dd:focus-within .pfront-nav-dd-menu {
	display: block;
}
.pfront-main-nav .pfront-nav-dd-menu a {
	display: block;
	padding: 0.35rem 0.75rem;
	white-space: nowrap;
	text-decoration: none;
}
.pfront-main-nav .pfront-nav-dd-menu a:hover {
	background: var(--color-surface-muted, #f4f4f4);
}

/* lists: イベント → リストの入れ子開閉 */
body.pfront-lists-page .pfront-lists-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;
	margin: 0 0 0.65rem;
}
body.pfront-lists-page .pfront-lists-head .auth-lead {
	margin: 0;
}
body.pfront-lists-page .pfront-lists-head .auth-btn-primary {
	flex: 0 0 auto;
	min-height: 2rem;
	padding: 0.35rem 0.75rem;
}
body.pfront-lists-page .pfront-lists-archive-year {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
}
body.pfront-lists-page .pfront-lists-archive-year select {
	min-height: 2rem;
}
body.pfront-lists-page .pfront-lists-events {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-border-control);
}
body.pfront-lists-page .pfront-lists-event {
	margin: 0;
	border-bottom: 1px solid var(--color-border-control);
}
body.pfront-lists-page .pfront-lists-event:last-child {
	border-bottom: 0;
}
body.pfront-lists-page .pfront-lists-event-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	min-width: 0;
	padding: 0.4rem 0.55rem;
	/* 枠の線の色を下地にすると、明るい企業の配色で濃い灰色の帯になり、帯の上のリンクが 4.5:1 を割った。
	   企業の配色から導いた --pf-lists-row-bg（client_brand.php・#MB5V-1 の 2 便目 C19）。無い画面は従来の値 */
	background: var(--pf-lists-row-bg, var(--color-border-control));
}
body.pfront-lists-page .pfront-lists-event-name {
	flex: 0 1 auto;
	min-width: 0;
	color: var(--color-text);
	font-size: 0.95rem;
}
body.pfront-lists-page .pfront-lists-event-phase {
	flex: 0 0 auto;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
}
body.pfront-lists-page .pfront-lists-event-summary {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-text-muted);
	font-size: 0.78rem;
}
body.pfront-lists-page .pfront-lists-event-tools {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-left: auto;
	flex: 0 0 auto;
	white-space: nowrap;
}
body.pfront-lists-page .pfront-lists-event-tools-sep {
	opacity: 0.55;
	color: var(--color-text-muted);
}
body.pfront-lists-page .pfront-lists-event-marks-link {
	color: var(--color-link, var(--color-accent, #06c));
	text-decoration: none;
}
body.pfront-lists-page .pfront-lists-event-marks-link:hover,
body.pfront-lists-page .pfront-lists-event-marks-link:focus-visible {
	text-decoration: underline;
}
body.pfront-lists-page .pfront-lists-event-vis {
	display: inline-flex;
	align-items: stretch;
	vertical-align: middle;
}
body.pfront-lists-page .pfront-lists-event-vis-opt {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 1.35rem;
	margin: 0;
	padding: 0.05rem 0.45rem;
	border: 1px solid var(--color-border);
	border-left-width: 0;
	border-radius: 0;
	background: var(--color-surface, #fff);
	color: var(--color-text);
	font: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0.7;
}
body.pfront-lists-page .pfront-lists-event-vis-opt:first-child {
	border-left-width: 1px;
}
/* hover は下地の色だけ（#SMDM-1 の 5 甲・薄くする形は暗い企業色で見えにくい）。下地は企業の配色から導いた値（C15）。選ばれている印には付けない */
body.pfront-lists-page .pfront-lists-event-vis-opt:hover:not(.is-active) {
	opacity: 1;
	background: var(--color-hover-bg, var(--color-border));
}
body.pfront-lists-page .pfront-lists-event-vis-opt.is-active {
	color: var(--color-pf-mark-on-fg, #ffffff);
	background: var(--color-pf-mark-on-bg, var(--color-link));
	border-color: var(--color-pf-mark-on-bg, var(--color-link));
	opacity: 1;
}
body.pfront-lists-page .pfront-lists-col-vis {
	width: 1%;
	white-space: nowrap;
}
body.pfront-lists-page .pfront-lists-vis {
	display: inline-flex;
	align-items: stretch;
	vertical-align: middle;
}
body.pfront-lists-page .pfront-lists-vis-opt {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	min-height: 1.35rem;
	margin: 0;
	padding: 0.05rem 0.35rem;
	border: 1px solid var(--color-border-control);
	border-left-width: 0;
	border-radius: 0;
	background: var(--color-border-control);
	color: var(--color-text);
	font: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0.62;
}
body.pfront-lists-page .pfront-lists-vis-opt:first-child {
	border-left-width: 1px;
}
/* hover は下地の色だけ（#SMDM-1 の 5 甲・薄くする形は暗い企業色で見えにくい）。下地は企業の配色から導いた値（C15）。選ばれている印には付けない */
body.pfront-lists-page .pfront-lists-vis-opt:hover:not(.is-active) {
	opacity: 1;
	background: var(--color-hover-bg, var(--color-border));
}
body.pfront-lists-page .pfront-lists-vis-opt.is-active {
	color: var(--color-pf-mark-on-fg, #ffffff);
	background: var(--color-pf-mark-on-bg, var(--color-link));
	opacity: 1;
}
body.pfront-lists-page .pfront-lists-event-body {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0;
	border-top: 1px solid var(--color-border-control);
	overflow: hidden;
}
body.pfront-lists-page table.pfront-lists-table {
	width: 100%;
	max-width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 0.78rem;
	line-height: 1.25;
}
body.pfront-lists-page .pfront-lists-item td {
	padding: 0.28rem 0.4rem;
	border-bottom: 1px solid var(--color-border-control);
	border-left: 1px solid var(--color-border-control);
	color: var(--color-text-muted);
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}
body.pfront-lists-page .pfront-lists-item td:first-child {
	border-left: 3px solid var(--color-text-muted);
}
body.pfront-lists-page .pfront-lists-item.is-published td:first-child {
	border-left-color: var(--color-link);
}
body.pfront-lists-page .pfront-lists-item.is-draft {
	opacity: 0.9;
}
body.pfront-lists-page .pfront-lists-col-toggle {
	width: 1%;
}
body.pfront-lists-page .pfront-lists-col-status {
	width: 1%;
	text-align: center;
}
body.pfront-lists-page .pfront-lists-col-name {
	white-space: normal;
	overflow-wrap: anywhere;
}
body.pfront-lists-page .pfront-lists-col-event {
	width: 1%;
}
body.pfront-lists-page .pfront-lists-col-eval-lock {
	width: 1%;
	white-space: nowrap;
}
.pfront-eval-lock {
	display: inline-flex;
	align-items: stretch;
	vertical-align: middle;
	white-space: nowrap;
}
.pfront-eval-lock.is-na,
.pfront-eval-lock.is-archived {
	display: inline-block;
	min-width: 4.2rem;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	color: var(--color-text-muted);
}
.pfront-eval-lock.is-archived {
	color: var(--color-text);
}
.pfront-eval-lock-opt {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.4rem;
	min-height: 1.35rem;
	margin: 0;
	padding: 0.05rem 0.35rem;
	border: 1px solid var(--color-border-control);
	border-left-width: 0;
	border-radius: 0;
	background: var(--color-border-control);
	color: var(--color-text);
	font: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0.62;
}
.pfront-eval-lock-opt:first-child {
	border-left-width: 1px;
}
.pfront-eval-lock-opt:hover:not(:disabled) {
	opacity: 0.85;
}
.pfront-eval-lock-opt.is-active {
	color: var(--color-pf-mark-on-fg, #ffffff);
	background: var(--color-pf-mark-on-bg, var(--color-link));
	opacity: 1;
}
.pfront-eval-lock-opt:disabled {
	cursor: default;
}
.pfront-eval-lock-opt:disabled:not(.is-active) {
	opacity: 0.4;
}
.pfront-eval-lock-opt.is-active:disabled {
	opacity: 1;
}
body.pfront-list-view .pfront-list-grid .pfront-mark-btn:disabled,
.pf-toolbar .pfront-mark-btn:disabled {
	opacity: 0.45;
	cursor: default;
}
body.pfront-lists-page .pfront-lists-col-filter {
	width: 1%;
	min-width: 3.5rem;
	padding-top: 0.18rem;
	padding-bottom: 0.18rem;
	padding-left: 0;
	padding-right: 0;
}
body.pfront-lists-page .pfront-lists-col-filter-all {
	padding-left: 0.35rem;
}
body.pfront-lists-page .pfront-lists-col-filter-bad {
	padding-right: 0.35rem;
}
body.pfront-lists-page .pfront-lists-pf-filter-opt {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 3.5rem;
	min-height: 1.35rem;
	margin: 0;
	padding: 0.05rem 0.18rem;
	border: 1px solid var(--color-border-control);
	border-left-width: 0;
	border-radius: 0;
	background: var(--color-border-control);
	color: var(--color-text);
	font: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0.62;
}
body.pfront-lists-page .pfront-lists-col-filter-all .pfront-lists-pf-filter-opt {
	border-left-width: 1px;
}
/* hover は下地の色だけ（#SMDM-1 の 5 甲・薄くする形は暗い企業色で見えにくい）。下地は企業の配色から導いた値（C15）。選ばれている印には付けない */
body.pfront-lists-page .pfront-lists-pf-filter-opt:hover:not(.is-active) {
	opacity: 1;
	background: var(--color-hover-bg, var(--color-border));
}
body.pfront-lists-page .pfront-lists-pf-filter-opt.is-active {
	color: var(--color-pf-mark-on-fg, #ffffff);
	background: var(--color-pf-mark-on-bg, var(--color-link));
	opacity: 1;
}
body.pfront-lists-page .pfront-lists-col-published {
	width: 100%;
}
body.pfront-lists-page .pfront-lists-delete {
	display: inline-flex;
	align-items: center;
	margin: 0 0 0 0.5rem;
	vertical-align: middle;
}
body.pfront-lists-page .pfront-lists-delete-btn {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-decoration: underline;
	cursor: pointer;
	min-height: 0;
	min-width: 0;
}
body.pfront-lists-page .pfront-lists-delete-btn:hover {
	color: var(--color-accent);
}
body.pfront-lists-page .pfront-lists-expand {
	box-sizing: border-box;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-border-control);
	border-radius: 0;
	background: var(--color-surface, #fff);
	color: var(--color-text);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
body.pfront-lists-page .pfront-lists-expand:hover {
	border-color: var(--color-link);
	color: var(--color-link);
}
body.pfront-lists-page .pfront-lists-item-link {
	color: var(--color-link);
	text-decoration: none;
}
body.pfront-lists-page .pfront-lists-item-link strong {
	font-size: 0.92rem;
}
body.pfront-lists-page .pfront-lists-item-summary-sep {
	opacity: 0.55;
	margin: 0 0.15rem;
}
body.pfront-lists-page .pfront-lists-item-detail-row td {
	box-sizing: border-box;
	width: 100%;
	max-width: 0;
	padding: 0.35rem 0.55rem 0.4rem 2.25rem;
	border-bottom: 1px solid var(--color-border-control);
	overflow: hidden;
}
body.pfront-lists-page .pfront-lists-pf-strip {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.3rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding-bottom: 0.2rem;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}
body.pfront-lists-page .pfront-lists-pf-card[hidden] {
	display: none;
}
body.pfront-lists-page .pfront-lists-pf-card {
	flex: 0 0 44px;
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	width: 44px;
	min-width: 44px;
}
body.pfront-lists-page .pfront-lists-pf-marks {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.1rem;
	width: 44px;
	min-height: 0.85rem;
	font-size: 0.62rem;
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
}
body.pfront-lists-page .pfront-lists-pf-marks.is-empty {
	visibility: hidden;
}
body.pfront-lists-page .pfront-lists-pf-marks.is-single-left {
	justify-content: flex-start;
}
body.pfront-lists-page .pfront-lists-pf-marks.is-only-bad {
	justify-content: flex-end;
}
body.pfront-lists-page .pfront-lists-pf-marks .is-good {
	color: var(--color-pf-mark-on-bg, var(--color-link));
}
body.pfront-lists-page .pfront-lists-pf-marks .is-neutral {
	color: var(--color-text);
}
body.pfront-lists-page .pfront-lists-pf-marks .is-bad {
	color: var(--color-text);
}
body.pfront-lists-page .pfront-lists-pf-link {
	display: block;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-border-control);
	background: var(--color-pf-media-bg, #fff);
	overflow: hidden;
}
body.pfront-lists-page .pfront-lists-pf-link img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: cover;
}
body.pfront-lists-page .pfront-lists-pf-empty {
	color: var(--color-text-muted);
	font-size: 0.75rem;
}
body.pfront-lists-page .pfront-lists-status {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 7.8rem;
	width: auto;
	margin: 0;
	padding: 0.02rem 0.35rem;
	border: 1px solid var(--color-border-control);
	color: var(--color-text);
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}
body.pfront-lists-page .pfront-lists-item.is-published .pfront-lists-status {
	border-color: var(--color-pf-mark-on-bg, var(--color-link));
	color: var(--color-pf-mark-on-fg, #fff);
	background: var(--color-pf-mark-on-bg, var(--color-link));
}

/* list_view: ツールバーを薄くし、PF グリッドをファーストビュー優先 */
body.pfront-list-view .client-brand-header {
	padding: 0.4rem 1rem;
}
body.pfront-list-view .client-brand-name {
	font-size: clamp(1.05rem, 2vw, 1.35rem);
}
body.pfront-list-view .auth-main {
	padding-top: 0.5rem;
	padding-bottom: 1.25rem;
}
body.pfront-list-view .auth-card {
	padding: 0.75rem 0.85rem 1.25rem;
}
body.pfront-view-auser .auth-main {
	padding-top: 0.4rem;
	padding-bottom: 0.5rem;
}
body.pfront-view-auser .auth-card {
	padding: 0.55rem 0.75rem 0.6rem;
}
body.pfront-view-auser .auth-header {
	display: none;
}
body.pfront-view-auser .auth-card > nav[aria-label="メイン"] {
	margin: 0 0 0.35rem !important;
	padding-bottom: 0.3rem !important;
	font-size: 0.8rem;
	line-height: 1.3;
}
body.pfront-view-auser .pfront-resume-page {
	gap: 0.35rem;
}
body.pfront-view-auser .pfront-resume-toolbar {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.35;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.4rem;
}
body.pfront-view-auser .pfront-resume-pdf-wrap {
	border: 1px solid var(--color-border);
}
body.pfront-view-auser .pfront-resume-pdf {
	display: block;
	width: 100%;
	height: calc(100dvh - 10.5rem);
	min-height: 55vh;
}

body.pfront-list-view .auth-card > nav[aria-label="メイン"] {
	margin: 0 0 0.45rem !important;
	padding-bottom: 0.4rem !important;
	font-size: 0.8rem;
	line-height: 1.35;
}
body.pfront-list-view .pfront-list-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.85rem;
	margin: 0 0 0.55rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--color-text-muted);
}
body.pfront-list-view .pfront-list-toolbar a {
	color: var(--color-link);
}
body.pfront-list-view .pfront-list-toolbar strong {
	color: var(--color-text);
	font-weight: 600;
}
body.pfront-list-view .pfront-list-toolbar .pfront-list-title {
	color: var(--color-text);
	font-weight: 600;
}
body.pfront-list-view .pfront-list-toolbar-sep {
	opacity: 0.45;
}
body.pfront-list-view .pfront-list-toolbar form {
	display: inline;
	margin: 0;
}
body.pfront-list-view .pfront-list-toolbar .auth-btn-ghost {
	padding: 0.05rem 0.4rem;
	font-size: 0.78rem;
	line-height: 1.3;
}
body.pfront-list-view .pfront-filter-setting {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
body.pfront-list-view .pfront-filter-switch {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-border-control);
}
body.pfront-list-view .pfront-list-toolbar .pfront-filter-option {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.45rem;
	padding: 0.05rem 0.4rem;
	border-left: 1px solid var(--color-border-control);
	color: var(--color-text);
	background: var(--color-border-control);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	opacity: 0.62;
}
body.pfront-list-view .pfront-list-toolbar .pfront-filter-option:first-child {
	border-left: 0;
}
/* hover は下地の色だけ（#SMDM-1 の 5 甲・薄くする形は暗い企業色で見えにくい）。下地は企業の配色から導いた値（C15）。選ばれている印には付けない */
body.pfront-list-view a.pfront-filter-option:hover:not(.is-active) {
	opacity: 1;
	background: var(--color-hover-bg, var(--color-border));
}
body.pfront-list-view .pfront-list-toolbar .pfront-filter-option.is-active {
	color: var(--color-pf-mark-on-fg, #ffffff);
	background: var(--color-pf-mark-on-bg, var(--color-link));
	opacity: 1;
}
body.pfront-list-view .pfront-list-mark-filter .pfront-filter-option {
	width: 2.8rem;
	padding-right: 0.2rem;
	padding-left: 0.2rem;
}
body.pfront-list-view .pfront-pfname-setting,
body.pfront-list-edit .pfront-pfname-setting {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
body.pfront-list-view .pfront-pfname-switch,
body.pfront-list-edit .pfront-pfname-switch {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-border-control);
}
body.pfront-list-view .pfront-pfname-switch form,
body.pfront-list-edit .pfront-pfname-switch form {
	display: flex;
}
body.pfront-list-view .pfront-pfname-option,
body.pfront-list-edit .pfront-pfname-option {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	min-height: 1.45rem;
	margin: 0;
	padding: 0.05rem 0.35rem;
	border: 0;
	border-radius: 0;
	color: var(--color-text);
	background: var(--color-border-control);
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	opacity: 0.62;
}
body.pfront-list-view button.pfront-pfname-option,
body.pfront-list-edit button.pfront-pfname-option {
	cursor: pointer;
}
/* hover は下地の色だけ（#SMDM-1 の 5 甲・薄くする形は暗い企業色で見えにくい）。下地は企業の配色から導いた値（C15）。選ばれている印には付けない */
body.pfront-list-view button.pfront-pfname-option:hover:not(.is-active),
body.pfront-list-edit button.pfront-pfname-option:hover:not(.is-active) {
	opacity: 1;
	background: var(--color-hover-bg, var(--color-border));
}
body.pfront-list-view .pfront-pfname-option + form,
body.pfront-list-view .pfront-pfname-switch form + .pfront-pfname-option,
body.pfront-list-edit .pfront-pfname-option + form,
body.pfront-list-edit .pfront-pfname-switch form + .pfront-pfname-option {
	border-left: 1px solid var(--color-border-control);
}
body.pfront-list-view .pfront-pfname-option.is-active,
body.pfront-list-edit .pfront-pfname-option.is-active {
	color: var(--color-pf-mark-on-fg, #ffffff);
	background: var(--color-pf-mark-on-bg, var(--color-link));
	opacity: 1;
}
body.pfront-list-create-flow .auth-form {
	gap: 0;
}
body.pfront-list-create-flow .plist-stepper .auth-stepper {
	margin-bottom: 0.15rem;
}
body.pfront-list-create-flow .plist-stepper-note {
	margin: 0 0 0.2rem;
	line-height: 1.35;
}
body.pfront-list-create-flow .auth-lead {
	margin: 0;
	line-height: 1.3;
}
body.pfront-list-edit .pfront-list-create-head {
	margin-bottom: 0.25rem;
}
.pfront-share-meter {
	margin: 0.35rem 0 0.65rem;
	max-width: 28rem;
}
.pfront-share-meter-track {
	display: flex;
	height: 0.55rem;
	border-radius: 999px;
	overflow: hidden;
	background: var(--color-border, rgba(0, 0, 0, 0.12));
}
.pfront-share-meter-done,
.pfront-share-meter-busy,
.pfront-share-meter-follow {
	display: block;
	height: 100%;
	flex: 0 0 auto;
}
.pfront-share-meter-done {
	background: var(--color-accent);
}
.pfront-share-meter-busy {
	background: var(--color-text-muted, #888);
}
.pfront-share-meter-follow {
	background: color-mix(in srgb, var(--color-accent) 28%, var(--color-border, #ccc));
}
.pfront-share-meter-label,
.pfront-share-meter-note {
	margin: 0.3rem 0 0;
	font-size: 0.8rem;
}
.pfront-share-meter-note {
	color: var(--color-text-muted, var(--color-text));
}
body.pfront-list-edit .pfront-list-create-tools {
	margin: 0.25rem 0 1rem;
}
body.pfront-list-edit .pfront-list-edit-publish {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	flex: 0 0 auto;
}
.pfront-publish-dialog {
	max-width: min(32rem, calc(100vw - 2rem));
	width: 100%;
	padding: 0;
	border: 1px solid var(--color-border-control);
	border-radius: var(--auth-radius);
	color: var(--color-text);
	/* UA の dialog Canvas（ダーク時は黒）を潰し、暗ブランドでも見出しが黒帯に見えないよう少し明るくする */
	color-scheme: light;
	background-color: var(--color-surface, var(--color-bg));
	background-image: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16));
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.18);
}
.pfront-publish-dialog::backdrop {
	background: rgba(0, 0, 0, 0.45);
}
.pfront-publish-dialog-inner {
	padding: 1.25rem 1.35rem 1.1rem;
	color: inherit;
	background-color: transparent;
	background-image: none;
}
.pfront-publish-dialog .auth-title {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	color: var(--color-text);
	background: transparent;
}
.pfront-publish-dialog-warn {
	margin: 0 0 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.55;
	color: var(--color-accent);
	background-color: transparent;
	border: 1px solid var(--color-accent);
	border-radius: var(--auth-radius);
}
@supports (background: color-mix(in srgb, red 10%, white)) {
	.pfront-publish-dialog-warn {
		background: color-mix(in srgb, var(--color-accent) 18%, transparent);
		border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border, var(--color-accent)));
	}
}
.pfront-publish-dialog-inner .auth-field-note {
	margin: 0 0 0.75rem;
}
.pfront-publish-dialog-actions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.35rem;
}
body.pfront-list-create-flow .pfront-list-create-head {
	margin: 0;
}
body.pfront-list-create-flow .pfront-list-create-tools {
	margin: 0.05rem 0 0.15rem;
}
body.pfront-list-create-flow .auth-title {
	margin: 0.35rem 0 0.35rem;
	font-size: 1.1rem;
}
body.pfront-list-create-flow .auth-actions {
	margin-top: 1rem;
}
body.pfront-list-edit .pfront-list-edit-grid-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0.35rem 0 0.5rem;
}
body.pfront-list-create-flow .pfront-list-edit-grid-head {
	margin: 0.2rem 0 0.35rem;
}
body.pfront-list-edit .pfront-browse-page-nav {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	white-space: nowrap;
	flex: 0 0 auto;
}
body.pfront-list-edit .pfront-list-edit-grid-foot {
	margin: 0.6rem 0 0;
}
body.pfront-list-edit a.pfront-list-add-picker-btn.auth-btn-ghost {
	border-color: var(--color-accent);
}
body.pfront-list-edit .pfront-list-edit-save-wrap {
	display: inline-flex;
	align-items: center;
}
body.pfront-list-edit .pfront-list-edit-save-wrap.is-disabled {
	cursor: not-allowed;
}
body.pfront-list-edit .pfront-list-edit-save-wrap.is-disabled > a.pfront-list-edit-save {
	pointer-events: none;
}
body.pfront-browse-page .pfront-browse-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
}
body.pfront-picker-page .auth-form {
	gap: 0;
}
body.pfront-picker-page .plist-stepper .auth-stepper {
	margin-bottom: 0.15rem;
}
body.pfront-picker-page .plist-stepper-note {
	margin: 0 0 0.2rem;
	line-height: 1.35;
}
body.pfront-picker-page .auth-lead {
	margin: 0;
	line-height: 1.3;
}
body.pfront-picker-page .auth-flash-ok {
	margin: 0.1rem 0;
}
body.pfront-picker-page .pfront-browse-controls {
	margin: 0.05rem 0 0.15rem;
	row-gap: 0.2rem;
	column-gap: 0.75rem;
}
body.pfront-picker-page .pfront-picker-toolbar {
	margin-top: 0.1rem;
}
body.pfront-browse-page .pfront-browse-search {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
}
body.pfront-browse-page .pfront-browse-search input[type="search"] {
	min-width: 12rem;
	max-width: 18rem;
}
body.pfront-browse-page .pfront-browse-setting {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
body.pfront-browse-page .pfront-browse-page-nav {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	white-space: nowrap;
	flex: 0 0 auto;
}
body.pfront-browse-page .pfront-picker-toolbar {
	justify-content: space-between;
	/* 狭い画面では折り返す（右へはみ出してボタンに気付けない・C-023 の確認 09-18） */
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}
body.pfront-browse-page .pfront-picker-toolbar .pfront-browse-page-nav {
	margin-right: auto;
}
body.pfront-browse-page .pfront-picker-toolbar-right {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	/* 『リストに追加』と『編集終了』の間をあける（C-023 の確認 09-18） */
	gap: 0.5rem 0.75rem;
	margin-left: auto;
	flex: 0 1 auto;
	max-width: 100%;
}
body.pfront-browse-page .pfront-picker-check-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-right: 0.1rem;
}
@media (max-width: 40rem) {
	body.pfront-browse-page .pfront-picker-toolbar-right {
		margin-left: 0;
		justify-content: flex-start;
	}
}
body.pfront-browse-page .pfront-picker-toolbar .auth-btn-primary {
	flex: 0 0 auto;
}
body.pfront-browse-page .pfront-browse-page-nav-bottom {
	display: flex;
	justify-content: flex-start;
}
body.pfront-browse-page .pfront-browse-switch {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-border-control);
}
body.pfront-browse-page .pfront-browse-switch-hist {
	flex-wrap: wrap;
}
body.pfront-browse-page .pfront-browse-option {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.45rem;
	margin: 0;
	padding: 0.05rem 0.45rem;
	border: 0;
	border-radius: 0;
	color: var(--color-text);
	background: var(--color-border-control);
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	opacity: 0.62;
	text-decoration: none;
	cursor: pointer;
	position: relative;
}
body.pfront-browse-page .pfront-browse-option + .pfront-browse-option {
	border-left: 1px solid var(--color-border-control);
}
/* hover は下地の色だけ（#SMDM-1 の 5 甲・薄くする形は暗い企業色で見えにくい）。下地は企業の配色から導いた値（C15）。選ばれている印には付けない */
/* 🔴 label も要る（P-1・#RJXC-3・2026-09-16）—— 同じ class を <a> と <label> の両方が使っており
   （list_copy.php の「隠したラジオを label で包む」形が 7 件）、a. だけだと label に当たらない。
   基底（:1323）と .is-active（下）は要素非限定なので、cursor は反応するのに hover だけ反応しない、
   という見え方になっていた。⚠️ a. を外す案は採らない —— 詳細度が下がって勝ち負けが変わる。 */
body.pfront-browse-page a.pfront-browse-option:hover:not(.is-active),
body.pfront-browse-page label.pfront-browse-option:hover:not(.is-active) {
	opacity: 1;
	background: var(--color-hover-bg, var(--color-border));
}
/* キーボードで選んでいる間の枠（#RJXC-7 甲・2026-09-16 ユーザー判断・P-1 の丙）。
   🔴 中のラジオは opacity:0 で隠してあるので、ブラウザは枠を描かない（focus が見えない）。
      label 自身に :has() で枠を移す。
   ⚠️ :not(.is-active) を落とさないこと —— 落とすと「選んだのかどうか分からない」になる
      （選ばれている印は色が反転する形で、枠と混ざると読めない）。 */
body.pfront-browse-page label.pfront-browse-option:has(input:focus-visible):not(.is-active) {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

body.pfront-browse-page .pfront-browse-option.is-active {
	color: var(--color-pf-mark-on-fg, #ffffff);
	background: var(--color-pf-mark-on-bg, var(--color-link));
	opacity: 1;
}
body.pfront-browse-page {
	scrollbar-gutter: stable;
}
body.pfront-browse-page .pfront-browse-pf-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
	gap: 0.45rem;
}
body.pfront-browse-page .pfront-browse-pf-grid .pfront-media-card {
	font-size: 0.78rem;
}
body.pfront-browse-page .pfront-browse-pf-meta {
	margin: 0.25rem 0 0;
	font-size: 0.72rem;
	text-align: left;
}
body.pfront-browse-page .pfront-browse-pf-meta-line {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.pfront-browse-page .pfront-browse-table th {
	padding: 0.2rem 0.35rem 0.35rem;
	vertical-align: middle;
	line-height: 1.2;
}
body.pfront-browse-page .pfront-browse-table td {
	padding: 0.2rem 0.35rem;
	vertical-align: middle;
	line-height: 1.25;
}
body.pfront-list-copy-page .pfront-list-copy-table {
	width: 100%;
}
body.pfront-list-copy-page .pfront-list-copy-col-check,
body.pfront-list-copy-page .pfront-list-copy-col-status,
body.pfront-list-copy-page .pfront-list-copy-col-name,
body.pfront-list-copy-page .pfront-list-copy-col-count {
	width: 1%;
	white-space: nowrap;
}
body.pfront-list-copy-page .pfront-list-copy-col-fill {
	width: 100%;
}
body.pfront-list-copy-page .pfront-list-copy-table tbody tr:nth-child(odd) td {
	background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface, #fff));
}
body.pfront-list-copy-page .pfront-list-copy-table tbody td {
	padding: 0;
}
<body.pfront-list-copy-page .pfront-list-copy-row-hit {
	display: block;
	box-sizing: border-box;
	padding: 0.4rem 0.35rem;
	min-height: 2.1rem;
	cursor: pointer;
}
body.pfront-list-copy-page.pfront-list-copy-busy-on {
	overflow: hidden;
}
body.pfront-list-copy-page .pfront-list-copy-busy {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.45);
	cursor: wait;
}
body.pfront-list-copy-page .pfront-list-copy-busy[hidden] {
	display: none !important;
}
body.pfront-list-copy-page .pfront-list-copy-busy-card {
	max-width: 28rem;
	width: 100%;
	padding: 1.25rem 1.5rem;
	border-radius: 4px;
	background: var(--color-bg, #fff);
	color: var(--color-text, #111);
	border: 1px solid var(--color-border, #ccc);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	text-align: center;
}
body.pfront-list-copy-page .pfront-list-copy-busy-spinner {
	width: 40px;
	height: 40px;
	margin: 0 auto 0.85rem;
	border: 4px solid var(--color-border, #ccc);
	border-top-color: var(--color-accent, #333);
	border-radius: 50%;
	animation: pfront-list-copy-spin 0.8s linear infinite;
}
@keyframes pfront-list-copy-spin {
	to { transform: rotate(360deg); }
}
body.pfront-list-copy-page .pfront-list-copy-busy-msg {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}
body.pfront-list-copy-page .pfront-list-copy-busy-sub {
	margin: 0.5rem 0 0;
	font-size: 0.88rem;
	color: var(--color-text-muted);
}
body.pfront-browse-page .pfront-browse-actions {
	white-space: nowrap;
}
body.pfront-browse-page .pfront-browse-action-form {
	display: inline-flex;
	align-items: center;
	margin: 0 0 0 0.25rem;
	vertical-align: middle;
}
body.pfront-browse-page .pfront-browse-action-btn {
	box-sizing: border-box;
	min-height: 1.7rem;
	padding: 0.1rem 0.45rem;
	font-size: 0.8rem;
	line-height: 1.2;
	vertical-align: middle;
}
body.pfront-list-view .pfront-list-flash {
	margin: 0 0 0.45rem;
	font-size: 0.8rem;
}
/* list_view: mfront browse_portfolios 密度寄せ（マーク行ぶんやや余裕） */
body.pfront-list-view .pfront-list-grid {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
	gap: 0.35rem;
}
body.pfront-list-view .pfront-list-grid.is-compact {
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: 3px;
}
body.pfront-list-view .pfront-list-grid .pfront-media-card {
	padding: 0.2rem;
}
body.pfront-list-view .pfront-list-grid .pfront-list-marks {
	margin-top: 0.2rem;
	display: flex;
	gap: 0;
	justify-content: center;
	flex-wrap: nowrap;
	align-items: center;
}
body.pfront-list-view .pfront-list-grid .pfront-mark-btn + .pfront-mark-btn {
	margin-left: -1px;
}
body.pfront-list-view .pfront-list-grid .pfront-mark-btn {
	display: grid;
	place-items: center;
	width: 1.65rem;
	height: 1.5rem;
	min-width: 0;
	min-height: 1.5rem;
	padding: 0;
	border-radius: 0;
	font-size: 0.82rem;
	line-height: 1;
}
body.pfront-list-view .pfront-list-grid .pfront-mark-btn.is-active {
	position: relative;
	z-index: 1;
	font-weight: 700;
	color: var(--color-pf-mark-on-fg, #ffffff);
	background: var(--color-pf-mark-on-bg, var(--color-link));
	border-color: var(--color-pf-mark-on-bg, var(--color-link));
}
.pf-toolbar .pfront-list-marks {
	display: flex;
	gap: 0;
	flex: 0 0 auto;
	align-items: center;
	margin-left: 0.15rem;
}
.pf-toolbar .pfront-mark-btn + .pfront-mark-btn {
	margin-left: -1px;
}
.pf-toolbar .pfront-mark-btn {
	display: grid;
	place-items: center;
	width: 1.85rem;
	height: 1.65rem;
	min-width: 0;
	min-height: 1.65rem;
	padding: 0;
	border-radius: 0;
	font-size: 0.88rem;
	line-height: 1;
}
.pf-toolbar .pfront-mark-btn.is-active {
	position: relative;
	z-index: 1;
	font-weight: 700;
	color: var(--color-pf-mark-on-fg, #ffffff);
	background: var(--color-pf-mark-on-bg, var(--color-link));
	border-color: var(--color-pf-mark-on-bg, var(--color-link));
}
.pf-toolbar .pfront-mark-btn.is-active:hover {
	background: var(--color-pf-mark-on-bg, var(--color-link));
	color: var(--color-pf-mark-on-fg, #ffffff);
}
body.pfront-list-marks-matrix .pfront-marks-matrix-wrap {
	overflow: auto;
	max-width: 100%;
	border: 1px solid var(--color-border, #ccc);
	margin: 0 0 1.25rem;
}
body.pfront-list-marks-matrix .pfront-marks-matrix {
	border-collapse: separate;
	border-spacing: 0;
	width: max-content;
	min-width: 100%;
	font-size: 0.8rem;
	line-height: 1.3;
}
body.pfront-list-marks-matrix .pfront-marks-matrix th,
body.pfront-list-marks-matrix .pfront-marks-matrix td {
	border-bottom: 1px solid var(--color-border, #ccc);
	border-right: 1px solid var(--color-border, #ccc);
	padding: 0.35rem 0.45rem;
	vertical-align: middle;
	background: var(--color-surface, #fff);
}
body.pfront-list-marks-matrix .pfront-marks-matrix thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	font-weight: 600;
	white-space: nowrap;
	background: var(--color-surface, #fff);
}
body.pfront-list-marks-matrix .pfront-marks-matrix-pf {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 11rem;
	max-width: 14rem;
	text-align: left;
	background: var(--color-surface, #fff);
}
body.pfront-list-marks-matrix thead .pfront-marks-matrix-pf {
	z-index: 3;
}
body.pfront-list-marks-matrix .pfront-marks-matrix-sum {
	text-align: center;
	min-width: 2.85rem;
	font-variant-numeric: tabular-nums;
}
body.pfront-list-marks-matrix .pfront-marks-matrix-user {
	text-align: center;
	min-width: 4.5rem;
	max-width: 7rem;
	font-weight: 500;
}
body.pfront-list-marks-matrix .pfront-marks-matrix-user.is-self,
body.pfront-list-marks-matrix .pfront-marks-matrix-cell.is-self {
	background: color-mix(in srgb, var(--color-link) 12%, var(--color-surface, #fff));
}
body.pfront-list-marks-matrix .pfront-marks-matrix-self-tag {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 600;
	opacity: 0.75;
}
body.pfront-list-marks-matrix .pfront-marks-matrix-pf-link {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	text-decoration: none;
	color: inherit;
}
body.pfront-list-marks-matrix .pfront-marks-matrix-pf-link img {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: cover;
	flex: none;
	border: 1px solid var(--color-pf-media-border, #ccc);
	background: var(--color-pf-media-bg, #fafafa);
}
body.pfront-list-marks-matrix .pfront-marks-matrix-pf-name {
	font-weight: 400;
	color: var(--color-text-muted);
	font-size: 0.72rem;
}
body.pfront-list-marks-matrix .pfront-marks-matrix-cell {
	text-align: center;
	font-weight: 600;
}
body.pfront-list-marks-matrix .pfront-marks-matrix-cell.is-good {
	color: var(--color-pf-mark-on-bg, var(--color-link));
}
body.pfront-list-marks-matrix .pfront-marks-matrix-cell.is-neutral {
	color: var(--color-text);
}
body.pfront-list-marks-matrix .pfront-marks-matrix-cell.is-bad {
	color: var(--color-error, #c00);
}
body.pfront-list-marks-matrix .pfront-marks-matrix-cell.is-none {
	color: var(--color-text-muted);
	font-weight: 400;
	opacity: 0.55;
}
body.pfront-list-marks-matrix .pfront-marks-sort-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.55rem;
	margin: 0 0 0.55rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--color-text-muted);
}
body.pfront-list-marks-matrix .pfront-marks-sort-text {
	color: var(--color-text);
	font-weight: 600;
}
body.pfront-list-marks-matrix .pfront-marks-sort-hint {
	font-size: 0.72rem;
	opacity: 0.8;
}
body.pfront-list-marks-matrix .pfront-marks-sort-chips {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	align-items: center;
}
body.pfront-list-marks-matrix .pfront-marks-sort-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0.15rem 0.45rem;
	border: 1px solid var(--color-border-control);
	border-radius: 0;
	background: var(--color-surface, #fff);
	color: var(--color-text);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: element;
	touch-action: none;
}
body.pfront-list-marks-matrix .pfront-marks-sort-chip:active {
	cursor: grabbing;
}
body.pfront-list-marks-matrix .pfront-marks-sort-chip:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 1px;
}
body.pfront-list-marks-matrix .pfront-marks-sort-chip.is-dragging {
	opacity: 0.55;
}
body.pfront-list-marks-matrix .pfront-marks-sort-chip.is-drop-target {
	outline: 2px solid var(--color-link);
	outline-offset: -2px;
}
body.pfront-list-marks-matrix .pfront-marks-sort-chip-ord {
	display: inline-grid;
	place-items: center;
	min-width: 1rem;
	font-size: 0.65rem;
	opacity: 0.7;
}
body.pfront-list-marks-matrix .pfront-marks-sort-head {
	position: relative;
	display: inline-block;
	padding-right: 0.85rem;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}
body.pfront-list-marks-matrix .pfront-marks-sort-head:hover {
	color: var(--color-link);
}

/* pfront の切り替え類と小さな操作の押した間（#MB5V-1 の 2 便目 C16・pfront の確認 P2 / P4）。
   下地は企業の配色から導いた --color-active-bg（C15）。filter の明るさは暗い企業色で見えないので使わない。
   選ばれている印（.is-active）は押しても色を保つ。a. / button. は、選ばれている側が <span> の組のため
   🔴 label も足した（P-1・#RJXC-3・2026-09-16）—— pfront-browse-option は <a> 9 件と <label> 7 件の
      両方で使われていて、a. だけだと list_copy.php の label に当たらなかった */
body.pfront-browse-page a.pfront-browse-option:active:not(.is-active),
body.pfront-browse-page label.pfront-browse-option:active:not(.is-active),
body.pfront-lists-page .pfront-lists-event-vis-opt:active:not(.is-active),
body.pfront-lists-page .pfront-lists-vis-opt:active:not(.is-active),
body.pfront-lists-page .pfront-lists-pf-filter-opt:active:not(.is-active),
body.pfront-list-view a.pfront-filter-option:active:not(.is-active),
body.pfront-list-view button.pfront-pfname-option:active:not(.is-active),
body.pfront-list-edit button.pfront-pfname-option:active:not(.is-active) {
	opacity: 1;
	background: var(--color-active-bg, var(--color-border));
	transform: translateY(1px);
}

body.pfront-lists-page .pfront-lists-expand:active,
body.pfront-lists-page .pfront-lists-delete-btn:active,
body.pfront-list-marks-matrix .pfront-marks-sort-head:active {
	background: var(--color-active-bg, var(--color-border));
	transform: translateY(1px);
}
/* CSS border triangles (mammb-style); idle = both faint, asc/desc = one strong */
body.pfront-list-marks-matrix .pfront-marks-sort-head::before,
body.pfront-list-marks-matrix .pfront-marks-sort-head::after {
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	right: 0.05rem;
	top: 50%;
	border: 4px solid transparent;
	pointer-events: none;
	opacity: 0.22;
}
body.pfront-list-marks-matrix .pfront-marks-sort-head::before {
	border-bottom-color: currentColor;
	margin-top: -9px;
}
body.pfront-list-marks-matrix .pfront-marks-sort-head::after {
	border-top-color: currentColor;
	margin-top: 1px;
}
body.pfront-list-marks-matrix .pfront-marks-sort-head.is-sort-asc::before,
body.pfront-list-marks-matrix .pfront-marks-sort-head.is-sort-desc::after {
	opacity: 1;
}
body.pfront-list-marks-matrix .pfront-marks-sort-head.is-sort-asc::after,
body.pfront-list-marks-matrix .pfront-marks-sort-head.is-sort-desc::before {
	opacity: 0.18;
}
body.pfront-list-view .pfront-list-grid .pfront-list-meta {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
body.pfront-list-view .pfront-list-memos {
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
}

@media (min-width: 480px) {
	.auth-card {
		padding: 2rem;
	}
	body.pfront-list-view .auth-card {
		padding: 0.75rem 1rem 1.25rem;
	}
}

.auth-header {
	margin-bottom: 1.25rem;
}

.auth-brand {
	margin: 0 0 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-accent);
	text-transform: none;
}

.auth-subtitle {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.auth-title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

.auth-body > *:first-child {
	margin-top: 0;
}

.auth-lead,
.auth-message {
	margin: 0 0 var(--auth-gap);
	color: var(--color-text);
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: var(--auth-gap);
}

.auth-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.auth-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
}

.auth-input-row,
.auth-otp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.auth-input {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	font: inherit;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border-control);
	border-radius: var(--auth-radius);
}

.auth-input-row > .auth-input,
.auth-otp-row > .auth-input {
	flex: 1 1 12rem;
	width: auto;
}

.auth-input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-focus);
}

.auth-otp-input {
	flex: 1 1 auto;
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.15em;
	text-align: center;
	max-width: 12rem;
}

.auth-code {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	color: var(--color-accent);
}

.auth-meta {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-text-muted);
}

.auth-error {
	margin: 0 0 var(--auth-gap);
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	color: var(--color-error);
	background: rgba(204, 0, 51, 0.08);
	border: 1px solid rgba(204, 0, 51, 0.25);
	border-radius: var(--auth-radius);
}

/* 下地と枠はエラーの色から混ぜる（企業の配色は --color-error を地に合わせて導く・C18 D3）。
   企業の配色の無い画面ではダークの --color-error が rgb(255, 145, 165) なので、いままでと同じ色 */
html[data-theme="dark"] .auth-error {
	background: color-mix(in srgb, var(--color-error) 14%, transparent);
	border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
}

.auth-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0.25rem;
}

.auth-btn-primary,
.auth-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--auth-radius);
	cursor: pointer;
	border: 1px solid var(--color-border-control);
	white-space: nowrap;
}

.auth-btn-primary {
	color: var(--color-accent-text);
	background: var(--color-accent);
	border-color: var(--color-accent);
}

.auth-btn-primary:hover {
	filter: brightness(1.05);
}

.auth-btn-primary:disabled,
.auth-btn-ghost:disabled,
.auth-btn-primary.is-disabled,
.auth-btn-ghost.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	filter: none;
	box-shadow: none;
}

/* disabled な button 自体はブラウザがカーソルを無視することがあるため、親で進入禁止を出す */
.auth-maint-blocked-wrap {
	display: inline-flex;
	align-items: center;
	cursor: not-allowed;
}

.auth-maint-blocked-wrap.auth-landing-btn-wrap {
	display: flex;
	width: 100%;
}

.auth-maint-blocked-wrap.auth-landing-btn-wrap > .auth-landing-btn {
	width: 100%;
}

.auth-maint-blocked-wrap > .auth-btn-primary:disabled,
.auth-maint-blocked-wrap > .auth-btn-ghost:disabled,
.auth-maint-blocked-wrap > .auth-input:disabled {
	pointer-events: none;
	cursor: inherit;
}

.auth-btn-primary:disabled,
.auth-btn-primary.is-disabled {
	color: var(--color-text-muted, #6b7280);
	background: var(--color-bg-muted, #e5e7eb);
	border-color: var(--color-border-control, #d1d5db);
}

.auth-btn-ghost:disabled,
.auth-btn-ghost.is-disabled {
	color: var(--color-text-muted, #6b7280);
	background: transparent;
	border-color: var(--color-border-control, #d1d5db);
}

.auth-btn-primary:disabled:hover,
.auth-btn-ghost:disabled:hover {
	filter: none;
	border-color: var(--color-border-control, #d1d5db);
	color: var(--color-text-muted, #6b7280);
}

.auth-input:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	background: var(--color-bg-muted, #f3f4f6);
}

.auth-links .auth-link-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	color: var(--color-text-muted, var(--color-text));
	text-decoration: none;
}

.auth-no-entry {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.35em;
	vertical-align: -0.15em;
	line-height: 0;
}

.auth-no-entry svg {
	display: block;
	flex-shrink: 0;
}

.auth-btn-primary .auth-no-entry,
.auth-btn-ghost .auth-no-entry,
.auth-link-disabled .auth-no-entry {
	opacity: 1;
}

.auth-btn-ghost {
	color: var(--color-text);
	background: transparent;
	border-color: var(--color-border-control);
}

/* ダークの文字は変数で（直書きの gray-100 だと、明るい企業の配色 × ダークで白い地にほぼ白い文字になる・#MB5V-1 の 2 便目 C18 D1）。
   ダークの --color-text は auth / afront / rfront / mfront とも gray-100 ＝ 企業の配色の無い画面の見た目は変わらない */
html[data-theme="dark"] .auth-btn-ghost,
html[data-theme="dark"] .auth-links a,
html[data-theme="dark"] .auth-landing-foot a {
	color: var(--color-text);
	border-color: var(--color-border-control);
}

html[data-theme="dark"] .resume-text-save.is-over .auth-btn-ghost,
html[data-theme="dark"] .resume-text-save.is-over #btn_back {
	color: rgb(20, 20, 20);
	-webkit-text-fill-color: rgb(20, 20, 20);
	background: #ffffff;
	border-color: rgb(150, 150, 160);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .auth-btn-ghost,
	html:not([data-theme="light"]) .auth-links a,
	html:not([data-theme="light"]) .auth-landing-foot a {
		color: var(--color-text);
		border-color: var(--color-border-control);
	}

	html:not([data-theme="light"]) .resume-text-save.is-over .auth-btn-ghost,
	html:not([data-theme="light"]) .resume-text-save.is-over #btn_back {
		color: rgb(20, 20, 20);
		-webkit-text-fill-color: rgb(20, 20, 20);
		background: #ffffff;
		border-color: rgb(150, 150, 160);
	}
}

/* 押している間とキーボードの枠（#4MEU-4 / #22QZ-1）。disabled には付けない */
.auth-btn-primary:active:not(:disabled):not(.is-disabled),
.auth-btn-ghost:active:not(:disabled):not(.is-disabled) {
	transform: translateY(1px);
	filter: brightness(0.92);
}

.auth-btn-primary:focus-visible,
.auth-btn-ghost:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* hover は下地の色だけで示す。枠と文字の色は変えない（明暗・部品で揃える・#MB5V-1 の画面の確認 ①・#VXSY-1 の 2 甲 / 3 甲）。
   以前はライトで枠と文字を赤、ダークも同じ赤にしていた（ダークの赤は暗い地で読みにくい）。
   選ばれている印（pfront の .pfront-mark-btn.is-active）と押せないものには付けない */
.auth-btn-ghost:hover:not(:disabled):not(.is-disabled):not(.is-active) {
	background: var(--color-hover-bg);
}

.auth-links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.auth-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	border: 1px solid var(--color-border-control);
	border-radius: var(--auth-radius);
	background: transparent;
}

.auth-links a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	text-decoration: none;
}

/* registration stepper */

.auth-stepper {
	margin: 0 0 1.25rem;
	overflow-x: hidden;
}

.auth-stepper-list {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: min-content;
}

.auth-stepper-item {
	flex: 0 0 auto;
	min-width: 5.5rem;
	max-width: 8rem;
	padding: 0.5rem 0.625rem;
	font-size: 0.6875rem;
	line-height: 1.35;
	text-align: center;
	color: var(--color-text-muted);
	background: var(--color-bg);
	border: 1px solid var(--color-border-control);
	border-radius: var(--auth-radius);
}

.auth-stepper-item.is-current {
	color: var(--color-text);
	background: rgba(204, 0, 51, 0.1);
	border-color: var(--color-accent);
	font-weight: 600;
}

.auth-stepper-item.is-done {
	color: var(--color-text);
	border-color: var(--color-border-control);
}

@media (min-width: 640px) {
	.auth-stepper {
		overflow-x: visible;
	}

	.auth-stepper-list {
		min-width: 0;
		width: 100%;
	}

	.auth-stepper-item {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}
}

.auth-stepper-num {
	display: block;
	font-weight: 700;
	margin-bottom: 0.125rem;
}

.auth-stepper-label {
	display: block;
}

/* list create stepper（長いラベル） */
.plist-stepper .auth-stepper {
	margin-bottom: 0.5rem;
}
.plist-stepper .auth-stepper-item {
	max-width: 12rem;
	min-width: 6.5rem;
}
.plist-stepper-note {
	margin: 0 0 1rem;
}
/* リストを開いてからの他の方の変更（#86B5-1・plist_render_changes_box）。pfront・rfront・mfront 共通 */
.plist-changes {
	margin: 0.75rem 0 1rem;
	padding: 0.5rem 0.9rem;
	border: 2px solid var(--color-accent);
	border-radius: 6px;
	background: var(--color-surface);
	color: var(--color-text);
}
.plist-changes-title {
	cursor: pointer;
	font-weight: 700;
}
.plist-changes-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}
.plist-changes-item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	padding: 0.25rem 0;
	border-top: 1px solid var(--color-border);
}
.plist-changes-op {
	flex: 0 0 5.5em;
	font-weight: 700;
}
.plist-changes-item.is-remove .plist-changes-op,
.plist-changes-item.is-auto .plist-changes-op {
	color: var(--color-error);
}
.plist-changes-name {
	flex: 1 1 14em;
	min-width: 0;
	overflow-wrap: anywhere;
}
.plist-changes-who,
.plist-changes-when {
	color: var(--color-text-muted);
	white-space: nowrap;
}
/* 取り寄せの帯（#K4XQ-1 段 A・plist_render_live_band）。3 front 共通 */
.plist-live-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0.5rem 0 0.75rem;
	padding: 0.45rem 0.9rem;
	border: 2px solid var(--color-accent);
	border-radius: 6px;
	background: var(--color-surface);
	color: var(--color-text);
	font-weight: 700;
}
.plist-live-band[hidden] {
	display: none;
}
/* rfront・mfront の選ぶ画面で、外す予定の追加済み（C-026 の直し 5・plist_render_picker_state_script） */
.mfront-pf-card.is-unpicking,
.dfront-browse-text-row.is-unpicking {
	outline: 2px dashed var(--color-error);
	outline-offset: -2px;
}
.plist-live-band-reload {
	padding: 0.25rem 0.9rem;
	border: 1px solid var(--color-accent);
	border-radius: 4px;
	background: var(--color-accent);
	color: var(--color-accent-text, #fff);
	font: inherit;
	cursor: pointer;
}
@media (min-width: 640px) {
	.plist-stepper .auth-stepper-item {
		max-width: none;
		min-width: 0;
	}
}

/* landing */

.auth-landing-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.auth-landing-btn {
	width: 100%;
	text-align: center;
}

.auth-landing-foot {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	text-align: center;
}

.auth-landing-foot a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	border: 1px solid var(--color-border-control);
	border-radius: var(--auth-radius);
	background: transparent;
}

.auth-landing-foot a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* GEEQ header/footer */

.geeq-header {
	flex: 0 0 auto;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border-control);
	box-shadow: 0 1px 0 var(--color-border);
}

.geeq-header-inner {
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.geeq-header-left {
	display: flex;
	align-items: center;
}

.geeq-logo-link {
	display: inline-flex;
	align-items: center;
}

html[data-theme="dark"] .geeq-logo-link {
	background: var(--qfps-white);
	padding: 0.25rem 0.5rem;
	border-radius: 0;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .geeq-logo-link {
		background: var(--qfps-white);
		padding: 0.25rem 0.5rem;
		border-radius: 0;
	}
}

.geeq-logo-img {
	height: 32px;
	width: auto;
	display: block;
}

.geeq-tagline {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-text-muted);
}

@media (max-width: 639px) {
	.geeq-tagline {
		display: none;
	}
}

.geeq-footer {
	flex: 0 0 auto;
	padding: 0.5rem 1.25rem 1.25rem;
	background: transparent;
	color: var(--color-text-muted);
	text-align: center;
}

.geeq-footer-divider {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 0 0 0.75rem;
}

.geeq-footer-copy {
	margin: 0;
	font-size: 0.8125rem;
}

/* site modifiers (title copy only; colors shared) */

.auth-site-afront .auth-brand::before { content: none; }
.auth-site-mfront .auth-brand::before { content: none; }
.auth-site-pfront .auth-brand::before { content: none; }

/* registration wizard forms */

.auth-reg-form {
	gap: 1.25rem;
}

.auth-reg-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.auth-reg-section-title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
}

.auth-field-checkbox {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border-control);
	border-radius: var(--auth-radius);
}

.auth-field-checkbox a {
	display: block;
	color: var(--color-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	padding-bottom: 0.25rem;
}

.auth-field-checkbox a:hover {
	color: var(--color-accent);
}

/* 押している間（#VXSY-1 の 4 乙） */
.auth-field-checkbox a:active {
	color: var(--color-link-active);
}

.auth-field-checkbox label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-top: 0.25rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
	font-size: 0.9375rem;
	cursor: pointer;
}

.auth-field-checkbox input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	flex: 0 0 auto;
	accent-color: var(--color-accent);
	cursor: pointer;
}

.auth-reg-form table,
.auth-reg-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: 0;
}

.auth-reg-form th,
.auth-reg-table th {
	text-align: left;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0 0 0.5rem;
	vertical-align: top;
	white-space: normal;
}

.auth-reg-form td,
.auth-reg-table td {
	padding: 0 0 1rem;
	font-size: 0.9375rem;
	vertical-align: top;
}

.auth-reg-stack {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.auth-reg-line {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.auth-reg-sublabel {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

.auth-reg-cell.is-invalid {
	padding: 0.75rem;
	border-radius: var(--auth-radius);
	background: rgba(204, 0, 51, 0.08);
	border: 1px solid rgba(204, 0, 51, 0.25);
}

html[data-theme="dark"] .auth-reg-cell.is-invalid {
	background: rgba(204, 0, 51, 0.15);
}

.auth-reg-table tr.is-hidden {
	display: none;
}

.auth-reg-msg {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-error);
}

.auth-reg-form input[type="text"],
.auth-reg-form input[type="email"],
.auth-reg-form input[type="password"],
.auth-reg-form input[type="tel"],
.auth-reg-form input[type="date"],
.auth-reg-form input[type="file"],
.auth-reg-form textarea,
.auth-reg-form select {
	width: 100%;
	max-width: 100%;
	min-height: 2.5rem;
	padding: 0.375rem 0.625rem;
	font: inherit;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border-control);
	border-radius: var(--auth-radius);
}

.auth-reg-form .auth-input-row input {
	flex: 1 1 12rem;
	width: auto;
}

.auth-reg-form textarea {
	min-height: 6rem;
	resize: vertical;
	line-height: 1.5;
}

.auth-reg-form .auth-field-note {
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.auth-reg-form .auth-field-hint {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-text-muted);
}

.auth-reg-form .auth-field-hint.is-error {
	color: var(--color-error);
}

.auth-reg-form input:focus,
.auth-reg-form select:focus,
.auth-reg-form textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-focus);
}

.auth-reg-form .auth-actions {
	margin-top: 0.5rem;
}

.auth-reg-form .auth-actions form {
	display: contents;
}

.auth-reg-form button[type="submit"],
.auth-reg-form #id_submit,
.auth-reg-form #btn_submit {
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	font: inherit;
	font-weight: 600;
	color: var(--color-accent-text);
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--auth-radius);
	cursor: pointer;
}

/* 見た目の指定はそのまま、詳細度を .auth-reg-form の (0,1,0) だけにする。
   ID (1,1,0) が .auth-btn-ghost の hover と :active の色を全部潰していた（#MB5V-1 の画面の確認 ③） */
.auth-reg-form :where(#id_return, #btn_back, #id_btn, #zip2kct, .auth-toggle-passwd) {
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	font: inherit;
	font-weight: 600;
	color: var(--color-text);
	background: transparent;
	border: 1px solid var(--color-border-control);
	border-radius: var(--auth-radius);
	cursor: pointer;
}

.auth-reg-form #id_msg {
	margin: 0;
	color: var(--color-error);
	font-size: 0.9375rem;
}

@media (max-width: 479px) {
	.auth-reg-form table,
	.auth-reg-table,
	.auth-reg-form tbody,
	.auth-reg-table tbody,
	.auth-reg-form tr,
	.auth-reg-table tr,
	.auth-reg-form th,
	.auth-reg-table th,
	.auth-reg-form td,
	.auth-reg-table td {
		display: block;
		width: 100%;
	}

	.auth-reg-form th,
	.auth-reg-table th {
		padding-bottom: 0.375rem;
	}
}

/* PC: label + control on one row (phone keeps stacked) */
@media (min-width: 640px) {
	.auth-field:not(.auth-field-checkbox) {
		display: grid;
		grid-template-columns: var(--auth-label-col) minmax(0, 1fr);
		column-gap: 1rem;
		row-gap: 0.375rem;
		align-items: center;
	}

	.auth-field:not(.auth-field-checkbox):has(textarea) {
		align-items: start;
	}

	.auth-field:not(.auth-field-checkbox) > .auth-label {
		grid-column: 1;
		margin: 0;
		/* 🔴 ラベルを入力欄の側へ寄せる（#RJXC-8 甲・2026-09-16 ユーザー判断・M-10）。
		   ラベル列は 7.5rem 固定なので、短いラベル（「日数」）は左端に置かれ、
		   入力欄から約 100px 離れて対応が読めなかった。
		   ⚠️ これは PC（640px 以上・2 列）のときだけ。狭い画面は縦積みなので効かない。
		   🔴 52 画面が変わる。ユーザーの指示は「右寄せにして状況を確認したい。
		      問題が出る場合は個別対処（auth-label-left を新設するとか）」——
		      **その class はまだ作らない**（問題が出る場所が決まっていないため）。 */
		text-align: right;
	}

	.auth-field:not(.auth-field-checkbox) > :not(.auth-label) {
		grid-column: 2;
		min-width: 0;
		width: auto;
		max-width: none;
	}

	.auth-field:not(.auth-field-checkbox) > .auth-field-hint,
	.auth-field:not(.auth-field-checkbox) > .auth-field-note {
		margin: 0;
	}

	.auth-reg-line {
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
	}

	.auth-reg-line > .auth-reg-sublabel {
		flex: 0 0 var(--auth-sublabel-col);
		margin: 0;
	}

	.auth-reg-line > input,
	.auth-reg-line > select,
	.auth-reg-line > textarea,
	.auth-reg-line > .auth-input-row {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		max-width: none;
	}

	.auth-reg-form table.auth-reg-table--split th,
	.auth-reg-table.auth-reg-table--split th {
		width: var(--auth-label-col);
		padding-right: 1rem;
		padding-top: 0.55rem;
		vertical-align: top;
	}

	.auth-reg-form table.auth-reg-table--split td,
	.auth-reg-table.auth-reg-table--split td {
		padding-bottom: 1.25rem;
	}

	.auth-reg-form table.auth-reg-table--split td.auth-reg-stack,
	.auth-reg-table.auth-reg-table--split td.auth-reg-stack {
		padding-top: 0;
	}
}

/* Unit MOTD banner (M-MOTD) */
.qfps-motd {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0.75rem auto 0;
	padding: 0.75rem 1rem;
	max-width: min(56rem, calc(100% - 2rem));
	border: 1px solid var(--color-border-control);
	border-radius: var(--auth-radius, 0.5rem);
	background: var(--color-surface, #fff);
	box-sizing: border-box;
}

.qfps-motd--info {
	border-color: color-mix(in srgb, var(--color-link, #0052cc) 45%, var(--color-border));
	background: color-mix(in srgb, var(--color-link, #0052cc) 8%, var(--color-surface, #fff));
}

.qfps-motd--warning,
.qfps-motd--override {
	border-color: var(--color-error, var(--qfps-red, #c03));
	background: color-mix(in srgb, var(--color-error, var(--qfps-red, #c03)) 12%, var(--color-surface, #fff));
}

.qfps-motd-body {
	flex: 1 1 12rem;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--color-text);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.qfps-motd-label {
	font-weight: 600;
	margin-right: 0.35em;
}

.qfps-motd-dismiss {
	flex: 0 0 auto;
	margin: 0;
}

.qfps-motd-dismiss-btn {
	font: inherit;
	font-size: 0.8125rem;
	padding: 0.25rem 0.6rem;
	color: var(--color-text-muted);
	background: transparent;
	border: 1px solid var(--color-border-control);
	border-radius: var(--auth-radius, 0.5rem);
	cursor: pointer;
}

.mfront-main > .qfps-motd,
.afront-main > .qfps-motd,
.auth-card > .qfps-motd {
	max-width: none;
	width: 100%;
	margin: 0 0 1rem;
	box-sizing: border-box;
}

.qfps-edu-badge{display:inline-block;margin:0 0.2rem 0.2rem 0;padding:0.1rem 0.35rem;border:1px solid #888;border-radius:2px;font-size:0.75rem;line-height:1.2;}
.qfps-edu-badges{display:inline;}