/**
 * Contact 페이지 CSS 스타일시트
 * 
 * 용도: OpenLink AI의 문의 페이지 스타일을 정의하는 CSS 파일
 * 사용처: /templates/contact.html 페이지에서 사용되어 문의 폼과 연락처 정보의 스타일링 제공
 * 사용 이유:
 * - 미니멀하고 세련된 디자인으로 전문적인 이미지 전달
 * - 단계별 진행 상태 표시로 사용자 경험 향상
 * - 반응형 디자인으로 모든 디바이스에서 최적화된 문의 폼 제공
 * - 접근성을 고려한 폼 요소 스타일링으로 사용성 증대
 * - 시각적 피드백을 통한 폼 제출 상태 표시
 * 
 * 사용 방법:
 * - CSS 변수를 활용하여 색상과 스타일의 일관성 유지
 * - Flexbox와 Grid를 활용한 레이아웃 구성
 * - 미디어 쿼리를 통한 반응형 디자인 구현
 * - CSS 트랜지션을 활용한 부드러운 애니메이션 효과
 * - 접근성을 고려한 폼 요소 스타일링
 */

/* contact-page.css */
/* 미니멀 디자인의 연락처 페이지 스타일 - 반응형 문제 수정 */

/* CSS 변수 정의: 색상과 스타일의 일관성을 위한 변수 설정
 * 사용 이유: 색상 변경 시 한 곳에서만 수정하면 전체 페이지에 적용되어 유지보수성 향상
 * 사용 방법: var(--변수명) 형태로 사용하여 일관된 색상 적용
 */
:root {
    --primary-color: #333333; /* 주요 색상: 진한 회색 */
    --background-color: #ffffff; /* 배경 색상: 흰색 */
    --text-color: #333333; /* 텍스트 색상: 진한 회색 */
    --light-text: #777777; /* 연한 텍스트 색상: 중간 회색 */
    --input-border: #d8d8d8; /* 입력 필드 테두리 색상: 연한 회색 */
    --hover-color: #555555; /* 호버 색상: 중간 회색 */
    --error-color: #e53935; /* 오류 색상: 빨간색 */
    --success-color: #4caf50; /* 성공 색상: 초록색 */
}

/* 폰트 합성 비활성화: 브라우저의 자동 폰트 합성 방지
 * 사용 이유: 지정된 폰트가 정확히 표시되도록 하여 디자인 일관성 유지
 * 사용 방법: body와 html 요소에 적용하여 전체 페이지에 영향
 */
body, html {
    font-synthesis: none;
}

/* 페이지 기본 스타일: 전체 페이지의 기본 레이아웃과 스타일 정의
 * 사용 이유: 일관된 폰트, 색상, 레이아웃으로 전문적인 페이지 구성
 * 사용 방법: body 요소에 적용되어 페이지 전체의 기본 스타일 제공
 */
body {
    margin: 0; /* 기본 마진 제거 */
    padding: 0; /* 기본 패딩 제거 */
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* 폰트 스택 */
    color: var(--text-color); /* 텍스트 색상 */
    line-height: 1.6; /* 줄 간격 */
    background-color: var(--background-color); /* 배경 색상 */
    min-height: 100vh; /* 최소 높이: 전체 화면 높이 */
    display: flex; /* 플렉스 레이아웃 */
    flex-direction: column; /* 세로 방향 배치 */
}

/* 메인 컨텐츠: 페이지의 주요 콘텐츠 영역 스타일
 * 사용 이유: 헤더와 분리된 메인 콘텐츠 영역을 정의하여 레이아웃 구조화
 * 사용 방법: .main-content 클래스로 메인 콘텐츠 영역을 감싸서 스타일 적용
 */
.main-content {
    padding-top: 20px; /* 헤더 높이만큼 상단 패딩 */
    min-height: 0; /* 최소 높이 제거 */
    display: flex; /* 플렉스 레이아웃 */
    flex-direction: column; /* 세로 방향 배치 */
    align-items: center; /* 가로 중앙 정렬 */
    flex: 1; /* 남은 공간 모두 차지 */
    background-color: var(--background-color); /* 배경 색상 */
}

