/* ===== 전체 리셋 및 기본 설정 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #ffffff;
    overflow: hidden;
    height: 100vh;
}

.container {
    max-width: 1144px;
    margin: 0 auto;
    padding: 18px 20px 2px 20px;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== 헤더 ===== */
.header {
    text-align: center;
    margin-bottom: 30px;
    margin-top:40px;
}

.header .logo img {
    height: 65px;
}

/* ===== 메인 카드 그리드 ===== */
.main-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.main-card {
    border-radius: 15px;
    padding: 70px 30px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 340px;
    position: relative;
}

.main-card:nth-child(1) {
    background: #FF5722;
}

.main-card:nth-child(2),
.main-card:nth-child(3) {
    background: #1A3E8C;
}

.card-title {
    font-size: 20pt;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.4;
    white-space: nowrap;
}


.card-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 68%;
    max-width: 260px;
}

.btn {
    padding: 0 24px;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    height: 38px;
    line-height: 41px;
    display: inline-block;
    box-sizing: border-box;
}

.btn-epki {
    background: white;
    color: #333;
}

.btn-epki:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn-kakao {
    background: #fff600;
    color: #333;
}

.btn-kakao:hover {
    background: #fff600;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ===== 하단 정보 그리드 ===== */
.bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 15px;
}

.info-card {
    border-radius: 15px;
    padding: 30px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:150px;
    min-height: 140px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative; /* 추가 */
    overflow: hidden; /* 추가 */
}



.info-card:nth-child(1) {
    background: #FF5722;
}

.info-card:nth-child(2) {
    background: #1A3E8C;
}

.info-card:nth-child(3) {
    background: #1A3E8C;
}

.info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.info-card-title {
    font-size: 20pt;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
}

.info-card-subtitle {
    font-size: 16px;
    opacity: 0.95;
    text-align: center;
    line-height: 1.5;
}

/* ===== 게시판 섹션 ===== */
.board-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    flex: 0 0 auto;
    margin-bottom: 20px;
    min-height: 0;
}

.board-card {
    background: #f3f1f2;
    border-radius: 12px;
    padding: 20px 20px 12px 20px;
    border: 1px solid #dee2e6;

    overflow: hidden;
}

.board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #333;
}

