/* 홈·캐릭터 화면과 같은 상단 헤더와 하단 탭바. 자체 레이아웃을 쓰는 보조 페이지(최근 대화, 작품 신청)에 붙인다. */
:root { --chrome-shell: #141413; --chrome-line: rgba(255, 255, 255, .07); --chrome-text: #f3f3f5; --chrome-mute: #8b8b95; --chrome-red: #f0323f; }

.app-header {
  position: fixed; z-index: 120; top: 0; left: 0; right: 0;
  display: flex; align-items: center; height: 56px; padding: 0 12px;
  border-bottom: 1px solid var(--chrome-line); background: var(--chrome-shell);
}
.app-header-brand { position: absolute; left: 50%; display: flex; align-items: center; gap: 7px; transform: translateX(-50%); }
.app-header-brand img:first-child { width: 26px; height: 26px; object-fit: contain; }
.app-header-brand img:last-child { width: 62px; height: auto; object-fit: contain; }
.app-header-action {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 9px; background: transparent; color: var(--chrome-text); font-size: 20px; cursor: pointer;
}
.app-header-action.is-end { margin-left: auto; }
.app-header-action:hover { background: rgba(255, 255, 255, .08); }
.app-header-action:focus-visible { outline: 2px solid var(--chrome-red); outline-offset: 2px; }

/* 헤더가 고정이라 본문 상단을 비워 둔다. */
.app-chrome-body { padding-top: 56px; }

.app-tabbar {
  position: fixed; z-index: 120; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--chrome-line); background: rgba(8, 8, 11, .92);
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.app-tabbar a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px; color: var(--chrome-mute); font-size: 10px; font-weight: 600; letter-spacing: -.02em; text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: color .2s ease;
}
.app-tabbar a i { font-size: 22px; }
.app-tabbar a[aria-current="page"] { color: var(--chrome-red); }
.app-tabbar a[aria-current="page"] i { filter: drop-shadow(0 0 8px rgba(240, 50, 63, .55)); }
.app-tabbar a[aria-current="page"]::before {
  content: ""; position: absolute; z-index: -1; top: 46%; left: 50%; width: 42px; height: 42px;
  border-radius: 999px; background: rgba(216, 31, 42, .16); transform: translate(-50%, -50%);
}
.app-tabbar a:active { transform: scale(.94); color: var(--chrome-red); }

/* 탭바에 가리지 않도록 본문 아래 여백을 준다. */
.app-chrome-body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 900px) {
  .app-tabbar { display: none; }
  .app-chrome-body { padding-bottom: 40px; }
}