/* ============================================================
   identity.css — このサイト固有のアイデンティティ層
   （骨格の components.css とは分離。ここがこのサイトの「顔」）

   採用案:「墨緑 × 弁柄」。色・サイズは必ずトークン経由。
   装飾のための装飾はしない。要素は道案内・可読性・構造の反映に奉仕する。
   ============================================================ */

/* --- ヒーロー（現場写真＋図面の方眼。写真は墨緑のデュオトーンに寄せてある） --- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-brand-strong);
  color: var(--color-on-brand);
  padding-block: var(--space-16) var(--space-12);
  overflow: hidden;
  border-bottom: 3px solid var(--color-accent);
}
/* 図面の方眼。低コントラストで沈め、文字の可読性を落とさない */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
  /* 右下ほど濃く、左上（文字が乗る側）は薄くする */
  mask-image: linear-gradient(115deg, transparent 18%, #000 78%);
}
/* 木造住宅の立面図。方眼(::before, z-index:-1)より下に敷くので -2。
   ★原版の地色を --color-brand-strong にそろえてあるので、写真のときのような
     スクリム（グラデーションで潰す層）が要らない。右に置くだけで地が繋がる。
     細い白線をスクリムで潰すと図面が読めなくなるため、重ねない。
   原版と生成手順: design/hero-source/kaitai-drawing.png ／ design/make-ogp.py */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/assets/images/hero-drawing.webp");
  background-repeat: no-repeat;
  /* 狭い画面では文字が全幅に乗る。図は地紋として沈め、本文の可読性を優先する。
     地色が同じなので opacity は線の濃さだけを変える（面の色は変わらない）。 */
  background-size: auto 50%;
  background-position: right -24% bottom -6%;
  opacity: 0.16;
}
/* 中間（タブレット）。図は右に置けるが、見出しが図の位置まで伸びるため薄く沈める。
   ここを 1 にすると 768px 付近で見出しと図が重なって両方読めなくなる。 */
@media (min-width: 48rem) {
  .hero::after {
    background-size: contain;
    background-position: right center;
    opacity: 0.24;
  }
}
/* 横幅が取れる画面でだけ図を原寸で見せる。contain なので見出しの行数で
   ヒーローの高さが変わっても、寸法線から地面までが切れない。
   図の左46%は地色そのものだが、行が伸びたときの保険として
   左半分に地色のスクリムを重ねる（同色なので面は変わらず、線だけが消える）。 */
@media (min-width: 64rem) {
  .hero::after {
    background-image:
      linear-gradient(90deg,
        var(--color-brand-strong) 0%,
        var(--color-brand-strong) 42%,
        rgb(30 53 41 / 0%) 62%),
      url("/assets/images/hero-drawing.webp");
    background-size: cover, contain;
    background-position: center, right center;
    opacity: 1;
  }
}
.hero__text { max-width: 36rem; }
.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-on-brand-subtle);
  margin-bottom: var(--space-3);
}
.hero__title {
  color: var(--color-on-brand);
  font-size: clamp(1.75rem, 4.6vw, 2.375rem);
  line-height: var(--leading-tight);
  max-width: 17em;
}
/* 各フレーズは途中で折り返さない（nowrap）。改行は wbr のあるフレーズ境界だけで起きる */
.hero__seg { white-space: nowrap; }
.hero__lede {
  color: var(--color-on-brand-muted);
  font-size: var(--text-base);
  max-width: var(--measure);
  margin-top: var(--space-4);
}

/* --- 見出し（上に短い罫を1本。縦バーは使わない） ----------- */
.section__title,
.article__body > h2 {
  position: relative;
  padding-top: var(--space-4);
}
.section__title::before,
.article__body > h2::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 2.5em;
  height: 3px;
  background: var(--color-brand);
}
/* h3 は墨緑の左罫で h2 への従属を示す */
.article__body > h3 {
  border-inline-start: 3px solid var(--color-brand-tint);
  padding-inline-start: var(--space-3);
}

.section__lede {
  color: var(--color-text-muted);
  max-width: var(--measure);
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: var(--space-6);
}
.section__more { margin-top: var(--space-4); }

/* --- 本文の箇条書き・手順（面で囲んで地の文と区別する） ------
   太字での強調を使わない方針のため、まとまった情報は面で括って走査できるようにする。
   直下の ul / ol のみが対象。目次・CTA・凡例など部品側のリストには影響させない。 */
.article__body > ul,
.article__body > ol {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-inline-start: 3px solid var(--color-brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-4) var(--space-6);
  padding-inline-start: 2.5em;
  margin-block: var(--space-6);
}
.article__body > ul > li,
.article__body > ol > li { margin-block: var(--space-3); }
.article__body > ul > li:first-child,
.article__body > ol > li:first-child { margin-block-start: 0; }
.article__body > ul > li:last-child,
.article__body > ol > li:last-child { margin-block-end: 0; }

/* 手順（ol）は番号を墨緑で立てる。順序があることを色以外でも示す */
.article__body > ol {
  counter-reset: step;
  list-style: none;
  padding-inline-start: var(--space-6);
}
.article__body > ol > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.article__body > ol > li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  align-self: start;
}

