/* ============================================================================
   home-bugolink.css — 부고링크(bugolink.com) 랜딩
   ============================================================================
   @version   2.2.0
   @updated   2026-09-13
   @origin    ⛔ **전파 대상이 아니다.** shared-files.psd1 의 bugo 세트 Files 에 이 경로가
              없다. 샘플 2곳(bugoworks-samples)에 있는 사본은 손으로 맞춘다.

   ■ 2.2.0 에서 무엇이 바뀌었나 (2026-09-13, home.php 2.3.0 과 짝)
     ① 신뢰 스트립 전 폭 가운데 정렬 ② 소개 카드 점을 accent-soft 로(어두운 카드 위 가독성)
     ③ 기능 카드 아이콘 좌·글 우(560px 이하 아이콘 숨김) ④ 절차를 카드 대신 번호 원 + 연결선의
     진행 단계로(모바일은 세로선) ⑤ 지표 strong=제목·span=값 스타일 교체

   ■ 2.1.0 에서 무엇이 바뀌었나 (2026-09-13)
     히어로를 2단으로 바꿨다. 992px 이상은 왼쪽 문구(왼정렬) + 오른쪽 폰 목업, 그 미만은
     한 단 가운데 정렬이고 목업은 숨긴다(내려받지도 않는다 — home.php 의 picture 참조).
     배지 카드 4개(.bl-badges)와 버튼 밑 한 줄(.bl-hero-note)을 지우고 한 줄 신뢰 스트립
     (.bl-hero-proof, 히어로 아래 별도 띠 .bl-proof)으로 대신했다. 목업은 3호와 같은 방식 —
     투명 배경 WebP + drop-shadow + 뒤쪽 원광(::before). 폰 전체가 보인다(칸 폭 250/230px).
     검은 배경이 남은 사진을 카드처럼 얹었던 첫 판은 사각형이 그대로 드러나 버렸다(실측).
     이미지 자리는 aspect-ratio 로 미리 잡아 CLS 가 없다.

   ■ 2.0.0 에서 무엇이 바뀌었나 (2026-09-07)
     색을 받는 방식을 통째로 바꿨다. 예전에는 --color-* 11종에 기대면서 파란색 계열을
     19곳에 리터럴로 박아 두었다. 그래서 색을 9종으로 갈아입히면 **박아 둔 파란색만
     남아** 화면이 어긋났다.
     이제 **--lp-* 34개 계약만** 쓴다. 색 리터럴은 0개다.

   ■ 토큰 계약
     정본:  docs/design/layouts/LAYOUT-TOKEN-CONTRACT.md  (--lp-* 34개)
     값:    theme-a.css ~ theme-i.css 의 「레이아웃 토큰 매핑」 블록 (9색 전부 34개를 채운다)

   ⚠️ **이 파일의 주석에 중괄호를 쓰지 말 것.** CSS 도구 중에는 첫 여는 중괄호를 찾아
      선택자를 가르는 것이 있어, 주석 안 중괄호 하나로 파일 전체를 잘못 읽는다.
      그래서 위에도 자리표시자 대신 theme-a.css ~ theme-i.css 라고 풀어 적었다.
      (2026-09-07 이 파일에서 실제로 걸렸다)

   ⛔ **여기에 색을 직접 적지 말 것.** `#fff` 하나만 박아도 그 자리는 아홉 색 중 여덟에서
      어긋난다. 반투명이 필요하면 rgba() 대신 color-mix() 로 토큰을 섞는다.
        ✅ color-mix(in srgb, var(--lp-ink) 8%, transparent)
        ❌ rgba(0, 0, 0, .08)

   ⚠️ 검사는 눈이 아니라 기계로 한다 — 이 파일에 `#` 이나 `rgba(` 가 있으면 실패다.

   ■ 클래스 접두어
     `bl-` 를 쓴다. 공용 home.css 가 접두어 없는 이름(.hero-section·.feature-card …)을
     쓰고 있어, 접두어가 없으면 사이트마다 규칙이 새어 섞인다.
   ============================================================================ */

