@charset "utf-8";
/* =========================================================================
   마이페이지 리디자인 (피그마 2026.07.03 / 630:379 등) [260811]
   - 좌측 공통 사이드바(_sidebar.jsp) + 우측 콘텐츠 2단 레이아웃
   - .mypage_renew 스코프에서만 동작
   토큰: 페이지 #000 / 카드 grad(#0A2942→14%) 또는 #0A1520 / 포인트 #00B8FC
        활성 grad(#00B8FC→#5163FE) / 테두리 #16324B
   ========================================================================= */

.mypage_renew { background:#000; }
.mypage_layout {
	display:flex;
	gap:30px;
	max-width:1600px;
	margin:0 auto;
	padding:40px 20px 80px;
	box-sizing:border-box;
	align-items:flex-start;
}
.mypage_content { flex:1 1 auto; min-width:0; }

/* [260818] 우측 콘텐츠가 고정 헤더에 가려 위로 붙어 보이던 문제
   → 사이드바 내부 padding(50px)과 같은 값을 줘서 프로필/메뉴 라인과 시작선을 맞춘다 */
.mypage_content { padding-top:50px; box-sizing:border-box; }
@media all and (max-width:1080px) {
	.mypage_content { padding-top:24px; }
}

/* ── 사이드바 ─────────────────────────────────────────────────────────── */
.mypage_sidebar {
	flex:0 0 320px;
	width:320px;
	background:linear-gradient(to bottom right, #0B2143 0%, #0F1A2C 100%); /* [260826 s07] 파란 그라데 래퍼 복원 */
	border:0;
	border-radius:20px;
	padding:28px 24px;
	box-sizing:border-box;
	position:sticky;
	top:20px;
}
.mps_profile { display:flex; align-items:center; gap:16px; }
.mps_avatar {
	flex:0 0 auto;
	width:76px; height:76px;
	border-radius:50%;
	background:linear-gradient(135deg,#00B8FC,#5163FE);
	display:flex; align-items:center; justify-content:center;
	color:#fff; font-size:30px;
}
.mps_name { font-size:18px; font-weight:700; color:#fff; }
.mps_nim { font-size:14px; font-weight:400; color:#cfd6de; margin-left:2px; }
.mps_welcome { font-size:13px; color:#8b98a5; margin-top:2px; }
.mps_grade {
	display:inline-block;
	margin-top:8px;
	padding:4px 14px;
	border-radius:100px;
	background:linear-gradient(135deg,#00B8FC,#5163FE);
	color:#fff; font-size:13px; font-weight:700;
}
.mps_logout {
	display:block;
	margin-top:20px;
	height:44px; line-height:44px;
	border-radius:100px;
	background:linear-gradient(90deg,#00B8FC,#5163FE);
	color:#fff; font-size:15px; font-weight:700;
	text-align:center;
}

/* 마우스 포인터 3종 */
.mps_pointer_box {
	display:flex; gap:12px; justify-content:center;
	margin:24px 0;
	padding:16px 0;
	border-top:1px solid #16324B;
	border-bottom:1px solid #16324B;
}
.mps_pointer_item { display:flex; flex-direction:column; align-items:center; gap:8px; }
.mps_pointer_item img { width:64px; height:64px; object-fit:contain; }
.mps_pointer_box .toggle {
	width:44px; height:22px; border-radius:100px;
	background:#444; border:none; position:relative; cursor:pointer;
	transition:background .2s;
}
.mps_pointer_box .toggle span {
	position:absolute; top:2px; left:2px;
	width:18px; height:18px; border-radius:50%;
	background:#fff; transition:left .2s;
}
.mps_pointer_box .toggle.on { background:linear-gradient(90deg,#00B8FC,#5163FE); }
.mps_pointer_box .toggle.on span { left:24px; }

/* 메뉴 6 */
.mps_menu { display:flex; flex-direction:column; gap:8px; }
.mps_menu_item {
	display:flex; align-items:center; gap:14px;
	height:56px; padding:0 20px;
	border-radius:10px;
	background:#0A1622; font-size:16px; font-weight:500;
	transition:background .2s, color .2s;
}
/* 전역 a{color:#000} 을 이기려면 텍스트/아이콘/링크 전부 명시 */
.mypage_sidebar .mps_menu_item,
.mypage_sidebar .mps_menu_item span,
.mypage_sidebar .mps_menu_item i { color:#ccd6e0; }
.mps_menu_item i { width:20px; text-align:center; font-size:17px; }
.mypage_sidebar .mps_menu_item:hover { background:#12233A; }
.mypage_sidebar .mps_menu_item:hover span,
.mypage_sidebar .mps_menu_item:hover i { color:#fff; }
.mps_menu_item.active { background:linear-gradient(90deg,#00B8FC,#5163FE); font-weight:700; }
.mypage_sidebar .mps_menu_item.active,
.mypage_sidebar .mps_menu_item.active span,
.mypage_sidebar .mps_menu_item.active i { color:#fff; }

/* ── 서브탭 (나의활동/나의쇼핑/회원정보수정 그룹 내 탭) ───────────────── */
.mps_subtab {
	display:flex; gap:10px; flex-wrap:wrap;
	margin-bottom:26px;
}
.mps_subtab a {
	height:44px; line-height:44px; padding:0 24px;
	border-radius:100px;
	background:#0A1622; border:1px solid #16324B;
	font-size:15px; font-weight:500;
	transition:background .2s, color .2s, border-color .2s;
}
/* 전역 a{color:#000} 무력화 */
.mypage_content .mps_subtab a { color:#ccd6e0; }
.mypage_content .mps_subtab a:hover { background:#12233A; color:#fff; }
.mps_subtab a.active { background:linear-gradient(90deg,#00B8FC,#5163FE); border-color:transparent; font-weight:700; }
.mypage_content .mps_subtab a.active { color:#fff; }

/* ── 우측 대시보드 콘텐츠 ─────────────────────────────────────────────── */
.mpd_hero {
	position:relative;
	background:linear-gradient(135deg,rgba(10,41,66,.9),rgba(10,21,32,.6));
	border:1px solid #16324B;
	border-radius:20px;
	padding:34px 36px;
	overflow:hidden;
}
.mpd_hero_tit { font-size:26px; font-weight:700; color:#fff; }
.mpd_hero_tit .pt { color:#00B8FC; }
.mpd_hero_desc { margin-top:10px; font-size:15px; color:#a8b3bf; }
.mpd_hero_logo {
	position:absolute; right:24px; top:50%; transform:translateY(-50%);
	font-size:120px; color:rgba(0,184,252,.10); font-weight:900; line-height:1;
	pointer-events:none;
}

/* 포인트 + 등급 행 */
.mpd_row2 { display:flex; gap:20px; margin-top:20px; }
.mpd_point_card {
	flex:1 1 60%;
	background:linear-gradient(135deg,#0A2942,rgba(10,41,66,.35));
	border:1px solid #16324B;
	border-radius:18px;
	padding:26px 30px;
}
.mpd_card_head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.mpd_card_head .t { font-size:16px; font-weight:700; color:#fff; }
.mpd_card_head .more { font-size:13px; color:#8b98a5; }
.mpd_point_items { display:flex; gap:40px; }
.mpd_point_item { display:flex; align-items:center; gap:12px; }
.mpd_point_item .ic {
	width:44px; height:44px; border-radius:12px;
	background:rgba(0,184,252,.12);
	display:flex; align-items:center; justify-content:center;
	color:#00B8FC; font-size:20px;
}
.mpd_point_item .lab { font-size:13px; color:#a8b3bf; }
.mpd_point_item .val { font-size:22px; font-weight:800; color:#fff; }
.mpd_point_item .val span { font-size:14px; color:#00B8FC; margin-left:3px; }

.mpd_grade_card {
	flex:1 1 40%;
	background:linear-gradient(135deg,#0A2942,rgba(10,41,66,.35));
	border:1px solid #16324B;
	border-radius:18px;
	padding:26px 30px;
	display:flex; flex-direction:column; justify-content:center;
}
.mpd_grade_top { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.mpd_grade_top .ic { color:#00B8FC; font-size:22px; }
.mpd_grade_name { font-size:18px; font-weight:800; color:#fff; }
.mpd_grade_sub { font-size:12px; color:#8b98a5; margin-left:auto; }
.mpd_bar { width:100%; height:8px; border-radius:100px; background:#0A1826; overflow:hidden; margin-top:4px; }
.mpd_bar_fill { height:100%; border-radius:100px; background:linear-gradient(90deg,#00B8FC,#5163FE); }
/* % 는 상단 '다음 등급' 라인에 인라인 배치(하단 우측이면 모바일에서 챗봇 버튼과 겹침) */
.mpd_grade_pct_inline { color:#007BFE; font-weight:700; margin-left:4px; }

/* 섹션 공통 */
.mpd_sec { margin-top:30px; }
.mpd_sec_head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.mpd_sec_head .t { font-size:20px; font-weight:700; color:#fff; }
.mpd_sec_head .more { font-size:13px; color:#8b98a5; }

/* 쿠폰 요약 카드 */
.mpd_coupon_grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mpd_coupon_card {
	background:linear-gradient(135deg,#0A2942,#0B1829);
	border:1px solid #16324B;
	border-radius:14px;
	padding:22px 20px;
	min-height:150px;
	display:flex; flex-direction:column; justify-content:space-between;
}
.mpd_coupon_card .cc_tag { font-size:12px; color:#00B8FC; }
.mpd_coupon_card .cc_disc { font-size:20px; font-weight:800; color:#fff; margin-top:8px; }
.mpd_coupon_card .cc_disc + .cc_tit { font-size:13px; font-weight:400; color:#a8b3bf; margin-top:6px; }
.mpd_coupon_card .cc_tit { font-size:17px; font-weight:800; color:#fff; margin-top:8px; }
.mpd_coupon_card .cc_btn {
	margin-top:16px; height:40px; line-height:40px; border-radius:8px;
	background:rgba(0,184,252,.12); border:1px solid #16324B;
	color:#00B8FC; font-size:14px; text-align:center;
}
.mpd_coupon_empty {
	grid-column:1/-1;
	/* [260813] gcoupon_dash가 flex 캐러셀로 바뀌며 grid-column 무효 → flex에서도 전체 폭 차지하도록 */
	flex:1 1 100%; width:100%;
	text-align:center; color:#8b98a5; font-size:15px;
	padding:40px 0;
	border:1px dashed #16324B; border-radius:14px;
}

/* 주문/배송 현황 5단계 */
.mpd_delivery {
	background:linear-gradient(135deg,#0A2942,rgba(10,41,66,.35));
	border:1px solid #16324B;
	border-radius:18px;
	padding:28px 30px;
	display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.mpd_dstep { flex:1 1 0; text-align:center; }
.mpd_dstep .ic { color:#00B8FC; font-size:22px; margin-bottom:8px; }
.mpd_dstep .lab { font-size:13px; color:#a8b3bf; }
.mpd_dstep .num { font-size:24px; font-weight:800; color:#fff; margin-top:4px; }
.mpd_darrow { flex:0 0 auto; color:#2a4258; font-size:16px; }

/* 취소/교환/반품 서브 */
.mpd_delivery_sub {
	display:flex; gap:16px; margin-top:14px;
}
.mpd_delivery_sub .s {
	flex:1 1 0; text-align:center;
	background:#03080D; border:1px solid #16324B; border-radius:12px;
	padding:14px 0;
}
.mpd_delivery_sub .s .lab { font-size:12px; color:#8b98a5; }
.mpd_delivery_sub .s .num { font-size:18px; font-weight:700; color:#fff; margin-top:2px; }

/* 하단 기존 include(최근주문/찜/최근본) 다크 정리 */
.mypage_renew .shop_item_info_con.mypage { background:transparent; }

/* ── 날짜/기간/검색 UI 다크화 (시안 17) ──────────────────────────────── */
.mypage_content .shop_mypage_date_top_box { margin-bottom:20px; }
.mypage_content .shop_mypage_date_flex_box01 { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mypage_content .shop_mypage_date_flex_box01 > span { color:#8b98a5; }
.mypage_content .shop_date_form01 {
	position:relative; display:flex; align-items:center;
	background:#0E141C; border:1px solid #16324B; border-radius:8px;
	height:48px; padding:0 14px; min-width:180px;
}
.mypage_content .shop_date_form01 input {
	background:transparent; border:none; outline:none; color:#fff; font-size:15px; width:100%;
}
.mypage_content .shop_date_form01 input::placeholder { color:#8b98a5; }
.mypage_content .shop_date_form01 .img img { filter:brightness(0) invert(.7); }
.mypage_content .mypage_period_buttons { display:inline-flex; gap:8px; flex-wrap:wrap; }
.mypage_content .mypage_period_buttons button {
	height:48px; padding:0 22px; border-radius:100px;
	background:#0A1622; border:1px solid #16324B; color:#ccd6e0;
	font-size:15px; cursor:pointer; transition:background .2s,color .2s,border-color .2s;
}
.mypage_content .mypage_period_buttons button:hover { background:#12233A; color:#fff; }
.mypage_content .mypage_period_buttons button.active {
	background:linear-gradient(90deg,#00B8FC,#5163FE); border-color:transparent; color:#fff; font-weight:700;
}
.mypage_content .shop_mypage_search_box01 { margin-top:14px; }
.mypage_content .program_search_box01 {
	display:flex; align-items:center;
	background:#0E141C; border:1px solid #16324B; border-radius:8px;
	height:52px; padding:0 16px;
}
.mypage_content .program_search_box01 input {
	flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:15px;
}
.mypage_content .program_search_box01 input::placeholder { color:#8b98a5; }
.mypage_content .program_search_box01 .program_search_btn01 img { filter:brightness(0) invert(.7); }

/* ── 필터/정렬 알약탭 (.evaluation_tab_menu01 — 쿠폰 필터·리뷰 정렬 공용) ── */
.mypage_content .evaluation_tab_menu_box01 { display:flex; gap:10px; flex-wrap:wrap; }
.mypage_content .evaluation_tab_menu01 {
	height:44px; line-height:42px; padding:0 22px; border-radius:100px;
	background:#0A1622; border:1px solid #16324B; color:#ccd6e0; font-size:15px; font-weight:500;
	box-sizing:border-box; transition:background .2s,color .2s,border-color .2s;
}
.mypage_content .evaluation_tab_menu01:hover { background:#12233A; color:#fff; }
.mypage_content .evaluation_tab_menu01.active {
	background:linear-gradient(90deg,#00B8FC,#5163FE); border-color:transparent; color:#fff; font-weight:700;
}
/* 리뷰/문의 상단 큰 탭 (a.tit — 내가작성/작성가능) */
.mypage_content .tit_box a.tit { color:#a8b3bf; }
.mypage_content .tit_box a.tit.active { color:#00B8FC; }

/* ── 회원정보수정/비번변경/배송지 폼 다크 스킨 (회원가입 폼과 동일 클래스 재사용) ── */
.mypage_content .login_form_wrapper { background:transparent; padding:0; }
.mypage_content .login_tit01 {
	font-size:24px; font-weight:700; color:#fff; margin-bottom:24px; text-align:left;
}
.mypage_content .login_form_box01 { display:block; width:100%; margin-bottom:22px; }
.mypage_content .login_label_tit01 {
	display:block; font-size:16px; color:#fff; margin-bottom:10px; width:auto; text-align:left;
}
.mypage_content .login_label_tit01.key::before { content:""; display:inline-block; width:6px; height:6px; background:#00B8FC; border-radius:50%; margin-right:6px; vertical-align:middle; }
.mypage_content .login_input_form_box01 {
	position:relative;
	background:#0E141C; border:1px solid #16324B; border-radius:5px;
	height:50px; padding:0 16px; box-sizing:border-box;
	display:flex; align-items:center; width:100%;
}
.mypage_content .login_input_form_box01 input,
.mypage_content .login_input_form_box01 select {
	width:100%; height:48px; background:transparent; border:none; outline:none;
	color:#fff; font-size:16px; padding:0; box-shadow:none;
}
.mypage_content .login_input_form_box01 input::placeholder { color:#8b98a5; }
.mypage_content .login_input_form_box01:focus-within { border-color:#0DAAFC; } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
.mypage_content .login_tel_flex_box01 { display:flex; gap:10px; align-items:center; width:100%; }
.mypage_content .login_tel_flex_box01 > * { flex:1 1 0; min-width:0; }
.mypage_content .selectNum {
	height:50px; background:#0E141C; border:1px solid #16324B; border-radius:5px;
	color:#fff; font-size:16px; padding:0 12px; box-sizing:border-box;
}
.mypage_content select.selectNum option { background:#0E141C; color:#fff; }
.mypage_content .duplicate_flex_box { display:flex; gap:10px; align-items:stretch; width:100%; }
.mypage_content .duplicate_flex_box > .login_input_form_box01 { flex:1 1 auto; min-width:0; }
.mypage_content .login_form_box01 input[type="radio"],
.mypage_content .login_form_box01 input[type="checkbox"] { accent-color:#00B8FC; }
.mypage_content .login_form_box01 label,
.mypage_content .id_save_box { color:#c3ccd6; font-size:15px; }
/* 보조버튼(중복확인/우편번호검색) */
.mypage_content .login_chk_btn01.type02 {
	flex:0 0 auto; min-width:140px; height:50px; line-height:48px;
	background:rgba(0,184,252,.10); border:1px solid #00B8FC; border-radius:5px;
	color:#00B8FC; font-size:15px; text-align:center; padding:0 20px; box-sizing:border-box;
}
/* 하단 버튼줄 — 기존 login_chk_btn01 의 width/min-width 고정을 반드시 되돌려야 반반 배치됨 */
.mypage_content .login_submit_btn_box01 { display:flex; gap:20px; margin-top:32px; width:100%; }
.mypage_content .login_submit_btn_box01 > a,
.mypage_content .login_submit_btn_box01 > a.type02 {
	flex:1 1 0; width:auto; min-width:0; height:52px; line-height:52px; border-radius:6px;
	font-size:17px; font-weight:700; text-align:center; padding:0; box-sizing:border-box;
}
.mypage_content .login_submit_btn_box01 > a.type02 { background:transparent; border:1px solid #16324B; color:#fff; }
.mypage_content .login_submit_btn_box01 > a:not(.type02) { background:linear-gradient(90deg,#00B8FC,#5163FE); border:none; color:#fff; }
/* 인증 잠금(readonly) 필드 */
.mypage_content .login_input_form_box01 input[readonly] { color:#8b98a5; }

/* ── 반응형 ───────────────────────────────────────────────────────────── */
@media all and (max-width:1200px) {
	.mypage_layout { flex-direction:column; }
	.mypage_sidebar { position:static; width:100%; flex-basis:auto; }
	.mps_menu { flex-direction:row; flex-wrap:wrap; }
	.mps_menu_item { flex:1 1 30%; }
	.mpd_coupon_grid { grid-template-columns:repeat(2,1fr); }
}
@media all and (max-width:640px) {
	.mypage_layout { padding:20px 14px 60px; gap:20px; }
	.mpd_row2 { flex-direction:column; }
	.mpd_hero_logo { display:none; }
	.mpd_point_items { flex-direction:column; gap:20px; }
	.mpd_coupon_grid { grid-template-columns:1fr; }
	.mpd_delivery { flex-wrap:wrap; }
	.mpd_darrow { display:none; }
	.mpd_dstep { flex:1 1 30%; }
	.mps_menu_item { flex:1 1 45%; height:50px; padding:0 14px; gap:8px; font-size:14px; white-space:nowrap; }
	.mps_menu_item i { font-size:15px; width:16px; }
}

/* ===================================================================
   [260812] 피그마 dev HTML 기준 정밀 재작업 (에이전트 A~G 병합)
   시안 토큰: #00B8FC(강조·260819 민트→파랑 치환) #00B8FC(테두리) 반투명grad 활성 등
   =================================================================== */
/* ===== 사이드바 + 공통 (Agent A) ===== */

/* ── 사이드바 카드 ─────────────────────────────────────────────── */
/* [260818] 시안 변경 — 파란 테두리 제거 (주문/배송현황 섹션만 테두리 유지) */
.mypage_sidebar {
	background:linear-gradient(to bottom right, #0B2143 0%, #0F1A2C 100%); /* [260826 s07] 피그마 패널 스펙 그대로 */
	border:0;
	border-radius:20px;
	padding:50px 32px;
}

/* ── 프로필 아바타 ─────────────────────────────────────────────── */
.mps_avatar {
	width:120px; height:120px;
	border-radius:100px;
	background:radial-gradient(ellipse at 0% 0%, rgba(0,184,252,.2), rgba(81,99,254,.2));
	box-shadow:0 0 12px rgba(0,184,252,.15);
	border:1px solid #00B8FC;
	display:flex; align-items:center; justify-content:center;
}
.mps_avatar i { color:#CCCCCC; font-size:48px; }

/* ── 이름 / 님 / 환영문구 ──────────────────────────────────────── */
.mps_name { font-size:30px; font-weight:700; color:#fff; }
.mps_nim { font-size:20px; font-weight:400; color:#888; margin-left:4px; }
.mps_welcome { font-size:20px; font-weight:700; color:#888888; margin-top:4px; }

/* ── 등급 뱃지 ─────────────────────────────────────────────────── */
.mps_grade {
	display:inline-flex; align-items:center; justify-content:center;
	height:40px; padding:8px 38px; box-sizing:border-box;
	border-radius:100px;
	background:linear-gradient(90deg,#00B8FC,#5163FE);
	color:#fff; font-size:15px; font-weight:700;
	margin-top:8px;
}

/* ── 로그아웃 (반투명 + 테두리) ────────────────────────────────── */
.mps_logout {
	display:flex; align-items:center; justify-content:center;
	height:40px; padding:8px 38px; box-sizing:border-box;
	border-radius:100px;
	background:linear-gradient(90deg, rgba(0,184,252,.2), rgba(81,99,254,.2));
	border:1px solid #00B8FC;
	color:#fff; font-size:15px; font-weight:700;
	text-align:center; margin-top:20px; line-height:normal;
}

/* ── 메뉴 6 ────────────────────────────────────────────────────── */
.mps_menu_item {
	display:flex; align-items:center; gap:20px;
	height:79px; padding:0 20px;
	border-radius:10px;
	background:#000;
	font-size:20px; font-weight:700;
	transition:background .2s, color .2s, outline-color .2s;
}
.mps_menu_item i { width:30px; text-align:center; font-size:30px; }
.mypage_sidebar .mps_menu_item,
.mypage_sidebar .mps_menu_item span,
.mypage_sidebar .mps_menu_item i { color:#CCCCCC; }
.mypage_sidebar .mps_menu_item:hover {
	background:linear-gradient(90deg, rgba(0,184,252,.12), rgba(81,99,254,.12));
}
.mps_menu_item.active {
	background:linear-gradient(90deg, rgba(0,184,252,.2), rgba(81,99,254,.2));
	outline:1px solid #0DAAFC; outline-offset:-1px; /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
	font-weight:700;
}
.mypage_sidebar .mps_menu_item.active,
.mypage_sidebar .mps_menu_item.active span,
.mypage_sidebar .mps_menu_item.active i { color:#00B8FC; }

/* ── 서브탭 / 필터칩 (공통 알약) ───────────────────────────────── */
.mps_subtab a,
.mypage_content .evaluation_tab_menu01 {
	display:inline-flex; align-items:center; justify-content:center;
	height:auto; line-height:1.3; padding:10px 20px;
	border-radius:10px;
	background:linear-gradient(90deg,#07223D,#0B1829);
	outline:1px solid #204B66; outline-offset:-1px; border:none;
	font-weight:700; box-sizing:border-box;
	transition:box-shadow .2s, outline-color .2s;
}
.mps_subtab a { font-size:20px; }
.mypage_content .evaluation_tab_menu01 { font-size:12px; }
.mypage_content .mps_subtab a,
.mypage_content .evaluation_tab_menu01 { color:#fff; }
.mps_subtab a.active,
.mypage_content .evaluation_tab_menu01.active {
	box-shadow:none;
	outline:1px solid #0DAAFC; outline-offset:-1px; /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
	background:#0E2039; /* [260819] 톤다운 — 래플 배지 채움 */
}
.mypage_content .mps_subtab a.active,
.mypage_content .evaluation_tab_menu01.active { color:#00B8FC; }

/* ── 기간칩 (전체/1개월/6개월/1년) ─────────────────────────────── */
.mypage_content .mypage_period_buttons button {
	height:33px; padding:0 16px; box-sizing:border-box;
	border-radius:5px;
	background:linear-gradient(180deg,#07223D,#0B1829); border:none; outline:1px solid #121B21; outline-offset:-1px; /* [260826c] 사용자 지시: 박스 면 #07223D 그라데이션 톤 통일 */
	color:#888888; font-size:12px; font-weight:700; cursor:pointer;
	transition:background .2s, color .2s, outline-color .2s;
}
.mypage_content .mypage_period_buttons button.active {
	background:radial-gradient(#011D41, rgba(2,74,167,.3));
	outline:1px solid rgba(13,170,252,.3); outline-offset:-1px; /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
	color:#00B8FC;
}

/* ── 날짜 입력 ─────────────────────────────────────────────────── */
.mypage_content .shop_date_form01 {
	background:linear-gradient(180deg,#07223D,#0B1829); border:none; outline:1px solid #1B3250; outline-offset:-1px; /* [260826c] 사용자 지시: 박스 면 #07223D 그라데이션 톤 통일 */
	border-radius:5px; height:33px; padding:0 12px; min-width:150px;
}
.mypage_content .shop_date_form01 input {
	background:transparent; border:none; outline:none;
	color:#888888; font-size:12px; width:100%;
}
.mypage_content .shop_date_form01 input::placeholder { color:#888888; }
.mypage_content .shop_date_form01 .img img { filter:brightness(0) invert(.55); }

/* ── 검색 박스 ─────────────────────────────────────────────────── */
.mypage_content .program_search_box01 {
	background:linear-gradient(180deg,#07223D,#0B1829); border:none; border-radius:5px; /* [260826c] 사용자 지시: 박스 면 #07223D 그라데이션 톤 통일 */
	height:33px; padding:0 12px; display:flex; align-items:center;
}
.mypage_content .program_search_box01 input {
	flex:1; background:transparent; border:none; outline:none;
	color:#888888; font-size:12px;
}
.mypage_content .program_search_box01 input::placeholder { color:#888888; }
.mypage_content .program_search_box01 .program_search_btn01 img { filter:brightness(0) invert(.55); }

/* ── 목록 테이블 (.shop_mypage_table01) ───────────────────────── */
.mypage_content .shop_mypage_table01 table thead th {
	background:linear-gradient(180deg,#07223D,#0B1829); color:#888888; font-size:12px; font-weight:700; /* [260826c] 사용자 지시: 박스 면 #07223D 그라데이션 톤 통일 */
	height:33px; border-left:1px solid #666666;
}
.mypage_content .shop_mypage_table01 table thead th:first-child {
	background:linear-gradient(180deg,#07223D,#0B1829); border-left:none; /* [260826c] 사용자 지시: 박스 면 #07223D 그라데이션 톤 통일 */
}
.mypage_content .shop_mypage_table01 table tbody tr { background:#000; }
.mypage_content .shop_mypage_table01 table tbody td {
	background:#000; color:#fff; font-size:12px;
	height:40px; border-bottom:1px solid #333333;
}
.mypage_content .shop_mypage_table01 table tbody td.first,
.mypage_content .shop_mypage_table01 table tbody td.tit01 { color:#fff; }
.mypage_content .shop_mypage_table01 table tbody td:last-child { color:#CCCCCC; }
.mypage_content .shop_mypage_table01 table tbody td.blue { color:#007BFE !important; } /* [260819] 적립(+) 값 로열블루 — content.css td 흰색 !important 상쇄 */
.mypage_content .shop_mypage_table01 table tbody td.red { color:#FF5A6E; }

/* ── 페이지네이션 (Page.newIndexUserList) ──────────────────────── */
.mypage_content .prd_page_nav_wrapper {
	display:flex; align-items:center; justify-content:center; gap:10px;
	margin-top:30px;
}
.mypage_content .prd_page_nav_num_box { display:inline-flex; gap:10px; }
.mypage_content .prd_page_nav_num_box a.prd_page_nav_num {
	display:inline-flex; align-items:center; justify-content:center;
	min-width:44px; height:44px; padding:0 10px; box-sizing:border-box;
	border-radius:10px;
	background:linear-gradient(90deg,#07223D,#0B1829);
	outline:1px solid #204B66; outline-offset:-1px;
	color:#fff; font-size:20px; font-weight:700;
}
.mypage_content .prd_page_nav_num_box a.active.prd_page_nav_num {
	box-shadow:none; outline:1px solid #0DAAFC; outline-offset:-1px; color:#fff; /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
}
.mypage_content .prd_page_nav_arw {
	display:inline-flex; align-items:center; justify-content:center;
	width:44px; height:44px; border-radius:10px;
	background:linear-gradient(90deg,#07223D,#0B1829);
	outline:1px solid #204B66; outline-offset:-1px;
}
.mypage_content .prd_page_nav_arw.prev img { transform:rotate(180deg); }

/* ===== 대시보드 (Agent B) ===== */
.mpd_hero { background:#000; border:1px solid #00B8FC; border-radius:20px; padding:34px 40px; }
.mpd_hero_tit { font-size:30px; font-weight:700; color:#fff; }
.mpd_hero_tit .pt { color:#00B8FC; }
.mpd_hero_desc { margin-top:12px; font-size:20px; font-weight:700; color:#888888; }
.mpd_hero_logo { position:absolute; right:36px; top:50%; transform:translateY(-50%); width:189px; height:157px; font-size:0; color:transparent; background:none; }
.mpd_hero_logo img { width:189px; height:157px; object-fit:contain; }
.mpd_row2 { display:flex; gap:65px; margin-top:30px; align-items:stretch; }
.mpd_point_card { flex:1 1 auto; height:170px; box-sizing:border-box; padding:21px 40px; background:linear-gradient(135deg,#09273E,#01070B); border:none; border-radius:10px; } /* [260826 s01] 다크 대각 grad·무테 */
.mpd_card_head { margin-bottom:14px; }
.mpd_card_head .t { font-size:20px; font-weight:700; color:#fff; }
.mpd_card_head .more { font-size:10px; color:#00B8FC; }
.mpd_point_items { position:relative; display:flex; align-items:center; gap:0; }
.mpd_point_item { flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:16px; }
.mpd_point_item + .mpd_point_item::before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:1px; height:90px; background:#1B3250; } /* [260826] 인디고 실선 → 무광 네이비 */
.mpd_point_item .ic { width:80px; height:80px; border-radius:50%; background:linear-gradient(#082135,#082135) padding-box, linear-gradient(135deg,#DCE2E9,#1492E9) border-box; border:2px solid transparent; display:flex; align-items:center; justify-content:center; color:#fff; font-size:50px; } /* [260826 s01] 다크 면+밝은 링+흰 심볼 */
.mpd_point_item .lab { font-size:20px; color:#fff; }
.mpd_point_item .val { font-size:20px; font-weight:700; color:#007BFE; }
.mpd_point_item .val span { font-size:15px; color:#fff; margin-left:3px; font-weight:400; }
.mpd_grade_card { flex:0 0 378px; width:378px; height:170px; box-sizing:border-box; background:linear-gradient(135deg,#09273E,#01070B); border:none; border-radius:10px; /* [260826 s01] */ padding:21px 30px; display:flex; flex-direction:row; align-items:center; gap:20px; justify-content:flex-start; }
.mpd_grade_icon { flex:0 0 auto; width:80px; height:80px; border-radius:50%; background:linear-gradient(#082135,#082135) padding-box, linear-gradient(135deg,#DCE2E9,#1492E9) border-box; border:2px solid transparent; display:flex; align-items:center; justify-content:center; color:#007BFE; font-size:40px; } /* [260826 s01] 왕관 파랑 */
.mpd_grade_body { flex:1 1 auto; min-width:0; }
.mpd_grade_lab { font-size:15px; color:#CCCCCC; }
.mpd_grade_name { font-size:20px; color:#fff; font-weight:700; margin:2px 0; }
.mpd_grade_sub { font-size:10px; color:#CCCCCC; margin-bottom:8px; }
.mpd_bar { width:100%; height:20px; border-radius:50px; background:#002543; overflow:hidden; margin-top:4px; }
.mpd_bar_fill { height:100%; border-radius:50px; background:#007BFE; } /* [260826 s01] */
.mpd_grade_pct { font-size:12px; color:#fff; text-align:right; margin-top:4px; }
.mpd_sec_head .t { font-size:30px; font-weight:700; color:#fff; }
.mpd_sec_head .more { font-size:10px; color:#00B8FC; }
.mpd_coupon_grid { grid-template-columns:repeat(4, 1fr); gap:16px; justify-items:stretch; }
.mpd_coupon_card { position:relative; width:100%; max-width:294px; aspect-ratio:294 / 337; min-height:0; border-radius:10px; border:1px solid #00B8FC; background:linear-gradient(135deg,#003A69, rgba(0,58,105,.2)); padding:24px 22px 40px; }
.mpd_coupon_card::after { content:""; position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:190px; height:2px; background:#0EAAFC; }
.mpd_coupon_card .cc_tag { font-size:12px; color:#00B8FC; }
.mpd_coupon_card .cc_disc { color:#fff; }
.mpd_coupon_card .cc_tit { color:#fff; }
.mpd_coupon_card .cc_btn { background:rgba(0,184,252,.10); border:1px solid #00B8FC; color:#00B8FC; }
.mpd_delivery { background:#000; border:1px solid #00B8FC; border-radius:10px; }
.mpd_dstep .ic { width:60px; height:60px; margin:0 auto 10px; border-radius:50%; background:#000; border:1px solid #204B66; display:flex; align-items:center; justify-content:center; color:#00B8FC; font-size:30px; }
.mpd_dstep .lab { font-size:20px; color:#fff; }
.mpd_dstep .num { font-size:20px; font-weight:700; color:#fff; margin-top:4px; }
.mpd_darrow { color:#00B8FC; font-size:18px; }
.mpd_card_head .more, .mpd_sec_head .more, .mpd_coupon_card .cc_btn { color:#00B8FC; }

/* ===== 포인트 내역 테이블 (Agent C) ===== */
.mypage_content .shop_mypage_table01 table { width:100%; border-collapse:collapse; }
.mypage_content .shop_mypage_table01 table tbody tr { background:#000; height:40px; }
.mypage_content .shop_mypage_table01 table tbody td {
	background:#000; border-bottom:1px solid #333; height:40px;
	font-size:12px; vertical-align:middle;
}
.mypage_content .shop_mypage_table01 table tbody td.first { color:#fff; font-size:12px; }
.mypage_content .shop_mypage_table01 table tbody td.tit01 { color:#fff; font-size:12px; font-weight:700; }
.mypage_content .shop_mypage_table01 table tbody tr:has(td.red) td.tit01 { color:#FD245C; }
.mypage_content .shop_mypage_table01 table tbody tr:has(td.blue) td.tit01 { color:#00B8FC; }
.mypage_content .shop_mypage_table01 table tbody td.tit01 .point_detail_info { color:#888; font-weight:400; }
.mypage_content .shop_mypage_table01 table tbody td.tit01 .point_detail_info .orders_id { color:#888; }
.mypage_content .shop_mypage_table01 table tbody td.tit01 .point_detail_info .product_name { color:#aaa; }
.mypage_content .shop_mypage_table01 table tbody td.blue { color:#007BFE !important; font-size:12px; font-weight:700; }
/* [260819] 상태 컬럼(적립/사용 라벨)은 기존 중립색 유지 — 금액 값만 로열블루 */
.mypage_content .shop_mypage_table01 table tbody td.blue:last-child { color:#fff !important; font-weight:400; }
.mypage_content .shop_mypage_table01 table tbody td.red { color:#FD245C; font-size:12px; font-weight:700; }
.mypage_content .shop_mypage_table01 table tbody td:nth-child(4) { color:#CCCCCC; font-size:12px; }

/* ===== 쿠폰 (Agent D) ===== */
/* 쿠폰 카드 accent 토큰 통일 */
.mypage_content .gcoupon_dash .gcoupon_badge { border-color:#00B8FC; color:#00B8FC; background:rgba(0,184,252,.08); }
.mypage_content .gcoupon_dash .gcoupon_value .pct { color:#007BFE; }
.mypage_content .gcoupon_desc .gcp_hl { color:#00B8FC; }
.mypage_content .gcoupon_dash .gcoupon_btn { background:linear-gradient(135deg, rgba(10,41,66,.85) 0%, rgba(10,41,67,.35) 100%); border:1px solid #204B66; } /* [260820] PPT s9 반투명 */
.mypage_content .gcoupon_dash .gcoupon_btn:hover { border-color:#0DAAFC; } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
/* 페이지네이션 (.programPage) */
.mypage_content .programPage { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:30px; text-align:center; }
.mypage_content .programPage a {
	display:inline-flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; padding:0 12px;
	border-radius:10px; color:#fff; font-size:13px; font-weight:700;
	background:linear-gradient(90deg,#07223D,#0B1829);
	outline:1px solid #16324B; outline-offset:-1px;
}
.mypage_content .programPage a.active { color:#fff; outline:1px solid #0DAAFC; box-shadow:none; } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
.mypage_content .programPage a img { filter:brightness(0) invert(.85); }

/* ===== 나의활동 리뷰/문의 (Agent E) ===== */
.myPageReviewWapper .shop_item_info_con,
.myPageInquirywWapper .shop_item_info_con {
	background:#000; border:1px solid #00B8FC; border-radius:10px;
	padding:30px 20px; box-sizing:border-box;
}
.myPageReviewWapper .tit_box { display:flex; gap:24px; margin-bottom:20px; }
.myPageReviewWapper .tit_box a.tit {
	color:#888 !important; font-size:15px; font-weight:700; text-decoration:none;
	padding-bottom:8px; border-bottom:2px solid transparent;
}
.myPageReviewWapper .tit_box a.tit.active { color:#fff !important; border-bottom-color:#0DAAFC; } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
.myPageReviewWapper .sub_tit_box .l_box > .tit {
	font-size:30px; font-weight:700; color:#fff; display:inline-flex; align-items:baseline; gap:6px;
}
.myPageReviewWapper .sub_tit_box .l_box > .tit #itemindexCount { font-size:20px; font-weight:400; color:#fff; }
.myPageInquirywWapper .tit_box .tit {
	font-size:30px; font-weight:700; color:#fff; display:inline-flex; align-items:baseline; gap:6px;
}
.myPageInquirywWapper .tit_box .tit span { font-size:20px; font-weight:400; color:#fff; }
.myPageReviewWapper .evaluation_tab_menu01 { color:#888 !important; }
.myPageReviewWapper .evaluation_tab_menu01.active { color:#fff !important; }
.myPageReviewWapper .review-product-info .product-name { color:#fff; font-size:14px; font-weight:700; }
.myPageReviewWapper .review-product-info .product-desc { color:#666; font-size:12px; }
.myPageReviewWapper .review-stars .s { font-size:20px; }
.myPageReviewWapper .review-stars .s.on { color:#006DFC !important; } /* [260826 s05] */
.myPageReviewWapper .avg-stars i { font-size:20px !important; }
.myPageReviewWapper .avg-stars i.on { color:#006DFC !important; } /* [260826 s05] */
.myPageReviewWapper .review-text-preview { color:#fff; }
.myPageReviewWapper .review-writer { color:#CCCCCC; font-size:12px; font-weight:700; }
.myPageReviewWapper .review-writer span { color:#CCCCCC; }
.myPageReviewWapper .mypage-review-item { border-bottom:1px solid #333; }
.myPageInquirywWapper .inquiry-product-info .product-name { color:#fff; font-size:14px; font-weight:700; }
.myPageInquirywWapper .inquiry-content-preview { color:#fff; font-size:12px; }
.myPageInquirywWapper .inquiry-meta .date { color:#CCCCCC; font-size:12px; font-weight:700; }
.myPageInquirywWapper .mypage-inquiry-item { border-bottom:1px solid #333; }
.myPageInquirywWapper .inquiry-meta .status {
	width:100px; height:30px; padding:0; border-radius:100px;
	font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
}
.myPageInquirywWapper .inquiry-meta .status.answered { background:#002152 !important; color:#00B8FC !important; }
.myPageInquirywWapper .inquiry-meta .status.waiting { background:#222222 !important; color:#999999 !important; }

/* ===== 나의쇼핑 (Agent F) ===== */
.mypage_renew .mypage_content .custom_tit01 { font-size:30px; font-weight:700; color:#fff; line-height:1.3; }
.mypage_renew .mps_subtab { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.mypage_renew .mps_subtab a {
	display:inline-flex; align-items:center; justify-content:center;
	padding:20px; border-radius:30px; background:linear-gradient(90deg,#07223D,#0B1829);
	font-size:20px; font-weight:700; color:#fff; outline:1px solid #204B66; outline-offset:-1px;
	box-shadow:none; text-decoration:none; transition:outline-color .2s, box-shadow .2s;
}
.mypage_renew .mps_subtab a:hover { color:#fff; }
.mypage_renew .mps_subtab a.active { color:#00B8FC; outline:1px solid #0DAAFC; outline-offset:-1px; box-shadow:none; background:#0E2039; } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
.mypage_renew .shop_list_con_box01.item04.mypage_interest_box01 { display:flex; flex-wrap:wrap; gap:20px; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 {
	position:relative; width:300px; max-width:300px; height:457px; box-sizing:border-box; padding:20px;
	/* [260831] 사용자 지시: 쇼핑하기 상품카드와 동일 그라데이션(우하단 더 어둡게) */
	background:linear-gradient(to bottom right, #0A2942 0%, rgba(10,41,67,.13) 50%); box-shadow:1px 1px 5px -1px #082040;
	border:1px solid #00B8FC; border-radius:10px; overflow:hidden;
}
.mypage_renew .shop_list_con_box01.item04 .shop_list_item01:hover { background:linear-gradient(to bottom right, #0A2942 0%, rgba(10,41,67,.13) 50%) !important; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 > a { display:block; color:#fff; text-decoration:none; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 .img { width:100%; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:#010609; margin-bottom:14px; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 .img img { width:100%; height:100%; object-fit:cover; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 a.fas.fa-heart,
.mypage_renew .mypage_interest_box01 .shop_list_item01 .interest_btn01 { position:absolute; top:16px; right:16px; z-index:3; color:#00B8FC; font-size:20px; cursor:pointer; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 .shop_x_btn { position:absolute; top:14px; right:14px; z-index:3; width:22px; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 .tit { font-size:15px; font-weight:700; color:#fff; line-height:1.4; margin-bottom:8px; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 .alt { font-size:13px; color:rgba(255,255,255,.6); margin-bottom:12px; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 .price_box01 .price01 { display:flex; align-items:center; gap:2px; color:#fff; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 .price_box01 .price01 b { font-size:18px; font-weight:700; color:#fff; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 .price_box01 .discount01 { font-size:13px; color:rgba(255,255,255,.45); text-decoration:line-through; }
.mypage_renew .mypage_interest_box01 .shop_list_item01 .price_box01 .percent01 { font-size:14px; font-weight:700; color:#00B8FC; }

/* ===== 회원정보 폼 (Agent G) ===== */
.mypage_content .login_form_wrapper { background:#0E141C; border-radius:10px; padding:30px 40px; }
.mypage_content .address_content_wrap > .login_form_wrapper { background:transparent; padding:0; border-radius:0; }
.mypage_content .login_label_tit01 { display:block; font-size:17px; color:#fff; font-weight:400; margin-bottom:10px; width:auto; text-align:left; }
.mypage_content .login_label_tit01:not(:empty)::before,
.mypage_content .login_label_tit01.key::before {
	content:""; display:inline-block; width:15px; height:15px; background:#00B8FC; border-radius:2px; margin-right:8px; vertical-align:-2px;
}
.mypage_content .login_input_form_box01 { background:#0E141C; border:1px solid #666666; border-radius:5px; height:50px; padding:0 16px; }
.mypage_content .login_input_form_box01 input,
.mypage_content .login_input_form_box01 select { color:#fff; font-size:17px; }
.mypage_content .login_input_form_box01 input::placeholder { color:#888888; }
.mypage_content .login_input_form_box01:focus-within { border-color:#0DAAFC; } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
.mypage_content .login_input_form_box01 input[readonly] { color:#8b98a5; }
.mypage_content .autocomplete-suggestions { background:#0E141C; border:1px solid #666666; border-radius:5px; color:#fff; margin-top:4px; overflow:hidden; z-index:20; }
.mypage_content .autocomplete-suggestions > * { color:#fff; font-size:15px; padding:8px 12px; }
.mypage_content .autocomplete-suggestions > *:hover { background:#12233A; }
.mypage_content .email_split_box .email_sel { background:#0E141C; border:1px solid #00B8FC; color:#fff; font-size:17px; }
.mypage_content .email_split_box .email_sel option { background:#0E141C; color:#fff; }
.mypage_content .login_form_box01 > div:not([class]) { gap:10px !important; }
.mypage_content .login_form_box01 > div:not([class]) > .id_save_box {
	display:inline-flex; align-items:center; gap:7px; background:#0E141C; border:1px solid #666666; border-radius:10px; padding:5px 10px; margin:0; color:#CCCCCC; font-size:17px;
}
.mypage_content .login_form_box01 > div:not([class]) > .id_save_box input[type="checkbox"] { width:18px; height:18px; accent-color:#00B8FC; margin:0; }
.mypage_content .radio_type01_wrapper { display:flex; gap:28px; align-items:center; }
.mypage_content .radio_type01 { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:20px; margin:0; cursor:pointer; }
.mypage_content .radio_type01 input[type="radio"] { -webkit-appearance:none; appearance:none; margin:0; width:30px; height:30px; border-radius:50%; border:1px solid #666666 !important; background:#0E141C; cursor:pointer; transition:border-color .15s; }
.mypage_content .radio_type01 input[type="radio"]:checked { border:1px solid #0DAAFC !important; background:radial-gradient(circle, #00B8FC 0 7.5px, transparent 8px); } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
.mypage_content .id_save_box { display:inline-flex; align-items:center; gap:8px; color:#CCCCCC; font-size:17px; }
.mypage_content .login_form_box01 > .id_save_box input[type="checkbox"],
.mypage_content .login_form_box01 .id_save_box input[type="checkbox"] { width:25px; height:25px; accent-color:#00B8FC; margin:0; }
.mypage_content .login_form_box01 input[type="radio"],
.mypage_content .login_form_box01 input[type="checkbox"] { accent-color:#00B8FC; }
.mypage_content .login_chk_btn01.type02 { background:rgba(0,184,252,.10); border:1px solid #00B8FC; color:#00B8FC; }
.mypage_content .login_submit_btn_box01 { gap:20px; margin-top:32px; }
.mypage_content .login_submit_btn_box01 > a,
.mypage_content .login_submit_btn_box01 > a.type02 { flex:1 1 0; width:auto; min-width:0; height:50px; line-height:50px; border-radius:5px; font-size:20px; font-weight:700; text-align:center; padding:0; }
.mypage_content .login_submit_btn_box01 > a.type02 { background:transparent; border:1px solid #00B8FC; color:#fff; }
.mypage_content .login_submit_btn_box01 > a:not(.type02) { background:radial-gradient(ellipse at 0% 0%, #00B8FC, #5163FE); border:none; color:#fff; }

/* ================= [260812] 후속 수정 (사용자 지적 반영) ================= */
/* 로그아웃 텍스트 — 전역 a{color:#000} 이 이겨서 검정 → 강제 흰색 */
.mypage_sidebar .mps_logout { color:#fff !important; }
/* 날짜 + 기간칩 + 검색을 한 줄로 (시안: space-between) */
.mypage_content .shop_mypage_date_top_box {
	display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
	gap:20px; width:100%;
}
.mypage_content .shop_mypage_date_box01 {
	display:flex; flex-wrap:nowrap; align-items:center; gap:12px;
	flex:1 1 auto; min-width:0;
}
.mypage_content .shop_mypage_date_flex_box01 { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; flex:0 0 auto; }
.mypage_content .mypage_period_buttons { display:inline-flex; gap:0; flex:0 0 auto; }
/* 한 줄에 다 들어가도록 날짜입력·칩 폭 축소(일반 데스크탑 1366~ 겹침 방지) */
.mypage_content .shop_date_form01 { width:148px; min-width:0; }
.mypage_content .shop_date_form01 input { width:100%; min-width:0; }
.mypage_content .mypage_period_buttons button { padding:0 12px; min-width:0; width:auto; }
.mypage_content .shop_mypage_search_box01 { margin-top:0; flex:0 0 280px; width:280px; max-width:100%; }
/* 중간~좁은 폭: 검색을 아래 줄로 접어 겹침 방지 */
@media (max-width:1180px){
	.mypage_content .shop_mypage_date_top_box { flex-wrap:wrap; }
	.mypage_content .shop_mypage_search_box01 { flex:1 1 100%; width:100%; margin-top:14px; }
}
@media (max-width:768px){
	.mypage_content .shop_mypage_date_box01 { flex-wrap:wrap; }
}
/* 필터탭(evaluation_tab_menu01) 기존 밝은 border/underline 잔재 제거 */
.mypage_content .evaluation_tab_menu_box01 { border:none !important; }
.mypage_content .evaluation_tab_menu01 { border:none !important; text-decoration:none !important; }
/* 등급 배지 GOLD 줄바꿈(GOL/D) 방지 */
.mypage_sidebar .mps_grade { white-space:nowrap; }

/* ================= [260812] 사이드바 시안(630:378 JSON) 정밀 정합 ================= */
/* 아바타: 반투명 파랑 grad(0.2) + 글로우 (불투명 채움 아님), 사람 아이콘 #CCC */
.mypage_sidebar .mps_avatar {
	background:linear-gradient(135deg,rgba(0,184,252,.2),rgba(81,99,254,.2));
	box-shadow:0 0 12px rgba(0,184,252,.15);
	color:#CCCCCC;
}
/* [260826 s07] 메뉴 비활성: 무박스(투명) — 시안 img_0, 활성만 파란 테두리 유지 */
.mypage_sidebar .mps_menu_item {
	background:transparent; border:1px solid transparent; border-radius:10px;
}
.mypage_sidebar .mps_menu_item,
.mypage_sidebar .mps_menu_item span { color:#C8C4C1; }
.mypage_sidebar .mps_menu_item i { color:#CCCCCC; }
/* 메뉴 active: 반투명 파랑 grad(0.2) + 파랑 #00B8FC 텍스트/아이콘 (260819 글로우 제거) */
.mypage_sidebar .mps_menu_item.active {
	background:linear-gradient(90deg,rgba(0,184,252,.2),rgba(81,99,254,.2));
	border:1px solid rgba(13,170,252,.4); /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
	box-shadow:none;
}
.mypage_sidebar .mps_menu_item.active,
.mypage_sidebar .mps_menu_item.active span,
.mypage_sidebar .mps_menu_item.active i { color:#00B8FC; }

/* ================= [260812] 대시보드 콘텐츠 시안(630:379 JSON) 정밀 정합 ================= */
/* 히어로: 배경/테두리 제거(검정 위 텍스트) + 제목 30 + 부제 20/#888 */
.mypage_content .mpd_hero { background:transparent; border:none; padding:6px 4px 4px; }
.mypage_content .mpd_hero_tit { font-size:30px; }
.mypage_content .mpd_hero_desc { font-size:20px; color:#888888; }
/* [260826 s01] 포인트/등급 카드: 다크 대각 grad #09273E→#01070B, 무테, r10 */
.mypage_content .mpd_point_card,
.mypage_content .mpd_grade_card {
	background:linear-gradient(135deg,#09273E,#01070B);
	border:none; border-radius:10px;
}
.mypage_content .mpd_card_head .t { font-size:20px; }
.mypage_content .mpd_card_head .more,
.mypage_content .mpd_sec_head .more { color:#00B8FC; }
/* 섹션 제목 30 (내 쿠폰/주문·배송 현황) */
.mypage_content .mpd_sec_head .t { font-size:30px; }
/* [260826 s01] 포인트 아이콘 원: 다크 면 #082135 + 밝은 그라데 링, 흰 심볼 */
.mypage_content .mpd_point_item .ic {
	background:linear-gradient(#082135,#082135) padding-box, linear-gradient(135deg,#DCE2E9,#1492E9) border-box; color:#fff;
}
.mypage_content .mpd_point_item .val span { color:#ffffff; }
/* 포인트 2종 사이 세로 구분선 — [260826] 인디고 실선 폐기, 무광 네이비 */
.mypage_content .mpd_point_items { align-items:stretch; }
.mypage_content .mpd_point_item:first-child { padding-right:40px; border-right:1px solid #1B3250; }
/* 등급 아이콘 원 청록 + 프로그레스(바탕 #002543 / 채움 #00B8FC) */
.mypage_content .mpd_grade_icon { color:#007BFE; background:linear-gradient(#082135,#082135) padding-box, linear-gradient(135deg,#DCE2E9,#1492E9) border-box; } /* [260826 s01] 왕관 파랑+링 */
.mypage_content .mpd_bar { background:#002543; }
.mypage_content .mpd_bar_fill { background:#007BFE; } /* [260826 s01] */
.mypage_content .mpd_grade_pct_inline { color:#007BFE; }
/* 배송 5단계 원: 검정 배경 + 청록 테두리(r40) + 청록 아이콘, 화살표 청록 */
.mypage_content .mpd_dstep .ic {
	background:#000; border:1px solid #204B66; color:#00B8FC;
}
.mypage_content .mpd_darrow { color:#00B8FC; }
/* 대시보드 쿠폰 미리보기 카드: 다른 카드와 톤 통일(#003A69 grad + 청록 accent) */
.mypage_content .mpd_coupon_card {
	background:linear-gradient(135deg,#003A69,rgba(0,58,105,.2)); border:none; border-radius:10px;
}
.mypage_content .mpd_coupon_card .cc_tag { color:#00B8FC; }
.mypage_content .mpd_coupon_card .cc_btn { border:1px solid #00B8FC; color:#00B8FC; background:transparent; }

/* ===== [260812] 대시보드 쿠폰 미리보기: 쿠폰화면 실카드 이식(시안 630:375) ===== */
.mypage_content .gcoupon_dash { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px; }
@media (max-width:1200px){ .mypage_content .gcoupon_dash { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .mypage_content .gcoupon_dash { grid-template-columns:1fr; } }
.mypage_content .gcoupon_dash .gcoupon_card { position:relative; display:flex; flex-direction:column; background:#0a0c15; border:1px solid #1c2440; border-radius:14px; padding:22px 22px 20px; color:#e8ecf6; overflow:hidden; transition:transform .2s, box-shadow .2s; } /* [260831] 사용자 지시: 쿠폰함(coupon/index.jsp) 카드와 동일한 투명한 다크 배경으로 통일 */
.mypage_content .gcoupon_dash .gcoupon_card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
/* [260831] 사용자 지시: 카드 배경·테두리를 채널 색에 맞춰 분리(온라인은 기존 유지) */
/* [260903] 사용자 지시: 쿠폰 페이지와 같은 농도로 — 불투명 틴트를 알파값으로 낮춘다 */
.mypage_content .gcoupon_dash .gcoupon_card.ch2 { border-color:rgba(51,160,162,.30); background:rgba(3,26,29,.30); }   /* 오프라인 — 민트 */
.mypage_content .gcoupon_dash .gcoupon_card.ch3 { border-color:rgba(139,70,255,.26); background:rgba(18,11,36,.30); }  /* 팝업 — 퍼플 */
.mypage_content .gcoupon_dash .gcoupon_badge { display:inline-block; position:absolute; top:14px; left:14px; z-index:1; font-size:11px; font-weight:700; letter-spacing:.1em; padding:5px 14px; border-radius:999px; border:1px solid #204B66; color:#00B8FC; background:#0E2039; }
/* [260828] 쿠폰함과 동일: ch3 이미지도 풀블리드, 배지는 불투명 다크(보라 톤) 채움으로 이미지 위에서도 또렷하게 */
/* [260831] 사용자 지시: 오프라인 배지도 민트 톤 */
.mypage_content .gcoupon_dash .gcoupon_card.ch2 .gcoupon_badge { border-color:rgba(51,160,162,.45); color:rgba(110,250,235,.8); background:rgba(6,36,38,.5); }
.mypage_content .gcoupon_dash .gcoupon_card.ch3 .gcoupon_badge { border-color:rgba(139,70,255,.40); color:rgba(185,140,255,.8); background:rgba(28,14,57,.5); }
/* [260831] 사용자 지시: 쿠폰함과 동일 — 이미지를 카드 안쪽으로 들여 상하좌우 여백 확보(영역은 유지, padding 으로만 축소) */
.mypage_content .gcoupon_dash .gcoupon_art { height:150px; margin:-22px -22px 8px; padding:22px 22px 0; box-sizing:border-box; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.mypage_content .gcoupon_dash .gcoupon_art img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.mypage_content .gcoupon_dash .gcoupon_sub { font-size:15px; color:#e8ecf6; }
.mypage_content .gcoupon_dash .gcoupon_value { margin-top:6px; font-size:28px; font-weight:800; color:#fff; line-height:1.15; word-break:keep-all; }
/* [260831] 사용자 지시: 채널별 할인값 색 구분 — 온라인 블루 / 오프라인 민트 / 팝업 퍼플 (쿠폰함과 동일값) */
.mypage_content .gcoupon_dash .gcoupon_value .pct { color:#007BFE; }                       /* 온라인(기본) */
.mypage_content .gcoupon_dash .gcoupon_card.ch2 .gcoupon_value .pct { color:rgba(110,250,235,.72); }     /* 오프라인 — 민트 */
/* [260828] ch3: 숫자만 보라, "할인쿠폰" 텍스트는 화이트 / 할인값 0으로 쿠폰명 메인일 땐 화이트 */
.mypage_content .gcoupon_dash .gcoupon_card.ch3 .gcoupon_value .pct { color:rgba(167,107,255,.75); }     /* 팝업 — 퍼플 */
.mypage_content .gcoupon_dash .gcoupon_card.ch3 .gcoupon_value.is_name { color:#fff; } /* 크기는 할인쿠폰 표기와 동일(28px) */
.mypage_content .gcoupon_dash .gcoupon_caption { margin-top:6px; font-size:10px; font-weight:600; letter-spacing:.14em; color:#5d6884; }
.mypage_content .gcoupon_dash .gcoupon_date { margin-top:10px; margin-bottom:16px; font-size:12px; color:#667089; }
.mypage_content .gcoupon_dash .gcoupon_btn { position:relative; display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:auto; padding:13px 0; border:1px solid #204B66; border-radius:12px; background:linear-gradient(135deg, rgba(10,41,66,.85) 0%, rgba(10,41,67,.35) 100%); color:#fff; font-size:15px; font-weight:700; cursor:pointer; } /* [260820] PPT s9 반투명 */
.mypage_content .gcoupon_dash .gcoupon_btn:hover { border-color:#0DAAFC; } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
/* [260831] 사용자 지시: 버튼도 채널 색 반투명 그라데이션 — 오프라인 민트 / 팝업 퍼플 */
.mypage_content .gcoupon_dash .gcoupon_card.ch2 .gcoupon_btn { border-color:rgba(53,169,162,.33); background:linear-gradient(135deg, rgba(110,248,245,.10) 0%, rgba(110,248,245,.03) 100%); }
.mypage_content .gcoupon_dash .gcoupon_card.ch2 .gcoupon_btn:hover { border-color:#6EFAEB; }
.mypage_content .gcoupon_dash .gcoupon_card.ch3 .gcoupon_btn { border-color:rgba(123,47,243,.45); background:linear-gradient(135deg, rgba(123,47,243,.10) 0%, rgba(123,47,243,.03) 100%); }
.mypage_content .gcoupon_dash .gcoupon_card.ch3 .gcoupon_btn:hover { border-color:#A76BFF; }
.mypage_content .gcoupon_dash .gcoupon_btn .arw { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:18px; }
/* [260903] 오픈예정(사용 시작 전) — 버튼 대신 상태 배지, 쿠폰함과 동일 톤 */
.mypage_content .gcoupon_dash .gcoupon_card.upcoming { opacity:.8; }
.mypage_content .gcoupon_dash .gcoupon_card.upcoming:hover { transform:none; box-shadow:none; }
.mypage_content .gcoupon_dash .gcoupon_state { align-self:flex-start; margin-top:auto; padding:8px 22px; border-radius:999px; font-size:13px; font-weight:700; background:#232a3f; color:#8a93a8; }
.mypage_content .gcoupon_dash .gcoupon_state.upcoming { border:1px solid #204B66; background:#0E2039; color:#00B8FC; }

/* ===== [260812] 포인트/테이블 흰색 구분선(#EEE, content.css) 제거 → 시안 #121B21 ===== */
.mypage_content .shop_mypage_table01 table,
.mypage_content .shop_mypage_table01 table tbody td,
.mypage_content .shop_mypage_table01 table tbody tr,
.mypage_content .shop_mypage_table01 table thead th,
.mypage_content .shop_mypage_table01 table th,
.mypage_content .shop_mypage_table01 table td { border-color:#121B21 !important; }
/* 페이지네이션 흰 테두리 → 다크/청록 */
.mypage_content .prd_page_nav_num,
.mypage_content .prd_page_nav_arrow,
.mypage_content .prd_page_nav a { border-color:#333333 !important; }
.mypage_content .prd_page_nav_num.on,
.mypage_content .prd_page_nav_num.active { border-color:#0DAAFC !important; color:#00B8FC !important; } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */

/* ===== [260812] 제목 영역 밝은선(#444, content.css) 제거 → 다크 ===== */
.mypage_content .tit_box,
.mypage_content .shop_item_info_con.mypage .tit_box { border-bottom-color:#121B21 !important; }

/* ===== [260812] 좌측 메뉴 테두리 흰선 느낌(#737678) → 어둡게 ===== */
.mypage_sidebar .mps_menu_item { border-color:transparent !important; } /* [260826 s07] 비활성 무박스 — 시안 img_0 */
/* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC — 위 !important 가 활성 메뉴까지 무광으로 덮고 있었다.
   비활성은 #1c2440 무광 유지, 활성만 되살린다. */
.mypage_sidebar .mps_menu_item.active { border-color:#0DAAFC !important; }

/* ===== [260812] 포인트내역 박스화 시안(630:1042): #000+#121B21 테두리 r10 ===== */
.mypage_content.mp_point .shop_item_info_con.mypage {
	background:#000; border:1px solid #1B3250; border-radius:10px; padding:26px 28px; margin-top:24px;
}
.mypage_content.mp_point .shop_item_info_con.mypage .tit_box .tit { font-size:20px; }
/* 포인트 현황 제목 (시안 630:800 fs30) */
.mypage_content .mp_point_head { font-size:30px; font-weight:700; color:#fff; margin-bottom:20px; }
/* [260826 s01] 아이콘 원 링은 border-box 그라데로 표현 — 보더 자체는 투명 유지 */
.mypage_content .mpd_point_item .ic { border:2px solid transparent !important; }

/* ===== [260812] 포인트 날짜~테이블 회색선(#333 border-top) 제거 ===== */
.mypage_content .shop_mypage_table01 { border-top-color:#121B21 !important; }
.mypage_content.mp_point .shop_item_info_con.mypage { margin-top:0 !important; }

/* 히어로 G 워터마크: 텍스트→시안 이미지(624:2774) */
.mypage_content .mpd_hero_logo { font-size:0 !important; right:30px; }
.mypage_content .mpd_hero_logo img { width:190px; height:auto; opacity:.95; display:block; }

/* ===== [260812] 대시보드 쿠폰 좌우 슬라이드(가로 캐러셀, 시안 인디케이터) ===== */
.mypage_content .gcoupon_dash {
	display:flex !important; grid-template-columns:none;
	overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
	gap:20px; padding-bottom:14px;
	/* [260813] 하단 스크롤바 표시(다크 커스텀) */
	scrollbar-width:thin; scrollbar-color:#00B8FC #0E141C;
}
.mypage_content .gcoupon_dash::-webkit-scrollbar { height:8px; }
.mypage_content .gcoupon_dash::-webkit-scrollbar-track { background:#0E141C; border-radius:10px; }
.mypage_content .gcoupon_dash::-webkit-scrollbar-thumb { background:linear-gradient(90deg,#00B8FC,#5163FE); border-radius:10px; }
.mypage_content .gcoupon_dash::-webkit-scrollbar-thumb:hover { background:linear-gradient(90deg,#00B8FC,#5163FE); }
.mypage_content .gcoupon_dash .gcoupon_card {
	flex:0 0 calc((100% - 60px)/4); min-width:250px; scroll-snap-align:start;
}
@media (max-width:1200px){ .mypage_content .gcoupon_dash .gcoupon_card { flex:0 0 calc((100% - 20px)/2); } }
@media (max-width:640px){ .mypage_content .gcoupon_dash .gcoupon_card { flex:0 0 85%; } }

/* ===== [260812] 사이드바 메뉴 아이콘: 시안 SVG(mask)로 정확 적용 + 상태별 색 ===== */
.mypage_sidebar .mps_menu_item i.mps_ico {
	display:inline-block; width:22px; height:22px; font-size:0;
	background-color:#C8C4C1;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:contain; mask-size:contain;
}
.mypage_sidebar .mps_menu_item.active i.mps_ico { background-color:#00B8FC; }
.mps_ico.ico_home   { -webkit-mask-image:url(/img/mypage/ico/home.svg);   mask-image:url(/img/mypage/ico/home.svg); }
.mps_ico.ico_clock  { -webkit-mask-image:url(/img/mypage/ico/clock.svg);  mask-image:url(/img/mypage/ico/clock.svg); }
.mps_ico.ico_coupon { -webkit-mask-image:url(/img/mypage/ico/coupon.svg); mask-image:url(/img/mypage/ico/coupon.svg); }
.mps_ico.ico_star   { -webkit-mask-image:url(/img/mypage/ico/star.svg);   mask-image:url(/img/mypage/ico/star.svg); }
.mps_ico.ico_heart  { -webkit-mask-image:url(/img/mypage/ico/heart.svg);  mask-image:url(/img/mypage/ico/heart.svg); }
.mps_ico.ico_user   { -webkit-mask-image:url(/img/mypage/ico/user.svg);   mask-image:url(/img/mypage/ico/user.svg); }

/* ===== [260812] 공통 아이콘 mask + 대시보드/배송 시안 SVG ===== */
.mps_ico { display:inline-block; font-size:0; background-color:currentColor;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain; }
.mps_ico.ico_pcoupon{-webkit-mask-image:url(/img/mypage/ico/pcoupon.svg);mask-image:url(/img/mypage/ico/pcoupon.svg);}
.mps_ico.ico_pstar  {-webkit-mask-image:url(/img/mypage/ico/pstar.svg);mask-image:url(/img/mypage/ico/pstar.svg);}
.mps_ico.d_clipboard{-webkit-mask-image:url(/img/mypage/ico/d_clipboard.svg);mask-image:url(/img/mypage/ico/d_clipboard.svg);}
.mps_ico.d_card     {-webkit-mask-image:url(/img/mypage/ico/d_card.svg);mask-image:url(/img/mypage/ico/d_card.svg);}
.mps_ico.d_package  {-webkit-mask-image:url(/img/mypage/ico/d_package.svg);mask-image:url(/img/mypage/ico/d_package.svg);}
.mps_ico.d_truck    {-webkit-mask-image:url(/img/mypage/ico/d_truck.svg);mask-image:url(/img/mypage/ico/d_truck.svg);}
.mps_ico.d_check    {-webkit-mask-image:url(/img/mypage/ico/d_check.svg);mask-image:url(/img/mypage/ico/d_check.svg);}
.mps_ico.d_arrow    {-webkit-mask-image:url(/img/mypage/ico/d_arrow.svg);mask-image:url(/img/mypage/ico/d_arrow.svg);}
.mypage_content .mpd_point_item .ic .mps_ico { width:24px; height:24px; }
.mypage_content .mpd_dstep .ic .mps_ico { width:26px; height:26px; }
.mypage_content .mpd_darrow .mps_ico { width:15px; height:24px; }
/* 등급 왕관 / 아바타 시안 SVG */
.mps_ico.ico_crown  {-webkit-mask-image:url(/img/mypage/ico/crown.svg);mask-image:url(/img/mypage/ico/crown.svg);}
.mps_ico.ico_avatar {-webkit-mask-image:url(/img/mypage/ico/avatar.svg);mask-image:url(/img/mypage/ico/avatar.svg);}
.mypage_content .mpd_grade_icon .mps_ico { width:28px; height:28px; }
.mypage_sidebar .mps_avatar .mps_ico { width:54px; height:54px; background-color:#cfd6de; }

/* [260812] 기간 필터칩(전체/1개월/6개월/1년) 시안(630:1039) + 크기 확대 */
.mypage_content .mypage_period_buttons button {
	min-width:84px !important; height:36px !important; padding:0 16px !important;
	font-size:14px !important; font-weight:500;
	background:linear-gradient(180deg,#07223D,#0B1829) !important; border:1px solid #204B66 !important; color:#888888 !important; /* [260826c] 사용자 지시: 박스 면 #07223D 그라데이션 톤 통일 */
	border-radius:6px; transition:all .15s;
}
.mypage_content .mypage_period_buttons button:hover { border-color:#0DAAFC !important; color:#ccc !important; } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
.mypage_content .mypage_period_buttons button.active {
	background:#0E2039 !important;
	border-color:#0DAAFC !important; color:#00B8FC !important; font-weight:700; /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
	box-shadow:none;
}

/* "내 쿠폰 현황" 제목~3카드 간격 축소 */
.mypage_content.mp_coupon .mp_point_head { margin-bottom:12px; }

/* [260812] 검색아이콘 확대 */
.mypage_content .program_search_btn01 img { width:30px !important; height:auto !important; }

/* ==================================================================
   [260813] 모바일(≤640px) 반응형 정비 — 데스크탑(≥1200) 레이아웃 불변
   핵심 원인: .mypage_layout 이 세로배치(align-items:flex-start) 될 때
   .mypage_content 에 확정 폭이 없어 내부 .inner 가 콘텐츠
   max-content(≈1350px)로 벌어져 화면 밖으로 잘렸음 → 폭을 100%로 고정.
   ================================================================== */
@media (max-width:640px){
	/* [핵심] 콘텐츠 컬럼을 뷰포트 폭으로 강제 → 내부 요소 잘림 해소 */
	.mypage_renew .mypage_content { width:100% !important; max-width:100% !important; min-width:0; box-sizing:border-box; }
	.mypage_renew .mypage_content .inner { width:100% !important; max-width:100% !important; box-sizing:border-box; }

	/* 상단 대시보드 박스 여백 축소 */
	.mypage_content .mpd_top_box { padding:18px 0; }
	.mypage_content .mpd_row2 { gap:16px; }

	/* 히어로: 제목/부제 축소 + 줄바꿈 허용 (우측 잘림 방지) */
	.mypage_content .mpd_hero_tit { font-size:22px; line-height:1.3; word-break:keep-all; overflow-wrap:anywhere; }
	.mypage_content .mpd_hero_desc { font-size:14px; word-break:keep-all; overflow-wrap:anywhere; padding-right:2px; }

	/* 서브탭(나의 리뷰/나의 문의/온라인상담 등): 가로 스크롤(3개 모두 노출) */
	.mypage_renew .mps_subtab {
		flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
		gap:8px; margin-bottom:20px;
		scrollbar-width:none; -ms-overflow-style:none;
	}
	.mypage_renew .mps_subtab::-webkit-scrollbar { display:none; }
	.mypage_renew .mps_subtab a {
		flex:0 0 auto; padding:10px 16px; font-size:14px; border-radius:14px; white-space:nowrap;
	}

	/* 주문/배송현황 5단계: 화살표 숨김 + 3열 랩(이미 640규칙 존재) 보강 */
	.mypage_content .mpd_delivery { padding:20px 14px; gap:10px 6px; justify-content:flex-start; }
	.mypage_content .mpd_darrow { display:none; }
	.mypage_content .mpd_dstep { flex:1 1 28%; min-width:0; }
	.mypage_content .mpd_dstep .ic { width:46px; height:46px; }
	.mypage_content .mpd_dstep .ic .mps_ico { width:22px; height:22px; }
	.mypage_content .mpd_dstep .lab { font-size:13px; word-break:keep-all; }
	.mypage_content .mpd_dstep .num { font-size:18px; }
}

/* [260813] 모바일: 포인트/쿠폰/주문 날짜필터·기간칩 잘림 방지
   (포인트에서 date_box01이 264px로 좁아 자식 flex_box01(321px)이 우측으로 넘쳐 End Date·1년 칩 잘림) */
@media (max-width:640px){
	.mypage_content .shop_mypage_date_wrapper01,
	.mypage_content .shop_mypage_date_top_box,
	.mypage_content .shop_mypage_date_box01,
	.mypage_content .shop_mypage_date_flex_box01 { width:100% !important; max-width:100% !important; min-width:0 !important; }
	.mypage_content .shop_mypage_date_flex_box01 { flex-wrap:wrap !important; gap:6px !important; }
	.mypage_content .shop_date_form01 { flex:1 1 120px !important; min-width:110px !important; width:auto !important; }
	.mypage_content .mypage_period_buttons { display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; width:100% !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
	.mypage_content .mypage_period_buttons::-webkit-scrollbar { display:none; }
	.mypage_content .mypage_period_buttons a,
	.mypage_content .mypage_period_buttons button { flex:0 0 auto !important; }
}

/* [260813] 마이페이지 공통 — 내역 없음(nodata) 다크 디자인 (사용자 요청: 문구+테두리)
   nodata/index.jsp 인라인(라이트 #d6d6d6/#444)을 특이도로 override */
.mypage_content li.nodata {
	border:1px dashed #16324B !important;
	border-radius:14px !important;
	background:transparent !important;
	padding:60px 40px !important;
}
.mypage_content li.nodata p { color:#8b98a5 !important; font-weight:400 !important; }
.mypage_content li.nodata img { filter:brightness(0) invert(0.45); opacity:.8; }

/* [260813] 날짜 필터 달력 아이콘 — 시안 SVG(d_calendar)로 교체 (사용자 지적: 달력 아이콘 다름) */
.mypage_content .shop_date_form01 img {
	content: url('/img/mypage/ico/d_calendar.svg');
	width: 18px; height: 18px;
	filter: brightness(0) invert(0.6);
}

/* ==================================================================
   [260826] 마이페이지 요약 카드 공통 — 포인트(.mp_point) / 쿠폰(.mp_coupon)
   PPT 0819 s03·s04: "이렇게 바꿔주세요 / 총적립·사용 강조할 이유가 없음"
   → 대시보드 .mpd_point_card 문법(컨테이너 1장 + 세로 구분선 + 값만 컬러)으로 통일.
   좌→우 순서는 [사용가능] → [총 적립/총 발행] → [사용/사용 완료] 고정,
   첫 칸(.is_main)만 강조하고 나머지 둘은 부수 정보로 격하(삭제 아님).
   ※ 구 마크업(.shop_mypage_top_box01 > .box.icon)과 그에 딸린
     nth-child 색·배경·동전 일러스트 규칙은 전량 폐기했다.
   ================================================================== */
.mypage_content .mp_sum {
	display:flex; align-items:stretch;
	margin:0 0 20px; padding:24px 30px; box-sizing:border-box;
	background:linear-gradient(135deg,#003A69, rgba(0,58,105,.2));
	border:none; border-radius:10px; /* [260826] 대시보드 .mpd_point_card 와 동일 — 시안에 테두리 없음 */
}
.mypage_content .mp_sum_item {
	flex:1 1 0; min-width:0;
	display:flex; align-items:center; justify-content:center; gap:16px;
	padding:6px 24px;
}
/* 세로 구분선 — [260826] 대시보드와 동일하게 무광 네이비 */
.mypage_content .mp_sum_item + .mp_sum_item { border-left:1px solid #1B3250; }
.mypage_content .mp_sum_item .ic {
	flex:0 0 auto; width:56px; height:56px; border-radius:50%;
	background:radial-gradient(circle, #003A69, rgba(0,58,105,.2));
	display:flex; align-items:center; justify-content:center;
	color:#5f7183; font-size:0;
}
.mypage_content .mp_sum_item .ic .mps_ico { width:26px; height:26px; background-color:currentColor; }
.mypage_content .mp_sum_item .ic img { width:32px; height:32px; object-fit:contain; opacity:.45; }
/* [260826] 서브 칸 아이콘은 투명도로만 격하 — G코인 로고에 grayscale 을 걸면 브랜드 색이 죽는다 */
.mypage_content .mp_sum_item .bd { min-width:0; }
.mypage_content .mp_sum_item .lab { font-size:15px; font-weight:500; color:#a8b3bf; line-height:1.3; }
.mypage_content .mp_sum_item .val { margin-top:4px; font-size:20px; font-weight:700; color:#a8b3bf; line-height:1.2; }
.mypage_content .mp_sum_item .val .u { font-size:13px; font-weight:400; color:#8b98a5; margin-left:3px; }
/* G코인 단위 이미지(.gcoin_unit 공통 정의는 layout.css) — 이 카드 안에서만 값 크기에 맞춰 확대 */
.mypage_content .mp_sum_item .val .gcoin_unit { width:18px; height:18px; margin-left:4px; vertical-align:-2px; }
/* 첫 칸(사용 가능)만 강조 — 폭 1.4배 + 값 30px 로열블루 */
.mypage_content .mp_sum_item.is_main { flex:1.4 1 0; }
.mypage_content .mp_sum_item.is_main .ic { width:80px; height:80px; color:#00B8FC; border:1px solid #0DAAFC; } /* [260826c] 사용자 지시: 활성 외곽선 #0DAAFC 톤 통일 */
.mypage_content .mp_sum_item.is_main .ic .mps_ico { width:38px; height:38px; }
.mypage_content .mp_sum_item.is_main .ic img { width:46px; height:46px; opacity:1; }
.mypage_content .mp_sum_item.is_main .lab { font-size:20px; font-weight:400; color:#fff; }
.mypage_content .mp_sum_item.is_main .val { font-size:30px; font-weight:700; color:#007BFE; }
.mypage_content .mp_sum_item.is_main .val .u { font-size:15px; color:#fff; }
.mypage_content .mp_sum_item.is_main .val .gcoin_unit { width:26px; height:26px; margin-left:6px; vertical-align:-3px; }

/* [260826] 모바일: 세로 1열 + 구분선을 border-bottom 으로 전환, 높이 축약 */
@media (max-width:640px){
	.mypage_content .mp_sum { flex-direction:column; padding:14px 18px; }
	.mypage_content .mp_sum_item { justify-content:flex-start; gap:12px; padding:12px 0; }
	.mypage_content .mp_sum_item + .mp_sum_item { border-left:none; border-top:1px solid #1B3250; }
	.mypage_content .mp_sum_item.is_main { flex:1 1 auto; }
	.mypage_content .mp_sum_item.is_main .ic { width:56px; height:56px; }
	.mypage_content .mp_sum_item.is_main .ic .mps_ico { width:28px; height:28px; }
	.mypage_content .mp_sum_item.is_main .ic img { width:34px; height:34px; }
	.mypage_content .mp_sum_item.is_main .lab { font-size:16px; }
	.mypage_content .mp_sum_item.is_main .val { font-size:24px; }
	.mypage_content .mp_sum_item .ic { width:40px; height:40px; }
	.mypage_content .mp_sum_item .ic .mps_ico { width:20px; height:20px; }
	.mypage_content .mp_sum_item .ic img { width:24px; height:24px; }
	.mypage_content .mp_sum_item .lab { font-size:13px; }
	.mypage_content .mp_sum_item .val { font-size:17px; }
	.mypage_content .mp_sum_item .val .gcoin_unit { width:15px; height:15px; }
	.mypage_content .mp_sum_item.is_main .val .gcoin_unit { width:21px; height:21px; }
}

/* ==================================================================
   [260901] 모바일(≤640px) 사이드바 재정비 — 사용자 지적
   "메뉴가 들쭉날쭉하고 회원정보 변경 아래 빈 공간이 크다"

   원인: 위쪽 @media(≤640) 의 사이드바 규칙(369~380행)이, 그보다 뒤에 오는
        [260812] 시안 정합 블록(.mps_menu_item{height:79px;font-size:20px}, 435행)에
        같은 특이도(0,1,0)로 덮여 통째로 무효화되어 있었다.
        → 모바일에서도 데스크탑 치수(높이 79px·글자 20px·사이드바 padding 50px)가
          그대로 적용되고, flex:1 1 45% + white-space:nowrap 탓에 항목 폭이
          글자 수대로 제각각 잡혀 한 줄에 1~2개씩 계단식으로 어긋났다.

   해결: 파일 최하단(= 가장 늦은 순서)에서 모바일 치수를 확정한다.
        메뉴는 2열 그리드로 고정하고, 첫 항목(마이페이지)만 전체폭.
   ================================================================== */
@media (max-width:640px){
	/* 하단 빈 공간의 정체 = 데스크탑 padding 50px. 모바일 치수로 축소 */
	.mypage_renew .mypage_sidebar { padding:24px 18px; border-radius:16px; }

	/* 프로필 블록 축약 */
	.mypage_renew .mps_profile { gap:14px; }
	.mypage_renew .mps_avatar { width:84px; height:84px; }
	.mypage_renew .mps_avatar i { font-size:34px; }
	.mypage_renew .mps_name { font-size:22px; }
	.mypage_renew .mps_nim { font-size:15px; }
	.mypage_renew .mps_welcome { font-size:14px; }
	.mypage_renew .mps_grade { height:32px; padding:6px 22px; font-size:13px; }
	.mypage_renew .mps_logout { height:38px; padding:6px 20px; font-size:14px; margin-top:16px; }

	/* 마우스 포인터 3종: 모바일에는 마우스 커서가 없어 기능 자체가 무의미
	   [260901] 사용자 지시로 비노출. DOM 은 남으므로
	   /include/mouse_pointer_apply.jsp 의 토글 스크립트는 그대로 동작한다. */
	.mypage_renew .mps_pointer_box { display:none; }

	/* 메뉴: 2열 그리드 고정 — 글자 수에 따라 폭이 달라지던 계단식 배치 제거
	   상단 구분선/여백은 숨긴 포인터 박스(margin 18px + border)가 하던 역할을 대신한다.
	   (그대로 두면 로그아웃 버튼과 메뉴가 간격 0으로 맞붙는다) */
	.mypage_renew .mps_menu {
		display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
		margin-top:18px; padding-top:18px; border-top:1px solid #16324B;
	}
	.mypage_renew .mps_menu_item {
		height:50px; padding:0 10px; gap:8px;
		font-size:13px; font-weight:700;
		white-space:nowrap; min-width:0;
	}
	.mypage_renew .mps_menu_item:first-child { grid-column:1 / -1; } /* 마이페이지(홈)만 전체폭 */
	.mypage_renew .mps_menu_item span { overflow:hidden; text-overflow:ellipsis; }
	.mypage_renew .mps_menu_item i { width:20px; font-size:18px; }
	.mypage_renew .mypage_sidebar .mps_menu_item i.mps_ico { width:18px; height:18px; }
	.mypage_renew .mypage_sidebar .mps_menu_item img.mps_gcoin_ico {
		width:28px; height:28px; margin-left:-5px; margin-right:-5px;
	}
}

/* ================= [260826 s01] 대시보드 카드 시안 정합 보조 ================= */
/* G코인 아이콘: 3D 파랑 코인 → 흰 글리프 톤(다크 면 위) */
.mypage_content .mpd_point_item .ic img.gcoin_ic { filter:none; } /* [260826] gcoin_glyph.png(흰 G, 투명배경)로 교체 — 착색 필터 불필요 */
/* "…내역 보기" chevron 분리 표기 */
.mypage_content .mpd_card_head .more .more_arw { display:inline-block; margin-left:10px; font-weight:700; }

/* ==================================================================
   [260826 s01] PPT s01 대시보드 카드 시안 최종 정합 — 최우선 블록
   mp_dashboard_fix.css(뒤 로드)가 카드/아이콘을 덮으므로 특이도+!important 로 확정.
   시안: 다크 대각 grad #09273E→#01070B 무테 카드, 아이콘 원 다크면 #082135 +
   밝은 그라데 링(#DCE2E9→#1492E9) + 흰 심볼, 왕관·진행바 #007BFE
   ================================================================== */
.mypage_renew .mypage_content .mpd_point_card,
.mypage_renew .mypage_content .mpd_grade_card {
	background:linear-gradient(135deg,#09273E,#01070B) !important;
	border:none !important; border-radius:10px !important;
}
.mypage_renew .mypage_content .mpd_point_item .ic,
.mypage_renew .mypage_content .mpd_grade_icon {
	background:linear-gradient(#082135,#082135) padding-box, linear-gradient(135deg,#DCE2E9,#1492E9) border-box !important;
	border:2px solid transparent !important;
}
.mypage_renew .mypage_content .mpd_point_item .ic { color:#fff !important; }
.mypage_renew .mypage_content .mpd_grade_icon { color:#007BFE !important; }
.mypage_renew .mypage_content .mpd_bar { background:#002543 !important; }
.mypage_renew .mypage_content .mpd_bar_fill { background:#007BFE !important; }
.mypage_renew .mypage_content .mpd_point_item .ic img.gcoin_ic { filter:none; width:46px; height:46px; } /* [260826] 오진상사 s01: 시안의 큰 흰 G 글리프 — gcoin_glyph.png */