/* TOEFL逆算スケジュール診断 - JINテーマ最適化版CSS */
/* Version: 1.1 - WordPress JINテーマ対応版（CTA対応強化） */

/* ========================================
   0. CSS変数定義（ルートレベル）
   ======================================== */
:root,
.toefl-diagnosis-wrapper,
.toefl-diagnosis-inline-cta,
.toefl-diagnosis-schedule-cta {
  --toefl-primary: #2563eb;
  --toefl-primary-hover: #1d4ed8;
  --toefl-primary-light: #dbeafe;
  --toefl-secondary: #4b5563;
  --toefl-success: #16a34a;
  --toefl-success-light: #dcfce7;
  --toefl-warning: #d97706;
  --toefl-warning-light: #fef3c7;
  --toefl-danger: #dc2626;
  --toefl-danger-light: #fee2e2;
  --toefl-text: #1f2937;
  --toefl-text-light: #6b7280;
  --toefl-text-muted: #9ca3af;
  --toefl-bg: #f8fafc;
  --toefl-bg-white: #ffffff;
  --toefl-border: #e5e7eb;
  --toefl-border-light: #f3f4f6;
  --toefl-radius: 12px;
  --toefl-radius-lg: 20px;
  --toefl-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --toefl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --toefl-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* ========================================
   0.5. JINテーマ干渉防止（最優先）
   ======================================== */

/* JINテーマのスタイルを完全に隔離 */
.cps-post-main .toefl-diagnosis,
.cps-post-main .toefl-diagnosis *,
.cps-post-main .toefl-diagnosis *::before,
.cps-post-main .toefl-diagnosis *::after,
article .toefl-diagnosis,
article .toefl-diagnosis *,
article .toefl-diagnosis *::before,
article .toefl-diagnosis *::after,
.entry-content .toefl-diagnosis,
.entry-content .toefl-diagnosis *,
.entry-content .toefl-diagnosis *::before,
.entry-content .toefl-diagnosis *::after,
.toefl-article .toefl-diagnosis,
.toefl-article .toefl-diagnosis *,
.toefl-article .toefl-diagnosis *::before,
.toefl-article .toefl-diagnosis *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 100% !important;
  font: inherit !important;
  vertical-align: baseline !important;
  text-decoration: none !important;
  list-style: none !important;
}

/* JIN固有の余白とスタイルを強制リセット */
.cps-post-main .toefl-diagnosis p,
.cps-post-main .toefl-diagnosis ul,
.cps-post-main .toefl-diagnosis ol,
.cps-post-main .toefl-diagnosis li,
.cps-post-main .toefl-diagnosis h1,
.cps-post-main .toefl-diagnosis h2,
.cps-post-main .toefl-diagnosis h3,
.cps-post-main .toefl-diagnosis h4,
article .toefl-diagnosis p,
article .toefl-diagnosis ul,
article .toefl-diagnosis ol,
article .toefl-diagnosis li,
.entry-content .toefl-diagnosis p,
.entry-content .toefl-diagnosis ul,
.entry-content .toefl-diagnosis ol,
.entry-content .toefl-diagnosis li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  line-height: inherit !important;
}

/* JINのボタンスタイルを上書き（all: unsetは使用しない） */
.cps-post-main .toefl-diagnosis button,
.cps-post-main .toefl-diagnosis .toefl-btn,
.cps-post-main .toefl-diagnosis .toefl-option,
.cps-post-main .toefl-diagnosis .toefl-chip,
article .toefl-diagnosis button,
article .toefl-diagnosis .toefl-btn,
.entry-content .toefl-diagnosis button,
.entry-content .toefl-diagnosis .toefl-btn {
  box-sizing: border-box !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border: none !important;
  outline: none !important;
  text-decoration: none !important;
}

/* JINのリンクスタイルを上書き */
.cps-post-main .toefl-diagnosis a,
article .toefl-diagnosis a,
.entry-content .toefl-diagnosis a {
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: none !important;
}

/* ========================================
   1. リセット & 基本スタイル
   ======================================== */
.toefl-diagnosis,
.toefl-diagnosis *,
.toefl-diagnosis *::before,
.toefl-diagnosis *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.toefl-diagnosis {
  --toefl-primary: #2563eb;
  --toefl-primary-hover: #1d4ed8;
  --toefl-primary-light: #dbeafe;
  --toefl-secondary: #4b5563;
  --toefl-success: #16a34a;
  --toefl-success-light: #dcfce7;
  --toefl-warning: #d97706;
  --toefl-warning-light: #fef3c7;
  --toefl-danger: #dc2626;
  --toefl-danger-light: #fee2e2;
  --toefl-text: #1f2937;
  --toefl-text-light: #6b7280;
  --toefl-text-muted: #9ca3af;
  --toefl-bg: #f8fafc;
  --toefl-bg-white: #ffffff;
  --toefl-border: #e5e7eb;
  --toefl-border-light: #f3f4f6;
  --toefl-radius: 12px;
  --toefl-radius-lg: 20px;
  --toefl-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --toefl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --toefl-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  font-family: var(--toefl-font) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--toefl-text) !important;
  max-width: 600px !important;
  margin: 32px auto !important;
  padding: 32px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%) !important;
  border-radius: var(--toefl-radius-lg) !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 12px 24px -8px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 -2px 6px rgba(0, 0, 0, 0.02) inset !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  position: relative !important;
}

