/* ========================================
   알림마당(공지사항/커뮤니티/자료실) 목록·상세 퍼블리싱
   참고: 스마트물류 플랫폼 퍼블리싱 시안 (notice.html / notice-detail.html)
   전역 스타일과 충돌하지 않도록 .board0107 안에서만 적용됨
   ======================================== */

.board0107 {
    background: #ffffff;
    padding: 42px 24px 72px 24px;
}

.board0107 * {
    box-sizing: border-box;
}

/* Layout */
.board0107 .content-wrapper {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.board0107 .content-container {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    min-width: 0;
}

.board0107 .main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Search */
.board0107 .search-section {
    display: flex;
    justify-content: flex-end;
}

.board0107 .search-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.board0107 .search-select {
    background: #FAFAFA;
    border: 1px solid #E4E4E7;
    border-radius: 4px;
    padding: 4px 28px 4px 8px;
    height: 32px;
    font-size: 12px;
    color: #09090B;
    width: 107px;
    min-width: 107px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../images/img0107/icons/caret-down.svg');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.board0107 .search-input {
    background: #FAFAFA;
    border: 1px solid #E4E4E7;
    border-radius: 4px;
    height: 32px;
    width: 300px;
    max-width: 60vw;
    padding: 0 8px;
    font-size: 12px;
    color: #09090B;
}

.board0107 .search-input::placeholder {
    color: #9F9FA9;
}

.board0107 .btn-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2563EB;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 9px 16px 9px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.board0107 .btn-search:hover {
    background: #1d4ed8;
}

.board0107 .btn-search img {
    width: 14px;
    height: 14px;
}

/* Table */
.board0107 .table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.board0107 .notice-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.board0107 .notice-table thead {
    background: #FAFAFA;
    border-top: 2px solid #09090B;
    border-bottom: 1px solid #E4E4E7;
}

.board0107 .notice-table thead th {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #71717B;
    text-align: center;
    white-space: nowrap;
    line-height: normal;
}

.board0107 .notice-table tbody tr {
    border-bottom: 1px solid #E4E4E7;
    cursor: pointer;
}

.board0107 .notice-table tbody tr:hover {
    background: #FAFAFA;
}

.board0107 .notice-table tbody td {
    padding: 12px 8px;
    font-size: 14px;
    color: #27272A;
    vertical-align: middle;
    line-height: normal;
}

.board0107 .col-number,
.board0107 .col-date,
.board0107 .col-views,
.board0107 .col-author {
    text-align: center;
    white-space: nowrap;
}

.board0107 .col-title {
    text-align: left;
}

.board0107 .notice-table .col-title a.title {
    color: #27272A;
    text-decoration: none;
}

.board0107 .notice-table .col-title a.title:hover {
    color: #2563EB;
    text-decoration: underline;
}

.board0107 .empty-row td {
    text-align: center;
    color: #9F9FA9;
    padding: 40px 0;
}

/* Post detail */
.board0107 .post-detail {
    width: 100%;
    border-top: 2px solid #09090B;
}

.board0107 .post-header {
    width: 100%;
    background: #FAFAFA;
    border-bottom: 1px solid #E4E4E7;
    padding: 20px;
}

.board0107 .post-header-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.board0107 .post-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin: 0;
    line-height: normal;
}

.board0107 .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    color: #71717B;
    line-height: normal;
}

.board0107 .post-meta strong {
    font-weight: 700;
}

.board0107 .post-content {
    padding: 24px 20px;
    border-bottom: 1px solid #E4E4E7;
    min-height: 160px;
    font-size: 16px;
    color: #3F3F46;
    line-height: 1.7;
}

.board0107 .post-attach {
    padding: 12px 20px;
    border-bottom: 1px solid #E4E4E7;
    font-size: 13px;
    color: #71717B;
}

.board0107 .post-nav {
    border-bottom: 1px solid #E4E4E7;
}

.board0107 .post-nav p {
    padding: 12px 20px;
    margin: 0;
    font-size: 13px;
    border-bottom: 1px solid #E4E4E7;
}

.board0107 .post-nav p:last-child {
    border-bottom: none;
}

.board0107 .post-nav a {
    color: #3F3F46;
    text-decoration: none;
}

.board0107 .post-nav a:hover {
    color: #2563EB;
    text-decoration: underline;
}

.board0107 .button-wrapper {
    display: flex;
    justify-content: flex-start;
}

.board0107 .btn-back-to-list {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #2563EB;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
}

.board0107 .btn-back-to-list:hover {
    background: #1d4ed8;
}

/* Pagination */
.board0107 .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
    .board0107 .content-container {
        flex-direction: column;
    }

    .board0107 .search-section {
        justify-content: flex-start;
    }

    .board0107 .search-input {
        flex: 1;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .board0107 {
        padding: 16px 12px 48px 12px;
    }

    .board0107 .col-author {
        display: none;
    }

    .board0107 .notice-table thead th.col-author {
        display: none;
    }
}