/* 마징가 스킨: at-7777.com 1:1 퍼블리싱. 마징가 화면에서만 불러오며 회원 화면(body.skin-mazinga)과 단독 로그인(.mz-login-body)에만 적용한다. */

/* ---------- 공통 ---------- */
body.skin-mazinga { --mz-gold:#ffcc00; --mz-grad:linear-gradient(to bottom,#554023,#c99846); background:#090909; color:#f2f2f2; font-family:'Noto Sans KR',sans-serif; font-size:13.6px; }
body.skin-mazinga [hidden] { display:none !important; }
body.skin-mazinga a { color:inherit; text-decoration:none; }
body.skin-mazinga a:focus-visible, body.skin-mazinga button:focus-visible { outline:2px solid var(--mz-gold); outline-offset:2px; }

/* ---------- 머리말 ---------- */
.skin-mazinga .mz-header { position:fixed; top:0; left:0; right:0; z-index:50; background:#090909; }
.skin-mazinga .mz-first { display:flex; align-items:center; height:80px; padding:0 10px; }
.skin-mazinga .mz-logo { display:block; margin-left:30px; line-height:0; }
.skin-mazinga .mz-logo img { height:75px; width:auto; }
.skin-mazinga .mz-top-menu { display:flex; align-items:center; margin-left:auto; margin-right:20px; }
.skin-mazinga .mz-top-menu a { display:flex; align-items:center; gap:4px; padding:3px 15px; color:#fff; font-size:13px; text-shadow:0 1px 1px #000; white-space:nowrap; }
.skin-mazinga .mz-top-menu svg { width:14px; height:14px; color:var(--mz-gold); }
.skin-mazinga .mz-top-menu a:hover { color:var(--mz-gold); }
.skin-mazinga .mz-r-menu { display:flex; align-items:center; gap:10px; }
.skin-mazinga .mz-r-menu form { margin:0; }
.skin-mazinga :is(.mz-btn-line,.mz-btn-fill) { display:inline-block; min-width:120px; margin:0; padding:6px 20px; border:2px solid var(--mz-gold); border-radius:30px; background:none; color:#fff; font:inherit; font-size:13px; font-weight:400; line-height:1.5; text-align:center; cursor:pointer; }
.skin-mazinga .mz-btn-fill { background:var(--mz-gold); color:#000; }
.skin-mazinga :is(.mz-btn-line,.mz-btn-fill):hover { filter:brightness(1.1); }
.skin-mazinga :is(.mz-hamburger,.mz-m-profile,.mz-m-useri) { display:none; }
.skin-mazinga .mz-second { position:relative; display:flex; align-items:center; height:40px; padding:0 10px; border-top:2px solid var(--mz-gold); border-bottom:2px solid var(--mz-gold); }
.skin-mazinga .mz-main-menu { display:flex; align-items:center; justify-content:center; width:100%; }
.skin-mazinga .mz-main-menu a { padding:0 35px; color:#fff; font-size:16px; }
.skin-mazinga .mz-main-menu a:hover { color:var(--mz-gold); }
.skin-mazinga .mz-user-info { position:absolute; top:0; right:0; bottom:0; display:flex; align-items:center; gap:10px; padding-right:10px; font-size:12px; white-space:nowrap; }
.skin-mazinga .mz-user-info > span { display:flex; align-items:center; gap:3px; }
.skin-mazinga .mz-user-info img { width:24px; height:24px; }
.skin-mazinga :is(.mz-user-info,.mz-m-useri) svg { width:13px; height:13px; }
.skin-mazinga :is(.mz-user-info,.mz-m-useri) strong, .skin-mazinga :is(.mz-user-info,.mz-m-useri) b { font-weight:400; }
.skin-mazinga :is(.mz-user-info,.mz-m-useri) em { font-style:normal; margin-left:3px; padding:4px 8px; border-radius:3px; background:var(--mz-gold); color:#000; }
.skin-mazinga .mz-user-btn { display:flex; align-items:center; gap:3px; padding:4px 8px; border-radius:3px; background:#16851b; color:#fff; }
.skin-mazinga .mz-user-btn svg { width:13px; height:13px; }

/* ---------- 좌·중·우 틀 ---------- */
.skin-mazinga .mz-wrap { display:flex; align-items:stretch; min-height:700px; margin-top:128px; padding:0 10px; }
.skin-mazinga .mz-left { flex:0 0 295px; width:295px; background:#111; }
.skin-mazinga .mz-lside-menu { display:flex; flex-wrap:wrap; border-top:1px solid #222; border-left:1px solid #222; }
.skin-mazinga .mz-lside-menu > a, .skin-mazinga .mz-lside-menu > form { flex:1 1 33.33%; display:flex; align-items:center; justify-content:center; gap:3px; height:40px; margin:0; border-right:1px solid #222; border-bottom:1px solid #222; color:#fff; font-size:13px; }
.skin-mazinga .mz-lside-menu > :nth-child(-n+3) { background:var(--mz-grad); border-color:#111; }
.skin-mazinga .mz-lside-menu svg { width:13px; height:13px; }
.skin-mazinga .mz-lside-menu > a:hover { color:var(--mz-gold); }
.skin-mazinga .mz-lside-menu form button { width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:none; color:#fff; font:inherit; font-size:13px; font-weight:400; }
.skin-mazinga .mz-tab { display:flex; gap:5px; padding:5px; background:#222; }
.skin-mazinga .mz-tab a { flex:1 1 0; line-height:0; }
.skin-mazinga .mz-tab img { width:100%; box-shadow:0 0 3px #000; }
.skin-mazinga .mz-center { flex:1 1 auto; width:auto; min-width:0; min-height:700px; margin:0 8px; padding:0 5px 30px; background:#111; }
.skin-mazinga .mz-right { flex:0 0 300px; width:300px; align-self:flex-start; position:sticky; top:130px; background:#222; }
.skin-mazinga .mz-right-head { height:28px; background:#111; }
.skin-mazinga .mz-right-body p { display:flex; align-items:center; justify-content:space-between; margin:0; padding:3px 10px; font-size:12px; }
.skin-mazinga .mz-right-body p span { display:flex; align-items:center; gap:4px; }
.skin-mazinga .mz-right-body p svg { width:14px; height:14px; }
.skin-mazinga .mz-right-body strong, .skin-mazinga .mz-right-body b { font-weight:400; }
.skin-mazinga .mz-right-body .mz-right-nick { padding-top:10px; }
.skin-mazinga .mz-right-nick img { width:26px; height:26px; }
.skin-mazinga .mz-right-body nav { display:flex; margin-top:8px; background:#2a2a2a; }
.skin-mazinga .mz-right-body nav a { flex:1 1 0; padding:7px 2px; text-align:center; font-size:12px; white-space:nowrap; }
.skin-mazinga .mz-right-body nav a:hover { color:var(--mz-gold); }
.skin-mazinga .mz-right-login { display:block; padding:20px 10px; text-align:center; color:var(--mz-gold); }

/* ---------- 본문 공통(화면 제목·패널·폼) ---------- */
.skin-mazinga .mz-center.page-content { width:auto; margin-top:0; margin-bottom:0; }
.skin-mazinga .mz-center .page-title { justify-content:flex-start; margin:0; padding:16px 15px; border:0; color:#fff; }
.skin-mazinga .mz-center .page-title h1 { padding-left:10px; border-left:3px solid #e5aa06; font-size:20px; line-height:1.1; }
.skin-mazinga .mz-center .page-title > a { display:none; }
.skin-mazinga .mz-center .category-heading { display:none; }
.skin-mazinga :is(.mz-center,.user-modal) .panel { background:#1a1a1a; border:1px solid #333; border-radius:5px; color:#eee; }
.skin-mazinga :is(.mz-center,.user-modal) .panel h2 { color:var(--mz-gold); }
.skin-mazinga :is(.mz-center,.user-modal) :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea) { background:#1e1e1e; color:#fff; border:1px solid #333; border-radius:5px; }
.skin-mazinga :is(.mz-center,.user-modal) th { background:#222; color:#999; border-color:#333; }
.skin-mazinga :is(.mz-center,.user-modal) td { background:#282828; color:#eee; border-color:#333; }
.skin-mazinga :is(.mz-center .panel,.mz-center .game-filter,.user-modal) button:not(.modal-close):not([data-modal-back]) { background:linear-gradient(180deg,#fec600 0,#fd7803); color:#000; border:0; border-radius:15px; }
.skin-mazinga .mz-center .game-filter { margin:0 15px 15px; }
.skin-mazinga :is(.mz-center,.user-modal) .gold-outline { border-color:var(--mz-gold); background:none; color:var(--mz-gold); border-radius:20px; }

/* ---------- 카지노·슬롯 게임사·게임 카드 ---------- */
.skin-mazinga .mz-center .game-grid { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:14px; padding:15px; background:#0d0d0d; }
.skin-mazinga .mz-center .game-card { position:relative; flex:0 0 184px; width:184px; overflow:hidden; border:2px solid #c99846; background:#000; }
.skin-mazinga .mz-center .game-card > img, .skin-mazinga .mz-center .game-card > .game-art { display:block; width:100%; height:auto; aspect-ratio:188 / 221; object-fit:cover; }
/* 참고 사이트 카드처럼 이름은 그림 아래쪽에 겹쳐 보이고, 카드 전체를 누르면 게임(게임사)으로 들어간다. */
.skin-mazinga .mz-center .game-card > div:not(.game-art) { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:8px; background:linear-gradient(transparent 55%,#000d); text-align:center; }
.skin-mazinga .mz-center .game-card small { color:#c99846; font-size:11px; }
.skin-mazinga .mz-center .game-card h2 { margin:2px 0 4px; color:var(--mz-gold); font-size:14px; font-weight:700; text-shadow:0 1px 2px #000; }
.skin-mazinga .mz-center .game-card :is(form,button,.gold-outline) { position:absolute; inset:0; width:100%; min-width:0; height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:transparent; box-shadow:none; }
.skin-mazinga .mz-center .game-card .badge { position:relative; z-index:1; background:#000c; }
/* 그림 안에 게임사 이름이 들어 있는 카드는 글자를 숨긴다. */
.skin-mazinga .mz-center .game-card.mz-art > div:not(.game-art) { background:none; }
.skin-mazinga .mz-center .game-card.mz-art :is(small,h2) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skin-mazinga .mz-center .game-card:hover { filter:brightness(1.1); }

/* ---------- 메인 ---------- */
.skin-mazinga .mz-home { padding-top:0; }
.skin-mazinga .mz-slide-banner { display:flex; align-items:flex-start; gap:10px; }
.skin-mazinga .mz-slide-banner > div { position:relative; width:50%; line-height:0; }
.skin-mazinga .mz-banner-main, .skin-mazinga .mz-banner-right img { width:100%; border-radius:5px; }
.skin-mazinga .mz-banner-logo { position:absolute; top:20px; left:20px; height:80px; width:auto; }
.skin-mazinga .mz-banner-right .brand-slide-controls { position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:6px; }
.skin-mazinga .mz-banner-right .brand-slide-controls button { width:24px; height:4px; margin:0; padding:0; border:0; border-radius:2px; background:#fff8; }
.skin-mazinga .mz-banner-right .brand-slide-controls button[aria-pressed=true] { background:var(--mz-gold); }
.skin-mazinga .mz-board { display:flex; align-items:flex-start; gap:10px; margin:20px auto; }
.skin-mazinga .mz-txt-box { width:50%; }
.skin-mazinga .mz-txt-box h4 { display:flex; align-items:center; height:50px; margin:0; padding:0 15px; border-radius:5px; background:var(--mz-grad); color:#fff; font-size:20px; font-weight:400; text-shadow:0 1px 3px #0008; }
.skin-mazinga .mz-txt-box h4 a { display:flex; align-items:center; gap:5px; width:100%; }
.skin-mazinga .mz-txt-box h4 svg { width:20px; height:20px; }
.skin-mazinga .mz-txt-box h4 span { margin-left:5px; color:#eee; font-size:14px; }
.skin-mazinga .mz-txt-box > div > a { display:flex; align-items:center; justify-content:space-between; gap:10px; height:46px; margin-bottom:5px; padding:0 10px; border-bottom:1px solid #333; font-size:14px; }
.skin-mazinga .mz-txt-box > div > a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.skin-mazinga .mz-txt-box time { flex-shrink:0; color:#999; font-size:12px; }
.skin-mazinga .mz-mpmenu { display:flex; justify-content:center; gap:3px; margin:10px 0; }
.skin-mazinga .mz-mpmenu a { position:relative; flex:0 0 calc((100% - 6px) / 3); line-height:0; }
.skin-mazinga .mz-mpmenu img { width:100%; }
.skin-mazinga .mz-mpmenu p { position:absolute; left:0; bottom:1px; display:flex; align-items:center; justify-content:center; width:100%; height:50px; margin:0; padding:0 10px; background:#00000080; box-shadow:inset 0 0 50px #ffc107; color:#eee; line-height:1.4; }
.skin-mazinga .mz-mpmenu .mz-direct { display:none; }
.skin-mazinga .mz-mpmenu a:hover { filter:brightness(1.1); }
.skin-mazinga .mz-mpmenu a:hover .mz-direct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#00000080; line-height:1.4; }
.skin-mazinga .mz-direct span { display:flex; align-items:center; height:40px; padding:0 20px; border-radius:20px; background:var(--mz-gold); color:#fff; font-size:15px; font-weight:700; }

/* ---------- 하단 ---------- */
.skin-mazinga .mz-footer { margin-top:50px; padding:0 10px 30px; text-align:center; background:none; border:0; }
.skin-mazinga .mz-footer img { display:block; width:100%; max-width:1200px; margin:0 auto; }
.skin-mazinga .mz-footer p { margin:0; padding:10px; color:#f2f2f2; font-size:12px; }

/* ---------- 회원 메뉴 창(입금·출금 등) ---------- */
body.skin-mazinga .user-modal { background:#111; border:1px solid #333; border-radius:10px; padding:16px 20px 24px; color:#eee; box-shadow:0 25px 80px #0009; }
body.skin-mazinga .brand-modal-nav strong { margin:0 16px 20px; padding:12px; border-radius:5px; background:var(--mz-grad); color:#fff; }
body.skin-mazinga .brand-modal-nav a { padding:12px 20px; border-radius:5px 0 0 5px; color:#ddd; }
body.skin-mazinga .brand-modal-nav a:hover, body.skin-mazinga .brand-modal-nav a[aria-current=page] { background:var(--mz-gold); color:#000; }
body.skin-mazinga #user-modal-content { min-width:0; padding:20px; border-radius:8px; background:#1a1a1a; }
body.skin-mazinga .user-modal .page-title { margin-bottom:15px; padding:12px 16px; border-radius:5px; background:var(--mz-grad); }
body.skin-mazinga .user-modal .page-title h1 { color:#fff; }
body.skin-mazinga .user-modal button.modal-close { display:block; position:sticky; top:0; z-index:3; width:36px; height:36px; margin:0 0 12px auto; padding:0; border:0; border-radius:50%; background:var(--mz-gold); color:#000; }
body.skin-mazinga .user-modal .payment-conditions { background:#222; border-color:#333; color:#eee; }

/* ---------- 모바일(참고 사이트 1200px 이하) ---------- */
@media (max-width:1200px) {
  .skin-mazinga .mz-first { justify-content:space-between; height:60px; }
  .skin-mazinga .mz-hamburger { display:block; position:relative; width:25px; height:20px; margin:0 0 0 5px; padding:0; border:0; border-radius:0; background:none; }
  .skin-mazinga .mz-hamburger span { position:absolute; left:0; display:block; width:100%; height:3px; border-radius:10px; background:#adab9c; transition:.4s ease-in-out; }
  .skin-mazinga .mz-hamburger span:nth-child(1) { top:0; }
  .skin-mazinga .mz-hamburger span:nth-child(2) { top:9px; }
  .skin-mazinga .mz-hamburger span:nth-child(3) { top:18px; width:70%; }
  .skin-mazinga .mz-hamburger[aria-expanded=true] span:nth-child(1) { top:9px; transform:rotate(135deg); }
  .skin-mazinga .mz-hamburger[aria-expanded=true] span:nth-child(2) { opacity:0; }
  .skin-mazinga .mz-hamburger[aria-expanded=true] span:nth-child(3) { top:9px; width:100%; transform:rotate(-135deg); }
  .skin-mazinga .mz-logo { position:absolute; left:50%; margin:0; transform:translateX(-50%); }
  .skin-mazinga .mz-logo img { height:56px; }
  .skin-mazinga :is(.mz-top-menu,.mz-r-menu,.mz-user-info) { display:none; }
  .skin-mazinga .mz-m-profile { display:flex; margin-right:5px; color:#adab9c; }
  .skin-mazinga .mz-m-profile svg { width:26px; height:26px; }
  .skin-mazinga .mz-main-menu a { padding:0 10px; font-size:13px; }
  .skin-mazinga .mz-m-useri { display:flex; align-items:center; justify-content:center; gap:10px; height:30px; font-size:12px; }
  .skin-mazinga .mz-m-useri > span { display:flex; align-items:center; gap:4px; }
  .skin-mazinga .mz-wrap { margin-top:134px; padding:0; }
  .skin-mazinga .mz-left { display:none; position:fixed; top:60px; left:0; z-index:60; flex-direction:column; width:100%; height:calc(100dvh - 60px); overflow-y:auto; }
  .skin-mazinga .mz-left[data-open] { display:flex; }
  .skin-mazinga .mz-right { display:none; }
  .skin-mazinga .mz-center { margin:0; padding:5px 5px 70px; }
  .skin-mazinga .mz-slide-banner, .skin-mazinga .mz-board { flex-wrap:wrap; gap:5px; }
  .skin-mazinga .mz-slide-banner > div, .skin-mazinga .mz-txt-box { width:100%; }
  .skin-mazinga .mz-banner-logo { height:35px; }
  .skin-mazinga .mz-board { margin-top:5px; }
  .skin-mazinga .mz-mpmenu { flex-wrap:wrap; gap:5px; margin-top:5px; }
  .skin-mazinga .mz-mpmenu a { flex:0 0 calc(50% - 3px); }
  .skin-mazinga .mz-center .game-grid { gap:8px; padding:8px; }
  .skin-mazinga .mz-center .game-card { flex:0 0 calc(33.33% - 6px); width:auto; }
  .brand-modal-layout { grid-template-columns:minmax(0,1fr); }
  body.skin-mazinga .brand-modal-nav { display:none; }
}
@media (max-width:690px) {
  .skin-mazinga .mz-center .game-card { flex:0 0 calc(50% - 4px); }
  body.skin-mazinga .user-modal { padding:12px; }
  body.skin-mazinga #user-modal-content { padding:12px; }
}

/* ---------- 단독 로그인 화면(.lg-*) ---------- */
.mz-login-body { margin:0; background:#0b0907; }
.mz-login-body *, .mz-login-body *::before, .mz-login-body *::after { box-sizing:border-box; }
.lg-wrap { --lg-text:#111; --lg-input-bg:rgba(255,255,255,.86); --lg-placeholder:#444; --lg-focus-ring:rgba(242,140,74,.45); --lg-radius:16px; --lg-btn-shadow:inset 0 0 14px rgba(255,255,255,.55),0 4px 14px rgba(0,0,0,.12); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:100vh; padding:40px 16px; background:#0b0907 url('/skins/mazinga/img/login_bg.jpg') center / cover no-repeat fixed; font-family:'Noto Sans KR',sans-serif; }
.lg-wrap::before { content:''; position:fixed; inset:0; background:rgba(10,8,6,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); pointer-events:none; }
.lg-wrap > * { position:relative; z-index:1; }
.lg-box { display:flex; justify-content:center; width:100%; }
.lg-main { display:flex; flex-direction:column; align-items:center; width:100%; }
.lg-logo { margin:0 0 24px; text-align:center; line-height:0; }
.lg-logo img { max-width:380px; max-height:100px; object-fit:contain; }
.lg-card { width:100%; max-width:600px; padding:32px; border-radius:40px; background:rgba(205,205,205,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35); }
.lg-card form { margin:0; }
.lg-field { margin-bottom:26px; }
.lg-field label { display:block; margin:0 0 12px 6px; color:var(--lg-text); font-size:20px; font-weight:800; }
.lg-field input { display:block; width:100%; height:66px; margin:0; padding:0 24px; border:0; border-radius:var(--lg-radius); outline:none; background:var(--lg-input-bg); color:#111; font-family:'Noto Sans KR',sans-serif; font-size:18px; transition:box-shadow .2s,background .2s; }
.lg-field input[type=password] { font-family:sans-serif; }
.lg-field input::placeholder { color:var(--lg-placeholder); font-weight:400; }
.lg-field input:focus { background:#fff; box-shadow:0 0 0 3px var(--lg-focus-ring); }
.lg-sr-only { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lg-alert { margin:0 0 20px; padding:14px 18px; border:1px solid rgba(198,40,40,.4); border-radius:12px; background:rgba(198,40,40,.12); color:#b71c1c; font-size:15px; font-weight:600; }
.lg-alert--info { border-color:rgba(15,138,110,.4); background:rgba(15,138,110,.12); color:#0b5e4b; }
.lg-btn { display:block; width:100%; height:66px; margin:0; padding:0; border:0; border-radius:var(--lg-radius); box-shadow:var(--lg-btn-shadow); font-family:'Noto Sans KR',sans-serif; font-size:22px; font-weight:800; cursor:pointer; transition:filter .2s,transform .1s; }
.lg-btn:hover { filter:brightness(1.06); }
.lg-btn:active { transform:translateY(1px); }
.lg-btn--login { margin-top:4px; background:linear-gradient(90deg,#fcbf2b 0%,#f28c4a 50%,#e8b640 100%); color:#111; }
.lg-btn--join { background:linear-gradient(90deg,#6db383 0%,#b4e36e 50%,#6db383 100%); color:#111; }
.lg-divider { display:flex; align-items:center; gap:16px; margin:40px 0 36px; }
.lg-divider::before, .lg-divider::after { content:''; flex:1; height:1px; background:#2b2b2b; }
.lg-divider span { width:13px; height:13px; background:#111; transform:rotate(45deg); }
.lg-join { display:flex; flex-direction:column; }
.lg-recommend-text { margin:0 0 12px 6px; color:var(--lg-text); font-size:20px; font-weight:800; word-break:keep-all; }
.lg-recommend-text em { font-style:normal; color:#0f8a6e; text-decoration:underline; text-underline-offset:4px; }
@media screen and (max-width:768px) {
  .lg-card { max-width:520px; padding:26px; border-radius:30px; }
  .lg-logo img { max-width:300px; max-height:80px; }
  .lg-field { margin-bottom:20px; }
  .lg-field label, .lg-recommend-text { font-size:17px; }
  .lg-field input { height:56px; padding:0 18px; font-size:16px; }
  .lg-btn { height:56px; font-size:19px; }
  .lg-divider { margin:30px 0 28px; }
}
@media screen and (max-width:480px) {
  .lg-wrap { padding:28px 16px; }
  .lg-card { padding:20px; border-radius:24px; }
  .lg-logo { margin-bottom:18px; }
  .lg-logo img { max-width:240px; max-height:64px; }
  .lg-field { margin-bottom:16px; }
  .lg-field label { margin-bottom:8px; font-size:15px; }
  .lg-recommend-text { margin-bottom:8px; font-size:14px; }
  .lg-field input { height:50px; padding:0 16px; border-radius:12px; font-size:15px; }
  .lg-btn { height:52px; border-radius:12px; font-size:17px; }
  .lg-divider { margin:24px 0 22px; }
}