/* Responsive polish: unified viewport sizing for phones, tablets and desktops. */
html,body{max-width:100%;overflow-x:hidden}
img,video{max-width:100%}
.home-page-body .site-main{min-width:0}
.home-page-body .page-content,.home-page-body .center-menu,.home-page-body .menu-stage,.home-page-body .menu-grid{min-width:0}

/* Mobile portrait: slightly larger logo and balanced vertical rhythm. */
@media screen and (max-width:768px){
  html.home-page-root,html.home-page-root body.home-page-body{width:100%;min-height:100%;overscroll-behavior:none}
  body.home-page-body{overflow:hidden}
  .home-page-body .site-main{width:100%;height:100vh;height:100svh;height:100dvh;height:var(--app-height);min-height:0;max-height:var(--app-height);overflow:hidden;padding-left:var(--safe-left);padding-right:var(--safe-right)}
  .home-page-body .page-content{flex:1 1 auto;min-height:0;overflow:hidden;align-items:flex-start;padding:clamp(10px,2.1vh,18px) 12px 0}
  .home-page-body .center-menu{width:100%;max-width:100%;padding:0 2px;transform:none}
  .home-page-body .logo-wrap{width:100%;margin-bottom:clamp(10px,1.8vh,16px)}
  .home-page-body .logo-wrap img{width:auto;height:clamp(108px,29vw,146px);max-height:18vh;max-width:min(92vw,310px);object-fit:contain}
  .home-page-body .menu-stage{width:100%;min-height:0;gap:0}
  .home-page-body .menu-grid{width:min(100%,352px);gap:clamp(7px,1.25vh,10px)}
  .home-page-body .menu-btn{min-height:clamp(42px,6.15vh,48px);padding:clamp(7px,1.15vh,9px) 10px;font-size:clamp(16px,4.6vw,18.5px);line-height:1.2;border-radius:clamp(10px,2.8vw,14px)}
  .home-page-body .help-feedback-wrap{width:min(100%,352px);max-width:352px;min-height:clamp(48px,7.2vh,54px);margin:0 auto;padding:7px 9px;border-radius:12px}
  .home-page-body .help-service-link{height:34px}
  .home-page-body .help-service-img{height:34px}
  .home-page-body .help-feedback-info{height:34px}
  .home-page-body .copyright-bar{flex:0 0 auto;width:calc(100% - 24px);max-width:720px;margin:clamp(8px,1.6vh,14px) auto max(8px,calc(var(--safe-bottom) + 6px));font-size:clamp(10.5px,2.85vw,12px);line-height:1.45;text-wrap:balance}
  .home-page-body .footer-info-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1px 5px;margin-bottom:4px;line-height:1.35}
  .home-page-body .footer-info-links i{font-style:normal}
  .yx-modal{width:100%;height:100vh;height:100svh;height:100dvh;height:var(--app-height)}
  .yx-modal-dialog{max-width:calc(100vw - 20px);max-height:calc(var(--app-height) - 20px)}
  .yx-modal-body{overscroll-behavior:contain}
}

@media screen and (max-width:430px){
  .home-page-body .page-content{padding-left:10px;padding-right:10px}
  .home-page-body .logo-wrap img{height:clamp(106px,30vw,126px);max-width:min(91vw,285px)}
  .home-page-body .menu-grid{width:min(100%,336px)}
  .home-page-body .menu-btn{font-size:clamp(16px,4.8vw,18px)}
  .home-page-body .help-feedback-wrap{width:min(100%,336px)}
}

/* Compact portrait heights: keep every control and the footer visible. */
@media screen and (max-width:768px) and (orientation:portrait) and (max-height:740px){
  .home-page-body .page-content{padding-top:clamp(7px,1.5vh,11px)}
  .home-page-body .logo-wrap{margin-bottom:8px}
  .home-page-body .logo-wrap img{height:clamp(96px,25vw,118px);max-height:17vh}
  .home-page-body .menu-grid{gap:6px}
  .home-page-body .menu-btn{min-height:41px;padding:6px 9px;font-size:clamp(15.5px,4.4vw,17px)}
  .home-page-body .help-feedback-wrap{min-height:47px;padding-top:6px;padding-bottom:6px}
  .home-page-body .copyright-bar{margin-top:7px;margin-bottom:max(6px,calc(var(--safe-bottom) + 4px));font-size:10.5px;line-height:1.35}
  .home-page-body .footer-info-links{margin-bottom:2px}
}

