/* ===================================================================
   card-styles.css - 입체 파스텔 카드 (최종 완성본)
   등급 순서: C > R > RR > SR > SAR > UR > HR > MUR(최고)
   카드 비율 3/4.15,사진칸 3/3.87,이중 프레임 + 사진 박힘
   =================================================================== */
.card,.card *{ box-sizing: border-box; }
.card{
  border-radius: 14px;
  padding: 4px;
  position: relative;
  display: flex;
  box-shadow: 0 10px 24px rgba(15,23,42,0.22), inset 0 0 0 2px rgba(255,255,255,0.28);
  border: 2px solid rgba(17,24,39,0.22);
}
.card .frame{
  flex: 1; border-radius: 10px; padding: 5px;
  display: flex; flex-direction: column;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.35);
  position: relative;
}
/* 안쪽 프레임 선 (층 효과) */
.card .frame::before{
  content: ""; position: absolute; inset: 3px; border-radius: 7px; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.card .topbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 1px 3px 4px; position: relative; z-index: 1;
}
.card .grade-badge{
  font-size: 12px; font-weight: 800; padding: 3px 10px;
  border-radius: 6px; letter-spacing: 0.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.9);
}
.card .stars{ font-size: 12px; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 0 3px rgba(0,0,0,0.5), 0 1px 0 rgba(0,0,0,0.4); position: relative; z-index: 1; }
.card .photo{
  aspect-ratio: 3 / 3.87; border-radius: 8px; overflow: hidden;
  position: relative; background-size: cover; background-position: center top;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.4);
  border: 1.5px solid rgba(0,0,0,0.15);
}
.card .photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.card .namebox{
  margin-top: 4px; border-radius: 6px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 2px rgba(0,0,0,0.08);
}
/* [렉 2026-08-23] 반짝임을 background-position -> transform 으로 옮겼다.
   그림을 원소 안에서 밀면 **매 프레임 다시 그린다.** 원소를 넓게 깔고 원소째
   밀면 GPU 가 옮기고 **다시 안 그린다.** 이동량은 t=(1-S)p/S 로 맞춰서 같다.
   .sheen = 클리핑 상자 / .sheen::before = 실제 그라디언트 */
.card .sheen{ position: absolute; inset: 0; pointer-events: none; z-index: 3;
  overflow: hidden; border-radius: inherit; }
