/* userPopup */
#article .userPopup {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: normal;
  top: 30px;
  left: 0;
  width: max-content;
  padding: 8px;
  gap: 4px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.1),0 0 2px 0 rgba(0,0,0,0.05);
  word-break: keep-all;
  z-index: 1;
}

#article .userPopup.active {
  display: flex;
}

#article .userPopup li {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 0;
  border-radius: 8px;
  color: #525662;
}

#article .userPopup li:hover {
  background-color: #F7F8F9;
}

#article .userPopup a {
  width: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #525662;
}

#article .userPopup li svg {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-repeat: no-repeat;
  background-position: center;
}

#article .sub {
  width: 100%;
}

/* PC/모바일 모두에서 항상 숨김(빈 공간도 남지 않도록 display:none) */
.alwaysHide {
  display: none !important;
}

#article .sub .back {
  display: flex;
}

#article .sub .back a {
  font-weight: bold;
  background-color: #fff;
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 0 2px 30px 0 rgba(0,0,0,0.06);
}

[data-theme='dark'] #article .sub .back a {
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.1);
}

#article .customHtml {
  display: flex;
  justify-content: center;
  align-items: center;
}

#article .item.articleItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  gap: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 30px 0 rgba(0,0,0,0.06);
  box-sizing: border-box;
}

[data-theme='dark'] #article .item.articleItem {
  /* 요청: 영상 상세페이지 본문 박스(제목/메타정보 영역 포함) 배경색을 관리자 설정(섹션 박스 배경색,
     --section-bg-color-dark, head.ejs에서 주입)과 연동. 기존 하드코딩 값을 기본값(fallback)으로 유지. */
  background-color: var(--section-bg-color-dark, rgba(255, 255, 255, 0.1));
}

#article .item.articleItem > .info {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

[data-theme='dark'] #article .item.articleItem > .info {
  border-bottom: 1px solid #666;
}

#article .item.articleItem > .info .etc {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#article .item.articleItem > .info .etc .left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#article .item.articleItem > .info .etc .nickName {
  position: relative;
  cursor: pointer;
}

#article .item.articleItem > .info .etc .right {
  position: relative;
}

#article .item.articleItem > .info .etc .right .buttons svg {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  cursor: pointer;
}

#article .item.articleItem > .info .etc .right .popUp {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  top: 30px;
  right: 0;
  padding: 8px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.1),0 0 2px 0 rgba(0,0,0,0.05);
  word-break: keep-all;
  z-index: 1;
}

#article .item.articleItem > .info .etc .right .popUp form {
  flex-direction: column;
  gap: 4px;
}

#article .item.articleItem > .info .etc .right .popUp.active {
  display: flex;
}

#article .item.articleItem > .info .etc .right .popUp button {
  width: 100%;
  font-size: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border: 0;
  border-radius: 8px;
  color: #525662;
}

#article .item.articleItem > .info .etc .right .popUp li {
  display: flex;
  align-items: center;
}

#article .item.articleItem > .info .etc .right .popUp button:hover {
  background-color: #F7F8F9;
}

#article .item.articleItem > .info .etc .right .popUp svg {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-repeat: no-repeat;
  background-position: center;
}

#article .item.articleItem > .info .titleContainer {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

#article .item.articleItem > .info .category {
  padding: 10px 20px;
  border-radius: 6px;
  color: #687182;
  background-color: #f5f6f9;
  margin-right: 10px;
  word-break: keep-all;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#article .item.articleItem > .info .category .categoryBadgeIcon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}

[data-theme='dark'] #article .item.articleItem > .info .category {
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.1);
}

#article .item.articleItem > .info h1 {
  color: #000;
  display: inline;
}

[data-theme='dark'] #article .item.articleItem > .info h1 {
  color: rgba(255, 255, 255, 0.7);
}

#article .item.articleItem > .info .etc {
  color: #9da5b6;
  padding: 5px 0;
}

#article .item.articleItem > .info .etc svg {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

