/* TACHIE の見た目。色は :root にまとめている。R-18 のサイトは body.is-r18 で色を変える。全年齢のサイトのダークモード（body.is-dark）も同じ暗い色で、アクセントだけ青緑 */

:root {
	--bg: #ffffff;
	--fill: #f2f4f6;        /* 検索の欄・タグ・一覧の絵の下地 */
	--fill-soft: #f7f8f9;   /* 利用規約の囲み・広告の枠 */
	--fill-hover: #e6e9ec;
	--text: #16191c;
	--text-sub: #3c444c;
	--muted: #5f6b76;
	--line: #e6e9ec;
	--line-strong: #cfd5da;
	--accent: #0e7c86;      /* リンク */
	--accent-strong: #0a5f67;
	--accent-soft: #e3f1f2;
	--accent-fill: #0e7c86; /* 塗りつぶしのボタン（白い文字をのせる） */
	--accent-fill-strong: #0a5f67;
	--on-accent: #ffffff;
	--danger: #b4382e;
	--warn-bg: #fff4dc;
	--warn-line: #f0d595;
	--r18: #d6254d;
	--overlay: rgba(0, 0, 0, 0.6); /* 絵の上にのせる印 */
	--checker-a: #e9ecef;
	--checker-b: #f7f8f9;
	--logo-back: #9fd0d4;   /* ロゴの後ろのカード */
	--radius: 12px;
	--radius-small: 8px;
	--font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
}

body.is-r18,
body.is-dark {
	--bg: #15131a;
	--fill: #24212b;
	--fill-soft: #1c1a22;
	--fill-hover: #2e2a36;
	--text: #efeaf1;
	--text-sub: #d6d0da;
	--muted: #a59eab;
	--line: #2c2833;
	--line-strong: #463f4e;
	--accent: #f08aa8;
	--accent-strong: #f7a9c0;
	--accent-soft: #3a2431;
	--accent-fill: #c23f69;
	--accent-fill-strong: #d4507b;
	--danger: #f08a7e;
	--warn-bg: #3a3020;
	--warn-line: #6a5730;
	--checker-a: #2a2631;
	--checker-b: #34303c;
	--logo-back: #6e3550;
	color-scheme: dark;
}

/* 全年齢のダークモードは、アクセントだけ全年齢の青緑のまま（R-18 のピンクと見分けがつくように） */
body.is-dark {
	--accent: #5ec9d3;
	--accent-strong: #8adce3;
	--accent-soft: #1b3a3e;
	--accent-fill: #138f9a;
	--accent-fill-strong: #17a3b0;
	--logo-back: #2e6a70;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

/* display を決めた部品でも、hidden を付けたら隠す */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.7;
}

a {
	color: var(--accent);
}

a:hover {
	color: var(--accent-strong);
}

img,
canvas {
	max-width: 100%;
}

h1 {
	font-size: 1.375rem;
	line-height: 1.45;
	font-weight: 800;
	margin: 0 0 0.75rem;
}

h2 {
	font-size: 1.0625rem;
	font-weight: 800;
	margin: 1.5rem 0 0.5rem;
}

code {
	font-size: 0.9em;
	word-break: break-all;
}

/* 線で描いた小さな絵（虫めがね・矢印など） */
.icon {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.muted {
	color: var(--muted);
}

.note {
	color: var(--muted);
	font-size: 0.8125rem;
}

.break {
	word-break: break-all;
}

.nowrap {
	white-space: nowrap;
}

.empty {
	color: var(--muted);
	padding: 2rem 0;
	text-align: center;
}

/* ---- 頭と足 ---- */

/* STG などの目印（config の environment_label） */
.env-banner {
	margin: 0;
	padding: 6px 16px;
	background: #f5c84c;
	color: #3a2a00;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
}

.site-header {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 8px 20px;
	min-height: 56px;
	flex-wrap: wrap;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* ロゴ（templates/logo.php。元は dev/logo/）。色は R-18 のサイトでは変わる */
.logo {
	color: var(--text);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.logo:hover {
	color: var(--text);
}

.logo-svg {
	display: block;
	width: auto;
	height: 30px;
}

/* ロゴの下の小さな説明（「立ち絵・素材のアップローダー」） */
.logo-lockup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

.logo-tagline {
	font-size: 0.625rem;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--muted);
	white-space: nowrap;
}

.logo-back {
	fill: var(--logo-back);
}

.logo-front {
	fill: var(--accent-fill);
	stroke: var(--bg); /* 後ろのカードとのあいだのすき間 */
	stroke-width: 4;
	paint-order: stroke;
}

.logo-t {
	stroke: #ffffff;
}

.logo-word {
	fill: var(--text);
}

/* 文字の横の「β」（ロゴの SVG の中。config の beta） */
.logo-beta {
	fill: var(--accent);
}

.header-search {
	flex: 1 1 260px;
	max-width: 520px;
	margin: 0 auto 0 0;
	position: relative;
}

.header-search .icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
	pointer-events: none;
}

/* 探す対象（作品・ユーザー）を選ぶ小さなボタン。欄の左の中に置く（オーナーの依頼、2026-10-26） */
.header-search-in {
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	height: 28px;
	padding: 0 22px 0 12px;
	border: 0;
	border-radius: 999px;
	background: var(--bg);
	color: var(--text);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 28px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 12px 12px;
}

.header-search-in:hover {
	background-color: var(--fill-hover);
}

.header-search input[type="search"] {
	width: 100%;
	height: 40px;
	padding: 0 42px 0 102px;
	border: 0;
	border-radius: 999px;
	background: var(--fill);
}

.header-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.site-main {
	padding-top: 24px;
	padding-bottom: 48px;
	min-height: 60vh;
}

.site-footer {
	border-top: 1px solid var(--line);
	font-size: 0.75rem;
	color: var(--muted);
}

.footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 20px;
	padding-bottom: 32px;
}