/* ── 랜딩 공통 ─────────────────────────────────────────────────────────── */

.home-main {
    background: var(--lp-bg);
    color: var(--lp-text);
    font-family: var(--lp-font-body);
}

/* 이 사이트는 Bootstrap 을 싣지 않아 전역 border-box 리셋이 없다. 없으면 width:100% 에 패딩이
   더해져 .bl-container 가 뷰포트보다 36px, 전폭 버튼이 56px 넓어진다(2026-09-13 390px 실측 426/448).
   랜딩 안에서만 건다 — 이 파일은 홈에서만 로드된다 */
.home-main *,
.home-main *::before,
.home-main *::after { box-sizing: border-box; }

.bl-container {
    width: 100%;
    max-width: var(--lp-container);
    margin: 0 auto;
    padding: 0 24px;
}

.bl-section { padding: var(--lp-section-gap) 0; }
.bl-section--tight { padding: calc(var(--lp-section-gap) * .62) 0; }
.bl-section--alt { background: var(--lp-bg-alt); }

.bl-section-head {
    max-width: 660px;
    margin: 0 0 44px;
}

.bl-section-head h2 {
    margin: 0 0 12px;
    color: var(--lp-text);
    font-family: var(--lp-font-heading);
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.bl-section-head p {
    margin: 0;
    color: var(--lp-text-soft);
    font-size: 16px;
    line-height: 1.7;
}

.bl-eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    color: var(--lp-accent-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── 버튼 ──────────────────────────────────────────────────────────────── */

.bl-btn,
.bl-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: var(--lp-radius-pill);
    font-family: var(--lp-font-body);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/**
 * ⛔ 주 버튼에 --lp-accent 를 배경으로 쓰지 말 것 (2026-09-07 실측으로 결정).
 *
 * accent 와 on-accent 의 명암비를 아홉 색 전부 재어 보니 두 색이 기준에 못 미친다 —
 * B 테크 에메랄드 3.20, H 스퀘어 모노 2.30 (일반 글자 기준 4.5, 큰 글자 3.0).
 * 45가지 조합 중 두 줄에서 버튼 글자가 읽히지 않는다는 뜻이다.
 *
 * 대신 ink/on-ink 를 쓴다. 아홉 색 전부 6.40 이상이고, ink 도 색마다 다르므로
 * (모스그린 #172019 · 네이비골드 #1a1a2e) 색이 바뀌는 느낌은 그대로 남는다.
 * accent 는 글자를 얹지 않는 자리(아이콘 배경·점·테두리)와 accent-text 로만 쓴다.
 *
 * ⚠️ 값은 팔레트 정본(docs/design/layouts/tokens)에서 온 것이라 여기서 고치지 않았다.
 *    webworks 랜딩도 같은 값을 쓰므로 정본을 손대면 그쪽에도 영향이 간다.
 */
.bl-btn {
    background: var(--lp-ink);
    color: var(--lp-on-ink);
}

/* 호버는 accent 를 소량만 섞는다 — 명도가 거의 안 변해 글자 대비가 유지된다 */
.bl-btn:hover {
    background: color-mix(in srgb, var(--lp-ink) 86%, var(--lp-accent));
    color: var(--lp-on-ink);
}

.bl-btn-ghost {
    border-color: var(--lp-border);
    background: var(--lp-surface);
    color: var(--lp-text);
}

.bl-btn-ghost:hover {
    border-color: var(--lp-accent);
    color: var(--lp-accent-text);
}

.bl-btn:focus-visible,
.bl-btn-ghost:focus-visible { outline: none; box-shadow: var(--lp-focus); }

/* ── 히어로 ────────────────────────────────────────────────────────────── */

.bl-hero {
    padding: calc(var(--lp-section-gap) * .5) 0;
    background: var(--lp-bg-alt);
    border-bottom: 1px solid var(--lp-border-soft);
    text-align: left;
    /* 원광(::before)이 좌우로 넓게 퍼지므로 뷰포트 밖으로 새지 않게 자른다 */
    overflow: hidden;
}

/* 좌 문구 / 우 목업. 목업 칸은 고정폭이라 문구 칸이 남는 폭을 다 쓴다.
   폰 전체(세로가 가로의 2배)를 보이므로 칸을 250px 로 좁혀 히어로 높이를 잡는다 */
.bl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 72px;
    align-items: center;
}

/* 투명 배경 사진 — 3호(bugopage)와 같은 방식.
   ① 사진은 알파 WebP 라 바탕 위에 경계가 없다. box-shadow 는 사각형이 생기므로 쓰지 않고
      drop-shadow 필터로 폰 윤곽을 따라 그림자를 준다.
   ② ::before 가 사진 뒤에 은은한 원광(accent-soft)을 깐다 — 밝은 바탕에서 폰이 떠 보이지 않게.
   ③ 폰 전체가 보인다 — 아랫부분을 자르지 않는다(2026-09-13 사용자 요청).
   aspect-ratio 를 먼저 잡아 이미지가 오기 전에도 자리가 확보된다(CLS 0) */
.bl-hero-visual {
    position: relative;
    margin: 0;
    isolation: isolate;
}

.bl-hero-visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -4% -30% -6%;
    border-radius: var(--lp-radius-pill);
    background: radial-gradient(ellipse at 50% 55%,
        color-mix(in srgb, var(--lp-accent-soft) 85%, transparent) 0%,
        color-mix(in srgb, var(--lp-accent-soft) 35%, transparent) 45%,
        transparent 72%);
    pointer-events: none;
}

