/* 기본 스타일 초기화 */
body, h1, p, ul, li, a {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f4f4f4; /* 이미지의 메인 영역 배경색과 유사하게 */
    color: #333;
}

/* 헤더 스타일 */
header {
    /* background-image: linear-gradient(to right, #3a506b, #2c3e50, #3a506b); */ /* 주석 처리 또는 삭제 */
    background-color: #333; /* header.php와 통일 */
    color: #ffffff;
    /* padding: 1em 0; */ /* header nav에서 패딩 관리하도록 주석 처리 또는 header.php의 nav 패딩과 통합 */
    /* text-align: center; */ /* 제거 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%; /* header.php에서 가져옴 */
}

/* header nav에 max-width 및 중앙 정렬 적용 (style.css로 이동) */
header nav {
    max-width: 1400px; /* 1200px에서 1400px으로 수정 */
    margin: 0 auto;
    /* header.php의 header nav ul 스타일과 통합 필요할 수 있음 */
    /* 예: padding: 1em 0; 을 여기에 적용 */
}

header nav ul {
    list-style: none;
}

header nav ul li {
    display: inline;
    margin: 0 15px;
}

header nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

header nav ul li a:hover {
    text-decoration: underline;
}

/* 메인 콘텐츠 스타일 */
main {
    flex: 1;
    /* padding: 2em; */ /* header.php 스타일로 대체 */
    /* text-align: center; */ /* 제거 */
    max-width: 1400px; /* 1200px에서 1400px으로 수정 */
    margin: 20px auto; /* header.php에서 가져옴 */
    padding: 20px; /* header.php에서 가져옴 (좌우 패딩 20px, 상하도 20px로 통일) */
    box-sizing: border-box; /* 추가 */
}

main h1 {
    margin-bottom: 1em;
    color: #333;
    font-size: 2em;
    margin-top: 40px; /* header.php 에서 가져옴 */
}

/* 데이터베이스 상태 메시지 스타일 */
.db-status-success {
    color: green;
    font-weight: bold;
}

.db-status-error {
    color: red;
    font-weight: bold;
}

main p {
    margin-bottom: 0.5em;
}

/* 푸터 스타일 */
footer {
    /* background-image: linear-gradient(to top, #3a506b, #2c3e50); */ /* 주석 처리 또는 삭제 */
    background-color: #333; /* header.php와 통일 */
    color: #ffffff;
    text-align: center;
    /* padding: 1em 0; */ /* header.php 스타일로 대체 */
    padding: 20px 0; /* header.php에서 가져옴 */
    font-size: 0.9em;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
    width: 100%; /* header.php에서 가져옴 */
    margin-top: 40px; /* header.php 에서 가져옴 */
}

/* footer p 에 대한 스타일은 header.php 에 있었으나, footer 자체에 text-align:center가 있으므로 */
/* footer p 에 max-width, margin: auto 만 필요하면 유지, 아니면 footer p 스타일을 style.css로 옮기거나 삭제 */
footer p {
    max-width: 1400px; /* 추가: 내부 콘텐츠 최대 너비 */
    margin: 0 auto; /* 추가: 중앙 정렬 */
    /* 기존 footer의 text-align:center와 font-size 등은 footer에서 상속받거나 유지 */
}

/* 반응형 디자인 (모바일 화면) */
@media (max-width: 768px) {
    header nav ul li {
        display: block; /* 모바일에서는 메뉴를 세로로 나열 */
        margin: 10px 0;
    }

    main h1 {
        font-size: 1.5em;
    }
}