* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body {
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	background:#fef7ed;
	line-height:1.6;
}

.header {
	background:white;
	box-shadow:0 2px 4px rgba(0,0,0,0.1);
	position:sticky;
	top:0;
	z-index:100;
}

.nav {
	max-width:1200px;
	margin:0 auto;
	padding:0 20px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	height:70px;
}

.logo {
	display:flex;
	align-items:center;
	gap:10px;
	font-size:24px;
	font-weight:bold;
	color:#f59e0b;
	text-decoration:none;
}

.user-menu {
	display:flex;
	align-items:center;
	gap:15px;
}

.user-avatar {
	width:40px;
	height:40px;
	background:#f59e0b;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:18px;
	color:white;
}

.logout-btn {
	background:#ef4444;
	color:white;
	border:none;
	padding:8px 16px;
	border-radius:6px;
	cursor:pointer;
	font-size:14px;
}

.main {
	max-width:1200px;
	margin:0 auto;
	padding:40px 20px;
}

.page-header {
	text-align:center;
	margin-bottom:40px;
}

.page-header h1 {
	font-size:36px;
	color:#1f2937;
}

.board-container {
	background:white;
	padding:30px;
	border-radius:12px;
	box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.board-controls {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:20px;
	flex-wrap:wrap;
	gap:15px;
}

.filter-buttons {
	display:flex;
	gap:10px;
}

.filter-btn {
	padding:8px 16px;
	border:1px solid #d1d5db;
	border-radius:20px;
	background:transparent;
	color:#374151;
	cursor:pointer;
	font-weight:500;
}

.filter-btn.active {
	background:#f59e0b;
	color:white;
	border-color:#f59e0b;
}

.write-btn {
	background:#f59e0b;
	color:white;
	text-decoration:none;
	border:none;
	padding:10px 20px;
	border-radius:6px;
	cursor:pointer;
	font-size:16px;
	font-weight:500;
}

.post-table {
	width:100%;
	border-collapse:collapse;
}

.post-table th,.post-table td {
	padding:15px;
	text-align:left;
	border-bottom:1px solid #e5e7eb;
}

.post-table th {
	color:#6b7280;
	font-size:14px;
}

.post-table td {
	color:#374151;
	font-size:15px;
}

.post-table td:last-child {
	text-align:right;
}

.post-table .post-title a {
	color:#1f2937;
	text-decoration:none;
}

.post-table .post-title a:hover {
	text-decoration:underline;
}

.post-table .post-category {
	font-size:18px;
	color:#f59e0b;
	font-weight:bold;
}

.post-table .text-center {
	text-align:center;
}

.post-form-container {
	max-width:800px;
	margin:0 auto;
	background:#fffefc;
	padding:30px;
	border-radius:10px;
	box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.form-group {
	margin-bottom:20px;
}

.form-group label {
	font-weight:bold;
	display:block;
	margin-bottom:8px;
}

.form-group input,.form-group select,.form-group textarea {
	width:100%;
	padding:10px;
	border:1px solid #ccc;
	border-radius:6px;
	font-size:16px;
}

.form-buttons {
	display:flex;
	gap:10px;
	justify-content:flex-end;
}

.write-btn.cancel {
	background-color:#ccc;
	color:black;
}

.page-btn {
	padding:8px 12px;
	border-radius:5px;
	background-color:#f9fafb;
	color:#333;
	text-decoration:none;
	border:1px solid #f9fafb;
	transition:all 0.2s ease;
	min-width:36px;
	text-align:center;
	font-weight:500;
}

.page-btn.active {
	padding:8px 12px;
	border-radius:5px;
	background-color:#f59e0b;
	color:#333;
	text-decoration:none;
	border:1px solid #f59e0b;
	transition:all 0.2s ease;
	min-width:36px;
	text-align:center;
	font-weight:500;
}

.page-btn:hover {
	background-color:#e5e7eb;
	border-color:#9ca3af;
	color:#1f2937;
}

.page-link.active {
	background-color:#f59e0b;
	color:white;
	border-color:#f59e0b;
	font-weight:bold;
	cursor:default;
	box-shadow: 0 2px 5px rgba(245,158,11,0.3);
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-bottom: 30px;
    flex-wrap: wrap;
    gap: 8px;
}