/* ============================================================
   베러웰스 가이드북 디자인시스템 (FA 디자인시스템 파생, 웹 문서용)
   SSOT: skills/design-system-bw-fa (BetterWealth PB)
   적용 대상: HonKit 기본 테마(gitbook/style.css) 위 오버라이드.
   website.css는 head에서 마지막에 로드되므로 동일 specificity로 승리한다.
   ============================================================ */

/* Spoqa Han Sans Neo 웹폰트 (FA 플랫폼 본문 폰트) — @import는 최상단 필수 */
@import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css');

/* ── 디자인 토큰 ───────────────────────────────────────────── */
:root {
    /* primary (FA 브랜드 블루) */
    --gb-primary:       #2E9BFF; /* primary/500 — 악센트·CTA */
    --gb-primary-press: #257ECF; /* primary/700 — 링크 hover */
    --gb-primary-bg:    #EBF5FF; /* primary/50  — 활성/선택 배경 */
    --gb-link:          #2271BA; /* 본문 링크 텍스트 */

    /* text / gray scale */
    --gb-text:      #2A2C32; /* gray/900 — 제목 */
    --gb-text-sub:  #404351; /* gray/800 — 본문 */
    --gb-caption:   #63636F; /* gray/700 — 캡션/보조 */
    --gb-disabled:  #858794; /* gray/600 — placeholder·아코디언 아이콘 */
    --gb-gray-500:  #ADAFB8; /* gray/500 — Lucide 아이콘·연한 보더 */

    /* line & surface */
    --gb-border:     #D6D7DB; /* gray/400 — 기본 보더 */
    --gb-border-sub: #EBECED; /* gray/300 — 보조 보더 */
    --gb-surface:    #FBFCFD; /* gray/50  — 보조 배경 */
    --gb-surface-2:  #F1F3F6; /* 테이블 헤더 등 */
    --gb-fill:       #F4F5F7; /* 카드·인용구 채움 */

    /* system 시맨틱 팔레트 (FA) */
    --gb-danger:  #EF2B2A; /* up-or-error */
    --gb-warning: #F5AB35; /* warning */
    --gb-info:    #067DFD; /* down-or-success */

    /* hint 배경 (타입별) */
    --gb-hint-info-bg:    #EFFBF8;
    --gb-hint-tip-bg:     #EBF5FF;
    --gb-hint-warning-bg: #FFFAE9;
    --gb-hint-danger-bg:  #FFF3F1;

    /* radius — 카드는 1줄 12px / 2줄+ 16px (보더 없는 채움 카드) */
    --gb-radius-sm: 8px;
    --gb-radius-md: 12px; /* 카드 1줄 */
    --gb-radius-lg: 16px; /* 카드 2줄+ (기본) */

    /* spacing */
    --gb-space-2: 8px;  /* 리스트 항목 사이 */
    --gb-space-4: 16px; /* 문단 사이·아이콘 gap */
    --gb-space-5: 20px;
    --gb-space-section: 60px;                /* 섹션 간격(H2 위) */
    --gb-space-block:   var(--gb-space-5);   /* 블록(카드·hint·인용구·이미지) 상하 마진 20px */

    /* elevation — 스크린샷 이미지 프레이밍 전용 (카드류는 플랫) */
    --gb-shadow-1: 0 1px 2px rgba(42, 44, 50, .06);

    /* type */
    --gb-font: 'Spoqa Han Sans Neo', 'Helvetica Neue', Arial,
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* ── 타이포그래피 (폰트 교체) ──────────────────────────────── */
/* fontsettings 플러그인의 폰트 토글(.font-family-0/1)을 Spoqa로 고정 */
.book.font-family-0,
.book.font-family-1 {
    font-family: var(--gb-font);
}

body,
.book-header,
.book-summary,
.markdown-section,
#book-search-input input,
#book-search-results .search-results .has-results .search-results-item {
    font-family: var(--gb-font);
    letter-spacing: -0.2px;
}

.markdown-section {
    color: var(--gb-text); /* gray/900 #2A2C32 */
    line-height: 1.8;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
    color: var(--gb-text);
    letter-spacing: -0.3px;
}

/* ── 링크·악센트 컬러 ──────────────────────────────────────── */
/* 링크는 primary 컬러 + 밑줄로 '링크' 인지를 명확히 (카드형 링크는 예외) */
.markdown-section a,
#book-search-results .search-results .has-results .search-results-item a {
    color: var(--gb-link);
    font-size: 17px;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.markdown-section a:active,