/* 상세페이지 상단 메타정보 - 요청: 메인 카드(1-1)와 동일한 한 줄 포맷(videoMetaLine) 사용.
   #article .item.articleItem > .info .etc의 justify-content:space-between이 videoMetaLine의
   nowrap 한 줄 배치와 충돌하지 않도록 좌측 정렬로 덮어쓴다. */
#article .item.articleItem > .info .videoMetaLine {
  justify-content: flex-start;
  font-size: 0.95em;
  padding: 5px 0;
}

#article .item.articleItem > .links {
  color: #9da5b6;
}

#article .item.articleItem > .files {
  color: #9da5b6;
}

#article .item.articleItem > .links a,
#article .item.articleItem > .files a {
  color: #9da5b6;
}

#article .item.articleItem > .links a:hover,
#article .item.articleItem > .files a:hover {
  text-decoration: underline;
}

#article .item.articleItem > .customField {
  color: #9da5b6;
}

#article .item.articleItem > .content {
  color: #000;
}

#article .item.articleItem > .content .image {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

#article .item.articleItem > .content .media {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

#article .item.articleItem > .content .media [data-oembed-url] {
  width: 100%;
}

#article .item.articleItem .listAndEdit {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

#article .item.articleItem .listAndEdit > div {
  display: flex;
  gap: 10px;
}

#article .item.articleItem .listAndEdit .likeContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#article .item.articleItem .listAndEdit .likeContainer button,
#article .item.articleItem .listAndEdit button {
  font-size: 1em;
  color: #697183;
  background-color: #F5F6F9;
  border-radius: 6px;
  padding: 10px 20px;
  border: 0;
  word-break: keep-all;
}

[data-theme='dark'] #article .item.articleItem .listAndEdit .likeContainer button,
[data-theme='dark'] #article .item.articleItem .listAndEdit button {
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.1);
}

#article .item.articleItem .listAndEdit .likeContainer button:hover,
#article .item.articleItem .listAndEdit button:hover {
  background-color: #EEF0F4;
}

[data-theme='dark'] #article .item.articleItem .listAndEdit .likeContainer button:hover,
[data-theme='dark'] #article .item.articleItem .listAndEdit button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

#article .item.articleItem .listAndEdit .articleButton form {
  display: flex;
}

#article .item.articleItem .listAndEdit .articleButton .edit {
  margin-right: 10px;
}

/* 요청: 태그 영역을 한 줄로 표시(줄바꿈 금지, 가로 스크롤 금지), 화면(PC/모바일) 폭에 넘치는
   태그는 JS(read.js의 fitTagsToOneLine)가 뒤에서부터 순서대로 숨기고 마지막에 "..."를 표시한다.
   폰트 크기(container 0.45em / .tag 0.95em)와 태그 높이(padding)는 기존과 완전히 동일하게 유지하고,
   배경/테두리/그림자만 반투명 Pill/Glass 스타일로 변경한다. */
#article .item.articleItem .tags {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  color: #9DA5B6;
  font-size: 0.45em;
  margin: 6px 0 16px;
  gap: 4px;
}

#article .item.articleItem .tagLabel {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  color: #9DA5B6;
  font-size: 0.9em;
  padding: 3px 2px;
}

#article .item.articleItem .tag {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.22);
  box-shadow: 0 0 6px 0 rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.12);
  color: var(--tag-text-color, #cfd2d8);
  font-size: 0.95em;
}

body:not([data-theme='dark']) #article .item.articleItem .tag {
  background-color: rgba(240, 241, 244, 0.7);
  border-color: rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.25);
  box-shadow: none;
  color: var(--tag-text-color, #4a4f5a);
}

#article .item.articleItem .tag.tagMore {
  padding: 3px 6px;
  color: #9da5b6;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* 요청 #6/#7: 상세페이지 하단 "글쓰기" 버튼은 PC/모바일 모두 완전히 숨기고
   버튼이 차지하던 공간도 남기지 않는다(display:none). */
#article .writeBtn {
  display: none;
}

#article .writeBtn a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  color: #fff;
  background-color: #434B57;
  padding: 0 20px;
  height: 40px;
  border-radius: 8px;
}

