/* guide.css — 자격증 가이드(/guide 와 하위 9장) 공통 화면 체계
 *
 * ⚠️ 모든 규칙은 가이드 뿌리 요소(.mbg) 안으로 가둔다. html·body·#header·#footer 를 건드리는 규칙을
 *    여기에 쓰지 않는다 — 사이트 공통 머리·바닥은 어두운 테마 그대로 둔다.
 * ⚠️ 사이트는 휴대폰 폭에서 html 글자 크기를 4～10px 로 바꾼다(layout.css). 그래서 가이드 안에서는
 *    rem 을 쓰지 않고 px 로 고정한다. 예외는 머리 띠 높이(사이트 머리 높이 14.4rem 을 그대로 따라감) 하나.
 * ⚠️ 밝은 테마 한 벌만 쓴다(사장님 요청). 사이트가 운영체제 다크 모드를 따르지 않으므로 다크 변형을 두지 않고,
 *    모든 배경·글자색을 아래 토큰으로 직접 칠한다.
 */

.mbg {
  /* 표면 */
  --mbg-bg: #ffffff;
  --mbg-alt: #f4f5f7;
  --mbg-card: #f4f5f7;
  --mbg-card-hover: #eceef1;
  --mbg-line: #e2e5e9;
  /* 글자 */
  --mbg-ink: #121417;
  --mbg-ink-2: #434951;
  --mbg-ink-3: #636a72;
  /* 강조 — 매직바디 주황 계열 하나만 쓴다 */
  --mbg-brand: #ff7a1a;
  --mbg-brand-ink: #c2410c;
  --mbg-brand-soft: #fff1e6;
  /* 일러스트 바탕 — 그림 파일의 바탕색과 같은 값(일러스트 명세와 맞춰 둠) */
  /* v3 스타일 카드 바탕색(명세 guide-*-v3.txt · guide-ch-*.txt 와 같은 값). 그림을 불러오면 칸 색은 그림이 가진
     바탕색으로 다시 맞춰지므로(GuideIllust) 아래 값은 그림이 오기 전 자리 색이다. */
  --mbg-tile-lavender: #c9bfff;
  --mbg-tile-sky: #79d7ff;
  --mbg-tile-mint: #86e3b0;
  --mbg-tile-lemon: #ffe372;
  --mbg-tile-tangerine: #ffc79c;
  --mbg-tile-pink: #ffb8dc;
  --mbg-tile-blue: #8fb2ff;
  /* 허브 첫 화면 색 띠(화면 폭 전체) 바탕 — v10 허브가 쓰는 값이다(v10 그림은 배경이 투명 PNG 라 어느 색으로 바꿔도 그림 둘레에 네모가 생기지 않는다).
     v9 허브는 노란 바탕이 그려진 그림(guide-hub-hero-v9.png · 255,255,0)이라 아래 .mbg-hubhero--v9 가 #FFFF00 으로 따로 고정한다 — 이 줄을 바꿔도 v9 띠는 그대로다. */
  --mbg-hub-band: #d8ffbb;
  /* 편집 표시 — 「확인 필요」 칩 전용. 브랜드 강조색과 섞지 않는다 */
  --mbg-check-bg: #fff5da;
  --mbg-check-ink: #6f4b00;
  --mbg-check-line: #e3b23c;
  /* 모서리 — 위계별 3단(버튼·칩은 알약형, 카드는 큰 곡률) */
  --mbg-r-sm: 12px;
  --mbg-r-md: 16px;
  --mbg-r-lg: 24px;
  --mbg-r-pill: 999px;
  /* 틀 */
  --mbg-max: 1120px;
  --mbg-gut: 20px;
  --mbg-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  color-scheme: light;
  background-color: var(--mbg-bg);
  color: var(--mbg-ink);
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
@media (min-width: 768px) {
  .mbg { --mbg-gut: 32px; }
}
@media (min-width: 1024px) {
  .mbg { --mbg-gut: 40px; font-size: 18px; }
}

/* ── 사이트 기본값 되돌리기(가이드 안에서만) ─────────────────────
   :where() 로 감싸 우선순위를 0 으로 둔다 — 아래 .mbg-h1 같은 부품 규칙이 항상 이긴다.
   (사이트 base.css 의 h1·table 등은 요소 선택자라 .mbg 를 붙인 이 규칙이 이긴다.) */
.mbg *, .mbg *::before, .mbg *::after { box-sizing: border-box; }
.mbg :where(h1, h2, h3, h4, p, ol, ul, li, dl, dd, dt, figure, table, th, td) {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.mbg :where(ol, ul) { list-style: none; }
.mbg :where(a) { color: inherit; text-decoration: none; }
.mbg :where(img) { display: block; max-width: 100%; }
/* 사이트 base.css 의 a:link·a:visited·a:hover{color:#fff}(우선순위 0,1,1)를 이기도록
   링크 부품의 글자색은 .mbg 를 앞에 붙여(0,2,0) 정한다. 새 링크 부품을 만들면 여기에 더한다. */
.mbg .mbg-crumb a { color: var(--mbg-ink-3); }
.mbg .mbg-toc__link, .mbg .mbg-chip, .mbg .mbg-course, .mbg .mbg-chapter, .mbg .mbg-nav a { color: var(--mbg-ink); }
.mbg a:focus-visible, .mbg button:focus-visible {
  outline: 3px solid var(--mbg-brand-ink);
  outline-offset: 3px;
  border-radius: var(--mbg-r-sm);
}
.mbg .mbg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 사이트 머리 뒤 띠 ───────────────────────────────────────
   사이트 머리(메뉴 바)는 처음에 투명이다. 밝은 바탕이 그 밑으로 들어가면 흰 메뉴 글자가 사라지므로
   머리 높이만큼은 사이트 원래 어두운 바탕을 그대로 깐다. */
.mbg-band { height: 120px; background-color: #0e0e0d; }
@media (max-width: 950px) {
  .mbg-band { height: 14.4rem; }
}

/* ── 틀 ───────────────────────────────────────────────────── */
.mbg-wrap { width: 100%; max-width: calc(var(--mbg-max) + var(--mbg-gut) * 2); margin: 0 auto; padding: 0 var(--mbg-gut); }
.mbg-sec { padding: 64px 0; background-color: var(--mbg-bg); }
.mbg-sec--alt { background-color: var(--mbg-alt); }
.mbg-sec--alt { --mbg-card: #ffffff; --mbg-card-hover: #fafbfc; --mbg-line: #e2e5e9; }
.mbg-sec--tight-top { padding-top: 0; }
@media (min-width: 1024px) {
  .mbg-sec { padding: 112px 0; }
  .mbg-sec--tight-top { padding-top: 0; }
}

/* ── 글자 위계 ─────────────────────────────────────────────── */
.mbg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mbg-ink-3);
}
.mbg-h1 {
  font-size: 30px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--mbg-ink);
}
.mbg-h1__sub { display: block; color: var(--mbg-ink-3); font-weight: 650; }
.mbg-h2 {
  font-size: 25px;
  font-weight: 750;
  line-height: 1.38;
  letter-spacing: -0.025em;
  color: var(--mbg-ink);
}
.mbg-h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--mbg-ink);
}
.mbg-lead {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--mbg-ink);
}
.mbg-text { font-size: 16px; line-height: 1.8; color: var(--mbg-ink-2); }
.mbg-note { font-size: 14px; line-height: 1.7; color: var(--mbg-ink-3); }
@media (min-width: 768px) {
  .mbg-h1 { font-size: 40px; }
  .mbg-h2 { font-size: 30px; }
  .mbg-h3 { font-size: 20px; }
  .mbg-lead { font-size: 19px; }
  .mbg-text { font-size: 17px; }
}
@media (min-width: 1024px) {
  .mbg-h1 { font-size: 54px; line-height: 1.26; }
  .mbg-h2 { font-size: 36px; }
  .mbg-h3 { font-size: 21px; }
  .mbg-lead { font-size: 20px; }
  .mbg-text { font-size: 17px; }
  .mbg-note { font-size: 15px; }
}

/* 제목은 줄 길이를 고르게 나눠 마지막 줄에 한 낱말만 남지 않게, 본문은 마지막 줄 외톨이만 막는다
   (지원하지 않는 브라우저는 평소처럼 줄을 바꾼다) */
