/*
Theme Name: GeneratePress Child
Theme URI: https://betterlifekorea.co.kr
Description: betterlifekorea.co.kr 전용 자식 테마. 워드프레스 "추가 CSS"에 있던 837줄을 이 파일로 옮겼습니다. 부모 테마(GeneratePress)가 업데이트되어도 이 파일은 영향을 받지 않습니다.
Author: betterlifekorea
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child
*/

/* ===================================================================
   아래 내용은 2026-08-29 에 "외모 > 사용자 정의하기 > 추가 CSS" 에서
   그대로 옮겨왔습니다. 한 글자도 바꾸지 않았습니다.

   원본은 DB 에 그대로 남아 있습니다(wp_posts ID 8294, post_name='generatepress').
   자식 테마를 비활성화하고 GeneratePress 로 돌아가면 예전 상태가 그대로 복원됩니다.

   부모 테마가 이 파일을 자동으로 불러옵니다(generatepress/inc/general.php:66).
   별도의 functions.php 는 필요하지 않습니다.

   정리(중복 제거, !important 감축, @media 통합)는 이관과 분리해서
   나중에 단계적으로 진행합니다. 지금은 동작이 완전히 같은 상태를 유지합니다.
   =================================================================== */

/* ===================================================================
   목차
   -------------------------------------------------------------------
   1. 폰트 / 본문 타이포그래피
   2. 본문 요소 (링크, 인용, 코드, 이미지)
   3. 목록 / 아카이브 / 단일 글
   4. 헤더 / 내비게이션 / 푸터
   5. 사이드바 / 위젯
   6. 텔레그램 버튼 · CTA
   7. 표 / 차트 (컨콜 리포트)
   8. 반응형 (모든 @media 는 파일 맨 끝에 모아둠)

   정리 이력 (2026-08-29)
   - 뒤에서 !important 로 완전히 덮여 적용되지 않던 규칙 3개 제거
   - 흩어져 있던 @media 블록(768px 4곳, 600px 2곳)을 끝으로 통합
   - CSS 선언 내용은 하나도 바꾸지 않음 (캐스케이드 동일성 검증 완료)
   =================================================================== */

/* =========================================
   Font: Pretendard + Noto Serif KR 강제 적용
   ========================================= */
body,
.entry-content,
.site-content {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 
                 system-ui, Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
    font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
    letter-spacing: -0.02em;
}

/* =========================================
   Readable Body - 롱폼 최적화
   ========================================= */
.entry-content {
    font-size: 17px;
    line-height: 1.8;
    color: #222;
}

.entry-content p {
    margin-bottom: 1.5em;
}

/* 본문 속 강조 — 빨강 언더라인 */
.entry-content a {
    color: #8B0000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.entry-content a:hover {
    color: #5A0000;
    text-decoration-thickness: 2px;
}

/* =========================================
   Blockquote — 리서치 인용 스타일
   ========================================= */
.entry-content blockquote {
    border-left: 3px solid #8B0000;
    padding: 0.5em 1.5em;
    margin: 2em 0;
    font-style: italic;
    color: #555;
    background: transparent;
}

/* =========================================
   Code / 숫자 monospace
   ========================================= */
code, pre, kbd, samp {
    font-family: 'SF Mono', Menlo, Monaco, 'Cascadia Code', 
                 'Roboto Mono', Consolas, monospace;
    font-size: 0.92em;
    background: #F2F0E8;
    padding: 2px 6px;
    border-radius: 3px;
}

pre {
    padding: 1em;
    overflow-x: auto;
    line-height: 1.5;
}

/* =========================================
   Images / Figures
   -----------------------------------------
   figure 가 바깥 여백을 담당하고, 그 안의 img 는 여백을 갖지 않는다.
   예전에는 figure 와 img 에 같은 margin 이 동시에 걸려 있었는데,
   코어가 .wp-block-image img 를 인라인(vertical-align:bottom)으로 두는 탓에
   부모와 마진 상쇄가 일어나지 않아 여백이 2배로 쌓였다(2em+2em=약 68px).
   ========================================= */
