/* 민공방 게임즈 — 모든 페이지가 함께 쓰는 조각: 언어 전환(.lang), 머리의 로그인 단추·회원 메뉴(#auth),
   로그인 대화상자(.dlg, site.js가 만든다), 토스트. 홈(kit)과 하위 페이지(site.css) 양쪽에서 같은 모양이어야 하므로
   선택자를 .dlg/.auth/.lang/.toast 아래로만 둔다. 색은 공통 토큰(--mg-*)만 쓴다. */
:root{
  --mg-bg:#f6f5f2; --mg-surface:#e9e8e6; --mg-ink:#17181c; --mg-muted:#636365; --mg-line:rgba(23,24,28,.12);
  --mg-action:#2f5bff; --mg-action-deep:#2446cc; --mg-action-soft:#e3e9ff; --mg-bad:#c8321f; --mg-bad-bg:#fde8e4;
  --mg-font:"Pretendard Variable",Pretendard,"Urbanist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mg-t:160ms;
}

/* ---------- language ---------- */
.lang{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--mg-line);border-radius:4px;background:transparent}
.lang button{min-width:40px;min-height:36px;border:0;border-radius:3px;background:transparent;font:500 13px/1 var(--mg-font);color:var(--mg-muted);cursor:pointer;transition:background var(--mg-t),color var(--mg-t)}
.lang button[aria-pressed=true]{background:var(--mg-ink);color:var(--mg-bg)}
.lang button:focus-visible{outline:2px solid var(--mg-action);outline-offset:2px}

