/* 블로그 v3 (2026-09-22). 분석: 10_홈페이지기획/10-32_A_토스_채널톡_디자인분석.md
   원칙: 흰 바탕, 선 대신 여백, 테두리 없는 카드(둥근 이미지 + 글자), 검정 농도 세 단계, 금색은 분류 이름에만,
   크기 단계는 44 / 30 / 28 / 20 / 17 / 14, 굵기는 700과 400, 글꼴은 Pretendard 한 가지 */
.bl-body {
  --bl-ink: rgba(28, 25, 22, 0.94); --bl-2: rgba(28, 25, 22, 0.76); --bl-3: rgba(28, 25, 22, 0.58);
  --bl-line: rgba(28, 25, 22, 0.08); --bl-soft: #f1f0ed; --bl-gold: #8a6526;
  --bl-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  background: #fafaf8;
}
.bl { padding-top: var(--header-h); color: var(--bl-ink); font-family: var(--bl-font); letter-spacing: -0.01em; }
.bl h1, .bl h2, .bl h3, .bl p, .bl li, .bl-card__t, .bl-feat__t, .bl-card__s, .bl-feat__s { word-break: keep-all; }
/* 줄바꿈: 문단은 끝줄에 한두 단어만 남지 않게, 제목과 짧은 문구는 줄 길이를 고르게 */
.bl p, .bl li, .bl dd { text-wrap: pretty; }
.bl h1, .bl h2, .bl h3, .bl-art__lead, .bl-quote p, .bl-card__t, .bl-feat__t, .bl-intro h1, .bl-close h2, .bx b, .bx small, .bx-t, .bx-d, .bx-say__q, .bx-sum, .bx-cap, .bx-side__t { text-wrap: balance; }

