/*
 * 기본 레이아웃/조판 규칙.
 * 색상/크기 하드코딩 금지 — tokens.css의 --gb-* 변수만 참조한다.
 */

/* ── 지면 ─────────────────────────────────────────────── */
/* [2026-09-25] 다크 모드 차단.
   Astra 는 prefers-color-scheme: dark 에서 지면을 어두운 남색으로 바꾸는데
   본문 색은 우리 토큰(먹색)이 그대로 이겨서 어두운 바탕에 어두운 글자가 된다.
   이 매체는 지면색이 정체성이라 다크 변형을 두지 않는다. UA 에 light 를 선언해
   기본 위젯까지 밝게 고정하고, html body 로 특이도를 올려 지면색을 되찾는다. */
:root { color-scheme: light; }

html body {
  background: var(--gb-paper);
  color: var(--gb-ink);
}

/* Astra 사용자 정의 설정이 921px 이하에서 기본 틀(.ast-plain-container) 바탕을 짙은 남색(--ast-global-color-4)으로 바꾼다.
   글자는 짙은 색 그대로라 회원·Books 하위·Office Location 화면이 안 읽혔다(GB-15, 2026-10-02 실측).
   분류 보관 카드·404 상자(.ast-separate-container 계열)도 같은 설정으로 남색이 된다.
   폭과 무관하게 데스크톱과 같은 흰 바탕으로 둔다 */
@media (max-width: 921px) {
  body.ast-plain-container,
  body.ast-page-builder-template,
  .ast-separate-container .ast-article-inner,
  .ast-separate-container .ast-article-single:not(.ast-related-post),
  .ast-separate-container .error-404,
  .ast-separate-container .no-results,
  .ast-separate-container .ast-archive-description { background-color: var(--gb-white); }
}

/* Astra 404 제목이 흰 바탕에 흰 글자로 나온다(1440 포함, GB-15 실측 대비 1.00) */
.error-404 .ast-404-layout-1 h1.page-title { color: var(--gb-ink); } /* Astra .ast-404-layout-1 h1.page-title 보다 특이도 높게 */

body {
  background: var(--gb-paper);
  color: var(--gb-ink);
  font-family: var(--gb-font-family-base);
  font-size: var(--gb-font-body);
  font-weight: var(--gb-fw-body);
  line-height: var(--gb-lh-body);
  letter-spacing: var(--gb-ls-body);
}

/* Astra 사용자 설정 본문 글꼴 Inter 가 입력칸·버튼에 남아 Spectra 의 Inter 파일(404)을 부른다 (2026-10-05 전수조사).
   클래스 없는 입력칸(404 검색, Contact, 체크박스)도 UI 글꼴로. 특이도는 Astra 와 같고 이 파일이 뒤에 온다 */
button, input, select, textarea { font-family: var(--gb-font-family-ui); }

/* ── 본문 열 ──────────────────────────────────────────────
   장문 매체의 뼈대. 본문은 content-max, 표·도표만 wide-max로 빠져나간다. */
.gb-container {
  max-width: var(--gb-page-max);
  margin-inline: auto;
  padding-inline: var(--gb-gutter);
}

.gb-prose {
  max-width: min(var(--gb-content-max), var(--gb-measure));
  margin-inline: auto;
  line-height: var(--gb-lh-prose);
}

.gb-prose > .gb-wide {
  max-width: var(--gb-wide-max);
  /* 본문 열 중앙을 기준으로 양쪽으로 넓힌다 */
  width: min(var(--gb-wide-max), 100vw - var(--gb-gutter) * 2);
  margin-inline: calc(50% - min(var(--gb-wide-max), 100vw - var(--gb-gutter) * 2) / 2);
}

/* ── 표제 ─────────────────────────────────────────────── */
/* [시안 대조 2026-09-28] 확정 시안 실측: 표제는 전부 ink(#14161A), navy 가 아니다.
   navy 는 라벨·구분선·막대 같은 구조 기호가 쓴다. 표제까지 navy 면 지면에서
   구조와 내용이 같은 색으로 말해 위계가 사라진다. */
h1, h2, h3, h4 {
  font-family: var(--gb-font-family-head);
  color: var(--gb-ink);
  line-height: var(--gb-lh-head);
  letter-spacing: var(--gb-ls-head);
  font-weight: var(--gb-fw-head);
  text-wrap: balance;
}

/* [재조정 2026-09-21] 표제 무게를 크기에 반비례시킨다.
   60px 이상을 700으로 찍으면 포스터가 되지 서면이 되지 않는다.
   FT·Works in Progress 모두 대형 표제는 serif Regular이고, 무게는
   작은 라벨 쪽에 몰아준다. 큰 것은 크기로, 작은 것은 무게로 말한다. */
