/* ======== 마이페이지 메인 ======== */
.my_main {display: flex; flex-direction: column; width: 100%; gap: 20px; padding-bottom: 30px;}
.my_info {width: 100%; align-items: center; display: flex;}
.my_info .my_prof {display: flex; align-items: center; gap: 10px; width: calc(100% - 70px);}
.my_info .my_prof .img_box {width: 58px; height: 58px; overflow: hidden; border-radius: 100%;}
.my_info .my_prof .img_box img {width: 100%; height: 100%; display: block; object-fit: cover;}
.my_info .my_prof dl {display: flex; flex-direction: column; align-items: flex-start; gap: 8px;}
.my_info .my_prof dt {font-size: 18px; font-weight: 600; color: #111;}
.my_info .my_prof dd {display: flex; align-items: center; gap: 14px;}
.my_info .my_prof span {font-size: 14px; color: #b1b1b1; position: relative;}
.my_info .my_prof span::after {content: ""; display: block; width: 1px; height: 50%; top: 50%; right: -7px; position: absolute; transform: translateY(-50%); background: #8f8f8f;}
.my_info .my_prof span:last-child::after {display: none;}
.my_info .my_prof span i {color: #16854F; font-weight: 600;}
.my_info button {width: 70px; height: fit-content !important; border-radius: 100px !important; gap: 5px;}
.my_info button i {width: 13px; background: url(../img/mypage_edit.png) no-repeat center/contain;}

.my_menu {display: flex; width: 100%; background-color: #16854F; border-radius: 10px;}
.my_menu .menu_con {padding: 15px 0; display: flex; flex-direction: column; gap: 9px; align-items: center; width: 50%; position: relative;}
.my_menu .menu_con::after {content: ""; display: block; width: 1px; height: 50%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-color: #eeeeee50;}
.my_menu .menu_con:last-child::after {display: none;}
.my_menu .menu_con i {display: block; width: 36px; height: 36px;}
.my_menu .menu_con i.club {background: url(../img/my_club.png) no-repeat center/contain;}
.my_menu .menu_con i.matching {background: url(../img/my_matching.png) no-repeat center/contain;}
.my_menu .menu_con span {font-size: 14px; color: #fff;}

.my_area {padding-top: 30px; width: 100%; display: flex; flex-direction: column; gap: 25px;}
.my_area .menu_box {display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
.my_area .menu_box .tit {font-size: 13px; color: #aaa; font-weight: 600; padding-bottom: 8px;}
.my_area .menu_box dl {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0;}
.my_area .menu_box dt {font-size: 16px; color: #333; font-weight: 500;}
.my_area .menu_box dd {width: 15px; height: 15px; background: url(../img/mypage_arrow.png) no-repeat center/contain;}

.btn_withdraw {font-size: 14px; width: 100%; text-align: center; color: #a9a9a9;}



/* 마이페이지 - 차단한계정 */
.block_list {display: flex; flex-direction: column; width: 100%;}
.block_con {padding: 15px 0; display: flex; align-items: center; width: 100%; gap: 15px; border-bottom: 2px solid #f1f1f1;}
.block_con .block_info {width: 100%; display: flex; align-items: center; gap: 10px;}
.block_info .user_prof {width: 46px; aspect-ratio: 1; border-radius: 100%; overflow: hidden;}
.block_info .user_prof img {width: 100%; height: 100%; object-fit: cover;}
.block_info .block_txt {display: flex; flex-direction: column; align-items: flex-start; width: auto; gap: 8px;}
.block_txt dl {display: flex; align-items: center; gap: 8px;}
.block_txt dt {font-size: 16px; font-weight: 500;}
.block_txt dd {display: flex; align-items: center; gap: 12px;}
.block_txt dd span {font-size: 14px; font-weight: 500; color: #888; position: relative;}
.block_txt dd span::after {content: ""; display: block; width: 1px; height: 60%; background-color: #ddd; position: absolute; top: 50%; right: -6px; transform: translateY(-50%);}
.block_txt dd span:last-child::after {display: none;}
.block_txt .block_data {display: flex; align-items: center; gap: 20px; flex-wrap: wrap; row-gap: 2px;}
.block_data .data {display: flex; align-items: center; gap: 10px;}
.block_data .data span {font-size: 14px; font-weight: 500; color: #c3c3c3;}
.block_data .data .figure {color: #16854F; font-weight: 600;}
.block_data .data .figure.none {color: #c3c3c3;}
.block_con .block {padding: 5px; font-size: 14px; font-weight: 500; color: #ff4a4a; width: max-content;}


/* 마이페이지 - 알림설정 */
.app_alarm {display: flex; flex-direction: column; width: 100%;}
.alarm_con {display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #f1f1f1;}
.alarm_con dl {display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: calc(100% - 55px);}
.alarm_con dt {font-size: 16px; font-weight: 600;}
.alarm_con dd {font-size: 14px; color: #888;}

.alarm-btn {font-size: 12px; padding: 10px 12px; border-radius: 7px; background-color: #16854F; color: #fff; flex-shrink: 0;}


/* 마이페이지 - 수정 */
.input-wrap {width: 100%; display: flex; flex-direction: column; gap: 25px;}
.input-wrap > div {width: 100%; display: flex; flex-direction: column; gap: 8px;}
.input-wrap > div p {font-size: 15px; font-weight: 500;}
.input-wrap > div input.disabled {background-color: #f5f5f5; color: #aaa; outline: none;}
.input-wrap > div input.disabled:focus {border-color: #ddd;}
.input-wrap > div > span {font-size: 12px; color: #d85151;}
.input-wrap > div textarea {width: 100%; padding: 15px; border: 1px solid #ddd; outline: #16854F;}
.input-wrap > div textarea:focus {border-color: #16854F;}
.input-wrap > div .date i {display: block; width: 21px; height: 21px; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); background: url(../img/match-icon2.png) no-repeat center/contain;}
.input-wrap > div .count {position: relative;}
.input-wrap > div .count p {position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 15px; color: #c3c3c3;}