/* ===== 백서 스타일 · 영문판 (데스크톱 기준 3컬럼: 목차 | 본문 | 여백) ===== */

.html { scroll-behavior: smooth; overflow: unset; } /* overflow: unset 은 sticky 목차에 필요 */
.post-content h1{ text-wrap:balance;}
/* 조절용 변수 */
.whitepaper {
  --wp-measure: 768px;  /* 본문 컬럼 너비 */
  --wp-col-gap: 48px;   /* 컬럼 사이 간격 */
  --wp-space: 20px;     /* 기존 위젯 간격 */
  --wp-space-lg: 80px;  /* 기존 본문 블록 → 다음 제목/표 간격 (문단 20px + 위젯 60px) */
  --wp-sticky-top: 200px;  /* 화면 위에서 목차와 앵커 도착 위치까지의 거리 (GNB 포함) */
}

/* ---------- 텍스트 스타일: 영문 본문 기준 ---------- */
.whitepaper {
  font-weight: var(--e-global-typography-text-font-weight); /* 400 */
  color: var(--e-global-color-text);                        /* #4E4E4E, 영문 게시글과 동일 */
}
.whitepaper,
.whitepaper * { letter-spacing: normal; }  /* 사이트 기본 -0.03em(한글용) 해제 */

.whitepaper p,
.whitepaper li,
.whitepaper dd { line-height: 1.6; }
.whitepaper p { text-wrap: pretty; }       /* 문단 끝에 한 단어만 남는 줄 방지 */

