@charset "utf-8";

/* =========================================
   사업문의 전용 스타일
   ========================================= */

:root {
   --sub-hero-overlay: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
   --inquiry-form-max-width: 1000px;
   --inquiry-form-padding: var(--common-space-padding-x-default) var(--common-space-padding-x-default);
   --inquiry-form-radius: 0.8vw;
   --inquiry-field-padding: 20px 10px;
   --inquiry-field-radius: 0.5vw;
}

/* Hero Section (기본 세팅은 style.css 참고) */
main.hero2 {
   --hero-bg-image: url(../../assets/images/사업문의/hero_bg.webp);
   background: var(--sub-hero-overlay), var(--hero-bg-image) no-repeat center / cover;
}

/* Inquiry Section */
section.inquiry .title-area {
   align-items: center;
}

section.inquiry .title-area .title-box {
   align-items: center;
}

/* Inquiry Form */
section.inquiry .container form.inquiry-form {
   background-color: var(--color-bg-light);
   padding: var(--inquiry-form-padding);
   display: flex;
   flex-direction: column;
   gap: var(--box-gap-sm-default);
   width: 100%;
   min-width: 0;
   max-width: var(--inquiry-form-max-width);
   margin: 0 auto;
   border-radius: var(--inquiry-form-radius);
   overflow: hidden;
}

section.inquiry .container form.inquiry-form .form-row {
   display: flex;
   flex-wrap: wrap;
   min-width: 0;
   gap: var(--box-gap-sm-default);
}

/* 입력영역, 버튼 공통 */
section.inquiry input,
section.inquiry textarea,
section.inquiry button {
   padding: var(--inquiry-field-padding);
   border-radius: var(--inquiry-field-radius);
}

/* 
   1. Placeholder 스타일링
   - ::placeholder 가상 요소를 사용하여 입력 필드의 힌트 텍스트 색상을 설정합니다.
   - 실제 사용자가 입력하는 텍스트가 아닌, 비어 있을 때 보여지는 안내 문구 전용 스타일입니다.
*/
section.inquiry input::placeholder,
section.inquiry textarea::placeholder {
   color: var(--color-txt-light2);
}

section.inquiry .container form.inquiry-form .form-row input {
   flex: 1 1 0;
   min-width: 0;
   background-color: var(--color-bg-default);
}

section.inquiry .container form.inquiry-form textarea {
   width: 100%;
   min-width: 0;
   background-color: var(--color-bg-default);
}

section.inquiry .container form.inquiry-form button.btn-submit {
   width: 100%;
   background-color: var(--color-bg-highlight);
   color: var(--color-bg-default);
}

/* 유효성 메시지는 줄바꿈 영역으로 고정해 flex 축소/확장 충돌을 방지 */
section.inquiry .container form.inquiry-form .error-message {
   flex: 0 0 100%;
   color: #d64545;
   font-size: var(--fs-sm);
   line-height: 1.4;
}

section.inquiry .container form.inquiry-form input.error,
section.inquiry .container form.inquiry-form textarea.error {
   border: 1px solid #d64545;
}

/* 메일앱 자동 실행 실패 시 노출되는 무료 fallback 안내 영역 */
section.inquiry .container form.inquiry-form .mail-fallback {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 16px;
   background-color: #edf4ff;
   border: 1px solid #c8dcf8;
   border-radius: 10px;
}

section.inquiry .container form.inquiry-form .mail-fallback[hidden] {
   display: none;
}

section.inquiry .container form.inquiry-form .mail-fallback-title {
   font-weight: 700;
   color: var(--color-txt-default);
}

section.inquiry .container form.inquiry-form .mail-fallback-desc,
section.inquiry .container form.inquiry-form .mail-fallback-recipient {
   color: var(--color-txt-default);
}

section.inquiry .container form.inquiry-form .mail-fallback-actions,
section.inquiry .container form.inquiry-form .mail-fallback-links {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

section.inquiry .container form.inquiry-form .mail-fallback-btn,
section.inquiry .container form.inquiry-form .mail-fallback-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 40px;
   padding: 10px 14px;
   border-radius: 8px;
   font-size: var(--fs-sm);
   line-height: 1.3;
}

section.inquiry .container form.inquiry-form .mail-fallback-btn {
   border: 1px solid #89b4ea;
   background-color: var(--color-bg-default);
   color: var(--color-txt-highlight1);
}

section.inquiry .container form.inquiry-form .mail-fallback-link {
   border: 1px solid transparent;
   background-color: var(--color-bg-highlight);
   color: var(--color-txt-white);
}

section.inquiry .container form.inquiry-form .mail-fallback-status {
   font-size: var(--fs-sm);
   color: #2a6fbb;
}

section.inquiry .container form.inquiry-form .mail-fallback-status.is-error {
   color: #d64545;
}