body:not(.scroll-up):not(.scroll-down)
  .care-wrap:has(.dm-main-personal .login-after)
  .headerWrap {
  background-color: #cef6f6;
}
body:not(.scroll-up):not(.scroll-down)
  .mall-wrap:has(.dm-main-personal .login-after)
  .headerWrap {
  background-color: #cae8ef;
}
.section-login {
  padding: 0;
}
.section-login.inactive .login-inner {
  border-top: none;
  border-left: none;
  border-right: none;
}
.dm-main-personal {
  background-position: center 80%;
}
.mall-wrap .dm-main-personal:has(.login-after),
.care-wrap .dm-main-personal:has(.login-after) {
  padding: 0.9rem 1.6rem 1.7rem;
  min-height: 14.5rem;
}
.care-wrap .tip-txt {
  top: 6.8rem;
  right: 9rem;
  display: block;
  padding: 0.4rem 0.5rem;
  min-width: 0;
  width: 12.5rem;
  white-space: normal;
  word-break: keep-all;
}
.care-wrap .tip-txt p {
  font-size: 1rem;
}
.care-wrap .tip-txt .tip,
.care-wrap .tip-txt .txt,
.care-wrap .tip-txt span {
  display: inline;
  margin: 0;
}
.care-wrap .tip-txt::before {
  transform: scaleX(-1);
  right: 5rem;
}
.care-wrap .tip-txt .ico-tip {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
}
.care-wrap .tip-txt .ico-tip img {
  vertical-align: middle;
  width: 1rem;
}

.dm-main-personal .login-after .txt {
  display: flex;
  gap: 0.2rem;
}
.mall-wrap .dm-main-personal {
  background-image: url(/resources/images/membership/mall/mall_personal_bg.png);
  background-position: center center;
}
.mall-wrap .dm-main-personal .login-after::after {
  top: 0;
  right: 2rem;
  background-image: url(/resources/images/membership/mall/mall_charactor01.png);
  background-repeat: no-repeat;
}

/* 챌린지 스와이퍼: pagination(bullet) 대신 위/아래 화살표 navigation 사용
   → 슬라이드 개수와 무관하게 화살표 2개로 넘김, 원(bullet) 안 생김 */