.markdown-section a:focus,
.markdown-section a:hover {
    color: var(--gb-primary-press);
}

/* 카드형 링크(북마크·파일)는 면 자체가 클릭 영역이므로 밑줄 제외 */
.markdown-section .bw-bookmark > a,
.markdown-section .bw-file a {
    text-decoration: none;
}

/* ── 사이드바(SUMMARY) ─────────────────────────────────────── */
.book-summary {
    background: var(--gb-surface);
    color: var(--gb-text-sub);
    border-right: 1px solid var(--gb-border-sub);
}

.book-summary ul.summary li a,
.book-summary ul.summary li span {
    color: var(--gb-text-sub);
}

.book-summary ul.summary li a:hover {
    color: var(--gb-primary);
    text-decoration: none;
}

.book-summary ul.summary li.active > a {
    color: var(--gb-primary);
    background: var(--gb-primary-bg);
    box-shadow: inset 3px 0 0 var(--gb-primary);
    font-weight: 700;
}

.book-summary ul.summary li.header {
    color: var(--gb-caption);
}

/* ── 본문 요소 ─────────────────────────────────────────────── */
/* 인용구/보조 설명: 본문카드(.bw-card)와 동일한 컨테이너 */
/* border:none — 테마 기본 border-left(좌측 바) 제거 */
.markdown-section blockquote {
    margin: var(--gb-space-block) 0;
    padding: 18px;
    background: var(--gb-fill);
    color: var(--gb-caption); /* #63636F */
    border: none;
    border-radius: var(--gb-radius-lg);
}

/* 카드 안 첫/마지막 요소 마진 제거 — 하단 빈 줄(여백) 방지 */
.markdown-section blockquote > :first-child {
    margin-top: 0;
}

.markdown-section blockquote > :last-child {
    margin-bottom: 0;
}

.markdown-section code {
    background: var(--gb-surface);
    border: 1px solid var(--gb-border-sub);
    border-radius: 4px;
    color: var(--gb-text);
    padding: .12em .4em;
}

/* 테마가 code 양옆에 넣는 nbsp 제거 (보더와 충돌 방지) */
.markdown-section code:after,
.markdown-section code:before {
    content: normal;
}

.markdown-section pre {
    background: var(--gb-surface);
    border: 1px solid var(--gb-border-sub);
    border-radius: var(--gb-radius-sm);
}

.markdown-section hr {
    background-color: var(--gb-border-sub);
}

.markdown-section table th,
.markdown-section table td {
    border: 1px solid var(--gb-border-sub);
}

.markdown-section table tr {
    border-top: 1px solid var(--gb-border-sub);
}

.markdown-section table th {
    background: var(--gb-surface-2);
    color: var(--gb-text);
}

.markdown-section table tr:nth-child(2n) {
    background: var(--gb-surface);
}

/* ── 섹션 리듬 (channel.io식 넉넉한 여백) ─────────────────────── */
/* 대제목(H1): FA(28px)보다 크게 — 첫 사용자 대상 문서의 주목도·대비 강조 의도 */
.markdown-section h1 {
    font-size: 40px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.6px;
    margin-top: .2em;
    margin-bottom: .4em;
}

/* 페이지 타이틀 설명: 대제목 H1과 한 쌍으로 묶이는 리드 문단 */
/* H1 바로 다음 문단은 자동 적용. 수동 지정이 필요하면 .bw-lead 사용 */
.markdown-section h1 + p,
.markdown-section .bw-lead {
    margin-top: -.1em;
    margin-bottom: 1.6em;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.2px;
    color: var(--gb-disabled); /* gray/600 #858794 */
}

/* 대제목/페이지 타이틀 설명 아래 섹션 구분선 (가로, 위아래 20px) */
/* 설명 문단(h1+p)이 있으면 그 아래, 없으면 대제목(h1) 아래에 자동 배치 */
.markdown-section > h1:not(:has(+ p)),
.markdown-section > h1 + p {
    padding-bottom: 20px;   /* 선 위 여백 */
    border-bottom: 1px solid var(--gb-border-sub);
    margin-bottom: 40px;    /* 선 아래 여백 */
}

/* 구분선 바로 다음 요소의 상단 마진 제거 → 선 아래 간격 정확히 20px */
.markdown-section > h1 + p + *,
.markdown-section > h1:not(:has(+ p)) + * {
    margin-top: 0;
}

