/* 기본 초기화 및 변수 (그라데이션 추가) */
:root {
    --primary-gradient: linear-gradient(135deg, #0f2b5c 0%, #3a1e94 100%); /* 다크 네이비 to 바이올렛 */
   /* --accent-gradient: linear-gradient(135deg, #1e63e9 0%, #9e1eea 100%); /* 세련된 블루 to 바이올렛 */
	/*--accent-gradient: linear-gradient(135deg, #1e63e9 0%, #9e1eea 100%); /* 세련된 블루 to 바이올렛 */
    --text-color: #333333;
    --bg-light: #f4f7f6;
    --border-color: #e9ecef;
    --fancy-shadow: 0 10px 30px rgba(15, 43, 92, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Pretendard', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: #fff;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 헤더 스타일 */
	.header {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(5px);
		border-bottom: 1px solid rgba(15, 43, 92, 0.1);
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	.header-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90px;
	}

	.logo a {
		font-size: 28px;
		font-weight: 900;
		background: var(--text-color);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		letter-spacing: -1.5px;
	}

	.nav-list {
		display: flex;
		list-style: none;
		gap: 40px;
	}

	.nav-list a {
		font-size: 16px;
		font-weight: 700;
		color: var(--text-color);
		position: relative;
		padding-bottom: 5px;
	}

	.nav-list a::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 2px;
		background: var(--accent-gradient);
		transition: width 0.3s ease;
	}

	.nav-list a:hover::after { width: 100%; }

	.menu-toggle {
		display: none;
		background: none;
		border: none;
		cursor: pointer;
		flex-direction: column;
		gap: 6px;
	}

	.menu-toggle span {
		display: block;
		width: 25px;
		height: 2px;
		background-color: var(--text-color);
		transition: 0.3s;
	}
/* 헤더 스타일 */

/* 화려한 메인 비주얼 (Hero) */
.hero {
    position: relative;
    background: var(--primary-gradient); /* 이미지 없을 때 대비 */
    color: #fff;
    padding: 50px 0;
    text-align: center;
    overflow: hidden;
}

/* 슬라이더 이미지 컨테이너 */
.slider-images {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; /* 도형 위에 이미지 */
}

.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* 부드러운 페이드 */
}

.slide.active { opacity: 1; }

/* 배경 다각형 */
.hero-bg-shapes {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}

.hero-bg-shapes .shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    transform: rotate(45deg);
    transition: transform 0.1s ease-out;
}

.shape-1 { width: 300px; height: 300px; top: -100px; left: -100px; background: linear-gradient(135deg, rgba(30, 99, 233, 0.2), rgba(158, 30, 234, 0.1)); }
.shape-2 { width: 500px; height: 500px; bottom: -200px; right: -150px; background: linear-gradient(135deg, rgba(158, 30, 234, 0.1), rgba(30, 99, 233, 0.2)); }
.shape-3 { width: 150px; height: 150px; top: 50%; left: 70%; background: rgba(255, 255, 255, 0.03); }

.hero-content {
	text-align:left;
    position: relative;
    z-index: 10;
    margin-bottom: 220px;	
}

.hero-content h2 {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -2px;
    color: #000;	
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #000;
}

.btn-fancy {
    display: inline-block;
    background: var(--accent-gradient);
    color: #000;
    padding: 15px 40px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 16px;
    transition: transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 10px 20px rgba(30, 99, 233, 0.3);
}

.btn-fancy:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(30, 99, 233, 0.5);
}

/* 슬라이더 네비게이션 점 */
.slider-nav {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active { background-color: #fff; }
.dot:hover:not(.active) { background-color: rgba(255, 255, 255, 0.8); }

/* 콘텐츠 섹션 */
.section { padding: 40px 0; }
.section-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.section-title h3 { font-size: 28px; color: #111; font-weight: 800; }
.more-link { font-size: 14px; color: #777; font-weight: 600; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card-fancy { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); padding: 30px; border-radius: 15px; box-shadow: var(--fancy-shadow); transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; cursor: pointer; overflow: hidden; position: relative; }
.card-fancy:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(30, 99, 233, 0.2); border-color: rgba(30, 99, 233, 0.3); }
.card-fancy::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--accent-gradient); opacity: 0; transition: opacity 0.4s ease; z-index: -1; }
.card-fancy:hover::before { opacity: 0.02; }

.badge { display: inline-block; font-size: 12px; padding: 6px 12px; border-radius: 20px; font-weight: 700; margin-bottom: 20px; }
.badge.notice { background: linear-gradient(135deg, rgba(30, 99, 233, 0.1), rgba(30, 99, 233, 0.2)); color: var(--accent-color); }
.badge.dynamic { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2)); color: #10b981; }

.card h4 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.card p { font-size: 15px; color: #555; margin-bottom: 25px; height: 48px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .date { font-size: 13px; color: #999; font-weight: 600; }

.footer { background: #111; padding: 60px 0; font-size: 14px; color: #bbb; }
.footer-info p { margin-bottom: 8px; }
.copyright { margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 20px; text-align: center; }

/* 반응형 */
@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .nav { display: none; position: absolute; top: 90px; left: 0; width: 100%; background: #fff; border-bottom: 1px solid var(--border-color); }
    .nav.active { display: block; }
    .nav-list { flex-direction: column; gap: 0; padding: 10px 0; }
    .nav-list li a { display: block; padding: 15px 20px; border-bottom: 1px solid var(--border-color); }
    .hero-content h2 { font-size: 36px; }
    .hero-content p { font-size: 16px; }
    .grid-3 { grid-template-columns: 1fr; }
    .footer-wrap { flex-direction: column; align-items: center; text-align: center; }
}




/* ==========================================================================
   화려하고 유연한 멀티 그리드 레이아웃 (1단, 2단, 3단, 4단)
   ========================================================================== */

/* 기본 공통 갭 설정 */
.grid-1, .grid-2, .grid-3, .grid-4 {
    display: grid;
    gap: 30px;
    margin-bottom: 20px;
}

/* PC 환경 (기본 설정) */
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-1 { grid-template-columns: 1fr; }


/* 반응형: 태블릿 및 중소형 모니터 (구간 분할로 더 세련되게 처리) */
@media (max-width: 992px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr); /* 4단 -> 2단으로 축소 */
    }
    .grid-3 {
        grid-template-columns: repeat(2, 1fr); /* 3단 -> 2단으로 축소 */
    }
    /* 2단과 1단은 태블릿에서도 유지하기 적당하므로 그대로 둡니다. */
}


