/*
 * 기본 스타일. wds-tokens.css 의 변수만 참조한다. 임의값을 쓰지 않는다.
 */

*, *::before, *::after { box-sizing: border-box; }

/*
 * 본문 기준은 WDS Headline1(18px)을 쓴다.
 * 기존 Astra 가 18px 였고 콘텐츠가 그 크기에 맞춰져 있어,
 * Body1(16px)로 내리면 전체가 작아 보인다.
 */
/*
 * 페이지 배경은 옅은 회색, 콘텐츠 블록은 흰 카드다.
 * 섹션 제목만으로는 경계가 안 보여 여러 섹션이 한 덩어리로 읽힌다.
 */
body {
  margin: 0;
  background: var(--gcp-bg-alt);
  color: var(--gcp-label-normal);
  font-family: var(--gcp-font);
  font-size: var(--gcp-text-size);
  line-height: var(--gcp-text-lh);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--gcp-primary); text-decoration: none; }
a:hover { color: var(--gcp-primary-strong); text-decoration: underline; }

img { max-width: 100%; height: auto; }

/*
 * 본문이 18px 이므로 제목은 그보다 확실히 커야 위계가 보인다.
 * h3 를 Headline1(18px)로 두면 본문과 구분되지 않는다.
 * 40 / 32 / 24 / 22 로 잡아 한 단계씩 벌린다.
 */
h1, h2, h3, h4 { color: var(--gcp-label-strong); margin: var(--gcp-s8) 0 var(--gcp-s4); }
h1 { font-size: var(--gcp-display2-size); line-height: var(--gcp-display2-lh); margin-top: 0; }
h2 { font-size: var(--gcp-title1-size); line-height: var(--gcp-title1-lh); }
h3 { font-size: var(--gcp-title3-size); line-height: var(--gcp-title3-lh); }
h4 { font-size: var(--gcp-heading1-size); line-height: var(--gcp-heading1-lh); }
p  { margin: 0 0 var(--gcp-s4); }

.gcp-container {
  max-width: var(--gcp-container);
  margin: 0 auto;
  padding: 0 var(--gcp-s4);
}

/* 헤더 */
.gcp-header {
  background: var(--gcp-label-normal);
  color: var(--gcp-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.gcp-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gcp-s6);
  min-height: var(--gcp-header-h);
}
.gcp-header__brand {
  color: var(--gcp-bg);
  font-size: var(--gcp-headline1-size);
  font-weight: 700;
  white-space: nowrap;
}
.gcp-header__brand:hover { color: var(--gcp-bg); text-decoration: none; }
/*
 * 메뉴가 길어지면 가로로 흐르게 둔다.
 * min-width: 0 이 없으면 flex 자식이 내용만큼 벌어져 헤더를 밀어낸다.
 */
.gcp-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gcp-nav::-webkit-scrollbar { display: none; }
.gcp-nav ul { display: flex; gap: var(--gcp-s5); list-style: none; margin: 0; padding: 0; }
.gcp-nav li { white-space: nowrap; }
.gcp-nav a { color: var(--gcp-bg); font-size: var(--gcp-headline1-size); opacity: .85; }
.gcp-nav a:hover { opacity: 1; text-decoration: none; }

/* 본문 */
.gcp-main { padding: var(--gcp-s8) 0 var(--gcp-s12); }

/* 글·고정 페이지 본문도 흰 카드에 담는다 */
.gcp-entry,
.gcp-legacy {
  background: var(--gcp-bg);
  border-radius: var(--gcp-radius-card);
  padding: var(--gcp-s8);
  margin-bottom: var(--gcp-s6);
}
.gcp-comments {
  background: var(--gcp-bg);
  border-radius: var(--gcp-radius-card);
  padding: var(--gcp-s8);
}

.gcp-entry__title { margin-bottom: var(--gcp-s2); }
.gcp-entry__meta {
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-headline1-size);
  margin-bottom: var(--gcp-s6);
}
.gcp-entry__content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--gcp-s4) 0;
}
.gcp-entry__content th, .gcp-entry__content td {
  border: 1px solid var(--gcp-border);
  padding: var(--gcp-s2) var(--gcp-s3);
  text-align: left;
}
.gcp-entry__content th { background: var(--gcp-bg-alt); }

