/* style.css */
body { margin: 0; padding: 0; font-family: 'Malgun Gothic', sans-serif; background-color: #f9f9f9; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; }

/* 레이아웃 */
.container {
    display: grid;
    grid-template-areas: "header header header" "left main right" "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* 헤더 */
header { grid-area: header; background-color: #333; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
header h1 { margin: 0; font-size: 24px; }
nav a { color: #ccc; margin-left: 15px; font-weight: bold; transition: color 0.3s; }
nav a:hover, nav a.active { color: #fff; }

/* 사이드바 */
aside { padding: 20px; background-color: #f4f4f4; border-right: 1px solid #ddd; }
aside.right { border-left: 1px solid #ddd; border-right: none; }
.login-box button { width: 100%; padding: 8px; margin-top: 5px; cursor: pointer; background: #333; color: white; border: none; }
.category-list li { padding: 8px 0; border-bottom: 1px solid #ddd; cursor: pointer; }
.category-list li:hover { color: #007bff; }

/* 메인 콘텐츠 */
main { grid-area: main; padding: 30px; }
.section-title { border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
.card { border: 1px solid #eee; padding: 15px; margin-bottom: 15px; border-radius: 5px; transition: transform 0.2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.card h4 { margin: 0 0 10px 0; color: #333; }
.meta { font-size: 12px; color: #888; }

/* 게시판 테이블 */
.board-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.board-table th, .board-table td { border-bottom: 1px solid #ddd; padding: 10px; text-align: center; }
.board-table th { background-color: #f8f8f8; }
.text-left { text-align: left !important; }

/* 폼 스타일 */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input { width: 100%; padding: 8px; box-sizing: border-box; }
.btn-primary { background-color: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer; width: 100%; }

/* 푸터 */
footer { grid-area: footer; background-color: #333; color: white; text-align: center; padding: 20px; font-size: 14px; }

/* 반응형 (모바일) */
@media (max-width: 768px) {
    .container { grid-template-areas: "header" "main" "left" "right" "footer"; grid-template-columns: 1fr; }
    nav { display: none; } /* 모바일 메뉴 생략 */
}