/* 전체 스타일 리셋 - 모든 요소의 테두리와 외곽선 제거 */
* {
  box-sizing: border-box;
}

/* 드롭다운 미디어 컨테이너 스타일 */
#dropdownMediaContainer {
  background-color: transparent !important;
}

#dropdownMediaInnerContainer {
  background-color: #1e1e1e !important; /* VS Code 어두운 테마 배경색 */
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 드롭다운 비디오에 CSS 필터 적용 - 검은색을 어두운 회색으로 변환 */
#dropdownVideo {
  /* 필터 적용 조정 */
  filter: brightness(0.9) contrast(1.05);
  background-color: #1e1e1e;
}

/* 이미지 관련 요소들에 테두리 제거 */
img, image, video, #sentenceImage, #sentenceVideo {
  border: 0 none transparent !important;
  outline: 0 none transparent !important;
  -webkit-tap-highlight-color: transparent;
}

/* 상단 동영상 플레이어 컨트롤 위치 조정 */
#sentenceVideo::-webkit-media-controls-panel,
#sentenceVideo::-moz-media-controls-panel,
#sentenceVideo::media-controls-panel {
  transform: translateY(3px) !important; /* 컨트롤 패널 전체를 3px 아래로 이동 */
}

#sentenceVideo::-webkit-media-controls-play-button,
#sentenceVideo::-moz-media-controls-play-button,
#sentenceVideo::media-controls-play-button {
  transform: translateY(3px) !important; /* 플레이 버튼을 3px 아래로 이동 */
}

/* 추가 스타일로 하단 컨트롤 전체를 아래로 이동 */
.custom-video-controls::-webkit-media-controls-enclosure,
.custom-video-controls::-moz-media-controls-enclosure,
.custom-video-controls::media-controls-enclosure {
  margin-top: 3px !important;
  padding-top: 3px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 상단 동영상에서 타임라인, 시계, 스피커 버튼, 전체화면 버튼 제거 */
#sentenceVideo::-webkit-media-controls-timeline,
#sentenceVideo::-webkit-media-controls-time-remaining-display,
#sentenceVideo::-webkit-media-controls-current-time-display,
#sentenceVideo::-webkit-media-controls-mute-button,
#sentenceVideo::-webkit-media-controls-volume-slider,
#sentenceVideo::-webkit-media-controls-volume-slider-container,
#sentenceVideo::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

/* 플레이 버튼을 시계 자리로 이동하고 크게 표시, y축으로 5px 위로, x축으로 4px 우측으로 이동 (6px 좌측 이동) */
#sentenceVideo::-webkit-media-controls-play-button {
  display: block !important;
  position: relative !important;
  margin-right: 10px !important;
  transform: scale(1.33) translate(4px, 10px) !important; /* 플레이 버튼 크기 5% 더 축소 및 x축 4px, y축 10px 아래로 이동 */
  color: #00c853 !important; /* 녹색으로 변경 */
  filter: invert(45%) sepia(89%) saturate(4200%) hue-rotate(100deg) brightness(98%) contrast(101%) !important; /* 녹색 필터 적용 */
}

/* 비디오 컨트롤바 설정 - 패딩 추가하여 버튼 위치 조정 */
#sentenceVideo::-webkit-media-controls-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* 플레이 버튼 중앙 정렬 */
  padding-top: 120px !important; /* 패딩으로 컨트롤 패널 자체를 늘려 플레이 버튼 위치 조정 (90px에서 120px로 증가) */
}

/* 테두리 없음 특별 클래스 - 이미지의 흰 테두리 완전 제거용 */
.no-border-at-all {
  border: 0 none transparent !important;
  outline: 0 none transparent !important;
  -webkit-tap-highlight-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background-clip: content-box !important;
}

