/**************************/
/* 基本色 */
/**************************/

:root {
    --color-washi: #fffaf0;
    --color-washi-light: #fffdf7;
    --color-washi-dark: #f6ecd8;

    --color-gold-light: #ead9b5;
    --color-gold: #c9a15b;
    --color-gold-dark: #9a6f2f;

    --color-brown: #5c4a32;
    --color-brown-light: #806b4e;

    --color-border: rgba(190, 160, 110, 0.4);

    --color-shadow: rgba(90, 60, 25, 0.12);
}

/**************************/
/* 共通レイアウト */
/**************************/

* {
    box-sizing: border-box;
}

body {
    background-color: var(--color-washi-dark);
    background-image: url('/images/houchi-db-bg-8b13a9bc98bce67b23fe4f6d54c0b9b9.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: var(--color-brown);

    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    line-height: 1.6;
    margin: 20px;
}

.text-center {
    text-align: center;
}

h1,
h2,
h3 {
    font-family: "Noto Serif JP", serif;
    color: var(--color-brown);
}
h2 {
    margin: 0 0 12px;
    font-weight: 600;
}

/**************************/
/* フォーム部品 */
/**************************/

/*---------- フォント ----------*/

button,
input,
select,
textarea {
    font-family: "Noto Sans JP", sans-serif;
}


/*---------- 入力欄共通 ----------*/

input,
select,
textarea {
    box-sizing: border-box;

    font-size: 14px;

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

    background-color: rgba(255, 253, 247, 0.95);
    color: var(--color-brown);

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


/*---------- テキスト入力・セレクト ----------*/

input[type="text"],
select {
    height: 34px;
    padding: 5px 10px;
}


/*---------- テキスト入力 ----------*/

input[type="text"] {
    width: 250px;
}


/*---------- セレクト ----------*/

select {
    width: 180px;
}


/*---------- テキストエリア ----------*/

textarea {
    width: min(600px, 100%);
    min-height: 180px;

    padding: 8px 10px;

    resize: vertical;
}

.textarea-label {
    vertical-align: top;
}

/*---------- フォーカス ----------*/

input:focus,
select:focus,
textarea:focus {
    outline: none;

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

    box-shadow:
            0 0 0 2px rgba(201, 161, 91, 0.15);
}

/**************************/
/* フォーム選択項目 */
/**************************/

.choice-list {
    margin-top: 8px;
}

.choice-list label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.choice-list input[type="checkbox"],
.choice-list input[type="radio"] {
    accent-color: var(--color-gold-dark);

    width: 16px;
    height: 16px;

    vertical-align: middle;
}


/**************************/
/* 選択中項目 */
/**************************/
.selected-skill-effects,
.selected-resonances {
    margin: 10px 0;
}

/**************************/
/* 選択中タグ */
/**************************/

.selected-tag {
    display: inline-block;

    margin: 2px;
    padding: 3px 9px;

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

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

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

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

.selected-tag:hover {
    background-color: var(--color-washi-dark);
    border-color: var(--color-gold);
}


/**************************/
/* テーブル */
/**************************/

.table-cell-long {
    max-width: 1200px;
    white-space: normal;
    overflow-wrap: anywhere;
}


/**************************/
/* セレクトボックス */
/* 環境によっては効かない */
/**************************/

select option {
    background-color: var(--color-washi-light);
    color: var(--color-brown);
}

select option:checked {
    background-color: var(--color-gold-light);
    color: var(--color-brown);
}

/**************************/
/* 区切り線 */
/**************************/

hr {
    border: 0;
    height: 1px;

    background: linear-gradient(
            to right,
            transparent,
            var(--color-gold-light),
            transparent
    );

    margin: 24px 0;
}

/**************************/
/* アコーディオン */
/**************************/

summary {
    margin: 4px 0;
    cursor: pointer;
}

/**************************/
/* メッセージ */
/**************************/

.message {
    padding: 10px 14px;
    margin-bottom: 15px;
    border-radius: 6px;
}

.message-error {
    color: #b91c1c;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
}

.message-success {
    color: #166534;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.message-info {
    color: var(--color-brown);
    background-color: rgba(232, 213, 174, 0.35);
    border: 1px solid var(--color-border);
}

/**************************/
/* 文字色 */
/**************************/
.no-effect {
    color: var(--color-brown-light);
    opacity: 0.75;
}

/**************************/
/* 検索ローディング */
/**************************/

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(255, 250, 240, 0.7);
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    color: #6f5a35;
    font-size: 16px;
    font-weight: bold;
}

.loading-spinner {
    width: 42px;
    height: 42px;

    border: 4px solid #ead9b5;
    border-top-color: #c9a15b;
    border-radius: 50%;

    animation: loading-spin 0.8s linear infinite;
}

@keyframes loading-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}