/* =====================================================================
   お役立ち記事「冬のドローン飛行はバッテリー低下に注意」の図表
   ---------------------------------------------------------------------
   本文に .mp-wb-* のクラスを持つ記事だけで読み込む（inc/column-single.php）。
   図表はすべてコアブロック（表・リスト・グループ・段落）で組んであり、
   ここでは見た目だけを足す。セレクタは必ず .col-article__body と
   .mp-wb-* の組み合わせにして、他の記事・ページに影響させない。
   色・余白は theme.json のプリセットだけを使い、新しい色は増やさない。
   枠・表・カード・リンク集・相談案内は column-level35.css と同じ見た目にそろえている。
   ===================================================================== */

/* ---------- 共通：図表の枠 ---------- */
.col-article__body .mp-wb-fig {
  margin: var(--wp--preset--spacing--space-lg) 0;
  padding: var(--wp--preset--spacing--space-md);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  background-color: var(--wp--preset--color--white);
}
.col-article__body .mp-wb-fig > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-wb-fig > * + * { margin-top: var(--wp--preset--spacing--space-sm); }
.col-article__body .mp-wb-fig__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
  padding-left: 12px;
  border-left: 4px solid var(--wp--preset--color--accent);
}
.col-article__body .mp-wb-fig__note {
  font-size: 14px;
  line-height: 1.85;
  color: var(--wp--preset--color--text-light);
}

/* ---------- 図表1：低温による性能低下の流れ（縦型・下向き矢印） ---------- */
.col-article__body .mp-wb-chain {
  list-style: none;
  padding-left: 0;
  counter-reset: mp-wb-chain;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.col-article__body .mp-wb-chain > li {
  position: relative;
  margin: 0;
  padding: 12px 16px 12px 60px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  background-color: var(--wp--preset--color--mist);
  font-size: 15px;
  line-height: 1.8;
  counter-increment: mp-wb-chain;
}
.col-article__body .mp-wb-chain > li > strong {
  font-size: 16px;
  color: var(--wp--preset--color--brand);
}
.col-article__body .mp-wb-chain > li::before {
  content: counter(mp-wb-chain);
  position: absolute;
  left: 14px;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--brand);
  color: #ffffff;
  font-family: var(--wp--preset--font-family--latin);
  font-size: 15px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
}
.col-article__body .mp-wb-chain > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -21px;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--wp--preset--color--accent);
}
/* 最後の段（帰還余裕の減少）を結果として強調する */
.col-article__body .mp-wb-chain > li:last-child {
  border-color: var(--wp--preset--color--accent);
  background-color: var(--wp--preset--color--sage);
}

/* ---------- 図表2：年度スケジュール例（横並びの時期） ---------- */
.col-article__body .mp-wb-season {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.col-article__body .mp-wb-season > li {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--wp--preset--color--border);
  border-top: 4px solid var(--wp--preset--color--border);
  border-radius: 10px;
  background-color: var(--wp--preset--color--mist);
  font-size: 15px;
  line-height: 1.75;
}
.col-article__body .mp-wb-season > li > strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  color: var(--wp--preset--color--brand);
}
/* 現地実証（秋〜冬）の時期を強調する（色だけに頼らず本文でも説明している） */
.col-article__body .mp-wb-season > li:nth-child(3) {
  border-color: var(--wp--preset--color--accent);
  border-top-color: var(--wp--preset--color--accent);
  background-color: var(--wp--preset--color--sage);
}

/* ---------- 図表3：複合要因（＋でつないだ要因 → 結果） ---------- */
.col-article__body .mp-wb-factors {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.col-article__body .mp-wb-factors > li {
  position: relative;
  flex: 1 1 140px;
  max-width: 180px;
  margin: 0;
  padding: 12px 12px;
  border: 1px solid var(--wp--preset--color--border);
  border-top: 4px solid var(--wp--preset--color--accent);
  border-radius: 10px;
  background-color: var(--wp--preset--color--white);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  color: var(--wp--preset--color--text-light);
}
.col-article__body .mp-wb-factors > li > strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  color: var(--wp--preset--color--brand);
}
/* 要因の間の「＋」（装飾。読み上げでは並んだ項目として伝わる）。
   折り返したときに行末へ「＋」が残らないよう、2つ目以降の項目の左側に置く。 */
.col-article__body .mp-wb-factors > li:not(:first-child)::before {
  content: "+";
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--wp--preset--font-family--latin);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--accent-ink);
}
.col-article__body .mp-wb-result {
  position: relative;
  margin-top: 36px !important;
  padding: 14px 18px;
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 10px;
  background-color: var(--wp--preset--color--sage);
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
  color: var(--wp--preset--color--accent-ink);
}
.col-article__body .mp-wb-result strong {
  font-size: 16px;
  color: var(--wp--preset--color--brand);
}
.col-article__body .mp-wb-result::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -26px;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--wp--preset--color--accent);
}