.board-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.board-more {
    font-size: 13px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.board-more::after {
    content: '+';
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

.board-more:hover {
    color: #1A3E8C;
}

.board-list {
    list-style: none;
    margin: 0;
    min-height: 102px; /* 항목 3개 높이 (약 34px x 3) */
}

.board-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #dee2e6;
}

.board-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.board-item-title {
    flex: 1;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s;
}

.board-item-title:hover {
    color: #333;
    text-decoration: underline;
}

/* ===== 공지사항 레이어 팝업 (절대 중앙 정렬 방식) ===== */
.notice-popup-overlay {
    display: none;
    position: fixed;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: auto;

    /* 상단 정렬 */
    justify-content: center;
    align-items: flex-start;
    padding-top: 20px;
}

.notice-popup-overlay.active {
    display: flex !important;  /* block에서 flex로 변경 */
}

.notice-popup-content {
    background: white;
    border-radius: 20px;
    width: 1118px;
    height: 709px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;

    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.notice-popup-header {
    /*background: white;*/
    color: #333;
    padding: 30px 30px 25px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: none;
    position: relative;
}

.notice-popup-header h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #333;
    text-align: center;
}

.notice-popup-close {
    position: absolute;
    right: 40px;
    top: 25px;
    background: transparent;
    border: none;
    color: #999;
    font-size: 40px;
    font-weight: 200;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    border-radius: 0;
    transition: all 0.3s;
    padding: 0;
}

.notice-popup-close:hover {
    color: #333;
    background: transparent;
}

.notice-popup-body {
    padding: 0;
    overflow-y: auto; /* 스크롤은 body 안에서만 */
    height: calc(100% - 85px);
    background: white;
}

/* 검색 영역 스타일 */
.notice-search-area {
    padding: 0 0 0 0; /* 패딩 제거 */
    border-bottom: none;
    background: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.notice-search-box {
    position: relative;
    width: 60%;
    margin-bottom: 25px;
    margin-top: 25px; /* 상단 여백 추가 */
}

.notice-search-box input {
    width: 100%;
    padding: 15px 50px 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    font-size: 14px;
    transition: border-color 0.3s;
    background: white;
    color: #333;
}

.notice-search-box input:focus {
    outline: none;
    border-color: #999;
}

.notice-search-box input::placeholder {
    color: #aaa;
}

.notice-search-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #333;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s;
}

.notice-search-btn:hover {
    color: #000;
}

/* 검은 선 (검색창 아래) */
.notice-search-area::after {
    content: '';
    display: block;
    width: calc(100% - 120px); /* 양쪽 60px씩 제외 */
    height: 3px;
    background: #333;
    margin-bottom: 0;
}

/* 공지사항 목록 스타일 */
.notice-list-area {
    padding: 0;
    border-top: none;
    width: calc(100% - 120px);  /* 양쪽 60px씩 제외 */
    margin-left: 60px;
    margin-right: 60px;
}

.notice-list-item {
    padding: 20px 0;  /* 좌우 패딩 제거 (이미 부모에서 margin 처리) */
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.notice-list-item:first-child {
    padding-top: 20px;
}

.notice-list-item:hover {
    background: #f9f9f9;
}

.notice-list-item-title {
    flex: 1;
    font-size: 15px;
    color: #333;
    font-weight: 400;
}

.notice-list-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notice-list-item-file {
    width: 16px;
    height: 16px;
    background-image: url('../images/notice_file.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    opacity: 0.6;
}

.notice-list-item-date {
    font-size: 14px;
    color: #999;
    white-space: nowrap;
}

/* 페이지네이션 */
.notice-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 35px 0;
}

.notice-pagination button {
    background: transparent;
    border: none;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s;
}

.notice-pagination button:hover:not(:disabled) {
    color: #333;
}

.notice-pagination button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.notice-pagination .page-number {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.notice-pagination .page-number:hover {
    background: #f5f5f5;
    color: #333;
}

.notice-pagination .page-number.active {
    background: #ddd;
    color: #333;
    font-weight: 600;
}

/* ===== 푸터 ===== */
.footer {
    text-align: center;
    padding: 15px 0 0 0;
    margin-top: 0;
}

.footer-logo img {
    cursor: pointer;
    max-width: 250px;
}

/* ===== 다중 팝업 컨테이너 스타일 ===== */
.popup-container {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    padding: 50px;
    box-sizing: border-box;
}

.popup-container.active {
    display: flex;
}

.layer-popup-item {
    position: relative;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.layer-popup-item .layer-popup-image {
    display: block;
    max-width: 400px;
    height: auto;
    cursor: pointer;
}

.layer-popup-item .layer-popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
}

.layer-popup-item .layer-popup-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #666;
}

.layer-popup-item .layer-popup-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.layer-popup-item .layer-popup-checkbox label {
    cursor: pointer;
}

.layer-popup-item .layer-popup-close {
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.3s;
}

.layer-popup-item .layer-popup-close:hover {
    background: #5568d3;
}

/* SMS 인증 모달 스타일 */
.sms-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.sms-modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.sms-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 12px 12px 0 0;
    text-align: center;
    position: relative;
}

.sms-modal-header .close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.sms-modal-header .close:hover {
    background-color: rgba(255,255,255,0.2);
}

.sms-modal-header h2 {
    margin: 10px 0;
    font-size: 24px;
}

.sms-modal-header p {
    margin: 5px 0 0 0;
    opacity: 0.9;
    font-size: 14px;
}

.sms-modal-body {
    padding: 30px;
}

.sms-form-group {
    margin-bottom: 20px;
}

.sms-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.sms-form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.sms-form-group input:focus {
    outline: none;
    border-color: #667eea;
}

.sms-form-group input.error {
    border-color: #ff4757;
}

.sms-timer-group {
    position: relative;
}

.sms-timer {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff4757;
    font-weight: 600;
    font-size: 14px;
}

.sms-resend-btn {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    background: #667eea;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.sms-resend-btn:hover {
    background: #5568d3;
}

.btn-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-submit:active {
    transform: translateY(0);
}

.sms-notice {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

.sms-notice strong {
    display: block;
    margin-bottom: 8px;
    color: #333;
}

.auth-step {
    display: none;
}

.auth-step.active {
    display: block;
}

/* ===== 모달 공통 스타일 ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    overflow: auto;
}

.modal-content {
    background-color: #fff;
    margin: 8% auto;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    overflow: hidden;
}

.modal-header {
    padding: 35px 30px;
    text-align: center;
    position: relative;
}

.modal-header.admin {
    background: linear-gradient(135deg, #1A237E 0%, #0D47A1 100%);
    color: white;
}

.modal-header .close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.modal-header .close:hover {
    background-color: rgba(255,255,255,0.2);
}

.modal-logo {
    font-size: 48px;
    margin-bottom: 15px;
}

.modal-header h2 {
    margin: 10px 0;
    font-size: 24px;
}

.modal-header p {
    margin: 8px 0 0 0;
    opacity: 0.9;
    font-size: 14px;
}

.modal-body {
    padding: 30px;
}

.admin-login-form input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s;
}

.admin-login-form input:focus {
    outline: none;
    border-color: #1A237E;
}

/* ===== 알럿 팝업 ===== */
.alert-popup {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}

.alert-box {
    background-color: white;
    margin: 15% auto;
    padding: 40px;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.alert-memo {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 30px;
}

.btn-group {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-alert {
    padding: 14px 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-alert:first-child {
    background: linear-gradient(135deg, #1A237E 0%, #0D47A1 100%);
    color: white;
}

.btn-alert:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26,35,126,0.3);
}

.btn-alert:last-child {
    background: #f5f5f5;
    color: #666;
}

.btn-alert:last-child:hover {
    background: #e0e0e0;
}

/* ===== 반응형 ===== */
@media (max-width: 900px) {
    .popup-container {
        flex-direction: column;
        padding: 20px;
        overflow-y: auto;
        align-items: flex-start;
    }

    .layer-popup-item .layer-popup-image {
        max-width: 100%;
        width: 100%;
    }
}

/* ===== 공지사항 상세보기 레이어 팝업 ===== */
.notice-detail-overlay {
    display: none;
    position: fixed;
    z-index: 3001;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: auto;

    /* 상단 정렬 */
    justify-content: center;
    align-items: flex-start;
    padding-top: 20px;
}

.notice-detail-overlay.active {
    display: flex !important;
}

.notice-detail-content {
    background: white;
    border-radius: 20px;
    width: 1118px;
    height: 709px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;

    /* 정중앙 고정 - position 방식 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
}

.notice-detail-header {
    flex-shrink: 0;
    background: white;
    color: #333;
    padding: 30px 30px 20px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: none;
    position: relative;
}

.notice-detail-header h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #333;
    text-align: center;
}

.notice-detail-close {
    position: absolute;
    right: 30px;
    top: 30px;
    background: transparent;
    border: none;
    color: #999;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    transition: all 0.3s;
    padding: 0;
}

.notice-detail-close:hover {
    background: #f5f5f5;
    color: #333;
}

/* 헤더 아래 굵은 라인 (고정) */
.notice-detail-header-line {
    flex-shrink: 0;
    width: calc(100% - 120px);
    height: 3px;
    background: #333;
    margin: 0 60px 0 60px;
}

/* 스크롤 가능한 영역 */
.notice-detail-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 25px 60px 25px 60px;
}

/* 제목/첨부파일 행 스타일 */
.notice-detail-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.notice-detail-row-label {
    flex-shrink: 0;
    width: 80px;
    font-size: 15px;
    font-weight: 600;
    color: #0066cc;
    padding-top: 2px;
}

.notice-detail-row-divider {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 15px;
    color: #ddd;
    padding-top: 2px;
}

.notice-detail-row-content {
    flex: 1;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    word-break: break-all;
    word-wrap: break-word;
}

/* 제목 아래 얇은 라인 */
.notice-detail-thin-line {
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    margin-bottom: 25px;
}

/* 내용 영역 */
.notice-detail-content-area {
    min-height: 150px;
    padding: 10px 0 30px 0;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* 첨부파일 영역 (고정 - 하단 굵은 라인 바로 위) */
.notice-detail-file-area {
    flex-shrink: 0;
    padding: 0 60px 15px 60px;
    background: white;
}

/* 첨부파일 위쪽 얇은 라인 */
.notice-detail-file-area::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    margin-bottom: 20px;
}

.notice-detail-file-area .notice-detail-row {
    margin-bottom: 0;
    align-items: center; /* 수직 중앙 정렬 */
}

.notice-detail-file-area .notice-detail-row-label {
    padding-top: 0; /* 수직 정렬을 위해 패딩 제거 */
}

.notice-detail-file-area .notice-detail-row-divider {
    padding-top: 0; /* 수직 정렬을 위해 패딩 제거 */
}

.notice-detail-file-area .notice-detail-row-content {
    display: flex;
    flex-direction: row;  /* column에서 row로 변경 */
    flex-wrap: wrap;  /* 너비 초과시 줄바꿈 */
    gap: 15px;  /* 파일 간 간격 */
    align-items: center;
}

.board-item-date {
    font-size: 14px;  /* .board-item-title과 동일 */
    color: #999;
    white-space: nowrap;
}

.notice-detail-file-item {
    display: inline-flex;
    align-items: center;
    color: #0066cc;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 14px;
    line-height: 1.4;
}

.notice-detail-file-item:not(:last-child)::after {
    content: '|';
    margin-left: 15px;
    color: #ddd;
}

.notice-detail-file-item:hover {
    color: #004499;
    text-decoration: underline;
}

/*
.notice-detail-file-icon {
    margin-right: 5px;
}
*/

/* 하단 굵은 라인 (고정) */
.notice-detail-footer-line {
    flex-shrink: 0;
    width: calc(100% - 120px);
    height: 3px;
    background: #333;
    margin: 0 60px 0 60px;
}

/* 하단 버튼 영역 (고정) */
.notice-detail-buttons {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 25px 0 30px 0;
}

.notice-detail-btn {
    min-width: 110px;
    height: 44px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.notice-detail-btn:hover:not(:disabled) {
    border-color: #999;
    background: #f8f9fa;
    color: #333;
}

.notice-detail-btn-list {
    background: #4a7cff;
    color: white;
    border-color: #4a7cff;
    font-weight: 600;
}

.notice-detail-btn-list:hover {
    background: #3a6ce5;
    border-color: #3a6ce5;
    color: white;
}

.notice-detail-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #e0e0e0;
}

.notice-detail-btn:disabled:hover {
    border-color: #e0e0e0;
    background: white;
    color: #666;
}

/* 스크롤바 스타일 */
.notice-detail-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.notice-detail-scroll-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.notice-detail-scroll-area::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.notice-detail-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 공지사항 제목 내부 요소들은 클릭 이벤트를 부모로 전파 */
.board-item-title > * {
    pointer-events: none;
}

.notice-list-item-title > * {
    pointer-events: none;
}

/* ===== FAQ 팝업 스타일 ===== */
.faq-popup-content {
    height: 709px;
}

/* FAQ body - 스크롤 제거, flex 컨테이너 */
.faq-popup-content .notice-popup-body {
    overflow: hidden;
    height: calc(100% - 85px);
    display: flex;
    flex-direction: column;
}

/* 검색 영역 고정 */
.faq-popup-content .notice-search-area {
    flex-shrink: 0;
}

/* 분류 탭 고정 */
.faq-category-tabs {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 19px 60px 20px 60px;
    border-bottom: 1px solid #e8e8e8;
}

.faq-category-tab {
    padding: 8px 20px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
}

.faq-category-tab:hover {
    border-color: #999;
    color: #333;
}

.faq-category-tab.active {
    background: #1A3E8C;
    border-color: #1A3E8C;
    color: white;
}

/* 아코디언 영역 - 유일한 스크롤 */
.faq-accordion-area {
    flex: 1;
    padding: 0 60px;
    overflow-y: auto;
    min-height: 0;
}

/* 페이지네이션 고정 */
.faq-popup-content .notice-pagination {
    flex-shrink: 0;
}

/* 아코디언 아이템 */
.faq-accordion-item {
    border-bottom: 1px solid #e8e8e8;
    position: relative;
}

.faq-accordion-item:last-child {
    border-bottom: none;
}

.faq-popup-content .notice-popup-header {
    padding-bottom: 25px;
    margin-bottom: 0;
    border-bottom: 3px solid #333;
    margin-left: 60px;
    margin-right: 60px;
    padding-left: 0;
    padding-right: 0;
}

/* 질문 (헤더) */
.faq-accordion-header {
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
    cursor: pointer;
    width: 100%;
}

.faq-accordion-header:hover {
    background: transparent;
}

.faq-accordion-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: transparent;
    color: #FF5722;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 15px;
    font-weight: 700;
    margin-right: 12px;
}

.faq-accordion-question {
    flex: 1;
    min-width: 0;
    padding-right: 40px;
}

.faq-accordion-arrow {
    position: absolute;
    right: 0;
    top: 20px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #999;
    transition: transform 0.3s;
    transform: rotate(180deg);  /* 기본: ^ 위로 (닫힌 상태) */
}

.faq-accordion-item.active .faq-accordion-arrow {
    transform: rotate(0deg);  /* 열린 상태: ^ 아래로 */
}

/* 답변 (바디) */
.faq-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding-left: 0;  /* 36px에서 0으로 변경 */
    padding-right: 44px;
}

.faq-accordion-item.active .faq-accordion-body {
    max-height: 500px;
    padding-bottom: 15px;
}

.faq-accordion-answer {
    display: flex;
    align-items: flex-start;
    background: transparent;
    margin-left: 0;
    padding-right: 44px;
}

.faq-accordion-answer-header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;  /* 기존 margin 제거 */
}


.faq-accordion-answer-icon {
    flex-shrink: 0;
    width: 32px;  /* 24px에서 32px로 변경 - Q 아이콘과 동일 */
    height: 32px;
    background: transparent;
    color: #305ffe;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 15px;
    /*font-weight: 700;*/
    margin-right: 12px;
}

.faq-accordion-answer-label {
    display: none;
}

.faq-accordion-answer-content {
    flex: 1;
    margin-left: 0;  /* 기존 margin-left: 44px 제거 */
    padding-right: 0;
    line-height: 1.6;
    color: #888888;
}

/* FAQ 팝업 닫기 버튼 위치 - 공지사항과 동일하게 */
.faq-popup-content .notice-popup-close {
    right: -20px;
    top: 20px;
}

/* FAQ 분류 라벨 */
.faq-accordion-category {
    flex-shrink: 0;
    padding: 4px 12px;
    background: #e8f4ff;
    color: #1A3E8C;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 15px;
}

/* FAQ 빈 목록 */
.faq-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 15px;
}

