@charset "UTF-8";
/* build: 2026-09-12 08:47Z  control-sizes */
/*
 * ------------------------------------------------------------------
 * 【折り返す幅は 1 つだけ】900px
 * ------------------------------------------------------------------
 *
 * 前は 700 / 720 / 760 / 820 / 860 / 900 / 1000 の 7 種類あった。
 * 部品ごとに違う幅で折り返すと、その間の幅では
 * **ある部品はスマホの形、別の部品は PC の形**になる。
 * どの幅で見てもどこかがちぐはぐで、「統一感がない」と感じる。
 *
 * 中身はどれも「2 列が入らないから積む」で同じ話。幅を分ける理由が無い。
 *
 * 新しく足すときも 900px を使うこと。
 * どうしても別の幅が要るなら、なぜ要るのかをここに書き足す。
 * （CSS の変数は @media の中では使えないので、決めごとは註釈で持つ）
 */

/* ====================================================================
 *	Seedance Studio ── 見た目はこの 1 枚だけ
 *	ここを直せば全画面に効く。他に読んでいる CSS は無い。
 *
 *		1. 土台	 Next.js 版から持ってきた素の組み立て。触ることは少ない
 *		2. 上書き この道具のための追加と、配色。ふだん直すのはこちら
 *
 *	後に書いたほうが勝つので、2 は 1 の下に置く。順番を入れ替えないこと。
 * ==================================================================== */

/* ====================================================================
 *	1. 土台
 *	素の組み立て。画面の骨格・ボタン・表・入力欄。
 * ==================================================================== */

/* ------------------------------------------------------------------
	 デザイントークン
	 白地・黒文字。生成物のサムネイルが主役なので、UI は後ろに下がらせる。
	 面の区別は色ではなく罫線と余白で付ける。
------------------------------------------------------------------ */

:root {
	/*
	 * 【色はここに書かない】
	 * 色はこのファイルの後ろ（「色に役割を 1 つずつ持たせる」の節）で
	 * 決めている。前はここにも 14 個あり、後ろが勝つので
	 * **ここを直しても何も変わらなかった**。
	 * ここに残すのは、後ろで決めていない書体と角丸だけ。
	 */
	--mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
	--sans: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;

	/*
	 * 欄の「名前の列」。表（.form-table）と .field の両方がここから取る。
	 * 別々に持つと、隣り合う枠で列の位置がずれる。
	 *
	 * 152px は、日本語でいちばん長い名前（「ナレーション・セリフ」）が
	 * 折り返さない幅。実測で決めた。
	 */
	--label-col: 152px;
	--label-gap: 16px;

	/*
	 * 【角は、面の大きさに合わせて丸める】
	 * 4/8/12 は全体に角が立って見えた。札は少し、箱はしっかり丸める。
	 */
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 14px;

	/* 影は 2 段だけ。面が浮くぶんと、押せるものが持ち上がるぶん */
	--shade-1: 0 1px 2px rgba(28, 25, 23, 0.04), 0 1px 3px rgba(28, 25, 23, 0.03);
	--shade-2: 0 2px 4px rgba(28, 25, 23, 0.06), 0 4px 12px rgba(28, 25, 23, 0.05);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--canvas);
	color: var(--ink);
	font-family: auto;
	font-size: 14px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

/* ------------------------------------------------------------------
	 スレート表記
	 撮影のカチンコに由来する表記。ショット番号は実際に順序情報なので
	 数字ラベルを使う意味がある。
------------------------------------------------------------------ */

.slate {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* ------------------------------------------------------------------
	 レイアウト
------------------------------------------------------------------ */

.app-header {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 0 20px;
	height: 52px;
	border-bottom: 1px solid var(--line);
	background: var(--panel);
	position: sticky;
	top: 0;
	z-index: 20;
}

.app-header .wordmark {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}

/* 朱の印。入口を目で拾えるようにする */
.wordmark-mark {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: var(--brand);
	color: var(--brand-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
}

@media (max-width: 900px) {
	.wordmark-text { display: none; }
}

/*
 * 全画面の上に出る帯。
 * 字間 0.5rem（7px）は開きすぎて「日 本 直 販 の」と 1 字ずつ読ませていた。
 * 色も直書きで、token の --accent（#2f5cff）と微妙に違う青だった。
 */
.lp-band {
	margin: 0;
	padding: 7px;
	/*
	 * 【説明文に原色を使わない】
	 * 前は地が --accent の原色で、画面でいちばん強い面がこの 1 行だった。
	 * 青は「押せる」に取ってある色なのに、ここは押せない。
	 * 薄い面に落とし、題より弱くする。
	 */
	background: var(--panel-raised);
	border-bottom: 1px solid var(--line);
	color: var(--ink-faint);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-align: center;
}

.app-nav {
	display: flex;
	gap: 2px;
}

/*
 * 【行き先は、絵と字の組で置く】
 * 字だけで並ぶとどれも同じ重さに見えて、毎回読んでから選ぶことになる。
 * 絵が付けば形で拾える（`Http\Icon`）。
 */
.app-nav a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 11px;
	border-radius: var(--r-sm);
	color: var(--ink-muted);
	font-size: 13px;
	transition: background 120ms ease, color 120ms ease;
}

.app-nav a .icon {
	flex: none;
	opacity: 0.72;
}

.app-nav a:hover {
	color: var(--ink);
	background: var(--panel-sunk);
}

.app-nav a:hover .icon { opacity: 1; }

/*
 * 【いま居るところは朱】
 * 押せる色（墨）と分ける。同じ色だと、操作と状態が読み分けられない。
 */
.app-nav a[data-current="true"] {
	color: var(--brand);
	background: var(--brand-soft);
	font-weight: 600;
}

.app-nav a[data-current="true"] .icon { opacity: 1; }

.app-main {
	/*
	 * 【割合ではなく実寸で止める】
	 * 80% だと画面が広いほど中身も広がる。2560px の画面では 2048px まで
	 * 伸びて、表の 1 行が端から端まで走り、目が戻れない。
	 */
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px;
}

/* 文章だけの画面はもう少し狭く */
.app-main.narrow { max-width: 720px; }

/*
 * 見出しの帯。左に表題と説明、右に操作。
 *
 * 【左が潰れていた】
 * 左の塊に伸びる指定が無く、中身の幅で決まっていた。そこへ
 * `.page-head p { max-width: 60ch }` が効いて、**説明も注意書きも
 * 60ch で止まり、帯全体が下の中身より極端に狭くなっていた。**
 * PC で見てもスマホのような幅になるのはこれ。
 */
.page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

/* 左は余りを取る。min-width:0 が無いと中身の最小幅で押し返される */
.page-head > :first-child {
	flex: 1 1 420px;
	min-width: 0;
}

/* 右の操作は縮めない */
/*
 * 【1 つしか無いときは「最後」にしない】
 * 子が 1 つだけの画面（サインイン・初期設定など）では、その 1 つが
 * :first-child にも :last-child にも当たる。後に書いたこちらが勝ち、
 * flex: 0 0 auto になって**中身の幅まで縮む**。
 * 見出しが 176px、隣の入力欄は 646px という状態が出ていた。
 *
 * 右に置くボタンは「2 つ目以降の最後」だけ。
 */
.page-head > :last-child:not(:first-child) { flex: 0 0 auto; }

.page-head h1 {
	margin: 4px 0 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.page-head p {
	margin: 6px 0 0;
	color: var(--ink-muted);
}

/*
 * 注意書きは枠のある箱なので、字の読みやすさで幅を止めない。
 * 60ch で止めると、下の中身より狭い箱が浮いて見える。
 */
.page-head .notice { max-width: none; }

/* ------------------------------------------------------------------
	 パネル・カード
------------------------------------------------------------------ */

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 16px;
}

.grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
}

.card {
	display: block;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 14px 16px;
	transition: border-color 0.15s ease, background 0.15s ease;
	box-shadow: 1px 1px 1px 0px rgb(0 0 0 / 20%);
}

.card:hover {
	border-color: var(--line-strong);
	background: var(--panel-raised);
}

.card h3 {
	margin: 6px 0 4px;
	font-size: 15px;
	font-weight: 600;
}

.card p {
	margin: 0;
	color: var(--ink-muted);
	font-size: 13px;
}

.card p.hint {
	margin: 0;
	padding:0;
	font-size: 11px;
	color:#666;
}

/* ------------------------------------------------------------------
	 フィルムストリップ（このアプリの中心）
------------------------------------------------------------------ */

.strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 12px 12px 16px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	scrollbar-width: thin;
}

.strip-item {
	flex: 0 0 200px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--canvas);
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	padding: 0;
	color: inherit;
	font: inherit;
	transition: border-color 0.15s ease;
}

.strip-item:hover {
	border-color: var(--line-strong);
}

.strip-item[data-selected="true"] {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}

.strip-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background:
		repeating-linear-gradient(
			45deg,
			rgba(0, 0, 0, 0.03) 0 6px,
			transparent 6px 12px
		),
		var(--panel-raised);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.strip-frame img,
.strip-frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.strip-frame .placeholder {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	color: var(--ink-faint);
}

.strip-meta {
	padding: 8px 10px 10px;
}

.strip-meta .title {
	font-size: 13px;
	margin: 3px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.strip-add {
	flex: 0 0 92px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-md);
	background: transparent;
	color: var(--ink-muted);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
}

.strip-add:hover {
	color: var(--ink);
	border-color: var(--accent);
}

/* ------------------------------------------------------------------
	 ステータス
------------------------------------------------------------------ */

.status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.status .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.status[data-state="running"],
.status[data-state="queued"] {
	color: var(--render);
}

.status[data-state="running"] .dot {
	animation: pulse 1.4s ease-in-out infinite;
}

.status[data-state="succeeded"] {
	color: var(--done);
}

.status[data-state="failed"],
.status[data-state="blocked"] {
	color: var(--blocked);
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------
	 フォーム
------------------------------------------------------------------ */

/*
 * 【間を広げる】
 * 欄の高さは 38px。間が 12px だと、欄どうしが近すぎて
 * どこまでが 1 つの欄か読み取りにくい。高さの半分ほどあけると落ち着く。
 */
/*
 * 欄。名前を左の列、中身を右の列に置く。
 *
 * 【なぜ縦に積まないか】
 * 名前を中身の真上に載せると、行ごとに名前の長さぶん
 * 中身の左端がずれる。目が縦に線を追えないので、
 * 「どこに何があるか」を毎回探すことになる。
 *
 * 列にすれば、全部の欄で中身が同じ位置から始まる。
 *
 * 【<label> のまま包める】
 * 表の th/td だと label が行をまたげないので for/id で結ぶ必要がある。
 * こちらは囲みが label のままなので、名前を押せば中身に飛ぶ。
 */
.field {
	display: grid;
	/*
	 * 名前の列は minmax で持つ。枠が 152px + 中身 に足りないとき、
	 * ただの 152px だと中身がはみ出す。minmax なら列のほうが縮む。
	 * 同じ枠の中の欄は同じだけ縮むので、揃いは崩れない。
	 */
	grid-template-columns: minmax(0, var(--label-col)) minmax(0, 1fr);
	column-gap: var(--label-gap);
	row-gap: 6px;
	align-items: start;
}

/*
 * 【並べ方】
 * 既定は 2 列ぶち抜き。名前が無い欄（引き出しだけを置く欄など）は
 * 左を空けても意味が無いので、そのまま全部使う。
 *
 * 名前があるときだけ、名前を 1 列目・その後ろを 2 列目に振る。
 * 「その後ろ」には添え書きも入るので、中身の下に続けて積まれる。
 */
.field > * {
	grid-column: 1 / -1;
}

.field > span:first-child {
	/* grid-column: 1; */
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	/* 中身の字と高さを合わせる。上端で揃えると名前だけ浮く */
	padding-top: 9px;
}

.frame-way .field > span:first-child {
    grid-column: revert-rule;
}



/*
.field > span:first-child ~ * {
	grid-column: 2;
}
*/



/*
 * 【添え書きは名前と同じ字にしない】
 * 前は `.field > span` が全部の span に掛かっていたので、
 * 欄の中の添え書きまで**大文字の等幅 10px**で出ていた。
 * .hint のほうが後ろにあっても、`.field > span` のほうが強い。
 */
.field > span.hint {
	font-family: inherit;
	font-size: 12px;
	letter-spacing: normal;
	text-transform: none;
	padding: 0;
}

/* 隣り合う欄は線で仕切る。1 つの欄の範囲が目で追える
.field + .field {
	padding-top: 16px;
	border-top: 1px solid var(--line);
}
 */
 
 
@media (max-width: 900px) {
	/*
	 * 狭い画面では列に分ける意味が無い。名前に 152px 取ると
	 * 中身が 100px を切る。名前を中身の上に戻す。
	 */
	.field {
		grid-template-columns: minmax(0, 1fr);
	}

	.field > span:first-child,
	.field > span:first-child ~ * {
		grid-column: 1;
	}

	.field > span:first-child {
		padding-top: 0;
	}
}

/*
 * 【型を書き漏らすと、その欄だけ素のまま出る】
 * 前は text と number しか書いていなかった。サインインの
 * パスワード欄が**枠も高さも別物**で出ていた（幅 170px / 高さ 20px、
 * 隣の ID 欄は 646px / 38px）。いちばん最初に見る画面がそれだった。
 *
 * 型を足したら、ここにも足すこと。
 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
textarea,
select {
	width: 100%;
	background: var(--canvas);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink);
	font: inherit;
	/*
	 * 欄の中の余白。7/9 は字が縁に近く、詰まって見えた。
	 * 高さは 38px のまま（上下は行の高さで決まる）。
	 */
	padding: 3px 10px;
	font-size:0.8rem;
}

textarea {
	resize: vertical;
	min-height: 68px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

/*
 * 【縮めるのではなく折り返す】
 * flex-wrap が無いと、入らないぶんは縮んで入る。
 * 選択欄が 71px になり、中の字が読めなくなっていた（実測）。
 * 折り返せば、1 つあたりの幅は保たれる。
 */
/*
 * 【`.row` は無くした】
 * 欄を横に並べる書き方だったが、欄が「名前の列＋中身の列」に
 * なったので、横に並べると**そこだけ中身の左端が揃わない**。
 * 使っている場所を全部ほどいたので、口も消す。
 *
 * 残しておくと、次に欄を足す人が「横に並べる口がある」と読んで使い、
 * その欄だけ揃わなくなる。`tools/view-check.php` でも見ている。
 *
 * `.btn-row` `.thumb-row` `.candidate-row` は別のもの。そのまま。
 */

.check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--ink-muted);
	font-size: 13px;
}

.check input {
	margin-top: 3px;
}

/* ------------------------------------------------------------------
	 ボタン
------------------------------------------------------------------ */

button.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--r-sm);
	border: 1px solid var(--line-strong);
	background: var(--panel-raised);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

button.btn:hover:not(:disabled) {
	border-color: var(--ink-faint);
}

button.btn.primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	margin-top:1rem;
}

button.btn.primary:hover:not(:disabled) {
	filter: brightness(1.1);
}

button.btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.btn-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------------
	 通知
------------------------------------------------------------------ */

.notice {
	border-radius: var(--r-md);
	padding: 10px 12px;
	font-size: 13px;
	border: 1px solid;
	margin-bottom: 12px;
}

/*
 * 直すべきことがある知らせ。
 * 前は color が #ffb3a5（暗い配色のときの名残）で、明るい下地に
 * 淡い朱色の字が乗っていた。ほとんど読めない。地の色を濃くする。
 */
.notice[data-tone="warn"] {
	border-color: rgba(190, 66, 45, 0.35);
	background: rgba(224, 97, 75, 0.08);
	color: #8a2f1c;
}

.notice[data-tone="info"] {
	border-color: var(--line-strong);
	background: var(--panel-raised);
	color: var(--ink-muted);
}

/*
 * 読めばよいだけの知らせ。
 * 「すべて繋がっています」のように、直すことが無いもの。
 * 枠を出すと、直すべき知らせと同じ重さに見える。
 */
.notice[data-tone="quiet"] {
	border-color: transparent;
	background: none;
	padding: 4px 0;
	color: var(--ink-faint);
}

/* ------------------------------------------------------------------
	 編集ペイン
------------------------------------------------------------------ */

.workspace {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	margin-top: 16px;
}

@media (max-width: 900px) {
	.workspace {
		grid-template-columns: minmax(0, 1fr);
	}
}

.preview {
	aspect-ratio: 16 / 9;
	/* 映像・画像の明度を正しく判断できるよう、プレビューの下地だけは中間灰にする */
	background: #2b2f36;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 12px;
}

.preview img,
.preview video {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 16px;
}

.tabs button {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--ink-muted);
	font: inherit;
	font-size: 13px;
	padding: 8px 12px;
	cursor: pointer;
	margin-bottom: -1px;
}

.tabs button[data-active="true"] {
	color: var(--ink);
	border-bottom-color: var(--accent);
}

.empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--ink-muted);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-lg);
}

/* ------------------------------------------------------------------
	 セッションと残高
	 ヘッダに常時出す。生成の直前に残高を探しに行かせない。
------------------------------------------------------------------ */

.session-badge {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

.session-badge .credits {
	font-family: var(--mono);
	font-size: 11px;
	padding: 3px 8px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	color: var(--ink-muted);
}

.session-badge .credits[data-low="true"] {
	color: var(--blocked);
	border-color: var(--blocked);
}

.session-badge .switch {
	font-size: 12px;
	color: var(--ink-faint);
	border-bottom: 1px solid transparent;
}

.session-badge .switch:hover {
	color: var(--ink);
	border-bottom-color: var(--line-strong);
}

/* ------------------------------------------------------------------
	 概要案
------------------------------------------------------------------ */

.tone-bar {
	display: flex;
	height: 6px;
	border-radius: 999px;
	overflow: hidden;
	margin: 12px 0 6px;
	background: var(--panel-raised);
}

.tone-bar span {
	display: block;
	height: 100%;
}

.swatches {
	display: flex;
	gap: 6px;
	margin: 10px 0;
}

.swatches span {
	width: 22px;
	height: 22px;
	border-radius: var(--r-sm);
	border: 1px solid var(--line-strong);
}

.timeline {
	list-style: none;
	margin: 12px 0 4px;
	padding: 0;
	border-left: 1px solid var(--line);
}

.timeline li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 0 6px 12px;
	font-size: 13px;
	color: var(--ink-muted);
}

.hint {
	margin:0;
	font-size: 12px;
	color: var(--ink-faint);
	padding: 0rem;
}

/* ------------------------------------------------------------------
	 管理画面
------------------------------------------------------------------ */

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 12px 0 0;
}

.stats div {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 10px 12px;
}

.stats dt {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.stats dd {
	margin: 4px 0 0;
	font-size: 16px;
	color: var(--ink);
}

/*
 * 表。
 *
 * 【前が揃って見えなかった理由】
 * 1. 右の余白が 0 だった（padding: 7px 10px 7px 0）。隣の列と
 *    字が触れ、どこまでが 1 列なのか読めなかった。
 * 2. 縦の基準が無かった。1 行の中に 1 行の字と 2 行の字と入力欄が
 *    混ざると、既定の baseline でばらばらの高さに落ちる。
 * 3. 狭い画面で入力欄の min-width が効いて、表ごと横にはみ出した。
 *
 * 余白を左右に取り、縦は中央でそろえ、はみ出しは枠の中で流す。
 */
.table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
	font-size: 13px;
}

.table th {
	text-align: left;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 400;
	padding: 8px 12px;
	border-bottom: 1px solid var(--line-strong);
	white-space: nowrap;
	vertical-align: bottom;
}

.table td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--line);
	color: var(--ink-muted);
	vertical-align: middle;
}

/* 端の列だけ余白を外す。表全体が枠の中で浮いて見えるのを防ぐ */
.table th:first-child,
.table td:first-child { padding-left: 0; }
.table th:last-child,
.table td:last-child { padding-right: 0; }

/* 合計など、行そのものを締める行 */
.table tbody tr:last-child td { border-bottom: none; }

.table tr[data-total="true"] td {
	border-top: 1px solid var(--line-strong);
	color: var(--ink);
}

/*
 * 数の列は折り返さない。折り返すと桁が縦にずれて、
 * 大小を目で比べられなくなる。
 *
 * 【中央揃えをやめた】
 * `text-align: center` にしていたので、桁数の違う数が 1 桁ずつ左右に
 * ずれて並び、**縦に見比べられなかった**。金額の列で 382.00 と
 * 1,702.00 の頭が揃わない。数は右に寄せる。
 */
.table .num { white-space: nowrap; text-align: right; }

/*
 * 【縦にまたぐ見出しは上に寄せる】
 * `td` の既定は `vertical-align: middle` なので、3 行にまたがる
 * API キーの名前が**行と行のあいだに浮いて**いた。どの区分の行に
 * かかっているのか読めない。またぐ側は最初の行に揃える。
 */
.table td[rowspan] { vertical-align: top; }

/*
 * 一覧の下に足す入力。区分を 1 つ増やすだけに form を組むと、
 * 表と離れて関係が読めない。表のすぐ下に横一列で置く。
 */
.inline-add {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 12px;
}

/*
 * 文字の欄は幅を決める。決めないと flex の中で伸び切って 1 行を占め、
 * 倍率と釦が次の行へ落ちる。1 つの操作が 2 行に割れて見える。
 */
.inline-add input[type="text"] { width: 260px; }

/* 表が入らない画面では、表だけを横に流す。頁ごと横に動かさない */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * 行の中に置く操作。
 *
 * 【`//` は CSS のコメントではない】
 * ここは一度 `//display: flex;` と書かれていた。CSS に `//` は無く、
 * その 1 行が無効な宣言として丸ごと捨てられる。つまり flex が消え、
 * 入力欄とボタンが縦に落ちてセルが崩れていた。**セル崩れの直接原因。**
 * CSS で消すときは `/* … *\/` を使うこと。
 */
.table .inline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	flex-wrap: nowrap;
}

.table .inline input[type="number"],
.table .inline input[type="text"],
.table .inline select {
	padding: 4px 6px;
	font: inherit;
	font-size: 13px;
	line-height: 1.4;
}

/* 入力欄は伸ばさない。伸びると列幅が中身で決まってしまう */
.table .inline input[type="number"] { width: 76px; flex: 0 0 auto; }
.table .inline input[type="text"] { width: 130px; flex: 0 1 auto; min-width: 0; }
.table .inline select { min-width: 104px; }

/*
 * 【高さをそろえる】
 * 入力欄・選択・ボタンは既定の余白が違うので、並べると 24〜37px と
 * ばらついた。行ごとに高さが変わって、表が波打って見える。
 */
.table .inline input,
.table .inline select,
.table .inline .btn {
	height: 28px;
	box-sizing: border-box;
	line-height: 1;
}

