/* =============================================== */
/* ✅ 오니훈련소 CSS 스타일 가이드 - 주요 속성 설명 */
/* =============================================== */

/* 🎨 색상 관련
   - background-color : 배경색 설정
   - color            : 텍스트 색상
   - border-color     : 테두리 색상
   - box-shadow       : 그림자 효과 (부드러운 입체감 부여)
*/

/* 📏 크기 및 간격
   - width / height        : 요소의 너비 / 높이 설정
   - max-width / max-height: 최대 너비 / 높이 제한
   - padding               : 안쪽 여백 (내용과 테두리 사이)
   - margin / margin-top   : 바깥 여백 (요소 간 간격 조절)
   - gap                   : flex/grid 요소 간 간격 (간단한 spacing)
*/

/* 🧱 레이아웃 및 정렬
   - display: flex / grid       : 레이아웃 구성 (수평/수직 정렬 등)
   - justify-content / align-items : 자식 요소 정렬 방식
   - flex-direction             : flex 흐름 방향 (row/column 등)
   - position / top / left / right / bottom : 요소 위치 지정
   - transform: translateX(-50%) : 요소를 정확히 가운데 정렬할 때 사용
*/

/* ✍️ 폰트 및 텍스트
   - font-size     : 글자 크기
   - font-weight   : 글자 굵기
   - text-align    : 글자 정렬
   - line-height   : 줄 간격
   - white-space   : 줄바꿈/공백 유지 여부 설정
*/

/* 🧭 반응형 대응
   - @media (max-width: ...) : 화면 크기에 따라 스타일 변경
   - flex-wrap               : 화면 좁을 때 줄바꿈 허용
*/

/* ✨ 상호작용 효과
   - transition      : 애니메이션 효과 부드럽게
   - hover           : 마우스 올렸을 때 스타일 변화
   - cursor: pointer : 버튼처럼 클릭 가능한 느낌 부여
   - animation       : bounce, shake, fadeIn 등 시각적 피드백 효과
*/

/* 🔒 폼 요소
   - border-radius     : 테두리 둥글게
   - outline           : 포커스 테두리 제거
   - appearance: none  : 체크박스 등 기본 스타일 제거 후 커스텀
   - ::after           : 체크 표시 등 가상요소 추가

*/

/* ☑️ 기타 자주 쓰인 속성들
   - box-sizing: border-box : padding 포함한 총 크기 계산
   - z-index              : 요소 쌓임 순서 지정
   - overflow-y: auto     : 스크롤 필요 시만 표시
   - min-height / min-width : 최소 크기 설정
*/




/* =============================================== */
/* ✅ 기본 설정 - 전체 페이지 및 텍스트 스타일     */
/* =============================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

body { /* 전체 페이지 기본 설정 */
  font-family: 'Noto Sans KR', sans-serif; /* 부드럽고 한글 친화적인 서체 */
  margin: 0;
  padding: 0;
  height: 100vh;
  font-size: 18px; /* 전체 기본 글자 크기 */
  background: #f0f2f5; /* 은은한 회색 배경 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title { /* 상단 타이틀 텍스트 (.title) */
  font-size: 2.2em;
  margin: 30px 0 10px;
}

/* ✅ 공통 스크롤바 스타일 (WebKit 계열 브라우저 전용) */
.scrollable::-webkit-scrollbar {
  width: 6px;               /* 스크롤 너비 */
}

.scrollable::-webkit-scrollbar-track {
  background: #f0f0f0;      /* 트랙 배경색 */
  border-radius: 6px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #ccc;         /* 스크롤 손잡이 색 */
  border-radius: 6px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: #999;         /* 호버 시 진하게 */
}

/* Firefox 전용 */
.scrollable {
  scrollbar-width: thin;
  scrollbar-color: #ccc #f0f0f0;
}


/* =============================================== */
/* ✅ 전체 레이아웃 - 퀴즈 구조와 콘텐츠 행        */
/* =============================================== */

#content-row { /* 메뉴 버튼 + 메인 화면/퀴즈 화면을 나란히 배치 */
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 20px; /* 좌우 요소 간 간격 */
}


/* =============================================== */
/* ✅ 메뉴 버튼 (좌측 상단, 난이도 & 통계 열기)    */
/* =============================================== */

.menu-button { /* ☰ 메뉴 토글 버튼 스타일 */
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  z-index: 10;
}

.menu-button:hover { /* 마우스 오버 시 투명도 변화 */
  opacity: 0.7;
}


