body { font-family: sans-serif; margin: 0; background-color: #f4f4f9; }
.container { width: 90%; max-width: 1200px; margin: 20px auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { text-align: center; color: #333; }

/* 필터 */
.filters { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.type-filter a { padding: 8px 15px; text-decoration: none; color: #333; border-radius: 5px; background-color: #e9ecef; margin-right: 5px; }
.type-filter a.active { background-color: #007bff; color: white; font-weight: bold; }
.category-filter-form { display: flex; align-items: center; gap: 10px; }
.category-filter-form select { padding: 8px; border-radius: 5px; border: 1px solid #ccc; }
.total-count { font-weight: bold; color: #555; }

/* 테이블 */
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
th { background-color: #f2f2f2; }
tr:nth-child(even) { background-color: #f9f9f9; }
.highlight-result { background-color: #fff3cd !important; font-weight: bold; color: #856404; }
td button { padding: 5px 10px; cursor: pointer; border: 1px solid #ccc; background-color: #fff; border-radius: 4px; margin-right: 5px; }
td button:hover { background-color: #f0f0f0; }

/* 페이지네이션 */
.pagination { text-align: center; margin-top: 20px; }
.pagination a { margin: 0 5px; padding: 8px 12px; text-decoration: none; color: #007bff; border: 1px solid #ddd; }
.pagination a.active { background-color: #007bff; color: white; border-color: #007bff; }

/* 모달 */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); }
.modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 700px; border-radius: 8px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.close-btn { color: #aaa; position: absolute; top: 10px; right: 25px; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-btn:hover, .close-btn:focus { color: black; }
#modal-title { margin-top: 0; }
#modal-textarea { width: 98%; margin-top: 15px; font-family: monospace; font-size: 14px; line-height: 1.5; padding: 10px; }
.copy-btn { margin-top: 10px; }
#modal-actions { margin-top: 15px; text-align: right; }
#modal-actions button { padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; }
#modal-save-btn { background-color: #28a745; color: white; }
#modal-delete-btn { background-color: #dc3545; color: white; margin-left: 10px; }