/* ==== index 전용 스타일 ==== */

/* 메시 그라데이션 히어로 + 그리드 배경 */
.hero--mesh{position:relative;overflow:hidden}
.hero--mesh::before{
  content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(60% 60% at 10% 20%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(50% 50% at 80% 30%, rgba(16,185,129,.12), transparent 60%),
    radial-gradient(40% 40% at 30% 80%, rgba(244,63,94,.10), transparent 60%),
    radial-gradient(50% 50% at 70% 80%, rgba(99,102,241,.10), transparent 60%);
  filter: blur(8px); z-index:-1;
}
.hero--mesh::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, rgba(0,0,0,.5), transparent 70%);
  mask-image: radial-gradient(60% 60% at 50% 30%, rgba(0,0,0,.5), transparent 70%);
  z-index:-1;
}
.title.gradient{
  background:linear-gradient(90deg,#1d4ed8,#06b6d4);
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* 로고 클라우드 */
.logo-cloud{padding:28px 0}
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:900px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
.logo-box{
  border:1px solid var(--border);border-radius:12px;background:var(--card);
  padding:14px;text-align:center;color:var(--muted);
  filter:grayscale(1) opacity(.8);
}

/* 경영 철학 – 강점카드 톤과 통일 */
.values{text-align:center}
.values .lead{margin-inline:auto}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
@media (max-width:960px){.values-grid{grid-template-columns:1fr}}
.values .feature-card{text-align:center}
.values .feature-card h3{margin:6px 0 8px}
.values .cta-wrap{margin-top:18px}
.icon-wrap{
  width:100px;height:100px;margin:0 auto 12px;border-radius:50%;
  border:1px solid var(--border);
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(37,99,235,.06), transparent 60%),
    var(--card);
  display:grid;place-items:center;
}
@media (prefers-color-scheme: dark){
  .icon-wrap{background:
    radial-gradient(60% 60% at 30% 30%, rgba(37,99,235,.12), transparent 60%),
    var(--card);}
}
.icon-wrap i{width:40px;height:40px;color:var(--muted)}

/* 숫자 섹션 */
.stats{
  border:1px solid var(--border);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(37,99,235,.05),transparent);
  box-shadow:var(--shadow);padding:18px
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stats-grid{grid-template-columns:1fr}}
.stat{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:16px;text-align:center}
.stat .num{font-size:2.2rem;font-weight:900;letter-spacing:-.5px}
.stat .label{color:var(--muted)}

/* 하단 CTA 배너 */
.cta-bar{
  border:1px solid var(--border);border-radius:16px;padding:18px;
  background:linear-gradient(135deg,rgba(29,78,216,.08),rgba(34,211,238,.08));
  display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap
}
/* 핵심 강점도 values와 동일 톤 적용 */
.features .feature-card{ text-align:center }
.features .feature-card h3{ margin:6px 0 8px }
/* 이미 .icon-wrap 스타일은 위에 있음(경영철학에서 재사용) */
/* === 핵심 강점: 가로형 카드 레이아웃 === */
.features .feature-card{ text-align:left }               /* 이전 center 규칙 덮어쓰기 */
.features .feature-card h3{ margin:0 0 6px }

.hcard{ display:flex; align-items:center; gap:14px }     /* 아이콘-텍스트 가로 정렬 */
@media (max-width:560px){ .hcard{ align-items:flex-start } }

.icon-wrap.sm{ width:72px; height:72px }                 /* 가로 카드용 작은 원형 아이콘 */
.hcard .text{ display:grid; gap:6px }                    /* 제목/설명 간격 */
/* ==== Dark Band (경영철학/핵심강점 공통) ==== */
.band-dark{
  background:#0b1220;           /* 아주 어두운 남색 */
  color:#e5e7eb;
  padding:72px 0;
}
.band-dark .lead{color:#a5b4fc; text-align:center; margin-inline:auto}
.band-dark h2{ text-align:center; margin:0 0 8px; font-weight:900 }
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:28px}
@media (max-width:960px){ .band-grid{grid-template-columns:1fr;gap:18px} }

