/*
 * Actress Directory Engine：公開の女優一覧。
 *
 * - ADE 専用のクラス（.ade-index と .ade-index__*）だけに当てる。テーマ（SWELL など）の要素には当てない。
 * - 色は CSS 変数で変えられる（設定画面の色、またはテーマの CSS で上書きする）。
 *     --ade-heading：見出しと検索欄の色（既定：濃紺）
 *     --ade-accent ：リンクとボタンの色（既定：濃紺）
 *     --ade-band   ：見出しの帯・区切りの背景（既定：薄いグレー）
 * - 画像は使わない。スマートフォンでは 1〜2 列、PC では幅に応じて複数列にする。
 */
.ade-index {
	--ade-heading: #1b2a4a;
	--ade-accent: #1b2a4a;
	--ade-band: #f2f3f5;
	--ade-bg: #fff;
	--ade-text: #1d2327;
	--ade-muted: #5f6368;
	--ade-border: #dcdfe4;
	box-sizing: border-box;
	background: var(--ade-bg);
	color: var(--ade-text);
	line-height: 1.6;
	margin: 0 0 2em;
}

.ade-index *,
.ade-index *::before,
.ade-index *::after {
	box-sizing: inherit;
}

/* 検索 */
.ade-index .ade-index__search {
	margin: 0 0 1.25em;
}

.ade-index .ade-index__search-label {
	display: block;
	font-weight: 700;
	color: var(--ade-heading);
	margin-bottom: 0.4em;
}

.ade-index .ade-index__search-row {
	display: flex;
	gap: 0.5em;
	max-width: 36em;
}

.ade-index .ade-index__search-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.6em 0.8em;
	border: 2px solid var(--ade-heading);
	border-radius: 4px;
	background: #fff;
	color: var(--ade-text);
	font-size: 1rem;
}

.ade-index .ade-index__search-button {
	flex: 0 0 auto;
	padding: 0.6em 1.2em;
	border: 0;
	border-radius: 4px;
	background: var(--ade-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.ade-index .ade-index__search-button:hover,
.ade-index .ade-index__search-button:focus {
	opacity: 0.85;
}

/* 五十音ナビ */
.ade-index .ade-index__nav {
	margin: 0 0 1.5em;
	padding: 0.6em;
	background: var(--ade-band);
	border-radius: 4px;
}

.ade-index .ade-index__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ade-index .ade-index__nav-item {
	margin: 0;
	padding: 0;
}

.ade-index .ade-index__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	min-width: 2.75em;
	min-height: 2.75em;
	justify-content: center;
	padding: 0.2em 0.6em;
	border: 1px solid var(--ade-border);
	border-radius: 4px;
	background: #fff;
	color: var(--ade-accent);
	font-weight: 700;
	text-decoration: none;
}

.ade-index .ade-index__nav-link.is-current {
	background: var(--ade-accent);
	border-color: var(--ade-accent);
	color: #fff;
}

.ade-index .ade-index__nav-link.is-empty {
	color: var(--ade-muted);
	opacity: 0.6;
	font-weight: 400;
}

.ade-index .ade-index__nav-count {
	font-size: 0.75em;
	font-weight: 400;
}

/* 行の中の文字のナビ（行を選んだときだけ。0.10.8 からは同じページの見出しへの # リンク） */
.ade-index .ade-index__chars {
	margin: -1em 0 1.5em;
	padding: 0.5em 0.6em;
	border: 1px solid var(--ade-border);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	background: #fff;
}

.ade-index .ade-index__chars-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ade-index .ade-index__chars-item {
	margin: 0;
	padding: 0;
}

.ade-index .ade-index__chars-item::before,
.ade-index .ade-index__chars-item::marker {
	content: none;
}

.ade-index .ade-index__chars-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	min-width: 2.75em;
	min-height: 2.75em;
	padding: 0.2em 0.6em;
	border: 1px solid var(--ade-accent);
	border-radius: 999px;
	background: #fff;
	color: var(--ade-accent);
	font-weight: 700;
	text-decoration: none;
}

