/**
 * 日本初・世界初表示 フィージビリティ診断 - ウィザードスタイル v1.0.0
 * 帝国ナンバーワンリサーチ組合
 *
 * No.1表示フィージビリティ診断 v1.5.0（審査書類デザイン）の wizard.css を、
 * 接頭辞 fsd → ffd に置き換えて引き継ぎ、末尾に「初」表示固有の部品を追加している。
 * 同じページに両方を置いてもクラス名・キーフレーム名・SVGのIDは衝突しない。
 */

/* =========================================================
   デザイントークン（.ffd-wizard にスコープ）
   --ffd-primary / --ffd-accent はショートコードで上書き可
   ========================================================= */
.ffd-wizard,
.ffd-wizard-container {
    /* ブランド（上書き可） */
    --ffd-primary: #2563eb;
    --ffd-primary-hover: #1d4ed8;
    --ffd-accent: #10b981;

    /* ブランド派生トーン（primary/accent の上書きに追従） */
    --ffd-primary-050: color-mix(in srgb, var(--ffd-primary) 6%, #ffffff);
    --ffd-primary-075: color-mix(in srgb, var(--ffd-primary) 9%, #ffffff);
    --ffd-primary-100: color-mix(in srgb, var(--ffd-primary) 13%, #ffffff);
    --ffd-primary-200: color-mix(in srgb, var(--ffd-primary) 24%, #ffffff);
    --ffd-primary-ring: color-mix(in srgb, var(--ffd-primary) 22%, transparent);
    --ffd-accent-050: color-mix(in srgb, var(--ffd-accent) 8%, #ffffff);
    --ffd-accent-100: color-mix(in srgb, var(--ffd-accent) 15%, #ffffff);

    /* インク / ニュートラル */
    --ffd-ink: #101a2e;
    --ffd-text: #1e2a3d;
    --ffd-text-light: #5b6a85;
    --ffd-text-muted: #95a1b6;

    /* サーフェス */
    --ffd-bg: #ffffff;
    --ffd-surface: #ffffff;
    --ffd-surface-2: #f5f8fd;
    --ffd-surface-3: #eaf0f9;
    --ffd-border: #e7ecf4;
    --ffd-border-strong: #d6dfeb;

    /* プレミアムアクセント（No.1 / 限定要素にごく控えめに） */
    --ffd-gold: #b08534;
    --ffd-gold-soft: #f6efdc;

    /* セマンティック */
    --ffd-error: #dc2626;
    --ffd-error-bg: #fef3f2;
    --ffd-success: #0f9d6b;
    --ffd-warning: #c77a0a;
    --ffd-line-green: #06C755;

    /* 角丸 */
    --ffd-radius: 14px;
    --ffd-radius-sm: 10px;
    --ffd-radius-lg: 20px;
    --ffd-radius-pill: 999px;

    /* シャドウ（多層・ソフト） */
    --ffd-shadow-xs: 0 1px 2px rgba(16, 26, 46, 0.05);
    --ffd-shadow-sm: 0 1px 2px rgba(16, 26, 46, 0.06), 0 2px 6px -2px rgba(16, 26, 46, 0.06);
    --ffd-shadow-md: 0 4px 14px -4px rgba(16, 26, 46, 0.10), 0 2px 6px -2px rgba(16, 26, 46, 0.06);
    --ffd-shadow-lg: 0 24px 50px -16px rgba(16, 26, 46, 0.20), 0 10px 22px -12px rgba(16, 26, 46, 0.10);

    /* モーション */
    --ffd-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
    --ffd-dur: 0.24s;

    /* タイポグラフィ */
    --ffd-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Meiryo", system-ui,
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[data-theme="dark"].ffd-wizard {
    --ffd-ink: #f4f7fc;
    --ffd-text: #e6ebf4;
    --ffd-text-light: #a3afc4;
    --ffd-text-muted: #7c889e;
    --ffd-bg: #131c2c;
    --ffd-surface: #1a2436;
    --ffd-surface-2: #1e293c;
    --ffd-surface-3: #243047;
    --ffd-border: #2c3850;
    --ffd-border-strong: #3a4863;
    --ffd-gold-soft: #2a2519;
    --ffd-error-bg: #2a1715;
}

/* =========================================================
   コンテナ
   ========================================================= */
.ffd-wizard-container {
    width: 100%;
}

.ffd-wizard {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 36px 40px 32px;
    background: var(--ffd-bg);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius-lg);
    box-shadow: var(--ffd-shadow-lg);
    font-family: var(--ffd-font);
    color: var(--ffd-text);
    line-height: 1.7;
    min-height: 500px;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "palt" 1;
    text-rendering: optimizeLegibility;
}

/* 上端のさりげないブランドアクセント */
.ffd-wizard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--ffd-primary) 0%,
        color-mix(in srgb, var(--ffd-primary) 60%, var(--ffd-accent)) 55%,
        var(--ffd-accent) 100%);
    z-index: 2;
}

/* 上部のごく淡い陰影で奥行きを */
.ffd-wizard::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 220px;
    background: radial-gradient(120% 120% at 50% -40%,
        var(--ffd-primary-050) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.ffd-wizard > * {
    position: relative;
    z-index: 1;
}

.ffd-step-container {
    position: relative;
}

.ffd-step {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    padding: 4px 0 0;
}

/* =========================================================
   プログレスインジケーター
   ========================================================= */
.ffd-progress {
    margin: 0 0 36px;
    padding-top: 6px;
}

.ffd-progress-bar {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 6px;
}

.ffd-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.ffd-progress-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ffd-bg);
    border: 1.5px solid var(--ffd-border-strong);
    color: var(--ffd-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    transition: transform var(--ffd-dur) var(--ffd-ease),
        background var(--ffd-dur) var(--ffd-ease),
        border-color var(--ffd-dur) var(--ffd-ease),
        color var(--ffd-dur) var(--ffd-ease),
        box-shadow var(--ffd-dur) var(--ffd-ease);
}

.ffd-progress-step.active .ffd-progress-circle {
    background: var(--ffd-primary);
    border-color: var(--ffd-primary);
    color: #fff;
    box-shadow: 0 0 0 4px var(--ffd-primary-ring);
    transform: scale(1.06);
}

.ffd-progress-step.completed .ffd-progress-circle {
    background: var(--ffd-accent);
    border-color: var(--ffd-accent);
    color: #fff;
    box-shadow: none;
    transform: scale(1);
}

.ffd-progress-label {
    font-size: 11px;
    color: var(--ffd-text-muted);
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: color var(--ffd-dur) var(--ffd-ease);
}

.ffd-progress-step.active .ffd-progress-label {
    color: var(--ffd-primary);
    font-weight: 700;
}

.ffd-progress-step.completed .ffd-progress-label {
    color: var(--ffd-text-light);
    font-weight: 500;
}

.ffd-progress-line {
    height: 2px;
    background: var(--ffd-border);
    border-radius: 2px;
    margin: -25px 17px 16px;
    position: relative;
    z-index: 0;
}

.ffd-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ffd-accent), var(--ffd-primary));
    border-radius: 2px;
    transition: width 0.55s var(--ffd-ease);
}

/* =========================================================
   見出し
   ========================================================= */
.ffd-step-title {
    font-size: 25px;
    font-weight: 700;
    color: var(--ffd-ink);
    margin: 0 0 10px;
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.ffd-step-description {
    color: var(--ffd-text-light);
    text-align: center;
    margin: 0 auto 30px;
    font-size: 14.5px;
    line-height: 1.75;
    max-width: 30em;
}

/* 入場アニメーション */
.ffd-fade-in {
    animation: ffdFadeIn 0.45s var(--ffd-ease) both;
}

@keyframes ffdFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   成功メッセージ
   ========================================================= */
.ffd-success-message {
    background: var(--ffd-accent-050);
    border: 1px solid color-mix(in srgb, var(--ffd-accent) 30%, #fff);
    border-radius: var(--ffd-radius);
    padding: 26px 24px;
    margin-bottom: 24px;
    text-align: center;
}

.ffd-success-icon {
    font-size: 44px;
    margin-bottom: 10px;
    line-height: 1;
}

.ffd-success-message h3 {
    color: var(--ffd-success);
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 6px;
}

.ffd-success-message p {
    color: var(--ffd-text-light);
    font-size: 14px;
    margin: 0;
    line-height: 1.7;
}

/* =========================================================
   メール送信通知
   ========================================================= */
.ffd-email-sent-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--ffd-primary-050);
    border: 1px solid var(--ffd-primary-100);
    border-radius: var(--ffd-radius-sm);
    padding: 15px 20px;
    margin-bottom: 24px;
}

.ffd-email-sent-icon {
    font-size: 22px;
    line-height: 1;
}

.ffd-email-sent-notice p {
    margin: 0;
    color: var(--ffd-text);
    font-size: 14px;
}

.ffd-email-sent-notice strong {
    color: var(--ffd-primary);
    font-weight: 700;
}

/* =========================================================
   LINE CTA
   ========================================================= */
