@charset "utf-8";

/***************************************************************************/
/*					                            마이페이지  	                                             /
/***************************************************************************/
/* 주문/결제, 장바구니, 주문내역, 찜한상품>> order.css */
/* 1:1문의>> bbs.css */

/* 상단 탭메뉴 */
.tab-maypage {display:flex;justify-content: center;margin-bottom:50px;}
.tab-mypage-button {padding:12px 33px;border: none;background-color:#f0f0f0;cursor: pointer;outline: none;font-size:0.92rem;border-radius:0 !important;border-right: 1px solid #d8d8d8;transition: background-color 0.3s ease;}
.tab-mypage-button:last-child {border-right: none;}
.tab-mypage-button:hover {background-color: #e0e0e0;}
.tab-mypage-button.active {background-color: #007bff;color:#fff;font-weight:400;}

/* ----------------------  내정보수정  ---------------------- */
.mypage-info {width:60%;margin:0 auto;padding-top:20px;}
.mypage-info-tit {font-weight:400;padding-bottom:30px;}
.row-myinfo {width:100%;display:flex;flex-direction: row;padding:8px 8px;border-bottom:1px solid #e1e1e1;}
.row-myinfo .myid {width:70%;font-size:1rem;font-weight:500;font-family: "Roboto", sans-serif;}
.row-myinfo label {width:30%;font-size:0.86rem;display: flex;align-items:center;}
.row-myinfo input {width:35%;height:36px;line-height:36px;font-size:0.9rem;font-weight:400;padding: 8px 10px;background:#f4f4f4;border:none;}
.row-myinfo-email {width:100%;display:flex;flex-direction: row;padding:8px 8px;border-bottom:1px solid #e1e1e1;}
.row-myinfo-email label {width:30%;font-size:0.86rem;display: flex;align-items:center;}
.row-myinfo-email input {width:20%;height:36px;line-height:36px;font-size:0.9rem;font-weight:400;padding: 8px 10px;background:#f4f4f4;border:none;}
.row-myinfo-email span {width:30px;text-align:center;display: flex;align-items:center;justify-content: center;font-size:0.86rem;}
.row-alert {width:100%;display:flex;justify-content: flex-end;padding:15px 8px;}
.row-alert .check-sns {width:70%;font-size:0.8rem;color:#888;}
.row-alert .check-sns input {width:20px;height:20px;margin-right:3px;}
.btn-myinfo-confirm {margin:30px auto 0;display:block;width:40%;height:54px;line-height:54px;background:#413e3e;color:#fff;text-align:center;font-size:1rem;font-weight:400;}
.btn-withdraw {display: flex;justify-content: flex-end;background:#fff;border-bottom:1px solid #999;padding:6px 8px;font-size:0.86rem;display: block;margin-top:45px;margin-left: auto;width: fit-content;/* 내용만큼 너비를 가짐 */}

.user-summary {width:60%;margin:0 auto 40px;padding:15px 0;display:flex;justify-content:center;flex-wrap: wrap;border-bottom:2px solid #333;}
.summary-item {width:33.3%;display:flex;align-items:center;justify-content: center;}
.item-label {font-size: 0.9rem;font-weight:400;white-space: nowrap;display:flex;align-items:center;}
.item-label img {width:24px;height:24px;opacity:0.8;margin-right:2px;}
.item-value-point {padding-left:4px;font-size: 0.9rem;color:#666;display: flex;align-items:center;}
.item-value-point strong {font-weight:600;font-size:0.9rem;padding:0 1px;color:#e30303;}
.item-value-point strong a {color:#e30303;border-bottom:1px solid #e30303;}
.item-value {padding-left:4px;font-size: 0.9rem;color:#666;display: flex;align-items:center;}
.item-value strong {font-weight:600;font-size:0.9rem;padding:0 1px;color:#111}
.item-value strong a {color:#111;border-bottom:1px solid #111;}

/* ----------------------  포인트&쿠폰  ---------------------- */
.point-coupon-wrap {100%;}
.coupon-stit {font-size:1.2rem; font-weight:600;margin-bottom:10px;}
.coupon-wrap {display: flex;justify-content: space-between;border-top: 2px solid #333;border-bottom: 1px solid #e1e1e1;padding:20px 0;margin-bottom:50px;}
.coupon-wrap .coupon-thum {width:24%;}
.coupon-wrap .coupon-thum img {width:100%;border-radius:5px;}
.point-top-wrap {display: flex;justify-content: space-between;height:34px;margin-bottom:10px;}
.point-stit {font-size:1.2rem; font-weight:600;line-height:38px;}
.point-stit span {font-size:0.9rem;font-weight:400 !important;margin-left:5px;}
.point-filter {height:34px;padding:6px 50px 6px 12px;border:1px solid #ccc;font-size:0.86rem;}
.point-filter option {font-weight:300;padding:10px;}
.point-board-header {border-top: 2px solid #333;border-bottom: 1px solid #e1e1e1;background:#f7f7f7;padding:10px 0;font-weight:400;display: flex;justify-content: space-between;}
.point-board-header span {text-align: center;font-size:0.8rem;}
.point-board-list {margin-bottom:20px;}
.point-board-item {border-bottom: 1px solid #e1e1e1;}
.header-point-date {flex: 0 0 50px; /* 컬럼 너비 */margin-left:30px;text-align: center;}
.header-polint-log {flex-grow: 1;padding-left: 10px;text-align:center;}
.header-point-mark {flex: 0 0 60px; /* 컬럼 너비 */margin-right:10px;text-align: center;}
.item-summary-point {display: flex;justify-content: space-between;align-items:center;padding:13px 0;}
.item-point-date {flex: 0 0 90px; /* 컬럼 너비 */margin-left:10px;text-align:center;color: #777;font-size:0.8rem;font-family: "Roboto", sans-serif;}
.item-point-log {flex-grow: 1;/* 다른 요소들과 동일한 비율로 남은 공간을 균등하게 확장 */padding:0 20px;font-size:0.9rem;text-align:center;}
.item-point-mark {flex: 0 0 100px; /* 컬럼 너비 */margin-right:22px;text-align: right;font-size:0.96rem;font-weight:400;font-family: "Roboto", sans-serif;}
.item-point-mark .plus {color: #e30303;}
.item-point-mark .minus {color: #007bff;}


/***************************************************************************/
/*					                      모바일 (최대 479px)			                             /
/***************************************************************************/
@media (max-width: 479px) {

/* 아이폰 둥근모서리 제거 */
input[type="text"] {-webkit-appearance: none; /* iOS Safari 기본 스타일 제거 */border-radius: 2px; box-shadow: none;}

/* 상단 탭메뉴 */
.tab-maypage {display:flex;justify-content: center;flex-wrap: wrap;width:100%;margin-bottom:20px;}
.tab-mypage-button {width:33.33%;padding:12px 0;text-align:center;border: none;background-color:#f0f0f0;cursor: pointer;outline: none;border-radius:0 !important;font-size:0.86rem;border-right: 1px solid #d8d8d8;transition: background-color 0.3s ease;}
.tab-mypage-button:nth-child(n + 4) {border-top: 1px solid #d8d8d8;}
.tab-mypage-button:nth-child(3n) {border-right: none;}

/* ----------------------  내정보수정  ---------------------- */
.mypage-info {width:100%;margin:0 auto;padding-top:0;}
.mypage-info-tit {font-size:1.2rem;font-weight:600;padding-bottom:10px;border-bottom: 2px solid #333;}
.row-myinfo {width:100%;display:flex;flex-direction: row;padding:6px 0;border-bottom:1px solid #e1e1e1;}
.row-myinfo .myid {width:65%;font-size:1rem;font-weight:500;font-family: "Roboto", sans-serif;padding:6px 0;}
.row-myinfo label {width:35%;font-size:0.86rem;display: flex;align-items:center;}
.row-myinfo input {width:40%;height:36px;line-height:36px;font-size:0.9rem;font-weight:400;padding: 8px 10px;background:#f4f4f4;border:none;}
.row-myinfo-email {width:100%;display:flex;flex-direction: row;padding:6px 0;border-bottom:1px solid #e1e1e1;}
.row-myinfo-email label {width:35%;font-size:0.86rem;display: flex;align-items:center;}
.row-myinfo-email input {width:25%;height:36px;line-height:36px;font-size:0.9rem;font-weight:400;padding: 8px 10px;background:#f4f4f4;border:none;}
.row-myinfo-email span {width:25px;text-align:center;display: flex;align-items:center;justify-content: center;font-size:0.86rem;}
.row-alert {width:100%;display:flex;justify-content: flex-end;padding:15px 0;}
.row-alert .check-sns {width:100%;font-size:0.8rem;color:#888;}
.row-alert .check-sns input {width:20px;height:20px;margin-right:3px;}
.btn-myinfo-confirm {margin:10px auto 0;display:block;width:40%;height:46px;line-height:46px;background:#413e3e;color:#fff;text-align:center;font-size:1rem;font-weight:400;}
.btn-withdraw {display: flex;justify-content: flex-end;background:#fff;border-bottom:1px solid #999;padding:6px 8px;font-size:0.86rem;display: block;margin-top:10px;margin-left: auto;width: fit-content;/* 내용만큼 너비를 가짐 */}

.user-summary {width:100%;margin:0 auto 20px;padding:15px 0;display:flex;justify-content:space-between;flex-wrap: wrap;border:1px solid #e1e1e1;}
.summary-item {width:32%;line-height:1.4;display: flex;flex-direction: column;align-items:center;justify-content: center;}
.item-label {width:100%;font-size: 0.86rem;font-weight:400;white-space: nowrap;display:flex;align-items:center;justify-content: center;}
.item-label img {display:none;}
.item-value-point {width:100%;padding-left:0;font-size: 0.86rem;color:#666;display: flex;align-items:center;justify-content: center;}
.item-value-point strong {font-weight:600;font-size:1rem;padding:0 2px;color:#e30303;}
.item-value {width:100%;padding-left:0;font-size: 0.86rem;color:#666;display: flex;align-items:center;justify-content: center;}
.item-value strong {font-weight:600;font-size:1rem;padding:0 2px;color:#111}

/* ----------------------  포인트&쿠폰  ---------------------- */
.coupon-stit {font-size:1.1rem; font-weight:600;margin-bottom:5px;padding-top:10px;}
.coupon-wrap {display: flex;justify-content: space-between;flex-wrap: wrap;border-top: 2px solid #333;border-bottom: 1px solid #e1e1e1;padding:10px 0;margin-bottom:20px;}
.coupon-wrap .coupon-thum {width:48.5%;margin:5px 0;}
.point-top-wrap {display: flex;justify-content: space-between;height:32px;margin-bottom:7px;}
.point-stit {font-size:1.1rem; font-weight:600;line-height:36px;}
.point-stit span {font-size:0.9rem;font-weight:400 !important;margin-left:5px;}
.point-filter {height:32px;padding:6px 50px 6px 12px;border:1px solid #ccc;font-size:0.86rem;}
.point-filter option {font-weight:300;padding:10px;}
.point-board-header {border-top: 2px solid #333;border-bottom: 1px solid #e1e1e1;background:#f7f7f7;padding:8px 0;font-weight:400;display: flex;justify-content: space-between;}
.point-board-header span {text-align: center;font-size:0.8rem;}
.point-board-list {margin-bottom:0;}
.point-board-item {border-bottom: 1px solid #e1e1e1;}
.header-point-date {flex: 0 0 50px; /* 컬럼 너비 */margin-left:15px;text-align:left !important;}
.header-polint-log {flex-grow: 1;padding-left: 10px;text-align:center;}
.header-point-mark {flex: 0 0 60px; /* 컬럼 너비 */margin-right:12px;text-align:right !important;}
.item-summary-point {display: flex;justify-content: space-between;align-items:center;padding:8px 0;}
.item-point-date {flex: 0 0 80px; /* 컬럼 너비 */margin-left:5px;text-align:left;color: #777;font-size:0.8rem;font-family: "Roboto", sans-serif;}
.item-point-log {flex-grow: 1;/* 다른 요소들과 동일한 비율로 남은 공간을 균등하게 확장 */padding:0 20px;font-size:0.9rem;line-height:1.3;text-align:center;}
.item-point-mark {flex: 0 0 80px; /* 컬럼 너비 */margin-right:10px;text-align: right;font-size:0.94rem;font-weight:400;font-family: "Roboto", sans-serif;}
.item-point-mark .plus {color: #e30303;}
.item-point-mark .minus {color: #007bff;}


}

/***************************************************************************/
/*					             기준 -일반 모바일 (480px ~ 767px)		   	             /
/***************************************************************************/
@media (min-width: 480px) and (max-width: 767px) {

/* 상단 탭메뉴 */
.tab-maypage {display:flex;justify-content: center;margin-bottom:20px;margin-top:20px;}


/* ----------------------  내정보수정  ---------------------- */
.mypage-info {width:74%;margin:0 auto;padding-top:20px;}
.user-summary {width:74%;margin:0 auto 40px;padding:15px 0;display:flex;justify-content:center;flex-wrap: wrap;border-bottom:2px solid #333;}
.summary-item {width:33.3%;display:flex;align-items:center;justify-content:center;}
.row-alert {width:100%;display:flex;justify-content: flex-end;padding:15px 0;}
.row-alert .check-sns {width:100%;font-size:0.8rem;color:#888;}
.row-alert .check-sns input {width:20px;height:20px;margin-right:3px;}

/* ----------------------  포인트&쿠폰  ---------------------- */
.coupon-stit {font-size:1.2rem; font-weight:600;margin-bottom:10px;margin-top:20px;}
.coupon-wrap {display: flex;justify-content: space-between;border-top: 2px solid #333;border-bottom: 1px solid #e1e1e1;padding:20px 0;margin-bottom:20px;}

}

/***************************************************************************/
/*					             기준-태블릿 (768px ~ 1023px)		   	                     /
/***************************************************************************/
@media (min-width: 768px) and (max-width: 1023px) {

/* 상단 탭메뉴 */
.tab-maypage {display:flex;justify-content: center;margin-bottom:20px;}

/* ----------------------  내정보수정  ---------------------- */
.mypage-info {width:74%;margin:0 auto;padding-top:20px;}
.user-summary {width:74%;margin:0 auto 40px;padding:15px 0;display:flex;justify-content:center;flex-wrap: wrap;border-bottom:2px solid #333;}
.summary-item {width:33.3%;display:flex;align-items:center;justify-content:center;}
.row-alert {width:100%;display:flex;justify-content: flex-end;padding:15px 0;}
.row-alert .check-sns {width:100%;font-size:0.8rem;color:#888;}
.row-alert .check-sns input {width:20px;height:20px;margin-right:3px;}

/* ----------------------  포인트&쿠폰  ---------------------- */
.coupon-stit {font-size:1.2rem; font-weight:600;margin-bottom:10px;margin-top:20px;}
.coupon-wrap {display: flex;justify-content: space-between;border-top: 2px solid #333;border-bottom: 1px solid #e1e1e1;padding:20px 0;margin-bottom:20px;}

}


/***************************************************************************/
/*					            노트북 (1024px ~ 1199px)		   	                             /
/***************************************************************************/
@media (min-width: 1024px) and (max-width: 1199px) {

/* 상단 탭메뉴 */
.tab-maypage {display:flex;justify-content: center;margin-bottom:40px;margin-top:20px;}

/* ----------------------  내정보수정  ---------------------- */
.mypage-info {width:74%;margin:0 auto;padding-top:20px;}
.user-summary {width:74%;margin:0 auto 40px;padding:15px 0;display:flex;justify-content:center;flex-wrap: wrap;border-bottom:2px solid #333;}


}