/* 공용 헤더 — index · stats · report_guide 가 함께 쓴다. (2026-09-01)
 *
 * 왜 만들었나
 *   페이지마다 헤더를 따로 손으로 짜서 로고가 튀었다. 1200px 화면 실측:
 *     index  로고 x 283 · 32px · 글자 19px   (안쪽 폭 620)
 *     stats  로고 x 209 · 32px · 글자 19px   (안쪽 폭 780)
 *     report 로고 x 163 · 30px · 글자 13.3px (안쪽 폭 900)
 *   가로로 120px 이 튀었다. 크기만 맞춰선 안 잡힌다 — 안쪽 폭이 달라서 생긴 일이다.
 *
 * ⛔ 로고는 페이지가 바뀌어도 크기·위치가 움직이면 안 된다. (2026-09-01 사장님 기준)
 *    메뉴는 페이지마다 달라도 된다.
 *
 * ⛔ 안쪽 폭은 사이트 전체에서 하나여야 한다. 본문 폭을 따라가면 안 된다.
 *    상용 사이트는 헤더 폭과 본문 폭을 따로 둔다 — 글이 680px 이어도 헤더는 1200px 이다.
 *
 * ⛔ 첫 줄 높이를 .brand 에 고정으로 준다. 메뉴가 둘째 줄로 내려가도
 *    로고 y 가 안 움직인다. header 에 height 를 주면 안 된다 —
 *    stats 가 그렇게 했다가 메뉴 두 줄(82px)이 60px 통에 들어가 로고가 잘렸다.
 *
 * ⛔ 이 파일을 고치면 세 페이지의 <link ... ?v=> 숫자를 함께 올려야 한다.
 *    캐시 버전을 붙여 주는 서버 코드는 index 의 styles.css·app.js 에만 걸려 있다.
 */

header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #edf2f7;
}

.header-inner {
  width: 100%;
  /* ⛔ max-width 를 두지 않는다. (2026-09-13 사장님 지시)
        가운데 정렬은 '남는 폭' 을 반으로 나누는데, 세로 스크롤바가 있고 없고에 따라
        그 폭이 달라진다. 그래서 페이지를 옮길 때 로고가 몇 px 씩 움직였다.
        실측 1280px 창: 랜딩 181 · 앱 173 (8px 차이).
        폭을 없애면 로고는 언제나 왼쪽 여백만큼 떨어진 자리에 못 박힌다.
     ⛔ 본문 폭은 그대로다. 헤더만 펴는 것이다. */
  padding: 0 28px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  row-gap: 6px;
  flex-wrap: wrap;
}

/* ⛔ height 가 첫 줄 높이를 정한다. 로고 y 를 붙잡아 두는 것이 이 값이다. */
.brand {
  height: 64px;
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  /* ⛔ 0 이다. 로고와 글자가 한 그림에 들어 있어 사이를 벌릴 것이 없다. (2026-09-13) */
  gap: 0;
  /* ⛔ 자간을 여기 두지 않는다. em 은 '그 요소의 글자 크기' 기준이라
        부모(16px)에 두면 -0.48px 이 되고, 글자(21px)에 두면 -0.63px 이 된다.
        랜딩은 글자에 붙어 있다. 실측으로 1px 이 어긋났다. (2026-09-13) */
}

.brand img {
  /* ⛔ logo_head.png 는 원(렌즈) 중심이 그림 중심에 오도록 위에 여백을 준 판이다.
        원본 logo.png 는 돋보기 손잡이 때문에 박스가 아래로 길어, 글자를 박스 중심에
        맞추면 원보다 아래로 내려가 보였다. (2026-09-13 사장님 지적, 실측 2.5px)
     ⛔ 세로가 길어진 만큼 높이를 올려야 원 크기가 그대로다. 34 x 971/848 = 38.9 */
  height: 39px;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}

/* ⛔ 글꼴과 색을 여기서 직접 못 박는다. 페이지 설정에 기대지 않는다. (2026-09-01)
 *    실측: report_guide 만 Pretendard 를 안 불러와서 로고 글씨 모양이 달랐고,
 *    --blue 가 없어 「상가DNA」 가 #2563eb(다른 파랑)로 나왔다. index·stats 는 #168cff.
 *    페이지가 늘어나도 로고만은 저절로 같아야 한다. var() 로 두면 또 어긋난다. */
.brand span {
  /* ⛔ 한 줄로 둔다. (2026-09-13 사장님 지시 "굳이 두줄로 표시할 필요도 없고")
        랜딩이 처음부터 한 줄이었다. 두 화면이 같아야 한다. */
  display: flex;
  flex-direction: row;
  /* ⛔ center 다. baseline 으로 두면 큰 글자(21px)의 밑선에 맞추느라 전체가 내려간다.
        실측: 랜딩 '알고시작' y14 인데 앱은 y20 이었다. (2026-09-13) */
  align-items: center;
  gap: 9px;
  line-height: 1.15;
  text-align: left;
  font-family: "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #0f172a;
}

.brand small {
  font-family: inherit;
  /* ⛔ 9px 이었다. 모바일에서 읽히는 하한(10~11px)보다 작았다. (2026-09-01)
     11·12·13·14px 를 나란히 놓고 사장님이 13px 을 골랐다.
     13px 이면 「상가DNA」 가로 폭이 위의 「알고시작」(19px)과 거의 같아져
     두 줄이 네모로 떨어진다. 14px 은 아래가 더 넓어져 튀어나온다. */
  font-size: 13px;
  color: #168cff;
  letter-spacing: .1em;
  font-weight: 700;
}