/* 간격 규칙 — 섹션(H2 위) 40px, 제목↔본문 12px, 문단 16px, 리스트 8px */
.markdown-section h2 {
    margin-top: var(--gb-space-section); /* 40px */
}

.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
    margin-bottom: 10px; /* 제목 ↔ 본문 */
}

.markdown-section p {
    margin-bottom: var(--gb-space-4); /* 16px */
}

.markdown-section li {
    margin-bottom: var(--gb-space-2); /* 8px */
}

.markdown-section li:last-child {
    margin-bottom: 0;
}

/* ── 스크린샷 프레이밍 (figure / img) ─────────────────────────── */
.markdown-section figure {
    margin: var(--gb-space-block) 0;
}

.markdown-section figure img,
.markdown-section p > img {
    border: 1px solid var(--gb-border-sub);
    border-radius: var(--gb-radius-sm);
    box-shadow: var(--gb-shadow-1);
}

.markdown-section figcaption,
.markdown-section figcaption p {
    margin: 8px 0 0;
    color: var(--gb-caption);
    font-size: .85em;
    line-height: 1.5;
}

/* ── hint (hints 플러그인: .alert.alert-{danger|warning|info|success}.hints-alert) ── */
/* 인포메이션 카드: 본문카드와 동일 컨테이너 + 시맨틱 배경색 유지 */
/* border:none — 테마 기본 .alert border-bottom(아래쪽 바) 제거 */
/* background — style 미지정 hint(stepper 내부 등)에서 테마 .alert #eee 방지 */
.alert.hints-alert {
    margin: var(--gb-space-block) 0;
    padding: 18px;
    border: none;
    border-radius: var(--gb-radius-lg);
    background: var(--gb-surface);
}

/* 타입별 배경색 (info=정보, success=tip, warning=주의, danger=경고) */
.alert-info.hints-alert    { background: var(--gb-hint-info-bg); }
.alert-success.hints-alert { background: var(--gb-hint-tip-bg); }
.alert-warning.hints-alert { background: var(--gb-hint-warning-bg); }
.alert-danger.hints-alert  { background: var(--gb-hint-danger-bg); }

.hints-alert .hints-container {
    color: var(--gb-text-sub);
}

/* 카드 안 첫/마지막 요소 마진 제거 — 하단 빈 줄(여백) 방지 */
.hints-alert .hints-container > :first-child {
    margin-top: 0;
}

.hints-alert .hints-container > :last-child {
    margin-bottom: 0;
}

/* 아이콘: FontAwesome 대신 타입별 이모지 사용 */
.hints-alert .hints-icon i {
    display: none;
}

.hints-alert .hints-icon::before {
    font-size: 18px;
    line-height: 1;
}

.alert-info.hints-alert .hints-icon::before    { content: "📢"; }
.alert-success.hints-alert .hints-icon::before { content: "💡"; }
.alert-warning.hints-alert .hints-icon::before { content: "⚠️"; }
.alert-danger.hints-alert .hints-icon::before  { content: "🚨"; }

/* 단계(stepper) 내부 팁: 이모지 없음 + 배경 항상 #F4F5F7 (정보 종류 무관) */
.bw-step .alert.hints-alert {
    background: var(--gb-fill);
}

.bw-step .hints-alert .hints-icon {
    display: none;
}

/* ============================================================
   커스텀 블록 (bw-blocks) — 토큰화
   ============================================================ */

/* empty paragraphs generated around bwdetails blocks */
p:empty {
    display: none;
}

/* ── 단계별 안내 (stepper) — channel.io식 번호 단계 ──────────── */
/* 렌더 구조: <ol class="bw-stepper"><li class="bw-step"><h3>제목</h3> …body… </li></ol> */
.bw-stepper {
    counter-reset: bw-step;
    list-style: none;
    margin: var(--gb-space-block) 0;
    padding: 0;
}

.bw-step {
    counter-increment: bw-step;
    position: relative;
    padding: 0 0 18px 52px; /* 단계 사이 18px */
}

.bw-step:last-child {
    padding-bottom: 4px;
}

/* 번호 뱃지 */
.bw-step::before {
    content: counter(bw-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 100px;
    background: var(--gb-primary);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 32px;
    text-align: center;
}

/* 단계 연결선 */
.bw-step::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 38px;
    bottom: 6px;
    width: 2px;
    background: var(--gb-border-sub);
}