#article .writeBtn a:hover {
  background-color: #353C45;
}

@media (max-width: 1280px) {
  #article .item.articleItem > .info h1 {
    font-size: 1.3em;
  }

  #article .item.articleItem > .info .category {
    font-size: 0.8em;
  }

  #article .item.articleItem .listAndEdit {
    font-size: 0.8em;
  }

  #article .item.articleItem > .info .etc .right .popUp button {
    font-size: 0.8em;
  }

  /* [모바일 UI 개선] 영상 아래 버튼(post-actions)/태그 영역의 위아래 여백을 기존의 약 50%로 축소.
   * - .item.articleItem의 자식 간 flex gap: 20px -> 10px
   * - post-actions 아래 마진: 16px -> 8px
   * - tags 위아래 마진: 6px/16px -> 3px/8px
   * 요소 자체(버튼 개수/태그 표시 로직/기능)는 그대로 두고 여백값만 축소한다. */
  #article .item.articleItem {
    gap: 10px;
  }

  .post-actions {
    margin-bottom: 8px;
  }

  #article .item.articleItem .tags {
    margin: 3px 0 8px;
  }
}

/* share */
#modal .share {
  display: none;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

#modal .container.active {
  display: grid;
}

#modal .share a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#modal .share .shareItem {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
  border-radius: 100%;
  cursor: pointer;
}

#modal .share .facebook {
  background-color: #1A76F2;
}

#modal .share .twitter {
  background-color: #1EA1F1;
}

#modal .share .naver {
  background-color: #1EC800;
}

#modal .share .kakaoTalk,
#modal .share .kakaoStory {
  color: #000;
  background-color: #FFE003;
}

#modal .share .tumblr {
  background-color: #001935;
}

#modal .share .pinterest {
  background-color: #E70022;
}

#modal .share img {
  width: 20px;
  height: 20px;
}
/* ============ 5버튼(홈/공유/찜하기/좋아요/신고) - PC 기준 ============ */
/* 순서: 홈 → 공유 → 찜하기 → 좋아요 → 신고. PC/모바일 공통으로 5등분 grid, 한 줄 고정(줄바꿈 금지).
   홈/공유는 아이콘만(icon-only), 찜하기/좋아요/신고는 아이콘+한글 라벨을 세로로 쌓아 표시한다.
   요청: 버튼 개수/전체 가로폭/영역 높이는 그대로 두고, 다크 반투명 Glass + 얇은 네온 Border +
   Hover 시 은은한 Glow로 디자인만 변경. 아이콘별로 미세하게 다른 Accent Color(--btn-accent-rgb)를
   nth-child로 부여해 과하지 않은 포인트를 준다. */
.post-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.post-actions .post-action-btn {
  --btn-accent-rgb: 210, 214, 222;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 56px;
  padding: 8px 4px;
  background-color: rgba(24, 26, 32, 0.55);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--btn-accent-rgb), 0.22);
  border-radius: 10px;
  color: var(--action-btn-text-color, #cfd2d8);
  font-size: 0.85em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* 아이콘별 은은한 Accent Color (홈: 시안 / 공유: 바이올렛 / 찜하기: 골드 / 좋아요: 핑크레드 / 신고: 오렌지) */
.post-actions .post-action-btn:nth-child(1) { --btn-accent-rgb: 56, 189, 248; }
.post-actions .post-action-btn:nth-child(2) { --btn-accent-rgb: 167, 139, 250; }
.post-actions .post-action-btn:nth-child(3) { --btn-accent-rgb: 255, 179, 0; }
.post-actions .post-action-btn:nth-child(4) { --btn-accent-rgb: 255, 71, 87; }
.post-actions .post-action-btn:nth-child(5) { --btn-accent-rgb: 245, 158, 11; }

.post-actions .post-action-btn .icon {
  color: rgb(var(--btn-accent-rgb));
}

/* 홈/공유 버튼: 아이콘만 표시, 라벨 요소 자체가 없거나 있어도 항상 숨김 */
.post-actions .post-action-btn.icon-only .label {
  display: none;
}

.post-actions .post-action-btn .label {
  font-size: 0.85em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.post-actions .post-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--btn-accent-rgb), 0.55);
  box-shadow: 0 0 10px 0 rgba(var(--btn-accent-rgb), 0.3), inset 0 0 10px 0 rgba(var(--btn-accent-rgb), 0.06);
}

