/* 성과 사례 목록(cases.html) · 사례 상세(case-*.html) · 분야 페이지 #cases 카드 — 한 파일이 소유한다.
   레퍼런스: 에어브릿지 고객 사례(airbridge.io/ko/case-studies 목록 · 상세, 유저 2026-10-29 「국내 레퍼런스를 찾아라」) 의 짜임 · 비례 · 여백 · 글자 위계를 따르고
   색 · 글꼴은 우리 사이트 값. 브랜드 그림 자리는 사무소 이름 · 로고를 못 써서 분야 색 바탕 + 분야 낱말 + 블로그 화면 모형(추상)으로 대신한다.
   그림자 없음 · 파란 테두리 없음 · 보조 글자 14px #4a4a4a 이상 */

/* ── 목록: 섹션 머리(작은 영문 라벨 + 큰 제목) → 분야 알약 → 사례 하나 = 큰 카드 하나 ──
   카드는 유저가 고른 페르소나 카드 그림과 같은 짜임(2026-10-29 「디자인 완전 동일하게 · 간결하고 통일감 있게」):
   분야 사진(GPT 생성, assets/backgrounds/case-*.webp) + 어두운 막 → 큰 머리 글자 CASE nn → 흰 1px 둥근 상자
   [왼쪽 29%: 이름 | 속성 세 줄 → 성과 지표 막대 | 세로선 | 오른쪽: 결과 · 기간 한 줄 → 같은 폭 세 칸
   꼬리표 · 문단 · 점 목록] → 바닥 세 칸 줄(왼쪽 · 가운데 · 오른쪽). 그림 1186px 기준 비례 — 상자 좌우 여백 52,
   칸마다 구분선 · 같은 여백 20 · 24, 세 칸 같은 폭. 그림자 없음 · 파란 테두리 없음 · 보조 글자 #d6d9de 13px 이상 */
