/* ============================================================================
   home-bugopage.css — bugopage.com 전용 메인 페이지 (DS09 그래파이트 프리미엄)
   ============================================================================
   - views/sites/bugopage/home.php 에서만 로드 (theme-bugopage.css 가 색을 정한다)
   - 정본: (OneDrive)\WEB\Projects\docs\design\design_system_09-graphite-premium.md
     ⚠️ 경로 자리표시자에 중괄호를 쓰지 않는다 — 주석 안 중괄호 하나로 CSS 도구가
        선택자를 잘못 가른다(2026-09-07 실제로 겪었다).

   ★ DS09 §5-A 레이아웃 언어를 그대로 가져왔다. 색만 옮기면 화면이 재현되지 않는다.
       컨테이너 1140px / 좌우 24px · 섹션 상하 80px · 섹션 헤더 640px + 아래 44px
       그리드 간격 10~14px (이 계열에서 가장 촘촘) · 브레이크포인트 960 / 860 2단 사다리
     프리미엄 인상은 요소를 벌려서가 아니라 **안은 촘촘하게, 섹션 사이는 넉넉하게**
     두는 대비에서 나온다. 카드 간격을 넓히면 밀도가 풀려 평범한 화면이 된다.

   @version   2.5.0
   @updated   2026-09-14
   @shared    복제사이트 공용 파일 — 여기서 고치면 다른 사이트에도 이식해야 한다
              (단 이 파일을 실제로 읽는 사이트는 3호 bugopage 뿐이다.
               2026-08-12 shared-files.psd1 에서 **전파 대상에서 제외**됐다)
   @changelog
     2.5.0 (2026-09-14) 히어로 높이 축소(사용자 요청) — ① 상하 여백 88/120 → 36/52, 모바일
                        72/92 → 40/56. ② 제품 사진 칸 420 → 256px. 새 목업(383×650)은 이전
                        (900×1109)보다 세로로 길어서 같은 폭이면 히어로가 오히려 커지므로
                        폭을 줄여 높이를 맞췄다(320 으로 낮춘 뒤 사용자 확인으로 20% 더 축소).
                        home.php 2.4.0 과 짝이다
     2.4.0 (2026-09-13) ① 모바일(≤960px)에서 히어로 제품 사진을 숨긴다 — 좁은 화면에서는 글 아래
                        사진 한 장이 스크롤만 늘린다(사용자 요청). 마크업 쪽 <picture> 가 요청도 막는다.
                        ② 수치 카드 텍스트 가운데 정렬. ③ 기능 카드 아이콘 규칙 제거(마크업에서 아이콘을
                        뺐다 — 남겨 두면 검사기가 죽은 규칙으로 잡는다). home.php 2.3.0 과 짝이다
     2.3.0 (2026-09-13) 히어로 재설계 — ① 제품 사진이 알파 채널 WebP 로 바뀌어 radial
                        마스크를 걷어냈다(마스크는 평평한 배경을 지우는 꼼수였는데 사각
                        테두리가 그대로 남았다). ② .bp-hero-visual 래퍼 뒤에 스포트라이트
                        (::before)를 세우고 사진에 drop-shadow 를 줘 제품이 무대 조명 안에
                        떠 있게 했다 — 배경과 사진이 한 장면으로 이어진다. ③ 디스플레이
                        제목을 800 → 500 으로 내렸다. Windows 맑은 고딕은 600 이상이 전부
                        Bold 한 얼굴이라(실측) 700 으로 낮춰도 화면이 같다 — 500 이라야
                        Windows 는 Regular, Mac·모바일은 Medium 으로 실제로 가벼워진다.
                        크기도 8.5vw/104px → 6.6vw/84px 로 줄이고 행간을 1.12 로 풀었다.
                        ⚠️ 마크업이 함께 바뀌었다 — home.php 2.2.0 과 짝이다
     2.2.1 (2026-08-12) theme 3.0.1 이 추가한 --ds-media-bg 를 거울에 반영(§0)
     2.2.0 (2026-08-12) ⭐ **이 파일이 사이트에서 유일하게 다크를 켜는 스위치가 됐다.**
                        theme-bugopage.css 3.0.0 이 서브 페이지를 전부 라이트로 뒤집으면서
                        `:root` 기본값이 라이트가 됐다. 이 파일은 홈에서만 로드되므로
                        §0 에서 다크 값을 되돌린다 — 그래서 홈만 다크로 남는다.
                        ⛔ theme 3.0.0 이 새로 만든 토큰(--ds-on-accent · --ds-shadow-lg ·
                           --ds-scrim-bar · --ds-tile-filter · 시맨틱 등)까지 전부 여기서
                           되돌려야 한다. 하나 빠뜨리면 **검정 홈에 흰 판이 하나 뜬다.**
                           두 파일은 짝이다 — theme 에 토큰을 추가하면 여기도 함께 고친다
     2.1.0 (2026-08-12) ① 히어로 제품 자리를 CSS 목업 → **실제 제품 사진**으로 교체
                           (home-hero-bugopage.webp). 사진 배경이 평평한 무채색이라
                           radial 마스크로 가장자리를 지워 그라데이션에 녹였다
                        ② 홈만 순수 검정 무대로 되돌리는 §0 블록 신설 — theme 쪽이
                           작업 화면 가독성을 위해 사다리를 올렸는데, 홈은 그라데이션과
                           제품 사진이 서는 얼굴이라 가장 어두운 무대가 필요하다
                        ⚠️ 마크업이 함께 바뀌었다 — home.php 2.1.0 과 짝이다
     2.0.0 (2026-08-12) 화이트 클린 미니멀 → DS09 그래파이트 프리미엄 전면 재설계.
                        ⚠️ 마크업이 함께 바뀌었다 — views/sites/bugopage/home.php 와 **짝**이다.
                        한쪽만 올리면 히어로와 아이콘 행이 제자리에 서지 않는다.
     1.0.0 (2026-07-31) 버전 헤더 도입 시점 상태 (화이트 클린 미니멀)
   ============================================================================ */

