/*
 * 프리미티브 컴포넌트.
 * Block Pattern 10종(patterns.css)이 "글 안에 넣는 구획"이라면,
 * 여기는 사이트 골격을 이루는 재사용 단위다 — 버튼, 폼, 내비게이션, 목록.
 * 색상/크기 하드코딩 금지 — tokens.css의 --gb-* 변수만 참조한다.
 */

/* ══ Button ════════════════════════════════════════════
   3변형. Gold는 어느 변형에서도 면에 칠하지 않는다. */
.gb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gb-space-xs);
  padding: var(--gb-space-s) var(--gb-space-l);
  border: 1px solid transparent;
  border-radius: var(--gb-radius-m);
  font-family: var(--gb-font-family-ui);
  font-size: var(--gb-font-body);
  font-weight: var(--gb-fw-med);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--gb-motion-fast) var(--gb-ease),
              border-color var(--gb-motion-fast) var(--gb-ease),
              color var(--gb-motion-fast) var(--gb-ease);
}

.gb-btn--primary {
  background: var(--gb-navy);
  border-color: var(--gb-navy);
  color: var(--gb-white);
}

.gb-btn--primary:hover  { background: var(--gb-ink); border-color: var(--gb-ink); }
.gb-btn--primary:active { background: var(--gb-gray-900); }

.gb-btn--outline {
  background: transparent;
  border-color: var(--gb-navy);
  color: var(--gb-navy);
}

.gb-btn--outline:hover  { background: var(--gb-state-hover-tint); }
.gb-btn--outline:active { background: var(--gb-state-active-tint); }

/* 3변형: 텍스트 버튼. 밑줄로만 존재를 알린다 */
.gb-btn--text {
  padding-inline: 0;
  background: transparent;
  color: var(--gb-navy);
  text-decoration: underline;
  text-decoration-color: var(--gb-navy);
  text-underline-offset: 0.3em;
}

.gb-btn--text:hover { text-decoration-thickness: 2px; }

.gb-btn[disabled],
.gb-btn[aria-disabled="true"] {
  opacity: var(--gb-state-disabled-opacity);
  pointer-events: none;
}

/* ══ Form ══════════════════════════════════════════════
   밑줄 입력. 테두리 상자를 쓰지 않는 지면 문법과 일치시킨다. */
.gb-field { display: block; }
.gb-field + .gb-field { margin-block-start: var(--gb-space-m); }

.gb-field__label {
  display: block;
  font-size: var(--gb-font-label);
  font-weight: var(--gb-fw-label);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
  color: var(--gb-gray-600);
  margin-block-end: var(--gb-space-xs);
}

.gb-input,
.gb-textarea,
.gb-select {
  inline-size: 100%;
  padding: var(--gb-space-xs) 0;
  border: 0;
  border-block-end: var(--gb-stroke-rule);
  border-radius: 0;
  background: transparent;
  font-family: var(--gb-font-family-ui);
  font-size: var(--gb-font-body);
  color: var(--gb-ink);
  transition: border-color var(--gb-motion-fast) var(--gb-ease);
}

.gb-input:focus,
.gb-textarea:focus,
.gb-select:focus {
  outline: 0;
  border-block-end-color: var(--gb-navy);
  border-block-end-width: 2px;
}

.gb-input::placeholder,
.gb-textarea::placeholder { color: var(--gb-gray-600); opacity: 0.6; }

.gb-input[disabled],
.gb-textarea[disabled] { opacity: var(--gb-state-disabled-opacity); }

/* 오류 — 고객 지정 7색에 적색이 없다. [2026-09-21] Gold도 회수했으므로
   색이 아니라 선 굵기와 문구로 알린다. 색만으로 오류를 알리지 않는 것이
   접근성 요건이기도 하다. */
.gb-field--error .gb-input,
.gb-field--error .gb-textarea {
  border-block-end-color: var(--gb-ink);
  border-block-end-width: 2px;
}

.gb-field__error {
  display: block;
  font-size: var(--gb-font-caption);
  color: var(--gb-navy);
  margin-block-start: var(--gb-space-xs);
}

.gb-field__hint {
  display: block;
  font-size: var(--gb-font-caption);
  color: var(--gb-gray-600);
  margin-block-start: var(--gb-space-xs);
}