.mbg-h1, .mbg-h2, .mbg-h3, .mbg-toc__title, .mbg-next__text, .mbg-table__name, .mbg-course { text-wrap: balance; }
.mbg-lead, .mbg-text, .mbg-summary__text, .mbg-note, .mbg-checklist li, .mbg-nav__menu .mbg-nav__text { text-wrap: pretty; }
/* 표 칸(휴대폰 카드 칸 포함)도 끝줄에 한두 글자만 남지 않게(검수 N3) */
.mbg-gtable th, .mbg-gtable td, .mbg-table th, .mbg-table td, .mbg-table__kind, .mbg-table__pro, .mbg-table__con, .mbg-table__check, .mbg-table__src-text { text-wrap: pretty; }
/* 휴대폰 표 카드 칸은 짧은 글이 2～3줄이라 줄 길이를 고르게 나눈다 — 묶음(가운뎃점 낱말) 뒤에 한 낱말만 내려오는 것을 막는다 */
@media (max-width: 899px) { .mbg-gtable tbody td { text-wrap: balance; } } /* 작은 안내 글·순서 목록도 끝줄 외톨이를 막는다(검수 V13·V15) */
/* 제목용 줄바꿈 덩어리(GuideNb phrase) — 한 줄에 들어가면 통째로 옮기고, 한 줄보다 길 때만 안에서 줄이 바뀐다 */
.mbg-ph { display: inline-block; max-width: 100%; }