/* Screen Management */
.toefl-diagnosis .toefl-screen {
  display: none !important;
}

.toefl-diagnosis .toefl-screen--active {
  display: block !important;
}

/* ========================================
   2. ボタン基本リセット（JIN干渉対策）
   ======================================== */
/* 注意: background等は各コンポーネントで再定義するため、ここでは設定しない */
.toefl-diagnosis button,
.toefl-diagnosis .toefl-btn,
.toefl-diagnosis .toefl-option,
.toefl-diagnosis .toefl-chip {
  font-family: var(--toefl-font) !important;
  cursor: pointer !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.toefl-diagnosis button:focus,
.toefl-diagnosis .toefl-btn:focus,
.toefl-diagnosis .toefl-option:focus,
.toefl-diagnosis .toefl-chip:focus {
  outline: 2px solid var(--toefl-primary) !important;
  outline-offset: 2px !important;
}

/* ========================================
   3. イントロ画面
   ======================================== */
.toefl-diagnosis .toefl-intro {
  text-align: center !important;
  padding: 24px 0 !important;
}

/* タイトルヘッダーカード */
.toefl-diagnosis .toefl-intro__header {
  background: var(--toefl-bg-white) !important;
  border-radius: var(--toefl-radius) !important;
  padding: 20px 24px !important;
  margin-bottom: 20px !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.toefl-diagnosis .toefl-intro__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--toefl-text) !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
  display: inline !important;
  background: linear-gradient(transparent 60%, #fef08a 60%) !important;
  padding: 0 4px !important;
}

.toefl-diagnosis .toefl-intro__subtitle {
  font-size: 14px !important;
  color: var(--toefl-text-light) !important;
  margin: 8px 0 0 !important;
  line-height: 1.6 !important;
}

/* ベネフィットカードセクション */
.toefl-diagnosis .toefl-intro__benefits {
  margin-bottom: 24px !important;
  text-align: left !important;
}

.toefl-diagnosis .toefl-intro__benefits-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--toefl-text-light) !important;
  margin: 0 0 12px !important;
  text-align: center !important;
}

.toefl-diagnosis .toefl-intro__benefits-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* ベネフィットカード */
.toefl-diagnosis .toefl-benefit-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: var(--toefl-bg-white) !important;
  border: 1px solid var(--toefl-border) !important;
  border-radius: var(--toefl-radius) !important;
  padding: 14px 16px !important;
  transition: all 0.2s ease !important;
}

.toefl-diagnosis .toefl-benefit-card:hover {
  border-color: var(--toefl-text-muted) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.toefl-diagnosis .toefl-benefit-card__icon {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--toefl-text-light) !important;
  background: var(--toefl-border-light) !important;
  border-radius: 8px !important;
}

.toefl-diagnosis .toefl-benefit-card__icon svg {
  width: 20px !important;
  height: 20px !important;
}

.toefl-diagnosis .toefl-benefit-card__content {
  flex: 1 !important;
  min-width: 0 !important;
}

.toefl-diagnosis .toefl-benefit-card__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--toefl-text) !important;
  margin-bottom: 2px !important;
  line-height: 1.4 !important;
}

.toefl-diagnosis .toefl-benefit-card__desc {
  font-size: 12px !important;
  color: var(--toefl-text-light) !important;
  line-height: 1.5 !important;
}

/* チェックマークスタイル */
.toefl-diagnosis .toefl-check {
  color: var(--toefl-primary) !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
}

/* ========================================
   4. メインボタン
   ======================================== */
.toefl-diagnosis .toefl-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  border-radius: 28px !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  border: none !important;
}

.toefl-diagnosis .toefl-btn--primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

.toefl-diagnosis .toefl-btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
}

.toefl-diagnosis .toefl-btn--primary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.toefl-diagnosis .toefl-btn--secondary {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.toefl-diagnosis .toefl-btn--secondary:hover {
  background: #f8fafc !important;
  border-color: #9ca3af !important;
}

.toefl-diagnosis .toefl-btn--large {
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
}

.toefl-diagnosis .toefl-btn--full {
  width: 100% !important;
}

.toefl-diagnosis .toefl-btn--text {
  background: transparent !important;
  color: var(--toefl-primary) !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
}

.toefl-diagnosis .toefl-btn--text:hover {
  background: var(--toefl-primary-light) !important;
}

.toefl-diagnosis .toefl-btn--text-small {
  background: transparent !important;
  color: var(--toefl-warning) !important;
  font-size: 13px !important;
  padding: 4px 0 !important;
  text-decoration: underline !important;
  box-shadow: none !important;
}

/* ========================================
   5. プログレスバー
   ======================================== */
.toefl-diagnosis .toefl-progress {
  margin-bottom: 24px !important;
}

.toefl-diagnosis .toefl-progress__label {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: var(--toefl-text-light) !important;
  margin-bottom: 6px !important;
}

.toefl-diagnosis .toefl-progress__percent {
  color: var(--toefl-text-muted) !important;
}

.toefl-diagnosis .toefl-progress__bar {
  height: 8px !important;
  background: #e5e7eb !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.toefl-diagnosis .toefl-progress__fill {
  height: 100% !important;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%) !important;
  border-radius: 4px !important;
  transition: width 0.3s ease !important;
}

