@charset "UTF-8";
/*  마이페이지 스타일 파일입니다. */
.my-page-wrap {
  padding-bottom: 80px;
}
.my-info__member {
  padding: 30px 20px;
  background-color: var(--color-base-navy);
  height: 150px;
}
.my-info__member-summary {
  position: relative;
}
.my-info__member-info span + span::before {
  display: inline;
  content: '|';
  padding: 3px;
  color: var(--gray300);
}
.my-info__member-type {
  font-size: 10px;
  color: var(--gray500);
  display: flex;
  align-items: center;
  gap: 2px;
}
.my-info__benefit-btn {
  font-size: 12px;
  color: #999;
  text-decoration: underline;
  padding: 0;
}

.my-coupon-data {
  display: flex;
  flex-direction: row;
  color: #777;
  font-size: 0.8571428571rem;
  text-align: center;
}
.my-coupon-data a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none;
  color: var(--gray600);
  padding: 18px 7.5px;
}
.my-coupon-data a::after {
  position: absolute;
  content: '';
  height: 40px;
  width: 1px;
  background-color: #e6e6e6;
  right: 0;
}
.my-coupon-data span {
  display: flex;
  align-items: center;
  gap: 3px;
}
.my-coupon-data a:last-child::after {
  display: none;
}
.my-coupon-data em {
  font-style: normal;
}
.my-coupon-data__link {
  flex: 1;
  position: relative;
  display: block;
  border-bottom: 1px solid #e6e6e6;
}
.my-coupon-data__num {
  display: block;
  line-height: 30px;
  width: max-content;
}
.my-coupon-data__num em {
  margin-top: 5px;
  color: var(--color-base-black);
  font-size: 18px;
  font-weight: 600;
}

