/* ============================================================
   DENEX - About Intro Page Stylesheet
   ============================================================ */

.intro-section {
  margin-bottom: 64px;
}

/* ── 회사 개요 헤더 ──────────────────────────────────────── */
.intro-header {
  max-width: 760px;
}
.intro-header h2 {
  font-family: var(--font-en);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800; color: var(--charcoal);
  letter-spacing: -1px; line-height: 1.3;
  margin: 12px 0 20px;
}
.intro-header p {
  font-size: 15px; color: var(--char-lt);
  line-height: 1.9;
}

/* ── 섹션 제목 ───────────────────────────────────────────── */
.intro-section-title {
  font-family: var(--font-en);
  font-size: 20px; font-weight: 800;
  color: var(--charcoal); letter-spacing: -0.5px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--charcoal);
}

/* ── 기업 정보 테이블 ────────────────────────────────────── */
.intro-info-grid {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden;
}
.intro-info-row {
  display: grid; grid-template-columns: 140px 1fr;
  border-bottom: 1px solid var(--border);
}
.intro-info-row:last-child { border-bottom: none; }

.info-label {
  padding: 16px 20px;
  font-size: 13px; font-weight: 700;
  color: var(--white);
  background: var(--charcoal);
  display: flex; align-items: center;
}
.info-value {
  padding: 16px 24px;
  font-size: 14px; color: var(--charcoal);
  display: flex; align-items: center;
  background: var(--white);
}
.info-value a {
  color: var(--charcoal); transition: color .15s;
}
.info-value a:hover { color: var(--red); }

/* ── 핵심 역량 카드 ──────────────────────────────────────── */
.intro-strength-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.strength-card {
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.strength-card:hover {
  border-color: rgba(200,34,41,.2);
  box-shadow: 0 8px 28px rgba(200,34,41,.07);
  transform: translateY(-3px);
}
.strength-icon {
  font-size: 28px; margin-bottom: 14px;
}
.strength-card h4 {
  font-family: var(--font-en);
  font-size: 14px; font-weight: 800;
  color: var(--charcoal); margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.strength-card > p {
  font-size: 13px; color: var(--gray);
  line-height: 1.6; margin-bottom: 16px;
}
.strength-card ul {
  list-style: none; display: flex;
  flex-direction: column; gap: 6px;
}
.strength-card ul li {
  font-size: 13px; color: var(--char-lt);
  display: flex; align-items: center; gap: 6px;
}
.strength-card ul li::before {
  content: ''; width: 4px; height: 4px;
  background: var(--red); border-radius: 50%;
  flex-shrink: 0;
}

/* ── 주요 고객 분야 ──────────────────────────────────────── */
.intro-client-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.client-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 24px 12px;
  background: var(--gray-lt);
  border: 1px solid var(--border);
  border-radius: 14px; text-align: center;
  transition: background .15s, border-color .15s;
}
.client-card:hover {
  background: var(--red-lt);
  border-color: rgba(200,34,41,.2);
}
.client-icon { font-size: 28px; }
.client-card span {
  font-size: 12px; font-weight: 600;
  color: var(--charcoal); line-height: 1.4;
}

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  .intro-strength-grid { grid-template-columns: 1fr 1fr; }
  .intro-client-grid   { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .intro-strength-grid { grid-template-columns: 1fr; }
  .intro-client-grid   { grid-template-columns: repeat(2, 1fr); }
  .intro-info-row      { grid-template-columns: 100px 1fr; }
}