/* HIMART chapter 04 implementation layer.
   04.1 owns the in-progress prototype story; 04.2 reuses the same paired mockup
   gallery exterior; 04.3 closes the chapter with the shared decision/change story. */

html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042,.himart-direction-043){
  width:100%!important;
  min-width:0!important;
  /* Chapter 04 compact rhythm: halve the inherited structural spacing.
     Shared defaults are 40px subsection top padding and 80px title→content. */
  padding-top:20px!important;
}
html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042) > .hm-subhead + .ax-friction-grid{
  margin-top:40px!important;
}

/* 04.1 / AX 01.2 card grammar copied into Himart commerce.
   The card structure and typography values are intentionally identical; only the copy differs. */
html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042,.himart-direction-043) .hm-subtitle > .wide-title-index{
  display:none!important;
}
html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042,.himart-direction-043) .ax-friction-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  width:100%;
}
html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042,.himart-direction-043) .ax-friction-card{
  min-height:130px;
  padding:12px 0 0;
  border-top:1px solid var(--hm-line-content-divider,var(--hm-line-weak));
}
html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042,.himart-direction-043) .ax-friction-card>span{
  display:block;
  color:var(--hm-blue);
  font:400 12px/1.2 var(--hm-font-en);
  letter-spacing:var(--hm-track-note);
}
html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042,.himart-direction-043) .ax-friction-card h4{
  margin:18px 0 0;
  color:var(--hm-blue);
  font:300 28px/1.28 var(--hm-font-ko);
  font-variation-settings:"wght" 300;
  letter-spacing:var(--hm-track-group);
  word-break:keep-all;
}
html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042,.himart-direction-043) .ax-friction-card h4>span,
html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042,.himart-direction-043) .ax-friction-card p>span{
  display:block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
}
html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042,.himart-direction-043) .ax-friction-card p{
  margin:12px 0 0;
  max-width:none;
  color:var(--hm-description-color);
  font:300 16px/1.55 var(--hm-font-ko);
  letter-spacing:var(--hm-track-body);
  word-break:keep-all;
}

/* 04.3 — decision/change close.
   Keep the shared two-column card grammar, but restore the canonical 40px
   card-to-card rhythm. The subsection title owns the copy; cards stay headline-only. */
html body.himart-commerce-page #direction .himart-direction-043 > .hm-subhead + .himart-direction-decision{
  margin-top:40px!important;
}
html body.himart-commerce-page #direction .himart-direction-043 .himart-direction-decision__grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px!important;
  margin-top:0!important;
}

/* Both 04.1 and 04.2 use the same Reuse 04.1 paired mockup carousel exterior.
   Keep a deliberate 40px gap between the strategy text/cards and the mockup.
   Remove inherited viewport/track spacing so no second gap is added. */
html body.himart-page-body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list{
  margin:52px 0 0!important;
  padding:0!important;
}
/* Keep the requested 36px separation from each mockup bottom to its title. */
html body.himart-page-body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042) .prototype-case-copy{
  margin-top:36px!important;
}
html body.himart-page-body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list .prototype-case-viewport,
html body.himart-page-body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list .prototype-case-track{
  margin:0!important;
  padding:0!important;
}

/* 04.1 confidentiality overlay only.
   Use a 75% black veil over the uploaded screens.
   RESTRICTED and the Korean explanation are white for contrast.
   04.2 must show its uploaded screens without any veil. */
html body.himart-page-body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042) .galaxy-ultra-screen{
  position:relative!important;
}
html body.himart-page-body.himart-commerce-page #direction .himart-direction-041 .galaxy-ultra-screen::before{
  content:"RESTRICTED"!important;
  position:absolute!important;
  z-index:4!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  padding:0 24px 74px!important;
  background:rgba(0,0,0,.75)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-family:var(--hm-font-en,"Averta PE",Arial,sans-serif)!important;
  font-size:18px!important;
  font-weight:600!important;
  font-variation-settings:"wght" 600!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-align:center!important;
  pointer-events:none!important;
}
html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .galaxy-ultra-screen::before,
html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .galaxy-ultra-screen::after{
  content:none!important;
  display:none!important;
  background:transparent!important;
  opacity:0!important;
}
html body.himart-page-body.himart-commerce-page #direction .himart-direction-041 .galaxy-ultra-screen::after{
  content:"현재 진행 중인 프로젝트라\A공개가 어려운 점 양해 부탁드립니다."!important;
  position:absolute!important;
  z-index:5!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  padding:58px 24px 0!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-family:Pretendard,var(--hm-font-ko),sans-serif!important;
  font-size:22px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.42!important;
  letter-spacing:var(--hm-track-group)!important;
  text-align:center!important;
  white-space:pre!important;
  word-break:keep-all!important;
  pointer-events:none!important;
}