/* ⛔ 로고 글자를 그림으로 바꿨다. (2026-09-13 사장님 지시)
      웹폰트가 늦게 와서 글자가 한 번 갈아 끼워지고, 그 순간이 눈에 보였다.
      실측(사장님 화면 녹화 1080x2280):
        페이지를 연 순간  「알고시작」 폭 186  ← 기기 글꼴
        0.2초 뒤         「알고시작」 폭 183  ← Pretendard
      두 페이지를 오갈 때마다 매번 일어난다. CSS 로는 절대 못 잡는 것이었다.
   ⛔ 글자를 지우지 않는다. 눈에만 안 보이게 두고 화면 읽어주는 프로그램과
      검색엔진은 읽게 한다. 로고 글자가 곧 상호라 지우면 안 된다.
   ⛔ 그림은 랜딩과 '같은 파일' 이어야 한다. 따로 만들면 또 어긋난다. */
.brand span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ⛔ 좁은 화면에서도 로고 크기는 그대로 둔다. 좌우 여백만 줄인다.
      크기가 바뀌면 사장님이 말한 '로고가 이동하면 안 된다' 가 깨진다.

   ⛔ 480px 이다. 560px 이 아니다. (2026-09-13)
      랜딩은 480px 에서 여백을 줄이는데 앱만 560px 이라, 그 사이 구간에서
      로고가 10px 어긋났다. 실측 520px: 랜딩 로고 x28 · 앱 x18.
      메뉴를 눕히는 아래 규칙(560px)과는 다른 값이다. 같이 맞추지 마라 —
      메뉴가 둘째 줄로 내려가는 시점과 여백을 줄이는 시점은 별개다. */
@media (max-width: 480px) {
  .header-inner { padding: 0 18px; }
}


/* 「주소로 조회하기」 — 세 페이지 공통. (2026-09-01)
 * ⛔ 이 버튼이 헤더의 핵심 행동이라 색을 입힌다. 메뉴 글자와 구분돼야 한다.
 * ⛔ 페이지마다 따로 두지 않는다. 종전엔 index 12px · stats 13px 연파랑 ·
 *    report_guide 13px 진파랑 흰글씨로 셋이 다 달랐다.
 */
.header-cta {
  border: 0;
  border-radius: 10px;
  padding: 9px 16px;
  background: #edf7ff;
  color: #0f6fcc;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  transition: background .15s;
}
.header-cta:hover { background: #dceefc; }

/* 메뉴 — 세 페이지 공통. (2026-09-01)
 * ⛔ 페이지마다 따로 두니 글자가 13.5 / 14 / 14px, 여백이 4px 0 / 6px 0 / 6px 2px,
 *    선택 색이 #168cff / #168cff / #2563eb 로 갈렸다. 헤더 높이도 93 / 103 / 105 였다.
 * ⛔ 좁은 화면에서 글자를 줄이지 않는다. 줄이면 페이지마다 또 어긋난다.
 *    메뉴는 두 칸뿐이라 375px 에서도 14px 로 넉넉하다.
 * ⛔ `header .gnb` 로 쓴다 — 페이지 인라인 <style> 이 이 파일보다 뒤에 오기 때문.
 */
header .gnb {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex-wrap: wrap;
}
header .gnb a {
  font-family: inherit;
  font-size: 14px;
  /* ⛔ line-height 를 못 박는다. 안 그러면 페이지 본문 줄간격을 물려받는다. (2026-09-01)
     실측: report_guide 는 body line-height 25.6px 이라 메뉴 글자가 22.4px 줄간격을
     받아 메뉴 줄이 34px 이 됐다. 그래서 헤더 높이가 99 / 104 / 105 로 갈렸다. */
  line-height: 21px;
  /* ⛔ 2026-09-13 사장님 지시로 진하게. 로고가 800 인데 메뉴가 400 이라 대비가 컸다.
        고른 메뉴(.on)는 아래에서 800 · 파랑으로 한 단계 더 구분한다. */
  font-weight: 700;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0;
}
header .gnb a.on { color: #168cff; font-weight: 800; }
header .gnb a:hover { color: #168cff; }


/* ⛔⛔ 좁은 화면 규칙은 **파일 맨 끝**에 둔다. (2026-09-22)
   전에는 이 덩어리가 아래 `header .gnb { flex-wrap: wrap }` 보다 **위**에 있었다.
   굵기가 같으면 뒤에 오는 쪽이 이기므로, 좁은 화면에서도 wrap 이 먹어
   메뉴 다섯 칸이 두 줄로 내려갔다. 폰에서 헤더가 153px(화면의 19%)을 먹었다.
   ⭐ !important 로 덮지 않는다. 순서를 바로잡는다. */
/* ⛔ 좁은 화면에서 메뉴는 한 줄짜리 가로 스크롤 탭바로 둔다. (2026-09-01)
 *
 *    로고 첫 줄을 64px 로 고정했더니 report_guide 는 메뉴 4개가 세 줄로 밀려
 *    헤더가 156px 이 됐다(화면의 19%). sticky 라 스크롤 내내 그만큼 먹는다.
 *    실측 375px: index 65 · stats 103 · report_guide 156.
 *    한 줄로 눕히면 셋 다 '로고줄 + 탭줄' 두 줄로 맞는다.
 *    네이버·쿠팡의 카테고리바가 같은 방식이다.
 *
 * ⛔ `header .gnb` 로 쓴다. 페이지 인라인 <style> 의 `.gnb` 가 이 파일보다 뒤에 오므로
 *    같은 굵기(.gnb)로 쓰면 그쪽이 이긴다. 한 칸 더 좁혀야 우리가 이긴다.
 */
@media (max-width: 560px) {
  header .gnb {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header .gnb::-webkit-scrollbar { display: none; }
  header .gnb > * { flex: 0 0 auto; white-space: nowrap; }
}