.bl-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 641 / 1324;
    filter: drop-shadow(0 22px 34px color-mix(in srgb, var(--lp-ink) 28%, transparent));
}

.bl-hero-badge {
    display: inline-block;
    margin: 0 0 22px;
    padding: 7px 16px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-accent-soft);
    /* accent-text 는 팔레트에 따라 accent-soft 위에서 4.5 에 못 미친다(G 스퀘어 4.33, 2026-09-13 실측).
       글자는 text 로 — 아홉 색 전부 안전하다 */
    color: var(--lp-text);
    font-size: 13px;
    font-weight: 700;
}

.bl-hero h1 {
    margin: 0 0 20px;
    color: var(--lp-text);
    font-family: var(--lp-font-heading);
    font-size: clamp(32px, 5.2vw, 58px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

/* 강조 밑줄 — 굵은 색 막대를 글자 아래 깔아 둔다(밑줄보다 부드럽다) */
.bl-hero-underline {
    background-image: linear-gradient(var(--lp-accent-soft), var(--lp-accent-soft));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% .34em;
}

.bl-hero-sub {
    max-width: 600px;
    margin: 0 0 32px;
    color: var(--lp-text-soft);
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.75;
}

.bl-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

/* ── 신뢰 스트립 (히어로 바로 아래 한 줄 띠) ───────────────────────────── */

.bl-proof {
    padding: 22px 0;
    background: var(--lp-surface);
    border-bottom: 1px solid var(--lp-border-soft);
}

/* 모든 폭에서 가운데 정렬 — 왼정렬은 띠가 한쪽으로 쏠려 보인다(2026-09-13 사용자) */
.bl-hero-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bl-hero-proof li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--lp-text-soft);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* 체크는 배경이 있는 동그라미 안에 — 글자 없는 자리라 accent 를 배경으로 써도 된다 */
.bl-hero-proof svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-accent-soft);
    color: var(--lp-accent-text);
}

/* ── 소개 (부고장이란?) ────────────────────────────────────────────────── */

.bl-intro-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
}

/* 소개 제목은 .bl-section-head 밖에 있어(좌우 2단이라) 여기서 따로 준다 */
.bl-intro-title {
    margin: 0 0 18px;
    color: var(--lp-text);
    font-family: var(--lp-font-heading);
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.bl-intro-body p {
    margin: 0 0 16px;
    color: var(--lp-text-soft);
    font-size: 16px;
    line-height: 1.85;
}

/* .bl-eyebrow 는 <p> 로도 쓰므로 여백을 지운다 */
.bl-intro-body .bl-eyebrow,
.bl-section-head .bl-eyebrow { margin: 0 0 12px; }

.bl-intro-body p:last-child { margin-bottom: 0; }

.bl-intro-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.bl-intro-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-pill);
    background: var(--lp-surface);
    color: var(--lp-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}