/* 하단 미디어 플레이 버튼 스타일 */
.bottom-play-btn {
  position: absolute !important;
  bottom: 50% !important;
  left: 50% !important;
  transform: translate(-200px, -80px) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #00c853 !important;
  border: none !important;
  border-style: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  letter-spacing: 5px !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  outline: none !important;
  outline-style: none !important;
  outline-width: 0 !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  tap-highlight-color: rgba(0,0,0,0) !important;
  transition: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  pointer-events: auto !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.bottom-play-btn:hover,
.bottom-play-btn:active,
.bottom-play-btn:focus,
.bottom-play-btn:visited,
.bottom-play-btn:link {
  color: #00c853 !important;
  transform: translate(-200px, -80px) !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  outline-style: none !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

#gameCanvas {
  display: block;
  touch-action: none;
  -ms-touch-action: none;
  background-color: black;
}
/* 메뉴 중앙 정렬 유지 */
#topControls {
  position: fixed;
  top: -1px; /* 상단을 4px 위로 확장 (3px - 4px = -1px) */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  padding: 6px 8px 2px 8px; /* 상단 패딩을 4px 늘림 (2px + 4px = 6px), 하단은 그대로 */
  background: transparent; /* 배경을 투명하게 설정하여 #topBlackBar가 보이게 함 */
  z-index: 150 !important;
}
#topControls button {
  color: #fff;
  border: none;
  padding: 4px 14px; /* 세로 패딩을 4px로 줄여 버튼 높이 감소 */
  font-size: 16px;
  border-radius: 50px; /* 완전한 알약 모양 (pill shape) */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); /* 그림자 강화 */
  transition: all 0.2s ease; /* 부드러운 호버 효과 */
  overflow: hidden; /* 내용이 모서리를 벗어나지 않도록 */
  min-width: 70px; /* 버튼 최소 너비 설정 */
  position: relative;
  z-index: 1;
  transform-style: preserve-3d; /* 3D 효과 */
}
#topControls button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  box-shadow: none; /* 내부 테두리 제거 */
  z-index: -1;
}
#topControls button:hover {
  transform: translateY(-1px); /* 호버 시 약간 위로 이동 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35); /* 호버 시 그림자 더 강화 */
  filter: brightness(1.1); /* 호버 시 약간 밝아지는 효과 */
}

#topControls button:active {
  transform: translateY(1px); /* 클릭 시 약간 아래로 이동 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 클릭 시 그림자 약화 */
  filter: brightness(0.95); /* 클릭 시 약간 어두워지는 효과 */
}

#topControls .start-btn {
  background: #2f2f2f; /* 8% 더 어둡게 조정 */
  color: #e6e6e6; /* 흰색을 10% 어둡게 조정 */
  border-radius: 20px; /* START 버튼 모서리 완전히 둥글게 */
  overflow: hidden;
  /* transform: translateX(-6px); /* START 버튼만 좌측으로 6px 이동 */ */
}
#topControls .pause-btn {
  background: #2f2f2f; /* 8% 더 어둡게 조정 */
  color: #e6e6e6; /* 흰색을 10% 어둡게 조정 */
  border-radius: 20px; /* PAUSE 버튼 모서리 완전히 둥글게 */
  overflow: hidden;
}
#topControls .stop-btn {
  background: #2f2f2f; /* 8% 더 어둡게 조정 */
  color: #e6e6e6; /* 흰색을 10% 어둡게 조정 */
  border-radius: 20px; /* STOP 버튼 모서리 완전히 둥글게 */
  overflow: hidden;
  /* transform: translateX(6px); /* STOP 버튼만 우측으로 6px 이동 */ */
}

/* 볼륨 버튼: 배경/테두리 없음, 오른쪽 상단 끝에 고정 */
#volumeBtn.volume-btn {
  position: fixed;
  top: 10px;
  right: 15px; /* 우측으로 총 9px 이동 (24px → 15px) */
  background: transparent !important;
  border: none !important;
  color: #fff;
  font-size: 18px;
  padding: 0 6px;
  z-index: 150 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: none;
}
#volumeBtn.volume-btn:hover,
#volumeBtn.volume-btn:active,
#volumeBtn.volume-btn:focus {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 드롭다운 버튼 스타일 */
#sentenceDropdown {
  position: fixed;
  top: -19px; /* y축 위쪽으로 2px 더 올림 (-17px → -19px) */
  left: -4px; /* x축 좌측으로 5px 더 이동 (1px → -4px) */
  z-index: 1999; /* 최상위 레이어로 설정 */
  display: flex;
  align-items: center;
}