.table .inline .btn {
	flex: 0 0 auto;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
}

.table td[data-negative="true"] {
	color: var(--render);
}

.table code,
.hint code {
	font-family: var(--mono);
	font-size: 11px;
}

.plain-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	color: var(--ink-muted);
	font-size: 13px;
}

.plain-list li {
	padding: 4px 0;
	border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------------
	 スタジオ
	 左が入力、右が結果。生成ボタンには必ず費用を出す。
------------------------------------------------------------------ */

.studio {
	display: grid;
	grid-template-columns: minmax(360px, 520px) 1fr;
	gap: 20px;
	align-items: start;
}

@media (max-width: 900px) {
	.studio {
		grid-template-columns: 1fr;
	}
}

.mode-tabs {
	display: none;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.mode-tab {
	flex: 1 1 auto;
	padding: 8px 12px;
	font-size: 13px;
	font-family: inherit;
	color: var(--ink-muted);
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	cursor: pointer;
}

.mode-tab:hover {
	color: var(--ink);
	border-color: var(--line-strong);
}

.mode-tab.active {
	color: var(--accent-ink);
	background: var(--accent);
	border-color: var(--accent);
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chip {
	padding: 5px 10px;
	font-size: 12px;
	font-family: inherit;
	color: var(--ink-muted);
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
}

.chip:hover {
	color: var(--ink);
	border-color: var(--line-strong);
}

.chip.active {
	color: var(--accent-ink);
	background: var(--accent);
	border-color: var(--accent);
}

.counter {
	display: block;
	margin-top: 4px;
	text-align: right;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--ink-faint);
}

.counter[data-over="true"] {
	color: var(--blocked);
}

.disclosure {
	display: block;
	margin: 4px 0 10px;
	padding: 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: none;
	border: none;
	cursor: pointer;
}

.disclosure:hover {
	color: var(--ink);
}

.generate {
	width: 100%;
	margin-top: 8px;
	padding: 11px;
	font-size: 14px;
}

/*
 * 【新規追加は畳んでおく】
 * 閉じているときはボタン 1 つ。押すと名前の欄が下に出る。
 * summary をボタンに見せるので、既定の三角は消して自前の印を右に置く。
 */
.asset-add {
	margin: 0 0 12px;
}

.asset-add > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	font-size: 13px;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.asset-add > summary::-webkit-details-marker { display: none; }

.asset-add > summary::after {
	content: "＋";
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-faint);
}

.asset-add[open] > summary::after { content: "−"; }

.asset-add > summary:hover {
	border-color: var(--ink-muted);
}

/* 開いた欄は、ボタンに属していることが分かる程度に下げる */
.asset-add > form { margin-top: 8px; }


/*
 * 【まとめて選ぶ】
 * 印の列は詰める。名前より先に印が来るので、広いと表が右へ流れる。
 */
.pick-col {
	width: 34px;
	text-align: center;
}

/*
 * 選んだあとの操作は、表のすぐ下に置く。
 * 離すと、印を付けてから押すまでに画面が動く。
 */
.bulk-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--panel-sunk);
	border-radius: var(--r-md);
}

.bulk-bar > .slate {
	margin-right: 4px;
}

.bulk-bar input[type="number"] { width: 96px; }
.bulk-bar input[type="text"] { flex: 1 1 180px; min-width: 0; }


/* --- 素材の指定 --------------------------------------------------- */

.dropzone {
	padding: 16px;
	text-align: center;
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-md);
	background: var(--panel-raised);
}

.dropzone[data-dragging="true"] {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.dropzone[data-disabled="true"] {
	opacity: 0.5;
}

.dropzone .btn-row {
	justify-content: center;
	align-items: center;
}

/*
 * 【表の桝に入れたときは中央寄せをやめる】
 * 受け皿はもともと単体で置く前提で、中身を中央に寄せていた。
 * 表の桝に入れると、左の列にある欄名は左端、中身だけ真ん中、という
 * 食い違いが起きる。個別生成の「画像を選ぶ」がその状態だった。
 *
 * 桝の中では、名前の列に頭を揃える。
 */
.form-table td > .dropzone {
	padding: 12px;
	text-align: left;
}

.form-table td > .dropzone .btn-row {
	justify-content: flex-start;
}

/* 受け皿と、その下の「保管庫から選ぶ」を離す */
.form-table td > .dropzone + .picker {
	margin-top: 10px;
}

/*
 * 窓から選ぶボタンの幅は中身任せで、行ごとにばらつく。
 * 桝いっぱいに伸ばして、下に続く枠と頭と尻を揃える。
 */
.form-table td > .dropzone > input[type="file"] {
	display: block;
	width: 100%;
}

.picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.picker-item {
	position: relative;
	padding: 0;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--panel-raised);
	border: 2px solid var(--line);
	border-radius: var(--r-md);
	cursor: pointer;
}

.picker-item.active {
	border-color: var(--accent);
}

.picker-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.picker-item .ref-badge {
	position: absolute;
	top: 4px;
	left: 4px;
	padding: 2px 6px;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--accent-ink);
	background: var(--accent);
	border-radius: var(--r-sm);
}

.picker-item .remove {
	position: absolute;
	right: 4px;
	bottom: 4px;
	padding: 2px 6px;
	font-size: 10px;
	font-family: inherit;
	color: var(--canvas);
	background: rgba(0, 0, 0, 0.6);
	border: none;
	border-radius: var(--r-sm);
	cursor: pointer;
}

/* --- 結果 --------------------------------------------------------- */

.studio-results {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.result-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.result-prompt {
	margin: 8px 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ink-muted);
}

.result-media {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px;
}

.result-media img,
.result-media video {
	width: 100%;
	border-radius: var(--r-md);
	background: var(--panel-raised);
}

.result-placeholder {
	display: grid;
	place-items: center;
	min-height: 160px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--ink-faint);
	background: var(--panel-raised);
	border-radius: var(--r-md);
}

/* ------------------------------------------------------------------
	 ギャラリー
------------------------------------------------------------------ */

.gallery-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.field.inline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.field.inline > span {
	margin: 0;
}

.field.inline select {
	width: auto;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}

.expiry {
	margin: 6px 0;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--render);
}

.expiry[data-expired="true"] {
	color: var(--blocked);
}

.head-links {
	display: flex;
	align-items: center;
	gap: 14px;
}

.head-links a:not(.btn) {
	font-size: 13px;
	color: var(--ink-muted);
	border-bottom: 1px solid var(--line);
}

.head-links a:not(.btn):hover {
	color: var(--ink);
}

/* ------------------------------------------------------------------
	 テンプレート
------------------------------------------------------------------ */

.template-preview {
	margin: 12px 0;
	padding: 10px 12px;
	background: var(--panel-raised);
	border-radius: var(--r-md);
}

.template-preview p {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--ink-muted);
}

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

/* ------------------------------------------------------------------
	 アセットの画像
	 アップロードと生成をひとつのパネルに集約する。
	 生成物はギャラリーではなくアセットに貯まるので、ここが素材の起点になる。
------------------------------------------------------------------ */

.asset-images {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin: 10px 0 14px;
}

.image-card {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--panel-raised);
	border: 2px solid var(--line);
	border-radius: var(--r-md);
}

.image-card[data-primary="true"] {
	border-color: var(--accent);
}

.image-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.image-card .primary-badge {
	position: absolute;
	top: 5px;
	left: 5px;
	padding: 2px 6px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--accent-ink);
	background: var(--accent);
	border-radius: var(--r-sm);
}

.image-card figcaption {
	padding: 6px;
}

.image-card figcaption select {
	width: 100%;
	padding: 3px 4px;
	font-size: 11px;
}

.image-card figcaption .btn-row {
	gap: 4px;
	margin-top: 5px;
}

.btn.tiny {
	padding: 3px 6px;
	font-size: 10px;
}

.generate-box {
	padding: 14px;
	margin-top: 14px;
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.generate-box .field {
	margin-bottom: 0;
}

.generate-box .field:last-of-type {
	margin-bottom: 8px;
}

.generate-box details summary {
	cursor: pointer;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* ------------------------------------------------------------------
	 ナビの「その他」
	 順路（企画 → アセット → ストーリーボード → 生成）から外れるものを畳む
------------------------------------------------------------------ */

.nav-more {
	position: relative;
}

.nav-more > summary {
	list-style: none;
	cursor: pointer;
	color: var(--ink-muted);
	font-size: 13px;
}

.nav-more > summary::-webkit-details-marker {
	display: none;
}

.nav-more > summary::after {
	content: " ▾";
	font-size: 10px;
}

.nav-more[open] > summary {
	color: var(--ink);
}

.nav-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: 150px;
	padding: 6px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.nav-menu a {
	padding: 7px 10px;
	font-size: 13px;
	color: var(--ink-muted);
	border-radius: var(--r-sm);
}

.nav-menu a:hover {
	color: var(--ink);
	background: var(--panel-raised);
}

/* 制作の順路を示すステップ表示 */
.steps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}

.steps a,
.steps span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	font-size: 12px;
	color: var(--ink-faint);
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: 999px;
}

/* 丸数字は字そのもの。円を CSS で描いて中に数字を置くと潰れる */
.steps .step-no {
	font-size: 14px;
	line-height: 1;
}

.steps .step-done-mark {
	font-size: 11px;
	color: var(--accent);
}

.steps [data-current="true"] .step-done-mark {
	color: var(--accent-ink);
}

.steps [data-current="true"] {
	color: var(--accent-ink);
	background: var(--accent);
	border-color: var(--accent);
}

/* 済みは触れることを示す。後戻りしていいと分かるように */
.steps [data-done="true"] {
	color: var(--ink);
	border-color: var(--line-strong);
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

/* ------------------------------------------------------------------
	 アセットの画像づくり
	 参照画像 → 作り方を 1 つ選ぶ → プロンプト → できたもの、の 4 段。
	 縦 1 列に並べるのは、順番どおりに読ませたいから。
------------------------------------------------------------------ */

.asset-build {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.build-step {
	margin-bottom: 16px;
}

.reference-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 12px;
	align-items: start;
	margin-top: 6px;
}

.reference-row img {
	display: block;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

/* 作り方はタブ。選んだものの入力欄だけを出す */
.build-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--line);
}

/*
 * タブは button のことも a のこともある。お金の画面は住所で
 * 切り替えるので a（そのまま貼って共有できる）。見た目は同じ。
 */
.build-tabs button,
.build-tabs > a[role="tab"] {
	padding: 8px 14px;
	font: inherit;
	font-size: 13px;
	color: var(--ink-muted);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
}

.build-tabs > a[role="tab"] { text-decoration: none; }

.build-tabs button:hover,
.build-tabs > a[role="tab"]:hover {
	color: var(--ink);
}

/*
 * 「あるもの／新しく作る」の切り替え。
 * 帯は .build-tabs を使い回す。見た目を 2 つ持つと必ずずれる。
 * 足りないのは帯と中身の間だけ。
 */
.scope-tabs > [data-panel] {
	padding-top: 14px;
}

.build-tabs button[data-active="true"],
.build-tabs > a[role="tab"][data-active="true"] {
	color: var(--ink);
	font-weight: 600;
	border-bottom-color: var(--accent);
}

.build-lead {
	margin: 8px 0 12px;
}

/* 参照画像とプロンプトを横に並べる。見比べながら書くため */
.build-body {
	display: grid;
	gap: 16px;
	align-items: start;
	padding:1rem;
}

.build-body[data-with-reference="true"] {
	grid-template-columns: 200px minmax(0, 1fr);
}

/*
 * 【タブの中と外で、左端を揃える】
 * 枠の内側余白は .panel が 16px 持っている。その中の .build-body に
 * さらに 1rem が付いていたので、**タブの中の欄だけが 16px 内側へ寄り**、
 * その下（描画指示から下）と縦の線が合わなかった。
 * 横は枠に任せ、ここでは帯との間だけを空ける。
 *
 * 枠の直下に置いたときだけに効かせる。アセットの画面の .build-body は
 * 段（.stage-body）の中に居て、余白の持ち主が違う。
 */
.panel > .build-body {
	padding: 14px 0 16px;
}

/*
 * どちらのタブでも同じ欄。境目は行と行の仕切りと同じ線にする。
 * 見出しを置くほどの切れ目ではない（下の欄も同じ「作るための指定」）。
 */
.form-shared {
	border-top: 1px solid var(--line);
}

/* 積む形（狭い画面）では tr が箱になる。1 行目の上を空ける */
.form-shared > tbody > tr:first-child {
	padding-top: 16px;
}

@media (max-width: 900px) {
	.build-body[data-with-reference="true"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

.build-reference img {
	display: block;
	width: 100%;
	margin: 6px 0;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.build-reference .dropzone {
	margin-top: 6px;
}

.build-input .field {
	margin-top: 0;
}

.build-output-head {
	margin-top: 16px;
}

/* できたもの。1 アセット = 1 枚。
	 幅いっぱいに広げると縦にも伸びるので、上限を決める */
.built-slot {
	margin: 6px 0 0;
	max-width: 420px;
}

.built-slot img {
	display: block;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.built-slot[data-ready="true"] img {
	border-color: var(--accent);
}

.built-slot .no-image {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	font-size: 12px;
	color: var(--ink-faint);
	background: var(--panel-raised);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-md);
}

.card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 8px;
	border-radius: var(--r-md);
}

/* ストーリーボード生成時のアセット選択。生成画像をそのまま見せる */
.asset-choice {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 8px;
	margin-top: 6px;
}

.asset-choice-item {
	position: relative;
	display: block;
	padding: 4px;
	cursor: pointer;
	border: 2px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
}

.asset-choice-item[data-selected="true"] {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.asset-choice-item label {
	display: block;
	cursor: pointer;
}

.asset-choice-item input {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 1;
}

/* 削除は常時出す。隠すと「消せない」と思われる */
.asset-delete {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 1;
	padding: 2px 6px;
	font: inherit;
	font-size: 10px;
	color: var(--canvas);
	background: rgba(0, 0, 0, 0.55);
	border: none;
	border-radius: var(--r-sm);
	cursor: pointer;
}

.asset-delete:hover {
	background: rgba(180, 30, 30, 0.85);
}

.asset-choice-item img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--r-sm);
}

.asset-choice-item .no-image {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	font-size: 11px;
	color: var(--ink-faint);
	background: var(--panel-raised);
	border-radius: var(--r-sm);
}

.asset-choice-item .name {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--ink-muted);
}

/* この企画で使うアセットの選択（step 2 の締め） */
/*
 * 企画ごとのアセット選び。
 * 中の section が枠を持つので、こちらは枠を出さない。
 * 二重にすると、中身が少なくても箱 2 つぶん大きく見える。
 */
.plan-assets {
	margin-bottom: 20px;
	padding: 0;
	background: none;
	border: none;
}

/* 企画ページに出す、登録済みアセット */
.registered-assets {
	padding: 12px 14px;
	margin-bottom: 20px;
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

/* 種別ごとのまとまり。キャラ・商品・背景を横に並べる。
	 縦積みだと 3 種を見比べられず、画面も無駄に伸びる */
/*
 * 種別の列。
 * 前は常に 3 等分だった。1 種別しか無いときも幅の 1/3 に縮こまり、
 * 残り 2/3 が空く。中身の数に合わせて詰める。
 */
.kind-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 6px;
}

.kind-columns > .kind-group {
	flex: 1 1 220px;
	max-width: 100%;
}

@media (max-width: 900px) {
	.kind-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kind-group {
	min-width: 0;
	padding-left: 14px;
	border-left: 1px solid var(--line);
}

.kind-group:first-child {
	padding-left: 0;
	border-left: none;
}

@media (max-width: 900px) {
	.kind-group {
		padding: 10px 0 0;
		border-left: none;
		border-top: 1px solid var(--line);
	}
	.kind-group:first-child {
		padding-top: 0;
		border-top: none;
	}
}

/* アセット画面。一覧を細く、編集を広く取る */
.asset-workspace {
	grid-template-columns: 260px minmax(0, 1fr);
}

@media (max-width: 900px) {
	.asset-workspace {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 一覧が細いので、カードは 2 列で足りる */
.asset-workspace .grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* アセットの属性フォーム。項目が多いので 2 列に畳む。
	 「文字情報から」タブの中に入るので、区切り線は付けない */
.asset-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	align-items: start;
}

.asset-form > .field:first-child {
	margin-top: 0;
}

.asset-form > .form-full {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.asset-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------
	 一時保管庫の引き出し
	 横から出す。本文の脇に出るので、編集中のカットを見ながら選べる。
	 1 行に「サムネイル・名前・出どころ」を並べるのは、
	 正方形のサムネイルだけでは何の画像か判別できないため。
------------------------------------------------------------------ */

.stash-backdrop {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(0, 0, 0, 0.28);
}

.stash-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 41;
	display: flex;
	flex-direction: column;
	width: min(380px, 90vw);
	height: 100%;
	padding: 16px;
	overflow-y: auto;
	background: var(--panel);
	border-left: 1px solid var(--line-strong);
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
	transform: translateX(100%);
	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 開いた位置。React が開いた直後に立てるので、
	 トランジションが走らない環境でもここに到達する */
.stash-drawer[data-entered="true"] {
	transform: none;
}

/* 動きを抑える設定では滑らせない */
@media (prefers-reduced-motion: reduce) {
	.stash-drawer {
		transition: none;
	}
}

.stash-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

.stash-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.stash-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 20px;
	gap: 10px;
	align-items: center;
	padding: 6px;
	text-align: left;
	font: inherit;
	color: var(--ink);
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	cursor: pointer;
}

.stash-row:hover {
	border-color: var(--line-strong);
}

.stash-row[data-selected="true"] {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.stash-row img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--r-sm);
}

/* 掛けごとの控え（顔付け → 服付け）を畳んで並べる */
.pass-block {
	margin: 8px 0;
	padding: 6px 8px;
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.pass-block > summary {
	cursor: pointer;
	font-weight: 600;
}

.pass-mark {
	margin: 8px 0 2px;
}

/* 動画は縮小画像を作れないので、印だけ置く */
.stash-kind {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--r-sm);
	background: var(--panel-sunk, var(--panel));
	border: 1px solid var(--line);
	color: var(--ink-dim, var(--ink));
}

.stash-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.stash-title {
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.stash-mark {
	color: var(--accent);
	font-weight: 700;
}

/* ------------------------------------------------------------------
	 ステップ画面の足元
	 進む道は 1 本。「次へ」は必ずここにあり、他の場所には置かない。
------------------------------------------------------------------ */

.step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	/* margin-top: 32px; */
	/* border-top: 1px solid var(--line); */
}

.step-nav a.btn {
	/* visibility: hidden; */
	display:none;
}

/* 戻るが無いときも「次へ」は右端に置く */
.step-nav > :only-child {
	margin-left: auto;
}

.step-next-blocked {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ------------------------------------------------------------------
	 企画ページの順路カード
	 どこまで済んでいて次はどこか、を 1 目で示す。作業はここでしない。
------------------------------------------------------------------ */

.step-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	margin: 24px;
	list-style: none;
}

/*
 * 1 行が 1 枚の札。中身は「番号・本体・行き先」の 3 列。
 *
 * 【link でない行も同じ札にする】
 * 丸ごと開ける行は <a>、開く以外の操作が要る行は <div class="row-card">、
 * 開けない行は <div class="step-card-locked">。
 * 前は <a> にしか札の形が付いていなかったので、ボードの一覧だけ
 * **枠も余白も無い素の行**で並んでいた。同じ並びなのに別物に見えていた。
 */
.step-cards a,
.step-cards .row-card,
.step-card-locked {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	color: var(--ink);
	text-decoration: none;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	float:left;
	box-shadow: 1px 1px 1px 0px rgb(0 0 0 / 20%);
	min-width: 35%;
}

.step-cards a:hover {
	border-color: var(--line-strong);
}

.step-cards [data-current="true"] a {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.step-card-no {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	font-size: 13px;
	color: var(--ink-muted);
	border: 1px solid var(--line-strong);
	border-radius: 50%;
}

.step-cards [data-done="true"] .step-card-no {
	color: var(--accent-ink);
	background: var(--accent);
	border-color: var(--accent);
}

.step-card-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.step-card-go {
	font-size: 12px;
	color: var(--ink-muted);
	white-space: nowrap;
}

.step-cards [data-current="true"] .step-card-go {
	color: var(--accent);
	font-weight: 600;
}

/* 名前は作り方タブの外。どの作り方でも要る */
.asset-name {
	margin-bottom: 12px;
}

/* ------------------------------------------------------------------
	 プロジェクトの構成ツリー（左固定）
	 プロジェクト → 企画 → ストーリーボード の入れ子を常に見せる。
	 1 画面だけでは今どこを触っているのかが伝わらないため。
------------------------------------------------------------------ */

.project-shell {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.project-main {
	min-width: 0;
}

.project-sidebar {
	position: sticky;
	top: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: calc(100vh - 32px);
	padding: 14px;
	overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

@media (max-width: 900px) {
	.project-shell {
		grid-template-columns: minmax(0, 1fr);
	}
	.project-sidebar {
		position: static;
		max-height: none;
	}
}

.sidebar-home {
	font-size: 12px;
	color: var(--ink-muted);
	text-decoration: none;
}

.sidebar-home:hover {
	color: var(--ink);
}

.sidebar-kicker {
	display: block;
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--ink-faint);
	text-transform: uppercase;
}

.sidebar-project {
	display: block;
	padding: 8px 10px;
	color: var(--ink);
	text-decoration: none;
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}

.sidebar-project[data-current="true"] {
	border-color: var(--accent);
}

.sidebar-project strong {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
 *	左の構成ツリー
 *
 *	段は 4 つ。企画 → 企画概要／ストーリーボード → ボード → カット。
 *	どの段も同じ形の枝線で繋ぐ。親が縦線を引き、子が横棒を出す。
 *	罫線文字を並べるより、題が折り返しても崩れない。
 * ------------------------------------------------------------------ */

.sidebar-tree ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

/* 根。企画がここに並ぶ。根には枝線を引かない（引く先が無い） */
.tree-root {
	margin-top: 4px !important;
}

.tree-root > li + li {
	margin-top: 6px;
}

/* 押せるもの・押せないものを、同じ 1 行の形に揃える */
.sidebar-tree a,
.sidebar-tree .tree-label,
.sidebar-tree .tree-empty {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 7px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink-muted);
	text-decoration: none;
	border-radius: var(--r-sm);
	/* anywhere だと語の途中で切れる。break-word なら語の切れ目で折る */
	overflow-wrap: break-word;
}

.sidebar-tree a:hover {
	color: var(--ink);
	background: var(--panel-raised);
}

/* 企画の題。木の根なので少し強く */
.tree-plan {
	font-weight: 600;
	color: var(--ink) !important;
}

/*
 *	ストーリーボードの行。
 *
 *	以前は「ボードが何本でも作れる」ことを示すだけの見出しで、
 *	押せないので faint・cursor:default にしていた。
 *	ストーリーボードにはそれ自体の画面があり、並びの中でここだけ
 *	入口が無かったので、押せるようにした。
 *	見出しの役目も残るので、字はまわりより小さいままにする。
 */
.sidebar-tree .tree-label {
	font-size: 11px;
	letter-spacing: 0.04em;
}

.sidebar-tree .tree-empty {
	font-size: 12px;
	color: var(--ink-faint);
	cursor: default;
}

/* 件数。行の中に収める。前は display:block で別の行に落ちていた */
.tree-count {
	flex: none;
	min-width: 18px;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
	color: var(--ink-faint);
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

/* 題。件数を右端に押し出す */
.tree-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* 現在地。左の線と背景で「今ここ」を示す */
.sidebar-tree a[data-current="true"] {
	color: var(--ink);
    font-weight: 600;
    background: rgb(146 180 255 / 44%);
    box-shadow: inset 1px 0 0 var(--accent);
}

.sidebar-tree a[data-current="true"] .tree-count {
	color: var(--accent);
	background: var(--panel);
	border-color: var(--accent);
}

/* 開いている枝の親。今いる場所までの道筋を薄く残す */
.sidebar-tree a[data-open="true"]:not([data-current="true"]) {
	color: var(--ink);
}

/*
 * 枝。段の深さに関わらず同じ形。
 * --tick は横棒を出す高さ。1 行目の中心に合わせる。
 */
.tree-sub {
	position: relative;
	margin: 2px 0 0 !important;
	padding-left: 14px !important;
}

.tree-sub > li {
	position: relative;
	--tick: 14px;
}

/* 縦線 */
.tree-sub > li::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--line);
}

/* 最後の項目は横棒の高さで止めて、枝を └ の形に閉じる */
.tree-sub > li:last-child::before {
	bottom: auto;
	height: var(--tick);
}

/* 横棒 */
.tree-sub > li::after {
	content: "";
	position: absolute;
	left: -8px;
	top: var(--tick);
	width: 8px;
	height: 1px;
	background: var(--line);
}

/* ------------------------------------------------------------------
 *	ツリーのカット
 *	キーフレームを添えて、題ではなく絵で選べるようにする。
 * ------------------------------------------------------------------ */

/* 絵があるぶん背が高い。横棒を絵の中心に合わせる */
.tree-shots > li {
	--tick: 20px;
}

.tree-shots > li + li {
	margin-top: 2px;
}

.tree-shot {
	align-items: center;
	padding: 3px 6px;
}

.tree-shot img,
.tree-shot-blank {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: var(--r-sm);
}

.tree-shot img {
	display: block;
	object-fit: cover;
}

/* まだ絵の無いカット。枠だけ置いて、並びの高さを揃える */
.tree-shot-blank {
	background: var(--panel-raised);
	border: 1px dashed var(--line-strong);
}

/* カットの番号。並び順そのものが情報なので、題の前に出す */
.tree-shot-no {
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
}

.tree-shot-no::after {
	content: ".";
}

.tree-shot[data-current="true"] .tree-shot-no {
	color: var(--accent);
}

/*
 * 題は 2 行で止める。
 * 3 行 4 行と伸びると、カットの並びの高さが揃わず、
 * 木というより文章の塊に見える。
 */
.tree-shot-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-width: 0;
	font-size: 12px;
	line-height: 1.35;
}

/* ------------------------------------------------------------------
 *	アセット
 *	企画と並列。プロジェクト直下で共有されることを位置で示す。
 * ------------------------------------------------------------------ */

.sidebar-assets {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 7px;
	font-size: 13px;
	color: var(--ink-muted);
	text-decoration: none;
	border-radius: var(--r-sm);
}

.sidebar-assets:hover {
	color: var(--ink);
	background: var(--panel-raised);
}

.sidebar-assets[data-current="true"] {
	color: var(--ink);
	font-weight: 600;
	background: var(--accent-soft);
	box-shadow: inset 2px 0 0 var(--accent);
}

.sidebar-assets[data-current="true"] .tree-count {
	color: var(--accent);
	background: var(--panel);
	border-color: var(--accent);
}

/* 添え書き。木の項目と同じ大きさだと、枝の一部に見える */
.sidebar-note {
	margin: 4px 0 0;
	padding: 0 7px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--ink-faint);
}

