@charset "utf-8";
/* ============================================================================
   공개 랜딩 v2 (2026-10-12) — 1차 공개 화면(제품 목록·솔루션·비교·회사 소개·개발자 문서·가이드 개편) 본문 부품.
   seo_landing.css 다음에 읽는다(SeoLandingController.view pageCss). PC·모바일 공용.
   출처: doc/publish/2026-10-11-pc/assets/publish_shared_b4.css(모바일 publish_m.css 묶음 4 복사본)
        + publish_b4.css(공용·PC 보정) + publish_b3.css(카드 3열) + publish_m.css(모바일 표 스크롤).
   색은 --lp-* 토큰만 쓴다(새 색 없음).
   ========================================================================== */

/* ── 1. 묶음 4 공용 본문 (publish_shared_b4.css) ── */
/* ===== 묶음 4 · a (M04 제품 목록, M11~M16 업종별 솔루션, M19 서비스 비교, M25 회사 소개) =====
   공개 랜딩 공용 본문 보강. .api-lp 스코프, 색은 --lp-* / --primary 토큰만 쓴다(새 색 없음).
   개발 반영 시 seo_landing.css 로 옮긴다. */

/* 앵커 이동 대상(목적 링크 → 제품 카드) */
.api-lp [id] {scroll-margin-top: 12px;}

/* 링크 카드 : 카드 전체가 a 하나 (M04 목적 링크, M11 업종 카드) */
.api-lp a.lp-item,
.api-lp a.lp-card {display: block; color: inherit; text-decoration: none;}
.api-lp a.lp-item strong {display: block; margin-bottom: 4px; font-size: 16px; color: var(--lp-ink);}
.api-lp a.lp-item:hover, .api-lp a.lp-card:hover {border-color: var(--lp-cta);}
.api-lp .lp-item strong {display: block; margin-bottom: 4px; font-size: 16px; color: var(--lp-ink);}
.api-lp-summary .lp-card span.lp-card-more {display: block; margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--lp-cta);}

/* 카드 안 줄 : 준비사항·단가 등 (라벨 굵게) */
.api-lp-summary .lp-card span.lp-card-row {display: block; margin-top: 8px; color: var(--lp-ink);}
.api-lp .lp-card .lp-card-row b {margin-right: 6px; font-weight: 700; color: var(--lp-ink-sub);}
.api-lp .lp-card .lp-card-link {display: block; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--lp-cta); text-decoration: underline;}
.api-lp .lp-card .lp-btn {width: 100%; margin-top: 14px;}
.api-lp .lp-card .lp-ctas {margin: 4px 0 0;}
.api-lp .lp-card .lp-ctas .lp-btn {margin-top: 0;}
.api-lp .lp-card > span a {color: var(--lp-cta); text-decoration: underline;}