.bw-step:last-child::after {
    display: none;
}

/* 단계 제목: 뱃지와 정렬, 큰 기본 h3 마진 제거 */
.bw-step > h3 {
    margin: 3px 0 8px;
    font-size: 1.15em;
    color: var(--gb-text);
}

.bw-step > :last-child {
    margin-bottom: 0;
}

/* ============================================================
   Lucide 아이콘 시스템 — stroke SVG(둥근 끝), currentColor 상속
   사용:  <i class="lc-info"></i>   (색=글자색, 크기=1em)
   크기·색 조절:  <i class="lc-info" style="font-size:20px;color:#2E9BFF"></i>
   새 아이콘: lucide.dev 이름을 주면 클래스 추가 (자동으로 둥근 끝 적용)
   ============================================================ */
[class^="lc-"],
[class*=" lc-"] {
    display: inline-block;
    width: calc(1em + 2px);    /* 글자보다 2px 크게 (본문 16px → 18px) */
    height: calc(1em + 2px);
    vertical-align: -0.2em;
    flex-shrink: 0;
    background-color: var(--gb-gray-500); /* gray/500 고정 (글자색 상속 안 함) */
    -webkit-mask: var(--lc) center / contain no-repeat;
    mask: var(--lc) center / contain no-repeat;
}

