.parent {
    display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center; /* 縦方向中央 */
    min-height: 5vh;
    text-align: center;
}

/* ==== 中心枠 ==== */
.box {
    position: relative;
    width: 480px;
    height: 300px;
    border: 2px solid #3a77d2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 12px;
}

.box2 {
    position: relative;
    width: 480px;
    height: 50px;
    border: 2px solid #000000;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 12px;
}

.actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

/* ==== ボタン ==== */
/* ボックス内4隅のボタン配置 */
.box .btn {
    position: absolute;
    width: 190px;
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    /* background: #3a77d2; */
    cursor: pointer;
}

/* ホバー効果 */
/* .box .btn:hover {
    background: #315fa7;
} */

/* 4隅の座標 */
.box .btn-tl {
    top: 75px;
    left: 30px;
    background: #1c9442;
} /* 左上 */
.box .btn-tr {
    top: 75px;
    right: 30px;
    background: #3a77d2;
} /* 右上 */
.box .btn-bl {
    bottom: 75px;
    left: 30px;
} /* 左下 */
.box .btn-br {
    bottom: 75px;
    right: 30px;
} /* 右下 */

/* 短め単独ボタン */
.btn {
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 0;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #3a77d2;
    cursor: pointer;
}

.btnB {
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 0;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #176e37;
    cursor: pointer;
}

.btnC {
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 0;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #0b80a1;
    cursor: pointer;
}

.btnD {
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 0;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #ec59b9;
    cursor: pointer;
}

.is-placeholder {
    visibility: hidden; /* 幅は維持、見た目だけ消す */
    pointer-events: none; /* 念のため無効化 */
}

/* 長め単独ボタン */
.btn2 {
    width: 175px;
    height: 40px;
    padding: 0 0;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #3a77d2;
    cursor: pointer;
}

.btn3 {
    width: 175px;
    height: 40px;
    padding: 0 0;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #d23a3a;
    cursor: pointer;
}

.btn4 {
    width: 175px;
    height: 40px;
    padding: 0 0;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #2b992b;
    cursor: pointer;
}

.btn5 {
    width: 175px;
    height: 40px;
    padding: 0 0;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #d2ac3a;
    cursor: pointer;
}

.btn6 {
    width: 175px;
    height: 40px;
    padding: 0 0;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #d2683a;
    cursor: pointer;
}

/* ===== フォーム ===== */
.filters {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
}

.filters.two-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
}

.filters.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ★ 3列固定 */
    gap: 16px 32px;

    width: 900px; /* 中央寄り防止 */
    max-width: 100%;
    margin: 0 auto;
}

/* 横並びラベル＋入力領域（共通の行）*/
.filter-row {
    display: grid;
    grid-template-columns: 180px 1fr; /* ラベル列を固定幅、入力欄は残り幅 */
    column-gap: 10px;
    align-items: center; /* 縦中央揃え */
    margin: 3px 0;
}

.filter-row2 {
    display: grid;
    grid-template-columns: 480px 1fr; /* ラベル列を固定幅、入力欄は残り幅 */
    column-gap: 10px;
    align-items: center; /* 縦中央揃え */
    margin: 3px 0;
}

