/* ==========================================================================
   [최종 고도화] 화사한 배경 + 딥블루 글자 + 하단 본문과의 넉넉한 여백(50px) 부여
   ========================================================================== */

/* 컨테이너 가로폭 확장 (information.css와 동일하게 설정) */
.notice-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 상단 배너 베이스 메인 컨테이너 */
.sub-visual.intro-visual {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: center;
    background: #f4f7fa; /* 이미지 로드 전 임시 베이스 배경 */
    
    /* 🎯 [핵심 추가] 딱 붙어버린 게시판 본문과의 중간 여백을 시원하게 50px 벌려줍니다 */
    margin-bottom: 50px; 
}

/* 배경 이미지 최적화: 화사한 색감을 유지하며 3px만 부드럽게 뭉개 가독성 베이스 마련 */
.sub-visual.intro-visual .visual-bg-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 생성한 고해상도 학원 전경 커뮤니티 이미지 경로 */
    background-image: url('../images/notice_banner.jpg'); 
    background-size: cover;
    background-position: center;
    filter: blur(3px); 
    transform: scale(1.05); /* 블러 가장자리 하얀 현상 방지 */
    z-index: 1;
}

/* 글자 영역(Hero Text) 기본 레이어 설정 */
.sub-visual.intro-visual .hero-text-area {
    position: relative;
    z-index: 10; /* 배경 레이어보다 무조건 위로 띄움 */
}

/* 메인 타이틀: 가독성 높은 진한 딥네이비 블루 색상 */
.sub-visual.intro-visual .hero-text-area h2.oa-title {
    color: #0f172a !important; /* 눈이 편안하고 또렷한 딥네이비 색상 */
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8), 
                 0 1px 3px rgba(15, 23, 42, 0.05) !important; /* 글자 뒤를 하얗게 밝혀 가독성 확보 */
    letter-spacing: -1.5px;
}

/* 서브 설명글: 차분하고 고급스러운 미드나잇 블루 색상 */
.sub-visual.intro-visual .hero-text-area p {
    color: #1e3a8a !important; /* 신뢰감을 주는 진한 블루 색상 고정 */
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8) !important;
    letter-spacing: -0.5px;
}

/* INSTITUTION PROFILE 뱃지: 글자색과 매칭되도록 진한 네이비 테두리와 글자 적용 */
.sub-visual.intro-visual .hero-text-area .badge {
    background-color: rgba(15, 23, 42, 0.08) !important; /* 은은한 네이비 투명 배경 */
    color: #0f172a !important; /* 글자색 네이비 */
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

/* 사선 광선(::before)과 에메랄드 오로라(::after) 가상 요소 비활성화 유지 */
.sub-visual.intro-visual::before,
.sub-visual.intro-visual::after {
    display: none !important;
    content: none !important;
}

/* 모바일 환경에서 배너 여백 조절 */
@media (max-width: 768px) {
    .sub-visual.intro-visual {
        margin-bottom: 30px; /* 모바일은 화면 크기에 맞춰 하단 여백을 30px로 슬림화 */
        min-height: 220px;
    }
}


/* 상단 정보바 (검색창 + 개수) */
.notice-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
}
.total-count {
    font-size: 1rem;
    color: #475569;
}
.total-count span {
    color: #2563eb;
    font-weight: 700;
}

/* 검색 폼 스타일 */
.notice-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-select {
    padding: 10px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #334155;
    background: #fff;
    outline: none;
}
.search-input-box {
    display: flex;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    width: 260px;
}
.search-input-box input {
    border: none;
    padding: 10px 14px;
    width: 100%;
    font-size: 0.95rem;
    outline: none;
}
.btn-search {
    background: none;
    border: none;
    padding: 0 16px;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s;
}
.btn-search:hover {
    color: #2563eb;
}
.btn-search-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #64748b;
    background: #f8fafc;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-search-reset:hover {
    background: #f1f5f9;
    color: #ef4444;
}

/* 행 라인 카드 목록 구조 */
.notice-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 40px;
}
.notice-row-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 22px 30px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.notice-row-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

/* 상단 중요 고정 공지 전용 색띠 스타일 */
.notice-row-card.is-top {
    background: #f8fafc;
    border-left: 5px solid #2563eb; /* 디프 블루 색띠 */
}
.notice-row-card.is-top:hover {
    border-color: #cbd5e1;
    border-left-color: #2563eb;
}

/* 일반 게시글 기본 왼쪽 테두리 */
.notice-row-card:not(.is-top) {
    border-left: 5px solid #94a3b8; /* 차분한 그레이 색띠 */
}

