@charset "utf-8";

/*
 * Portfolio-Board — Premium Dark Theme
 * 언더솔루션 포트폴리오 전용 스킨
 */

/* ════════════════════════════════════════════════════
   0. CSS 변수
   ════════════════════════════════════════════════════ */
:root {
	/* 배경 */
	--pf-bg-card    : linear-gradient(160deg, #181727 0%, #1d1c34 60%, #141323 100%);
	--pf-bg-deep    : #0f0e1a;
	--pf-bg-row     : #1e1d38;
	--pf-bg-glass   : rgba(255, 255, 255, 0.02);

	/* 테두리 */
	--pf-border     : rgba(97, 93, 250, 0.18);
	--pf-border-glow: rgba(97, 93, 250, 0.40);

	/* 텍스트 */
	--pf-text       : rgba(210, 208, 255, 0.85);
	--pf-text-bright: #ffffff;
	--pf-text-muted : rgba(165, 162, 240, 0.50);

	/* 포인트 */
	--pf-primary    : #615dfa;
	--pf-primary-dk : #483fd0;
	--pf-primary-bg : rgba(97, 93, 250, 0.12);
	--pf-primary-bd : rgba(97, 93, 250, 0.28);
	--pf-focus      : rgba(97, 93, 250, 0.40);

	/* 골드 액센트 */
	--pf-gold       : #f0c040;
	--pf-gold-dk    : #c9a030;

	/* 그라데이션 */
	--pf-grad-primary: linear-gradient(135deg, #615dfa 0%, #8b5cf6 100%);
	--pf-grad-gold   : linear-gradient(135deg, #f0c040 0%, #e8953a 100%);
}

/* ════════════════════════════════════════════════════
   1. 게시판 래퍼
   ════════════════════════════════════════════════════ */
#bo_list_wrap {
	background: var(--pf-bg-card) !important;
	border: 1px solid var(--pf-border);
	border-radius: 16px;
	box-shadow: 0 0 0 1px rgba(97,93,250,.10), 0 12px 40px rgba(0,0,0,0.60);
	padding: 20px;
	color: var(--pf-text);
}

#bo_v,
#bo_w {
	background: var(--pf-bg-card) !important;
	border: 1px solid var(--pf-border);
	border-radius: 16px;
	box-shadow: 0 0 0 1px rgba(97,93,250,.10), 0 12px 40px rgba(0,0,0,0.60);
	padding: 20px;
	color: var(--pf-text);
}

/* ════════════════════════════════════════════════════
   2. Bootstrap 유틸 재정의
   ════════════════════════════════════════════════════ */
#bo_list_wrap .btn-primary,
#bo_v .btn-primary,
#bo_w .btn-primary,
#viewcomment .btn-primary,
#bo_vc_w .btn-primary {
	background: var(--pf-grad-primary) !important;
	border-color: var(--pf-primary) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(95,104,250,0.4);
	border-radius: 8px;
	font-weight: 600;
}
#bo_list_wrap .btn-primary:hover,
#bo_v .btn-primary:hover,
#bo_w .btn-primary:hover,
#viewcomment .btn-primary:hover {
	background: var(--pf-primary-dk) !important;
	box-shadow: 0 6px 20px rgba(95,104,250,0.55);
	transform: translateY(-1px);
}

#bo_list_wrap .text-primary,
#bo_v .text-primary,
#viewcomment .text-primary  { color: #a0a8ff !important; }

#bo_list_wrap .bg-primary,
#bo_v .bg-primary            { background: var(--pf-primary) !important; }

#bo_list_wrap .border-primary,
#bo_v .border-primary        { border-color: var(--pf-primary-bd) !important; }

#bo_list_wrap .text-muted,
#bo_v .text-muted,
#bo_w .text-muted,
#viewcomment .text-muted     { color: var(--pf-text-muted) !important; }

#bo_list_wrap .bg-light,
#bo_v .bg-light,
#bo_w .bg-light,
#viewcomment .bg-light,
#bo_vc_w .bg-light           { background: var(--pf-bg-deep) !important; color: var(--pf-text) !important; }

#bo_list_wrap .border-bottom,
#bo_v .border-bottom,
#viewcomment .border-bottom  { border-bottom-color: var(--pf-border) !important; }
#bo_list_wrap .border-top,
#bo_v .border-top            { border-top-color: var(--pf-border) !important; }