#dropdownBtn {
  background: transparent !important; /* 배경 제거 */
  border: none !important; /* 테두리 제거 */
  color: #00c853; /* 녹색으로 변경 */
  font-size: 47px !important; /* 39px에서 20% 증가 = 약 47px */
  padding: 5px 12px;
  cursor: pointer;
  outline: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px; /* 57px에서 20% 증가 = 약 68px */
  min-height: 68px; /* 57px에서 20% 증가 = 약 68px */
  box-shadow: none !important; /* 그림자 제거 */
  user-select: none; /* 텍스트 선택 방지 */
  -webkit-tap-highlight-color: transparent; /* 모바일 터치 하이라이트 제거 */
}

#dropdownBtn:hover,
#dropdownBtn:active,
#dropdownBtn:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #00c853; /* 녹색으로 변경 */
}

/* 문장 목록 컨테이너 스타일 */
#sentenceList {
  display: none;  position: absolute;  top: 95px; /* 메뉴 아이콘 하단에서 30px 여백 확보 */
  left: -5px; /* 전체 문장 목록을 왼쪽으로 5px 이동 */
  background-color: #1e1e1e;  /* VS Code 바탕색으로 변경 */
  max-height: calc(100vh - 134px); /* 상단 95px + 하단 39px의 여백을 제외한 높이 (56px 확장) */
  overflow-y: scroll; /* auto 대신 항상 스크롤바 표시 */  -webkit-overflow-scrolling: touch; /* 모바일 스크롤 개선 */
  width: 590px; /* 약간 더 넓힘 */
  border-radius: 4px;
  z-index: 20000; /* 미디어창보다 높은 z-index 설정 */
  scrollbar-width: auto;
  scrollbar-color: #666 #222;  overscroll-behavior: contain; /* 스크롤 중 부모 요소 스크롤 방지 */  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  padding-top: 15px; /* 내부 상단 여백 15px (외부 여백은 이미 top 속성으로 확보) */
  padding-bottom: 15px; /* 내부 하단 여백 15px */
}

/* 드롭다운 메뉴 하단 검은색 배경 - 미디어 영역 가리기 */
#sentenceList::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 39px; /* 하단 39px 영역을 검은색으로 덮음 (56px 줄임) */
  background-color: #000000;
  z-index: 19999; /* 드롭다운보다 살짝 낮지만 미디어보다는 높게 */
  pointer-events: none; /* 클릭 이벤트 차단 방지 */
  transition: none !important; /* 즉시 사라지도록 트랜지션 제거 */
}

/* 스크롤바 스타일 */
.sentence-list::-webkit-scrollbar {
  width: 12px;
}

.sentence-list::-webkit-scrollbar-track {
  background: #222;
}

.sentence-list::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 6px;
  border: 2px solid #222;
}

/* 문장 목록 아이템 스타일 */
.sentence-item {  color: #e5e5e5;
  padding: 3px 7px; /* 좌측 패딩을 5px 줄여서 전체 문장을 왼쪽으로 이동 */
  cursor: pointer;
  text-align: left;
  font-size: 17.1px; /* 기존 크기의 95%로 줄임 (18px의 95% = 17.1px) */
  /* border-bottom 제거: 문장 사이의 하얀 실선 제거 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  line-height: 1.4; /* 줄 간격을 1.2에서 1.4로 늘림 */
  margin-bottom: 10px; /* 기본 간격을 10px로 설정 */
  font-family: Arial, 'Malgun Gothic', 'Nanum Gothic', sans-serif;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  touch-action: manipulation;
}