.ffd-line-cta {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ffd-line-green) 7%, #fff) 0%,
        color-mix(in srgb, var(--ffd-line-green) 14%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--ffd-line-green) 35%, #fff);
    border-radius: var(--ffd-radius);
    padding: 22px;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ffd-line-cta-large {
    padding: 28px;
}

.ffd-line-cta-content {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    width: 100%;
}

.ffd-line-cta-icon {
    font-size: 34px;
    flex-shrink: 0;
    line-height: 1;
}

.ffd-line-cta-text h4 {
    margin: 0 0 4px;
    color: var(--ffd-ink);
    font-size: 16px;
    font-weight: 700;
}

.ffd-line-cta-text p {
    margin: 0;
    color: var(--ffd-text-light);
    font-size: 13px;
    line-height: 1.6;
}

.ffd-btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ffd-line-green);
    color: #fff !important;
    padding: 14px 28px;
    border-radius: var(--ffd-radius-sm);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--ffd-line-green) 55%, transparent);
    transition: transform var(--ffd-dur) var(--ffd-ease),
        box-shadow var(--ffd-dur) var(--ffd-ease),
        background var(--ffd-dur) var(--ffd-ease);
}

.ffd-btn-line:hover {
    background: #05b34c;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--ffd-line-green) 70%, transparent);
    color: #fff !important;
}

.ffd-btn-line:active {
    transform: translateY(0);
}

.ffd-btn-line-large {
    padding: 18px 36px;
    font-size: 18px;
}

.ffd-line-icon {
    display: flex;
    align-items: center;
}

.ffd-line-icon svg {
    fill: currentColor;
}

/* =========================================================
   URL入力セクション
   ========================================================= */
.ffd-url-option {
    margin-bottom: 24px;
}

.ffd-url-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: var(--ffd-primary-050);
    border: 1px solid var(--ffd-primary-100);
    border-radius: var(--ffd-radius);
    cursor: pointer;
    color: var(--ffd-primary);
    font-weight: 700;
    font-size: 14.5px;
    font-family: inherit;
    transition: background var(--ffd-dur) var(--ffd-ease),
        border-color var(--ffd-dur) var(--ffd-ease);
}

.ffd-url-toggle:hover {
    background: var(--ffd-primary-075);
    border-color: var(--ffd-primary-200);
}

.ffd-url-toggle.active {
    background: var(--ffd-primary-075);
    border-color: var(--ffd-primary);
}

.ffd-url-toggle-icon {
    font-size: 17px;
    line-height: 1;
}

.ffd-url-toggle-arrow {
    font-size: 11px;
    margin-left: auto;
    opacity: 0.7;
}

.ffd-url-input-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ffd-ease), padding 0.35s var(--ffd-ease),
        margin 0.35s var(--ffd-ease);
    padding: 0 18px;
}

.ffd-url-input-section.show {
    max-height: 220px;
    padding: 18px;
    margin-top: 12px;
    background: var(--ffd-surface-2);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius);
}

.ffd-url-input-section .ffd-field {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.ffd-url-input-section .ffd-input {
    flex: 1;
}

.ffd-btn-fetch {
    padding: 14px 22px;
    background: var(--ffd-primary);
    color: #fff;
    border: none;
    border-radius: var(--ffd-radius-sm);
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--ffd-shadow-sm);
    transition: background var(--ffd-dur) var(--ffd-ease),
        transform var(--ffd-dur) var(--ffd-ease);
}

.ffd-btn-fetch:hover:not(:disabled) {
    background: var(--ffd-primary-hover);
    transform: translateY(-1px);
}

.ffd-btn-fetch:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.ffd-url-hint {
    font-size: 12px;
    color: var(--ffd-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* =========================================================
   区切り線
   ========================================================= */
.ffd-divider {
    display: flex;
    align-items: center;
    margin: 26px 0;
}

.ffd-divider::before,
.ffd-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ffd-border);
}

.ffd-divider span {
    padding: 0 16px;
    font-size: 12.5px;
    color: var(--ffd-text-muted);
    letter-spacing: 0.04em;
}

/* =========================================================
   業種グリッド
   ========================================================= */
.ffd-industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.ffd-industry-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 12px;
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius);
    background: var(--ffd-surface);
    cursor: pointer;
    font-family: inherit;
    box-shadow: var(--ffd-shadow-xs);
    transition: transform var(--ffd-dur) var(--ffd-ease),
        border-color var(--ffd-dur) var(--ffd-ease),
        box-shadow var(--ffd-dur) var(--ffd-ease),
        background var(--ffd-dur) var(--ffd-ease);
}

.ffd-industry-btn:hover {
    border-color: var(--ffd-primary-200);
    background: var(--ffd-bg);
    box-shadow: var(--ffd-shadow-md);
    transform: translateY(-2px);
}

.ffd-industry-btn.selected {
    border-color: var(--ffd-primary);
    background: var(--ffd-primary-050);
    box-shadow: 0 0 0 1px var(--ffd-primary) inset, var(--ffd-shadow-sm);
}

.ffd-industry-icon {
    font-size: 26px;
    margin-bottom: 8px;
    line-height: 1;
}

.ffd-industry-label {
    font-size: 13px;
    color: var(--ffd-text);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ffd-industry-btn.selected .ffd-industry-label {
    color: var(--ffd-primary);
}

/* =========================================================
   フォームフィールド
   ========================================================= */
.ffd-field {
    margin-bottom: 20px;
}

.ffd-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--ffd-ink);
    font-size: 14px;
    letter-spacing: 0.01em;
}

.ffd-field label .required {
    color: var(--ffd-error);
    margin-left: 2px;
}

.ffd-input,
.ffd-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--ffd-border-strong);
    border-radius: var(--ffd-radius-sm);
    font-size: 16px;
    font-family: inherit;
    line-height: 1.6;
    background: var(--ffd-surface);
    color: var(--ffd-text);
    box-sizing: border-box;
    transition: border-color var(--ffd-dur) var(--ffd-ease),
        box-shadow var(--ffd-dur) var(--ffd-ease),
        background var(--ffd-dur) var(--ffd-ease);
}

.ffd-input::placeholder,
.ffd-textarea::placeholder {
    color: var(--ffd-text-muted);
}

.ffd-input:hover,
.ffd-textarea:hover {
    border-color: var(--ffd-primary-200);
}

.ffd-input:focus,
.ffd-textarea:focus {
    outline: none;
    border-color: var(--ffd-primary);
    box-shadow: 0 0 0 4px var(--ffd-primary-ring);
    background: var(--ffd-bg);
}

.ffd-input-large {
    font-size: 18px;
    text-align: center;
    padding: 18px 20px;
    font-weight: 500;
}

.ffd-textarea {
    resize: vertical;
    min-height: 124px;
}

.ffd-input-error {
    border-color: var(--ffd-error) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ffd-error) 14%, transparent) !important;
}

/* フィールドフッター */
.ffd-field-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    min-height: 22px;
}

.ffd-validation-message {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ffd-error);
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--ffd-dur) var(--ffd-ease),
        transform var(--ffd-dur) var(--ffd-ease);
}

.ffd-validation-message.show {
    opacity: 1;
    transform: translateY(0);
}

.ffd-validation-icon {
    font-size: 13px;
    line-height: 1;
}

.ffd-char-count {
    font-size: 13px;
    color: var(--ffd-text-muted);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.ffd-char-count.error { color: var(--ffd-error); font-weight: 700; }
.ffd-char-count.valid { color: var(--ffd-success); }

/* 内部利用（フォーム値ラベル等） */
.ffd-service-count,
.ffd-service-description,
.ffd-no1-phrase,
.ffd-company,
.ffd-email,
.ffd-website-url {
    font-family: inherit;
}

/* =========================================================
   サービス提案ボタン
   ========================================================= */
.ffd-service-suggestions {
    margin-top: 22px;
    padding: 18px;
    background: var(--ffd-surface-2);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius);
}

.ffd-suggestions-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ffd-ink);
    margin-bottom: 12px;
    letter-spacing: 0.01em;
}

.ffd-suggestions-icon {
    font-size: 17px;
    line-height: 1;
}

.ffd-service-suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ffd-service-suggestion-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    background: var(--ffd-surface);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius-sm);
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    color: var(--ffd-text);
    line-height: 1.6;
    transition: border-color var(--ffd-dur) var(--ffd-ease),
        background var(--ffd-dur) var(--ffd-ease),
        transform var(--ffd-dur) var(--ffd-ease);
}

.ffd-service-suggestion-btn:hover {
    border-color: var(--ffd-primary);
    background: var(--ffd-primary-050);
    transform: translateX(2px);
}

.ffd-suggestion-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--ffd-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* =========================================================
   No.1提案チップ
   ========================================================= */
.ffd-suggestions {
    margin: 24px 0;
    padding: 20px;
    background: var(--ffd-surface-2);
    border-radius: var(--ffd-radius);
    border: 1px solid var(--ffd-border);
}

