:root {
  --primary:#2563eb;
  --bg:#f8fafc;
  --text:#0f172a;
  --sub:#64748b;
  --border:#e5e7eb;
}

.content{ margin:30px auto 0 auto !important; min-height:465px; }

.community-wrap{ max-width:900px; margin:40px auto; padding:0 16px; }
.community-wrap h2{margin:20px 0}
.community-wrap ul{list-style:none;padding:0}
.community-wrap li{background:#fff;margin:10px 0;padding:10px;border-radius:6px}
.community-wrap textarea,.community-wrap input{width:100%;margin:5px 0;padding:8px}
.community-wrap button{padding:6px 10px;background:#333;color:#fff;border:none}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:5px;
  padding:20px;
  margin-top: 20px;
}

/* list */
.post-item{ padding:16px 0; }
.post-item:last-child{border-bottom:none}
.empty{text-align:center;padding:60px 0;color:var(--sub)}

.write-btn{
	background: #fff;
    border:1px solid #ccc;
    color: #555;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 700;
  	display:inline-block; font-size:14px;
}
.write-btn-box{ text-align:right; margin-top:20px; }

/* form */
.form-group{margin-bottom:16px}
label{display:block;font-size:14px;margin-bottom:6px}
input, textarea{
  width:100%;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:14px;
  box-sizing: border-box;
  outline: none;
}
textarea{min-height:160px;resize:vertical}
.submit-btn{
  	background: #fff;
    border:1px solid #ccc;
    color: #555;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 700;
  	display:inline-block; font-size:14px;
}
.btn-list{
    background: #004385;
    color: #fff;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 700;
    display:inline-block; font-size:14px;
}
.post-item-list{ padding-top:20px; border-bottom:1px #253140 solid; }
.post-item-list .post-item{ border-top:1px #e4e4e4 solid; }
.post-item-list .post-item a{ display:flex; align-items:center; gap: 12px; }
.view-comment .view-comment-row{ margin-top:10px; }
.view-comment-row{ display:flex; align-content:center; justify-content:space-between; }
.view-comment-nonmem input{ max-width:320px; }
.view-comment-nonmem{ display:flex; align-items:center; gap:20px; }

.post-item-list .post-thumb {
    width: 120px;
    height: 80px;
    overflow: hidden;
    border-radius: 6px;
    flex: 0 0 auto;
}

.post-item-list .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-item-list .post-text {
    flex: 1;
    min-width: 0;
    width: calc(100% - 120px);
}

.post-item-list .post-title {
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-meta {
    font-size: 13px;
    color: #777;
    margin-top: 6px;
}


/* view */
.view-title{font-size:20px;font-weight:700;margin-bottom:10px}
.view-meta{font-size:13px;color:var(--sub);margin-bottom:20px}
.view-content{font-size:15px;line-height:1.7}

/* comments */
.comment{border-top:1px solid var(--border);padding:12px 0}
.comment b{font-size:14px}
.comment p{margin:6px 0;font-size:14px}
.comment small{color:var(--sub)}
#comment-content{ resize:none; }
.comment-actions button{
  background:none;
  border:none;
  color:var(--primary);
  font-size:13px;
  cursor:pointer;
  margin-right:6px;
}
.btn-comment-add{ margin-top: 20px; text-align:right; }
.btn-delete{ text-align:right; }
.btn-delete button{
    background: #fff;
    border:1px solid #ccc;
    color: #555;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 700;
    display:inline-block;
    font-size:12px;
}
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 30px 0;
}

.pagination span,
.pagination a {
    padding: 6px 10px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.pagination .active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* 카테고리 셀렉트 박스 스타일 추가 */
.category-select {
    width: 100%;
    max-width: 350px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    background-color: #fff;
    cursor: pointer;
    margin-bottom: 5px;
}

.category-select:focus {
    border-color: var(--primary);
}

/* 카테고리 탭 메뉴 스타일 */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    /*border-bottom: 1px solid var(--border);*/
    padding-bottom: 0;
}

.category-tabs a {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    color: var(--sub);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-weight: 500;
}

.category-tabs a:hover {
    color: var(--primary);
}

/* 활성화된 탭 스타일 */
.category-tabs a.active {
    color: var(--primary); /* 파란색 강조 */
    border-bottom: 2px solid var(--primary);
    font-weight: 700;
}

/* 게시글 리스트에서 카테고리 라벨 (선택 사항) */
.cat-label {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    margin-right: 6px;
    vertical-align: middle;
}

@media(max-width:768px){
  .wrap{margin:24px auto}
  .content{ min-height:auto; }
}