/* styles.css (SKU) - LAYOUT FIX + STICKY HEADER/TABLE + NAV NO-CLIP + EXCEL GREEN
   + ✅ DB DENSITY PACK (행간격 대폭 축소)
   + ✅ 세로 라인 추가
   + ✅ 아이콘/배지/버튼 축소
   + ✅ 상세검색(접이식) + 우측 버튼(검색 정사각형 / 초기화 작은 직사각형)
   + ✅ (최종) pager: pageInfo 좌측끝 + 페이지버튼 같은 줄(센터정렬) / 줄바꿈 방지
*/

/* Pretendard font */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

/* ====== 기본(화이트) ====== */
:root{
  --bg-body:#f6f7f9;
  --bg-panel:#ffffff;
  --border:#e6e8ee;
  --text:#111827;
  --muted:#6b7280;

  --brand:#2563eb;
  --brand-dark:#1e40af;
  --brand-2:#1d4ed8;

  --btn-dark:#111827;
  --sidebar-width:250px;
  --sidebar-collapsed-width:74px;
  --page-pad-top:18px;
  --page-pad-x:16px;
  --page-pad-bottom:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
/* 전체 페이지 폰트 통일 (code/pre/monospace 의도 폰트는 예외) */
body, body input, body select, body textarea, body button, body table {
  font-family: 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, 'Malgun Gothic', sans-serif;
}

body{
  margin:0;
  font-family:'Pretendard', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg-body);
  color:var(--text);
}

/* ====== Left Sidebar Navigation ====== */
body.has-sidebar{
  padding-left:var(--sidebar-width);
  padding-top:0 !important;
  transition:padding-left .28s cubic-bezier(.22,.61,.36,1);
}
body.has-sidebar.sidebar-collapsed{ padding-left:var(--sidebar-collapsed-width); }
.pf-topmenu{ display:none !important; }

.pf-sidebar{
  position:fixed;
  left:0; top:0; bottom:0;
  width:var(--sidebar-width);
  background:linear-gradient(180deg,#0f2348 0%, #152f5c 100%);
  color:#e5e7eb;
  border-right:1px solid rgba(255,255,255,.08);
  z-index:1000;
  display:flex;
  flex-direction:column;
  transition:width .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1);
  will-change: width;
}
body.has-sidebar.sidebar-collapsed .pf-sidebar{ width:var(--sidebar-collapsed-width); }

