/* 유물 전시관 — 어두운 전시실, 진열장마다 위에서 떨어지는 핀 조명 */
.hcats{display:flex;gap:6px;overflow-x:auto;padding:8px 2px 10px;scrollbar-width:thin}
.hcats .bt{flex:none;min-width:70px;line-height:1.25;padding:7px 9px}
.hcats .bt small{display:block;font-size:10px;opacity:.75;font-weight:400}
.hroom{position:relative;background:linear-gradient(180deg,#050407 0%,#0b090e 30%,#120e14 100%);border:1px solid #2a2430;padding:0 10px 14px;box-shadow:inset 0 0 60px #000}
.hsign{display:flex;align-items:baseline;gap:10px;justify-content:center;padding:12px 0 10px;border-bottom:1px solid #2a2430;margin-bottom:12px;color:#d8c9a0}
.hsign b{font-size:15px;letter-spacing:3px}.hsign span{font-size:11.5px;color:#8a8496}
.hwall{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px}
@media (min-width:700px){.hwall{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1000px){.hwall{grid-template-columns:repeat(6,1fr)}}
.case{position:relative;aspect-ratio:3/4.2;background:linear-gradient(180deg,#0a080c 0%,#131017 62%,#1a151c 100%);border:1px solid #2e2834;border-top-color:#3a3340;overflow:hidden;cursor:pointer;transition:border-color .15s}
.case:hover{border-color:#c9a45a}
.case .lamp{position:absolute;top:0;left:50%;width:16px;height:7px;margin-left:-8px;background:linear-gradient(#3a3440,#17131c);border-radius:0 0 5px 5px;z-index:3;box-shadow:0 3px 8px 1px rgba(255,233,176,.85)}
.case .beam{position:absolute;left:50%;top:5px;width:150%;height:80%;transform:translateX(-50%);pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(255,238,196,.5),rgba(255,228,170,.2) 42%,rgba(255,220,160,.04) 72%,transparent 80%);clip-path:polygon(47% 0,53% 0,90% 100%,10% 100%)}
.case canvas{position:absolute;left:15%;top:17%;width:70%;aspect-ratio:1;z-index:2;filter:drop-shadow(0 7px 5px rgba(0,0,0,.85))}
.case .ped{position:absolute;left:9%;right:9%;bottom:19%;height:8%;z-index:1;background:linear-gradient(180deg,#4a3e40 0%,#2a2228 22%,#141017 100%);border-top:1px solid #7a6a56;box-shadow:0 -10px 16px -4px rgba(255,226,170,.3)}
.case .glass{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.07) 43%,rgba(255,255,255,.02) 49%,transparent 56%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.case .plate{position:absolute;left:7%;right:7%;bottom:4%;z-index:5;font-size:10.5px;line-height:1.25;text-align:center;padding:2px 2px 3px;color:#1a1410;font-weight:700;
  background:linear-gradient(180deg,#e0c078,#a8823a 60%,#7a5a22);border:1px solid #5a4210;border-radius:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 3px #000}
.case .plate em{display:block;font-style:normal;font-size:8.5px;letter-spacing:1px;color:#5a1a10;line-height:1}
.case.off .beam{opacity:.16}.case.off .lamp{box-shadow:0 2px 5px rgba(255,233,176,.2)}.case.off .ped{box-shadow:none}
.case.off .plate{background:linear-gradient(180deg,#4a4450,#2a2630);color:#8a8496;border-color:#17131c}
.rdlg{text-align:center;max-width:420px}
.rdlg .case.big{width:min(240px,62vw);margin:0 auto 10px;cursor:default}.rdlg .case.big:hover{border-color:#2e2834}
.rdlg h3{margin:4px 0 2px;font-size:18px;color:#f0d9a0}.rdlg p{margin:6px 0;font-size:13.5px;line-height:1.6;color:#d8d2e0}
.rdlg .rst{color:#ffcf5a;letter-spacing:3px;font-size:16px}.rdlg .rst small{letter-spacing:0;font-size:11px;color:#8a8496;margin-left:6px}

/* ── 공적부 ── */
.feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;margin-top:8px}
.feat{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--ln);background:rgba(0,0,0,.25);border-left:3px solid #4a3a2a}
.feat.rdy{border-color:var(--gold);border-left-color:var(--gold3);background:rgba(201,164,90,.1)}
.feat.got{opacity:.5}
.feat .fn{flex:1;min-width:0}.feat .fn b{letter-spacing:1px;margin-right:6px}.feat .fn p{margin:3px 0 5px;font-size:12.5px;color:var(--mu)}
.feat .fbar{height:5px;background:#120e15;border:1px solid #2c212b;margin-bottom:2px}.feat .fbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold3))}
.feat .fr{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}

/* ── 보물전 ── */
.good.dim{opacity:.55}
.ndot{position:absolute;right:10px;top:6px;width:9px;height:9px;border-radius:50%;background:#ff5a4a;box-shadow:0 0 6px #ff5a4a}
.attg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:6px 0}
.attg i{font-style:normal;font-size:10.5px;line-height:1.35;text-align:center;padding:4px 2px;min-height:58px;border:1px solid #4a3a2a;background:rgba(0,0,0,.25);color:var(--mu);overflow:hidden}
.attg i b{display:block;color:var(--gold3);font-size:12px}.attg i.big{border-color:var(--gold)}.attg i.got{opacity:.35}.attg i.now{background:rgba(201,164,90,.18);border-color:var(--gold3);color:var(--tx)}
.spg{display:flex;gap:4px;overflow-x:auto;padding:4px 0 8px;margin:6px 0}
.spg i{font-style:normal;flex:0 0 78px;font-size:10.5px;line-height:1.35;text-align:center;border:1px solid #4a3a2a;background:rgba(0,0,0,.25);color:var(--mu)}
.spg i b{display:block;background:#2c212b;color:var(--mu);padding:2px 0}.spg i.on b{background:var(--red);color:#fff3da}.spg i.big{border-color:var(--gold)}
.spg i span{display:block;padding:4px 2px;min-height:44px}.spg i span.pd{border-top:1px dashed #8a6a2e;color:var(--gold3)}.spg i span.lk{opacity:.4}.spg i span.g{text-decoration:line-through;opacity:.4}

/* ── 뽑기 연출 (gx*) ── */
.gx{position:fixed;inset:0;z-index:90;background:radial-gradient(ellipse at 50% 45%,#1c1420 0,#07060a 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);color:var(--tx);overflow:hidden;user-select:none}
.gx .gxfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.gx .gxdim{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .35s;pointer-events:none;z-index:1}.gx.dimmed .gxdim{opacity:.72}
.gx .gxtitle{position:absolute;top:18px;left:0;right:0;text-align:center;letter-spacing:8px;color:var(--gold3);font-size:17px;text-shadow:0 2px 0 #000}
.gx .gxbag{position:absolute;left:50%;top:45%;width:120px;height:120px;margin:-60px 0 0 -60px;opacity:0;z-index:2}
.gx.p1 .gxbag{opacity:1;animation:gxshake 1.25s cubic-bezier(.3,0,.9,.6) both}
.gx .gxbag b{position:absolute;inset:14px 6px 0;border-radius:46% 46% 40% 40%;background:radial-gradient(circle at 38% 30%,#a9435a,#5a1524 62%,#2a0a12);box-shadow:0 0 0 2px #c9a45a inset,0 0 44px var(--top),0 0 110px var(--top)}
.gx .gxbag .gxknot{position:absolute;left:50%;top:2px;width:44px;height:26px;margin-left:-22px;border-radius:50% 50% 30% 30%;background:#c9a45a;box-shadow:0 0 0 2px #5a4420 inset;z-index:1}
.gx .gxbag .gxray{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px;border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0 12deg,var(--top) 12deg 14deg);opacity:.28;-webkit-mask:radial-gradient(circle,#000 0,transparent 68%);mask:radial-gradient(circle,#000 0,transparent 68%);animation:gxspin 3s linear infinite}
@keyframes gxspin{to{transform:rotate(360deg)}}
@keyframes gxshake{0%{transform:scale(.4) rotate(0);opacity:0}15%{transform:scale(1) rotate(0);opacity:1}30%{transform:scale(1) rotate(-7deg)}42%{transform:rotate(7deg)}54%{transform:rotate(-10deg) scale(1.04)}66%{transform:rotate(10deg) scale(1.08)}78%{transform:rotate(-13deg) scale(1.13)}90%{transform:rotate(13deg) scale(1.2)}100%{transform:scale(1.7) rotate(0);opacity:0}}
.gx.p2:before{content:"";position:absolute;inset:0;background:var(--top);animation:gxflash .55s ease-out both;pointer-events:none;z-index:4}
@keyframes gxflash{0%{opacity:.7}100%{opacity:0}}
.gx.quake{animation:gxquake .45s linear}
@keyframes gxquake{0%,100%{transform:none}20%{transform:translate(-7px,4px)}40%{transform:translate(6px,-5px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,5px)}}
.gx .gxgrid{position:relative;z-index:2;display:grid;gap:10px;grid-template-columns:repeat(5,minmax(0,118px));justify-content:center;width:min(680px,94vw);perspective:900px}
.gx.n1 .gxgrid{grid-template-columns:minmax(0,190px)}
.gx .gxc{aspect-ratio:3/4.3;opacity:0;transform:translateY(60px) scale(.3);transition:transform .45s cubic-bezier(.2,1.3,.4,1),opacity .25s;transition-delay:calc(var(--i)*45ms);position:relative}
.gx .gxc.deal{opacity:1;transform:none}
.gx .gxin{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.gx .gxc.on .gxin{transform:rotateY(180deg)}
.gx .gxback,.gx .gxfront{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3px}
.gx .gxback{background:var(--chilbo,none),linear-gradient(160deg,#3a1420,#1a0a10);border:1px solid var(--gold2);box-shadow:inset 0 0 0 4px #17121a,inset 0 0 0 5px #5a4420,0 4px 14px #000}
.gx .gxback:after{content:"寶";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;color:#8a6a2e}
.gx .gxfront{transform:rotateY(180deg);background:linear-gradient(180deg,#efe6d2,#d8ccb0);color:#2a2018;border:2px solid var(--gc);box-shadow:0 0 18px var(--gc),0 4px 14px #000;display:flex;flex-direction:column;align-items:center;padding:6px 4px;text-align:center;overflow:hidden}
.gx .gxfront canvas{width:74%;aspect-ratio:1;background:radial-gradient(circle at 50% 30%,#3a3040,#120e15);border:1px solid #5a4420}
.gx .gxfront b{font-size:12.5px;margin-top:4px;line-height:1.2}.gx .gxfront span{font-size:10px;color:#6a5a44}.gx .gxfront em{font-style:normal;font-size:10.5px;color:#8a2a34;font-weight:700}
.gx.n1 .gxfront b{font-size:17px}.gx.n1 .gxfront span,.gx.n1 .gxfront em{font-size:13px}
.gx .gxnew{position:absolute;right:4px;top:4px;width:26px;height:26px;border-radius:3px;background:#a3231b;color:#fff3da;font-style:normal;font-size:15px;line-height:26px;transform:rotate(8deg) scale(0);box-shadow:0 0 0 1px #5a100c}
.gx .gxc.on .gxnew{animation:gxstamp .3s .35s cubic-bezier(.2,2,.5,1) forwards}
@keyframes gxstamp{from{transform:rotate(-20deg) scale(2.4);opacity:0}to{transform:rotate(8deg) scale(1);opacity:1}}
.gx .gxc.charge{z-index:5}.gx .gxc.charge .gxback{animation:gxcharge .9s ease-in both;border-color:#ffcf5a}
@keyframes gxcharge{0%{box-shadow:0 0 0 #ffcf5a;transform:none}100%{box-shadow:0 0 60px 18px #ffcf5a,0 0 140px 50px rgba(255,207,90,.5);transform:scale(1.16)}}
.gx .gxc.on[style*="ffcf5a"]{z-index:5}.gx .gxc.on[style*="ffcf5a"] .gxfront{animation:gxgold 1.6s ease-in-out infinite alternate}
@keyframes gxgold{from{box-shadow:0 0 18px #ffcf5a,0 4px 14px #000}to{box-shadow:0 0 46px 8px #ffcf5a,0 4px 14px #000}}
.gx .gxc.on[style*="c78bff"]:before{content:"";position:absolute;left:35%;right:35%;bottom:100%;height:60vh;background:linear-gradient(0deg,rgba(199,139,255,.55),transparent);animation:gxpillar .9s ease-out both;pointer-events:none}
@keyframes gxpillar{from{opacity:1;transform:scaleX(2.2)}to{opacity:0;transform:scaleX(.2)}}
.gx .gxbig{position:absolute;left:0;right:0;top:12%;text-align:center;font-size:34px;letter-spacing:10px;color:#ffe9a8;text-shadow:0 0 24px #ffcf5a,0 3px 0 #000;opacity:0;pointer-events:none;z-index:6}
.gx .gxbig small{display:block;font-size:14px;letter-spacing:14px;color:#ffcf5a}
.gx .gxbig.on{animation:gxbig 1.5s ease-out both}
@keyframes gxbig{0%{opacity:0;transform:scale(2.2)}18%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.gx .gxbar{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:7}
@media (max-width:560px){.gx .gxgrid{gap:6px}.gx .gxfront b{font-size:10.5px}.gx .gxfront span{display:none}.gx .gxbig{font-size:22px;letter-spacing:5px}}
@media (max-height:480px){.gx .gxgrid{grid-template-columns:repeat(10,minmax(0,76px));width:96vw;gap:5px}.gx.n1 .gxgrid{grid-template-columns:minmax(0,130px)}.gx .gxfront b{font-size:10px}.gx .gxfront span{display:none}}