/* Pretendard 웹 폰트를 가져옵니다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* :root 가상 클래스는 문서의 루트 요소를 선택합니다. 여기서는 전체 문서에서 사용할 CSS 변수를 정의합니다. */
:root {
    --white-color: #FFFFFF; /* 흰색 */
    --background-color: #f9f9f9; /* 배경색 */
    --text-color: #333333; /* 기본 텍스트 색상 */
    --primary-color: #1a3a64; /* 기본 색상 (진한 네이비 블루) */
    --accent-color: #A47864; /* 강조 색상 (모카 무스) */
    --border-color: #dddddd; /* 테두리 색상 */
}

/* 모든 요소에 적용되는 스타일 */
* {
    box-sizing: border-box; /* 요소의 너비와 높이에 패딩과 테두리를 포함시킵니다. */
    margin: 0; /* 모든 요소의 바깥쪽 여백을 0으로 설정합니다. */
    padding: 0; /* 모든 요소의 안쪽 여백을 0으로 설정합니다. */
}

/* body 요소 스타일 */
body {
    font-family: 'Pretendard', sans-serif; /* 기본 글꼴을 Pretendard로 설정하고, 지원되지 않을 경우 sans-serif 글꼴을 사용합니다. */
    line-height: 1.6; /* 줄 높이를 1.6으로 설정합니다. */
    color: var(--text-color); /* 기본 텍스트 색상을 변수 값으로 설정합니다. */
    background-color: var(--white-color); /* 배경색을 변수 값으로 설정합니다. */
    display: flex; /* Flexbox 레이아웃을 사용합니다. */
    flex-direction: column; /* 자식 요소들을 세로로 정렬합니다. */
    min-height: 100vh; /* 최소 높이를 뷰포트 높이의 100%로 설정하여 푸터가 항상 하단에 위치하도록 합니다. */
}

/* .container 클래스 스타일 */
.container {
    max-width: 1200px; /* 최대 너비를 1200px로 제한합니다. */
    margin: 0 auto; /* 좌우 여백을 자동으로 설정하여 가운데 정렬합니다. */
    padding: 0 20px; /* 좌우 안쪽 여백을 20px로 설정합니다. */
    width: 100%; /* 너비를 100%로 설정합니다. */
}

/* header 요소 스타일 */
header {
    background-color: var(--white-color); /* 배경색을 변수 값으로 설정합니다. */
    border-bottom: 1px solid var(--border-color); /* 하단 테두리를 설정합니다. */
    padding: 1rem 0; /* 상하 안쪽 여백을 1rem, 좌우는 0으로 설정합니다. */
    position: sticky; /* 스크롤 시 상단에 고정됩니다. */
    top: 0; /* 상단에 붙입니다. */
    z-index: 1000; /* 다른 요소들보다 위에 표시되도록 z-index를 설정합니다. */
}

/* main 요소 스타일 */
main {
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 설정하여 푸터를 하단에 고정시킵니다. */
    padding: 2rem 0; /* 상하 안쪽 여백을 2rem, 좌우는 0으로 설정합니다. */
}

/* footer 요소 스타일 */
footer {
    background-color: var(--background-color); /* 배경색을 변수 값으로 설정합니다. */
    color: var(--text-color); /* 텍스트 색상을 변수 값으로 설정합니다. */
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    padding: 2rem 0; /* 상하 안쪽 여백을 2rem, 좌우는 0으로 설정합니다. */
    border-top: 1px solid var(--border-color); /* 상단 테두리를 설정합니다. */
}

/* a (링크) 요소 스타일 */
a {
    text-decoration: none; /* 밑줄을 제거합니다. */
    color: var(--primary-color); /* 링크 색상을 변수 값으로 설정합니다. */
}

a:hover {
    text-decoration: underline; /* 마우스를 올렸을 때 밑줄을 표시합니다. */
}


/* 헤더 및 네비게이션 스타일 */
.navbar {
    display: flex; /* Flexbox 레이아웃을 사용합니다. */
    justify-content: space-between; /* 자식 요소들을 양쪽 끝으로 정렬합니다. */
    align-items: center; /* 자식 요소들을 세로 중앙으로 정렬합니다. */
    position: relative; /* 자식 요소의 위치를 설정하기 위해 position을 relative로 설정합니다. */
}

