/* ============================================================
   공통 헤더 — Mname 2.0

   원본 헤더는 로고가 두 벌(h-top / h-bot)이고 메뉴가 두 층이라, 폭에 따라 높이가
   56px 도 되고 136px 도 됐다. 한 줄로 합치고 높이를 고정한다.

   본문이 헤더 아래로 파고들지 않게 `--header-h` 를 base.html 이 재서 알려 준다.
   ============================================================ */

.mn-hd {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* `common.css` 의 `header { height: 80px }`(1280px 이하 62px)가 여기에 먹어서
     **바깥(62px)이 안쪽(.mn-hd__in 68px)보다 작았다** — 헤더 내용이 6px 넘쳤고
     본문 여백도 그 62px 로 잡혀 첫 줄이 살짝 가렸다. 높이는 안쪽이 정한다. */
  height: auto;
  z-index: 200;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .16s, box-shadow .16s;
}
/* 흰 본문과 흰 헤더가 만나면 경계가 사라진다. 스크롤한 뒤에만 선을 준다. */
.mn-hd.is-stuck {
  border-bottom-color: var(--mn-border);
  box-shadow: 0 1px 12px rgba(16, 24, 40, .05);
}

/* 헤더가 `position: fixed` 라 본문이 그 아래로 파고든다.
   **여기서 한 번만 준다.** 화면마다 padding-top 을 챙기게 하면 반드시 하나를
   빠뜨리고, 그 화면에서만 첫 줄이 헤더에 잘린다(온보딩 안내 문구가 그랬다).

   이 파일은 공통 헤더를 싣는 화면만 읽는다 — 로그인·가입은 독립 레이아웃이라
   이 파일을 싣지 않으므로 영향이 없다.

   높이는 base.html 이 재서 `--header-h` 로 알려 준다(폭에 따라 58~68px). */
body { padding-top: var(--header-h, 68px); }

.mn-hd__in {
  max-width: var(--mn-container);
  margin: 0 auto;
  padding: 0 var(--mn-gutter);
  height: 68px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.mn-hd__logo { display: flex; align-items: center; flex: 0 0 auto; }
.mn-hd__logo img { display: block; width: 132px; height: auto; }

/* **`position` 을 반드시 적는다.**
   원본 `common/css/common.css` 에 옛 모바일 메뉴 규칙이 남아 있다.

       header nav { position: relative; width: 100% }
       @media (max-width:1280px) { header nav { position: fixed; left: 100% } }

   선택자가 태그(`header nav`)라 **새 헤더의 <nav> 를 그대로 가로챈다.**
   `.mn-hd__nav` 가 클래스라 우선순위는 이기지만, 우리가 선언하지 않은
   속성은 옛 규칙이 그대로 먹는다 — 그래서 메뉴가 화면 밖(left:100%)으로
   밀려나 데스크톱에서 통째로 사라져 있었다.
   선언하지 않은 것이 곧 구멍이다. 자리를 정하는 속성을 명시한다. */
.mn-hd__nav {
  display: flex; align-items: center; gap: 26px; flex: 1 1 auto;
  position: static; left: auto; right: auto; width: auto; height: auto;
}
.mn-hd__nav a {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--mn-text);
  text-decoration: none;
  padding: 6px 0;
}
.mn-hd__nav a:hover { color: var(--mn-primary); }
.mn-hd__nav a:focus-visible { outline: 2px solid var(--mn-primary); outline-offset: 4px; }
/* 밑줄은 hover 에서만. 늘 그려 두면 다섯 개가 나란히 붙어 시끄럽다. */
.mn-hd__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--mn-primary);
  transform: scaleX(0); transform-origin: left; transition: transform .16s;
}
.mn-hd__nav a:hover::after { transform: scaleX(1); }

.mn-hd__side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* 여백만 주면 높이가 28px 이라 손가락으로 빗나간다(실측, 2026-08-18).
   글자는 그대로 두고 누르는 자리만 넓힌다. */
.mn-hd__quiet {
  border: 0; background: none; padding: 6px 8px;
  min-height: 32px; display: inline-flex; align-items: center;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--mn-text-muted); text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.mn-hd__quiet:hover { color: var(--mn-navy); }
.mn-hd__logout { margin: 0; display: flex; }

/* ── 햄버거 ────────────────────────────────────── */
.mn-hd__burger {
  display: none;
  width: 42px; height: 42px;
  border: 0; background: none; cursor: pointer;
  position: relative; flex: 0 0 auto;
}
.mn-hd__burger span,
.mn-hd__burger span::before,
.mn-hd__burger span::after {
  position: absolute; left: 11px; width: 20px; height: 2px;
  background: var(--mn-navy); border-radius: 2px;
  transition: transform .18s, opacity .12s;
}
.mn-hd__burger span { top: 20px; }
.mn-hd__burger span::before { content: ""; left: 0; top: -6px; }
.mn-hd__burger span::after { content: ""; left: 0; top: 6px; }
.mn-hd__burger.is-open span { background: transparent; }
.mn-hd__burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.mn-hd__burger.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

/* ── 모바일 서랍 ───────────────────────────────── */
.mn-hd__dim {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(16, 24, 40, .42);
}
/* 서랍도 <nav> 다 — 위와 같은 옛 규칙에 걸린다. `left: 100%` 가 그대로
   먹어서 **열어도 화면 밖에 있었다**(폭 1265px 에서 x=1265). 눌러도 아무것도
   안 나오는 것으로 보인다. `left: auto` 를 명시해 right 로 붙인다. */
.mn-hd__drawer {
  position: fixed; z-index: 195;
  top: 68px; left: auto; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: #fff;
  border-left: 1px solid var(--mn-border);
  padding: 12px 20px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.mn-hd__drawer a {
  display: block;
  padding: 15px 2px;
  border-bottom: 1px solid var(--mn-border);
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  color: var(--mn-navy); text-decoration: none;
}
.mn-hd__drawer a:hover { color: var(--mn-primary); }
.mn-hd__drawer-act { margin-top: 22px; display: grid; gap: 9px; }
.mn-hd__drawer-act .mn-btn { width: 100%; }
.mn-hd__drawer-act form { margin: 0; }

body.mn-noscroll { overflow: hidden; }

/* ── 폭에 따라 ─────────────────────────────────── */
/* 메뉴 5개 + 버튼 3개가 한 줄에 들어가지 않는 지점에서 서랍으로 넘긴다. */
@media (max-width: 1024px) {
  .mn-hd__nav { display: none; }
  .mn-hd__side { display: none; }
  .mn-hd__burger { display: block; margin-left: auto; }
}
@media (max-width: 560px) {
  .mn-hd__in { height: 58px; }
  .mn-hd__logo img { width: 112px; }
  .mn-hd__drawer { top: 58px; }
}

/* 인쇄에서는 떠 있을 이유가 없다. */
@media print {
  .mn-hd { position: static; }
  .mn-hd__burger, .mn-hd__drawer, .mn-hd__dim { display: none; }
}