/* =============================================== */
/* ✅ #quiz-wrapper : 퀴즈 전체 영역 래퍼         */
/* =============================================== */

#quiz-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  box-sizing: border-box;
}


/* =============================================== */
/* ✅ .review-button : 오답 복습 버튼 영역         */
/* =============================================== */

.review-button { /* 오답 복습 버튼을 단독 배치하는 영역 */
  margin-bottom: 12px;
  text-align: center;
}

.review-button button { /* 오답 복습 버튼 자체 스타일 */
  padding: 8px 12px;
  font-size: 14px;
  background-color: #ff7f50; /* 코랄 계열 */
  color: white;
  border: none;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.review-button button:hover { /* hover 시 색상/그림자 변화 */
  background-color: #ff5722;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* =============================================== */
/* ✅ #difficulty-panel : 난이도 선택 패널        */
/* =============================================== */

#difficulty-panel { /* 난이도/문제 수 설정 왼쪽 패널 */
  flex-shrink: 0;
  width: 250px;
  padding: 20px;
  box-sizing: border-box;
  background: #fffef8; /* 약간 크림색 배경 */
  display: none; /* 기본적으로는 숨김 처리 */
  flex-direction: column;
  height: 540px;
  align-items: center;
  position: relative; /* ✅ vocab-panel의 기준이 됨 */
  overflow-X: none;             /* 가로 스크롤 자동 */
  overflow: hidden;                        /* 넘침 숨김 */
}

#difficulty-panel button { /* 패널 내 버튼 공통 스타일 */
  font-size: 14px;
  padding: 6px 10px;
  border: none;
  background-color: #ff7f50; /* 기본 주황 계열 */
  color: white;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#difficulty-panel button:hover { /* hover 시 색상/애니메이션 */
  background-color: #ff5722;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.difficulty-buttons { /* 버튼+체크박스 묶음 전체 컨테이너 */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.difficulty-option { /* 개별 난이도 (체크박스 + 버튼 + 진행률) */
  display: flex;
  align-items: center;
  gap: 4px;
}

.difficulty-buttons label { /* 체크박스 왼쪽 마진 조정 */
  margin-right: 4px;
}

.difficulty-buttons button { /* 난이도 버튼 사이 여백 */
  margin-right: 10px;
}


/* =============================================== */
/* ✅ 메인/퀴즈 화면 공통 스타일 영역              */
/* =============================================== */

#main-screen,
#quiz-container { /* 메인 소개 화면 & 퀴즈 진행 화면 공통 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 500px;
  padding: 30px;
  min-height: 480px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

#main-screen { /* 메인 화면 전용: 중앙 정렬 */
  justify-content: center;
}


/* =============================================== */
/* ✅ .main-description : 메인 설명 박스            */
/* =============================================== */

.main-description { /* 메인 화면 중앙 설명 영역 */
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  background: #fffef8;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.main-description h2 { /* 제목 */
  font-size: 24px;
  margin-bottom: 8px;
}

.main-description h3 { /* 소제목 */
  font-size: 20px;
  margin: 12px 0 8px;
}

.main-description p { /* 일반 문단 */
  margin-bottom: 6px;
}

.main-description ol { /* 사용법 리스트 */
  text-align: left;
  margin-bottom: 120px;
  max-width: 400px;
  padding-left: 40px;
}


/* =============================================== */
/* ✅ 문제 영역: 안내 텍스트, 문제, 선택지          */
/* =============================================== */

.instruction { /* 『 』안의 뜻을 맞추라는 안내 텍스트 */
  font-size: 20px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

#question { /* 실제 문제 문장 텍스트 */
  font-size: 24px;
  margin-top: 20px;
  min-height: 80px; /* 해설로 치환 시 높이 유지 */
  text-align: center;
}


/* =============================================== */
/* ✅ #choices : 선택지 버튼 영역                   */
/* =============================================== */

#choices {
  display: flex;           /* 가로 정렬 */
  flex-wrap: wrap;         /* 줄바꿈 허용 (반응형) */
  justify-content: center; /* 가운데 정렬 */
  gap: 12px;               /* 버튼 간 간격 */
}

#choices button { /* 선택지 버튼 스타일 */
  min-width: 120px;
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  background-color: #ff7f50; /* 주황색 */
  color: white;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#choices button:hover { /* 마우스 오버 시 */
  background-color: #ff5722;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* =============================================== */
