.product-wrap {
  position: relative;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-color: #333;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: #333;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #333;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 0;
  color: #333;
  vertical-align: top;
  border-color: var(--colorD);
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
}



table a {
  /* text-decoration: underline; */
  text-underline-offset: 3px;
}

table a:hover {
  text-decoration: underline;
}



/* td[rowspan] {
  border-bottom: none !important
} */



.table-responsive .table.col-tbl.br-none {
  border: none;
}

.table-responsive .table.col-tbl thead {
  border-bottom: 1px solid #333;
  background: #f8f8f8;
}




.table-responsive .table.col-tbl thead th {
  padding: 12px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.3px;
  /* border-right: 1px solid #f3f3f3; */
  border-bottom: 1px solid #f3f3f3;
  min-width: 80px;
}


@media screen and (max-width: 767px) {
  .table-responsive .table.col-tbl thead th {
    font-size: 14px;
    line-height: 28px;
    height: 50px;
    padding: 10px;
  }
}


.table-responsive .tbl-title {
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.3px;

  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .table-responsive .tbl-title {
    font-size: 16px;
    line-height: 24px;
  }
}

.table-responsive .tbl-count {
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 24px;

  letter-spacing: -0.3px;

  line-height: 1 !important;
}

@media screen and (max-width: 767px) {
  .table-responsive .tbl-count {
    font-size: 14px;
    line-height: 22px;
  }
}

.table-bordered> :not(caption)>*>* {
  border-width: 0 1px;
  border-color: var(--colorE6);
}