/* 연락처 컨테이너: 문의 폼과 연락처 정보를 담는 메인 컨테이너
 * 사용 이유: 문의 폼과 연락처 정보를 가로로 배치하여 효율적인 공간 활용
 * 사용 방법: .contact-container 클래스로 전체 문의 페이지 영역을 감싸서 스타일 적용
 */
.contact-container {
    display: flex; /* 플렉스 레이아웃 */
    flex-direction: row; /* 가로 방향 배치 */
    width: 100%; /* 전체 너비 */
    max-width: 1200px; /* 최대 너비 제한 */
    margin: 0 auto; /* 가로 중앙 정렬 */
    padding: 60px 40px; /* 상하 60px, 좌우 40px 패딩 */
    gap: 90px; /* 요소 간 간격 */
}

/* 문의 양식 컨테이너: 문의 폼을 담는 영역
 * 사용 이유: 문의 폼을 독립적인 영역으로 분리하여 관리 용이성 향상
 * 사용 방법: .contact-form-container 클래스로 문의 폼 영역을 감싸서 스타일 적용
 */
.contact-form-container {
    flex: 2; /* 플렉스 비율: 2 (연락처 정보보다 2배 넓음) */
    background-color: transparent; /* 투명 배경 */
    padding: 0; /* 패딩 제거 */
}

/* 연락처 정보 컨테이너: 회사 연락처 정보를 담는 영역
 * 사용 이유: 회사 연락처 정보를 별도 영역으로 분리하여 정보 전달 효과 증대
 * 사용 방법: .contact-info-container 클래스로 연락처 정보 영역을 감싸서 스타일 적용
 */
.contact-info-container {
    flex: 1; /* 플렉스 비율: 1 (문의 폼의 절반 너비) */
    background-color: transparent; /* 투명 배경 */
    padding-top: 80px; /* 상단 패딩: 문의 폼과 정렬 맞춤 */
}

/* 폼 헤더: 문의 폼 상단의 제목과 부제목 영역
 * 사용 이유: 문의 폼의 목적과 내용을 명확하게 전달하여 사용자 이해도 향상
 * 사용 방법: .form-header 클래스로 폼 헤더 영역을 감싸서 스타일 적용
 */
.form-header {
    margin-bottom: 30px; /* 하단 마진 */
}

/* 폼 제목: 문의 폼의 메인 제목
 * 사용 이유: 페이지의 핵심 목적을 명확하게 전달하여 사용자 인식 향상
 * 사용 방법: .form-title 클래스로 폼 제목에 스타일 적용
 */
.form-title {
    font-size: 42px; /* 폰트 크기 */
    font-weight: 500; /* 폰트 굵기 */
    color: var(--text-color); /* 텍스트 색상 */
    margin-bottom: 8px; /* 하단 마진 */
    letter-spacing: -0.02em; /* 자간: 약간 좁게 */
}

/* 폼 부제목: 문의 폼의 설명 텍스트
 * 사용 이유: 제목에 대한 추가 설명을 제공하여 사용자의 이해도 증대
 * 사용 방법: .form-subtitle 클래스로 폼 부제목에 스타일 적용
 */
.form-subtitle {
    font-size: 16px; /* 폰트 크기 */
    color: var(--light-text); /* 연한 텍스트 색상 */
    line-height: 1.5; /* 줄 간격 */
    max-width: 80%; /* 최대 너비 제한 */
}

/* 진행 상태 바: 문의 폼의 단계별 진행 상황을 표시하는 영역
 * 사용 이유: 사용자가 현재 어느 단계에 있는지 시각적으로 표시하여 진행 상황 인식
 * 사용 방법: .progress-container 클래스로 진행 상태 바 영역을 감싸서 스타일 적용
 */
.progress-container {
    margin-bottom: 40px; /* 하단 마진 */
}