/* ✅ .button-area : 공통 버튼 영역 (홈, 다음문제 등) */
/* =============================================== */

.button-area { /* 버튼 영역 위치 고정 (하단 중앙) */
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 10px;
}

.button-area button { /* 홈으로 / 다음문제 버튼 스타일 */
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  background-color: #ff7f50;
  color: white;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.button-area button:hover {
  background-color: #ff5722;
  transform: translateY(-2px);
}


/* =============================================== */
/* ✅ #quiz-header : 진행률 / 정답률 / 현재단계 표시 */
/* =============================================== */

#quiz-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
  position: sticky;        /* 상단 고정 */
  top: 0;
  background: white;
  padding: 10px 0;
  z-index: 5;
  border-bottom: 1px solid #eee;
}

.quiz-info { /* 각 정보 박스 스타일 (진행률, 정답률 등) */
  font-size: 14px;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}


/* =============================================== */
/* ✅ .translation : 해설 문장 표시 영역           */
/* =============================================== */

.translation {
  font-size: 15px;
  text-align: left;
  margin: 2%;
  line-height: 1.4;          /* 줄 간격 */
  white-space: pre-wrap;     /* 줄바꿈 유지 */
  font-weight: normal;
}


/* =============================================== */
/* ✅ 강조용 한자 스타일               */
/* =============================================== */


.highlight-kanji {
  font-weight: bold;             /* 굵게 */
  text-decoration: underline;   /* 밑줄 */
  color: #d32f2f;                /* 눈에 띄는 빨간 계열 색상 */
}

.underline {
  text-decoration: underline;
  font-weight: bold;
}


/* =============================================== */
/* ✅ 후리가나 (ruby rt 태그 전용)                 */
/* =============================================== */

ruby rt { /* 후리가나 글씨 스타일 */
  font-size: 12px;
  color: #555;
}


/* =============================================== */
/* ✅ 반응형 대응 : 모바일 너비 조정 (600px 이하)  */
/* =============================================== */

@media (max-width: 600px) {
  #quiz-wrapper {
    flex-direction: column;
    align-items: center;
  }

  #main-screen,
  #quiz-container {
    width: 90%; /* 화면 너비에 맞게 조정 */
  }

  .title {
    font-size: 1.8em; /* 타이틀도 살짝 축소 */
  }
}


/* =============================================== */
/* ✅ 애니메이션 효과: 정답 bounce / 오답 shake     */
/* =============================================== */

@keyframes bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.bounce { /* 정답 효과로 사용 */
  animation: bounce 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

.shake { /* 오답 효과로 사용 */
  animation: shake 0.4s ease;
}


/* =============================================== */
/* ✅ #stats-panel : 오른쪽 통계 패널               */
/* =============================================== */

#stats-panel { /* 학습 통계 + 오답 복습 패널 */
  flex-shrink: 0;
  width: 250px;
  padding: 20px;
  box-sizing: border-box;
  background: #fffef8;
  display: none; /* 기본 비표시 */
  flex-direction: column;
  height: 540px;
  align-items: center;
  overflow-y: none;               /* 가로 스크롤 추가 */
  overflow-y: auto;               /* 세로 스크롤 추가 */
  /* 공통 스크롤 스타일 */
  scrollbar-width: thin;
  scrollbar-color: #ccc #f0f0f0;
}


/* =============================================== */
/* ✅ .stats-buttons : 통계 패널 내부 버튼 묶음      */
/* =============================================== */

.stats-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}


/* =============================================== */
/* ✅ #toggle-stats-btn : 통계 보기 토글 버튼        */
/* =============================================== */

#toggle-stats-btn {
  font-size: 14px;
  padding: 6px 10px;
  background-color: #ff7f50;
  color: white;
  border: none;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#toggle-stats-btn:hover {
  background-color: #ff5722;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* =============================================== */
/* ✅ #reset-stats-btn : 통계 리셋 버튼              */
/* =============================================== */

#reset-stats-btn {
  font-size: 14px;
  padding: 6px 10px;
  background-color: #ff7f50;
  color: white;
  border: none;
  border-radius: 8px;
  margin-left: 8px;
  transition: all 0.2s ease;
}

#reset-stats-btn:hover {
  background-color: #ff5722;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* =============================================== */
/* ✅ #stats-list : 통계 데이터 텍스트 목록          */
/* =============================================== */

