/* ======== 서브페이지 ======== */

/* ======== 매치 ======== */
.match-search {padding: 0 16px 20px 16px; border-bottom: 5px solid #f1f1f1; display: flex; flex-direction: column; gap: 18px;}
.match-search .match-btn {display: flex; align-items: center; justify-content: space-between; padding: 18px 15px; background: linear-gradient(to right, #44b17d, #75d9a9); border-radius: 10px; position: relative;}
.match-search .match-btn::after {content: ""; display: block; background: url(../img/match-bg.png) no-repeat; width: 74px; height: 86px; position: absolute; background-size: 100%; bottom: 0; left: 50%; z-index: 1;}
.match-search .match-btn div {display: flex; flex-direction: column; gap: 3px;}
.match-search .match-btn div p {font-size: 20px; color: #fff; font-weight: 600;}
.match-search .match-btn div span {font-size: 14px; color: #fff;}
.match-search .match-btn button {width: fit-content; font-size: 14px; background-color: #fff; padding: 11px 12px; border-radius: 20px !important; position: relative; z-index: 2; height: fit-content !important;}
.match-search .input-box {display: flex; flex-direction: column; gap: 10px;}
/* .match-search .input-box > div {width: 100%; border: 1px solid #ddd; border-radius: 5px; background-color: #fff; padding: 15px;} 기존 */
.input-box .date {position: relative; width: 100%; border: 1px solid #ddd; border-radius: 5px; background-color: #fff; padding: 15px;}
.match-search .input-box .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;}
.match-search .input-box .date span {font-size: 14px; color: #c3c3c3;}
.match-search .input-box .date span.on {color: #111;}
.match-search .chk-box {display: flex; align-items: center; gap: 18px;}
.match-search .chk-box label {display: inline-block; width: fit-content; padding-left: 27px;}
.mt-result > ul {padding: 15px 16px; display: flex; align-items: center; gap: 10px;}
.mt-result > ul li {font-size: 14px; color: #888; padding: 8px 17px; border: 1px solid #ddd; background: #fff; border-radius: 28px;} 
.mt-result > ul li.on {border-color: #16854f; background-color: #DEF2E9; color: #16854f; font-weight: 700;}
.mt-result .result-wrap {padding: 0 16px; display: flex; flex-direction: column; gap: 15px; }
.mt-result .result-wrap > div {padding: 15px 20px; border: 1px solid #eee; background-color: #fff; border-radius: 10px; display: flex; flex-direction: column; gap: 13px;}
.mt-result .result-wrap > div .tit-txt {display: flex; align-items: center; gap: 4px;}
.mt-result .result-wrap > div .tit em {width: 16px; height: 16px; }
.mt-result .result-wrap > div .tit p {font-size: 16px; font-weight: 700;}
.mt-result .result-wrap > div .tit {display: flex; align-items: center; justify-content: space-between;}
.mt-result .result-wrap > div .tit .type {padding: 5px 10px; border-radius: 40px; font-size: 12px; font-weight: 700;}
.mt-result .result-wrap > div .tit .type.host {background: #FFDEDE; color: #E13636;}
.mt-result .result-wrap > div .tit .type.guest {background: #BDE3FF; color: #2482C7;}
.mt-result .result-wrap > div ul {display: flex; flex-wrap: wrap; row-gap: 8px;}
.mt-result .result-wrap > div ul li {width: 50%; display: flex; align-items: center;}
.mt-result .result-wrap > div ul li span {width: 40px; display: block; font-size: 12px; color: #aaa;}
.mt-result .result-wrap > div ul li p {font-size: 14px; color: #555; font-weight: 500; margin-left: 3px;}
.result-none {background-color: transparent !important; border: none !important; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; padding: 50px 0;}
.result-none span {display: block; width: 80px;}
.result-none p {color: #888; text-align: center; font-size: 15px;}


/* ======== 매치 - 디테일 ======== */

.match .bd > span {padding: 8px 17px; border-radius: 25px; font-size: 14px; font-weight: 600; width: fit-content;}
.match span.ing { background: #D3EEE1; color: #16854f;}
.match span.done { background: #E9E9E9; color: #747474;}
.match span.ing-edit {background: #d3eee1; color: #16854f;}
.match span.ing-edit em {background: url(../img/match-ing.png) no-repeat center/contain; width: 6px; height: 6px; display: inline-block; margin-left: 5px;}
.match span.done-edit { background: #E9E9E9; color: #747474;}
.match span.done-edit em {background: url(../img/match-done.png) no-repeat center/contain; width: 6px; height: 6px; display: inline-block; margin-left: 5px;}
.m-detail-wrap {margin-top: 20px; display: flex; flex-direction: column; gap: 30px;}
.m-detail-wrap > div {display: flex; flex-direction: column; gap: 15px;}
.m-detail-wrap h2 {font-size: 18px; font-weight: 600;}
.m-detail-wrap .host-info > div {display: flex; align-items: center; padding: 15px; border-radius: 10px; background-color: #fff; border: 1px solid #eee; gap: 10px;}
.m-detail-wrap .host-info > div .host-pro {width: 67px; height: 67px; border-radius: 100%; border: 1px solid #eee; overflow: hidden;}
.m-detail-wrap .host-info > div .host-name {display: flex; flex-direction: column; gap: 5px;}
.m-detail-wrap .host-info > div .host-name ul {display: flex; align-items: center;}
.m-detail-wrap .host-info > div .host-name ul:first-child li {padding: 0 7px;}
.m-detail-wrap .host-info > div .host-name ul:first-child li:first-child {padding-left: 0; font-size: 16px; font-weight: 600;}
.m-detail-wrap .host-info > div .host-name ul:first-child li:last-child {font-size: 14px; font-weight: 500; color: #aaa; position: relative;}
.m-detail-wrap .host-info > div .host-name ul:first-child li:last-child::after {content: ""; display: block; width: 1px; height: 8px; background: #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.m-detail-wrap .host-info > div .host-name ul:last-child {gap: 6px;}
.m-detail-wrap .host-info > div .host-name ul:last-child li:first-child {font-weight: 600;}
.m-detail-wrap .host-info > div .host-name ul:last-child li:last-child {font-size: 16px; font-weight: 700; color: #16854f;}
.m-detail-wrap .room-info > div {padding: 15px 10px; border: 1px solid #eee; background: #fff; border-radius: 10px;}
.m-detail-wrap .room-info > div ul {display: flex; flex-direction: column; gap: 20px;}
.m-detail-wrap .room-info > div ul li {display: flex; align-items: center;}
.m-detail-wrap .room-info > div ul li span {display: flex; align-items: center; gap: 7px; width: 100px; font-size: 14px; color: #828282; font-weight: 500; flex-shrink: 0;}
.m-detail-wrap .room-info > div ul li span em {width: 18px;}
.m-detail-wrap .room-info > div ul li span p {color: #828282;}
.m-detail-wrap .room-info > div ul li b {font-size: 15px; font-weight: 500; }
.m-detail-wrap .room-info > div ul li b.point {color: #16854f;}
.m-detail-wrap .room-info > div ul li .txt-box b {word-break: break-all;}
.m-detail-wrap .room-info > div ul li.last {flex-direction: column; gap: 15px; align-items: flex-start;}
.m-detail-wrap .room-info > div ul li.last .txt-box {padding: 15px; border-radius: 10px; background: #f3f3f3; width: 100%; min-height: 85px;}
.m-detail-wrap .room-info > div ul li.last .txt-box b {font-size: 15px; }
.m-detail-wrap .btn-wrap {display: flex; align-items: center; gap: 10px; flex-direction: row;}
.m-detail-wrap .btn-wrap button {width: 50%;}
.m-detail-wrap .btn-wrap button.sub {border: 1px solid #16854f; color: #16854f; background-color: #fff;}
.m-detail-wrap .btn-wrap button.sub-ing {border-color: #eee; color: #888;}


/* ======== 매치 - 라운드 ======== */

.round-btn {display: flex; gap: 10px; justify-content: flex-end; padding: 15px 16px;}
.round-btn button {padding: 10px 15px; background: #fff; border: 1px solid #ddd; display: flex; align-items: center; gap: 5px; width: fit-content; border-radius: 50px !important; font-size: 14px;}
.round-btn button i {width: fit-content; }
.round-con {display: flex; flex-direction: column; gap: 15px; padding: 0 16px;}
.round-con.double {padding-bottom: 25px; border-bottom: 5px solid #f1f1f1;}
.round-con h2 {font-size: 20px; font-weight: 700; }
.round-con h3 {font-size: 15px; color: #16854f; font-weight: bold; margin-bottom: -7px;}
.round-con h3 b {color: #16854f; font-weight: bold;}

.single {padding: 25px 16px;}
.single .rank-right .rank-head li {width: 50% !important;}
.single .rank-right .rank-box li ul li {width: 50% !important;}
.single .ran-wrap {width: 100% !important;}
.single .ran-wrap .rank-left ul li {width: 80px;}
.single .default-ran .ran-wrap .rank-right {width: calc(100% - 80px);}

.round-tit {display: flex; align-items: center; justify-content: space-between;}
.round-tit span {padding: 4px 8px; border-radius: 5px; background-color: #e9e9e9; font-size: 12px; display: block; color: #555; font-weight: 600;}
.round-wrap {display: flex; flex-direction: column; gap: 20px;}

/* ======== 매치 - 피드백 ======== */

.feed-wrap {display: flex; flex-direction: column; gap: 20px;}
.feed-wrap .feed-tit {display: flex; flex-direction: column; gap: 3px;}
.feed-wrap .feed-tit h2 {display: flex; align-items: center; gap: 5px; font-weight: 700; color: #16854f;}
.feed-wrap .feed-tit h2 em {width: 16px;}
.feed-wrap .feed-tit span {font-size: 14px; color: #444;}
.feed-wrap .feed-con {border-radius: 10px; border: 1px solid #ddd; overflow: hidden;}
.feed-wrap .feed-con table {width: 100%; background-color: #fff;}
.feed-wrap .feed-con thead {background-color: #BDE6D2;}
.feed-wrap .feed-con thead tr th {padding: 15px 0; width: calc((100% - 65px) / 2); text-align: center; font-size: 14px; font-weight: 700;}
.feed-wrap .feed-con thead tr th:first-child {width: 65px; border-right: 1px dashed #eee;}
.feed-wrap .feed-con tbody tr {border-bottom: 1px dashed #eee;}
.feed-wrap .feed-con tbody tr:last-child {border: none;}
.feed-wrap .feed-con tbody tr td {padding: 15px 0; text-align: center; font-size: 14px; font-weight: 600;}
.feed-wrap .feed-con tbody tr td {border-right: 1px dashed #eee;}
.feed-wrap .feed-con tbody tr td:last-child {border: none;}


/* ======== 커뮤니티 ======== */

.board-wrap .banner {position: relative; border-radius: 10px; overflow: hidden;margin: 10px 16px;}
.board-wrap .banner::after {content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.5);}
.board-wrap .banner .banner-img {height: 110px;}
.board-wrap .banner .banner-img img {object-fit: cover;}
.board-wrap .banner .banner-txt {position: absolute; top: 50%; left: 20px; transform: translateY(-50%); z-index: 2;}
.board-wrap .banner .banner-txt span {font-size: 13px; color: #fff; font-weight: 300; margin-bottom: 5px;}
.board-wrap .banner .banner-txt p {font-size: 20px; color: #fff; font-weight: 500; line-height: 1.2; margin-top: 3px;}
.board-wrap .board-con .select-mo {display: flex; align-items: center; gap: 3px; justify-content: flex-end;}
.board-wrap .board-con .select-mo p {font-size: 15px; color: #888;}
.board-wrap .board-con .board {padding: 20px 16px; display: flex; flex-direction: column; gap: 13px;  border-bottom: 1px solid #eee;}
.board-wrap .board-con .board > p {font-size: 16px; font-weight: 600;text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.board-wrap .board-con .board > span {font-size: 12px; color: #888; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-top: -6px;}
.board-wrap .board-con .board > div {display: flex; align-items: center; justify-content: space-between;}
.board-wrap .board-con .board > div ul {display: flex; align-items: center; gap: 10px;}
.board-wrap .board-con .board > div ul li {display: flex; align-items: center; gap: 3px;}
.board-wrap .board-con .board > div ul li em {width: 14px; margin-bottom: 1px;}
.board-wrap .board-con .board > div ul li span {font-size: 12px; color: #9b9b9b;}
.board-wrap .board-con .board > div p {font-size: 13px; color: #888; font-weight: 400;}
.write-btn {position: fixed; border-radius: 50px !important; background-color: #16854f; padding: 8px 20px; width: fit-content; height: fit-content !important; gap: 6px; right: 20px; bottom: 105px;}
.write-btn em {width: 13px;}
.write-btn p {font-size: 14px; color: #fff; font-weight: 500;}
.board-wrap .board-none {text-align: center; padding: 100px 0; }
.board-wrap .board-none p {font-size: 15px; color: #888;}

/* IE의 경우 */
input::-ms-clear,
input::-ms-reveal{
    display:none;
}
/* 크롬의 경우 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
    display:none;
}


/* ======== 검색 ======== */

.search-bar {display: flex; padding: 15px 16px; border-bottom: 1px solid #eee; gap: 5px; align-items: center;}
.search-bar .back {width: 23px;}
.search-bar input {outline: none; width: 100%; padding: 3px 5px;}
.search-bar input::placeholder {font-size: 15px;}
.search-bar .search-icon {width: 24px;}
.search-box {padding: 20px 16px;}
.search-box > div {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.search-box > div p {font-size: 13px; font-weight: 400; color: #666;}
.search-box > div span {font-size: 12px; color: #888;}
.search-box ul {display: flex; flex-direction: column; gap: 18px;}
.search-box ul li {display: flex; align-items: center; justify-content: space-between;}
.search-box ul li p {font-size: 16px; font-weight: 500;}
.search-box ul li i {font-size: 20px; color: #ccc;}


/* ======== 게시판 작성 ======== */

.bar {display: flex; padding: 8px 16px; border-bottom: 1px solid #eee; align-items: center; justify-content: space-between;}
.bar .back {width: 23px;}
.bar button {width: fit-content; padding: 0; font-size: 16px; color: #16854f; font-weight: 600;}
.write .write-con .write-tit {background-color: #f8f8f8; border-bottom: 1px solid #ddd;}
.write .write-con .write-tit input {border: none; background-color: transparent;}
.write .write-con textarea {width: 100%; padding: 20px 16px; background: #f8f8f8; outline: none; height: 300px;}
.write .write-con textarea::placeholder {color: #b1b1b1;}
.write .photo-wrap {padding: 20px 0 20px 16px; display: flex; flex-direction: column; gap: 15px;}
.write .photo-wrap > div {width: 100%; overflow-x: scroll;}
.write .photo-wrap span {font-size: 14px; color: #888;}
.write .photo-wrap ul {display: flex; align-items: center; gap: 7px; width: max-content;}
.write .photo-wrap ul li {width: 90px; height: 90px; border-radius: 5px; overflow: hidden; position: relative;}
.write .photo-wrap ul li .delect-ph {width: 20px; height: 20px; border-radius: 100%; background: #fff; position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center;}
.write .photo-wrap ul li .delect-ph i {font-size: 20px; color: #888;}
.write .photo-wrap ul li.ph-add {display: flex; flex-direction: column; gap: 9px; align-items: center; justify-content: center; background: #f1f1f1;}
.write .photo-wrap ul li.ph-add em {width: 20px;}
.write .photo-wrap ul li.ph-add p {font-size: 13px; color: #575757; font-weight: 500;}
.wrap.board_write {padding-top: 0 !important;}


/* ======== 게시판 ======== */

.board-tit {padding: 20px 16px; display: flex; align-items: flex-start; border-bottom: 5px solid #eee;}
.board-tit .bo-writer {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; position: relative; width: 100%;}
.board-tit .bo-writer h2 {font-size: 18px; font-weight: 500;}
.board-tit .bo-writer .bo-profile {display: flex; align-items: center; gap: 8px;} 
.board-tit .bo-writer .bo-profile .bo-pro {width: 32px; height: 32px; border-radius: 100%; overflow: hidden; }
.board-tit .bo-writer .bo-profile .bo-name p {font-size: 13px; color: #555; font-weight: 500; margin-bottom: 5px;}
.board-tit .bo-writer .bo-profile .bo-name ul {margin-top: -5px; display: flex; align-items: center;}
.board-tit .bo-writer .bo-profile .bo-name ul li {display: inline-block; font-size: 11px; color: #888; padding: 0 7px; position: relative;}
.board-tit .bo-writer .bo-profile .bo-name ul li:first-child {padding-left: 0;}
.board-tit .bo-writer .bo-profile .bo-name ul li:first-child::after {content: ""; display: block; width: 1px; height: 8px; background-color: #ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.board-tit .bo-writer .bo-profile .bo-name ul li em {display: inline-block; color: #888;}
.board-tit .more {display: flex; align-items: center; gap: 3px; position: absolute; top: 10px; right: 0;}
.board-tit .more span {display: block; width: 2px; height: 2px; border-radius: 100%; background: #888;}
.board.notice span {font-size: 12px; color: #b5b5b5;}
.board.notice p {display: flex; align-items: center; gap: 3px;}
.board .b-new {background: url(../img/new.png) no-repeat center/cover; width: 14px; height: 14px; }

.board-view {padding: 30px 16px; font-weight: 500; }
.comment-wrap .co-head {padding: 10px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f1f1f1; border-top: 1px solid #f1f1f1;}
.comment-wrap .co-head p {display: flex; gap: 4px; font-size: 13px; color: #888;}
.comment-wrap .co-head em {font-weight: 700;}
.comment-inner > ul {display: flex; flex-direction: column;}
.comment-inner > ul li .comm {display: flex; padding: 16px; gap: 8px;}
.comment-inner > ul li .comm > em {width: 32px; height: 32px; border-radius: 100%; overflow: hidden;}
.comment-inner > ul li .comm .co-prof {position: relative; display: flex; flex-direction: column; gap: 10px; width: calc(100% - 40px); margin-top: 4px;}
.comment-inner > ul li .comm .co-prof .more {position: absolute; top: 5px; right: 0; display: flex; align-items: center; gap: 3px;}
.comment-inner > ul li .comm .co-prof .more span {display: block; width: 2px; height: 2px; border-radius: 100%; background: #888; }
.comment-inner > ul li .comm .co-prof b {font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 5px;}
.comment-inner > ul li .comm .co-prof b span {font-size: 12px; color: #adadad;}
/* .comment-inner > ul li .comm .co-prof > p {font-size: 16px;} */
.comment-inner > ul li .s-comment {background-color: #f9f9f9; border-bottom: 1px solid #eee; padding-left: 45px;}
.comment-inner > ul li .comm .co-prof b em {font-size: 11px; padding: 2px 7px; border-radius: 20px; background-color: #16854f; color: #fff;}
.comment-inner p.co-none {text-align: center; padding: 70px 0; font-size: 15px; color: #8f8f8f;}
.re-com {font-size: 12px; color: #888;}

.comment-bar {padding: 10px 16px; border-top: 1px solid #eee; display: flex; align-items: center; gap: 10px; position: fixed; width: 100%; bottom: 0; left: 0; background-color: #fff;} 
.comment-bar .like-btn {background: url(../img/like.png) no-repeat center/cover; width: 20px; height: 18px;}
.comment-bar .like-btn.on {background: url(../img/like-chk.png) no-repeat center/cover; width: 20px; height: 18px;}
.comment-bar .comment-write {position: relative; width: calc(100% - 30px);}
.comment-bar .comment-write input {background-color: #f0f0f0; padding: 12px 47px 12px 13px; border-radius: 35px; width: 100%; outline: none; display: block;}
.comment-bar .comment-write input:focus {outline: none;}
.comment-bar .comment-write .regist {content: ""; display: block; position: absolute; background: url(../img/comment.png) no-repeat center/cover; width: 25px; height: 19px; top: 50%; right: 10px; transform: translateY(-50%);}
.board-tit .not-date {font-size: 12px; color: #b5b5b5;}

.comment-bar .comment-write textarea {background-color: #f0f0f0; padding: 12px 47px 12px 13px; border-radius: 35px; width: 100%; outline: none; display: block; height: 48px; max-height: 100px; font-size: 15px;}

.comment-write textarea {
	-ms-overflow-style:none; /* IE and Edge */
    scrollbar-width:none; /* Firefox */
}

.comment-write textarea::-webkit-scrollbar {
	display:none; /* Chrome , Safari , Opera */
}

.re-comment-bar {position: fixed; width: 100%; left: 0; bottom: 69px; display: flex; padding: 10px 16px; background-color: #f5f5f5; align-items: center; justify-content: space-between;}
.re-comment-bar p {font-size: 14px; color: #888;}
.re-comment-bar p b {font-weight: 700;; color: #777;}
.re-comment-bar span {font-size: 12px; color: #666; font-weight: 600;}

/* ======== 커뮤니티 - 클럽 ======== */

.club-search-wrap {border-bottom: 5px solid #eee; padding: 25px 16px;}
.club-search-wrap .club-search {display: flex; align-items: center; gap: 10px;}
.club-search-wrap .club-search input {width: calc(100% - 67px); background: #fff; border: 1px solid #ddd; padding: 15px 10px; height: 50px; outline: none;}
.club-search-wrap .club-search button {font-size: 15px; color: #fff; background-color: #16854f; padding: 0 15px; height: 50px; border-radius: 5px; width: fit-content;}
.club-search-wrap .club-sort ul {display: flex; align-items: center; gap: 13px; margin-top: 13px;}
.club-search-wrap .club-sort ul li {border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #888; padding: 9px 15px; border-radius: 20px; gap: 6px; background-color: #fff;}
.club-search-wrap .club-sort ul li em {width: 11px;}
.club-search-wrap .club-sort ul li:first-child {width: 35px; height: 35px; border-radius: 100%; padding: 0;}
.club-search-wrap .club-sort ul li:first-child em {width: 14px;}

.club-wrap {display: flex; flex-direction: column; gap: 15px; padding: 0px 16px;}
.club-wrap > div {padding: 12px 10px; border: 1px solid #eee; background-color: #fff; border-radius: 10px;}
.club-wrap > div .club-top {display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1f1f1;}
.club-wrap > div .club-top .club-img {width: 68px; height: 68px; border-radius: 100%; overflow: hidden;}
.club-wrap > div .club-top .club-name {display: flex; flex-direction: column; gap: 5px;}
.club-wrap > div .club-top .club-name > div {display: flex; align-items: center; gap: 5px;}
.club-wrap > div .club-top .club-name > div p {font-size: 18px; font-weight: 600;}
.club-wrap > div .club-top .club-name > div span {font-size: 12px; color: #16854f; padding: 3px 10px; border-radius: 30px; background: #DCEDE5; font-weight: 500; display: block;}
.club-wrap > div .club-top .club-name > b {display: flex; align-items: center; gap: 4px; font-size: 14px; color: #666;}
.club-wrap > div .club-top .club-name > b em {background: url(../img/map-icon2.png) no-repeat center/cover; width: 14px; height: 17px; margin-bottom: 2px;}
.club-wrap > div .club-bot {display: flex; align-items: center; justify-content: space-between; padding-top: 10px;}
.club-wrap > div .club-bot .club-prof {display: flex; align-items: center; gap: 6px;}
.club-wrap > div .club-bot .club-prof ul {display: flex;}
.club-wrap > div .club-bot .club-prof ul li {width: 32px; height: 32px; border-radius: 100%; border: 1px solid #f1f1f1; overflow: hidden; margin-left: -11px; position: relative;}
.club-wrap > div .club-bot .club-prof ul li:first-child {margin-left: 0;}
.club-wrap > div .club-bot .club-prof ul li:last-child::after {content: ""; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0;}
.club-wrap > div .club-bot .club-prof ul li:last-child::before {content: ""; display: block; position: absolute; background: url(../img/dot.png) no-repeat center/cover; width: 10px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.club-wrap > div .club-bot .club-prof p {font-size: 14px; color: #888;}
.club-wrap > div .club-bot .club-mem {display: flex; align-items: center; gap: 3px;}
.club-wrap > div .club-bot .club-mem em {background: url(../img/people.png) no-repeat center/cover; width: 18px; height: 16px;}
.club-wrap > div .club-bot .club-mem div {display: flex; align-items: center; gap: 3px; font-size: 12px; color: #888;}
.club-wrap > div .club-bot .club-mem div span {color: #888;}


/* ======== 클럽 - 디테일 ======== */

.cl-detail-wrap .d-club-img {width: 100%; height: 230px;}
.cl-info {padding: 25px 16px; display: flex; flex-direction: column; gap: 25px; border-bottom: 5px solid #eee;}
.cl-info > div {display: flex; flex-direction: column; gap: 15px;}
.cl-info > div h2 {font-size: 18px; font-weight: 600;}
.cl-info > div.cl-intro p {font-size: 15px;}

.cl-de ul {display: flex; flex-direction: column; gap: 15px;}
.cl-de ul li {display: flex; align-items: flex-start;}
.cl-de ul li span {width: 90px; font-size: 14px; color: #888; font-weight: 500; flex-shrink: 0;}
.cl-de ul li p {font-size: 15px; font-weight: 500;}

.cl-map .locat .map {border-radius: 5px; overflow: hidden; margin-bottom: 10px;}
.cl-map .locat .copy div {display: flex; align-items: center; gap: 3px;}
.cl-map .locat .copy div em {background: url(../img/copy.png) no-repeat center/cover; width: 16px; height: 15px;}
.cl-map .locat .copy div p {font-size: 14px; color: #888; border-bottom: 1px solid #888;}
.cl-map .locat .copy span {font-size: 14px; margin-top: 13px; display: block; font-weight: 500;}

.cl-mem-list {padding: 20px 16px;}
.cl-mem-list h2 {font-size: 18px; font-weight: 600; margin-bottom: 15px;}
.cl-mem-list ul li {display: flex; align-items:center; gap: 10px; position: relative; padding: 10px 0;}
.cl-mem-list ul li > b {width: 18px; font-size: 14px; display: block; font-weight: 700;}
.cl-mem-list ul li > em {width: 32px; height: 32px; border-radius: 100%; overflow: hidden;}
.cl-mem-list ul li > .mem-info {display: flex; align-items: center; width: calc(100% - 70px);}
.cl-mem-list ul li > .mem-info p {padding-right: 5px; font-size: 16px; font-weight: 500;}
.cl-mem-list ul li > .mem-info span {padding-left: 5px; font-size: 14px; color: #aaa; position: relative; flex-shrink: 0; font-weight: 500;}
.cl-mem-list ul li > .mem-info span::after {content: ""; display: block; width: 2px; height: 2px; border-radius: 100%; background-color:  #aaa; position: absolute; top: 50%; left: -1px; transform: translateY(-50%);}
.cl-mem-list ul li > .mem-info b {font-size: 12px; color: #16854f; background: #DCEDE5; padding: 3px 10px; border-radius: 50px; margin-left: 7px;font-weight: 700;}
.cl-mem-list ul li > strong {position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 13px; color: #16854f; font-weight: 700;}

.cl-mem-list > span {text-align: center; padding-top: 30px; font-size: 14px; font-weight: 500; color: #aaa; }

.member {display: flex; flex-direction: column; gap: 20px;}
.member .cl-mem-list {padding: 0 !important;}
.member .member-tit {display: flex; align-items: center; justify-content: space-between;}
.member .member-tit h2 {font-weight: 600;}
.member .member-tit span {font-size: 14px; color: #16854f; font-weight: 600;}
.member .member-tit span.on {padding: 6px 14px; background: #16854f; color: #fff; border-radius: 5px;}
.member .cl-mem-list ul li > p {font-size: 14px; font-weight: 600; color: #555; padding: 6px 14px; background: #eee; border-radius: 5px;position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: none;}

/* ======== 커뮤니티 - 친구 ======== */

.friend-tit {padding: 15px 0;}
.friend-tit > div {display: flex; align-items: center; justify-content: space-between;}
.friend-tit > div h2 {font-size: 20px; font-weight: 700;}
.friend-tit > div em {width: 35px;}
.friend-tit > span {font-size: 14px; color: #9f9e9e; margin-top: 10px;}
.friend-tit > span b {color: #9f9e9e;}
.friend-wrap > ul {display: flex; flex-direction: column; gap: 10px;}
.friend-wrap > ul > li {padding: 5px 0 15px 0; display: flex; align-items: center; gap: 12px; position: relative; }
/* .friend-wrap > ul > li:first-child {padding-top: 5px;} */
.friend-wrap > ul > li .fri-prof {width: 46px; height: 46px; border-radius: 100%; overflow: hidden;}
.friend-wrap > ul > li .fri-info {display: flex; flex-direction: column; gap: 5px;}
.friend-wrap > ul > li .fri-info .fri-name {display: flex; flex-direction: column; align-items: flex-start; gap: 1px;}
.friend-wrap > ul > li .fri-info .fri-name p {font-size: 16px; font-weight: 600;}
.friend-wrap > ul > li .fri-info .fri-name ul {display: flex; align-items: center;}
.friend-wrap > ul > li .fri-info .fri-name ul li {padding: 0 8px; font-size: 13px; color: #888; font-weight: 500; position: relative;}
.friend-wrap > ul > li .fri-info .fri-name ul li:first-child {padding-left: 0;}
.friend-wrap > ul > li .fri-info .fri-name ul li:nth-child(2)::after {content: ""; display: block; width: 1px; height: 8px; background: #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.friend-wrap > ul > li .fri-info .fri-name ul li:nth-child(2)::before {content: ""; display: block; width: 1px; height: 8px; background: #ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.friend-wrap > ul > li .fri-info .fri-ntrp ul {display: flex; align-items: center; gap: 40px;}
.friend-wrap > ul > li .fri-info .fri-ntrp ul li {display: flex; align-items: center; gap: 10px;}
.friend-wrap > ul > li .fri-info .fri-ntrp ul li p {font-size: 14px; color: #c3c3c3; font-weight: 500;}
.friend-wrap > ul > li .fri-info .fri-ntrp ul li span {font-size: 14px;  color: #16854f; font-weight: 800;}

.friend-wrap .fri-none {padding: 50px 0;}
.friend-wrap .fri-none p {text-align: center; font-size: 15px; color: #888;}

.friend-wrap .fri-inf ul {display: flex; align-items: center;}
.friend-wrap .fri-inf ul li {font-size: 12px; padding: 0 5px; color: #777; position: relative; font-weight: 500;}
.friend-wrap .fri-inf ul li:first-child {padding-left: 0;}
.friend-wrap .fri-inf ul li:nth-child(2)::after {content: ""; display: block; width: 2px; height: 2px; border-radius: 100%; background-color: #ccc; position: absolute; top: 50%; left: -1px; transform: translateY(-50%);}
.friend-wrap .fri-inf ul li:nth-child(2)::before {content: ""; display: block; width: 2px; height: 2px; border-radius: 100%; background-color: #ccc; position: absolute; top: 50%; right: -1px; transform: translateY(-50%);}
.friend-wrap .follow {color: #16854f; font-size: 13px; font-weight: 600; position: absolute; top: 15%; right: 0; transform: translateY(-50%);}


/* ======== 커뮤니티 - 채팅 ======== */

.chat-wrap .chat {display: flex; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eee;}
.chat-wrap .chat .chat-con {display: flex; align-items: center; gap: 10px;}
.chat-wrap .chat .chat-con .prof {width: 48px; height: 48px; border-radius: 100%; overflow: hidden;}
.chat-wrap .chat .chat-con .chat-name p {font-weight: 500;}
.chat-wrap .chat .chat-con .chat-name p em {display: inline-block; font-size: 12px; color: #888;padding-left: 5px;}
.chat-wrap .chat .chat-con .chat-name span {font-size: 14px; color: #444; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.chat-wrap .chat .chat-time {display: flex; flex-direction: column; align-items: flex-end;}
.chat-wrap .chat .chat-time p {font-size: 12px; color: #888;}
.chat-wrap .chat .chat-time b {padding: 5px; background-color: #ef3a2f; border-radius: 50px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; margin-top: 10px;}
.chat-wrap .chat .chat-time b em {color: #fff; font-size: 12px; line-height: 1.2;}



/* ======== 채팅 - 디테일 ======== */

.chat-bar .comment-write {width: 100%;}

.chatting {position: relative; background-color: #F9F9F9;}
.chatting .bg {width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-color: #f9f9f9; z-index: -1;}
.chatting .chat-alarm {position: sticky; top: 0; background-color: #fff; padding: 20px 16px; border-radius: 0 0 5px 5px; box-shadow: 0 6px 9px rgba(211, 211, 211, 0.3); z-index: 10;}
.chatting .chat-alarm p {font-size: 16px; font-weight: 500; width: 100%; position: relative;}
.chatting .chat-alarm p::after {content: ""; display: block; background: url(../img/chat-angle.png) no-repeat center/cover; width: 14px; height: 9px; position: absolute; top: 30%; right: 0; transform:rotate(0deg); transition: all 0.4s;}
.chatting .chat-alarm p.on::after {transform: rotate(180deg);}
.chatting .chat-alarm p b {font-weight: 700;}
.chatting .chat-alarm .chat-btn {display: flex; align-items: center; gap: 10px; margin-top: 15px;}
.chatting .chat-alarm .chat-btn button {width: 50%; padding: 12px 0;}

.chatting .message {padding: 15px 16px; display: flex; flex-direction: column; gap: 10px;}
.chatting .message .other {display: flex; align-items: flex-start; gap: 10px;}
.chatting .message .other .ot-prof {width: 38px; height: 38px; border-radius: 100%; overflow: hidden; flex-shrink: 0;}
.chatting .message .other .ot-chat b {font-size: 14px; font-weight: 500;}
.chatting .message .other .ot-chat > div {padding: 8px 15px; border-radius: 50px; background-color: #eee; margin-top: 3px;}
.chatting .message .other .ot-chat > div p {font-size: 15px; font-weight: 400; word-break: break-all;}
.chatting .message > div span {font-size: 10px; color: #b4b4b4; margin-top: 3px;}
.chatting .message .my-mes {display: flex; flex-direction: column; align-items: flex-end;}
.chatting .message .my-mes div {padding: 8px 15px; border-radius: 50px; background-color: #A0DBBF; margin-top: 3px; position: relative;}
.chatting .message .my-mes div p {font-size: 15px; font-weight: 400;}
.chatting .message .my-mes .me-new {font-size: 13px; color: #16854f; font-weight: 600; position: absolute; bottom: 0; left: -10px;}

.chatting .left-chat {display: flex; align-items: center; justify-content: center; gap: 3px; padding: 15px 0;}
.chatting .left-chat p {display: flex; align-items: center; font-size: 13px; color: #888;}
.chatting .left-chat p em {color: #777; font-weight: 600;}

.chat-sett {position: fixed; width: 100%; height: 100vh; top: 0; right: -100%;  background-color: #fff; z-index: 9999; }
.chat-sett.on {right: 0%;}


.chat-sett .sett-head {padding: 30px 16px; position: relative;}
.chat-sett .sett-head .back {position: absolute; top: 50%; left: 16px; width: 25px; aspect-ratio: 1; transform: translateY(-50%); background: url(../img/back2.png) no-repeat center/contain;}
.chat-sett .sett-name {display: flex; align-items: center; gap: 10px; padding-bottom: 15px; padding-top: 10px; border-bottom: 1px solid #eee;}
.chat-sett .sett-name em {width: 38px; height: 38px; border-radius: 100%; overflow: hidden; }
.chat-sett .sett-name > div p {font-size: 18px; font-weight: 600;}
.chat-sett .sett-name > div ul {display: flex; margin-top: 5px;}
.chat-sett .sett-name > div ul li {padding: 0 8px; font-size: 14px; color: #888; position: relative;}
.chat-sett .sett-name > div ul li:first-child {padding-left: 0;}
.chat-sett .sett-name > div ul li:nth-child(2)::after {content: ""; display: block; width: 1px; height: 8px; background: #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.chat-sett .sett-name > div ul li:nth-child(2)::before {content: ""; display: block; width: 1px; height: 8px; background: #ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.sett-wrap .sett-con {padding-top: 10px;}
.sett-wrap .sett-con ul {display: flex; flex-direction: column;}
.sett-wrap .sett-con ul li {padding: 12px 0; display: flex; align-items: center; gap: 6px;}
.sett-wrap .sett-con ul li:first-child {justify-content: space-between;}
.sett-wrap .sett-con ul li em {width: 20px; }
.sett-wrap .sett-con ul li p {font-weight: 500;}
.sett-wrap .sett-con ul li:last-child p {color: #FF4A4A;}
.chat-sett .sett-wrap {height: calc(100% - 60px);}
.sett-wrap .chat-leave {display: flex; align-items: center; gap: 5px; padding: 15px 16px; width: 93%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-top: 1px solid #eee;}
.sett-wrap .chat-leave em {width: 20px;}
.sett-wrap .chat-leave p {color: #aaa; font-weight: 500; font-size: 15px;}
.chat-box {position: relative;}

.prev-time {width: 100%; display: flex; align-items: center; justify-content: center; padding: 15px 0; position: relative;}
.prev-time span { font-size: 13px !important; color: #888 !important; font-weight: 600; position: relative;}
.prev-time::after {content: ""; display: block; width: 33%; height: 1px; background-color: #e9e9e9; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.prev-time::before {content: ""; display: block; width: 33%; height: 1px; background-color: #e9e9e9; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}

/* ======== 신고페이지 ======== */

/* .report-wrap input[type="radio"] {display: none;}
.report-wrap input[type="radio"] + label span {display: block; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; }
.report-wrap input[type="radio"]:checked + label span {border-color: #16854f; position: relative;}
.report-wrap input[type="radio"]:checked + label span::after {content: ""; display: block; width: 8px; height: 8px; border-radius: 100%; background-color: #16854f; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.report-wrap input[type="radio"]:checked + label p {font-weight: 700;} */
.report-wrap {padding: 16px; display: flex; flex-direction: column; gap: 20px;}
.report-wrap > div label {display: flex; gap: 10px; align-items: center;}
.report-wrap > div label p {font-size: 16px; font-weight: 500;}
.report-wrap > div .last {flex-direction: column; align-items: flex-start;}
.report-wrap > div .last > div {display: flex; align-items: center; gap: 10px;}
.report-wrap > div .last textarea {width: 100%; border: 1px solid #ddd; height: 145px; font-size: 15px; outline: #16854f;}
.report-wrap > div .last textarea:focus {border-color: #16854f;}

/* ======== 랭크 ======== */

.de-tab ul {display: flex; padding: 0 16px; border-bottom: 1px solid #f1f1f1; background-color: #fff; margin-bottom: 12px;}
.de-tab ul li {flex-grow: 1; text-align: center; font-size: 15px; color: #555; height: 100%; padding: 15px 0;}
.de-tab ul li.on {border-bottom: 2px solid #16854f; font-weight: bold; color: #16854f;}

.rank-wrap > ul {margin-bottom: 14px; display: flex; gap: 10px;}
.rank-wrap > ul li {flex-grow: 1; padding: 10px 0; border-radius: 5px; border: 1px solid #ddd; text-align: center; color: #888; background-color: #fff; font-size: 15px;}
.rank-wrap > ul li.on2 {border-color: #16854f; color: #16854f; background: #d3eee1; font-weight: 500;}
.rank-fixed ul li {font-size: 14px; font-weight: 600;}

.rank-wrap .rank-notice {display: flex; align-items: center; gap: 3px; margin-bottom: 12px;}
.rank-wrap .rank-notice em {width: 19px;}
.rank-wrap .rank-notice p {font-weight: 600; color: #16854f;}

.rank-wrap .rank-reg {width: 100%; height: 50px; padding: 15px 10px; border-radius: 5px; border: 1px solid #ddd; background: url(../img/select-angle2.png) no-repeat; background-position: 96% 50%; background-size: 3%; margin-bottom: 13px; margin-top: -5px; background-color: #fff;}
.rank-wrap .rank-reg p {font-size: 15px; color: #888;}

/* ======== 랭크 ex ======== */

.multi .rank-de {max-height: fit-content;}
/* .point .rank-de {max-height: calc(100vh - 230px);} */
.rank-de {border-radius: 10px; border: 1px solid #eee; overflow: hidden; max-height: fit-content; height: fit-content; overflow-y: scroll; overflow-x: scroll; isolation: isolate; background-color: #fff;}
.rank-de table thead {background-color: #BDE6D2; width: 100%; position: sticky; top: 0;}
.rank-de table thead tr {display: flex; width: max-content; column-gap: 7px;}
.rank-de table thead tr th {width: 105px; height: 53px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-align: center;}
.rank-de table thead tr th:first-child {position: sticky; top: 0; left: 0; background-color: #BDE6D2; z-index: 2; border-right: 1px dashed #eee; width: 70px;}
.rank-de table tbody tr {display: flex; width: max-content; border-bottom: 1px dashed #eee; column-gap: 7px;}
.rank-de table tbody tr:last-child {border-bottom: none;}
.rank-de table tbody tr td {width: 105px; height: 52px; display: flex; align-items: center; justify-content: center;background-color: #fff; position: relative; z-index: -2; gap: 3px;}
.rank-de table tbody tr td p {font-size: 13px; font-weight: 500;}
.rank-de table tbody tr td span {font-size: 13px; font-weight: 700; color: #aaa;}
.rank-de table tbody tr td img {width: 28px; object-fit: contain;}
.rank-de table tbody tr td:first-child {position: sticky; left: 0; z-index: -1; border-right: 1px dashed #eee; font-size: 14px; font-weight: 700; width: 70px;}

.rank2 table thead tr th {height: auto; padding: 13px 0;}
.rank2 table thead tr th:first-child {position: static;}
.rank2 table tbody tr td:first-child {position: static;}

.rank-point {max-height: fit-content;}
.rank-point table tbody tr td {flex-direction: column;}

@supports (-webkit-touch-callout: none)  {
    .rank-de { overscroll-behavior:none;}
    }

/* 스크롤바 숨기기 */

.rank-de{
	-ms-overflow-style:none; /* IE and Edge */
    scrollbar-width:none; /* Firefox */
}

.rank-de::-webkit-scrollbar {
	display:none; /* Chrome , Safari , Opera */
}

/* ======== 랭크 ex2 ======== */

.de-table {border: 1px solid #eee; border-radius: 10px; overflow: hidden; background-color: #fff;}
.de-table table {width: 100%;}
.de-table thead {background-color: #bde6d2;}
.de-table thead tr th {padding: 15px 10px; text-align: center; font-size: 14px; font-weight: 800;}
.de-table thead tr th:first-child {border-right: 1px dashed #eee;}
.de-table tbody tr {border-bottom: 1px dashed #eee;}
.de-table tbody tr:last-child {border-bottom: none;}
.de-table tbody tr td {padding: 15px 0; text-align: center; font-size: 15px; font-weight: 500;}
.de-table tbody tr td:first-child {font-size: 14px; color: #777; border-right: 1px dashed #eee;}


input[type="radio"] {display: none;}
input[type="radio"] + label span {display: block; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; }
input[type="radio"]:checked + label span {border-color: #16854f; position: relative;}
input[type="radio"]:checked + label span::after {content: ""; display: block; width: 8px; height: 8px; border-radius: 100%; background-color: #16854f; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
input[type="radio"]:checked + label p {font-weight: 700;}

.add-custom .search_con .search_input {width: 100%; position: relative;}
.add-custom .search_input input {padding-left: 16px;}
.add-custom .search_input em {background: url(../img/select-angle2.png) no-repeat center/cover; width: 10px; height: 8px; position: absolute; top: 50%; right: 16px; transform: translateY(-50%);}


/* -------- 340px -------- */
@media screen and (max-width: 340px) {
    .friend-wrap > ul > li {gap: 9px;}
    .friend-wrap > ul > li .fri-info .fri-name p {font-size: 14px;}
    .friend-wrap .follow {padding: 7px 8px;}
    .friend-wrap > ul > li .fri-prof {width: 42px; height: 42px;}
    .friend-wrap > ul > li .fri-info .fri-name ul li {font-size: 12px; padding: 0 5px;}

    .friend-wrap > ul > li .fri-info .fri-ntrp ul {gap: 15px;}
    .friend-wrap > ul > li .fri-info .fri-ntrp ul li p {font-size: 13px;}

    .tabs ul li {font-size: 14px;}
    .comm.tabs {overflow-x: scroll; width: 100%;}
    .comm.tabs ul {width: max-content;}
}

/* -------- 320px -------- */
@media screen and (max-width: 320px) {
    .mt-result .result-wrap > div {padding: 13px; gap: 11px;}
    .mt-result .result-wrap > div ul li span {width: 36px; font-size: 12px;}
    .mt-result .result-wrap > div ul li p {font-size: 13px;}
    .match-search .match-btn button {font-size: 13px;}

    .club-wrap > div .club-bot .club-prof p {font-size: 12px;}

    .de-table tbody tr td:first-child {font-size: 13px !important;}
    .de-table thead tr th {font-size: 13px; padding: 15px 12px; text-wrap: nowrap;}
    .de-table tbody tr td {font-size: 14px; padding: 15px 5px; word-break: break-all;}

    .prev-time::before {width: 31%;}
    .prev-time::after {width: 31%;}

    .re-comment-bar p {font-size: 12px;}
}