/*
 * 메인 컨텐츠를 감싸는 컨테이너
 * - 중앙 정렬, 배경색, 그림자 효과 등을 설정합니다.
 */
.tech-container { /* 클래스 이름 변경 */
    /*max-width: 1281px;*/                   /* 최대 너비 제한 */
    width: 100%;
    margin: 10px 0 40px 0;                  /* 위아래 여백 10px 추가, 가로 중앙 정렬 */
    background-color: #ffffff;          /* 컨테이너 배경색 */
    padding: 20px 20px 10px 20px;                      /* 내부 패딩 */
    border-radius: 8px;                 /* 모서리 둥글게 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 그림자 효과 */
}

/*
 * 헤더 섹션 (메인 제목 포함)
 * - 배경색, 패딩, 마진, 텍스트 정렬 등을 설정합니다.
 */
.tech-container header {
    background-color: #003A63;          /* 헤더 배경색 변경 */
    color: #ffffff;                     /* 헤더 텍스트색 */
    padding: 15px 20px;                 /* 내부 패딩 */
    border-radius: 8px 8px 0 0;         /* 상단 모서리만 둥글게 */
    margin: -20px -20px 10px -20px;     /* 컨테이너 바깥으로 확장 및 하단 마진 */
    display: flex;                      /* 플렉스박스 레이아웃 */
    align-items: center;                /* 수직 중앙 정렬 */
    justify-content: center;            /* 수평 중앙 정렬 */
    position: relative;                 /* 자식 요소 위치 지정을 위한 기준 */
    overflow: hidden;                   /* 내용이 넘칠 경우 숨김 */
}

/*
 * 메인 제목 스타일
 * - 폰트 크기, 굵기, 정렬 등을 설정합니다.
 */
.tech-container .main-title {
    font-size: 1.0em;                   /* 업체기술홍보 타이틀 폰트 크기 줄임 */
    font-weight: 600;                   /* 폰트 굵기 */
    margin: 0;                          /* 기본 마진 제거 */
    display: flex;                      /* 플렉스박스 레이아웃 */
    align-items: center;                /* 수직 중앙 정렬 */
}

/*
 * 메인 제목의 화살표 아이콘 스타일 (애니메이션 제거)
 * - 색상, 마진, 폰트 크기, 굵기 등을 설정합니다.
 * - text-shadow를 사용하여 시각적인 두께감을 더함.
 */
.tech-container .main-title .orange-arrow {
    color: #ff8c00;                     /* 주황색 */
    margin-right: 10px;                 /* 오른쪽 마진 */
    font-size: 1.0em;                   /* 아이콘 크기 유지 */
    font-weight: 900;                   /* 화살표 굵기 */
    transform: translateX(0);           /* 애니메이션 효과 제거 */
    /* text-shadow를 통해 시각적으로 더 두껍게 보이게 함 */
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor,
    0 1px 0 currentColor, 0 -1px 0 currentColor,
    2px 0 0 currentColor, -2px 0 0 currentColor,
    0 2px 0 currentColor, 0 -2px 0 currentColor;
}

.tech-container .main-title .red-arrow {
    color: #e74c3c;                     /* 빨간색 */
    margin-left: 10px;                  /* 왼쪽 마진 */
    font-size: 1.0em;                   /* 아이콘 크기 유지 */
    font-weight: 900;                   /* 화살표 굵기 */
    transform: translateX(0);           /* 애니메이션 효과 제거 */
    /* text-shadow를 통해 시각적으로 더 두껍게 보이게 함 */
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor,
    0 1px 0 currentColor, 0 -1px 0 currentColor,
    2px 0 0 currentColor, -2px 0 0 currentColor,
    0 2px 0 currentColor, 0 -2px 0 currentColor;
}

.tech-container .main-title .title-text {
    position: relative;                 /* z-index 적용을 위한 기준 */
    z-index: 1;                         /* 텍스트가 화살표 위에 오도록 */
    font-weight: 700;                   /* 업체기술홍보 타이틀 bold 처리 */
}

/*
 * 일반 섹션 스타일
 * - 하단 마진, 패딩, 배경색, 테두리 등을 설정합니다.
 * - 모든 섹션의 하단 마진을 2px로 통일
 */