#stats-list {
  font-size: 14px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #fffdf0;
  border-radius: 8px;
  max-height: 100px;
  overflow-y: auto;
  width: 90%;
  min-height: 60px;
}


/* =============================================== */
/* ✅ .stats-button : 우측 상단 통계창 열기 버튼     */
/* =============================================== */

.stats-button { /* 📊 버튼 */
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  z-index: 10;
}

.stats-button:hover {
  opacity: 0.7;
}


/* =============================================== */
/* ✅ .difficulty-btn : 난이도 단독 시작 버튼        */
/* =============================================== */

.difficulty-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background-color: #ff7f50;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.difficulty-btn:hover {
  background-color: #e46035;
}


/* =============================================== */
/* ✅ .vocab-btn : 단어장 버튼        */
/* =============================================== */

.vocab-btn {
  padding: 6px 12px;
  margin-left: -5px;
  border-radius: 8px;
  border: none;
  background-color: #ff7f50;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.vocab-btn:hover {
  background-color: #e46035;
}


/* =============================================== */
/* ✅ 반응형 대응 (768px 이하)                       */
/* =============================================== */

@media (max-width: 768px) {
  #quiz-wrapper {
    flex-direction: column;
    align-items: center;
  }

  #difficulty-panel {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  #quiz-container {
    width: 100%;
  }

  .menu-button,
  .stats-toggle-button {
    position: fixed;
    top: 12px;
    font-size: 22px;
    z-index: 100;
  }

  .menu-button {
    left: 12px;
  }

  .stats-toggle-button {
    right: 12px;
  }

  #stats-chart {
    width: 90% !important;
    min-height: 100px !important;
    max-height: 220px; /* 차트 높이 제한 */
  }

  .button-area {
    flex-direction: column;
    gap: 10px;
  }

  #score,
  #progress {
    text-align: center;
    font-size: 16px;
  }

  #stats-panel .stats-buttons {
    flex-direction: column;
    gap: 8px;
  }
}

/* =============================================== */
/* ✅ 레벨별 단어장 패널 전체 스타일               */
/* =============================================== */

#vocab-panel {
  display: flex;                            /* 기본 상태는 숨김 (버튼 클릭 시 보여짐) */
  flex-direction: column; /* ✅ 자식 요소를 세로로 나열 */
  position: absolute;                       /* 부모 요소(difficulty-panel)를 기준으로 위치 설정 */
  top: 0;                                   /* 부모의 최상단에 배치 */
  left: 0;                                  /* 부모의 왼쪽에 정렬 */
  width: 100%;                              /* 부모 너비 전체 사용 */
  height: 100%;                             /* 부모 높이 전체 사용 */
  background: #fffef8;
  z-index: 10;                              /* 부모 위에 올라오도록 설정 */
  padding: 16px;                            /* 내부 여백 설정 */
  box-sizing: border-box;                   /* padding을 포함한 크기로 계산 */
  border-radius: 8px;                       /* 모서리를 부드럽게 */
  box-shadow: 0 0 10px rgba(0,0,0,0.1);     /* 전체에 흐릿한 그림자 효과 부여 */
}


/* =============================================== */
/* ✅ 단어장 상단 제목 + 닫기 버튼 영역            */
/* =============================================== */

#vocab-header {
  display: flex;                            /* 가로 정렬 플렉스박스 */
  justify-content: space-between;          /* 제목 왼쪽 / 닫기 버튼 오른쪽 배치 */
  align-items: center;                     /* 수직 중앙 정렬 */
  margin-bottom: 12px;                     /* 아래에 간격 부여 */
}

#vocab-title {
  font-size: 18px;                         /* 제목 텍스트 크기 */
  margin: 0;                               /* 기본 마진 제거 */
  color: #ff7f50;                        /* 오렌지 계열 강조 색상 */
  display: flex;                           /* 내부 요소(이모지 등) 가로 정렬 */
  align-items: center;                     /* 수직 정렬 */
  gap: 6px;                                /* 이모지와 텍스트 사이 간격 */
}

#vocab-count {                             /*  단어 수 표시 스타일 */
  margin-left: 6px;
  padding: 0;
  margin: 0;                               /* 기본 마진 제거 */
  display: flex;                           /* 내부 요소(이모지 등) 가로 정렬 */
  align-items: center;                     /* 수직 정렬 */
  background: none;        /* 배경 제거 */
  color: #fb8c00;           /* 기존과 통일된 오렌지 계열 텍스트 */
  font-size: 14px;
  font-weight: bold;
  border-radius: 0;         /* 둥근 테두리 제거 */
  box-shadow: none;         /* 그림자 제거 */
  display: inline-block;
  line-height: 1.6;
}

