/* ============================================================
   layout.css — 헤더·푸터·페이지 골격
   ============================================================ */

/* ---------- 헤더 ---------- */
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}

.wordmark { display: block; line-height: 0; }
.wordmark img { height: 30px; width: auto; display: block; filter: invert(1); }

.mainnav {
  display: flex;
  gap: clamp(14px, 2.2vw, 30px);
  font-size: 12px;
  letter-spacing: .13em;
  color: var(--dim);
}
.mainnav a { transition: color .2s; }
.mainnav a:hover,
.mainnav a[aria-current] { color: var(--paper); }

.lang {
  display: flex;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--dim);
}
.lang a { transition: color .2s; }
.lang a:hover,
.lang a[aria-current] { color: var(--paper); }

@media (max-width: 1100px) {
  .hdr { flex-wrap: wrap; gap: 10px 14px; padding: 16px var(--pad); }
  .wordmark { flex: 0 0 auto; }
  .wordmark img { height: 26px; }
  .lang { margin-left: auto; }
  .mainnav {
    order: 3;
    flex: 1 0 100%;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: .08em;
  }
}
@media (max-width: 640px) {
  .mainnav { gap: 10px; font-size: 10.5px; letter-spacing: .04em; }
}

/* ---------- 페이지 머리 ---------- */
.page-head { padding: clamp(32px, 8vw, 80px) var(--pad) 20px; }

.eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--dim);
}

.count {
  margin: 0 0 6px;
  font-size: clamp(26px, 6vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.since { margin: 0; font-size: 13px; color: var(--dim); }

/* 섹션 머리 (제목 + 우측 링크) */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 0 var(--pad) 22px;
}
.sec-more {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--dim);
  transition: color .2s;
}
.sec-more:hover { color: var(--paper); }

.empty { padding: 60px var(--pad); color: var(--dim); }

/* ---------- 푸터 ---------- */
.ftr {
  padding: 40px var(--pad);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim);
}
.ftr p { margin: 0; }