/* 뱃지 인포 */
.notice-badge {
    width: 85px;
    padding: 6px 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    margin-right: 25px;
    flex-shrink: 0;
}
.notice-badge.top-badge { background: #eff6ff; color: #2563eb; }
.notice-badge.normal-badge { background: #f1f5f9; color: #475569; }

/* 본문 영역 */
.notice-info {
    flex-grow: 1;
    padding-right: 20px;
}
.notice-title {
    display: inline-block;
    font-size: 1.2rem;
    color: #1e293b;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 8px;
    transition: color 0.2s;
}
.notice-row-card:hover .notice-title {
    color: #2563eb;
}
.file-icon {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-left: 6px;
}

/* 작성 정보 하단 배치 */
.notice-sub-info {
    display: flex;
    gap: 15px;
    font-size: 0.88rem;
    color: #64748b;
}
.info-item i {
    margin-right: 4px;
}

/* 우측 상세이동 버튼 */
.notice-action {
    width: 120px;
    flex-shrink: 0;
    text-align: right;
}
.btn-view {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.notice-row-card:hover .btn-view {
    color: #2563eb;
}

/* 데이터가 한 건도 없을 때 */
.notice-empty {
    text-align: center;
    padding: 80px 0;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #64748b;
}
.empty-icon {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 15px;
}
.notice-empty p {
    font-size: 1.1rem;
}

/* 하단 배열군 (페이징 + 글쓰기 버튼 정렬) */
.notice-bottom-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    position: relative;
}

/* 페이징 내비게이션 */
.pagination-box {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-grow: 1;
}
.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #475569;
    font-size: 0.95rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    background: #fff;
}
.page-link:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}
.page-link.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

/* 글쓰기 버튼 */
.write-btn-box {
    position: absolute;
    right: 0;
}
.btn-write {
    display: inline-block;
    background: #1e293b;
    color: #fff;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-write:hover {
    background: #0f172a;
}

/* 반응형 모바일 구조 제어 */
@media (max-width: 768px) {
    .notice-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .notice-search-form {
        width: 100%;
    }
    .search-input-box {
        flex-grow: 1;
        width: auto;
    }
    .notice-row-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px;
    }
    .notice-badge {
        margin-right: 0;
    }
    .notice-action {
        width: 100%;
        text-align: right;
    }
    .notice-bottom-group {
        flex-direction: column;
        gap: 20px;
    }
    .write-btn-box {
        position: static;
        width: 100%;
        text-align: right;
    }
}


/* ==========================================================================
   공지사항 상세 보기 (notice_view.php) 스타일 추가
   ========================================================================== */
.notice-view-wrapper {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}