/* ── 위치 표시 ─────────────────────────────────────────────── */
.mbg-crumb { padding-top: 28px; }
.mbg-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--mbg-ink-3); }
.mbg-crumb li { display: inline-flex; align-items: center; gap: 6px; }
.mbg-crumb a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; transition: color 0.2s ease; }
.mbg .mbg-crumb a:hover { color: var(--mbg-ink); }
.mbg-crumb svg { width: 14px; height: 14px; color: #a6acb3; }
.mbg-crumb [aria-current="page"] { color: var(--mbg-ink); font-weight: 600; }
@media (min-width: 1024px) { .mbg-crumb { padding-top: 40px; } }

/* ── 첫 화면 ───────────────────────────────────────────────── */
.mbg-hero { padding: 28px 0 56px; }
.mbg-hero__title { max-width: 920px; }
.mbg-hero__intro { max-width: 680px; margin-top: 20px; color: var(--mbg-ink-2); }
.mbg-hero__art { margin-top: 32px; }
@media (min-width: 1024px) {
  .mbg-hero { padding: 36px 0 96px; }
  .mbg-hero__intro { margin-top: 28px; }
  .mbg-hero__art { margin-top: 56px; }
}
/* 첫 화면 등장 — 스크립트 없이 CSS 만으로 돈다(글은 처음부터 문서 안에 있다) */
@media (prefers-reduced-motion: no-preference) {
  .mbg-hero [data-hero] { animation: mbg-rise 0.9s var(--mbg-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
}
@keyframes mbg-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}

/* ── 일러스트 칸 ───────────────────────────────────────────── */
.mbg-art {
  position: relative;
  overflow: hidden;
  border-radius: var(--mbg-r-lg);
  background-color: var(--mbg-tile, var(--mbg-tile-lavender));
  aspect-ratio: 3 / 2;
  isolation: isolate;
}
.mbg-art--square { aspect-ratio: 1 / 1; }
/* 첫 화면 무대 — 그림을 잰 뒤에는 GuideIllust 가 물건 비율에 맞춰 칸 비율을 정한다(휴대폰 1.6～2.2 · 넓은 화면 2.2～3.4).
   아래 값은 재기 전 자리(무리 지은 구도 guide-hero-v2 의 예상 비율)라 그림이 들어와도 칸이 거의 흔들리지 않는다. */
.mbg-art--wide { aspect-ratio: 16 / 9; }
@media (min-width: 768px) { .mbg-art--wide { aspect-ratio: 11 / 5; } }
.mbg-art img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.6s var(--mbg-ease), opacity 0.45s ease; }
.mbg-art img.is-waiting { opacity: 0; }
/* 바탕색이 같은 색면 위에 바로 놓는 칸 — 둥근 테두리 칸을 한 겹 더 만들지 않는다 */
.mbg-art--bare { border-radius: 0 !important; background-color: transparent; }
.mbg-art__empty {
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(18, 20, 23, 0.18);
  border-radius: calc(var(--mbg-r-lg) - 8px);
  font-size: 14px;
  font-weight: 600;
  color: rgba(18, 20, 23, 0.45);
}
@media (hover: hover) {
  .mbg-art:hover img { transform: scale(1.03); }
}
@media (max-width: 767px) { .mbg-art { border-radius: var(--mbg-r-md); } }

/* ── 카드 ─────────────────────────────────────────────────── */
.mbg-card {
  background-color: var(--mbg-card);
  border-radius: var(--mbg-r-md);
  padding: 24px;
}
@media (min-width: 1024px) {
  .mbg-card { border-radius: var(--mbg-r-lg); padding: 36px 36px 40px; }
}

/* 요약 */
.mbg-summary { position: relative; }
.mbg-summary .mbg-eyebrow { color: var(--mbg-brand-ink); }
.mbg-summary__text { margin-top: 14px; font-size: 17px; font-weight: 500; line-height: 1.85; color: var(--mbg-ink); } /* 카드 폭을 다 쓴다(글씨폭 v3) */
@media (min-width: 1024px) {
  .mbg-summary { padding: 48px 56px 52px; }
  .mbg-summary__text { margin-top: 18px; font-size: 21px; line-height: 1.8; letter-spacing: -0.01em; }
}

/* ── 목차 ─────────────────────────────────────────────────── */
.mbg-toc { margin-top: 48px; }
.mbg-toc__list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.mbg-toc__link {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  min-height: 84px; /* 두 줄 제목 높이에 맞춰 한 줄·두 줄 카드 높이를 같게 */
  padding: 18px 20px;
  border-radius: var(--mbg-r-md);
  background-color: var(--mbg-card);
  transition: transform 0.35s var(--mbg-ease), background-color 0.25s ease;
}
.mbg-toc__no { flex: none; width: 28px; font-size: 15px; font-weight: 700; color: var(--mbg-brand-ink); font-variant-numeric: tabular-nums; }
.mbg-toc__title { flex: 1; font-size: 16px; font-weight: 650; line-height: 1.5; color: var(--mbg-ink); }
.mbg-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mbg-r-pill);
  background-color: var(--mbg-alt);
  color: var(--mbg-ink);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s var(--mbg-ease);
}
.mbg-sec--alt .mbg-arrow { background-color: #f1f2f4; }
.mbg-arrow svg { width: 16px; height: 16px; }
/* 칸 폭은 항목 수로 정한다(GuideToc spans · 검수 V6) — 12칸 격자에서 카드마다 --span-md/--span-lg 칸을 쓴다.
   넓은 화면: 2 → 2 · 4 → 2+2 · 5 → 3+2 · 7 → 4+3 처럼 줄마다 고르게 차고 마지막 줄 옆이 비지 않는다. */
@media (min-width: 768px) {
  .mbg-toc__list { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
  .mbg-toc__list > li { grid-column: span var(--span-md, 6); }
}
@media (min-width: 1024px) {
  .mbg-toc { margin-top: 64px; }
  .mbg-toc__list { gap: 16px; margin-top: 20px; }
  .mbg-toc__list > li { grid-column: span var(--span-lg, 4); }
  .mbg-toc__link { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 28px; min-height: 176px; padding: 26px 26px 24px; border-radius: var(--mbg-r-lg); }
  .mbg-toc__title { font-size: 19px; line-height: 1.45; letter-spacing: -0.015em; }
  .mbg-toc__foot { display: flex; width: 100%; align-items: flex-end; justify-content: space-between; gap: 16px; }
}
@media (max-width: 1023px) {
  .mbg-toc__foot { display: contents; }
}
@media (hover: hover) {
  .mbg-toc__link:hover { transform: translate3d(0, -4px, 0); }
  .mbg-toc__link:hover .mbg-arrow { background-color: var(--mbg-ink); color: #fff; transform: translate3d(3px, 0, 0); }
}

/* ── 구역 머리(H2 + 핵심 단락) ─────────────────────────────── */
.mbg-head { display: grid; gap: 28px; }
/* 구역 머리는 본문 폭을 다 쓴다 — 오른쪽을 이유 없이 비우지 않는다(글씨폭 v3) */
.mbg-head__body > .mbg-lead { margin-top: 18px; }
.mbg-head__body > .mbg-note { margin-top: 14px; }
.mbg-head__body > .mbg-head__flow { margin-top: 24px; }
@media (min-width: 1024px) {
  .mbg-head--art { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 64px; align-items: center; }
  .mbg-head__body > .mbg-lead { margin-top: 24px; }
  .mbg-head__body > .mbg-head__flow { margin-top: 28px; }
  /* 제목·본문 두 칸(자주 묻는 질문 카드와 같은 5:7 · 간격 56px) — 그림 없는 구역에서 오른쪽에 둘 글이 있으면
     번호·H2 는 왼쪽 칸에서 사이트 머리 아래를 따라 내려오고, 핵심 단락과 이어지는 글은 오른쪽 칸에 둔다(검수 N1).
     제목이 오른쪽 글보다 길면 GuideSection 이 is-stack 을 붙여 위아래 한 칸으로 둔다(검수 N2). */
  .mbg-head:not(.mbg-head--art) .mbg-head__text.has-lead:not(.is-stack) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    -moz-column-gap: 56px;
         column-gap: 56px;
    align-items: start;
  }
  .mbg-head:not(.mbg-head--art) .mbg-head__text.has-lead:not(.is-stack) > .mbg-head__title {
    position: sticky;
    top: calc(var(--mbg-nav-offset, 0px) + 32px);
    transition: top 0.25s ease;
  }
  /* 오른쪽 첫 줄을 번호 아래 H2 첫 줄과 맞춘다(번호 34px + 아래 18px + 4px) */
  .mbg-head:not(.mbg-head--art) .mbg-head__text.has-lead:not(.is-stack) > .mbg-head__body { padding-top: 4px; }
  .mbg-head:not(.mbg-head--art) .mbg-head__text.has-lead:not(.is-stack) > .mbg-head__title:has(> .mbg-sec__no) + .mbg-head__body { padding-top: 56px; }
  .mbg-head:not(.mbg-head--art) .mbg-head__text.has-lead:not(.is-stack) > .mbg-head__body > :first-child { margin-top: 0; }
}
.mbg-body { margin-top: 32px; }
@media (min-width: 1024px) { .mbg-body { margin-top: 48px; } }

/* 두 칸 카드 */
.mbg-duo { display: grid; gap: 12px; }
.mbg-duo .mbg-text { margin-top: 10px; }
@media (min-width: 768px) { .mbg-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* ── 「확인 필요」 칩 ───────────────────────────────────────── */
.mbg-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 5px; /* 앞뒤 글자와 붙어 보이지 않게(검수 D11) */
  padding: 1px 9px 1px 7px;
  border: 1px dashed var(--mbg-check-line);
  border-radius: var(--mbg-r-pill);
  background-color: var(--mbg-check-bg);
  color: var(--mbg-check-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
  vertical-align: 2px;
  white-space: nowrap;
  cursor: help;
}
.mbg-check svg { width: 14px; height: 14px; flex: none; }

/* ── 비교표 ─────────────────────────────────────────────────
   넓은 화면: 한 행 = 두 줄(윗줄 4칸 + 아랫줄 출처). 유형 이름·장점·단점을 진하게, 설명·출처를 옅게.
   좁은 화면: 행(tbody)마다 카드 한 장. */
.mbg-table { background-color: var(--mbg-card); border-radius: var(--mbg-r-md); overflow: hidden; }
.mbg-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mbg-table caption { text-align: left; }
.mbg-table__c-head { width: 27%; }
.mbg-table__c-check { width: 24%; }
.mbg-table thead th {
  padding: 22px 20px 16px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--mbg-ink-3);
  text-align: left;
  vertical-align: bottom;
  border-bottom: 2px solid var(--mbg-ink);
}
.mbg-table thead th:not(:first-child) { color: var(--mbg-ink); }
.mbg-table__th-sub { display: block; margin-top: 2px; font-weight: 500; color: var(--mbg-ink-3); }
.mbg-table__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: -2px 6px 0 0;
  border-radius: var(--mbg-r-pill);
  background-color: var(--mbg-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.mbg-table__mark.is-con { background-color: #fff; color: var(--mbg-ink); box-shadow: inset 0 0 0 1.5px var(--mbg-ink); }
.mbg-table tbody + tbody tr:first-child > * { border-top: 1px solid var(--mbg-line); }
.mbg-table tbody th, .mbg-table tbody td { text-align: left; vertical-align: top; }
.mbg-table__main > th, .mbg-table__main > td { padding: 26px 20px 14px; }
/* 출처 줄은 그 행 전체 폭에 걸친 아랫줄이다(검수 D12) — 이름 칸이 출처 줄까지 내려오지 않으므로 아래 여백을 옆 칸과 같게 둔다 */
.mbg-table__main > th { padding-bottom: 14px; }
.mbg-table__name { display: block; font-size: 20px; font-weight: 750; line-height: 1.4; letter-spacing: -0.02em; color: var(--mbg-ink); }
.mbg-table__kind { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--mbg-ink-3); }
.mbg-table__pro, .mbg-table__con { font-size: 16.5px; font-weight: 600; line-height: 1.65; color: var(--mbg-ink); letter-spacing: -0.01em; }
.mbg-table__check { font-size: 15.5px; font-weight: 500; line-height: 1.65; color: var(--mbg-ink-2); }
.mbg-table__src > td { padding: 0 20px 24px; }
.mbg-table__src-label {
  display: inline-block;
  margin-right: 10px;
  padding: 1px 8px;
  border-radius: var(--mbg-r-pill);
  background-color: var(--mbg-alt);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--mbg-ink-3);
  vertical-align: 1px;
}
.mbg-sec--alt .mbg-table__src-label { background-color: #f1f2f4; }
.mbg-sec:not(.mbg-sec--alt) .mbg-table__src-label { background-color: #fff; }
.mbg-table__src-text { font-size: 14.5px; line-height: 1.75; color: var(--mbg-ink-3); }
.mbg-table__label { display: none; }
.mbg-nb { white-space: nowrap; }
.mbg-em { font-weight: 650; color: var(--mbg-ink); }
.mbg-em--price { font-size: 1.12em; font-weight: 800; letter-spacing: -0.01em; color: var(--mbg-brand-ink); white-space: nowrap; /* 「195만원 VAT 별도」는 한 덩어리로 줄바꿈 */ }
@media (min-width: 900px) {
  .mbg-table { padding: 6px 24px 2px; border-radius: var(--mbg-r-lg); }
  .mbg-table thead th:first-child, .mbg-table__main > th { padding-left: 8px; }
  /* 출처 줄은 첫 열 시작선(이름 칸과 같은 8px)에서 시작해 표 끝까지 간다 */
  .mbg-table__src > td { padding-left: 8px; }
}
@media (min-width: 1024px) {
  .mbg-table__name { font-size: 21px; }
}
/* 좁은 화면 — 행마다 카드로 풀어 쓴다(가로로 밀지 않게) */
@media (max-width: 899px) {
  .mbg-table { background: transparent; border-radius: 0; overflow: visible; }
  .mbg-table table, .mbg-table tbody, .mbg-table tr, .mbg-table th, .mbg-table td { display: block; width: 100%; }
  .mbg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mbg-table tbody { padding: 22px 20px 18px; border-radius: var(--mbg-r-md); background-color: var(--mbg-card); }
  .mbg-table tbody + tbody { margin-top: 12px; }
  /* 둘째 카드부터: 카드 제목(th) 위 줄만 지운다 — 칸 사이 구분선은 첫 카드와 같게 남긴다 */
  .mbg-table tbody + tbody tr:first-child > th { border-top: 0; }
  .mbg-table__main > th, .mbg-table__main > td, .mbg-table__src > td { padding: 0; }
  .mbg-table__name { font-size: 19px; }
  .mbg-table__kind { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mbg-line); font-size: 15.5px; color: var(--mbg-ink-2); }
  .mbg-table__main > td, .mbg-table__src > td { padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--mbg-line); }
  .mbg-table__main > th { padding-bottom: 0; }
  .mbg-table__pro, .mbg-table__con { font-size: 15.5px; }
  .mbg-table__label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 650; line-height: 1.4; color: var(--mbg-ink-3); }
  .mbg-table__kind .mbg-table__label { display: block; }
  .mbg-table__src-label { display: block; width: -moz-max-content; width: max-content; margin: 0 0 6px; padding: 0; background: transparent !important; font-size: 14px; font-weight: 650; line-height: 1.4; }
}

/* ── 점검 목록(번호가 실제 순서인 목록) ─────────────────────── */
.mbg-checklist { padding: 8px 20px; }
.mbg-checklist ol { display: grid; grid-template-columns: 1fr; counter-reset: mbg-step; }
/* 항목은 한 덩어리 글로 흐른다(검수 V1·V2) — 번호 동그라미는 왼쪽에 따로 띄우고, 글 안의 묶음(가운뎃점·날짜)이
   여러 조각으로 갈라져 칸처럼 놓이지 않게 항목을 블록으로 둔다. */
.mbg-checklist li {
  position: relative;
  display: block;
  padding: 16px 0 16px 42px;
  font-size: 16px;
  font-weight: 550;
  line-height: 1.6;
  color: var(--mbg-ink);
  counter-increment: mbg-step;
}
.mbg-checklist li + li { border-top: 1px solid var(--mbg-line); }
.mbg-checklist li::before {
  content: counter(mbg-step);
  position: absolute;
  left: 0;
  top: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--mbg-r-pill);
  background-color: var(--mbg-brand-soft);
  color: var(--mbg-brand-ink);
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
/* 넓은 화면은 두 열 — 왼쪽 열을 위에서부터 채운 뒤 오른쪽 열로 넘어간다. 줄 수는 항목 수의 절반(올림)이라
   7개는 4+3, 5개는 3+2 로 두 열이 고르다(검수 V3). 줄 수는 GuideBlocks 가 --rows 로 준다.
   손으로 쓴 목록(허브 v1, is-flow 없음)은 전처럼 4줄 기준이다. */
@media (min-width: 1024px) {
  .mbg-checklist { padding: 20px 40px; }
  .mbg-checklist ol { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 4), auto); -moz-column-gap: 56px; column-gap: 56px; }
  .mbg-checklist li { padding: 20px 0 20px 42px; font-size: 17px; }
  .mbg-checklist li::before { top: 19px; }
  .mbg-checklist li + li { border-top: 0; }
  .mbg-checklist ol:not(.is-flow) li:not(:nth-child(4n + 1)) { border-top: 1px solid var(--mbg-line); }
  .mbg-checklist ol.is-flow li:not(.is-col-top) { border-top: 1px solid var(--mbg-line); }
}