.footer-note {
	margin: 0;
}

/* 運営者の名前（小さく、サイトの名前の下に） */
.footer-operator {
	display: block;
	margin-top: 2px;
	font-size: 0.6875rem;
}

.footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.footer-nav a,
.footer-operator a,
.footer-theme .link-button {
	color: var(--muted);
}

/* 配色の切り替え（全年齢のサイトの足。ボタンだが、ほかのリンクと同じ見た目） */
.footer-theme {
	display: inline;
	margin: 0;
}

.footer-theme .link-button {
	text-decoration: none;
}

.footer-theme .link-button:hover {
	text-decoration: underline;
}

/* ---- 部品 ---- */

.panel {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	margin-bottom: 20px;
}

.panel.narrow {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.notice {
	background: var(--accent-soft);
	border-radius: var(--radius);
	padding: 10px 14px;
	margin: 0 0 16px;
}

.notice-warn {
	background: var(--warn-bg);
	border: 1px solid var(--warn-line);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 0.6875rem;
	line-height: 1.8;
	padding: 0 6px;
	border-radius: 4px;
	background: var(--fill);
	color: var(--text-sub);
	vertical-align: middle;
	font-weight: 700;
}

.badge-accent {
	background: var(--accent-soft);
	color: var(--accent-strong);
}

.badge-r18 {
	background: var(--r18);
	color: #fff;
	font-weight: 800;
}

/* 一覧の絵の上にのせる印 */
.badge-overlay {
	background: var(--overlay);
	color: #fff;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.button:hover {
	background: var(--fill);
	color: var(--text);
}

.button:disabled,
.button.is-disabled {
	opacity: 0.45;
	cursor: default;
}

.button.is-disabled:hover {
	background: var(--bg);
}

.button-primary {
	background: var(--accent-fill);
	border-color: transparent;
	color: var(--on-accent);
}

.button-primary:hover {
	background: var(--accent-fill-strong);
	color: var(--on-accent);
}

.button-small {
	min-height: 32px;
	padding: 0 12px;
	font-size: 0.8125rem;
}

.button-large {
	min-height: 48px;
	padding: 0 24px;
	font-size: 1rem;
	font-weight: 800;
}

.button.danger,
.link-button.danger {
	color: var(--danger);
}

.button-x,
.button-x:hover {
	background: #000;
	color: #fff;
	border-color: #000;
}

.button-misskey,
.button-misskey:hover {
	background: #86b300;
	color: #fff;
	border-color: #86b300;
}

.link-button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--accent);
	cursor: pointer;
	text-decoration: underline;
}

/* 文字だけのタグ（#タグ） */
.tag {
	text-decoration: none;
}

.tag:hover {
	text-decoration: underline;
}

/* 丸い囲みのタグ（トップの「タグから探す」） */
.chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--fill);
	color: var(--text);
	font-size: 0.8125rem;
	text-decoration: none;
}

.chip:hover {
	background: var(--fill-hover);
	color: var(--text);
}

/* ユーザーのアイコン（templates/avatar.php）。絵がなければ名前の頭の1文字。色はユーザーごとに決まる */
.avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #5f6b76;
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	overflow: hidden;
}

.avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-large {
	width: 48px;
	height: 48px;
	font-size: 1.125rem;
}

.avatar-xl {
	width: 88px;
	height: 88px;
	font-size: 2rem;
}