.bl-intro-links a:hover { border-color: var(--lp-accent); color: var(--lp-accent-text); }

.bl-intro-card {
    padding: 34px 30px;
    border-radius: var(--lp-radius-lg);
    background: var(--lp-ink);
    color: var(--lp-on-ink);
    box-shadow: var(--lp-shadow-lift);
}

.bl-intro-card h3 {
    margin: 0 0 16px;
    color: var(--lp-on-ink);
    font-family: var(--lp-font-heading);
    font-size: 20px;
    font-weight: 800;
}

.bl-intro-card ul { margin: 0; padding: 0; list-style: none; }

.bl-intro-card li {
    position: relative;
    padding: 0 0 0 22px;
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.65;
    /* 어두운 카드 위 본문은 흰색을 살짝 눌러 위계를 만든다 */
    color: color-mix(in srgb, var(--lp-on-ink) 82%, transparent);
}

.bl-intro-card li:last-child { margin-bottom: 0; }

.bl-intro-card li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--lp-radius-pill);
    /* 어두운 카드 위라 accent(어두운 계열이 많다)는 묻힌다 — 밝은 accent-soft 로 */
    background: var(--lp-accent-soft);
}

/* ── 기능 카드 ─────────────────────────────────────────────────────────── */

.bl-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* 아이콘은 왼쪽, 글은 오른쪽 — 아이콘을 위에 두면 세로 공간만 먹는다(2026-09-13 사용자).
   560px 이하는 아이콘을 빼고 글만 보인다 */
.bl-feature {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 26px 24px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-md);
    background: var(--lp-surface);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.bl-feature:hover {
    border-color: var(--lp-accent);
    box-shadow: var(--lp-shadow);
    transform: translateY(-2px);
}

.bl-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-accent-soft);
    color: var(--lp-accent-text);
}

.bl-feature-icon svg { width: 22px; height: 22px; }

.bl-feature-body { min-width: 0; }

.bl-feature h3 {
    margin: 0 0 8px;
    color: var(--lp-text);
    font-family: var(--lp-font-heading);
    font-size: 17px;
    font-weight: 800;
}

.bl-feature p {
    margin: 0;
    color: var(--lp-text-soft);
    font-size: 15px;
    line-height: 1.7;
}

/* ── 이용 절차 ─────────────────────────────────────────────────────────── */

/* 카드를 걷어내고 번호 원 사이를 선으로 이어 진행 단계로 읽히게 한다(2026-09-13 사용자).
   선(::after)은 원의 세로 중심에서 다음 칸의 원까지 — 원 지름 40 · 상단 여백 0 기준 */
.bl-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    counter-reset: bl-step;
}

/* 번호·제목·설명 모두 칸 가운데 — 번호가 왼쪽에 몰리면 단계가 아니라 목록처럼 읽힌다(2026-09-14 사용자) */
.bl-step {
    position: relative;
    padding: 0;
    text-align: center;
    counter-increment: bl-step;
}

.bl-step::before {
    content: counter(bl-step);
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 18px;
    border-radius: var(--lp-radius-pill);
    /* 숫자가 얹히므로 버튼과 같은 이유로 ink 를 쓴다 (위 .bl-btn 주석 참조) */
    background: var(--lp-ink);
    color: var(--lp-on-ink);
    font-family: var(--lp-font-heading);
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 0 0 6px var(--lp-bg-alt);
}

/* 선은 이 칸의 원 오른쪽 가장자리(50% + 반지름 20 + 테 6)에서 다음 칸의 원 왼쪽 가장자리까지 —
   다음 원의 중심은 이 칸 오른쪽 끝에서 gap 40 + 50% 지점이므로 right 는 -50% - 40 + 26 = -50% - 14px */