/* 진행 상태 헤더: 진행 단계와 현재 단계 번호를 표시하는 영역
 * 사용 이유: 현재 진행 단계를 명확하게 표시하여 사용자 경험 향상
 * 사용 방법: .progress-header 클래스로 진행 상태 헤더 영역을 감싸서 스타일 적용
 */
.progress-header {
    display: flex; /* 플렉스 레이아웃 */
    justify-content: space-between; /* 양쪽 끝 정렬 */
    margin-bottom: 8px; /* 하단 마진 */
}

/* 진행 단계: 현재 진행 중인 단계명
 * 사용 이유: 현재 단계의 이름을 표시하여 사용자가 어떤 정보를 입력해야 하는지 인식
 * 사용 방법: .progress-step 클래스로 진행 단계 텍스트에 스타일 적용
 */
.progress-step {
    font-size: 12px; /* 폰트 크기 */
    font-weight: 500; /* 폰트 굵기 */
    color: var(--text-color); /* 텍스트 색상 */
    text-transform: uppercase; /* 대문자 변환 */
    letter-spacing: 0.05em; /* 자간 */
}

/* 진행 카운트: 현재 단계 번호
 * 사용 이유: 전체 단계 중 현재 단계의 위치를 숫자로 표시하여 진행 상황 명확화
 * 사용 방법: .progress-count 클래스로 진행 카운트 텍스트에 스타일 적용
 */
.progress-count {
    font-size: 12px; /* 폰트 크기 */
    color: var(--light-text); /* 연한 텍스트 색상 */
    letter-spacing: 0.05em; /* 자간 */
}

/* 진행 바: 진행 상황을 시각적으로 표시하는 바
 * 사용 이유: 전체 진행 상황을 시각적으로 표현하여 사용자 경험 향상
 * 사용 방법: .progress-bar 클래스로 진행 바 영역을 감싸서 스타일 적용
 */
.progress-bar {
    height: 1px; /* 높이: 1px */
    background-color: var(--input-border); /* 배경 색상: 연한 회색 */
    overflow: hidden; /* 넘치는 부분 숨김 */
}

/* 진행 바 채움: 현재까지 완료된 진행 상황을 표시하는 부분
 * 사용 이유: 완료된 진행 상황을 시각적으로 표시하여 성취감 제공
 * 사용 방법: .progress-fill 클래스로 진행 바의 채워진 부분에 스타일 적용
 */
.progress-fill {
    height: 100%; /* 전체 높이 */
    background-color: var(--text-color); /* 배경 색상: 진한 회색 */
    transition: width 0.3s ease; /* 너비 전환 효과 */
}

/* 폼 섹션 제목: 각 폼 섹션의 제목
 * 사용 이유: 폼의 각 섹션을 구분하여 사용자가 어떤 정보를 입력해야 하는지 명확히 인식
 * 사용 방법: .form-section-title 클래스로 폼 섹션 제목에 스타일 적용
 */
.form-section-title {
    font-size: 12px; /* 폰트 크기 */
    font-weight: 600; /* 폰트 굵기 */
    color: var(--text-color); /* 텍스트 색상 */
    margin-bottom: 20px; /* 하단 마진 */
    text-transform: uppercase; /* 대문자 변환 */
    letter-spacing: 0.05em; /* 자간 */
}

/* 폼 그리드: 입력 필드들을 그리드 형태로 배치하는 컨테이너
 * 사용 이유: 입력 필드들을 효율적으로 배치하여 공간 활용도 향상
 * 사용 방법: .form-grid 클래스로 입력 필드 그리드 영역을 감싸서 스타일 적용
 */
.form-grid {
    display: grid; /* 그리드 레이아웃 */
    grid-template-columns: 1fr 1fr; /* 2열 그리드: 동일한 너비 */
    gap: 20px; /* 그리드 간격 */
    margin-bottom: 40px; /* 하단 마진 */
}

