/*
 * 석현 디자인 (260708) — 테마 오버라이드
 * public/index.css(webpack 빌드 산출물) 뒤에 enqueue (dep: hansem-main).
 * 빌드 파이프라인(styles/ -> public/) 무접촉 = 빌드 drift 0.
 * 스펙: docs/specs/2026-07-08-design-260708-per-page-checklist.md
 * 각 섹션 = 체크리스트 한 항목.
 */

/* ── §0 Get in Touch 톤다운 ───────────────────────────────────────────
 * 상단 내비 CTA를 브랜드 블루(#0072ce) → 무채색 회색(#868686)으로 낮춤(히어로
 * 제목에 시선 양보). .site-header 하위로만 스코프 → 본문/푸터의 .btn-primary
 * (하단 "Contact Us" 등)는 브랜드색 유지. 테마 관례대로 hover도 동일색. */
.site-header .btn-primary,
.site-header .btn-primary:hover,
.site-header .btn-primary:focus,
.site-header .btn-primary:active {
  background-color: #868686;
  border-color: #868686;
}

/* ── §1/§2/§3 Resource hero — 그라데이션 헤더박스 (백서/가이드/체크리스트) ─────────
 * 이미지 히어로 대체. W가변(fit-content·최대 1256) · H≥287 · R17 · 내부 좌우 50px ·
 * 서브카피↔날짜 ≥20px. 케이스스터디는 이미지 히어로 유지(빌더가 '' 반환 → 미출력). */
