/**
 * OK Manager 관리자 프론트 샘플 공용 CSS
 * 사용자(user) 사이트 CSS와는 독립적으로 관리되는 admin 전용 스타일이다.
 */

:root {
    /* 화이트 앤 블랙 컨셉의 admin 메인 컬러 */
    --admin-primary: #000000;
    --admin-primary-dark: #27272a;
    --admin-ink: #111827;
    --admin-ink-soft: #4b5563;
    --admin-border: #e5e7eb;
    --admin-bg: #f9fafb;
    /* 프론트(user) 사이트와 동일한 유효성 검증 에러 색상 */
    --admin-danger: #e5484d;
    --admin-success: #16a34a;
    --admin-input-height: 46px;
    /* 관리자 전용 체크박스 선택(체크) 색상 */
    --admin-checkbox-accent: #3e97ff;
}

* {
    box-sizing: border-box;
}

/* 관리자 화면의 모든 체크박스 모양·선택(체크) 색상을 통일한다(개별 컴포넌트는 width/height만 지정하면 됨).
   accent-color만으로는 브라우저마다 체크 표시 색상이 달라질 수 있어, 네이티브 외형을 직접 그려
   선택 시 배경은 --admin-checkbox-accent, 체크 표시는 흰색으로 항상 고정되도록 한다. */
input[type="checkbox"] {
    accent-color: var(--admin-checkbox-accent);
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    margin: 0;
    border: 1.5px solid #c7cad3;
    border-radius: 4px;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

input[type="checkbox"]:checked {
    background-color: var(--admin-checkbox-accent);
    border-color: var(--admin-checkbox-accent);
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 47%;
    width: 28%;
    height: 52%;
    border: solid #ffffff;
    border-width: 0 1.5px 1.5px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

input[type="checkbox"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

body {
    margin: 0;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    color: var(--admin-ink);
    background: var(--admin-bg);
}

/* --- 공통 스크롤바(기본 스크롤바 대신 얇고 옅은 형태로 통일) --- */
html {
    scrollbar-width: thin;
    scrollbar-color: #c1c3cb transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c1c3cb;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a3a6b0;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* ==========================================================
   SweetAlert2 공통 스타일
   master.blade.php 의 성공/실패 공통 메시지, 캐시삭제 버튼 등에서 사용
========================================================== */
.swal2-popup {
    padding: 28px 24px !important;
    border-radius: 16px !important;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif !important;
}

.swal2-html-container {
    margin: 0 !important;
    font-size: 16px !important;
    color: var(--admin-ink) !important;
}

.swal-btn-primary {
    padding: 10px 24px !important;
    border-radius: 4px !important;
    background: #3E97FF !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.swal-btn-danger {
    padding: 10px 24px !important;
    border-radius: 4px !important;
    background: #F1416C !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.swal-btn-cancel {
    padding: 10px 24px !important;
    border-radius: 4px !important;
    background: #F1F1F2 !important;
    color: #4B5675 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ==========================================================
   Modal - 팝업 공용 컴포넌트
========================================================== */
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.admin-modal.is-open {
    display: flex;
}

.admin-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
}

.admin-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(17, 24, 39, 0.2);
}

.admin-modal__dialog--wide {
    max-width: 960px;
}

.admin-modal__dialog > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.admin-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--admin-border);
}

.admin-modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--admin-ink-soft);
}

.admin-modal__close:hover {
    background: #f4f4f5;
    color: var(--admin-ink);
}

.admin-modal__body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 28px 24px;
    overflow-y: auto;
}

@media screen and (max-width: 575px) {
    .admin-modal__body {
        grid-template-columns: 1fr;
    }
}

.admin-modal__body--single {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--admin-border);
}

/* ==========================================================
   Pagination - 공용 페이징(목록 페이지 하단에서 재사용)
========================================================== */
.admin-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.admin-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-pagination__nav,
.admin-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 4px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--admin-ink-soft);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}

.admin-pagination__nav:hover,
.admin-pagination__link:hover {
    border-color: var(--admin-primary);
    color: var(--admin-ink);
}

.admin-pagination__link.is-active {
    border-color: var(--admin-primary);
    background: var(--admin-primary);
    color: #ffffff;
    cursor: default;
}

.admin-pagination__nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-pagination__nav:disabled:hover {
    border-color: var(--admin-border);
    color: var(--admin-ink-soft);
}

.admin-pagination__nav.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================
   Auth Layout - 로그인/인증 공용 레이아웃
========================================================== */
.admin-auth {
    display: flex;
    min-height: 100vh;
}

.admin-auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 46%;
    padding: 56px 64px;
    background: #000000;
    overflow: hidden;
}

.admin-auth__brand-decor {
    position: absolute;
    inset: 0;
    background: url('../media/auth-pattern.svg') no-repeat top right;
    background-size: 640px;
    opacity: 0.9;
    pointer-events: none;
}

.admin-auth__brand-inner {
    position: relative;
    z-index: 1;
}

.admin-auth__logo {
    margin: 0;
    color: #fff;
    font-size: 36px;
    font-weight: 800;
}

.admin-auth__brand-title {
    margin: 48px 0 16px;
    font-size: 30px;
    line-height: 1.4;
    font-weight: 700;
    color: #ffffff;
}

.admin-auth__brand-desc {
    max-width: 380px;
    margin: 0;
    color: #a1a1aa;
    font-size: 15px;
    line-height: 1.7;
}

.admin-auth__feature-list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-auth__feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e4e4e7;
    font-size: 14px;
}

.admin-auth__feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    flex: none;
}

.admin-auth__copyright {
    position: relative;
    z-index: 1;
    color: #71717a;
    font-size: 13px;
}

.admin-auth__panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: #ffffff;
}

.admin-auth__form {
    width: 100%;
    max-width: 400px;
}

.admin-auth__panel-logo {
    display: none;
    margin: 0 0 32px;
    font-size: 30px;
    font-weight: 800;
}

.admin-auth__panel-header {
    margin-bottom: 36px;
}

.admin-auth__panel-header h1 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-auth__panel-header p {
    margin: 0;
    font-size: 14px;
    color: var(--admin-ink-soft);
}

.admin-auth__panel-header p.admin-auth__demo-notice {
    color: var(--admin-danger);
}

.admin-auth__field {
    margin-bottom: 20px;
}

.admin-auth__field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-ink);
}

.admin-auth__field input[type="email"],
.admin-auth__field input[type="password"],
.admin-auth__field input[type="text"] {
    width: 100%;
    height: var(--admin-input-height);
    padding: 0 14px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--admin-ink);
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-auth__field input:focus {
    outline: none;
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.admin-auth__field input.is-invalid {
    border-color: var(--admin-danger);
}

.admin-auth__field-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--admin-danger);
}

.admin-auth__password {
    position: relative;
}

.admin-auth__password input {
    padding-right: 44px;
}

.admin-auth__password-toggle {
    position: absolute;
    /* 검증 에러 메시지가 아래에 추가되어도 아이콘은 입력창 높이 기준으로 항상 가운데 정렬 */
    top: calc(var(--admin-input-height) / 2);
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #9ca3af;
}

.admin-auth__password-toggle:hover {
    background: #f3f4f6;
}

.admin-auth__password-toggle .icon-hide {
    display: block;
}

.admin-auth__password-toggle .icon-show {
    display: none;
}

.admin-auth__password-toggle.is-visible .icon-hide {
    display: none;
}

.admin-auth__password-toggle.is-visible .icon-show {
    display: block;
}

.admin-auth__submit {
    position: relative;
    width: 100%;
    height: 48px;
    margin-top: 4px;
    border: none;
    border-radius: 8px;
    background: var(--admin-primary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    transition: background-color 0.15s ease;
}

.admin-auth__submit:hover {
    background: var(--admin-primary-dark);
}

.admin-auth__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.admin-auth__submit-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.admin-auth__submit.is-loading .admin-auth__submit-label {
    display: none;
}

.admin-auth__submit.is-loading .admin-auth__submit-loading {
    display: inline-flex;
}

.admin-auth__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: admin-spin 0.6s linear infinite;
}

@keyframes admin-spin {
    to {
        transform: rotate(360deg);
    }
}

.admin-auth__notice {
    margin: 24px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: #9ca3af;
}

@media (max-width: 992px) {
    .admin-auth__brand {
        display: none;
    }

    .admin-auth__panel-logo {
        display: block;
    }

    .admin-auth__panel {
        padding: 56px 24px;
    }
}

