/* ==================== CSS 변수 및 기본 설정 ==================== */
:root {
    --main-color: #F4A228;
    --sub-color: #4CAF50;
    --point-color: #FF6B35;
    --bg-color: #FFF8F0;
    --text-color: #333;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --white: #ffffff;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.15);
    --transition: all 0.3s ease;
    --font-size-base: 16px;
    --border-color: #dee2e6;
}

/* 고대비 모드 */
body.high-contrast {
    --main-color: #000;
    --sub-color: #000;
    --point-color: #000;
    --bg-color: #fff;
    --text-color: #000;
    --white: #ffff00;
    --gray-100: #fff;
    --gray-200: #fff;
}

body.high-contrast * {
    border-color: #000 !important;
    color: #000 !important;
    background-color: #fff !important;
}

body.high-contrast a,
body.high-contrast button {
    background-color: #ffff00 !important;
    border: 2px solid #000 !important;
}

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

html {
    font-size: var(--font-size-base);
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--bg-color);
}

/* 스킵 네비게이션 */
.skip-nav {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--main-color);
    color: white;
    padding: 10px 20px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 700;
}

.skip-nav:focus {
    top: 0;
}

/* 포커스 스타일 */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 3px solid var(--main-color);
    outline-offset: 2px;
}

/* ==================== 헤더 ==================== */
header {
    background: white;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-top {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
}

.site-name small {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-600);
    margin-top: 5px;
}

.header-utils {
    display: flex;
    gap: 10px;
}

.header-btn {
    padding: 10px 20px;
    border: 2px solid var(--main-color);
    background: white;
    color: var(--main-color);
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
}

.header-btn:hover {
    background: var(--main-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.header-btn.primary {
    background: var(--main-color);
    color: white;
}

.header-btn.primary:hover {
    background: var(--point-color);
}

/* ==================== 네비게이션 ==================== */
nav {
    background: var(--main-color);
}

.nav-menu {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    list-style: none;
}

.nav-menu > li {
    position: relative;
}

.nav-menu > li > a {
    display: block;
    padding: 18px 30px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: var(--transition);
}

.nav-menu > li > a:hover {
    background: rgba(255,255,255,0.2);
}

.nav-menu .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    box-shadow: var(--shadow-hover);
    list-style: none;
    border-radius: 0 0 8px 8px;
}

.nav-menu li:hover .submenu {
    display: block;
}

.nav-menu .submenu a {
    display: block;
    padding: 12px 20px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition);
}

.nav-menu .submenu a:hover {
    background: var(--bg-color);
    color: var(--main-color);
    padding-left: 25px;
}

/* ==================== 컨테이너 ==================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.page-content {
    min-height: calc(100vh - 400px);
    padding: 40px 0;
}

/* SPA 페이지 전환 */
.page {
    display: none;
    animation: fadeIn 0.5s;
}

.page.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== 메인 슬라이드 ==================== */
.main-slider {
    position: relative;
    height: 500px;
    overflow: hidden;
    margin-bottom: 60px;
    cursor: grab;
    user-select: none;
}

.main-slider:active {
    cursor: grabbing;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--main-color), var(--point-color));
}

.slide.active {
    opacity: 1;
}

.slide-content {
    text-align: center;
    color: white;
    padding: 40px;
}

.slide-content h2 {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.slide-content p {
    font-size: 24px;
    font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.slider-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

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

.slider-dot.active {
    background: white;
    width: 30px;
    border-radius: 6px;
}

/* 슬라이더 화살표 버튼 */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.3);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 10;
    color: white;
    font-size: 20px;
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.slider-arrow-left {
    left: 20px;
}

.slider-arrow-right {
    right: 20px;
}

/* 모바일에서 화살표 크기 조정 */
@media (max-width: 768px) {
    .slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .slider-arrow-left {
        left: 10px;
    }
    
    .slider-arrow-right {
        right: 10px;
    }
}

/* ==================== 퀵 버튼 ==================== */
.quick-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.quick-btn {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-color);
}

.quick-btn:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.quick-btn .icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.quick-btn.donate .icon { color: var(--point-color); }
.quick-btn.regular .icon { color: var(--main-color); }
.quick-btn.volunteer .icon { color: var(--sub-color); }

.quick-btn h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.quick-btn p {
    font-size: 14px;
    color: var(--gray-600);
}

/* ==================== 2단 레이아웃 ==================== */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.section-box {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--main-color);
}

/* 공지사항 탭 */
.notice-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.notice-tab {
    padding: 8px 16px;
    border: 2px solid var(--gray-300);
    background: white;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
}

.notice-tab.active {
    background: var(--main-color);
    color: white;
    border-color: var(--main-color);
}

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

.notice-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
    transition: var(--transition);
}

.notice-item:hover {
    background: var(--bg-color);
    padding-left: 10px;
}

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