.swiperGoals .goals-nav {
  position: absolute;
  right: 0.6rem;
  z-index: 10;
  width: 1.6rem;
  height: 0.8rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  /* 활성(이동 가능) = 검은 화살표 */
  background: url(https://dmdev.pulmuone.com/resources/dm_images/goals_arrow1.png)
    no-repeat center / contain;
}
/* care_main.html 기준 간격: 위·아래 화살표를 거의 붙임(약 0.2rem) */
.swiperGoals .goals-nav-prev {
  top: 50%;
  margin-top: -0.9rem; /* 위 화살표 (이전) */
}
.swiperGoals .goals-nav-next {
  top: 50%;
  margin-top: 0.1rem; /* 아래 화살표 (다음) */
  transform: rotate(180deg);
}
/* 이동 불가(더 넘길 슬라이드 없음)일 때 회색 화살표 */
.swiperGoals .goals-nav.swiper-button-disabled {
  background-image: url(https://dmdev.pulmuone.com/resources/dm_images/goals_arrow2.png);
  cursor: default;
}
.mall-wrap .dm-main-personal .login-after .go-challenge,
.care-wrap .dm-main-personal .login-after .go-challenge {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.mall-wrap .dm-main-personal .login-after .go-challenge:hover,
.care-wrap .dm-main-personal .login-after .go-challenge:hover{
    color: inherit;
}
.dm-main-personal .login-after .go-challenge.type3 span::before {
  background-image: url(/resources/images/membership/icon/ico_mall_challenge01.png);
}
.dm-main-personal .login-after .go-challenge.type4 span::before {
  width: 2rem;
  height: 2rem;
  background-image: url(/resources/images/membership/icon/ico_mall_challenge02.png);
}
.dm-main-personal .login-after .go-challenge.type5 span::before {
  background-image: url(/resources/images/membership/icon/ico_mall_challenge03.png);
}
.dm-main-personal .login-after .go-challenge.type6 span::before {
  background-image: url(/resources/images/membership/icon/ico_mall_challenge04.png);
}
.dm-main-personal .login-after .go-challenge.type7 span::before {
  background-image: url(https://dmdev.pulmuone.com/resources/dm_images/icon_d.png);
}

.login-after .user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.login-after .btn-dart-new {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  margin: 0.4rem 0;
  background-color: #fff;
  color: #39802b;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 10rem;
  font-size: 1.3rem;
}
.login-after .btn-dart-new::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  padding-right: 0.3rem;
  background-image: url(/resources/images/membership/icon/ico_mall_count.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.login-after .btn-goals-new {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  margin: 0.4rem 0;
  background-color: #fff;
  color: #39802b;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 10rem;
  font-size: 1.3rem;
  z-index: 5;
}
.login-after .btn-goals-new::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  padding-right: 0.3rem;
  background-image: url(/resources/images/membership/icon/ico_mall_count.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 회원등급 표시 : 등급 클래스 tier-M01 / tier-M02 / tier-M03 / tier-M04 / tier-M05
   (색상·글자는 membership.css 49~94줄 tier-S~tier-G 와 동일) */
.mall-wrap .dm-main-personal .login-after .grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  vertical-align: middle;
}

.mall-wrap .dm-main-personal .login-after .txt b {
	text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    color: inherit;
}

.mall-wrap .dm-main-personal .login-after .txt .var {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #ccc;
  margin: 4px 10px;
  vertical-align: bottom;
}

/* 아이콘: membership.css .ms-badge-ico 방식(색상 원형 배지 + 등급 글자)으로 통일 */
.mall-wrap .dm-main-personal .login-after .grade-badge .grade-ico {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  font-style: normal;
  /* line-height: 1; */
}
/* 등급별 배지 색상/글자 (membership.css 49~94줄 tier-S~tier-G 와 동일) */
.mall-wrap .dm-main-personal .login-after .tier-M01 .grade-ico {
  background: #f7b70e;
}
.mall-wrap .dm-main-personal .login-after .tier-M01 .grade-ico::before {
  content: "S";
}
.mall-wrap .dm-main-personal .login-after .tier-M02 .grade-ico {
  background: #6fb53d;
}
.mall-wrap .dm-main-personal .login-after .tier-M02 .grade-ico::before {
  content: "R";
}
.mall-wrap .dm-main-personal .login-after .tier-M03 .grade-ico {
  background: #e64c63;
}
.mall-wrap .dm-main-personal .login-after .tier-M03 .grade-ico::before {
  content: "P";
}
.mall-wrap .dm-main-personal .login-after .tier-M04 .grade-ico {
  background: #8069f5;
}
.mall-wrap .dm-main-personal .login-after .tier-M04 .grade-ico::before {
  content: "V";
}
.mall-wrap .dm-main-personal .login-after .tier-M05 .grade-ico {
  background: #9a7952;
}
.mall-wrap .dm-main-personal .login-after .tier-M05 .grade-ico::before {
  content: "G";
}
/* 등급 텍스트 + 밑줄 색상 */
.mall-wrap .dm-main-personal .login-after .grade-badge b {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
.mall-wrap .dm-main-personal .login-after .grade-badge b a:hover{
    color: inherit;
}
.mall-wrap .dm-main-personal .login-after .tier-M01 b {
  color: #f7b70e;
  text-decoration-color: #f7b70e;
}
.mall-wrap .dm-main-personal .login-after .tier-M02 b {
  color: #6fb53d;
  text-decoration-color: #6fb53d;
}
.mall-wrap .dm-main-personal .login-after .tier-M03 b {
  color: #e64c63;
  text-decoration-color: #e64c63;
}
.mall-wrap .dm-main-personal .login-after .tier-M04 b {
  color: #8069f5;
  text-decoration-color: #8069f5;
}
.mall-wrap .dm-main-personal .login-after .tier-M05 b {
  color: #9a7952;
  text-decoration-color: #9a7952;
}

/* ===== 마이페이지 상단 리뉴얼 (mypage top-area) 전용 스타일 =====

/* 공통 화살표(chevron) 기본값 */
.mypage-wrap .mp-arrow {
  display: inline-block;
  width: 0.7rem;
  height: 1.2rem;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23999999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center/contain;
}

/* ===== 상단 영역 컨테이너 ===== */
.mypage-wrap .top-area {
  padding: 2rem 2rem 0 !important;
  background: #f5f5f5 !important;
}

/* ===== 프로필 ===== */
.mypage-wrap .mp-profile {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
.mypage-wrap .mp-profile-img {
  display: block;
  flex: 0 0 auto;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  overflow: hidden;
  background: #efefef;
}
.mypage-wrap .mp-profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mypage-wrap .mp-profile-info {
  flex: 1;
  min-width: 0;
}
.mypage-wrap .mp-profile-name {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}
/* 이름: Noto/Pretendard Medium 19px #383838 */
.mypage-wrap .mp-profile-name b {
  display: inline-block;
  font-size: 2rem;
  font-weight: 500;
  color: #383838;
  letter-spacing: -0.038rem;
  line-height: 1.3;
}
.mypage-wrap .mp-profile-name .mp-arrow {
  width: 0.8rem;
  height: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23AAAAAA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 타입 줄: 밸런스관리(초록 밑줄) + 타입(회색) */
.mypage-wrap .mp-type {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.mypage-wrap .mp-type-btn {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 500;
  color: #aaaaaa;
  letter-spacing: -0.024rem;
  line-height: 1.3;
}
.mypage-wrap .mp-type-btn em {
  font-style: normal;
  font-weight: 600;
  color: var(--c-primary, #6fb53d);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
/* 안내(i) 아이콘: 원격 절대배치 → 인라인 흐름으로 되돌림 */
.mypage-wrap .mp-type .tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.mypage-wrap .mp-type .ico-noti {
  position: static;
  top: auto;
  right: auto;
  width: 1.4rem;
  height: 1.4rem;
}

/* ===== 등급 카드 ===== */
.mypage-wrap .mp-grade-card {
  border: 0.1rem solid rgba(218, 218, 218, 0.7);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
}

/* 상단 : 등급 배지 + 혜택 보기 */
.mypage-wrap .mp-grade-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.6rem;
  border-bottom: 0.1rem solid rgba(217, 217, 217, 0.7);
  text-decoration: none;
}

/* 등급 배지 (아이콘은 챌린지 PNG · 24.5px) */
.mypage-wrap .ms-grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03rem;
  line-height: 1.2;
}
.mypage-wrap .ms-badge-ico {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-size: 1.23rem;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}
/* M04등급 텍스트: ExtraBold 15px, 등급 색상 상속 */
.mypage-wrap .mp-grade-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03rem;
}
/* 등급별 등급명 색상 (등급 코드 클래스로 제어) */
.mypage-wrap .ms-grade-badge.tier-M01 {
  color: #f7b70e;
}
.mypage-wrap .ms-grade-badge.tier-M02 {
  color: #6fb53d;
}
.mypage-wrap .ms-grade-badge.tier-M03 {
  color: #e64c63;
}
.mypage-wrap .ms-grade-badge.tier-M04 {
  color: #8069f5;
}
.mypage-wrap .ms-grade-badge.tier-M05 {
  color: #9a7952;
}
/* 배지 아이콘 배경색 + 글자 (등급 코드 클래스로 제어 · 이미지 미사용, 글자는 ::before 자동 생성) */
.mypage-wrap .ms-grade-badge.tier-M01 .ms-badge-ico {
  background: #f7b70e;
}
.mypage-wrap .ms-grade-badge.tier-M01 .ms-badge-ico::before {
  content: "S";
}
.mypage-wrap .ms-grade-badge.tier-M02 .ms-badge-ico {
  background: #6fb53d;
}
.mypage-wrap .ms-grade-badge.tier-M02 .ms-badge-ico::before {
  content: "R";
}
.mypage-wrap .ms-grade-badge.tier-M03 .ms-badge-ico {
  background: #e64c63;
}
.mypage-wrap .ms-grade-badge.tier-M03 .ms-badge-ico::before {
  content: "P";
}
.mypage-wrap .ms-grade-badge.tier-M04 .ms-badge-ico {
  background: #8069f5;
}
.mypage-wrap .ms-grade-badge.tier-M04 .ms-badge-ico::before {
  content: "V";
}
.mypage-wrap .ms-grade-badge.tier-M05 .ms-badge-ico {
  background: #9a7952;
}
.mypage-wrap .ms-grade-badge.tier-M05 .ms-badge-ico::before {
  content: "G";
}

/* 혜택 보기: SemiBold 11.7px #5B5B5B */
.mypage-wrap .mp-grade-more {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
  font-size: 1.3rem;
  /* font-weight: 600; */
  color: #5b5b5b;
  letter-spacing: -0.0234rem;
  line-height: 0;
}
.mypage-wrap .mp-grade-more .mp-arrow {
  width: 1.4rem;
  height: 1.4rem;
  background-image: url(/resources/images/membership/icon/icon_mall_arrow.png);
  background-size: contain;
}

/* 하단 : 3분할 통계 (오늘의 배송 · 포인트 · 쿠폰) */
.mypage-wrap .mp-stats {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mypage-wrap .mp-stats li {
  flex: 1;
  position: relative;
}
.mypage-wrap .mp-stats li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.1rem;
  height: 3.7rem;
  background: rgba(217, 217, 217, 0.7);
}
.mypage-wrap .mp-stats a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1.4rem 0.5rem;
  text-decoration: none;
}
/* 라벨: Medium 11px #555 */
.mypage-wrap .mp-stat-label {
  font-size: 1.3rem;
  /* font-weight: 500; */
  color: #555;
  letter-spacing: -0.022rem;
  line-height: 1.2;
}
/* 값: Bold 17px 검정 */
.mypage-wrap .mp-stat-value {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.9rem;
  font-weight: 600;
  color: #111;
  letter-spacing: -0.034rem;
  line-height: 1.1;
}
/* 단위(건 등): 10px Medium #555 */
.mypage-wrap .mp-stat-value em {
  font-style: normal;
  font-size: 1rem;
  font-weight: 500;
  color: #555;
  margin-left: 0.1rem;
}
/* 포인트 단위(p): 숫자와 동일 크기·두께 (데이터 분리용으로만 별도 요소) */
.mypage-wrap .mp-stat-value .mp-unit {
  font-size: 1.7rem;
  font-weight: 700;
  color: #111;
  margin-left: 0;
}

/* 상단 영역과 메뉴 사이 회색 구분 밴드 (full-bleed)
   ※ margin 대신 상단 영역과 동일한 회색으로 채워 흰 띠가 생기지 않게 함 */
.mypage-wrap .mp-gray-band {
  height: 2rem;
  background: #f5f5f5;
  margin: 0;
}
.maintoday{position: relative; z-index: 99;}

@media screen and (max-width: 360px) and (min-width: 280px) {
    .mall-wrap .dm-main-personal .login-after::after{right: 0.5rem;}
    .dm-main-personal .login-after::after{right: -4rem;}
}