/* 폼 입력 필드: 텍스트 입력, 셀렉트, 텍스트 영역의 공통 스타일
 * 사용 이유: 모든 입력 필드에 일관된 스타일을 적용하여 사용자 경험 향상
 * 사용 방법: .form-input, .form-select, .form-textarea 클래스로 각 입력 필드에 스타일 적용
 */
.form-input,
.form-select,
.form-textarea {
    width: 100%; /* 전체 너비 */
    padding: 12px 0; /* 상하 패딩 */
    font-size: 15px; /* 폰트 크기 */
    margin-bottom: 0; /* 하단 마진 제거 */
    border: none; /* 테두리 제거 */
    border-bottom: 1px solid var(--input-border); /* 하단 테두리만 표시 */
    background-color: transparent; /* 투명 배경 */
    color: var(--text-color); /* 텍스트 색상 */
    transition: border-color 0.3s; /* 테두리 색상 전환 효과 */
}

/* 입력 필드 플레이스홀더: 입력 필드의 안내 텍스트
 * 사용 이유: 사용자가 어떤 정보를 입력해야 하는지 안내하여 사용성 향상
 * 사용 방법: ::placeholder 가상 요소로 플레이스홀더 텍스트에 스타일 적용
 */
.form-input::placeholder,
.form-select::placeholder,
.form-textarea::placeholder {
    color: var(--light-text); /* 연한 텍스트 색상 */
    opacity: 0.7; /* 투명도 */
}

/* 입력 필드 포커스: 입력 필드에 포커스가 맞춰졌을 때의 스타일
 * 사용 이유: 현재 활성화된 입력 필드를 시각적으로 구분하여 사용자 경험 향상
 * 사용 방법: :focus 가상 클래스로 포커스 상태의 입력 필드에 스타일 적용
 */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--text-color); /* 테두리 색상: 진한 회색 */
    outline: none; /* 기본 아웃라인 제거 */
}

/* 텍스트 영역: 긴 텍스트 입력을 위한 영역
 * 사용 이유: 긴 텍스트 입력 시 적절한 크기와 스타일 제공
 * 사용 방법: .form-textarea 클래스로 텍스트 영역에 추가 스타일 적용
 */
.form-textarea {
    min-height: 120px; /* 최소 높이 */
    border: 1px solid var(--input-border); /* 전체 테두리 */
    padding: 12px; /* 전체 패딩 */
    resize: vertical; /* 세로 크기 조절만 허용 */
}

/* 셀렉트 필드 커스텀 스타일: 드롭다운 화살표 아이콘
 * 사용 이유: 기본 셀렉트 필드의 화살표를 커스텀 아이콘으로 변경하여 디자인 일관성 유지
 * 사용 방법: background-image로 SVG 화살표 아이콘을 배경으로 설정
 */
.form-select {
    appearance: none; /* 기본 스타일 제거 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* 커스텀 화살표 아이콘 */
    background-repeat: no-repeat; /* 배경 반복 제거 */
    background-position: right 4px center; /* 배경 위치: 오른쪽 중앙 */
    background-size: 12px; /* 배경 크기 */
    padding-right: 20px; /* 오른쪽 패딩: 아이콘 공간 확보 */
}

/* 체크박스 스타일: 개인정보 처리방침 동의 체크박스
 * 사용 이유: 체크박스와 라벨을 적절히 배치하여 사용성 향상
 * 사용 방법: .checkbox-label 클래스로 체크박스 라벨 영역을 감싸서 스타일 적용
 */
.checkbox-label {
    display: flex; /* 플렉스 레이아웃 */
    align-items: flex-start; /* 상단 정렬 */
    gap: 10px; /* 요소 간 간격 */
    cursor: pointer; /* 마우스 포인터: 클릭 가능함을 표시 */
    margin-bottom: 16px; /* 하단 마진 */
}

/* 체크박스 입력 필드: 커스텀 체크박스 스타일
 * 사용 이유: 기본 체크박스를 숨기고 커스텀 스타일의 체크박스로 대체
 * 사용 방법: .form-checkbox 클래스로 체크박스에 커스텀 스타일 적용
 */
