/* =====================================================
   SML Biopharm - Notice Page Styles
   ===================================================== */

/* =====================================================
   Notice List Section
   ===================================================== */
.notice-section {
    padding: var(--spacing-4xl) 0;
    background: var(--s-bg-white);
}

.notice-list {
    margin-top: var(--spacing-3xl);
}

.notice-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--s-border-color);
    transition: background var(--s-transition-fast);
}

.notice-item:hover {
    background: var(--s-bg-light);
    margin: 0 calc(-1 * var(--spacing-md));
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.notice-item:first-child {
    border-top: 1px solid var(--s-border-color);
}

.notice-date {
    flex-shrink: 0;
    width: 100px;
    font-size: var(--s-font-size-sm);
    color: var(--s-text-muted);
}

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

.notice-title {
    font-size: var(--s-font-size-base);
    font-weight: var(--s-font-weight-medium);
    color: var(--s-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notice-title a {
    color: inherit;
    text-decoration: none;
}

.notice-title a:hover {
    color: var(--s-color-primary);
}

.notice-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--s-font-size-xs);
    font-weight: var(--s-font-weight-semibold);
    color: var(--s-color-primary);
    background: var(--s-color-primary-pale);
    border-radius: var(--s-radius-sm);
    margin-right: var(--spacing-sm);
}

.notice-badge.new {
    color: var(--s-text-white);
    background: var(--s-color-error);
}

.notice-arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--s-text-muted);
}

.notice-arrow svg {
    width: 16px;
    height: 16px;
}

.notice-empty {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--s-text-muted);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-3xl);
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: var(--s-font-size-base);
    font-weight: var(--s-font-weight-medium);
    color: var(--s-text-secondary);
    background: var(--s-bg-white);
    border: 1px solid var(--s-border-color);
    border-radius: var(--s-radius-md);
    cursor: pointer;
    transition: all var(--s-transition-fast);
}

.pagination-btn:hover {
    color: var(--s-color-primary);
    border-color: var(--s-color-primary-light);
}

.pagination-btn.active {
    color: var(--s-text-white);
    background: var(--s-color-primary);
    border-color: var(--s-color-primary);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn svg {
    width: 16px;
    height: 16px;
}

/* =====================================================
   Responsive Styles
   ===================================================== */
@media (max-width: 767px) {
    .notice-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .notice-date {
        width: auto;
    }

    .notice-arrow {
        display: none;
    }
}