@charset "UTF-8";

@media screen and (max-width: 768px) {
    /* printPage() 함수를 실행하는 버튼을 숨김 */
    img[onclick="printPage();"] {
        display: none !important;
    }
}

.recruitment-date-box {
    max-width: 1000px;
    margin: 20px auto;
    font-family: sans-serif;
}

.recruitment-date-box .title {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 15px;
    color: #333;
}

/* 컨테이너 - 기존 form-phone에서 클래스명 변경 */
.date-picker-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 15px;
}

/* 입력 그룹 (선택상자 + 단위텍스트) */
.date-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.date-item select {
    height: 38px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 14px;
    background-color: #fff;
}

/* PC 기준 너비 */
.select-unit { min-width: 90px; }

.unit-label {
    font-size: 14px;
    color: #555;
    white-space: nowrap;
}

/* 구분자 (~) */
.date-separator {
    font-weight: bold;
    color: #aaa;
    padding: 0 5px;
}

@media (max-width: 1023.98px) {
    .date-separator {
        width: 100%; /* 너비를 100%로 설정하여 줄바꿈 유도 */
        text-align: center;
        padding: 10px 0;
        margin: 5px 0;
        background-color: #f9f9f9;
        border-radius: 4px;
    }
    
    .date-item { width:23%; }
}

/* --- 모바일 반응형 (화면 너비 500px 이하일 때) --- */
@media (max-width: 500px) {
    .date-picker-flex {
        flex-direction: column; /* 세로 정렬 */
        align-items: flex-start; /* 왼쪽 정렬 */
        gap: 12px;
    }

    .date-item {
        width: 100%; /* 부모 너비 꽉 채우기 */
    }

    .date-item select {
        flex: 1; /* 선택 상자가 남은 공간 다 차지 */
        max-width: none; /* 너비 제한 해제 */
        font-size: 16px; /* 모바일 줌 방지 */
    }

    .unit-label {
        min-width: 30px; /* 단위 텍스트 공간 확보 */
        text-align: center;
    }

    .date-separator {
        width: 100%;
        text-align: center;
        padding: 10px 0;
        background-color: #f9f9f9;
        border-radius: 4px;
        margin: 5px 0;
    }
}

.board-write>.form-group {
	border-bottom: 1px solid var(--line);
}

.board-write-sect {
	border-bottom: none;
}

.calender-tb {
	min-width: auto;
}

.check-radio-label:has(input:checked):has(input:disabled)::before {
	background-image: url(../images/radio-on.svg);
}

body.modal-open {
	/* 스크롤바가 사라졌을 때 빈 공간을 채우는 패딩을 0으로 설정합니다. */
	padding-right: 0 !important;
}

@media ( min-width : 992px) {
	.search-filter-box .filter-cont>div.thin {
		min-width: 190px;
		max-width: 190px;
	}
}

@media ( min-width : 992px) {
	.search-filter-box .filter-cont>div.trisect {
		min-width: 28%;
		max-width: 28%;
	}
}

@media ( max-width : 768px) {
	.check-btn {
		padding: 8px 8px;
	}
}

@media ( min-width : 992px) {
	.tab-bx .tab-menu-bx[data-tab="3"] li {
		width: 33.3333333333%;
	}
}

@media ( max-width : 991.98px) {
	.tab-bx .tab-menu-bx[data-tab="3"] li {
		width: 33.3333333333%;
	}
	/* .board-list tbody td::before {
		content: attr(data-label);
        display: inline-block;
        flex-shrink: 0; 
        min-width: 50px;  
        margin-right: 12px;
        font-weight: bold;
	} */
	.board-list tr {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: nowrap;
		gap: 8px;
		padding: 24px 0;
		border-bottom: 1px solid var(--line);
		justify-content: center;
		flex-direction: column;
		align-content: center;
		align-items: baseline;
	}
	.board-list tbody td {
		text-align: left;
	}
	.board-list .mobile-hide {
        display: none !important;
    }
}

.attach-box>ul>li {
	margin-bottom: 5px;
}

/* @media (min-width: 576px) {
	.modal-dialog {
		max-width: none;
	}
} */
.btn-xs {
	/* btn-sm의 기본값보다 더 작은 패딩과 글꼴 크기를 적용 */
	padding: 0.1rem 0.4rem; /* 상하 0.15rem, 좌우 0.3rem */
	font-size: 0.75rem; /* 기본 폰트 사이즈보다 작게 */
	line-height: 1.5;
	border-radius: 0.2rem;
}

header#hd .dep1 li>a {
	white-space: normal;
}

/* 전체 컨테이너 스타일 */
.kpaa_2025_container-wrapper {
	width: 300px;
	font-family: 'Malgun Gothic', sans-serif;
	background-color: #ffffff;
}
/* 상단 정보 영역 */
.kpaa_2025_info-header {
	/* 상단 박스 스타일 */
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
	padding: 15px;
	padding-bottom: 25px; /* 버튼 아래 여백 확보 */
	overflow: hidden;
}
/* 정보 라인 공통 스타일 */
.kpaa_2025_info-line {
	display: flex;
	font-size: 14px;
	line-height: 1.4;
	align-items: center;
}
/* 상단 3개 정보 라인 */
.kpaa_2025_info-line.kpaa_2025_top-line {
	margin-bottom: 3px;
}
/* 상태 정보 라인 */
.kpaa_2025_info-line.kpaa_2025_status-line {
	margin-bottom: 10px;
}

.kpaa_2025_info-line.kpaa_2025_bottom-line {
	margin-bottom: 20px;
}

.kpaa_2025_label {
	color: #4a4a4a;
	font-weight: normal;
	margin-right: 15px;
	flex-shrink: 0;
	width: 80px; /* 레이블 너비 고정 */
}

.kpaa_2025_value {
	color: #000000;
	font-weight: 500;
}
/* 구분선 스타일 */
.kpaa_2025_divider {
	border-top: 1px solid #eeeeee;
	margin: 15px 0 10px 0;
}
/* 버튼 공통 스타일 */
.kpaa_2025_action-button {
	color: white;
	border: none;
	padding: 10px 15px;
	border-radius: 5px;
	font-size: 15px;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 5px;
}
/* 주 버튼 (구성원 명단, 가입 하기) */
.kpaa_2025_primary-green-button {
	background-color: #4CAF50;
}

/* 보조 버튼 (상태 변경 관리) */
.kpaa_2025_secondary-green-button {
	background-color: #6a82ff; /* 이전 옅은색보다 진한 파란색으로 수정 */
	margin-top: 5px;
}

.kpaa_2025_join-button {
	background-color: #ff9800; /* 주황색 (Orange 500) */
}

/* 탈퇴 버튼 기본 스타일 */
.kpaa_2025_leave-button {
	background-color: #f44336; /* 빨간색 (Red 500) */
	color: white; /* 글자색: 흰색 */
	border: none; /* 테두리 제거 (필요 시) */
	padding: 10px 20px; /* 여백 (필요 시) */
	cursor: pointer; /* 마우스 커서 변경 */
}

/* 하단 메뉴 목록 스타일 */
.kpaa_2025_menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-top: 20px; /* 상단 박스와 20px 간격 유지 */
	border-radius: 10px; /* 하단 박스 둥근 모서리 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
	overflow: hidden;
}

.kpaa_2025_menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-top: 1px solid #eeeeee;
	font-size: 16px;
	font-weight: 700;
	color: #333333; /* 기본 글씨 색상 (원복 색상) */
	cursor: pointer;
}

/* 클릭하여 활성화된 상태 (JavaScript로 .active 클래스 토글) */
.kpaa_2025_menu-item.active {
	color: #007bff; /* 파란색 고정 */
}
/* ------------------------------------ */
.kpaa_2025_menu-list>:first-child {
	border-top: none;
}

.kpaa_2025_menu-list>:last-child {
	border-radius: 0 0 10px 10px;
}

/* '+' 버튼 제거 스타일 */
.kpaa_2025_icon {
	display: none;
}

.custom-checkbox-label {
	display: block; /* <td> 영역 전체를 차지하도록 블록 요소로 설정 */
	padding: 20px 20px; /* 상하 패딩을 충분히 주어 클릭하기 쉽게 만듭니다. (좌우 0으로 설정) */
	cursor: pointer; /* 마우스 커서를 포인터로 변경하여 클릭 가능함을 표시 */
}

/*
1. 모바일 스타일 (768px 이하): 기본값으로 모든 장치에 적용됨
*/
.responsive-control-container {
	/* text-align: right; 은 HTML에서 넘어왔다고 가정. CSS로 처리하려면 추가 */
	text-align: right;
	/* 모바일: margin-top: 0% */
	margin-top: 0%;
	/* 공통: margin-bottom: 8% */
	margin-bottom: 8%;
}

/*
2. PC 스타일 (769px 이상): 넓은 화면에서만 모바일 스타일을 덮어씀
*/
@media ( min-width : 992px) {
	.responsive-control-container {
		/* PC: margin-top: -16% (모바일의 0%를 덮어씀) */
		margin-top: -16%;
	}
}

.community-unique-header h3 {
	/* 1. Flexbox를 사용하여 줄 바꿈으로 생긴 HTML 공백을 무시하고 요소를 정렬합니다. */
	/* inline-flex는 <h3> 자체가 인라인 요소처럼 공간을 차지하게 합니다. */
	display: inline-flex;
	/* 2. 요소들이 수직 중앙에 맞춰지도록 합니다. (선택 사항) */
	align-items: center;

	/* 3. 필요에 따라 요소들(Community 텍스트와 <span>) 사이의 기본 간격(gap)을 설정할 수 있습니다. */
	/* gap: 0px; */

	/* 기존 H3 스타일 */
	/* font-size: 20px; */
	/* margin: 0; */
}

/* 4. 마침표 색상을 위한 스코프 정의 (기존 클래스 유지) */
.community-unique-header .text-blue {
	color: blue; /* 원하는 색상 코드로 지정 */
}

