@charset "utf-8";
/* =====================================================================
   plant 스킨 — 공지게시
   시안: Figma node 8:1137 (notice-1920)

   ※ 사이트 공통 토큰(layout.css)이 있으면 그 값을 쓰고, 없으면(관리자
      미리보기 등) fallback 으로 시안 하드코딩값을 쓴다 → var(--x, #hex)
   ※ 값은 시안 실측값 그대로. 임의 라운딩 금지.
   ===================================================================== */

.kb-plant {
	--kb-line: var(--color-line, #dcdacb);
	--kb-text: var(--color-text, #1b2620);
	--kb-sub: var(--color-text-sub, #6a7065);
	--kb-deep: var(--color-primary-deep, #093a24);
	--kb-cream2: var(--color-bg-cream-2, #edeee6);

	font-family: var(--font-base, "Pretendard", "Noto Sans KR", system-ui, sans-serif);
	color: var(--kb-text);
}
.kb-plant *,
.kb-plant *::before,
.kb-plant *::after { box-sizing: border-box; }

.kb-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------
   헤더 — 시안 node 8:1144 / 8:1147
   --------------------------------------------------------------------- */
/* 시안 — 12px Bold / lh 16 / ls 1.2 / #093a24 */
.kb-plant__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--kb-deep);
}
/* 시안 — 제목줄 하단 2px #1b2620, 아래 여백 20 / 위 16 */
.kb-plant__head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-top: 16px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--kb-text);
}
/* 시안 — 36.8px Bold / lh 55.2 */
.kb-plant__title {
	margin: 0;
	font-size: 36.8px;
	font-weight: 700;
	line-height: 55.2px;
	color: var(--kb-text);
}
/* 시안 node 8:1150 — 버튼 간격 2px */
.kb-plant__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}
/* 시안 — r4 / p 8 17 / 14.08px / 비활성 border #dcdacb + #6a7065 */
.kb-plant__filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 17px;
	border: 1px solid var(--kb-line);
	border-radius: 4px;
	font-size: 14.08px;
	line-height: 21.12px;
	color: var(--kb-sub);
	text-decoration: none;
	background: transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kb-plant__filter-btn:hover {
	border-color: var(--kb-deep);
	color: var(--kb-deep);
}
/* 시안 — 활성(전체): bg/border #093a24 / 흰 글자 / SemiBold */
.kb-plant__filter-btn.is-active {
	background: var(--kb-deep);
	border-color: var(--kb-deep);
	color: #fff;
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   목록 표 — 시안 node 8:1157
   --------------------------------------------------------------------- */
.kb-plant__list { width: 100%; }
.kb-plant__list table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
/* 시안 칼럼 x좌표 기준 폭: 번호 92 / 분류 72 / 제목 auto / 날짜 164 / 조회 96 */
.kb-plant__list .kb-col-num  { width: 92px; text-align: center; }
.kb-plant__list .kb-col-cat  { width: 72px; text-align: center; }
.kb-plant__list .kb-col-date { width: 164px; text-align: center; }
.kb-plant__list .kb-col-view { width: 96px; text-align: center; }

/* 머리글 — 시안 bg #edeee6 / 높이 43.297 / 13.12px SemiBold / #6a7065 */
.kb-plant__list thead th {
	height: 43.297px;
	padding: 10px 8px;
	background: var(--kb-cream2);
	border-bottom: 1px solid var(--kb-line);
	font-size: 13.12px;
	font-weight: 600;
	line-height: 22.304px;
	color: var(--kb-sub);
	white-space: nowrap;
}
.kb-plant__list thead .kb-col-title { text-align: left; padding-left: 24px; }

/* 행 — 시안 높이 56.195 / 하단 1px #dcdacb */
.kb-plant__row > td {
	height: 56.195px;
	padding: 8px;
	border-bottom: 1px solid var(--kb-line);
	font-size: 13.76px;
	line-height: 23.392px;
	color: var(--kb-sub);
	vertical-align: middle;
}
/* 공지 행 — 시안 bg rgba(0,92,51,0.03) */
.kb-plant__row--notice > td { background: rgba(0, 92, 51, .03); }

/* 공지 아이콘 — 시안 node 8:1167 (깃발/현수막, 12.0049x15)
   CSS clip-path 로 그리려 했으나 시안은 "뾰족한 핀"이 아니라 깃대에 걸린
   깃발 형태다. 도형이 복잡해 CSS 로 재현하면 시안과 달라진다 → 실제 SVG 사용.
   mask 로 넣는 이유: SVG 안에 fill="#6A7065" 가 박혀 있어 background-image 로
   쓰면 색을 바꿀 수 없다. mask + background-color 면 색을 토큰으로 통제한다. */
.kb-plant__pin {
	display: inline-block;
	width: 12.0049px;
	height: 15px;
	background-color: var(--kb-sub);
	-webkit-mask: url("images/notice-flag.svg") no-repeat center / contain;
	mask: url("images/notice-flag.svg") no-repeat center / contain;
}
/* mask 미지원 브라우저 폴백 — 이미지 그대로 표시(시안색 #6A7065 로 보인다) */
@supports not ((-webkit-mask: none) or (mask: none)) {
	.kb-plant__pin {
		background-color: transparent;
		background: url("images/notice-flag.svg") no-repeat center / contain;
	}
}

/* 제목 칼럼 — 시안 15.52px / lh 26.384 / #1b2620, 좌측 24 들여쓰기 */
.kb-plant__row .kb-col-title {
	text-align: left;
	padding-left: 24px;
	padding-right: 16px;
	overflow: hidden;
}
.kb-plant__row .kb-col-title > a {
	display: block;
	font-size: 15.52px;
	line-height: 26.384px;
	color: var(--kb-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kb-plant__row .kb-col-title > a:hover .kb-plant__subject {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* 공지 행 제목은 SemiBold (시안 node 8:1170) */
.kb-plant__row--notice .kb-col-title > a { font-weight: 600; }

.kb-plant__new {
	display: inline-block;
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 3px;
	background: var(--color-accent, #e5c355);
	color: #1b2620;
	font-size: 10.5px;
	font-weight: 700;
	font-style: normal;
	line-height: 16px;
	vertical-align: 2px;
}

/* 분류 배지 — 시안 node 8:1168 / 8:1175 (h 19.5 / r3 / 11.52px Bold) */
.kb-plant__badge {
	display: inline-block;
	min-width: 37.922px;
	padding: 0 8px;
	border-radius: 3px;
	font-size: 11.52px;
	font-weight: 700;
	line-height: 19.584px;
	white-space: nowrap;
}
.kb-plant__badge--tax  { background: rgba(0, 92, 51, .12);    color: #093a24; }
.kb-plant__badge--news { background: rgba(229, 195, 85, .28); color: #7a6420; }
.kb-plant__badge--etc  { background: rgba(27, 38, 32, .08);   color: #6a7065; }

/* 모바일에서만 노출되는 메타(날짜·조회) */
.kb-plant__mobile-meta { display: none; }

/* 글 없음 */
.kb-plant__row--empty > td {
	height: auto;
	padding: 56px 8px;
	text-align: center;
	color: var(--kb-sub);
	font-size: 14px;
}

/* 총 N건 — 시안 node 8:1208 (13.76px / #6a7065 / pt 14 / px 4) */
.kb-plant__total {
	padding: 14px 4px 0;
	font-size: 13.76px;
	line-height: 23.392px;
	color: var(--kb-sub);
}

/* ---------------------------------------------------------------------
   페이징 / 검색 / 글쓰기 (시안에 없음 — 목록 톤에 맞춰 최소 구성)
   --------------------------------------------------------------------- */
.kb-plant__pagination { margin-top: 28px; }
.kb-plant__pagination ul {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kb-plant__pagination li { list-style: none; }
.kb-plant__pagination a,
.kb-plant__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid var(--kb-line);
	border-radius: 4px;
	font-size: 14px;
	color: var(--kb-sub);
	text-decoration: none;
}
.kb-plant__pagination .active a,
.kb-plant__pagination a:hover {
	background: var(--kb-deep);
	border-color: var(--kb-deep);
	color: #fff;
}

.kb-plant__search {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}
.kb-plant__search form { display: flex; gap: 6px; }
.kb-plant__search input[type="text"] {
	width: 240px;
	max-width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--kb-line);
	border-radius: 4px;
	font-size: 14px;
	color: var(--kb-text);
	background: #fff;
}
.kb-plant__search button {
	height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 4px;
	background: var(--kb-deep);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.kb-plant__control { margin-top: 20px; text-align: right; }
.kb-plant__btn-write {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border-radius: 4px;
	background: var(--kb-deep);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

/* ---------------------------------------------------------------------
   글 상세 (시안 없음 — 목록 타이포 이어받음)
   --------------------------------------------------------------------- */
.kb-plant__doc-head {
	padding-bottom: 20px;
	border-bottom: 2px solid var(--kb-text);
}
.kb-plant__doc-title {
	margin: 12px 0 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 42px;
	color: var(--kb-text);
}
.kb-plant__doc-meta {
	margin-top: 10px;
	font-size: 13.76px;
	line-height: 23.392px;
	color: var(--kb-sub);
}
.kb-plant__doc-sep { margin: 0 6px; }
.kb-plant__doc-body {
	padding: 36px 4px;
	border-bottom: 1px solid var(--kb-line);
	font-size: 16px;
	line-height: 28.8px;
	color: #43463e;
	word-break: break-word;
}
.kb-plant__doc-body img { max-width: 100%; height: auto; }
.kb-plant__doc-attach {
	padding: 18px 4px;
	border-bottom: 1px solid var(--kb-line);
}
.kb-plant__doc-attach-label {
	margin: 0 0 8px;
	font-size: 13.12px;
	font-weight: 600;
	color: var(--kb-sub);
}
.kb-plant__doc-attach ul { margin: 0; padding: 0; list-style: none; }
.kb-plant__doc-attach li + li { margin-top: 6px; }
.kb-plant__doc-attach a { font-size: 14.5px; color: var(--kb-deep); }

.kb-plant__doc-navi { margin-top: 8px; }
.kb-plant__doc-navi-item {
	display: flex;
	gap: 16px;
	padding: 16px 4px;
	border-bottom: 1px solid var(--kb-line);
	text-decoration: none;
	font-size: 14.5px;
	color: var(--kb-text);
}
.kb-plant__doc-navi-label {
	flex: 0 0 60px;
	color: var(--kb-sub);
	font-size: 13.12px;
	font-weight: 600;
}
.kb-plant__doc-navi-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kb-plant__doc-navi-item:hover .kb-plant__doc-navi-title { text-decoration: underline; }

.kb-plant__doc-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
}
.kb-plant__btn-list {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 22px;
	border-radius: 4px;
	background: var(--kb-deep);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}
.kb-plant__doc-control-right { display: inline-flex; gap: 6px; }
.kb-plant__btn-sub {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 18px;
	border: 1px solid var(--kb-line);
	border-radius: 4px;
	color: var(--kb-sub);
	font-size: 14.5px;
	text-decoration: none;
}
.kb-plant__btn-sub:hover { border-color: var(--kb-deep); color: var(--kb-deep); }

/* =====================================================================
   글쓰기 / 수정 / 비밀번호확인 화면
   editor.php · editor-fields.php · confirm.php 는 원본 default 스킨을
   그대로 쓴다. 그 마크업은 #kboard-default-editor / .kboard-attr-row /
   .attr-name / .attr-value / .kboard-default-button-small 을 쓰는데,
   이 스타일은 원본 스킨의 style.css 에만 있었다. plant 스킨을 쓰면
   그 CSS 가 로드되지 않아 폼이 스타일 없이 나온다(= 깨져 보임).
   → 여기서 사이트 톤으로 다시 정의한다.
   ===================================================================== */
#kboard-default-editor,
#kboard-default-editor.confirm {
	--kb-line: var(--color-line, #dcdacb);
	--kb-text: var(--color-text, #1b2620);
	--kb-sub: var(--color-text-sub, #6a7065);
	--kb-deep: var(--color-primary-deep, #093a24);

	max-width: 860px;
	margin: 0 auto;
	font-family: var(--font-base, "Pretendard", "Noto Sans KR", system-ui, sans-serif);
	color: var(--kb-text);
}
#kboard-default-editor *,
#kboard-default-editor *::before,
#kboard-default-editor *::after { box-sizing: border-box; }

/* 한 줄 = 라벨 위 / 입력 아래 */
#kboard-default-editor .kboard-attr-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
	padding: 0;
	background: transparent;
	border: 0;
	float: none;
}
#kboard-default-editor .attr-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
	color: var(--kb-text);
}
/* 필수 항목 표시 */
#kboard-default-editor .kboard-attr-row.required .attr-name::after {
	content: " *";
	color: #c0392b;
}
#kboard-default-editor .attr-value { width: 100%; }
#kboard-default-editor .attr-value-label {
	font-size: 13.5px;
	color: var(--kb-sub);
}

/* 입력 요소 공통 */
#kboard-default-editor input[type=text],
#kboard-default-editor input[type=email],
#kboard-default-editor input[type=password],
#kboard-default-editor input[type=number],
#kboard-default-editor input[type=date],
#kboard-default-editor select,
#kboard-default-editor textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 13px;
	border: 1px solid var(--kb-line);
	border-radius: 4px;
	background-color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	line-height: 22px;
	color: var(--kb-text);
	outline: none;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#kboard-default-editor textarea { min-height: 180px; resize: vertical; }
#kboard-default-editor input[type=text]:focus,
#kboard-default-editor input[type=email]:focus,
#kboard-default-editor input[type=password]:focus,
#kboard-default-editor input[type=number]:focus,
#kboard-default-editor input[type=date]:focus,
#kboard-default-editor select:focus,
#kboard-default-editor textarea:focus {
	border-color: var(--kb-deep);
	box-shadow: 0 0 0 3px rgba(0, 92, 51, .10);
}
/* select 은 기본 화살표를 두되 폭만 확보 (SVG 화살표는 스킨 톤과 무관하게 유지) */
#kboard-default-editor select { padding-right: 32px; cursor: pointer; }
#kboard-default-editor input[type=file] {
	width: 100%;
	padding: 9px 12px;
	border: 1px dashed var(--kb-line);
	border-radius: 4px;
	background: #fff;
	font-size: 13.5px;
	color: var(--kb-sub);
}

/* 옵션(비밀글 / 공지사항 체크박스) — 가로로 붙여 배치 */
#kboard-default-editor .attr-value .attr-value-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 18px;
	font-size: 14px;
	color: var(--kb-text);
	cursor: pointer;
}
#kboard-default-editor .attr-value .attr-value-option input[type=checkbox] {
	width: 16px;
	height: 16px;
	min-height: 0;
	margin: 0;
	accent-color: var(--kb-deep);
	cursor: pointer;
}

/* 에디터(TinyMCE) 영역이 폼 폭을 넘지 않게 */
#kboard-default-editor .kboard-content,
#kboard-default-editor .wp-editor-wrap { width: 100%; }
#kboard-default-editor .wp-editor-container {
	border: 1px solid var(--kb-line);
	border-radius: 4px;
	overflow: hidden;
}
#kboard-default-editor .wp-editor-container textarea { border: 0; }

/* 미디어 추가 등 워드프레스 기본 버튼 */
#kboard-default-editor .button,
#kboard-default-editor .wp-media-buttons .button {
	height: auto;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--kb-line);
	border-radius: 4px;
	background: #fff;
	color: var(--kb-text);
	font-size: 13.5px;
	line-height: 22px;
	cursor: pointer;
}
#kboard-default-editor .button:hover { border-color: var(--kb-deep); color: var(--kb-deep); }