/* ── 수치 카드 ─────────────────────────────────────────────── */
.mbg-stats { display: grid; gap: 12px; }
.mbg-stat { display: flex; flex-direction: column; gap: 6px; }
.mbg-stat__label { font-size: 15px; font-weight: 600; color: var(--mbg-ink-3); }
.mbg-stat__value { font-size: 30px; font-weight: 750; line-height: 1.25; letter-spacing: -0.03em; color: var(--mbg-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .mbg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) {
  .mbg-stat { gap: 10px; }
  .mbg-stat__label { font-size: 16px; }
  .mbg-stat__value { font-size: 44px; }
}
.mbg-figure { display: grid; gap: 20px; align-items: end; }
.mbg-figure__num {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--mbg-brand-ink);
  font-variant-numeric: tabular-nums;
}
.mbg-figure__num small { font-size: 0.5em; font-weight: 750; letter-spacing: -0.02em; margin-left: 2px; }
.mbg-figure .mbg-text { color: var(--mbg-ink); font-weight: 500; }
@media (min-width: 1024px) {
  .mbg-figure { grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center; padding: 44px 56px; }
  .mbg-figure__num { font-size: 112px; }
  .mbg-figure .mbg-text { font-size: 18px; } /* 카드 남은 폭을 다 쓴다(글씨폭 v3) */
}

/* ── 관련 장 — 연결된 세부 페이지 카드 ───────────────────────
   대표 그림 + 장 이름 + 그 장의 첫 제목줄 + 검색 설명 + 「자세히 보기」. 카드 전체가 링크다. */
.mbg-rel { margin-top: 32px; }
.mbg-rel__label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--mbg-ink-3); }
.mbg-chapters { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.mbg-chapter {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  height: 100%;
  padding: 14px;
  border-radius: var(--mbg-r-md);
  background-color: var(--mbg-card);
  transition: transform 0.35s var(--mbg-ease), background-color 0.25s ease;
}
.mbg-sec:not(.mbg-sec--alt) .mbg-chapter { background-color: var(--mbg-alt); }
.mbg-chapter__thumb .mbg-art { border-radius: 12px; }
.mbg-chapter__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.mbg-chapter__name { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--mbg-brand-ink); }
.mbg-chapter__title { font-size: 15.5px; font-weight: 700; line-height: 1.45; letter-spacing: -0.015em; color: var(--mbg-ink); text-wrap: balance; }
.mbg-chapter__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mbg-ink-3);
}
.mbg-chapter__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--mbg-ink); }
.mbg-chapter__more svg { width: 15px; height: 15px; transition: transform 0.35s var(--mbg-ease); }
/* 휴대폰 — 그림 + 장 이름·제목을 윗줄에, 설명·「자세히 보기」는 카드 폭 전체로 아래에 둔다.
   좁은 글 칸에 설명을 두 줄로 자르던 것(검수 D9)을 없애고, 카드마다 같은 짜임으로 쌓이게 한다. */
@media (max-width: 767px) {
  .mbg-chapter {
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "thumb name" "thumb title" "desc desc" "more more";
    -moz-column-gap: 16px;
         column-gap: 16px;
    row-gap: 0;
    padding: 16px;
  }
  .mbg-chapter__body { display: contents; }
  .mbg-chapter__thumb { grid-area: thumb; align-self: start; }
  .mbg-chapter__name { grid-area: name; padding-top: 2px; }
  .mbg-chapter__title { grid-area: title; margin-top: 4px; }
  .mbg-chapter__desc { grid-area: desc; display: block; -webkit-line-clamp: unset; overflow: visible; margin-top: 14px; font-size: 14px; line-height: 1.65; }
  .mbg-chapter__more { grid-area: more; margin-top: 12px; }
}
@media (min-width: 768px) {
  .mbg-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .mbg-chapters.is-single { grid-template-columns: 1fr; }
  .mbg-chapter { grid-template-columns: 148px minmax(0, 1fr); gap: 20px; padding: 16px; border-radius: 20px; }
  /* 홀수 장의 마지막 한 장은 줄 전체를 쓴다 — 한 장뿐인 줄과 같은 모양(검수 V5). 반폭 카드가 왼쪽에 혼자 남지 않는다. */
  .mbg-chapters > li:nth-child(odd):last-child { grid-column: 1 / -1; }
  .mbg-chapters.is-single .mbg-chapter,
  .mbg-chapters > li:nth-child(odd):last-child .mbg-chapter { grid-template-columns: 200px minmax(0, 1fr); }
  .mbg-chapter__title { font-size: 17px; }
  .mbg-chapter__desc { font-size: 14px; }
  /* 「자세히 보기」는 제목 줄 수와 무관하게 카드 안 아래쪽 같은 자리에 둔다(검수 D1).
     글 칸을 카드 높이만큼 늘리고 링크를 맨 아래로 민다 — 나란한 카드끼리 링크 높이가 맞는다. */
  .mbg-chapter__thumb { align-self: start; }
  .mbg-chapter__body { align-self: stretch; }
  .mbg-chapter__more { margin-top: auto; padding-top: 6px; /* 최소 간격은 전과 같은 10px(글 칸 간격 4 + 6) */ }
}
@media (min-width: 1024px) { .mbg-rel { margin-top: 48px; } }

/* ── 글 안 링크 · 관련 글 목록 (v4) ───────────────────────────
   GuideRich 가 `[글 제목](주소)` 를 이 링크로 그린다. 사이트 base.css 의 a:link·a:visited·a:hover 글자색(0,1,1)을 이기도록 .mbg 를 앞에 붙인다.
   관련 글(related 블록)은 「관련 장」과 같은 라벨 줄 + 점 목록으로 보인다 — 새 모양을 만들지 않고 기존 라벨·점 목록 규칙을 쓴다. */
.mbg .mbg-link {
  color: var(--mbg-brand-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--mbg-brand-ink) 45%, transparent);
  transition: text-decoration-color 0.2s ease;
}
@media (hover: hover) { .mbg .mbg-link:hover { text-decoration-color: var(--mbg-brand-ink); } }
.mbg-rel--posts { margin-top: 0; }
.mbg-rel__list { margin-top: 10px; }
.mbg-rel__list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.8; color: var(--mbg-ink-2); }
.mbg-rel__list li + li { margin-top: 6px; }
.mbg-rel__list li::before { content: ""; position: absolute; left: 2px; top: 0.78em; width: 6px; height: 6px; border-radius: var(--mbg-r-pill); background-color: var(--mbg-ink-3); }
@media (min-width: 1024px) { .mbg-rel--posts { margin-top: 0; } .mbg-rel__list li { font-size: 17px; } }
@media (hover: hover) {
  .mbg-chapter:hover { transform: translate3d(0, -4px, 0); }
  .mbg-chapter:hover .mbg-art img { transform: scale(1.04); }
  .mbg-chapter:hover .mbg-chapter__more svg { transform: translate3d(3px, 0, 0); }
}

