/* ========================================
   전역 스타일 (Global Styles)
   ======================================== */

/* 기본 스타일 초기화 */
* {
    margin: 0; /* 기본 여백 제거 */
    padding: 0; /* 기본 패딩 제거 */
    box-sizing: border-box; /* 박스 모델 설정 */
    font-family: 'Roboto', sans-serif; /* 구글 산스크리프 폰트 적용 */
    font-weight: 350; /* 얇은 폰트 굵기 적용 */
}

/* 리스트 스타일 */
ul {
    display: flex; /* 리스트를 가로로 배치 */
    gap: 25px; /* 리스트 아이템 간격 */
    list-style: none; /* 기본 리스트 스타일 제거 */
}

/* 링크 스타일 */
a {
    text-decoration: none; /* 링크의 밑줄 제거 */
    color: #666; /* 링크 기본 색상 */
    font-size: 14px; /* 링크 폰트 크기 */
}

a:hover {
    color: #333; /* 링크 호버 시 색상 변경 */
}

/* 메인 콘텐츠 전역 스타일 */
main {
    margin-top: 60px; /* 메인 콘텐츠 상단 여백 */
}

main section {
    margin-bottom: 50px; /* 섹션 간 간격 */
}

main section:last-child {
    margin-bottom: 0; /* 마지막 섹션은 하단 여백 제거 */
}

main h2 {
    font-size: 18px; /* 제목 폰트 크기 */
    color: #333; /* 제목 색상 */
    margin-bottom: 15px; /* 제목 아래 여백 */
    font-weight: bold; /* 제목 두껍게 */
}

main p {
    font-size: 15px; /* 본문 폰트 크기 */
    text-align: left; /* 본문 왼쪽 정렬 */
    margin-bottom: 10px; /* 문단 간 간격 */
    color: #333; /* 본문 색상 */
    line-height: 1.6; /* 줄간격 */
}

main p a {
    color: #666; /* 링크 색상 */
    text-decoration: underline; /* 밑줄 표시 */
    font-size: 15px; /* 본문과 동일한 폰트 크기 */
}

main p a:hover {
    color: #333; /* 호버 시 색상 변경 */
    text-decoration: underline; /* 호버 시에도 밑줄 유지 */
}

.highlight {
    font-size: 20px; /* 강조 텍스트 폰트 크기 */
    font-weight: bold; /* 강조 텍스트 두껍게 */
}

/* 웹폰트 정의 */
@font-face {
    font-family: 'SeoulNotice';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/SeoulAlrimTTF-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

/* ========================================
   레이아웃 스타일 (Layout Styles)
   ======================================== */

/* 컨테이너 스타일 */
.container {
    max-width: 1400px; /* 최대 너비 설정 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 90px 120px; /* 패딩 설정 */
    background-color: transparent; /* 배경색 설정 */
}

/* ========================================
   헤더 스타일 (Header Styles)
   ======================================== */

/* 헤더 전체 레이아웃 */
header {
    display: flex; /* 헤더를 가로로 배치 */
    align-items: center; /* 헤더 아이템 세로 중앙 정렬 */
    justify-content: space-between; /* 헤더 아이템 간격 조정 */
}

/* 브랜드 그룹 (로고 + 회사명) */
.brand-group {
    display: flex; /* 브랜드 그룹을 가로로 배치 */
    flex-direction: column; /* 세로 방향으로 정렬 */
    align-items: flex-start; /* 왼쪽 정렬 */
}

/* 로고 텍스트 스타일 */
.logo-text {
    font-family: 'SeoulNotice', 'Roboto', sans-serif; /* SeoulNotice 폰트 적용 */
    font-size: 40px; /* 로고 텍스트 크기 */
    font-weight: 800; /* 폰트 웨이트 */
    color: #333; /* 색상 */
    cursor: pointer; /* 마우스 커서 변경 */
    text-decoration: none; /* 링크 밑줄 제거 */
}

.logo-text:hover {
    color: #666; /* 호버 시 색상 변경 */
}

/* 기존 이미지 로고 스타일 (사용하지 않음) */
.logo {
    width: 100px; /* 로고 너비 */
    height: auto; /* 로고 높이 자동 조정 */
    cursor: pointer; /* 마우스 커서 변경 */
}

/* 회사명 텍스트 */
h1 {
    font-size: 13px; /* 제목 폰트 크기 */
    color: #888; /* 제목 색상 */
    margin-top: 4px; /* 제목 상단 여백 */
    font-weight: normal; /* 볼드 제거 */
}

/* ========================================
   푸터 스타일 (Footer Styles)
   ======================================== */

/* 푸터 전체 레이아웃 */
footer {
    margin-top: 40px; /* 메인 콘텐츠와 간격 */
    padding: 15px 0; /* 위아래 여백 */
    border-top: 1px solid #eee; /* 상단 구분선 */
}

/* 푸터 콘텐츠 컨테이너 */
.footer-content {
    display: flex; /* 가로 배치 */
    justify-content: flex-end; /* 우측 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
}

/* 푸터 왼쪽 영역 */
.footer-left {
    display: flex; /* 세로 배치를 위한 flex */
    flex-direction: column; /* 세로 방향 */
}

/* 카피라이트 텍스트 */
.copyright-line1 {
    font-size: 12px; /* 폰트 크기 */
    color: #666; /* 색상 */
    line-height: 1.4; /* 줄간격 */
}

/* 푸터 오른쪽 영역 */
.footer-right {
    display: flex; /* 버튼 정렬 */
}

/* ========================================
   반응형 스타일 (Responsive Styles)
   ======================================== */

/* 모바일 스타일 (화면이 768px 이하일 때만 적용) */
@media (max-width: 768px) {
    .container {
        padding: 0 20px; /* 모바일에서 패딩 조정 */
    }
    
    header {
        flex-wrap: wrap; /* 헤더 아이템 줄 바꿈 허용 */
    }
    
    nav {
        width: 100%; /* 내비게이션 너비 100% */
        margin-top: 16px; /* 내비게이션 상단 여백 */
        display: flex; /* 내비게이션을 가로로 배치 */
        justify-content: flex-end; /* 오른쪽 정렬 */
    }
    
    .brand-group {
        margin-bottom: 20px; /* 브랜드 그룹 하단 여백 */
    }
}