/* [분리 2026-09-21] h1/display 는 표제 전용 서체(Playfair Display)를 쓴다.
   h2 이하는 본문과 같은 Newsreader 로 남긴다 — 같은 조판 흐름에 있기 때문이다. */
h1 {
  font-family: var(--gb-font-display-family);
  font-size: var(--gb-font-h1);
  font-weight: var(--gb-fw-body);
}
h2 { font-size: var(--gb-font-h2); font-weight: var(--gb-fw-med); }
h3 { font-size: var(--gb-font-h3); font-weight: var(--gb-fw-med); }
h4 { font-size: var(--gb-font-body); font-weight: var(--gb-fw-med); }

/* 개인정보처리방침은 Astra 기본 틀이라 .entry-content 소제목에 Astra 글꼴(Inter 36px 700)이 이긴다.
   다른 문서 지면과 같은 표제 규칙으로 되돌린다 (고객 10-07 요청 6-1) */
.privacy-policy .entry-content :is(h2, h3, h4) {
  font-family: var(--gb-font-family-head);
  line-height: var(--gb-lh-head);
  letter-spacing: var(--gb-ls-head);
  font-weight: var(--gb-fw-med);
}
.privacy-policy .entry-content h2 { font-size: var(--gb-font-h2); }
.privacy-policy .entry-content h3 { font-size: var(--gb-font-h3); }
.privacy-policy .entry-content h4 { font-size: var(--gb-font-body); }

.gb-display {
  font-family: var(--gb-font-display-family);
  font-size: var(--gb-font-quote);
  line-height: var(--gb-lh-head);
  letter-spacing: var(--gb-ls-display);
  font-weight: var(--gb-fw-body);
  color: var(--gb-navy);
}

/* 표제 위에 얹는 분류 한 줄. 초대형 Regular 표제와 양극을 이룬다 —
   대비를 만드는 쪽은 표제가 아니라 이 라벨이다. */
.gb-kicker {
  display: block;
  font-family: var(--gb-font-family-ui);
  font-size: var(--gb-font-label);
  font-weight: var(--gb-fw-label);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
  color: var(--gb-navy);
  margin-block-end: var(--gb-space-s);
}

/* [고도화 2026-09-21] 본문 안 h2 위에 강조 규칙선을 얹는다 (2026-09-21 Navy).
   구획 전환을 표제 크기에만 맡기면 스크롤 중에 놓친다. 선이 먼저 눈에
   걸리고 표제가 뒤따르는 순서를 만든다. 신문 기사의 소제목 규칙선과 같다. */
.gb-prose > h2 {
  padding-block-start: var(--gb-space-m);
  border-block-start: var(--gb-stroke-accent);
}

/* ── 수직 리듬 ────────────────────────────────────────────
   간격을 요소마다 따로 주지 않는다. 앞 요소와의 관계로만 정의한다. */
.gb-prose > * + *        { margin-block-start: var(--gb-space-m); }
.gb-prose > * + h2       { margin-block-start: var(--gb-space-2xl); }
.gb-prose > * + h3       { margin-block-start: var(--gb-space-xl); }
.gb-prose > h1 + *,
.gb-prose > h2 + *,
.gb-prose > h3 + *       { margin-block-start: var(--gb-space-s); }

/* ── 라벨 / 캡션 ───────────────────────────────────────── */
.gb-label {
  font-size: var(--gb-font-label);
  font-weight: var(--gb-fw-med);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
  color: var(--gb-gray-600);
}

.gb-caption,
figcaption {
  font-size: var(--gb-font-caption);
  color: var(--gb-gray-600);
  line-height: 1.6;
}

/* ── 구분선 ─────────────────────────────────────────────
   원칙 1(No unnecessary icons)·2(Minimal use of colors)에 따라
   블록 구분은 선과 배경 톤 차이만으로 처리한다. */
hr,
.gb-rule {
  border: 0;
  border-block-start: var(--gb-rule);
  margin-block: var(--gb-space-xl);
}

.gb-rule--accent { border-block-start: var(--gb-rule-accent); }

/* Astra·코어 hr 기본값(#ccc 바탕, #808080 글자색)을 토큰으로 덮는다 (2026-10-04 전수 확인 L123) */
hr,
.gb-rule {
  background: none;
  color: var(--gb-gray-200);
}