/* ========================================
   6. ステップ画面
   ======================================== */
.toefl-diagnosis .toefl-step {
  padding: 8px 0 !important;
}

.toefl-diagnosis .toefl-step__title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--toefl-text) !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
  display: block !important;
}

.toefl-diagnosis .toefl-step__subtitle {
  font-size: 14px !important;
  color: var(--toefl-text-light) !important;
  margin: 0 0 24px !important;
  line-height: 1.5 !important;
}

/* ========================================
   7. オプション（カードスタイル）
   ======================================== */
.toefl-diagnosis .toefl-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

.toefl-diagnosis .toefl-options--horizontal {
  flex-direction: row !important;
}

.toefl-diagnosis .toefl-options--horizontal .toefl-option {
  flex: 1 !important;
}

.toefl-diagnosis .toefl-options--grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
}

.toefl-diagnosis .toefl-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  padding: 16px 20px !important;
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-bottom: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.toefl-diagnosis .toefl-option:hover {
  border-color: #2563eb !important;
  background: #f0f7ff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important;
}

.toefl-diagnosis .toefl-option--selected {
  border-color: #2563eb !important;
  background: #dbeafe !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15) !important;
}

.toefl-diagnosis .toefl-option--compact {
  padding: 12px !important;
  text-align: center !important;
}

.toefl-diagnosis .toefl-option--small {
  padding: 12px !important;
}

.toefl-diagnosis .toefl-option__label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--toefl-text) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.toefl-diagnosis .toefl-option--compact .toefl-option__label {
  font-size: 14px !important;
  margin-bottom: 2px !important;
}

.toefl-diagnosis .toefl-option--small .toefl-option__label {
  font-size: 14px !important;
}

.toefl-diagnosis .toefl-option__desc {
  font-size: 13px !important;
  color: var(--toefl-text-light) !important;
  display: block !important;
}

.toefl-diagnosis .toefl-option--compact .toefl-option__desc {
  font-size: 11px !important;
}

.toefl-diagnosis .toefl-option--small .toefl-option__desc {
  font-size: 12px !important;
}

/* ========================================
   8. チップ
   ======================================== */
.toefl-diagnosis .toefl-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.toefl-diagnosis .toefl-chips--two {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
}

.toefl-diagnosis .toefl-chips--wrap {
  flex-wrap: wrap !important;
}

.toefl-diagnosis .toefl-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 4px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  text-align: center !important;
}

.toefl-diagnosis .toefl-chip:hover {
  border-color: #2563eb !important;
  background: #f0f7ff !important;
}

.toefl-diagnosis .toefl-chip--selected {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

.toefl-diagnosis .toefl-chip--small {
  padding: 8px 12px !important;
  font-size: 12px !important;
}

/* ========================================
   9. フォームフィールド
   ======================================== */
.toefl-diagnosis .toefl-field {
  margin-bottom: 20px !important;
}

.toefl-diagnosis .toefl-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--toefl-text) !important;
  margin-bottom: 10px !important;
}

/* ========================================
   10. アクションボタン
   ======================================== */
.toefl-diagnosis .toefl-actions {
  margin-top: 24px !important;
}

.toefl-diagnosis .toefl-actions--split {
  display: flex !important;
  gap: 12px !important;
}

.toefl-diagnosis .toefl-actions--split .toefl-btn:last-child {
  flex: 1 !important;
}

/* ========================================
   11. カレンダー
   ======================================== */
.toefl-diagnosis .toefl-calendar-container {
  margin-bottom: 24px !important;
}

.toefl-diagnosis .toefl-calendar {
  background: var(--toefl-bg-white) !important;
  border: 1px solid var(--toefl-border) !important;
  border-radius: var(--toefl-radius) !important;
  padding: 16px !important;
  box-shadow: var(--toefl-shadow) !important;
}

.toefl-diagnosis .toefl-calendar__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

.toefl-diagnosis .toefl-calendar__nav {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: var(--toefl-text-light) !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.toefl-diagnosis .toefl-calendar__nav:hover:not(:disabled) {
  background: var(--toefl-border-light) !important;
}

.toefl-diagnosis .toefl-calendar__nav:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

.toefl-diagnosis .toefl-calendar__nav svg {
  width: 20px !important;
  height: 20px !important;
}

.toefl-diagnosis .toefl-calendar__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--toefl-text) !important;
}

.toefl-diagnosis .toefl-calendar__weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  margin-bottom: 8px !important;
}

.toefl-diagnosis .toefl-calendar__weekday {
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--toefl-text-light) !important;
  padding: 8px 0 !important;
}

.toefl-diagnosis .toefl-calendar__weekday--sun {
  color: var(--toefl-danger) !important;
}

.toefl-diagnosis .toefl-calendar__weekday--sat {
  color: var(--toefl-primary) !important;
}

.toefl-diagnosis .toefl-calendar__days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
}

.toefl-diagnosis .toefl-calendar__day {
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--toefl-text) !important;
  background: transparent !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  min-height: 36px !important;
}

