/* HIMART AX v2 — 02 evidence refinements based on supplied working guides. */

/* 02.1 — normalize title modules to the category-pattern height and clarify design/module ownership. */
html body.himart-ax-page .ax-pattern-system{
  position:relative;
  row-gap:22px!important;
}
html body.himart-ax-page .ax-pattern-figure{
  grid-row:1;
}
html body.himart-ax-page .ax-pattern-block.is-title,
html body.himart-ax-page .ax-pattern-figure.is-display .ax-pattern-block.is-title,
html body.himart-ax-page .ax-pattern-figure.is-category .ax-pattern-block.is-title{
  flex:0 0 18%!important;
  border-color:var(--hm-blue)!important;
  background:var(--hm-blue)!important;
  color:#fff!important;
}
html body.himart-ax-page .ax-pattern-block.is-content{
  flex:0 0 20%!important;
  border-color:var(--hm-blue)!important;
  background:var(--hm-blue)!important;
  color:#fff!important;
}
html body.himart-ax-page .ax-pattern-legend{
  grid-column:1 / -1;
  grid-row:2;
  display:flex;
  align-items:flex-start;
  gap:32px;
  margin-top:2px;
}
html body.himart-ax-page .ax-pattern-legend span{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.72);
  font-family:var(--hm-font-ko);
  font-size:12px;
  font-weight:300;
  line-height:1.3;
  letter-spacing:var(--hm-track-body);
}
html body.himart-ax-page .ax-pattern-legend i{
  display:block;
  width:34px;
  height:2px;
  flex:0 0 34px;
  background:#fff;
}
html body.himart-ax-page .ax-pattern-legend .is-design i{background:var(--hm-blue)}

/* 02.2 — use the supplied guide captures themselves rather than reconstructing them. */
html body.himart-ax-page .ax-banner-reference-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-rows:auto auto auto;
  gap:18px 20px;
  width:100%;
  align-items:start;
}
html body.himart-ax-page .ax-banner-reference{
  min-width:0;
  margin:0;
}
html body.himart-ax-page .ax-banner-reference.is-hero{
  grid-row:1 / span 3;
}
html body.himart-ax-page .ax-banner-reference figcaption{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0 0 10px;
  color:#fff;
}
html body.himart-ax-page .ax-banner-reference figcaption span{
  color:var(--hm-blue);
  font:400 11px/1.2 var(--hm-font-en);
  letter-spacing:var(--hm-track-note);
}
html body.himart-ax-page .ax-banner-reference figcaption strong{
  font-family:var(--hm-font-ko);
  font-size:16px;
  font-weight:300;
  line-height:1.3;
  letter-spacing:var(--hm-track-body);
}
html body.himart-ax-page .ax-banner-reference img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#fff;
}

/* 02.3 — equal-height visual frames and realistic field/output copy. */
html body.himart-ax-page .ax-composition-flow{
  align-items:stretch;
}
html body.himart-ax-page .ax-composition-step{
  display:flex;
  flex-direction:column;
}
html body.himart-ax-page .ax-composition-visual{
  width:100%;
  height:280px!important;
  min-height:280px!important;
  margin-top:28px;
  flex:0 0 280px;
}
html body.himart-ax-page .ax-upload-visual{
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
  gap:14px!important;
  padding:18px!important;
}
html body.himart-ax-page .ax-upload-fields{
  display:grid!important;
  align-content:center!important;
  gap:10px!important;
}
html body.himart-ax-page .ax-upload-field{
  display:block;
  min-height:52px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.70);
  font-style:normal;
}
html body.himart-ax-page .ax-upload-field span{
  display:block;
  color:rgba(255,255,255,.42);
  font:300 10px/1.2 var(--hm-font-ko);
  letter-spacing:var(--hm-track-body);
}
html body.himart-ax-page .ax-upload-field strong{
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:#fff;
  font:300 12px/1.25 var(--hm-font-ko);
  letter-spacing:var(--hm-track-body);
  white-space:nowrap;
  text-overflow:ellipsis;
}
html body.himart-ax-page .ax-upload-image{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--hm-blue)!important;
  background:rgba(0,166,237,.10)!important;
  color:var(--hm-blue);
}
html body.himart-ax-page .ax-upload-image span{
  font:400 10px/1 var(--hm-font-en);
  letter-spacing:var(--hm-track-note);
}
html body.himart-ax-page .ax-upload-image strong{
  color:#fff;
  font:300 12px/1.3 var(--hm-font-ko);
}
html body.himart-ax-page .ax-assemble-visual{
  grid-template-columns:58% 42%!important;
}
html body.himart-ax-page .ax-assemble-copy{
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  gap:0!important;
  padding:20px!important;
}
html body.himart-ax-page .ax-assemble-copy span{
  color:rgba(255,255,255,.55);
  font:300 11px/1.3 var(--hm-font-ko);
  letter-spacing:var(--hm-track-body);
}
html body.himart-ax-page .ax-assemble-copy strong{
  display:block;
  margin-top:8px;
  color:#fff;
  font:300 18px/1.3 var(--hm-font-ko);
  letter-spacing:var(--hm-track-group);
  word-break:keep-all;
}
html body.himart-ax-page .ax-assemble-copy p{
  margin:8px 0 0;
  color:rgba(255,255,255,.72);
  font:300 11px/1.4 var(--hm-font-ko);
  letter-spacing:var(--hm-track-body);
}
html body.himart-ax-page .ax-assemble-copy em{
  margin-top:22px;
  color:var(--hm-blue);
  font:300 11px/1.2 var(--hm-font-ko);
  font-style:normal;
  letter-spacing:var(--hm-track-body);
}
html body.himart-ax-page .ax-assemble-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid var(--hm-blue)!important;
  background:rgba(0,166,237,.10)!important;
}
html body.himart-ax-page .ax-assemble-image span{
  color:var(--hm-blue);
  font:400 10px/1 var(--hm-font-en);
  letter-spacing:var(--hm-track-note);
}

@media(max-width:1180px){
  html body.himart-ax-page .ax-banner-reference-grid{grid-template-columns:1fr}
  html body.himart-ax-page .ax-banner-reference.is-hero{grid-row:auto}
}
@media(max-width:780px){
  html body.himart-ax-page .ax-pattern-legend{gap:20px;flex-wrap:wrap}
  html body.himart-ax-page .ax-composition-visual{height:240px!important;min-height:240px!important;flex-basis:240px}
}