/* 스크롤바 스타일 */
.faq-accordion-area::-webkit-scrollbar {
    width: 8px;
}

.faq-accordion-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.faq-accordion-area::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.faq-accordion-area::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* ===== 일정표 팝업 스타일 ===== */
.schedule-popup-content {
    height: 709px;
}

.schedule-popup-body {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

/* 상단 컨트롤 영역 */
.schedule-controls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    border-bottom: 1px solid #e8e8e8;
    gap: 20px;
    position: relative;  /* 추가 */
}

/* 분류 탭 */
.schedule-category-tabs {
    display: flex;
    gap: 8px;
}

.schedule-category-tab {
    padding: 6px 16px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
}

.schedule-category-tab:hover {
    border-color: #999;
}

.schedule-category-tab.active {
    background: #333;
    border-color: #333;
    color: white;
}

/* 년/월 선택 */
.schedule-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;  /* 추가 */
    left: 50%;  /* 추가 */
    transform: translateX(-50%);  /* 추가 */
}

.schedule-nav-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schedule-nav-btn:hover {
    background: #f5f5f5;
    border-color: #999;
}

.schedule-date-selector {
    display: flex;
    align-items: center;
    gap: 5px;
}

.schedule-select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    background: white;
}

.schedule-select:focus {
    outline: none;
    border-color: #1A3E8C;
}

