/* ─────────────────────────────────────────────────────────────
   라원쿠지 리뉴얼 v1 (2026-09) — "홉비샵 쇼케이스 위의 쿠지 코너"
   app.css 뒤에 붙는다. 토큰을 먹빛/황동/인주홍으로 바꾸고, 종이(paper)는
   티켓·등급표·결과지에만 남긴다. 이 파일 하나를 빼면 예전 화면으로 돌아간다.
   ───────────────────────────────────────────────────────────── */
:root{
  --paper:#0E0C0B; --paper-2:#14110F; --surface:#171412; --surface-2:#1F1B18; --line:#2A2521; --line-strong:#3A332D;
  --ink:#F3EDE2; --ink-2:#D9CFC0; --muted:#A89B88; --muted-2:#7A6F63;
  --red:#C8102E; --red-2:#9C0B22; --red-soft:rgba(200,16,46,.16); --red-glow:rgba(200,16,46,.38);
  --gold:#B8912B; --gold-2:#E2C776; --gold-soft:rgba(226,199,118,.14);
  --black:#0B0908; --black-2:#141110;
  --ok:#4CC38A; --ok-soft:rgba(76,195,138,.14); --warn:#D9A441; --warn-soft:rgba(217,164,65,.14); --danger:#E8695C; --danger-soft:rgba(232,105,92,.14);
  --code:#221D1A; --shadow:0 12px 34px rgba(0,0,0,.45);
  /* 손에 잡히는 것만 종이색 */
  --tk-paper:#F4EFE4; --tk-paper-2:#E9E2D3; --tk-ink:#1A1512; --tk-mute:#6B6156; --tk-line:#C9BFAF;
}
body{background:var(--paper);color:var(--ink)}
::selection{background:rgba(226,199,118,.35)}

