/* font */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css");

@font-face {
  font-family: "JalnanGothic";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* == COMMON LAYOUT == */

/* ── 전체 레이아웃 ── */
#wrap {
  display: flex;
  position: relative;
  min-height: 100vh;
}

.aside {
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  flex-shrink: 0;
  z-index: 100;
}

.main {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* ── Sidebar ── */
.sidebar {
  height: 100%;
  flex-shrink: 0;
  width: 190px; /* QA E6: 주요메뉴 폭 축소 (240 → 190) */
  background: linear-gradient(180deg, #1B2A4A 0%, #2B3F6B 100%);
  color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.3s ease;
  position: relative;
  z-index: 900;
}

.sidebar.collapsed {
  width: 60px;
}

/* 토글 버튼 — .aside 기준으로 position */
.sidebar-toggle {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 48px;
  background: #fff;
  border: 1px solid #E2E5EA;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #6B7280;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1001;
}

.sidebar-toggle:hover {
  background: #f3f4f6;
  color: #1B2A4A;
}

/* 사이드바 nav */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 6px;
  gap: 5px;
}

/* 섹션 레이블 */
.sidebar-section-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  padding: 16px 16px 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .sidebar-section-label {
  opacity: 0;
  height: 0;
  padding: 0;
}

/* collapsed 아이템 중앙 정렬 */
.sidebar.collapsed .sidebar-item {
  padding: 12px;
  justify-content: center;
}

/* 메뉴 아이템 */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  border-left: 3px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-left-color: rgba(255, 255, 255, 0.4);
}

.sidebar-item.active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-left-color: #60A5FA;
  font-weight: 600;
}

.sidebar-item i {
  font-size: 20px;
  flex-shrink: 0;
}

.sidebar-emoji {
  font-size: 18px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.sidebar-label {
  transition: opacity 0.2s;
}

.sidebar.collapsed .sidebar-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* 드롭다운 컨테이너 */
.sidebar-dropdown {
  position: relative;
}

/* 드롭다운 화살표 */
.sidebar-arrow {
  font-size: 14px;
  margin-left: auto;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.sidebar-dropdown.open .sidebar-arrow {
  transform: rotate(180deg);
}

/* collapsed 상태에서 화살표 숨김 */
.sidebar.collapsed .sidebar-arrow {
  display: none;
}

/* 드롭다운 메뉴 */
.sidebar-dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(0, 0, 0, 0.15);
}

.sidebar-dropdown.open .sidebar-dropdown-menu {
  max-height: 300px;
}

/* 서브 아이템 */
.sidebar-sub-item {
  display: block;
  padding: 8px 20px 8px 48px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.15s ease;
}

.sidebar-sub-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* collapsed 상태: 드롭다운 메뉴를 tooltip 형태로 표시 */
.sidebar.collapsed .sidebar-dropdown-menu {
  position: absolute;
  left: 60px;
  top: 0;
  max-height: 0;
  width: 180px;
  background: #1B2A4A;
  border-radius: 0 6px 6px 0;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.sidebar.collapsed .sidebar-dropdown.open .sidebar-dropdown-menu {
  max-height: 300px;
}

.sidebar.collapsed .sidebar-sub-item {
  padding-left: 16px;
}


/* common layout */
.skip-navigation {
  position: absolute;
  z-index: 9999;
}

.skip-navigation a {
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}







.mxh-65 {
  max-height: 75vh;
}




th,
td {
  height: 40px;
  padding: 4px 6px;
  line-height: 1.2;
  white-space: nowrap;
}


.btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.btn-group.half button {
  min-width: 120px;
}

.btn-group.full button {
  flex: 1;
}

.btn-group.left {
  justify-content: flex-start;
}

.btn-group.right {
  justify-content: flex-end;
}

.btn-box {
  text-align: center;
}

.btn {
  font-size: 14px;
  font-weight: 400;
  background: var(--theme);
  color: var(--white);
  /* min-width: 80px; */
  min-height: 33px;
  border-radius: 5px;
  padding: 0px 25px;
  font-weight: bold;
  transition: all .1s;
  border: solid 1px transparent;
  white-space: nowrap;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
}

.btn-outline {
  background: transparent;
  border: solid 1px var(--colorC);
  color: var(--color0);
}

.btn:hover {
  background: var(--white);
  border: 1px solid var(--theme);
  color: var(--theme);
}


.btn.btn-sm {
  padding: 3px 10px;
  line-height: auto;
}


.btn.btn-lg {
  padding: 3px 25px;
  font-size: 16px;
  line-height: 40px;
}


.btn.btn-black {
  background: var(--color0);
}

.btn.btn-black:hover {
  border: 1px solid var(--color0);
  background: var(--color0);
  color: var(--colorF);
}

.btn.btn-reverse {
  background: var(--white);
  color: var(--theme);
  border: 1px solid var(--theme);
}

.btn.btn-reverse:hover {
  background: var(--theme);
  color: var(--white);
}




.btn.btn-point {
  background: var(--theme);
}

.btn.btn-point:hover {
  border: 1px solid var(--theme);
  background: var(--colorF);
}


.btn.btn-point2 {
  background: var(--theme2);
}

.btn.btn-point2:hover {
  background: var(--colorF);
  color: var(--theme2);
}




.btn.btn-gray {
  background: var(--color8);
  color: var(--colorF);
}

.btn.btn-gray:hover {
  background: var(--color0);
  color: var(--colorF);
  border: transparent;
}



.btn.btn-primary {
  background: var(--primary);
}

.btn.btn-primary:hover {
  background: var(--theme7);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn.btn-primary-reverse {
  background: var(--theme7);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn.btn-primary-reverse:hover {
  background: var(--primary);
  color: var(--white);
}


.btn.btn-danger {
  background: var(--theme7);
  color: var(--red);
  border: 1px solid var(--red);
}

.btn.btn-danger:hover {
  background: var(--theme7);
  color: var(--red);
  border: 1px solid var(--red);
}

.btn.btn-danger-reverse {
  background: var(--theme7);
  color: var(--red);
  border: 1px solid var(--red);
}

.btn.btn-danger-reverse:hover {
  background: var(--red);
  color: var(--white);
}


.btn.btn-border {
  border: 1px solid var(--theme);
  color: var(--theme);
  background: var(--button-01-background)
}

.btn.btn-border:hover {
  border: 1px solid var(--color0);
  background: var(--color0);
  color: var(--colorF);
}


.material-icons.bg {
  color: var(--colorF);
  background: var(--color6);
  margin-left: 5px;
}


input[type="text"],
input[type="number"] {
  appearance: none;
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid var(--gray);
  border-radius: 5px;
  background: var(--colorF);
  min-height: 35px;
}

select {
  background: var(--colorF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E") no-repeat right 4px center;
  background-size: 18px;
  padding: 0 10px;
  padding-right: 25px;
  appearance: none;
  /* min-width: 100px; */
  font-size: 14px;
  border: 1px solid var(--gray);
  border-radius: 5px;
  min-height: 35px;
}


input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

input.date-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--colorF) url(/home/icon/date-icon.png) no-repeat right 4px center;
  background-size: 20px 20px;
  background-color: var(--white);
  padding-right: 28px;
  /* 텍스트가 아이콘과 겹치지 않도록 */
  width: 175px;
  height: 35px;
  font-size: 14px;
  padding: 0 6px;
  border: 1px solid var(--gray);
  border-radius: 5px;
}






/* 숫자 카운터(— 1 +) */
.counter {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  height: 44px;
}

.counter .ctr {
  width: 44px;
  height: 44px;
  border: 0;
  background: #f9fafb;
  font-size: 20px;
  cursor: pointer;
}

.counter .ctr-input {
  width: 60px;
  height: 44px;
  border: 0;
  text-align: center;
  font-weight: 800;
  color: #111;
  outline: none;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
}

/* 판매가 입력(1 원) */
.price-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  height: 44px;
}

.price-input .price-field {
  width: 100px;
  border: 0;
  outline: none;
  font-weight: 800;
  text-align: right;
  color: #111;
  background: #fff;
}

.price-input .won {
  color: #1f2937;
}

.form-control {
  position: relative;
  display: block;
  width: 100%;
  padding: 7px 21px;
  border-radius: 5px;
  background: transparent;
  font-size: 16px;
  line-height: normal;
  transition: border-color 0.15s ease-in-out;
  background: var(--colorF);
  /* border: solid 1px var(--color1); */
}

.form-select {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 10px 15px;
  border: 1px solid var(--colorE5);
  color: var(--color0);
  cursor: pointer;
  min-width: 85px;
}

select.form-select {
  padding: 10px 20px;
}


td>div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px 16px;
}

.container .sect {
  position: relative;
  margin: 30px 0;
  margin-top: 50px;
}


.container.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}


