/* =====================================================================
   전역 크롬 — 하단 고정 UI (로고 · 뒤로 · 홈) + 진행바
   좌표는 발주처 피그마 Section 4 실측 (33:613 · 33:579 · 33:885)

   하단 UI 는 모든 화면에 "늘 있다". 한 번만 만들고 상태 클래스만 토글한다 —
   화면이 바뀔 때 다시 그리거나 등장 연출을 태우지 않는다(깜빡임 금지).
   ===================================================================== */

/* 로고 「나만의 문구점 / my own stationery」 — 래스터 자산 2 (@2x 616×222) */
.chrome-logo {
  position: absolute;
  left: var(--logo-left);
  top: var(--nav-top);
  width: var(--logo-w);
  height: var(--logo-h);
  object-fit: contain;
  pointer-events: none;
}

/* 뒤로 / 홈 — 90px 원형, 면 #E2DDD7, 아래로 10px 딱 떨어지는 그림자 (시안 PNG 실측) */
.chrome-nav {
  position: absolute;
  top: var(--nav-top);
  width: var(--nav-size);
  height: var(--nav-size);
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  box-shadow: var(--shadow-hard);
}
.chrome-nav img { display: block; width: 100%; height: 100%; }
.chrome-nav--back { left: var(--nav-back-x); }
.chrome-nav--home { left: var(--nav-home-x); }
/* 눌림 — translate 를 쓰면 .chrome-item 의 translate 트랜지션(1.1s)을 타서 굼뜨다 */
.chrome-nav.is-press { filter: brightness(0.93); }

/* ── 진행바 (문항 화면에만 · 33:885) ───────────────────────────────
   시안 top 314 — 09-01 사장님 "질문 공간 대폭 늘리자": 진행바를 120px 올려
   제목 밴드(250~700)를 위로 키웠다. */
.progress {
  position: absolute;
  left: 140px;
  top: 194px;
  width: 800px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: none;
}
.progress__label {
  width: 100px;
  flex: 0 0 auto;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 32px;
  color: var(--muted);
  line-height: 1;
}
.progress__track {
  flex: 1 1 auto;                 /* 800 − 100 = 700 (33:887) */
  height: 22px;
  border-radius: 12px;
  background: var(--nav);
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 12px;
  background: var(--ink);
}