*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fff8ed;--surface:#ffffff;--surface2:#fef3e2;
  --border:#f0d9b5;--border2:#e8c88a;--border3:#d4a853;
  --accent:#7c3aed;--accent2:#a855f7;
  --red:#ef4444;--gold:#d97706;--teal:#0891b2;
  --text:#2d1b69;--muted:#9177c4;--muted2:#b99de8;
  --pc:#6366f1;--tablet:#ec4899;--mobile:#10b981;
  --green:#10b981;
  --r:10px;
  --shadow:0 4px 24px rgba(124,58,237,.10);
  --shadow-card:0 2px 12px rgba(124,58,237,.08);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;min-height:100vh;overflow-x:hidden;}

/* 배경 패턴 */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(124,58,237,.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(217,119,6,.07) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(236,72,153,.04) 0%, transparent 60%);
}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='%237c3aed' fill-opacity='0.05'/%3E%3C/svg%3E");
}

/* ── 헤더 ── */
header{position:relative;z-index:1;padding:clamp(2.5rem,6vw,4.5rem) clamp(1.25rem,5vw,4rem) 1.5rem;text-align:center;overflow:hidden;}
.halo{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:clamp(300px,80vw,900px);height:300px;
  background:radial-gradient(ellipse at 50% 30%, rgba(124,58,237,.12) 0%, rgba(217,119,6,.06) 45%, transparent 70%);
  pointer-events:none;}
.crown-deco{position:absolute;top:1.2rem;left:50%;transform:translateX(-50%);font-size:1.6rem;opacity:.18;pointer-events:none;letter-spacing:3rem;}

.title-wrap{display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.4rem);}
.title-line{flex:1;max-width:clamp(30px,6vw,90px);height:2px;background:linear-gradient(90deg,transparent,var(--gold));border-radius:2px;}
.title-line.r{background:linear-gradient(90deg,var(--gold),transparent);}