.container .contents {
  position: relative;
  min-height: 500px;
  width: 100%;
  height: 100%;
}


.content-top {
  position: relative;
  display: flex;
  justify-content: flex-start;
  padding: 5px 10px;
  background-color: var(--bgFL);
  margin: 20px 0;
  border: 1px solid var(--table-02-line);
}

.icon-menu {
  display: flex;
  align-items: center;
  gap: 0;
  /* 분리선이 있으니 간격은 따로 없이 처리 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-menu li {
  position: relative;
}

.icon-menu li:not(:last-child)::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: var(--colorC);
}

.icon-menu li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #333;
  font-size: 18px;
  padding: 6px 8px;
  width: 50px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.icon-menu li a .material-icons-outlined {
  font-size: 24px;
  margin-bottom: 2px;
  color: #000;
}

.icon-menu li a:hover {
  background-color: #e3f2fd;
  color: #1565c0;
}


.content-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--white);
  margin: 0 0 12px 0;
}

.content-header .popup-content-body__filter-wrap {
  position: static;
  flex: 1;
  margin-bottom: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}


.content-header.center {
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.content-header h1 {
  font-family: "JalnanGothic";
  font-size: 28px;
  color: var(--color0);
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}

/* breadcrumb */
.content-header .breadcrumb {
  margin-left: auto;
  flex-shrink: 0;
}

.content-header .breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.content-header .breadcrumb ol li {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #888;
  font-weight: 400;
}

.content-header .breadcrumb ol li a {
  color: #888;
  text-decoration: none;
  transition: color 0.15s;
}

.content-header .breadcrumb ol li a:hover {
  color: var(--theme, #00bcd4);
}

.content-header .breadcrumb ol li::before {
  content: '›';
  display: inline-block;
  margin: 0 5px;
  color: #ccc;
  font-size: 14px;
}

.content-header .breadcrumb ol li:first-child::before {
  display: none;
}

.content-header .breadcrumb ol li.now {
  color: var(--color0, #222);
  font-weight: 600;
}

.content-header .breadcrumb ol li i {
  font-size: 14px;
  color: #aaa;
}

/* content-header 인라인 필터바 */
.ch-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: nowrap;
  white-space: nowrap;
  position: relative;
  background: #f4f6f9;
  border-radius: 10px;
  padding: 6px 12px;
}

.content-header .popup-content-body__aside_btn {
  width: auto;
  flex-shrink: 0;
}


.ch-filter h4 {
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
}

.ch-filter h4 span {
  color: var(--theme, #00bcd4);
  font-weight: 700;
}



.tab-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

ul.tab-menu li a {
  padding: 5px 20px;
  color: var(--color3) !important;
  background: var(--colorE5) !important;
  border: transparent !important;
}

ul.tab-menu li.active a {
  color: var(--colorF) !important;
  background: var(--color3) !important;
}




/* sect-title */
.container .sect-title {
  position: relative;
  text-align: center;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: "JalnanGothic";
  line-height: 2;
}

.container .sect-title.between {
  justify-content: space-between;
}

.container .sect-title.between .control-btn {
  transform: unset;
  border: solid 1px var(--color1);
}

.container .sect-title.between .control-btn .swiper-button-disabled {
  border: solid 1px #F1F1F5;
}

.container .sect-title.border {
  border-bottom: solid 2px var(--colorE6) !important;
}

.container .sect-title.border-black {
  border-bottom: solid 1px #000 !important;
}


.container .sect-title.col {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.container .sect-title.left {
  text-align: left;
}

.container .sect-title .eyebrow {
  font-size: 17px;
  color: #F33939;
  font-weight: 900;
  margin-bottom: 10px;
}

.container .sect-title .title {
  font-size: 30px;
  letter-spacing: -1.5px;
  word-break: keep-all;
  line-height: 1.5;
  text-align: left;
}

.container .sect-title .title.center {
  width: 100%;
  text-align: center;
}

.container .sect-title .desc {
  margin: 10px 0;
  color: var(--colorB);
  font-size: 16px;
  letter-spacing: -0.3px;
  word-break: keep-all;
}

.container .sect-title .see-more {
  font-size: 18px;
  color: var(--color5);
}



@media screen and (max-width: 1024px) {
  .container .sect-title .desc {
    font-size: 16px;
    line-height: 1.2;
  }

  .container .sect-title .desc br {
    display: none;
  }
}


@media screen and (max-width: 767px) {
  .container .sect-title {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .container .sect-title .eyebrow {
    font-size: 14px;
  }

  .container .sect-title .title {
    font-size: 20px;
    letter-spacing: -0.8px;
    font-weight: 400;
  }

  .container .sect-title .title img {
    margin-top: 3px;
    width: 20px;
    height: 20px;
  }

  .container .sect-title .desc {
    font-size: 16px;
  }

  .container .sect-title .see-more {
    font-size: 14px;
  }

  .container .area.m-pr0 .sect-title.between {
    padding-right: 10px;
    margin-bottom: 10px;
  }
}


.container .sub-title {
  position: relative;
  display: flex;
  margin-bottom: 10px;
}

.container .sub-title.between {
  justify-content: space-between;
}

.container .sub-title h4 {
  font-family: var(--fontJ);
  font-size: 20px;
  color: var(--colorF);
}

.content-body_eye {
  gap: 10px;
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 500;
  margin-bottom: 10px;
}

.content-body_eye h4 {
  font-size: 24px;
  font-weight: bold;
}


.content-body__header {
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  gap: 10px;
}

.content-body__header-info {
  background: var(--theme3);
  font-size: 20px;
  width: 15%;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  border-radius: 5px;
  min-width: 300px;
  gap: 10px;
  line-height: 1.2;
}


.content-body__header-info.center {
  align-items: center;
}

.content-body__header-info.darkgray {
  background: #818181;
}

.content-body__header-info.pro {
  min-width: 400px;
  align-items: center;
  flex-direction: row;
}

.content-body__header-info.pro2 {
  min-width: 200px;
  align-items: center;
  flex-direction: row;
}

.content-body__header-info.white {
  background: var(--colorF);
  color: var(--color0);
  background: var(--light-gray);
}

.content-body__header-table {
  width: 100%;
}


.product-name {
  color: var(--white);
  font-weight: 500;
}

.product-name>span {
  display: block;
  font-weight: 400;
}

.content-body__header-table table {
  width: 100%;
  border: 1px solid var(--table-01-line);
}


.content-body__header-table td:hover {
  background-color: #e8edf7;
  color: #08a1bc;
}

.content-body__header-table th:hover+td {
  background-color: #e8edf7;
  color: #08a1bc;
}

.content-body__header-table th:hover {
  background-color: #e2e9f7;
  color: #08a1bc;
}

.content-body__header-table th {
  background: var(--bgFL);
  border-bottom: 1px solid var(--table-01-line);
  font-weight: 700;
}

.content-body__header-table th.highlight {
  background-color: #e2e9f7;
  color: #08a1bc;
}

.content-body__header-table td.highlight {
  background-color: #e8edf7;
  color: #08a1bc;
}

.content-body__header-table tr td {
  border-bottom: 1px solid var(--table-01-line);
}

.content-body__header-table tr:last-child th,
.content-body__header-table tr:last-child td {
  border-bottom: 0;
}


.content-body__top {
  position: relative;
}

.content-body__top .badge-wrap {
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 10px 0;
}

.content-body__top .badge {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #00accd;
  border-radius: 20px;
  font-size: 14px;
  color: #333;
  background: #fff;
  white-space: nowrap;
}

.content-body__top .badge strong.in {
  color: #00accd;
}

.content-body__top .badge strong.out {
  color: #304fff;
}

.content-body__search select {
  width: 175px;
}

.content-body__search-table table {
  width: 100%;
  border: 1px solid var(--table-02-line);
}

.content-body__search-table th {
  background: var(--th-02-background);
  border-bottom: 1px solid var(--table-02-line);
  font-weight: 700;
}

.content-body__search-table tr td {
  border-bottom: 1px solid var(--table-02-line);
}

.content-body__search-table tr:last-child th,
.content-body__search-table tr:last-child td {
  border-bottom: 0;
}







/* 버튼 */




.popup-content-body__aside_wrap {
  position: relative;
  width: 100%;
}

.popup-content-body__filter-wrap {
  position: sticky;
  top: 0;
  background: var(--colorF);
  z-index: 998;
  padding: 10px 0;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.popup-content-body__filter-wrap>div:first-child {
  flex: 3;
  /* 첫 번째 div가 두 배 */
}

.popup-content-body__aside_btn {
  position: relative;
  width: 250px;
  padding: 10px;
  border: 1px solid var(--gray);
  margin: 12px 0;
  border-radius: 5px;
  background: var(--light-blue);
  font-size: 12px;
  font-weight: bold;
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.popup-content-body__aside_btn.active {
  color: var(--theme3);
}

.popup-content-body__aside_btn i {
  font-size: 24px;
  font-weight: normal;
}

.popup-content-body__table-wrap {
  position: relative;
  display: flex;
}

.popup-content-body__table-wrap>div:first-child {
  flex: 3;
}

.popup-content-body__aside_content {
  /* 오버레이 방식에서 flex item 방식으로 변경 */
  position: relative;
  width: 0;
  min-width: 0;
  height: 100%;
  max-height: none;
  opacity: 0;
  overflow: hidden;
  transition: width 0.3s ease, min-width 0.3s ease, opacity 0.3s ease;
  background: var(--colorF);
  border: 1px solid var(--gray);
  border-radius: 5px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.popup-content-body__aside_content.active {
  width: var(--aside-width, 350px);
  min-width: var(--aside-width, 350px);
  opacity: 1;
  overflow-y: auto;
}

.popup-content-body__aside_content .tab-panel {
  position: relative;
  padding: 5px;
  border: solid 1px var(--gray);
  border-top: 0;
}

.popup-content-body__aside_content.active {
  display: flex !important;
  flex-direction: column;
}

.popup-content-body__aside_content .tab-list {
  flex-shrink: 0;
}

/* (위에서 .tab-panel.active 정의됨) */

/* 탭 내부 콘텐츠도 전체 채움 */
.popup-content-body__aside_content .tab-panel .memo-wrap {
  flex-shrink: 0;
}

.popup-content-body__aside_content .tab-panel .memo-table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.popup-content-body__aside_content .tab-panel .memo-table textarea {
  flex: 1;
  min-height: 100px;
  resize: none !important;
}

.popup-content-body__aside_content .tab-panel .memo-table .table-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.memo-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: var(--light-gray);
  font-weight: 500;
  flex-direction: column;
  gap: 10px;
}

.memo-item {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color5)
}

.memo-item i {
  font-size: 20px;
  color: var(--color0);
}

.memo-icon-wrap {
  display: flex;
}


.memo-icon-wrap,
.icon-wrap {
  display: flex;
  align-items: center;
  padding: 10px;
  font-weight: 500;
  border-radius: 5px;
  gap: 5px;
  padding: 0;
}

.memo-btn {
  display: flex;
}

.memo-btn i {
  font-size: 18px;
  font-weight: 400;
  background: var(--theme);
  color: var(--colorF);
  border-radius: 3px;
  padding: 5px;
}

.memo-table {
  position: relative;
  min-height: 50vh;
  max-height: 50vh;
  overflow-y: scroll;
  margin-top: 5px;
}

.memo-table .table-scroll {
  width: 100%;
  border-collapse: collapse;
  /* 셀 테두리 겹침 제거 */
}

.memo-table th,
.memo-table td {
  border: 1px solid var(--table-01-line);
  padding: 5px 10px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.memo-table td.text-right {
  text-align: right;
}

.content-body__filter,
.popup-content-body__filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border: 1px solid var(--gray);
  background: var(--light-gray);
  margin: 12px 0;
  font-weight: 500;
  border-radius: 5px;
}

.popup-content-body__filter {
  background: var(--light-blue);
}


.content-body__filter-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}

.popup-content-body__filter-left select {
  width: 175px;
}

.content-body__filter-left,
.popup-content-body__filter-left {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-wrap: wrap;
}

.popup-content-body__filter-left h4,
.content-body__filter-right h4 {
  font-weight: bold;
}

.popup-content-body__filter-left>h4>span,
.content-body__filter-right h4>span {
  color: var(--theme);
}

.content-body__filter-right,
.popup-content-body__filter-right {
  display: flex;
  align-items: center;
  gap: 5px;
}


.content-body__filter-right a,
.popup-content-body__filter-right a {
  display: flex;
  gap: 5px;
  padding: 0 15px;
}

.popup-content-body__filter-right a i {
  display: flex;
  align-items: center;
}

.content-body__filter-right a {
  padding: 0 15px;
}

.popup-content-body__filter-right .ri-printer-line {
  font-size: 1.25em;
}


.popup-content-body__filter-right .icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.popup-content-body__filter-right .icon-wrap .badge {
  position: absolute;
  top: 7px;
  right: 0px;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  color: var(--color0);
}


.popup-content-body__filter-right .icon-wrap .badge {
  position: absolute;
  top: 7px;
  right: 0px;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  color: var(--color0);
}

.popup-content-body__filter-right .btn:hover .icon-wrap .badge {
  color: var(--colorF);
}

.content-body__memo {
  position: relative;
  display: flex;
  width: 100%;
  gap: 20px;
}

.content-body__memo>* {
  flex: 1;
}


.content-body__memo-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.content-body__memo>*>textarea {
  width: 100%;
  height: 300px;
  overflow-y: scroll;
}

.content-body__memo textarea {
  flex: 1;
  background: var(--colorF);
}

.popup-content-body__bottom {
  position: relative;
  padding: 10px;
  border: 1px solid var(--gray);
  background: var(--light-gray);
  margin: 12px 0;
}

.content-body-wrap {
  position: relative;
  display: flex;
  width: 100%;
  gap: 20px;
}

.content-body_table {
  position: relative;
  flex: 4;
}

.content-body_aside {
  position: relative;
  flex: 1;
  margin-bottom: 10px;
}


.content-body_aside {
  background: #fff;
  color: #333;
}

.content-body_aside .msg-box {
  position: relative;
  box-sizing: border-box;
}

.content-body_aside .msg-head {}



.content-body_aside .msg-head .title strong {
  font-weight: bold;
}

.content-body_aside .msg-head .btn-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

.content-body_aside .msg-head .reserve-btn {
  background: #ccc;
  padding: 4px 6px;
  font-size: 12px;
}


.order-total ul {
  display: flex;
  gap: 20px;
  color: var(--color4);
  font-family: "JalnanGothic";
}

.order-total ul li span {
  font-size: 24px;
}


.msg-head {
  position: relative;
  background: var(--theme3);
  padding: 10px 15px;
}

.msg-head .title-wrap {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.msg-head .title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 17px;
}

.msg-head .btn-wrap {
  display: flex;
  gap: 5px;
}


.msg-eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.msg-icon-set {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}

.msg-icon-set a {
  color: var(--color9);
}


.btn-send {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0 10px
}

.btn-send span {
  color: var(--theme);
}



.content-body_aside .msg-body {
  position: relative;
  padding: 10px;
  background: var(--light-gray);
  border: 1px solid var(--colorC);
}

.content-body_aside .msg-item {
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
}

.content-body_aside .wifi-icon {
  width: 14px;
  height: 14px;
  background: url('wifi-icon.png') no-repeat center / contain;
  position: absolute;
  top: 6px;
  left: 6px;
}


.content-body_aside .msg-table {
  position: relative;
  margin-top: 10px;
  border: 1px solid var(--table-02-line);
  border-bottom: 0;
}

.content-body_aside .msg-table th {
  background: var(--th-02-background);
  border-bottom: 1px solid var(--table-02-line);
  border-right: 1px solid var(--table-02-line);
  font-weight: 700;
}

.content-body_aside .msg-table td {
  border-bottom: 1px solid var(--table-02-line);
}



.content-body_aside .msg-sns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

.content-body_aside .msg-sns .count {
  font-size: 12px;
  color: #999;
}

.content-body_aside .msg-sns .btn-wrap {
  position: relative;
  display: flex;
  gap: 4px;
  width: 100%;
}

.content-body_aside .msg-sns .btn-wrap a {
  flex: 1;
}


.content-body_aside .receiver {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.content-body_aside .receiver .label {
  position: relative;
  font-weight: bold;
  white-space: nowrap;
  margin-right: 10px;
}


.content-body_aside .receiver input {
  width: 100%;
  border-radius: 5px 0 0 5px;
}

.content-body_aside .receiver a {
  background: var(--color3);
  color: var(--colorF);
  padding: 5px;
  border-radius: 0 5px 5px 0;
}



.input-box,
.input-box2 {
  position: relative;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  align-items: center;
}

.input-box2 {
  gap: 0;
}

.input-box2 span {
  white-space: nowrap;
  margin-right: 5px;
  font-weight: 500;
}

.input-box2 input[type="text"] {
  border-radius: 5px 0 0 5px;
}

.input-box2>.btn {
  min-width: auto;
  background: var(--dark-gray);
  color: var(--white);
  border: 0;
  border-radius: 0 5px 5px 0;
  padding: 0 15px;
}

.input-box>.btn:hover {
  background: var(--color0);
  color: var(--colorF);
}

.input-box>label {
  margin-left: 4px;
}

.input-box input[type="text"] {
  border-radius: 5px 0 0 5px;
}

.input-box input[type="text"] {
  border-radius: 5px;
  margin-right: 5px;
  border: 1px solid var(--gray);
}


/* CSS :hover 완전 차단 - 모든 테이블 요소 및 wrapper */
/* [HOVER-5] inherit는 부모의 배경색을 상속하므로 제거 */
/* .popup-content-body__table-wrap:hover,
.popup-content-body__table-wrap .table-wrap:hover,
.popup-content-body__table:hover,
.popup-content-body__table tbody:hover,
.popup-content-body__table tbody tr:hover {
  background-color: inherit !important;
} */

/* .popup-content-body__table-wrap:hover td,
.popup-content-body__table-wrap .table-wrap:hover td,
.popup-content-body__table:hover td,
.popup-content-body__table tbody:hover td,
.popup-content-body__table tbody tr:hover td {
  background-color: inherit !important;
} */

.content-body__table,
.popup-content-body__table {
  width: 100%;
  overflow: visible;
}

.popup-content-body__table .table-scroll {
  width: 100%;
  min-width: fit-content;
}

.popup-content-body__table .table-scroll tbody {
  display: block;
  overflow-y: auto;
  overflow-x: auto;
  max-height: calc(60vh);
  height: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  /* sticky positioning이 작동하도록 */
  contain: none;
}

.popup-content-body__table .table-scroll tbody::-webkit-scrollbar {
  display: none;
}


/* pagination */
.pagination {
  margin-top: 40px;
  font-size: 0;
  text-align: center;
}

.pagination .control-btn,
.pagination .page-btn-wrap,
.pagination .page-btn-wrap .now,
.pagination .page-btn-wrap a {
  display: inline-block;
  vertical-align: top;
}

.pagination .control-btn,
.pagination .page-btn-wrap .now,
.pagination .page-btn-wrap a {
  width: 35px;
  height: 35px;
  font-size: 16px;
  border: 1px solid transparent;
  background: transparent;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.pagination .page-btn-wrap a {
  border: solid 1px var(--light-gray);
  color: var(--color0);
}

.pagination .control-btn {
  position: relative;
  margin: 0 3px;
  border: solid 1px var(--light-gray);
}

.pagination .control-btn::before,
.pagination .control-btn::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border: 2px solid var(--color0);
  border-bottom: none;
  border-right: none;
}

.pagination .control-btn.prev::before,
.pagination .control-btn.prev::after,
.pagination .control-btn.pprev::before,
.pagination .control-btn.pprev::after {
  transform: rotate(-45deg);
}

.pagination .control-btn.prev::before {
  margin-left: -3px;
}

.pagination .control-btn.pprev::before {
  margin-left: -8px;
}

.pagination .control-btn.next::before,
.pagination .control-btn.next::after,
.pagination .control-btn.nnext::before,
.pagination .control-btn.nnext::after {
  transform: rotate(135deg);
}

.pagination .control-btn.next::before {
  margin-left: -8px;
}


.pagination .control-btn.nnext::before {
  margin-left: -11px;
}


.pagination .control-btn.nnext::after {
  margin-left: -3px;
}


.pagination .control-btn.prev::after,
.pagination .control-btn.next::after {
  display: none;
}

.pagination .page-btn-wrap {
  margin: 0;
  color: var(--color10);
}

.pagination .page-btn-wrap>* {
  margin: 0 3px;
  border-color: #ddd;
  border-radius: 5px;
}



.pagination .page-btn-wrap .now {
  border-color: var(--theme);
  background: var(--theme);
  color: #fff;
  font-weight: 700;
}

.grid-wrap {
  display: flex;
  gap: 20px;
}

.grid-wrap {
  display: grid;
  gap: 20px;
}

.grid-wrap.grid2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-wrap.grid3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-wrap .grid-item {
  position: relative;
  background: var(--light-gray);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.grid-wrap .grid-item-head h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}








.flex-wrap .flex-item {
  position: relative;
  background: var(--light-gray);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1;
}

.flex-wrap .flex-item-head h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}


.round-bar {
  height: 30px;
  border-radius: 5px 0 0 5px;
  margin-left: auto;
}

.round-bar.red {
  background-color: #c47676;
}

.round-bar.orange {
  background-color: #dc9263;
}

.round-bar.gold {
  background-color: #dcc163;
}


.round-bar.blue {
  background-color: #63a5dc;
}

.round-bar.green {
  background-color: #95c476;
}


.table-container-wrap {
  position: relative;
  display: flex;
  gap: 20px;
}

.table-container-wrap .top-box {
  font-size: 20px;
  width: 15%;
  padding: 25px;
  display: flex;
  gap: 10px;
  background: #818181;
  margin-bottom: 10px;
  width: 100%;
  color: var(--colorF);
  justify-content: space-between;
  align-items: center;
}

.table-container-wrap>div {
  height: calc(50vh + 50px);
  overflow-y: auto;
}


.table-container-wrap .top-box p {
  margin-bottom: 10px;
}



.table-scroll {
  border-collapse: separate;
  border-spacing: 0;
  /* Bootstrap hover 효과 완전 비활성화 */
  --bs-table-hover-bg: transparent !important;
  --bs-table-hover-color: inherit !important;
  --bs-table-accent-bg: transparent !important;
}

/* Bootstrap box-shadow 완전 제거 */
.table-scroll> :not(caption)>*>* {
  box-shadow: none !important;
}

.table-scroll tbody tr,
.table-scroll tbody tr td {
  box-shadow: none !important;
}

/* CSS :hover 완전 차단 - 모든 테이블 요소 */
/* inherit는 부모의 배경색을 상속하므로 제거 */
/* .table-scroll tbody tr:hover,
.table-scroll tbody:hover,
.table-scroll:hover {
  background-color: inherit !important;
} */

/* .table-scroll tbody tr:hover td,
.table-scroll tbody:hover td,
.table-scroll:hover td {
  background-color: inherit !important;
} */

/* 선택된 행은 hover와 관계없이 선택된 배경색 유지 (최고 우선순위) */
.table-scroll tbody tr.selected-row,
.table-scroll tbody tr.selected-row:hover,
.table-scroll tbody tr.selected-row.row-hover,
.table-scroll tbody tr.selected-row.row-hover:hover {
  background-color: #b8dcff !important;
  box-shadow:
    inset 5px 0 0 0 #0066cc,
    0 2px 8px rgba(0, 102, 204, 0.2);
  position: relative;
  z-index: 1;
}

.table-scroll tbody tr.selected-row td,
.table-scroll tbody tr.selected-row:hover td,
.table-scroll tbody tr.selected-row.row-hover td,
.table-scroll tbody tr.selected-row.row-hover:hover td {
  background-color: #b8dcff !important;
  font-weight: 500;
}

/* 사용자 정의 배경색이 있는 행은 hover 효과 완전 차단 (인라인 스타일 보존) */
/* CSS에서 배경색을 설정하지 않으면 인라인 스타일이 유지됨 */
/* .table-scroll tbody tr[data-has-custom-bg].row-hover,
.table-scroll tbody tr[data-has-custom-bg].row-hover:hover {
  background-color: transparent !important;
} */

/* 사용자 정의 배경색이 있는 행의 td는 hover 시에도 인라인 스타일 유지 */
/* JavaScript에서 hover 클래스를 추가하지 않으므로 이 CSS는 방어적 코드 */
/* CSS에서 배경색을 설정하지 않으면 인라인 스타일이 유지됨 */





.content-body__table table,
.popup-content-body__table table {
  border: 1px solid var(--table-02-line);
}

.popup-content-body__table th:last-of-type,
.popup-content-body__table tr td:last-of-type {
  border-right: 0;
}

.content-body__table th,
.popup-content-body__table th {
  background: var(--th-02-background);
  border-bottom: 1px solid var(--table-02-line);
  border-right: 1px solid var(--table-02-line);
  font-weight: 700;
}

.content-body__table tr td,
.popup-content-body__table tr td {
  border-bottom: 1px solid var(--table-02-line);
  border-right: 1px solid var(--table-02-line);
  text-align: center;
  background: var(--colorF);
}


.content-body__table tr:last-child td,
/* .popup-content-body__table tr:last-child th, */
.popup-content-body__table tr:last-child td {
  border-bottom: 0;
}

/* CSS hover 완전 제거 - JavaScript로만 처리 */
/* .content-body__table tbody tr:not(.selected-row):hover td 제거됨 */
/* .popup-content-body__table tbody tr:not(.selected-row):hover td 제거됨 */

.content-body__table thead tr:first-child th:last-child {
  border-right: 0;
}


.content-body__table td:last-child {
  border-right: 0;
}

/* CSS hover 완전 제거 - JavaScript로만 처리 */
/* .content-body__table tbody tr:not(.selected-row):hover 제거됨 */
/* .popup-content-body__table tbody tr:not(.selected-row):hover 제거됨 */


@media screen and (max-width: 1366px) {
  .content-body__filter {
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    align-items: flex-start;
  }
}


.form-wrap {
  position: relative;
}

.form-wrap .row:first-child {
  margin-top: 0;
}

.form-wrap .row {
  margin-top: 10px;
}

.form-wrap .row>label,
.form-wrap .row>p.label {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
}


.form-wrap .row .forms {
  position: relative;
  display: flex;
}

.form-wrap .row .forms.btns .btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.member-wrap .form-control {
  background: #f5f5f5;
}

.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: bold;
}

.select-box {
  position: relative;
  display: flex;
  align-items: center;
}

.select-box p {
  margin-right: 5px;
  font-size: 16px;
  font-weight: bold;
}


.select-box>.btn {
  min-width: auto;
  background: var(--dark-gray);
  color: var(--white);
  border: 0;
  border-radius: 0 5px 5px 0;
}


.status-wrap {
  position: relative;
  justify-content: center;
}


.status-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  padding: 0 12px;
  min-height: 30px;
  border-radius: 5px;
}

.status-btn .material-icons {
  font-size: 18px;
}


.status-btn.red {
  background-color: #ff4330;
}

.status-btn.blue {
  background-color: #2b5ff8;
}

.status-btn.green {
  background-color: #55ba4a;
}


.table-bottom-menu {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.table-bottom-menu ul {
  position: relative;
  display: flex;
  gap: 9px;
}

.table-bottom-menu ul li a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 14px;
  border: 1px solid var(--table-02-line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--colorF);
  position: relative;
  white-space: nowrap;
  font-weight: 500;
}

.table-bottom-menu ul li a:hover {
  color: var(--theme);

}

.table-bottom-menu ul li:nth-of-type(2) a:hover {
  color: var(--primary);
}

.table-bottom-menu ul li:nth-of-type(3) a:hover {
  color: var(--color10);
}

.table-bottom-menu ul li:nth-of-type(4) a:hover {
  color: var(--red);
}


.bottom-menu {
  position: relative;
  background: var(--theme3);
  /* margin: 20px 0; */
  border-radius: 3px;
}

.bottom-menu ul {
  display: flex;
  justify-content: center;
  color: var(--colorF);
}

.bottom-menu ul li a {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  gap: 10px;
  align-items: center;
  height: 100%;
}


.bottom-menu ul li:hover {
  background-color: #2d5175;
}

.bottom-menu ul li.active {
  background-color: #2d5175;
}


.bottom-menu ul li img {
  filter: brightness(0) invert(1);
  object-fit: contain;
}


#popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
  z-index: 1111;
  transition: display 0.5s;
}

#popup.show {
  display: block;
}

.popup-container {
  width: 100%;
  margin: 0 auto;
  padding: 30px;
}

.popup-content {
  width: 100%;
  height: 100%;
  border: 1px solid var(--dark-gray);
  padding: 30px;
  position: relative;
}

.popup-title {
  position: relative;
  width: 100%;
  height: 42px;
}

.popup-title>span {
  position: absolute;
  display: flex;
  background: var(--white);
  padding: 12px;
  border-left: 1px solid var(--theme);
  border-top: 1px solid var(--theme);
  border-right: 1px solid var(--theme);
  align-items: center;
  justify-content: space-between;
  width: 120px;
  color: var(--theme);
  z-index: 1;
}

.popup-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--theme);
  position: absolute;
  bottom: 0;
}

