/* ============================================================
   PayAI NEXT — 送金業務・返金・給付金管理 / Product LP add-ons
   Extends usecase-media-pro.css (lp-* design system).
   Houses fund-transfer specific scenario cards and styling.
   ============================================================ */

/* ---- Fund Transfer Scenario Cards ---- */
.ft-scenarios-card {
  max-width: 1060px; margin: 0 auto 32px;
  border: 1px solid var(--bd-2); border-radius: 18px; overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 48px 104px -44px rgba(8,16,40,.55),
              0 0 0 1px color-mix(in oklab, var(--lp-acc) 14%, transparent);
}

.ft-sc-head {
  display: flex; align-items: center; gap: 18px; padding: 28px 32px;
  background: linear-gradient(140deg, color-mix(in oklab, var(--bg-card) 85%, var(--bg-0)), var(--bg-0));
  border-bottom: 1px solid var(--bd-1);
}

.ft-sc-ic {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; font-size: 28px; background: var(--lp-grad); box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--lp-acc) 85%, transparent);
  flex-shrink: 0;
}

.ft-sc-head div { flex: 1; min-width: 0; }
.ft-sc-head h3 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.ft-sc-head .en { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-2); margin-top: 4px; font-weight: 600; text-transform: uppercase; }

.ft-sc-body { padding: 28px 32px; display: flex; flex-direction: column; gap: 28px; }

.ft-sc-section { display: flex; flex-direction: column; gap: 16px; }
.ft-sc-section h4 {
  font-size: 15px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px;
  color: var(--text-0); letter-spacing: -0.01em;
}
.ft-sc-section h4 i { font-size: 18px; color: var(--lp-acc); }

.ft-sc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ft-sc-list li {
  font-size: 14px; line-height: 1.6; color: var(--text-1); padding-left: 0;
}

.ft-sc-list .term {
  font-weight: 700; color: var(--text-0); display: inline;
}

/* ---- Key Issues Grid ---- */
.ft-issues-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}

.ft-issue {
  padding: 28px 24px; border: 1px solid var(--bd-1); border-radius: 14px;
  background: var(--bg-card); transition: border-color .18s ease, transform .18s var(--lp-spring);
}

.ft-issue:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--lp-acc) 32%, transparent); }

.ft-issue-ic {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; font-size: 24px; background: linear-gradient(140deg, #ff6b6b, #ff4757);
  margin-bottom: 16px;
}

.ft-issue h4 { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--text-0); letter-spacing: -0.01em; }
.ft-issue p { font-size: 13.5px; line-height: 1.6; margin: 0; color: var(--text-2); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .ft-sc-head { flex-direction: column; text-align: center; gap: 14px; padding: 24px 20px; }
  .ft-sc-ic { margin: 0 auto; }
  .ft-sc-head h3 { font-size: 18px; }
  .ft-sc-body { padding: 24px 20px; gap: 24px; }
  .ft-sc-section h4 { justify-content: center; }
  
  .ft-issues-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ft-sc-head .en { display: none; }
  .ft-sc-section h4 { font-size: 14px; }
  .ft-sc-list li { font-size: 13.5px; }
}