/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    -webkit-text-size-adjust: none; /* iOS 텍스트 크기 자동 조절 방지 */
    word-break: keep-all; /* 한글 단어 잘림 방지 */
    overflow-wrap: break-word; /* 긴 영어 단어 줄바꿈 */
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    color: #ffffff; /* 전역 H 태그 색상, 특정 섹션에서 재정의됨 */
}

/* Common Style */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #2f52a0;
    color: #fff;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

.section {
    padding: 80px 0;
    text-align: center;
}

.section h2 { /* 섹션 공통 제목 스타일 */
    font-size: 2.2em;
    font-weight: bold;
    margin-bottom: 20px; /* 이 값은 patent-certification 섹션에서 재정의됨 */
    color: #333;
}


/* Header */
#header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

#header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 75px;
}

#header .logo img {
    /* clamp(최소높이, 선호높이(뷰포트기반), 최대높이) */
    height: clamp(35px, 6vw, 50px); /* 예: 최소 35px, 화면너비의 6%를 선호, 최대 50px */
    width: auto;
    vertical-align: middle;
    display: block;
    /* transition은 clamp 사용 시 계속 변하므로, 필요에 따라 유지하거나 제거합니다. */
}

#gnb {
    display: flex;
}

#gnb ul { /* 1단계 주 메뉴 ul 및 기타 #gnb 내부 ul 기본 설정 */
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

#gnb li { /* 1단계 주 메뉴 li */
    position: relative;
    margin-left: 40px;
}

#gnb li a { /* 1단계 주 메뉴 a */
    display: block;
    padding: 10px 0;
    font-weight: bold;
    transition: color 0.3s ease;
}

#gnb li a:hover {
    color: #007bff;
}

/* 하위 메뉴 (ul.depth2) 스타일 */
#gnb .depth2 {
    /* #gnb ul 로부터 display: flex; 를 상속받음 */
    flex-direction: column; /* ★★★★★ 이 줄을 추가하세요! ★★★★★ */
                            /* flex 아이템(li)들을 세로로 쌓이도록 변경합니다. */
    
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    border-radius: 5px;
    padding: 10px 0; /* 드롭다운 박스 자체의 상하 여백 */
    min-width: 200px;
    /* list-style, margin은 #gnb ul 에서 이미 처리되었을 수 있으나, 명시적으로 다시 선언해도 괜찮습니다. */
    list-style: none; 
    margin: 0;
    z-index: 1000;
}

#gnb li:hover .depth2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 하위 메뉴 항목 (li) 스타일 */
#gnb .depth2 li {
    margin-left: 0; /* 부모 li의 margin-left 초기화 */
    width: 100%;    /* li 항목이 .depth2의 전체 너비를 차지하도록 함 */
    /* display: block; 은 부모가 flex-direction: column 이면 필수는 아니지만,
       명확성을 위해 또는 li 내부 컨텐츠 레이아웃을 위해 유지해도 괜찮습니다. */
}

/* 하위 메뉴 링크 (a) 스타일 */
#gnb .depth2 li a {
    display: block; /* 링크가 li 전체 영역을 차지하도록 하여 클릭 영역 확대 */
    padding: 10px 20px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#gnb .depth2 li a:hover {
    background-color: #f5f5f5;
    color: #007bff;
}#gnb {
    display: flex;
}

#gnb ul { /* 1단계 주 메뉴 ul 및 기타 #gnb 내부 ul 기본 설정 */
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

#gnb li { /* 1단계 주 메뉴 li */
    position: relative;
    margin-left: 40px;
}

#gnb li a { /* 1단계 주 메뉴 a */
    display: block;
    padding: 10px 0;
    font-weight: bold;
    transition: color 0.3s ease;
}

#gnb li a:hover {
    color: #007bff;
}