.bl-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(50% + 26px);
    right: calc(-50% - 14px);
    height: 2px;
    background: var(--lp-border);
}

/* 마지막 단계는 accent 로 마무리 — 진행이 끝나는 자리 */
.bl-step:last-child::before { background: var(--lp-accent); color: var(--lp-on-accent); }

.bl-step h3 {
    margin: 0 0 10px;
    color: var(--lp-text);
    font-family: var(--lp-font-heading);
    font-size: 17px;
    font-weight: 800;
}

.bl-step p {
    margin: 0;
    color: var(--lp-text-soft);
    font-size: 15px;
    line-height: 1.7;
}

/* ── 지표 ──────────────────────────────────────────────────────────────── */

.bl-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.bl-stat {
    padding: 30px 20px;
    border-radius: var(--lp-radius-md);
    background: var(--lp-surface);
    border: 1px solid var(--lp-border-soft);
    text-align: center;
}

/* strong 이 제목(라벨), span 이 값 — 2026-09-13 사용자 요청으로 자리를 바꿨다 */
.bl-stat strong {
    display: block;
    margin: 0 0 8px;
    color: var(--lp-text);
    font-family: var(--lp-font-heading);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.bl-stat span {
    /* text-muted 는 14px 본문에 못 쓴다 — 팔레트 G 에서 흰 바탕 대비 2.09(2026-09-13 실측) */
    color: var(--lp-accent-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

/* ── 개인정보 신뢰 밴드 ────────────────────────────────────────────────── */

.bl-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 36px 32px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
    box-shadow: var(--lp-shadow);
}

.bl-trust-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    color: var(--lp-text-soft);
    font-size: 15px;
    line-height: 1.7;
}

.bl-trust-item svg {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--lp-success);
}

.bl-trust-item strong {
    display: block;
    margin: 0 0 6px;
    color: var(--lp-text);
    font-size: 16px;
    font-weight: 800;
}

