/* 꾸미기 전 옛 카드는 숨기되, 스크립트가 오지 않으면 3초 뒤 원래 화면을 보여 준다. */
#gate:not(.tool-loading-screen) :is(.lf-gatecard,.lock-card,.gate-card),
#lockScreen:not(.tool-loading-screen) :is(.lf-gatecard,.lock-card,.gate-card) {
  visibility:hidden; animation:tool-loading-fallback 0s 3s forwards;
}
@keyframes tool-loading-fallback { to { visibility:visible; } }
/* 도구 진입·처리 중 공통 로딩 카드. 다른 화면의 색상·배치는 건드리지 않는다. */
.tool-loading-screen, .tool-loading-dialog {
  --loading-bg:#0f172a; --loading-card:#1e293b; --loading-line:#334155;
  --loading-fg:#f8fafc; --loading-muted:#94a3b8; --loading-accent:#3b82f6;
  font-family:inherit; color:var(--loading-fg); color-scheme:dark;
}
.light .tool-loading-screen, .light .tool-loading-dialog, .tool-loading-light {
  --loading-bg:#f1f5f9; --loading-card:#fff; --loading-line:#dbe2ea;
  --loading-fg:#0f172a; --loading-muted:#64748b; --loading-accent:#2563eb;
  color-scheme:light;
}
#gate.tool-loading-screen, #lockScreen.tool-loading-screen {
  position:fixed; inset:0; z-index:1000; box-sizing:border-box; min-height:100dvh;
  display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto; background:var(--loading-bg);
}
.tool-loading-screen[hidden], .tool-loading-card [hidden] { display:none !important; }
.tool-loading-screen > .tool-loading-card, .tool-loading-dialog > .tool-loading-card,
.gate-card.tool-loading-card {
  box-sizing:border-box; width:100%; max-width:380px; padding:36px 28px; margin:auto;
  border:1px solid var(--loading-line); border-radius:12px; background:var(--loading-card);
  color:var(--loading-fg); text-align:center; box-shadow:none; line-height:1.6;
}
.tool-loading-brand { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; }
.tool-loading-brand img, .gate-card.tool-loading-card .tool-loading-brand img { width:32px; height:32px; margin:0; }
.tool-loading-brand strong { font-size:24px; letter-spacing:-.8px; color:var(--loading-fg); }
.tool-loading-brand span { color:var(--loading-accent); }
.tool-loading-card .tool-loading-group { margin:0 0 12px; font-size:13px; color:var(--loading-muted); }
.tool-loading-card .tool-loading-title { margin:0; font-size:21px; font-weight:700; line-height:1.5; color:var(--loading-fg); word-break:keep-all; overflow-wrap:anywhere; }
.tool-loading-spinner { display:block; box-sizing:border-box; width:34px; height:34px; margin:28px auto 20px; border:4px solid var(--loading-line); border-right-color:var(--loading-accent); border-top-color:var(--loading-accent); border-radius:50%; animation:tool-loading-spin 1s linear infinite; }
.tool-loading-card .tool-loading-heading { margin:0 0 8px; font-size:16px; font-weight:600; color:var(--loading-fg); }
.tool-loading-card .tool-loading-message { margin:0; font-size:14px; line-height:1.7; color:var(--loading-muted); white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; }
.tool-loading-track { display:block; position:relative; width:100%; max-width:240px; height:5px; margin:26px auto 0; border-radius:4px; background:var(--loading-line); overflow:hidden; }
.tool-loading-track::after { content:''; display:block; width:35%; height:100%; border-radius:inherit; background:var(--loading-accent); animation:tool-loading-slide 1.6s ease-in-out infinite alternate; }
.tool-loading-card.tool-loading-idle .tool-loading-message { margin-top:22px; }
.tool-loading-card a { margin-top:22px; }
.tool-loading-dialog { width:min(380px,calc(100vw - 32px)); padding:0; border:0; background:transparent; max-height:calc(100dvh - 32px); overflow:auto; }
.tool-loading-dialog::backdrop { background:rgba(15,23,42,.8); }
@keyframes tool-loading-spin { to { transform:rotate(360deg); } }
@keyframes tool-loading-slide { from { transform:translateX(-40%); } to { transform:translateX(225%); } }
@media(max-width:480px) { .tool-loading-screen > .tool-loading-card, .tool-loading-dialog > .tool-loading-card, .gate-card.tool-loading-card { padding:28px 20px; } }
@media(prefers-reduced-motion:reduce) { .tool-loading-spinner, .tool-loading-track::after { animation:none; } }
@media print { .tool-loading-screen, .tool-loading-dialog { display:none !important; } }