@media screen and (max-width:768px) and (orientation:portrait) and (max-height:640px){
  .home-page-body .page-content{padding-top:5px}
  .home-page-body .logo-wrap{margin-bottom:6px}
  .home-page-body .logo-wrap img{height:clamp(92px,24vw,106px);max-height:17vh}
  .home-page-body .menu-grid{gap:5px}
  .home-page-body .menu-btn{min-height:37px;padding:5px 8px;font-size:15px;border-radius:10px}
  .home-page-body .help-feedback-wrap{min-height:43px;padding:5px 7px}
  .home-page-body .help-service-link,.home-page-body .help-service-img,.home-page-body .help-feedback-info{height:31px}
  .home-page-body .help-feedback-title{font-size:10.5px}
  .home-page-body .help-feedback-email{font-size:9.5px}
  .home-page-body .copyright-bar{margin-top:5px;margin-bottom:max(4px,calc(var(--safe-bottom) + 3px));font-size:9.5px;line-height:1.25}
}

/* Phone/tablet landscape: use the available width instead of stacking everything vertically. */
@media screen and (max-width:900px) and (orientation:landscape) and (max-height:520px){
  html.home-page-root,html.home-page-root body.home-page-body{height:100%;min-height:0;overflow:hidden}
  body.home-page-body{overflow:hidden}
  .home-page-body .site-main{height:100vh;height:100svh;height:100dvh;height:var(--app-height);min-height:0;max-height:var(--app-height);overflow:hidden}
  .home-page-body .page-content{flex:1 1 auto;min-height:0;align-items:center;padding:max(5px,var(--safe-top)) 12px 0;overflow:hidden}
  .home-page-body .center-menu{max-width:900px;max-height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(18px,4.5vw,48px);padding:0;transform:none}
  .home-page-body .logo-wrap{flex:0 0 clamp(145px,23vw,220px);width:clamp(145px,23vw,220px);margin:0}
  .home-page-body .logo-wrap img{width:100%;height:auto;max-width:220px;max-height:clamp(74px,24vh,112px)}
  .home-page-body .menu-stage{flex:0 1 min(64vw,590px);width:min(64vw,590px);min-height:0;max-height:none;display:block}
  .home-page-body .menu-grid{width:100%;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px}
  .home-page-body .menu-btn{min-height:34px;padding:4px 8px 5px;font-size:clamp(13px,2.15vw,15.5px);border-radius:9px}
  .home-page-body .help-feedback-wrap{grid-column:1/-1;width:100%;max-width:none;min-height:42px;padding:5px 9px;border-radius:10px}
  .home-page-body .help-service-link,.home-page-body .help-service-img,.home-page-body .help-feedback-info{height:30px}
  .home-page-body .help-service-link{width:104px;min-width:104px;max-width:104px}
  .home-page-body .help-service-img{width:104px;max-width:104px}
  .home-page-body .help-feedback-title{font-size:10.5px}
  .home-page-body .help-feedback-email{font-size:9.5px}
  .home-page-body .copyright-bar{flex:0 0 auto;width:min(96%,780px);margin:2px auto max(3px,calc(var(--safe-bottom) + 2px));font-size:9px;line-height:1.18}
  .home-page-body .footer-info-links{margin-bottom:1px;line-height:1.15}
}

@media screen and (max-width:680px) and (orientation:landscape) and (max-height:420px){
  .home-page-body .center-menu{gap:14px}
  .home-page-body .logo-wrap{flex-basis:128px;width:128px}
  .home-page-body .logo-wrap img{max-height:72px}
  .home-page-body .menu-stage{flex-basis:calc(100vw - 170px);width:calc(100vw - 170px)}
  .home-page-body .menu-grid{gap:4px 6px}
  .home-page-body .menu-btn{min-height:30px;padding:3px 6px;font-size:12.5px}
  .home-page-body .help-feedback-wrap{min-height:36px;padding:3px 6px}
  .home-page-body .help-service-link,.home-page-body .help-service-img,.home-page-body .help-feedback-info{height:26px}
  .home-page-body .copyright-bar{font-size:8.5px}
}

/* Desktop/tablet width and height balancing. */
@media screen and (min-width:769px){
  .home-page-body .center-menu{max-width:min(980px,calc(100vw - 28px))}
  .home-page-body .menu-grid{max-width:100%}
  .home-page-body .copyright-bar{padding-left:8px;padding-right:8px;text-wrap:balance}
  .yx-modal-dialog{max-width:calc(100vw - 32px)}
}

