/* 연합 엠블럼 꾸미기 + 연합 간판(배너) 장식 */

/* ───────── 엠블럼 꾸미기 (연합 창설) ───────── */
.create-preview{width:176px;height:146px;margin:0 auto 10px;filter:drop-shadow(0 0 14px rgba(80,170,255,.45))}
.em-designer{display:grid;gap:14px}
.em-group>span{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.06em;color:#9fd0ff}
.em-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.em-opt{position:relative;display:grid;gap:2px;justify-items:center;min-width:0;padding:6px 3px 4px;border:1px solid #2c3f66;border-radius:8px;background:rgba(4,14,40,.82);color:#cfe6ff;cursor:pointer}
.em-opt .crest-svg{width:100%;height:46px;filter:none}
.em-opt small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#9fb8dc}
.em-opt:hover{border-color:#6fb4f0}
.em-opt[aria-pressed="true"]{border-color:#aee6ff;background:#0f2250;box-shadow:0 0 10px rgba(31,162,255,.6)}
.em-opt[aria-pressed="true"] small{color:#fff}
.em-swatches{display:flex;flex-wrap:wrap;gap:9px}
.em-swatch{width:34px;height:34px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:radial-gradient(circle at 35% 30%,var(--c1),var(--c2) 62%,var(--c3));cursor:pointer}
.em-swatch[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px #1fa2ff,0 0 12px rgba(31,162,255,.85)}
.em-random{min-height:42px;border:1px solid #6fb4f0;border-radius:10px;background:linear-gradient(90deg,#0d2a5e,#16407f);color:#fff;font:inherit;font-size:14px;cursor:pointer}
.em-random:active{transform:translateY(1px)}
@media (min-width:480px){.em-row{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ───────── 연합 간판 ─────────
   금속 이중 테두리 + 모서리 브래킷 + 안쪽 사선 무늬 + 엠블럼 뒤 빛 받침 + 금빛 계급 표식. */
.union-panel.union-live:has(.union-scene) .union-banner{
  gap:12px;padding:8px 18px 8px 12px;border:2px solid transparent;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),
    radial-gradient(120% 140% at 0% 0%,rgba(90,170,255,.34),transparent 55%),
    radial-gradient(90% 120% at 100% 100%,rgba(150,110,255,.26),transparent 60%),
    linear-gradient(115deg,rgba(8,26,76,.96),rgba(4,10,34,.94) 55%,rgba(12,36,96,.96)) padding-box,
    linear-gradient(180deg,#f6fdff 0%,#a7cdf0 26%,#4f78b0 50%,#c3e5ff 76%,#6f98cc 100%) border-box;
  box-shadow:0 0 22px rgba(31,162,255,.5),0 8px 20px rgba(0,0,0,.55),inset 0 0 26px rgba(31,162,255,.22)}
.union-banner::before{
  border:1px solid rgba(255,214,130,.38);
  background:
    linear-gradient(#ffd27a,#ffd27a) left top/16px 2px no-repeat,linear-gradient(#ffd27a,#ffd27a) left top/2px 16px no-repeat,
    linear-gradient(#ffd27a,#ffd27a) right top/16px 2px no-repeat,linear-gradient(#ffd27a,#ffd27a) right top/2px 16px no-repeat,
    linear-gradient(#ffd27a,#ffd27a) left bottom/16px 2px no-repeat,linear-gradient(#ffd27a,#ffd27a) left bottom/2px 16px no-repeat,
    linear-gradient(#ffd27a,#ffd27a) right bottom/16px 2px no-repeat,linear-gradient(#ffd27a,#ffd27a) right bottom/2px 16px no-repeat}
.union-banner .ub-crest{width:72px;height:60px;overflow:visible}
.union-banner .ub-crest::before{display:block;content:"";position:absolute;inset:-6px -10px;border:0;border-radius:50%;animation:none;
  background:radial-gradient(closest-side,rgba(110,190,255,.42),rgba(110,190,255,.12) 60%,transparent)}
.union-banner .ub-crest::after{display:none}
.union-banner .ub-crest .crest-svg{position:relative;z-index:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(120,190,255,.5))}
.union-banner .ub-kicker{color:#ffd9a0;text-shadow:0 0 6px rgba(255,170,70,.6)}
.union-banner .ub-name{font-size:19px;letter-spacing:.04em;background:linear-gradient(180deg,#ffffff,#e9f4ff 40%,#9fcdf5 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(70,170,255,.6))}
.union-banner .ub-exp{border-color:rgba(255,214,130,.45)}
.union-banner .ub-exp i{background:linear-gradient(90deg,#1fa2ff,#aee6ff 70%,#fff)}