.post-actions .post-action-btn .icon {
  font-size: 1.3em;
  line-height: 1;
  flex-shrink: 0;
}

.post-actions .post-action-btn.liked,
.post-actions .post-action-btn.liked .icon {
  color: #ff4757;
  border-color: #ff4757;
}

.post-actions .post-action-btn.liked {
  border-color: rgba(255, 71, 87, 0.55);
  box-shadow: 0 0 8px 0 rgba(255, 71, 87, 0.25);
}

.post-actions .post-action-btn.bookmarked,
.post-actions .post-action-btn.bookmarked .icon {
  color: #ffb300;
  border-color: #ffb300;
}

.post-actions .post-action-btn.bookmarked {
  border-color: rgba(255, 179, 0, 0.55);
  box-shadow: 0 0 8px 0 rgba(255, 179, 0, 0.25);
}

/* 라이트 테마(data-theme='dark' 속성이 없는 기본 상태)는 밝은 배경에 맞게 재조정 */
body:not([data-theme='dark']) .post-actions .post-action-btn {
  background-color: rgba(255, 255, 255, 0.6);
  background-image: none;
  border-color: rgba(var(--btn-accent-rgb), 0.3);
  color: var(--action-btn-text-color, #697183);
}

body:not([data-theme='dark']) .post-actions .post-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px 0 rgba(var(--btn-accent-rgb), 0.25);
}

/* ============ 모바일: 5버튼 - 현재(PC)보다 약간만 축소 ============ */
/* 50% 축소가 아니라 미세 조정: 아이콘 16~20px, 라벨 10~12px, 버튼 높이 34~40px, 버튼 간격 3~5px */
@media (max-width: 1280px) {
  .post-actions {
    gap: 4px;
  }

  .post-actions .post-action-btn {
    height: 40px;
    padding: 3px 2px;
    gap: 2px;
  }

  .post-actions .post-action-btn .icon {
    font-size: 17px;
    line-height: 1;
  }

  .post-actions .post-action-btn .label {
    font-size: 11px;
    line-height: 1.1;
  }
}

@media (max-width: 360px) {
  .post-actions .post-action-btn {
    padding: 2px 2px;
  }

  .post-actions .post-action-btn .icon {
    font-size: 16px;
  }

  .post-actions .post-action-btn .label {
    font-size: 10px;
  }
}

/* ============ 오류신고 모달 ============ */
#modal .container.report {
  position: relative;
  width: 340px;
  max-width: calc(100vw - 40px);
  align-items: stretch;
  padding: 28px 22px 22px;
  background-color: #24262B;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  gap: 0;
}

#modal .container.report .reportClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #8A8F98;
  font-size: 0.95em;
  cursor: pointer;
  padding: 0;
}

#modal .container.report .reportClose:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

#modal .container.report .reportIcon {
  align-self: center;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 50%;
  background-color: rgba(255, 107, 53, 0.15);
  color: #FF6B35;
  font-size: 1.5em;
}

#modal .container.report .reportTitle {
  align-self: center;
  color: #fff;
  font-size: 1.15em;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
}

#modal .container.report .reportSubtitle {
  align-self: center;
  color: #9CA2AC;
  font-size: 0.85em;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 20px;
  word-break: keep-all;
}

#modal .container.report .reportFieldLabel {
  color: #C6CAD2;
  font-size: 0.8em;
  font-weight: 600;
  margin-bottom: 6px;
}

#modal .container.report .reportFieldLabel:not(:first-of-type) {
  margin-top: 14px;
}

#modal .container.report .reportUrlDisplay {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background-color: #1A1C20;
  border: 1px solid #3A3D44;
  border-radius: 8px;
  color: #8A8F98;
  font-size: 0.85em;
}

