:root {
  --visited-color: #999;
}

/* boardList */
/* 요청: 이전글/다음글 영역이 위아래 영상카드 그리드와 톤이 달라 "어색한 회색 바"처럼 보이는 문제 수정.
   흰색 박스 배경을 없애고, 카드 그리드와 같은 초록 포인트 컬러의 얇은 구분선/호버 효과로 통일한다. */
#boardList {
  width: 100%;
  font-size: 1em;
  box-sizing: border-box;
}

#boardList .item {
  height: 80px;
  display: flex;
  justify-content: space-between;
  padding: 12px 8px;
  border-bottom: 0;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

#boardList .item:hover {
  background-color: rgba(var(--video-accent-color-rgb), 0.06);
}

[data-theme='dark'] #boardList .item {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme='dark'] #boardList .item:hover {
  background-color: rgba(var(--video-accent-color-rgb), 0.1);
}

#boardList .item:visited {
  color: var(--visited-color);
}

[data-theme='dark'] #boardList .item:visited {
  color: #999;
}

#boardList .item .info {
  flex: 1;
  width: 80%;
}

#boardList .item .titleContainer {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

#boardList .item .category {
  color: var(--video-badge-color, #22c55e);
  text-decoration: none;
  font-weight: 700;
  background-color: var(--video-badge-bg-color, rgba(0, 0, 0, 0.28));
  border-radius: 6px;
  padding: 2px 6px;
  margin-right: 8px;
  font-size: 0.9em;
  word-break: keep-all;
  box-sizing: border-box;
}

#boardList .item a.category:visited,
.videoMetaLine a.category:visited {
  color: var(--video-badge-color, #22c55e);
}

[data-theme='dark'] #boardList .item .category {
  background-color: var(--video-badge-bg-color, rgba(255, 255, 255, 0.1));
}

#boardList .item .title {
  font-size: 1.2em;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
}

#boardList .item .commentCount {
  font-size: 0.9em;
  color: #9da5b6;
  margin-left: 10px;
  margin-right: 10px;
}

#boardList .item .etc {
  color: #9da5b6;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 0;
  font-size: 0.9em;
}

#boardList .item .info svg {
  width: 10px;
  height: 10px;
  margin-right: 4px;
  background-repeat: no-repeat;
  background-position: center;
}

#boardList .item .info .commentCount svg {
  width: 14px;
  height: 14px;
}

#boardList .item .image {
  position: relative;
  width: 70px;
  height: 100%;
}

#boardList .item .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

#boardList .item .image .count {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.3);
  margin-right: 5px;
  margin-bottom: 10px;
}

/* 요청: 밋밋한 회색 구분선 대신 초록 포인트 컬러의 얇은 라인으로 카드 그리드 톤과 통일 */
#boardList .line {
  border-bottom: 1px solid rgba(var(--video-accent-color-rgb), 0.25);
  margin: 0 8px;
}

[data-theme='dark'] #boardList .line {
  border-bottom: 1px solid rgba(var(--video-accent-color-rgb), 0.2);
}

#boardList .line:last-child {
  display: none;
}

@media (max-width: 1280px) {
  #boardList .item .title {
    font-size: 1em;
  }
}

/* galleryList */
#galleryList {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

#galleryList .item {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.06);
}

[data-theme='dark'] #galleryList .item {
  background-color: rgba(255, 255, 255, 0.1);
}

#galleryList .item:visited {
  color: var(--visited-color);
}

[data-theme='dark'] #galleryList .item:visited {
  color: #999;
}

#galleryList .item .category,
#galleryList .item .notice {
  color: #697183;
  background-color: #f5f6f9;
  border-radius: 6px;
  padding: 4px 6px;
  margin-right: 8px;
  font-size: 0.9em;
  word-break: keep-all;
  box-sizing: border-box;
}

#galleryList .image {
  position: relative;
  width: 100%;
  padding: 0;
  padding-bottom: 78.43%;
  margin: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

#galleryList .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

#galleryList .info {
  padding: 20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#galleryList .info .titleContainer {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
  word-break: break-all;
}

#galleryList .info .titleContainer .commentCount {
  color: #9da5b6;
}

#galleryList .info .titleContainer .commentCount svg {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  margin-right: 4px;
}

#galleryList .info .etc {
  font-size: 0.8em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #9da5b6;
}

#galleryList .info .etc .nickName {
  word-break: break-all;
}

