/* G-EDIT 공통 «앱 시작» 화면 — 로딩(A) + 오류(㉣)
 *
 * 정본 : ~/globalroad-notes/정본-지에딧-앱시작-로딩오류-20260911.html
 *        J.J 확정 2026-09-11 「그래 그럼 「A + ㉣」 로 하자」
 *        A  = 브랜드 로더형 로딩 · ㉣ = 카드 없이 바탕 위에 바로 서는 오류
 * 지침 : 노션 3d7ecd7b030c804e8296fb59ed248e42 맨 위 ✍️ (배선은 그쪽이 정본, 모양은 이 파일)
 *
 * ⛔ 이 화면에 「설정」이라는 낱말도, 어떤 기능 이름도 넣지 마라.
 *    첫 화면이 제품 목록으로 바뀌어도 «그대로» 써야 하는 공통 장치다.
 * ⛔ 새 색을 짓지 않았다 — 아래 이름은 전부 tokens.css / shell.css / styles.css 에 있는 것이다.
 * ⛔ 마크를 CSS 로 그리거나 base64 로 박지 마라. brand-mark.png 가 정본이다.
 * ⛔ `font: 700 14px/1 inherit` 처럼 한 줄로 쓰지 마라 — inherit 이 들어가면 브라우저가
 *    그 선언을 «통째로» 버려 굵기까지 죽는다(2026-09-09 실측 · 파일 9개 21곳). 낱개로 적는다.
 */

/* ══ 무대 — 로딩과 오류가 «같은 곳»에 선다 ═══════════════════════════════════
   🔴 가운데 정렬(place-items:center)을 쓰지 «않는다».
      두 화면은 높이가 다르다(로딩 ≈158px · 오류 ≈243px). 가운데로 맞추면
      오류로 넘어갈 때 마크가 40px 넘게 위로 튄다 — A+㉣ 을 고른 «까닭 자체»가 깨진다.
      그래서 «위에서부터» 쌓고, 시작하는 y 를 화면 높이에 못 박는다.
   ⚠️ 목업은 도구 막대(40px) 때문에 calc(100vh - 40px) 였다. 구현엔 그 막대가 없으니 100vh 다. */
[data-screen="loading"] .무대{
  min-height:100vh;
  display:grid; align-content:start; justify-items:center;
  padding:clamp(120px, calc(38vh - 92px), 320px) 24px 56px;
  text-align:center;
  background:var(--page);
  color:var(--tx);
}

/* ── 마크 — 로딩·오류가 «같은 크기»다. ⛔ 갈라놓지 마라(갈리면 화면이 6px 튄다) ── */
[data-screen="loading"] .마크집{ position:relative; display:inline-block; line-height:0; }
[data-screen="loading"] .마크{ display:block; width:52px; height:47px; object-fit:contain;
  filter:saturate(0) brightness(1.06); }
/* 마크 «위로» 은색 빛이 지나간다. 마스크로 글리프 안에만 가둔다
   (기둥 코인이 쓰는 것과 같은 수법 · shell.css 의 코인흐름). ⛔ 새 색 없음 — --빛-센 하나다 */
[data-screen="loading"] .마크집::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, var(--빛-센) 50%, transparent 62%);
  background-size:260% 100%;
  -webkit-mask-image:url("/brand-mark.png"); mask-image:url("/brand-mark.png");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  opacity:.55; animation:빛흐름 2.6s ease-in-out infinite;
}
@keyframes 빛흐름{ 0%{background-position:120% 0} 60%,100%{background-position:-60% 0} }

/* 🔴 2026-09-16 — 이 파일의 선택자는 «전부» [data-screen="loading"] 안으로 가둔다.
   왜: 여기 이름이 다 흔한 낱말이라(무대·마크·워드·진행·단계·오류·배지) 앱의 다른 화면과 겹친다.
   실제로 겪은 것 — 맨 이름 `.진행` 이 제품목록의 「올리는 중」 띠·뱃지에도 걸려서,
   그 띠가 «폭 168px · 높이 2px» 막대가 되고 글자가 잘렸다(J.J 스크린샷 2026-09-16).
   ⚠️ 겹침이 조용한 까닭 — 제품목록 쪽 규칙은 색만 적고 크기를 안 적어서, «안 적은 칸»이
      이 파일에서 그대로 새어 들어갔다. 오류는 한 줄도 안 났다.
   ⛔ 새 규칙을 «맨 이름»으로 더하지 마라. 이 파일은 index.html 이 항상 읽어서
      한 줄만 맨 이름이어도 앱 전체에 뿌려진다.
   재는 자: tests/test-boot-screen.js 가 「맨 이름 0개」를 센다. */