.ade-index a.ade-index__chars-link:hover,
.ade-index a.ade-index__chars-link:focus {
	background: var(--ade-accent);
	color: #fff;
}

.ade-index .ade-index__chars-link.is-empty {
	border-color: var(--ade-border);
	color: var(--ade-muted);
	opacity: 0.6;
	font-weight: 400;
	cursor: default;
}

.ade-index .ade-index__chars-count {
	font-size: 0.75em;
	font-weight: 400;
}

/* 見出しと一覧 */
.ade-index .ade-index__group {
	margin: 0 0 1.75em;
}

.ade-index .ade-index__heading {
	margin: 0 0 0.6em;
	padding: 0.35em 0.7em;
	border: 0;
	border-left: 4px solid var(--ade-heading);
	background: var(--ade-band);
	color: var(--ade-heading);
	font-size: 1.15em;
	line-height: 1.4;
}

.ade-index .ade-index__heading::before,
.ade-index .ade-index__heading::after {
	content: none;
	display: none;
}

/* 文字の見出し（あ・い・う…。行を選んだ表示）。ナビの # リンクで移動したとき、固定ヘッダー（SWELL など）に隠れないよう余白を取る。 */
.ade-index .ade-index__group--char {
	scroll-margin-top: calc(var(--swl-fix_headerH, 0px) + var(--swl-adminbarH, 0px) + 16px);
}

.ade-index .ade-index__group--char + .ade-index__group--char {
	padding-top: 1.25em;
	border-top: 1px dashed var(--ade-border);
}

.ade-index .ade-index__heading--char {
	display: flex;
	align-items: center;
	min-height: 2em;
	border-left-width: 6px;
	font-size: 1.3em;
	letter-spacing: 0.05em;
}

.ade-index .ade-index__note,
.ade-index .ade-index__result,
.ade-index .ade-index__empty {
	color: var(--ade-muted);
	margin: 0 0 0.8em;
}

.ade-index .ade-index__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ade-index .ade-index__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0.55em 0.75em;
	border: 1px solid var(--ade-border);
	border-radius: 4px;
	background: #fff;
}

/* テーマの本文（SWELL の .post_content など）のリスト記号を打ち消す。 */
.ade-index .ade-index__item::before,
.ade-index .ade-index__item::marker,
.ade-index .ade-index__nav-item::before,
.ade-index .ade-index__nav-item::marker {
	content: none;
}

.ade-index .ade-index__link {
	color: var(--ade-accent);
	text-decoration: none;
}

.ade-index .ade-index__link:hover .ade-index__name,
.ade-index .ade-index__link:focus .ade-index__name {
	text-decoration: underline;
}

.ade-index .ade-index__name {
	display: block;
	font-weight: 700;
	font-size: 1.05em;
	overflow-wrap: anywhere;
}

.ade-index .ade-index__reading,
.ade-index .ade-index__count,
.ade-index .ade-index__same {
	display: block;
	color: var(--ade-muted);
	font-size: 0.8em;
}

/* ページ送り */
.ade-index .ade-index__pager-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75em;
	margin: 1.5em 0 0;
	padding: 0;
	list-style: none;
}

.ade-index .ade-index__pager-link {
	display: inline-block;
	padding: 0.5em 1em;
	border: 1px solid var(--ade-accent);
	border-radius: 4px;
	color: var(--ade-accent);
	text-decoration: none;
}

.ade-index .ade-index__pager-current {
	color: var(--ade-muted);
}

/* スマートフォン */
@media (max-width: 600px) {
	.ade-index .ade-index__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ade-index .ade-index__nav-link,
	.ade-index .ade-index__chars-link {
		min-width: 2.5em;
		min-height: 2.5em;
		padding: 0.2em 0.45em;
	}
}

@media (max-width: 360px) {
	.ade-index .ade-index__list {
		grid-template-columns: minmax(0, 1fr);
	}
}