@charset "UTF-8";
/* bus01.css — business1.php 분리 스타일 (main03 문의 폼 섹션) */

/* ══════════════════════════════════
   main03 — 문의 폼 섹션
   배경: 풀 가로 #06090f
   내부: max-width 1600px 중앙 정렬
══════════════════════════════════ */

.main03-wrap {
  width: 100%;
  background: #06090f;
  color: #e8f0ff;
  font-family: 'Noto Sans KR', sans-serif;
}

.main03-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 7vw 140px;
}

/* ── 헤더 ── */
.main03-head-label {
  font-size: 12px;
  letter-spacing: .4em;
  color: #2a7fff;
  font-weight: 300;
  margin-bottom: 24px;
}
.main03-head-title {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: #e8f0ff;
  margin-bottom: 64px;
}

/* ── 섹션 구분선 ── */
.main03-divider {
  height: 1px;
  background: #1e2a40;
  margin: 0 0 40px;
}

/* ── 단계 블록 공통 ── */
.main03-step {
  padding: 40px 0;
  border-bottom: 1px solid #1e2a40;
  overflow: hidden;
  /* 숨김 상태 */
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  transition: max-height .6s cubic-bezier(.16,1,.3,1),
              opacity .5s ease,
              padding .4s ease;
}
.main03-step.show {
  max-height: 2000px;
  opacity: 1;
  padding-top: 40px;
  padding-bottom: 40px;
  pointer-events: auto;
}
/* 첫번째 step은 항상 노출 */
.main03-step.always {
  max-height: 2000px;
  opacity: 1;
  padding-top: 40px;
  padding-bottom: 40px;
  pointer-events: auto;
}

/* ── 질문 레이블 ── */
.main03-q-label {
  font-size: 15px;
  font-weight: 700;
  color: #e8f0ff;
  margin-bottom: 20px;
  letter-spacing: -.01em;
}
.main03-q-label .main03-req {
  color: #2a7fff;
  margin-left: 2px;
}

/* ── 선택 버튼 (pill) ── */
.main03-pill-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.main03-pill {
  padding: 11px 28px;
  border-radius: 100px;
  border: 1px solid #2a3a55;
  background: transparent;
  color: #7a8298;
  font-size: 14px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 300;
  cursor: pointer;
  transition: all .25s;
  white-space: nowrap;
}
.main03-pill:hover {
  border-color: #2a7fff;
  color: #e8f0ff;
}
.main03-pill.active {
  background: #2a7fff;
  border-color: #2a7fff;
  color: #fff;
  font-weight: 700;
}