#vocab-close-btn {
  font-size: 18px;                         /* 닫기 버튼 텍스트 크기 */
  width: 28px;                             /* 너비 고정 */
  height: 28px;                            /* 높이 고정 */
  border: 1.5px solid #ff4d4f;             /* 진한 빨강 테두리 */
  border-radius: 50%;                      /* 동그란 모양 */
  background: transparent;                 /* 배경 없음 */
  color: #ff4d4f;                          /* 텍스트 빨강 */
  display: flex;                           /* 버튼 내용 정중앙 정렬 */
  justify-content: center;
  align-items: center;
  cursor: pointer;                         /* 손가락 모양 커서 */
  transition: 0.2s ease;                   /* hover 시 부드러운 전환 */
}

#vocab-close-btn:hover {
  background-color: #ff4d4f;               /* 마우스 오버 시 배경색 빨강 */
  color: white;                            /* 텍스트는 흰색으로 반전 */
}


/* =============================================== */
/* ✅ 검색창 + 정렬 버튼 영역                      */
/* =============================================== */

.vocab-controls {
  display: flex;                           /* 검색창 + 버튼을 가로 정렬 */
  align-items: center;                     /* 수직 중앙 정렬 */
  gap: 10px;                               /* 두 요소 사이 간격 */
  margin-bottom: 10px;                     /* 아래 리스트와 간격 */
}

#vocab-search {
  flex-grow: 1;                            /* 남은 공간 전부 사용 */
  padding: 6px 10px;                       /* 입력창 내부 여백 */
  font-size: 14px;                         /* 글자 크기 */
  border-radius: 6px;                      /* 모서리 둥글게 */
  border: 1px solid #ccc;                  /* 연한 테두리 */
  width: 90%;                             /* width 고정 해제 (반응형) */
}

.custom-sort {
  position: relative;                      /* 드롭다운 메뉴 위치 기준 */
  display: inline-block;                   /* 인라인+블록 구조 */
  min-width: 50px;                         /* 최소 너비 설정 */
}

#vocab-sort-toggle {
  font-size: 14px;                         /* 정렬 버튼 텍스트 크기 */
  padding: 4px 8px;                        /* 안쪽 여백 */
  min-width: 40px;                         /* 버튼 최소 크기 */
  max-width: 100px;                        /* 버튼 최대 크기 제한 */
  text-align: center;                      /* 텍스트 중앙 정렬 */
  white-space: nowrap;                     /* 줄바꿈 방지 */
  border: 1px solid #ccc;                  /* 테두리 */
  border-radius: 6px;                      /* 둥근 테두리 */
  background-color: white;                 /* 배경 흰색 */
  cursor: pointer;                         /* 커서 손가락 모양 */
  transition: all 0.2s ease;               /* 전환 효과 */
}

#vocab-sort-options {
  position: absolute;                      /* 기준 기준은 .custom-sort */
  top: 110%;                               /* 아래로 약간 띄움 */
  left: 0;
  width: max-content;                      /* 내용만큼 너비 */
  min-width: 80px;                         /* 최소 너비 확보 */
  background: white;                       /* 배경 흰색 */
  border: 1px solid #ccc;                  /* 테두리 */
  border-radius: 6px;
  list-style: none;                        /* 목록 점 없앰 */
  padding: 4px 0;                          /* 안쪽 여백 */
  margin-top: 4px;
  z-index: 20;                             /* 버튼보다 위에 있도록 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);   /* 그림자 효과 */
}

#vocab-sort-options li {
  font-size: 13px;                         /* 메뉴 항목 글자 크기 */
  padding: 6px 12px;                       /* 위아래 여백 + 좌우 공간 */
  cursor: pointer;                         /* 클릭 가능 커서 */
  white-space: nowrap;                     /* 텍스트 줄바꿈 방지 */
}

#vocab-sort-options li:hover {
  background-color: #f0f0f0;               /* 마우스 오버 시 배경 강조 */
}

.hidden {
  display: none;                           /* 숨겨질 때 클래스 활용 */
}


/* =============================================== */
/* ✅ 단어 리스트 전체 영역                        */
/* =============================================== */

