:root {
    /* 회사 브랜드 컬러 정의 */
    --main-color: #007bff; /* 포인트 컬러 (파랑) */
    --main-hover: #0056b3; /* 버튼 호버 시 컬러 */
    --bg-light: #f8f9fa; /* 연한 배경색 */
    --text-dark: #333333; /* 기본 글자색 */
    --footer-bg: #222222; /* 푸터 배경색 */
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /*transition: background 0.3s ease;*/ /* 스크롤 시 배경색 변화 효과 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header {
    /* 좌측(#007bff)에서 우측(#00c6ff)으로 흐르는 그라데이션 */
    background: linear-gradient(to right, #4ca1af, #c4e0e5);
    /* 배경이 반복되지 않고 전체 화면을 채우도록 설정 */
    background-attachment: fixed;
    background-size: cover;
    /* 글자색이 배경에 묻히지 않도록 흰색 계열로 변경 */
    color: #333333;
    margin: 0;
    padding: 0;
}

/* 섹션별 구분을 위해 배경을 약간 투명하게 조절하고 싶을 때 */
.section {
    background-color: rgba(255, 255, 255, 0.05); /* 아주 연한 흰색 투명도 */
    margin-bottom: 20px;
    padding: 60px 20px;
}

/* 적용 예시 */
.section-title {
    font-size: 2.5rem; /* 글씨 크기를 시원하게 키움 */
    font-weight: 800; /* 아주 굵고 단단한 느낌 */
    color: #1a2b4c; /* 너무 가벼운 파란색 대신, 신뢰감을 주는 짙은 네이비(다크 블루) */
    text-align: center;
    letter-spacing: 2px; /* 글자 사이 간격을 살짝 넓혀서 고급스러운 느낌 부여 */
    margin-bottom: 40px; /* 아래 콘텐츠와의 여백 넉넉하게 */
    position: relative; /* 아래 포인트 선을 배치하기 위한 기준점 */
    display: inline-block; /* 텍스트 너비만큼만 영역을 잡도록 설정 */
    width: 100%;
}
    /* 단순한 밑줄 대신, 제목 아래에 짧고 굵은 포인트 선 추가 (최신 웹 트렌드) */
    .section-title::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -15px; /* 글씨 아래로 15px 띄움 */
        transform: translateX(-50%); /* 정확히 정중앙에 위치하도록 이동 */
        width: 60px; /* 포인트 선의 길이 */
        height: 4px; /* 포인트 선의 두께 */
        background-color: #1a2b4c; /* 성원테크의 로고 색상이나 메인 테마 색상으로 변경하세요 */
        border-radius: 2px; /* 선의 양끝을 살짝 둥글게 처리 */
    }

/* 서브 타이틀(캐치프레이즈) 스타일 */
.section-subtitle {
    font-size: 1.1rem;
    color: #666666; /* 차분하고 세련된 회색 */
    font-weight: 400;
    margin-top: 25px; /* 메인 제목의 포인트 선 아래로 여백 생성 */
    letter-spacing: 0.5px;
}
.btn-submit {
    background-color: var(#4ca1af);
}

    .btn-submit:hover {
        background-color: var(#c4e0e5);
    }

/* 기본 레이아웃 */
.navbar {
    /*    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    background: #fff;
    z-index: 1000;*/
    display: flex; /* Flexbox 레이아웃 활성화 */
    align-items: center; /* ✨ 핵심: 상하(수직) 중앙 정렬 */
    justify-content: space-between; /* 로고는 왼쪽 끝, 메뉴는 오른쪽 끝으로 양극 배치 */
    height: 80px; /* 헤더의 전체 높이 (원하시는 높이로 수정하세요) */
}

.nav-links {
    display: flex;
    list-style: none;
}

    .nav-links li {
        position: relative;
        padding: 15px 20px;
    }

/* 서브메뉴 숨기기 및 마우스 오버 시 표시 */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #f9f9f9;
    list-style: none;
    min-width: 150px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
}

.dropdown:hover .submenu {
    display: block;
}

.submenu li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* 섹션 스타일 */
.section {
    /*height: 100vh;*/
    /*padding: 100px 50px;*/
    border-bottom: 1px solid #eee;
}

.section {
    position: relative;
    width: 100%;
    /* height: 800px;  <-- 혹시 이런 고정 높이 코드가 있다면 반드시 삭제하세요 */
    min-height: 100vh; /* 화면 꽉 차게 시작하되 콘텐츠가 많으면 아래로 늘어남 */
    padding: 100px 0; /* 위아래 여유 공간을 주어 섹션 간 간격 확보 */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 자식 요소가 삐져나가는 것 방지 */
}

/* 타임라인 전체 컨테이너 */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 50px auto;
    /* 중요: float 대신 clear 설정을 주거나 flex를 사용하여 높이 인식 */
    display: block;
    clear: both;
}

    /* 중앙 수직선 */
    .timeline::after {
        content: '';
        position: absolute;
        width: 4px;
        background-color: #007bff;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -2px;
    }

