/**
 * Church Community 테마 - 게시판 스타일
 * 어르신 친화적 디자인
 */

/* ========================================
   게시판 검색
======================================== */
.board-search {
    margin-bottom: var(--space-xl);
}

.search-form {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.search-select {
    width: 150px;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    min-width: 200px;
}

/* ========================================
   게시판 목록
======================================== */
.board-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.board-item {
    display: flex;
    align-items: center;
    gap: var(--space-base);
    padding: var(--space-lg);
    background: var(--bg-white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-base);
    transition: var(--transition);
}

.board-item:hover {
    border-color: var(--primary-light);
    background: var(--bg-light);
}

.board-item-notice {
    background: var(--bg-light);
    border-color: var(--primary-light);
}

.board-item-num {
    width: 50px;
    text-align: center;
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}

.board-item-badge {
    flex-shrink: 0;
}

.board-item-content {
    flex: 1;
    min-width: 0;
}

.board-item-title {
    display: block;
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-xs);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-item-title:hover {
    color: var(--primary);
}

.board-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-base);
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.board-item-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ========================================
   게시판 액션
======================================== */
.board-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-xl);
}

/* ========================================
   게시글 상세보기
======================================== */
.board-view {
    background: var(--bg-white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.board-view-header {
    padding: var(--space-xl);
    border-bottom: 2px solid var(--border-light);
    background: var(--bg-light);
}

.board-view-title {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 var(--space-base) 0;
    line-height: var(--line-height-tight);
}

.board-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.board-view-meta .meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-base);
    color: var(--text-muted);
}

.board-view-meta .meta-item i {
    color: var(--primary);
}

.board-view-thumbnail {
    padding: var(--space-xl);
    text-align: center;
    background: var(--bg-light);
}

.board-view-thumbnail img {
    max-width: 100%;
    max-height: 500px;
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-md);
}

.board-view-content {
    padding: var(--space-xl);
    font-size: var(--font-lg);
    line-height: var(--line-height);
    color: var(--text-base);
    min-height: 200px;
}

.board-view-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-base);
}

/* 유튜브 영상 컨테이너 (말씀영상용) */
.board-view-video {
    padding: var(--space-xl);
    background: var(--bg-dark);
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg);
}

.board-view-footer {
    padding: var(--space-xl);
    border-top: 2px solid var(--border-light);
    background: var(--bg-light);
}

/* 이전글/다음글 네비게이션 */
.board-nav {
    display: flex;
    gap: var(--space-base);
    margin-bottom: var(--space-lg);
}

.board-nav-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-base) var(--space-lg);
    background: var(--bg-white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-base);
    text-decoration: none;
    transition: var(--transition);
    min-height: var(--touch-target);
}

.board-nav-link:hover:not(.disabled) {
    border-color: var(--primary);
    background: var(--bg-light);
}

.board-nav-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.board-nav-link.prev {
    justify-content: flex-start;
}

.board-nav-link.next {
    justify-content: flex-end;
    text-align: right;
}

.board-nav-link i {
    font-size: var(--font-xl);
    color: var(--primary);
    flex-shrink: 0;
}

.board-nav-link.disabled i {
    color: var(--text-muted);
}

.board-nav-link .nav-label {
    font-size: var(--font-sm);
    color: var(--text-muted);
    display: block;
}

.board-nav-link .nav-title {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--text-dark);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.board-nav-link.disabled .nav-title {
    color: var(--text-muted);
}

.board-view-footer .board-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

/* ========================================
   이미지 모달 (원본 이미지 보기)
======================================== */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    padding: var(--space-lg);
}

.image-modal.active {
    display: flex;
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10000;
}

.image-modal-close:hover {
    background: rgba(255, 255, 255, 0.4);
}

.image-modal-content {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-base);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

/* ========================================
   페이지네이션 - 어르신 친화적 (크게)
======================================== */
.board-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: var(--space-sm) var(--space-base);
    font-size: var(--font-lg);
    font-weight: 500;
    color: var(--text-base);
    background: var(--bg-white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-base);
    text-decoration: none;
    transition: var(--transition);
}

.page-link:hover:not(.disabled):not(.active) {
    border-color: var(--primary);
    color: var(--primary);
}

.page-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-white);
}

.page-link.disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}

/* ========================================
   기도요청 안내
======================================== */
.prayer-notice {
    display: flex;
    align-items: center;
    gap: var(--space-base);
    padding: var(--space-lg);
    background: #eff6ff;
    border: 2px solid #bfdbfe;
    border-radius: var(--radius-base);
    margin-bottom: var(--space-xl);
}

.prayer-notice i {
    font-size: var(--font-2xl);
    color: var(--primary);
    flex-shrink: 0;
}

.prayer-notice p {
    font-size: var(--font-base);
    color: var(--text-base);
    margin: 0;
}

/* ========================================
   기도요청 카드
======================================== */
.prayer-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.prayer-card {
    background: var(--bg-white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: var(--transition);
}

.prayer-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-lg);
}

