/* Header and button dimensions match the Semodeung reference. */
.vb-site-header { background:#fff; margin:0; padding:0; }
.vb-site-header > ._container { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; width:100%!important; min-width:0!important; padding:12px 20px 4px; }
.vb-site-header > ._container:before, .vb-site-header > ._container:after { display:none; }
.vb-site-header .vb-bookmark { order:0; flex:none; display:flex; align-items:center; gap:5px; color:#555; font-size:12px; font-weight:700; white-space:nowrap; text-decoration:none; }
.vb-bookmark span { color:#f6bd17; font-size:18px; }
.vb-site-header .site-logo { order:1; flex:none; float:none; padding:0; margin:0; }
.vb-site-header .site-logo img { display:block; max-width:200px; max-height:48px; width:auto; height:auto; }
.vb-site-header .call_box { order:2; flex:1 1 260px; float:none; width:auto!important; min-width:0; margin:0; padding:0; }
.vb-site-header .call_box > div { margin-top:0!important; }
.vb-site-header .vb-header-tools { order:3; flex:none; margin-left:auto; }
.vb-header-tools #myarea { margin:0; padding:0; }
.vb-header-tools #myarea > li { border:0; padding:0 8px; }
.vb-header-tools #myarea > li > a { color:#333; }
.vb-site-header .header-navigation { order:5; flex-basis:100%; float:none!important; margin:0; padding:0; min-height:0; }
.vb-site-header .header-navigation > ul { margin:0; }
.vb-login-area { display:flex; align-items:center; justify-content:flex-end; gap:7px; }
.vb-login-area .vb-login-btn { box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:8px; width:145px; height:42px; padding:0 12px; border:1px solid #e7ebf2; border-radius:10px!important; font-family:Arial,'Malgun Gothic',sans-serif; font-size:14px; line-height:1; font-weight:800; cursor:pointer; text-decoration:none!important; white-space:nowrap; }
.vb-login-area .vb-login-btn:hover { filter:brightness(.98); }
.vb-login-area .vb-login-btn:focus-visible, .vb-google-wrap:focus-within { outline:2px solid #3579ea; outline-offset:3px; }
.vb-login-area .vb-google { background:#fff; color:#333; border-color:#d7dce5; }
.vb-login-area .vb-naver { background:#03c75a; border-color:#03c75a; color:#fff!important; }
.vb-login-area .vb-kakao { background:#fee500; border-color:#fee500; color:rgba(0,0,0,.85); }
.vb-google-symbol { width:24px; height:24px; flex:none; }
.vb-naver-symbol { display:grid; place-items:center; flex:none; width:20px; height:20px; background:#fff; color:#03c75a; border-radius:4px; font-family:Arial,sans-serif; font-size:14px; font-weight:900; }
.vb-kakao-symbol { position:relative; flex:none; width:20px; height:16px; border-radius:50%; background:#191919; }
.vb-kakao-symbol:after { content:''; position:absolute; bottom:-3px; left:3px; width:6px; height:6px; background:#191919; transform:matrix(.786749,.309017,-.814703,.951057,0,0); }
.vb-google-wrap { position:relative; width:145px; height:42px; flex:none; border-radius:10px; }
.vb-google-visual { position:absolute; inset:0; }
.vb-google-real { position:absolute; inset:0; width:100%; height:42px; overflow:hidden; opacity:.001; }
.vb-google-real:empty { pointer-events:none; }
.vb-member-gate-dialog { width:540px; max-width:calc(100% - 24px); margin:80px auto; }
/* PC only: keep the login gate at half the generic 1024px dialog width. */
.corporate #vb-member-gate .vb-member-gate-dialog { width:512px; max-width:calc(100% - 24px); }
.vb-member-gate-dialog .modal-content { border-radius:16px!important; }
.vb-member-gate-dialog .modal-header { padding:20px 24px; }
.vb-member-gate-dialog .modal-body { padding:24px; color:#555; line-height:1.7; }
.vb-gate-heading { font-size:18px; font-weight:700; color:#222; }
.vb-member-gate-dialog .vb-login-area { justify-content:center; margin:24px 0; }
.vb-gate-note { margin:0; font-size:12px; color:#777; }
@media(max-width:520px) {
 .corporate #vb-member-gate .vb-login-area { flex-direction:column; align-items:stretch; gap:10px; }
 .corporate #vb-member-gate .vb-login-btn, .corporate #vb-member-gate .vb-google-wrap { width:100%; }
 .corporate #vb-member-gate .vb-google-visual { width:100%; }
}
@media(max-width:1300px) {
 .vb-site-header .call_box { order:4; flex-basis:100%; font-size:12px; }
 .vb-site-header .call_box big { font-size:16px; }
}
@media(max-width:800px) {
 .vb-site-header > ._container { gap:8px 10px; padding:10px 12px 4px; }
 .vb-site-header .vb-header-tools { width:100%; }
 .vb-login-area { justify-content:flex-end; }
}
@media(max-width:480px) {
 .vb-login-area .vb-login-btn, .vb-google-wrap { width:calc((100vw - 38px)/3); }
 .vb-login-area .vb-google-visual { width:100%; }
 .vb-login-area .vb-login-btn { padding:0 6px; gap:6px; }
 .vb-site-header .site-logo img { max-width:180px; }
 .vb-member-gate-dialog .vb-login-btn, .vb-member-gate-dialog .vb-google-wrap { width:calc((100vw - 88px)/3); }
 .vb-member-gate-dialog .vb-google-visual { width:100%; }
}