/* 타임라인 아이템 공통 */
.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
    /* float를 사용 중이라면 아래 clearfix 개념 추가 */
}

    /* 중앙 점(Circle) 스타일 */
    .timeline-item::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        right: -10px;
        background-color: #fff;
        border: 4px solid #007bff;
        top: 15px;
        border-radius: 50%;
        z-index: 1;
    }

    /* 왼쪽 아이템 */
    .timeline-item.left {
        left: 0;
        text-align: right;
    }
    /* 오른쪽 아이템 */
    .timeline-item.right {
        left: 50%;
    }

        /* 오른쪽 아이템 점 위치 조정 */
        .timeline-item.right::after {
            left: -10px;
        }

/* 박스 내용물 스타일 */
.timeline-content {
    padding: 20px;
    background-color: #f8f9fa;
    position: relative;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

    .timeline-content h3 {
        margin-top: 0;
        color: #007bff;
    }
    .timeline-content p {
        margin-top: 0;
        color: #333333;
    }

/* 모바일 대응 (화면이 작아지면 수직으로 일렬 정렬) */
@media screen and (max-width: 600px) {
    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

        .timeline-item.left {
            text-align: left;
        }

        .timeline-item::after {
            left: 21px;
        }

        .timeline-item.right {
            left: 0%;
        }
}

/* 실적현황 그리드 설정 */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* 개별 아이템 카드 */
.portfolio-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

    .portfolio-item:hover {
        transform: translateY(-10px); /* 위로 살짝 올라가는 효과 */
    }

/* 이미지 영역 */
.portfolio-image {
    position: relative;
    overflow: hidden;
    height: 220px;
}

    .portfolio-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.1); /* 이미지 확대 효과 */
}

/* 오버레이 (이미지 위 텍스트) */
.portfolio-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
}

#portfolio {
    clear: both; /* 위에서 float 등을 썼을 경우 강제로 흐름을 끊고 아래로 배치 */
    position: relative;
    z-index: 2;
}

.category {
    background: #007bff;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* 텍스트 정보 영역 */
.portfolio-info {
    padding: 20px;
}

    .portfolio-info h3 {
        margin: 0 0 10px 0;
        font-size: 1.2rem;
        color: #333;
    }

    .portfolio-info p {
        margin: 0;
        color: #666;
        font-size: 0.95rem;
        line-height: 1.5;
    }

/* 푸터 기본 스타일 */
.footer {
    background-color: #222;
    color: #bbb;
    padding: 60px 0 20px;
    font-size: 0.9rem;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-section {
    flex: 1;
    min-width: 250px;
}

    /* 제목 스타일 */
    .footer-section h3 {
        color: #fff;
        margin-bottom: 20px;
        font-size: 1.1rem;
        position: relative;
    }

        .footer-section h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 30px;
            height: 2px;
            background-color: #007bff;
        }

/* 로고 및 텍스트 */
.footer-logo {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.contact-info span {
    display: block;
    margin-bottom: 8px;
}

/* 링크 리스트 */
.footer-section ul {
    list-style: none;
    padding: 0;
}

    .footer-section ul li {
        margin-bottom: 10px;
    }

        .footer-section ul li a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s;
        }

            .footer-section ul li a:hover {
                color: #fff;
            }

/* 소셜 아이콘 */
.socials a {
    color: #fff;
    font-size: 1.5rem;
    margin-right: 15px;
    transition: transform 0.3s;
    display: inline-block;
}

    .socials a:hover {
        transform: translateY(-3px);
        color: #007bff;
    }

/* 하단 카피라이트 박스 */
.footer-bottom {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #333;
    font-size: 0.8rem;
}

.contact-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
}

