/*
Theme Name: dystopia-dict
Theme URI:
Author: 匿名
Description: ディストピアに関連する用語を集めた辞典。文学・映画・アニメ・現実社会の概念をカード形式で一覧する。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dystopia-dict
*/

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

/* フォントは functions.php（カスタマイザー）が同名の変数で上書きする。
   ここは読み込み前のフォールバック既定。 */
:root {
	--font-title: 'EB Garamond', 'Shippori Mincho', serif;
	--font-name:  'EB Garamond', 'Shippori Mincho', serif;
	--font-body:  'EB Garamond', 'Shippori Mincho', serif;
	--size-title: 19px;
	--size-name:  16px;
	--size-body:  14px;
	--color-title: #e0e0e0;
	--color-name:  #e0e0e0;
	--color-body:  #a1a1a1;
	--card-glow:       0.09; /* いま見ている枠（ふち）の光の強さ（0〜0.25くらい） */
	--card-glow-inner: 0;    /* いま見ている枠（中身）の内側の光の強さ（0〜0.25くらい） */
	--buy-size:  14px;    /* 作品モーダル「作品を見る」ボタンの文字サイズ */
	--buy-color: #dcdcdc; /* 作品モーダル「作品を見る」ボタンの文字色 */
	--footer-size:  11px; /* フッターの文字サイズ */
	--footer-color: #333; /* フッターの文字色 */
}

body {
	background-color: #0a0a0a;
	color: var(--color-body);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #d0d0d0;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

a:hover {
	opacity: 0.6;
}

/* Layout */
.site-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 24px 40px;
}

/* Header */
.site-header {
	margin-bottom: 48px;
	text-align: center;
}

.site-title {
	font-family: var(--font-title);
	font-size: var(--size-title);
	font-weight: 400;
	letter-spacing: 0.12em;
	margin: 0;
}

.site-title a {
	color: var(--color-title);
}

/* 上部の広告表示（文字サイズはインラインで指定・カスタマイザー）
   文字は左揃え。読みやすい幅(最大520px)で自動的に折り返す。
   短い文はその幅にぴたっと収まり中央に、長い文は520px幅で折り返す。 */
.site-disclosure-top {
	width: -webkit-fit-content;
	width: fit-content;
	max-width: 100%; /* 実際の折り返し幅はインライン(max-width)＝カスタマイザーで指定 */
	margin: -24px auto 44px;
	text-align: left;
	color: #6b6b6b;
	letter-spacing: 0.04em;
	line-height: 1.7;
}

.site-description {
	font-size: 12px;
	color: #555;
	margin: 8px 0 0;
	letter-spacing: 0.05em;
}

/* ヘッダー画像パターン（カスタマイザー → ヘッダー画像） */

/* エンブレム：タイトルの上に小さな画像 */
.site-header__emblem {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
	margin: 0 auto 18px;
	opacity: 0.92;
}

/* バナー帯：横長の画像を上に置き、タイトルはその下 */
.site-header--banner {
	margin-bottom: 40px;
}

.site-header__banner {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 4px;
	margin: 0 0 28px;
	opacity: 0.88;
}

/* 背景敷き：画像を背景にしてタイトルを重ねる */
.site-header--cover {
	position: relative;
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	overflow: hidden;
	padding: 0;
	margin-bottom: 44px;
}

.site-header--cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.78) 100%);
}

.site-header__overlay {
	position: relative;
	z-index: 1;
	padding: 88px 24px;
}

/* Category filter */
.cat-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0 0 40px;
}