.custom-integrated-search-container {
	padding: 40px 0; /* 상하 여백 */
	max-width: 600px; /* 검색창 최대 너비 */
	margin: 0 auto; /* 중앙 정렬 */
}

.custom-search-wrapper {
	display: flex;
	border: 1px solid #ccc; /* 중립적인 회색 테두리 */
	border-radius: 25px; /* 모서리 둥글게 */
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 은은한 그림자 추가 */
}

.custom-search-input {
	flex-grow: 1;
	padding: 5px 15px;
	border: none;
	outline: none;
	font-size: 16px;
	background-color: #fff; /* 입력 필드 배경 흰색 유지 */
}

.custom-search-button {
	background-color: #f0f0f0; /* 버튼 배경색을 연한 회색으로 변경 */
	border: none;
	cursor: pointer;
	padding: 10px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease; /* 호버 효과 추가 */
}

.custom-search-icon {
	width: 24px;
	height: 24px;
	color: #555; /* 아이콘 색상을 진한 회색으로 변경 */
}

.button-container {
	text-align: center;
	width: 100%;
	padding: 20px 0;
	margin: 0 !important;
}

/* 2. input type="button"에 적용되는 버튼 스타일 및 반응형 */
.unique-search-button {
	/* Input 요소는 inline-flex보다 inline-block이 더 안정적입니다. */
	display: inline-block;
	text-align: center; /* 텍스트 정렬 */
	/* value 속성으로 텍스트를 받습니다. */
	padding: 12px 24px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	white-space: nowrap;
	background-color: #007bff;
	color: white;
	border: 1px solid white;
	border-radius: 25px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease, transform 0.1s ease;
	line-height: 1.5;
	/* 브라우저 기본 border 및 배경 스타일 재설정 (Input 요소에 필요) */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.unique-search-button:active {
	background-color: #0056b3;
	transform: translateY(1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 📱 반응형 웹을 위한 미디어 쿼리 */
@media ( max-width : 600px) {
	.unique-search-button {
		font-size: 14px;
		padding: 10px 20px;
	}
}

.unique-slide-border {
	border: 3px solid #e0e0e0;
	border-radius: 8px;
}

.organization dl .cont .org-photo-wrapper {
	width: 100%;
	max-width: min(105px, 30vw) !important;
/* 	aspect-ratio: 162/210; */
	overflow: hidden;
	background-color: #eee;
	border: 1px solid #eee;
	border-radius: 15px;
	aspect-ratio: 1 / 1.3;
}

.organization dl .cont .org-photo {
	max-width: inherit;
	width: 100%;
	height: 100%;
/* 	object-fit: cover; */
/* 	object-position: top center; */
}

#executiveModal .modal-dialog {
	max-width: 500px;
}

/* ========================================================
   [최종 수정] 줄바꿈 시 중앙 정렬, 같은 줄일 땐 우측 배치
   ======================================================== */

/* 1. 내부 래퍼 (Flex 컨테이너) */
.search-filter-box .filter-inner-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

/* 2. [핵심] 기존 필터 영역 
   - flex-grow: 999; 를 주어 빈 공간을 이 녀석이 거의 다 차지하게 합니다.
   - 이렇게 하면 자연스럽게 버튼(.filter-btn2)이 오른쪽 끝으로 밀려납니다.
*/
.search-filter-box .filter-cont {
	width: auto;
	max-width: 100%;
	-webkit-box-flex: 999;
	-ms-flex-positive: 999;
	flex-grow: 999; /* 왼쪽 영역이 공간을 최대한 차지 */
}

/* 3. 버튼 영역 (.filter-btn2) */
.filter-btn2 {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1; /* 줄바꿈 되면 공간을 채움 */
	text-align: center; /* [중요] 버튼 자체는 항상 '가운데' 정렬 */
	min-width: 100px; /* 버튼이 너무 찌그러지지 않도록 최소 폭 확보 */
	margin-top: 30px; /* 줄바꿈 시 윗줄과의 간격 */
}

/* 4. PC 버전 (992px 이상) 디테일 */
@media ( min-width : 992px) {
	.filter-btn2 {
		/* PC에서 같은 줄에 있을 때 왼쪽 요소들과 간격을 줌 */
		margin-left: 20px;
	}
}

/* 5. 모바일 버전 (991.98px 이하) */
@media ( max-width : 991.98px) {
	.filter-btn2 {
		width: 100%; /* 모바일은 강제로 한 줄 차지 */
		margin-top: 20px;
	}
}

/* ========================================================
   [검색 필터 스타일 - 최종 완성]
   PC: 고정폭+유동폭 하이브리드 / Mobile: 타이틀-내용 가로 배치
   ======================================================== */
.new-sf-box {
	background: #FFF;
	border-radius: 24px;
	box-shadow: 0 0 1.875rem 0 rgba(69, 89, 143, 0.12);
	padding: 32px;
	margin-bottom: 30px;
	border: 1px solid #EFF2F8;
}

/* 헤더 영역 */
.new-sf-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #EFF2F8;
}

.new-sf-header h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 20px !important;
	font-weight: 700;
	margin: 0;
	color: #111827;
}

.new-sf-toggle-icon {
	width: 28px;
	height: 28px;
	background: url(../images/faq-arr.svg) no-repeat center center/contain;
	transition: transform 0.3s ease;
	cursor: pointer;
	min-width: 28px;
}

.new-sf-header.active .new-sf-toggle-icon {
	transform: scaleY(-1);
}

.new-sf-body {
	display: none;
}

/* ========================================================
   [PC 레이아웃] Flex 적용
   ======================================================== */
.new-sf-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px 30px;
	align-items: center;
	justify-content: flex-start;
}

/* PC 개별 항목 (Input 등) */
.new-sf-item {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	/* 	width: 350px; */
	/* 	max-width: 350px; PC 기본 너비 */
	width: 100%;
}

/* 제목 (Label) */
.new-sf-item strong {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	min-height: 40px;
	font-weight: 600;
	color: #272A32;
	min-width: 70px; /* PC 제목 너비 */
	flex-shrink: 0;
	line-height: 1.25;
	margin-bottom: 0;
	padding-right: 0px;
}

/* 내용 영역 */
.new-sf-item .cont {
	flex-grow: 1;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 5px;
}

.new-sf-item .form-control {
	height: 40px;
	width: 100%;
}

/* ========================================================
   [분류 항목] (PC/Mobile 공통 로직)
   JS에서 .item-auto 클래스를 붙여준 항목
   ======================================================== */
.new-sf-item.item-auto {
	width: auto;
	max-width: 100%;
	flex: 0 1 auto;
}

.new-sf-check-group {
	display: flex;
	flex-wrap: wrap !important;
	white-space: nowrap;
	gap: 12px;
	align-items: center;
}

/* ========================================================
   [검색 버튼 영역]
   ======================================================== */
.new-sf-btn-area {
	flex: 0 0 auto;
	width: auto;
	min-width: auto;
	margin: 0;
	padding: 0;
	margin-left: 0;
}

.new-sf-search-btn {
	width: auto;
	min-width: 100px;
	padding: 0 24px;
	font-weight: 700;
	font-size: 16px;
	height: 40px;
	border-radius: 40px;
	white-space: nowrap;
}

/* ========================================================
   [모바일 반응형 수정] (max-width: 991.98px)
   - 제목과 내용을 한 줄(Row)로 유지
   ======================================================== */
@media screen and (max-width: 991.98px) {
	.new-sf-box {
		padding: 20px;
	}

	/* 모바일에서는 각 항목을 세로로 하나씩 쌓음 */
	.new-sf-grid {
		/* 		display: block; */
		gap: 0 30px;
	}

	/* [수정] flex-direction: row 유지하여 제목-내용 가로 배치 */
	.new-sf-item, .new-sf-item.item-auto {
		width: 100%;
		margin-bottom: 12px; /* 항목 간 간격 */
		flex-direction: row; /* [중요] 가로 배치 유지 */
		align-items: center; /* 세로 중앙 정렬 */
		gap: 10px; /* 제목과 내용 사이 간격 축소 */
	}

	/* [수정] 모바일 제목 스타일 */
	.new-sf-item strong {
		width: auto; /* 100% 해제 */
		min-width: 80px; /* 모바일에 맞게 제목 최소 너비 축소 (필요시 조절) */
		justify-content: flex-start; /* 왼쪽 정렬 */
		text-align: left;
		margin-bottom: 0;
		padding-right: 0;
	}
	.new-sf-item .cont {
		width: auto; /* 남은 공간 차지 */
		flex-grow: 1;
	}

	/* 모바일에서 체크박스가 너무 많으면 화면을 뚫으니 줄바꿈 허용 */
	.new-sf-check-group {
		flex-wrap: wrap !important;
	}

	/* 버튼 영역 */
	.new-sf-btn-area {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #f5f5f5; /* 버튼 위 구분선 (선택사항) */
	}
	.new-sf-search-btn {
		width: 100%;
	}
}

.new-sf-box .new-sf-header .icon-filter {
	width: 24px;
	height: 24px;
	background-image: url(../images/icon-filter.svg);
}

.attorney-process {
	margin-left: 2%;
}

#toggleButton {
	/* 기존 이미지 설정 */
	transition: transform 0.3s; /* 부드럽게 돌아가게 */
}

/* 눌렸을 때 180도 회전 */
#toggleButton.active {
	transform: rotate(180deg);
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	padding: 15px;
}

.image-grid img {
	border-radius: 15px;
}

@media ( max-width : 768px) {
	.image-grid {
		/* 화면 너비가 768px 이하일 때: 가로 2개로 변경 */
		grid-template-columns: repeat(1, 1fr);
	}
}

.small-text-part {
	font-size: 0.75em; /* 원하는 만큼 더 작게 설정 (예: 75%) */
	white-space: nowrap; /* (선택 사항) 괄호 안 내용이 줄 바꿈 되지 않도록 방지 */
	vertical-align: middle; /* (선택 사항) 글씨 크기 변화로 인한 세로 위치 틀어짐 보정 */
}