.whitepaper h2 {
  font-size: var(--e-global-typography-secondary-font-size);     /* 24px */
  font-weight: var(--e-global-typography-secondary-font-weight); /* 700 */
  line-height: 1.25;                                             /* 두 줄 제목 대비 */
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.whitepaper h3 {
  font-size: var(--e-global-typography-c529565-font-size);       /* 20px */
  font-weight: var(--e-global-typography-c529565-font-weight);   /* 700 */
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* 표: 좁아진 본문 컬럼에 맞춰 글자를 한 단계 작게, 숫자는 자릿수 정렬 */
.whitepaper .prd-table { font-size: 15px; font-variant-numeric: tabular-nums; }
.whitepaper .prd-table th,
.whitepaper .prd-table td { line-height: 1.45; }

/* 앵커로 이동하는 모든 대상에 GNB 높이만큼 상단 여백 */
.whitepaper [id] { scroll-margin-top: var(--wp-sticky-top); }




/*  */
/* ---------- 간격 체계: 제목은 자기 내용에 가깝게, 앞 내용과는 멀게 ---------- */
.whitepaper h2 { margin: 80px 0 24px; }
.whitepaper h3 { margin: 56px 0 16px; }
.whitepaper h2 + h3 { margin-top: 32px; }
.whitepaper .wp-section:first-of-type > h2 { margin-top: 0; }
/* h4: 절(h3) 안의 소제목 */
.whitepaper h4 {
  margin: 40px 0 12px;
  font-size: 18px;
  font-weight: var(--e-global-typography-c529565-font-weight);   /* 700 */
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.whitepaper h3 + h4 { margin-top: 24px; }

/* 블록(표·정의 목록·대응 컬럼): 본문과 36px 간격 */
.whitepaper .prd-table-wrapper { margin: 36px 0 0; overflow-x: auto; }  /* 아래 간격은 사이트 표의 margin-bottom(약 39px)이 담당 */
.whitepaper .prd-dl-wrapper,
.whitepaper .prd-ps { margin: 36px 0; }
.whitepaper h2 + .prd-table-wrapper,
.whitepaper h3 + .prd-table-wrapper,
.whitepaper h2 + .prd-dl-wrapper,
.whitepaper h3 + .prd-dl-wrapper,
.whitepaper h3 + .prd-ps,
.whitepaper h4 + .prd-table-wrapper,
.whitepaper h4 + .prd-dl-wrapper { margin-top: 0; }
/*  */



.whitepaper .wp-header { margin-bottom: var(--wp-space-lg); }

/* ---------- 장 제목 + 부제 (hgroup) ---------- */
.whitepaper hgroup { margin: 80px 0 24px; }                       /* h2와 같은 위아래 간격 */
.whitepaper .wp-section:first-of-type > hgroup { margin-top: 0; }
.whitepaper hgroup h2 { margin: 0 0 8px; }                        /* 부제와 한 묶음으로 붙임 */
.whitepaper .wp-subtitle {
  margin: 0;
  font-size: var(--e-global-typography-c529565-font-size);        /* 20px, h3와 동일 */
  font-weight: var(--e-global-typography-c529565-font-weight);   /* 700, h3와 동일 */
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

/* ---------- 절 제목 + 부제 (h3 hgroup): h3 간격 체계를 따르고, 부제는 h4(18px)보다 한 단계 약하게 ---------- */
.whitepaper hgroup:has(> h3) { margin: 56px 0 16px; }
.whitepaper h2 + hgroup:has(> h3),
.whitepaper hgroup + hgroup:has(> h3) { margin-top: 32px; }
.whitepaper hgroup > h3 { margin: 0 0 6px; }
.whitepaper hgroup:has(> h3) .wp-subtitle {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* ---------- 이미지 위아래 간격 ----------
   엘레멘터 위젯 규칙(figure { margin: 0 }, 명시도 0,4,1)보다 우선하도록 margin에만 !important */
.whitepaper .wp-hero { margin: 32px 0 0 !important; }            /* 제목 아래, 대표 이미지 */
.whitepaper .wp-header > .wp-hero:first-child { margin-top: 0 !important; }   /* 제목 없이 이미지만 있을 때 */
.whitepaper .wp-figure { margin: 48px 0 !important; }            /* 본문 중간 이미지: 문단보다 넓게 */
.whitepaper .wp-figure img,
.whitepaper .wp-hero img { display: block; width: 100%; height: auto; }
.whitepaper h2 + .wp-figure,
.whitepaper h3 + .wp-figure,
.whitepaper h4 + .wp-figure,
.whitepaper hgroup + .wp-figure { margin-top: 0 !important; }
.whitepaper .wp-section > .wp-figure:last-child { margin-bottom: 20px !important; }   /* 장 끝 이미지: 다음 장과의 간격을 문단과 같게 */

/* Problems / Solutions: 2컬럼, 같은 순서의 항목끼리 행 정렬 */
.whitepaper .prd-ps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(var(--ps-rows, 5), auto);  /* 제목 1행 + 항목 4행 */
  column-gap: 32px;
  row-gap: 28px;
  margin-bottom: var(--wp-space-lg);
}
.whitepaper .prd-problems,
.whitepaper .prd-solutions {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  margin: 0;
}
.whitepaper .prd-ps h4 { text-align: center; margin: 0; }
.whitepaper .prd-ps ul {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 2 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.whitepaper .prd-ps li { font-size: 16px; line-height: 1.55; margin: 0; }

/* 정의 목록 (prd-dl): 항목 | 설명 2열, 테두리 없음 — 2열 표·용어집·체크리스트 공용 */
.whitepaper .prd-dl-wrapper {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);  /* 항목 열은 가장 긴 항목에 맞춤 */
  column-gap: 32px;
  row-gap: 20px;
  margin: 36px 0;                 /* 블록 간격 체계(36px)와 통일 */
  font-size: 16px;
  overflow: visible;
}
.whitepaper h2 + .prd-dl-wrapper,
.whitepaper h3 + .prd-dl-wrapper,
.whitepaper h4 + .prd-dl-wrapper,
.whitepaper hgroup + .prd-dl-wrapper { margin-top: 0; }   /* 제목 바로 아래: 제목의 아래 여백만 사용 */
.whitepaper .prd-dl-head,
.whitepaper .prd-dl,
.whitepaper .prd-dl-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  margin: 0;
  border: 0;
  background: none;
}
.whitepaper .prd-dl { row-gap: 20px; }
.whitepaper .prd-dl-head { font-weight: 700; text-align: left; }   /* 설명 열이 넓어 가운데 정렬 시 값과 떨어져 보임 → 값과 같은 왼쪽 정렬 */
.whitepaper .prd-dl-head span,
.whitepaper .prd-dl-row dt,
.whitepaper .prd-dl-row dd { margin: 0; padding: 0; line-height: 1.55; }
.whitepaper .prd-dl-row dt { font-weight: 400; }

/* 정의 목록 변형: 항목이 문장일 때 위아래로 쌓음 (질문 + 답) */
.whitepaper .prd-dl--stacked { grid-template-columns: minmax(0, 1fr); }
.whitepaper .prd-dl--stacked .prd-dl-row { row-gap: 4px; }
.whitepaper .prd-dl--stacked .prd-dl-row dt { font-weight: 700; }

/* 각주: 기존 10pt */
.whitepaper .wp-footnote { font-size: 10pt; margin-bottom: 0.4em; }
/* 각주 번호: 위치를 한 번만 올리고, 링크임이 드러나게 */
.whitepaper sup {
  position: relative;
  top: -0.45em;
  vertical-align: baseline;   /* 테마의 올림과 겹치지 않게 */
  font-size: 0.72em;
  line-height: 0;             /* 줄 간격이 벌어지지 않게 */
  font-weight: 600;
}
.whitepaper sup a {
  padding: 0 2px;             /* 누르는 영역 확보 */
  color: #2563eb;             /* 목차의 현재 위치 강조색과 동일 */
  text-decoration: none;
}
.whitepaper sup a:hover { text-decoration: underline; }
.whitepaper .wp-footnote a { text-decoration: none; }

/* 번호를 눌러 이동했을 때 도착한 각주를 잠깐 표시 */
.whitepaper .wp-footnote:target { background: #f3f6ff; }

/* 본문 목록: 아래 여백 확대 (장 바로 아래에 놓인 목록만 해당) */
.whitepaper .wp-section > ul,
.whitepaper .wp-section > ol { margin-bottom: 36px; }

/* 각주: 묶음의 마지막 각주 아래 여백 확대 */
.whitepaper .wp-footnote:not(:has(+ .wp-footnote)) { margin-bottom: 36px; }

/* 유틸리티 클래스 (기존 유지) */
.text-wrap-balance { text-wrap: balance; }
.text-wrap-pretty { text-wrap: pretty; }
.overflow-wrap-break-word { overflow-wrap: break-word; }

/* 목차 (기존 유지) */
.toc-list { list-style: none; margin: 0; padding-left: 0; }
.toc-list .toc-list { padding-left: 16px; margin-top: 4px; }
.toc-item a { text-decoration: none; color: inherit; }
.toc-h2 > a { font-weight: 500; font-size: 0.95em; }
.toc-h3 > a { font-weight: 400; font-size: 0.85em; }

/* 목차: 본문과 분리되는 세로선 + 현재 장 강조 막대 */
.whitepaper .wp-toc > .toc-list {
  border-left: 1px solid var(--e-global-color-4bc68fe, #D5D5D5);
}
.toc-item a {
  display: block;
  margin-left: -1px;                /* 세로선 위에 겹치도록 */
  padding: 4px 12px;                /* 세로선과 글자 사이 왼쪽 여백 */
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
}
.toc-item a:hover { color: #2563eb; }
.toc-item a.toc-active {
  color: #2563eb;
  background: #f3f6ff;
  border-left-color: #2563eb;       /* 현재 장: 세로선 위에 파란 막대 */
}

.whitepaper .wp-toc { margin-bottom: var(--wp-space-lg); }









/*  */
/* 흐름 단계 배지: 문장은 그대로, 단계 이름만 배지로 */
.whitepaper .prd-step {
display: inline;
padding: 2px 8px;
margin: 0 1px;
font-size: 0.88em;
color: var(--e-global-color-secondary, #202020);
background: var(--e-global-color-3c7c33d, #F8F8F8);
border: 1px solid var(--e-global-color-4bc68fe, #D5D5D5);
border-radius: 4px;
white-space: nowrap;                 /* 배지 하나가 두 줄로 쪼개지지 않게 */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* 흐름만 있는 문단: 배지가 위아래로 겹치지 않도록 줄 간격 확보 */
.whitepaper .wp-flow { display: block; line-height: 2.2; }
.whitepaper p .wp-flow { margin: 10px 0; }
/*  */



/* ---------- 3컬럼 레이아웃 (데스크톱): 목차 | 본문 | 여백 ---------- */
@media (min-width: 1025px) {
.whitepaper {
  display: grid;
  /* 목차와 여백 컬럼은 같은 너비(1fr), 본문은 고정 너비 */
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--wp-measure)) minmax(0, 1fr);
  column-gap: var(--wp-col-gap);
}
/* 제목 블록과 모든 장은 가운데(본문) 컬럼에만 배치 */
.whitepaper > .wp-header,
.whitepaper > .wp-section { grid-column: 2; min-width: 0; }
.whitepaper > .wp-toc {
  grid-column: 3;
  grid-row: 1 / span 20;
  align-self: start;
  position: sticky;
  top: var(--wp-sticky-top);
  margin-bottom: 0;
}
}



/* ===== 반응형: 표가 아닌 2컬럼 블록 (767px 이하) ===== */
@media (max-width: 767px) {

  /* 흐름 배지: 좁은 화면에서 긴 단계 이름이 화면 밖으로 넘치지 않도록 */
  .whitepaper .prd-step {
    display: inline-block;              /* 배지를 한 덩어리로, 긴 이름은 배지 안에서 줄바꿈 */
    max-width: calc(100% - 1.5em);      /* 뒤에 붙는 화살표 자리 확보 */
    white-space: normal;
    line-height: 1.4;
    vertical-align: middle;
  }

/* 대응 컬럼 (Problems / Solutions): 위아래로 쌓고, 번호로 짝 표시 */
.whitepaper .prd-ps {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  row-gap: 36px;
}
.whitepaper .prd-problems,
.whitepaper .prd-solutions {
  display: block;
  grid-row: auto;
}
.whitepaper .prd-ps h4 { text-align: left; margin: 0 0 16px; }
.whitepaper .prd-ps ul { display: block; counter-reset: ps-item; }
.whitepaper .prd-ps li {
  position: relative;
  margin: 0 0 20px;
  padding-left: 28px;
  counter-increment: ps-item;
}
.whitepaper .prd-ps li:last-child { margin-bottom: 0; }
.whitepaper .prd-ps li::before {
  content: counter(ps-item) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--e-global-color-secondary, #202020);
}

/* 정의 목록: 항목 아래에 설명을 쌓음 */
.whitepaper .prd-dl-wrapper { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }

/* .whitepaper .prd-dl-head { display: none; } */
/* 열 머리글은 쌓으면 의미가 없어 숨김 (원래 aria-hidden) */

.whitepaper .prd-dl-head {                    /* 열 머리글을 한 줄로: "항목 / 설명" */
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--e-global-color-4bc68fe, #D5D5D5);
  font-size: 14px;
  text-align: left;
}
.whitepaper .prd-dl-head span:first-child { font-weight: 700; }   /* 아래 항목(굵게)과 짝 */
.whitepaper .prd-dl-head span + span { font-weight: 400; }        /* 아래 설명(보통)과 짝 */
.whitepaper .prd-dl-head span + span::before {
  content: "/";
  margin-right: 6px;
  color: var(--e-global-color-7e7338e, #BABABA);
}


.whitepaper .prd-dl { row-gap: 16px; }
.whitepaper .prd-dl-row { row-gap: 4px; }
.whitepaper .prd-dl-row dt { font-weight: 600; color: var(--e-global-color-secondary, #202020); }
}

/* 참고문헌의 긴 URL: 좁은 화면에서 가로 넘침 방지 */
.whitepaper li a[href^="http"] { overflow-wrap: anywhere; }

.whitepaper blockquote{border-left-color: var(--e-global-color-accent) !important;}

/* 그림 설명(figcaption): 본문보다 작고 옅게 */
.whitepaper .wp-figure figcaption {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b6b6b;
}

.whitepaper .ref-list a{text-decoration-line: underline; color:#2563eb;}

/* 디스클레이머 */
.whitepaper .disclaimer {
  border: 1px solid #d0d4d9;
  border-left: 4px solid #6b7280;
  background: #f7f8fa;
  padding: 16px 20px;
  border-radius: 6px;
  margin: 32px 0;
  color: #374151;
}
.whitepaper .disclaimer__title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 8px;
  /*text-transform: uppercase;*/
  letter-spacing: 0.05em;
}
.whitepaper .disclaimer__text {
  margin: 0;
  line-height: 1.3 !important;
}
.whitepaper .disclaimer__text small {
  font-size: 14px;
  font-weight: 200;
}
@media (max-width: 767px) {
	.whitepaper .disclaimer__text small {
	  font-size: 13px;
	}
}