.cat-chip {
	background: transparent;
	border: 1px solid #222;
	color: #666;
	font-family: inherit;
	font-size: 12px;
	letter-spacing: 0.08em;
	padding: 6px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cat-chip:hover {
	border-color: #444;
	color: #999;
}

.cat-chip.is-active {
	background: #1a1a1a;
	border-color: #333;
	color: #d0d0d0;
}

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

/* Card */
.term-card {
	background: #111;
	border: 1px solid #1a1a1a;
	border-radius: 4px;
	padding: 24px;
	transition: border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

/* いま見ている枠をほのかに光らせる。
   光は box-shadow だけで表現する（にじみ＋内側の縁取り）ので、
   --card-glow を 0 にすると完全に何も起きない。
   PC（マウスあり）はカーソルを当てた枠。 */
@media (hover: hover) and (pointer: fine) {
	.term-card:hover {
		box-shadow:
			inset 0 0 55px rgba(255, 255, 255, var(--card-glow-inner)),
			inset 0 0 0 1px rgba(255, 255, 255, calc(var(--card-glow) * 2.5)),
			0 0 40px rgba(255, 255, 255, var(--card-glow));
	}
}

/* スマホなど（マウスの無い環境）はスクロールで画面中央に来た枠
   （assets/focus-glow.js が .in-view を付け外しする）。 */
.term-card.in-view {
	box-shadow:
		inset 0 0 55px rgba(255, 255, 255, var(--card-glow-inner)),
		inset 0 0 0 1px rgba(255, 255, 255, calc(var(--card-glow) * 2.5)),
		0 0 40px rgba(255, 255, 255, var(--card-glow));
}

.term-name {
	font-family: var(--font-name);
	font-size: var(--size-name);
	font-weight: 500;
	color: var(--color-name);
	margin: 0 0 12px;
	letter-spacing: 0.04em;
}

.term-desc {
	font-size: var(--size-body);
	margin: 0 0 16px;
	line-height: 1.95;
}

.term-source {
	display: block;
	font-size: 11px;
	color: #888;
	margin-bottom: 12px;
}

/* クリックで作品情報を開く出典（ボタンだが見た目はテキスト） */
.term-source--link {
	font-family: inherit;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	cursor: pointer;
	color: #8a8a8a;
	border-bottom: 1px dotted #444;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.term-source--link:hover {
	color: #c0c0c0;
	border-bottom-color: #777;
}

.term-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.term-tag {
	font-size: 10px;
	color: #888;
	border: 1px solid #2a2a2a;
	border-radius: 999px;
	padding: 2px 10px;
}

/* シェアボタン（各カード右下・控えめ） */
.term-share {
	display: flex;
	gap: 15px;
	justify-content: flex-end;
	margin-top: 16px;
}

.term-share .ts-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: #3f3f3f;
	transition: color 0.2s ease;
}

.term-share .ts-btn:hover {
	color: #b8b8b8;
}

.term-share .ts-btn.is-copied {
	color: #8aa88a;
}

.term-share .ts-btn svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	display: block;
}

/* 作品情報モーダル */
.work-modal[hidden] {
	display: none;
}

.work-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.work-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	-webkit-backdrop-filter: blur(2px);
	        backdrop-filter: blur(2px);
}

