/**
 * SG User Menu Frontend Styles
 */
.sgum-mobile-toggle-wrap { display: none; }
.sgum-menu { width: 300px; max-width: 100%; background: #ffffff; border: 1px solid rgba(15,15,15,.08); border-radius: 24px; padding: 22px 18px; box-shadow: 0 18px 45px rgba(15,15,15,.06); box-sizing: border-box; color: #101010; font-family: inherit; }
.sgum-mobile-header { display: none; }
.sgum-header { text-align: center; padding: 8px 0 22px 0; }
.sgum-header-logo-frame { width: 96px; height: 96px; margin: 0 auto 12px auto; border-radius: 18px; border: 1px solid rgba(15,15,15,.14); background: #f5efea; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; }
.sgum-header-logo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgum-header-logo-fallback { width: 46px; height: 46px; border-radius: 10px; background: rgba(237,32,36,.18); display: block; }
.sgum-header-title { font-weight: 800; text-transform: uppercase; letter-spacing: .10em; color: #101010; font-size: .92rem; line-height: 1.25; }
.sgum-sections { display: flex; flex-direction: column; gap: 20px; }
.sgum-section { margin: 0; padding: 0; }
.sgum-section-heading { margin: 0 0 10px 0; text-align: center; }
.sgum-section-line { height: 1px; width: 100%; background: rgba(15,15,15,.82); }
.sgum-section-heading h3 { margin: 8px 0; color: #ed2024; font-size: .82rem; line-height: 1.25; font-weight: 800; letter-spacing: .04em; text-transform: none; }
.sgum-items { list-style: none; padding: 0; margin: 0; }
.sgum-item { margin: 0; padding: 0; }
.sgum-link { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 8px; border-radius: 12px; color: #101010; text-decoration: none; transition: background-color .16s ease, transform .16s ease; }
.sgum-link:hover { background: #f5efea; transform: translateX(1px); text-decoration: none; }
.sgum-icon-frame { width: 28px; height: 28px; min-width: 28px; border-radius: 7px; border: 1px solid rgba(15,15,15,.13); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; }
.sgum-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgum-icon-fallback { width: 12px; height: 12px; border-radius: 3px; background: rgba(237,32,36,.22); display: block; }
.sgum-link-text { font-size: .93rem; line-height: 1.3; font-weight: 600; }
.sgum-item-divider { height: 1px; background: rgba(15,15,15,.35); margin: 10px 8px; list-style: none; }
.sgum-logout-area { margin-top: 24px; }
.sgum-logout-divider { height: 1px; width: 100%; background: rgba(15,15,15,.82); margin: 0 0 16px 0; }
.sgum-logout-button { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; border-radius: 999px; background: #ed2024; color: #fff !important; text-decoration: none !important; font-weight: 800; font-size: .98rem; box-shadow: 0 12px 28px rgba(237,32,36,.24); transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.sgum-logout-button:hover { background: #d9181c; transform: translateY(-1px); box-shadow: 0 14px 34px rgba(237,32,36,.30); }
@media (max-width: 767px) { .sgum-mobile-toggle-wrap { display: block; margin: 0 0 16px 0; } .sgum-mobile-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 1px solid rgba(15,15,15,.12); border-radius: 999px; background: #fff; color: #101010; padding: 10px 18px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(15,15,15,.08); } .sgum-mobile-toggle-icon { font-size: 1.2rem; line-height: 1; } .sgum-overlay { position: fixed; inset: 0; background: rgba(15,15,15,.38); opacity: 0; pointer-events: none; z-index: 9998; transition: opacity .18s ease; } .sgum-menu { position: fixed; top: 0; left: 0; width: min(86vw, 330px); height: 100vh; max-height: 100vh; overflow-y: auto; border-radius: 0 24px 24px 0; transform: translateX(-105%); transition: transform .22s ease; z-index: 9999; padding: 18px 16px 24px 16px; } body.sgum-menu-open .sgum-overlay { opacity: 1; pointer-events: auto; } body.sgum-menu-open .sgum-menu { transform: translateX(0); } body.sgum-menu-open { overflow: hidden; } .sgum-mobile-header { display: flex; justify-content: flex-end; margin-bottom: 4px; } .sgum-close { width: 38px; height: 38px; border: none; border-radius: 999px; background: #f5efea; color: #101010; font-size: 1.6rem; line-height: 1; cursor: pointer; } .sgum-header-logo-frame { width: 84px; height: 84px; } .sgum-header { padding-top: 0; } }