/* ============================================================
   DMM経済圏 - 記事パーツ（No.26以降の記事で共通利用）
   ============================================================ */

/* 冒頭の要点（4マス） */
.ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 32px; }
.ap-stat { background: var(--bg-card); border: 1px solid var(--border-white); border-radius: var(--radius-md); padding: 18px 12px; text-align: center; }
.ap-stat .ic { font-size: 1.6rem; margin-bottom: 6px; }
.ap-stat .lb { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 4px; }
.ap-stat .v { font-size: 1.1rem; font-weight: 900; color: var(--cyan-primary); font-family: var(--font-en); line-height: 1.3; }
.ap-stat .v.red { color: var(--red-light); }
.ap-stat .v.gold { color: var(--gold); }

/* 結論ボックス */
.ap-answer { border: 1px solid var(--border-cyan); border-left: 4px solid var(--cyan-primary); background: rgba(0, 200, 255, 0.05); border-radius: var(--radius-md); padding: 20px 22px; margin: 0 0 28px; }
.ap-answer .ttl { font-size: 0.8rem; font-weight: 700; color: var(--cyan-primary); letter-spacing: 0.05em; margin-bottom: 8px; }
.ap-answer p { margin: 0; font-size: 0.95rem; color: var(--text-primary); line-height: 1.85; }

/* 表（横スクロール対応） */
.ap-table { overflow-x: auto; margin: 24px 0; border: 1px solid var(--border-white); border-radius: var(--radius-md); }
.ap-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.875rem; }
.ap-table th { background: var(--bg-surface); padding: 13px 14px; text-align: left; font-weight: 700; color: var(--text-primary); border-bottom: 2px solid var(--border-red); white-space: nowrap; }
.ap-table td { padding: 13px 14px; border-bottom: 1px solid var(--border-white); color: var(--text-secondary); line-height: 1.6; }
.ap-table tr:last-child td { border-bottom: none; }
.ap-table td.hl, .ap-table td strong { color: var(--text-primary); font-weight: 700; }
.ap-table td.good { color: #00c864; font-weight: 700; }
.ap-table td.bad { color: var(--red-light); font-weight: 700; }
.ap-table td.gold { color: var(--gold); font-weight: 700; }
.ap-table tr.me td { background: rgba(230, 0, 18, 0.05); }
.ap-cap { font-size: 0.8rem; color: var(--text-muted); margin: -12px 0 24px; line-height: 1.6; }

/* カード（2〜3列） */
.ap-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
.ap-cards.c2 { grid-template-columns: repeat(2, 1fr); }
.ap-card { background: var(--bg-card); border: 1px solid var(--border-white); border-top: 3px solid var(--cyan-primary); border-radius: var(--radius-md); padding: 20px 18px; }
.ap-card.red { border-top-color: var(--red-primary); }
.ap-card.gold { border-top-color: var(--gold); }
.ap-card .ic { font-size: 1.6rem; margin-bottom: 8px; }
.ap-card h4 { font-size: 0.98rem; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.ap-card .big { font-size: 1.4rem; font-weight: 900; font-family: var(--font-en); color: var(--cyan-primary); margin-bottom: 6px; }
.ap-card.red .big { color: var(--red-light); }
.ap-card.gold .big { color: var(--gold); }
.ap-card p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; line-height: 1.7; }

/* 良い点・注意点 */
.ap-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.ap-vs > div { background: var(--bg-card); border: 1px solid var(--border-white); border-radius: var(--radius-md); padding: 20px 22px; }
.ap-vs .good { border-color: rgba(0, 200, 100, 0.25); }
.ap-vs .bad { border-color: var(--border-red); }
.ap-vs h4 { font-size: 0.92rem; font-weight: 700; margin-bottom: 12px; }
.ap-vs .good h4 { color: #00c864; }
.ap-vs .bad h4 { color: var(--red-light); }
.ap-vs ul { margin: 0; padding: 0; list-style: none; }
.ap-vs li { font-size: 0.86rem; color: var(--text-secondary); padding: 7px 0 7px 22px; border-bottom: 1px solid var(--border-white); position: relative; line-height: 1.6; }
.ap-vs li:last-child { border-bottom: none; }
.ap-vs .good li::before { content: "✓"; position: absolute; left: 0; color: #00c864; font-weight: 700; }
.ap-vs .bad li::before { content: "✗"; position: absolute; left: 0; color: var(--red-light); font-weight: 700; }

/* タイムライン */
.ap-time { margin: 24px 0; border-left: 2px solid var(--border-cyan); padding-left: 22px; }
.ap-time .it { position: relative; margin-bottom: 18px; }
.ap-time .it::before { content: ""; position: absolute; left: -29px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan-primary); box-shadow: 0 0 10px rgba(0, 200, 255, 0.6); }
.ap-time .it.red::before { background: var(--red-primary); box-shadow: 0 0 10px rgba(230, 0, 18, 0.6); }
.ap-time .d { font-size: 0.78rem; font-weight: 700; color: var(--cyan-primary); font-family: var(--font-en); }
.ap-time .it.red .d { color: var(--red-light); }
.ap-time h4 { font-size: 0.95rem; margin: 2px 0 4px; }
.ap-time p { font-size: 0.86rem; color: var(--text-secondary); margin: 0; line-height: 1.7; }

/* チェックリスト */
.ap-check { list-style: none; margin: 20px 0; padding: 0; }
.ap-check li { position: relative; padding: 10px 14px 10px 42px; margin-bottom: 8px; background: var(--bg-card); border: 1px solid var(--border-white); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }
.ap-check li::before { content: "✓"; position: absolute; left: 14px; top: 10px; width: 18px; height: 18px; border-radius: 4px; background: var(--cyan-primary); color: #06061a; font-size: 0.75rem; font-weight: 900; text-align: center; line-height: 18px; }
.ap-check li strong { color: var(--text-primary); }

/* FAQ（details） */
.faq-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border-white); border-radius: var(--radius-md); overflow: hidden; }
.faq-item summary { padding: 18px 20px; cursor: pointer; font-weight: 700; font-size: 0.92rem; list-style: none; color: var(--text-primary); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q."; color: var(--red-primary); margin-right: 8px; font-family: var(--font-en); }
.faq-item[open] summary { border-bottom: 1px solid var(--border-white); }
.faq-item .faq-answer { padding: 16px 20px 18px; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.85; }

@media (max-width: 768px) {
  .ap-stats { grid-template-columns: repeat(2, 1fr); }
  .ap-cards, .ap-cards.c2, .ap-vs { grid-template-columns: 1fr; }
}