/* メニューアイテム全体のカード */
.menu-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    width: 100%;           /* カード自体を横幅いっぱいに */
    box-sizing: border-box;
}

/* 各入力欄や select */
.menu-item input[type="text"],
.menu-item select,
.menu-item input[type="url"],
.menu-item textarea {
    flex: 1 1 150px;       /* 最小幅を指定しつつ横幅を均等に広げる */
    box-sizing: border-box;
}

/* textarea は横幅いっぱい */
.menu-item textarea {
    flex-basis: 100%;
}

/* 削除ボタンを右端に寄せる */
.menu-item button.remove-menu {
    flex: 0 0 auto;
    margin-left: auto;
    background-color: #ff6b6b;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .menu-item {
        flex-direction: column;
    }
    .menu-item input,
    .menu-item select,
    .menu-item textarea,
    .menu-item button.remove-menu {
        width: 100%;
        flex: 1 1 auto;
        margin-left: 0;
    }
}