/* =========================================================
    Component: Buttons
    File: assets/css/3_components/button.css
    2026 Tokenized Version - Finalized
   ========================================================= */

/* -----------------------------------------------------------
 * 1. ベーススタイル（基本はカプセル型）
 * ----------------------------------------------------------- */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wan-s-2, 8px);
    height: var(--wan-s-14, 56px);
    padding: 0 var(--wan-s-8, 32px);
    font-size: var(--wan-f-size-md);
    font-weight: var(--wan-f-weight-bold);
    line-height: var(--wan-f-lh-none);
    text-decoration: none;
    box-sizing: border-box;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    transition: all var(--wan-motion-base, 0.3s) ease;
    
    /* 基本ルール：カプセル型 */
    border-radius: var(--wan-radius-full, 9999px); 
    
    /* スマホ（デフォルト）では押しやすいよう100%幅 */
    width: 100%;
}

/* PCサイズでの幅調整（769px以上） */
@media screen and (min-width: 769px) {
    .c-btn {
        width: auto;
        min-width: var(--wan-s-40, 160px);
    }
}

/* -----------------------------------------------------------
 * 2. 形状・サイズバリエーション
 * ----------------------------------------------------------- */

/* 角丸タイプ：フォームパーツ等の角丸（12px）に同期 */
.c-btn.-rect {
    border-radius: var(--wan-radius-md, 12px) !important; 
}

/* スモールサイズ：リスト内ボタン等で使用 */
.c-btn.-sm {
    height: var(--wan-s-10, 40px);
    padding: 0 var(--wan-s-5, 20px);
    font-size: var(--wan-f-size-sm);
    min-width: auto; /* 小さいボタンは幅を固定しない */
}

/* -----------------------------------------------------------
 * 3. カラーバリエーション
 * ----------------------------------------------------------- */

/* オレンジ（メインブランド色） */
.c-btn.-orange {
    background-color: var(--wan-color-brand);
    color: var(--wan-color-white);
    box-shadow: 0 4px 15px var(--wan-color-brand-alpha-20);
}

/* オレンジ・アウトライン（白背景＋オレンジ枠） */
.c-btn.-orange-outline {
    background-color: var(--wan-color-white);
    border-color: var(--wan-color-brand);
    color: var(--wan-color-brand);
}

/* ブラック・アウトライン（白背景＋黒枠） */
.c-btn.-black-outline {
    background-color: var(--wan-color-white);
    border-color: var(--wan-color-text);
    color: var(--wan-color-text);
}

/* グレー（リセット・キャンセル・無効用） */
.c-btn.-gray {
    background-color: var(--wan-color-bg-light);
    color: var(--wan-color-text-muted);
    border-color: var(--wan-color-bg-light);
}

/* ホワイト（ギャラリーボタン・高級感演出用） */
.c-btn.-white {
    background-color: #ffffff;
    color: var(--wan-color-text);
    border: 1px solid var(--wan-color-border-light);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* -----------------------------------------------------------
 * 4. ホバー・ユーティリティ
 * ----------------------------------------------------------- */

.c-btn:hover {
    opacity: var(--wan-opacity-hover, 0.8);
    transform: translateY(-2px);
    box-shadow: var(--wan-shadow-lg);
}

/* ホワイトボタン専用のホバー微調整 */
.c-btn.-white:hover {
    background-color: var(--wan-color-bg-light);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

/* ユーティリティ：強制100%幅 */
.c-btn.-full {
    width: 100% !important;
}

/* ユーティリティ：幅を固定せずコンテンツに合わせる */
.c-btn.-auto {
    width: auto !important;
    min-width: 0 !important;
    padding-inline: var(--wan-s-5, 20px);
}