body { font-family: 'Malgun Gothic', sans-serif; background-color: #f0f2f5; margin: 0; padding: 0; color: #333; }
.container { max-width: 900px; margin: 0 auto; background: white; min-height: 100vh; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* 상단바 */
.top-bar { background: #343a40; padding: 10px 20px; text-align: right; color: white; font-size: 0.85rem; }
.top-bar a { color: #ffc107; text-decoration: none; margin-left: 15px; cursor: pointer; }

/* 배너 최적화 */
.banner { 
    width: 100%; 
    height: auto;           /* 고정 높이 해제 */
    min-height: 180px;      /* 최소 높이 확보 */
    background-color: #ffffff; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    border-bottom: 1px solid #eee;
    padding: 30px 20px; 
    box-sizing: border-box; 
}

.banner-img {
    max-width: 100%;        /* 부모 너비를 넘지 않음 */
    height: auto;           /* 비율 유지하며 자동 조정 */
    margin-bottom: 15px;    /* 이미지와 글씨 사이 간격 */
    max-height: 150px;      /* 배너 이미지가 너무 커지는 것 방지 */
}

.banner h2 { 
    font-size: 1.8rem; 
    margin: 0; 
    color: #1e3c72; 
    width: 100%; 
    word-break: keep-all; 
}

/* 시계 스타일 */
.banner-datetime { margin-top: 10px; }
.banner-date { font-size: 0.95rem; color: #777; margin-bottom: 3px; }
.banner-clock { font-size: 0.95rem; font-weight: normal; color: #333; letter-spacing: 1px; }

/* 버튼 영역 */
.button-container { padding: 40px 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.link-btn { padding: 12px 24px; background: #007bff; color: white; text-decoration: none; border-radius: 50px; font-weight: bold; transition: 0.2s; box-shadow: 0 4px 6px rgba(0,123,255,0.2); }
.link-btn:hover { background: #0056b3; transform: translateY(-3px); }

/* 게시판 */
.board-section { width: 90%; margin: 0 auto; text-align: left; padding-bottom: 50px; }
.input-form {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    overflow: hidden; /* 내부 float 요소가 삐져나오지 않게 함 */
}

.input-form button {
    float: right;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.post-item { border-bottom: 1px solid #eee; padding: 20px 0; position: relative; }
/* 게시글 헤더 영역 정렬 */
.post-header {
    display: flex;
    justify-content: space-between; /* 이름/IP는 왼쪽, 날짜는 오른쪽 */
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 5px;
}
.post-date { font-size: 0.8rem; color: #999; margin-left: 10px; font-weight: normal; }
.post-content { line-height: 1.6; color: #444; }
.del-btn {
    display: inline-block;
    background: #ff4d4d;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    text-decoration: none;
    margin-left: 10px;    /* 이름 옆에 띄우기 위해 추가 */
    vertical-align: middle;
    position: static !important; /* 겹침 방지를 위해 절대 위치 해제 */
}

/* 페이징 */
.pagination { margin-top: 30px; text-align: center; display: flex; justify-content: center; gap: 5px; }
.pagination a { display: inline-block; padding: 8px 14px; border: 1px solid #dee2e6; text-decoration: none; color: #007bff; border-radius: 4px; font-size: 0.9rem; transition: background 0.2s; }
.pagination a:hover { background-color: #e9ecef; }
.pagination a.active { background-color: #007bff; color: white; border-color: #007bff; font-weight: bold; }

/* 댓글 */
.comment-section { background: #f9f9f9; padding: 15px; margin-top: 15px; border-radius: 8px; font-size: 0.9rem; }
.comment-item { border-bottom: 1px dotted #ddd; padding: 5px 0; position: relative; }
.comment-date { font-size: 0.75rem; color: #bbb; margin-left: 10px; }
.com-del-btn { color: #ff4d4d; text-decoration: none; font-weight: bold; margin-left: 5px; cursor: pointer; }

.comment-form { margin-top: 10px; display: flex; gap: 5px; }
.comment-form input[name="comment_user"] { width: 60px; padding: 5px; border: 1px solid #ddd; border-radius: 4px; }
.comment-form input[name="comment_text"] { flex: 1; padding: 5px; border: 1px solid #ddd; border-radius: 4px; }
.comment-form button { padding: 5px 10px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; }