.ffd-suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ffd-suggestion-chip {
    padding: 10px 18px;
    background: var(--ffd-surface);
    border: 1px solid var(--ffd-primary-200);
    border-radius: var(--ffd-radius-pill);
    font-size: 14px;
    color: var(--ffd-primary);
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: background var(--ffd-dur) var(--ffd-ease),
        color var(--ffd-dur) var(--ffd-ease),
        transform var(--ffd-dur) var(--ffd-ease),
        box-shadow var(--ffd-dur) var(--ffd-ease);
}

.ffd-suggestion-chip:hover {
    background: var(--ffd-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px var(--ffd-primary-ring);
}

.ffd-examples {
    margin-top: 22px;
}

.ffd-examples-label {
    font-size: 12.5px;
    color: var(--ffd-text-muted);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.ffd-example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ffd-example-chip {
    padding: 8px 15px;
    background: var(--ffd-surface-2);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius-pill);
    font-size: 13px;
    color: var(--ffd-text-light);
    cursor: pointer;
    font-family: inherit;
    transition: border-color var(--ffd-dur) var(--ffd-ease),
        color var(--ffd-dur) var(--ffd-ease),
        background var(--ffd-dur) var(--ffd-ease);
}

.ffd-example-chip:hover {
    border-color: var(--ffd-primary-200);
    color: var(--ffd-primary);
    background: var(--ffd-primary-050);
}

/* =========================================================
   ボタン
   ========================================================= */
.ffd-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 30px;
}

.ffd-btn {
    padding: 14px 34px;
    border-radius: var(--ffd-radius-sm);
    font-size: 15.5px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--ffd-dur) var(--ffd-ease),
        transform var(--ffd-dur) var(--ffd-ease),
        box-shadow var(--ffd-dur) var(--ffd-ease),
        opacity var(--ffd-dur) var(--ffd-ease);
}

.ffd-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ffd-btn-primary {
    background: var(--ffd-primary);
    color: #fff;
    box-shadow: 0 2px 8px -2px var(--ffd-primary-ring);
}

.ffd-btn-primary:hover:not(:disabled) {
    background: var(--ffd-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px var(--ffd-primary-ring);
}

.ffd-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.ffd-btn-secondary {
    background: var(--ffd-surface);
    color: var(--ffd-text-light);
    border: 1px solid var(--ffd-border-strong);
}

.ffd-btn-secondary:hover:not(:disabled) {
    background: var(--ffd-surface-2);
    color: var(--ffd-text);
    border-color: var(--ffd-text-muted);
}

.ffd-btn-large {
    padding: 18px 42px;
    font-size: 17px;
}

.ffd-btn-cta {
    background: linear-gradient(135deg, var(--ffd-accent) 0%,
        color-mix(in srgb, var(--ffd-accent) 80%, #000) 100%);
    color: #fff;
    padding: 18px 48px;
    font-size: 17px;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--ffd-accent) 55%, transparent);
}

.ffd-btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--ffd-accent) 60%, transparent);
}

.ffd-btn-small {
    padding: 6px 14px;
    font-size: 13px;
}

/* キーボードフォーカス可視化 */
.ffd-btn:focus-visible,
.ffd-btn-line:focus-visible,
.ffd-btn-fetch:focus-visible,
.ffd-industry-btn:focus-visible,
.ffd-suggestion-chip:focus-visible,
.ffd-example-chip:focus-visible,
.ffd-service-suggestion-btn:focus-visible,
.ffd-url-toggle:focus-visible {
    outline: 2px solid var(--ffd-primary);
    outline-offset: 2px;
}

/* =========================================================
   スピナー
   ========================================================= */
.ffd-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ffdSpin 0.8s linear infinite;
}

.ffd-spinner-large {
    width: 48px;
    height: 48px;
    border-width: 3px;
    border-color: var(--ffd-primary-100);
    border-top-color: var(--ffd-primary);
    border-radius: 50%;
    animation: ffdSpin 0.8s linear infinite;
}

@keyframes ffdSpin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   ローディング画面 / 仮調査フェーズ
   ========================================================= */
.ffd-loading {
    text-align: center;
    padding: 48px 0;
}

.ffd-loading p {
    margin-top: 16px;
    color: var(--ffd-text-light);
}

.ffd-preliminary-loading {
    text-align: center;
}

.ffd-loading-header {
    margin-bottom: 32px;
}

.ffd-loading-animation {
    margin: 32px 0;
}

.ffd-loading-progress {
    height: 5px;
    background: var(--ffd-surface-3);
    border-radius: var(--ffd-radius-pill);
    overflow: hidden;
    margin-bottom: 28px;
    position: relative;
}

.ffd-loading-bar {
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ffd-primary) 30%, transparent),
        var(--ffd-primary),
        var(--ffd-accent),
        color-mix(in srgb, var(--ffd-accent) 30%, transparent));
    border-radius: var(--ffd-radius-pill);
    animation: ffdLoadingBar 1.8s var(--ffd-ease) infinite;
}

@keyframes ffdLoadingBar {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(420%); }
}

.ffd-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 340px;
    margin: 0 auto;
    text-align: left;
}

.ffd-loading-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--ffd-surface-2);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius-sm);
    color: var(--ffd-text-muted);
    font-size: 14px;
    font-weight: 500;
    opacity: 0.55;
    position: relative;
    overflow: hidden;
    transition: opacity var(--ffd-dur) var(--ffd-ease),
        background var(--ffd-dur) var(--ffd-ease),
        color var(--ffd-dur) var(--ffd-ease),
        border-color var(--ffd-dur) var(--ffd-ease),
        box-shadow var(--ffd-dur) var(--ffd-ease),
        transform var(--ffd-dur) var(--ffd-ease);
}

.ffd-loading-step-label {
    flex: 1;
}

.ffd-loading-step.active {
    opacity: 1;
    background: var(--ffd-primary-050);
    border-color: var(--ffd-primary-100);
    color: var(--ffd-primary);
    font-weight: 700;
    transform: translateY(-1px);
    box-shadow: var(--ffd-shadow-sm);
}

.ffd-loading-step.completed {
    opacity: 1;
    background: var(--ffd-accent-050);
    border-color: color-mix(in srgb, var(--ffd-accent) 22%, #fff);
    color: var(--ffd-success);
    font-weight: 600;
    transform: none;
    box-shadow: none;
}

.ffd-loading-step-icon {
    font-size: 19px;
    line-height: 1;
    transition: transform var(--ffd-dur) var(--ffd-ease);
}

.ffd-loading-step.active:not(.completed) .ffd-loading-step-icon {
    transform: scale(1.12);
}

/* アクティブカードを横切る光のシマー */
.ffd-loading-step.active:not(.completed)::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg,
        transparent,
        color-mix(in srgb, var(--ffd-primary) 14%, transparent),
        transparent);
    animation: ffdShimmer 1.7s var(--ffd-ease) infinite;
    pointer-events: none;
}

@keyframes ffdShimmer {
    0% { left: -60%; }
    100% { left: 120%; }
}

/* 右端のステータス（進行中スピナー / 完了チェック） */
.ffd-loading-step-status {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ffd-loading-step.active:not(.completed) .ffd-loading-step-status::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--ffd-primary-200);
    border-top-color: var(--ffd-primary);
    animation: ffdStepSpin 0.7s linear infinite;
}

@keyframes ffdStepSpin {
    to { transform: rotate(360deg); }
}

.ffd-loading-step.completed .ffd-loading-step-status::after {
    content: '✓';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ffd-success);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--ffd-success) 35%, transparent);
    animation: ffdCheckPop 0.42s var(--ffd-ease);
}

@keyframes ffdCheckPop {
    0% { transform: scale(0); }
    60% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* ===== 円形プログレスリング + パーセンテージ ===== */
.ffd-progress-ring-wrap {
    position: relative;
    width: 172px;
    height: 172px;
    margin: 4px auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 背後で回転する光輪 */
.ffd-progress-ring-glow {
    position: absolute;
    inset: -7%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        color-mix(in srgb, var(--ffd-primary) 42%, transparent),
        color-mix(in srgb, var(--ffd-accent) 42%, transparent),
        color-mix(in srgb, var(--ffd-primary) 42%, transparent));
    filter: blur(17px);
    opacity: 0.5;
    z-index: 0;
    animation: ffdRingGlowSpin 3.6s linear infinite;
}

@keyframes ffdRingGlowSpin {
    to { transform: rotate(360deg); }
}

.ffd-progress-ring {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* 12時方向から時計回りに */
}

.ffd-ring-grad-start { stop-color: var(--ffd-primary); }
.ffd-ring-grad-end { stop-color: var(--ffd-accent); }

.ffd-ring-track {
    fill: none;
    stroke: var(--ffd-surface-3);
    stroke-width: 9;
}

.ffd-ring-fill {
    fill: none;
    stroke: url(#ffdRingGrad);
    stroke-width: 9;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 5px var(--ffd-primary-ring));
    transition: stroke-dashoffset 0.12s linear;
}

.ffd-progress-percent {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.ffd-progress-percent-num {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ffd-primary); /* フォールバック */
    background: linear-gradient(135deg, var(--ffd-primary), var(--ffd-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ffd-progress-percent-sign {
    font-size: 19px;
    font-weight: 700;
    color: var(--ffd-text-light);
    align-self: center;
    margin: 6px 0 0 3px;
}

/* 完了時の演出 */
.ffd-progress-ring-wrap.ffd-progress-done .ffd-progress-ring-glow {
    opacity: 0.85;
    animation-duration: 1.5s;
}

.ffd-progress-ring-wrap.ffd-progress-done .ffd-progress-percent-num {
    animation: ffdPercentPop 0.5s var(--ffd-ease);
}

@keyframes ffdPercentPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.16); }
    100% { transform: scale(1); }
}

/* プレビュー */
.ffd-preliminary-preview {
    background: var(--ffd-surface-2);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius);
    padding: 20px;
    margin-top: 28px;
    text-align: left;
}