#vocab-list {
  width: 90%;                             /* 너비 전부 사용 */
  max-height: 400px;                       /* 스크롤 제한 높이 */
  overflow-y: auto;                        /* 세로 스크롤 자동 */
  overflow-X: none !important;             /* 가로 스크롤 자동 */
  padding: 10px;                           /* 내부 여백 */
  background: #fffdf0;                     /* 연한 노란 배경 */
  border: 1px solid #ccc;                  /* 테두리 */
  border-radius: 8px;                      /* 둥글게 */
  /* 공통 스크롤 스타일 */
  scrollbar-width: thin;              /* Firefox 대응 */
  scrollbar-color: #ccc #f0f0f0;
}


/* =============================================== */
/* ✅ 단어 리스트 한 줄 스타일                     */
/* =============================================== */

.kanji-fit {
  display: inline-block;                   /* 너비 측정 위해 */
  max-width: 100%;
  text-align: center;
  line-height: 1;
}

.kanji-fit ruby {
  ruby-position: over;                     /* 후리가나 위에 표시 */
  -webkit-ruby-position: over;
  font-size: 16px;                         /* 초기 폰트 크기 */
  line-height: 1.4;
  font-size: inherit;                      /* 상위 폰트 크기 상속 */
}

.kanji-fit rt {
  font-size: 0.7em;                        /* 후리가나 크기 작게 */
  color: #666;                             /* 회색 톤 */
  line-height: 1.2;
  white-space: nowrap;
}

/* =============================================== */
/* ✅ .vocab-row : 단어 1줄 (단어 + 보기 버튼) 영역 */
/* =============================================== */
.vocab-row {
  display: flex;                           /* 단어와 버튼을 가로 배치 */
  height: 40px;                            /* ✅ 줄 높이 고정 */
  justify-content: space-between;         /* 양 끝 정렬 */
  align-items: center;                     /* 수직 정렬 */
  gap: 12px;                               /* 단어와 버튼 사이 간격 */
  padding: 4px 8px;                       /* 내부 여백 */
  margin-bottom: 8px;                      /* 아래쪽 간격 */
  border: 1px solid #ddd;                  /* 외곽선 */
  border-radius: 6px;                      /* 둥근 모서리 */
  border-bottom: 1px dashed #ccc;
  background-color: #fffef8;              /* 단어장 배경과 유사한 색 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);  /* 은은한 그림자 */
  transition: background-color 0.2s;       /* hover 시 부드럽게 변경 */
  overflow: hidden;
}

.vocab-row:hover {
  background-color: #fdf5e6;               /* 마우스 오버 시 살짝 강조 */
}


/* =============================================== */
/* ✅ .vocab-word : 한자/히라가나/가타카나 단어 영역 */
/* =============================================== */
.vocab-word {
  width: 100%;                        /* ✅ 너비 고정 */
  height: 90%;             /* ✅ 높이도 고정 (글자 기준 중앙 정렬 위해) */
  font-size: 18px;                         /* 글자 크기 */
  font-weight: bold;                       /* 굵은 글씨 */
  background-color: #fffef8;                 /* 배경 흰색 */
  padding: 4px 4px;                       /* 여백 */
  box-sizing: border-box;       /* ✅ 패딩 포함한 전체 width 계산 */
  align-items: center;     /* ✅ 수직 중앙 정렬 */
  justify-content: center; /* ✅ 수평 중앙 정렬 */
  white-space: nowrap;                     /* 줄바꿈 방지 */
  overflow: hidden;                        /* 넘침 숨김 */
}


/* =============================================== */
/* ✅ .vocab-popup-btn : 팝업 열기 버튼 (🔍 버튼)    */
/* =============================================== */
.vocab-popup-btn {
  width: 32px;                             /* 정사각형 크기 */
  height: 32px;
  font-size: 14px;                         /* 텍스트 크기 */
  font-weight: bold;
  border-radius: 50%;                      /* 원형 버튼 */
  border: 2px solid #ff7f50;               /* 오렌지 테두리 */
  color: #ff7f50;                          /* 글자색 오렌지 */
  background-color: white;                 /* 배경 흰색 */
  cursor: pointer;                         /* 손가락 커서 */
  display: flex;                           /* 가운데 정렬 */
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}

.vocab-popup-btn:hover {
  background-color: #ff7f50;               /* hover 시 배경 반전 */
  color: white;                            /* 글자색 반전 */
}