/* 動画の解像度。試し撮りと仕上げを行き来するので、見出しの隣に常設する */
.resolution-picker {
	min-width: 220px;
	margin-top: 0;
}

/* サインイン。1 枚だけ置いて迷わせない */
.signin-shell {
	max-width: 420px;
	margin: 40px auto;
}

.signin-panel .field:first-of-type {
	margin-top: 0;
}

/* 利用者の一覧。停止中は沈める */
.user-table td {
	vertical-align: middle;
}

.user-table tr[data-disabled="true"] {
	opacity: 0.55;
}

.user-table select {
	min-width: 96px;
}

.user-table .btn-row {
	gap: 4px;
	flex-wrap: nowrap;
}

/* ヘッダーのサインアウト。リンクと同じ見た目に揃える */
button.switch {
	font: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

/* 表の中で直に編集する欄。枠を消して「文字」に見せ、触れると枠が出る */
.cell-input {
	width: 50%;
	min-width: 110px;
	padding: 2px;
	font: inherit;
	font-size: 13px;
	color: inherit;
	background: transparent;
	border: 1px solid #ccc;
	border-radius: var(--r-sm);
}

.cell-input:hover:not(:disabled) {
	border-color: var(--line);
}

.cell-input:focus {
	background: var(--panel);
	border-color: var(--accent);
	outline: none;
}

.cell-input:disabled {
	color: var(--ink-muted);
}

.user-table .check {
	white-space: nowrap;
}


/* ====================================================================
 *	2. 上書きと配色
 *	この道具のための追加。色を変えるならここ（:root を探す）。
 * ==================================================================== */

/*
 * 【hidden を効かせる】
 *
 * base.css は .build-body や .stash-drawer に display を指定している。
 * 指定のある要素に hidden を付けても、display のほうが勝って**隠れない**。
 * タブの裏の面がそのまま横に居座り、画面が 167px はみ出した。
 *
 * hidden は「無いものとして扱う」印なので、ここで最優先にする。
 */
[hidden] {
	display: none !important;
}

/*
 * 元の見た目（base.css）に足りない分だけを補う。
 *
 * base.css は Next.js 版の globals.css をそのまま持ってきたもの。
 * 見た目の土台はそちらに任せ、ここは PHP 版だけに要るものに限る。
 * ここが太るほど元との差が開くので、増やすときは
 * 「base.css に同じ役割の名前が無いか」を先に見ること。
 */

/* 構成ツリーと本文の 2 段組。base.css の project-shell と同じ役割 */
.app-body[data-with-tree="true"] {
	display: grid;
	/*
	 * 【ツリーの幅は縮められるようにする】
	 * 260px を固定にすると、画面が狭いときに逃げ場が無く、
	 * 右の中身がはみ出す（実測で 901px のとき 13px はみ出していた）。
	 * 下限を決めておけば、足りないぶんはツリーが譲る。
	 */
	grid-template-columns: minmax(180px, 360px) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

/*
 * 【左に大きな余白ができる】
 * base.css の .app-main は max-width:1280px と margin:0 auto を持つ。
 * ツリーを左に出すと、残った枠の中でさらに中央に寄るので、
 * 左に 400px 以上の空きができて本文が右へ押しやられた（実測）。
 *
 * ツリーを出しているときは、割り当てられた枠をそのまま使う。
 */
.app-body[data-with-tree="true"] .app-main {
	max-width: none;
	margin: 0;
	min-width: 0;
}

@media (max-width: 900px) {
	.app-body[data-with-tree="true"] { grid-template-columns: 1fr; }
}

.sidebar-divider { height: 1px; background: var(--line); margin: 14px 0 10px; }

/*
 * 選んだものを見て分かるようにする。
 *
 * 【:has を使う理由】
 * PHP は押した瞬間に描き直せない。サーバー側で active を付ける作りだと、
 * **押しても見た目が変わらない**（保存して戻るまで反応しない）。
 * 実際に「選択ができない」と言われた原因がこれ。
 * CSS だけで今の状態を映せば、押した瞬間に変わる。
 */
.choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	cursor: pointer;
	font-size: 13px;
}

.choice:hover { border-color: var(--line-strong); }

.choice:has(input:checked) {
	border-color: var(--accent);
	background: var(--accent-soft);
	font-weight: 600;
}

/* 縮小画像つきの札も同じ扱い */
.chip:has(input:checked) {
	border-color: var(--accent);
	background: var(--accent-soft);
}

/*
 * 【画像がはみ出す】
 * base.css の .preview は video にしか大きさを指定していない。
 * img を入れると元の大きさのまま出て、実測で横に 391px はみ出した。
 * video と同じ指定を img にも当てる。
 */
.preview img {
	max-width: 100%;
	max-height: 100%;
	display: block;
	object-fit: contain;
}

/* 引き出しは base.css の固定配置に任せる。ここでは覆いだけ */
.stash-backdrop {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(0, 0, 0, .28);
}

/*
 * 数字は右寄せ・等幅。桁が揃わないと多寡を読み違える。
 *
 * 【同じ行で打ち消していた】
 * `text-align: right` のあとに `text-align:center` が書き足されており、
 * **後勝ちで中央寄せになっていた**。注釈は「右寄せ」と書いてあるのに
 * 効いていたのは中央寄せで、金額の桁が縦に揃わなかった。
 */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.balance-figure { font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* 消す操作は色で区別する。押し間違いが戻せない */
.btn.danger { color: var(--blocked); border-color: var(--blocked); }
.btn.danger:hover { background: rgba(192, 57, 43, .06); }
.btn.small { padding: 3px 8px; font-size: 12px; }

/* サインインなど、中央に 1 枚だけ置く画面 */
.narrow { max-width: 420px; margin: auto; }

/* ============================================================
 *	PHP 版だけの並び。
 *
 *	base.css の名前は「その形の要素」を前提にしている。
 *	.image-grid は 120px の格子、.card-thumb は img 用、
 *	.chip は文字だけの小さなボタン、.strip は .strip-item を並べる帯。
 *
 *	形の違うものにその名前を当てたら、幅 122px の中に
 *	2000px の中身が詰まった。名前を合わせても意味は合わない。
 *	ここは自前で書き、色と角丸だけ base.css の変数を使う。
 * ============================================================ */

/* --- アセット --------------------------------------------------------- */

.asset-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.asset-card {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 14px;
	background: var(--panel);
	min-width: 0;
}

.asset-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.asset-card-head strong { font-size: 14px; }

/* 縮小画像の並び。1 行に何枚か入る大きさ */
.thumb-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}

.thumb-row li { width: 132px; display: flex; flex-direction: column; gap: 4px; }

.thumb-row img,
.thumb-row video {
	width: 100%;
	height: 84px;
	object-fit: cover;
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
	background: var(--panel-raised);
}

.thumb-label { font-size: 12px; color: var(--ink-muted); }

/*
 * 候補の札に付くボタン。
 * 1 つずつ別のフォームなので、放っておくと縦に積まれる。
 * 札の幅に収まる範囲で横に並べ、はみ出したら折り返す。
 */
.thumb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.thumb-actions form {
	margin: 0;
}

/* --- カットの一覧（縦に並べる） ---------------------------------------- */

.shot-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--panel);
}

.shot-list a {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 8px;
	text-decoration: none;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
}

.shot-list li:last-child a { border-bottom: 0; }

/* 選んでいるものは左に線を出す。背景色だけだと薄い */
.shot-list a[data-current="true"] {
	background: var(--accent-soft);
	box-shadow: inset 3px 0 0 var(--accent);
}

.shot-list img,
.shot-thumb-empty {
	width: 56px;
	height: 36px;
	flex: none;
	object-fit: cover;
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
	background: var(--panel-raised);
	display: grid;
	place-items: center;
	color: var(--ink-faint);
	font-size: 12px;
}

.shot-list-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shot-list-body strong { font-size: 13px; font-weight: 600; }

/* --- キーフレームの候補 ------------------------------------------------ */

/*
 * 候補は「絵をつくる」段の中に置く。動画の段へ持って行くと、
 * 何を選び直しているのかが分からなくなる。
 * 上のボタンとは仕切り線で分ける。
 */
.candidate-block {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.candidate-block .slate {
	display: block;
	margin-bottom: 6px;
}


.candidate-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

.candidate {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 4px;
	border: 2px solid transparent;
	border-radius: var(--r-md);
	background: none;
	cursor: pointer;
}

.candidate img {
	width: 132px;
	height: 76px;
	object-fit: cover;
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
}

.candidate[data-current="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* --- カットに載せるアセット（縮小画像つき） ---------------------------- */

.asset-picks { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 6px 0 0; padding: 0; }

.asset-pick {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 104px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	font-size: 12px;
	cursor: pointer;
	text-align: center;
}

.asset-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.asset-pick img { width: 88px; height: 56px; object-fit: cover; border-radius: var(--r-sm); }

.asset-pick-empty {
	width: 88px;
	height: 56px;
	display: grid;
	place-items: center;
	background: var(--panel-raised);
	border-radius: var(--r-sm);
	color: var(--ink-faint);
	font-size: 11px;
}

/* --- ギャラリー・保管庫 ------------------------------------------------ */

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.gallery-card {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--panel);
	min-width: 0;
}

.gallery-media { display: grid; gap: 2px; }

.gallery-media img,
.gallery-media video {
	width: 100%;
	display: block;
	background: var(--panel-raised);
}

.gallery-empty {
	display: grid;
	place-items: center;
	gap: 8px;
	min-height: 140px;
	background: var(--panel-raised);
	padding: 12px;
	text-align: center;
}

.gallery-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }

/* --- 保管庫から選んだ 1 枚 --------------------------------------------- */

.picker-preview { margin-top: 6px; }

.picker-thumb {
	margin: 0;
	width: 132px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}

.picker-thumb img { display: block; width: 100%; height: 84px; object-fit: cover; }

/* 入力欄を横に並べる */
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 180px; min-width: 0; }


/* --- カットの一覧と詳細の割り振り -------------------------------------- */

/*
 * 【詳細を広く取る】
 * base.css の .workspace は「本文 + 右に 340px の脇」を想定した並び。
 * カット画面はその逆で、**一覧が脇・詳細が本体**。そのまま当てると
 * 一覧 415px に対して詳細 340px となり、入力欄のほうが細くなった。
 *
 * 一覧は題が読めれば足りるので幅を決め打ちにし、残りを詳細に渡す。
 */
.shot-workspace {
	display: grid;
	/* grid-template-columns: 300px minmax(0, 1fr); */
	gap: 16px;
	align-items: start;
	margin-top: 16px;
}

@media (max-width: 900px) {
	.shot-workspace { grid-template-columns: minmax(0, 1fr); }
}

/* 詳細の中身は横幅を使い切る */
.shot-detail { min-width: 0; }
.shot-detail .field input[type="text"],
.shot-detail .field textarea,
.shot-detail .field select { width: 100%; }

/*
 * 生成の箱。
 * もとは「2 列に置く」指定だったが、それはキーフレームと動画が
 * 1 つの箱に同居していたころのもの。段を 2 つに割ったいま、
 * 1 つの箱の中身が勝手に 2 列に割れて、かえって読めない。
 */
.generate-box {
	display: block;
}

/* ------------------------------------------------------------------
	 欄のまとまり

	 段（workpart）の中は、まだ話が混ざる。カットの編集では
	 題・尺・カメラ・アセット・参照・声が仕切り無しで 12 個続いていた。
	 小見出しと左の縦線で、どこまでが 1 つの話かを示す。

	 重さは三段。段の区切り線 ＞ まとまりの縦線 ＞ 欄。
------------------------------------------------------------------ */

/*
 * まとまりの間。左の線からも離す。
 * 線に近いと、線がまとまりの縁ではなく飾りに見える。
 */
 
.in_table{
    width: 100%;
    padding: 0;
    margin: 1rem 0 0 0;
    position:relative;
    border-collapse: separate;
  	border-spacing:0 2rem; 
}
/*
 * 段の中の枠。
 *
 * 上半分は表の桝（.td_in2）が罫と余白を持っている。下半分は表を
 * 使わないので、同じ見た目をこちらで出す。値は .td_in2 と揃えてある。
 * 片方だけ動かすと、上と下で罫の位置がずれる。
 */
.workblock {
	margin-top: 2rem;
	padding: 0 2rem 0 1rem;
	border-left: 2px solid var(--line);
}

.workblock:first-of-type {
	margin-top: 1rem;
}

/* 枠の中の最後の余白は、枠の余白と二重になる */
.workblock > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.workblock {
		padding-right: 0;
	}
}

.td_in2, .td_in{
	padding:0 2rem 0 1rem;
	vertical-align: top;
	border-left: 2px solid var(--line);
}
.td_in{
    width: 50%;
}
.td_in3{
    padding:0;
}
 
/*
 * 枠そのものには何も持たせない。
 * 罫と余白は、外側（表の桝、または .workblock）が持つ。
 *
 * ここには前 // で消した指定が残っていた。**CSS に // の注記は無い**ので、
 * 効かない指定が 2 行あるのと同じだった（読む人には効いて見える）。
 */
.field-group {
	margin: 0;
}

.field-group:first-child {
	margin-top: 0;
}

.field-group-head {
	display: block;
	margin-bottom: 0.8rem;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ink-muted);
}

/* 小見出しのすぐ下の添え書きは、見出しに付いて見えるよう詰める */
.field-group-head + .hint {
	margin-top: -2px;
	margin-bottom: 8px;
}

/* まとまりの最初の欄は、見出しとの間を空けない */
.field-group > .field:first-of-type {
	margin-top: 0;
}

/* ------------------------------------------------------------------
	 作業のまとまり

	 段の見出し（①②③）は出ていたが、そのあとの入力欄がどこまで
	 その段のものなのか分からなかった。見出しと中身が同じ位置から
	 始まり、段と段の間にも仕切りが無いため、全部が 1 本の帯に見える。

	 頭に区切り線を引き、中身を見出しの字の位置まで下げる。
	 番号の丸だけが左に残るので、1 つの段の範囲が目で追える。
------------------------------------------------------------------ */

.workpart {
	display: block;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

/*
 * 最初の段の上には引かない。見出しの直後に線があると始まりが濁る。
 *
 * 箱になっている段（.asset-stage）は除く。指定の強さがこちらのほうが
 * 上なので、そのまま当てると**箱の上辺まで消えて**、上が開いた箱になる。
 */
.workpart[data-first="true"]:not(.asset-stage) {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* 箱の最初の段は、上の余白だけ詰める。枠はそのまま */
.workpart[data-first="true"].asset-stage {
	margin-top: 0;
}

/*
 * 中身は見出しの字に揃える。
 * 丸番号 26px ＋ 間 10px ＝ 36px。数を直に書かず、頭の指定と同じ組で持つ。
 */
.workpart > *:not(.stage-head) {
	margin-left: 36px;
}

@media (max-width: 900px) {
	/* 狭い画面で字下げすると、入力欄が入らなくなる */
	.workpart > *:not(.stage-head) {
		margin-left: 0;
	}
}

/* プレビューは詳細の幅いっぱいに */
.shot-detail .preview { width: 100%; margin-bottom: 12px; }

/* アセットの作り方（帯と中身を縦に積む）。base.css の .tabs は帯だけの指定 */
.asset-build { display: block; }
.asset-build > .build-tabs { margin-bottom: 12px; }

/* 種別タブはリンクなので、下線の見た目をボタンと揃える */
.tabs a {
	padding: 8px 14px;
	text-decoration: none;
	color: var(--ink-muted);
	border-bottom: 2px solid transparent;
	font-size: 13px;
}

.tabs a[data-active="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tabs a .tiny { margin-left: 4px; color: var(--ink-faint); }

/* 一覧の札。選んでいるものを分かるように */
.asset-workspace .card { display: block; text-decoration: none; color: inherit; }
.asset-workspace .card[data-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* --- 概要案 ------------------------------------------------------------ */

/*
 * 【横に 3 列並べない】
 * 案には題・説明・トーン・配色・区間の一覧・採用の操作が入る。
 * 260px の列に押し込むと縦に伸びきり、隣と見比べられない。
 * 1 案 1 枚を縦に積み、中で「読むもの」と「操作」を左右に分ける。
 */
.outline-list { display: grid; gap: 10px; }

.outline-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 16px;
	align-items: start;
	padding: 12px 14px;
}

/*
 * 【余白を詰める】
 * 案は見比べるもの。1 枚が高いと、2 案目を見るのに送ることになる。
 * 読む側と操作側は別の箱なので、行が噛み合わずに伸びることもない。
 */
.outline-read > *,
.outline-act > * { margin: 0; }
.outline-read > * + *,
.outline-act > * + * { margin-top: 6px; }

.outline-card h3 { font-size: 15px; line-height: 1.4; }
.outline-card p { font-size: 13px; line-height: 1.5; }
.outline-card .swatches span { width: 16px; height: 16px; }
.outline-card .timeline { max-height: 150px; overflow-y: auto; }
.outline-card .timeline li { padding: 3px 0 3px 10px; font-size: 12px; }
.outline-card .field { margin-bottom: 0; }

@media (max-width: 900px) {
	.outline-card { grid-template-columns: minmax(0, 1fr); }
}

/* 生成の進み具合 --------------------------------------------------- */

/*
 * 【割合ではなく経過】
 * 向こうは % を返さない。ここが出しているのは経過時間と目安の比。
 * 満杯にしないので、track の残りが常に見えるようにしておく。
 */
.progress { margin: 8px 0 0; }

.progress-track {
	height: 6px;
	border-radius: 999px;
	background: var(--border, rgba(0, 0, 0, 0.12));
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--accent, var(--accent));
	/* 1 秒ごとに書き換わる。間を繋いで、飛んで見えないようにする */
	transition: width 1s linear;
}

/* 目安を過ぎたら色を落ち着かせる。急かして見えるのを避ける */
.progress[data-over="true"] .progress-fill {
	background: var(--muted, #8a8f98);
	animation: progress-wait 1.6s ease-in-out infinite;
}

@keyframes progress-wait {
	50% { opacity: 0.55; }
}

.progress-text {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--muted, #6b7280);
}

@media (prefers-reduced-motion: reduce) {
	.progress-fill { transition: none; animation: none; }
}

/* 順路バー ---------------------------------------------------------- */

/*
 * 【終わったものと、次にやることを、見た目で分ける】
 * 前は 5 つを同じ丸で並べていたので、どこまで進んだか読めなかった。
 * ✓ が付いたものは済み、色が濃いものが今いる場所、
 * 枠線が強いものが次にやること。それ以外は控えめに置く。
 */
.steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}

@media (max-width: 900px) {
	.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* base.css の丸い錠剤を打ち消す。並びも中身も別物になった */
.steps .step {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
	padding: 10px 12px;
	font-size: 12px;
	text-decoration: none;
	border-radius: var(--r-md);
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--ink-faint);
}

.steps .step-mark {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	background: var(--panel-raised);
	color: var(--ink-muted);
}

.steps .step-text { display: grid; gap: 1px; min-width: 0; }
.steps .step-text strong { font-size: 13px; font-weight: 600; color: var(--ink); }

/* 説明は 1 行。折り返すと札の高さが揃わず、並びが崩れて見える */
.steps .step-note {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink-faint);
}

/* 済み。触れることが分かる程度に残す */
.steps .step[data-state="done"] { border-color: var(--line-strong); }
.steps .step[data-state="done"] .step-mark {
	color: var(--accent-ink);
	background: var(--accent);
	border-color: var(--accent);
}

/* 次にやること。枠で目を引く */
.steps .step[data-state="current"] {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
	background: var(--accent-soft);
}
.steps .step[data-state="current"] .step-mark {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--panel);
}