.popup-content__body {
  padding: 30px 16px;
}

.popup-content__body>h2 {
  font-family: "JalnanGothic";
  margin: 20px 0;
}

.popup-content__body>h2 time {
  font-family: none;
  font-weight: 400;
  margin-left: 20px;
}

.popup-content-body__search {
  margin: 12px 0;
}

.popup-content-body__search table {
  width: 100%;
  border: 1px solid var(--table-01-line);
}

.popup-content-body__search th {
  background: var(--bgFL);
  font-weight: 700;
  min-width: 100px;
}

.popup-content-body__search td>div {
  justify-content: space-between;
}

.popup-content-body__top {
  position: relative;
  display: flex;
  gap: 20px;
}

.popup-content-body__top>* {
  flex: 1;
}

.popup-content-body__top>.table-wrap {
  flex: 2;
}


.popup-content-body__top .button-group {
  display: flex;
  gap: 10px;
}


.popup-content-body__top .button-group button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 3px;
}

.popup-content-body__top .button-group button:hover {
  background: var(--theme);
  color: var(--colorF);
}

.popup-content-body__top .button-group.flex-un button {
  min-width: 150px;
}


.popup-content-body__top table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #333;
  table-layout: auto;
}

.popup-content-body__top th,
.popup-content-body__top td {
  border: 1px solid #ddd;
  padding: 5px 10px;
  text-align: left;
  vertical-align: middle;
  word-break: keep-all;
}