.notice-item .title {
    font-weight: 500;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notice-item .title .badge {
    background: var(--point-color);
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
}

.notice-item .meta {
    font-size: 12px;
    color: var(--gray-600);
}

/* 달력 */
.calendar {
    width: 100%;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.calendar-header button {
    background: var(--main-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.calendar-header h3 {
    font-size: 18px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.calendar-day.header {
    font-weight: 700;
    background: var(--gray-100);
    cursor: default;
}

.calendar-day.today {
    background: var(--main-color);
    color: white;
    font-weight: 700;
}

.calendar-day.has-event::after {
    content: '●';
    position: absolute;
    bottom: 5px;
    font-size: 8px;
    color: var(--sub-color);
}

.calendar-day:hover:not(.header) {
    background: var(--bg-color);
    transform: scale(1.1);
}

/* 활동사진 갤러리 */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.photo-item {
    aspect-ratio: 1;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--main-color), var(--point-color));
    cursor: pointer;
    transition: var(--transition);
    overflow: hidden;
    position: relative;
}

.photo-item:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-hover);
}

.photo-item::after {
    content: '📷';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    opacity: 0.5;
}

/* 유튜브 그리드 */
.youtube-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.youtube-item {
    cursor: pointer;
    transition: var(--transition);
    border-radius: 12px;
    overflow: hidden;
}

.youtube-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.youtube-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.youtube-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.youtube-thumbnail .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(244, 162, 40, 0.9);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: var(--transition);
}

.youtube-item:hover .play-button {
    background: var(--main-color);
    transform: translate(-50%, -50%) scale(1.1);
}

/* 유튜브 비디오 카드 (게시판용) */
.youtube-video-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.youtube-video-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
}

.youtube-video-card .youtube-thumbnail {
    cursor: pointer;
}

/* 민원/상담 카드 */
.consultation-card {
    background: white;
    padding: 35px 25px;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 2px solid transparent;
}

.consultation-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border-color: var(--main-color);
}

.consultation-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.consultation-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 12px;
}

.consultation-desc {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 45px;
}

.consultation-btn {
    width: 100%;
    padding: 12px;
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.consultation-btn:hover {
    background: var(--point-color);
}

/* 활동 사진 카드 */
.photo-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: var(--transition);
    cursor: pointer;
}

.photo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.photo-image {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.photo-info {
    padding: 20px;
}

.photo-info h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.photo-info p {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 15px;
    min-height: 42px;
}

.photo-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--gray-500);
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
}

/* 관리자 페이지 */
.admin-banner-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    border: 2px solid var(--gray-200);
}

.admin-banner-preview {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-banner-item h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.admin-banner-item p {
    font-size: 14px;
    color: var(--gray-600);
}

.btn-edit, .btn-delete {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
}

.btn-edit {
    background: var(--sub-color);
    color: white;
}

.btn-edit:hover {
    background: #45a049;
}

.btn-delete {
    background: #f44336;
    color: white;
}

.btn-delete:hover {
    background: #da190b;
}

.admin-board-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid var(--gray-200);
}

.admin-board-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: var(--main-color);
}

.admin-board-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
}

.admin-board-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.admin-board-card p {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 15px;
}

.admin-board-btn {
    width: 100%;
    padding: 10px;
    background: var(--gray-100);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.admin-board-btn:hover {
    background: var(--main-color);
    color: white;
}

.stat-card {
    background: white;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid var(--gray-200);
}

.stat-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.stat-value {
    font-size: 36px;
    font-weight: 900;
    color: var(--main-color);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 600;
}

/* 사이트맵 */
.sitemap-section {
    background: white;
    padding: 25px;
    border-radius: 12px;
    border: 2px solid var(--gray-200);
}

.sitemap-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--main-color);
}

.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-200);
}

.sitemap-list li:last-child {
    border-bottom: none;
}

.sitemap-list a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 15px;
    display: block;
    transition: var(--transition);
    padding-left: 15px;
    position: relative;
}

.sitemap-list a:before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--main-color);
}

.sitemap-list a:hover {
    color: var(--main-color);
    padding-left: 20px;
}

/* SNS 링크 */
.sns-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sns-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--gray-100);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-color);
    transition: var(--transition);
}

.sns-item:hover {
    background: var(--bg-color);
    transform: translateX(10px);
}

.sns-item .icon {
    font-size: 32px;
    width: 50px;
    text-align: center;
}

.sns-item .info h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
}

.sns-item .info p {
    font-size: 12px;
    color: var(--gray-600);
}

/* ==================== 푸터 ==================== */
footer {
    background: var(--text-color);
    color: white;
    padding: 60px 0 30px;
    margin-top: 80px;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.footer-info {
    flex: 1;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.footer-link-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 0;
    transition: var(--transition);
    width: 100%;
}

.footer-link-item:hover {
    opacity: 0.8;
}

.footer-link-logo {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    padding: 8px;
    flex-shrink: 0;
    margin-right: 12px;
}

.footer-link-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-link-text {
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    line-height: 45px;
    display: inline-block;
}

.footer-link-item a {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    transition: var(--transition);
    width: 100%;
}

.footer-link-item a:hover {
    transform: translateX(-5px);
}

.footer-info h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.footer-info p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--gray-400);
}

