/* ==========================================================================
   WordPress 전용 오버라이드 (theme-only)
   프로토타입엔 없는, WordPress 환경에서만 필요한 보정.
   ⚠️ 이 파일은 프로토타입 → 테마 동기화(tokens/base/main.css 덮어쓰기) 대상이 아님.
      WP 전용 보정은 반드시 여기에 둘 것 (main.css에 넣으면 다음 동기화 때 사라짐).
   ========================================================================== */

/* 관리자 로그인 시 상단 admin bar(32px / 모바일 46px)가 고정 헤더를 가리는 문제 보정.
   .site-header 는 position:fixed; top:0 이라 admin bar 아래로 내려줘야 함. */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* ---------- 404 / 빈 페이지 (白紙 컨셉 + 셰프 한마디 이스터에그) ---------- */
/* 화면을 넉넉히 채워 답답하지 않게 — 최소 높이 + 세로 중앙 정렬 */
.error-404 {
  min-height: calc(100vh - 160px);  /* 헤더·푸터 여유 제외하고 화면 거의 가득 */
  display: flex;
  align-items: center;
}
/* 모든 404 요소 가로 중앙 통일 — 일부 요소가 콘텐츠 폭으로 좁아져 왼쪽에 붙는 것 방지 */
.error-404 .container--content {
  text-align: center;
}
.error-404 .container--content > * {
  margin-inline: auto;
}
/* 큰 白紙 — 장식(스크린리더는 H1만 읽음) */
.error-404__hanzi {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 9rem);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  margin: 0 0 var(--space-3);
}
/* 白紙 옆 읽는 법 [はくし] — 작고 절제된 톤 */
.error-404__yomi {
  font-size: clamp(0.85rem, 1.6vw, 1.25rem);
  letter-spacing: 0.04em;
  color: var(--color-fg-soft);
  vertical-align: middle;
  margin-left: 0.5em;
  white-space: nowrap;
}
.error-404__text {
  margin-top: var(--space-3);
  color: var(--color-fg-soft);
}
/* 미슐랭 별 — 클릭하면 셰프 한마디(이스터에그) */
.error-404__egg {
  margin-top: var(--space-5);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.error-404__egg:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 8px;
  border-radius: 50%;
}
/* 셰프 한마디 — 클릭 전 자리만 확보(레이아웃 안 튐), 클릭 시 페이드인 */
.error-404__note {
  margin-top: var(--space-3);
  min-height: 1.5em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-display-sm);
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.error-404__note.is-shown {
  opacity: 1;
  transform: translateY(0);
}
/* 별 클릭 유도 힌트 — 아주 작게 */
.error-404__hint {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-fg-soft);
  opacity: 0.55;
}

/* 공용 pill 버튼 (404 "홈으로" 등) */
.btn-pill {
  display: inline-block;
  margin-top: var(--space-4);
  padding: 12px 32px;
  border: 1px solid var(--color-fg);
  border-radius: 999px;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.btn-pill:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

/* 404 하단 크레딧 — site by Greg Company */
.error-404__credit {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-fg-soft);
  opacity: 0.6;
}
.error-404__credit a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.error-404__credit a:hover {
  opacity: 0.7;
}

/* ---------- 아카이브 / 검색 글 목록 (글 제목 = H2) ---------- */
.archive-list {
  margin-top: var(--space-4);
}
.archive-card {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.archive-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
  margin: 0;
}
.archive-card__excerpt {
  margin-top: var(--space-2);
  color: var(--color-fg-soft);
}

/* ---------- 헤더 내비 "+N" 배지 (최근 7일 새 글 알림) — 그라데이션 알약, Journal 우상단 ---------- */
.nav-badge {
  position: absolute;
  top: -7px;
  right: -16px;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.56em;            /* 부모 링크 폰트 기준 — 더 작게 */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  color: #fff;
  background: linear-gradient(135deg, #ff5a5f 0%, #e0121d 55%, #a8060f 100%);
  pointer-events: none;
  z-index: 2;
}

/* 모바일 메뉴 안의 Journal 옆 배지 — 큰 폰트 옆이라 충분히 우측으로 띄움 */
.mobile-menu__nav .nav-badge {
  top: 2px;
  right: auto;
  left: calc(100% + 10px);
  font-size: 0.42em;
  padding: 2px 8px;
}

/* ---------- #about 이미지 ↔ 텍스트(CHEF & PHILOSOPHY) 간격 확대 (간섭 방지) ---------- */
/* base는 clamp(32px,6vw,80px) / 모바일 var(--space-4) → 더 넉넉히. 단일 clamp로 모바일(≈56px)·데스크톱(≈132px) 동시 보정 */
.intro__grid {
  gap: clamp(56px, 9vw, 132px);
}

/* ---------- #about 셰프 사진 — 셰프(얼굴) 중심 원형 크롭 ---------- */
/* 원본은 넓은 주방 풍경이라 셰프를 확대해 머리~어깨가 원 안에 들어오도록 포커스 */
.intro__photo {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: clamp(220px, 26vw, 340px);
  margin-inline: auto;
}
.intro__photo img {
  object-position: 59% 50%;          /* 셰프를 가로 중앙으로 */
  transform: scale(3.2);
  transform-origin: 50% 56%;         /* 세로는 cover라 origin으로 얼굴을 원 중앙에 */
}
@media (max-width: 768px) {
  .intro__photo {
    aspect-ratio: 1 / 1;            /* base의 4/3 무시하고 모바일도 원형 유지 */
    width: clamp(200px, 58vw, 280px);
  }
}

/* ---------- 모바일: 헤더 예약 버튼 숨김 (한·영 예약은 펼친 메뉴에만) ---------- */
@media (max-width: 768px) {
  .site-header__cta-group { display: none; }
}

/* ---------- 라이트박스 — 좌우 내비 제거 후 단일 중앙정렬 + 딤드 전체 클릭 닫기 커서 ---------- */
/* (프로토타입 동기화로 main.css가 옛 3컬럼 그리드로 되돌아와도 여기서 항상 보정) */
.gallery-lightbox {
  grid-template-columns: none;
  place-items: center;
  gap: 0;
  cursor: zoom-out;
}