.sentence-item:active, .sentence-text:active, .sentence-number:active,
.sentence-item:focus, .sentence-text:focus, .sentence-number:focus {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 홀수 문장(의문문)에 대한 스타일 - 배경색 제거 */
.question-sentence {
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #d9d9d9 !important; /* 의문문장만 15% 어두운 흰색 */
  /* text-shadow 등 모든 효과 제거 */
}

/* 짝수 번호 문장(답변)에 아래 여백 추가 - 대화 쌍 구분용 */
.answer-sentence {
  margin-bottom: 35px !important; /* 기본 10px에서 크게 증가한 35px로 설정하고 !important 추가 */
  padding-bottom: 5px; /* 텍스트 아래 여백 유지 */
}

.sentence-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px; /* hover 상태에서도 둥글게 모서리 유지 */
}

/* 홀수/짝수 문장 스타일 구분 */
.sentence-item.question-sentence {
  border-radius: 3px;
  /* text-shadow 등 모든 효과 제거 */
}

/* 문장 번호 스타일 */
.sentence-number {
  display: inline-block;
  min-width: 70px; /* 터치 영역 확대: 40px → 70px (30px 증가) */
  margin-left: 10px; /* 번호를 좌측으로 3px 이동 (13px에서 10px로 변경) */
  margin-right: -35px; /* 문장 터치 영역 축소: -5px → -35px (30px 더 축소) */
  font-weight: bold;
  color: #cccccc !important; /* 20% 어두운 흰색 */
  font-size: 18.5px; /* 기존 17.96px의 103% */
  background: transparent !important;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  touch-action: manipulation;
  padding-right: 30px; /* 우측 패딩으로 터치 영역 확장 */
}

.sentence-item:hover .sentence-number {
  background: transparent !important;
}

/* 10번부터 96번까지 두 자리 수 번호만 좌측으로 3px 이동 */
.sentence-number[data-number^="1"],
.sentence-number[data-number^="2"],
.sentence-number[data-number^="3"],
.sentence-number[data-number^="4"],
.sentence-number[data-number^="5"],
.sentence-number[data-number^="6"],
.sentence-number[data-number^="7"],
.sentence-number[data-number^="8"],
.sentence-number[data-number^="9"] {
  margin-left: 10px !important; /* 13px에서 3px 좌측으로 이동 */
}

#sentenceImageContainer {
  position: fixed;
  top: 34px; /* 4px 위로 올림 (1px 더 올림) */
  left: 0; /* 화면 왼쪽 끝에서 시작 */
  width: 100vw; /* 화면 전체 너비 */
  z-index: 15; /* 미디어 표시를 위한 설정 */
  display: none; /* 기본적으로 숨김 */
  border: 0 none transparent !important;
  box-shadow: none !important;
  outline: 0 none transparent !important;
  background-color: black !important; /* 페이드아웃 시 검은색 배경 */
}

#sentenceImage {
  width: 100vw !important; /* 화면 전체 너비 강제 설정 */
  max-width: none !important; /* max-width 제한 제거 */
  max-height: calc(20vh - 17px) !important; /* 미디어 내용이 적당히 보이도록 조정 - 하단을 17px 위로 올림 */
  border-radius: 0 !important; /* 모서리 둥글기 완전 제거 */
  box-shadow: none !important; /* 그림자 완전 제거 */
  border: 0 none transparent !important; /* 테두리 완전 제거 */
  outline: 0 none transparent !important; /* 외곽선 완전 제거 */
  background-color: transparent !important; /* 배경색 투명 */
  transform: translateY(-100%); /* 초기 위치: 위로 완전히 숨김 */
  opacity: 1; /* 초기 투명도를 1로 설정 (슬라이드 애니메이션용) */
  object-fit: cover !important; /* 비율 유지하며 컨테이너에 맞춤 - 동영상과 동일하게 cover로 변경 */
  object-position: center -45px !important; /* 상단 45px 크롭 - 동영상과 동일하게 설정 */
  transition: transform 3s ease-out; /* 슬라이드 애니메이션용 트랜지션 */
}

/* 이미지 슬라이드 애니메이션 클래스 */
#sentenceImage.slide-hidden {
  transform: translateY(-100%) !important; /* 초기 상태: 위로 숨김 */
  transition: transform 3s ease-out !important; /* 슬라이드 애니메이션용 트랜지션 */
}

