/* law-partner.html — 로파트너 소개 페이지. lawyer-marketing.html(「변호사 마케팅」 착지 페이지)도 같은 배너 · 장면 높이 · 두 칸 예시 · 주석을 쓴다(한 소유자). 홈과 같은 부품으로 짠다(유저 2026-10-10 「메인 스타일에 맞게」):
장면 틀 · 가운데 제목은 frame.css, 알약 눈썹 · 세 칸 줄(.hs-cite-row) · 단계 줄(.hs-proc-list) · 두 칸 카드(.hs-box)는 home-shift.css,
광고 규정 카드는 home-advertising.css, 숫자 굴림은 home-retention.css · js, Q/A는 home-faq.css, 글자 크기는 home-type.css, 폰은 home-mobile.css.
이 파일은 이 페이지에만 있는 것만 소유한다: 배너 · 장면 높이 · 둘째 세 칸 줄 · 전후 예시 · 표 · 화면 캡처 · 주석. */
/* 배너: company.html처럼 화면 끝까지(메뉴 바로 아래), 그 위에 페이지 제목 · 한 줄 소개 · 버튼 */
body.home-light .nt-hero.lp-top{padding:0}
body.home-light .nt-hero-img.lp-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;max-width:none;height:auto;min-height:clamp(440px,40vw,600px);margin-top:0;border-radius:0;
background:#0b0f1a url(../backgrounds/system-bg.webp) center/cover no-repeat}
body.home-light .nt-hero-img.lp-banner--lawyer{background-image:url(../backgrounds/data-bg.webp)}
.lp-banner::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(5,7,13,.62)}
.lp-banner-text{width:calc(100% - 48px);max-width:880px;margin:0 auto;padding-block:64px;text-align:center;color:#fff}
.lp-banner-label{margin:0 0 18px;font:14px/1.5 monospace;letter-spacing:.14em;color:#fff}
.lp-banner-text h1{margin:0;font-size:clamp(30px,3.6vw,52px);font-weight:500;line-height:1.25;letter-spacing:-.05em;word-break:keep-all;text-wrap:balance}
.lp-banner-text h1+p{margin:24px auto 0;max-width:760px;font-size:clamp(15px,1.25vw,18px);line-height:1.75;letter-spacing:-.02em;color:#fff;word-break:keep-all}
.lp-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.lp-ghost{display:inline-flex;align-items:center;height:44px;margin-top:28px;padding:0 20px;border:1px solid #ffffff66;border-radius:999px;font-size:15px;font-weight:700;color:#fff;text-decoration:none}
.lp-ghost:hover{background:#ffffff1a}
/* 장면 높이: 이 페이지는 넘김 없이 이어 읽으므로 내용만큼(홈의 한 화면 장면은 PC 장면 넘김용). 폰은 home-mobile.css의 40px 그대로 */
@media(min-width:901px){
.lp-scene{min-height:0;padding:72px 0}
#faq.hs-faq.lp-scene{min-height:0;padding-block:72px}
}
.home-light .hs-scene-heading p.lp-updated{font-size:14px}
/* 여섯 기능: 세 칸 줄 두 개를 한 판처럼 — 둘째 줄은 윗선 없이 이어 붙인다 */
.lp-cite-next{margin-top:-1px}
.hs-cite-row:has(+.lp-cite-next){border-bottom-left-radius:0;border-bottom-right-radius:0}
.hs-cite-row.lp-cite-next{border-top-left-radius:0;border-top-right-radius:0}
/* 페르소나 전후 예시: 두 칸 카드(.hs-box) — 「후」만 하늘색 */
.lp-example-cap{margin:0 0 20px;font-size:15px;font-weight:600;color:#fff;text-align:center;word-break:keep-all}
.lp-example-cap span{font-weight:400}
.lp-pair .hs-box-card{align-items:flex-start}
.lp-pair .hs-box-card p{font-size:17px;line-height:1.8}
.hs-box-card h3.lp-after{color:var(--sh-accent)}
/* 질문 종류를 제목으로 둔 두 칸(lawyer-marketing.html #criminal): 제목을 한 단계 크게, 본문은 홈 성과 카드(.hs-res-row p)처럼 양쪽 맞춤 */
.lp-pair--lead .hs-box-card h3{margin-bottom:12px;font-size:21px}
.lp-pair--lead .hs-box-card p{text-align:justify}
/* 표(인용 공백 예시 · 채널 비교): 흰 장면 위 세 칸 줄과 같은 테두리 · 모서리 */
.lp-table-wrap{margin:24px 0 0;overflow-x:auto;border:1px solid #e3e5e9;border-radius:18px;background:#fff}
.lp-table{width:100%;min-width:640px;border-collapse:collapse;font-size:16px;line-height:1.65}
.lp-table caption{caption-side:bottom;padding:14px 24px;border-top:1px solid #e6e8ec;font-size:13px;color:#5b6070;text-align:left}
.lp-table th,.lp-table td{padding:18px 24px;border-bottom:1px solid #e6e8ec;text-align:left;vertical-align:top;color:#3d4350;word-break:keep-all}
.lp-table tbody tr:last-child>*{border-bottom:0}
.lp-table :is(th,td)[rowspan]{border-bottom:0}
.lp-table thead th{background:#f6f7f9;font-size:15px;font-weight:700;color:#151a23}
.lp-table tbody th{width:18%;font-weight:700;color:#151a23;white-space:nowrap}
.lp-table--gap tbody td:last-child{color:#2e6bff;font-weight:600}
.lp-table--channels thead th+th{width:41%}
.lp-table--price tbody th{width:22%}
.lp-table--price td:last-child{width:12%;white-space:nowrap;font-weight:600;color:#2e6bff}
/* 검은 장면 위 표(pricing.html #ai-human): 장면 카드(home-shift.css .hs-box-card)와 같은 검은 바탕 · 흰 글씨 */
.lp-table-wrap--dark{border-color:#ffffff33;background:#0d0d10b3}
.lp-table--dark :is(thead,tbody) :is(th,td){border-bottom-color:#ffffff1f;color:#fff}
.lp-table--dark thead th{background:#ffffff0f;color:#fff}
.lp-table--dark tbody td{font-weight:500}
/* 원고 작성 방식 예시 표(pricing.html #writing): 여섯 칸 아래, 설명은 아래 캡션 */
.lp-table--example tbody th{width:16%}
/* 견적 비교 표(pricing.html #compare-quotes): 질문 · 믿을 만한 답 · 다시 물어볼 답 · 사일삼 — 사일삼 칸만 강조 */
.lp-table--compare{min-width:860px}
.lp-table--compare tbody th{width:17%;white-space:normal}
.lp-table--compare :is(thead,tbody) :is(th,td):last-child{background:#f3f6fd;color:#151a23}
.lp-table--compare td:nth-child(3){color:#5b6070}
.lp-table--example thead th+th{width:42%}
/* 운영 화면 캡처: 검은 장면 위 얇은 테두리 상자 */
.lp-shot{margin:0;border:1px solid #ffffff26;border-radius:14px;overflow:hidden;background:#161616}
.lp-shot img{display:block;width:100%;height:auto}
.lp-shot figcaption{padding:16px 22px;border-top:1px solid #ffffff1a;font-size:15px;line-height:1.7;color:#fff;word-break:keep-all}
.lp-shot figcaption b{display:block;margin-bottom:4px;font-size:16px;font-weight:700;color:var(--sh-accent)}
/* 운영 화면(#dashboard): 위 큰 대시보드 + 아래 세 화면(발행 캘린더 · 콘텐츠 성과 · 노출 현황, 유저 제공 앱 캡처 2026-10-13) */
.lp-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
/* 주석(예시 · 기준 · 출처) */
.lp-note{margin:18px 0 0;font-size:13.5px;line-height:1.7;color:var(--hs-scene-sub);text-align:center}
.lp-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* 인용 구조 막대 그래프(lawyer-marketing.html #citation-data): 정적 HTML · CSS, 값은 막대 옆 글자로도 보인다 */
.lp-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.lp-charts--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.hs-cite-row.lp-naver-steps{margin-top:20px}
/* 세 칸 줄의 영문 꼬리표(small)는 제목 길이와 상관없이 늘 아래 줄 — 칸마다 위치가 달라 보이지 않게 */
.lp-cite-stack h3 small{flex-basis:100%}
/* 검은 장면 위 단계 줄 카드가 바탕에 묻히지 않게 */
.hs-proc-list.lp-proc-cards>li{background:#1b1b21;box-shadow:inset 0 0 0 1px #ffffff26}
/* 가운데 정렬 장면 설명은 줄 길이를 고르게(줄 수는 그대로) */
.lp-scene .hs-scene-heading p{text-wrap:balance}
.lp-chart{margin:0;padding:26px 26px 22px;border:1px solid #e3e5e9;border-radius:18px;background:#fff}
.lp-chart figcaption h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.03em;color:#151a23}
.lp-chart figcaption p{margin:6px 0 0;font-size:14px;line-height:1.6;color:#5b6070}
.lp-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px 12px;margin-top:20px;font-size:15px;color:#3d4350;word-break:keep-all}
.lp-bar b{font-size:20px;font-weight:700;color:#2e6bff;white-space:nowrap}
.lp-bar b small{font-size:13px;font-weight:500;color:#5b6070}
.lp-bar-track{grid-column:1/-1;height:12px;border-radius:999px;background:#eef1f5;overflow:hidden}
.lp-bar-fill{display:block;width:var(--v);height:100%;border-radius:inherit;background:#2e6bff}
.lp-bar--muted b{color:#5b6070}
.lp-bar--muted .lp-bar-fill{background:#9aa3b2}
.lp-chart-stat{display:flex;align-items:center;gap:14px;margin-top:20px;padding:14px 16px;border-radius:12px;background:#f3f6fd}
.lp-chart-stat b{font-size:28px;font-weight:700;letter-spacing:-.03em;color:#2e6bff}
.lp-chart-stat p{margin:0;font-size:14px;line-height:1.55;color:#3d4350;word-break:keep-all}
.lp-chart-stat small{color:#5b6070}
.lp-chart-foot{margin:18px 0 0;padding-top:14px;border-top:1px solid #eef0f3;font-size:13.5px;line-height:1.7;color:#5b6070;word-break:keep-all}
@media(max-width:900px){
.lp-banner-text{padding-block:48px}
.lp-actions .hs-cmp-cta,.lp-ghost{order:0;margin-top:20px}
.hs-cite-row.lp-cite-next{margin-top:12px}
.lp-pair .hs-box-card{padding:22px}
.lp-pair .hs-box-card p{font-size:15px}
.lp-pair--lead .hs-box-card h3{font-size:18px}
.lp-table{font-size:14.5px}
.lp-table th,.lp-table td{padding:14px 16px}
.lp-shots{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
.lp-shot figcaption{padding:14px 16px;font-size:14px}
.lp-charts{grid-template-columns:minmax(0,1fr);gap:12px}
.lp-chart{padding:20px}
}
/* 무료 진단 #proof 알약 안 기준일(「지금도 42곳의 사무소 2026년 10월 01일 기준」): 알약 글자보다 작고 흐리게 */
.lp-actions .hs-proc-pill small{margin-left:4px;font-size:11px;font-weight:500;opacity:.8}
/* 무료 진단(free-diagnosis.html) 진단 화면 자리 표시: iframe 위에 겹쳐 두고, 앱의 lp-free-diagnosis-ready(없으면 첫 높이 메시지 2.5초 뒤)에 180ms 로 걷는다(인라인 스크립트).
위는 진단 앱 첫 화면 사진(진단 줄 · 도움말 · 보고서 예시 카드까지, assets/images/free-diagnosis/app-preview-<앱 너비>-<날짜>.webp — 앱 너비 1120 · 961 · 728 · 335px,
2배 해상도), 아래는 실시간 진단 누적 카드 윤곽(숫자가 낡지 않게 사진에 넣지 않는다). 사진 고르기는 의 화면 폭 조건(페이지 1101 · 900 · 572px —
iframe 너비 1040 · 845 · 532px 근처)이다. **앱 첫 화면이 바뀌면 사진을 다시 찍어 파일 이름 날짜를 올린다**(QA 앱을 iframe 너비로 따로 열어 보고서 예시 카드 아래 끝까지).
iframe 첫 높이 · 누적 카드 높이는 iframe 너비별 앱 실측(2026-10-14 오후 QA: 1120 → 1189 · 961 → 1238 · 728 → 1431 · 335 → 1906px — 누적 카드의 최근 진단 목록 길이에 따라 조금씩 달라진다), 앱의 vw · 767px 분기는 .lp-embed 크기 기준(cqw · @container) */
.lp-embed{position:relative;container-type:inline-size}
.lp-embed iframe{display:block;width:100%;height:1189px;min-height:400px;border:0}
/* 스크립트가 넣는 진단 iframe(data-src)은 사진 밑에서 투명하게 그려 두었다가 앱 ready 때 드러낸다(