/* about.css — 회사소개 전면 재구성(지시②). site.css 토큰 재사용.
   원칙(QUALITY-BAR): 테두리 카드 최소화·여백/톤으로 구분, 섹션당 메시지 하나,
   실제 이미지·화면 목업 우선, 글자·그래픽 겹침 금지, 모션 절제. */

/* ── [1] 첫 화면: 작업물 몽타주 배경 + 어둡게 + 글자 ── */
.ab-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  min-height:clamp(460px,72vh,680px); display:flex; align-items:center; }
.ab-hero__montage{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; gap:14px;
  justify-content:center; opacity:.5; }
.ab-monta-row{ display:flex; gap:14px; width:max-content; }
.ab-monta-row img{ height:clamp(120px,17vw,190px); width:auto; border-radius:12px; object-fit:cover; display:block; }
.ab-monta-row--a{ animation:ab-drift-l 60s linear infinite; }
.ab-monta-row--b{ animation:ab-drift-r 72s linear infinite; }
@keyframes ab-drift-l{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes ab-drift-r{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
.ab-hero__veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(7,9,13,.86),rgba(7,9,13,.78) 40%,rgba(7,9,13,.92));
  }
.ab-hero__inner{ position:relative; z-index:2; max-width:820px; }
.ab-hero__inner h1{ font-size:clamp(30px,5.2vw,54px); font-weight:800; letter-spacing:-.035em;
  line-height:1.16; word-break:keep-all; text-wrap:balance; margin-top:14px; }
.ab-hero__lead{ font-size:clamp(15px,1.9vw,19px); color:var(--paper-dim); margin-top:20px;
  max-width:62ch; line-height:1.75; word-break:keep-all; }
.ab-hero .btn-row{ margin-top:30px; }

/* ── [2] 숫자 한 줄(카드 없이) ── */
.ab-stats__row{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 20px; }
@media(min-width:760px){ .ab-stats__row{ grid-template-columns:repeat(4,1fr); } }
.ab-stat b{ display:block; font-size:clamp(34px,5vw,52px); font-weight:800; letter-spacing:-.04em;
  color:var(--paper); line-height:1; }
.ab-stat b i{ font-style:normal; font-size:.5em; font-weight:700; color:var(--paper-dim); margin-left:4px; }
.ab-stat span{ display:block; margin-top:10px; color:var(--paper-dim); font-size:14px; word-break:keep-all; }

/* ── [3] 신뢰 사례(KOWAS) — 텍스트 + 큰 대시보드 목업 ── */
.ab-trust__grid{ display:grid; gap:32px; grid-template-columns:1fr; align-items:center; }
@media(min-width:900px){ .ab-trust__grid{ grid-template-columns:.85fr 1.15fr; gap:48px; } }
.ab-trust__text h2{ margin-top:8px; }
.ab-trust__text p{ color:var(--paper-dim); font-size:clamp(15px,1.7vw,17px); line-height:1.8;
  margin-top:18px; word-break:keep-all; }
.ab-dash{ width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--line);
  background:#080b10; box-shadow:0 30px 70px rgba(0,0,0,.45); }
.ab-trust__note{ margin-top:14px; font-size:12.5px; color:var(--paper-dim); }

/* ── [4] 왜 포토그램인가 — 박스 없이 세로 흐름, 항목마다 이미지 ── */
.ab-why__list{ display:flex; flex-direction:column; gap:clamp(36px,6vw,72px); margin-top:8px; }
.ab-why__item{ display:grid; gap:24px 40px; grid-template-columns:1fr; align-items:center; }
@media(min-width:820px){
  .ab-why__item{ grid-template-columns:1fr 1fr; }
  .ab-why__item:nth-child(even) .ab-why__media{ order:2; }
}
.ab-why__media img{ width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:14px; display:block;
  border:1px solid var(--line); }
.ab-why__body h3{ font-size:clamp(21px,2.6vw,28px); font-weight:800; letter-spacing:-.025em;
  color:var(--paper); word-break:keep-all; }
.ab-why__body p{ margin-top:14px; color:var(--paper-dim); font-size:clamp(15px,1.7vw,17px);
  line-height:1.8; word-break:keep-all; }

/* ── 히어로 근거 1줄 ── */
.ab-hero__evi{ margin-top:14px; font-size:clamp(14px,1.6vw,16px); color:var(--blue);
  font-weight:700; word-break:keep-all; }

