:where(.romptn-admin, .romptn-popup-root) {
  /* base.css の --romptn-cta-* を --romptn-* にマッピング（後方互換） */
  --romptn-font-family: var(--romptn-cta-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --romptn-font-base: var(--romptn-cta-font-base, 16px);
  --romptn-font-scale: 1;
  --romptn-font-xxs: calc((var(--romptn-font-base) * var(--romptn-font-scale)) - 3px);
  --romptn-font-xs: calc((var(--romptn-font-base) * var(--romptn-font-scale)) - 2px);
  --romptn-font-sm: calc((var(--romptn-font-base) * var(--romptn-font-scale)) - 1px);
  --romptn-font-md: calc(var(--romptn-font-base) * var(--romptn-font-scale));
  --romptn-font-lg: calc((var(--romptn-font-base) * var(--romptn-font-scale)) + 2px);
  --romptn-font-xl: calc((var(--romptn-font-base) * var(--romptn-font-scale)) + 4px);
  --romptn-font-2xl: calc((var(--romptn-font-base) * var(--romptn-font-scale)) + 14px);
  --romptn-font-close: calc((var(--romptn-font-base) * var(--romptn-font-scale)) + 12px);

  --romptn-space-base: 8px;
  --romptn-space-1: 4px;
  --romptn-space-2: 8px;
  --romptn-space-3: 12px;
  --romptn-space-4: 16px;
  --romptn-space-5: 20px;
  --romptn-space-6: 24px;

  --romptn-color-text: var(--romptn-cta-color-text);
  --romptn-color-text-muted: var(--romptn-cta-color-text-muted);
  --romptn-color-text-subtle: var(--romptn-cta-color-text-subtle);
  --romptn-color-surface: var(--romptn-cta-color-surface);
  --romptn-color-surface-alt: var(--romptn-cta-color-surface-alt);
  --romptn-color-border: var(--romptn-cta-color-border);
  --romptn-color-accent: var(--romptn-cta-color-primary);
  --romptn-color-accent-dark: var(--romptn-cta-color-primary-dark);
  --romptn-color-on-accent: var(--romptn-cta-color-on-accent);
  --romptn-color-overlay: var(--romptn-cta-color-overlay);
  --romptn-color-accent-focus: rgba(11, 95, 255, 0.15);

  --romptn-radius-card: var(--romptn-cta-radius-card);
  --romptn-radius-input: var(--romptn-cta-radius-input);
  --romptn-radius-pill: var(--romptn-cta-radius-pill);
  --romptn-radius-modal: var(--romptn-cta-radius-modal);
  --romptn-radius-panel: 10px;
  --romptn-radius-preview: 14px;

  --romptn-shadow-card: var(--romptn-cta-shadow-card);
  --romptn-shadow-modal: var(--romptn-cta-shadow-modal);

  /* mania 変数エイリアス */
  --mania-color-surface: var(--romptn-cta-color-surface);
  --mania-color-text: var(--romptn-cta-color-text);
  --mania-color-text-muted: var(--romptn-cta-color-text-muted);
  --mania-color-accent: var(--romptn-cta-color-primary);
  --mania-color-accent-dark: var(--romptn-cta-color-primary-dark);
}

.romptn-popup-root {
  --romptn-color-text: #111111;
  --romptn-color-text-muted: #666666;
  --romptn-color-text-subtle: #444444;
  --romptn-font-base: 16px;
  --romptn-font-scale: 1;
  font-family: var(--romptn-font-family);
  font-size: var(--romptn-font-md);
  color: var(--romptn-color-text);
}

.romptn-popup-overlay {
  position: fixed;
  inset: 0;
  background: var(--romptn-color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}

.romptn-popup-overlay.is-hidden {
  display: none;
}

@media (max-width: 480px) {
  .romptn-popup-root {
    --romptn-font-scale: 0.9;
  }
  .romptn-popup-overlay {
    padding: 18px;
  }
}