@charset "UTF-8";
/* ==========================================================================
   50-parts.css — 記事本文側で組む部品(部品カタログ board6 / Xwrite調律の手組み版)
   テンプレートからは出さない。記事の HTML がこのクラスを使う。
   正本: canvas「04 部品カタログ」L1046-1208 /「05 ネイティブブロックの調律」L1214-1275
        「02 記事」L573-581(ステップ)・L675-685(FAQ)
   ========================================================================== */

/* ==== §1 横スクロールの器(表をSPで溢れさせない) ========================
   PC では素通し。SP の見出し「← 横にスクロールできます」は 70-responsive。 */
.oym-scroll{max-width:100%;}

/* ==== §2 表の列比率(キャンバスの grid-template-columns を表に写す) ======
   チェックリスト  38px / 1fr / 90px            (canvas L1054)
   棚卸しシート    40px / 1.1fr / 1.6fr / 100px (canvas L591)
   比較表         154px / 1.2fr / 1.2fr / .8fr / .8fr (canvas L1093)
   対比表         176px / 1fr / 1fr / 122px     (canvas L1138) */
.oym-table{table-layout:auto;}

.oym-checktable th:first-child,
.oym-checktable td:first-child{width:38px;}
.oym-checktable th:last-child,
.oym-checktable td:last-child{width:90px;}

.oym-sheet th:nth-child(1),
.oym-sheet td:nth-child(1){width:40px;}
.oym-sheet th:nth-child(2),
.oym-sheet td:nth-child(2){width:23%;}
.oym-sheet th:nth-child(4),
.oym-sheet td:nth-child(4){width:100px;}
.oym-sheet td:nth-child(2){font-weight:700;}

.oym-compare th:first-child,
.oym-compare td:first-child{width:154px;font-weight:700;}
.oym-compare td{font-size:13px;line-height:1.85;}

.oym-diff th:first-child,
.oym-diff td:first-child{width:176px;font-weight:700;line-height:1.7;}
.oym-diff th:last-child,
.oym-diff td:last-child{width:122px;}
.oym-diff td{font-size:13px;line-height:1.9;}

/* ==== §3 ステップ(手組み版 / canvas L573-581) ===========================
   番号は円形バッジ、区切りは実線ヘアライン。縦線コネクタは使わない。 */
.oym-steps{
  background:var(--oym-surface);border:1px solid var(--oym-line);border-radius:var(--oym-r);
  padding:22px 24px;margin:var(--oym-sp-3) 0;
  display:flex;flex-direction:column;
  counter-reset:oym-step;
}
.oym-steps > li{
  list-style:none;display:flex;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--oym-line-soft);counter-increment:oym-step;margin:0;
}
.oym-steps > li:first-child{padding-top:0;}
.oym-steps > li:last-child{padding-bottom:0;border-bottom:0;}
.oym-steps > li::before{
  content:counter(oym-step);
  flex:none;width:28px;height:28px;border-radius:var(--oym-r-pill);
  background:var(--oym-walnut);color:var(--oym-surface);
  font-size:var(--oym-fs-small);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.oym-steps .title{font-size:15px;font-weight:700;line-height:1.7;display:block;margin-bottom:5px;}
.oym-steps .desc{font-size:14px;line-height:1.9;color:var(--oym-ink-2);display:block;}

/* ==== §4 FAQ(手組み版 / canvas L675-685) ================================
   Q/A は円形バッジ(胡桃茶／淡茶)。吹き出し・影・アイコンは使わない。 */
.oym-faq{
  border:1px solid var(--oym-line);border-radius:var(--oym-r);background:var(--oym-surface);
  overflow:hidden;margin:var(--oym-sp-3) 0;
}
.oym-faq__item{padding:20px 22px;border-bottom:1px solid var(--oym-line-soft);}
.oym-faq__item:last-child{border-bottom:0;}
.oym-faq__q,.oym-faq__a{display:flex;gap:11px;}
.oym-faq__q{margin-bottom:11px;}
.oym-faq__q::before,.oym-faq__a::before{
  flex:none;width:24px;height:24px;border-radius:var(--oym-r-pill);
  font-size:var(--oym-fs-xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.oym-faq__q::before{content:"Q";background:var(--oym-walnut);color:var(--oym-surface);}
.oym-faq__a::before{content:"A";background:var(--oym-walnut-soft);color:var(--oym-walnut);}
.oym-faq__q > *{font-size:15px;font-weight:700;line-height:1.7;margin:0;}
.oym-faq__a > *{font-size:14px;line-height:1.95;margin:0;}

/* ==== §5 囲み3種(canvas L1246-1252) ====================================
   許可は補足(帯色)・要点(淡茶)・注意(淡錆浅葱)の3種のみ。
   赤系の強調と絵文字は使わない。 */
.oym-box-info,
.oym-box-point,
.oym-box-caution{
  border-radius:var(--oym-r);padding:13px 16px;margin:var(--oym-sp-3) 0;
  font-size:var(--oym-fs-small);line-height:1.85;
}
.oym-box-info{background:var(--oym-band);}
.oym-box-point{background:var(--oym-walnut-soft);}
.oym-box-caution{background:var(--oym-teal-soft);border:1px solid var(--oym-teal-line);}
.oym-box-info > :last-child,
.oym-box-point > :last-child,
.oym-box-caution > :last-child{margin-bottom:0;}

/* ==== §6 リンクカード(canvas L1260) ==================================== */
.oym-linkcard{
  display:flex;flex-direction:column;gap:4px;
  background:var(--oym-surface);border:1px solid var(--oym-line);border-radius:var(--oym-r);
  padding:14px 16px;margin:var(--oym-sp-2) 0;text-decoration:none;
}
.oym-linkcard:hover{text-decoration:none;}
.oym-linkcard__title{font-size:var(--oym-fs-small);font-weight:700;color:var(--oym-walnut);}
.oym-linkcard__host{font-size:var(--oym-fs-xs);color:var(--oym-ink-3);}

/* ==== §7 目次(子側フォールバック時の DOM) ===============================
   既定はネイティブ .toc_block(60-xwrite.css)。OYM_CHILD_TOC=true のとき
   同じ .toc_block クラスで子が組むので、追加の見た目定義は要らない。 */

/* ==== §8 印刷用の補助(本体は 70-responsive.css §印刷) ==================== */
.oym-print-only{display:none;}