/* ── [3.5] 우리가 하는 일 — 7영역 ── */
.ab-do__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ab-do__card{ display:flex; flex-direction:column; gap:8px; padding:18px 16px;
  border:1px solid var(--line); border-radius:14px; text-decoration:none;
  background:var(--ink-2); transition:border-color .15s, transform .15s; }
.ab-do__card:hover{ border-color:var(--blue); transform:translateY(-2px); }
.ab-do__ic{ margin-bottom:2px; }
.ab-do__t{ font-size:16px; font-weight:800; color:var(--paper); }
.ab-do__d{ font-size:13px; color:var(--paper-dim); line-height:1.55; word-break:keep-all; }
@media(max-width:860px){ .ab-do__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .ab-do__grid{ grid-template-columns:1fr; } }

/* ── [5] 협력·수행 기관(#partners) — 분류별 ── */
.ab-partners__groups{ display:flex; flex-direction:column; gap:30px; margin-top:8px; }
.ab-pgroup__h{ font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--blue);
  padding-bottom:12px; border-bottom:1px solid var(--line); }
.ab-pgroup__list{ display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; align-items:center; }
.ab-pchip{ display:inline-flex; align-items:center; gap:10px; min-height:56px; padding:10px 18px;
  background:var(--ink-2); border-radius:12px; }
.ab-pchip img{ height:40px; max-height:40px; width:auto; opacity:.92; }
.ab-pchip--text{ font-weight:700; color:var(--paper); font-size:15px; }
.ab-partners__note{ margin-top:22px; font-size:12.5px; color:var(--paper-dim); }

/* ── [6] 일하는 방식 — 가로 흐름 + 산출물 목업 ── */
.ab-work{ display:grid; gap:16px; grid-template-columns:1fr; margin-top:8px; }
@media(min-width:720px){ .ab-work{ grid-template-columns:repeat(4,1fr); gap:14px; } }
.ab-work__step{ position:relative; }
.ab-work__mock{ height:150px; border-radius:12px; border:1px solid var(--line); background:var(--ink-2);
  overflow:hidden; position:relative; }
.ab-work__no{ font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--accent); margin:14px 0 4px; }
.ab-work__t{ font-size:16px; font-weight:800; color:var(--paper); }
.ab-work__d{ margin-top:4px; font-size:13px; color:var(--paper-dim); line-height:1.6; word-break:keep-all; }
@media(min-width:720px){
  .ab-work__step:not(:last-child) .ab-work__mock::after{ content:""; position:absolute; top:50%; right:-11px;
    width:9px; height:9px; transform:translateY(-50%) rotate(45deg); z-index:2;
    border-top:2px solid var(--blue-deep); border-right:2px solid var(--blue-deep); }
}
/* 산출물 목업 내부(가상) */
.mk{ position:absolute; inset:0; padding:16px; }
.mk-bar{ height:8px; border-radius:5px; background:var(--line-2); margin-bottom:9px; }
.mk-bar.sm{ width:52%; } .mk-bar.md{ width:72%; } .mk-bar.lg{ width:88%; }
.mk-bar.acc{ background:var(--accent); opacity:.85; width:40%; }
.mk-note{ position:absolute; inset:14px; border-radius:8px; background:#0c1017;
  padding:14px; display:flex; flex-direction:column; gap:9px; }
.mk-win{ position:absolute; inset:14px; border-radius:8px; overflow:hidden; border:1px solid var(--line-2); background:#0c1017; }
.mk-win__bar{ height:20px; background:#11161f; display:flex; align-items:center; gap:5px; padding:0 9px; }
.mk-win__dot{ width:6px; height:6px; border-radius:50%; background:var(--line-2); }
.mk-win__img{ width:100%; height:calc(100% - 20px); object-fit:cover; display:block; }
.mk-chart{ position:absolute; inset:14px; border-radius:8px; background:#0c1017; padding:12px; }
.mk-chart svg{ width:100%; height:100%; display:block; }

/* ── [8] 마무리 CTA ── */
.ab-cta h2{ font-size:clamp(24px,3.6vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.3;
  word-break:keep-all; }
.ab-cta .btn-row{ justify-content:center; margin-top:26px; }

/* 오시는 길 재사용(site.css .map-ph/.info) — 별도 스타일 없음 */

@media (prefers-reduced-motion:reduce){
  .ab-monta-row--a,.ab-monta-row--b{ animation:none; }
  .ab-hero__montage{ opacity:.32; }
}