/* ==========================================================
   Admin Shell Layout - 로그인 이외의 admin 샘플 페이지 공용 골격
   (좌측 사이드바 + 상단 탑바 + 우측 퀵바)
========================================================== */
.admin-shell {
    display: flex;
    min-height: 100vh;
}

/* --- 좌측 사이드바(LNB) --- */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background: #000000;
    color: #d4d4d8;
    overflow-y: auto;
    z-index: 40;
    transition: transform 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
}

.admin-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.admin-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-sidebar__logo {
    overflow: hidden;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.admin-sidebar__nav {
    padding: 20px 12px 32px;
}

.admin-sidebar__nav-label {
    margin: 20px 12px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #71717a;
    text-transform: uppercase;
}

.admin-sidebar__nav-label:first-child {
    margin-top: 0;
}

.admin-sidebar__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-sidebar__menu-item a,
.admin-sidebar__menu-item .admin-sidebar__menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #d4d4d8;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-sidebar__menu-icon {
    display: flex;
    flex: 0 0 auto;
    color: #a1a1aa;
}

.admin-sidebar__menu-item a:hover,
.admin-sidebar__menu-item .admin-sidebar__menu-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.admin-sidebar__menu-item.is-active > a {
    background: #ffffff;
    color: #000000;
}

.admin-sidebar__menu-item.is-active > a .admin-sidebar__menu-icon {
    color: #000000;
}

/* --- 서브메뉴가 있는 메뉴(아코디언) --- */
.admin-sidebar__menu-toggle {
    cursor: pointer;
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
}

.admin-sidebar__menu-caret {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    color: #d4d4d8;
    transition: transform 0.15s ease, color 0.15s ease;
}

.admin-sidebar__menu-toggle:hover .admin-sidebar__menu-caret {
    color: #ffffff;
}

.admin-sidebar__menu-item.is-open > .admin-sidebar__menu-toggle .admin-sidebar__menu-caret {
    transform: rotate(180deg);
}

.admin-sidebar__submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 42px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

/* 펼침 애니메이션(max-height 전환)용 상한값. 하위 메뉴 1개 높이가 36px이므로 항목이 늘어도 잘리지 않도록 넉넉히 둔다. */
.admin-sidebar__menu-item.is-open .admin-sidebar__submenu {
    max-height: 600px;
    margin: 2px 0 4px;
}

.admin-sidebar__submenu a {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #a1a1aa;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-sidebar__submenu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.admin-sidebar__submenu a.is-active {
    background: #ffffff;
    color: #000000;
    font-weight: 600;
}

/* --- 하위 메뉴 안의 2단계 하위 메뉴(예: CMS 관리 > 설정) --- */
.admin-sidebar__submenu-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: #a1a1aa;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-sidebar__submenu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 16px;
    margin-right: 6px;
}

.admin-sidebar__submenu-icon svg {
    display: block;
    flex: 0 0 auto;
}

.admin-sidebar__submenu-label {
    line-height: 16px;
}

.admin-sidebar__submenu-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.admin-sidebar__submenu-toggle:hover .admin-sidebar__menu-caret {
    color: #ffffff;
}

.admin-sidebar__submenu-item.is-open > .admin-sidebar__submenu-toggle {
    color: #ffffff;
}

.admin-sidebar__submenu-item.is-open > .admin-sidebar__submenu-toggle .admin-sidebar__menu-caret {
    transform: rotate(180deg);
}

.admin-sidebar__subsubmenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.admin-sidebar__submenu-item.is-open > .admin-sidebar__subsubmenu {
    max-height: 400px;
    margin: 2px 0 4px;
}

/* --- 사이드바 하단 고정 영역(캐시삭제) --- */
.admin-sidebar__footer {
    position: sticky;
    bottom: 0;
    padding: 12px;
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-sidebar__cache-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: #e4e4e7;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
}

.admin-sidebar__cache-clear:hover {
    background: #d4d4d8;
}

.admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    z-index: 39;
}

/* --- 사이드바를 제외한 우측 영역(탑바 + 콘텐츠) --- */
.admin-main {
    flex: 1;
    min-width: 0;
    margin-left: 260px;
}

/* --- 상단 탑바 ---
   position:sticky + z-index로 별도 stacking context가 생성되므로, 내부의 프로필 메뉴가 아무리 z-index를
   높게 잡아도(.admin-topbar__profile-menu) 비교 기준은 이 값이 된다. 목록 페이지의 스크롤 고정 헤더
   (.admin-admins__sticky-thead, z-index:40)보다 낮으면 프로필 메뉴가 그 밑으로 가려지므로,
   페이지 콘텐츠의 어떤 고정/스크롤 요소보다도 항상 위에 오도록 modal(60)보다는 낮게, 그 외에는 최상단으로 둔다. */
.admin-topbar {
    position: sticky;
    top: 0;
    height: 64px;
    border-bottom: 1px solid var(--admin-border);
    background: #ffffff;
    z-index: 50;
}

.admin-topbar__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 24px;
}

.admin-topbar__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-topbar__spacer {
    flex: 1;
}

.admin-topbar__menu-toggle {
    display: none;
}

.admin-topbar__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.admin-topbar__icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--admin-ink-soft);
}

.admin-topbar__icon-btn:hover {
    background: #f4f4f5;
    color: var(--admin-ink);
}

.admin-topbar__badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--admin-danger);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.admin-topbar__profile {
    position: relative;
    height: 100%;
    margin-left: 8px;
    padding-left: 14px;
    border-left: 1px solid var(--admin-border);
}

.admin-topbar__profile-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.admin-topbar__profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 50%;
    background: #f4f4f5;
}

.admin-topbar__profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-topbar__profile-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--admin-ink);
}

.admin-topbar__profile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    padding: 8px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 41;
}

.admin-topbar__profile.is-open .admin-topbar__profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.admin-topbar__profile-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
}

.admin-topbar__profile-menu-header img {
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    background: #f4f4f5;
    object-fit: contain;
}

.admin-topbar__profile-menu-name {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-topbar__profile-menu-email {
    margin: 0;
    font-size: 12px;
    color: var(--admin-ink-soft);
}

.admin-topbar__profile-menu-divider {
    margin: 6px 4px;
    border: none;
    border-top: 1px solid var(--admin-border);
}

.admin-topbar__profile-menu-link {
    display: block;
    padding: 9px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-ink-soft);
    text-align: left;
}

.admin-topbar__profile-menu-link:hover {
    background: #f4f4f5;
    color: var(--admin-ink);
}

button.admin-topbar__profile-menu-link {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

@media screen and (max-width: 991px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-shell.is-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-shell.is-sidebar-open .admin-sidebar-backdrop {
        display: block;
    }

    .admin-main {
        margin-left: 0;
    }

    .admin-topbar__menu-toggle {
        display: flex;
    }

    .admin-topbar__profile-name {
        display: none;
    }
}

/* --- 우측 퀵바: 솔루션 도입 문의·바로가기 + 상하 스크롤 버튼(항상 노출) --- */
.admin-scrollnav {
    position: fixed;
    right: 24px;
    bottom: 32px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.admin-scrollnav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--admin-primary);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.18);
}

.admin-scrollnav__btn:hover {
    background: var(--admin-primary-dark);
}

/* 데모·매뉴얼 바로가기(녹색) */
.admin-scrollnav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
    background: #5b8a0f;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(74, 114, 9, 0.3);
    transition: transform 0.2s ease;
}

.admin-scrollnav__link:hover {
    background: #4a7209;
    color: #ffffff;
    transform: translateY(-2px);
}

.admin-scrollnav__inquiry {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    border: 2px solid #ffffff;
    border-radius: 26px;
    background: #000000;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    animation: admin-scrollnav-inquiry-pulse 2s ease-out infinite;
    transition: transform 0.2s ease;
}

.admin-scrollnav__inquiry svg {
    width: 20px;
    height: 20px;
}

.admin-scrollnav__inquiry:hover {
    transform: translateY(-2px);
    animation-play-state: paused;
}

