* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Apple SD Gothic Neo', sans-serif; }
:root{ --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
:root{ --paper: url("/paper.png"); }
body { background: #050508; color: #fff; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-x: hidden; }
.container { width: 100%; max-width: 480px; min-height: 100vh; background: #121216; display: flex; flex-direction: column; position: relative; box-shadow: 0 0 30px rgba(0,0,0,0.9); border: 1px solid #2b2b38; }

.app-header { background: #16161c; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #3a3a4d; }
.app-title { font-size: 16px; font-weight: 800; color: #ffd35c; text-shadow: 0 0 10px rgba(255,211,92,.45); letter-spacing:.3px;  text-decoration:none; }
.admin-btn { background: #2b2b38; color: #ddd; border: 1px solid #444; padding: 6px 10px; border-radius: 8px; font-size: 11px; cursor: pointer; font-weight: 700; }

/* 네온 그리드 배경 (레퍼런스 키오스크 화면톤) */
.neon-grid { background-color:#0c0c14;
  background-image:
    linear-gradient(rgba(124,58,237,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.25) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 20%, rgba(99,102,241,.25), transparent 60%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
  position:relative;
}
/* 키오스크 본체 좌우 LED 프레임 느낌 */
.neon-grid::before, .neon-grid::after{ content:''; position:absolute; top:0; bottom:0; width:5px; z-index:1;
  background:linear-gradient(180deg,#7c3aed,#3b82f6,#ec4899,#7c3aed); background-size:100% 200%; filter:blur(1.5px); opacity:.9; animation:ledflow 3s linear infinite; }
.neon-grid::before{ left:0; } .neon-grid::after{ right:0; }
@keyframes ledflow{ 0%{background-position:0 0;} 100%{background-position:0 200%;} }

#lobby-screen { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; }
.lobby-desc { font-size: 13px; color: #9a9ab0; text-align: center; line-height: 1.5; }
.series-card { background: linear-gradient(160deg,#1e1e28,#171720); border-radius: 14px; padding: 16px; cursor: pointer; border: 1px solid #34344a; display: flex; flex-direction: column; gap: 7px; }
.series-card:active { transform: scale(.98); }
.series-name { font-size: 15px; font-weight: 800; color: #fff; }
.series-info { font-size: 12px; color: #ffd35c; }
.last-badge { background: #ef4444; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; align-self: flex-start; }

#game-screen { display: flex; flex-direction: column; flex: 1; padding: 12px; }
.game-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.back-btn { background: #2b2b38; color: white; border: 1px solid #444; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700;  text-decoration:none; white-space:nowrap; }
.board-title { font-size: 14px; font-weight: 800; color: #ffd35c; text-align:center; flex:1; min-width:0; padding:0 6px; }
.board-title span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-title small { display:block; font-size:10px; font-weight:600; color:#b9a7e6; margin-top:2px; }
.top-actions { display:flex; gap:6px; }

.kiosk-control-bar { background: rgba(20,10,32,.75); border: 2px solid #ec4899; border-radius: 12px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 0 18px rgba(236,72,153,.35), inset 0 0 14px rgba(236,72,153,.15); position:relative; z-index:2; }
.kiosk-guide-text { font-size: 11px; color: #d9c3e6; text-align: center; line-height: 1.35; }
.kiosk-action-row { display: flex; justify-content: space-between; align-items: center; gap:8px; }
.selected-counter { background: rgba(255,211,92,.1); border: 1px solid #ffd35c; color: #ffe9a8; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; flex:1; text-align:center; }
.random-btn { background: linear-gradient(135deg,#a855f7,#6d28d9); color: white; border: none; padding: 8px 14px; border-radius: 999px; font-size: 11px; font-weight: 800; cursor: pointer; box-shadow:0 0 12px rgba(168,85,247,.6); }

.ticket-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; overflow-y: auto; max-height: 50vh; padding: 4px; flex: 1; position:relative; z-index:2; }
.ticket-cell { aspect-ratio: 1.15; border-radius: 6px; position:relative; overflow:hidden; cursor: pointer; transition: transform .1s;
  background-image: var(--paper), var(--noise), linear-gradient(160deg,#ffb545,#f2790f);
  background-size: 140px 140px, auto, auto;
  background-blend-mode: overlay, overlay, normal;
  border: 1px solid #d9720a; box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.ticket-cell:active { transform: scale(.93); }
.ticket-cell::before{ content:'◈'; position:absolute; top:14%; left:50%; transform:translateX(-50%); font-size:13px; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); }
.ticket-cell::after{ content:''; position:absolute; left:12%; right:12%; bottom:14%; height:16%; border-radius:2px; opacity:.6;
  background-image: repeating-linear-gradient(90deg,#2a1400 0 2px, transparent 2px 4px); }
.ticket-cell.selected { box-shadow: 0 0 0 2px #a855f7, 0 0 14px rgba(168,85,247,.85); }
.ticket-cell.opened { background-image: var(--paper), var(--noise), linear-gradient(165deg,#4a4a58,#17171c 60%); background-size:140px 140px, auto, auto; background-blend-mode: soft-light, overlay, normal; color: #f4f4fa; border-color:#000; display:flex; align-items:center; justify-content:center; box-shadow: 0 3px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18); }
.ticket-cell.opened::before, .ticket-cell.opened::after{ content:none; }
.ticket-cell.opened span{ font-size:14px; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.ticket-cell .chk { position: absolute; top: -6px; right: -6px; width: 17px; height: 17px; background: #a855f7; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; box-shadow: 0 0 0 2px #121216; z-index:3; }

.kiosk-start-btn { width: 100%; background: linear-gradient(135deg,#ef4444,#b91c1c); color: white; border: 1px solid #f87171; padding: 13px; border-radius: 10px; font-size: 15px; font-weight: 800; cursor: pointer; margin-top: 8px; box-shadow: 0 0 18px rgba(239,68,68,.35); position:relative; z-index:2; }
.kiosk-start-btn:disabled { background: #2b2b38; border-color: #444; color: #666; box-shadow: none; cursor: not-allowed; }

/* ===== 개봉 모달 ===== */
#tear-modal { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; flex-direction:column; padding: 20px; }
.modal-prog { color:#a9a9c6; font-size:12px; margin-bottom:6px; letter-spacing:1px; }
.modal-guide { font-size:14px; font-weight:800; color:#fff; text-align:center; margin-bottom:18px; }
.modal-guide span { display:block; font-size:11px; font-weight:500; color:#9a9ab0; margin-top:5px; }

.card-stage { width:100%; display:flex; justify-content:center; position:relative; }
/* 바깥 오렌지 프레임은 고정. 절대 돌아가거나 움직이지 않음 - 그 안의 작은 티켓만 뜯김 */
.reveal-card { position:relative; width:250px; height:230px; border-radius:18px; padding:14px;
  background-image: var(--paper), var(--noise), linear-gradient(160deg,#f0923a,#d9600a);
  background-size:260px 260px, auto, auto; background-blend-mode: overlay, overlay, normal;
  box-shadow:0 10px 26px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.25); }
.inner-stage { position:relative; width:100%; height:100%; perspective:1200px; }

/* 항상 존재하는 밑면: 절취선 모양(양쪽 톱니) 등급 플레이트 - 프레임 안쪽에 작게 들어있고, 커버를 넘기면 이 카드가 드러남 */
.rc-base { position:absolute; inset:0; border-radius:6px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 16px rgba(0,0,0,.5); }
.rc-top-band { height:32px; background:linear-gradient(90deg,#4fb6ff,#3fa0f0); display:flex; align-items:center; justify-content:center; color:#052338; font-weight:900; font-size:12px; letter-spacing:3px; flex-shrink:0; }
.rc-grade-plate { flex:1; background:#101014; display:flex; align-items:flex-end; justify-content:center; gap:6px; padding-bottom:20px;
  clip-path: polygon(0% 0%,100% 0%,94% 10%,100% 20%,94% 30%,100% 40%,94% 50%,100% 60%,94% 70%,100% 80%,94% 90%,100% 100%,0% 100%,6% 90%,0% 80%,6% 70%,0% 60%,6% 50%,0% 40%,6% 30%,0% 20%,6% 10%,0% 0%); }
.rc-grade-plate span { font-size:64px; font-weight:900; color:#fff; line-height:1; }
.rc-grade-plate small { font-size:16px; color:#ddd; font-weight:800; margin-bottom:10px; }

/* 뜯기 전 커버(플랩): 절취선을 축으로 책장처럼 넘어감. 다 넘어가도 사라지지 않고 뒤집힌 채 남음 */
.rc-flap { position:absolute; inset:0; transform-style:preserve-3d; transform-origin:100% 50%; transform:rotateY(0deg); border-radius:6px; box-shadow:-2px 0 14px rgba(0,0,0,.4); }
.rc-flap-face { position:absolute; inset:0; backface-visibility:hidden; border-radius:6px; display:flex; flex-direction:column; padding:12px; }
.rc-flap-face.front { background-image: var(--paper), var(--noise), repeating-linear-gradient(35deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px), linear-gradient(160deg,#f0923a,#d9600a); background-size:260px 260px, auto, auto, auto; background-blend-mode: overlay, overlay, soft-light, normal; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), inset 0 0 18px rgba(0,0,0,.15); }
.rc-flap-face.front::before { content:''; position:absolute; right:6px; top:10px; bottom:10px; border-right:4px dashed rgba(255,255,255,.9); z-index:2; }
.fold-shade { position:absolute; inset:0; background:linear-gradient(270deg, rgba(0,0,0,.5), transparent 55%); opacity:var(--fold, 0); pointer-events:none; border-radius:inherit; }
.rc-logo { display:flex; align-items:center; gap:5px; color:#fff; font-weight:900; font-size:12px; margin-left:8px; }
.rc-logo .diamond { width:16px; height:16px; background:#fff; transform:rotate(45deg); border-radius:2px; box-shadow:inset 0 0 0 3px #e0620a; }
.rc-preview { margin-top:12px; margin-left:8px; color:#fff; font-size:13px; font-weight:800; line-height:1.45; flex:1; text-shadow:0 1px 1px rgba(0,0,0,.2); }
.rc-handle { width:52px; height:52px; border-radius:50%; margin:4px 0 8px 8px;
  background:radial-gradient(circle at 35% 30%,#fff,#eafbee 55%,#bdf0c4); border:4px solid #22c55e;
  display:flex; align-items:center; justify-content:center; font-size:20px; color:#16a34a; cursor:grab;
  box-shadow:0 0 16px rgba(34,197,94,.65); }
.rc-barcode { align-self:flex-end; width:76px; height:20px; opacity:.85; border-radius:2px;
  background-image:repeating-linear-gradient(90deg,#3a1e00 0 2px, transparent 2px 4px); }
.rc-flap-face.back { transform:rotateY(180deg); background-image: var(--paper), linear-gradient(160deg,#f7f5f0,#e9e4da); background-size:260px 260px, auto; background-blend-mode:overlay,normal; box-shadow:inset 0 0 16px rgba(0,0,0,.18); align-items:center; justify-content:center; }
.rc-flap-face.back::after { content:'뜯음'; font-size:11px; color:#b8a988; font-weight:800; letter-spacing:3px; }

.sparkle-anim { position:absolute; inset:-40px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.9),transparent 60%); opacity:0; pointer-events:none; z-index:1; }
.sparkle-anim.show { animation:sparklePulse .9s ease-out; }
@keyframes sparklePulse { 0%{opacity:0; transform:scale(.3);} 35%{opacity:1;} 100%{opacity:0; transform:scale(1.7);} }
@keyframes sh { 0%,100%{transform:translateX(0);} 50%{transform:translateX(10px);} }

.banner { position:absolute; top:-36px; left:0; width:100%; text-align:center; font-size:16px; font-weight:900; color:#ffd35c; text-shadow:0 0 10px rgba(255,211,92,.7); display:none; z-index:20; }

.action-btn { margin-top:44px; width:100%; max-width:300px; background:linear-gradient(135deg,#ef4444,#b91c1c); color:white; border:1px solid #f87171; padding:13px; border-radius:10px; font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 4px 14px rgba(239,68,68,.4); }
.close-btn { margin-top:20px; width:100%; max-width:300px; background:linear-gradient(135deg,#4fb6ff,#2e8fe0); color:#052338; border:none; padding:13px; border-radius:10px; font-size:15px; font-weight:900; cursor:pointer; display:none; }

/* 티켓 개봉 직후 - 실물 상품 카드 패널 */
.prize-panel { display:none; margin-top:14px; background:#fff; border-radius:12px; padding:12px; width:100%; max-width:300px; flex-direction:row; align-items:center; gap:12px; box-shadow:0 6px 18px rgba(0,0,0,.4); }
.prize-panel .thumb { width:52px; height:52px; border-radius:10px; background:linear-gradient(155deg,#dbeafe,#93c5fd); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; }
.prize-panel .info b { display:block; font-size:10px; background:#ffd35c; color:#4a2600; padding:2px 6px; border-radius:4px; width:fit-content; font-weight:900; margin-bottom:4px; }
.prize-panel .info span { font-size:12px; color:#1c2333; font-weight:700; line-height:1.3; }

/* ===== 관리자 ===== */
#admin-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:2000; align-items:center; justify-content:center; }
.admin-box { width:90%; max-width:400px; max-height:80vh; background:#18181f; border-radius:14px; padding:18px; display:flex; flex-direction:column; border:1px solid #3a3a4d; }
.admin-list { overflow-y:auto; flex:1; margin:10px 0; display:flex; flex-direction:column; gap:7px; }
.admin-item { display:flex; gap:6px; align-items:center; background:#0f0f16; padding:6px; border-radius:8px; font-size:12px; }
.admin-item input { background:#1e1e28; color:#fff; border:1px solid #3a3a4d; padding:5px; border-radius:6px; font-size:11px; }

/* ===== 결과 요약 (고급 축하 화면) ===== */
#summary-screen { display:none; position:fixed; inset:0; z-index:900; flex-direction:column; align-items:center; padding:36px 20px; overflow-y:auto; }
.sum-hd { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:380px; margin-bottom:26px; }
.grade-pill { background:radial-gradient(circle,#ffe98a,#ffb914); color:#4a2600; font-weight:900; font-size:14px; padding:8px 16px; border-radius:999px; box-shadow:0 0 18px rgba(255,201,42,.6); }
.sum-hd h2 { color:#fff; font-size:20px; font-weight:900; text-shadow:0 0 12px rgba(124,58,237,.6); }
.win-arc { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:380px; margin-bottom:18px; }
.win-item { width:78px; text-align:center; }
.win-item .icon { width:64px; height:64px; margin:0 auto 6px; border-radius:14px; background:radial-gradient(circle at 35% 30%,#eafff3,#7ef0b0 70%); display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 0 16px rgba(126,240,176,.55), 0 4px 10px rgba(0,0,0,.4); animation:float 2.4s ease-in-out infinite; }
.win-item:nth-child(2n) .icon{ animation-delay:.3s; }
.win-item:nth-child(3n) .icon{ animation-delay:.6s; }
@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.win-item .g { font-size:11px; font-weight:900; color:#ffd35c; }
.win-item .n { font-size:9px; color:#c5c5da; margin-top:2px; line-height:1.3; }
.print-line { font-size:12px; color:#9a9ab0; text-align:center; margin-top:6px; }
.print-line b { color:#fff; }
#summary-screen button { margin-top:26px; background:linear-gradient(135deg,#4fb6ff,#2e8fe0); color:#052338; border:none; padding:13px 34px; border-radius:10px; font-weight:900; font-size:14px; }
.conf { position:fixed; top:-20px; border-radius:2px; z-index:1500; pointer-events:none; }

.disclosure{display:none;font-size:10px;color:#8b8ba0;padding:6px 14px;text-align:center;border-bottom:1px solid #2a2a36;line-height:1.4}
.ad-slot{width:100%;max-width:380px;margin:10px auto;text-align:center;overflow:hidden}
.ad-slot:empty{display:none;margin:0}
#lobby-screen .ad-slot{max-width:none}
.about{margin-top:6px;padding:14px;border:1px solid #2a2a36;border-radius:12px;background:rgba(255,255,255,.02)}
.about h2{font-size:13px;color:#ffd35c;margin:10px 0 4px}
.about h2:first-child{margin-top:0}
.about p{font-size:12px;color:#a9a9c6;line-height:1.6}
.site-foot{font-size:11px;color:#6f6f85;text-align:center;padding:12px 0 24px;line-height:1.6}
.site-foot a{color:#8b8ba0}
.share-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%;max-width:380px;margin-top:6px}
.share-row button{flex:1 1 44%;margin:0!important;padding:12px 8px!important;border-radius:10px!important;font-size:13px!important}
.sh-kakao{background:#fee500!important;color:#191919!important}
.sh-copy{background:#2b2b38!important;color:#fff!important}
.sh-native{background:linear-gradient(135deg,#a855f7,#6d28d9)!important;color:#fff!important}
.sh-x{background:#000!important;color:#fff!important;border:1px solid #444!important}
.share-hint{font-size:12px;color:#9a9ab0;margin:4px 0 10px;text-align:center}

/* ===== 내 쿠지판 (v2) ===== */
.all-done{ margin:8px 0; padding:12px; text-align:center; font-size:14px; font-weight:800; color:#ffd35c; background:rgba(255,211,92,.08); border:1px solid rgba(255,211,92,.4); border-radius:10px; position:relative; z-index:2; }
.all-done span{ font-size:11px; font-weight:500; color:#d9c3e6; }
.notfound{ flex:1; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 24px; gap:12px; }
.nf-emoji{ font-size:44px; } .nf-title{ font-size:17px; font-weight:800; }
.notfound p{ font-size:13px; color:#9a9ab0; line-height:1.6; }
.nf-btn{ margin-top:8px; background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; text-decoration:none; font-weight:800; padding:13px 22px; border-radius:10px; font-size:14px; }

/* 설정 모달 */
.admin-box{ max-width:440px; max-height:90vh; }
.ed-label{ font-size:11px; color:#9a9ab0; margin:12px 0 4px; }
.ed-input{ background:#1e1e28; color:#fff; border:1px solid #3a3a4d; padding:8px; border-radius:6px; font-size:13px; width:100%; min-width:0; }
.ed-row{ background:#0f0f16; border:1px solid #2a2a38; border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:6px; }
.ed-line{ display:flex; align-items:center; gap:5px; }
.ed-line .ed-grade{ flex:1; } .ed-line .ed-icon{ width:46px; flex:none; text-align:center; } .ed-line .ed-count{ width:64px; flex:none; }
.ed-x{ color:#9a9ab0; font-size:12px; }
.ed-mini{ background:#2b2b38; color:#ddd; border:1px solid #444; border-radius:6px; padding:6px 7px; font-size:11px; cursor:pointer; flex:none; }
.ed-mini:disabled{ opacity:.35; cursor:default; }
.ed-chk{ font-size:11px; color:#b8b8cc; display:flex; align-items:center; gap:6px; }
.ed-chk input{ width:auto; }
.ed-lastrow{ border-color:#5c4a14; }
.ed-lastname{ color:#ffd35c; font-weight:800; font-size:12px; }
.ed-add{ margin-top:4px; background:#1e1e28; color:#c9c9de; border:1px dashed #4a4a60; border-radius:8px; padding:10px; font-size:13px; font-weight:700; cursor:pointer; }
.ed-total{ margin-top:8px; font-size:12px; font-weight:800; color:#7ef0b0; text-align:center; }
.ed-total.bad{ color:#ff8a8a; }
.ed-del{ margin-top:12px; background:none; border:none; color:#a35a5a; font-size:12px; text-decoration:underline; cursor:pointer; }

/* ===== 랜딩 ===== */
.landing{ padding:20px; display:flex; flex-direction:column; gap:14px; flex:1; }
.hero{ text-align:center; padding:8px 0 4px; }
.hero h1{ font-size:21px; line-height:1.35; color:#fff; text-shadow:0 0 14px rgba(124,58,237,.6); }
.hero p{ margin-top:8px; font-size:13px; color:#9a9ab0; line-height:1.6; }
.sec-title{ font-size:13px; font-weight:800; color:#ffd35c; margin-top:6px; }
.board-card{ display:flex; align-items:center; gap:10px; background:linear-gradient(160deg,#1e1e28,#171720); border:1px solid #34344a; border-radius:14px; padding:14px; text-decoration:none; color:inherit; }
.board-card .bc-main{ flex:1; min-width:0; }
.board-card .bc-name{ font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-card .bc-info{ font-size:12px; color:#ffd35c; margin-top:4px; }
.board-card .bc-del{ background:none; border:1px solid #444; color:#9a9ab0; border-radius:8px; padding:6px 8px; font-size:11px; cursor:pointer; }
.tpl-card{ cursor:pointer; text-align:left; width:100%; color:#fff; font-family:inherit; }
.tpl-card:active{ transform:scale(.98); }
.how{ margin-top:6px; padding:14px; border:1px solid #2a2a36; border-radius:12px; background:rgba(255,255,255,.02); }
.how h2{ font-size:13px; color:#ffd35c; margin-bottom:6px; }
.how p{ font-size:12px; color:#a9a9c6; line-height:1.7; }