.tech-container .section {
    margin-bottom: 10px;                 /* 섹션 간 하단 마진을 2px로 통일 */
    padding: 15px;                      /* 내부 패딩 */
    background-color: #f8f8f8;          /* 섹션 배경색을 연한 회색으로 변경 */
    border-radius: 6px;                 /* 모서리 둥글게 */
    border: 1px solid #eee;             /* 얇은 테두리 */
}

/*
 * 섹션 제목 스타일
 * - 폰트 크기, 색상, 하단 테두리 등을 설정합니다.
 */
.tech-container .section-title {
    font-size: 0.9em;                  /* 폰트 크기 줄임 */
    color: #004080;                     /* 제목 글자색 */
    margin-top: 0;                      /* 상단 마진 제거 */
    margin-bottom: 15px;                /* 하단 마진 */
    border-bottom: 1px solid #e0e0e0;   /* 하단 테두리 */
    padding-bottom: 8px;                /* 하단 패딩 */
    display: flex;                      /* 플렉스박스 레이아웃 */
    align-items: center;                /* 수직 중앙 정렬 */
    font-weight: 700;                   /* 등재절차 제목 bold 처리 */
}

/*
 * 섹션 제목 아이콘 스타일
 */
.tech-container .section-title .icon {
    color: #004080;                     /* 아이콘 색상 */
    margin-right: 8px;                  /* 오른쪽 마진 */
    font-size: 1.0em;                   /* 아이콘 크기 */
}

/*
 * 목록 (ul) 스타일
 * - 기본 목록 스타일 제거, 패딩, 마진 제거.
 */
.tech-container .content-list {
    list-style: none;                   /* 목록 마커 제거 */
    padding: 0;                         /* 기본 패딩 제거 */
    margin: 0;                          /* 기본 마진 제거 */
}

/*
 * 목록 항목 (li) 스타일
 * - 하단 마진, 왼쪽 패딩 (아이콘 공간), 상대 위치 지정을 설정합니다.
 */
.tech-container .content-list li {
    margin-bottom: 6px;                 /* 항목 간 하단 마진 */
    padding-left: 25px;                 /* 아이콘 공간 확보 */
    position: relative;                 /* 아이콘 위치 지정을 위한 기준 */
    color: #003A63;                     /* 목록 항목 텍스트 색상 변경 */
    font-size: 0.8em;                   /* 목록 항목 폰트 크기 줄임 */
    line-height: 1.5;                   /* 줄간 위아래 간격 추가 */
}

/* 마지막 목록 항목의 하단 마진 제거 및 위 간격 유지 */
.tech-container .content-list li:last-child {
    margin-bottom: 0;
    margin-top: 15px;
}

/*
 * 목록 항목 내 아이콘 스타일 (공통)
 * - 절대 위치, 크기, 색상 등을 설정합니다.
 */
.tech-container .content-list li .icon-small {
    position: absolute;                 /* 절대 위치 지정 */
    left: 0;                            /* 왼쪽에 배치 */
    top: 3px;                           /* 상단에서 위치 조정 */
    font-size: 0.9em;                   /* 아이콘 크기 */
    color: #003A63;                     /* 아이콘 색상 변경 */
}

/*
 * "자재공법 홍보방이란?" 하위 내용 도트 아이콘 전용 스타일
 * - 더 작은 크기와 텍스트와의 정렬을 조정합니다.
 */
.tech-container .content-list li .dot-icon {
    font-size: 0.5em;                   /* 도트 아이콘 크기 */
    vertical-align: middle;             /* 텍스트와 수직 정렬 */
    top: 0.6em;                         /* 텍스트 중간에 오도록 조정 */
    color: #003A63;                     /* 도트 색상 변경 */
}

/*
 * 등재 절차 흐름 (Process Flow) 레이아웃
 * - 플렉스박스를 이용한 수평 정렬, 간격, 하단 마진 등을 설정합니다.
 */
