/* ==========================================================================
   PPDL 공통 UI 레이어
   기존 색·구성은 그대로 두고, 화면마다 달랐던 간격·높이·모서리·전환 효과를 맞춘다.
   body 클래스: page-admin(관리자) / page-account(마이페이지) / page-order(장바구니·주문)
   ========================================================================== */
:root {
    --ppdl-ink: #5f5f5f;
    --ppdl-muted: #9a9a9a;
    --ppdl-line: #e6e6e6;
    --ppdl-line-strong: #d6d6d6;
    --ppdl-surface: #ffffff;
    --ppdl-surface-soft: #f7f7f7;
    --ppdl-radius-sm: 8px;
    --ppdl-radius: 12px;
    --ppdl-radius-lg: 16px;
    --ppdl-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    --ppdl-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
    --ppdl-control-h: 42px;
    --ppdl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ppdl-gap: 16px;
}

/* --------------------------------------------------------------------------
   애니메이션
   -------------------------------------------------------------------------- */
/* transform 대신 translate/scale 개별 속성을 써서, 애니메이션이 끝난 뒤에도
   호버 시 transform 이동(카드 들림 등)을 막지 않게 한다 */
@keyframes ppdl-fade-up {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes ppdl-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ppdl-pop {
    from { opacity: 0; translate: 0 12px; scale: 0.98; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

/* 페이지 진입.
   fill-mode 는 backwards 만 쓴다. both 로 두면 효과가 끝난 뒤에도 쌓임 맥락이 남아
   main 안의 모달이 어두운 배경 아래로, 표 행 안의 드롭다운이 다음 행 아래로 깔린다. */
main {
    animation: ppdl-fade 0.35s var(--ppdl-ease) backwards;
}

/* 스크롤 진입 (main.js 가 html.reveal-on 을 붙였을 때만 숨긴다) */
html.reveal-on [data-reveal]:not(.is-revealed) {
    opacity: 0;
    translate: 0 18px;
}

html.reveal-on [data-reveal] {
    transition: opacity 0.6s var(--ppdl-ease), translate 0.6s var(--ppdl-ease);
}

/* 목록 항목 순차 등장 */
.ppdl-stagger > * {
    animation: ppdl-fade-up 0.4s var(--ppdl-ease) backwards;
}

.ppdl-stagger > *:nth-child(2) { animation-delay: 0.03s; }
.ppdl-stagger > *:nth-child(3) { animation-delay: 0.06s; }
.ppdl-stagger > *:nth-child(4) { animation-delay: 0.09s; }
.ppdl-stagger > *:nth-child(5) { animation-delay: 0.12s; }
.ppdl-stagger > *:nth-child(6) { animation-delay: 0.15s; }
.ppdl-stagger > *:nth-child(7) { animation-delay: 0.18s; }
.ppdl-stagger > *:nth-child(8) { animation-delay: 0.21s; }
.ppdl-stagger > *:nth-child(n+9) { animation-delay: 0.24s; }

/* 공용 모달: 열릴 때 배경은 서서히, 내용은 살짝 떠오르며 */
.custom-modal.active,
.search-modal,
.policy-modal {
    animation: ppdl-fade 0.2s ease both;
}

.custom-modal.active .custom-modal-content,
.search-modal .search-modal-content,
.policy-modal .policy-modal-content {
    animation: ppdl-pop 0.28s var(--ppdl-ease) both;
}

.modal.fade .modal-dialog {
    transform: translateY(16px) scale(0.98);
    transition: transform 0.28s var(--ppdl-ease), opacity 0.28s var(--ppdl-ease);
}

.modal.show .modal-dialog {
    transform: none;
}

.offcanvas {
    transition: transform 0.32s var(--ppdl-ease), visibility 0.32s;
}

/* 링크·입력 공통 전환 */
a,
.form-control,
.form-select {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html.reveal-on [data-reveal]:not(.is-revealed) {
        opacity: 1;
        translate: none;
    }
}

/* --------------------------------------------------------------------------
   폼 컨트롤: 관리자·마이페이지·주문 화면에서 높이를 맞춘다
   -------------------------------------------------------------------------- */
:is(.page-admin, .page-account, .page-order) .form-control:not(textarea),
:is(.page-admin, .page-account, .page-order) .form-select {
    min-height: var(--ppdl-control-h);
}

:is(.page-admin, .page-account, .page-order) .form-control,
:is(.page-admin, .page-account, .page-order) .form-select {
    border-color: var(--ppdl-line-strong);
    border-radius: var(--ppdl-radius-sm);
    color: var(--ppdl-ink);
    font-size: 0.92rem;
}

:is(.page-admin, .page-account, .page-order) .form-control:focus,
:is(.page-admin, .page-account, .page-order) .form-select:focus {
    border-color: #9a9a9a;
    box-shadow: 0 0 0 3px rgba(112, 112, 112, 0.15);
}

:is(.page-admin, .page-account, .page-order) .form-label {
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ppdl-ink);
}

:is(.page-admin, .page-account, .page-order) .form-text,
:is(.page-admin, .page-account, .page-order) small.text-muted {
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   관리자 공통
   -------------------------------------------------------------------------- */
.page-admin main {
    padding-bottom: 48px;
}

/* 페이지 머리: 제목(왼쪽) + 동작 버튼(오른쪽) */
.admin-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 32px 0 20px;
}

.admin-page-head h1,
.admin-page-head h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--ppdl-ink);
    letter-spacing: -0.3px;
}

