/*!
 * okanemaru components
 * 記事内で使う再利用コンポーネント（ショートコード）の見た目。
 * すべて design-system.css のトークンを参照する。
 */

/* ===================================================
 * お金丸吹き出し [okanemaru_says]
 * =================================================== */
.okm-says {
  display: flex;
  align-items: flex-start;
  gap: var(--okm-space-4);
  margin-block: var(--okm-space-6);
}
.okm-says__icon-wrap {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--okm-radius-full);
  background: var(--okm-color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.okm-says__icon { width: 100%; height: 100%; object-fit: contain; }
.okm-says__bubble {
  position: relative;
  flex: 1 1 auto;
  background: var(--okm-color-surface);
  border: 1px solid var(--okm-color-border);
  border-radius: var(--okm-radius-md);
  padding: var(--okm-space-4) var(--okm-space-5);
  box-shadow: var(--okm-shadow-sm);
}
.okm-says__bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 20px;
  width: 16px;
  height: 16px;
  background: var(--okm-color-surface);
  border-left: 1px solid var(--okm-color-border);
  border-bottom: 1px solid var(--okm-color-border);
  transform: rotate(45deg);
}
.okm-says__name {
  display: block;
  font-size: var(--okm-font-size-xs);
  font-weight: var(--okm-font-weight-bold);
  color: var(--okm-color-accent);
  margin-bottom: var(--okm-space-1);
}
.okm-says__text p { margin: 0; font-size: var(--okm-font-size-base); line-height: var(--okm-line-height-base); }
.okm-says__text p + p { margin-top: var(--okm-space-2); }

@media (max-width: 480px) {
  .okm-says__icon-wrap { width: 52px; height: 52px; }
}

/* ===================================================
 * ポイントボックス / 注意ボックス
 * =================================================== */
.okm-box {
  border-radius: var(--okm-radius-md);
  padding: var(--okm-space-5);
  margin-block: var(--okm-space-6);
  border: 1px solid transparent;
}
.okm-box__title {
  display: flex;
  align-items: center;
  gap: var(--okm-space-2);
  font-weight: var(--okm-font-weight-bold);
  font-size: var(--okm-font-size-md);
  margin: 0 0 var(--okm-space-2);
}
.okm-box__body { font-size: var(--okm-font-size-base); line-height: var(--okm-line-height-base); }
.okm-box__body > *:last-child { margin-bottom: 0; }

.okm-box--point {
  background: var(--okm-color-point-bg);
  border-color: var(--okm-color-point);
}
.okm-box--point .okm-box__title { color: var(--okm-color-point); }

.okm-box--alert {
  background: var(--okm-color-alert-bg);
  border-color: var(--okm-color-alert);
}
.okm-box--alert .okm-box__title { color: var(--okm-color-alert); }

/* ===================================================
 * メリット・デメリット
 * =================================================== */
.okm-merit-demerit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--okm-space-4);
  margin-block: var(--okm-space-6);
}
.okm-merit-demerit__col {
  border-radius: var(--okm-radius-md);
  padding: var(--okm-space-4);
  border: 1px solid var(--okm-color-border);
}
.okm-merit-demerit__col--merit { background: var(--okm-color-point-bg); }
.okm-merit-demerit__col--demerit { background: var(--okm-color-alert-bg); }
.okm-merit-demerit__title {
  font-weight: var(--okm-font-weight-bold);
  margin: 0 0 var(--okm-space-2);
}
.okm-merit-demerit__col--merit .okm-merit-demerit__title { color: var(--okm-color-merit); }
.okm-merit-demerit__col--demerit .okm-merit-demerit__title { color: var(--okm-color-demerit); }
.okm-merit-demerit__body { font-size: var(--okm-font-size-sm); line-height: var(--okm-line-height-base); }

@media (max-width: 560px) {
  .okm-merit-demerit { grid-template-columns: 1fr; }
}

/* ===================================================
 * サービス比較カード
 * =================================================== */
