@charset "UTF-8";

/* ============================================================
   온지 — 헤더 계정 메뉴 · 헤더 북마크 아이콘 (3차 신설, Q3-08·Q3-10)
   ============================================================
   header.php 는 전 페이지에서 로드된다. account.css(계정 7라우트 한정)에
   넣으면 랜딩·아트맵·결제·법률에는 안 실리고, onji.css 에 넣으면 지금
   다른 세션이 작업 중인 파일과 부딪힌다(D3-14) — 그래서 이 파일 하나로
   완성한다. 토큰만 쓰고 onji.css 는 한 줄도 참조·재정의하지 않는다. */

/* ── 헤더 아이콘 크기 보강 (D3-18) ────────────────────────
   onji.css:139~144 의 .header__util button 규칙은 button 요소 선택자
   뿐이다. 북마크 아이콘이 아트맵 밖에서 <a> 가 되면(D3-15) 44px 터치
   타깃·아이콘 24px·색·hover 가 한꺼번에 빠진다 — <svg> 에 width/height
   속성이 없어 onji.css:73 img,svg{max-width:100%} 만 남으면 찌그러진다.
   .header__util 의 "직계 자식" 아이콘에만 한정한다 — 넓게 잡으면(예:
   .header__util :is(button,a)) 드롭다운 메뉴 안의 <a>(.hdr-acct__item,
   3단 아래 후손)까지 44×44 아이콘 박스가 되어 버린다.

   `.header__burger` 는 :not() 으로 뺀다 — 다른 세션 QA에서 발견(2026-09-17):
   이 선택자의 명시도(0,1,1)가 onji.css:146 `.header__burger{display:none}`
   (0,1,0, !important 없음)보다 높아서, 데스크톱(≤1024px 미디어쿼리 밖)에서
   가로 메뉴와 햄버거가 같이 보이는 중복이 생겼다. 1024px 이하의
   `!important` 규칙(onji.css:984)은 명시도와 무관하게 항상 이겨서 원래
   안전했지만, 데스크톱 기본값(`display:none`, !important 없음)은
   이 파일의 규칙에 졌다 — 햄버거는 onji.css 가 이미 완전히 맡고 있으니
   여기서는 아예 손대지 않는다. */
.header__util > :is(button, a):not(.header__burger) {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--text-sub);
  transition: color var(--transition);
}

.header__util > :is(button, a):not(.header__burger) svg { width: 24px; height: 24px; }
.header__util > :is(button, a):not(.header__burger):hover { color: var(--text); }
.header__util > :is(button, a):not(.header__burger):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── 알림 벨 (fluxhub-common, 헤더 인라인 배치) ────────────
   [fluxhub_bell] 은 원래 우측 하단 플로팅 독용이라 48px 원형 배경+
   그림자를 기본으로 가진다(bell.css). 헤더 안에서는 다른 아이콘과
   같은 44px 플랫 아이콘으로 보이게 이 안에서만 덮어쓴다 — 플러그인
   CSS(.fhc-bell__btn) 자체는 고치지 않으니 float 배치를 쓰는 다른
   화면에는 영향이 없다. */
.header__util .fhc-bell__btn {
  width: 44px;
  height: 44px;
  background: none;
  box-shadow: none;
  color: var(--text-sub);
}
.header__util .fhc-bell__btn:hover { transform: none; background: none; color: var(--text); }
.header__util .fhc-bell__svg { width: 24px; height: 24px; }

/* 패널도 독 전용 가정(bell.css: bottom:calc(100% + 12px), 아래에서 위로
   펼쳐짐)을 그대로 물려받는다 — 헤더(화면 맨 위)에 이 규칙을 그대로
   두면 패널이 뷰포트 위 -99px 로 밀려나 화면 밖에서 열린다(실측
   2026-09-17). 헤더에서는 다른 드롭다운(.hdr-acct__menu)처럼 버튼
   아래로 열리게 뒤집는다. */
.header__util .fhc-bell__panel {
  top: calc(100% + var(--sp-2, 8px));
  bottom: auto;
}

/* ── 계정 드롭다운 ─────────────────────────────────────── */

.hdr-acct { position: relative; }

/* Q3-09: 호버 + 클릭/포커스 둘 다로 연다. 호버는 CSS 만으로 되므로
   JS 가 늦게 로드되거나 실패해도 마우스 사용자는 열 수 있다. 클릭·
   키보드는 onji-header-account.js 가 data-open 을 토글한다. */