.ffd-preliminary-preview h3 {
    font-size: 12px;
    color: var(--ffd-text-muted);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.ffd-preview-item {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    line-height: 1.6;
}

.ffd-preview-item:last-child {
    margin-bottom: 0;
}

.ffd-preview-label {
    color: var(--ffd-text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

.ffd-preview-value {
    color: var(--ffd-ink);
    font-weight: 600;
    font-size: 14px;
}

/* =========================================================
   仮調査完了
   ========================================================= */
.ffd-preliminary-complete {
    text-align: center;
}

.ffd-preview-section {
    margin-top: 28px;
    text-align: left;
}

.ffd-preview-section h3 {
    font-size: 16px;
    color: var(--ffd-ink);
    font-weight: 700;
    margin-bottom: 16px;
}

.ffd-preview-card {
    background: var(--ffd-surface);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius);
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
    box-shadow: var(--ffd-shadow-xs);
}

.ffd-preview-card-header {
    padding: 14px 20px;
    background: var(--ffd-surface-2);
    border-bottom: 1px solid var(--ffd-border);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ffd-ink);
}

.ffd-preview-card-content {
    padding: 16px 20px;
}

.ffd-preview-requirement-item {
    padding: 13px 0;
    border-bottom: 1px solid var(--ffd-border);
}

.ffd-preview-requirement-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.ffd-preview-requirement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.ffd-preview-requirement-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--ffd-ink);
}

.ffd-preview-requirement-status {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.ffd-preview-requirement-eval {
    font-size: 13px;
    color: var(--ffd-text-light);
    margin: 0;
    line-height: 1.6;
}

.ffd-preview-more-info {
    padding: 13px 0 0;
    font-size: 13px;
    color: var(--ffd-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ffd-lock-icon {
    font-size: 14px;
    line-height: 1;
}

/* ぼかしプレビュー（プレミアム導線） */
.ffd-blur-preview {
    position: relative;
}

.ffd-blurred {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

.ffd-blur-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: color-mix(in srgb, var(--ffd-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 11px 22px;
    border-radius: var(--ffd-radius-pill);
    border: 1px solid var(--ffd-gold);
    box-shadow: var(--ffd-shadow-md);
    z-index: 10;
}

.ffd-blur-text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ffd-gold);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.ffd-preview-alternative,
.ffd-preview-action {
    padding: 8px 0;
    font-size: 14px;
    color: var(--ffd-text);
    line-height: 1.6;
}

/* =========================================================
   CTAボックス
   ========================================================= */
.ffd-cta-box {
    margin-top: 24px;
    padding: 26px;
    background: linear-gradient(135deg, var(--ffd-primary-050) 0%, var(--ffd-accent-050) 100%);
    border: 1px solid var(--ffd-primary-100);
    border-radius: var(--ffd-radius);
    text-align: left;
}

.ffd-cta-box h3 {
    margin: 0 0 12px;
    color: var(--ffd-ink);
    font-size: 18px;
    font-weight: 700;
}

.ffd-cta-box p {
    margin: 0 0 16px;
    color: var(--ffd-text-light);
    font-size: 14px;
    line-height: 1.7;
}

.ffd-cta-benefits {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ffd-cta-benefits li {
    padding: 7px 0 7px 26px;
    font-size: 14px;
    color: var(--ffd-text);
    font-weight: 500;
    position: relative;
    line-height: 1.5;
}

.ffd-cta-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--ffd-accent);
    font-weight: 700;
}

/* =========================================================
   結果サマリー
   ========================================================= */
.ffd-result-summary {
    padding: 26px;
    border-radius: var(--ffd-radius);
    border: 1px solid;
    margin-bottom: 28px;
    text-align: left;
    box-shadow: var(--ffd-shadow-sm);
}

.ffd-risk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.ffd-risk-badge-large {
    padding: 10px 22px;
    border-radius: var(--ffd-radius-pill);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: var(--ffd-shadow-sm);
}

.ffd-compliance-score {
    text-align: center;
    flex-shrink: 0;
}

.ffd-score-circle {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ffd-bg);
    position: relative;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--score-color, var(--ffd-primary)) 12%, transparent);
    border: 3px solid var(--score-color, var(--ffd-primary));
}

.ffd-score-number {
    font-size: 25px;
    font-weight: 800;
    color: var(--ffd-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ffd-score-label {
    font-size: 10px;
    color: var(--ffd-text-muted);
    margin-top: 3px;
    letter-spacing: 0.04em;
}

.ffd-risk-summary {
    color: var(--ffd-text);
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0;
}

/* =========================================================
   結果セクション
   ========================================================= */
.ffd-result-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ffd-border);
    text-align: left;
}

.ffd-result-section:last-of-type {
    border-bottom: none;
}

.ffd-result-section h3 {
    font-size: 17px;
    color: var(--ffd-ink);
    font-weight: 700;
    margin: 0 0 16px;
}

.ffd-requirements-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ffd-requirement-item {
    padding: 16px 18px;
    background: var(--ffd-surface-2);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius-sm);
}

.ffd-requirement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.ffd-requirement-name {
    font-weight: 700;
    color: var(--ffd-ink);
    font-size: 14.5px;
}

.ffd-requirement-status {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.ffd-requirement-evaluation {
    color: var(--ffd-text-light);
    font-size: 14px;
    margin: 0;
    line-height: 1.65;
}

.ffd-requirement-action {
    color: var(--ffd-primary);
    font-size: 13px;
    margin: 8px 0 0;
    font-weight: 600;
    line-height: 1.6;
}

.ffd-risk-points {
    margin: 0;
    padding-left: 20px;
}

.ffd-risk-points li {
    margin-bottom: 8px;
    color: var(--ffd-text);
    line-height: 1.65;
}

.ffd-alternatives-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ffd-alternative-item {
    padding: 18px;
    background: var(--ffd-surface-2);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius-sm);
    border-left: 3px solid var(--ffd-accent);
}

.ffd-alternative-phrase {
    font-size: 16px;
    font-weight: 700;
    color: var(--ffd-ink);
    margin-bottom: 8px;
    line-height: 1.5;
}

.ffd-alternative-meta {
    margin-bottom: 8px;
}

.ffd-alternative-risk {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--ffd-radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ffd-alternative-risk.low {
    background: var(--ffd-accent-050);
    color: var(--ffd-success);
}

.ffd-alternative-risk.medium {
    background: #fef3c7;
    color: var(--ffd-warning);
}

.ffd-alternative-rationale {
    color: var(--ffd-text-light);
    font-size: 14px;
    margin: 0;
    line-height: 1.65;
}

.ffd-actions-list {
    margin: 0;
    padding-left: 24px;
}

.ffd-actions-list li {
    margin-bottom: 12px;
    color: var(--ffd-text);
    line-height: 1.65;
}

.ffd-disclaimer-section {
    margin-top: 8px;
}

.ffd-disclaimer-box {
    padding: 16px 18px;
    background: var(--ffd-surface-2);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius-sm);
    font-size: 12.5px;
    color: var(--ffd-text-light);
    line-height: 1.7;
}

/* =========================================================
   最終CTA / 注記
   ========================================================= */
.ffd-cta-section {
    text-align: center;
    padding: 34px 28px;
    background: linear-gradient(135deg, var(--ffd-accent-050) 0%, var(--ffd-primary-050) 100%);
    border: 1px solid var(--ffd-primary-100);
    border-radius: var(--ffd-radius);
    margin-bottom: 20px;
}

.ffd-cta-section h3 {
    margin: 0 0 8px;
    color: var(--ffd-ink);
    font-size: 19px;
    font-weight: 700;
}

.ffd-cta-section > p {
    color: var(--ffd-text-light);
    margin-bottom: 22px;
    line-height: 1.7;
}

.ffd-cta-company {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--ffd-text-muted);
}

.ffd-legal-notice {
    text-align: center;
    padding: 16px;
    background: var(--ffd-surface-2);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius-sm);
}

