/* Wedding mobile editor: desktop styles unchanged */
@media(max-width:767px){
 html,body{margin:0!important;background:#101114!important;overflow:hidden!important;height:100%;}
 body{color:#fff} #container,#contents,#mainArea{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#101114!important;}
 #headerArea,#menuArea,#system_description,.contents_description,#likeBlock,.banner_block,.center_block,.mix_close,#mixBlock2,.mainMenu,#footerArea,footer{display:none!important}
 #mixArea{display:block!important;position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;overflow:hidden!important;border-radius:0!important;background:#101114!important;padding:0!important;margin:0!important;z-index:20!important}
 #sexMenuBlock{position:absolute!important;top:calc(env(safe-area-inset-top) + 68px);left:12px;width:calc(100% - 24px)!important;max-width:none!important;z-index:25}
 #sexMenuBlock ul{display:flex!important;gap:8px!important;justify-content:center}
 #sexMenuBlock li,#sexMenuBlock li.girl,#sexMenuBlock li.btn_on{float:none!important;width:118px!important;background:#303136!important;border-radius:100px!important;padding:7px 3px!important}
 #sexMenuBlock li.btn_on{background:#de9ab5!important} #sexMenuBlock img{max-height:28px!important;max-width:100%!important;object-fit:contain}
 #mixBlockCenter{position:absolute!important;top:calc(env(safe-area-inset-top) + 115px);left:0;width:100%!important;height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 200px)!important;max-height:65vh;overflow:hidden!important}
 #mixBlock{position:absolute!important;top:50%!important;left:50%!important;margin:0!important;width:480px!important;height:360px!important;transform:translate(-50%,-50%) scale(var(--wedding-scale,.8))!important;transform-origin:center!important;overflow:hidden!important}
 #selectArea{position:fixed!important;bottom:calc(74px + env(safe-area-inset-bottom))!important;left:0!important;right:0!important;z-index:30!important;max-height:min(38dvh,320px)!important;overflow:auto!important;overscroll-behavior:contain;background:#25262a!important;border-radius:18px 18px 0 0!important;padding:14px 10px!important;box-sizing:border-box!important;margin:0!important;display:none}
 body.wedding-panel-open #selectArea{display:block!important}
 body.wedding-panel-open #mixBlockCenter{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 415px)!important}
 #partsReloadArea,#selectPartsArea{width:100%!important;max-width:100%!important;overflow:visible!important}
 #selectArea .selectBlock{margin-bottom:8px!important} #selectArea .wallpaper_list{padding:0!important}
 #selectArea .wallpaper_list li{max-width:24%!important}
 .wedding-topbar{position:fixed;z-index:50;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 8px) 14px 10px;display:flex;align-items:center;justify-content:space-between;background:#101114;color:white;box-sizing:border-box;height:calc(60px + env(safe-area-inset-top))}
 .wedding-topbar a,.wedding-topbar button{font:600 14px sans-serif;border:0;border-radius:22px;padding:10px 15px;text-decoration:none;color:white;background:#34353a;cursor:pointer}
 .wedding-topbar .wedding-create{background:linear-gradient(100deg,#ed82b7,#75cce8);color:#121212;font-weight:700}
 .wedding-topbar strong{font:600 15px sans-serif;color:white}
 .wedding-bottomnav{position:fixed;z-index:50;bottom:0;left:0;right:0;height:calc(70px + env(safe-area-inset-bottom));padding:6px 8px calc(6px + env(safe-area-inset-bottom));box-sizing:border-box;background:#17181c;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
 .wedding-bottomnav a,.wedding-bottomnav button{font:600 12px sans-serif;color:#eee;text-decoration:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:0;background:transparent;border-radius:10px}
 .wedding-bottomnav .active{background:#37333c;color:#ffbedb}
 .wedding-bottomnav span{font-size:20px;line-height:1}
 #start_sexBlock{position:fixed!important;inset:calc(60px + env(safe-area-inset-top)) 0 calc(70px + env(safe-area-inset-bottom))!important;z-index:60!important;width:100%!important;max-width:none!important;height:auto!important;background:#101114!important;border:0!important;border-radius:0!important;display:flex!important;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;padding:28px!important}
 #start_sexBlock p{width:100%;color:white;text-align:center;font-size:18px!important} #start_sexBlock img{max-width:43%;height:auto;cursor:pointer}
}

/* v3: original illustrated menu assets and restored category submenus */
@media(max-width:767px){
 #menuSelectBlock{display:block!important;position:sticky;top:0;z-index:3;margin:0 0 10px!important;padding:0!important;background:#25262a!important}
 #menuSelectBlock ul.mainMenu{display:none!important}
 #menuSelectBlock ul.subMenu{display:flex!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;gap:3px!important;flex-wrap:nowrap!important;margin:0!important;padding:8px 3px!important;box-sizing:border-box!important;border-radius:10px!important;scrollbar-width:none;background:#35363a!important}
 #menuSelectBlock ul.subMenu.girl{background:#44313b!important}
 #menuSelectBlock ul.subMenu li{float:none!important;flex:0 0 16.2%!important;min-width:0!important;width:auto!important;box-sizing:border-box!important;padding:5px 1px!important;cursor:pointer}
 #menuSelectBlock ul.subMenu li.now,#menuSelectBlock ul.subMenu li.wedding-selected{background:#64666e!important;border-radius:8px!important}
 #menuSelectBlock ul.subMenu li a{display:flex!important;align-items:center!important;flex-direction:column!important;text-decoration:none!important;gap:3px!important}
 #menuSelectBlock ul.subMenu img{width:38px!important;height:38px!important;max-width:100%!important;object-fit:contain!important}
 #menuSelectBlock ul.subMenu .txt{display:block!important;color:white!important;font-size:10px!important;line-height:1.2!important}
 #menuSelectBlock ul.wedding-fashion-submenu li{flex-basis:24%!important}
 .wedding-bottomnav img{display:block;max-width:34px;width:34px;height:29px;object-fit:contain}
 .wedding-bottomnav span{font-size:11px!important}
 #selectArea .boxTitleBlock{scroll-margin-top:95px}
}

/* v4: content-first smartphone redesign; no changes to desktop layout */
@media(max-width:767px){
 .wedding-bottomnav{grid-template-columns:repeat(3,minmax(0,1fr))!important;height:calc(66px + env(safe-area-inset-bottom))!important;background:#17181c!important;border-top:1px solid #38393d}
 .wedding-bottomnav a{min-height:52px!important;gap:2px!important}
 .wedding-bottomnav img{width:32px!important;height:30px!important}
 #selectArea{bottom:calc(66px + env(safe-area-inset-bottom))!important;max-height:min(44dvh,370px)!important; padding:0 10px 14px!important;border-radius:16px 16px 0 0!important;box-shadow:0 -10px 35px #0005}
 #mixBlockCenter{top:calc(env(safe-area-inset-top) + 116px)!important;height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 197px)!important;max-height:none!important;transition:height .16s ease}
 body.wedding-panel-open #mixBlockCenter{height:calc(56dvh - env(safe-area-inset-top) - 98px)!important;min-height:105px!important;max-height:none!important}
 .wedding-drawer-toggle{position:sticky;top:0;z-index:10;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:47px;border:0;color:#fff;background:#25262a;text-align:left;padding:11px 4px;cursor:pointer}
 .wedding-drawer-title{font-size:14px;font-weight:700}.wedding-drawer-action{font-size:11px;color:#d7b5c8;white-space:nowrap}
 #menuSelectBlock{top:47px!important;margin-bottom:6px!important}
 #menuSelectBlock ul.subMenu{padding:5px 2px!important;background:transparent!important;gap:4px!important}
 #menuSelectBlock ul.subMenu li{flex:1 0 0!important;border:1px solid #44464e!important;border-radius:9px!important;min-width:0!important;padding:4px 0!important}
 #menuSelectBlock ul.subMenu li.now,#menuSelectBlock ul.subMenu li.wedding-selected{background:#563e50!important;border-color:#e59fc3!important}
 #menuSelectBlock ul.subMenu img{width:34px!important;height:34px!important}
 #menuSelectBlock ul.subMenu .txt{font-size:11px!important}
 #menuSelectBlock ul.wedding-fashion-submenu li{flex:1 0 0!important}
 #menuSelectBlock ul.wedding-fashion-submenu button{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;width:100%;background:transparent;border:0;color:#fff;padding:0;min-height:49px}
 #selectPartsArea .wedding-hidden-item{display:none!important}
 #selectArea .partsBox{padding-bottom:12px!important}
 #selectArea .partsBox li{cursor:pointer}
 #sexMenuBlock{top:calc(env(safe-area-inset-top) + 64px)!important}
 #start_sexBlock{bottom:0!important;z-index:70!important}
 #start_sexBlock:before{content:'ふたりの似顔絵をつくろう';display:block;text-align:center;width:100%;font-weight:700;font-size:21px;color:#fff;margin-bottom:8px}
 #start_sexBlock p{font-size:14px!important;color:#ddd!important}
}

/* v5: prominent, accessible character switcher */
@media(max-width:767px){#sexMenuBlock ul{align-items:stretch!important;gap:10px!important}#sexMenuBlock li,#sexMenuBlock li.girl,#sexMenuBlock li.btn_on{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:auto!important;min-width:120px!important;padding:7px 12px!important;border:1px solid #4a4c52!important;border-radius:12px!important;cursor:pointer}#sexMenuBlock li.btn_on{border-color:#f3bfd7!important;background:#573f4c!important;box-shadow:inset 0 0 0 1px #f3bfd7}#sexMenuBlock img{width:27px!important;height:28px!important;object-fit:contain!important}.wedding-sex-caption{font-size:13px;font-weight:700;color:#eee;white-space:nowrap}#sexMenuBlock li.btn_on .wedding-sex-caption{color:#fff}}

/* v6: portrait-first layout and fully clickable character switching */
@media(max-width:767px){
 #mixBlockCenter{isolation:isolate!important;}
 #mixBlockCenter #mixBlock{top:calc(50% - 28px)!important;pointer-events:none!important;}
 #mixBlockCenter #sexMenuBlock{position:absolute!important;top:auto!important;bottom:5px!important;left:0!important;right:0!important;width:100%!important;height:49px!important;z-index:40!important;display:flex!important;justify-content:center!important;align-items:center!important;pointer-events:auto!important;}
 #sexMenuBlock ul{display:flex!important;justify-content:center!important;gap:12px!important;margin:0!important;padding:0!important;}
 #sexMenuBlock li,#sexMenuBlock li.girl,#sexMenuBlock li.btn_on{box-sizing:border-box!important;min-width:118px!important;height:43px!important;padding:6px 12px!important;border-radius:12px!important;user-select:none!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;position:relative!important;pointer-events:auto!important;}
 #sexMenuBlock li.wedding-sex-male{background:#203745!important;border:1px solid #529cbb!important;}
 #sexMenuBlock li.wedding-sex-female{background:#44303c!important;border:1px solid #bc789c!important;}
 #sexMenuBlock li.wedding-sex-male.btn_on{background:#246785!important;border:2px solid #88dcff!important;box-shadow:0 0 0 1px #88dcff55!important;}
 #sexMenuBlock li.wedding-sex-female.btn_on{background:#884c70!important;border:2px solid #f5b6d8!important;box-shadow:0 0 0 1px #f5b6d855!important;}
 #sexMenuBlock li.wedding-sex-male .wedding-sex-caption{color:#b7eaff!important;}
 #sexMenuBlock li.wedding-sex-female .wedding-sex-caption{color:#ffd5e8!important;}
 #sexMenuBlock li:focus-visible{outline:2px solid white!important;outline-offset:2px!important;}
 body.wedding-sex-men .wedding-topbar .wedding-create{background:linear-gradient(110deg,#76c2e5,#9de9f5)!important;color:#102b3d!important;}
 body.wedding-sex-men #menuSelectBlock ul.subMenu li.now,body.wedding-sex-men #menuSelectBlock ul.subMenu li.wedding-selected{background:#25485b!important;border-color:#80cfe9!important;}
 body.wedding-sex-men .wedding-bottomnav .active{background:#233e4b!important;color:#9fe5ff!important;}
 body.wedding-sex-men .wedding-drawer-action{color:#a6dff0!important;}
}

/* v7: two-zone editor. One fixed tool dock below the portrait. */
@media(max-width:767px){
 body{--w-nav:68px;--w-drawer: min(43dvh,360px);--w-head:calc(60px + env(safe-area-inset-top));--w-bottom:calc(var(--w-nav) + env(safe-area-inset-bottom))}
 body.wedding-drawer-collapsed{--w-drawer:48px}
 #mixArea{position:static!important}
 #mixBlockCenter,body.wedding-panel-open #mixBlockCenter{position:fixed!important;top:var(--w-head)!important;bottom:calc(var(--w-bottom) + var(--w-drawer))!important;left:0!important;right:0!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;transition:bottom .18s ease!important;box-sizing:border-box!important;padding:6px 4px 54px!important;z-index:22!important;overflow:hidden!important}
 #mixBlockCenter #mixBlock{top:calc((100% - 46px)/2)!important}
 #mixBlockCenter #sexMenuBlock{bottom:4px!important;height:44px!important}
 #sexMenuBlock li,#sexMenuBlock li.girl,#sexMenuBlock li.btn_on{height:38px!important;min-width:108px!important}
 #selectArea,body.wedding-panel-open #selectArea{position:fixed!important;display:flex!important;flex-direction:column!important;top:auto!important;left:0!important;right:0!important;bottom:var(--w-bottom)!important;height:var(--w-drawer)!important;max-height:none!important;min-height:0!important;overflow:hidden!important;padding:0!important;margin:0!important;border-radius:16px 16px 0 0!important;box-shadow:0 -8px 26px #0007!important;z-index:33!important;background:#25262a!important;transition:height .18s ease!important}
 .wedding-drawer-toggle{position:relative!important;top:auto!important;flex:0 0 48px!important;padding:0 16px!important;border-bottom:1px solid #414149!important}
 .wedding-drawer-title{font-size:14px!important}
 #menuSelectBlock{position:relative!important;top:auto!important;flex:0 0 auto!important;width:100%!important;padding:5px 9px!important;margin:0!important;box-sizing:border-box!important;border-bottom:1px solid #3e4047!important}
 #menuSelectBlock ul.subMenu{padding:3px 0!important;gap:6px!important}
 #menuSelectBlock ul.subMenu li{padding:4px 1px!important;min-height:57px!important}
 #menuSelectBlock ul.subMenu img{width:31px!important;height:31px!important}
 #partsReloadArea,#selectPartsArea{min-height:0!important;flex:1 1 auto!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;padding:8px 9px 18px!important;box-sizing:border-box!important}
 #selectArea > .wallpaper_list{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:8px 9px 18px!important;margin:0!important;display:flex!important;flex-wrap:wrap!important;align-content:flex-start!important;gap:7px!important}
 #selectArea > .wallpaper_list li{width:calc(25% - 6px)!important;max-width:none!important;margin:0!important;float:none!important}
 #selectArea > .wallpaper_list li img{max-width:100%!important;height:auto!important}
 #selectArea .selectBlock{margin:0!important}
 #selectArea .partsBox{margin:0!important}
 #selectArea .wedding-hidden-item{display:none!important}
 body.wedding-drawer-collapsed #menuSelectBlock,body.wedding-drawer-collapsed #partsReloadArea,body.wedding-drawer-collapsed #selectPartsArea,body.wedding-drawer-collapsed #selectArea > .wallpaper_list{visibility:hidden!important;pointer-events:none!important}
 .wedding-bottomnav{bottom:0!important;height:var(--w-bottom)!important;z-index:40!important}
 .wedding-bottomnav a{touch-action:manipulation}
 @media(max-height:650px){body{--w-drawer:min(47dvh,300px)}}
}

/* v8: remove the empty legacy fashion submenu; give choices more working room. */
@media (max-width:767px){
  body.wedding-section-item #menuSelectBlock ul.subMenu:not(.wedding-fashion-submenu){display:none!important;}
  body{--w-drawer:min(51dvh,470px);}
  .wedding-drawer-toggle{flex-basis:43px!important;min-height:43px!important;}
  #menuSelectBlock{padding:3px 9px!important;}
  #menuSelectBlock ul.wedding-fashion-submenu{padding:2px 0!important;margin:0!important;}
  #menuSelectBlock ul.wedding-fashion-submenu li{min-height:54px!important;}
  #partsReloadArea,#selectPartsArea{padding-top:4px!important;padding-bottom:12px!important;}
  #selectPartsArea .boxTitleBlock{margin-top:0!important;}
  @media(max-height:650px){body{--w-drawer:min(49dvh,340px);}}
}

/* v9: fixed full-width preview, overlay editing bottom sheet (mobile only). */
@media (max-width:767px){
 body{--w-drawer:min(57dvh,540px);--w-preview-image-h:75vw;}
 body.wedding-drawer-collapsed{--w-drawer:44px;}
 #mixBlockCenter,body.wedding-panel-open #mixBlockCenter{
  position:fixed!important;top:var(--w-head)!important;left:0!important;right:0!important;
  bottom:var(--w-bottom)!important;height:auto!important;max-height:none!important;
  min-height:0!important;width:100%!important;margin:0!important;padding:0!important;
  z-index:22!important;overflow:hidden!important;transition:none!important;
 }
 #mixBlockCenter #mixBlock{
  position:absolute!important;top:0!important;left:50%!important;
  width:480px!important;height:360px!important;margin:0!important;
  transform:translateX(-50%) scale(var(--wedding-scale,1))!important;
  transform-origin:top center!important;pointer-events:none!important;
 }
 #mixBlockCenter #sexMenuBlock{
  position:absolute!important;top:max(0px,calc(var(--w-preview-image-h) - 46px))!important;
  bottom:auto!important;left:0!important;right:0!important;
  width:100%!important;height:43px!important;z-index:27!important;
 }
 #sexMenuBlock ul{gap:8px!important;}
 #sexMenuBlock li,#sexMenuBlock li.girl,#sexMenuBlock li.btn_on{
  height:37px!important;min-width:102px!important;padding:4px 10px!important;
  background-color:#203745!important;
 }
 #sexMenuBlock li.wedding-sex-female{background:#44303c!important;}
 #sexMenuBlock li.wedding-sex-male.btn_on{background:#246785!important;}
 #sexMenuBlock li.wedding-sex-female.btn_on{background:#884c70!important;}
 #selectArea,body.wedding-panel-open #selectArea{
  top:auto!important;bottom:var(--w-bottom)!important;height:var(--w-drawer)!important;
  max-height:none!important;min-height:0!important;z-index:36!important;
  border-radius:18px 18px 0 0!important;
  box-shadow:0 -8px 25px #0009!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important;
 }
 .wedding-drawer-toggle{flex:0 0 44px!important;min-height:44px!important;touch-action:manipulation;}
 #partsReloadArea,#selectPartsArea,#selectArea > .wallpaper_list{
  min-height:0!important;flex:1 1 auto!important;overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;
 }
 /* On smaller phones keep the category strip reachable and let only the choices scroll. */
 #menuSelectBlock{flex-shrink:0!important;}
 @media (max-height:650px){body{--w-drawer:56dvh;}}
}

/* v10: prioritize visible faces while editing; keep selector below portrait when collapsed. */
@media (max-width:767px){
 body{--w-drawer:min(46dvh,420px);--w-image-top:0px;}
 body.wedding-drawer-collapsed{--w-drawer:44px;}
 #mixBlockCenter,body.wedding-panel-open #mixBlockCenter{
   bottom:calc(var(--w-bottom) + var(--w-drawer))!important;
   padding:0!important;transition:bottom .18s ease!important;
 }
 #mixBlockCenter #mixBlock{
   top:0!important;left:50%!important;
   transform:translateX(-50%) scale(var(--wedding-scale,.7))!important;
   transform-origin:top center!important;
 }
 #mixBlockCenter #sexMenuBlock{
   top:calc(var(--w-preview-image-h, 75vw) + 7px)!important;
   bottom:auto!important;z-index:27!important;
 }
 #selectArea,body.wedding-panel-open #selectArea{height:var(--w-drawer)!important;}
 #partsReloadArea,#selectPartsArea,#selectArea > .wallpaper_list{overflow-y:auto!important;min-height:0!important;}
 @media(max-height:650px){body{--w-drawer:min(44dvh,300px)}}
}
