@charset "utf-8";
/* -----------------------------------------------
	* 멤버란 디자인 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/


/****************************************************
	신청자 목록 레이아웃
****************************************************/

.ready-member-list {display:block; position:relative; overflow:hidden;}
.ready-member-list li {float:left; width:50%; margin-bottom:8px;}
.ready-member-list li.empty {width:100%; line-height:300px; text-align:center;}
.ready-member-list li .item {position:relative; padding:10px; margin:0 5px; }
.ready-member-list li .ui-thumb {display:block; position:absolute; top:10px; left:10px; width:80px; height:80px; overflow:hidden; box-sizing:border-box;}
.ready-member-list li .ui-thumb span {display:block; position:absolute; top:0; bottom:0; left:0; right:0; text-align:center; font-size:11px; line-height:96px; opacity:1;}
.ready-member-list li .ui-thumb span.ing {}
.ready-member-list li .ui-thumb span.com {display:none;}
.ready-member-list li .ui-thumb a:hover span {opacity:0;}

.ready-member-list li .ui-profile {display:block; position:relative; margin-left:95px; min-height:85px;}
.ready-member-list li .ui-profile i {display:block; position:absolute; top:0; left:0; width:18px;}
.ready-member-list li .ui-profile .name {padding:5px 0;}
.ready-member-list li .ui-profile em {display:block; font-style:normal; font-size:11px;}
.ready-member-list li .ui-profile strong {font-size:14px;}
.ready-member-list li .ui-profile span {display:block; padding:3px 0; font-size:11px;}
.ready-member-list li .ui-profile span.owner {text-align:right; margin-top:5px; padding-top:5px;}

/* 반응형 */
@media all and (max-width:1024px) {
	#submenu li.menu-first {display:block; text-align:center;}
}
@media all and (max-width:640px) {
	.ready-member-list li {width:100%;}
}


/****************************************************
	멤버 목록 레이아웃
****************************************************/

.memberWrap {display:table; width:100%;}
.memberWrap > .member-box {display:table-cell; text-align:center; vertical-align:top;}
.member-list {text-align:center; padding:20px;}
.member-list li {
	display: inline-block;
    vertical-align: top;
    margin: 5px;
    width: 18%;
    padding: 10px;
	aspect-ratio: 1 / 1; /* 정사각형 유지 */
	border-radius: 50%; /* 완전한 원형 */

	/* ✅ 부드러운 전환 효과 */
    transition: opacity 0.3s ease-in-out;
}

/* ✅ hover 시 50% 투명해지기 */
.member-list li:hover {
    opacity: 0.5;
}

.member-list .item {display:block; position:relative; padding:0;
	aspect-ratio: 1 / 1; /* 정사각형 유지 */
	border-radius: 50%; /* 완전한 원형 */}
.member-list .ui-profile {position:absolute; left:0; right:0; bottom:0; padding:5px; text-align:center;}

@media all and (max-width:800px) {
	.memberWrap,
	.memberWrap > .member-box {display:block;}
}


/****************************************************
	멤버 프로필 레이아웃
****************************************************/

#character_profile .visual-area {position:relative;}
#character_profile #character_body {position:relative; z-index:0;}
#character_profile #character_body img {display:block; margin:0 auto;}
#character_profile #character_head {position:absolute; left:0; bottom:0; right:0; z-index:1;}


/****************************************************
	인벤토리 스타일
****************************************************/