.avatar-0 { background: #2f4b7c; }
.avatar-1 { background: #a35514; }
.avatar-2 { background: #5a4a78; }
.avatar-3 { background: #b4483c; }
.avatar-4 { background: #2f6f5a; }
.avatar-5 { background: #3d6b8f; }
.avatar-6 { background: #6b4a3a; }
.avatar-7 { background: #8a3b2a; }

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

input[type="text"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
	font: inherit;
	font-size: 0.9375rem;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-small);
	padding: 8px 12px;
	max-width: 100%;
}

::placeholder {
	color: var(--muted);
	opacity: 1;
}

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

input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--accent-fill);
}

.form .field {
	display: block;
	margin: 0 0 18px;
	border: 0;
	padding: 0;
}

.form .field input[type="text"],
.form .field input[type="url"],
.form .field textarea {
	width: 100%;
}

/* タグの入力の候補（tag-suggest.js） */
.tag-suggest {
	display: block;
	position: relative;
}

.tag-suggest-list {
	display: block;
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 4px 0;
	list-style: none;
	max-height: 300px;
	overflow-y: auto;
	background: var(--bg);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-small);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tag-suggest-item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 12px;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.tag-suggest-item:hover,
.tag-suggest-item[aria-selected="true"] {
	background: var(--fill-hover);
}

.tag-suggest-item .muted {
	flex: none;
	font-size: 0.8125rem;
}

.field-label {
	display: block;
	font-weight: 700;
	font-size: 0.875rem;
	margin-bottom: 4px;
}

.check {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0 0 16px;
}

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

.rating {
	background: var(--fill-soft);
	border-radius: var(--radius);
	padding: 12px 16px !important;
}

.rating.is-missing {
	outline: 2px solid var(--danger);
}

.rating-option {
	display: block;
	padding: 2px 0;
}

.form-error {
	color: var(--danger);
	font-weight: 700;
	white-space: pre-line;
}

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

.inline-form .field {
	margin: 0;
}

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

.dropzone {
	border: 2px dashed var(--line-strong);
	border-radius: var(--radius);
	padding: 32px 16px;
	text-align: center;
	margin-bottom: 18px;
	background: var(--fill-soft);
}

.dropzone.is-over {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.dropzone input[type="file"] {
	max-width: 100%;
}

.dropzone-text {
	margin: 8px 0 0;
}

.dropzone-file {
	font-weight: 700;
	word-break: break-all;
	margin: 8px 0 0;
}

/* アップロードの上げ方（ZIP で上げる・ファイルで上げる） */
.upload-modes {
	border: 0;
	padding: 0;
	margin: 0 0 14px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.upload-modes legend {
	margin-bottom: 8px;
}

.upload-mode {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 8px;
	align-items: baseline;
	padding: 12px 14px;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
}

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

.upload-mode-title {
	font-weight: 700;
}

.upload-mode-note {
	grid-column: 2;
	font-size: 0.8125rem;
	color: var(--muted);
}

/* ZIP の中身・入れたファイルの一覧（upload.js）。印を付けたものが、作品のページに出すファイル */
.upload-contents,
.upload-shows {
	margin: 0 0 18px;
}

.upload-contents-title {
	margin: 0 0 6px;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.content-list {
	list-style: none;
	margin: 0 0 6px;
	padding: 4px 0;
	max-height: 320px;
	overflow: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	font-size: 0.8125rem;
}

.content-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 10px;
}

.content-item label {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	cursor: pointer;
}

.content-item.is-other label {
	cursor: default;
	color: var(--muted);
}

/* 出せないファイルは印の場所だけ空けて、名前の頭をそろえる */
.content-item input.is-blank {
	visibility: hidden;
}

.content-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.link {
	color: var(--accent);
	text-decoration: underline;
	cursor: pointer;
}

.preview-box {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 18px;
}

.preview-box canvas {
	max-height: 240px;
	width: auto;
	border-radius: var(--radius-small);
	background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 0 0 / 16px 16px;
}

/* アップロードのファイルの行（upload.js が <template> から作る）と、作品の書き換えのファイルの行 */
.upload-files,
.edit-files {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.upload-file,
.edit-file {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 12px;
	border-radius: var(--radius);
	background: var(--fill-soft);
}

.upload-file.is-failed {
	box-shadow: inset 0 0 0 2px var(--danger);
}

.upload-file.is-done {
	opacity: 0.7;
}

.upload-file-thumb {
	flex: 0 0 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-small);
	background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 0 0 / 12px 12px;
	overflow: hidden;
}

.upload-file-thumb canvas {
	max-width: 96px;
	max-height: 96px;
}

.upload-file-main,
.edit-file-main {
	flex: 1;
	min-width: 0;
}

.upload-file-name,
.edit-file-name {
	margin: 0 0 6px;
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.edit-file-name .muted {
	display: block;
	font-size: 0.8125rem;
}

.upload-file-label {
	display: block;
	margin-bottom: 6px;
}

.upload-file-label input {
	width: 100%;
	max-width: 320px;
}

.upload-file-rating,
.edit-file-rating {
	margin: 4px 0 0;
}

/* 作品の書き換えで「含まない（全年齢）」を選んでいるあいだは、ファイルごとのモザイクの選択を隠す */
#edit-form:has(input[name="rating"][value="all"]:checked) .edit-file-rating {
	display: none;
}

.upload-file-status {
	margin: 4px 0 0;
	font-size: 0.8125rem;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.upload-file.is-failed .upload-file-status {
	color: var(--danger);
	font-weight: 700;
}

.upload-file progress {
	width: 100%;
	height: 8px;
	accent-color: var(--accent-fill);
}

.upload-file-tools {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	font-size: 0.8125rem;
}

.upload-file-tools .link-button:disabled {
	opacity: 0.35;
	cursor: default;
}

/* メイン画像の欄（アップロード・書き換え） */
.main-image-field {
	border: 0;
	padding: 0;
	margin: 0 0 18px;
	min-width: 0;
}

.main-image-preview {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-top: 10px;
}

.main-image-preview canvas,
.main-image-current img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-small);
	background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 0 0 / 16px 16px;
}

.main-image-box {
	margin: 0 0 24px;
	padding: 16px;
	border-radius: var(--radius);
	background: var(--fill-soft);
}

.main-image-box h2 {
	margin: 0 0 6px;
	font-size: 1rem;
}

.main-image-box .form {
	margin-top: 10px;
}

.work-fields {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.upload-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.upload-progress progress {
	flex: 1;
	height: 12px;
	accent-color: var(--accent-fill);
}

/* 画面には出さず、読み上げと検索エンジンにだけ見せる */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- ユーザーのページ・名前とアイコン ---- */

/* ユーザーの検索結果（アイコン・名前・ハンドル・作品の数。押すとその人のページへ） */
.user-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px 16px;
}

.user-list-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-small);
	color: var(--text);
	text-decoration: none;
}

.user-list-item:hover {
	background: var(--fill);
	text-decoration: none;
}

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

.user-list-name {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.user-list-meta {
	font-size: 0.8125rem;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.user-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 8px 0 28px;
}

/* 名前の欄は最低 180px。狭いときは「名前とアイコンを変える」のボタンが次の行に回る */
.user-head-name {
	flex: 1 1 180px;
	min-width: 0;
}

.user-head-name h1 {
	margin: 0;
	font-size: 1.5rem;
	overflow-wrap: anywhere;
}

.user-head-name p {
	margin: 2px 0 0;
	font-size: 0.875rem;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.mypage-profile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-bottom: 12px;
}

.mypage-profile p {
	margin: 0;
}

.profile-avatar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 6px 0 10px;
}

.profile-avatar .note {
	margin: 0;
}

.profile-avatar-file {
	display: block;
	font-size: 0.875rem;
}

.profile-avatar-file span {
	display: block;
	margin-bottom: 4px;
	color: var(--muted);
}

/* ---- 一覧 ---- */

.intro {
	margin-bottom: 20px;
}

.intro h1 {
	font-size: 1.25rem;
	margin: 0;
}

.intro p {
	color: var(--muted);
	font-size: 0.875rem;
	margin: 2px 0 0;
}

/* よく使われるタグ（トップの1ページ目。広告の下・一覧の上） */
.home-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

/* 「新着」などの見出し。下に線を引き、見出しの下だけ色を付ける */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px 16px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 20px;
}

.section-title {
	margin: 0 0 -1px;
	padding: 0 2px 10px;
	font-size: 1rem;
	border-bottom: 3px solid var(--accent-fill);
}

.section-head .note {
	margin: 0;
	padding-bottom: 10px;
}

.cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 28px 16px;
}

.card {
	min-width: 0;
}

.card-link {
	display: block;
	color: inherit;
	text-decoration: none;
	border-radius: var(--radius-small);
}

.card-link:hover {
	color: inherit;
}

.card-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.card-thumb {
	aspect-ratio: 4 / 3; /* 横長。メイン画像は 4:3 に切り抜いてある */
	border-radius: var(--radius-small);
	overflow: hidden;
	background: var(--fill);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: filter 0.15s ease;
}

.card-link:hover .card-thumb {
	filter: brightness(0.94);
}

.card-link:hover .card-title {
	text-decoration: underline;
}

.card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* メイン画像のない作品は、ファイルの一覧の絵（縦長が多い）を切らずに収める */
}

.card-thumb img.is-main {
	object-fit: cover;
}

/* モザイクの絵は、ブラウザが拡大のときにぼかさないようにする（マス目のまま見せる） */
.card-thumb img.is-mosaic {
	image-rendering: pixelated;
}

.card-r18 {
	position: absolute;
	top: 8px;
	left: 8px;
}

.card-kind {
	position: absolute;
	bottom: 8px;
	left: 8px;
}

.card-noimage {
	color: var(--muted);
}

.card-title {
	margin: 8px 0 0;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 上げた人（その人のページへのリンク。作品へのリンクとは別） */
.card-author {
	margin: 4px 0 0;
	font-size: 0.75rem;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.5;
	min-width: 0;
	max-width: 100%;
	text-decoration: none;
	border-radius: var(--radius-small);
}

.card-author:hover {
	color: var(--text);
}

.card-author:hover span:last-child {
	text-decoration: underline;
}

.card-author span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 44px;
	font-size: 0.875rem;
	color: var(--muted);
}

.pager-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	background: var(--bg);
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
}

