/* works詳細「深い版」― 黒塀の家（post_name=n161）専用CSS
   ==========================================================
   正本: design/pages/works-detail-n161.html の <style id="page-scoped">（1本目・297行）＋
         末尾の無名 <style>（.nowrap ユーティリティ・3行）。

   ⚠️ このファイルは「浅い版との差分だけ」を切り出したもの（design版の2ブロック計17,307字を
      まるごと複製してはいない）。理由:
      - is_singular('works') の全件（n161含む）に対して functions.php が既に
        assets/css/pages/works-detail.css（浅い版・9,513バイト）を無条件enqueueしており、
        そこに §FV統一（.works-fv 一式）・関連タグ（.works-tags 一式）・データ表（.data-table
        の基本部）が**バイト単位で同一のCSSテキスト**として既に含まれている
        （design版のコメントにも「深い版・浅い版249ページで同一のCSSテキストを使う」と明記）。
        同じセレクタをこのファイルでも再定義すると、enqueue順（後勝ち）次第で意図せず
        浅い版の値を上書きしてしまう事故につながるため、意図的に含めていない。
      - design版の .works-tags ブロックおよび body[data-variant="c"] 一式は、
        「中央寄せで定義 → data-variant="c" のときだけ左寄せへ上書き」という2段構えだが、
        本番のWP出力に data-variant 属性は存在しない（design版だけの仕組み）。
        中央寄せ版だけを持ち込むと works-detail.css の左寄せ指定を後勝ちで潰してしまうため、
        .works-tags は一切持ち込んでいない（現状の見た目は works-detail.css 側の
        左寄せ指定＝実質的な確定形と一致）。
      - body[data-variant="b"] ブロック（B案ギャラリー段組）は本ページでは使わないため除外。
      - .works-fv__tags（design版中でも実際には未使用のセレクタ）は持ち込んでいない。

   enqueue: inc/assets-pages-deep.php から 'idworks-page-works-detail' の**後**に読み込む
            （依存関係は 'idworks-c1-theme'。works-detail.css も同じ依存のため、cascade順は
            enqueueした順＝関数内で先に works-detail.css を読み込んでいる functions.php の
            後段で本ファイルを読み込む di方式に依っている。詳細はinc/assets-pages-deep.phpの
            コメント参照）。この順序により、下の .gallery / .data-table 上書きが効く。
   ========================================================== */

/* ---------- アクセント色 = accent1「編集の赤」（design版と同値。c1-theme.css の --c1-accent と同一）
   概念図（clima-figure）・写真オーバーレイ（dim-figure）でのみ参照する専用変数。 ---------- */