/* 본문 구분선(core/separator). 전폭 강조선(남색 2px)보다 한 단계 낮춘다 — 고객 9/28 D16 "굵기와 색이 같아 어색" */
.entry-content hr.wp-block-separator,
.gb-article__body hr.wp-block-separator,
hr.wp-block-separator {
  border: 0;
  border-block-start: var(--gb-stroke-hairline);
  opacity: 1;
}

/* ── 링크 ─────────────────────────────────────────────── */
/* [축소 2026-09-21] Gold 밑줄을 본문 링크로 한정한다.
   tokens.css "Gold 사용처" 1번. 본문 밖 링크는 Navy 밑줄이다. */
a {
  color: inherit;
  text-decoration-color: var(--gb-navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.gb-prose a { text-decoration-color: var(--gb-gold); }

a {
  transition: text-decoration-thickness var(--gb-motion-fast) var(--gb-ease);
}

a:hover { text-decoration-thickness: 2px; }

/* ── 인용 ─────────────────────────────────────────────── */
blockquote {
  position: relative;
  margin-inline: 0;
  padding-inline-start: var(--gb-space-xl);
  color: var(--gb-gray-600);
  font-size: var(--gb-font-h3);
  line-height: 1.45;
}

/* [고도화 2026-09-21] 좌측 Gold 막대를 큰 따옴표로 교체한다.
   막대는 Example/Warning 블록이 이미 쓰는 기호라 인용이 구분되지 않았다.
   [2026-09-21] Gold 회수. 인용부호는 Gray-200 으로 낮춘다 — 읽는 것은 인용문이지
   부호가 아니다. */
blockquote::before {
  content: "\201C";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.15em;
  font-family: var(--gb-font-family-head);
  font-size: 3em;
  line-height: 1;
  color: var(--gb-gray-200);
}

/* 장문 도입 단락 드롭캡. 글이 시작되는 지점을 지면에 박는다.
   Navy 3줄 이니셜 — 한 글에 한 번만 쓴다. [2026-09-21] Gold 회수. */
.gb-prose--lead > p:first-of-type::first-letter {
  float: inline-start;
  font-family: var(--gb-font-family-head);
  font-size: 3.4em;
  line-height: 0.82;
  font-weight: var(--gb-fw-body);
  color: var(--gb-navy);
  padding-inline-end: 0.08em;
  padding-block-start: 0.04em;
}

/* ── 강조 재게시 (Pull quote) ───────────────────────────
   확정 시안(Figma 99:2, node 101:3) 실측: 좌측 Navy 2px, Playfair 30px, ink.
   blockquote 와 나눈다. blockquote 는 출처가 있는 실제 인용(IFRS 기준서 원문)이고
   따옴표 기호가 그 뜻을 낸다. pull quote 는 필자 본인 문장을 크게 다시 얹는 것이라
   따옴표를 달면 "누가 말했다"로 잘못 읽힌다.
   막대는 Example/Warning/Insight 도 쓰지만 그 셋은 본문 19px + eyebrow 라벨이다.
   30px Playfair 와 섞이지 않는다 — 구분은 기호가 아니라 조판이 한다. */
.gb-pullquote {
  border-inline-start: 2px solid var(--gb-navy);
  padding-inline-start: var(--gb-space-m);
  margin-inline: 0;
  font-family: var(--gb-font-display-family);
  font-size: var(--gb-font-quote);
  font-weight: var(--gb-fw-body);
  line-height: var(--gb-lh-head);
  letter-spacing: var(--gb-ls-display);
  color: var(--gb-ink);
}

/* blockquote 로 마크업해도 pull quote 면 따옴표가 붙지 않는다. */
.gb-pullquote::before { content: none; }
.gb-pullquote p { margin: 0; }
.gb-pullquote p + p { margin-block-start: 0; }

/* ── 목록 ─────────────────────────────────────────────── */
.gb-prose ul,
.gb-prose ol { padding-inline-start: var(--gb-space-m); }
.gb-prose li + li { margin-block-start: var(--gb-space-xs); }
.gb-prose ul li::marker { color: var(--gb-gray-600); }

/* ── 포커스 링 ────────────────────────────────────────────
   키보드 접근성. 어떤 컴포넌트도 이 규칙을 지우지 않는다.
   :focus-visible 만 쓴다 — 마우스 클릭에는 링이 뜨지 않는다. */
:focus-visible {
  outline: var(--gb-focus-width) solid var(--gb-focus-color);
  outline-offset: var(--gb-focus-offset);
}

/* ── 그리드 ───────────────────────────────────────────────
   12열. 본문 열 밖의 목록·카드 배치에만 쓴다. 본문 조판에는 쓰지 않는다. */
.gb-grid {
  display: grid;
  grid-template-columns: repeat(var(--gb-grid-columns), minmax(0, 1fr));
  gap: var(--gb-grid-gap);
}

/* [신설 2026-09-21] 비대칭 편집 그리드.
   사유: 등폭 2단은 표 문법이지 지면 문법이 아니다. 두 칸이 같은 폭이면
   무엇을 먼저 읽어야 하는지 지면이 말하지 않는다. 8단 위 5+3 으로 어느 쪽이
   주기사인지 폭 자체로 고정한다. 3단 등분은 쓰지 않는다. */
.gb-grid--editorial { grid-template-columns: 5fr 3fr; }
.gb-grid--editorial-rev { grid-template-columns: 3fr 5fr; }

@media (max-width: 782px) {
  .gb-grid--editorial,
  .gb-grid--editorial-rev { grid-template-columns: 1fr; }
}

/* 히어로 1건 + 하단 hairline 스택. Topic Hub 와 홈의 기본 배치다. */
.gb-lede__hero .gb-card__title {
  font-family: var(--gb-font-display-family);
  font-size: var(--gb-font-h1);
  font-weight: var(--gb-fw-body);
}

.gb-lede__stack > * + * {
  margin-block-start: var(--gb-space-m);
  padding-block-start: var(--gb-space-m);
  border-block-start: var(--gb-stroke-hairline);
}

/* 자동 분할 — 열 수를 세지 않고 최소 폭만 정한다 */
.gb-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.gb-col-3  { grid-column: span 3; }
.gb-col-4  { grid-column: span 4; }
.gb-col-6  { grid-column: span 6; }
.gb-col-8  { grid-column: span 8; }
.gb-col-12 { grid-column: span 12; }

@media (max-width: 1024px) {
  .gb-col-3, .gb-col-4 { grid-column: span 6; }
}

@media (max-width: 782px) {
  .gb-col-3, .gb-col-4, .gb-col-6, .gb-col-8 { grid-column: span 12; }
}

/* ── 이미지 ───────────────────────────────────────────────
   종횡비를 고정하지 않으면 페이지마다 높이가 달라져 리듬이 깨진다. */
img {
  max-width: 100%;
  height: auto;
}

.gb-figure { margin: 0; }

.gb-figure img {
  width: 100%;
  object-fit: cover;
  background: var(--gb-surface-sunken);
}

.gb-figure--wide     img { aspect-ratio: var(--gb-ratio-wide); }
.gb-figure--article  img { aspect-ratio: var(--gb-ratio-article); }
.gb-figure--square   img { aspect-ratio: var(--gb-ratio-square); }
.gb-figure--portrait img { aspect-ratio: var(--gb-ratio-portrait); }

/* 캡션과 출처는 붙여 쓴다. 출처 없는 인용 이미지는 회계 매체에서 위험하다. */
.gb-figure figcaption {
  margin-block-start: var(--gb-space-xs);
  padding-block-start: var(--gb-space-xs);
  border-block-start: var(--gb-stroke-hairline);
}

.gb-figure__credit {
  display: block;
  font-size: var(--gb-font-label);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
  color: var(--gb-gray-600);
  margin-block-start: 2px;
}

/* ── 아이콘 ───────────────────────────────────────────────
   Lucide 문법. currentColor 를 상속하므로 색을 따로 칠하지 않는다. */
.gb-icon {
  display: inline-block;
  inline-size: var(--gb-icon-m);
  block-size: var(--gb-icon-m);
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--gb-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.gb-icon--s { inline-size: var(--gb-icon-s); block-size: var(--gb-icon-s); }
.gb-icon--l { inline-size: var(--gb-icon-l); block-size: var(--gb-icon-l); }

/* 개인정보처리방침 바깥 틀 = 문서 지면(.gb-doc__inner) — 왼쪽선이 다른 문서 화면과 같게.
   기본 페이지 틀이라 Astra 컨테이너(1240 + 20)로 1440 에서 120 이었다 (대표님 10-08 "80으로 맞춰줘", GB-98) */
.privacy-policy .site-content > .ast-container {
  max-width: calc(var(--gb-page-max) + 160px);
  padding-inline: 80px;
}
/* 본문 블록은 Astra 가 최대 1200 으로 가운데 둔다 — 폭은 두고 왼쪽에 붙인다 */
.privacy-policy .entry-content > * { margin-inline-start: 0; }
@media (max-width: 1023px) {
  .privacy-policy .site-content > .ast-container { padding-inline: 20px; }
}