/* ==========================================================================
   blog.css — 블로그 목록 /ko/blog/ · 글 1편 /ko/blog/multi-device-customer-messaging/ (B6 · DESIGN 8-7 · 8-8 · 4-11)
   - 목록: 거르개 한 줄(<select> 3 + 태그 칩 — 칩은 칸 안에서만 가로로 밀림 · 쪽 가로 넘침 0) · 글자 카드(.tx-post — B0)
           「기능 이야기」 묶음 카드는 분류 끝에 · 개수 · 표지 · 「약 N분 읽기」 0
   - 글: 빵부스러기 → h1 → 날짜 → 운영 MDX 본문(data-src="ops") → 첫 절 뒤 JJSX 플레이어 [시연] → 관련 사용 가이드 → 채팅 줄
   - ≤1023 줄 · 카드 · 글은 오른쪽 84 에서 끝남(채팅 길 3-8) · 머리 b- 만
   ========================================================================== */

/* ═════════════ 목록 ═════════════ */
.b-main { padding: 56px 0 24px; }
.b-head { max-width: 760px; margin: 0 0 32px; }
.b-head h1 { margin: 0; }
.b-lead { margin: 12px 0 0; font-size: 18px; font-weight: 550; line-height: 1.5; letter-spacing: -.01em; color: var(--ink-2); }

/* ── 거르개 ── */
.b-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin: 0 0 28px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.b-sels { display: flex; flex-wrap: wrap; gap: 8px; }
.b-sel {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 0 0 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
}
.b-sel:hover { border-color: var(--ink-2); }
.b-sel:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.b-sel__l { position: relative; top: 1px; flex: none; padding-right: 6px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--ink-3); white-space: nowrap; }
.b-sel select {
  -webkit-appearance: none; appearance: none; height: 100%; margin: 0; padding: 0 38px 0 4px; border: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.2; cursor: pointer;
}
.b-sel select:focus-visible { outline: none; }
.b-sel select:disabled { color: var(--ink-3); cursor: default; }
.b-sel select option { color: #2C3A42; background: #FFFFFF; }
.b-sel__chev { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--ink-2); pointer-events: none; }

.b-tags { display: flex; align-items: center; gap: 10px; flex: 1 1 300px; min-width: 0; }
.b-tags__l { flex: none; font-size: 13px; font-weight: 700; line-height: 1; color: var(--ink-3); }
.b-tags__strip {
  display: flex; gap: 6px; min-width: 0; padding: 5px 3px; margin: -5px 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.b-tag {
  flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: border-color var(--ui-fast) ease-out, color var(--ui-fast) ease-out;
}
.b-tag:hover { border-color: var(--line-strong); color: var(--ink); }
.b-tag[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.b-tag:focus-visible { outline-offset: 1px; }

/* ── 카드 ── */
.b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.b-grid > li { display: flex; min-width: 0; }
.b-grid .tx-post { flex: 1; min-width: 0; }
.b-grid .tx-post__title { margin: 0; word-break: keep-all; text-wrap-style: balance; }
.b-grid .tx-post:hover .tx-post__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.b-none { padding: 44px 24px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-card); }
.b-none__t { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: var(--ink); }

/* ── 기능 이야기(분류 끝 묶음 카드) ── */
.b-feats { margin-top: 72px; }
.b-feats__h { margin: 0 0 18px; font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
.b-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.b-feat {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--sh-1); color: var(--ink);
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
.b-feat:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.b-feat:active { transform: scale(.98); }
.b-feat__t { margin: 0; font-size: 16px; font-weight: 750; line-height: 1.45; word-break: keep-all; }
.b-feat:hover .b-feat__t { text-decoration: underline; text-underline-offset: 3px; }
.b-feat__d { margin: 0; font-size: 14px; font-weight: 450; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }

@media (max-width: 1279.98px) {
  .b-tags { flex-basis: 100%; }
}
@media (max-width: 1023.98px) {
  .b-main { padding-top: 40px; }
  .b-head, .b-filters, .b-grid, .b-none, .b-feats { max-width: calc(100% - var(--lane-cut)); }   /* 채팅 길(3-8) */
  .b-grid, .b-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 600.98px) {
  .b-main { padding-top: 28px; }
  .b-head { margin-bottom: 24px; }
  .b-lead { font-size: 17px; }
  /* 판단: ≤600 은 선택 상자 셋을 한 줄 가로 밀기로(세로 셋이면 첫 화면 절반이 거르개 — 칩 줄과 같은 꼴) · 쪽 가로 넘침 0 */
  .b-filters { gap: 10px; padding: 10px 0 12px; }
  .b-sels { flex-wrap: nowrap; width: 100%; min-width: 0; padding: 6px 6px; margin: -6px -6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .b-sels::-webkit-scrollbar { display: none; }
  .b-sel { flex: none; height: 40px; padding-left: 10px; }
  .b-sel__l { padding-right: 4px; font-size: 12.5px; }
  .b-sel select { padding-right: 28px; font-size: 14.5px; field-sizing: content; }   /* 고른 값 너비만(가장 긴 선택지 너비 0) — 셋째 상자가 끝에서 보임 */
  .b-sel__chev { right: 8px; width: 15px; height: 15px; margin-top: -7.5px; }
  .b-tags { flex-wrap: nowrap; }
  .b-grid, .b-fgrid { grid-template-columns: minmax(0, 1fr); }
  .b-feats { margin-top: 56px; }
  .b-feats__h { font-size: 23px; }
}

/* ═════════════ 글 1편 ═════════════ */
.b-post { padding: 48px 0 24px; }
.b-article { max-width: 760px; }
.b-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 18px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink-3); }
.b-crumb a { color: var(--ink-2); border-radius: 4px; }
.b-crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.b-title { margin: 0; word-break: keep-all; }
.b-meta { margin: 14px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.b-body { margin-top: 40px; color: var(--ink); }
.b-noteline { height: 0; margin-top: 44px; }                      /* 빈 표지(높이 0) — 날짜와 본문 사이 간격 */
.b-noteline + .b-body { margin-top: 0; }
.b-body h2 { margin: 52px 0 14px; font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -.03em; word-break: keep-all; }
.b-body > h2:first-child { margin-top: 0; }
.b-body p { margin: 0 0 18px; }
.b-body a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.b-body a:hover { text-decoration-thickness: 2px; }

.b-demo { margin: 32px 0 40px; }                                  /* 첫 절 뒤 플레이어 [시연] */
.b-demo .tx-player__face:focus-visible { outline: none; }         /* 판단: 겉면 초점 고리를 포스터 위 층으로(videos.css 와 같은 까닭) */
.b-demo .tx-player__face:focus-visible::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--focus), inset 0 0 0 5px var(--surface);
}