h1{font-family:'Lilita One',cursive;font-size:clamp(2.2rem,9vw,6.5rem);font-weight:400;letter-spacing:.04em;line-height:1;
  background:linear-gradient(135deg,#7c3aed 0%,#a855f7 40%,#d97706 70%,#f59e0b 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 8px rgba(124,58,237,.25));}
h1 .word2{background:linear-gradient(135deg,#d97706 0%,#f59e0b 50%,#fbbf24 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.crown{font-size:clamp(1.2rem,4vw,3rem);vertical-align:middle;margin:0 .15em;-webkit-text-fill-color:initial;filter:drop-shadow(0 2px 6px rgba(217,119,6,.4));}
.sub{margin-top:.7rem;font-size:clamp(.68rem,.95vw,.8rem);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-weight:600;}

/* ── 유저 영역 ── */
.user-area{position:absolute;top:1.2rem;right:clamp(1rem,4vw,2.5rem);z-index:10;display:flex;align-items:center;gap:.5rem;}
.btn-user{background:white;border:2px solid var(--border);color:var(--muted);font-family:'Nunito',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.08em;padding:.4rem .9rem;border-radius:20px;cursor:pointer;transition:border-color .2s,color .2s,box-shadow .2s;display:flex;align-items:center;gap:.4rem;box-shadow:var(--shadow-card);}
.btn-user:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 4px 16px rgba(124,58,237,.15);}
.btn-user svg{width:14px;height:14px;fill:currentColor;flex-shrink:0;}
.user-chip{background:white;border:2px solid var(--border2);border-radius:20px;padding:.35rem .85rem;font-size:.75rem;color:var(--accent);font-weight:700;display:flex;align-items:center;gap:.4rem;box-shadow:var(--shadow-card);}
.user-chip svg{width:13px;height:13px;fill:var(--accent);}
.user-chip.is-admin{border-color:var(--gold);color:var(--gold);}
.user-chip.is-admin svg{fill:var(--gold);}
.pts-chip{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:2px solid #6ee7b7;border-radius:20px;padding:.35rem .8rem;font-size:.75rem;color:#047857;font-weight:700;font-family:'Nunito',sans-serif;display:flex;align-items:center;gap:.3rem;white-space:nowrap;box-shadow:0 2px 8px rgba(16,185,129,.12);}
.pts-chip svg{width:12px;height:12px;fill:#10b981;}
.admin-badge{font-size:.6rem;background:rgba(217,119,6,.12);border:1px solid rgba(217,119,6,.3);border-radius:6px;padding:.05rem .4rem;font-weight:800;color:var(--gold);}
.btn-logout{background:white;border:2px solid #fecaca;color:#ef4444;font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:700;padding:.32rem .7rem;border-radius:20px;cursor:pointer;transition:border-color .2s,color .2s,box-shadow .2s;box-shadow:var(--shadow-card);}
.btn-logout:hover{border-color:#ef4444;box-shadow:0 4px 12px rgba(239,68,68,.15);}
.btn-admin{background:linear-gradient(135deg,#fffbeb,#fef3c7);border:2px solid #fcd34d;color:var(--gold);font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:800;padding:.32rem .75rem;border-radius:20px;cursor:pointer;transition:box-shadow .2s;text-decoration:none;display:flex;align-items:center;gap:.3rem;box-shadow:0 2px 8px rgba(217,119,6,.12);}
.btn-admin:hover{box-shadow:0 4px 16px rgba(217,119,6,.25);}
/* 클릭 가능한 유저 칩 */
a.user-chip{text-decoration:none;cursor:pointer;transition:box-shadow .2s,filter .15s;}
a.user-chip:hover{box-shadow:0 4px 16px rgba(0,229,255,.22);filter:brightness(1.06);}
a.user-chip.is-admin:hover{box-shadow:0 4px 16px rgba(217,119,6,.25);filter:brightness(1.06);}
a.m-user-chip{text-decoration:none;cursor:pointer;transition:filter .15s;}
a.m-user-chip:hover{filter:brightness(1.08);}

/* ── 장르/플랫폼 바 ── */
.pbar{position:sticky;top:0;z-index:5;background:rgba(255,248,237,.95);backdrop-filter:blur(12px);border-bottom:2px solid var(--border);padding:.65rem clamp(1.25rem,5vw,4rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;box-shadow:0 2px 16px rgba(124,58,237,.06);}
.ptabs{display:flex;gap:.4rem;flex-wrap:wrap;}
.ptab{background:white;border:2px solid var(--border);color:var(--muted);font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:700;padding:.35rem .85rem;border-radius:20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.35rem;white-space:nowrap;box-shadow:0 1px 4px rgba(124,58,237,.06);}
.ptab:hover{border-color:var(--accent);color:var(--accent);}
.ptab.on{border-color:var(--accent);color:white;background:var(--accent);box-shadow:0 3px 12px rgba(124,58,237,.3);}
.ptab[data-genre="액션"].on{background:#ef4444;border-color:#ef4444;box-shadow:0 3px 12px rgba(239,68,68,.3);}
.ptab[data-genre="슈팅"].on{background:#f59e0b;border-color:#f59e0b;box-shadow:0 3px 12px rgba(245,158,11,.3);}
.ptab[data-genre="RPG"].on{background:#8b5cf6;border-color:#8b5cf6;box-shadow:0 3px 12px rgba(139,92,246,.3);}
.ptab[data-genre="퍼즐"].on{background:#10b981;border-color:#10b981;box-shadow:0 3px 12px rgba(16,185,129,.3);}
.ptab[data-genre="전략"].on{background:#3b82f6;border-color:#3b82f6;box-shadow:0 3px 12px rgba(59,130,246,.3);}
.ptab[data-genre="스포츠"].on{background:#f97316;border-color:#f97316;box-shadow:0 3px 12px rgba(249,115,22,.3);}
.ptab[data-genre="어드벤처"].on{background:#06b6d4;border-color:#06b6d4;box-shadow:0 3px 12px rgba(6,182,212,.3);}
.ptab[data-genre="캐주얼"].on{background:#ec4899;border-color:#ec4899;box-shadow:0 3px 12px rgba(236,72,153,.3);}
.ptab[data-genre="아케이드"].on{background:#e11d48;border-color:#e11d48;box-shadow:0 3px 12px rgba(225,29,72,.3);}
.ptab[data-genre="기타"].on{background:#6366f1;border-color:#6366f1;box-shadow:0 3px 12px rgba(99,102,241,.3);}
.device-indicator{display:flex;align-items:center;gap:.35rem;font-size:.66rem;font-weight:700;color:var(--muted);flex-shrink:0;}
.device-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;}
.device-indicator.pc{color:var(--pc);}
.device-indicator.tablet{color:var(--tablet);}
.device-indicator.mobile{color:var(--mobile);}
.device-indicator .device-dot{opacity:1;}
.pbar-right{display:flex;align-items:center;gap:.8rem;flex-shrink:0;}
.cnt{font-size:.7rem;font-weight:700;color:var(--muted);white-space:nowrap;}
.cnt strong{color:var(--text);}

/* ── 정렬 바 (로그인 사용자) ── */
.sort-bar{position:sticky;top:52px;z-index:4;background:rgba(255,248,237,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:.35rem clamp(1.25rem,5vw,4rem);display:flex;align-items:center;gap:.6rem;}
.sort-label{font-size:.6rem;font-weight:800;color:var(--muted);font-family:'Nunito',sans-serif;letter-spacing:.06em;white-space:nowrap;flex-shrink:0;}
.stabs{display:flex;gap:.3rem;flex-wrap:wrap;}
.stab{background:white;border:1.5px solid var(--border);color:var(--muted);font-family:'Nunito',sans-serif;font-size:.66rem;font-weight:700;padding:.22rem .7rem;border-radius:20px;cursor:pointer;transition:all .2s;white-space:nowrap;}
.stab:hover{border-color:var(--accent);color:var(--accent);}
.stab.on{border-color:var(--accent);color:white;background:var(--accent);box-shadow:0 2px 8px rgba(124,58,237,.25);}

/* ── 모바일 정렬 바 ── */
.m-sort-bar{background:rgba(10,11,16,.9);border-bottom:1px solid rgba(255,255,255,.06);padding:.3rem .9rem;display:flex;align-items:center;gap:.3rem;overflow-x:auto;scrollbar-width:none;}
.m-sort-bar::-webkit-scrollbar{display:none;}
.m-stabs{display:flex;gap:.3rem;flex-shrink:0;}
.m-stab{background:transparent;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45);font-family:'Nunito',sans-serif;font-size:.62rem;font-weight:700;padding:.2rem .65rem;border-radius:20px;cursor:pointer;transition:all .2s;white-space:nowrap;}
.m-stab:hover{border-color:var(--accent-m, #7c3aed);color:var(--accent-m, #7c3aed);}
.m-stab.on{border-color:var(--accent-m, #7c3aed);color:white;background:var(--accent-m, #7c3aed);}

/* ── 게임 그리드 ── */
main{position:relative;z-index:1;padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,5vw,4rem);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.card{display:block;background:white;border:2px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;position:relative;transition:border-color .2s,transform .18s,box-shadow .18s;animation:fadeUp .35s both;box-shadow:var(--shadow-card);cursor:pointer;}
.card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 12px 32px rgba(124,58,237,.15);}
.thumb{aspect-ratio:4/3;background:var(--surface2);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.card:hover .thumb img{transform:scale(1.05);}
.no-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f0ff 0%,#ede9fe 100%);}
.no-thumb-char{font-family:'Lilita One',cursive;font-size:2.4rem;color:rgba(124,58,237,.18);}
.genre-tags{position:absolute;top:.45rem;left:.45rem;display:flex;gap:.25rem;flex-wrap:wrap;max-width:calc(100% - .9rem);}
.genre-tag{font-size:.55rem;font-weight:800;padding:.15rem .45rem;border-radius:8px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.2);color:var(--accent);text-transform:uppercase;}
.play-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;background:rgba(255,248,237,.25);backdrop-filter:blur(2px);}
.card:hover .play-wrap{opacity:1;}
.play-btn{width:46px;height:46px;background:var(--accent);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(124,58,237,.4);}
.play-btn svg{width:20px;height:20px;fill:white;margin-left:3px;}
.card-body{padding:.75rem .85rem .5rem;}
.card-title{font-size:.85rem;font-weight:800;line-height:1.3;color:var(--text);}
.card-desc{margin-top:.3rem;font-size:.7rem;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-actions{display:flex;align-items:center;justify-content:space-between;padding:.45rem .85rem .7rem;gap:.4rem;}
.card-info-hint{font-size:.62rem;font-weight:700;color:var(--muted2);letter-spacing:.02em;flex-shrink:0;}
.card:hover .card-info-hint{color:var(--accent);}
.card-play-btn{display:flex;align-items:center;gap:.28rem;background:var(--accent);border:none;border-radius:20px;color:white;font-family:'Nunito',sans-serif;font-size:.68rem;font-weight:800;padding:.35rem .85rem;cursor:pointer;letter-spacing:.05em;transition:opacity .2s,box-shadow .2s;white-space:nowrap;flex-shrink:0;}
.card-play-btn:hover{opacity:.88;box-shadow:0 4px 14px rgba(124,58,237,.35);}
.card-play-btn svg{width:10px;height:10px;fill:white;flex-shrink:0;}
.state-box{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 1rem;text-align:center;gap:1rem;}
.state-icon{font-size:3.5rem;opacity:.35;}
.state-box h2{font-family:'Lilita One',cursive;font-size:1.1rem;letter-spacing:.1em;color:var(--muted);}
.state-box p{font-size:.82rem;color:var(--muted);}

/* ── 푸터 ── */
footer{position:relative;z-index:1;border-top:2px solid var(--border);padding:1.4rem clamp(1.25rem,5vw,4rem);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;background:white;}
.foot-l{font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);}
.foot-r{font-size:.62rem;font-weight:700;color:var(--muted2);}

/* ── 공용 모달 ── */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(45,27,105,.4);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:white;border:2px solid var(--border);border-radius:16px;width:100%;max-width:380px;overflow:hidden;transform:translateY(20px);transition:transform .25s;position:relative;box-shadow:0 20px 60px rgba(124,58,237,.15);}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-close{position:absolute;top:.7rem;right:.8rem;background:none;border:none;color:var(--muted2);font-size:1.4rem;cursor:pointer;line-height:1;padding:.2rem;z-index:1;}
.modal-close:hover{color:var(--text);}

/* ── 인증 모달 ── */
.modal-head{padding:1.4rem 1.6rem 0;display:flex;flex-direction:column;gap:1rem;}
.modal-logo{font-family:'Lilita One',cursive;font-size:1rem;letter-spacing:.08em;background:linear-gradient(135deg,#7c3aed,#d97706);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;}
.modal-tabs{display:flex;border-bottom:2px solid var(--border);}
.modal-tab{flex:1;background:none;border:none;color:var(--muted);font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:700;padding:.7rem;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s;}
.modal-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.modal-body{padding:1.4rem 1.6rem 1.6rem;}
.modal-pane{display:none;}
.modal-pane.active{display:block;}
.field{margin-bottom:.9rem;}
.field label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem;}
.field input{width:100%;background:var(--surface2);border:2px solid var(--border);border-radius:var(--r);color:var(--text);font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:600;padding:.55rem .75rem;outline:none;transition:border-color .2s,box-shadow .2s;}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.1);}
.field input::placeholder{color:var(--muted2);opacity:.7;}
.btn-submit{width:100%;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:var(--r);color:white;font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:800;letter-spacing:.1em;padding:.65rem;cursor:pointer;transition:opacity .2s,box-shadow .2s;margin-top:.3rem;}
.btn-submit:hover{opacity:.9;box-shadow:0 6px 20px rgba(124,58,237,.35);}
.auth-error{background:#fef2f2;border:2px solid #fecaca;border-radius:var(--r);color:#dc2626;font-size:.78rem;font-weight:600;padding:.55rem .75rem;margin-bottom:.9rem;line-height:1.5;}
.hint{font-size:.72rem;font-weight:600;color:var(--muted);margin-top:.5rem;text-align:center;}

/* ── DB 오류 배너 ── */
.db-error-bar{position:fixed;top:0;left:0;right:0;z-index:300;background:#fef2f2;border-bottom:2px solid #fecaca;color:#dc2626;font-size:.78rem;font-weight:600;padding:.55rem 1.2rem;display:flex;align-items:center;gap:.6rem;}
.db-error-bar svg{width:14px;height:14px;fill:#ef4444;flex-shrink:0;}
.db-error-bar a{color:#7c3aed;cursor:pointer;text-decoration:underline;background:none;border:none;font-family:'Nunito',sans-serif;font-size:.75rem;font-weight:700;padding:0;margin-left:auto;}

/* ── 성공 다이얼로그 ── */
.success-modal{max-width:340px;text-align:center;}
.success-icon{font-size:3rem;margin-bottom:.8rem;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) both;}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.success-title{font-family:'Lilita One',cursive;font-size:1.1rem;letter-spacing:.06em;background:linear-gradient(135deg,#7c3aed,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;}
.success-title.admin{background:linear-gradient(135deg,#d97706,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.success-msg{font-size:.84rem;font-weight:600;color:var(--muted);line-height:1.6;margin-bottom:1.2rem;}
.success-msg strong{color:var(--text);}
.admin-notice{background:#fffbeb;border:2px solid #fcd34d;border-radius:var(--r);padding:.5rem .8rem;font-size:.74rem;font-weight:700;color:var(--gold);margin-bottom:1rem;}
.btn-success-close{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:var(--r);color:white;font-family:'Nunito',sans-serif;font-size:.75rem;font-weight:800;letter-spacing:.1em;padding:.6rem 2rem;cursor:pointer;transition:opacity .2s;box-shadow:0 4px 14px rgba(124,58,237,.3);}
.btn-success-close:hover{opacity:.88;}
.btn-success-close.admin{background:linear-gradient(135deg,#d97706,#f59e0b);box-shadow:0 4px 14px rgba(217,119,6,.3);}
.progress-bar{height:4px;background:var(--border);border-radius:0 0 16px 16px;overflow:hidden;position:absolute;bottom:0;left:0;right:0;}
.progress-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#a855f7);width:100%;transition:width linear;}
.progress-fill.admin{background:linear-gradient(90deg,#d97706,#f59e0b);}

/* ── 게임 실행 확인 모달 ── */
.launch-icon{font-size:2.6rem;text-align:center;margin-bottom:.7rem;}
.launch-title{font-family:'Lilita One',cursive;font-size:1rem;letter-spacing:.06em;background:linear-gradient(135deg,#7c3aed,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:.5rem;}
.launch-desc{font-size:.8rem;font-weight:600;color:var(--muted);text-align:center;line-height:1.8;margin-bottom:1.3rem;}
.launch-desc strong{color:var(--text);}
.launch-desc .local-note{display:inline-block;margin-top:.5rem;background:#ecfdf5;border:2px solid #6ee7b7;border-radius:8px;padding:.3rem .7rem;color:#047857;font-size:.74rem;font-weight:700;}
.btn-local{width:100%;background:white;border:2px solid var(--border2);border-radius:var(--r);color:var(--muted);font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;padding:.6rem;cursor:pointer;transition:border-color .2s,color .2s;margin-top:.5rem;}
.btn-local:hover{border-color:var(--mobile);color:var(--mobile);}

/* ── 로그 패널 ── */
#logPanel{position:fixed;bottom:0;left:0;right:0;z-index:999;background:rgba(45,27,105,.98);border-top:2px solid rgba(124,58,237,.3);font-family:monospace;font-size:11px;color:#c4b5fd;max-height:42vh;display:flex;flex-direction:column;display:none;}
.log-panel-head{display:flex;align-items:center;gap:.5rem;padding:5px 10px;border-bottom:1px solid rgba(124,58,237,.2);background:rgba(45,27,105,.9);flex-shrink:0;}
.log-panel-head span{font-size:11px;letter-spacing:.08em;}
.log-section-btn{background:none;border:1px solid rgba(124,58,237,.3);color:#8b5cf6;font-family:monospace;font-size:10px;padding:2px 8px;cursor:pointer;border-radius:6px;transition:border-color .15s,color .15s;}
.log-section-btn.active{border-color:#a855f7;color:#c4b5fd;}
.log-section-btn.srv.active{border-color:#f59e0b;color:#fcd34d;}
.log-close{margin-left:auto;background:none;border:1px solid rgba(124,58,237,.3);color:#8b5cf6;font-family:monospace;font-size:10px;padding:2px 8px;cursor:pointer;border-radius:6px;}
.log-close:hover{border-color:#c4b5fd;color:#e9d5ff;}
.log-body{overflow-y:auto;flex:1;padding:8px 12px;line-height:2;}
.log-section{display:none;}
.log-section.active{display:block;}
.log-row{display:flex;gap:.6rem;align-items:baseline;}
.log-time{color:#6d28d9;flex-shrink:0;font-size:10px;}
.log-type{flex-shrink:0;font-size:10px;padding:0 4px;border-radius:3px;}
.log-type.info{color:#60a5fa;}.log-type.ok{color:#34d399;}.log-type.warn{color:#fbbf24;}
.log-type.err{color:#f87171;}.log-type.game{color:#c084fc;}.log-type.auth{color:#67e8f9;}
.log-type.sys{color:#6d28d9;}.log-type.gen{color:#fb923c;}
.log-msg{color:#c4b5fd;word-break:break-all;}
.sl-ok{color:#34d399;}.sl-skip{color:#fbbf24;}.sl-err{color:#f87171;}.sl-gen{color:#fb923c;}

@media(min-width:1400px){.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}}

/* ══════════════════════════════════════════════════════
   모바일 전용 뷰
══════════════════════════════════════════════════════ */
#view-desktop{display:block;}
#view-mobile{display:none;flex-direction:column;min-height:100vh;}

/* 모바일 헤더 */
.m-hdr{
  position:sticky;top:0;z-index:10;
  background:rgba(255,248,237,.97);backdrop-filter:blur(12px);
  border-bottom:2px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;gap:.6rem;
}
.m-hdr-logo{
  font-family:'Lilita One',cursive;font-size:1.3rem;letter-spacing:.04em;
  background:linear-gradient(135deg,#7c3aed 0%,#d97706 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;white-space:nowrap;
}
.m-hdr-logo em{-webkit-text-fill-color:initial;font-style:normal;}
.m-user{display:flex;align-items:center;gap:.35rem;flex-shrink:0;flex-wrap:nowrap;}
.m-user-chip{
  display:flex;align-items:center;gap:.28rem;
  background:white;border:2px solid var(--border2);border-radius:20px;
  padding:.28rem .65rem;font-size:.68rem;color:var(--accent);font-weight:700;
  max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.m-user-chip.admin{border-color:var(--gold);color:var(--gold);}
.m-pts{
  display:flex;align-items:center;gap:.22rem;
  background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:2px solid #6ee7b7;
  border-radius:20px;padding:.26rem .55rem;font-size:.66rem;color:#047857;font-weight:700;white-space:nowrap;
}
.m-btn-login{
  background:var(--accent);color:white;border:none;border-radius:20px;
  padding:.38rem .9rem;font-family:'Nunito',sans-serif;font-size:.74rem;font-weight:800;
  cursor:pointer;letter-spacing:.06em;white-space:nowrap;
}
.m-btn-logout{
  background:white;border:2px solid #fecaca;color:#ef4444;
  font-family:'Nunito',sans-serif;font-size:.66rem;font-weight:700;
  padding:.26rem .55rem;border-radius:20px;cursor:pointer;white-space:nowrap;
}
.m-btn-admin{
  background:linear-gradient(135deg,#fffbeb,#fef3c7);border:2px solid #fcd34d;
  color:var(--gold);font-family:'Nunito',sans-serif;font-size:.66rem;font-weight:800;
  padding:.26rem .6rem;border-radius:20px;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;gap:.22rem;white-space:nowrap;
}

/* 모바일 탭바 */
.m-tabbar{
  background:rgba(255,248,237,.95);border-bottom:2px solid var(--border);
  padding:.5rem .85rem;display:flex;align-items:center;gap:.6rem;
  position:sticky;top:58px;z-index:9;box-shadow:0 2px 8px rgba(124,58,237,.05);
}
.m-tabs-wrap{
  display:flex;gap:.32rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;flex:1;
  -webkit-mask:linear-gradient(90deg,#000 85%,transparent 100%);
  mask:linear-gradient(90deg,#000 85%,transparent 100%);
}
.m-tabs-wrap::-webkit-scrollbar{display:none;}
.m-tab{
  background:white;border:2px solid var(--border);color:var(--muted);
  font-family:'Nunito',sans-serif;font-size:.73rem;font-weight:700;
  padding:.3rem .75rem;border-radius:20px;cursor:pointer;white-space:nowrap;
  transition:all .15s;flex-shrink:0;
}
.m-tab.on{border-color:var(--accent);color:white;background:var(--accent);}
.m-tab[data-genre="액션"].on{background:#ef4444;border-color:#ef4444;}
.m-tab[data-genre="슈팅"].on{background:#f59e0b;border-color:#f59e0b;}
.m-tab[data-genre="RPG"].on{background:#8b5cf6;border-color:#8b5cf6;}
.m-tab[data-genre="퍼즐"].on{background:#10b981;border-color:#10b981;}
.m-tab[data-genre="전략"].on{background:#3b82f6;border-color:#3b82f6;}
.m-tab[data-genre="스포츠"].on{background:#f97316;border-color:#f97316;}
.m-tab[data-genre="어드벤처"].on{background:#06b6d4;border-color:#06b6d4;}
.m-tab[data-genre="캐주얼"].on{background:#ec4899;border-color:#ec4899;}
.m-tab[data-genre="아케이드"].on{background:#e11d48;border-color:#e11d48;}
.m-tab[data-genre="기타"].on{background:#6366f1;border-color:#6366f1;}
.m-cnt{font-size:.64rem;font-weight:700;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.m-cnt strong{color:var(--text);}

/* 모바일 게임 그리드 */
.m-main{padding:.85rem .75rem 5rem;}
.m-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;}
@keyframes mFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.m-card{
  display:block;background:white;border:2px solid var(--border);border-radius:14px;
  overflow:hidden;color:inherit;position:relative;
  box-shadow:var(--shadow-card);animation:mFadeUp .3s both;
  -webkit-tap-highlight-color:transparent;cursor:pointer;
}
.m-card:active{border-color:var(--accent);box-shadow:0 6px 20px rgba(124,58,237,.18);transform:scale(.98);}
.m-thumb{aspect-ratio:1/1;background:var(--surface2);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.m-thumb img{width:100%;height:100%;object-fit:cover;}
.m-no-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f0ff 0%,#ede9fe 100%);}
.m-no-thumb-char{font-family:'Lilita One',cursive;font-size:3rem;color:rgba(124,58,237,.18);}
.m-genre-tags{position:absolute;top:.4rem;left:.4rem;display:flex;gap:.2rem;flex-wrap:wrap;max-width:calc(100% - .8rem);}
.m-genre-tag{font-size:.52rem;font-weight:800;padding:.1rem .38rem;border-radius:6px;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.25);color:var(--accent);}
.m-play-badge{
  position:absolute;bottom:.5rem;right:.5rem;
  width:30px;height:30px;background:var(--accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(124,58,237,.45);
}
.m-play-badge svg{width:15px;height:15px;fill:white;margin-left:2px;}
.m-card-body{padding:.55rem .65rem .65rem;}
.m-card-title{font-size:.88rem;font-weight:800;line-height:1.3;color:var(--text);}
.m-state-box{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:4rem 1rem;text-align:center;gap:.8rem;}
.m-state-icon{font-size:3rem;opacity:.35;}
.m-state-box h2{font-family:'Lilita One',cursive;font-size:1rem;letter-spacing:.1em;color:var(--muted);}

/* 모바일 푸터 */
.m-footer{
  text-align:center;padding:.85rem 1rem;border-top:2px solid var(--border);
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted2);background:white;
}