:root{ --c-accent:#c0392b; }

/* ---------- クレジット行（design_）＝現在は非出力だが、将来の復帰に備えてスタイルは温存 ---------- */
.c1-credit--points{margin-top:0;}
.section__title:has(+ .c1-credit--points){margin-bottom:14px;}

/* ---------- 「望んだ暮らし」直後の写真（2026-10-27 tag 20261027zc）
   <img width height> の高さが c1-theme.css の aspect-ratio:16/9 を潰し、横長の 05（中庭）が
   PCでほぼ正方形・SPで縦長に切り抜かれていた → 中判の規定どおり 16:9 で見せる
   （design.css 2026-08-10j と同じ対処。c1-theme.css は変更しない。
     aspect-ratio:auto にすると WP の lazy 画像に付く contain-intrinsic-size 3000×1500 を拾い縦に伸びる）. ---------- */
.c1-figure--mid > img{height:auto;}

/* ---------- D型：写真×読解オーバーレイ（「設計の読解」ブロック） ---------- */
.dim-figure{position:relative;max-width:980px;margin:0 auto;}
.dim-figure img{display:block;width:100%;height:auto;}
.dim-figure svg{position:absolute;inset:0;width:100%;height:100%;}
.dim-figure .dim-line{stroke:var(--c-accent);stroke-width:1;fill:none;}
.dim-figure .dim-tick{stroke:var(--c-accent);stroke-width:1;}
.dim-figure .dim-text{fill:var(--c-accent);font-family:var(--ff-en);font-size:15px;letter-spacing:.06em;}
.dim-figure .dim-badge{fill:var(--c-accent);}
.dim-figure .dim-badge-text{fill:#fff;font-family:var(--ff-en);font-size:13px;font-weight:500;}
.dim-notes{max-width:var(--c1-measure);margin:28px auto 0;display:grid;gap:10px;}
.dim-note{display:flex;gap:12px;align-items:baseline;font-size:var(--fs-caption);color:var(--c-text-sub);line-height:1.9;}
.dim-note b{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--c-accent);color:#fff;
  font-family:var(--ff-en);font-size:var(--fs-micro);font-weight:500;transform:translateY(3px);
}
.dim-caption{max-width:var(--c1-measure);margin:16px auto 0;font-size:var(--fs-micro);color:var(--c-text-note);}

/* ---------- B型：気候読解ミニ図解（「この家のID」内の中庭概念図） ----------
   トンマナ = benchmark-casabrutus §6-2。線=細く均一・塗り=無彩色フラット＋落ち影1段・
   引き出し線=破線。色は「グレー階調 ＋ アクセント1色」（風はアクロマティック）。太字なし。 */
.clima-figure{width:min(840px,92vw);margin:72px 0 0;margin-left:50%;transform:translateX(-50%);}
.clima-figure svg{display:block;width:100%;height:auto;aspect-ratio:840/400;}
.clima-figure .cl-line{stroke:var(--c-text);stroke-width:1;fill:none;stroke-linejoin:round;}
.clima-figure .cl-hair{stroke:var(--c-line-hair);stroke-width:1;fill:none;}
.clima-figure .cl-fill{fill:#ececec;stroke:var(--c-text);stroke-width:1;stroke-linejoin:round;}
.clima-figure .cl-fill-soft{fill:#f5f5f5;stroke:var(--c-line-hair);stroke-width:1;}
.clima-figure .cl-shadow{fill:#e4e4e4;}
.clima-figure .cl-glass{stroke:var(--c-line-hair);stroke-width:1;fill:none;}
.clima-figure .cl-sun{stroke:var(--c-accent);stroke-width:1;fill:none;}
.clima-figure .cl-ray{stroke:var(--c-accent);stroke-width:1;fill:none;stroke-dasharray:5 5;}
.clima-figure .cl-sun-fill{fill:var(--c-accent);}
.clima-figure .cl-light{fill:var(--c-accent);opacity:.09;}
.clima-figure .cl-wind{stroke:#9a9a9a;stroke-width:1.2;fill:none;marker-end:url(#courtEye);}
.clima-figure .cl-lead{stroke:var(--c-line-dark);stroke-width:1;fill:none;stroke-dasharray:4 4;}
.clima-figure .cl-badge{fill:var(--c-accent);}
.clima-figure .cl-badge-t{fill:#fff;font-family:var(--ff-en);font-size:12px;font-weight:500;}
.clima-figure .cl-key{fill:var(--c-text);font-family:var(--ff-en);font-size:17px;font-weight:500;letter-spacing:.06em;}
.clima-figure .cl-note{fill:var(--c-text-sub);font-size:12.5px;letter-spacing:.06em;font-family:var(--ff-jp);font-weight:400;}
.clima-figure .cl-room{fill:var(--c-text-note);font-size:12px;letter-spacing:.12em;font-family:var(--ff-jp);}
.clima-figure .cl-text-ac{fill:var(--c-accent);font-size:12px;letter-spacing:.08em;font-family:var(--ff-jp);}
.clima-figure .cl-text-gr{fill:var(--c-text-note);font-size:12px;letter-spacing:.08em;font-family:var(--ff-jp);}
.clima-figure .cl-title-en{fill:var(--c-text-note);font-family:var(--ff-en);font-size:12px;letter-spacing:.24em;}
.clima-figure .cl-title-jp{fill:var(--c-text);font-size:15px;letter-spacing:.1em;font-family:var(--ff-jp);}
.clima-figure .cl-annot-sp{display:none;}
@media(max-width:767px){
  .clima-figure{margin-top:48px;}
  .clima-figure svg{aspect-ratio:840/400;}
  .clima-figure .cl-annot{display:none;}
  .clima-figure .cl-annot-sp{display:block;}
  .clima-figure .cl-text-ac,
  .clima-figure .cl-text-gr{font-size:22px;letter-spacing:.04em;}
  .clima-figure .cl-room{font-size:20px;letter-spacing:.04em;}
  .clima-figure .cl-title-en{font-size:19px;}
  .clima-figure .cl-title-jp{font-size:24px;}
  .clima-figure .cl-title{transform:translateY(-16px);}
  .clima-figure .cl-lb-winter{transform:translateY(38px);}
  .clima-figure .cl-only-pc{display:none;}
  .clima-caption{text-align:left;}
  .clima-figure .cl-badge-g{transform-box:fill-box;transform-origin:center;transform:scale(1.9);}
}
.clima-caption{max-width:var(--c1-measure);margin:22px auto 0;font-size:var(--fs-micro);line-height:1.9;color:var(--c-text-note);text-align:center;}
.clima-caption span{display:block;}
.clima-caption .clima-caption__note{margin-top:6px;}

/* ---------- 設計のポイント ---------- */
.point-list{max-width:var(--c1-measure);margin:0 auto;display:grid;gap:64px;}
.point__num{
  display:inline-block;font-family:var(--ff-en);font-size:var(--fs-micro);letter-spacing:.18em;color:var(--c-text-note);
  border-bottom:1px solid var(--c-line-dark);padding-bottom:2px;margin-bottom:12px;
}
.point__title{font-size:var(--c1-fs-h3);font-weight:500;line-height:1.7;letter-spacing:var(--ls-2);margin-bottom:14px;}
.point__body{font-size:var(--fs-body);line-height:var(--lh-body);}

/* ---------- チームの言葉（現在は非表示・HTMLコメント）。将来の復帰に備えてスタイルのみ温存 ---------- */
.team-list{max-width:var(--c1-measure-narrow);margin:0 auto;display:grid;gap:20px;}
.team-card{border:1px dashed var(--c-line-dark);background:var(--c-bg-sub);padding:20px;}
.team-card__head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.team-card__photo{width:56px;height:56px;border-radius:50%;flex-shrink:0;font-size:9px;}
.team-card__role{font-size:var(--fs-micro);letter-spacing:.18em;color:var(--c-text-note);display:block;line-height:1.6;}
.team-card__name{font-size:var(--fs-body);font-weight:400;line-height:1.6;}
.team-card__comment{font-size:var(--fs-caption);line-height:1.9;color:var(--c-text-sub);}

/* ---------- 暮らしの風景（深い版固有の2カラム・大判は nth-child(1,4,5) ）----------
   ⚠️ 浅い版 works-detail.css の .gallery（1カラム縦積み・.gallery__item--full方式）を
      意図的に上書きする（本ファイルの enqueue順が後になるようinc/assets-pages-deep.phpで
      制御している）。
   2026-10-27 tag 20261027zc: 05（望んだ暮らし直後）・04（設計の読解）をギャラリーから外し11枚に
   なったため、大判を (1,4,6) → (1,4,5) に。2列の行に空きが出ず、縦長 g13｜g14 が並ぶ形に戻る。 */
.gallery{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:56px var(--grid-gap);}
.gallery__item{margin:0;}
.gallery__item img{display:block;width:100%;height:auto;}
.gallery__item:nth-child(1),
.gallery__item:nth-child(4),
.gallery__item:nth-child(5){grid-column:1/-1;}
/* 2026-10-27 tag 20261027zc: 縦長写真は大判位置でも他の縦長（2列の片側）と同じ幅に。行は1枚で使い、後続の並びは変えない */
.gallery__item--portrait:is(:nth-child(1),:nth-child(4),:nth-child(5)){width:calc((100% - var(--grid-gap)) / 2);}
.gallery__caption{font-size:var(--fs-caption);color:var(--c-text-sub);margin-top:12px;line-height:1.9;letter-spacing:var(--ls-1);}
@media(max-width:767px){
  .gallery{grid-template-columns:1fr;gap:40px;}
  .gallery__item--portrait:is(:nth-child(1),:nth-child(4),:nth-child(5)){width:auto;}
}

/* ---------- 住んでみて（引用） ---------- */
.voice-list{max-width:var(--c1-measure-narrow);margin:0 auto;display:grid;gap:44px;}
.voice{border-left:3px solid var(--c-line-dark);padding:4px 0 4px 20px;}
.voice__quote{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);}
.voice__speaker{font-size:var(--fs-caption);font-weight:400;color:var(--c-text-sub);margin-top:12px;display:block;}
.voice-lead{max-width:var(--c1-measure-narrow);margin:0 auto 48px;text-align:center;}
.voice-interview{
  max-width:var(--c1-measure-narrow);margin:64px auto 0;border:1px solid var(--c-text);
  background:var(--c-bg);padding:24px 20px;text-align:center;
}

/* ---------- この家のデータ：浅い版に無い付加ルールのみ（基本の.data-tableは works-detail.css と
   同値=640pxのため重複させない。is-optional／注記は将来の行追加に備えた温存） ---------- */
.data-table tr.is-optional th,.data-table tr.is-optional td{color:var(--c-text-note);}
.data-table__note{font-size:var(--fs-micro);line-height:1.9;color:var(--c-text-note);display:block;margin-top:4px;}

/* ---------- 段落ち対策ユーティリティ（design版の末尾<style>と同一。works-detail.cssには無いため必要） ---------- */
.nowrap{white-space:nowrap;}