/*
 * 전 페이지 공용 헤더·푸터. index.html 과 하위 6개 페이지가 모두 읽는다.
 *
 * 변수 이름에 --ch- 를 붙인 이유: 하위 페이지는 이 파일과 styles.css 를 함께 읽는데,
 * styles.css 도 --ink / --line / --mint 를 다른 값으로 정의한다. 접두사가 없으면
 * 로드 순서에 따라 서로를 덮어써서 본문 색이 바뀐다.
 *
 * 본문 스타일은 여기 넣지 않는다. 홈은 home.css, 하위 페이지는 styles.css 가 각자 가진다.
 */

:root {
  --ch-ink: #0d1a18;
  --ch-ink-2: #46564f;
  --ch-mint: #0f8f85;
  --ch-line: #e3e8e5;
  --ch-gutter: max(20px, calc((100vw - 1200px) / 2));
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 90;
  padding: 9px 13px;
  color: #fff;
  background: var(--ch-ink);
  transform: translateY(-160%);
}

.skip:focus { transform: translateY(0); }

/* ---------- 헤더 ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--ch-line);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 var(--ch-gutter);
}

.mark {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ch-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-decoration: none;
}

.mark img { width: 28px; height: 28px; border-radius: 8px; }
.mark b { color: var(--ch-mint); font-weight: 800; }

.hdr-in nav {
  display: flex;
  align-items: center;
  gap: 30px;
  color: var(--ch-ink-2);
  font-size: 13px;
  font-weight: 600;
}

.hdr-in nav a { color: inherit; text-decoration: none; }
.hdr-in nav a:hover { color: var(--ch-ink); }
.hdr-in nav a[aria-current="page"] { color: var(--ch-ink); }

.hdr-cta {
  padding: 7px 15px;
  color: #fff !important;
  border-radius: 999px;
  background: var(--ch-ink);
  font-weight: 700;
}

.burger { display: none; }

.m-nav { display: none; }

/* ---------- 푸터 ---------- */

.ftr {
  padding: 42px var(--ch-gutter) 34px;
  border-top: 1px solid var(--ch-line);
  color: #8b9994;
  font-size: 13px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.72;
}

.ftr-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 26px 40px;
}

.ftr p { margin: 0; }

.ftr-brand strong {
  display: block;
  margin-bottom: 9px;
  color: var(--ch-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.ftr-brand strong span { color: var(--ch-mint); }

.ftr-brand a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ch-line);
}

.ftr-brand a:hover { color: var(--ch-ink); }

/* 홈 푸터에만 있는 블로그 안내 줄. 위 두 줄(운영사·문의)과 살짝 띄운다. */
.ftr-blog { margin-top: 12px; }
.ftr-blog a { font-weight: 700; white-space: nowrap; }

.ftr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  color: var(--ch-ink-2);
  font-weight: 600;
}

.ftr-nav a { color: inherit; text-decoration: none; }
.ftr-nav a:hover { color: var(--ch-ink); }

.ftr-copy { margin: 30px 0 0; font-size: 12px; }

/* ---------- 모바일 ---------- */

@media (max-width: 900px) {
  :root { --ch-gutter: 20px; }

  .hdr-in nav { display: none; }

  .burger {
    display: grid;
    align-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 10px 7px;
    border: 0;
    background: transparent;
  }

  .burger span {
    display: block;
    height: 2px;
    background: var(--ch-ink);
  }

  .m-nav {
    display: none;
    flex-direction: column;
    padding: 6px var(--ch-gutter) 16px;
    border-top: 1px solid var(--ch-line);
    color: var(--ch-ink-2);
    font-size: 15px;
    font-weight: 600;
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .m-nav a { padding: 12px 0; color: inherit; text-decoration: none; }
  .m-nav.open { display: flex; }
}