.okm-service-card {
  position: relative;
  padding: var(--okm-space-5);
  margin-block: var(--okm-space-6);
}
.okm-service-card__pr {
  position: absolute;
  top: var(--okm-space-3);
  right: var(--okm-space-3);
}
.okm-service-card__head {
  display: flex;
  align-items: center;
  gap: var(--okm-space-3);
  margin-bottom: var(--okm-space-3);
}
.okm-service-card__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--okm-radius-sm);
}
.okm-service-card__name {
  font-size: var(--okm-font-size-lg);
  font-weight: var(--okm-font-weight-bold);
  margin: 0;
}
.okm-service-card__point {
  display: inline-block;
  background: var(--okm-color-primary-light);
  color: var(--okm-color-primary-contrast);
  font-size: var(--okm-font-size-sm);
  font-weight: var(--okm-font-weight-bold);
  border-radius: var(--okm-radius-sm);
  padding: var(--okm-space-1) var(--okm-space-3);
  margin-bottom: var(--okm-space-3);
}
.okm-service-card__body { font-size: var(--okm-font-size-sm); line-height: var(--okm-line-height-base); margin-bottom: var(--okm-space-4); }
.okm-service-card__cta { width: 100%; }

/* ===================================================
 * CTA
 * =================================================== */
.okm-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--okm-space-2);
  text-align: center;
  margin-block: var(--okm-space-7);
  padding: var(--okm-space-5);
  background: var(--okm-color-bg-alt);
  border-radius: var(--okm-radius-lg);
}
.okm-cta__note { font-size: var(--okm-font-size-xs); color: var(--okm-color-text-muted); }

/* ===================================================
 * 比較表（横スクロール）
 * =================================================== */
.okm-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--okm-space-6);
  border-radius: var(--okm-radius-md);
  border: 1px solid var(--okm-color-border);
}
.okm-table-scroll table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--okm-font-size-sm);
}
.okm-table-scroll th,
.okm-table-scroll td {
  padding: var(--okm-space-3) var(--okm-space-4);
  border-bottom: 1px solid var(--okm-color-border);
  text-align: left;
  white-space: nowrap;
}
.okm-table-scroll th {
  background: var(--okm-color-bg-alt);
  font-weight: var(--okm-font-weight-bold);
  position: sticky;
  top: 0;
}

/* ===================================================
 * FAQ / 参考資料（Phase 7 自動描画分）
 * =================================================== */
.okm-faq, .okm-references {
  margin-block: var(--okm-space-8);
  padding-top: var(--okm-space-6);
  border-top: 1px solid var(--okm-color-border);
}
.okm-faq__title, .okm-references__title {
  font-size: var(--okm-font-size-xl);
  font-weight: var(--okm-font-weight-black);
  margin-bottom: var(--okm-space-4);
}
.okm-faq__item {
  border: 1px solid var(--okm-color-border);
  border-radius: var(--okm-radius-md);
  padding: var(--okm-space-4);
  margin-bottom: var(--okm-space-3);
}
.okm-faq__q { font-weight: var(--okm-font-weight-bold); margin: 0 0 var(--okm-space-2); }
.okm-faq__a { color: var(--okm-color-text); line-height: var(--okm-line-height-base); }
.okm-references__list { list-style: none; padding: 0; margin: 0; }
.okm-references__list li {
  padding: var(--okm-space-2) 0;
  border-bottom: 1px dashed var(--okm-color-border);
}

/* ===================================================
 * YMYL注意書き（記事内に手動挿入する共通クラス）
 * =================================================== */
.okm-disclaimer {
  font-size: var(--okm-font-size-xs);
  color: var(--okm-color-text-muted);
  background: var(--okm-color-bg-alt);
  border-left: 3px solid var(--okm-color-accent);
  padding: var(--okm-space-3) var(--okm-space-4);
  margin-block: var(--okm-space-6);
  line-height: var(--okm-line-height-base);
}