.ffd-legal-notice small {
    color: var(--ffd-text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.ffd-error {
    padding: 14px 16px;
    background: var(--ffd-error-bg);
    border: 1px solid color-mix(in srgb, var(--ffd-error) 30%, #fff);
    border-radius: var(--ffd-radius-sm);
    color: var(--ffd-error);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}

.ffd-privacy-notice {
    text-align: center;
    margin-bottom: 10px;
}

.ffd-privacy-notice small {
    color: var(--ffd-text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.ffd-form,
.ffd-lead-form {
    max-width: 420px;
    margin: 0 auto;
}

/* =========================================================
   ステップ5: 情報入力画面
   ========================================================= */
.ffd-step5-summary {
    background: var(--ffd-accent-050);
    border: 1px solid color-mix(in srgb, var(--ffd-accent) 28%, #fff);
    border-radius: var(--ffd-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.ffd-step5-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--ffd-success);
    margin-bottom: 12px;
    font-size: 14.5px;
}

.ffd-step5-summary-icon {
    font-size: 17px;
    line-height: 1;
}

.ffd-step5-summary-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ffd-step5-phrase {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: baseline;
}

.ffd-step5-phrase-label {
    font-size: 13px;
    color: var(--ffd-text-light);
}

.ffd-step5-phrase-text {
    font-weight: 700;
    color: var(--ffd-ink);
    font-size: 15px;
}

.ffd-step5-result {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ffd-step5-risk-badge {
    padding: 4px 12px;
    border-radius: var(--ffd-radius-sm);
    font-size: 13px;
    font-weight: 700;
}

.ffd-step5-score {
    font-size: 14px;
    color: var(--ffd-text-light);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ffd-step5-benefits {
    background: var(--ffd-surface-2);
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius);
    padding: 16px 20px;
    margin-bottom: 24px;
}

.ffd-step5-benefits-title {
    font-weight: 700;
    color: var(--ffd-ink);
    margin-bottom: 12px;
    font-size: 14px;
}

.ffd-step5-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}

.ffd-step5-benefits-list li {
    font-size: 13px;
    color: var(--ffd-text-light);
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.ffd-step5-benefits-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--ffd-accent);
    font-weight: 700;
}

/* =========================================================
   レート制限エラー
   ========================================================= */
.ffd-rate-limit-error {
    display: flex;
    gap: 16px;
    background: linear-gradient(135deg, #fffaf0 0%, #fef3c7 100%);
    border: 1px solid color-mix(in srgb, var(--ffd-warning) 40%, #fff);
    border-radius: var(--ffd-radius);
    padding: 20px;
    margin: 20px 0;
    align-items: flex-start;
}

.ffd-rate-limit-icon,
.ffd-rate-limit-error-icon {
    font-size: 26px;
    flex-shrink: 0;
    line-height: 1.2;
}

.ffd-rate-limit-error-content {
    flex: 1;
}

.ffd-rate-limit-message,
.ffd-rate-limit-error-message {
    font-weight: 700;
    color: #92400e;
    margin: 0 0 4px 0;
    font-size: 14.5px;
    line-height: 1.6;
}

.ffd-rate-limit-error-sub {
    color: #b45309;
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.6;
}

/* =========================================================
   1冠無料メッセージ
   ========================================================= */
.ffd-free-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ffd-primary-050);
    border: 1px solid var(--ffd-primary-100);
    border-radius: var(--ffd-radius);
    padding: 13px 16px;
    margin-bottom: 20px;
}

.ffd-free-notice-icon {
    font-size: 19px;
    flex-shrink: 0;
    line-height: 1;
}

.ffd-free-notice-text {
    font-size: 14px;
    color: var(--ffd-text);
    line-height: 1.6;
}

.ffd-free-notice-text strong {
    color: var(--ffd-primary);
    font-weight: 700;
}

/* =========================================================
   AI提案ローディング（ブランド整合の上品な演出）
   ========================================================= */
.ffd-suggestions-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px 16px;
    background: var(--ffd-surface-2);
    border-radius: var(--ffd-radius);
    border: 1px solid var(--ffd-border);
    /* フレックスの左寄せに関わらずカード自体を水平中央に配置 */
    margin-left: auto;
    margin-right: auto;
}

.ffd-suggestions-loading-text {
    color: var(--ffd-primary);
    font-size: 14px;
    font-weight: 700;
    margin-top: 14px;
    animation: ffdTextPulse 1.5s ease-in-out infinite;
}

@keyframes ffdTextPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* AIスピナー（ブランドカラーの回転リング） */
.ffd-ai-spinner {
    position: relative;
    width: 58px;
    height: 58px;
}

.ffd-ai-spinner::before,
.ffd-ai-spinner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.ffd-ai-spinner::before {
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg,
        var(--ffd-primary),
        var(--ffd-accent),
        var(--ffd-primary));
    animation: ffdRotate 1.4s linear infinite;
}

.ffd-ai-spinner::after {
    width: 76%;
    height: 76%;
    top: 12%;
    left: 12%;
    background: var(--ffd-bg);
}

@keyframes ffdRotate {
    to { transform: rotate(360deg); }
}

.ffd-ai-spinner-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 23px;
    z-index: 1;
    animation: ffdBounce 1s ease-in-out infinite;
}

@keyframes ffdBounce {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.18); }
}

/* ドットアニメーション */
.ffd-loading-dots {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.ffd-loading-dots span {
    width: 7px;
    height: 7px;
    background: var(--ffd-primary);
    border-radius: 50%;
    animation: ffdDotBounce 1.4s ease-in-out infinite;
}

.ffd-loading-dots span:nth-child(1) { animation-delay: 0s; }
.ffd-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.ffd-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ffdDotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.ffd-mini-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ffd-border-strong);
    border-top-color: var(--ffd-primary);
    border-radius: 50%;
    animation: ffdSpin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

/* =========================================================
   URL取得済み状態
   ========================================================= */
.ffd-btn-fetched {
    background: var(--ffd-accent) !important;
    border-color: var(--ffd-accent) !important;
    color: #fff !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

.ffd-btn-fetched:hover {
    background: var(--ffd-accent) !important;
    transform: none !important;
}

.ffd-url-fetched-notice {
    color: var(--ffd-success);
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    padding: 9px 13px;
    background: var(--ffd-accent-050);
    border-radius: var(--ffd-radius-sm);
    border: 1px solid color-mix(in srgb, var(--ffd-accent) 22%, #fff);
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 600px) {
    .ffd-wizard {
        padding: 22px 18px 24px;
        margin: 8px;
        border-radius: var(--ffd-radius);
    }

    .ffd-progress {
        margin-bottom: 28px;
    }

    .ffd-progress-label {
        font-size: 9px;
    }

    .ffd-progress-circle {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .ffd-progress-line {
        margin: -22px 14px 14px;
    }

    .ffd-step {
        min-height: 320px;
    }

    .ffd-step-title {
        font-size: 21px;
    }

    .ffd-industry-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .ffd-buttons {
        flex-direction: column-reverse;
    }

    .ffd-btn {
        width: 100%;
    }

    .ffd-suggestion-chips,
    .ffd-example-chips {
        justify-content: center;
    }

    .ffd-risk-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .ffd-blur-overlay {
        padding: 9px 18px;
    }

    .ffd-blur-text {
        font-size: 12px;
    }

    .ffd-url-input-section .ffd-field {
        flex-direction: column;
    }

    .ffd-url-input-section.show {
        max-height: 280px;
    }

    .ffd-btn-fetch {
        width: 100%;
    }

    .ffd-line-cta-content {
        flex-direction: column;
        text-align: center;
    }

    .ffd-line-cta-text {
        text-align: center;
    }

    .ffd-step5-benefits-list {
        grid-template-columns: 1fr;
    }

    .ffd-step5-result {
        flex-direction: column;
        align-items: flex-start;
    }

    .ffd-rate-limit-error,
    .ffd-free-notice {
        flex-direction: column;
        text-align: center;
    }

    .ffd-rate-limit-error-content {
        width: 100%;
    }
}

/* =========================================================
   モーション軽減設定への配慮
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ffd-wizard *,
    .ffd-wizard *::before,
    .ffd-wizard *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .ffd-loading-bar {
        animation: none !important;
        width: 40%;
        transform: none;
    }
}

/* =========================================================
   v1.4.0 追加スタイル
   ========================================================= */

/* --- 待ち時間の明示（ローディング画面） --- */
.ffd-loading-notice {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--ffd-text-light);
    text-align: center;
    line-height: 1.7;
}

.ffd-loading-notice strong {
    color: var(--ffd-text);
    font-weight: 700;
}

/* 経過秒数：進捗リングが止まって見えないよう実時間を示す */
.ffd-loading-elapsed {
    margin-top: 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ffd-text-light);
    font-variant-numeric: tabular-nums;
}

.ffd-loading-elapsed-num {
    font-weight: 700;
    color: var(--ffd-text);
}

/* --- 第2段階（詳細分析）の取得中表示 --- */
.ffd-detail-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    margin-top: 12px;
    border: 1px dashed var(--ffd-border);
    border-radius: var(--ffd-radius);
    font-size: 13px;
    color: var(--ffd-text-light);
}

/* --- 法的リスクポイント一覧 --- */
.ffd-risk-point-list {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ffd-text);
}

