/* HIMART / REUSE 04.1 — paired prototype carousel.
   One page shows two mockups. Desktop geometry is based on the full right-content width:
   32.5% mockup + 10% gap + 32.5% mockup = 75% occupied width. */

/* Keep the chapter title synchronized with the first right-side block. */
@media (min-width:1600px){
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page).hm-wide-editorial #direction .hm-section-head.hm-reveal:not(.is-visible){
    opacity:1!important;
    transform:none!important;
  }
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-list{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin-top:86px!important;
  padding:0!important;
  overflow:visible!important;
  outline:0!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-viewport{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-track{
  display:flex!important;
  width:100%!important;
  align-items:flex-start!important;
  transform:translate3d(0,0,0);
  transition:transform 720ms cubic-bezier(.22,.76,.22,1)!important;
  will-change:transform;
}
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-track.is-instant{
  transition:none!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case{
  display:grid!important;
  grid-template-columns:repeat(2,calc((85% - 32px)/2))!important;
  column-gap:32px!important;
  row-gap:0!important;
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  align-items:start!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-item{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .galaxy-ultra-mockup{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:1440/2964!important;
  margin:0!important;
  padding:7px!important;
  border:1px solid rgba(255,255,255,.42)!important;
  border-radius:34px!important;
  background:#0D0D0D!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;
  box-sizing:border-box!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .galaxy-ultra-mockup::before{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  left:50%!important;
  top:12px!important;
  width:8px!important;
  height:8px!important;
  border:1px solid rgba(255,255,255,.48)!important;
  border-radius:50%!important;
  background:#000!important;
  transform:translateX(-50%)!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .galaxy-ultra-mockup::after{
  content:""!important;
  position:absolute!important;
  right:-3px!important;
  top:112px!important;
  width:2px!important;
  height:72px!important;
  border-radius:2px!important;
  background:rgba(255,255,255,.56)!important;
  box-shadow:0 88px 0 rgba(255,255,255,.40)!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .galaxy-ultra-screen{
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:28px!important;
  background:#0D0D0D!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .galaxy-ultra-screen.is-scrollable{
  overflow:hidden!important;
  overscroll-behavior-x:none!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y pinch-zoom!important;
  -webkit-overflow-scrolling:auto;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .galaxy-ultra-screen.is-scrollable::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .galaxy-ultra-screen.is-scrollable img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}

/* Each text block belongs to the mockup directly above it. */
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-copy{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:24px 0 0!important;
  padding:0!important;
  text-align:left!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}



html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-copy h3{
  margin:0 0 12px!important;
  max-width:100%!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:22px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.3!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
  text-align:left!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-copy p{
  display:-webkit-box!important;
  margin:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  color:rgba(255,255,255,.50)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.5!important;
  letter-spacing:var(--hm-track-body)!important;
  word-break:keep-all!important;
  text-align:left!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  line-clamp:2!important;
}

/* Footer aligns to the exact occupied 85% mockup width. */
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  width:85%!important;
  margin:32px 0 0!important;
  padding:0!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-pagination{
  display:block!important;
  margin:0!important;
  color:rgba(255,255,255,.60)!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:var(--hm-track-note)!important;
  font-variant-numeric:tabular-nums!important;
}

html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-control{
  position:absolute!important;
  z-index:12!important;
  top:0!important;
  bottom:0!important;
  display:grid!important;
  place-items:center!important;
  width:16.6666667%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(0,0,0,.60)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  cursor:pointer!important;
  transform:none!important;
  transition:opacity 180ms ease,visibility 180ms ease!important;
}
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-control--prev{
  left:0!important;
  right:auto!important;
}
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-control--next{
  right:0!important;
  left:auto!important;
}
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-list:hover .prototype-case-control,
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-list:focus-within .prototype-case-control{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-control::before{
  content:""!important;
  display:block!important;
  width:17px!important;
  height:17px!important;
  box-sizing:border-box!important;
  border-top:1px solid currentColor!important;
  border-right:1px solid currentColor!important;
  transform-origin:center!important;
}
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-control--prev::before{
  transform:translateX(2px) rotate(-135deg)!important;
}
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-control--next::before{
  transform:translateX(-2px) rotate(45deg)!important;
}
html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-control:focus-visible{
  outline:0!important;
  outline-offset:0!important;
  opacity:1!important;
  visibility:visible!important;
}


@media(max-width:1000px){
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case{
    grid-template-columns:repeat(2,calc((95% - 32px)/2))!important;
    column-gap:32px!important;
  }
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-footer{
    width:95%!important;
  }
}

@media(max-width:780px){
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-control{
    width:16.6666667%!important;
    height:100%!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-list{
    margin-top:54px!important;
  }
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case{
    grid-template-columns:repeat(2,calc((100% - 32px)/2))!important;
    column-gap:32px!important;
  }
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-footer{
    width:100%!important;
    margin-top:24px!important;
  }

  /* Mobile device shell: reduce the exaggerated phone rounding while keeping
     the inner display slightly tighter than the exterior frame. */
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .galaxy-ultra-mockup{
    padding:4px!important;
    border-radius:12px!important;
  }
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .galaxy-ultra-screen{
    border-radius:10px!important;
  }

  /* Mobile copy follows the canonical 14 / 18 hierarchy instead of desktop 16 / 22. */
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-copy{
    margin-top:24px!important;
  }
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-copy h3{
    font-size:var(--hm-type-group-mobile,18px)!important;
    line-height:1.32!important;
  }
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-copy p{
    font-size:var(--hm-type-body-mobile,14px)!important;
    line-height:1.55!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body.himart-page-body:is(.reuse-current,.himart-commerce-page) #direction .prototype-case-track{
    transition:none!important;
  }
}

/* REUSE 04.1 compact rhythm parity with HIMART 04.1 / 04.2.
   Runtime replaces .phone-gallery with .prototype-case-list, so zero the
   shared carousel margin here as final authority. */
html body.himart-page-body.reuse-current #direction .prototype-case-list{
  margin:60px 0 0!important;
  padding:0!important;
}
html body.himart-page-body.reuse-current #direction .prototype-case-viewport,
html body.himart-page-body.reuse-current #direction .prototype-case-track{
  margin:0!important;
  padding:0!important;
}


/* REUSE 04.1 — align paired mockups to the two strategy-card left rails. */
@media(min-width:781px){
  /*
    The strategy cards directly above use two equal columns with a 20px gap.
    Keep the existing prototype device width, but move each prototype item's left edge
    onto the corresponding 01 / 02 card rail. Copy remains inside each item, so its
    left edge follows the same rail automatically.
  */
  html body.himart-page-body.reuse-current #direction .prototype-case{
    grid-template-columns:
      calc((85% - 32px) / 2)
      calc((85% - 32px) / 2)!important;
    column-gap:calc(7.5% + 26px)!important;
    justify-content:start!important;
  }
  html body.himart-page-body.reuse-current #direction .prototype-case-item{
    width:100%!important;
    justify-self:start!important;
  }
  html body.himart-page-body.reuse-current #direction .prototype-case-copy{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }
}