/* ==========================================================
   EMDB 詳細検索（inc/emdb_advanced_search.php）
   すべて .emdb-as 配下にスコープ。Cocoon の変数があれば使い、無ければフォールバック
   ========================================================== */

.emdb-as {
	--as-bg: #fff;
	--as-bg-soft: #f6f7f9;
	--as-border: #e3e6ea;
	--as-text: #333;
	--as-muted: #6b7280;
	--as-accent: #2b6cb0;
	--as-accent-soft: #e8f0fb;
	--as-radius: 8px;
	margin: 0 0 1.4em;
	font-size: 15px;
	color: var(--as-text);
	box-sizing: border-box;
}
.emdb-as *, .emdb-as *::before, .emdb-as *::after { box-sizing: border-box; }

/* 絞り込み中はジャンルナビ（カテゴリタブ）を隠す */
body.emdb-as-active .genre-nav { display: none; }

/* loop_start 保険で #list 内に入ったとき全幅を取る（flex / grid 両対応） */
#list > .emdb-as { flex: 0 0 100%; grid-column: 1 / -1; width: 100%; }

/* ---------- 折りたたみ箱 ---------- */
.emdb-as__box {
	background: var(--as-bg);
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	overflow: visible;
}
.emdb-as__summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: .6em;
	padding: .75em 1em;
	cursor: pointer;
	user-select: none;
	font-weight: 600;
	line-height: 1.3;
}
.emdb-as__summary::-webkit-details-marker { display: none; }
.emdb-as__summary:hover { background: var(--as-bg-soft); border-radius: var(--as-radius); }
.emdb-as__box[open] > .emdb-as__summary { border-bottom: 1px solid var(--as-border); border-radius: var(--as-radius) var(--as-radius) 0 0; }
.emdb-as__summary-icon { color: var(--as-accent); }
.emdb-as__badge {
	font-size: .78em;
	font-weight: 600;
	color: var(--as-accent);
	background: var(--as-accent-soft);
	border-radius: 999px;
	padding: .15em .7em;
}
.emdb-as__chev {
	margin-left: auto;
	width: .6em; height: .6em;
	border-right: 2px solid var(--as-muted);
	border-bottom: 2px solid var(--as-muted);
	transform: rotate(45deg);
	transition: transform .15s;
}
.emdb-as__box[open] .emdb-as__chev { transform: rotate(-135deg); }

/* ---------- フォーム ---------- */
.emdb-as__form { padding: 1em 1em 1.1em; margin: 0; }
.emdb-as__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9em 1.2em;
}
@media (min-width: 1100px) { .emdb-as--shortcode .emdb-as__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .emdb-as__grid { grid-template-columns: minmax(0, 1fr); } }
.emdb-as__field { min-width: 0; }
.emdb-as__field--full { grid-column: 1 / -1; }
.emdb-as__label {
	display: block;
	font-size: .82em;
	font-weight: 600;
	color: var(--as-muted);
	margin: 0 0 .3em;
	letter-spacing: .02em;
}
.emdb-as__label--spacer { visibility: hidden; }
@media (max-width: 640px) { .emdb-as__label--spacer { display: none; } }
.emdb-as__help { display: block; margin-top: .3em; font-size: .76em; color: var(--as-muted); line-height: 1.4; }