/* ── 섹션 제목 (정보 입력 등) ── */
.main03-section-title {
  font-size: 17px;
  font-weight: 700;
  color: #e8f0ff;
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #2a3a55;
  letter-spacing: -.01em;
}
.main03-section-title .main03-req { color: #2a7fff; }

/* ── 폼 필드 ── */
.main03-field-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  border-bottom: 1px solid #1e2a40;
  padding: 18px 0;
  gap: 24px;
}
.main03-field-label {
  font-size: 13px;
  color: #7a8298;
  font-weight: 300;
  white-space: nowrap;
}
.main03-field-label .main03-req { color: #2a7fff; }
.main03-field-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: #e8f0ff;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 300;
  width: 100%;
  padding: 4px 0;
  caret-color: #2a7fff;
}
.main03-field-input::placeholder { color: #2a3a55; }

/* 파일첨부 */
.main03-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid #2a3a55;
  border-radius: 6px;
  background: transparent;
  color: #7a8298;
  font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif;
  cursor: pointer;
  transition: border-color .25s, color .25s;
  margin-bottom: 8px;
  margin-right: 8px;
}
.main03-file-btn:hover { border-color: #2a7fff; color: #e8f0ff; }

/* ── 하위 질문들 (광고 목적, 예산 등) ── */
.main03-sub-q {
  padding: 36px 0 0;
}
.main03-sub-q + .main03-sub-q { padding-top: 32px; }

.main03-sub-q-label {
  font-size: 16px;
  font-weight: 700;
  color: #e8f0ff;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.main03-sub-q-label .main03-req { color: #2a7fff; }
.main03-sub-q-hint {
  font-size: 12px;
  color: #4a6080;
  margin-bottom: 20px;
  font-weight: 100;
}

/* 체크박스 그룹 */
.main03-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.main03-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #7a8298;
  transition: color .2s;
  user-select: none;
}
.main03-check-item:hover { color: #e8f0ff; }
.main03-check-item input { display: none; }
.main03-check-box {
  width: 18px; height: 18px;
  border: 1px solid #2a3a55;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.main03-check-item input:checked ~ .main03-check-box {
  background: #2a7fff;
  border-color: #2a7fff;
}
.main03-check-box::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
  transition: opacity .15s;
}
.main03-check-item input:checked ~ .main03-check-box::after { opacity: 1; }
.main03-check-item input:checked ~ span { color: #e8f0ff; }

/* 라디오 그룹 */
.main03-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.main03-radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #7a8298;
  transition: color .2s;
  user-select: none;
}
.main03-radio-item:hover { color: #e8f0ff; }
.main03-radio-item input { display: none; }
.main03-radio-dot {
  width: 18px; height: 18px;
  border: 1px solid #2a3a55;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.main03-radio-dot::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity .15s;
}
.main03-radio-item input:checked ~ .main03-radio-dot {
  background: #2a7fff;
  border-color: #2a7fff;
}
.main03-radio-item input:checked ~ .main03-radio-dot::after { opacity: 1; }
.main03-radio-item input:checked ~ span { color: #e8f0ff; }

/* ── 텍스트에리어 ── */
.main03-textarea-wrap {
  padding: 36px 0 0;
}
.main03-textarea {
  width: 100%;
  min-height: 140px;
  background: #0c1220;
  border: 1px solid #1e2a40;
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 13px;
  color: #7a8298;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 100;
  line-height: 1.8;
  resize: vertical;
  outline: none;
  transition: border-color .25s;
  margin-top: 16px;
  caret-color: #2a7fff;
}
.main03-textarea:focus { border-color: #2a3a55; color: #e8f0ff; }
.main03-textarea::placeholder { color: #2a3a55; }

/* ── 개인정보 박스 ── */
.main03-privacy-wrap { padding: 36px 0 0; }
.main03-privacy-box {
  border: 1px solid #1e2a40;
  border-radius: 10px;
  padding: 24px;
  margin-top: 16px;
  background: #0c1220;
}
.main03-privacy-item { margin-bottom: 16px; }
.main03-privacy-item:last-child { margin-bottom: 0; }
.main03-privacy-title {
  font-size: 13px; font-weight: 700;
  color: #7a8298; margin-bottom: 4px;
}
.main03-privacy-text {
  font-size: 12px; color: #4a6080;
  font-weight: 100; line-height: 1.7;
}

.main03-privacy-agree {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px; cursor: pointer;
  font-size: 13px; color: #7a8298;
  transition: color .2s; user-select: none;
}
.main03-privacy-agree:hover { color: #e8f0ff; }
.main03-privacy-agree input { display: none; }
.main03-check-box-sm {
  width: 16px; height: 16px;
  border: 1px solid #2a3a55;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s;
}
.main03-check-box-sm::after {
  content: '';
  width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0; transition: opacity .15s;
}
.main03-privacy-agree input:checked ~ .main03-check-box-sm {
  background: #2a7fff; border-color: #2a7fff;
}
.main03-privacy-agree input:checked ~ .main03-check-box-sm::after { opacity: 1; }
.main03-privacy-agree input:checked ~ span { color: #e8f0ff; }

/* ── 캡차 ── */
.main03-captcha-wrap { padding: 32px 0 0; }
.main03-captcha-inner {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.main03-captcha-box {
  background: #0c1220;
  border: 1px solid #1e2a40;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #4a6080;
  font-family: monospace;
  text-decoration: line-through;
}
.main03-captcha-input {
  background: transparent;
  border: 1px solid #1e2a40;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  color: #e8f0ff;
  font-family: 'Noto Sans KR', sans-serif;
  outline: none;
  width: 120px;
  transition: border-color .25s;
  caret-color: #2a7fff;
}
.main03-captcha-input:focus { border-color: #2a7fff; }
.main03-captcha-icons { display: flex; gap: 6px; }
.main03-captcha-icon {
  width: 32px; height: 32px;
  border: 1px solid #1e2a40; border-radius: 6px;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #4a6080; transition: all .2s;
}
.main03-captcha-icon:hover { border-color: #2a7fff; color: #2a7fff; }
.main03-captcha-hint {
  font-size: 11px; color: #2a3a55;
  font-weight: 100; margin-top: 8px;
}

/* ── 제출 버튼 ── */
.main03-submit-wrap {
  padding-top: 48px;
  display: flex; justify-content: center;
}
.main03-submit-btn {
  display: inline-flex;
  align-items: center; gap: 10px;
  padding: 16px 56px;
  background: #2a7fff;
  border: none;
  border-radius: 100px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Noto Sans KR', sans-serif;
  cursor: pointer;
  letter-spacing: .05em;
  transition: background .25s, transform .2s, box-shadow .3s;
  box-shadow: 0 8px 32px rgba(42,127,255,.3);
}
.main03-submit-btn:hover {
  background: #1a5fd4;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(42,127,255,.45);
}
.main03-submit-btn svg {
  width: 18px; height: 18px; fill: none;
  stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 반응형 ── */
@media (max-width: 640px) {
  .main03-inner { padding: 70px 6vw 100px; }
  .main03-field-row { grid-template-columns: 100px 1fr; gap: 12px; }
  .main03-check-group { gap: 10px 16px; }
  .main03-radio-group { gap: 10px 16px; }
  .main03-submit-btn { width: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════
   ▣ 가독성 오버라이드 (단계별 폼 텍스트)
   - 전부 흰색
   - 기본 16px / 굵게 처리된 부분 18px
   - Contact 상단 라벨 = 히어로 스타일
══════════════════════════════════════════════ */

/* Contact 라벨 — 히어로처럼 크고 굵고 진하게 */
.main03-head-label {
  font-size: 17px;
  letter-spacing: .42em;
  color: #6aa8ff;
  font-weight: 800;
}

/* ── 굵게 처리된 텍스트 → 18px / 흰색 ── */
.main03-q-label,
.main03-section-title,
.main03-sub-q-label,
.main03-privacy-title,
.main03-submit-btn {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

/* ── 일반 단계 텍스트 → 16px / 흰색 ── */
.main03-pill,
.main03-pill:hover,
.main03-field-label,
.main03-field-input,
.main03-file-btn,
.main03-check-item,
.main03-radio-item,
.main03-textarea,
.main03-sub-q-hint,
.main03-privacy-text,
.main03-privacy-agree,
.main03-captcha-input,
.main03-captcha-hint {
  font-size: 16px;
  color: #ffffff;
}

/* 선택된 pill / 체크·라디오 텍스트도 흰색 유지 */
.main03-pill.active,
.main03-check-item input:checked ~ span,
.main03-radio-item input:checked ~ span,
.main03-privacy-agree input:checked ~ span { color: #ffffff; }

/* 캡차 코드(취소선) 도 읽히게 */
.main03-captcha-box { color: rgba(255,255,255,.85); }

/* 입력칸 안내문(placeholder) — 입력값과 구분되게 옅은 흰색 */
.main03-field-input::placeholder,
.main03-textarea::placeholder { color: rgba(255,255,255,.5); }

/* ── 선택 전 버튼 테두리 → 흰색 (선택 시 블루는 그대로) ── */
.main03-pill,
.main03-file-btn { border-color: #ffffff; }
/* .main03-pill.active 는 블루 배경/테두리 유지 (기존 규칙 우선) */

/* ══════════════════════════════════════════════
   ▣ 박스·라인 테두리 또렷하게
   (개인정보 박스, 텍스트영역, 캡차, 체크/라디오,
    섹션 구분선, 입력 밑줄 등)
══════════════════════════════════════════════ */

/* 구분선·밑줄 라인 */
.main03-divider { background: rgba(255,255,255,.32); }
.main03-step { border-bottom-color: rgba(255,255,255,.28); }
.main03-section-title { border-bottom-color: rgba(255,255,255,.38); }
.main03-field-row { border-bottom-color: rgba(255,255,255,.32); }

/* 박스 테두리 */
.main03-textarea,
.main03-privacy-box,
.main03-captcha-box,
.main03-captcha-input,
.main03-captcha-icon { border-color: rgba(255,255,255,.45); }
.main03-textarea:focus { border-color: rgba(255,255,255,.7); }

/* 체크박스·라디오 (선택 전) → 흰색 / 선택 시 블루는 기존 유지 */
.main03-check-box,
.main03-radio-dot,
.main03-check-box-sm { border-color: #ffffff; }