.hiddenClass {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

#google_translate_element {
	float: right;
	margin-top: 10px;
}

.goog-te-banner-frame.skiptranslate {
	display: none !important;
}

body {
	top: 0px !important;
	display: flex;
	flex-direction: column;
}

.goog-logo-link {
	display: none !important;
}

.goog-te-gadget {
	color: transparent !important;
}

.goog-te-gadget select {
	color: black !important;
	font-size: 14px;
	border: 1px solid #ccc;
	padding: 5px;
}

/* 번역 방지 */
.notranslate * {
	font-family: inherit !important;
}

body.modal-open {
	overflow: auto !important;
}

.modal-main-pop {
	overflow: visible;
}

/* 화면 너비가 768px 미만일 때 적용 */
@media ( max-width : 767px) {
	.modal-main-pop {
		top: 20px !important;
		left: 50% !important;
		width: 90% !important;
		transform: translateX(-50%) !important;; /* Y축 변환 제거 */
	}
}

.button-container1 {
	text-align: center; /* 기본적으로 가운데 정렬 */
}

/* 화면 너비가 768px 미만일 때 (모바일/반응형 기준) 왼쪽 정렬로 변경 */
@media ( max-width : 767px) {
	.button-container1 {
		text-align: left; /* 작은 화면에서는 왼쪽 정렬 */
	}
}

.float-link {
	position: sticky;
	z-index: 20;
	right: 70px;
	bottom: 30px;
	margin-left: auto;
	margin-bottom: -66px;
	width: 56px;
	height: 56px;
	border-radius: 500px;
}

.float-link a {
	display: block;
	margin-top: 0.6666666667rem;
}

@media ( max-width : 768px) {
	.float-link {
		/* 1. 고정 위치 속성 변경 (필요하다면) */
		position: fixed; /* sticky 대신 fixed를 쓰면 고정성이 확실해져 더 자연스러울 수 있습니다. */
		/* 2. 우측 간격 줄이기 */
		right: 20px; /* 화면 우측 끝에서 20px만 떨어지게 */
		/* 3. 하단 간격 늘리기 */
		bottom: 80px; /* 일반적인 모바일 하단 내비게이션 바(50px~60px) 위에 배치하기 위해 80px로 설정 */
		/* 4. 기존 margin 조정 제거 */
		margin-bottom: 0;
	}
}

@media ( min-width : 768px) {
	.max130 {
		max-width: 130px; /* PC일 경우 최대 너비 130px 설정 */
	}
}

/* PC 화면 설정 (992px 이상) */
@media ( min-width : 992px) {
	/* 1. [최상위 부모] 좌우 높이 강제 일치 (Flex Stretch) */
	main.index .index-sect1>div {
		display: flex !important;
		align-items: stretch !important; /* 오른쪽 메뉴 높이만큼 왼쪽도 늘어남 */
		min-height: 550px !important; /* 기존 높이 제한 해제 */
	}

	/* 2. [오른쪽 메뉴] 높이의 기준 (얘가 커지면 전체가 커짐) */
	main.index .index-sect1 .top-menu {
		width: 288px !important;
		margin-left: 24px !important;
		padding: 18px 18px !important;
		height: auto !important;
	}

	/* 3. [왼쪽 영역] 오른쪽 높이를 그대로 물려받음 */
	main.index .index-sect1 .top-visual {
		width: calc(100% - 262px - 24px) !important;
		position: relative !important;
		height: auto !important;
		overflow: hidden !important;
		max-height: none !important; /* 높이 제한 절대 해제 */
	}

	/* ------------------------------------------------------------- */
	/* 여기서부터가 중요합니다. 끊겨있던 높이 상속을 연결합니다. */
	/* ------------------------------------------------------------- */

	/* 4. [Swiper 통] 부모(.top-visual) 높이의 100%를 강제로 차지 */
	main.index .index-sect1 .top-visual .swiper {
		position: absolute !important; /* 붕 띄워서 강제로 늘림 */
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* 5. [Wrapper] 슬라이드 감싸는 띠. 얘도 높이 100% 필수 */
	main.index .index-sect1 .top-visual .swiper-wrapper {
		display: flex !important; /* 옆으로 흐르게 설정 */
		height: 100% !important; /* 부모(.swiper) 높이 상속 */
		box-sizing: border-box !important;
	}

	/* 6. [Slide] 개별 슬라이드. 얘도 높이 100% 필수 */
	main.index .index-sect1 .top-visual .swiper-slide {
		display: block !important;
		height: 100% !important; /* 부모(.swiper-wrapper) 높이 상속 */
		width: 100% !important;
		max-height: none !important;
	}

	/* 7. [링크(a) 태그] 이미지 감싸는 a태그. 얘도 높이 100% 필수 */
	main.index .index-sect1 .top-visual .swiper-slide a {
		display: block !important;
		width: 100% !important;
		height: 100% !important; /* 부모(.swiper-slide) 높이 상속 */
	}

	/* 8. [이미지/비디오] 최종적으로 늘어난 높이에 맞춰서 '늘리기' */
	main.index .index-sect1 .top-visual .swiper-slide img, main.index .index-sect1 .top-visual .swiper-slide video {
		display: block !important;
		width: 100% !important;
		height: 100% !important; /* 부모(a) 높이 상속 -> 결국 제일 위에서부터 여기까지 100%가 전달됨 */
		min-height: 100% !important; /* 혹시라도 줄어들지 않게 방어 */
		max-height: none !important; /* 제한 해제 */
		/* fill: 비율 무시하고 박스 크기에 맞춰서 강제로 늘림 (짤리는 거 없음, 여백 없음) */
		object-fit: fill !important;
	}
}

.text-blue-icon {
	color: #4073D9;
}

.box-hover {
	border: none;
	border-color: #D8E6FF;
	transition: all 0.1s ease;
}

/*
  기본적으로 요소를 숨깁니다.
  PC 및 모든 화면 크기에서 적용됩니다.
*/
.mobileOnly {
	display: none !important;
}

/*
  최대 768px 너비 (일반적인 모바일 및 태블릿 세로 모드) 이하의 화면에서
  요소를 보이도록 재정의합니다.
*/
@media ( max-width : 991.98px) {
	.mobileOnly {
		display: block !important; /* 또는 flex, grid 등 해당 요소에 맞는 display 값 */
	}
}

.newpadding th, .newpadding td {
	padding: 12px !important;
}

.common-box {
	margin-top: auto;
	margin-bottom: 50px;
}

/* 분류명: 확장된 소프트 틴트 스타일 */
.clsf-name {
	display: inline-block;
	padding: 6px 16px; /* 여백을 키워 시원하게 구성 */
	font-size: 18px; /* 14px에서 18px로 크기 확대 */
	font-weight: 700; /* 더 굵게 하여 존재감 강조 */
	color: var(--blue); /* 기존 포인트 컬러 유지 */
	background-color: var(--lightblue); /* 연한 배경 유지 */
	border-radius: 6px; /* 크기에 맞춰 모서리 곡률 조정 */
	line-height: 1.2;
	letter-spacing: -0.03em; /* 글자가 커진 만큼 자간을 더 조여 세련미 추가 */
	vertical-align: middle;
}

/* 모바일 화면 대응 */
@media screen and (max-width: 991.98px) {
	.clsf-name {
		font-size: 15px; /* 모바일에서는 적당히 큰 사이즈로 조절 */
		padding: 4px 12px;
	}
}

/* 테두리가 추가된 버전 */
.clsf-name.outline {
	background-color: #f8fbff; /* 배경을 더 밝게 */
	border: 1px solid rgba(64, 115, 217, 0.2); /* 아주 연한 파란색 테두리 */
}



.calender-tb .day .date .schedule-text {
    display: none;
}

@media ( max-width : 767.98px) {
	/* 달력(Calendar)을 리스트 형식으로 전환 */
	.calender-tb, .calender-tb thead, .calender-tb tbody, .calender-tb tr, .calender-tb td {
		display: block;
		width: 100% !important;
	}

	/* 요일 헤더 숨기기 */
	.calender-tb thead {
		display: none;
	}

	/* 데이터가 없는 빈 칸(disabled) 숨기기 */
	.calender-tb td.disabledTd {
		display: none;
	}

	/* 행(tr) 단위의 테두리 제거 */
	.calender-tb tr {
		border: none;
		margin-bottom: 0;
	}

	/* 일별 카드 스타일: 항목 간 간격(Margin) 추가 */
	.calender-tb td {
		border: 1px solid var(--line); /* 전체 테두리 */
		border-radius: 12px; /* 둥근 모서리 */
		padding: 20px 15px;
		margin-bottom: 15px; /* 항목 간 떨어지는 간격 */
		background-color: #fff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); /* 가벼운 그림자 */
	}

	/* 마지막 항목 여백 제거 */
	.calender-tb td:last-child {
		margin-bottom: 0;
	}

	/* 오늘 날짜 강조 */
	.calender-tb td.today {
		border: 2px solid var(--primary);
		background-color: #f8f9ff;
	}

	/* 날짜 숫자 스타일 */
	.calender-tb .day .date {
		font-size: 1.2rem;
		font-weight: 700;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		color: #333;
	}
	
	.calender-tb .day .date .schedule-text {
        display: inline-block; /* 모바일에서만 보이게 함 */
        font-size: 0.85rem;    /* after와 동일하게 작게 */
        font-weight: 400;      /* 가늘게 */
        margin-left: 8px;      /* 숫자와 간격 */
        color: #888;           /* 회색 */
    }
    
	/* .calender-tb .day .date::after {
		content: ' 상담 일정';
		font-size: 0.85rem;
		font-weight: 400;
		margin-left: 8px;
		color: #888;
	} */

	/* 상담 리스트 스타일 조정 */
	.day-list {
		padding-left: 0;
		list-style: none;
		margin: 0;
	}
	.day-list li {
		margin-bottom: 10px;
		padding: 12px;
		border-radius: 8px;
		background: #f9f9f9;
		border: 1px solid #eee;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	.day-list li:last-child {
		margin-bottom: 0;
	}
	.day-list li p {
		margin-bottom: 0;
		line-height: 1.4;
	}
	.day-list li .badge {
		width: fit-content;
		margin-bottom: 5px;
	}
}



@media (max-width: 767.98px) {
    /* 1. tbody를 Flex 컨테이너로 설정하여 자식들을 옆으로 나열 */
    .calender-tb tbody {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px 0 !important; /* 위아래 간격 */
        width: 100% !important;
    }

    /* 2. tr의 레이아웃 기능을 꺼서 td가 직접 2열로 배치되게 함 (내용 사라짐 방지) */
    .calender-tb tr {
        display: contents !important;
    }

    /* 3. 개별 날짜 카드(td)를 2열로 설정 */
    .calender-tb td {
        display: block !important;
        /* 양쪽 여백을 고려하여 50%에서 조금 뺌 */
        width: calc(50% - 5px) !important; 
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
        /* 기존 디자인 스타일 유지 */
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 15px 10px;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    }

    /* 4. 2열일 때 1, 3, 5번째 카드에 왼쪽 여백, 2, 4, 6번째에 오른쪽 여백 조절 (선택사항) */
    .calender-tb td:nth-child(odd) {
        margin-right: 5px !important;
    }
    .calender-tb td:nth-child(even) {
        margin-left: 5px !important;
    }

    /* 5. 오늘 날짜 강조 및 날짜 텍스트 크기 미세 조정 */
    .calender-tb td.today {
        border: 2px solid var(--primary) !important;
    }

    .calender-tb .day .date {
        font-size: 1.1rem !important;
        display: flex;
        align-items: center;
    }

    /* 6. 기존처럼 헤더와 빈 칸은 숨김 */
    .calender-tb thead,
    .calender-tb td.disabledTd {
        display: none !important;
    }
}

.search-max-w-200 {
	max-width: 200px;
}

.search-max-w-300 {
	max-width: 300px;
}

.search-max-w-380 {
	max-width: 380px;
}

.search-max-w-400 {
	max-width: 400px;
}

.search-max-w-450 {
	max-width: 450px;
}

.search-max-w-500 {
	max-width: 500px;
}

@media screen and (max-width: 768px) {
	footer#ft .ft-link-wrap {
		padding-top: 0px;
		padding-bottom: 10px;
	}
	main.index .index-sect4 .community-wrap .comm-cont .swiper-slide a .subject {
		height: 1.4em;
		-webkit-line-clamp: 1;
	    word-break: break-all;
	}
	main.index .index-sect3 .main-schedule .schedule-cont li a .subject {
		height: 1.3em;
		-webkit-line-clamp: 1;
	    word-break: break-all;
	}
	main.index .index-sect3 .main-news .swiper-slide dl dt, main.index .index-sect3 .main-news .swiper-slide dl dd {
		height: 1.3em;
		-webkit-line-clamp: 1;
	    word-break: break-all;
	}
}