/* 링이 퍼져 나가는 효과로 시선을 끈다 */
@keyframes admin-scrollnav-inquiry-pulse {
    0% {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(0, 0, 0, 0.45);
    }
    70% {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 14px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-scrollnav__inquiry {
        animation: none;
    }
}

@media screen and (max-width: 575px) {
    .admin-scrollnav {
        right: 16px;
        bottom: 20px;
    }

    .admin-scrollnav__btn {
        width: 40px;
        height: 40px;
    }

    .admin-scrollnav__link {
        height: 40px;
        padding: 0 16px;
        font-size: 13px;
    }

    .admin-scrollnav__inquiry {
        height: 46px;
        padding: 0 18px;
        font-size: 14px;
    }
}

/* ==========================================================
   Form Elements - admin 공용 폼 요소
========================================================== */
.admin-form-elements__field > label:not(.admin-popup__toggle):not(.admin-form-elements__checkbox) {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-ink);
}

.admin-form-elements__field .required {
    color: var(--admin-danger);
}

.admin-form-elements__field--align-end {
    display: flex;
    justify-content: flex-end;
}

.admin-form-elements__field .hint {
    color: #9ca3af;
    font-weight: 400;
}

.admin-form-elements__field input:not([type="file"], [type="radio"], [type="checkbox"]),
.admin-form-elements__field textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--admin-ink);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-form-elements__field input:not([type="file"]):not([type="radio"]):not([type="checkbox"]) {
    height: var(--admin-input-height);
    padding: 0 14px;
}

.admin-form-elements__field textarea {
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.6;
    resize: none;
    overflow: hidden;
}

.admin-form-elements__field input::placeholder,
.admin-form-elements__field textarea::placeholder {
    color: #9ca3af;
}

.admin-form-elements__field input:focus,
.admin-form-elements__field textarea:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.admin-form-elements__field input.is-invalid,
.admin-form-elements__field textarea.is-invalid {
    border-color: var(--admin-danger) !important;
}

.admin-form-elements__field input[readonly],
.admin-form-elements__field textarea[readonly],
.admin-form-elements__field input:disabled,
.admin-form-elements__field textarea:disabled,
.admin-form-elements__dropdown-title:disabled {
    background: #f4f4f5;
    color: var(--admin-ink-soft);
    cursor: not-allowed;
}

/* 비밀번호 표시/숨김 */
.admin-form-elements__password {
    position: relative;
}

.admin-form-elements__password input {
    padding-right: 44px;
}

.admin-form-elements__password-toggle {
    position: absolute;
    /* 검증 에러 메시지가 아래에 추가되어도 아이콘은 입력창 높이 기준으로 항상 가운데 정렬 */
    top: calc(var(--admin-input-height) / 2);
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #9ca3af;
}

.admin-form-elements__password-toggle:hover {
    background: #f3f4f6;
}

.admin-form-elements__password-toggle .icon-show {
    display: none;
}

.admin-form-elements__password-toggle.is-visible .icon-hide {
    display: none;
}

.admin-form-elements__password-toggle.is-visible .icon-show {
    display: block;
}

/* 날짜 선택(flatpickr) - flatpickr가 readonly를 부여하므로 비활성 스타일 대신 일반 입력칸처럼 보이게 한다 */
.admin-form-elements__date {
    position: relative;
}

.admin-form-elements__field .admin-form-elements__date input[type="text"][readonly] {
    padding-right: 40px;
    background: #ffffff;
    color: var(--admin-ink);
    cursor: pointer;
}

.admin-form-elements__date-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    display: flex;
    color: #99a1b7;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 드롭다운 선택 */
.admin-form-elements__dropdown {
    position: relative;
    width: 100%;
}

.admin-form-elements__dropdown-title {
    display: flex;
    width: 100%;
    height: var(--admin-input-height);
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--admin-ink);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.admin-form-elements__field:has(> input[type="hidden"].is-invalid) .admin-form-elements__dropdown-title {
    border-color: var(--admin-danger);
}

.admin-form-elements__field:has(> input[type="hidden"].is-valid) .admin-form-elements__dropdown-title {
    border-color: var(--admin-success);
}

.admin-form-elements__dropdown-title:hover,
.admin-form-elements__dropdown-title:focus {
    border-color: var(--admin-primary);
}

.admin-form-elements__dropdown-title:disabled:hover {
    border-color: var(--admin-border);
}

.admin-form-elements__dropdown-text {
    display: block;
    flex: 1;
    overflow: hidden;
    color: #9ca3af;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-form-elements__dropdown.has-value .admin-form-elements__dropdown-text {
    color: var(--admin-ink);
}

.admin-form-elements__dropdown-icon {
    display: flex;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    color: var(--admin-ink-soft);
    transition: transform 0.2s ease;
}

.admin-form-elements__dropdown.is-open .admin-form-elements__dropdown-icon {
    transform: rotate(180deg);
}

.admin-form-elements__dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    display: none;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    padding: 8px 0;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
}

.admin-form-elements__dropdown.is-open .admin-form-elements__dropdown-menu {
    display: block;
}

.admin-form-elements__dropdown.is-open.drop-up .admin-form-elements__dropdown-menu {
    top: auto;
    bottom: calc(100% + 4px);
}

.admin-form-elements__dropdown-option {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: #ffffff;
    color: var(--admin-ink);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.admin-form-elements__dropdown-option:hover {
    background: #f4f4f5;
}

.admin-form-elements__dropdown-option.is-selected {
    background: #f4f4f5;
    font-weight: 700;
    color: var(--admin-primary-dark);
}

/* 검색 가능한 드롭다운(--searchable): 메뉴 상단 검색 input + 결과 없음 문구 */
.admin-form-elements__dropdown--searchable .admin-form-elements__dropdown-menu {
    max-height: 300px;
    padding-top: 0;
}

.admin-form-elements__dropdown-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px;
    border-bottom: 1px solid var(--admin-border);
    background: #ffffff;
}

.admin-form-elements__dropdown-search input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    color: var(--admin-ink);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.admin-form-elements__dropdown-search input:focus {
    border-color: var(--admin-primary);
}

.admin-form-elements__dropdown-empty {
    margin: 0;
    padding: 10px 14px;
    color: var(--admin-ink-soft);
    font-size: 14px;
}

/* 태그 입력(Tag Input): 입력 후 Enter로 태그(칩) 추가, ×로 삭제 */
.admin-form-elements__tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: var(--admin-input-height);
    padding: 5px 8px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #ffffff;
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-form-elements__tag-input:focus-within {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.admin-form-elements__field:has(> input[type="hidden"].is-invalid) .admin-form-elements__tag-input {
    border-color: var(--admin-danger);
}

.admin-form-elements__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 6px 4px 10px;
    border-radius: 6px;
    background: #f4f4f5;
    color: var(--admin-ink);
    font-size: 13px;
    line-height: 18px;
}

.admin-form-elements__tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-form-elements__tag-remove {
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--admin-ink-soft);
    cursor: pointer;
}

.admin-form-elements__tag-remove:hover {
    background: #e4e4e7;
    color: var(--admin-ink);
}

/* 공통 입력칸 규칙(.admin-form-elements__field input:not(...))보다 우선하도록 [type="text"]를 포함한다 */
.admin-form-elements__field .admin-form-elements__tag-input input[type="text"].admin-form-elements__tag-input-field {
    flex: 1 0 140px;
    width: auto;
    height: 28px;
    padding: 0 4px;
    border: 0;
    box-shadow: none;
}

/* 체크박스 */
.admin-form-elements__checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-form-elements__checkbox-list--inline {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 24px;
}

.admin-form-elements__checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--admin-ink-soft);
    font-size: 14px;
    cursor: pointer;
}

.admin-form-elements__checkbox input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--admin-checkbox-accent);
}

/* 파일 첨부 */

.admin-form-elements__upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.admin-form-elements__upload-button {
    flex: 0 0 auto;
    height: var(--admin-input-height);
    padding: 0 18px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #f4f4f5;
    color: var(--admin-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.admin-form-elements__upload-button:hover {
    border-color: var(--admin-primary);
}

/* --- 이미지 업로드(미리보기 + 변경/삭제) --- */
.admin-image-upload {
    display: inline-flex;
}

.admin-image-upload__input {
    display: none;
}

.admin-image-upload__preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 90px;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: #f4f4f5;
}

.admin-image-upload__preview img {
    max-width: 80%;
    max-height: 70%;
    object-fit: contain;
}

.admin-image-upload__placeholder {
    display: flex;
    color: #a1a1aa;
}

.admin-image-upload.is-empty .admin-image-upload__preview img {
    display: none;
}

.admin-image-upload:not(.is-empty) .admin-image-upload__placeholder {
    display: none;
}

.admin-image-upload.is-empty .admin-image-upload__remove {
    display: none;
}

.admin-image-upload__edit,
.admin-image-upload__remove {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--admin-border);
    border-radius: 50%;
    background: #ffffff;
    color: var(--admin-ink-soft);
}