.popup-content-body__top th {
  background-color: var(--light-gray);
  font-weight: 600;
  color: #000;
}

.popup-content-body__top td {
  background-color: #fff;
}

.popup-content-body__top .d-flex {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 상태 버튼 (관심, 설정 등) 스타일 */
.popup-content-body__top .status-wrap {
  margin-top: 5px;
}

.popup-content-body__top .status-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 3px;
  background-color: #f44336;
  color: #fff;
}

.popup-content-body__top .status-btn .material-icons {
  font-size: 16px;
  margin-right: 4px;
}

.popup-content-body__top .status-setting-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: #555;
}

.popup-content-body__top .status-setting-btn .material-icons {
  font-size: 18px;
}


.user-title {
  background-color: var(--theme);
  color: var(--colorF);
  padding: 20px;
  border-radius: 5px 5px 0 0;
}

.ul-style-box ul {
  display: flex;
  gap: 6px;
}

.ul-style-box li {
  background: var(--gray);
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
}

.ul-style-box li:hover {
  background-color: var(--theme2);
  color: var(--colorF);
}

.ul-style-box li.active {
  background: var(--dark-gray);
  color: var(--white);
  font-size: .9em;
}

/* .popup-content-body__filter-left .input-box>.btn {
    min-width: 90px;
    background: var(--theme2);
    color: var(--white);
    border: 0;
    border-radius: 5px;
    margin-left: 4px;
} */