.b-tablewrap { margin: 8px 0 28px; }
.b-table {
  width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
  background: var(--surface); border-radius: 14px; box-shadow: var(--sh-1);
  font-size: 15px; line-height: 1.6;
}
.b-table th {
  padding: 12px 16px; text-align: left; vertical-align: bottom; background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 750; line-height: 1.4; color: var(--ink-2); white-space: nowrap;
}
.b-table td { padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--line); word-break: keep-all; }
.b-table tr:last-child td { border-bottom: 0; }
.b-table td:first-child { font-weight: 700; white-space: nowrap; }

.b-links { line-height: 1.9; }
.b-links .b-sep { color: var(--ink-3); }

.b-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px;
  margin: 44px 0 0; padding: 20px 22px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-1); color: var(--ink);
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
.b-cta:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.b-cta:active { transform: scale(.99); }
.b-cta__l { grid-column: 1; margin: 0; font-size: 13px; font-weight: 750; line-height: 1.4; color: var(--accent-ink); }
.b-cta__t { grid-column: 1; margin: 0; font-size: 20px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; }
.b-cta__d { grid-column: 1; margin: 0; font-size: 15px; font-weight: 450; line-height: 1.55; color: var(--ink-2); }
.b-cta__go {
  grid-column: 2; grid-row: 1 / span 3; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: var(--r-btn); background: var(--btn); color: var(--btn-ink); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.b-cta__go svg { width: 15px; height: 15px; }

/* 글 끝 이어서 읽을 글 3장 — 가이드 .g-next 와 같은 값(docs.css) · 카드 = core .tx-next */
.b-next { margin-top: 56px; }
.b-next__h { margin: 0 0 16px; font-size: 20px; font-weight: 750; line-height: 1.4; letter-spacing: -.015em; }
.b-next__card { min-height: 112px; text-decoration: none; }
.b-next__card .b-next__cat { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.b-next__card .b-next__title { font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--ink); word-break: keep-all; }
.b-next__card:hover .b-next__title { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023.98px) { .b-next .tx-next { max-width: none; } }   /* .b-article 이 이미 채팅 길만큼 줄어 있음 — 두 번 빼지 않음 */
.b-help { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.b-help__t { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.b-help__btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-btn);
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink); font-size: 15px; font-weight: 650;
}
.b-help__btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }

@media (max-width: 1023.98px) {
  .b-post { padding-top: 36px; }
  .b-article { max-width: calc(100% - var(--lane-cut)); }          /* 채팅 길(3-8) — 글 줄 · 표 · 플레이어 · 카드 */
}
@media (max-width: 600.98px) {
  .b-post { padding-top: 24px; }
  .b-body, .b-noteline { margin-top: 28px; }
  .b-body h2 { margin-top: 44px; font-size: 22px; }
  .b-cta { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .b-cta__go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
  /* 표 → 줄마다 카드(머리 글자 = 운영 표 머리 · 쪽 가로 넘침 0) */
  .b-table, .b-table tbody, .b-table tr, .b-table td { display: block; width: auto; }
  .b-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .b-table tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .b-table tr:last-child { border-bottom: 0; }
  .b-table td { padding: 0; border: 0; white-space: normal; }
  .b-table td:first-child { margin-bottom: 6px; font-size: 16px; }
  .b-table td + td { margin-top: 6px; }
  .b-table td[data-th]:not(:first-child)::before {
    content: attr(data-th); display: block; margin-bottom: 1px; font-size: 12.5px; font-weight: 700; color: var(--ink-3);
  }
}