/* 지원 상태·샘플 배지 (글자로 구분, 색만으로 구분하지 않음) */
.api-lp .lp-tags {display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0;}
.api-lp .lp-card .lp-tags:first-child {margin: 0 0 10px;}
.api-lp .lp-tags .lp-badge,
.api-lp-summary .lp-card .lp-tags span.lp-badge {
    display: inline-block; padding: 2px 10px;
    font-size: 13px; font-weight: 700; line-height: 1.5; color: #0B6062;
    background: #E3F7F7; border: 1px solid var(--lp-accent); border-radius: 999px;
}
.api-lp .lp-tags .lp-badge--muted,
.api-lp-summary .lp-card .lp-tags span.lp-badge--muted {color: var(--lp-ink-sub); background: #fff; border-color: var(--lp-line);}

/* 메시지 샘플 : 복사 가능한 HTML 텍스트, 줄바꿈 유지 */
.api-lp .lp-sample {
    margin: 0 0 10px; padding: 14px 16px;
    font-size: 15px; line-height: 1.6; color: var(--lp-ink); white-space: pre-line;
    background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 12px;
}
.api-lp-hero .lp-sample-card {padding: 20px; background: #fff; border: 1px solid var(--lp-line); border-radius: 12px;}
.api-lp-hero .lp-sample-card strong {display: block; margin-bottom: 8px;}
.api-lp-hero .lp-sample-card .lp-bullets {margin: 0;}
.api-lp-hero .lp-grid > .lp-bullets {margin: 0;}

/* 카드·FAQ 뒤 관련 링크 간격 */
.api-lp .lp-cards + .lp-related,
.api-lp .lp-faq-list + .lp-related,
.api-lp .lp-steps + .lp-related,
.api-lp .lp-table-wrap + .lp-related,
.api-lp .lp-cards + .lp-table-wrap,
.api-lp-process ol + .lp-related,
.api-lp .lp-inner > p + .lp-related,
.api-lp .lp-dl + p {margin-top: 16px;}
.api-lp .lp-cards + .lp-note,
.api-lp .lp-grid-4 + .lp-note,
.api-lp .lp-grid-3 + .lp-note,
.api-lp .lp-table-wrap + .lp-note {margin-top: 12px;}
.api-lp .lp-note a {color: var(--lp-cta); text-decoration: underline;}
.api-lp .lp-steps > li p a {color: var(--lp-cta); text-decoration: underline;}

/* 정의 목록 (M25 운영 주체·문의) : 모바일은 라벨 위, 값 아래 */
.api-lp .lp-dl {margin: 0 0 18px; border-top: 1px solid var(--lp-line);}
.api-lp .lp-dl > div {padding: 12px 0; border-bottom: 1px solid var(--lp-line);}
.api-lp .lp-dl dt {margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--lp-ink-sub);}
.api-lp .lp-dl dd {margin: 0; font-size: 16px; color: var(--lp-ink); word-break: keep-all;}
.api-lp .lp-dl dd a {display: inline-block; min-height: 24px; color: var(--lp-cta); text-decoration: underline;}

/* 히어로 정책 바로가기 한 줄 */
.api-lp .lp-inline-links {display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px;}
.api-lp .lp-inline-links a {color: var(--lp-cta); text-decoration: underline;}

/* M16 개발자 경로 : .api-lp-process li 규칙이 언어별 링크 목록(ul.lp-related)에 번지지 않게 */
.api-lp-process .lp-related li {padding: 0; background: none; border: 0; border-radius: 0;}
.api-lp-process .lp-related li::before {content: none; display: none;}

/* ===== 묶음 4-b : 개발자·연동(D01~D06·D18·D19) · 솔루션(D23~D26) =====
   전부 main.api-lp-dev 범위. 색은 api_landing.css 의 --lp-* 토큰만 쓴다(새 색 없음).
   개발 반영 시 common/css/seo_landing.css 의 같은 절로 옮긴다(PC 도 같은 본문). */

/* 앵커 이동 시 제목이 위에 붙지 않게 (D02·D03 목차·5단계) */
.api-lp-dev h2[id], .api-lp-dev h3[id] {scroll-margin-top: 12px;}

/* HTTP 예제 배지 (D01 언어 카드·D04~D06 히어로) : 글자 배지. 숫자 배지(.lp-item .lp-badge 34px)와 구분 */
.api-lp-dev .lp-badge-row {margin: 0 0 10px;}
.api-lp-dev .lp-badge-row .lp-badge,
.api-lp-dev a.lp-item .lp-badge {
    display: inline-block; width: auto; height: auto; margin: 0 0 10px; padding: 3px 10px;
    font-size: 12px; font-weight: 800; line-height: 1.5; color: var(--lp-cta);
    background: var(--lp-surface); border: 1px solid var(--lp-accent); border-radius: 999px;
}
.api-lp-dev .lp-sdk-note {margin: 10px 0 0;}
.api-lp-dev .api-lp-hero .lp-updated {margin: 12px 0 0;}

/* 카드 전체가 링크 (D01 목적 카드·언어 카드) : 터치 영역 = 카드 */
.api-lp-dev a.lp-card, .api-lp-dev a.lp-item {display: block; min-height: 44px; color: var(--lp-ink); text-decoration: none;}
.api-lp-dev a.lp-card:hover, .api-lp-dev a.lp-item:hover {border-color: var(--lp-cta);}
.api-lp-dev a.lp-item strong {display: block; margin: 0 0 4px; font-size: 17px; color: var(--lp-ink);}

/* D02 처음 연동하는 순서 : 단계 카드 전체가 앵커 링크 */
.api-lp-dev .lp-steps-tit {margin-top: 28px;}
.api-lp-dev .lp-steps--link > li {padding: 0;}
.api-lp-dev .lp-steps--link > li > a {display: block; padding: 14px 18px 14px 58px; color: inherit; text-decoration: none; border-radius: 12px;}
.api-lp-dev .lp-steps--link > li::before {top: 14px;}
.api-lp-dev .lp-steps--link > li > a:hover strong {color: var(--lp-cta);}

/* D03 접기 목차 : api-lp-faq details 규칙 재사용, 섹션 여백만 줄인다 */
.api-lp-dev .api-lp-faq.lp-toc {padding: 8px 0;}
.api-lp-dev .lp-toc-list {margin: 0; padding: 0 0 0 20px;}
.api-lp-dev .lp-toc-list li {margin: 0; line-height: 1.6;}
.api-lp-dev .lp-toc-list strong {margin-right: 6px; color: var(--lp-ink);}
.api-lp-dev .lp-toc-list a {display: inline-block; padding: 10px 0; color: var(--lp-cta); text-decoration: underline;}

/* 코드 블록 : 블록 안에서만 가로 스크롤, 페이지는 넘치지 않게 */
.api-lp-dev .lp-code {max-width: 100%; box-sizing: border-box;}
.api-lp-dev .lp-inner {min-width: 0;}

/* D18 검색 폼 : lp-calc-form·lp-calc-row 재사용. 검색어는 왼쪽 정렬 */
.api-lp-dev .lp-search-form {position: relative;}
.api-lp-dev .lp-search-form input[type="search"] {
    width: 100%; height: 44px; padding: 0 12px; box-sizing: border-box; -webkit-appearance: none;
    font-size: 16px; color: var(--lp-ink); background: #fff; border: 1px solid #C9D3D6; border-radius: 8px;
}
.api-lp-dev .lp-search-form [aria-invalid="true"] {border-color: #C0392B;}
.api-lp-dev .lp-search-form .lp-calc-actions .lp-btn {width: 100%;}
.api-lp-dev .lp-search-form .lp-calc-err {margin: 10px 0 0;}
.api-lp-dev .lp-search-form .loading_pop {border-radius: 12px;}
.api-lp-dev .lp-related--1 {grid-template-columns: 1fr;}
.api-lp-dev .lp-related a {min-height: 44px; box-sizing: border-box;}
.api-lp-dev .lp-empty h3 {margin: 24px 0 10px;}
.api-lp-dev .lp-empty h3:first-child {margin-top: 0;}
.api-lp-dev .lp-empty .lp-note {margin: 0 0 8px;}
.api-lp-dev .lp-empty .lp-ctas {margin: 14px 0;}

/* D23~D26 : 히어로 책임 범위 문단, 단계 카드 안 분기, 모의 메시지 */
.api-lp-dev .api-lp-hero .lp-scope {margin: 12px 0 0; font-size: 15px; color: var(--lp-ink);}
.api-lp-dev .api-lp-process li .lp-caution {margin: 12px 0 0; font-size: 14px;}
.api-lp-dev .api-lp-process li span {display: block;}
.api-lp-dev .lp-item h3 {margin: 0 0 8px; font-size: 16px;}
.api-lp-dev .lp-item .lp-mock {padding: 12px 14px; color: var(--lp-ink); background: var(--lp-surface); border-radius: 8px;}
.api-lp-dev .lp-item .lp-bullets {margin: 12px 0 0; font-size: 14px;}
.api-lp-dev .lp-one .lp-item {margin: 0 0 14px;}
.api-lp-dev .lp-grid-3 + .lp-note, .api-lp-dev .lp-grid-3 + .lp-caution {margin-top: 14px;}
.api-lp-dev h3#lp-h3-cost {margin-top: 24px;}
.api-lp-dev .api-lp-summary .lp-table-wrap + .lp-caution {margin-top: 0;}

/* 표 안 코드(경로·필드명)는 글자 단위로 끊지 않는다. 넘치면 .lp-table-wrap 안에서만 가로 스크롤 */
.api-lp-dev table.lp-table code {white-space: nowrap; word-break: keep-all;}
.api-lp-dev table.lp-table tbody th {white-space: normal; min-width: 5.5em;}
.api-lp.api-lp-dev .lp-table-wrap table.lp-table.lp-table--wide {min-width: 600px;}

/* ===== 묶음 4 · c : 제품 소개(M05~M09)·가이드 허브(M20)·가이드(G01~G08) =====
   색은 api_landing.css 의 --lp-* 토큰과 common_m.css 토큰만 쓴다. 새 색 없음.
   개발 반영 시 seo_landing.css 해당 절로 옮긴다(모두 .api-lp 스코프). */

/* 가이드 목차(details) : 기존 api-lp-faq 규칙 재사용, 섹션 여백만 줄인다 */
.api-lp section.lp-toc {padding: 0 0 8px; border-top: 0;}
.api-lp .lp-toc details {border-top: 1px solid var(--lp-line);}
.api-lp .lp-toc .lp-faq-a {padding-bottom: 14px;}
.api-lp .lp-toc .lp-bullets {margin: 0;}
.api-lp .lp-toc .lp-bullets a {color: var(--lp-cta); text-decoration: underline;}
.api-lp-hero .lp-updated {margin: 12px 0 0;}

/* PC 웹 전용 기능 표기 : 색만으로 구분하지 않도록 글자 'PC 웹'을 함께 쓴다 */
.api-lp .lp-pc {display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--lp-ink-sub); background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 4px; vertical-align: middle; white-space: nowrap;}
.api-lp .lp-pcnote {margin: -16px 0 16px;}

/* 가상 메시지 미리보기 (M05·M06·M07·M08) : HTML 텍스트, 이미지 없음 */
.api-lp .lp-msgprev {display: flex; flex-direction: column; gap: 10px;}
.api-lp .lp-msgprev-tit {margin: 0 0 2px; font-size: 15px; font-weight: 800; color: var(--lp-ink);}
.api-lp .lp-msgprev-item {padding: 12px 14px; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 10px; font-size: 15px;}
.api-lp .lp-msgprev-item p {margin: 0; color: var(--lp-ink);}
.api-lp .lp-msgprev-item strong {display: block; margin-bottom: 2px; font-size: 15px;}
.api-lp .lp-msgprev-lb {display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--lp-ink-sub);}
.api-lp .lp-msgprev-img {display: flex; align-items: center; justify-content: center; height: 64px; margin-bottom: 6px; font-size: 13px; color: var(--lp-ink-sub); background: #fff; border: 1px dashed var(--lp-line); border-radius: 8px;}
.api-lp .lp-msgprev-from {display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--lp-ink);}
.api-lp .lp-msgprev-btn {display: block; margin-top: 10px; padding: 8px 0; font-size: 14px; font-weight: 700; text-align: center; color: var(--lp-ink); background: #fff; border: 1px solid var(--lp-line); border-radius: 6px;}

/* api-lp-process 안의 보조 목록(ul.lp-bullets)은 STEP 카드가 아니다 (M05 기존 깨짐 보정) */
.api-lp-process h3 {margin-top: 28px;}
.api-lp-process ul.lp-bullets li {padding: 0; background: none; border: 0; border-radius: 0;}
.api-lp-process ul.lp-bullets li::before {content: none;}
.api-lp-process ul.lp-bullets li strong {display: inline; margin: 0; font-size: inherit;}

/* M07 유형 카드 단가 */
.api-lp .lp-type-cards {margin: 0 0 20px;}
.api-lp .lp-type-cards .lp-type-price {margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--lp-ink);}

/* M09 히어로 코드 미리보기 · 지원표 · 언어별 예제 */
.api-lp-hero .lp-hero-code {min-width: 0;}
.api-lp-hero .lp-hero-code .lp-code {margin: 0;}
.api-lp .lp-api-support {margin-top: 20px;}
.api-lp h3.lp-api-lang {margin: 24px 0 10px;}
.api-lp .lp-api-support table.lp-table {min-width: 620px;}
.api-lp .lp-api-support code {white-space: nowrap; word-break: normal;}