.popup__close {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background: var(--black);
  color: var(--theme);
  text-align: center;
  line-height: 30px;
  font-size: 1.2em;
  font-weight: 800;
  position: absolute;
  top: 0;
  right: -15px;
  transform: translateY(-50%);
}


.result-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.result-section {
  display: flex;
  flex-direction: column;
}

.result-label {
  font-weight: bold;
  margin: 10px 0;
  font-size: 18px;
}

.result-textarea {
  height: 150px;
  resize: vertical;
  border: solid 1px var(--color1);
}


.form-check-wrap {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 20px;
  background: var(--colorF9);
  border-radius: 5px;
  gap: 10px;
}


.form-check {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 5px;
}

.form-check-input {
  position: relative;
  /* margin-top: 0.25em; */
  width: 20px;
  height: 20px;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  appearance: none;
  cursor: pointer;
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}


.form-check-input:checked::before {
  content: ' ';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 8px;
  height: 13px;
  border: 3px solid var(--color0);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  animation: rubberBand2 0.5s ease-in-out;
  border-radius: 1px;
}


input[type="radio"].form-check-input:checked::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  background: var(--color0);
  border-radius: 50%;
}






.bullet-list {
  margin-top: 10px;
  margin-left: 5px;
}

.bullet-list.dot li {
  margin-top: 5px;
}