.table> :not(caption)>*>* {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .table-scroll에서는 Bootstrap hover 효과 완전 비활성화 */
.table-scroll> :not(caption)>*>* {
  box-shadow: none !important;
  /* background-color는 인라인 스타일이 우선하도록 제거 */
  /* background-color: var(--bs-table-bg); */
}

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


/* 기본 테이블 스타일 변수화 */
.table-responsive .table.col-tbl thead.primary {
  --bs-table-active-bg: var(--theme);
  --bs-table-active-color: var(--colorF);
  --bs-table-bg: var(--theme);
  --bs-table-hover-bg: var(--theme);
  --bs-table-hover-color: var(--colorF);
  --bs-table-striped-bg: var(--theme);
  --bs-table-striped-color: var(--colorF);
  border-color: var(--theme);
  color: var(--colorF);
  background: var(--theme);
}

.table-responsive .table.col-tbl thead.secondary {
  --bs-table-active-bg: #cacaca;
  --bs-table-active-color: var(--colorB);
  --bs-table-bg: #e0e0e0;
  --bs-table-hover-bg: #cfcfcf;
  --bs-table-hover-color: var(--colorB);
  --bs-table-striped-bg: #d5d5d5;
  --bs-table-striped-color: var(--colorB);
  border-color: #cacaca;
  color: var(--colorF);
  background: var(--theme5);
}

.table-responsive .table.col-tbl thead.success {
  --bs-table-active-bg: #bcd0c7;
  --bs-table-active-color: var(--colorB);
  --bs-table-bg: #d1e7dd;
  --bs-table-hover-bg: #c1d6cc;
  --bs-table-hover-color: var(--colorB);
  --bs-table-striped-bg: #c7dbd2;
  --bs-table-striped-color: var(--colorB);
  border-color: #bcd0c7;
  color: var(--colorB);
  background: #d1e7dd;
}

.table-responsive .table.col-tbl thead.info {
  --bs-table-active-bg: #badce3;
  --bs-table-active-color: var(--colorB);
  --bs-table-bg: #cff4fc;
  --bs-table-hover-bg: #bfe2e9;
  --bs-table-hover-color: var(--colorB);
  --bs-table-striped-bg: #c5e8ef;
  --bs-table-striped-color: var(--colorB);
  border-color: #badce3;
  color: var(--colorB);
  background: #cff4fc;
}

.table-responsive .table.col-tbl thead.warning {
  --bs-table-active-bg: #e6dbb9;
  --bs-table-active-color: var(--colorB);
  --bs-table-bg: var(--colorF) 3cd;
  --bs-table-hover-bg: #ece1be;
  --bs-table-hover-color: var(--colorB);
  --bs-table-striped-bg: #f2e7c3;
  --bs-table-striped-color: var(--colorB);
  border-color: #e6dbb9;
  color: var(--colorB);
  background: var(--colorF) 3cd;
}

.table-responsive .table.col-tbl thead.danger {
  --bs-table-active-bg: #dfc2c4;
  --bs-table-active-color: var(--colorB);
  --bs-table-bg: #f8d7da;
  --bs-table-hover-bg: #e5c7ca;
  --bs-table-hover-color: var(--colorB);
  --bs-table-striped-bg: #eccccf;
  --bs-table-striped-color: var(--colorB);
  border-color: #dfc2c4;
  color: var(--colorB);
  background: #f8d7da;
}

.table-responsive .table.col-tbl thead.light {
  --bs-table-active-bg: #dfdfdf;
  --bs-table-active-color: var(--colorB);
  --bs-table-bg: #f2f8f8;
  --bs-table-hover-bg: #e5e5e5;
  --bs-table-hover-color: var(--colorB);
  --bs-table-striped-bg: #ececec;
  --bs-table-striped-color: var(--colorB);
  border-color: #dfdfdf;
  color: var(--colorB);
  background: #f2f8f8;
}

.table-responsive .table.col-tbl thead.dark {
  --bs-table-active-bg: #383838;
  --bs-table-active-color: var(--colorF);
  --bs-table-bg: #222;
  --bs-table-hover-bg: #333333;
  --bs-table-hover-color: var(--colorF);
  --bs-table-striped-bg: #2d2d2d;
  --bs-table-striped-color: var(--colorF);
  border-color: #383838;
  color: var(--colorF);
  background: #222;
}


.table-responsive .table {
  table-layout: auto;
  width: 100%;
}

.table-responsive .table.col-tbl {
  vertical-align: middle;
  border-top: 1px solid #333;
  text-align: center;
  background: var(--colorF);
  font-weight: 500;
}

.table-responsive .table.col-tbl .col1 {
  width: 10%;
}



@media screen and (max-width: 1024px) {
  .table-responsive .table {
    table-layout: auto;
  }

  .tbl-list .btn-wrap .btn-group.right {
    margin-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .table-responsive .table.col-tbl .col1 {
    width: 80px;
  }
}

.table-responsive .table.col-tbl .col2 {
  width: 15%;
}

@media screen and (max-width: 767px) {
  .table-responsive .table.col-tbl .col2 {
    width: 100px;
  }
}

.table-responsive .table.col-tbl .col3 {
  width: 20%;
}

.table-responsive .table.col-tbl .col4 {
  width: 40%;
}

.table-responsive .table.col-tbl .col5 {
  width: 50%;
}


.table-responsive .table.col-tbl tbody th,
.table-responsive .table.col-tbl tbody td {
  height: 60px;
  padding: 12px;
  border-bottom: 1px solid var(--colorD);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.3px;
  vertical-align: middle;
  word-break: keep-all;
  border-right: 1px solid #f9f9f9;
}

.table-responsive .table.col-tbl tbody th {
  background: var(--bgFL);
  border-bottom: 1px solid var(--table-01-line);
  font-weight: 700;
}

.table-responsive .table.col-tbl tbody th strong {
  color: var(--color0);
}

.table-responsive .table.col-tbl tbody td:last-of-type {
  border-right: none;
}

@media screen and (max-width: 767px) {

  .table-responsive .table.col-tbl tbody th,
  .table-responsive .table.col-tbl tbody td {
    font-size: 13px;
    line-height: 22px;
  }
}

@media screen and (max-width: 767px) {

  .table-responsive .table.col-tbl tbody th,
  .table-responsive .table.col-tbl tbody td {
    height: 50px;
    padding: 10px 5px;
  }

  /* test */
  /* .table-responsive .table.col-tbl tbody td {
    height: 60px;
    word-break: keep-all;
    white-space: normal;
  } */

}

.table-responsive .table.col-tbl tbody th .flag-title,
.table-responsive .table.col-tbl tbody td .flag-title {
  display: flex;
  align-items: center;
}

.table-responsive .table.col-tbl tbody th .flag-title .flag,
.table-responsive .table.col-tbl tbody td .flag-title .flag {
  margin-right: 40px;
}

@media screen and (max-width: 767px) {

  .table-responsive .table.col-tbl tbody th .flag-title .flag,
  .table-responsive .table.col-tbl tbody td .flag-title .flag {
    margin-right: 15px;
  }
}

.table-responsive .table.col-tbl.type2 {
  border-top-color: var(--colorB);
}

.table-responsive .table.col-tbl.type2 thead th {
  height: 55px;
  border-right: none;
  border-bottom-color: var(--colorF);
  background: var(--colorF);
  color: var(--colorB);
  font-weight: 700;
  word-break: keep-all;
}

.table-responsive .table.col-tbl.type2 thead th:first-child {
  border-left: none;
}

.table-responsive .table.col-tbl.type2 tbody th,
.table-responsive .table.col-tbl.type2 tbody td {
  border-left: none;
  border-right: none;
  word-break: keep-all;
}

.table-responsive .table.col-tbl.type2 tbody th:first-child,
.table-responsive .table.col-tbl.type2 tbody td:first-child {
  border-left: none;
}

.table-responsive .table.col-tbl.type2 tbody th.bg,
.table-responsive .table.col-tbl.type2 tbody td.bg {
  background-color: #eaeaea;
}

.table-responsive .table.col-tbl input[type="text"],
.table-responsive .table.col-tbl input[type="password"],
.table-responsive .table.col-tbl input[type="email"],
.table-responsive .table.col-tbl input[type="number"] {
  padding: 5px 15px;
  height: 50px;

}




.table-responsive .table.row-tbl {
  table-layout: fixed;
  border: none !important;
}


.table-responsive .table.row-tbl tbody tr {
  border: none;
}

.table-responsive .table.row-tbl tbody th {
  border: none;
}


.table-responsive .table.row-tbl td {
  white-space: wrap;
}

.table-responsive .table.row-tbl td a {
  text-decoration: underline;
}

@media screen and (max-width: 1024px) {
  .table-responsive .table.row-tbl {
    table-layout: auto;
  }
}



.table-responsive .table.row-tbl .col1 {
  width: 20%;
}

@media screen and (max-width: 767px) {
  .table-responsive .table.row-tbl .col1 {
    width: 120px;
  }
}

.table-responsive .table.row-tbl .col2 {
  width: 30%;
}

@media screen and (max-width: 767px) {
  .table-responsive .table.row-tbl .col2 {
    width: 40%;
  }
}

.table-responsive .table.row-tbl tbody tr:first-child th,
.table-responsive .table.row-tbl tbody tr:first-child td {
  border-top: 1px solid var(--theme4);
}

.table-responsive .table.row-tbl tbody th,
.table-responsive .table.row-tbl tbody td {
  height: 60px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--theme4);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.3px;
  vertical-align: middle;
  word-break: keep-all;
}



@media screen and (max-width: 767px) {

  .table-responsive .table.row-tbl tbody th,
  .table-responsive .table.row-tbl tbody td {
    font-size: 14px;
    line-height: 22px;
    padding: 10px 15px;
  }

  .table-responsive .table.row-tbl tbody td {
    min-width: 120px;
  }
}



.table-responsive .table.row-tbl tbody th {
  background: var(--bgFL);
  text-align: left;
  font-weight: bold;
}

.table-responsive .table.row-tbl tbody th.center {
  text-align: center;
}

.table-responsive .table.row-tbl tbody td {
  color: #555;
}

.table-responsive .table.row-tbl.type2 tbody th {
  background: transparent;
  border-right: 1px solid var(--colorD);
  text-align: left;
}

.table-responsive .table.row-tbl.type2 tbody th,
.table-responsive .table.row-tbl.type2 tbody td {
  padding: 25px 60px;
}

@media screen and (max-width: 1024px) {

  .table-responsive .table.row-tbl.type2 tbody th,
  .table-responsive .table.row-tbl.type2 tbody td {
    padding: 25px 30px;
  }
}

@media screen and (max-width: 767px) {

  .table-responsive .table.row-tbl.type2 tbody th,
  .table-responsive .table.row-tbl.type2 tbody td {
    padding: 20px;
  }
}

.table-responsive .table a[class^="link-"] {
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
}

.table-responsive .table a[class^="link-"].new,
.table-responsive .table span[class^="link-"].new {
  position: relative;
  padding-right: 20px;
}

.table-responsive .table span[class^="link-"].new::after,
.table-responsive .table a[class^="link-"].new::after {
  content: 'N';
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  background: #a02013;
  color: var(--colorF);
  border-radius: 5px;
  margin-top: -8px;
  font-family: sans-serif;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
}

.table-responsive .table a[class^="link-"].file {
  position: relative;
  padding-right: 20px;
}

.table-responsive .table a[class^="link-"].file::before {
  content: ' ';
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url("/kpopenglish/images/icon/icon-clip.png") center no-repeat;
}

.table-responsive .table a[class^="link-"].new.file {
  padding-right: 40px;
}

.table-responsive .table a[class^="link-"].new.file::before {
  right: 20px;
}

.table-responsive .table .alert {
  margin-top: 5px;
  font-size: 14px;
  line-height: 22px;

  color: #555;
}

@media screen and (max-width: 767px) {
  .table-responsive .table .alert {
    font-size: 13px;
  }
}

.table-responsive .table .essen::after {
  content: '*';
  display: inline-block;
  color: #ff0000;
  margin-left: 4px;
}



.table-responsive::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  display: block;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: var(--theme2);
  border-radius: 100px;
}