/* ---------- header: login button / user menu ---------- */
.auth{display:flex;align-items:center}
.auth-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--mg-line);border-radius:4px;background:transparent;color:var(--mg-ink);font:500 15px/1 var(--mg-font);cursor:pointer;transition:border-color var(--mg-t),background var(--mg-t)}
.auth-btn:hover{border-color:var(--mg-ink);background:var(--mg-surface)}
.auth-btn .i{width:18px;height:18px}
.auth-menu{position:relative}
.auth-menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px 4px 4px;border-radius:4px;cursor:pointer;font:500 15px/1 var(--mg-font);color:var(--mg-ink);transition:background var(--mg-t)}
.auth-menu summary::-webkit-details-marker{display:none}
.auth-menu summary:hover,.auth-menu[open] summary{background:var(--mg-surface)}
.avatar{width:36px;height:36px;border-radius:4px;background:var(--mg-action);color:#fff;display:grid;place-items:center;font:600 15px/1 var(--mg-font);flex:none;object-fit:cover}
.avatar--lg{width:72px;height:72px;border-radius:6px;font-size:30px}
.auth-menu .nick{max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-menu menu{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--mg-bg);border:1px solid var(--mg-line);border-radius:6px;box-shadow:0 12px 32px rgba(23,24,28,.12);min-width:190px;display:grid;gap:2px;z-index:60}
.auth-menu menu a,.auth-menu menu button{display:flex;width:100%;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:4px;background:transparent;text-decoration:none;font:500 15px/1.2 var(--mg-font);color:var(--mg-ink);text-align:left;cursor:pointer}
.auth-menu menu a:hover,.auth-menu menu button:hover{background:var(--mg-surface)}
.auth-menu menu .i{width:18px;height:18px;color:var(--mg-muted)}
@media(max-width:639px){.auth-menu .nick{display:none}.auth-btn span{display:none}.auth-btn{width:44px;padding:0;justify-content:center}}

/* ---------- dialog (auth) ---------- */
.dlg{border:1px solid var(--mg-line);padding:0;margin:auto;border-radius:8px;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--mg-bg);color:var(--mg-ink);font:400 16px/1.6 var(--mg-font);word-break:keep-all;box-shadow:0 30px 80px rgba(23,24,28,.28)}
.dlg::backdrop{background:rgba(23,24,28,.5)}
.dlg h2,.dlg h3,.dlg p{margin:0}
.dlg-in{position:relative;padding:28px;display:grid;gap:18px}
.dlg-close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;border-radius:4px;background:transparent;color:var(--mg-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.dlg-close:hover{background:var(--mg-surface)}
.dlg-head{display:flex;align-items:center;gap:12px;padding-right:48px}
.dlg-head .mark{width:36px;height:36px;flex:none}
.dlg-head h2{font-size:22px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.dlg form h3{font-size:18px;font-weight:500}
.dlg .seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--mg-line);border-radius:4px;padding:3px;gap:3px}
.dlg .seg button{min-height:42px;border:0;border-radius:3px;background:transparent;font:500 15px/1 var(--mg-font);color:var(--mg-muted);cursor:pointer;transition:background var(--mg-t),color var(--mg-t)}
.dlg .seg button[aria-selected=true]{background:var(--mg-ink);color:var(--mg-bg)}
.dlg form{display:grid;gap:14px}
.dlg .field{display:grid;gap:6px}
.dlg .field label,.dlg .field>span{font-size:14px;font-weight:500}
.dlg .input{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--mg-line);border-radius:4px;background:#fff;font:inherit;font-size:16px;color:var(--mg-ink);transition:border-color var(--mg-t),box-shadow var(--mg-t)}
.dlg .input:focus{outline:0;border-color:var(--mg-action);box-shadow:0 0 0 3px var(--mg-action-soft)}
.dlg .input[aria-invalid=true]{border-color:var(--mg-bad);box-shadow:0 0 0 3px var(--mg-bad-bg)}
.dlg .err{color:var(--mg-bad);font-size:14px;font-weight:500;min-height:1.2em;margin:0}
.dlg .err:empty{display:none}
.dlg .checks{display:grid;gap:8px}
.dlg .check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;cursor:pointer}
.dlg .check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--mg-action);flex:none}
.dlg .check a{color:var(--mg-action-deep);font-weight:500}
.dlg .check b{font-weight:500;color:var(--mg-muted)}
.dlg .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid var(--mg-action);border-radius:4px;background:var(--mg-action);color:#fff;font:500 16px/1 var(--mg-font);text-decoration:none;cursor:pointer;transition:background var(--mg-t),border-color var(--mg-t),transform var(--mg-t)}
.dlg .btn:hover{background:var(--mg-action-deep);border-color:var(--mg-action-deep)}
.dlg .btn:active{transform:translateY(1px)}
.dlg .btn--block{width:100%}
.dlg .btn--light{background:transparent;color:var(--mg-ink);border-color:var(--mg-line)}
.dlg .btn--light:hover{background:var(--mg-surface);border-color:var(--mg-ink)}
.dlg .btn:disabled{opacity:.55;cursor:not-allowed}
.dlg .btn.busy{color:transparent;position:relative}
.dlg .btn.busy::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:mg-spin .8s linear infinite}
@keyframes mg-spin{to{transform:rotate(360deg)}}
.dlg .link{border:0;background:transparent;padding:8px 4px;min-height:44px;color:var(--mg-action-deep);font:500 15px/1.3 var(--mg-font);text-decoration:underline;text-underline-offset:3px;justify-self:center;cursor:pointer}
.dlg .hint{font-size:14px;color:var(--mg-muted);line-height:1.5}
.dlg .notice{background:var(--mg-surface);border-radius:4px;padding:12px 14px;font-size:14px;line-height:1.5}
.dlg .notice b{font-weight:500}
.dlg .oauth{display:grid;gap:12px}
.dlg .or{display:flex;align-items:center;gap:12px;color:var(--mg-muted);font-size:13px}
.dlg .or::before,.dlg .or::after{content:"";flex:1;height:1px;background:var(--mg-line)}
.dlg svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:300;background:var(--mg-ink);color:var(--mg-bg);padding:12px 20px;border-radius:4px;font:500 15px/1.4 var(--mg-font);max-width:calc(100vw - 32px);text-align:center;transition:transform 260ms,opacity 260ms;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
@media(prefers-reduced-motion:reduce){.toast,.dlg .btn,.lang button,.auth-btn{transition:none}.dlg .btn.busy::after{animation-duration:1.5s}}