/* 기본 설정  */
* { margin : 0; padding : 0; }
body { font-family: "Gowun Dodum", system-ui; color : #37352f; }
#wrapper {
	width : 100%;
	margin : 0 auto;
}
/* 맨 위로 가기 버튼 스타일 */
.scroll-top-btn {
	position: fixed; /* 화면에 고정 */
	bottom: 20px; /* 화면 하단에서 20px */
	right: 20px; /* 화면 오른쪽에서 20px */
	background-color: #007bff; /* 버튼 배경색 */
	color: white; /* 버튼 텍스트 색상 */
	border: none;
	border-radius: 30px;
	padding: 10px 10px;
	cursor: pointer;
	font-size: 14px;
	opacity: 0; /* 초기에는 투명하게 설정 */
	visibility: hidden; /* 보이지 않게 설정 */
	transition: opacity 0.5s ease, visibility 0.5s ease; /* 부드러운 전환 효과 */
	z-index: 1000; /* 다른 요소 위에 표시 */
}
.scroll-top-btn.show {
	opacity: 1; /* 투명도 변경으로 나타남 */
	visibility: visible; /* 화면에 보이게 설정 */
}
.scroll-top-btn:hover {
	background-color: #0056b3; /* 버튼 마우스 오버 시 색상 변경 */
}
/* 헤더 */
header {
	width : 100%;
	height : 44px;
	margin : 0 auto;
	padding : 0 10px;
	position : fixed;
	background-color : #fff;
	box-shadow : 0 1px 8px 1px rgba(0, 0, 221, .2);
	z-index : 100;
}
header p {
	font-size : 0.9em;
	position : absolute;
	top : 12px;
	left : 50px;
}
header > img {
	position : absolute;
	top : 8px;
	left : 20px;
}
header a {
	position : absolute;
	top : 12px;
	right : 80px;
}
header a:last-child {
	position : absolute;
	top : 12px;
	right : 50px;
}
/* 비주얼 */
#visual {
	width : 100%;
	height : 275px;
	background-image : url(../images/upheadMoon.jpg);
}
/* 콘텐츠 이전 */
#beforeContent {
	position : relative;
	width : 90%;
	height : 200px;
	margin : 0 auto;
}
#beforeContent img {
	width : 200px;
	height : 200px;
	position : absolute;
	top : -150px;
	left : -50px;
}
#beforeContent h1 {
	position : absolute;
	top : 50px;
}
#bar {
	width : 40%;
	height : 10px;
	background-color : #1876fb;
	opacity : 0.5;
	position : absolute;
	bottom : 60px;
	left : 30%;
}
/* 콘텐츠 */
#contentWrap {
	width : 90%;
	margin : 0 auto;
}
/* 콘텐츠 영역 잡기 */
.leftContent {
	width : 20%;
	float : left;
	position : relative;
	text-align : center;
	overflow : hidden;
}
.rightContent {
	width : 20%;
	float : right;
	text-align : center;
	overflow : hidden;
}
.centerContent {
	width : 45%;
	float : left;
	margin-left : 130px;
}
/* 찍찍 */
.twoLines {
	width : 80%;
	height : 20px;
	margin-bottom : 24px;
	border-bottom : 5px double #1C59AF;
}
/* h3 (articleTitle) 관련 */
.articleTitle {
	text-align : left;
	padding: 5px 0;
	background-color : #F4F9FF;
	margin-bottom : 5px;
}
.blueLetter {
	color : #1C59AF;
}
.basic > p:before {
	content : "";
	display : inline-block;
	width : 20px;
	height : 20px;
	background-image : url(images/speaker.png);
	background-repeat : no-repeat;
	background-size : 20px 20px;
	margin-top : 10px;
	position : relative;
	left : -8px;
	top : 3px;
}
.profile > h3:before {
	content : "";
	display : inline-block;
	width : 20px;
	height : 20px;
	background-image : url(images/book.png);
	background-repeat : no-repeat;
	background-size : 20px 20px;
	margin-right : 8px;
	position : relative;
	left : 2px;
	top : 2px;
}
.backup > h3:before {
	content : "";
	display : inline-block;
	width : 20px;
	height : 20px;
	background-image : url(images/photo-album.png);
	background-repeat : no-repeat;
	background-size : 20px 20px;
	margin-right : 8px;
	position : relative;
	left : 2px;
	top : 2px;
}
/* 좌측 콘텐츠 */
.leftContent img {
	width : 320px;
}
.leftContent h2 {
	margin : 16px 0;
	font-weight : normal;
	font-style : italic;
}
.leftContent p {
	padding-bottom : 8px;
	border-bottom : 1px solid #ccc;
	color : #9f6b53;
}
table, th, td {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
table { margin : 20px 0; }
th { padding : 5px 10px; font-size : 0.9em; white-space : nowrap;}
td { font-size : 0.9em; }
/* 우측 콘텐츠 */
.rightContent img {
	width : 20px;
	float : left;
	margin-left : 5px;
	margin-top : 10px;
	margin-right : 5px;
}
.lyrics {
	border : 1px solid #ccc;
	border-radius : 5px;
	text-align : left;
	padding : 15px 40px;
	margin-top : 5px;
	position : relative;
}
.lyrics img {
	position : absolute;
	top : 15px;
	left: 5px;
}
.nihongo {
	font-family : "Hachi Maru Pop", system-ui;
	margin-top : 5px;
}
.korean {
	font-weight : bold;
}
/* 중앙 콘텐츠 */
/* 첫 아티클 - basic */
.basic > p {
	border : 1px solid #ccc;
	border-radius : 5px;
	padding : 10px 30px 20px;
	font-weight : bold;
	font-style : italic;
	margin-bottom : 30px;
}
.basic > p > span {
	color : #1876fb;
}
.intro {
	border-left : 3px solid #333;
	padding-top : 3px;
	padding-left : 16px;
	padding-bottom : 3px;
}
/* 접이식 세부 요소들 관련 */
.summary {
	padding : 5px 0;
}
.appearance:before {
	content : "";
	display : inline-block;
	width : 16px;
	height : 16px;
	background-image : url(images/question-mark.png);
	background-repeat : no-repeat;
	background-size : 16px 16px;
	margin-right : 8px;
	position : relative;
	left : 2px;
	top : 2px;
}
.setup:before {
	content : "";
	display : inline-block;
	width : 16px;
	height : 16px;
	background-image : url(images/setup.png);
	background-repeat : no-repeat;
	background-size : 16px 16px;
	margin-right : 8px;
	position : relative;
	left : 2px;
	top : 2px;
}
.detail:before {
	content : "";
	display : inline-block;
	width : 16px;
	height : 16px;
	background-image : url(images/add.png);
	background-repeat : no-repeat;
	background-size : 16px 16px;
	margin-right : 8px;
	position : relative;
	left : 2px;
	top : 2px;
}
.relationship:before {
	content : "";
	display : inline-block;
	width : 16px;
	height : 16px;
	background-image : url(images/group.png);
	background-repeat : no-repeat;
	background-size : 16px 16px;
	margin-right : 8px;
	position : relative;
	left : 2px;
	top : 2px;
}
.speech:before {
	content : "";
	display : inline-block;
	width : 16px;
	height : 16px;
	background-image : url(images/audio.png);
	background-repeat : no-repeat;
	background-size : 16px 16px;
	margin-right : 8px;
	position : relative;
	left : 2px;
	top : 2px;
}
.gallery:before {
	content : "";
	display : inline-block;
	width : 16px;
	height : 16px;
	background-image : url(images/picture.png);
	background-repeat : no-repeat;
	background-size : 16px 16px;
	margin-right : 8px;
	position : relative;
	left : 2px;
	top : 2px;
}
.text:before {
	content : "";
	display : inline-block;
	width : 16px;
	height : 16px;
	background-image : url(images/note.png);
	background-repeat : no-repeat;
	background-size : 16px 16px;
	margin-right : 8px;
	position : relative;
	left : 2px;
	top : 2px;
}
.summary {
	width : 120px;
}
.summary:hover {
	background-color : rgba(9, 9, 9, 0.1);
	cursor : pointer;
}
.summary:before {
	content : "";
	display : inline-block;
	width : 10px;
	height : 10px;
	background-image : url(images/right-arrow.png);
	background-repeat : no-repeat;
	background-size : 10px 10px;
	margin-right : 12px;
	position : relative;
	left : 2px;
	top : -1px;
	transition : transform 0.3s ease;
	transform-origin: center;
}
.summary.active:before {
	transform: rotate(90deg);
}
/* 기본적으로 .hiddenContent를 숨김 */
.hiddenContent {
	display: none; /* 처음에는 내용 숨김 */
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.05);
	border-top: 1px solid #ccc;
	margin: 5px 0;
}
/* active 클래스가 있는 .summary의 다음 요소(.hiddenContent)를 표시 */
.summary.active + .hiddenContent {
	display: block; /* 내용 보이기 */
}
/* 아티클 2 - profile */
.description {
	padding : 0 24px;
	font-weight : bold;
	line-height : 1.8em;
}
.hiddenUl {
	padding : 0 24px;
	line-height : 1.8em;
	font-weight : normal;
	color: #37352f;
}
.hiddenUl > li:last-child {
	margin-bottom : 16px;
}
.important:not(.hiddenUl) {
	background-color : #CADFFD;
	padding-left : 20px;
	list-style-position: inside; /* 불릿을 박스 안으로 넣기 */
	margin: 0; /* 바깥 여백 제거 */
	color : #1876fb;
	font-weight : bold;
}
.signatureColor {
	color : #fff1cf;
	font-size : 26px;
	font-weight : bold;
	padding-left : 220px;
	text-shadow: -1px 0 #113870, 0 1px #113870, 1px 0 #113870, 0 -1px #113870;
}
/* 아티클 3 - backup */
/* 갤러리 전체 컨테이너 */
.gallery-container {
	width: 100%; /* 화면 너비에 맞춤 */
	overflow-x: auto; /* 가로 스크롤 활성화 */
	white-space: nowrap; /* 이미지가 줄바꿈되지 않도록 설정 */
	padding: 10px; /* 여백 추가 */
	background-color: rgba(0, 0, 0, 0.05);
	box-sizing: border-box; /* padding 포함 */
}
/* 이미지 갤러리 영역 */
.gallery-wrap {
	display: inline-flex; /* 가로로 나열 */
	gap: 10px; /* 이미지 사이 여백 */
}
/* 이미지 스타일 */
.gallery-wrap img {
	width: 300px; /* 이미지 너비 (조정 가능) */
	height: 200px; /* 이미지 높이 (조정 가능) */
	object-fit: cover; /* 비율 유지하며 이미지 채우기 */
	border: 2px solid #ddd; /* 테두리 추가 (선택 사항) */
	border-radius: 5px; /* 모서리 둥글게 */
}