/* Shared viewport fixes. Insets are supplied by the device, never a model name. */
:root{--adaptive-top:0px;--adaptive-bottom:0px;--adaptive-vh:100vh;--adaptive-left:env(safe-area-inset-left,0px);--adaptive-right:env(safe-area-inset-right,0px)}
html[data-adaptive-app] {scroll-padding-top:calc(var(--adaptive-top) + 12px);scroll-padding-bottom:calc(var(--adaptive-bottom) + 16px)}
html[data-adaptive-app] input,html[data-adaptive-app] textarea,html[data-adaptive-app] select{scroll-margin-block:16px;min-width:0}
html[data-adaptive-app=kosak] body,html[data-adaptive-app=sikdan] body,html[data-adaptive-app=maeum] body{padding-left:var(--adaptive-left);padding-right:var(--adaptive-right)}
html[data-adaptive-app=kosak] #bottomNav,html[data-adaptive-app=sikdan] nav.tabs,html[data-adaptive-app=maeum] nav{padding-left:var(--adaptive-left);padding-right:var(--adaptive-right)}
/* Retain each app's ad reservation while reducing dialogs to the visible viewport. */
html[data-adaptive-app=kosak] :is(#modal,#exitDlg,#noticeModal,#appUpdateOv),
html[data-adaptive-app=maeum] :is(.dd-wrap,.pk-modal,.crisis-wrap,.lock-wrap,.wsheet,.quiz-ov,.lbm,#appUpdateOv){
 top:var(--adaptive-top)!important;bottom:var(--adaptive-bottom)!important;max-height:var(--adaptive-vh);min-height:0;box-sizing:border-box;
 padding-left:max(16px,var(--adaptive-left))!important;padding-right:max(16px,var(--adaptive-right))!important;
}
html[data-adaptive-app=kosak] :is(#modal,#exitDlg,#noticeModal,#appUpdateOv)>div,
html[data-adaptive-app=maeum] :is(.dd-wrap,.pk-modal,.crisis-wrap,.lock-wrap,.wsheet,.quiz-ov,.lbm,#appUpdateOv)>div{
 max-height:100%!important;min-height:0;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;
}
html[data-adaptive-app=sikdan] .overlay{
 top:var(--adaptive-top);bottom:max(var(--adaptive-bottom),calc(var(--adh,0px) + var(--sa-bottom,0px)));
 padding-left:var(--adaptive-left);padding-right:var(--adaptive-right);min-height:0;
}
html[data-adaptive-app=sikdan] .overlay>.sheet{max-height:100%;overscroll-behavior:contain;box-sizing:border-box}
@media(max-width:380px){
 html[data-adaptive-app=sikdan] header{gap:6px;padding-inline:10px}
 html[data-adaptive-app=sikdan] header .logo{display:none}
 html[data-adaptive-app=sikdan] header h1{flex:1;min-width:0;font-size:16px}
 html[data-adaptive-app=sikdan] header .lang-btn{padding-inline:8px;flex-shrink:0}
 html[data-adaptive-app=sikdan] header .info-btn{flex-shrink:0;margin-right:0!important}
}
html[data-adaptive-app=rank] .sheet-bg{
 top:var(--adaptive-top);bottom:max(var(--adaptive-bottom),calc(var(--ad-h,0px) + var(--sab,0px)));
 padding:var(--sat,0px) var(--sar,0px) 0 var(--sal,0px);min-height:0;
}
html[data-adaptive-app=rank] .sheet-bg>.sheet{max-height:100%;overscroll-behavior:contain}
/* Leave room to reach fields; the native keyboard can also resize the entire WebView. */
html.adaptive-keyboard[data-adaptive-app=kosak] #bottomNav,
html.adaptive-keyboard[data-adaptive-app=maeum] nav,
html.adaptive-keyboard[data-adaptive-app=sikdan] nav.tabs{visibility:hidden;pointer-events:none}
html.adaptive-keyboard[data-adaptive-app=rank] .tabs{display:none}
/* Tablet reading width, without stretching forms to the entire desktop. */
@media(min-width:768px){
 html[data-adaptive-app=maeum] .wrap{max-width:720px;padding-left:24px;padding-right:24px}
 html[data-adaptive-app=maeum] nav{justify-content:center;gap:clamp(8px,3vw,32px)}
}
@media(prefers-reduced-motion:reduce){
 html[data-adaptive-app=maeum] :is(.blob,.mascot){animation:none}
}