.form-group {
    margin-bottom: 15px;
}

    .form-group input, .form-group textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1rem;
    }

.btn-submit {
    width: 100%;
    padding: 15px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

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

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
    font-size: 0.9rem;
}

input[type="file"] {
    padding: 10px;
    background: #fff;
    border: 1px dashed #007bff;
    cursor: pointer;
}

#backToTop {
    display: none; /* 처음에는 숨김 */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    border: none;
    outline: none;
    background-color: var(--main-color, #007bff); /* 이전에 설정한 변수 사용 */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%; /* 동그란 버튼 */
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: background-color 0.3s, transform 0.3s;
}

    #backToTop:hover {
        background-color: var(--main-hover, #0056b3);
        transform: scale(1.1); /* 호버 시 살짝 커짐 */
    }

/* 스크롤 시 클래스 추가 (JS에서 처리) */
.main-header.scrolled {
    /*background: rgba(0, 0, 0, 0.85);*/ /* 짙은 배경으로 변경 */
    /*backdrop-filter: blur(10px);*/ /* 유리 질감 효과 */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    padding: 0 50px;
}

.logo img {
    height: 60px;
    /*filter: brightness(0);*/ /* 이미지가 어둡다면 흰색으로 반전 */
}

.nav-menu {
    /*display: flex;
    list-style: none;
    gap: 50px;*/
    display: flex; /* 메뉴 항목들을 가로로 나열 */
    align-items: center; /* 메뉴 내부 항목들도 상하 중앙 정렬 */
    margin: 0; /* 기본 마진 제거 */
    padding: 0; /* 기본 패딩 제거 */
    list-style: none; /* 불릿(점) 기호 제거 */
}

    .nav-menu a {
        text-decoration: none;
        color: #007bff;
        font-size: 1.3rem;
        font-weight: 500;
        transition: color 0.3s;
    }

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

    /* 기본 메뉴 링크 스타일 */
    .nav-menu li a {
        text-decoration: none; /* 기본 밑줄 제거 */
        color: #333333; /* 기본 글씨 색상 (깔끔한 진한 회색) */
        font-weight: 500; /* 기본 글씨 굵기 */
        padding: 10px 15px; /* 마우스 클릭 영역을 넉넉하게 확보 */
        display: inline-block;
        /* 굵기와 색상이 변할 때 0.3초 동안 부드럽게 변하도록 설정 (핵심!) */
        transition: all 0.3s ease;
        margin-left: 30px; /* 메뉴 항목 사이의 간격 (원하는 만큼 조절) */
    }

        /* 마우스 커서를 올렸을 때(Hover) 스타일 */
        .nav-menu li a:hover {
            /* 마우스 오버 시 색상 변경
       기계 설비 시공 분야에 잘 어울리는 신뢰감 있는 진한 파란색 톤으로 예시를 넣었습니다. 
    */
            color: #0056b3;
            /* 글씨 굵게 표시 (Bold) */
            font-weight: 700;
        }
/* 우측 유틸리티 스타일 */
/*.nav-utils {
    display: flex;
    align-items: center;
    gap: 30px;
    color: #fff;
}

.lang-selector {
    font-size: 0.9rem;
    font-weight: bold;
}

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

/*.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .hamburger .bar {
        width: 30px;
        height: 2px;
        background-color: #fff;
    }
*/
/* 메인 비주얼 배경 섹션 */
/*.hero-section {
    height: 100vh;
    background: url('/images/your-hero-image.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

    .hero-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);*/ /* 이미지 위 검은색 반투명 막 */
        /*z-index: 1;
    }*/

/* 연혁 섹션 스타일 */
#history {
    /*background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.5));*/
    padding: 120px 0; /* 헤더가 고정이므로 상단 여백을 충분히 줌 */
    color: #fff;
}

/* 타임라인 글자 가독성 */
.timeline-content {
    background: rgba(255, 255, 255, 0.1); /* 반투명 박스 */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 8px;
}

