@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');

@font-face {
    font-family: 'HakgyoansimWoojuR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimWoojuR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JSongMyung-Regular-KO';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/JSongMyung-Regular-KO.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Freesentation-7Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'TTHakgyoansimMoheomgaB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimMoheomgaB.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Paperlogy-6SemiBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

body {
	background: linear-gradient(to bottom, #282833, #16161c);
}

scroll-box {
	overflow: scroll;
	position: relative;

	scrollbar-width: none;
	-ms-overflow-style: none;
}

*::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}

.board-skin-basic {
	padding: 10% 0;
}

/**********************************************

로딩 화면

***********************************************/

.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #111;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 0.5s ease;
}

.loading-bar-container {
	width: 60%;
	height: 10px;
	background: #444;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 20px;
}

.loading-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #00c6ff, #0072ff);
	transition: width 0.1s linear;
}

.loading-text {
	margin-top: 20px;
	font-size: 12pt;
	font-family: 'TTHakgyoansimMoheomgaB';
	transition: opacity 0.5s ease;
}

/**********************************************

세계관

***********************************************/

.title {
	color:white;
	text-align:center;
}

.title-text {
	margin: 20px 0 0px 0;
	font-size: 20pt;
	font-family: "Cinzel", serif;
}

.title-text-s {
	margin: 0 0 20px 0;
	font-size: 8pt;
	background: linear-gradient(to right, #ffffff, #2b2b2b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.world-img {
	width: 100%;
	height: 200px;
	margin-bottom: 20px;
	border-radius: 20px;
	background-image: url('https://blog.kakaocdn.net/dn/1rxB1/btsNni5KonK/0pcbJUzZrDVBUNBsliCWx1/img.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

/**********************************************

세계관 설명란

***********************************************/

.world-content {
	height: 70px;
	padding: 15px 20px;
	border-radius: 0 0 10px 10px;
	background-color: #f7f7f7;
	color:  #40414c;
    	font-size: 8.5pt;
	line-height: 1.5;
	font-family: 'Pretendard-Regular';
}

.content {
	display: none;
	height: 70px;
	overflow: scroll;
	overflow-x: hidden;
}

.content.active {
    display: block;
}

/**********************************************

세계관 설명란 버튼

***********************************************/

.button-group {
	display: flex;
	gap: 0px;
}

button {
	width:100%;
	padding: 8px 15px;
	border: 0;
	color: white;
	font-size: 8pt;
	font-family: 'Paperlogy-6SemiBold';
	cursor: pointer;
}

.button-group-1 {
	background-color: #4C4E63;
	border-radius: 10px 0 0 0;
}

.button-group-2 {
	background-color: #71738f;
}

.button-group-3 {
	background-color: #8c8fad;
}

.button-group-4 {
	background-color: #a3a6c4;
}

.button-group-5 {
	background-color: #b4b7d4;
	border-radius: 0 10px 0 0;
}


/**********************************************

아코디언

***********************************************/

.accordion {
	display: none;
	max-width: 100%;
}

.accordion-item {
	margin-bottom: 7px;
}

.accordion-header {
	padding: 2px 5px;
	cursor: pointer;
	color: #ebedf5;
	font-size: 9pt;
	font-family: 'Freesentation-7Bold';
}

.accordion-header:hover,
.accordion-header:active {
	color: white;
}

.accordion-outer {
	height: 0;
	overflow: hidden;
	transition: height 0.3s ease;
	position: relative;
}

.accordion-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 5px;
    padding: 10px 15px;
     background: #2f2f3b;
    border-left: 5px solid #696993;
    color: #abadbc;
    font-size: 8pt;
    line-height: 1.5;
    font-family: 'Pretendard-Regular';
}


/**********************************************

캐릭터 소개

***********************************************/

.character-layout {
	display: flex;
	gap: 3%;
	align-items: center;
}

.character-layout-mobile {
	display: none;
}

.jouisin,
.leesomin {
	display: flex;
	width:100%;
	height: 200px;
	gap: 25px;
	padding: 10px;
}



.character-image {
	width: 200px;
	height: 200px;
	border-radius: 10px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	box-shadow: 0 0 2px black;
}

.jouisin .character-image {
	background-image: url('https://blog.kakaocdn.net/dn/y3DaW/btsNr0ROCLM/Qk3QEv8KKCB205LhYAnLek/img.png');
}

.leesomin .character-image {
	background-image: url('https://blog.kakaocdn.net/dn/bi7ytL/btsNr2oy5QV/Drkuji0V3ZTMlOaLoktaH1/img.png');
}

.character-desc {
	width:100%;
	padding: 10px 0;
	color: white;
}

.character-name {
	font-size: 14pt;
	font-family: 'Paperlogy-6SemiBold';
}

.character-cn {
	font-size: 10pt;
	font-family: "Noto Sans SC", sans-serif;
}

.jouisin .character-cn {
	color: #c6c6da;
}

.leesomin .character-cn {
	color: #ecbdca;
}

.catchphrase {
	width: 100%;
	margin: 12px -5px;
	border-radius: 5px;
	padding: 4px 12px;
	font-size: 8pt;
	font-family: 'Paperlogy-6SemiBold';
}

.jouisin .catchphrase {
	background-color: #e7e7f7;
	color: #74748e;
}

.leesomin .catchphrase {
	background-color: #f8e9ed;
	color: #bf6d83;
}

.character-status {
	width: 110%;
	margin-left: -3px;
	display: flex;
	margin-bottom: 7px;
	font-size: 7pt;
}

.character-status-left {
	width: 80%;
}

.character-status-right {
	width: 100%;
}


.status-label {
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 2px 3px 2px 10px;
	border-radius: 10px;
	border: 1px solid #a7a7c4;
	color: #f0f0f5;
	font-family: 'Paperlogy-6SemiBold';
	letter-spacing: 7px;
}

.status-value {
	font-family: 'Pretendard-Regular';
	color: #cacade;
}

.character-sum {
	width: 95%;
	margin: 5px 0;
	padding: 2px 10px;
	color: #c4c4c4;
	font-size: 7pt;
	font-family: 'Pretendard-Regular';
	line-height: 1.7;
}

.jouisin .character-sum {
	border-left: 2px solid #9696cb;
}

.leesomin .character-sum {
	border-left: 2px solid #e3afbc;
}

.jouisin-sum-mobile,
.leesomin-sum-mobile {
	display: none;
}

/**********************************************

서사 요약

***********************************************/

.character-story-layout {
	widht: 100%;
}

.character-story-title {
	display: inline-block;
	margin: 5px 15px 5px 15px;
	color: white;
	font-size: 10pt;
	font-family: 'Paperlogy-6SemiBold';
}

.character-story-title::before {
	content : '✦';
	margin-right: 10px;
}

.character-story-sum-back {
	width: 92%;
	margin: 5px 10px 0 10px;
	padding: 12px 17px;
	border-radius: 10px;
	background-color: #f7f7f7;
	color: #2f2f3b;
	line-height: 1.5;
	font-size: 7.5pt;
	font-family: 'Pretendard-Regular';
}

.character-story-sum {
	height: 90%;
	overflow: scroll;
	overflow-x: hidden;
}


/**********************************************

페어 요약

***********************************************/

.pair-left {
	width: 100%;
	color: white;
}

.pair-right {
	width: 100%;
	color: white;
}

.pair-label {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 15px;
	border-radius: 10px 10px 10px 0;
	background-color: #eee;
	color: black;
	font-size: 9pt;
	font-family: 'Paperlogy-6SemiBold';
}

.pair-speech {
	font-size: 9pt;
	font-family: 'Paperlogy-6SemiBold';
}

.pair-desc-back {
	width: 90%;
	margin:10px 0;
	padding: 12px 15px;
	background-color: #f7f7f7;
	border-radius: 10px;
}

.pair-desc {
	font-size: 7.5pt;
	color: #40414c;
	font-family: 'Pretendard-Regular';
	line-height: 1.5;
}

.relationship {
	margin: 15px 0;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.relationship-image img {
	width: 60px !important;
	border-radius: 50%;
	border: 5px solid #f0f0f0;
}

.relationship-desc {
	width: 100%;
}

.relation-sum {
	width: 95%;
	margin: 10px 0;
	padding: 2px 10px;
	color: #c4c4c4;
	border-left: 2px solid #9f9f9f;
	font-size: 8pt;
	font-family: 'Pretendard-Regular';
	line-height: 1.7;
}

/**********************************************

1100 px 기준

***********************************************/

@media (min-width: 1000px) and (max-width: 1100px) {

button {
	font-size: 7pt;
}

.world-content {
	height: 60px;
	font-size: 7.5pt;
}

.content {
	height: 60px;
}

.status-label {
    margin: 0 2px 5px 0;
    padding: 2px 3px 2px 8px;
    letter-spacing: 5px;
}

.character-sum {
	line-height: 1.5;
}

.catchphrase,
.character-story-sum-back
.pair-desc,
.relation-sum {
	font-size: 7.2pt;
}

	
}


/**********************************************

모바일 버전

***********************************************/

@media (max-width: 1000px) {

	section, #body {
		margin: 0 !important;
	}

	.loading-text {
		font-size: 10pt;
	}

	.world-img {
		height: 120px;
	}

	.character-layout {
		display: none;
	}
	
	.character-layout-mobile {
		display: block;
	}
	
	.accordion {
		display: block;
	}
	
	.button-group,
	.world-content {
		display: none;
	}

	.title-text-s {
		margin-top: 8px;
	} 

	.jouisin,
	.leesomin {
		height: auto;
		gap: 20px;
		padding: 0;
	}

	.character-image { 
		width: 150px;
		height: 160px;
	}

	.character-name {
		font-size: 12pt;
	}

	.character-cn {
		font-size: 8pt;
	}

	.character-status {
		display: block;
		margin-left: -3px;
		font-size: 7pt;
	}

	.character-sum {
		    margin: 5px 0 10px 0;
	}

	.jouisin-sum-mobile,
	.leesomin-sum-mobile {
		display: block;
	}

	.jouisin-sum-mobile .character-sum {
		border-left: 2px solid #9696cb;
	}

	.leesomin-sum-mobile .character-sum {
		border-left: 2px solid #e3afbc;
	}

	.character-story-title {
		display: none;
		margin: 0;
		font-size: 8pt;
	}

	.character-story-sum-back {
		width: 90%;
		 margin: 5px 0 50px 0;
	}

	.status-label {
		margin: 3px 5px 0 0;
		padding: 0 3px 0 10px;
		font-size: 6pt;
	}

	.catchphrase {
		width: 94%;
		margin: 6px -5px;
		padding: 1px 8px;
		letter-spacing: -0.2px;
		font-size: 6.5pt;
	}

	.relationship-layout .character-layout {
		display: block;
	}

	.pair-right {
		margin-top: 40px;
	}

	.pair-label {
		    padding: 1px 15px 0 15px;
	}

	.pair-label,
	.pair-speech {
		font-size: 8pt;
	}

	.pair-desc-back {
		width: 90%;
		padding: 12px 17px;
		font-size: 10px;
	}

	.relationship-image img {
		width: 60px !important;
	}

	.relation-sum {
		font-size: 7pt;
		line-height: 1.5;
	}

	.relationship {
		    align-items: center;
	}

	
}