/* 今いる場所。塗りつぶして「ここ」だと分かるようにする */
.steps .step[data-state="here"] {
	border-color: var(--accent);
	background: var(--accent);
}
.steps .step[data-state="here"] .step-text strong,
.steps .step[data-state="here"] .step-note { color: var(--accent-ink); }
.steps .step[data-state="here"] .step-mark {
	color: var(--accent);
	background: var(--panel);
	border-color: var(--panel);
}

.steps a.step:hover { border-color: var(--accent); }

/* 次にやること、を 1 本の帯で出す ------------------------------------ */

/*
 * 順路バーは「全体のどこか」を示すもの。
 * こちらは「今すぐ押すもの」を 1 つだけ出す。迷い先を作らない。
 */
.next-up {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	margin-bottom: 20px;
	border: 1px solid var(--accent);
	border-radius: var(--r-md);
	background: var(--accent-soft);
}

@media (max-width: 900px) {
	.next-up { grid-template-columns: minmax(0, 1fr); }
}

.next-up-label {
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--accent-ink);
	background: var(--accent);
	border-radius: 999px;
}

.next-up-body { display: grid; gap: 1px; min-width: 0; }
.next-up-body strong { font-size: 14px; }

/* アセット画面 ------------------------------------------------------ */

/*
 * 【上から順にやる】
 * 前は「作り方」タブで画面が切り替わり、参照画像の登録が
 * どのタブに居るかで出たり消えたりしていた。手順が読めない作りだった。
 * 段に分けて縦に積み、番号を振る。
 */
.asset-stage {
	padding: 14px;
	margin-top: 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel-raised);
}

.stage-head {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.stage-head strong { display: block; font-size: 14px; }
.stage-head .hint { display: block; margin-top: 2px; }

.stage-no {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent-ink);
	background: var(--accent);
	border-radius: 999px;
}

.stage-body { margin-top: 12px; }

/* 作り方の選択。ラジオ 1 行では説明が入らない */
.mode-choices { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }

.mode-choice {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	align-items: start;
	padding: 10px 12px;
	cursor: pointer;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
}

.mode-choice:has(input:checked) {
	border-color: var(--accent);
	background: var(--accent-soft);
}

/* 選べないものは、押せないことと理由を同時に見せる */
.mode-choice[data-blocked="true"] { opacity: 0.55; cursor: not-allowed; }

.mode-choice-body { display: grid; gap: 2px; min-width: 0; }
.mode-choice-body strong { font-size: 13px; }

/* 状態の 3 つ並び。何が済んで何が残っているかを一目で */
.asset-marks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.asset-marks li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel-raised);
}

.asset-marks li strong { display: block; font-size: 12px; }
.asset-marks li .hint { font-size: 11px; }

.asset-mark-icon {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	color: var(--ink-faint);
	background: var(--panel);
	border: 1px solid var(--line-strong);
}

.asset-marks li[data-ok="true"] { border-color: var(--accent); }
.asset-marks li[data-ok="true"] .asset-mark-icon {
	color: var(--accent-ink);
	background: var(--accent);
	border-color: var(--accent);
}

/* 次にやること 1 行。太字にせず、囲って位置で示す */
.asset-todo {
	margin: 10px 0 0;
	padding: 8px 12px;
	font-size: 13px;
	border-left: 3px solid var(--accent);
	background: var(--accent-soft);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* 一覧の札。使える状態かを色で分ける */
.asset-card-state {
	margin: 4px 0 0;
	font-size: 11px;
	color: var(--ink-faint);
}

.asset-card-state[data-state="ready"] { color: var(--accent); }
.asset-card-state[data-state="blocked"] { color: var(--warn, var(--render)); }

/*
 * 【誰のものかを一覧に出す】
 * 自分のものと、他の人が共有したものが混ざって並ぶ。
 * 出さないと「共有してもらった素材」を探す手立てが無い。
 */
.asset-card-owner {
	margin: 2px 0 0;
	font-size: 11px;
	color: var(--ink-faint);
}

/* 他の人からの共有だけ、色で拾えるようにする */
.asset-card-owner[data-shared="true"] {
	color: var(--accent);
}

/* プロジェクトトップ ------------------------------------------------ */

.flow-guide-list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	counter-reset: none;
}

@media (max-width: 900px) {
	.flow-guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.flow-guide-list li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel-raised);
}

.flow-guide-list strong { display: block; font-size: 12px; }
.flow-guide-list .hint { font-size: 11px; }

.flow-guide-no {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--ink-muted);
	background: var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: 999px;
}

/*
 * 企画ごとの進み具合。5 つの升で出す。
 * 数字より、埋まり方のほうが速く読める。
 */
.plan-progress {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
}

.plan-progress-cell {
	width: 22px;
	height: 5px;
	border-radius: 999px;
	background: var(--line-strong);
}

.plan-progress-cell[data-state="done"] { background: var(--accent); }
.plan-progress-cell[data-state="current"] {
	background: var(--panel);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.plan-progress .hint { margin-left: 4px; font-size: 11px; }

/* リンク型のボタン ---------------------------------------------------- */

/*
 * 【a.btn に見た目が無かった】
 * base.css は button.btn しか定義していない。
 * 画面には <a class="btn"> が多数あり（「アセットを開く」「個別生成へ」
 * 「← 企画概要へ戻る」など）、それが全部ただの文字として出ていた。
 * 押せるものだと分からないので、button と同じ形を与える。
 */
a.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--r-sm);
	border: 1px solid var(--line-strong);
	background: var(--panel-raised);
	color: var(--ink);
	font-size: 13px;
	text-decoration: none;
}

a.btn:hover {
	border-color: var(--accent);
	background: var(--panel);
}

a.btn.primary {
	color: var(--accent-ink);
	background: var(--accent);
	border-color: var(--accent);
}

a.btn.primary:hover {
	filter: brightness(1.06);
	background: var(--accent);
}

a.btn.small, button.btn.small { padding: 4px 10px; font-size: 12px; }

/*
 * 【base.css の錠剤を内側の span にまで当てない】
 * base.css には `.steps a, .steps span { padding; background; border; radius }`
 * がある。新しい順路バーは中に span を 3 つ持つので、
 * その全部が白い錠剤になり、文字が塊に隠れて読めなくなった。
 * 中の span は素の文字に戻す。枠と背景は .step 自身だけが持つ。
 */
.steps .step span {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* 印だけは丸に戻す。上でまとめて消しているので、ここで描き直す */
.steps .step .step-mark {
	border: 1px solid var(--line-strong);
	background: var(--panel-raised);
	border-radius: 999px;
}

.steps .step[data-state="done"] .step-mark {
	background: var(--accent);
	border-color: var(--accent);
}

.steps .step[data-state="current"] .step-mark {
	background: var(--panel);
	border-color: var(--accent);
}

.steps .step[data-state="here"] .step-mark {
	background: var(--panel);
	border-color: var(--panel);
}

/* 繋いだカットの両端 -------------------------------------------------- */

/*
 * 1 コマ目と最後のコマは別のもの。
 * 前は同じ画像が両方に入っていて「ここから始めてここで終われ」＝
 * ほとんど動かない動画になっていた。取り違えないよう、絵で並べて示す。
 */
.frame-ends {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.frame-ends li {
	display: grid;
	gap: 4px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel-raised);
}

.frame-ends img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--r-sm);
}

.frame-end-empty {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	font-size: 12px;
	color: var(--ink-faint);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-sm);
}

/* 日英併記 ------------------------------------------------------------ */

/*
 * 【英語は手がかり、主役ではない】
 * 日本語より小さく、色を落とし、字間を空けて別の層に見せる。
 * 同じ大きさで並べると、どちらを読めばいいのか迷う。
 */
.term { display: inline-flex; align-items: baseline; gap: 6px; }
.term[data-stacked="true"] { flex-direction: column; align-items: flex-start; gap: 0; }

.term-en {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-faint);
	white-space: nowrap;
}

h1 .term-en { font-size: 12px; margin-left: 6px; vertical-align: middle; }
.steps .step-text strong { display: flex; align-items: baseline; gap: 6px; }
.steps .step[data-state="here"] .term-en { color: var(--accent-ink); opacity: 0.75; }

/* 上部ナビ ------------------------------------------------------------ */

.app-nav a[data-current="true"] { color: var(--ink); font-weight: 600; }

/* 本道と道具を分ける区切り */
.nav-sep {
	width: 1px;
	height: 16px;
	margin: 0 4px;
	background: var(--line-strong);
}

/* 残高。生成は全部有料なので、常に見える場所に置く */
.wallet {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	padding: 2px 5px;
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--ink);
}

.wallet-num { font-size: 14px; font-weight: 700; }
.wallet-unit { font-size: 10px; color: var(--ink-faint); }

/* 残り少ないときは色を変える。押す前に気付けるように */
.wallet[data-low="true"] {
	color: var(--warn, var(--render));
	border-color: currentColor;
}

/* 費用の札 ------------------------------------------------------------ */

/*
 * ボタンの中に置く。押す対象と費用が離れていると、
 * どの操作にいくらかかるのか結び付かない。
 */
.cost {
	display: inline-block;
	padding: 1px 6px;
	margin-left: 6px;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.10);
	color: inherit;
}

.btn.primary .cost { background: rgba(255, 255, 255, 0.22); }

/* 構成案（畳んだ一覧）------------------------------------------------- */

/*
 * 【既定は 1 行】
 * 前は 1 案 340px で、8 案なら 2,700px。見比べる以前に
 * どれを押すのかが読めなかった。開くのは見たい案だけ。
 */
.outline-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }

.outline {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
}

.outline[open] { border-color: var(--line-strong); }

.outline > summary {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 8px 12px;
	cursor: pointer;
	list-style: none;
}

.outline > summary::-webkit-details-marker { display: none; }
.outline > summary:hover { background: var(--panel-raised); }

.outline-no {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	background: var(--panel-raised);
	border: 1px solid var(--line-strong);
}

.outline-sum { display: grid; gap: 1px; min-width: 0; }
.outline-sum strong { font-size: 14px; }
.outline-sum .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.outline-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 16px;
	padding: 0 12px 12px;
	border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
	.outline-body { grid-template-columns: minmax(0, 1fr); }
}

.outline-body .timeline { max-height: 200px; overflow-y: auto; }
.outline-read > * { margin: 6px 0 0; }
.outline-act > * { margin-top: 10px; }

/* 手で立てるボードと、カットの追加 ------------------------------------- */

.board-new {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 10px 12px;
	margin: 8px 0 12px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-md);
}

.board-new input[type="text"] { flex: 0 1 220px; }

.shot-add { margin-top: 8px; }
.shot-add .btn { width: 100%; justify-content: center; border-style: dashed; }

/* カット制作の左側 ---------------------------------------------------- */

/*
 * 一覧と「カットを追加」を 1 つの箱に入れる。
 * 兄弟のまま並べると、追加ボタンがグリッドの 2 列目を取り、
 * 詳細が一覧の下に落ちて 300px 幅になった。
 */
.shot-side { display: grid; align-content: start; gap: 8px; min-width: 0; }

/*
 * 人物・商品・場所を横に並べる。
 * 縦に積むと、この 3 つだけで 300px を超えて、
 * 生成ボタンから遠ざかる（何を使うか見ないまま押すことになる）。
 */
.shot-assets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 16px;
	align-items: start;
}

@media (max-width: 900px) {
	.shot-assets { grid-template-columns: minmax(0, 1fr); }
}

/* 見比べるものなので、選択肢は小さめに畳む */
.shot-assets .asset-pick img { width: 64px; height: 40px; }
.shot-assets .asset-picks { gap: 6px; }

/*
 * 出来を確かめる場所。大きく出したいが、
 * 大きすぎると設定が画面の外に出て、押す前に確認できない。
 *
 * 中の img/video に上限を付けても効かない。
 * **高さを決めているのは容器の aspect-ratio** のほう。
 * 容器側を抑えて、中身をその中に収める。
 */
.shot-detail .preview {
	max-height: 360px;
	aspect-ratio: auto;
	min-height: 200px;
}

.shot-detail .preview img,
.shot-detail .preview video {
	max-height: 360px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* 参加と参加者 -------------------------------------------------------- */

.project-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

/* 返事待ちの数。見に行かないと分からない状態を作らない */
.badge {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 4px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--warn, var(--render));
	border-radius: 999px;
}

.join-card { display: grid; gap: 6px; align-content: start; }

/* 申し込みの状態。色だけで分けず、文字でも言う */
.join-state {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
}

.join-state[data-tone="wait"] { color: var(--accent); }
.join-state[data-tone="no"] { color: var(--ink-faint); }

.role-guide { display: grid; gap: 6px; list-style: none; margin: 6px 0 0; padding: 0; }
.role-guide li {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 10px;
	align-items: baseline;
	font-size: 13px;
}

.member-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }

.member {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: start;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
}

@media (max-width: 900px) {
	.member { grid-template-columns: minmax(0, 1fr); }
}

/* 待たせている人を目立たせる。埋もれると気付かれない */
.member[data-pending="true"] {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.member-who { display: grid; gap: 2px; min-width: 0; }
.member-msg { font-size: 13px; color: var(--ink-muted); }

.member-act { display: grid; gap: 8px; justify-items: start; min-width: 200px; }
.member-act .field { margin: 0; }
.member-role { display: grid; gap: 2px; font-size: 13px; }

/* 選べないものは、押せないと分かる見た目にする */
.choice[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* 権利の届出 ---------------------------------------------------------- */

.filing-list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }

.filing {
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
}

/* 承認待ちを目立たせる。埋もれると、待たせたままになる */
.filing[data-status="submitted"] {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.filing[data-status="rejected"],
.filing[data-status="revoked"] { opacity: 0.7; }

.filing-head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
}

.filing-kind {
	padding: 2px 8px;
	font-size: 11px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--ink-muted);
}

/* 状態は色だけで分けない。文字でも言う */
.filing-status { margin-left: auto; font-size: 12px; font-weight: 700; }
.filing-status[data-status="approved"] { color: var(--accent); }
.filing-status[data-status="submitted"] { color: var(--warn, var(--render)); }
.filing-status[data-status="rejected"],
.filing-status[data-status="revoked"] { color: var(--ink-faint); }

.filing-act {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
	.filing-act { grid-template-columns: minmax(0, 1fr); }
}

.scope-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 4px;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}

/* アセットの権利欄 ---------------------------------------------------- */

/*
 * 使える／使えないを、開く前に分かるようにする。
 * 生成を押してから断られると、そこまでの手間が無駄になる。
 */
.rights-stage[data-ok="false"] {
	border-color: var(--warn, var(--render));
	background: color-mix(in srgb, var(--warn, var(--render)) 6%, var(--panel-raised));
}

.rights-stage[data-ok="false"] .stage-no {
	background: var(--warn, var(--render));
}

.rights-attached { display: grid; gap: 6px; list-style: none; margin: 6px 0 0; padding: 0; }

.rights-attached li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--panel);
}

/* 承認待ちは目立たせる。通ったつもりで生成に進まれると困る */
.rights-attached li[data-status="submitted"] { border-color: var(--warn, var(--render)); }
.rights-attached li[data-status="approved"] { border-color: var(--accent); }
.rights-attached li[data-status="rejected"],
.rights-attached li[data-status="revoked"] { opacity: 0.65; }

.rights-line { display: grid; gap: 1px; min-width: 0; }

/*
 * 認証コード。**出来たものに焼き付く文字列そのもの**なので、
 * 画面でも同じ形（等幅・全部大文字）で出す。読み上げて照合する
 * ことがあるため、字送りを少し広げる。
 */
.rights-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  letter-spacing: 0.04em;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--sunk, rgba(0, 0, 0, 0.06));
}


/* トップ -------------------------------------------------------------- */

/*
 * 【言葉より現物】
 * 書いた文と、出来上がったコマを並べて置く。
 * 説明を読ませるより、これ 1 つのほうが早い。
 */
.hero { margin-bottom: 20px; }

.hero h1 {
	margin: 0 0 6px;
	font-size: clamp(24px, 4.4vw, 34px);
	line-height: 1.25;
}

.hero-lead {
	margin: 0 0 16px;
	/*
	 * 【ch で測らない】
	 * ch は「0」の幅が基になる。日本語は 1 文字がその倍あるので、
	 * 62ch と書いても実際は 30 文字ほどで折り返し、
	 * 最後の行が「す。」だけ残る形になった。rem で持つ。
	 */
	max-width: 46rem;
	font-size: 15px;
	line-height: 1.85;
	color: var(--ink-muted);
	text-wrap: pretty;
}

/* .hero-points は使わなくなった（強みは .strengths に置き換え） */


/* 見出しは 1 段だけ。節ごとに箱を作らない */
.home-h2 {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 24px 0 8px;
	font-size: 16px;
}

/* 進め方。番号と中身を横に組む */
.guide-steps { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }

/*
 * 進め方の各段。外側の箱が枠を持っているので、ここには引かない。
 * 白い箱の中に白い箱ができて、どちらが 1 つのまとまりか読めなくなる。
 */
.guide-steps li {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin: 0 10px;
	padding: 10px 14px;
	border-radius: var(--r-md);
	background: var(--panel-raised);
}

.guide-no {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent-ink);
	background: var(--accent);
	border-radius: 999px;
}

.guide-body { display: grid; gap: 1px; min-width: 0; }
.guide-body strong { display: flex; align-items: baseline; gap: 6px; font-size: 15px; }
.guide-body p { margin: 0; font-size: 13px; }

/* 残りは畳む。初めて開いた瞬間に要る話ではない */
.home-more {
	margin-top: 24px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
}

.home-more > summary {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.more-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 12px;
}

.more-grid h3 { margin: 0 0 6px; font-size: 13px; }

.link-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.link-list li { display: grid; gap: 1px; font-size: 13px; padding:10px;}

/* いま押すもの */
.start-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 16px 20px;
	border: 1px solid var(--accent);
	border-radius: var(--r-lg);
	background: var(--accent-soft);
}

.start-body { display: grid; gap: 4px; min-width: 0; }
.start-body h2 { margin: 0; font-size: 19px; }
.start-body p { margin: 0; }

/* --- 狭い画面 ------------------------------------------------------- */

@media (max-width: 900px) {
	.start-card { grid-template-columns: minmax(0, 1fr); }
	.start-card .btn { justify-content: center; }

	.more-grid { grid-template-columns: minmax(0, 1fr); }
}

/* スマホ ------------------------------------------------------------- */

/*
 * 【まずヘッダー】
 * 実測で、375px の画面に対して**ヘッダーだけで 893px** あった。
 * 本文がどれだけ整っていても、ここが伸びるとページ全体が横に広がり、
 * 文字が小さく潰れる。原因は 8 つ並んだナビが折り返さないこと。
 *
 * 折り返さず、**横に流す**。押せる幅は保ったまま、
 * 指で払って続きを見られるようにする。
 */
@media (max-width: 900px) {
	.app-header {
		flex-wrap: wrap;
		gap: 8px 12px;
		height: auto;
		padding: 8px 12px;
	}

	.app-nav {
		order: 3;
		flex: 1 0 100%;
		overflow-x: auto;
		/* 端で切れているのが分かるよう、少しはみ出させる */
		padding-bottom: 2px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.app-nav::-webkit-scrollbar { display: none; }

	/*
	 * 【続きがあることを見せる】
	 * 幅が足りないと「クレジット」「管理」が枠の外に出る（実測で
	 * 中身 443px / 見えるのは 351px）。横に動かせば出てくるが、
	 * 見た目に何も出ていないと**そこに項目があること自体が伝わらない**。
	 *
	 * 端の影は、その向きに続きがあるときだけ出る。
	 * 白い覆いは中身と一緒に動き（local）、影は枠に貼り付く（scroll）ので、
	 * 端まで送ると覆いが影を隠す。
	 */
	.app-nav {
		background:
			linear-gradient(90deg, var(--canvas) 30%, rgba(255, 255, 255, 0)) left / 24px 100% no-repeat local,
			linear-gradient(90deg, rgba(255, 255, 255, 0), var(--canvas) 70%) right / 24px 100% no-repeat local,
			radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, 0.16), rgba(16, 24, 40, 0)) left / 12px 100% no-repeat scroll,
			radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, 0.16), rgba(16, 24, 40, 0)) right / 12px 100% no-repeat scroll;
	}
	.app-nav a { white-space: nowrap; }

	/* 区切りは縦線のままだと潰れる。間隔で分ける */
	.nav-sep { height: 12px; margin: 0 2px; }

	.wallet { margin-left: auto; }

	/* 名前と所属は長い。折り返して 2 行に */
	.session-badge { flex-wrap: wrap; gap: 4px 8px; }
	.session-badge .slate { font-size: 11px; }
}

/*
 * 【本文】
 * 左のツリーは幅を食う。狭い画面では畳んで、本文を全幅にする。
 */
