/* ============================================================
   MOTIVE — field.css
   "우리는 현장에서 배웠습니다" — 컨설팅·교육·성공사례 경험을 AX 의 근거로 세우는 섹션.
   텍스트만 있으면 아무 회사나 할 수 있는 말이 된다. 실제 현장 사진이 있어야 주장이 선다.
   ============================================================ */

#field .fd-lead{max-width:64ch;color:var(--tx2);font-size:15.5px;line-height:1.85;margin-top:16px}
#field .fd-lead b{color:var(--tx)}

/* 숫자 3종 — 근거 있는 것만 */
.fd-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.fd-num{padding:24px 26px;border-radius:18px;border:1px solid var(--line2);background:rgba(14,23,48,.55)}
.fd-num .n{font-size:38px;font-weight:900;letter-spacing:-.035em;line-height:1}
.fd-num .l{font-size:14px;font-weight:700;color:var(--tx);margin-top:10px}
.fd-num .s{font-size:12px;color:var(--tx3);margin-top:5px;line-height:1.55}

/* 사진 그리드 */
.fd-gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px;margin-top:38px}
.fd-ph{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel);display:block}
.fd-ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.03);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s}
.fd-ph:hover img{transform:scale(1.045);filter:saturate(1.02) contrast(1.05)}
.fd-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,11,24,0) 42%,rgba(6,11,24,.86) 100%)}
.fd-ph .cap{position:absolute;left:16px;right:16px;bottom:13px;z-index:2;
  font-size:12.5px;font-weight:700;line-height:1.45;color:#EAF0FF;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.fd-ph .cap s{display:block;text-decoration:none;font-size:11px;font-weight:600;color:#9FB0D0;margin-top:3px}

/* 큰 칸 — 첫 장과 다섯째 장은 2칸씩 먹어 리듬을 준다 */
.fd-ph.w2{grid-column:span 2}
.fd-ph.h2{grid-row:span 2}

.fd-note{font-size:12px;color:var(--tx3);margin-top:18px;line-height:1.7}

@media(max-width:960px){
  .fd-nums{grid-template-columns:1fr}
  .fd-gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .fd-ph.h2{grid-row:span 1}
}
@media(prefers-reduced-motion:reduce){
  .fd-ph img{transition:none}
  .fd-ph:hover img{transform:none}
}