.toefl-diagnosis .toefl-calendar__day:hover:not(:disabled):not(.toefl-calendar__day--selected) {
  background: var(--toefl-border-light) !important;
}

.toefl-diagnosis .toefl-calendar__day--today {
  background: var(--toefl-primary-light) !important;
  color: var(--toefl-primary) !important;
}

.toefl-diagnosis .toefl-calendar__day--selected {
  background: var(--toefl-primary) !important;
  color: #ffffff !important;
}

.toefl-diagnosis .toefl-calendar__day--selected:hover {
  background: var(--toefl-primary-hover) !important;
}

.toefl-diagnosis .toefl-calendar__day--disabled {
  color: var(--toefl-text-muted) !important;
  cursor: not-allowed !important;
}

.toefl-diagnosis .toefl-calendar__day--sun {
  color: var(--toefl-danger) !important;
}

.toefl-diagnosis .toefl-calendar__day--sat {
  color: var(--toefl-primary) !important;
}

.toefl-diagnosis .toefl-calendar__day--disabled.toefl-calendar__day--sun,
.toefl-diagnosis .toefl-calendar__day--disabled.toefl-calendar__day--sat {
  color: var(--toefl-text-muted) !important;
}

.toefl-diagnosis .toefl-calendar__footer {
  margin-top: 12px !important;
  text-align: center !important;
}

.toefl-diagnosis .toefl-calendar__selected {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--toefl-border-light) !important;
  text-align: center !important;
  font-size: 14px !important;
  color: var(--toefl-text-light) !important;
}

.toefl-diagnosis .toefl-calendar__selected span {
  font-weight: 600 !important;
  color: var(--toefl-text) !important;
}

/* ========================================
   12. 警告
   ======================================== */
.toefl-diagnosis .toefl-warning {
  display: flex !important;
  gap: 12px !important;
  padding: 12px !important;
  background: var(--toefl-warning-light) !important;
  border: 1px solid #fcd34d !important;
  border-radius: var(--toefl-radius) !important;
  margin-top: 12px !important;
}

.toefl-diagnosis .toefl-warning__icon {
  color: var(--toefl-warning) !important;
  flex-shrink: 0 !important;
}

.toefl-diagnosis .toefl-warning__content p {
  font-size: 13px !important;
  color: #92400e !important;
  margin: 0 0 8px !important;
}

/* ========================================
   13. ローディング
   ======================================== */
.toefl-diagnosis .toefl-loading {
  text-align: center !important;
  padding: 64px 0 !important;
}

.toefl-diagnosis .toefl-loading__spinner {
  width: 48px !important;
  height: 48px !important;
  border: 4px solid var(--toefl-primary) !important;
  border-top-color: transparent !important;
  border-radius: 50% !important;
  margin: 0 auto 16px !important;
  animation: toefl-spin 1s linear infinite !important;
}

.toefl-diagnosis .toefl-loading__text {
  font-size: 15px !important;
  color: var(--toefl-text-light) !important;
  margin: 0 !important;
}

@keyframes toefl-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   14. 結果画面
   ======================================== */
.toefl-diagnosis .toefl-result {
  padding: 8px 0 !important;
}

.toefl-diagnosis .toefl-result__header {
  text-align: center !important;
  margin-bottom: 24px !important;
}

.toefl-diagnosis .toefl-result__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--toefl-text) !important;
  margin: 0 0 8px !important;
  display: block !important;
}

.toefl-diagnosis .toefl-result__summary {
  font-size: 15px !important;
  color: var(--toefl-text-light) !important;
  margin: 0 !important;
}

.toefl-diagnosis .toefl-result__summary strong {
  color: var(--toefl-primary) !important;
  font-weight: 700 !important;
}

/* Summary Card */
.toefl-diagnosis .toefl-result__summary-card {
  background: var(--toefl-bg-white) !important;
  border-radius: var(--toefl-radius-lg) !important;
  box-shadow: var(--toefl-shadow) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.toefl-diagnosis .toefl-result__stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.toefl-diagnosis .toefl-result__stat {
  text-align: center !important;
  padding: 12px !important;
  background: var(--toefl-border-light) !important;
  border-radius: var(--toefl-radius) !important;
}

.toefl-diagnosis .toefl-result__stat-label {
  font-size: 12px !important;
  color: var(--toefl-text-light) !important;
  margin-bottom: 4px !important;
}

.toefl-diagnosis .toefl-result__stat-value {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--toefl-text) !important;
}

/* Ratio Bar */
.toefl-diagnosis .toefl-result__ratio {
  margin-bottom: 20px !important;
  background: var(--toefl-border-light) !important;
  border-radius: var(--toefl-radius) !important;
  padding: 16px !important;
}

.toefl-diagnosis .toefl-result__ratio-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--toefl-text-light) !important;
  margin-bottom: 12px !important;
  text-align: center !important;
}

.toefl-diagnosis .toefl-result__ratio-bar {
  display: flex !important;
  height: 48px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) inset !important;
}

