.list-container {
    width: 80%;
    margin: 150px auto 40px;  /* 위쪽 120px, 좌우 auto, 아래 40px */
    font-family: 'Noto Sans KR', sans-serif;
}

/* 제목 */
.list-title {
    text-align: center;
    margin-bottom: 20px;
}

/* 테이블 기본 스타일 */
.list-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.list-table th {
    background-color: #f5f5f5;
    padding: 12px;
    border-bottom: 2px solid #ccc;
}

.list-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* 제목 강조 */
.list-table td.title {
    text-align: left;
    padding-left: 15px;
    font-weight: bold;
    color: #333;
}

/* hover 효과 */
.list-table tr:hover {
    background-color: #f9f9f9;
    cursor: pointer;
}

/* 버튼 스타일 */
.list-footer {
    margin-top: 20px;
    text-align: right;
}

.list-footer .button {
    padding: 8px 16px;
    background: #3498db;
    color: white;
    border-radius: 5px;
    text-decoration: none;
}

.list-footer .button:hover {
    background: #2980b9;
}

/* 테이블 레이아웃 고정 */
.list-table {
    table-layout: fixed;
    width: 100%;
}

/* 제목 칸 스타일 */
.list-table td.title {
    max-width: 400px;          /* 제목 영역 최대 너비 (상황에 맞춰 조정 가능) */
    white-space: nowrap;       /* 한 줄로 표시 (짧으면 그대로, 길면 잘림) */
    overflow: hidden;          /* 넘친 글자 숨김 */
    text-overflow: ellipsis;   /* 길면 ... 처리 */
}

/* hover 시 전체 보여주기 */
.list-table td.title:hover {
    white-space: normal;       /* 줄바꿈 허용 */
    background: #f9f9f9;       /* hover 시 배경 살짝 강조 */
    position: relative;
    z-index: 1;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 3px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.pagination a:hover {
    background-color: #f0f0f0;
}

.pagination .current {
    background-color: #3498db;
    color: #fff;
    border: 1px solid #3498db;
}

.search-form {
    text-align: right;
    margin-bottom: 10px;
}

.search-form select,
.search-form input[type="text"] {
    padding: 5px;
    margin-right: 5px;
}