.table-responsive::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 50px;
  background: #ccc;
}

.gray-bg {
  background: #F1F1F5;
}


.table-responsive .table.row-tbl tbody .form-control {
  position: relative;
  display: block;
  width: 100%;
  min-height: 45px;
  height: 45px;
  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);
}

@media screen and (max-width: 1024px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  .table-responsive .table th,
  .table-responsive .table td {
    white-space: nowrap;
  }

  .table-responsive .table a[class^="link-"] {
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
  }



  .m-yellow-bg-box {
    padding: 0px 20px;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    background: #FFF1E6;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    gap: 10px;
  }

  .m-yellow-bg-box.left {
    justify-content: flex-start;
  }

  .m-yellow-bg-box.right {
    justify-content: flex-end;
  }

}

@media screen and (max-width: 1024px) {
  .table-responsive .table th {
    font-size: 14px;
  }

  .m-gray-bg-box {
    padding: 0px 20px;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    background: #F1F1F5;
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
    gap: 10px;
  }

  .m-gray-bg-box.center {
    justify-content: center;
  }

  .m-gray-bg-box.left {
    justify-content: flex-start;
  }

  .m-gray-bg-box.right {
    justify-content: flex-end;
  }

  .m-gray-bg-box .total-amount {
    padding: 0;
  }

}