/* ══ Masthead (전폭 Navy 띠) ═══════════════════════════
   [신설 2026-09-21] 지면 최상단 전폭 Navy 띠.
   사유: 지면 전체가 같은 밝기여서 화면에 명암 리듬이 없었다. WIRED 는 상단
   masthead 띠와 하단 전폭 검정 footer 로 지면을 위아래에서 붙든다.
   이 띠와 footer 가 우리 지면의 유일한 전폭 면이다. */
.gb-masthead {
  background: var(--gb-navy);
  color: var(--gb-white);
}

.gb-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gb-space-m);
  padding-block: var(--gb-space-xs);
  font-size: var(--gb-font-label);
  font-weight: var(--gb-fw-label);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
}

.gb-masthead__wordmark {
  font-family: var(--gb-font-display-family);
  font-size: var(--gb-font-h3);
  font-weight: var(--gb-fw-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gb-white);
  text-decoration: none;
}

.gb-masthead a { color: var(--gb-white); text-decoration: none; }

/* ══ Header / Nav ══════════════════════════════════════ */
.gb-header {
  border-block-end: var(--gb-stroke-hairline);
  background: var(--gb-paper);
}

.gb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gb-space-l);
  padding-block: var(--gb-space-m);
}

.gb-nav {
  display: flex;
  align-items: center;
  gap: var(--gb-space-l);
}

.gb-nav__link {
  font-size: var(--gb-font-label);
  font-weight: var(--gb-fw-label);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
  color: var(--gb-gray-600);
  text-decoration: none;
  padding-block: var(--gb-space-xs);
  border-block-end: 2px solid transparent;
  transition: color var(--gb-motion-fast) var(--gb-ease),
              border-color var(--gb-motion-fast) var(--gb-ease);
}

.gb-nav__link:hover { color: var(--gb-navy); }

.gb-nav__link[aria-current] {
  color: var(--gb-navy);
  border-block-end-color: var(--gb-navy);
}

/* ══ Footer (전폭 Navy) ════════════════════════════════
   [교체 2026-09-21] hairline 한 줄에서 전폭 Navy 면으로. masthead 와 짝이다. */
.gb-footer {
  margin-block-start: var(--gb-space-3xl);
  padding-block: var(--gb-space-2xl);
  background: var(--gb-navy);
  font-size: var(--gb-font-caption);
  color: var(--gb-gray-200);
}

.gb-footer a { color: var(--gb-white); text-decoration-color: var(--gb-gray-600); }
.gb-footer .gb-label,
.gb-footer h2, .gb-footer h3, .gb-footer h4 { color: var(--gb-white); }
.gb-footer hr, .gb-footer .gb-rule { border-block-start-color: var(--gb-gray-600); }

/* ══ Breadcrumb ════════════════════════════════════════ */
.gb-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gb-space-xs);
  font-size: var(--gb-font-label);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
  color: var(--gb-gray-600);
}

.gb-breadcrumb li + li::before {
  content: "/";
  margin-inline-end: var(--gb-space-xs);
  color: var(--gb-gray-200);
}

/* ══ Tag / Chip ════════════════════════════════════════ */
.gb-tag {
  display: inline-block;
  padding: 2px var(--gb-space-xs);
  border: 1px solid var(--gb-gray-200);
  font-size: var(--gb-font-label);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
  font-weight: var(--gb-fw-label);
  color: var(--gb-gray-600);
  text-decoration: none;
  border-radius: var(--gb-radius-m);
  transition: border-color var(--gb-motion-fast) var(--gb-ease),
              background-color var(--gb-motion-fast) var(--gb-ease),
              color var(--gb-motion-fast) var(--gb-ease);
}

/* [회수 2026-09-21] Gold 면을 걷는다. hover 는 Navy 윤곽 + Navy 글자.
   Gold 는 본문 링크와 각주 두 곳에만 남는다 (tokens.css "Gold 사용처"). */
.gb-tag:hover {
  border-color: var(--gb-navy);
  color: var(--gb-navy);
}

/* Series 배지 — 분류 체계 전용. Tag 와 구분되어야 한다 (견적 3항).
   Tag 가 윤곽이므로 Series 는 Navy 면으로 구분한다. */