.schedule-date-separator {
    font-size: 14px;
    color: #666;
}

/* 범례 */
.schedule-legend {
    display: flex;
    gap: 15px;
}

.schedule-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.schedule-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* 캘린더 래퍼 */
.schedule-calendar-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 20px 40px;
}

/* 캘린더 테이블 */
.schedule-calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.schedule-calendar thead th {
    padding: 12px 5px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: center;
    border-bottom: 2px solid #333;
}

.schedule-calendar thead th.sun {
    color: #e53935;
}

.schedule-calendar thead th.sat {
    color: #1e88e5;
}

.schedule-calendar tbody td {
    border: 1px solid #e8e8e8;
    vertical-align: top;
    padding: 0;
    min-height: 90px;
    height: 90px;
    position: relative;
    overflow: visible; /* 바가 셀을 넘어갈 수 있도록 */
}

.schedule-calendar tbody td.empty {
    background: #fafafa;
}

/* 캘린더 날짜 셀 크기 */
.schedule-calendar td {
    width: 145px;
    height: 82px;
    min-width: 145px;
    min-height: 82px;
}

/* 요일 헤더도 같은 너비로 맞춤 */
.schedule-calendar th {
    width: 145px;
    min-width: 145px;
}

/* 날짜 셀 내부 */
.schedule-day-cell {
    width: 145px;
    height: 82px;
    min-height: 80px;  /* 최소 높이만 지정 */
    height: auto;      /* 높이 자동 */
}