.custom-select {
  position: relative;
  user-select: none;
  width: 100%;
}

.select-selected {
  background-color: white;
  border: 1px solid var(--gray);
  padding: 8px 30px 8px 8px;
  cursor: pointer;
  position: relative;
  user-select: none;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.select-selected::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333;
  /* 화살표 색 */
  transform: translateY(-50%);
  pointer-events: none;
  /* 클릭 이벤트 방해 안함 */
}


.select-items {
  position: absolute;
  top: 0;
  background-color: white;
  border: 1px solid var(--gray);
  width: 100%;
  max-height: 120px;
  overflow-y: auto;
  display: none;
  z-index: 99;
  border-radius: 5px;
}

.select-items div {
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.color-box {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 1px solid #ccc;
}

.color-box.red {
  background: #fe4230;
}

.color-box.blue {
  background: #2a5ef7;
}

.color-box.yellow {
  background: #feb830;
}

.color-box.green {
  background: #59b74e;
}

/* 판매합계 */
.totalSales td {
  background: var(--theme2) !important;
  color: var(--colorF) !important;
}

/* 입금합계 */
.totalDeposit td {
  background: var(--theme) !important;
  color: var(--colorF) !important;
}

/* 입금합계2 */
.totalDeposit2 td {
  background: var(--theme2) !important;
  color: var(--colorF) !important;
}

.select-items div:hover {
  background-color: #f1f1f1;
}

.delete-btn {
  text-align: center;
  margin: 0 auto;
  display: block;
}



/* 테이블 대체  : 모바일폼 */
.tbl-alt {
  position: relative;
}

.tbl-alt ul {
  position: relative;
}

.tbl-alt ul li {
  margin-bottom: 20px;
  white-space: nowrap;
  overflow-x: auto;
}

.tbl-alt ul li::-webkit-scrollbar {
  display: none;
}

.tbl-alt ul li p {
  margin-bottom: 10px;
  color: #505050;
}




/* pc  테이블 대체  : 테이블 모바일 폼 */
.tbl-list {
  position: relative;
}

.tbl-list .tbl-list-item {
  position: relative;
  border: solid 1px var(--color1);
  border-width: 1px 0;
  padding: 15px 5px;
  gap: 10px;
}

.tbl-list .tbl-list-item>.d-flex,
.tbl-list .tbl-list-item .chk-wrap {
  gap: 10px;
  display: flex;
  align-items: flex-start;
  width: 100%;
}



.tbl-list-detail {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  overflow: hidden;
}

.tbl-list-detail2 {
  position: relative;
  margin-top: 10px;
  display: flex;
  width: 100%;
  overflow: hidden;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.tbl-list-detail2 ul {
  margin-top: 0 !important;
}


.tbl-list-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  align-items: flex-start;
}

.tbl-list-title span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  font-weight: bold;
  font-size: 18px;
  margin-right: 5px;
}

