@charset "utf-8";
/* =====================================================================
   mp_dashboard_fix.css  (v260812a)
   마이페이지 대시보드 상단(히어로 + 보유포인트 카드 + 회원등급 카드)
   피그마 시안 629:265 픽셀 정합용 전용 오버라이드.
   ⚠ mypage_redesign.css 는 절대 수정하지 않는다 — 정합은 이 파일에서만.
   셀렉터는 .mypage_content 를 앞에 붙여 기존 .mpd_* 규칙을 이긴다.
   ===================================================================== */

/* ---- 히어로: 시안 제목은 전체 흰색(청록 강조 없음), 부제 #888/700 ---- */
.mypage_content .mpd_hero_tit,
.mypage_content .mpd_hero_tit .pt { color:#ffffff; }
.mypage_content .mpd_hero_desc { font-weight:700; color:#888888; }

/* ---- 보유포인트 카드 배경: 시안 linear 수평(90deg) #003A69 → @0.2 ---- */
.mypage_content .mpd_point_card {
	background:linear-gradient(90deg,#003A69,rgba(0,58,105,.2)) !important;
}
/* ---- 회원등급 카드 배경: 시안 radial 좌상단 원점 ---- */
.mypage_content .mpd_grade_card {
	background:radial-gradient(120% 130% at 0% 0%,#003A69,rgba(0,58,105,.2)) !important;
}

/* ---- 포인트 2종 사이 세로 구분선: 중앙 1줄(::before)만.
        기존 first-child border-right 와 겹쳐 2줄로 보이던 문제 제거 ---- */
.mypage_content .mpd_point_item:first-child {
	border-right:none !important;
	padding-right:0 !important;
}

/* ---- 포인트 값: 시안은 숫자 흰색 / 단위 P 흰색 (260819 민트 제거, 숫자=로열블루) ---- */
.mypage_content .mpd_point_item .val { color:#007BFE; }
.mypage_content .mpd_point_item .val span { color:#ffffff; }

/* ---- 아이콘 원(포인트/등급 공통): 시안 좌상단 radial + 청록 링 ---- */
.mypage_content .mpd_point_item .ic,
.mypage_content .mpd_grade_icon {
	background:radial-gradient(100% 100% at 0% 0%,rgba(0,58,105,.95),rgba(0,58,105,.15)) !important;
	border:1px solid rgba(13,170,252,.55) !important;
	color:#00B8FC !important;
}
/* 아이콘 글리프: 시안은 원 대비 크게(50/80). 마스크 아이콘 크기 확대 */
.mypage_content .mpd_point_item .ic .mps_ico { width:40px; height:40px; }
.mypage_content .mpd_grade_icon .mps_ico { width:42px; height:42px; }

/* ---- 회원등급 카드 구조: 시안은 (아이콘+텍스트) 상단 행 →
        하단에 카드 전폭 프로그레스 + % 가 한 줄로 배치 ---- */
.mypage_content .mpd_grade_card {
	flex-direction:column;
	align-items:stretch;
	justify-content:center;
	gap:34px;
	padding:0 30px;
}
.mypage_content .mpd_grade_row { display:flex; align-items:center; gap:16px; }
.mypage_content .mpd_grade_body { flex:1 1 auto; min-width:0; }
.mypage_content .mpd_grade_barrow { display:flex; align-items:center; gap:13px; }
.mypage_content .mpd_grade_barrow .mpd_bar { flex:1 1 auto; margin:0; }
.mypage_content .mpd_grade_barrow .mpd_grade_pct {
	flex:0 0 auto; margin:0; white-space:nowrap;
	font-size:12px; font-weight:700; color:#ffffff;
}

/* [260812] 상단 박스: 시안 629:265 = #000 + 파랑보라 radial grad 테두리 + r20 + padding30 */
/* [260818] 시안 변경 — 그라데이션 테두리 제거(주문/배송현황 섹션만 테두리 유지) */
.mypage_content .mpd_top_box {
	border-radius:20px; padding:30px 0;
	background:#000;
	border:0;
}
.mypage_content .mpd_top_box .mpd_hero { padding:0 0 4px; }
.mypage_content .mpd_top_box .mpd_row2 { margin-top:16px; }

/* [260818] 히어로 우측 G 로고가 박스 위로 78px 넘쳐 고정 헤더에 가려(잘려) 보이던 문제
   → translateY(-50%) 를 없애고 박스 안쪽 상단 기준으로 내림.
      로고(157px)가 아래 포인트/등급 카드와 겹치지 않도록 히어로 최소 높이 확보 */
/* 텍스트는 늘어난 히어로 영역의 세로 중앙에 두어 로고 라인과 맞춤 */
.mypage_content .mpd_top_box .mpd_hero {
	position:relative; min-height:165px;
	display:flex; flex-direction:column; justify-content:center;
}
.mypage_content .mpd_hero_logo { top:0; transform:none; }
@media (max-width:640px){
	.mypage_content .mpd_top_box .mpd_hero { min-height:0; display:block; }
}
/* 더보기/전체보기 글자 확대(시안 fs10 → 가독성 개선) */
.mypage_content .mpd_card_head .more,
.mypage_content .mpd_sec_head .more { font-size:14px; }

/* [260812] 보유포인트/등급 카드 그라디언트 테두리(시안 GRADIENT_RADIAL) — 배경은 원래 radial 유지 */
/* [260818] 시안 변경 — 그라데이션 테두리 제거, 카드 배경 그라데이션만 유지 */
.mypage_content .mpd_point_card {
	border:0 !important;
	background:linear-gradient(90deg,#003A69,#001120) !important;
}
.mypage_content .mpd_grade_card {
	border:0 !important;
	background:linear-gradient(90deg,#003A69,#001120) !important;
}

/* [260812] 대시보드 취소/교환/반품 요약 숨김(사용자 요청) */
.mypage_content .mpd_delivery_sub { display:none !important; }

/* [260818] 대시보드만 상단 정렬 패딩 해제 — 히어로 로고를 박스 안으로 내린 버전 기준으로
   이미 헤더에 가리지 않으므로 이전 위치(위쪽)를 유지한다 */
.mypage_content { padding-top:0; }

/* [260818] 주문/배송현황 시안 — 제목을 박스 안 상단으로, 각 단계는 아이콘+텍스트 가로 배치
   (.dash 스코프: 주문내역 페이지(order.jsp)의 기존 세로형 .mpd_delivery 는 그대로 유지) */
.mypage_content .mpd_delivery.dash {
	display:block; padding:26px 30px; border-radius:20px;
}
.mypage_content .mpd_delivery.dash .mpd_sec_head {
	display:flex; align-items:center; justify-content:space-between;
	margin:0 0 20px;
}
.mypage_content .mpd_delivery.dash .mpd_sec_head .t { font-size:22px; font-weight:700; color:#fff; }
.mypage_content .mpd_delivery.dash .mpd_dsteps {
	display:flex; align-items:center; justify-content:space-between; gap:6px;
}
/* 아이콘은 좌측 2행 span, 우측에 라벨/개수 세로 배치 */
.mypage_content .mpd_delivery.dash .mpd_dstep {
	flex:0 1 auto; text-align:left;
	display:grid; grid-template-columns:auto 1fr; column-gap:13px; align-items:center;
}
.mypage_content .mpd_delivery.dash .mpd_dstep .ic {
	grid-column:1; grid-row:1 / span 2;
	width:48px; height:48px; margin:0; font-size:22px;
}
.mypage_content .mpd_delivery.dash .mpd_dstep .ic .mps_ico { width:24px; height:24px; }
.mypage_content .mpd_delivery.dash .mpd_dstep .lab {
	grid-column:2; grid-row:1; font-size:16px; font-weight:700; color:#fff; white-space:nowrap;
}
.mypage_content .mpd_delivery.dash .mpd_dstep .num {
	grid-column:2; grid-row:2; margin-top:2px;
	font-size:14px; font-weight:500; color:#9fb0c0;
}
@media (max-width:900px){
	.mypage_content .mpd_delivery.dash .mpd_dsteps { flex-wrap:wrap; gap:16px 10px; }
	.mypage_content .mpd_delivery.dash .mpd_darrow { display:none; }
	.mypage_content .mpd_delivery.dash .mpd_dstep { flex:1 1 40%; }
}

/* ==================================================================
   [260813] 모바일(≤640px) 대시보드 카드 세부 — 데스크탑 불변
   ================================================================== */
@media (max-width:640px){
	/* 등급 카드: 데스크탑 고정폭(378px)이 뷰포트를 넘겨 잘림 → 100% */
	.mypage_content .mpd_grade_card {
		flex:1 1 auto !important; width:100% !important; max-width:100%; min-width:0;
		height:auto; padding:20px 18px; gap:20px;
	}
	.mypage_content .mpd_point_card {
		height:auto; padding:20px 18px; min-width:0;
	}
	/* 프로그레스 텍스트("676,636 P" / "66%") 우측 잘림 방지 */
	.mypage_content .mpd_grade_body { min-width:0; }
	.mypage_content .mpd_grade_sub { font-size:12px; word-break:keep-all; overflow-wrap:anywhere; white-space:normal; }
	.mypage_content .mpd_grade_barrow { gap:10px; }
	.mypage_content .mpd_grade_barrow .mpd_bar { min-width:0; }
	.mypage_content .mpd_grade_barrow .mpd_grade_pct { font-size:12px; flex:0 0 auto; }
	/* 보유 포인트 값이 길 때 줄내림 허용 */
	.mypage_content .mpd_point_item .val { font-size:18px; word-break:break-all; }

	/* ── [260901] 히어로 텍스트 잘림 ────────────────────────────────
	   .mpd_hero 는 데스크탑 워터마크 로고를 가두려고 overflow:hidden 인데,
	   모바일에서는 좌우 padding 이 0 이라 제목의 오른쪽 끝이 깎일 여유밖에 없다
	   (390px 기준 잉크폭 313px / 컨테이너 327px — 웹폰트가 대체 폰트로 렌더되면 곧바로 넘침).
	   워터마크는 모바일에서 이미 숨기므로 hidden 을 유지할 이유가 없다. */
	.mypage_content .mpd_hero { overflow:visible; padding:6px 2px 4px; }
	.mypage_content .mpd_hero_tit { font-size:20px; }
	.mypage_content .mpd_hero_desc { font-size:13px; }

	/* ── [260901] 보유내역 카드 정렬 ────────────────────────────────
	   지적: 두 항목(G코인 / 구독 포인트)의 아이콘·글자 시작선이 서로 어긋난다.
	   원인: .mpd_point_item{justify-content:center} 이라 세로 1열이 되면
	        라벨 길이 차이(G코인 103px / 구독 포인트 91px)만큼 항목 내용 전체가
	        가운데로 밀려 아이콘 x 가 6px 어긋났다.
	   해결: 좌측 정렬로 고정하고 텍스트 열이 남은 폭을 차지하게 한다.
	        항목 사이 구분선도 세로선(absolute)이 카드 한가운데를 가로지르므로 가로선으로 교체. */
	.mypage_content .mpd_point_items { gap:0; }
	.mypage_content .mpd_point_item {
		justify-content:flex-start; gap:14px; padding:14px 0;
	}
	.mypage_content .mpd_point_item .pi_txt { flex:1 1 auto; min-width:0; }
	.mypage_content .mpd_point_item .ic { flex:0 0 auto; width:60px; height:60px; }
	.mypage_renew .mypage_content .mpd_point_item .ic img.gcoin_ic { width:34px; height:34px; }
	.mypage_content .mpd_point_item .ic .mps_ico { width:28px; height:28px; }
	.mypage_content .mpd_point_item .lab { font-size:16px; }
	.mypage_content .mpd_point_item:first-child { padding-right:0; border-right:none; }
	.mypage_content .mpd_point_item + .mpd_point_item::before { display:none; }
	.mypage_content .mpd_point_item + .mpd_point_item { border-top:1px solid #1B3250; }

	/* 바로 아래 등급 카드도 같은 시작선으로 — 아이콘만 80px 이면 글자 시작선이
	   보유내역(116px)과 22px 어긋나 두 카드가 따로 노는 것처럼 보인다 */
	.mypage_content .mpd_grade_card { justify-content:flex-start; gap:14px; }
	.mypage_content .mpd_grade_icon { flex:0 0 auto; width:60px; height:60px; }
	.mypage_content .mpd_grade_icon .mps_ico { width:28px; height:28px; }
}

/* ══════════════════════════════════════════════════════════════════
   [260902] 사용자 지시: 보유내역 / 회원등급 카드의 글자가 작다 → 한 단계씩 확대.
   모바일은 앞서 좁은 폭에 맞춰 별도로 잡아둔 값이 있으므로 데스크탑(≥641px)에만 적용한다.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width:641px){
	/* 보유내역 카드 */
	.mypage_content .mpd_card_head .t    { font-size:24px; }  /* 나의 보유 내역   20 → 24 */
	.mypage_content .mpd_card_head .more  { font-size:16px; }  /* G코인 내역 보기  14 → 16 */
	.mypage_content .mpd_point_item .lab  { font-size:22px; }  /* G코인 / 구독 포인트 20 → 22 */
	/* 값 20 → 24. (26px 로 키우면 "1,482,012"+단위 아이콘이 텍스트 열 폭(141px)을
	   6px 넘겨 G코인 아이콘이 다음 줄로 떨어진다) */
	.mypage_content .mpd_point_item .val  { font-size:24px; }
	.mypage_content .mpd_point_item .val span { font-size:16px; }
	.mypage_content .mpd_point_item .val .gcoin_unit { width:20px; height:20px; }

	/* 회원등급 카드 */
	.mypage_content .mpd_grade_lab  { font-size:17px; }        /* 회원등급        15 → 17 */
	.mypage_content .mpd_grade_name { font-size:26px; }        /* SILVER          20 → 26 */
	.mypage_content .mpd_grade_sub  { font-size:14px; }        /* 다음 등급까지   10 → 14 */
	/* 38% 12 → 15 (위쪽 .mpd_grade_barrow .mpd_grade_pct 규칙과 특이도를 맞춘다) */
	.mypage_content .mpd_grade_barrow .mpd_grade_pct,
	.mypage_content .mpd_grade_pct_inline { font-size:15px; }
	.mypage_content .mpd_grade_sub .gcoin_unit { width:16px; height:16px; }

	/* 글자가 커진 만큼 고정 높이(170px)를 풀어 카드가 내용에 맞게 늘어나게 한다 */
	.mypage_content .mpd_point_card,
	.mypage_content .mpd_grade_card { height:auto; min-height:170px; }
}