/* 서비스 소개 · 이력/강점 섹션 스타일 — styles.css의 토큰을 그대로 쓰고 300줄 한도 때문에 분리했다 */

/* 공통 섹션 헤더 */
.sec-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px); }
.sec-title { font-family: var(--disp); font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; }
.sec-lede { color: var(--fg-soft); max-width: 54ch; margin-top: 10px; font-size: .97rem; }

/* 서비스 */
.services { padding-top: clamp(56px, 8vw, 96px); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: clamp(14px, 2vw, 20px); }
.svc { padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s, border-color .25s; }
.svc:hover { transform: translateY(-4px); border-color: rgba(232, 132, 63, .45); }
.svc-n { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: var(--accent); }
.svc-t { font-family: var(--disp); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; }
.svc-d { color: var(--fg-soft); font-size: .92rem; line-height: 1.65; }
.svc-eg { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--glass-line);
  font-size: .82rem; color: var(--fg-mute); }
.svc-eg b { color: var(--fg-soft); font-weight: 600; }

/* 문의 유도 */
.svc-cta { margin-top: clamp(20px, 3vw, 30px); display: flex; align-items: center;
  justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: clamp(18px, 2.4vw, 26px); }
.svc-cta-t { font-family: var(--disp); font-weight: 700; font-size: 1.08rem; }
.svc-cta-d { color: var(--fg-mute); font-size: .88rem; margin-top: 4px; }
.svc-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* 이력 · 강점 */
.why { padding-top: clamp(56px, 8vw, 96px); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 2vw, 20px); }
.why-card { padding: clamp(20px, 2.4vw, 26px); }
.why-h { font-family: var(--disp); font-weight: 700; font-size: 1.06rem; margin-bottom: 8px; }
.why-b { color: var(--fg-soft); font-size: .92rem; line-height: 1.7; }
.why-b em { color: var(--accent); }

/* 숫자 스트립 — 열 수를 명시한다. auto-fit은 긴 라벨이 트랙을 밀어 모바일에서 잘렸다 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: clamp(16px, 2.4vw, 22px); overflow: hidden;
  background: var(--glass-line); border: 1px solid var(--glass-line); border-radius: 16px; }
.stat { background: #100d0a; padding: 18px clamp(10px, 2vw, 20px); text-align: center; min-width: 0; }
.stat-n { font-family: var(--disp); font-weight: 900; font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--accent); line-height: 1; }
.stat-l { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  color: var(--fg-mute); text-transform: uppercase; margin-top: 8px; }

/* 스택 칩 */
.stack-wrap { margin-top: clamp(16px, 2.4vw, 22px); }
.stack-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; list-style: none; }
.stack-list li { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--fg-soft); padding: 6px 11px; border: 1px solid var(--glass-line);
  border-radius: 999px; background: var(--glass); }
.stack-list li b { color: var(--accent); font-weight: 700; }

@media (max-width: 720px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .svc-cta { flex-direction: column; align-items: flex-start; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}