.gb-tag--series {
  background: var(--gb-navy);
  border-color: var(--gb-navy);
  color: var(--gb-white);
  font-weight: var(--gb-fw-label);
}

.gb-tag--series:hover { background: var(--gb-ink); border-color: var(--gb-ink); }

/* ══ Byline ════════════════════════════════════════════ */
.gb-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gb-space-s);
  font-size: var(--gb-font-caption);
  color: var(--gb-gray-600);
}

.gb-byline__author { font-weight: var(--gb-fw-med); color: var(--gb-navy); }

/* ══ Article Card (Topic Hub 목록 단위) ════════════════ */
.gb-card {
  display: flex;
  flex-direction: column;
  gap: var(--gb-space-xs);
}

.gb-card__title {
  font-family: var(--gb-font-family-head);
  font-size: var(--gb-font-h3);
  font-weight: var(--gb-fw-med);
  line-height: var(--gb-lh-head);
  color: var(--gb-navy);
}

.gb-card__title a { text-decoration: none; }
.gb-card__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.gb-card__excerpt { color: var(--gb-gray-600); font-size: var(--gb-font-caption); }

/* 목록에서 카드 사이는 hairline. 카드마다 상자를 만들지 않는다 */
.gb-card-list > li + li {
  margin-block-start: var(--gb-space-l);
  padding-block-start: var(--gb-space-l);
  border-block-start: var(--gb-stroke-hairline);
}

/* ══ TOC (장문 목차) ═══════════════════════════════════ */
.gb-toc {
  border-inline-start: var(--gb-stroke-hairline);
  padding-inline-start: var(--gb-space-m);
  font-size: var(--gb-font-caption);
}

.gb-toc a { text-decoration: none; color: var(--gb-gray-600); }
.gb-toc a:hover { color: var(--gb-navy); }
.gb-toc li + li { margin-block-start: var(--gb-space-xs); }
.gb-toc [aria-current] { color: var(--gb-navy); font-weight: var(--gb-fw-med); }

/* ══ Footnote (회계 매체 필수) ═════════════════════════ */
.gb-footnotes {
  margin-block-start: var(--gb-space-2xl);
  padding-block-start: var(--gb-space-m);
  border-block-start: var(--gb-stroke-rule);
  font-size: var(--gb-font-caption);
  color: var(--gb-gray-600);
}

.gb-footnotes li + li { margin-block-start: var(--gb-space-xs); }

.gb-fnref {
  font-size: 0.75em;
  vertical-align: super;
  text-decoration: none;
  color: var(--gb-gold);
  padding-inline: 2px;
}

/* ══ Pagination ════════════════════════════════════════ */
.gb-pagination {
  display: flex;
  gap: var(--gb-space-s);
  align-items: center;
  justify-content: center;
  margin-block-start: var(--gb-space-2xl);
  padding-block-start: var(--gb-space-m);
  border-block-start: var(--gb-stroke-hairline);
  font-size: var(--gb-font-label);
  letter-spacing: var(--gb-ls-label);
}

.gb-pagination a { text-decoration: none; color: var(--gb-gray-600); }
.gb-pagination a:hover { color: var(--gb-navy); }
.gb-pagination [aria-current] { color: var(--gb-navy); font-weight: var(--gb-fw-med); }

/* ══ Accordion (FAQ / 기준서 상세) ═════════════════════ */
.gb-accordion__item { border-block-end: var(--gb-stroke-hairline); }

.gb-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gb-space-s);
  padding-block: var(--gb-space-m);
  font-family: var(--gb-font-family-head);
  font-size: var(--gb-font-h3);
  font-weight: var(--gb-fw-med);
  color: var(--gb-navy);
  cursor: pointer;
  list-style: none;
}

.gb-accordion__summary::-webkit-details-marker { display: none; }

.gb-accordion__item[open] .gb-accordion__summary .gb-icon {
  transform: rotate(180deg);
  transition: transform var(--gb-motion-base) var(--gb-ease);
}

.gb-accordion__body { padding-block-end: var(--gb-space-m); }

/* ══ 스크린리더 전용 ═══════════════════════════════════ */
.gb-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 782px) {
  .gb-header__inner { gap: var(--gb-space-m); }
  .gb-nav { gap: var(--gb-space-m); }
}