.logo {
    font-size: 1.5rem; /* 글꼴 크기를 1.5rem으로 설정합니다. */
    font-weight: bold; /* 글꼴을 굵게 설정합니다. */
    color: var(--primary-color); /* 색상을 변수 값으로 설정합니다. */
}

.navbar-item.logo img {
    max-height: 35px; /* 로고 이미지의 최대 높이를 35px로 설정합니다. */
    width: auto; /* 너비를 자동으로 조절합니다. */
    transition: transform 0.3s ease-in-out; /* 변환 효과에 애니메이션을 추가합니다. */
}

.navbar-item.logo img:hover {
    transform: scale(1.1); /* 마우스를 올렸을 때 이미지를 1.1배 확대합니다. */
}

.navbar-menu {
    display: flex; /* Flexbox 레이아웃을 사용합니다. */
}

.navbar-start {
    display: flex; /* Flexbox 레이아웃을 사용합니다. */
    align-items: center; /* 자식 요소들을 세로 중앙으로 정렬합니다. */
}

.navbar-item {
    padding: 0.5rem 1rem; /* 상하 안쪽 여백을 0.5rem, 좌우를 1rem으로 설정합니다. */
    color: var(--text-color); /* 텍스트 색상을 변수 값으로 설정합니다. */
    font-weight: 500; /* 글꼴 두께를 500으로 설정합니다. */
}

.navbar-item:hover {
    color: #ff7f00; /* 마우스를 올렸을 때 텍스트 색상을 변경합니다. */
    font-weight: bold; /* 글꼴을 굵게 설정합니다. */
    text-decoration: none; /* 밑줄을 제거합니다. */
}

.has-dropdown {
    position: relative; /* 자식 요소의 위치를 설정하기 위해 position을 relative로 설정합니다. */
}

.dropdown-menu {
    display: none; /* 기본적으로 드롭다운 메뉴를 숨깁니다. */
    position: absolute; /* 부모 요소를 기준으로 위치를 설정합니다. */
    left: 0; /* 왼쪽을 0으로 설정합니다. */
    top: 100%; /* 부모 요소 바로 아래에 위치시킵니다. */
    background-color: var(--white-color); /* 배경색을 변수 값으로 설정합니다. */
    border: 1px solid var(--border-color); /* 테두리를 설정합니다. */
    border-radius: 5px; /* 모서리를 둥글게 만듭니다. */
    min-width: 200px; /* 최소 너비를 200px로 설정합니다. */
    z-index: 1001; /* 다른 요소들보다 위에 표시되도록 z-index를 설정합니다. */
}

.dropdown-menu.is-active {
    display: block; /* is-active 클래스가 추가되면 드롭다운 메뉴를 표시합니다. */
}

.dropdown-item {
    display: block; /* 블록 요소로 만들어 전체 너비를 차지하도록 합니다. */
    padding: 0.75rem 1rem; /* 안쪽 여백을 설정합니다. */
    color: var(--text-color); /* 텍스트 색상을 변수 값으로 설정합니다. */
}

.dropdown-item:hover {
    background-color: var(--background-color); /* 마우스를 올렸을 때 배경색을 변경합니다. */
    color: #ff7f00; /* 텍스트 색상을 변경합니다. */
    font-weight: bold; /* 글꼴을 굵게 설정합니다. */
}

.navbar-burger {
    display: none; /* 데스크톱에서는 햄버거 메뉴를 숨깁니다. */
    cursor: pointer; /* 마우스 커서를 포인터로 변경합니다. */
    background: none; /* 배경을 투명하게 설정합니다. */
    border: none; /* 테두리를 제거합니다. */
    font-size: 1.5rem; /* 글꼴 크기를 1.5rem으로 설정합니다. */
}

/* 히어로 섹션 스타일 */
#hero {
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    padding: 4rem 2rem; /* 안쪽 여백을 설정합니다. */
    background-color: var(--background-color); /* 배경색을 변수 값으로 설정합니다. */
    border-radius: 10px; /* 모서리를 둥글게 만듭니다. */
    margin-bottom: 2rem; /* 아래쪽 바깥 여백을 2rem으로 설정합니다. */
}