.work-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	background: #121212;
	border: 1px solid #2a2a2a;
	border-radius: 6px;
	padding: 34px 30px 30px;
	animation: wm-in 0.42s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes wm-in {
	from { opacity: 0; transform: translateY(12px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.work-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	color: #666;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
}

.work-modal__close:hover {
	color: #bbb;
}

.work-modal__meta {
	font-size: 11px;
	color: #777;
	letter-spacing: 0.05em;
	margin: 0 0 6px;
}

.work-modal__title {
	font-family: var(--font-name);
	font-size: 17px;
	font-weight: 500;
	color: #ececec;
	margin: 0 0 16px;
	letter-spacing: 0.03em;
}

.work-modal__synopsis {
	font-size: 13px;
	line-height: 1.95;
	color: #a8a8a8;
	margin: 0 0 22px;
}

.work-modal__buy[hidden] {
	display: none;
}

.work-modal__sep {
	border: 0;
	border-top: 1px solid #242424;
	margin: 0 0 16px;
}

.work-modal__disclosure {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: #6f6f6f;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
}

.wm-pr {
	flex: none;
	border: 1px solid #3a3a3a;
	border-radius: 3px;
	padding: 1px 6px;
	font-size: 9px;
	letter-spacing: 0.18em;
	color: #9a9a9a;
}

.work-modal__amazon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-name);
	font-size: var(--buy-size);
	color: var(--buy-color);
	border: 1px solid #333;
	border-radius: 12px;
	padding: 16px 20px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.work-modal__amazon::after {
	content: "\2197"; /* ↗ */
	flex: none;
	color: #7d7d7d;
}

.work-modal__amazon:hover {
	border-color: #555;
	background: rgba(255, 255, 255, 0.02);
}

body.modal-open {
	overflow: hidden;
}

/* Footer */
.site-footer {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid #151515;
	text-align: center;
	font-size: var(--footer-size);
	color: var(--footer-color);
}

/* Responsive */
@media (max-width: 640px) {
	.site-container {
		padding: 40px 16px 32px;
	}

	.card-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/* スマホは1列に縦積みになり極薄の枠が消えるので、境目を少しはっきりさせる */
	.term-card {
		background: #151515;
		border-color: #2c2c2c;
	}

	.site-header {
		margin-bottom: 32px;
	}

	.site-header__banner {
		height: 140px;
	}

	.site-header__overlay {
		padding: 60px 18px;
	}
}

/* 用語カードの見出しリンク（クリックで専用ページへ） */
.term-name a {
	color: inherit;
}

.term-name a:hover {
	opacity: 1;
	color: #fff;
}

/* ------------------------------------------------------------------
   用語の専用ページ（?term=ID）
   一覧と同じ墨トーン。意味＋来歴＋出典＋関連語＋シェア。
   ------------------------------------------------------------------ */
.tsingle {
	max-width: 680px;
	margin: 0 auto;
}

.tsingle-back {
	font-size: 12px;
	margin: 0 0 20px;
}

.tsingle-back a {
	color: #777;
}

.tsingle-card {
	background: #111;
	border: 1px solid #1a1a1a;
	border-radius: 6px;
	padding: 44px 44px 30px;
}

.tsingle-meta {
	font-size: 11px;
	color: #777;
	letter-spacing: 0.05em;
	margin: 0 0 14px;
}

.tsingle-name {
	font-family: var(--font-name);
	font-size: 30px;
	font-weight: 500;
	color: #ececec;
	letter-spacing: 0.04em;
	line-height: 1.45;
	margin: 0 0 24px;
}

.tsingle-lead {
	font-size: 16px;
	line-height: 2;
	color: #cfcfcf;
	margin: 0 0 32px;
}

.tsingle-sec {
	margin: 0 0 32px;
}

.tsingle-label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	letter-spacing: 0.22em;
	color: #6f6f6f;
	margin: 0 0 16px;
}

.tsingle-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #242424;
}

.tsingle-body {
	font-size: 14px;
	line-height: 2.05;
	color: #a1a1a1;
	margin: 0 0 15px;
}

.tsingle-body:last-child {
	margin-bottom: 0;
}

.tsingle-source {
	border-top: 1px solid #202020;
	padding-top: 24px;
	margin: 0 0 28px;
}

.tsingle-src-k {
	font-size: 11px;
	letter-spacing: 0.18em;
	color: #6f6f6f;
	margin: 0 0 12px;
}

.tsingle-work-title {
	font-family: var(--font-name);
	font-size: 15px;
	color: #dcdcdc;
	letter-spacing: 0.03em;
	margin: 0 0 10px;
}

.tsingle-work-by {
	font-family: var(--font-body);
	font-size: 11px;
	color: #777;
	letter-spacing: 0;
	margin-left: 10px;
}

.tsingle-work-syn {
	font-size: 13px;
	line-height: 1.95;
	color: #9a9a9a;
	margin: 0 0 16px;
}

.tsingle-buy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-name);
	font-size: 13px;
	color: #dcdcdc;
	border: 1px solid #333;
	border-radius: 12px;
	padding: 10px 18px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.tsingle-buy:hover {
	opacity: 1;
	border-color: #555;
	background: rgba(255, 255, 255, 0.02);
}

.tsingle-buy::after {
	content: "\2197";
	color: #7d7d7d;
}

.tsingle-pr {
	border: 1px solid #3a3a3a;
	border-radius: 3px;
	padding: 1px 6px;
	font-size: 9px;
	letter-spacing: 0.18em;
	color: #9a9a9a;
}

.tsingle-related {
	margin: 0 0 28px;
}

.tsingle-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tsingle-chip {
	font-size: 12px;
	color: #b0b0b0;
	border: 1px solid #2a2a2a;
	border-radius: 999px;
	padding: 4px 14px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.tsingle-chip:hover {
	opacity: 1;
	color: #e0e0e0;
	border-color: #444;
}

.tsingle-share {
	margin-top: 6px;
}

@media (max-width: 640px) {
	.tsingle-card {
		padding: 30px 22px 24px;
		background: #151515;
		border-color: #2c2c2c;
	}

	.tsingle-name {
		font-size: 25px;
	}

	.tsingle-lead {
		font-size: 15px;
	}
}