.emdb-as__input, .emdb-as__select {
	width: 100%;
	font-size: .95em;
	padding: .5em .7em;
	border: 1px solid #cfd4da;
	border-radius: 6px;
	background: var(--as-bg);
	color: var(--as-text);
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
.emdb-as__select {
	background-image: linear-gradient(45deg, transparent 50%, var(--as-muted) 50%), linear-gradient(135deg, var(--as-muted) 50%, transparent 50%);
	background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2em;
}
.emdb-as__input:focus, .emdb-as__select:focus { outline: none; border-color: var(--as-accent); box-shadow: 0 0 0 3px var(--as-accent-soft); }
.emdb-as__input::placeholder { color: #9aa3ad; }

/* チェックボックス群 */
.emdb-as__checks { display: flex; flex-wrap: wrap; gap: .4em .5em; }
.emdb-as__check {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .3em .7em .3em .55em;
	border: 1px solid var(--as-border);
	border-radius: 999px;
	background: var(--as-bg-soft);
	font-size: .88em;
	cursor: pointer;
	margin: 0;
	line-height: 1.3;
	white-space: nowrap;
}
.emdb-as__check input { margin: 0; accent-color: var(--as-accent); }
.emdb-as__check small { color: var(--as-muted); font-size: .85em; }
.emdb-as__check:hover { border-color: #c5ccd4; }
.emdb-as__check:has(input:checked) { background: var(--as-accent-soft); border-color: var(--as-accent); color: var(--as-accent); }
.emdb-as__check--flag { font-size: .95em; }

/* 日付範囲 */
.emdb-as__range { display: flex; align-items: center; gap: .4em; }
.emdb-as__range .emdb-as__input--date { flex: 1 1 0; min-width: 0; }
.emdb-as__range-sep { color: var(--as-muted); flex: 0 0 auto; }

/* オートコンプリート */
.emdb-as__suggest { position: relative; }
.emdb-as__suggest.is-loading .emdb-as__suggest-input {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 50 50'><circle cx='25' cy='25' r='20' fill='none' stroke='%23999' stroke-width='5' stroke-dasharray='31 31'><animateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='1s' repeatCount='indefinite'/></circle></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 18px 18px;
}
.emdb-as__chips { display: flex; flex-wrap: wrap; gap: .35em; }
.emdb-as__chips:not(:empty) { margin-bottom: .4em; }
.emdb-as__chip {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	max-width: 100%;
	padding: .2em .35em .2em .7em;
	background: var(--as-accent-soft);
	color: var(--as-accent);
	border: 1px solid #c7d9f2;
	border-radius: 999px;
	font-size: .86em;
	line-height: 1.3;
}
.emdb-as__chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emdb-as__chip-x {
	appearance: none; -webkit-appearance: none;
	border: 0; background: transparent; color: inherit;
	width: 1.4em; height: 1.4em; border-radius: 50%;
	font-size: 1em; line-height: 1; cursor: pointer; padding: 0; margin: 0;
	display: inline-flex; align-items: center; justify-content: center;
}
.emdb-as__chip-x:hover { background: rgba(43, 108, 176, .15); }
.emdb-as__dropdown {
	position: absolute;
	z-index: 50;
	left: 0; right: 0;
	top: 100%;
	margin: .25em 0 0;
	padding: .25em 0;
	list-style: none;
	background: var(--as-bg);
	border: 1px solid var(--as-border);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	max-height: 280px;
	overflow-y: auto;
}
.emdb-as__opt {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .6em;
	padding: .45em .8em;
	cursor: pointer;
	font-size: .92em;
	line-height: 1.35;
	margin: 0;
}
.emdb-as__opt::before { display: none; }
.emdb-as__opt:hover, .emdb-as__opt.is-active { background: var(--as-accent-soft); }
.emdb-as__opt.is-picked { opacity: .55; }
.emdb-as__opt-label { font-weight: 600; }
.emdb-as__opt-read, .emdb-as__opt-note { color: var(--as-muted); font-size: .85em; }

/* アクション */
.emdb-as__actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6em;
	margin-top: 1.1em; padding-top: .9em;
	border-top: 1px dashed var(--as-border);
}
.emdb-as__btn {
	appearance: none; -webkit-appearance: none;
	display: inline-flex; align-items: center; gap: .4em;
	font-size: .93em; font-weight: 600;
	padding: .55em 1.3em;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.3;
	margin: 0;
}
.emdb-as__btn--primary { background: var(--as-accent); color: #fff; }
.emdb-as__btn--primary:hover { filter: brightness(1.08); color: #fff; }
.emdb-as__btn--ghost { background: transparent; color: var(--as-muted); border-color: var(--as-border); }
.emdb-as__btn--ghost:hover { background: var(--as-bg-soft); color: var(--as-text); }
.emdb-as__hint { margin-left: auto; font-size: .76em; color: var(--as-muted); }
@media (max-width: 640px) { .emdb-as__hint { margin-left: 0; flex-basis: 100%; } }

/* ---------- ステータス・結果 ---------- */
.emdb-as__status {
	display: flex; align-items: center; gap: .5em; flex-wrap: wrap;
	margin: .7em 0 0;
	padding: .55em .9em;
	background: var(--as-accent-soft);
	border: 1px solid #c7d9f2;
	border-radius: 6px;
	font-size: .9em;
	color: var(--as-text);
}
.emdb-as__status[hidden], .emdb-as__dropdown[hidden], .emdb-as__badge[hidden] { display: none; }
.emdb-as__status strong { font-size: 1.15em; color: var(--as-accent); }
.emdb-as__status-clear { margin-left: auto; font-size: .9em; color: var(--as-accent); text-decoration: underline; }
.emdb-as__status-page { color: var(--as-muted); }
.emdb-as.is-loading .emdb-as__results { opacity: .5; pointer-events: none; }
.emdb-as__results { margin-top: 1em; }
.emdb-as__list { margin: 0; }
.emdb-as__list--simple { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
@media (max-width: 640px) { .emdb-as__list--simple { grid-template-columns: minmax(0, 1fr); } }
.emdb-as__empty {
	padding: 1.4em 1em; text-align: center; color: var(--as-muted);
	background: var(--as-bg-soft); border: 1px dashed var(--as-border); border-radius: var(--as-radius);
}
.emdb-as__empty--error { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

/* creator / brand の簡易カード */
.emdb-as__card {
	display: flex; flex-direction: column; gap: .35em;
	padding: .8em .95em;
	background: var(--as-bg);
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	color: var(--as-text);
	text-decoration: none;
	transition: box-shadow .12s, border-color .12s;
}
.emdb-as__card:hover { border-color: var(--as-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); color: var(--as-text); }
.emdb-as__card-main { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.emdb-as__card-title { font-weight: 700; font-size: 1.02em; line-height: 1.35; overflow-wrap: anywhere; }
.emdb-as__card-read { font-size: .8em; color: var(--as-muted); }
.emdb-as__card-sub { font-size: .8em; color: var(--as-muted); overflow-wrap: anywhere; }
.emdb-as__card-tags { display: flex; flex-wrap: wrap; gap: .3em; }
.emdb-as__tag {
	font-size: .74em; padding: .15em .6em; border-radius: 999px;
	background: var(--as-bg-soft); border: 1px solid var(--as-border); color: var(--as-muted);
}
.emdb-as__tag--group { background: #fff7ed; border-color: #fdba74; color: #9a3412; }

/* ページャ */
.emdb-as__pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em; margin: 1.2em 0 .4em; }
.emdb-as__pager:empty { display: none; }
.emdb-as__page {
	appearance: none; -webkit-appearance: none;
	min-width: 2.3em; padding: .45em .7em;
	border: 1px solid var(--as-border); border-radius: 6px;
	background: var(--as-bg); color: var(--as-text);
	font-size: .9em; cursor: pointer; line-height: 1.2; margin: 0;
}
.emdb-as__page:hover:not(:disabled) { border-color: var(--as-accent); color: var(--as-accent); }
.emdb-as__page.is-current { background: var(--as-accent); border-color: var(--as-accent); color: #fff; }
.emdb-as__page:disabled { opacity: .45; cursor: default; }
.emdb-as__page-dots { align-self: center; color: var(--as-muted); padding: 0 .2em; }

.emdb-as__error { color: #b91c1c; }

/* ---------- ダークスキン（Cocoon .skin-dark 等） ---------- */
.skin-dark .emdb-as, body.dark .emdb-as {
	--as-bg: #1f2227;
	--as-bg-soft: #2a2e35;
	--as-border: #3a3f47;
	--as-text: #e5e7eb;
	--as-muted: #9aa3ad;
	--as-accent: #7eb3ff;
	--as-accent-soft: rgba(126, 179, 255, .15);
}
.skin-dark .emdb-as__input, .skin-dark .emdb-as__select { border-color: #3a3f47; }
.skin-dark .emdb-as__chip, .skin-dark .emdb-as__status { border-color: rgba(126, 179, 255, .35); }