/* proof.css — 실측 성과(#outcomes) + 브랜드 포트폴리오(#portfolio)
   접두사 oc- / pf- 는 이 파일에서만 사용 (전 파일 셀렉터 충돌 검사 완료) */

/* ── 실측 성과 ───────────────────────────────────────── */
.oc-lead{color:var(--tx2);font-size:16px;max-width:70ch;margin-top:6px}
.oc-lead b{color:var(--tx)}

.oc-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;
  margin:40px 0 34px;padding:26px;border:1px solid var(--line2);border-radius:20px;
  background:linear-gradient(135deg,rgba(79,141,255,.07),rgba(139,92,246,.05))}
.oc-hero img{width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:14px;display:block}
.oc-hero .oc-tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--a3);font-weight:700}
.oc-hero h3{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:8px 0 12px}
.oc-hero q{display:block;color:var(--tx2);font-size:15px;line-height:1.75}
.oc-by{color:var(--tx3);font-size:13px;margin:6px 0 18px}
.oc-ba{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-weight:800}
.oc-ba .before{font-size:20px;color:var(--tx3);text-decoration:line-through;text-decoration-color:var(--tx3)}
.oc-ba .arrow{color:var(--tx3);font-size:16px}
.oc-ba .after{font-size:34px}
.oc-ba .mult{font-size:14px;font-weight:700;color:var(--ok);border:1px solid rgba(52,211,153,.35);
  border-radius:999px;padding:3px 10px;background:rgba(52,211,153,.08)}
.oc-hero .oc-src{margin-top:12px;font-size:12.5px;color:var(--tx3)}

.oc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.oc-c{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--panel);
  transition:border-color .25s,transform .25s}
.oc-c:hover{border-color:var(--line2);transform:translateY(-2px)}
.oc-c .nm{font-weight:700;font-size:15px;margin-bottom:2px}
.oc-c .cat{font-size:12px;color:var(--tx3);margin-bottom:12px}
.oc-c .ba{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.oc-c .ba .b{font-size:13px;color:var(--tx3)}
.oc-c .ba .a{font-size:21px;font-weight:800}
.oc-c .ba .m{font-size:12px;font-weight:700;color:var(--ok)}

.oc-more{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.oc-m{border:1px dashed var(--line2);border-radius:14px;padding:18px;background:transparent}
.oc-m .mh{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--a3);font-weight:700;margin-bottom:8px}
.oc-m p{font-size:13.5px;color:var(--tx2);line-height:1.7}
.oc-m p b{color:var(--tx)}

.oc-note{margin-top:22px;font-size:12.5px;color:var(--tx3);line-height:1.75}

/* ── 브랜드 포트폴리오 ────────────────────────────────── */
.pf-brands{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.pf-brands span{font-size:13px;font-weight:600;color:var(--tx2);border:1px solid var(--line2);
  border-radius:999px;padding:7px 14px;background:var(--panel)}
.pf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pf-i{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel);aspect-ratio:4/5}
/* 상세페이지는 길이가 제각각 → 항상 최상단 인트로부터 보이게 top 고정 */
.pf-i img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s ease}
.pf-i:hover img{transform:scale(1.05)}
.pf-i figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;
  font-size:12px;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(4,8,18,.9),rgba(4,8,18,0))}
.pf-note{margin-top:20px;font-size:12.5px;color:var(--tx3);line-height:1.75}

@media(max-width:900px){
  .oc-hero{grid-template-columns:1fr;gap:20px;padding:18px}
  .oc-hero img{min-height:200px}
  .oc-hero h3{font-size:22px}
  .oc-ba .after{font-size:28px}
  .oc-grid,.oc-more{grid-template-columns:1fr}
  .pf-grid{grid-template-columns:repeat(2,1fr)}
}