/* Nigao Worker: vertical avatar preview, gender gate and desktop-only SEO/footer. */
/* The editor fills the first viewport. Desktop SEO follows the app below the fold. */
@media(min-width:781px){
 html,body{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;}
 body.ac-wedding-layout{overflow-x:hidden!important;overflow-y:auto!important;}
 body.ac-wedding-layout #container{position:relative!important;height:100dvh!important;min-height:580px!important;}
 /* Both editor columns MUST remain fixed to the viewport. In the previous
    build, position:absolute collapsed their height inside #leftArea and left
    only the dark body background below the header. */
 body.ac-wedding-layout #mixArea,
 body.ac-wedding-layout #selectArea,
 body.ac-wedding-layout #selectArea2{position:fixed!important;top:64px!important;bottom:0!important;}
 body.ac-wedding-layout .ac-person-tabs{margin-top:calc(16px + (var(--ac-w-preview-scale,1) - 1)*240px)!important;}
}
/* Canvas is a portrait artboard: zoom the painting, not the viewport/position controls. */
body.ac-wedding-layout #nigao-worker-canvas-preview{
 transform:scale(1.55)!important;transform-origin:50% 26%!important;
 width:240px!important;height:480px!important;object-fit:fill!important;
}
body.ac-wedding-layout.ac-page-fashion #nigao-worker-canvas-preview,
body.ac-wedding-layout.ac-page-wallpaper #nigao-worker-canvas-preview{
 transform:none!important;
}
body.ac-wedding-layout.ac-page-item #nigao-worker-canvas-preview{transform:scale(1.12)!important;transform-origin:50% 30%!important;}
/* Fixed stage remains portrait (240x480); cropping the feet is allowed in editor. */
body.ac-wedding-layout #mixBlock_zoom,body.ac-wedding-layout #mixBlock{aspect-ratio:1/2!important;}
/* On the face screen, the controls float ABOVE the canvas without being scaled themselves. */
body.ac-wedding-layout .ng-position-controls{z-index:160!important;}
/* Gender selection belongs to the AVATAR PREVIEW, not a viewport-wide modal.
 * Keep all unrelated page regions uncovered, including the editor and footer. */
body.ac-wedding-layout #mixArea .nw-gender-gate{
 position:absolute!important;inset:0!important;left:0!important;right:0!important;
 top:0!important;bottom:0!important;z-index:260!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 width:100%!important;height:100%!important;box-sizing:border-box!important;
 padding:18px!important;margin:0!important;
 background:transparent!important;color:#fff;text-align:center;
 pointer-events:none;
}
body.ac-wedding-layout #mixArea .nw-gender-gate-inner{
 pointer-events:auto;position:relative;z-index:1;
 width:min(100%,380px);max-height:100%;box-sizing:border-box;
 padding:28px 22px;border-radius:14px;border:1px solid #515660;
 background:#252831;box-shadow:0 12px 32px rgba(0,0,0,.35);
}
/* When no gender is selected, the right-side editor is visibly unavailable,
 * but is NEVER covered by an invisible modal. */