/* 하위 메뉴 (ul.depth2) 스타일 */
#gnb .depth2 {
    /* #gnb ul 로부터 display: flex; 를 상속받음 */
    flex-direction: column; /* ★★★★★ 이 줄을 추가하세요! ★★★★★ */
                            /* flex 아이템(li)들을 세로로 쌓이도록 변경합니다. */
    
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    border-radius: 5px;
    padding: 10px 0; /* 드롭다운 박스 자체의 상하 여백 */
    min-width: 200px;
    /* list-style, margin은 #gnb ul 에서 이미 처리되었을 수 있으나, 명시적으로 다시 선언해도 괜찮습니다. */
    list-style: none; 
    margin: 0;
    z-index: 1000;
}

#gnb li:hover .depth2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 하위 메뉴 항목 (li) 스타일 */
#gnb .depth2 li {
    margin-left: 0; /* 부모 li의 margin-left 초기화 */
    width: 100%;    /* li 항목이 .depth2의 전체 너비를 차지하도록 함 */
    /* display: block; 은 부모가 flex-direction: column 이면 필수는 아니지만,
       명확성을 위해 또는 li 내부 컨텐츠 레이아웃을 위해 유지해도 괜찮습니다. */
}

/* 하위 메뉴 링크 (a) 스타일 */
#gnb .depth2 li a {
    display: block; /* 링크가 li 전체 영역을 차지하도록 하여 클릭 영역 확대 */
    padding: 10px 20px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#gnb .depth2 li a:hover {
    background-color: #f5f5f5;
    color: #007bff;
}

/* Language Selector */
.lang-selector {
    margin-left: 30px;
    font-weight: bold;
}

.lang-selector a {
    color: #888;
    transition: color 0.3s ease;
}

.lang-selector a.active {
    color: #007bff;
}

.lang-selector a:hover {
    color: #007bff;
}


#header .menu-toggle {
    display: none; /* 기본적으로 숨김 (모바일에서 활성화) */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

#header .menu-toggle span {
    height: 3px;
    background-color: #333;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#header .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

#header .menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

#header .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Main */
#main {
    overflow: hidden;
    background-image: linear-gradient(to bottom, white, #e8e7e7);
}

/* Hero */
#hero {
    background: url('../img/main-visual.jpg') no-repeat center center/cover;
    height: 500px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #fff;
    position: relative;
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* 어두운 오버레이 */
}

#hero .container {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left; /* 내부 텍스트 왼쪽 정렬 */
}

#hero h2 {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
    color: #fff; /* Hero 섹션의 h2는 흰색 */
}

#hero p {
    font-size: 1.2em;
    margin-bottom: 30px;
    line-height: 1.8;
    color: #fff; /* Hero 섹션의 p는 흰색 */
}

#hero .btn {
    font-size: 1.2em;
}

#hero .hero-text {
    width: 50%;
}

#hero .hero-image {
    width: 40%;
    opacity: 0.9; /* 이미지 투명도 조절 */
}

#hero .hero-image img {
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Services (주요 사업 분야) */
#services {
    /* 기존 스타일 유지 */
}

#services .service-list {
    /* 기존 스타일 유지 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    justify-content: center;
}

#services .service-item {
    /* --- 기존 스타일 --- */
    background-color: #ffffff; /* 배경 이미지 로드 실패 시 또는 블러 처리된 이미지 뒤의 기본 색상 */
    border-radius: 10px;
    overflow: hidden; /* ::before 가상 요소가 부모 밖으로 나가지 않도록 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; 
}

/* --- 블러 처리된 배경 이미지를 위한 가상 요소 스타일 --- */
#services .service-item::before {
    content: ''; /* 가상 요소 필수 속성 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0; /* 콘텐츠(a 태그)보다 뒤에 위치하도록 설정 (아래 a 태그 z-index: 1 참고) */

    /* 배경 관련 속성을 이쪽으로 이동 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* --- 블러 효과 적용 --- */
    filter: blur(3px); /* "3px" 부분을 조절하여 흐림 정도를 변경 */

    /* 블러 효과로 인해 가장자리가 흐릿해지는 것을 보정하기 위해 약간 확대 (선택 사항) */
    /* transform: scale(1.05); */ 
}

