/* =========================================
       ✨ モダン 認証ページ (Signup UI)
       ========================================= */
    :root {
        --primary: #00c9a7;
        --primary-light: #e0fdf9;
        --premium: #6366f1;
        --premium-light: #eef2ff;
        --text-main: #1a202c;
        --text-muted: #718096;
        --bg-gray: #f8fafc;
        --radius-lg: 32px;
        --shadow-md: 0 15px 35px rgba(0,0,0,0.06);
    }

    body { background: var(--bg-gray); }

    .auth-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100vh - 120px);
        padding: 40px 20px;
        animation: fadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

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

    /* 🃏 カード本体 */
    .auth-card {
        background: white;
        width: 100%;
        max-width: 480px;
        padding: 50px 40px;
        border-radius: var(--radius-lg);
        border: 1px solid #edf2f7;
        box-shadow: var(--shadow-md);
        box-sizing: border-box;
    }

    /* 🏷️ ヘッダー */
    .auth-header { text-align: center; margin-bottom: 35px; }
    .auth-icon { font-size: 44px; margin-bottom: 15px; display: inline-block; animation: float 3s ease-in-out infinite; }
    @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } }
    .auth-title { font-size: 28px; font-weight: 900; color: var(--text-main); margin: 0 0 8px; letter-spacing: -0.5px; }
    .auth-subtitle { color: var(--text-muted); font-size: 14px; font-weight: 500; margin: 0; }

    /* 🔘 プラン選択ラジオボタン (モダンUI) */
    .plan-selector-group { margin-bottom: 30px; }
    .plan-selector-label { display: block; font-weight: 800; margin-bottom: 12px; color: var(--text-main); font-size: 13px; }
    .plan-flex { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 15px; }
    
    .plan-card { min-width: 0; margin: 0; padding: 0; cursor: pointer; display: block; user-select: none; }
    .plan-card input { display: none; }
    
    .card-content {
        border: 2px solid #edf2f7;
        border-radius: 20px;
        padding: 25px 15px;
        text-align: center;
        background: white;
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        min-height: 160px;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .plan-card:hover .card-content {
        border-color: #cbd5e0;
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.04);
    }

    .plan-name { font-size: 15px; font-weight: 900; color: #4a5568; margin-bottom: 6px; transition: color 0.2s ease; letter-spacing: 0.5px; text-transform: uppercase; }
    .plan-price { font-size: 24px; font-weight: 900; color: var(--text-main); margin-bottom: 12px; line-height: 1;}
    .plan-price span { font-size: 12px; color: var(--text-muted); font-weight: 700; margin-left: 2px; }
    .plan-desc { width: 100%; font-size: 12px; color: var(--text-muted); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }

    /* 🟢 無料プラン選択時 */
    .plan-card input[value="free"]:checked + .card-content {
        border-color: var(--primary);
        background: var(--primary-light);
        box-shadow: 0 0 0 4px rgba(0, 201, 167, 0.15);
    }
    .plan-card input[value="free"]:checked + .card-content .plan-name { color: var(--primary); }

    /* 🔮 プレミアムプラン選択時 */
    .plan-card input[value="premium"]:checked + .card-content {
        border-color: var(--premium);
        background: var(--premium-light);
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
    }
    .plan-card input[value="premium"]:checked + .card-content .plan-name { color: var(--premium); }

    /* ⚠️ エラーメッセージ (全体) */
    .auth-error { background: #fef2f2; color: #ef4444; padding: 14px 20px; border-radius: 16px; margin-bottom: 24px; font-size: 13px; font-weight: 700; border: 1px solid #fee2e2; }
    .auth-error p { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
    .auth-error p:last-child { margin-bottom: 0; }

    /* 📝 フォーム要素 */
    .form-group { margin-bottom: 24px; }
    .form-group label { display: block; font-weight: 800; margin-bottom: 8px; color: var(--text-main); font-size: 13px; }
    
    .input-wrapper input, .input-wrapper select {
        width: 100%;
        padding: 16px 20px;
        background-color: var(--bg-gray);
        border: 2px solid #edf2f7;
        border-radius: 16px;
        box-sizing: border-box;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-main);
        font-family: inherit;
        outline: none;
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        -webkit-appearance: none;
    }
    
    .input-wrapper input:focus, .input-wrapper select:focus {
        border-color: var(--primary);
        background-color: white;
        box-shadow: 0 0 0 4px var(--primary-light);
    }

    /* フィールド個別エラー & ヘルプテキスト */
    .field-error { color: #ef4444; font-size: 12px; margin: 8px 0 0; font-weight: 700; display: flex; align-items: center; gap: 6px; }
    .field-help { color: var(--text-muted); display: block; margin-top: 8px; line-height: 1.5; font-size: 12px; font-weight: 500; }
    
    .input-wrapper ul { margin: 8px 0 0 16px; padding: 0; color: var(--text-muted); font-size: 12px; font-weight: 500; }
    .input-wrapper li { margin-bottom: 4px; }

    /* 🔘 ボタン */
    .btn-submit {
        width: 100%;
        padding: 18px;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 16px;
        font-weight: 900;
        font-size: 16px;
        cursor: pointer;
        transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        box-shadow: 0 8px 25px rgba(0, 201, 167, 0.3);
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .btn-submit:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(0, 201, 167, 0.4);
        opacity: 0.95;
    }

    /* 🔗 フッターリンク */
    .auth-footer { text-align: center; margin-top: 35px; padding-top: 25px; border-top: 2px dashed #edf2f7; }
    .auth-footer p { color: var(--text-muted); font-size: 13px; font-weight: 500; margin: 0 0 8px; }
    .auth-footer a { color: var(--text-main); font-weight: 900; text-decoration: none; font-size: 14px; transition: 0.2s; }
    .auth-footer a:hover { color: var(--primary); text-decoration: underline; }

    /* 📱 レスポンシブ対応 */
    @media (max-width: 768px) {
        .auth-container { padding: 20px 15px; }
        .auth-card { padding: 40px 25px; border-radius: 24px; }
        .auth-title { font-size: 24px; }
        .auth-icon { font-size: 36px; }
        .plan-flex { grid-template-columns: 1fr; gap: 12px; }
        .card-content { min-height: 0; padding: 20px 16px; text-align: center; }
        .plan-name { margin-bottom: 4px; }
        .plan-price { margin-bottom: 0; font-size: 20px; }
        .plan-desc { text-align: center; }
        .input-wrapper input, .input-wrapper select { padding: 14px 16px; font-size: 14px; }
    }