.form-checkbox {
    margin-top: 4px; /* 상단 마진: 텍스트와 정렬 맞춤 */
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--input-border);
    position: relative;
    cursor: pointer;
}

.form-checkbox:checked {
    background-color: var(--text-color);
    border-color: var(--text-color);
}

.form-checkbox:checked::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
}

.checkbox-text {
    font-size: 14px;
    color: var(--light-text);
}

/* 버튼 스타일 */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
}

.prev-button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    background-color: transparent;
    border: 1px solid var(--input-border);
    cursor: pointer;
    transition: background-color 0.3s;
}

.prev-button:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.submit-button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
    color: var(--background-color);
    background-color: var(--text-color);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: var(--hover-color);
}

.submit-button.submitting {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 상태 메시지 */
.status-message {
    margin-top: 16px;
    padding: 12px;
    font-size: 14px;
}

.status-message.success {
    color: var(--success-color);
}

.status-message.error {
    color: var(--error-color);
}

/* 연락처 정보 영역 */
.info-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 30px;
    letter-spacing: -0.02em;
}

/* 연락처 카드 */
.contact-cards {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-card {
    margin-bottom: 0;
}

.card-icon {
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 16px;
}

.card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-text {
    font-size: 15px;
    color: var(--light-text);
    line-height: 1.5;
}

/* 공간 스타일링 */
.space-y-6,
.space-y-4 {
    display: flex;
    flex-direction: column;
}

.space-y-6 > div {
    margin-bottom: 32px;
}

.space-y-4 > * {
    margin-bottom: 16px;
}

.space-y-3 > * {
    margin-bottom: 12px;
}

/* 전체 높이 설정 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#root {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.contact-page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
}

/* 반응형 수정 - 오른쪽 영역이 잘리고 하단 여백이 부족한 문제 해결 */
@media (max-width: 992px) {

    .contact-form-container {
        width: 80%;
        margin-left: 20px;
        margin-top: 30px;
    }

    .contact-container {
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px 80px; /* 하단 패딩 크게 추가 */
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-info-container {
        padding-top: 80px; /* 상단 패딩 제거 */
        width: 80%;
        margin-left: 20px;
    }
    
    /* 주소 카드 가로 배치 */
    .contact-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* 제목 작게 조정 */
    .form-title {
        font-size: 36px;
    }
    
    .form-subtitle {
        max-width: 100%;
    }
}

/* 모바일 디바이스 */
@media (max-width: 767px) {
    .contact-container {
        padding: 30px 20px 100px; /* 하단 패딩 더 크게 */
    }
    
    .form-title {
        font-size: 32px;
    }
    
    .contact-info-container {
        width: 80%;
    }
    
    /* 주소 카드 다시 세로 배치 */
    .contact-cards {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    /* 카드 텍스트 줄이기 */
    .card-text {
        font-size: 14px;
        word-break: break-word; /* 긴 주소 줄바꿈 */
    }
    
    /* 버튼 전체 너비로 */
    .form-actions {
        flex-direction: column;
    }
    
    .prev-button, 
    .submit-button {
        width: 100%;
        padding: 12px;
    }
    
    /* 체크박스 텍스트 줄이기 */
    .checkbox-text {
        font-size: 13px;
    }
}

/* 매우 작은 화면 */
@media (max-width: 480px) {
    .contact-container {
        padding: 20px 15px 120px; /* 하단 패딩 더욱 크게 */
    }
    
    .form-title {
        font-size: 28px;
    }
    
    .form-subtitle {
        font-size: 14px;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 14px;
    }
    
    /* 카드 간격 줄이기 */
    .contact-cards {
        gap: 20px;
    }
    
    .contact-card {
        padding: 10px;
        background-color: #f9f9f9;
        border-radius: 6px;
    }
}

/* 추가 유틸리티 클래스 - 긴 텍스트 처리용 */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.word-break {
    word-break: break-word;
}