@media (max-width: 1280px) {
  #galleryList {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* bookmarkList */
#bookmarkList {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

#bookmarkList.bookmarkThree {
  grid-template-columns: repeat(3, 1fr);
}

#bookmarkList.bookmarkFour {
  grid-template-columns: repeat(4, 1fr);
}

#bookmarkList.bookmarkFive {
  grid-template-columns: repeat(5, 1fr);
}

#bookmarkList .item {
  border: 1px solid rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background-color: #fff; */
  box-sizing: border-box;
  padding: 6px;
}

#bookmarkList .item .image {
  width: 100%;
}

#bookmarkList .item .image img {
  width: 100%;
}

#bookmarkList .item .info {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#bookmarkList .item .info div {
  flex: 1;
  width: 100%;
  padding: 6px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

#bookmarkList .item .info .title {
  font-weight: bold;
  margin-bottom: 0;
  border-top: 2px solid rgba(0, 0, 0, 0.3);
}

#bookmarkList .item .buttons {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#bookmarkList .item .buttons a {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 10px 0;
}

#bookmarkList .item .buttons .detail {
  background-color: rgba(0, 0, 0, 0.3);
  margin-right: 6px;
}

#bookmarkList .item .buttons .join {
  background-color: red;
}

@media (max-width: 1280px) {
  #bookmarkList {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* videoList */
#videoList {
  width: 100%;
  display: grid;
  /* 요청: 한 줄 6개 -> 5개로 변경, 카드가 줄어든 개수만큼 자동으로 더 넓어져 화면을 꽉 채움 */
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

/* 요청 #9: 관련 동영상 카드가 메인 /video 카드와 완전히 동일한 공통 컴포넌트(videoCard.ejs)를
   재사용하므로, 카드 자체(.item/.image/.info 등)의 스타일도 #videoList와 .relatedVideosList가
   함께 공유한다. 그리드 컬럼 수(한 줄에 몇 개)만 read.css의 .relatedVideosList에서 별도 지정한다. */
#videoList .item,
.relatedVideosList .item {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  /* 요청 #8: 카드/박스 배경색 관리자 설정(--card-bg-color-light, head.ejs에서 주입) 적용 */
  background-color: var(--card-bg-color-light, #fff);
  border: 1px solid transparent;
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  /* 요청: 썸네일을 카드 안에서 살짝 아래로 내려 카드 상단 여백을 준다.
     카드 전체 크기는 그대로 유지해야 하므로, 아래 .info 쪽 패딩/여백을 같은 양만큼 줄여 상쇄한다. */
  padding-top: 8px;
}

#videoList .item:hover,
.relatedVideosList .item:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--video-accent-color, #22c55e);
  box-shadow: 0 4px 16px 0 rgba(var(--video-accent-color-rgb), 0.25);
}

[data-theme='dark'] #videoList .item,
[data-theme='dark'] .relatedVideosList .item {
  background-color: var(--card-bg-color-dark, #1a1a1a);
  border: 1px solid rgba(var(--video-accent-color-rgb), 0.35);
}

[data-theme='dark'] #videoList .item:hover,
[data-theme='dark'] .relatedVideosList .item:hover {
  border-color: var(--video-accent-color, #22c55e);
  box-shadow: 0 4px 18px 0 rgba(var(--video-accent-color-rgb), 0.35);
}

#videoList .item:visited,
.relatedVideosList .item:visited {
  color: var(--visited-color);
}

[data-theme='dark'] #videoList .item:visited,
[data-theme='dark'] .relatedVideosList .item:visited {
  color: #999;
}

#videoList .item .notice {
  color: #697183;
  background-color: #f5f6f9;
  border-radius: 6px;
  padding: 4px 6px;
  margin-right: 8px;
  font-size: 0.9em;
  word-break: keep-all;
  box-sizing: border-box;
}

/* [항목4] 관리자 설정(--video-board-thumbnail-ratio)이 없으면 기존 하드코딩 기본값 55% 그대로 사용 */
#videoList .image,
.relatedVideosList .image {
  position: relative;
  width: 100%;
  padding: 0;
  padding-bottom: var(--video-board-thumbnail-ratio, 55%);
  margin: 0;
  border-radius: 8px;
}

#videoList .image img,
.relatedVideosList .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

#videoList .info,
.relatedVideosList .info {
  padding: 0 8px 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#videoList .info svg,
.relatedVideosList .info svg {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: bottom;
}

#videoList .info .titleContainer,
.relatedVideosList .info .titleContainer {
  /*display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;*/
  /* 요청 #10: 제목은 항상 한 줄만 표시하고 넘치면 말줄임(...) 처리, 절대 2줄로 줄바꿈되지 않는다. */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
  /*word-break: break-all;*/
}

#videoList .info .titleContainer .title,
.relatedVideosList .info .titleContainer .title {
  line-height: normal;
  font-size: 0.9em;
}

#videoList .info .titleContainer .commentCount,
.relatedVideosList .info .titleContainer .commentCount {
  color: #9da5b6;
}

#videoList .info .titleContainer .commentCount svg,
.relatedVideosList .info .titleContainer .commentCount svg {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  margin-right: 4px;
}

#videoList .info .etc,
.relatedVideosList .info .etc {
  font-size: 0.8em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #9da5b6;
}

#videoList .info .etc .nickName,
.relatedVideosList .info .etc .nickName {
  word-break: break-all;
}

/* ============ 공용 카드 정보 영역(videoMetaLine.ejs) ============
   요청 #2/#3: 카드 정보는 "제목 -> 카테고리(전체 글씨) -> 날짜/뷰/좋아요" 순서로 표시.
   카테고리는 축약하지 않고 전체 글씨를 그대로 보여줘야 하므로 자체 줄(.categoryRow)로 분리하고,
   날짜/뷰/좋아요는 기존처럼 한 줄(.metaRow)에 표시한다.
   메인 카드(#videoList), 상세페이지 상단, 관련 동영상, 최신 동영상 사이드바에서 모두 공유하는 스타일. */
.videoMetaLine {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 0.78em;
  color: #9da5b6;
}

.videoMetaLine .categoryRow {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.videoMetaLine .category {
  display: inline-block;
  max-width: 100%;
  color: var(--video-badge-color, #22c55e);
  text-decoration: none;
  font-weight: 700;
  /* 요청: 카테고리명은 잘리지 않고 전체 글씨가 보여야 하므로 말줄임(ellipsis)을 쓰지 않고
     카드 폭보다 길면 자연스럽게 줄바꿈되도록 한다. */
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.3;
  /* 요청: 카테고리 흰색 배경 제거 -> 반투명 어두운 배경으로 변경, 다크모드에 자연스럽게 어울리도록.
     관리자가 videoCardBadgeBackgroundColor를 지정하면 head.ejs에서 --video-badge-bg-color로 주입되어
     이 값을 우선 사용하고(항상 반투명, alpha 0.35 고정), 지정하지 않으면 기존 하드코딩 값을 유지한다.
     요청 #2: 카테고리명은 절대 잘리지 않고 전체 글씨가 보여야 하므로 카드가 좁을 때는 줄바꿈을 허용한다. */
  background-color: var(--video-badge-bg-color, rgba(0, 0, 0, 0.28));
  border-radius: 6px;
  padding: 2px 6px;
}

[data-theme='dark'] .videoMetaLine .category {
  background-color: var(--video-badge-bg-color, rgba(255, 255, 255, 0.1));
}

/* 카테고리 뱃지 아이콘(관리자 설정으로 on/off, 카테고리 관리 화면에 등록된 이미지 사용) */
.videoMetaLine .category:has(.categoryBadgeIcon) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.videoMetaLine .categoryBadgeIcon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}

.videoMetaLine .metaRow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.videoMetaLine .datetime,
.videoMetaLine .viewCount,
.videoMetaLine .likeCount {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.videoMetaLine svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* 요청: 시간 아이콘(시계)과 좋아요 아이콘(하트)은 빨강, 뷰(눈) 아이콘은 기존 색상 유지 */
.videoMetaLine .icon-clock,
.videoMetaLine .icon-heart {
  color: #ef4444;
}

/* 요청: 시계/하트 아이콘이 텍스트보다 튀어 보이지 않도록 약간 축소 (기존 12px -> 10px) */
.videoMetaLine .icon-clock,
.videoMetaLine .icon-heart {
  width: 10px;
  height: 10px;
}

#videoList .info .videoMetaLine,
.relatedVideosList .info .videoMetaLine {
  margin-top: 6px;
}

@media (max-width: 1280px) {
  
  #list {
    padding: 0px;
  }

  #videoList {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

}