/* orangered → 인디고 */
#bo_list_wrap .orangered,
#bo_v .orangered,
#viewcomment .orangered       { color: var(--pf-primary) !important; }

/* ════════════════════════════════════════════════════
   3. 검색창
   ════════════════════════════════════════════════════ */
#bo_list_wrap #bo_search .alert {
	background: var(--pf-primary-bg) !important;
	border-color: var(--pf-primary-bd) !important;
	color: var(--pf-text) !important;
	border-radius: 10px;
}
#bo_list_wrap .custom-select,
#bo_list_wrap .form-control,
#bo_v .form-control,
#bo_w .form-control,
#viewcomment .form-control,
#bo_vc_w .form-control {
	background: var(--pf-bg-deep) !important;
	border-color: rgba(255,255,255,0.09) !important;
	color: var(--pf-text) !important;
	border-radius: 8px;
}
#bo_list_wrap .custom-select:focus,
#bo_list_wrap .form-control:focus,
#bo_v .form-control:focus,
#bo_w .form-control:focus,
#viewcomment .form-control:focus {
	border-color: var(--pf-primary) !important;
	box-shadow: 0 0 0 3px var(--pf-focus) !important;
}

/* 글쓰기(#bo_w): 내부에 또 깔지 않고 #bo_w 카드 배경이 비치도록 — 입력은 테두리만 */
#bo_w .form-control,
#bo_w .custom-select {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
	box-shadow: none !important;
}
#bo_w .form-control:focus,
#bo_w .custom-select:focus {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: var(--pf-primary) !important;
	box-shadow: 0 0 0 3px var(--pf-focus) !important;
}
#bo_w .form-control::placeholder {
	color: rgba(180, 188, 215, 0.5);
	opacity: 1;
}

#bo_list_wrap .input-group-text,
#bo_v .input-group-text {
	background: var(--pf-bg-row) !important;
	border-color: rgba(255,255,255,0.08) !important;
	color: var(--pf-text-muted) !important;
	border-radius: 8px 0 0 8px;
}

/* ════════════════════════════════════════════════════
   4. 상단 버튼 / 보조 버튼
   ════════════════════════════════════════════════════ */
#bo_list_wrap .btn_b01,
#bo_v .btn_b01,
#bo_w .btn_b01,
#viewcomment .btn_b01,
#bo_list_wrap .btn-basic,
#bo_v .btn-basic,
#bo_w .btn-basic,
#viewcomment .btn-basic {
	background: var(--pf-bg-row) !important;
	border: 1px solid var(--pf-border) !important;
	color: var(--pf-text-muted) !important;
	border-radius: 8px;
	transition: all .2s;
}
#bo_list_wrap .btn_b01:hover,
#bo_v .btn_b01:hover,
#bo_list_wrap .btn-basic:hover,
#bo_v .btn-basic:hover,
#viewcomment .btn-basic:hover {
	background: var(--pf-primary-bg) !important;
	border-color: var(--pf-primary-bd) !important;
	color: #fff !important;
}

/* ════════════════════════════════════════════════════
   5. 드롭다운
   ════════════════════════════════════════════════════ */
#bo_list_wrap .dropdown-menu,
#bo_v .dropdown-menu {
	background: var(--pf-bg-deep) !important;
	border: 1px solid var(--pf-border) !important;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#bo_list_wrap .dropdown-menu .btn,
#bo_v .dropdown-menu .btn       { color: var(--pf-text) !important; background: transparent !important; }
#bo_list_wrap .dropdown-menu .btn:hover,
#bo_v .dropdown-menu .btn:hover { background: var(--pf-primary-bg) !important; color: #fff !important; }

/* ════════════════════════════════════════════════════
   6. 분류 탭
   ════════════════════════════════════════════════════ */
#bo_list_wrap #bo_cate hr { border-top-color: var(--pf-border); margin: 0; }
#bo_list_wrap #bo_cate #bo_cate_ul li a { color: var(--pf-text-muted) !important; }
#bo_list_wrap #bo_cate #bo_cate_ul li.active a,
#bo_list_wrap #bo_cate #bo_cate_ul li a:hover {
	color: var(--pf-primary) !important;
	font-weight: 700;
}
#bo_list_wrap #bo_cate .sly-btn { color: var(--pf-text-muted); }

/* ════════════════════════════════════════════════════
   7. 공지 행 (pf-notice)
   ════════════════════════════════════════════════════ */