#services .service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* --- 각 서비스 아이템별 다른 배경 이미지 설정 (가상 요소에 적용) --- */
#services .service-list .service-item:nth-child(1)::before {
    background-image: url('../img/service_bg_01.jpg'); 
}

#services .service-list .service-item:nth-child(2)::before {
    background-image: url('../img/service_bg_02.jpg'); 
}

#services .service-list .service-item:nth-child(3)::before {
    background-image: url('../img/service_bg_03.jpg');
}

#services .service-item a { /* 콘텐츠를 담고 있는 링크 태그 */
    display: block;
    padding: 30px;
    position: relative; /* z-index 적용을 위해 */
    z-index: 1;         /* ::before 가상 요소(배경) 위에 콘텐츠가 오도록 함 */
}

#services .service-item img { /* 아이콘 이미지 */
    height: 100px;
    margin-bottom: 20px;
}

#services .service-item h3 { /* 제목 */
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 15px;
    color: #000000; /* 블러된 배경 위에서 잘 보이도록 검정색으로 설정 */
    line-height: 26px;
    letter-spacing: normal;
}

#services .service-item p { /* 설명 텍스트 */
    font-size: 1.1em;
    line-height: 1.7;
    color: #222; /* 블러된 배경 위에서 잘 보이도록 어두운 회색으로 변경 (기존 #f0f0f0는 너무 밝음) */
    /* text-shadow: 1px 1px 2px rgba(255,255,255,0.5); /* 어두운 배경에 밝은 텍스트일 경우 그림자 */
}

/* Projects (주요 실적) */
#projects {
    background-color: #f0f0f0;
}

#projects .project-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    justify-content: center;
}

#projects .project-item {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#projects .project-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

#projects .project-item a {
    display: block;
}

#projects .project-item figure {
    margin-bottom: 20px;
}

#projects .project-item img {
    height: 200px;
    object-fit: cover;
    width: 100%; /* 추가: grid item 내 이미지 너비 100% */
    border-radius: 10px 10px 0 0;
    transition: opacity 0.3s ease;
}

#projects .project-item img:hover {
    opacity: 0.8;
}

#projects .project-item figcaption {
    padding: 10px 20px 0;
    font-weight: bold;
    text-align: left;
    font-size: 1.2em;
    color: #333;
}

#projects .project-item p {
    font-size: 1.0em;
    color: #666;
    padding: 0 20px 20px;
    line-height: 1.7;
    text-align: left;
}

#projects .more-btn {
    margin-top: 30px;
}

/* News (새 소식) */
#news {
    /* section 공통 스타일 적용 */
}

#news h2 { /* #news 섹션의 h2는 전역 .section h2를 따름 */
    /* font-size: 2.2em; */ /* 중복 제거 */
    /* font-weight: bold; */ /* 중복 제거 */
    /* margin-bottom: 50px; */ /* 중복 제거 */
    text-align: center; /* 명시 */
}

#news .news-list {
    border-top: 2px solid #333;
    border-bottom: 1px solid #ccc;
    max-width: 800px;
    margin: 0 auto;
}

#news .news-list li {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
    text-align: left;
}

#news .news-list li:hover {
    background-color: #f9f9f9;
}

#news .news-list li a {
    display: block;
    font-size: 1.1em;
    color: #333;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Contact (견적 문의) */
#contact {
    background-color: #ffffff;
}

#contact p {
    font-size: 1.1em;
    margin-bottom: 50px;
    color: #666;
    line-height: 1.7;
}

#contact .contact-btn {
    margin-top: 30px;
}

/* Business Areas Overview Page - Horizontal Column Layout */
/* -------------------------------------------------- */
#business-areas-overview .container {
    /* 기존 .container 스타일이 적용됩니다. */
}

/* 만약 business-areas-overview 섹션 자체에 별도 제목이 필요하다면 (주석 처리된 h2 부분)
#business-areas-overview .section-title {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 50px;
    text-align: center;
}
*/

