/* ==========================================================================
   Global > 고객사 (Figma 1:674) — page body only
   Hero/stage: sp-common.css + sp-hero.js. This file: stage scene copy + stats,
   filter tabs, logo grids, case cards, contact CTA.
   ========================================================================== */
.clients-page {
  --clie-navy: #002165;
  --clie-navy-soft: #f0f3f9;
  --clie-border: #ebedf1;
  --clie-font-kr: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ---------- 2) Stage scene B: intro + stats (1:733) ---------- */
.clients-page .sp-stage:not(.is-live) .sp-stage-sticky { height: clamp(640px, 48.958vw, 940px); }
.clie-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 7.97vw, 153px);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-wrap: wrap;
}
.clie-scene-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.clie-scene-title {
  font-weight: 600;
  font-size: clamp(28px, 2.917vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
  word-break: keep-all;
}
.clie-scene-desc {
  margin-top: 6px;
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #fff;
  word-break: keep-all;
}
.clie-stats {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 12.5vw, 240px);
  list-style: none;
}
.clie-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(96px, 9.375vw, 180px);
  color: #fff;
}
.clie-stats strong {
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: clamp(44px, 4.6875vw, 90px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.clie-stats span {
  font-weight: 500;
  font-size: clamp(14px, 0.9375vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* ---------- 3) Filter tabs (1:754) ---------- */
.clie-body {
  padding: clamp(64px, 6.25vw, 120px) 0;
}
.clie-tabs-bar {
  border-bottom: 1px solid #ddd;
}
.clie-tabs {
  display: flex;
  gap: 10px;
  width: min(1600px, 100% - 2 * clamp(16px, 8.333vw, 160px));
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.clie-tabs::-webkit-scrollbar { display: none; }
.clie-tab {
  flex: 0 0 auto;
  min-width: clamp(88px, 7.292vw, 140px);
  margin: 0 0 -1px;
  padding: clamp(12px, 0.833vw, 16px);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--sp-font);
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #999;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.clie-tab:hover { color: var(--clie-navy); }
.clie-tab.is-active {
  border-bottom-color: var(--clie-navy);
  font-weight: 700;
  color: var(--clie-navy);
}
.clie-tab:focus-visible { outline: 2px solid var(--clie-navy); outline-offset: -2px; }

/* ---------- Sections ---------- */
.clie-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 4.167vw, 80px);
  margin-top: clamp(40px, 3.125vw, 60px);
}
.clie-section {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.5625vw, 30px);
  scroll-margin-top: 120px;
}
.clie-section[hidden] { display: none; }
/* Cancel style.css `section { padding }` + `section:not(...) > *` 1440 shell/gutter */
.clients-page .clie-sections > section.clie-section { padding: 0; }
.clients-page .clie-sections > section.clie-section.clie-section > * {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.clie-section-title {
  font-weight: 600;
  font-size: clamp(26px, 2.083vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #111;
}

/* ---------- Logo grid (1:765 / 1:794) ---------- */
.clie-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}
.clients-page .clie-sections > section.clie-section.clie-section > .clie-logo-grid { padding: 0 1px 1px 0; }
.clie-logo-cell {
  position: relative;
  aspect-ratio: 266.67 / 199;
  margin: 0 -1px -1px 0; /* collapse neighbouring borders into one 1px line */
  border: 1px solid #c0c0c0;
  overflow: hidden;
  background: #fff;
}
.clie-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--lw) / 266.67 * 100%);
  aspect-ratio: var(--lw) / var(--lh);
  transform: translate(-50%, -50%);
  overflow: hidden;
  opacity: var(--op, 0.85);
}
.clie-logo.is-multiply { mix-blend-mode: multiply; }
.clients-page .clie-logo img {
  position: absolute;
  left: var(--il);
  top: var(--it);
  width: var(--iw);
  height: var(--ih);
  max-width: none;
}
.clie-logo.is-contain img { object-fit: contain; }
.clie-logo.is-gray img { filter: grayscale(1); }

/* ---------- Case cards (1:825) ---------- */
.clie-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px clamp(20px, 2.083vw, 40px);
}
.clie-case {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.125vw, 60px);
  padding: clamp(24px, 2.083vw, 40px) clamp(20px, 2.083vw, 40px) clamp(20px, 1.5625vw, 30px);
  border: 1px solid var(--clie-border);
  border-radius: 20px;
  background: #fff;
}
.clie-case-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clie-case-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.clie-case-cat {
  font-family: var(--clie-font-kr);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #888;
}
.clie-case-badge {
  flex-shrink: 0;
  padding: 8px;
  border-radius: 4px;
  background: var(--clie-navy-soft);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--clie-navy);
}
.clie-case-oem {
  font-weight: 600;
  font-size: clamp(20px, 1.25vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #111;
}
.clie-case-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--clie-font-kr);
}
.clie-case-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--clie-border);
}
.clie-case-row dt {
  flex: 0 0 96px;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: #888;
}
.clie-case-row dd {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.015em;
  color: #666;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---------- 4) Contact CTA (1:958) ---------- */
.clie-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 6.25vw, 120px) 0 clamp(48px, 4.167vw, 80px);
  background: #0b1020;
  color: #fff;
}
.clie-cta-bg {
  /* Figma 1:959: 2024x922 at (-33,-113) inside the 1920x697 frame */
  position: absolute;
  inset: -16.21% -3.698% -16.07% -1.719%;
}
.clie-cta-bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.clie-cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.clie-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  min-height: clamp(320px, 25.885vw, 497px);
}
.clie-cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.clie-cta-title {
  font-weight: 600;
  font-size: clamp(30px, 2.917vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
  word-break: keep-all;
}
.clie-cta-desc {
  margin-top: 4px;
  font-weight: 500;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #fff;
  word-break: keep-all;
}
.clie-cta-actions {
  display: flex;
  align-self: flex-end;
  gap: 20px;
  flex-shrink: 0;
}
.clie-cta-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: clamp(150px, 13.542vw, 260px);
  height: clamp(120px, 8.333vw, 160px);
  padding: 26px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.clie-cta-btn img {
  width: auto;
  height: 46px;
}
.clie-cta-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.clie-cta-btn--primary { background: var(--clie-navy); color: #fff; }
.clie-cta-btn--primary:hover { color: #fff; }
.clie-cta-btn--light { background: var(--clie-border); color: var(--clie-navy); }
.clie-cta-btn--light:hover { color: var(--clie-navy); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .clie-case-row dt { flex-basis: 80px; }
}
@media (max-width: 1024px) {
  .clie-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .clie-case-grid { grid-template-columns: minmax(0, 1fr); }
  .clie-cta-inner { flex-direction: column; justify-content: flex-start; min-height: 0; }
  .clie-cta-actions { align-self: flex-start; margin-top: 24px; }
}
@media (max-width: 768px) {
  .clie-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clie-scene-desc br { display: none; }
  .clie-stats li { width: auto; flex: 1 1 0; min-width: 0; }
  .clie-stats { width: 100%; max-width: 480px; }
}
@media (max-width: 600px) {
  .clients-page .sp-stage:not(.is-live) .sp-stage-sticky { height: 600px; }
  .clie-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clie-case-row { gap: 12px; }
  .clie-case-row dt { flex-basis: 64px; }
  .clie-case-row dd { font-size: 15px; }
  .clie-cta-desc br { display: none; }
  .clie-cta-actions { width: 100%; gap: 12px; }
  .clie-cta-btn { flex: 1 1 0; width: auto; min-width: 0; }
  .clie-stats span { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .clie-cta-btn, .clie-tab { transition: none; }
  .clie-cta-btn:hover { transform: none; }
}