/* 날짜 숫자 */
.schedule-day-number {
    padding: 8px 10px 4px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    flex-shrink: 0;
}

.schedule-day-cell.sun .schedule-day-number {
    color: #e53935;
}

.schedule-day-cell.sat .schedule-day-number {
    color: #1e88e5;
}

.schedule-day-cell.other-month .schedule-day-number {
    color: #ccc;
}

.schedule-day-cell.today .schedule-day-number {
    color: #e53935;
    font-weight: 700;
}

/* 일정 바 컨테이너 */
.schedule-events-container {
    min-height: 50px;
    height: auto;
}

/* 일정 바 - 연속 바 스타일 */
.schedule-event-bar {
    font-size: 12px;
    font-weight: 500;
    height: 22px;
    line-height: 22px;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s;
    position: relative;
    z-index: 1;
    margin-bottom: 1px;
}

.schedule-event-bar:hover {
    opacity: 0.85;
    z-index: 10;
}

/* 분류별 색상 */
.schedule-event-bar.cat-검토 {
    background: #ff9037;
}

.schedule-event-bar.cat-심의 {
    background: #29b6f6;
}

.schedule-event-bar.cat-기타 {
    background: #bdbdbd;
}

/* ===== 연속 일정 바 - 끊김 없이 연결 ===== */