.pf-notice-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	color: var(--pf-text);
}
.pf-notice-row.pf-notice-active { background: var(--pf-primary-bg) !important; border-radius: 8px; }
.pf-notice-num  { min-width: 36px; text-align: center; color: var(--pf-text-muted); font-size: 12px; }
.pf-notice-subject { flex: 1; }
.pf-notice-subject .na-subject { color: var(--pf-text) !important; font-weight: 500; }
.pf-notice-subject .na-subject:hover { color: #fff !important; }
.pf-notice-meta { font-size: 11px; color: var(--pf-text-muted); white-space: nowrap; }
.pf-cmt-cnt {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	background: var(--pf-primary-bg);
	border: 1px solid var(--pf-primary-bd);
	border-radius: 20px;
	font-size: 11px;
	color: #a0a8ff;
	font-weight: 600;
	vertical-align: middle;
}
.pf-notice-row .border-bottom { border-bottom-color: var(--pf-border) !important; }
#bo_list_wrap .na-notice { background-color: var(--pf-primary) !important; }

/* ════════════════════════════════════════════════════
   8. 포트폴리오 갤러리 그리드
   ════════════════════════════════════════════════════ */
.pf-gallery {
	/* row 음수 마진(mx-n2)이 래퍼 밖으로 새지 않도록
	   래퍼 자체가 아닌 갤러리 레벨에서만 클리핑 */
	overflow: hidden;
}
.pf-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	/* row 음수 마진 상쇄 */
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Bootstrap row가 mx-n2 를 주입하는 경우 강제 상쇄 */
#bo_list_wrap #bo_gallery .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 카드 */
.pf-card__inner {
	border-radius: 14px;
	overflow: hidden;
	background: var(--pf-bg-deep);
	border: 1px solid var(--pf-border);
	transition: transform .28s cubic-bezier(.4,0,.2,1),
	            box-shadow .28s cubic-bezier(.4,0,.2,1),
	            border-color .28s;
	position: relative;
}
.pf-card:hover .pf-card__inner {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.40),
	            0 0 0 1px var(--pf-primary-bd);
	border-color: rgba(95,104,250,0.45);
}
.pf-card--active .pf-card__inner {
	border-color: var(--pf-primary-bd);
	box-shadow: 0 0 0 2px var(--pf-primary);
}

/* 썸네일 */
.pf-card__thumb-link { display: block; position: relative; overflow: hidden; }
.pf-card__thumb {
	position: relative;
	width: 100%;
	background: #0a0917;
	overflow: hidden;
}
.pf-card__img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
	display: block;
}
.pf-card:hover .pf-card__img { transform: scale(1.06); }

.pf-card__no-img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pf-text-muted);
	font-size: 2rem;
}

/* 열람 중 오버레이 */
.pf-card__viewing {
	position: absolute;
	top: 8px; left: 8px;
	background: var(--pf-primary);
	color: #fff;
	border-radius: 6px;
	padding: 3px 8px;
	font-size: 12px;
	font-weight: 700;
	z-index: 3;
}

/* 호버 오버레이 */
.pf-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,18,40,0) 40%, rgba(20,18,40,0.88) 100%);
	opacity: 0;
	transition: opacity .28s;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 18px;
	z-index: 2;
}
.pf-card:hover .pf-card__overlay { opacity: 1; }

.pf-card__overlay-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--pf-grad-primary);
	color: #fff;
	border-radius: 30px;
	padding: 8px 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 4px 16px rgba(95,104,250,0.5);
	transform: translateY(6px);
	transition: transform .28s;
	white-space: nowrap;
}
.pf-card:hover .pf-card__overlay-btn { transform: translateY(0); }

/* 뱃지 */
.pf-card__badge {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 4;
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.pf-card__badge--new {
	background: var(--pf-grad-gold);
	color: #1a1406;
	box-shadow: 0 2px 8px rgba(240,192,64,0.45);
}

/* 체크박스 */
.pf-card__chk {
	position: absolute;
	top: 8px; left: 10px;
	z-index: 5;
}

/* 카드 바디 */
.pf-card__body {
	padding: 14px 14px 16px;
}

.pf-card__cat {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pf-primary);
	background: var(--pf-primary-bg);
	border: 1px solid var(--pf-primary-bd);
	border-radius: 20px;
	padding: 2px 10px;
	margin-bottom: 7px;
}