.band-card{ text-align:center }
.disk{
  width:140px;height:140px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(50% 50% at 70% 70%, rgba(15,23,42,.5), rgba(15,23,42,.3));
  border:1px solid rgba(148,163,184,.18);
  box-shadow:
    inset 0 0 40px rgba(59,130,246,.08),
    0 0 0 1px rgba(255,255,255,.02);
}
.disk::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  box-shadow:inset 0 0 60px rgba(2,6,23,.6);
}
.disk i{ width:48px;height:48px;color:rgba(255,255,255,.9) }

.band-card h3{ margin:8px 0 6px; font-weight:800; color:#eef2ff }
.band-card p{ margin:0; color:#9ca3af }
.band-cta{ display:flex; justify-content:center; margin-top:22px }
.band-cta .btn{ box-shadow:0 6px 20px rgba(37,99,235,.35) }
/* 파트너/고객사 로고 이미지 스타일 */
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:900px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.logo-grid{grid-template-columns:repeat(2,1fr)}}

.logo-box{
  border:1px solid var(--border);
  border-radius:12px;
  background:#FCA5A5 !important;   /* ← 빨간 톤 고정 (오탈자 제거 + !important) */
  border-color:#FCA5A5 !important;  /* 테두리도 빨강 톤 */
  padding:16px;
  display:flex; align-items:center; justify-content:center;
  min-height:70px;
}

.logo-box img{
  max-height:26px;          /* 크기 통일(필요시 22~32px 사이 조절) */
  width:auto;
  object-fit:contain;
  filter:grayscale(1) opacity(.85);
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}

.logo-box:hover img{
  filter:none;               /* 호버 시 컬러 */
  opacity:1;
  transform:translateY(-1px);
}

/* 다크 배경(밴드)에서도 적절한 대비 유지 */
.band-dark .logo-box{background:rgba(255,255,255,.02);border-color:rgba(148,163,184,.18)}
.band-dark .logo-box img{filter:grayscale(1) opacity(.9)}
/* === Theme-aware variables for band sections === */
:root{
  --band-bg: #f8fafc;                 /* 라이트 배경 */
  --band-text: #0f172a;               /* 라이트 본문 */
  --band-muted: #475569;
  --disk-border: rgba(2,6,23,.08);
  --disk-glow: rgba(59,130,246,.08);
  --disk-inner: rgba(241,245,249,.7);
}
@media (prefers-color-scheme: dark){
  :root{
    --band-bg: #0b1220;               /* 다크 배경 */
    --band-text: #e5e7eb;             /* 다크 본문 */
    --band-muted: #9ca3af;
    --disk-border: rgba(148,163,184,.18);
    --disk-glow: rgba(59,130,246,.12);
    --disk-inner: rgba(15,23,42,.5);
  }
}

/* === Band (라이트/다크 자동 전환) === */
.band-auto{
  background: var(--band-bg);
  color: var(--band-text);
  padding: 72px 0;
}
.band-auto .lead{ color: var(--band-muted); text-align:center; margin-inline:auto }
.band-auto h2{ text-align:center; margin:0 0 8px; font-weight:900 }
.band-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:28px }
@media (max-width:960px){ .band-grid{ grid-template-columns:1fr; gap:18px } }
.band-card{ text-align:center }
.disk{
  width:140px;height:140px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(50% 50% at 70% 70%, var(--disk-inner), transparent);
  border:1px solid var(--disk-border);
  box-shadow: inset 0 0 40px var(--disk-glow), 0 0 0 1px rgba(255,255,255,.02);
}
.disk i{ width:48px; height:48px; color: rgba(255,255,255,.92) }
.band-card h3{ margin:8px 0 6px; font-weight:800 }
.band-card p{ margin:0; color:var(--band-muted) }
.band-cta{ display:flex; justify-content:center; margin-top:22px }
.band-auto .btn{ background: var(--brand) }
.band-auto .btn:hover{ background: var(--brand-700) }

/* (선택) 핵심강점 가로형 카드 재사용하면 이 두 줄 유지 */
.features .feature-card{ text-align:left }
.features .feature-card h3{ margin:0 0 6px }