/* =============================================== */
/* ✅ .vocab-popup : 단어 상세 팝업창              */
/* =============================================== */
.vocab-popup {
  position: absolute;                      /* 자유 위치 배치 */
  z-index: 99;                             /* 가장 위에 표시 */
  width: 260px;
  background: #fffdf0;                    /* 기존 단어장 계열 배경 */
  border: 2px solid #ffb980;               /* 연한 오렌지 테두리 */
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* 입체감 부여 */
}


/* =============================================== */
/* ✅ 팝업 내부 구조                                */
/* =============================================== */

/* 팝업 상단 영역: 제목 + 닫기 버튼 포함 */
.popup-header {
  display: flex;                          /* 좌우로 나란히 정렬 */
  justify-content: space-between;        /* 제목 왼쪽 / 닫기 버튼 오른쪽 */
  align-items: center;                   /* 수직 정렬 */
  margin-bottom: 0px;                   /* 아래 여백 */
  margin-top: -3px;                   /* 위 여백 */
  cursor: move;                          /* 드래그 가능한 영역임을 시각적으로 표시 */
}

/* 팝업 제목 텍스트 (단어) */
.popup-title {
  font-size: 1.2rem;                     /* 조금 큰 글씨 */
  font-weight: bold;                    /* 굵게 강조 */
  color: #ff7f50;                       /* 기존 오렌지 계열 강조 색 */
}

/* 팝업 닫기 버튼 (X 버튼) */
.popup-close {
  font-size: 1.2rem;                    /* X 아이콘 크기 */
  border: none;                        /* 테두리 없음 */
  background: none;                    /* 배경 없음 */
  color: #999;                         /* 기본 회색 */
  cursor: pointer;                     /* 클릭 가능 커서 */
  transition: color 0.2s;              /* hover 시 색상 부드럽게 변경 */
}

/* 닫기 버튼 hover 시 */
.popup-close:hover {
  color: #333;                         /* 더 진한 회색으로 강조 */
}

/* 팝업 본문 안의 문단 스타일 (뜻, 예문, 설명 등) */
.popup-body p {
  margin: 3px 0;                       /* 위아래 여백 */
  font-size: 0.8rem;                     /* 일반 본문 크기 */
  line-height: 1.5;                    /* 줄간격 여유 있게 */
  color: #333;                         /* 진한 회색 */
  overflow: hidden;                        /* 넘침 숨김 */
}

/* 팝업 본문에서 <strong> 강조 텍스트 */
.popup-body strong {
  color: #fb8c00;                      /* 주황 계열 강조 색상 */
}


/* =============================================== */
/* ✅ 반응형 대응 (모바일 ~ 500px)                  */
/* =============================================== */

@media (max-width: 500px) {
  .vocab-popup {
    width: 90%;                         /* 작은 화면에서는 전체 너비의 90% */
    left: 5% !important;                /* 좌우 여백 5%씩 확보 */
    right: 5% !important;
  }

  .vocab-word {
    font-size: 16px;                    /* 단어 크기 약간 축소 */
  }

  .vocab-popup-btn {
    width: 28px;                        /* 보기 버튼 작게 */
    height: 28px;
    font-size: 12px;                    /* 아이콘 글자도 작게 */
  }
}




/* =============================================== */
/* ✅ 오답노트 관련 스타일                         */
/* =============================================== */

.wrong-buttons { /* 오답노트 상단 버튼 영역 */
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}

.wrong-buttons button { /* 오답 복습 / 종료 / 노트 / 리셋 버튼 */
  padding: 6px 10px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  background-color: #ff7f50;
  color: white;
  transition: all 0.2s ease;
}

.wrong-buttons button:hover {
  background-color: #ff5722;
  transform: translateY(-2px);
}

#wrong-list { /* 저장된 오답 목록 표시 영역 */
  font-size: 14px;
  margin-top: 3px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #fffdf0;
  border-radius: 8px;
  max-height: 150px;
  overflow-y: auto;
  width: 90%;
  min-height: 60px;
  /* 공통 스크롤 스타일 */
  scrollbar-width: thin;
  scrollbar-color: #ccc #f0f0f0;
}


/* =============================================== */
/* ✅ 공통 모달창 스타일                            */
/* =============================================== */