.toefl-diagnosis .toefl-result__ratio-base,
.toefl-diagnosis .toefl-result__ratio-perf {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.toefl-diagnosis .toefl-result__ratio-base {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.toefl-diagnosis .toefl-result__ratio-perf {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
}

.toefl-diagnosis .toefl-result__ratio-base[data-narrow="true"],
.toefl-diagnosis .toefl-result__ratio-perf[data-narrow="true"] {
  font-size: 11px !important;
}

.toefl-diagnosis .toefl-result__ratio-base[data-very-narrow="true"],
.toefl-diagnosis .toefl-result__ratio-perf[data-very-narrow="true"] {
  font-size: 9px !important;
  letter-spacing: -0.5px !important;
}

.toefl-diagnosis .toefl-result__ratio-legend {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.toefl-diagnosis .toefl-result__ratio-legend span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--toefl-text) !important;
  font-weight: 500 !important;
}

.toefl-diagnosis .toefl-result__ratio-legend span::before {
  content: "" !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 3px !important;
}

.toefl-diagnosis .toefl-result__ratio-legend span:first-child::before {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.toefl-diagnosis .toefl-result__ratio-legend span:last-child::before {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
}

/* Risk Level */
.toefl-diagnosis .toefl-result__risk {
  padding: 12px !important;
  border-radius: var(--toefl-radius) !important;
}

.toefl-diagnosis .toefl-result__risk--low {
  background: var(--toefl-success-light) !important;
}

.toefl-diagnosis .toefl-result__risk--medium {
  background: var(--toefl-warning-light) !important;
}

.toefl-diagnosis .toefl-result__risk--high {
  background: var(--toefl-danger-light) !important;
}

.toefl-diagnosis .toefl-result__risk-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

.toefl-diagnosis .toefl-result__risk--low .toefl-result__risk-label {
  color: var(--toefl-success) !important;
}

.toefl-diagnosis .toefl-result__risk--medium .toefl-result__risk-label {
  color: var(--toefl-warning) !important;
}

.toefl-diagnosis .toefl-result__risk--high .toefl-result__risk-label {
  color: var(--toefl-danger) !important;
}

.toefl-diagnosis .toefl-result__risk-message {
  font-size: 13px !important;
  color: var(--toefl-text) !important;
  margin: 0 !important;
}

/* Schedule */
.toefl-diagnosis .toefl-result__schedule {
  background: var(--toefl-bg-white) !important;
  border-radius: var(--toefl-radius-lg) !important;
  box-shadow: var(--toefl-shadow) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.toefl-diagnosis .toefl-result__section-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--toefl-text) !important;
  margin: 0 0 16px !important;
  display: block !important;
}

.toefl-diagnosis .toefl-result__section-title--center {
  text-align: center !important;
}

/* Phases */
.toefl-diagnosis .toefl-phases {
  margin-bottom: 16px !important;
}

.toefl-diagnosis .toefl-phase {
  position: relative !important;
  padding-left: 28px !important;
  padding-bottom: 20px !important;
  border-left: 3px solid var(--toefl-primary) !important;
  margin-left: 7px !important;
}

.toefl-diagnosis .toefl-phase:last-child {
  border-left-color: var(--toefl-primary) !important;
  padding-bottom: 0 !important;
}

.toefl-diagnosis .toefl-phase__dot {
  position: absolute !important;
  left: -10px !important;
  top: 0 !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--toefl-primary) !important;
  border-radius: 50% !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 0 2px var(--toefl-primary) !important;
}

.toefl-diagnosis .toefl-phase__header {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--toefl-primary) !important;
  margin-bottom: 4px !important;
}

.toefl-diagnosis .toefl-phase__focus {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--toefl-text) !important;
  margin-bottom: 8px !important;
  display: inline !important;
  background: linear-gradient(transparent 60%, #fef08a 60%) !important;
  padding: 0 4px !important;
  margin-left: -4px !important;
}

.toefl-diagnosis .toefl-phase__tasks {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.toefl-diagnosis .toefl-phase__tasks li {
  font-size: 13px !important;
  color: var(--toefl-text-light) !important;
  padding-left: 16px !important;
  position: relative !important;
  margin-bottom: 4px !important;
}

.toefl-diagnosis .toefl-phase__tasks li::before {
  content: "\2022" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--toefl-text-muted) !important;
}

/* Goal Phase */
.toefl-diagnosis .toefl-phase--goal {
  border-left-color: transparent !important;
  padding-bottom: 0 !important;
  margin-top: 4px !important;
}

.toefl-diagnosis .toefl-phase__dot--goal {
  width: 22px !important;
  height: 22px !important;
  left: -12px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 0 0 3px #d1fae5, 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}

.toefl-diagnosis .toefl-phase__header--goal {
  color: #059669 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.toefl-diagnosis .toefl-phase__goal-icon {
  font-size: 16px !important;
}

.toefl-diagnosis .toefl-phase--goal .toefl-phase__focus {
  color: var(--toefl-success) !important;
  font-weight: 600 !important;
}

/* Exam Date */
.toefl-diagnosis .toefl-result__exam-date {
  background: var(--toefl-primary-light) !important;
  border-radius: var(--toefl-radius) !important;
  padding: 12px !important;
  margin-bottom: 16px !important;
}

.toefl-diagnosis .toefl-result__exam-date-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--toefl-primary-hover) !important;
  margin-bottom: 4px !important;
}