.pair {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 左側ラベル：横書きで左揃え */
.field-label {
    text-orientation: initial; /* 縦書き解除 */
    writing-mode: horizontal-tb; /* 横書き */
    text-align: left; /* 左揃え */
    font-weight: 600;
    color: #2c3e50;
    min-width: 105px; /* 固定幅はgridで管理するので不要 */
}

/* 右側の入力領域 */
.field-body {
    width: 100%;
    min-width: 0;
}

/* ===== チェックボックス ===== */
/* チェックボックスの行だけ特別扱い（右側をはみ出し表示可能に） */
.filter-row.cb-row > .field-body {
    overflow: visible; /* 右側へはみ出しを許可 */
    position: relative; /* stacking context を安定化 */
}

/* チェックボックス群：横1列・縮めず・改行させない・必要幅だけ広げる */
.cb-grid {
    display: flex;
    flex-wrap: nowrap; /* 常に1行 */
    gap: 16px;
    align-items: center;
    white-space: nowrap; /* ラベルも改行しない */
    width: 100px;
}

.cb-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.cb-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* ===== 入力＋「を含む」を横並び、入力幅は全角15文字目安 ===== */
.input-with-suffix {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* 書名全体：縦に2行 */
.title-two-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 各行は横並び */
.title-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 入力欄を横に伸ばす */
.title-input {
    width: 180px; /* 必要に応じて調整 */
}

/* テキストは折り返さない */
.or-label,
.suffix {
    white-space: nowrap;
}

.input-with-suffix .text-input {
    /* 全角約15字ぶんの幅を確保 */
    inline-size: 15em;
    flex: 0 0 auto;
    max-inline-size: 28em;
}

.input-with-suffix input[type="text"] {
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #c7d0da;
    border-radius: 6px;
    font-size: 14px;
}

.input-with-suffix input[type="number"] {
    width: 50%;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #c7d0da;
    border-radius: 6px;
    font-size: 14px;
}

.input-with-suffix .suffix {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #666;
    font-size: 14px;
}

/* ===== 読み取り専用 ===== */
.input-with-suffix-readonly {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.input-with-suffix-readonly input[readonly] {
    background-color: #eee;
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #303030;
    border-radius: 6px;
    font-size: 14px;
}

/* ===== ラジオボタン ===== */
/* ラジオボタン横並べ */
.radio-grp {
    display: flex; /* 横並び */
    gap: 16px; /* ラベル間の余白 */
    flex-wrap: nowrap; /* 折り返ししない */
    align-items: center; /* 縦位置を揃える */
}

.radio-grp label {
    display: flex;
    align-items: center;
    gap: 4px; /* ラジオと文字の間隔 */
}

/* テーブル */
table {
    margin-left: auto;
    margin-right: auto;
}

table th {
    padding: 8px; /* 線と文字の間に8pxの余白 */
    background-color: #d0d0d0;
}
table td {
    padding: 8px; /* 線と文字の間に8pxの余白 */
    background-color: white;
}

/* 文字の揃え位置 */
.left {
    text-align: left;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}

/* ===== Aパターン：テーブル全体 ===== */
.order-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* 罫線・余白・はみ出し制御 */
.order-table th,
.order-table td {
    padding: 4px 6px;
    border: 1px solid #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* 折り返したいセルだけ（書名・行摘要など） */
.order-table td.wrap {
    white-space: normal;
}

/* 見出し */
.order-table th {
    background: #f7f7f7;
    font-weight: 600;
}

/* 位置 */
.center {
    text-align: center;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}

/* 区切り行 */
.order-table .divider-row {
    background: #f5f5f5;
    font-weight: 700;
}

/* ===== colgroup：11列（No 含む）合計100% ===== */
.order-table col.col-no {
    width: 5%;
}
.order-table col.col-pub {
    width: 16%;
}
.order-table col.col-isbn {
    width: 14%;
}
.order-table col.col-subj {
    width: 14%;
}
.order-table col.col-teika {
    width: 8%;
}
.order-table col.col-hontai {
    width: 8%;
}
.order-table col.col-qty {
    width: 6%;
}
.order-table col.col-kenpon {
    width: 6%;
}
.order-table col.col-grade {
    width: 5%;
}
.order-table col.col-teacher {
    width: 10%;
}
.order-table col.col-status {
    width: 8%;
}

/* ===== 入力欄：列幅内に小さく収める ===== */
.order-table input.inp {
    width: 100%;
    box-sizing: border-box;
    height: 2.8rem;
    padding: 0 6px;
    font-size: 1.6rem;
    border: 1px solid #aaa;
    border-radius: 2px;
    background: #fff;
}

/* 数値入力は右寄せ（見た目が締まる） */
.order-table .inp-qty {
    text-align: right;
}

/* 学年は短いので中央寄せ */
.order-table .inp-grade {
    text-align: center;
}

/* 行摘要（colspan=4）は長いので少し高さを出してもOK */
.order-table .inp-note {
    height: 2rem; /* 1行想定なら1.8〜2.0で調整 */
}

/* 学校入力セル・ISBNセル */
.order-table td.school-cell,
.order-table td.isbn-cell {
    overflow: visible;
    position: relative;
    z-index: 1;
}
.order-table td.school-cell:focus-within,
.order-table td.isbn-cell:focus-within {
    z-index: 9998;
}

/* 共通ポップアップ */
.suggestions-popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
    box-sizing: border-box;

    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    max-height: 320px;
    overflow: auto;

    /* 幅はJSで固定指定するが、安全側の上限は十分大きく */
    min-width: 260px;
    max-width: min(1200px, 95vw);
    font-size: 14px;
}

.suggestions-popup ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.suggestions-popup li {
    padding: 8px 12px;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestions-popup li:hover,
.suggestions-popup li.active {
    background: #f2f6ff;
}

.suggestions-popup li.empty {
    color: #777;
    cursor: default;
}

.actions {
    display: flex;
    align-items: center; /* ← 全部を縦中央に */
    gap: 12px;
}

.page-num {
    font-size: 15px; /* btn と揃える */
    font-weight: 600;
    line-height: 40px; /* btn の高さに合わせる */
    height: 40px;
    display: inline-flex;
    align-items: center;
}

.status-cell {
    font-weight: bold;
}
.isBlue {
    color: blue;
}
.isPurple {
    color: purple;
}
.isGreen {
    color: green;
}
.isRed {
    color: red;
}