.business-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 기본 3개 컬럼 */
    gap: 30px; /* 컬럼(아이템) 사이의 간격 */
    text-align: left; /* 각 컬럼 내부 텍스트는 왼쪽 정렬되도록 초기화 */
}

.business-area-column {
    background-color: #fdfdfd; /* 각 항목 배경색 (기존 #f9f9f9와 유사하게 또는 변경) */
    border: 1px solid #e9e9e9;
    border-radius: 8px; /* 모서리 둥글게 */
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column; /* 내부 요소(이미지, 텍스트 블록) 세로 정렬 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.business-area-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.business-area-column .business-area-image-summary {
    margin-bottom: 20px;
}

.business-area-column .business-area-image-summary img {
    width: 100%;
    height: 220px; /* 모든 이미지 높이 통일 (조정 가능) */
    object-fit: cover; /* 이미지가 비율을 유지하며 영역을 채우도록 */
    border-radius: 6px; /* 이미지 모서리 약간 둥글게 */
}

.business-area-column .business-area-text-summary {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 버튼을 하단에 위치시키기 위해 */
}

.business-area-column .business-area-text-summary h3 {
    font-size: 1.6em; /* 기존 h2보다 약간 작게 */
    color: #333;      /* 제목 색상 */
    margin-bottom: 15px;
    line-height: 1.3;
}

.business-area-column .business-area-text-summary p {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.7;
    /* flex-grow: 1;  내용 길이에 따라 버튼 위치가 달라지므로, 필요하면 사용 */
}

.business-area-column .business-area-text-summary ul {
    list-style-position: inside; /* 기본 ul 스타일을 사용하거나, 커스텀 아이콘 사용 */
    padding-left: 0; /* 기본 list-style-position: inside 사용 시 padding-left 제거 또는 조정 */
    margin-bottom: 20px;
    font-size: 0.9em;
    color: #555;
}

.business-area-column .business-area-text-summary ul li {
    margin-bottom: 8px;
    padding-left: 5px; /* 들여쓰기 효과 */
    position: relative;
}
/* 필요하다면 li::before 로 커스텀 불릿 사용 가능 */
/*
.business-area-column .business-area-text-summary ul li::before {
    content: '✔'; 
    color: #007bff;
    margin-right: 8px;
}
*/

.business-area-column .business-area-text-summary .btn {
    display: inline-block; /* 버튼 크기가 내용에 맞도록 */
    align-self: flex-start; /* 버튼을 왼쪽 정렬 (내용이 짧을 때) */
    margin-top: auto; /* 텍스트 내용이 길어지면 버튼을 카드 하단으로 밀어냄 */
    padding: 10px 20px; /* 버튼 패딩 조정 */
}

/* 반응형: 가로 3단 레이아웃 조정 */
@media (max-width: 1024px) { /* 태블릿 사이즈 */
    .business-areas-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 화면 크기에 따라 2열 또는 1열로 자동 조정 */
        /* 또는 grid-template-columns: 1fr 1fr; 로 2열 고정 */
    }
    .business-area-column .business-area-text-summary h3 {
        font-size: 1.4em;
    }
}

@media (max-width: 768px) { /* 모바일 사이즈 */
    .business-areas-grid {
        grid-template-columns: 1fr; /* 1열로 표시 */
        gap: 25px;
    }
    .business-area-column .business-area-image-summary img {
        height: 200px; /* 모바일에서 이미지 높이 조정 */
    }
    .business-area-column .business-area-text-summary h3 {
        font-size: 1.3em;
    }
}
/* Patent & Certification Page - Category Styles */
/* -------------------------------------------------- */
#patent-certification .category-section {
    margin-bottom: 50px; /* 각 카테고리 섹션 사이의 하단 여백 */
}

#patent-certification .category-subtitle {
    font-size: 1.8em; /* 카테고리 부제목 크기 */
    color: #333;      /* 카테고리 부제목 색상 */
    text-align: left;  /* 카테고리 부제목 왼쪽 정렬 */
    margin-bottom: 25px; /* 부제목과 리스트 사이 여백 */
    padding-bottom: 10px; /* 부제목 하단 여백 및 구분선 공간 */
    border-bottom: 2px solid #007bff; /* 부제목 하단 구분선 */
}

