.board-page .board-shelf-post-add {
    width: calc(100% - 24px);
    min-height: 40px;
    margin: 0 12px 12px;
    border: 1px dashed #466489;
    border-radius: 12px;
    background: rgba(20, 34, 57, 0.72);
    color: #b8c7da;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.board-page .board-shelf-post-add span {
    margin-right: 4px;
    font-size: 18px;
    line-height: 1;
}

.board-page .board-shelf-post-add:hover,
.board-page .board-shelf-post-add:focus-visible {
    border-color: #60a5fa;
    background: #17304f;
    color: #eef6ff;
}

@media (min-width: 761px) {
    .board-page .board-shelf-lanes {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .board-page .board-shelf-lane {
        flex: 0 0 min(340px, calc(100vw - 64px));
    }

    .board-page .board-shelf-add-lane {
        flex: 0 0 88px;
        width: 88px;
        min-height: 88px;
        padding: 10px 7px;
        align-content: center;
        gap: 3px;
        border-radius: 16px;
    }

    .board-page .board-shelf-add-lane span {
        font-size: 26px;
    }

    .board-page .board-shelf-add-lane strong {
        font-size: 11px;
        line-height: 1.3;
    }

    .board-page .board-shelf-add-lane small {
        display: none;
    }
}

body.board-page[data-board-role="student"][data-board-theme="light"] .board-shelf-post-add {
    border-color: #b7c8db;
    background: #f8fbff;
    color: #52667d;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .board-shelf-post-add:hover,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-shelf-post-add:focus-visible {
    border-color: #4f8fca;
    background: #edf6ff;
    color: #24547e;
}