.line-clamp-1 {
	display: -webkit-box !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

.min-w-0 {
	min-width: 0 !important;
}

/* --- 기본 설정 (PC 기준: 세로로 줄바꿈되어 나옴) --- */
.date-container {
	display: flex;
	flex-direction: column; /* 세로로 쌓기 */
	align-items: center; /* 가운데 정렬 (필요시) */
	text-align: center;
	gap: 2px; /* 날짜와 물결표 사이 간격 */
}

/* 물결표(~)의 가독성을 위해 스타일 조정 */
.date-separator-row {
	line-height: 1;
	font-weight: bold;
}

/* --- 모바일 대응 (991.98px 이하: 가로로 일직선 출력) --- */
@media ( max-width : 991.98px) {
	.date-container {
		flex-direction: row; /* 가로로 나열 */
		justify-content: center; /* 중앙 정렬 (표 안에서) */
		flex-wrap: nowrap; /* 줄바꿈 방지 */
		gap: 8px; /* 가로 간격 확보 */
		font-size: 0.9rem; /* 모바일 화면에 맞춰 폰트 축소 가능 */
	}

	/* 모바일에서는 물결표 앞뒤 간격을 균일하게 */
	.date-separator-row {
		margin: 0 2px;
	}
	.search-max-w-200 {
		max-width: none;
	}
	.search-max-w-300 {
		max-width: none;
	}
	.search-max-w-380 {
		max-width: none;
	}
	.search-max-w-400 {
		max-width: none;
	}
	.search-max-w-450 {
		max-width: none;
	}
	.search-max-w-500 {
		max-width: none;
	}
}

.status-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 12px;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 6px;
	line-height: 1.2;
	/* white-space: nowrap; */
	word-break: keep-all;
	transition: all 0.2s ease;
	cursor: default;
	background: transparent;
	border: 1px solid;
}

/* 접수 예정 */
.status-badge.waiting {
	border-color: #0d6efd;
	color: #0d6efd;
}

/* 접수 중 (Bootstrap Success 컬러 직접 사용) */
.status-badge.active {
	border-color: #198754;
	color: #198754;
}

/* 접수 마감 (Bootstrap Secondary 컬러 직접 사용) */
.status-badge.closed {
	border-color: #6c757d;
	color: #6c757d;
}

.content-area img {
	max-width: 100% !important; /* 이미지 최대 너비를 부모 요소의 100%로 설정 (가장 중요) */
	height: auto !important; /* 비율 유지를 위해 높이는 자동으로 설정 */
	/* display: block; */ /* 일부 레이아웃 문제를 해결하기 위해 블록 요소로 설정 */
}

.content-area iframe {
    min-height: 1500px !important;
}

@media screen and (max-width: 780px) {
	/* 1. 컨테이너: 가로 스크롤 및 불필요한 여백 완전 차단 */
	.content-area {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
		padding: 5px !important;
		box-sizing: border-box !important;
	}

	/* 2. 아이프레임(iframe) 강제 축소: 세로 스크롤 중복 방지 */
	.content-area iframe {
		width: 100% !important;
		min-width: 100% !important;
		/* zoom은 scale과 달리 줄어든 만큼 공간도 같이 줄어듭니다. */
		zoom: 0.5; /* 화면 크기에 따라 0.5 ~ 0.8 사이로 조절 */
		-moz-transform: scale(0.5); /* 파이어폭스 대응 */
		-moz-transform-origin: 0 0;
		border: 0 !important;
		height: auto !important;
		min-height: 1500px !important; /* 내부 내용이 길 경우를 대비 */
	}

	/* 3. 모든 요소의 너비와 높이 강제 조정 */
	.content-area *:not(img), .content-area div, .content-area table, .content-area section {
		max-width: 100% !important;
		width: auto !important; /* 고정 width 해제 */
		height: auto !important;
		box-sizing: border-box !important;
	}

	/* 4. HWP/워드 복사로 인한 과도한 들여쓰기 및 마진 강제 제거 */
	/* .content-area p, .content-area span, .content-area div {
		text-indent: 0 !important; 
		margin-left: 0 !important; 
		padding-left: 0 !important;
		margin-right: 0 !important;
		word-break: break-all !important;
		line-height: 1.4 !important;
	} */

	/* 5. 테이블(Table) 강제 줄임 */
	.content-area table {
		display: table !important;
		width: 100% !important;
		min-width: 100% !important;
		table-layout: fixed !important; /* 테이블이 화면을 절대 못 넘게 함 */
	}
	.content-area td, .content-area th {
		width: auto !important;
		padding: 4px !important;
		word-break: break-all !important;
		white-space: normal !important;
		text-indent: 0 !important;
	}

	/* 6. 버튼 및 인라인 요소 (기존 스타일 유지) */
	.content-area a div[style*="width"], .content-area div[style*="display:inline-block"] {
		width: auto !important;
		display: inline-block !important;
		padding: 8px 15px !important;
		margin: 5px !important;
		text-indent: 0 !important;
	}

	/* 7. 이미지 최적화 */
	.content-area img {
		/* width: auto !important; */
		max-width: 100% !important;
		height: auto !important;
	}

	/* 8. 폰트 크기 강제 조정 */
	.content-area span, .content-area p, .content-area font {
		/* font-size: 14px !important; */ /* 너무 작거나 큰 폰트 통일 */
	}
}


/* 전체 컨테이너 스타일 */
.kpaa_2025_container-wrapper {
	width: 300px;
	font-family: 'Malgun Gothic', sans-serif;
	background-color: #ffffff;
}
/* 상단 정보 영역 */
.kpaa_2025_info-header {
	/* 상단 박스 스타일 */
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
	padding: 15px;
	padding-bottom: 25px; /* 버튼 아래 여백 확보 */
	overflow: hidden;
}

.kpaa_2025_label {
	color: #4a4a4a;
	font-weight: normal;
	margin-right: 15px;
	flex-shrink: 0;
	width: 100px; /* 레이블 너비 고정 */
}

.kpaa_2025_value {
	color: #000000;
	font-weight: 500;
}
/* 구분선 스타일 */
.kpaa_2025_divider {
	border-top: 1px solid #eeeeee;
	margin: 15px 0 10px 0;
}
/* 버튼 공통 스타일 */
.kpaa_2025_action-button {
	color: white;
	border: none;
	padding: 10px 15px;
	border-radius: 5px;
	font-size: 15px;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 5px;
}
/* 주 버튼 (구성원 명단, 가입 하기) */
.kpaa_2025_primary-green-button {
	background-color: #4CAF50;
}

