/* 모든 입력 필드와 라벨의 글꼴 및 스타일 통일 */
#fwrite input[type='text'],
#fwrite input[type='password'],
#fwrite input[type='email'],
#fwrite textarea,
#fwrite select,
#fwrite .form-label {
	font-family: var(
		--bs-body-font-family
	) !important; /* 부트스트랩 기본 폰트 사용 */
	font-size: 0.95rem;
}

#fwrite .form-label {
	font-weight: 600 !important; /* 모든 라벨을 동일한 굵기로 설정 */
	color: #343a40 !important; /* 라벨 색상을 진한 검은색으로 통일 */
	margin-bottom: 8px;
	display: block;
}
/* 버튼 하단 잘림 방지 및 스타일 보정 */
#fwrite .btn_confirm .btn,
#fwrite .btn-grad,
#fwrite .btn-outline-secondary {
	overflow: visible !important; /* 내부 내용이 잘리지 않게 설정 */
	line-height: 1.5 !important; /* 표준 높이로 변경 */
	height: auto !important; /* 고정 높이 해제 */
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	vertical-align: middle;
	display: inline-flex; /* 텍스트 정중앙 정렬을 위해 플렉스 사용 */
	align-items: center;
	justify-content: center;
}

/* 버튼 하단 여백 확보 */
.btn_confirm {
	padding-bottom: 50px !important; /* 페이지 맨 아래에서 버튼이 붙지 않게 여백 추가 */
	margin-bottom: 30px;
}
/* 1. 공간 선점만 남기고 숨김 로직은 삭제합니다 */
.portfolio-card-header {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3; /* 이미지 로딩 전에도 이 비율의 공간을 차지 */
	background-color: #f8f9fa;
	overflow: hidden;
	position: relative;
}

.portfolio-card-header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 2. 아이템 간 겹침 방지 (최소 높이 지정) */
.item-grid {
	float: left; /* Isotope 로드 전 기본 배치용 */
	width: 33.333%; /* 3열 기준 */
	min-height: 350px; /* 제목 영역 포함 대략적인 높이 */
}

@media (max-width: 768px) {
	.item-grid {
		width: 100%;
	}
}
/* 1. 본문 영역을 2단 그리드로 강제 설정 */
#bo_v_con {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important; /* 무조건 가로 2칸 */
	gap: 15px !important; /* 이미지 사이 간격 */
	width: 100% !important;
}

/* 2. 에디터가 만든 P 태그와 BR 태그의 간섭 차단 */
#bo_v_con p {
	display: contents !important; /* P 태그를 없는 것처럼 처리하여 자식(img)을 그리드에 직접 배치 */
}
#bo_v_con br {
	display: none !important; /* 이미지 사이의 줄바꿈 태그 무력화 */
}

/* 3. 이미지 및 이미지를 감싸는 링크(a) 처리 */
#bo_v_con img,
#bo_v_con a.view_image {
	grid-column: span 1 !important; /* 2칸 중 1칸 차지 */
	width: 100% !important;
	height: 400px !important; /* 높이를 고정해야 찌그러짐 없이 깔끔하게 정렬됨 */
	object-fit: cover !important; /* 비율을 유지하며 칸을 꽉 채움 */
	display: block !important;
	margin: 0 !important;
}

/* 4. 이미지가 없는 순수 텍스트(문단)는 2칸을 다 쓰도록 설정 */
#bo_v_con p:not(:has(img)) {
	grid-column: span 2 !important; /* 텍스트는 이미지 옆이 아닌 아래에 꽉 차게 나옴 */
	display: block !important;
	width: 100% !important;
}

/* 모바일 화면 대응 */
@media (max-width: 768px) {
	#bo_v_con {
		grid-template-columns: 1fr !important;
	}
	#bo_v_con img {
		height: auto !important; /* 모바일은 원래 비율대로 */
	}
}