.footer-info p strong {
    color: white;
    margin-right: 10px;
}

.footer-policy-links {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--gray-600);
}

.footer-policy-links a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
}

.footer-policy-links a:hover {
    color: var(--main-color);
    text-decoration: underline;
}

.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 40px 0;
    border-top: 1px solid var(--gray-600);
    text-align: center;
    font-size: 14px;
    color: var(--gray-500);
    margin-top: 40px;
}

/* ==================== 반응형 ==================== */
@media (max-width: 1024px) {
    .header-top {
        padding: 15px 20px;
    }

    .site-name {
        font-size: 18px;
    }

    .nav-menu > li > a {
        padding: 15px 20px;
        font-size: 14px;
    }

    .quick-buttons {
        grid-template-columns: 1fr;
    }

    .two-column {
        grid-template-columns: 1fr;
    }

    .photo-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

}

/* ==================== 반응형 디자인 ==================== */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .slide-content h2 {
        font-size: 32px;
    }

    .slide-content p {
        font-size: 16px;
    }

    /* 모바일 헤더 */
    .header-top {
        padding: 15px 20px;
    }

    .logo {
        width: 45px;
        height: 45px;
    }

    .site-name {
        font-size: 16px;
    }

    .site-name small {
        font-size: 11px;
        margin-top: 3px;
    }

    /* 모바일에서 검색, 로그인, 후원하기 버튼 숨기기 */
    .header-utils .header-btn:not(:last-child) {
        display: none;
    }

    /* 사이트맵 버튼만 표시 */
    .header-utils {
        gap: 0;
    }

    .header-btn {
        font-size: 13px;
        padding: 8px 16px;
    }

    /* 모바일 네비게이션 완전히 숨김 */
    nav {
        display: none;
    }

    .nav-menu {
        display: none;
    }

    /* 모바일 사이트맵 최적화 */
    .page-sitemap .content-box > div {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .sitemap-section {
        padding: 20px;
    }

    .sitemap-title {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .sitemap-list a {
        font-size: 14px;
        padding: 8px 0 8px 15px;
    }

    .photo-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .youtube-grid {
        grid-template-columns: 1fr;
    }

    /* 퀵 버튼 모바일 */
    .quick-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .quick-btn {
        padding: 25px;
    }

    /* 투 컬럼 레이아웃 → 1컬럼 */
    .two-column {
        flex-direction: column;
        gap: 30px;
    }

    /* 페이지 헤더 */
    .page-title {
        font-size: 28px;
    }

    .page-subtitle {
        font-size: 15px;
    }

    .content-box {
        padding: 25px 20px;
    }

    /* 푸터 모바일 */
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .footer-links {
        width: 100%;
        align-items: flex-start;
    }

    .footer-link-item a {
        width: 100%;
    }

    .footer-link-logo {
        width: 40px;
        height: 40px;
        padding: 7px;
        margin-right: 10px;
    }

    .footer-link-text {
        font-size: 14px;
        line-height: 40px;
    }

    .footer-policy-links {
        font-size: 13px;
    }
}

/* ==================== 페이지 공통 스타일 ==================== */
.page-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 40px 0;
    background: linear-gradient(135deg, rgba(244,162,40,0.1), rgba(76,175,80,0.1));
    border-radius: 20px;
}

.page-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-color);
    margin-bottom: 15px;
}

.page-subtitle {
    font-size: 18px;
    color: var(--gray-600);
}

.content-box {
    background: white;
    padding: 50px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 40px;
}

.content-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--main-color);
}

/* ==================== 인사말 페이지 ==================== */
.greeting-section {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 50px;
    align-items: start;
}

.greeting-image {
    text-align: center;
}

.greeting-text {
    padding: 20px;
}

/* ==================== 비전 페이지 ==================== */
.vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.vision-card {
    background: var(--bg-color);
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    transition: var(--transition);
}

.vision-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.vision-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.vision-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 15px;
}

.vision-card p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--gray-600);
}

.vision-mission {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.mission-item {
    background: linear-gradient(135deg, var(--main-color), var(--point-color));
    padding: 40px;
    border-radius: 16px;
    color: white;
    text-align: center;
}

.mission-badge {
    display: inline-block;
    background: rgba(255,255,255,0.3);
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 14px;
}

.mission-item h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.mission-item p {
    font-size: 15px;
    line-height: 1.8;
}

.core-values {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.value-item {
    text-align: center;
    padding: 30px 20px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    transition: var(--transition);
}

.value-item:hover {
    border-color: var(--main-color);
    transform: translateY(-5px);
}

.value-number {
    font-size: 36px;
    font-weight: 900;
    color: var(--main-color);
    margin-bottom: 15px;
}

.value-item h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-color);
}