a.pager-item:hover {
	background: var(--fill);
	color: var(--text);
}

.pager-item.is-current {
	background: var(--accent-fill);
	border-color: transparent;
	color: var(--on-accent);
}

.pager-item.is-disabled {
	opacity: 0.45;
}

.pager-gap {
	min-width: 20px;
	text-align: center;
}

/* スマホ：「← 1 … 8 9 10 11 12 … 20 →」が1行に入る大きさにする */
@media (max-width: 560px) {
	.pager {
		gap: 2px;
	}

	.pager-item {
		min-width: 30px;
		height: 32px;
		padding: 0 4px;
	}

	.pager-gap {
		min-width: 14px;
	}
}

/* ---- ファイルのページ ---- */

/*
 * 広い画面：左に題名・絵・説明、右の列に広告・上げた人・ダウンロード・利用規約
 * スマホ：題名 → 絵 → 右の列（広告・ダウンロード）→ 説明 の順に縦に並べる
 */
.file-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"heading side"
		"visual side"
		"body side";
	gap: 0 32px;
	align-items: start;
}

.file-visual {
	grid-area: visual;
	min-width: 0;
}

.file-header {
	grid-area: heading;
	margin-bottom: 16px;
	min-width: 0;
}

.file-body {
	grid-area: body;
	margin-top: 24px;
	min-width: 0;
}

