/* FANZA ItemList のスタイル定義。
   「ページ全体 -> 上部コントロール -> カード -> 補助 UI」の順で並べ、
   どこを触れば何が変わるか追いやすい構成にしている。 */

/* ページ全体と一覧グリッド。
   レイアウトの土台と、デバッグ表示の最低限の整形をここでまとめる。 */
body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;
}
#grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}
#paginationSentinel {
    width: 100%;
    height: 1px;
}
#debug {
    white-space: pre-wrap;
    word-break: break-all;
}

/* 一覧内の状態メッセージ。
   取得失敗でも空状態でも、カード一覧と同じ文脈で読める位置に出す。 */
.grid-error-message {
    margin: 16px 0;
    padding: 8px 12px;
    border-radius: 4px;
    background: #ffecec;
    color: #a00;
    font-size: 0.95rem;
}

/* カードの主リンク領域。
   画像とタイトルをひとまとまりのクリック領域として扱う。 */
#grid a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
}
#grid a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* キーボード操作時のフォーカス枠。
   長い一覧でも、いま見ているカード位置を追いやすくする。 */
#grid .card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
#grid a img {
    aspect-ratio: 64 / 43;
    width: 100%;
    height: auto;
    object-fit: contain;
}
#grid a p {
    margin: 8px 0 0;
}

/* クレジット表記。
   主操作の邪魔にならない補助情報として控えめに置く。 */
.credit {
    font-size: xx-small;
    text-align: center;
}

/* 上部フィルタ群。
   取得済みアイテムにかける表示条件をまとめて切り替える。 */
#filters {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 12px 0 20px;
    flex-wrap: wrap; /* 狭い画面で横にはみ出さず、操作不能にならないようにする */
}
#filters label {
    font-size: 1rem;
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f9f9f9;
    cursor: pointer;
    user-select: none;
}
#filters input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: middle;
}
@media (hover:hover) {
    #filters label:hover {
        background: #f0f0f0;
    }
}

/* 並び順セレクト。
   表示条件ではなく、API の再取得を伴う取得条件の入口。 */
#filters select#sortSelect {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-size: 1rem;
    cursor: pointer;
}

/* カード表示系の全体設定。
   関連ページでも流用できるよう、同系統クラスを同じ見た目で受ける。 */
.card-view-controls,
.actress-info-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 0.95rem;
}

.card-view-controls__title,
.actress-info-controls__title {
    margin: 0;
    font-weight: bold;
    font-size: 0.95rem;
    text-align: center;
}

.card-view-controls__buttons,
.actress-info-controls__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.card-view-controls label,
.actress-info-controls label {
    font-size: 1rem;
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f9f9f9;
    cursor: pointer;
    user-select: none;
}

.card-view-controls input[type="checkbox"],
.actress-info-controls input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: middle;
}

@media (hover:hover) {
    .card-view-controls label:hover {
        background: #f0f0f0;
    }
}

/* 検索フォーム。
   ItemList の再取得条件を入力する唯一の検索口。 */
.search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 20px;
}

.search-form input[type="search"] {
    width: min(100%, 420px);
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-size: 1rem;
    box-sizing: border-box;
}

.search-form button[type="submit"] {
    padding: 10px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f9f9f9;
    font-size: 1rem;
    cursor: pointer;
    color: inherit;
}

@media (hover:hover) {
    .search-form button[type="submit"]:hover {
        background: #f0f0f0;
    }
}

/* 視覚的には隠しつつ、支援技術には残すラベル。 */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* カード本体の外枠。
   共通の箱だけをここで整え、細部は下の節へ分ける。 */
#grid .card {
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 6px;
    color: inherit;
    background: #fff;
}

#grid .card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* カード下部のキャスト一覧。
   タイトルの主情報と分け、補助情報として読める形にする。 */
#grid .cast {
    margin: 8px 0 0;
    padding-left: 8px;
    list-style: none;
    font-size: 0.95rem;
    line-height: 1.5;
}

#grid .cast .cast-actress-image {
    display: block;
    width: 60px;      /* 補助画像が入っても一覧の読み順と横幅を崩しにくくする */
    height: auto;
    margin-bottom: 4px;
}

#grid .cast li + li { margin-top: 4px; }

/* キャスト一覧の個別開閉ボタン。
   全体設定とは別に、カード単位で一時的に表示を上書きする。 */
#grid .cast-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 5.3em;
    line-height: 1.6;
    white-space: nowrap;
    box-sizing: border-box;

    margin-top: 8px;
    margin-left: 7px;
    padding: 4px 8px;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
    cursor: pointer;
}

@media (hover:hover) {
    #grid .cast-toggle:hover {
        background: #f0f0f0;
    }
}

/* カード下部の個別操作群。
   Cast toggle と Exclude を同じ操作帯にまとめ、判断位置を散らさない。 */
#grid .card-inline-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    margin-left: 7px;
    flex-wrap: wrap;
}

#grid .card-inline-controls .cast-toggle {
    margin-top: 0;
    margin-left: 0;
}

#grid .exclude-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
    cursor: pointer;
    user-select: none;
    line-height: 1.6;
}

#grid .exclude-toggle__input {
    margin: 0;
}

@media (hover:hover) {
    #grid .exclude-toggle:hover {
        background: #f0f0f0;
    }
}

/* ページトップボタン。
   無限スクロールで伸びた一覧でも先頭へ戻りやすくする。 */
.pagetop {
	height: 50px;
	width: 50px;
	position: fixed;
	right: 30px;
	bottom: 30px;
	background: rgba(255,255,255,.3);
	border: solid 2px rgba(255,255,255,.3);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	cursor: pointer;
}

.pagetop__arrow {
	height: 10px;
	width: 10px;
	border-top: 3px solid rgba(0,0,0,.7);
	border-right: 3px solid rgba(0,0,0,.7);
	transform: translateY(20%) rotate(-45deg);
}