.modal_wrap {position: fixed; background-color: #00000030; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 100;}


/* 모달 - 하단고정메뉴 */
.md_bottom {width: calc(100% - 32px); position: fixed; left: 50%; bottom: 15px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px;}
.md_bottom .menu_list {border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; width: 100%; background-color: #fff;}
.md_bottom .menu_list li {width: 100%; text-align: center; padding: 15px 10px; border-bottom: 1px solid #ddd;}
.md_bottom .menu_list li:last-child {border-bottom: none;}
.md_bottom .menu_list span {font-size: 15px;}
.md_bottom .menu_list li.cancel span {color: #FF4A4A;}
.md_bottom .menu_cancel {width: 100%; text-align: center; padding: 15px 10px; border-radius: 10px; background-color: #fff; color: #FF4A4A; font-weight: 600;}


/* 모달 - 알림 */
.md_alert {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 10px; display: flex; flex-direction: column; width: calc(100% - 32px); gap: 20px;}
.md_alert .md_text {display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%;}
.md_alert .md_text span {font-size: 18px; font-weight: 600;}
.md_alert .md_text p {font-size: 14px; color: #888;}

.md_button {display: flex; align-items: center; gap: 10px;}
.md_button.two button {width: 50%;}


/* 셀렉트 */
.md_select {position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 100; background-color: #00000030; }
.md_select .select_con {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 32px); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px #00000035; background-color: #fff; height: 50%; overflow-y: auto;}
.md_select .select_con ul {display: flex; flex-direction: column; width: 100%;}
.md_select .select_con li {width: 100%; padding: 11px 10px; text-align: center; border-bottom: 1px solid #ddd;}
.md_select .select_con li:last-child {border-bottom: none;}
.md_select .select_con span {font-size: 15px; font-weight: 300;}



/* 알림 - 스낵바 */
.snack_bar {padding: 10px; border-radius: 5px; background-color: #333; color: #fff; text-align: left; font-size: 15px; width: calc(100% - 32px); left: 50%; transform: translateX(-50%); position: fixed; z-index: 20; top: 75px;}


/* 알림 - 복사완료 */
.copy_bar {padding: 10px; border-radius: 30px; background-color: #f5f5f5; color: #444; text-align: center; font-size: 14px; width: 65vw; left: 50%; transform: translateX(-50%); position: fixed; z-index: 20; bottom: 13%; font-weight: 500;}


/* 하단 프로필 */
/* .pf-wrap {position: fixed; background-color: #00000030; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 100;}
.pf-bottom {position: absolute; width: 100%; bottom: 0; left: 0; background: #fff; border-radius: 20px 20px 0 0; padding: 15px 16px 20px 16px;}
.pf-bottom .pf-close {display: flex; justify-content: flex-end;}
.pf-bottom .pf-close span {width: 23px;}
.pf-bottom .pf-img-sec {padding: 0px 0 5px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px;}
.pf-bottom .pf-img-sec p {font-size: 18px; font-weight: 600;}
.pf-bottom .pf-img-sec em {width: 70px; aspect-ratio: 1 / 1; border-radius: 100%; overflow: hidden;}
.pf-bottom .pf-img-sec ul {display: flex;}
.pf-bottom .pf-img-sec ul li {padding: 0 15px; position: relative; font-size: 15px; font-weight: 500;}
.pf-bottom .pf-img-sec ul li:nth-child(2)::after {content: ""; display: block; width: 1px; height: 10px; background: #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.pf-bottom .pf-img-sec ul li:nth-child(2)::before {content: ""; display: block; width: 1px; height: 10px; background: #ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.pf-bottom .pf-info {padding: 20px; background: #f9f9f9; border-radius: 20px; margin-top: 10px;}
.pf-bottom .pf-info ul {display: flex; flex-direction: column; gap: 15px;}
.pf-bottom .pf-info ul li {display: flex; align-items: center; justify-content: space-between;}
.pf-bottom .pf-info ul li p {font-size: 13px; font-weight: 500; color: #888;}
.pf-bottom .pf-info ul li span {font-weight: 600; font-size: 15px; }
.pf-bottom .pf-info ul li.introduce {flex-direction: column; gap: 10px; align-items: flex-start;}
.pf-bottom .pf-info ul li.introduce span {font-size: 15px; font-weight: 500;}
.pf-bottom .pf-btn-wrap {display: flex; gap: 10px; margin-top: 20px;}
.pf-bottom .pf-btn-wrap button {border-radius: 50px !important;}
.pf-bottom .pf-btn-wrap button:first-child{width: 40%; border: 1px solid #16854f; color: #16854f;}
.pf-bottom .pf-btn-wrap button:last-child{width: 60%; background-color: #16854f; color: #fff;} */

/* .pf-wrap {position: fixed; background-color: #00000030; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 100;} */
/* .pf-bottom {position: absolute; width: 100%; bottom: 0; left: 0; background: #fff; border-radius: 20px 20px 0 0; padding: 15px 16px 20px 16px;} */
.pf-wrap .pf-close {display: flex; justify-content: flex-end;}
.pf-wrap .pf-close span {width: 23px;}
.pf-top {display: flex; flex-direction: column; gap: 20px; padding: 25px 16px; border-bottom: 5px solid #f1f1f1;}
.pf-top .introduce p {font-size: 14px; color: #555;}
.pf-wrap .pf-img-sec { display: flex; align-items: center; justify-content: flex-start; gap: 15px;}
.pf-name {display: flex; flex-direction: column; gap: 10px;}
.pf-wrap .pf-img-sec p {font-size: 18px; font-weight: 600;}
.pf-wrap .pf-img-sec em {width: 70px; aspect-ratio: 1 / 1; border-radius: 100%; overflow: hidden;}
.pf-wrap .pf-img-sec ul {display: flex;}
.pf-wrap .pf-img-sec ul li {padding: 0 11px; position: relative; font-size: 14px; font-weight: 500;}
.pf-wrap .pf-img-sec ul li:first-child {padding-left: 0;}
.pf-wrap .pf-img-sec ul li:nth-child(2)::after {content: ""; display: block; width: 1px; height: 10px; background: #ebebeb; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.pf-wrap .pf-img-sec ul li:nth-child(2)::before {content: ""; display: block; width: 1px; height: 10px; background: #ebebeb; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.pf-bottom {padding: 25px 16px; display: flex; flex-direction: column; gap: 15px;}
.pf-info h3 {font-size: 18px; font-weight: 600;}
.pf-wrap .pf-info {display: flex; flex-direction: column; gap: 10px;}
.pf-wrap .pf-info ul {display: flex; flex-direction: column; gap: 9px; padding: 20px 15px; border-radius: 10px; border: 1px solid #eee;}
.pf-wrap .pf-info ul li {display: flex; align-items: center; justify-content: space-between;}
.pf-wrap .pf-info ul li p {font-size: 13px; font-weight: 500; color: #888;}
.pf-wrap .pf-info ul li span {font-weight: 600; font-size: 15px; }
.pf-wrap .pf-info ul li.introduce {flex-direction: column; gap: 6px; align-items: flex-start;}
.pf-wrap .pf-info ul li.introduce span {font-size: 15px; font-weight: 500;}
.pf-wrap .pf-btn-wrap {position: fixed; width: 100%; padding: 15px 16px; bottom: 0; left: 0; display: flex; gap: 10px; background-color: #fff;}
.pf-wrap .pf-btn-wrap button {border-radius: 50px !important;flex-grow:1; font-size: 15px;}
.pf-wrap .pf-btn-wrap button:first-child{border: 1px solid #ddd; color: #777;}
.pf-wrap .pf-btn-wrap button:nth-child(2){border: 1px solid #FF4A4A; color: #FF4A4A;}
.pf-wrap .pf-btn-wrap button:last-child{background-color: #16854f; color: #fff;}




/* ======== 바텀시트 ======== */
.bt_sheet {position: fixed; background-color: #00000030; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 100; display: none;}
.bt_sheet .sheet_box {position: absolute; bottom: 0; left: 0; background-color: #fff; padding: 20px 15px; border-radius: 10px 10px 0 0; width: 100%; box-shadow: 0 4px 20px #00000035;}
.sheet_box .sheet_tit {width: 100%; padding: 20px 0 25px; position: relative;}
.sheet_box .sheet_tit .close {display: block; width: 14px; height: 14px; background: url(../img/sheet_close.png) no-repeat center/contain; position: absolute; top: 0; right: 0;}
.sheet_box .sheet_tit .tit {font-size: 18px; text-align: center; font-weight: 500;}
.sheet_box .sheet_con {margin-bottom: 30px;}
 
/* 출전선수선택 */
.sheet_con.player {display: flex; flex-direction: column; width: 100%;}
.player_con {padding: 15px 0;}
.radio label {display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse;}
.radio .player_name {display: flex; align-items: center; gap: 2px;}
.radio .player_name dt {font-size: 16px; font-weight: 600; color: #333;}
.radio .player_name dd {color: #888; font-size: 12px;}

/* 달력(라이브러리) 커스텀 */
.bt_sheet.cal .sheet_tit {padding:9px;}
.sheet_con.calendar {margin: 10px auto 16px;}
.sheet_con.calendar form {width: 100%; display: contents;}
.rd-days-head {border-bottom: 1px solid #eee;}
.rd-day-head {padding-bottom: 10px; color: #aaa; font-size: 13px; font-weight: 500;}
.re-day-body {position: relative;}
.rd-days-body {position: relative; top: 15px; border-top: 1px solid #fff;}
.rd-day-selected::after {content: ""; display: block; width: 36px; height: 36px; background-color: #16854f; border-radius: 100%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%);} 
.rd-month {width: 100%;}
.rd-next, .rd-back {outline: none;}
.rd-month-label {font-size: 18px; font-weight: 500; padding-top: 10px;}

/* .bt_sheet.cal {position: relative;} */
.bt_sheet .nav {width: 100%; display: flex; padding: 10px; justify-content: center; gap: 150px;}
.bt_sheet .nav > div {width: 8px; height: 14px; background-color: #16854f;}
.bt_sheet .nav > div.left {background: url(../img/left.png) no-repeat center/cover;}
.bt_sheet .nav > div.right {background: url(../img/right.png) no-repeat center/cover;}
.bt_sheet #calendar {position: relative;}
.bt_sheet #calendar h2 {position: absolute; left: 50%; top: -40px; transform: translateX(-50%); font-size: 18px; font-weight: bold;}
.bt_sheet #calendar table {width: 100%;}
.bt_sheet #calendar table th, .bt_sheet #calendar table td {text-align: center; }
.bt_sheet #calendar table th {font-size: 14px; color: #aaa;padding: 7px 0;}
.bt_sheet #calendar table td {padding: 12px 0;}

#calendar table td.highlight {background-color: #16854f33; border-radius: 10px; color: #16854f; font-weight: bold; }
#calendar table td.on {background-color: #16854f; color: #fff; border-radius: 10px; font-weight: bold;}

/* ======== 팝업 모달 ======== */

.pop-wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 10px; overflow: hidden; width: 80vw;}
.pop-wrap .pop-img {width: 100%; max-height: 70vh;}
.pop-wrap .pop-btn {width: 100%; padding: 15px 0; text-align: center; font-size: 16px; color: #16854f; font-weight: 800; background-color: #fff;}

.award-none {display: flex; flex-direction: column; align-items: center; gap: 15px;}
.award-none em {width: 41px;}
.award-none p {font-size: 14px !important; color: #8f8f8f !important;}