body {
  margin-top: 0px;
  font-family: 'Pretendard Variable';
  padding: 0px 50px 0px 50px;
  background-color: #f5f6fb;
}

.login-btn {
  cursor: pointer;
  border: none;
  padding: 10px;
  border-radius: 10px;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading Spinner */
.loading-wrap {
  position: absolute;
  background-color: #FFFFFF;
  width: 100%;
  height: 100%;  
  top: 0px;
  left: 0px;
}

.lds-ring {
  position: absolute;
  /* change color here */
  color: #a7abb1;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lds-ring,
.lds-ring div {
  box-sizing: border-box;
}
.lds-ring {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 35px;
  height: 35px;
  margin: 8px;
  border: 3px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 전체 스크롤바 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* 스크롤바의 트랙 (스크롤바가 움직이는 영역) */
::-webkit-scrollbar-track {
  margin-left: 5px;
  background: #ffffff;
  /* 트랙 배경색 */
  border-radius: 10px;
  /* 트랙 모서리 둥글게 */
}

/* 스크롤바의 엄지 (움직이는 부분) */
::-webkit-scrollbar-thumb {
  background: #c4c6c9;
  /* 엄지 배경색 */
  border-radius: 10px;
  /* 엄지 모서리 둥글게 */
}


/* 스크롤바 모서리 (스크롤바 두 개가 만나는 모서리) */
::-webkit-scrollbar-corner {
  background: #5b5858;
}

.page-wrap {
  padding: 20px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 43%;
  min-width: 500px;
  min-height: 100%;
}

.page-wrap .error-wrap {
  width: 80%;
  text-align: start;
  display: flex;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 20px;
}

.page-wrap .error-wrap .link {
  margin-top: 15px;
  font-size: 18px;
  color: #86858d;
  line-height: 35px;
}

.page-wrap .error-wrap .logo-wrap img {
  width: 230px;
}

.popup-wrap {
  box-sizing: border-box;
  border-radius: 20px;
  padding: 20px;
  width: 400px;
  height: 300px;
  position: fixed;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  z-index: 10;
  flex-direction: column;
  box-shadow: 0px 0px 50px 10px #a5a5a550;
}

.popup-head {
  border-bottom: 1px solid #d3d3e6;
  padding-bottom: 10px;
}

.popup-wrap .close-btn {
  cursor: pointer;
  top: 23px;
  right: 20px;
  position: absolute;
  width: 18px;
  height: 18px;
}

.popup-title {
  font-size: 18px;
  font-weight: 600;
}

.popup-overlay {
  display: none;
  content: '';
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0px;
  right: 0px;
  background-color: #00000050;
  z-index: 5;
}

.order-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.delivery-ul {
  min-height: 85vh;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 0px;
}

.delivery-li {
  padding: 15px 0px;
  border-top: 1px solid #d3d3e6;
}

.unsupported-order-wrap {
  margin-top: 10px;
  padding: 15px 0px;
  border-top: 1px solid #d3d3e6;
}

.delivery-num {
  padding: 0px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
}

.delivery-status-wrap {
  gap: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
}

.delivery-status {
  padding: 4px 10px;
  border-radius: 16px;
  box-shadow: 0 0px 2px 0 rgba(0, 0, 0, .05);
  font-size: 15px;
  font-weight: 500;
}

.delivery-status-code-10,
.delivery-status-code-18,
.delivery-status-code-20,
.delivery-status-code-30,
.delivery-status-code-100,
.delivery-status-code-200,
.delivery-status-code-300,
.delivery-status-code-400,
.delivery-status-code-500,
.delivery-status-code-550 {
  background: #dcedfb;
  color: #004f95;
}

.delivery-status-code-700 {
  background: #cdffe0;
  color: #00592e;
}

.delivery-detail-btn {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #62666f;
}

.product-list {
  margin-top: 10px;
}

table,
th,
td {
  border: 1px solid rgb(208, 212, 229);
  border-collapse: collapse;
}

a {
  color: #000;
  text-decoration: none;
}

table {
  width: 100%;
}

th {
  padding: 10px;
  text-align: left;
}

td {
  padding: 10px;
}

h2 {
  margin-top: 0px !important;
  margin-bottom: 5px;
}

h3 {
  margin-top: 15px !important;
  line-height: 0px;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.undelivery-product-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.stock-status-wrap {
  white-space: nowrap;
  padding-left: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
}

.stock-status {
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: 16px;
  box-shadow: 0 0px 2px 0 rgba(0, 0, 0, .05);
  font-size: 14px;
  color: #764400;
  background-color: #fffedc;
  font-weight: 500;
}

.stock-status, .canceled_product, .returned_product {
  background: #ffebeb;
  color: #a50000;
}

.stock-in-due-date {
  margin-top: 5px;
  font-size: 13px;
  color: #62666f;
}

.in_stock {
  background: #fffedc;
  color: #764400;
}

.sold_out {
  background: #ffebeb;
  color: #a50000;
}

.wait_stock {
  background: #fffedc;
  color: #764400;
}

.product-wrap {
  cursor: pointer;
  padding: 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.product-wrap .name {
  overflow: hidden;
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  text-overflow: ellipsis; 
}


.product-wrap img {
  width: 90px;
  height: 90px;
  min-width: 90px;
  object-fit: cover;
  border-radius: 10px;
}

.product-info-wrap {
  display: flex;
  flex-direction: column;
}

.product-info-wrap .option {
  font-size: 13px;
  color: #62666f;
}


.product-info-wrap .option div {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; 
  -webkit-box-orient: vertical; 
  text-overflow: ellipsis;
}

.tracking-list-wrap {
  padding: 15px 10px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  overflow-y: scroll;
}

.delivery-num-wrap {
  margin-top: 10px;
}

.tracking-ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.tracking-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.tracking-date {
  font-weight: 400;
  color: #5c5c60;
}

.tracking-status {
  font-weight: 400;
}

.order-num-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.order-num-confirm-guide {
  color: #444347;
}

.order-num-input-wrap {
  white-space: wrap;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 70%;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.order-num-input-wrap  input {
  box-sizing: border-box;
  border: none;
  background-color: #e5e6e9;
  padding: 10px; 
  outline: none;
  border-radius: 7px;
  font-size: 15px;
  min-width: 250px;
}


.order-num-input {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.order-num-input button {
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  padding: 8px 10px;
  background-color: #006EE6;
  color: #FFFFFF;
  border-radius: 7px;
  font-weight: 500;
  border: none;
  font-size: 15px;
}

.order-num-input button:hover{
  background-color: #0255ae;
}

.partial-delivery-btn-wrap {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  bottom: 10px;
  left: 0px;
  padding: 5px 15px;
  gap: 10px;
}

.partial-delivery-btn-wrap button {
  flex: 1;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  padding: 12px 10px;
  background-color: #006EE6;
  color: #FFFFFF;
  border-radius: 7px;
  font-weight: 500;
  border: none;
  font-size: 17px;
}


.partial-delivery-btn-wrap button:hover{
  background-color: #0255ae;
}

.partial-delivery-btn-wrap .disabled {
  cursor: default;
  background-color: #E5E5E5;
  color: #737278; 
}

.partial-delivery-btn-wrap .disabled:hover {
  cursor: default;
  background-color: #E5E5E5;
  color: #737278; 
}

.guide {
  text-align: left;
  color: #444347;
}

@media screen and (max-width: 480px) {
  .page-wrap {
    padding: 20px 10px;
    width: 100% !important;
    min-width: auto;
  }


  .order-num-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .popup-wrap {
    width: 90vw;
    height: 300px;
  }


  .stock-status-wrap {
    position: absolute;
    bottom: 10px;
    right: 0px;
  }

  .undelivery-product-wrap {
    border-bottom: 1px solid #ebebf2;
    padding-bottom: 10px;
  }

  .undelivery-product-wrap:last-child {
    border-bottom: none;
    padding-bottom: 10px;
  }

  .delivery-product a {
    border-bottom: 1px solid #ebebf2;
    padding-bottom: 10px;
  }

  .delivery-product a:last-of-type {
    border-bottom: none;
    padding-bottom: 10;
  }

}