/**************************/
/* 検索・登録・編集フォーム */
/**************************/

/* 共通 */
.form-area,
.form-edit-detail-area {
    width: min(1400px, calc(100% - 40px));

    padding: 15px 20px;
    margin-bottom: 20px;

    background: rgba(255, 253, 247, 0.92);
    border: 1px solid var(--color-border);
    border-radius: 10px;

    box-shadow: 0 3px 12px var(--color-shadow);
}

.form-delete {
    display: inline;
}

.form-summary {
    margin-bottom: 10px;
    font-weight: bold;
}

/* 副将検索画面　検索フォーム */
.character-search-form,
.character-registration-form {
    width: min(1100px, calc(100% - 40px));
}

/* キーワード検索エリア */
.keyword-search {
    position: relative;
    margin-bottom: 22px;

    width: 560px;
}

.keyword-search input {
    width: 100%;
    height: 34px;

    padding-right: 42px;

    margin-right: 0;
    margin-bottom: 8px;
}

.keyword-search-button {
    position: absolute;

    top: 0;
    right: 0;

    width: 34px;
    height: 34px;

    padding: 7px;

    border: 1px solid var(--color-gold-light);
    border-radius: 0 6px 6px 0;

    background-color: var(--color-washi-light);

    cursor: pointer;

    transition:
            background-color 0.15s ease,
            border-color 0.15s ease;
}

.keyword-search-button:hover {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold);
}

.keyword-search-button img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* 条件選択エリア */
.selection-area {
    margin-top: 15px;
}

/* 操作エリア */
.form-actions {
    margin-top: 20px;
}

/**************************
 構成効果セレクター（状態管理画面）
**************************/

.effect-selector {
    margin-top: 10px;
}


/* 検索欄 */
.effect-search {
    margin-top: 5px;
}

.effect-search input {
    width: 300px;
}


/* 検索メッセージ */
.effect-search-message {
    margin-top: 6px;
    color: var(--color-brown-light);
    font-size: 14px;
}


/* 検索結果 */
.effect-search-results {
    max-height: 300px;
    overflow-y: auto;

    margin-top: 8px;
    padding: 6px 10px;

    background-color: rgba(255, 253, 247, 0.8);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}


/* 検索結果1件 */
.effect-search-item {
    display: block;

    padding: 5px 4px;
    margin: 0;

    cursor: pointer;
    border-radius: 4px;
}


/* マウスを乗せたとき */
.effect-search-item:hover {
    background-color: rgba(246, 226, 194, 0.55);
}


/* チェックボックス */
.effect-search-item input[type="checkbox"] {
    margin-right: 6px;
}


/* 選択中エリア */
.selected-effects-area {
    margin-top: 15px;
}

.selected-effects-area h3 {
    margin: 0 0 8px;
}


/* 選択中の効果一覧 */
.selected-effects {
    max-width: 1200px;

    padding: 6px;

    background-color: rgba(246, 236, 216, 0.55);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}


/* 選択中の効果1件 */
.selected-effect {
    display: flex;
    align-items: center;

    padding: 7px 8px;
    margin-bottom: 5px;

    background-color: rgba(255, 253, 247, 0.95);
    border: 1px solid rgba(190, 160, 110, 0.3);
    border-radius: 5px;
}


/* 最後の要素だけmarginなし */
.selected-effect:last-child {
    margin-bottom: 0;
}


/* ドラッグハンドル */
.drag-handle {
    margin-right: 8px;

    color: var(--color-gold-dark);

    cursor: grab;
    user-select: none;
}


/* ドラッグ中 */
.selected-effect:active .drag-handle {
    cursor: grabbing;
}


/* 効果名 */
.selected-effect-name {
    flex: 1;
}


/* 削除ボタン */
.selected-effect .btn-delete {
    margin-left: 10px;
}