.value-item p {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.6;
}

/* ==================== 조직도 ==================== */
.org-chart {
    padding: 40px;
}

.org-level {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    position: relative;
}

.org-level::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 30px;
    background: var(--gray-400);
}

.org-level:last-child::after {
    display: none;
}

.org-departments {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.org-departments::after {
    display: none;
}

.org-box {
    background: white;
    border: 3px solid var(--gray-300);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    min-width: 200px;
}

.org-board {
    border-color: var(--point-color);
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(255,107,53,0.05));
}

.org-head {
    border-color: var(--main-color);
    background: linear-gradient(135deg, rgba(244,162,40,0.1), rgba(244,162,40,0.05));
}

.org-dept {
    border-color: var(--sub-color);
    background: linear-gradient(135deg, rgba(76,175,80,0.1), rgba(76,175,80,0.05));
}

.org-team {
    border-color: var(--gray-400);
}

.org-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.org-subtitle {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 10px;
}

.org-members {
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.8;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--gray-200);
    text-align: left;
}

/* ==================== 연혁 ==================== */
.timeline {
    position: relative;
    padding-left: 50px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--main-color), var(--sub-color));
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
    padding-left: 30px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -38px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: var(--main-color);
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--main-color);
}

.timeline-year {
    font-size: 32px;
    font-weight: 900;
    color: var(--main-color);
    margin-bottom: 15px;
}

.timeline-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 15px;
}

.timeline-content ul {
    list-style: none;
    padding: 0;
}

.timeline-content ul li {
    padding: 10px 0;
    padding-left: 25px;
    position: relative;
    font-size: 15px;
    line-height: 1.8;
    color: var(--gray-600);
}

.timeline-content ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--sub-color);
    font-weight: 700;
}

/* ==================== 오시는 길 ==================== */
.location-info {
    background: var(--bg-color);
    border-radius: 12px;
    padding: 30px;
}

.info-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-200);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 700;
    color: var(--text-color);
    font-size: 16px;
}

.info-value {
    font-size: 16px;
    color: var(--gray-600);
}

.map-container {
    margin: 20px 0;
}

.transport-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.transport-card {
    background: var(--bg-color);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    transition: var(--transition);
}

.transport-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.transport-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

.transport-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 15px;
}

.transport-card p {
    font-size: 15px;
    color: var(--text-color);
    margin-bottom: 10px;
}

.transport-detail {
    font-size: 14px !important;
    color: var(--gray-600) !important;
    line-height: 1.8;
}

.notice-box {
    background: var(--bg-color);
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid var(--main-color);
}

/* ==================== 사업 소개 페이지 스타일 ==================== */
.program-intro {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: center;
}

.program-image {
    width: 100%;
}

.program-description {
    padding: 20px;
}

/* 서비스 카드 */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.service-card {
    background: var(--bg-color);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    transition: var(--transition);
    border: 2px solid transparent;
}

.service-card:hover {
    border-color: var(--main-color);
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.service-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

.service-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-color);
}

.service-card p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--gray-600);
}

.two-col-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.info-section {
    background: var(--bg-color);
    padding: 30px;
    border-radius: 12px;
}

.contact-box {
    background: var(--bg-color);
    padding: 40px;
    border-radius: 16px;
    text-align: center;
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-label {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
}

.contact-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
}

/* 봉사 프로그램 리스트 */
.program-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.program-item {
    display: flex;
    gap: 25px;
    padding: 25px;
    background: var(--bg-color);
    border-radius: 12px;
    transition: var(--transition);
}

.program-item:hover {
    background: white;
    box-shadow: var(--shadow);
    transform: translateX(10px);
}

.program-num {
    font-size: 32px;
    font-weight: 900;
    color: var(--sub-color);
    min-width: 60px;
}

.program-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-color);
}

.program-content p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 10px;
}

.program-tag {
    display: inline-block;
    background: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    color: var(--sub-color);
    margin-right: 8px;
    font-weight: 500;
}

/* 혜택 카드 */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.benefit-card {
    background: white;
    border: 2px solid var(--gray-200);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    transition: var(--transition);
}

.benefit-card:hover {
    border-color: var(--sub-color);
    transform: translateY(-5px);
}

.benefit-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

.benefit-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-color);
}

.benefit-card p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--gray-600);
}

/* 신청 단계 */
.apply-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 0;
}

.apply-step {
    text-align: center;
    flex: 1;
    max-width: 200px;
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--sub-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    margin: 0 auto 15px;
}

.apply-step h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-color);
}

.apply-step p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-600);
}

.step-arrow {
    font-size: 32px;
    color: var(--gray-400);
    font-weight: 700;
}

