@charset "utf-8";
/* ============================================================
   대상 : 게시판 공유 템플릿(front/bbs/**) — 목록·상세·페이징
   변경 : 카이누리 클래스에 KTDI 시안 톤을 입힌다
   이유 : 🔴 시안(ktdi_26)과 카이누리의 **클래스명이 다르다.**
            시안      : .board_foot  .pagination  .cat  .num  .date  .tit
            카이누리  : .bbs_paging  .paging_wrap .board_info (구: .board_meta .board_title .list_right — 지시 22 로 폐기)
          그래서 시안 sub.css 를 그대로 붙여도 게시판 화면이 스타일을 못 받는다.
          (실제로 /board/notice, /board/notice/5340 이 깨져 보였다)

          simple 테마의 css/bbs/*.css 를 복사하는 방법도 있으나 **색상 체계가 다르다**
          (simple #1a3b8e 네이비 / KTDI #cd000b 레드) → 시안 CSS 변수를 그대로 쓰는 이 방식을 택했다.

   ⚠ 시안 원본 CSS(css/common.css·sub.css)는 수정하지 않는다(개발규약).
     시안이 이미 정의한 .board_list 골격은 그대로 쓰고 **카이누리 전용 클래스만 보완**한다.
   ============================================================ */

/* ── 목록 래퍼 ───────────────────────────────────────────── */
/* 🔴 `.board_list_wrap { margin-top: 2rem }` 을 지웠다 (지시 23).
   시안엔 이 래퍼가 없고 `.board_list { margin-top: 2rem }`(sub.css 1808)이 패널↔목록 간격을 준다.
   둘을 겹치면 4rem + 옛 `.board_info` 높이·여백까지 더해져 시안의 2rem 자리에 5rem+ 가 들어갔다.
   ⚠ 되살리지 말 것 — 이게 "개발본 목록이 전반적으로 더 크다"의 실제 원인이었다.

   `.board_info` 규칙도 함께 삭제했다: 그 표기는 검색 패널 안 `p.total` 로 옮겨갔고(시안 위치),
   크기·색은 시안 `.search_wrap .total`(sub.css 307)이 준다.
   🔴 덤으로 **세미나 목록 누수**가 없어진다 — `front/custom/ktdi/seminar-list.html` 의
      `<ul class="board_info">`(시안 `.board_list .cont .board_info`)에 무스코프였던 이 규칙의
      font-size·color·margin-bottom 이 얹혀 있었다. */

/* 전체 건수 표기 안의 구분선 — 시안 `.total` 엔 개발본 문구(· 현재 페이지 n/n)가 없어 이것만 보탠다 */
.search_wrap .total .divider {
	color: #ccc;
	margin: 0 0.2rem;
}

/* ── 목록 행 ─────────────────────────────────────────────── */
/* 🔴 행 레이아웃은 시안 sub.css 가 전부 잡는다 —
      `.board_list li a { display:flex; gap:2rem; padding:1.6rem 2rem }` + `.num/.cont/.cat/.tit/.date`.
   이전에는 여기서 `li` 를 flex 로 만들고 `.board_content` 를 `display:block` 으로 덮었는데,
   그건 [제목줄+메타줄][첨부아이콘] 2단이던 **옛 구조**용이었다(지시 22 로 폐기).
   ⚠ 되살리면 시안의 flex 가 꺼져 번호·제목·날짜가 세로로 쌓인다 — 선택자 특이도가 시안보다 높다.

   같은 이유로 삭제한 규칙: `.board_title`(+.t/.cate/.badge_notice) · `.board_meta`(+p) ·
   `.list_right`(+.ic_file) — 대응 마크업이 BBSS001 에서 사라졌고 다른 스킨도 쓰지 않는다.
   `li.notice` 배경도 시안이 이미 준다(중복이라 제거). */

/* 기능성 표기 — 시안엔 없지만 게시판이 쓰면 `.cont` 안에 나온다(비밀글 자물쇠·답변수).
   옛 선택자는 `.board_title .lock` 이라 구조 변경으로 죽었다 → `.cont` 기준으로 옮김. */
