/* =========================================================
   휘슬라이프 블로그 목록 레이아웃
   - 본사이트(010car.kr) 공지사항·FAQ 규격을 따름:
     본문 1200px / 상단 64px / 하단 140px, 대제목 42px·300,
     브레드크럼 우측 12px, 카테고리 칩 44px·radius 50,
     구분선 #eee, 페이지네이션 30px 원형
   - 리스트 행은 뱅크샐러드 형식: 썸네일 + 제목 + 요약 + 태그·날짜 + 화살표
   ========================================================= */

body.whistle-hub { background: #fff; } /* Kadence 기본 배경(#f8f8f8) → 본사이트와 같은 흰색 */
.wl-archive { font-family: "Pretendard Variable", sans-serif; letter-spacing: -0.4px; color: #222; }
.wl-archive *, .wl-archive *::before, .wl-archive *::after { box-sizing: border-box; }
.wl-archive a { text-decoration: none; color: inherit; }
.wl-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 64px 0 140px; min-height: calc(100vh - 100px); } /* 본사이트 #container 와 동일: 글이 적어도 푸터가 올라오지 않음 */

/* ---------- 브레드크럼 (본사이트 navPath: 헤더 아래 고정, 스크롤 시 헤더와 함께 이동) ---------- */
.wl-navPath { position: fixed; top: 100px; right: calc(50% - 600px); z-index: 4; height: 64px; display: flex; align-items: center; transition-duration: 0.4s; }
body.admin-bar .wl-navPath { top: 132px; }
.wl-navPath ul { display: flex; justify-content: flex-end; align-items: center; margin: 0; padding: 0; list-style: none; }
.wl-navPath li { position: relative; font-size: 12px; font-weight: 300; line-height: 18px; color: #7a7a7a; }
.wl-navPath li ~ li { margin-left: 26px; }
.wl-navPath li ~ li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 10px; margin-top: -5px; background: url("../images/common/icon_arrPath.png") center top 1px / 100% auto no-repeat; }
.wl-navPath li:first-child a { display: block; width: 15px; height: 14px; margin-top: 2px; font-size: 0; text-indent: -999px; overflow: hidden; background: url("../images/common/icon_path_home.png") center center / 15px auto no-repeat; } /* 홈 = 아이콘 */
.wl-navPath a { color: #7a7a7a; }
.wl-navPath a:hover { color: #222; }
.wl-navPath li.active span { color: #222; font-weight: 400; }

/* ---------- 대제목 + 칩 블록 (스크롤 시 상단 고정: 본사이트 .sub_fixed 와 동일) ---------- */
.wl-fixDummy { height: 0; overflow: hidden; }
.wl-subFixed { background: #fff; }
.wl-subFixed.fixed { position: fixed; left: 0; top: 100px; z-index: 3; width: 100%; border-bottom: 1px solid #eee; transition-duration: 0.4s; }
.wl-subFixed.fixed .wl-subInner { max-width: 1200px; margin: 0 auto; padding: 18px 0 0; }
.wl-subFixed.fixed .wl-pageTitle h1 { font-size: 32px; line-height: 46px; }
.wl-subFixed.fixed .wl-pageTitle .wl-sub { display: none; }
.wl-subFixed.fixed .wl-chips { margin: 12px 0 16px; }
.wl-pageTitle h1 { margin: 0; font-size: 42px; font-weight: 300; line-height: 60px; color: #222; transition: font-size .4s, line-height .4s; }
.wl-pageTitle .wl-sub { margin: 8px 0 0; font-size: 16px; font-weight: 300; line-height: 24px; color: #7a7a7a; }

/* ---------- 카테고리 칩 ---------- */
.wl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 20px; }
.wl-chip { display: inline-flex; align-items: center; height: 44px; padding: 10px 20px; border-radius: 50px; background: #f4f4f4; color: #7a7a7a; font-size: 16px; font-weight: 500; line-height: 24px; white-space: nowrap; transition: background-color .2s, color .2s; }
.wl-chip:hover { background: #eee; color: #444; }
.wl-chip.on { background: #ffeae5; color: #FF583B; }

/* ---------- 리스트 ---------- */
.wl-list { display: flex; flex-direction: column; margin-top: 20px; border-top: 2px solid #222; } /* 본사이트 FAQ 목록: 상단 2px #222 */
.wl-item { display: flex; align-items: center; gap: 28px; padding: 28px 0; border-bottom: 1px solid #ddd; } /* 행 구분선 1px #ddd */
.wl-thumb { width: 96px; height: 96px; flex: none; border-radius: 12px; overflow: hidden; background: #f4f4f4; display: flex; align-items: center; justify-content: center; }
.wl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-thumb-empty { color: #bbb; display: flex; }
.wl-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wl-title { margin: 0; font-size: 18px; font-weight: 500; line-height: 26px; color: #222; transition: color .2s; }
.wl-item:hover .wl-title { color: #FF583B; }
.wl-excerpt { margin: 0; font-size: 15px; font-weight: 300; line-height: 22px; color: #7a7a7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-meta { display: flex; gap: 10px; font-size: 13px; font-weight: 400; line-height: 18px; color: #7a7a7a; }
.wl-cat { color: #FF583B; }
/* 본사이트 FAQ 꺾쇠(16px, 2px #222)를 오른쪽 방향으로 */
.wl-arrow { flex: none; width: 16px; height: 16px; margin-right: 30px; border-top: 2px solid #222; border-right: 2px solid #222; transform: rotate(45deg); }
.wl-empty { padding: 80px 0; text-align: center; font-size: 16px; color: #7a7a7a; }

/* ---------- 페이지네이션 (PC) ---------- */
.wl-pagination { margin-top: 40px; }
.wl-pagination ul { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wl-pagination .page-numbers { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 30px; font-size: 14px; font-weight: 400; line-height: 30px; color: #333; }
.wl-pagination .page-numbers.current { background: #FF583B; color: #fff; }
.wl-pagination a.page-numbers:hover { background: #f4f4f4; }
.wl-pagination .page-numbers.dots { color: #a7a7a7; }
.wl-pagination .prev, .wl-pagination .next { position: relative; }
.wl-pagination .prev::before, .wl-pagination .next::before { content: ""; width: 8px; height: 12px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'><path d='M1.5 1l5 5-5 5' stroke='%23333' stroke-width='1.4'/></svg>") center / 8px 12px no-repeat; }
.wl-pagination .prev::before { transform: rotate(180deg); }
.wl-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* ---------- 더보기 (모바일) ---------- */
.wl-more { padding: 8px 15px; text-align: center; }
.wl-more a { position: relative; display: inline-block; padding: 15px 18px 15px 0; font-size: 15px; font-weight: 400; line-height: 15px; color: #222; }
.wl-more a::after { content: ""; position: absolute; right: 0; top: 16px; width: 7px; height: 7px; border-top: 2px solid #222; border-right: 2px solid #222; transform: rotate(135deg); }

/* ---------- 태블릿 ~ 작은 데스크톱 ---------- */
@media (max-width: 1280px) {
  .wl-inner { padding-left: 20px; padding-right: 20px; }
  .wl-navPath { right: 20px; }
  .wl-subFixed.fixed .wl-subInner { padding-left: 20px; padding-right: 20px; }
}

/* ---------- 모바일 ---------- */
@media (max-width: 768px) {
  .wl-inner { padding: 20px 20px 60px; min-height: auto; }
  .wl-navPath { display: none; }
  .wl-pageTitle h1 { font-size: 30px; line-height: 44px; } /* 본사이트 모바일 대제목 */
  .wl-subFixed.fixed { top: 70px; }
  body.admin-bar .wl-subFixed.fixed { top: 116px; }
  .wl-subFixed.fixed .wl-subInner { padding: 20px 20px 0; }
  .wl-subFixed.fixed .wl-pageTitle h1 { font-size: 20px; line-height: 30px; }
  .wl-subFixed.fixed .wl-chips { margin: 10px -20px 12px; }
  .wl-pageTitle .wl-sub { font-size: 14px; line-height: 20px; margin-top: 4px; }
  .wl-chips { flex-wrap: nowrap; gap: 8px; margin: 20px -20px 4px; padding: 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .wl-chips::-webkit-scrollbar { display: none; }
  .wl-chip { flex: none; height: 38px; padding: 0 16px; font-size: 14px; }
  .wl-list { margin-top: 16px; border-top-width: 1px; } /* 모바일은 1px */
  .wl-item { align-items: flex-start; gap: 14px; padding: 18px 0; }
  .wl-thumb { width: 72px; height: 72px; border-radius: 10px; }
  .wl-thumb-empty svg { width: 30px; height: 30px; }
  .wl-body { gap: 6px; }
  .wl-title { font-size: 15px; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
  .wl-excerpt { display: none; }
  .wl-meta { font-size: 13px; line-height: 18px; gap: 8px; }
  .wl-date { color: #a7a7a7; }
  .wl-arrow { width: 9px; height: 9px; margin-right: 0; align-self: center; }
}

/* 글 하단 플로팅 바: 아래쪽이 흰색으로 서서히 짙어지는 배경 / 모바일 항상 노출, PC 는 설정에서 끄지 않은 경우 노출 */
.wl-floatBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; box-sizing: border-box; padding: 28px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,.92) 40%, #fff 70%); pointer-events: none; }
.wl-floatBtn { pointer-events: auto; display: block; text-align: center; line-height: 52px; box-sizing: border-box; width: 100%; max-width: 480px; height: 52px; margin: 0 auto; padding: 0 16px; border-radius: 12px; background: #FF583B; color: #fff !important; font-family: "Pretendard Variable", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.4px; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .15s; }
.wl-floatBtn:hover, .wl-floatBtn:active { background: #263C7D; }
/* 푸터가 올라오면 JS 가 --wl-lift 만큼 바를 밀어 올려 푸터 위에서 멈추게 함.
   본사이트의 '최상단이동' 버튼(.quickMoveTop)은 바 위에 함께 올라감 */
body.whistle-has-float .quickMoveTop { bottom: calc(104px + var(--wl-lift, 0px) + env(safe-area-inset-bottom)); z-index: 901; }
/* 호버·눌림 때 테마 버튼 색이 화살표 이미지를 덮지 않도록 흰 배경 + 화살표 유지 */
.quickMoveTop button:hover, .quickMoveTop button:focus, .quickMoveTop button:active {
  background-color: #fff !important; background-image: url("../images/common/icon_quickTop.png") !important;
  background-position: center center !important; background-repeat: no-repeat !important; box-shadow: none !important;
}
@media (min-width: 769px) {
  .wl-floatBar { display: none; }
  .wl-floatBar.wl-floatBar--pc { display: block; }
  body.whistle-has-float .quickMoveTop { bottom: 70px; z-index: 1; }
  body.whistle-has-float-pc .quickMoveTop { bottom: calc(108px + var(--wl-lift, 0px)); z-index: 901; }
}

/* 글 상세 페이지: 본문 카드 그림자 제거 (하단 플로팅 바 뒤로 그림자가 번져 보이는 것 방지) */
body.single-post .content-bg, body.single-post .entry, body.single-post article.entry, body.single-post .entry-content-wrap { box-shadow: none !important; }

/* 본문 가림 방지: 바 높이(92px)만큼 본문 카드 안쪽 맨 아래에 여백 (푸터 아래가 아니라 본문 끝에 두어 빈 공간이 생기지 않음) */
body.single-post.whistle-has-float .entry-content-wrap { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (min-width: 769px) {
  body.single-post.whistle-has-float:not(.whistle-has-float-pc) .entry-content-wrap { padding-bottom: 0; }
}

/* ---------- 글 하단 작성자 박스 (Simple Author Box 플러그인) — 뱅크샐러드형 구성 + 휘슬 색 ---------- */
.saboxplugin-wrap { border: 1px solid #eee !important; border-radius: 20px !important; background: #fff !important; padding: 40px 44px !important; margin: 56px 0 0 !important; box-shadow: none !important; }
.saboxplugin-wrap .saboxplugin-tab { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.saboxplugin-wrap .saboxplugin-tab::after, .saboxplugin-wrap .clearfix { display: none !important; }
.saboxplugin-wrap .saboxplugin-gravatar { float: none !important; width: 64px !important; height: 64px; padding: 0 !important; margin: 0 !important; flex: none; }
.saboxplugin-wrap .saboxplugin-gravatar img { width: 64px !important; height: 64px !important; border-radius: 50% !important; object-fit: cover; object-position: center top; border: 0 !important; box-shadow: none !important; background: #f5f5f7; }
.saboxplugin-wrap .saboxplugin-authorname { display: block !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.saboxplugin-wrap .saboxplugin-authorname a { font-size: 20px !important; font-weight: 700 !important; color: #222 !important; letter-spacing: -0.5px; text-decoration: none !important; pointer-events: none; cursor: default; }
.saboxplugin-wrap .saboxplugin-desc { flex: 0 0 100%; padding: 0 !important; margin: 24px 0 0 !important; }
.saboxplugin-wrap .saboxplugin-desc p { font-size: 15px !important; line-height: 26px !important; color: #7a7a7a !important; letter-spacing: -0.3px; margin: 0 0 10px !important; word-break: keep-all; text-align: left !important; }
.saboxplugin-wrap .saboxplugin-desc p:last-child { margin-bottom: 0 !important; }
@media (max-width: 768px) {
  .saboxplugin-wrap { padding: 24px 20px !important; border-radius: 16px !important; margin-top: 40px !important; }
  .saboxplugin-wrap .saboxplugin-tab { gap: 0 14px; }
  .saboxplugin-wrap .saboxplugin-gravatar, .saboxplugin-wrap .saboxplugin-gravatar img { width: 52px !important; height: 52px !important; }
  .saboxplugin-wrap .saboxplugin-authorname a { font-size: 18px !important; }
  .saboxplugin-wrap .saboxplugin-desc { margin-top: 18px !important; }
  .saboxplugin-wrap .saboxplugin-desc p { font-size: 14px !important; line-height: 23px !important; }
}

/* ---------- 목차 (Easy Table of Contents 플러그인) — 휘슬 색 ---------- */
/* 1) 본문 안 목차: 휘슬 회색 카드 (좁은 화면에서 보임) */
.entry-content #ez-toc-container { display: block !important; width: 100% !important; box-sizing: border-box; margin: 32px 0 40px !important; padding: 24px 28px !important; background: #f5f5f7 !important; border: 0 !important; border-radius: 16px !important; box-shadow: none !important; }
.entry-content #ez-toc-container .ez-toc-title-container { display: flex; align-items: center; margin: 0 0 12px !important; }
.entry-content #ez-toc-container .ez-toc-title { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: #222 !important; }
.entry-content #ez-toc-container .ez-toc-title-toggle { display: none !important; }
.entry-content #ez-toc-container nav { display: block !important; }
.entry-content #ez-toc-container ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.entry-content #ez-toc-container li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.entry-content #ez-toc-container li::before, .entry-content #ez-toc-container li::marker { content: none !important; }
.entry-content #ez-toc-container a.ez-toc-link { display: block; padding: 5px 0 !important; font-size: 15px !important; line-height: 22px !important; font-weight: 500 !important; color: #222 !important; text-decoration: none !important; word-break: keep-all; }
.entry-content #ez-toc-container .ez-toc-list-level-3 a.ez-toc-link { padding-left: 14px !important; font-size: 14px !important; font-weight: 400 !important; color: #7a7a7a !important; }
.entry-content #ez-toc-container a.ez-toc-link:hover { color: #FF583B !important; }
.entry-content #ez-toc-container a.ez-toc-link::before, .entry-content #ez-toc-container li::before { content: none !important; display: none !important; }

/* 2) 왼쪽 고정 목차 (넓은 화면, JS 가 .wl-tocSide 를 만들어 붙임) */
.wl-tocSide { position: fixed; top: 132px; z-index: 50; width: 220px; max-height: calc(100vh - 180px); overflow-y: auto; box-sizing: border-box; padding: 0 4px 0 0; opacity: 0; visibility: hidden; transition: opacity .2s; scrollbar-width: none; -ms-overflow-style: none; }
.wl-tocSide::-webkit-scrollbar { display: none; }
.wl-tocSide.is-show { opacity: 1; visibility: visible; }
.wl-tocSide .wl-tocSide-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #222; letter-spacing: -0.2px; }
.wl-tocSide ul { margin: 0; padding: 0; list-style: none; border-left: 2px solid #eee; }
.wl-tocSide li { margin: 0; padding: 0; list-style: none; }
.wl-tocSide a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: 14px; line-height: 20px; color: #7a7a7a; text-decoration: none; word-break: keep-all; transition: color .15s, border-color .15s; }
.wl-tocSide .lv3 a { padding-left: 26px; font-size: 13px; color: #999; }
.wl-tocSide li:not(.lv3) > a { color: #444; font-weight: 500; }
.wl-tocSide a:hover { color: #222; }
.wl-tocSide a.is-active, .wl-tocSide li:not(.lv3) > a.is-active { color: #FF583B; font-weight: 600; border-left-color: #FF583B; }
/* 넓은 화면에서는 본문 안 목차를 숨기고 왼쪽 목차만 */
body.wl-hasTocSide .entry-content #ez-toc-container { display: none !important; }
@media (max-width: 1279px) { .wl-tocSide { display: none !important; } body.wl-hasTocSide .entry-content #ez-toc-container { display: block !important; } }
@media (max-width: 768px) {
  .entry-content #ez-toc-container { padding: 20px !important; border-radius: 14px !important; margin: 24px 0 32px !important; }
  .entry-content #ez-toc-container a.ez-toc-link { font-size: 14px !important; }
  .entry-content #ez-toc-container .ez-toc-list-level-3 a.ez-toc-link { font-size: 13px !important; }
}

/* 본문 이미지 모서리: 뱅크샐러드 기준 20px (PC·모바일 동일). 작성자 사진은 원형 유지 */
.single-post .entry-content figure.wp-block-image img,
.single-post .entry-content .wp-block-image img,
.single-post .entry-content > p img { border-radius: 20px !important; }

/* ---------- 글꼴: 블로그 전체를 본사이트와 같은 Pretendard 로 (Kadence 기본 시스템 글꼴 대신) ---------- */
body.whistle-hub {
  --global-body-font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --global-heading-font-family: var(--global-body-font-family);
  font-family: var(--global-body-font-family);
}
body.whistle-hub h1, body.whistle-hub h2, body.whistle-hub h3, body.whistle-hub h4, body.whistle-hub h5, body.whistle-hub h6,
body.whistle-hub .entry-content, body.whistle-hub .entry-meta, body.whistle-hub #ez-toc-container, body.whistle-hub .saboxplugin-wrap,
body.whistle-hub .wl-tocSide, body.whistle-hub button, body.whistle-hub input, body.whistle-hub textarea, body.whistle-hub select { font-family: var(--global-body-font-family); }

/* ---------- 본문: 핵심 요약 상자 · 표 (2026-10-20, 추가 CSS 위에 덮어쓰기) ---------- */
/* 핵심 요약: 흰 배경 + 연한 주황 테두리, 주황 글씨는 라벨만 */
body.single-post .entry-content .summary-box { background: #fff !important; border: 1px solid #FAAD6F !important; border-radius: 16px !important; padding: 24px 28px 24px 46px !important; margin: 0 0 40px !important; }
body.single-post .entry-content .summary-box::before { margin: 0 0 10px -18px; font-size: 14px; color: #FF583B; letter-spacing: -0.2px; }
body.single-post .entry-content .summary-box li { color: #222; }
body.single-post .entry-content .summary-box li::marker { color: #a7a7a7; }
body.single-post .entry-content .summary-box strong { color: #222 !important; }
body.single-post .entry-content .summary-box mark strong { color: inherit !important; }

/* 표: 큰 색 면 없이, 네이비는 머리줄 글씨와 맨 위 선에만 */
body.single-post .entry-content table { border-top: 2px solid #263C7D !important; }
body.single-post .entry-content table th,
body.single-post .entry-content table td { border: 0 !important; border-bottom: 1px solid #eee !important; }
body.single-post .entry-content table tr:first-child th,
body.single-post .entry-content table thead th { background: #f5f5f7 !important; color: #263C7D !important; font-weight: 700; }
body.single-post .entry-content table td:first-child { background: transparent !important; color: #222 !important; font-weight: 600; }
/* 모바일: 넓은 표는 표만 옆으로 밀어서 보기 */
@media (max-width: 768px) {
  body.single-post .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.single-post .entry-content .summary-box { padding: 20px 20px 20px 38px !important; border-radius: 14px !important; }
}

/* ---------- 본문 버튼 (CTA): 하단 플로팅 버튼과 같은 결로 (2026-10-20) ---------- */
body.single-post .entry-content .wp-block-button__link,
body.single-post .entry-content .kb-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; padding: 14px 28px !important; border-radius: 12px !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: -0.3px; box-shadow: 0 6px 16px rgba(255,88,59,.22); transition: background-color .2s, transform .2s, box-shadow .2s; text-decoration: none !important; }
body.single-post .entry-content .wp-block-button__link:hover,
body.single-post .entry-content .kb-button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(38,60,125,.22); }
@media (max-width: 768px) {
  body.single-post .entry-content .wp-block-button,
  body.single-post .entry-content .wp-block-button__link { width: 100%; }
  body.single-post .entry-content .wp-block-button__link { font-size: 16px !important; padding: 14px 20px !important; }
}

/* ---------- 디자인 시스템 밖 색 정리 (2026-10-20) ----------
   포인트 색은 휘슬 BI(#FF583B, #263C7D, #FAAD6F)만,
   회색·연한 주황은 휘슬 홈페이지(010car.kr)에서 쓰는 값만 사용 */
body.single-post .entry-header .category-links a,
body.single-post .entry-header .term-links a { color: #FF583B; }            /* 테마 기본 파랑 #2B6CB0 → BI 주황 */
body.single-post .entry-header .category-links a:hover,
body.single-post .entry-header .term-links a:hover { color: #263C7D; }
body.single-post .entry-content h3 { color: #222; }                          /* #1A202C → #222 */
body.single-post .entry-header .entry-meta,
body.single-post .entry-header .entry-meta a,
body.single-post .entry-header .entry-meta time { color: #7a7a7a; }          /* 테마 #414146 → 홈페이지 회색 */
body.single-post .entry-content mark { background-color: #ffeae5; }          /* 형광펜 #FFE8E2 → 홈페이지 연주황 */
body.single-post .entry-content p.notice-text,
body.single-post .entry-content p.notice-text strong { color: #7a7a7a; }     /* #888 → 홈페이지 회색 */

/* 테마(Kadence) 색 팔레트를 휘슬 색으로 교체 — 글에서 고른 형광펜·글자색·링크 등이 모두 이 값을 따라감
   (원래 9칸 중 2번만 휘슬 주황이고 나머지는 테마 기본값이었음) */
body.whistle-hub {
  --global-palette1: #FF583B;  /* 테마 파랑 #2B6CB0 → BI 주황 */
  --global-palette2: #FF583B;  /* BI 주황 */
  --global-palette3: #222;     /* #1A202C → 홈페이지 검정 */
  --global-palette4: #222;     /* #414146 → 홈페이지 검정 */
  --global-palette5: #555;     /* #4A5568 → 홈페이지 회색 */
  --global-palette6: #7a7a7a;  /* #718096 → 홈페이지 회색 */
  --global-palette7: #ffeae5;  /* #FFE8E2 → 홈페이지 연주황 */
  --global-palette8: #f8f8f8;  /* #F7FAFC → 홈페이지 연회색 */
  --global-palette9: #fff;
  --global-palette-highlight: #FF583B;
  --global-palette-highlight-alt: #263C7D;
  --global-palette-btn-bg: #FF583B;
  --global-palette-btn: #fff;
}
/* 형광펜 글자: 추가 CSS의 #111 · 테마 회색 → #222 (주황 글자로 지정한 형광펜은 그대로) */
body.single-post .entry-content mark:not(.has-theme-palette-2-color):not(.has-theme-palette-1-color) { color: #222 !important; }
/* 표 간격: 위아래 모두 20px (바로 위 문단 간격도 20px로) */
body.single-post .entry-content table { margin: 20px 0 !important; }
body.single-post .entry-content p:has(+ table),
body.single-post .entry-content p:has(+ figure.wp-block-table),
body.single-post .entry-content p:has(+ div > table:first-child) { margin-bottom: 20px !important; }  /* 표를 div(예: .fine-wrap)로 감싼 경우도 포함 */

/* 소제목은 검정, 핵심 요약 라벨·테두리는 휘슬 회색 (2026-10-20) */
body.single-post .entry-content h2,
body.single-post .entry-content h3 { color: #222 !important; }
body.single-post .entry-content .summary-box { border-color: #ddd !important; }
body.single-post .entry-content .summary-box::before { color: #7a7a7a !important; }
/* 상세 페이지 네이비 덜어내기 (2026-10-21): 글 제목 검정, 표는 회색 */
body.single-post h1.entry-title { color: #222 !important; }
body.single-post .entry-content table { border-top: 1px solid #ddd !important; }
body.single-post .entry-content table tr:first-child th,
body.single-post .entry-content table thead th { color: #222 !important; background: #f5f5f7 !important; }
/* 상세 글 제목 크기 (2026-10-21)
   PC 글 제목만 40px로 키움 · 휴대폰 글 제목 32px · 소제목(28 / 24px)과 본문(17px)은 기존 그대로 */
body.single-post h1.entry-title { font-size: 40px !important; line-height: 1.35 !important; letter-spacing: -0.6px; text-wrap: balance; word-break: keep-all; }
@media (max-width: 768px) {
  body.single-post h1.entry-title { font-size: 32px !important; }
}
/* 큰 소제목(h2) 위 간격 (2026-10-21): 42px → PC 64px · 휴대폰 52px
   작은 소제목 위(36px)·문단 사이(32px)와 비슷해 단락 구분이 약하던 것 정리 */
body.single-post .entry-content h2 { margin-top: 64px !important; }
@media (max-width: 768px) {
  body.single-post .entry-content h2 { margin-top: 52px !important; }
}
/* 표 모양 통일 (2026-10-21)
   - 추가 CSS의 '첫 칸 줄바꿈 금지' 때문에 첫 칸 글이 길면 첫 열만 넓어지고 나머지가 좁아지던 것 정리
   - PC: 열 너비를 고르게 나눔 (표마다 들쭉날쭉하지 않게) · 휴대폰: 내용에 맞춰 자동, 넓으면 옆으로 밀어서 보기
   - 머리줄 글씨를 아래 칸과 같은 왼쪽 정렬로 */
@media (min-width: 769px) {
  body.single-post .entry-content table { table-layout: fixed !important; }
}
body.single-post .entry-content table td:first-child { white-space: normal !important; word-break: keep-all; min-width: 5.5em; }
body.single-post .entry-content table tr:first-child th,
body.single-post .entry-content table thead th { text-align: left !important; }
/* 표를 감싼 div(tbl-wrap, fine-wrap, tblWrap 등 이름 무관) 간격 (2026-10-21)
   감싼 상자에 overflow 등이 걸리면 문단 간격(20px)과 표 간격(20px)이 겹치지 않고 더해져 위가 40px로 넓어짐
   → 감싼 경우에는 상자가 위아래 20px를 갖고, 안쪽 표는 간격 0 */
body.single-post .entry-content div:has(> table) { margin-top: 20px !important; margin-bottom: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
body.single-post .entry-content div > table { margin-top: 0 !important; margin-bottom: 0 !important; }