@media screen and (min-width:769px) and (max-width:1024px){
  .home-page-body .qrcode-box{left:clamp(6px,1.5vw,16px)!important;width:clamp(100px,12vw,132px)}
  .home-page-body .menu-grid{width:clamp(238px,29vw,292px)}
}

/* Standalone information pages also honor dynamic viewport and safe areas. */
body.info-page-body{min-height:100vh;min-height:100svh;min-height:100dvh}
.info-static-modal{min-height:100vh;min-height:100svh;min-height:100dvh}
.info-static-modal .yx-modal-dialog{max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}
@media screen and (max-width:768px){
  .info-static-modal{padding:max(8px,calc(var(--safe-top) + 5px)) max(8px,calc(var(--safe-right) + 5px)) max(8px,calc(var(--safe-bottom) + 5px)) max(8px,calc(var(--safe-left) + 5px))}
  .info-static-modal .yx-modal-dialog{max-width:100%;max-height:calc(100dvh - 16px)}
  .info-static-modal .yx-modal-head{min-width:0}
  .info-static-modal .yx-modal-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Mobile composition alignment: move the logo and action area together.
   The offsets scale with viewport height so top and bottom spacing remain balanced. */
@media screen and (max-width:768px) and (orientation:portrait){
  .home-page-body .center-menu{
    transform:translateY(clamp(16px,2.45vh,22px))!important;
  }
  .home-page-body .menu-stage{
    transform:translateY(clamp(2px,.5vh,4px))!important;
  }
}

/* Taller phones have more breathing room, so the composition may sit slightly lower. */
@media screen and (max-width:768px) and (orientation:portrait) and (min-height:820px){
  .home-page-body .center-menu{
    transform:translateY(clamp(20px,2.7vh,27px))!important;
  }
  .home-page-body .menu-stage{
    transform:translateY(4px)!important;
  }
}

/* Compact portrait screens use a smaller offset to protect the footer area. */
@media screen and (max-width:768px) and (orientation:portrait) and (max-height:740px){
  .home-page-body .center-menu{
    transform:translateY(clamp(9px,1.6vh,12px))!important;
  }
  .home-page-body .menu-stage{
    transform:translateY(2px)!important;
  }
}

@media screen and (max-width:768px) and (orientation:portrait) and (max-height:640px){
  .home-page-body .center-menu{
    transform:translateY(clamp(4px,1vh,7px))!important;
  }
  .home-page-body .menu-stage{
    transform:translateY(1px)!important;
  }
}

/* Very short, narrow phones use the smallest safe offset. */
@media screen and (max-width:360px) and (orientation:portrait) and (max-height:640px){
  .home-page-body .center-menu{
    transform:translateY(4px)!important;
  }
}

/* Landscape phones move both the logo and buttons as one unit with a conservative offset. */
@media screen and (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .home-page-body .center-menu{
    transform:translateY(clamp(4px,1.5vh,7px))!important;
  }
  .home-page-body .menu-stage{
    transform:translateY(2px)!important;
  }
}

@media screen and (max-width:680px) and (orientation:landscape) and (max-height:420px){
  .home-page-body .center-menu{
    transform:translateY(3px)!important;
  }
  .home-page-body .menu-stage{
    transform:translateY(1px)!important;
  }
}

/* Mobile vertical balance: distribute the spare viewport height above and below
   the logo/action composition instead of leaving it all above the footer. */
@media screen and (max-width:768px) and (orientation:portrait){
  .home-page-body .page-content{
    align-items:center!important;
  }
  .home-page-body .copyright-bar{
    margin-top:clamp(3px,.7vh,6px)!important;
  }
}

/* Short portrait screens retain a compact, safe separation from the footer. */
@media screen and (max-width:768px) and (orientation:portrait) and (max-height:740px){
  .home-page-body .copyright-bar{
    margin-top:2px!important;
  }
}

@media screen and (max-width:768px) and (orientation:portrait) and (max-height:640px){
  .home-page-body .copyright-bar{
    margin-top:1px!important;
  }
}

/* WebP-first images with original-format fallback */
.logo-wrap picture{display:flex;align-items:center;justify-content:center;max-width:100%}
.qrcode-box picture{display:block;width:100%}
.help-service-link picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%}