@charset "utf-8";
/*
 * /board/apiIntro PC 전용 홈 디자인 정렬
 * - 홈(common.css)의 색상 토큰, 1260px 정렬축, 섹션/카드/CTA 규칙만 재사용한다.
 * - .api-lp 내부로 범위를 제한해 모바일과 다른 PC 업무 화면에는 적용하지 않는다.
 *
 * 구성 원칙 (2026-07-13 정리)
 *   1) 색상 · 버튼 · 배지 등 "폭과 무관한 외형"은 미디어쿼리 밖에 둔다.
 *   2) @media (min-width:1200px) 안에는 정렬축 / 섹션 여백 / 히어로 타이포 등
 *      "폭에 따라 달라져야 하는 수치"만 남긴다.
 *   ※ 이전 버전은 버튼 · 배지 · 호버색까지 모두 min-width:1200px 안에 들어가 있어
 *      1199px 이하(노트북 · 브라우저 확대)에서 본문 CTA 스타일이 통째로 사라지고,
 *      미디어쿼리 밖에 있던 최종 CTA 버튼만 살아남아 버튼 외형이 서로 달라졌다.
 */

/* ------------------------------------------------------------------
 * 1. 토큰
 * ------------------------------------------------------------------ */
.subWrap01 .api-lp {
    --lp-cta-hover: #10b8bb;    /* 브랜드 민트(--primary #15CED1)의 호버 단계 */
    --lp-cta-line: #0b6062;     /* 보조 버튼 호버 테두리 (다크 민트) */
    --lp-accent: var(--primary);
    --lp-ink: var(--normal);
    --lp-ink-sub: var(--sub);
    --lp-line: #e5e5e5;
    --lp-surface: #f6f7fb;
    --lp-navy: var(--secondary);
}

/* skip link는 .api-lp의 형제가 되어 본문 변수를 상속하지 않으므로 색을 직접 지정 */
.api-lp-skip {
    background-color: var(--secondary);
}

.api-lp-skip:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 2px;
}

.subWrap01 .sub_menuWrap a.sub_on {
    color: var(--normal);
    font-weight: 500;
}

/* ------------------------------------------------------------------
 * 2. 카드 · 배지 · 리스트 마커 (모든 폭 공통)
 * ------------------------------------------------------------------ */
/* 홈 API 소개 영역의 20px 라운드 카드와 동일한 외형 */
.subWrap01 .api-lp-flow,
.subWrap01 .api-lp-summary .lp-card,
.subWrap01 .api-lp .lp-item,
.subWrap01 .api-lp-process li,
.subWrap01 .api-lp-ready .lp-check li,
.subWrap01 .api-lp-panel {
    border-color: var(--lp-line);
    border-radius: 20px;
    box-shadow: none;
}

.subWrap01 .api-lp-summary .lp-card {
    border-top: 4px solid var(--primary);
}

.subWrap01 .api-lp .lp-item .lp-badge {
    color: var(--primary);
    background-color: #e8fbfb;
    border-color: var(--primary);
}

/* 민트 배경(var(--primary)) 위 글자색 = 흰색 */
.subWrap01 .api-lp-flow li::before,
.subWrap01 .api-lp-process li::before,
.subWrap01 .api-lp-ready .lp-check li::before {
    color: #fff;
    background-color: var(--primary);
}

/* ------------------------------------------------------------------
 * 3. 버튼 (모든 폭 공통 — 본문 CTA와 최종 CTA가 동일한 외형을 갖도록 한 곳에서 정의)
 *
 * ⚠️ 대비 주의 — 흰색 on var(--primary) #15CED1 = 약 1.97:1 로 WCAG AA(4.5:1) 미달.
 *    AA 를 맞추려면 배경을 다크민트(#0F7A7C, 흰 글자 5.13:1)로 낮추거나
 *    글자를 진한색(#173638, 민트 위 10.67:1)으로 되돌려야 함.
 *    (2026-07-13 사용자 지정으로 흰 글자 유지)
 * ------------------------------------------------------------------ */
.subWrap01 .api-lp .lp-btn {
    min-height: 60px;
    padding: 13px 26px;
    font-size: 18px;
    border-radius: 4px;
}

