@charset "utf-8";

/* ==================================================
   MICE 네트워크 게시판 공통 스타일
   .board-network : 목록 (탭 fragment / list.jsp)
   .board-form    : 작성·수정 폼 (writeForm.jsp / updateForm.jsp)
   .board-detail  : 상세 (detail.jsp)
   ================================================== */


/* ===== 목록 (탭 fragment) ===== */
.board-network .search-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.board-network .board-list-header {
	display: flex;
	background: var(--Gray-Pale);
	border-top: 2px solid var(--Gray-Dark);
	border-bottom: 1px solid var(--Gray-Border);
	font-weight: bold;
	font-size: 1em;
}

.board-network .board-list-header-col {
	flex: 1;
	text-align: center;
}

.board-network .board-list-header-col.col-title {
	flex: 2;
}

.board-network .board-row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--Gray-Border-Light);
}

.board-network .board-list-date {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.board-network .board-list-category {
	flex: 1;
	text-align: center;
}

.board-network .board-list-title {
	flex: 2;
	text-align: left;
}

.board-network .cmt-badge {
	margin-left: 6px;
}

.board-network .board-list-author {
	flex: 1;
	text-align: center;
}

.board-network .write-wrap {
	margin-top: 10px;
	overflow: hidden;
}

.board-network .btn-right {
	float: right;
}

/* 탭 전환 시 대상 패널이 잠깐 비어도 영역이 붕괴(footer가 탭 밑까지 점프)하지 않도록 높이 예약 */
.tab-container {
	min-height: 34em;
}


/* ===== 작성·수정 폼 ===== */
.board-form .form-wrap {
	border-left: none;
	border-top: none;
}

.board-form .title-col {
	border-left: none;
}

.board-form .title-row {
	display: flex;
	gap: 10px;
	align-items: center;
	border: 1px solid var(--Gray-Border);
	border-radius: 4px;
	padding: 0;
}

.board-form .category-select {
	width: 14em;
	flex-shrink: 0;
	border: none;
}

.board-form .title-input {
	flex: 1;
	border: none;
}

.board-form .editor-box {
	margin-top: 10px;
	overflow: hidden;
	resize: none;
}

.board-form .file-section {
	margin-top: 5em;
	position: relative;
	z-index: 1;
}

.board-form .file-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.board-form .file-title {
	font-size: 1.15em;
	font-weight: bold;
}

.board-form .noti {
	color: var(--Gray-MidLight);
	font-size: 0.85em;
	margin-top: 4px;
}

.board-form .file-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--Gray-Border-Light);
}

.board-form .btn-center {
	text-align: center;
}

.board-form .hidden-field {
	display: none;
}

.board-form .exist-file-list {
	margin-bottom: 10px;
}

.board-form .exist-file-name {
	font-size: 0.95em;
}

.board-form .exist-file-del {
	font-size: 0.8em;
	color: var(--Gray-Light);
	text-decoration: underline;
}


/* ===== 상세 ===== */
/* 프레임워크 .card(padding 80px 330px / font 1.8rem) 대신, 필요한 속성을 여기서 자기완결로 정의
   → cascade에 안 밀리고 자식 em 기준도 14px로 정상화 */
.board-detail .card.type2 {
	position: relative;
	padding: 4em 3em;
	border: 1px solid var(--Gray-Border-Light);
	border-top: 2px solid var(--Main);
	color: var(--Gray-Mid);
	font-size: 1em;
	letter-spacing: normal;
}

.board-detail .card + .card {
	margin-top: 1.4em;
}

.board-detail .card .container {
	max-width: none;
	width: auto;
	padding: 0;
	margin: 0;
}

.board-detail .card-title.post-title {
	font-size: 1.6em;
	font-weight: 600;
}

.board-detail .post-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--Gray-Border);
	margin-bottom: 1.1em;
	color: var(--Gray-MidLight);
	font-size: 0.95em;
}

.board-detail .post-meta .writer-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1em;
}

.board-detail .action-links {
	display: flex;
	gap: 10px;
}

.board-detail .action-links-edit {
	display: none;
	gap: 10px;
}

.board-detail .link-action {
	color: var(--Gray-Light);
	font-size: 0.85em;
	text-decoration: none;
	transition: color 0.2s;
}

.board-detail .link-action:hover {
	color: var(--Main-light);
	text-decoration: underline;
	text-underline-position: under;
}

.board-detail .link-save {
	color: var(--Main-mid);
	font-size: 0.85em;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s;
}

.board-detail .link-save:hover {
	color: var(--Main);
	text-decoration: underline;
	text-underline-position: under;
}

.board-detail .card .post-body {
	min-height: 20em;
	padding: 1.6em 1.1em;
	overflow: hidden;
	font-size: 1.05em;
	line-height: 1.85;
	color: var(--Gray-Dark);
}

.board-detail .card .post-body * {
	font-family: "IncheonMICE", sans-serif !important;
}

.board-detail .post-body img {
	max-width: 100%;
	height: auto;
}

.board-detail .card-title.section-title {
	font-size: 1.05em;
	font-weight: 600;
	color: var(--Gray-Dark);
}

.board-detail .card-title.section-title .color-secondary {
	margin-left: 4px;
	color: var(--Main);
}

.board-detail .card .file-box {
	border-top: 1px solid var(--Gray-Border);
	padding-top: 1.4em;
	margin-top: 1.4em;
}

