@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
/* ZZAN topbar body reset */
html,body{margin:0;padding:0;}

.wm-mem-wrap {
    --wm-p: #1a73e8; --wm-navy:#0c1f3f;
    --wm-bg:#f5f7fa; --wm-card:#fff; --wm-border:#e2e8f0; --wm-text:#0f172a; --wm-sub:#64748b; --wm-muted:#94a3b8;
    font-family:'Pretendard',-apple-system,sans-serif; color:var(--wm-text);
    max-width:560px; margin:0 auto; padding:28px 16px 60px;
}
.wm-mem-wrap * { box-sizing:border-box; }

/* 프로필 카드 */
.wm-mem-profile { display:flex; align-items:center; gap:18px; background:var(--wm-card); border:1px solid var(--wm-border); border-radius:16px; padding:24px; margin-bottom:20px; }
.wm-mem-avatar { width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--wm-bg); border:1px solid var(--wm-border); }
.wm-mem-avatar-def { display:flex; align-items:center; justify-content:center; color:var(--wm-muted); }
.wm-mem-avatar-def svg { width:38px; height:38px; }
.wm-mem-pname { font-size:20px; font-weight:800; margin:0 0 6px; }
.wm-mem-grade { display:inline-block; font-size:12px; font-weight:700; color:var(--wm-p); background:#eff6ff; padding:3px 12px; border-radius:20px; }
.wm-mem-reg { display:block; font-size:12px; color:var(--wm-muted); margin-top:6px; }

/* 세로 메뉴 (SNS 설정 스타일) */
.wm-mem-menu { background:var(--wm-card); border:1px solid var(--wm-border); border-radius:16px; overflow:hidden; }
.wm-mem-link { display:flex; align-items:center; gap:14px; padding:17px 20px; border-bottom:1px solid var(--wm-border); text-decoration:none; color:var(--wm-text); font-size:15px; font-weight:600; transition:background .12s; }
.wm-mem-link:last-child { border-bottom:none; }
.wm-mem-link:hover { background:var(--wm-bg); }
.wm-mem-link .ico { width:22px; height:22px; flex-shrink:0; color:var(--wm-sub); }
.wm-mem-link .ico svg { width:22px; height:22px; }
.wm-mem-link .arr { margin-left:auto; color:var(--wm-muted); }
.wm-mem-link.danger { color:#dc2626; }
.wm-mem-link.danger .ico { color:#dc2626; }
.wm-mem-link.is-active { background:var(--wm-bg); color:var(--wm-p); font-weight:800; }
.wm-mem-link.is-active .ico { color:var(--wm-p); }
.wm-mem-logout { display:block; text-align:center; margin-top:18px; font-size:13px; color:var(--wm-sub); text-decoration:none; }
.wm-mem-logout:hover { color:var(--wm-p); }

/* 카드/폼 */
.zzan-card-container, .find-account-box { max-width:480px; margin:0 auto; background:var(--wm-card); border:1px solid var(--wm-border); border-radius:16px; overflow:hidden; }
.find-account-box { padding:32px; }
.zzan-card-header { padding:22px 24px; border-bottom:1px solid var(--wm-border); }
.zzan-card-header h2 { margin:0; font-size:19px; font-weight:800; }
.zzan-card-body { padding:24px; }
.control-group { margin-bottom:18px; }
.control-label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.control-group input, .control-group select, .controls input, .controls select {
    width:100%; height:46px; padding:0 14px; border:1px solid var(--wm-border); border-radius:10px; font-size:15px; background:var(--wm-card); color:var(--wm-text); outline:none;
}
.control-group input:focus, .controls input:focus { border-color:var(--wm-p); box-shadow:0 0 0 3px rgba(26,115,232,.12); }
.help-text { font-size:12px; color:var(--wm-muted); margin:6px 0 0; }
.control-group:has(.inputDate) { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.control-group:has(.inputDate) > label { width:100%; }
.control-group .inputDate { flex:1; min-width:160px; width:auto; }
.control-group input[type=button], .control-group button[type=button] { height:46px; padding:0 16px; border:1px solid var(--wm-border); border-radius:10px; background:var(--wm-bg); color:var(--wm-sub); font-size:14px; cursor:pointer; width:auto; }
.btnArea { display:flex; gap:8px; margin-top:24px; }
.btnArea.center { justify-content:center; }
.zm_btn { flex:1; display:inline-flex; align-items:center; justify-content:center; height:48px; border-radius:10px; border:1px solid var(--wm-border); background:var(--wm-card); color:var(--wm-text); font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; }
.zm_btn:hover { background:var(--wm-bg); }
.zm_btn-primary { background:var(--wm-p); border-color:var(--wm-p); color:#fff; }
.zm_btn-primary:hover { background:#1557b0; }
.zm_btn-danger { background:#dc2626; border-color:#dc2626; color:#fff; }
.zm_btn-block { width:100%; }
.message { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.message.error, .message.warning { background:#fef2f2; color:#b91c1c; }
.message.info { background:#eff6ff; color:#1d4ed8; }

/* 로그인/가입 */
.wm-auth { max-width:400px; margin:30px auto; background:var(--wm-card); border:1px solid var(--wm-border); border-radius:16px; padding:36px 32px; }
.wm-auth h2 { text-align:center; font-size:26px; font-weight:800; margin:0 0 28px; letter-spacing:1px; }
.wm-auth .input-group { margin-bottom:14px; }
.wm-auth input[type=text], .wm-auth input[type=email], .wm-auth input[type=password], .wm-auth input[type=tel], .wm-auth input[type=date], .wm-auth input[type=number], .wm-auth select, .wm-auth .inputDate { width:100%; height:48px; padding:0 14px; border:1px solid var(--wm-border); border-radius:10px; font-size:15px; outline:none; background:var(--wm-card); }
.wm-auth input:focus, .wm-auth select:focus { border-color:var(--wm-p); box-shadow:0 0 0 3px rgba(26,115,232,.12); }
.wm-auth .input-group:has(.inputDate) { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wm-auth .input-group:has(.inputDate) > label { width:100%; }
.wm-auth .inputDate { flex:1; min-width:160px; }
.wm-auth .input-group input[type=button], .wm-auth .input-group button[type=button] { height:48px; padding:0 16px; border:1px solid var(--wm-border); border-radius:10px; background:var(--wm-bg); color:var(--wm-sub); font-size:14px; cursor:pointer; width:auto; }
.wm-auth .zm_btn-login { width:100%; height:50px; background:var(--wm-p); color:#fff; border:none; border-radius:10px; font-size:16px; font-weight:800; cursor:pointer; margin-top:10px; }
.wm-auth .zm_btn-login:hover { background:#1557b0; }
.wm-auth .login-links { margin-top:22px; text-align:center; font-size:13px; color:var(--wm-sub); }
.wm-auth .login-links a { color:var(--wm-sub); text-decoration:none; }
.wm-auth .login-links a:hover { color:var(--wm-p); }
.wm-auth .login-links .divider { margin:0 8px; opacity:.4; }
.wm-auth label.chk { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--wm-sub); margin:6px 0 4px; cursor:pointer; }
.wm-auth .agreement-group { border:1px solid var(--wm-border); border-radius:10px; padding:14px; margin-bottom:12px; font-size:13px; }
.wm-auth .agreement-content { max-height:120px; overflow:auto; color:var(--wm-sub); margin:8px 0; font-size:12px; line-height:1.6; }
.wm-pagetitle { text-align:center; font-size:13px; color:var(--wm-muted); margin:0 auto 18px; max-width:480px; }
.profile-image-wrap img { width:90px; height:90px; border-radius:50%; object-fit:cover; border:1px solid var(--wm-border); }
.wm-sns-notice { max-width:480px; margin:0 auto 18px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:14px; padding:18px 20px; }
.wm-sns-notice strong { display:block; color:var(--wm-p); font-size:15px; font-weight:800; margin-bottom:6px; }
.wm-sns-notice p { margin:0 0 12px; font-size:13px; color:var(--wm-sub); line-height:1.6; word-break:keep-all; }
.wm-sns-notice .zm_btn { display:inline-flex; width:auto; height:40px; padding:0 18px; }