:root {
    --color-background: #e0e5ec;
    --color-surface: #e0e5ec;
    /* 네오모피즘은 배경과 동일 톤 사용 */
    --color-primary: #4a64b0;
    --color-accent: #fa8b88;
    --color-text-primary: #333333;
    --color-text-secondary: #6b7280;

    /* 네오모피즘 전용 그림자 */
    --shadow-out: 8px 8px 16px #b8c0cc,
        -8px -8px 16px #ffffff;
    --shadow-out-soft: 6px 6px 12px #b8c0cc,
        -6px -6px 12px #ffffff;
    --shadow-inset: inset 6px 6px 12px #b8c0cc,
        inset -6px -6px 12px #ffffff;
}

/* 제목도 살짝 네오모피즘 느낌 */
.notice-h1,
.manual-h1 {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 16px;
    display: inline-block;
    color: var(--color-accent);
    background: var(--color-surface);
    box-shadow: var(--shadow-out);
}

/* 공지사항 목록 */
.notice-board,
.manual-board {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* “불러오는 중입니다...” 문구 */
.notice-board>p,
.manual-board>p {
    margin: 0;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-out-soft);
}

/* 개별 공지 카드 */
.notice-item,
.manual-item {
    background: var(--color-surface);
    border-radius: 18px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-out);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notice-item:hover,
.manual-item:hover {
    transform: translateY(-2px);
    box-shadow: 10px 10px 20px #b0b8c4,
        -10px -10px 20px #ffffff;
}

/* 헤더 영역 (제목, 날짜, 토글 아이콘) */
.notice-header,
.manual-header {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
}

/* 날짜 */
.notice-date,
.manual-date {
    min-width: 80px;
    margin-right: 14px;
    color: var(--color-text-secondary);
}

/* 제목 */
.notice-title,
.manual-title {
    flex-grow: 1;
    font-weight: 600;
}

/* 토글 아이콘 네오모피즘 버튼 */
.toggle-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    box-shadow: var(--shadow-out-soft);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.notice-header.active .toggle-icon-wrap {
    box-shadow: var(--shadow-inset);
    /* 눌린 느낌 */
}

.toggle-icon {
    color: var(--color-primary);
}

/* 내용 영역 (인셋 네오모피즘) */
.notice-content,
.manual-content {
    padding: 14px 18px 16px;
    background: var(--color-surface);
    display: none;
    color: var(--color-text-secondary);
    line-height: 1.6;
    box-shadow: var(--shadow-inset);
}

/* 페이지네이션 */
#pagination-container,
#pagination2-container {
    text-align: center;
    margin-top: 18px;
    padding-bottom: 10px;
}

.page-link {
    padding: 8px 14px;
    margin: 0 4px;
    cursor: pointer;
    border-radius: 999px;
    border: none;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    display: inline-block;
    box-shadow: var(--shadow-out-soft);
    transition: box-shadow 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}

.page-link:hover {
    transform: translateY(-1px);
    box-shadow: 8px 8px 16px #b8c0cc,
        -8px -8px 16px #ffffff;
}

.page-link.active {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: var(--shadow-inset);
    /* 눌린 상태 */
}