#modal .container.report .reportReasonSelect {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background-color: #1A1C20;
  border: 1px solid #3A3D44;
  border-radius: 8px;
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}

#modal .container.report textarea {
  width: 100%;
  height: 80px;
  margin-top: 14px;
  padding: 10px 14px;
  background-color: #1A1C20;
  border: 1px solid #3A3D44;
  border-radius: 8px;
  color: #fff;
  font-size: 0.85em;
  resize: none;
}

#modal .container.report textarea::placeholder {
  color: #6A6F78;
}

#modal .container.report .reportSubmitBtn {
  width: 100%;
  height: 46px;
  margin-top: 18px;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
  cursor: pointer;
}

#modal .container.report .reportSubmitBtn:hover {
  background: linear-gradient(135deg, #7C4CE8, #5F21C4);
}

/* 라이트 테마 */
body:not([data-theme='dark']) #modal .container.report {
  background-color: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

body:not([data-theme='dark']) #modal .container.report .reportTitle {
  color: #1a1a1a;
}

body:not([data-theme='dark']) #modal .container.report .reportSubtitle {
  color: #7A7F8A;
}

body:not([data-theme='dark']) #modal .container.report .reportFieldLabel {
  color: #4A4F5A;
}

body:not([data-theme='dark']) #modal .container.report .reportUrlDisplay,
body:not([data-theme='dark']) #modal .container.report .reportReasonSelect,
body:not([data-theme='dark']) #modal .container.report textarea {
  background-color: #F5F6F9;
  border-color: #E4E6EB;
  color: #1a1a1a;
}

body:not([data-theme='dark']) #modal .container.report .reportUrlDisplay {
  color: #8A8F98;
}

body:not([data-theme='dark']) #modal .container.report .reportClose {
  color: #9CA2AC;
}

body:not([data-theme='dark']) #modal .container.report .reportClose:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: #1a1a1a;
}

@media (max-width: 480px) {
  #modal .container.report {
    width: calc(100vw - 32px);
    padding: 24px 18px 18px;
  }
}

/* ============ 샘플 플레이어 ============ */
.content .bunnyStream.samplePlayer {
  background-color: #000;
  align-items: center;
  overflow: hidden;
}

.content .bunnyStream.samplePlayer img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.content .bunnyStream.samplePlayer .sampleBadge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background-color: rgba(0,0,0,0.6);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85em;
  text-align: center;
  max-width: 80%;
  word-break: keep-all;
  z-index: 1;
}

/* ============ 관련 동영상 ============ */
.relatedVideos {
  margin-bottom: 20px;
}

.relatedVideosHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.relatedVideosHeader h2 {
  font-size: 1.1em;
  color: #000;
}

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

.relatedViewToggle {
  padding: 6px 12px;
  background-color: #F5F6F9;
  border: 0;
  border-radius: 6px;
  color: #697183;
  font-size: 0.85em;
  cursor: pointer;
}

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

.relatedVideosList {
  display: grid;
  gap: 12px;
}

.relatedVideosList.col2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.relatedVideosList.col1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* PC(1281px 이상): 관련 동영상은 한 줄에 4개, videoMainColumn(왼쪽 컬럼) 폭을 꽉 사용하되
   오른쪽 최신 동영상 사이드바 영역은 절대 침범하지 않는다(관련 동영상은 videoMainColumn 내부에만 존재).
   PC에서는 1열/2열 토글 버튼 자체를 숨기므로(desktopHide) col1/col2 구분 없이 항상 4열 고정. */
