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

   🔁 重複の申し送り（PL/PMへ・重要）: このファイルの内容は
      theme/idworks/assets/css/pages/works-detail-n161.css と**ルール本体が100%重複**している。
      理由＝design/pages/works-detail.html（庭縁の家）と works-detail-n161.html（黒塀の家）の
      <style id="page-scoped"> は、ヘッダーコメント（由来の説明文）だけが異なり、
      `:root{ --c-accent:#c0392b; }` 以降の本体（15,727字）はバイト単位で完全一致することを
      diffで確認済み（n161移植時のコメントに「骨格・page-scoped CSS・FV幾何・共通パーツは
      深い版の正本 works-detail.html と同一」とあったとおり）。
      今回は指示どおり「まず動くものを作る」を優先し、n161用ファイルをそのまま複製した。
      共通化する場合の候補名は例えば `works-detail-deep-shared.css` とし、n161/n062どちらの
      enqueueからも読み込む形にできる（判断はPL/PM側）。

   ⚠️ 浅い版 works-detail.css との重複回避方針は n161用ファイルと同一（§FV統一・関連タグ・
      データ表の基本部は既にworks-detail.cssにあるため再定義しない。.works-tags と
      body[data-variant] 一式・.works-fv__tags は持ち込まない）。

   enqueue: inc/assets-pages-deep.php から 'idworks-page-works-detail' の**後**に読み込む
            （n161と同じ依存関係。詳細は同ファイルのコメント参照）。
   ========================================================== */

/* ---------- アクセント色 = accent1「編集の赤」（design版と同値。c1-theme.css の --c1-accent と同一） ---------- */
:root{ --c-accent:#c0392b; }

/* ---------- クレジット行（design_）＝本ページのdesign版は「design_ 川端（仮）」を可視出力している
   （n161とは違い非表示にしていない）。テンプレート側の出力に対応するスタイル。 ---------- */
.c1-credit--points{margin-top:0;}
.section__title:has(+ .c1-credit--points){margin-bottom:14px;}

/* ---------- 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」内・LIGHT / AIR FLOW） ----------
   トンマナ = 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(#climaWind);}
.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,6) ）----------
   ⚠️ 浅い版 works-detail.css の .gallery（1カラム縦積み）を意図的に上書きする
      （enqueue順はinc/assets-pages-deep.phpで制御）。 */
.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-30 tag 20261030f: 大判を (1,4,6)→(1,4,5) へ。縦長2枚（n062-g09/g10）追加で9枚になり、
   旧指定では 05 が片側空きの1枚・07(横)＋g09(縦)で高さ不揃い・g10 が1枚残りになっていた。
   (1,4,5) なら 06+07＝横長どうし、g09+g10＝縦長どうしで行の高さが揃う。入力順を変えたら要再確認。 */
.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;}
}

/* ---------- 住んでみて（引用） ---------- */
.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のため重複させない） ---------- */
.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;}