#sentenceImage.show {
  transform: translateY(0) !important; /* 슬라이드 다운으로 원래 위치로 */
  transition: transform 3s ease-out !important; /* 슬라이드 애니메이션용 트랜지션 */
}

/* 동영상 요소에 대한 스타일 */
#sentenceVideo {
  max-width: 100.24vw; /* 화면 너비의 100.24%를 넘지 않도록 설정 */
  max-height: calc(20vh - 17px) !important; /* 미디어 내용이 적당히 보이도록 조정 - 하단을 17px 위로 올림 */
  border-radius: 0 !important; /* 모서리 둥글기 완전 제거 */
  box-shadow: none !important; /* 그림자 완전 제거 */
  border: 0 none transparent !important; /* 테두리 완전 제거 */
  outline: 0 none transparent !important; /* 외곽선 완전 제거 */
  background-color: transparent !important; /* 배경색 투명 */
  transform: translateY(-100%); /* 초기 위치: 위로 완전히 숨김 */
  opacity: 1; /* 초기 투명도를 1로 설정 (슬라이드 애니메이션용) */
  transition: transform 3s ease-out; /* 슬라이드 애니메이션용 트랜지션 */
  object-fit: cover !important; /* 비율 유지하며 컨테이너에 맞춤 */
  object-position: center -45px !important; /* 상단 45px 크롭 (윗부분을 -45px 위치로 이동) */
}

/* 비디오 슬라이드 애니메이션 클래스 */
#sentenceVideo.slide-hidden {
  transform: translateY(-100%) !important; /* 초기 상태: 위로 숨김 */
  transition: transform 3s ease-out !important; /* 슬라이드 애니메이션용 트랜지션 */
}

#sentenceVideo.show {
  transform: translateY(0) !important; /* 슬라이드 다운으로 원래 위치로 */
  transition: transform 3s ease-out !important; /* 슬라이드 애니메이션용 트랜지션 */
}

/* 동영상 컨트롤러 바의 검은색 반투명 배경만 투명하게 처리 */
#sentenceVideo::-webkit-media-controls-panel {
  background: transparent !important;
  background-color: transparent !important;
}

#sentenceVideo::-webkit-media-controls-enclosure {
  background: transparent !important;
  background-color: transparent !important;
}

/* 동영상 컨트롤러 바(타임라인) 숨기기 */
#sentenceVideo::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* 동영상 중앙 플레이 버튼 숨기기 */
#sentenceVideo::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-overlay-play-button {
  opacity: 0 !important; /* 버튼 완전히 숨김 */
  visibility: hidden !important; /* 버튼 숨김 */
  display: none !important; /* 버튼 요소 자체를 숨김 */
  pointer-events: none !important; /* 클릭 이벤트 차단 */
}

/* 동영상 컨트롤러 요소들이 제대로 보이고 작동하도록 추가 스타일 */
#sentenceVideo::-webkit-media-controls,
video::-webkit-media-controls {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 동영상 자체를 클릭했을 때도 재생/일시정지 가능하도록 설정 */
#sentenceVideo, video {
  cursor: pointer !important;
}

/* 하단 이미지/동영상 컨테이너 스타일 */
#bottomImageContainer {
  position: fixed;
  bottom: -150vh; /* 초기 위치: 화면 밖으로 완전히 숨김 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 15; /* 미디어 표시를 위한 설정 */
  display: none; /* 기본적으로 숨김 */
  border: 0 none transparent !important;
  box-shadow: none !important;
  outline: 0 none transparent !important;
}