#hero h1 {
    font-size: 2.5rem; /* 글꼴 크기를 2.5rem으로 설정합니다. */
    margin-bottom: 1rem; /* 아래쪽 바깥 여백을 1rem으로 설정합니다. */
    color: var(--primary-color); /* 색상을 변수 값으로 설정합니다. */
}

/* 회사 소개 섹션 스타일 */
#company-introduction {
    margin-bottom: 2rem; /* 아래쪽 바깥 여백을 2rem으로 설정합니다. */
}

#company-introduction h2 {
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    margin-bottom: 1.5rem; /* 아래쪽 바깥 여백을 1.5rem으로 설정합니다. */
    font-size: 2rem; /* 글꼴 크기를 2rem으로 설정합니다. */
}

/* 솔루션 개요 섹션 스타일 */
#solutions-overview h2 {
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    margin-bottom: 1.5rem; /* 아래쪽 바깥 여백을 1.5rem으로 설정합니다. */
    font-size: 2rem; /* 글꼴 크기를 2rem으로 설정합니다. */
}

.solution-cards {
    display: grid; /* 그리드 레이아웃을 사용합니다. */
    grid-template-columns: repeat(3, 1fr); /* 3개의 열을 동일한 너비로 만듭니다. */
    gap: 1.5rem; /* 그리드 아이템 사이의 간격을 1.5rem으로 설정합니다. */
}

.card {
    background-color: var(--white-color); /* 배경색을 변수 값으로 설정합니다. */
    border: 1px solid var(--border-color); /* 테두리를 설정합니다. */
    border-radius: 10px; /* 모서리를 둥글게 만듭니다. */
    padding: 2rem; /* 안쪽 여백을 2rem으로 설정합니다. */
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    transition: transform 0.3s, box-shadow 0.3s; /* 변환 및 그림자 효과에 애니메이션을 추가합니다. */
}

.card:hover {
    transform: translateY(-5px); /* 마우스를 올렸을 때 위로 5px 이동합니다. */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 그림자 효과를 추가합니다. */
}

.card h3 {
    margin-bottom: 1rem; /* 아래쪽 바깥 여백을 1rem으로 설정합니다. */
    color: var(--primary-color); /* 색상을 변수 값으로 설정합니다. */
}

/* 푸터 스타일 */
.footer-content {
    font-size: 0.9rem; /* 글꼴 크기를 0.9rem으로 설정합니다. */
}

.social-links a {
    margin: 0 0.5rem; /* 좌우 바깥 여백을 0.5rem으로 설정합니다. */
}

/* 문의 양식 스타일 */
#contact-form-section {
    max-width: 800px; /* 최대 너비를 800px로 제한합니다. */
    margin: 0 auto; /* 가운데 정렬합니다. */
    padding: 2rem 0; /* 상하 안쪽 여백을 2rem, 좌우는 0으로 설정합니다. */
}

#contact-form-section h2 {
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    font-size: 2rem; /* 글꼴 크기를 2rem으로 설정합니다. */
    margin-bottom: 1rem; /* 아래쪽 바깥 여백을 1rem으로 설정합니다. */
}

#contact-form-section p {
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    margin-bottom: 2rem; /* 아래쪽 바깥 여백을 2rem으로 설정합니다. */
}

#contact-form {
    background-color: var(--white-color); /* 배경색을 변수 값으로 설정합니다. */
    padding: 2rem; /* 안쪽 여백을 2rem으로 설정합니다. */
    border: 1px solid var(--border-color); /* 테두리를 설정합니다. */
    border-radius: 10px; /* 모서리를 둥글게 만듭니다. */
}

.form-group {
    margin-bottom: 1.5rem; /* 아래쪽 바깥 여백을 1.5rem으로 설정합니다. */
}

.form-group label {
    display: block; /* 블록 요소로 만들어 한 줄을 모두 차지하도록 합니다. */
    margin-bottom: 0.5rem; /* 아래쪽 바깥 여백을 0.5rem으로 설정합니다. */
    font-weight: 500; /* 글꼴 두께를 500으로 설정합니다. */
}