/* 단일 일정 (하루) */
.schedule-event-bar.event-single {
    margin-left: 3px;
    margin-right: 3px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 4px;
}

/* 시작 일정 */
.schedule-event-bar.event-start {
    margin-left: 3px;
    margin-right: -1px; /* 셀 경계 넘기 */
    padding-left: 6px;
    padding-right: 8px;
    border-radius: 4px 0 0 4px;
}

/* 중간 일정 */
.schedule-event-bar.event-middle {
    margin-left: -1px; /* 셀 경계 넘기 */
    margin-right: -1px; /* 셀 경계 넘기 */
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 0;
}

/* 끝 일정 */
.schedule-event-bar.event-end {
    margin-left: -1px; /* 셀 경계 넘기 */
    margin-right: 3px;
    padding-left: 8px;
    padding-right: 6px;
    border-radius: 0 4px 4px 0;
}

/* 연속 일정 제목 - 시작점에서만 표시 */
.schedule-event-bar .event-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-event-bar.event-middle .event-title,
.schedule-event-bar.event-end .event-title {
    color: transparent;
    user-select: none;
}

/* 더보기 표시 */
.schedule-more-events {
    font-size: 11px;
    color: #666;
    padding: 2px 6px;
    cursor: pointer;
    margin-left: 3px;
}

.schedule-more-events:hover {
    color: #1A3E8C;
    text-decoration: underline;
}

/* 스크롤바 */
.schedule-calendar-wrapper::-webkit-scrollbar {
    width: 8px;
}