.toefl-diagnosis .toefl-result__exam-date-note {
  font-size: 12px !important;
  color: var(--toefl-primary) !important;
  margin: 0 !important;
}

/* Menus */
.toefl-diagnosis .toefl-result__menus {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

@media (max-width: 480px) {
  .toefl-diagnosis .toefl-result__menus {
    grid-template-columns: 1fr !important;
  }
}

.toefl-diagnosis .toefl-result__menu {
  background: var(--toefl-border-light) !important;
  border-radius: var(--toefl-radius) !important;
  padding: 12px !important;
}

.toefl-diagnosis .toefl-result__menu-label {
  font-size: 12px !important;
  color: var(--toefl-text-light) !important;
  margin-bottom: 4px !important;
}

.toefl-diagnosis .toefl-result__menu-content {
  font-size: 13px !important;
  color: var(--toefl-text) !important;
}

.toefl-diagnosis .toefl-result__note {
  font-size: 12px !important;
  color: var(--toefl-text-light) !important;
  margin: 0 !important;
}

/* ========================================
   15. サービスカード
   ======================================== */
.toefl-diagnosis .toefl-result__services {
  margin-bottom: 20px !important;
}

.toefl-diagnosis .toefl-services {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.toefl-diagnosis .toefl-service {
  position: relative !important;
  border-radius: var(--toefl-radius-lg) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.toefl-diagnosis .toefl-service--first {
  background: linear-gradient(135deg, var(--toefl-primary-light), #e0e7ff) !important;
  border: 2px solid #93c5fd !important;
  box-shadow: var(--toefl-shadow-lg) !important;
}

.toefl-diagnosis .toefl-service--second {
  background: var(--toefl-bg-white) !important;
  border: 1px solid var(--toefl-border) !important;
  box-shadow: var(--toefl-shadow) !important;
}

/* First Place Badge */
.toefl-diagnosis .toefl-service__badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 16px !important;
  border-bottom-left-radius: var(--toefl-radius) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important;
}

.toefl-diagnosis .toefl-service__badge svg {
  width: 14px !important;
  height: 14px !important;
}

.toefl-diagnosis .toefl-service__content {
  padding: 20px !important;
}

/* Service Header */
.toefl-diagnosis .toefl-service__header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.toefl-diagnosis .toefl-service__logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--toefl-radius) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.toefl-diagnosis .toefl-service--first .toefl-service__logo {
  background: #ffffff !important;
  box-shadow: var(--toefl-shadow) !important;
}

.toefl-diagnosis .toefl-service--second .toefl-service__logo {
  background: var(--toefl-border-light) !important;
}

.toefl-diagnosis .toefl-service__logo img {
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
}

.toefl-diagnosis .toefl-service__logo-placeholder {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--toefl-text-muted) !important;
}

.toefl-diagnosis .toefl-service__info {
  flex: 1 !important;
  min-width: 0 !important;
}

.toefl-diagnosis .toefl-service__name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--toefl-text) !important;
  margin: 0 0 4px !important;
  display: block !important;
}

.toefl-diagnosis .toefl-service--first .toefl-service__name {
  color: #1e3a8a !important;
}

.toefl-diagnosis .toefl-service__plan {
  font-size: 13px !important;
  color: var(--toefl-text-light) !important;
  margin: 0 !important;
}

/* Reasons */
.toefl-diagnosis .toefl-service__reasons {
  border-radius: var(--toefl-radius) !important;
  padding: 14px !important;
  margin-bottom: 16px !important;
}

.toefl-diagnosis .toefl-service--first .toefl-service__reasons {
  background: rgba(255, 255, 255, 0.7) !important;
}

.toefl-diagnosis .toefl-service--second .toefl-service__reasons {
  background: var(--toefl-border-light) !important;
}

.toefl-diagnosis .toefl-service__reasons-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--toefl-text) !important;
  margin: 0 0 10px !important;
}

.toefl-diagnosis .toefl-service__reasons-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.toefl-diagnosis .toefl-service__reasons-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--toefl-text) !important;
  margin-bottom: 8px !important;
  padding-left: 0 !important;
}

.toefl-diagnosis .toefl-service__reasons-list li:last-child {
  margin-bottom: 0 !important;
}

.toefl-diagnosis .toefl-service__reasons-list li::before {
  display: none !important;
}

.toefl-diagnosis .toefl-service__reasons-list .toefl-check {
  margin-top: 2px !important;
}

.toefl-diagnosis .toefl-service--first .toefl-service__reasons-list .toefl-check {
  color: var(--toefl-primary) !important;
}

.toefl-diagnosis .toefl-service--second .toefl-service__reasons-list .toefl-check {
  color: var(--toefl-text-muted) !important;
}

/* CTA Button */
.toefl-diagnosis .toefl-service__cta {
  display: block !important;
  width: 100% !important;
  padding: 18px 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  border-radius: var(--toefl-radius) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.toefl-diagnosis .toefl-service--first .toefl-service__cta {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #2563eb 100%) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 15px rgba(37, 99, 235, 0.4),
    0 0 0 0 rgba(37, 99, 235, 0.4) !important;
  animation: toefl-cta-gradient 3s ease infinite, toefl-cta-pulse 2s ease-in-out infinite !important;
}

.toefl-diagnosis .toefl-service--first .toefl-service__cta::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  ) !important;
  animation: toefl-cta-shine 2.5s ease-in-out infinite !important;
}