.entry-content img {
    max-width: 100%;
}

.entry-content figure,
.wp-block-image {
    margin: 1.2em auto;
    max-width: 100%;
}

/* figure 안의 img — 여백은 figure 가 이미 갖고 있다 */
.entry-content figure img {
    margin: 0;
}

/* figure 없이 본문에 직접 들어간 img */
.entry-content > img {
    display: block;
    margin: 1.2em auto;
}

.wp-block-image figcaption,
.entry-content figcaption {
    font-size: 14px;
    color: #777;
    text-align: center;
    margin-top: 0.5em;
    font-style: italic;
}

.entry-title {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 0.3em;
}

.entry-title a {
    color: #1A1A1A;
    text-decoration: none;
}

.entry-title a:hover {
    color: #8B0000;
}

.entry-meta {
    font-size: 13px;
    color: #888;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 1em;
}

.entry-meta a {
    color: #888;
    text-decoration: none;
}

.entry-summary {
    color: #555;
    font-size: 16px;
    line-height: 1.7;
}

/* =========================================
   Single Post — 제목 영역
   ========================================= */
.single .entry-header {
    padding: 2em 0 1em;
    border-bottom: 1px solid #E8E4D8;
    margin-bottom: 2em;
}

.single .entry-title {
    font-size: 40px;
    line-height: 1.25;
}

.single .entry-meta {
    margin-top: 1em;
}

/* =========================================
   Header — 심플한 제호 스타일
   ========================================= */
.site-header {
    border-bottom: 1px solid #E8E4D8;
    padding: 1.5em 0;
}

.main-navigation a {
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #333;
}

.main-navigation a:hover {
    color: #8B0000 !important;
}

/* =========================================
   Footer — 차분하게
   ========================================= */
.site-footer {
    background: #F2F0E8;
    color: #666;
    font-size: 14px;
    padding: 3em 0 2em;
    border-top: 1px solid #E8E4D8;
}

/* =========================================
   한국어 문단 들여쓰기 — 모든 문단 일괄 적용
   ========================================= */
.entry-content p,
.entry-summary p,
.post-content p,
article .entry-content p {
    text-indent: 1em;
}

/* 인용구 내부, 캡션, 리스트는 제외 (이건 유지해야 자연스러움) */
.entry-content blockquote p,
.entry-content .wp-block-quote p,
.entry-content figcaption,
.wp-block-image figcaption,
.entry-content .wp-caption-text,
.entry-content li,
.entry-content li p {
    text-indent: 0;
}

/* =========================================
   Single Post의 자동 대표 이미지 숨김
   (본문에 이미 이미지 넣었을 때 중복 방지)
   ========================================= */
.single .post-image,
.single .featured-image,
.single .post-image-above-header,
.single .post-image-below-header,
.single article > .post-image,
.single .inside-article > .post-image {
    display: none;
}

/* =========================================
   사이드바 — 미니멀, 본문과 통일감
   ========================================= */
/* 배경 — 본문과 같은 크림색으로 통일 */
.widget-area,
.sidebar,
#right-sidebar,
#left-sidebar {
    background: transparent;
    padding: 0;
}

.widget-area .widget,
.sidebar .widget,
#right-sidebar .widget,
#left-sidebar .widget {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0 0 2em 0;
    margin-bottom: 2em;
    border-bottom: 1px solid #E8E4D8;
}

.widget-area .widget:last-child,
.sidebar .widget:last-child,
#right-sidebar .widget:last-child {
    border-bottom: none;
}

/* =========================================
   위젯 제목 — 작고 단정하게
   ========================================= */
.widget .widget-title,
.widget-area .widget-title,
.sidebar .widget-title,
.widget h2,
.widget h3,
.widget h4,
.widget-area h2.widget-title,
.widget-area h3.widget-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8B0000;
    margin: 0 0 1em 0 !important;
    padding: 0 0 0.4em 0 !important;
    border-bottom: 2px solid #8B0000;
    display: inline-block;
    line-height: 1.4;
}