body.ac-wedding-layout.nw-gender-unselected #selectArea,
body.ac-wedding-layout.nw-gender-unselected #selectArea2{opacity:.65;pointer-events:none;}
body.ac-wedding-layout .nw-gender-gate h2{font-size:24px;font-weight:700;margin:0 0 14px;color:#fff;}
body.ac-wedding-layout .nw-gender-gate p{font-size:14px;color:#ddd;margin:0 0 27px;}
body.ac-wedding-layout .nw-gender-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
body.ac-wedding-layout .nw-gender-choices button{border:0;border-radius:10px;padding:20px 12px;min-height:70px;cursor:pointer;font-size:18px;font-weight:750;color:#15222d;background:#85d8ec;}
body.ac-wedding-layout .nw-gender-choices button[data-gender="girl"]{background:#f1a7c9;color:#382234;}
body.ac-wedding-layout.nw-gender-unselected .ac-person-tabs button[aria-pressed="true"]{background:#303139!important;border-color:#555!important;}
.nw-desktop-bottom{background:#f8f9fb;color:#27303a;font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;}
.nw-editor-ad-shell{max-width:1020px;margin:0 auto;padding:36px 24px 8px;}
.nw-ad-caption{font-size:11px;color:#7c8590;text-align:center;margin:0 0 8px;}
#nw-editor-ad-slot{min-height:110px;max-width:1020px;overflow:hidden;}
#nw-editor-ad-slot>.adsbygoogle{display:block;width:100%;}
.nw-business-information{max-width:990px;margin:0 auto;padding:26px 24px 90px;line-height:1.92;font-size:14px;color:#34404b;}
.nw-business-information h2{font-size:24px;line-height:1.5;margin:0 0 20px;font-weight:750;color:#1e2630;}
.nw-business-information h3{font-size:17px;line-height:1.5;margin:26px 0 12px;color:#222;}
.nw-business-information p{margin:0 0 15px;}
.nw-business-information a{color:#155ca4;text-decoration:underline;}
@media(max-width:780px){
 .nw-desktop-bottom{display:none!important;}
 body.ac-wedding-layout #mixArea .nw-gender-gate{inset:0!important;padding:12px!important;}
 body.ac-wedding-layout #mixArea .nw-gender-gate-inner{padding:20px 16px!important;}
 body.ac-wedding-layout .nw-gender-gate h2{font-size:20px;}
 body.ac-wedding-layout .nw-gender-choices button{min-height:56px;font-size:16px;}
 /* Mobile preview is still portrait, and all extra height is reserved for the scroller. */
 body.ac-renewal #mixBlock_zoom,body.ac-renewal #mixBlock{
  margin-bottom:calc((var(--ac-scale,.67) - 1)*480px)!important;
 }
}

/* 2026-11-05 v3: compact position icons, grounded preview and reachable footer. */
/* Keep the first-use selection in the same button row as normal switching. */
body.ac-wedding-layout #start_sexBlock{display:none!important;}
body.ac-wedding-layout .nw-gender-prompt{font-size:12px;color:#d3d6dd;line-height:1.4;margin:10px auto 0;padding:0;text-align:center;order:1;}
/* Compressed overlay; icons replace labels, but each arrow retains an aria-label. */
body.ac-wedding-layout #mixBlock_zoom>.ng-position-controls,
body.ac-wedding-layout #mixBlock>.ng-position-controls{left:5px!important;right:5px!important;bottom:5px!important;padding:4px 5px!important;gap:2px!important;border-radius:7px!important;}
body.ac-wedding-layout .ng-position-heading{font-size:10px!important;min-height:0!important;line-height:1.1!important;gap:5px!important;}
body.ac-wedding-layout .ng-position-reset{font-size:10px!important;padding:3px 5px!important;min-height:19px!important;border-radius:4px!important;}
body.ac-wedding-layout .ng-position-grid{gap:3px!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;}
body.ac-wedding-layout .ng-position-pair{padding:2px 2px!important;gap:1px!important;min-width:0!important;border-radius:4px!important;}
body.ac-wedding-layout #mixBlock_zoom .ng-position-pair button,
body.ac-wedding-layout #mixBlock .ng-position-pair button{height:22px!important;min-height:22px!important;font-size:16px!important;line-height:1!important;padding:0!important;border-radius:4px!important;}
body.ac-wedding-layout .ng-position-name{display:flex!important;align-items:center!important;justify-content:center!important;min-height:19px!important;line-height:1!important;order:0!important;}
body.ac-wedding-layout .ng-position-name img{display:block!important;width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important;object-fit:contain!important;}
@media(min-width:781px){
  /* The two panels are *absolute inside a sized #contents*, not fixed; this
     preserves the editing viewport while allowing the page/footer to scroll. */
  body.ac-wedding-layout #container{position:relative!important;height:100dvh!important;min-height:540px!important;overflow:visible!important;}
  body.ac-wedding-layout #contents{position:relative!important;height:100dvh!important;min-height:540px!important;overflow:visible!important;padding:0!important;}
  body.ac-wedding-layout #contents>#leftArea,body.ac-wedding-layout #contents>#leftArea2{position:static!important;height:100%!important;min-height:0!important;}
  body.ac-wedding-layout #mixArea{position:absolute!important;top:64px!important;left:0!important;right:auto!important;bottom:0!important;height:auto!important;min-height:0!important;box-sizing:border-box!important;justify-content:flex-start!important;padding:12px 16px 12px!important;}
  body.ac-wedding-layout #selectArea,body.ac-wedding-layout #selectArea2{position:absolute!important;top:64px!important;bottom:0!important;height:auto!important;min-height:0!important;overscroll-behavior-y:auto!important;}
  body.ac-wedding-layout #mixBlock_zoom,body.ac-wedding-layout #mixBlock{transform-origin:top center!important;flex-shrink:0!important;}
  /* CSS transforms do not reserve layout height. The following margin is
     exactly the difference between the scaled and original 480px artboard. */
  body.ac-wedding-layout .ac-person-tabs{margin:calc(12px + (var(--ac-w-preview-scale,1) - 1)*480px) auto 0!important;flex-shrink:0!important;}
  body.ac-wedding-layout .ac-person-tabs button{min-height:36px!important;padding:7px 25px!important;}
  body.ac-wedding-layout .nw-gender-prompt{margin-top:calc(10px + (var(--ac-w-preview-scale,1) - 1)*480px)!important;}
  body.ac-wedding-layout.nw-gender-unselected .ac-person-tabs{margin-top:7px!important;}
  .nw-desktop-bottom{display:block!important;position:relative!important;z-index:40!important;clear:both!important;min-height:240px!important;}
  .nw-editor-ad-shell{padding-top:30px!important;}
  #nw-editor-ad-slot{min-height:120px!important;}
}
@media(max-width:780px){
  body.ac-wedding-layout .nw-gender-prompt{font-size:11px;margin:4px auto 0!important;}
  body.ac-wedding-layout.nw-gender-unselected .ac-person-tabs{margin-top:3px!important;}
  body.ac-wedding-layout .ng-position-heading{font-size:9px!important;}
  body.ac-wedding-layout .ng-position-name img{width:16px!important;height:16px!important;}
  body.ac-wedding-layout #mixBlock_zoom .ng-position-pair button,
  body.ac-wedding-layout #mixBlock .ng-position-pair button{height:22px!important;min-height:22px!important;font-size:16px!important;}
  .nw-desktop-bottom{display:none!important;}
}