/*
 * 4개 페이지에 글자 그대로 똑같이 들어있던 규칙만 모았습니다.
 * design/*.html 의 <style> 에서 그대로 옮긴 것이며 선택자와 값을 바꾸지 않았습니다.
 * 페이지별 CSS(page-*.css)는 이 파일 다음에 불러와서 필요한 부분을 덮습니다.
 */

@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

a:hover { color: inherit; opacity: 0.6; }

img { display: block; }

.brand-logo__mark { width: 68px; height: 24px; }

.brand-logo__wordmark { width: 200px; height: 13px; }

.nav-burger span {
  display: block; width: 22px; height: 1px; background: currentColor;
  transition: transform 240ms var(--ease-std), opacity 160ms linear;
}

/*
 * 메뉴가 열리면 햄버거가 X 로 변형되어 그대로 닫기 버튼이 됩니다.
 * 그래서 오버레이 안에 닫기 버튼을 따로 두지 않습니다.
 * (예전에는 .nav-overlay__close 가 따로 있었는데, 헤더가 오버레이보다 위에 놓여
 *  두 X 의 중심이 정확히 같은 자리에 겹쳐 보였습니다)
 */
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay[data-open="1"] { display: flex; }

.nav-overlay a {
  font-family: var(--font-head); font-weight: 500; font-size: 32px; letter-spacing: -0.02em;
}

.btn-primary:hover { background: var(--c-brand-hover); color: #FFFFFF; opacity: 1; }

.site-footer {
  background: var(--c-dark-bg); color: var(--c-dark-text);
  background-image: radial-gradient(#35352F 1px, transparent 1px); background-size: 24px 24px;
  padding: var(--gap-l) var(--pad-x) 56px;
}

.site-footer__inner { display: flex; flex-direction: column; gap: var(--gap-l); }

.site-footer__top { display: flex; flex-direction: column; gap: var(--gap-m); }

.site-footer__brand { display: flex; flex-direction: column; gap: var(--gap-s); }

.site-footer__copy { border-top: 0.5px solid var(--c-line-dark); padding-top: 32px; font-size: var(--fs-caption); color: #8E8E8E; }