:root{
  --brand-primary: 0,58,140;
  --bs-primary: rgb(var(--brand-primary));
  --page-bg: #f7f8fa;
  --surface: #ffffff;
  --line: #eef1f4;

  --text-strong: #111111;
  --text-muted: #6b7280;

  --radius: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,.06);

  --menu-w: 260px;
  --menu-w-collapsed: 76px;
  --sidebar-pad: 16px;

  --brand-logo-h: 34px;
  --brand-logo-h-pc: 38px;
  --brand-logo-h-collapsed: 28px;

  --brand-tag-scale: 0.475;
  --brand-tag-gap: -5px;
  --personal-color: rgb(var(--brand-primary));

  --nav-left-pad: 14px;
  --nav-right-pad: 12px;
  --nav-icon-w: 22px;
  --nav-icon-gap: 10px;

  --brand-left-tweak: 0px;
  --brand-top-gap: -10px;
  --brand-bottom-gap: 20px;

  --page-pad-x: 12px;
  --page-pad-y: 16px;
  --page-header-h: 56px;

  --accordion-speed: 0.90s;
  --accordion-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --submenu-line: rgba(0,0,0,.08);
  --submenu-line-active: rgba(0,0,0,.10);
  --submenu-line-x: 16px;
  --submenu-line-w: 1px;

  --submenu-active-w: 3px;
  --submenu-active-top: 7px;
  --submenu-active-bottom: 7px;
  --submenu-active-offset-x: -1px;

  --submenu-open-offset: 10px;

  /* 인덱스(주문리스트) 기준 값 */
  --index-container-max: 1320px;      /* 필요 시 1140/1200/1320 중 맞게 조정 */
  --index-gutter-x: .5rem;            /* g-2 = .5rem, g-3 = .75rem */
  --index-inner-pad-x: var(--page-pad-x);
}

html,body{
  height:100%;
  background:var(--page-bg);
  color:var(--text-strong);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans KR,sans-serif;
  overflow-x:hidden;
}
*,*::before,*::after{
  box-sizing:border-box;
}

/* ===== Sidebar layout ===== */
.sidebar{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:var(--menu-w);
  background:var(--surface);
  border-right:1px solid var(--line);
  padding:var(--sidebar-pad);
  z-index:1000;
  overflow:hidden auto;
  transition: width .25s ease, transform .25s ease, padding .25s ease;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

.layout{
  min-height:100vh;
  padding-left:var(--menu-w);
  display:block;
  transition: padding-left .25s ease;
}
.layout.sidebar-collapsed{
  padding-left:var(--menu-w-collapsed);
}
.layout.sidebar-collapsed .sidebar{
  width:var(--menu-w-collapsed);
  padding:12px;
}

@media (max-width: 992px){
  .layout{
    padding-left:0;
  }
  .sidebar{
    transform: translateX(-100%);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
  }
  .layout.sidebar-open .sidebar{
    transform: translateX(0);
  }
}

/* Overlay: 사이드바 오픈 시 */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:900;
  display:none;
  pointer-events:none;
}
.layout.sidebar-open + .overlay{
  display:block !important;
  pointer-events:auto;
}

html.no-scroll,
body.no-scroll{
  overflow:hidden;
  touch-action:none;
  overscroll-behavior:none;
}

/* ===== 브랜드 영역 ===== */
.sidebar-brand{
  position: relative;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 10px;
  padding-right: 12px;
  padding-left: calc(var(--nav-left-pad) + var(--brand-left-tweak));
  margin-top: var(--brand-top-gap);
  margin-bottom: var(--brand-bottom-gap);
  border-bottom: 0;
}
.sidebar-brand .brand{
  display:flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--brand-tag-gap) !important;
  text-decoration: none !important;
  line-height: 0 !important;
}

:root{
  --brand-logo-current: var(--brand-logo-h);
}
@media (min-width: 992px){
  :root{
    --brand-logo-current: var(--brand-logo-h-pc);
  }
}