.tbl-list-title input {
  top: 0;
}

.tbl-list-title label {
  padding-left: 20px !important;
}


.tbl-list-title label::before {
  border: solid 1px blue;
}

.tbl-list-item img {
  max-width: 90px;
  aspect-ratio: 1 / 1;
}

.tbl-list ul {
  position: relative;
  margin-top: 20px;
}

.tbl-list ul li {
  position: relative;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow-x: auto;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.tbl-list ul li::-webkit-scrollbar {
  display: none;
}

.tbl-list ul li>p {
  position: relative;
  min-width: 85px;
  color: var(--color7);
  font-size: 15px;
  font-weight: 400;
}

.tbl-list ul li p::after {
  content: ' ';
  position: absolute;
  right: 0;
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 12px;
  margin: 0 15px;
  background: var(--color1);
}



.tbl-list-state {
  white-space: nowrap;
}

@media screen and (max-width: 520px) {
  .tbl-list-title span {
    font-size: 16px;
  }

  .tbl-list-detail2 {
    font-size: 14px;
  }

  .tbl-list-detail2 .desc {
    margin-bottom: 10px;
  }

}


.discount-price {
  text-decoration: line-through;
  margin: 0;
}


h3.h3-title,
.h3-title.h3 {
  margin-bottom: 0.5rem;
  font-size: 20px;
  font-weight: bold;
}

.estimate_container {
  margin-top: 20px;
  border-top: solid 2px var(--colorB);
}


.estimate_title .logo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.estimate_title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: solid 2px #F1F1F5;
  margin-bottom: 20px;
}

.estimate_title ul li {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  line-height: 1.5;
  gap: 10px;
  color: #767676;
  font-size: 16px;
}


.estimate_content h2 {
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
  color: #505050;
  margin-bottom: 5px;
}

.estimate_body .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: solid 1px #111;
}

.estimate_body .table {
  --bs-table-bg: transparent;
  --bs-table-striped-color: #333;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: #333;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #333;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 0;
  color: #333;
  vertical-align: top;
  border-color: var(--colorD);
  min-width: 200px;
  border-collapse: collapse;
  /* 테이블 셀 경계가 겹치지 않도록 설정 */
}

.estimate_body .table-bordered> :not(caption)>*>* {
  padding: 10px 5px;
  background-color: var(--bs-table-bg);
  border-bottom: 1px solid var(--colorD);
  /* 테두리 적용 */
  vertical-align: middle;
}

.estimate_body .table-bordered> :not(caption)>*>*.d-flex {
  border: 0;
  border-bottom: solid 1px var(--colorD);
}

.estimate_body .table th {
  background: #F7F7FB;
  font-size: 16px;
  font-weight: 500;
  border-right: solid 1px #e9e9e9;
  white-space: nowrap;
  height: 52px;
  padding: 0.5rem 1.5rem;
  vertical-align: middle;
  border-bottom-color: currentColor;
}

.estimate_body .table>thead {
  vertical-align: bottom;
}

.d-flex .justify-content-sm-between {
  justify-content: space-between !important;
}

.estimate_body thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

