/* ============================================================
   lp-wait.css — 공통 대기 표시 (2026-09-08)
   ------------------------------------------------------------
   목적 : "확인 중 / 불러오는 중 / 생성 중" 문구만 있는 대기 지점에
          움직이는 표시를 붙여 고객이 '멈춤'으로 오해하지 않게 한다.
   벤치마크 : NN/g 반응시간 3한계(0.1s/1s/10s) · Material 불확정 원형 ·
          Apple HIG(문구 병행, 이중 표시 금지) · YouTube/GitHub 상단 진행바 ·
          Facebook/LinkedIn 스켈레톤.
   원칙 : (1) 마크업 추가 없음 — [data-lp-wait] 속성만 붙이면 ::before 로 링을 그림.
              다른 스크립트가 textContent 를 바꿔도 링이 지워지지 않는다.
          (2) 상태가 바뀌어 속성이 제거되면 링도 즉시 사라진다(레이아웃 이동 최소).
          (3) prefers-reduced-motion 시 회전 대신 느린 페이드.
          (4) 색은 지면 --brand 변수, 없으면 #468D84. 버튼(흰 글씨)은 currentColor.
   ============================================================ */

/* ── 1. 인라인 링 (::before) ── */
[data-lp-wait]{ position:relative; }
[data-lp-wait]::before{
  content:""; display:inline-block; vertical-align:-3px;
  flex:0 0 auto; /* flex 버튼 안에서 눌리지 않게 */
  width:14px; height:14px; margin-right:8px; box-sizing:border-box;
  border-radius:50%;
  border:2.5px solid currentColor;
  border-right-color:transparent;
  opacity:.9;
  animation:lpWaitSpin .85s linear infinite;
}
[data-lp-wait="lg"]::before{ width:22px; height:22px; border-width:3px; vertical-align:-5px; margin-right:10px; }
[data-lp-wait="brand"]::before, [data-lp-wait="lg"]::before{ color:var(--brand, #468D84); }
[data-lp-wait="block"]{ display:flex; align-items:center; justify-content:center; gap:0; }
[data-lp-wait="block"]::before{ width:22px; height:22px; border-width:3px; color:var(--brand, #468D84); }
@keyframes lpWaitSpin{ to{ transform:rotate(360deg); } }

/* ── 2. 9초 초과 보조 문구 (NN/g 10초 한계 대비) ── */
[data-lp-wait-slow]::after{
  content:attr(data-lp-wait-slow);
  display:block; margin-top:6px;
  font-size:12px; font-weight:600; line-height:1.5;
  color:var(--muted, #5c6773); opacity:0;
  animation:lpWaitIn .4s ease forwards;
}
@keyframes lpWaitIn{ to{ opacity:1; } }

/* ── 3. 상단 얇은 페이지 이동 진행바 (YouTube/GitHub 패턴) ── */
.lp-wait-topbar{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:2147483000;
  pointer-events:none; opacity:0; transition:opacity .25s ease;
}
.lp-wait-topbar.is-on{ opacity:1; }
.lp-wait-topbar__fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--brand, #468D84), #7fc3b7);
  box-shadow:0 0 8px rgba(70,141,132,.55);
}
.lp-wait-topbar.is-on .lp-wait-topbar__fill{ animation:lpWaitBar 8s cubic-bezier(.1,.6,.2,1) forwards; }
@keyframes lpWaitBar{
  0%{ width:0%; } 12%{ width:35%; } 40%{ width:66%; } 70%{ width:84%; } 100%{ width:93%; }
}

/* ── 4. 스켈레톤 (콘텐츠 자리 표시, 선택 사용) ── */
.lp-skel{
  position:relative; overflow:hidden; border-radius:8px;
  background:rgba(23,33,43,.07); color:transparent !important;
}
.lp-skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-100%);
  animation:lpWaitShimmer 1.4s ease-in-out infinite;
}
@keyframes lpWaitShimmer{ to{ transform:translateX(100%); } }

/* ── 5. 감속 선호(멀미·전정장애) : 회전/흐름 제거, 느린 페이드만 ── */
@media (prefers-reduced-motion: reduce){
  [data-lp-wait]::before{ border-right-color:currentColor; animation:lpWaitFade 1.6s ease-in-out infinite; }
  .lp-wait-topbar.is-on .lp-wait-topbar__fill{ animation:none; width:70%; }
  .lp-skel::after{ animation:none; }
  @keyframes lpWaitFade{ 0%,100%{ opacity:.4; } 50%{ opacity:.95; } }
}

/* ── 6. 고대비 모드 ── */
@media (forced-colors: active){
  [data-lp-wait]::before{ border-color:CanvasText; border-right-color:transparent; }
  .lp-wait-topbar__fill{ background:Highlight; box-shadow:none; }
}