@media ( hover : hover) {
	.kpaa_2025_primary-green-button:hover {
		background-color: #45a049;
	}
}
/* 보조 버튼 (상태 변경 관리) */
.kpaa_2025_secondary-green-button {
	background-color: #6a82ff; /* 이전 옅은색보다 진한 파란색으로 수정 */
	margin-top: 5px;
}
@media ( hover : hover) {
	.kpaa_2025_secondary-green-button:hover {
		background-color: #536bff; /* 마우스 오버 시: 기본색보다 조금 더 진하게 */
	}
}
.kpaa_2025_join-button {
	background-color: #ff9800; /* 주황색 (Orange 500) */
}
@media ( hover : hover) {
	.kpaa_2025_join-button:hover {
		background-color: #fb8c00; /* 마우스 오버 시: 약간 더 진한 주황색 */
	}
}
/* 탈퇴 버튼 기본 스타일 */
.kpaa_2025_leave-button {
	background-color: #f44336; /* 빨간색 (Red 500) */
	color: white; /* 글자색: 흰색 */
	border: none; /* 테두리 제거 (필요 시) */
	padding: 10px 20px; /* 여백 (필요 시) */
	cursor: pointer; /* 마우스 커서 변경 */
}

@media ( hover : hover) {
	/* 탈퇴 버튼 마우스 오버 시 스타일 */
	.kpaa_2025_leave-button:hover {
		background-color: #d32f2f; /* 마우스 오버 시: 약간 더 진한 빨간색 (Red 700) */
	}
}

/* 하단 메뉴 목록 스타일 */
.kpaa_2025_menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-top: 20px; /* 상단 박스와 20px 간격 유지 */
	border-radius: 10px; /* 하단 박스 둥근 모서리 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
	overflow: hidden;
}

.kpaa_2025_menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-top: 1px solid #eeeeee;
	font-size: 16px;
	font-weight: 700;
	color: #333333; /* 기본 글씨 색상 (원복 색상) */
	cursor: pointer;
}

/* 클릭하여 활성화된 상태 (JavaScript로 .active 클래스 토글) */
.kpaa_2025_menu-item.active {
	color: #007bff; /* 파란색 고정 */
}
/* ------------------------------------ */
.kpaa_2025_menu-list>:first-child {
	border-top: none;
}

.kpaa_2025_menu-list>:last-child {
	border-radius: 0 0 10px 10px;
}

/* '+' 버튼 제거 스타일 */
.kpaa_2025_icon {
	display: none;
}

/* 모바일 트리거 버튼 스타일 */
.sub-menu-trigger-wrap {
	text-align: right;
	margin-bottom: 15px;
}

.bt-sub-menu-open {
	background: var(--blue);
	color: #fff;
	padding: 10px 16px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
}

/* 모바일 사이드바 및 트리거 버튼 정렬 (1240px 미만) */
@media screen and (max-width: 1239.98px) {
	/* 1. 브레드크럼 컨테이너 설정 */
	.bread-crumb {
		display: flex !important;
		align-items: center;
		width: 100%; /* 부모 너비를 꽉 채워야 margin-left: auto가 작동합니다 */
	}

	/* 2. 브레드크럼 내부의 버튼 li 아이템 */
	.sub-menu-trigger-item {
		margin-left: auto !important; /* 브레드크럼 항목들 뒤에서 우측 끝으로 밀어냅니다 */
		padding-left: 0 !important; /* 기존 li 사이의 여백 제거 */
	}

	/* style.css에 정의된 구분선(|) 제거 */
	.sub-menu-trigger-item::after {
		display: none !important;
	}

	/* 버튼 디자인 보완 */
	.bt-sub-menu-open {
		background: var(--blue); /* style.css 변수 사용 */
		color: #fff !important;
		padding: 6px 10px;
		border-radius: 4px;
		line-height: 1;
		font-size: 1.2rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 3. 사이드바 동작 로직 (기본 유지) */
/* 	#ct .sub-wrap .lnb-wrap { */
/* 		display: block !important; */
/* 		position: static; */
/* 	} */
	.kpaa_2025_container-wrapper {
		position: fixed;
		top: 0;
		right: -320px; /* 기본 숨김 상태 */
		width: 300px;
		height: 100%;
		z-index: 2000;
		background: #fff;
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
		transition: right 0.3s ease-in-out;
		overflow-y: auto;
		padding-top: 20px;
		margin-top: 0 !important;
	}
	.kpaa_2025_container-wrapper.active {
		right: 0; /* 활성화 시 노출 */
	}

	/* 배경 딤(Dim) 처리 */
	.sub-sidebar-dim {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1999;
	}
	.sub-sidebar-dim.active {
		display: block;
	}

	/* 사이드바 내 닫기 버튼 영역 */
	.sidebar-close-wrap {
		text-align: right;
		padding: 0 20px 15px 20px;
		border-bottom: 1px solid var(--line);
		margin-bottom: 20px;
	}
	.bt-sidebar-close {
		font-size: 24px;
		color: var(--darkgray); /* style.css 변수 사용 */
	}
}

@media ( hover : hover) {
	.kpaa_2025_primary-green-button:hover {
		background-color: #45a049;
	}
	.kpaa_2025_secondary-green-button:hover {
		background-color: #536bff; /* 마우스 오버 시: 기본색보다 조금 더 진하게 */
	}
	.kpaa_2025_join-button:hover {
		background-color: #fb8c00; /* 마우스 오버 시: 약간 더 진한 주황색 */
	}

	/* 탈퇴 버튼 마우스 오버 시 스타일 */
	.kpaa_2025_leave-button:hover {
		background-color: #d32f2f; /* 마우스 오버 시: 약간 더 진한 빨간색 (Red 700) */
	}

	/* 3. (선택 사항) 마우스 오버 시 시각적 피드백 제공 */
	.data-row:hover .custom-checkbox-label {
		background-color: #f0f0f0; /* 마우스 오버 시 셀 배경색 변경 */
	}
	.custom-search-button:hover {
		background-color: #e0e0e0; /* 호버 시 버튼 배경색 살짝 어둡게 */
	}

	/* 마우스 오버 및 클릭 효과 (이전과 동일) */
	.unique-search-button:hover {
		background-color: #0069d9;
		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
	}
	main.index .index-sect1 .top-menu li a:hover {
		color: #4073D9;
	}
	.box-hover:hover {
		border: 2px solid #D8E6FF;
		box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.06);
	}
	.status-badge:hover {
		transform: translateY(-1px);
		filter: brightness(1.08);
	}
}

/* 1. 부모(ul, ol)의 기본 스타일은 비우고 여백만 확보 */
.note-editor .note-editable ul, 
.note-editor .note-editable ol {
    list-style: none !important; 
    padding: 0 !important;
    margin: 10px 0 10px 20px !important; /* 왼쪽 여백으로 공간 확보 */
}

/* 2. 실제 항목(li)에만 점 또는 숫자를 표시 */
.note-editor .note-editable ul li {
    list-style-type: disc !important;       /* 점(•) 하나만 표시 */
    display: list-item !important;          /* 리스트 아이템 형식 유지 */
    list-style-position: outside !important; /* 다시 outside로 조정하여 정렬 최적화 */
}

.note-editor .note-editable ol li {
    list-style-type: decimal !important;    /* 숫자(1, 2, 3) 하나만 표시 */
    display: list-item !important;
    list-style-position: outside !important;
}


@media screen and (max-width: 991.98px) {
    /* m-title1 내부의 줄바꿈 제거 */
    .board-list tr:has(.m-title) td.m-title1 br {
        display: none !important;
    }

    /* 또는 bbsTypeCdNms(분류)가 들어가는 영역의 줄바꿈 제거 */
    .board-list tr:has(.m-title) td[class*="m-meta"] br {
        display: none !important;
    }
}


/* 991px 이하 모바일에서만 작동 */
@media screen and (max-width: 991.98px) {
    /* 핵심: m-title 클래스를 가진 td가 들어있는 tr에만 스타일 적용 */
    .board-list tr:has(.m-title) {
        display: block !important;
        padding: 15px 10px !important;
        border-bottom: 1px solid var(--line) !important;
        overflow: hidden !important;
    }

    /* m-title이 있는 행의 thead는 숨김 */
    .board-list:has(.m-title) thead {
        display: none !important;
    }

    /* 해당 행의 모든 TD를 일단 숨김 */
    .board-list tr:has(.m-title) td {
        display: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* 0. [최상단 줄] m-title1 (제목 위에 한 줄로 표시) */
    .board-list tr:has(.m-title) td.m-title1 {
        display: block !important;
        width: 100% !important; /* 가로를 꽉 채워서 다음 요소가 아래로 내려가게 함 */
        margin-bottom: 8px !important; /* 제목과의 간격 */
        font-size: 0.9rem !important;
    }

    /* 1. [중간 줄] m-head(공지/분류) + m-title(제목) */
    .board-list tr:has(.m-title) td.m-head {
        display: block !important;
        float: left !important;
        width: auto !important;
        margin-right: 8px !important;
        clear: both !important; /* m-title1 아래쪽에서 새로 시작 */
    }

    /* 숫자 번호 숨기기 */
    .board-list tr:has(.m-title) td.m-head .info:not(:has(.badge)) {
        display: none !important;
    }

    .board-list tr:has(.m-title) td.m-title {
        display: block !important;
        overflow: hidden !important; /* float 옆 빈공간 채우기 */
        width: auto !important;
    }

    .board-list tr:has(.m-title) td.m-title .subject {
        display: flex !important;
        align-items: center !important;
    }

    .board-list tr:has(.m-title) td.m-title .subject a {
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
    }

    /* 2. [하단 줄] m-meta(부서/날짜) */
    .board-list tr:has(.m-title) td.m-meta-start {
        clear: both !important; /* 제목 줄 아래로 내림 */
        display: block !important;
        float: left !important;
        margin-top: 10px !important;
        margin-right: 15px !important;
    }

    .board-list tr:has(.m-title) td.m-meta {
        display: block !important;
        float: left !important;
        margin-top: 10px !important;
    }

    /* 정보 텍스트 정렬 */
    .board-list tr:has(.m-title) td[class*="m-meta"] .info {
        display: flex !important;
        align-items: center !important;
        color: var(--gray) !important;
        font-size: 13px !important;
    }

    /* 3. 공통 정리 */
    .board-list tr:has(.m-title) td::before { display: none !important; }
    .board-list tr:has(.m-title) td i { margin-right: 4px !important; }
}


.tag_item_box{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.6;
    height: 3.2em;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
}

@media (min-width: 992px) {
	.col-lg-test{
		flex:0 0 12%;
		max-width: 13%;
	}
}



@media (min-width: 992px) {
    .sg-form-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
    }

    .sg-form-row > label {
        flex: 0 0 10% !important;
        max-width: 10% !important;
        padding-left: 0px !important;
        margin-bottom: 0 !important;
        /* 인풋이랑 겹쳐서 주석처리 */
/*         white-space: nowrap; */
    }

    .sg-form-row > .sg-input-box {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }

    /* [신규] 한 줄을 꽉 채워야 하는 입력창 전용 클래스 (10% 라벨 제외 나머지 90%) */
    .sg-form-row > .sg-input-full {
        flex: 0 0 90% !important;
        max-width: 90% !important;
        padding-right: 0 !important;
    }

    .sg-input-first {
        padding-right: 30px !important; 
    }
    
    .sg-input-last {
        padding-right: 0 !important;
    }
    
    /* [추가] 라벨이 긴 경우를 위한 전용 행 클래스 */
    .sg-form-row.sg-row-long > label {
        flex: 0 0 15% !important; /* 라벨 너비를 18%로 확장 */
        max-width: 18% !important;
        padding-left: 0px !important; /* 글자가 붙지 않게 약간의 여백 */
    }

    .sg-form-row.sg-row-long > .sg-input-full {
        flex: 0 0 32% !important; /* 입력창은 나머지 82% 차지 */
        max-width: 32% !important;
    }
}