@media (max-width: 900px) {
	.app-body[data-with-tree="true"] { grid-template-columns: minmax(0, 1fr); }

	/*
	 * 左のツリーは畳む。狭い画面では本文の幅がすべてで、
	 * 240px を常時取られると作業できない。
	 * 行き先は順路バーと画面内のリンクから辿れる。
	 */
	.project-sidebar { display: none; }
	.app-main { padding: 12px; }

	/* 2 列以上の作業画面は 1 列に落とす */
	.workspace,
	.asset-workspace,
	.shot-workspace,
	.outline-body,
	.struct-inner { grid-template-columns: minmax(0, 1fr) !important; }

	/* 横に並べる前提の組みも縦に */
	.shot-assets { grid-template-columns: minmax(0, 1fr); }
	.frame-ends { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* 順路バーは 5 つ。2 列だと 3 段になるので横に流す */
	.steps {
		display: flex;
		/* base.css が wrap を付けている。継ぐと 200px × 5 が 3 段に折れる */
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 6px;
		padding-bottom: 4px;
		scrollbar-width: none;
	}
	.steps::-webkit-scrollbar { display: none; }
	.steps .step { flex: 0 0 200px; }

	/* 次にやること、は縦に積む */
	.next-up { grid-template-columns: minmax(0, 1fr); }

	/* 表は横に流す。文字を縮めると読めなくなる */
	.table { display: block; overflow-x: auto; white-space: nowrap; }
	
	.in_table .form-table tr th,
	.in_table .form-table tr td {
		border-top: none;
	}

	/*
	 * 【組みの表は縦に積む】
	 * 撮影方法｜被写体、参照画像｜音 を横に並べているが、表は狭くなっても
	 * 列を保つ。スマホでは 2 列のまま潰れ、その半分の幅に「名前＋中身」の
	 * 表が入るので読めなくなる。
	 *
	 * 桝を block にすると border-spacing（桝の間の 2rem）が効かなくなるので、
	 * 桝そのものに margin を持たせて空ける。
	 */
	.in_table,
	.in_table > tbody,
	.in_table > tbody > tr,
	.in_table > tr,
	.in_table > tbody > tr > td,
	.in_table > tr > td {
		display: block;
		width: auto;
	}
	.in_table {
		border-spacing: 0;
		margin-top: 0;
	}
	.in_table > tbody > tr > td + td,
	.in_table > tr > td + td {
		margin-top: 1.5rem;
	}
	.in_table > tbody > tr + tr,
	.in_table > tr + tr {
		display: block;
		margin-top: 1.5rem;
	}

	.td_in2, .td_in {
	    padding: 0 0 0 0.75rem;
	    vertical-align: top;
	    border-left: 1px solid var(--line);
	}
	.panel{
		padding:5px;
	}

	/*
	 * 【見出しのボタン列は 1 行を丸ごと使う】
	 * 広い画面では :last-child に flex: 0 0 auto を当てている。
	 * 真ん中の 0 は flex-shrink: 0 なので**縮まない**。ボタンを横に
	 * 並べたままの幅を保ち、狭い画面では画面の外へ出る
	 * （管理の画面で 519px。390px の画面を 144px はみ出していた）。
	 *
	 * 1 行を渡せば、中の flex-wrap: wrap が効いて折り返る。
	 */
	.page-head > :last-child:not(:first-child) {
		flex: 1 1 100%;
	}

}

/*
 * 【指で押せる大きさ】
 * 小さいボタンが並ぶ画面（参加者・届出・候補）は、
 * 狭い画面だと隣を押しやすい。高さを確保する。
 */
@media (max-width: 900px) {
	.btn, a.btn { min-height: 38px; }
	.btn.small, a.btn.small { min-height: 34px; }

	/* 押せるものは横幅いっぱいに。狙う必要をなくす */
	.btn-row { flex-wrap: wrap; }
	.btn-row > .btn { flex: 1 1 auto; justify-content: center; }
	.member, .filing-act, .rights-attached li { grid-template-columns: minmax(0, 1fr); }
	.member-act { justify-items: stretch; min-width: 0; }
}


/*
 * 【書き方の例】
 * 「こうなる」の帯を外したので、残った例文を単独で置けるようにする。
 * 引用の体裁にして、説明文と地の文が混ざらないようにする。
 */
.hero-example-tag {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ink-faint);
}

.hero-example {
	margin: 0;
	padding: 12px 14px;
	max-width: 72ch;
	border-left: 3px solid var(--accent, var(--accent));
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	background: var(--surface-2, #f6f7f9);
	font-size: 14px;
	line-height: 1.7;
}


/* --- アセットの作り方タブ ------------------------------------------- */

/*
 * 【参照画像の欄は 200px では足りない】
 * base.css の 200px は Next.js 版の名残で、あちらは画像 1 枚と
 * ボタンだけだった。こちらは取り込みの欄と保管庫から選ぶ欄が入るので、
 * 200px だとボタンの文字が折り返して縦に伸びる。
 */
.asset-build .build-body[data-with-reference="true"] {
	grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

/*
 * 【参照画像を使わないタブでは 1 列に戻す】
 * 「文字情報だけで生成」では左の枠が hidden になる。
 * grid の指定はそのままなので、放っておくと**左に空の列が残り**、
 * 属性欄だけが右半分に寄る。隠れているときは 1 列にする。
 */
.asset-build .build-body:has(> .build-reference[hidden]) {
	grid-template-columns: minmax(0, 1fr);
}

/* 参照画像の枠。2 つの取り込み方を上下に置く */
.asset-build .build-reference {
	display: grid;
	gap: 12px;
	align-content: start;
}

/*
 * いま参照になっている絵。
 * 前は「（差し替え）」という字だけで、何が入っているのか見えなかった。
 * 幅いっぱいに伸ばすと、縮小画像ではなく本体に見える。上限を決める。
 */
.ref-current {
	display: grid;
	gap: 4px;
	margin: 0;
	justify-items: start;
}

.ref-current img {
	display: block;
	width: 132px;
	height: 132px;
	object-fit: contain;
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.ref-current figcaption {
	font-size: 11px;
	line-height: 1.5;
	color: var(--ink-faint);
}

.ref-ways {
	display: grid;
	gap: 8px;
}

/*
 * 取り込みの枠。
 * ブラウザ既定のファイル欄は隠してあるので、ここに出るのは
 * 押せるボタンと、落とせることの但し書きだけ。
 */
.ref-ways .dropzone {
	display: grid;
	justify-items: start;
	gap: 6px;
	padding: 10px;
	margin: 0;
	cursor: pointer;
}

.ref-ways .dropzone .btn {
	pointer-events: none;
}

.ref-ways form {
	margin: 0;
}

/*
 * 企画ごとの設定。
 * 右側の 1・2 は「そのアセット 1 件」の話で、こちらは企画全体の話。
 * 同じ並びに見えると、アセットを選び直すたびにやり直すものに読める。
 * 地の色を変えて、別の話だと分かるようにする。
 */
.plan-scope {
	background: var(--panel);
}

.plan-scope .slate {
	display: block;
	margin-bottom: 2px;
}

/* 本筋ではないボタン。押せるが、目は引かない */
.btn.quiet {
	background: none;
	border-color: transparent;
	color: var(--ink-faint);
	text-decoration: underline;
}

.btn.quiet:hover {
	color: var(--ink);
	background: var(--panel-raised);
}

/*
 * 選んだ絵を、送る前に手元で出す。
 * 送って戻るまで数秒かかるので、その間を空白にしない。
 */
.drop-preview {
	display: block;
	margin-top: 6px;
}

.drop-preview img {
	display: block;
	width: 100%;
	max-height: 120px;
	object-fit: contain;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}

.asset-build .build-input {
	display: grid;
	gap: 12px;
	align-content: start;
}

/* 作る / 保存 は並べる。保存が主役に見えないよう primary は 1 つだけ */
.asset-build .btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (max-width: 900px) {
	.asset-build .build-body[data-with-reference="true"] {
		grid-template-columns: minmax(0, 1fr);
	}
	/* タブは 3 つ。狭いと折り返すより横に流したほうが位置が変わらない */
	.asset-build .build-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	.asset-build /*
 * タブは button のことも a のこともある。お金の画面は住所で
 * 切り替えるので a（そのまま貼って共有できる）。見た目は同じ。
 */
.build-tabs button,
.build-tabs > a[role="tab"] {
		white-space: nowrap;
	}
}


/* --- 作った画像の候補 ------------------------------------------------ */

/*
 * 【採用中の 1 枚を目で分かるようにする】
 * 文字の「・採用中」だけだと、並んだ中から探すのに読む必要がある。
 * カットに渡るのはこの 1 枚だけなので、枠で分かるようにする。
 */
.thumb-row li[data-adopted="true"] {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* 操作は縦に積む。1 枚の幅は狭いので横に並べると文字が折れる */
.thumb-actions {
	display: grid;
	gap: 4px;
	margin-top: 4px;
}

.thumb-actions form {
	display: block;
}

.thumb-actions .btn {
	width: 100%;
	justify-content: center;
	white-space: nowrap;
}


/* --- ストーリーボードの 2 つの作り方 --------------------------------- */

/*
 * 【並べて見せる】
 * 縦に積むと、上のほうだけ読んで決めてしまう。
 * 横に並べれば、選ぶ前に両方が目に入る。
 */
.board-ways {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 20px;
	/* 高さを揃える。片方だけ下に伸びると、選べる 2 つに見えない */
	align-items: stretch;
}

.board-ways .way {
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
}

/* おすすめのほうは枠を強くする。どちらでもよい、では選べない */
.board-ways .way[data-way="auto"] {
	border-color: var(--accent);
}

/* 企画概要が足りないと A は進めない。薄くして理由を中に出す */
.board-ways .way[data-blocked="true"] {
	border-color: var(--line);
}

.way-head {
	display: flex;
	align-items: start;
	gap: 10px;
}

.way-head h3 {
	margin:0 1rem 0 0;
	font-size: 16px;
	float:left;
}

.way-head > div {
	gap: 4px;
	width:100%;
}

/* A / B の丸。順路の番号と同じ形にして、選ぶものだと分かるようにする */
.way-no {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

/* 構成案の見出しに添える分は、行の中に収める */
.way-no[data-inline="true"] {
	display: inline-grid;
	vertical-align: middle;
	width: 22px;
	height: 22px;
	font-size: 12px;
}

.way-tag {
	justify-self: start;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	float:right;
}

.way-tag[data-tone="free"] {
	background: var(--panel-raised);
	color: var(--ink-muted);
	border: 1px solid var(--line);
}

.board-ways .way > p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}

/* 手順と費用。押す前に何回課金されるか分かるようにする */
.way-steps {
	display: grid;
	gap: 4px;
	margin: 0;
	padding-left: 20px;
	font-size: 13px;
	color: var(--ink-muted);
}

.board-ways .board-new {
	display: grid;
	gap: 8px;
}

@media (max-width: 900px) {
	/* 横に 2 枚は入らない。積むが、順に読めば同じことが伝わる */
	.board-ways { grid-template-columns: minmax(0, 1fr); }
}


/* ==================================================================== */
/*	配色																																	*/
/* ==================================================================== */

/*
 * 【色に役割を 1 つずつ持たせる】
 *
 * 前は紙色の地に彩度を落とした色で組んだが、面と地の差が小さく、
 * どれが押せるのかも、どれが状態なのかも読み取れなかった。
 * 「分かりにくい」の原因は色数ではなく、**役割の重なり**だった。
 *
 * 役割を 4 つに分け、重ならない色相を当てる。
 *
 *	 青	 操作			… 押せるもの、いま居るところ
 *	 緑	 済み			… 出来上がったもの
 *	 橙	 生成中		… 走っているもの、期限が近いもの
 *	 赤	 止まった	… 失敗、残高不足、期限切れ
 *
 * 費用はこの 4 つのどれでもない。**数字**なので色を持たせず、
 * 濃い墨色の札にする。状態の色と competing させない。
 *
 * ここが色の決め場所。**このファイルにはもう 1 か所 :root があるが、
 * そちらには色を置かない**（後ろが勝つので、前を直しても効かないため）。
 * base.css は Next.js 版の写しなので触らない。
 */
:root {
	/* 地と面 -------------------------------------------------------
		 地を白から離す。面（白）が浮いて、どこが 1 枚の箱かが分かる。
		 青みの灰から**暖かい灰**へ寄せた。生成物は肌と食べ物が多く、
		 青い地に置くと写真だけが冷たく浮く。 */
	--canvas: #f4f2f0;
	--panel: #ffffff;
	--panel-raised: #faf9f8;
	--panel-sunk: #f0eeeb;

	--line: #e7e4e0;
	--line-strong: #cfcac4;

	/* 文字。地が白の上で 12:1 以上を確保する */
	--ink: #1c1a18;
	--ink-muted: #57534e;
	--ink-faint: #8a837c;

	/*
	 * 【押せる色と、いま居る色を分ける】
	 * 前は両方が青だった。押すところと、選んであるところが同じ色だと、
	 * 画面のどこが操作でどこが状態なのか読み分けられない。
	 *
	 *   墨   操作  … ボタン。面の中でいちばん濃く、必ず押せる
	 *   朱   在処  … いま居るところ、選んであるもの、数の札
	 *
	 * 朱は止まった赤（`--blocked`）より暗く濁らせて、警告と混ざらないようにする。
	 */
	--accent: #22201e;
	--accent-ink: #ffffff;
	--accent-soft: rgba(34, 32, 30, 0.06);

	--brand: #b4232f;
	--brand-ink: #ffffff;
	--brand-soft: rgba(180, 35, 47, 0.08);

	/* 状態。3 つとも色相を離す */
	--render: #a55a09;	 /* 生成中・期限が近い */
	--done: #1a7a4f;		 /* 済み */
	--blocked: #c0392b;	/* 失敗・残高不足・期限切れ。淡い下地の上で 4.5 を満たす濃さ */

	/* 状態の淡い下地。札にしたときの地に使う */
	--render-soft: #fdf3e7;
	--done-soft: #e8f4ee;
	--blocked-soft: #fceeec;

	/* 費用は状態ではない。色を持たせず、濃い札にして数字を読ませる */
	--cost: #22201e;
	--cost-soft: #efece9;
}

body { background: var(--canvas); }

/*
 * 【費用は数字として読ませる】
 * 前は朱にしていたが、赤は「止まっている」に使う色なので、
 * ボタンの横に赤い札があると危険の合図に見えた。
 * 色を外し、濃い墨の札に白抜きで置く。金額として読める。
 */
.cost {
	background: var(--cost);
	color: #ffffff;
	font-variant-numeric: tabular-nums;
}

/* 主ボタンの中は下地が濃いので、白い半透明に戻す */
.btn.primary .cost,
a.btn.primary .cost {
	background: rgba(255, 255, 255, 0.22);
	color: var(--accent-ink);
}

/*
 * 【押せるものを、面から持ち上げる】
 * 主ボタンだけ影を持たせる。同じ画面にボタンが並んでも、
 * 「まずこれ」が 1 つに決まる。
 */
.btn.primary,
a.btn.primary {
	box-shadow: var(--shade-1);
}

/* 面は白のまま、縁で区切る。影は薄く 1 段だけ */
.panel,
.start-card,
.asset-stage,
.home-more {
	box-shadow: var(--shade-1);
}

/* ==================================================================== */
/*	トップの部品																													*/
/* ==================================================================== */

/*
 * 【強みは 2 枚だけ】
 * 機能を並べると、どれが要のところか分からなくなる。
 * 実際に他と違うのは「見た目をそろえる」と「長い尺をつなぐ」の 2 つ。
 * 2 枚に絞って、それぞれに文章を持たせる。
 */
.strengths {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.strengths li {
	display: grid;
	gap: 6px;
	align-content: start;
	padding: 14px 16px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	/* 左の縁だけ主色。2 枚が並びとして読める */
	border-left: 3px solid var(--accent);
}

.strength-tag {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--accent);
}

.strengths p {
	margin: 0;
	font-size: 13px;
	line-height: 1.75;
	color: var(--ink-muted);
}

/*
 * 【入れ物の構造】
 * 順路（5 段）だけだと「プロジェクト」と「企画」の関係が読めない。
 * 入れ子を、そのまま字下げの入れ子で描く。図を別に用意するより、
 * 崩れないし、狭い画面でも読める。
 */
.structure {
	display: grid;
	gap: 10px;
	padding: 14px 16px;
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.structure-tier {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
}

.structure-tier[data-indent="1"] { padding-left: 22px; }
.structure-tier[data-indent="2"] { padding-left: 44px; }

.structure-box {
	padding: 3px 10px;
	background: var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	white-space: nowrap;
	font-weight: 500;
}

/*
 * 【入れ子は 1 色の濃淡で示す】
 * ここで表しているのは「どれがどれの中にあるか」であって、状態ではない。
 * 状態の色（緑・橙・赤）を借りると、走っている/止まっているに見える。
 * 青 1 色の濃さだけで、外側と作るところを分ける。
 */
.structure-box[data-role="outer"] {
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 700;
}

.structure-box[data-role="leaf"] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	font-weight: 700;
}

.structure-arrow { color: var(--ink-faint); }

.structure-note {
	font-size: 12px;
	color: var(--ink-muted);
}

/*
 * 【覚えておく 3 つ】
 * 操作説明書の冒頭と同じ 3 つ。横に 3 枚並べて、
 * 順路に入る前に目を通せる量にとどめる。
 */
.creed {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.creed li {
	display: grid;
	gap: 4px;
	align-content: start;
	padding: 14px 16px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.creed strong { font-size: 13px; }
.creed p { margin: 0; line-height: 1.7; }

@media (max-width: 900px) {
	/* 3 枚は横に入らない。2 枚 + 1 枚より、積むほうが読む順が決まる */
	.creed { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.strengths { grid-template-columns: minmax(0, 1fr); }
	/* 字下げは詰める。狭いと箱が折り返して意味が崩れる */
	.structure-tier[data-indent="1"] { padding-left: 10px; }
	.structure-tier[data-indent="2"] { padding-left: 20px; }
}


/* ==================================================================== */
/*	状態は札にする																												*/
/* ==================================================================== */

/*
 * 【10px の文字では読めない】
 * 元は色の付いた 10px の大文字だけだった。
 * カットが並ぶ画面では、どれが出来ていてどれが走っているのかを
 * 一覧で見たいのに、目を近づけないと分からない。
 *
 * 下地を持たせて札にする。色と形の両方で分かるので、
 * 色が見分けにくい人にも形で伝わる。
 */
.status {
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.06em;
	background: var(--panel-raised);
	color: var(--ink-muted);
}

.status[data-state="succeeded"] {
	background: var(--done-soft);
	color: var(--done);
}

.status[data-state="running"],
.status[data-state="queued"] {
	background: var(--render-soft);
	color: var(--render);
}

.status[data-state="failed"],
.status[data-state="blocked"] {
	background: var(--blocked-soft);
	color: var(--blocked);
}

/*
 * 【いま押すものの箱は、下地を薄く】
 * 主ボタンと同じ青を面いっぱいに敷くと、ボタンと箱が同じ強さになり
 * どちらを押すのか決まらない。箱は縁だけ青、下地はごく薄くする。
 */
.start-card {
	background: var(--panel);
	border-width: 2px;
}


/* --- 保管庫の残り時間 ------------------------------------------------ */

/*
 * 24 時間で消えるので、あとどれだけ置けるかを出す。
 * 残り 3 時間を切ったら色を変える。落とす判断はそこで要る。
 */
.stash-left {
	font-size: 11px;
	font-weight: 700;
	color: var(--ink-faint);
}

.stash-left[data-soon="true"] {
	color: var(--blocked);
}

/* 引き出しの取り込みは、選ぶボタンと同じ行に並べる */
.picker .btn-row {
	flex-wrap: wrap;
	gap: 6px;
}

/* ==================================================================== */
/*	トップ（案内の面）																										 */
/* ==================================================================== */

/*
 * ここだけ他の画面と作りが違う。
 * 中の画面は「作業する場所」だが、ここは「読んで決める場所」。
 * 幅も余白も、文章が読める寸法に取る。
 */
.lp {
	display: grid;
	gap: 28px;
}

/* --- 帯。何のためのものかを 1 行で ---------------------------------- */
/* --- 表題。全幅で一番上 ---------------------------------------------- */
.lp-title {
	/* display: grid; */
	display:none;
	gap: 32px;
	align-items: center;
	/* border-bottom: 1px solid var(--line); */
}

/* 絵があるときだけ 2 列。無いときに枠だけ残すと壊れて見える */
.lp-title[data-with-art="true"] {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
}

.lp-title h1 {
	margin:5px;
	/*
	 * 【題は題の大きさにする】
	 * 前は 19px / 400。その下の項目（15px / 700）のほうが太くて大きく、
	 * 段が逆さになっていた。看板らしさは字間で出しているので、
	 * 大きさと太さは素直に段どおりにする。
	 */
	/*
	 * 【いまは、強さを大きさで作る】
	 * 26px を字間 0.18em で伸ばし、色は --accent だった。
	 * 青は「押せる」の色なので、押せない題に使うと合図が濁る。
	 * 色は墨に戻し、そのぶん大きさで段を作る。
	 * 画面幅で伸び縮みさせるのは、狭い画面に 44px が入らないため。
	 */
	font-size: 2rem;
	line-height: 1.35;
	font-weight: 700;
	/* 大きい字は字間を詰める。空けると間延びする */
	letter-spacing: 0.01em;
	color: var(--ink);
}

.lp-lead {
	margin: 0;
	/*
	 * 1 行が長すぎると、目が次の行の頭を見失う。
	 * em で決めると、和文（全角）と英文で折れる字数が倍ちがう。
	 * px で決めて、和文で 37 字ほどに収める。
	 */
	max-width: 560px;
	font-size: 15px;
	line-height: 1.95;
	color: var(--ink-muted);
}

.lp-art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-md);
}

/* --- 入口（ログイン・新規登録） --------------------------------------- */
/*
 * 入る前の画面は、中の画面と作りが違う。ナビも残高も無いので、
 * 1 枚の札を画面の真ん中に置き、そこに入る道だけを並べる。
 */
.gate {
	display: grid;
	place-items: center;
	min-height: 72vh;
	padding: 40px 16px;
}

.gate-card {
	width: 100%;
	max-width: 380px;
	padding: 32px 30px 26px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--panel);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
}

/* 名乗りは小さく。題のほうを読ませる */
.gate-mark {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.gate-title {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--ink);
}

.gate-lead {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--ink-muted);
}

.gate-form {
	display: grid;
	gap: 14px;
	margin: 18px 0 0;
}

/* 入る釦は全幅。迷う余地を作らない */
.gate-go {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}

.gate-again {
	margin: 12px 0 0;
}

/* 「または」。線を引いて、上下が別の道だと言う */
.gate-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 14px;
	font-size: 12px;
	color: var(--ink-muted);
}

.gate-or::before,
.gate-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

.gate-others {
	display: grid;
	gap: 8px;
}

.gate-other {
	width: 100%;
	justify-content: center;
}

.gate-foot {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--ink-muted);
}

.gate-foot a {
	font-weight: 600;
}

/* --- プロジェクトの札。一覧とトップを 1 枚にまとめたもの ------------- */
/*
 * 1 本 1 枚。名前・次の工程・進み具合・中身の数を、同じ札に載せる。
 * 前は「進行中」（名前と進み具合）と「一覧」（名前と数）に分かれていて、
 * 同じプロジェクトが 2 か所に出ていた。
 */
.proj-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0 18px 4px;
	list-style: none;
}