/* --- 柱カード（読者の関心軸。代表記事への入口） ------------ */
.pillars {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 40rem) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  margin: 0;
  border: var(--border-width) solid var(--color-border);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius);
  padding: var(--space-6);
  background: var(--color-bg);
  transition: border-color var(--transition), background var(--transition);
}
.pillar:hover { border-color: var(--color-brand); }
.pillar__icon {
  width: 40px;
  height: 40px;
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}
.pillar__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.pillar__name a {
  color: var(--color-brand);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.pillar__name a::after { content: "→"; font-size: 0.85em; }
.pillar__name a:hover { text-decoration: underline; }
.pillar__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* --- カード（影を使わず、罫線と地色で触れる感触を出す） ---- */
.card {
  background: var(--color-bg);
  transition: border-color var(--transition), background var(--transition);
}
.card:hover {
  border-color: var(--color-brand);
  background: var(--color-surface);
}

/* --- シグネチャー: 費用の積み上げ帯 --------------------------
   解体費用は「本体工事＋付帯工事＋廃材処分＋諸経費」の積み上げで決まり、
   読者が最も知りたいのは総額の内訳。その構造をそのまま図にする。
   frontmatter の costStack から生成する（本文へのHTML直書きをしないため）。 */
.cost-stack {
  margin: var(--space-8) 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-bg);
}
.cost-stack__caption {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.cost-stack__bar {
  display: flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* 各段に通し番号を入れる。凡例の同じ番号と突き合わせれば、
   色が判別できなくても対応が取れる（色だけで情報を伝えない） */
.cost-stack__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding-block: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-on-brand);
  border-inline-end: 2px solid var(--color-bg);
}
.cost-stack__seg:last-child { border-inline-end: 0; }

/* 明度差に加えて地紋を変える。単色の濃淡だけに頼らない */
.cost-stack__seg[data-i="1"] { background-color: var(--stack-1); }
.cost-stack__seg[data-i="2"] {
  background-color: var(--stack-2);
  background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.24) 0 3px, transparent 3px 9px);
}
.cost-stack__seg[data-i="3"] {
  background-color: var(--stack-3);
  background-image: repeating-linear-gradient(-45deg, rgb(31 59 44 / 0.3) 0 3px, transparent 3px 9px);
  color: var(--color-text);
}
.cost-stack__seg[data-i="4"] {
  background-color: var(--stack-4);
  background-image: repeating-linear-gradient(90deg, rgb(31 59 44 / 0.32) 0 2px, transparent 2px 8px);
  color: var(--color-text);
}

.cost-stack__legend {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-2);
}
.cost-stack__legend li {
  margin: 0;
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  border-bottom: var(--border-width) dotted var(--color-border);
  padding-bottom: var(--space-2);
}
.cost-stack__legend li:last-child { border-bottom: 0; padding-bottom: 0; }
/* 凡例の印は「色の四角」ではなく「番号入りの札」。帯の番号と対応する */
.cost-stack__swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-on-brand);
}
.cost-stack__swatch[data-i="1"] { background-color: var(--stack-1); }
.cost-stack__swatch[data-i="2"] {
  background-color: var(--stack-2);
  background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.24) 0 3px, transparent 3px 9px);
}
.cost-stack__swatch[data-i="3"] {
  background-color: var(--stack-3);
  background-image: repeating-linear-gradient(-45deg, rgb(31 59 44 / 0.3) 0 3px, transparent 3px 9px);
  color: var(--color-text);
}
.cost-stack__swatch[data-i="4"] {
  background-color: var(--stack-4);
  background-image: repeating-linear-gradient(90deg, rgb(31 59 44 / 0.32) 0 2px, transparent 2px 8px);
  color: var(--color-text);
}

/* 狭い画面では帯の番号が潰れるため、帯を細くして凡例に寄せる */
@media (max-width: 30rem) {
  .cost-stack__seg { font-size: 0.6875rem; min-width: 1.25rem; }
}
.cost-stack__label { font-weight: var(--weight-medium); }
.cost-stack__amount {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.cost-stack__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
}

/* --- フッターを濃墨緑で締める ------------------------------- */
.site-footer {
  background: var(--color-brand-strong);
  color: var(--color-on-brand-muted);
  border-top: 3px solid var(--color-accent);
}
.site-footer a { color: var(--color-on-brand); }
.site-footer__operator { color: var(--color-on-brand-subtle); }

/* --- 固定ページの外部フォーム埋め込み ------------------------
   お問い合わせは静的サイトのため外部サービス（Google フォーム）を使う。
   iframe は幅を親に合わせ、高さだけ端末幅で切り替える。
   （埋め込みの中身の高さは制御できないため、内側にスクロールが出ないよう
     画面が狭いときほど高くとる。別タブで開くリンクも本文側に併置してある） */
.embed-form {
  margin-block: var(--space-6);
}
.embed-form iframe {
  display: block;
  width: 100%;
  max-width: 640px;
  height: 760px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
@media (max-width: 640px) {
  .embed-form iframe { height: 1000px; }
}