/* 반응형: 모바일 기기 (기존 미디어 쿼리 블록 안에 합치거나 하단에 추가) */
@media (max-width: 768px) {
    /* 모바일에서는 화면이 좁으므로 모든 그리드를 1단으로 정렬하여 가독성을 높입니다. */
    .grid-4, .grid-3, .grid-2, .grid-1 {
        grid-template-columns: 1fr;
    }
    
    /* 모바일 환경에서는 여백을 조금 줄여 콤팩트하게 만듭니다. */
    .grid-1, .grid-2, .grid-3, .grid-4 {
        gap: 20px;
    }
}


/* ==========================================================================
   하나의 카드 내부 공지사항 5개 목록 스타일 
   ========================================================================== */

/* 공지사항 보드 카드의 여백 조정 */
.notice-board-card {
    padding: 20px 40px; /* 위아래는 콤팩트하게, 좌우는 넓게 */
}

.notice-list {
    list-style: none;
}

/* 각 공지사항 줄바꿈 및 정렬 */
.notice-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(15, 43, 92, 0.08);
    transition: transform 0.3s ease;
}

/* 마지막 줄은 테두리 제거 */
.notice-item:last-child {
    border-bottom: none;
}

/* 공지 내부 배지 정렬 규격화 */
.notice-item .badge {
    margin-bottom: 0; /* 기존 마진 상쇄 */
    margin-right: 20px;
    flex-shrink: 0; /* 크기 고정 */
    width: 60px;
    text-align: center;
}

/* 공지사항 제목 (가운데 영역을 꽉 채우도록 설정) */
.notice-subject {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 글자가 넘치면 ... 처리 */
    padding-right: 20px;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

/* 날짜 스타일 */
.notice-item .date {
    font-size: 14px;
    color: #999;
    flex-shrink: 0;
}

/* 🔥 마우스 호버 시 화려한 한 줄 애니메이션 효과 */
.notice-item:hover {
    transform: translateX(5px); /* 줄 전체가 오른쪽으로 살짝 이동 */
}

.notice-item:hover .notice-subject {
    color: var(--accent-color); /* 제목 색상이 세련된 블루로 변경 */
    padding-left: 5px; /* 제목이 부드럽게 밀리는 느낌 연출 */
}


/* ==========================================================================
   반응형 모바일 환경 설정
   ========================================================================== */
@media (max-width: 768px) {
    .notice-board-card {
        padding: 15px 20px; /* 모바일에서는 카드 내부 여백 축소 */
    }

    .notice-item {
        flex-wrap: wrap; /* 모바일에서 공간 부족 시 아래로 떨어지게 */
        padding: 15px 0;
        position: relative;
    }

    .notice-subject {
        width: calc(100% - 80px); /* 배지 제외한 나머지 공간 확보 */
        font-size: 15px;
        padding-right: 0;
    }

    .notice-item .date {
        width: 100%;
        margin-top: 8px;
        padding-left: 80px; /* 배지 너비만큼 띄워서 정렬 맞춤 */
        font-size: 12px;
    }
}

/* ==========================================================================
   이미지 타입 카드 스타일 (화려한 줌인 효과)
   ========================================================================== */

/* 이미지 카드는 내부 여백을 없애고 이미지가 꽉 차게 만듭니다. */
.card-image-type {
    padding: 0 !important; /* 기존 card의 padding을 제거 */
    overflow: hidden;
}

/* 이미지를 감싸는 프레임 */
.card-img-wrap {
    width: 100%;
    height: 220px; /* 이미지 세로 크기 지정 */
    overflow: hidden; /* 마우스 호버 시 이미지가 커져도 카드 밖으로 안 나가게 격리 */
    background-color: #eee;
}

/* 이미지 기본 스타일 */
.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율을 유지하며 영역을 꽉 채움 */
    transition: transform 0.5s ease; /* 부드러운 확대 애니메이션 타임 */
}

/* 텍스트가 들어가는 하단 콘텐츠 영역 */
.card-img-content {
    padding: 25px;
}

.card-image-type h4 {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
}

.card-image-type p {
    font-size: 14px;
    color: #666;
    margin-bottom: 0; /* 아래 여백 상쇄 */
    margin-top: 8px;
}

/* 🔥 마우스 호버 시 이미지 줌인(Zoom-in) 시각 효과 */
.card-image-type:hover .card-img-wrap img {
    transform: scale(1.1); /* 이미지를 10% 확대 */
}


/* ==========================================
   [수정] 대메뉴 호버 시 서브메뉴 드롭다운 (원래 디자인 유지)
============================================ */

/* [1] PC 환경 (화면 넓이 1025px 이상) */
@media screen and (min-width: 1025px) {
    /* 1. 대메뉴 li에 기준점 설정 (서브메뉴가 대메뉴 기준으로 정렬되도록) */
    .nav-list > li {
        position: relative;
    }

    /* 2. 서브메뉴 기본 상태: 절대 위치(absolute)로 띄우고 숨김 */
    .nav-list > li .sub-nav-list {
        display: block !important;
        position: absolute;
        top: 100%; /* 대메뉴 바로 아래에 위치 */
        left: 50%;
        transform: translateX(-50%) translateY(10px); /* 가운데 정렬 및 약간 아래 배치 */
        
        /* 스타일링 (원하시는 디자인에 맞게 조절 가능) */
        min-width: 140px; 
        background: #ffffff; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* 부드러운 그림자 */
        padding: 8px 0;
        margin: 0;
        list-style: none;
        border-radius: 4px; /* 테두리 살짝 둥글게 */
        
        /* 애니메이션 효과 (스르륵 나타남) */
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
        z-index: 999;
    }

    /* 3. 대메뉴에 마우스 올렸을(Hover) 때 서브메뉴 보이게 처리 */
    .nav-list > li:hover .sub-nav-list {
        visibility: visible;
        opacity: 1;
        transform: translateX(-50%) translateY(0); /* 원래 위치로 0.25초 동안 스르륵 올라오며 등장 */
    }

    /* 4. 서브메뉴 내부 링크 기본 스타일 */
    .nav-list > li .sub-nav-list a {
        display: block;
        padding: 8px 16px;
        color: #444444;
        font-size: 14px;
        text-decoration: none;
        text-align: center;
        white-space: nowrap; /* 글자 줄바꿈 방지 */
        transition: background 0.2s, color 0.2s;
    }

    /* 5. 서브메뉴 내부에 마우스 올렸을 때 강조 효과 */
    .nav-list > li .sub-nav-list a:hover {
        background: #f5f6f8;
        color: #000000;
    }
}