.cs-list{--hs-scene-content-max:1240px;background:#fff}
.cs-head{padding-block:72px 40px;text-align:left}
.cs-eyebrow{margin:0 0 20px;font-size:14px;font-weight:600;letter-spacing:.05em;color:#2e6bff}
.cs-title{margin:0;font-size:clamp(30px,5.6vw,80px);font-weight:700;line-height:1.15;letter-spacing:-.06em;color:#151a23;word-break:keep-all}
.cs-filters{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;padding:0;list-style:none}
.cs-filter{padding:6px 16px;border:1px solid #dfe3ea;border-radius:999px;background:#fff;font-family:inherit;font-size:14px;font-weight:500;line-height:22px;color:#151a23;cursor:pointer}
.cs-filter[aria-pressed="true"]{border-color:#151a23;background:#151a23;color:#fff}
.cs-cases{display:grid;gap:32px;margin:0;padding:0 0 40px;list-style:none;text-align:left}
.cs-cases>li[hidden]{display:none}
.cs-case{--cs-photo:none;padding:40px 52px 40px;border-radius:20px;background:linear-gradient(#0b0d11b8,#0b0d11d1),var(--cs-photo) center/cover #1a1d23;color:#fff}
.cs-case--criminal{--cs-photo:url(../backgrounds/case-criminal.webp)}
.cs-case--family{--cs-photo:url(../backgrounds/case-family.webp)}
.cs-case--civil{--cs-photo:url(../backgrounds/case-civil.webp)}
.cs-case--other{--cs-photo:url(../backgrounds/case-other.webp)}
/* 카드 제목 = CASE 줄(목록 · 분야 페이지 h3, 상세 h2) — 화면에서 가장 큰 글자가 제목이고, 사무소 이름을 함께 담아 검색 · AI 가 무슨 사례인지 읽는다 */
.cs-case-no{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 20px;font-size:24px;font-weight:800;line-height:1.2;letter-spacing:.02em}
.cs-case-no span{font-weight:700;letter-spacing:-.02em}
/* 상자 안은 칸마다 구분선(바깥 #fff, 안 #ffffff59)과 같은 안쪽 여백 20px 24px. 글자 단계 다섯 — 24 CASE · 20 이름 · 15 칸 제목 · 14 본문 · 13 보조 */
.cs-case-box{display:grid;grid-template-columns:minmax(0,29%) minmax(0,1fr);min-height:410px;border:1px solid #fff;border-radius:14px}
.cs-case-id{display:flex;flex-direction:column;border-right:1px solid #fff}
.cs-case-who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border-bottom:1px solid #ffffff59}
.cs-case-name{margin:0;padding:20px 16px 20px 24px}
.cs-case-name b{display:block;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.02em;word-break:keep-all}
.cs-case-name span{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:#d6d9de;word-break:keep-all}
.cs-case-meta{display:grid;align-content:center;gap:6px;margin:0;padding:20px 16px;border-left:1px solid #ffffff59;font-size:14px;line-height:1.4}
/* 속성 값이 길어도 세로 구분선 밖으로 나가지 않게: 칸 폭 안에서 낱말 단위로 줄바꿈(이름 dt 는 한 줄 고정) */
.cs-case-meta{min-width:0}
.cs-case-meta div{display:flex;gap:6px;min-width:0}
.cs-case-meta dt{flex:none;color:#d6d9de;white-space:nowrap}
.cs-case-meta dd{min-width:0;margin:0;word-break:keep-all;overflow-wrap:anywhere}
.cs-case-stats{flex:1;padding:20px 24px}
.cs-case-label{margin:0 0 14px;font-size:15px;font-weight:700;line-height:1.3}
.cs-case-meters{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.cs-case-meters li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n a b" "m m m";align-items:baseline;gap:8px 6px;font-size:14px;line-height:1.3}
.cs-case-meters li>span:first-child{grid-area:n;color:#d6d9de}
.cs-case-meters small{grid-area:a;font-size:13px;color:#d6d9de;white-space:nowrap}
.cs-case-meters b{grid-area:b;font-weight:700;white-space:nowrap}
.cs-case-meters b::before{content:"→ ";font-weight:400;color:#d6d9de}
.cs-case-meters li:has(.cs-meter--share) small{display:none}
.cs-case-meters li:has(.cs-meter--share) b::before{content:none}
.cs-meter{grid-area:m;position:relative;display:block;height:6px;border-radius:3px;background:#ffffff40}
.cs-meter i{position:absolute;top:0;bottom:0;left:var(--from);right:calc(100% - var(--to,100%));border-radius:3px;background:#ffffffd9}
.cs-meter i::after{content:"";position:absolute;top:50%;left:100%;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.cs-case-body{display:flex;flex-direction:column;min-width:0}
.cs-case-goals,.cs-case-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-case-goals{margin:0;border-bottom:1px solid #ffffff59}
.cs-case-goals div{display:flex;align-items:baseline;gap:12px;min-width:0;padding:18px 24px}
.cs-case-goals div:first-child{grid-column:1/3}
.cs-case-goals div+div,.cs-case-cols section+section{border-left:1px solid #ffffff59}
.cs-case-goals dt{flex:none;font-size:15px;font-weight:700}
.cs-case-goals dd{margin:0;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.cs-case-cols{flex:1}
.cs-case-cols section{padding:20px 24px}
.cs-case-cols .cs-case-label:not(:first-child){margin-top:20px;padding-top:16px;border-top:1px solid #ffffff33}
/* 좁은 칸의 양쪽 맞춤은 낱말 단위로 끊으면 사이가 크게 벌어져(유저 「텍스트가 적어 어색」) 카드 안 문단 · 목록은 글자 단위로 끊는다 */
.cs-case-cols p:not(.cs-case-label){margin:0;text-align:justify;font-size:14px;line-height:1.75;color:#eceef1;word-break:normal;line-break:strict}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cs-chips li{padding:5px 12px;border-radius:999px;background:#ffffff40;font-size:14px;line-height:1.4;white-space:nowrap}
.cs-dots{display:grid;gap:8px;margin:0;padding:0 0 0 16px;list-style:disc;text-align:justify;font-size:14px;line-height:1.6;color:#eceef1;word-break:normal;line-break:strict}
/* 바닥 줄 = 왼쪽 비교 기준 · 귀속 문장(상자 안 글자와 같은 24px 들여쓰기) + 오른쪽 '사례 자세히 보기' 알약(상자와 같은 흰 1px 선, 오른쪽 끝을 상자 끝에 맞춤) */
.cs-case-foot{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:44px;margin:14px 0 0;padding-left:24px;font-size:13px;line-height:1.6;color:#d6d9de}
.cs-case-foot span{word-break:keep-all}
.cs-case-foot:has(a) span{max-width:760px}
.cs-case-foot:not(:has(a)){min-height:0}
.cs-case-foot a{display:inline-flex;flex:none;align-items:center;gap:10px;height:40px;padding:0 20px;border:1px solid #fff;border-radius:999px;font-size:14px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.cs-case-foot a::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.cs-case-foot a:hover,.cs-case-foot a:focus-visible{background:#fff;color:#151a23}
/* ── 상세: 목록 카드와 같은 짜임(유저 2026-10-29 「여기도 동일한 이미지 깔아주고 아래 부분도 이런 레이아웃 방식으로」) ──
   머리 = 카드와 같은 분야 사진(.cs-case--분야) + 어두운 막 · 큰 숫자는 흰 1px 선 상자의 칸 · 아래 주석 줄(비교 기준)
   → 같은 카드 → 왼쪽 사무소 상자 · 목차 상자 + 오른쪽 질문형 H2 마다 상자(머리 칸 / 본문 칸) → 이전 · 다음 사례 상자 두 칸.
   흰 바탕 상자는 바깥 #151a23 1px · 안 구분선 #e3e5e9, 둥근 14px, 칸 여백 20 · 24 — 카드와 같은 수치 */
.cs-wrap{width:calc(100% - 80px);max-width:1240px;margin-inline:auto}
.cs-hero{padding:40px 0 48px;background:linear-gradient(#0b0d11b8,#0b0d11d9),var(--cs-photo,none) center/cover #1a1d23;color:#fff}
.cs-back{display:inline-block;font-size:16px;font-weight:600;color:#fff;text-decoration:none}
.cs-back:hover{text-decoration:underline}
.cs-tags{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.cs-hero .cs-tags{margin:64px 0 16px}
.cs-hero .cs-tags li{padding:5px 12px;border-radius:999px;background:#ffffff40;font-size:14px;line-height:1.4}
.cs-hero h1{max-width:820px;margin:0;font-size:44px;font-weight:700;line-height:1.3;letter-spacing:-.03em;word-break:keep-all}
.cs-hero-stats{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;margin:40px 0 0;padding:0;border:1px solid #fff;border-radius:14px;list-style:none}
.cs-hero-stats li{padding:20px 24px}
.cs-hero-stats li+li{border-left:1px solid #ffffff59}
.cs-hero-stats b{display:block;font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-.03em;white-space:nowrap}
.cs-hero-stats span{display:block;margin-top:10px;font-size:14px;color:#d6d9de}
.cs-hero-note{margin:14px 0 0;padding-left:24px;font-size:13px;line-height:1.6;color:#d6d9de}
.cs-case-band{padding:48px 0 0;background:#fff}
.cs-case-band .cs-cases{padding-bottom:0}
.cs-main{background:#fff}
.cs-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;padding:48px 0 96px}
.cs-side{position:sticky;top:110px;align-self:start;display:grid;gap:16px}
.cs-office,.cs-toc,.cs-sec,.cs-pager{border:1px solid #151a23;border-radius:14px;background:#fff}
.cs-office-name{margin:0;padding:20px 24px;border-bottom:1px solid #e3e5e9;font-size:20px;font-weight:700;line-height:1.3;color:#151a23}
.cs-office dl{display:grid;grid-template-columns:72px minmax(0,1fr);margin:0;font-size:14px;line-height:1.5}
.cs-office dt,.cs-office dd{padding:12px 0;border-bottom:1px solid #e3e5e9}
.cs-office dt{padding-left:24px;color:#4a4a4a}
.cs-office dd{margin:0;padding-right:24px;color:#151a23}
.cs-office .cs-tags{margin:0;padding:16px 24px 20px;gap:8px}
.cs-office .cs-tags li{padding:5px 12px;border-radius:999px;background:#eef0f3;font-size:14px;line-height:1.4;color:#151a23}
.cs-toc p{margin:0;padding:16px 24px;border-bottom:1px solid #e3e5e9;font-size:15px;font-weight:700;color:#151a23}
.cs-toc ul{margin:0;padding:0;list-style:none;counter-reset:toc}
.cs-toc li+li{border-top:1px solid #e3e5e9}
.cs-toc a{display:flex;gap:12px;padding:12px 24px;font-size:14px;line-height:1.5;color:#3d4350;text-decoration:none;counter-increment:toc}
.cs-toc a::before{content:counter(toc,decimal-leading-zero);font-weight:700;color:#9aa1ad}
.cs-toc a:hover{color:#151a23}
.cs-article{display:grid;gap:16px;min-width:0}
.cs-article .lp-updated{margin:0 0 0 24px;font-size:14px;color:#4a4a4a}
.cs-sec h2{margin:0;padding:20px 24px;border-bottom:1px solid #e3e5e9;font-size:22px;font-weight:700;line-height:1.35;letter-spacing:-.02em;color:#151a23;scroll-margin-top:110px}
.cs-sec-body{padding:24px 24px 4px}
/* 본문 속 다른 페이지 · 글 링크 — 글자 색과 구분되게 파랑 + 밑줄 */
.cs-sec-body a{color:#2e6bff;text-decoration:underline;text-underline-offset:3px}
.cs-sec-body a:hover{color:#1f55d6}
.cs-sec-body h3{margin:4px 0 10px;padding-top:20px;border-top:1px solid #e3e5e9;font-size:17px;font-weight:700;line-height:1.4;color:#151a23}
.cs-sec-body>p:first-child+h3{margin-top:20px}
.cs-article p{margin:0 0 20px;text-align:justify;font-size:17px;line-height:1.75;letter-spacing:-.01em;color:#151a23;word-break:keep-all}
/* 다룬 검색어 = 사무소 상자와 같은 회색 알약, 보고서 기록 = 점 목록 */
.cs-article .cs-kw{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.cs-kw li{padding:6px 14px;border-radius:999px;background:#eef0f3;font-size:15px;line-height:1.4;color:#151a23}
.cs-dots-light{display:grid;gap:8px;margin:0 0 24px;padding:0 0 0 18px;list-style:disc;font-size:16px;line-height:1.7;color:#151a23;word-break:keep-all}
/* 표 위 범위 설명 한 줄(어느 측정 세트의 숫자인지) */
.cs-article .cs-table-cap{margin:0 0 8px;font-size:14px;font-weight:600;color:#3d4350}
.cs-table{width:100%;margin:0 0 20px;border:1px solid #e3e5e9;border-collapse:separate;border-spacing:0;border-radius:10px;font-size:15px}
.cs-table th,.cs-table td{padding:12px 16px;border-bottom:1px solid #e3e5e9;text-align:left;word-break:keep-all}
.cs-table tbody tr:last-child>*{border-bottom:0}
.cs-table thead th{background:#f6f7f9;font-size:14px;font-weight:600;color:#4a4a4a}
.cs-table thead th:first-child{border-top-left-radius:10px}
.cs-table thead th:last-child{border-top-right-radius:10px}
.cs-table:not(.cs-table--pair) td+td,.cs-table:not(.cs-table--pair) th+th{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-table:not(.cs-table--pair) td:last-child{font-weight:700}
/* 사무소가 준 것 → 사일삼이 반영한 것: 숫자 표가 아니라 두 칸 모두 왼쪽 정렬 · 줄바꿈 허용 */
.cs-table--pair th,.cs-table--pair td{width:50%;font-weight:400}
.cs-table--pair tbody th{font-weight:600}
.cs-article>p:not(.lp-updated,.cs-actions){margin:0;padding-left:24px;font-size:15px}
/* 본문 끝 행동 버튼 = 카드 '사례 자세히 보기'와 같은 알약(높이 44 · 15px), 진단은 사이트 기본 파랑 채움 */
.cs-article .cs-actions{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0}
.cs-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 22px;border:1px solid #151a23;border-radius:999px;font-size:15px;font-weight:600;color:#151a23;text-decoration:none;transition:background-color .2s,color .2s}
.cs-btn::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.cs-btn:hover,.cs-btn:focus-visible{background:#151a23;color:#fff}
.cs-btn--primary{border-color:#2e6bff;background:#2e6bff;color:#fff}
.cs-btn--primary:hover,.cs-btn--primary:focus-visible{border-color:#1f55d6;background:#1f55d6}
.cs-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-pager a{display:block;padding:20px 24px;color:#151a23;text-decoration:none}
.cs-pager a+a{border-left:1px solid #e3e5e9;text-align:right}
.cs-pager a:hover b{text-decoration:underline}
.cs-pager small{display:block;font-size:15px;font-weight:600;color:#3d4350}
.cs-pager b{display:block;margin-top:8px;font-size:17px;font-weight:600;line-height:1.5;word-break:keep-all}

@media(max-width:1100px){
  .cs-case{padding:32px 28px 20px}
  .cs-case-box{grid-template-columns:minmax(0,1fr);min-height:0}
  .cs-case-id{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-right:0;border-bottom:1px solid #fff}
  .cs-case-who{border-bottom:0;border-right:1px solid #ffffff59}
  .cs-layout{grid-template-columns:260px minmax(0,1fr)}
}
@media(max-width:900px){
  .cs-wrap{width:calc(100% - 32px)}
  .cs-hero{padding:28px 0 36px}
  .cs-hero .cs-tags{margin-top:40px}
  .cs-hero h1{font-size:28px}
  .cs-hero-stats{grid-auto-flow:row}
  .cs-hero-stats li+li{border-left:0;border-top:1px solid #ffffff59}
  .cs-hero-stats b{font-size:30px}
  .cs-hero-note{padding-left:4px}
  .cs-head{padding-block:48px 28px}
  .cs-cases{gap:24px}
  .cs-case{padding:24px 16px 16px;border-radius:16px}
  .cs-case-no{margin-bottom:16px;font-size:20px}
  .cs-case-id{grid-template-columns:minmax(0,1fr)}
  .cs-case-who{border-right:0;border-bottom:1px solid #ffffff59}
  .cs-case-name,.cs-case-meta,.cs-case-stats,.cs-case-goals div,.cs-case-cols section{padding:16px}
  .cs-case-goals,.cs-case-cols{grid-template-columns:minmax(0,1fr)}
  .cs-case-goals div:first-child{grid-column:auto}
  .cs-case-goals div+div,.cs-case-cols section+section{border-left:0;border-top:1px solid #ffffff59}
  .cs-case-goals dd{white-space:normal}
  .cs-case-foot{flex-direction:column;align-items:stretch;gap:12px;min-height:0;padding-left:4px}
  .cs-case-foot a{justify-content:center}
  .cs-case-band{padding-top:28px}
  .cs-layout{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 0 64px}
  .cs-side{position:static}
  .cs-toc{display:none}
  .cs-sec h2{padding:16px;font-size:20px}
  .cs-sec-body{padding:16px 16px 0}
  .cs-article p{font-size:16px}
  .cs-article .lp-updated,.cs-article>p:not(.lp-updated,.cs-actions){padding-left:4px;margin-left:0}
    .cs-table{font-size:14px}
  .cs-table th,.cs-table td{padding:10px 8px}
}
@media(max-width:640px){
  .cs-pager{grid-template-columns:minmax(0,1fr)}
  .cs-pager a+a{border-left:0;border-top:1px solid #e3e5e9;text-align:left}
}