/* ══ Article Template (견적 4항) ═══════════════════════
   정본: 확정 시안 Figma 9JestgL7cHstsesdBSzaBf node 99:2 (2026-09-28).
   시안은 1440 데스크톱 1종뿐이다. 좁은 폭 거동은 우리 판단이며 GB-15 에서 검수한다.
   시안에 변수 바인딩이 없어(get_variable_defs 빈 결과) 수치를 토큰으로 옮겨 적었다.
   토큰에 없는 값은 만들지 않는다 — 없으면 tokens.css 를 먼저 고친다. */

.gb-article__header { padding-block-start: var(--gb-space-l); }

.gb-article__eyebrow {
  font-family: var(--gb-font-family-ui);
  font-size: var(--gb-font-label);
  font-weight: var(--gb-fw-med);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gb-navy);
  /* [신설 2026-09-29] eyebrow 아래 구분선을 걷어내며 간격을 여기로 옮긴다.
     머리표는 제목에 붙는 한 덩어리라 선 간격(48px)보다 좁은 것이 맞다. */
  margin-block-end: var(--gb-space-s);
}

/* 부제는 표제가 아니다. 본문과 같은 serif 를 쓰되 무게를 싣지 않고 색을 낮춘다. */
.gb-article__standfirst {
  max-inline-size: var(--gb-content-max);
  font-size: var(--gb-font-standfirst);
  font-weight: var(--gb-fw-body);
  line-height: var(--gb-lh-body);
  color: var(--gb-gray-600);
}

/* 메타 띠 — 날짜 · 기준서 · 읽기 시간 · 표 수 · 절 수.
   항목 수는 글마다 다르다. 구분선은 항목 사이에만 서야 하므로 첫 항목을 제외한다. */
.gb-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 41px; /* 20 + 선 1 + 20 */
  overflow: hidden; /* 줄 머리 항목의 세로선은 띠 밖으로 밀려 잘린다 */
  padding-block: var(--gb-space-xs);
  font-family: var(--gb-font-family-ui);
  font-size: var(--gb-font-label);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
  color: var(--gb-gray-600);
}

/* 세로선은 항목 앞 21px 에 그린다. 휴대폰에서 줄이 넘어가면 줄 머리 항목은 띠 왼쪽 끝에 붙고
   (column-gap 은 줄 머리에 생기지 않는다) 그 앞 선은 overflow 로 잘린다 — 다음 줄이 선과 들여쓰기로 시작하지 않는다 (2026-10-04) */
.gb-meta-strip > * { position: relative; }
.gb-meta-strip > *::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -21px;
  border-inline-start: var(--gb-stroke-hairline);
}

/* 본문 열 + 방주. 시안 720 / 319, 사이 세로줄 1px.
   방주가 없는 글도 있으므로 세로줄은 방주 쪽이 들고 있는다. */
.gb-article__body {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 319px);
  gap: var(--gb-space-2xl);
  align-items: start;
}

/* 본문 열이 안의 표 최소 폭(520px)을 따라 넓어지지 않게 한다(GB-15, 360 폭 185px 넘침).
   그리드 항목 min-width:auto 와, base.css .gb-prose 의 margin-inline:auto(그리드 안에서는 내용 폭으로 줄어듦) 둘 다 원인.
   열 폭은 그리드가 정하므로 여기서는 가운데 정렬 여백이 필요 없다. 표는 figure.wp-block-table 상자 안에서만 가로 스크롤 */
.gb-article__body > * { min-width: 0; }
.gb-article__body > .gb-prose { margin-inline: 0; }

/* 방주가 없는 글은 본문이 위 구분선 폭(본문 열 전체)을 다 쓴다 — 모든 화면 폭 같음
   (고객 10-07 "글 본문이 위의 구분선과 같은 너비로", 대표님 결정. 시안 L1 의 읽기 폭 670 을 대체: 1440 670 에서 912).
   :has() 미지원 브라우저는 지금 화면 그대로 */
.gb-article__body:not(:has(.gb-marginnotes)) { grid-template-columns: minmax(0, 1fr); }
.gb-article__body:not(:has(.gb-marginnotes)) > .gb-prose { max-width: none; }