.proj-card {
	display: grid;
	gap: 10px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
	color: inherit;
	text-decoration: none;
	transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.proj-card:hover,
.proj-card:focus-visible {
	border-color: var(--line-strong, var(--line));
	box-shadow: 0 2px 10px rgba(16, 24, 40, .07);
	transform: translateY(-1px);
}

/* 続きの 1 本だけ、左に細い印を置く。色は足さず、太さで言う */
.proj-card[data-resume="true"] {
	border-left: 3px solid var(--brand, var(--ink));
}

.proj-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.proj-name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--ink);
}

/* 次にやることは右端。押す前に「どこへ行くか」が読める */
.proj-next {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: none;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-muted);
}

.proj-card:hover .proj-next {
	color: var(--ink);
}

.proj-next svg {
	opacity: .7;
}

/* 数と企画名は、いちばん下に細く。読む人だけが読む */
.proj-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	font-size: 12px;
	color: var(--ink-muted);
}

.proj-count {
	flex: none;
}

.proj-plans {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 720px) {
	.proj-top {
		flex-direction: column;
		gap: 4px;
	}
}

/* --- 左右 2 列。左は読むもの、右は押すもの -------------------------- */
.lp-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 32px;
	align-items: start;
}

.lp-col {
	display: grid;
	gap: 22px;
	align-content: start;
}

/*
 * 節はすべてこの部品で作る。見出し・余白・罫を共通にすれば、
 * 中身が違っても 1 つの面に見える。
 * 前は箱・青い帯・素の見出しが混在していて、揃って見えなかった。
 */
.lp-block {
	padding:0 0 20px 0;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--panel);
	/*
	 * ごく浅い影。地（--canvas）から 1 枚持ち上げると、
	 * どこからどこまでが 1 つの節かが、線を足さずに分かる。
	 */
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* 見出しは塗らない。塗りが並ぶと、どれが大事なのか読めない */
.lp-block-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding:9px 20px;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ink);
	/*
	 * ふつうの章の帯は色を持たない。
	 * 前は #d0deff（はっきりした青）で、自分が動く場所（薄い青）より
	 * **目立っていた**。強さが逆になっていた。
	 */
	background: var(--panel-raised);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.lp-block-head + .hint{
	margin:15px;
}


/*
 * 自分が動く場所（進行中・参加できる）。
 * 前は #ffa1cb の濃いピンクで、そこだけ彩度が浮いていた。
 * 意味の違いは、同じ系統の中の濃さと、左の印で出す。
 */
.lp-block-hd2 {
	/*
	 * 前は rgb(255 88 88 / 41%) の直書きだった。
	 * 赤は「止まった」に取ってある色なので、進行中の見出しに置くと
	 * 不具合の合図に見える。同じ青の系統で、濃さだけ変えて示す。
	 */
	background: var(--accent-soft);
	color: var(--accent);
	border-bottom-color: rgba(31, 94, 235, 0.18);
}

.lp-group{
	padding:0 20px;
}

.lp-topic{
	padding:0 20px;
}

/*
 * 【機能・費用・注意点は畳んでおく】
 * トップに来る目的は「続きをやる」ことで、説明を読むことではない。
 * 開いたままだと、その下の進行中まで遠くなる。
 *
 * details を使うのは、閉じていることと押せることが見た目で分かるから。
 * タブだと「いま開いている面」に見え、閉じているとは伝わらない。
 */
details.lp-topic > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
}

/* 既定の三角は行頭に出て字と離れる。自前の印を右端に置く */
details.lp-topic > summary::-webkit-details-marker { display: none; }

details.lp-topic > summary::after {
	content: "＋";
	margin-left: auto;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-faint);
}

details.lp-topic[open] > summary::after { content: "−"; }

details.lp-topic > summary:hover { color: var(--accent); }

/* 開いた中身は少し下げて、見出しに属していることを示す */
details.lp-topic > .link-list { margin-top: 10px; }

/*
 * 【進行中は 1 本 1 行。枠ごと押せる】
 * 中にボタンを置くと「枠を押すのか、ボタンを押すのか」を選ばせる。
 */
.run-list {
	display: grid;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0 20px;
	list-style: none;
}

/*
 * 【中の行に枠を付けない】
 * 外側の箱（.lp-block）が既に枠を持っている。中にも枠を引くと
 * 白い箱の中に白い箱ができて、どちらが 1 つのまとまりか読めない。
 * 地の色で分け、触れたときだけ色を変える。
 */
.run-list a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 12px;
	align-items: center;
	padding: 9px 12px;
	border-radius: var(--r-sm);
	background: var(--panel-raised);
	color: inherit;
	text-decoration: none;
}

.run-list a:hover { background: var(--accent-soft); }

/* いちばん上が「続きから」。そこだけ立てる */
.run-list a[data-resume="true"] {
	background: var(--accent-soft);
	box-shadow: 0 0 2px 0 #575757;
}

.run-name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.run-next {
	grid-column: 1 / -1;
	font-size: 12px;
	color: var(--ink-muted);
}

.run-list .plan-progress { justify-self: end; }

/* 件数。見出しの一部だが主役ではないので小さく丸く */
.lp-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--r-md);
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
}

/*
 * 節の中の話題。
 *
 * 【区切りを引く】
 * 前は小見出しと箇条書きが続けて並ぶだけで、どこまでが 1 つの話題か
 * 読めなかった。話題ごとに枠を作り、間に薄い線を引く。
 */
.lp-topic + .lp-topic {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

/*
 * 【2 列に折るのはやめた】
 * 「機能・費用・注意点」は畳むようにしたので、閉じていれば 3 行しかない。
 * 2 列に割る必要が無くなった。
 *
 * 前はここに `//display: grid;` と書いて止めてあったが、
 * CSS に `//` の註釈は無い。その行は無視されるだけで、
 * **同じ塊の中の他の指定は生きていた**（区切り線が消え、
 * 偶数番目に左の縦線が付いたまま）。
 * 止めるつもりなら、塊ごと消すのが確実。
 */


/* 節の中の小見出し。左に印を付けて、本文と段を分ける */
/*
 * 【同じ段は同じ見た目に】
 * 章の中の項目は、クラスの有無にかかわらず同じにする。
 * 前は class の無い h3 が 15px / 700、.lp-sub が 12px / 700 で、
 * 同じ段が 2 種類あった。段が 4 つあるように見えていた。
 */
.lp-block h3 {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ink);
}

.lp-sub {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ink);
}

.lp-sub::before {
	content: "";
	flex: 0 0 auto;
	width: 3px;
	height: 12px;
	border-radius: var(--r-sm);
	background: var(--accent);
}

/*
 * 箇条書き。小見出しより 1 段下げる。
 * 段が付いていないと、見出しと中身が同じ重さに見える。
 */
.lp-topic .link-list {
	margin: 0;
	padding-left: 11px;
	border-left: 1px solid var(--line);
}

.lp-topic .link-list > li {
	padding: 0px;
}

/* 押せる行と、読むだけの行を見分けられるようにする */
.lp-topic .link-list > li > a,
.lp-topic .link-list > li > .link-list-plain {
	display: block;
}

.lp-topic .link-list .hint {
	display: block;
	line-height: 1.85;
}

/* 特徴の 1 群 */
.lp-group + .lp-group {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

/*
 * 章の中の項目。大きさと太さは .lp-block h3 に任せる。
 * ここで別に決めていたので、同じ段が 15px/700 と 14px/600 の
 * 2 種類になっていた。
 */
.lp-group h3 {
	margin: 0 0 6px;
}

.lp-group > p {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--ink-muted);
	margin:0 0.5rem 0.5rem 0.5rem;
}

.lp-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

/*
 * 特徴の中の札。
 * 前は地の色だけで分けていたが、外側の節も薄い面なので縁が溶けていた。
 * 細い線を 1 本入れて、札として立たせる。
 */
.lp-card {
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel-raised);
}

.lp-card strong {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
}

.lp-card p {
	margin: 0;
	font-size: 12px;
	line-height: 1.8;
	color: var(--ink-muted);
}

/* 続きから。ここだけは押させたいので、面の中で一段持ち上げる */
/*
 * 「続きから」の札。
 * 前は #ffeaea の赤い地だった。このファイルの決め方では
 * **赤は「止まった」**（失敗・残高不足・期限切れ）。
 * 続きは止まっていない。いちばん押してほしいものなので、
 * 操作の色（青）の淡い地にする。
 */
.lp-resume {
	display: grid;
	gap: 8px;
	margin: 10px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--accent-soft);
}

.lp-resume strong {
	font-size: 15px;
	line-height: 1.5;
}

.lp-resume .btn { justify-self: start; margin-top: 2px; }

/* 下に並ぶ細い導線 */
.lp-links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 10px 0 0 15px;
	font-size: 12px;
}

.lp-links a { text-decoration: underline; text-underline-offset: 3px; }

/* 索引ではない行。リンクと同じ並びに置くが、押せないと分かる形にする */
.link-list-plain { font-weight: 700; color: var(--ink); }

/* おさえどころ。見出しに下線を引いて、3 つの区切りを作る */
/* 青い見出し帯を持つ箱。他の画面でも使う */
.lp-box-head {
	margin: 0;
	padding: 10px 16px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.lp-box-body {
	padding: 16px;
	border: 1px solid var(--line);
	border-top: none;
	background: var(--panel);
}

.lp-more-link {
	display: grid;
	gap: 6px;
	margin: 14px 0 0;
	font-size: 13px;
}

.lp-more-link a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	/* 2 列は入らない。縦に積む */
	.lp-cols,
	.lp-cards,
	.lp-title[data-with-art="true"] {
		grid-template-columns: minmax(0, 1fr);
	}
	/*
	 * 狭い画面では、押して進むほうを先に出す。
	 * 説明を毎回読み飛ばさせない。
	 */
	.lp-cols > .lp-col:last-child { order: -1; }
}

/* 参照動画の取り込み。動画は縮小画像が作れないので、そのまま見せる */
.refvideo-form { display: grid; gap: 10px; margin: 10px 0; }

/*
 * 【まだ作っているもの】保管庫の上に出す。
 * ギャラリーを廃したので、生成中の動画を取り込む口はここだけになる。
 * 一覧に埋めると見落とすので、上に分けて置く。
 */
.pending-block {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--render);
	border-radius: var(--r-md);
	background: var(--render-soft);
}

.pending-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--render);
}

.pending-block .hint { margin: 0 0 10px; }

.pending-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pending-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--r-sm);
	background: var(--panel);
}

.pending-list li > div {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.pending-list .hint { margin: 0; }

/*
 * 【そろっているものを先に見せる】
 * 「どれが効いているのか分からない」の半分は、いま何があるのかが
 * 見えないことだった。段に入る前に 1 行で示す。
 */
.frame-state {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.frame-state li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--panel);
}

.frame-state li > span {
	font-size: 11px;
	color: var(--ink-faint);
}

.frame-state li > strong { font-size: 12px; }

/* そろっているものは色で分かるように。任意のものは主張しない */
.frame-state li[data-ok="true"] {
	border-color: var(--done);
	background: var(--done-soft);
}

.frame-state li[data-ok="true"] > strong { color: var(--done); }

.frame-state li[data-ok="false"][data-soft="true"] { opacity: 0.7; }

/*
 * いま効いている動きの決め方。
 * 2 つ書けてしまうので、どちらで動くのかを言い切る。
 */
.motion-now {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	padding: 8px 12px;
	border-radius: var(--r-sm);
	background: var(--panel-raised);
}

.motion-now > span {
	font-size: 11px;
	color: var(--ink-faint);
}

.motion-now > strong { font-size: 13px; }

.motion-now[data-ok="true"] {
	background: var(--accent-soft);
	box-shadow: inset 3px 0 0 var(--accent);
}

/*
 * タブの中のタブ。
 * 外側と同じ見た目にすると、どちらの段の話か分からなくなる。
 * 内側は小さく、下線ではなく囲みにする。
 */
.build-tabs.small { gap: 4px; margin-bottom: 10px; }

.build-tabs.small [role="tab"] {
	padding: 4px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
}

.build-tabs.small [role="tab"][data-active="true"] {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--ink);
	font-weight: 600;
}

/*
 * 【カットの中身は広い画面で 2 列に】
 * 5 つのまとまりを縦に積むと 908px（実測）になり、
 * 下の「コマをつくる」まで 1 画面では届かない。
 * 中身を隠さずに縮めるには、横に並べるのがいちばん素直。
 *
 * 「何を撮るか」だけは長い文を書く欄なので、幅を取らせる。
 */
/*
 * 【カットの中身も使える幅で折る】
 * 5 つのまとまりを縦に積むと 908px（実測）になり、
 * 下の「コマをつくる」まで 1 画面では届かない。
 *
 * ここも画面幅ではなく使える幅で決める。左にツリーが居るぶん、
 * 画面幅を見ると外れる。
 *
 * 「何を撮るか」と操作の行は、折り返しても全幅のままにする。
 */
.shot-detail .build-step {
	display: grid;
	/*
	 * min() を挟む理由は .frame-make と同じ。
	 *
	 * 420px にしているのは、300px だと広い画面で **3 列**になり、
	 * 1 列 326px の中に選択欄を 4 つ並べることになったから。
	 * 1 つ 71px しかなく「ミディアムショット」が入らなかった（実測）。
	 * 420px なら 1019px の枠で 2 列（約 500px）に収まる。
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: 0 20px;
	align-items: start;
}

.shot-detail .build-step > .field-group:first-of-type,
.shot-detail .build-step > .btn-row {
	grid-column: 1 / -1;
}

/* 隠し欄は場所を取らせない */
.shot-detail .build-step > input[type="hidden"] { display: none; }

/*
 * 【つくる／置く は並べる。隠さない】
 * 一度タブの中のタブにしたが、置くほう（保管庫から選ぶ・手元から上げる）が
 * **1 回押さないと出てこず、足したのに無いのと同じ**になった。
 * どちらも 3 つ以下の操作なので、並べても混まない。
 */
/*
 * 【画面幅ではなく、使える幅で折る】
 * この箱は左に構成ツリーが居る画面の中にある。画面幅が 900 を超えても、
 * 中身が使える幅はずっと狭い。画面幅で切り替えると、
 * 901px で 2 列になって**横にあふれた**（実測）。
 *
 * auto-fit なら入らないときに勝手に 1 列へ落ちる。切り替え点が要らない。
 */
.frame-make {
	display: grid;
	/*
	 * min() を挟むのが要点。minmax(260px, …) だけだと、
	 * **枠が 260px より狭いときに 260px を確保しようとしてはみ出す**。
	 * 実測で、カットの画面を 901px で開くと 969px まで伸びていた
	 * （左のツリーと一覧を引くと、中身に使えるのは 265px しかない）。
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 16px;
	margin: 10px 0 14px;
}

.frame-way {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel-raised);
}

.frame-way-head {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.frame-way .field { margin: 0; }
.frame-way .hint { margin: 0; }
.frame-way .btn { justify-self: start; }

/* 狭いときは縦に積む。横に並べると 1 つが潰れる */


/* いま使っているコマと、その脇の操作 */
.frame-now {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 12px;
}

.frame-now-side {
	display: grid;
	gap: 6px;
	align-content: start;
}
.refvideo-form .field input[type="file"],
.refvideo-form .field input[type="url"] { width: 100%; }
.refvideo-preview {
  width: 100%;
  max-width: 420px;
  border-radius: var(--r-md);
  background: #000;
  display: block;
  margin-top: 10px;
}

/* --- グループ別の明細 ------------------------------------------------ */
/*
 * 合計 1 行では「誰が何にいくら使ったか」を説明できない。
 * グループごとに 1 枚にまとめ、頭に小計を出す。
 */
.statement {
	margin-top: 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
	overflow: hidden;
}

.statement-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--panel-raised);
	font-size: 13px;
}

/* 小計は右端へ。並べたときに縦にそろう */
.statement-sum {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
}

.statement .table { margin-top: 0; }
.statement .table th:first-child,
.statement .table td:first-child { padding-left: 14px; }
.statement .table th:last-child,
.statement .table td:last-child { padding-right: 14px; }

/* 月の選択。表の上に小さく置く */
.month-pick {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin: 4px 0 10px;
}

/*
 * 月の選択が矢印だけの幅（26px）に潰れていた。
 *
 * .field は「名前｜中身」の 2 列。名前の列は 144px あるので、
 * 枠を 160px にすると**中身の列が 0px** になる。中身は
 * `.field > span:first-child ~ *` で 2 列目に置かれるので、
 * width:100% を足しても 0 の 100% にしかならない。
 *
 * ここは名前を上、選択を下の 1 列にする。
 */
.month-pick .field {
	flex: 0 0 auto;
	grid-template-columns: minmax(0, 1fr);
}

.month-pick .field > * { grid-column: 1; }
.month-pick .field select { width: 100%; min-width: 9em; }

/* --- 管理ページの表 --------------------------------------------------- */
/*
 * 【全部を中央に寄せていた】
 * ここは `th, td { text-align: center }` で**列の中身を問わず中央**に
 * 寄せていた。等幅なら桁は揃うという理屈だったが、揃うのは桁数が
 * 同じときだけで、382.00 と 1,702.00 は頭も末尾も揃わない。
 * 「区分」のような語の列も、語の長さで左端が動く。
 *
 * 列の中身で決める。語は左、数は右。中央に寄せるものは無い。
 */
.scope-tabs .table th,
.scope-tabs .table td {
	text-align: left;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}

/* 数の列だけ右。見出しも同じ側に寄せないと、列として読めない */
.scope-tabs .table th.num,
.scope-tabs .table td.num { text-align: right; }

/*
 * 【縦にまたぐ見出しは上に寄せる】
 * またぐ側だけ `middle` のままだと、3 行にまたがる API キーの名前が
 * **行と行のあいだに浮いて**、どの行にかかっているのか読めない。
 */
.scope-tabs .table td[rowspan] { vertical-align: top; }

/*
 * 【補足は行を分ける】
 * 数の隣に注釈を続けて置いていたので、
 * 「15 当社キー 13 ＋ 取引先キー 2」と 1 行に詰まり、
 * **どこまでが数でどこからが説明か読めなかった**。
 * 主たる値の下に落とす。
 */
.scope-tabs .table td .hint {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.4;
}

/* --- 管理ページの節 --------------------------------------------------- */
/*
 * 前は見出しごとに style="margin:24px 0 8px" を書いていた。
 * 書き忘れた節だけ詰まって、揃って見えなかった。規則で決める。
 */
.scope-tabs .section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 26px 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}

.scope-tabs > [data-panel] > .section-head:first-of-type { margin-top: 6px; }
.scope-tabs > [data-panel] { padding-top: 4px; }

.scope-tabs > [data-panel] > .notice,
.scope-tabs > [data-panel] > .panel,
.scope-tabs > [data-panel] > form.panel { margin-top: 14px; }

.scope-tabs .table-scroll + .hint,
.scope-tabs table + .hint { margin-top: 8px; }

/* 為替の行。値と取り直しボタンを 1 行に */
.fx-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 12px 0 6px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel-raised);
	font-size: 13px;
}

.fx-line > span { flex: 1 1 auto; }

/* --- 共有の切り替え --------------------------------------------------- */
/*
 * 状態を先に、操作を後に置く。いま共有されているかは一目で要るが、
 * 切り替えは毎回押すものではない。
 */
/* ------------------------------------------------------------------
	 2 択の切り替えバー

	 【前はどうだったか】
	 「いまの状態」「切り替えるボタン」「長い説明文」が横に 1 列で並び、
	 題の下を丸ごと 1 行使っていた。3 つの画面で少しずつ形が違い、
	 置き場所も揃っていなかった。

	 【いま】
	 2 つの札を隣り合わせた 1 本のバー。いまの側が塗られていて、
	 もう片方を押すとそちらになる。題の右に置く。
	 説明は触れたときだけ出す（title）。毎回読むものではない。
------------------------------------------------------------------- */

.switchbar {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--panel);
	/* 中の札の角を、外の丸みで切る */
	overflow: hidden;
}

/*
 * 【死んでいた規則を消した】
 * `.switchbar::after { //content: attr(title); }` が残っていた。
 * CSS に `//` は無いので宣言ごと捨てられ、**中身の無い ::after**
 * だけが残っていた。説明を出したかったのだと思うが、いまは
 * `title` と下の見出し（`.switchbar-caption`）で出している。
 */

.switchbar .inline { display: flex; margin: 0; }

