* {
	box-sizing: border-box;
}

a {
  text-decoration: none; /* 밑줄 제거 */
  color: inherit;        /* 부모 요소의 색상 상속 */
  /* 또는 특정 색상 지정 */
  /* color: #333; */
}

button {
	border: none;
	background-color: transparent;
}

.header {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	padding: 20px;
	z-index: 999;
	display: flex;
	gap: 40px;
	align-items: center;
}
.logo {
	width: 290px;
	height: 69px;
	background-image: url("/static/image/logo.png");
	background-size: contain;
	background-repeat: no-repeat;
}

.container {
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
}

.navigator {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mainLink {
	width: 100%;
}

.bracket {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bracketright {
	transform: scale(-1);
}

.teethBracket {
	width: 61px;
	height: 46px;
	background-image: url("/static/image/teeth.png");
	background-size: contain;
	background-repeat: no-repeat;
}

.bracketText {
	flex: auto;
	text-align: center;
	min-width: 200px;
	max-width: 400px;
}

.divider {
	flex: 0 0 auto;
	width: 99px;
	height: 76px;
	background-image: url("/static/image/divider.png");
	background-size: contain;
	background-repeat: no-repeat;
}

h3 {
	font-size: 3rem;
}
.piracy {
	background-image: url("/static/image/piracy.svg");
	background-size: contain;
	background-repeat: no-repeat;
	height: 60px;
	background-position: center;
}

.editWar {
	background-image: url("/static/image/editWar.svg");
	background-size: contain;
	background-repeat: no-repeat;
	height: 60px;
	background-position: center;
}

.mainLink#priacy:hover .piracy {
	background-image: url("/static/image/piracy-hover.svg");
}

/* .mainLink#editwar:hover .piracy {
	background-image: url("/static/image/editWar-hover.svg");
} */

.hidden {
	display: none;
}

.job {
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
}

.bone {
	width: 139.95px;
	height: 75.998px;
	background-image: url("/static/image/bone.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.rightBone {
	animation: spinBone 4s linear infinite;
	transform-origin: center;
	background-color: transparent;
	outline: none;
	cursor: pointer;
}

@keyframes spinBone {
	from {
		transform: scale(-1) rotate(0deg);
	}
	to {
		transform: scale(-1) rotate(360deg);
	}
}

.rightBone:hover {
	animation-play-state: paused; /* ✅ 현재 프레임에서 멈춤 */
}

.jobInput {
	width: 60%;
	background-image: url("/static/image/inputMsg.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	pointer-events: auto;
}

.jobInput {
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.jobInput.hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(6px);
}

.realInput {
	opacity: 1;
	transform: translateY(0);
	width: 60%;
	font-size: 58px;
}

label {
	display: none;
}

#id_source_url {
	border: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	font-size: 40px;
	text-align: center;
	padding: 15px;
	width: 100%;
	border-bottom: 8px solid rgb(255, 0, 0);
	color: rgb(255, 0, 0);
	-webkit-appearance: none;
	appearance: none;
	color: rgb(255, 0, 0);
	-webkit-text-fill-color: rgb(255, 0, 0); /* Safari에서 텍스트색 강제 */
}

.loadingContainer {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: end;
}

.loadingFlag {
	max-width: 1512px;
	height: 982px;
	background-image: url("/static/image/loadingFlag.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: center;
	min-width: 720px;
	background-position-y: bottom;
}

.imgContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center; /* 세로 정렬 */
	width: 100%;
	height: 100%;
}

.imageWrapper {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ⭐ 핵심 */
#finalImg {
	max-width: 100%;
	max-height: 780px;
	width: auto;
	height: auto;
	object-fit: contain;
	border: 1px solid black;
}

.download {
	background-image: url("/static/image/download.svg");
	background-size: contain;
	background-repeat: no-repeat;
	height: 60px;
	background-position: center;
	min-width: 300px;
	max-width: 500px;
}

.download:hover {
	background-image: url("/static/image/downloadHover.svg");
}

.wikiViewer {
	width: 100%;
	position: relative;
	top: 120px;
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	padding: 20px;
	color: rgb(255, 0, 0);
}

.sidenav {
	position: sticky;
	top: 20px;
	align-self: start;
}

.acc summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}

.acc__head{
	font-weight: 900;
}

.acc summary::-webkit-details-marker {
	display: none;
} /* 크롬 기본 마커 제거 */

.acc summary::before {
	content: "▸";
	display: inline-block;
	transition: transform 0.15s ease;
}
.acc[open] summary::before {
	transform: rotate(90deg); /* 펼치면 아래로 */
}

.acc__body {
	margin: 8px 0 0 18px;
	padding: 0;
}
.acc__body li {
	margin: 4px 0;
}

.wikiDetail {
	display: flex;
	flex-direction: column;
	gap: 20px;
	line-height: 1.2;
}

.pageTitle {
	border-bottom: 1px solid red;
	font-weight: 900;
}

.wikiContents {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
}

.wikiContents > * {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.wikiContents > * > * {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contentAcc summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 900;
}

.contentAcc summary::-webkit-details-marker {
	display: none;
}

.contentAcc summary::before {
	content: "▸";
	transition: transform 0.15s ease;
	display: inline-block;
}
.contentAcc[open] summary::before {
	transform: rotate(90deg);
}

.contentAcc__body {
	margin: 8px 0 0 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bodyImage {
	display: flex;
	flex-direction: column;
	gap: 0px;
}

.contentAcc__body > .bodyImage > * {
	width: 90%;
	border: 1px solid red;
	padding: 5px;
}
.contentAcc__body > .bodyImage > .imageCaption {
	width: 90%;
	border-top: none;
	padding: 5px;
}

.wikiImage > * > * {
	display: block;
	border: 1px solid red;
	padding: 5px;
	width: 100%;
}

.active{
	font-weight: 900;
}

.searchBar{
	right: 20px;
	display: flex;
	/* width: 600px; */
	height: 40px;
	border: 1px solid red;
	color: red;
}
.bar{
	padding: 5px;
	border-right: 1px solid red;
	width: 400px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;

}
.searchBtn{
	padding: 5px;
	width: 100px;
	display: flex;
	justify-content: center;
	background-color: rgba(217, 217, 217, 1);
	align-items: center;

}

.wiki_link {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}

.wiki_link .bullet {
  flex: 0 0 auto;
}

.wiki_link .blockTitle {
  flex: 1;
}

.mainLink#viewer:hover .editWar {
	background-image: url("/static/image/viewer-hover.svg");
}

.magnifier{
	background-image: url("/static/image/magnifier.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 24px;
	height: 26px;
	background-position: center;
}