.file-side {
	grid-area: side;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.file-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 6px;
}

.file-header h1 {
	margin: 0;
	overflow-wrap: anywhere;
}

.file-description {
	margin: 14px 0 0;
	overflow-wrap: anywhere;
}

.file-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 14px 0 0;
	font-size: 0.875rem;
}

.file-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	margin: 12px 0 0;
	font-size: 0.8125rem;
	color: var(--muted);
}

.file-stats span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.file-image {
	background: var(--fill);
	border-radius: var(--radius);
	padding: 16px;
	text-align: center;
}

.file-image img {
	max-height: 70vh;
}

.file-noimage {
	padding: 80px 16px;
	color: var(--muted);
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* テキスト（.txt）の中身（text-view.js が読んで入れる）。長いものは枠の中で送る */
.file-text {
	background: var(--fill-soft);
	border-radius: var(--radius);
	padding: 16px;
}

.file-text-body {
	margin: 0;
	max-height: 70vh;
	overflow: auto;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.8;
}

.file-text:not(.is-ready) .file-text-body {
	color: var(--muted);
}

.file-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.file-author-name {
	flex: 1;
	min-width: 0;
	margin: 0;
	line-height: 1.45;
}

.file-author-name strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-author-name strong a {
	color: inherit;
	text-decoration: none;
}

.file-author-name strong a:hover {
	text-decoration: underline;
}

.file-author-avatar {
	display: block;
	border-radius: 50%;
}

.file-author-name span {
	font-size: 0.8125rem;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.file-side .button-large {
	width: 100%;
}

/* ダウンロード（作品の ZIP の1つだけ）：ボタン・ファイルの情報・ZIP の中身 */
.download-box {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.download-box .notice {
	margin: 0;
}

.file-facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	font-size: 0.8125rem;
	margin: 0;
	border-top: 1px solid var(--line);
}

.file-facts dt,
.file-facts dd {
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
}

.file-facts dt {
	color: var(--muted);
	padding-right: 16px;
}

.file-facts dd {
	margin: 0;
	min-width: 0;
}

.hash {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.6875rem;
	line-height: 1.5;
	word-break: break-all;
	color: var(--muted);
}

.terms-box {
	background: var(--fill-soft);
	border-radius: var(--radius);
	padding: 16px 18px;
}

.terms-box h2 {
	margin: 0 0 6px;
	font-size: 0.9375rem;
}

.terms-text {
	font-size: 0.875rem;
	line-height: 1.8;
	max-height: 320px;
	overflow: auto;
	overflow-wrap: anywhere;
}

.terms-box .note {
	margin: 10px 0 0;
}

.file-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	font-size: 0.8125rem;
}

.report-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
}