#patent-certification .cert-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 10px; 
}

#patent-certification .cert-item {
    background-color: #fff; 
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#patent-certification .cert-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

#patent-certification .cert-item figure {
    margin: 0 0 15px 0; 
    width: 100%;
}

#patent-certification .cert-item figure a {
    display: block; 
}

#patent-certification .cert-item img {
    width: 100%; 
    max-height: 320px; 
    object-fit: contain; 
    border: 1px solid #ddd; 
    background-color: #fff; 
    margin-bottom: 15px; 
    min-height: 200px; 
}

#patent-certification .cert-item figcaption h4 { /* h3에서 h4로 변경된 것 반영 */
    font-size: 1.1em; /* 크기 약간 조정 */
    color: #333;      
    font-weight: 600;  
    margin: 0;         
    line-height: 1.4;
}

#patent-certification .cert-item p { 
    font-size: 0.9em;
    color: #666;
    line-height: 1.6;
    margin-top: 10px; 
}

/* 반응형 스타일은 기존 style.css의 반응형 섹션에 추가하거나, 
   이곳에 #patent-certification에 특화된 반응형 규칙을 둘 수 있습니다. */
@media (max-width: 768px) {
    #patent-certification .category-subtitle {
        font-size: 1.6em;
        margin-bottom: 20px;
    }
    #patent-certification .cert-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }
    #patent-certification .cert-item img {
        max-height: 280px;
        min-height: 180px;
    }
}

@media (max-width: 480px) {
    #patent-certification .category-subtitle {
        font-size: 1.4em;
    }
    #patent-certification .cert-list {
        grid-template-columns: 1fr; 
    }
     #patent-certification .cert-item img {
        max-height: 240px;
        min-height: 150px;
    }
}


/* Footer */
#footer {
    background-color: #333;
    color: #fff;
    padding: 50px 0;
    text-align: left;
}

#footer .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

#footer .footer-info {
    flex-basis: 30%;
    margin-bottom: 20px;
}

#footer .footer-logo img {
    height: 40px;
    margin-bottom: 15px;
}

#footer .company-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

#footer .footer-info p {
    margin-bottom: 8px;
    font-size: 0.9em;
}

#footer .footer-info a {
    color: #fff;
}

#footer .footer-nav,
#footer .footer-contact {
    flex-basis: 20%;
    margin-bottom: 20px;
}

#footer .footer-nav h3,
#footer .footer-contact h3 {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff; /* Footer h3는 흰색 */
}

#footer .footer-nav ul {
    display: flex;
    flex-wrap: wrap;
}

#footer .footer-nav li {
    margin-left: 20px; /* 첫번째 li에도 적용되므로 수정 필요시 :not(:first-child) */
}
#footer .footer-nav li:first-child {
    margin-left: 0; /* 첫번째 li는 마진 없음 */
}


#footer .footer-nav li a {
    color: #fff;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

#footer .footer-nav li a:hover {
    color: #007bff;
}

#footer .footer-contact p {
    font-size: 0.9em;
    margin-bottom: 20px;
}

#footer .copyright {
    flex-basis: 100%;
    margin-top: 20px;
    font-size: 0.8em;
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    #header .container {
        height: auto;
        padding: 15px 20px;
    }

    #gnb li {
        margin-left: 20px;
    }

    .lang-selector {
        margin-left: 15px;
    }

    #hero h2 {
        font-size: 2em;
    }

    #hero p {
        font-size: 1.1em;
    }

    #hero .btn {
        font-size: 1.1em;
    }

    .section {
        padding: 60px 0;
    }

    .section h2 {
        font-size: 2em;
        margin-bottom: 40px; /* 전역 .section h2의 반응형 값 */
    }
    /* #patent-certification .section h2는 위에서 15px로 고정했으므로, 여기서는 전역만 */


    #services .service-list,
    #projects .project-list {
        gap: 30px;
    }

    #footer .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #footer .footer-info,
    #footer .footer-nav,
    #footer .footer-contact {
        flex-basis: 100%;
        margin-bottom: 30px;
    }

    #footer .footer-nav ul {
        justify-content: center;
    }
     #footer .footer-nav li { /* 모바일에서는 각 li 마진 조정 */
        margin: 0 10px 10px 10px;
    }
}