/* ===== 0. C : 초크 화이트 (최하급,밋밋한 크림빛) ===== */
.g-C{ background: linear-gradient(165deg, #f2efe8, #ddd8cc); }
.g-C .frame{ background: linear-gradient(165deg, #f8f6f0, #e6e1d4); }
.g-C .grade-badge{ background: #fff; color: #8a8272; }
.g-C .stars{ color: #a39d8c; }
.g-C .photo{ background: #e2ddd0; }
.g-C .namebox{ background: #fff; color: #6b6455; }
/* ===== 1. R : 매트 실버 (무광 회색) ===== */
.g-R{ background: linear-gradient(165deg, #bcc1cc, #9aa1ab); }
.g-R .frame{ background: linear-gradient(165deg, #d2d6de, #adb3bd); }
.g-R .grade-badge{ background: #fff; color: #4a525e; }
.g-R .stars{ color: #7a8290; }
.g-R .photo{ background: #a4aab4; }
.g-R .namebox{ background: #fff; color: #2e343e; }
/* ===== 2. RR : 아이시 블루 ===== */
.g-RR{ background: linear-gradient(165deg, #a8d4f5, #6bb0ec); }
.g-RR .frame{ background: linear-gradient(165deg, #c4e2f8, #8ec5f0); }
.g-RR .grade-badge{ background: #fff; color: #1976d2; }
.g-RR .stars{ color: #fff; }
.g-RR .photo{ background: #90caf9; }
.g-RR .namebox{ background: #fff; color: #1565c0; }
.g-RR.foil-shine .sheen::before,.g-RR.foil-rainbow .sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:260%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,0.4) 50%,transparent 58%);background-size:100% 100%;animation:sheen_260 4s linear infinite}
/* ===== 3. SR : 소프트 바이올렛 (연보라) ===== */
.g-SR{ background: linear-gradient(145deg, #c4b5fd, #ede9fe); }
.g-SR .frame{ background: linear-gradient(145deg, #d0c4fd, #e8e2fc); }
.g-SR .grade-badge{ background: #fff; color: #6d4ec9; }
.g-SR .stars{ color: #fff; }
.g-SR .photo{ background: #d8ccfa; }
.g-SR .namebox{ background: #fff; color: #6d4ec9; }
.g-SR.foil-shine .sheen::before,.g-SR.foil-rainbow .sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:260%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,0.42) 50%,transparent 60%);background-size:100% 100%;animation:sheen_260 3.6s linear infinite}
/* ===== 4. SAR : 옐로우 골드 (심플) ===== */
.g-SAR{
  background: linear-gradient(140deg, #2a1e00, #705800, #e8c400, #705800, #2a1e00);
  box-shadow: 0 16px 44px rgba(140,100,0,.5), 0 0 0 2px rgba(255,220,40,.45), inset 0 0 0 2px rgba(255,240,120,.35);
  border: 2px solid rgba(200,160,0,.6);
}
.g-SAR .frame{
  background: linear-gradient(140deg, #1e1600, #504000, #d4b000, #504000, #1e1600);
  box-shadow: inset 0 3px 12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,230,80,.2);
  border: 1px solid rgba(120,90,0,.4);
}
.g-SAR .grade-badge{ background: linear-gradient(135deg,#fff0a0,#d4a000); color: #3a2800; font-weight: 900; border: 1px solid rgba(200,160,0,.4); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.g-SAR .stars{ color: #fff8c0; text-shadow: 0 0 10px rgba(255,230,0,.9), 0 0 4px rgba(255,210,0,.8); }
.g-SAR .photo{
  background: #1a1200;
  border: 2px solid rgba(180,140,0,.4);
  box-shadow: inset 0 6px 18px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,230,80,.12);
}
.g-SAR .namebox{ background: linear-gradient(135deg,#fff0a0,#d4a000); color: #3a2800; font-weight: 900; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.g-SAR.foil-shine .sheen::before,.g-SAR.foil-rainbow .sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:280%;background:linear-gradient(118deg,
    transparent 5%,
    rgba(255,240,200,.1) 25%,
    rgba(255,245,210,.75) 45%,
    rgba(255,224,140,.55) 50%,
    rgba(255,245,210,.65) 55%,
    rgba(255,240,200,.05) 75%,
    transparent 90%
  );background-size:100% 100%;animation:goldSheen_280 2.4s ease-in-out infinite}
@keyframes goldSheen{ 0%,100%{background-position:180% 0;opacity:.8} 50%{background-position:-80% 0;opacity:1} }
/* ===== 5. UR : 아이스 민트 ===== */
.g-UR{
  background: linear-gradient(140deg, #001a1a, #004444, #008888, #004444, #001a1a);
  border: 2px solid rgba(0,200,180,.5);
  box-shadow: 0 16px 44px rgba(0,160,140,.45), 0 0 0 2px rgba(0,220,200,.4), 0 0 20px rgba(0,180,160,.2);
}
.g-UR .frame{
  background: linear-gradient(140deg, #001010, #003030, #006060, #003030, #001010);
  box-shadow: inset 0 3px 12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,220,200,.15);
}
.g-UR .grade-badge{ background: linear-gradient(135deg,#80fff0,#00b8a8); color: #002020; font-weight: 900; border: 1px solid rgba(0,200,180,.4); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.g-UR .stars{ color: #80fff0; text-shadow: 0 0 10px rgba(0,220,200,.9), 0 0 4px rgba(0,200,180,.8); }
.g-UR .photo{
  background: #000c0c;
  border: 2px solid rgba(0,180,160,.4);
  box-shadow: inset 0 6px 18px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,220,200,.1);
}
.g-UR .namebox{
  background: linear-gradient(135deg,#80fff0,#00b8a8);
  color: #002020; font-weight: 900;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.g-UR.foil-shine .sheen::before,.g-UR.foil-rainbow .sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:280%;background:linear-gradient(118deg, transparent 5%, rgba(0,255,220,.08) 25%, rgba(128,255,240,.75) 45%, rgba(0,220,200,.55) 50%, rgba(128,255,240,.65) 55%, rgba(0,255,220,.05) 75%, transparent 90%);background-size:100% 100%;animation:tealSheen_280 2.4s ease-in-out infinite}
@keyframes tealSheen{ 0%,100%{background-position:180% 0;opacity:.8} 50%{background-position:-80% 0;opacity:1} }
/* ===== 6. HR : 시크릿 히든 레어 (딥 버건디/뱀파이어 레드) ===== */
/* HR: 딥 오션 - 심해 사파이어. 홀로/색순환 없음(포일 시스템과 역할 분리) */
.g-HR{ background: linear-gradient(150deg, #03102e 0%, #082458 55%, #04173c 100%);
  border: 2px solid transparent; background-clip: padding-box;
  box-shadow: 0 0 0 2px rgba(90,160,255,.55), 0 0 16px rgba(60,140,255,.35); }
.g-HR .frame{ background: linear-gradient(150deg, #040d24 0%, #081d44 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(120,180,255,0.14); }
.g-HR .grade-badge{ background: linear-gradient(135deg, #cfe6ff, #4f9fe8 55%, #9fceff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; text-shadow: 0 0 6px rgba(80,160,255,0.45); }
.g-HR .stars{ color: #7fbcff; text-shadow: 0 0 4px rgba(70,150,255,0.85); }
.g-HR .photo{ background: #050f22; border: 1.5px solid #123468; }
.g-HR .namebox{ background: #050f22; background-image: linear-gradient(135deg, #cfe6ff, #4f93e0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; border: 1px solid rgba(90,150,240,0.35); }
.g-HR.foil-shine .sheen::before,.g-HR.foil-rainbow .sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:240%;background:linear-gradient(115deg, transparent 35%, rgba(140, 200, 255, 0.26) 50%, transparent 65%);background-size:100% 100%;animation:sheen_240 2.6s linear infinite}
/* ===== 7. MUR : 백금 프리즘 봉인 (2026-08-28 교체) =====
   보라·마젠타 '이벤트 호라이즌' 폐기. 흰 밀랍 껍데기 + 금박 + 프리즘 반사에
   **속프레임만 순검정**. 용병 신화와 같은 판을 쓰되 속색으로 갈라,둘을
   나란히 놓으면 한눈에 구분된다 (신화=은사 / MUR=검정).
   시안: frontend/_용병-시안.html
   [왜 안 뿌연가] 흰·금·검정 사이 선을 전부 **불투명 단색**으로 그린다.
   반투명 선은 아래 색과 섞여 경계를 뭉갠다 — 명품 마감은 그 반대다. */
.g-MUR{
  --mur-mtl: linear-gradient(118deg,#7A5A1C,#E6C274 20%,#FFFDF0 40%,#F0D68E 52%,#C9A24A 70%,#7A5A1C);
  background:
    repeating-linear-gradient(126deg,rgba(255,255,255,.022) 0 2px,rgba(0,0,0,.03) 2px 5px),
    radial-gradient(circle at 17% 21%,#B0862C 0 1.5px,transparent 2px),radial-gradient(circle at 71% 13%,#C6A04A 0 1.2px,transparent 1.7px),radial-gradient(circle at 34% 47%,#A67C26 0 1.7px,transparent 2.2px),radial-gradient(circle at 84% 39%,#CEA850 0 1.1px,transparent 1.6px),radial-gradient(circle at 23% 71%,#B48A30 0 1.4px,transparent 1.9px),radial-gradient(circle at 62% 63%,#C49A3C 0 1.6px,transparent 2.1px),radial-gradient(circle at 46% 86%,#AC822A 0 1.2px,transparent 1.7px),radial-gradient(circle at 88% 79%,#CCA64E 0 1.5px,transparent 2px),radial-gradient(circle at 9% 55%,#BC9236 0 1.1px,transparent 1.6px),radial-gradient(circle at 55% 29%,#D4B05C 0 1px,transparent 1.5px),
    linear-gradient(126deg,transparent 16%,rgba(255,200,235,.5) 31%,
      rgba(196,232,255,.42) 43%,rgba(255,246,196,.55) 55%,transparent 74%),
    radial-gradient(120% 90% at 50% 18%,rgba(255,190,190,.1),transparent 58%),
    linear-gradient(150deg,#E9E4DA,#FAF7F2 34%,#FFFFFF 50%,#FAF7F2 68%,#E9E4DA);
  border: 2px solid #FFFFFF;
  box-shadow:
    0 18px 44px rgba(0,0,0,.5),
    0 0 0 1px rgba(120,90,30,.55),
    0 0 0 3px rgba(201,162,74,.35),
    inset 0 0 0 4px rgba(201,162,74,.45),
    inset 0 1px 0 rgba(255,255,255,.8);
}
/* 속 — 거의 순검정. 금선 2px 불투명 */
.g-MUR .frame{
  background: linear-gradient(150deg,#0C0B11,#191622 46%,#040308);
  box-shadow: inset 0 3px 16px rgba(0,0,0,.8), inset 0 0 0 2px #E6C274,
    inset 0 0 0 3px #4A3708;
  border: 1px solid #000;
}
.g-MUR .frame::before{ border-color: #8A6A28; box-shadow: none; }
/* 사진 — 금 베젤 */
.g-MUR .photo{
  background: #040308;
  border: 2px solid #E6C274;
  box-shadow: inset 0 0 0 1px #000, inset 0 5px 18px rgba(0,0,0,.7),
    0 1px 0 rgba(255,249,228,.5);
}
.g-MUR .grade-badge{
  color: #241705; font-weight: 900;
  background: var(--mur-mtl);
  border: 1px solid #FFF9E4;
  box-shadow: 0 2px 7px rgba(0,0,0,.45);
}
.g-MUR .stars{ color: #F3DCA0; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.g-MUR .namebox{
  color: #241705; font-weight: 900;
  background: var(--mur-mtl);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 1px #FFF9E4;
  border: none;
}
.g-MUR.foil-shine .sheen::before,.g-MUR.foil-rainbow .sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:280%;background:linear-gradient(118deg,
    transparent 5%,
    rgba(255,255,255,.06) 25%,
    rgba(255,246,196,.42) 45%,
    rgba(255,255,255,.55) 50%,
    rgba(196,232,255,.38) 55%,
    rgba(255,255,255,.04) 75%,
    transparent 90%
  );background-size:100% 100%;animation:holoSheen_280 2.4s ease-in-out infinite}
@keyframes holoSheen{ 0%,100%{background-position:180% 0;opacity:.75} 50%{background-position:-80% 0;opacity:1} }
@keyframes sheen{ 0%{background-position:170% 0} 100%{background-position:-170% 0} }
@keyframes hologram-shine{ to { background-position: 200% center; } }
/* ===================================================================
   포일 (반짝임)
   =================================================================== */
.card.foil-shine::after{
  content: ""; position: absolute; top:0;bottom:0;left:0;width:220%; z-index: 6; pointer-events: none;
  border-radius: 14px; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 65%);
  background-size:100% 100%;
  animation: foilShine_220 3.5s ease-in-out infinite;
}
@keyframes foilShine{ 0%,100%{background-position:75% 0} 50%{background-position:25% 0} }
.card.foil-rainbow,.card.foil-shine{ overflow: hidden; }
.card.foil-rainbow::before{
  content: ""; position: absolute; top:0;bottom:0;left:0;width:250%; z-index: 6; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,0,150,.4) 15%, rgba(255,200,0,.4) 30%, rgba(0,255,150,.4) 45%, rgba(0,180,255,.4) 60%, rgba(180,0,255,.4) 75%, transparent 100%);
  background-size:100% 100%;
  mix-blend-mode: color-dodge;
  animation: prismSlide_250 3.2s linear infinite;
  opacity: .7;
}
.card.foil-rainbow::after{
  content: ""; position: absolute; top:0;bottom:0;left:0;width:220%; z-index: 7; pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.3) 50%, transparent 65%);
  background-size:100% 100%;
  animation: foilShine_220 3.5s ease-in-out infinite;
}
@keyframes prismSlide{ 0%{background-position:120% 0} 100%{background-position:-120% 0} }
.card.foil-rainbow .frame{ position: relative; z-index: 5; }
/* 밝은/어두운 상급(UR↑) 포일 역할 분리 (enh5):
   ── 홀로(shine)   = '은백색 광택'만. 등급색 스윕 제거 → 무지개처럼 안 보임.
   ── 레인보우      = 또렷한 파스텔 무지개 프리즘 (screen 블렌드라 어두운 UR/MUR 프레임에서도 보임) */
.g-UR.foil-shine .sheen::before,.g-HR.foil-shine .sheen::before,.g-MUR.foil-shine .sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:280%;background:linear-gradient(118deg, transparent 8%, rgba(255,255,255,.08) 28%,
    rgba(255,255,255,.6) 47%, rgba(235,240,255,.35) 52%, rgba(255,255,255,.06) 74%, transparent 92%);background-size:100% 100%;animation:silverSheen_280 2.6s ease-in-out infinite}
@keyframes silverSheen{ 0%,100%{background-position:180% 0;opacity:.75} 50%{background-position:-80% 0;opacity:1} }
.g-UR.foil-rainbow::before,.g-HR.foil-rainbow::before,.g-MUR.foil-rainbow::before{
  mix-blend-mode: screen; opacity: .62;
  background: linear-gradient(100deg, transparent 0%, rgba(255,140,205,.6) 16%, rgba(255,225,140,.55) 32%,
    rgba(150,255,205,.55) 48%, rgba(140,205,255,.6) 64%, rgba(205,150,255,.6) 80%, transparent 100%);
  /* [렉] base 와 같이 transform 판으로. 폭 300% + t=(1-3)p/3 */
  width: 300%; background-size: 100% 100%;
  animation: prismSlide_300 5s linear infinite;
}
@keyframes prismSlide_300{0%{transform:translateX(-80.0%)} 100%{transform:translateX(80.0%)}}
/* 레인보우의 안쪽 광택도 은백색으로 통일 (등급색 스윕과 프리즘이 섞여 탁해지는 것 방지) */
.g-UR.foil-rainbow .sheen::before,.g-HR.foil-rainbow .sheen::before,.g-MUR.foil-rainbow .sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:280%;background:linear-gradient(118deg, transparent 8%, rgba(255,255,255,.5) 48%, transparent 92%);background-size:100% 100%;animation:silverSheen_280 2.6s ease-in-out infinite}
.g-UR.foil-rainbow::after,.g-HR.foil-rainbow::after,.g-MUR.foil-rainbow::after{ opacity: .4; }
.g-UR.foil-shine::after,.g-HR.foil-shine::after,.g-MUR.foil-shine::after{ opacity: .85; }
/* ==========================================================================
   NEW 배지 — '도감에 새 칸이 열렸다'
   도감은 노말/홀로/레인보우가 각각 다른 칸(foil_owned)이라{ position: absolute; top: 6px; right: 6px; z-index: 8;
  font-size: 9px; font-weight: 700; line-height: 1.35; letter-spacing: .2px;
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
  background: #ff5a8a; color: #fff; }
@keyframes newPrism{ 0% { background-position: 0 0 } 100% { background-position: 220% 0 } }
@keyframes ctw{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:.9;transform:scale(1)}}
/* ==========================================================================
   팩 티어 = 크루 컬러 램프 (은/파/금 등급색 덮어쓰기)
   index.html 인라인 <style>가 먼저 로드되므로 같은 특이도로 이긴다.
   일반=은은하게 / 고급=색상2 / 프리미엄=색상1→색상2  (가격 오를수록 진해짐)
   ========================================================================== */

/* --- 테두리: 전부 크루 컬러로 통일{
  background:linear-gradient(160deg,var(--c1-b),transparent 45%,var(--c2-b),transparent 92%) !important;
}
/* 연속 뽑기(×4) — 도감작용. 주 버튼보다 눈에 덜 띄게 두되 항상 보이게 한다.
   [why] 10코인 팩을 수십 번 눌러야 도감이 차서 손이 아프다는 요청. */
/* ×4 · ×10 을 한 줄에 나란히 — 팩 카드 세로가 안 늘어난다.
   폰(640px 이하)은 팩 그리드가 1열이라 폭이 넉넉하고{ display:flex; gap:6px; margin-top:6px; }
/* ==========================================================================
   뽑기 컷인 (SAR 이상) — 실제 도감 카드(cardHTML)를 그대로 확대해서 띄운다
   .g-MUR 은 테두리를 box-shadow spread(최대 3.5px)로 그리므로 레이아웃 밖으로
   삐져나간다. cardbox 에 padding 을 줘서 네온 테두리가 안쪽에 들어오게 한다.
   ========================================================================== */
#cutin{position:absolute;left:0;right:0;z-index:400;
 pointer-events:none;opacity:0;visibility:hidden;
 display:flex;align-items:center;justify-content:center;padding:20px}
/* top/height는 JS(placeCutin)가 현재 보이는 화면에 맞춰 설정 */
#cutin.on{opacity:1;visibility:visible;pointer-events:auto;cursor:pointer}
@keyframes ciOut{to{opacity:0;transform:scale(.96)}}
@keyframes ciRing{0%{width:520px;height:520px;opacity:0}30%{opacity:.7}
 100%{width:80px;height:80px;opacity:0}}
@keyframes ciCard{
 0%{opacity:0;transform:scale(2.4) rotateY(-50deg);filter:blur(18px)}
 55%{opacity:1;transform:scale(1) rotateY(0);filter:blur(0)}
 70%{transform:scale(1.05)}
 100%{opacity:1;transform:scale(1)}}
@keyframes ciFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ciSweep{to{transform:translateX(130%)}}
@keyframes ciG{0%,40%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.1)}
 100%{opacity:1;transform:scale(1)}}
@keyframes ciT{0%,50%{opacity:0;letter-spacing:22px}100%{opacity:.9;letter-spacing:10px}}
@keyframes ciTap{0%,100%{opacity:.4}50%{opacity:.9}}
@keyframes ciQuake{0%,100%{transform:translate(0)}20%{transform:translate(-6px,3px)}
 40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,2px)}}
/* ==========================================================================
   미션 탭 (데일리 — 완료시 자동지급{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
@keyframes mClaimPop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
/* ===== 시네마틱 연출 (고등급 뽑기: 게이지 -> 영상 -> 컷인) ===== */
/* top/height는 JS(placeCinema)가 컷인과 같은 방식으로 잡는다 (iframe 안전) */
#cinema{position:absolute;left:0;right:0;z-index:410;
 opacity:0;visibility:hidden;pointer-events:none;
 display:flex;align-items:center;justify-content:center;
 transition:opacity .45s ease}
#cinema.on{opacity:1;visibility:visible;pointer-events:auto;cursor:pointer}
#cinema video{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;display:block;background:#000}
@keyframes cnFlash{0%{opacity:0}35%{opacity:1}100%{opacity:1}}
/* ==========================================================================
   강화 연출 v2 (에너지 링) — 2026-07-17
   사용법: 카드 HTML을 enhWrap(cardHTML,lv) 로 감싸면 끝 (app.js 헬퍼)
   구조:  <div class="cardwrap"> [회전 링] <div class="card">...
            .photo 안에 [enh-fx 이펙트] [enh-badge 뱃지] </div></div>
   - 0강: 아무것도 안 붙음 (기존과 100% 동일)
   - +1~3 실버 뱃지 / +4~6 블루 전기 링+스파크 / +7~9 골드 화염 링+엠버 / +10 MAX 풀가동
   - 링·이펙트 전부 별도 레이어 → 등급 스타일(UR글로우·MUR숨쉬기 등)과 무충돌
   - 작은 그리드(도감 등)에선 wrapper 에 enh-sm 클래스 추가하면 60% 축소
   ========================================================================== */
.cardwrap{position:relative}
.cardwrap .card{position:relative;z-index:2}
/* ── 뱃지 (사진 좌상단 — 우상단 별과 안 겹치게) ── */
.enh-badge{position:absolute;top:6px;left:6px;z-index:8;min-width:30px;height:21px;
 padding:0 7px;border-radius:7px;display:flex;align-items:center;justify-content:center;
 font-size:12px;font-weight:900;font-style:italic;font-variant-numeric:tabular-nums;
 background:rgba(8,6,16,.85);pointer-events:none;letter-spacing:.3px}
.enh-sm .enh-badge{min-width:20px;height:15px;font-size:8.5px;padding:0 4px;top:4px;left:4px;border-radius:5px}
.enh-t1{color:#eef1f6;border:1px solid rgba(215,225,240,.7);text-shadow:0 0 5px rgba(230,238,250,.6)}
.enh-t2{color:#9fd8ff;border:1px solid rgba(110,185,255,.9);
 box-shadow:0 0 10px rgba(70,150,255,.8);text-shadow:0 0 8px rgba(120,190,255,1)}
.enh-t3{color:#ffdf7e;border:1px solid rgba(255,215,115,.95);
 box-shadow:0 0 12px rgba(255,195,70,.9);text-shadow:0 0 9px rgba(255,210,95,1)}
.enh-t4{color:#fff6d8;border:1.5px solid #ffd766;animation:enhBMax 1.4s ease-in-out infinite}
@keyframes enhBMax{
 0%,100%{box-shadow:0 0 10px rgba(255,205,90,.9);text-shadow:0 0 8px rgba(255,215,110,1)}
 50%{box-shadow:0 0 22px rgba(255,215,110,1),0 0 38px rgba(255,185,55,.6);text-shadow:0 0 14px #fff}}
/* ── 회전 에너지 링 (+4부터) ── */
@property --ea{syntax:'<angle>';initial-value:0deg;inherits:false}
.enh-ring{position:absolute;inset:-4px;border-radius:17px;pointer-events:none;z-index:1}
.enh-ring::before{content:"";position:absolute;inset:0;border-radius:17px;
 padding:3px;-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
 animation:enhSpin 2.6s linear infinite}
/* [렉] 회전을 뺐다 (2026-08-23). blur(10~17px) 로 뭉갠 빛은 돌아도 도는 게
   안 보이는데,돌리면 **매 프레임 conic 을 다시 굽고 다시 흐린다.**
   정지하면 한 번 굽고 끝이라 사실상 공짜다. */
.enh-ring::after{content:"";position:absolute;inset:-6px;border-radius:22px;
 filter:blur(10px);opacity:.75;z-index:-1}
@keyframes enhSpin{to{--ea:360deg}}
/* +4~6 블루 전기 링 */
.enh-r2::before,.enh-r2::after{background:conic-gradient(from var(--ea),
 transparent 0%, #2a7fff 8%, #9fd8ff 14%, transparent 24%,
 transparent 50%, #2a7fff 58%, #7fc4ff 64%, transparent 74%)}
.enh-r2::after{opacity:.55}
/* +7~9 골드 화염 링 */
.enh-r3::before,.enh-r3::after{background:conic-gradient(from var(--ea),
 transparent 0%, #ff9a2a 6%, #ffe9a8 13%, #ffb84a 18%, transparent 28%,
 transparent 48%, #ff9a2a 55%, #fff2c8 62%, #ffb84a 67%, transparent 78%)}
.enh-r3::before{animation-duration:2.1s}
.enh-r3::after{opacity:.8}
/* +10 MAX 풀가동 */
.enh-r4::before,.enh-r4::after{background:conic-gradient(from var(--ea),
 #ffb84a 0%, #fff6d8 10%, #ffcf5e 20%, #ff9a2a 32%, #ffe9a8 45%,
 #ffcf5e 58%, #fff6d8 70%, #ff9a2a 84%, #ffb84a 100%)}
.enh-r4::before{animation-duration:1.7s;padding:3.5px}
.enh-r4::after{animation-duration:1.7s;opacity:1;filter:blur(14px)}
.enh-r4{animation:enhMaxBreath 1.7s ease-in-out infinite}
@keyframes enhMaxBreath{0%,100%{opacity:.8}50%{opacity:1}}
.enh-sm .enh-ring{inset:-3px;border-radius:12px}
.enh-sm .enh-ring::before{padding:2px;border-radius:12px}
.enh-sm .enh-ring::after{inset:-4px;filter:blur(6px)}
/* ── 사진 안 이펙트 ── */
.enh-fx{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden;border-radius:inherit}
/* +1~3 은빛 인셋 */
.enh-fx1{box-shadow:inset 0 0 14px rgba(220,230,245,.35), inset 0 0 3px rgba(235,242,252,.5)}
/* +4~6 전기: 인셋 블루 + 스파크 점멸 */
.enh-fx2{box-shadow:inset 0 0 20px rgba(60,140,255,.5), inset 0 0 5px rgba(120,190,255,.6)}
.enh-fx2 i{position:absolute;font-style:normal;font-size:11px;color:#bfe3ff;
 text-shadow:0 0 8px #4a9aff,0 0 3px #fff;opacity:0;animation:enhZap 1.9s linear infinite}
.enh-fx2 i:nth-child(1){top:8%;left:6%;animation-delay:0s}
.enh-fx2 i:nth-child(2){bottom:12%;right:8%;animation-delay:.7s}
.enh-fx2 i:nth-child(3){top:40%;right:4%;animation-delay:1.3s;font-size:9px}
@keyframes enhZap{0%,86%,100%{opacity:0}88%,96%{opacity:1}92%{opacity:.3}}
/* +7~9 화염: 하단 열기 + 엠버 상승 */
.enh-fx3{box-shadow:inset 0 0 22px rgba(255,170,50,.45), inset 0 0 6px rgba(255,215,120,.55)}
.enh-fx3::before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
 background:linear-gradient(0deg, rgba(255,150,40,.4), rgba(255,190,80,.12) 60%, transparent);
 animation:enhHeat 1.6s ease-in-out infinite}
@keyframes enhHeat{0%,100%{opacity:.7}50%{opacity:1}}
.enh-fx3 i,.enh-fx4 i{position:absolute;bottom:4%;font-style:normal;font-size:8px;color:#ffd98a;
 text-shadow:0 0 6px rgba(255,170,50,1);opacity:0;animation:enhEmber 2.1s linear infinite}
.enh-fx3 i:nth-child(1){left:16%;animation-delay:0s}
.enh-fx3 i:nth-child(2){left:52%;animation-delay:.8s;font-size:6px}
.enh-fx3 i:nth-child(3){left:78%;animation-delay:1.4s}
@keyframes enhEmber{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:1}
 100%{transform:translateY(-110px) scale(.5);opacity:0}}
/* +10 화염 풀버전 */
.enh-fx4{box-shadow:inset 0 0 26px rgba(255,185,60,.55), inset 0 0 8px rgba(255,230,160,.65)}
.enh-fx4::before{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
 background:linear-gradient(0deg, rgba(255,160,45,.5), rgba(255,205,95,.16) 55%, transparent);
 animation:enhHeat 1.3s ease-in-out infinite}
.enh-fx4 i{color:#fff2c8;text-shadow:0 0 7px rgba(255,200,80,1),0 0 2px #fff}
.enh-fx4 i:nth-child(1){left:12%;animation-delay:0s}
.enh-fx4 i:nth-child(2){left:34%;animation-delay:.9s;font-size:6px}
.enh-fx4 i:nth-child(3){left:58%;animation-delay:.4s}
.enh-fx4 i:nth-child(4){left:80%;animation-delay:1.5s;font-size:7px}
.enh-fx4 i:nth-child(5){left:46%;animation-delay:1.8s;font-size:5px}
/* 작은 카드: 이펙트 축소 */
.enh-sm .enh-fx2 i{font-size:7px}
.enh-sm .enh-fx3 i,.enh-sm .enh-fx4 i{font-size:5px;animation-name:enhEmberS}
@keyframes enhEmberS{0%{transform:translateY(0);opacity:0}12%{opacity:1}100%{transform:translateY(-52px);opacity:0}}
@media (prefers-reduced-motion: reduce){.enh-ring::before,.enh-ring::after,.enh-r4,.enh-fx2 i,.enh-fx3::before,.enh-fx4::before,.enh-fx3 i,.enh-fx4 i,.enh-t4{animation:none}}
/* ==========================================================================
   강화 연출 확장 — +12~15 (2026-07-25)
   기존 t1(은빛) → t2(블루전기) → t3(골드화염) → t4(골드MAX) 위에
   t5(자수정 초월) → t6(프리즘 각성) 두 단계를 얹는다.
   예전엔 +10 이상이 전부 t4 라 11~15강이 10강과 똑같아 보였다.
   ========================================================================== */

/* ── 뱃지 ── */
.enh-t5{color:#e8d5ff;border:1.5px solid rgba(190,130,255,.95);
 box-shadow:0 0 14px rgba(160,90,255,.9);
 text-shadow:0 0 10px rgba(200,150,255,1);
 animation:enhBAmy 1.5s ease-in-out infinite}
.enh-t6{color:#fff;border:1.5px solid rgba(255,255,255,.9);
 background:linear-gradient(100deg,rgba(255,90,140,.5),rgba(120,170,255,.5),rgba(120,255,200,.5),rgba(255,220,110,.5));
 background-size:300% 100%;
 box-shadow:0 0 18px rgba(255,255,255,.7);
 text-shadow:0 0 8px rgba(255,255,255,1);
 animation:enhBPrism 2.4s linear infinite, enhBMax 1.2s ease-in-out infinite}
@keyframes enhBAmy{0%,100%{box-shadow:0 0 12px rgba(160,90,255,.75)}
 50%{box-shadow:0 0 20px rgba(190,130,255,1)}}
@keyframes enhBPrism{0%{background-position:0% 50%}100%{background-position:300% 50%}}
/* ── 링: +12~13 자수정 초월 ── */
.enh-r5::before,.enh-r5::after{background:conic-gradient(from var(--ea),
 transparent 0%, #7b3ff2 5%, #c78bff 11%, #e9d5ff 16%, #9a5cff 22%, transparent 32%,
 transparent 46%, #7b3ff2 53%, #d7a8ff 60%, #e9d5ff 65%, #9a5cff 71%, transparent 82%)}
.enh-r5::before{animation-duration:1.9s;padding:3.5px}
.enh-r5::after{opacity:.9;filter:blur(13px)}
.enh-r5{animation:enhMaxBreath 1.9s ease-in-out infinite}
/* ── 링: +14~15 프리즘 각성 (최종) ── */
.enh-r6::before,.enh-r6::after{background:conic-gradient(from var(--ea),
 #ff5a8c 0%, #ffb84a 14%, #ffe98a 26%, #7dffc4 40%,
 #5ac8ff 54%, #9a7bff 68%, #ff7bd5 82%, #ff5a8c 100%)}
.enh-r6::before{animation-duration:1.35s;padding:4px}
.enh-r6::after{opacity:1;filter:blur(17px)}
.enh-r6{animation:enhPrismBreath 1.35s ease-in-out infinite}
/* [렉] filter -> opacity (2026-08-23). filter 는 요소 전체를 매 프레임 다시
   훑는다. 빛이 밝아졌다 어두워지는 것은 opacity 로도 똑같이 읽히고 GPU 가 한다. */
@keyframes enhPrismBreath{0%,100%{opacity:.82} 50%{opacity:1}}
/* ── 사진 안 이펙트: +12~13 ── */
.enh-fx5{box-shadow:inset 0 0 28px rgba(150,80,255,.55), inset 0 0 9px rgba(215,168,255,.7)}
.enh-fx5::before{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;
 background:linear-gradient(0deg, rgba(140,70,255,.5), rgba(200,150,255,.16) 55%, transparent);
 animation:enhHeat 1.25s ease-in-out infinite}
.enh-fx5 i{position:absolute;bottom:4%;font-style:normal;font-size:8px;color:#e6d0ff;
 text-shadow:0 0 8px rgba(160,90,255,1),0 0 2px #fff;opacity:0;
 animation:enhEmber 1.9s linear infinite}
.enh-fx5 i:nth-child(1){left:10%;animation-delay:0s}
.enh-fx5 i:nth-child(2){left:28%;animation-delay:.7s;font-size:6px}
.enh-fx5 i:nth-child(3){left:46%;animation-delay:.3s}
.enh-fx5 i:nth-child(4){left:64%;animation-delay:1.2s;font-size:7px}
.enh-fx5 i:nth-child(5){left:82%;animation-delay:1.6s;font-size:5px}
.enh-fx5 i:nth-child(6){left:38%;animation-delay:1.9s;font-size:6px}
/* ── 사진 안 이펙트: +14~15 (최종) ── */
.enh-fx6{box-shadow:inset 0 0 34px rgba(255,255,255,.4), inset 0 0 12px rgba(255,235,255,.55);
 animation:enhPrismInset 2.6s linear infinite}
@keyframes enhPrismInset{
 0%  {box-shadow:inset 0 0 34px rgba(255,120,170,.45), inset 0 0 12px rgba(255,220,240,.6)}
 33% {box-shadow:inset 0 0 34px rgba(120,200,255,.45), inset 0 0 12px rgba(220,240,255,.6)}
 66% {box-shadow:inset 0 0 34px rgba(140,255,200,.45), inset 0 0 12px rgba(225,255,240,.6)}
 100%{box-shadow:inset 0 0 34px rgba(255,120,170,.45), inset 0 0 12px rgba(255,220,240,.6)}}
.enh-fx6::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
 background:linear-gradient(0deg, rgba(255,255,255,.34), rgba(255,235,255,.12) 55%, transparent);
 animation:enhHeat 1.1s ease-in-out infinite}
.enh-fx6 i{position:absolute;bottom:4%;font-style:normal;font-size:8px;color:#fff;
 text-shadow:0 0 9px rgba(255,255,255,1),0 0 4px rgba(255,180,255,1);opacity:0;
 animation:enhEmber 1.6s linear infinite}
.enh-fx6 i:nth-child(1){left:8%;animation-delay:0s}
.enh-fx6 i:nth-child(2){left:24%;animation-delay:.5s;font-size:6px}
.enh-fx6 i:nth-child(3){left:40%;animation-delay:.9s}
.enh-fx6 i:nth-child(4){left:56%;animation-delay:.2s;font-size:7px}
.enh-fx6 i:nth-child(5){left:72%;animation-delay:1.3s;font-size:5px}
.enh-fx6 i:nth-child(6){left:88%;animation-delay:.7s;font-size:6px}
.enh-fx6 i:nth-child(7){left:48%;animation-delay:1.5s;font-size:10px;bottom:auto;top:8%}
/* 작은 카드 축소 */
.enh-sm .enh-fx5 i,.enh-sm .enh-fx6 i{font-size:5px;animation-name:enhEmberS}
.enh-sm .enh-fx6 i:nth-child(7){font-size:7px}
/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce){
  .enh-r5,.enh-r6,.enh-t5,.enh-t6,.enh-fx5::before,.enh-fx6::before,
  .enh-fx5 i,.enh-fx6 i,.enh-fx6{animation:none}
}
@keyframes sheen_260{0%{transform:translateX(-104.6%)} 100%{transform:translateX(104.6%)}}
@keyframes goldSheen_280{0%,100%{transform:translateX(-115.7%);opacity:.8} 50%{transform:translateX(51.4%);opacity:1}}
@keyframes tealSheen_280{0%,100%{transform:translateX(-115.7%);opacity:.8} 50%{transform:translateX(51.4%);opacity:1}}
@keyframes sheen_240{0%{transform:translateX(-99.2%)} 100%{transform:translateX(99.2%)}}
@keyframes holoSheen_280{0%,100%{transform:translateX(-115.7%);opacity:.75} 50%{transform:translateX(51.4%);opacity:1}}
@keyframes silverSheen_280{0%,100%{transform:translateX(-115.7%);opacity:.75} 50%{transform:translateX(51.4%);opacity:1}}
@keyframes prismSlide_250{0%{transform:translateX(-72.0%)} 100%{transform:translateX(72.0%)}}
@keyframes foilShine_220{0%,100%{transform:translateX(-40.9%)} 50%{transform:translateX(-13.6%)}}