.tech-container .process-flow {
    display: flex;                      /* 플렉스박스 레이아웃 */
    justify-content: center;            /* 수평 중앙 정렬 */
    align-items: center;                /* 수직 중앙 정렬 */
    flex-wrap: wrap;                    /* 요소가 넘칠 경우 줄바꿈 */
    margin-top: 3px;
    margin-bottom: 1px;                 /* 하단 마진 유지 */
    gap: 10px;                          /* 요소 간 간격 */
}

/*
 * 등재 절차의 각 단계 스타일
 * - 텍스트 정렬, 배경색, 패딩, 테두리, 그림자 등을 설정합니다.
 */
.tech-container .process-flow .step {
    text-align: center;                 /* 텍스트 중앙 정렬 */
    background-color: #e0f7fa;          /* 배경색 */
    padding: 10px 15px;                 /* 내부 패딩 */
    border-radius: 6px;                 /* 모서리 둥글게 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* 그림자 효과 */
    width: 160px;
    min-width: 100px;                   /* 최소 너비 */
    flex-basis: auto;                   /* 내용에 따라 너비 조절 */
}

/* 마우스 오버 시 움직임 효과 제거 */
.tech-container .process-flow .step:hover {
    transform: translateY(0);           /* 움직임 효과 제거 */
}

/*
 * 등재 절차 단계 아이콘 스타일
 */
.tech-container .process-flow .step-icon {
    font-size: 1.8em;                   /* 아이콘 크기 */
    color: #00796b;                     /* 아이콘 색상 */
    margin-bottom: 5px;                 /* 하단 마진 */
}

/*
 * 등재 절차 단계 텍스트 스타일
 */
.tech-container .process-flow .step p {
    margin: 0;                          /* 기본 마진 제거 */
    font-weight: 500;                   /* 폰트 굵기 */
    color: #333;                        /* 글자색 */
    font-size: 0.8em;                   /* 폰트 크기 줄임 */
}

/*
 * 등재 절차의 화살표 아이콘 스타일
 */
.tech-container .process-flow .arrow-icon {
    font-size: 1.4em;                   /* 아이콘 크기 */
    color: #ccc;                        /* 아이콘 색상 */
    margin: 0 5px;                      /* 좌우 마진 */
}

/*
 * 반응형 디자인 - 태블릿 및 소형 데스크톱 (최대 768px)
 */
@media (max-width: 768px) {
    .tech-container .main-title {
        font-size: 1.1em;               /* 폰트 크기 줄임 */
    }
    .tech-container .process-flow {
        flex-direction: column;         /* 세로로 정렬 */
        align-items: center;            /* 중앙 정렬 */
    }
    .tech-container .process-flow .arrow-icon {
        transform: rotate(90deg);       /* 세로일 때 화살표 회전 */
        margin: 5px 0;                  /* 마진 조정 */
    }
}

/*
 * 반응형 디자인 - 모바일 (최대 480px)
 */
@media (max-width: 480px) {
    .tech-container { /* 컨테이너 자체 패딩 조정 */
        padding: 10px;
    }
    .tech-container header {
        padding: 10px;                  /* 패딩 감소 */
    }
    .tech-container .main-title {
        font-size: 0.9em;               /* 폰트 크기 줄임 */
    }
    .tech-container .section-title {
        font-size: 0.85em;              /* 폰트 크기 줄임 */
    }
    .tech-container .content-list li {
        padding-left: 20px;             /* 패딩 감소 */
    }
    .tech-container .process-flow .step {
        width: 90%;                     /* 너비 조정 */
        min-width: unset;               /* 최소 너비 제한 해제 */
    }
}


/* style.css */

/* 기술혁신 컨테이너: 최대 너비 1281px, 가운데 정렬 */
.innovation-container {
    max-width: 1281px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* 기본적으로 세로 배치 (모바일 우선) */
    align-items: center; /* 자식 요소 가운데 정렬 */
    padding: 20px; /* 내부 여백 */
    box-sizing: border-box; /* 패딩을 너비에 포함 */
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; /* 폰트 설정 */
    color: #333; /* 텍스트 색상 */
    line-height: 1.6; /* 줄 간격 */
}

/* 이미지 영역: 상단에 배치될 이미지 컨테이너 */
.innovation-image-area {
    max-width: 1281px;
    margin-bottom: 30px; /* 이미지 하단 여백 */
    overflow: hidden; /* 이미지가 넘치지 않도록 숨김 */
    border-radius: 40px; /* 모서리 둥글게 */
}