.ffd-risk-point-list li {
    margin-bottom: 8px;
}

.ffd-risk-point-list li:last-child {
    margin-bottom: 0;
}

/* --- 診断結果の見出し（リスクレベル別） --- */
.ffd-success-message.ffd-verdict-medium {
    background: #fffaeb;
    border-color: #fedf89;
}

.ffd-success-message.ffd-verdict-medium h3 {
    color: #b54708;
}

.ffd-success-message.ffd-verdict-high {
    background: var(--ffd-error-bg);
    border-color: color-mix(in srgb, var(--ffd-error) 30%, #fff);
}

.ffd-success-message.ffd-verdict-high h3 {
    color: var(--ffd-error);
}

/* --- 診断失敗時の再試行 --- */
.ffd-error-retry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.ffd-error-retry .ffd-error-text {
    line-height: 1.7;
}

.ffd-error-retry .ffd-retry-btn {
    align-self: stretch;
}

@media (min-width: 560px) {
    .ffd-error-retry .ffd-retry-btn {
        align-self: flex-start;
    }
}

/* =========================================================
   v5.0 デザイン刷新「審査書類」
   帝国ナンバーワンリサーチ組合

   方針: 本ウィザードは、最終的に納品されるエビデンスレポートへの入口である。
   したがって成果物と同じ語彙で設計する。すなわち日本の法務・行政文書の
   語彙 ——明朝体・ヘアライン罫・記入欄・通し番号—— を用い、
   消費者向けクイズではなく「審査書類」として見えるようにする。

   ・スタートアップ調の青(#2563eb)を藍鉄(#1E3A5C)へ。権威を落ち着きで示す
   ・見出しと調査対象文言は明朝体（納品レポートと同じ書体系）
   ・真鍮色はNo.1マーカーのみに限定。色数を絞り、判定色（赤/黄/緑）と競合させない
   ・絵文字は既定でモノクロ、選択時のみ発色させる
   ========================================================= */

.ffd-wizard,
.ffd-wizard-container {
    /* --- ブランド（ショートコードで上書き可） --- */
    --ffd-primary: #1e3a5c;         /* 藍鉄 */
    --ffd-primary-hover: #162c47;
    --ffd-accent: #2f6f5e;          /* 錆青磁：完了状態。緑系だが判定用の緑とは別トーン */

    /* --- インク --- */
    --ffd-ink: #12171f;             /* 墨 */
    --ffd-text: #232c38;
    --ffd-text-light: #59646f;
    --ffd-text-muted: #8d97a3;

    /* --- 料紙 --- */
    --ffd-bg: #ffffff;
    --ffd-surface: #ffffff;
    --ffd-surface-2: #f7f8f6;       /* 白練：ごくわずかに温かい */
    --ffd-surface-3: #eef0ed;
    --ffd-border: #e2e5e9;          /* 罫 */
    --ffd-border-strong: #c8cdd4;

    /* --- 真鍮：No.1マーカー専用 --- */
    --ffd-gold: #9a7b3f;
    --ffd-gold-soft: #f5f1e6;

    /* --- 判定色（意味を持つ色。ブランド色と混同させない） --- */
    --ffd-error: #a8322b;
    --ffd-error-bg: #fbf3f2;
    --ffd-success: #1d6b4f;
    --ffd-warning: #96661a;

    /* --- 角丸：書類らしく控えめに --- */
    --ffd-radius: 6px;
    --ffd-radius-sm: 4px;
    --ffd-radius-lg: 8px;

    /* --- 影：紙が浮く程度に --- */
    --ffd-shadow-xs: 0 1px 1px rgba(18, 23, 31, 0.04);
    --ffd-shadow-sm: 0 1px 2px rgba(18, 23, 31, 0.05);
    --ffd-shadow-md: 0 2px 8px -2px rgba(18, 23, 31, 0.08);
    --ffd-shadow-lg: 0 18px 40px -22px rgba(18, 23, 31, 0.30), 0 2px 8px -4px rgba(18, 23, 31, 0.06);

    --ffd-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --ffd-dur: 0.22s;

    /* --- 書体 --- */
    --ffd-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Meiryo", system-ui,
        -apple-system, BlinkMacSystemFont, sans-serif;
    --ffd-font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho",
        "YuMincho", "BIZ UDMincho", "Noto Serif CJK JP", serif;
}

/* =========================================================
   料紙
   ========================================================= */
.ffd-wizard {
    max-width: 700px;
    padding: 40px 44px 36px;
    border-color: var(--ffd-border);
    border-radius: var(--ffd-radius-lg);
    background: var(--ffd-bg);
}

/* 上辺の綴じ代。左端に真鍮の小口を置く（書類の綴じ紐の位置） */
.ffd-wizard::before {
    height: 2px;
    background: linear-gradient(90deg,
        var(--ffd-gold) 0 56px,
        var(--ffd-primary) 56px 100%);
}

/* =========================================================
   進行標：円形バッジをやめ、明朝の通し番号＋下部の罫に
   （工程は実際に順序を持つため、番号は情報として意味がある）
   ========================================================= */
.ffd-progress {
    margin: 0 0 34px;
    padding-top: 2px;
}

.ffd-progress-bar {
    margin-bottom: 0;
    align-items: flex-start;
}

.ffd-progress-circle {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--ffd-font-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    color: var(--ffd-text-muted);
    font-feature-settings: "tnum" 1;
}

.ffd-progress-step.active .ffd-progress-circle {
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    color: var(--ffd-primary);
    font-weight: 600;
}

.ffd-progress-step.completed .ffd-progress-circle {
    background: none;
    border: 0;
    color: var(--ffd-text-light);
    transform: none;
}

.ffd-progress-label {
    font-size: 10.5px;
    margin-top: 7px;
    letter-spacing: 0.06em;
    color: var(--ffd-text-muted);
}

.ffd-progress-step.active .ffd-progress-label {
    color: var(--ffd-ink);
    font-weight: 600;
}

/* 罫を番号の下に敷く（従来は負マージンで円の背後に隠れていた） */
.ffd-progress-line {
    height: 1px;
    background: var(--ffd-border);
    border-radius: 0;
    margin: 14px 0 0;
}

.ffd-progress-fill {
    height: 2px;
    margin-top: -0.5px;
    border-radius: 0;
    background: var(--ffd-primary);
}

/* =========================================================
   見出し：明朝体。納品するレポートと同じ書体系で統一する
   ========================================================= */
.ffd-step-title {
    font-family: var(--ffd-font-display);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--ffd-ink);
}

.ffd-step-description {
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: var(--ffd-text-light);
}

/* =========================================================
   記入欄：下線を主とした帳票の書式に寄せる
   ========================================================= */
.ffd-input,
.ffd-textarea {
    border-radius: var(--ffd-radius-sm);
    border-color: var(--ffd-border-strong);
    background: var(--ffd-surface-2);
    font-size: 15px;
    letter-spacing: 0.02em;
    transition: border-color var(--ffd-dur) var(--ffd-ease),
        background var(--ffd-dur) var(--ffd-ease),
        box-shadow var(--ffd-dur) var(--ffd-ease);
}

.ffd-input:hover,
.ffd-textarea:hover {
    border-color: var(--ffd-text-muted);
}

.ffd-input:focus,
.ffd-textarea:focus {
    background: var(--ffd-bg);
    border-color: var(--ffd-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ffd-primary) 12%, transparent);
}

/* 調査対象文言の記入欄。ここが本ウィザードの主役であり、
   入力された文言は明朝体で表示される —— レポート上での見え方そのもの */
.ffd-step-3 .ffd-input-large {
    font-family: var(--ffd-font-display);
    font-size: 19px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.04em;
    background: var(--ffd-bg);
    border: 0;
    border-bottom: 1.5px solid var(--ffd-border-strong);
    border-radius: 0;
    padding: 14px 8px;
}

.ffd-step-3 .ffd-input-large:hover {
    border-bottom-color: var(--ffd-text-muted);
}

.ffd-step-3 .ffd-input-large:focus {
    border-bottom-color: var(--ffd-primary);
    border-bottom-width: 2px;
    box-shadow: none;
    padding-bottom: 13.5px;
}

.ffd-step-3 .ffd-input-large::placeholder {
    font-family: var(--ffd-font);
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* =========================================================
   業種分類：絵文字は既定で沈め、選択時のみ発色させる
   ========================================================= */
.ffd-industry-grid {
    gap: 8px;
}

.ffd-industry-btn {
    border-radius: var(--ffd-radius-sm);
    border-color: var(--ffd-border);
    background: var(--ffd-bg);
    padding: 15px 10px 13px;
    box-shadow: none;
    transition: border-color var(--ffd-dur) var(--ffd-ease),
        background var(--ffd-dur) var(--ffd-ease),
        transform var(--ffd-dur) var(--ffd-ease);
}

.ffd-industry-btn:hover {
    border-color: var(--ffd-primary);
    background: var(--ffd-surface-2);
    transform: none;
    box-shadow: none;
}

.ffd-industry-btn.selected {
    border-color: var(--ffd-primary);
    background: var(--ffd-bg);
    box-shadow: inset 0 0 0 1px var(--ffd-primary);
}

.ffd-industry-icon {
    font-size: 21px;
    filter: grayscale(1) contrast(0.9) opacity(0.45);
    transition: filter 0.3s var(--ffd-ease);
}

.ffd-industry-btn:hover .ffd-industry-icon,
.ffd-industry-btn.selected .ffd-industry-icon {
    filter: none;
}

.ffd-industry-label {
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--ffd-text);
}

