/* 상단바 — [← 마을로] 와 음악 표시를 **한 줄에** 고정 (2026-08-22 사람 지시)
 *   "항상 마을로 가기 버튼이 있어야함 · 카드사전 마을로가기 버튼 없음 ·
 *    다른씬에도 확인해서 없으면 항상 좌측상단에 추가"
 *   "상점내 뒤로 버튼, 음악플레이리스트가 좌측에 다른 버튼과 겹치지 않는 곳에 고정해야함"
 *
 * 왜 한 줄인가 — 세로로 쌓아 봤더니(뒤로 8px · 음악 60px) 그 아래 **페이지 헤더가 덮였다**
 * (2026-08-22 실측: reading.html 의 상담사 이름·부제가 통째로 가려졌다).
 * 세로로 쌓으면 112px 을 먹고, 그만큼 본문을 내리면 채팅 화면이 너무 짧아진다.
 * 한 줄이면 **60px** 이면 되고, 그 60px 만 `body` 위 여백으로 비우면 아무것도 안 덮인다.
 *
 * 왜 있던 링크를 [옮기지] 않고 [숨기고 새로 만드나] — 있던 링크들은 헤더 안 flex 항목이라
 * (`reading.css:46` 의 `order:-1` 등) `position:fixed` 로 바꾸면 헤더 1행이 무너진다.
 * 숨기고 새로 심으면 어느 화면에서도 같은 자리·같은 모양이 되고 헤더는 제 레이아웃을 지킨다.
 *
 * 마을(index.html)에는 이 바가 없다 — 거기는 화면 전체가 그림인 씬이라
 * `village-fullbleed.css` 가 [뒤로 8px · 음악 60px] 세로 쌓기를 따로 쓴다(덮을 헤더가 없다).
 */

.ui-topbar{
  position:fixed; z-index:9400;
  top:calc(8px + env(safe-area-inset-top,0px));
  left:calc(8px + env(safe-area-inset-left,0px));
  right:calc(8px + env(safe-area-inset-right,0px));
  display:flex; align-items:center; gap:8px;
  pointer-events:none;                 /* 바 자체는 클릭을 먹지 않는다 — 빈 자리는 아래가 받는다 */
}
.ui-topbar > *{ pointer-events:auto; }

.backhome{
  flex:0 0 auto;
  margin:0; text-decoration:none; white-space:nowrap;
}
/* 젤리 그림을 못 쓰는 경우(jelly.css 미로드)의 대체 모양 — 그래도 눌리게는 둔다 */
.backhome:not(.jelly){
  min-height:44px; padding:0 16px;
  display:inline-flex; align-items:center;
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  background:rgba(20,15,40,.62); color:#f3e9f8;
  font-size:.86rem; font-family:inherit;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

/* 공통 규격 — 화면마다 제각각이던 [마을로] 크기를 하나로 맞춘다
 * (2026-09-07 사람 지시: "지나치게 커서 메인 CTA처럼 보인다" · 문구·이동 경로는 그대로,
 *  치수·그림자만 줄인다). jelly.css 의 그림 테두리(두께 22px)와 filter:drop-shadow 가
 * [입체감]의 본체라 여기서 끈다 — 둥근 모서리는 남기고 얇은 알약 하나로 만든다.
 * 화면 전용 톤(today-ui.css·premium-hud.css·worry.css·history.css)은 이 뒤에 실려
 * 배경색만 자기 것으로 덮어써도 되지만, 높이·패딩·글자는 이 규격을 따른다:
 * 40~44px · 좌우 14~16px · 14~15px · 600.
 * (mbti.html·physiognomy.html 처럼 화면 전용 덮어쓰기가 없는 곳은 이 규칙이 최종값이다.) */
.backhome.jelly{
  border-style:none; border-width:0; border-image:none;
  border-radius:999px;
  min-height:44px; padding:0 15px;
  font-size:.875rem; font-weight:600; line-height:1;
  background:rgba(20,15,40,.62); color:#f3e9f8;
  box-shadow:0 2px 8px rgba(0,0,0,.24);
  filter:none;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.backhome.jelly:hover{ filter:none; background:rgba(20,15,40,.72); }
.backhome.jelly:active{ filter:none; transform:translateY(1px); }

/* 바가 차지한 높이(44) + 위아래 여백(8+8)만큼 본문을 내린다.
   이 페이지들의 헤더는 전부 흐름 안에 있고 sticky 가 아니라(reading.css:28 · cards.css:25)
   body 여백 하나면 전부 해결된다. */
body.backhome-on{ padding-top:60px; }

/* 원래 있던 뒤로가기 링크는 숨긴다 — 같은 뜻의 버튼이 둘이면 어느 쪽이 진짜인지 모른다.
   `visibility` 가 아니라 `display:none` 이다: 흐름에서 빠져야 헤더가 그만큼 좁아진다. */
body.backhome-on .backhome-원본{ display:none !important; }

/* 씬 안 팝업(생년월일·채팅목록)이 떠 있는 동안은 바가 물러난다 —
   바(z9400)가 씬(z9000)보다 위라 씬 안 z-index 로는 못 이긴다. 실기기에서 팝업 제목을 덮었다. */
body.iy-modal .ui-topbar{ display:none; }

/* [‹ 마을] 집 그림 버튼(10/4 · back-home.js 집그림()) — 그림 높이 30 · 터치 44 이상. 알약 바탕·테는 각 화면 규칙 그대로 */
.ui-topbar .backhome.bh-pic{ display:inline-flex !important; align-items:center; gap:2px; min-height:44px !important; padding:0 14px 0 6px !important; }
.ui-topbar .backhome .bh-pic-img{ height:30px; width:auto; display:block; pointer-events:none; }
.ui-topbar .backhome .bh-pic-txt{ line-height:1; white-space:nowrap; }

/* WO-49 — 뒤로가기 통일: [← 이정표] 그림 한 장(btn_back_sign 559x200 · 글자 없음 · 높이 44 · 폭 자동 ≈123). 크림 바탕·금테는 그림에 있으니 알약 CSS 는 걷는다(s2 화면의 .backhome 알약 규칙보다 세게) */
body .ui-topbar .backhome.bh-pic.bh-sign{ background:none !important; background-image:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; gap:0; height:44px; min-height:44px !important; width:auto; min-width:44px; display:inline-flex !important; align-items:center; filter:none; }
body .ui-topbar .backhome.bh-pic.bh-sign .bh-pic-img{ height:44px; width:auto; display:block; pointer-events:none; }

/* A-22 ③ — 도깨비판(Android) 4탭 화면(오늘의 운세·전체 메뉴·마을 안내 목록)은 하단 4탭이 있어 좌상단 나가기(←+집)가 중복이라 숨긴다.
   바(.ui-topbar)와 음악 칩은 그대로 — 레이아웃·상단 여백 불변. 아몬드·iOS 는 이 선택자에 안 걸린다. 탭이 아닌 화면(가게·우체통·놀이터·운명함·상점 등)은 건드리지 않는다. */
html[data-edition="dokkaebi"]:not([data-platform="ios"]) body[data-dk-tab="today"] .ui-topbar .backhome,
html[data-edition="dokkaebi"]:not([data-platform="ios"]) body[data-dk-tab="menu"] .ui-topbar .backhome,
html[data-edition="dokkaebi"]:not([data-platform="ios"]) body.vguide-page .ui-topbar .backhome{ display:none !important; }