/* ═══════════════════════════════════════════════════════════
   PHASE 5 — phase5.css
   대표 인사말 영역(역전 hero + 회사 연혁 + 인사말 본문) 신규 골격
   · index.html 전용, 최후 로드. 변수는 기존 테마 재사용.
   · 이동된 hero/company-history 원본 스타일은 그대로(미수정).
═══════════════════════════════════════════════════════════ */

/* 그룹 래퍼 — 별도 배경 없음(흰색 베이스 유지) */
.greeting-group {
  position: relative;
}

/* 대표 인사말 본문 (신규 빈 섹션) */
#greeting {
  scroll-margin-top: 80px; /* sticky 네비(64px) 보정 */
}
.greeting {
  background: var(--color-bg, #ffffff);
}
.greeting__head {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}
.greeting__placeholder {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 24px;
  border: 1px dashed #ddd;
  border-radius: 16px;
  background: #fafafa;
  color: #999999;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────
   대표 인사말 (CEO greeting) — 좌 프로필 / 우 본문 2단 + DACONNECT 배경 워터마크
   · 이미지 = HTML <img> 직접(CSS url 아님). 파일 전 빈 박스 폴백. 색 = 토큰(직접 hex 금지).
───────────────────────────────────────── */
.ceo-greeting {
  position: relative;
  overflow: hidden; /* 대형 워터마크 클립 */
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr; /* 좌 프로필 / 우 본문 */
  gap: clamp(28px, 5vw, 64px);
  align-items: start; /* 긴 인사말 본문 — 프로필을 상단 정렬(가운데 부유 방지) */
  padding: clamp(24px, 4vw, 48px) 0;
}
/* 배경 워터마크 DACONNECT — 우측 상단, 글자 전체 노출(잘림 없음). 흐린 골드 대형, 콘텐츠 뒤(z-index 0).
   right 양수 + font-size 캡으로 컨테이너 안에 'DACONNECT' 마지막 T까지 들어옴. */
.ceo-greeting__bg {
  position: absolute;
  top: clamp(-4px, 0.5vw, 16px); /* 우측 상단 */
  right: clamp(10px, 1.8vw, 32px); /* 양수 — 글자 전체 컨테이너 안(우측 잘림 없음) */
  z-index: 0;
  max-width: 100%; /* 컨테이너 넘침 방지 백스톱 */
  font-family: var(--font-en, sans-serif);
  font-weight: 900;
  font-size: clamp(2.4rem, 12vw, 9.5rem); /* 전체 글자 들어오는 선까지 축소(15vw/12rem → 12vw/9.5rem) */
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--gold, #f0c000) 18%, transparent); /* 흐린 노란색(골드, 낮은 opacity) */
  pointer-events: none;
  user-select: none;
}
/* 좌측 프로필 (얼굴 → 직함 → 성함, 위→아래) */
.ceo-greeting__profile {
  position: relative;
  z-index: 1; /* 워터마크 위 */
  text-align: center;
}
.ceo-greeting__face {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 16px;
  background: color-mix(in srgb, var(--black4, #1a1a1a) 5%, var(--white, #ffffff)); /* 파일 전 빈 박스 폴백 */
  color: transparent; /* 깨짐 아이콘/alt 노출 최소화 */
  font-size: 0;
}
.ceo-greeting__role {
  margin-top: 18px;
  font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--color-text, #1a1a1a);
}
.ceo-greeting__sign {
  display: block;
  margin: 14px auto 0; /* 캡션(다커넥트 기업 대표)과 서명 사이 여백 — 확대 비례(10→14px) */
  width: clamp(150px, 13vw, 220px); /* 서명 확대(원본 870×500 → 흐림 없음). 캡션보다 살짝 큰 위계 */
  height: auto;
  object-fit: contain;
  color: transparent;
  font-size: 0;
}
/* 우측 소개글 */
.ceo-greeting__body {
  position: relative;
  z-index: 1;
}
.ceo-greeting__body p {
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.9;
  color: var(--color-text-sub, #555555);
  word-break: keep-all;
}
/* 문단 간격 — 전역 reset(* margin:0) 보완 */
.ceo-greeting__body p + p {
  margin-top: clamp(0.9em, 1.4vw, 1.2em);
}
/* 맺음말(직함·성함) — 본문과 간격 + 진한 색 강조 */
.ceo-greeting__signoff {
  margin-top: clamp(1.6em, 3vw, 2.2em);
  font-weight: 800;
  color: var(--color-text, #1a1a1a);
}
/* ── 모바일 — 세로 전환(프로필 위 / 본문 아래) ── */
@media (max-width: 760px) {
  .ceo-greeting {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ceo-greeting__bg {
    font-size: clamp(1.8rem, 13vw, 4.2rem); /* 모바일 좁은 폭에서도 'DACONNECT' 전체 노출(잘림 없음) */
  }
}

/* ─────────────────────────────────────────
   [미사용 — 삭제 보류] 대표 인사말 풀스크린 오버레이 (Phase 5-2)
   ⚠️ 대표 인사말이 greeting.html(별도 페이지)로 분리되며 오버레이 제거됨.
      아래 .greeting-overlay* / body.greeting-overlay-open 규칙은 현재 매칭 요소 없음.
      (지시: 임의 삭제 금지 → 주석으로 표시, 삭제는 보고 후 결정)
───────────────────────────────────────── */
.greeting-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000; /* 헤더(100)·하단바(90) 위 */
  background: rgba(255, 255, 255, 0.98);
  display: flex;
}
.greeting-overlay[hidden] {
  display: none; /* hidden 속성 강제 (display:flex override) */
}
.greeting-overlay__inner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 72px 24px 56px;
}
.greeting-overlay__close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--color-line, #ececec);
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-text, #1a1a1a);
  cursor: pointer;
  z-index: 1;
  transition:
    border-color var(--transition, 0.25s),
    color var(--transition, 0.25s);
}
.greeting-overlay__close:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}
/* 오버레이 안에서는 섹션 과한 패딩 정리(가독) */
.greeting-overlay__content .greeting {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* body 스크롤 잠금 (오버레이 열림 동안) */
body.greeting-overlay-open {
  overflow: hidden;
}

/* ─────────────────────────────────────────
   메인 최상단 신규 히어로 — Phase 5-2 / 5-3
   · 흰 배경 베이스 + 수치카드 연노랑/골드 테두리(solution 패턴)
   · 빨강(--color-point-red)은 '다폰' 포인트만. 이모지·통이미지 없음.
   · 수치는 [확정필요] (HTML 주석으로 박제)
───────────────────────────────────────── */
:root {
  --color-point-red: #e23b34; /* 포인트 전용 빨강 (다폰 강조) */
}

.main-hero {
  background: var(--color-bg, #ffffff);
}
.main-hero__layout {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

/* 좌: 카피 */
.main-hero__badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold-dark);
  background: var(--color-bg-tint);
  border: 1px solid rgba(240, 192, 0, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.main-hero__headline {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 18px;
  word-break: keep-all;
}
.main-hero__headline em {
  font-style: normal;
  color: var(--color-point-red); /* '다폰' 빨강 포인트 */
}
.main-hero__hl-num {
  color: var(--gold-dark);
}
.main-hero__lead {
  font-size: 1rem;
  color: var(--color-text-sub, #3a3a3a);
  line-height: 1.8;
  margin-bottom: 28px;
  word-break: keep-all;
}
.main-hero__btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 우: 수치 카드 (흰/연노랑 + 골드 테두리) */
.main-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.main-hero__stat {
  background: var(--color-bg-tint);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
}
.main-hero__stat--key {
  grid-column: span 2;
  background: #ffffff;
}
.main-hero__stat-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
  background: var(--color-point-red);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.main-hero__stat-value {
  font-family: var(--font-ko);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 900;
  color: var(--color-text, #1a1a1a);
  line-height: 1.1;
  letter-spacing: 0.3px;
}
.main-hero__stat--key .main-hero__stat-value {
  font-size: clamp(2.1rem, 4vw, 3rem);
  color: var(--gold-dark);
}
.main-hero__stat-label {
  font-size: 0.82rem;
  color: var(--color-text-sub, #3a3a3a);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .main-hero__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .main-hero__stats {
    grid-template-columns: 1fr;
  }
  .main-hero__stat--key {
    grid-column: auto;
  }
  .main-hero__btns .btn-primary,
  .main-hero__btns .btn-secondary {
    flex: 1;
    text-align: center;
  }
}

/* ─────────────────────────────────────────
   CONSULT HERO (최상단 상담 유도) — 다폰 톤
   · 배경은 .section--tint(연노랑)가 담당 — 빨강 풀배경 없음
   · 강조: 핵심어 + 1차 버튼 = 골드(노랑) / 2차 버튼 = 카카오 옐로우(#fee500, 플로팅과 통일)
───────────────────────────────────────── */
.consult-hero__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.consult-hero__badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold-dark);
  background: #ffffff;
  border: 1px solid rgba(240, 192, 0, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.consult-hero__headline {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 18px;
  word-break: keep-all;
}
.consult-hero__headline em {
  font-style: normal;
  color: var(--gold); /* 핵심어 골드(노랑) 강조 */
}
.consult-hero__lead {
  font-size: 1.02rem;
  color: var(--color-text-sub, #3a3a3a);
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto 30px;
  word-break: keep-all;
}
.consult-hero__btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.consult-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.5px;
  padding: 15px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}
.consult-hero__btn svg {
  flex-shrink: 0;
}
/* 1차 = 골드(노랑) 버튼 */
.consult-hero__btn--primary {
  background: var(--gold);
  color: #1a1a1a;
  border: 2px solid var(--gold);
}
.consult-hero__btn--primary:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  transform: translateY(-2px);
}
/* 2차 = 카카오톡 옐로우 (플로팅 카카오 버튼과 색 통일) */
.consult-hero__btn--secondary {
  background: #fee500;
  color: #3a1d1d;
  border: 2px solid #fee500;
}
.consult-hero__btn--secondary:hover {
  background: #f6d800;
  border-color: #f6d800;
  transform: translateY(-2px);
}
.consult-hero__note {
  font-size: 0.88rem;
  color: var(--color-text-sub, #3a3a3a);
}
@media (max-width: 640px) {
  .consult-hero__btns {
    flex-direction: column;
  }
  .consult-hero__btn {
    width: 100%;
    justify-content: center;
  }
}