.form-group input,
.form-group textarea {
    width: 100%; /* 너비를 100%로 설정합니다. */
    padding: 0.75rem; /* 안쪽 여백을 0.75rem으로 설정합니다. */
    border: 1px solid var(--border-color); /* 테두리를 설정합니다. */
    border-radius: 5px; /* 모서리를 둥글게 만듭니다. */
    font-size: 1rem; /* 글꼴 크기를 1rem으로 설정합니다. */
    font-family: 'Pretendard', sans-serif; /* 글꼴을 설정합니다. */
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none; /* 포커스 시 외곽선을 제거합니다. */
    border-color: var(--primary-color); /* 포커스 시 테두리 색상을 변경합니다. */
    box-shadow: 0 0 5px rgba(26, 58, 100, 0.2); /* 그림자 효과를 추가합니다. */
}

.btn-submit {
    display: block; /* 블록 요소로 만듭니다. */
    width: 100%; /* 너비를 100%로 설정합니다. */
    padding: 1rem; /* 안쪽 여백을 1rem으로 설정합니다. */
    background-color: var(--primary-color); /* 배경색을 변수 값으로 설정합니다. */
    color: var(--white-color); /* 텍스트 색상을 변수 값으로 설정합니다. */
    border: none; /* 테두리를 제거합니다. */
    border-radius: 5px; /* 모서리를 둥글게 만듭니다. */
    font-size: 1.1rem; /* 글꼴 크기를 1.1rem으로 설정합니다. */
    font-weight: bold; /* 글꼴을 굵게 설정합니다. */
    cursor: pointer; /* 마우스 커서를 포인터로 변경합니다. */
    transition: background-color 0.3s; /* 배경색 변경에 애니메이션 효과를 추가합니다. */
}

.btn-submit:hover {
    background-color: #122a4a; /* 마우스를 올렸을 때 배경색을 더 어둡게 변경합니다. */
}

/* 솔루션 페이지 특정 스타일 */
.solution-hero {
    background-color: var(--primary-color); /* 배경색을 변수 값으로 설정합니다. */
    color: var(--white-color); /* 텍스트 색상을 변수 값으로 설정합니다. */
    padding: 4rem 2rem; /* 안쪽 여백을 설정합니다. */
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    margin-bottom: 2rem; /* 아래쪽 바깥 여백을 2rem으로 설정합니다. */
}

.solution-hero h1 {
    font-size: 3rem; /* 글꼴 크기를 3rem으로 설정합니다. */
    margin-bottom: 0.5rem; /* 아래쪽 바깥 여백을 0.5rem으로 설정합니다. */
}

.solution-hero p {
    font-size: 1.2rem; /* 글꼴 크기를 1.2rem으로 설정합니다. */
    opacity: 0.9; /* 투명도를 0.9로 설정합니다. */
}

.solution-details h2 {
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    font-size: 2.5rem; /* 글꼴 크기를 2.5rem으로 설정합니다. */
    margin-bottom: 2rem; /* 아래쪽 바깥 여백을 2rem으로 설정합니다. */
    color: var(--primary-color); /* 색상을 변수 값으로 설정합니다. */
}

.solution-section {
    background-color: var(--white-color); /* 배경색을 변수 값으로 설정합니다. */
    border: 1px solid var(--border-color); /* 테두리를 설정합니다. */
    border-radius: 10px; /* 모서리를 둥글게 만듭니다. */
    padding: 2rem; /* 안쪽 여백을 2rem으로 설정합니다. */
    margin-bottom: 2rem; /* 아래쪽 바깥 여백을 2rem으로 설정합니다. */
}

.solution-section h3 {
    font-size: 1.8rem; /* 글꼴 크기를 1.8rem으로 설정합니다. */
    color: var(--primary-color); /* 색상을 변수 값으로 설정합니다. */
    margin-bottom: 1rem; /* 아래쪽 바깥 여백을 1rem으로 설정합니다. */
    border-bottom: 2px solid var(--accent-color); /* 하단 테두리를 강조 색상으로 설정합니다. */
    padding-bottom: 0.5rem; /* 하단 안쪽 여백을 0.5rem으로 설정합니다. */
}

.solution-section ul {
    list-style: none; /* 목록 스타일을 제거합니다. */
    padding: 0; /* 안쪽 여백을 0으로 설정합니다. */
}

.solution-section ul li {
    margin-bottom: 0.8rem; /* 아래쪽 바깥 여백을 0.8rem으로 설정합니다. */
    padding-left: 1.5rem; /* 왼쪽 안쪽 여백을 1.5rem으로 설정합니다. */
    position: relative; /* 가상 요소를 위해 position을 relative로 설정합니다. */
}