.pf-card__title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.02em;
	color: var(--pf-text-bright);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.pf-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}
.pf-card__title a:hover { color: #fff !important; }

.pf-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 11px;
	color: var(--pf-text-muted);
}
.pf-card__client,
.pf-card__date { display: flex; align-items: center; gap: 4px; }

/* 빈 메시지 */
.pf-empty {
	color: var(--pf-text-muted);
	padding: 60px 20px;
}
.pf-empty i { opacity: .4; }

/* ════════════════════════════════════════════════════
   9. 페이징
   ════════════════════════════════════════════════════ */
#bo_list_wrap .pagination .page-link {
	background: var(--pf-bg-deep) !important;
	border-color: var(--pf-border) !important;
	color: var(--pf-text-muted) !important;
	border-radius: 8px !important;
	margin: 0 2px;
	min-width: 36px;
	text-align: center;
	transition: all .18s;
}
#bo_list_wrap .pagination .page-link:hover {
	background: var(--pf-primary-bg) !important;
	border-color: var(--pf-primary-bd) !important;
	color: #fff !important;
}
#bo_list_wrap .pagination .page-item.active .page-link {
	background: var(--pf-grad-primary) !important;
	border-color: var(--pf-primary) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(95,104,250,0.4);
}
#bo_list_wrap .pagination .page-item.disabled .page-link {
	background: var(--pf-bg-row) !important;
	color: #3c3f54 !important;
}

/* ════════════════════════════════════════════════════
   10. 게시글 읽기 — 포트폴리오 상세
   ════════════════════════════════════════════════════ */

/* 제목 */
#bo_v_title {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--pf-text-bright);
	line-height: 1.4;
}
@media (max-width:575px) { #bo_v_title { font-size: 18px; } }

/* 작성자 정보 바 */
#bo_v #bo_v_info > div.bg-light {
	background: rgba(255,255,255,0.03) !important;
	border-color: var(--pf-border) !important;
	border-radius: 10px;
}

/* 대표 이미지 히어로 */
.pf-view-hero {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--pf-border);
	box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.pf-view-hero__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
}

/* 프로젝트 정보 카드 */
.pf-view-info {
	background: var(--pf-bg-deep);
	border: 1px solid var(--pf-border);
	border-radius: 14px;
	overflow: hidden;
}

.pf-info-list {
	list-style: none;
	margin: 0; padding: 0;
}

.pf-info-item {
	display: flex;
	align-items: center;
	padding: 13px 20px;
	border-bottom: 1px solid var(--pf-border);
	gap: 16px;
}
.pf-info-item:last-child { border-bottom: 0; }

.pf-info-label {
	min-width: 110px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pf-text-muted);
	display: flex;
	align-items: center;
	gap: 7px;
}
.pf-info-label i { color: var(--pf-primary); opacity: .8; }

.pf-info-value {
	font-size: 14px;
	font-weight: 500;
	color: var(--pf-text-bright);
	flex: 1;
}

.pf-tag {
	display: inline-block;
	background: var(--pf-primary-bg);
	border: 1px solid var(--pf-primary-bd);
	color: #a0a8ff;
	border-radius: 20px;
	padding: 2px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.pf-link {
	color: var(--pf-primary) !important;
	text-decoration: none !important;
	word-break: break-all;
}
.pf-link:hover { color: #fff !important; }
.pf-link .fa-external-link { opacity: .6; }

/* 상세 내용 구분선 */
.pf-view-con-line {
	display: flex;
	align-items: center;
	gap: 14px;
}
.pf-view-con-line__text {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #a0a8ff;
	background: var(--pf-primary-bg);
	border: 1px solid var(--pf-primary-bd);
	border-radius: 30px;
	padding: 5px 16px;
}
.pf-view-con-line__text i { color: var(--pf-primary); }
.pf-view-con-line__bar {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--pf-primary-bd) 0%, transparent 100%);
}

/* 본문 */
#bo_v_con {
	min-height: 200px;
	word-break: break-all;
	overflow: hidden;
	color: var(--pf-text);
	line-height: 1.8;
}
#bo_v_con img { max-width: 100%; height: auto; border-radius: 10px; }

#bo_v_img      { width: 100%; text-align: center; overflow: hidden; zoom: 1; }
#bo_v_img:after{ display: block; visibility: hidden; clear: both; content: ""; }
#bo_v_img a.view_image { display: block; }
#bo_v_img img  { margin-bottom: 1rem; border-radius: 10px !important; }

