/* ======================================================================
   app.css — artmarket 관리자 껍데기만. 그리드 키트(cgrid.css)와 섞지 않는다.
   사이드바 / 사이드바 메뉴 계층 / 대시보드 / 로그인
   ====================================================================== */
/* ---------- 사이드바 — colon-hub·colon-work 와 같은 모양·움직임(2026-11-04, colon-work 0059 값). 색만 아트마켓(slate-900 바탕 + 주황 막대) ----------
   묶음 머리 굵게/연하게 · 1뎁스 47px · 활성 = 왼쪽 주황 막대 + 밝은 바탕 ·
   묶음 여닫기 = 높이가 미끄러지듯(grid-template-rows 0fr↔1fr) · 꺽쇠 회전 · 컨트롤 바는 메뉴에 마우스를 올릴 때만 */
:root {
    --sb-w: 240px;
    --sb-bg: #0f172a;            /* 아트마켓 = slate-900 (colon-hub 는 남색 그라데이션) */
    --sb-solid: #0f172a;
    --sb-fg: rgba(255, 255, 255, .62);
    --sb-accent: #FF5A36;        /* = --brand-accent(쇼핑몰 주황) */
    --ease-out: cubic-bezier(.2, .8, .2, 1);
}
#adminSidebar {
    width: var(--sb-w); flex: 0 0 var(--sb-w); background: var(--sb-bg); color: var(--sb-fg);
    box-shadow: 2px 0 12px rgba(0, 0, 0, .15); position: relative; z-index: 5;
    transition: margin-left .18s ease;
}
body.sidebar-collapsed #adminSidebar { margin-left: calc(var(--sb-w) * -1); }
/* 로고 줄 — colon-hub .sb-logo 치수 */
.sb-logo { flex: 0 0 auto; display: flex; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; }

/* ⑤ 접기 핸들 — 펼침 = 사이드바 경계에 붙은 흰 탭 / 접힘 = 화면 왼쪽 끝 (colon-hub .sb-handle) */
#sidebarHandle {
    position: fixed; top: 50%; left: var(--sb-w); transform: translate(-100%, -50%);
    width: 20px; height: 52px; padding: 0; z-index: 60;
    background: #fff; color: #555; border: 1px solid #e2e8f0; border-right: 0; border-radius: 8px 0 0 8px;
    box-shadow: 2px 0 6px rgba(0, 0, 0, .06); transition: left .18s ease;
}
#sidebarHandle:hover { background: #f4f4f4; color: #333; }
#sidebarHandle svg { display: block; width: 10px; height: 24px; }
body.sidebar-collapsed #sidebarHandle { left: 0; transform: translate(0, -50%); border: 1px solid #e2e8f0; border-left: 0; border-radius: 0 8px 8px 0; }
body.sidebar-collapsed #sidebarHandle svg { transform: scaleX(-1); }   /* 닫힘 = 오른쪽(›) 화살표 */
body.modal-open #sidebarHandle { z-index: 10; }

/* 사이드바 메뉴 스크롤바: 얇고 은은하게(다크 배경) */
#adminSidebar nav { padding: 4px 0 48px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }   /* §2.8⑦ 하단 여유 */
#adminSidebar nav::-webkit-scrollbar { width: 6px; }
#adminSidebar nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 3px; }
#adminSidebar nav::-webkit-scrollbar-track { background: transparent; }
/* 본문 스크롤바: 얇게 */
main { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .35) transparent; }
main::-webkit-scrollbar { width: 8px; }
main::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .3); border-radius: 4px; }
main::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .5); }
main::-webkit-scrollbar-track { background: transparent; }