/* 992px 미만(0px ~ 991px)에서는 아무것도 하지 않음 
   => 부트스트랩 기본 CSS(col-md-2, col-lg-4 등)가 알아서 작동함 */















/* PC 버전 (992px 이상) */
@media (min-width: 992px) {
    .sg-atd-section {
        border-bottom: 1px solid #EFF2F8 !important;
        /* [수정] 위아래 패딩을 살짝 더 넓혀서 행 간 간격 확보 */
        padding: 8px 0 !important;
    }

    .sg-atd-group {
        display: flex !important;
        /* 항목명이 길어져도 전체 행 높이를 동일하게 유지 */
        align-items: stretch !important; 
        /* [수정] 항목(성명-번호-사무소) 간의 가로 간격을 더 넓힘 */
        gap: 25px !important;
    }

    .atd-item { 
        display: flex !important; 
        /* 레이블과 값 영역의 높이를 100% 일치시킴 */
        align-items: stretch !important; 
    }

    .atd-label { 
        font-weight: 700 !important; 
        color: #374151 !important; 
        margin-right: 12px !important; 
        text-align: left !important;
        white-space: normal !important; 
        word-break: keep-all !important; 
        flex-shrink: 0 !important; 
        line-height: 1.2 !important;
        
        /* 텍스트 세로 중앙 정렬 */
        display: flex !important;
        align-items: center !important;
    }

    .atd-value { 
        color: #111827 !important; 
        font-weight: 400 !important; /* 굵은 표시 제거 */
        /* [수정] 가운데 정렬 지우고 왼쪽 정렬로 고정 */
        text-align: left !important; 
        white-space: normal !important;
        word-break: break-all !important;
        line-height: 1.3 !important;
        border-radius: 4px;
        
        /* 값 영역 세로 중앙 정렬 및 높이 일치 */
        display: flex !important;
        align-items: center !important;
        padding: 6px 12px !important;
        flex: 1 !important;
    }
    
    /* [핵심] 영문 대응을 위한 항목별 기본 너비(flex-basis) 고정 */
    
    /* 1. 성명 영역: 고정폭 확보 */
    .atd-item-name { 
        flex: 0 0 160px !important; 
    }
    .atd-item-name .atd-label { width: 45px !important; }
    
    /* 2. 변리사 등록번호 영역: 영문 길이에 맞춰 충분한 고정폭(320px) 부여 */
    .atd-item-reg { 
        flex: 0 0 320px !important; 
    }
    /* 영문 항목명이 길어질 경우 아래로 떨어지도록 너비 제한 */
    .atd-item-reg .atd-label { width: 140px !important; } 
    
    /* 3. 사무소명 영역: 남은 공간을 모두 사용하되 항목명 너비는 고정 */
    .atd-item-off { 
        flex: 1 !important; 
    }
    .atd-item-off .atd-label { width: 80px !important; }
    
    /* 삭제 버튼: 세로 중앙 정렬 유지 */
    .atd-item-btn { 
        flex: 0 0 auto !important; 
        display: flex !important;
        align-items: center !important;
        margin-left: auto; /* 버튼을 오른쪽 끝으로 밀고 싶을 경우 사용 */
    }
}

/* 모바일 버전은 요청하신 대로 기존 왼쪽 정렬 설정을 그대로 유지합니다. */
/* 모바일은 요청하신 대로 건드리지 않고 원본 유지합니다. */

/* 태블릿 및 모바일 버전 (991px 이하) - 기존 왼쪽 정렬 유지 (수정 없음) */
@media (max-width: 991px) {
    .sg-atd-section {
        background: #fff !important;
        border: 1px solid #EFF2F8 !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
    }
    .sg-atd-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
    }
    .atd-item {
        display: flex !important;
        align-items: center !important;
        height: auto !important;    
        padding: 5px 0 !important;
        width: 100% !important;
    }
    .atd-label {
        font-weight: 800 !important;
        font-size: 14px !important;
        color: #374151 !important;
        width: 110px !important;
        flex-shrink: 0 !important;
        text-align: left !important;
    }
    .atd-value {
        font-weight: 400 !important;
        font-size: 15px !important;
        color: #111827 !important;
        text-align: left !important;
    }
    .atd-item-reg, .atd-item-off { 
        border-top: 1px dashed #f0f0f0 !important; 
        padding-top: 8px !important; 
    }
    .atd-item-btn {
        flex: 0 0 100% !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }
}



/* 991px 이하에서는 위의 모든 설정이 무시되므로 
   HTML에 적힌 col-md-2, col-lg-4 등이 원래대로 작동합니다. */
   
   
.mobile-close-btn {
  display: none;
}

@media screen and (max-width: 991.98px){
	main.index .index-sect3 .main-schedule .schedule-cont li a {
  		padding: 15px;
	}
}

/* 화면 너비가 768px 이하일 때만 적용 (모바일/태블릿) */
@media (max-width: 768px) {
  .mobile-close-btn {
  	margin-left: 10px;
    display: inline-block;
  }
  
  .board-list tr:has(.m-title) td.m-meta.m-mt-0 {
 	margin-top: 0 !important;
   }
   
   main.index .index-sect3 .main-schedule .schedule-cont li a {
  		padding: 17px 19px;
	}
}




#ct1 {
  overflow-x: clip;
  flex: 1;
  /* 만족도, 담당자 위치고정 */
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  #ct1.bg::before {
    content: "";
    position: absolute;
    top: 488px;
    left: 0;
    right: 0;
    height: 905px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, #F2F7FC 0%, #FFF 43.31%);
  }
}

#ct1 .sub-wrap {
  padding-top: 16px;
}

@media (min-width: 1240px) {
  #ct1 .sub-wrap {
    display: flex;
    padding-top: 42px;
	align-items: self-start;
	flex: 1;
    
  }
  #ct1 .sub-wrap .lnb-wrap {
    width: 284px;
    margin-right: 40px;
    flex-shrink: 0;
    position: sticky;
    top: 56px;
  }
  #ct1 .sub-wrap .content-wrap {
    flex: 1;
    width: calc(100% - 284px - 56px);
    padding-left: 22px;
    padding-right: 22px;
    background-color: white;
    /* 만족도, 담당자 위치고정 */
    display: flex;
    flex-direction: column;
    align-self: normal;
  }
}

@media (max-width: 1239.98px) {
  #ct1 .sub-wrap .lnb-wrap {
    display: none;
  }
}

#ct1 .sub-wrap .lnb {
  border-radius: 16px;
  background: var(--GrayScale-White, #FFF);
  box-shadow: 0 0 30px 0 rgba(69, 89, 143, 0.12);
  margin-bottom: 60px;
}

#ct1 .sub-wrap .lnb a {
  display: block;
  position: relative;
}

#ct1 .sub-wrap .lnb br {
  display: none;
}

#ct1 .sub-wrap .lnb h3 {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
@media ( hover : hover) {
	#ct1 .sub-wrap .lnb h3:hover {
	  background-color: #F5F8FD;
	}
}

#ct1 .sub-wrap .lnb h3::after {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  right: 20px;
  width: 16px;
  height: 16px;
  background: url(../images/sitemap-mo-open.svg) no-repeat center center/contain;
}

#ct1 .sub-wrap .lnb h3.on {
  border-bottom: 4px solid var(--blue);
}

#ct1 .sub-wrap .lnb h3.on::after {
  background: url(../images/sitemap-mo-close.svg) no-repeat center center/contain;
}

#ct1 .sub-wrap .lnb h3.on + .dep2 {
  display: block;
}

#ct1 .sub-wrap .lnb .dep2 {
  display: none;
  background-color: #F5F8FD;
  padding: 0 8px;
}

#ct1 .sub-wrap .lnb .dep2 > li {
  padding: 0;
}

#ct1 .sub-wrap .lnb .dep2 > li > a {
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
}

#ct1 .sub-wrap .lnb .dep3 > li > a {
  padding: 6px 16px;
}

#ct1 .sub-top {
  padding-bottom: 64px;
}

#ct1 .sub-top .sub-hd h3 {
  font-weight: 800;
  margin-top: 24px;
  line-height: 1;
}

#ct1 .sub-top .share button {
  margin-left: 4px;
}