.board_list .cont .lock {
	flex: 0 0 auto;
	font-size: 1.125rem;
	color: #888a9e;
}
.board_list .cont .reply_cnt {
	flex: 0 0 auto;
	color: var(--main-color, #cd000b);
	font-weight: 700;
	font-size: 0.9375rem;
}

/* 900px 이하 목록 행 간격 — 시안(sub.css 1949)은 `gap: 0.4rem` 이다.
   🔴 2026-09-21 지시로 0.6rem 으로 넓힌다. 세로로 쌓이는 구간이라 0.4rem 은 태그·제목·날짜가
      한 덩어리로 붙어 읽힌다. 방향(column)·왼쪽 정렬은 시안 그대로 두고 간격만 바꾼다. */
@media screen and (max-width: 900px) {
	.board_list li a {
		gap: 0.6rem;
		padding: 1.2rem;
	}
}

/* 게시글 없음 */
.board_none, .no_data {
	padding: 6rem 0;
	text-align: center;
	color: #888a9e;
	border-top: 2px solid var(--sub-tit-color, #000620);
	border-bottom: 1px solid var(--line-color, #e7e7e7);
}

/* ── 페이징 ──────────────────────────────────────────────── */
/* 시안(ktdi_26 sub.css `.board_foot` / `.pagination`)의 룩을 카이누리 마크업에 매핑.
   시안:     .board_foot > nav.pagination > a.page_num / a.page_arrow   (a 가 직계)
   카이누리: nav.bbs_paging > ul.paging_wrap.paging_st3.mt40 > li > a   (li 가 한 겹 더)
   → 번호/화살표 구분이 클래스(.page_num/.page_arrow)가 아니라 li 클래스
     (.first/.prev/.next/.last, 현재는 .active)로 온다.
   ※ common.css 의 .paging_st3(54px 사각 + 테두리)를 덮어야 해서
     선택자를 .bbs_paging .paging_wrap … 로 한 단계 더 좁혔다. */
.bbs_paging {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3rem;
}
.bbs_paging .paging_wrap, .paging_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
}
/* 템플릿이 ul 에 .mt40(margin-top:4rem !important)을 붙여 둬서 간격이 겹친다.
   여백은 .bbs_paging 이 잡으므로 여기서 지운다 — !important 를 이기려면 !important 필요. */
.bbs_paging .paging_wrap.mt40 {
	margin-top: 0 !important;
}

/* 번호·화살표 버튼 — 시안 .page_num / .page_arrow */
.bbs_paging .paging_wrap li a,
.bbs_paging .paging_wrap li button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font-family: inherit;
	font-size: 1.05rem;
	color: #888;
	cursor: pointer;
	transition: 0.2s all;
}
/* .first/.prev/.next/.last 는 common.css 가 테두리+흰 배경을 주므로 따로 지운다 */
.bbs_paging .paging_wrap li.first a, .bbs_paging .paging_wrap li.first button,
.bbs_paging .paging_wrap li.prev a, .bbs_paging .paging_wrap li.prev button,
.bbs_paging .paging_wrap li.next a, .bbs_paging .paging_wrap li.next button,
.bbs_paging .paging_wrap li.last a, .bbs_paging .paging_wrap li.last button {
	width: 2.6rem;
	height: 2.6rem;
	margin: 0;
	border: 0;
	background: transparent;
}
.bbs_paging .paging_wrap li a:hover,
.bbs_paging .paging_wrap li button:hover {
	background: #f0f1f4;
	color: var(--sub-tit-color, #353e52);
	font-weight: 400;
}
/* 현재 페이지 — 템플릿은 li.active, 다른 스킨은 .on 을 쓴다 */
.bbs_paging .paging_wrap li.active a, .bbs_paging .paging_wrap li.active button,
.bbs_paging .paging_wrap li.on a, .bbs_paging .paging_wrap li.on button {
	background: var(--main-color, #344dcf);
	color: #fff;
	font-weight: 600;
}
.bbs_paging .paging_wrap li.active a:hover,
.bbs_paging .paging_wrap li.on a:hover {
	background: var(--main-color, #344dcf);
	color: #fff;
}
/* 화살표 아이콘 — 시안 .page_arrow .material-symbols-outlined (1.4rem)
   common.css 가 li.first/.prev/.next/.last 기준으로 20px·#888 을 박아 둬서
   같은 특이도(0,4,3)로 맞추고 뒤에서 덮는다. */
.bbs_paging .paging_wrap li a .material-symbols-outlined,
.bbs_paging .paging_wrap li button .material-symbols-outlined {
	font-size: 1.4rem;
	color: inherit;
}
.bbs_paging .paging_wrap li:hover a .material-symbols-outlined,
.bbs_paging .paging_wrap li:hover button .material-symbols-outlined {
	color: inherit;
}

@media screen and (max-width: 900px) {
	.bbs_paging .paging_wrap li a, .bbs_paging .paging_wrap li button,
	.bbs_paging .paging_wrap li.first a, .bbs_paging .paging_wrap li.first button,
	.bbs_paging .paging_wrap li.prev a, .bbs_paging .paging_wrap li.prev button,
	.bbs_paging .paging_wrap li.next a, .bbs_paging .paging_wrap li.next button,
	.bbs_paging .paging_wrap li.last a, .bbs_paging .paging_wrap li.last button {
		width: 2.2rem;
		height: 2.2rem;
		font-size: 1rem;
	}
}
@media screen and (max-width: 500px) {
	.bbs_paging .paging_wrap, .paging_wrap {
		gap: 0.2rem;
	}
	.bbs_paging .paging_wrap li a, .bbs_paging .paging_wrap li button,
	.bbs_paging .paging_wrap li.first a, .bbs_paging .paging_wrap li.first button,
	.bbs_paging .paging_wrap li.prev a, .bbs_paging .paging_wrap li.prev button,
	.bbs_paging .paging_wrap li.next a, .bbs_paging .paging_wrap li.next button,
	.bbs_paging .paging_wrap li.last a, .bbs_paging .paging_wrap li.last button {
		width: 1.8rem;
		height: 1.8rem;
		font-size: 0.8rem;
	}
	.bbs_paging .paging_wrap li a .material-symbols-outlined,
	.bbs_paging .paging_wrap li button .material-symbols-outlined {
		font-size: 1.1rem;
	}
}
/* ── 게시판 검색바 ───────────────────────────────────────────
   🔴 여기 있던 매핑 규칙 블록(약 110줄)을 **삭제했다** (지시 20, 2026-09-20).

   왜 있었나 — 제품 검색폼이 `form.search_wrap.search_st5.bbs_search > .search_row > .search_item`
   구조라 시안 CSS(`.search_wrap > .search_form > .select_box/.input_box`)가 하나도 안 걸렸다.
   그래서 시안 룩을 **우리 마크업에 다시 그려 주는** 규칙을 여기 만들어 뒀었다.

   왜 지웠나 — 지시 20 에서 `_common/search-form.html` 을 **시안 구조 그대로** 바꿨다.
   이제 sub.css 297~ 의 시안 원본 규칙(.search_wrap / .search_form / .select_box / .input_box /
   .btn_search)이 직접 걸린다. 매핑본을 남겨 두면 어느 쪽이 실제로 먹는지 헷갈리고,
   시안이 갱신될 때 두 벌을 맞춰야 한다.
   ※ 같은 구조를 조직도 직원검색(.staff_search .search_wrap …)이 이미 쓰고 있었다 — 이제 일관된다.
   ※ 되살릴 일은 없어야 하지만 이력은 git 에 있다. */

/* ── 상세 화면 ───────────────────────────────────────────── */
.post_head {
	border-top: 2px solid var(--sub-tit-color, #000620);
	border-bottom: 1px solid var(--line-color, #e7e7e7);
	padding: 2.4rem 2rem;
}
/* 🔴 .post_title 은 제목 자체가 아니라 `분류칩 + h2` 를 감싸는 줄이다.
      (BBSS001~005 view.html: <div class="post_title"><span class="cate">분류</span><h2>제목</h2></div>)
      block 으로 두면 칩과 제목이 두 줄로 갈라지고, 칩까지 제목 크기로 커졌다. */
.post_title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	font-size: 1.375rem;
	font-weight: 700;
	color: #222;
	line-height: 1.4;
	margin: 0 0 1rem;
	word-break: keep-all;
}
.post_title h2 {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
}
/* 상세 화면 분류칩 — 목록 분류칩(시안 .board_list .cat)과 같은 톤. 없으면 제목 크기로 커진다 */
.post_title .cate {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 400;
	padding: 0.2rem 0.8rem;
	border: 1px solid var(--line-color, #e7e7e7);
	border-radius: 100px;
	color: #555;
	background: #f7f7f9;
}
.post_head .post_meta, .post_head .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.6rem;
	font-size: 0.875rem;
	color: #6c7075;
}

.post_body, .post_content {
	padding: 3rem 2rem;
	font-size: 1rem;
	line-height: 1.8;
	color: #333;
	word-break: break-word;
}
/* 🔴 레거시 본문에 고정폭 table/img 가 많다 — 넘치지 않게 가둔다 */
.post_content img,
.post_body img {
	max-width: 100%;
	height: auto;
}
.post_content table,
.post_body table {
	max-width: 100%;
	border-collapse: collapse;
}
.post_content > *,
.post_body > * {
	max-width: 100%;
}

/* 첨부파일 목록 (JS 비동기 로드 — /common/file/list.do) */
.post_files {
	padding: 1.6rem 2rem;
	background: #fafafa;
	border-bottom: 1px solid var(--line-color, #e7e7e7);
}
.post_files h4 {
	font-size: 0.9375rem;
	font-weight: 700;
	color: #333;
	margin: 0 0 0.8rem;
}
.post_files .attach_list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.post_files .attach_list li {
	/* padding: 0.3rem 0; */
	font-size: 0.9375rem;
}
.post_files .attach_list a {
	color: #333;
	
}
.post_files .attach_list a:hover {
	color: var(--main-color, #cd000b);
}

/* 액션 바 — 이전/다음글(.view_nav) + 목록·관리버튼(.board_foot)
   🔴 예전엔 카이누리 전용 .post_nav 를 여기서 따로 그렸다. 지금은 **템플릿(BBSS001~004
      view.html)이 시안과 같은 클래스명**(.view_nav/.dir/.tit, .board_foot/.btn_wrap)을
      내므로 디자인은 sub.css 가 전부 준다 → 여기서 다시 만들지 않는다.
   보완이 필요한 건 카이누리에만 있는 경우 하나뿐이다:
   이전/다음 글이 없을 때 템플릿이 <a> 가 아니라 <span class="prev disabled"> 를 내는데,
   sub.css 의 `.view_nav a` 룰이 span 엔 안 걸려서 같은 값을 span 에도 맞춘다.
   (`.view_nav .prev` 의 구분선과 `.dir`/`.tit` 타이포는 span 에도 이미 걸린다) */
.view_nav > span {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.4rem 1rem;
}
.view_nav > span.disabled .dir,
.view_nav > span.disabled .tit {
	color: #a5acb8;
}

/* 신고 버튼 — 목록/수정/삭제는 시안 .btn_list/.btn_edit/.btn_del 을 그대로 쓰지만
   신고는 시안(ktdi_26)에 대응 버튼이 없다. .btn_del(흰 배경 + 회색 테두리) 과 같은
   3순위 톤으로 맞추되, 삭제와 구분되게 hover 만 회색 계열로 둔다. */
.btn_report {
	gap: 0.3rem;
	background: #fff;
	border: 1px solid var(--line-color, #DDE2EA);
	color: #8a93a6;
}
.btn_report:hover {
	border-color: var(--sub-tit-color, #353e52);
	color: var(--sub-tit-color, #353e52);
}

@media screen and (max-width: 900px) {
	.view_nav > span {
		gap: 1rem;
		padding: 1rem;
	}
}

/* 버튼 영역 */
.post_btns, .bbs_btns {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
	margin-top: 2.4rem;
	flex-wrap: wrap;
}

/* ── 갤러리 스킨 (BBSS002) — INFO-TEX·영상자료 ─────────── */
/* 🔴 실제 마크업(BBSS002/list.html)은 `ul > li` 가 아니다:
      <div id="gallery_wrap" class="tab_con on">
        <a class="gallery_card"> .thumb(img|.thumb_placeholder|.play) + .caption(.cate/.title/.excerpt/.date) </a>
      </div>
   즉 .gallery_card 는 **카드 하나(<a>)** 이고, 격자는 컨테이너 .tab_con 이 잡아야 한다.
   이전 정의는 .gallery_card 를 격자 컨테이너로 봐서 카드 하나하나가 4열 그리드가 되어
   썸네일과 캡션이 좌우로 갈라졌다. 컨테이너/카드 역할을 바로잡는다.
   (overrides/media.css 도 .gallery_card 를 카드로 보고 작성돼 있어 이 해석이 맞다) */

/* 격자 컨테이너 */
#gallery_wrap.tab_con,
.gallery_wrap .tab_con {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.4rem 2rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}
/* 카드 — 템플릿이 <a class="gallery_card"> 하나로 감싼다 */
.gallery_card {
	display: block;
	border: 1px solid var(--line-color, #e7e7e7);
	border-radius: 0.6rem;
	overflow: hidden;
	background: #fff;
	color: inherit;
	transition: box-shadow 0.2s, transform 0.2s;
}
.gallery_card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
/* 구버전 마크업(ul.gallery_card > li) 하위호환 — 남아 있어도 깨지지 않게 */
ul.gallery_card {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.4rem 2rem;
	list-style: none;
	border: 0;
	background: none;
	margin: 2rem 0 0;
	padding: 0;
}
ul.gallery_card > li {
	border: 1px solid var(--line-color, #e7e7e7);
	border-radius: 0.6rem;
	overflow: hidden;
	background: #fff;
}
ul.gallery_card > li > a { display: block; }
.gallery_card .thumb {
	position: relative;
	aspect-ratio: 4/2;
	overflow: hidden;
	background: #f4f6f8;
}
.gallery_card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* KTDI미디어(유튜브) 카드 — 16:9 박스 + mqdefault(검은띠 없음)로 박스를 꽉 채운다(2026-09-28 #11, media.js) */
.gallery_card_media .thumb { aspect-ratio: 16 / 9; }
/* 이미지가 없을 때 자리표시자 */
.gallery_card .thumb_placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b9bec4;
	font-size: 2.25rem;
}
.gallery_card .caption {
	padding: 1.4rem 1.4rem 1.6rem;
}
.gallery_card .cate {
	display: inline-block;
	font-size: 0.8125rem;
	padding: 0.2rem 0.8rem;
	border: 1px solid var(--line-color, #e7e7e7);
	border-radius: 100px;
	color: #555;
	background: #f7f7f9;
}
.gallery_card .title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #222;
	line-height: 1.45;
	margin: 0;
}
.gallery_card:hover .title,
ul.gallery_card > li:hover .title {
	color: var(--main-color, #cd000b);
}
.gallery_card .excerpt {
	font-size: 0.875rem;
	color: #6c7075;
	line-height: 1.6;
	display: none !important;
}
.gallery_card .date {
	display: block;
	margin-top: 0.8rem;
	font-size: 0.8125rem;
	color: #888a9e;
}
/* 말줄임 유틸 — 템플릿이 ellipsis/ellipsis2 를 쓴다 */
.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ellipsis2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── 카드 스킨 (BBSS003) ─────────────────────────────────── */
.card_list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}
.card_list > li {
	border: 1px solid var(--line-color, #e7e7e7);
	border-radius: 0.6rem;
	padding: 2rem;
	background: #fff;
}

/* ── FAQ 스킨 (BBSS004) ──────────────────────────────────── */
.faq_list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	border-top: 2px solid var(--sub-tit-color, #000620);
}
.faq_list > li {
	border-bottom: 1px solid var(--line-color, #e7e7e7);
}
.faq_list .faq_q {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.6rem 2rem;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	color: #222;
}
.faq_list .faq_q::before {
	content: "Q";
	flex: 0 0 auto;
	color: var(--main-color, #cd000b);
	font-weight: 700;
}
.faq_list .faq_a {
	display: none;
	gap: 1rem;
	padding: 1.6rem 2rem;
	background: #fafafa;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: #444;
}
.faq_list > li.on .faq_a {
	display: flex;
}

/* ── 포트폴리오 스킨 (BBSS005) ───────────────────────────── */
.portfolio_list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.4rem 2rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

/* ── 글쓰기 폼 (bbs-form) ────────────────────────────────── */
.bbs_form {
	margin-top: 2rem;
	border-top: 2px solid var(--sub-tit-color, #000620);
}
.bbs_form .row {
	display: flex;
	border-bottom: 1px solid var(--line-color, #e7e7e7);
}
.bbs_form .row > label,
.bbs_form .row > .th {
	flex: 0 0 10rem;
	padding: 1.4rem 2rem;
	background: #fafafa;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #333;
}
.bbs_form .row > .td {
	flex: 1 1 auto;
	padding: 1.4rem 2rem;
}
.bbs_form input[type="text"],
.bbs_form input[type="password"],
.bbs_form select,
.bbs_form textarea {
	width: 100%;
	padding: 0.9rem 1.2rem;
	border: 1px solid var(--line-color, #e7e7e7);
	border-radius: 0.4rem;
	font-size: 0.9375rem;
}

/* ── 반응형 (격자 열 수) ─────────────────────────────────── */
@media (max-width: 1200px) {
	#gallery_wrap.tab_con, .gallery_wrap .tab_con, ul.gallery_card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	#gallery_wrap.tab_con, .gallery_wrap .tab_con, ul.gallery_card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card_list, .portfolio_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 모바일 ──────────────────────────────────────────────── */
@media (max-width: 768px) {
	#gallery_wrap.tab_con, .gallery_wrap .tab_con, ul.gallery_card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
	.card_list, .portfolio_list { grid-template-columns: 1fr; }
	.bbs_form .row { flex-direction: column; }
	.bbs_form .row > label, .bbs_form .row > .th { flex: 0 0 auto; padding: 1rem; }
	.bbs_form .row > .td { padding: 1rem; }
	.post_head, .post_body, .post_content { padding-left: 1rem; padding-right: 1rem; }
	.post_title { font-size: 1.1875rem; }
}

/* ============================================================================
 * 레거시 본문 서식 정규화 (결점분석 등 textopia EDITOR 이관 본문)
 *   textopia 편집기(HCI Poppy 폰트·pt단위·파란 굵은 소제목·MS Office 붙여넣기 잔재)가
 *   그대로 남아 KTDI 톤과 어긋나고 표가 넘쳤다. .post_content 안에서만 최소로 정규화한다.
 *   ⚠ 색/굵기는 의미(강조)일 수 있어 남기고, 폰트패밀리·단위·오버플로만 다스린다.
 * 추가: 2026-08-10 (결점분석 상세 디자인 정돈)
 * ==========================================================================*/

/* 편집기 잔재 폰트(HCI Poppy·굴림·바탕 등)를 테마 기본 폰트로 통일 */
.post_content [style*="HCI"],
.post_content [style*="font-family"],
.post_content font[face] {
	font-family: inherit !important;
}

/* pt 단위 대형 폰트(13pt 등)로 레이아웃이 들쭉날쭉 → 본문 기본 크기로 수렴.
   단 제목성 강조(파란 굵은 글씨)는 살짝 키워 위계는 유지 */
.post_content [style*="pt"] { font-size: 0.9375rem !important; line-height: 1.7 !important; }
.post_content b[style*="pt"], .post_content strong[style*="pt"],
.post_content [style*="bold"][style*="pt"] { font-size: 1rem !important; }

/* 표 — 레거시 고정폭/border 속성이 컨테이너를 넘던 것 방지 + KTDI 톤 */
.post_content table {
	max-width: 100% !important; width: auto !important;
	border-collapse: collapse; margin: 1.2rem 0; font-size: 0.9062rem;
}
.post_content table td, .post_content table th {
	border: 1px solid #dde1e6; padding: .7rem 1rem; vertical-align: middle;
	word-break: break-word;
}
.post_content table th { background: #f5f7fa; font-weight: 600; }
/* 표가 여전히 넓으면 가로 스크롤(잘림 방지) */
.post_content { overflow-x: auto; }

/* 이미지 — 원본 고정폭이 커도 컨테이너 안으로 */
.post_content img { max-width: 100% !important; height: auto !important; }

/* MS Office 붙여넣기 여백 잔재(mso-*) 정리 */
.post_content p { margin: .4rem 0; }

/* ============================================================================
 * [추가 2026-08-24] 카이누리 공용 게시판 템플릿 전용 클래스 보완
 *
 * 배경 : front/bbs/** 공용 템플릿은 `simple` 테마 기준 클래스로 작성돼 있고
 *        그 CSS 는 simple/css/bbs/*.css 에 들어 있다. KTDI 테마의 css/bbs/*.css 는
 *        이 파일을 @import 하는 스텁이라, 여기에 정의가 없는 클래스는 **무스타일로 노출**됐다.
 *        (댓글·추천/반대·모달·글쓰기폼·카테고리탭·FAQ·카드·포트폴리오 전부)
 *
 * 방침 : simple 의 구조만 가져오고 색·타이포는 **KTDI 시안 팔레트**로 치환.
 *        rem 기준은 시안과 동일한 1rem = 16px (이 파일 위쪽도 같은 기준으로 맞춰 둠).
 * ==========================================================================*/

/* ── 탭 (카테고리 탭 / 목록 스킨 탭) ─────────────────────────
   마크업: <ul class="nav_tabs nav_tabsSt4 bbs_cate_tab"><li><a class="on" data-cate="">#All</a>…
   활성 클래스는 .on (list.js 가 토글). */
.nav_tabs {
	--tab-h: 48px;
	width: 100%;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}
.nav_tabs.nav_tabs_sm { --tab-h: 36px; }
.nav_tabs > li { min-width: 0; }
.nav_tabs > li > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #6c7075;
	font-size: 0.95rem;
}

/* nav_tabsSt3 — 알약형 세그먼트 */
.nav_tabsSt3 {
	width: auto;
	max-width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px;
	background: var(--bg-sub-light, #eceef6);
	border-radius: 999px;
}
.nav_tabsSt3 > li { display: inline-flex; }
.nav_tabsSt3 li a {
	height: calc(var(--tab-h) - 12px);
	padding: 0 1.25rem;
	border-radius: 999px;
	background: transparent;
	font-weight: 500;
	transition: background-color 0.2s, color 0.2s;
}
.nav_tabsSt3 li a:hover { color: var(--tit-color, #131720); }
.nav_tabsSt3 li a.on,
.nav_tabsSt3 li a.active {
	background: var(--main-color, #344dcf);
	color: #fff;
	font-weight: 600;
}
.nav_tabsSt3.nav_tabs_center {
	display: flex;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/* nav_tabsSt4 — 균등분할 격자탭 */
.nav_tabsSt4 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	border-top: 1px solid var(--line-color, #dde2ea);
	border-left: 1px solid var(--line-color, #dde2ea);
}
.nav_tabsSt4 li a {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: var(--tab-h);
	padding: 0.6rem 0.75rem;
	text-align: center;
	overflow-wrap: anywhere;
	background: var(--grayLightest, #f5f6f9);
	border-right: 1px solid var(--line-color, #dde2ea);
	border-bottom: 1px solid var(--line-color, #dde2ea);
	font-size: 0.95rem;
	color: #555;
}
.nav_tabsSt4 li a:hover { color: var(--main-color, #344dcf); }
.nav_tabsSt4 li a.on,
.nav_tabsSt4 li a.active {
	background: #fff;
	color: var(--main-color, #344dcf);
	font-weight: 600;
	border-bottom-color: #fff;
	box-shadow: inset 0 2px 0 var(--main-color, #344dcf);
}

/* 탭 패널 — 템플릿은 항상 .on 을 함께 준다 */
.tab_con { display: none; }
.tab_con.on { display: block; }

/* ── 상세: 메타 · 본문 없음 ──────────────────────────────── */
.post_head .meta em { font-style: normal; color: #333; }
.post_empty {
	padding: 4rem 0;
	text-align: center;
	color: #888a9e;
}

/* ── 상세: 추천 / 반대 ───────────────────────────────────── */
.post_vote {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
	margin: 2rem 0;
}
.btn_vote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 150px;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--line-color, #dde2ea);
	border-radius: 0.4rem;
	background: #fff;
	color: #555;
	font-family: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	transition: all 0.15s ease;
}
.btn_vote em { font-style: normal; font-weight: 700; }
.btn_vote .material-symbols-outlined { font-size: 1.15rem; }
.btn_vote:hover:not(:disabled).up { border-color: var(--main-color, #344dcf); color: var(--main-color, #344dcf); }
.btn_vote:hover:not(:disabled).down { border-color: var(--red, #f11100); color: var(--red, #f11100); }
.btn_vote.up.on { background: var(--main-color, #344dcf); border-color: var(--main-color, #344dcf); color: #fff; }
.btn_vote.down.on { background: var(--red, #f11100); border-color: var(--red, #f11100); color: #fff; }
.btn_vote:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 상세: 댓글 ──────────────────────────────────────────── */
.post_replies {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line-color, #dde2ea);
}
.post_replies > h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: #222;
	margin: 0 0 1.2rem;
}
.post_replies > h3 span { color: var(--main-color, #344dcf); margin-left: 0.3rem; }
.reply_list { list-style: none; margin: 0; padding: 0; }
.reply_item { padding: 1.1rem 0; border-bottom: 1px solid var(--line-color-light, #eceef6); }
.reply_item:last-child { border-bottom: 0; }
.reply_meta {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.9rem;
}
.reply_meta .writer { font-weight: 600; color: #222; }
.reply_subline {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.15rem 0 0.5rem;
}
.reply_subline .date { color: #888a9e; font-size: 0.8rem; }
.reply_content { color: #444; line-height: 1.7; word-break: break-word; }
.reply_empty { padding: 2rem 0; text-align: center; color: #888a9e; }
.reply_actions { display: flex; gap: 0.2rem; margin-top: 0.6rem; }

/* 댓글 별점 표시 (star_use_yn=Y) */
.reply_star { display: inline-flex; align-items: center; gap: 0.05rem; }
.reply_star .star { font-size: 1.05rem; line-height: 1; }
.reply_star .star.on { color: #f5a524; font-variation-settings: "FILL" 1; }
.reply_star .star.off { color: #d5d9e0; }

/* 댓글 작성 폼 — 카드형 */
.reply_form {
	display: flex;
	flex-direction: column;
	margin-top: 2rem;
	padding: 1.4rem;
	background: var(--grayLightest, #f5f6f9);
	border: 1px solid var(--line-color, #dde2ea);
	border-radius: 0.6rem;
}
.reply_form_title {
	font-size: 1rem;
	font-weight: 700;
	color: #222;
	margin: 0 0 1rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--line-color, #dde2ea);
}
.reply_form .guest_inputs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.6rem;
}
.reply_form .guest_inputs .guest_label {
	flex: 1 1 100%;
	font-size: 0.8rem;
	font-weight: 600;
	color: #6c7075;
}
.reply_form .guest_inputs input { flex: 0 1 180px; width: auto; }
.reply_form input,
.reply_form textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--line-color, #dde2ea);
	border-radius: 0.4rem;
	background: #fff;
	color: #333;
	font-family: inherit;
	font-size: 0.95rem;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.reply_form input::placeholder,
.reply_form textarea::placeholder { color: #a5acb8; }
.reply_form input:focus,
.reply_form textarea:focus {
	outline: none;
	border-color: var(--main-color, #344dcf);
	box-shadow: 0 0 0 3px rgba(52, 77, 207, 0.14);
}
.reply_form textarea { resize: vertical; min-height: 90px; line-height: 1.6; margin-bottom: 0.8rem; }
.reply_form > button[type="submit"] { align-self: flex-end; }
.reply_star_input {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem;
	margin: 0 0 1rem;
	align-self: flex-start;
}
.reply_star_input .label {
	flex: 1 1 100%;
	font-size: 0.8rem;
	font-weight: 600;
	color: #6c7075;
	margin-bottom: 0.2rem;
}
.btn_star {
	padding: 0.05rem;
	border: 0;
	background: none;
	color: #d5d9e0;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.12s, transform 0.12s;
}
.btn_star:hover { transform: scale(1.12); }
.btn_star:hover,
.btn_star.on { color: #f5a524; font-variation-settings: "FILL" 1; }
.reply_disabled { margin-top: 1.5rem; text-align: center; color: #888a9e; font-size: 0.9rem; }

/* 캡차 새로고침 버튼 (_spam.html) */
.btn_st1 {
	padding: 0 0.7rem;
	height: 45px;
	border: 1px solid var(--line-color, #dde2ea);
	border-radius: 0.4rem;
	background: #fff;
	color: #555;
	cursor: pointer;
}
.btn_st1:hover { background: var(--bg-sub-light, #eceef6); }

/* ── 모달 (비회원 비번 / 신고) ───────────────────────────── */
.bbs_modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.5);
}
.bbs_modal .modal_inner {
	width: 100%;
	max-width: 460px;
	padding: 2rem;
	background: #fff;
	border-radius: 0.6rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.bbs_modal h3 { margin: 0 0 0.8rem; font-size: 1.15rem; font-weight: 700; color: #222; }
.bbs_modal p { margin: 0 0 1rem; font-size: 0.95rem; color: #666; }
.bbs_modal input[type="password"],
.bbs_modal select,
.bbs_modal textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	margin-bottom: 0.6rem;
	border: 1px solid var(--line-color, #dde2ea);
	border-radius: 0.4rem;
	font-family: inherit;
	font-size: 0.95rem;
	box-sizing: border-box;
}
.bbs_modal textarea { resize: vertical; min-height: 80px; }
.modal_actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	margin-top: 1rem;
}

/* ── 글쓰기 폼 (write.html — table_st2 기반) ─────────────── */
.bbs_write_mode {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	font-size: 1.3rem;
	font-weight: 700;
	color: #222;
}
.bbs_write_mode small { font-size: 0.88rem; font-weight: 400; color: #99a0ac; }
.bbs_write_mode small strong { font-weight: 600; color: #555; }
.bbs_write_form .table_st2 th,
.bbs_write_form .table_st2 td { vertical-align: middle; }
.form_required { color: var(--red, #f11100); margin-left: 2px; font-style: normal; }
.form_input { min-width: 220px; max-width: 100%; }
.form_select { min-width: 220px; max-width: 100%; }
.form_period { display: flex; align-items: center; gap: 0.5rem; }
.form_period .form_input { flex: 1; min-width: 0; }
.form_tilde { flex: none; color: #99a0ac; }
.form_textarea {
	width: 100%;
	min-height: 260px;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--line-color, #dde2ea);
	border-radius: 0.4rem;
	background: #fff;
	color: #333;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.7;
	resize: vertical;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.form_textarea::placeholder { color: #a5acb8; }
.form_textarea:focus {
	outline: none;
	border-color: var(--main-color, #344dcf);
	box-shadow: 0 0 0 3px rgba(52, 77, 207, 0.14);
}
.form_check_label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	color: #333;
	cursor: pointer;
}
.form_check_label input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--main-color, #344dcf); }
.form_radio_group { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.form_actions {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-color-light, #eceef6);
}
/* Dropzone — dropzone.min.css 가 뒤에 로드되므로 두 클래스로 특이도를 올려야 이긴다 */
.form_dropzone.dropzone {
	min-height: 150px;
	padding: 1.5rem;
	border: 2px dashed var(--line-color-dark, #c8cfdd);
	border-radius: 0.6rem;
	background: var(--grayLightest, #f5f6f9);
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}
.form_dropzone.dropzone:hover,
.form_dropzone.dropzone.dz-drag-hover {
	border-color: var(--main-color, #344dcf);
	background: #f4f6ff;
}
.form_dropzone.dropzone .dz-message {
	margin: 1rem 0;
	text-align: center;
	color: #8a93a6;
	font-size: 0.92rem;
}
.form_dropzone.dropzone .dz-message::before {
	content: "upload_file";
	font-family: "Material Symbols Outlined";
	display: block;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--line-color-dark, #c8cfdd);
	margin-bottom: 0.5rem;
}
/* 첨부 미리보기 — 기본 정사각 박스 대신 가로 파일 칩 */
.form_dropzone.dropzone .dz-preview {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 0;
	margin: 0.4rem 0 0;
	padding: 0.35rem 0.8rem;
	background: #fff;
	border: 1px solid var(--line-color, #dde2ea);
	border-radius: 0.4rem;
	box-sizing: border-box;
}
.form_dropzone.dropzone .dz-preview .dz-image { display: none; }
.form_dropzone.dropzone .dz-preview .dz-details {
	position: static;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1;
	min-width: 0;
	padding: 0;
	opacity: 1;
	background: transparent;
}
.form_dropzone.dropzone .dz-preview .dz-filename,
.form_dropzone.dropzone .dz-preview .dz-filename:hover {
	order: 1;
	flex: 1;
	min-width: 0;
	max-width: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: left;
	font-size: 0.88rem;
	color: #333;
}
.form_dropzone.dropzone .dz-preview .dz-details .dz-filename span { border: 0; background: transparent; padding: 0; }
.form_dropzone.dropzone .dz-preview .dz-details .dz-size {
	order: 2;
	flex: none;
	margin: 0;
	white-space: nowrap;
	font-size: 0.78rem;
	color: #99a0ac;
}
.form_dropzone.dropzone .dz-preview .dz-size span { background: transparent; padding: 0; }
.form_dropzone.dropzone .dz-preview .dz-progress,
.form_dropzone.dropzone .dz-preview .dz-success-mark,
.form_dropzone.dropzone .dz-preview .dz-error-mark { display: none; }
.form_dropzone.dropzone .dz-preview .dz-remove {
	position: static;
	margin: 0 0 0 auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 0.25rem;
	border: 0;
	border-radius: 0.25rem;
	background: transparent;
	color: #888;
	text-decoration: none;
	cursor: pointer;
}
.form_dropzone.dropzone .dz-preview .dz-remove:hover {
	background: var(--bg-sub-light, #eceef6);
	color: #333;
	text-decoration: none;
}

/* ── FAQ 스킨 (BBSS004) — 아코디언 ───────────────────────
   마크업: .faq_wrap > #faq_wrap.tab_con > .faq_item > (.faq_q + .faq_a) */
#faq_wrap.tab_con { display: flex; flex-direction: column; gap: 0.7rem; }
.faq_wrap .no_data { border: 0; }
.faq_item {
	border: 1px solid var(--line-color, #dde2ea);
	border-radius: 0.5rem;
	background: #fff;
	overflow: hidden;
}
.faq_item:has(.faq_q[aria-expanded="true"]) { border-color: var(--main-color, #344dcf); }
.faq_wrap .faq_q {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1.2rem 1.4rem;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}
.faq_q .q_mark {
	flex-shrink: 0;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--main-color, #344dcf);
}
.faq_q .badges { display: inline-flex; flex-shrink: 0; gap: 0.3rem; }
.faq_q .badge {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
}
.faq_q .badge.cate { color: var(--main-color, #344dcf); background: var(--bg-sub-light, #eceef6); }
.faq_q .badge.notice { color: var(--red, #f11100); background: #fff0ef; }
.faq_q .title { flex: 1; font-size: 1rem; font-weight: 600; color: #333; line-height: 1.45; }
/* +/− 토글 — material 글리프를 숨기고 CSS 라인으로 그린다 */
.faq_q .arrow {
	position: relative;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	font-size: 0 !important;
	color: transparent;
}
.faq_q .arrow::before,
.faq_q .arrow::after { content: ""; position: absolute; background: #666; transition: opacity 0.2s; }
.faq_q .arrow::before { top: 50%; left: 2px; right: 2px; height: 2px; transform: translateY(-50%); }
.faq_q .arrow::after { left: 50%; top: 2px; bottom: 2px; width: 2px; transform: translateX(-50%); }
.faq_q[aria-expanded="true"] .arrow::after { opacity: 0; }
.faq_wrap .faq_a {
	display: flex;
	gap: 0.8rem;
	padding: 1.2rem 1.4rem 1.4rem;
	background: var(--grayLightest, #f5f6f9);
	border-top: 1px solid var(--line-color-light, #eceef6);
}
.faq_wrap .faq_a[hidden] { display: none; }
.faq_a .a_mark {
	position: relative;
	flex-shrink: 0;
	padding-left: 1.3rem;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.5;
	color: var(--sub-tit-color, #353e52);
}
.faq_a .a_mark::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 0.75rem;
	height: 0.75rem;
	border-left: 1.5px solid var(--line-color-dark, #c8cfdd);
	border-bottom: 1.5px solid var(--line-color-dark, #c8cfdd);
}
.faq_a .answer { flex: 1; min-width: 0; line-height: 1.7; color: #444; }
.faq_a .answer .content { font-size: 0.95rem; }
.faq_a .answer .content p { margin: 0 0 0.6rem; }
.faq_a .answer .content img { max-width: 100%; height: auto; }
.faq_a .meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.2rem;
	font-size: 0.85rem;
	color: #99a0ac;
}
.faq_a .meta .detail { margin-left: auto; }
.faq_paging { display: flex; justify-content: center; gap: 0.3rem; margin-top: 2rem; }
.home_btn { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ── 카드 스킨 (BBSS003) — 가로형 카드 ───────────────────── */
.card_item {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 1.8rem 0;
	border-bottom: 1px solid var(--line-color, #dde2ea);
	color: inherit;
}
.card_item:first-child { padding-top: 0; }
.card_item .thumb {
	flex: 0 0 300px;
	width: 300px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 0.6rem;
	background: #f4f6f8;
}
.card_item .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.card_item:hover .thumb img { transform: scale(1.06); }
.card_item .body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.card_item .body .date { font-size: 0.85rem; color: #99a0ac; margin-bottom: 0.7rem; }
.card_item .title { font-size: 1.2rem; font-weight: 700; color: #222; margin: 0 0 0.6rem; line-height: 1.4; }
.card_item:hover .title { color: var(--main-color, #344dcf); }
.card_item .excerpt { font-size: 0.92rem; color: #6c7075; line-height: 1.6; margin: 0 0 1.2rem; }
.card_item .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* ── 포트폴리오 스킨 (BBSS005) ─────────────────────────────
   simple 은 다크 시네마틱이지만 KTDI 톤(밝은 배경 + 메인블루)으로 맞춘다. */
.portfolio_view { background: #fff; }
.port_main {
	position: relative;
	min-height: 42vh;
	display: flex;
	align-items: flex-end;
	padding: 3rem clamp(1.5rem, 6vw, 6rem) 2.5rem;
	background-color: var(--sub-tit-color, #353e52);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
}
.port_main::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(19, 23, 32, 0.9) 0%, rgba(19, 23, 32, 0.45) 55%, rgba(19, 23, 32, 0.1) 100%);
	pointer-events: none;
}
.port_main .tit {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 900px;
}
.port_main .tit h3 { order: -1; margin-bottom: 1rem; }
.port_main .tit .tag {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 0.2rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
}
.port_main .tit h2 { font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.15; }
.port_nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6rem 2rem;
	padding: 1rem 1.5rem;
	background: var(--grayLightest, #f5f6f9);
	border-bottom: 1px solid var(--line-color, #dde2ea);
	font-size: 0.85rem;
}
.port_nav a,
.port_nav button,
.port_nav span.disabled {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.15rem;
	border: 0;
	background: transparent;
	color: #555;
	font: inherit;
	cursor: pointer;
}
.port_nav a:hover,
.port_nav button:hover { color: var(--main-color, #344dcf); }
.port_nav span.disabled { opacity: 0.35; cursor: default; }
.port_nav .list {
	padding: 0.4rem;
	border: 1px solid var(--line-color, #dde2ea);
	border-radius: 50%;
	background: #fff;
}
.port_nav .edit { color: var(--main-color, #344dcf); }
.port_nav .delete { color: var(--red, #f11100); }
.port_nav .answer { color: #b07d00; }
.port_txt { padding: 3rem 0; }
.port_txt h3 {
	margin: 0 0 1.4rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--main-color, #344dcf);
}
.port_txt .info {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: auto auto;
	justify-content: start;
	gap: 0.4rem 3rem;
	padding: 1.4rem 0;
	border-top: 1px solid var(--line-color, #dde2ea);
	border-bottom: 1px solid var(--line-color, #dde2ea);
}
.port_txt .info span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #99a0ac; }
.port_txt .info p { margin: 0; font-size: 1rem; font-weight: 600; color: #222; }
.port_txt .btn_st2 {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: 1.8rem;
	padding: 0.9rem 1.4rem;
	border-radius: 0.5rem;
	background: var(--main-color, #344dcf);
	color: #fff;
	transition: transform 0.2s, box-shadow 0.2s;
}
.port_txt .btn_st2:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(52, 77, 207, 0.32); }
.port_txt .btn_st2 .tit { font-weight: 700; line-height: 1.2; }
.port_body { padding: 0 0 3.5rem; }
.port_content { font-size: 1rem; line-height: 1.8; color: #333; }
.port_content img { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; border-radius: 0.5rem; }
.port_content p { margin: 1rem 0; }
.port_empty {
	padding: 3.5rem 1rem;
	text-align: center;
	color: #888a9e;
	border: 1px dashed var(--line-color-dark, #c8cfdd);
	border-radius: 0.6rem;
}
.port_files {
	padding: 2rem clamp(1.5rem, 6vw, 6rem);
	background: var(--grayLightest, #f5f6f9);
	border-top: 1px solid var(--line-color, #dde2ea);
}
.port_files .inner { max-width: 900px; margin: 0 auto; }
.port_files h3 { margin: 0 0 0.8rem; font-size: 0.95rem; font-weight: 700; color: #333; }
.port_files h3 span { color: var(--main-color, #344dcf); }
.port_files ul { list-style: none; margin: 0; padding: 0; }
.port_files li { margin-bottom: 0.4rem; font-size: 0.95rem; }
.port_files li a { display: inline-flex; align-items: center; gap: 0.3rem; color: #333; }
.port_files li a:hover { color: var(--main-color, #344dcf); }
.port_files li .size { margin-left: 0.4rem; font-size: 0.85rem; color: #99a0ac; }
.port_vote {
	padding: 2.5rem clamp(1.5rem, 6vw, 6rem);
	border-top: 1px solid var(--line-color, #dde2ea);
}
.port_vote .inner { display: flex; justify-content: center; gap: 0.8rem; max-width: 600px; margin: 0 auto; }
.port_replies {
	padding: 3rem clamp(1.5rem, 6vw, 6rem);
	background: var(--grayLightest, #f5f6f9);
	border-top: 1px solid var(--line-color, #dde2ea);
}
.reply_inner { max-width: 900px; margin: 0 auto; }
.reply_inner h3 { margin: 0 0 1.2rem; font-size: 1.05rem; font-weight: 700; color: #222; }
.reply_inner h3 span { color: var(--main-color, #344dcf); margin-left: 0.3rem; }
.btn_save_reply {
	align-self: flex-end;
	padding: 0.65rem 1.5rem;
	border: 0;
	border-radius: 0.4rem;
	background: var(--main-color, #344dcf);
	color: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}
.btn_save_reply:hover { background: var(--main-color-dark, #11258b); }
/* 포트폴리오 목록 카드 배지·메타 */
.card_meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.4rem 0 0.7rem; font-size: 0.78rem; }
.card_meta .meta_item { display: inline-flex; align-items: center; gap: 0.25rem; }
.card_meta em { font-style: normal; }
.badge_file,
.badge_secret {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 1rem;
}

/* ── 반응형 (위 추가분) ──────────────────────────────────── */
@media (max-width: 900px) {
	.card_item { flex-direction: column; align-items: stretch; gap: 1rem; }
	.card_item .thumb { flex: none; width: 100%; }
	.port_txt .info { grid-auto-flow: row; grid-template-rows: none; gap: 0.2rem 0; }
}
@media (max-width: 768px) {
	.post_vote { flex-direction: column; }
	.btn_vote { min-width: 0; width: 100%; }
	.reply_form { padding: 1.1rem; }
	.reply_form .guest_inputs input { flex: 1 1 100%; }
	.reply_form > button[type="submit"] { align-self: stretch; width: 100%; }
	.form_period { flex-direction: column; align-items: stretch; }
	.form_period .form_tilde { display: none; }
	.form_input,
	.form_select { min-width: 0; width: 100%; }
	.port_main { min-height: 32vh; padding: 2.5rem 1.2rem 2rem; }
}

/* ── 포트폴리오 목록 격자 (BBSS005 list.html) ────────────────
   마크업: #sc_portfolio > #portf_wrap.tab_con > a > (배지 + img|.thumb_placeholder + .txt)
   .txt 는 카드 하단 그라데이션 캡션(.tag / h4 / .card_meta / .more). */
#portf_wrap.tab_con {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem 1.6rem;
}
#portf_wrap.tab_con > a {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 0.8rem;
	background: #f4f6f8;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
#portf_wrap.tab_con > a:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.2);
}
#portf_wrap.tab_con > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
#portf_wrap.tab_con > a:hover > img { transform: scale(1.06); }
#portf_wrap.tab_con > a .thumb_placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b9bec4;
	font-size: 2.25rem;
}
#portf_wrap.tab_con > a .badge_notice {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}
#portf_wrap.tab_con > a .badge_secret { position: absolute; top: 8px; right: 8px; z-index: 2; }
#portf_wrap.tab_con > a .badge_file { position: absolute; top: 8px; right: 40px; z-index: 2; }
/* 캡션 — 항상 보이는 하단 그라데이션 */
#portf_wrap.tab_con > a .txt {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 2.4rem 1.2rem 1.2rem;
	color: #fff;
	text-align: left;
	background: linear-gradient(to top, rgba(19, 23, 32, 0.9) 0%, rgba(19, 23, 32, 0.45) 55%, rgba(19, 23, 32, 0) 100%);
}
#portf_wrap.tab_con > a .txt .tag {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin-bottom: 0.5rem;
	padding: 0.2rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
}
#portf_wrap.tab_con > a .txt h4 {
	margin: 0 0 0.3rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#portf_wrap.tab_con > a .txt .card_meta { color: rgba(255, 255, 255, 0.75); }
#portf_wrap.tab_con > a .txt .more {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	opacity: 0.9;
	transition: gap 0.25s ease, opacity 0.25s ease;
}
#portf_wrap.tab_con > a:hover .txt .more { opacity: 1; gap: 0.55rem; }

@media (max-width: 1600px) {
	#portf_wrap.tab_con { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
	#portf_wrap.tab_con { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
}
@media (max-width: 768px) {
	#portf_wrap.tab_con { grid-template-columns: 1fr; gap: 1.2rem; }
	#portf_wrap.tab_con > a { aspect-ratio: 4 / 3; }
}


.stats_desc{
	margin-bottom: 2rem;
}

/* ============================================================================
   INFO-TEX(bbs 36) 목록 — 시안 정합 (3열 + 3:4 세로 표지)
   출처: sian/ktdi_26/contents/info/info_tex.php · css/web/sub.css 4376~4500
   지시서: 00.md/01.CC용_MD/26.INFO-TEX_목록_시안정합_3열카드.md

   🔴 왜 스코프가 필요한가 — BBSS002(갤러리) 스킨은 **KTDI미디어(bbs 35)와 공유**한다.
      KTDI미디어는 유튜브 썸네일(가로 16:9)이라 여기 규칙을 전역으로 걸면 영상이 세로로
      찌그러진다. 그래서 `_bbs-layout.html` 이 붙이는 `.sub_content.bbs_36` 안에서만 적용한다.
      (제품 스킨 front/bbs/BBSS002/list.html 은 수정하지 않는다 — 업그레이드 대장 불변)

   클래스 매핑 (시안 → 카이누리):
      .brochure_list.info_tex  →  #gallery_wrap.tab_con / .gallery_wrap .tab_con
      .brochure_card           →  a.gallery_card
      .bro_thumb.img_box       →  .gallery_card .thumb
      .bro_cont                →  .gallery_card .caption
      .bro_tit                 →  .gallery_card .title
      .date                    →  .gallery_card .date   (동일)
   ========================================================================== */

/* 격자 — 4열 → 시안 3열 */
.sub_content.bbs_36 #gallery_wrap.tab_con,
.sub_content.bbs_36 .gallery_wrap .tab_con {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin-top: 1rem;
}

/* 카드 — 시안 radius 12px (기본 0.6rem) */
.sub_content.bbs_36 .gallery_card {
	border-radius: 12px;
}
.sub_content.bbs_36 .gallery_card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
}

/* 🔴 표지 썸네일 — 4:3 가로 → 시안 3:4 세로(A4 표지).
      object-position:top 이라야 제호·Vol 표기가 잘리지 않는다. */
.sub_content.bbs_36 .gallery_card .thumb {
	aspect-ratio: 3 / 4;
	background: #f0f1f4;
	border-bottom: 1px solid var(--line-color, #e7e7e7);
}
.sub_content.bbs_36 .gallery_card .thumb img {
	object-position: top;
	transition: 0.3s all;
}
.sub_content.bbs_36 .gallery_card:hover .thumb img {
	transform: scale(1.04);
}

/* 캡션 — 시안 padding */
.sub_content.bbs_36 .gallery_card .caption {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.6rem 1.8rem 1.8rem;
}

/* 🔴 제목 — 기본 .ellipsis(1줄 말줄임)를 2줄 노출로 바꾼다.
      템플릿이 <h4 class="title ellipsis"> 를 내므로 .ellipsis 의 white-space:nowrap 를 풀어야 한다. */
.sub_content.bbs_36 .gallery_card .title {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--sub-tit-color, #222);
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 카드가 flex 라 날짜를 하단에 붙인다(제목 1줄/2줄이 섞여도 날짜 줄이 맞는다) */
.sub_content.bbs_36 .gallery_card .date {
	margin-top: auto;
	padding-top: 0.8rem;
}

/* 반응형 — 시안 sub.css 의 brochure 블록과 동일한 브레이크포인트 */
@media (max-width: 1200px) {
	.sub_content.bbs_36 #gallery_wrap.tab_con,
	.sub_content.bbs_36 .gallery_wrap .tab_con { gap: 1.5rem; }
	.sub_content.bbs_36 .gallery_card .caption { padding: 1.2rem 1.4rem 1.4rem; }
	.sub_content.bbs_36 .gallery_card .title   { font-size: 1.25rem; }
}
@media (max-width: 900px) {
	/* 3열 → 2열 */
	.sub_content.bbs_36 #gallery_wrap.tab_con,
	.sub_content.bbs_36 .gallery_wrap .tab_con {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.2rem;
	}
}
@media (max-width: 560px) {
	/* 2열 → 1열 */
	.sub_content.bbs_36 #gallery_wrap.tab_con,
	.sub_content.bbs_36 .gallery_wrap .tab_con {
		grid-template-columns: 1fr;
	}
}


/* 260916 뷰페이지 이미지 크기 조절 */
.post_content img{
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* ── 게시판 콘텐츠 상단 — 태그·제목 블록 (지시 20, 2026-09-21) ─────────
   🔴 여백이 3중으로 겹쳐 제목과 검색 패널 사이가 **약 123px** 벌어졌다(발주처 지적).
        .tit_st1.top        margin-bottom 2.2rem
      + .wFix.content_wrap  padding-top   clamp(1.25rem, 6vh, 4rem)   ← 최대 4rem
      + .search_wrap        margin-top    1.5rem
      태그·제목 블록이 `layout:fragment="content"` **바깥**(_bbs-layout)에 있어서 생긴 문제다.
      스킨이 채우는 fragment 안으로는 레이아웃이 끼어들 수 없어 이 구조가 불가피하다.
   → 상단 여백을 **제목 블록이 맡고**(원래 content_wrap 이 갖던 그 값), 본문 쪽 padding-top 은 0 으로.
      `.top` 클래스도 뺐다(2.2rem). 결과적으로 시안처럼 `.search_wrap` 의 margin-top 1.5rem 만 남는다.
   ⚠ padding-bottom 은 건드리지 않는다 — 목록·페이징 아래 여백은 그대로 필요하다. */
.sub_content .bbs_title_head {
	padding: clamp(1.25rem, 6vh, 4rem) 0 0;
}
.sub_content .wFix.content_wrap.bbs_content {
	padding-top: 0;
	padding: clamp(1.25rem, 4vh, 2rem) 0;
}


/* 260921 뷰페이지 디자인 수정 */
.post_head {
      margin-top: 2rem;
}
.post_body > .post_content {
      padding: 0;
}
.post_head {
      padding: 1.4rem 1rem;
}
.post_title {
      display: block;
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--sub-tit-color, #353e52);
      line-height: 1.4;
      margin: 0;
}
.post_title .cate {
      display: inline-block;
      font-size: 0.9rem;
      font-weight: 400;
      color: var(--main-color, #344DCF);
      background: #eef1f8;
      border: 0;
      border-radius: 4px;
      padding: 0.4rem 0.6rem;
      line-height: 1;
      margin-bottom: 1rem;
}
.post_head .meta {
      align-items: center;
      gap: 1rem;
      margin-top: 1rem;
      font-size: 1rem;
      color: #999;
}
.post_head .meta > span {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      line-height: 1;
} 
.post_head .meta em { color: inherit; }
.post_head .meta .material-symbols-outlined { font-size: 1.2rem; line-height: 1; }

/* 시안 .view_body 는 2.5rem 2rem (앞서 넣은 .post_content{padding:0} 과 한 세트) */
.post_body {
      padding: 2.5rem 2rem;
}
/* ── 상세 헤더 반응형 — 시안 sub.css:2365 / 2388 / 2452 이식 (2026-09-21) ────
   🔴 위 데스크탑 블록이 파일 맨 끝이라, 585줄 `@media (max-width:768px)` 를
      뒤에서 덮어버린다. 그래서 반응형 값을 여기 다시 선언해야 한다.
   ※ 900px 이하 좌우 패딩 0 은 의도된 값이다 — 부모 .wFix 가 common.css:266 에서
      `padding-left/right: 2rem !important` 를 이미 주고 있어 겹치면 두 번 먹는다.
   ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1200px) {
	.post_head { margin-top: 1rem; padding: 1.2rem; }
	.post_title { font-size: 1.4rem; }
	.post_title .cate { margin-bottom: 0.6rem; }
	.post_head .meta { margin-top: 0.6rem; }
	.post_body { padding: 1.2rem; }
}
@media screen and (max-width: 900px) {
	.post_head { margin-top: 1rem; padding: 1rem 0; }
	.post_title { font-size: 1.4rem; }
	.post_title .cate { font-size: 0.8rem; padding: 0.25rem 0.6rem; }
	.post_head .meta { gap: 1rem; margin-top: 1rem; }
	.post_head .meta > span { font-size: 0.9rem; }
	.post_body { padding: 1rem 0; font-size: 0.9rem; }
}
@media screen and (max-width: 500px) {
	.post_title { font-size: 1.2rem; }
}
  

/* ── 중첩 wFix 무력화 (2026-09-29) ──────────────────────────────────────
   🔴 레이아웃(_bbs-layout)이 이미 `.wFix.content_wrap.bbs_content` 로 감싸는데,
      갤러리 스킨(KTDI미디어 등)이 안쪽에 `.wFix` 를 한 번 더 붙인다.
      common.css 의 `.wFix { padding-left/right: 3rem(≤1750) · 2rem(≤900) !important }` 가
      두 번 먹어 반응형에서 본문이 안쪽으로 밀린다. (BBSS001 은 템플릿에서 뺐다 — 지시 21)
   → 템플릿(공용 front/bbs/**)은 두고, 테마 CSS 에서 안쪽 것만 여백·폭을 끈다. 목록·상세 공통. */
.bbs_content .wFix {
	max-width: none;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
 

/* ── 갤러리 1열 전환 — 전 갤러리 공통 (2026-09-29) ─────────────────────────
   🔴 560px 1열 규칙이 `.sub_content.bbs_36`(홍보물) 안에만 있어서 KTDI미디어(bbs_35)는 끝까지 2열이었다.
      홍보물 블록은 표지(3:4) 스타일 때문에 bbs_36 으로 가뒀는데, 열 개수까지 같이 갇힌 것.
   → 열 개수만 공통으로 뺀다. 분기점은 홍보물과 같은 560px (두 게시판이 같은 폭에서 같이 바뀐다). */
@media (max-width: 560px) {
	#gallery_wrap.tab_con,
	.gallery_wrap .tab_con,
	ul.gallery_card {
		grid-template-columns: 1fr;
	}
}