/* 作品のメイン画像（説明の下に出す。ファイルは左の列のいちばん上） */
.work-main {
	margin: 24px 0 0;
	background: var(--fill);
	border-radius: var(--radius);
	overflow: hidden;
	text-align: center;
}

.work-main img {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 75vh;
}

/* 作品のファイルのタブ（public/assets/work.js）。多いときは横に流して見る */
.work-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 12px;
	overflow-x: auto;
	overflow-y: hidden;
	border-bottom: 1px solid var(--line);
	scrollbar-width: thin;
}

.work-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 240px;
	padding: 10px 14px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--text-sub);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.work-tab:hover {
	color: var(--text);
	background: var(--fill-soft);
}

.work-tab[aria-selected="true"] {
	color: var(--accent-strong);
	border-bottom-color: var(--accent-fill);
}

.work-tab-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.work-tab-kind {
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--muted);
}

/* ZIP の中身（作品のページのダウンロードの下・管理画面） */
.zip-box {
	margin-top: 12px;
	padding: 12px 16px;
	background: var(--fill-soft);
	border-radius: var(--radius);
}

.zip-box summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 0.875rem;
}

.zip-list {
	margin: 8px 0 0;
	padding-left: 20px;
	max-height: 360px;
	overflow: auto;
	font-size: 0.8125rem;
}

.download-box .zip-box {
	margin-top: 0;
}

/* ---- 着せ替えプレビュー ---- */

.viewer {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.viewer.is-ready {
	grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.viewer-stage {
	border-radius: var(--radius);
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	position: relative;
	background: var(--fill);
}

.viewer-stage[data-bg="checker"] {
	background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 0 0 / 20px 20px;
}

.viewer-stage[data-bg="white"] {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--line);
}

.viewer-stage[data-bg="black"] {
	background: #111;
}

.viewer-stage[data-bg="green"] {
	background: #00b140;
}

.viewer-canvas {
	max-height: 75vh;
	width: auto;
	height: auto;
	transform-origin: center;
}

/* 拡大縮小（viewer.js の setupZoom）。拡大していないときも、2本指のつまみはページではなく絵の拡大に使う */
.viewer.is-ready .viewer-stage {
	overflow: hidden;
	touch-action: pan-x pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.viewer-stage.is-zoomed {
	touch-action: none;
	cursor: grab;
}

.viewer-stage.is-zoomed:active {
	cursor: grabbing;
}

.viewer-zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	gap: 4px;
	z-index: 1;
}

.viewer-zoom-button {
	font: inherit;
	font-size: 0.8125rem;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-small);
	background: var(--bg);
	color: var(--text);
	cursor: pointer;
}

.viewer-zoom-button:hover:not(:disabled) {
	background: var(--fill-hover);
}

.viewer-zoom-button:disabled {
	color: var(--muted);
	opacity: 0.6;
	cursor: default;
}

.viewer-fallback {
	max-height: 60vh;
	opacity: 0.4;
}

.viewer-status {
	position: absolute;
	margin: 0;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--bg);
	color: var(--text);
	font-size: 0.8125rem;
}

.viewer-panel {
	max-height: 75vh;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.viewer-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	font-size: 0.8125rem;
}

.viewer-tools-label {
	color: var(--muted);
	font-size: 0.75rem;
}

/* 背景の切り替えは、色の丸で見せる（文字は読み上げ用に残す） */
.viewer-bg {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: 0;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px var(--line-strong);
}

.viewer-bg[data-bg="checker"] {
	background: repeating-conic-gradient(#c3c9cf 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
}

.viewer-bg[data-bg="white"] {
	background: #fff;
}

.viewer-bg[data-bg="black"] {
	background: #16191c;
}

.viewer-bg[data-bg="green"] {
	background: #00b140;
}

.viewer-bg.is-current {
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-fill);
}

.viewer-flip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	white-space: nowrap;
	cursor: pointer;
}

.viewer-reset {
	font: inherit;
	font-size: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	cursor: pointer;
	text-decoration: underline;
}

.viewer-save {
	font: inherit;
	font-size: 0.8125rem;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-small);
	background: var(--bg);
	color: var(--text);
	cursor: pointer;
}

.viewer-save:hover:not(:disabled) {
	background: var(--fill-hover);
}