@media (min-width: 992px) {
  #ct1 .sub-top {
    display: flex;
  }
  #ct1 .sub-top:has(.board-view-hd) {
    padding-bottom: 40px;
  }
  #ct1 .sub-top .sub-hd {
    flex: 1;
  }
}

/* 2번 E */

/* 3번 S */
@media screen and (max-width: 991.98px) {
  #ct1 .sub-top {
    padding-bottom: 16px;
  }
  #ct1 .sub-top .sub-hd .icon-home {
    width: 16px;
    height: 16px;
  }
  #ct1 .sub-top .sub-hd h3 {
    font-size: 32px !important;
  }
  #ct1 .sub-top .share {
    margin-top: 6px;
    text-align: right;
  }
  #ct1 .sub-top .share img {
    width: 36px;
  }
}

#ct1 .sub-body {
  position: relative;
  padding-bottom: 80px;
}

@media screen and (max-width: 991.98px) {
  #ct1 .sub-body {
    padding-bottom: 60px;
  }
}

.mt-space, .public-patent .attorney-process > dl, #ct1 .sub-body > div + div:not([class*=mt]) {
  margin-top: var(--mt-space);
}

@media screen and (max-width: 1239.98px) {
    /* 1. 부모 wrap이 display: none되는 것을 방지 (가장 중요) */
    #ct1 .sub-wrap .lnb-wrap {
        display: block !important; /* 숨김 해제 */
        width: 0; /* 공간은 차지하지 않게 함 */
        height: 0;
        margin: 0;
        padding: 0;
    }

    /* 2. 사이드바 본체 설정 */
    #ct1 .kpaa_2025_container-wrapper#subSidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: -320px !important; /* 평소엔 숨김 */
        width: 300px !important;
        height: 100% !important;
        z-index: 9999 !important; /* 헤더보다 높게 */
        background: #fff !important;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease-in-out !important;
        margin-top: 0 !important;
    }

    /* 3. 활성화 시 나타남 */
    #ct1 .kpaa_2025_container-wrapper#subSidebar.active {
        right: 0 !important;
    }

    /* 4. 배경 Dim 설정 */
    .sub-sidebar-dim {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }
    .sub-sidebar-dim.active {
        display: block !important;
    }
}






























/* ========================================================
   1. PC 버전 레이아웃 보호 (992px 이상)
   - 모바일 전용 클래스가 PC 레이아웃을 깨뜨리지 않도록 방어
   ======================================================== */
@media screen and (min-width: 992px) {
    .sg-flex-list {
        display: table !important;
        width: 100% !important;
    }
    .sg-flex-list tr {
        display: table-row !important;
    }
    .sg-flex-list td {
        display: table-cell !important;
        vertical-align: middle;
    }
    .sg-flex-list .m-lbl {
        display: none !important;
    }

    /* PC에서는 버튼 그룹 기능을 끄고 기본 흐름을 따름 */
    .m-btn-group {
        display: block !important; 
    }
    /* HTML에 적힌 w-100 mb-1이 PC에서 그대로 작동함 */
}

/* ========================================================
   2. 모바일 버전 (991.98px 이하) 
   - 버튼 3개를 강제로 한 줄(Row) 배치
   ======================================================== */
@media screen and (max-width: 991.98px) {
    .sg-flex-list, 
    .sg-flex-list tbody, 
    .sg-flex-list tr {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .sg-flex-list thead { 
        display: none !important; 
    }
    .sg-flex-list tr {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid var(--line) !important;
    }
    .sg-flex-list td {
        display: none !important;
    }
    .sg-flex-list td[class*="m-"] {
        display: flex !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: auto !important;
    }

    /* [핵심] 모바일 전용 버튼 한 줄 배치 클래스 */
    .m-btn-group {
        display: flex !important;  /* 모바일에서만 가로 정렬 활성화 */
        flex: 1;                 /* 라벨 옆 남은 공간 꽉 채우기 */
        gap: 4px;                /* 버튼 사이 간격 */
        width: 100%;
    }
    .m-btn-group .btn {
        flex: 1 !important;         /* 3개 버튼이 정확히 33.3%씩 차지 */
        width: auto !important;     /* HTML의 w-100 무시 */
        margin: 0 !important;       /* HTML의 mb-1 무시 */
        padding: 8px 2px !important;/* 좁은 화면 대비 패딩 축소 */
        font-size: 12px !important; /* 글자 크기 최적화 */
        white-space: nowrap;        /* 줄바꿈 방지 */
        letter-spacing: -1px;       /* 자간 축소로 글자 안 잘리게 처리 */
    }

    /* 너비 제어 클래스들 */
    .sg-flex-list td.m-100, 
    .sg-flex-list td.m-full-row { flex: 0 0 100% !important; max-width: 100% !important; }
    .sg-flex-list td.m-50 { flex: 0 0 50% !important; max-width: 50% !important; }
    
    .sg-flex-list .m-lbl {
        display: inline-block !important;
        font-weight: 700 !important;
        color: var(--gray) !important;
        margin-right: 10px !important;
        font-size: 14px !important;
        min-width: 65px; 
        flex-shrink: 0;
    }
    .sg-flex-list .m-val {
        flex: 1;
        min-width: 0;
        display: inline-block; /* br 무력화를 위해 block 성질 부여 */
    }
    .sg-flex-list .m-val br {
        display: none !important; /* m-val 안에 있는 모든 br 태그 숨김 */
    }
    .sg-flex-list .m-val1 {
        flex: 1;
        min-width: 0;
        display: inline-block; /* br 무력화를 위해 block 성질 부여 */
    }

    /* 제목/너비 클래스 유지 */
    .sg-flex-list td.m-title-row { flex: 0 0 100% !important; max-width: 100% !important; }
    .sg-flex-list td.m-20 { flex: 0 0 20% !important; max-width: 20% !important; }
    .sg-flex-list td.m-30 { flex: 0 0 30% !important; max-width: 30% !important; }
    .sg-flex-list td.m-40 { flex: 0 0 45% !important; max-width: 45% !important; margin: 0;}
    .sg-flex-list td.m-50 { flex: 0 0 45% !important; max-width: 45% !important; margin: auto;}
    .sg-flex-list td.m-60 { flex: 0 0 50% !important; max-width: 50% !important; margin: 0;}
    .sg-flex-list td.m-70 { flex: 0 0 70% !important; max-width: 70% !important; }
    .sg-flex-list td.m-80 { flex: 0 0 80% !important; max-width: 80% !important; }
}

















@media (max-width: 991px) {
    .pc-only-print {
        display: none !important;
    }
}



#google_translate_info_div {
    background-color: #f0f7ff !important; /* 연한 블루 배경 */
    border: 1px solid #d1e3ff !important;
    border-left: 5px solid #007bff !important; /* 왼쪽 강조선 */
    padding: 12px 20px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    align-items: center !important;
}

#google_translate_info_div span {
    color: #0056b3 !important; /* 텍스트 색상 */
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: -0.5px !important;
}


.modal-content {
    height: 100%; /* 전체 900px을 다 쓰도록 설정 */
    display: flex;
    flex-direction: column;
}

.modal-body {
    flex: 1; /* 남은 공간을 body가 다 차지 */
    overflow: hidden;
}

.modal-body img {
    width: 100% !important;
    height: 100% !important;
/*     display: block; */
    object-fit: contain;
}

.modal-body p:has(img) {
    margin: 0; /* 에디터가 자동 생성하는 p태그 여백 제거 */
    height: 100%;
}


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