.bl-wrap { width: 100%; max-width: calc(1180px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.bl-wrap--narrow { max-width: calc(1000px + var(--gutter) * 2); }

/* ---- 블로그 헤더: 흰 바탕 (밝은 페이지와 한 장으로). 어두운 머리 시안은 2026-09-22 되돌림 */
body.bl-body .site-h, body.bl-body:not(:has(#s01)) .site-h { background: rgba(250, 250, 248, 0.94); border-bottom: 1px solid var(--bl-line); }
.bl-body .site-h__brand b, .bl-body .site-h__menu.is-on { color: #1f1d1a; }
.bl-body .site-h__menu { color: rgba(28, 25, 22, 0.71); }
.bl-body .site-h__menu:hover, .bl-body .site-h__ext:hover { color: #1f1d1a; }
.bl-body .site-h__ext { color: rgba(28, 25, 22, 0.61); }
.bl-body .site-h__bar { background: rgba(28, 25, 22, 0.15); }
.bl-body .site-h__tag { color: var(--bl-gold); }
.bl-body .site-h__btn { background: #1f1d1a; color: #fafaf8; }
.bl-body .site-h__btn:hover { background: #333; }

/* ---- 공통 조각 */
.bl-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #0d0c0b; }
.bl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-soft); }
.bl-cat { display: block; font-size: 14px; font-weight: 600; color: var(--bl-gold); }
.bl-meta { display: flex; gap: 10px; font-size: 14px; color: var(--bl-3); }

/* 글 카드: 테두리, 바탕 없이 둥근 이미지 + 아래 글자 */
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.bl-card { display: flex; flex-direction: column; gap: 16px; }
.bl-card:hover .bl-thumb img, .bl-feat:hover .bl-thumb img { transform: scale(1.03); }
.bl-card:hover .bl-card__t, .bl-feat:hover .bl-feat__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.bl-card__body { display: flex; flex-direction: column; gap: 8px; }
.bl-card__t { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 700; letter-spacing: -0.5px; color: var(--bl-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card__s { font-size: 15px; line-height: 1.6; color: var(--bl-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card .bl-meta { margin-top: 2px; }

/* ---- 목록: 왼쪽 분류 메뉴 | 오른쪽 글 */
.bl-listgrid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 56px; padding-top: 56px; padding-bottom: 120px; }
.bl-side { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
.bl-side__t { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; color: var(--bl-ink); margin-bottom: 18px; }
.bl-side__nav { display: grid; gap: 2px; }
.bl-side__a { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 8px; font-size: 15px; color: var(--bl-2); transition: background 160ms, color 160ms; }
.bl-side__a:hover { background: var(--bl-soft); color: var(--bl-ink); }
.bl-side__a.is-on { background: var(--bl-soft); color: var(--bl-ink); font-weight: 700; }
.bl-side__n { font-size: 13px; font-weight: 400; color: var(--bl-3); }
.bl-intro { margin-bottom: 40px; }
.bl-intro h1 { font-size: 30px; line-height: 1.4; font-weight: 700; letter-spacing: -1px; color: var(--bl-ink); }
.bl-intro p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--bl-2); }
/* 대표 글: 큰 이미지 + 오른쪽 제목 */
.bl-feat { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 72px; }
.bl-feat__body { display: flex; flex-direction: column; gap: 12px; }
.bl-feat__t { margin: 0; font-size: 30px; line-height: 1.4; font-weight: 700; letter-spacing: -1px; color: var(--bl-ink); }
.bl-feat__s { font-size: 16px; line-height: 1.6; color: var(--bl-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-sec-t { margin: 0 0 24px; font-size: 24px; line-height: 1.4; font-weight: 700; letter-spacing: -0.5px; color: var(--bl-ink); }
.bl-empty { padding: 80px 0; text-align: center; color: var(--bl-3); }

/* ---- 상세: 700 칼럼이 화면 정가운데, 목차는 왼쪽 여백에 */
.bl-art { padding: 64px var(--gutter) 0; }
.bl-art__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 700px) minmax(0, 1fr); column-gap: 56px; }
.bl-toc { justify-self: end; width: 200px; position: sticky; top: calc(var(--header-h) + 48px); align-self: start; margin-top: 8px; }
.bl-toc p { font-size: 14px; font-weight: 700; color: var(--bl-ink); margin-bottom: 12px; }
.bl-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bl-toc a { display: block; padding: 5px 0; font-size: 14px; line-height: 1.5; color: var(--bl-3); transition: color 160ms; }
.bl-toc a:hover { color: var(--bl-ink); }
.bl-toc a.is-on { color: var(--bl-ink); font-weight: 600; }
.bl-crumb { font-size: 15px; font-weight: 600; color: var(--bl-gold); }
.bl-crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bl-art__head h1 { margin: 12px 0 0; font-size: 44px; line-height: 1.36; font-weight: 700; letter-spacing: -1px; color: var(--bl-ink); }
.bl-art__lead { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--bl-2); }
.bl-byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.bl-byline > span:nth-child(2), .bl-author > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.bl-byline b, .bl-author b { font-size: 15px; font-weight: 600; color: var(--bl-ink); }
.bl-byline small, .bl-author small { font-size: 14px; color: var(--bl-3); }
.bl-byline .bl-meta { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--bl-line); }
.bl-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #1f1d1a; color: #fafaf8; font-size: 14px; font-weight: 700; flex: none; }
.bl-share { margin-left: auto; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--bl-soft); font: inherit; font-size: 14px; font-weight: 600; color: var(--bl-ink); cursor: pointer; transition: background 160ms; }
.bl-share:hover { background: #ebe9e4; }
.bl-art__thumb { margin: 40px 0 0; border-radius: 16px; }

/* 세 줄 요약: 옅은 바탕 한 장 */
.bl-points { margin-top: 48px; padding: 26px 30px; border-radius: 16px; background: var(--bl-soft); scroll-margin-top: calc(var(--header-h) + 24px); }
.bl-points h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--bl-ink); }
.bl-points ol { margin: 0; padding-left: 20px; list-style: decimal; display: grid; gap: 6px; }
.bl-points li { padding-left: 4px; font-size: 16px; line-height: 1.65; color: var(--bl-ink); }
.bl-points li::marker { color: var(--bl-3); font-weight: 600; }

/* 본문: 17px / 1.7 */
.bl-body-text { margin-top: 48px; font-size: 17px; line-height: 1.7; letter-spacing: -0.1px; color: var(--bl-ink); }
.bl-body-text > * + * { margin-top: 24px; }
.bl-body-text p b { font-weight: 700; }
.bl-h2 { margin-top: 72px !important; font-size: 28px; line-height: 1.42; font-weight: 700; letter-spacing: -0.8px; color: var(--bl-ink); scroll-margin-top: calc(var(--header-h) + 24px); }
.bl-h2 + * { margin-top: 16px !important; }
.bl-quote { margin: 40px 0 0 !important; padding: 0; }
.bl-quote p { font-size: 22px; line-height: 1.5; font-weight: 700; letter-spacing: -0.6px; color: var(--bl-ink); }
.bl-quote p::before { content: ''; display: block; width: 32px; height: 2px; margin-bottom: 16px; background: var(--bl-ink); }
.bl-quote + * { margin-top: 40px !important; }
.bl-table { overflow: hidden; border-radius: 12px; background: var(--bl-soft); }
.bl-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.bl-table thead th { padding: 14px 20px; text-align: left; font-size: 14px; font-weight: 700; color: var(--bl-ink); border-bottom: 1px solid var(--bl-line); }
.bl-table tbody th { width: 26%; padding: 14px 20px; text-align: left; font-weight: 600; color: var(--bl-2); }
.bl-table td { padding: 14px 20px; color: var(--bl-2); }
.bl-table td:last-child { font-weight: 700; color: var(--bl-ink); }
.bl-table tbody tr + tr > * { border-top: 1px solid var(--bl-line); }
.bl-checks { margin-left: 0; padding: 0; list-style: none; counter-reset: ck; display: grid; gap: 14px; }
.bl-checks li { position: relative; padding-left: 38px; counter-increment: ck; line-height: 1.7; }
.bl-checks li::before { content: counter(ck); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1f1d1a; color: #fafaf8; font-size: 13px; font-weight: 700; }
.bl-inline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px !important; padding: 24px 28px; border-radius: 16px; background: #1f1d1a; }
.bl-inline + * { margin-top: 48px !important; }
.bl-inline__k { font-size: 13px; font-weight: 600; color: var(--gold); }
.bl-inline__t { margin-top: 4px !important; font-size: 18px; font-weight: 700; line-height: 1.5; color: #fafaf8; }
.bl-inline .btn { flex: none; min-height: 44px; padding: 0 20px; font-size: 14px; }
.bl-faq { display: grid; gap: 28px; }
.bl-faq h3 { font-size: 18px; line-height: 1.5; font-weight: 700; color: var(--bl-ink); }
.bl-faq p { margin-top: 6px; font-size: 16px; line-height: 1.7; color: var(--bl-2); }
.bl-note { font-size: 14px !important; line-height: 1.7; color: var(--bl-3); }
.bl-note a { font-weight: 600; color: var(--bl-ink); text-decoration: underline; text-underline-offset: 3px; }
.bl-author { display: flex; align-items: center; gap: 12px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--bl-line); }

/* 함께 읽으면 좋은 글 */
.bl-related { padding: 120px 0 120px; }
.bl-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.bl-related__head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; color: var(--bl-ink); }
.bl-related__head a { font-size: 15px; font-weight: 600; color: var(--bl-2); }
.bl-related__head a:hover { color: var(--bl-ink); }

/* 마무리 띠 (메인과 이어지는 어두운 띠) */
.bl-close { background: #161513; color: var(--ivory); padding: 80px 0; font-family: var(--bl-font); }
.bl-close__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.bl-close h2 { font-size: 30px; line-height: 1.45; font-weight: 700; letter-spacing: -1px; color: rgba(250, 250, 248, 0.5); }
.bl-close h2 b { font-weight: 700; color: #fafaf8; }
.bl-close__cta { display: flex; gap: 10px; flex: none; }

/* ---- 메인 페이지 블로그 섹션 (어두운 바탕, 같은 카드) */
.bl-home { background-color: #1b1a17; }
.bl-home__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.bl-home__q { font-size: 15px; color: var(--mute); margin-bottom: 12px; }
.bl-home__all { flex: none; padding: 12px 0; font-size: 15px; font-weight: 500; color: var(--gold); }
.bl-home .bl-cat { color: var(--gold); }
.bl-home .bl-card__t { color: var(--ivory); }
.bl-home .bl-card__s { color: #b0aca3; }
.bl-home .bl-meta { color: #85817a; }

/* ---- 태블릿, 모바일 */
@media (max-width: 1180px) {
  .bl-art__grid { grid-template-columns: minmax(0, 700px); justify-content: center; }
  .bl-toc, .bl-art__rail { display: none; }
}
@media (max-width: 960px) {
  .bl-listgrid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; }
  .bl-side { position: static; margin-bottom: 28px; }
  .bl-side__t { display: none; }
  .bl-side__nav { display: flex; gap: 6px; overflow-x: auto; }
  .bl-side__a { flex: none; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--bl-soft); }
  .bl-side__a.is-on { background: #1f1d1a; color: #fafaf8; }
  .bl-side__a.is-on .bl-side__n { color: rgba(250, 250, 248, 0.6); }
  .bl-feat { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 56px; }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bl-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .bl-close__in, .bl-home__head { flex-direction: column; align-items: flex-start; }
  .bl-intro h1 { font-size: 24px; }
  .bl-intro p { font-size: 15px; }
  .bl-intro { margin-bottom: 28px; }
  .bl-feat__t { font-size: 22px; letter-spacing: -0.6px; }
  .bl-feat__s { font-size: 15px; }
  .bl-card__t { font-size: 18px; }
  .bl-art { padding-top: 36px; }
  .bl-art__head h1 { font-size: 28px; letter-spacing: -0.8px; }
  .bl-art__lead { font-size: 16px; }
  .bl-byline { flex-wrap: wrap; row-gap: 10px; }
  .bl-byline .bl-meta { margin-left: 48px; padding-left: 0; border-left: 0; width: 100%; order: 3; }
  .bl-share { order: 2; }
  .bl-art__thumb { margin-top: 28px; border-radius: 12px; }
  .bl-points { margin-top: 32px; padding: 20px 22px; border-radius: 12px; }
  .bl-points li { font-size: 15px; }
  .bl-body-text { margin-top: 36px; font-size: 16px; line-height: 1.7; }
  .bl-h2 { margin-top: 56px !important; font-size: 22px; letter-spacing: -0.6px; }
  .bl-quote p { font-size: 19px; }
  /* 표 → 줄마다 한 장 (옆으로 밀지 않게) */
  .bl-table { background: none; border-radius: 0; overflow: visible; }
  .bl-table table, .bl-table tbody, .bl-table tr, .bl-table th, .bl-table td { display: block; width: auto; }
  .bl-table thead { display: none; }
  .bl-table tbody { display: grid; gap: 10px; }
  .bl-table tbody tr { padding: 16px 18px; border-radius: 12px; background: var(--bl-soft); }
  .bl-table tbody tr + tr > * { border-top: 0; }
  .bl-table tbody th { padding: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--bl-ink); }
  .bl-table td { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 3px 0; font-size: 15px; }
  .bl-table td::before { content: attr(data-label); font-size: 13px; font-weight: 700; color: var(--bl-3); padding-top: 1px; }
  .bl-inline { flex-direction: column; align-items: flex-start; padding: 22px; border-radius: 12px; }
  .bl-faq h3 { font-size: 17px; }
  .bl-faq p { font-size: 15px; }
  .bl-related { padding: 80px 0; }
  .bl-close { padding: 56px 0; }
  .bl-close h2 { font-size: 24px; }
  .bl-close__cta { width: 100%; flex-direction: column; }
  .bl-close__cta .btn { width: 100%; }
}

/* 본문 소제목, 점 목록 */
.bl-h3 { margin-top: 44px !important; font-size: 20px; line-height: 1.5; font-weight: 700; letter-spacing: -0.4px; color: var(--bl-ink); }
.bl-h3 + p { margin-top: 10px !important; }
.bl-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bl-list li { position: relative; padding-left: 20px; line-height: 1.7; }
.bl-list li::before { content: ''; position: absolute; left: 4px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--bl-gold); }

/* 그림 카드 (lib/blog-figs.js): 연한 회색 판 위 카드, 선 아이콘. 글자는 모두 HTML */
.bx { --bx-red: #9a4b41; --bx-red-soft: #f2e3df; --bx-gold-soft: #f5f0e7; margin: 40px 0 0 !important; padding: 32px; border-radius: 20px; background: var(--bl-soft); font-size: 15px; line-height: 1.55; letter-spacing: -0.2px; }
.bx + * { margin-top: 40px !important; }
.bx p, .bx ul, .bx ol { margin: 0; padding: 0; list-style: none; }
.bx svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bx i { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #f1f0ed; color: var(--bl-ink); }
.bx-k { font-size: 13px; font-weight: 600; color: var(--bl-gold); }
.bx-t { margin-top: 4px !important; font-size: 20px; font-weight: 700; line-height: 1.45; letter-spacing: -0.5px; color: var(--bl-ink); }
.bx-t + * { margin-top: 22px !important; }
.bx-n { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--bl-3); font-variant-numeric: tabular-nums; }
.bx-cap { margin-top: 18px; font-size: 14px; color: var(--bl-3); text-align: center; }
.bx-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: #fafaf8; border: 1px solid var(--bl-line); font-size: 13px; font-weight: 600; color: var(--bl-2); }
.bx-chip img { width: 16px; height: 16px; object-fit: contain; }

/* 흐름 (4칸) */
.bx-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bx-flow li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 16px 18px; border-radius: 14px; background: #fafaf8; }
.bx-flow li + li::before { content: ''; position: absolute; left: -12px; top: 42px; width: 12px; height: 1px; background: rgba(28, 25, 22, 0.25); }
.bx-flow li i { margin-bottom: 8px; }
.bx-flow b { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--bl-ink); word-break: keep-all; }
.bx-flow small { font-size: 13px; line-height: 1.5; color: var(--bl-3); word-break: keep-all; }
.bx-flow .is-goal { background: #1f1d1a; }
.bx-flow .is-goal i { background: rgba(250, 250, 248, 0.1); color: #dcc39c; }
.bx-flow .is-goal b { color: #fafaf8; }
.bx-flow .is-goal small, .bx-flow .is-goal .bx-n { color: rgba(250, 250, 248, 0.6); }
.bx-out { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 16px 12px 12px; border-radius: 14px; border: 1px dashed rgba(154, 75, 65, 0.4); color: var(--bl-3); }
.bx-out span { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.bx-out i { width: 36px; height: 36px; background: transparent; color: var(--bl-3); }
.bx-out em { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--bx-red-soft); color: var(--bx-red); font-size: 13px; font-weight: 700; font-style: normal; }

/* 둘 비교 */
.bx-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bx-card { display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 16px; background: #fafaf8; }
.bx-tag { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; color: var(--bl-ink); }
.bx-card.is-gold .bx-tag { color: var(--bl-gold); }
.bx-full { margin-top: 6px !important; font-size: 13px; color: var(--bl-3); }
.bx-meta { display: flex; align-items: center; gap: 10px; margin-top: 22px !important; font-size: 17px; font-weight: 700; color: var(--bl-ink); }
.bx-meta i { width: 38px; height: 38px; }
.bx-card.is-gold .bx-meta i { background: var(--bx-gold-soft); color: var(--bl-gold); }
.bx-d { margin-top: 10px !important; font-size: 15px; line-height: 1.6; color: var(--bl-2); word-break: keep-all; }
.bx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto !important; padding-top: 18px; }
.bx-sum { margin-top: 16px !important; font-size: 15px; font-weight: 600; text-align: center; color: var(--bl-2); }

/* 막힌 조건 (빨강) */
.bx-block { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bx-block li { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; border-radius: 14px; background: #fafaf8; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--bl-ink); word-break: keep-all; }
.bx-block i { background: var(--bx-red-soft); color: var(--bx-red); }
.bx-arrow { position: relative; width: 1px; height: 28px; margin: 6px auto; background: rgba(28, 25, 22, 0.25); }
.bx-arrow::after { content: ''; position: absolute; left: -3px; bottom: 0; width: 7px; height: 7px; border-right: 1px solid rgba(28, 25, 22, 0.4); border-bottom: 1px solid rgba(28, 25, 22, 0.4); transform: rotate(45deg); }
.bx-res { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 16px; border-radius: 14px; background: #fafaf8; font-size: 15px; font-weight: 700; color: var(--bl-ink); text-align: center; }
.bx-res > span { display: flex; gap: 6px; opacity: 0.55; filter: grayscale(1); }

/* 항목 그리드 (3칸) */
.bx-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bx-grid3 li { display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; border-radius: 14px; background: #fafaf8; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--bl-ink); word-break: keep-all; }
.bx-grid3 li i { margin-bottom: 8px; background: var(--bx-gold-soft); color: var(--bl-gold); }

/* 비슷한 블로그 글 */
.bx-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bx-posts li { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 16px; border-radius: 14px; background: #fafaf8; }
.bx-post__img { aspect-ratio: 16 / 10; border-radius: 9px; background: linear-gradient(135deg, #e6e4df, #dcd9d3); }
.bx-posts b { padding: 0 4px; font-size: 15px; line-height: 1.45; color: var(--bl-ink); word-break: keep-all; }
.bx-post__by { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 12px; color: var(--bl-3); }
.bx-blur { padding: 1px 6px; border-radius: 4px; background: #1f1d1a; color: #1f1d1a; font-size: 11px; user-select: none; }

/* 환자의 질문 (말풍선) */
.bx-bubbles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bx-bubbles li { position: relative; padding: 14px 16px 14px 44px; border-radius: 14px 14px 14px 4px; background: #fafaf8; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--bl-ink); word-break: keep-all; }
.bx-bubbles li::before { content: 'Q'; position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bx-gold-soft); color: var(--bl-gold); font-size: 11px; font-weight: 800; }

/* 글의 순서 */
.bx-stack { display: grid; gap: 8px; }
.bx-stack li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; background: #fafaf8; font-size: 15px; }
.bx-stack li > span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #f1f0ed; font-size: 13px; font-weight: 700; color: var(--bl-ink); }
.bx-stack li > span svg { width: 15px; height: 15px; }
.bx-stack b { font-weight: 700; color: var(--bl-ink); }
.bx-stack small { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--bx-gold-soft); font-size: 12px; font-weight: 700; color: var(--bl-gold); white-space: nowrap; }
.bx-stack .is-skip { background: transparent; border: 1px dashed rgba(28, 25, 22, 0.18); color: var(--bl-3); text-decoration: line-through; text-decoration-color: rgba(154, 75, 65, 0.6); }
.bx-stack .is-skip > span { background: var(--bx-red-soft); color: var(--bx-red); }
.bx-stack .is-1 { background: #1f1d1a; }
.bx-stack .is-1 > span { background: #dcc39c; color: #1f1d1a; }
.bx-stack .is-1 b { color: #fafaf8; }
.bx-stack .is-1 small { background: rgba(220, 195, 156, 0.16); color: #dcc39c; }
.bx-stack .is-2 { margin-left: 24px; }
.bx-stack .is-3 { margin-left: 48px; }

/* 4단계 */
.bx-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bx-grid4 li { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 18px; border-radius: 14px; background: #fafaf8; }
.bx-grid4 b { font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--bl-ink); word-break: keep-all; }
.bx-grid4 em { align-self: flex-start; margin-top: auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; font-style: normal; }
.bx-grid4 .is-seo { background: #e8e6e1; color: var(--bl-ink); }
.bx-grid4 .is-both { background: #1f1d1a; color: #dcc39c; }
.bx-grid4 .is-geo { background: var(--bx-gold-soft); color: var(--bl-gold); }
.bx-grid4 .is-visit { background: #e3ebe4; color: #3f5f48; }

/* 하나의 원문 */
.bx-hub { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 12px; align-items: stretch; }
.bx-hub__core { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px; border-radius: 16px; background: #1f1d1a; }
.bx-hub__core i { background: rgba(250, 250, 248, 0.1); color: #dcc39c; }
.bx-hub__core b { font-size: 19px; line-height: 1.45; color: #fafaf8; }
.bx-hub ul { display: grid; gap: 8px; }
.bx-hub li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #fafaf8; }
.bx-hub li i { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--bx-gold-soft); color: var(--bl-gold); }
.bx-hub li i svg { width: 16px; height: 16px; }
.bx-hub li b { font-size: 15px; color: var(--bl-ink); }
.bx-hub li small { font-size: 13px; color: var(--bl-3); }

/* 어두운 판 */
.bx.is-dark, .bx-path { background: #1b1a17; }
.bx.is-dark .bx-k, .bx-path .bx-k { color: #dcc39c; }
.bx.is-dark .bx-t, .bx-path .bx-t { color: #efede6; }
.bx-flow.is-dark li { background: #221f1c; }
.bx-flow.is-dark li + li::before { background: rgba(239, 237, 230, 0.2); }
.bx-flow.is-dark i { background: rgba(239, 237, 230, 0.06); color: #efede6; }
.bx-flow.is-dark b { color: #efede6; }
.bx-flow.is-dark .bx-n { color: rgba(239, 237, 230, 0.45); }
.bx-flow.is-dark .is-goal { background: #dcc39c; }
.bx-flow.is-dark .is-goal i { background: rgba(31, 29, 26, 0.1); color: #1f1d1a; }
.bx-flow.is-dark .is-goal b { color: #1f1d1a; }
.bx-flow.is-dark .is-goal .bx-n { color: rgba(31, 29, 26, 0.55); }

@media (max-width: 640px) {
  .bx { margin-top: 32px !important; padding: 22px 16px; border-radius: 16px; font-size: 14px; }
  .bx + * { margin-top: 32px !important; }
  .bx-t { font-size: 18px; }
  /* 짧은 문단은 줄 길이를 고르게 나눠서 한 구절이 잘리지 않게 */
  .bl-body-text p, .bl-points li, .bl-checks li, .bl-list li, .bl-faq p, .bl-faq h3, .bl-note { text-wrap: balance; }
  .bx-flow, .bx-grid4 { grid-template-columns: 1fr; gap: 8px; }
  .bx-flow li + li::before { display: none; }
  .bx-flow li, .bx-grid4 li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 2px; padding: 12px 14px; }
  .bx-flow li i, .bx-grid4 li i { grid-row: 1 / span 3; margin: 0; }
  .bx-flow li .bx-n, .bx-grid4 li .bx-n { grid-column: 2; }
  .bx-flow li b, .bx-flow li small, .bx-grid4 li b { grid-column: 2; }
  .bx-grid4 li em { grid-column: 2; margin-top: 6px; }
  .bx i { width: 38px; height: 38px; border-radius: 10px; }
  .bx-out { flex-direction: column; align-items: flex-start; padding: 12px 14px; }
  .bx-out i { display: none; }
  .bx-2, .bx-hub { grid-template-columns: 1fr; }
  .bx-tag { font-size: 26px; }
  .bx-block, .bx-grid3 { grid-template-columns: 1fr; gap: 8px; }
  .bx-block li { flex-direction: row; align-items: center; gap: 14px; padding: 14px; }
  .bx-grid3 li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 2px; padding: 14px; }
  .bx-grid3 li i { grid-row: span 2; margin: 0; }
  .bx-posts { grid-template-columns: 1fr; gap: 8px; }
  .bx-posts li { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; row-gap: 4px; align-items: center; padding: 10px; }
  .bx-post__img { grid-row: span 2; aspect-ratio: 1; }
  .bx-posts b, .bx-post__by { padding: 0; }
  .bx-bubbles { grid-template-columns: 1fr; }
  .bx-stack li { padding: 12px 14px; }
  .bx-stack .is-2 { margin-left: 12px; }
  .bx-stack .is-3 { margin-left: 24px; }
}

/* 그림 카드 2차: 공용 변형과 글 전용 카드 */
.bx .bx-res { padding: 16px; }
.bx .bx-k + ul, .bx .bx-k + ol, .bx .bx-k + div { margin-top: 16px; }
.bx .bx-match { padding: 14px 16px; }
.bx .bx-stat__x { padding: 8px 14px; }
.bx .bx-stat__note { padding-top: 16px; }
.bx .bx-side__tag { padding-top: 16px; }
.bx-flowfig.is-3 .bx-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-grid3.is-2 { grid-template-columns: 1fr 1fr; }
.bx-grid3.is-2 li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
.bx-grid3.is-2 li i { grid-row: span 2; margin: 0; }
.bx-gridfig.is-ok .bx-grid3 li i { background: #e3ebe4; color: #3f5f48; }
.bx-gridfig.is-ok .bx-k { color: #3f5f48; }
.bx-gridfig.is-red .bx-grid3 li i { background: var(--bx-red-soft); color: var(--bx-red); }
.bx-grid4.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bx-grid4.is-5 li { padding: 18px 14px; }
.bx-grid4.is-5 b { font-size: 15px; }
.bx-steps .bx-grid4 li i { background: #f1f0ed; }

/* 둘 비교 (목록형) */
.bx-side { display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 16px; background: #fafaf8; }
.bx-side__k { font-size: 13px; font-weight: 700; color: var(--bl-3); }
.bx-side.is-gold .bx-side__k { color: var(--bl-gold); }
.bx-side.is-red .bx-side__k { color: var(--bx-red); }
.bx-side__t { margin-top: 4px !important; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--bl-ink); word-break: keep-all; }
.bx-side ul { display: grid; gap: 8px; margin-top: 16px !important; }
.bx-side li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--bl-2); word-break: keep-all; }
.bx-side li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.bx-side.is-gold li svg { color: var(--bl-gold); }
.bx-side.is-red li svg { color: var(--bx-red); }
.bx-side.is-mute li > span { flex: none; width: 6px; height: 6px; margin: 8px 6px 0; border-radius: 50%; background: rgba(28, 25, 22, 0.25); }
.bx-side.is-mute { background: transparent; border: 1px dashed rgba(28, 25, 22, 0.16); }
.bx-side.is-mute li { color: var(--bl-3); }
.bx-side.is-gold { box-shadow: inset 0 0 0 1px rgba(138, 101, 38, 0.22); }
.bx-side__tag { margin-top: auto !important; padding-top: 16px; font-size: 13px; font-weight: 600; color: var(--bl-3); }

/* 조심할 말 */
.bx-xlist { display: grid; gap: 8px; }
.bx-xlist li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; background: #fafaf8; font-size: 15px; font-weight: 600; color: var(--bl-2); text-decoration: line-through; text-decoration-color: rgba(154, 75, 65, 0.55); text-decoration-thickness: 1.5px; }
.bx-xlist li > span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--bx-red-soft); color: var(--bx-red); }
.bx-xlist li > span svg { width: 15px; height: 15px; }

/* 신입 상담 직원 */
.bx-staff__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bx-chat { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px 20px; border-radius: 16px; background: #fafaf8; }
.bx-chat p { max-width: 92%; padding: 12px 14px; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.5; word-break: keep-all; }
.bx-chat p span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; opacity: 0.6; }
.bx-chat__q { align-self: flex-start; border-bottom-left-radius: 4px; background: #f1f0ed; color: var(--bl-ink); }
.bx-chat__a { align-self: flex-end; border-bottom-right-radius: 4px; background: #1f1d1a; color: #efede6; }
.bx-miss { display: grid; gap: 8px; }
.bx-miss li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fafaf8; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--bl-ink); word-break: keep-all; }
.bx-miss i { width: 36px; height: 36px; border-radius: 10px; background: var(--bx-red-soft); color: var(--bx-red); }
.bx-miss i svg { width: 19px; height: 19px; }

/* 두 문장 비교 */
.bx-versus .bx-k + .bx-2 { margin-top: 16px; }
.bx-say { display: flex; flex-direction: column; padding: 22px; border-radius: 16px; background: #fafaf8; }
.bx-say__q { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--bl-ink); word-break: keep-all; }
.bx-say.is-mute { background: transparent; border: 1px dashed rgba(28, 25, 22, 0.16); }
.bx-say.is-mute .bx-say__q { color: var(--bl-3); font-weight: 600; }
.bx-say.is-gold { box-shadow: inset 0 0 0 1px rgba(138, 101, 38, 0.22); }
.bx-say__tag { display: flex; align-items: center; gap: 6px; margin-top: 16px !important; font-size: 13px; font-weight: 700; color: var(--bx-red); }
.bx-say.is-gold .bx-say__tag { color: var(--bl-gold); }
.bx-say__tag svg { width: 16px; height: 16px; }
.bx-say ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
.bx-say ul li { padding: 5px 10px; border-radius: 999px; background: var(--bx-gold-soft); font-size: 12.5px; font-weight: 600; color: var(--bl-gold); }

/* 같은 병원, 다른 정보 */
.bx-mis { display: grid; gap: 8px; }
.bx-mis li { display: grid; grid-template-columns: 88px 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #fafaf8; }
.bx-mis__k { font-size: 13px; font-weight: 700; color: var(--bl-3); }
.bx-mis__a { font-size: 15px; font-weight: 700; color: var(--bl-ink); word-break: keep-all; }
.bx-mis__a small { display: block; font-size: 12px; font-weight: 500; color: var(--bl-3); }
.bx-mis__a.is-wide { grid-column: span 3; color: var(--bx-red); }
.bx-mis__ne { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bx-red-soft); color: var(--bx-red); font-size: 16px; font-weight: 700; }
.bx-mis li:first-child .bx-mis__a:last-child { color: var(--bx-red); }
.bx-match { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px !important; padding: 14px 16px; border-radius: 12px; background: #e3ebe4; }
.bx-match b { width: 100%; margin-bottom: 4px; font-size: 13px; color: #3f5f48; }
.bx-match span { padding: 5px 10px; border-radius: 999px; background: #fafaf8; font-size: 13px; font-weight: 600; color: #3f5f48; }

/* 결과 숫자 */
.bx-stat__row { display: flex; align-items: center; gap: 28px; }
.bx-stat__k { font-size: 14px; font-weight: 600; color: rgba(239, 237, 230, 0.6); }
.bx-stat__k small { margin-left: 6px; font-size: 12px; font-weight: 500; color: rgba(239, 237, 230, 0.4); }
.bx-stat__v { margin-top: 6px !important; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; color: rgba(239, 237, 230, 0.55); font-variant-numeric: tabular-nums; }
.bx-stat__v small { margin-left: 4px; font-size: 20px; font-weight: 600; letter-spacing: 0; }
.bx-stat__row .is-on .bx-stat__v { color: #dcc39c; }
.bx-stat__row .is-on .bx-stat__k { color: #efede6; }
.bx-stat__arr { font-size: 28px; color: rgba(239, 237, 230, 0.35); }
.bx-stat__x { margin-left: auto !important; padding: 8px 14px; border-radius: 999px; background: rgba(220, 195, 156, 0.14); font-size: 15px; font-weight: 700; color: #dcc39c; }
.bx-stat__note { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid rgba(239, 237, 230, 0.1); font-size: 13px; color: rgba(239, 237, 230, 0.5); }

/* 질문의 세 단계 */
.bx-stages .bx-k + .bx-stg { margin-top: 16px; }
.bx-stg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bx-stg li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; border-radius: 14px; background: #fafaf8; }
.bx-stg b { font-size: 18px; font-weight: 700; color: var(--bl-ink); }
.bx-stg small { font-size: 13.5px; line-height: 1.5; color: var(--bl-2); word-break: keep-all; }
.bx-stg em { align-self: flex-start; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: #1f1d1a; color: #dcc39c; font-size: 12px; font-weight: 700; font-style: normal; }
.bx-stg em.is-mute { background: #e8e6e1; color: var(--bl-3); }
.bx-stg li.is-on { box-shadow: inset 0 0 0 1.5px #1f1d1a; }

@media (max-width: 640px) {
  .bx-flowfig.is-3 .bx-flow { grid-template-columns: 1fr; }
  .bx-grid3.is-2 { grid-template-columns: 1fr; gap: 8px; }
  .bx-grid4.is-5 { grid-template-columns: 1fr; gap: 8px; }
  .bx-grid4.is-5 li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 12px 14px; }
  .bx-grid4.is-5 li .bx-n { grid-column: 2; }
  .bx-grid4.is-5 li i { grid-row: 1 / span 2; grid-column: 1; }
  .bx-grid4.is-5 li b { grid-column: 2; }
  .bx-staff__grid { grid-template-columns: 1fr; }
  .bx-xlist li { padding: 12px 14px; font-size: 14px; }
  .bx-mis li { grid-template-columns: 1fr auto 1fr; row-gap: 6px; }
  .bx-mis__k { grid-column: 1 / -1; }
  .bx-mis__a.is-wide { grid-column: 1 / -1; }
  .bx-stat__row { flex-wrap: wrap; gap: 16px 20px; }
  .bx-stat__v { font-size: 44px; }
  .bx-stat__x { margin-left: 0 !important; }
  .bx-stg { grid-template-columns: 1fr; gap: 8px; }
}