.pf-sidebar-head{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 12px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.pf-sidebar-brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.pf-sidebar-badge{
  width:28px; height:28px;
  border-radius:6px;
  background:#22c55e;
  color:#fff;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  flex:0 0 auto;
}
.pf-sidebar-brand-text{
  font-weight:700;
  color:#f3f4f6;
  white-space:nowrap;
  transition:opacity .18s ease, transform .22s ease;
}
body.has-sidebar.sidebar-collapsed .pf-sidebar-brand-text{
  opacity:0;
  transform:translateX(-8px);
  pointer-events:none;
}

.pf-sidebar-toggle{
  border:0;
  background:transparent;
  color:#d1d5db;
  font-size:18px;
  cursor:pointer;
  width:30px; height:30px;
  border-radius:6px;
}
.pf-sidebar-toggle:hover{ background:rgba(255,255,255,.08); color:#fff; }

.pf-sidebar-nav{
  flex:1 1 auto;
  overflow:auto;
  padding:10px 8px;
}
.pf-nav-group{
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.pf-nav-group > summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  font-size:12px;
  font-weight:700;
  color:#cbd5e1;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pf-nav-group > summary::-webkit-details-marker{ display:none; }
.pf-sidebar-nav .pf-nav-group-main > summary{ display:none; } /* "메뉴" 제목 숨김 */
.pf-nav-links{ padding:6px; display:flex; flex-direction:column; gap:4px; }
.pf-nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  border-radius:6px;
  padding:0 10px;
  color:#e5e7eb;
  font-size:14px;
  font-weight:600;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, padding .28s cubic-bezier(.22,.61,.36,1), min-height .28s cubic-bezier(.22,.61,.36,1);
}
.pf-nav-icon{
  width:24px;
  height:24px;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  flex:0 0 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 4px rgba(2,6,23,.25);
  background:linear-gradient(135deg,#64748b,#475569);
  transition:width .28s cubic-bezier(.22,.61,.36,1), height .28s cubic-bezier(.22,.61,.36,1), line-height .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1);
}
.pf-nav-icon svg{
  width:14px;
  height:14px;
  display:block;
}
.pf-nav-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity .16s ease, transform .24s ease, max-width .24s ease;
  max-width:180px;
}
.pf-nav-link:hover{ background:rgba(255,255,255,.1); }
.pf-nav-link.active{
  background:#2563eb;
  color:#fff;
}
.pf-nav-link.page-stock-sync .pf-nav-icon{ background:linear-gradient(135deg,#06b6d4,#0ea5e9); }
.pf-nav-link.page-stock-reg .pf-nav-icon{ background:linear-gradient(135deg,#22c55e,#16a34a); }
.pf-nav-link.page-naver .pf-nav-icon,
.pf-nav-link.page-naver-bulk-template .pf-nav-icon{ background:linear-gradient(135deg,#a855f7,#7c3aed); }
.pf-nav-link.page-naver .pf-nav-icon{ background:linear-gradient(135deg,#22c55e,#10b981); }
.pf-nav-link.page-cafe24 .pf-nav-icon{ background:linear-gradient(135deg,#3b82f6,#2563eb); }
.pf-nav-link.page-fair-price .pf-nav-icon{ background:linear-gradient(135deg,#14b8a6,#0f766e); }
.pf-nav-link.page-fair-numbering .pf-nav-icon{ background:linear-gradient(135deg,#0ea5e9,#0369a1); }
.pf-nav-link.page-option .pf-nav-icon{ background:linear-gradient(135deg,#a855f7,#7c3aed); }
.pf-nav-link.page-admin-users .pf-nav-icon{ background:linear-gradient(135deg,#f59e0b,#d97706); }

.pf-sidebar-bottom-links{
  flex:0 0 auto;
  padding:8px;
  border-top:1px solid rgba(255,255,255,.1);
}

.pf-sidebar-log-wrap{
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.1);
}
.pf-sidebar-log-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:10px;
  text-decoration:none;
  background:linear-gradient(135deg,#10b981,#3b82f6);
  color:#fff;
  font-size:12px;
  font-weight:700;
  transition:opacity .15s;
}
.pf-sidebar-log-btn:hover{ opacity:.85; }
.pf-sidebar-log-icon{
  width:28px; height:28px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.2);
  border-radius:7px;
}
.pf-sidebar-log-icon svg{ width:15px; height:15px; }
.pf-sidebar-log-text{ white-space:nowrap; }

/* 접혔을 때: 아이콘만 정사각형으로 */
body.has-sidebar.sidebar-collapsed .pf-sidebar-log-btn{
  padding:0;
  justify-content:center;
  width:44px; height:44px;
  border-radius:10px;
  margin:0 auto;
  gap:0;
}
body.has-sidebar.sidebar-collapsed .pf-sidebar-log-icon{
  width:100%; height:100%;
  border-radius:10px;
  background:transparent;
}
body.has-sidebar.sidebar-collapsed .pf-sidebar-log-text{ display:none; }

.pf-sidebar-user{
  border-top:1px solid rgba(255,255,255,.1);
  padding:10px 12px;
}
.pf-sidebar-user-name{ font-size:12px; font-weight:700; color:#f9fafb; }
.pf-sidebar-user-id{ font-size:11px; color:#cbd5e1; margin-top:2px; }
.pf-sidebar-logout{
  display:inline-block;
  margin-top:8px;
  font-size:12px;
  color:#fca5a5;
  font-weight:700;
}
body.has-sidebar.sidebar-collapsed .pf-sidebar-user{ display:none; }

/* 임시접속(Impersonate) 배너 */
.pf-impersonate-bar{
  border-top:2px solid #f59e0b;
  background:#7c2d12;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.pf-impersonate-icon{
  flex-shrink:0;
  width:18px;
  height:18px;
  color:#fbbf24;
}
.pf-impersonate-icon svg{ width:18px; height:18px; }
.pf-impersonate-info{ flex:1; min-width:0; }
.pf-impersonate-label{ font-size:10px; color:#fbbf24; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.pf-impersonate-name{ font-size:13px; color:#fef3c7; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-impersonate-back{
  flex-shrink:0;
  font-size:11px;
  font-weight:700;
  color:#fbbf24;
  background:rgba(251,191,36,.15);
  border:1px solid rgba(251,191,36,.4);
  border-radius:6px;
  padding:4px 8px;
  white-space:nowrap;
  text-decoration:none;
  transition:background .15s;
}
.pf-impersonate-back:hover{ background:rgba(251,191,36,.3); }
body.has-sidebar.sidebar-collapsed .pf-impersonate-bar{ display:none; }

body.has-sidebar.sidebar-collapsed .pf-nav-group > summary{ display:none; }
body.has-sidebar.sidebar-collapsed .pf-nav-group{
  border:0;
  background:transparent;
  border-radius:0;
}
body.has-sidebar.sidebar-collapsed .pf-nav-links{
  padding:8px 6px;
  gap:6px;
}
body.has-sidebar.sidebar-collapsed .pf-nav-link{
  justify-content:center;
  padding:0;
  min-height:42px;
  border-radius:8px;
}
body.has-sidebar.sidebar-collapsed .pf-nav-text{
  opacity:0;
  transform:translateX(-8px);
  max-width:0;
  pointer-events:none;
}
body.has-sidebar.sidebar-collapsed .pf-nav-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  transform:translateX(0);
}
body.has-sidebar.sidebar-collapsed .pf-nav-icon svg{
  width:15px;
  height:15px;
}
body.has-sidebar.sidebar-collapsed .pf-nav-link.active{
  background:rgba(148,163,184,.28);
  border:1px solid rgba(148,163,184,.22);
}

/* ════════════════════════════════════════════════════════════
   계층 메뉴 (메인 카테고리 > 서브 항목)
   ════════════════════════════════════════════════════════════ */
.pf-sidebar-cats{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0;
}
.pf-cat{
  border-radius:8px;
  overflow:hidden;
  background:transparent;
  transition:background-color .15s ease;
}
.pf-cat[open]{ background:rgba(255,255,255,.03); }
.pf-cat-summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  font-size:13px;
  font-weight:700;
  color:#e5e7eb;
  border-radius:8px;
  transition:background-color .15s ease;
  user-select:none;
}
.pf-cat-summary::-webkit-details-marker{ display:none; }
.pf-cat-summary::marker{ content:''; }
.pf-cat-summary:hover{ background:rgba(255,255,255,.06); }
.pf-cat[open] > .pf-cat-summary{ background:rgba(255,255,255,.05); }
.pf-cat-active > .pf-cat-summary{
  background:rgba(255,255,255,.05);
  color:#fff;
}
.pf-cat-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#e5e7eb;
  background:transparent;
}
.pf-cat-icon svg{ width:18px; height:18px; display:block; }
.pf-cat-active > .pf-cat-summary .pf-cat-icon{ color:#fff; }
.pf-cat-label{
  flex:1 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pf-cat-arrow{
  flex:0 0 auto;
  font-size:10px;
  color:#94a3b8;
  transition:transform .2s ease;
}
.pf-cat[open] > .pf-cat-summary .pf-cat-arrow{
  transform:rotate(180deg);
  color:#cbd5e1;
}
.pf-cat-subs{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:2px 6px 8px 6px;
}
.pf-sub-link{
  display:flex;
  align-items:center;
  padding:8px 12px 8px 48px;
  border-radius:6px;
  text-decoration:none;
  color:#cbd5e1;
  font-size:13px;
  font-weight:500;
  transition:background-color .15s ease, color .15s ease;
}
.pf-sub-link:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}
.pf-sub-link.active{
  background:#2563eb;
  color:#fff;
  font-weight:700;
}

/* 사이드바 접힌 상태: 메인 아이콘만 표시 */
body.has-sidebar.sidebar-collapsed .pf-cat-label,
body.has-sidebar.sidebar-collapsed .pf-cat-arrow,
body.has-sidebar.sidebar-collapsed .pf-cat-subs{
  display:none;
}
body.has-sidebar.sidebar-collapsed .pf-cat{
  background:transparent;
}
body.has-sidebar.sidebar-collapsed .pf-cat-summary{
  justify-content:center;
  padding:10px 8px;
}
body.has-sidebar.sidebar-collapsed .pf-cat-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
}
body.has-sidebar.sidebar-collapsed .pf-cat-icon svg{
  width:22px;
  height:22px;
}
body.has-sidebar.sidebar-collapsed .pf-cat-active > .pf-cat-summary{
  background:rgba(255,255,255,.05);
  border:1px solid transparent;
}

@media (max-width:1024px){
  :root{
    --page-pad-top:12px;
    --page-pad-x:12px;
    --page-pad-bottom:16px;
  }

  body.has-sidebar{ padding-left:0; }
  .pf-sidebar{ transform:translateX(0); }
  body.has-sidebar.sidebar-collapsed .pf-sidebar{ transform:translateX(-100%); }
  body.has-sidebar .panel{
    height:auto;
    max-height:none;
    min-height:calc(100vh - var(--page-pad-top) - var(--page-pad-bottom));
  }
}

a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ====== 페이지 래퍼 ====== */
.page-fixed-wrap{
  max-width:1650px;
  margin:0 auto;
  padding:var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
  min-width:0;
}
body.has-sidebar .page-fixed-wrap{
  max-width:none;
  width:100%;
}

#content,
main#content{
  min-width:0;
  width:100%;
}

body.has-sidebar .panel,
body.has-sidebar .panel > *,
body.has-sidebar .page-fixed-wrap,
body.has-sidebar .table-wrapper,
body.has-sidebar .sync-detail-table-wrap,
body.has-sidebar .search-bar,
body.has-sidebar .sync-actions{
  min-width:0;
}

/* ✅ 패널을 세로 레이아웃(flex)로 고정 */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 8px 26px rgba(17,24,39,.08);
  overflow:hidden;

  display:flex;
  flex-direction:column;
  min-width:0;

  height: calc(100vh - 56px - var(--page-pad-top) - var(--page-pad-bottom));
  max-height: calc(100vh - 56px - var(--page-pad-top) - var(--page-pad-bottom));
}
body.has-sidebar .panel{
  height: calc(100vh - var(--page-pad-top) - var(--page-pad-bottom));
  max-height: calc(100vh - var(--page-pad-top) - var(--page-pad-bottom));
}

/* ====== 상단 고정 헤더(페이지 타이틀/버튼/검색) ====== */
.panel-sticky{
  position:sticky;
  top:56px;
  z-index:120;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  padding:14px 16px 10px;
}
body.has-sidebar .panel-sticky{ top:0; z-index:110; }

.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* 전 페이지 타이틀 통일 (재고관리 기준: 24px + 그라데이션 밑줄바) */
.page-title{
  margin:0;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-0.04em;
  color:#0f172a;
}
.page-title::after{
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg, #f59e0b 0%, #2563eb 100%);
}

.header-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ====== 버튼 ====== */
.btn{
  border:0;
  background:#e5e7eb;
  color:var(--text);
  padding:6px 10px;
  border-radius:0;
  font-size:12px;
  cursor:pointer;
  line-height:1;
  height:30px;
}
.btn:hover{background:#e5e7eb}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-sm{padding:5px 8px; border-radius:0; font-size:11px; height:26px}

.btn-primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.btn-primary:hover{background:var(--brand); border-color:var(--brand)}

.btn-dark{
  background:var(--btn-dark);
  border-color:var(--btn-dark);
  color:#fff;
}
.btn-dark:hover{background:var(--btn-dark); border-color:var(--btn-dark)}

.btn-outline{ background:#e5e7eb; }

/* ====== 검색/필터 바 ====== */
.search-bar{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.search-left{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.search-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-left:auto;
}

.search-input{
  height:30px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:0;
  outline:none;
  font-size:12px;
  background:#fff;
}
.search-input:focus{
  border-color:#c7d2fe;
  box-shadow:0 0 0 3px rgba(99,102,241,.12)
}

select{
  height:30px;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:0;
  background:#fff;
  font-size:12px;
}

/* ====== 테이블 영역(스크롤) ====== */
.table-wrapper{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* ====== 테이블 ====== */
.data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}

/* ✅ 헤더 sticky */
.data-table thead th{
  position:sticky;
  top:0;
  z-index:80;
  background:#f8fafc;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(17,24,39,.04);
}

/* ✅ 행 간격 대폭 축소 */
.data-table th,
.data-table td{
  border-bottom:1px solid var(--border);
  padding:4px 6px;
  font-size:12px;
  line-height:1.2;
  vertical-align:middle;
  background:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ✅ 기본 행 높이 슬림 */
.data-table tbody tr{ height:28px; }
.data-table tbody tr:hover td{background:#fafafa}

/* mismatch 강조 */
.data-table tbody tr.mismatch td{
  background:rgba(255, 214, 165, .18);
}

/* ✅ 세로 라인(컬럼 구분선) */
.data-table thead th{ border-right:1px solid #e5e7eb; }
.data-table thead th:last-child{ border-right:0; }
.data-table tbody td{ border-right:1px solid #e5e7eb; }
.data-table tbody td:last-child{ border-right:0; }

/* ====== 컬럼 폭(요청: 상품번호/관리자번호/그룹/옵션번호 간격 조절용) ====== */
.w-sel{width:42px; text-align:center}
.w-link{width:56px; text-align:center}
.w-jan{width:92px; text-align:center}
.w-code{width:100px; text-align:center}     /* 상품번호 */
.w-origin{width:100px; text-align:center}   /* 관리자번호 */
.w-optno{width:100px; text-align:center}    /* 그룹/옵션번호 */
.w-type{width:92px; text-align:center}
.w-name{width:320px}
.w-optname{width:220px}
.w-price{width:92px; text-align:center}
.w-status{width:92px; text-align:center}
.w-stock{width:80px; text-align:center}
.w-realstock{width:80px; text-align:center}
.w-detail{width:72px; text-align:center}

/* 링크 텍스트(상품번호/관리자번호) */
.link-text{ color:var(--text); text-decoration:none; }
.link-text:hover{ text-decoration:underline; }

/* ====== N 배지 ====== */
.naver-badge{
  display:inline-flex;
  width:18px; height:18px;
  align-items:center; justify-content:center;
  border-radius:4px;
  font-weight:700;
  font-size:10px;
}
.naver-badge.on{background:#22c55e; color:#fff}
.naver-badge.off{background:#ef4444; color:#fff}

/* ====== 상태 배지 ====== */
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 6px;
  border-radius:6px;
  border:1px solid var(--border);
  font-size:11px;
  line-height:1.2;
  background:#fff;
  height:22px;
}
.status-sale{background:#e0f2fe; border-color:#bae6fd; color:#075985}
.status-outofstock{background:#fee2e2; border-color:#fecaca; color:#991b1b}
.status-suspension{background:#fef9c3; border-color:#fde68a; color:#854d0e}
.status-prohibition{background:#e5e7eb; border-color:#d1d5db; color:#374151}

/* ====== 상세(View) 버튼 컴팩트 ====== */
.w-detail .btn{
  padding:2px 6px;
  height:22px;
  font-size:11px;
  border-radius:0;
}

/* ====== 체크박스 축소 ====== */
.data-table input[type="checkbox"]{ transform:scale(0.85); }

/* ====== FIX: 테이블 헤더 z-index 안정 ====== */
.data-table thead{ position:relative; z-index:70; }

/* ====== 엑셀 다운로드 버튼(그린) ====== */
.btn-excel,
.btn-green{
  background:#16a34a;
  border-color:#16a34a;
  padding:6px 10px;
  color:#fff;
}
.btn-excel:hover,
.btn-green:hover{
  background:#15803d;
  border-color:#15803d;
  color:#fff;
}

/* ===============================
   ✅ 상세검색(접이식)
=============================== */
.pf-fold{
  margin-top:10px;
  border:1px solid var(--border);
  background:#f8fafc;
  border-radius:12px;
  overflow:hidden;
}
.pf-fold-summary{
  list-style:none;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
}
.pf-fold-summary::-webkit-details-marker{ display:none; }
.pf-fold-title{
  font-size:13px;
  color:#111827;
  font-weight:700;
}
.pf-fold-body{
  border-top:1px solid var(--border);
  background:#fff;
}

/* index 구조 지원 */
.pf-filter-grid{ display:flex; min-height:220px; }
.pf-filter-main{
  flex:1 1 auto;
  min-width:0;
  padding:14px 16px;
  background:#fff;
}
.pf-filter-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid #eef2f7;
}
.pf-filter-row:last-child{ border-bottom:0; }
.pf-filter-row .row-title{
  width:88px;
  flex:0 0 auto;
  color:#6b7280;
  font-size:12px;
  padding-top:6px;
}
.pf-filter-row .row-body{
  flex:1 1 auto;
  min-width:0;
}

/* 판매상태 체크박스 UI */
.pf-status-filters{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.pf-stat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  white-space:nowrap;
  font-size:13px;
  color:#111827;
}
.pf-stat input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.pf-box{
  width:18px;
  height:18px;
  border:1px solid #d1d5db;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.pf-stat input:checked + .pf-box{
  border-color:#16a34a;
  background:#16a34a;
}
.pf-stat input:checked + .pf-box::after{
  content:"";
  width:6px;
  height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
  margin-top:-1px;
}

/* 기간 */
.pf-datebar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.pf-range-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.pf-range-btn{
  height:30px;
  padding:0 10px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  font-size:12px;
  cursor:pointer;
}
.pf-range-btn:hover{ background:#f3f4f6; }
.pf-date{
  height:30px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:12px;
  background:#fff;
}
.pf-date-tilde{ color:#6b7280; font-size:12px; }

/* 카테고리 */
.pf-catrow{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.pf-catrow select{
  width:170px;
  max-width:100%;
}

/* 우측 버튼 영역 */
.pf-filter-actions{
  width:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid #eef2f7;
  padding:12px 10px;
  background:#fff;
  position:relative;
  left:-7mm;
}

/* 2x2 버튼 그리드 */
.pf-fold-actions{
  display:grid;
  grid-template-columns:86px 86px;
  grid-template-rows:86px 34px;
  gap:10px;
  align-items:stretch;
  justify-items:stretch;
  margin:0;
}

/* 검색(큰 정사각형) */
.pf-fold-actions .btn-primary{
  grid-column:1;
  grid-row:1;
  width:86px;
  height:86px;
  padding:0;
  border-radius:0 !important;
  background:#2563eb !important;
  border:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
}

/* 초기화(왼쪽 아래) */
.pf-fold-actions .btn-outline{
  width:86px;
  height:34px;
  padding:0;
  border-radius:0 !important;
  background:#e5e7eb !important;
  color:#111827 !important;
  border:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}
#btnSyncNaver{
  grid-column:2;
  grid-row:1;
  width:86px;
  height:34px;
}
#btnSyncOptionOnly{
  grid-column:2;
  grid-row:2;
  width:86px;
  height:34px;
}
.pf-fold-actions .btn-outline:not(#btnSyncNaver):not(#btnSyncOptionOnly){
  grid-column:1;
  grid-row:2;
}
.pf-fold-actions .btn-primary:hover{ background:#2563eb !important; }
.pf-fold-actions .btn-outline:hover{ background:#e5e7eb !important; }
.pf-fold-actions .btn{ flex:0 0 auto; }

/* 팝업 기본 안전값 */
.modal-backdrop{ display:none; }

/* 날짜 입력 폰트 */
#dateFieldSelect,#dateFrom,#dateTo{ font-family:inherit; }

/* ============================
   ✅ 로딩 오버레이(읽는중)
============================ */
.pf-list-loading{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.pf-list-loading.on{ display:flex; }
.pf-list-loading .backdrop{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px 18px;
  background:rgba(255,255,255,.92);
  border:1px solid #e5e7eb;
  border-radius:10px;
}
.pf-list-loading .spinner{
  width:26px;
  height:26px;
  border:3px solid #e5e7eb;
  border-top-color:#22c55e;
  border-radius:50%;
  animation:pfspin 1s linear infinite;
}
@keyframes pfspin{ to{ transform:rotate(360deg); } }
.pf-list-loading .text{
  font-size:13px;
  color:#111827;
  white-space:nowrap;
}

/* ============================
   ✅ 상태요약(최종 1개 정의)
============================ */
#statusSummary{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 0;
  overflow-x:auto;
}
#statusSummary .ss-line{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#111827;
  white-space:nowrap;
  min-width:max-content;
}
#statusSummary .ss-sep{ color:#9ca3af; }
#statusSummary .ss-link{
  color:#111827;
  text-decoration:none;
  cursor:pointer;
  display:inline;
  white-space:nowrap;
}
#statusSummary .ss-link:hover{ text-decoration:underline; }

/* ============================
   ✅ pager(최종 1개 정의)
   - 좌측 pageInfo = 좌측끝
   - 페이지버튼 = 가운데
   - 줄바꿈 절대 금지
============================ */

/* 기본 pager */
#view-naver .pager,
#view-cafe24 .pager{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:10px 12px;
  border-top:1px solid var(--border);
  background:#fff;
  flex-wrap:nowrap !important;          /* ✅ 핵심 */
}

/* 좌측 pageInfo */
#view-naver #pageInfo,
#view-cafe24 #cafe24PageInfo{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  max-width:none;
  flex:0 0 auto;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:10px;
}

/* 중앙 래퍼 */
#view-naver .pf-pagewrap,
#view-cafe24 .pf-pagewrap{
  flex:1 1 auto;
  min-width:0;
  width:auto !important;               /* ✅ width:100% 같은거 무력화 */
  padding:0 !important;                /* ✅ padding이 줄바꿈 유발하는 경우 방지 */
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap !important;
}

/* 페이지 버튼 바 */
#view-naver .pf-pagebar,
#view-cafe24 .pf-pagebar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  flex-wrap:nowrap !important;
}

/* 버튼 */
#view-naver .pf-pagebtn,
#view-cafe24 .pf-pagebtn{
  min-width:34px;
  height:34px;
  padding:0 10px;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:0;
  font-size:13px;
  cursor:pointer;
  line-height:32px;
}
#view-naver .pf-pagebtn:hover,
#view-cafe24 .pf-pagebtn:hover{
  border-color:#cbd5e1;
  background:#f9fafb;
}
#view-naver .pf-pagebtn.active,
#view-cafe24 .pf-pagebtn.active{
  border-color:#22c55e;
  color:#16a34a;
  font-weight:600;
  cursor:default;
}
#view-naver .pf-pagebtn:disabled,
#view-cafe24 .pf-pagebtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
/* =========================
   ✅ (FIX) pager에서 pageInfo를 우측 끝으로 강제 고정
   - 페이지버튼은 중앙 유지
   - pageInfo는 항상 우측 끝
========================= */

/* pager 기준 잡기 */
#view-naver .pager{
  position:relative;          /* absolute 기준 */
  padding-right:180px;        /* 우측 pageInfo 공간 확보 */
}

/* pageInfo 우측 고정 */
#view-naver #pageInfo{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  text-align:right;
}

/* ✅ 삭제(위험) 버튼 */
.btn-danger{
  background:#ef4444 !important;
  border-color:#ef4444 !important;
  color:#fff !important;
}
.btn-danger:hover{
  background:#dc2626 !important;
  border-color:#dc2626 !important;
  color:#fff !important;
}

/* ✅ 상태: 삭제(DELETED) */
.status-deleted{
  background:#fee2e2;
  border-color:#fecaca;
  color:#991b1b;
}
/* ✅ 팝업 헤더 타이틀(재고수정) - 우측 버튼 크기 기준으로 큼직하게 */
body.stock-page #editModal .modal-head-title{
  display:inline-flex;
  align-items:center;
  height:30px;          /* 우측 버튼 높이 기준 */
  padding:0 12px;       /* 우측 버튼 패딩 기준 */
  font-size:16px;       /* ✅ 버튼(12px)보다 크게 */
  font-weight:800;
  letter-spacing:-0.2px;
  color:#fff;
  white-space:nowrap;
}

/* ════════════════════════════════════════════════════════════
   📱 모바일 (≤768px) — 단일 통합 CSS 블록
   ════════════════════════════════════════════════════════════ */
.pf-mobile-hamburger { display:none; }
.pf-sidebar-backdrop { display:none; }

@media (max-width: 768px) {
  /* ── 레이아웃 베이스 ───────────────────────────────────────── */
  body.has-sidebar,
  body.has-sidebar.sidebar-collapsed {
    padding-left: 0 !important;
    padding-top: 56px !important;  /* 햄버거 공간 확보 */
  }

  /* ── 햄버거 버튼 (좌상단, 항상 페이지 위) ───────────────────── */
  .pf-mobile-hamburger {
    display: flex !important;
    position: fixed; top: 8px; left: 8px;
    width: 44px; height: 44px;
    background: #0f2348; color: #fff;
    border: 0; border-radius: 8px;
    align-items: center; justify-content: center;
    font-size: 22px; cursor: pointer;
    z-index: 100000;  /* 페이지 모든 sticky/fixed 위에 */
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
  }
  body.mobile-sidebar-open .pf-mobile-hamburger {
    left: auto; right: 8px; background: #dc2626;
  }

  /* ── 사이드바 (슬라이드 드로워) ──────────────────────────── */
  .pf-sidebar {
    transform: translateX(-100%);
    width: 280px !important;
    max-width: 90vw;
    z-index: 99999;  /* 햄버거 아래, 페이지 위 */
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
    overflow-y: auto !important;
    max-height: 100vh;
  }
  body.mobile-sidebar-open .pf-sidebar {
    transform: translateX(0);
  }

  /* sidebar-collapsed 잔여 상태 무효화 — 모바일에선 항상 풀폭 */
  body.has-sidebar.sidebar-collapsed .pf-sidebar { width: 280px !important; }
  body.has-sidebar.sidebar-collapsed .pf-sidebar-brand-text,
  body.has-sidebar.sidebar-collapsed .pf-sidebar-user,
  body.has-sidebar.sidebar-collapsed .pf-cat-label,
  body.has-sidebar.sidebar-collapsed .pf-cat-arrow,
  body.has-sidebar.sidebar-collapsed .pf-cat-summary,
  body.has-sidebar.sidebar-collapsed .pf-sub-link,
  body.has-sidebar.sidebar-collapsed .pf-cat-subs,
  body.has-sidebar.sidebar-collapsed .pf-sidebar-log-text,
  body.has-sidebar.sidebar-collapsed .pf-impersonate-bar,
  body.has-sidebar.sidebar-collapsed .pf-nav-links,
  body.has-sidebar.sidebar-collapsed .pf-nav-link {
    display: revert !important;
    width: auto !important;
    max-width: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 카테고리 — 사이드바 열림 시 모든 하위 메뉴 펼침 */
  body.mobile-sidebar-open .pf-sidebar .pf-cat-subs,
  body.mobile-sidebar-open .pf-sidebar details > *:not(summary) {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .pf-sidebar .pf-cat { border-bottom: 1px solid rgba(255,255,255,.08); }
  .pf-sidebar .pf-cat-summary { padding: 14px 16px !important; font-size: 15px !important; }
  .pf-sidebar .pf-sub-link { padding: 11px 18px !important; font-size: 14px !important; }

  /* 사이드바 안의 « 버튼 (collapse 토글) — 모바일에선 햄버거가 대체하므로 숨김 */
  .pf-sidebar-toggle { display: none !important; }

  /* ── 배경 오버레이 ──────────────────────────────────────── */
  .pf-sidebar-backdrop {
    display: block !important;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    transition: background .2s;
    z-index: 9998;
  }
  body.mobile-sidebar-open .pf-sidebar-backdrop {
    background: rgba(0,0,0,.45);
    pointer-events: auto;
  }

  /* ── 페이지 컨텐츠 ──────────────────────────────────────── */
  /* 모든 페이지의 wrap 풀스크린 + 깔끔한 패널 */
  body.has-sidebar .page-fixed-wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
  }
  body.has-sidebar .panel {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    max-height: none !important;
  }
  /* 큰 테이블 가로 스크롤 */
  body .panel, body #content { overflow-x: auto !important; }

  /* sticky/fixed 헤더가 햄버거 가리지 않게 */
  .panel-sticky, .panel-header { z-index: 5 !important; }

  /* 페이지 자체 padding-top 은 0 (body 가 이미 56px) */
  body.has-sidebar main#content, body.has-sidebar #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* 모바일 — 카테고리 summary 가 sticky 로 떠서 이전 카테고리의 하위 메뉴를 가리는 문제 해결 */
@media (max-width: 768px) {
  .pf-sidebar .pf-cat-summary,
  .pf-sidebar .pf-cat > summary,
  .pf-sidebar details > summary {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }
  /* 카테고리 간 간격 명확하게 + 각 카테고리는 자연 flow */
  .pf-sidebar .pf-cat {
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* 모바일 — 사이드바 flex shrink 방지, 모든 자식 자연 높이 유지 */
@media (max-width: 768px) {
  .pf-sidebar,
  .pf-sidebar-nav,
  .pf-sidebar-cats,
  .pf-sidebar-nav-wrap {
    overflow-y: auto !important;
    overflow-x: visible !important;
    flex-shrink: 0;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }
  /* 사이드바 자체는 100vh 까지, 내부 스크롤 */
  .pf-sidebar { max-height: 100vh !important; min-height: 100vh; overflow-y: auto !important; }
  /* 카테고리 / 자식 메뉴 절대 줄어들지 않게 */
  .pf-sidebar .pf-cat,
  .pf-sidebar .pf-cat-subs,
  .pf-sidebar .pf-sub-link,
  .pf-sidebar .pf-cat-summary {
    flex-shrink: 0 !important;
    min-height: auto !important;
  }
  /* 자식 메뉴는 세로 나열 강제 (flex row 로 인해 가로 겹침 방지) */
  .pf-sidebar .pf-cat-subs {
    display: flex !important;
    flex-direction: column !important;
  }
}