/* ---------- 図表4：保温方法の比較表 ---------- */
.col-article__body .mp-wb-scroll-hint { display: none; }
.col-article__body .mp-wb-table { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.col-article__body .mp-wb-table table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.75;
}
.col-article__body .mp-wb-table th,
.col-article__body .mp-wb-table td {
  border: 1px solid var(--wp--preset--color--border);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.col-article__body .mp-wb-table thead th {
  background-color: var(--wp--preset--color--brand);
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
}
.col-article__body .mp-wb-table tbody td:first-child {
  width: 10em;
  background-color: var(--wp--preset--color--mist);
  font-weight: 700;
  color: var(--wp--preset--color--brand);
}
.col-article__body .mp-wb-table figcaption {
  font-size: 13px;
  line-height: 1.8;
  color: var(--wp--preset--color--text-light);
  text-align: left;
  margin-top: 10px;
}

/* ---------- 図表5：チェックリスト（カード） ---------- */
.col-article__body .mp-wb-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--space-sm);
}
.col-article__body .mp-wb-cards > * { margin: 0; }
/* カードのグループは layout: constrained のため、コアの .is-layout-constrained > * が
   左右 margin:auto !important と max-width を付け、グリッド内でカードが縮んでしまう。
   この記事のカードに限って打ち消し、列幅いっぱいに広げる。 */
.col-article__body .mp-wb-cards > .mp-wb-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}
.col-article__body .mp-wb-card {
  border: 1px solid var(--wp--preset--color--border);
  border-top: 4px solid var(--wp--preset--color--accent);
  border-radius: 10px;
  padding: 16px 18px;
  background-color: var(--wp--preset--color--white);
}
.col-article__body .mp-wb-card > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-wb-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
  margin-bottom: 8px !important;
}
.col-article__body .mp-wb-check {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.col-article__body .mp-wb-check li {
  position: relative;
  margin: 0;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.75;
}
/* チェックボックス風の枠（装飾。チェック済みには見せない） */
.col-article__body .mp-wb-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 15px;
  height: 15px;
  border: 2px solid var(--wp--preset--color--accent);
  border-radius: 3px;
  box-sizing: border-box;
}

/* ---------- 筆者の経験・注意書き ---------- */
.col-article__body .mp-wb-voice,
.col-article__body .mp-wb-note {
  margin: var(--wp--preset--spacing--space-md) 0;
  padding: 16px 20px;
  border: 1px solid var(--wp--preset--color--border);
  border-left: 4px solid var(--wp--preset--color--accent);
  border-radius: 8px;
  background-color: var(--wp--preset--color--mist);
}
.col-article__body .mp-wb-note { border-left-color: var(--wp--preset--color--brand); }
.col-article__body .mp-wb-voice > *,
.col-article__body .mp-wb-note > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-wb-voice > * + *,
.col-article__body .mp-wb-note > * + * { margin-top: 8px; }
.col-article__body .mp-wb-voice p,
.col-article__body .mp-wb-note p,
.col-article__body .mp-wb-note li { font-size: 15px; line-height: 1.85; }
.col-article__body .mp-wb-voice__label,
.col-article__body .mp-wb-note__title {
  font-weight: 700;
  color: var(--wp--preset--color--brand);
}
.col-article__body .mp-wb-voice__label { font-size: 14px; color: var(--wp--preset--color--accent-ink); }
.col-article__body .mp-wb-note__title { font-size: 16px; }

/* ---------- リンク集・相談案内 ---------- */
.col-article__body .mp-wb-links {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.col-article__body .mp-wb-links li {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--wp--preset--color--text-light);
}
.col-article__body .mp-wb-links li a {
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.col-article__body .mp-wb-consult {
  margin: var(--wp--preset--spacing--space-xl) 0 var(--wp--preset--spacing--space-lg);
  padding: var(--wp--preset--spacing--space-md);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 12px;
  background-color: var(--wp--preset--color--sage);
}
.col-article__body .mp-wb-consult > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-wb-consult > * + * { margin-top: 10px; }
.col-article__body .mp-wb-consult__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
}
.col-article__body .mp-wb-consult a { font-weight: 700; }

/* ---------- スマートフォン ---------- */
@media (max-width: 768px) {
  .col-article__body .mp-wb-fig { padding: 16px; }
  .col-article__body .mp-wb-chain > li { padding-left: 54px; }
  .col-article__body .mp-wb-chain > li::before { left: 12px; }
  .col-article__body .mp-wb-season { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 幅が狭いときは要因を縦に並べ、「＋」を項目の上に置く */
  .col-article__body .mp-wb-factors { flex-direction: column; align-items: stretch; gap: 30px; }
  .col-article__body .mp-wb-factors > li { max-width: none; flex: none; }
  .col-article__body .mp-wb-factors > li:not(:first-child)::before {
    left: 50%;
    top: -26px;
    transform: translateX(-50%);
  }
  .col-article__body .mp-wb-scroll-hint {
    display: block;
    font-size: 13px;
    line-height: 1.7;
    color: var(--wp--preset--color--text-light);
  }
  .col-article__body .mp-wb-scroll-hint::before { content: "\2194\00a0"; }
  .col-article__body .mp-wb-table table { min-width: 560px; font-size: 13px; }
  .col-article__body .mp-wb-table tbody td:first-child { position: sticky; left: 0; z-index: 1; width: 7.5em; }
  .col-article__body .mp-wb-cards { grid-template-columns: minmax(0, 1fr); }
}