#bottomImage {
  max-width: 100.24vw; /* 화면 너비의 100.24%를 넘지 않도록 설정 */
  max-height: 100vh; /* 화면 높이의 100%까지 허용하도록 수정 */
  border-radius: 0 !important; /* 모서리 둥글기 완전 제거 */
  box-shadow: none !important; /* 그림자 완전 제거 */
  border: 0 none transparent !important; /* 테두리 완전 제거 */
  outline: 0 none transparent !important; /* 외곽선 완전 제거 */
  background-color: transparent !important; /* 배경색 투명 */
  opacity: 0; /* 초기 투명도를 0으로 설정 */
  object-fit: cover !important; /* 비율 유지하며 컨테이너에 맞춤 */
  object-position: center -90px !important; /* 윗부분 90px 크롭 - 이미지를 더 위로 강제 이동 */
}

/* 하단 이미지가 나타날 때의 애니메이션 클래스 */
#bottomImage.show {
  opacity: 1; /* 완전 불투명으로 변경 */
}

/* 하단 동영상 요소에 대한 스타일 */
#bottomVideo {
  max-width: 100.24vw; /* 화면 너비의 100.24%를 넘지 않도록 설정 */
  max-height: 100vh; /* 화면 높이의 100%까지 허용하도록 수정 */
  border-radius: 0 !important; /* 모서리 둥글기 완전 제거 */
  box-shadow: none !important; /* 그림자 완전 제거 */
  border: 0 none transparent !important; /* 테두리 완전 제거 */
  outline: 0 none transparent !important; /* 외곽선 완전 제거 */
  background-color: transparent !important; /* 배경색 투명 */
  opacity: 0; /* 초기 투명도를 0으로 설정 */
  object-fit: cover !important; /* 비율 유지하며 컨테이너에 맞춤 */
  object-position: center -80px !important; /* 윗부분 80px 크롭 (상단을 -80px 위치로 이동) */
}

.sentence-text {
  font-size: 19.5px; /* 기존 18.5px에서 1px 증가 */
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  touch-action: manipulation;
}

/* Game text overlay - appears above all images */
.game-text-overlay, #gameTextOverlay {
  position: relative;
  z-index: 999;
}

.dropdown-reading-bg {
  background: rgba(30, 80, 220, 0.32) !important; /* 진한 파랑, 투명도 32% */
  border-radius: 6px;
  transition: background 0.2s;
}

.question-sentence, .sentence-item.question-sentence, .sentence-text, .sentence-item span {
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* 모든 비디오 요소의 컨트롤 3개 메뉴 완전 제거 */
video::-webkit-media-controls-overflow-button,
video::-webkit-media-controls-overflow-menu-button,
video::-internal-media-controls-overflow-button,
#sentenceVideo::-webkit-media-controls-overflow-button,
#sentenceVideo::-webkit-media-controls-overflow-menu-button,
#sentenceVideo::-internal-media-controls-overflow-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  right: -9999px !important;
}

/* Firefox용 추가 스타일 */
video::-moz-media-controls-overflow-button {
  display: none !important;
}

/* Edge용 추가 스타일 */
video::-ms-media-controls-overflow-button {
  display: none !important;
}

/* 배경 미디어 컨테이너 스타일 - 회색 배경 영역과 정확히 일치 */
#backgroundMediaContainer {
  position: fixed;
  top: calc(35px + 20vh - 8px) !important; /* 상단을 8px 올림 (1px 내림) */
  left: 0;
  width: 100vw;
  height: calc(60vh - 166px + 7px + 25px + 30px + 27px + 10px + 8px + 3px) !important; /* 하단을 3px 더 내림 */
  z-index: 10;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  pointer-events: none;
}

#backgroundMediaContainer img,
#backgroundMediaContainer video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: none !important;
  outline: none !important;
  object-position: center !important;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

#backgroundMediaContainer img.fade-in,
#backgroundMediaContainer video.fade-in {
  opacity: 1;
}

#backgroundMediaContainer img.fade-out,
#backgroundMediaContainer video.fade-out {
  opacity: 0;
}

/* PC 화면에서 미디어창 가로폭 100% 설정 */
@media (min-width: 768px) {
  #sentenceImageContainer {
    width: 100vw !important;
    left: 0 !important;
  }
  
  #sentenceImage {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  
  #sentenceVideo {  
    width: 100vw !important;
    max-width: 100vw !important;
  }
}