.admin-image-upload__edit:hover,
.admin-image-upload__remove:hover {
    color: var(--admin-ink);
}

.admin-image-upload__edit {
    top: -8px;
    right: -8px;
}

.admin-image-upload__remove {
    bottom: -8px;
    right: -8px;
}

/* --- 탭(Tabs) --- */

.admin-tabs__tab {
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--admin-ink-soft);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.admin-tabs__tab:hover {
    color: var(--admin-ink);
}

.admin-tabs__tab.is-active {
    border-bottom-color: var(--admin-primary);
    color: var(--admin-ink);
}

.admin-tabs__panel {
    font-size: 14px;
    line-height: 1.7;
    color: var(--admin-ink-soft);
}

/* --- 주소 검색(우편번호 + 검색 버튼) --- */
.admin-form-elements__address-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-form-elements__address-row input {
    flex: 1;
    min-width: 0;
}

.admin-form-elements__address-row .admin-form-elements__upload-button {
    flex: 0 0 auto;
}

.admin-form-elements__address-row .just-validate-error-label {
    flex-basis: 100%;
    width: 100%;
    margin-top: 4px;
}

/* 다음 우편번호 검색 레이어(admin-modal 내부에 embed) */
.admin-form-elements__address-layer {
    grid-column: 1 / -1;
    height: 450px;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
}

.admin-form-elements__address-layer iframe {
    width: 100%;
    height: 100%;
}

/* --- 금액/단위 인풋그룹 --- */
.admin-form-elements__input-group {
    position: relative;
}

.admin-form-elements__input-group input {
    padding-right: 44px !important;
}

.admin-form-elements__input-suffix {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--admin-ink-soft);
    font-size: 14px;
    pointer-events: none;
}

/* --- 다중 파일 업로드(목록형) --- */
.admin-multi-upload__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.admin-multi-upload__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #f9fafb;
}

.admin-multi-upload__name {
    overflow: hidden;
    color: var(--admin-ink);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-multi-upload__remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--admin-danger);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* --- 목록 썸네일 --- */
.admin-admins__thumbnail {
    display: block;
    width: 36px;
    height: 45px;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    object-fit: cover;
    background: #f9fafb;
}

.admin-admins__thumbnail--empty {
    width: 36px;
    height: 45px;
    border-radius: 0;
    background: #f3f4f6;
}

/* --- 카테고리 선택(체크박스 트리) --- */
.admin-category-picker {
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: #fff;
}

.admin-category-picker__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--admin-border);
    background: #f9fafb;
    color: var(--admin-ink-soft);
    font-size: 12px;
}

.admin-category-picker__count {
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-category-picker__body {
    max-height: 240px;
    padding: 8px;
    overflow-y: auto;
}

.admin-category-picker__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-category-picker__list--nested {
    position: relative;
    margin: 2px 0 4px 23px;
    padding-left: 14px;
    border-left: 1px dashed var(--admin-border);
}

.admin-category-picker__label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--admin-ink-soft);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.admin-category-picker__label:hover {
    background: #f4f4f5;
    color: var(--admin-ink);
}

.admin-category-picker__label:has(input:checked) {
    background: #eef2ff;
    color: var(--admin-ink);
    font-weight: 600;
}

.admin-category-picker__label input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    accent-color: var(--admin-checkbox-accent);
}

.admin-category-picker__icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    background: #50cd89;
}

.admin-category-picker__icon--folder {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.admin-category-picker__icon--leaf {
    opacity: .7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h8l4 4v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h8l4 4v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.admin-category-picker__empty {
    padding: 16px 10px;
    color: var(--admin-ink-soft);
    font-size: 13px;
    text-align: center;
}

/* --- 다중 이미지 업로드(정렬 가능) --- */
.admin-media-upload__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
}

.admin-media-upload__item {
    position: relative;
    width: 96px;
    height: 120px;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #f9fafb;
    cursor: grab;
}

.admin-media-upload__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-media-upload__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 999px;
    background: rgba(17, 24, 39, .6);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.admin-media-upload__placeholder {
    width: 96px;
    height: 120px;
    border: 1px dashed var(--admin-border);
    border-radius: 8px;
    background: #f3f4f6;
}

/* --- 관련제품 SKU(개수 제한 없이 추가/삭제) --- */
.admin-related-skus__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-related-skus__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-related-skus__item input {
    flex: 1;
    min-width: 0;
}

.admin-related-skus__remove {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--admin-input-height);
    height: var(--admin-input-height);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #f4f4f5;
    color: var(--admin-ink-soft);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.admin-related-skus__remove:hover {
    border-color: var(--admin-primary);
    color: var(--admin-ink);
}

/* --- 빈 데이터(Empty State) --- */
.admin-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 20px;
    text-align: center;
}

.admin-empty-state__icon {
    color: #d1d5db;
}

.admin-empty-state__text {
    margin: 0;
    color: var(--admin-ink-soft);
    font-size: 14px;
}

/* 프로젝트 공용 JustValidate 에러 메시지 색상 (front 사이트와 동일) */
.just-validate-error-label {
    margin-top: 6px;
    color: var(--admin-danger) !important;
    font-size: 12px;
}

/* ==========================================================
   Dashboard - admin 대시보드 샘플 페이지
========================================================== */
.admin-dashboard {
    padding: 28px 24px 60px;
}

/* --- 요약 카드 --- */
.admin-dashboard__summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.admin-summary-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04);
}

.admin-summary-card__label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-ink-soft);
}

.admin-summary-card__value {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 800;
    color: var(--admin-ink);
}

.admin-summary-card__change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
}

.admin-summary-card__change.is-up {
    color: var(--admin-success);
}

.admin-summary-card__change.is-down {
    color: var(--admin-danger);
}

.admin-summary-card__change.is-flat {
    color: var(--admin-ink-soft);
}

.admin-summary-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #f4f4f5;
    color: var(--admin-ink);
}

/* --- 차트 카드 --- */
.admin-dashboard__charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.admin-chart-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04);
    overflow: hidden;
}

.admin-chart-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.admin-chart-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-chart-card__desc {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--admin-ink-soft);
}

.admin-chart-card__body {
    position: relative;
    height: 260px;
}

/* 차트 데이터가 없을 때 안내 문구 */
.admin-chart-card__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    color: var(--admin-ink-soft);
    font-size: 13px;
}

/* --- 요약 + 테이블 영역 --- */
.admin-dashboard__bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.admin-panel {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04);
    overflow: hidden;
}

.admin-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--admin-border);
}

.admin-panel__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-panel__more {
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-ink-soft);
}

.admin-panel__more:hover {
    color: var(--admin-ink);
}

/* 최근 내역 테이블 */
.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table th,
.admin-table td {
    padding: 12px 20px;
    text-align: left;
    white-space: nowrap;
}

.admin-table th.is-numeric,
.admin-table td.is-numeric {
    text-align: right;
}

.admin-table thead th {
    background: #f9fafb;
    color: var(--admin-ink-soft);
    font-weight: 600;
    border-bottom: 1px solid var(--admin-border);
}

.admin-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--admin-border);
}

.admin-table tbody tr:hover {
    background: #f9fafb;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.admin-badge--success {
    background: #dcfce7;
    color: #16a34a;
}

.admin-badge--pending {
    background: #fef3c7;
    color: #b45309;
}

.admin-badge--danger {
    background: #fee2e2;
    color: #dc2626;
}

/* 요약 리스트(오늘의 처리 현황) */
.admin-summary-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.admin-summary-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-summary-list__label {
    font-size: 13px;
    color: var(--admin-ink-soft);
}

.admin-summary-list__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-summary-list__bar {
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: #f4f4f5;
    overflow: hidden;
}

.admin-summary-list__bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--admin-primary);
}

.admin-summary-list__bar-fill.is-teal {
    background: #5eead4;
}

.admin-summary-list__bar-fill.is-blue {
    background: #93c5fd;
}

.admin-summary-list__bar-fill.is-purple {
    background: #c4b5fd;
}

.admin-summary-list__bar-fill.is-yellow {
    background: #fcd34d;
}

/* --- 방문자 통계(GA4) --- */
.admin-dashboard__section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 8px 0 12px;
}

.admin-dashboard__section-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--admin-ink);
}

