/* ============================================================
   広告図解コンポーネント（転職エージェント系）
   ad-card.php の .ad-card__body 内でのみ使用。
   セレクタはすべて .ad-card__body 配下にスコープし、
   汎用スタイルへの影響を防ぐ。
   ============================================================ */

/* ============================================================
   ① メリット3カード
   ============================================================ */
.ad-card__body .ad-merit {
  margin: var(--space-8) 0;
}

.ad-card__body .ad-merit__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-2);
  text-align: center;
  margin: 0 0 var(--space-4);
  letter-spacing: 0.02em;
}

.ad-card__body .ad-merit__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.ad-card__body .ad-merit__card {
  background: var(--color-base-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-3) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
  /* 段階フェードイン: アコーディオンを開いた瞬間に順次ふわっと */
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  animation: ad-merit-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.15s + var(--i, 0) * 0.65s);
}

.ad-card__body .ad-merit__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--color-main), var(--color-accent-2));
  transform: scale(0);
  animation: ad-merit-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(0.3s + var(--i, 0) * 0.65s);
}

.ad-card__body .ad-merit__icon svg {
  width: 24px;
  height: 24px;
}

.ad-card__body .ad-merit__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--line-height-tight);
}

.ad-card__body .ad-merit__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.ad-card__body .ad-merit__desc strong {
  color: var(--color-accent-2);
  font-weight: var(--font-weight-bold);
}

@keyframes ad-merit-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ad-merit-pop {
  to {
    transform: scale(1);
  }
}

/* ============================================================
   ② お金の仕組み＆リスク/対処図解
   ============================================================ */
.ad-card__body .ad-risk {
  margin: var(--space-8) 0;
  background: var(--color-base-1);
}

/* 段階フェードイン: --i を持つ全子要素に適用 */
.ad-card__body .ad-risk [style*="--i"] {
  opacity: 0;
  transform: translateY(14px);
  animation: ad-risk-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.15s + var(--i, 0) * 0.55s);
}

.ad-card__body .ad-risk__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-2);
  text-align: center;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.02em;
}

.ad-card__body .ad-risk__lead {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0 0 var(--space-4);
  line-height: var(--line-height-relaxed);
}

.ad-card__body .ad-risk__lead strong {
  color: var(--color-accent-2);
}

/* フロー図（あなた→企業→エージェント） */
.ad-card__body .ad-risk__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex-wrap: nowrap;
  margin: 0 auto;
  background: var(--color-base-2);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-2);
  max-width: 560px;
}

.ad-card__body .ad-risk__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
  width: 70px;
}

.ad-card__body .ad-risk__nodeIcon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}

.ad-card__body .ad-risk__nodeIcon svg {
  width: 26px;
  height: 26px;
}

.ad-card__body .ad-risk__node--you .ad-risk__nodeIcon {
  background: linear-gradient(135deg, var(--color-main), var(--color-accent-2));
}

.ad-card__body .ad-risk__node--company .ad-risk__nodeIcon {
  background: var(--color-base-1);
  color: var(--color-accent-2);
  border: 1.5px solid var(--color-border);
}

.ad-card__body .ad-risk__node--agent .ad-risk__nodeIcon {
  background: var(--color-accent-2);
}

.ad-card__body .ad-risk__nodeLabel {
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-align: center;
  line-height: var(--line-height-tight);
}

.ad-card__body .ad-risk__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--color-text-secondary);
  flex: 0 0 auto;
}

.ad-card__body .ad-risk__arrow svg {
  width: 34px;
  height: 14px;
}

.ad-card__body .ad-risk__arrowText {
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.ad-card__body .ad-risk__arrowText--money {
  color: var(--color-main);
}

.ad-card__body .ad-risk__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-align: center;
  margin: var(--space-4) 0 var(--space-6);
  line-height: var(--line-height-relaxed);
}

.ad-card__body .ad-risk__note strong {
  color: var(--color-warning);
}

/* リスク/対処ペア */
.ad-card__body .ad-risk__pairs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ad-card__body .ad-risk__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--space-2);
}

.ad-card__body .ad-risk__risk,
.ad-card__body .ad-risk__fix {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  justify-content: center;
  text-align: center;
}