.mbg-courses { display: grid; gap: 10px; margin-top: 16px; }
.mbg-course {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 18px 20px 18px 24px;
  border-radius: var(--mbg-r-md);
  background-color: var(--mbg-alt);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--mbg-ink);
  transition: transform 0.35s var(--mbg-ease), background-color 0.25s ease;
}
/* 과정 수만큼 칸을 나눠 본문 폭을 다 쓴다(검수 V7) — 한 장이면 전폭 링크 줄, 두 장이면 반씩, 세 장이면 셋. --n 은 GuideRelatedCourses 가 준다 */
@media (min-width: 768px) { .mbg-courses { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; margin-top: 20px; } }
@media (min-width: 1024px) {
  .mbg-course { min-height: 104px; padding: 24px 24px 24px 28px; border-radius: var(--mbg-r-lg); font-size: 20px; }
}
@media (hover: hover) {
  .mbg-course:hover { transform: translate3d(0, -4px, 0); background-color: #eceef1; }
  .mbg-course:hover .mbg-arrow { background-color: var(--mbg-ink); color: #fff; transform: translate3d(3px, 0, 0); }
}
.mbg-course .mbg-arrow { background-color: #fff; }

/* ── 자주 묻는 질문 ───────────────────────────────────────────
   질문 하나 = 한 줄 카드. 넓은 화면은 카드 안에서 질문 왼쪽 · 답 오른쪽으로 놓는다(검수 V4·V8).
   두 열 격자를 쓰지 않으므로 질문 수가 홀수여도 빈 칸이 없고, 긴 답이 옆 카드 높이를 늘리지 않는다. */
.mbg-faq { display: grid; gap: 12px; margin-top: 28px; }
.mbg-faq__q { display: flex; gap: 10px; }
.mbg-faq__q::before { content: "Q"; flex: none; font-weight: 800; color: var(--mbg-brand-ink); }
.mbg-faq__a { margin-top: 12px; padding-left: 24px; }
@media (min-width: 768px) { .mbg-faq { gap: 16px; } }
@media (min-width: 1024px) {
  .mbg-faq { margin-top: 48px; }
  .mbg-faq__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); -moz-column-gap: 56px; column-gap: 56px; align-items: start; padding: 36px 44px 38px 40px; }
  .mbg-faq__a { margin-top: 0; padding-left: 0; padding-top: 1px; }
}

/* ── 다음 행동 ─────────────────────────────────────────────── */
/* 색면은 한 겹 — 패널 색 = 일러스트 바탕색(버터), 그림은 패널 위에 바로 놓는다 */
.mbg-next {
  display: grid;
  gap: 8px;
  padding: 28px 24px 8px;
  border-radius: var(--mbg-r-md);
  background-color: var(--mbg-tile-tangerine);
  overflow: hidden;
}
.mbg-next__text { font-size: 18px; font-weight: 600; line-height: 1.7; letter-spacing: -0.015em; color: var(--mbg-ink); }
.mbg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  margin-top: 24px;
  padding: 10px 10px 10px 24px;
  border-radius: var(--mbg-r-pill);
  background-color: var(--mbg-ink);
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  transition: background-color 0.25s ease;
}
.mbg-btn .mbg-arrow { width: 40px; height: 40px; background-color: var(--mbg-brand); color: var(--mbg-ink); }
.mbg-btn .mbg-arrow svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .mbg-btn:hover { background-color: #2a2e34; }
  .mbg-btn:hover .mbg-arrow { transform: translate3d(4px, 0, 0); }
}
@media (min-width: 1024px) {
  .mbg-next { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: center; padding: 40px 32px 40px 64px; border-radius: var(--mbg-r-lg); }
  .mbg-next__text { font-size: 26px; line-height: 1.6; letter-spacing: -0.025em; }
  .mbg-btn { width: auto; margin-top: 36px; min-height: 64px; padding: 10px 10px 10px 28px; font-size: 17px; }
}

/* ── 작성 주체 · 최종 수정일 ───────────────────────────────── */
.mbg-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 28px 0 0; font-size: 14px; line-height: 1.6; color: var(--mbg-ink-3); }
.mbg-byline span { display: inline-flex; align-items: center; gap: 6px; }
.mbg-byline svg { width: 15px; height: 15px; }
.mbg-byline b { font-weight: 650; color: var(--mbg-ink-2); }
@media (min-width: 1024px) { .mbg-byline { font-size: 15px; padding-top: 40px; } }

/* ── 스크롤 등장 ───────────────────────────────────────────
   글은 처음부터 문서 안에 있고 보인다. 스크립트가 돈 뒤에만, 그것도 첫 화면 아래에 있는 요소만
   잠깐 내려 두었다가 화면에 들어올 때 올린다(카카오 참조 — 10px 안팎 상승 + 0.7초 감속). */
