@charset "utf-8";
/* CSS Document */

/* 메인 ----------------------------------------- */
.main-left-mid {
  /* min-height: 732px; */
	min-height: 532px;
}

.main-left-mid-bottom table {
  width: 100%;
  position: relative;
}

.main-left-mid-bottom table tbody {
  display: block;
  /* max-height: 696px; */
	max-height: 496px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}


table tbody:hover {
  scrollbar-width: auto;
}

/* 주문이력 */
.main-right-order-history-bottom table tbody {
  display: block;
	/* max-height: 176px; */
	max-height: 130px;
  overflow-y: scroll;
	overflow-x: hidden;
}

/* 장바구니 --------------------------------------------- */
.main-right-cart-mid {
  /* height: 356px; */
  /*height: 256px;*/
  height: 302px;
  width: 100%;
  border: 1px solid #dadcde;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}

	.main-right-cart-mid table tbody {
	  display: block;
	  /* max-height: 320px; */
	  /*max-height: 220px;*/
	  max-height: 266px;
	  overflow-y: scroll; overflow-x: hidden;
	}

	.main-right-order-history-bottom tbody {
	  position: relative;
	  scrollbar-width: none;
	}

	.main-right-cart-mid tbody {
	  position: relative;
	  scrollbar-width: none;
	}

	.main-right-order-history-bottom tbody:hover {
	  scrollbar-width: auto;
	}

	.main-right-cart-mid tbody:hover {
	  scrollbar-width: auto;
	}

	.main-left-mid-bottom table tbody:hover,
	.main-right-order-history-bottom table tbody:hover,
	.main-right-cart-mid table tbody:hover {
	  overflow-y: scroll;
	}

.main-left-mid-bottom table thead,
.main-left-mid-bottom table tbody tr {
  display: table;
  width: 100%;
}

.main-left-mid-bottom table tbody tr {
  white-space: nowrap;
}

td button.delete {
  position: relative;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #f85f51;
  box-shadow: 0px 1px 0px #0000001a;
  /*vertical-align: sub;*/
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  padding: 0;
  display: inline-flex; /* inline-flex로 변경 */
  align-items: center;
  justify-content: center;
  vertical-align: middle; /* 수직 중앙 정렬 */

}

td button.delete:hover {
  background-color: #f85f51;
  box-shadow: 0px 4px 8px rgba(248, 95, 81, 0.5);
}

td button.delete .ic-minus {
  position: relative;
  width: 10px;
  height: 2px;
  background-color: #f85e50;
  border-radius: 1000px;
  /*margin-left: 6px;*/
}

td button.delete:hover div {
  background-color: #ffffff;
  transition: background-color 0.3s ease-in-out;
}

td button.delete:hover .ic-minus {
  background-color: #ffffff; /* 호버 시 마이너스 아이콘 색상 변경 */
}

td button.delete:active {
  transform: scale(1.05);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}

/* 클릭 시 버튼이 눌리는 효과 */
.main-left-top {
  display: flex;
  justify-content: space-between;
}

.main-left-top .main-left-top-left button {
  background-color: #f0f2f4;
  border: 1px solid #e4e7e9;
  border-radius: 8px;
  padding: 10px 0px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #606162;
  height: 40px;
}

.main-left-top .main-left-top-left button.active {
  background-color: #f8b428;
  border: 1px solid #ebac27;
  color: #ffffff;
  font-weight: 700;
}

.main-left-top .main-left-top-left button:hover {
  background-color: #747474;
  border: 1px solid #e4e7e9;
  color: #ffffff;
  font-weight: 700;
}

.star {
  margin-left: 4px;
}

.main-left-top .main-left-top-left button div {
  background-image: url(/img/Btn_Star_Off.png);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
  display: inline-block;
  vertical-align: top;
}

.main-left-top .main-left-top-left button.active div {
  background-image: url(/img/Btn_Star_On.png);

}

.main-left-top .main-left-top-left button.favorite div {
  background-image: url(/img/yellow_star.png);

}

.main-left-top .main-left-top-right {
  display: flex;
  gap: 12px;
}

.main-left-top .main-left-top-right span {
  font-size: 12px;
  color: #6c6f72;
}

.main-left-top .main-left-top-right span div {
  display: inline-block;
  width: 17px;
  height: 17px;
  font-size: 10px;
  color: #ffffff;
  font-weight: 500;
  border-radius: 4px;
  text-align: center;
  align-content: center;
}

div.blue-mini-box {
  display: inline-block;
  color: #ffffff;
  background-color: #4b96f0;
  border: 1px solid #4588da;
}

div.green-mini-box {
  color: #ffffff;
  display: inline-block;
  background-color: #8ecc58;
  border: 1px solid #81b951;
}

div.orange-mini-box {
  color: #ffffff;
  display: inline-block;
  background-color: #eaa03c;
  border: 1px solid #d49138;
}

div.gray-mini-box {
  color: #ffffff;
  display: inline-block;
  background-color: #b4b4b4;
  border: 1px solid #a3a3a4;
}

.main-left-top .main-left-top-right span div.blue-mini-box {
  background-color: #4b96f0;
  border: 1px solid #4588da;
}

.main-left-top .main-left-top-right span div.green-mini-box {
  background-color: #8ecc58;
  border: 1px solid #81b951;
}

.main-left-top .main-left-top-right span div.orange-mini-box {
  background-color: #eaa03c;
  border: 1px solid #d49138;
}

.main-left-top .main-left-top-right span div.gray-mini-box {
  background-color: #b4b4b4;
  border: 1px solid #a3a3a4;
}

.main-left-mid-top {
  margin-top: 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

.main-left-mid-top-left {
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  color: #3b3f43;
}

.main-left-mid-top-right {
  font-size: 13px;
  font-weight: 400;
  color: #9d9fa1;
}

.main-left-mid-top-right img {
  vertical-align: text-top;
}

.main-left-mid-top-right button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6c6f72;
}

.mgl10 {
  margin-left: 10px;
}

.main-left-mid-top-right button.active {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #3b3f43;
  font-weight: 700;
}

/**********************************************************************************************************************/
.main-left-mid-bottom {
	border: 1px solid #dadcde;
	border-radius: 8px;
	overflow: hidden;
	height: 532px;
}

	/* 검색결과 테이블 ----------------------------------------------------- */
	.main-left-mid-bottom table {
	  max-height: 532px;
	}

	.main-left-mid-bottom table thead tr th {
	  background-color: #f6f8fa;
	  font-size: 13px;
	  font-weight: 600;
	  padding: 10px 20px;
	  height: 36px;
	  color: #0a0f1480;
	  vertical-align: middle; /* 수직 중앙 정렬 */
	}

	.main-left-mid-bottom table tbody tr td,
	.main-left-mid-bottom table thead tr th {
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	/*추가버튼에 대해서만 해제*/
	.main-left-mid-bottom table tbody tr td:nth-child(10) {
	  text-overflow: initial;  /* 또는 text-overflow: clip; */
	}

	.main-left-mid-bottom table tbody:hover tr td:nth-child(10) {
	  text-overflow: initial;
	  overflow: visible;
	}

	.main-left-mid-bottom table tbody tr:hover {
	  background-color: #f8f9fa;
	}

	.main-left-mid-bottom table tbody tr.active {
	  background-color: #f4f6ff;
	}

	.main-left-mid-bottom table tbody tr td {
	  font-size: 14px;
	  font-weight: 400;
	  padding-left: 20px;
	  padding-right: 20px;
	  color: #0a0f14;
	  height: 44px;
	  align-content: center;
	  vertical-align: middle;
	}

	.main-left-mid-bottom table tbody tr td:first-child,
	.main-left-mid-bottom table thead tr th:first-child {
	  /*TODO: max-width 보험코드에 적용?*/
	  max-width: 116px;
	  width: 116px;
	  text-align: left;
	}
	.main-left-mid-bottom table tbody tr td:first-child { font-size: 12px; }

	.main-left-mid-bottom table tbody tr td:nth-child(2),
	.main-left-mid-bottom table thead tr th:nth-child(2) {
	  max-width: 100px;
	  width: 100px;
	  text-align: left;
	  padding-left:0;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(3),
	.main-left-mid-bottom table thead tr th:nth-child(3) {
	  max-width: 178px;
	  width: 178px;
	  text-align: left;
	  cursor: pointer;
	  white-space: normal; /* 줄바꿈 허용 */
	  -webkit-line-clamp: 2; /* 최대 2줄 제한 */
	  -webkit-box-orient: vertical;
	  text-overflow: ellipsis; /* 2줄을 초과하면 말줄임표 표시 */
	  padding-left:0;
	}

	.main-left-mid-bottom table tbody tr:hover td:nth-child(3) { font-weight: 700; color: #000; transition: all 0.3s ease-in-out; }

	.main-left-mid-bottom table tbody tr td:nth-child(4) {
		max-width: 95px;
		width: 95px;
		padding-left: 0;
		padding-right: 0;
		text-align: left;
		white-space: normal; /* 자동 줄바꿈 허용 */
		word-wrap: break-word; /* 긴 단어도 줄바꿈 */
		overflow-wrap: break-word; /* 추가적인 줄바꿈 지원 */
		font-size: 12px;
	}

	.main-left-mid-bottom table thead tr th:nth-child(4) {
	  max-width: 95px;
	  width: 95px;
	  padding-left: 0;
	  padding-right: 0;
	  text-align: left;
	}
	.main-left-mid-bottom table tbody tr td:nth-child(5) {
	  max-width: 55px;
	  width: 55px;
	  text-align: center;
	  padding-left: 0;
	  padding-right: 0;
	}

	.main-left-mid-bottom table thead tr th:nth-child(5) {
	  max-width: 55px;
	  width: 55px;
	  text-align: left;
	  padding-left: 5px;
	  padding-right: 0;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(5) div.box-wrap {
	  justify-content: right;
	  display: flex;
	  width: 44px;
	  gap: 2px;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(5) div {
	  width: 20px;
	  height: 20px;
	  text-align: center;
	  align-content: center;
	  border-radius: 4px;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(6) {
	  width: 70px;
	  text-align: right;
	  padding-left: 0;
	  padding-right: 0;
	}
	.main-left-mid-bottom table tbody tr td:nth-child(6) img { margin-left: 1px; }

	.main-left-mid-bottom table thead tr th:nth-child(6) {
	  max-width: 70px;
	  width: 70px;
	  text-align: right;
	  padding-left: 15px;
	  padding-right: 0;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(7),
	.main-left-mid-bottom table thead tr th:nth-child(7) {
	  max-width: 63px;
	  width: 63px;
	  text-align: right;
	  padding-left: 0;
	  padding-right: 8px;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(7) {
	  font-weight: 700;
	}
	.main-left-mid-bottom table tbody tr td:nth-child(7) img { margin-left: 0.5px; }

	.main-left-mid-bottom table tbody tr td:nth-child(7) button.empty-btn {
	  width: 52px;
	  height: 22px;
	  background: #ffeeec;
	  border: 1px solid #e7d8d7;
	  color: #f85f51;
	  font-size: 12px;
	  font-weight: 700;
	  text-align: center;
	  border-radius: 6px;
	  padding: 0;
	  margin-right: -6px;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(8),
	.main-left-mid-bottom table thead tr th:nth-child(8) {
	  max-width: 50px;
	  width: 50px;
	  text-align: center;
	  padding-left: 0;
	  padding-right: 0;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(9),
	.main-left-mid-bottom table thead tr th:nth-child(9) {
	  max-width: 48px;
	  width: 48px;
	  text-align: center;
	  padding-left: 0;
	  padding-right: 0;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(9) {
	  padding-left: 10px;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(10),
	.main-left-mid-bottom table thead tr th:nth-child(10) {
	  width: 50px;
	  text-align: center;
	  padding-left: 0;
	  padding-right: 0;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(11),
	.main-left-mid-bottom table thead tr th:nth-child(11) {
	  text-align: left;
	  padding-left: 0;
	  padding-right: 0;
	  position: relative;
	}

	.main-left-mid-bottom table thead tr th:nth-child(11) {
	  padding-left: 12px;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(11) {
	  padding-right: 15px;
	  text-align: left;
	}

	.main-left-mid-bottom table tbody:hover tr td:nth-child(11) {
	  padding-right: 0;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(11) button {
	  background-color: #ffffff;
	  border-radius: 1000px;
	  border: 1px solid #c8cacc;
	  width: 48px;
	  height: 30px;
	  cursor: pointer;
	  box-shadow: 0px 1px 0px #0000001a;
	  transition: all 0.3s ease-in-out;
	}

	/* 기본 hover 상태 */
	.main-left-mid-bottom table tbody tr td:nth-child(11) button:hover {
	  background-color: #374173;
	  color: #ffffff;
	  box-shadow: 0px 4px 10px rgba(55, 65, 119, 0.4);
	}

	/* active 클래스가 있을 때 */
	.main-left-mid-bottom table tbody tr.active td:nth-child(11) button {
	  background-color: #ffffff;
	  color: #374173;
	}

	/* active 상태에서 hover될 때 */
	.main-left-mid-bottom table tbody tr.active td:nth-child(11) button:hover {
	  background-color: #374173;
	  color: #ffffff;
	}

	.main-left-mid-bottom table::-webkit-scrollbar {
	  z-index: -1;
	}

	.main-left-mid-bottom table tbody tr td:nth-child(11)::after {
	  content: "";
	  position: absolute;
	  height: 1px;
	  width: 15px;
	  background-color: #000;
	  right: -15px;
	  top: -1px;
	  z-index: 1000;
	}

	.main-left-mid-bottom table tr {
	  border-top: 1px solid #dcdee0;
	}

	.main-left-mid-bottom table tr:first-child {
	  border-top: none;
	}

	.main-left-mid-bottom table tr:last-child {
	  border-bottom: 1px solid #dcdee0;
	}

	div.star-icon {
	  background-image: url(/img/_Btn_Favorite_OFF.png);
	  width: 24px;
	  height: 24px;
	  background-position: center;
	  background-size: contain;
	  background-repeat: no-repeat;
	  cursor: pointer;
	}
	.main-left-mid-bottom table tbody tr td input[type="text"] {
	  width: 42px;
	  height: 30px;
	  border-radius: 6px;
	  border: 1px solid #b4b6b8;
	  text-align: center;
	}

/**********************************************************************************************************************/
.favorite div.star-icon, div.star-icon:hover {
  background-image: url(/img/_Btn_Favorite_ON.png);
  width: 24px;
  height: 24px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}



.main-left-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.main-left-bottom select {
  width: 74px;
  height: 32px;
  padding-left: 8px;
  border-radius: 6px;
  border: 1px solid #C8CACC;
}

.custom-select {
  position: relative;
  font-size: 1.15rem;
  width: 74px;
  height: 32px;
}

.custom-select select {
  appearance: none;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
  position: absolute;
}

.custom-select::after {
  content: '';
  width: 14px;
  height: 16.5px;
  background-image: url(/img/ic-arrow-down.svg);
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  pointer-events: none;
}

.custom-select select:hover,
.custom-select select:focus {
  /*border-color: #007bff;*/
  border-color: #374173;
  outline: none;
  box-shadow: 0 0 0 2px rgba(55, 65, 115, 0.25);
}

.main-left-bottom button {
  background-color: #ffffff;
  border: 1px solid #c8cacc;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  width: 74px;
  height: 32px;
  cursor: pointer;
}

.main-right-order-history-top {
  display: flex;
}


div.wrapper .inner .main .main-right .main-right-cart .main-right-cart-top,
.main-right-order-history-top h1 {
  color: #0a0f14;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  margin-right: 34px;
}
.main-right-cart-top span.req-next-month { float: right; font-size: 14px; }

.main-right-order-history-top h1::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -19px;
  width: 2px;
  height: 12px;
  background-color: #dcdee0;
}

.main-right-order-history-top div {
  font-size: 15px;
  color: #6c6f72;
  font-weight: 600;
  line-height: 19px;
}

.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

/* 주문 이력 테이블 */
.main-right-order-history-bottom {
  width: 427px;
  	/* height: 212px; */
	height: 166px;
  border: 1px solid #dadcde;
  border-radius: 8px;
  overflow: auto;
  margin-top: 12px;
}

.main-right-order-history-bottom table {
  width: 627px; /* 427px */
  table-layout: fixed; /* 테이블 레이아웃 고정 */
}

.main-right-order-history-bottom table tr {
  border-top: 1px solid #dcdee0;
}

.main-right-order-history-bottom table tr:first-child {
  border-top: none;
}

.main-right-order-history-bottom table tr:last-child {
  border-bottom: 1px solid #dcdee0;
}

.main-right-order-history-bottom table tr td,
.main-right-order-history-bottom table tr th {
  text-align: center;
}

/*.main-right-order-history-bottom table thead tr {*/
/*  height: 36px; !* 헤더 높이 고정 *!*/
/*  display: table-row;*/
/*}*/
.main-right-order-history-bottom table thead tr {
  height: 36px!important;
  line-height: 36px;
}

.main-right-order-history-bottom table tbody tr {
  height: 44px !important; /* !important로 우선순위 부여 */
  line-height: 44px;
}

.main-right-order-history-bottom table thead tr th {
  /* font-family: "Pretendard-SemiBold", Helvetica, sans-serif; */
  background-color: #f6f8fa;
  font-size: 13px;
  font-weight: 600;
  padding: 0 20px; /* 좌우 패딩만 유지 */
  border-bottom: 1px solid #dcdee0;
  vertical-align: middle;
  color: #0a0f1480;
}

.main-right-order-history-bottom table thead,
.main-right-order-history-bottom table tbody tr {
  display: table;
  width: 627px; /* 427 */
  table-layout: fixed;
}

.main-right-order-history-bottom table tbody tr td {
  font-size: 14px;
  font-weight: 400;
  height: 44px;
  line-height: 44px;
  padding: 0 20px; /* 좌우 패딩만 유지 */
  vertical-align: middle;
}

.main-right-order-history-bottom table tbody tr td:first-child,
.main-right-order-history-bottom table thead tr th:first-child {
  width: 140px;
  text-align: left;
}

.main-right-order-history-bottom table tbody tr td:nth-child(2),
.main-right-order-history-bottom table thead tr th:nth-child(2) {
  width: 70px;
	text-align: right;
}

.main-right-order-history-bottom table tbody tr td:nth-child(3),
.main-right-order-history-bottom table thead tr th:nth-child(3) {
  width: 114px; text-align: right;
}

.main-right-order-history-bottom table tbody tr td:nth-child(4) {
  padding: 0;
  padding-right: 20px;
  text-align: right;
}

.main-right-order-history-bottom table thead tr th:nth-child(4) {
  text-align: right;
  padding-left: 12px;
}

/**********************************************************************************************************************/

.main-right-cart-mid table thead tr th {
  /* font-family: "Pretendard-SemiBold", Helvetica, sans-serif; */
  background-color: #f6f8fa;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #dcdee0;
  color: #0a0f1480;
  height: 36px;
  line-height: 36px;
}

.main-right-cart-mid table thead, .main-right-cart-mid table tbody tr {
  display: table;
  width: 100%;
}

.main-right-cart-mid table, .main-right-cart-mid table tbody {
  width: 100%;
}

.main-right-cart-mid table thead tr th:first-child,
.main-right-cart-mid table tbody tr td:first-child {
  width: 50px; /* 삭제 버튼의 크기를 적절히 조정 */
  text-align: center; /* 가운데 정렬 */
  padding-left: 20px;
  padding-right: 0;
  min-width: 50px;
}

.main-right-cart-mid table tbody tr td {
  line-height: 44px;
  height: 44px;
  padding-left: 20px;
  font-size: 14px;
}

/*.main-right-cart-mid table tbody tr td:first-child {*/
/*  width: 220px;*/
/*}*/

/*.main-right-cart-mid table thead tr th:first-child {*/
/*  width: 220px;*/
/*}*/

.main-right-cart-mid table tbody tr td {
  line-height: 16px;
  height: 44px;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 400;
  vertical-align: middle; /* 수직 중앙 정렬 */
  display: table-cell; /* 명시적으로 table-cell 지정 */
}

.main-right-cart-mid table tbody tr td input {
  width: 42px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #b4b6b8;
  text-align: right;
  vertical-align: middle; /* 수직 중앙 정렬 */
}

/*.main-right-cart-mid table thead tr th:nth-child(2) {*/
/*  text-align: left;*/
/*  padding-left: 9px;*/
/*  width: 51px;*/
/*}*/

/*.main-right-cart-mid table tbody tr td:nth-child(2) {*/
/*  padding-left: 0;*/
/*  width: 51px;*/
/*}*/

/* 제품명 위치 조정 */
.main-right-cart-mid table thead tr th:nth-child(2),
.main-right-cart-mid table tbody tr td:nth-child(2) {
  width: 200px; /* 제품명 칸 크기 조정 */
  text-align: left;
  padding-left: 20px;
}

/*.main-right-cart-mid table thead tr th:nth-child(3) {*/
/*  text-align: right;*/
/*  padding-left: 32px;*/
/*  width: 75px;*/
/*}*/

/*.main-right-cart-mid table tbody tr td:nth-child(3) {*/
/*  !*TODO max-width 고민*!*/
/*  width: 77px; text-align: right; max-width: 77px;*/
/*}*/

/* 수량 및 단가 위치 유지 */
.main-right-cart-mid table thead tr th:nth-child(3),
.main-right-cart-mid table tbody tr td:nth-child(3) {
  width: 75px;
  text-align: center;
  padding-left: 20px;
}

/*.main-right-cart-mid table tbody tr td:nth-child(4) {*/

/*  text-align: left;*/
/*  padding-left: 36px;*/
/*}*/

.main-right-cart-mid table thead tr th:nth-child(4),
.main-right-cart-mid table tbody tr td:nth-child(4) {
  /*width: 80px;*/
  text-align: left;
  padding-left: 20px;
}


.main-right-cart-mid table tr {
  border-bottom: 1px solid #dcdee0;
}

.main-right-cart-bottom {
  margin-top: 20px;
  display: flex;

  height: 44px;
  width: 100%;
  gap: 8px;
}

.main-right-cart-bottom .result {
  padding: 10px 20px;
  display: flex;
  width: 269px;
  height: 100%;
  background-color: #F6F8FA;
  border-radius: 8px;
  border: 1px solid #e9ecee;
  justify-content: space-between;
}

.result-left {
  color: #808387;
  font-weight: 600;
  line-height: 22px;
  font-size: 15px;
}

.result-right {
  font-size: 14px;
  color: #808387;
}

.result-right span {
  font-size: 20px;
  font-weight: 700;
  color: #0A0F14;
  margin-right: 2px;
}

.main-right-cart-bottom button {
  width: 150px;
  height: 100%;
  background-color: #374173;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/*TODO maybe 제거?*/
/* 호버 효과 */
.main-right-cart-bottom button:hover {
  background-color: #444f8a; /* 기존 색상보다 약간 밝게 */
  box-shadow: 0 4px 8px rgba(55, 65, 115, 0.2); /* 은은한 그림자 */
  transform: translateY(-1px); /* 살짝 떠오르는 효과 */
}

/* 클릭 효과 */
.main-right-cart-bottom button:active {
  background-color: #2f3660; /* 기존 색상보다 약간 어둡게 */
  box-shadow: 0 2px 4px rgba(55, 65, 115, 0.1); /* 그림자 줄이기 */
  transform: translateY(1px); /* 살짝 눌리는 효과 */
}



/* 상세보기 모달 -------------------------------------------------------------- */
.main-left-modal {
  background-color: white;
  width: 957px;
  height: 295px;
  position: absolute;
  bottom: -88px;
  left: 0;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #CECFD0;
  display: none;
	z-index: 111;
}
	.main-left-modal:hover { border-color: #AAA; box-shadow: 0 0 4px #999; }

.main-left-modal.show {
  display: block;
  z-index: 222;
}

.main-left-modal h1 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #0A0F14;
} .main-left-modal h1:hover { cursor: pointer; }

.main-left-modal-content {
  display: flex;
  gap: 8px;
}

.main-left-modal-content-left {
  width: 216px;
  height: 216px;
} .main-left-modal-content-left:hover { cursor: pointer; }

.main-left-modal-content-left img {
  width: 216px;
  height: 216px;
  object-fit: contain;
  aspect-ratio: 1/1;
  border-radius: 8px;
  border: 1px solid #DADCDE;
}

.main-left-modal-content-right {
  border-radius: 8px;
  border: 1px solid #DADCDE;
  width: 685px;
  height: 216px;
  overflow: hidden;
  display: flex;

}

/**********************************************************************************************************************/
.main-left-modal-content-right table {
  width: 100%;
  height: 100%;
}

.main-left-modal-content-right table tr {
  border-top: 1px solid #DCDEE0;

}

.main-left-modal-content-right table tr td {
  padding-left: 8px;
  padding-right: 8px;
  height: 36px;
  padding-top: 10px;
  border-left: 1px solid #DCDEE0;
  font-size: 13px;
}

.main-left-modal-content-right table tr td.subject {

  background-color: #F6F8FA;
}

.main-left-modal-content-right table tr td:first-child {
  width: 88px;
  background-color: #F6F8FA;
  border-left: none;
}

.main-left-modal-content-right table tr td:nth-child(2) {
  width: 125px;

}

.main-left-modal-content-right table tr td:nth-child(3) {
  width: 88px;
  background-color: #F6F8FA;

}

.main-left-modal-content-right table tr td:nth-child(4) {
  width: 125px;

}

.main-left-modal-content-right table tr td:nth-child(5) {
  width: 258px;

}

.main-left-modal-content-right table tr:first-child {
  border-top: none;
}

.spacebtwn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content .spacebtwn { margin-top: 8px !important; }
.spacebtwn strong { margin-top: -8px; }

.spacebtwn span {
  font-size: 13px;
}

.main-left-modal-content-right .flex-box {
  display: flex;
  border-bottom: 1px solid #DCDEE0;
	height: 36px;
  /*box-sizing: border-box;*/
}

.main-left-modal-content-right .subject {

  background-color: #F6F8FA;
}

.main-left-modal-content-right .flex-box div.subject {
  width: 88px;
  height: 36px;
  line-height: 36px;
  background-color: #F6F8FA;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 13px;
	border-bottom: 1px solid #DCDEE0;
}

.main-left-modal-content-right .flex-box div.content {
  width: 125px;
  height: 36px;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 35px;
  border-left: 1px solid #DCDEE0;
  border-right: 1px solid #DCDEE0;
  font-size: 13px;
	overflow: auto;
}

.main-left-modal-content-right .flex-box div.content div { margin-top: 6px; }

.main-left-modal-content-right div.subject2 {
  width: 258px;
  height: 36px;
  font-size: 13px;
  line-height: 36px;
  padding-left: 8px;
  padding-right: 8px;
  background-color: #F6F8FA;
  border-bottom: 1px solid #DCDEE0;
}

.main-left-modal-content-right div.content2 {
  width: 258px;
  height: 72px;
  font-size: 13px;
  padding-left: 8px;
  padding-right: 8px;
  border-bottom: 1px solid #DCDEE0;
	overflow-y: auto;
}

.main-left-modal-content-right div.content2 .spacebtwn span {
  margin-top: 4px;
  line-height: 16px;
}

.main-left-modal-content-right div.content2 .spacebtwn button {
  margin-top: 20px;
}

.main-left-modal-content-right-left {
  width: 427px;
  height: 216px;
  /*border-right: 1px solid #DCDEE0;*/
}

/*111111111111111111111111111111111111111*/
.main-left-modal-content-right button {
  background-color: #ffffff;
  border: 1px solid #C8CACC;
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
}

button.search-btn2 {
  width: 77px !important;
  padding: 5px;
}

button.search-btn-same {
  width: 77px !important;
  padding: 5px;
	float: right; margin: 4px -2px 0 0;
} button.search-btn-same:hover { border-color: #666; box-shadow: 0 0 4px #999; }

.main-left-modal-content-right button.request {
  height: 26px;
  line-height: 25px;
  padding: 0; margin-top: -10px;
  width: 40px;
}	.main-left-modal-content-right button.request:hover { border-color: #666; box-shadow: 0 0 4px #999; }

.main-left-modal-content-right button img {
  width: 11.4px;
  height: 11.4px;
  vertical-align: middle;
  margin-right: 2px;
}

/*상세 제품 정보*/

.main-left-modal-content-right div.green-mini-box {
  width: 20px;
  height: 20px;
  text-align: center;
  align-content: center;
  border-radius: 4px;
  line-height: 20px;
}
.main-left-modal-content-right div.gray-mini-box {
  width: 20px;
  height: 20px;
  text-align: center;
  align-content: center;
  border-radius: 4px;
  line-height: 20px;
}
.main-left-modal-content-right div.blue-mini-box {
  width: 20px;
  height: 20px;
  text-align: center;
  align-content: center;
  border-radius: 4px;
  line-height: 20px;
}
.main-left-modal-content-right div.orange-mini-box {
  width: 20px;
  height: 20px;
  text-align: center;
  align-content: center;
  border-radius: 4px;
  line-height: 20px;
}


.main-left-modal-content-right strong {
  font-weight: 700;
}

.main-left-modal-content-right-right {
  width: 100%;
}

button.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  background-color: transparent;
  border: none;
  width: 24px;
  height: 24px;
  padding: 6px;
  margin: 8px;
  cursor: pointer;
} button.close-btn:hover { border-radius: 4px; border-color: #666; box-shadow: 0 0 4px #999; }

button.close-btn img {
  width: 100%;
  height: 100%;
}


/* 상품목록-상태: 약가인하 - 가격 변동 표시 기본 스타일 ----------------------------------- */
.price-change {
  font-size: 14px;
  color: #666;
}

	.price-up {
	  color: #888888; /* 인상은 더 연한 회색으로 */
	  color: #898989; /* 연한 회색 */
	}

	.price-down {
	  color: #0550F8; /* 인하는 더 밝은 파란색으로 */
	  font-weight: 700; /* 볼드처리 */
	  color: #F8B428; /* 사이트에서 사용되는 노란색/황금색 */
	  font-weight: 700;
	}
	.main-left-mid-bottom table tbody tr:has(td .price-down) {
	  background-color: #FFF8E7; /* 인하: 은은한 황금빛 배경 */
	}

/* 상품목록-상태: 위해 ----------------------------------- */
.pdstatus {
  font-size: 14px;
  color: #666;
}

	.pdstatus-danger {
	  color: #D42E00;
	  font-weight: 700;
	} 
	.pdstatus-danger:hover { transition: all 0.1s ease-in-out; border: 1px solid #D42E00; border-radius: 12px; padding: 2px 4px; }
/* ------------------------------------------------------------------- */