/* ============================================================================
   0. 강제 다크 블록은 걷어냈다 — 2026-09-07 (랜딩 재설계 4단계)
   ============================================================================
   예전에는 여기 `html:root` 강제 다크 정의 블록이 있어 **홈만
   강제로 검은 무대**로 되돌렸다. 홈이 그라데이션 스테이지가 서 있는 얼굴이라는
   판단이었고, 그 자체로는 타당했다(2026-08-12).

   ⛔ 그런데 이 구조를 「구조 × 색」으로 팔기로 하면서 그 블록이 걸림돌이 됐다.
      토큰 값을 파일 안에 박아 두면 **고객이 아홉 색 중 무엇을 골라도 검은 화면**이
      나온다. 색을 고를 수 있다는 것이 상품의 핵심인데 이 구조만 안 따라가는 셈이다.

   ■ 그래서 어떻게 했나
     토큰 정의를 전부 지우고 --lp-* 34개 계약만 쓰게 했다. 색은 고른 테마가 정한다.
     대신 **히어로와 마감 띠는 --lp-ink 를 배경으로 쓴다** — ink 는 아홉 색 모두
     어두운 값이라(#0a0a0a ~ #3B6667) 「어두운 무대」라는 정체성은 그대로 남는다.
     E 다크 틸 · I 그래파이트를 고르면 예전처럼 화면 전체가 어두워진다.

   ⚠️ 되돌리려면 이 블록 자리에 예전 html:root 정의를 되살리면 된다
      (git: bugopagecom 의 이 커밋 직전 판). 다만 되살리는 순간 이 구조는
      다시 색 선택이 무의미해지므로, site.php 의 layout_palettes 를 own 으로
      되돌리는 것과 함께 판단해야 한다.
   ============================================================================ */

/* ============================================================================
   1. 레이아웃 골격 (DS09 §5-A)
   ============================================================================ */