/* 예술단 팀 카드 */
.arts-teams {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.arts-team-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.arts-team-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.team-header {
    padding: 40px 20px;
    text-align: center;
    color: white;
}

.team-icon {
    font-size: 60px;
    margin-bottom: 15px;
}

.team-header h3 {
    font-size: 24px;
    font-weight: 700;
}

.team-body {
    background: white;
    padding: 30px;
}

.team-body h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-color);
}

.team-body ul {
    list-style: none;
    padding: 0;
}

.team-body ul li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    font-size: 14px;
    color: var(--gray-600);
}

.team-body ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--point-color);
    font-weight: 700;
}

.team-body p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--gray-600);
}

/* 공연 타임라인 */
.performance-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.perf-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 25px;
    padding: 25px;
    background: var(--bg-color);
    border-radius: 12px;
    border-left: 5px solid var(--point-color);
    transition: var(--transition);
}

.perf-item:hover {
    background: white;
    box-shadow: var(--shadow);
    transform: translateX(10px);
}

.perf-date {
    font-size: 24px;
    font-weight: 900;
    color: var(--point-color);
    text-align: center;
}

.perf-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-color);
}

.perf-content p {
    font-size: 15px;
    color: var(--gray-600);
}

/* 모집 안내 */
.recruitment-box {
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(233,30,99,0.1));
    padding: 40px;
    border-radius: 16px;
    border: 3px solid var(--point-color);
}

.recruitment-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.recruit-item {
    background: white;
    padding: 25px;
    border-radius: 12px;
}

.recruit-item h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--point-color);
}

.recruit-item p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--gray-600);
}

/* 교육 프로그램 카드 */
.edu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.edu-card {
    background: white;
    border: 2px solid var(--gray-200);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    transition: var(--transition);
}

.edu-card:hover {
    border-color: #2196F3;
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.edu-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.edu-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-color);
}

.edu-card p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-600);
    margin-bottom: 12px;
}

.edu-time {
    display: inline-block;
    background: #E3F2FD;
    color: #2196F3;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* 수강 안내 */
.class-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.class-info-box {
    background: var(--bg-color);
    padding: 30px;
    border-radius: 16px;
    border-top: 5px solid #2196F3;
}

.class-info-box h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-color);
}

.class-info-box ul {
    list-style: none;
    padding: 0;
}

.class-info-box ul li {
    padding: 10px 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--gray-600);
}

/* 시설 안내 */
.facility-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.facility-item {
    background: var(--bg-color);
    padding: 30px;
    border-radius: 12px;
}

.facility-item h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.facility-item p {
    font-size: 15px;
    line-height: 2;
    color: var(--gray-600);
}

/* ==================== 반응형 (사업 소개) ==================== */
@media (max-width: 1024px) {
    .program-intro {
        grid-template-columns: 1fr;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .two-col-section {
        grid-template-columns: 1fr;
    }

    .benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .arts-teams {
        grid-template-columns: 1fr;
    }

    .recruitment-info {
        grid-template-columns: 1fr;
    }

    .edu-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .class-info-grid, .facility-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .service-grid, .benefit-grid, .edu-grid {
        grid-template-columns: 1fr;
    }

    .apply-steps {
        flex-direction: column;
    }

    .step-arrow {
        transform: rotate(90deg);
    }

    .contact-info {
        flex-direction: column;
        gap: 20px;
    }
}

/* ==================== 게시판 스타일 ==================== */
.board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.board-search {
    display: flex;
    gap: 10px;
}

.board-search input {
    padding: 10px 15px;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    width: 250px;
}

.board-search button {
    padding: 10px 20px;
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.board-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.board-table thead {
    background: var(--bg-color);
}

.board-table th {
    padding: 15px;
    text-align: center;
    font-weight: 700;
    color: var(--text-color);
    border-bottom: 2px solid var(--gray-300);
}

.board-table td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
}

.board-table tbody tr {
    transition: var(--transition);
    cursor: pointer;
}

.board-table tbody tr:hover {
    background: var(--bg-color);
}

.board-table tbody tr.notice {
    background: #FFF9E6;
}

.board-table tbody tr.notice:hover {
    background: #FFF3CC;
}

.board-title {
    text-align: left !important;
    font-weight: 500;
}

.board-title .pin {
    color: var(--point-color);
    margin-right: 8px;
    font-weight: 700;
}

.board-badge {
    display: inline-block;
    background: var(--point-color);
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    margin-right: 8px;
}

.board-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 30px;
}

.board-pagination button {
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    background: white;
    cursor: pointer;
    border-radius: 6px;
    transition: var(--transition);
}

.board-pagination button:hover {
    background: var(--main-color);
    color: white;
    border-color: var(--main-color);
}

.board-pagination button.active {
    background: var(--main-color);
    color: white;
    border-color: var(--main-color);
    font-weight: 700;
}

.board-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.btn-write {
    padding: 12px 30px;
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
}