.admin-dashboard__section-meta {
    margin: 0;
    font-size: 12px;
    color: var(--admin-ink-soft);
}

.admin-dashboard__section-meta a {
    color: var(--admin-ink);
    text-decoration: underline;
}

.admin-chart-card--wide {
    grid-column: 1 / -1;
}

/* 차트 지표 전환 탭 */
.admin-chart-tabs {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 8px;
    background: #f4f4f5;
}

.admin-chart-tabs__button {
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--admin-ink-soft);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.admin-chart-tabs__button:hover {
    color: var(--admin-ink);
}

.admin-chart-tabs__button.is-active {
    background: #ffffff;
    color: var(--admin-ink);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}

.admin-panel__subtitle {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--admin-ink-soft);
}

/* 인기 페이지 제목 + 경로 */
.admin-top-page {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 640px;
    white-space: normal;
}

.admin-top-page__title {
    color: var(--admin-ink);
    font-weight: 600;
}

.admin-top-page__path {
    color: var(--admin-ink-soft);
    font-size: 12px;
    word-break: break-all;
}

.admin-table__empty {
    padding: 40px 20px;
    color: var(--admin-ink-soft);
    text-align: center !important;
}

@media screen and (max-width: 1199px) {
    .admin-dashboard__summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-dashboard__charts {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 575px) {
    .admin-dashboard {
        padding: 20px 16px 48px;
    }

    .admin-dashboard__summary {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Site Settings - admin 사이트 설정 샘플 페이지(프론트 마크업만 제공)
========================================================== */
.admin-settings {
    padding: 28px 24px 60px;
}

.admin-settings__header {
    margin-bottom: 20px;
}

.admin-settings__title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--admin-ink);
}

.admin-settings__breadcrumb {
    margin: 0;
    font-size: 13px;
    color: var(--admin-ink-soft);
}

.admin-settings__card {
    padding: 28px;
    margin-bottom: 16px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04);
}

.admin-settings__card-title {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-settings__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.admin-settings__field--full {
    grid-column: 1 / -1;
}

.admin-settings__price-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.admin-settings__code-textarea {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* 미디어 관리(폴더 트리 + 파일 목록) */
.admin-media {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.admin-media__tree {
    padding: 16px;
    overflow-x: auto;
}

.admin-media__tree-list {
    margin: 0;
    padding: 0 0 0 16px;
    list-style: none;
}

.admin-media__tree-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    color: var(--admin-ink);
    font-size: 14px;
    white-space: nowrap;
}

.admin-media__tree-link:hover {
    background: var(--admin-bg);
}

.admin-media__tree-link.is-active {
    background: #e5e7eb;
    font-weight: 600;
}

.admin-media__tree-root {
    font-weight: 600;
}

.admin-media__folder-icon {
    flex-shrink: 0;
    color: #f5b301;
}

.admin-media__content {
    min-width: 0;
}

.admin-media__path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--admin-ink-soft);
    font-size: 15px;
}

.admin-media__path strong {
    color: var(--admin-ink);
}

.admin-media__path-separator {
    color: #9ca3af;
}

.admin-media__name {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--admin-ink);
    word-break: break-all;
}

.admin-media__name:hover {
    text-decoration: underline;
}

.admin-media__thumb {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background: var(--admin-bg);
    color: var(--admin-ink-soft);
}

.admin-media__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-simple-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-simple-options__head,
.admin-simple-options__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.admin-simple-options__head {
    padding-right: calc(var(--admin-input-height) + 8px);
    color: var(--admin-ink-soft);
    font-size: 13px;
    font-weight: 600;
}

.admin-simple-options__head span,
.admin-simple-options__input {
    flex: 1;
    min-width: 0;
}

.admin-simple-options__input input {
    width: 100%;
}

.admin-simple-options__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 12px;
}

.admin-simple-options__list:empty,
.admin-simple-options__head:has(+ .admin-simple-options__list:empty) {
    display: none;
}

.admin-simple-options__remove {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--admin-input-height);
    height: var(--admin-input-height);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #f4f4f5;
    color: var(--admin-ink-soft);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.admin-simple-options__remove:hover {
    border-color: var(--admin-primary);
    color: var(--admin-ink);
}

.admin-category-menu-link {
    margin-top: 10px;
}

.admin-category-blocks__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-category-blocks__list:empty {
    display: none;
}

.admin-category-blocks__row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
}

.admin-category-blocks__row .admin-form-elements__dropdown {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-category-blocks__row .admin-admins__drag-handle {
    flex: none;
    cursor: grab;
}

.admin-category-blocks__row.ui-sortable-helper {
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.15);
}

.admin-category-blocks__placeholder {
    height: 48px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    visibility: visible !important;
}

.admin-media__hint {
    margin: 14px 0 0;
    color: #9ca3af;
    font-size: 13px;
}

@media (max-width: 900px) {
    .admin-media {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 코드 에디터(CodeMirror) - [data-code-editor] */
.admin-form-elements__field .CodeMirror {
    width: 100%;
    height: 480px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
}

.admin-settings__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--admin-border);
}

.admin-settings__cancel,
.admin-settings__save {
    min-width: 88px;
    height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.admin-settings__cancel {
    border: 1px solid var(--admin-border);
    background: #ffffff;
    color: var(--admin-ink-soft);
}

.admin-settings__cancel:hover {
    background: #f4f4f5;
}

.admin-settings__save {
    border: none;
    background: var(--admin-primary);
    color: #ffffff;
}

.admin-settings__save:hover {
    background: var(--admin-primary-dark);
}

.admin-settings__save--blue {
    background: #3e97ff;
}

.admin-settings__save--blue:hover {
    background: #2f83e6;
}

/* --- 읽기 전용 값 + 복사하기 버튼(예: 웹훅 URL) --- */
.admin-settings__copy-field {
    display: flex;
    gap: 8px;
}

.admin-settings__copy-field input {
    flex: 1;
}

.admin-settings__copy-btn {
    flex: 0 0 auto;
    height: var(--admin-input-height);
    padding: 0 18px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--admin-ink-soft);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-settings__copy-btn:hover {
    background: #f4f4f5;
}

/* --- 관리자 로고 업로드 목록 --- */
.admin-settings__logo-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-settings__logo-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.admin-settings__logo-info {
    flex: 0 0 160px;
}

.admin-settings__logo-label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-settings__logo-hint {
    margin: 0;
    font-size: 12px;
    color: var(--admin-ink-soft);
}

@media screen and (max-width: 767px) {
    .admin-settings {
        padding: 20px 16px 48px;
    }

    .admin-settings__card {
        padding: 20px;
    }

    .admin-settings__grid {
        grid-template-columns: 1fr;
    }

    .admin-settings__price-row {
        grid-template-columns: 1fr;
    }

    .admin-settings__logo-item {
        flex-wrap: wrap;
    }
}

/* --- 팝업 관리: 세로형 이미지 미리보기 + 활성화 토글 --- */
.admin-popup__card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--admin-border);
}

.admin-popup__card-title {
    margin-bottom: 4px;
}

.admin-popup__card-desc {
    margin: 0;
    font-size: 13px;
    color: var(--admin-ink-soft);
}

.admin-popup__body {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.admin-popup__preview-col {
    flex: 0 0 220px;
}

.admin-popup__settings-col {
    flex: 1;
    padding-top: 6px;
}

.admin-popup__image-upload .admin-image-upload__preview {
    width: 220px;
    height: 293px;
    border-radius: 14px;
}

.admin-popup__image-upload .admin-image-upload__preview img {
    max-width: 92%;
    max-height: 92%;
}

.admin-popup__image-upload .admin-image-upload__placeholder {
    flex-direction: column;
    gap: 8px;
    padding: 0 20px;
    font-size: 12px;
    text-align: center;
}

.admin-popup__hint {
    margin-top: 12px;
}

.admin-popup__hint p {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--admin-ink-soft);
}

.admin-popup__hint p:last-child {
    margin-bottom: 0;
}

.admin-popup__toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.admin-popup__toggle input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.admin-popup__toggle-switch {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 26px;
    margin-top: 2px;
    border-radius: 999px;
    background: #d1d5db;
    transition: background 0.15s ease;
}

.admin-popup__toggle-switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.25);
    transition: transform 0.15s ease;
}

.admin-popup__toggle input:checked + .admin-popup__toggle-switch {
    background: var(--admin-success);
}

.admin-popup__toggle input:checked + .admin-popup__toggle-switch::before {
    transform: translateX(18px);
}

