/* ===== Transition (부드러운 전환 효과 추가 추천) ===== */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== Light ===== */
.light {
    background-color: #FFFFFF;
}
.light * {
    color: #333333; 
}
.light .header-btn-area button {
    background-color: #333;
    color: #f0f0f0;
}


/* ===== Dark ===== */
.dark { 
    background-color: #333333; 
}
.dark * { 
    color: #FFFFFF; 
}
.dark .header-btn-area button {
    background-color: #f0f0f0;
    color: #333333;
}

/* 옵션도 다크모드 지정 */
.dark select option {

    background-color: #333;
    color: #FFFFFF;

}

/* 일부 글자들은 다크모드에도 글자 검은색 */

.dark .dark-text {

    color: #333;

}





/* ===== Ocean ===== */
.ocean {
    /* 경로가 맞는지 꼭 확인하세요! */
    background-image: url("/img/ocean_bg01.jpg"); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh; /* 배경 꽉 차게 */
}
.ocean * {
    color: #0E1B33;
}
/*
  [파일 역할]
  - 테마(light/dark/ocean)별 색상과 배경 표현을 담당하는 스타일 파일.

  [왜 필요한가]
  - 사용자가 선호하는 시각 모드를 선택할 수 있게 해 가독성과 사용자 경험을 높인다.
  - 테마 전환 로직(themeController/themeView)과 직접 연결되는 시각 계층이다.

  [핵심 기능]
  - body 테마 전환 트랜지션
  - light/dark/ocean별 배경/텍스트/버튼 대비 설정
  - dark 모드에서 select option, 특정 텍스트(.dark-text) 가독성 보정
*/