/* 이전/다음/첨부 */
#bo_v #bo_v_data ul { background: transparent; }
#bo_v #bo_v_data li {
	border-top-color: var(--pf-border) !important;
	border-bottom-color: var(--pf-border) !important;
}
#bo_v #bo_v_data li > div:first-child { color: var(--pf-text-muted); }
#bo_v #bo_v_data a { color: #a0a8ff !important; }
#bo_v #bo_v_data a:hover { color: #fff !important; }

/* 추천/SNS 버튼 */
#bo_v .btn-basic {
	background: var(--pf-bg-row) !important;
	border: 1px solid var(--pf-border) !important;
	color: var(--pf-text-muted) !important;
	border-radius: 10px;
	transition: all .2s;
}
#bo_v .btn-basic:hover {
	background: var(--pf-primary-bg) !important;
	border-color: var(--pf-primary-bd) !important;
	color: #fff !important;
}

/* 태그 */
#bo_v .f-de a { color: #a0a8ff !important; }

/* ════════════════════════════════════════════════════
   11. SNS 공유 모달
   ════════════════════════════════════════════════════ */
#bo_snsModal .modal-content {
	background: linear-gradient(160deg, #2d2f3e 0%, #252736 100%) !important;
	border: 1px solid var(--pf-border) !important;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
#bo_snsModal .list-group-item {
	background: transparent !important;
	border-color: var(--pf-border) !important;
}

/* ════════════════════════════════════════════════════
   12. 댓글
   ════════════════════════════════════════════════════ */
#viewcomment, #bo_vc { color: var(--pf-text); }
#viewcomment .border-bottom,
#bo_vc .border-bottom { border-bottom-color: var(--pf-border) !important; }

#viewcomment .by-writer,
#bo_vc .by-writer {
	background: var(--pf-primary-bg) !important;
	border-top: 1px solid var(--pf-primary-bd) !important;
}

.cmt-reply { top: 0; left: -16px; color: var(--pf-primary); }
.cmt-content { color: var(--pf-text); word-break: break-all; overflow: hidden; }
.cmt-content img { max-width: 100%; height: auto; border-radius: 8px; }

.cmt-btn ul               { list-style: none; margin: 0; }
.cmt-btn ul > li          { float: left; font-size: 12px; padding: 0 10px; }
.cmt-btn ul > li::before  { float: left; color: rgba(255,255,255,.12); content: "|"; margin-left: -12px; }
.cmt-btn ul > li:last-child { padding-right: 0; }
.cmt-btn ul > li:first-child::before,
.cmt-btn ul > li.no-bar::before { content: ""; margin-left: 0; }
.cmt-btn ul > li > a       { float: left; color: var(--pf-text-muted) !important; white-space: nowrap; }
.cmt-btn ul > li > a:hover { color: #fff !important; }

#fviewcomment #wr_content { resize: none; }

@media all and (max-width:575px) {
	.responsive .cmt-box           { border-right: 0 !important; }
	.responsive #bo_vc_w .cmt-box  { border-left: 0 !important; border-radius: 0 !important; }
	.responsive #bo_vc_login       { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }
}

#bo_vc_w .cmt-box {
	background: var(--pf-bg-deep) !important;
	border: 1px solid var(--pf-border) !important;
	border-radius: 12px !important;
}
#bo_vc_w #bo_vc_login {
	background: var(--pf-bg-deep) !important;
	border: 1px solid var(--pf-border) !important;
	color: var(--pf-text-muted) !important;
	border-radius: 12px !important;
}

#bo_vc_opt ol {
	margin: 0; padding: 0; list-style: none; zoom: 1;
	background: var(--pf-bg-row);
	border-radius: 6px;
}
#bo_vc_opt ol:after { display: block; visibility: hidden; clear: both; content: ""; }
#bo_vc_opt ol li    { float: left; margin: 0; }
#bo_vc_send_sns ul  { margin: 0; padding: 0; list-style: none; zoom: 1; }
#bo_vc_send_sns ul:after { display: block; visibility: hidden; clear: both; content: ""; }
#bo_vc_send_sns ul li { float: left; margin: 0 1rem 0 0; }
#bo_vc_send_sns input { margin: 0 0 0 .5rem; }

#bo_v_sns_icon     { margin: -5px auto; }
#bo_v_sns_icon img { width: 40px; border-radius: 50%; margin: 5px; }

