/* 로미위키 우측 사이드바 분류 탭 위젯 */
.lomi-category-sidebar-card {
    display: none;
}

@media (min-width: 1024px) {
    .lomi-category-sidebar-card {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 0.75rem;
        border: 1px solid #e1e8ed;
        border-radius: 0.35rem;
        overflow: hidden;
        background: #fff;
        box-sizing: border-box;
        contain: layout paint;
    }

    .lomi-category-sidebar-head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.18rem;
        padding: 0.55rem 0.7rem;
        border-bottom: 1px solid #e1e8ed;
        background: #f5f8fa;
        box-sizing: border-box;
    }

    .lomi-category-sidebar-head strong {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        color: #111827;
        font-size: 0.92rem;
        line-height: 1.25;
    }

    .lomi-category-sidebar-status {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        color: #6b7280;
        font-size: 0.74rem;
        line-height: 1.25;
        word-break: keep-all;
    }

    .lomi-category-sidebar-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.28rem;
        padding: 0.5rem 0.55rem 0.3rem;
        border-bottom: 1px solid #eef2f5;
        box-sizing: border-box;
    }

    .lomi-category-sidebar-tab {
        flex: 0 0 auto;
        border: 1px solid #d8e0e8;
        border-radius: 999px;
        padding: 0.18rem 0.45rem;
        background: #fff;
        color: #444;
        font-size: 0.74rem;
        line-height: 1.2;
        cursor: pointer;
    }

    .lomi-category-sidebar-tab:hover,
    .lomi-category-sidebar-tab:focus {
        background: #eef4fb;
        outline: none;
    }

    .lomi-category-sidebar-tab.is-active {
        border-color: #7aa7d9;
        background: #e8f2fd;
        color: #1f5f9d;
        font-weight: 700;
    }

    .lomi-category-sidebar-body {
        padding: 0.5rem 0.7rem 0.4rem;
        box-sizing: border-box;
    }

    .lomi-category-sidebar-title {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.4rem;
        margin-bottom: 0.32rem;
        color: #4b5563;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .lomi-category-sidebar-current {
        min-width: 0;
        white-space: normal;
        word-break: keep-all;
    }

    .lomi-category-sidebar-reroll {
        flex: 0 0 auto;
        border: 1px solid #d8e0e8;
        border-radius: 999px;
        padding: 0.05rem 0.35rem;
        background: #fff;
        color: #4b5563;
        font-size: 0.78rem;
        line-height: 1.2;
        cursor: pointer;
    }

    .lomi-category-sidebar-reroll:hover,
    .lomi-category-sidebar-reroll:focus {
        background: #eef4fb;
        outline: none;
    }

    .lomi-category-sidebar-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .lomi-category-sidebar-list li {
        display: block;
        margin: 0;
        padding: 0.18rem 0;
        border-top: 1px solid #f2f4f7;
        line-height: 1.35;
    }

    .lomi-category-sidebar-list li:first-child {
        border-top: 0;
    }

    .lomi-category-sidebar-list a {
        display: -webkit-box;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        color: #1f5f9d;
        font-size: 0.82rem;
        text-decoration: none;
        word-break: keep-all;
    }

    .lomi-category-sidebar-list a:hover,
    .lomi-category-sidebar-list a:focus {
        text-decoration: underline;
    }

    .lomi-category-sidebar-loading,
    .lomi-category-sidebar-empty {
        color: #6b7280;
        font-size: 0.8rem;
    }

    .lomi-category-sidebar-more a {
        color: #6b7280;
        font-size: 0.78rem;
    }

    .lomi-category-sidebar-foot {
        display: flex;
        justify-content: flex-end;
        padding: 0.42rem 0.7rem;
        border-top: 1px solid #e1e8ed;
        background: #fff;
        box-sizing: border-box;
    }

    .lomi-category-sidebar-foot a {
        font-size: 0.78rem;
        color: #6b7280;
        text-decoration: none;
    }

    .lomi-category-sidebar-foot a:hover,
    .lomi-category-sidebar-foot a:focus {
        text-decoration: underline;
    }

    body.theseed-dark-mode .lomi-category-sidebar-card {
        border-color: #777;
        background: #000;
    }

    body.theseed-dark-mode .lomi-category-sidebar-head,
    body.theseed-dark-mode .lomi-category-sidebar-foot {
        border-color: #777;
        background: #000;
        color: #ddd;
    }

    body.theseed-dark-mode .lomi-category-sidebar-tabs,
    body.theseed-dark-mode .lomi-category-sidebar-list li {
        border-color: #333;
    }

    body.theseed-dark-mode .lomi-category-sidebar-tab,
    body.theseed-dark-mode .lomi-category-sidebar-reroll {
        border-color: #666;
        background: #16171a;
        color: #ddd;
    }

    body.theseed-dark-mode .lomi-category-sidebar-tab.is-active {
        border-color: #7aa7d9;
        background: #18324d;
        color: #d9ecff;
    }

    body.theseed-dark-mode .lomi-category-sidebar-title,
    body.theseed-dark-mode .lomi-category-sidebar-loading,
    body.theseed-dark-mode .lomi-category-sidebar-empty,
    body.theseed-dark-mode .lomi-category-sidebar-status,
    body.theseed-dark-mode .lomi-category-sidebar-foot a {
        color: #bbb;
    }
}