.brand__logo{
  display:block;
  height: var(--brand-logo-current);
  width:auto;
  vertical-align: top;
}
.layout.sidebar-collapsed .brand__logo{
  height: var(--brand-logo-h-collapsed);
}
.layout.sidebar-collapsed .brand::after{
  display:none;
}
.brand::after{
  content: "SELLING AREA";
  display: block;
  margin-top: var(--brand-tag-gap);
  color: var(--personal-color);
  font-weight: 700;
  letter-spacing: .4px;
  font-size: calc(var(--brand-logo-current) * var(--brand-tag-scale));
  line-height: 1.0;
  text-decoration: none;
}

/* 사이드바 닫기 버튼 */
.sidebar-close{
  display:none;
}
@media (max-width: 992px){
  .sidebar-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#4b5563;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
  }
  .sidebar-close:hover{
    background:#f3f4f6;
  }
}

/* ===== Navigation + Submenu ===== */
.side-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sidebar .menu-toggle.pill,
.sidebar .menu-link{
  width:100% !important;
  text-align:left !important;
  padding-left:var(--nav-left-pad) !important;
  padding-right:var(--nav-right-pad) !important;
  border-radius:12px;
}

.sidebar .menu-toggle.pill{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--nav-icon-gap);
  padding-top:10px;
  padding-bottom:10px;
  border:0;
  background:transparent;
  transition:
    background var(--accordion-speed) var(--accordion-ease),
    color var(--accordion-speed) var(--accordion-ease);
}
.sidebar .menu-toggle.pill[aria-expanded="false"]:hover{
  background: rgba(0,58,140,.06);
}
.sidebar .menu-toggle[aria-expanded="true"],
.sidebar .menu-toggle[aria-expanded="true"]:hover,
.sidebar .menu-toggle[aria-expanded="true"]:focus,
.sidebar .menu-toggle[aria-expanded="true"]:active{
  background: rgba(0,58,140,.08);
}

.sidebar .menu-icon{
  flex:0 0 var(--nav-icon-w);
  width:var(--nav-icon-w);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  color: rgba(0,58,140,.85);
}
.sidebar .menu-label{
  flex:1 1 auto;
  min-width:0;
  font-weight:600;
  color:#1b2430;
}
.sidebar .menu-toggle[aria-expanded="true"] .menu-label{
  font-weight:700;
}
.sidebar .menu-badge.count{
  margin-left:auto;
  margin-right:36px;
  background:#e74b3c;
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  line-height:1;
}
.sidebar .menu-caret{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  transform-origin:50% 50%;
  color:#6b7280;
  transition: transform var(--accordion-speed) var(--accordion-ease);
}
.sidebar .menu-toggle[aria-expanded="true"] .menu-caret{
  transform: translateY(-50%) rotate(90deg);
}

/* Submenu wrapper */
.sidebar .submenu{
  position: relative;
  padding: 6px 0;
  margin-left: 8px;
  transition:
    padding var(--accordion-speed) var(--accordion-ease),
    opacity var(--accordion-speed) var(--accordion-ease);
}
.sidebar .submenu::before{
  content:"";
  position:absolute;
  left:var(--submenu-line-x);
  top:2px;
  bottom:2px;
  width:var(--submenu-line-w);
  background:var(--submenu-line);
  opacity:.9;
  transition:
    opacity var(--accordion-speed) var(--accordion-ease),
    background var(--accordion-speed) var(--accordion-ease);
}
.sidebar [data-menu-toggle][aria-expanded="true"] + [data-submenu]::before{
  background:var(--submenu-line-active);
  opacity:1;
}
.sidebar [data-menu-toggle][aria-expanded="false"] + [data-submenu]::before{
  opacity:.75;
}

/* 실제 아코디언 대상 */
.sidebar [data-submenu]{
  display:block !important;
  overflow:hidden;
  height:0;
  opacity:.96;
  padding-top:0;
  padding-bottom:0;
  will-change: height, padding, opacity;
  transition:none;
}