.board-detail .file-list {
	padding: 10px 0;
}

.board-detail .file-item {
	padding: 5px 0;
}

.board-detail .file-down-btn {
	font-size: 0.9em;
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--Blue);
}

.board-detail .card.type2.comment-card {
	margin-top: 2em;
	padding: 2em 3em;
	border-radius: 1em;
	background: var(--White);
	border: 1px solid var(--Gray-Border);
	font-size: 1.1em;
}

.board-detail .comment-list {
	padding-left: 0;
}

.board-detail .comment-empty {
	padding: 1em 0;
	text-align: center;
	color: var(--Gray-Light);
}

.board-detail .comment-item {
	padding: 0.85em 0;
	border-bottom: 1px solid var(--Gray-Border-Light);
}

.board-detail .comment-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

/* 작성자 · 뱃지 · 작성일 한 줄 */
.board-detail .comment-writer {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92em;
	color: var(--Gray-Light);
}

.board-detail .comment-writer strong {
	font-weight: 600;
	color: var(--Gray-Dark);
}

.board-detail .circle.wide.writer-badge {
	width: fit-content;
	padding: 3px 7px;
	font-size: 0.75em;
	font-weight: 500;
	color: var(--White);
	background: var(--Main-light);
	display: flex;
	align-items: center;
	justify-content: center;
}

.board-detail .comment-date {
	margin-left: 0;
	font-size: 0.82em;
	color: var(--Gray-Light);
}

.board-detail .comment-body {
	font-size: 0.95em;
	line-height: 1.7;
	color: var(--Gray-Mid);
	white-space: pre-line;
}

.board-detail .comment-edit {
	display: none;
	margin-top: 8px;
}

/* 댓글 입력 (작성·수정 공용) */
.board-detail .comment-textarea {
	width: 100%;
	min-height: 3.2em;
	padding: 0.7em 0.9em;
	font-size: 0.95em;
	line-height: 1.6;
	color: var(--Gray-Dark);
	background: var(--White);
	border: 1px solid var(--Gray-Border);
	border-radius: 0.5em;
	resize: vertical;
	flex: 1;
	transition: border-color 0.2s;
}

.board-detail .comment-textarea:focus {
	outline: none;
	border-color: var(--Main-light);
}

.board-detail .comment-textarea::placeholder {
	color: var(--Gray-Light);
}

/* 댓글 작성 영역 (목록과 구분되는 하단 존) */
.board-detail .card .comment-write {
	margin-top: 1.4em;
	padding: 1.4em 0 0;
}

.board-detail .comment-write-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.board-detail .comment-submit {
	flex-shrink: 0;
	white-space: nowrap;
	padding: 0 1.3em;
	font-size: 0.9em;
	border-radius: 0.5em;
	border: 1px solid var(--Main-light);
	color: var(--Main-light);
	background-color: var(--White);
	transition: all 0.3s;
}

.board-detail .comment-submit:hover {
	background-color: var(--Main-light);
	color: var(--White);
}

@media (max-width: 768px) {
	.board-detail .card.type2,
	.board-detail .card.type2.comment-card {
		padding: 2em 1.5em;
	}

	.board-detail .card-title.post-title {
		margin-bottom: 0.5em;
	}

	.board-detail .post-meta {
		flex-wrap: wrap;
		flex-direction: column;
		align-items: flex-start;
		gap: 1em;
	}

	.board-detail .post-meta .writer-info {
		flex-direction: column;
		align-items: flex-start;

	}

	.board-detail .card .comment-write {
		margin-top: initial;
	}

	.board-detail .comment-write-row {
		flex-direction: column;
	}

	/* 게시글 헤더 액션(목록/수정/삭제)만 — 댓글 action-links로 누수 방지 위해 post-meta로 스코프 */
	.board-detail .post-meta .action-links {
		justify-content: flex-end;
		width: 100%;
	}

	/* 댓글 헤더: 작성자정보 · 액션이 좁은 화면에서 겹치지 않게 줄바꿈 */
	.board-detail .comment-head {
		flex-wrap: wrap;
		gap: 4px 8px;
	}

	.board-detail .comment-writer {
		flex-wrap: wrap;
	}

	.board-network .board-list-header {
		display: none;
	}

	.board-network .board-row {
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 10px;
		padding: 0.85em 0;
		justify-content: flex-end;
	}

	/* 제목: 첫 줄 전체 폭 */
	.board.notice.board-network .board-list-title {
		order: -1;
		flex: 0 0 100%;
		font-size: 1.2em;
		margin: initial;
		padding: 0.5em 0;
	}

	/* 메타(카테고리·작성자·작성일): 둘째 줄에 나란히 — 크기·색·굵기 통일 */
	.board.notice.board-network .board-list-category,
	.board.notice.board-network .board-list-author,
	.board.notice.board-network .board-list-date {
		flex: 0 0 auto;
		justify-content: flex-start;
		text-align: left;
		font-size: 0.82em;
		font-weight: 400;
		color: var(--Gray-Light);
	}

	/* 날짜 내부 강조(<strong>) 굵기 리셋 → 나머지 메타와 통일 */
	.board-network .board-list-category {
		order: 1;
	}

	.board-network .board-list-author {
		order: 2;
	}

	.board-network .board-list-date {
		order: 3;
	}
}