.switchbar-item {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--ink-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

/*
 * いま選んでいる側。押しても何も起きないので、押せる形にしない。
 *
 * 【どちら側でも色を差す】
 * 前は「公開・共有・受け付ける」の側に居るときだけ塗っていた。
 * だから非公開に切り替えると、選んでいるのにバーが灰色のままで、
 * 押した結果が効いていないように見えた。
 *
 * 色は「どちら側か」ではなく「いま選んでいる」ことを示すもの。
 */
.switchbar-item[data-current="true"] {
	cursor: default;
	color: var(--accent-ink);
	background: var(--accent);
}

button.switchbar-item:hover {
	color: var(--ink);
	background: var(--panel-raised);
}

/* 押せない人には、もう片方を薄く見せるだけ */
.switchbar-item[data-locked="true"] {
	cursor: default;
	color: var(--ink-faint);
}

/* --- 管理: 左で選び、右で扱う ---------------------------------------- */
/*
 * 前は縦に 7 つ積んでいた（見出し・表・見出し・パネル・見出し・表・パネル）。
 * どれも同じ重さで並ぶので、どこを見ればよいのか決まらなかった。
 * 「選ぶ」と「扱う」は別の動作なので、左右に分ける。
 */
.admin-cols {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.admin-pick,
.admin-detail {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
	padding: 14px 16px;
}

.admin-pick-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

/* 選ぶだけの一覧。表にすると列が増えて、選ぶ以外の情報が主役になる */
.pick-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.pick-list a {
	display: block;
	padding: 9px 10px;
	border-radius: var(--r-sm);
	text-decoration: none;
	color: inherit;
}

.pick-list a:hover { background: var(--panel-raised); }

/* いま見ているものだけ塗る。どれを開いているか一目で要る */
.pick-list a[data-current="true"] {
	background: var(--accent);
	color: var(--accent-ink);
}

.pick-list a[data-current="true"] .pick-meta,
.pick-list a[data-current="true"] .pick-warn { color: inherit; opacity: .85; }

.pick-name {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}

.pick-meta {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--ink-muted);
}

/* 主担当が居ないと誰も直せない。そこだけ目立たせる */
.pick-warn { color: var(--blocked); font-weight: 700; }

.pick-badge {
	display: inline-block;
	margin-left: 4px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 10px;
	font-weight: 700;
}

/* 人の表。名前とログイン ID は 1 行に収める */
.people td .hint { margin-left: 6px; }
.people .inline { justify-content: flex-end; }

/* 足す行。表の一部だと分かるよう、上だけ罫を引く */
.people-add td {
	border-top: 1px solid var(--line-strong);
	border-bottom: none;
	padding-top: 12px;
}

.people-add .inline { justify-content: flex-start; }
.people-add-mark { color: var(--ink-faint); font-weight: 700; }

@media (max-width: 900px) {
	.admin-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------
	 表で組む欄

	 【なぜ表にしたか】
	 前は欄を横に流していた（flex→格子）。どちらも、名前が入力欄の
	 真上に載る形なので、行ごとに名前の長さぶん入力欄の左端がずれる。
	 目が縦に線を追えず、「どこに何があるか」を毎回探すことになる。

	 表なら名前の列と入力の列が全部の行で同じ位置にくる。
	 縦に 1 本の線が通るので、探さずに読める。

	 【label は行をまたげない】
	 th と td は別の升なので、<label> で両方を包めない。
	 for/id で結ぶ。結ばないと名前を押しても入力欄に飛べず、
	 押せる的が入力欄そのものだけになる（とくに印の欄で辛い）。
------------------------------------------------------------------- */

.form-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.form-table th,
.form-table td {
	padding: 10px 0;
	vertical-align: top;
	text-align: left;
}

.form-table th {
	/* 幅と間は .field と同じところから取る。別々に持つとずれる */
	width: var(--label-col);
	padding-right: var(--label-gap);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	/* 入力欄の字と高さを合わせる。上端で揃えると名前だけ上に浮く */
	padding-top: 19px;
}

.form-table th label {
	cursor: pointer;
}

/* 行と行の仕切り。1 行ぶんの範囲が目で追える */
.form-table tr + tr th,
.form-table tr + tr td {
	border-top: 1px solid var(--line);
}

/*
 * 【長い表を束に分ける見出し】
 * 名前の列には入れない。列に入れると「その行の名前」に見えて、
 * 下の何行にかかっているのかが読めない。升をまたいで 1 行使う。
 */
.form-table tr.form-part > th {
	width: auto;
	padding: 26px 0 4px;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--ink-muted);
	border-top: 1px solid var(--line-strong);
}

/* 見出しのすぐ下の行に、もう 1 本線を引かない */
.form-table tr.form-part + tr th,
.form-table tr.form-part + tr td {
	border-top: 0;
}


/* 表の中の入力欄は、升いっぱいに広げる。幅が揃うのが表にした理由 */
.form-table td > input[type="text"],
.form-table td > input[type="number"],
.form-table td > select,
.form-table td > textarea {
	width: 100%;
}

/* 番号のような短いものまで広げると間が抜ける */
.form-table td > input.narrow {
	width: 140px;
}

.form-table td > .hint {
	display: block;
	margin-top: 6px;
}

.form-table td > .choice {
	margin: 4px 0 0;
}

.form-table td > .asset-picks {
	margin: 0;
}

/* 引き出しは升の中で完結させる。はみ出すと表の幅が崩れる */
.form-table td > .picker {
	margin: 0;
}

@media (max-width: 900px) {
	/*
	 * 狭い画面では列に分ける意味が無い。名前の列を 152px 取ると
	 * 入力欄が 100px を切る。積んで、名前を入力欄の上に戻す。
	 */
	.form-table,
	.form-table tbody,
	.form-table tr,
	.form-table th,
	.form-table td {
		display: block;
		width: auto;
	}

	/*
	 * 【線を引くのは行だけ。桝は引かない】
	 *
	 * 広い画面では th と td が横に並ぶので、両方に引いた線が 1 本に見える。
	 * 積むと**上下に並ぶ**ので、同じ線が 2 本になる。
	 *
	 * 打ち消しはあったが `.form-table th`（詳細度 0,1,1）で、素の
	 * `.form-table tr + tr th`（0,1,3）に負けていた。**書いたのに
	 * 効いていなかった。** 同じ形で打ち消す。
	 *
	 * 実測: 個別生成の画面で 7 か所、17px 隔てて 2 本引かれていた。
	 */
	.form-table tr + tr th,
	.form-table tr + tr td,
	.form-table tr.form-part > th {
		border-top: 0;
	}

	.form-table th {
		padding: 0 0 6px;
	}

	.form-table td {
		padding: 0 0 18px;
	}

	/* 行の境目は、行そのものが 1 本だけ引く */
	.form-table tr + tr {
		border-top: 1px solid var(--line);
		padding-top: 18px;
	}

	/*
	 * 【束の見出しは、次に続くものの頭】
	 * 上を大きく、下を小さく空ける。等間隔だと、見出しが
	 * 前の欄に付いているのか次の欄に付いているのか読めない。
	 */
	.form-table tr.form-part {
		border-top: 1px solid var(--line-strong);
		padding-top: 26px;
	}
	.form-table tr.form-part > th {
		padding: 0 0 12px;
		/*
		 * 【束の見出しと、欄の名前を見分ける】
		 * 積むと「撮影の方法」と「長さ」が縦に並ぶ。どちらも小さな
		 * 灰色の字だったので、**同じ高さのものに見えていた**。
		 * 欄の名前は控えめなまま、見出しだけ本文の書体・濃さに上げる。
		 */
		font-family: var(--sans);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: none;
		color: var(--ink);
	}

	/* 見出しの直後は、見出しが引いた線で足りる */
	.form-table tr.form-part + tr {
		border-top: 0;
		padding-top: 0;
	}

	/*
	 * 表そのものの上下は、外（.panel / .build-body）が空ける。
	 * ここで足すと、枠の内側余白と二重になる。
	 */
	.form-table tr:first-child {
		border-top: 0;
		padding-top: 0;
	}
	.form-table tr:last-child > td:last-child {
		padding-bottom: 0;
	}

	/*
	 * 【タブの中と、タブに関わらず共通のものを分ける】
	 * 上は「動画」「画像」で中身が入れ替わる欄、下はどちらでも同じ欄。
	 * 積むと境目が行の切れ目と同じ細さになり、**切り替わったことが
	 * 分からない**。束の見出しと同じ強さの線と間を置く。
	 */
	.form-shared {
		margin-top: 26px;
		border-top-color: var(--line-strong);
	}
	.form-shared > tbody > tr:first-child {
		padding-top: 26px;
	}
}

/* ------------------------------------------------------------------
	 縮小画像に載せると、原寸で見える

	 【なぜ要るか】
	 一覧に出るのは 132px の縮小版。人物が 3 人並ぶと、どれが誰か
	 縮小版では見分けがつかない。開いて確かめて戻る、を繰り返していた。

	 載せるだけで出す。押さない。押すと「選んだ」ことになる場所
	 （候補・アセットの印）に載っているので、確かめるだけのために
	 押させるわけにいかない。

	 出す先は body 直下に 1 枚だけ（app.js）。升の中に置くと
	 overflow で切られるし、表の幅も崩れる。
------------------------------------------------------------------- */

.zoom-peek {
	position: fixed;
	z-index: 90;
	margin: 0;
	padding: 4px;
	border: 1px solid var(--line-strong, var(--line));
	border-radius: var(--r-md);
	background: var(--panel-raised);
	box-shadow: 0 18px 48px rgb(0 0 0 / 28%);
	/* 出るまでの間、四角だけが先に見えないように */
	opacity: 0;
	transition: opacity 120ms ease-out;
	/* 拡大そのものを指せてしまうと、載せ外しがちらつく */
	pointer-events: none;
}

.zoom-peek[data-ready="true"] {
	opacity: 1;
}

.zoom-peek img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--r-sm);
}

.zoom-peek figcaption {
	margin-top: 4px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--ink-faint);
	text-align: center;
}

/* 触る画面には拡大を出さない。載せるという操作が無い */
@media (hover: none) {
	.zoom-peek { display: none; }
}

/* ------------------------------------------------------------------
	 非公開の企画

	 【一覧からは消さない】
	 題は出す。プロジェクトの中で何本動いているかが見えないと、
	 数も進み具合も噛み合わなくなる。

	 【押せないことが、見て分かるようにする】
	 開ける企画は <a> で、これは <div>。押しても何も起きないので、
	 押す前にそう見えていないと「壊れている」と読まれる。
	 地を落として、枠を破線にする。
------------------------------------------------------------------- */

/* 形は上の札と共通。ここは「押せない」ことを示す違いだけ */
.step-card-locked {
	color: var(--ink-muted);
	background: var(--panel-raised);
	border-style: dashed;
	border-color: var(--line-strong);
}

.step-card-locked .step-card-go {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	white-space: nowrap;
}

/*
 * 読めるが自分のものではない、という添え書き。
 * 押してから「直せません」と言われるより、押す前に分かるほうがいい。
 */
.tagline {
	display: inline-block;
	margin-top: 2px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	color: var(--ink-faint);
}

/*
 * 題の右に置くとき、下端で揃えると説明文の高さに引っ張られて
 * 「題の横」ではなく「説明の横」に落ちる。題の行に合わせる。
 */
.page-head > .switchbar {
	align-self: center;
}

/* ------------------------------------------------------------------
	 題の右に並べる道具

	 切り替えバーと、その隣に置くボタン。どちらも「このプロジェクトに
	 誰が居るか」の話なので、離さない。
------------------------------------------------------------------- */

.head-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.page-head > .head-tools {
	/* 下端で揃えると説明文の高さに引っ張られる。題の行に合わせる */
	align-self: center;
}

/* ------------------------------------------------------------------
	 枠ごと押せる行

	 【なぜ <a> で丸ごと包まないか】
	 行に「開く」以外の操作（題を振り直す・削除）が要るものがある。
	 <a> の中にボタンは置けない。

	 見えないリンクを枠いっぱいに敷き、ボタンはその上に重ねる。
	 どこを押しても開く。ボタンの上だけはボタンが勝つ。
------------------------------------------------------------------- */

.row-card[data-rowlink] {
	position: relative;
}

.rowlink {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
}

/*
 * 中身はリンクより上に置く。そうしないとボタンが押せない。
 * 敷いたリンク自身は z-index: 0 のまま。
 */
.row-card[data-rowlink] > *:not(.rowlink) {
	position: relative;
	z-index: 1;
}

/*
 * ボタンの無いところは、リンクに通す。
 * これを書かないと、字の上を押しても開かない。
 */
.row-card[data-rowlink] > .step-card-no,
.row-card[data-rowlink] > .step-card-body {
	pointer-events: none;
}

.row-card[data-rowlink]:hover {
	border-color: var(--line-strong);
}

/* キーボードで辿ったときに、どこに居るか分かるように */
.rowlink:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* 読み上げにだけ渡す字 */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
	 保管庫: つなぐものを選ぶ
------------------------------------------------------------------- */

.joinbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 12px 16px;
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.joinbar .hint {
	flex: 1 1 260px;
}

/*
 * まとめて消す印。
 *
 * 札の中に置くので、絵の上には重ねない（結合の印と場所を取り合う）。
 * 押しやすさのために、字とまとめて 1 つの的にする。
 */
.pick-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	font-size: var(--fs-sm);
	color: var(--ink-soft);
	cursor: pointer;
}

.purge-pick {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.purge-pick input {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

/* 印は絵の上に重ねる。並びを崩さずに選べる */
.gallery-media {
	position: relative;
}

.joinpick {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--panel);
	border: 1px solid var(--line-strong);
	cursor: pointer;
}

.joinpick-no {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent);
}

/* 選んだものは、絵のほうでも分かるように */
.gallery-card[data-picked="true"] {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.gallery-card[data-picked="true"] .joinpick {
	border-color: var(--accent);
}

/*
 * 畳んでおく入力欄。
 *
 * 一覧のすぐ下に入力欄を開いたまま置くと、
 * 「その行を直す欄」に見える。足すときだけ開く。
 */
.add-form {
	margin-top: 16px;
	border-top: 1px solid #e5e7eb;
	padding-top: 12px;
}

.add-form > summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--accent);
	list-style: none;
	padding: 6px 0;
	user-select: none;
}

.add-form > summary::-webkit-details-marker {
	display: none;
}

/* 開いているかを三角で示す。マーカーを消したぶん自前で出す */
.add-form > summary::before {
	content: "＋";
	display: inline-block;
	width: 1.2em;
}

.add-form[open] > summary::before {
	content: "−";
}

.add-form[open] > summary {
	margin-bottom: 8px;
}

/*
 * 表の行に並ぶ操作。
 *
 * form を 3 つ並べると、既定では縦に折り返して行が 3 段になる。
 * 横 1 行に収める。
 */
.row-actions {
	display: flex;
	gap: 4px;
	align-items: center;
	flex-wrap: nowrap;
}

.row-actions form {
	margin: 0;
}

/* ------------------------------------------------------------------
 * 折り畳み（.fold）
 *
 * 【なぜ要るか】
 * 利用実績のタブに、同じ月の同じ数字が 3 段（操作別・グループ別・
 * 利用者まで割った明細）で並んでいた。常に開いていると、どれを
 * 読めばよいのか分からない。**要るときだけ開く。**
 * ------------------------------------------------------------------ */
.fold {
	margin-top: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--panel);
}

.fold[open] { border-color: var(--line-strong); }

.fold > summary {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
	padding: 10px 14px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { background: var(--panel-raised); }

/* 開いているかどうかが分かる印。文字の向きだけで示す */
.fold > summary::before {
	content: "▸";
	color: var(--muted);
	font-weight: 400;
}

.fold[open] > summary::before { content: "▾"; }
.fold[open] > summary { border-bottom: 1px solid var(--line); }

.fold > summary .hint { font-weight: 400; }

/* 中身は枠の内側に収める */
.fold > .statement { margin: 14px; }

/* ------------------------------------------------------------------
 * 金額（.money）
 *
 * 【ドルを先に、円を換算として】
 * 原価は BytePlus に米ドルで払っている。円は、その時点の為替を掛けて
 * 出した二次的な値でしかない。円だけを出していたので、
 *
 *   ・為替が動くと先月の「原価」が今日変わる
 *   ・BytePlus の請求書（ドル）と並べてもどちらが元か読めない
 *
 * という状態だった。元の通貨を主、円を従として重ねる。
 * ------------------------------------------------------------------ */
.money {
	line-height: 1.35;
	white-space: nowrap;
}

.money-usd {
	display: block;
	font-variant-numeric: tabular-nums;
}

/* 円は換算値。従属していることが見た目で分かる大きさにする */
.money-jpy {
	display: block;
	font-size: 12px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.money-jpy::after {
	content: " 円";
	font-size: 11px;
}

/* 差額が赤のときは、円も一緒に赤にする */
.money.minus .money-usd,
.money.minus .money-jpy { color: var(--danger, #c0392b); }

/* ------------------------------------------------------------------
 * 月の収支（.month-summary）
 *
 * 仕入（BytePlus の請求）と売上（当システムの台帳）を並べる。
 * 「BytePlus の請求だけで足りるのでは」という問いに、
 * 画面の先頭で答えるための 1 行。
 * ------------------------------------------------------------------ */
.month-summary { margin-bottom: 20px; }

.ledger-line {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin-top: 12px;
}

.ledger-cell {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 14px;
	border-left: 3px solid var(--line-strong);
}

.ledger-label {
	font-size: 12px;
	color: var(--muted);
	letter-spacing: 0.02em;
}

.money-usd.big {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* 原価割れは、金額そのものを赤くする */
.ledger-cell.minus { border-left-color: var(--danger, #c0392b); }
.ledger-cell.minus .money-usd,
.ledger-cell.minus .money-jpy { color: var(--danger, #c0392b); }

/* ------------------------------------------------------------------
 * 参照の画面（利用者本人向け）
 * ------------------------------------------------------------------ */

/*
 * 【残高の枠】
 * `.cell-input`（フォームの入力欄。`width: 50%`）を流用していたので、
 * 格子の中で幅が競合し、「利用可能残高 100 クレジット」の
 * **「クレジット」が改行して落ちて**いた。数を見せる枠は入力欄ではない。
 */
.stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.stat > strong {
	font-size: 20px;
	line-height: 1.2;
	color: var(--ink);
}

.stat > .balance-figure { font-size: 30px; }

/* 単位は数の隣に置く。改行させない */
.stat > .hint { white-space: nowrap; }

/*
 * 【料金表は製品ごとの行列にする】
 * 1 行 1 単価で並べていたので、Seedance 1.5 Pro だけで
 * 解像度 3 × 長さ 6 × 種類 2 = 36 行になり、製品名が 36 回続いた。
 * 知りたいのは「この解像度でこの長さなら何クレジットか」なので、
 * 解像度を行、長さを列にすれば 1 つの小さな表に収まる。
 */
.rate-group { margin-top: 16px; }
.rate-group:first-of-type { margin-top: 8px; }

.rate-title {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
}

.rate-title > strong { font-size: 13px; }

/* 枠を持たない折り畳み。既に panel の中に居るので二重の枠にしない */
.fold.plain {
	border: none;
	background: none;
	margin-top: 0;
}

.fold.plain > summary { padding: 0; }
.fold.plain[open] > summary {
	border-bottom: 1px solid var(--line);
	padding-bottom: 8px;
}
.fold.plain > summary:hover { background: none; color: var(--accent); }

/* ------------------------------------------------------------------
 * 節の群（.band）
 *
 * 【6 つが平らに並んでいた】
 * 料金設定は ①〜⑥ が同じ重さで縦に並び、しかも順が
 * 売値・数量・仕入・売値…と交互だった。決めることは
 * 「原価」「消費クレジット数」「掛率」の 3 つしかないので、
 * その 3 つを一段上の見出しにして束ねる。
 * ------------------------------------------------------------------ */
.band {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin: 32px 0 4px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--line-strong);
}

.band:first-of-type { margin-top: 8px; }

.band-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: 0.01em;
}

/* 群の中の節は一段下げて、群との差を付ける */
.band + .section-head { margin-top: 16px; }

/* 一行追加の中の選択欄。伸び切らせない */
.inline-add select { width: auto; min-width: 150px; }

/*
 * 切り替えの見出し（.switchbar-caption）
 *
 * 【何の可否か分からなかった】
 * 「受け付ける／受け付けない」「可／否」だけが横に並んでいて、
 * **何についての可否なのかが読めなかった**。説明は `title` に入れて
 * あるが、触らないと出ないのでは遅い。一語の見出しを下に添える。
 */
.switchbar-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.switchbar-caption {
	font-size: 11px;
	line-height: 1.3;
	color: var(--ink-faint);
	white-space: nowrap;
}

/* 見出しが付くぶん背が高くなるので、並びは上端で揃える */
.head-tools { align-items: flex-start; }

/* ------------------------------------------------------------------
 * 参照画像の格子（.ref-grid）
 *
 * 【1 枚 1 行だった】
 * 参照は 10 枚まで置けるので、表の行が 9 本続き、その下の
 * 解像度・尺・モデルが画面の外へ出ていた。何枚目かは小さな番号で
 * 足りるので、格子に詰める。
 * ------------------------------------------------------------------ */
.ref-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: 8px;
	margin-bottom: 8px;
}

.ref-slot {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 8px;
	background: var(--panel);
}

/* ------------------------------------------------------------------
 * 何枚目かの番号（.ref-no）
 *
 * ただの添え字だったが、押すとプロンプトへ「#2」が入るようになった。
 * **押せるものは押せるように見せる**必要があるので、枠と手の形を付ける。
 * 小さいままにするのは、参照の絵より目立たせないため。
 * ------------------------------------------------------------------ */
.ref-no {
	font-family: var(--mono);
	font-size: 10px;
	line-height: 1;
	color: var(--ink-faint);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 2px 5px;
	cursor: pointer;
}

.ref-no:hover,
.ref-no:focus-visible {
	color: var(--ink);
	border-color: var(--accent);
}

/* 枠の中では絵の邪魔をしないよう、右上へ寄せて重ねる */
.ref-slot .ref-no {
	position: absolute;
	top: 4px;
	right: 8px;
	z-index: 1;
}

/* 「元になる画像」の見出しの隣。名前とは行を分ける */
.form-table th .ref-no {
	display: inline-block;
	margin-top: 4px;
}

/* 詰めて置く版の引き出し */
.picker--compact .btn-row {
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	margin: 0;
}

.picker--compact .picker-preview { margin-top: 6px; }

.picker--compact .picker-thumb img {
	width: 100%;
	height: 72px;
	object-fit: cover;
	border-radius: var(--r-sm);
}

/* 選ぶ印と字をひとつの的にする */
.check-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.check-row input {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

/*
 * 工程の表（.steps）
 *
 * 【なぜ表にしたか】
 * 札を縦に積んでいたころは、工程ごとに見出しの位置も入力の幅もばらばらで、
 * どこまでが 1 つの工程か目で追えなかった。表にすれば柱が揃う。
 *
 *   1 列目 … 名前・状態・費用。ここだけ読めば全体の進みが分かる
 *   2 列目 … 押すもの
 *   3 列目 … 結果の画像
 */
.step-table { table-layout: fixed; width: 100%; }

/*
 * 【1 列目は見出しではなく本文として組む】
 * 工程の名前は `<th scope="row">` で置いている ── 意味のうえでは行の見出し
 * だから。ところが `.table th` は表の**上の見出し**むけに組んであって、
 * 小さい等幅・大文字・`white-space: nowrap` が付く。
 *
 * `white-space` は子へ受け継がれるので、説明文が折り返さずに 2 列目へ
 * はみ出し、文字が重なって読めなくなっていた（実測）。打ち消す。
 */
.step-table th,
.step-table td {
	vertical-align: top;
	padding: 14px 12px;
}

.step-table tbody th {
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
	color: var(--ink);
	border-bottom: none;
}

/* 罫線は塊の切れ目だけに引く。1 行ごとに引くと縞になって読みにくい */
.step-table tbody td { border-bottom: none; }

/*
 * 【参照画像の欄は 1 枚だけ】
 * `.picker--compact` は 128px の桝に何枚も並べるために作ってあり、釦を
 * 縦に積む。ここは #2 の 1 枚しか置かないので（`Sequence::MAX_GUIDES`）、
 * 横に並べる幅がある。縦積みのままだと、釦が入力欄に見えて紛らわしい。
 */
.step-table .ref-grid { grid-template-columns: minmax(0, 340px); }

.step-table .picker--compact .btn-row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.step-table .picker--compact .picker-thumb img { height: 90px; object-fit: contain; }

.step-name { width: 240px; }
.step-ask { width: auto; }
.step-got { width: 38%; }

.step-table th.step-name { text-align: left; }

.step-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 4px;
}

.step-name .hint { font-weight: 400; margin: 4px 0 0; }

/*
 * 工程の状態。**名前の右に、小さく色で。**
 *
 * 名前の下に 1 行取っていたころは、名前と説明のあいだに挟まって、どちらの
 * 続きなのか読みにくかった。名前の続きとして横に置く。
 */
.step-flag {
	display: inline-block;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.04em;
	border-radius: 999px;
	border: 1px solid currentColor;
	white-space: nowrap;
}

.step-flag.is-done { color: var(--accent); }
.step-flag.is-stale { color: var(--warn, var(--render)); }
.step-flag.is-fail { color: var(--warn, var(--render)); background: color-mix(in srgb, currentColor 12%, transparent); }
.step-flag.is-skip { color: var(--ink-faint); }

/*
 * いくら払うか。**押す釦の隣に**、手持ち（ヘッダーの財布）と同じ形の札で。
 *
 * 工程の名前のところに書いていたころは、押す場所と数字が横に離れていて、
 * 押す瞬間に目に入らなかった。
 */
.cost-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	padding: 3px 9px;
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--ink);
	white-space: nowrap;
}

.cost-num { font-size: 13px; font-weight: 700; }
.cost-unit { font-size: 10px; color: var(--ink-faint); }

/* 釦の列に混ぜるので、行の途中で折り返しても崩れないように */
.check-inline { margin: 0; }
.step-folded { margin: 12px 0; }

/* 入力どうしが詰まりすぎないように */
.step-ask label { display: block; margin-bottom: 10px; }
.step-ask .btn-row { margin-top: 12px; }
.step-ask .hint { margin: 4px 0 10px; }

.step-why { margin: 8px 0 0; padding-left: 18px; }

/*
 * 続けて押す工程は同じ塊に見せる（`Reel::PANELS`）。
 * 塊の中は細い線、塊どうしは太い線で切る。
 */
.step-group + .step-group { border-top: 2px solid var(--line); }
.step-group tr + tr th,
.step-group tr + tr td { border-top: 1px dashed var(--line); }

/* 狭い画面では柱をやめて縦に積む */
@media (max-width: 900px) {
	.step-table,
	.step-table thead,
	.step-table tbody,
	.step-table th,
	.step-table td,
	.step-table tr { display: block; width: auto; }

	.step-table thead { display: none; }
	.step-group { border-top: 2px solid var(--line); padding-top: 8px; }
	.step-table th,
	.step-table td { padding: 8px 0; }
	.step-table td:empty { display: none; }
}

/*
 * 決まった指示文の畳み。ふだん読むものではないので閉じておく。
 */
.step-words > summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--ink-muted);
	margin-bottom: 6px;
}

.step-words ol { margin: 0 0 12px; padding-left: 20px; }
.step-words li { margin-bottom: 6px; word-break: break-word; }

/*
 * 切り出したコマの並び。**ここだけ枚数が桁違いに多い**（18 枚〜）ので、
 * 他の工程と同じ大きさで並べるとこの行だけ画面を何回ぶんも占める。
 * 小さく詰めて、1 枚ずつ捨てられるようにする。
 */
.thumb-row--tiny { gap: 6px; }
.thumb-row--tiny li { width: 58px; gap: 2px; position: relative; }
.thumb-row--tiny img { height: 68px; object-fit: contain; background: var(--panel-raised); }
.thumb-row--tiny .thumb-label { font-size: 11px; }

/* 捨てる釦は札の右上に重ねる。並びを崩さない */
.thumb-row--tiny form { position: absolute; top: 2px; right: 2px; margin: 0; }

/*
 * 【いつも見えていること】
 * 一度これを hover でだけ濃くしたが、触る画面には hover が無い ──
 * 消せることに気づけない。薄い地色を敷いて、いつも見える濃さにする。
 */
.thumb-row--tiny form .btn {
	padding: 0 4px;
	min-height: 16px;
	line-height: 16px;
	font-size: 11px;
	color: var(--ink-muted);
	background: var(--panel);
	border-color: var(--line);
	opacity: 0.85;
}

.thumb-row--tiny li:hover form .btn,
.thumb-row--tiny form .btn:focus-visible {
	opacity: 1;
	color: var(--ink);
	border-color: var(--line-strong);
}

/* --- 一覧の札の「その他」 ------------------------------------------
 *
 * 【開いても札の大きさを変えない】
 * details の中身を行の中に流していたので、開いた札だけ背が伸びて一覧が
 * ずれた。押した札が動くと、次にどれを押すのかが分からなくなる。
 *
 * 中身は札の上に浮かせる。開いても行の高さは 1 行のままである。
 */
.row-more {
	position: relative;
	margin: 0;
}

.row-more > summary {
	white-space: nowrap;
}

/*
 * 【下ではなく、横に出す】
 * 「その他」の真下に出していたころ、**次の札の「その他」を覆っていた**
 * （実測、3 枚並ぶと下 2 枚が押せない）。札は縦に詰めて並んでいるので、
 * 下は必ず隣の札である。
 *
 * 横なら、開いても同じ札の帯の中に収まる。釦も横に並べて背を低くし、
 * 上下の札にかからないようにする。
 */
.row-more-menu {
	position: absolute;
	top: 50%;
	right: calc(100% + 8px);
	transform: translateY(-50%);
	z-index: 3;
	/*
	 * 【幅は中身で決める】
	 * 絶対配置の入れ物は「その他」の字と同じ幅しか無い。指定しないと
	 * そこに収めようとして、釦が 2 段に折り返して背が伸びる（実測）。
	 */
	width: max-content;
	max-width: min(60vw, 340px);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	padding: 8px;
	background: var(--panel-raised, var(--panel));
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.row-more-menu form {
	margin: 0;
}

.row-more-menu .btn {
	white-space: nowrap;
	justify-content: center;
}

/* 浮いた中身が札に切られないように */
.step-cards,
.step-cards > li,
.row-card[data-rowlink] {
	overflow: visible;
}

/*
 * 【札のどこを押しても開くので、「開く」は置かない】
 * 同じことをする釦を並べても、押す場所が 2 つに割れるだけである。
 * 釦が 1 つ減ったぶん、右端は「その他」だけになる。
 */
.row-card[data-rowlink] > .btn-row {
	flex: 0 0 auto;
	align-items: center;
}

/* --- その場に出す報せ ----------------------------------------------
 *
 * 送ると画面が丸ごと組み直され、報せは main の頭に出る。作業しているのが
 * 下のほうだと、押すたびにそこから引き剥がされていた。
 *
 * その場で送るようにしたので（`data-inplace`）、報せも押した場所へ置く。
 */
.notice-here {
	margin: 0 0 10px;
	font-size: 12px;
}

/* 表の行の中に置くときは、行の幅いっぱいに */
tr > .notice-here,
td > .notice-here,
th > .notice-here {
	display: block;
}

/*
 * 帯（シーケンス生成の出来上がり）。原画から人物まで 1 本の横長の絵なので、
 * 縮小画像の枠に入れず、横に流して見せる。押せば原寸が開く。
 */
.strip-scroll {
	overflow-x: auto;
	max-width: 100%;
	margin: 0 0 8px;
	background: var(--panel-raised);
	border-radius: 6px;
}
.strip-scroll img {
	display: block;
	height: 200px;
	max-width: none;
}

/* ====================================================================
 *	トップ ── 一目で分かるものを上に
 *
 *	【長い説明を上に置かない】
 *	前は「特徴」の文章が画面の左半分を占め、毎日開く人はそこを
 *	読み飛ばして下へ送っていた。読むものは畳んで下に置き、
 *	上には**絵と名前だけの行き先**を並べる。消してはいない。
 * ==================================================================== */

.lp-hero {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 28px 28px 26px;
	margin: 0 0 18px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shade-1);
}

.lp-hero-text { flex: 1 1 380px; min-width: 0; }

.lp-hero h1 {
	margin: 0 0 6px;
	font-size: 26px;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.lp-hero .lp-lead {
	margin: 0;
	max-width: 62ch;
	color: var(--ink-muted);
}

.lp-hero-act {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
}

/* 表題の絵は添え物。無ければ枠ごと出ない（画面側で判定） */
.lp-hero[data-with-art="true"] .lp-art {
	flex: 0 1 300px;
	min-width: 0;
}

.lp-hero .lp-art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-md);
}

/* ------------------------------------------------------------------
	 行き先の格子
	 絵と名前だけ。読まずに形で選べるようにする（`Http\Icon`）。
------------------------------------------------------------------ */

.fn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
	gap: 10px;
	margin: 0 0 22px;
}

