/**
 * offline-retry 의 모양. 지키는 규칙: §2-NET NET3 · §2-UI 공통 화면 규격 · §2-ACC 접근성
 *
 * ⚠️ **왜 별도 파일인가** — JS 안에서 `element.style.x =` 로 칠하면 운영 CSP 의
 *    `style-src` 에 막힐 수 있다. 2026-09 에 인라인 `<script>` 가 CSP 에 막혀
 *    **한 번도 돌지 않을 코드를 「확인됨」으로 내보낸 적**이 있다. 그 짝이다.
 *
 * ⚠️ **왜 화면 위쪽인가** — 아래에 두면 폰에서 글자판이 올라올 때 가려진다 (§2-KB).
 *    끊김 안내는 **가장 급할 때 읽는 글**이라 가려지면 없는 것과 같다.
 */

:root {
  /* 값은 §2-UI 규격을 따른다 — 글자 16px · 여백 4의 배수 · 색 세 등급 */
  --offline-retry-bg: #b91c1c;      /* 빨강은 경고에만 (§2-UI UI2) */
  --offline-retry-fg: #ffffff;
  --offline-retry-height: 52px;
}

.offline-retry-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000;              /* 다른 띠·모달보다 위 — 급할 때 읽는 글이다 */

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  /* 안전영역 — 노치 아래로 내린다. 안 하면 글자가 노치에 먹힌다 (§2-T T5) */
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));

  background: var(--offline-retry-bg);
  color: var(--offline-retry-fg);
  font-size: 16px;                  /* 본문 16px 미만 금지 (§2-UI UI3) */
  line-height: 1.4;
}

.offline-retry-bar[hidden] { display: none; }

.offline-retry-text {
  /* 좁은 화면에서 줄이 넘쳐도 가로로 밀리지 않게 (§2-UI UI5 — 375px 가로 넘침 금지) */
  min-width: 0;
  overflow-wrap: anywhere;
}

.offline-retry-button {
  flex: 0 0 auto;

  /* 누를 수 있는 크기 — 최소 44×44px (§2-ACC) */
  min-height: 44px;
  min-width: 88px;
  padding: 8px 16px;

  border: 1px solid var(--offline-retry-fg);
  border-radius: 8px;
  background: transparent;
  color: var(--offline-retry-fg);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.offline-retry-button:disabled { opacity: 0.6; cursor: default; }

.offline-retry-button:focus-visible {
  outline: 2px solid var(--offline-retry-fg);
  outline-offset: 2px;
}

/**
 * 띠가 떠 있는 동안 본문을 그만큼 내린다.
 * ⚠️ 안 내리면 **맨 위 제목·뒤로가기 버튼을 덮는다** — 고치는 행위가 새 문제를 만든다.
 */
.offline-retry-on body {
  padding-top: calc(var(--offline-retry-height) + env(safe-area-inset-top, 0px));
}

/* 어두운 화면에서도 같은 빨강을 쓴다 — 경고는 두 화면에서 같아야 알아본다 (§2-L) */
@media (prefers-reduced-motion: reduce) {
  .offline-retry-bar { transition: none; }
}