.mbg--motion [data-reveal] {
  transition: opacity 0.75s var(--mbg-ease), transform 0.75s var(--mbg-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.mbg--motion [data-reveal].is-pending { opacity: 0; transform: translate3d(0, 20px, 0); }
@media (prefers-reduced-motion: reduce) {
  .mbg [data-reveal], .mbg [data-hero] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .mbg *, .mbg *::before, .mbg *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  .mbg [data-reveal], .mbg [data-hero] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .mbg-band { display: none; }
}


/* ── 번호 구역(.mbg-flow) — 내비가 살아 있는 구간. 본문 폭·위치는 다른 구역과 같다 ───────── */
.mbg-flow { position: relative; }

/* 구역 순서 번호 — 목차·내비와 같은 01·02… 체계 */
.mbg-sec__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  margin-bottom: 14px;
  padding: 0 12px;
  border-radius: var(--mbg-r-pill);
  background-color: var(--mbg-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) { .mbg-sec__no { height: 34px; margin-bottom: 18px; font-size: 15px; } }

/* ── 읽는 위치 안내(내비) ───────────────────────────────── */
.mbg-nav { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.mbg-nav__no { font-variant-numeric: tabular-nums; font-weight: 800; }
/* 진행선 — 사이트 머리 바로 아래 */
.mbg-nav__line {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--mbg-nav-offset, 0px);
  z-index: 3;
  height: 3px;
  opacity: 0;
  transition: opacity 0.3s ease, top 0.25s ease;
}
.mbg-nav__line i { display: block; width: 100%; height: 100%; background-color: var(--mbg-ink); transform-origin: 0 50%; transform: scaleX(0); }
.mbg-nav.is-shown .mbg-nav__line { opacity: 1; }

/* 레일 — 본문 격자 밖, 화면 왼쪽 끝 가까이에 따로 붙는다(카카오 글 페이지 방식).
   폭(width)과 레일/띠 전환은 GuideNav 가 본문 왼쪽 여백을 실측해 정한다. */
.mbg-nav__rail {
  position: fixed;
  left: 24px;
  top: calc(var(--mbg-nav-offset, 0px) + 40px);
  z-index: 2;
  max-height: calc(100vh - var(--mbg-nav-offset, 0px) - 80px);
  overflow-y: auto;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.35s ease, transform 0.45s var(--mbg-ease), visibility 0s linear 0.35s, top 0.25s ease;
}
.mbg-nav.is-shown .mbg-nav__rail { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.45s var(--mbg-ease), visibility 0s, top 0.25s ease; }
/* 레일 모양은 화면 폭으로만 정한다(검수 D6·D7) — 장·이름 길이를 재지 않는다.
   · 1355～1479px: 번호 위·이름 아래, 폭 84px 고정
   · 1480px 이상: 번호 옆 이름, 폭 118px 고정
   폭은 가장 긴 짧은 이름(「면접·첫 수업」 약 68px)이 한 줄에 들어가는 값이다. 1355px 에서 본문 글자와 19px 떨어진다.
   이름이 이보다 길어지면 넘치지 않고 두 줄로 내려간다. 레일 왼쪽 위치(left)는 GuideNav 가 본문 여백을 재서 정한다. */
.mbg-nav__rail { width: 84px; }
.mbg-nav__rail.is-off { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.mbg-nav__rail .mbg-nav__text { min-width: 0; }
.mbg-nav__rail ol { display: flex; flex-direction: column; gap: 2px; }
.mbg-nav__rail a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 44px;
  padding: 7px 4px 7px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition: color 0.2s ease;
}
.mbg .mbg-nav__rail a { color: var(--mbg-ink-3); }
.mbg-nav__rail a::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background-color: var(--mbg-line); transition: background-color 0.2s ease; }
.mbg-nav__rail .mbg-nav__no { flex: none; width: auto; font-size: 14px; line-height: 1.35; }
@media (min-width: 1480px) {
  .mbg-nav__rail { width: 118px; }
  .mbg-nav__rail a { flex-direction: row; gap: 10px; padding: 10px 4px 10px 14px; }
  .mbg-nav__rail .mbg-nav__no { width: 22px; font-size: 14px; line-height: 1.6; }
}
.mbg .mbg-nav__rail a.is-active { color: var(--mbg-ink); font-weight: 700; }
.mbg-nav__rail a.is-active::before { background-color: var(--mbg-ink); }
.mbg-nav__rail a.is-active .mbg-nav__no { color: var(--mbg-brand-ink); }
@media (hover: hover) { .mbg .mbg-nav__rail a:hover { color: var(--mbg-ink); } }

/* 좁은 화면: 위 띠 + 펼침 목록 */
.mbg-nav__bar {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--mbg-nav-offset, 0px);
  z-index: 2;
  pointer-events: auto;
  background-color: #fff;
  box-shadow: 0 1px 0 var(--mbg-line);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.35s var(--mbg-ease), opacity 0.25s ease, visibility 0s linear 0.35s, top 0.25s ease;
}
.mbg-nav.is-shown .mbg-nav__bar { opacity: 1; visibility: visible; transform: none; transition: transform 0.35s var(--mbg-ease), opacity 0.25s ease, visibility 0s, top 0.25s ease; }
.mbg-nav__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  /* 띠 안 글자는 본문 열과 같은 선에서 시작한다 */
  padding: 6px max(var(--mbg-gut), calc((100% - var(--mbg-max)) / 2)) 4px;
  border: 0;
  background: transparent;
  color: var(--mbg-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.mbg-nav__toggle .mbg-nav__no { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: var(--mbg-r-pill); background-color: var(--mbg-ink); color: #fff; font-size: 14px; }
.mbg-nav__current { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.mbg-nav__chev { flex: none; width: 20px; height: 20px; color: var(--mbg-ink-3); transition: transform 0.3s var(--mbg-ease); }
.mbg-nav.is-open .mbg-nav__chev { transform: rotate(180deg); }
.mbg-nav__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 70vh;
  overflow-y: auto;
  padding: 4px max(var(--mbg-gut), calc((100% - var(--mbg-max)) / 2)) 14px;
  border-top: 1px solid var(--mbg-line);
  background-color: #fff;
  box-shadow: 0 16px 24px -16px rgba(18, 20, 23, 0.28);
}
.mbg-nav__menu a { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 12px 0; font-size: 15px; font-weight: 500; line-height: 1.5; }
.mbg .mbg-nav__menu a { color: var(--mbg-ink-3); }
.mbg-nav__menu .mbg-nav__no { flex: none; width: 26px; font-size: 14px; line-height: 1.6; }
.mbg .mbg-nav__menu a.is-active { color: var(--mbg-ink); font-weight: 700; }
.mbg-nav__menu a.is-active .mbg-nav__no { color: var(--mbg-brand-ink); }
@media (prefers-reduced-motion: reduce) {
  .mbg-nav__line, .mbg-nav__rail, .mbg-nav__bar { transition: none !important; }
}

/* ══ 허브 첫 화면 — 색 띠(v9·v10 허브만 · GuideChapter 가 hubBand 일 때만 그린다) ══════════
   카카오뱅크 시리즈 상단(blog.kakaobank.com/series/1)과 같은 구성: 화면 폭 전체 단색 띠 위에 왼쪽 제목·부제, 오른쪽 그림,
   다음 구역이 큰 둥근 위 모서리로 띠 위에 올라앉는다. 기준 값(2026-11-02 실측)
     1440 = 띠 높이 약 620 · 제목 52/700/1.26 · 부제 20/500/1.5 · 오른쪽 그림 3:2 · 올라앉는 모서리 약 60px
      390 = 띠 높이 약 600 · 제목 32/700 · 부제 16/500 · 글 아래 화면 폭 전체 그림 · 올라앉는 모서리 약 24px
   글 칸 시작선은 아래 본문 열(.mbg-wrap)과 같은 선에 둔다. 띠 색은 --mbg-hub-band 한 곳이다. */
.mbg-hubhero {
  --hub-r: 24px; /* 다음 구역이 띠 위에 올라앉는 모서리 반지름 */
  /* 띠 색 위에서 읽히는 글자·꼬리표 색(모두 본문 잉크색의 투명도 — 띠 색이 바뀌어도 같이 어울린다) */
  --hub-ink-crumb: rgba(18, 20, 23, 0.72);
  --hub-ink-sep: rgba(18, 20, 23, 0.4);
  --hub-chip: rgba(18, 20, 23, 0.09);
  padding: 28px 0 calc(32px + var(--hub-r));
  background-color: var(--mbg-hub-band);
}
/* v9 띠 — 그림(guide-hub-hero-v9.png)에 노란 바탕이 그려져 있어 띠 색이 정확히 같아야 경계가 안 보인다. --mbg-hub-band(v10 이 쓰는 값)와 따로 고정한다. */
.mbg-hubhero--v9 { --mbg-hub-band: #ffff00; }
.mbg-hubhero__in { display: block; }
.mbg-hubhero__text { position: relative; }
/* 꼬리표 자리 — 위치 표시(홈 > 자격증 가이드)를 작은 알약에 담는다. 띠 색 위에서 읽히도록 글자색을 진하게 다시 정한다 */
.mbg-hubhero .mbg-crumb { display: inline-block; padding-top: 0; }
.mbg-hubhero .mbg-crumb ol { display: inline-flex; flex-wrap: nowrap; padding: 5px 14px; border-radius: var(--mbg-r-pill); background-color: var(--hub-chip); font-size: 14px; line-height: 20px; }
.mbg .mbg-hubhero .mbg-crumb a { color: var(--hub-ink-crumb); min-height: 20px; margin: 0; }
.mbg .mbg-hubhero .mbg-crumb a:hover { color: var(--mbg-ink); }
.mbg-hubhero .mbg-crumb svg { color: var(--hub-ink-sep); }
.mbg-hubhero .mbg-crumb [aria-current="page"] { color: var(--mbg-ink); }
/* 제목 — h1 전체 한 문장(약 35자)을 한 제목으로 그린다. 앞뒤 같은 크기·굵기·색, 칸 폭에서 자연스럽게 줄이 바뀐다(제목/부제로 나누지 않는다).
   글이 길어 카카오뱅크 기준(52px)보다 작게 두고, 글 칸에 3줄(「…총정리:」 / 「종류·비용·취득 방법부터」 / 「강사 수입·취업까지」)로 꼭 맞는 크기를 폭별로 정한다
   (가장 긴 줄 폭 ≒ 글자 크기 × 9.05 가 글 칸보다 좁아야 한다). */
.mbg-hubhero__title { margin-top: 16px; font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; color: var(--mbg-ink); }
/* 그림 — 상자·테두리 없이 띠 색과 이어진다. 휴대폰은 글 아래 화면 폭 전체 */
.mbg-hubhero__art { margin: 20px calc(var(--mbg-gut) * -1) 0; }
.mbg-hubhero__art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; -o-object-fit: cover; object-fit: cover; }
/* 520～767 은 한 칸이지만 폭 전체로 키우면 그림이 첫 화면을 넘는다(검수 N1) — 가운데 480px 로 묶는다 */
@media (min-width: 520px) and (max-width: 767px) {
  .mbg-hubhero__art { max-width: 480px; margin: 12px auto 0; }
}
/* 다음 구역(요약+목차)이 띠 위에 올라앉는다 */
.mbg-sec--sheet { position: relative; margin-top: -24px; border-radius: 24px 24px 0 0; padding-top: 48px; }
.mbg-sheet__intro { max-width: 680px; margin-bottom: 32px; color: var(--mbg-ink-2); }
/* v10 — 소개 단락이 본문 열 폭 전체를 쓴다(최대 폭 680px 해제) */
.mbg-sheet__intro--full { max-width: none; }
/* 768 부터 왼쪽 글 · 오른쪽 그림 두 칸 — 768×844 첫 화면(위 머리 145 + 메뉴 94 ≒ 239px, 아래 사이트 하단 바 113px 를 빼면 내용 칸은 약 490px)에
   그림 전체와 올라앉는 다음 구역 모서리까지 들어오게 한다. 한 칸으로 쌓으면 그림이 부제 아래 y446 에서 시작해 아랫부분이 첫 화면 밖으로 나간다(검수 H5). */
@media (min-width: 768px) {
  .mbg-hubhero { --hub-r: 40px; padding-top: 40px; padding-bottom: calc(48px + var(--hub-r)); }
  .mbg-hubhero__in { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); -moz-column-gap: 16px; column-gap: 16px; align-items: center; }
  .mbg-hubhero__title { margin-top: 18px; font-size: 34px; }
  .mbg-hubhero__art { max-width: none; margin: 0; }
  .mbg-sec--sheet { margin-top: -40px; border-radius: 40px 40px 0 0; padding-top: 64px; }
}
@media (min-width: 1024px) {
  .mbg-hubhero { --hub-r: 60px; padding-top: 40px; padding-bottom: calc(80px + var(--hub-r)); }
  .mbg-hubhero__in { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); -moz-column-gap: 24px; column-gap: 24px; }
  .mbg-hubhero__title { font-size: 40px; }
  .mbg-sec--sheet { margin-top: -60px; border-radius: 60px 60px 0 0; padding-top: 88px; }
  .mbg-sheet__intro { margin-bottom: 44px; }
}
@media (min-width: 1200px) {
  .mbg-hubhero__title { font-size: 46px; }
}
/* 첫 화면 등장 — 일반 첫 화면(.mbg-hero)과 같은 움직임 */
@media (prefers-reduced-motion: no-preference) {
  .mbg-hubhero [data-hero] { animation: mbg-rise 0.9s var(--mbg-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
}
@media print {
  .mbg-hubhero { background-color: transparent; }
}

/* ══ 하위 장(GuideChapter) 전용 ══════════════════════════════
   허브 규칙은 건드리지 않고 아래에 덧붙이기만 한다. */

/* 첫 화면 — 넓은 화면은 글 왼쪽 · 대표 그림 오른쪽 */
.mbg-h1--chapter { font-size: 28px; line-height: 1.32; }
.mbg-hero--chapter .mbg-hero__art { max-width: 560px; }
@media (min-width: 768px) {
  .mbg-h1--chapter { font-size: 36px; }
}
@media (min-width: 1024px) {
  .mbg-hero--chapter { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
  .mbg-hero--chapter .mbg-hero__art { margin-top: 0; max-width: none; }
  .mbg-h1--chapter { font-size: 44px; line-height: 1.28; }
}

/* 블록 사이 리듬 */
.mbg-blocks > * + * { margin-top: 24px; }
.mbg-blocks > .mbg-blocks__h3 { margin-top: 44px; }
.mbg-blocks > .mbg-gtable + *, .mbg-blocks > .mbg-table + *, .mbg-blocks > .mbg-steps + *, .mbg-blocks > .mbg-cards + * { margin-top: 36px; }
.mbg-blocks > * + .mbg-gtable, .mbg-blocks > * + .mbg-table, .mbg-blocks > * + .mbg-steps, .mbg-blocks > * + .mbg-cards { margin-top: 32px; }
@media (min-width: 1024px) {
  .mbg-blocks > * + * { margin-top: 28px; }
  .mbg-blocks > .mbg-blocks__h3 { margin-top: 56px; }
  .mbg-blocks > .mbg-gtable + *, .mbg-blocks > .mbg-table + *, .mbg-blocks > .mbg-steps + *, .mbg-blocks > .mbg-cards + * { margin-top: 48px; }
  .mbg-blocks > * + .mbg-gtable, .mbg-blocks > * + .mbg-table, .mbg-blocks > * + .mbg-steps, .mbg-blocks > * + .mbg-cards { margin-top: 40px; }
}

/* 묶음 배치(GuideBlocks groups · 글씨폭 v3 · 검수 N1·N4) — 묶음 사이 간격은 묶음이 정하고, 묶음 안쪽은 위 블록 리듬을 그대로 쓴다.
   · has-aside: 왼쪽 칸(소제목·그림·큰 숫자 카드)이 사이트 머리 아래를 따라 내려오고 글은 오른쪽 칸 — 구역 머리와 같은 5:7
   · full: 제목도 그림도 없는 글 묶음은 본문 폭 전체 한 칸 / solo: 그림 홀로 — 본문 폭 전체, 낮은 띠 비율
   · wide: 표·비교표·카드·번호 목록·수치 카드 — 본문 폭 전체
   휴대폰·태블릿은 위아래로 쌓인다(원래 블록 순서 그대로). */
.mbg-blocks.is-grouped > * + * { margin-top: 32px; }
.mbg-blocks.is-grouped > * + .has-aside--h3 { margin-top: 44px; }
.mbg-group > * + * { margin-top: 24px; }
@media (min-width: 1024px) {
  .mbg-blocks.is-grouped > * + * { margin-top: 48px; }
  .mbg-blocks.is-grouped > * + .has-aside--h3 { margin-top: 56px; }
  .mbg-group.has-aside { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); -moz-column-gap: 56px; column-gap: 56px; align-items: start; }
  .mbg-group.has-aside > .mbg-group__aside {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    position: sticky;
    top: calc(var(--mbg-nav-offset, 0px) + 32px);
    transition: top 0.25s ease;
  }
  .mbg-group.has-aside > .mbg-group__main { grid-column: 2; grid-row: 1; margin-top: 0; }
  /* 그림 홀로 — 본문 폭 전체를 쓰되 높이는 띠 비율로 낮춘다(그림 속 물건은 GuideIllust 가 칸 안에 맞춘다) */
  .mbg-group--solo .mbg-art { aspect-ratio: 16 / 5; }
  /* 큰 숫자 카드가 왼쪽 칸에 서면 숫자 위 · 글 아래로 쌓는다(검수 N4) */
  .has-aside--figure .mbg-figure { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; padding: 40px 40px 44px; }
  .has-aside--figure .mbg-figure__num { font-size: 96px; }
}

/* 단계 흐름 — 세로 선으로 이은 소제목 + 단락 */
.mbg-steps { position: relative; }
.mbg-steps > li { position: relative; padding-left: 36px; }
.mbg-steps > li + li { margin-top: 28px; }
.mbg-steps > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: var(--mbg-r-pill);
  background-color: var(--mbg-bg);
  box-shadow: inset 0 0 0 3px var(--mbg-ink);
}
.mbg-sec--alt .mbg-steps > li::before { background-color: var(--mbg-alt); }
.mbg-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 28px; bottom: -24px; width: 2px; border-radius: 2px; background-color: var(--mbg-line); }
.mbg-steps .mbg-text { margin-top: 8px; }
@media (min-width: 1024px) {
  .mbg-steps > li { padding-left: 44px; }
  .mbg-steps > li + li { margin-top: 32px; }
  .mbg-steps > li::before { top: 9px; width: 16px; height: 16px; left: 3px; }
  .mbg-steps > li:not(:last-child)::after { left: 10px; top: 31px; bottom: -27px; }
}

