/* =========================================================
   nav.css — 상단 메뉴바 (피그마: 매뉴바 / 처음으로)
   ========================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  height: var(--nav-h);
  background: var(--c-white);
  border: 0.5px solid var(--c-ink);
}

.nav__list {
  display: flex;
  height: 100%;
}

.nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 calc(24 * var(--px));
  border-right: 0.5px solid var(--c-ink);
  font-size: calc(18 * var(--px));
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--c-ink);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav__item--wide {
  padding: 0 calc(32 * var(--px));
}

.nav__item:hover {
  background: #f2f2f2;
}

.nav__item.is-active {
  background: var(--c-ink);
  color: var(--c-paper);
}

/* 하위 메뉴(재료 · 메뉴얼): 평소엔 접혀 있다가 Manual book 안에서만 옆으로 펼쳐짐 */
.nav__sub .nav__item {
  max-width: 0;
  padding: 0;
  border-right-width: 0;
  overflow: hidden;
  opacity: 0;
  font-size: calc(16 * var(--px));
  color: #6b6b67;
  transition: max-width 0.6s var(--ease-out), padding 0.6s var(--ease-out), opacity 0.4s var(--ease-out),
    background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

body.in-book .nav__sub .nav__item {
  max-width: calc(160 * var(--px));
  padding: 0 calc(24 * var(--px));
  border-right-width: 0.5px;
  opacity: 1;
}

body.in-book .nav__sub .nav__item.is-active {
  color: var(--c-paper);
}

/* 하위 페이지에 있을 때 Manual book 은 옅은 회색으로 '지금 이 안' 표시 */
.nav__item.is-parent {
  background: #ececec;
}

/* 오른쪽 '처음으로 돌아가기' */
.nav__home {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  margin-left: auto;
  height: 100%;
  padding: 0 calc(24 * var(--px));
  border-left: 0.5px solid var(--c-ink);
  font-family: var(--f-kr);
  font-weight: 500;
  font-size: calc(16 * var(--px));
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--c-ink);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nav__home:hover .arrow {
  transform: translateX(calc(4 * var(--px)));
}

.nav__home .arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

/* 메인 화면에서는 '처음으로' 숨김 */
body[data-page="main"] .nav__home {
  opacity: 0;
  pointer-events: none;
}