.schedule-calendar-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.schedule-calendar-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.schedule-calendar-wrapper::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* 일정 상세 팝업 분류 라벨 */
.schedule-category-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 500;
    color: white;
}

.schedule-category-label.cat-검토 {
    background: #7cb342;
}

.schedule-category-label.cat-심의 {
    background: #29b6f6;
}

.schedule-category-label.cat-기타 {
    background: #bdbdbd;
}

/* ===== 일정 상세 팝업 스타일 ===== */
#scheduleDetailPopup .notice-detail-content {
    display: flex;
    flex-direction: column;
    width: 1118px;         /* 일정 팝업과 동일 */
    height: 709px;         /* 일정 팝업과 동일 */
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
}

#scheduleDetailPopup .notice-detail-header {
    flex-shrink: 0;
}

#scheduleDetailPopup .notice-detail-header-line {
    flex-shrink: 0;
}

#scheduleDetailPopup .notice-detail-scroll-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

#scheduleDetailPopup .notice-detail-file-area {
    flex-shrink: 0;
}

#scheduleDetailPopup .notice-detail-footer-line {
    flex-shrink: 0;
}

#scheduleDetailPopup .notice-detail-buttons {
    flex-shrink: 0;
}

/* 일정 상세 스크롤바 */
#scheduleDetailPopup .notice-detail-scroll-area::-webkit-scrollbar {
    width: 8px;
}

#scheduleDetailPopup .notice-detail-scroll-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#scheduleDetailPopup .notice-detail-scroll-area::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

#scheduleDetailPopup .notice-detail-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* 공지사항 상세 영역 - 단일 팝업 내부용 */
#noticeDetailArea {
    display: flex;
    flex-direction: column;
    height: calc(100% - 85px); /* 헤더 높이 제외 */
    overflow: hidden;
}

#noticeDetailArea .notice-detail-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-height: 0; /* flex 스크롤을 위해 필요 */
}

#noticeDetailArea .notice-detail-file-area {
    flex-shrink: 0;
    padding: 15px 20px;
    /*border-top: 1px solid #eee;
    background: #fafafa;*/
}

#noticeDetailArea .notice-detail-footer-line {
    flex-shrink: 0;
    height: 3px;
    background: #333;
}

#noticeDetailArea .notice-detail-buttons {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    background: #fff;
}

/* 팝업 컨텐츠 높이 고정 */
#noticePopup .notice-popup-content {
    display: flex;
    flex-direction: column;
    height: 80vh; /* 또는 고정 높이 */
    max-height: 700px;
}

#noticePopup .notice-popup-header {
    flex-shrink: 0;
}

#noticePopup .notice-popup-body,
#noticePopup #noticeDetailArea {
    flex: 1;
    overflow: hidden;
}

/* 목록 영역도 스크롤 가능하게 */
#noticePopup .notice-popup-body {
    display: flex;
    flex-direction: column;
}

#noticePopup .notice-list-area {
    flex: 1;
    overflow-y: auto;
}

/* 공지사항 상세 - 내용 영역 정렬을 굵은 선에 맞춤 */
#noticeDetailArea .notice-detail-scroll-area {
    flex: 1;
    overflow: hidden;  /* 전체 스크롤 제거 */
    padding: 0;
    display: flex;
    flex-direction: column;
}

#noticeDetailArea .notice-detail-row {
    flex-shrink: 0;
    padding: 15px 0;
    margin: 0;
}

#noticeDetailArea .notice-detail-thin-line {
    flex-shrink: 0;
    margin: 0;
}

#noticeDetailArea .notice-detail-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
    margin: 0;
    min-height: 0;
}

#noticeDetailArea .notice-detail-file-area {
    padding: 15px 0;
    margin: 0;
}

#noticeDetailArea .notice-detail-buttons {
    padding: 15px 0;
    margin: 0;
}

/* 자료실/일정 상세 영역 공통 */
#libraryDetailArea,
#scheduleDetailArea {
    display: flex;
    flex-direction: column;
    height: calc(100% - 60px);
    overflow: hidden;
}

#libraryDetailArea .notice-detail-scroll-area,
#scheduleDetailArea .notice-detail-scroll-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0 20px;
}