/* 나란한 짧은 항목 카드 */
.mbg-cards { display: grid; gap: 12px; }
.mbg-cards .mbg-text { margin-top: 10px; }
@media (min-width: 768px) { .mbg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .mbg-cards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 일반 표 */
.mbg-gtable { background-color: var(--mbg-card); border-radius: var(--mbg-r-md); overflow: hidden; }
.mbg-gtable table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mbg-gtable caption { text-align: left; }
.mbg-gtable thead th {
  padding: 22px 20px 16px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--mbg-ink-3);
  text-align: left;
  vertical-align: bottom;
  border-bottom: 2px solid var(--mbg-ink);
}
.mbg-gtable tbody th, .mbg-gtable tbody td { padding: 20px 20px 22px; text-align: left; vertical-align: top; font-size: 16px; line-height: 1.65; color: var(--mbg-ink-2); }
.mbg-gtable tbody tr + tr > * { border-top: 1px solid var(--mbg-line); }
.mbg-gtable tbody th { font-size: 17px; font-weight: 750; line-height: 1.5; letter-spacing: -0.015em; color: var(--mbg-ink); }
.mbg-gtable td.is-empty { color: #a3a9b0; }
.mbg-gtable__label { display: none; }
@media (min-width: 900px) {
  .mbg-gtable { padding: 6px 24px 2px; border-radius: var(--mbg-r-lg); }
  .mbg-gtable thead th:first-child, .mbg-gtable tbody th { padding-left: 8px; }
}
@media (max-width: 899px) {
  .mbg-gtable { background: transparent; border-radius: 0; overflow: visible; }
  .mbg-gtable table, .mbg-gtable tbody, .mbg-gtable tr, .mbg-gtable th, .mbg-gtable td { display: block; width: 100%; }
  .mbg-gtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mbg-gtable tbody tr { padding: 20px 20px 4px; border-radius: var(--mbg-r-md); background-color: var(--mbg-card); }
  .mbg-gtable tbody tr + tr { margin-top: 12px; }
  .mbg-gtable tbody tr + tr > * { border-top: 0; }
  .mbg-gtable tbody th { padding: 0 0 12px; font-size: 18px; }
  .mbg-gtable tbody td { padding: 12px 0 14px; border-top: 1px solid var(--mbg-line) !important; font-size: 15.5px; }
  .mbg-gtable td.is-empty { display: none; }
  .mbg-gtable__label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 650; line-height: 1.4; color: var(--mbg-ink-3); }
}

/* 점 목록 */
.mbg-bullets li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.8; color: var(--mbg-ink-2); }
.mbg-bullets li + li { margin-top: 6px; }
.mbg-bullets li::before { content: ""; position: absolute; left: 2px; top: 0.78em; width: 6px; height: 6px; border-radius: var(--mbg-r-pill); background-color: var(--mbg-ink); }
@media (min-width: 1024px) { .mbg-bullets li { font-size: 17px; } }

/* 강조 상자 — 테두리·그림자 없이 옅은 주황 면 하나로만 강조 */
.mbg-callout {
  padding: 18px 20px;
  border-radius: var(--mbg-r-md);
  background-color: var(--mbg-brand-soft);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--mbg-ink);
}
@media (min-width: 1024px) { .mbg-callout { padding: 22px 28px; font-size: 17px; } }