/* ── 헤더/탭: 먹빛 통일, 금선만 남김 ── */
.topbar{background:#0B0908;border-bottom-color:#2A2521;box-shadow:inset 0 -1px 0 rgba(226,199,118,.25)}
.tabs{background:#100D0C;border-bottom-color:#2A2521}
.tabs a{color:#A89B88}.tabs a.on{color:#fff;border-color:var(--red)}
.account .lnk{color:#C6B9A4}
.footer{background:#0B0908;border-top-color:#2A2521}
.footer-links a{color:#E8DCC6}

/* 테스트 운영 공지: 헤더 밖 문서 흐름에 배치해 구매 화면을 가리지 않는다. */
.test-notice{margin:0 0 1.25rem;padding:1.2rem 1.4rem;background:#1F1B18;border:1px solid var(--gold);border-left:4px solid var(--gold-2);border-radius:12px;color:var(--ink);overflow-wrap:anywhere}
.test-notice-heading{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-bottom:.65rem}
.test-notice-label{flex:none;padding:.2rem .55rem;border:1px solid var(--gold);border-radius:4px;font-size:.7rem;font-weight:800;color:var(--gold-2);letter-spacing:.03em}
.test-notice h2{margin:0;font-size:1.15rem;line-height:1.4;color:var(--ink)}
.test-notice-body{font-size:.9rem;line-height:1.75;color:var(--ink-2)}
.test-notice-body p{margin:0 0 .35rem}
.test-notice-body .test-notice-important{color:var(--gold-2)}
.test-notice-body .test-notice-thanks{margin-bottom:0}
.test-notice-link{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;margin-top:.8rem;padding:.55rem .85rem;border:1px solid var(--gold);border-radius:7px;font-size:.85rem;font-weight:700;line-height:1.5;color:var(--gold-2);text-align:center}
.test-notice-link:hover{background:var(--gold-soft);border-color:var(--gold-2);color:var(--ink)}
.test-notice-link:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.test-notice-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:640px){.test-notice{padding:1rem;margin-bottom:1rem}.test-notice-heading{gap:.5rem}.test-notice h2{font-size:1.02rem}.test-notice-body{font-size:.85rem;line-height:1.7}.test-notice-link{display:flex;width:100%;font-size:.8rem}}

/* ── 공통 컴포넌트 ── */
.btn{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.btn:hover{border-color:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.btn-primary{background:linear-gradient(180deg,#E63950,#C8102E);border-color:#C8102E;color:#fff;box-shadow:0 8px 22px var(--red-glow)}
.btn-primary:hover{background:linear-gradient(180deg,#F04A60,#D2122F);border-color:#D2122F}
.btn-gold{background:linear-gradient(180deg,#F0D68A,#B8912B);border-color:#9B7A1E;color:#2A1F05;text-shadow:none}
.btn-ghost{background:transparent}
.card{background:var(--surface);border-color:var(--line)}
.badge{border-color:var(--line-strong);color:var(--muted)}
.badge.open{background:rgba(76,195,138,.16);color:var(--ok)}
.badge.soldout{background:#2A2521;color:var(--gold-2)}
.badge.brand{background:var(--red-soft);color:#FF9BA8}
.badge.draft,.badge.closed{background:var(--code);color:var(--muted)}
.alert{background:var(--surface);border-color:var(--line-strong)}
.tablewrap{border-color:var(--line);background:var(--surface)}
th{background:var(--surface-2);color:var(--muted)}
th,td{border-bottom-color:var(--line)}
.grade{color:#FF6B7D}.grade.low{color:var(--muted)}
.form input[type=text],.form input[type=password],.form input[type=number],.form input[type=date],.form input[type=tel],.form input[type=email],.form select,.form textarea,.qty,.pr-jump input{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.eyebrow{color:var(--gold-2)}.eyebrow::before{background:var(--gold)}
.sec-head{border-bottom-color:var(--line-strong)}
.modal{background:var(--surface);border-color:var(--line-strong);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.modal-actions{background:var(--surface);border-top-color:var(--line-strong)}
.consent{background:rgba(217,164,65,.10);border-color:rgba(217,164,65,.45)}
.party-notice,.buy-odds,.broker-note{background:var(--surface-2);border-color:var(--line-strong)}
.odds-list li{border-bottom-color:var(--line)}
.odds-head{margin:.4rem 0 .5rem;padding:.45rem .6rem;border-radius:7px;background:var(--tk-hl,rgba(255,196,0,.12));border:1px solid var(--line);font-size:.82rem}
.odds-head b{color:var(--gold);font-size:1.05rem;font-family:var(--mono)}
.lightbox img{background:#0E0C0B}
.toast{background:#F3EDE2;color:#0E0C0B;border-color:var(--gold)}
.welcome .wl-item{background:var(--surface-2);border-color:var(--line-strong)}
.welcome .wl-item .ic{background:#0B0908;color:var(--gold-2);border:1px solid var(--line-strong)}
.fchip{background:var(--surface);border-color:var(--line-strong);color:var(--muted)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#0E0C0B;box-shadow:none}
.fairbar{background:var(--surface);border-color:var(--line-strong)}
.party-strip{background:var(--surface);border-color:var(--line);color:var(--muted)}
.party-strip b{color:var(--ink-2)}
.strip{background:var(--surface);border-color:var(--line)}
.emptycard{background:var(--surface);border-color:var(--line-strong)}
.q-list{background:var(--surface-2);border-color:var(--line)}
.q-list li{border-bottom-color:var(--line)}
.q-list li.cur{background:rgba(76,195,138,.12)}
.q-list li.me{background:rgba(226,199,118,.12)}
.kc-status{background:rgba(14,12,11,.85);color:var(--ink);border-color:rgba(255,255,255,.18)}
.kc-board::before{height:4px}
.kc-stub{background:var(--surface-2);border-color:var(--line-strong)}
.kc-stub::before,.kc-stub::after{background:var(--surface);border-color:var(--line-strong)}
.kc-circle{background:var(--ink);color:var(--paper)}
.kc-circle span{color:#5C5248}
.kc-sec-h{border-bottom-color:var(--line-strong)}
.kc-links a{color:var(--muted)}.kc-links a:hover{color:var(--gold-2)}
.notice-box{background:var(--surface);border-color:var(--line-strong)}
.kc-bar{background:var(--surface);border:1px solid var(--line-strong);border-bottom:0;box-shadow:0 -14px 40px rgba(0,0,0,.5)}
.sel-box::before{height:3px}
.sel-nums span{background:var(--red-soft);color:#FF9BA8}
.pill{background:var(--gold-2);color:#2A1F05}
.set-thumb .pct{background:rgba(14,12,11,.85)}
.hash,pre,code{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}
.locker-item{background:var(--surface);border-color:var(--line)}
.locker-item img,.locker-item .ph{background:var(--code)}
.w-row{background:var(--surface-2);border-color:var(--line)}
.wal-card{background:var(--surface);border-color:var(--line-strong)}
.cmp-table th,.cmp-table td{border-color:var(--line-strong)}
.cmp-table tr>th:first-child{background:var(--surface-2)}
.info-table th{background:var(--surface-2)}
.pb-wrap{background:var(--surface)}
.pb-rankchip{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}
.roster span{background:var(--surface-2);border-color:var(--line-strong)}
pre.roster-text{background:var(--surface-2);border-color:var(--line-strong)}
.prize-line input{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.admin-nav{border-bottom-color:var(--line-strong)}
.admin-nav a.on,.admin-nav a:hover{background:var(--ink);color:var(--paper)}
.legal h2{border-bottom-color:var(--line-strong)}
.stat{background:var(--surface-2);border-color:var(--line-strong)}
.hband,.hero,.featured,.prod,.pin-card,.bigcard,.tb,.step3,.s4,.wal-card,.fee-note,.vc-body,.social-row{background:var(--surface);border-color:var(--line-strong)}
.qbar{background:var(--surface);border-color:var(--line)}
.qchip{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink-2)}
.chip{background:var(--surface-2);border-color:var(--line-strong)}
a.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.also-th{background:var(--surface-2);border-color:var(--line)}
.bar{background:var(--code)}
.lu-bar{background:var(--code)}
.prob-list .barw{background:var(--code)}

/* ── 홈: 쿠지 카드 v2 (등급 스트립 · 대기 pill · 랭킹) ── */
.grid-3{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.set-card{background:var(--surface);border-color:var(--line);border-radius:16px}
.set-card:hover{border-color:var(--gold);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.set-card::after{display:none}
.set-thumb{aspect-ratio:4/3;background:#000}
.set-thumb .rank{position:absolute;left:0;top:0;width:42px;height:42px;background:var(--red);color:#fff;font-family:var(--mono);font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center;border-bottom-right-radius:14px;z-index:1}
.set-thumb .rank~.corner{left:calc(42px + .5rem)}
.set-thumb .wait{position:absolute;right:.55rem;bottom:.55rem;background:rgba(14,12,11,.78);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.22rem .6rem;font-size:.72rem;color:var(--ink)}
.set-thumb .wait b{color:var(--ok);font-family:var(--mono)}
.set-thumb .pct{display:none}
.set-body{padding:.75rem .85rem .9rem;gap:.5rem}
.set-title{font-size:.95rem;min-height:2.6em}
.set-strip{display:flex;gap:4px}
.set-strip div{flex:0 0 calc((100% - 16px) / 5);min-width:0;text-align:center}   /* 상품 수와 상관없이 한 칸 = 5분의 1 (2개뿐인 판이 칸이 커져 카드 크기가 달라졌다) */
.set-strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#000;border:1px solid var(--line-strong);display:block}
.set-strip .ph{display:block;width:100%;aspect-ratio:1;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-strong)}
.set-strip small{display:block;font-family:var(--mono);font-size:.6rem;color:var(--muted-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-strip small b{color:var(--gold-2);font-weight:600}
.set-strip .x img{filter:grayscale(1) brightness(.4)}
.set-strip .x small b{color:#FF6B7D;text-decoration:line-through}
.set-strip .last img{border-color:var(--gold)}
.set-strip .last small{color:var(--gold-2)}
.set-meta{padding-top:.2rem;color:var(--muted)}
.set-meta b{color:var(--gold-2);font-family:var(--mono);font-size:1rem}
.set-price{color:var(--ink)}
.bar i{background:linear-gradient(90deg,#E63950,var(--red),var(--gold-2))}
.set-seller{color:var(--muted-2)}

/* LIVE 피드 카드 */
.livefeed{margin-top:1.2rem}
.livefeed .lf-h{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--muted);margin-bottom:.55rem}
.livefeed .lf-h .live-tag{font-size:.62rem}
.livefeed .lf-h .stats{margin-left:auto;font-family:var(--mono);font-size:.78rem;color:var(--muted-2)}
.livefeed .lf-h .stats b{color:var(--ink)}
.lf-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.55rem}
.lf{display:flex;gap:.55rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.5rem .6rem;min-width:0;text-decoration:none;color:inherit}
.lf:hover{border-color:var(--gold)}
.lf img,.lf .ph{width:42px;height:42px;border-radius:8px;object-fit:cover;background:#000;flex:none;border:1px solid var(--line-strong)}
.lf .ph{display:grid;place-items:center;font-family:var(--mono);font-size:.62rem;color:var(--muted-2)}
.lf .b{min-width:0}
.lf .g{font-family:var(--mono);font-weight:700;font-size:.72rem;color:var(--gold-2)}
.lf .g.a{color:#FF6B7D}
.lf .g.last{color:var(--gold-2)}
.lf .n{font-size:.78rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--ink)}
.lf .w{font-size:.68rem;color:var(--muted-2);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf.new{animation:lfIn .5s ease-out}
@keyframes lfIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:1000px){.lf-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.lf-row{grid-template-columns:repeat(2,minmax(0,1fr))}.lf .n{font-size:.74rem}}

/* ── 세트 상세: 등급표 포스터 ── */
.poster{background:var(--tk-paper);color:var(--tk-ink);border-radius:16px;padding:1.1rem 1.15rem 1rem;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.poster::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.022) 3px 4px);pointer-events:none}
.poster>*{position:relative}
.poster-h{display:flex;align-items:center;gap:.8rem;border-bottom:3px solid var(--tk-ink);padding-bottom:.6rem;margin-bottom:.8rem;flex-wrap:wrap}
.poster-h .k{background:var(--tk-ink);color:var(--tk-paper);font-weight:900;font-size:.72rem;padding:.3rem .55rem;border-radius:4px;letter-spacing:.1em;flex:none}
.poster-h h2{font-size:1.05rem;font-weight:900;letter-spacing:-.02em;color:var(--tk-ink);border:0;padding:0;min-width:0;flex:1}
.poster-h .p{font-family:var(--mono);font-weight:700;font-size:.85rem;color:var(--tk-ink);white-space:nowrap}
.poster-h .hint{flex-basis:100%;font-size:.74rem;color:var(--tk-mute)}
/* 상위상 묶음 확률 — 개별 0.3%보다 이 숫자가 손님이 실제로 보는 값이다 */
.poster-h .topodds{flex-basis:100%;font-size:.8rem;font-weight:800;color:var(--tk-ink);background:var(--tk-hl,rgba(255,196,0,.14));border:1px solid var(--tk-line);border-radius:6px;padding:.4rem .6rem;margin-top:.35rem}
.poster-h .topodds b{color:var(--gold);font-size:1rem}
.odds-sum{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--tk-hl,rgba(255,196,0,.1));border:1px solid var(--tk-line);border-radius:10px;padding:.8rem 1rem;margin:.6rem 0 .2rem}
.odds-sum .os-big{display:flex;flex-direction:column;line-height:1.1;flex:none}
.odds-sum .os-big b{font-size:2rem;font-weight:900;color:var(--gold);font-family:var(--mono)}
.odds-sum .os-big span{font-size:.72rem;color:var(--tk-mute);font-weight:700}
.odds-sum p{margin:0;flex:1;min-width:14rem}
.pgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem}
.pz{background:#fff;border:1px solid #D9D2C4;border-radius:8px;padding:.45rem;position:relative;cursor:pointer;transition:transform .12s,box-shadow .15s;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;gap:.3rem}
.pz:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.pz:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.pz img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:4px;display:block}
.pz .noimg{width:100%;aspect-ratio:1;display:grid;place-items:center;background:#F1ECE1;color:#A89B88;font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;border-radius:4px}
.pz .g{position:absolute;left:-1px;top:-1px;background:var(--red);color:#fff;font-weight:900;font-size:.7rem;padding:.25rem .5rem;border-radius:8px 0 8px 0;z-index:1;letter-spacing:.02em}
.pz .g.lo{background:var(--tk-ink)}
.pz .g.last{background:linear-gradient(180deg,#F0D68A,#B8912B);color:#2A1F05}
/* '라스트원 상위상 포함 AH' 는 길어서 좁은 카드에서 세 줄로 접혀 사진을 가렸다 — 글자를 줄이고 두 줄까지만 (2026-10-27) */
.pz .g.last{max-width:calc(100% - .4rem);line-height:1.2;letter-spacing:0}
@media (max-width:560px){.pz .g.last{font-size:.6rem;padding:.2rem .38rem}}
.pz .n{font-size:.72rem;font-weight:700;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--tk-ink)}
.pz .q{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 .35rem;font-family:var(--mono);font-size:.7rem;color:var(--tk-mute)}
.pz .q>span{white-space:nowrap}
.pz .q .pct{margin-left:auto}   /* 하위상처럼 장수가 길면(629/1177장) 퍼센트가 붙지 않게 다음 줄 오른쪽으로 */
.pz .q b{color:var(--red);font-size:.86rem}
.pz .q .pct{font-weight:700;color:var(--tk-ink)}
.pz.out{opacity:.42}
.pz.out .q b{color:var(--tk-mute);text-decoration:line-through}
.pz.last-one{border-color:var(--gold);background:#FFF9E6}
.pz.last-one .q .pct{color:var(--gold)}
.pz.last-one .q>span{white-space:normal;word-break:keep-all}   /* '마지막 종이를 뜯은 분께'는 문장이라 줄바꿈 허용 (장수 칸만 nowrap) */
.poster-f{margin-top:.7rem;display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;font-size:.68rem;color:var(--tk-mute);font-family:var(--mono)}
.poster-f a{color:var(--tk-ink);text-decoration:underline}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.pz{padding:.35rem}.pz .n{font-size:.66rem}.poster{padding:.8rem .8rem .7rem;border-radius:12px}.poster-h h2{font-size:.92rem}}

/* 상품 확률 팝업 */
.odds-modal{max-width:560px;padding:0;overflow:hidden}
.odds-modal::before{display:none}
.om-art{background:radial-gradient(70% 70% at 50% 40%,rgba(226,199,118,.22),rgba(226,199,118,0) 70%),#0E0C0B;padding:1.4rem 1.4rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;position:relative}
.om-art img{width:min(260px,60vw);aspect-ratio:1;object-fit:contain;background:#fff;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.om-art .g{position:absolute;left:1rem;top:1rem;background:var(--red);color:#fff;font-weight:900;padding:.3rem .7rem;border-radius:6px;font-size:.85rem}
.om-art .g.lo{background:#3A332D}.om-art .g.last{background:linear-gradient(180deg,#F0D68A,#B8912B);color:#2A1F05}
.om-art .x{position:absolute;right:.8rem;top:.8rem;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1rem}
.om-body{padding:1rem 1.4rem 1.3rem;display:flex;flex-direction:column;gap:.7rem}
.om-body h3{font-size:1.15rem;line-height:1.3}
.om-kv{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.om-kv div{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:.6rem .5rem;text-align:center}
.om-kv b{display:block;font-family:var(--mono);font-size:1.35rem;color:var(--gold-2);font-weight:600;line-height:1.1}
.om-kv b.hot{color:#FF6B7D}
.om-kv span{font-size:.68rem;color:var(--muted)}
.om-bar{height:10px;border-radius:5px;background:var(--code);overflow:hidden}
.om-bar i{display:block;height:100%;background:linear-gradient(90deg,#E63950,var(--red),var(--gold-2));border-radius:5px;transition:width .5s}
.om-note{font-size:.76rem;color:var(--muted);line-height:1.55}
.om-note b{color:var(--ink)}

/* ── 종이 고르기: 먹빛 판 위의 종이 ── */
.pickroom{background:var(--paper)}
.pr-head{background:#0B0908;box-shadow:inset 0 -1px 0 rgba(226,199,118,.3)}
.pr-bar{background:var(--surface);border-bottom-color:var(--line-strong)}
.pr-tab{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink-2)}
.pr-tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pr-tab.on small{color:#7A5F12}
.pr-foot{background:var(--surface);border-top-color:var(--line-strong);box-shadow:0 -14px 40px rgba(0,0,0,.5)}
.pr-amount{color:var(--gold-2)}
.ticket-grid,.pr-body .ticket-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.ticket{aspect-ratio:1;border-radius:9px;background:var(--tk-paper);color:var(--tk-ink);font-size:.9rem;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09),0 1px 0 rgba(0,0,0,.3);border:1px solid #D9D2C4}
.ticket::before{height:0;border:0;background:none}
.ticket::after{background:none}
.ticket:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.45),0 0 0 2px var(--gold-2)}
.ticket.sold{background:var(--surface-2);color:var(--muted-2);border-color:var(--line);box-shadow:none;text-decoration:line-through}
.ticket.sold::after{background:none}
.ticket.hold{background:rgba(111,168,255,.16);color:#8FBBFF;border-color:rgba(111,168,255,.5);box-shadow:none}
.ticket.hold::before{background:none}
.ticket.mine{background:linear-gradient(180deg,#F0D68A,#B8912B);color:#2A1F05;border-color:var(--brass,#B8912B);box-shadow:0 0 0 3px rgba(226,199,118,.35),0 8px 18px rgba(0,0,0,.4)}
.ticket.mine::before,.ticket.mine::after{background:none}
.legend span::before{background:var(--tk-paper);border-color:#D9D2C4}
.legend .sold::before{background:var(--surface-2);border-color:var(--line);border-style:solid}
.legend .hold::before{background:rgba(111,168,255,.4);border-color:rgba(111,168,255,.6)}
.legend .mine::before{background:var(--gold-2);border-color:var(--gold)}
@media (max-width:640px){.ticket-grid,.pr-body .ticket-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:6px}.ticket{font-size:.8rem}}

/* ── 뜯기 화면 (전면) ──
   전쿠 방식: 상단에 뽑을 수 있는 상품을 확률과 함께 부채꼴로, 가운데에 종이 한 장 크게.
   여러 장이면 한 장씩 차례로. 뜯기면 상품이 팝업으로 튀어나온다. */
.rvscreen{position:fixed;inset:0;z-index:var(--z-modal);background:
  radial-gradient(60% 45% at 50% 0%,rgba(200,16,46,.28),rgba(200,16,46,0) 70%),
  radial-gradient(50% 40% at 50% 100%,rgba(226,199,118,.16),rgba(226,199,118,0) 70%),#0B0908;
  display:none;flex-direction:column;align-items:center;overflow:auto;overflow-x:hidden;padding:1.2rem 1rem 2rem}   /* 옆 장식(::after right:-100px)이 모바일에 가로 스크롤을 만들었다 */
.rvscreen.show{display:flex}
.rvscreen::before,.rvscreen::after{content:"";position:absolute;width:260px;height:180px;border-radius:26px;background:rgba(255,255,255,.03);transform:rotate(-18deg);pointer-events:none}
.rvscreen::before{left:-90px;top:8%}.rvscreen::after{right:-100px;bottom:10%;transform:rotate(22deg)}
.rv-top{display:flex;align-items:center;gap:.8rem;width:100%;max-width:980px;color:var(--muted);font-size:.82rem}
.rv-top .x{margin-left:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;width:38px;height:38px;border-radius:50%;font-size:1rem}
.rv-title{margin-top:1.4rem;font-weight:900;font-size:1.35rem;letter-spacing:-.02em;color:var(--gold-2);text-align:center;display:flex;align-items:center;gap:.6rem;text-wrap:balance}
.rv-title::before,.rv-title::after{content:"✦";font-size:.9rem;color:var(--gold)}
.rv-sub{font-size:.8rem;color:var(--muted);margin-top:.25rem;font-family:var(--mono)}
/* 부채꼴 상품 */
.rv-fan{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:1.1rem 0 .2rem;min-height:190px;width:100%;max-width:980px;padding:0 .5rem}
.rv-fan .fc{position:relative;width:126px;flex:none;margin:0 -10px;background:#fff;border-radius:10px;padding:5px 5px 6px;box-shadow:0 14px 34px rgba(0,0,0,.55);border:2px solid #E5DECF;transform-origin:50% 120%;transition:transform .3s,opacity .3s,box-shadow .3s,width .34s .16s,margin .34s .16s,padding .34s .16s;color:var(--tk-ink);text-align:center;
  transform:rotate(var(--rot,0deg)) translateY(var(--lift,0px))}
.rv-fan .fc:hover{transform:rotate(var(--rot,0deg)) translateY(calc(var(--lift,0px) - 14px)) scale(1.06);z-index:20}
/* 뜯을수록 아닌 카드가 떨어져 나간다 · 정답만 남아 튀어오른다 */
.rv-fan .fc.gone{transform:rotate(var(--rot,0deg)) translateY(calc(var(--lift,0px) + 46px)) scale(.55);opacity:0;pointer-events:none;width:0;margin:0;padding:0;border-width:0;overflow:hidden}
.rv-fan .fc.win{transform:rotate(0deg) translateY(-26px) scale(1.16);z-index:30;border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,199,118,.55),0 0 40px 10px rgba(226,199,118,.35),0 20px 50px rgba(0,0,0,.6);animation:fcwin .6s cubic-bezier(.2,.9,.3,1.3)}
@keyframes fcwin{0%{transform:rotate(0deg) translateY(0) scale(1)}60%{transform:rotate(0deg) translateY(-34px) scale(1.24)}100%{transform:rotate(0deg) translateY(-26px) scale(1.16)}}
.rv-fan .fc img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:6px;display:block}
.rv-fan .fc .noimg{width:100%;aspect-ratio:1;display:grid;place-items:center;background:#F1ECE1;color:#A89B88;font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;border-radius:6px}
.rv-fan .fc .g{position:absolute;left:-2px;top:-2px;background:var(--red);color:#fff;font-weight:900;font-size:.66rem;padding:.22rem .45rem;border-radius:10px 0 8px 0}
.rv-fan .fc .g.lo{background:var(--tk-ink)}
.rv-fan .fc.top{border-color:var(--gold);box-shadow:0 0 0 2px rgba(226,199,118,.35),0 16px 40px rgba(0,0,0,.6)}
.rv-fan .fc .pct{display:block;font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--tk-ink);margin-top:.3rem;line-height:1}
.rv-fan .fc .cnt{display:block;font-family:var(--mono);font-size:.6rem;color:var(--tk-mute);margin-top:.15rem}
.rv-fan .fc.out{opacity:.35;filter:grayscale(1)}
/* 종이 한 장 */
.rv-stage{position:relative;width:min(560px,94vw);margin:1.2rem 0 .8rem;perspective:1200px}
.rv-tk{position:relative;width:100%;aspect-ratio:1.62/1;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.7);background:var(--tk-paper)}
.rv-tk .in{position:absolute;inset:0;background:var(--tk-paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:1rem;color:var(--tk-ink)}
.rv-tk .in .g{font-size:5rem;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--red)}
.rv-tk .in .g small{font-size:1.6rem;vertical-align:.9em;margin-left:.1rem}
.rv-tk .in .nm{font-size:1rem;font-weight:800;text-align:center;line-height:1.3;max-width:90%}
.rv-tk .in img{width:88px;height:88px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid #E5DECF;position:absolute;right:1rem;bottom:1rem}
.rv-tk .in .no{position:absolute;left:1rem;top:.8rem;font-family:var(--mono);font-size:.8rem;color:var(--tk-mute)}
/* 겉장: 붉은 띠 + 큰 번호 + 반짝이는 절취선 */
.rv-tk .cv{position:absolute;inset:0;background:var(--tk-paper);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;z-index:2;will-change:clip-path;display:flex;flex-direction:column}
.rv-tk .cv.dragging{cursor:grabbing}
.rv-tk .cv .hd{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem .4rem;font-family:var(--mono);font-size:.74rem;color:var(--tk-mute)}
.rv-tk .cv .hd b{color:var(--tk-ink)}
.rv-tk .cv .band{background:var(--red);color:#fff;padding:.55rem 1rem;font-weight:900;font-size:.82rem;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center}
.rv-tk .cv .band small{font-family:var(--mono);font-weight:600;opacity:.9}
.rv-tk .cv .num{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:clamp(3.6rem,13vw,5.6rem);letter-spacing:.04em;color:var(--tk-ink);line-height:1}
.rv-tk .cv .num small{font-size:.28em;color:var(--tk-mute);margin-right:.35em;font-weight:600;align-self:center;margin-top:.5em}
.rv-tk .cv .ft{border-top:2px dashed var(--tk-line);padding:.45rem 1rem;font-family:var(--mono);font-size:.68rem;color:var(--tk-mute);display:flex;justify-content:space-between}
.rv-tk .cv .grip{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);width:26px;height:74px;border-radius:8px;border:3px solid var(--tk-ink);background:rgba(0,0,0,.06);display:grid;place-items:center}
.rv-tk .cv .grip::after{content:"";width:6px;height:40px;border-radius:3px;background:var(--tk-ink)}
.rv-tk .cv.done{transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .45s;transform:translateX(130%) rotate(8deg);opacity:0;pointer-events:none}
.rv-tk .edge{position:absolute;top:-6px;bottom:-6px;width:8px;left:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,var(--gold-2) 20%,#fff 50%,var(--gold-2) 80%,transparent);box-shadow:0 0 18px 6px rgba(226,199,118,.7),0 0 40px 12px rgba(226,199,118,.35);border-radius:4px}
.rv-tk .edge.on{opacity:1}
.rv-tk .edge i{position:absolute;left:50%;width:6px;height:6px;border-radius:50%;background:#FFE9A8;box-shadow:0 0 8px 2px rgba(255,233,168,.9);animation:spark .7s ease-out infinite}
.rv-tk .edge i:nth-child(1){top:12%;animation-delay:0s}.rv-tk .edge i:nth-child(2){top:38%;animation-delay:.18s}.rv-tk .edge i:nth-child(3){top:61%;animation-delay:.36s}.rv-tk .edge i:nth-child(4){top:84%;animation-delay:.54s}
@keyframes spark{0%{transform:translate(-50%,0) scale(1);opacity:1}100%{transform:translate(calc(-50% + 22px),-14px) scale(.2);opacity:0}}
.rv-tk.open{animation:tkpop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes tkpop{0%{transform:scale(.97)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
.rv-help{text-align:center;font-size:.9rem;color:var(--muted);line-height:1.7;max-width:36ch}
.rv-help b{color:var(--ink)}
.rv-row{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap;justify-content:center}
/* 뜯은 종이 모음 */
.rv-done{display:flex;gap:.4rem;margin-top:1rem;flex-wrap:wrap;justify-content:center;max-width:980px}
.rv-done span{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.25rem .6rem .25rem .3rem;font-size:.74rem;color:var(--ink)}
.rv-done img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:#000}
.rv-done b{font-family:var(--mono);color:var(--gold-2)}
/* 상품 팝업 (도파민) */
.prizepop{position:fixed;inset:0;z-index:calc(var(--z-modal) + 5);display:none;place-items:center;padding:1rem;
  background:radial-gradient(60% 60% at 50% 45%,rgba(226,199,118,.30),rgba(14,12,11,.92) 75%)}
.prizepop.show{display:grid}
.prizepop .pp{position:relative;width:min(460px,94vw);background:var(--surface);border:1px solid var(--line-strong);border-radius:22px;padding:1.4rem 1.4rem 1.3rem;text-align:center;box-shadow:0 40px 100px rgba(0,0,0,.8);animation:ppIn .55s cubic-bezier(.2,.9,.3,1.25)}
@keyframes ppIn{0%{transform:scale(.6) translateY(30px);opacity:0}100%{transform:none;opacity:1}}
.prizepop .pp.top{border-color:var(--gold);box-shadow:0 0 0 4px rgba(226,199,118,.25),0 40px 100px rgba(0,0,0,.8)}
.prizepop .rays{position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(226,199,118,.0) 0 8%,rgba(226,199,118,.18) 8% 10%,rgba(226,199,118,0) 10% 18%,rgba(226,199,118,.18) 18% 20%,rgba(226,199,118,0) 20% 28%,rgba(226,199,118,.18) 28% 30%,rgba(226,199,118,0) 30% 38%,rgba(226,199,118,.18) 38% 40%,rgba(226,199,118,0) 40% 48%,rgba(226,199,118,.18) 48% 50%,rgba(226,199,118,0) 50% 58%,rgba(226,199,118,.18) 58% 60%,rgba(226,199,118,0) 60% 68%,rgba(226,199,118,.18) 68% 70%,rgba(226,199,118,0) 70% 78%,rgba(226,199,118,.18) 78% 80%,rgba(226,199,118,0) 80% 88%,rgba(226,199,118,.18) 88% 90%,rgba(226,199,118,0) 90% 100%);animation:rays 14s linear infinite;pointer-events:none;border-radius:50%;z-index:-1;opacity:.8}
.prizepop .pp.top .rays{opacity:1}
@keyframes rays{to{transform:rotate(360deg)}}
.prizepop .eb{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;color:var(--gold)}
.prizepop .gb{display:inline-block;margin-top:.45rem;background:var(--red);color:#fff;font-weight:900;font-size:1.05rem;padding:.3rem .9rem;border-radius:8px}
.prizepop .gb.lo{background:#3A332D}
.prizepop .gb.last{background:linear-gradient(180deg,#F0D68A,#B8912B);color:#2A1F05}
.prizepop img{width:min(300px,68vw);aspect-ratio:1;object-fit:contain;background:#fff;border-radius:16px;margin:.9rem auto .7rem;display:block;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.prizepop .noimg{width:min(300px,68vw);aspect-ratio:1;display:grid;place-items:center;background:var(--surface-2);border-radius:16px;margin:.9rem auto .7rem;font-family:var(--mono);color:var(--muted-2);letter-spacing:.2em}
.prizepop h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.02em}
.prizepop .no{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-top:.3rem}
.prizepop .acts{display:flex;gap:.5rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
/* 버튼은 같은 키·같은 몫으로 (자랑하기가 '다음 종이 뜯기' 옆에서 작아 보였다). 좁으면 줄을 바꾼다 */
.prizepop .acts>.btn{flex:1 1 140px;min-height:50px;padding:.7rem 1rem;font-size:1rem;border-radius:12px}
@media (max-width:640px){.prizepop .acts>.btn{flex-basis:120px;padding:.65rem .4rem;font-size:.92rem;white-space:nowrap;letter-spacing:-.02em}}
.prizepop .lo1{margin-top:.8rem;background:linear-gradient(135deg,#FFF6DA,#F5E4B0);color:#2A1F05;border-radius:10px;padding:.6rem .8rem;font-size:.85rem;font-weight:800}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:22px}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:cf 1.6s ease-in forwards}
@keyframes cf{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(520px) rotate(720deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.rv-tk .edge i,.prizepop .rays,.confetti i,.prizepop .pp,.rv-tk.open,.lf.new{animation:none}}
@media (max-width:640px){
  .rv-fan .fc{width:96px;margin:0 -8px;padding:4px}
  .rv-fan .fc .pct{font-size:.8rem}
  .rv-title{font-size:1.1rem;margin-top:1rem}
  .rv-tk .in .g{font-size:3.6rem}
  .rv-tk .in img{width:64px;height:64px}
  .prizepop .pp{padding:1.1rem 1rem 1rem}
  .prizepop h3{font-size:1.1rem}
}

/* ── 뜯기 v2: 종이 더미 · 양방향 톱니 찢기 · 잡는 탭 ── */
.rv-stage{padding-top:calc(var(--stack,0) * 9px)}
.rv-tk{transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .3s}
.rv-tk.behind{position:absolute;left:0;top:0;width:100%;pointer-events:none;
  transform:translateY(calc(var(--k) * -9px)) translateX(calc(var(--k) * 6px)) rotate(calc(-1.5deg + var(--k) * 1.4deg)) scale(calc(1 - var(--k) * .022));
  filter:brightness(calc(1 - var(--k) * .12))}
.rv-tk.behind .in,.rv-tk.behind .edge,.rv-tk.behind .fringe,.rv-tk.behind .hand{visibility:hidden}
.rv-tk.cur{position:relative}
.rv-tk.fly{transform:translate(60vw,-30vh) rotate(24deg) scale(.7)!important;opacity:0;pointer-events:none;transition:transform .5s ease-in,opacity .45s}
.rv-stage.many::after{content:"";position:absolute;left:8px;right:-8px;top:8px;bottom:-8px;border-radius:14px;border:1px dashed rgba(244,239,228,.25);pointer-events:none;z-index:0}
/* 안쪽은 다 찢기기 전까지 봉인 무늬만. 결과(등급·상품명)는 open 뒤에 떠오르고, 이미지는 팝업에서만 보여준다 */
.rv-tk .in .g,.rv-tk .in .nm{opacity:0;transform:translateY(8px);transition:opacity .35s ease .15s,transform .35s ease .15s}
.rv-tk.open .in .g,.rv-tk.open .in .nm{opacity:1;transform:none}
.rv-tk .in img{display:none}
.rv-tk .in .seal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  font-size:5.2rem;font-weight:900;line-height:1;color:rgba(26,21,18,.10);letter-spacing:-.04em;pointer-events:none;
  background:repeating-linear-gradient(-35deg,transparent 0 22px,rgba(26,21,18,.035) 22px 24px)}
.rv-tk .in .seal small{font-size:1.6rem;vertical-align:.9em;margin-left:.1rem}
.rv-tk .in .seal i{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;color:rgba(26,21,18,.28);margin-top:.6rem}
.rv-tk.open .in .seal{opacity:0;transition:opacity .3s}
/* 겉장이 왼쪽으로 찢겨 날아갈 때 */
.rv-tk .cv.done.done-l{transform:translateX(-130%) rotate(-8deg)}
/* 양쪽 잡는 탭 — 어느 쪽이든 잡고 옆으로 */
.rv-tk .cv .grip{display:none}
.rv-tk .cv .tab{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:82px;border-radius:10px;border:3px solid var(--tk-ink);background:rgba(0,0,0,.05);display:grid;place-items:center;transition:background .15s}
.rv-tk .cv .tab.l{left:.7rem}.rv-tk .cv .tab.r{right:.7rem}
.rv-tk .cv .tab i{width:6px;height:44px;border-radius:3px;background:var(--tk-ink)}
.rv-tk .cv:hover .tab,.rv-tk .cv.dragging .tab{background:rgba(200,16,46,.12);border-color:var(--red)}
.rv-tk .cv.dragging .tab i{background:var(--red)}
/* 손가락 힌트: 첫 터치 전까지 좌우로 왔다갔다 */
.rv-tk .cv .hand{position:absolute;left:50%;top:58%;font-size:2.2rem;line-height:1;transform:translate(-50%,0);pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));animation:handhint 1.6s ease-in-out infinite;opacity:.95}
.rv-tk .cv .hand.off{display:none}
@keyframes handhint{0%,100%{transform:translate(calc(-50% - 70px),0) rotate(-8deg)}50%{transform:translate(calc(-50% + 70px),0) rotate(8deg)}}
/* 톱니 찢긴 자국: 절취선 옆에 남는 종이 보풀 */
.rv-tk .fringe{position:absolute;top:0;bottom:0;width:14px;left:0;z-index:2;pointer-events:none;opacity:0;background:var(--tk-paper-2);
  clip-path:polygon(0 0,100% 3%,20% 7%,100% 12%,30% 17%,100% 22%,15% 27%,100% 33%,25% 38%,100% 44%,10% 49%,100% 55%,30% 60%,100% 66%,20% 71%,100% 77%,25% 82%,100% 88%,15% 93%,100% 100%,0 100%);
  filter:drop-shadow(-2px 0 2px rgba(0,0,0,.35))}
.rv-tk .fringe.on{opacity:1}
.rv-tk .cv{clip-path:none}
@media (prefers-reduced-motion:reduce){.rv-tk .cv .hand{animation:none}.rv-fan .fc.win{animation:none}}
@media (max-width:640px){
  .rv-tk .cv .tab{width:26px;height:64px}
  .rv-tk .cv .hand{font-size:1.8rem}
}

/* 한 번에 다 뜯기 결과 — 등급별로 묶어 한 판에 */
.prizepop .pp:has(.pp-grid){width:min(640px,96vw)}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.5rem;margin:.9rem 0 .6rem;max-height:52vh;overflow:auto;padding:2px}
.pp-grid .it{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px;padding:.45rem;text-align:center;display:flex;flex-direction:column;gap:.25rem}
.pp-grid .it img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:8px;margin:0;box-shadow:none}
.pp-grid .it .noimg{width:100%;aspect-ratio:1;margin:0;border-radius:8px;font-size:.6rem}
.pp-grid .it b{font-family:var(--mono);font-size:.82rem;color:var(--gold-2)}
.pp-grid .it small{font-size:.66rem;color:var(--muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pp-grid .it.top{border-color:var(--gold);box-shadow:0 0 0 2px rgba(226,199,118,.3)}
.pp-grid .it.top b{color:#FF6B7D}
@media (max-width:640px){.pp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}}

/* 상세 페이지 안의 종이판 (읽기용 · 내 차례면 클릭해서 바로 고르기) */
.ticket-board[hidden]{display:none}   /* 종이판은 처음엔 접어 둔다 (실시간 종이 보기) */
/* 눈에 띄게 (2026-10-31 요청) — 빨간 테두리·연한 빨강 바탕, 누르면 꽉 찬 빨강. 펼친 뒤(접기)는 차분하게. brand.css 의 .btn 을 이기려고 .btn.board-toggle */
.btn.board-toggle{font-weight:800;font-size:1rem;padding:.85rem 1rem;color:var(--red);background:var(--red-soft);border:2px solid var(--red);border-radius:12px;box-shadow:0 4px 14px var(--red-glow);transition:background .15s,color .15s,transform .15s}
.btn.board-toggle::after{content:" ▾"}
.btn.board-toggle:hover{background:var(--red);color:#fff;transform:translateY(-1px)}
.btn.board-toggle[aria-expanded="true"]{color:var(--muted,#6b6157);background:transparent;border:1px solid var(--line);box-shadow:none;font-size:.9rem}
.btn.board-toggle[aria-expanded="true"]::after{content:" ▴"}
.ticket-board{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;margin:.8rem 0 0;padding:.75rem;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.ticket-board .ticket{font-size:.78rem;border-radius:7px;cursor:pointer}
.ticket-board .ticket.sold{cursor:default}
.ticket-board .ticket:hover{transform:translateY(-2px)}
@media (max-width:640px){.ticket-board{grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px;padding:.5rem}.ticket-board .ticket{font-size:.7rem}}

/* 종이 고르기 바닥: 랜덤 선택 묶음 */
.pr-rand{display:inline-flex;align-items:center;gap:.3rem;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:.3rem .45rem}
.pr-rand .lbl{font-size:.78rem;font-weight:700;color:var(--muted);margin:0 .25rem 0 .15rem;white-space:nowrap}
.pr-rand .btn{font-family:var(--mono);font-weight:600;min-width:2.9rem}
.pr-rand .btn:hover{border-color:var(--gold-2);color:var(--gold-2)}
.pr-sel .row.between .btn{padding:.2rem .55rem;font-size:.74rem}
@media (max-width:640px){
  .pr-rand{width:100%;justify-content:space-between}
  .pr-rand .btn{flex:1;min-width:0}
  .pr-pay .btn-lg{width:100%}
}

/* ── ⚔️ 용사 모집(원정대 추첨) ── */
.badge.yj{background:var(--red);color:#fff;border-color:#E63950;font-weight:800}
.badge.yj b{font-family:var(--mono);font-weight:700}
.badge.yj-done{background:linear-gradient(180deg,#F0D68A,#B8912B);color:#2A1F05;border-color:#9B7A1E;font-weight:800}
.set-card.yj-recruiting{border-color:var(--red);box-shadow:0 0 0 1px rgba(200,16,46,.35),0 14px 40px rgba(0,0,0,.5)}
/* 모집중이면 일반 뽑기 UI는 감춘다 */
body.yj-on #pick,body.yj-on .kc-bar,body.yj-on #qbox,body.yj-on .kc-queue,body.yj-on #setStatus,body.yj-on #pickRoom,body.yj-on #qAnchor,body.yj-on #qRailBtn{display:none!important}
body.yj-done #qbox,body.yj-done .kc-queue,body.yj-done .kc-bar,body.yj-done #qAnchor,body.yj-done #qRailBtn,body.yj-done #turnModal{display:none!important}   /* 추첨 끝난 용사 판 (yongja.js) */
body.yj-on .kc-board{padding-bottom:1rem}
.yj{border-color:var(--red);box-shadow:0 0 0 1px rgba(200,16,46,.25),0 20px 50px rgba(0,0,0,.45);position:relative;overflow:hidden}
.yj::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 0% 0%,rgba(200,16,46,.18),transparent 70%),radial-gradient(50% 40% at 100% 100%,rgba(226,199,118,.12),transparent 70%);pointer-events:none}
.yj>*{position:relative}
.yj-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.yj-head h2{font-size:1.35rem;margin:.15rem 0 .25rem;letter-spacing:-.02em}
.yj-timer{text-align:right;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px;padding:.5rem .9rem;min-width:9rem}
.yj-timer .lbl{display:block;font-size:.68rem;color:var(--muted);letter-spacing:.08em}
.yj-timer b{font-size:1.5rem;color:var(--gold-2);line-height:1.1}
.yj-timer b.hot{color:#FF6B7D}
.yj-loot{margin-top:.6rem}
.yj-loot-h{display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap}
.yj-fan{margin:.4rem 0 .9rem;min-height:205px}
.yj-fan .fc.last{border-color:var(--gold);background:#FFF9E6}
.yj-fan .fc .g.last{background:linear-gradient(180deg,#F0D68A,#B8912B);color:#2A1F05}
.yj-fan .fc:hover{transform:rotate(var(--rot,0deg)) translateY(calc(var(--lift,0px) - 10px)) scale(1.05)}
.yj-legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.74rem;color:var(--muted);margin-top:.9rem}
.yj-legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-2px;border:1px solid var(--line-strong);background:var(--surface-2)}
.yj-legend .h::before{border-color:var(--warn);background:var(--warn-soft)}
.yj-legend .m::before{background:var(--gold-2);border-color:var(--gold)}
.yj-legend .p::before{background:var(--surface);border-style:dashed}
.yj-legend .mp::before{background:var(--red);border-color:#E63950}
.yj-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;margin-top:.55rem;padding:.7rem;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;max-height:420px;overflow:auto}
.yj-slots .sl{aspect-ratio:1;border-radius:9px;background:var(--tk-paper);color:var(--tk-ink);border:1px solid #D9D2C4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:inherit;cursor:pointer;transition:transform .12s,box-shadow .15s;box-shadow:inset 0 -3px 0 rgba(0,0,0,.09);padding:0}
.yj-slots .sl b{font-family:var(--mono);font-size:.95rem;line-height:1}
.yj-slots .sl small{font-size:.58rem;color:var(--tk-mute);max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yj-slots .sl:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.4),0 0 0 2px var(--gold-2)}
.yj-slots .sl.odd{border-color:var(--gold);background:#FFF9E6}
.yj-slots .sl.hold{background:var(--warn-soft);color:var(--warn);border-color:var(--warn);box-shadow:none;cursor:not-allowed}
.yj-slots .sl.mine{background:linear-gradient(180deg,#F0D68A,#B8912B);color:#2A1F05;border-color:#9B7A1E;box-shadow:0 0 0 3px rgba(226,199,118,.35)}
.yj-slots .sl.paid{background:var(--surface);color:var(--muted-2);border:1px dashed var(--line-strong);box-shadow:none;cursor:default}
.yj-slots .sl.paid small{color:var(--muted-2)}
.yj-slots .sl.house{background:var(--code);color:var(--muted-2);border-color:var(--line);box-shadow:none;cursor:default}
.yj-slots .sl.mine-paid{background:var(--red);color:#fff;border-color:#E63950;box-shadow:0 0 0 3px rgba(200,16,46,.3);cursor:default}
.yj-slots .sl.mine-paid small{color:rgba(255,255,255,.8)}
.yj-cta{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.8rem;padding:.8rem .9rem;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px}
.yj-cta .big{font-weight:800;font-size:1.05rem}
.yj-cta .big .mono{color:var(--gold-2)}
.yj-cta-r{display:flex;gap:.4rem;align-items:center;margin-left:auto}
/* 자리를 고르면 결제 바가 화면 아래에 떠서 올라온다 — 그리드 아래에 묻혀 있어 손님이 결제하는 줄 몰랐다 (2026-11-07) */
.yj-cta.float{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(.8rem + env(safe-area-inset-bottom,0px));width:min(760px,calc(100% - 1.4rem));z-index:60;margin:0;
  background:#FFFDF6;border:2px solid var(--red);box-shadow:0 14px 40px rgba(30,25,21,.28)}
.yj-cta.float.pop{animation:yjSheetUp .28s cubic-bezier(.2,.9,.3,1.2)}
body:has(.yj-cta.float) .toast{bottom:calc(var(--bnav-h,0px) + 7.5rem)}   /* 안내 토스트가 결제 바에 가리지 않게 */
/* 떠 있는 결제 바 안 — 윗줄: 남은 선점 시간·번호·비우기 / 아랫줄: 자리 수·합계·결제 버튼 */
.yj-cta.float{display:block;padding:.6rem .8rem .7rem}
.yjf-top{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:#B3261E;font-weight:700}
.yjf-top>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yjf-x{background:none;border:0;padding:.15rem .1rem;font-size:.74rem;color:var(--tk-mute);text-decoration:underline;cursor:pointer;flex-shrink:0}
.yjf-row{display:flex;align-items:center;gap:.7rem;margin-top:.4rem}
.yjf-sum{flex:1;min-width:0;display:flex;align-items:baseline;gap:.35rem;white-space:nowrap}
.yjf-sum b{font-size:.95rem}
.yjf-sum .mono{font-size:1.35rem;font-weight:800;color:var(--gold-2)}
.yjf-sum small{font-size:.8rem;font-weight:700}
.yjf-row #yjBuy{flex-shrink:0;padding:.7rem 1.4rem;font-size:1rem;font-weight:800;border-radius:10px}
@media (max-width:640px){
  /* 폰: 화면 끝까지 붙은 아래 시트 — 하단 탭 바로 위, 모서리는 위쪽만 둥글게 */
  .yj-cta.float{left:0;right:0;bottom:0;width:auto;transform:none;border-radius:16px 16px 0 0;border-width:2px 0 0;padding:.5rem .9rem calc(.6rem + env(safe-area-inset-bottom,0px))}
  .yj-cta.float.pop{animation:yjSheetUpM .25s ease-out}
  .yjf-row #yjBuy{padding:.65rem 1.1rem}
}
@keyframes yjSheetUpM{from{transform:translateY(110%)}to{transform:translateY(0)}}
.yj-cta.float #yjBuy{animation:yjPulse 1.6s ease-in-out infinite}
@keyframes yjSheetUp{from{transform:translate(-50%,120%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes yjPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,42,51,.45)}50%{box-shadow:0 0 0 8px rgba(220,42,51,0)}}
body.has-bnav .yj-cta.float{bottom:calc(var(--bnav-h,60px) + .6rem + env(safe-area-inset-bottom,0px))}
@media (max-width:640px){body.has-bnav .yj-cta.float{bottom:calc(var(--bnav-h,60px) + env(safe-area-inset-bottom,0px));padding-bottom:.6rem}}
body:has(.yj-cta.float) #yj{padding-bottom:7rem}   /* 떠 있는 결제 바가 마지막 자리를 가리지 않게 */
.yj-slots.yj-flash{animation:yjFlash 1.2s ease-out 2}
@keyframes yjFlash{0%{box-shadow:0 0 0 0 rgba(220,42,51,.55)}100%{box-shadow:0 0 0 14px rgba(220,42,51,0)}}
.yj-mine{margin-top:.6rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;padding:.5rem .7rem;background:var(--ok-soft);border:1px solid rgba(76,195,138,.4);border-radius:10px}
.yj-rules{margin:.7rem 0 0;padding-left:1.1rem;line-height:1.6}
.yj-rules b{color:var(--ink)}
/* 결과판 */
.yj-lo{display:flex;gap:.8rem;align-items:center;padding:.7rem .9rem;margin-top:.6rem;border-radius:12px;background:linear-gradient(90deg,rgba(184,145,43,.28),rgba(184,145,43,.06));border:1px solid var(--gold)}
.yj-lo .k{font-family:var(--mono);font-weight:700;color:var(--gold-2);letter-spacing:.1em;font-size:.8rem;flex:none}
.yj-lo img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:10px;flex:none}
.yj-lo .b b{display:block;font-size:1rem}
.yj-lo .b span{font-size:.78rem;color:var(--muted);font-family:var(--mono)}
.yj-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.7rem}
/* 필터 칩 */
.yj-filt{display:inline-flex;gap:.3rem;margin-left:auto;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;padding:.2rem}
.yj-filt button{background:transparent;border:0;color:var(--muted);font:inherit;font-size:.76rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;cursor:pointer}
.yj-filt button.on{background:var(--ink);color:var(--paper)}
/* 자리 카드 그리드 (결과판·추첨 화면 공용). 30~200자리를 한 판에 */
.yj-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:.5rem;margin-top:.7rem}
.yj .yj-cards{max-height:640px;overflow:auto;padding:2px 4px 2px 2px}
.yj-card{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.5rem .55rem .55rem;display:flex;flex-direction:column;gap:.4rem;transition:box-shadow .25s,border-color .25s,transform .25s}
.yj-card .ch{display:flex;align-items:center;gap:.4rem;font-size:.78rem;min-height:1.4em;flex-wrap:wrap}
.yj-card .ch .n{font-family:var(--mono);font-weight:700;color:var(--gold-2);background:rgba(226,199,118,.12);border:1px solid rgba(226,199,118,.35);border-radius:6px;padding:.05rem .4rem}
.yj-card .ch .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;color:var(--ink-2)}
.yj-card .ch .who i{color:var(--muted-2);font-style:normal}
.yj-card .ch .who b{color:#FF9BA8}
.yj-card .ch .tag{background:linear-gradient(180deg,#F0D68A,#B8912B);color:#2A1F05;font-family:var(--mono);font-size:.6rem;padding:.1rem .4rem;border-radius:5px;font-weight:700;white-space:nowrap}
.yj-card .ct{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.35rem}
.yj-card.me{border-color:var(--red);box-shadow:0 0 0 1px rgba(200,16,46,.35)}
.yj-card.me .ch .n{background:var(--red);color:#fff;border-color:#E63950}
.yj-card.lo{border-color:var(--gold);box-shadow:0 0 0 2px rgba(226,199,118,.35),0 12px 30px rgba(0,0,0,.45)}
.yj-card.house{opacity:.62}
.yj-card.cur{border-color:var(--gold-2);transform:translateY(-2px)}
.yj-card.pop{animation:yjCardPop .6s cubic-bezier(.2,.9,.3,1.3)}
@keyframes yjCardPop{40%{transform:scale(1.05)}100%{transform:none}}
/* 종이(티켓): 봉인면 ↔ 상품면 뒤집기. 이미지 포함 */
.yj-tk{position:relative;aspect-ratio:1/1.58;perspective:700px}
.yj-tk .f,.yj-tk .b{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s cubic-bezier(.3,.7,.3,1);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.yj-tk .f{background:#EFE7D6 repeating-linear-gradient(-35deg,transparent 0 10px,rgba(26,21,18,.04) 10px 12px);border:1px dashed #C9BFAF;color:rgba(26,21,18,.28);font-weight:900;font-size:1.5rem;transform:rotateY(0)}
.yj-tk .f small{font-size:.55em;vertical-align:.7em}
.yj-tk .f i{position:absolute;bottom:.25rem;font-style:normal;font-family:var(--mono);font-size:.55rem;color:rgba(26,21,18,.4)}
.yj-tk .b{background:#fff;border:1px solid #D9D2C4;color:var(--tk-ink);transform:rotateY(180deg);padding:.25rem .25rem .3rem;justify-content:flex-start;gap:.1rem}
.yj-tk .b img,.yj-tk .b .noimg{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:5px;display:block}
.yj-tk .b .noimg{display:grid;place-items:center;background:#F1ECE1;color:#A89B88;font-family:var(--mono);font-size:.55rem}
.yj-tk .b b{font-size:.72rem;font-weight:900;color:var(--red);line-height:1.1;margin-top:.1rem}
.yj-tk .b small{font-size:.56rem;line-height:1.15;color:#5a4f44;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.yj-tk .b i{position:absolute;top:.15rem;right:.25rem;font-style:normal;font-family:var(--mono);font-size:.5rem;color:#9a8b6a}
.yj-tk.top .b{border-color:var(--gold);box-shadow:inset 0 0 0 2px rgba(226,199,118,.6)}
.yj-tk.top .b b{color:var(--red)}
.yj-tk:not(.top) .b b{color:var(--tk-ink)}
.yj-tk.open .f{transform:rotateY(-180deg)}
.yj-tk.open .b{transform:rotateY(0)}
.yj-tk.open.top{animation:yjPop .55s cubic-bezier(.2,.9,.3,1.3)}
@keyframes yjPop{50%{transform:scale(1.14)}}
.yj-verify{margin-top:.8rem;color:var(--muted)}
.yj-verify .mono{word-break:break-all;color:var(--ink-2)}
@media (max-width:640px){.yj-cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.4rem}.yj-card .ct{grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}.yj-filt{margin-left:0}.yj-slots{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px;padding:.5rem}.yj-slots .sl b{font-size:.82rem}.yj-timer{min-width:0}.yj-fan{min-height:196px;margin-bottom:1.1rem}.yj-legend{margin-top:.4rem}.yj-cta-r{width:100%;margin-left:0}.yj-cta-r .btn-lg{flex:1}}
/* 추첨 화면 */
.yjscreen{justify-content:flex-start}
.yjscreen .yj-reveal{width:100%;max-width:1100px;margin-top:.8rem;grid-template-columns:repeat(auto-fit,minmax(150px,172px));justify-content:center}   /* 남는 칸 없이 가운데로 — 배틀 화면과 줄이 맞게 (2026-10-28) */
@media (max-width:640px){.yjscreen .yj-reveal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.yj-strip{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:1rem;width:100%;max-width:1100px}
.yj-strip .sg{display:flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.25rem .7rem .25rem .3rem;font-size:.74rem;color:var(--ink-2);transition:opacity .3s}
.yj-strip .sg img,.yj-strip .sg .noimg{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.yj-strip .sg .noimg{display:grid;place-items:center;font-family:var(--mono);font-size:.55rem;color:var(--muted-2);background:var(--surface-2)}
.yj-strip .sg b{font-family:var(--mono);color:var(--gold-2)}
.yj-strip .sg .c{color:var(--muted)}.yj-strip .sg .c i{font-style:normal;font-family:var(--mono);color:var(--ink);font-weight:700}
.yj-strip .sg.top{border-color:var(--gold)}
.yj-strip .sg.last{border-color:var(--gold);background:rgba(184,145,43,.14)}
.yj-strip .sg.done{opacity:.4}
.yj-strip .sg.hit{animation:sgHit .7s ease-out}
@keyframes sgHit{0%{box-shadow:0 0 0 0 rgba(226,199,118,.9);transform:scale(1.15)}100%{box-shadow:0 0 0 14px rgba(226,199,118,0);transform:none}}
.yj-ticker{min-height:2.1em;margin-top:.6rem;font-size:.9rem;color:var(--muted);text-align:center;padding:.35rem .9rem;border-radius:999px;border:1px solid transparent}
.yj-ticker.top{background:rgba(200,16,46,.16);border-color:var(--red);color:#fff;font-weight:700}
.yj-ticker.in{animation:yjIn .35s ease-out}
@keyframes yjIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.yjscreen .yj-card{opacity:.55}
.yjscreen .yj-card:has(.yj-tk.open),.yjscreen .yj-card.cur{opacity:1}
/* 보스 레이드 (라스트원 막타) */
.yj-raid{width:100%;max-width:760px;margin-top:1.4rem;background:var(--surface);border:1px solid var(--gold);border-radius:18px;padding:1rem 1rem 1.1rem;box-shadow:0 0 0 3px rgba(226,199,118,.18),0 30px 70px rgba(0,0,0,.6);animation:yjIn .4s ease-out}
.rd-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.rd-head b{font-size:1.05rem;color:var(--ink)}
.rd-arena{position:relative;margin-top:.7rem;padding-bottom:120px;
  background:radial-gradient(60% 50% at 50% 30%,rgba(200,16,46,.25),transparent 70%),radial-gradient(50% 30% at 50% 100%,rgba(226,199,118,.12),transparent 70%);border-radius:14px}
.rd-boss{position:relative;width:min(220px,55vw);margin:0 auto;aspect-ratio:1;display:grid;place-items:center}
.rd-boss .rd-img,.rd-boss .rd-img img{width:100%;height:100%;object-fit:contain;border-radius:14px}
.rd-boss .rd-img{background:#fff;border:3px solid var(--gold);box-shadow:0 0 30px rgba(226,199,118,.35),0 20px 50px rgba(0,0,0,.6);overflow:hidden;transition:filter .3s,transform .3s}
.rd-boss .rd-img .noimg{display:grid;place-items:center;height:100%;font-family:var(--mono);color:var(--muted-2)}
.rd-boss.hit .rd-img{animation:rdShake .22s}
@keyframes rdShake{0%{transform:translate(0)}25%{transform:translate(-6px,2px) rotate(-1.5deg);filter:brightness(1.6) saturate(.4)}50%{transform:translate(6px,-2px) rotate(1.5deg)}75%{transform:translate(-3px,1px)}100%{transform:none}}
.rd-boss.low .rd-img{filter:saturate(.8) contrast(1.05);animation:rdBreath 1.2s ease-in-out infinite}
@keyframes rdBreath{50%{transform:scale(.97);filter:brightness(.85)}}
.rd-boss.dead .rd-img{filter:grayscale(1) brightness(.5);transform:rotate(6deg) scale(.94);animation:none}
.rd-ko{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:3.4rem;color:#fff;letter-spacing:.1em;opacity:0;pointer-events:none;text-shadow:0 0 20px var(--red),0 0 40px var(--red),0 6px 0 #7a0a1c}
.rd-ko.on{animation:rdKo .7s cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes rdKo{0%{opacity:0;transform:scale(2.4) rotate(-8deg)}60%{opacity:1;transform:scale(1) rotate(-6deg)}100%{opacity:1;transform:scale(1.05) rotate(-6deg)}}
.rd-hits{position:absolute;inset:-20px;pointer-events:none}
.rd-dmg{position:absolute;top:30%;font-family:var(--mono);font-weight:700;font-size:1.1rem;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.8);animation:rdDmg .9s ease-out forwards}
.rd-dmg.me{color:var(--gold-2);font-size:1.3rem}
.rd-dmg.big{font-size:2rem;color:#FF6B7D;top:10%}
@keyframes rdDmg{0%{opacity:0;transform:translateY(10px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(-60px) scale(1)}}
.rd-hp{position:relative;height:22px;margin:.7rem auto 0;max-width:520px;background:#2A2521;border:1px solid var(--line-strong);border-radius:11px;overflow:hidden}
.rd-hp i{display:block;height:100%;background:linear-gradient(90deg,#4CC38A,#8FE0B6);transition:width .25s ease-out;border-radius:11px}
.rd-hp i.mid{background:linear-gradient(90deg,#D9A441,#F0D68A)}
.rd-hp i.low{background:linear-gradient(90deg,#C8102E,#FF6B7D)}
.rd-hp span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:.74rem;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.rd-field{position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none}
.rd-atk{position:absolute;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;background:var(--tk-paper);color:var(--tk-ink);border:2px solid var(--brass,#B8912B);border-radius:10px;padding:.15rem .4rem;min-width:44px;box-shadow:0 8px 18px rgba(0,0,0,.5);animation:rdAtk .85s cubic-bezier(.3,.8,.3,1) forwards}
.rd-atk b{font-family:var(--mono);font-size:.9rem;line-height:1.1}
.rd-atk small{font-size:.55rem;color:var(--tk-mute);white-space:nowrap}
.rd-atk.me{background:var(--red);color:#fff;border-color:#E63950}
.rd-atk.me small{color:rgba(255,255,255,.8)}
.rd-atk.big{animation:rdAtkBig 1.7s cubic-bezier(.3,.8,.3,1) forwards;min-width:64px;border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,199,118,.5),0 12px 30px rgba(0,0,0,.6);z-index:3}
.rd-atk.big b{font-size:1.25rem}
@keyframes rdAtk{0%{opacity:0;transform:translate(-50%,30px) scale(.7)}25%{opacity:1;transform:translate(-50%,0) scale(1)}60%{transform:translate(calc(-50% + var(--dx,0%)),-190px) scale(.85);opacity:1}100%{transform:translate(calc(-50% + var(--dx,0%)),-150px) scale(.4);opacity:0}}
@keyframes rdAtkBig{0%{opacity:0;transform:translate(-50%,40px) scale(.7)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}35%{transform:translate(-50%,0) scale(1.1)}55%{transform:translate(calc(-50% + var(--dx,0%)),-200px) scale(1.2)}75%{transform:translate(calc(-50% + var(--dx,0%)),-190px) scale(1)}100%{transform:translate(calc(-50% + var(--dx,0%)),-170px) scale(.6);opacity:0}}
.rd-cap{margin-top:.8rem;text-align:center;font-size:1rem;color:var(--ink);min-height:1.6em;line-height:1.5}
.rd-cap b{color:var(--gold-2)}
@media (max-width:640px){.yj-raid{padding:.8rem .7rem .9rem}.rd-arena{padding-bottom:100px}.rd-field{height:110px}.rd-ko{font-size:2.6rem}}
.yj-done{margin-top:1rem;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.yj-myres{background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:1rem 1.2rem;text-align:center;width:100%;max-width:640px}
.yj-myres.top{border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,199,118,.25)}
.yj-myres .lst{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin:.6rem 0}
.yj-myres .lst span{display:inline-flex;align-items:center;gap:.35rem;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;padding:.25rem .65rem .25rem .3rem;font-size:.78rem}
.yj-myres .lst span.top{border-color:var(--red);background:linear-gradient(180deg,#C8102E,#8E0018);color:#FFF8E6;font-weight:700}
.yj-myres .lst span.top b{color:#FFE14A}   /* 연분홍 바탕에 밝은 글자라 안 보였다 (2026-10-25) */
.yj-myres .lst img{width:24px;height:24px;border-radius:50%;object-fit:cover;background:#fff}
.yj-myres .lst b{font-family:var(--mono);color:var(--gold-2)}

/* ── 용사 모집 v2: 타이머 · 보스 포스터 · 결성 게이지 · 명단 · 봉인 해시 ── */
.yj-timer{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;min-width:11rem;padding:.55rem 1rem}
.yj-timer .lbl{display:block;font-size:.7rem;color:var(--muted);letter-spacing:.06em;white-space:nowrap}
.yj-timer b{display:inline-flex;align-items:baseline;gap:.15rem;font-size:1.7rem;line-height:1.1;color:var(--gold-2);white-space:nowrap}
.yj-timer b small{font-size:.8rem;color:var(--muted)}
.yj-timer.fh{background:rgba(200,16,46,.18);border-color:var(--red);box-shadow:0 0 0 3px rgba(200,16,46,.2),0 0 30px rgba(200,16,46,.35);animation:yjPulse 1s ease-in-out infinite}
.yj-timer.fh .lbl{color:#FFB3BF}
.yj-timer b.hot{color:#fff;font-size:2.2rem;text-shadow:0 0 14px rgba(255,107,125,.8)}
@keyframes yjPulse{50%{box-shadow:0 0 0 6px rgba(200,16,46,.08),0 0 40px rgba(200,16,46,.5)}}
.yj-hero{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:1rem;margin:.9rem 0 1rem}
.yj-boss-poster{position:relative;background:#0B0908;border:2px solid var(--gold);border-radius:16px;padding:.8rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;box-shadow:0 0 0 4px rgba(226,199,118,.14),0 20px 50px rgba(0,0,0,.6);overflow:hidden}
.yj-boss-poster::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(226,199,118,0) 0 10%,rgba(226,199,118,.14) 10% 12%,rgba(226,199,118,0) 12% 30%,rgba(226,199,118,.14) 30% 32%,rgba(226,199,118,0) 32% 55%,rgba(226,199,118,.14) 55% 57%,rgba(226,199,118,0) 57% 80%,rgba(226,199,118,.14) 80% 82%,rgba(226,199,118,0) 82% 100%);animation:rays 18s linear infinite;pointer-events:none}
.yj-boss-poster>*{position:relative}
.yj-boss-poster .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;color:var(--red-2,#E63950);color:#FF6B7D;font-weight:700}
.yj-boss-poster img{width:min(200px,60vw);aspect-ratio:1;object-fit:contain;background:#fff;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.6)}
.yj-boss-poster .noimg{width:min(200px,60vw);aspect-ratio:1;display:grid;place-items:center;background:var(--surface-2);border-radius:12px;font-family:var(--mono);color:var(--muted-2)}
.yj-boss-poster b{font-size:.92rem;line-height:1.3;color:var(--ink)}
.yj-boss-poster .small{color:var(--muted)}
.yj-gauge-wrap{display:flex;flex-direction:column;gap:.5rem;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:16px;padding:.9rem 1rem}
.yj-gauge-h{display:flex;justify-content:space-between;align-items:baseline}
.yj-gauge-h b{font-family:var(--mono);font-size:1.6rem;color:var(--gold-2)}
.yj-gauge-h b small{font-size:.8rem;color:var(--muted)}
.yj-gauge{position:relative;height:26px;border-radius:13px;background:#0B0908;border:1px solid var(--line-strong);overflow:hidden}
.yj-gauge i{display:block;height:100%;border-radius:13px;background:linear-gradient(90deg,#9C0B22,#C8102E 60%,#E2C776);box-shadow:0 0 16px rgba(200,16,46,.6);transition:width .6s cubic-bezier(.2,.8,.3,1)}
.yj-gauge span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:.74rem;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.yj-party{display:flex;flex-wrap:wrap;gap:.3rem;max-height:6.2rem;overflow:auto}
.yj-party span{display:inline-flex;align-items:center;gap:.25rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.15rem .55rem;font-size:.72rem;color:var(--ink-2)}
.yj-party span b{font-family:var(--mono);color:var(--gold-2);font-weight:600}
.yj-party span.me{background:var(--red);color:#fff;border-color:#E63950}
.yj-party span.me b{color:#fff}
.yj-party .empty,.yj-party .more{background:transparent;border-style:dashed;color:var(--muted)}
.yj-seal{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.8rem;padding:.5rem .8rem;background:rgba(226,199,118,.08);border:1px solid rgba(226,199,118,.35);border-radius:10px}
.yj-seal code{font-family:var(--mono);color:var(--gold-2);background:transparent;border:0;padding:0}
.yj-slots{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px;max-height:none;overflow:visible}   /* 자리는 전부 한눈에 */
/* 레이드 출격 명단 */
.rd-roster-h{margin-top:.9rem;font-size:.8rem;color:var(--muted)}
.rd-roster-h b{font-family:var(--mono);color:var(--gold-2)}
.rd-roster-h .me{color:#FF9BA8}
.rd-roster{display:flex;gap:.35rem;overflow-x:auto;padding:.4rem 2px .5rem;margin-top:.3rem;scrollbar-width:thin}
.rd-roster .rp{flex:none;display:inline-flex;align-items:center;gap:.3rem;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;padding:.25rem .6rem .25rem .4rem;font-size:.72rem;color:var(--ink-2);opacity:.55;transition:opacity .25s,transform .25s,box-shadow .25s;white-space:nowrap}
.rd-roster .rp i{font-style:normal;font-size:.9rem}
.rd-roster .rp b{font-weight:700;color:var(--gold-2)}
.rd-roster .rp small{font-family:var(--mono);color:var(--muted)}
.rd-roster .rp.now{opacity:1;transform:translateY(-3px);border-color:var(--gold-2);box-shadow:0 0 0 2px rgba(226,199,118,.35),0 8px 18px rgba(0,0,0,.5);background:var(--surface)}
.rd-roster .rp.done{opacity:.35}
.rd-roster .rp.me{border-color:var(--red);color:#fff;background:rgba(200,16,46,.2)}
.rd-roster .rp.me b{color:#FF9BA8}
.rd-roster .rp.win.done{opacity:1;border-color:var(--gold);background:rgba(184,145,43,.25)}

/* 관리자 세트 목록: 사이트 노출 on/off 토글 */
.vis-form{margin:0}
.vis{display:inline-flex;align-items:center;gap:.4rem;background:var(--code);border:1px solid var(--line-strong);border-radius:999px;padding:.2rem .5rem .2rem .25rem;cursor:pointer;font:inherit;font-size:.68rem;font-weight:700;color:var(--muted-2);transition:background .18s,border-color .18s,color .18s}
.vis i{width:30px;height:17px;border-radius:999px;background:var(--line-strong);position:relative;transition:background .18s;flex:none}
.vis i::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.vis.on{background:var(--ok-soft);border-color:rgba(76,195,138,.5);color:var(--ok)}
.vis.on i{background:var(--ok)}
.vis.on i::after{transform:translateX(13px)}
.vis:hover{border-color:var(--gold)}
tr.off td{opacity:.45}
tr.off td:first-child,tr.off td:nth-child(3){opacity:1}
/* 내 용사 위에 "나" 표시 */
.rd-hero.me::before{content:"▼ 나";position:absolute;left:50%;top:-22px;transform:translateX(-50%);font-size:.7rem;font-weight:800;color:#fff;background:var(--red);border-radius:6px;padding:.1rem .4rem;white-space:nowrap;animation:meBob .8s ease-in-out infinite}
@keyframes meBob{50%{transform:translate(-50%,-4px)}}
.yj-slots .sl b{font-size:1.05rem}
.yj-slots .sl small{font-size:.62rem;max-width:94%}
@media (max-width:760px){.yj-hero{grid-template-columns:1fr}.yj-boss-poster{flex-direction:row;text-align:left;align-items:center}.yj-boss-poster img,.yj-boss-poster .noimg{width:96px}.yj-timer{align-items:flex-start}}
/* 레이드 v2: 크게 · 흔들림 · 섬광 · 콤보 · 참격 */
.yj-raid{max-width:900px}
.rd-boss{width:min(320px,72vw)}
.rd-arena{padding-bottom:150px;min-height:520px}
.rd-flash{position:absolute;inset:-1rem;border-radius:18px;pointer-events:none;background:radial-gradient(60% 60% at 50% 40%,rgba(255,255,255,.9),rgba(200,16,46,.6) 40%,transparent 75%);opacity:0;z-index:4}
.rd-flash.on{animation:rdFlash .7s ease-out forwards}
@keyframes rdFlash{0%{opacity:1}100%{opacity:0}}
.rd-conf{position:absolute;inset:0;z-index:5;border-radius:14px}
.rd-combo{position:absolute;right:.6rem;top:.2rem;font-family:var(--mono);font-weight:700;font-size:1.3rem;color:var(--gold-2);text-shadow:0 2px 8px rgba(0,0,0,.8);opacity:.85;z-index:3}
.rd-combo.on{animation:rdCombo .3s ease-out}
@keyframes rdCombo{0%{transform:scale(1.5);color:#fff}100%{transform:none}}
.rd-slash{position:absolute;left:10%;right:10%;top:50%;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 12px #fff,0 0 24px var(--gold-2);animation:rdSlash .35s ease-out forwards;pointer-events:none}
@keyframes rdSlash{0%{opacity:0;transform:scaleX(.2) rotate(var(--r,0deg))}30%{opacity:1}100%{opacity:0;transform:scaleX(1.2)}}
.rd-count{display:inline-block;font-family:var(--mono);font-weight:700;font-size:2.6rem;color:var(--gold-2);text-shadow:0 0 20px rgba(226,199,118,.6);animation:rdCount .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes rdCount{0%{transform:scale(2);opacity:0}100%{transform:none;opacity:1}}
.rd-dmg{font-size:1.5rem}
.rd-dmg.big{font-size:2.6rem}
.rd-atk b{font-size:1.1rem}
.rd-atk{min-width:52px}
.yj-raid.ko{border-color:#FF6B7D;box-shadow:0 0 0 4px rgba(200,16,46,.3),0 30px 70px rgba(0,0,0,.7)}
.yjscreen.shake{animation:scShake .25s}
.yjscreen.shake-big{animation:scShakeBig .55s}
@keyframes scShake{0%,100%{transform:translate(0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}
@keyframes scShakeBig{0%,100%{transform:translate(0)}15%{transform:translate(-12px,6px)}30%{transform:translate(12px,-6px)}45%{transform:translate(-9px,4px)}60%{transform:translate(9px,-3px)}80%{transform:translate(-4px,2px)}}
@media (prefers-reduced-motion:reduce){.yjscreen.shake,.yjscreen.shake-big,.rd-boss.hit .rd-img{animation:none}}

/* ── 레이드 v3: 벡터 드래곤 · 다섯 직업 용사 · 물고 있는 상품 ── */
.rd-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:360px;
  background:radial-gradient(50% 60% at 50% 55%,rgba(200,16,46,.35),rgba(200,16,46,0) 70%)}
.rd-boss{width:min(470px,88vw);aspect-ratio:240/220;display:block;filter:drop-shadow(0 0 30px rgba(200,16,46,.45))}
.rd-mon{width:100%;height:100%;transform-origin:50% 90%}
.rd-mon svg{width:100%;height:100%;overflow:visible}
.rd-mon .mon-body{transform-origin:120px 200px;animation:monBreathe 1.8s ease-in-out infinite}
@keyframes monBreathe{50%{transform:scale(1.03,.97) translateY(2px)}}
.rd-mon .wing{transform-origin:120px 110px;animation:monWing 1.8s ease-in-out infinite}
.rd-mon .wing.r{animation-delay:.1s}
@keyframes monWing{50%{transform:rotate(-4deg)}}
.rd-mon .wing.r{animation-name:monWingR}
@keyframes monWingR{50%{transform:rotate(4deg)}}
.rd-mon .pupil{animation:monLook 3.2s ease-in-out infinite}
@keyframes monLook{0%,40%,100%{transform:translate(0)}45%,70%{transform:translate(-4px,1px)}75%,95%{transform:translate(3px,-1px)}}
.rd-mon .eye{transform-origin:center;animation:monBlink 4.5s infinite}
@keyframes monBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.rd-mon .xeye{opacity:0}
.rd-boss.hit .rd-mon{animation:monHit .28s}
@keyframes monHit{0%{transform:translate(0)}20%{transform:translate(-10px,4px) rotate(-3deg);filter:brightness(2.2) saturate(.3)}45%{transform:translate(10px,-3px) rotate(2deg)}70%{transform:translate(-5px,2px)}100%{transform:none}}
.rd-boss.low .rd-mon{filter:saturate(1.2) hue-rotate(-8deg)}
.rd-boss.low .mon-body{animation-duration:.9s}
.rd-boss.low .rd-mon .brow{transform:translateY(-3px)}
.rd-boss.dead .rd-mon{transform:rotate(9deg) translateY(14px);filter:grayscale(1) brightness(.55);transition:transform .5s cubic-bezier(.3,.7,.3,1.2),filter .6s}
.rd-boss.dead .mon-body,.rd-boss.dead .wing,.rd-boss.dead .eye,.rd-boss.dead .pupil{animation:none}
.rd-boss.dead .eye{opacity:0}.rd-boss.dead .xeye{opacity:1}
.rd-boss.dead .mouth{transform:translateY(4px)}
/* 입에 물린 상품 */
.rd-held{position:absolute;left:50%;top:63%;width:19%;aspect-ratio:1;transform:translate(-50%,-20%) rotate(-8deg);z-index:2;pointer-events:none;transition:transform .3s}
.rd-held img,.rd-held .noimg{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:8px;border:2px solid var(--gold);box-shadow:0 8px 20px rgba(0,0,0,.6);display:block}
.rd-held .noimg{display:grid;place-items:center;font-family:var(--mono);font-size:.55rem;color:var(--muted-2)}
.rd-boss.hit .rd-held{transform:translate(-50%,-20%) rotate(6deg)}
.rd-held.drop{animation:heldDrop .55s ease-in forwards}
@keyframes heldDrop{0%{transform:translate(-50%,-20%) rotate(-8deg);opacity:1}100%{transform:translate(-50%,120%) rotate(30deg);opacity:0}}
.rd-drop{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:6;pointer-events:none;display:none}
.rd-drop.on{display:block;animation:dropIn .7s cubic-bezier(.2,.9,.3,1.35)}
@keyframes dropIn{0%{transform:translate(-50%,40px) scale(.4);opacity:0}60%{transform:translate(-50%,-10px) scale(1.12);opacity:1}100%{transform:translate(-50%,0) scale(1)}}
.rd-drop .pz{background:#fff;border:3px solid var(--gold);border-radius:14px;padding:.5rem .6rem .55rem;text-align:center;box-shadow:0 0 0 5px rgba(226,199,118,.35),0 0 50px rgba(226,199,118,.6),0 24px 60px rgba(0,0,0,.7);width:min(220px,60vw)}
.rd-drop .pz img,.rd-drop .pz .noimg{width:100%;aspect-ratio:1;object-fit:contain;display:block;border-radius:8px}
.rd-drop .pz b{display:block;margin-top:.3rem;color:var(--red);font-size:.95rem}
.rd-drop .pz small{display:block;color:#5a4f44;font-size:.7rem;line-height:1.25}
/* 용사 캐릭터 */
.rd-field{height:170px;overflow:visible}
.rd-hero{position:absolute;bottom:0;width:78px;transform:translateX(-50%);z-index:3;pointer-events:none}
.rd-hero svg{width:100%;overflow:visible;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.rd-hero .tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;font-size:.58rem;color:var(--ink-2);background:rgba(11,9,8,.85);border:1px solid var(--line-strong);border-radius:999px;padding:.05rem .4rem}
.rd-hero .tag b{font-family:var(--mono);color:var(--gold-2);margin-right:.2rem}
.rd-hero.me .tag{background:var(--red);color:#fff;border-color:#E63950}.rd-hero.me .tag b{color:#fff}
.rd-hero .weapon{transform-origin:48px 46px;transition:transform .12s}
.rd-hero.swing .weapon{animation:heroSwing .32s cubic-bezier(.3,.8,.3,1)}
@keyframes heroSwing{0%{transform:rotate(30deg)}40%{transform:rotate(-95deg)}100%{transform:rotate(0)}}
/* 등장 → 드래곤 앞까지 대시(또는 제자리 시전) → 자리 수만큼 연타하는 동안 머무름 → 퇴장. 길이는 --dur 로 타수에 맞춤 */
.rd-hero.melee{animation:heroDash var(--dur,1s) cubic-bezier(.3,.8,.3,1) forwards}
@keyframes heroDash{0%{opacity:0;transform:translate(-50%,40px) scale(.8)}12%{opacity:1;transform:translate(-50%,0) scale(1)}20%{transform:translate(calc(-50% + var(--dx,0%)),-150px) scale(1)}86%{opacity:1;transform:translate(calc(-50% + var(--dx,0%)),-150px) scale(1)}100%{opacity:0;transform:translate(-50%,10px) scale(.7)}}
.rd-hero.ranged{animation:heroCast var(--dur,1s) ease-out forwards}
@keyframes heroCast{0%{opacity:0;transform:translate(-50%,30px)}12%{opacity:1;transform:translate(-50%,0)}20%{transform:translate(-50%,-10px)}88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,16px)}}
.rd-hero.melee,.rd-hero.ranged{animation-fill-mode:both}   /* 등장 딜레이 동안 보이지 않게 */
.rd-hero.big{width:130px;z-index:4}
.rd-hero.big.melee{animation:heroDashBig var(--dur,2.3s) cubic-bezier(.3,.8,.3,1) forwards}
@keyframes heroDashBig{0%{opacity:0;transform:translate(-50%,50px) scale(.8)}10%{opacity:1;transform:translate(-50%,0) scale(1.1)}18%{transform:translate(-50%,0) scale(1.1)}24%{transform:translate(calc(-50% + var(--dx,0%)),-160px) scale(1.25)}88%{transform:translate(calc(-50% + var(--dx,0%)),-160px) scale(1.25)}100%{opacity:0;transform:translate(-50%,10px) scale(.8)}}
.rd-hero.big.ranged{animation:heroCastBig var(--dur,2.3s) ease-out forwards}
@keyframes heroCastBig{0%{opacity:0;transform:translate(-50%,40px)}10%{opacity:1;transform:translate(-50%,0) scale(1.15)}20%{transform:translate(-50%,-14px) scale(1.2)}90%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,16px)}}
.rd-hero.big .tag{font-size:.74rem;bottom:-20px}
/* 발사체·효과 */
.rd-proj{position:absolute;bottom:90px;width:22px;height:22px;transform:translateX(-50%);z-index:5;animation:projFly .26s linear forwards;pointer-events:none}
@keyframes projFly{0%{transform:translate(-50%,0)}100%{transform:translate(calc(-50% + var(--dx,0%)),-250px)}}
.rd-proj.fire{border-radius:50%;background:radial-gradient(circle,#FFE08A,#FF7A2A 55%,rgba(200,16,46,0) 75%);box-shadow:0 0 18px 6px rgba(255,122,42,.7)}
.rd-proj.arrow{width:46px;height:4px;border-radius:2px;background:linear-gradient(90deg,#8A5A2A,#F4EFE4);box-shadow:0 0 6px rgba(255,255,255,.5);transform-origin:center;animation:projArrow .26s linear forwards}
@keyframes projArrow{0%{transform:translate(-50%,0) rotate(-70deg)}100%{transform:translate(calc(-50% + var(--dx,0%)),-250px) rotate(-70deg)}}
.rd-boom{position:absolute;left:50%;top:45%;width:40px;height:40px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff,#FFB347 40%,rgba(200,16,46,0) 70%);animation:boom .45s ease-out forwards;pointer-events:none}
.rd-boom.holy{background:radial-gradient(circle,#fff,#F6E3A6 40%,rgba(226,199,118,0) 72%)}
@keyframes boom{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}
.rd-pillar{position:absolute;left:50%;top:-140px;bottom:30%;width:90px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,246,218,.85) 30%,rgba(226,199,118,.35));box-shadow:0 0 40px rgba(255,246,218,.8);animation:pillar .65s ease-out forwards;pointer-events:none;border-radius:40px}
@keyframes pillar{0%{opacity:0;transform:translateX(-50%) scaleX(.2)}25%{opacity:1;transform:translateX(-50%) scaleX(1)}100%{opacity:0;transform:translateX(-50%) scaleX(1.3)}}
.rd-slash{left:15%;right:15%;top:45%;height:5px;transform:rotate(var(--r,0deg))}
.rd-slash.thin{height:3px;background:linear-gradient(90deg,transparent,#F4EFE4,transparent)}
.rd-slash.big{height:10px;left:0;right:0;box-shadow:0 0 20px #fff,0 0 50px var(--gold-2)}
.rd-arena{min-height:680px;padding-bottom:170px}
@media (max-width:640px){.rd-boss{width:min(320px,86vw)}.rd-hero{width:58px}.rd-hero.big{width:90px}.rd-field{height:130px}.rd-arena{min-height:500px;padding-bottom:130px}.rd-drop{bottom:4px}}
@media (max-width:640px){.rd-arena{min-height:440px;padding-bottom:120px}.rd-boss{width:min(240px,64vw)}.rd-count{font-size:2rem}}

/* 결제 안내 공지 — "입금하지 마라"보다 "카드로 결제하라"를 먼저 보여 준다 (2026-10-05) */
.test-notice.notice-pay{background:#1F1B18;border-color:var(--gold);border-left:5px solid var(--gold-2)}
.notice-pay .test-notice-label.pay{border-color:var(--gold-2);color:var(--gold-2);background:#2a2217}
.notice-pay h2{color:var(--gold-2);font-size:1.35rem;font-weight:800;letter-spacing:-.4px}
.notice-pay .notice-lead{font-size:1rem;color:var(--ink);line-height:1.7;margin-bottom:.6rem}
.notice-steps{margin:.5rem 0 .7rem 1.15rem;padding:0;font-size:.9rem;line-height:1.8;color:var(--ink-2)}
.notice-steps li{margin:.1rem 0}
.notice-nodep{margin:.7rem 0 0;padding:.65rem .85rem;background:#241414;border-left:3px solid #e05a5a;border-radius:6px;font-size:.88rem;line-height:1.7;color:#ffd9d9}
.notice-nodep b{color:#ff9a9a}
.notice-cta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.test-notice-link.primary{background:var(--gold-soft);border-color:var(--gold-2);color:var(--ink)}
.test-notice-link.primary:hover{background:var(--gold-2);color:#14110c}
.nodep-steps{margin:.5rem 0 .2rem 1.15rem;padding:0;font-size:.9rem;line-height:1.8;color:var(--ink-2)}
.modal.nodep{max-width:540px}
.nodep-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;flex-wrap:wrap}
.nodep-badge{flex:none;padding:.25rem .6rem;border:1px solid var(--gold-2);background:#2a2217;border-radius:5px;font-size:.72rem;font-weight:800;color:var(--gold-2)}
.nodep-head b{font-size:1.25rem;color:var(--gold-2);letter-spacing:-.4px}
.nodep-body{font-size:.92rem;line-height:1.7;color:var(--ink-2);margin:0 0 .5rem}
.nodep-body b{color:var(--ink)}
.nodep-refund{margin:.7rem 0 .9rem;padding:.65rem .85rem;background:#241414;border-left:3px solid #e05a5a;border-radius:6px;font-size:.88rem;line-height:1.7;color:#ffd9d9}
.nodep-refund b{color:#ff9a9a}
.warn-text{color:#ff8a8a}
/* 라스트원 지급 완료 — 이미 나간 라스트원이 살아 있는 것처럼 보이던 문제 (2026-10-16) */
.badge.lastone-done{background:#2a2a32;border-color:#4a4a58;color:#9aa0b0}
.pz.last-one.out{opacity:.45;filter:grayscale(.7)}
.pz.last-one.out .g.last{color:#9aa0b0}

/* ---------- 주의사항 2단 ---------- */
.notice-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.6rem}
.notice-cols .notice-box{margin:0}
@media (max-width:860px){.notice-cols{grid-template-columns:1fr;gap:.2rem}}

/* ---------- 대기 명단 ----------
   PC(1180px~) 는 본문 오른쪽 빈 여백에 고정 레일로 늘 띄우고,
   좁은 화면에서는 버튼 한 줄만 두고 눌렀을 때 팝업으로 연다. */
.q-rail-btn{display:flex;align-items:center;gap:.55rem;width:100%;margin:0 0 .6rem;padding:.65rem .85rem;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px;color:var(--text);
  font-size:.85rem;text-align:left;cursor:pointer}
.q-rail-btn b{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-rail-btn span{font-size:.76rem;color:var(--muted);flex:none}
.qa-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(226,199,118,.18);flex:none}

/* 팝업 안의 네 조각은 세로로 쌓여야 한다. flex 기본값(row)로 두면 가로로 눌려
   폭 min(380px,92vw) 가 무시되고 글자가 한 글자씩 끊긴다. */
.q-rail{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);padding:1rem}
.q-rail.show{display:flex}
.q-rail>*{flex:none;background:var(--surface);border:1px solid var(--line-strong)}
.q-rail .qr-head{display:flex;align-items:center;gap:.5rem;width:min(380px,92vw);
  border-radius:12px 12px 0 0;border-bottom:0;padding:.75rem .9rem;font-size:.92rem}
.q-rail .qr-sum{width:min(380px,92vw);border-top:0;border-bottom:0;margin:0;padding:0 .9rem .5rem;
  font-size:.82rem;font-weight:700;color:var(--gold)}
.q-rail .q-list{width:min(380px,92vw);border-radius:0;border-top:0;border-bottom:0;margin:0;padding:0 .9rem;max-height:46vh;overflow:auto}
.q-rail .qr-note{width:min(380px,92vw);border-radius:0 0 12px 12px;border-top:0;margin:0;padding:.6rem .9rem .8rem}
.q-rail .qr-x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:1rem;cursor:pointer;padding:.1rem .3rem}

@media (min-width:1280px){
  .q-rail-btn{display:none}
  .q-rail{position:fixed;inset:auto;right:16px;top:86px;z-index:40;display:block;background:none;padding:0;width:248px}
  .q-rail .qr-head,.q-rail .qr-sum,.q-rail .q-list,.q-rail .qr-note{width:248px}
  .q-rail .qr-x{display:none}
  .q-rail .q-list{max-height:40vh}
  /* 레일이 본문을 덮지 않게 본문을 왼쪽으로 민다. 좁아지면 본문도 같이 줄어 겹치지 않는다. */
  /* 레일이 본문을 덮지 않게, 레일 칸을 뺀 영역의 한가운데로 본문을 옮긴다.
     margin-right 로 밀면 margin-left:auto 가 남는 공간을 다 먹어 본문이 오른쪽에 붙는다. */
  body:has(.q-rail) .container.page{max-width:min(1400px,calc(100vw - 248px - 6rem));position:relative;right:calc((248px + 2rem) / 2)}
}

/* ---------- 종이 한 장: 실제 쿠지처럼 절취선에서 뜯긴 테두리 ----------
   양 옆에 반원 홈을 파서 미싱선에서 뜯어낸 자국을 만든다.
   mask-composite 를 못 쓰는 브라우저에서는 그냥 둥근 네모로 남는다. */
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)){
  .rv-tk{
    --tear:6px; --tear-gap:17px;
    -webkit-mask-image:radial-gradient(circle var(--tear) at left,transparent calc(var(--tear) - .5px),#000 var(--tear)),radial-gradient(circle var(--tear) at right,transparent calc(var(--tear) - .5px),#000 var(--tear));
    mask-image:radial-gradient(circle var(--tear) at left,transparent calc(var(--tear) - .5px),#000 var(--tear)),radial-gradient(circle var(--tear) at right,transparent calc(var(--tear) - .5px),#000 var(--tear));
    -webkit-mask-size:100% var(--tear-gap);mask-size:100% var(--tear-gap);
    -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;
    -webkit-mask-position:left top,right top;mask-position:left top,right top;
    -webkit-mask-composite:source-in;mask-composite:intersect;
    border-radius:4px;
  }
}

/* ---------- 모바일: 종이를 줄여 뜯을 여백을 만든다 ----------
   화면 폭을 꽉 채우면 끌 공간이 없고 브라우저 뒤로가기 스와이프와 겹친다. */
@media (max-width:640px){
  .rv-stage{width:min(340px,80vw);margin:.9rem auto .7rem}
  .rv-tk .cv .num{font-size:clamp(2.8rem,10vw,4rem)}
  .rv-tk .cv .band{padding:.45rem .7rem;font-size:.72rem}
  .rv-tk .cv .hd{padding:.5rem .7rem .3rem;font-size:.66rem}
  .rv-tk .cv .ft{padding:.35rem .7rem;font-size:.6rem}
  .rv-tk .cv .grip{right:.6rem;width:22px;height:58px}
  .rv-tk .in .g{font-size:3rem}
  .rv-tk .in img{width:54px;height:54px;right:.7rem;bottom:.7rem}
  .rv-tk .in .nm{font-size:.86rem}
}

/* 라이브 피드: 몇 번 종이에서 나왔는지 — 분쟁이 생겼을 때 서로 가리킬 수 있는 값 */
.lf .g .no{font-family:var(--mono);font-weight:700;font-size:.78em;color:var(--tk-mute);margin-left:.25em}
.feed li .mono{color:var(--gold)}

/* ---------- 뜯기: 번호 자릿수 공개 + 후보 줄 ---------- */
.rv-digits{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:.2rem 0 .5rem;min-height:2.4rem}
.rv-digits b{display:grid;place-items:center;width:2.1rem;height:2.4rem;border-radius:7px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-strong);
  font-family:var(--mono);font-size:1.3rem;font-weight:800;color:var(--muted);transition:.18s}
.rv-digits b.on{background:var(--gold);border-color:var(--gold);color:#1a1206;transform:translateY(-2px)}
.rv-digits span{margin-left:.5rem;font-size:.76rem;color:var(--muted)}

/* 부채꼴이 화면 밖으로 잘려 20종 중 몇 개만 보였다. 가로로 밀어 전부 볼 수 있게. */
.rv-fan-wrap{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:34px 0 14px}
.rv-fan-wrap::-webkit-scrollbar{display:none}
.rv-fan-wrap .rv-fan{width:max-content;margin:0 auto;padding:0 1rem}
@media (max-width:640px){
  .rv-digits{min-height:2.1rem}
  .rv-digits b{width:1.8rem;height:2.1rem;font-size:1.1rem}
  .rv-digits span{font-size:.7rem}
  /* 모바일에서는 겹치지 않게 펴서 늘어놓는다 — 기울이면 가로 스크롤에서 잘려 보인다 */
  .rv-fan-wrap{padding:24px 0 10px}
  .rv-fan-wrap .rv-fan{padding:0 .6rem;min-height:118px;margin:.3rem 0 .1rem}
  .rv-fan .fc{width:78px;margin:0 3px;transform:none !important;padding:4px}
  .rv-fan .fc.gone{opacity:0;transform:translateY(24px) scale(.9) !important;width:0;margin:0;padding:0;border-width:0}
}

/* 무엇이 상위상인지 못박아 둔다 — 분쟁 났을 때 가리킬 문장 */
.poster-h .topdef{flex-basis:100%;font-size:.74rem;color:var(--tk-mute);margin-top:.3rem;line-height:1.5}
.poster-h .topdef b{color:var(--tk-ink)}

/* 상위상 고유 번호 — 종이 번호와 헷갈리지 않게 작게, 상품 쪽에 붙인다 */
/* 당첨번호 — 손님이 종이를 뜯어 맞춰 볼 값이라 카드에서 가장 눈에 띄어야 한다 */
.pz .wn{display:block;background:var(--red);color:#fff;border-radius:5px;padding:.2rem .35rem;
  font-size:.6rem;font-weight:700;text-align:center;letter-spacing:-.02em}
.pz .wn b{font-family:var(--mono);font-size:.86rem;letter-spacing:.02em}
.pz .wn.low{background:#EFE9DB;color:var(--tk-mute);font-weight:600}
.pz.out .wn{background:var(--tk-mute)}
.pz .wn.lo-draw{background:linear-gradient(180deg,#F0D68A,#D9B04A);color:#2A1F05;border:1px solid #B8912B}   /* 용사 판 라스트원 — 금색 알약 */
.pz .wn.lo-draw b{font-family:inherit;font-size:.7rem}
@media (max-width:640px){.pz .wn{font-size:.54rem;padding:.16rem .25rem}.pz .wn b{font-size:.76rem}}

/* 종이 속 당첨번호 — 뜯으면 이 번호가 나오고 공개된 표와 맞춰 상품이 정해진다 */
.rv-tk .in .winno{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--tk-mute);letter-spacing:.02em}
.rv-tk .in .winno b{font-size:1.5rem;color:var(--red);margin-left:.2em}
.rv-digits i{font-style:normal;font-size:.74rem;color:var(--muted);margin-right:.2rem}
.pz .tno.low{background:var(--tk-mute);font-size:.52rem}
@media (max-width:640px){.rv-tk .in .winno b{font-size:1.2rem}}

.rv-fan .fc{transition:transform .3s,opacity .3s,box-shadow .3s,width .34s .16s,margin .34s .16s,padding .34s .16s}
.rv-fan-pre-note{font-size:.78rem;color:var(--muted);text-align:center;margin:.2rem 0 0}

/* ---------- 실시간 당첨자 레일 ----------
   격자로 6칸 깔면 당첨이 늘어도 6개에서 멈춘다. 가로로 계속 흐르게 바꿨다.
   같은 목록을 두 벌 깔고 절반만큼 밀어 끊김 없이 이어진다. */
.lf-rail{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.lf-track{display:flex;gap:.55rem;width:max-content;animation:lfroll 42s linear infinite}
.lf-rail:hover .lf-track{animation-play-state:paused}
.lf-track .lf{width:232px;flex:none}
@keyframes lfroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){
  .lf-track{animation-duration:30s}
  .lf-track .lf{width:190px}
}
@media (prefers-reduced-motion:reduce){.lf-track{animation:none}.lf-rail{overflow-x:auto}}

/* ---------- 뜯기: 남은 종이를 겹치지 않는다 ----------
   뒤에 겹쳐 둔 종이가 모바일에서 뭉개져 현재 장이 뭔지도 안 보였다.
   남은 장수는 위 문구로 알려주므로 현재 한 장만 띄운다. */
.rv-tk.behind{display:none !important}
.rv-stage.many::after{display:none !important}
.rv-stage{padding-top:0 !important}

/* ---------- 뜯는 맛: 후보가 줄면 카드를 키우고, 상위상이 살아 있으면 금색으로 때린다 ---------- */
.rv-fan.few .fc{transform:scale(1.22) !important;z-index:12}
.rv-fan.few .fc:not(.gone){animation:fcbeat 1.1s ease-in-out infinite}
@keyframes fcbeat{0%,100%{filter:none}50%{filter:brightness(1.12) drop-shadow(0 0 14px rgba(226,199,118,.55))}}

.rv-screen.hit-gold::after,.rv-screen.hit-dim::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;border-radius:inherit}
.rv-screen.hit-gold::after{animation:hitgold .62s ease-out 1}
.rv-screen.hit-dim::after{animation:hitdim .45s ease-out 1}
@keyframes hitgold{
  0%{box-shadow:inset 0 0 0 0 rgba(255,214,110,0)}
  22%{box-shadow:inset 0 0 90px 18px rgba(255,214,110,.75)}
  100%{box-shadow:inset 0 0 0 0 rgba(255,214,110,0)}}
@keyframes hitdim{
  0%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}
  30%{box-shadow:inset 0 0 50px 8px rgba(190,190,210,.18)}
  100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){
  .rv-fan.few .fc:not(.gone){animation:none}
  .rv-screen.hit-gold::after,.rv-screen.hit-dim::after{animation:none}}

/* 마지막 자리 직전 — 종이가 걸려 부르르 떤다 */
.rv-tk .cv.catch{animation:snag .14s linear infinite}
@keyframes snag{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.6px)}75%{transform:translateX(1.6px)}}
.rv-tk .cv.catch ~ .edge{box-shadow:0 0 22px 8px rgba(255,120,90,.75),0 0 46px 14px rgba(255,120,90,.35)}
@media (prefers-reduced-motion:reduce){.rv-tk .cv.catch{animation:none}}

/* ---------- 공지사항 ---------- */
.hdr-notice{position:relative}
.lnk .dot,.tabs a .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-left:.25rem;vertical-align:top}
.notice-list{display:flex;flex-direction:column;gap:.4rem}
.nt{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--text)}
.nt:hover{border-color:var(--line-strong);background:var(--surface)}
.nt.pin{border-color:var(--gold);background:rgba(226,199,118,.07)}
.nt-tag{flex:none;font-size:.68rem;font-weight:800;padding:.2rem .45rem;border-radius:5px;background:var(--surface);border:1px solid var(--line-strong);color:var(--muted)}
.nt.pin .nt-tag{background:var(--gold);border-color:var(--gold);color:#201604}
.nt-ti{flex:1;min-width:0;font-weight:700;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-dt{flex:none;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.nt-head{border-bottom:1px solid var(--line);padding-bottom:.7rem;margin-bottom:.9rem}
.nt-head h1{margin:.35rem 0 .3rem;font-size:1.25rem}
.nt-body p{margin:0 0 .9rem;line-height:1.8}
.nt-nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-top:1px solid var(--line);padding-top:.8rem;font-size:.82rem}
.nt-nav a{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36%}

/* ---------- 이용방법 ---------- */
.howto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;counter-reset:hw}
.howto>li{display:flex;gap:.9rem;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.howto .hw-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--gold),#b8912b);color:#201604;font-family:var(--mono);font-weight:800;font-size:1rem}
.howto h3,.howto h2{margin:.15rem 0 .4rem;font-size:1.02rem}
.howto p{margin:0 0 .45rem;line-height:1.75;font-size:.88rem;color:var(--muted)}
.howto p:last-child{margin-bottom:0}
.howto .hw-warn{background:rgba(214,24,48,.08);border-left:3px solid var(--red);border-radius:0 7px 7px 0;padding:.5rem .7rem;color:var(--text)}
@media (max-width:640px){
  .howto>li{padding:.8rem .85rem;gap:.7rem}
  .howto .hw-n{width:28px;height:28px;font-size:.86rem}
  .howto h3{font-size:.94rem}
  .nt{padding:.7rem .8rem;gap:.5rem}
  .nt-ti{font-size:.86rem}
  .nt-dt{font-size:.68rem}
}

/* ---------- 뜯기 화면 정리 ----------
   결과 칩이 아래에서 쌓여 올라오며 종이와 당첨 카드를 덮었다. 결과는 팝업으로
   이미 한 장씩 보여주므로 칩은 없앤다. 안내문도 한 줄로 줄였다. */
.rv-done{display:none !important}
.rv-help{font-size:.78rem;color:var(--muted);margin:.5rem 0 .2rem;text-align:center}
/* 후보가 커질 때 아래(종이 쪽)로 자라지 않게 위로만 키운다 */
.rv-fan .fc{transform-origin:50% 100%}
.rv-fan.few .fc{transform:scale(1.18) translateY(-6px) !important}
.rv-stage{margin-top:1.4rem}
@media (max-width:640px){.rv-stage{margin-top:1rem}.rv-help{font-size:.74rem}}

/* 제목과 첫 단계가 붙어 보였다. 형제 마진은 겹치므로 패딩으로 벌린다. */
.howto-h{margin-bottom:0}
.howto{margin-top:0;padding-top:2.1rem}
@media (max-width:640px){.howto{padding-top:1.4rem}}

/* ---------- 보관함: 주문 단위 카드 ----------
   578개를 한 줄씩 늘어놓으니 아무것도 못 읽었다. 어떤 판을 언제 뽑았는지로 묶는다. */
.ord-list{display:flex;flex-direction:column;gap:.7rem}
.ord{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px;overflow:hidden}
.ord.dim{opacity:.72}
.ord-h{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;background:var(--surface);cursor:default;list-style:none}
details.ord>summary.ord-h{cursor:pointer}
details.ord>summary::-webkit-details-marker{display:none}
.ord-h>img,.ord-h>.ph{width:44px;height:44px;flex:none;border-radius:8px;object-fit:cover;background:var(--surface-2);border:1px solid var(--line)}
.ord-ti{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.ord-ti b{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-meta{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.ord-pick{flex:none;font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:.3rem;cursor:pointer}
.ord-more{flex:none;font-size:.74rem;color:var(--muted)}
.ord-sum{display:flex;flex-wrap:wrap;gap:.2rem .9rem;padding:.45rem .85rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--muted)}
.ord-sum b{color:var(--text);font-family:var(--mono)}
.ord-sum .ok b{color:var(--gold)}
.ord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.45rem;padding:.7rem .85rem .85rem;border-top:1px solid var(--line)}
.ord-it{position:relative;display:flex;flex-direction:column;gap:.25rem;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:.4rem}
label.ord-it{cursor:pointer}
label.ord-it:has(input:checked){border-color:var(--gold);background:rgba(226,199,118,.1)}
.ord-it input{position:absolute;left:.35rem;top:.35rem;z-index:2;accent-color:var(--gold)}
.ord-it>img,.ord-it>.ph{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:6px}
.ord-it .g{font-size:.64rem;font-weight:800;color:var(--red);text-align:right}
.ord-it .n{font-size:.72rem;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ord-it .no{font-family:var(--mono);font-size:.62rem;color:var(--muted)}
.ord-it.can-return .g::after{content:" ·반납가능";font-size:.56rem;color:var(--gold);font-weight:600}
@media (max-width:640px){
  .ord-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.35rem;padding:.55rem .6rem .7rem}
  .ord-h{padding:.6rem .6rem;gap:.55rem}
  .ord-h>img,.ord-h>.ph{width:38px;height:38px}
  .ord-ti b{font-size:.84rem}
  .ord-sum{padding:.4rem .6rem;font-size:.72rem;gap:.15rem .7rem}
}

/* 굿즈 포인트 당첨은 물건이 아니라 적립이라 금색으로 구분한다 */
.ord-it.pt{border-color:var(--gold)}
.ord-it.pt .g{color:var(--gold)}

/* ---------- 라스트원: 사진과 빛을 준다 ---------- */
.lo1{display:flex;align-items:center;gap:.8rem;text-align:left;
  background:linear-gradient(135deg,rgba(226,199,118,.22),rgba(226,199,118,.07));
  border:1px solid var(--gold);border-radius:12px;padding:.7rem .85rem;margin:.7rem 0 .2rem;
  box-shadow:0 0 0 1px rgba(226,199,118,.25),0 0 28px rgba(226,199,118,.22)}
.lo1-art{position:relative;width:72px;height:72px;flex:none;border-radius:9px;overflow:hidden;background:#fff}
.lo1-art img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}
.lo1-art .ph{display:grid;place-items:center;width:100%;height:100%;background:#F1ECE1;color:#A89B88;font-family:var(--mono);font-size:.62rem}
/* 사진 위를 쓸고 지나가는 빛 */
.lo1-art i{position:absolute;inset:-40%;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%);
  animation:lo1shine 2.4s ease-in-out infinite}
@keyframes lo1shine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.lo1-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.lo1-txt b{color:var(--gold);font-size:.82rem;letter-spacing:.04em}
.lo1-nm{font-weight:800;font-size:.95rem;line-height:1.3}
.lo1-sub{font-size:.74rem;color:var(--muted)}
@media (max-width:640px){.lo1{gap:.6rem;padding:.6rem}.lo1-art{width:58px;height:58px}.lo1-nm{font-size:.86rem}.lo1-sub{font-size:.68rem}}
@media (prefers-reduced-motion:reduce){.lo1-art i{animation:none;opacity:0}}

/* ---------- 쿠지 목록: 상태 버튼 필터 ---------- */
.kl-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.9rem 0 .2rem}
.kl-filters{display:flex;gap:.35rem;flex-wrap:wrap}
.kl-f{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .8rem;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--muted);
  font-size:.82rem;font-weight:700;cursor:pointer;transition:.14s}
.kl-f:hover{border-color:var(--gold);color:var(--text)}
.kl-f span{font-family:var(--mono);font-size:.72rem;opacity:.75}
.kl-f.on{background:var(--gold);border-color:var(--gold);color:#201604}
.kl-f.on span{opacity:.9}
.kl-f.f-open.on{background:#2FA86B;border-color:#2FA86B;color:#fff}
.kl-f.f-soldout.on{background:var(--red);border-color:var(--red);color:#fff}
.kl-sort{margin-left:auto;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.35rem}
.kl-empty{text-align:center;padding:2.4rem 0}
@media (max-width:640px){
  .kl-tools{gap:.45rem}
  .kl-f{padding:.36rem .62rem;font-size:.76rem}
  .kl-sort{margin-left:0;width:100%}
}

/* 같은 상품이 여러 장이면 사진 모서리에 ×개수를 박는다. 글자 위에 띄우면 이름을 덮는다. */
.ord-it .thumb{position:relative;display:block;width:100%}
.ord-it .thumb>img,.ord-it .thumb>.ph{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:6px;display:block}
.ord-it .thumb>.ph{background:var(--surface-2)}
.ord-it .qty{position:absolute;right:.25rem;bottom:.25rem;z-index:2;
  background:rgba(20,14,8,.88);color:var(--gold);border:1px solid var(--gold);
  border-radius:999px;padding:.1rem .4rem;font-family:var(--mono);font-size:.72rem;font-weight:800;line-height:1.3}
.ord-it .tileAll{position:absolute;left:.35rem;top:.35rem;z-index:3;accent-color:var(--gold)}
.ord-it input[hidden]{display:none}

/* ---------- 보관함: 넓은 카드 · 검색 · 페이지 ---------- */
.lk-search{margin:.9rem 0 .5rem}
.lk-search input{width:100%;padding:.6rem .9rem;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--line-strong);color:var(--text);font:inherit;font-size:.9rem}
.lk-f{margin-bottom:.2rem}
.kl-filters a.kl-f{text-decoration:none}

.ord.big .ord-h{padding:.85rem 1rem}
.ord.big .ord-h>img,.ord.big .ord-h>.ph{width:52px;height:52px;border-radius:10px}
.ord.big .ord-ti b{font-size:1rem;white-space:normal}
.ord-chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:.6rem 1rem;border-top:1px solid var(--line)}
.ord-chips .ch{font-size:.76rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:.28rem .6rem}
.ord-chips .ch b{color:var(--text);font-family:var(--mono);margin-left:.2rem}
.ord-chips .st-kept{border-color:var(--gold);color:var(--gold)}
.ord-chips .st-req{border-color:#5b8def;color:#9ab6f5}
.ord-chips .st-ship{border-color:#2FA86B;color:#6fd3a2}
.ord-chips .st-ret{border-color:var(--line-strong)}
.ord-chips .st-pt{border-color:var(--gold);color:var(--gold)}
.ord.big .ord-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;padding:.85rem 1rem 1rem}
.ord.big .ord-it{padding:.5rem}

.pager{display:flex;justify-content:center;align-items:center;gap:.3rem;margin:1.4rem 0 .4rem}
.pg{min-width:36px;height:36px;display:grid;place-items:center;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--muted);
  font-family:var(--mono);font-size:.86rem;text-decoration:none;padding:0 .4rem}
.pg:hover{border-color:var(--gold);color:var(--text)}
.pg.on{background:var(--gold);border-color:var(--gold);color:#201604;font-weight:800}
.pg.off{opacity:.35;pointer-events:none}
.pg.dots{border:0;background:none;pointer-events:none}
@media (max-width:640px){
  .ord.big .ord-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.4rem;padding:.6rem .6rem .75rem}
  .ord.big .ord-h{padding:.65rem .7rem}
  .ord.big .ord-h>img,.ord.big .ord-h>.ph{width:42px;height:42px}
  .ord.big .ord-ti b{font-size:.9rem}
  .ord-chips{padding:.5rem .7rem;gap:.28rem}
  .ord-chips .ch{font-size:.7rem;padding:.24rem .5rem}
  .pg{min-width:32px;height:32px;font-size:.8rem}
}

/* 카드 배지는 작품 이미지 위에 얹힌다. 반투명이면 밝은 그림 위에서 안 읽힌다.
   '판매중' 이 순위 배지 옆에서 사라져 보이던 문제. */
.set-thumb .corner .badge{background:rgba(14,10,8,.82);border:1px solid rgba(255,255,255,.18);
  color:#EFE5D2;text-shadow:0 1px 2px rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.set-thumb .corner .badge.open{background:#1E7A4F;border-color:#2FA86B;color:#EAFFF3}
.set-thumb .corner .badge.soldout{background:#6B2230;border-color:#9C3246;color:#FFE3E8}
.set-thumb .corner .badge.paused{background:#6B5520;border-color:#A8842F;color:#FFF3D6}
.set-thumb .corner .badge.soon{background:#E0A21B;border-color:#F5C451;color:#1E1915;text-shadow:none}   /* 예약 오픈 걸린 오픈 예정 판 (2026-10-28) */
.set-thumb .corner .badge.accent{background:linear-gradient(180deg,#F0D68A,#B8912B);border-color:#F0D68A;color:#2A1F05;text-shadow:none}
.set-thumb .corner .badge.lastone-done{background:rgba(14,10,8,.82);color:#B9AC93}
@media (max-width:640px){
  /* 모바일에서도 순위 배지만큼 비켜 준다 */
  .set-thumb .rank~.corner{left:calc(34px + .4rem)}
  .set-thumb .rank{width:34px;height:34px;font-size:.92rem}
}

/* 법정 고지는 빼면 안 되고 길다. 접어서 둔다 — 클릭 한 번이면 보이므로 '표시' 로 인정된다. */
details.fold>summary{cursor:pointer;list-style:none;padding:.2rem 0;font-size:.92rem;color:var(--text)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:" 펼치기 ▾";font-size:.76rem;color:var(--muted);font-weight:400}
details.fold[open]>summary::after{content:" 접기 ▴"}
details.fold>summary b{margin-right:.3rem}

/* ---------- 양쪽 레일: 왼쪽 남은 상품 · 오른쪽 대기 명단 ----------
   PC 는 본문 양옆 빈 여백에 고정으로 띄우고, 좁은 화면에서는 화면 가장자리에
   작은 탭만 남겨 두고 눌렀을 때 팝업으로 연다. 손님이 제일 자주 보는 두 가지가
   "뭐가 남았나"와 "내 차례가 언제인가"인데, 본문을 스크롤해 찾게 두면 안 본다. */
.rail-tab{position:fixed;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;
  align-items:center;gap:.2rem;width:36px;padding:.6rem .3rem;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);
  font-size:.66rem;font-weight:800;line-height:1.2;text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35)}
.rail-tab.left{left:0;border-left:0;border-radius:0 12px 12px 0}
.rail-tab.right{right:0;border-right:0;border-radius:12px 0 0 12px}
.rail-tab span{font-size:.95rem;line-height:1}
.rail-tab i{font-style:normal;min-width:17px;padding:.05rem .25rem;border-radius:9px;
  background:var(--gold);color:#1a1206;font-size:.64rem;font-weight:900}
.rail-tab.right i{background:var(--red);color:#fff}

/* 남은 상품 레일 — 대기 명단과 같은 틀을 쓴다 */
.p-rail{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);padding:1rem}
.p-rail.show{display:flex}
.p-rail>*{flex:none;background:var(--surface);border:1px solid var(--line-strong)}
.p-rail .pr-head{display:flex;align-items:center;gap:.45rem;width:min(380px,92vw);
  border-radius:12px 12px 0 0;border-bottom:0;padding:.75rem .9rem;font-size:.92rem}
.p-rail .pr-head i{font-style:normal;margin-left:.1rem;padding:.1rem .4rem;border-radius:9px;
  background:var(--gold);color:#1a1206;font-size:.72rem;font-weight:900}
.p-rail .p-list{width:min(380px,92vw);border-radius:0;border-top:0;border-bottom:0;margin:0;
  padding:0 .6rem;max-height:52vh;overflow:auto;list-style:none}
.p-rail .p-more{width:min(380px,92vw);border-radius:0 0 12px 12px;border-top:0;
  padding:.55rem .9rem;color:var(--muted);font-size:.78rem;cursor:pointer;text-align:center}
.p-rail .qr-x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:1rem;cursor:pointer;padding:.1rem .3rem}
/* '더 보기' 가 없을 때는 목록이 상자의 끝이다 — 아래 테두리·모서리가 없으면 잘린 것처럼 보인다 (2026-10-25) */
.p-rail:has(.p-more[hidden]) .p-list{border-bottom:1px solid var(--line-strong);border-radius:0 0 12px 12px;padding-bottom:.25rem}

.p-list li{display:flex;align-items:center;gap:.55rem;padding:.42rem .3rem;border-bottom:1px solid var(--line)}
.p-list li:last-child{border-bottom:0}
.p-list li.out{opacity:.42}
.p-list .im{width:38px;height:38px;border-radius:7px;object-fit:cover;background:var(--code);flex:none}
.p-list .im.noimg{display:grid;place-items:center;font-size:.55rem;color:var(--muted)}
.p-list .tx{flex:1;min-width:0}
.p-list .nm{display:block;font-size:.76rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-list .gd{display:inline-block;padding:.03rem .32rem;border-radius:5px;font-size:.6rem;font-weight:900;
  background:var(--gold);color:#1a1206;margin-bottom:.15rem}
.p-list li.lo .gd{background:var(--line-strong);color:var(--text)}
.p-list li.last .gd{background:linear-gradient(90deg,#ffd76a,#ff9f45);color:#2a1a00}
.p-list .bar2{display:block;height:3px;border-radius:2px;background:var(--code);margin-top:.22rem;overflow:hidden}
.p-list .bar2 i{display:block;height:100%;background:var(--gold)}
.p-list li.lo .bar2 i{background:var(--line-strong)}
.p-list .ct{flex:none;white-space:nowrap;font-size:.74rem;font-weight:900;color:var(--gold)}
.p-list li.lo .ct{color:var(--muted)}
.p-list li.out .ct{color:var(--muted);font-weight:700}

@media (min-width:1280px){
  .rail-tab{display:none}
  .p-rail{position:fixed;inset:auto;left:16px;top:86px;z-index:40;display:block;background:none;padding:0;width:248px}
  .p-rail .pr-head,.p-rail .p-list,.p-rail .p-more{width:248px}
  .p-rail .qr-x{display:none}
  .p-rail .p-list{max-height:52vh}
  /* 양쪽에 레일이 서면 본문은 가운데 그대로 두고 폭만 줄인다 (한쪽만 있을 때처럼 밀면 안 된다) */
  body:has(.p-rail):has(.q-rail) .container.page{max-width:min(1400px,calc(100vw - 2 * 248px - 6rem));right:auto}
}

/* ---------- 봉인 배지 · 검증 팝업 ---------- */
.seal-badge{display:inline-flex;align-items:center;gap:.4rem;margin:.6rem 0 0;padding:.4rem .7rem;
  background:linear-gradient(90deg,rgba(226,199,118,.16),rgba(226,199,118,.06));
  border:1px solid rgba(226,199,118,.4);border-radius:999px;color:var(--text);
  font-size:.76rem;font-weight:700;cursor:pointer}
.seal-badge .sb-v{padding:.02rem .3rem;border-radius:5px;background:var(--gold);color:#1a1206;font-size:.66rem;font-weight:900}
.seal-badge .sb-h{font-family:var(--mono);font-size:.68rem;color:var(--muted)}

/* 봉인 도장 (2026-11-07) — 알약 대신 도장 + 한 줄 설명 + 확인 */
.seal-stamp{display:flex;align-items:center;gap:.75rem;width:100%;margin:.7rem 0 0;padding:.6rem .8rem;border:1px dashed var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.seal-stamp:hover{border-color:var(--red)}
.ss-mark{flex:none;width:3.1rem;height:3.1rem;border-radius:50%;border:2.5px solid var(--red);color:var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;transform:rotate(-12deg);box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 3.5px var(--red)}
.ss-mark b{font-size:.92rem;font-weight:900;letter-spacing:.05em}
.ss-mark small{font-size:.42rem;font-weight:800;letter-spacing:.12em;margin-top:.15rem}
.ss-t{flex:1;min-width:0}
.ss-t b{display:block;font-size:.9rem;font-weight:800}
.ss-t small{display:block;font-size:.74rem;color:var(--muted);margin-top:.1rem;word-break:keep-all}
.ss-t code{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);background:none;padding:0}
.ss-go{flex:none;font-size:.8rem;font-weight:800;color:var(--red)}
.kc-board .kc-links{gap:.35rem .65rem;font-size:.76rem}

.seal-modal{width:min(620px,94vw);max-height:88vh;overflow:auto}
.seal-modal .sm-head{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem .4rem}
.seal-modal .sm-head h3{margin:.1rem 0 0;font-size:1.05rem}
.seal-modal .sm-lock{font-size:1.7rem;flex:none}
.seal-modal .x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:1.05rem;cursor:pointer}
.seal-modal .sm-body{padding:0 1.1rem 1.1rem}
.seal-modal .sm-lead{font-size:.84rem;color:var(--muted);line-height:1.6}
.seal-modal h4{margin:1rem 0 .4rem;font-size:.86rem}
.sm-hash{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.7rem .8rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.sm-hash .sm-hl{width:100%;font-size:.74rem;color:var(--muted)}
.sm-hash .sm-hl b{padding:.02rem .3rem;border-radius:5px;background:var(--gold);color:#1a1206;font-size:.68rem}
.sm-hash code{flex:1;min-width:0;font-family:var(--mono);font-size:.72rem;word-break:break-all;color:var(--text)}
.sm-hist{list-style:none;padding:0;margin:0}
.sm-hist li{padding:.55rem .7rem;border:1px solid var(--line);border-radius:9px;margin-bottom:.4rem;background:var(--surface-2)}
.sm-hist .v{display:inline-block;padding:.02rem .34rem;border-radius:5px;background:var(--gold);color:#1a1206;font-size:.68rem;font-weight:900;margin-right:.35rem}
.sm-hist .r{font-size:.78rem;font-weight:700}
.sm-hist .t{font-size:.7rem;color:var(--muted)}
.sm-hist code{display:block;font-family:var(--mono);font-size:.66rem;color:var(--muted);word-break:break-all;margin-top:.2rem}
.sm-tbl{font-size:.74rem}
.sm-tbl td,.sm-tbl th{padding:.3rem .45rem}
.sm-tbl .ok{color:var(--ok);font-weight:900}
.sm-tbl .no{color:var(--red);font-weight:900}
.sm-tbl .salt{font-family:var(--mono);font-size:.64rem;color:var(--muted);word-break:break-all;max-width:150px}
.sm-how{margin-top:.9rem}
.sm-how summary{cursor:pointer;font-size:.8rem;color:var(--gold)}
.sm-how pre{background:var(--code);padding:.7rem;border-radius:8px;overflow:auto;font-size:.7rem;margin:.5rem 0}

/* 랜덤 장수 직접 입력 — 20장이 끝이 아니다 */
.rand-any{display:inline-flex;align-items:center;gap:.25rem}
.rand-any input{width:62px;padding:.3rem .4rem;text-align:center;font-family:var(--mono);
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:8px;color:var(--text)}
.rand-any input::-webkit-outer-spin-button,.rand-any input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rand-any input[type=number]{-moz-appearance:textfield}
@media (max-width:420px){
  .pr-rand{flex-wrap:wrap;row-gap:.35rem}
  .rand-any{flex:1 0 100%;justify-content:flex-start}
  .rand-any input{flex:1;width:auto;min-width:0}
}

/* 보관함: 이미 처리된 칸은 고를 수 없다는 걸 눈으로 알게 */
.ord-it.done{opacity:.5}
.ord-it.done .thumb{filter:grayscale(.6)}
.ord-it .qty.kept{right:auto;left:4px;background:var(--ok);color:#06220f;font-size:.56rem;padding:.05rem .28rem}

/* 체크박스를 뺀 자리에, 무엇을 동의로 보는지 한 줄 (전자상거래법 제17조 ⑥ 명기 요건) */
.consent .agree{color:var(--gold);font-weight:700}

/* ── 뜯긴 칸에 나온 등급 표시: 등급을 크게, 번호는 작게. 상위상은 금빛 ── */
.ticket.sold.got{text-decoration:none;flex-direction:column;justify-content:center;gap:0}
.ticket.sold.got>span.g{flex:0 0 auto;align-self:center;font-family:var(--sans,inherit);font-weight:800;font-size:.86em;color:var(--ink-2);line-height:1.1;text-decoration:none}
.ticket.sold.got>small{align-self:center;font-family:var(--mono);font-size:.68em;color:var(--muted);line-height:1.1;margin-top:2px}
.legend .got::before{background:rgba(226,199,118,.22);border-color:var(--gold)}
.ticket.sold.got.top{background:linear-gradient(180deg,rgba(226,199,118,.22),rgba(184,145,43,.12));border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(226,199,118,.35)}
.ticket.sold.got.top>span.g{color:var(--gold-2)}
.ticket.sold.got.top>small{color:var(--gold)}
.ticket.sold.got{cursor:pointer}
.ticket.sold.got:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--gold)}
.om-from{display:block;color:var(--gold-2);font-size:1rem}
/* 뜯긴 칸에서 연 상품 창: 무엇이 나왔는지만 (수량·확률 칸은 숨긴다) */
#oddsModal.om-sold .om-kv,#oddsModal.om-sold .om-bar{display:none}
#oddsModal.om-sold .om-note{margin-top:.6rem}
/* 배송 관리: 우체국 엑셀 중량·크기 고르기 */
.ep-sel{padding:.2rem .35rem;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface-2);color:var(--ink);font-size:.85rem}

/* ── 모바일 쿠지 목록: 한 줄에 2장씩 박스로 ──
   위의 '.grid-3 최소 250px' 가 app.css 의 모바일 2열 규칙을 덮어써서 모바일에서 1열로 길게 늘어졌다.
   상단(메인 배너)은 그대로 두고 판 카드 목록만 2열로. 좁은 칸에 맞게 카드를 줄인다:
   등급 썸네일 줄은 숨기고(제목·진행 막대·남은 장수·가격만), 배지·대기 표시는 작게. */
@media (max-width:640px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .set-card{border-radius:12px}
  .set-body{padding:.55rem .6rem .65rem;gap:.35rem}
  .set-title{font-size:.84rem;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .set-strip{display:none}
  .set-meta{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:.1rem;font-size:.7rem}
  .set-meta b{font-size:.82rem}
  .set-price{font-size:1rem;font-weight:800}
  .set-thumb .corner{gap:3px;flex-wrap:wrap;max-width:calc(100% - .6rem)}
  .set-thumb .corner .badge{font-size:.58rem;padding:.12rem .38rem}
  .set-thumb .wait{font-size:.6rem;padding:.12rem .4rem;right:.35rem;bottom:.35rem}
}

/* 상단 카카오톡 오픈채팅 입장 버튼 — 톡방 유입이 중요해서 모든 화면 맨 위에. 카카오 노랑 */
.kakao-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.38rem .7rem;border-radius:999px;background:#FEE500;color:#191919;font-weight:700;font-size:.82rem;line-height:1;white-space:nowrap;text-decoration:none;border:0}
.kakao-btn:hover{background:#FFEB3B;color:#191919}
.kakao-btn svg{flex-shrink:0}
@media (max-width:640px){
  /* 모바일은 지갑·로그아웃과 한 줄에 들어가야 해서 말풍선만 */
  .kakao-btn{padding:.38rem;width:30px;height:30px;justify-content:center}
  .kakao-btn span{display:none}
}


/* ── 판 주의사항 가독성 (전쿠 비교 후) ──
   글이 빽빽하게 붙어 있어 읽기 힘들었다. 색 띠 상자 · 문단 사이 여백 · 줄 간격 · 링크 색. */
.nt-card{background:var(--surface-2);border:1px solid var(--line-strong);border-left:4px solid var(--gold);border-radius:12px;padding:1.05rem 1.2rem;font-size:.93rem;line-height:1.85;color:var(--ink)}
.nt-card.rules{border-left-color:var(--red);color:var(--ink-2)}
.nt-card.nt-yj{border-left-color:var(--red);margin-bottom:.8rem}   /* 용사 모집 진행 방식·환불 (detail.ejs) */
.nt-card .nt-h{font-weight:800;margin:.1rem 0 .5rem}
.nt-card p{margin:0 0 .95rem;word-break:keep-all;overflow-wrap:anywhere}
.nt-card p:last-child{margin-bottom:0}
.nt-card b{color:var(--ink)}
.nt-link,.nt-card a{color:#7DB4FF;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.nt-link:hover,.nt-card a:hover{color:#A9CDFF}
@media (max-width:860px){
  .notice-cols{gap:.75rem}
  .nt-card{padding:.95rem 1rem;font-size:.92rem;line-height:1.8}
}

/* 주의사항 한 상자 (오른쪽 규칙 상자는 뺐다) */
.notice-one{margin-top:.6rem}

/* ── 알아두세요 (2026-11-07) — 공통 규칙은 아이콘 칸, 판마다 적은 내용은 '이 판 안내' 상자 (detail.ejs) ── */
.know{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.know li{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.85rem .9rem}
.know i{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:1.15rem;background:var(--gold-soft)}
.know b{display:block;font-size:.95rem;color:var(--ink);margin-bottom:.15rem}
.know span{display:block;font-size:.85rem;line-height:1.6;color:var(--ink-2);word-break:keep-all}
.know-own{margin-top:.8rem;border:1px dashed var(--line-strong);border-radius:12px;padding:.9rem 1rem;font-size:.92rem;line-height:1.75}
.know-own .nt-h{font-weight:800;margin:0 0 .4rem}
.know-own p{margin:0 0 .45rem;word-break:keep-all;overflow-wrap:anywhere}
.know-own a.nt-link{color:var(--gold-2)}
.know-blog{display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-weight:700;font-size:.88rem;text-decoration:none}
.know-blog small{color:var(--muted);font-weight:500}
.know-blog:hover{border-color:var(--gold)}
@media (max-width:860px){.know{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.know{grid-template-columns:1fr;gap:.45rem}.know li{padding:.7rem .8rem}}

/* 봉인 창: 계산기로 직접 해 보기 */
.sm-manual{margin-top:.8rem;padding:.8rem .9rem;border:1px dashed var(--line-strong);border-radius:10px;background:var(--surface-2);font-size:.86rem}
.sm-manual ol{margin:.4rem 0 .6rem;padding-left:1.2rem;line-height:1.7}
.sm-man-row{padding:.55rem 0;border-top:1px solid var(--line)}
.sm-man-h{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.3rem}
.sm-man-h .btn{margin-left:auto}
.sm-man-row code{display:block;font-size:.72rem;word-break:break-all;white-space:normal;background:var(--surface);padding:.35rem .45rem;border-radius:6px;margin:.15rem 0 .35rem}

/* 결제 수단 고르기 (카드 / 카카오·네이버·토스페이) — 2열 목록. 왼쪽 수단 표시, 오른쪽 선택 동그라미 */
.pay-pick-h{margin:.6rem 0 .3rem;font-size:.78rem;font-weight:700;color:var(--muted)}
.pay-pick{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.35rem 0 .8rem}
.pay-pick-h + .pay-pick{margin-top:0}
.pay-pick.yj-with{grid-template-columns:1fr}   /* 용사 '쿠지 포인트·카드 / 굿즈 포인트'는 글이 길어 한 줄에 하나 */
.pay-opt{position:relative;display:flex;align-items:center;gap:.5rem;min-width:0;padding:.6rem .7rem;border:1px solid var(--line-strong);border-radius:12px;cursor:pointer;font-weight:700;font-size:.92rem;background:var(--surface);transition:border-color .12s,background-color .12s}
.pay-opt span{display:flex;align-items:center;gap:.45rem;min-width:0;line-height:1.25}
.pay-opt input{position:absolute;opacity:0;pointer-events:none}
.pay-opt::after{content:"";flex:none;margin-left:auto;width:1.05rem;height:1.05rem;border-radius:50%;border:1.5px solid var(--line-strong);box-sizing:border-box}
.pay-opt:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}
.pay-opt:has(input:checked)::after{border-color:var(--gold);background:radial-gradient(circle,var(--gold) 0 38%,transparent 42%)}
.pay-opt:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.pay-opt:has(input:disabled){opacity:.45;cursor:not-allowed}
/* 카드·간편결제 칸 — 공식 로고를 가운데 크게, 아래 한글 이름. 로고는 흰 바탕 기준이라(토스 글자가 먹색) 테마와 상관없이 흰 판 */
.pay-pick-logo .pay-opt{flex-direction:column;justify-content:center;gap:.35rem;min-height:4.6rem;padding:.75rem .5rem .6rem;background:#fff;color:#1F1A14;border-color:#E3DCCF}
.pay-pick-logo .pay-opt::after{position:absolute;top:.45rem;right:.45rem;margin:0;width:.95rem;height:.95rem;border-color:#D6CCBB}
.pay-pick-logo .pay-opt:has(input:checked){background:#FFF8E6;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.pay-mark{height:1.55rem;justify-content:center}
.pay-logo{display:block;height:1.55rem;width:auto;max-width:100%}
.pay-tosspay .pay-logo{height:1.1rem}   /* 토스는 알약 바탕 없는 글자 로고라 같은 높이면 커 보인다 */
.pay-card-ic{display:block;width:2.1rem;height:1.45rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 21'%3E%3Crect x='1' y='1' width='28' height='19' rx='3.5' fill='%23F3EFE8' stroke='%235B6472' stroke-width='1.8'/%3E%3Cpath d='M1 6.5h28' stroke='%235B6472' stroke-width='2.6'/%3E%3Crect x='5' y='12.5' width='7' height='3' rx='1' fill='%235B6472'/%3E%3C/svg%3E") center/contain no-repeat}
.pay-name{font-size:.74rem;font-weight:600;color:#7A6F63;justify-content:center;text-align:center}
.pay-pick-logo .pay-opt:has(input:checked) .pay-name{color:#1F1A14;font-weight:700}

/* 용사 배틀 화면 (2026-10-25) — 캔버스 한 장. 보스 위, 작은 몬스터 가운데, 참가자 아래 */
.yj-battle{flex:none;width:100%;max-width:760px;margin:1rem auto 0;border:1px solid var(--gold);border-radius:18px;overflow:hidden;background:#140B16;
  box-shadow:0 0 0 3px rgba(226,199,118,.18),0 30px 70px rgba(0,0,0,.6);animation:yjIn .4s ease-out}
.yj-battle .yb-wrap{position:relative;width:100%}
.yj-battle canvas{display:block;width:100%}
.yj-battle .yb-cap{padding:.6rem .9rem;font-size:.85rem;color:#F4EFE4;background:#1E1220;border-top:1px solid rgba(226,199,118,.35);text-align:center;line-height:1.5}
.yj-battle .yb-cap b{color:#FFE14A}

/* 용사 모집 — 남은 전리품을 등수 순서대로 한 줄 (넘치면 옆으로 밀어서 본다) */
.yj-lootrow{display:flex;gap:.6rem;overflow-x:auto;padding:.5rem .1rem .8rem;margin:.3rem 0 .6rem;scroll-snap-type:x proximity}
.yj-lootrow .lc{flex:0 0 112px;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.5rem .45rem .55rem;border-radius:12px;background:var(--surface);border:1px solid var(--line-strong);text-align:center}
.yj-lootrow .lc img,.yj-lootrow .lc .noimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--code);display:grid;place-items:center;font-size:.7rem;color:var(--muted)}
.yj-lootrow .lc .g{position:absolute;top:-.45rem;left:.45rem;padding:.08rem .45rem;border-radius:6px;font-size:.66rem;font-weight:900;background:var(--line-strong);color:var(--ink)}
.yj-lootrow .lc.top{border-color:var(--gold)}
.yj-lootrow .lc.top .g{background:var(--red);color:#fff}
.yj-lootrow .lc.last{border-color:var(--gold);background:linear-gradient(180deg,#FFF6D8,var(--surface))}
.yj-lootrow .lc.last .g{background:linear-gradient(180deg,#F0D68A,#B8912B);color:#2A1F05}
.yj-lootrow .lc b{font-size:.95rem;font-weight:900;margin-top:.2rem}
.yj-lootrow .lc small{font-size:.68rem;color:var(--muted)}
@media (max-width:640px){.yj-lootrow .lc{flex-basis:96px}}

/* ── 판 상세 2단 (2026-11-07) — 왼쪽: 판 그림·보스 토벌·알아두세요·상품 구성·종이판·고지 / 오른쪽: 카운터(.kc-board)가 따라 내려온다.
   예전 양옆 고정 패널은 숨기지 않고 카운터 안으로 옮겼다 — 남은 상위상은 맨 위 사진 띠, 대기 명단은 줄서기 상자 안에 늘 펼쳐서. detail.ejs ── */
.kd2{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:1.6rem;row-gap:0;max-width:1240px;margin:0 auto;align-items:start}
.kd2>*{grid-column:1;min-width:0}
/* 카운터가 화면보다 길어지면 아래쪽이 따라오다 잘린다 — 화면 높이 안(위 메뉴 88px · 아래 고정 바 약 80px 빼고)에서 카운터만 따로 스크롤 */
.kd2>.kc-board{grid-column:2;grid-row:1 / span 40;position:sticky;top:88px;align-self:start;max-height:calc(100vh - 88px - 96px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.kd2>.kc-board>*{flex-shrink:0}   /* 카운터는 세로 flex — 높이를 묶으면 안의 줄서기 상자가 납작하게 눌려 잘린다. 줄이지 말고 카운터를 스크롤 */
.kd2>.kc-poster{aspect-ratio:16/9;min-height:0}
.kd2>.kc-poster img{object-fit:cover}
/* 남은 상위상 띠 — 쇼핑몰 랭킹 카드처럼 사진 위에 등급·남은 수를 얹는다. 다 나간 건 흑백 + 완료 도장으로 뒤에 (kuji.js renderPrizeRail) */
.kc-tops{min-width:0}
.kc-tops-h{display:flex;align-items:baseline;gap:.3rem;color:var(--ink);text-decoration:none;font-size:.86rem;font-weight:800;margin:0 0 .45rem}
.kc-tops-h b{font-size:1.2rem;color:var(--red);font-weight:900}
.kc-tops-h small{color:var(--muted);font-weight:700}
.kc-tops-h em{margin-left:auto;font-style:normal;font-size:.76rem;font-weight:700;color:var(--muted)}
.kc-tops-h:hover em{color:var(--ink)}
.kc-tops-row{list-style:none;margin:0;padding:0 0 .35rem;display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.kc-tops-row li{flex:0 0 92px;scroll-snap-align:start}
.kc-tops-row button{display:block;width:100%;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.kc-tops-row .tp-im{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.kc-tops-row .tp-im img{width:100%;height:100%;object-fit:contain;display:block}
.kc-tops-row .tp-im .noimg{display:grid;place-items:center;width:100%;height:100%;font-size:.62rem;letter-spacing:.15em;color:var(--muted)}
.kc-tops-row .tp-g{position:absolute;left:0;top:0;background:var(--red);color:#fff;font-size:.68rem;font-weight:900;padding:.12rem .42rem;border-radius:0 0 7px 0;letter-spacing:-.02em}
.kc-tops-row li.last .tp-g{background:#FCE073;color:#1E1915}
.kc-tops-row .tp-left{position:absolute;left:4px;bottom:4px;background:rgba(30,25,21,.8);color:#fff;font-size:.64rem;font-weight:800;padding:.08rem .34rem;border-radius:4px}
.kc-tops-row .tp-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.3rem;font-size:.72rem;line-height:1.3;color:var(--ink)}
.kc-tops-row li.out .tp-im img{filter:grayscale(1);opacity:.45}
.kc-tops-row li.out .tp-g{background:#9B8F80}
.kc-tops-row li.out .tp-n{color:var(--muted)}
.kc-tops-row .tp-done{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-14deg);border:2.5px solid #8B6F55;color:#8B6F55;border-radius:6px;padding:.02rem .42rem;font-size:.82rem;font-weight:900;background:rgba(255,255,255,.8)}
.kc-tops-row button:hover .tp-im{border-color:var(--ink)}
/* 대기 명단 — 줄서기 상자 안에 늘 펼쳐 둔다. 앞 5명 + 내 자리, 사이는 더 보기 (kuji.js queue render) */
.kc-qlist{margin-top:.2rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.55rem}
.kc-qlist-h{display:flex;align-items:center;gap:.45rem;font-size:.82rem}
.kc-qlist-h span:last-child{margin-left:auto;opacity:.8;font-size:.78rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-qlist .q-list{max-height:none;overflow:visible;margin:.5rem 0 .4rem;padding:0;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.kc-qlist .q-list li{border-color:rgba(255,255,255,.08);color:#F3EAD6}
.kc-qlist .q-list .n{background:rgba(255,255,255,.12);color:#D9CDB8}
.kc-qlist .q-list li.me{background:rgba(252,224,115,.16);color:#FCE073}
.kc-qlist .q-list li.me .n{background:var(--red);color:#fff}
.kc-qlist .q-list li.cur{background:rgba(64,170,104,.2)}
.kc-qlist .q-list li.cur .tag{color:#7FD9A0}
.kc-qlist .q-list li.muted{color:#BFB3A0}
.kc-qlist .q-list li.q-more button,.kc-qlist .q-list li.q-after{color:#BFB3A0}
.kc-qlist .q-list li.q-more button:hover{color:#FCE073}
.q-list li.q-more{justify-content:center;padding:.3rem .7rem}
.q-list li.q-more button{padding:0;border:0;background:none;font:inherit;font-size:.78rem;font-weight:700;color:var(--muted);cursor:pointer}
.q-list li.q-more button:hover{color:var(--ink)}
.q-list li.q-after{font-size:.76rem;color:var(--muted)}
.kc-qlist .qr-note{margin:0;font-size:.74rem;color:#A89B88}
@media (max-width:900px){
  .kd2{display:block}
  .kd2>.kc-board{position:static;margin-top:1rem;max-height:none;overflow:visible}
}