/* JMG PRIME 애니메이션 로고 (index.html·login.html 공용). 색은 쓰는 쪽의 --lg1~5·--lg-plate 변수로 정한다 */
/* ── JMG PRIME logo ── */

/* ---------- JMG PRIME logo ---------- */
.jmgp{
  --jmgp-size: 420px;
  --jmgp-l1:var(--lg1); --jmgp-l2:var(--lg2); --jmgp-l3:var(--lg3);
  --jmgp-l4:var(--lg4); --jmgp-l5:var(--lg5);
  width:var(--jmgp-size); max-width:100%; aspect-ratio:1/1;
  display:block; position:relative; line-height:0;
}
.jmgp-svg{width:100%; height:100%; overflow:visible; display:block}

/* every ring's travel is a whole number of its own symmetry steps,
   so the whole composition loops seamlessly every 6s */
@keyframes jmgpA{to{transform:rotate(18deg)}}     /* 3° ticks  × 6  */
@keyframes jmgpB{to{transform:rotate(-30deg)}}
@keyframes jmgpC{to{transform:rotate(90deg)}}     /* 4 nodes        */
@keyframes jmgpD{to{transform:rotate(-120deg)}}   /* dash 238.7 ×?  */
@keyframes jmgpE{to{transform:rotate(36deg)}}     /* 9° dashes × 4  */
@keyframes jmgpF{to{transform:rotate(-24deg)}}    /* 6° ticks  × 4  */
@keyframes jmgpG{to{transform:rotate(60deg)}}     /* hexagon        */
@keyframes jmgpSweep{to{transform:rotate(360deg)}}
@keyframes jmgpPulse{
  0%,100%{transform:scale(1);   opacity:.75}
  50%    {transform:scale(1.06);opacity:.12}
}
@keyframes jmgpBloom{
  0%,100%{opacity:.55; transform:scale(1)}
  50%    {opacity:.8;  transform:scale(1.06)}
}
@keyframes jmgpGhost{
  0%,100%{opacity:.16; transform:translateX(0)}
  48%    {opacity:.16; transform:translateX(0)}
  52%    {opacity:.5;  transform:translateX(3px)}
  56%    {opacity:.16; transform:translateX(-2px)}
}
@keyframes jmgpBrk{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes jmgpTickFade{0%,100%{opacity:.85}50%{opacity:.35}}

.jmgp-spin-a,.jmgp-spin-b,.jmgp-spin-c,.jmgp-spin-d,
.jmgp-spin-e,.jmgp-spin-f,.jmgp-spin-g,.jmgp-sweep,
.jmgp-pulse-ring,.jmgp-bloom,.jmgp-word-ghost{
  transform-origin:300px 300px; transform-box:view-box;
}
.jmgp-spin-a{animation:jmgpA 6s linear infinite}
.jmgp-spin-b{animation:jmgpB 6s linear infinite}
.jmgp-spin-c{animation:jmgpC 6s linear infinite}
.jmgp-spin-d{animation:jmgpD 6s linear infinite}
.jmgp-spin-e{animation:jmgpE 6s linear infinite}
.jmgp-spin-f{animation:jmgpF 6s linear infinite}
.jmgp-spin-g{animation:jmgpG 6s linear infinite}
.jmgp-sweep{animation:jmgpSweep 6s linear infinite; mix-blend-mode:screen}
.jmgp-pulse-ring{animation:jmgpPulse 3s ease-in-out infinite}
.jmgp-bloom{animation:jmgpBloom 3s ease-in-out infinite}
.jmgp-word-ghost{animation:jmgpGhost 6s steps(1,end) infinite}
.jmgp-brk{animation:jmgpBrk 3s ease-in-out infinite}
.jmgp-brk:nth-child(2){animation-delay:-.75s}
.jmgp-brk:nth-child(3){animation-delay:-1.5s}
.jmgp-brk:nth-child(4){animation-delay:-2.25s}

.jmgp-word{
  font:700 92px/1 "Orbitron","Rajdhani","Eurostile",
       "Trebuchet MS",system-ui,sans-serif;
  letter-spacing:10px; text-anchor:middle; dominant-baseline:middle;
  fill:var(--jmgp-l1); paint-order:stroke; stroke:var(--jmgp-l4);
  stroke-width:1.2; stroke-opacity:.6;
}
.jmgp-word-ghost{fill:var(--jmgp-l2); stroke:none; opacity:.16}
.jmgp-sub{
  font:600 27px/1 "Rajdhani","Trebuchet MS",system-ui,sans-serif;
  letter-spacing:11px; text-anchor:middle; fill:var(--jmgp-l2); opacity:.95;
}
.jmgp-arc-t{
  font:600 15px/1 "Rajdhani","Trebuchet MS",system-ui,sans-serif;
  letter-spacing:4.5px; fill:var(--jmgp-l3); opacity:.8;
}
.jmgp-arc-b{font-size:12.5px; letter-spacing:2.6px; opacity:.6}

/* 로고 애니메이션은 Windows "애니메이션 효과"가 꺼져 있어도 유지한다 (사용자 요청) */

/* 헤더용 축약형: 잔글씨·브래킷을 접고 워드마크만 키운다 */
.jmgp-mini .jmgp-arc-t, .jmgp-mini .jmgp-brk, .jmgp-mini .jmgp-rule,
.jmgp-mini .jmgp-sub, .jmgp-mini .jmgp-ticks-outer { display: none; }
.jmgp-mini .jmgp-word { font-size: 126px; letter-spacing: 2px; transform: translateY(16px); transform-box: fill-box; }