#libraryDetailArea .notice-detail-file-area,
#scheduleDetailArea .notice-detail-file-area {
    flex-shrink: 0;
    padding: 15px 20px;
}

#libraryDetailArea .notice-detail-footer-line,
#scheduleDetailArea .notice-detail-footer-line {
    flex-shrink: 0;
}

#libraryDetailArea .notice-detail-buttons,
#scheduleDetailArea .notice-detail-buttons {
    flex-shrink: 0;
    padding: 15px 20px;
}

/* 자료실 상세 영역 - 스크롤 및 하단 고정 */
#libraryDetailArea {
    /* display: flex !important; ← 이 줄 삭제! */
    flex-direction: column;
    height: calc(100% - 60px); /* 헤더 높이 제외 */
    overflow: hidden;
}

#libraryDetailArea .notice-detail-header-line {
    flex-shrink: 0;
}

#libraryDetailArea .notice-detail-scroll-area {
    flex: 1;
    overflow: hidden;
    padding: 0;  /* padding: 0 20px → 0으로 변경 */
    display: flex;
    flex-direction: column;
}

#libraryDetailArea .notice-detail-row:first-child {
    padding-top: 15px;
}

#libraryDetailArea .notice-detail-file-area {
    padding-bottom: 15px;
}

#libraryDetailArea .notice-detail-row {
    flex-shrink: 0;
}

#libraryDetailArea .notice-detail-thin-line {
    flex-shrink: 0;
}

/* 상세보기 제목 라인 등록일 */
.notice-detail-row-date {
    flex-shrink: 0;
    font-size: 14px;
    color: #999;  /* 날짜 색상 */
    margin-left: auto;
    padding-left: 20px;
    white-space: nowrap;
}

#libraryDetailArea .notice-detail-content-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

#libraryDetailArea .notice-detail-file-area {
    padding: 0;
}

#libraryDetailArea .notice-detail-footer-line {
    flex-shrink: 0;
    height: 3px;
    background: #333;
}

#libraryDetailArea .notice-detail-buttons {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    background: #fff;
}

/* 팝업 컨텐츠 높이 고정 */
#libraryPopup .notice-popup-content {
    display: flex;
    flex-direction: column;
    height: 80vh;
    max-height: 700px;
}

#libraryPopup .notice-popup-header {
    flex-shrink: 0;
}

#libraryPopup .notice-popup-body,
#libraryPopup #libraryDetailArea {
    flex: 1;
    overflow: hidden;
}
/* 일정 상세 영역 - 스크롤 및 하단 고정 */
#scheduleDetailArea {
    flex-direction: column;
    height: calc(100% - 60px);
    overflow: hidden;
}

#scheduleDetailArea .notice-detail-header-line {
    flex-shrink: 0;
}

#scheduleDetailArea .notice-detail-scroll-area {
    flex: 1;
    overflow: hidden;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
}

#scheduleDetailArea .notice-detail-row {
    flex-shrink: 0;
}

#scheduleDetailArea .notice-detail-thin-line {
    flex-shrink: 0;
}

#scheduleDetailArea .notice-detail-content-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
/* 내용 영역 스크롤바 스타일 */
.notice-detail-content-area::-webkit-scrollbar {
    width: 8px;
}

.notice-detail-content-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.notice-detail-content-area::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.notice-detail-content-area::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

#scheduleDetailArea .notice-detail-file-area {
    flex-shrink: 0;
    padding: 15px 20px;
    /*border-top: 1px solid #eee;
    background: #fafafa;*/
}

#scheduleDetailArea .notice-detail-footer-line {
    flex-shrink: 0;
    height: 3px;
    background: #333;
}

#scheduleDetailArea .notice-detail-buttons {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    background: #fff;
}

/* 일정 팝업 컨텐츠 높이 고정 */
#schedulePopup .notice-popup-content {
    display: flex;
    flex-direction: column;
    height: 709px;
    max-height: calc(100vh - 40px);
}

#schedulePopup .notice-popup-header {
    flex-shrink: 0;
}

#schedulePopup .schedule-popup-body,
#schedulePopup #scheduleDetailArea {
    flex: 1;
    overflow: hidden;
}

.notice-popup-content,
.notice-detail-content {
    margin: auto;
}