body {
        margin: 0;
        font-family: "Noto Serif JP", serif;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
    }

    /* アクセシビリティ用: 画面非表示だがスクリーンリーダー向けラベル */
    .visually-hidden {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    /* ==== ヘルプボタン ==== */
    .help-btn {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 2100;
        background: #ffda6a;
        color: #402800;
        border: 2px solid #b8860b;
        border-radius: 24px;
        font-size: 14px;
        padding: 8px 14px;
        cursor: pointer;
        font-family: inherit;
        font-weight: 600;
        letter-spacing: .5px;
        transition: background .2s, transform .15s;
    }
    .help-btn:hover { background:#ffe9a8; }
    .help-btn:active { transform: translateY(1px); }
    .help-btn:focus { outline:2px solid rgba(255,170,40,.55); outline-offset:2px; }

    /* ヘルプモーダル追加微調整（既存 modal-content 再利用） */
    .help-modal-content { max-width:560px; }

    .close-help {
        cursor: pointer;
        font-size: 24px;
        line-height: 1;
        color: #666;
        padding: 4px 8px;
        border-radius: 6px;
        transition: background .2s, color .2s, transform .15s;
        user-select: none;
        position: absolute;
        top: 6px;
        right: 6px;
    }
    .close-help:hover { background:#ececec; color:#333; }
    .close-help:active { transform: scale(.9); }
    .close-help:focus { outline:2px solid #888; outline-offset:2px; }

    /* 検索バー拡大＆見やすさ */
    #searchTsundoku {
        font-size: 16px;
        padding: 9px 40px;
        border: 2px solid #555;
        border-radius: 9px;
        background:#fffffa;
        transition: border-color .2s;
    }
    #searchTsundoku:focus { outline:2px solid rgba(255,180,40,0.55); outline-offset:2px; border-color:#222; }

    :root {
        /* 本棚の最大横幅（調整しやすいよう変数化） */
        --shelf-max-width: 1000px; 
        /* モーダルサイズ可変用 */
        --modal-min-width: 480px;
        --modal-max-width: 520px;
        --modal-width-vw: 80vw;
        --modal-pad-min: 13px;
        --modal-pad-max: 24px;
    }

    .bookshelf {
        width: 100%;
	max-width: var(--shelf-max-width);
        height: auto;
        padding-bottom: 72px;
        background: #fff;
        /* 枠色を柔らかく (#555 -> rgba で薄く) */
        border: 5px solid #777;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-image: repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 158px,
            rgba(110,110,110,0.55) 162px
        );
        box-sizing: border-box;
        transition: border-color .3s;
    }

    .shelf {
        display: flex;
        align-items: flex-end;
        padding: 2px 4px;
        height: 158px; /* 122 -> 158 */
        overflow-x: auto;
        gap: 2px;
    }

    .book {
        /* 固定サイズ除去（個別に inline 指定） */
        margin: 0 1px;
    background: var(--book-bg, linear-gradient(135deg,#ffffff 0%,#f5f5f5 45%,#e8e8e8 100%));
    border: 1.5px solid var(--book-border, #555);
        cursor: pointer;
        transition: transform 0.2s;
    border-radius: 2px; /* 丸みを控えめに */
        position: relative;
    /* 影除去 */
    }

    .book:hover {
        transform: scale(1.1);
    }

    /* ツールチップ削除対応: 位置指定残し不要 */
    .book-horizontal { position: relative; }

    /* ドロップ領域ハイライト */
    .drop-target-highlight { outline:2px dashed #ffb347; outline-offset:2px; }

    /* 読了移動アニメーション */
    .fly-to-shelf {
        animation: flyShelf .55s cubic-bezier(.55,.08,.4,1.1) forwards;
        z-index: 50;
    }
    @keyframes flyShelf {
        0%   { transform: translate(var(--from-x,0), var(--from-y,0)) scale(.9) rotate(-3deg); opacity:1; }
        70%  { transform: translate(0,0) scale(1.08) rotate(1deg); }
        100% { transform: translate(0,0) scale(1) rotate(0); opacity:1; }
    }

    /* 積読ドラッグ中 */
    .dragging { opacity: .45; filter: contrast(.8) saturate(.8); }

    /* 検索一致ハイライト: 影無しで僅かな拡大のみ */
    .search-hit {
        transform: scale(1.01);
        transition: transform .18s;
    }
    .book.search-hit:hover { transform: scale(1.15); }
    .book-horizontal.search-hit:hover { transform: scale(1.12); }
    .book.search-hit { transform-origin: center bottom; }
    .book-horizontal.search-hit { transform-origin: center; }

    /* 非一致本: 半透明化（表示は維持） */
    .filtered-out {
        opacity: .4;
        filter: saturate(.65) contrast(.9);
        transition: opacity .25s, filter .25s;
    }

    .chair {
        position: absolute;
        bottom: -40px;
        left: -60px;
        transform: none;
        width: 380px;
        height: 24px;
        border: 3px solid #555;
        background: #fff;
    }

    /* 変更後: 積読スタック（上から下へ） */
    .stacked-books {
        position: absolute;
        bottom: -14px;
        left: 34px;
        transform: none;
        display: flex;
        flex-direction: column; /* 上から下へ積む */
        align-items: center;
    }

    .book-horizontal {
        /* 追加: 横ずらし用に relative 指定 */
        position: relative;
    margin: 2px 0;
    background: var(--book-bg, linear-gradient(90deg,#ffffff 0%,#f4f4f4 55%,#e7e7e7 100%));
    border: 1px solid var(--book-border, #555);
        cursor: pointer;
    transform: translateY(-52px);
        opacity: 0;
        animation: stackDown 0.4s forwards;
    border-radius: 3px; /* 積読の丸み縮小 */
    /* 影除去 */
    }

    .stacked-books {
        /* 幅が違っても左揃え */
        align-items: flex-start;
    }

    @keyframes stackDown {
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background: #fffdf5;
        padding: clamp(var(--modal-pad-min), 4vw, var(--modal-pad-max));
        border-radius: 8px;
        width: clamp(var(--modal-min-width), var(--modal-width-vw), var(--modal-max-width));
        box-sizing: border-box;
        position: relative; /* 右上配置用 */
        max-height: 90vh;
        overflow-y: auto;
    }

    /* 幅を広げたい特別モーダル用（必要なら要素に class 追加） */
    .modal-content.wide {
        --modal-max-width: 560px;
        --modal-width-vw: 72vw;
    }
    #modalTitle {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: clamp(18px, 2.2vw, 26px);
        margin: 0 0 6px;
        line-height: 1.2;
    }
    .memo-header {
        display:flex;
        align-items:center;
        justify-content: space-between;
        margin-top:4px;
    }
    .memo-label { font-size:12px; font-weight:600; }
    .memo-tools { display:flex; gap:6px; }
    .mini-btn {
        font-size: 11px;
        padding: 4px 8px;
        border: 1px solid #888;
        background: #f2f2f2;
        border-radius: 4px;
        cursor: pointer;
        line-height:1.1;
    }
    .mini-btn:hover { background:#e6e6e6; }
    .memo-area {
        width:100%;
        height:220px;
        resize: vertical;
        font-family: inherit;
        font-size: 16px; line-height:1.5;
        box-sizing:border-box;
        margin-top:4px;
        padding:8px;
        border:1px solid #bbb;
        border-radius:6px;
        background:#fff;
    }

    .close-btn {
        cursor: pointer;
        font-size: 26px;
        line-height: 1;
        color: #666;
        padding: 4px 8px;
        border-radius: 6px;
        transition: background .2s, color .2s, transform .15s;
        user-select: none;
        position: absolute;
        top: 6px;
        right: 6px;
    }
    .close-btn:hover { background:#ececec; color:#333; }
    .close-btn:active { transform: scale(.9); }
    .close-btn:focus { outline:2px solid #888; outline-offset:2px; }

    .modal-hint {
        font-size: 11px;
        color: #777;
        margin: -4px 0 8px;
        text-align: right;
        letter-spacing:.3px;
    }

    form {
        margin: clamp(8px, 2vw, 18px) 0;
        display: flex;
        gap: 10px; /* 追加: 指定の8px間隔 */
    flex-wrap: nowrap; /* 一列配置 */
    align-items: flex-start; /* 上側に詰める */
    }
    form input {
        padding: 10px 30px; /* 検索バーと合わせる */
        flex: 1 1 200px;
        min-width: 0;
        box-sizing: border-box;
        font-size: 16px;
        border: 2px solid #555; /* 統一 */
        border-radius: 8px;
        background: #fffffa;
        transition: border-color .2s;
    }
    form input:focus { outline:2px solid rgba(255,180,40,0.55); outline-offset:2px; border-color:#222; }

    form button {
        border-radius: 8px;
        border: 2px solid #555;
        background:#fffef6;
        cursor:pointer;
        transition: background .2s, transform .15s;
    }
    form button:hover { background:#fff6d8; }
    form button:active { transform: translateY(1px); }

    /* 積読追加ボタン特化スタイル */
    form button[type="submit"] {
        background: #ffffff; /* ビビッドオレンジ */
        border-color: #fdd764;
        color: #462a00;
        border-radius: 999px; /* 丸っこく */
        font-weight: 600;
        padding: 10px 22px;
        letter-spacing: .5px;
        transition: background .18s, transform .15s;
    }
    form button[type="submit"]:hover {
        background: #ffd364; /* 薄黄色 */
        color:#3a2600;
    }
    form button[type="submit"]:active {
        background: #ffd36a;
        transform: translateY(1px);
    }
    form button[type="submit"]:focus {
        outline:2px solid rgba(255,200,80,0.65);
        outline-offset:2px;
    }
    form button {
        padding: clamp(6px, 1.2vw, 10px) clamp(14px, 2.4vw, 20px);
        flex: 0 0 auto;
    }

    /* 画面幅が狭い時の追加調整 */
    @media (max-width: 620px) {
        body { padding: clamp(8px, 4vw, 24px); }
        .shelf { height: 134px; padding: 4px 2px; }
        .bookshelf { border-width: 3px; }
        .chair { left: -20px; transform: scale(.85); }
        .stacked-books { left: 18px; }
    }

    @media (max-width: 420px) {
        .shelf { height: 122px; }
        .chair { display: none; }
    }

    /* 色スウォッチ */
    #coverColorChoices .swatch {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        border: 1px solid rgba(0,0,0,0.4);
        cursor: pointer;
        position: relative;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size: 14px;
        color:#fff;
        font-weight:bold;
        user-select:none;
        transition: transform .15s;
    }
    #coverColorChoices .swatch:hover { transform: scale(1.12); }
    #coverColorChoices .swatch.selected { outline:2px solid #222; }

    /* 背表紙タイトル */
    .spine-title {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Serif JP", serif;
        font-weight: 600;
    color: var(--spine-color, #222);
    -webkit-text-stroke: 0.1px rgba(255,255,255,0.6);
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 2px;
        box-sizing: border-box;
        pointer-events: none; /* クリック透過 */
        user-select: none;
        letter-spacing: .5px;
    }
    .spine-title.vertical {
        writing-mode: vertical-rl;
        /* 回転を除去して正しい向きに */
    font-size: var(--spine-font-size, 10px);
    text-orientation: upright; /* ラテン文字を縦積み */
    white-space: normal;
        line-height: 1.1;
    }
    .spine-title.horizontal {
    font-size: var(--spine-font-size, 10px);
        justify-content: flex-start;
        padding-left: 6px;
        line-height: 1;
        white-space: nowrap;
    }

    /* 仕切り削除に伴い関連スタイル除去 */