/* 절 표시 막대 — 시안은 모든 소제목 위에 72px Navy 2px 를 세운다.
   장문에서 절의 시작을 눈으로 세게 해주는 유일한 장치다.
   시안 간격은 14px 이나 8/16/24 스케일에 없어 16px(space-s)로 맞춘다 —
   2px 차이는 읽는 데 영향이 없고, 스케일을 깨는 비용이 더 크다. */
/* h4 까지 받는 이유: 기존 글 40건이 소제목을 전부 h4 로 쓴다(2026-09-28 실측, 글 347 은
   wp:heading level 4 가 15개이고 h2·h3 는 0개). 글을 h2/h3 로 고치는 것은 견적 범위 밖의
   콘텐츠 편집이므로, 기사 본문 안에서만 h4 를 절 소제목으로 취급한다.
   전역 h4 는 건드리지 않는다 — 다른 화면에서 h4 는 여전히 본문 크기다. */
.gb-article__body .gb-prose > h4 {
  font-size: var(--gb-font-h3);
  font-weight: var(--gb-fw-med);
  line-height: var(--gb-lh-head);
  letter-spacing: var(--gb-ls-head);
}

.gb-article__body .gb-prose > * + h4 { margin-block-start: var(--gb-space-xl); }
.gb-article__body .gb-prose > h4 + *  { margin-block-start: var(--gb-space-s); }

.gb-article__body .gb-prose > h2::before,
.gb-article__body .gb-prose > h3::before,
.gb-article__body .gb-prose > h4::before {
  content: "";
  display: block;
  inline-size: 72px;
  block-size: 1px; /* 2px 에서 1px — 메타줄 아래 전폭 강조선(2px)과 같아 어색하다는 고객 9/28 D16. 대표님 10-04 "짧은 선을 가늘게" */
  background: var(--gb-navy);
  margin-block-end: var(--gb-space-s);
}

/* 세로줄은 시안(99:95)처럼 본문 열 끝까지 내린다(GB-25, 대표님 2026-10-02). 방주 내용은 위에 붙는다 */
.gb-marginnotes {
  align-self: stretch;
  padding-inline-start: var(--gb-space-l);
  border-inline-start: var(--gb-stroke-hairline);
}