/* 이미지 스타일: 부모 컨테이너에 맞춰 크기 조절 */
.innovation-image-area img {
    max-width: 1281px;
    height: 295px; /* 높이 295px 고정 */
    object-fit: cover; /* 이미지가 잘리더라도 비율 유지하며 채움 */
    display: block; /* 이미지 하단 기본 여백 제거 */
}

/* 텍스트 영역: 이미지 하단에 배치될 텍스트 컨테이너 */
.innovation-text-area {
    max-width: 1281px;
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* paragraph-item과 connector-icon을 세로로 배치 */
    align-items: center; /* 가운데 정렬 */
}

/* 단락 아이템 스타일 */
.paragraph-item {
    border: 1px solid #ccc; /* 테두리 스타일 유지 */
    border-radius: 20px; /* 더 커진 테두리 모서리 둥글게 */
    padding: 15px; /* 내부 여백 */
    margin-bottom: 15px; /* 아이콘과 간격 줄임 */
    display: flex; /* 아이콘과 텍스트를 가로로 배치 */
    align-items: center; /* 아이콘과 텍스트 세로 중앙 정렬 */
    width: 90%; /* 텍스트 박스 너비 조정 */
}

/* 연결 아이콘 스타일 */
.connector-icon {
    font-size: 1.0em;
    color: #000;
    margin-bottom: 15px; /* 텍스트 박스와 아이콘 사이 간격 줄임 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 현재 .innovation-text-area가 align-items: center; 이므로,
       connector-icon도 자동으로 중앙에 위치합니다.
       따라서 position: relative; left: 50%; transform: translateX(-50%); 는 제거합니다. */
}

/* 마지막 연결 아이콘 숨김 */
.innovation-text-area > *:last-child.connector-icon {
    display: none;
}

/* 아이콘 기본 스타일 */
.paragraph-item .icon {
    border-radius: 30%; /* 동그란 모양 만들기 */
    width: 3.5em; /* 아이콘 배경 너비 증가 */
    height: 3.5em; /* 아이콘 배경 높이 증가 */
    min-width: 3em; /* 아이콘 영역 최소 너비 설정 */
    margin-right: 20px; /* 아이콘 오른쪽 여백 증가 */
    font-size: 1.7em; /* 아이콘 크기 증가 */
    display: flex; /* 아이콘을 배경 안에서 가운데 정렬 */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1); /* 더 풍부한 그림자 효과 */
    transition: all 0.3s ease; /* 부드러운 애니메이션 효과 */
    position: relative;
    overflow: hidden;
}