@media (max-width: 768px) {
    #header .container {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
    }

    #header .logo {
        margin-bottom: 0;
    }

    #gnb {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 80px; /* 헤더 바로 아래로 변경 (기존 80px보다 유동적) */
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px 0; /* 패딩 약간 줄임 */
        z-index: 90; /* 헤더의 z-index보다 낮게 설정 */
        text-align: left;
    }
    #gnb.active{
        display: flex
    }

    #header.open #gnb { /* JS로 header에 open 클래스 추가 시 GNB 표시 */
        display: flex;
    }


    #gnb ul {
        flex-direction: column;
        align-items: flex-start; 
        padding: 0; /* 전체 패딩은 #gnb에 */
        width: 100%;
    }

    #gnb li {
        width: 100%;
        margin-left: 0;
        border-bottom: 1px solid #eee; 
    }

    #gnb li:last-child {
        border-bottom: none;
    }

    #gnb li a {
        padding: 15px 20px; /* 패딩 좌우 추가 */
        width: 100%; /* 링크 영역 확장 */
    }

    #gnb .depth2 {
        position: static; 
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        box-shadow: none;
        padding: 0 0 10px 30px; /* 서브 메뉴 들여쓰기 증가 */
        border-radius: 0;
        background-color: #f5f5f5; 
        border-top: 1px solid #eee;
        width: 100%;
    }

    #gnb .depth2 li a {
        padding: 10px 0;
        font-size: 0.95em;
    }

    #header .menu-toggle {
        display: flex; 
    }

    .lang-selector {
        /* order: -1; 로고와 햄버거 버튼 사이에 배치 */
        margin-right: 15px;
        margin-left: auto; /* GNB 토글 버튼 옆으로 밀기 */
    }
    #header .container .logo { order: 1;}
    #header .container .lang-selector { order: 2; margin-left: auto; margin-right: 15px;}
    #header .container .menu-toggle { order: 3;}


    #hero {
        height: auto;
        padding: 60px 20px; /* 좌우 패딩 추가 */
    }

    #hero .container {
        flex-direction: column;
        text-align: center;
    }

    #hero .hero-text {
        width: 100%;
        margin-bottom: 30px;
        text-align: center;
    }

    #hero .hero-image {
        width: 90%;
        max-width: 400px; /* 너무 커지지 않도록 */
    }

    #services .service-list,
    #projects .project-list {
        /* display: grid에서 flex-direction 사용 불가. grid 유지 또는 flex로 변경 필요 */
        /* 아래는 grid 유지 시의 상태. 1열로 만들려면 grid-template-columns: 1fr; */
        /* flex-direction: column; */ /* 주석 처리 */
        /* align-items: center; */ /* 주석 처리 */
        grid-template-columns: 1fr; /* 768px 이하에서 1열로 강제 */
    }

    #services .service-item,
    #projects .project-item {
        width: 100%; /* grid 사용 시 자동으로 됨 */
    }

    #projects .project-item img {
        height: auto; 
    }
}

@media (max-width: 480px) {
    body {
        font-size: 15px; /* 기본 폰트 크기 약간 줄임 */
    }
    #hero h2 {
        font-size: 1.8em;
    }

    #hero p {
        font-size: 1em;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.95em; /* 버튼 폰트 크기 약간 줄임 */
    }

    .section h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
    /* #patent-certification .section h2는 이미 구체적으로 지정됨 */

    #services .service-item img { /* 아이콘 크기 조정 */
        height: 80px;
        margin-bottom: 15px;
    }
    #services .service-item h3 {
        font-size: 1.3em;
    }
     #services .service-item p {
        font-size: 1em;
    }
}