/* 메타모아 계정 popup (public/account.js), loaded with it. Colors come from styles.css :root. */
.acct-shade { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgb(21 18 31 / 0.45); overflow-y: auto; }
.acct-box { width: 100%; max-width: 400px; box-sizing: border-box; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow); padding: 20px 22px 22px; }
.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.acct-title { margin: 0; font-size: 1.2rem; letter-spacing: -0.02em; }
.acct-x { width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.acct-x:hover, .acct-x:focus-visible { border-color: var(--lantern); color: var(--lantern); outline: none; }
.acct-body { display: grid; gap: 12px; }
.acct-social { display: grid; gap: 10px; justify-items: center; }
/* Google and Apple as one pair (owner 11/11 「애플 좀 튀지않냐」, 「구글 로고 자체 크기를 좀 줄여」): the same white-outline
   button, width, height, weight and size, both drawn by us at once. Fixed colours, also in dark mode. */
.acct-apple, .acct-google { width: 100%; max-width: 300px; min-height: 40px; padding: 0 12px; justify-content: center; gap: 8px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-size: 14px; font-weight: 500; letter-spacing: 0.25px; }
.acct-apple:hover, .acct-google:hover { transform: none; box-shadow: none; background: #f8f9fa; }
/* Google's real button frame (public/account.js googleButton) sits invisible over ours and takes the press; ours shows
   the hover and the keyboard focus. The slot is our button's size from the first paint, so nothing moves when it lands. */
.acct-google-wrap { position: relative; width: 100%; max-width: 300px; }
.acct-google-wrap .acct-google { max-width: none; }
.acct-google-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0; pointer-events: none; }
.acct-google-live .acct-google-layer { pointer-events: auto; }
.acct-google-wrap:hover .acct-google { background: #f8f9fa; }
.acct-google-wrap:focus-within .acct-google { outline: 2px solid var(--lantern); outline-offset: 2px; }
.acct-google-mark { width: 16px; height: 16px; flex: none; }
/* Apple logo about the text's cap height, nudged up to sit on the text's optical centre (Sign in with Apple guidelines). */
.acct-apple-mark { width: 18px; height: 18px; flex: none; margin-top: -2px; }
.acct-or { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--ink-2); font-size: 0.85rem; }
.acct-or::before, .acct-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.acct-form { display: grid; gap: 10px; }
.acct-field { display: grid; gap: 6px; font-size: 0.9rem; color: var(--ink-2); }
.acct-field input { font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 11px 14px; }
.acct-field input:focus-visible { border-color: var(--lantern); outline: none; }
.acct-form .btn, .acct-row .btn { justify-content: center; }
.acct-link { justify-self: start; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.acct-link:hover, .acct-link:focus-visible { color: var(--lantern); }
.acct-link[disabled] { text-decoration: none; cursor: default; color: var(--ink-2); }
.acct-note { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.acct-warn { color: var(--ink); }
.acct-addr { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.acct-msg { margin: 0; min-height: 1.2em; font-size: 0.88rem; color: var(--alert); }
.acct-row { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-number { display: grid; gap: 8px; justify-items: start; }
.acct-number code { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; padding: 10px 14px; border-radius: 12px; background: var(--paper); border: 1px dashed var(--lantern); }
.acct-me { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acct-next { font-size: 0.85rem; color: var(--ink-2); }
.acct-lv, .acct-op { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 800; color: #fff; }
.acct-op { background: var(--lantern); }
/* Level colors (owner tg 10443): Lv1 grey, Lv2 green, Lv3 sky, Lv4 blue, Lv5 purple, Lv6 orange, Lv7 gold. Same in community.css. */
.lv1 { background: #8a8494; }
.lv2 { background: #2f9a5b; }
.lv3 { background: #2aa3d8; }
.lv4 { background: #2f62d6; }
.lv5 { background: #8a4fd0; }
.lv6 { background: #e57a1f; }
.lv7 { background: #c99a12; }
@media (max-width: 459px) { .acct-shade { place-items: end center; padding: 12px; } .acct-box { padding: 18px 16px 20px; } }
.acct-body > .btn { justify-content: center; }
.acct-msg:empty { display: none; }
.acct-staff { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--ink-2); background: color-mix(in srgb, var(--ink-2) 14%, transparent); }
.acct-delete { margin-top: 4px; }
.acct-danger { background: var(--alert); color: #fff; }