.estimate_body .table> :not(caption)>*>* {
  background-color: transparent;
  border-bottom-width: 1px;
}

.estimate_body .table> :not(:last-child)> :last-child>* {
  border-bottom-color: currentColor;
}


.estimate_bottom {
  margin-top: 20px;
}

.estimate_bottom ul {
  display: flex;
  position: relative;
  justify-content: flex-end;
}

.estimate_bottom ul li {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  min-height: 22px;
  font-size: 20px;
  line-height: 18px;
  font-weight: bold;
  color: #111;
}

.estimate_bottom ul li::after {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  width: 2px;
  height: 14px;
  margin: 0 10px;
  background: var(--color1);
}

.stamp_inner {
  max-width: 260px;
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}



@media screen and (max-width: 767px) {
  .estimate_bottom ul {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .estimate_bottom ul li {
    font-size: 12px;
  }

  .estimate_bottom ul li::after {
    display: none;
  }

  .estimate_bottom .stamp_inner {
    gap: 20px;
  }

  .estimate_bottom .stamp_inner h3 {
    font-size: 14px;
  }

  .estimate_bottom .stamp_inner img {
    width: 30px;
  }
}


@media screen and (max-width: 520px) {
  h3.h3-title {
    font-size: 14px;
  }

  .estimate_title {
    padding: 10px;
  }

  .estimate_title img {
    width: 60px;
  }

  .estimate_title ul li {
    font-size: 7px;
    margin-bottom: 0;
    gap: 5px;
  }

  .estimate_content h2 {
    font-size: 12px;
  }

  .estimate_content table {
    font-size: 7px;
  }

  .estimate_body .table th {
    font-size: 7pt;
    padding: 2px;
    height: auto;
  }

  .estimate_body .table td {
    padding: 2px 1px;
    font-size: 7px;
  }

}


@media screen and (max-width: 520px) {
  .tbl-list ul li div strong {
    font-size: 18px;
    color: var(--red);
  }

  .tbl-list ul li {
    font-size: 13px;
  }

  .tbl-list ul li p {
    font-size: 13px;
  }

  .tbl-list ul li em {
    font-size: 12px;
    color: var(--theme2);
    margin-left: 5px;
  }

  .tbl-list ul li p.discount-price {
    margin-right: 10px;
  }
}

/* 기본 스타일 제거 */
.custom-label input[type="checkbox"] {
  appearance: none;
  /* 기본 체크박스 제거 */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--colorD);
  background: var(--colorF);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

/* 체크된 상태 */
.custom-label input[type="checkbox"]:checked {
  background: var(--theme);
  border-color: var(--theme);
  animation: rubberBand 0.5s ease-in-out;
}

.custom-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--colorF, #fff);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  animation: rubberBand2 0.5s ease-in-out;
}

.table-responsive .chk-wrap.all {
  background: none;
  padding: 0;
  border: none;
}

.modal-body .table-responsive {
  position: relative;
  height: 50vh;
  overflow: hidden;
  overflow-y: scroll;
}

.modal-body .table-responsive .descWrap {
  max-width: 200px;
}


.modal-body .table-responsive::-webkit-scrollbar {
  display: block !important;
  /* 스크롤바 표시 */
  width: 8px;
  /* 스크롤바 너비 */
}

.modal-body .table-responsive::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

.modal-body .table-responsive::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}


.column-settings {
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  z-index: 1000;
}

.column-settings .settings-list {
  max-height: 200px;
  overflow-y: auto;
}

#columnSettingsList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  align-items: center;
}

.column-settings .settings-list label,
.column-settings .settings-list a {
  display: block;
  margin: 2px 0;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: none;
  color: inherit;
}

.column-settings .settings-list label.selected {
  background: #e9ecef;
}

#columnSettingsList label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.column-settings .settings-list a:hover {
  background: #f5f5f5;
}

.column-settings .settings-footer {
  margin-top: 5px;
  text-align: right;
}

.table-wrap {
  overflow-x: visible;
  padding-right: 0;
}

