@charset "utf-8";
/*
 * tg-post.css — 게시물 본문 공통 디자인 시스템  v1.0.0 (2026-09-15)
 * ───────────────────────────────────────────────────────────────────
 * 이 파일 하나가 모든 게시판 본문의 생김새를 결정한다.
 * 게시물 본문(wr_content)에는 <style> 도 style="" 도 넣지 않는다.
 *
 * [왜 만들었나]
 *   글마다 인라인 CSS 를 넣던 방식은 본문 합계 5,989KB · !important 134,088개로
 *   불어났고 글마다 글꼴·자간·본문폭·명암이 달라졌다. 원인을 추적해 보니
 *   게시판 스킨 style.css 첫머리의  p { margin-bottom: 0 !important }  한 줄이었다.
 *   그 한 줄을 이기려고 모든 선언에 !important 를 붙이는 연쇄가 시작된 것이다.
 *
 * [충돌 실측 — 2026-09-15, 라이브 페이지에서 직접 확인]
 *   본문에 닿는 외부 규칙은 전부 타입 선택자(특이도 0,0,1)다.
 *     bootstrap.min.css  h1~h4 / p / ul / a / button 여백·크기
 *     default.css        h1~h4 font-size:1em, ul list-style:none, p margin:0
 *     style.css(테마)    h1~h4 / p 크기·색, a 색, ul li list-style:none
 *     스킨 style.css     p { margin-bottom: 0 !important }   ← 유일한 !important
 *   따라서 `.tg-post 요소`(0,1,1) 면 전부 이긴다.
 *   !important 는 위 마지막 한 줄을 이기려고 p 여백에만 쓴다. 그 밖에는 쓰지 않는다.
 *   본문에 ID 선택자를 쓰지 않는 이유: 목록에서 본문을 함께 출력하는 게시판이 있어
 *   id 가 중복될 수 있다. 클래스만으로 충분하다.
 *
 * [원칙]
 *   1. 라이트 모드 하나. 본문에 다크 배경을 쓰지 않는다.
 *   2. 아이콘은 Material Symbols 하나. (.agent/rules/icon_names.txt 안에서만)
 *   3. 본문 폭은 하나(--tg-measure). 글마다 다르게 하지 않는다.
 *   4. 색·간격·글자크기는 아래 토큰만 쓴다. 임의 값 금지.
 *   5. 모든 글은 본문 안 맥락 링크 3개 이상 + 하단 추천 3개를 갖는다(11·12절).
 */

/* ═══════════════════════════════════════════════════════════
   1. 토큰
   ═══════════════════════════════════════════════════════════ */
.tg-post {
  /* 글자 */
  --tg-font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 색 — 라이트 단일 팔레트 */
  --tg-fg:        #1c2230;
  --tg-fg-strong: #0d1320;
  --tg-fg-soft:   #56606f;
  --tg-fg-mute:   #8a93a1;

  --tg-bg:        #ffffff;
  --tg-bg-soft:   #f7f9fc;
  --tg-bg-alt:    #eff4fa;
  --tg-line:      #e4e9f0;
  --tg-line-soft: #eef2f7;

  --tg-brand:      #1d98dc;
  --tg-brand-dark: #1272a8;
  --tg-brand-soft: #e9f5fd;

  --tg-info:   #1d98dc;  --tg-info-soft:   #e9f5fd;
  --tg-tip:    #12a06a;  --tg-tip-soft:    #e6f6ef;
  --tg-warn:   #b4770d;  --tg-warn-soft:   #fdf4e3;
  --tg-danger: #d2453f;  --tg-danger-soft: #fdedec;

  /* 치수 */
  --tg-measure: 860px;
  --tg-radius: 14px;
  --tg-radius-sm: 10px;

  /* 간격 척도 */
  --tg-s1: 4px;  --tg-s2: 8px;  --tg-s3: 12px; --tg-s4: 16px;
  --tg-s5: 20px; --tg-s6: 24px; --tg-s7: 32px; --tg-s8: 40px;
  --tg-s9: 56px; --tg-s10: 72px;
}

