@charset "UTF-8";
/* ============================================================
   tool.gorou-diy.com — POST_ID=16 記事Presentation Delta CSS
   Task: PRESSURE-WASHER-PRESENTATION-DELTA-01

   Human実PreviewでPresentation=4/10と判定されたための最小Delta。
   article-draft.json / rendered.html は一切変更していない
   （本文・Claim・Fact・承認Hashに影響なし。CONTENT_CHANGED=NO）。

   POST_ID=11（furniture-assembly-impact-driver-necessity）の
   Presentation Polish（tool-gorou-article-11-presentation.css）と同一の
   設計方針・同一の既存5クラス（graybox/redbox/scroll-box/st-list-check/
   engi-summary）のみを対象とする。新しいクラス名を本文側へは追加していない。
   スコープは body.postid-16 に限定し、この記事1件にのみ影響する。

   本記事はh2が8個・graybox（notice_box）が1個のみという構造上、
   POST_ID=11とは異なるセレクタ設計が必要な箇所がある:
     - 「買わなくていい人」セクションは notice_box を使っていない
       （paragraph/list/paragraphのみ）ため、h2の出現順序（nth-of-type）で
       対象を特定し、CSS generated contentでラベルのみ付与する
       （本文テキストは無変更）。
   ============================================================ */

body.postid-16 {
  --tap16-amber:    #B9701F;
  --tap16-amber-d:  #8F5716;
  --tap16-amber-t1: #FBF0E1;
  --tap16-slate:    #4A5A63;
  --tap16-slate-t:  #EEF2F3;
  --tap16-ink:      #23201C;
  --tap16-ink-2:    #5C564E;
  --tap16-line:     #E9E3DA;
}

/* ============================================================
   H2デザイン（POST_ID=11と統一。白背景＋下線amberアクセント）
   ============================================================ */
body.postid-16 h2:not(.st-css-no):not(.st-css-no2) {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--tap16-ink) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--tap16-amber) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 0 10px !important;
  margin: 2.2em 0 1em !important;
  font-weight: 700 !important;
}
body.postid-16 h2::before,
body.postid-16 h2::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   1. 「まず結論｜高圧洗浄機を使う価値がある人」— 唯一のgraybox
   First Answer相当。amber塗り＋左ボーダー＋ラベル「結論」（generated content）。
   ============================================================ */
body.postid-16 .graybox {
  background: var(--tap16-amber-t1) !important;
  border: 0 !important;
  border-left: 4px solid var(--tap16-amber) !important;
  border-radius: 6px;
  padding: 18px 18px 16px !important;
  margin: 1.2em 0 !important;
}
body.postid-16 .graybox::before {
  content: "結論";
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  background: var(--tap16-amber);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
body.postid-16 .graybox p {
  margin: 0 !important;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--tap16-ink) !important;
  line-height: 1.9;
}

/* ============================================================
   2.「買わなくていい人」— h2の出現順序（2番目）で特定。
   notice_boxを使っていないため、末尾の結論段落だけを枠で囲み、
   ラベル「買わなくてよい」をgenerated contentで付与する。
   本文テキスト・タグ構造は無変更（CSSのみで視覚的に切り出す）。

   SELECTOR_STABILITY_CONTRACT（PRESSURE-WASHER-PRESENTATION-DELTA-STABILITY-CHECK-01）:
   NTH_OF_TYPE_REQUIRED = YES。render-ken-wave1.ts（FROZEN Renderer）は
   section wrapper・id・data属性のいずれも出力しないため、この記事本文には
   `h2:nth-of-type(2) + p + ul + p` より安定した既存Anchor（class/id/wrapper）が
   存在しない（2026-09時点でrendered.html全体を実査し確認済み。既存classは
   graybox/st-list-check/scroll-box/engi-summaryの4種のみで、本セクション周辺には
   一切出現しない）。
   したがって、この選択子は以下2条件を両方満たす場合にのみ有効な契約として採用する:
     1. body.postid-16 スコープ（この記事1件にのみ適用。他記事・サイト全体は無関係）
     2. ARTICLE_STRUCTURE_FROZEN（article-draft.jsonの
        セクション順序・sec-no-needのblock構成〔paragraph→list→paragraph〕が
        変わらないことが前提。将来、本記事のsections配列が編集される場合は、
        このルールが正しいブロックを指し続けているか必ず再確認すること）
   ============================================================ */