/* 선택된 행 표시 - 직관적인 시각 효과 */
.table-scroll tbody tr.selected-row {
  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 {
  background-color: #b8dcff !important;
  font-weight: 500;
}

.table-scroll tbody tr.selected-row td:first-child {
  padding-left: 12px;
  /* 컬러바 공간 확보 */
}

/* 선택된 행에 hover 클래스가 있어도 선택된 배경색 유지 */
.table-scroll tbody tr.selected-row.row-hover,
.table-scroll tbody tr.selected-row.row-hover td {
  background-color: #a8d4ff !important;
}

/* 사용자 정의 배경색이 있는 행은 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에서 배경색을 설정하지 않으면 인라인 스타일이 유지됨 */

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

/* 고정선 스타일 */
.table-scroll thead th.frozen-column {
  position: sticky;
  background-color: #f5f5f5;
}

.table-scroll tbody td.frozen-column {
  position: sticky;
  background-color: #fff;
}

.table-scroll tbody tr.selected-row td.frozen-column {
  background-color: #d4edff !important;
}

/* tbody가 스크롤 컨테이너인 경우 고정선 z-index 조정 */
.popup-content-body__table .table-scroll tbody th.frozen-column,
.popup-content-body__table .table-scroll tbody td.frozen-column {
  position: sticky !important;
}

/* tbody가 스크롤 컨테이너일 때 고정선이 제대로 작동하도록 보장 */
.popup-content-body__table .table-scroll tbody {
  /* sticky positioning이 작동하도록 - contain 제거 (sticky를 방해할 수 있음) */
}

.popup-content-body__table .table-scroll tbody tr {
  /* tr이 table display일 때도 sticky가 작동하도록 */
  display: table;
  width: 100%;
  table-layout: auto;
  position: relative;
}

.popup-content-body__table .table-scroll thead tr {
  display: table;
  width: 100%;
}

/* 고정 컬럼 wrapper 스타일 */
.frozen-column-wrapper {
  box-sizing: border-box;
}

.frozen-thead-wrapper {
  top: 0;
  border-bottom: 1px solid #ddd;
}

.frozen-row-wrapper {
  border-right: 1px solid #ddd;
}

.frozen-column-wrapper .frozen-column {
  border-right: 1px solid #ddd;
  padding: 4px 6px;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frozen-column-wrapper .frozen-column:last-child {
  border-right: 2px solid #0066cc;
}

.popup-content-body__table .table-scroll tbody td.frozen-column {
  background-color: #fff !important;
  z-index: 105 !important;
  will-change: transform;
}

.popup-content-body__table .table-scroll thead th.frozen-column {
  background-color: #f5f5f5 !important;
  z-index: 110 !important;
  will-change: transform;
}

/* 정렬 가능한 헤더 스타일 */
.table-scroll thead th.sortable-header {
  cursor: pointer;
  user-select: none;
}

.table-scroll thead th.sortable-header:hover {
  background-color: #e9ecef;
}

/* 테이블 스크롤 구조 변경: tbody가 스크롤 컨테이너 */
.popup-content-body__table .table-scroll {
  display: block;
}

.popup-content-body__table .table-scroll thead {
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #f8f8f8;
}

.popup-content-body__table .table-scroll thead tr {
  display: table;
}

.popup-content-body__table .table-scroll tbody tr {
  display: table;
}

/* order-table 예외 규칙: 정상적인 테이블 구조 유지 */
.popup-content-body__table .table-scroll[data-toggle="order-table"] {
  display: table !important;
  table-layout: fixed !important;
}

.popup-content-body__table .table-scroll[data-toggle="order-table"] thead {
  display: table-header-group !important;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #f8f8f8;
}

.popup-content-body__table .table-scroll[data-toggle="order-table"] tbody {
  display: table-row-group !important;
}

.popup-content-body__table .table-scroll[data-toggle="order-table"] thead tr,
.popup-content-body__table .table-scroll[data-toggle="order-table"] tbody tr {
  display: table-row !important;
}

/* item.html, company.html의 경우 */
.popup-content-body__table-wrap .popup-content-body__table .table-scroll {
  display: block;
}

.popup-content-body__table-wrap .popup-content-body__table .table-scroll thead {
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #f8f8f8;
}

.popup-content-body__table-wrap .popup-content-body__table .table-scroll thead tr {
  display: table;
}

.popup-content-body__table-wrap .popup-content-body__table .table-scroll tbody tr {
  display: table;
}

/* index.html의 경우 필터 영역이 있으므로 JavaScript로 동적 계산 */