/* 방주 머리 위에도 같은 막대가 선다. 열 전체 폭이라 본문 절 막대(72px)와 길이로 구분된다. */
.gb-marginnotes__title {
  padding-block-start: var(--gb-space-s);
  border-block-start: var(--gb-rule-accent);
  font-family: var(--gb-font-family-ui);
  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-marginnote + .gb-marginnote {
  margin-block-start: var(--gb-space-s);
  padding-block-start: var(--gb-space-s);
  border-block-start: var(--gb-stroke-hairline);
}

.gb-marginnote__term {
  font-size: var(--gb-font-aside-term);
  font-weight: var(--gb-fw-med);
  color: var(--gb-ink);
}

.gb-marginnote__def {
  margin-block-start: var(--gb-space-xs);
  font-size: var(--gb-font-aside);
  line-height: var(--gb-lh-body);
  color: var(--gb-gray-600);
}

/* 표 캡션 — 표 아래. "TABLE 4 OF 7 / ..." 형태로 장문 안에서 표를 셀 수 있게 한다. */
.gb-table__caption {
  margin-block-start: var(--gb-space-xs);
  font-family: var(--gb-font-family-ui);
  font-size: var(--gb-font-label);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
  color: var(--gb-gray-600);
}

/* 연재 다음 글 — 회차 번호를 크게 두고 세로줄로 제목과 나눈다 (견적 3항 Series). */
.gb-next {
  padding-block: var(--gb-space-l);
  border-block-start: var(--gb-rule-accent);
}

.gb-next__label {
  font-family: var(--gb-font-family-ui);
  font-size: var(--gb-font-label);
  font-weight: var(--gb-fw-med);
  letter-spacing: var(--gb-ls-label);
  text-transform: uppercase;
  color: var(--gb-navy);
}

.gb-next__link {
  display: flex;
  align-items: stretch;
  margin-block-start: var(--gb-space-xl);
  text-decoration: none;
}

.gb-next__num {
  flex: 0 0 72px;
  font-family: var(--gb-font-display-family);
  font-size: var(--gb-font-h2);
  line-height: var(--gb-lh-head);
  color: var(--gb-navy); /* gray-200 은 흰 바탕 1.24:1 로 거의 안 보였다 (2026-10-04 전수조사, 대표님 결정: 금색 번호는 시안대로 두고 이것만 남색) */
}

.gb-next__text {
  padding-inline-start: var(--gb-space-m);
  border-inline-start: var(--gb-stroke-hairline);
}

.gb-next__title { font-size: var(--gb-font-body); color: var(--gb-ink); }

.gb-next__sub {
  margin-block-start: var(--gb-space-xs);
  font-size: var(--gb-font-caption);
  color: var(--gb-gray-600);
}

.gb-next__link:hover .gb-next__title { text-decoration: underline; text-underline-offset: 0.2em; }

/* 방주는 좁은 폭에서 옆에 설 자리가 없다. 본문 아래로 내리고 세로줄을 가로줄로 바꾼다.
   숨기지 않는다 — 용어 정의는 좁은 화면에서 더 필요하다. */
@media (max-width: 1023px) {
  .gb-article__body { grid-template-columns: minmax(0, 1fr); gap: var(--gb-space-xl); }
  .gb-marginnotes {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: var(--gb-space-m);
    border-block-start: var(--gb-rule-accent);
  }
}

@media (max-width: 782px) {
  .gb-next__link { display: block; }
  .gb-next__text { padding-inline-start: 0; border-inline-start: 0; }
  .gb-next__num  { display: block; margin-block-end: var(--gb-space-xs); }
}

/* ══ Member (D9 시안 11~16) ════════════════════════════
   회원 화면 4종. 입력·버튼은 위 Form·Button 규칙을 그대로 쓴다. */
.gb-member { max-inline-size: var(--gb-page-max); margin-inline: auto; padding-block: var(--gb-space-2xl); }

.gb-member__head { border-block-end: var(--gb-stroke-accent); padding-block-end: var(--gb-space-l); margin-block-end: var(--gb-space-xl); }
.gb-member__eyebrow { 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: 0 0 var(--gb-space-s); }
.gb-member__title { font-family: var(--gb-font-display-family); font-size: var(--gb-font-display); line-height: var(--gb-lh-display); letter-spacing: var(--gb-ls-display); font-weight: 400; margin: 0; }

.gb-member__form { max-inline-size: 30rem; }
.gb-member__form > * + * { margin-block-start: var(--gb-space-m); }
.gb-member__alt { max-inline-size: 30rem; margin-block-start: var(--gb-space-l); padding-block-start: var(--gb-space-l); border-block-start: var(--gb-stroke-hairline); }

/* Astra 전역 입력 규칙(input[type=…] 0,1,1, .astra-dark-mode-enable input[type=…] 0,2,1)이 .gb-input 을 이긴다 — 채움 배경, 둥근 모서리,
   40px 고정 높이, 파란 포커스. 회원 화면 안에서만 특이도를 올려 밑줄 입력으로 되돌린다.
   label 도 Astra 전역색(--ast-global-color-2)을 받아 지면에서 보이지 않았다. */
.gb-member .gb-field .gb-input {
  block-size: auto;
  padding: var(--gb-space-xs) 0;
  border: 0;
  border-block-end: var(--gb-stroke-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--gb-ink);
}
/* Astra 다크 모드는 입력 글자색과 포커스 테두리·배경을 !important 로 칠한다(글자가 배경색과 같아 보이지 않았다).
   !important 는 !important 로만 이긴다 — 회원 화면 범위 안에서만 쓴다. */
.gb-member .gb-field .gb-input { color: var(--gb-ink) !important; }
.gb-member .gb-field .gb-input:focus {
  background-color: transparent !important;
  border: 0 !important;
  border-block-end: 2px solid var(--gb-navy) !important;
  color: var(--gb-ink) !important;
}
.gb-member .gb-field--error .gb-input:focus { border-block-end-color: var(--gb-ink) !important; }
.gb-member .gb-field--error .gb-input { border-block-end-color: var(--gb-ink); border-block-end-width: 2px; }
.gb-member .gb-field__label { font-family: var(--gb-font-family-ui); color: var(--gb-gray-600); }
.gb-member label, .gb-member .gb-check span { color: var(--gb-ink); }

.gb-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gb-space-s); }
.gb-field__row a { font-family: var(--gb-font-family-ui); font-size: var(--gb-font-caption); }

