/* ============================================================
   새솔경영자문센터 | 상담신청 전용 스타일
   theme/saesol/css/counsel.css
   ============================================================ */

/* ── 히어로 (about.php ab-hero와 동일 구조) ── */
.cn-hero {
  position       : relative;
  min-height     : 380px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : #111 url('../img/counsel-bg.jpg') center/cover no-repeat;
  padding-top    : 80px;
}
.cn-hero::after {
  content  : '';
  position : absolute; inset: 0;
  background: rgba(0,0,0,.62);
}
.cn-hero-body {
  position  : relative; z-index: 1;
  padding   : 0 40px;
  text-align: center;
  width     : 100%;
}
.cn-hero-title {
  font-family   : 'Paperlogy', 'Pretendard', sans-serif;
  font-size     : clamp(22px, 2.8vw, 46px);
  font-weight   : 800;
  color         : #fff;
  letter-spacing: -.02em;
}
.cn-hero-title em {
  color     : #2C6E2C;
  font-style: normal;
}

/* ── 섹션 타이틀 블록 (about.php ab-title-block과 동일) ── */
.cn-title-wrap  { background: #fff; }
.cn-title-block {
  text-align   : left;
  padding      : 52px 0 40px;
  background   : #fff;
  max-width    : 1200px;
  margin       : 0 auto;
  padding-left : 60px;
  padding-right: 60px;
  border-bottom: 1px solid #e0e0e0;
}
.cn-title-line, 
.cn-title-h {
  font-family   : 'Paperlogy', 'Pretendard', sans-serif;
  font-size     : clamp(28px, 3.5vw, 48px);
  font-weight   : 700;
  color         : #111;
  letter-spacing: -.03em;
  margin-bottom : 12px;
}
.cn-title-sub {
  font-size: 15px;
  color    : #888;
}



/* ── 폼 섹션 헤드라인 ── */
.cn-form-head {
  margin-bottom: 40px;
}
.cn-form-eyebrow {
  font-family   : 'Paperlogy', 'Pretendard', sans-serif;
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 600;
  color         : #2C6E2C;
  letter-spacing: -.01em;
  margin-bottom : 10px;

}
.cn-form-headline {
  font-family   : 'Paperlogy', 'Pretendard', sans-serif;
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 600;
  color         : #111;
  letter-spacing: -.03em;
  line-height   : 1.3;
  margin-bottom : 52px;
}

/* ── 폼 섹션 ── */
.cn-form-section {
  background: #f7f8f7;
  padding   : 0 0 88px;
}
.cn-form-inner {
  max-width: 1200px;
  margin   : 0 auto;
  padding: 30px 0px 0;
}



/* ── 알림 ── */
.cn-alert {
  display      : flex;
  align-items  : flex-start;
  gap          : 12px;
  padding      : 16px 20px;
  border-radius: 10px;
  font-size    : 15px;
  line-height  : 1.6;
  margin-bottom: 32px;
}
.cn-alert--success { background: #eaf7ea; border: 1.5px solid #2C6E2C; color: #1a4a1a; }
.cn-alert--error   { background: #fff0f0; border: 1.5px solid #e03030; color: #7a1010; }
.cn-alert svg      { flex-shrink: 0; margin-top: 2px; }

/* ── 폼 그리드 ── */
.cn-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 20px;
  margin-bottom        : 20px;
}
.cn-field       { display: flex; flex-direction: column; gap: 8px; }
.cn-field--full { grid-column: 1 / -1; }

.cn-label {font-size: 18px;font-weight: 600;color: #222;}
.cn-label .req { color: #2C6E2C; margin-left: 3px; }

.cn-input,
.cn-textarea {
  width        : 100%;
  padding      : 13px 16px;
  border       : 1.5px solid #e2e2e2;
  border-radius: 8px;
  font-family  : 'Pretendard', sans-serif;
  font-size    : 15px;
  color        : #222;
  background   : #ffffff;
  transition   : border-color .2s, background .2s, box-shadow .2s;
  outline      : none;
  box-sizing   : border-box;
}
.cn-input::placeholder,
.cn-textarea::placeholder { color: #b0b0b0; }
.cn-input:focus,
.cn-textarea:focus {
  border-color: #2C6E2C;
  background  : #ffffff;
  box-shadow  : 0 0 0 3px rgba(44,110,44,.12);
}
.cn-input.is-error,
.cn-textarea.is-error { border-color: #e03030; }
.cn-textarea { resize: vertical; min-height: 140px; line-height: 1.7; }
.cn-hint     { font-size: 12px; color: #aaa; margin-top: 4px; }

/* ── 개인정보 동의 ── */
.cn-agree {
  display      : flex;
  align-items  : flex-start;
  gap          : 10px;
  padding      : 16px 20px;
  background   : #f7f8f7;
  border-radius: 8px;
  margin-bottom: 28px;
  cursor       : pointer;
}
.cn-agree input[type="checkbox"] {
  width        : 18px; height: 18px;
  flex-shrink  : 0; margin-top: 1px;
  accent-color : #2C6E2C; cursor: pointer;
}
.cn-agree-text         { font-size: 13px; color: #555; line-height: 1.6; }
.cn-agree-text strong  { color: #222; }

/* ── 제출 버튼 ── */
.cn-submit {
  width          : 100%;
  padding        : 18px;
  background     : #2C6E2C;
  color          : #ffffff;
  border         : none;
  border-radius  : 10px;
  font-family    : 'Paperlogy', 'Pretendard', sans-serif;
  font-size      : 17px;
  font-weight    : 700;
  letter-spacing : .02em;
  cursor         : pointer;
  transition     : background .2s, transform .15s, box-shadow .2s;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
}
.cn-submit:hover    { background: #235823; box-shadow: 0 6px 24px rgba(44,110,44,.35); transform: translateY(-1px); }
.cn-submit:active   { transform: translateY(0); }
.cn-submit:disabled { background: #999; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── 신뢰 뱃지 ── */
.cn-trust {
  display        : flex;
  justify-content: center;
  gap            : 28px;
  margin-top     : 28px;
  flex-wrap      : wrap;
}
.cn-trust-item {
  display    : flex;
  align-items: center;
  gap        : 7px;
  font-size  : 13px;
  color      : #888;
}
.cn-trust-item svg { stroke: #2C6E2C; }

/* ── spin 애니메이션 ── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 반응형 ── */
@media (max-width: 960px) {
  .cn-hero { min-height     : 380px; }
}
@media (max-width: 600px) {
  .cn-hero            { min-height: 200px; }
  .cn-hero-body       { padding: 0 24px; }
  .cn-title-block     { padding: 20px 20px 20px; }
  .cn-title-line, 
  
  .cn-card            { padding: 32px 24px; }
  .cn-grid            { grid-template-columns: 1fr; }
  .cn-form-section    { padding-bottom: 64px; }
  .cn-title-wrap  { background: #fff; }
  .cn-title-block {
    text-align   : left;
    padding      : 52px 0 40px;
    background   : #fff;
    max-width    : 1200px;
    margin       : 0 auto;
    padding-left : 60px;
    padding-right: 60px;
    border-bottom: 1px solid #e0e0e0;
  }
    .cn-card        { padding: 32px 24px; }
    .cn-grid        { grid-template-columns: 1fr; }
    .cn-form-section {
    background: #f7f8f7;
    padding   : 0 0 88px;
  }
}