/* 마이페이지 공통 레이아웃 */
.mypage{background: var(--neutral-40, #F0F4F8); padding: 32px 0; min-height: calc(100vh - 270px);}
.mypage .container{display: flex; gap: 24px; justify-content: center;}
.mypage .contents{display: flex; flex-direction: column; gap: 12px; width: 600px;}

/* 마이페이지 공통 타이틀 */
.mypage .mypage_title{font: var(--title-title4-b); letter-spacing: var(--ls-title-title4-b); display: flex; align-items: center; justify-content: space-between;}

/* 마이페이지 공통 탭 */
.mypage ._tab{background-color: transparent; padding: 0; border-bottom: 1px solid var(--neutral-120, #D6DEE8); height: 44px; overflow: visible;}
.mypage ._tab li{flex: 1 0 0; height: 44px;}
.mypage ._tab li a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}

/* 마이페이지 공통 버튼 탭 */
.button_tab{display: flex; overflow: hidden; padding: 16px; border-radius: 12px; background: var(--neutral-00, #FFF); align-items: center;flex-wrap: wrap;}
.button_tab.gap-6{gap: 6px;}
.button_tab.gap-12{gap: 12px;}
.button_tab p{color: var(--neutral-600, #555F6F); font: var(--caption-caption1-r); letter-spacing: var(--ls-caption-caption1-r);}


/* lnb */
.mypage_lnb{display: flex; flex-direction: column; width: 245px; gap: 8px;}
.mypage_lnb .list{display: flex; width: 245px; gap: 0; border-radius: 8px; background: var(--neutral-00, #FFF); flex-direction: column;}
.mypage_lnb .mypage_menu{padding: 10px 24px; display: flex; gap: 4px; align-items: center; color: var(--neutral-750, #333C4B); font: var(--label-label2-r); letter-spacing: var(--ls-label-label2-r);}

.mypage_lnb h1{padding: 12px 0; display: flex;}
.mypage_lnb h1 .mypage_menu{font: var(--label-label2-b); letter-spacing: var(--ls-label-label2-b);}
.mypage_lnb dl{display: flex; padding: 12px 0px; border-top: 1px solid var(--neutral-40, #F0F4F8); flex-direction: column; gap: 2px;}
.mypage_lnb dt.mypage_menu{color: var(--neutral-900, #151C29);font: var(--label-label2-b); letter-spacing: var(--ls-label-label2-b);}

.mypage_lnb .mypage_menu.active{color: var(--brand-600, #6633EC); font: var(--label-label2-b); letter-spacing: var(--ls-label-label2-b);}

.mypage_lnb .recommend{display: flex; border-radius: 8px; overflow: hidden;}

/* 친구초대 모달 */
.recommend_modal ._modal_wrapper{width: 100%; max-width: 480px; position: relative;}
.recommend_modal ._modal_contents{padding: 0 24px; display: flex; flex-direction: column;}
.recommend_modal .code_wrap{display: flex; flex-direction: column; gap: 18px;}
.recommend_modal .benefits{display: flex; padding: 12px 12px 12px 8px; flex-direction: column; gap: 8px;}
.recommend_modal .benefits li{display: flex; padding-top: 16px; gap: 13px;}
.recommend_modal .benefits img{width: 105px; flex-shrink: 0;}
.recommend_modal .benefits dl{display: flex; flex-direction: column; gap: 2px; flex: 1 0 0;}
.recommend_modal .benefits dt{font: var(--title-title7-b); letter-spacing: var(--ls-title-title7-b);}
.recommend_modal .benefits dd{color: var(--neutral-750, #333C4B); font: var(--body-body2-r); letter-spacing: var(--ls-body-body2-r);}
.recommend_modal .benefits dd span{color: var(--teal-400, #00A293);font: var(--body-body2-b); letter-spacing: var(--ls-body-body2-b);}
.recommend_modal ._modal_footer{justify-content: center;}
.recommend_modal ._modal_footer button{flex: none;}
.recommend_modal .my_code{display: flex;padding: 24px 28px; border-radius: 7px; background: linear-gradient(93deg, rgba(255, 219, 176, 0.42) -14.46%, rgba(203, 239, 255, 0.42) 48.29%, rgba(242, 212, 255, 0.42) 111.04%); flex-direction: column; align-items: center; gap: 4px;}
.recommend_modal .my_code dt{color: var(--neutral-600, #555F6F); font: var(--label-label3-sb); letter-spacing: var(--ls-label-label3-sb);}
.recommend_modal .my_code dd{color: var(--blue-600, #4048E3); font: var(--title-title4-b); letter-spacing: var(--ls-title-title4-b);}
.recommend_modal .notice{padding: 24px 0 ;display: flex; flex-direction: column; gap: 8px;}
.recommend_modal .notice dl{display: flex; padding: 8px 12px; border-radius: 4px; background: var(--neutral-20, #F8FAFC); flex-direction: column; gap: 1px;}
.recommend_modal .notice dt{color: var(--neutral-400, #8692A3); font: var(--label-label4-sb); letter-spacing: var(--ls-label-label-4-sb); margin-bottom: 3px;}
.recommend_modal .notice dd{color: var(--neutral-750, #333C4B); font: var(--caption-caption1-r); letter-spacing: var(--ls-caption-caption1-r); display: flex; gap: 6px;}
.recommend_modal .notice dd:before{content: ''; display: block; width: 2px; height: 2px; border-radius: 100%; background: var(--neutral-750, #333C4B); margin: 8px 0; flex-shrink: 0;}