/* ===================================================================
   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);
}
.card .sheen { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
/* 미보유(도감에서 흐리게) */
.card.locked { filter: grayscale(0.9) brightness(0.75); opacity: 0.55; box-shadow: none; }
.card.locked .photo::after {
  content: "?"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; z-index: 4;
  font-size: 40px; font-weight: 800; color: rgba(120,120,140,0.5);
}
/* ===== 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, .g-RR.foil-rainbow .sheen { background: linear-gradient(115deg,transparent 42%,rgba(255,255,255,0.4) 50%,transparent 58%); background-size:260% 100%; animation: sheen 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, .g-SR.foil-rainbow .sheen { background: linear-gradient(115deg,transparent 40%,rgba(255,255,255,0.42) 50%,transparent 60%); background-size:260% 100%; animation: sheen 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, .g-SAR.foil-rainbow .sheen {
  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: 280% 100%;
  animation: goldSheen 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, .g-UR.foil-rainbow .sheen {
  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: 280% 100%;
  animation: tealSheen 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 : 시크릿 히든 레어 (딥 버건디/뱀파이어 레드) ===== */
.g-HR { background: linear-gradient(145deg, #2d0011 0%, #640025 50%, #880e4f 100%); border: 2px solid rgba(136, 14, 79, 0.4); }
.g-HR .frame { background: linear-gradient(145deg, #1f000b 0%, #4a001a 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05); }
.g-HR .grade-badge { background: linear-gradient(135deg, #ff5252, #c2185b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; text-shadow: 0 0 4px rgba(255,82,82,0.3); }
.g-HR .stars { color: #ff5252; text-shadow: 0 0 3px rgba(255,0,0,0.5); }
.g-HR .photo { background: #1a0008; border: 1.5px solid #4a001a; }
.g-HR .namebox { background: #110006; background-image: linear-gradient(135deg, #ff4081, #880e4f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; border: 1px solid rgba(136, 14, 79, 0.3); }
.g-HR.foil-shine .sheen, .g-HR.foil-rainbow .sheen { background: linear-gradient(115deg, transparent 35%, rgba(255, 64, 129, 0.25) 50%, transparent 65%); background-size: 240% 100%; animation: sheen 2.6s linear infinite; }
/* ===== 7. MUR : 매트 제트 블랙 + 더블 글로우 테두리 ===== */
.g-MUR {
  background: linear-gradient(140deg, #000000, #0a0a0e, #111118, #0a0a0e, #000000);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 2px #7b2cbf,
    0 0 0 3.5px #2260d0,
    0 0 20px rgba(120,60,220,.6),
    0 0 40px rgba(0,140,255,.25),
    0 16px 44px rgba(0,0,0,.9);
}
.g-MUR .frame {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(180,80,255,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0,160,255,.1) 0%, transparent 50%),
    linear-gradient(140deg, #050505, #0e0e14, #070710);
  box-shadow: inset 0 3px 12px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.05);
}
.g-MUR .grade-badge { background: linear-gradient(90deg, #ff007f, #9b30ff, #00b8ff, #ff007f); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: hologram-shine 3s linear infinite; font-weight: 900; box-shadow: none; }
.g-MUR .stars { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 20px rgba(180,100,255,.4); }
.g-MUR .photo {
  background: #040408;
  border: 1.5px solid rgba(255,255,255,.06);
  box-shadow: inset 0 6px 18px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.04);
}
.g-MUR .namebox { background: transparent; background-image: linear-gradient(90deg, #ff007f, #9b30ff, #00b8ff, #ff007f); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: hologram-shine 3s linear infinite; font-weight: 900; border: 1px solid rgba(255,255,255,.08); box-shadow: none; }
.g-MUR.foil-shine .sheen, .g-MUR.foil-rainbow .sheen {
  background: linear-gradient(118deg,
    transparent 5%,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.4) 45%,
    rgba(180,120,255,.35) 50%,
    rgba(255,255,255,.35) 55%,
    rgba(255,255,255,.03) 75%,
    transparent 90%
  );
  background-size: 280% 100%;
  animation: holoSheen 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; inset: 0; 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: 220% 100%;
  animation: foilShine 3.5s ease-in-out infinite;
}
@keyframes foilShine { 0%,100%{background-position:75% 0} 50%{background-position:25% 0} }
.card.foil-rainbow { overflow: hidden; }
.card.foil-rainbow::before {
  content: ""; position: absolute; inset: 0; 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: 250% 100%;
  mix-blend-mode: color-dodge;
  animation: prismSlide 3.2s linear infinite;
  opacity: .7;
}
.card.foil-rainbow::after {
  content: ""; position: absolute; inset: 0; 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: 220% 100%;
  animation: foilShine 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; }
/* ==========================================================================
   크루 카드박스 (딥박스) + 팩 뒷면 엠블럼
   크루 색상은 인라인 --c1/--c2/--c1-a/--c1-b/--c2-a/--c2-b/--btn 로 주입
   ========================================================================== */
.crew-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
@media(max-width:900px){.crew-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.crew-grid{grid-template-columns:1fr}}

.crew-tile{border-radius:18px;padding:30px 14px 14px;text-align:center;cursor:pointer;
 transition:.3s;background:linear-gradient(180deg,var(--panel2),var(--panel));
 border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden}
.crew-tile::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);
 width:260px;height:200px;background:radial-gradient(ellipse,var(--c1-a),transparent 68%);pointer-events:none}
.crew-tile:hover{border-color:var(--c1-b);box-shadow:0 0 44px -16px var(--c1)}

.cscene{perspective:1000px;height:236px;display:flex;align-items:center;justify-content:center;
 margin-bottom:20px;position:relative}
.cshadow{position:absolute;bottom:16px;left:50%;transform:translateX(-50%) rotateX(74deg);
 width:148px;height:54px;border-radius:50%;
 background:radial-gradient(ellipse,rgba(0,0,0,.78),transparent 70%);filter:blur(6px);transition:.35s}
.crew-tile:hover .cshadow{width:170px;opacity:.75}

.cbox{position:relative;width:146px;height:196px;transform-style:preserve-3d;
 transition:.45s cubic-bezier(.2,.7,.3,1);transform:translateX(-22px) rotateX(-7deg) rotateY(-26deg)}
.crew-tile:hover .cbox{transform:translateX(-22px) translateY(-8px) rotateX(-4deg) rotateY(-17deg)}
.cf{position:absolute;top:0;left:0}

.cfront{width:146px;height:196px;border-radius:7px;overflow:hidden;
 background:radial-gradient(circle at 50% 40%,var(--c1-a) 0%,transparent 62%),
  linear-gradient(168deg,#1a1530 0%,#08060f 58%,var(--c2-a) 128%),#0a0714;
 border:1.5px solid var(--c1-b);
 box-shadow:inset 0 0 34px -12px var(--c1),0 0 0 1px rgba(0,0,0,.6);
 display:flex;flex-direction:column;align-items:center}
.cfront .cinner{position:absolute;inset:7px;border-radius:4px;border:1px solid var(--c2-b);pointer-events:none}
.cfront .cinner::before,.cfront .cinner::after{content:"";position:absolute;width:9px;height:9px;
 border:1.5px solid var(--c1);opacity:.75}
.cfront .cinner::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.cfront .cinner::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.clidline{position:absolute;top:30px;left:0;right:0;height:1px;background:var(--c1-b)}
.clidline::after{content:"";position:absolute;top:-3.5px;left:0;right:0;height:7px;
 background:repeating-linear-gradient(90deg,var(--c1) 0 3px,transparent 3px 7px);opacity:.28}
.clidtxt{position:absolute;top:9px;left:0;right:0;font-size:7px;font-weight:800;
 letter-spacing:3px;color:var(--c2);opacity:.72;z-index:3}
.cgloss{position:absolute;inset:0;z-index:4;pointer-events:none;
 background:linear-gradient(116deg,transparent 30%,rgba(255,255,255,.13) 46%,rgba(255,255,255,.04) 53%,transparent 66%);
 transform:translateX(-18%);transition:.55s}
.crew-tile:hover .cgloss{transform:translateX(18%)}
.cholo{position:absolute;inset:0;pointer-events:none;opacity:.5;
 background:repeating-linear-gradient(112deg,transparent 0 9px,rgba(255,255,255,.03) 9px 10px)}
.cfront .clogo{width:60%;margin-top:50px;z-index:3;position:relative;
 filter:drop-shadow(0 0 16px var(--c1-a)) drop-shadow(0 4px 8px rgba(0,0,0,.75))}
.cfront .cnm{z-index:3;position:relative;margin-top:8px;font-size:15px;font-weight:800;letter-spacing:-.3px;
 background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;
 -webkit-text-fill-color:transparent;background-clip:text}
.cband{position:absolute;bottom:0;left:0;right:0;height:30px;z-index:3;
 background:linear-gradient(90deg,var(--c1),var(--c2));display:flex;align-items:center;justify-content:center;gap:6px}
.cband b{font-size:8.5px;font-weight:800;letter-spacing:1.6px;color:var(--btn)}
.cband i{font-style:normal;font-size:7.5px;font-weight:800;padding:2px 5px;border-radius:3px;
 background:rgba(0,0,0,.32);color:#fff}
.cside{width:40px;height:196px;transform-origin:left center;transform:translateX(146px) rotateY(90deg);
 border-radius:0 6px 6px 0;overflow:hidden;background:linear-gradient(180deg,#0f0c1d,#050409);
 border:1.5px solid var(--c1-b);border-left:0;display:flex;align-items:center;justify-content:center}
.cside::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.cside span{position:relative;z-index:2;writing-mode:vertical-rl;font-size:8px;font-weight:800;
 letter-spacing:3px;color:var(--c1);opacity:.6}
.cbandv{position:absolute;bottom:0;left:0;right:0;height:30px;
 background:linear-gradient(180deg,var(--c1),var(--c2));opacity:.55;z-index:3}
.ctop{width:146px;height:40px;transform-origin:top center;transform:rotateX(90deg);
 border-radius:6px 6px 0 0;overflow:hidden;
 background:linear-gradient(160deg,var(--c1) -10%,#17122b 55%,var(--c2) 150%);
 border:1.5px solid var(--c1-b);border-bottom:0;display:flex;align-items:center;justify-content:center}
.ctop::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32)}
.ctop span{position:relative;z-index:2;font-size:7.5px;font-weight:800;letter-spacing:3px;color:#fff;opacity:.72}
.cspark{position:absolute;z-index:5;pointer-events:none;border-radius:50%;background:#fff;
 box-shadow:0 0 8px 2px var(--c1);opacity:0;animation:ctw 2.6s infinite}
@keyframes ctw{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:.9;transform:scale(1)}}

.crew-tile h3{font-size:18px;font-weight:800;letter-spacing:-.3px;position:relative;
 background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;
 -webkit-text-fill-color:transparent;background-clip:text}
.crew-tile .cmeta{font-size:11px;color:#8a80a8;margin:3px 0 14px;position:relative}
.crew-open{width:100%;padding:12px;border-radius:11px;border:none;cursor:pointer;position:relative;
 font-size:13.5px;font-weight:800;background:linear-gradient(95deg,var(--c1),var(--c2));
 color:var(--btn);transition:.2s}
.crew-open:hover{filter:brightness(1.1)}
.ctag{position:absolute;top:12px;right:12px;z-index:6;font-size:9.5px;font-weight:800;
 padding:4px 9px;border-radius:20px;background:rgba(0,0,0,.5);border:1px solid var(--c1-b);color:var(--c1)}

.crew-tile.locked{filter:grayscale(.3);opacity:.7;cursor:not-allowed}
.crew-tile.locked .crew-open{background:#2b2740;color:#6d6788}
.crew-tile.locked .ctag{color:#9a93b5;border-color:#3a3550}
.crew-tile.locked:hover{box-shadow:none;border-color:rgba(255,255,255,.07)}
.crew-tile.locked:hover .cbox{transform:translateX(-22px) rotateX(-7deg) rotateY(-26deg)}

/* 크루 헤더 (팩 화면) */
.crew-back{background:none;border:1px solid rgba(255,255,255,.12);color:#c9bfe6;
 padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;margin-bottom:12px}
.crew-back:hover{background:rgba(255,255,255,.05)}
.crew-hd{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:14px 18px;border-radius:14px;
 position:relative;overflow:hidden;background:linear-gradient(100deg,var(--c1-a),transparent 70%);
 border:1px solid var(--c1-b)}
.crew-hd::after{content:"";position:absolute;inset:0;
 background:linear-gradient(100deg,transparent 40%,var(--c2-a) 130%);pointer-events:none}
.crew-hd img{width:44px;height:44px;object-fit:contain;position:relative;z-index:2;
 filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.crew-hd .ct{position:relative;z-index:2}
.crew-hd h2{font-size:19px;font-weight:800;letter-spacing:-.3px;
 background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;
 -webkit-text-fill-color:transparent;background-clip:text}
.crew-hd .sub{font-size:11.5px;color:#9a90b5;margin-top:1px}

/* 팩 뒷면 엠블럼 (3장 다 노출)
   기존 index.html 인라인 <style> 의 .pack .stack span 규칙을 이기려면
   반드시 .pack 접두어로 특이도를 맞춰야 한다. */
.pack .pk-stack{position:relative;height:210px;display:flex;align-items:center;
 justify-content:center;margin:14px 0 18px}
.pack .pk-cb{position:absolute;border-radius:12px;overflow:hidden;
 display:flex;align-items:center;justify-content:center;
 background:radial-gradient(circle at 50% 40%,var(--c1-a),#0b0816 74%);
 border:1.5px solid var(--c1-b);transition:.3s}
.pack .pk-cb::before{content:"";position:absolute;inset:6px;border-radius:7px;
 border:1px solid var(--c2-b)}
.pack .pk-cb::after{content:"";position:absolute;inset:0;
 background:linear-gradient(118deg,transparent 36%,rgba(255,255,255,.10) 49%,transparent 62%)}
.pack .pk-cb img{width:56%;position:relative;z-index:2;
 filter:drop-shadow(0 0 10px var(--c1-a)) drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.pack .pk-cb .pk-mk{position:absolute;bottom:9px;left:0;right:0;font-size:8px;font-weight:800;
 letter-spacing:2px;color:var(--c2);opacity:.75;z-index:2}

/* 날개 (좌/우) - 죽이지 않고 살려둔다 */
.pack .pk-cb.l,.pack .pk-cb.r{width:112px;height:158px;opacity:.92;z-index:1;
 box-shadow:0 8px 20px -6px rgba(0,0,0,.85)}
.pack .pk-cb.l{transform:rotate(-15deg) translate(-40px,8px)}
.pack .pk-cb.r{transform:rotate(15deg) translate(40px,8px)}
.pack .pk-cb.l img,.pack .pk-cb.r img{width:52%}
.pack .pk-cb.l .pk-mk,.pack .pk-cb.r .pk-mk{display:none}

/* 중앙 - 더 크고 글로우 */
.pack .pk-cb.m{width:128px;height:180px;z-index:3;
 box-shadow:0 0 30px -6px var(--c1),0 12px 26px -8px rgba(0,0,0,.9)}

.pack:hover .pk-cb.l{transform:rotate(-20deg) translate(-50px,4px)}
.pack:hover .pk-cb.r{transform:rotate(20deg) translate(50px,4px)}
.pack:hover .pk-cb.m{transform:translateY(-5px)}

/* 등급 뱃지: 인라인 style의 색을 그대로 살린다 */
.pack .maxbadge{text-shadow:0 0 8px currentColor}

/* ==========================================================================
   팩 티어 = 크루 컬러 램프 (은/파/금 등급색 덮어쓰기)
   index.html 인라인 <style>가 먼저 로드되므로 같은 특이도로 이긴다.
   일반=은은하게 / 고급=색상2 / 프리미엄=색상1→색상2  (가격 오를수록 진해짐)
   ========================================================================== */

/* --- 테두리: 전부 크루 컬러로 통일, 티어 올라갈수록 진하게 --- */
.pk-normal::before{
  background:linear-gradient(160deg,var(--c1-b),transparent 45%,var(--c2-b),transparent 92%) !important;
}
.pk-advanced::before{
  background:linear-gradient(160deg,var(--c2),var(--c2-a) 40%,var(--c2),var(--c2-a) 90%) !important;
}
.pk-premium::before{
  background:linear-gradient(160deg,var(--c1),var(--c2-a) 38%,var(--c2),var(--c1-a) 92%) !important;
}

/* --- 카드 글로우도 크루 컬러 --- */
.pack.pk-normal{box-shadow:0 0 0 1px var(--c1-a) inset}
.pack.pk-advanced{box-shadow:0 0 24px -10px var(--c2)}
.pack.pk-premium{box-shadow:0 0 34px -10px var(--c1),0 0 0 1px var(--c1-a) inset}

/* --- 제목 --- */
.pk-normal h3{background:none !important;-webkit-text-fill-color:initial !important;color:var(--txt) !important}
.pk-advanced h3{
  background:linear-gradient(120deg,var(--c2),var(--c1)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;
}
.pk-premium h3{
  background:linear-gradient(120deg,var(--c1),var(--c2)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;
}

/* --- 구매 버튼: 가격 오를수록 진해지는 램프 --- */
.pk-normal .buy{
  background:var(--c1-a) !important;
  color:var(--txt) !important;
  box-shadow:inset 0 0 0 1.5px var(--c1) !important;
  font-weight:800 !important;
}
.pk-normal .buy:hover:not(:disabled){background:var(--c1-b) !important;filter:brightness(1.1)}

.pk-advanced .buy{
  background:var(--c2) !important;
  color:var(--btn) !important;
  box-shadow:0 3px 12px -2px var(--c2-a),inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.pk-premium .buy{
  background:linear-gradient(95deg,var(--btn-from,var(--c1)),var(--c2)) !important;
  color:var(--btn) !important;
  box-shadow:0 4px 16px -3px var(--c1),inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.pk-advanced .buy:hover:not(:disabled),
.pk-premium .buy:hover:not(:disabled){filter:brightness(1.08)}

.pack .buy:disabled{
  background:var(--panel2) !important;color:var(--txt2) !important;
  box-shadow:none !important;cursor:not-allowed;
}

/* 도감 크루 선택 칩 */
.crew-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.crew-chip{padding:8px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.12);
 background:rgba(255,255,255,.03);color:#c9bfe6;font-size:12.5px;font-weight:700;cursor:pointer;transition:.2s}
.crew-chip.active{background:var(--cc-a,rgba(242,168,200,.18));border-color:var(--cc,#f2a8c8);color:var(--cc,#f2a8c8)}
.crew-chip:hover{border-color:rgba(255,255,255,.25)}

/* 잠긴 카드 뱃지 (보유중이지만 더는 못 뽑는 카드) */
.lock-badge{position:absolute;top:6px;left:6px;z-index:6;font-size:8.5px;font-weight:800;
 padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.72);color:#c9bfe6;border:1px solid rgba(255,255,255,.18)}

/* 출석 달력: 월 시작 전 빈칸이 44px 높이를 차지해서
   유령 행처럼 보이던 문제. 테두리/배경 없이 높이만 유지하되
   가시적 잔상이 없도록 명시적으로 비운다. */
.at-cell.empty{background:none !important;border:none !important;box-shadow:none !important;
 pointer-events:none;outline:none !important}
.at-cell.empty::after,.at-cell.empty::before{content:none !important}

/* ==========================================================================
   뽑기 카드 뒷면 = 크루 엠블럼
   기존 --pt-* 변수를 크루 색으로 덮어써서 글로우/테두리/오브가 자동 반영됨.
   .flip-back.back-silver/blue/gold 보다 뒤에 와야 이긴다.
   ========================================================================== */
.flip-back.crew-back{
  background:radial-gradient(circle at 50% 40%,var(--c1-a),#0b0816 76%),#0a0714 !important;
  --pt-glow:var(--c1-a);
  --pt-edge:var(--c1-b);
  --pt-text:var(--c2);
  --pt-orb:radial-gradient(circle at 40% 35%,#fff,var(--c1));
  --pt-shadow:var(--c1-a);
  gap:8px;
}
/* 안쪽 테두리 (팩 뒷면과 동일) */
.flip-back.crew-back::before{
  opacity:.6;
  background:radial-gradient(circle at 50% 42%,var(--c1-a),transparent 62%);
}
/* 크루 로고 */
.flip-back.crew-back .cb-logo{
  width:58%;max-height:44%;object-fit:contain;z-index:2;
  filter:drop-shadow(0 0 12px var(--c1-a)) drop-shadow(0 3px 6px rgba(0,0,0,.7));
}
/* 하단 크루 각인 */
.flip-back.crew-back .cb-mark{
  position:absolute;bottom:10px;left:0;right:0;text-align:center;z-index:2;
  font-size:9px;font-weight:800;letter-spacing:2.5px;color:var(--c2);opacity:.75;
}
/* 오브는 조금 작게 (로고가 주인공) */
.flip-back.crew-back .orb{width:24%;}

/* 티어별 강조: 프리미엄일수록 테두리/글로우 진하게 */
.flip-back.crew-back.back-blue{--pt-edge:var(--c2-b);--pt-glow:var(--c2-a)}
.flip-back.crew-back.back-gold{
  --pt-edge:var(--c1);
  box-shadow:inset 0 0 0 2px var(--c1-a),0 0 26px -8px var(--c1);
}

/* ==========================================================================
   도감 미보유 카드 = 크루 로고 실루엣 (시안 C)
   포일 힌트(홀로/레인보우) 제거. 물음표만 노출.
   index.html 인라인 <style>의 고정 보라 배경을 덮어쓴다.
   ========================================================================== */
.dex-back{
  background:linear-gradient(165deg,#171326,#0a0714) !important;
  border:1px solid var(--c1-b,rgba(120,110,240,.4)) !important;
}
.dex-back::before{content:none !important}   /* 기존 보라 글로우 제거 */

.dex-back-inner{
  border:1.5px solid rgba(255,255,255,.10) !important;
  display:flex;align-items:center;justify-content:center;gap:0;
}

/* 로고를 어둡게 눌러서 실루엣으로 */
.dex-back .dex-silhouette{
  position:absolute;width:62%;z-index:1;pointer-events:none;
  filter:grayscale(1) brightness(.40);
  opacity:.45;
}

/* 물음표가 실루엣 위에 뜨도록 */
.dex-back .dex-q{
  position:relative;z-index:3;
  width:40px;height:40px;
  border:2px solid var(--c1-b,rgba(255,255,255,.5));
  color:var(--c1,rgba(255,255,255,.85));
  background:rgba(8,6,18,.55);
  backdrop-filter:blur(1px);
}

/* 포일 힌트는 더 이상 쓰지 않음 */
.dex-back .dex-foil-hint{display:none !important}


/* ==========================================================================
   뽑기 컷인 (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}
#cutin.dismiss{animation:ciOut .26s ease-in forwards}
@keyframes ciOut{to{opacity:0;transform:scale(.96)}}
#cutin .ci-bg{position:absolute;left:0;right:0;top:-2000px;bottom:-2000px;
 background:rgba(3,2,8,.96)}
#cutin .ci-vig{position:absolute;left:0;right:0;top:-2000px;bottom:-2000px;pointer-events:none;
 background:radial-gradient(ellipse at center 50%,transparent 20%,rgba(0,0,0,.85) 60%)}
#cutin .ci-r{position:absolute;left:50%;top:50%;border-radius:50%;
 border:1px solid var(--ci);opacity:0;transform:translate(-50%,-50%);pointer-events:none}
#cutin.on .ci-r1{animation:ciRing 1.4s cubic-bezier(.16,1,.3,1) .05s}
#cutin.on .ci-r2{animation:ciRing 1.4s cubic-bezier(.16,1,.3,1) .18s}
#cutin.on .ci-r3{animation:ciRing 1.4s cubic-bezier(.16,1,.3,1) .31s}
@keyframes ciRing{0%{width:520px;height:520px;opacity:0}30%{opacity:.7}
 100%{width:80px;height:80px;opacity:0}}

/* 정중앙 스테이지 */
#cutin .ci-stage{position:relative;z-index:2;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:18px;pointer-events:none}

/* 카드: 크게. padding 6px = MUR box-shadow spread(3.5px) 흡수 */
#cutin .ci-cardbox{position:relative;width:min(74vw,300px);padding:6px;opacity:0}
@media(max-height:720px){#cutin .ci-cardbox{width:min(56vw,232px)}}
@media(max-height:560px){#cutin .ci-cardbox{width:min(44vw,186px)}}
/* 등장 후 그 자리에 머문다 (사라지는 키프레임 없음) */
#cutin.on .ci-cardbox{animation:ciCard 1.15s cubic-bezier(.14,1,.3,1) forwards,
                                 ciFloat 3.4s ease-in-out 1.15s infinite}
@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)}}
#cutin .ci-cardbox::after{content:"";position:absolute;inset:0;border-radius:20px;z-index:-1;
 box-shadow:0 0 70px var(--ci),0 24px 60px rgba(0,0,0,.85)}
#cutin .ci-sweep{position:absolute;inset:6px;border-radius:14px;overflow:hidden;z-index:9;pointer-events:none}
#cutin .ci-sweep::before{content:"";position:absolute;inset:0;
 background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.5) 48%,transparent 62%);
 transform:translateX(-130%)}
#cutin.on .ci-sweep::before{animation:ciSweep 1.4s ease-in-out .5s}
@keyframes ciSweep{to{transform:translateX(130%)}}

#cutin .ci-g{font-size:clamp(30px,7vw,46px);font-weight:900;letter-spacing:4px;opacity:0;line-height:1;
 background:linear-gradient(180deg,#fff 25%,var(--ci) 95%);
 -webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 0 22px var(--ci))}
#cutin.on .ci-g{animation:ciG 1.15s ease-out forwards}
@keyframes ciG{0%,40%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.1)}
 100%{opacity:1;transform:scale(1)}}
#cutin .ci-t{font-size:clamp(8.5px,2.2vw,10px);font-weight:800;letter-spacing:10px;
 color:var(--ci);opacity:0;margin-top:-8px}
#cutin.on .ci-t{animation:ciT 1.15s ease-out forwards}
@keyframes ciT{0%,50%{opacity:0;letter-spacing:22px}100%{opacity:.9;letter-spacing:10px}}

/* "탭해서 계속" 힌트 — 등장 애니메이션 끝나야 뜸 */
#cutin .ci-tap{position:absolute;bottom:max(28px,6vh);left:0;right:0;text-align:center;
 font-size:12px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:2px;
 opacity:0;transition:opacity .3s;pointer-events:none}
#cutin.armed .ci-tap{opacity:1;animation:ciTap 1.6s ease-in-out infinite}
@keyframes ciTap{0%,100%{opacity:.4}50%{opacity:.9}}

body.ci-quake{animation:ciQuake .45s}
@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)}}

/* ==========================================================================
   미션 탭 (데일리 — 완료시 자동지급, 체크리스트)
   ========================================================================== */
.mission-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.mission-head h3{font-size:19px;font-weight:800}
.mission-head .cnt{font-size:11px;color:#8a80a8}
.tab-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff4d6d;margin-left:4px;vertical-align:middle}

.msec{font-size:12px;font-weight:800;color:var(--accent2);letter-spacing:1px;
 margin:18px 0 10px;display:flex;align-items:center;gap:7px}
.msec::before{content:"";width:4px;height:14px;border-radius:2px;background:linear-gradient(var(--accent),var(--accent2))}

.mission{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);
 border-radius:14px;padding:14px 15px;margin-bottom:10px;position:relative;overflow:hidden;transition:.3s}
.mission.done{border-color:rgba(90,200,130,.4)}
.mission.soon{opacity:.6}
.mission .m-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.m-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
 font-size:19px;flex:none;background:rgba(124,140,240,.15);border:1px solid rgba(124,140,240,.3)}
.mission.done .m-icon{background:rgba(90,200,130,.15);border-color:rgba(90,200,130,.4)}
.m-title{flex:1;min-width:0}
.m-title b{font-size:14px;font-weight:700;display:block}
.m-title span{font-size:11.5px;color:#8a80a8}
.m-reward{font-size:13px;font-weight:800;color:#f0c040;white-space:nowrap}

.m-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:6px}
.m-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .5s}
.mission.done .m-fill{background:linear-gradient(90deg,#3fbf7f,#5ce89a)}
.m-meta{display:flex;justify-content:space-between;font-size:11px;color:#8a80a8}

.m-checks{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.m-chk{display:flex;align-items:center;gap:9px;font-size:12.5px}
.m-chk .box{width:19px;height:19px;border-radius:6px;border:1.5px solid rgba(255,255,255,.2);flex:none;
 display:flex;align-items:center;justify-content:center;font-size:12px}
.m-chk.on .box{background:#3fbf7f;border-color:#3fbf7f;color:#04160c}
.m-chk .lbl{flex:1;color:#c9c2dd}
.m-chk.on .lbl{color:#ece8f5}
.m-chk .cnt{font-size:11.5px;color:#8a80a8;font-variant-numeric:tabular-nums}
.m-chk.on .cnt{color:#5ce89a;font-weight:700}

.m-badge{position:absolute;top:0;right:0;font-size:9px;font-weight:800;padding:3px 9px;
 border-bottom-left-radius:9px;letter-spacing:.3px}
.m-badge.wait{background:rgba(124,140,240,.2);color:var(--accent2)}
.m-badge.got{background:rgba(90,200,130,.2);color:#5ce89a}
.m-badge.soon{background:rgba(255,255,255,.08);color:#8a80a8}

.m-claim{margin-top:9px;padding:7px 10px;border-radius:9px;font-size:12px;font-weight:700;text-align:center;
 background:rgba(90,200,130,.12);color:#5ce89a;border:1px solid rgba(90,200,130,.3)}
.m-claim.pop{animation:mClaimPop .5s ease-out}
@keyframes mClaimPop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
.m-reward.note{color:#8a80a8;font-size:11px;font-weight:600}

/* ==========================================================================
   인트로: 대표카드 플립 (크루 로고 뒷면 -> 앞면 카드) + 크루 톤
   ========================================================================== */
.iv-left{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.iv-brand{display:flex;align-items:center;gap:12px}
.iv-brand .iv-crest{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 14px var(--iv-glow,rgba(242,168,200,.5)))}
.iv-brand .iv-crest-fallback{font-size:40px;filter:drop-shadow(0 0 12px var(--iv-glow,rgba(242,168,200,.6)))}
.iv-brand-txt{display:flex;flex-direction:column;line-height:1.12}
.iv-brand-eng{font-size:11px;font-weight:800;letter-spacing:2.5px;color:var(--iv-c2,#b9a3ec);opacity:.9}
.iv-brand-kr{font-size:20px;font-weight:900;color:#fff;text-shadow:0 0 14px var(--iv-glow,rgba(242,168,200,.5))}
.iv-flip{position:relative;width:210px;height:294px;perspective:1400px;cursor:pointer}
.iv-flip .iv-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden;
  transition:transform .7s cubic-bezier(.4,.2,.2,1)}
.iv-flip .iv-back{transform:rotateY(0)}
.iv-flip .iv-front{transform:rotateY(180deg)}
.iv-flip.flipped .iv-back{transform:rotateY(-180deg)}
.iv-flip.flipped .iv-front{transform:rotateY(0)}
/* 뒷면 = 크루 엠블럼 (뽑기 뒷면과 동일 톤) */
.iv-back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(circle at 50% 40%,var(--iv-c1a),#0b0816 76%),#0a0714;
  border:2px solid var(--iv-c1);box-shadow:0 0 40px var(--iv-glow),inset 0 0 0 2px rgba(255,255,255,.05)}
.iv-back::before{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,var(--iv-c1a),transparent 62%)}
.iv-back img{width:56%;max-height:42%;object-fit:contain;z-index:2;filter:drop-shadow(0 0 12px var(--iv-glow))}
.iv-back .iv-mk{position:absolute;bottom:10px;font-size:9px;font-weight:800;letter-spacing:2.5px;color:var(--iv-c2);opacity:.75;z-index:2}
/* 앞면 = 실제 카드 사진 */
.iv-front{border:2px solid var(--iv-c1);box-shadow:0 0 40px var(--iv-glow)}
.iv-front img{width:100%;height:100%;object-fit:cover}
.iv-front .iv-bd{position:absolute;top:8px;left:8px;background:var(--iv-c1);color:#1a1020;font-size:9px;font-weight:900;padding:2px 7px;border-radius:5px;z-index:3}
/* 앞면이 안내(카드 없을 때) */
.iv-front.iv-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(circle at 50% 40%,var(--iv-c1a),#0b0816 76%),#0a0714;padding:16px;text-align:center}
.iv-front.iv-empty .txt{font-size:12px;color:#c9bfe6;font-weight:700;line-height:1.5}
.iv-front.iv-empty .sub{font-size:10.5px;color:#8a80a8}

.iv-repbtn{font-size:11px;font-weight:700;color:var(--iv-c2);background:rgba(255,255,255,.05);
  border:1px solid var(--iv-c1);border-radius:8px;padding:6px 12px;cursor:pointer}
.iv-repbtn:hover{background:rgba(255,255,255,.1)}

/* 대표카드 톤을 우측 패널 강조색에도 반영 */
.iv-panel{--iv-c1:#b388ff;--iv-c2:#d9c4ff;--iv-c1a:rgba(179,136,255,.24);--iv-glow:rgba(179,136,255,.45)}
.iv-enter{background:linear-gradient(95deg,var(--iv-c1),var(--iv-c2))!important}

/* "오늘 하루 보지 않기" 체크박스 */
.iv-once{display:flex;align-items:center;gap:7px;justify-content:center;cursor:pointer;
  font-size:11.5px;color:#9a90b5;user-select:none;margin-top:8px}
.iv-once input{width:15px;height:15px;accent-color:var(--iv-c1);cursor:pointer}

/* ==========================================================================
   개인코드 발급 완료 박스 (닉네임 가입 -> 코드 + 복사)
   ========================================================================== */
.code-issued{margin-top:14px;padding:16px;border-radius:14px;
  background:var(--panel2);border:1px solid var(--accent);}
.code-issued .ci-head{font-size:15px;font-weight:800;color:var(--accent2);margin-bottom:8px}
.code-issued .ci-warn{font-size:12px;line-height:1.6;color:var(--txt2);margin-bottom:12px}
.code-issued .ci-warn b{color:var(--txt)}
.ci-code-row{display:flex;gap:8px;align-items:stretch}
.ci-code{flex:1;display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;font-weight:800;letter-spacing:2px;
  padding:12px;border-radius:10px;background:var(--bg);color:var(--txt);
  border:1px dashed var(--line);user-select:all}
.ci-copy{flex:none;padding:0 18px;border-radius:10px;border:none;cursor:pointer;
  background:var(--accent);color:#fff;font-weight:800;font-size:13px}
.ci-copy:hover{filter:brightness(1.1)}
.ci-pending{margin-top:8px;font-size:11.5px;color:var(--txt2);text-align:center}