/* ============================================================
   一覧・詳細プラグイン（フル版 list-pro）用スタイル
   - フレーム非依存。テーマ変数を使うのでフレーム切替で色も追従。
   - 色背景セクションでも読めるよう color:inherit 基調。
   ============================================================ */

.pro-list-parts { margin: 0.5em 0; }

/* 検索ボックス */
.pro-search { display: flex; gap: .5em; margin: 0 0 1em; }
.pro-search-input {
  flex: 1 1 auto; min-width: 0; padding: .55em .9em;
  border: 1px solid var(--bg-border-color, rgba(0,0,0,.25)); border-radius: 5px; font-size: 1em; background: var(--bg-color, #fff); color: inherit;
}
.pro-search-btn {
  flex: 0 0 auto; padding: .6em 1.5em; border: 0; border-radius: 5px; cursor: pointer; font-weight: 700;
  background: var(--primary-color, #2563eb); color: var(--primary-inverse-color, #fff);
}
/* 詳細絞り込みフォーム */
.pro-filter { background: rgba(128,128,128,.08); border: 1px solid var(--bg-border-color, rgba(0,0,0,.1)); border-radius: 5px; padding: 1em 1.1em; margin: 0 0 1.2em; }
.pro-filter-search { margin-bottom: .8em; }
.pro-filter-fields { display: flex; flex-wrap: wrap; gap: .8em 1.2em; }
.pro-filter-item { display: flex; flex-direction: column; gap: .25em; }
.pro-filter-label { font-size: .82em; font-weight: 700; opacity: .8; }
.pro-filter-item select,
.pro-filter-range input { padding: .4em .6em; border: 1px solid var(--bg-border-color, rgba(0,0,0,.25)); border-radius: 5px; background: var(--bg-color, #fff); color: inherit; font-size: .92em; }
.pro-filter-range { display: flex; align-items: center; gap: .4em; }
.pro-filter-range input { width: 8em; }
.pro-filter-tilde { opacity: .6; }
/* 複数選択（チェックボックス）の絞り込み。選択肢は全部並べ、入り切らなければ折り返す */
.pro-filter-checks { display: flex; flex-wrap: wrap; gap: .2em .9em; max-width: 38em; padding-top: .15em; }
.pro-filter-check { display: inline-flex; align-items: center; gap: .35em; font-size: .92em; line-height: 1.7; cursor: pointer; }
.pro-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5em 1.1em; margin-top: .9em; }
/* 「条件をクリア」。押し間違いを避けたいので、ボタンではなく控えめなリンクにする。
   絞り込みが1つも掛かっていないときは、そもそも出さない（render.php の HAS_RESET）。 */
.pro-filter-reset { font-size: .88em; color: inherit; opacity: .75; text-decoration: underline; text-underline-offset: .2em; }
.pro-filter-reset:hover { opacity: 1; }
/* リンク（URL）項目。長いURLでも枠からはみ出さないように */
.pro-link { overflow-wrap: anywhere; }

.pro-result-count { font-size: .85em; opacity: .7; margin: 0; }

/* ツールバー（件数・並び替え） */
.pro-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 1em; }
.pro-sort-wrap { display: flex; align-items: center; gap: .5em; margin-left: auto; }
.pro-sort-label { font-size: .85em; opacity: .7; }
.pro-sort { padding: .35em .6em; border: 1px solid var(--bg-border-color, rgba(0,0,0,.25)); border-radius: 8px; background: var(--bg-color, #fff); color: inherit; font-size: .9em; }

/* おすすめ/SOLD/NEW バッジ（カード）。小さめ＋改行させない（売買・おすすめが縦割れしないように）。 */
.pro-card-featured,
.pro-card-sold,
.pro-card-new {
  font-size: .66em; font-weight: 700; padding: .15em .55em; border-radius: 4px;
  white-space: nowrap; line-height: 1.5;
}
.pro-card-featured { background: var(--accent-color, #e07b39); color: var(--accent-inverse-color, #fff); }
/* 成約済み（SOLD）＝落ち着いたグレー／新着(NEW)＝グリーン。おすすめ(accent)と区別。 */
.pro-card-sold { background: #475569; color: #fff; }
.pro-card-new  { background: #16a34a; color: #fff; }

/* 詳細ページのバッジ・管理番号 */
.pro-detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 .6em; }
.pro-detail-badge { font-size: .8em; font-weight: 700; padding: .2em .7em; border-radius: 5px; }
.pro-detail-sold { background: #475569; color: #fff; }
.pro-detail-new  { background: #16a34a; color: #fff; }
.pro-detail-idno { font-size: .82em; color: inherit; opacity: .6; }

/* ページ送り */
.pro-pager { display: flex; flex-wrap: wrap; gap: .35em; justify-content: center; margin: 1.6em 0 0; }
.pro-pager-item {
  display: inline-block; min-width: 2.2em; text-align: center; padding: .4em .7em;
  border: 1px solid var(--bg-border-color, rgba(0,0,0,.18)); border-radius: 6px; color: inherit; text-decoration: none; font-size: .92em;
}
.pro-pager-item:hover { border-color: var(--primary-color, #2563eb); }
.pro-pager-item.is-current { background: var(--primary-color, #2563eb); color: var(--primary-inverse-color, #fff); border-color: transparent; }


/* カテゴリ絞り込み */
.pro-cat-nav { list-style: none; margin: 0 0 1.2em; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.pro-cat-item a {
  display: inline-block; padding: .35em 1em; border-radius: 999px;
  border: 1px solid var(--bg-border-color, rgba(0,0,0,.18)); color: inherit; text-decoration: none; font-size: .9em;
}
.pro-cat-item.is-current a { background: var(--primary-color, #2563eb); color: var(--primary-inverse-color, #fff); border-color: transparent; }
.pro-cat-item a:hover { border-color: var(--primary-color, #2563eb); }

/* カードグリッド
   ★auto-fill＝「入るだけ列を作る」。件数が少なくてもカードは伸びない（最後のページが1件でも大きくならない）。
     一覧ページは本文幅なりに3列でも4列でも並べてよい＝物件をたくさん見せる場所なので、ここは触らない。 */
.pro-list-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px;
}

/* トップの「新着◯件」（ティザー）だけ、列は最大3つまで。
   ★1列の最小幅を「3列に分けたときの幅」にすると、4列目が物理的に作れなくなる。
     ＝本文幅の広いフレーム（frame7 / frame7-slide / frame7-movie / frame3-c2 は section の左右余白が
       --content-space-s の固定値なので本文が広い）では4列の枠ができ、3件しか無いと右が1列分空いていた。
     幅が狭くなって「3列ぶん」が 260px を切ると、今度は 260px が効いて2列・1列へ自動で減る。 */
.pro-list-grid.is-teaser {
  --pro-cols: 3;        /* 最大の列数 */
  --pro-gap: 22px;
  gap: var(--pro-gap);
  grid-template-columns: repeat(auto-fill,
    minmax(max(260px, (100% - (var(--pro-cols) - 1) * var(--pro-gap)) / var(--pro-cols)), 1fr));
}

.pro-card { }
.pro-card-link {
  display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none;
  border: 1px solid var(--bg-border-color, rgba(0,0,0,.12)); border-radius: 10px; overflow: hidden;
  background: var(--bg-color, #fff); transition: box-shadow .2s ease, transform .2s ease;
}
.pro-card-link:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .12); transform: translateY(-2px); }
/* 「詳細ページを作る」がオフのリスト＝クリックできないので、動く／浮くといった反応を出さない */
.pro-card-link.is-nolink:hover,
.pro-media-link.is-nolink:hover,
.pro-text-link.is-nolink:hover { box-shadow: none; transform: none; background: none; }
.is-nolink { cursor: default; }
.pro-card-thumb { display: block; aspect-ratio: 4 / 3; background: rgba(128,128,128,.1); overflow: hidden; }
.pro-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pro-card-noimg { display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, rgba(128,128,128,.12), rgba(128,128,128,.12) 10px, rgba(128,128,128,.2) 10px, rgba(128,128,128,.2) 20px); }
.pro-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.pro-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.pro-card-cat {
  font-size: .66em; font-weight: 700; padding: .15em .55em; border-radius: 4px; white-space: nowrap; line-height: 1.5;
  background: var(--light-color, #eef2f7); color: var(--light-inverse-color, #334155);
}
.pro-card-date { white-space: nowrap; }
.pro-card-date { font-size: .8em; opacity: .65; }
.pro-card-title { font-weight: 700; line-height: 1.5; }
.pro-card-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.pro-card-meta-row { display: flex; gap: .6em; font-size: .88em; }
.pro-card-meta-label { opacity: .6; flex: 0 0 auto; min-width: 4em; }
.pro-card-meta-value { font-weight: 600; overflow-wrap: anywhere; }

/* レイアウト：写真リスト（横並び） */
.pro-media-list { list-style: none; margin: 0; padding: 0; }
.pro-media { border-bottom: 1px solid var(--bg-border-color, rgba(0,0,0,.12)); }
.pro-media-link { display: flex; gap: 18px; align-items: stretch; padding: 16px 4px; color: inherit; text-decoration: none; }
.pro-media-link:hover { background: rgba(128,128,128,.08); }
.pro-media-thumb { flex: 0 0 auto; align-self: flex-start; width: 140px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: rgba(128,128,128,.1); }
.pro-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pro-media-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pro-media-title { font-weight: 700; line-height: 1.5; font-size: 1.05em; }
@media (max-width: 600px) { .pro-media-thumb { width: 96px; } .pro-media-link { gap: 12px; } }

/* レイアウト：シンプルリスト（文字のみ） */
.pro-text-list { list-style: none; margin: 0; padding: 0; }
.pro-text-item { border-bottom: 1px solid var(--bg-border-color, rgba(0,0,0,.12)); }
.pro-text-link { display: flex; align-items: center; gap: 12px; padding: 14px 4px; color: inherit; text-decoration: none; flex-wrap: wrap; }
.pro-text-link:hover { background: rgba(128,128,128,.08); }
.pro-text-date { font-size: .85em; opacity: .65; flex: 0 0 auto; }
.pro-text-title { font-weight: 600; }

.pro-list-empty { opacity: .7; padding: 1em 0; }
/* 「すべて見る」リンク。フレーム共通のボタンクラス（c btn inverse）に乗せて、
   フレームごとのボタンデザインにそのまま追従させる。
   ただし .btn の定義を持たないフレーム（frame3-c2 / frame4系 / frame9系）でもボタンに見えるよう、
   下に保険を置く。:where() で詳細度を0にしてあるので、フレーム側に .btn a があれば必ずそちらが勝つ。 */
.pro-list-more { margin: 1.8em 0 0; }
:where(.pro-list-more.btn) a {
	display: inline-block;
	padding: 0.4rem 2rem;
	border: 1px solid currentColor;	/*文字と同じ色＝背景が暗いフレームでも必ず見える*/
	color: inherit;					/*本文と同じ色。primary色にすると背景と近くて読めないフレームがあるため*/
	text-decoration: none;
	font-weight: 500;
	transition: 0.3s;
}
:where(.pro-list-more.btn) a:hover { opacity: 0.75; }

/* 詳細ページ */
.pro-detail-parts { padding: 2.4em 0; }
.pro-detail-inner { max-width: 820px; margin: 0 auto; padding: 0 16px; }
.pro-detail-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 .4em; }
.pro-detail-cat {
  font-size: .8em; font-weight: 700; padding: .2em .7em; border-radius: 4px;
  background: var(--light-color, #eef2f7); color: var(--light-inverse-color, #334155);
}
.pro-detail-date { font-size: .9em; opacity: .7; }
.pro-detail-title { font-size: 1.7em; line-height: 1.4; margin: 0 0 1em; }
.pro-detail-figure { margin: 0 0 1.5em; }
.pro-detail-figure img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
/* 詳細：写真ギャラリー（大ビューア＋サムネ切替） */
.pro-gallery { margin: 0 0 1.8em; }
.pro-gallery-main { width: 100%; aspect-ratio: 16 / 10; background: #000; border-radius: 10px; overflow: hidden; }
.pro-gallery-main img, .pro-gallery-main video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pro-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pro-gallery-thumb { position: relative; width: 90px; height: 66px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: rgba(0, 0, 0, .08); }
.pro-gallery-thumb img, .pro-gallery-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pro-gallery-thumb.is-active { border-color: var(--primary-color, #2563eb); }
.pro-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1em; background: rgba(0, 0, 0, .28); }
@media (max-width: 600px) { .pro-gallery-thumb { width: 72px; height: 54px; } }

.pro-detail-spec { margin: 0 0 1.6em; border-top: 1px solid var(--bg-border-color, rgba(0,0,0,.1)); }
.pro-detail-row { display: flex; gap: 1em; padding: .7em 0; border-bottom: 1px solid var(--bg-border-color, rgba(0,0,0,.1)); }
.pro-detail-row dt { flex: 0 0 8em; font-weight: 700; opacity: .8; margin: 0; }
.pro-detail-row dd { margin: 0; flex: 1 1 auto; }
.pro-detail-row dd img { max-width: 100%; height: auto; border-radius: 6px; }
.pro-detail-body { line-height: 1.9; }
.pro-detail-back { margin: 1.2em 0; }
.pro-detail-back a { color: var(--primary-color, #2563eb); text-decoration: none; }
.pro-detail-back a:hover { text-decoration: underline; }
.pro-detail-back-bottom { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--bg-border-color, rgba(0,0,0,.1)); }

@media (max-width: 600px) {
  /* スマホは2列。is-teaser（詳細度が高い）にも効かせるため、両方書く */
  .pro-list-grid, .pro-list-grid.is-teaser { grid-template-columns: 1fr 1fr; gap: 14px; }
  .pro-card-body { padding: 10px 12px 12px; }
  .pro-detail-row { flex-direction: column; gap: .2em; }
  .pro-detail-row dt { flex-basis: auto; }
}

/* ============================================================
   検索フォームだけのパーツ（pro-search）
   入力欄そのものは一覧の絞り込み（.pro-filter）と同じCSSを使う。
   ここで足しているのは、リストを2つ以上えらんだときのタブだけ。
   ============================================================ */
.pro-tabs { list-style: none; display: flex; flex-wrap: wrap; gap: .25em; margin: 0; padding: 0; position: relative; z-index: 1; }
.pro-tab {
	padding: .55em 1.3em; cursor: pointer; user-select: none;
	/* 文字だけだとタブに見えないので枠で囲む。下辺は開けて、下のフォームとつながる形にする */
	border: 1px solid var(--bg-border-color, rgba(0,0,0,.15)); border-bottom: none;
	border-radius: 5px 5px 0 0; background: transparent; opacity: .72;
	font-weight: 700; font-size: .95em; line-height: 1.4;
}
.pro-tab:hover { opacity: 1; background: rgba(128,128,128,.14); }
/* 選択中のタブ。本家テンプレの .tab1 と同じ考え方で、メインカラーに塗って対の文字色を乗せる
   （どのフレームでも読める組み合わせが theme.css 側で保証されているため） */
.pro-tab.is-active {
	background: var(--primary-color, #2563eb);
	color: var(--primary-inverse-color, #fff);
	border-color: var(--primary-color, #2563eb);
	opacity: 1;
}
/* タブがある時は、フォームの左上だけ角を落としてタブと連結させる */
[data-pro-tabs] .pro-tab-panel .pro-filter { border-radius: 0 5px 5px 5px; }
/* JSが動く時だけ「1つだけ表示」にする。JS無しでも全部縦に並ぶだけで壊れない */
[data-pro-tabs] .pro-tab-panel { display: none; }
[data-pro-tabs] .pro-tab-panel.is-active { display: block; }

/* ============================================================
   詳細ページの先頭サマリー（リスト管理で「詳細の先頭に出す」にした項目）
   何が売り文句なのかを最初に見せる。項目数が増えても折り返して崩れない。
   ============================================================ */
.pro-summary {
	display: flex; flex-wrap: wrap; gap: 1em 2.4em;
	margin: 0 0 1.4em; padding: 1em 1.2em;
	background: rgba(128,128,128,.08);
	border: 1px solid var(--bg-border-color, rgba(0,0,0,.1)); border-radius: 5px;
}
.pro-summary-item { display: flex; flex-direction: column; gap: .15em; }
.pro-summary-label { font-size: .8em; font-weight: 700; opacity: .75; }
.pro-summary-value { font-size: 1.15em; font-weight: 700; line-height: 1.4; }
@media (max-width: 600px) {
	.pro-summary { gap: .8em 1.4em; }
	.pro-summary-value { font-size: 1.05em; }
}

/* ============================================================
   お気に入り（♡）
   ------------------------------------------------------------
   カードは全体が1つのリンクなので、♡ は リンクの「外」に置いて
   カードの上に重ねている（リンクの中にボタンは入れられない）。
   ============================================================ */
.pro-card, .pro-media { position: relative; }
.pro-fav {
	position: absolute; top: .5em; right: .5em; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 2.2em; height: 2.2em; padding: 0;
	border: 1px solid var(--bg-border-color, rgba(0,0,0,.15));
	border-radius: 50%; cursor: pointer;
	background: rgba(255,255,255,.88); color: #64748b;
	font-size: 1em; line-height: 1;
	transition: color .15s, background .15s, transform .15s;
}
.pro-fav:hover { background: #fff; color: #e11d48; transform: scale(1.08); }
.pro-fav.is-on { color: #e11d48; border-color: #e11d48; }
/* 読み上げ用の文字。目には見せない（幅0にせず clip で隠す＝読み上げは効く） */
.pro-fav-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* 詳細ページの♡は、タイトルの下に文字つきで置く（押せると分かるように） */
.pro-fav-detail {
	position: static; width: auto; height: auto;
	margin: 0 0 1.2em; padding: .5em 1.1em;
	border-radius: 5px; gap: .4em; font-size: .95em; font-weight: 700;
}
.pro-fav-detail:hover { transform: none; }

/* タブの件数（お気に入り・最近見た） */
.pro-tab-count { font-weight: 400; opacity: .85; }
.pro-tab[hidden], .pro-tabs[hidden] { display: none; }
/* お気に入り・最近見た のタブは、下に区切り線を1本引いて、カードとの間を空ける。
   （検索フォームのタブは、すぐ下の絞り込みボックスと枠がつながるデザインなので、ここでは対象外＝
     .pro-list-parts の中のタブにだけ効かせる） */
.pro-list-parts > .pro-tabs {
	border-bottom: 1px solid var(--bg-border-color, rgba(0,0,0,.15));
	margin-bottom: 1rem;
}