/* ══ 로딩 ══════════════════════════════════════════════════════════════ */
[data-screen="loading"] .워드{ margin-top:20px; font-family:var(--gr-head); font-size:23px; font-weight:800;
  letter-spacing:-.02em; color:var(--tx); }
/* 진행 막대 — «끝을 모르는» 진행. 🔴 라임(--now)은 이 화면에서 여기 하나뿐이다.
   ⛔ 글자·테두리·마크에 바르지 마라 */
[data-screen="loading"] .진행{ position:relative; width:168px; height:2px; margin-top:26px; border-radius:2px;
  overflow:hidden; background:color-mix(in srgb, var(--tx) 11%, transparent); }
[data-screen="loading"] .진행::after{ content:""; position:absolute; top:0; bottom:0; width:38%; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--now), transparent);
  animation:진행흐름 1.5s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes 진행흐름{ 0%{left:-40%} 100%{left:100%} }
/* 단계 글자 — 🔴 «진짜 단계»에 맞춘다. 실제 진행과 어긋나는 글자는
   화면이 손님에게 거짓말을 하는 것이다(정본 ④의 못). */
[data-screen="loading"] .단계{ margin-top:14px; font-size:12.5px; color:var(--tx3); min-height:19px; }
[data-screen="loading"] .단계 span{ display:inline-block; animation:스밈 .45s ease both; }
@keyframes 스밈{ from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none} }

/* ══ 오류 ══════════════════════════════════════════════════════════════ */
/* 마크는 흐려지고 빛은 «멈춘다» — 「아직 도는 중」으로 안 읽히게 */
[data-screen="loading"] .오류 .마크{ opacity:.5; }
[data-screen="loading"] .오류 .마크집::after{ animation:none; opacity:0; }
/* 빨강은 «마크 어깨의 점» 하나뿐이다. ⛔ 큰 빨강 판·빨강 단추를 만들지 마라 */
[data-screen="loading"] .배지{ position:absolute; top:-3px; right:-5px; width:8px; height:8px; border-radius:50%;
  background:var(--danger); box-shadow:0 0 0 3px var(--page); }
[data-screen="loading"] .무대 .제목{ margin-top:22px; font-size:16.5px; font-weight:700; letter-spacing:-.02em; color:var(--tx); }
[data-screen="loading"] .무대 .부연{ margin:10px 0 0; font-size:13px; color:var(--tx3); line-height:1.75; max-width:340px; }
/* 단추는 «가운데», 곁말은 그 «아래». ⛔ 옆에 나란히 두지 마라 (J.J 2026-09-10 지적) */
[data-screen="loading"] .무대 .손{ margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:10px; }
[data-screen="loading"] .무대 .단추{ font-family:var(--gr-sans); font-size:14px; font-weight:700; letter-spacing:-.01em;
  padding:11px 24px; border-radius:10px; cursor:pointer; color:var(--tx);
  background:color-mix(in srgb, var(--tx) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--tx) 20%, transparent); }
[data-screen="loading"] .무대 .단추:hover{ background:color-mix(in srgb, var(--tx) 11%, transparent); border-color:var(--tx3); }
[data-screen="loading"] .무대 .단추:focus-visible{ outline:2px solid var(--빛-센); outline-offset:2px; }
[data-screen="loading"] .무대 .곁말{ font-size:12px; color:var(--tx3); }

/* 움직임이 불편한 손님을 존중한다 — shell.css 가 같은 배려를 한다 */
@media (prefers-reduced-motion: reduce){
  [data-screen="loading"] .마크집::after, [data-screen="loading"] .진행::after, [data-screen="loading"] .단계 span{ animation:none; }
}