.viewer-tree,
.viewer-children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.viewer-tree {
	overflow: auto;
	flex: 1;
	padding-top: 8px;
	font-size: 0.875rem;
}

.viewer-children {
	padding-left: 14px;
	border-left: 1px solid var(--line);
	margin-left: 9px;
}

.viewer-row {
	display: flex;
	align-items: center;
	gap: 2px;
}

.viewer-toggle,
.viewer-toggle-space {
	width: 18px;
	flex: none;
	text-align: center;
}

.viewer-toggle {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--muted);
	font-size: 0.8rem;
}

.viewer-label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-height: 32px;
	padding: 2px 8px;
	border-radius: 6px;
	cursor: pointer;
	min-width: 0;
}

.viewer-label:hover {
	background: var(--fill);
}

.viewer-label input {
	margin: 0;
}

.viewer-name {
	overflow-wrap: anywhere;
}

.is-group > .viewer-row .viewer-name {
	font-weight: 700;
}

.viewer-item.is-off > .viewer-row .viewer-label {
	opacity: 0.45;
}

.viewer-badge {
	font-size: 0.6875rem;
	color: var(--muted);
	background: var(--fill);
	border-radius: 4px;
	padding: 0 5px;
	white-space: nowrap;
}

.viewer-hint {
	font-size: 0.6875rem;
	color: var(--muted);
	margin: 8px 0 0;
	line-height: 1.6;
}

.viewer-note {
	margin: 8px 0 0;
}

/* ---- 広告の枠（src/ads.php） ---- */

.ad {
	margin: 32px auto;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
}

.ad-label {
	margin: 0 0 4px;
	font-size: 0.625rem;
	color: var(--muted);
	letter-spacing: 0.14em;
}

.ad-banner img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-small);
}

/* 自社のバナー：「広告」の印をバナーの右下に重ねる（ads.php の ad_slot） */
.ad-frame {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.ad-frame .ad-banner,
.ad-frame picture,
.ad-frame img {
	display: block;
}

.ad-frame .ad-label {
	position: absolute;
	right: 6px;
	bottom: 6px;
	margin: 0;
	padding: 0 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	line-height: 1.7;
	pointer-events: none;
}

/* トップの一覧の1段目の下の広告（home.php）。一覧の中の1件だが、2段目に横幅いっぱいで置く。
   カードは1段目を埋めたあと、3段目から続く。上下のあいだは、一覧の段のあいだ（.cards の gap）にまかせる */
.cards-ad {
	grid-column: 1 / -1;
	grid-row: 2;
	min-width: 0;
}

/* 出す広告がないときは、枠ごと消す（空の段を作らない） */
.cards-ad:empty {
	display: none;
}

.cards-ad .ad {
	margin: 0 auto;
}

.ad-placeholder {
	border-radius: var(--radius-small);
	background: var(--fill-soft);
	color: var(--muted);
	font-size: 0.75rem;
	padding: 24px 12px;
	min-height: 90px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.file-side .ad {
	margin: 0;
}

/* ---- 表（マイページ・管理画面） ---- */

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	display: block;
	overflow-x: auto;
}

.table th,
.table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.table th {
	color: var(--muted);
	font-weight: 700;
	white-space: nowrap;
}

.table-small {
	font-size: 0.8rem;
}

.admin-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-bottom: 16px;
	font-weight: 700;
}

.tabs {
	display: flex;
	gap: 16px;
}

.tabs .is-current {
	font-weight: 800;
	color: var(--text);
	text-decoration: none;
}

.report {
	border-top: 1px solid var(--line);
	padding: 12px 0;
}

.report.is-overdue {
	background: var(--warn-bg);
	padding: 12px;
	border-radius: var(--radius);
}

.report header {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.report blockquote {
	margin: 8px 0;
	padding: 8px 12px;
	background: var(--fill-soft);
	border-radius: var(--radius-small);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.facts-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
}

.facts-grid dd {
	margin: 0;
	min-width: 0;
}

.admin-thumb {
	max-height: 160px;
	margin-top: 4px;
	image-rendering: pixelated;
	background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 0 0 / 12px 12px;
}

.muted-block {
	color: var(--muted);
	font-size: 0.875rem;
	margin: 12px 0;
}

.login-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 360px;
	margin: 20px 0;
}

.age-gate {
	text-align: center;
}

.age-buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.legal h2 {
	font-size: 1.0625rem;
}

/* 規約のいちばん下の、制定日と運営者（運営者の名前は、ここにだけ小さく出す） */
.legal-foot {
	margin-top: 32px;
	font-size: 0.75rem;
	text-align: right;
}

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