/* ═══════════════════════════════════════════════════════════
   2. 뿌리 — 최소한의 재설정
   ═══════════════════════════════════════════════════════════ */
.tg-post,
.tg-post *,
.tg-post *::before,
.tg-post *::after { box-sizing: border-box; }

.tg-post {
  max-width: var(--tg-measure);
  margin: 0 auto;
  padding: 0 var(--tg-s4);
  font-family: var(--tg-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -0.01em;
  color: var(--tg-fg);
  background: var(--tg-bg);
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 본문보다 넓게 빼야 하는 요소(표·그리드) */
.tg-post .tg-wide {
  width: calc(100% + var(--tg-s8));
  margin-left: calc(var(--tg-s8) / -2);
}

/* ═══════════════════════════════════════════════════════════
   3. 기본 활자
   ═══════════════════════════════════════════════════════════ */
.tg-post p {
  margin: 0 0 1.15em !important;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  color: inherit;
}
.tg-post p:last-child { margin-bottom: 0 !important; }

.tg-post h2,
.tg-post h3,
.tg-post h4 {
  color: var(--tg-fg-strong);
  font-family: inherit;
  letter-spacing: -0.025em;
  word-break: keep-all;
}
.tg-post h2 {
  margin: var(--tg-s10) 0 var(--tg-s5);
  padding-bottom: var(--tg-s4);
  border-bottom: 1px solid var(--tg-line);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
}
.tg-post h3 {
  margin: var(--tg-s8) 0 var(--tg-s3);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
}
.tg-post h4 {
  margin: var(--tg-s6) 0 var(--tg-s2);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
.tg-post > :first-child { margin-top: 0; }

.tg-post strong,
.tg-post b { font-weight: 700; color: var(--tg-fg-strong); }
.tg-post em { font-style: normal; color: var(--tg-brand-dark); font-weight: 600; }
.tg-post mark {
  padding: 0.1em 0.3em;
  border-radius: 4px;
  background: var(--tg-brand-soft);
  color: var(--tg-brand-dark);
  font-weight: 600;
}
.tg-post small { font-size: 14px; color: var(--tg-fg-mute); }

.tg-post a {
  color: var(--tg-brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(29,152,220,.35);
  transition: color .15s, text-decoration-color .15s;
}
.tg-post a:hover { color: var(--tg-brand); text-decoration-color: currentColor; }

.tg-post ul,
.tg-post ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.tg-post ul li { list-style: disc; }
.tg-post ol li { list-style: decimal; }
.tg-post li { margin: 0 0 var(--tg-s2); padding-left: 0.2em; }
.tg-post li::marker { color: var(--tg-brand); }
.tg-post li > ul,
.tg-post li > ol { margin: var(--tg-s2) 0 0; }

.tg-post code {
  padding: 0.15em 0.4em;
  border-radius: 5px;
  background: var(--tg-bg-alt);
  color: var(--tg-fg-strong);
  font-family: var(--tg-mono);
  font-size: 0.9em;
}
.tg-post pre {
  margin: 0 0 1.15em;
  padding: var(--tg-s5);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-sm);
  background: var(--tg-bg-alt);
  overflow-x: auto;
  font-family: var(--tg-mono);
  font-size: 14px;
  line-height: 1.7;
}
.tg-post pre code { padding: 0; background: none; }

.tg-post blockquote {
  margin: 0 0 1.15em;
  padding: var(--tg-s2) 0 var(--tg-s2) var(--tg-s5);
  border-left: 3px solid var(--tg-brand);
  color: var(--tg-fg-soft);
}
.tg-post hr { margin: var(--tg-s9) 0; border: 0; border-top: 1px solid var(--tg-line); }

.tg-post .tg-kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--tg-line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #fff;
  color: var(--tg-fg-strong);
  font-family: var(--tg-mono);
  font-size: 13px;
  line-height: 1.6;
}

/* 아이콘 — Material Symbols 하나만 */
.tg-post .material-symbols-outlined {
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -0.18em;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ═══════════════════════════════════════════════════════════
   4. 머리말
   ═══════════════════════════════════════════════════════════ */
.tg-post .tg-lead {
  margin: 0 0 var(--tg-s8);
  padding: 0 0 var(--tg-s7);
  border-bottom: 1px solid var(--tg-line);
}
.tg-post .tg-lead__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-s1);
  margin-bottom: var(--tg-s4);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--tg-brand-soft);
  color: var(--tg-brand-dark);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.tg-post .tg-lead__text {
  margin: 0 !important;
  font-size: 19px;
  line-height: 1.75;
  color: var(--tg-fg-soft);
}

.tg-post .tg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--tg-s3);
  margin: var(--tg-s6) 0 0;
}
.tg-post .tg-stat {
  padding: var(--tg-s4) var(--tg-s5);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-sm);
  background: var(--tg-bg-soft);
}
.tg-post .tg-stat__num {
  display: block;
  color: var(--tg-brand-dark);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.tg-post .tg-stat__label {
  display: block;
  margin-top: 2px;
  color: var(--tg-fg-mute);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════
   5. 섹션
   ═══════════════════════════════════════════════════════════ */
.tg-post .tg-section { margin: 0 0 var(--tg-s9); }
.tg-post .tg-section__label {
  display: block;
  margin-bottom: var(--tg-s2);
  color: var(--tg-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tg-post .tg-section__desc {
  margin: -16px 0 var(--tg-s6) !important;
  color: var(--tg-fg-soft);
}

/* ═══════════════════════════════════════════════════════════
   6. 카드 / 그리드
   ═══════════════════════════════════════════════════════════ */
.tg-post .tg-grid {
  display: grid;
  gap: var(--tg-s4);
  margin: 0 0 var(--tg-s6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tg-post .tg-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tg-post .tg-grid--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.tg-post .tg-card {
  padding: var(--tg-s5);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius);
  background: var(--tg-bg);
  transition: border-color .15s, box-shadow .15s;
}
.tg-post .tg-card:hover {
  border-color: #cfdae7;
  box-shadow: 0 2px 10px rgba(16,32,56,.05);
}
.tg-post .tg-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--tg-s3);
  border-radius: 10px;
  background: var(--tg-brand-soft);
  color: var(--tg-brand-dark);
}
.tg-post .tg-card__icon .material-symbols-outlined { font-size: 21px; vertical-align: 0; }
.tg-post .tg-card__title {
  margin: 0 0 var(--tg-s2);
  color: var(--tg-fg-strong);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
.tg-post .tg-card__desc {
  margin: 0 !important;
  color: var(--tg-fg-soft);
  font-size: 15px;
  line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════════
   7. 단계
   ═══════════════════════════════════════════════════════════ */
.tg-post .tg-steps {
  margin: 0 0 var(--tg-s6);
  padding: 0;
  list-style: none;
  counter-reset: tg-step;
}
.tg-post .tg-steps > .tg-step {
  position: relative;
  margin: 0;
  padding: 0 0 var(--tg-s6) var(--tg-s8);
  list-style: none;
}
.tg-post .tg-steps > .tg-step::before {
  counter-increment: tg-step;
  content: counter(tg-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tg-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  letter-spacing: 0;
}
.tg-post .tg-steps > .tg-step::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 6px;
  width: 1px;
  background: var(--tg-line);
}
.tg-post .tg-steps > .tg-step:last-child { padding-bottom: 0; }
.tg-post .tg-steps > .tg-step:last-child::after { display: none; }
.tg-post .tg-step__title {
  margin: 0 0 var(--tg-s2);
  color: var(--tg-fg-strong);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
}
.tg-post .tg-step__desc {
  margin: 0 !important;
  color: var(--tg-fg-soft);
  font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════
   8. 콜아웃
   ═══════════════════════════════════════════════════════════ */
.tg-post .tg-callout {
  display: flex;
  gap: var(--tg-s3);
  margin: 0 0 var(--tg-s6);
  padding: var(--tg-s5);
  border: 1px solid var(--tg-line);
  border-left: 3px solid var(--tg-info);
  border-radius: var(--tg-radius-sm);
  background: var(--tg-info-soft);
}
.tg-post .tg-callout__icon { flex: 0 0 auto; color: var(--tg-info); line-height: 1.6; }
.tg-post .tg-callout__body { flex: 1 1 auto; min-width: 0; }
.tg-post .tg-callout__title {
  margin: 0 0 var(--tg-s1);
  color: var(--tg-fg-strong);
  font-size: 16px;
  font-weight: 700;
}
.tg-post .tg-callout p { margin: 0 !important; color: var(--tg-fg); font-size: 16px; }
.tg-post .tg-callout p + p { margin-top: var(--tg-s2) !important; }

.tg-post .tg-callout--tip { border-left-color: var(--tg-tip); background: var(--tg-tip-soft); }
.tg-post .tg-callout--tip .tg-callout__icon { color: var(--tg-tip); }
.tg-post .tg-callout--warn { border-left-color: var(--tg-warn); background: var(--tg-warn-soft); }
.tg-post .tg-callout--warn .tg-callout__icon { color: var(--tg-warn); }
.tg-post .tg-callout--danger { border-left-color: var(--tg-danger); background: var(--tg-danger-soft); }
.tg-post .tg-callout--danger .tg-callout__icon { color: var(--tg-danger); }

/* ═══════════════════════════════════════════════════════════
   9. 체크리스트
   ═══════════════════════════════════════════════════════════ */
.tg-post .tg-checklist { margin: 0 0 var(--tg-s6); padding: 0; list-style: none; }
.tg-post .tg-checklist > li {
  position: relative;
  margin: 0 0 var(--tg-s3);
  padding-left: var(--tg-s7);
  list-style: none;
}
.tg-post .tg-checklist > li::before {
  content: "check";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--tg-tip);
  font-family: "Material Symbols Outlined";
  font-size: 19px;
  line-height: 1.5;
  font-variation-settings: "FILL" 0, "wght" 500;
}

/* ═══════════════════════════════════════════════════════════
   10. 표
   ═══════════════════════════════════════════════════════════ */
.tg-post .tg-table-wrap {
  margin: 0 0 var(--tg-s6);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-sm);
  overflow-x: auto;
}
.tg-post table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
.tg-post thead th {
  background: var(--tg-bg-alt);
  color: var(--tg-fg-strong);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.tg-post th,
.tg-post td {
  padding: var(--tg-s3) var(--tg-s4);
  border-bottom: 1px solid var(--tg-line-soft);
  vertical-align: top;
}
.tg-post tbody tr:last-child th,
.tg-post tbody tr:last-child td { border-bottom: 0; }
.tg-post td strong { color: var(--tg-fg-strong); }

/* ═══════════════════════════════════════════════════════════
   11. 연결 — 본문 안 맥락 링크 · 시리즈 이동
   ───────────────────────────────────────────────────────────
   글은 섬이 되면 안 된다. 모든 글은 본문 중간에 관련 글 링크를
   3개 이상 두고, 다른 글에서도 2회 이상 링크되어야 한다.
   ═══════════════════════════════════════════════════════════ */

/* 문단 사이에 끼우는 한 줄짜리 관련 글 */
.tg-post .tg-related {
  display: flex;
  align-items: flex-start;
  gap: var(--tg-s3);
  margin: 0 0 var(--tg-s6);
  padding: var(--tg-s4) var(--tg-s5);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-sm);
  background: var(--tg-bg-soft);
}
.tg-post .tg-related__icon { flex: 0 0 auto; color: var(--tg-brand); line-height: 1.6; }
.tg-post .tg-related__body { flex: 1 1 auto; min-width: 0; }
.tg-post .tg-related__label {
  display: block;
  margin-bottom: 2px;
  color: var(--tg-fg-mute);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tg-post .tg-related__link {
  color: var(--tg-fg-strong);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.tg-post .tg-related__link:hover { color: var(--tg-brand-dark); text-decoration: underline; }

/* 관련 글 여러 개를 묶어 보여 줄 때 */
.tg-post .tg-linklist { margin: 0 0 var(--tg-s6); padding: 0; list-style: none; }
.tg-post .tg-linklist > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--tg-line-soft);
  list-style: none;
}
.tg-post .tg-linklist > li:last-child { border-bottom: 0; }
.tg-post .tg-linklist > li > a {
  display: flex;
  align-items: center;
  gap: var(--tg-s2);
  padding: var(--tg-s3) 0;
  color: var(--tg-fg);
  font-size: 16px;
  text-decoration: none;
}
.tg-post .tg-linklist > li > a::after {
  content: "chevron_right";
  margin-left: auto;
  color: var(--tg-fg-mute);
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  font-weight: 400;
}
.tg-post .tg-linklist > li > a:hover { color: var(--tg-brand-dark); }

/* 같은 주제 묶음 안에서 앞/뒤 글 이동 */
.tg-post .tg-series {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tg-s3);
  margin: var(--tg-s8) 0 var(--tg-s6);
}
.tg-post .tg-series__item {
  display: block;
  padding: var(--tg-s4) var(--tg-s5);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-sm);
  color: var(--tg-fg);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.tg-post .tg-series__item:hover { border-color: #cfdae7; background: var(--tg-bg-soft); color: var(--tg-fg); }
.tg-post .tg-series__dir {
  display: block;
  margin-bottom: 2px;
  color: var(--tg-fg-mute);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tg-post .tg-series__title { display: block; font-size: 15px; font-weight: 600; line-height: 1.55; }
.tg-post .tg-series__item--next { text-align: right; }

/* ═══════════════════════════════════════════════════════════
   12. 자주 묻는 질문 — JS 없이 <details>
   ═══════════════════════════════════════════════════════════ */
.tg-post .tg-faq {
  margin: 0 0 var(--tg-s6);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-sm);
  overflow: hidden;
}
.tg-post .tg-faq > details { border-bottom: 1px solid var(--tg-line-soft); }
.tg-post .tg-faq > details:last-child { border-bottom: 0; }
.tg-post .tg-faq > details > summary {
  display: flex;
  align-items: flex-start;
  gap: var(--tg-s3);
  padding: var(--tg-s4) var(--tg-s5);
  background: var(--tg-bg);
  color: var(--tg-fg-strong);
  font-size: 16px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: background .15s;
}
.tg-post .tg-faq > details > summary::-webkit-details-marker { display: none; }
.tg-post .tg-faq > details > summary::after {
  content: "expand_more";
  margin-left: auto;
  color: var(--tg-fg-mute);
  font-family: "Material Symbols Outlined";
  font-size: 22px;
  font-weight: 400;
  transition: transform .18s;
}
.tg-post .tg-faq > details[open] > summary::after { transform: rotate(180deg); }
.tg-post .tg-faq > details > summary:hover { background: var(--tg-bg-soft); }
.tg-post .tg-faq__answer {
  padding: 0 var(--tg-s5) var(--tg-s5);
  color: var(--tg-fg-soft);
  font-size: 16px;
}
.tg-post .tg-faq__answer p:last-child { margin-bottom: 0 !important; }

/* ═══════════════════════════════════════════════════════════
   13. 탭 — tg-post.js 가 동작을 붙인다
   ═══════════════════════════════════════════════════════════ */
.tg-post .tg-tabs { margin: 0 0 var(--tg-s6); }
.tg-post .tg-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-s1);
  margin-bottom: var(--tg-s5);
  padding: var(--tg-s1);
  border: 1px solid var(--tg-line);
  border-radius: 999px;
  background: var(--tg-bg-soft);
}
.tg-post .tg-tabs__btn {
  flex: 1 1 auto;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tg-fg-soft);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tg-post .tg-tabs__btn:hover { color: var(--tg-fg-strong); }
.tg-post .tg-tabs__btn[aria-selected="true"] {
  background: var(--tg-bg);
  color: var(--tg-brand-dark);
  box-shadow: 0 1px 4px rgba(16,32,56,.08);
}
.tg-post .tg-tabs__panel[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════
   14. 그림 · 동영상
   ═══════════════════════════════════════════════════════════ */
.tg-post img { max-width: 100%; height: auto; }
.tg-post .tg-figure { margin: 0 0 var(--tg-s6); }
.tg-post .tg-figure img {
  display: block;
  width: 100%;
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-sm);
}
.tg-post .tg-figure figcaption {
  margin-top: var(--tg-s2);
  color: var(--tg-fg-mute);
  font-size: 14px;
  text-align: center;
}
.tg-post .tg-video {
  position: relative;
  margin: 0 0 var(--tg-s6);
  border-radius: var(--tg-radius-sm);
  background: #0d1320;
  overflow: hidden;
}
.tg-post .tg-video video,
.tg-post .tg-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════
   15. 작은 조각
   ═══════════════════════════════════════════════════════════ */
.tg-post .tg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tg-bg-alt);
  color: var(--tg-fg-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.tg-post .tg-badge--brand { background: var(--tg-brand-soft); color: var(--tg-brand-dark); }
.tg-post .tg-badge--tip { background: var(--tg-tip-soft); color: var(--tg-tip); }
.tg-post .tg-badge--warn { background: var(--tg-warn-soft); color: var(--tg-warn); }
.tg-post .tg-badge--danger { background: var(--tg-danger-soft); color: var(--tg-danger); }

.tg-post .tg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-s2);
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--tg-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.tg-post .tg-btn:hover { background: var(--tg-brand-dark); color: #fff; text-decoration: none; }
.tg-post .tg-btn--ghost {
  border: 1px solid var(--tg-line);
  background: transparent;
  color: var(--tg-brand-dark);
}
.tg-post .tg-btn--ghost:hover { background: var(--tg-bg-soft); color: var(--tg-brand-dark); }

/* 출처 표기 — 사실 확인의 근거를 남긴다 */
.tg-post .tg-source {
  margin: var(--tg-s8) 0 0;
  padding-top: var(--tg-s4);
  border-top: 1px solid var(--tg-line);
  color: var(--tg-fg-mute);
  font-size: 13px;
  line-height: 1.7;
}
.tg-post .tg-source a { color: var(--tg-fg-soft); }

/* ═══════════════════════════════════════════════════════════
   16. 좁은 화면
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .tg-post { padding: 0 var(--tg-s3); font-size: 16px; line-height: 1.78; }
  .tg-post h2 { margin-top: var(--tg-s9); font-size: 23px; }
  .tg-post h3 { font-size: 19px; }
  .tg-post h4 { font-size: 17px; }
  .tg-post .tg-lead__text { font-size: 17px; }
  .tg-post .tg-card,
  .tg-post .tg-callout,
  .tg-post .tg-related { padding: var(--tg-s4); }
  .tg-post .tg-steps > .tg-step { padding-left: var(--tg-s7); }
  .tg-post .tg-wide { width: 100%; margin-left: 0; }
  .tg-post .tg-tabs__nav { border-radius: var(--tg-radius-sm); }
  .tg-post .tg-tabs__btn { flex: 1 1 40%; border-radius: var(--tg-radius-sm); }
  .tg-post .tg-series { grid-template-columns: 1fr; }
  .tg-post .tg-series__item--next { text-align: left; }
}

@media print {
  .tg-post .tg-tabs__panel[hidden] { display: block !important; }
}