.gb-notice { max-inline-size: 30rem; background: var(--gb-white); border-block-start: var(--gb-stroke-rule); border-block-start-color: var(--gb-navy); padding: var(--gb-space-m) var(--gb-space-l); margin-block-end: var(--gb-space-l); color: var(--gb-navy); }
.gb-notice p { margin: 0; }
.gb-notice--error { border-block-start-width: 2px; border-block-start-color: var(--gb-ink); }

.gb-check { display: flex; align-items: center; gap: var(--gb-space-s); }
.gb-check input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--gb-navy); }

/* honeypot — 사람에게는 보이지 않고 자동 입력기만 채운다. display:none 은 일부 봇이 건너뛴다 */
.gb-hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.gb-account { display: grid; gap: var(--gb-space-xl); }
.gb-account__nav { display: flex; flex-direction: column; align-self: start; border-inline-start: var(--gb-stroke-hairline); }
.gb-account__nav a { padding: var(--gb-space-s) var(--gb-space-m); color: var(--gb-ink); text-decoration: none; font-family: var(--gb-font-family-ui); }
.gb-account__nav a:hover, .gb-account__nav a:focus-visible { color: var(--gb-navy); box-shadow: inset 2px 0 0 var(--gb-navy); }
/* 구획 머리의 짧은 navy 선 (시안 14) */
.gb-account__section { position: relative; padding-block-start: var(--gb-space-m); }
.gb-account__section::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 4.5rem; border-block-start: var(--gb-stroke-accent); }
.gb-account__section + .gb-account__section { margin-block-start: var(--gb-space-2xl); }
.gb-account__section h2 { font-family: var(--gb-font-family-head); font-size: var(--gb-font-h2); margin: 0 0 var(--gb-space-l); }
.gb-account__pair { display: grid; gap: var(--gb-space-l); }
.gb-account__pair > .gb-field + .gb-field { margin-block-start: 0; }
.gb-account .gb-member__form { max-inline-size: 42rem; }
.gb-member .gb-account__nav a { text-decoration: none; }

@media (min-width: 783px) {
  .gb-account { grid-template-columns: 14rem 1fr; }
  .gb-account__pair { grid-template-columns: 1fr 1fr; }
}

/* 연재·Resources 썸네일 이미지(GB-56): 칸을 채우되 로고가 잘리지 않게 전부 보인다 */
.gb-thumb { display: block; inline-size: 100%; block-size: 100%; box-sizing: border-box; padding: 12px; object-fit: contain; background: var(--gb-white); }
.gb-series-card__thumb .gb-thumb, .gb-home-series__art--thumb .gb-thumb { padding: 6px; }
.gb-thumb--slot { block-size: auto; } /* 홈, About, Contact 자리 — 비율은 inline aspect-ratio (inc/site-images.php) */

/* 화면 구분 기호 — 가운뎃점 대신 얇은 세로선 (대표님 2026-10-04, 사이트 전체). 마크업은 gb_sep_html().
   글자색을 따라가고 흐리게 둬서 남색 바탕(금색·아이보리 글자)에서도 같은 무게로 보인다. */
.gb-sep {
  display: inline-block;
  inline-size: 1px;
  block-size: 0.9em;
  min-block-size: 9px;
  margin-inline: 0.5em; /* 양옆 띄어쓰기 한 칸씩과 합쳐 점이 있던 자리 폭 */
  vertical-align: -0.08em;
  background: currentColor;
  opacity: 0.45;
}

/* 404 — Astra 검색칸. Astra 다크 모드가 입력칸을 #0F172A 바탕으로 !important 칠해
   돋보기가 보이지 않았다(2026-10-04 전수조사). 다른 입력칸처럼 흰 바탕, 회색 테두리, 남색 돋보기 */
.error-404 .search-form .search-field,
.error-404 .search-form .search-field:focus {
  background-color: var(--gb-white) !important;
  border: var(--gb-stroke-hairline) !important;
  border-radius: 0;
  color: var(--gb-ink) !important;
}
.error-404 .search-form .search-field::placeholder { color: var(--gb-gray-600); opacity: 1; }
.error-404 .search-form .search-submit .ast-icon svg { fill: var(--gb-navy); }
.error-404 .search-form .search-field:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: 2px; }