.lc-chevron-right  { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.lc-chevron-down   { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.lc-megaphone      { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
.lc-lightbulb      { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.lc-triangle-alert { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.lc-siren          { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18v-6a5 5 0 1 1 10 0v6'/%3E%3Cpath d='M5 21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1z'/%3E%3Cpath d='M21 12h1'/%3E%3Cpath d='M18.5 4.5 18 5'/%3E%3Cpath d='M2 12h1'/%3E%3Cpath d='M12 2v1'/%3E%3Cpath d='m5.5 4.5 .5 .5'/%3E%3C/svg%3E"); }
.lc-info           { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.lc-circle-check   { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.lc-file-text      { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); }
.lc-arrow-right    { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.lc-external-link  { --lc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }

/* ── 아코디언 (details) — 흰 배경 + 보더 + chevron 아이콘 ───── */
details {
    background: #ffffff;
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    margin: var(--gb-space-block) 0;
    overflow: hidden;
}

details summary {
    padding: 18px;
    cursor: pointer;
    font-size: 18px;      /* 접힘 상태 폰트 18px / bold */
    font-weight: 700;
    color: var(--gb-text);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 16px;            /* 아이콘 ↔ 폰트 간격 */
    user-select: none;
}

details summary::-webkit-details-marker {
    display: none;
}

/* chevron 아이콘 — Lucide chevron-right(둥근 끝, 왼쪽 정렬, 22px, #858794) */
/* 접힘: chevron-right, 펼침: 90° 회전 → chevron-down */
details summary::before {
    content: "";
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background-color: var(--gb-disabled);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s;
}

details[open] summary::before {
    transform: rotate(90deg);
}

.bw-details-body {
    padding: 0 18px 18px;
}

.bw-details-body p:first-child {
    margin-top: 0;
}

.bw-details-body p:last-child {
    margin-bottom: 0;
}

.bw-details-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
}

.bw-details-body th,
.bw-details-body td {
    border: 1px solid var(--gb-border-sub);
    padding: 8px 12px;
    text-align: left;
}

.bw-details-body th {
    background: var(--gb-surface-2);
}

/* ── 컬럼 레이아웃 (2단) ──────────────────────────────────── */
/* 칼럼 사이 세로 구분선: 양쪽 간격 16px (gap 16px + padding-left 16px) */
.bw-columns {
    display: flex;
    gap: 16px;
    margin: var(--gb-space-block) 0;
}

.bw-column {
    flex: 1;
    min-width: 0;
}

.bw-column + .bw-column {
    padding-left: 16px;
    border-left: 1px solid var(--gb-border-sub);
}

/* ── 본문 카드 (.bw-card) — 보더 없는 채움 카드 ─────────────── */
.bw-card {
    margin: var(--gb-space-block) 0;
    padding: 18px;
    background: var(--gb-fill);
    border-radius: var(--gb-radius-lg);
}

.bw-card-title {
    margin: 0 0 8px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--gb-text);
}

.bw-card > :last-child {
    margin-bottom: 0;
}

/* 강조형 본문 카드 (primary 톤) */
.bw-card.bw-card-accent {
    background: var(--gb-primary-bg);
}

/* ── 파일 첨부 ────────────────────────────────────────────── */
.bw-file {
    display: inline-flex;
    align-items: center;
    background: var(--gb-surface);
    border-radius: var(--gb-radius-lg);
    padding: 18px;
    margin: 8px 0;
}

.bw-file a {
    text-decoration: none;
    font-weight: 500;
    color: var(--gb-primary);
}

.bw-file a::before {
    content: "📎 ";
}

/* ── 탭 — 보더 없는 채움 카드 (선택 인디케이터만 유지) ───────── */
.bw-tabs {
    margin: var(--gb-space-block) 0;
    border-radius: var(--gb-radius-lg);
    overflow: hidden;
    background: #fff;
}

.bw-tab-nav {
    display: flex;
    background: var(--gb-surface-2);
    overflow-x: auto;
}

.bw-tab-btn {
    padding: 10px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--gb-caption);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.bw-tab-btn:hover {
    color: var(--gb-text);
}

.bw-tab-btn.bw-tab-active {
    color: var(--gb-primary);
    border-bottom-color: var(--gb-primary);
    font-weight: 500;
}

.bw-tab-panel {
    padding: 18px;
}

.bw-tab-panel {
    background: #fff;
}

.bw-tab-panel > *:first-child {
    margin-top: 0;
}

.bw-tab-panel > *:last-child {
    margin-bottom: 0;
}

/* ── 카드 radius 규칙: 1줄 12px / 2줄+ 16px ───────────────────── */
/* 기본(2줄+) = 16px(--gb-radius-lg). 1줄 카드는 JS가 .bw-oneline 부여 → 12px */
.bw-oneline {
    border-radius: var(--gb-radius-md) !important;
}

/* ============================================================
   모바일 반응형 (≤600px) — 제목 크기·들여쓰기·외부링크 카드 조정
   ============================================================ */
@media (max-width: 600px) {
    /* 대제목 H1: 40px → 30px (모바일에서 과도한 크기 축소) */
    .markdown-section h1 {
        font-size: 30px;
    }

    /* 중제목 H2: 24px → 22px (H1 축소에 맞춰 위계 유지) */
    .markdown-section h2 {
        font-size: 22px;
    }

    /* 소제목 H3(일반 본문 제목): 테마 기본 24px → 20px (H2 22px 아래로) */
    .markdown-section h3 {
        font-size: 20px;
    }

    /* stepper 단계 제목은 기존 크기(1.15em≈18px) 유지 — 위 h3 규칙에 덮이지 않도록 재지정 */
    .bw-step > h3 {
        font-size: 1.15em;
    }

    /* stepper: 테마 ol의 좌측 들여쓰기(2em=32px)를 제거해 뱃지를 본문과 좌측 정렬.
       .bw-step 내부(뱃지·연결선·텍스트 간격)는 그대로 유지 */
    .markdown-section .bw-stepper {
        padding-left: 0;
    }

    /* columns: 칼럼 사이 들여쓰기 16px → 12px */
    .bw-column + .bw-column {
        padding-left: 12px;
    }

    /* 외부 링크 카드: 좁은 폭에서 제목/URL이 미리보기(96×96)에 가려지지 않도록
       한 줄 강제(nowrap+ellipsis) 해제 → 자동 줄바꿈. 긴 URL도 줄바꿈 */
    .bw-bookmark-desc,
    .bw-bookmark-url {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   프린트 / PDF (Chrome print-to-pdf 기준)
   - 배경색·mask 아이콘이 인쇄에서 누락되지 않도록 전역 색 보정
   - 단계·이미지·콜아웃이 페이지 경계에서 잘리지 않도록
   ============================================================ */
@page {
    margin: 16mm 14mm;
}

@media print {
    /* 카드 배경·힌트 색·Lucide/아코디언 mask 아이콘·Smile 미리보기 인쇄 */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .bw-step,
    .markdown-section figure,
    .alert.hints-alert,
    .bw-card,
    .markdown-section blockquote,
    .bw-tabs,
    .bw-file,
    .bw-bookmark,
    details {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .markdown-section h1,
    .markdown-section h2,
    .markdown-section h3,
    .bw-step > h3 {
        break-after: avoid;
        page-break-after: avoid;
    }
}