/* =========================================
   위젯 리스트
   ========================================= */
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    padding: 0.5em 0;
    border-bottom: 1px dotted #E8E4D8;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget ul li a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 14px;
}

.widget ul li a:hover {
    color: #8B0000;
}

/* =========================================
   Archives / Categories — post count 정렬
   ========================================= */
.widget_archive ul li,
.widget_categories ul li,
.wp-block-archives-list li,
.wp-block-categories-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* post count 숫자 스타일 */
.widget_archive ul li,
.widget_categories ul li,
.wp-block-archives-list li,
.wp-block-categories-list li {
    color: #999;
    font-size: 13px;
}

/* =========================================
   Archive 페이지 (월별, 카테고리, 태그)
   — 대표 이미지 숨김, 리스트 중심
   ========================================= */
/* 아카이브 페이지의 대표 이미지 전부 숨김 */
.archive .post-image,
.archive .featured-image,
.archive article .post-image,
.archive article figure.post-image,
.archive .wp-post-image,
.blog .post-image,
.search .post-image {
    display: none;
}

/* 아카이브 article 블록 — 간격 좁게 정돈 */
.archive article,
.blog article,
.search article {
    padding: 1.5em 0;
    border-bottom: 1px solid #E8E4D8;
    margin: 0;
}

.archive article:last-child,
.blog article:last-child {
    border-bottom: none;
}

/* 아카이브 제목 — 크기 적당히 */
.archive .entry-title,
.blog .entry-title {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 0.3em;
}

.archive .entry-title a,
.blog .entry-title a {
    color: #1A1A1A;
    text-decoration: none;
}

.archive .entry-title a:hover,
.blog .entry-title a:hover {
    color: #8B0000;
}

/* 메타(날짜, 작성자) — 작고 은은하게 */
.archive .entry-meta,
.blog .entry-meta {
    font-size: 12px;
    color: #888;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.5em;
}

/* 요약(excerpt) 스타일 */
.archive .entry-summary,
.blog .entry-summary {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin-top: 0.5em;
}

/* 카테고리/태그 footer — 아카이브에선 숨김 (선택) */
.archive .entry-footer,
.blog .entry-footer {
    display: none;
}

/* "Read more" 링크 스타일 */
.archive .read-more,
.blog .read-more,
.entry-summary .more-link {
    color: #8B0000;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =========================================
   Sticky MENU 전용 — 헤더는 그대로, 메뉴만 고정
   ========================================= */
/* 헤더는 sticky 해제 — 평범하게 스크롤과 함께 사라짐 */
.site-header,
#masthead,
header.site-header {
    position: relative;
    top: auto;
}

/* 메뉴(네비게이션)만 sticky로 */
.main-navigation,
#site-navigation,
nav.main-navigation {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #FAFAF7;
    border-bottom: 1px solid #E8E4D8;
    width: 100%;
    transition: box-shadow 0.2s ease;
}

/* =========================================
   관리자 툴바 높이 고려
   ========================================= */
/* 로그인 상태(admin bar 표시)에서 sticky 메뉴 위치 조정 */
body.admin-bar .main-navigation,
body.admin-bar #site-navigation {
    top: 32px;  /* 관리자 툴바 높이 */
}

/* 스크롤 내려갈 때 살짝 그림자 추가 (선택) */
.main-navigation.is-stuck,
body.scrolled .main-navigation {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 내부 앵커 링크 클릭 시 sticky 메뉴 높이만큼 여백 확보 */
html {
    scroll-padding-top: 60px;
}

/* =========================================
   Telegram 구독 버튼 — 진짜 버튼처럼, SVG 아이콘
   ========================================= */
/* 메뉴 아이템 자체는 가운데 정렬되도록 */
.main-navigation .menu-item.telegram-subscribe {
    display: flex;
    align-items: center;
    padding: 0 0.5em;
}

/* 진짜 버튼 스타일 */
.main-navigation .menu-item.telegram-subscribe > a,
.main-navigation li.telegram-subscribe > a {
    background: #0088cc;
    color: #FFFFFF;
    padding: 0.5em 1.1em;
    border-radius: 6px;
    margin: 0 0.3em;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    box-shadow: 0 1px 3px rgba(0, 136, 204, 0.2);
    height: auto;
    min-height: 0;
}

/* hover 효과 */
.main-navigation .menu-item.telegram-subscribe > a:hover,
.main-navigation li.telegram-subscribe > a:hover {
    background: #006699;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 136, 204, 0.3);
}

/* Telegram 종이비행기 SVG 아이콘 */
.main-navigation .menu-item.telegram-subscribe > a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E") !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    flex-shrink: 0;
}

