.content {
  word-break: break-all;
}

.content a {
  display: unset;
  word-break: break-all;
}

.content strong {
  font-weight: bold;
}

.content ol {
  list-style-type: decimal;
  padding-left: 40px;
}

.content ul {
  list-style-type: disc;
  padding-left: 40px;
}

.content .image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content img {
  max-width: 100%;
}

.content .youtube {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin-bottom: 30px;
}

.content .youtube iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.content .play {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin-bottom: 30px;
}

.content .play iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.content .play video {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.content .bunnyStream {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /*margin-bottom: 30px;*/
}

.content .bunnyStream iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

/*
 * R2 자체 호스팅 비디오 플레이어(Plyr.js) 컨테이너.
 * services/videoUpload.js의 registerToBoard()가 생성하는
 * <div class="r2Video" data-video-upload-id="..." data-video-uuid="..."><video>...</video></div>
 * 구조를 감싸며, r2VideoPlayer.js가 이 안의 <video>를 Plyr로 초기화한다.
 *
 * [2026-09 비디오 플레이어 개편]
 * 사용자 요청: "PC/모바일 모두 가로형 플레이어 사용, 기본 비율 16:9, 항상 중앙 정렬,
 * object-fit: contain으로 찌그러짐 방지". 기존에는 세로(쇼츠형) 영상을 감지해
 * .r2Video--portrait 클래스로 세로로 크게 표시하는 로직이 있었으나, 이번 요청으로
 * 완전히 제거하고 항상 가로형 16:9(또는 관리자 설정값) 박스를 사용하도록 변경했다.
 * (r2VideoPlayer.js의 관련 함수도 함께 제거/비활성화됨)
 *
 * --r2-max-width / --r2-aspect-ratio 는 views/board/read.ejs에서 관리자 설정
 * (플레이어 설정 > PC/모바일 너비·높이·비율, 공통 최대너비)에 따라 계산되어 주입되는
 * CSS 변수다. 값이 없으면(변수 미주입) 아래 fallback(900px, 16/9)이 그대로 사용되어
 * 기존 화면과 동일하게 보인다(하위호환).
 *
 * 주의: services/videoUpload.js registerToBoard()와 views/admin/videoManage.ejs가
 * 생성하는 <video> 태그에는 style="width:100%; max-width:900px;" 인라인 스타일이
 * 남아있었으나, 새 크기 체계와 충돌하므로 해당 인라인 스타일은 제거되었다(별도 수정).
 */
.content .r2Video {
  position: relative;
  width: 100%;
  max-width: var(--r2-max-width, 900px);
  aspect-ratio: var(--r2-aspect-ratio, 16 / 9);
  margin: 0 auto 30px;
}

.content .r2Video .plyr {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.content .r2Video video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
  background: #000;
}

/* 전체화면 상태(Fullscreen API): 브라우저가 :fullscreen 대상 요소를 뷰포트 전체로
 * 확장하므로, 컨테이너의 max-width/aspect-ratio 제약을 풀어 화면을 최대한 채우되
 * video는 object-fit: contain을 유지해 비율이 깨지지 않고 여백(레터박스/필러박스)이
 * 생기도록 한다. Plyr가 실제 fullscreen 대상으로 사용하는 .plyr(플레이어 루트)의
 * 표준 클래스(.plyr--fullscreen-active)와 네이티브 :fullscreen 모두 대응한다. */
.content .r2Video:fullscreen,
.content .r2Video .plyr:fullscreen,
.content .r2Video .plyr--fullscreen-active {
  max-width: 100% !important;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}
.content .r2Video:fullscreen video,
.content .r2Video .plyr:fullscreen video,
.content .r2Video .plyr--fullscreen-active video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* 태블릿 이하: 여백 없이 화면 폭에 맞춰 넓게 (Bunny Stream 플레이어 반응형 참고)
 * [모바일 UI 개선] 영상 아래 버튼/태그 영역과의 여백을 기존(20px)의 약 50%(10px)로 축소.
 * 모바일 전용 --r2-max-width/--r2-aspect-ratio 값은 read.ejs가 이 미디어쿼리와
 * 동일한 max-width:768px 기준으로 덮어써 주입한다(PC/모바일 설정 분리). */
@media (max-width: 768px) {
  .content .r2Video {
    max-width: 100%;
    margin: 0 auto 10px;
    border-radius: 0;
  }
  .content .r2Video .plyr {
    border-radius: 0;
  }
}

/* 화면이 더 작을 때(요청 5번: "화면 크기가 작을 때는 max-width:100%로 자동 축소")
 * 관리자 지정값과 무관하게 항상 뷰포트 폭을 넘지 않도록 보장한다. 비율(aspect-ratio)은
 * 그대로 유지되어 object-fit:contain과 함께 찌그러짐 없이 자동으로 줄어든다. */
@media (max-width: 480px) {
  .content .r2Video {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.content table {
  width: 100%;
}

.content th,
.content td {
  padding: 10px;
  border: 1px solid #ddd;
}

.content th {
  background-color: #eee;
}

[data-theme='dark'] .content th,
[data-theme='dark'] .content td {
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid #000;
}

[data-theme='dark'] .content th {
  background-color: #222;
}