.admin-popup__toggle input:focus-visible + .admin-popup__toggle-switch {
    outline: 2px solid var(--admin-primary);
    outline-offset: 2px;
}

.admin-popup__toggle-text strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--admin-ink);
}

.admin-popup__toggle-text small {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: var(--admin-ink-soft);
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .admin-popup__body {
        flex-direction: column;
    }

    .admin-popup__preview-col {
        flex: none;
        width: 100%;
    }

    .admin-popup__image-upload .admin-image-upload__preview {
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
    }
}

/* ==========================================================
   Administrators - admin 관리자 목록 샘플 페이지
   (okmanager.local.com/admin/adminstrator 참조, 정렬은 추후 ajax 연동 예정)
========================================================== */
.admin-admins {
    padding: 28px 24px 60px;
}

.admin-admins__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.admin-admins__header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.admin-admins__title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--admin-ink);
}

.admin-admins__breadcrumb {
    margin: 0;
    font-size: 13px;
    color: var(--admin-ink-soft);
}

.admin-admins__card {
    padding: 24px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04);
}

/* --- 검색 필터 바 --- */
.admin-admins__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.admin-admins__filter-dropdown {
    flex: 0 0 140px;
    width: 140px;
}

.admin-admins__filter-dropdown--wide {
    flex-basis: 200px;
    width: 200px;
}

.admin-admins__filter-field {
    position: relative;
    flex: 0 0 170px;
    width: 170px;
}

.admin-admins__filter-field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dbdfe9;
    border-radius: 6px;
    background: #ffffff;
    color: #4b5675;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.admin-admins__filter-field input:focus {
    border-color: #3e97ff;
}

.admin-admins__filter-field--date input {
    padding-right: 38px;
    cursor: pointer;
}

.admin-admins__filter-field--search input {
    padding-left: 38px;
}

.admin-admins__filter-icon {
    position: absolute;
    top: 50%;
    display: flex;
    color: #99a1b7;
    transform: translateY(-50%);
    pointer-events: none;
}

.admin-admins__filter-field--date .admin-admins__filter-icon {
    right: 12px;
}

.admin-admins__filter-field--search .admin-admins__filter-icon {
    left: 12px;
}

.admin-admins__btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 20px;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.admin-admins__btn--primary {
    background: #3e97ff;
    color: #ffffff;
}

.admin-admins__btn--primary:hover {
    background: #2f83e6;
}

.admin-admins__btn--secondary {
    background: #f1f1f2;
    color: #4b5675;
}

.admin-admins__btn--secondary:hover {
    background: #e4e4e6;
}

.admin-admins__btn--dark {
    background: #181c32;
    color: #ffffff;
}

.admin-admins__btn--dark:hover {
    background: #000000;
}

.admin-admins__btn--danger {
    background: #f1416c;
    color: #ffffff;
}

.admin-admins__btn--danger:hover {
    background: #d92f59;
}

/* --- 목록 테이블(좌측 2열 고정) --- */
.admin-admins__table-wrap {
    overflow-x: auto;
    /* 세로 스크롤은 사용하지 않는다. position:sticky가 적용된 좌측 고정 열이
       overflow-x:auto 컨테이너 안에서 스크롤 높이를 잘못 계산하게 만드는
       브라우저 이슈가 있어 overflow-y는 auto가 아닌 hidden으로 명시한다.
       (실제 콘텐츠 높이는 항상 정상적으로 감싸지므로 내용이 잘리지 않는다) */
    overflow-y: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
}

/* --- 페이지 스크롤 시 상단에 고정되는 헤더(실제 thead를 JS로 복제) --- */
.admin-admins__sticky-thead {
    position: fixed;
    top: 64px;
    z-index: 40;
    display: none;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--admin-border);
    box-shadow: 0 8px 16px rgba(17, 24, 39, 0.08);
}

.admin-admins__sticky-thead.is-visible {
    display: block;
}

.admin-admins__sticky-thead table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    table-layout: fixed;
}

.admin-admins__sticky-thead th {
    padding: 14px 16px;
    background: #071437;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.admin-admins__table {
    width: 100%;
    min-width: 920px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.admin-admins__table th,
.admin-admins__table td {
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
}

.admin-admins__table th.is-numeric,
.admin-admins__table td.is-numeric {
    text-align: right;
}

.admin-admins__table thead th {
    background: #071437;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.admin-admins__table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--admin-border);
}

.admin-admins__table tbody tr:hover td {
    background: #f9fafb;
}

.admin-admins__col-check {
    width: 48px;
}

.admin-admins__col-name {
    min-width: 180px;
    font-weight: 600;
    color: #071437;
}

.admin-admins__col-check.is-sticky,
.admin-admins__col-name.is-sticky {
    position: sticky;
    z-index: 2;
    background: #ffffff;
}

thead .admin-admins__col-check.is-sticky,
thead .admin-admins__col-name.is-sticky {
    z-index: 3;
    background: #071437;
}

.admin-admins__col-check.is-sticky {
    left: 0;
}

.admin-admins__col-name.is-sticky {
    left: 48px;
    border-right: 1px solid var(--admin-border);
}

.admin-admins__table tbody tr:hover .admin-admins__col-check.is-sticky,
.admin-admins__table tbody tr:hover .admin-admins__col-name.is-sticky {
    background: #f9fafb;
}

/* --- 제품 리뷰 관리: 체크박스 열이 없으므로 제목 고정열의 기본 left(48px)를 0으로 덮어쓴다 --- */
.admin-reviews__col-title.is-sticky {
    left: 0;
}

/* --- 주문 관리: 좌측 2열 고정(주문번호 130px + 주문자) ---
   체크박스 열이 없어 .admin-admins__col-name.is-sticky의 기본 left(48px)를 0으로 덮어쓴다.
   .admin-admins__col-name은 내용에 따라 폭이 달라져 뒤에 오는 고정열의 left 값을
   고정할 수 없으므로, 주문번호 열에만 폭을 고정하고 그 뒤에 주문자 고정열을 추가한다. */
.admin-orders__col-orderno.is-sticky {
    left: 0;
    width: 130px;
    min-width: 130px;
    max-width: 130px;
}

.admin-orders__col-orderer {
    min-width: 110px;
}

.admin-orders__col-orderer.is-sticky {
    position: sticky;
    left: 130px;
    z-index: 2;
    background: #ffffff;
    border-right: 1px solid var(--admin-border);
}

thead .admin-orders__col-orderer.is-sticky {
    z-index: 3;
    background: #071437;
}

.admin-admins__table tbody tr:hover .admin-orders__col-orderer.is-sticky {
    background: #f9fafb;
}

/* --- 정산 관리: 목록 하단 누계 행 --- */
.admin-settlements__totals td {
    border-top: 2px solid #071437;
    background: #f3f4f6;
    font-weight: 700;
    color: #071437;
}

.admin-settlements__totals td.is-sticky {
    background: #f3f4f6;
}

/* --- 체크박스 --- */
.admin-admins__checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.admin-admins__checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--admin-checkbox-accent);
    cursor: pointer;
}

/* --- 정렬 가능한 th(클릭 시 상태만 토글, 실제 정렬은 추후 ajax) --- */
.admin-admins__sort {
    cursor: pointer;
    user-select: none;
}

.admin-admins__sort-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-admins__sort-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    color: rgba(255, 255, 255, 0.3);
}

.admin-admins__sort-icon svg {
    display: block;
}

.admin-admins__sort.is-asc .admin-admins__sort-icon-up {
    color: #ffffff;
}

.admin-admins__sort.is-desc .admin-admins__sort-icon-down {
    color: #ffffff;
}

/* --- 상태 배지 --- */
.admin-admins__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.admin-admins__badge--active {
    background: #e8fff3;
    color: #50cd89;
}

.admin-admins__badge--inactive {
    background: #fff5f8;
    color: #f1416c;
}

.admin-admins__badge--payment {
    background: #fff6eb;
    color: #ff8a00;
}

.admin-admins__badge--received {
    background: #eef5ff;
    color: #3977d5;
}

.admin-admins__badge--complete {
    background: #f2f9e8;
    color: #83b414;
}

.admin-admins__badge--cancel {
    background: #fff2f3;
    color: #ff2c33;
}

.admin-admins__badge--muted {
    background: #f5f5f5;
    color: #989898;
}

.admin-admins__badge--pinned {
    background: #e8fff3;
    color: #50cd89;
}