.resource-hero {
  width: 100%;
  max-width: 1256px;
  min-height: 287px;
  margin: 1.5rem auto 0;
  padding: 40px 50px;
  border-radius: 17px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
}
/* 목업(0710 픽셀 재대조): 세로 그라데이션(상→하) — 대각선 아님 */
.resource-hero--white-papers { background: linear-gradient(180deg, #045caa 0%, #06cde3 100%); }
.resource-hero--guides       { background: linear-gradient(180deg, #75ac62 0%, #abe072 100%); }
.resource-hero--checklists   { background: linear-gradient(180deg, #ff7a95 0%, #ffb696 100%); }

.resource-hero__inner {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.resource-hero__type {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.resource-hero__title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.resource-hero__subtitle {
  margin: 0.75rem 0 0;
  font-size: 1.05rem;
  font-weight: 400;
}
.resource-hero__date {
  /* 목업: 날짜는 박스 하단에 앵커(서브카피와 최소 20px 이상 벌어짐) */
  margin: auto 0 0;
  padding-top: 20px;
  font-size: 0.875rem;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .resource-hero { padding: 28px 24px; border-radius: 12px; min-height: 0; }
  .resource-hero__title { font-size: 1.5rem; }
}

/* Doc-type hero must sit BELOW the breadcrumb band, not cover it. The blog-view
 * rule `.single-case_studies.single-blog .post-header {margin-top:-70px}` (0,3,0)
 * slides an IMAGE hero under the navy banner; for the gradient card that hid the
 * white breadcrumb. That rule is `!important`, so match its scope + the hero
 * class (0,4,0) and override with `!important` to cancel the underlap only for
 * the resource-hero variant. */
.single-case_studies.single-blog .post-header.post-header--resource-hero,
.single-case_studies.case-blog .post-header.post-header--resource-hero {
  margin-top: 0 !important;
  z-index: auto;
}

/* Doc-type pages: remove the orphaned navy page-banner. That banner
 * (.page-header-blog, brand-dark) exists to overlay a dark IMAGE hero; the
 * gradient card isn't dark and now sits below it, leaving a stray navy strip.
 * Target only doc-type pages (banner is the immediate previous sibling of the
 * resource hero) — drop the navy fill and render the breadcrumb dark on white. */
.page-header.page-header-blog:has(+ .post-header--resource-hero) {
  background: transparent;
}
.page-header.page-header-blog:has(+ .post-header--resource-hero) .page-breadcrumb p,
.page-header.page-header-blog:has(+ .post-header--resource-hero) .page-breadcrumb p a {
  color: #444 !important;
}

/* ── §6b Doc-type hub-card thumbnail — 유형별 그라데이션 (대표이미지 부재 대체) ──
 * loop-case_studies.php: 문서형(가이드/체크리스트/백서)에 featured image가 없으면
 * 800x600 회색 placeholder 대신 히어로와 동일한 유형별 그라데이션 박스(4:3). */
.resource-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.resource-card-thumb--white-papers { background: linear-gradient(135deg, #045caa 0%, #06cde3 100%); }
.resource-card-thumb--guides       { background: linear-gradient(135deg, #75ac62 0%, #abe072 100%); }
.resource-card-thumb--checklists   { background: linear-gradient(135deg, #ff7a95 0%, #ffb696 100%); }

/* ── §4 세부서비스 하이라이트 인용구 — 파란 따옴표 + plain·작게 ─────────────────
 * single-services.php `section.service-product .tab-content`(파란 그라데이션) 좌측
 * 열의 blockquote.service-quote. 순미 AEO 영역과 겹치므로 **콘텐츠(the_sub_field('message'))
 * ·마크업은 무접촉** — 마크 이미지(content:url 교체)와 문장 서체(작게·plain)만 CSS로 조정.
 * ⚠️ service-headings.css(T08 헤딩정규화)가 옛 <h3> 룩을 pin: selector
 *   `section.service-product .tab-content .image blockquote.service-quote`(0,4,2)=1.5rem/500.
 *   → 여기선 `body` 프리픽스(0,4,3)로 로드순서 무관하게 오버라이드. 그 파일은 무접촉(레이어 분리).
 * 마크 = 석현 파란 따옴표(quote-blue-{open,close}.png 38×32, icon-start=여는/icon-end=닫는).
 * 문장 = 1.5rem/500 → 1.125rem/400(plain·더 작게, YSK ④ "문제는 헤딩이지 디자인 아님"=AEO 존중). */
body section.service-product .tab-content .image blockquote.service-quote {
  font-size: 1.125rem;
  font-weight: 400;
}
.service-product .service-quote .icon-start img { content: url(../../resources/images/quote-blue-open.png); }
.service-product .service-quote .icon-end img   { content: url(../../resources/images/quote-blue-close.png); }
.service-product .service-quote .icon-start img,
.service-product .service-quote .icon-end img {
  width: 38px;
  height: 32px;
}
@media (max-width: 992px) {
  body section.service-product .tab-content .image blockquote.service-quote { font-size: 1rem; }
}

/* ── §5 케이스스터디 인용구 회색 따옴표 (YSK ③ 복원·크기조정 = 석현 46×39 에셋) ──
 * 에이전시가 이미 마크를 렌더(.single-case-content .case-quote {:after=여는/위,
 * :before=닫는/아래}, 절대위치·더 진한 회색). 동일 specificity로 이미지·크기만
 * 석현 것(더 연한 회색)으로 override — 위치(top/bottom/left)는 에이전시 유지. 장식용. */
.single-case-content .case-quote::after,
.single-case-content .case-quote::before {
  content: "";
  width: 46px;
  height: 39px;
  background-size: contain;
  background-repeat: no-repeat;
}
.single-case-content .case-quote::after {   /* 여는 마크 (위) */
  background-image: url(../../resources/images/quote-gray-open.png);
}
.single-case-content .case-quote::before {  /* 닫는 마크 (아래) */
  background-image: url(../../resources/images/quote-gray-close.png);
}
/* 인용문 글자색: 에이전시 기본 주황(#e07b04, index.css) → 석현 목업의 브랜드 블루.
 * 동일 specificity(0,2,0)라 나중 로드되는 이 시트가 이김(마크 override와 동일 방식). */
.single-case-content .case-quote {
  color: #0072ce;
}

/* ── §6 Resources 허브 카드 리스타일 (A안, p6) ────────────────────────────────
 * archive-case_studies.php → views-part/loop-case_studies.php 카드(REST 필터 결과도 동형).
 * 순수 CSS override(마크업 무접촉). 목업 델타:
 *  · 프레임: border #ccc→#bfbfbf, radius .5rem→7px (index.css `.loop-case_studies` 0,1,0 위)
 *  · 타입 라벨: 다크 pill 이미지-오버레이 → 이미지 위 컬러 텍스트(resources-hub.css의
 *    `.loop-case_studies .image .resource-type-badge`(0,3,0) 절대배치 해제 = body 프리픽스 0,3,1).
 *    기본 블루, per-type 색상(CS=블랙/가이드=그린/체크리스트=코랄)은 §0 T02 후속 — data-type 훅 유지.
 *  · Read more: btn-info(브랜드 블루) → 회색 #ababab, W134×H27, R4.
 *  · 카드 간격: 열 41px(row gutter-x) / 행 25px. 카드 W451×H611은 목업 절대치 — 반응형
 *    등높이(height:100%) 유지가 정석이라 고정높이 미강제(짧은 카드 공백 방지), 프레임·간격으로 정합. */
.loop-case_studies,
.loop-blog {
  border-color: #bfbfbf;
  border-radius: 7px;
}
.loop-case_studies .image img,
.loop-blog .image img {
  border-radius: 6px;
}
body .loop-case_studies .image .resource-type-badge,
body .loop-blog .image .resource-type-badge {
  position: static;
  transform: none;
  display: block;
  margin: 0 0 0.75rem;
  padding: 0;
  background: none;
  color: #0072ce;
  font-size: 0.8rem;
  text-align: center;
}
/* §0 T02 (CEO): per-type badge text color via the data-type hook, each aligned to
 * that template's hero gradient. Language-neutral (data-type = EN canonical casetype
 * slug) so KO cards match. white-papers intentionally inherits the default blue above.
 * #resources-grid (id) scope beats the base rule (0,3,1) and covers AJAX filter results. */
#resources-grid .resource-type-badge[data-type="case-studies"] { color: #1a1a1a; } /* black — CS hero = dark image */
#resources-grid .resource-type-badge[data-type="guides"]       { color: #75ac62; } /* green — guide hero top */
#resources-grid .resource-type-badge[data-type="checklists"]   { color: #ff7a95; } /* coral — checklist hero top */
.loop-case_studies .cta .btn,
.loop-blog .cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 134px;
  max-width: 100%;
  height: 27px;
  padding: 0;
  border-radius: 4px;
  background: #ababab;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
}
.loop-case_studies .cta .btn:hover,
.loop-blog .cta .btn:hover {
  background: #9a9a9a;
  color: #fff;
}
/* 카드 간격: 열 41px(gutter-x) — 그리드/AJAX 결과 공통 컨테이너 #resources-grid.
 * 행 간격은 컬럼의 mb-lg-4(≈24px)로 이미 ~25px. */
#resources-grid {
  --bs-gutter-x: 41px;
}

/* ── §1 Related Readings 카드 캐러셀 (석현 p1/p4 "Explore More") ────────────────
 * G5 스캐폴드(resources-hub.css: 세로 텍스트 리스트)를 썸네일 카드 가로 스트립으로 교체.
 * builder(resource-related-readings.php)가 .related-readings--cards + __box(썸네일+타입)
 * + __title + __category를 emit → 여기서 시각화. .related-readings--cards 스코프(0,2,0)로
 * 기존 .related-readings__list(0,1,0) 오버라이드(로드순서 무관). 박스 W266×H196 R6.
 * RR 폭=본문 폭(aside가 이미 .col-lg-8 안). 가로 스크롤-스냅 캐러셀(JS 무의존) — ≤3장은
 * 본문폭에 대개 들어와 목업 데스크톱 룩과 동일, 넘치면 스와이프/스크롤. §0 상단 구분선 유지. */
.related-readings--cards .related-readings__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}
.related-readings--cards .related-readings__list {
  flex-direction: row;
  gap: 24px;
  max-height: none;
  overflow: visible;
}
.related-readings--cards .related-readings__item {
  flex: 0 0 auto;
  width: 266px;
  scroll-snap-align: start;
}
.related-readings--cards .related-readings__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.related-readings--cards .related-readings__box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 266px;
  height: 196px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f7fa;
}
.related-readings--cards .related-readings__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.related-readings--cards .related-readings__thumb--placeholder {
  background: #e2e8f0;
}
.related-readings--cards .related-readings__type {
  position: relative;
  z-index: 1;
  padding: 0.3rem 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  color: #555;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: center;
}
.related-readings--cards .related-readings__title {
  display: block;
  margin: 0.6rem 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1a1a1a;
  text-align: center;
}
.related-readings--cards .related-readings__category {
  display: block;
  font-size: 0.8rem;
  color: #0072ce;
  text-align: center;
}
/* A1: 목업은 "Related Readings" 헤딩도 중앙정렬 (base resources-hub.css는 좌측 상속). */
.related-readings--cards .related-readings__heading { text-align: center; }
@media (max-width: 768px) {
  .related-readings--cards .related-readings__item,
  .related-readings--cards .related-readings__box { width: 240px; }
}

/* ── §doc-body (2026-07-09 재구성) 문서형(가이드/백서/체크리스트) 본문 시맨틱 블록 ──
 * 변환기가 목업 정합 마크업을 뱉는다: 콜아웃=아이콘+라벨+설명 행 / 이슈=단일 <ul> /
 * Wrong-Right=2열 전치표 / QA=번호 <ol> / 백서 강조=pull-quote.
 * (이전 figure/table blob 우회 CSS 폐기 — 근본 재구성.) */

/* doc-body 표 셀 좌측정렬 (base 테마가 셀을 가운데로 뜸 — 목업은 좌측) */
.single-post-content .resource-checks td,
.single-post-content .resource-checks th,
.single-post-content .resource-wrongright td,
.single-post-content .resource-grades td { text-align: left; }

/* ① 콜아웃 — 아이콘 + 굵은 라벨 + 설명, 좌측정렬 회색 카드 */
.resource-callout {
  margin: 1.25rem 0;
  padding: 1.25rem 1.5rem;
  background: #f6f8fa;
  border-radius: 16px; /* 목업 실측: 8px보다 둥긂 */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.resource-callout__row { display: flex; align-items: flex-start; gap: 0.9rem; }
.resource-callout__icon { flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; }
.resource-callout__label { display: block; margin-bottom: 0.15rem; font-weight: 700; }
.resource-callout__body p { margin: 0; }
.resource-callout__note { margin: 0; font-size: 0.9rem; color: #555; }

/* ② 이슈 — 빨간 좌측 라인만(채움 없음), 목업 정합 */
ul.resource-issues { list-style: none; margin: 1.25rem 0; padding: 0; }
.resource-issues li {
  border-left: 4px solid #c72424;
  margin: 0 0 0.75rem;
  padding: 4px 0 4px 18px;
}
.resource-issues li strong { display: block; }
.resource-issues__cause { color: #c72424; }

/* ③ Wrong/Right — 2열 한 표 (WRONG | RIGHT), 케이스=행 */
.resource-wrongright { margin: 1.25rem 0; overflow-x: auto; }
.resource-wrongright table { width: 100%; border-collapse: collapse; }
.resource-wrongright th,
.resource-wrongright td {
  width: 50%;
  padding: 0.75rem 1rem;
  border: 1px solid #eee;
  vertical-align: top;
  text-align: left;
}
.resource-wrongright th.is-wrong { color: #c72424; background: #fdeaea; }
.resource-wrongright th.is-right { color: #2e8b57; background: #eaf6ec; }
@media (max-width: 640px) {
  .resource-wrongright table,
  .resource-wrongright tbody,
  .resource-wrongright tr,
  .resource-wrongright td { display: block; width: 100%; }
  .resource-wrongright thead { display: none; }
}

/* ④ QA 시리즈 — 제목 + 소개 + 번호 리스트 */
.resource-qa-series {
  margin: 1.25rem 0;
  padding: 1.25rem 1.5rem;
  background: #f6f8fa;
  border-radius: 8px;
}
.resource-qa-series__title { margin: 0 0 0.5rem; font-weight: 700; }
.resource-qa-series__intro { margin: 0 0 0.75rem; }
.resource-qa-series__list { margin: 0; padding-left: 1.25rem; }

/* ⑥ 백서 강조 pull-quote — #307bb9 accent */
.resource-pullquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: #eef5fb;
  border-left: 4px solid #307bb9;
  border-radius: 8px;
  font-style: normal;
}
.resource-pullquote p { margin: 0; }

/* 통계 하이라이트 — 이미지(157px) + 설명 텍스트 나란히 (유지) */
.resource-stat { display: flex; align-items: flex-start; gap: 10px; margin: 1.5rem 0; }
.resource-stat img { flex: 0 0 157px; width: 157px; height: auto; }
.resource-stat p { margin: 0; }

/* 체크리스트/가이드 요약표 — 셀 보더 + 헤더행 강조 (유지) */
.resource-checks { margin: 1.25rem 0; }
.resource-checks table { width: 100%; border-collapse: collapse; }
.resource-checks td { border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; }
.resource-checks tr:first-child td { font-weight: 700; background: #f6f8fa; }

/* FAQ — 질문(strong)/답변 단락 (유지) */
.resource-faq strong { font-weight: 700; }

/* ── §sidebar (2026-07-09) 문서형 단일 페이지 3축 필터 사이드바 ──────────────────
 * single-case-blog.php가 문서형(hansem_resource_document_term)일 때만
 * col-lg-3(사이드바)+col-lg-9(본문)로 분기, 그 외(케이스스터디 등)는 기존
 * col-lg-8 offset-lg-2 중앙정렬 유지. */
/* 문서 사이드바 = 허브 필터의 .sidebar-menu 마크업을 그대로 재사용(단일 시각 소스,
 * public/index.css의 .sidebar-menu 스타일 상속=구분선·간격·활성 브랜드색). 여기서는
 * 위치(sticky)만 담당하고 항목 스타일은 손대지 않는다(허브와 픽셀 일치). */
.single-post-content--with-sidebar .resource-filter-sidebar {
  position: sticky;
  top: 120px;
}
@media (max-width: 991px) {
  .single-post-content--with-sidebar .resource-filter-sidebar {
    position: static;
    top: auto;
  }
  .single-post-content--with-sidebar .col-lg-3 {
    margin-bottom: 1.5rem;
  }
}

/* ── §checklist grade badges (2026-07-09, SSOT §3) ────────────────────────────
 * .resource-grades = 3-row table (Critical(A)/Major(B)/Minor(C), confirmed DOM
 * order on the published checklist). First cell of each row = grade badge. */
.resource-grades td { padding: .5rem .75rem; border: 1px solid #eee; }
/* SSOT §3: pastel is the BADGE BACKGROUND; the lighter #fab2c0/#fbba7a/#a9dd5e
   values are the SEPARATE 19-item table's grade-letter color, NOT the badge text
   (the spec explicitly warns not to confuse them). Badge text stays a readable
   darkened same-hue so the grade word is legible on its pastel background. */
.resource-grades tr:nth-child(1) .resource-grades__badge { background: #fad6dd; color: #a3273f; font-weight: 700; } /* A Critical */
.resource-grades tr:nth-child(2) .resource-grades__badge { background: #faeecd; color: #8a5a12; font-weight: 700; } /* B Major */
.resource-grades tr:nth-child(3) .resource-grades__badge { background: #e7facc; color: #4f6f16; font-weight: 700; } /* C Minor */

/* ── §checklist checks table — category section headers (2026-07-09) ─────────
 * .resource-checks row 1 = column header (<td>, already styled above); each
 * category boundary ("A · Regulatory scope" etc.) is a separate <tr><th colspan="6">
 * row from the docx converter. Style it as a full-width section header, and
 * make the (wide, 6-col) table scroll in place on narrow viewports instead of
 * pushing the page into horizontal overflow (confirmed via playwright: table
 * min-content width exceeds the content column below ~500px). */
.resource-checks {
  overflow-x: auto;
}
.resource-checks th {
  border: 1px solid #e2e8f0;
  padding: .5rem .75rem;
  text-align: left;
}
.resource-checks th[colspan] {
  background: #dde8f4;
  color: #14395c;
  font-size: .95rem;
}

/* ── §whitepaper Executive Summary (2026-07-09, SSOT §2) ──────────────────────
 * .resource-exec-summary = highlighted callout box near the top of white papers. */
/* 목업(0710 픽셀 재대조): Executive Summary는 박스 없이 플레인 문단 — 틴트/바 제거.
 * (박스 스타일은 풀쿼트 전용이었다.) 클래스는 시맨틱 훅으로 유지. */
.resource-exec-summary {
  margin: 1.5rem 0;
}
.resource-exec-summary p { margin: 0 0 .75rem; }
.resource-exec-summary p:last-child { margin-bottom: 0; }

/* ── §exhibit (2026-07-10) 백서 차트 이미지 (Exhibit 1/2) ──────────────────────
 * 소스 docx에 내장된 언어별 차트 PNG. 중앙·반응형·캡션은 소형 회색 이탤릭(목업). */
.resource-exhibit {
  margin: 2rem 0;
  text-align: center;
}
.resource-exhibit img {
  max-width: 100%;
  height: auto;
}
.resource-exhibit figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: italic;
  color: #666;
}

/* ── §share (2026-07-09) 공유 아이콘 = 석현 회색 라운드-스퀘어 배지 (SVG 유지) ─────
 * resources-hub.css의 아웃라인 버튼 chrome(.resource-share__btn, 0,1,0)을 .resource-share
 * 접두(0,2,0)로 해제 — 배지가 곧 아이콘이라 테두리/패딩/흰 bg 없음. LinkedIn 블루→회색
 * (SVG는 knockout이라 색만 바꾸면 회색 배지+흰 'in'), Copy=회색 배지 SVG(bg rect=currentColor).
 * Copy는 아이콘만(목업 정합·좁은 인용구 컬럼에서 닫는 따옴표와 겹침 방지 = aria-label로 a11y
 * 유지), 'Share:' 라벨은 PHP에서 제거. PNG 대신 SVG=선명·테마 가능. */
.resource-share .resource-share__btn {
  padding: 0;
  border: 0;
  background: none;
  color: #868686;
  gap: 0.35rem;
}
.resource-share .resource-share__linkedin { color: #868686; }
.resource-share .resource-share__btn:hover { background: none; color: #6f6f6f; }
.resource-share .resource-share__btn svg { width: 22px; height: 22px; }

/* ── §P2 (2026-07-10) 목업 정합 마감 팩 — 감사 P2 트랙 ─────────────────────────
 * 근거: 260708 목업 밴드 실측(백서 헤딩/리드/풀쿼트 = #307bb9 · 가이드 헤딩 = 다크
 * · WRONG|RIGHT = 무틴트 레드/블루 · 등급 pill W196×H55 R8 · 등급 글자
 * #fab2c0/#fbba7a/#a9dd5e(0708 상향분) · 범주 헤더 = 핑크 텍스트). */

/* 브랜드 클래스 없는 일반 표(wp-block-table)도 좌측정렬 — base 테마가 셀을
 * 가운데로 띄움(§2 Area 표·백서 KPI 표가 걸렸던 커버리지 갭). */
.single-post-content .wp-block-table th,
.single-post-content .wp-block-table td { text-align: left; }

/* 공유 아이콘 = 본문 우상단 (문서형 전용; 하단 행은 템플릿에서 제거) */
/* 목업(0710 3차 재대조): 아이콘 = 본문 컬럼 우측 '여백(거터)'에 세로 스택, 인트로
 * 첫 줄과 상단 정렬. resources-hub.css의 가로 flex+border-top(잡선)+여백 chrome을
 * 전부 해제하고 절대배치.
 * anchor = .container (케이스 템플릿 single-case_studies.php와 동일 기준). 좁은 본문
 * col(col-lg-8)을 기준으로 잡으면 right:15px가 본문 안쪽=인트로 텍스트와 겹침(0710
 * 본문폭 축소 후 노출). 넓은 컨테이너 기준이라야 아이콘이 본문 밖 거터에 뜬다. */
.single-post-content .container { position: relative; }
.resource-share-top { position: absolute; top: 0; right: 15px; }
.resource-share-top .resource-share {
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

/* 백서 블루 시스템: 섹션 h2 + 원리 리드(#307bb9). 가이드/체크리스트 h2는 다크 유지. */
.resource-doc--white-papers .single-post-inner h2.wp-block-heading { color: #307bb9; }
.resource-lead { color: #307bb9; }

/* 풀쿼트 = 흰 바탕 + 파란 좌측 바 + 파란 텍스트 (목업: 채움 없음 — 기존 틴트 제거) */
.resource-pullquote {
  background: none;
  border-radius: 0;
  border-left: 3px solid #307bb9;
}
.resource-pullquote p { color: #307bb9; margin: 0; }

/* WRONG|RIGHT 헤더 = 플레인(무틴트) 레드/블루 텍스트 (목업; ✗/✓ 글리프는 변환기서 제거) */
.resource-wrongright th.is-wrong { color: #c72424; background: none; text-align: center; }
.resource-wrongright th.is-right { color: #0072ce; background: none; text-align: center; }

/* 이슈 리스트: 결과 줄(→ …) = 레드 텍스트 (목업) */
.resource-issues__cause { color: #c72424; display: block; }

/* 등급 pill: 첫 셀 = 독립 배지 지오메트리 W196×H55 R8 (KO는 W211×H51 — 텍스트가
 * 길어 min-width로 흡수), 행 간격 분리. 파스텔 bg/다크닝 글자색은 기존 §3 유지. */
.resource-grades { border-collapse: separate; border-spacing: 0 10px; }
.resource-grades td { border: 0; vertical-align: middle; }
/* 배지 = 셀이 아니라 내부 span(변환기 .resource-grades__badge) — 설명 셀이 몇 줄이
 * 되든 배지는 목업 고정 지오메트리(W196×H55 R8)를 유지한다. */
.resource-grades td:first-child { padding: 0 1rem 0 0; }
.resource-grades .resource-grades__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 196px;
  height: 55px;
  border-radius: 8px;
  white-space: nowrap;
  padding: 0 1rem;
}

/* 체크리스트 19항목 표: 등급 대형 글자(0708 상향 팔레트) + 범주 헤더 = 핑크 텍스트
 * (기존 남색 밴드 제거). ⚠️a11y: 시안 정합 우선(§0 T02와 동일 방침). */
.resource-checks .resource-checks__grade { font-size: 1.5rem; font-weight: 600; line-height: 1; }
.resource-checks .grade-a { color: #fab2c0; }
.resource-checks .grade-b { color: #fbba7a; }
.resource-checks .grade-c { color: #a9dd5e; }
.resource-checks th[colspan] {
  background: none;
  color: #ff7a95;
  font-size: 1rem;
  font-weight: 700;
  border-left: 0;
  border-right: 0;
}

/* 스탯 캡션 = 이미지 아래 소형 그레이 (목업 "Automated detection rate") */
.resource-stat__caption {
  display: block;
  font-size: 0.8rem;
  color: #868686;
  margin: 0.35rem 0 0.6rem;
}

/* QA 시리즈: 현재 편 볼드 (목업) */
.resource-qa-series__list .is-current { font-weight: 700; }

/* 케이스 single 소품 (목업 p5): 타입 배지 = 다크 pill → 이미지 위 파란 텍스트
 * (허브 §6과 동일 룩·언어중립 data-type 훅 유지) · 제목 = 중앙 → 좌측정렬. */
body.single-case_studies .post-header .resource-type-badge {
  background: none;
  color: #0072ce;
  padding: 0;
  border-radius: 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
body .single-case-content .single-case-title { text-align: left; }

/* 히어로 아이브로/시리즈 (목업 p1~p3): 아이브로 = 박스 밖 위 중앙·유형색·영문
 * 대문자(양 로케일 공통 — KO 최종 PSD도 영문 유지) · 시리즈 라인 = 박스 안 제목 위. */
.resource-hero__eyebrow {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.resource-hero__eyebrow--white-papers { color: #045caa; }
.resource-hero__eyebrow--guides       { color: #75ac62; }
.resource-hero__eyebrow--checklists   { color: #ff7a95; }
.resource-hero__series {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.95;
}

/* ── §P2b (2026-07-10 픽셀 재대조) ────────────────────────────────────────────
 * 문서형 본문 헤딩 = 목업의 조용한 스케일(테마 기본 대형 h2 오버라이드). */
.resource-doc .single-post-inner h2.wp-block-heading {
  font-size: 1.4rem;
  line-height: 1.35;
}
/* 백서 six-principles 나열 구간 = 블루 + 밑줄 (목업) */
.resource-principles {
  color: #307bb9;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 등급 배지 디스플레이 레터 (목업: "Critical A" — 라벨 + 대형 레터, EN 괄호 제거)
 * A4(2026-07-10): 목업 실측상 대형 레터는 라벨 유채색이 아니라 중립 회색(#585858±).
 * 라벨(Critical/Major/Minor)은 배지 color(#a3273f 등) 유지, 레터만 회색으로 분리. */
.resource-grades .resource-grades__badge { gap: 0.6rem; }
.resource-grades .resource-grades__letter { font-size: 1.9rem; font-weight: 600; line-height: 1; color: #555; }