.ad-card__body .ad-risk__risk {
  background: var(--color-ad-warn-bg);
  border: 1px solid var(--color-ad-warn-border);
}

.ad-card__body .ad-risk__fix {
  background: var(--color-ad-ok-bg);
  border: 1px solid var(--color-ad-ok-border);
}

.ad-card__body .ad-risk__tag {
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.55rem;
  align-self: center;
  line-height: 1.5;
}

.ad-card__body .ad-risk__tag--warn {
  color: var(--color-ad-warn-text);
  background: var(--color-ad-warn-strong);
}

.ad-card__body .ad-risk__tag--ok {
  color: var(--color-ad-ok-text);
  background: var(--color-ad-ok-strong);
}

.ad-card__body .ad-risk__pairText {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: 1.45;
}

.ad-card__body .ad-risk__connector {
  display: grid;
  place-items: center;
  color: var(--color-ad-ok-accent);
}

.ad-card__body .ad-risk__connector svg {
  width: 22px;
  height: 22px;
}

.ad-card__body .ad-risk__closing {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-2);
  text-align: center;
  margin: var(--space-6) 0 0;
  line-height: var(--line-height-relaxed);
}

.ad-card__body .ad-risk__closing strong {
  color: var(--color-main);
}

@keyframes ad-risk-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   ③ 診断フローチャート枠（プレースホルダ）
   ============================================================ */
.ad-card__body .ad-flow-placeholder {
  margin: var(--space-8) 0;
}

.ad-card__body .ad-flow-placeholder__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-2);
  text-align: center;
  margin: 0 0 var(--space-4);
}

.ad-card__body .ad-flow-placeholder__box {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: repeating-linear-gradient(
    45deg,
    var(--color-base-2),
    var(--color-base-2) 10px,
    var(--color-base-1) 10px,
    var(--color-base-1) 20px
  );
}

.ad-card__body .ad-flow-placeholder__tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  background: var(--color-base-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.9rem;
  margin-bottom: var(--space-3);
}

.ad-card__body .ad-flow-placeholder__memo {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ============================================================
   ④ 締め文ボックス
   ============================================================ */
.ad-card__body .ad-agent__closing {
  font-size: var(--font-size-sm);
  background: var(--color-base-2);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4);
  margin-top: var(--space-6);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

/* ============================================================
   SP 調整（max-width: 480px）
   ============================================================ */
@media (max-width: 480px) {
  .ad-card__body .ad-merit__cards {
    gap: var(--space-1);
  }

  .ad-card__body .ad-merit__card {
    padding: var(--space-4) var(--space-2);
    gap: var(--space-1);
  }

  .ad-card__body .ad-merit__icon {
    width: 40px;
    height: 40px;
  }

  .ad-card__body .ad-merit__icon svg {
    width: 21px;
    height: 21px;
  }

  .ad-card__body .ad-merit__title {
    font-size: 0.82rem;
  }

  .ad-card__body .ad-merit__desc {
    font-size: 0.7rem;
  }

  .ad-card__body .ad-risk__flow {
    gap: var(--space-1);
    padding: var(--space-3) var(--space-1);
  }

  .ad-card__body .ad-risk__node {
    width: 56px;
  }

  .ad-card__body .ad-risk__nodeIcon {
    width: 40px;
    height: 40px;
  }

  .ad-card__body .ad-risk__nodeIcon svg {
    width: 21px;
    height: 21px;
  }

  .ad-card__body .ad-risk__nodeLabel {
    font-size: 0.62rem;
  }

  .ad-card__body .ad-risk__arrow svg {
    width: 24px;
  }

  .ad-card__body .ad-risk__arrowText {
    font-size: 0.58rem;
  }

  .ad-card__body .ad-risk__pairText {
    font-size: 0.74rem;
  }

  .ad-card__body .ad-risk__connector svg {
    width: 18px;
  }
}

/* ============================================================
   モーション軽減（アクセシビリティ）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ad-card__body .ad-merit__card,
  .ad-card__body .ad-merit__icon,
  .ad-card__body .ad-risk [style*="--i"] {
    animation: none;
    opacity: 1;
    transform: none;
  }
}