/* ════════════════════════════════════════════════════
   13. 글쓰기 폼 — 한 겹만(#bo_w 카드). 목록/행은 투명 + 구분선만 */
/* ════════════════════════════════════════════════════ */
#bo_w .list-group {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
#bo_w .list-group-item {
	background: transparent !important;
	border-color: var(--pf-border) !important;
	color: var(--pf-text) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
}
#bo_w .list-group-item h5 {
	color: var(--pf-text-bright);
	font-weight: 700;
}
#bo_w label,
#bo_w .custom-control-label,
#viewcomment .custom-control-label { color: var(--pf-text-muted); }

#bo_w .custom-control-input:checked ~ .custom-control-label::before,
#viewcomment .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--pf-primary) !important;
	border-color: var(--pf-primary) !important;
}
#bo_w .custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 3px var(--pf-focus) !important;
}
#bo_w .custom-file-label {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
	color: var(--pf-text) !important;
	border-radius: 8px;
}
#bo_w .input-group-text {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: var(--pf-text-muted) !important;
}
/* 에디터: 툴바만 살짝 어둡게, 본문 영역은 아래 카드 톤이 보이도록 */
#bo_w .cke_chrome {
	border-color: rgba(255, 255, 255, 0.12) !important;
	border-radius: 10px !important;
	overflow: hidden;
}
#bo_w .cke_top {
	background: rgba(0, 0, 0, 0.2) !important;
	border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
#bo_w .cke_bottom {
	background: rgba(0, 0, 0, 0.2) !important;
	border-top-color: rgba(255, 255, 255, 0.08) !important;
}
#bo_w .cke_contents,
#bo_w .cke_wysiwyg_frame {
	background: transparent !important;
}
#bo_w #wr_content { margin-bottom: 1rem !important; }

@media all and (max-width:575px) {
	#bo_w .list-group-item        { padding-left: 1rem !important; padding-right: 1rem !important; }
	.responsive #bo_w #wr_content { max-height: 160px !important; }
}

/* ════════════════════════════════════════════════════
   14. 모바일 공지 목록
   ════════════════════════════════════════════════════ */
@media all and (max-width:767px) {
	.responsive #bo_list .float-left.float-md-none { margin-right: 0.75rem; }
	.responsive #bo_list .na-title                 { margin-bottom: 0.14rem; }
}

/* ════════════════════════════════════════════════════
   15. 카드 반응형
   ════════════════════════════════════════════════════ */
@media (max-width:575px) {

	/* ─── 모바일 카드: 1열 가로 레이아웃 ─────────────── */

	/* Bootstrap row-cols 2열 → 1열 강제 */
	.pf-grid .pf-card {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		padding-bottom: 10px !important;
	}

	/* 카드 내부: 가로(row) 배치 */
	.pf-card__inner {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		min-height: 100px;
	}

	/* 왼쪽 썸네일 영역: 고정 너비 */
	.pf-card__thumb-link {
		flex: 0 0 140px;
		width: 140px;
		position: relative;
		overflow: hidden;
		border-radius: 0;       /* inner에 이미 radius 있음 */
	}

	/* 퍼센트 패딩 트릭 해제 → 부모 높이에 맞춤 */
	.pf-card__thumb {
		padding-bottom: 0 !important;
		height: 100%;
		min-height: 100px;
	}

	/* 이미지를 컨테이너에 꽉 채움 */
	.pf-card__img {
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		object-fit: cover;
	}

	/* 오른쪽 텍스트 영역 */
	.pf-card__body {
		flex: 1;
		padding: 10px 12px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;           /* flex 텍스트 잘림 방지 */
	}

	.pf-card__title {
		font-size: 13px;
		margin-bottom: 6px;
		/* 2줄 초과 말줄임 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* 모바일에서 hover 오버레이 불필요 */
	.pf-card__overlay { display: none; }

	/* 호버 translateY 모바일 제거 (터치에서 어색) */
	.pf-card:hover .pf-card__inner { transform: none; box-shadow: none; }

	/* ─── 뷰 / 기타 ────────────────────────────────── */
	.pf-view-hero__img{ max-height: 220px; }
	.pf-info-label    { min-width: 80px; font-size: 11px; }
	.pf-info-value    { font-size: 13px; }
	.pf-info-item     { padding: 10px 14px; }
}