/* ===== 4. 댓글 섹션 ===== */
.comments-section{
  margin-top:8px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px
}

.comments h3{margin:0;padding:12px;border-bottom:1px solid var(--border);font-size:16px}
.comment{padding:12px;border-top:1px solid var(--border)} 
.comment:first-of-type{border-top:none}

.comment-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px
}

.author-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover
}

.comment-meta{
  display:flex;
  flex-direction:column;
  gap:2px
}

.comment-date{font-size:12px;color:var(--muted)}
.comment-content{line-height:1.5;margin-bottom:8px}
.comment-likes{font-size:12px;color:var(--muted)}

/* 카테고리 컴포넌트 */
.category-wrap{padding:10px;border-bottom:1px solid var(--border)}
.categories{display:flex;flex-wrap:wrap;gap:6px}

.categories button{
  font-size:12px;
  padding:6px 12px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--chip-bg);
  color:var(--text);
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  transition:all 0.2s ease
}

.categories button:hover{background:var(--input-bg);border-color:var(--accent)}
.categories button.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff
}

.categories .category-item{
  font-size:11px;
  padding:4px 8px;
  background:var(--panel);
  border-color:var(--border)
}

.categories .category-child{
  font-size:12px;
  padding:6px 12px;
  background:var(--chip-bg);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  color:var(--text);
  text-align:center;
  white-space:nowrap;
  transition:all 0.2s ease
}

.categories .category-child:hover{
  background:var(--input-bg);
  border-color:var(--accent)
}

.categories .category-child.active{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important
}

.categories .category-sub{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

.categories .category-parent-display{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border)
}

.categories .category-parent-btn{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
  font-weight:500
}

.categories .category-header-display{
  font-weight:600;
  color:var(--accent);
  margin-bottom:8px;
  padding:4px 0;
  border-bottom:1px solid var(--border)
}

.categories .category-back{
  font-size:11px;
  padding:2px 6px;
  margin-left:8px;
  background:var(--muted);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  cursor:pointer
}

/* 카테고리 경로 표시 스타일 */
.categories .category-path{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:8px;
  font-size:13px;
  color:var(--text-muted);
  line-height:1.4;
  padding:8px 0;
}

.categories .category-path span{
  color:var(--text-muted);
  font-size:13px;
}

.categories .category-path .path-separator{
  color:var(--border);
  margin:0 2px;
  font-weight:normal;
}

.categories .category-path .path-item{
  color:var(--text-muted);
  font-size:13px;
}

.categories .category-path .path-item:last-child{
  color:var(--accent);
  font-weight:500;
}

/* 카테고리 경로 표시 컨테이너 */
.categories .category-path-container{
  display:flex;
  flex-direction:column;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}

.categories .category-path-container .back-button{
  font-size:12px;
  margin-bottom:8px;
  align-self:flex-start;
  padding:4px 8px;
  background:var(--muted);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  cursor:pointer;
  transition:all 0.2s ease;
}

.categories .category-path-container .back-button:hover{
  background:var(--input-bg);
  border-color:var(--accent);
}

.categories .category-path-container .no-sub-message{
  color:var(--text-muted);
  font-style:italic;
  font-size:13px;
  padding:8px 0;
}

/* 영상 리스트 컴포넌트 */
.list{display:flex;flex-direction:column}
.item{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:12px;
  padding:12px;
  border-top:1px solid var(--border)
}

.item:first-of-type{border-top:none}
.item:last-of-type{margin-bottom:10px}

.thumb{
  width:200px;
  height:112px;
  overflow:hidden;
  border-radius:8px;
  background:var(--thumb-bg)
}

.thumb img{width:100%;height:100%;object-fit:cover}
.ititle{
  font-weight:600;
  margin-bottom:6px;
  font-size:14px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.imeta{font-size:12px;color:var(--muted);line-height:1.4}
.venues{padding:10px}
.venue{
  font-size:13px;
  color:var(--muted);
  padding:6px 0;
  border-top:1px dashed var(--border)
}

.venue:first-of-type{border-top:none}
.loader,.error{padding:12px;font-size:14px;color:var(--muted)}

/* 영상 그리드 컴포넌트 */
.video-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.video-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}

.video-card .thumb{
  width:100%;
  aspect-ratio:16/9;
  background:var(--thumb-bg);
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:13px;
}

.video-card .meta{padding:10px 12px}
.video-card .title{
  font-weight:600;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.video-card .sub{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.video-card .footer{
  margin-top:8px;
  font-size:12px;
  color:var(--muted)
}