/* 하단 탭 바 — 홈 · 벨라비 AI · 분석 기록.
   탭 루트 화면(홈·분석 기록)에만 둔다. 채팅·결과·업로드는 한 가지 일에 집중하는 화면이라 숨긴다.
   홈에서는 '내 얼굴 분석하기' 버튼이 탭 바 바로 위에 붙어 한 덩어리(dock)로 움직인다. */

:root { --app-nav-height: 58px; }

.app-dock { position: fixed; z-index: 8; inset: auto 0 0; background: rgb(255 255 255 / 98%); box-shadow: 0 -4px 20px rgb(37 38 43 / 6%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* 버튼과 탭 바가 같이 있을 때 — 버튼 아래 여백은 탭 바가 가져간다. */
.app-dock > .home-action-inner + .app-nav { border-top: 1px solid var(--line); }

/* 페이지를 넘길 때 탭 바만 제자리에 둔다. dock 전체를 묶으면 화면마다 높이(분석 버튼·입력창 유무)가 달라
   전환 중에 탭 바까지 눌리거나 밀려 내려가 보인다. 위쪽 버튼·입력창은 본문과 함께 바뀐다. */
.app-nav { view-transition-name: app-nav; background: #fff; }   /* 불투명해야 전환 중 캡처한 글자와 실제 글자가 같은 굵기로 그려진다 */
.app-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; margin-inline: auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
.app-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: var(--app-nav-height); color: #6e6a74; font-size: 11px; font-weight: 500; line-height: 14px; letter-spacing: -.02em; white-space: nowrap; transition: color .2s; }
.app-nav-item:focus-visible { outline-offset: -4px; border-radius: 10px; }
.app-nav-icon { position: relative; display: grid; place-items: center; width: 26px; height: 26px; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.app-nav-icon > svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-nav-eye { fill: currentColor; stroke: none; }
.app-nav-mouth { stroke-width: 1.1; }
.app-nav-solid { display: none; }
/* 누르는 순간 살짝 눌린다 — 전체 새로고침이라도 손끝에 반응이 먼저 온다. */
.app-nav-item:active .app-nav-icon { transform: scale(.88); }

/* 지금 화면 — 아이콘이 꽉 찬 모양으로 바뀐다(선 → 채움) + 포인트색 + 굵게. 색만으로 가르지 않는다.
   분석하기는 얼굴을 채우고 눈·입을 흰색으로 뚫고, 마이는 몸을 닫힌 채움으로 바꾼다. 들어올 때 한 번 살짝 튄다. */
.app-nav-item[aria-current='page'] { color: var(--accent); font-weight: 700; }
.app-nav-item:not([aria-current='page']) .app-nav-icon > svg { color: #8e8a94; }
.app-nav-item[aria-current='page'] .app-nav-icon > svg { stroke-width: 1.8; }
.app-nav-item[aria-current='page'] .app-nav-fill { fill: currentColor; }
.app-nav-item[aria-current='page'] .app-nav-eye { fill: #fff; }
.app-nav-item[aria-current='page'] .app-nav-mouth { stroke: #fff; stroke-width: 1.1; }
.app-nav-item[aria-current='page'] .app-nav-line { display: none; }
.app-nav-item[aria-current='page'] .app-nav-solid { display: inline; fill: currentColor; }
.app-nav-item[aria-current='page']:not(.app-nav-ai) .app-nav-icon { animation: app-nav-pop .28s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes app-nav-pop { 0% { transform: scale(.9); } 100% { transform: scale(1); } }

/* 벨라비 AI — 탭 바 위로 5px 튀어나온 둥근 사각형 버튼(66×58). 아이콘과 이름이 버튼 안에 같이 있다.
   버튼 아래는 탭 바 끝까지 5px 뿐이라 그림자(y + blur + spread)도 5px 안에서 끝낸다 — 넘치면 앱의 웹뷰 끝
   (아래 안전 영역은 앱이 흰색으로 칠한다)에서 잘려 가로선이 생긴다.
   배경·크기·그림자는 어느 화면에서나 같다. 지금 탭(대화 화면)이면 양옆 탭과 같은 규칙으로 말풍선만 흰색으로 채운다. */
.app-nav { overflow: visible; }
/* 가운데 버튼이 크고 진해서 양옆 탭이 가장자리로 밀려 보인다 — 폭의 5%만큼 안쪽으로 모은다(폭이 달라도 비율이 같게). */
.app-nav { padding-inline: 5%; }
.app-nav-ai { align-self: start; justify-self: center; width: 66px; height: 58px; margin-top: -5px; gap: 4px; border-radius: 16px; background: var(--accent); color: #fff; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 3px 6px -4px rgb(120 62 82 / 45%); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s; }
.app-nav-ai[aria-current='page'] { color: #fff; font-weight: 700; }   /* 지금 탭이어도 글자는 흰색 — 배경이 포인트색이다 */
.app-nav-ai[aria-current='page'] .nav-ai-bubble { fill-opacity: 1; }
.app-nav-ai[aria-current='page'] .nav-ai-dots { stroke: var(--accent); }
.app-nav-ai:active { transform: scale(.95); box-shadow: 0 2px 4px -3px rgb(120 62 82 / 38%); }
.app-nav-ai:active .app-nav-icon { transform: none; }
.app-nav-ai:focus-visible { outline-offset: 2px; border-radius: 16px; }
.nav-ai-icon { display: block; width: 24px; height: 24px; }
.nav-ai-icon svg { display: block; width: 24px; height: 24px; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.nav-ai-bubble { fill: #fff; fill-opacity: 0; stroke-width: 1.6; }
.nav-ai-dots { stroke-width: 2.6; }
/* 안 읽은 라비 메시지 — 버튼 오른쪽 위 점(흰 테두리로 포인트색 버튼 위에서도 떨어져 보인다). */
.app-nav-ai.has-unread::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #e0315f; animation: unread-pop .2s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes unread-pop { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .app-nav-ai.has-unread::after { animation: none; } }
/* 홈 — 분석 버튼과 튀어나온 버튼이 닿지 않게 간격을 둔다. */
.app-dock > .home-action-inner { padding-bottom: 14px; }

/* 처음 한 번만 뜨는 안내 — 벨라비 AI 탭을 가리키는 말풍선. 5초·스크롤·아무 곳이나 누르면 사라진다. */
.nav-tip { position: fixed; z-index: 9; left: 50%; bottom: calc(var(--app-nav-height) + 12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 32px); padding: 4px 4px 4px 14px; border-radius: 12px; background: #2b2730; color: #fff; font-size: 13.5px; font-weight: 500; line-height: 19px; letter-spacing: -.02em; white-space: nowrap; box-shadow: 0 8px 24px rgb(0 0 0 / 18%); transform: translateX(-50%); transform-origin: 50% calc(100% + 6px); animation: nav-tip-in .42s cubic-bezier(.2, .9, .3, 1.2) both, nav-tip-float 2.4s ease-in-out .6s infinite; }
.nav-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 2px; background: #2b2730; transform: rotate(45deg); }
.nav-tip-text { padding: 5px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
.nav-tip-text b { color: #f6c9d7; font-weight: 700; }
.nav-tip-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: rgb(255 255 255 / 60%); }
.nav-tip-close svg { width: 14px; height: 14px; }
.nav-tip[data-state='closing'] { animation: nav-tip-out .2s ease both; }
@keyframes nav-tip-in { from { opacity: 0; transform: translate(-50%, 8px) scale(.9); } }
@keyframes nav-tip-float { 50% { transform: translate(-50%, -3px); } }
@keyframes nav-tip-out { to { opacity: 0; transform: translate(-50%, 4px) scale(.96); } }
/* 안내가 떠 있는 동안 탭 아이콘이 한 번 살짝 뛴다. */
.app-nav-ai.is-tipped .app-nav-icon { animation: nav-ai-hop .6s cubic-bezier(.3, 1.4, .5, 1) .25s both; }
@keyframes nav-ai-hop { 40% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .nav-tip, .app-nav-ai.is-tipped .app-nav-icon, .app-nav-item[aria-current='page'] .app-nav-icon { animation: none; } }

@media (hover: hover) {
  .app-nav-item:not([aria-current='page']):hover { color: var(--text); }
  .app-nav-ai:hover, .app-nav-ai:not([aria-current='page']):hover { color: #fff; transform: translateY(-1px); box-shadow: 0 3px 7px -4px rgb(120 62 82 / 48%); }
}

/* 탭 바가 있는 화면은 본문 끝이 dock 에 가리지 않게 비운다. */
.has-app-nav .result-main { padding-bottom: calc(var(--app-nav-height) + 40px + env(safe-area-inset-bottom, 0px)); }
.home-page.has-app-nav .result-main { padding-bottom: calc(var(--app-nav-height) + 96px + env(safe-area-inset-bottom, 0px)); }

/* 홈 헤더 오른쪽 — 로그인 / 로그아웃. 눈에 띄지 않는 회색 글자 버튼. */
.header-auth { min-height: 44px; margin: 0 -10px 0 auto; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 13.5px; font-weight: 500; letter-spacing: -.02em; animation: app-fade-in .25s ease both; -webkit-tap-highlight-color: transparent; }
.header-auth:disabled { opacity: .5; }
@media (hover: hover) { .header-auth:hover { color: var(--text); } }

/* ── 하단 떠 있는 분석 버튼(로그인 전) — 화면 폭 바 대신 좌우 여백을 둔 둥근 버튼. 뒤에 짧은 흰 페이드를 깔아
   본문 글자와 겹쳐 읽히지 않게 한다. 소개 페이지에서는 히어로·마무리 버튼이 안 보일 때만(data-floating, landing.mjs). 예시·공유 결과에서는 늘 보인다. ─── */
.app-dock:has(> .app-cta) { background: linear-gradient(rgb(255 255 255 / 0), rgb(255 255 255 / 92%) 32px); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s cubic-bezier(.2, .8, .2, 1); }
.app-dock > .app-cta { max-width: 480px; padding: 32px 16px calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: auto; }
.app-dock > .app-cta .analyze-link { transition: background-color .2s, color .2s; min-height: 56px; border-radius: 16px; font-size: 17px; font-weight: 700; letter-spacing: -.03em; box-shadow: 0 8px 24px rgb(120 62 82 / 28%); }
.app-dock[data-floating='hidden'] { opacity: 0; transform: translateY(calc(100% + 24px)); }
.app-dock[data-floating='hidden'] > .app-cta { pointer-events: none; }
/* 와인 배경 위를 지날 때(소개 페이지의 질문 예시) — 흰 페이드가 탁한 분홍 띠가 되지 않게 끄고, 버튼은 흰 바탕·와인 글자로 뒤집는다. */
.app-dock[data-over='wine'] { background: none; }
.app-dock[data-over='wine'] > .app-cta .analyze-link { background: #fff; color: var(--accent); box-shadow: 0 8px 24px rgb(0 0 0 / 28%); }

@media (prefers-reduced-motion: reduce) { .app-dock:has(> .app-cta) { transition: none; } }