@charset "utf-8";
/* 
─────────────────────────────
 파일 인코딩 지정
─────────────────────────────
이 CSS 파일이 UTF-8 인코딩으로 작성되었음을 선언.
(한글 폰트 이름이나 주석이 깨지지 않도록 하는 선언)
*/


/*─────────────────────────────
  도트 폰트 불러오기
─────────────────────────────*/
@font-face {
    font-family: 'SchoolSafetyRoundedSmile'; /* CSS에서 사용할 폰트 이름 지정 */
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-R.woff2') format('woff2'); 
    /* SchoolSafetyRoundedSmile 폰트를 불러옴 (woff2 형식) */
    font-weight: normal;  /* 기본 굵기 */
    font-style: normal;   /* 일반 스타일 (기울임 없음) */
}


/*─────────────────────────────
  CSS 변수(테마 컬러 및 폰트) 설정
─────────────────────────────*/
:root {
	--font: 'SchoolSafetyRoundedSmile'; /* 전역 폰트 변수 */
	--color: #FBF2F2;                     /* 글자 색상 */
	--background: #E6494D;                 /* 배경 색상 */
}


/*─────────────────────────────
  전광판(상단 고정 영역) 위치 설정
─────────────────────────────*/
.bottom_speaker {
	position: fixed;
	top: 12px;            /* ✅ 상단에 고정 */
	left: 0;
	width: 100%;
	height: 30px;
	line-height: 100%;
	display: flex;
	align-items: center;
	background: transparent; /* 필요 시 배경 투명 처리 */
	z-index: 9999;            /* ✅ 다른 요소 위에 표시되도록 */
}


/*─────────────────────────────
  전광판 내부 모든 텍스트 기본 설정
─────────────────────────────*/
.bottom_speaker * {
  font-family: var(--font);
  font-size: 17px;
  line-height: 100%;
  color: var(--color); /* ✅ 원래 글자색 유지 */
  text-shadow:
    1px 1px 0 #E6494D,
   -1px 1px 0 #E6494D,
    1px -1px 0 #E6494D,
   -1px -1px 0 #E6494D; /* ✅ 흰색 테두리 효과 (글자색 유지됨) */
}


/*─────────────────────────────
  전광판 제목(.title)과 본문(.content) 스타일
─────────────────────────────*/
.bottom_speaker .title {
	background-color: var(--background);
	border-radius: 70%;                  /* 완전한 원형 배경 */
	padding: 5px;                        /* 안쪽 여백 */
	color: var(--color);
}
.bottom_speaker .content {
	margin-right: 50px; /* 오른쪽 여백 */
	display: inline-block; /* 인라인 요소처럼 가로로 배치 */
}


/*─────────────────────────────
  전광판 입력칸(form) 및 버튼 디자인
─────────────────────────────*/
#contentForm button {
  background-color: var(--background);   /* 기본 배경색 */
  color: var(--color);                   /* 기본 글자색 */
  border: 2px solid #E6494D;             /* 버튼 테두리 */
  border-radius: 6px;
  padding: 3px 8px;
  font-family: 'Pretendard', sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease; /* 부드러운 색상 전환 */
  height: 30px;                          /* ✅ 버튼 높이 60px로 고정 */
  box-sizing: border-box;                /* ✅ 테두리 포함해 정확히 60px 유지 */
}

#contentForm {
	display: flex;             /* 입력창과 버튼을 가로로 정렬 */
	justify-content: center;   /* 중앙 정렬 */
}

/* speaker 영역 색상 복원 */
.speaker, .speaker-wrap, #speaker {
  background-color: #fff !important;  /* 원래 밝은 배경이었다면 */
  color: #000 !important;              /* 글자는 검정 */
}

/* 만약 원래 반대였다면 (어두운 배경에 밝은 글자) */
.speaker.dark, .speaker-wrap.dark, #speaker.dark {
  background-color: #000 !important;
  color: #fff !important;
}

/* 상속된 blend/invert 효과 초기화 */
.speaker, .speaker-wrap, #speaker {
  mix-blend-mode: normal !important;
  filter: none !important;
}