body.postid-16 h2:nth-of-type(2) + p + ul + p {
  display: block;
  background: #fff !important;
  border: 1.5px solid var(--tap16-slate) !important;
  border-radius: 6px;
  padding: 14px 16px !important;
  margin: 1em 0 !important;
  color: var(--tap16-ink) !important;
}
body.postid-16 h2:nth-of-type(2) + p + ul + p::before {
  content: "買わなくてよい";
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: var(--tap16-slate);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}

/* ============================================================
   3. / 4. 比較表（注意点表・最終決定表）— Header/row階層強化
   POST_ID=11と同一の技術。派手な色分けは行わない。
   ============================================================ */
body.postid-16 .scroll-box table {
  width: 100%;
  border-collapse: collapse !important;
  font-size: .95em;
}
body.postid-16 .scroll-box td {
  padding: 11px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tap16-line) !important;
  line-height: 1.6;
  vertical-align: top;
  /* QA FIX（PLAYWRIGHT-QA-01、実ブラウザ確認で発見): AFFINGER側の.scroll-box td既定値が
     white-space: nowrap のため、本文セル（状況/注意点等の長文）が折り返さず、390px幅で
     2列目（結論・注意点）がビューポート外へ押し出されていた。実測: 修正前は
     .scroll-box の scrollWidth(724px) > clientWidth(360px) で右列が見えない状態。
     本文セルのみ normal へ戻す（ヘッダー行の nowrap は据え置き、短い見出し語のため無害）。 */
  white-space: normal !important;
}
body.postid-16 .scroll-box tr:first-child td {
  background: var(--tap16-amber-t1) !important;
  color: var(--tap16-amber-d) !important;
  font-weight: 700 !important;
  font-size: .85em;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--tap16-amber) !important;
  white-space: nowrap;
}
body.postid-16 .scroll-box tr:not(:first-child) td:last-child {
  font-weight: 700;
  color: var(--tap16-ink);
}
body.postid-16 .scroll-box tr:not(:first-child):hover td {
  background: #FAFAF8 !important;
}
body.postid-16 .scroll-box tr:last-child td {
  border-bottom: 0 !important;
}

/* 最終決定表（8番目のh2の直後）にだけ「最終判断」ラベルを追加し、
   最重要の判断材料であることを視覚的に示す（generated content、本文無変更）。
   QA FIX（PLAYWRIGHT-QA-01、実ブラウザ確認で発見): 下の「H2デザイン」ブロックにある
   `body.postid-16 h2::before, h2::after { content: none !important; }` が全h2へ
   !important付きで適用されるため、後方で定義した本ルールのcontentが（!important無しでは）
   常に打ち消され、実ブラウザでは「最終判断」ラベルが一切描画されていなかった
   （getComputedStyle実測: content = "none"）。h2:nth-of-type(8)::after は
   h2::after より高い詳細度を持つため、content自体に!importantを付ければ確実に上書きできる。 */
body.postid-16 h2:nth-of-type(8) + .scroll-box {
  border: 2px solid var(--tap16-amber);
  border-radius: 8px;
  overflow: hidden;
}
body.postid-16 h2:nth-of-type(8)::after {
  content: "最終判断" !important;
  display: inline-block !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: var(--tap16-amber);
  border-radius: 999px;
  padding: 3px 12px;
  margin-left: 10px;
  vertical-align: middle;
}

/* ============================================================
   5. チェックリスト（7項目）可読性強化
   ============================================================ */
body.postid-16 .st-list-check {
  background: #fff;
  border: 1px solid var(--tap16-line);
  border-radius: 8px;
  padding: 4px 18px !important;
}
body.postid-16 .st-list-check li {
  padding: 10px 0;
  border-bottom: 1px solid var(--tap16-line);
  line-height: 1.8;
}
body.postid-16 .st-list-check li:last-child {
  border-bottom: 0;
}

/* ============================================================
   まとめ（engi-summary）とのバランス調整（余白のみ）
   ============================================================ */
body.postid-16 dl.engi-summary {
  margin-top: 1.8em;
}

/* ============================================================
   Mobile（390px想定）: paddingと文字サイズの微調整のみ
   ============================================================ */
@media (max-width: 480px) {
  body.postid-16 .scroll-box td { padding: 9px 10px !important; font-size: .9em; }
  body.postid-16 .graybox,
  body.postid-16 h2:nth-of-type(2) + p + ul + p { padding: 14px 14px !important; }
  body.postid-16 .st-list-check { padding: 4px 14px !important; }
}