.admin-page-head p {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: var(--ppdl-muted);
}

.admin-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 흰 패널 */
.admin-panel,
.page-admin .card {
    background: var(--ppdl-surface);
    border: 1px solid var(--ppdl-line);
    border-radius: var(--ppdl-radius);
    box-shadow: var(--ppdl-shadow);
}

.admin-panel {
    padding: 20px;
    margin-bottom: 20px;
}

/* 검색·필터 줄: 입력과 버튼 높이를 하나로 */
.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.admin-toolbar > * {
    flex: 1 1 180px;
    min-width: 0;
}

.admin-toolbar > .admin-toolbar-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.admin-toolbar .btn {
    height: var(--ppdl-control-h);
}

/* 표 */
.page-admin .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #fafafa;
    margin-bottom: 0;
    font-size: 0.88rem;
    color: var(--ppdl-ink);
}

.page-admin .table > thead th {
    padding: 12px 10px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ppdl-muted);
    background: var(--ppdl-surface-soft);
    border-bottom: 1px solid var(--ppdl-line);
    white-space: nowrap;
    vertical-align: middle;
}

.page-admin .table > tbody td {
    padding: 12px 10px;
    border-color: #f0f0f0;
    vertical-align: middle;
}

.page-admin .table > tbody tr {
    transition: background-color 0.15s ease;
}

.page-admin .table > tbody tr:hover > * {
    background-color: #fafafa;
}

.page-admin .table > tbody tr:last-child td {
    border-bottom: 0;
}

.page-admin .table .btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-font-size: 0.8rem;
    --bs-btn-border-radius: 6px;
}

.page-admin .table td.actions,
.page-admin .table td .table-actions {
    white-space: nowrap;
}

.table-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-admin .table-responsive {
    border-radius: var(--ppdl-radius);
}

/* 상태 배지: 알약 모양 하나로 */
.page-admin .badge,
.page-admin .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
}

/* 모달 */
.page-admin .modal-content,
.page-account .modal-content,
.page-order .modal-content {
    border: 0;
    border-radius: var(--ppdl-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.page-admin .modal-header,
.page-account .modal-header,
.page-order .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ppdl-line);
}

.page-admin .modal-title,
.page-account .modal-title,
.page-order .modal-title {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ppdl-ink);
}

.page-admin .modal-body,
.page-account .modal-body,
.page-order .modal-body {
    padding: 22px;
}