.toefl-diagnosis .toefl-service--first .toefl-service__cta:hover {
  box-shadow:
    0 8px 30px rgba(37, 99, 235, 0.5),
    0 0 20px rgba(124, 58, 237, 0.3) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

.toefl-diagnosis .toefl-service--first .toefl-service__cta:active {
  transform: translateY(-1px) scale(0.99) !important;
}

.toefl-diagnosis .toefl-service--second .toefl-service__cta {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.toefl-diagnosis .toefl-service--second .toefl-service__cta:hover {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-2px) !important;
}

/* ========================================
   16. CTAボタンアニメーション
   ======================================== */
@keyframes toefl-cta-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes toefl-cta-pulse {
  0%, 100% {
    box-shadow:
      0 4px 15px rgba(37, 99, 235, 0.4),
      0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  50% {
    box-shadow:
      0 6px 25px rgba(37, 99, 235, 0.5),
      0 0 0 8px rgba(37, 99, 235, 0);
  }
}

@keyframes toefl-cta-shine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

/* ========================================
   17. シャインアニメーション（1位カード）
   ======================================== */
@keyframes toefl-shine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

.toefl-diagnosis .toefl-service--first::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: var(--toefl-radius-lg) !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(59, 130, 246, 0.3) 25%,
    rgba(147, 197, 253, 0.6) 50%,
    rgba(59, 130, 246, 0.3) 75%,
    transparent 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: toefl-shine 3s ease-in-out infinite !important;
  z-index: -1 !important;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .toefl-diagnosis .toefl-service--first::before {
    animation: none !important;
    background: rgba(59, 130, 246, 0.2) !important;
  }

  .toefl-diagnosis .toefl-service--first .toefl-service__cta {
    animation: none !important;
  }

  .toefl-diagnosis .toefl-loading__spinner {
    animation: none !important;
  }
}

/* ========================================
   17. 免責事項 & やり直し
   ======================================== */
.toefl-diagnosis .toefl-result__disclaimer {
  text-align: left !important;
  margin-bottom: 16px !important;
}

.toefl-diagnosis .toefl-result__disclaimer p {
  font-size: 12px !important;
  color: var(--toefl-text-light) !important;
  margin: 0 0 4px !important;
}

.toefl-diagnosis .toefl-result__restart {
  text-align: center !important;
}

.toefl-diagnosis .toefl-result__restart .toefl-btn--text {
  font-size: 13px !important;
  color: var(--toefl-text-light) !important;
  text-decoration: underline !important;
}

/* ========================================
   18. レスポンシブ調整
   ======================================== */
@media (max-width: 480px) {
  .toefl-diagnosis {
    padding: 12px !important;
    margin: 16px auto !important;
  }

  .toefl-diagnosis .toefl-intro__title {
    font-size: 20px !important;
  }

  .toefl-diagnosis .toefl-step__title {
    font-size: 18px !important;
  }

  .toefl-diagnosis .toefl-options--horizontal {
    flex-direction: column !important;
  }

  .toefl-diagnosis .toefl-options--grid {
    grid-template-columns: 1fr !important;
  }

  .toefl-diagnosis .toefl-result__stats {
    grid-template-columns: 1fr !important;
  }

  .toefl-diagnosis .toefl-service__header {
    flex-direction: column !important;
    text-align: center !important;
  }

  .toefl-diagnosis .toefl-service__badge {
    position: static !important;
    display: inline-flex !important;
    margin-bottom: 12px !important;
    border-radius: 20px !important;
  }
}

/* ========================================
   19. 診断ツールラッパー（記事内配置用）
   ======================================== */
.toefl-diagnosis-wrapper {
  margin: 48px 0 !important;
  padding: 0 !important;
}

/* 記事内のセクション区切り */
.toefl-diagnosis-wrapper::before {
  content: "" !important;
  display: block !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--toefl-border), transparent) !important;
  margin-bottom: 48px !important;
}

.toefl-diagnosis-wrapper::after {
  content: "" !important;
  display: block !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--toefl-border), transparent) !important;
  margin-top: 48px !important;
}

/* ========================================
   20. インラインCTA（Position 2用）
   ======================================== */
.toefl-diagnosis-inline-cta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  max-width: 600px !important;
  margin: 32px auto !important;
  padding: 20px 24px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-radius: var(--toefl-radius) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important;
  font-family: var(--toefl-font) !important;
  box-sizing: border-box !important;
}

.toefl-diagnosis-inline-cta__icon {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--toefl-primary) !important;
  border-radius: 50% !important;
  color: white !important;
  font-size: 24px !important;
}

.toefl-diagnosis-inline-cta__icon .material-icons {
  font-size: 24px !important;
  color: white !important;
}

.toefl-diagnosis-inline-cta__content {
  flex: 1 !important;
  min-width: 0 !important;
}

.toefl-diagnosis-inline-cta__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--toefl-text) !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.4 !important;
}