.ffd-industry-btn.selected .ffd-industry-label {
    color: var(--ffd-primary);
    font-weight: 600;
}

/* =========================================================
   URL取得欄
   ========================================================= */
.ffd-url-toggle {
    border-radius: var(--ffd-radius-sm);
    border-color: var(--ffd-border);
    background: var(--ffd-surface-2);
    font-size: 13.5px;
    letter-spacing: 0.02em;
}

.ffd-url-toggle:hover {
    border-color: var(--ffd-primary);
    background: var(--ffd-surface-2);
}

.ffd-url-toggle.active {
    border-color: var(--ffd-primary);
    background: var(--ffd-bg);
    color: var(--ffd-primary);
}

.ffd-url-toggle-icon {
    filter: grayscale(1) opacity(0.5);
}

.ffd-url-toggle.active .ffd-url-toggle-icon {
    filter: none;
}

.ffd-url-hint {
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--ffd-text-muted);
}

/* =========================================================
   区切り：「または業種を選択」
   ========================================================= */
.ffd-divider span {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ffd-text-muted);
    text-transform: none;
}

/* =========================================================
   操作ボタン
   ========================================================= */
.ffd-btn {
    border-radius: var(--ffd-radius-sm);
    font-size: 14px;
    letter-spacing: 0.06em;
    font-weight: 600;
    transition: background var(--ffd-dur) var(--ffd-ease),
        border-color var(--ffd-dur) var(--ffd-ease),
        color var(--ffd-dur) var(--ffd-ease);
}

.ffd-btn-primary {
    background: var(--ffd-primary);
    box-shadow: none;
}

.ffd-btn-primary:hover:not(:disabled) {
    background: var(--ffd-primary-hover);
    box-shadow: none;
    transform: none;
}

.ffd-btn-secondary {
    background: var(--ffd-bg);
    border: 1px solid var(--ffd-border-strong);
    color: var(--ffd-text);
}

.ffd-btn-secondary:hover:not(:disabled) {
    background: var(--ffd-surface-2);
    border-color: var(--ffd-text-muted);
}

.ffd-btn-fetch {
    border-radius: var(--ffd-radius-sm);
    background: var(--ffd-primary);
    letter-spacing: 0.06em;
}

.ffd-btn-fetch:hover:not(:disabled) {
    background: var(--ffd-primary-hover);
}

/* No.1提案チップ：唯一、真鍮を使う場所 */
.ffd-suggestion-chip {
    border-radius: var(--ffd-radius-sm);
    border-color: var(--ffd-border-strong);
    font-size: 13px;
    letter-spacing: 0.02em;
    background: var(--ffd-bg);
}

.ffd-suggestion-chip:hover {
    border-color: var(--ffd-gold);
    background: var(--ffd-gold-soft);
    color: var(--ffd-ink);
}

.ffd-suggestion-num {
    font-family: var(--ffd-font-display);
    color: var(--ffd-gold);
    font-feature-settings: "tnum" 1;
}

/* =========================================================
   判定表示：スコアと要約
   ========================================================= */
.ffd-score-number {
    font-family: var(--ffd-font-display);
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
}

.ffd-progress-percent-num {
    font-family: var(--ffd-font-display);
    font-feature-settings: "tnum" 1;
}

.ffd-risk-badge-large {
    border-radius: var(--ffd-radius-sm);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.ffd-success-message {
    border-radius: var(--ffd-radius);
}

.ffd-success-message h3 {
    font-family: var(--ffd-font-display);
    font-size: 18px;
    letter-spacing: 0.02em;
}

.ffd-result-summary {
    border-radius: var(--ffd-radius);
}

.ffd-preview-card {
    border-radius: var(--ffd-radius-sm);
}

/* =========================================================
   待機画面
   ========================================================= */
.ffd-loading-elapsed {
    font-family: var(--ffd-font-display);
    letter-spacing: 0.06em;
}

.ffd-loading-notice {
    letter-spacing: 0.02em;
}

/* =========================================================
   フォーカス可視化（キーボード操作）
   ========================================================= */
.ffd-btn:focus-visible,
.ffd-btn-line:focus-visible,
.ffd-btn-fetch:focus-visible,
.ffd-industry-btn:focus-visible,
.ffd-suggestion-chip:focus-visible,
.ffd-url-toggle:focus-visible {
    outline: 2px solid var(--ffd-primary);
    outline-offset: 2px;
}

/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width: 600px) {
    .ffd-wizard {
        padding: 28px 20px 26px;
    }

    .ffd-step-title {
        font-size: 20px;
    }

    .ffd-step-3 .ffd-input-large {
        font-size: 17px;
    }

    .ffd-progress-circle {
        font-size: 15px;
    }

    .ffd-progress-label {
        font-size: 9.5px;
        letter-spacing: 0.02em;
    }

    .ffd-industry-icon {
        font-size: 19px;
    }
}

/* =========================================================
   動きを抑える設定を尊重する
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ffd-wizard *,
    .ffd-wizard *::before,
    .ffd-wizard *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   ダークテーマ調整
   ========================================================= */
[data-theme="dark"].ffd-wizard {
    --ffd-primary: #7ba3cf;
    --ffd-primary-hover: #93b5db;
    --ffd-ink: #f1f4f8;
    --ffd-text: #dde3ec;
    --ffd-text-light: #a5b0be;
    --ffd-text-muted: #7f8a99;
    --ffd-bg: #151a21;
    --ffd-surface: #1b212a;
    --ffd-surface-2: #1e242e;
    --ffd-surface-3: #262d38;
    --ffd-border: #2e3641;
    --ffd-border-strong: #414b58;
    --ffd-gold: #c9a765;
    --ffd-gold-soft: #2a2416;
    --ffd-error-bg: #2a1917;
}

/* --- v5.0 微調整 --------------------------------------- */

/* 提案番号：紺の円バッジをやめ、真鍮の明朝数字に。
   円が主張しすぎて、肝心の提案文言より目立っていたため */
.ffd-suggestion-num {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    font-family: var(--ffd-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--ffd-gold);
    font-feature-settings: "tnum" 1;
    line-height: 1;
    padding-top: 1px;
}

/* 装飾用の絵文字は沈める（業種アイコンと同じ扱いに揃える） */
.ffd-suggestions-icon,
.ffd-loading-step-icon {
    filter: grayscale(1) opacity(0.55);
}

/* 提案パネル：面ではなく罫で囲う */
.ffd-suggestions {
    background: none;
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius-sm);
}

.ffd-suggestions-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ffd-text-light);
}


/* =========================================================
   「初」表示診断 固有の部品
   ========================================================= */

/* --- 記入欄のラベル --- */
.ffd-field-labeled {
    margin-bottom: 18px;
}

.ffd-wizard .ffd-label,
.ffd-field-labeled > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ffd-ink);
    margin-bottom: 8px;
}

.ffd-optional-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--ffd-border-strong);
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ffd-text-muted);
    letter-spacing: 0.06em;
    vertical-align: 1px;
}

.ffd-tip {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ffd-text-light);
    letter-spacing: 0.02em;
}

.ffd-url-error {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--ffd-error);
}

/* --- 任意項目の開閉 --- */
.ffd-optional-block {
    margin: 20px 0 6px;
}

.ffd-optional-toggle {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: none;
    border: 1px dashed var(--ffd-border-strong);
    border-radius: var(--ffd-radius-sm);
    color: var(--ffd-text-light);
    font: inherit;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-align: left;
    cursor: pointer;
}

.ffd-optional-toggle:hover,
.ffd-optional-toggle:focus-visible {
    border-color: var(--ffd-primary);
    color: var(--ffd-primary);
    outline: none;
}

/* --- 表示の区分 --- */
.ffd-claim-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 4px 0 18px;
}

.ffd-claim-type-btn {
    padding: 10px 6px;
    background: var(--ffd-bg);
    border: 1px solid var(--ffd-border-strong);
    border-radius: var(--ffd-radius-sm);
    font: inherit;
    font-family: var(--ffd-font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ffd-text);
    cursor: pointer;
    transition: border-color var(--ffd-dur) var(--ffd-ease), background var(--ffd-dur) var(--ffd-ease), color var(--ffd-dur) var(--ffd-ease);
}

.ffd-claim-type-btn:hover {
    border-color: var(--ffd-primary);
}

.ffd-claim-type-btn.selected {
    border-color: var(--ffd-primary);
    background: var(--ffd-primary);
    color: #fff;
    font-weight: 600;
}