.subWrap01 .api-lp .lp-btn--primary {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

/* 민트 배경 위 흰 글자에 맞춰 화살표 아이콘도 흰색 버전(ico_go_w.svg) 사용 */
.subWrap01 .api-lp .lp-btn--primary::after {
    content: "";
    flex: 0 0 auto;
    width: 33px;
    height: 33px;
    margin-left: 16px;
    background: url("../images/ico_go_w.svg") no-repeat center center;
    background-size: 33px auto;
}

.subWrap01 .api-lp .lp-btn--primary:hover {
    color: #fff;
    background-color: var(--lp-cta-hover);
    border-color: var(--lp-cta-hover);
}

.subWrap01 .api-lp .lp-btn--ghost {
    color: var(--normal);
    background-color: #fff;
    border-color: var(--primary);
}

.subWrap01 .api-lp .lp-btn--ghost:hover {
    color: var(--normal);
    background-color: #f2faf9;
    border-color: var(--lp-cta-line);
}

.subWrap01 .api-lp .lp-btn:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * 4. FAQ — 좌우 32px + 상하 20px 리듬 통일
 * ------------------------------------------------------------------ */
.subWrap01 .api-lp-faq summary {
    padding: 20px 32px;
}

.subWrap01 .api-lp-faq .lp-faq-a {
    padding: 0 32px 20px;   /* 위쪽 간격은 summary 의 하단 20px 로 확보 → 상하 여백 일치 */
}

/* ------------------------------------------------------------------
 * 5. 최종 CTA — 홈의 연민트 배경 + 흰 카드 조합으로 푸터와 시각적으로 분리
 *    (버튼 외형은 §3 을 그대로 상속한다. 여기서는 배치만 다룬다.)
 * ------------------------------------------------------------------ */
.subWrap01 .api-lp > section.api-lp-final {
    background-color: #e7faf7;
    border-top: 1px solid #d5ece9;
}

.subWrap01 .api-lp-final > .lp-inner {
    width: calc(100% - 40px);
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 32px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #d5ece9;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(1, 44, 95, .08);
    box-sizing: border-box;
}

.subWrap01 .api-lp-final > .lp-inner > h2 {
    margin-bottom: 12px;
    color: var(--normal);
}

.subWrap01 .api-lp-final > .lp-inner > p.lp-lead {
    max-width: 880px;
    margin: 0 auto;
    color: var(--sub);
}

.subWrap01 .api-lp-final .lp-ctas {
    justify-content: center;
    margin: 28px 0 0;
}

.subWrap01 .api-lp-final .lp-btn {
    min-width: 230px;
}

/* ------------------------------------------------------------------
 * 6. PC 폭(≥1200px) 전용 — 정렬축 / 섹션 여백 / 히어로 타이포
 *    좁은 화면과 브라우저 확대 시에는 api_landing.css 의 유동 레이아웃을 그대로 쓴다.
 * ------------------------------------------------------------------ */
@media screen and (min-width: 1200px) {

    /* 홈 .web_container와 본문 좌우 정렬축 일치 */
    .subWrap01 .api-lp .lp-inner {
        max-width: 1260px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .subWrap01 .api-lp-crumb {
        padding-top: 18px;
        padding-bottom: 18px;
        background-color: #fff;
    }

    /* 홈처럼 흰색/연회색 섹션을 교차하고 구분선은 제거 */
    .subWrap01 .api-lp > section {
        padding-top: 73px;
        padding-bottom: 80px;
        border-top: 0;
        background-color: #fff;
    }

    .subWrap01 .api-lp > section:nth-of-type(even) {
        background-color: var(--lp-surface);
    }

    /* 최종 CTA 는 §5 의 연민트 배경을 유지 (nth-of-type 교차 규칙보다 뒤에 선언) */
    .subWrap01 .api-lp > section.api-lp-final {
        background-color: #e7faf7;
    }

    /* 홈 히어로 및 섹션 타이포 체계 */
    .subWrap01 .api-lp-hero {
        min-height: 460px;
        padding-top: 70px;
        padding-bottom: 80px;
        box-sizing: border-box;
    }

    .subWrap01 .api-lp-hero .lp-grid {
        gap: 70px;
    }

    .subWrap01 .api-lp-hero h1 {
        font-size: 40px;
        line-height: 1.2;
        color: var(--normal);
    }

    .subWrap01 .api-lp > section:not(.api-lp-hero) > .lp-inner > h2,
    .subWrap01 .api-lp > section:not(.api-lp-hero) > .lp-inner > .lp-lead {
        text-align: center;
    }

    .subWrap01 .api-lp > section:not(.api-lp-hero) > .lp-inner > .lp-lead {
        max-width: 880px;
        margin-right: auto;
        margin-bottom: 48px;
        margin-left: auto;
    }

    .subWrap01 .api-lp > section:not(.api-lp-hero) .lp-ctas {
        justify-content: center;
    }
}

@media screen and (max-width: 767px) {
    .subWrap01 .api-lp-final > .lp-inner {
        width: calc(100% - 32px);
        padding: 32px 20px;
        border-radius: 16px;
    }
}