/* =============================================================================
 * woosungjung.com — layout.css
 * nav · 페이지 헤더 · section/eyebrow · footer. 모든 페이지 공통 골격.
 * ========================================================================== */

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(14, 14, 16, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav .brand {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .2em;
}
.nav ul {
  display: flex;
  gap: 30px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sub);
}
.nav a:hover,
.nav a[aria-current] { color: var(--hanji); }

/* 모바일 토글 — 시안에는 없으나 780px 이하에서 메뉴가 통째로 사라지므로 추가 */
.nav-toggle {
  display: none;
  width: 34px;
  height: 30px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav-toggle i {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1px;
  background: var(--hanji);
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle i:nth-child(1) { top: 10px; }
.nav-toggle i:nth-child(2) { top: 15px; }
.nav-toggle i:nth-child(3) { top: 20px; }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 780px) {
  .nav .in { padding: 16px var(--gutter); }
  /* 자식이 셋(브랜드·토글·nav)이라 space-between 이면 토글이 가운데로 밀린다.
     메뉴가 닫힌 nav 는 폭 0 이므로, 토글을 auto 여백으로 오른쪽 끝에 붙인다 */
  .nav-toggle { display: block; margin-left: auto; }
  /* 기본은 닫힌 상태 — JS 로드 전 열린 메뉴가 번쩍이지 않게 CSS 로 먼저 감춘다 */
  .nav ul { display: none; }
  .nav ul.is-open {
    display: flex;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: rgba(14, 14, 16, .98);
    border-bottom: 1px solid var(--line);
    padding: 6px 0 14px;
  }
  .nav ul li { padding: 0 var(--gutter); }
  .nav ul a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav ul li:last-child a { border-bottom: none; }
}

/* ---------- 페이지 헤더 ---------- */
.head { padding: 70px 0 34px; }
.head h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 64px;
  line-height: 1;
}
.head p {
  color: var(--sub);
  font-size: 14px;
  margin-top: 14px;
  max-width: 600px;
}
/* 제목 아래 큰 도입문 — em 은 기울이지 않고 색으로만 강조한다.
   820px 는 시안 5종이 모두 쓰는 값이다. 줄 길이를 재는 자라 페이지마다 달라질 이유가 없다
   (`.wrap` 1120px 을 다 쓰지 않고 오른쪽을 비워 두는 것도 그래서다 — 한 줄이 너무 길면 읽기 나쁘다) */
.head .lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 29px;
  line-height: 1.45;
  color: var(--hanji);
  max-width: 820px;
  margin-top: 30px;
}
.head .lead em { font-style: normal; color: var(--dan-lt); }

/* ---------- 섹션 ---------- */
section {
  padding: 54px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
section:first-of-type { border-top: none; }
/* .head 를 둔 페이지는 헤더와 첫 섹션 사이 구분선을 살린다 (메인은 .head 가 없다) */
.head + section { border-top: 1px solid var(--line); }

.eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 26px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.eyebrow a {
  color: var(--sub);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  white-space: nowrap;
}
.eyebrow a:hover { color: var(--hanji); border-bottom-color: var(--sub); }

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding: 32px 0 44px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ghost);
}
.foot .in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.foot a:hover { color: var(--sub); }

@media (max-width: 780px) {
  .head { padding: 44px 0 28px; }
  .head h1 { font-size: 44px; }
  .head .lead { font-size: 22px; margin-top: 22px; }
  section { padding: 44px 0; }
}