/* 포스팅 컨콜 css */
/* ===================================================================
   컨콜 분석 리포트용 테이블·차트 스타일
   -------------------------------------------------------------------
   적용 위치: 워드프레스 관리자 →
              외모(Appearance) → 사용자 정의하기(Customize) → 추가 CSS
   한 번만 넣어두면 모든 글에 적용된다. 본문 md에는 <style>을 넣지 마라.
   (글마다 삽입하면 같은 규칙이 글 수만큼 중복된다)
   =================================================================== */
/* ── 표 본체 ────────────────────────────────────────────────────────
   width:100% 로 항상 컨텐츠 폭을 꽉 채운다.
   display:block 을 쓰면 표가 내용 크기로 줄어들어 100%가 깨지므로 쓰지 않는다. */
.entry-content table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  margin: 16px 0;
}

/* ── 헤더 ──────────────────────────────────────────────────────────
   word-break: keep-all 이 핵심.
   한국어에서 이걸 안 주면 좁은 칸에서 "구체성"이 구/체/성으로 세로로 쪼개진다.
   keep-all 은 단어를 붙여두고 공백에서만 줄바꿈한다. */
.entry-content table th {
  font-size: 13.5px;
  font-weight: 700;
  padding: 7px 8px;
  line-height: 1.35;
  word-break: keep-all;
  text-align: left;
  border-bottom: 2px solid #d8d8de;
}

/* ── 데이터 셀 ──────────────────────────────────────────────────────
   헤더보다 1px 작게. tabular-nums 로 숫자 자릿수를 세로로 정렬한다. */
.entry-content table td {
  font-size: 12.5px;
  padding: 6px 8px;
  line-height: 1.55;
  word-break: keep-all;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid #ececed;
}

/* 숫자 열(마크다운의 ---: 정렬)은 오른쪽 정렬 유지 + 줄바꿈 금지 */
.entry-content table td[style*="right"],
.entry-content table th[style*="right"] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 표 안의 인라인 코드(유니코드 막대 등)는 조금 더 작게 */
.entry-content table td code {
  font-size: 11.5px;
  padding: 1px 4px;
}

/* 긴 URL 등 끊을 수 없는 문자열이 표를 밀어내는 것 방지 */
.entry-content table td a {
  overflow-wrap: anywhere;
}

/* ── 차트 컨테이너 ──────────────────────────────────────────────────
   리포트의 인라인 SVG 차트(.rtx-* )는 자체 <style>을 들고 다니지만,
   테마의 여백/배경과 충돌하지 않도록 최소한의 보정만 둔다. */
.entry-content div[class^="rtx-"] {
  max-width: 100%;
  overflow: hidden;
}

.entry-content div[class^="rtx-"] svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.form-submit input[type="submit"],
#commentform input[type="submit"],
.wp-block-post-comments-form .wp-block-button__link {
  background-color: #1a4f8b;
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
}

.form-submit input[type="submit"]:hover,
#commentform input[type="submit"]:hover {
  background-color: #143d6b;
  color: #ffffff;
}

/* =========================================
   사이드바 텔레그램 구독 위젯
   ========================================= */
.tg-widget {
  background: #F2F0E8;
  border: 1px solid #E8E4D8;
  border-radius: 6px;
  padding: 1.4em 1.2em;
  text-align: center;
}

.tg-widget-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8B0000;
  margin-bottom: 0.7em;
}

.tg-widget-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 1.1em 0;
  text-indent: 0;
}