.page-admin .modal-footer,
.page-account .modal-footer,
.page-order .modal-footer {
    padding: 14px 22px;
    gap: 8px;
    border-top: 1px solid var(--ppdl-line);
    background: var(--ppdl-surface-soft);
}

.page-admin .modal-footer > *,
.page-account .modal-footer > *,
.page-order .modal-footer > * {
    margin: 0;
}

/* 드롭다운 */
.page-admin .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--ppdl-line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* 위치는 Popper 가 transform 으로 잡으므로 투명도만 바꾼다 */
    animation: ppdl-fade 0.18s ease backwards;
}

.page-admin .dropdown-item {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.86rem;
    color: var(--ppdl-ink);
}

.page-admin .dropdown-item:hover,
.page-admin .dropdown-item:focus {
    background: #f3f3f3;
    color: #333;
}

/* 페이지네이션 */
.page-admin .pagination {
    gap: 4px;
    margin: 20px 0 0;
}

.page-admin .page-link {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    border-color: var(--ppdl-line);
    color: var(--ppdl-ink);
}

.page-admin .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* 관리자 목록 화면 (주문·반품·회원·문의 등): 필터 칸 폭, 표 패널, 모바일 카드, 상세 행 */
.admin-toolbar > .toolbar-field {
    flex: 0 1 220px;
}

.admin-toolbar > .toolbar-field-wide {
    flex: 1 1 280px;
    max-width: 420px;
}

.admin-panel.admin-table-panel {
    position: relative; /* 표 안 드롭다운 메뉴의 기준점 (표 스크롤 영역에 잘리지 않도록) */
    padding: 0;
}

.admin-table-panel .table > :not(caption) > * > :first-child {
    padding-left: 20px;
}

.admin-table-panel .table > :not(caption) > * > :last-child {
    padding-right: 20px;
}

.page-admin .table td.ppdl-empty {
    padding: 56px 16px;
    text-align: center;
}

.page-admin .table .num {
    font-feature-settings: "tnum";
    white-space: nowrap;
}

.page-admin .table .ref {
    color: #4a4a4a;
    white-space: nowrap;
}

.page-admin .table .muted {
    color: var(--ppdl-muted);
}

.page-admin .table .sub {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--ppdl-muted);
}

/* 관리자 메뉴 바로가기에서 현재 화면 */
.admin-page-actions .btn.is-current {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.admin-mobile-list > * {
    background: var(--ppdl-surface);
    border: 1px solid var(--ppdl-line);
    border-radius: var(--ppdl-radius);
    box-shadow: var(--ppdl-shadow);
    margin-bottom: 12px;
}

.admin-mobile-list > .ppdl-empty {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.page-admin .detail-section {
    margin-bottom: 24px;
}

.page-admin .detail-section:last-child {
    margin-bottom: 0;
}

.page-admin .detail-section h6 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ppdl-line);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ppdl-muted);
}

.page-admin .detail-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #f3f3f3;
    font-size: 0.9rem;
    color: var(--ppdl-ink);
}

.page-admin .detail-row:last-child {
    border-bottom: 0;
}

.page-admin .detail-label {
    color: var(--ppdl-muted);
}

.page-admin .detail-row > .badge {
    justify-self: start;
}

.page-admin .detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-card-title {
    font-size: 0.92rem;
    color: #4a4a4a;
    line-height: 1.4;
    word-break: keep-all;
}

.mobile-card-meta {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--ppdl-muted);
}

.mobile-card-badges {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
}

.mobile-card-body {
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--ppdl-ink);
    word-break: break-all;
}

.mobile-card-body > div + div {
    margin-top: 4px;
}

.mobile-card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
}

.mobile-card-actions .btn {
    flex: 1;
}

/* 빈 상태·로딩 문구 */
.ppdl-empty {
    padding: 56px 16px;
    text-align: center;
    color: var(--ppdl-muted);
    font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   마이페이지·주문 공통 패널
   -------------------------------------------------------------------------- */
.ppdl-panel {
    background: var(--ppdl-surface);
    border: 1px solid var(--ppdl-line);
    border-radius: var(--ppdl-radius-lg);
    box-shadow: var(--ppdl-shadow);
    padding: 24px;
}

.ppdl-panel-title {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ppdl-line);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--ppdl-ink);
}