@media print {
    /* 1. 기본 배율 및 여백 (가독성 유지) */
    @page {
        size: A4;
        margin: 10mm 10mm; /* 여백을 조금 더 줄여 공간 확보 */
    }

    html, body {
        zoom: 0.95 !important;
        background: #fff !important;
    }

    /* 2. 테이블 및 셀 상하 여백 강제 축소 (핵심) */
    .content-area table, 
    .content-area td, 
    .content-area th {
        padding-top: 2px !important;    /* 40px 등 과도한 상단 여백을 2px로 축소 */
        padding-bottom: 2px !important; /* 하단 여백 축소 */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 3. 문단(p) 및 줄바꿈(br) 공백 제거 */
    .content-area p {
        margin: 0 !important;           /* 문단 사이 간격 제거 */
        padding: 0 !important;
        line-height: 1.3 !important;    /* 줄 간격 살짝 조임 */
    }
    
    .content-area p br, 
    .content-area br {
        content: "" !important;         /* 에디터가 넣은 의미 없는 빈 줄 무력화 */
        display: none !important;
    }

    /* 4. 이미지 설정 유지 (기존 요청 사항) */
    .content-area img, .txc-image {
        max-width: 100% !important;
        max-height: 160mm !important;   /* 테이블 압축을 위해 높이 제한을 살짝 더 조절 */
        height: auto !important;
        object-fit: contain !important;
        margin: 5px auto !important;    /* 이미지 상하 여백도 축소 */
    }

    /* 5. 뉴스레터 전용 700px 테이블 보정 */
    .content-area div[style*="width:700px"],
    .content-area table[width="700"] {
        width: 100% !important;
        max-width: 700px !important;
        margin: 0 auto !important;
    }

    /* 6. 페이지 상단/하단 불필요한 섹션 공백 축소 */
    .sub-top { padding-bottom: 5px !important; } /* 제목 아래 공백 최소화 */
    .bx-info { margin-bottom: 10px !important; padding: 10px !important; } /* 안내 박스 축소 */
    .common-box { margin-bottom: 10px !important; } /* 하단 만족도 조사 위 공백 축소 */

    /* 7. 숨김 항목 (인쇄 시 불필요) */
    header, footer, .lnb-wrap, .new-sf-box, .share, .pager, .btn-wrap, .float-link {
        display: none !important;
    }
}

.snsSwiper{
	width: 100%;
} 

@media screen and (max-width: 1239px) {
	.snsSwiper{
		width: 83%;
	} 
}

@media screen and (max-width: 990px) {
	.snsSwiper{
		width: 100%;
	} 
}

@media screen and (max-width: 767px) {
	.snsSwiper{
		width: 83%;
/* 		width: 70%; */
	} 
}

@media screen and (max-width: 575px) {
	.snsSwiper{
		width: 70%;
/* 		width: 51%; */
	}
	main.index .index-sect4 .community-wrap .comm-cont .swiper-slide a > div{
		padding: 8% 4%;
	}
}

.next_swiper .swiper-wrapper .swiper-slide {
	display: flex;
    align-items: flex-start;
}

.next_swiper .swiper-wrapper{
	padding: 15px 22px;
    box-sizing: border-box;
}

.file-deleted{
	text-decoration: line-through;
    color: red !important;
    pointer-events: none;
}

















/* ========================================================
   1. PC 버전 레이아웃 보호 (992px 이상)
   ======================================================== */
@media screen and (min-width: 992px) {
	.sg-flex-table {
		display: table !important;
		width: 100% !important;
	}
	.sg-flex-table tr {
		display: table-row !important;
	}
	.sg-flex-table td {
		display: table-cell !important;
		vertical-align: middle;
		border-bottom: 1px solid #ddd; /* 기본 테두리 */
	}
	.sg-flex-table .m-lbl {
		display: none !important; /* PC에선 모바일 라벨 숨김 */
	}
}

/* ========================================================
   2. 모바일 버전 (991.98px 이하) 
   ======================================================== */
@media screen and (max-width: 991.98px) {
	.sg-flex-table, .sg-flex-table tbody, .sg-flex-table tr {
		display: block !important;
		width: 100% !important;
	}

	/* PC 전용 td(제목칸) 숨기기 */
	.sg-flex-table td.pc-only {
		display: none !important;
	}
	.sg-flex-table tr {
		padding: 10px 0 !important;
		border-bottom: 1px solid #eee !important;
	}

	/* m- 클래스가 붙은 td만 보여주기 */
	.sg-flex-table td[class*="m-"] {
		display: flex !important;
        padding: 6px 0px !important;
        width: 100% !important;
        border: none !important;
        align-items: center !important;
        justify-content: flex-start !important; /* 왼쪽부터 차례대로 배치 */
	}

	/* 라벨 스타일 */
	.sg-flex-table .m-lbl {
		display: inline-block !important;
		font-weight: 700 !important;
		color: #666 !important;
		font-size: 14px !important;
		margin-right: 10px !important; /* 제목과 값 사이의 간격 */
        min-width: 140px; /* 제목들의 시작 위치를 맞추고 싶다면 유지, 아니면 삭제 */
        flex-shrink: 0;
	}

	/* 값 스타일 */
	.sg-flex-table .m-val {
		font-size: 14px;
		color: #333;
		text-align: right;
	}

	/* 버튼이 있는 칸 중앙 정렬 */
	.sg-flex-table td.m-btn-center {
		justify-content: center !important;
		padding-top: 15px !important;
	}
	.sg-flex-table .bt {
		width: 100%;
		max-width: 150px;
	}
}










/* ========================================================
   [등록일 전용 클래스] 
   1. sf-item-full : 한 줄에 1개 (100% 점유)
   2. sf-item-side : 한 줄에 2개 나란히 배치
   ======================================================== */

@media screen and (min-width: 992px) {
    /* 공통: 날짜 입력창 크기 및 간격 고정 */
    div.new-sf-item .cont.sf-date-pair .form-control {
        width: 137px !important;
        min-width: 137px !important;
    }
    div.new-sf-item .cont.sf-date-pair {
        display: flex !important;
        gap: 8px !important;
        flex: none !important;
    }

    /* [CASE 1] 등록일이 1개일 때 (한 줄 독점) */
    div.new-sf-item.sf-item-full {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    div.new-sf-item.sf-item-full .cont.sf-date-pair {
        width: 420px !important; /* 만족하셨던 그 너비 */
    }

    /* [CASE 2] 등록일이 2개일 때 (나란히 배치) */
    div.new-sf-item.sf-item-side {
        flex: 0 0 auto !important; /* 100%를 해제하여 옆에 공간 허용 */
        width: auto !important;
    }
    div.new-sf-item.sf-item-side .cont.sf-date-pair {
        width: 420px !important; /* 사이즈는 동일하게 유지 */
    }
}

/* --- 모바일 버전: 두 케이스 모두 꽉 채우기 --- */
@media screen and (max-width: 991.98px) {
    div.new-sf-item.sf-item-full,
    div.new-sf-item.sf-item-side {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .cont.sf-date-pair {
        flex: 1 !important;
        width: auto !important;
        display: flex !important;
    }
    .cont.sf-date-pair .form-control {
        flex: 1 !important;
        width: 0 !important;
        min-width: 0 !important;
    }
}



.nav-mobile{
	display: none;
}

@media screen and (max-width: 991.98px) {
	.nav-pc{
		display: none !important;
	}
	
	.nav-mobile{
		display: flex;
        justify-content: center;
        padding: 10px 0;
	}	
	
	main.index .index-sect4{
		padding: 40px 0 0 0;
	}
}

.icon-small{
	font-size: 1rem !important;
	width: 1rem !important;
	height: 1rem !important;
}

.org-btn1{
	padding: 0.5rem 0.75rem;
    height: 32px;
    align-self: center;
}

img.mini_img {
/* 	max-width: 100px; */
/* 	max-height: 100px; */
/* 	border-radius: 15px; */
/* 	border: 1px solid #eee; */
    width: 100px !important;
    height: auto !important;
    max-width: min(100px, 30vw) !important;
    aspect-ratio: 1 / 1.3;
    overflow: hidden;
    background-color: #eee;
    border: 1px solid #eee;
    border-radius: 15px;
    display: inline-block;
    object-fit: fill;
}



.boardTitleCustom{
font-size : 28px;
margin-top:20px !important;
}
.boardTitleCustomSubtop{

padding-bottom : 20px !important;  
}

@media screen and (max-width: 991.98px) {
	.boardTitleCustom{
		font-size : 26px;
		margin-top:20px !important;
	}
}


.boardTitleCustom1{
font-size : 28px;
margin-top:20px !important;
margin-bottom:20px !important;
}

@media screen and (max-width: 991.98px) {
	.boardTitleCustom1{
		font-size : 26px;
		margin-top:20px !important;
	}
}

@media (min-width: 992px) {
  .btn-custom {
    min-width: 98px; /* PC에서만 100px 유지 */
  }
}

@media (max-width: 991.98px) {
  .btn-custom {
    min-width: 0;    /* 모바일에서는 제한 해제 */
  }
}


.bx-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 10px;
  align-items: start;
}

.bx-grid > p {
  margin: 0;
}

/* 아이콘 */
.bx-grid > p:first-child {
  grid-row: 1 / span 2;
  align-self: center;
}

.bx-grid:not(:has(.text-lg)) > p:first-child {
  grid-row: 1 / 1;
}

/* 제목 */
.bx-grid > p.h5 {
  grid-column: 2;
}

/* 내용 */
.bx-grid > p.text-lg {
  grid-column: 2;
}

.bx-grid:not(:has(.text-lg)) > p.h5 {
  align-self: center;
}


@media (max-width: 991.98px) {
  .bx-grid > p:first-child {
    grid-row: 1;
  }
  
  .bx-grid img{
  	width: 60px;
  	height: 60px;
  }

  .bx-grid > p.text-lg {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 1rem !important;
    margin-left: 15px;
  }
  
  .bx-grid > p.h5 {
    align-self: center;
  }
}

@media (max-width: 767.98px) {
    .bx-grid img{
	  	width: 45px;
	  	height: 45px;
	  }
	  
	  .bx-grid > p.h5 {
	    font-size: 20px !important;
	  }
}

/* 기본 상태: 모바일 전용 요소는 숨김 */
.sg-flex-list .mobile-only {
    display: none !important;
}

@media screen and (max-width: 400px) {
    .tab-menu-sub li a {
        font-size: 14px;
    }
}

.btn-new-wrap{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 0;
}

.notKoSpace{
	white-space : normal !important;
	word-break : break-word;
}


@media screen and (max-width: 991.98px) {
	
	.mobileBr br {
        display: none !important;
    }
    
    .translated-menu{
    	height: calc(var(--vh, 1vh) * 100 - 100px) !important;	
    }
    
}

.translation_all :not(.new-sf-grid *):not(.nav-wrap .tab-menu){
	word-break: break-word !important;
	flex-wrap: wrap; 
}

/* 기본 레이아웃: 한 줄로 쭉 세우기 */
.diary-list-item {
    display: flex;
    flex-wrap: wrap;       /* 공간 부족시 자동 줄바꿈 */
    align-items: center;
    justify-content: space-between;
    gap: 10px;             /* 요소 간 간격 */
    padding: 10px 15px;
}

.diary-info-container {
    display: flex;
    flex-wrap: wrap;       /* 품목명과 뱃지 사이 줄바꿈 허용 */
    align-items: center;
    gap: 8px;
    flex: 1;               /* 가능한 넓은 공간 차지 */
    min-width: 0;          /* 텍스트 넘침 방지 */
}

.diary-item-title {
    font-weight: bold;
    word-break: break-all; /* 긴 단어 줄바꿈 */
}

.diary-badge-group {
    display: flex;
    gap: 5px;
    flex-shrink: 0;        /* 뱃지가 찌그러지지 않게 */
}

/* 500px 밑으로 갈 때의 미세 조정 */
@media (max-width: 500px) {
    .diary-list-item {
        /* 필요하다면 여기에서 패딩을 조절하거나 
           특정 요소의 너비를 100%로 강제할 수 있습니다. */
    }
    
    .diary-delete-btn {
        /* 모바일에서 삭제 버튼이 너무 작으면 
           여기서 너비를 조금 더 키울 수 있습니다. */
    }
}

@media (max-width: 991.98px){
	header#hd .hd-top .hd-util .member a{
		text-wrap: wrap;
	}
}

.no-tl{
	
}