.toefl-diagnosis-inline-cta__desc {
  font-size: 13px !important;
  color: var(--toefl-text-light) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ========================================
   21. スケジュールCTA（Position 3用）
   ======================================== */
.toefl-diagnosis-schedule-cta {
  max-width: 600px !important;
  margin: 40px auto !important;
  padding: 28px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%) !important;
  border-radius: var(--toefl-radius-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.12),
    0 12px 24px -8px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  font-family: var(--toefl-font) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.toefl-diagnosis-schedule-cta__header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.toefl-diagnosis-schedule-cta__icon {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--toefl-primary) 0%, var(--toefl-primary-hover) 100%) !important;
  border-radius: 16px !important;
  color: white !important;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.3) !important;
}

.toefl-diagnosis-schedule-cta__icon .material-icons {
  font-size: 28px !important;
  color: white !important;
}

.toefl-diagnosis-schedule-cta__title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--toefl-text) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.toefl-diagnosis-schedule-cta__desc {
  font-size: 14px !important;
  color: var(--toefl-text-light) !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.6 !important;
}

.toefl-diagnosis-schedule-cta__features {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
  list-style: none !important;
  padding: 0 !important;
}

.toefl-diagnosis-schedule-cta__feature {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: var(--toefl-bg-white) !important;
  border-radius: 24px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--toefl-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid var(--toefl-border-light) !important;
}

.toefl-diagnosis-schedule-cta__feature::before {
  content: "✓" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--toefl-success-light) !important;
  color: var(--toefl-success) !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ========================================
   22. ボタンモディファイア
   ======================================== */
/* インラインボタン（CTA内用） */
.toefl-btn--inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, var(--toefl-primary) 0%, var(--toefl-primary-hover) 100%) !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--toefl-font) !important;
  border-radius: 24px !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.toefl-btn--inline:hover {
  background: linear-gradient(135deg, var(--toefl-primary-hover) 0%, #1e40af 100%) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
  transform: translateY(-1px) !important;
  color: white !important;
  text-decoration: none !important;
}

.toefl-btn--inline .material-icons {
  font-size: 18px !important;
  color: white !important;
}

/* ブロックボタン（フル幅用） */
.toefl-btn--block {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  padding: 16px 32px !important;
  background: linear-gradient(135deg, var(--toefl-primary) 0%, var(--toefl-primary-hover) 100%) !important;
  color: white !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: var(--toefl-font) !important;
  border-radius: 30px !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow:
    0 8px 20px rgba(37, 99, 235, 0.3),
    0 4px 8px rgba(37, 99, 235, 0.2) !important;
  transition: all 0.3s ease !important;
}

.toefl-btn--block:hover {
  background: linear-gradient(135deg, var(--toefl-primary-hover) 0%, #1e40af 100%) !important;
  box-shadow:
    0 12px 28px rgba(37, 99, 235, 0.4),
    0 6px 12px rgba(37, 99, 235, 0.25) !important;
  transform: translateY(-2px) !important;
  color: white !important;
  text-decoration: none !important;
}

.toefl-btn--block .material-icons {
  font-size: 20px !important;
  color: white !important;
}

/* ========================================
   23. JINテーマ干渉防止（CTAコンポーネント用）
   ======================================== */
.cps-post-main .toefl-diagnosis-inline-cta,
.cps-post-main .toefl-diagnosis-schedule-cta,
article .toefl-diagnosis-inline-cta,
article .toefl-diagnosis-schedule-cta,
.entry-content .toefl-diagnosis-inline-cta,
.entry-content .toefl-diagnosis-schedule-cta {
  box-sizing: border-box !important;
}

.cps-post-main .toefl-diagnosis-inline-cta *,
.cps-post-main .toefl-diagnosis-schedule-cta *,
article .toefl-diagnosis-inline-cta *,
article .toefl-diagnosis-schedule-cta *,
.entry-content .toefl-diagnosis-inline-cta *,
.entry-content .toefl-diagnosis-schedule-cta * {
  box-sizing: border-box !important;
}

.cps-post-main .toefl-btn--inline,
.cps-post-main .toefl-btn--block,
article .toefl-btn--inline,
article .toefl-btn--block,
.entry-content .toefl-btn--inline,
.entry-content .toefl-btn--block {
  border: none !important;
  text-decoration: none !important;
}

.cps-post-main .toefl-btn--inline:hover,
.cps-post-main .toefl-btn--block:hover,
article .toefl-btn--inline:hover,
article .toefl-btn--block:hover,
.entry-content .toefl-btn--inline:hover,
.entry-content .toefl-btn--block:hover {
  border-bottom: none !important;
  text-decoration: none !important;
}

/* ========================================
   24. レスポンシブ対応（CTA用）
   ======================================== */
@media (max-width: 640px) {
  .toefl-diagnosis-inline-cta {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px !important;
  }

  .toefl-diagnosis-inline-cta__content {
    text-align: center !important;
  }

  .toefl-diagnosis-schedule-cta {
    padding: 24px 20px !important;
    margin: 32px 16px !important;
  }

  .toefl-diagnosis-schedule-cta__title {
    font-size: 18px !important;
  }

  .toefl-diagnosis-schedule-cta__features {
    flex-direction: column !important;
    align-items: center !important;
  }

  .toefl-btn--block {
    max-width: 100% !important;
    padding: 14px 24px !important;
  }
}