/* M20 가이드 허브 : 검색(전체 폭) · 카드 메타 · 보조 링크 */
.api-lp .lp-search {margin: 22px 0 0;}
.api-lp .lp-search label {display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--lp-ink);}
.api-lp .lp-search-row {display: flex; gap: 8px;}
.api-lp .lp-search input[type="search"] {flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 14px; box-sizing: border-box; font-size: 16px; color: var(--lp-ink); background: #fff; border: 1px solid #C9D3D6; border-radius: 8px;}
.api-lp .lp-search .lp-btn {flex: 0 0 auto; width: auto; padding: 12px 18px;}
.api-lp .lp-search .lp-note:empty {display: none;}
.api-lp .lp-search .lp-note {margin-top: 8px;}
.api-lp .lp-guide-list .lp-guide-meta {font-size: 13px;}
.api-lp .lp-guide-sub {margin: 6px 0 0 4px;}
.api-lp .lp-guide-item[hidden] {display: none;}
@media (min-width: 1025px) {
    .api-lp #getting-started .lp-guide-list {grid-template-columns: repeat(3, 1fr);}
}
.api-lp .lp-related .lp-guide-sub a {display: inline; padding: 0; font-size: 14px; background: none; border: 0; border-radius: 0; text-decoration: underline;}

/* 본문 안 텍스트 링크가 일반 글자와 구분되게 (모바일 common_m.css 의 a{color:var(--normal)} 보정) */
.api-lp .lp-answer a, .api-lp .lp-caution a, .api-lp .lp-note a, .api-lp .lp-steps > li p a,
.api-lp .lp-faq-a a, .api-lp .lp-inner > p a, .api-lp .lp-bullets a {color: var(--lp-cta); text-decoration: underline;}
/* api-lp-process 안 ol.lp-steps 번호 원 : .api-lp-process li::before 의 STEP 배지 여백이 남아 원이 찌그러지는 것 보정 */
.api-lp-process ol.lp-steps > li::before {margin: 0; padding: 0; letter-spacing: 0;}
.api-lp .lp-guide-sec .lp-guide-list + .lp-note {margin-top: 12px;}
/* 단계 설명 문장 안 강조(strong)가 제목처럼 줄바꿈되는 것 보정 */
.api-lp .lp-steps > li p strong {display: inline; margin: 0; font-size: inherit;}
.api-lp .lp-note + .lp-caution, .api-lp .lp-note + .lp-table-wrap, .api-lp .lp-caution + .lp-ctas {margin-top: 14px;}
.api-lp .lp-note + p {margin-top: 10px;}

/* G09~G11 약관 : 시행일, 기본 details 목차(앵커가 titleBar 에 가리지 않게), 관련 정책 링크 */
.terms .terms_eff {margin: 0 0 10px; font-size: .9375rem; color: var(--normal);}
.terms details {margin: 0 0 15px; border: 1px solid #ddd; border-radius: 5px; background-color: #fff;}
.terms summary {padding: 12px; font-size: .875rem; line-height: 20px; cursor: pointer;}
.terms p a, .terms li a {color: var(--primary); text-decoration: underline;}
.terms details ul {padding: 0 12px 8px;}
.terms details a {display: flex; align-items: center; min-height: 40px; color: var(--primary);}
.terms h2[id] {scroll-margin-top: 16px;}
.policy_links ul {margin-top: 6px;}
.policy_links li a {display: flex; align-items: center; min-height: 44px; border-top: 1px solid #ddd;}

/* ── 2. 공용 본문 보강 · 문서 3열 · 서비스 소개 미리보기 (publish_b4.css) ── */
   공용 본문이라 개발 때 common/css/seo_landing.css 로 옮긴다(PC·모바일 같이 씀). 색은 --lp-* 토큰만. */
.api-lp .lp-chips {display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none;}
.api-lp .lp-chips a {display: inline-block; padding: 8px 16px; font-size: 15px; color: var(--lp-ink); background: #fff; border: 1px solid var(--lp-line); border-radius: 999px;}
.api-lp .lp-chips a:hover, .api-lp .lp-chips a:focus {border-color: var(--lp-cta);}
.api-lp .lp-item {display: flex; flex-direction: column;}
.api-lp .lp-scope {font-size: 13px; font-weight: 700; color: var(--lp-cta);}
.api-lp .lp-item h3 {margin-top: 6px;}
.api-lp .lp-item .lp-note {margin-top: 10px;}
.api-lp .lp-item .lp-ctas {margin-top: auto; padding-top: 14px; justify-content: flex-start;}
.api-lp .lp-more {margin-top: auto; padding-top: 14px; font-size: 15px; font-weight: 700; color: var(--lp-cta);}
.api-lp .lp-more::after {content: " ›";}
.api-lp .lp-grid-2 {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.api-lp .lp-related-3 {grid-template-columns: repeat(3, 1fr);}
.api-lp .lp-related-4 {grid-template-columns: repeat(4, 1fr);}
.api-lp-process ol.lp-process-4 {grid-template-columns: repeat(4, 1fr);}
.api-lp .lp-steps-row {display: flex; flex-wrap: wrap; gap: 12px 28px;}
.api-lp .lp-steps-row > li {margin: 0;}
.api-lp .lp-sample {margin: 0; padding: 22px; background: #fff; border: 1px solid var(--lp-line); border-radius: 12px;}
.api-lp .lp-sample figcaption {display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; color: var(--lp-ink-sub);}
.api-lp .lp-sample p {margin: 0; padding: 16px; font-size: 16px; line-height: 1.6; color: var(--lp-ink); background: var(--lp-surface); border-radius: 10px;}
.api-lp .lp-dl {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; margin: 0;}
.api-lp .lp-dl > div {display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--lp-line);}
.api-lp .lp-dl dt {flex: 0 0 9em; font-weight: 700; color: var(--lp-ink-sub);}
.api-lp .lp-dl dd {margin: 0; color: var(--lp-ink);}
.api-lp .lp-certs {display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none;}
.api-lp .lp-certs li {padding: 16px 20px; background: #fff; border: 1px solid var(--lp-line); border-radius: 12px;}
.api-lp .lp-certs strong {display: block; color: var(--lp-ink);}
.api-lp .lp-certs span {font-size: 14px; color: var(--lp-ink-sub);}
@media (max-width: 1024px) {
    .api-lp .lp-related-3, .api-lp .lp-related-4, .api-lp-process ol.lp-process-4 {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 767px) {
    .api-lp .lp-grid-2, .api-lp .lp-related-3, .api-lp .lp-related-4, .api-lp-process ol.lp-process-4, .api-lp .lp-dl {grid-template-columns: 1fr;}
}

/* ── 묶음 4-2 문서 3열(가이드 G01~G08, 개발자 문서 D02~D06) ───────────── */
.api-lp .lp-doc-meta {margin: 8px 0 0; font-size: 14px; color: var(--lp-ink-sub);}
.api-lp .lp-doc-steps {display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: ds;}
.api-lp .lp-doc-steps li {padding: 6px 14px 6px 10px; font-size: 14px; font-weight: 700; color: var(--lp-ink); background: #fff; border: 1px solid var(--lp-line); border-radius: 999px; counter-increment: ds;}
.api-lp .lp-doc-steps li::before {content: counter(ds) ". "; color: var(--lp-cta);}
.api-lp .lp-doc-env {margin: 20px 0 0; padding: 14px 18px; font-size: 15px; background: #fff; border: 1px solid var(--lp-line); border-left: 4px solid var(--lp-accent); border-radius: 8px;}
.api-lp .lp-doc-env p {margin: 0;}
.api-lp .lp-doc-env p + p {margin-top: 4px; color: var(--lp-ink-sub);}
.api-lp .lp-doc-side, .api-lp .lp-doc-toc {display: none;}
@media (min-width: 1025px) {
    .api-lp .lp-doc {display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
    .api-lp .lp-doc-side, .api-lp .lp-doc-toc {display: block; position: sticky; top: 24px; align-self: start; padding-top: 40px; font-size: 14px;}
    .api-lp .lp-doc-side-tit {margin: 0 0 10px; font-weight: 800; color: var(--lp-ink);}
    .api-lp .lp-doc-side ul, .api-lp .lp-doc-toc ol {margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--lp-line);}
    .api-lp .lp-doc-side a, .api-lp .lp-doc-toc a {display: block; margin-left: -2px; padding: 6px 0 6px 12px; color: var(--lp-ink-sub); border-left: 2px solid transparent; line-height: 1.4;}
    .api-lp .lp-doc-side a[aria-current="page"] {font-weight: 700; color: var(--lp-ink); border-left-color: var(--lp-cta);}
    .api-lp .lp-doc-side a:hover, .api-lp .lp-doc-toc a:hover {color: var(--lp-ink);}
    .api-lp .lp-doc-main > section {padding: 40px 0; background: none; border-top: 1px solid var(--lp-line);}
    .api-lp .lp-doc-main > section:first-child {border-top: 0;}
    .api-lp .lp-doc-main .lp-inner {max-width: none; padding: 0;}
    .api-lp .lp-doc-main h2 {font-size: 24px; scroll-margin-top: 20px;}
    .api-lp .lp-doc-main .lp-related {grid-template-columns: 1fr;}
    .api-lp .lp-doc-main .api-lp-process ol.lp-steps {display: block;}
    .subWrap01 .api-lp .lp-doc-main .api-lp-process ol.lp-steps > li {padding: 16px 18px 16px 76px;}
}

/* ── 서비스 소개 미리보기 (M05·M06·M07) ───────────────────── */
.api-lp .lp-previews {display: grid; gap: 12px;}
.api-lp .lp-previews .lp-sample {padding: 16px 18px;}
.api-lp .lp-previews .lp-sample p {padding: 12px 14px; font-size: 15px;}
.api-lp .lp-sample-img {display: flex; align-items: center; justify-content: center; height: 72px; margin-bottom: 10px; font-size: 13px; color: var(--lp-ink-sub); background: #fff; border: 1px dashed var(--lp-line); border-radius: 8px;}
.api-lp .lp-sample-at p {background: #fff; border: 1px solid var(--lp-line);}
.api-lp .lp-sample-btn {display: block; margin-top: 8px; padding: 10px; font-size: 15px; text-align: center; color: var(--lp-ink); background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 8px;}
.api-lp-process ol.lp-process-5 {grid-template-columns: repeat(5, 1fr);}
@media (max-width: 1024px) {
    .api-lp-process ol.lp-process-5 {grid-template-columns: repeat(3, 1fr);}
}


/* ── 3. PC 보정 (publish_b4.css) ── */
/* 공용 본문(모바일 초안) 위 PC 보정 : 3열 문서는 오른쪽 목차가 있으므로 본문 안 접기 목차는 숨긴다 */
@media (min-width: 1025px) {
    .api-lp .lp-doc-main > section.lp-toc {display: none;}
    .api-lp .lp-doc-main > section.lp-toc + section {border-top: 0;}
}
/* 글만 있는 히어로(오른쪽 그림·카드 없음)는 기존 홈 히어로 최소 높이 460px 를 쓰지 않는다 */
.subWrap01 .api-lp-hero:not(:has(.lp-grid)) {min-height: 0;}
/* 카드 6장은 3열 2줄 (4열이면 마지막 줄이 2장만 남는다) */
@media (min-width: 1025px) {
    .api-lp .lp-cards:has(> .lp-card:nth-child(6):last-child) {grid-template-columns: repeat(3, 1fr);}
    .api-lp .lp-cards:has(> .lp-card:nth-child(2):last-child) {grid-template-columns: repeat(2, 1fr);}
}

/* ── 4. 카드 3개 3열 (publish_b3.css, M10·M34) ── */
@media (min-width: 1025px) {
    .api-lp-summary .lp-cards:has(> .lp-card:nth-child(3):last-child) {grid-template-columns: repeat(3, 1fr);}
}
.api-lp-summary .lp-card:has(.care_open) {display: flex; flex-direction: column;}
.api-lp-summary .lp-card:has(.care_open) > span {display: block; margin-bottom: 16px;}
.api-lp-summary .lp-card .care_open {margin-top: auto; align-self: flex-start;}


/* ── 5. 모바일 표 가로 스크롤·행 카드 (publish_m.css) ── */
/* 공개 랜딩 표: 가로 스크롤 표는 첫 열 고정 + 좌우 그림자로 스크롤 가능 표시 */
@media (max-width: 767px) {
    .api-lp .lp-table-wrap {
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
            linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) left center / 12px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) right center / 12px 100% no-repeat scroll;
        background-color: #fff;
    }
    .api-lp table.lp-table {background: transparent;}
    .api-lp table.lp-table:not(.lp-table-stack) td {min-width: 8.5em;}   /* 좁은 열 때문에 행이 지나치게 높아지지 않게 표를 넓히고 가로 스크롤 */
    .api-lp table.lp-table tbody th:first-child {position: sticky; left: 0; z-index: 1; background: #fff;}
    .api-lp table.lp-table thead th:first-child {position: sticky; left: 0; z-index: 2;}
    /* 등급표 등 lp-table-stack : 행별 카드 */
    .api-lp .lp-table-wrap:has(.lp-table-stack) {overflow: visible; border: 0; background: none;}
    .api-lp table.lp-table.lp-table-stack {min-width: 0;}
    .api-lp table.lp-table-stack thead {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
    .api-lp table.lp-table-stack, .api-lp table.lp-table-stack tbody, .api-lp table.lp-table-stack tr {display: block;}
    .api-lp table.lp-table-stack caption {display: block; padding: 0 0 8px;}
    .api-lp table.lp-table-stack tr {margin: 0 0 10px; border: 1px solid var(--lp-line); border-radius: 12px; background: #fff;}
    .api-lp table.lp-table-stack tbody th, .api-lp table.lp-table-stack td {display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--lp-line); white-space: normal;}
    .api-lp table.lp-table-stack tbody th {position: static; background: var(--lp-surface); border-radius: 12px 12px 0 0;}
    .api-lp table.lp-table-stack tr td:last-child {border-bottom: 0;}
    .api-lp table.lp-table-stack td::before {content: attr(data-label); flex: 0 0 auto; font-weight: 700; color: var(--lp-ink-sub);}
    .api-lp table.lp-table-stack td {text-align: right;}
}

/* ── 6. [2026-10-12] PC 헤더 아래 빈 띠 · 위치 표시 중복 · 현재 메뉴 표시 · 카드 버튼 높이 ──
   셸(pc/seo/landing.jsp)이 .subWrap01 에 has-subnav(하위 메뉴 줄이 늘 떠 있는 화면) / no-subnav 를 붙인다.
   모바일 셸에는 두 클래스가 없어 아래 6-1~6-3 은 PC 에만 적용된다. */
/* 6-1. 하위 메뉴 줄이 없는 화면은 그 자리(61px)를 비우지 않는다 (api_landing.css 의 .subWrap01 .api-lp padding-top 보정) */
.subWrap01.no-subnav .api-lp {padding-top: 0;}
/* 6-2. 하위 메뉴 줄이 있는 화면 : 같은 위치를 다시 보여 주는 breadcrumb 줄은 화면에서만 숨긴다
        (스크린리더용 nav 와 BreadcrumbList JSON-LD 는 그대로) */
.subWrap01.has-subnav .api-lp-crumb {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
/*      하위 메뉴 줄이 없는 화면 : 별도 흰 띠 대신 히어로 배경 위에 작게 */
.subWrap01.no-subnav .api-lp-crumb {padding: 18px 0 0; font-size: 13px; background-color: var(--lp-surface);}
.subWrap01.no-subnav .api-lp-crumb + .api-lp-hero {padding-top: 26px;}
@media screen and (min-width: 1200px) {
    .subWrap01.no-subnav .api-lp-crumb + .api-lp-hero {padding-top: 34px;}
}
/* 6-3. 현재 화면의 하위 메뉴만 굵게([2026-10-17] 밑줄 제거 — 대표 요청). 하위 메뉴 줄이 없는 '서비스·소개' 화면은 대메뉴에 현재 위치 막대만 표시(.on 과 같은 모양) */
.subWrap01 .sub_menuWrap a.sub_on {font-weight: 700; text-decoration: none;}
.subWrap01 .menuWrap > li > a.cur::before {content: ""; position: absolute; left: 50%; bottom: 0; width: 60px; height: 4px; margin-left: -30px; background-color: #000;}
/* 6-4. 카드 한 줄에서 글 길이가 달라도 아래 링크·버튼이 같은 높이에 오게 한다 (카드 높이는 grid 가 이미 맞춘다) */
.api-lp .lp-cards > .lp-card:has(> :is(.lp-card-link, .lp-btn, .lp-ctas)) {display: flex; flex-direction: column;}
.api-lp .lp-cards > .lp-card > :is(.lp-card-link, .lp-btn, .lp-ctas):not(:is(.lp-card-link, .lp-btn, .lp-ctas) ~ *) {margin-top: auto;}
.api-lp .lp-cards > .lp-card > :not(.lp-card-link, .lp-btn, .lp-ctas):has(+ .lp-card-link) {margin-bottom: 10px;}
.api-lp .lp-cards > .lp-card > :not(.lp-card-link, .lp-btn, .lp-ctas):has(+ .lp-btn) {margin-bottom: 14px;}
.api-lp .lp-cards > .lp-card > :not(.lp-card-link, .lp-btn, .lp-ctas):has(+ .lp-ctas) {margin-bottom: 4px;}
/* 6-5. [2026-10-12 3차] 1024px 이하(모바일 1열·태블릿 2열)에서도 버튼 위치가 카드마다 같게 :
        아래에 링크·버튼이 있는 카드 묶음은 줄 높이를 가장 긴 카드에 맞춘다(버튼은 6-4 가 아래로 붙인다) */
@media (max-width: 1024px) {
    .api-lp .lp-cards:has(> .lp-card > :is(.lp-card-link, .lp-btn, .lp-ctas)) {grid-auto-rows: 1fr;}
}

/* ── 7. [2026-10-12 3차] 공개 랜딩 본문 폰트 = Pretendard (PC·모바일 공용) ──
   · 모바일 기본 폰트는 NanumSquare(common_m.css), PC 입력칸·선택칸·버튼 기본은 Noto Sans KR(common.css --font)이라
     랜딩 본문(.api-lp)과 그 안의 입력칸·선택칸·버튼에 Pretendard 를 직접 지정한다.
   · 모바일은 Pretendard 웹폰트를 읽지 않으므로 여기서 선언한다(파일은 PC 와 같은 /common/pc/font/Pretendard).
   · 코드 예시(code·pre)는 고정폭 글꼴을 그대로 쓴다. 모바일 상단 제목 줄·메뉴·푸터(앱 틀)는 바꾸지 않는다. */
@font-face {font-family: "Pretendard"; font-style: normal; font-weight: 400; font-display: swap; src: local("Pretendard Regular"), url("../pc/font/Pretendard/Pretendard-Regular.woff2") format("woff2"), url("../pc/font/Pretendard/Pretendard-Regular.woff") format("woff");}
@font-face {font-family: "Pretendard"; font-style: normal; font-weight: 500; font-display: swap; src: local("Pretendard Medium"), url("../pc/font/Pretendard/Pretendard-Medium.woff2") format("woff2"), url("../pc/font/Pretendard/Pretendard-Medium.woff") format("woff");}
@font-face {font-family: "Pretendard"; font-style: normal; font-weight: 600; font-display: swap; src: local("Pretendard SemiBold"), url("../pc/font/Pretendard/Pretendard-SemiBold.woff2") format("woff2"), url("../pc/font/Pretendard/Pretendard-SemiBold.woff") format("woff");}
@font-face {font-family: "Pretendard"; font-style: normal; font-weight: 700; font-display: swap; src: local("Pretendard Bold"), url("../pc/font/Pretendard/Pretendard-Bold.woff2") format("woff2"), url("../pc/font/Pretendard/Pretendard-Bold.woff") format("woff");}
@font-face {font-family: "Pretendard"; font-style: normal; font-weight: 900; font-display: swap; src: local("Pretendard Black"), url("../pc/font/Pretendard/Pretendard-Black.woff2") format("woff2"), url("../pc/font/Pretendard/Pretendard-Black.woff") format("woff");}
.api-lp, .api-lp input, .api-lp select, .api-lp textarea, .api-lp button {font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;}

/* ==========================================================================
   9. [2026-10-17] 메인 화면 기준으로 소개 페이지 글꼴·버튼 통일 (대표 요청: "너무 굵어 보임", 버튼 높이 제각각)
      기준 = 메인 히어로(제목 40px/700/52px, 리드 18px/1.6) · 메인 버튼(.btn01: 높이 50px, 16px/500, 모서리 4px)
   ========================================================================== */
/* 9-1. 제목 굵기·자간 : 800/-0.8px → 700/기본 */
.api-lp h1, .api-lp h2 {font-weight: 700; letter-spacing: normal;}
@media screen and (min-width: 1200px) {
    .subWrap01 .api-lp-hero h1 {line-height: 1.3;}
    .subWrap01 .api-lp-hero .lp-lead {font-size: 18px; line-height: 1.6;}
}
/* 9-2. 버튼 : 높이 50px · 16px/500 · 테두리 1px (메인 .btn01 과 같은 크기) */
.subWrap01 .api-lp .lp-btn {min-height: 50px; padding: 10px 20px; font-size: 16px; font-weight: 500; line-height: 1.4; border-width: 1px; border-radius: 4px;}
.subWrap01 .api-lp .lp-btn--primary::after {display: none;}
/* 9-3. 브랜드 색 통일 — [2026-10-17 대표 결정] 색은 변수 --brand 하나로 쓴다(다른 민트 금지).
      · PC  : --brand 미정의 → 기본값 #15CED1 / hover #11B0B3
      · 모바일 : common_m.css :root 에서 --brand = --primary(#1994A4), hover #147A87 (대표 결정 10/17 "모바일은 모바일 메인 색")
      · 주 버튼   : 배경·테두리 var(--brand, #15CED1) + 흰 글자 → hover var(--brand-hover, #11B0B3) (PC common.css --primary-dark 와 같은 값)
      · 라인 버튼 : 흰 배경 + 테두리·글자 var(--brand, #15CED1) → hover 옅은 민트 배경 rgba(21,206,209,.08) (--primary-tint)
      · 링크·번호 등 강조색(--lp-cta) : var(--brand, #15CED1) / hover var(--brand-hover, #11B0B3) */
.subWrap01 .api-lp {--lp-cta: var(--brand, #15CED1); --lp-cta-hover: var(--brand-hover, #11B0B3);}
.subWrap01 .api-lp .lp-btn--primary {color: #fff; background-color: var(--brand, #15CED1); border-color: var(--brand, #15CED1);}
.subWrap01 .api-lp .lp-btn--primary:hover {color: #fff; background-color: var(--brand-hover, #11B0B3); border-color: var(--brand-hover, #11B0B3);}
.subWrap01 .api-lp .lp-btn--ghost {color: var(--brand, #15CED1); border-color: var(--brand, #15CED1); background-color: #fff;}
.subWrap01 .api-lp .lp-btn--ghost:hover {color: var(--brand, #15CED1); border-color: var(--brand, #15CED1); background-color: var(--brand-tint, rgba(21, 206, 209, .08));}
/*      · 태그·혜택 배지 : 라인 버튼과 같은 꼴(흰 배경 + 테두리·글자 var(--brand, #15CED1)). 종전 글자 #0B6062(진한 청록) 폐기 */
.subWrap01 .api-lp .lp-tags .lp-badge, .subWrap01 .api-lp-summary .lp-card .lp-tags span.lp-badge, .subWrap01 .api-lp .lp-benefit-badge {color: var(--brand, #15CED1); background: #fff; border-color: var(--brand, #15CED1);}
/* 9-5. 카드 하단 링크("요금: …", "○○ 안내 보기") 밑줄 제거 — 본문 문장 속 링크는 밑줄 유지(링크 구분) */
.api-lp .lp-card .lp-card-link {text-decoration: none;}
.api-lp .lp-card .lp-card-link:hover {text-decoration: underline;}
/* 9-6. [2026-10-17 대표 결정] 소개 페이지의 글자 링크는 전부 밑줄 없음 — 마우스를 올릴 때만 밑줄(9-5 의 '본문 링크 밑줄 유지'를 대체).
        링크는 브랜드색(--lp-cta #15CED1)으로 구분된다. */
.subWrap01 .api-lp a:not(.lp-btn) {text-decoration: none;}
.subWrap01 .api-lp a:not(.lp-btn):hover, .subWrap01 .api-lp a:not(.lp-btn):focus-visible {text-decoration: underline;}
/* 9-7. 가이드 문서 좌측 메뉴·우측 목차 고정 위치 : 상단 메뉴(높이 80px, sticky) 아래에 붙인다.
        종전 top:24px 는 상단 메뉴에 가려 '문자발송 가이드' 제목·첫 항목이 잘려 보였다. 화면이 낮으면 메뉴 안에서 스크롤. */
@media (min-width: 1025px) {
    .api-lp .lp-doc-side, .api-lp .lp-doc-toc {top: 80px; max-height: calc(100vh - 80px); overflow-y: auto; box-sizing: border-box; padding-bottom: 20px;}
    /* 하위 메뉴 줄이 떠 있는 화면(has-subnav)은 상단 80 + 하위 메뉴 60 = 140px 아래 */
    .subWrap01.has-subnav .api-lp .lp-doc-side, .subWrap01.has-subnav .api-lp .lp-doc-toc {top: 140px; max-height: calc(100vh - 140px); padding-top: 20px;}
}
/* 9-8. 버튼 아래 안내 글(예: /guide 의 [1:1문의] 아래 '문의 작성은 로그인 후…') — 그 버튼 바로 밑에 붙인다 */
.api-lp .lp-cta-stack {position: relative; display: inline-flex; flex-direction: column; align-items: center;}
.api-lp .lp-cta-hint {position: absolute; top: 100%; left: 50%; margin: 8px 0 0; transform: translateX(-50%); font-size: 13px; line-height: 1.4; color: var(--lp-ink-sub); white-space: nowrap;}
.api-lp .lp-ctas:has(.lp-cta-hint) {margin-bottom: 40px;}
@media (max-width: 767px) {
    .api-lp .lp-cta-stack {display: flex; width: 100%;}
    .api-lp .lp-cta-stack > .lp-btn {width: 100%;}
    .api-lp .lp-cta-hint {position: static; transform: none;}
    .api-lp .lp-ctas:has(.lp-cta-hint) {margin-bottom: 14px;}
}
/* 9-4. 검색창과 검색 버튼 높이 맞춤 (가이드·개발자 검색) */
.api-lp .lp-search input[type="search"] {height: 50px; border-radius: 4px;}
.api-lp .lp-search-row .lp-btn {min-height: 50px; height: 50px; padding: 0 22px;}
.api-lp-dev .lp-search-form input[type="search"] {height: 50px; border-radius: 4px;}
/* 9-6. 계산기·검색 폼 입력칸과 [삭제] 버튼도 버튼과 같은 50px · 모서리 4px */
.api-lp .lp-calc-row select, .api-lp .lp-calc-row input[type="text"], .api-lp .lp-calc-inline select, .api-lp .lp-calc-inline input[type="text"] {height: 50px; box-sizing: border-box; border-radius: 4px;} /* /pricing 작은 계산기 select 44px → 50px(10/17) */
.api-lp .lp-calc-del {height: 50px; padding: 0 16px; border-radius: 4px;}

/* ==========================================================================
   10. [2026-10-17] 히어로 메시지 미리보기 — 실제 화면처럼 (알림톡·브랜드메시지·RCS)
       글자 HTML 로 그린다(로고 이미지 없음). 문자 미리보기(.lp-msgprev-item)는 그대로.
   ========================================================================== */
.api-lp .pv-chat {position: relative; padding: 16px 14px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: #1F2427;}
.api-lp .pv-chat p {margin: 0;}
.api-lp .pv-time {display: block; margin: 6px 0 0 46px; font-size: 11px; color: #5F6B73;}
/* 카카오 대화방 공통 */
.api-lp .pv-kakao {background: #BACEE0;}
.api-lp .pv-k-profile {display: flex; align-items: center; gap: 8px; margin-bottom: 6px;}
.api-lp .pv-k-avatar {display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; font-size: 15px; font-weight: 700; color: #fff; background: var(--brand, #15CED1); border-radius: 14px;}
.api-lp .pv-k-name {font-size: 13px; color: #33393D;}
.api-lp .pv-k-bubble {margin-left: 46px; overflow: hidden; background: #fff; border-radius: 4px 12px 12px 12px;}
.api-lp .pv-k-head {padding: 10px 14px; font-size: 14px; font-weight: 700; color: #3C1E1E; background: #FEE500;}
.api-lp .pv-k-body {padding: 14px;}
.api-lp .pv-k-body strong {display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700;}
.api-lp .pv-k-info {margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: #4B5459;}
.api-lp .pv-k-info li {position: relative; padding-left: 10px;}
.api-lp .pv-k-info li::before {content: "-"; position: absolute; left: 0;}
.api-lp .pv-k-btns {display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px;}
.api-lp .pv-k-btns span {display: block; padding: 10px 0; font-size: 13px; font-weight: 500; text-align: center; color: #1F2427; background: #F2F3F5; border-radius: 6px;}
.api-lp .pv-k-img {display: block; width: 100%; height: 150px; object-fit: cover; background: #F6EBDD;}
.api-lp .pv-k-ad {font-weight: 700;}
.api-lp .pv-k-foot {padding: 0 14px 12px; font-size: 11px; color: #8A949B;}
/* RCS (기본 문자 앱 화면) */
.api-lp .pv-rcs {padding: 0 0 14px; overflow: hidden; background: #F4F6F8; border: 1px solid #E2E8EA;}
.api-lp .pv-r-top {display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; background: #fff; border-bottom: 1px solid #E2E8EA;}
.api-lp .pv-r-logo {display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 13px; font-weight: 700; color: #fff; background: var(--brand, #15CED1); border-radius: 50%;}
.api-lp .pv-r-top b {font-size: 14px;}
.api-lp .pv-r-ok {display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 10px; color: #fff; background: #1A73E8; border-radius: 50%;}
.api-lp .pv-r-num {margin-left: auto; font-size: 11px; color: #5F6B73;}
.api-lp .pv-r-card {margin: 0 14px; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.08);}
.api-lp .pv-r-card .pv-k-img {height: 130px;}
.api-lp .pv-r-body {padding: 14px;}
.api-lp .pv-r-body strong {display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700;}
.api-lp .pv-r-btns {display: flex; border-top: 1px solid #E8ECEE;}
.api-lp .pv-r-btns span {flex: 1 1 0; padding: 11px 0; font-size: 13px; font-weight: 700; text-align: center; color: #1A73E8;}
.api-lp .pv-r-btns span + span {border-left: 1px solid #E8ECEE;}
.api-lp .pv-rcs .pv-time {margin: 6px 14px 0;}
.api-lp .pv-chat ul.pv-k-info li {display: block; margin: 0; padding: 0 0 0 10px; min-height: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; font-weight: 400; color: #4B5459; counter-increment: none;}
.api-lp .pv-chat ul.pv-k-info li::before {content: "-"; position: absolute; left: 0; top: 0; width: auto; height: auto; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; color: #4B5459; font-size: 13px; font-weight: 400; line-height: inherit; transform: none;}
.api-lp .pv-chat ul.pv-k-info li::after {content: none;}
/* 미리보기는 실제 메신저 모양이 목적이라 소개 페이지 공통 '모서리 0' 규칙(common.css .api-lp * !important)의 예외 */
.api-lp .pv-chat {border-radius: 12px !important;}
.api-lp .pv-k-avatar {border-radius: 14px !important;}
.api-lp .pv-k-bubble {border-radius: 4px 14px 14px 14px !important;}
.api-lp .pv-k-btns span {border-radius: 6px !important;}
.api-lp .pv-r-logo, .api-lp .pv-r-ok {border-radius: 50% !important;}
.api-lp .pv-r-card {border-radius: 16px !important; box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;}
.api-lp .pv-rcs .pv-r-top {border-radius: 0 !important;}
/* 9-9. 계산기 합계 "(원 단위 절삭)" 표기 */
.api-lp .lp-calc-cut {display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--lp-ink-sub);}
/* 9-10. 메뉴·목차의 #앵커로 이동할 때 제목이 상단 메뉴(sticky 80px)에 가리지 않게(종전 12~20px). 예: 서비스·소개 > 기업전용 서비스 */
.api-lp [id], .api-lp-dev h2[id], .api-lp-dev h3[id], .api-lp .lp-doc-main h2 {scroll-margin-top: 96px;}
/*        PC 에서 하위 메뉴 줄이 떠 있는 화면(has-subnav : 상단 80 + 하위 메뉴 60 = 140px)은 그만큼 더 띄운다 */
.subWrap01.has-subnav .api-lp [id], .subWrap01.has-subnav .api-lp-dev h2[id], .subWrap01.has-subnav .api-lp-dev h3[id] {scroll-margin-top: 156px;}
/* 9-11. [2026-10-17] 줄표(—) 대신 라벨·부제 (대표: "— 작대기가 AI 틱함") — 본문 34개 화면에서 "라벨 — 설명"을 바꿨다.
        · .lp-lbl   : 굵은 라벨 한 줄 + 설명은 아래 줄
        · .lp-h-sub : 제목·목차·코드 제목 뒤 작은 회색 부제 */
.api-lp .lp-lbl {display: block; margin-bottom: 4px; font-weight: 700; color: var(--lp-ink);}
.api-lp .lp-h-sub {display: inline-block; margin-left: 8px; font-size: .8em; font-weight: 400; color: var(--lp-ink-sub); vertical-align: baseline;}
.api-lp br + .lp-h-sub {margin-left: 0;}
.api-lp li:has(> .lp-lbl:first-child) + li {margin-top: 12px;}
/* 9-12. [2026-10-17] QA : 본문 인라인 코드 글자색 진한 청록(#0B4F63) → 중립 회색(브랜드색과 구분) */
.api-lp code {color: #334155;}

/* ==========================================================================
   11. [2026-10-17] QA 2차 : 공개 화면 시각 QA 반영 (리뷰 4건 · PC 1440 / 모바일 390 캡처 기준). 원본 C:/backup/20261017/qa-apply
   ========================================================================== */
/* 11-1. 굵은 라벨(.lp-lbl)이 .api-lp-process 목록 안에서 설명과 붙어 '라벨설명'처럼 읽히던 것 : 라벨은 한 줄 위 */
.api-lp-process ul.lp-bullets li strong.lp-lbl {display: block; margin-bottom: 4px;}
/* 11-2. 800 굵기 제거(제목 700 규칙) : STEP·번호 배지, 좌측 메뉴 제목, 단가, 계산기 합계 등 */
.api-lp-process li::before, .api-lp .lp-item .lp-badge, .api-lp-dev .lp-badge-row .lp-badge, .api-lp-dev a.lp-item .lp-badge,
.api-lp .lp-doc-side-tit, .api-lp .lp-msgprev-tit, .api-lp .lp-type-cards .lp-type-price, .api-lp .lp-calc-result .lp-calc-total dd,
.api-lp-hero .lp-eyebrow, .api-lp-flow li::before, .api-lp-ready .lp-check li::before, .api-lp .lp-benefit-badge, .api-lp .lp-highlight strong.lp-highlight-num {font-weight: 700;}
/* 11-3. 순서가 아닌 선택지·사례 목록(ol.lp-cases)에는 'STEP n' 배지를 붙이지 않는다 */
.api-lp-process ol.lp-cases > li::before {content: none; display: none;}
/* 11-4. 목록 들여쓰기 : 기호 없이 20px 만 들여 써져 떠 보이던 것.
         라벨형 목록(첫 글자가 .lp-lbl)과 샘플 카드 목록은 왼쪽 선에 맞추고, 일반 목록은 글머리 기호를 보인다 */
.api-lp .lp-bullets {padding-left: 18px;}
.api-lp ul.lp-bullets > li {list-style: disc;}
.api-lp ol.lp-bullets > li {list-style: decimal;}
.api-lp .lp-bullets:has(> li > .lp-lbl:first-child) {padding-left: 0;}
.api-lp .lp-bullets:has(> li > .lp-lbl:first-child) > li {list-style: none;}
.api-lp-hero .lp-sample-card .lp-bullets {padding-left: 0;}
.api-lp-hero .lp-sample-card .lp-bullets > li {list-style: none;}
.api-lp table.lp-table td ul {padding-left: 18px;}
.api-lp table.lp-table td ul > li {list-style: disc;}
/* 11-5. 블록 사이 간격 : 카드 바로 아래 문단·주의 상자, 링크 묶음 아래 안내, 버튼 아래 링크 묶음, 문서 안 소제목 */
.api-lp-process ol + p, .api-lp-process ol + .lp-caution, .api-lp-process ol + .lp-note {margin-top: 20px;}
.api-lp .lp-related + .lp-note {margin-top: 12px;}
.api-lp .lp-ctas + .lp-related {margin-top: 24px;}
.api-lp .lp-doc-main .lp-inner > :not(h2) + h3 {margin-top: 32px;}
.api-lp [aria-labelledby="lp-h2-faq"] p + h3 {margin-top: 28px;}
/* 11-6. '~란?' 답변 상자 : 왼쪽 4px 민트 강조선 → 다른 상자와 같은 1px 테두리 */
.api-lp .lp-answer:not(.lp-answer--plain) {border: 1px solid var(--lp-line, #E2E8EA);}
/* 11-7. 인라인 코드가 토큰 중간('us/er-id')에서 잘리던 것 : 넘칠 때만 줄바꿈 */
.api-lp code {word-break: normal; overflow-wrap: anywhere;}
/* 11-8. 줄 끝 고아 단어 줄이기 (리드·제목) */
.api-lp .lp-lead, .api-lp h1, .api-lp h2 {text-wrap: balance;}
/* 11-9. 카드 그리드 */
@media (max-width: 767px) {
    /* 브랜드메시지 5단계 : 390px 에서도 3열이라 글자가 한 자씩 끊기던 것 */
    .api-lp-process ol.lp-process-5 {grid-template-columns: 1fr;}
    /* 6-5 의 줄 높이 맞춤은 태블릿 2열에서만 필요 : 모바일 1열은 카드마다 제 높이 */
    .api-lp .lp-cards:has(> .lp-card > :is(.lp-card-link, .lp-btn, .lp-ctas)) {grid-auto-rows: auto;}
}
/*      단계 카드 한 줄(.lp-steps-row, RCS·소상공인) : 글 길이만큼 폭이 달라 들쭉날쭉 → 균등 칸 */
.api-lp ol.lp-steps-row {display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px 16px;}
@media (max-width: 1024px) {
    .api-lp ol.lp-steps-row {grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 767px) {
    .api-lp ol.lp-steps-row {grid-template-columns: 1fr;}
}
/*      제품 카드 : '웹 발송/API' 배지 줄을 카드 아래쪽(요금 링크 위)에 맞춘다 */
.api-lp .lp-cards > .lp-card > .lp-tags:not(:first-child):has(+ .lp-card-link) {margin-top: auto;}
.api-lp .lp-cards > .lp-card > .lp-tags:not(:first-child) + .lp-card-link {margin-top: 12px;}
/*      서비스 비교 2열 카드 : 버튼을 가로로 나란히 */
.api-lp .lp-cards.lp-grid-2 > .lp-card > .lp-ctas {flex-direction: row; flex-wrap: wrap; gap: 8px; padding-top: 16px;}
.api-lp .lp-cards.lp-grid-2 > .lp-card > .lp-ctas .lp-btn {flex: 1 1 0; width: auto;}
/*      샘플 카드 옆 링크 묶음(학원) : 위쪽에만 붙지 않게 칸 높이를 채운다 */
.api-lp .lp-cards > .lp-related {grid-template-columns: 1fr; grid-auto-rows: 1fr; align-self: stretch;}
.api-lp .lp-cards > .lp-related > li > a {display: flex; flex-direction: column; justify-content: center; height: 100%; box-sizing: border-box;}
/*      샘플 카드 1장(병원) : 2열 왼쪽 절반만 차지하던 것 */
.api-lp-summary .lp-cards:has(> .lp-card:only-child) {grid-template-columns: 1fr;}
/*      링크 1개뿐인 묶음 : 가운데 */
.subWrap01 .api-lp .lp-related:has(> li:only-child) {grid-template-columns: minmax(0, 560px); justify-content: center;}
/*      회사 소개 : 연락처 목록은 1열, 링크 카드는 같은 높이 */
.api-lp .lp-grid-2 > div > .lp-dl {grid-template-columns: 1fr;}
.api-lp .lp-grid-2 > .lp-related {align-content: start; grid-auto-rows: 1fr;}
/* 11-10. 히어로 */
/*      오른쪽 링크 묶음(기업·기업전용) : 1열, 모바일은 바로 아래 버튼·섹션과 중복이라 숨김 */
.api-lp-hero .lp-grid > .lp-related {grid-template-columns: 1fr; gap: 8px; align-content: start;}
@media (max-width: 767px) {
    .api-lp-hero .lp-grid > .lp-related {display: none;}
}
.subWrap01 .api-lp-hero:has(.lp-grid > .lp-related) {min-height: 0;}
/*      설명 아래 책임 범위 문단(.lp-scope) : 작은 굵은 검정 글씨가 설명보다 강해 보이던 것 */
.subWrap01 .api-lp-hero .lp-scope {margin: 8px 0 0; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--lp-ink-sub);}
/* 11-11. 번호 배지 : 네모 테두리(01~04·1~3) → 단계 카드와 같은 채운 원 (글자 배지 a.lp-item 'HTTP 예제'는 제외) */
.subWrap01 .api-lp div.lp-item > .lp-badge {width: 26px; height: 26px; font-size: 14px; font-weight: 700; color: #fff; background-color: var(--brand, #15CED1); border-color: var(--brand, #15CED1); border-radius: 50% !important;}
.api-lp .lp-one {max-width: 720px; margin-left: auto; margin-right: auto;}
@media (min-width: 768px) {
    .api-lp .lp-grid-3 > .lp-item .lp-mock {min-height: calc(1.6em * 2 + 24px); box-sizing: border-box;}
}
/* 11-12. 문서(가이드·API) */
/*      처음 연동하는 순서 : 빈 민트 원(숫자 안 보임)·알약 폭 제각각 → 5칸 균등, 원 안 숫자 흰색 */
.api-lp .lp-steps.lp-doc-steps {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0;}
.api-lp .lp-steps.lp-doc-steps > li {margin: 0; padding: 0; font-weight: 400; border-radius: 0;}
.api-lp .lp-steps.lp-doc-steps > li::before {content: counter(ds); color: #fff;}
.api-lp .lp-steps.lp-doc-steps > li p {font-weight: 400;}
@media (max-width: 1024px) {
    .api-lp .lp-steps.lp-doc-steps {grid-template-columns: 1fr;}
}
@media (min-width: 1025px) {
    /* 단계 카드 제목 시작점 통일(76 → 58px) */
    .subWrap01 .api-lp .lp-doc-main .api-lp-process ol.lp-steps > li {padding: 16px 18px 16px 58px;}
    /* 가이드 허브 'API 가이드' 4개는 4열 */
    .api-lp #api-guides .lp-guide-list {grid-template-columns: repeat(4, 1fr);}
}
.api-lp .lp-guide-sub {margin: 6px 0 0 17px;}
.api-lp .lp-code-lb .lp-h-sub {margin-left: 6px; font-size: 12px;}
.api-lp-dev a.lp-card strong {color: var(--lp-cta);}
/*      결과코드 표 3개 : 열 폭을 같게 */
.api-lp :is([aria-labelledby="lp-h2-device"], [aria-labelledby="lp-h2-block"], [aria-labelledby="lp-h2-sender"]) table.lp-table {table-layout: fixed;}
.api-lp :is([aria-labelledby="lp-h2-device"], [aria-labelledby="lp-h2-block"], [aria-labelledby="lp-h2-sender"]) table.lp-table thead th:nth-child(1) {width: 22%;}
.api-lp :is([aria-labelledby="lp-h2-device"], [aria-labelledby="lp-h2-block"], [aria-labelledby="lp-h2-sender"]) table.lp-table thead th:nth-child(2) {width: 30%;}
/* 11-13. 요금표(lp-table--price) : 세 표의 숫자 열 위치를 맞추고, 모바일은 가로 스크롤 없이 */
.api-lp table.lp-table.lp-table--price {table-layout: fixed;}
.api-lp table.lp-table--price thead th:nth-child(1) {width: 24%;}
.api-lp table.lp-table--price thead th:nth-child(3), .api-lp table.lp-table--price thead th:nth-child(4) {width: 16%;}
@media (max-width: 767px) {
    .api-lp table.lp-table.lp-table--price {min-width: 0; table-layout: auto; font-size: 14px;}
    .api-lp table.lp-table.lp-table--price th, .api-lp table.lp-table.lp-table--price td {min-width: 0; padding: 10px 8px;}
    .api-lp table.lp-table.lp-table--price thead th {white-space: normal;}
    /* 3열 이하 짧은 표 : 390px 안에 줄바꿈으로 충분히 들어간다(가로 스크롤 제거) */
    .api-lp table.lp-table:not(:has(thead th:nth-child(4))) {min-width: 0;}
    .api-lp table.lp-table:not(:has(thead th:nth-child(4))):not(.lp-table-stack) td {min-width: 0;}
    .api-lp table.lp-table:not(:has(thead th:nth-child(4))) tbody th {white-space: normal;}
}
/* 11-14. 계산기 : 행이 1개일 때 눌러도 동작 없는 [삭제] 숨김, 결과 상자 높이 맞춤 */
.api-lp .lp-calc-row:only-child .lp-calc-del {visibility: hidden;}
@media (max-width: 767px) {
    .api-lp .lp-calc-row:only-child .lp-calc-del {display: none;}
}
.api-lp .lp-calc {align-items: stretch;}
/* 11-15. 브랜드메시지 미리보기 이미지 : 모바일에서 'NEW' 배지가 잘리던 것(가로세로 비율 유지) */
.api-lp .pv-kakao .pv-k-img {height: auto;}
@media screen and (min-width: 1200px) {
    /* 11-16. PC 정렬축 : 가운데 제목 아래 안내문·버튼 아래 안내도 가운데, 최종 CTA 흰 상자·문서 3열 폭을 본문 폭(1240)에 맞춤 */
    .subWrap01 .api-lp > section:not(.api-lp-hero) > .lp-inner > .lp-ctas ~ .lp-note,
    .subWrap01 .api-lp > section:not(.api-lp-hero) > .lp-inner > h2 + p:not([class]),
    .subWrap01 .api-lp > section:not(.api-lp-hero) > .lp-inner > h2 + p:not([class]) + p:not([class]) {max-width: 880px; margin-left: auto; margin-right: auto; text-align: center;}
    .subWrap01 .api-lp > section.api-lp-final > .lp-inner {max-width: 1240px;}
    .subWrap01 .api-lp .lp-doc {max-width: 1260px; padding: 0 10px;}
    /* 글만 있는 히어로 : 아래 여백 80 + 다음 섹션 위 여백이 겹쳐 비어 보이던 것 */
    .subWrap01 .api-lp-hero:not(:has(.lp-grid)) {padding-bottom: 40px;}
}