@charset "UTF-8";
/* ============================================================
   tool.gorou-diy.com — POST_ID=11 記事Presentation Polish CSS
   Task: DIY-TOOL-NAVIGATOR-ARTICLE-PRESENTATION-POLISH-02

   重要な設計方針:
   - article-draft.json / rendered.html は一切変更していない
     （本文・Claim・Fact・承認Hashに影響なし。再承認フロー不要）。
   - render-ken-wave1.ts（FROZEN Renderer）が出力する既存5クラス
     （graybox / redbox / scroll-box / st-list-check / engi-summary）
     と素のh2/h3/table/ul/liだけを対象にCSSで装飾する。新しいクラス名を
     本文側へは一切追加していない（RendererのAPPROVED_CSS_CLASSES制約と
     矛盾しない。CSSは記事本文の外側＝テーマ側にのみ追加する）。
   - スコープは body.postid-11 に限定する（WordPress標準のbody_class()。
     この記事1件にのみ適用され、サイト全体のh2等には影響しない）。
   - 「結論」「まだ判断できない場合」「条件から工具を絞り込む」の3つのラベルは
     すべてCSS generated content（::before / ::after）で追加している。
     DOM上の実テキストノードは一切増えていない＝「文章を一字も増やさない」を
     文字通り満たす（article-draft.json側のtextは無changed）。
   - HOME（tool-gorou-home.css）で採用したamber系トークンと配色を統一する。
   ============================================================ */

body.postid-11 {
  --tap-amber:    #B9701F;
  --tap-amber-d:  #8F5716;
  --tap-amber-t1: #FBF0E1;
  --tap-ink:      #23201C;
  --tap-ink-2:    #5C564E;
  --tap-line:     #E9E3DA;
}

/* ============================================================
   3. H2 DESIGN（記事全体のH2。サイト全体ではなくbody.postid-11限定）
   AFFINGERカスタマイザー出力（st-themecss）を打ち消すため、needfulの
   HOME実装と同一の技術（高い固有度 + !important）を踏襲する。
   白背景・下側amberアクセント・過剰な塗りつぶしなし。H3（テーマ既定の
   臙脂左線、Wave1 FROZEN仕様）とは方向を変えて明確に差別化する。
   ============================================================ */
body.postid-11 h2:not(.st-css-no):not(.st-css-no2) {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--tap-ink) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--tap-amber) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 0 10px !important;
  margin: 2em 0 1em !important;
  font-weight: 700 !important;
}
body.postid-11 h2::before,
body.postid-11 h2::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   1. FIRST ANSWER（最初のgraybox＝結論）
   小ラベル「結論」はCSS generated content。本文テキストは無変更。
   ============================================================ */
body.postid-11 .graybox:first-of-type {
  background: var(--tap-amber-t1) !important;
  border: 0 !important;
  border-left: 4px solid var(--tap-amber) !important;
  border-radius: 6px;
  padding: 18px 18px 16px !important;
  margin: 1.2em 0 !important;
}
body.postid-11 .graybox:first-of-type::before {
  content: "結論";
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  background: var(--tap-amber);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
body.postid-11 .graybox:first-of-type p {
  margin: 0 !important;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--tap-ink) !important;
  line-height: 1.9;
}

/* ============================================================
   2. / 4. COMPARISON TABLE — Header/row hierarchy強化
   Fallback適用（指示書どおり）: 新しい2ブロックUIは既存Rendererで
   表現不能なため作らない。既存comparison_table（scroll-box）はそのまま維持し、
   CSSのみでheader行の視認性・row区切り・paddingを強化する。
   派手な色分け（不要寄り/必要寄り の色コーディング）は「派手な色分け禁止」
   の指示に基づき採用しない。タイポグラフィの階層だけで「追いやすさ」を作る。
   ============================================================ */
body.postid-11 .scroll-box table {
  width: 100%;
  border-collapse: collapse !important;
  font-size: .95em;
}
body.postid-11 .scroll-box td {
  padding: 11px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tap-line) !important;
  line-height: 1.6;
  vertical-align: top;
}
/* ヘッダー行（最初のtr）を明確に区別する */
body.postid-11 .scroll-box tr:first-child td {
  background: var(--tap-amber-t1) !important;
  color: var(--tap-amber-d) !important;
  font-weight: 700 !important;
  font-size: .85em;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--tap-amber) !important;
  white-space: nowrap;
}
/* データ行: 右列（工具名）を強調し、視線誘導しやすくする */
body.postid-11 .scroll-box tr:not(:first-child) td:last-child {
  font-weight: 700;
  color: var(--tap-ink);
}
body.postid-11 .scroll-box tr:not(:first-child):hover td {
  background: #FAFAF8 !important;
}
body.postid-11 .scroll-box tr:last-child td {
  border-bottom: 0 !important;
}

/* ============================================================
   5. CHECKLIST 統一
   「家具を傷めにくくするために確認すること」「買う前に｜今ある工具で
   足りないか確認する」は、既にどちらも同一クラス（st-list-check）で
   出力されているため構造上すでに視覚的に同系列（変更不要）。
   ここでは可読性のみ最小強化する（文章・項目は無変更）。
   ============================================================ */
body.postid-11 .st-list-check {
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 8px;
  padding: 4px 18px !important;
}
body.postid-11 .st-list-check li {
  padding: 10px 0;
  border-bottom: 1px solid var(--tap-line);
  line-height: 1.8;
}
body.postid-11 .st-list-check li:last-child {
  border-bottom: 0;
}

/* ============================================================
   6. FINAL CTA（最後のgraybox＝Navigator案内）
   見出し「まだ判断できない場合」・ラベル「条件から工具を絞り込む」は
   いずれもCSS generated content。本文テキストは無変更。
   Production URL未確定のためリンク化しない。ボタンに見えるhover/shadowは
   意図的に付けない（クリック可能に見せない）。
   ============================================================ */
body.postid-11 .graybox:last-of-type {
  background: #fff !important;
  border: 1px solid var(--tap-line) !important;
  border-radius: 10px;
  padding: 20px 18px !important;
  margin: 1.4em 0 !important;
}
body.postid-11 .graybox:last-of-type::before {
  content: "まだ判断できない場合";
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--tap-amber-d);
  margin-bottom: 8px;
}
body.postid-11 .graybox:last-of-type p {
  margin: 0 0 12px !important;
  color: var(--tap-ink-2) !important;
}
body.postid-11 .graybox:last-of-type::after {
  content: "条件から工具を絞り込む";
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tap-ink-2);
  background: #F5F2ED;
  border: 1px solid var(--tap-line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: default;
}

/* ============================================================
   8. REGRESSION対策: Mobile（390px想定）での余白・文字サイズ微調整
   Mobile側の構造・段組は変更しない（横積みのまま）。paddingのみ縮小。
   ============================================================ */
@media (max-width: 480px) {
  body.postid-11 .scroll-box td { padding: 9px 10px !important; font-size: .9em; }
  body.postid-11 .graybox:first-of-type,
  body.postid-11 .graybox:last-of-type { padding: 16px 14px !important; }
  body.postid-11 .st-list-check { padding: 4px 14px !important; }
}