/* --- START OF FILE article-list.css (Author Alignment & Ellipsis) --- */

/* --- Base Styles --- */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth; /* Optional: smooth scroll */
}
body {
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
    background-color: #ffffff;
    color: #343a40; /* Base color from service-intro */
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px; /* Match service-intro container padding */
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* --- Header (Re-Synced with service-intro.css) --- */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0; /* Match service-intro (Vertical padding only) */
    margin-bottom: 30px; /* Match service-intro */
    border-bottom: 1px solid #eee; /* Match service-intro */
    flex-wrap: wrap;
    width: 100%; /* Ensure header spans container width */
}
.app-header .logo {
    margin-right: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.app-header .logo a {
    text-decoration: none;
    display: inline-block;
}
.app-header .logo img {
    height: 30px; /* Match service-intro */
    width: auto;
    display: block;
}
.main-nav {
    display: flex;
    gap: 20px; /* Match service-intro */
    align-items: center;
    flex-wrap: wrap;
}
.main-nav a {
    text-decoration: none;
    color: #555; /* Match service-intro */
    font-size: 0.95em; /* Match service-intro */
    padding: 5px 0;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a.active {
    color: #007bff; /* Match service-intro */
    font-weight: 500; /* Match service-intro */
    border-bottom-color: #007bff; /* Match service-intro */
}

/* --- Main Content --- */
.main-content {
    width: 100%;
    flex-grow: 1;
    padding-top: 0; /* Adjusted as header margin provides space */
    padding-bottom: 30px; /* Added space before footer */
}
.content-page {
    background-color: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    width: 100%;
}

/* 페이지 제목 */
.page-title {
    font-size: 1.8em; /* Keep article-list specific style */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 25px;
    color: #212529;
}

/* --- Bulletin Board Specific Styles --- */
.bulletin-board-container { margin-top: 0; }
.board-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 0; border-bottom: none; }
.menu-selector { display: flex; align-items: center; cursor: pointer; padding: 5px 0; border-radius: 4px; transition: background-color 0.2s ease; }
.current-menu-name { font-size: 1.05em; font-weight: 500; color: #343a40; margin-right: 3px; }
.dropdown-icon {
    /* font-size, color 등 Font Awesome 관련 속성 제거 */
    height: 18px; /* 이미지 높이 (적절히 조절) */
    width: 18px;  /* 너비는 비율에 맞게 자동 조절 */
    vertical-align: middle; /* 텍스트와의 수직 정렬 */
    margin-left: 3.5px; /* 텍스트와 아이콘 사이 간격 */
}
.board-actions { margin-left: auto; }
.write-post-btn { padding: 8px 18px; font-size: 0.9em; font-weight: 500; border-radius: 6px; background-color: #007bff; color: white; display: inline-flex; align-items: center; gap: 6px; line-height: 1.4; border: none; text-decoration: none; }
.write-post-btn:hover { background-color: #0056b3; color: white; }
.write-post-btn .write-icon { height: 14px; width: auto; vertical-align: middle; }
.post-list-header { display: grid; grid-template-columns: 1.1fr 140px 110px; gap: 15px; padding: 10px 15px; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; font-weight: 500; font-size: 0.8rem; color: #6c757d; background-color: transparent; border-radius: 0; }
.post-list-header span { text-align: center; }
.post-list-header .header-title { text-align: left; }
/* Align Author header text to left as well */
.post-list-header .header-author { text-align: left; padding-left: 5px; } /* Added left padding for visual balance */
.post-list-header .header-timestamp { text-align: left !important; }
.post-list { list-style: none; padding: 0; margin: 0; border: none; }
.post-item { display: grid; grid-template-columns: 1.1fr 140px 110px; gap: 15px; align-items: center; padding: 14px 15px; border-bottom: 1px solid #f1f1f1; transition: background-color 0.15s ease; font-size: 0.9rem; }
.post-item:last-child { border-bottom: 1px solid #dee2e6; }
.post-item:hover { background-color: #f8f9fa; }
.post-item > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.post-title-comments { display: flex; align-items: baseline; overflow: hidden; }
.post-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.93rem; color: #343a40; text-decoration: none; transition: color 0.2s ease; margin-right: 6px; cursor: pointer; }
.post-title:hover { color: #007bff; }
.post-comment-count { font-size: 0.85rem; color: #007bff; font-weight: 500; white-space: nowrap; flex-shrink: 0; }

/* Author Style Changes */
.post-author {
    font-size: 0.9rem;
    color: #495057;
    text-align: left;         /* <<< Changed: center -> left */
    overflow: hidden;         /* <<< Added: Ensure ellipsis */
    white-space: nowrap;      /* <<< Added: Ensure ellipsis */
    text-overflow: ellipsis;  /* <<< Added: Ensure ellipsis */
    padding-left: 5px;        /* Added left padding for visual balance */
}

.post-timestamp { font-size: 0.9rem; color: #6c757d; text-align: center; }
.post-item.notice { background-color: #fff9e6; }
.post-item.notice .post-title { color: #856404; font-weight: 500; }
.post-item.notice .post-author { font-weight: 500; color: #555; }
.no-posts-message { text-align: center; color: #6c757d; padding: 50px 0; border-bottom: 1px solid #dee2e6; margin-top: 0; }

/* Pagination */
.pagination { text-align: center; margin-top: 35px; padding-top: 0; border-top: none; margin-bottom: 30px; }
.page-link { display: inline-block; color: #6c757d; padding: 5px 10px; text-decoration: none; border: none; margin: 0 4px; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; font-size: 0.9em; min-width: 28px; text-align: center; }
.page-link.prev, .page-link.next { font-weight: normal; font-size: 0.8em; color: #adb5bd; }
.page-link.prev:hover, .page-link.next:hover { color: #495057; background-color: transparent; }
.page-link.active { color: #ffffff; background-color: #007bff; font-weight: bold; text-decoration: none; cursor: default; }
.page-link:not(.active):hover { background-color: #e9ecef; color: #343a40; }
.page-link.disabled { color: #e0e0e0; pointer-events: none; background-color: transparent; }
.page-link.ellipsis { border: none; background: none; color: #adb5bd; padding: 5px 2px; pointer-events: none; }

/* --- Footer --- */
.app-footer { margin-top: auto; padding: 25px 0; text-align: center; border-top: 1px solid #eee; font-size: 0.9em; color: #6c757d; width: 100%; background-color: #ffffff; }
.app-footer nav { margin-bottom: 10px; }
.app-footer nav a { color: #6c757d; text-decoration: none; margin: 0 8px; transition: color 0.2s ease; }
.app-footer nav a:hover { color: #333; text-decoration: underline; }
.app-footer p { margin: 0; margin-top: 5px; }
.app-footer .disclaimer { font-size: 0.85em; color: #888; margin-top: 15px; margin-bottom: 10px; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* --- Responsive adjustments --- */
@media (max-width: 1400px) { .container { padding: 0 15px; } }
@media (max-width: 992px) { body { font-size: 13px; } .container { max-width: none; } }

@media (max-width: 768px) {
    /* Header Responsive */
    .app-header .logo { margin-bottom: 15px; }
    .app-header .logo img { height: 26px; }
    .app-header { flex-direction: column; align-items: flex-start; padding: 15px 0; }
    .main-nav { width: 100%; margin-top: 0; gap: 10px 15px; }
    .main-nav a { font-size: 0.9em; }

    /* Article List Specific Responsive */
    .container { padding: 0 15px; }
    .main-content { padding-top: 20px; padding-bottom: 20px; }
    .content-page { padding: 0; }
    .page-title { font-size: 1.6em; margin-bottom: 20px; padding: 0; }
    .bulletin-board-container { padding: 0; }
    .board-header { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 15px; }
    .menu-selector { width: 100%; justify-content: space-between; padding: 5px 0; }
    .board-actions { width: 100%; text-align: right; }
    .post-list-header { display: none; } /* Header row hidden */
    .post-list { border: none; }
    .post-item { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 5px 10px; padding: 12px 0; border-bottom: 1px solid #f1f1f1; margin-bottom: 0; border-radius: 0;}
    .post-item:last-child { border-bottom: 1px solid #dee2e6; }
    .post-title-comments { grid-column: 1 / -1; grid-row: 1 / 2; }
    .post-title { font-size: 0.95rem; }
    .post-comment-count { font-size: 0.85rem; }

    /* Author Style (Mobile) */
    .post-author {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        font-size: 0.85rem;
        text-align: left;         /* Already left */
        padding-left: 0;          /* Reset desktop padding */
        /* Ellipsis properties are inherited from .post-item > * */
        overflow: hidden;         /* Ensure ellipsis */
        white-space: nowrap;      /* Ensure ellipsis */
        text-overflow: ellipsis;  /* Ensure ellipsis */
    }

    .post-timestamp {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        font-size: 0.85rem;
        text-align: right; /* Keep timestamp right-aligned */
    }
    .pagination { margin-top: 25px; margin-bottom: 25px; }
    .page-link { padding: 5px 8px; font-size: 0.85em; margin: 0 2px;}
    .no-posts-message { border: none; border-bottom: 1px solid #dee2e6; border-radius: 0; padding: 30px 0;}
}

@media (max-width: 480px) {
    /* Header Responsive */
    .app-header .logo img { height: 24px; }
    .main-nav a { font-size: 0.85em; }

    /* Article List Specific Responsive */
    body { font-size: 12px; }
    .container { padding: 0 10px; }
    .main-content { padding-bottom: 15px; }
    .page-title { font-size: 1.4em; margin-bottom: 15px; padding: 0; }
    .bulletin-board-container { padding: 0; }
    .menu-selector .current-menu-name { font-size: 1em; }
    .write-post-btn { padding: 6px 14px; font-size: 0.85em; }
    .write-post-btn .write-icon { height: 12px; }
    .post-item { display: block; padding: 10px 0; } /* Changed to block layout */
    .post-title-comments { margin-bottom: 5px; }
    .post-title { font-size: 0.9rem; white-space: normal; } /* Allow title wrap */
    .post-comment-count { font-size: 0.8rem; }

    /* Author Style (Small Mobile) */
    .post-author {
        display: inline-block;    /* Inline-block for side-by-side */
        font-size: 0.8rem;
        max-width: calc(60% - 5px); /* Adjust max-width */
        text-align: left;         /* Ensure left align */
        overflow: hidden;         /* Ensure ellipsis */
        white-space: nowrap;      /* Ensure ellipsis */
        text-overflow: ellipsis;  /* Ensure ellipsis */
        vertical-align: baseline; /* Align with timestamp */
        padding-left: 0;          /* Reset desktop padding */
        margin-right: 5px;       /* Space between author and timestamp */
    }

    /* Timestamp Style (Small Mobile) */
    .post-timestamp {
        display: inline-block;    /* Inline-block for side-by-side */
        font-size: 0.8rem;
        float: none;              /* Remove float */
        text-align: right;        /* Keep text right */
        vertical-align: baseline; /* Align with author */
    }
    .page-link { padding: 4px 6px; font-size: 0.8em; min-width: 24px; margin: 0 1px;}
    .pagination { margin-top: 20px; margin-bottom: 20px; }

    /* Footer Responsive */
    .app-footer { font-size: 0.8em; padding: 15px 0;}
    .app-footer nav a { margin: 0 4px; }
    .app-footer .disclaimer { font-size: 0.75em; }
}
.post-list-header .header-timestamp, .post-item .post-timestamp { text-align: left !important; }
/* --- END OF FILE article-list.css --- */