.fn-card {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	gap: 2px 12px;
	padding: 14px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shade-1);
	color: var(--ink);
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.fn-card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shade-2);
	transform: translateY(-1px);
}

.fn-icon {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--r-sm);
	background: var(--brand-soft);
	color: var(--brand);
}

.fn-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.fn-note {
	color: var(--ink-faint);
	font-size: 12px;
	line-height: 1.5;
	/* 2 行で止める。札の高さが揃わないと格子が波打つ */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 説明の無い札は、名前を縦の真ん中に置く */
.fn-card:not(:has(.fn-note)) .fn-name { grid-row: 1 / span 2; }

/* ------------------------------------------------------------------
	 詳しく（畳んである読み物）
------------------------------------------------------------------ */

.lp-more {
	margin: 22px 0 0;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shade-1);
}

.lp-more > summary {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 14px 18px;
	cursor: pointer;
	font-weight: 600;
	color: var(--ink-muted);
	list-style: none;
}

.lp-more > summary::-webkit-details-marker { display: none; }

.lp-more > summary .icon { color: var(--brand); opacity: 0.9; }

.lp-more[open] > summary {
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}

.lp-more-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	padding: 18px;
}

.lp-more-body .lp-block { margin: 0; }

/* ------------------------------------------------------------------
	 ボタンの中の絵
	 字と同じ行に置く。上下の中心を揃えないと 1px ぶん沈んで見える。
------------------------------------------------------------------ */

.btn .icon,
a.btn .icon {
	vertical-align: -3px;
	margin-right: 6px;
	opacity: 0.85;
}

.btn .icon:last-child,
a.btn .icon:last-child {
	margin-right: 0;
	margin-left: 4px;
}

/* 数の札は朱。押せる色（墨）と分ける */
.lp-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	margin-left: 6px;
	border-radius: 999px;
	background: var(--brand-soft);
	color: var(--brand);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
	.lp-hero {
		flex-direction: column;
		align-items: stretch;
		padding: 20px;
	}
	.lp-hero[data-with-art="true"] .lp-art { flex: none; }
	.fn-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
}

/* ------------------------------------------------------------------
	 印
	 何の設定が続くのか、どちらを作るのかを、読む前に分からせる。
	 絵は輪郭だけにして `mask` で流し込む。色は 1 か所で決まり、
	 地が白でも濃くても同じに出る（画像として焼くと地に合わない）。

	 大きさは 15px。ここで潰れない密度に絵を絞ってある。
	 線を足すときは、この大きさで見てから決めること。
------------------------------------------------------------------ */

/*
 * 【見出しの桝は flex にしない】
 * `th` を flex にすると**表の桝でなくなる**。広い画面では th と td が
 * 横に並ばなくなり、行の線が上下に割れて二重に戻る（実測 7 か所）。
 * 絵は文字の隣に置くだけでよいので、inline-block で並べる。
 *
 * 帯の札はボタンで、表の中に居ない。あちらは flex でよい。
 */
.build-tabs > .mode-tab[data-tab] {
	display: flex;
	align-items: center;
	gap: 8px;
}

.form-table tr.form-part[data-mark] > th::before,
.build-tabs > .mode-tab[data-tab]::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * 【帯の札に、丸薬の形が漏れていた】
 * `.mode-tab` は別の場所の「丸い札」の帯にも使う名前で、
 * `border-radius: 10px` と `flex: 1 1 auto` を持っている。
 * ここは下線で示す帯なので、丸みが下線の両端を反り上げていた。
 * **アイコンを足す前からそうなっていた。**
 *
 * 形は帯の側で決め直す。名前は残す（JS がこの名前で札を掴む）。
 */
.build-tabs > .mode-tab {
	border-radius: 0;
	/* 狭い画面では押しやすさが要る。等分に広げて、字は真ん中へ */
	flex: 1 1 0;
	justify-content: center;
}
/* 束の印は朱。押すものではないので、墨（操作の色）と分ける */
.form-table tr.form-part[data-mark] > th::before {
	display: inline-block;
	vertical-align: -2px;
	margin-right: 7px;
	background-color: var(--brand);
}

/*
 * 帯の印は、いま居るほうだけ濃くする。
 * 両方濃いと、どちらを作っているのかが字だけの差になる。
 */
.build-tabs > .mode-tab[data-tab]::before {
	background-color: var(--ink-faint);
}
.build-tabs > .mode-tab[data-tab][data-active="true"]::before {
	background-color: var(--brand);
}

.form-table tr.form-part[data-mark="output"] > th::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203v11M8%2010l4%204%204-4'/%3E%3Cpath%20d='M4%2016v2.5A1.5%201.5%200%200%200%205.5%2020h13a1.5%201.5%200%200%200%201.5-1.5V16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203v11M8%2010l4%204%204-4'/%3E%3Cpath%20d='M4%2016v2.5A1.5%201.5%200%200%200%205.5%2020h13a1.5%201.5%200%200%200%201.5-1.5V16'/%3E%3C/svg%3E");
}

.form-table tr.form-part[data-mark="sound"] > th::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%209.5v5h3.5L12%2018.5v-13L7.5%209.5z'/%3E%3Cpath%20d='M16%209.5a3.6%203.6%200%200%201%200%205M18.8%207a7%207%200%200%201%200%2010'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%209.5v5h3.5L12%2018.5v-13L7.5%209.5z'/%3E%3Cpath%20d='M16%209.5a3.6%203.6%200%200%201%200%205M18.8%207a7%207%200%200%201%200%2010'/%3E%3C/svg%3E");
}

.form-table tr.form-part[data-mark="more"] > th::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%208h8M17%208h3M4%2016h3M12%2016h8'/%3E%3Ccircle%20cx='14.5'%20cy='8'%20r='2.4'/%3E%3Ccircle%20cx='9.5'%20cy='16'%20r='2.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%208h8M17%208h3M4%2016h3M12%2016h8'/%3E%3Ccircle%20cx='14.5'%20cy='8'%20r='2.4'/%3E%3Ccircle%20cx='9.5'%20cy='16'%20r='2.4'/%3E%3C/svg%3E");
}

.build-tabs > .mode-tab[data-tab="image"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.5'%20y='4.5'%20width='17'%20height='15'%20rx='2.2'/%3E%3Ccircle%20cx='9'%20cy='10'%20r='1.8'/%3E%3Cpath%20d='M4%2017l4.5-4.5%203.5%203.5%203-2.5L20%2018'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.5'%20y='4.5'%20width='17'%20height='15'%20rx='2.2'/%3E%3Ccircle%20cx='9'%20cy='10'%20r='1.8'/%3E%3Cpath%20d='M4%2017l4.5-4.5%203.5%203.5%203-2.5L20%2018'/%3E%3C/svg%3E");
}

.build-tabs > .mode-tab[data-tab="video"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5.5'%20width='12.5'%20height='13'%20rx='2.2'/%3E%3Cpath%20d='M15.5%2010.5l5-3v9l-5-3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5.5'%20width='12.5'%20height='13'%20rx='2.2'/%3E%3Cpath%20d='M15.5%2010.5l5-3v9l-5-3z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
	 タブ ── いま居るところを、札そのもので示す

	 【下線 2px では足りなかった】
	 選んである札は、字が少し濃くなって下に 2px の線が付くだけだった。
	 白地に墨の線なので、離れて見ると**どれを開いているのか分からない**。

	 【色の役目に戻す】
	 このファイルは冒頭でこう決めている ──
	     墨  操作  … 押せるもの
	     朱  在処  … いま居るところ、選んであるもの
	 なのにタブは墨で下線を引いていた。**自分のきまりに反していた。**
	 朱へ戻し、あわせて札の地にも薄く敷く。

	 【地・字・線の 3 つで示す】
	 どれか 1 つだと、色が見分けにくい人・小さな画面・反射の強い場所の
	 どれかで落ちる。3 つ重ねれば、1 つ効かなくても残りが伝える。

	 対象は 2 つの帯（`.tabs` と `.build-tabs`）。見た目を分けると必ずずれる。
------------------------------------------------------------------ */

.tabs > button,
.tabs > a,
.build-tabs > button,
.build-tabs > a[role="tab"] {
	/* 札の形。下だけ角を残して、中身の面と繋がって見せる */
	border-radius: var(--r-sm) var(--r-sm) 0 0;
	transition: background-color 120ms ease, color 120ms ease;
}

.tabs > button:hover,
.tabs > a:hover,
.build-tabs > button:hover,
.build-tabs > a[role="tab"]:hover {
	background-color: var(--panel-sunk);
	color: var(--ink);
}

.tabs > button[data-active="true"],
.tabs > a[data-active="true"],
.build-tabs > button[data-active="true"],
.build-tabs > a[role="tab"][data-active="true"] {
	background-color: var(--brand-soft);
	color: var(--ink);
	font-weight: 600;
	border-bottom-color: var(--brand);
}

/* 選んである札に指を置いても、地は変わらない（もう居るので） */
.tabs > button[data-active="true"]:hover,
.tabs > a[data-active="true"]:hover,
.build-tabs > button[data-active="true"]:hover,
.build-tabs > a[role="tab"][data-active="true"]:hover {
	background-color: var(--brand-soft);
}

/*
 * 【丸い札の帯は、塗りつぶす】
 * `.build-tabs.small` は枠線の丸薬。こちらは面積があるので、
 * 薄い地では弱い。朱で塗って白抜きにする。
 */
.build-tabs.small [role="tab"][data-active="true"] {
	background-color: var(--brand);
	border-color: var(--brand);
	color: var(--brand-ink);
}

@media (prefers-reduced-motion: reduce) {
	.tabs > button,
	.tabs > a,
	.build-tabs > button,
	.build-tabs > a[role="tab"] {
		transition: none;
	}
}

@media (max-width: 900px) {
	/*
	 * 【札の字を折らない。帯ごと横へ流す】
	 * 管理の帯は 4 つある。375px で等分すると 1 枚 80px ほどになり、
	 * 「利用者」が「利用／者」と**語の途中で折れる**。
	 * 折るより、はみ出したぶんを横に送るほうが読める（順路バーと同じ手）。
	 */
	.tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.tabs::-webkit-scrollbar { display: none; }

	.tabs > button,
	.tabs > a {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/*
	 * 個別生成の帯は 2 つだけ。こちらは等分に広げたほうが押しやすい
	 * （`.build-tabs > .mode-tab` で flex: 1 1 0 を当ててある）。
	 */
	.build-tabs > button,
	.build-tabs > a[role="tab"] {
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------
	 操作するものの大きさ

	 【名前と実物が合っていなかった】
	 実測すると、`.btn.small` も `.btn.tiny` も `.btn` と同じ 51px だった。
	 字だけ 10px に縮んだ札が、主たる操作と同じ高さで並んでいた。

	 原因は 2 つ。
	   ・`button.btn.primary` に `margin-top: 1rem` が付いていた。
	     釦が自分で行を 51px へ押し広げ、
	   ・`.btn-row` は flex の既定（stretch）なので、
	     残りの札がその高さまで伸びていた。
	 余白は行が持つもので、札が持つものではない。外した。

	 【大きさは重さに従う】
	 押して何が起きるかの重さで 4 段。触れる最小は 24px
	 （WCAG 2.2 の的の大きさ）。それより小さくしない。

	   38px  主たる操作     生成する・保存する。画面に 1 つか 2 つ
	   32px  ふつう         入力欄・選択・ふつうの釦。既定はこれ
	   28px  密なところ     表の中、まとめての操作の棒
	   24px  補助           止める・外す。並びの端に小さく置くもの

	 入力欄と釦は同じ高さにする。隣り合ったときに段違いに見えないため。
------------------------------------------------------------------ */

:root {
	--ctl-lg: 38px;
	--ctl: 32px;
	--ctl-sm: 28px;
	--ctl-xs: 24px;
}

/* --- 釦 ------------------------------------------------------- */

/*
 * 素の指定は `button.btn` / `a.btn`（詳細度 0,1,1）で書いてある。
 * `.btn`（0,1,0）で上書きしようとすると**負ける**。同じ形で書く。
 * 高さは min-height だけでは縮まないので、余白も一緒に決める。
 */
button.btn,
a.btn {
	min-height: var(--ctl);
	/* 4px だと素の高さが 30.8 になり、min-height の 32 にぴたり乗る */
	padding: 4px 12px;
	font-size: 13px;
}

.btn.primary,
a.btn.primary {
	min-height: var(--ctl-lg);
	padding: 8px 18px;
}

.btn.small,
a.btn.small,
button.btn.small {
	min-height: var(--ctl-sm);
	padding: 3px 10px;
	font-size: 12px;
}

.btn.tiny,
a.btn.tiny,
button.btn.tiny {
	min-height: var(--ctl-xs);
	padding: 2px 8px;
	font-size: 11px;
}

/*
 * 【行は高さを揃えない】
 * flex の既定は stretch。小さいはずの札が、いちばん高い札まで伸びる。
 * 中央に置けば、それぞれが自分の高さを保つ。
 */
.btn-row {
	align-items: center;
}

/*
 * 主たる操作の上だけ空ける。前は釦自身が持っていたので、
 * 行の高さまで変わっていた。持ち主を行に移す。
 */
.btn-row:has(> .btn.primary) {
	margin-top: 16px;
}

/* --- 入力するもの --------------------------------------------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
select {
	min-height: var(--ctl);
	padding: 4px 10px;
	/*
	 * 11.2px は打ち込む字として小さい。釦と同じ 13px に揃える。
	 * 揃えると、隣に並んだときの段差も消える。
	 */
	font-size: 13px;
}

textarea {
	padding: 6px 10px;
	font-size: 13px;
	/* 3 行ぶん。それ以上は書く人が引き伸ばす */
	min-height: 64px;
}

/* 密なところは、表の側が持っている 28px に従う（.table .inline） */
.table .inline input[type="text"],
.table .inline select,
.table .inline button.btn,
.table .inline a.btn {
	min-height: var(--ctl-sm);
}

.bulk-bar button.btn,
.bulk-bar a.btn,
.bulk-bar select,
.bulk-bar input[type="text"] {
	min-height: var(--ctl-sm);
	padding: 3px 10px;
	font-size: 12px;
}

@media (max-width: 900px) {
	/*
	 * 【打ち込む欄だけ 16px にする】
	 * iOS は 16px 未満の欄に触れると**画面ごと拡大する**。
	 * 戻すには指で縮めるしかなく、入力のたびに起きる。
	 * 見た目より、拡大が起きないほうが効く。
	 */
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	input[type="tel"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px;
	}

	/*
	 * 狭い画面では釦を横いっぱいに伸ばしている（押しやすさ）。
	 * ただし補助の札まで伸ばすと、消す・止めるが主たる操作と
	 * 同じ大きさになる。小さい札は伸ばさない。
	 */
	.btn-row > .btn.small,
	.btn-row > .btn.tiny {
		flex: 0 0 auto;
	}
}