/* 하단 버튼 줄 — 목록/저장 */
#kboard-default-editor .kboard-control,
#kboard-default-editor.confirm .kboard-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--kb-line);
}
#kboard-default-editor .kboard-control .right,
#kboard-default-editor.confirm .kboard-control .right {
	display: inline-flex;
	gap: 6px;
	margin-left: auto;
}
/* 원본 마크업이 쓰는 버튼 클래스 — 목록/돌아가기(보조) */
.kboard-default-button-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 20px;
	border: 1px solid var(--color-line, #dcdacb);
	border-radius: 4px;
	background: #fff;
	color: var(--color-text-sub, #6a7065);
	font-family: var(--font-base, "Pretendard", "Noto Sans KR", system-ui, sans-serif);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.kboard-default-button-small:hover {
	border-color: var(--color-primary-deep, #093a24);
	color: var(--color-primary-deep, #093a24);
}
/* 저장하기(submit) 는 주 버튼 — 딥그린 채움 */
#kboard-default-editor .kboard-control button.kboard-default-button-small,
#kboard-default-editor.confirm .kboard-control button.kboard-default-button-small {
	border-color: var(--color-primary-deep, #093a24);
	background: var(--color-primary-deep, #093a24);
	color: #fff;
}
#kboard-default-editor .kboard-control button.kboard-default-button-small:hover {
	background: var(--color-primary-dark, #00472a);
	border-color: var(--color-primary-dark, #00472a);
	color: #fff;
}

/* 비밀번호 확인 화면 */
#kboard-default-editor.confirm .kboard-confirm-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}
#kboard-default-editor.confirm .description {
	font-size: 13.5px;
	line-height: 22px;
	color: var(--kb-sub);
}

/* ---------------------------------------------------------------------
   반응형 — 좁은 화면에서는 번호/날짜/조회 칼럼을 접고
   제목 아래 메타로 합친다(가로 스크롤 방지)
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
	.kb-plant__head-row { flex-direction: column; align-items: flex-start; gap: 14px; }
	.kb-plant__title { font-size: 28px; line-height: 40px; }
	.kb-plant__doc-title { font-size: 22px; line-height: 34px; }
}
@media (max-width: 700px) {
	.kb-plant__list .kb-col-num,
	.kb-plant__list .kb-col-date,
	.kb-plant__list .kb-col-view { display: none; }

	.kb-plant__list .kb-col-cat { width: 64px; }
	.kb-plant__row .kb-col-title,
	.kb-plant__list thead .kb-col-title { padding-left: 12px; }

	.kb-plant__row > td { height: auto; padding: 14px 8px; }
	.kb-plant__row .kb-col-title > a { white-space: normal; }
	.kb-plant__mobile-meta {
		display: block;
		margin-top: 4px;
		font-size: 12.5px;
		line-height: 20px;
		color: var(--kb-sub);
	}
	/* 공지 행에서 핀은 분류 칼럼 앞에 두지 않고 숨긴다(번호 칼럼이 사라지므로) */
	.kb-plant__row--notice .kb-plant__pin { display: none; }

	.kb-plant__search input[type="text"] { width: 100%; }
	.kb-plant__search form { width: 100%; }
	.kb-plant__doc-control { flex-direction: column-reverse; align-items: stretch; }
	.kb-plant__doc-control-right { justify-content: flex-end; }
	.kb-plant__btn-list { justify-content: center; }

	/* 글쓰기 하단 버튼 — 좁은 화면에서 좌우 분리 대신 쌓기 */
	#kboard-default-editor .kboard-control,
	#kboard-default-editor.confirm .kboard-control {
		flex-wrap: wrap;
		gap: 8px;
	}
	#kboard-default-editor .kboard-control .left,
	#kboard-default-editor .kboard-control .right { display: inline-flex; gap: 6px; }
	.kboard-default-button-small { padding: 0 16px; }
}