.tg-widget-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45em;
  background: #0088cc;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  padding: 0.6em 1.3em;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease;
}

.tg-widget-btn::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.tg-widget-btn:hover {
  background: #006699;
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* 본문 하단 주의사항 */
.post-disclaimer {
  margin: 2.5em 0 1em;
  padding-top: 1.5em;
  border-top: 1px solid #E8E4D8;
}

.post-disclaimer-title {
  text-align: center;
  font-size: 15px;
  color: #555;
  margin-bottom: 1.2em;
}

.post-disclaimer p {
  font-size: 14px;
  line-height: 1.75;
  color: #777;
  margin-bottom: 1em;
  text-indent: 1em;
}

/* =========================================
   본문 하단 텔레그램 CTA
   ========================================= */
.tg-post-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2em;
  background: #F2F0E8;
  border: 1px solid #E8E4D8;
  border-left: 3px solid #0088cc;
  border-radius: 6px;
  padding: 1.3em 1.5em;
  margin: 3em 0 1.5em;
}

.tg-post-cta-text {
  text-indent: 0;
  line-height: 1.5;
}

.tg-post-cta-text strong {
  display: block;
  font-family: 'Noto Serif KR', serif;
  font-size: 15px;
  color: #1A1A1A;
  margin-bottom: 0.25em;
}

.tg-post-cta-text span {
  font-size: 13.5px;
  color: #666;
}

.tg-post-cta-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45em;
  flex-shrink: 0;
  background: #0088cc;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  padding: 0.6em 1.3em;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.1s ease;
}

.tg-post-cta-btn::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.tg-post-cta-btn:hover {
  background: #006699;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* ===================================================================
   8. 반응형
   -------------------------------------------------------------------
   원래 파일 곳곳에 흩어져 있던 @media 블록을 브레이크포인트 내림차순으로
   모았습니다. 넓은 조건이 먼저 와야 좁은 조건이 덮어쓸 수 있습니다.
   =================================================================== */

/* --- @media (max-width: 782px) --- */
@media (max-width: 782px) {
	/* 모바일에서 관리자 툴바는 46px */
    body.admin-bar .main-navigation,
    body.admin-bar #site-navigation {
        top: 46px;
    }
}

/* --- @media (max-width: 768px)  (원래 4곳에 나뉘어 있던 것을 합쳤습니다) --- */
@media (max-width: 768px) {
	/* =========================================
	모바일 대응
	========================================= */
    .entry-content { font-size: 16px; line-height: 1.75; }
    .single .entry-title { font-size: 28px; }
    .entry-title { font-size: 22px; }
	/* 모바일에선 어차피 sticky 해제였으니 다시 해제 보장 */
    body.admin-bar .main-navigation,
    body.admin-bar #site-navigation {
        position: relative;
        top: auto;
    }
	/* 모바일에선 sticky 해제 (공간 아끼기) */
    .main-navigation,
    #site-navigation {
        position: relative;
        top: auto;
    }
	/* 모바일 대응 */
    .main-navigation .menu-item.telegram-subscribe > a {
        margin: 0.5em;
        display: inline-flex;
    }
}

/* --- @media (max-width: 600px)  (원래 2곳에 나뉘어 있던 것을 합쳤습니다) --- */
@media (max-width: 600px) {
	/* ── 모바일 ────────────────────────────────────────────────────────
	좁은 화면에서는 한 단계 더 줄이고, 그래도 넘치면 표만 가로 스크롤.
	(본문 전체가 가로로 밀리면 안 되므로 표 자체에만 스크롤을 건다) */
  .entry-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .entry-content table th { font-size: 12.5px; padding: 6px 6px; }
  .entry-content table td { font-size: 11.5px; padding: 5px 6px; }
  .scr-embed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
  }
}

/* --- @media (prefers-color-scheme: dark) --- */
@media (prefers-color-scheme: dark) {
	/* 다크 모드 대응 — 차트 카드가 흰 배경을 가정하지 않도록 */
  .entry-content table th { border-bottom-color: #444; }
  .entry-content table td { border-bottom-color: #333; }
}