.my-orders {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 20px;
  background-color: var(--gray300);
}
.my-orders__link {
  position: relative;
  text-decoration: none;
  color: black;
  flex: 1;
  padding: 1.0714285714rem 1.4285714286rem;
  background-color: var(--color-base-white);
  text-align: center;
}
.my-orders__link + .my-orders__link::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 15px;
  content: '';
  transform: translateY(-50%);
  background-color: #ddd;
}
.my-link {
  position: relative;
  display: flex;
  padding: 0px 16px;
  color: #181818;
  text-decoration: none;
  height: 50px;
  font-size: 14px;
  align-items: center;
  justify-content: space-between;
}
.my-link__list {
  border-bottom: 1px solid var(--gray200);
}
.my-link + .my-link {
  border-top: 1px solid #ececec;
}
.my-link__ico {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(-90deg);
}
.my-link button {
  border: none;
  background-color: transparent;
}
.my-membership {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 20px;
  gap: 12px;
}
.my-membership__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 40px;
}
.my-order-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0px 10px;
  border-bottom: 1px solid #262626;
  margin-top: 40px;
}
.my-order-status__summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.my-order-status__title {
  font-size: 18px;
  font-weight: 500;
}
.my-order-status__description {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  flex-direction: row;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--gray600);
}
.my-order-status__link {
  text-decoration: none;
  display: none;
  font-weight: 500;
  color: var(--color-base-black);
}
.order-state__list {
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.order-state__item {
  text-align: center;
  padding: 0px 12px;
  position: relative;
}
.order-state__item:last-child {
  border-right: 1px solid var(--gray300);
}
.order-state__item::after {
  position: absolute;
  content: '';
  background-image: url(../../assets/images/geek/ico_order_arrow.svg);
  width: 7px;
  height: 7px;
  background-size: 100% 100%;
  bottom: 4px;
  right: -5px;
}
.order-state__item:last-child::after {
  display: none;
}

.order-state__item-link {
  font-size: 20px;
  text-decoration: none;
  color: black;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.order-state__item-link-icon {
  border: none;
  background-color: transparent;
  transform: rotate(-90deg);
}
.order-state__etc-item a {
  text-decoration: none;
  color: var(--color-base-black);
  text-align: center;
  gap: 5px;
}
.order-state__item-title {
  color: #7a7a7a;
  font-size: 12px;
}
.order-state__item-price {
  font-size: 20px;
}
.order-state__item-unit {
  font-weight: 400;
  font-size: 12px;
  line-height: 30px;
  color: var(--gray500);
}
.order-state__item-count {
  font-size: 20px;
  font-family: 'Montserrat';
  font-weight: 600;
  color: var(--color-base-black);
}

/* 마이페이지 추가 css */
.member-name {
  color: var(--color-base-white);
  font-size: 24px;
}
.member-id {
  color: #999;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}
.my-info__member-info-top {
  display: flex;
  justify-content: space-between;
  background: #f5f5f5;
  padding: 20px;
  height: 80px;
}
.grade-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.grade-img {
  width: 40px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.grade-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.grade-info .m-bold,
.grade-info .highlight {
  font-size: 16px;
  text-align: left;
}
.my-info__member-type .highlight {
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
}
.my-info-order {
  margin: 0px 16px;
  position: relative;
  z-index: 1;
  top: -40px;
  background: white;
}
.my-info__member-greeting {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: 'Montserrat', sans-serif;
}
.order-state__list svg {
  margin-bottom: 3px;
}
.order-state__etc {
  text-align: center;
  padding: 0 10px;
}
.order-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0px 0px;
}
.shopping-info-wrap {
  padding: 30px 16px;
  background: #f5f6f8;
}
.shopping-info-wrap .my-order-status {
  border-bottom: none;
}
.shopping-info-link {
  margin-top: 20px;
  background-color: var(--color-base-white);
  display: flex;
}
.shopping-info-link a {
  display: flex;
  flex: 1;
  position: relative;
  font-size: 14px;
  justify-content: center;
  height: 50px;
  text-decoration: none;
  align-items: center;
  color: #181818;
}
.shopping-info-link a::after {
  position: absolute;
  height: 18px;
  right: 0;
  width: 1px;
  content: '';
  background-color: var(--gray200);
}
.shopping-info-link a:last-child:after {
  display: none;
}
.my-link-arrow {
  width: 24px;
  height: 24px;
  background-image: url(../../assets/images/geek/ico_my_link_arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 7px 12px;
  display: inline-block;
}
.qna-link-wrap {
  padding: 10px 0;
  background-color: #f5f6f8;
}
.qna-link-wrap > div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-base-white);
}
.qna-link-wrap a {
  display: flex;
  text-decoration: none;
  color: #181818;
  flex-direction: column;
  padding: 20px 0;
  flex: 1;
  font-size: 14px;
  gap: 10px;
  position: relative;
  align-items: center;
  justify-content: center;
}
.qna-link-wrap a::after {
  position: absolute;
  content: '';
  width: 1px;
  right: 0;
  height: 50px;
  background-color: #ececec;
}
.qna-link-wrap .img-box {
  background-position: center;
  width: 35px;
  height: 35px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.qna-link-wrap .FQA .img-box {
  background-image: url(../../assets/images/geek/ico_my_FAQ.svg);
}
.qna-link-wrap .one-and-one .img-box {
  background-image: url(../../assets/images/geek/ico_my_on.svg);
}
.qna-link-wrap .kakao .img-box {
  background-image: url(../../assets/images/geek/ico_my_kakao.svg);
}

/* 마이페이지 - 나의 관심 리스트 */
.interest-recent-wrap .tabs {
  display: flex;
  cursor: pointer;
  margin-bottom: 20px;
}
.interest-recent-wrap .tabs div {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bebebe;
  flex: 1;
  font-weight: 500;
  border-bottom: 2px solid #eee;
  font-size: 14px;
}
.interest-recent-wrap .tabs div.active {
  background-color: #fff;
  border-bottom: none;
  color: #3f444c;
  border-bottom: 2px solid #3f444c;
}
.interest-recent-wrap .tab-content {
  display: none;
  background-color: #fff;
}
.interest-recent-wrap .tab-content.active {
  display: block;
}
.recent-product-wrap .recent-product-box.no-data {
  justify-content: center;
  min-height: 30vh;
}
.recent-product-wrap .recent-product-item {
  flex-direction: column;
  border: none;
  min-height: 220px;
  display: flex;
}

/* 마이페이지 - 최근 본 상품 */
.my-recent-product .thumb-item__info {
  padding: 0px;
  display: flex;
  flex-direction: column;
  min-height: 77px;
  justify-content: space-between;
}
.my-recent-product .thumb-item__info-name {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  padding-top: 5px;
  line-height: 1.4;
  font-size: 11px;
  overflow: hidden;
  display: -webkit-box;
}
.my-recent-product .thumb-item__info-price {
  display: flex;
  align-items: center;
  gap: 5px;
}
.my-recent-product .thumb-item em {
  font-weight: 500;
  color: #000;
  font-size: 11px;
}
.my-recent-product .thumb-item__img {
  border: none;
}
.my-recent-product .product-thumb-price--origin {
  font-size: 10px;
}
.my-recent-product .swiper-slide a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  justify-content: space-between;
}
.product-brand {
  font-size: 11px;
}