.ffd-claim-type-btn:focus-visible,
.ffd-publish-btn:focus-visible,
.ffd-example-chip:focus-visible {
    outline: 2px solid var(--ffd-primary);
    outline-offset: 2px;
}

/* --- ページ内で見つかった既存の表示 --- */
.ffd-existing-claims {
    margin: -4px 0 18px;
    padding: 14px 16px;
    border-left: 2px solid var(--ffd-warning);
    background: color-mix(in srgb, var(--ffd-warning) 6%, var(--ffd-bg));
}

.ffd-existing-claims-title {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--ffd-text);
    letter-spacing: 0.02em;
}

.ffd-existing-claims .ffd-suggestion-chips {
    justify-content: flex-start;
}

/* --- 文言案：範囲の段タグつき --- */
.ffd-suggestion-chip.ffd-suggestion-rich {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 11px 14px;
    text-align: left;
    color: var(--ffd-ink);
    font-weight: 500;
}

.ffd-suggestion-chip.ffd-suggestion-rich:hover {
    transform: none;
    box-shadow: none;
}

.ffd-chip-phrase {
    font-family: var(--ffd-font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.55;
}

.ffd-chip-note {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ffd-text-light);
    letter-spacing: 0.02em;
}

.ffd-ladder-tag {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--ffd-border-strong);
    border-radius: 3px;
    font-family: var(--ffd-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ffd-text-light);
    background: var(--ffd-bg);
    line-height: 1.6;
    vertical-align: 1px;
    white-space: nowrap;
}

.ffd-ladder-world,
.ffd-ladder-asia {
    border-color: color-mix(in srgb, var(--ffd-error) 45%, #fff);
    color: var(--ffd-error);
}

.ffd-ladder-japan {
    border-color: color-mix(in srgb, var(--ffd-warning) 50%, #fff);
    color: var(--ffd-warning);
}

.ffd-ladder-industry,
.ffd-ladder-limited {
    border-color: color-mix(in srgb, var(--ffd-success) 45%, #fff);
    color: var(--ffd-success);
}

.ffd-example-chip {
    font-family: var(--ffd-font-display);
}

/* --- 公開状況 --- */
.ffd-publish {
    margin: 24px 0 4px;
    padding-top: 18px;
    border-top: 1px solid var(--ffd-border);
}

.ffd-publish-label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ffd-ink);
    letter-spacing: 0.03em;
}

.ffd-publish-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.ffd-publish-btn {
    padding: 11px 8px;
    background: var(--ffd-bg);
    border: 1px solid var(--ffd-border-strong);
    border-radius: var(--ffd-radius-sm);
    font: inherit;
    font-size: 13.5px;
    color: var(--ffd-text);
    cursor: pointer;
    letter-spacing: 0.02em;
}

.ffd-publish-btn:hover {
    border-color: var(--ffd-primary);
}

.ffd-publish-btn.selected {
    border-color: var(--ffd-primary);
    box-shadow: inset 0 0 0 1px var(--ffd-primary);
    color: var(--ffd-primary);
    font-weight: 600;
}

.ffd-publish-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--ffd-text-light);
}

/* --- 判定サマリーの注記 --- */
.ffd-score-note {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--ffd-text-light);
    letter-spacing: 0.02em;
}

.ffd-downgrade-notice {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-left: 2px solid var(--ffd-error);
    background: var(--ffd-bg);
    font-size: 12.5px;
    color: var(--ffd-error);
}

/* --- 「初」の対象と範囲 --- */
.ffd-scope-card {
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid var(--ffd-border);
    border-top: 2px solid var(--ffd-primary);
    border-radius: var(--ffd-radius-sm);
    background: var(--ffd-bg);
}

.ffd-scope-title {
    margin: 0 0 12px;
    font-family: var(--ffd-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ffd-ink);
    letter-spacing: 0.04em;
}

.ffd-scope-list {
    display: grid;
    grid-template-columns: 7.5em 1fr;
    gap: 8px 14px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
}

.ffd-scope-list dt {
    margin: 0;
    color: var(--ffd-text-light);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding-top: 2px;
}

.ffd-scope-list dd {
    margin: 0;
    color: var(--ffd-text);
}

/* --- 先行例の候補 --- */
.ffd-prior-count {
    margin: 0 0 10px;
    font-size: 13.5px;
}

.ffd-prior-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ffd-prior-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--ffd-border);
}

.ffd-prior-item:first-child {
    padding-top: 2px;
}

.ffd-prior-item:last-child {
    border-bottom: 0;
}

.ffd-prior-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
}

.ffd-prior-name {
    font-family: var(--ffd-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ffd-ink);
    letter-spacing: 0.02em;
}

.ffd-overlap {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.ffd-overlap-high {
    color: var(--ffd-error);
}

.ffd-overlap-medium {
    color: var(--ffd-warning);
}

.ffd-overlap-low {
    color: var(--ffd-text-light);
}

.ffd-prior-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ffd-text-light);
}

.ffd-prior-diff {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ffd-text);
}

.ffd-prior-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ffd-primary);
    word-break: break-all;
}

.ffd-prior-none {
    margin: 0 0 6px;
    font-size: 13.5px;
    color: var(--ffd-text);
}

.ffd-wizard .ffd-muted {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ffd-text-light);
}

.ffd-detail-loading-inline {
    margin: 0;
    padding: 4px 0;
    background: none;
    border: 0;
}

.ffd-section-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ffd-text);
}

/* --- 本調査の担当 --- */
.ffd-expert-box {
    margin: 28px 0 22px;
    padding: 20px 22px;
    border: 1px solid var(--ffd-border);
    border-left: 3px solid var(--ffd-gold);
    border-radius: var(--ffd-radius-sm);
    background: var(--ffd-surface-2);
}

.ffd-expert-eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ffd-gold);
}

.ffd-expert-title {
    margin: 0 0 8px;
    font-family: var(--ffd-font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ffd-ink);
    letter-spacing: 0.02em;
}

.ffd-expert-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ffd-text);
}

/* --- 本調査の進め方 --- */
.ffd-process {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin: 4px 0 10px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ffd-process li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    text-align: center;
}

.ffd-process li + li::before {
    content: "";
    position: absolute;
    top: 25px;
    left: -12%;
    width: 24%;
    height: 1px;
    background: var(--ffd-border-strong);
}

.ffd-process-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ffd-primary);
    border-radius: 50%;
    font-family: var(--ffd-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--ffd-primary);
    background: var(--ffd-bg);
}

.ffd-process-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ffd-ink);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.ffd-btn.ffd-btn-estimate {
    display: inline-flex;
    margin: 6px 0 4px;
    text-decoration: none;
    color: #fff;
}

/* --- 説明文の改行（1文字だけ次行に落ちるのを防ぐ） --- */
.ffd-wizard .ffd-step-description {
    max-width: 34em;
    text-wrap: balance;
}

/* --- 中央揃えの親の中でも、本文を読む部品は左揃え --- */
.ffd-wizard .ffd-scope-card,
.ffd-wizard .ffd-expert-box,
.ffd-wizard .ffd-prior-card,
.ffd-wizard .ffd-existing-claims {
    text-align: left;
}

/* --- 表示の文言欄（長い限定つきの文言も全体が見えるよう複数行で折り返す） --- */
.ffd-step-3 .ffd-phrase-area {
    display: block;
    width: 100%;
    min-height: 0;
    resize: none;
    overflow: hidden;
    line-height: 1.6;
    box-sizing: border-box;
}

.ffd-example-chip {
    border-radius: var(--ffd-radius-sm);
}

/* --- 外部AIへの送信についての注記 --- */
.ffd-data-notice {
    margin: 18px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--ffd-border);
    border-radius: var(--ffd-radius-sm);
    background: var(--ffd-surface-2);
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--ffd-text-light);
    letter-spacing: 0.02em;
}

/* --- ボット対策の欄（人には見せない） --- */
.ffd-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* --- スマートフォン --- */
@media (max-width: 600px) {
    .ffd-example-chips,
    .ffd-existing-claims .ffd-suggestion-chips {
        justify-content: flex-start;
    }

    .ffd-claim-types {
        grid-template-columns: repeat(2, 1fr);
    }

    .ffd-scope-list {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .ffd-scope-list dd {
        margin-bottom: 8px;
    }

    .ffd-process {
        grid-template-columns: 1fr;
    }

    .ffd-process li {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 6px 0;
        text-align: left;
    }

    .ffd-process li + li::before {
        top: -6px;
        left: 14px;
        width: 1px;
        height: 12px;
    }

    .ffd-expert-box {
        padding: 16px 16px;
    }

    .ffd-btn.ffd-btn-estimate {
        display: flex;
        justify-content: center;
    }
}

/* --- ダークテーマ --- */
[data-theme="dark"].ffd-wizard .ffd-existing-claims {
    background: color-mix(in srgb, var(--ffd-warning) 10%, var(--ffd-bg));
}

[data-theme="dark"].ffd-wizard .ffd-claim-type-btn.selected {
    color: var(--ffd-bg);
}