@media (max-width: 860px) {
	.file-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"heading"
			"visual"
			"side"
			"body";
	}

	.file-side {
		margin-top: 20px;
	}

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

	/* スマホでは、絵とレイヤーの一覧が同じ画面に収まるようにする */
	.viewer-canvas {
		max-height: 48vh;
	}

	.viewer-panel {
		max-height: 40vh;
	}
}

@media (max-width: 560px) {
	.wrap {
		padding-left: 16px;
		padding-right: 16px;
	}

	.panel {
		padding: 16px;
	}

	/* 頭は、1段目にロゴとボタン、2段目に検索の欄 */
	.header-inner {
		column-gap: 12px;
	}

	.logo-svg {
		height: 26px;
	}

	.logo-tagline {
		font-size: 0.5625rem;
		letter-spacing: 0;
	}

	.header-nav {
		margin-left: auto;
		gap: 6px;
	}

	.header-search {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

	.header-nav .button {
		min-height: 36px;
		padding: 0 12px;
		font-size: 0.8125rem;
	}

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

	.preview-box {
		flex-direction: column;
		align-items: flex-start;
	}

	.upload-file,
	.edit-file {
		gap: 10px;
		padding: 10px;
	}

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

	.upload-file-thumb {
		flex-basis: 64px;
		height: 64px;
	}

	.user-head .avatar-xl {
		width: 64px;
		height: 64px;
		font-size: 1.5rem;
	}

	.user-head-name h1 {
		font-size: 1.25rem;
	}

	.upload-file-thumb canvas {
		max-width: 64px;
		max-height: 64px;
	}
}

/* 作品の編集のページ（2026-10-26 に作り直した）：3つの区画と、下に固定した保存のボタン */
.edit-head {
	margin: 0 0 20px;
}

.edit-head h1 {
	margin-bottom: 2px;
}

.edit-head p {
	margin: 0;
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.edit-section {
	margin: 0 0 28px;
}

.edit-section > h2,
.panel-title {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	font-size: 1rem;
}

.field-hint {
	display: inline;
	margin-left: 8px;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--muted);
}

/* 選択肢を横に並べる（短い選択肢のとき） */
.rating-inline .rating-option {
	display: inline-block;
	margin-right: 18px;
}

.rating-inline .note {
	margin: 6px 0 0;
}

.edit-file {
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
}

.edit-file-thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-small);
	background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 0 0 / 12px 12px;
	overflow: hidden;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--muted);
}

.edit-file-thumb img {
	display: block;
	max-width: 64px;
	max-height: 64px;
}

.edit-file-name {
	margin: 0 0 4px;
}

.edit-file-name .muted {
	display: inline;
	margin-left: 6px;
}

.edit-file-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.edit-file-label .field-label {
	margin: 0;
	flex: none;
	font-weight: 400;
	color: var(--muted);
}

.edit-file-label input {
	flex: 1;
	min-width: 0;
	max-width: 320px;
}

.edit-file-rating {
	margin: 6px 0 0;
	font-size: 0.8125rem;
}

.edit-file-rating .field-label {
	display: inline;
	margin: 0 10px 0 0;
	font-size: 0.8125rem;
}

.edit-file-rating .rating-option {
	display: inline-block;
	margin-right: 12px;
	padding: 0;
}

.edit-file-tools {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	flex: none;
}

.button-icon {
	min-width: 32px;
	padding: 0 8px;
}

.edit-actions {
	position: sticky;
	bottom: 0;
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 -24px -24px;
	padding: 14px 24px;
	background: var(--bg);
	border-top: 1px solid var(--line);
	border-radius: 0 0 var(--radius) var(--radius);
}

.main-image-row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.main-image-row .main-image-current {
	flex: 0 0 240px;
	margin: 0;
}

.main-image-row .main-image-current img {
	max-width: 240px;
}

.main-image-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 240px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-small);
	background: var(--fill-soft);
	color: var(--muted);
	font-weight: 700;
}

.main-image-empty small {
	font-weight: 400;
	font-size: 0.75rem;
}

.main-image-form {
	flex: 1;
	min-width: 0;
}

.main-image-form .note {
	margin: 0 0 12px;
}

.danger-zone summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--danger);
}

.danger-zone .inline-form {
	display: block;
	margin: 12px 0 0;
}

@media (max-width: 560px) {
	.edit-file {
		flex-wrap: wrap;
	}

	.edit-file-main {
		flex: 1 1 calc(100% - 76px);
	}

	.edit-file-tools {
		flex: 1 1 100%;
		justify-content: flex-end;
	}

	.main-image-row {
		flex-direction: column;
	}

	.main-image-row .main-image-current,
	.main-image-empty {
		flex-basis: auto;
		width: 100%;
	}
}