.btn-write:hover {
    background: var(--point-color);
}

/* 게시글 상세 */
.post-detail {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.post-header {
    background: var(--bg-color);
    padding: 30px;
    border-bottom: 2px solid var(--gray-300);
}

.post-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-color);
}

.post-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--gray-600);
}

.post-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-content {
    padding: 40px 30px;
    min-height: 300px;
    line-height: 2;
    font-size: 16px;
    color: var(--text-color);
}

/* 에디터 툴바 */
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
}

.toolbar-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: white;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    max-width: 120px;
}

#font-family {
    width: 140px;
}

#font-size {
    width: 70px;
}

/* 폰트 선택 옵션별 폰트 적용 */
#font-family option[value="Noto Sans KR"] {
    font-family: 'Noto Sans KR', sans-serif;
}

#font-family option[value="Nanum Gothic"] {
    font-family: 'Nanum Gothic', sans-serif;
}

#font-family option[value="Nanum Myeongjo"] {
    font-family: 'Nanum Myeongjo', serif;
}

#font-family option[value="Jua"] {
    font-family: 'Jua', sans-serif;
}

#font-family option[value="Do Hyeon"] {
    font-family: 'Do Hyeon', sans-serif;
}

#font-family option[value="Black Han Sans"] {
    font-family: 'Black Han Sans', sans-serif;
}

#font-family option[value="Sunflower"] {
    font-family: 'Sunflower', sans-serif;
}

#font-family option[value="Gowun Batang"] {
    font-family: 'Gowun Batang', serif;
}

#font-family option[value="Gowun Dodum"] {
    font-family: 'Gowun Dodum', sans-serif;
}

#font-family option[value="Cute Font"] {
    font-family: 'Cute Font', cursive;
}

#font-family option[value="Single Day"] {
    font-family: 'Single Day', cursive;
}

#font-family option[value="Gamja Flower"] {
    font-family: 'Gamja Flower', cursive;
}

#font-family option[value="Hi Melody"] {
    font-family: 'Hi Melody', cursive;
}

#font-family option[value="Poor Story"] {
    font-family: 'Poor Story', cursive;
}

#font-family option[value="Stylish"] {
    font-family: 'Stylish', sans-serif;
}

.toolbar-select:hover {
    border-color: var(--main-color);
}

.toolbar-select:focus {
    outline: none;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(2, 123, 227, 0.1);
}

.toolbar-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: var(--text-color);
}

.toolbar-btn:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: white;
}

.toolbar-btn:active {
    transform: scale(0.95);
}

.toolbar-separator {
    height: 24px;
    width: 1px;
    background: var(--border-color);
    margin: 0 4px;
}

/* contenteditable placeholder */
#post-content[contenteditable]:empty:before {
    content: attr(placeholder);
    color: var(--gray-500);
    pointer-events: none;
    display: block;
}

#post-content[contenteditable] {
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

#post-content[contenteditable] img {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block;
}

#post-content[contenteditable] video {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block;
}

#post-content[contenteditable] iframe {
    max-width: 100%;
    width: 560px;
    height: 315px;
    margin: 15px 0;
    border-radius: 8px;
    border: none;
}

#post-content[contenteditable] a {
    color: var(--main-color);
    text-decoration: underline;
}

.post-footer {
    padding: 20px 30px;
    background: var(--bg-color);
    display: flex;
    justify-content: space-between;
}

.btn-list, .btn-edit, .btn-delete {
    padding: 10px 20px;
    border: 2px solid var(--gray-400);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
}

.btn-list:hover {
    background: var(--gray-400);
    color: white;
}

.btn-edit {
    border-color: var(--sub-color);
    color: var(--sub-color);
}

.btn-edit:hover {
    background: var(--sub-color);
    color: white;
}

.btn-delete {
    border-color: var(--point-color);
    color: var(--point-color);
}

.btn-delete:hover {
    background: var(--point-color);
    color: white;
}

/* 글쓰기 폼 */
.write-form {
    background: white;
    padding: 40px;
    border-radius: 12px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-color);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Noto Sans KR', sans-serif;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--main-color);
}

.form-group textarea {
    min-height: 300px;
    resize: vertical;
}

/* contenteditable 에디터 스타일 */
[contenteditable="true"]:empty:before {
    content: attr(placeholder);
    color: var(--gray-400);
    cursor: text;
}

[contenteditable="true"]:focus {
    outline: none;
    border-color: var(--main-color);
}

[contenteditable="true"] img {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
}

[contenteditable="true"] img:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-checkbox input[type="checkbox"] {
    width: auto;
}

/* 체크박스 그룹 (데스크탑: 가로, 모바일: 세로) */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;  /* 각 선택지 간격 증가 */
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 5px;  /* 체크박스와 텍스트 간격 감소 */
    white-space: nowrap;
}

.checkbox-inline input[type="checkbox"],
.checkbox-inline input[type="radio"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;  /* 체크박스 크기 고정 */
}

