/* law.jobofbrothers.com 법률 포트폴리오 목록 — 다크 테마 (2026-10-16) */
.lpf{ background:#0b1020; color:#fff; }
.lpf .inner{ width:min(92%, 1240px); margin:0 auto; }
.lpf-hero{ position:relative; padding:150px 0 0; overflow:hidden; background:radial-gradient(60% 70% at 85% 0%, rgba(70,132,236,.35), transparent 60%), radial-gradient(40% 50% at 10% 90%, rgba(70,132,236,.18), transparent 60%), #0b1020; }
.lpf-crumb{ font-size:13px; color:#8fa0bd; display:flex; gap:8px } .lpf-crumb a{ color:#8fa0bd } .lpf-crumb strong{ color:#fff; font-weight:600 }
.lpf-eyebrow{ margin-top:28px; font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; letter-spacing:.18em; color:#9cc0ff }
.lpf-hero h1{ margin-top:14px; font-size:52px; font-weight:800; line-height:1.2; letter-spacing:-.045em; word-break:keep-all } .lpf-hero h1 span{ color:#9cc0ff }
.lpf-lead{ margin-top:22px; max-width:820px; font-size:17px; line-height:1.75; color:#c9d2e3; word-break:keep-all }
.lpf-marquee{ margin-top:56px; padding:18px 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden; white-space:nowrap }
.lpf-track{ display:inline-flex; gap:40px; animation:lpf-scroll 80s linear infinite; padding-right:40px }
.lpf-track span{ font-family:'Space Grotesk','Pretendard',sans-serif; font-size:15px; font-weight:600; color:#6f7f9c; letter-spacing:-.01em } .lpf-track span::before{ content:'◆'; font-size:8px; margin-right:16px; color:#4684ec; vertical-align:middle }
@keyframes lpf-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.lpf-filter{ position:sticky; top:88px; z-index:50; background:rgba(11,16,32,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); transition:box-shadow .3s }
.lpf-filter.stuck{ box-shadow:0 14px 30px -18px rgba(0,0,0,.8) }
.lpf-filter .inner{ display:flex; align-items:center; gap:18px; padding:14px 0; flex-wrap:wrap }
.lpf-tabs, .lpf-chips{ display:flex; gap:6px; list-style:none; padding:0; margin:0; flex-wrap:wrap }
.lpf-tabs button{ height:40px; padding:0 18px; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#c9d2e3; font-size:14px; font-weight:600; cursor:pointer; transition:.2s }
.lpf-tabs li.on button{ background:#fff; color:#0b1020; border-color:#fff }
.lpf-chips{ padding-left:18px; border-left:1px solid rgba(255,255,255,.12) }
.lpf-chips button{ height:34px; padding:0 14px; border-radius:100px; background:transparent; border:1px solid rgba(255,255,255,.14); color:#9aa8c0; font-size:13px; cursor:pointer; transition:.2s }
.lpf-chips button:hover{ border-color:#4684ec; color:#fff } .lpf-chips li.on button{ background:#4684ec; border-color:#4684ec; color:#fff }
.lpf-list{ padding:50px 0 90px }
.lpf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:0 }
.lpf-grid > li{ min-width:0 } .lpf-grid > li.feat{ grid-column:span 2 }
.lpf .pf_card.v2{ background:#121a2e; height:100% }
.lpf-grid > li.feat .pf_card.v2 .thumb{ padding-top:46% }
.lpf-grid > li.feat .pf_card.v2 .tit{ font-size:30px } .lpf-grid > li.feat .pf_card.v2 .desc{ font-size:16px; -webkit-line-clamp:2 }
.lpf-empty{ display:none; padding:80px 0; text-align:center; color:#8fa0bd; font-size:15px }
.lpf-fields{ padding:90px 0; background:#0d1321; border-top:1px solid rgba(255,255,255,.06) }
.lpf-fields h2{ margin-top:12px; font-size:34px; font-weight:800; letter-spacing:-.04em; line-height:1.3 }
.lpf-field-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; list-style:none; padding:0 }
.lpf-field-list a{ display:flex; align-items:center; gap:14px; padding:22px 22px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#fff; transition:.25s }
.lpf-field-list a:hover{ background:rgba(70,132,236,.14); border-color:rgba(70,132,236,.6); transform:translateY(-3px) }
.lpf-field-list b{ font-size:20px; font-weight:800; letter-spacing:-.03em; flex:0 0 auto } .lpf-field-list span{ font-size:13px; color:#8fa0bd; flex:1 } .lpf-field-list i{ font-style:normal; font-size:18px; color:#9cc0ff }
.lpf .law-pf-cta{ border-top:1px solid rgba(255,255,255,.06) }
@media (max-width:1100px){ .lpf-grid{ grid-template-columns:repeat(2,1fr) } .lpf-grid > li.feat{ grid-column:span 2 } .lpf-field-list{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:768px){ .lpf-hero{ padding-top:110px } .lpf-hero h1{ font-size:32px } .lpf-lead{ font-size:15px } .lpf-lead br{ display:none } .lpf-marquee{ margin-top:34px } .lpf-filter{ top:60px } .lpf-filter .inner{ gap:10px; padding:12px 0 } .lpf-chips{ padding-left:0; border-left:0 } .lpf-grid{ grid-template-columns:1fr; gap:18px } .lpf-grid > li.feat{ grid-column:auto } .lpf-grid > li.feat .pf_card.v2 .thumb{ padding-top:68% } .lpf-grid > li.feat .pf_card.v2 .tit{ font-size:22px } .lpf-field-list{ grid-template-columns:1fr } .lpf-fields h2{ font-size:26px } }
/* 모바일: 필터를 가로 스크롤 한 줄로 */
@media (max-width:768px){ .lpf-filter .inner{ flex-wrap:nowrap; flex-direction:column; align-items:stretch; gap:8px } .lpf-tabs, .lpf-chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px } .lpf-tabs::-webkit-scrollbar, .lpf-chips::-webkit-scrollbar{ display:none } .lpf-tabs button, .lpf-chips button{ white-space:nowrap } }