/* --- 주문 상세 팝업 --- */
.admin-order-detail__section + .admin-order-detail__section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--admin-border);
}

.admin-order-detail__title {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-order-detail__section .admin-form-elements__field {
    margin-bottom: 14px;
}

.admin-order-detail__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 16px;
}

.admin-order-detail__row .admin-form-elements__field--full {
    grid-column: 1 / -1;
}

@media screen and (max-width: 575px) {
    .admin-order-detail__row {
        grid-template-columns: 1fr;
    }
}

.admin-order-detail__status-dropdown {
    margin-bottom: 14px;
}

.admin-order-detail__status-actions {
    display: flex;
    justify-content: flex-end;
}

.admin-order-detail__status-locked {
    margin: 0;
    font-size: 13px;
    color: var(--admin-ink-soft);
}

/* --- 순서 변경(드래그 핸들) 아이콘 버튼 --- */
.admin-admins__drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: #071437;
    color: #ffffff;
    cursor: grab;
}

.admin-admins__drag-handle:hover {
    background: #142450;
}

/* --- 이름 클릭 시 나오는 퀵메뉴 --- */
.admin-admins__name-cell {
    position: relative;
    cursor: pointer;
}

.admin-admins__name-cell.is-open {
    z-index: 4;
}

.admin-admins__preview-link {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--admin-border);
    border-radius: 4px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.admin-admins__preview-link:hover {
    background: #e5e7eb;
}

/* position:fixed로 뷰포트 기준 좌표를 JS(positionQuickmenu)가 직접 계산해 top/left에 지정한다.
   테이블 영역의 overflow-y:hidden, 상단 고정 헤더 등 조상 요소에 잘리거나 가려지지 않고
   항목이 늘어나 메뉴가 길어져도 항상 뷰포트 안에 온전히 보이도록 하기 위함이다. */
.admin-admins__quickmenu {
    position: fixed;
    z-index: 50;
    width: 140px;
    padding: 10px 6px 6px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #ffffff;
    background-clip: padding-box;
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    white-space: nowrap;
}

.admin-admins__name-cell.is-open .admin-admins__quickmenu {
    opacity: 1;
    visibility: visible;
}

/* 위쪽으로 뒤집어 노출될 때의 여백(정확한 좌표는 positionQuickmenu가 top/left로 지정) */
.admin-admins__name-cell.is-flip-up .admin-admins__quickmenu {
    padding: 6px 6px 10px;
}

.admin-admins__quickmenu-link {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--admin-ink-soft);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.admin-admins__quickmenu-link:hover {
    background: #f4f4f5;
    color: var(--admin-ink);
}

.admin-admins__quickmenu-link--danger {
    color: #f1416c;
}

.admin-admins__quickmenu-link--danger:hover {
    background: #fff5f8;
    color: #f1416c;
}

/* --- 목록 하단 액션(상태 변경/삭제/생성) --- */
.admin-admins__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.admin-admins__bulk-dropdown {
    flex: 0 0 160px;
    width: 160px;
}

/* --- 생성일 검색 달력(flatpickr) 색상 --- */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange,
.flatpickr-day.endRange:hover {
    border-color: #3e97ff;
    background: #3e97ff;
}

.flatpickr-day.inRange {
    border-color: #eaf4ff;
    background: #eaf4ff;
    box-shadow: -5px 0 0 #eaf4ff, 5px 0 0 #eaf4ff;
}

.flatpickr-day.today {
    border-color: #3e97ff;
}

/* --- 생성일 검색 달력(flatpickr) 텍스트 크기 - 사이트 기본 폰트 크기에 맞춰 축소 ---
   flatpickr CDN CSS가 admin.css 보다 늦게 로드되어 동일 우선순위 규칙을 덮어쓰므로 !important 로 고정한다. */
.flatpickr-calendar {
    font-size: 13px !important;
}

.flatpickr-current-month {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.flatpickr-weekday {
    font-size: 11px !important;
}

.flatpickr-day {
    height: 32px !important;
    line-height: 32px !important;
    font-size: 13px !important;
}

@media screen and (max-width: 767px) {
    .admin-admins {
        padding: 20px 16px 48px;
    }

    .admin-admins__card {
        padding: 16px;
    }

    .admin-admins__filter {
        gap: 8px;
    }

    .admin-admins__actions {
        flex-wrap: wrap;
    }

    .admin-admins__header {
        flex-wrap: wrap;
    }

    .admin-admins__header-actions {
        flex-wrap: wrap;
        width: 100%;
    }
}

/* ==========================================================
   Calendar - admin 달력 샘플 페이지
   (okmanager.local.com/admin/contract/payment-schedule 참조)
========================================================== */

/* ==========================================================
   Account Tree - admin 트리 샘플 페이지
   (okmanager.local.com/admin/accounting/account-title 참조)
========================================================== */
.admin-tree-page {
    padding: 28px 24px 60px;
}

.admin-tree-page__header {
    margin-bottom: 20px;
}

.admin-tree-page__title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--admin-ink);
}

.admin-tree-page__breadcrumb {
    margin: 0;
    font-size: 13px;
    color: var(--admin-ink-soft);
}

.admin-tree-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.admin-tree-page__left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- 트리 패널 --- */
.admin-tree-panel {
    padding: 20px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04);
}

.admin-tree-panel__actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.admin-tree-panel__actions .admin-admins__btn {
    flex: 1;
    height: 40px;
    padding: 0;
}

.admin-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 480px;
    overflow-y: auto;
}

.admin-tree .admin-tree__children {
    list-style: none;
    margin: 0;
    padding-left: 22px;
}

.admin-tree .admin-tree__children.js-tree-temp-list {
    min-height: 34px;
}

.admin-tree__row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--admin-ink);
}

.admin-tree__row:hover {
    background: #f4f4f5;
}

.admin-tree__row.is-selected {
    background: #e8fff3;
    font-weight: 700;
}

.admin-tree__toggle,
.admin-tree__toggle-spacer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--admin-border);
    border-radius: 4px;
    background: #ffffff;
    color: var(--admin-ink-soft);
}

.admin-tree__toggle-spacer {
    border-color: transparent;
    background: transparent;
}

.admin-tree__node.is-open > .admin-tree__row .admin-tree__toggle-vline {
    display: none;
}

.admin-tree__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.admin-tree__icon--folder {
    background: #f5b301;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.admin-tree__node:not(:has(> .admin-tree__children > .admin-tree__node)) > .admin-tree__row .admin-tree__toggle {
    visibility: hidden;
}

/* 하위 페이지가 없으면 폴더 대신 파일 아이콘을 표시한다(드래그로 하위가 바뀌어도 바로 반영된다). */
.admin-tree__icon--leaf,
.admin-tree__node:not(:has(> .admin-tree__children > .admin-tree__node)) > .admin-tree__row .admin-tree__icon--folder {
    background: #c4c9d2;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1.5V8h4.5L14 3.5ZM8 12v1.8h8V12H8Zm0 4v1.8h8V16H8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1.5V8h4.5L14 3.5ZM8 12v1.8h8V12H8Zm0 4v1.8h8V16H8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.admin-tree__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-tree__drag-handle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--admin-ink-soft);
    cursor: grab;
}

.admin-tree__drag-handle:active {
    cursor: grabbing;
}

.admin-tree__children li.ui-sortable-helper {
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.admin-tree__placeholder {
    background: #eef9f3;
    border: 1px dashed #50cd89;
    border-radius: 6px;
    list-style: none;
}

/* --- Notice 박스 --- */
.admin-tree-page__notice {
    padding: 18px 20px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04);
}

.admin-tree-page__notice-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--admin-ink);
}

.admin-tree-page__notice ul {
    margin: 0;
    padding-left: 18px;
    color: var(--admin-ink-soft);
    font-size: 13px;
    line-height: 1.8;
}