/* 첫 번째 아이콘 스타일 */
.paragraph-item:nth-child(1) .icon {
    background: linear-gradient(135deg, #154064 20%, #2c5a84 80%); /* 그라데이션 배경 */
    color: white; /* 아이콘 색상 */
    border: 2px solid rgba(255, 255, 255, 0.2); /* 반투명 테두리 */
}

/* 첫 번째 아이콘 호버 효과 */
.paragraph-item:nth-child(1) .icon:hover {
    transform: translateY(-2px) scale(1.05); /* 살짝 위로 이동하며 확대 */
    box-shadow: 0 6px 20px rgba(21, 64, 100, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 두 번째 아이콘 스타일 */
.paragraph-item:nth-child(3) .icon {
    background: linear-gradient(135deg, #f36f21 20%, #ff8c42 80%); /* 그라데이션 배경 */
    color: white; /* 아이콘 색상 */
    border: 2px solid rgba(255, 255, 255, 0.2); /* 반투명 테두리 */
}

/* 두 번째 아이콘 호버 효과 */
.paragraph-item:nth-child(3) .icon:hover {
    transform: translateY(-2px) scale(1.05); /* 살짝 위로 이동하며 확대 */
    box-shadow: 0 6px 20px rgba(243, 111, 33, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 세 번째 아이콘 스타일 */
.paragraph-item:nth-child(5) .icon {
    background: linear-gradient(135deg, #3966cc 20%, #5a7ddb 80%); /* 그라데이션 배경 */
    color: white; /* 아이콘 색상 */
    border: 2px solid rgba(255, 255, 255, 0.2); /* 반투명 테두리 */
}

/* 세 번째 아이콘 호버 효과 */
.paragraph-item:nth-child(5) .icon:hover {
    transform: translateY(-2px) scale(1.05); /* 살짝 위로 이동하며 확대 */
    box-shadow: 0 6px 20px rgba(57, 102, 204, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 아이콘에 반짝이는 효과 추가 */
/*.paragraph-item .icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    transform: rotate(45deg);
    animation: shine 2s infinite;
}*/

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    50% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
    100% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
}

/* 텍스트 스타일 */
.paragraph-item .text {
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 설정 */
    text-align: left; /* 텍스트 왼쪽 정렬 */
    font-weight: bold; /* 텍스트 굵게 */
    display: flex; /* 텍스트를 세로 중앙 정렬하기 위해 flexbox 사용 */
    align-items: center;
    line-height: 1.8; /* 줄간격 증가 */
}

/* 버튼 영역 스타일 */
.button-area {
    display: flex;
    justify-content: center; /* 버튼들을 가로 중앙 정렬 */
    gap: 20px; /* 버튼 사이 간격 */
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    flex-wrap: wrap; /* 작은 화면에서 버튼이 줄 바꿈되도록 설정 */
}

/* 커스텀 버튼 스타일 */
.custom-button {
    background-color: #003a63; /* 버튼 배경색 변경 */
    color: white; /* 버튼 텍스트 색상 변경 */
    width: 200px;
    border: 1px solid #003a63; /* 테두리도 배경색과 동일하게 */
    border-radius: 20px; /* 라운딩 처리 강화 */
    padding: 10px 16px; /* 패딩 감소 */
    font-size: 0.9em; /* 글꼴 크기 감소 */
    font-weight: 400;
    cursor: pointer; /* 마우스 오버 시 커서 변경 */
    display: flex; /* 텍스트와 아이콘을 가로로 배치 */
    align-items: center; /* 텍스트와 아이콘을 세로로 중앙 정렬 */
    justify-content: center; /* 버튼 내용을 가로 중앙 정렬 */
    gap: 6px; /* 텍스트와 아이콘 사이 간격 감소 */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* 부드러운 배경 및 테두리 변화 */
    white-space: nowrap; /* 버튼 텍스트가 줄 바꿈되지 않도록 설정 */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 은은한 그림자 추가 */
}

.custom-button:hover {
    background-color: #004c7d; /* 호버 시 약간 밝은 배경색 */
    border-color: #004c7d; /* 호버 시 테두리 색상도 변경 */
}

.custom-button i {
    font-size: 0.9em; /* 아이콘 크기 감소 */
}

/* 미디어 쿼리: 화면 너비 768px 이상일 때 적용 */
@media (min-width: 768px) {
    .innovation-container {
        flex-direction: column; /* 데스크탑에서도 세로 배치 유지 */
    }

    .innovation-image-area {
        margin-bottom: 40px; /* 이미지 하단 여백 증가 */
    }

    .innovation-text-area {
        padding: 30px; /* 텍스트 영역 내부 여백 증가 */
        align-items: stretch; /* 데스크탑에서는 좌우로 늘리기 */
        margin-bottom: 40px; /* 버튼 영역과의 간격 증가 */
    }

    .paragraph-item {
        width: 100%;
        margin-bottom: 20px; /* 아이콘과 간격 줄임 */
    }

    .connector-icon {
        margin-bottom: 20px; /* 텍스트 박스와 아이콘 사이 간격 줄임 */
    }

    .button-area {
        gap: 30px; /* 데스크탑에서 버튼 사이 간격 증가 */
    }

    .custom-button {
        padding: 12px 20px; /* 데스크탑에서 버튼 패딩 감소 */
        font-size: 1.0em; /* 데스크탑에서 글꼴 크기 감소 */
        border-radius: 25px; /* 데스크탑에서 라운딩 감소 */
    }

    .custom-button i {
        font-size: 1.0em; /* 데스크탑에서 아이콘 크기 감소 */
    }
}