/* Client logo band at the bottom of the home page (owner 2026-09-25: 고객 로고는 메인 하단에 다시 노출).
   Markup and the per-logo numbers come from scripts/clients.mjs: --w width in px at desktop size, --ar aspect of the drawn
   area, --bx/--by/--bw/--bh the drawn area inside the file (fractions), --lift for files with a grey ground, --tone to
   darken a pale logo in the grey state (transparent files only).
   Each image is cropped to its drawn area (the span is the window, the image is shifted and scaled inside it), so padding
   baked into a file does not change how big the logo looks. Logos sit grey and faded on a white band and turn to full
   colour on hover (or when the list has keyboard focus); multiply keeps white JPG grounds from showing as boxes. */
.clients { background: #fff; overflow-x: clip; }
.cl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 28px; align-items: end; padding-top: 34px; border-top: 1px solid var(--rule); }
.cl-title { font-size: clamp(26px, 2.4vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.cl-line { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.cl-line b { font-weight: 600; color: var(--ink); }

.cl-grid { display: flex; flex-wrap: wrap; justify-content: center; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0; list-style: none; background: #fff; border-radius: 12px; }
.cl-grid:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.cl-grid li { flex: 0 0 calc(100% / 6); height: 96px; display: flex; align-items: center; justify-content: center; padding: 0 22px; }
.cl-logo { position: relative; display: block; overflow: hidden; width: min(calc(var(--w) * 1px), 100%); aspect-ratio: var(--ar); }
.cl-logo img {
  position: absolute; left: calc(-100% * var(--bx) / var(--bw)); top: calc(-100% * var(--by) / var(--bh));
  width: calc(100% / var(--bw)); max-width: none; height: auto;
  mix-blend-mode: multiply; filter: grayscale(1) brightness(var(--lift, 1)) brightness(var(--tone, 1)); opacity: .5;
  transition: filter .3s ease, opacity .3s ease;
}
.cl-grid li:hover img, .cl-grid:focus-visible img { filter: brightness(var(--lift, 1)); opacity: 1; }

@media (max-width: 1000px) {
  .cl-grid li { flex-basis: 25%; height: 88px; padding: 0 18px; }
}
@media (max-width: 699px) {
  .cl-head { grid-template-columns: minmax(0, 1fr); }
  .cl-grid li { flex-basis: calc(100% / 3); height: 66px; padding: 0 10px; }
  .cl-logo { width: min(calc(var(--w) * .72px), 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cl-logo img { transition: none; }
}

/* moving band (js/clients.js, owner 2026-10-03): the doubled list slides right in a loop; the edges fade out */
.cl-view { overflow: hidden; margin: clamp(28px, 3.4vw, 48px) calc(50% - 50vw) 0;
           -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.cl-grid.is-moving { flex-wrap: nowrap; justify-content: flex-start; width: max-content; margin: 0; border-radius: 0; animation: cl-flow var(--cl-dur, 60s) linear infinite; }
.cl-grid.is-moving li { flex: 0 0 auto; width: 188px; }
.cl-grid.is-moving:hover, .cl-grid.is-moving:focus-visible, .cl-grid.is-waiting { animation-play-state: paused; }
@keyframes cl-flow { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 1000px) { .cl-grid.is-moving li { width: 160px; } }
@media (max-width: 699px) { .cl-grid.is-moving li { width: 124px; } }