@media (min-width: 1281px) {
  .relatedVideosList.col2,
  .relatedVideosList.col1 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============ PC 전용: 동영상 재생 영역이 컨테이너를 꽉 채우도록 ============
   content.css의 .content .bunnyStream은 width:100%; padding-bottom:56.25%(16:9)로
   높이를 잡는데, 이 padding-bottom(%)은 자기 자신이 아니라 "부모(.content)의 너비"를
   기준으로 계산된다. 과거에는 여기에 max-width:960px를 걸어 강제로 작게 줄였으나,
   videoMainColumn(왼쪽 컬럼, PC에서 보통 1200px 이상)에 비해 영상이 지나치게 작아
   양옆에 큰 여백만 남는 문제(요청 #7)가 있었다. 최대폭 제한을 없애고 padding-bottom
   방식 대신 aspect-ratio로 전환해, 영상이 항상 videoMainColumn(.content) 너비를
   100% 꽉 채우면서 16:9 비율을 유지하도록 한다. 실제 Bunny Stream 영상과
   샘플 플레이어(.samplePlayer) 모두 같은 베이스 규칙을 쓰므로 동일하게 적용된다.
   videoMainColumn 하위로 범위를 한정해 다른 게시판 타입(갤러리 등)의 content.css
   동작에는 전혀 영향을 주지 않는다. */
@media (min-width: 1281px) {
  .videoMainColumn .content .bunnyStream {
    width: 100%;
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
  }
}

/* ============ PC 전용 2단 레이아웃: 왼쪽 메인 동영상 / 오른쪽 최신 동영상 ============
   .videoDetailLayout(래퍼) > .videoMainColumn(왼쪽, flex:1) + .latestVideosSidebar(오른쪽, 고정폭)
   모바일(<=1280px)에서는 아래 별도 미디어쿼리에서 이 래퍼들을 display:contents로 무력화하여
   .sub/.item/.relatedVideos가 article의 직계 자식이었던 기존 모바일 DOM 순서/레이아웃을 그대로 유지한다. */
.videoDetailLayout {
  width: 100%;
}

.videoMainColumn {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.latestVideosSidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.latestVideosHeader {
  margin-bottom: 12px;
}

.latestVideosHeader h2 {
  font-size: 1.1em;
  color: #000;
}

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

.latestVideosList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.latestVideoItem {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
}

.latestVideoImage {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 120px;
  padding-bottom: 67.5px; /* 120px * 9/16 */
  overflow: hidden;
  border-radius: 8px;
  background-color: #eee;
}

.latestVideoImage img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 요청: 최신 동영상 사이드바에도 카테고리/시간/조회/좋아요 메타정보를 추가.
   제목 아래 한 줄 메타정보를 넣기 위해 title+meta를 세로로 쌓는 래퍼로 감싼다. */
.latestVideoInfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 2px;
}

.latestVideoTitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9em;
  color: #000;
  word-break: break-all;
}

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

.latestVideoInfo .videoMetaLine {
  margin-top: 4px;
  font-size: 0.72em;
}

@media (min-width: 1281px) {
  .videoDetailLayout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .videoMainColumn {
    flex: 1;
    min-width: 0;
  }

  .latestVideosSidebar {
    width: 280px;
    flex-shrink: 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
  }

  [data-theme='dark'] .latestVideosSidebar {
    /* 요청: 영상 상세페이지 오른쪽 "최신 동영상" 사이드바 박스 배경색을 관리자 설정(섹션 박스 배경색,
       --section-bg-color-dark, head.ejs에서 주입)과 연동. 기존 하드코딩 값을 기본값(fallback)으로 유지. */
    background-color: var(--section-bg-color-dark, rgba(255, 255, 255, 0.1));
  }
}

/* 모바일: 새로 추가한 PC 전용 레이아웃 래퍼가 기존 모바일 DOM 흐름에 영향을 주지 않도록
   display:contents로 무력화한다(래퍼 자체가 없었던 것처럼 자식 요소들이 article의 직계 자식으로 취급됨).
   .latestVideosSidebar는 mobileHide로 이미 숨김 처리되어 모바일에는 렌더링되지 않는다. */
@media (max-width: 1280px) {
  .videoDetailLayout,
  .videoMainColumn {
    display: contents;
  }
}

/* 요청 #9: 관련 동영상 카드는 이제 videoCard.ejs 공용 컴포넌트를 그대로 재사용하므로
   .item/.image/.info 등의 실제 카드 스타일은 list.css의 "#videoList .item, .relatedVideosList .item"
   공유 규칙이 담당한다(이전에 쓰이던 .relatedItem/.relatedImage/.relatedInfo/.relatedTitle은
   더 이상 사용되지 않아 제거함). */

/* 요청 #8: 관련 동영상 "제목"과 "카드 목록" 사이에 굵은 Accent 색상 구분선을 삽입한다.
   색상은 관리자가 설정한 카드 테두리 색상(--video-accent-color)과 동일하게 연동된다. */
.relatedVideosDivider {
  height: 4px;
  border-radius: 4px;
  margin-bottom: 16px;
  background-color: var(--video-accent-color, #22c55e);
}

/* 모바일: 관련 동영상 영역을 main의 좌우 padding(10px)만큼 바깥으로 당겨
   화면 가장자리까지 꽉 차게 표시(카드가 작아 보이지 않도록 가로폭 최대 활용).
   헤더(제목/토글 버튼)만 안쪽 여백을 유지하고, 카드 목록(relatedVideosList)은
   좌우 여백 없이 뷰포트 끝까지 확장한다. */
@media (max-width: 1280px) {
  .relatedVideos {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
  }

  .relatedVideosHeader {
    padding: 0 10px;
  }

  .relatedVideosDivider {
    margin-left: 10px;
    margin-right: 10px;
  }

  .relatedVideosList {
    gap: 10px;
  }
}


/* 요청 #1: 상세페이지 하단 정렬 탭(최신글/일간/주간/월간/전체베스트)을
   검색창 스타일이 아닌 한 줄짜리 탭/메뉴 형태로 표시 */
.sortTabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  margin: 20px 0;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme='dark'] .sortTabs {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.sortTabs a {
  flex: 0 0 auto;
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.9em;
  font-weight: 600;
  color: #666;
  background-color: transparent;
  border-radius: 6px 6px 0 0;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.sortTabs a:hover {
  color: var(--video-accent-color, #22c55e);
  background-color: rgba(var(--video-accent-color-rgb), 0.08);
}

[data-theme='dark'] .sortTabs a {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme='dark'] .sortTabs a:hover {
  color: var(--video-accent-color, #22c55e);
  background-color: rgba(var(--video-accent-color-rgb), 0.15);
}

/* [모바일 UI 개선] 최신글/일간베스트/주간베스트/월간베스트/전체베스트 5개 탭을
 * 모바일 화면 폭 안에서 반드시 한 줄로(줄바꿈 없이, 가로 스크롤 없이) 표시.
 * 글자 크기와 좌우 padding/gap을 줄여 5개 탭 전체 너비가 화면(--article 실제 폭) 안에
 * 들어오도록 하고, overflow-x: auto(가로 스크롤)도 더 이상 필요 없도록 visible로 되돌린다.
 * 탭 항목/href/개수/기능은 전혀 변경하지 않는다. */
@media (max-width: 1280px) {
  /* 부모 <article>이 align-items: center인 flex 컨테이너라, width 지정 없이는
     #sortTabs(flex 자식)가 콘텐츠 크기(약 258px)로 줄어들어 화면 중앙에 좁게 표시되고,
     그 안의 5개 탭도 258px를 기준으로 계산되어 텍스트가 "..."로 잘렸다.
     width: 100%로 부모(article, 370px 전후)만큼 꽉 채워야 탭 폭 계산이 정확해진다. */
  .sortTabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: visible;
    justify-content: space-between;
    gap: 2px;
    margin: 10px 0;
  }

  .sortTabs a {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 2px;
    /* em 단위는 상위 폰트 크기에 따라 실제 렌더링 px가 달라져(약 12px) 5글자 라벨(일간베스트 등)이
       살짝 넘쳐 "..."로 잘리는 문제가 있었다. 실측(Playwright canvas measureText) 기반으로
       고정 px 값을 사용해 390px 폭 기준 5개 탭 전체가 여유 있게 한 줄에 들어오도록 한다. */
    font-size: 11px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 360px) {
  .sortTabs {
    gap: 1px;
  }

  .sortTabs a {
    padding: 5px 1px;
    font-size: 10px;
  }
}