/* 모바일에서 체크박스 세로 나열 */
@media (max-width: 768px) {
    .checkbox-group {
        flex-direction: column;
        gap: 12px;  /* 모바일에서 선택지 간격 */
    }
    
    .checkbox-inline {
        white-space: normal;
    }
}

.form-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.btn-submit {
    padding: 15px 50px;
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
}

.btn-submit:hover {
    background: var(--point-color);
}

.btn-cancel {
    padding: 15px 50px;
    background: var(--gray-400);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
}

.btn-cancel:hover {
    background: var(--gray-600);
}

/* FAQ 아코디언 */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
}

.faq-item.active {
    border-color: var(--main-color);
}

.faq-question {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    transition: var(--transition);
}

.faq-question:hover {
    background: var(--bg-color);
}

.faq-q {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
}

.faq-icon-q {
    width: 35px;
    height: 35px;
    background: var(--main-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
}

.faq-toggle {
    font-size: 24px;
    color: var(--gray-400);
    transition: var(--transition);
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
    color: var(--main-color);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--bg-color);
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-a {
    padding: 25px;
    display: flex;
    gap: 15px;
}

.faq-icon-a {
    width: 35px;
    height: 35px;
    background: var(--sub-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.faq-answer-text {
    font-size: 15px;
    line-height: 2;
    color: var(--gray-600);
}

/* ==================== 봉사 시스템 스타일 ==================== */
.volunteer-calendar-view {
    background: white;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.volunteer-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.volunteer-item {
    background: var(--bg-color);
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid var(--sub-color);
    transition: var(--transition);
}

.volunteer-item:hover {
    background: white;
    box-shadow: var(--shadow);
    transform: translateX(5px);
}

.volunteer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.volunteer-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.volunteer-date {
    font-size: 16px;
    color: var(--sub-color);
    font-weight: 600;
}

.volunteer-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--sub-color);
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.volunteer-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 15px;
    padding: 15px;
    background: white;
    border-radius: 8px;
}

.volunteer-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-600);
}

.volunteer-info-item strong {
    color: var(--text-color);
}

.volunteer-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 15px;
}

.volunteer-actions {
    display: flex;
    gap: 10px;
}

.btn-volunteer-apply {
    padding: 10px 25px;
    background: var(--sub-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.btn-volunteer-apply:hover {
    background: var(--main-color);
    transform: translateY(-2px);
}

/* 봉사 신청 폼 */
.apply-form-box {
    background: linear-gradient(135deg, rgba(76,175,80,0.1), rgba(139,195,74,0.1));
    padding: 40px;
    border-radius: 16px;
    border: 3px solid var(--sub-color);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 봉사확인증 */
.certificate-search {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 30px;
}

.certificate-search h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-color);
}

.certificate-search-form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.certificate-search-form input {
    padding: 12px 20px;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 15px;
    width: 300px;
}

.certificate-preview {
    background: white;
    padding: 60px;
    border-radius: 12px;
    border: 3px solid var(--sub-color);
    text-align: center;
    position: relative;
}

.certificate-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-color);
    margin-bottom: 40px;
    border-bottom: 5px solid var(--sub-color);
    padding-bottom: 20px;
}

.certificate-content {
    font-size: 18px;
    line-height: 2.5;
    color: var(--text-color);
    margin-bottom: 40px;
    text-align: left;
    padding: 0 60px;
}

.certificate-stamp {
    display: flex;
    justify-content: flex-end;
    padding: 0 60px;
}

.stamp-box {
    text-align: center;
}

.stamp-circle {
    width: 100px;
    height: 100px;
    border: 5px solid var(--point-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--point-color);
    margin: 0 auto 15px;
}

.btn-print {
    margin-top: 30px;
    padding: 15px 50px;
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
}

.btn-print:hover {
    background: var(--point-color);
}

@media print {
    header, nav, footer, .btn-print, .page-header {
        display: none !important;
    }
    .certificate-preview {
        border: 3px solid #000;
        page-break-inside: avoid;
    }
}

/* ==================== 후원 시스템 스타일 ==================== */
.donation-amount-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.amount-card {
    background: white;
    border: 3px solid var(--gray-300);
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.amount-card:hover {
    border-color: var(--main-color);
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.amount-card.selected {
    border-color: var(--main-color);
    background: linear-gradient(135deg, rgba(244,162,40,0.1), rgba(255,107,53,0.1));
}

.amount-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--main-color);
    margin-bottom: 10px;
}

.amount-desc {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.6;
}

.custom-amount-input {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.custom-amount-input input {
    flex: 1;
    padding: 15px;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    text-align: right;
}

.custom-amount-input span {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
}

.donation-info-box {
    background: var(--bg-color);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.donation-info-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--gray-300);
}

.donation-info-row:last-child {
    border-bottom: none;
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
}