.hdr-acct__menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  display: none;
  flex-direction: column;
  min-width: 176px;
  max-width: calc(100vw - 32px);
  padding: var(--sp-2) 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  z-index: 60;
}

.hdr-acct:hover .hdr-acct__menu,
.hdr-acct[data-open="true"] .hdr-acct__menu {
  display: flex;
}

.hdr-acct__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.hdr-acct__item:hover { background: var(--bg-soft); }
.hdr-acct__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* 로그아웃은 되돌릴 수 없는 성격이 아니지만, 계정 이동 링크와는 다른
   동작(버튼)이라 구분선으로만 표시한다 — 색만으로 구분하지 않는다. */
.hdr-acct__item--action {
  margin-top: var(--sp-1);
  padding-top: calc(var(--sp-1) + 1px);
  border-top: 1px solid var(--line);
}

/* ── 모바일 헤더 아이콘 (2026-10-07) ──────────────────────
   390px 에서 44px 상자 사이에 16px 간격이 더해져 아이콘이 60px 씩
   떨어져 보였다. 간격을 없애고 그림만 20px 로 줄인다 — 터치 영역은
   44px 그대로라 누르기 쉬운 정도는 같다. 선택자는 위 규칙들(0,2,2)과
   onji.css:160·bell 덮어쓰기보다 명시도가 높도록 .header 를 앞에 붙였다. */
@media (max-width: 768px) {
  .header__util { gap: 0; }

  .header .header__util > :is(button, a) svg,
  .header .header__util .hdr-acct__btn svg,
  .header .header__util .fhc-bell__svg {
    width: 20px;
    height: 20px;
  }
}

/* ── 모바일 메뉴 팝업 (햄버거, 2026-10-07 리뉴얼) ─────────
   예전 드로어(.header__nav 를 흰 띠로 펼침)를 걷어내고 header.php 의
   .mnav 바텀시트로 바꿨다. 톤은 취향 테스트 팝업(taste-flow.css .tf)을
   따른다 — 네이비 딤, 위만 둥근 시트, 골드 eyebrow, 네이비 pill 버튼.
   768px 이하는 아래에서 올라오는 시트, 769~1024px 은 오른쪽 패널.
   여닫기는 onji-header-account.js. 데스크톱(>1024px)에서는 열리지 않는다. */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 1100;
}
.mnav[hidden] { display: none; }
html.mnav-open { overflow: hidden; }

.mnav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 40, 63, .56);
  opacity: 0;
  transition: opacity 280ms ease;
}
.mnav.is-open .mnav__scrim { opacity: 1; }

/* 전체 화면 — 헤더까지 덮는다. 안쪽 내용은 태블릿에서 퍼지지 않게 560px 로 모은다. */
.mnav__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding:
    calc(var(--sp-2) + env(safe-area-inset-top))
    max(var(--sp-6), calc((100% - 560px) / 2))
    calc(var(--sp-8) + env(safe-area-inset-bottom));
  background: var(--bg);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 240ms ease,
    transform 320ms var(--ease-drawer, cubic-bezier(.32, .72, 0, 1));
}
.mnav.is-open .mnav__panel { opacity: 1; transform: none; }

.mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-right: calc(var(--sp-2) * -1);
}
.mnav__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold);
}
.mnav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  color: var(--text-sub);
  transition: background var(--transition), color var(--transition);
}
.mnav__close:hover { background: var(--bg-dim); color: var(--text); }
.mnav__close svg { width: 22px; height: 22px; }
.mnav__close:focus-visible { outline-width: 1px; outline-offset: 0; }

/* 취향 테스트 — 목록에서 빼서 한 장의 네이비 카드로 올린다.
   달 모양은 플로팅 버튼(.tf-fab__moon)과 같은 반달. */
.mnav__feature {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 64px;
  margin-top: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--text-cream);
  transition: background var(--transition);
}
.mnav__feature:hover { background: var(--brand-deep); }
.mnav__feature:focus-visible { outline-offset: 3px; }
.mnav__moon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--text-cream);
  background: conic-gradient(var(--text-cream) 50%, transparent 50%);
}
.mnav__feature-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mnav__feature-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #D9C3A0;
}
.mnav__feature-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  word-break: keep-all;
}
.mnav__feature .mnav__chev { color: var(--text-cream); opacity: .8; }