/* [2] 모바일 환경 (화면 넓이 1024px 이하) */
/* ==========================================================================
   반응형 모바일 환경 설정 (1024px 이하) - 어코디언 최적화 수정
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* 1. 평소에는 서브메뉴를 완전히 숨깁니다 (jQuery slide 효과를 위해 !important 제거) */
    .nav-list > li .sub-nav-list {
        display: none; 
        visibility: visible !important; 
        opacity: 1 !important;          
        position: static !important;    /* 아래로 밀어내도록 설정 */
        transform: none !important;
        width: 100% !important;
        box-shadow: none !important;
        padding: 5px 0 5px 20px !important; /* 서브메뉴 들여쓰기 */
        background: #f9f9f9 !important;     /* 구분감 부여 */
        list-style: none !important;
    }

    /* 2. active 클래스가 붙어있을 때의 처리는 JS(jQuery)가 display를 제어하므로 
       CSS의 .nav-list > li.active .sub-nav-list { display: block !important; } 는 삭제합니다. */
    
    /* 3. 하위 메뉴가 있다는 표시를 위한 화살표 */
	/*
    .nav-list > li:has(.sub-nav-list) > a::after {
        content: ' ▾';
        font-size: 11px;
        display: inline-block;
        margin-left: 6px;
        transition: transform 0.2s;
    }
	*/
    /* 메뉴가 열리면 화살표가 회전합니다 */
	/*
    .nav-list > li.active > a::after {
        transform: rotate(180deg);
    }*/

    /* 햄버거 버튼 X 변형 스타일 클래스 추가 */
    .menu-toggle.open span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .menu-toggle.open span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.open span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
}


	/*게시판 리스트 시작********************************************************/
	/* 범용 스타일 충돌을 막기 위해 모든 선택자에 custom-을 적용합니다 */
	.custom-board-container {
	  width: 100%;
	  max-width: 1200px;
	  margin: 0 auto;
	  padding: 20px;
	  font-family: 'Noto Sans KR', sans-serif;
	  box-sizing: border-box;
	}

	.custom-board-container * {
	  box-sizing: border-box;
	}

	.custom-board-title {
	  font-size: 1.5rem;
	  font-weight: 700;
	  color: #1e293b;
	  margin-bottom: 20px;
	  padding-left: 10px;
	  border-left: 4px solid #0f172a;
	}

	/* 테이블 레이아웃 및 반응형 */
	.custom-board-table {
	  width: 100%;
	  border-collapse: collapse;
	  border-top: 2px solid #1e293b;
	  border-bottom: 1px solid #e2e8f0;
	}

	.custom-board-table th {
	  background-color: #f8fafc;
	  color: #334155;
	  font-weight: 600;
	  padding: 14px 10px;
	  font-size: 0.95rem;
	  border-bottom: 1px solid #cbd5e1;
	}

	.custom-board-table td {
	  padding: 14px 12px;
	  font-size: 0.95rem;
	  color: #475569;
	  border-bottom: 1px solid #f1f5f9;
	  line-height: 1.5;
	}

	/* 리스트 호버 효과 */
	.custom-board-table tbody tr:not(.custom-content-row) {
	  cursor: pointer;
	  transition: background-color 0.2s ease;
	}

	.custom-board-table tbody tr:not(.custom-content-row):hover {
	  background-color: #f8fafc;
	}

	/* 정렬 및 너비 설정 */
	.custom-txt-center { text-align: center; }
	.custom-txt-left { text-align: left; }

	.custom-col-num { width: 10%; }
	.custom-col-subject { width: 75%; }
	.custom-col-date { width: 15%; }

	/* 공지사항 배지 */
	.custom-badge-notice {
	  background-color: #ef4444;
	  color: #ffffff;
	  font-size: 0.8rem;
	  padding: 2px 6px;
	  border-radius: 4px;
	  margin-right: 6px;
	  font-weight: bold;
	  vertical-align: middle;
	}

	/* 내용보기 (상세) 스타일 */
	.custom-content-row {
	  background-color: #f8fafc;
	}

	.custom-content-box {
	  padding: 20px 15px;
	  background: #ffffff;
	  border: 1px solid #e2e8f0;
	  border-radius: 6px;
	  margin: 5px 0;
	}

	.custom-content-text {
	  font-size: 0.95rem;
	  color: #334155;
	  white-space: pre-line; /* 줄바꿈 유지 */
	}

	/* 버튼 컴포넌트 */
	.custom-btn-group {
	  margin-top: 20px;
	  display: flex;
	  gap: 8px;
	  justify-content: flex-end;
	}

	.custom-table-bottom-bar {
	  margin-top: 15px;
	  display: flex;
	  justify-content: flex-end;
	}

	.custom-btn {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  padding: 8px 16px;
	  font-size: 0.9rem;
	  font-weight: 500;
	  border-radius: 4px;
	  border: 1px solid transparent;
	  cursor: pointer;
	  transition: all 0.2s ease;
	}

	.custom-btn-primary {
	  background-color: #2563eb;
	  color: #ffffff;
	}
	.custom-btn-primary:hover { background-color: #1d4ed8; }

	.custom-btn-secondary {
	  background-color: #ffffff;
	  border-color: #cbd5e1;
	  color: #64748b;
	}
	.custom-btn-secondary:hover { background-color: #f1f5f9; color: #334155; }

	.custom-btn-dark {
	  background-color: #1e293b;
	  color: #ffffff;
	  padding: 10px 20px;
	}
	.custom-btn-dark:hover { background-color: #0f172a; }

	/* 모바일 반응형 미디어 쿼리 */
	@media (max-width: 768px) {
	  .custom-col-num { width: 15%; }
	  .custom-col-date { width: 25%; }
	  .custom-col-subject { width: 60%; }

	  .custom-board-table th,
	  .custom-board-table td {
		padding: 10px 6px;
		font-size: 0.85rem;
	  }

	  .custom-btn {
		padding: 6px 12px;
		font-size: 0.85rem;
	  }
	}
	/*게시판 리스트 종료********************************************************/



	/*게시판 내용보기 시작*******************************************************/
	/* 전체 컨테이너 및 기본 박스 스타일 정의 */
	.custom-view-container {
	  width: 100%;
	  max-width: 1200px; /* 가독성을 위한 최적의 본문 너비 */
	  margin: 0 auto;
	  padding: 0px 0px;
	  font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	  box-sizing: border-box;
	  color: #334155;
	}

	.custom-view-container * {
	  box-sizing: border-box;
	}

	/* 1. 상단 헤더 영역 */
	.custom-view-header {
	  border-top: 2px solid #1e293b; /* 세무/회계 느낌의 차분한 다크 네이비 */
	  border-bottom: 1px solid #e2e8f0;
	  padding: 20px 10px;
	  background-color: #f8fafc;
	}

	.custom-view-category {
	  font-size: 0.85rem;
	  color: #2563eb; /* 포인트 블루 */
	  font-weight: 600;
	  margin-bottom: 8px;
	}

	.custom-view-title {
	  font-size: 1.35rem;
	  font-weight: 700;
	  line-height: 1.4;
	  color: #0f172a;
	  margin: 0 0 15px 0;
	}

	.custom-view-meta {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  font-size: 0.85rem;
	  color: #64748b;
	  flex-wrap: wrap;
	  gap: 10px;
	}

	.custom-view-meta-left, .custom-view-meta-right {
	  display: flex;
	  align-items: center;
	}

	.custom-view-author {
	  font-weight: 500;
	  color: #334155;
	}

	.custom-view-divider {
	  display: inline-block;
	  width: 1px;
	  height: 12px;
	  background-color: #cbd5e1;
	  margin: 0 10px;
	}

	.custom-view-meta-right strong {
	  color: #1e293b;
	}

	/* 2. 첨부파일 영역 */
	.custom-view-files {
	  display: flex;
	  align-items: flex-start;
	  border-bottom: 1px solid #f1f5f9;
	  padding: 12px 10px;
	  background-color: #ffffff;
	  font-size: 0.85rem;
	}

	.custom-view-file-label {
	  font-weight: 600;
	  color: #475569;
	  width: 80px;
	  flex-shrink: 0;
	  padding-top: 2px;
	}

	.custom-view-file-list {
	  display: flex;
	  flex-direction: column;
	  gap: 6px;
	}

	.custom-view-file-item {
	  color: #475569;
	  text-decoration: none;
	  transition: color 0.2s ease;
	}

	.custom-view-file-item:hover {
	  color: #2563eb;
	  text-decoration: underline;
	}

	.custom-view-icon {
	  margin-right: 4px;
	}

	/* 3. 본문 내용 영역 */
	.custom-view-content {
	  padding: 40px 10px;
	  min-height: 300px;
	  line-height: 1.7;
	  font-size: 1rem;
	  color: #334155;
	  border-bottom: 1px solid #cbd5e1;
	  word-break: break-all;
	}

	.custom-view-content p {
	  margin: 0 0 8px 0;
	}

	.custom-view-content ul {
	  margin: 10px 0;
	  padding-left: 20px;
	}

	/* 4. 하단 버튼 영역 */
	.custom-view-footer-buttons {
	  margin-top: 30px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  gap: 10px;
	}

	.custom-view-btn-left, .custom-view-btn-right {
	  display: flex;
	  gap: 8px;
	}

	/* 공통 버튼 구조 */
	.custom-view-btn {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  height: 40px;
	  padding: 0 18px;
	  font-size: 0.9rem;
	  font-weight: 500;
	  border-radius: 4px;
	  border: 1px solid transparent;
	  cursor: pointer;
	  transition: all 0.2s ease;
	}

	/* 버튼 컬러 베리에이션 */
	.custom-view-btn-primary {
	  background-color: #1e293b;
	  color: #ffffff;
	}
	.custom-view-btn-primary:hover {
	  background-color: #0f172a;
	}

	.custom-view-btn-secondary {
	  background-color: #ffffff;
	  border-color: #cbd5e1;
	  color: #475569;
	}
	.custom-view-btn-secondary:hover {
	  background-color: #f8fafc;
	  color: #1e293b;
	}

	.custom-view-btn-danger {
	  background-color: #ffffff;
	  border-color: #fca5a5;
	  color: #ef4444;
	}
	.custom-view-btn-danger:hover {
	  background-color: #fef2f2;
	}

	/* 5. 모바일 반응형 미디어 쿼리 (768px 이하) */
	@media (max-width: 768px) {
	  .custom-view-container {
		padding: 15px 10px;
	  }

	  .custom-view-title {
		font-size: 1.15rem;
	  }

	  .custom-view-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	  }

	  .custom-view-meta-right {
		margin-top: 2px;
	  }

	  .custom-view-files {
		flex-direction: column;
		gap: 8px;
	  }

	  .custom-view-file-label {
		width: auto;
	  }

	  .custom-view-content {
		padding: 25px 5px;
		font-size: 0.95rem;
	  }

	  .custom-view-footer-buttons {
		flex-direction: column-reverse; /* 모바일에서는 목록 버튼이 아래 혹은 위로 가도록 정렬 배치 변경 가능 */
		align-items: stretch;
	  }

	  .custom-view-btn-left, .custom-view-btn-right {
		width: 100%;
	  }

	  .custom-view-btn-right .custom-view-btn {
		width: 100%; /* 목록 버튼 가로 꽉 차게 */
	  }

	  .custom-view-btn-left .custom-view-btn {
		flex: 1; /* 수정/삭제 버튼 반반씩 배분 */
	  }
	}
	/*게시판 내용보기 종료********************************************************/


		
	/*로그인 시작********************************************************/
		/* 전체 배경 및 중앙 정렬 */
		.custom-login-container {
		  width: 100%;
		  min-height: 80vh; /* 화면의 상당 부분을 차지하도록 설정 */
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  padding: 40px 20px;
		  font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
		  box-sizing: border-box;
		}

		.custom-login-container * {
		  box-sizing: border-box;
		}

		/* 로그인 카드 박스 */
		.custom-login-box {
		  width: 100%;
		  max-width: 440px; /* 비즈니스 로그인 창의 표준 크기 */
		  background-color: #ffffff;
		  border: 1px solid #e2e8f0;
		  border-radius: 8px;
		  padding: 40px 30px;
		  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
		}

		/* 상단 헤더 */
		.custom-login-header {
		  text-align: center;
		  margin-bottom: 35px;
		}

		.custom-login-logo {
		  font-size: 1.8rem;
		  font-weight: 700;
		  color: #1e293b; /* 세무법인의 다크 네이비 톤매너 */
		  margin: 0 0 10px 0;
		  letter-spacing: -0.5px;
		}

		.custom-login-subtitle {
		  font-size: 0.85rem;
		  color: #64748b;
		  line-height: 1.4;
		  margin: 0;
		  word-break: keep-all;
		}

		/* 입력 필드 레이아웃 */
		.custom-login-field {
		  margin-bottom: 20px;
		}

		.custom-login-label {
		  display: block;
		  font-size: 0.85rem;
		  font-weight: 600;
		  color: #475569;
		  margin-bottom: 6px;
		}

		.custom-login-input {
		  width: 100%;
		  height: 48px;
		  padding: 0 14px;
		  font-size: 0.95rem;
		  color: #334155;
		  border: 1px solid #cbd5e1;
		  border-radius: 4px;
		  background-color: #ffffff;
		  outline: none;
		  transition: border-color 0.2s ease, box-shadow 0.2s ease;
		}

		/* 입력창 활성화(Focus) 상태 */
		.custom-login-input:focus {
		  border-color: #2563eb; /* 신뢰감을 주는 블루 컬러 포인트 */
		  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
		}

		/* 아이디 저장 체크박스 영역 */
		.custom-login-options {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  margin-bottom: 25px;
		}

		.custom-login-remember {
		  display: flex;
		  align-items: center;
		  font-size: 0.85rem;
		  color: #475569;
		  cursor: pointer;
		  user-select: none;
		}

		.custom-login-remember input[type="checkbox"] {
		  width: 16px;
		  height: 16px;
		  margin: 0;
		  cursor: pointer;
		}

		.custom-checkbox-space {
		  margin-right: 6px;
		}

		/* 로그인 버튼 */
		.custom-login-submit-btn {
		  width: 100%;
		  height: 50px;
		  background-color: #1e293b;
		  color: #ffffff;
		  border: none;
		  border-radius: 4px;
		  font-size: 1rem;
		  font-weight: 600;
		  cursor: pointer;
		  transition: background-color 0.2s ease;
		}

		.custom-login-submit-btn:hover {
		  background-color: #0f172a;
		}

		/* 하단 유틸리티 링크 */
		.custom-login-links {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  margin-top: 25px;
		  padding-top: 20px;
		  border-top: 1px solid #f1f5f9;
		  font-size: 0.85rem;
		}

		.custom-login-link-item {
		  color: #64748b;
		  text-decoration: none;
		  transition: color 0.2s ease;
		}

		.custom-login-link-item:hover {
		  color: #1e293b;
		}

		/* 회원가입 강조 텍스트 */
		.custom-login-link-highlight {
		  color: #2563eb;
		  font-weight: 500;
		}
		.custom-login-link-highlight:hover {
		  color: #1d4ed8;
		  text-decoration: underline;
		}

		.custom-login-link-divider {
		  display: inline-block;
		  width: 1px;
		  height: 12px;
		  background-color: #e2e8f0;
		  margin: 0 12px;
		}

		/* 모바일 반응형 디자인 (480px 이하) */
		@media (max-width: 480px) {
		  .custom-login-container {
			padding: 20px 10px;
		  }
		  
		  .custom-login-box {
			padding: 30px 20px;
			border: none;
			box-shadow: none; /* 모바일에서는 카드 형태 대신 플랫하게 변경하여 공간 확보 */
		  }

		  .custom-login-logo {
			font-size: 1.6rem;
		  }

		  .custom-login-input {
			height: 45px;
			font-size: 0.9rem;
		  }

		  .custom-login-submit-btn {
			height: 46px;
			font-size: 0.95rem;
		  }

		  .custom-login-link-divider {
			margin: 0 8px; /* 모바일에서 간격을 조금 좁힘 */
		  }
		}
	/*로그인 종료********************************************************/		
		
	/*서브디자인 및 공통 시작**************************************************/
		/* ==========================================================================
		   1. Reset & Global Variables (기본 리셋 및 공통 변수)
		   ========================================================================== */
		:root {
		  --custom-sub-primary: #1e293b;       /* 신뢰감 주는 네이비 */
		  --custom-sub-primary-dark: #0f172a;  /* 더 어두운 네이비 */
		  --custom-sub-accent: #2563eb;        /* 세련된 세무 포인트 블루 */
		  --custom-sub-accent-light: #eff6ff;  /* 밝은 블루 (배경용) */
		  --custom-sub-success: #059669;       /* 석세스 그린 */
		  --custom-sub-danger: #dc2626;        /* 경고/삭제 레드 */
		  --custom-sub-text-dark: #1e293b;     /* 본문 블랙 */
		  --custom-sub-text-muted: #64748b;    /* 음영 처리된 텍스트 */
		  --custom-sub-border: #e2e8f0;        /* 기본 테두리 색상 */
		  --custom-sub-bg-light: #f8fafc;      /* 카드/테이블 연한 배경 */
		}

		.custom-sub-wrapper {
		  margin: 0;
		  padding: 0;
		  box-sizing: border-box;
		  font-family: 'Noto Sans KR', sans-serif;
		  color: var(--custom-sub-text-dark);
		  background-color: #ffffff;
		  line-height: 1.6;
		}

		.custom-sub-wrapper * {
		  box-sizing: border-box;
		}

		/* 레이아웃 컨테이너 */
		.custom-sub-container {
		  width: 100%;
		  max-width: 1100px;
		  margin: 0 auto;
		  padding: 50px 20px;
		}

		/* ==========================================================================
		   2. Header Banner Design (상단 헤더 이미지 & 네비게이션)
		   ========================================================================== */
			.custom-sub-header-banner {
			  position: relative;
			  width: 100%;
			  height: 280px;
			  /* 어두운 네이비 투명도를 (0.95, 0.85) -> (0.45, 0.25)로 대폭 낮춰 배경 이미지가 밝게 노출되도록 수정 */
			  background: /*linear-gradient(135deg, rgba(15, 23, 42, 0.45) 0%, rgba(30, 41, 59, 0.25) 100%),*/
						  url('/stream/theme/kglwa/img/sub_back.jpg') no-repeat center center;
			  background-size: cover;
			  display: flex;
			  align-items: center;
			  overflow: hidden;
			  
			  /* 이미지 자체의 전체적인 밝기를 15% 추가로 올림 */
			  filter: brightness(1.15);
			}

		/* 모던 기하학 패턴 데코 */
		.custom-sub-header-banner::after {
		  content: '';
		  position: absolute;
		  right: -10%;
		  bottom: -30%;
		  width: 400px;
		  height: 400px;
		  border-radius: 50%;
		  background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
		  pointer-events: none;
		}

		.custom-sub-banner-content {
		  width: 100%;
		  max-width: 1100px;
		  margin: 0 auto;
		  padding: 0 20px;
		  position: relative;
		  z-index: 2;
		}

		/* 브레드크럼 (Breadcrumb) */
		.custom-sub-breadcrumb {
		  display: flex;
		  align-items: center;
		  gap: 8px;
		  list-style: none;
		  padding: 0;
		  margin: 0 0 15px 0;
		  font-size: 0.85rem;
		  color: rgba(255, 255, 255, 0.7);
		}

		.custom-sub-breadcrumb a {
		  /*color: rgba(255, 255, 255, 0.7);*/
		  color:#000;
		  text-decoration: none;
		  transition: color 0.2s;
		}

		.custom-sub-breadcrumb a:hover {
		  color: #000;
		}

		.custom-sub-breadcrumb li:not(:last-child)::after {
		  content: '>';
		  margin-left: 8px;
		  font-size: 0.75rem;
		  color: rgba(255, 255, 255, 0.4);
		}

		.custom-sub-breadcrumb li.custom-sub-active {
		  color: #000;
		  font-weight: 500;
		}

		/* 배너 타이틀 */
		.custom-sub-banner-title {
		  font-size: 2.2rem;
		  font-weight: 700;
		  color: #000;
		  margin: 0 0 8px 0;
		  letter-spacing: -1px;
		}

		.custom-sub-banner-desc {
		  font-size: 1rem;
		  /*color: rgba(255, 255, 255, 0.75); */
		  color:#000;
		  margin: 0;
		  font-weight: 300;
		}

		/* ==========================================================================
		   3. Typography Set (타이포그래피 프리셋)
		   ========================================================================== */
		.custom-sub-section {
		  margin-bottom: 60px;
		}

		.custom-sub-section-title {
		  font-size: 1.5rem;
		  font-weight: 700;
		  color: var(--custom-sub-primary-dark);
		  border-bottom: 2px solid var(--custom-sub-primary);
		  padding-bottom: 12px;
		  margin-bottom: 30px;
		  letter-spacing: -0.5px;
		}

		/* 제목 스타일들 */
		.custom-sub-typo-h1 {
		  font-size: 2rem;
		  font-weight: 700;
		  color: var(--custom-sub-primary-dark);
		  margin: 35px 0 15px 0;
		}

		.custom-sub-typo-h2 {
		  font-size: 1.6rem;
		  font-weight: 700;
		  color: var(--custom-sub-primary-dark);
		  margin: 30px 0 15px 0;
		  display: flex;
		  align-items: center;
		  gap: 10px;
		}

		/* 포인트 바가 있는 h2 */
		.custom-sub-typo-h2.custom-sub-with-bar::before {
		  content: '';
		  display: inline-block;
		  width: 4px;
		  height: 24px;
		  background-color: var(--custom-sub-accent);
		  border-radius: 2px;
		}

		.custom-sub-typo-h3 {
		  font-size: 1.25rem;
		  font-weight: 600;
		  color: var(--custom-sub-primary-dark);
		  margin: 25px 0 12px 0;
		}

		/* 리드 본문 (강조 단락) */
		.custom-sub-lead {
		  font-size: 1.15rem;
		  font-weight: 400;
		  line-height: 1.7;
		  color: #334155;
		  margin-bottom: 20px;
		  word-break: keep-all;
		}

		/* 일반 본문 */
		.custom-sub-body {
		  font-size: 0.95rem;
		  line-height: 1.7;
		  color: var(--custom-sub-text-muted);
		  margin-bottom: 18px;
		}

		/* 강조 텍스트 */
		.custom-sub-highlight {
		  color: var(--custom-sub-accent);
		  font-weight: 600;
		}

		/* 블록인용구 (Blockquote) */
		.custom-sub-blockquote {
		  margin: 25px 0;
		  padding: 20px 25px;
		  border-left: 4px solid var(--custom-sub-primary);
		  background-color: var(--custom-sub-bg-light);
		  border-radius: 0 8px 8px 0;
		}

		.custom-sub-blockquote p {
		  margin: 0 0 8px 0;
		  font-size: 1rem;
		  font-weight: 500;
		  color: var(--custom-sub-primary-dark);
		}

		.custom-sub-blockquote cite {
		  font-size: 0.85rem;
		  color: var(--custom-sub-text-muted);
		  font-style: normal;
		}

		/* 정보 수집/주의사항 안내 박스 (Callout Box) */
		.custom-sub-callout {
		  margin: 25px 0;
		  padding: 20px;
		  background-color: var(--custom-sub-accent-light);
		  border: 1px solid rgba(37, 99, 235, 0.15);
		  border-radius: 6px;
		  display: flex;
		  gap: 15px;
		}

		.custom-sub-callout-icon {
		  font-size: 1.4rem;
		  color: var(--custom-sub-accent);
		  line-height: 1;
		}

		.custom-sub-callout-content h4 {
		  margin: 0 0 6px 0;
		  font-size: 0.95rem;
		  font-weight: 700;
		  color: var(--custom-sub-accent);
		}

		.custom-sub-callout-content p {
		  margin: 0;
		  font-size: 0.9rem;
		  color: #1e3a8a;
		  line-height: 1.5;
		}

		/* 목록 스타일 (List set) */
		.custom-sub-list-dotted {
		  list-style: none;
		  padding: 0;
		  margin: 15px 0;
		}

		.custom-sub-list-dotted li {
		  position: relative;
		  padding-left: 15px;
		  margin-bottom: 8px;
		  font-size: 0.95rem;
		  color: var(--custom-sub-text-dark);
		}

		.custom-sub-list-dotted li::before {
		  content: '•';
		  position: absolute;
		  left: 0;
		  top: -1px;
		  color: var(--custom-sub-accent);
		  font-size: 1.1rem;
		}

		/* ==========================================================================
		   4. Button Set (버튼 프리셋 가이드)
		   ========================================================================== */
		.custom-sub-btn-grid {
		  display: flex;
		  flex-wrap: wrap;
		  gap: 12px;
		  margin-bottom: 30px;
		  align-items: center;
		}

		/* 공통 베이스 버튼 */
		.custom-sub-btn {
		  display: inline-flex;
		  align-items: center;
		  justify-content: center;
		  font-family: inherit;
		  font-weight: 500;
		  text-decoration: none;
		  border: 1px solid transparent;
		  border-radius: 4px;
		  cursor: pointer;
		  transition: all 0.2s ease-in-out;
		  white-space: nowrap;
		}

		/* 크기(Size) 변형 */
		.custom-sub-btn-lg {
		  height: 48px;
		  padding: 0 28px;
		  font-size: 1rem;
		}

		.custom-sub-btn-md {
		  height: 40px;
		  padding: 0 20px;
		  font-size: 0.9rem;
		}

		.custom-sub-btn-sm {
		  height: 32px;
		  padding: 0 12px;
		  font-size: 0.8rem;
		}

		/* 스타일(Type) 변형 */
		/* 1. 프라이머리 네이비 */
		.custom-sub-btn-primary {
		  background-color: var(--custom-sub-primary);
		  color: #ffffff;
		}
		.custom-sub-btn-primary:hover {
		  background-color: var(--custom-sub-primary-dark);
		}

		/* 2. 포인트 블루 */
		.custom-sub-btn-accent {
		  background-color: var(--custom-sub-accent);
		  color: #ffffff;
		}
		.custom-sub-btn-accent:hover {
		  background-color: #1d4ed8;
		}

		/* 3. 보조 회색버튼 */
		.custom-sub-btn-secondary {
		  background-color: #ffffff;
		  border-color: var(--custom-sub-border);
		  color: var(--custom-sub-text-muted);
		}
		.custom-sub-btn-secondary:hover {
		  background-color: var(--custom-sub-bg-light);
		  color: var(--custom-sub-text-dark);
		  border-color: #cbd5e1;
		}

		/* 4. 아웃라인 버튼 */
		.custom-sub-btn-outline {
		  background-color: transparent;
		  border-color: var(--custom-sub-accent);
		  color: var(--custom-sub-accent);
		}
		.custom-sub-btn-outline:hover {
		  background-color: var(--custom-sub-accent-light);
		}

		/* 5. 등록/성공 그린 */
		.custom-sub-btn-success {
		  background-color: var(--custom-sub-success);
		  color: #ffffff;
		}
		.custom-sub-btn-success:hover {
		  background-color: #047857;
		}

		/* 6. 위험/삭제 레드 */
		.custom-sub-btn-danger {
		  background-color: var(--custom-sub-danger);
		  color: #ffffff;
		}
		.custom-sub-btn-danger:hover {
		  background-color: #b91c1c;
		}

		/* 7. 비활성화 버튼 */
		.custom-sub-btn-disabled {
		  background-color: #f1f5f9;
		  border-color: #e2e8f0;
		  color: #94a3b8;
		  cursor: not-allowed;
		}

		/* ==========================================================================
		   5. Responsive Design (반응형 조절)
		   ========================================================================== */
		@media (max-width: 768px) {
		  .custom-sub-header-banner {
			height: 220px;
		  }

		  .custom-sub-banner-title {
			font-size: 1.7rem;
		  }

		  .custom-sub-banner-desc {
			font-size: 0.9rem;
		  }

		  .custom-sub-container {
			padding: 30px 15px;
		  }

		  .custom-sub-section {
			margin-bottom: 45px;
		  }

		  .custom-sub-typo-h1 {
			font-size: 1.65rem;
		  }

		  .custom-sub-typo-h2 {
			font-size: 1.35rem;
		  }

		  .custom-sub-lead {
			font-size: 1rem;
		  }

		  /* 모바일 환경에서 긴 버튼 레이아웃 대응 */
		  .custom-sub-btn-grid {
			gap: 8px;
		  }

		  .custom-sub-btn {
			flex: 1 1 calc(50% - 8px); /* 모바일에서는 가로로 균등 배치 */
			min-width: 120px;
		  }
		}
	/*서브디자인 및 공통 종료**************************************************/
		
	/*공지 타이틀*/
	/* 타이틀 + More 버튼을 포함하는 메인 DIV */
		.custom-header-container {
		  width: 100%;
		  max-width: 1200px; /* 기존 갤러리/게시판 폭에 맞춤 */
		  margin: 0 auto 15px auto;
		  padding: 0 5px;
		  display: flex;
		  justify-content: space-between; /* 좌우 양끝 정렬 */
		  align-items: center; /* 세로 중앙 정렬 */
		  box-sizing: border-box;
		}

		/* 좌측 타이틀 스타일 */
		.custom-header-title {
		  font-size: 1.25rem;
		  font-weight: 700;
		  color: #1e293b; /* 신뢰감을 주는 네이비/다크그레이 */
		  margin: 0;
		  display: flex;
		  align-items: center;
		  gap: 8px;
		}

		/* 좌측 타이틀 포인트 라인 (선택 사항) */
		.custom-header-title::before {
		  content: '';
		  display: inline-block;
		  width: 4px;
		  height: 18px;
		  background-color: #2563eb; /* 블루 포인트 */
		  border-radius: 2px;
		}

		/* 우측 More 버튼 스타일 */
		.custom-header-more {
		  display: inline-flex;
		  align-items: center;
		  gap: 4px;
		  font-size: 0.88rem;
		  font-weight: 500;
		  color: #64748b;
		  text-decoration: none;
		  padding: 4px 8px;
		  border-radius: 4px;
		  transition: all 0.2s ease;
		}

		.custom-header-icon {
		  font-size: 1rem;
		  line-height: 1;
		}

		/* More 버튼 호버 효과 */
		.custom-header-more:hover {
		  color: #1e293b;
		  background-color: #f1f5f9;
		}

		/* 모바일 반응형 (768px 이하) */
		@media (max-width: 768px) {
		  .custom-header-title {
			font-size: 1.1rem;
		  }

		  .custom-header-more {
			font-size: 0.8rem;
		  }
		}
	/*공지 타이틀*/	
	
	/*메인 갤러리 배열 시작*/
		/* 메인 컨테이너 (최대 1200px 중앙 정렬) */
			.custom-gallery-container {
			  width: 100%;
			  max-width: 1200px;
			  margin: 0 auto;
			  padding: 20px;
			  box-sizing: border-box;
			}

			.custom-gallery-container * {
			  box-sizing: border-box;
			}

			/* 갤러리 그리드 레이아웃 */
			.custom-gallery-grid {
			  display: grid;
			  /* PC 기본: 가로 5개 배열 (동일 비율) */
			  grid-template-columns: repeat(5, 1fr);
			  gap: 15px; /* 이미지 사이 간격 */
			}

			/* 이미지 카드 아이템 */
			.custom-gallery-item {
			  width: 100%;
			  overflow: hidden;
			  /* 1. 모서리 둥글기 (원하시는 곡률에 따라 8px ~ 16px 조절 가능) */
			  border-radius: 12px;
			  /* 2. 얇고 깔끔한 라운드 테두리 추가 */
			  border: 1px solid #e2e8f0;
			  background-color: #f8fafc;
			  /* (선택) 테두리가 입체감 있게 보이도록 은은한 그림자 추가 */
			  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
			  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
			}

			/* 이미지 비율 및 반응형 설정 */
			.custom-gallery-img {
			  width: 100%;
			  height: 100%;
			  aspect-ratio: 800 / 350; /* 800*350 비율 유지 */
			  object-fit: cover;
			  display: block;
			  /* 부모(item)의 border-radius 곡률에 맞춰 이미지 모서리 잘라냄 */
			  border-radius: 11px;
			  transition: transform 0.3s ease;
			}

			/* 마우스 호버 시 은은한 확대 효과 */
			.custom-gallery-item:hover {
			  border-color: #cbd5e1;
			  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
			}

			.custom-gallery-item:hover .custom-gallery-img {
			  transform: scale(1.05);
			}

			/* 모바일 반응형 미디어 쿼리 (768px 이하) */
			@media (max-width: 768px) {
			  .custom-gallery-container {
				padding: 10px;
			  }

			  .custom-gallery-grid {
				/* 모바일: 가로 2개 배열 */
				grid-template-columns: repeat(2, 1fr);
				gap: 10px; /* 모바일 화면에 맞춰 간격을 살짝 좁힘 */
			  }
			}
	/*메인 갤러리 배열 종료*/		

	/*모바일 메뉴 스크롤*/
		/* 모바일 화면 (768px 이하)일 때 적용 */
		@media (max-width: 768px) {
		  /* 모바일 메뉴가 활성화(.active)되었을 때 내비게이션 박스 */
		  .nav.active {
			/* 1. 화면 높이에서 상단 헤더 높이만큼 뺀 최대 높이 설정 (예: 헤더 높이가 60px일 때) */
			max-height: calc(100vh - 60px);
			
			/* 2. 메뉴 내용이 설정한 최대 높이를 넘어가면 세로 스크롤 생성 */
			overflow-y: auto;
			
			/* 3. 모바일 기기에서 부드러운 스크롤 느낌 제공 (iOS 필수) */
			-webkit-overflow-scrolling: touch;
		  }
		}
	/*모바일 메뉴 스크롤*/
	
	/*배경스크롤차단*/
		/* 모바일 메뉴가 열렸을 때 배경 스크롤 차단 */
		body.no-scroll {
		  overflow: hidden !important;
		  height: 100vh !important;
		  /* 터치 시 배경이 튕기는 현상 방지 */
		  touch-action: none;
		}
	/*배경스크롤차단*/

	/*pagination*/
		/* 페이징 전체 컨테이너 (중앙 정렬) */
		.custom-pg-container {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  width: 100%;
		  margin: 30px 0;
		}

		/* UL 태그 기본 리셋 */
		.custom-pg-container .pagination {
		  display: flex;
		  align-items: center;
		  gap: 4px; /* 버튼 사이 간격 */
		  list-style: none;
		  padding: 0;
		  margin: 0;
		}

		/* 리스트 아이템 */
		.custom-pg-container .item {
		  display: inline-block;
		}

		/* 버튼 공통 스타일 (A 태그) */
		.custom-pg-container .item .num {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  min-width: 36px;
		  height: 36px;
		  padding: 0 8px;
		  border: 1px solid #e2e8f0;
		  border-radius: 6px;
		  background-color: #ffffff;
		  color: #475569;
		  font-size: 0.9rem;
		  font-weight: 500;
		  text-decoration: none;
		  box-sizing: border-box;
		  transition: all 0.2s ease-in-out;
		}

		/* 마우스 호버 효과 (비활성화 상태가 아닐 때) */
		.custom-pg-container .item:not(.active) .num:hover {
		  background-color: #f1f5f9;
		  border-color: #cbd5e1;
		  color: #0f172a;
		}

		/* 현재 활성화된 페이지 (active) */
		.custom-pg-container .item.active .num {
		  background-color: #000; /* 주요 포인트 블루 */
		  border-color: #000;
		  color: #ffffff;
		  font-weight: 700;
		  cursor: default;
		  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
		}

		/* 화살표 버튼 스타일 (<<, <, >, >>) */
		.custom-pg-container .item.first .num,
		.custom-pg-container .item.prev .num,
		.custom-pg-container .item.next .num,
		.custom-pg-container .item.last .num {
		  color: #94a3b8;
		  font-weight: 600;
		  background-color: #f8fafc;
		}

		/* 화살표 버튼 호버 시 */
		.custom-pg-container .item.first .num:hover,
		.custom-pg-container .item.prev .num:hover,
		.custom-pg-container .item.next .num:hover,
		.custom-pg-container .item.last .num:hover {
		  color: #1e293b;
		  background-color: #e2e8f0;
		}

		/* 모바일 반응형 (화면이 좁아질 때 크기 조절) */
		@media (max-width: 768px) {
		  .custom-pg-container .pagination {
			gap: 2px;
		  }

		  .custom-pg-container .item .num {
			min-width: 32px;
			height: 32px;
			font-size: 0.82rem;
			padding: 0 4px;
		  }
		}
	/*pagination*/		
	
	
	/*인사말 시작*/
	/* 인사말 메인 컨테이너 */
		.custom-greeting-container {
		  width: 100%;
		  max-width: 1200px;
		  margin: 0 auto;
		  padding: 40px 20px;
		  font-family: 'Noto Sans KR', '맑은 고딕', sans-serif;
		  color: #222222;
		  box-sizing: border-box;
		  background-color: #ffffff;
		}

		.custom-greeting-container * {
		  box-sizing: border-box;
		}

		/* 1. 우측 사진 배치 (float 처리) */
		.custom-greeting-photo-wrap {
		  float: right;
		  margin-left: 30px;
		  margin-bottom: 20px;
		  width: 280px;
		  /* 1. 모서리 둥글기 적용 (원하시는 곡률로 조절 가능: 10px ~ 20px) */
		  border-radius: 12px;
		  /* 2. 테두리가 둥글게 잘리도록 설정 */
		  overflow: hidden;
		  /* 3. 얇은 은은한 테두리 추가 */
		  border: 1px solid #e2e8f0;
		  /* (선택) 사진에 고급스러운 그림자 효과 추가 */
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		}

		.custom-greeting-photo {
		  width: 100%;
		  height: auto;
		  display: block;
		  object-fit: cover;
		  /* 부모 박스의 곡률에 맞게 이미지 잘라내기 */
		  border-radius: 11px;
		}

		/* 2. 본문 텍스트 스타일 */
		.custom-greeting-content {
		  font-size: 1.05rem;
		  line-height: 1.8;
		  word-break: keep-all; /* 단어 단위 줄바꿈 */
		}

		.custom-greeting-intro {
		  font-size: 1.15rem;
		  margin-top: 0;
		  margin-bottom: 20px;
		}

		.custom-greeting-title {
		  font-size: 1.15rem;
		  font-weight: 700;
		  line-height: 1.5;
		  margin-bottom: 25px;
		}

		.custom-greeting-content p {
		  margin-top: 0;
		  margin-bottom: 22px;
		}

		/* 3. 하단 날짜 및 서명 영역 */
		.custom-greeting-footer {
		  clear: both; /* float 해제 */
		  text-align: right;
		  margin-top: 50px;
		  padding-top: 20px;
		}

		.custom-greeting-date {
		  font-size: 1.05rem;
		  color: #333333;
		  margin-bottom: 25px;
		}

		.custom-greeting-sign {
		  font-size: 1.25rem;
		  font-weight: 700;
		  margin: 0;
		  display: flex;
		  justify-content: flex-end;
		  align-items: center;
		  gap: 15px;
		}

		/* 법인명 (블루 톤) */
		.custom-greeting-org {
		  color: #003399; /* 이미지의 남색계열 포인트 색상 */
		}

		/* 회장 성함 */
		.custom-greeting-name {
		  color: #111111;
		  letter-spacing: 4px;
		}

		/* 모바일 반응형 처리 (768px 이하) */
		@media (max-width: 768px) {
		  .custom-greeting-photo-wrap {
			float: none;
			width: 100%;
			max-width: 260px;
			margin: 0 auto 30px auto;
		  }

		  .custom-greeting-sign {
			flex-direction: column;
			align-items: flex-end;
			gap: 5px;
			font-size: 1.1rem;
		  }
		}
	/*인사말 종료*/
	
	
	.word-break-box {
	  word-break: keep-all;     /* 한글/동양어 단어가 쪼개지지 않도록 방지 */
	  overflow-wrap: break-word; /* 영문 긴 단어나 URL이 상자를 뚫고 나가지 않게 방지 */
	}

	/* 모바일 히든 태그*/
	@media (max-width: 768px) {
	  .mobile-no-br {
		display: none;
	  }
	}