.donation-info-label {
    color: var(--gray-600);
}

.donation-info-value {
    font-weight: 600;
    color: var(--text-color);
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.payment-method {
    background: white;
    border: 2px solid var(--gray-300);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.payment-method:hover {
    border-color: var(--main-color);
}

.payment-method.selected {
    border-color: var(--main-color);
    background: var(--bg-color);
}

.payment-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.payment-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.receipt-search-box {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 30px;
}

.receipt-preview {
    background: white;
    padding: 60px;
    border: 3px solid var(--main-color);
    border-radius: 12px;
    font-size: 16px;
    line-height: 2;
}

.receipt-title {
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 40px;
    color: var(--text-color);
    border-bottom: 4px solid var(--main-color);
    padding-bottom: 20px;
}

.receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
}

.receipt-table th,
.receipt-table td {
    padding: 15px;
    border: 1px solid var(--gray-400);
}

.receipt-table th {
    background: var(--bg-color);
    font-weight: 700;
    text-align: left;
    width: 200px;
}

.receipt-table td {
    text-align: left;
}

.receipt-notice {
    background: var(--bg-color);
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
    font-size: 14px;
    line-height: 2;
    color: var(--gray-600);
}

@media (max-width: 1024px) {
    .donation-amount-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .payment-methods {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .donation-amount-cards,
    .payment-methods {
        grid-template-columns: 1fr;
    }

    .receipt-preview {
        padding: 30px 20px;
    }
    
    /* 신청서 입력 칸 모바일에서 한 줄씩 표시 */
    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ==================== 회원 시스템 스타일 ==================== */
.login-container {
    max-width: 450px;
    margin: 0 auto;
    background: white;
    padding: 50px;
    border-radius: 16px;
    box-shadow: var(--shadow-hover);
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-header h2 {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-color);
    margin-bottom: 10px;
}

.login-header p {
    color: var(--gray-600);
    font-size: 15px;
}

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

.login-form input {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 15px;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    font-size: 14px;
}

.login-options a {
    color: var(--gray-600);
    text-decoration: none;
}

.login-options a:hover {
    color: var(--main-color);
}

.btn-login {
    width: 100%;
    padding: 15px;
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 15px;
}

.btn-login:hover {
    background: var(--point-color);
}

.social-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--gray-300);
}

.btn-social {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--gray-300);
    background: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-social:hover {
    background: var(--gray-100);
}

.btn-social.kakao {
    background: #FEE500;
    border-color: #FEE500;
    color: #000;
}

.btn-social.naver {
    background: #03C75A;
    border-color: #03C75A;
    color: white;
}

.btn-social.google {
    border-color: var(--gray-400);
}

.signup-link {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: var(--gray-600);
}

.signup-link a {
    color: var(--main-color);
    font-weight: 700;
    text-decoration: none;
}

/* 찾기 탭 */
.find-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.find-tab {
    flex: 1;
    padding: 12px;
    background: var(--gray-100);
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
}

.find-tab.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: white;
}

.find-tab:hover:not(.active) {
    background: var(--gray-200);
}

.login-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 14px;
}

/* 마이페이지 */
.mypage-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--gray-300);
}

.mypage-tab {
    padding: 15px 30px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: var(--transition);
}

.mypage-tab.active {
    color: var(--main-color);
    border-bottom-color: var(--main-color);
}

.mypage-section {
    display: none;
}

.mypage-section.active {
    display: block;
}

.info-card {
    background: var(--bg-color);
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--gray-300);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: var(--text-color);
}

.info-value {
    color: var(--gray-600);
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.history-item {
    background: white;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid var(--sub-color);
}

.history-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.history-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
}

.history-date {
    font-size: 14px;
    color: var(--gray-600);
}

.history-detail {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.8;
}

/* ==================== 반응형 (복지회 소개) ==================== */
@media (max-width: 1024px) {
    .greeting-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .vision-grid, .vision-mission {
        grid-template-columns: 1fr;
    }

    .core-values {
        grid-template-columns: repeat(2, 1fr);
    }

    .org-departments {
        grid-template-columns: repeat(2, 1fr);
    }

    .transport-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .content-box {
        padding: 30px 20px;
    }

    .page-title {
        font-size: 32px;
    }

    .core-values {
        grid-template-columns: 1fr;
    }

    .org-departments {
        grid-template-columns: 1fr;
    }
}

/* ==================== 유틸리티 클래스 ==================== */
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.hidden { display: none; }

/* 갤러리 보드 스타일 추가 */
.gallery-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .gallery-board {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .gallery-board {
        grid-template-columns: repeat(2, 1fr);
    }
}

.board-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-500);
    font-size: 15px;
}

.gallery-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: var(--transition);
    cursor: pointer;
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.gallery-thumbnail {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
    position: relative;
    overflow: hidden;
}

.gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-info {
    padding: 15px;
}

.gallery-info h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--gray-500);
}