.mnav__nav { margin-top: var(--sp-2); }
.mnav__list li { border-bottom: 1px solid var(--bg-dim); }
.mnav__list li:last-child { border-bottom: 0; }

.mnav__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-4) var(--sp-1);
  color: var(--text);
  transition: color var(--transition);
}
.mnav__ko {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.mnav__en {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.mnav__chev {
  flex: 0 0 auto;
  align-self: center;
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: var(--text-dim);
  transition: transform var(--transition), color var(--transition);
}
.mnav__link:hover .mnav__ko,
.mnav__link[aria-current="page"] .mnav__ko { color: var(--brand); }
.mnav__feature:hover .mnav__chev { transform: translateX(2px); }
.mnav__link:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }

/* 지금 보고 있는 메뉴 — 색만으로 알리지 않도록 이름 뒤에 점을 하나 찍는다. */
.mnav__link[aria-current="page"] .mnav__ko { margin-right: 6px; }
.mnav__link[aria-current="page"] .mnav__ko::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* 항목이 시트를 따라 살짝 늦게 들어온다(열 때만, 닫을 때는 한 번에). */
.mnav__feature,
.mnav__list li,
.mnav__account {
  opacity: 0;
  transform: translateY(8px);
}
.mnav.is-open .mnav__feature,
.mnav.is-open .mnav__list li,
.mnav.is-open .mnav__account {
  opacity: 1;
  transform: none;
  transition: opacity 280ms ease, transform 320ms var(--ease-drawer, cubic-bezier(.32, .72, 0, 1)), background var(--transition);
}
.mnav.is-open .mnav__account { transition-delay: 60ms; }
.mnav.is-open .mnav__feature { transition-delay: 100ms, 100ms, 0ms; }
.mnav.is-open .mnav__list li:nth-child(1) { transition-delay: 130ms; }
.mnav.is-open .mnav__list li:nth-child(2) { transition-delay: 150ms; }
.mnav.is-open .mnav__list li:nth-child(3) { transition-delay: 170ms; }
.mnav.is-open .mnav__list li:nth-child(4) { transition-delay: 190ms; }
.mnav.is-open .mnav__list li:nth-child(n+5) { transition-delay: 210ms; }

.mnav__account { margin-top: var(--sp-2); }
.mnav__hello {
  margin-bottom: var(--sp-4);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  word-break: keep-all;
}
.mnav__profile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.mnav__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-cream);
  font-size: 16px;
  font-weight: 700;
}
.mnav__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mnav__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mnav__sub { font-size: 12px; color: var(--text-sub); }
/* 현황 3칸 — 프로필과 버튼 사이. 한 장의 연한 면을 세로선으로 나눈다. */
.mnav__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}
.mnav__stats li + li { border-left: 1px solid var(--brand-line); }
.mnav__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: var(--sp-3) var(--sp-1);
  border-radius: var(--r-md);
  text-align: center;
  transition: background var(--transition);
}
.mnav__stat:hover { background: var(--brand-tint); }
.mnav__stat:focus-visible { outline-offset: -2px; }
.mnav__stat-value {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mnav__stat-value small { margin-left: 1px; font-size: 12px; font-weight: 500; color: var(--text-sub); }
.mnav__stat-value--warn { color: var(--cat-food); }
.mnav__stat-label { font-size: 11px; font-weight: 500; color: var(--text-sub); }

.mnav__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
/* 높이 40px — 대표 요청으로 44px 보다 낮췄다. 폭이 반 줄씩이라 누르기는 충분하다. */
.mnav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.mnav__btn--solid { background: var(--brand); color: var(--text-inv); }
.mnav__btn--solid:hover { background: var(--brand-deep); }
.mnav__btn--ghost { border: 1px solid var(--brand-line); color: var(--text); }
.mnav__btn--ghost:hover { border-color: var(--brand); background: var(--bg-soft); }
.mnav__logout {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  transition: color var(--transition);
}
.mnav__logout:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 1025px) {
  .mnav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mnav__panel,
  .mnav__scrim,
  .mnav.is-open .mnav__feature,
  .mnav.is-open .mnav__list li,
  .mnav.is-open .mnav__account { transition: none; }
}