/* === nav.css v=20260528b loaded === */
/* ============================================================
 * Unified Navigation · 단일 원소스 (모든 페이지 공유)
 * ------------------------------------------------------------
 * 이 파일이 페이지에 link되면 cascade 우선으로
 * 페이지 인라인 nav CSS를 override 합니다.
 *
 * 사용:
 *   <link rel="stylesheet" href="nav.css">
 *
 * 작성: 2026-05-28 / 회차 1
 * 갱신: 옛 .page-header 가리기 추가 (M1 bundler 잔존 마크업 대응)
 * ============================================================ */

/* ───────────── Nav 자체 토큰 ───────────── */
:root {
  --nav-bg: rgba(243, 238, 229, 0.92);
  --nav-border-bottom: rgba(31, 26, 19, 0.08);
  --nav-ink: #1f1a13;
  --nav-ink-soft: #5a4f3f;
  --nav-accent: #7a3a1f;
  --nav-brand-bg: rgba(255, 255, 255, 0.4);
  --nav-brand-bg-hover: rgba(255, 255, 255, 0.7);
  --nav-brand-border: rgba(122, 58, 31, 0.3);
}

/* ───────────── Nav Container ───────────── */
nav.unified-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding: 18px 0;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nav-border-bottom);
}

.unified-nav .un-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ───────────── Brand (un-crest) ─────────────
 * R3-13(2026-06-12 QC): 좌상단 로고 강조 — 크기·굵기·명도 상향 */
.unified-nav .un-crest {
  font-family: 'Pretendard Variable', 'Pretendard', 'IBM Plex Mono', 'Noto Serif KR', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nav-ink);
  cursor: pointer;
  padding: 7px 16px;
  border: 1.5px solid var(--nav-brand-border);
  border-radius: 999px;
  background: var(--nav-brand-bg-hover);
  transition: all 0.2s ease;
}
.unified-nav .un-crest:hover {
  color: var(--nav-accent);
  background: var(--nav-brand-bg-hover);
}

/* ───────────── Links ───────────── */
.unified-nav .un-links {
  display: flex;
  gap: 28px;
}
/* R3-13(2026-06-12 QC): 우상단 메뉴 강조 — 크기·굵기 상향 */
.unified-nav .un-link {
  font-family: 'Pretendard Variable', 'Pretendard', 'IBM Plex Mono', 'Noto Serif KR', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--nav-ink);
  text-decoration: none;
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}
.unified-nav .un-link:hover {
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
}
.unified-nav .un-link.current {
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
}

/* ───────────── 햄버거 (모바일) ───────────── */
.unified-nav .un-hamburger,
.unified-nav .un-hamburger2 {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
  width: 36px;
  height: 32px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.unified-nav .un-hamburger span,
.unified-nav .un-hamburger2 span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nav-ink);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.2s;
}
.unified-nav .un-mobile-menu,
.unified-nav .un-mobile-menu2 {
  display: none;
}

/* ───────────── 모바일 분기 ───────────── */
@media (max-width: 768px) {
  nav.unified-nav { padding: 12px 0; }
  .unified-nav .un-inner { padding: 0 16px; flex-wrap: nowrap; gap: 8px; }
  .unified-nav .un-crest { font-size: 11px; padding: 5px 11px; letter-spacing: 0.18em; }
  .unified-nav .un-links { display: none !important; }
  .unified-nav .un-hamburger,
  .unified-nav .un-hamburger2 { display: flex !important; }
  .unified-nav .un-hamburger.open span:nth-child(1),
  .unified-nav .un-hamburger2.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .unified-nav .un-hamburger.open span:nth-child(2),
  .unified-nav .un-hamburger2.open span:nth-child(2) { opacity: 0; }
  .unified-nav .un-hamburger.open span:nth-child(3),
  .unified-nav .un-hamburger2.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .unified-nav .un-mobile-menu,
  .unified-nav .un-mobile-menu2 {
    display: block;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(243, 238, 229, 0.98);
    border-bottom: 1px solid var(--nav-border-bottom);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 79;
  }
  .unified-nav .un-mobile-menu.open,
  .unified-nav .un-mobile-menu2.open { max-height: 500px; }
  .un-mobile-link,
  .un-mobile-link2 {
    display: block;
    font-family: 'Pretendard Variable', 'Pretendard', 'Noto Serif KR', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--nav-ink);
    padding: 18px 24px;
    border-top: 1px solid var(--nav-border-bottom);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
  }
  .un-mobile-link:first-child,
  .un-mobile-link2:first-child { border-top: 0; }
  .un-mobile-link.current,
  .un-mobile-link2.current { color: var(--nav-accent); }
  .un-mobile-link:active,
  .un-mobile-link2:active { background: rgba(122, 58, 31, 0.05); }
}
@media (max-width: 600px) {
  nav.unified-nav { padding: 10px 0; }
}

/* ───────────── 옛 헤더 잔존 가리기 (M1 bundler 잔존 마크업 — 강화) ───────────── */
/* M1의 bundler-injected string 안에 옛 .page-header / .nav-menu가 살아있어
 * 새 unified-nav와 함께 중복 표시되는 문제를 가린다.
 * M2·M3에는 .page-header가 없어 영향 없음. */
.page-header,
header.page-header,
body > header:first-of-type,
.header-row,
.nav-menu,
.nav-link,
.crest:not(.un-crest),
.page-title,
#page-title,
#page-subtitle {
  display: none !important;
}

/* ───────────── 메모 ───────────── */
/* body padding-top(nav 보상값)은 페이지마다 콘텐츠 사정이 달라 이 파일에서 통일하지 않습니다.
 * 권장값: PC 60px / 모바일(<=768) 56px */