/* 실적 현황 섹션 (연혁 바로 아래) */
#portfolio {
    background: #fff; /* 실적은 깔끔하게 흰색 배경으로 전환하여 분위기 환기 */
    color: #333;
    padding: 100px 0;
    position: relative;
    z-index: 10; /* 연혁 섹션 뒤로 숨지 않도록 설정 */
}

/* 섹션 제목 공통 */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 60px;
    text-align: center;
    position: relative;
}

    .section-title::after {
        content: '';
        display: block;
        width: 50px;
        height: 3px;
        background: #007bff;
        margin: 20px auto 0;
    }

/* 스크롤 전 (투명 상태) */
.main-header .nav-menu a {
    color: #000000;
}

/* 스크롤 후 (흰색 배경 상태) */
.main-header.scrolled {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

    .main-header.scrolled .nav-menu a {
        color: #000000;
    }

    .main-header.scrolled .logo img {
        filter: none;
    }
/* 로고 원래 색으로 */

/* 회사소개 (About) 섹션 스타일 */
#about .container {
    /* 1. 중앙 정렬을 위한 Flexbox 설정 */
    display: flex;
    flex-direction: column; /* 제목과 이미지를 세로로 나열 */
    align-items: center; /* 가로 방향 가운데 정렬 */
    justify-content: center; /* (필요시) 세로 방향 가운데 정렬 */
    /* 섹션 자체에 여백 추가 (선택사항) */
    padding-top: 50px;
    padding-bottom: 50px;
}

/* 섹션 제목 스타일 (이미 중앙정렬 되어있겠지만 확실하게 처리) */
#about .section-title {
    text-align: center;
    margin-bottom: 30px; /* 제목과 이미지 사이 간격 */
}

/* 이미지 감싸는 링크 태그 스타일 */
#about .container a {
    display: block; /* <a> 태그를 블록 요소로 만들어 마우스를 이미지 전체에 반응하게 함 */
    width: 100%; /* 모바일에서 부모 너비만큼 꽉 차게 */
    display: flex; /* <a> 내부에서도 이미지 중앙 정렬 */
    justify-content: center;
}

/* 인사말 전체를 감싸는 부드러운 배경 영역 (기존과 동일) */
.ceo-greeting-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 40px;
    background-color: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

/* 상단 제목 (좌측 정렬로 변경) */
.ceo-title {
    text-align: left;
    font-size: 2rem;
    color: #1a2b4c;
    font-weight: 800;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

/* 파란색 핵심 캐치프레이즈 (좌측 정렬로 변경) */
.ceo-catchphrase {
    text-align: left;
    font-size: 1.4rem;
    color: #0056b3;
    font-weight: 600;
    margin-bottom: 40px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
    word-break: keep-all;
    line-height: 1.5;
}

/* 본문 텍스트 스타일 (좌측 정렬로 변경) */
.ceo-text p {
    text-align: left;
    font-size: 1.1rem;
    color: #4a5568;
    line-height: 1.9;
    margin-bottom: 18px;
    word-break: keep-all;
}

/* 우측 하단 대표이사 서명 영역 (문서 관례상 우측 유지) */
.ceo-sign {
    margin-top: 50px;
    text-align: right;
    padding-right: 20px;
}

.ceo-thanks {
    text-align: left;
    display: block;
    font-size: 1.1rem;
    color: #718096;
    margin-bottom: 10px;
}

.ceo-name {
    font-size: 1.2rem;
    color: #2d3748;
}

    .ceo-name strong {
        font-size: 1.5rem;
        letter-spacing: 8px;
        margin-left: 10px;
        color: #1a2b4c;
    }

/* 📱 모바일 화면을 위한 반응형 최적화 */
@media (max-width: 768px) {
    .ceo-greeting-wrapper {
        padding: 40px 20px;
    }

    .pc-only {
        display: none;
    }

    .ceo-catchphrase {
        font-size: 1.2rem;
    }

    .ceo-text p {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* 모바일에서도 서명은 우측 정렬 유지 (원하시면 left로 변경 가능) */
    .ceo-sign {
        text-align: right;
        padding-right: 0;
    }
}