/* 뷰 헤더 */
.view-header {
    padding: 30px 40px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.view-title-line {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.view-title-line h3 {
    font-size: 1.5rem;
    color: #1e293b;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}
.view-badge {
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    flex-shrink: 0;
}
.view-badge.top-badge { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.view-badge.normal-badge { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

/* 메타 정보 라인 */
.view-meta-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.92rem;
    color: #64748b;
    border-top: 1px dashed #e2e8f0;
    padding-top: 15px;
}
.meta-item {
    margin-right: 20px;
}
.meta-item i {
    margin-right: 5px;
}
.meta-item strong {
    color: #334155;
}

/* 첨부 파일 박스 */
.view-file-box {
    padding: 15px 40px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.file-label {
    color: #475569;
    font-weight: 600;
}
.file-download-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.file-download-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* 본문 컨텐츠 영역 */
.view-content-body {
    padding: 50px 40px;
    min-height: 350px;
    font-size: 1.08rem;
    color: #334155;
    line-height: 1.8;
    word-break: break-all;
}

/* 하단 버튼 정렬군 */
.view-bottom-btn-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}
.view-bottom-btn-group .btn-left,
.view-bottom-btn-group .btn-right {
    display: flex;
    gap: 8px;
}

/* 공통 게시판 버튼 스타일 */
.btn-notice-default {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-list-back {
    background: #1e293b;
    color: #fff;
}
.btn-list-back:hover { background: #0f172a; }

.btn-modify {
    background: #fff;
    border-color: #cbd5e1;
    color: #475569;
}
.btn-modify:hover {
    background: #f8fafc;
    color: #1e293b;
    border-color: #94a3b8;
}

.btn-delete {
    background: #fff;
    border-color: #fca5a5;
    color: #ef4444;
}
.btn-delete:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

/* 모바일 화면 처리 */
@media (max-width: 768px) {
    .view-header {
        padding: 20px;
    }
    .view-title-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .view-title-line h3 {
        font-size: 1.25rem;
    }
    .view-meta-line {
        flex-direction: column;
        gap: 8px;
    }
    .view-file-box {
        padding: 12px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .view-content-body {
        padding: 30px 20px;
        font-size: 1rem;
    }
    .view-bottom-btn-group {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    .view-bottom-btn-group .btn-left,
    .view-bottom-btn-group .btn-right {
        width: 100%;
    }
    .btn-notice-default {
        flex-grow: 1;
        justify-content: center;
    }
}



/* ==========================================================================
   공지사항 작성/수정 (notice_write.php) 스타일 추가
   ========================================================================= */
.notice-write-form {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 80px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01);
}
.form-table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.form-row.flex-row {
    display: flex;
    gap: 20px;
}
.flex-1 { flex: 1; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-group label {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

/* 입력 필드 공통 디자인 */
.form-group input[type="text"] {
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1rem;
    color: #334155;
    outline: none;
    transition: border-color 0.2s;
}
.form-group input[type="text"]:focus {
    border-color: #2563eb;
}

/* 커스텀 체크박스 라인 */
.checkbox-group {
    justify-content: center;
}
.custom-checkbox {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #475569 !important;
    cursor: pointer;
    font-weight: 500 !important;
    margin-top: 5px;
}
.custom-checkbox input {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 파일 업로드 스타일 */
.file-input-wrapper {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 20px;
}
.old-file-info {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #64748b;
}
.old-file-info strong {
    color: #ef4444;
}

/* 하단 버튼 배치 */
.write-action-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 35px;
    border-top: 1px solid #f1f5f9;
    padding-top: 25px;
}

/* 모바일 뷰 대응 */
@media (max-width: 768px) {
    .notice-write-form {
        padding: 20px;
    }
    .form-row.flex-row {
        flex-direction: column;
        gap: 20px;
    }
    .write-action-buttons .btn-notice-default {
        flex: 1;
        justify-content: center;
    }
}
/* ==========================================================================
   [최종안 반영] 푸터 하단 여백 대폭 추가 및 격자형 정렬 세팅
   ========================================================================== */

/* 🎯 게시판 전체 컨테이너 하단에 푸터와 격리되는 여백(100px) 부여 */
.notice-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 100px 20px; /* 맨 뒤 100px이 하단 여백입니다 */
    box-sizing: border-box;
}

/* 상단 가이드 제목 헤더 라인 */
.notice-list-header-line {
    display: flex;
    align-items: center;
    padding: 14px 25px;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 0.95rem;
    color: #495057;
    margin-bottom: 8px;
}

/* 가로 폭 폭 정밀 세팅 */
.hd-badge  { width: 80px;  text-align: center; }
.hd-title  { flex: 1;      text-align: center; } 
.hd-date   { width: 130px; text-align: center; color: #495057; } 
.hd-hit    { width: 80px;  text-align: center; color: #495057; }
.hd-action { width: 110px; text-align: center; }

/* 데이터 실측 카드 라인 정렬 */
.notice-row-card {
    display: flex;
    align-items: center;
    padding: 16px 25px;
}
.notice-badge {
    width: 80px;
    text-align: center;
    margin-right: 0;
}
.notice-info {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 제목 정중앙 정렬 */
.notice-title {
    flex: 1;
    text-align: center; 
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 작성일/조회수 한 줄 출력 및 폭 동기화 */
.notice-sub-info {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
}
.notice-sub-info .info-item.date {
    width: 130px;       
    text-align: center;
    white-space: nowrap; 
}
.notice-sub-info .info-item.hit {
    width: 80px;
    text-align: center;
}

/* 자세히 보기 버튼 스타일 */
.notice-action {
    width: 110px;
    text-align: right;
}
.btn-view {
    font-size: 0.82rem;
    color: #6c757d;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.notice-row-card:hover .btn-view {
    background: #0056b3;
    color: #ffffff;
    border-color: #0056b3;
}

/* 모바일 예외 처리 */
@media (max-width: 768px) {
    .notice-container { padding-bottom: 60px; } /* 모바일은 조금 줄임 */
    .notice-list-header-line { display: none; }
    .notice-info { flex-direction: column; align-items: flex-start; }
    .notice-title { text-align: left; justify-content: flex-start; }
    .notice-sub-info .info-item.date,
    .notice-sub-info .info-item.hit { width: auto; text-align: left; margin-right: 12px; }
    .notice-action { width: 100%; text-align: left; margin-top: 10px; }
    .btn-view { width: 100%; justify-content: center; }
}