/* myapp/templates/app-deploy-room.html */


/* 3列固定レイアウトのためのスタイル */
.appdeploy-btn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important; /* 3列を強制的に適用 */
    gap: 15px; /* ボタン間のスペース */
    padding: 20px; /* ボタン全体のパディング */
}
/* ボタンの共通スタイル */
.appdeploy-secret-room-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease; /* ホバー時の効果を滑らかに */
}
/* ボタンカラーのカスタマイズ */
.appdeploy-secret-room-btn.btn-danger {
    background-color: #dc3545;
    border-color: #f78d97;
}
.appdeploy-secret-room-btn.btn-success {
    background-color: #28a745;
    border-color: #97f3ac;
}
.appdeploy-secret-room-btn.btn-secondary {
    background-color: #6a59e9;
    border-color: #b39af6;
}
.appdeploy-secret-room-btn.btn-dark {
    background-color: #343a40;
    border-color: #a6b0ba;
}
/* ボタンのホバー効果 */
.appdeploy-secret-room-btn:hover {
    opacity: 0.8;
}
/* ボタン内のアイコンの調整 */
.appdeploy-secret-room-btn i {
    margin-right: 8px;
}

/* ==========================
   レスポンシブ調整
========================== */
/* --- タブレットとPC画面 (769px以上) --- */
@media (min-width: 769px) {
    .appdeploy-btn-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* タブレットとPC画面では3列固定 */
    }
    .appdeploy-secret-room-btn {
        padding: 10px;
        font-size: 0.95rem; /* タブレットとPC画面向けにフォントサイズ調整 */
    }
}
/* --- スマホ画面対応 (768px以下) --- */
@media (max-width: 768px) {
    .appdeploy-btn-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* スマホでは2列に変更 */
    }
    .appdeploy-secret-room-btn {
        padding: 10px;
        font-size: 0.85rem; /* スマホ用にフォントサイズ調整 */
    }
    .appdeploy-secret-room-btn i {
        margin-right: 5px;
    }
}