@media screen and (max-width: 991px) {
    .admin-tree-page__layout {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 767px) {
    .admin-tree-page {
        padding: 20px 16px 48px;
    }

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

/* ==========================================================
   Rich Editor (SmartEditor2) - [data-rich-editor] 재사용 페이지 공용
   이미지 삽입 버튼은 SmartEditor2 공식 기능이 아니라 admin.js에서
   기존 Laravel 이미지 업로드 API를 재사용해 직접 구현했지만,
   벤더 스킨 템플릿(smart_editor2_skin.html)에 다른 툴바 아이콘과
   같은 자리에 함께 배치해 하나의 툴바처럼 보이도록 한다.
   아이콘은 실제 DOM <svg> 대신 CSS mask-image로 그린다 - SmartEditor2가
   내부적으로 사용하는 legacy jindo 엔진이 toolbar 안의 엘리먼트를 순회할 때
   SVG 엘리먼트의 className(SVGAnimatedString)을 문자열로 가정해 .indexOf를
   호출하다가 예외가 나는 버그가 있기 때문이다.
========================================================== */
/* TEXT 모드는 입력한 HTML 태그를 문자로 이스케이프해 저장하므로 숨긴다.
   SmartEditor2가 초기화 시 버튼 엘리먼트를 직접 참조하므로 스킨에서 제거하지 않고 CSS로만 숨긴다. */
.smart_editor2 .se2_converter li:has(> .se2_to_text) {
    display: none !important;
}

.smart_editor2 .se2_text_tool .admin-rich-editor__image-btn {
    display: inline-flex !important;
    width: 21px;
    height: 21px;
    background: none !important;
    cursor: pointer;
}

.smart_editor2 .se2_text_tool .admin-rich-editor__image-btn::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin: auto;
    background-color: #666;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.4' fill='black' stroke='none'/%3E%3Cpath d='M4.5 16.5l4.5-4.5 3.5 3.5 2.5-2.5 4.5 4.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.4' fill='black' stroke='none'/%3E%3Cpath d='M4.5 16.5l4.5-4.5 3.5 3.5 2.5-2.5 4.5 4.5'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.smart_editor2 .se2_text_tool .admin-rich-editor__image-btn:hover {
    background: #e8e8e8 !important;
    border-radius: 3px;
}

.smart_editor2 .se2_text_tool .admin-rich-editor__image-btn:hover::before {
    background-color: var(--admin-primary);
}

/* 에디터 안 이미지 클릭 시 뜨는 크기 조절(25/50/75/100%) 플로팅 툴바.
   편집영역(iframe) 밖 body에 붙여 모달의 overflow-y:auto에 잘리지 않게 하고,
   position:fixed + JS에서 매 프레임 좌표를 갱신해 이미지 위치를 따라다니게 한다. */
.admin-rich-editor__resize-toolbar {
    position: fixed;
    z-index: 1000;
    display: flex;
    gap: 2px;
    padding: 4px;
    background: #27272a;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.admin-rich-editor__resize-toolbar[hidden] {
    display: none;
}

.admin-rich-editor__resize-toolbar button {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

.admin-rich-editor__resize-toolbar button:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* 관리자 화면(/admin)에서 404·500 등 HTTP 오류 발생 시 노출되는 오류 페이지(resources/views/admin/errors)
   사용자 화면 오류 페이지(app.css .page-error)와 동일한 디자인을 관리자 레이아웃 안에 노출한다. */
.admin-error {
    padding: 80px 20px;
    text-align: center;
}
.admin-error__title {
    margin: 0 0 14px;
    color: #83b414;
    font-size: 60px;
    font-weight: 800;
    line-height: 68px;
}
.admin-error__subtitle {
    display: block;
    margin-bottom: 16px;
    color: var(--admin-ink);
    font-size: 40px;
    font-weight: 800;
    line-height: 50px;
}
.admin-error__description {
    margin: 0 0 16px;
    color: var(--admin-ink-soft);
    font-size: 16px;
    line-height: 1.6;
}
.admin-error__button {
    display: inline-flex;
    min-width: 163px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 14.5px 14px;
    border-radius: 4px;
    background: #83b414;
    color: #fff;
    font-size: 16px;
    line-height: 19px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.admin-error__button:hover {
    background: #96bf37;
    color: #fff;
}
@media screen and (min-width: 768px) {
    .admin-error {
        min-height: 520px;
        padding-top: 100px;
    }
    .admin-error__title {
        font-size: 100px;
        line-height: 118px;
    }
    .admin-error__subtitle {
        font-size: 52px;
        line-height: 60px;
    }
}

/* AI 관리 */
.admin-ai-tasks__type-dropdown {
    flex-basis: 240px;
    width: 240px;
}

/* AI 블로그 자동생성 팝업 안내 문구 */
.admin-blog__ai-notice {
    margin: 0;
    padding: 12px 16px 12px 32px;
    border-radius: 6px;
    background: #f9f9f9;
    color: #78829d;
    font-size: 13px;
    line-height: 1.6;
}

/* ==========================================================
   CMS 매뉴얼(/manual)
   관리자 화면 레이아웃(.admin-shell·.admin-settings)을 그대로 쓰고 본문 문서 요소만 추가로 정의한다.
========================================================== */
.admin-manual {
    max-width: 1080px;
}

.admin-manual__menu-number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    font-size: 11px;
    font-weight: 700;
}

.admin-sidebar__menu-item.is-active > a .admin-manual__menu-number {
    background: #000000;
    color: #ffffff;
}

.admin-manual__admin-link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--admin-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.admin-manual__admin-link:hover {
    background: var(--admin-primary-dark);
}

.admin-manual__admin-link--secondary {
    border: 1px solid var(--admin-border);
    background: #ffffff;
    color: var(--admin-ink);
}

.admin-manual__admin-link--secondary:hover {
    background: var(--admin-bg);
}

@media screen and (max-width: 575px) {
    .admin-manual__admin-link {
        padding: 0 10px;
        font-size: 12px;
    }
}

.admin-manual .admin-settings__card {
    color: var(--admin-ink);
    font-size: 15px;
    line-height: 1.75;
}

.admin-manual h3 {
    margin: 28px 0 10px;
    font-size: 15px;
    font-weight: 700;
}

.admin-manual h3:first-child {
    margin-top: 0;
}

.admin-manual p {
    margin: 0 0 12px;
    color: var(--admin-ink-soft);
}

.admin-manual ul,
.admin-manual ol {
    margin: 0 0 12px;
    padding-left: 22px;
    color: var(--admin-ink-soft);
}

.admin-manual li + li {
    margin-top: 4px;
}

.admin-manual strong {
    color: var(--admin-ink);
}

.admin-manual code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #b42318;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    word-break: break-all;
}

.admin-manual pre {
    margin: 0 0 16px;
    padding: 16px 18px;
    border-radius: 8px;
    background: #111827;
    color: #e5e7eb;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.7;
    overflow-x: auto;
}

.admin-manual pre code {
    padding: 0;
    background: none;
    color: inherit;
    word-break: normal;
}

.admin-manual__table-wrap {
    margin: 0 0 16px;
    overflow-x: auto;
}

.admin-manual__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-manual__table th,
.admin-manual__table td {
    padding: 10px 12px;
    border: 1px solid var(--admin-border);
    text-align: left;
    vertical-align: top;
}

.admin-manual__table th {
    background: var(--admin-bg);
    font-weight: 700;
    word-break: keep-all;
}

.admin-manual__table thead th {
    white-space: nowrap;
}

.admin-manual__table td {
    color: var(--admin-ink-soft);
}

.admin-manual__note {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--admin-checkbox-accent);
    border-radius: 0 8px 8px 0;
    background: #eff6ff;
    color: var(--admin-ink);
    font-size: 14px;
}

.admin-manual__note--warning {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.admin-manual__note p:last-child,
.admin-manual__note ul:last-child {
    margin-bottom: 0;
}

.admin-manual__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.admin-manual__card-link {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    color: var(--admin-ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.admin-manual__card-link:hover {
    border-color: var(--admin-ink);
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
}

.admin-manual__card-group {
    display: block;
    margin-bottom: 4px;
    color: var(--admin-ink-soft);
    font-size: 12px;
}

.admin-manual__card-title {
    font-size: 15px;
    font-weight: 700;
}

.admin-manual__pager {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

.admin-manual__pager-link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 48%;
    padding: 14px 18px;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--admin-ink);
    text-decoration: none;
}

.admin-manual__pager-link:hover {
    border-color: var(--admin-ink);
}

.admin-manual__pager-link--next {
    margin-left: auto;
    text-align: right;
}

.admin-manual__pager-label {
    color: var(--admin-ink-soft);
    font-size: 12px;
}

.admin-manual__pager-title {
    font-size: 14px;
    font-weight: 700;
}

@media screen and (max-width: 575px) {
    .admin-manual .admin-settings__card {
        padding: 20px 16px;
    }
}

.admin-manual .admin-settings__card a:not([class]) {
    color: var(--admin-checkbox-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}