.bp-container {
    width: min(1140px, 100%);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.bp-section {
    padding: 80px 0;
}

/* 교대 섹션 — 검정과 #0d0d0f 는 차이가 미세해서 리듬을 만들되 튀지 않는다 */
.bp-section--alt {
    background: var(--lp-bg-alt);
}

.bp-section-head {
    max-width: 640px;
    margin: 0 auto 44px;
    text-align: center;
}

.bp-section-head h2 {
    margin: 0 0 12px;
    color: var(--lp-text);
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.3;
    /* 한글에는 음수 자간을 주지 않는다 — 굵은 제목에서 획 많은 글자가 붙어 보인다
       (home.css 1.6.1 에서 같은 이유로 되돌린 적이 있다) */
    letter-spacing: normal;
}

.bp-section-head p {
    margin: 0;
    color: var(--lp-text-muted);
    font-size: 15px;
    line-height: 1.75;
}

/* ============================================================================
   2. 히어로 스테이지 (DS09 §5-1) — 이 테마의 얼굴
   ============================================================================
   그라데이션은 위가 밝고 아래로 어두워지는 **스튜디오 조명** 방향이다.
   뒤집으면 제품이 떠 있지 않고 가라앉아 보인다(DS09 §1).
   ============================================================================ */

/* 좌상단 확산광은 80% 까지 눌렀다 — 제품 뒤 스포트라이트(.bp-hero-visual::before)가
   주 광원이 되어야 시선이 제품으로 모인다. 두 빛이 같은 세기면 무대가 산만해진다. */
.bp-hero {
    position: relative;
    background: linear-gradient(155deg, color-mix(in srgb, var(--lp-ink) 80%, var(--lp-surface)) 0%, var(--lp-ink) 50%, color-mix(in srgb, var(--lp-ink) 92%, var(--lp-text)) 100%);
    overflow: hidden;
}

.bp-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 256px;
    gap: 56px;
    align-items: center;
    /* 아래 여백은 퀵 액션 카드가 -24px 물고 올라오는 몫을 더한 값이다 */
    padding: 36px 0 52px;
}

/* 히어로 2단 그리드의 왼쪽 칸. 규칙이 없어 검사기가 「죽은 클래스」로 잡았는데,
   실제로는 그리드 자식이라 자리를 차지한다 — 지우면 h1·본문이 각각 칸이 되어 무너진다.
   min-width:0 은 긴 단어가 1fr 칸을 밀어내지 않게 한다(그리드 자식 기본값 auto 는 넘친다). */
.bp-hero-copy {
    min-width: 0;
}

/* ── 상태 필 (DS09 §5-2) ── */
.bp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--lp-radius-pill);
    background: color-mix(in srgb, var(--lp-on-ink) 14%, transparent);
    color: var(--lp-on-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.bp-pill::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lp-success);
    flex-shrink: 0;
}

/* ── 디스플레이 타이포 (DS09 §4-1 을 부고 서비스에 맞게 낮춘 판) ──
   대문자 개념이 없는 한글은 영문만큼 강하지 않으므로 2~3어절로 끊어 두 줄 왼쪽 정렬한다.

   굵기 500 인 이유 — DS09 원문은 800 이지만 부고 서비스의 첫 문장이 광고처럼 무거우면
   어긋난다. 그리고 Windows 맑은 고딕은 Regular·Bold 두 얼굴뿐이라 600~800 은 전부
   같은 Bold 로 찍힌다(2026-09-13 Chrome 실측). 500 이라야 Windows 는 Regular,
   Mac·iOS·Android 는 Medium 으로 떨어져 **모든 기기에서 실제로** 가벼워진다.
   Regular 얼굴은 자간을 조이면 획이 붙어 보이므로 -0.015em 까지만 준다. */
.bp-hero h1 {
    margin: 24px 0 0;
    color: var(--lp-on-ink);
    /* 왼쪽 칸이 약 780px(1140 − 여백 − 사진 256 − 간격 56)라 "고인을 위한 부고장,"(9자)이
       한 줄에 여유 있게 선다. 84px 였을 때 두 줄이 네 줄로 접혔다(2026-09-13 실측). */
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

/* "카카오톡·문자·QR코드" 처럼 가운뎃점으로 이어진 묶음이 점 앞에서 줄바꿈되면 다음 줄이
   "·QR코드로" 로 시작한다 — 묶음을 한 덩어리로 유지한다. */
.bp-nowrap {
    white-space: nowrap;
}

.bp-hero-sub {
    max-width: 540px;
    margin: 24px 0 0;
    color: color-mix(in srgb, var(--lp-on-ink) 78%, transparent);
    font-size: 17px;
    line-height: 1.75;
}

.bp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

/* ── 패턴 A: 주 버튼 (흰색) — 한 화면에 하나 ── */
.bp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 32px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-surface);
    color: var(--lp-text);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}