/* 요약 표 (라벨 왼쪽, 값 오른쪽) */
.ppdl-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: 0.92rem;
}

.ppdl-kv:last-child {
    border-bottom: 0;
}

.ppdl-kv > :first-child {
    color: var(--ppdl-muted);
    flex-shrink: 0;
}

.ppdl-kv > :last-child {
    color: var(--ppdl-ink);
    text-align: right;
    word-break: keep-all;
}

@media (max-width: 767.98px) {
    .admin-page-head {
        margin: 20px 0 14px;
    }

    .admin-page-head h1,
    .admin-page-head h2 {
        font-size: 1.3rem;
    }

    .admin-panel,
    .ppdl-panel {
        padding: 16px;
    }

    .admin-toolbar > * {
        flex-basis: 100%;
    }

    .admin-toolbar > .admin-toolbar-actions {
        flex-basis: 100%;
    }

    .admin-toolbar > .admin-toolbar-actions .btn {
        flex: 1;
    }

    .admin-toolbar > .toolbar-field,
    .admin-toolbar > .toolbar-field-wide {
        flex: 1 1 100%;
        max-width: none;
    }

    .page-admin .detail-row {
        grid-template-columns: 96px 1fr;
        font-size: 0.85rem;
    }

    .page-admin .modal-dialog {
        margin: 10px;
    }
}

/* --------------------------------------------------------------------------
   관리자 사이드 메뉴 (templates/admin/_sidebar.html)
   데스크톱: 왼쪽 고정 메뉴 + 본문. 모바일: 본문 위 가로로 넘기는 메뉴 줄.
   --header-h 는 main.js 가 실제 헤더 높이로 맞춘다.
   -------------------------------------------------------------------------- */
.admin-shell {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--header-h, 121px));
}

.admin-sidebar {
    flex: 0 0 232px;
    position: sticky;
    top: var(--header-h, 121px);
    height: calc(100vh - var(--header-h, 121px));
    overflow-y: auto;
    padding: 18px 14px 24px;
    background: var(--ppdl-surface);
    border-right: 1px solid var(--ppdl-line);
    scrollbar-width: thin;
}

.admin-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* 관리자 본문은 넓은 화면에서도 가운데로 몰지 않고 사이드 메뉴 옆부터 가로 전체를 쓴다 */
.admin-main .container,
.admin-main .container-fluid {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-inline: 32px;
}

.admin-nav-group {
    padding: 6px 0;
    border-bottom: 1px solid #f1f1f1;
}

.admin-nav-group:last-child {
    border-bottom: 0;
}

.admin-nav-heading {
    margin: 6px 10px 4px;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ppdl-muted);
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 0;
    padding: 8px 10px;
    border-radius: var(--ppdl-radius-sm);
    font-size: 0.9rem;
    color: var(--ppdl-ink);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.admin-nav-link:hover {
    background: #f4f4f4;
    color: #333;
}

.admin-nav-link.is-active {
    background: var(--primary-color);
    color: #fff;
}

.admin-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 10px;
    background: #d32f2f;
    color: #fff;
    font-size: 0.72rem;
    line-height: 1;
}

.admin-nav-badge[hidden] {
    display: none;
}

.admin-nav-footer .admin-nav-link {
    color: var(--ppdl-muted);
}

.admin-nav-footer .admin-nav-link:hover {
    color: #333;
}