/* 본문 안의 넓은 요소가 화면을 밀지 않게 한다 */
.gcp-entry__content { overflow-wrap: break-word; }
.gcp-entry__content pre { overflow-x: auto; }

/* 목록 */
.gcp-list {
  list-style: none;
  margin: 0;
  padding: var(--gcp-s6) var(--gcp-s8);
  background: var(--gcp-bg);
  border-radius: var(--gcp-radius-card);
}
.gcp-list__item {
  border-bottom: 1px solid var(--gcp-border);
  padding: var(--gcp-s4) 0;
}
.gcp-list__item:last-child { border-bottom: 0; }
/* 섹션 안에 들어간 목록은 이미 카드 안이므로 다시 감싸지 않는다 */
.gcp-section .gcp-list { padding: 0; background: none; border-radius: 0; }

/* 댓글 */
.gcp-comments { margin-top: var(--gcp-s10); }
.gcp-comments input[type="text"],
.gcp-comments input[type="email"],
.gcp-comments input[type="url"],
.gcp-comments textarea {
  width: 100%;
  max-width: 100%;
  padding: var(--gcp-s2) var(--gcp-s3);
  border: 1px solid var(--gcp-border);
  border-radius: var(--gcp-radius-btn-s);
  font-family: var(--gcp-font);
  font-size: var(--gcp-headline1-size);
}
.gcp-comments .submit {
  background: var(--gcp-primary);
  color: var(--gcp-bg);
  border: 0;
  border-radius: var(--gcp-radius-btn);
  padding: var(--gcp-s3) var(--gcp-s6);
  font-family: var(--gcp-font);
  font-size: var(--gcp-headline1-size);
  cursor: pointer;
}
.gcp-comments .submit:hover { background: var(--gcp-primary-strong); }

/* 푸터 */
.gcp-footer {
  background: var(--gcp-label-normal);
  color: var(--gcp-border);
  padding: var(--gcp-s8) 0;
  font-size: var(--gcp-headline1-size);
}
.gcp-footer a { color: var(--gcp-border); }
.gcp-footer ul { display: flex; flex-wrap: wrap; gap: var(--gcp-s5); list-style: none; margin: 0 0 var(--gcp-s4); padding: 0; }

/* 페이지네이션 */
.gcp-pagination { margin-top: var(--gcp-s8); display: flex; gap: var(--gcp-s2); flex-wrap: wrap; }
.gcp-pagination .page-numbers {
  padding: var(--gcp-s2) var(--gcp-s3);
  border: 1px solid var(--gcp-border);
  border-radius: var(--gcp-radius-btn-s);
}
.gcp-pagination .current {
  background: var(--gcp-primary);
  border-color: var(--gcp-primary);
  color: var(--gcp-bg);
}

/* 접근성 */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  padding: var(--gcp-s2) var(--gcp-s4);
  background: var(--gcp-bg);
  color: var(--gcp-label-strong);
}

@media (max-width: 782px) {
  .gcp-header__inner { flex-wrap: wrap; gap: var(--gcp-s3); padding-bottom: var(--gcp-s2); }
  .gcp-nav { width: 100%; overflow-x: auto; }
  .gcp-nav ul { gap: var(--gcp-s4); padding-bottom: var(--gcp-s1); }
  /* 좁은 화면에서도 위계는 유지하되 한 단계씩 줄인다 */
  h1 { font-size: var(--gcp-title1-size); line-height: var(--gcp-title1-lh); }
  h2 { font-size: var(--gcp-title3-size); line-height: var(--gcp-title3-lh); }
  h3 { font-size: var(--gcp-heading1-size); line-height: var(--gcp-heading1-lh); }
  h4 { font-size: var(--gcp-headline1-size); line-height: var(--gcp-headline1-lh); }
  .gcp-main { padding: var(--gcp-s6) 0 var(--gcp-s10); }
}