.bp-btn-primary:hover {
    background: color-mix(in srgb, var(--lp-surface) 86%, var(--lp-accent));
    color: var(--lp-text);
    text-decoration: none;
}

/* ── 패턴 B: 보조 버튼 (고스트) ── */
.bp-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border-radius: var(--lp-radius-pill);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--lp-on-ink) 40%, transparent);
    color: var(--lp-on-ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}
.bp-btn-ghost:hover {
    background: color-mix(in srgb, var(--lp-on-ink) 12%, transparent);
    color: var(--lp-on-ink);
    text-decoration: none;
}

/* ============================================================================
   3. 제품 사진 — 히어로의 "제품" 자리 (DS09 §5-1 · §8-3)
   ============================================================================
   DS09 는 히어로에 제품이 서야 성립하는 테마다. 이 서비스의 제품은 부고 페이지 자체라,
   실제 화면을 띄운 휴대폰 사진이 그 자리에 들어간다.
   파일: /public_html/assets/images/home-hero-bugopage.webp (383×650, 세로, **알파 채널**)

   ■ 배경과 사진이 한 장면으로 이어지는 원리
     사진 자체에 배경이 없다(투명). 그래서 마스크로 가장자리를 지울 필요가 없고,
     대신 래퍼 뒤에 은은한 **스포트라이트**(::before)를 깔아 제품이 무대 조명 안에
     떠 있게 한다. 빛은 흰색(--lp-on-ink)을 아주 낮은 비율로 섞어 만들므로 아홉 색
     어느 무대에서도 "그 무대색이 조금 밝아진 빛" 으로 보인다.
     사진에는 drop-shadow 를 줘 조명 아래 놓인 물체처럼 그림자를 떨군다 —
     box-shadow 는 사각형 그림자가 생겨 투명 사진에 쓸 수 없다.

   ⚠️ 사진을 바꿀 때 배경이 있는 파일을 넣으면 그 배경이 사각형으로 그대로 드러난다.
      반드시 투명 배경(PNG/WebP 알파)으로 준비할 것.
   ============================================================================ */

.bp-hero-visual {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 256px;
    min-width: 0;
    /* 자체 쌓임 맥락을 만들어 ::before(z-index -1)가 사진 뒤, 무대 위에 놓이게 한다 */
    isolation: isolate;
}

.bp-hero-visual::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -12% -34% -14%;
    background: radial-gradient(ellipse at 50% 46%,
        color-mix(in srgb, var(--lp-on-ink) 14%, transparent) 0%,
        color-mix(in srgb, var(--lp-on-ink) 5%, transparent) 40%,
        transparent 68%);
    pointer-events: none;
}

.bp-hero-photo {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 28px 44px color-mix(in srgb, var(--lp-ink) 72%, transparent));
}

/* ============================================================================
   4. 아이콘 퀵 액션 행 (DS09 §5-4)
   ============================================================================
   히어로를 -24px 물고 올라오게 배치한다 — 히어로 아래 첫 카드가 스테이지에 얹히는
   것이 DS09 §5-1 의 리듬이다.
   ============================================================================ */

.bp-quick-wrap {
    position: relative;
    z-index: 2;
    margin-top: -24px;
}

.bp-quick {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
    box-shadow: var(--lp-shadow-lift);
    overflow: hidden;
}

.bp-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 22px 10px;
    color: var(--lp-text);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease;
}

/* 칸 사이 1px 세로 구분선 — 검정 배경에서는 선보다 면이 잘 보이지만,
   한 장의 카드를 나누는 자리에서는 헤어라인이 맞다(DS09 §1) */
.bp-quick a + a {
    box-shadow: inset 1px 0 0 var(--lp-border-soft);
}

