/* 게시글 상세 페이지 기본 레이아웃 */
.board-detail {
	width: 100%;
	max-width: 1200px; /* 컨테이너 최대 너비 */
	margin: 0 auto; /* 중앙 정렬 */
	padding: 1rem var(--padding-x);
	background: var(--color-white);
	box-sizing: border-box;
}

@media (max-width: 1200px) {
	.board-detail {
		max-width: 100%;
	}
}

/* 모바일 환경 */
@media (max-width: 459px) {
	.board-detail {
		padding: 0.75rem;
	}
}

/* 게시글 본문 영역 */
.board-detail-wrap {
	padding-top: 1.125rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* 게시판 헤더 */
.board-head {
	padding: 1rem 0;
	border-bottom: 1px solid var(--color-gray-300);
}

.board-title a {
	font-size: 20px;
}

.board-head .category-title {
	color: var(--color-gray-800);
	display: flex;
	align-items: center;
	padding-left: 24px;
	background: url(/skin/ko/assets/img/board/arrow-next.svg) no-repeat 0 center;
}

/* 게시글 제목 */
.post-title {
	padding-bottom: 1.25rem;
	font-size: 1.75rem;
	line-height: 2.13rem;
	min-height: 54px;
	margin: 0;
}

/* 게시글 메타 정보 영역 */
.info-wrap {
	display: flex;
	gap: 0.38rem;
	color: var(--color-gray-600);
	padding-bottom: 1.5rem;
	align-items: center;
}

.info-wrap.column {
	align-items: flex-start;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

/* 작성자 정보 영역 */
address.writer {
	display: flex;
	gap: 0.38rem;
	align-items: center;
	width: 100%;
	margin: 0;
	font-style: normal;
}

/* 작성자 프로필 이미지 */
.writer figure.image {
	width: 32px;
	height: 32px;
	background-size: cover;
	border-radius: 100%;
	background-position: center;
	margin: 0;
}

/* 작성자 닉네임 */
.writer strong.nickname {
	color: var(--color-gray-800);
	font-weight: 600;
}

/* 게시글 통계 정보 */
aside.meta {
	display: flex;
	flex-direction: row;
	gap: 0.38rem;
	align-items: center;
	width: 100%;
}

/* 통계 항목 스타일 */
.meta > * {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* 통계 숫자 스타일 */
.meta .view-count,
.meta .upvoted-count,
.meta .comment-count {
	color: var(--color-theme-600);
}

/* before 텍스트 스타일 */
.meta [before-text]::before {
	content: attr(before-text);
	color: var(--color-gray-600);
	padding-right: 5px;
}

/* 구분선 스타일 */
.right-divider {
	display: inline-flex;
	padding-right: 10px;
	margin-right: 10px;
	background: linear-gradient(
		to bottom,
		transparent 25%,
		var(--color-gray-300) 25%,
		var(--color-gray-300) 75%,
		transparent 75%
	);
	background-repeat: no-repeat;
	background-size: 1px 80%;
	background-position: right center;
}

/* 본문 뷰어 영역 */
.viewer {
	padding-bottom: 2rem;
}

.viewer img {
	max-width: 100%;
}

/* 버튼 영역 */
footer.button-container {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* 버튼 그룹 레이아웃 */
.button-container .button-wrap {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 12px;
}

/* 버튼 그룹 정렬 - between */
.button-container .button-wrap.between {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

/* 버튼 그룹 내부 정렬 */
.button-container .button-wrap .button-group {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* 버튼 공통 스타일 */
.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px; /* 아이콘만 있는 버튼 너비 */
	height: 32px;
	border: 0;
	cursor: pointer;
	background: no-repeat center/20px;
	padding: 0;
	white-space: nowrap;
	box-sizing: border-box;
	--btn-border-color: var(--color-gray-500);
	box-shadow: 0 0 0 1px inset var(--btn-border-color);
}

/* 공감 버튼 */
.btn.upvote {
	padding: 0 12px 0 36px;
	height: 48px;
	flex: 1;
	max-width: 100px;
	color: var(--color-white);
	background-color: var(--color-theme-600);
	background-image: url(/skin/ko/assets/img/icon/heart.svg);
	background-position: 24px center;
	box-shadow: none;
	--btn-border-color: transparent;
}

/* 공감 버튼 상태별 스타일 */
.btn.upvote[data-status="1"] {
	background-image: url(/skin/ko/assets/img/icon/heart-full.svg);
}

/* 공감 버튼 텍스트 */
.btn.upvote[data-count="0"]::after {
	content: "공감";
}

.btn.upvote:not([data-count="0"])::after {
	content: attr(data-count);
}

/* 공감 버튼 로딩중 잠시 텍스트 가리기 */
.btn.upvote[data-loading="true"]::after {
	content: "" !important;
}

/* 목록으로 돌아가기 버튼 */
.btn.list-btn {
	background-image: url(/skin/ko/assets/img/icon/board-list.svg);
}

/* 관리자 버튼 스타일 */
.btn[class*="admin-"] {
	--btn-border-color: var(--color-pink-red);
}

.btn.admin-delete {
	background-image: url(/skin/ko/assets/img/icon/delete.svg);
}

.btn.admin-pin {
	background-image: url(/skin/ko/assets/img/icon/pin.svg);
}

.btn.admin-pin[data-status="1"] {
	background-image: url(/skin/ko/assets/img/icon/pin-slash.svg);
}

/* 일반 버튼 스타일 */
.btn.edit,
.btn.delete,
.btn.report {
	width: 64px;
	padding: 0 12px 0 36px; /* 아이콘 + 텍스트 여백 */
	background-position: 10px center;
}

/* 수정 버튼 */
.btn.edit {
	background-image: url(/skin/ko/assets/img/icon/pen-to-square.svg);
}

/* 삭제 버튼 */
.btn.delete {
	background-image: url(/skin/ko/assets/img/icon/delete.svg);
	--btn-border-color: var(--color-pink-red);
	color: var(--color-pink-red);
}

/* 신고 버튼 */
.btn.report {
	background-image: url(/skin/ko/assets/img/icon/siren.svg);
}

/* URL 복사 버튼 */
.btn.copy-current-url {
	width: 64px;
	padding: 6px 16px;
	color: var(--color-gray-700);
	margin-left: auto;
}

/* 반응형 스타일 */
@media (max-width: 459px) {
	.post-title {
		font-size: 1.2rem;
	}

	.board-detail {
		padding: 0.75rem;
	}

	.button-container .button-wrap.between {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.button-container .button-wrap .button-group {
		flex-wrap: wrap;
	}
}

@media (max-width: 380px) {
	.button-wrap button {
		min-width: fit-content;
		margin-left: 0;
	}

	.board-detail {
		width: 100%;
		padding: 1rem;
	}
}

/* 모바일 환경에서의 메타 정보 */
@media (max-width: 459px) {
	aside.meta {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.board-detail {
		width: 100%;
		padding: 1rem;
	}
}