.modal-overlay { /* 모달 배경 오버레이 (공통) */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-box { /* 모달 내용 박스 (공통) */
  background: white;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  max-width: 300px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.modal-buttons { /* 모달 내 버튼 영역 (공통) */
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.modal-buttons button { /* 모달 내 버튼 공통 스타일 */
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background-color: #ff7f50;
  color: white;
  cursor: pointer;
  transition: 0.2s;
}

.modal-buttons button:hover {
  background-color: #ff5722;
}


/* =============================================== */
/* ✅ 레벨 선택 체크박스 스타일                     */
/* =============================================== */

.level-checkbox { /* 각 난이도 단계별 체크박스 */
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #aaa;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
  margin-right: 6px;
}

.level-checkbox:checked { /* 체크 시 배경/테두리 색 변경 */
  background-color: #b2d235;
  border-color: #8bc34a;
}

.level-checkbox:checked::after { /* 체크 시 ✔ 표시 */
  content: "✔";
  color: white;
  font-size: 14px;
  position: absolute;
  top: 1px;
  left: 3px;
}


/* =============================================== */
/* ✅ 난이도 안내 텍스트 (.level-guide)             */
/* =============================================== */

.level-guide {
  font-size: 12px;
  color: #444;
  margin-top: -10px;
  margin-bottom: 10px;
  line-height: 1.4;
}


/* =============================================== */
/* ✅ 훈련 종료 모달 (#end-modal)                   */
/* =============================================== */

#end-modal.modal-overlay { /* 종료 모달 배경 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#end-modal .modal-box { /* 종료 모달 박스 */
  background: #fffdf5;
  padding: 30px 40px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  animation: fadeIn 0.3s ease;
}

#end-modal #end-message { /* 종료 메시지 텍스트 */
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: bold;
}

#end-modal .modal-buttons { /* 종료 버튼 그룹 */
  display: flex;
  justify-content: center;
  gap: 15px;
}

#end-modal .modal-buttons button { /* 종료 버튼 스타일 */
  padding: 10px 18px;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#end-modal #next-stage-btn { /* 다음 단계 버튼 */
  background-color: #ffa25b;
  color: white;
}

#end-modal #next-stage-btn:hover {
  background-color: #ff8730;
}

#end-modal #end-ok-btn { /* 확인 (홈으로) 버튼 */
  background-color: #666;
  color: white;
}

#end-modal #end-ok-btn:hover {
  background-color: #444;
}


/* =============================================== */
/* ✅ 반응형 대응 - 체크박스 수직정렬 (모바일)      */
/* =============================================== */

@media (max-width: 600px) {
  .difficulty-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =============================================== */
/* ✅ 등장 애니메이션 (모달 등 페이드 인 효과용)    */
/* =============================================== */

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}


/* =============================================== */
/* ✅ #question-limit-container : 문제 개수 설정 영역 */
/* =============================================== */

#question-limit-container { /* 라벨 + 입력 필드 묶음 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: bold;
  color: #333;
}


/* =============================================== */
/* ✅ #question-limit : 문제 수 입력창               */
/* =============================================== */

#question-limit {
  width: 60px;
  padding: 4px 6px;
  font-size: 14px;
  margin-bottom : -20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  background-color: #fdfdfd;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#question-limit:focus { /* 입력창 클릭 시 효과 */
  outline: none;
  border-color: #7fc97f; /* 연한 초록 (클로버 느낌) */
  box-shadow: 0 0 4px rgba(127, 201, 127, 0.5);
}

input[type=number]::-webkit-inner-spin-button { /* 숫자 증가/감소 버튼 보이게 */
  opacity: 1;
  pointer-events: auto;
}


/* =============================================== */
/* ✅ .level-progress : 각 단계별 푼 문제 수 표시    */
/* =============================================== */

.level-progress {
  margin-left: -5px;
  padding: 2px 10px;
  background-color: #ffe0b2; /* 연한 오렌지 배경 */
  color: #fb8c00;            /* 진한 오렌지 텍스트 */
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  display: inline-block;
  vertical-align: middle;
  line-height: 2;
}


/* =============================================== */
/* ✅ #quiz-container : 퀴즈 박스 기본 효과 설정     */
/* =============================================== */

#quiz-container {
  transition: border 0.3s ease, box-shadow 0.3s ease;
}


/* =============================================== */
/* ✅ .review-mode-border : 복습 모드 전용 테두리 강조 */
/* =============================================== */

.review-mode-border {
  border: 4px solid #f57c00 !important;
  border-radius: 16px !important;
  box-shadow: 0 0 10px rgba(245, 124, 0, 0.4) !important;
  background-color: #fff8f0; /* 부드러운 배경 강조 */
}