/* --- Bulma Layout Re-construction --- */
.columns {
    display: flex;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
}

.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.75rem;
}

/* is-9 (75%), is-3 (25%) の再現 */
.column.is-9 {
    flex: none;
    width: 75%;
}

.column.is-3 {
    flex: none;
    width: 25%;
}

/* スマホ対応（タブレット以下で縦並び） */
@media screen and (max-width: 768px) {
    .columns {
        flex-direction: column;
    }
    .column.is-9, .column.is-3 {
        width: 100%;
    }
}


/* --- Bulma Modal Re-construction --- */
.modal {
    display: none; /* 通常は非表示 */
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 1000;
}

.modal.is-active {
    display: flex; /* JSでクラスが付与されたら表示 */
}

.modal-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10, 10, 10, 0.86);
}

.modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    width: 640px;
    max-width: 95%;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.modal-card-head, .modal-card-foot {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #dbdbdb;
}

.modal-card-head{
    background-color: var(--primary-blue);
}

.modal-card-foot {
    border-bottom: none;
    border-top: 1px solid #dbdbdb;
    justify-content: flex-end;
}

.modal-card-body {
    padding: 20px;
    overflow-y: auto;
    background-color: #fff;
    flex-grow: 1;
}

.modal-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    flex-grow: 1;
    color: #fff;
}

/* 閉じるボタン（×） */
.delete {
    background: rgba(10,10,10,.2);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    display: inline-block;
    height: 20px; width: 20px;
    position: relative;
}
.delete::before, .delete::after {
    background-color: #fff;
    content: "";
    display: block;
    left: 50%; position: absolute; top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    width: 50%; height: 2px;
}
.delete::after { transform: translateX(-50%) translateY(-50%) rotate(-45deg); }


/* --- Bulma Elements Re-construction --- */
.input, .textarea {
    width: 100%;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    color: #363636;
    padding: calc(0.75em - 1px) calc(1em - 1px);
    font-size: 1rem;
}

.input:focus, .textarea:focus {
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 0 0.125em rgba(26, 115, 232, 0.25);
}

.tag {
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    color: #4a4a4a;
    display: inline-flex;
    font-size: .75rem;
    height: 2em;
    padding-left: .75em; padding-right: .75em;
    white-space: nowrap;
}

.tag.is-light { background-color: #eff1f3; color: #383d41; }

/* ヘルパークラス */
.is-flex { display: flex !important; }
.is-align-items-center { align-items: center !important; }
.is-flex-wrap-wrap { flex-wrap: wrap !important; }
.has-text-centered { text-align: center !important; }
.has-text-grey { color: #7a7a7a !important; }
.is-size-7 { font-size: 0.75rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 0.75rem !important; }

/* 本文用の色（JSが置換対象にするもの） */
.has-text-danger { color: #f14668 !important; }
.has-text-link { color: #485fc7 !important; }
.has-text-weight-semibold { font-weight: 600 !important; }
.has-text-weight-bold { font-weight: 700 !important; }
.is-size-4 { font-size: 1.3rem !important; }
.is-size-3 { font-size: 1.5rem !important; }

/* --- _list.html 用の Bulma 互換スタイル --- */

/* boxクラス: 掲示板のレスを囲む白い箱 */
.box {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
    color: #4a4a4a;
    display: block;
    padding: 1.25rem;
}

/* contentクラス: 本文のテキスト整形 */
.content {
    word-break: break-word; /* 長いURLなどで箱を突き抜けないように */
}
.content p {
    margin-bottom: 1em;
}
/* 本文内のリンクや引用など、最低限の装飾 */
.content a {
    color: #485fc7;
    text-decoration: none;
}
.content a:hover {
    text-decoration: underline;
}

/* is-small: ボタンを少し小さくする */
.button.is-small {
    border-radius: 2px;
    font-size: 0.75rem;
    height: 2.25em; /* Bulmaの標準的な高さ */
    padding-left: 0.75em;
    padding-right: 0.75em;
}

/* フォームとボタンの間の余白 */
.mt-2 { margin-top: 0.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 0.75rem !important; }

/* フレックスボックスの微調整（ヘッダーの横並び） */
.is-flex { display: flex !important; }
.is-align-items-center { align-items: center !important; }
.is-flex-wrap-wrap { flex-wrap: wrap !important; }

/* button共通、あるいは .is-light に追記 */
.button {
    white-space: nowrap;      /* 文字を絶対に改行させない */
    min-width: fit-content;   /* 中身に合わせて幅を確保する */
}

/* モーダル内の「コピー」ボタンを名指しで調整 */
#copyTitleBtn, #copyHtmlBtn {
    min-width: 100px;         /* 「コピー」の3文字なら100pxあれば十分余裕があります */
    flex-shrink: 0;           /* 親がflexの時にボタンが潰されるのを防ぐ（重要！） */
}