.bullet-list li {
  padding-left: 12px;
  color: inherit;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.bullet-list li::before {
  content: '-';
  display: inline-block;
  vertical-align: middle;
  width: 14px;
}

.bullet-list.dot li:first-child {
  margin-top: 0;
}

.bullet-list.dot li::before {
  content: '●᷅';
  font-size: 5px;
  margin-left: -12px;
}

.bullet-list.ast li::before {
  content: '*';
  font-size: 16px;
  margin-left: -10px;
}
/* 고객관리: 지역명 왼쪽 세로 바 (경영체 등록상태, 셀 배경에 그려짐) */
.ag-cell.area-cell { position: relative; }
.ag-cell.area-cell.af-auto::before,
.ag-cell.area-cell.af-manual::before,
.ag-cell.area-cell.af-auto-no::before,
.ag-cell.area-cell.af-manual-no::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    pointer-events: none;
}
.ag-cell.area-cell.af-auto::before      { background: #6ebf6e; }   /* 녹색 - 자동등록 */
.ag-cell.area-cell.af-manual::before    { background: #2e7d2e; }   /* 짙은녹색 - 수동등록 */
.ag-cell.area-cell.af-auto-no::before   { background: #f5d84a; }   /* 노란색 - 자동미등록 */
.ag-cell.area-cell.af-manual-no::before { background: #ff8c00; }   /* 주황색 - 수동미등록 */

/* 고객관리: 고객명 셀 - 이름(링크) + 우측 끝 개인정보동의 아이콘 */
.cust-name-cell { display: flex; align-items: center; width: 100%; }
.cust-name-cell a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agree-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: auto;
    box-sizing: border-box;
    position: relative;
}
/* 바탕색: 기한내 = 초록 / 기한경과 = 주황 (싸인 여부 무관) */
.agree-icon.valid   { background: #3aa05a; }
.agree-icon.expired { background: #f2a31a; }
/* 전자서명 받음 = 중앙에 빨간 점 (r=3 → 6px) */
.agree-icon.signed::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d94040;
    transform: translate(-50%, -50%);
}
/* 제외 = 회색 점선 외곽선 */
.agree-icon.excluded {
    background: transparent;
    border: 1.5px dashed #888;
}

/* 아이콘/색상 범례 툴팁 (icon-menu 내부) */
.icon-menu .legend-help { position: relative; }
.icon-menu .legend-help .legend-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    width: 420px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    line-height: 1.55;
    color: #333;
    text-align: left;
    white-space: normal;
    cursor: default;
}
.icon-menu .legend-help:hover .legend-tooltip,
.icon-menu .legend-help:focus-within .legend-tooltip { display: block; }
.icon-menu .legend-help .legend-title {
    margin: 0 0 8px;
    font-weight: 600;
}
.icon-menu .legend-help .legend-accent { color: #d94040; }
.icon-menu .legend-help h5 {
    margin: 10px 0 6px;
    font-size: 12px;
    font-weight: 600;
}
.icon-menu .legend-help .legend-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 12px;
}
.icon-menu .legend-help .legend-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    white-space: nowrap;
}
.icon-menu .legend-help .legend-list li::after { content: none; } /* icon-menu li 구분선 제거 */
.icon-menu .legend-help .legend-list .agree-icon { margin-left: 0; }
.icon-menu .legend-help .legend-bar {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.icon-menu .legend-help .legend-bar.af-auto      { background: #6ebf6e; }
.icon-menu .legend-help .legend-bar.af-manual    { background: #2e7d2e; }
.icon-menu .legend-help .legend-bar.af-auto-no   { background: #f5d84a; }
.icon-menu .legend-help .legend-bar.af-manual-no { background: #ff8c00; }

/* ───── 사이드 패널 좌측 border 드래그 리사이즈 ───── */
.popup-content-body__aside_content.aside-edge-hover {
    border-left: 3px solid #1e6fd9;
}
.popup-content-body__aside_content.aside-resizing {
    transition: none !important;
    user-select: none;
}
body.aside-resizing,
body.aside-resizing * {
    user-select: none !important;
    cursor: ew-resize !important;
}

/* ───── QA B2: 등록/수정 모달 폼 필드 포커스 표시 ───── */
/* FormNav(엔터/방향키) 이동 시 현재 필드를 명확히 강조 — 특히 select 는 브라우저 기본 포커스링이 약해 안 보였음 */
.modal .table-wrap input:focus,
.modal .table-wrap select:focus,
.modal .table-wrap textarea:focus {
    outline: 2px solid #1e6fd9;
    outline-offset: -1px;
    box-shadow: 0 0 0 3px rgba(30, 111, 217, 0.18);
    border-color: #1e6fd9;
}

/* ───── fit 페이지 공통 레이아웃 (하단 버튼바가 스크롤 없이 항상 보이도록) ─────
   개별 .XX-fit 의 height:calc(100vh-N) 이 `.container .contents{height:100%}`(특이도 0,2,0)에 져서 무효화 →
   콘텐츠(그리드)가 #main 을 뷰포트 밖으로 밀어 하단버튼 잘림. #main 을 뷰포트 높이에 고정하고
   .container/.contents 를 flex 로 채워 일괄 해결(모든 -fit 페이지 공통). */
#main:has(> .container > .contents[class*="-fit"]) {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
#main:has(> .container > .contents[class*="-fit"]) > .container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#main > .container > .contents[class*="-fit"] {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ───── QA: 하단 기능버튼 글자크기 통일 ─────
   기준 = 매출장 하단버튼(E3, 14px). 각 페이지 인라인 .X-bottom-btns a {font-size:12px} 을 덮어 통일.
   매출장 .ledger-bottom-btns 는 좌14/우12 구분(E3)이 있어 제외. */
[class*="bottom-btns"]:not(.ledger-bottom-btns) a,
[class*="action-bar"] a,
[class*="action-bar"] button,
[class*="actionbar"] a,
.action-footer a,
.action-footer button,
.bottom-menu a,
.table-bottom-menu a {
    font-size: 14px !important;
}

/* ───── QA C4: 모든 select 드롭다운 화살표 전수 보장 ─────
   로컬 규칙의 `background:#fff` 단축속성이 전역 select 화살표(common.css select 블록)를 지우는 케이스가 다수
   (예: .tab-side-control select). background-image longhand + !important 로 강제해 어떤 로컬 background 도 못 덮게 함.
   엑셀 셀처럼 의도적으로 투명/무화살표인 select.form-control 은 제외. */
select:not([multiple]):not(.form-control) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 14px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 22px !important;
}