.inventory-list {display:block; position:relative; overflow:hidden;}
.inventory-list li {display:block; float:left; padding:5px;}
.inventory-list a {display:block; position:relative; width:40px; height:40px; overflow:hidden;}
.inventory-list a img {display:block; position:relative; margin:0 auto;}
.inventory-list a i {display:block; position:absolute; right:1px; bottom:1px; background:rgba(0,0,0,.5); min-width:15px; height:15px; line-height:15px; color:#fff; font-size:10px; font-weight:800; padding:0 1px; text-align:center; z-index:2; box-sizing:border-box; border:none !important;}
.inventory-list a i.present:before {content:"\e99f"; font-family:'icon'; font-weight:400;} 

.title-list {display:block; position:relative; padding:20px 0;}
.title-list p {padding:5px;}
.title-list .item {display:inline-block; min-width:25%; padding: 5px; box-sizing:border-box; text-align:left; vertical-align:middle;}


/******************************************
	관계란 스타일
*******************************************/

.relation-member-list				{ position: relative; }
.relation-member-list > li			{ position:relative; padding-left: 90px; min-height:120px; margin-bottom: 20px; }
.relation-member-list .ui-thumb		{ position: absolute; top: 0; left: 0; width: 80px; overflow: hidden; }
.relation-member-list .rm-name		{ font-size: 14px; font-weight: 800; padding-right: 150px; padding-left: 10px; }

.relation-member-list .rm-like-style				{ position: absolute; right: 0; top: 0;width: 80px; }
.relation-member-list .rm-like-style i				{ display: block; width: 13px; height: 15px; position: relative; float: left; margin: 0 1px;}
.relation-member-list .rm-like-style i:before		{ content: "\e9da"; font-family: 'icon'; font-style: normal; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: 'icon'; }
.relation-member-list .memo			{ font-family: 'Dotum'; padding:10px; margin: 5px 0; line-height: 1.2em; min-height: 30px; }

.relation-member-list ol			{ display: block; position: relative; clear: both; text-align: right;padding-right: 10px; }
.relation-member-list ol li					{ display: inline-block; }
.relation-member-list ol li a.btn-log		{ display: block; position: relative; width: 20px; height: 20px; margin: 0 auto; }
.relation-member-list ol li a.btn-log:before	{ content: "\e925"; font-family: 'icon'; font-size: 15px; font-style: normal; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: 'icon'; }

.relation-member-list .modify-box						{ display: none; }
.relation-member-list .state-modify						{ }
.relation-member-list .state-modify .rm-like-style,
.relation-member-list .state-modify .memo .ori-content,
.relation-member-list .state-modify ol					{ display: none; }
.relation-member-list .state-modify .modify-box			{ display: block; }


@media all and (max-width: 500px) {
	.relation-member-list .rm-name			{ padding-right: 0; font-size: 13px; }
	.relation-member-list .rm-like-style	{ position: relative; width: auto;overflow: hidden; }
	
	.relation-member-list > li		{ padding-left:0px; }
	.relation-member-list .ui-thumb	{ width: 50px; }
	.relation-member-list .info		{ min-height: 62px; margin-left: 60px; }
}



/* 이하 커스텀 */
/* 버튼 컨테이너 */
.button-container {
    display: flex;
    gap: 10px;
    margin-top: 30px;
	margin-bottom: 30px;
}

/* 동그란 버튼 스타일 */
.circle-div {
    width: 30px;  /* 크기 줄이기 */
    height: 30px;
    border-radius: 50%;
    background-color: rgba(201, 157, 255, 0.5); 
    cursor: pointer;
    font-size: 7px; /* 텍스트 크기 조정 */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.3s, transform 0.2s;
}

/* 버튼 hover 효과 */
.circle-div:hover {
    background-color: #ddd;
}

/* 선택된 버튼 효과 */
.circle-div.selected {
    background-color: rgb(201, 157, 255); 
    border-color: rgb(201, 157, 255); 
    color: rgb(21, 9, 66); /* 선택된 버튼의 글자색 변경 */
    transform: scale(1.1);
}

/* 숨겨진 내용 */
.hidden {
    display: none !important;
}


.han-box {
    width: 80%; /* 원하는 너비 */
    margin: 20px auto; /* 가로 중앙 정렬 */
    padding: 30px 15px !important; /* 위아래 패딩을 30px로 증가 */
    
    border: 1px solid rgba(201, 157, 255, 0.7); /* 70% 투명도 테두리 */
    border-radius: 8px; /* 모서리를 둥글게 */
    
    background-color: rgba(0, 0, 0, 0.7); /* 반투명한 어두운 배경 */
    
    text-align: center; /* 텍스트 중앙 정렬 */
    font-size: 20px; /* 글씨 크기 유지 */
    color: white; /* 글자 색 */

    box-shadow: none; /* 글로우 효과 제거 */
}

.my-area{
	display: flex;
    flex-direction: column;
    align-items: center; /* 가로 중앙 정렬 */
    justify-content: center; /* 세로 중앙 정렬 (필요 시 추가) */
    text-align: center; /* 이미지 내부 요소 중앙 정렬 */
}

.my-area img {
    width: 75%; /* 가로 크기 75% */
    height: auto; /* 비율 유지 */
    display: block; /* 기본 inline-block 여백 제거 */
    margin: 0 auto; /* 중앙 정렬 */
}

/* 프로필쪽 */

.catchp {
	display: flex;
	justify-content: center;
	font-weight: 600;
}


.profile-lan {
    display: flex;
    align-items: flex-start; /* 세로 중앙 정렬 */
	justify-content: center;
    gap: 10px; /* 요소 간 간격 조정 */
}

.profile-lan .theme-box {
	flex-wrap: wrap;
    padding: 10px 15px; /* 내부 여백 */
    min-width: 100px; /* 최소 너비 설정 (너무 작아지는 것 방지) */
    text-align: center; /* 텍스트 중앙 정렬 */
	margin-top: 10px;
	margin-bottom: 10px;
}

.pf-full {
	width: 95%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	text-align: left !important;
}

.pf-ft {
	width: 10%;
	border: 1px solid rgba(201, 157, 255, 0.7);
	border-radius: 10px;
	margin-bottom: 5px !important;
}

.pf-title {
	width: 10%;
	font-weight: bold;
	border: 1px solid rgba(201, 157, 255, 0.7);
	border-radius: 10px;
	margin-right: 4px;
}

.pf-context {
	width: 30%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	margin-right: 7px;
}

.pf-min {
	width: 15%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	margin-right: 7px;
}

.ui-thumb img {
	aspect-ratio: 1 / 1; /* 정사각형 유지 */
    border-radius: 50%; /* 완전한 원형 */
    
    /* ✅ 스타일 추가 (선택 사항) */
    border: 1px solid rgba(201, 157, 255, 0.7); /* 70% 투명도 보더 */
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 배경 */
}