/* ---------- 사이드바 메뉴 계층 (§2.8 ⑦: 0뎁스 그룹 / 1뎁스 리프) ---------- */
.nav-link, .nav-group-head {
    display: flex; align-items: center; gap: 8px; width: 100%; font-size: 14px; line-height: 1.2; text-align: left;
    color: rgba(255, 255, 255, .6); text-decoration: none; border: 0; border-left: 3px solid transparent; background: transparent;
    transition: background .2s ease, color .2s ease;
}
/* 0뎁스 묶음 머리 — 글씨 크기는 1뎁스와 같고 굵고 연하게. 꺽쇠는 행 오른쪽 끝 */
.nav-group-head { padding: 10px 24px; color: rgba(255, 255, 255, .5); font-weight: 700; cursor: pointer; }
.nav-group-head:hover { color: rgba(255, 255, 255, .82); }
.nav-top { padding: 10px 24px; font-weight: 700; }           /* 묶음 밖 리프(대시보드) = 묶음 머리와 같은 들여쓰기·굵기 */
.nav-leaf { padding: 10px 24px 10px 47px; font-weight: 500; } /* 1뎁스 리프 */
.nav-link:hover { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .92); }
/* ⑧ 활성 = 왼쪽 주황 막대 + 굵게 + 밝은 바탕 */
.nav-link.is-active { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; border-left-color: var(--sb-accent); }
.nav-link.is-active .nav-label { color: #fff; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 말줄임 */
/* 꺽쇠 = 행 오른쪽 끝(ADMIN_PAGE_RULE §2.8⑦) — 닫힘 › / 열림 ⌄ 로 돈다 */
.nav-chevron { order: 9; margin-left: auto; width: 11px; height: 11px; flex: 0 0 11px; stroke-width: 3; color: currentColor; transition: transform .2s ease; }
.nav-group.is-open > .nav-group-head .nav-chevron { transform: rotate(90deg); }
/* 묶음 여닫기 — 높이가 미끄러지듯(내용은 .nav-group-inner 한 칸) */
.nav-group { margin-bottom: 2px; }
.nav-group-body { display: grid; grid-template-rows: 0fr; opacity: .2; transition: grid-template-rows .24s var(--ease-out), opacity .2s ease; }
.nav-group-inner { min-height: 0; overflow: hidden; }
.nav-group.is-open > .nav-group-body { grid-template-rows: 1fr; opacity: 1; }
/* 닫힌 묶음 안에 지금 화면이 있으면 머리 글씨를 활성 톤으로(§2.8 ⑦ 기본 전체 닫힘 — 자동 펼침 안 함) */
.nav-group:not(.is-open).has-cur > .nav-group-head { color: rgba(255, 255, 255, .92); }

/* 맨 윗줄 — 대시보드(왼쪽) + 컨트롤 바(오른쪽), nav 스크롤 안에서 sticky (colon-work 0057).
   컨트롤 바는 메뉴 영역에 마우스를 올릴 때만 보인다(colon-hub 와 같게) — 터치 기기는 늘 보인다 */
.nav-ctl { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; background: var(--sb-solid); margin-bottom: 2px; }
.nav-ctl > .nav-link { flex: 1 1 auto; min-width: 0; width: auto; }
.nav-ctl-btns {
    flex: none; display: flex; align-items: center; gap: 2px; height: 30px; margin-right: 12px; padding: 0 4px; border-radius: 8px;
    background: rgba(30, 41, 59, .92); opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
#adminSidebar nav:hover .nav-ctl-btns, .nav-ctl-btns:focus-within { opacity: 1; pointer-events: auto; }
@media (hover: none) { .nav-ctl-btns { opacity: 1; pointer-events: auto; } }
.nav-ctl-btns > span { width: 1px; height: 12px; margin: 0 3px; background: rgba(255, 255, 255, .15); }
.nav-mini-btn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 5px; background: transparent; color: rgba(255, 255, 255, .38); cursor: pointer; }
.nav-mini-btn:hover { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); }
.nav-mini-btn svg { width: 13px; height: 13px; stroke-width: 2.2; }
/* 사이드바 툴팁 — 메뉴 이름은 말줄임으로 잘렸을 때만, 그 줄 오른쪽 바깥에(colon-hub 0163). 컨트롤 단추는 늘 */
.nav-tooltip { position: fixed; z-index: 200; transform: translateY(-50%); background: #fff; color: #0f172a; border: 1px solid #0f172a; font-size: 12px; font-weight: 600;
    padding: 5px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .07s; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.nav-tooltip.show { opacity: 1; }
/* §2.5 그리드 셀 말줄임 커스텀 툴팁 (커서 추종, 긴 내용은 줄바꿈) */
.admin-celltip { position: fixed; z-index: 200; transform: translateY(-50%); background: #fff; color: var(--primary); border: 1px solid var(--primary); font-size: 12px;
    padding: 5px 9px; border-radius: 6px; max-width: 60vw; white-space: normal; word-break: break-word; line-height: 1.4;
    pointer-events: none; opacity: 0; transition: opacity .07s; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.admin-celltip.show { opacity: 1; }
/* .admin-tip 은 키트(cgrid.css)가 정한다 — 여기서 바깥 상자에 바탕·테두리를 다시 입히면 툴팁이 두 겹이 된다(2026-10-02 제거) */

/* ============================================================
   colon-money 추가분 — 공통 컴포넌트(§1.6 atom/molecule) 확장
   화면 JTE 에 인라인 <style> 을 두지 않기 위해 전부 여기에 둔다.
   ============================================================ */

/* ---------- 대시보드 ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: block; transition: all .15s; }
a.stat-card:hover { background: var(--primary); border-color: var(--primary); }
a.stat-card:hover .stat-label, a.stat-card:hover .stat-value, a.stat-card:hover .stat-sub { color: #fff; }
.stat-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.stat-label::before { content: ""; width: 4px; height: 13px; border-radius: 2px; background: var(--primary); }
.stat-value { font-size: 26px; font-weight: 800; color: var(--primary); line-height: 1.25; margin-top: 8px; }
.stat-value .unit { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-left: 3px; }
.stat-sub { font-size: 11px; color: var(--text-secondary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 설명은 한 줄 — 넘치면 … */
.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel-head { padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; }
.panel-head::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--primary); }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table th { background: #f8fafc; font-size: 11px; font-weight: 600; color: var(--text-secondary); padding: 8px 14px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mini-table td { font-size: 12.5px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); white-space: nowrap; }
.mini-table tr:last-child td { border-bottom: none; }
.mini-table tbody tr:hover td { background: var(--primary-light); }
/* 숫자는 자릿수가 세로로 맞아야 대소가 눈에 들어온다(tabular-nums) + 본문보다 크고 진하게 */
.mini-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mini-table td.amt { font-size: 14.5px; font-weight: 700; color: var(--primary); letter-spacing: -.01em; }
.mini-table td.amt .cur { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); margin-left: 2px; }
.mini-table td.cnt { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.mini-table td.cnt .unit { font-size: 10.5px; font-weight: 500; color: var(--text-secondary); margin-left: 1px; }
.mini-table td.ym { font-size: 12.5px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mini-table td.amt.zero { color: var(--text-secondary); font-weight: 500; }   /* 0 은 눈에 덜 걸리게 */
.mini-empty { padding: 26px 14px; text-align: center; color: var(--text-secondary); font-size: 13px; }

/* ---------- 로그인 ---------- */
body:has(.login-wrap) { margin: 0; padding: 0; background: #0f172a; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: #0f172a; position: relative; }
.login-card { width: 100%; max-width: 360px; background: #fff; border-radius: 16px; padding: 34px 30px 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.login-logo { font-size: 21px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; text-align: center; }
.login-logo span { color: #64748b; font-weight: 700; }
.login-form { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.login-form .filter-input { height: 44px; font-size: 14px; }
.login-form .btn { height: 44px; justify-content: center; font-size: 14px; }
.login-error { font-size: 12.5px; color: var(--danger); font-weight: 600; text-align: center; }
/* Caps Lock 경고 — 오류 문구(빨강)와 **다른 색**을 쓴다. 이건 '틀렸다'가 아니라
   '이대로 치면 틀린다'는 예고라서, 같은 빨강이면 이미 실패한 것으로 읽힌다. */
.login-caps {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0; padding: 7px 10px;
    font-size: 12.5px; font-weight: 600; color: #b45309;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm);
}
/* ⚠️ footgun: `display:flex` 는 브라우저 기본 `[hidden]{display:none}` 을 **이긴다**
   (작성자 스타일이 UA 스타일보다 우선). 숨김을 명시하지 않으면 늘 켜진 것처럼 보인다. */
.login-caps[hidden] { display: none; }
.login-version { position: fixed; left: 16px; bottom: 12px; font-size: 11px; color: rgba(255, 255, 255, .45); }

/* 모바일(≤768px) 셸 = 키트 v4.16.0 모바일 셸(cgridShell mobile, ADMIN_PAGE_RULE §2.19) — 아래 탭 줄 · ☰ · 오른쪽 서랍.
   예전 왼쪽 오프캔버스 드로어 · 우하단 햄버거 FAB · 딤드는 키트로 옮겨 지웠다. */
@media (max-width: 768px) {
    #sidebarHandle { display: none; }   /* PC 가장자리 핸들 — 모바일은 ☰ */
    /* 아래 탭 줄의 사용자 영역(data-m="profile", 맨 왼쪽)은 로그아웃만 — 이름까지 두면 '지금 탭 ▾' 이 두세 글자로 잘린다(yein 과 같음) */
    html.cgm-on .cgm-r-profile { padding: 0 4px 0 10px; border-left: 0; }
    html.cgm-on .cgm-r-profile > span { display: none; }
}

/* 셸 탭 줄 도움말(?) 단추(data-cg-help-toggle, 키트 v4.17.0 §2.18) — 켜진 동안 밝게 칠한다(키트가 is-on · aria-pressed 를 단다) */
.tc-btn.is-on { background: #f1f5f9; color: #0f172a; }
.tc-btn.is-on:hover:not(:disabled) { background: #fff; color: #0f172a; }   /* shell.jte 인라인 .tc-btn:hover 보다 특정도 높게 */

/* 모달 폼 — 여백은 모달 본문(p-6) 하나만. 폼 맨 앞의 hidden id 때문에 space-y-4 가 첫 섹션 위에 16px 을 더 얹던 것을 뺀다 */
.cg-modal-body form.space-y-4 > .form-grid { margin-top: 0; }
.cg-modal-body form.space-y-4 > .form-error + .form-grid { margin-top: 12px; }
/* 텍스트에어리어(비고·내용 상세) 칸은 언제나 한 줄 전체 — 템플릿에서 col-full 을 빠뜨려도 여기서 맞춘다 */
.form-grid .field:has(> textarea) { grid-column: 1 / -1; }
/* 섹션 띠 앞뒤 간격 축소 — 키트 기본(위 16px + 줄간격 14px = 30px)은 팝업에서 휑하다 → 위 18px · 아래 10px */
.form-grid .form-section { margin: 4px 0 -4px; }
.form-grid .form-section:first-child { margin-top: 0; }
/* 폼 라벨 앞 막대는 연하게 — 섹션 띠(진한 막대)와 위계를 가른다. 검색카드 라벨 막대는 그대로 */
.form-grid .field-label::before { background: #94a3b8; }


/* ============================================================
   artmarket 추가분
   ============================================================ */
/* 브랜드 — 관리자 사이드바 로고·로그인 로고는 쇼핑몰 텍스트 로고(Black Han Sans, ART + 주황 MARKET)와 같은 톤 */
:root { --brand-ink: #111111; --brand-accent: #FF5A36; }
.brand-word { font-family: 'Black Han Sans', 'IBM Plex Sans KR', sans-serif; font-weight: 400; letter-spacing: -.01em; }
.brand-word .accent { color: var(--brand-accent); }
.sb-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.sb-brand img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.sb-brand .brand-word { font-size: 19px; color: #fff; }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.login-logo img { width: 48px; height: 48px; border-radius: 13px; }
.login-logo .brand-word { font-size: 26px; color: var(--brand-ink); }
.login-logo .login-sub { font-size: 12px; font-weight: 700; color: #64748b; letter-spacing: .12em; }
/* 사이드바 즐겨찾기 모음(키트 v4.24.0 cgrid-favmenu) — 사본 링크의 '지금 화면' 강조 = is-active 와 같은 값(§2.8 ⑨) */
.nav-link.cg-fav-cur { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; border-left-color: var(--sb-accent); box-shadow: none; }
.cg-fav > .cg-fav-head { padding: 12px 24px 6px; color: rgba(255, 255, 255, .45); opacity: 1; letter-spacing: .02em; }
.cg-fav > .nav-link { padding: 9px 30px 9px 47px; font-weight: 500; }   /* 즐겨찾기 사본 = 1뎁스 리프 모양(colon-hub 와 같게) */
.nav-link.cg-fav-cur .nav-label { color: #fff; }
/* 사이트 보기 — 사이드바 최하단 고정(§2.8 ③) */
.sb-site { display: block; text-align: center; font-size: 12px; padding: 8px 0; border-radius: 6px; background: #1e293b; color: #e2e8f0; }
.sb-site:hover { background: #334155; }
/* 상품 목록 썸네일(키트 thumb 셀) — 작품은 정사각 크롭 */
.data-table img.thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: #f1f5f9; }
/* 상품 팝업 — 이미지 미리보기 */
.img-preview { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: #f8fafc; }
.field-row { display: flex; gap: 12px; align-items: flex-start; }
.field-row > .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); margin-right: 16px; }
/* 대시보드 소제목 */
.panel-title-sm { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: -8px; }
/* 주문 상세 팝업 — 주문 상품 표 */
.order-items { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.order-items .oi-name { display: inline-flex; align-items: center; gap: 10px; }
.order-items .oi-name img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; background: #f1f5f9; }

/* ---------- POD SHOP 연동 샘플 (/admin/podshop · ADR-018) — 콜백 로그 · 최근 editorNo · 발급 예시 ---------- */
.ps-log-panel { align-self: start; }
.ps-log-item { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
.ps-log-item:last-child { border-bottom: none; }
.ps-log-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps-log-time { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.ps-log-fn { font-weight: 700; color: var(--primary); }
/* 콜백 원본 JSON — 스펙 불일치를 눈으로 확인하는 자리라 줄바꿈·전체 노출, 길면 안에서 스크롤 */
.ps-json { margin: 6px 0 0; padding: 8px 10px; background: #f8fafc; border: 1px solid var(--border); border-radius: 6px;
    font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; }
.ps-thumb { margin-top: 6px; width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.ps-recent { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.ps-recent button { font-size: 12px; padding: 3px 9px; border: 1px solid var(--control-border); border-radius: 999px; background: #fff; color: var(--text-primary); cursor: pointer; }
.ps-recent button:hover { background: var(--primary-light); }
.ps-curl { margin-top: 6px; font-size: 11px; background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 8px; white-space: pre-wrap; word-break: break-all; }
textarea.filter-input { height: auto; min-height: 96px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; resize: vertical; }

/* ---------- POD SHOP 연동 문서 (/admin/podshop-guide · ADR-019) — Swagger 형 카드: POST 초록 · JS 파랑 ---------- */
.pg code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
.pg-summary { list-style: disc; padding-left: 18px; line-height: 1.7; color: var(--text-primary); }
.pg-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; }
.pg-meta dt { color: var(--text-secondary); font-weight: 700; }
.pg-meta dd { margin: 0; min-width: 0; word-break: break-all; }
.pg-host { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
.pg-link { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.pg-toc { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.pg-toc a { font-size: 12px; padding: 3px 10px; border: 1px solid var(--control-border); border-radius: 999px; background: #fff; color: var(--text-primary); }
.pg-toc a:hover { background: var(--primary-light); }
.pg-group-desc { padding: 10px 16px 0; font-size: 13px; color: var(--text-secondary); }
.pg-ops { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.pg-op { --op: #49cc90; --op-bg: rgba(73, 204, 144, .08); border: 1px solid var(--op); border-radius: 6px; background: var(--op-bg); }
.pg-op.is-js { --op: #61affe; --op-bg: rgba(97, 175, 254, .08); }
.pg-op > summary { display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.pg-op > summary::-webkit-details-marker { display: none; }
.pg-method { min-width: 56px; text-align: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--op); border-radius: 4px; padding: 4px 8px; }
.pg .pg-path { background: none; padding: 0; font-size: 13.5px; font-weight: 700; color: #0f172a; word-break: break-all; }
.pg-op-sum { font-size: 13px; color: #334155; }
.pg-side { font-size: 12px; color: var(--text-secondary); }
.pg-op-body { border-top: 1px solid var(--op); background: #fff; padding: 12px 14px; border-radius: 0 0 6px 6px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pg-op-body > * { align-self: stretch; }
.pg-op-body > .btn { align-self: flex-start; }
.pg-sub { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.pg-none { font-size: 12px; color: var(--text-secondary); }
.pg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pg-table th { text-align: left; font-weight: 700; color: var(--text-secondary); background: #f8fafc; border-bottom: 1px solid var(--border); padding: 6px 8px; white-space: nowrap; }
.pg-table td { border-bottom: 1px solid var(--border); padding: 6px 8px; vertical-align: top; line-height: 1.5; }
.pg-table tr:last-child td { border-bottom: none; }
.pg-type { color: #7c3aed; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.pg-cols { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 1280px) { .pg-cols { grid-template-columns: 1fr 1fr; } }
.pg-code { margin: 0; font-size: 11.5px; line-height: 1.5; background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 6px; white-space: pre-wrap; word-break: break-all; }
.pg-notes { list-style: disc; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: #92400e; }
.pg-schemas, .pg-cautions { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 1280px) { .pg-schemas, .pg-cautions { grid-template-columns: 1fr 1fr; } }
.pg-schema, .pg-caution { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.pg-schema-head { font-size: 13px; margin-bottom: 6px; }
.pg-caution .pg-notes { color: var(--text-primary); }
.pg .pg-ok { background: #dcfce7; color: #166534; }
.pg .pg-err { background: #fee2e2; color: #991b1b; }
.pg-refs { padding: 12px 16px 16px 34px; list-style: disc; font-size: 13px; line-height: 1.9; }
.pg-refs li > span { margin-left: 8px; font-size: 12px; }

/* ---------- POD SHOP 스토어 샘플 (/admin/podshop-store · ADR-020) — 상품·템플릿 카드 · 장바구니. 로그는 ps-* 재사용 ---------- */
.pss-side { align-self: start; }
.pss-grow { flex: 1 1 200px; min-width: 0; }
.pss-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.pss-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; }
.pss-card:hover { background: var(--primary-light); }
.pss-card.is-on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.pss-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #f8fafc; border-radius: 6px; }
.pss-card-name { font-size: 12.5px; font-weight: 700; color: var(--text-primary); line-height: 1.35; word-break: break-all; }
.pss-card-id { font-size: 11px; color: var(--text-secondary); }
.pss-empty { padding: 12px 16px; font-size: 12px; color: var(--text-secondary); }
.pss-cart-item { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.pss-cart-item:last-child { border-bottom: none; }
.pss-cart-item .ps-thumb { margin-top: 0; flex: none; }
.pss-nothumb { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-secondary); }
.pss-cart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pss-cart-title { font-size: 13px; font-weight: 700; word-break: break-all; }
.pss-cart-sub { font-size: 12px; color: var(--text-secondary); word-break: break-all; }
.pss-warn { font-size: 12px; color: #b45309; }
.pss-cart-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pss-qty { width: 64px; }

/* ===== 카테고리 트리(pages/admin/category.jte · js/admin-category.js, 2026-11-04 포스트링 상품뎁스관리 이식) ===== */
.cat-app { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; height: calc(100vh - 120px); min-height: 480px; }
@media (max-width: 900px) { .cat-app { grid-template-columns: 1fr; height: auto; } .cat-pane { max-height: 70vh; } }
.cat-pane { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cat-head { display: flex; align-items: center; gap: 6px; padding: 10px; border-bottom: 1px solid #e2e8f0; }
.cat-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1.5px solid var(--control-border, #d5dbe3); border-radius: 8px; background: #fff; }
.cat-search:focus-within { border-color: #0f172a; }
.cat-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; font-size: 13px; background: transparent; }
.cat-ibtn { width: 30px; height: 30px; flex: 0 0 30px; display: inline-grid; place-items: center; border-radius: 6px; color: #64748b; }
.cat-ibtn:hover { background: #f1f5f9; color: #0f172a; }
.cat-ibtn svg { width: 16px; height: 16px; }
.cat-tree { flex: 1 1 auto; overflow: auto; padding: 6px; outline: none; }
.tn { position: relative; display: flex; align-items: center; gap: 4px; height: 34px; padding-right: 6px; border-radius: 7px; cursor: pointer; user-select: none; font-size: 14px; color: #1e293b; }
.tn.lv-1 { padding-left: 2px; font-weight: 600; } .tn.lv-2 { padding-left: 20px; } .tn.lv-3 { padding-left: 38px; }
.tn.lv-4 { padding-left: 56px; } .tn.lv-5 { padding-left: 74px; } .tn.lv-6 { padding-left: 92px; }
.tn:hover { background: #f1f5f9; }
.tn.is-sel { background: #0f172a; color: #fff; }
.tn.is-sel .tn-count { color: #cbd5e1; }
.tn.is-hidden .tn-name { color: #94a3b8; }
.tn.is-sel.is-hidden .tn-name { color: #cbd5e1; }
.tn-caret { width: 22px; height: 22px; flex: 0 0 22px; display: inline-grid; place-items: center; border-radius: 4px; color: #94a3b8; }
.tn-caret svg { width: 14px; height: 14px; transition: transform .12s; }
.tn.is-open > .tn-caret svg { transform: rotate(90deg); }
.tn-caret:empty { visibility: hidden; }
.tn-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-name mark { background: #fde68a; color: inherit; border-radius: 2px; }
.tn-count { font-size: 12px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.tn-hid { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: #f1f5f9; color: #94a3b8; }
.tn-acts { display: none; gap: 2px; }
.tn:hover .tn-acts, .tn.is-sel .tn-acts { display: inline-flex; }
.tn-acts button { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 5px; color: inherit; opacity: .75; }
.tn-acts button:hover { opacity: 1; background: rgba(148, 163, 184, .25); }
.tn-acts svg { width: 15px; height: 15px; }
.tn.drop-before::before, .tn.drop-after::after { content: ""; position: absolute; left: 8px; right: 8px; height: 2px; background: #f43f5e; border-radius: 2px; }
.tn.drop-before::before { top: -1px; } .tn.drop-after::after { bottom: -1px; }
.tn.drop-inside { box-shadow: inset 0 0 0 2px #f43f5e; }
.tn.is-drag { opacity: .4; }
.cat-tree.drop-root { box-shadow: inset 0 -3px 0 #f43f5e; }
.cat-none { margin: 0 10px 6px; padding: 8px 10px; border-radius: 8px; text-align: left; font-size: 13px; color: #b45309; background: #fffbeb; }
.cat-none.is-sel { background: #0f172a; color: #fff; }
.cat-tip { margin: 0; padding: 8px 12px 10px; font-size: 11px; color: #94a3b8; border-top: 1px solid #f1f5f9; line-height: 1.5; }
.cat-emptyr { margin: auto; text-align: center; color: #64748b; font-size: 14px; line-height: 1.8; padding: 24px; }
.cat-rbody { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.cat-rhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.cat-path { margin: 0 0 2px; font-size: 12px; color: #94a3b8; }
.cat-name { margin: 0; font-size: 18px; font-weight: 800; color: #0f172a; }
.cat-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: #f1f5f9; color: #475569; }
.cat-rbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.cat-sub { height: 34px; }
.cat-psearch { flex: 0 1 260px; margin-left: auto; }
.cat-prods { flex: 1 1 auto; overflow: auto; padding: 12px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: min-content; gap: 8px; align-content: start; }
.pcard { display: flex; align-items: center; gap: 10px; height: 68px; padding: 6px 10px 6px 6px; text-align: left; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; min-width: 0; transition: box-shadow .12s, border-color .12s; }
.pcard:hover { border-color: #0f172a; box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.pcard-img { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 7px; overflow: hidden; background: #f1f5f9; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pcard-body b { font-size: 13px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pcard-line span { font-size: 12px; font-weight: 700; color: #0f172a; white-space: nowrap; }
.pcard-tag { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.pcard-body small { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-prods-empty { grid-column: 1 / -1; text-align: center; color: #94a3b8; font-size: 13px; padding: 40px 0; }
.cat-menu { position: fixed; z-index: 1000; min-width: 170px; padding: 4px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); display: flex; flex-direction: column; }
.cat-menu[hidden] { display: none; }
.cat-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: #1e293b; text-align: left; }
.cat-menu button:hover { background: #f1f5f9; }
.cat-menu button:disabled { opacity: .4; pointer-events: none; }
.cat-menu button.is-danger { color: #e11d48; }
.cat-menu kbd { font-size: 10px; color: #94a3b8; font-family: inherit; }

/* ======================================================================
   사이드바 메뉴 움직임 — ADMIN_PAGE_RULE §2.8 ⑩ 값 그대로(2026-11-04). 버튼·모달·콤보·표 행·탭 움직임은 키트(v4.29.0 cgrid.css·cgrid-motion.js)가 준다 — 여기 다시 적지 않는다
   ====================================================================== */
.nav-link { transition: background .2s ease, color .2s ease, padding-left .2s var(--ease-out), transform .1s ease; }
.nav-top:hover:not(.is-active) { padding-left: 31px; }                                   /* 24 + 7 */
.nav-leaf:hover:not(.is-active), .cg-fav > .nav-link:hover:not(.is-active) { padding-left: 54px; }   /* 47 + 7 */
.nav-link:active, .nav-group-head:active { transform: scale(.985); }
.nav-mini-btn { transition: background .15s, color .15s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.nav-mini-btn:hover { transform: scale(1.15); }
.nav-mini-btn:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) {
    .nav-link, .nav-mini-btn, .nav-group-body, .nav-chevron, #adminSidebar, #sidebarHandle { transition: none !important; }
    .nav-link:active, .nav-group-head:active, .nav-mini-btn:hover, .nav-mini-btn:active { transform: none !important; }
}