/* 기본 초기화 및 폰트 설정 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Malgun Gothic', dotum, sans-serif; }
body { background-color: #f4f6f9; color: #333; font-size: 14px; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }

/* 공통 버튼 스타일 */
.btn { display: inline-block; padding: 6px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; border: 1px solid transparent; text-align: center; white-space: nowrap; }
.btn-primary { background-color: #4e73df; color: #fff; }
.btn-primary:hover { background-color: #2e59d9; }
.btn-success { background-color: #1cc88a; color: #fff; }
.btn-success:hover { background-color: #17a673; }
.btn-danger { background-color: #e74a3b; color: #fff; }
.btn-danger:hover { background-color: #be2617; }
.btn-secondary { background-color: #858796; color: #fff; }

/* 공통 폼 스타일 */
input[type="text"], input[type="password"], input[type="date"], input[type="time"], select {
    width: 100%; padding: 8px 12px; border: 1px solid #d1d3e2; border-radius: 4px; outline: none; font-size: 13px; min-width: 100px;
}
input:focus, select:focus { border-color: #bac8f3; box-shadow: 0 0 0 0.2rem rgba(78,115,223,.25); }

/* ========================================== */
/* 변경된 상단 GNB 내비게이션 바 스타일 */
/* ========================================== */
.navbar { background-color: #4e73df; color: #fff; height: 60px; display: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* 본문 리스트와 라인을 맞추기 위한 내부 컨테이너 */
.navbar-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center; height: 100%; }

.navbar-brand { font-size: 18px; font-weight: bold; margin-right: 30px; }
.navbar-nav { display: flex; align-items: center; height: 100%; }
.nav-item { height: 100%; }
.nav-link { display: flex; align-items: center; padding: 0 15px; height: 100%; color: rgba(255,255,255,0.8); font-weight: bold; cursor: pointer; transition: all 0.2s; }
.nav-link:hover, .nav-item.active .nav-link { color: #fff; background-color: rgba(0,0,0,0.1); border-bottom: 3px solid #fff; }

/* 로그아웃 버튼을 오른쪽 끝으로 밀기 */
.logout-btn { font-size: 12px; background: rgba(255,255,255,0.2); padding: 4px 8px; border-radius: 4px; cursor: pointer; margin-left: auto; }

/* 공통 레이아웃 & 반응형 컨테이너 */
.container { width: 100%; max-width: 1200px; margin: 30px auto; padding: 0 15px; }
.card { background: #fff; border-radius: 8px; box-shadow: 0 0.15rem 1.75rem 0 rgba(58,59,69,.15); padding: 25px; margin-bottom: 30px; }
.card-title { font-size: 18px; font-weight: bold; margin-bottom: 20px; color: #4e73df; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

/* 반응형 테이블 핵심 스타일 */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e3e6f0; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; text-align: left; min-width: 800px; }
th, td { padding: 12px 10px; border-bottom: 1px solid #e3e6f0; text-align: center; vertical-align: middle; }
th { background-color: #f8f9fc; color: #4e73df; font-weight: bold; white-space: nowrap; }
tr:hover { background-color: #f8f9fc; }

/* [1] 로그인 페이지 스타일 */
.login-wrapper { max-width: 400px; margin: 100px auto; padding: 30px; }
.login-title { text-align: center; font-size: 24px; font-weight: bold; color: #4e73df; margin-bottom: 30px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #6e707e; }
.btn-login { width: 100%; padding: 12px; font-size: 16px; font-weight: bold; margin-top: 10px; }

/* 화면 제어용 클래스 */
.page-section { display: none; }
.page-section.active { display: block; }

/* 모바일 반응형 미디어쿼리 */
@media (max-width: 768px) {
    .container, .navbar-container { padding: 0 10px; }
    .container { margin: 15px auto; }
    .card { padding: 15px; }
    .card-title { font-size: 16px; }
    .navbar-brand { font-size: 15px; margin-right: 15px; }
    .nav-link { padding: 0 10px; font-size: 13px; }
    th, td { padding: 10px 8px; font-size: 13px; }
    .btn { padding: 5px 8px; font-size: 12px; }
}