/* Submenu item */
.sidebar .submenu-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px 8px 28px;
  margin:2px 6px 2px 0;
  border-radius:8px;
  color:#374151;
  text-decoration:none;
  font-size:14px;
  line-height:1.3;
  transition:
    background .28s var(--accordion-ease),
    color .28s var(--accordion-ease);
}
.sidebar .submenu-item:not(.active):hover{
  background:#f2f6ff;
  color: rgb(var(--brand-primary));
}

.sidebar .submenu-item.active::before,
.sidebar .submenu-item.is-active::before{
  content:"";
  position:absolute;
  left: calc(var(--submenu-line-x) + var(--submenu-active-offset-x));
  top: var(--submenu-active-top);
  bottom: var(--submenu-active-bottom);
  width: var(--submenu-active-w);
  border-radius:2px;
  background: rgb(var(--brand-primary));
  z-index:1;
  transition:
    top var(--accordion-speed) var(--accordion-ease),
    bottom var(--accordion-speed) var(--accordion-ease);
}

.sidebar .submenu-item.active .submenu-label,
.sidebar .submenu-item.is-active .submenu-label{
  font-weight:700;
  color:#0b1b36;
}

.sidebar .submenu-item .chip,
.sidebar .submenu-item .badge,
.sidebar .submenu-item .label-right{
  margin-left: auto;
  background: #eef2ff;
  color: rgb(var(--brand-primary));
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* 단일 링크 메뉴 */
.sidebar .menu-link{
  position: relative;
  display:flex !important;
  align-items:center !important;
  gap: var(--nav-icon-gap) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  color:#374151 !important;
  text-decoration:none !important;
  border-radius:10px !important;
  background: transparent;
  transition:
    background .28s var(--accordion-ease),
    color .28s var(--accordion-ease);
}
.sidebar .menu-link:hover{
  background:#f2f6ff;
  color: rgb(var(--brand-primary)) !important;
}

/* ===== Sidebar scroll patch (menu overflow safe) ===== */

/* 스크롤 대상: side-nav 또는 sidebar__scroll 중 한 곳만 사용 */
.sidebar__scroll,
.side-nav{
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-gutter: auto;
  padding-right: 0;
}

/* WebKit 스크롤바 */
.sidebar__scroll::-webkit-scrollbar,
.side-nav::-webkit-scrollbar{
  width: 6px;
}
.sidebar__scroll::-webkit-scrollbar-track,
.side-nav::-webkit-scrollbar-track{
  background: transparent;
}
.sidebar__scroll::-webkit-scrollbar-thumb,
.side-nav::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.16);
  border-radius: 8px;
}
.sidebar__scroll::-webkit-scrollbar-thumb:hover,
.side-nav::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.28);
}

/* Firefox 스크롤바 */
.sidebar__scroll,
.side-nav{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.2) transparent;
}

/* 모바일 오프캔버스에서도 동일 동작 */
@media (max-width: 992px){
  .layout.sidebar-open .sidebar{
    overflow: hidden;
  }
  .layout.sidebar-open .sidebar__scroll,
  .layout.sidebar-open .side-nav{
    overflow-y: auto;
  }
}

/* 메뉴 항목 가로폭 + 우측 살짝 여유 */
.sidebar .menu-link,
.sidebar .submenu-item{
  width: 100%;
  box-sizing: border-box;
  padding-right: 6px;
}

/* ===== Page & Card ===== */
.page{
  min-height:100vh;
  width:100%;
}
.page-main{
  padding: var(--page-pad-y) var(--page-pad-x);
  width:100%;
  overflow-x:hidden;
}
.container,
.container-fluid{
  width:100%;
  margin:0;
  padding-left:0;
  padding-right:0;
}
.page-main > .container-fluid{
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}