/* 본문 속 링크는 색만으로 구분하면 안 된다(WCAG 1.4.1) — 밑줄을 준다 */
.bl-trust-item a { color: var(--lp-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ── 장례식장 검색 안내 ────────────────────────────────────────────────── */

.bl-find {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 40px 36px;
    border-radius: var(--lp-radius-lg);
    background: var(--lp-accent-soft);
}

.bl-find h2 {
    margin: 0 0 8px;
    color: var(--lp-text);
    font-family: var(--lp-font-heading);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.bl-find p {
    margin: 0;
    /* accent-soft 바탕 위라 text-soft 로는 모자란다(G 3.66). text 로 */
    color: var(--lp-text);
    font-size: 15px;
    line-height: 1.7;
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.bl-faq { display: grid; gap: 10px; }

.bl-faq details {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-md);
    background: var(--lp-surface);
    transition: border-color .18s ease;
}

.bl-faq details[open] { border-color: var(--lp-accent); }

.bl-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    color: var(--lp-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}

.bl-faq summary::-webkit-details-marker { display: none; }

/* 꺾쇠는 테두리로 그린다 — 폰트 글리프에 기대면 색이 안 따라온다 */
.bl-faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--lp-text-muted);
    border-bottom: 2px solid var(--lp-text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease, border-color .18s ease;
}

.bl-faq details[open] summary::after {
    border-color: var(--lp-accent);
    transform: rotate(225deg) translate(-2px, -2px);
}

.bl-faq details p {
    margin: 0;
    padding: 0 24px 22px;
    color: var(--lp-text-soft);
    font-size: 15px;
    line-height: 1.8;
}

/* ── 마감 CTA ──────────────────────────────────────────────────────────── */

.bl-cta-band {
    padding: 56px 40px;
    border-radius: var(--lp-radius-lg);
    background: var(--lp-ink);
    color: var(--lp-on-ink);
    text-align: center;
}

.bl-cta-band h2 {
    margin: 0 0 12px;
    color: var(--lp-on-ink);
    font-family: var(--lp-font-heading);
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.bl-cta-band p {
    margin: 0 0 28px;
    color: color-mix(in srgb, var(--lp-on-ink) 78%, transparent);
    font-size: 16px;
    line-height: 1.7;
}

/* 어두운 띠 위에서는 ink 버튼이 배경에 묻히므로 표면색으로 뒤집는다 */
.bl-cta-band .bl-btn {
    background: var(--lp-surface);
    color: var(--lp-text);
}

/* 호버도 배경은 그대로 두고 글자만 강조색 계열로 — accent-text/surface 는
   아홉 색 전부 5.66 이상이라 안전하다(accent/on-accent 는 아니다) */
.bl-cta-band .bl-btn:hover {
    background: var(--lp-surface);
    color: var(--lp-accent-text);
}

/* ── 반응형 ────────────────────────────────────────────────────────────── */

/* 1200px 아래는 목업 칸을 좁혀 문구 칸 폭을 지킨다 (home.php 의 sizes 와 같은 기준점) */
@media (max-width: 1199.98px) {
    .bl-hero-grid { grid-template-columns: minmax(0, 1fr) 230px; gap: 48px; }
}

@media (max-width: 1024px) {
    .bl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl-intro-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* 992px 미만 — 히어로는 한 단 가운데 정렬, 목업은 숨긴다.
   (내려받기 자체를 막는 것은 home.php 의 picture/source 다. 여기는 표시만 끈다) */
@media (max-width: 991.98px) {
    .bl-hero { text-align: center; }
    .bl-hero-grid { grid-template-columns: 1fr; gap: 0; }
    .bl-hero-visual { display: none; }
    .bl-hero-copy { max-width: 680px; margin: 0 auto; }
    .bl-hero-sub { margin-left: auto; margin-right: auto; }
    .bl-hero-actions { justify-content: center; }
    .bl-hero-proof { justify-content: center; }
}

@media (max-width: 768px) {
    .bl-section { padding: var(--lp-section-gap-mobile) 0; }
    .bl-section--tight { padding: calc(var(--lp-section-gap-mobile) * .8) 0; }
    .bl-hero { padding: calc(var(--lp-section-gap-mobile) * .9) 0 var(--lp-section-gap-mobile); }
    .bl-proof { padding: 18px 0; }
    .bl-section-head { margin-bottom: 32px; }
    /* 절차는 세로로 — 선도 세로로 내려 다음 번호까지 잇는다 */
    .bl-steps { grid-template-columns: 1fr; gap: 28px; }
    .bl-step { padding-left: 56px; text-align: left; }
    .bl-step::before { position: absolute; top: 0; left: 0; margin: 0; }
    .bl-step:not(:last-child)::after { top: 40px; bottom: -28px; left: 19px; right: auto; width: 2px; height: auto; }
    .bl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl-trust { grid-template-columns: 1fr; padding: 28px 24px; }
    .bl-find { padding: 32px 26px; }
    .bl-cta-band { padding: 44px 26px; }
    /* 스트립은 2열 격자로 — 가운데 정렬 flex 는 줄마다 들쭉날쭉해진다 */
    .bl-hero-proof {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: center;
        gap: 12px 16px;
    }
    .bl-hero-proof li { font-size: 13px; }
}

@media (max-width: 560px) {
    .bl-container { padding: 0 18px; }
    .bl-features { grid-template-columns: 1fr; }
    .bl-feature-icon { display: none; }
    /* 소개 링크 3개는 한 줄에 — 패딩·글자를 줄이고 세 칸을 균등 분배한다(2026-09-14 사용자) */
    .bl-intro-links { flex-wrap: nowrap; gap: 8px; }
    .bl-intro-links li { flex: 1 1 0; min-width: 0; }
    .bl-intro-links a { width: 100%; justify-content: center; padding: 9px 6px; font-size: 13px; white-space: nowrap; }
    .bl-hero-actions { flex-direction: column; }
    .bl-hero-actions .bl-btn,
    .bl-hero-actions .bl-btn-ghost { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-feature,
    .bl-faq summary::after { transition: none; }
    .bl-feature:hover { transform: none; }
}