.prayer-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-base);
}

.prayer-category {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-light);
    border-radius: 20px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--primary);
}

.prayer-date {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.prayer-title {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-tight);
}

.prayer-content {
    font-size: var(--font-base);
    color: var(--text-light);
    line-height: var(--line-height);
    margin-bottom: var(--space-lg);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prayer-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-base);
    border-top: 1px solid var(--border-light);
}

.prayer-writer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.btn-pray {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-base);
    background: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: var(--radius-base);
    font-size: var(--font-sm);
    font-weight: 600;
    color: #dc2626;
    cursor: pointer;
    transition: var(--transition);
}

.btn-pray:hover {
    background: #fecaca;
}

.btn-pray i {
    font-size: var(--font-base);
}

.pray-count {
    background: #dc2626;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-xs);
}

/* ========================================
   게시글 작성 폼
======================================== */
.board-write {
    background: var(--bg-white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.board-write-header {
    padding: var(--space-xl);
    border-bottom: 2px solid var(--border-light);
    background: var(--bg-light);
}

.board-write-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.board-write-title i {
    color: var(--primary);
}

.board-write-body {
    padding: var(--space-xl);
}

.board-write-body .form-group {
    margin-bottom: var(--space-xl);
}

.board-write-body .form-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-sm);
}

.board-write-body .form-label i {
    color: var(--primary);
    font-size: var(--font-base);
}

.board-write-body .form-label .required {
    color: var(--accent);
    font-weight: 700;
}

.board-write-body .form-control {
    font-size: var(--font-lg);
    padding: var(--space-base) var(--space-lg);
}

.board-write-body textarea.form-control {
    min-height: 250px;
    line-height: var(--line-height);
}

/* 작성자 + 비밀번호 한 줄 배치 */
.form-row {
    display: flex;
    gap: var(--space-lg);
}

.form-group-half {
    flex: 1;
    min-width: 0;
}

/* 안내 메시지 */
.board-write-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-base);
    padding: var(--space-lg);
    background: #E8F5E9;
    border: 2px solid #A5D6A7;
    border-radius: var(--radius-base);
}

.board-write-notice i {
    font-size: var(--font-xl);
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.board-write-notice p {
    font-size: var(--font-base);
    color: var(--text-base);
    margin: 0;
    line-height: var(--line-height);
}

/* 하단 버튼 영역 */
.board-write-footer {
    padding: var(--space-xl);
    border-top: 2px solid var(--border-light);
    background: var(--bg-light);
}

.board-write-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-base);
}

.btn-cancel {
    background: var(--bg-white);
    color: var(--text-base);
    border: 2px solid var(--border-color);
    min-height: var(--btn-height-lg);
    padding: var(--space-base) var(--space-xl);
    font-size: var(--font-lg);
    font-weight: 600;
    border-radius: var(--radius-base);
}

.btn-cancel:hover {
    background: var(--bg-light);
    border-color: var(--text-muted);
    color: var(--text-dark);
}

.btn-submit {
    background: var(--primary);
    color: var(--bg-white);
    border: 2px solid var(--primary);
    min-height: var(--btn-height-lg);
    padding: var(--space-base) var(--space-2xl);
    font-size: var(--font-lg);
    font-weight: 600;
    border-radius: var(--radius-base);
}

.btn-submit:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--bg-white);
}

.btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ========================================
   반응형
======================================== */
@media (max-width: 768px) {
    .search-form {
        flex-direction: column;
    }

    .search-select {
        width: 100%;
    }

    .board-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .board-item-num {
        display: none;
    }

    .board-item-meta {
        gap: var(--space-sm);
    }

    .prayer-list {
        grid-template-columns: 1fr;
    }

    .prayer-card-footer {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: flex-start;
    }

    .btn-pray {
        width: 100%;
        justify-content: center;
    }

    /* 상세보기 반응형 */
    .board-view-header,
    .board-view-content,
    .board-view-footer,
    .board-view-thumbnail {
        padding: var(--space-lg);
    }

    .board-view-title {
        font-size: var(--font-xl);
    }

    .board-view-meta {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .board-nav {
        flex-direction: column;
    }

    .board-nav-link {
        justify-content: flex-start !important;
    }

    .board-nav-link.next {
        text-align: left;
    }

    .board-nav-link .nav-title {
        max-width: none;
    }

    /* 글쓰기 폼 반응형 */
    .board-write-header,
    .board-write-body,
    .board-write-footer {
        padding: var(--space-lg);
    }

    .board-write-title {
        font-size: var(--font-xl);
    }

    .form-row {
        flex-direction: column;
        gap: var(--space-base);
    }

    .board-write-actions {
        flex-direction: column;
    }

    .board-write-actions .btn-cancel,
    .board-write-actions .btn-submit {
        width: 100%;
        justify-content: center;
    }

    .board-write-body textarea.form-control {
        min-height: 180px;
    }
}