/* 04.2 is shell-only until its final screens are uploaded. */
html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .galaxy-ultra-screen{
  background:#0D0D0D!important;
}
html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .prototype-case-copy{
  display:none!important;
}

/* HIMART 04.2 — fixed-height paired mockups.
   Use the shared phone-shell ratio as one canonical height instead of letting
   each uploaded image determine device height. Long images stay top-aligned,
   never scroll inside the device, and are clipped only at the bottom. */
html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .prototype-case-viewport{
  padding:0!important;
  box-sizing:border-box!important;
}
html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .galaxy-ultra-mockup{
  height:auto!important;
  aspect-ratio:1440/2964!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;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .galaxy-ultra-screen,
html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .galaxy-ultra-screen.is-scrollable{
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:auto!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:28px!important;
  box-sizing:border-box!important;
}
html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .galaxy-ultra-screen.is-scrollable img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  aspect-ratio:auto!important;
  object-fit:initial!important;
  object-position:top center!important;
  transform:none!important;
}
@media(max-width:780px){
  html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .galaxy-ultra-mockup{
    padding:4px!important;
    border-radius:12px!important;
  }
  html body.himart-page-body.himart-commerce-page #direction .himart-direction-042 .galaxy-ultra-screen{
    border-radius:10px!important;
  }

  /* Confidentiality overlay must remain fully contained inside each half-width
     mobile mockup. Keep authored line breaks but scale copy to the device. */
  html body.himart-page-body.himart-commerce-page #direction .himart-direction-041 .galaxy-ultra-screen::before{
    padding:0 8px 42px!important;
    font-size:12px!important;
    line-height:1.15!important;
  }
  html body.himart-page-body.himart-commerce-page #direction .himart-direction-041 .galaxy-ultra-screen::after{
    padding:34px 8px 0!important;
    font-size:11px!important;
    line-height:1.45!important;
    white-space:pre-line!important;
    overflow-wrap:break-word!important;
  }
}

/* 04.1 / 04.2 paired mockup geometry.
   The strategy cards above are two equal columns with a 20px gap.
   Keep each mockup's LEFT edge on the matching 01 / 02 card rail.
   Copy remains inside each mockup item, so it follows the same rail.
   Pagination ends exactly on the RIGHT edge of the second mockup. */
@media(min-width:1001px){
  html body.himart-page-body.himart-commerce-page #live-main #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list .prototype-case{
    grid-template-columns:repeat(2,calc((85% - 32px)/2))!important;
    column-gap:calc(7.5% + 26px)!important;
    justify-content:start!important;
  }
  html body.himart-page-body.himart-commerce-page #live-main #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list .prototype-case-item{
    width:100%!important;
    justify-self:start!important;
  }
  html body.himart-page-body.himart-commerce-page #live-main #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list .prototype-case-copy{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }
  html body.himart-page-body.himart-commerce-page #live-main #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list .prototype-case-footer{
    width:calc(92.5% - 6px)!important;
    justify-content:flex-end!important;
    text-align:right!important;
  }
}

@media(min-width:781px) and (max-width:1000px){
  html body.himart-page-body.himart-commerce-page #live-main #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list .prototype-case{
    grid-template-columns:repeat(2,calc((95% - 32px)/2))!important;
    column-gap:calc(2.5% + 26px)!important;
    justify-content:start!important;
  }
  html body.himart-page-body.himart-commerce-page #live-main #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list .prototype-case-item{
    width:100%!important;
    justify-self:start!important;
  }
  html body.himart-page-body.himart-commerce-page #live-main #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list .prototype-case-copy{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }
  html body.himart-page-body.himart-commerce-page #live-main #direction :is(.himart-direction-041,.himart-direction-042) > .prototype-case-list .prototype-case-footer{
    width:calc(97.5% - 6px)!important;
    justify-content:flex-end!important;
    text-align:right!important;
  }
}

/* Keep the two new subsections inside the same wide right rail used by chapters 01–03. */
@media(min-width:1600px){
  html body.hm-wide-editorial.hm-wide-himart-adapter #live-main > #direction.hm-section .hm-wide-right-rail > :is(.himart-direction-041,.himart-direction-042,.himart-direction-043){
    grid-column:auto!important;
    width:100%!important;
  }
}

@media(max-width:780px){
  html body.himart-commerce-page #direction :is(.himart-direction-041,.himart-direction-042,.himart-direction-043) .ax-friction-grid{
    grid-template-columns:1fr!important;
  }
}