@media (max-width: 991.98px) {
    .admin-shell {
        display: block;
        min-height: 0;
    }

    .admin-sidebar {
        position: static;
        height: auto;
        padding: 10px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--ppdl-line);
        scrollbar-width: none;
    }

    .admin-sidebar::-webkit-scrollbar {
        display: none;
    }

    .admin-nav {
        display: flex;
        gap: 6px;
        width: max-content;
    }

    .admin-nav-group {
        display: contents;
    }

    .admin-nav-heading {
        display: none;
    }

    .admin-nav-link {
        margin: 0;
        padding: 7px 12px;
        border: 1px solid var(--ppdl-line);
        border-radius: 999px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .admin-nav-link.is-active {
        border-color: var(--primary-color);
    }

    .admin-nav-icon {
        width: 16px;
        height: 16px;
    }

    .admin-nav-badge {
        min-width: 18px;
        height: 18px;
        margin-left: 2px;
    }

    .admin-main .container,
    .admin-main .container-fluid {
        padding-inline: 16px;
    }
}

/* --------------------------------------------------------------------------
   왼쪽 분류 메뉴 + 오른쪽 본문 (상품 관리, 카테고리 관리)
   데스크톱은 왼쪽 고정 패널, 모바일은 본문 위 가로로 넘기는 메뉴 줄.
   -------------------------------------------------------------------------- */
.admin-split {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* 가로로 넘기는 모바일 메뉴가 격자 칸을 화면 밖으로 늘리지 않게 */
.admin-split > * {
    min-width: 0;
}

.admin-split-side {
    position: sticky;
    top: calc(var(--header-h, 121px) + 16px);
    padding: 14px 10px;
}

.category-menu-title {
    margin: 0 10px 8px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--ppdl-muted);
}

.category-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.category-menu-loading {
    padding: 8px 10px;
    font-size: 0.85rem;
    color: var(--ppdl-muted);
}

.category-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--ppdl-radius-sm);
    background: transparent;
    font-size: 0.9rem;
    color: var(--ppdl-ink);
    text-align: left;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.category-menu-item:hover {
    background: #f4f4f4;
    color: #333;
}

.category-menu-item.is-child {
    padding-left: 26px;
    font-size: 0.86rem;
}

.category-menu-item.is-active {
    background: var(--primary-color);
    color: #fff;
}

.category-menu-count {
    flex-shrink: 0;
    min-width: 22px;
    font-size: 0.78rem;
    color: var(--ppdl-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.category-menu-item.is-active .category-menu-count {
    color: rgba(255, 255, 255, 0.85);
}

.category-menu-hidden {
    margin-left: 4px;
    font-size: 0.72rem;
    color: var(--ppdl-muted);
}

.category-menu-item.is-active .category-menu-hidden {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 991.98px) {
    .admin-split {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .admin-split-side {
        position: static;
        padding: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .admin-split-side::-webkit-scrollbar {
        display: none;
    }

    .category-menu-title {
        display: none;
    }

    .category-menu {
        flex-direction: row;
        gap: 6px;
        width: max-content;
    }

    .category-menu-item,
    .category-menu-item.is-child {
        width: auto;
        padding: 6px 12px;
        border: 1px solid var(--ppdl-line);
        border-radius: 999px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .category-menu-item.is-child::before {
        content: '└';
        margin-right: 2px;
        color: var(--ppdl-muted);
    }

    .category-menu-item.is-active {
        border-color: var(--primary-color);
    }
}

/* 여러 묶음 메뉴 (예: 상태, 권한) — templates/admin/_side_menu.html */
.category-menu-group + .category-menu-group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f1f1;
}

/* 입력 화면의 구역 이동 메뉴 */
.category-menu-item.is-section {
    justify-content: flex-start;
}

@media (max-width: 991.98px) {
    /* 묶음이 여럿이면 묶음마다 한 줄씩 가로로 넘긴다 */
    .admin-split-side.has-groups {
        overflow: visible;
    }

    .admin-split-side.has-groups .category-menu-group {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .admin-split-side.has-groups .category-menu-group::-webkit-scrollbar {
        display: none;
    }

    .admin-split-side.has-groups .category-menu-title {
        display: block;
        flex-shrink: 0;
        margin: 0 2px 0 4px;
    }

    .category-menu-group + .category-menu-group {
        margin-top: 8px;
        padding-top: 8px;
    }
}