.bp-quick a:hover {
    background: var(--lp-surface-2);
    color: var(--lp-text);
    text-decoration: none;
}

/* 아이콘은 stroke 1.5px, fill 없음, 24px, 흰색 */
.bp-quick svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

/* ============================================================================
   5. 수치 카드 (DS09 §5-3)
   ============================================================================ */

.bp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.bp-stat {
    position: relative;
    padding: 22px 20px 20px;
    border-radius: var(--lp-radius-md);
    background: var(--lp-surface);
    overflow: hidden;
    text-align: center;
}

/* 카드 상단 2px 가로 라인 — 트랙 위에 흰 채움 */
.bp-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lp-border-soft);
}
.bp-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--lp-accent);
}

.bp-stat__label {
    display: block;
    margin-bottom: 10px;
    color: var(--lp-text-muted);
    font-size: 14px;
}

/* 숫자와 단위의 크기를 분리한다 — 붙여 두면 위계가 사라진다 */
.bp-stat__value {
    color: var(--lp-text);
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.bp-stat__unit {
    margin-left: 3px;
    color: var(--lp-text-muted);
    font-size: 15px;
    font-weight: 500;
}

/* ============================================================================
   6. 시그니처 그리드 — 340px 고정 사이드 + 유동 본문 (DS09 §5-A)
   ============================================================================
   사이드를 fr 이 아니라 **고정 px** 로 잡는 이유: 비율로 두면 화면이 넓어질 때
   사이드까지 늘어나 여백만 커진다. 폭을 고정하면 넓어진 공간이 전부 본문으로 가서
   큰 화면일수록 내용이 커지는 인상이 만들어진다.
   ============================================================================ */

.bp-mock-sec {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 44px;
    align-items: center;
}

.bp-mock-sec h2 {
    margin: 0 0 14px;
    color: var(--lp-text);
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: normal;
}

.bp-mock-sec p {
    margin: 0;
    color: var(--lp-text-soft);
    font-size: 16px;
    line-height: 1.8;
}

/* ── 절차 3단계 ── */
.bp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.bp-step {
    padding: 18px;
    border-radius: var(--lp-radius-md);
    background: var(--lp-surface);
}

.bp-step-no {
    display: block;
    margin-bottom: 10px;
    color: var(--lp-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.bp-step h3 {
    margin: 0 0 6px;
    color: var(--lp-text);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: normal;
}

.bp-step p {
    margin: 0;
    color: var(--lp-text-muted);
    font-size: 13px;
    line-height: 1.65;
}

/* ============================================================================
   7. 2단 기능 카드 (DS09 §5-5)
   ============================================================================
   .bp-duo 는 좁은 화면에서도 2단을 유지한다 — DS09 의 .duo 와 같은 규칙이다.
   ============================================================================ */

.bp-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.bp-feature {
    padding: 18px;
    border-radius: var(--lp-radius-md);
    background: var(--lp-surface);
    transition: background 0.15s ease;
}

/* hover 는 부양이 아니라 표면 한 단계 밝게 (DS09 §10) */
.bp-feature:hover {
    background: var(--lp-surface-2);
}

.bp-feature strong {
    display: block;
    margin-bottom: 5px;
    color: var(--lp-text);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: normal;
}

.bp-feature span {
    display: block;
    color: var(--lp-text-muted);
    font-size: 13px;
    line-height: 1.65;
}

/* ============================================================================
   8. FAQ
   ============================================================================ */

.bp-faq {
    display: grid;
    gap: 10px;
    max-width: 820px;
    margin: 0 auto;
}

.bp-faq details {
    border-radius: var(--lp-radius-md);
    background: var(--lp-surface);
    overflow: hidden;
    transition: background 0.15s ease;
}

.bp-faq details[open] {
    background: var(--lp-surface-2);
}

.bp-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    color: var(--lp-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}
.bp-faq summary::-webkit-details-marker { display: none; }

/* 글리프 대신 테두리로 그린 꺾쇠 — 폰트에 따라 모양이 달라지지 않는다 */
.bp-faq summary::after {
    content: '';
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin: 6px 2px 0 0;
    border-right: 2px solid var(--lp-text-muted);
    border-bottom: 2px solid var(--lp-text-muted);
    transform: rotate(45deg);
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.bp-faq details[open] summary::after {
    border-color: var(--lp-text);
    transform: rotate(-135deg);
}

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

/* ============================================================================
   9. 마감 CTA
   ============================================================================ */

.bp-cta-band {
    padding: 56px clamp(24px, 6vw, 60px);
    border-radius: var(--lp-radius-lg);
    background: linear-gradient(155deg, color-mix(in srgb, var(--lp-ink) 74%, var(--lp-surface)) 0%, var(--lp-ink) 48%, color-mix(in srgb, var(--lp-ink) 92%, var(--lp-text)) 100%);
    text-align: center;
}

.bp-cta-band h2 {
    margin: 0 0 10px;
    color: var(--lp-on-ink);
    font-size: clamp(24px, 3.6vw, 34px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: normal;
}

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

/* ============================================================================
   10. 반응형 — 960 / 860 2단 사다리 (DS09 §5-A)
   ============================================================================
   .bp-mock-sec 와 히어로는 사이드가 340px 고정이라, 960px 아래로 내려가면 본문에
   남는 폭이 부족해진다. 그래서 **다른 그리드보다 먼저** 이것만 1단으로 내리고,
   접힌 뒤에는 가운데 정렬해 폭이 남지 않게 한다. 나머지는 860px 에서 한꺼번에 내린다.
   ============================================================================ */

@media (max-width: 960px) {
    /**
     * ⚠️ DS09 §5-A 는 접힌 뒤 `justify-items: center` 를 쓰라고 적어 두었지만,
     *    그대로 쓰면 **가로 스크롤이 생긴다.** justify-items 의 기본값 stretch 가
     *    center 로 바뀌는 순간 그리드 항목이 max-content 폭으로 줄어드는데,
     *    항목 안에 긴 한글 문장이 있으면 줄바꿈을 멈추고 컨테이너를 뚫고 나간다
     *    (390px 실기기 폭에서 히어로 본문과 STEP 카드가 화면 밖으로 잘렸다).
     *
     *    그래서 항목은 stretch 로 두고(가로폭은 컨테이너에 맞추고), **가운데 정렬은
     *    text-align 과 margin-inline 으로** 만든다. 목업만 justify-self 로 가운데 세운다.
     */
    .bp-hero-inner,
    .bp-mock-sec {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        gap: 40px;
    }

    .bp-hero-inner { padding: 40px 0 56px; }

    .bp-hero-sub { margin-left: auto; margin-right: auto; }
    .bp-hero-actions { justify-content: center; }

    /* 좁은 화면에서는 제품 사진을 보이지 않는다(2026-09-13) — PC 는 오른쪽 빈 칸을 채우려
       필요하지만 여기서는 글 아래 사진 한 장이 스크롤만 늘린다. 마크업의 <picture> 가 이 폭에서
       사진 요청 자체를 막으므로 여기서는 자리만 없앤다. */
    .bp-hero .bp-hero-visual { display: none; }

    .bp-mock-sec p { margin-left: auto; margin-right: auto; max-width: 620px; }
}

@media (max-width: 860px) {
    .bp-section { padding: 60px 0; }

    .bp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bp-steps { grid-template-columns: minmax(0, 1fr); }

    /**
     * 아이콘 행은 5칸이 좁아져도 **줄바꿈하지 않고 가로로 스크롤**한다(DS09 §5-4).
     * 줄을 바꾸면 "한 장의 카드 안 5칸"이라는 형태 자체가 사라진다.
     */
    .bp-quick {
        grid-template-columns: repeat(5, minmax(96px, 1fr));
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .bp-quick::-webkit-scrollbar { display: none; }

    .bp-hero-actions .bp-btn-primary,
    .bp-hero-actions .bp-btn-ghost { width: 100%; }
}

@media (max-width: 560px) {
    /* .bp-duo 는 여기서도 2단을 유지한다(DS09 .duo) — 대신 안쪽 여백만 줄인다 */
    .bp-feature { padding: 14px; }
    .bp-feature strong { font-size: 15px; }
    .bp-feature span { font-size: 12px; }
}