.solution-section ul li::before {
    content: '\2022'; /* 글머리 기호(bullet point)를 내용으로 추가합니다. */
    color: var(--accent-color); /* 글머리 기호의 색상을 강조 색상으로 설정합니다. */
    font-weight: bold; /* 글꼴을 굵게 설정합니다. */
    display: inline-block; /* 인라인 블록 요소로 만듭니다. */
    width: 1em; /* 너비를 1em으로 설정합니다. */
    margin-left: -1.5em; /* 왼쪽 바깥 여백을 -1.5em으로 설정하여 들여쓰기 효과를 줍니다. */
}

.feature-grid {
    display: grid; /* 그리드 레이아웃을 사용합니다. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 화면 크기에 따라 열의 개수가 자동으로 조절되도록 합니다. 최소 너비는 250px입니다. */
    gap: 1.5rem; /* 그리드 아이템 사이의 간격을 1.5rem으로 설정합니다. */
    margin-top: 1.5rem; /* 위쪽 바깥 여백을 1.5rem으로 설정합니다. */
}

.feature-item {
    background-color: var(--background-color); /* 배경색을 변수 값으로 설정합니다. */
    padding: 1.5rem; /* 안쪽 여백을 1.5rem으로 설정합니다. */
    border-radius: 8px; /* 모서리를 둥글게 만듭니다. */
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 그림자 효과를 추가합니다. */
}

.feature-item h4 {
    font-size: 1.2rem; /* 글꼴 크기를 1.2rem으로 설정합니다. */
    color: var(--primary-color); /* 색상을 변수 값으로 설정합니다. */
    margin-bottom: 0.5rem; /* 아래쪽 바깥 여백을 0.5rem으로 설정합니다. */
}

.cta-button-section {
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    margin-top: 3rem; /* 위쪽 바깥 여백을 3rem으로 설정합니다. */
}

.cta-button {
    display: inline-block; /* 인라인 블록 요소로 만듭니다. */
    background-color: var(--accent-color); /* 배경색을 강조 색상으로 설정합니다. */
    color: var(--white-color); /* 텍스트 색상을 흰색으로 설정합니다. */
    padding: 1rem 2rem; /* 안쪽 여백을 설정합니다. */
    border-radius: 5px; /* 모서리를 둥글게 만듭니다. */
    font-size: 1.2rem; /* 글꼴 크기를 1.2rem으로 설정합니다. */
    font-weight: bold; /* 글꼴을 굵게 설정합니다. */
    text-decoration: none; /* 밑줄을 제거합니다. */
    transition: background-color 0.3s; /* 배경색 변경에 애니메이션 효과를 추가합니다. */
}

.cta-button:hover {
    background-color: #8e6454; /* 마우스를 올렸을 때 배경색을 더 어둡게 변경합니다. */
}

/* 반응형 디자인 스타일 */
@media (max-width: 768px) { /* 화면 너비가 768px 이하일 때 적용됩니다. */
    .navbar-burger {
        display: block; /* 햄버거 메뉴를 표시합니다. */
    }

    .solution-cards {
        grid-template-columns: 1fr; /* 1개의 열로 변경합니다. */
    }

    .navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 5px;
        width: 200px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .navbar-menu.is-active {
        display: block;
    }

    .navbar-start {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-item {
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .has-dropdown .dropdown-menu {
        display: none;
        position: static;
        width: 100%;
        border: none;
        box-shadow: none;
    }

    .has-dropdown.is-active .dropdown-menu {
        display: block;
    }
    
    .solution-hero h1 {
        font-size: 2rem; /* 글꼴 크기를 2rem으로 줄입니다. */
    }

    .solution-hero p {
        font-size: 1rem; /* 글꼴 크기를 1rem으로 줄입니다. */
    }

    .solution-details h2 {
        font-size: 1.8rem; /* 글꼴 크기를 1.8rem으로 줄입니다. */
    }

    .solution-section h3 {
        font-size: 1.5rem; /* 글꼴 크기를 1.5rem으로 줄입니다. */
    }

    .feature-grid {
        grid-template-columns: 1fr; /* 1개의 열로 변경합니다. */
    }
}