/**
 * single-realestate.php ページ固有CSS（F分類・docs/29_template-map.md §1-1 R-02）
 * 正本: design/pages/realestate-info.html <style id="page-scoped">。「型B｜詳細ページ」で
 * 使うセレクタのみを収録する（archive/detailのCSS分割はR-02のとおり）。
 *
 * @package idworks
 */

[id]{scroll-margin-top:70px;}

.status-label{
  background:var(--c-btn);color:#fff;font-size:var(--fs-micro);letter-spacing:.08em;padding:2px 12px;
}
.status-label--negotiating{background:#777;}
.status-label--sold{background:#bbb;color:#333;}
/* 20261105zn: 関連物件カードのバッジを写真の左上に重ねる（一覧 realestate-archive.css と同じ値。
   見出し横 .prop-head__meta のバッジは通常配置のまま＝カード内だけに限定） */
.prop-card__photo{position:relative;margin-bottom:10px;}
.prop-card__photo .status-label{position:absolute;top:8px;left:8px;z-index:1;}

.prop-head{max-width:980px;margin:0 auto;}
.prop-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;}
.prop-head__title{font-size:var(--c1-fs-h2);font-weight:500;line-height:1.5;letter-spacing:var(--c1-ls-h2);margin-bottom:10px;}
.prop-head__price{font-size:var(--c1-fs-h2);font-family:var(--ff-en);font-weight:500;letter-spacing:.04em;line-height:1.3;}
.prop-head__price small{font-size:var(--fs-micro);font-family:var(--ff-jp);font-weight:normal;letter-spacing:.1em;color:var(--c-text-note);margin-left:10px;}

/* 写真ギャラリー（SP=2列・PC=4列） */
.gallery{max-width:980px;margin:0 auto;display:grid;gap:8px;}
.gallery > img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
.gallery__thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.gallery__thumbs img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
@media(min-width:768px){
  .gallery__thumbs{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* 物件概要テーブル */
/* 物件概要（20261014r ディレクター指摘「見づらくない？」→ 区分の小見出し＋PC2列＋横線のみ。design/pages/realestate-info.html と同じ定義） */
.spec{max-width:980px;margin:0 auto;font-size:var(--fs-body-sm);line-height:1.8;}
.spec-group + .spec-group{margin-top:36px;}
.spec-group__title{margin:0;padding-bottom:8px;border-bottom:1px solid var(--c-text);font-size:var(--fs-body);font-weight:500;letter-spacing:var(--ls-1);}
.spec-list{margin:0;display:grid;grid-template-columns:minmax(0,1fr);}
.spec-row{display:grid;grid-template-columns:7em minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--c-line-soft);}
.spec-row dt{color:var(--c-text-sub);white-space:nowrap;}
.spec-row dd{margin:0;}
@media(min-width:768px){
  .spec-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;}
  .spec-row--wide{grid-column:1 / -1;}
}

/* 地図（page-about.phpの.studio__mapと同一手法） */
.re-map{aspect-ratio:16/9;background:var(--c-bg-sub);overflow:hidden;}
.re-map iframe{width:100%;height:100%;border:0;display:block;}

.nowrap{white-space:nowrap;}

/* 2026-09-24 追加: 物件概要表の下の定型注記／本文欄（現行サイトの長文・写真を入れる任意欄） */
.spec-table__note{max-width:980px;margin:12px auto 0;font-size:var(--fs-micro);color:var(--c-text-note);line-height:1.8;}
.re-body{font-size:var(--fs-body);line-height:2;}
.re-body > * + *{margin-top:1.2em;}
.re-body h2,.re-body h3{font-size:var(--c1-fs-h3);font-weight:var(--fw-normal);letter-spacing:var(--ls-2);margin-top:2.4em;}
.re-body img{max-width:100%;height:auto;display:block;}
.re-body figure{margin-left:0;margin-right:0;}

/* 2026-09-25 サムネイルを押すとメインに切り替わる（assets/js/realestate-gallery.js）。サムネイルはボタン */
.gallery__thumb{display:block;padding:0;border:0;background:none;cursor:pointer;position:relative;}
.gallery__thumb img{transition:opacity .3s ease;}
.gallery__thumb.is-current::after{content:"";position:absolute;inset:0;border:2px solid var(--c-text);pointer-events:none;}
.gallery__thumb:focus-visible{outline:2px solid var(--c1-accent);outline-offset:2px;}
@media(hover:hover) and (pointer:fine){ .gallery__thumb:not(.is-current):hover img{opacity:.75;} }