.card{
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header{
  background:#fff;
  border-bottom:1px solid var(--line);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .sidebar .menu-caret,
  .sidebar .submenu,
  .sidebar [data-submenu],
  .menu-toggle.pill,
  .sidebar{
    transition: none !important;
  }
}

/* ===== 헤더 보조 스타일 ===== */

/* input-group 경계 */
.input-group > .form-control:focus{
  box-shadow: 0 0 0 .25rem rgba(0,58,140,.08);
  border-color: rgba(0,58,140,.35);
}

/* Header 기본 */
.header{
  position: relative;
  z-index: 10;
  min-height: var(--page-header-h);
  padding: 10px var(--page-pad-x);
  background: var(--page-bg);
  border-bottom: 0;
  box-shadow: none;
}
.header .ms-auto{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.header .btn{
  white-space:nowrap;
}

/* 데스크톱 사이드바 보정 */
@media (min-width: 992px){
  .header:not(.header-keep-calc){
    padding-left: var(--page-pad-x) !important;
    padding-right: var(--page-pad-x) !important;
  }
  .header.header-keep-calc{
    padding-left: calc(var(--menu-w) + var(--page-pad-x)) !important;
    padding-right: var(--page-pad-x) !important;
  }
}

/* Topbar 래퍼 */
.header .topbar-wrap{
  background: var(--page-bg) !important;
  padding-left: var(--index-inner-pad-x) !important;
  padding-right: var(--index-inner-pad-x) !important;
}
.header .topbar-wrap.topbar-fixed{
  max-width: var(--index-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.header .topbar-wrap > .row{
  --bs-gutter-x: var(--index-gutter-x);
  --bs-gutter-y: var(--index-gutter-x);
}

/* Topbar 카드 */
.header .topbar-card.card{
  background: var(--surface) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.header .topbar-card .card-body{
  padding: 12px 14px;
}
.header .topbar-rail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
}

/* 검색 input-group */
.header .topbar-search .input-group-text{
  background:#fff !important;
  border-color:#e6e9ef;
}
.header .topbar-search .form-control{
  height:42px;
  background:#fff !important;
  border-color:#e6e9ef;
}
.header .topbar-search .form-control:focus{
  box-shadow:0 0 0 .25rem rgba(0,58,140,.08);
  border-color:rgba(0,58,140,.35);
}

/* 우측 액션버튼 */
.header .actions .btn.btn-outline-light.border{
  background:#fff;
  border-color:#e6e9ef;
  color:#475569;
}
.header .actions .btn.btn-outline-light.border:hover{
  background:#f8fafc;
}

/* 초소형(≤576px) 재배치 */
@media (max-width: 576px){
  .header .topbar-rail{
    gap:8px;
  }
  .header .topbar-rail form{
    flex:1 1 100%;
    order:2;
  }
  .header .topbar-rail .actions{
    order:3;
    gap:6px !important;
  }
}

/* ===== Footer 정렬 패치 ===== */
footer.footer{
  background: var(--page-bg);
  padding: 10px var(--page-pad-x);
  border-top: 0;
  box-shadow: none;
}

/* container-fluid: 풀폭 */
footer .bottombar-wrap{
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}

/* bottombar-inner: 메인 컨테이너와 정렬 */
footer .bottombar-inner{
  max-width: 1320px;                 /* 실제 메인 컨테이너에 맞게 조정 */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
  box-sizing: border-box;
}

footer .bottombar-wrap.bottombar-fixed > .bottombar-inner{
  max-width: inherit;
}

/* Footer 카드 */
footer .bottombar-card{
  background: var(--surface) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
footer .bottombar-card .card-body{
  padding: 12px 14px;
}

/* Footer 그리드 간격 */
footer .bottombar-inner > .row{
  --bs-gutter-x: .5rem; /* 메인이 g-2이면 .5rem, g-3이면 .75rem */
  --bs-gutter-y: .5rem;
}

/* 모바일 Footer 풀폭 */
@media (max-width: 991.98px){
  footer .bottombar-inner{
    max-width: 100%;
    padding-left: var(--page-pad-x);
    padding-right: var(--page-pad-x);
  }
}