/* 강조 수치 3개 */
@media (min-width: 1024px) { .mbg-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 작은 안내 글이 이어지면 한 묶음으로 붙이고 문단만 나눈다(검수 V14) */
.mbg-blocks > .mbg-note + .mbg-note { margin-top: 10px; }
@media (min-width: 1024px) { .mbg-blocks > .mbg-note + .mbg-note { margin-top: 12px; } }
/* 「 · 」로 이은 항목 줄(GuideBlocks noteLists) — 짧은 항목은 통째로 옮겨 항목 사이에서만 줄이 바뀐다.
   점은 앞 항목 끝에 붙어 있다. 긴 항목(20자 넘음 — 비용·환불 안내)은 넓은 화면에서는 이어서 흐르고,
   휴대폰에서는 새 줄에서 시작해 자격 표시 · 비용 · 환불이 줄 첫머리로 갈린다(검수 V14). */
.mbg-note__item { display: inline-block; max-width: 100%; }
.mbg-note__item.is-long { display: inline; }
@media (max-width: 767px) {
  .mbg-note__item.is-long { display: block; margin-top: 6px; }
}

/* 본문 안 그림 자리 — 폭 제한 없이 놓인 칸(넓은 화면은 본문 오른쪽 칸)을 다 쓴다 */

/* ══ 10단계 공통 부품 보완 ═════════════════════════════════ */

/* 굵게(스토리보드 <b>) — GuideRich bold */
.mbg-strong { font-weight: 750; color: var(--mbg-ink); }

/* 비교표 넓은 꼴 — 구분 뒤 속성 열(자격 상태·교육 방식과 기간·비용 방식 …) + 아랫줄 장점·단점·확인할 것 */
.mbg-table--wide .mbg-table__c-head { width: 20%; }
.mbg-table--wide .mbg-table__attr { padding: 26px 20px 18px; font-size: 16px; line-height: 1.7; color: var(--mbg-ink-2); vertical-align: top; }
.mbg-table__tier > td { padding: 4px 20px 20px; text-align: left; vertical-align: top; }
.mbg-table--wide .mbg-table__main > th { padding-bottom: 20px; /* 장점·단점 줄 아래 여백과 같게 */ }
.mbg-table__label.is-always { display: flex; align-items: center; margin-bottom: 6px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--mbg-ink-3); }
.mbg-table__label.is-always .mbg-table__mark { margin-top: 0; }
@media (max-width: 899px) {
  .mbg-table--wide .mbg-table__attr { padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--mbg-line); font-size: 15.5px; }
  .mbg-table__tier > td { padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--mbg-line); }
}

/* 번호 표 — 휴대폰 카드 제목을 그 행의 항목 글로(번호는 앞에 작게) */
@media (max-width: 899px) {
  .mbg-gtable.is-numbered tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; -moz-column-gap: 10px; column-gap: 10px; }
  .mbg-gtable.is-numbered tbody th { flex: none; width: auto; padding: 0; font-size: 14px; font-weight: 800; color: var(--mbg-brand-ink); font-variant-numeric: tabular-nums; }
  .mbg-gtable.is-numbered tbody td { flex: 0 0 100%; }
  .mbg-gtable.is-numbered tbody td:nth-of-type(1) { flex: 1 1 0; min-width: 0; padding: 0 0 12px; border-top: 0 !important; font-size: 18px; font-weight: 750; line-height: 1.45; color: var(--mbg-ink); }
  .mbg-gtable.is-numbered tbody td:nth-of-type(1) .mbg-gtable__label { display: none; }
}

/* 다음 행동 — 문단 없이 버튼만일 때(검수 D10)
   휴대폰: 문단 자리 없이 버튼이 맨 위에 온다(빈 띠가 생기지 않게).
   넓은 화면: 다른 장의 문단은 2～4줄이고 가장 많은 것이 3줄이다. 빈 문단 자리를 3줄 높이로 남겨
   버튼이 다른 장과 같은 높이(칸 위에서 235px)에 오게 한다 — 버튼만 칸 가운데 뜨지 않는다. */
.mbg-btn.is-first { margin-top: 0; }
.mbg-next__text.is-empty { display: none; }
@media (min-width: 1024px) {
  .mbg-next__text.is-empty { display: block; min-height: calc(26px * 1.6 * 3); }
  .mbg-next .mbg-btn.is-first { margin-top: 36px; }
}

/* 관련 과정 줄 끝 「확인 필요」 */
.mbg-courses__check { margin-top: 12px; font-size: 14px; color: var(--mbg-ink-3); }

/* 구역 본문 첫 블록이 소제목이면 위 간격을 겹쳐 주지 않는다 */
.mbg-blocks > .mbg-blocks__h3:first-child { margin-top: 0; }


/* 값은 brandTabs.vue·reviewClip.vue(.clip_tabs)를 2026-11-02 실측해 그대로 옮겼다.
   · 배경은 사이트 기본 배경과 같은 값(--gt-bg)을 직접 칠한다 — 가이드는 밝은 테마라(.mbg 흰 바탕) 배경이 없으면 흰 바탕 위에 흰 글자가 얹힌다.
   · 글꼴은 사이트 글꼴(Noto Sans KR) — 가이드 본문 글꼴(Pretendard)·줄 간격(1.75)을 이어받지 않게 직접 정한다.
   · 위 1px 은 Clip 화면과 같은 머리 바닥 선(--gt-top)이다. 머리 뒤 띠(.mbg-band)가 120px 라 이 선이 y120 에 그어지고,
     메뉴 글자는 Clip 과 같은 높이에 앉는다(메뉴 아랫선 위치도 Clip 과 같다 — 높이 합계 그대로).
   · 첫 항목 시작선은 가이드 본문 열(.mbg-wrap — 허브 제목·경로 표시가 시작하는 선)과 같다. Clip 이 「메뉴 = 본문 같은 선」인 원칙을
     가이드 본문 열(--mbg-max)에 적용한 것이다. 좁은 화면(≤950)도 같은 선을 쓴다. */
.guide_tabs[data-v-61858db8] {
  /* 토큰 — Clip·브랜드 메뉴와 같은 값(이 선언부 밖에서는 색·글꼴을 직접 쓰지 않는다) */
  --gt-bg: #0E0E0D;
  --gt-top: #1D1E20;
  --gt-line: #282A2C;
  --gt-on: #fff;
  --gt-off: rgba(255, 255, 255, 0.36);
  --gt-hover: rgba(255, 255, 255, 0.7);
  --gt-font: "Noto Sans KR", sans-serif;
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--gt-top);
  border-bottom: 1px solid var(--gt-line);
  background: var(--gt-bg);
  font-family: var(--gt-font);
  line-height: normal;
  letter-spacing: normal;
}
.guide_tabs ul[data-v-61858db8] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 48px;
  /* 목록은 화면 오른쪽 끝까지 흐른다(§5.5 ① ③). 첫 항목 시작선만 가이드 본문 열과 같다(.mbg-wrap 안쪽 왼쪽 선 = 폭 20/32/40 여백, 넓은 화면은 1120px 열). */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 0 0 max(var(--mbg-gut), calc((100% - var(--mbg-max)) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
}
.guide_tabs ul[data-v-61858db8]::-webkit-scrollbar { display: none;
}
.guide_tabs li[data-v-61858db8] { flex: 0 0 auto;
}
.guide_tabs a[data-v-61858db8] {
  position: relative;
  display: block;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--gt-off);
  white-space: nowrap;
  transition: color 0.2s;
}
.guide_tabs a[data-v-61858db8]:hover { color: var(--gt-hover);
}
.guide_tabs li.on a[data-v-61858db8] { color: var(--gt-on); font-weight: 700;
}
.guide_tabs li.on a[data-v-61858db8]::after {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  content: '';
  background-color: var(--gt-on);
  border-radius: 2px 2px 0 0;
}
/* 어두운 바탕이라 가이드 공통 포커스 고리(진한 주황)가 묻힌다 — 흰 고리를 안쪽에 그려 목록 가장자리에서 잘리지 않게 한다 */
.guide_tabs a[data-v-61858db8]:focus-visible { outline: 2px solid var(--gt-on); outline-offset: -2px; border-radius: 4px;
}
/* 좁은 화면(Clip·브랜드 메뉴와 같은 rem 값 — 사이트가 폭에 따라 html 글자 크기를 바꾸므로 같이 따라 움직인다) */
@media (max-width: 950px) {
.guide_tabs ul[data-v-61858db8] { max-width: none; gap: 6.4rem;
}
.guide_tabs a[data-v-61858db8] { padding: 2.8rem 0; font-size: 2.6rem;
}
.guide_tabs li.on a[data-v-61858db8]::after { bottom: -0.2rem; height: 0.4rem; border-radius: 0.2rem 0.2rem 0 0;
}
}
@media print {
.guide_tabs[data-v-61858db8] { display: none;
}
}