/* HIMART AX v3 — 02 pattern/reference refinements + 03 interview/operating modules. */

/* 02.1 — secondary parenthetical copy and module line opacity. */
html body.himart-ax-page .ax-pattern-block .ax-paren{
  opacity:.50;
}
html body.himart-ax-page .ax-pattern-block:not(.is-blue){
  border-color:rgba(255,255,255,.60)!important;
}

/* 02.2 — supplied guides: one tall reference on the left, three equal rows on the right.
   Captions live below the images; 01 and 04 finish on the same baseline. */
html body.himart-ax-page .ax-banner-reference-grid{
  --ax-banner-row:210px;
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
  grid-template-rows:repeat(3,var(--ax-banner-row))!important;
  gap:18px 20px!important;
  width:100%!important;
  min-height:0!important;
  align-items:stretch!important;
}
html body.himart-ax-page .ax-banner-reference{
  display:flex!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  margin:0!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
html body.himart-ax-page .ax-banner-reference.is-hero{
  grid-row:1 / span 3!important;
  align-self:stretch!important;
}
html body.himart-ax-page .ax-banner-reference img{
  order:1!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-height:0!important;
  height:auto!important;
  flex:1 1 0!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
html body.himart-ax-page .ax-banner-reference figcaption{
  order:2!important;
  display:flex!important;
  align-items:baseline!important;
  gap:10px!important;
  margin:10px 0 0!important;
  min-height:21px!important;
  height:21px!important;
  flex:0 0 21px!important;
  color:#fff!important;
}
html body.himart-ax-page .ax-banner-reference figcaption span{
  color:var(--hm-blue)!important;
  font:400 11px/1.2 var(--hm-font-en)!important;
  letter-spacing:var(--hm-track-note)!important;
}
html body.himart-ax-page .ax-banner-reference figcaption strong{
  font-family:var(--hm-font-ko)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.3!important;
  letter-spacing:var(--hm-track-body)!important;
}

/* 02.3 — force the three diagrams to a common geometry and keep realistic content visible. */
html body.himart-ax-page .ax-composition-flow{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
  width:100%!important;
  align-items:stretch!important;
}
html body.himart-ax-page .ax-composition-step{
  display:grid!important;
  grid-template-rows:auto 58px 300px!important;
  min-width:0!important;
  padding-top:20px!important;
  border-top:1px solid rgba(255,255,255,.30)!important;
}
html body.himart-ax-page .ax-composition-step>span{
  align-self:start!important;
}
html body.himart-ax-page .ax-composition-step h4{
  align-self:start!important;
  min-height:58px!important;
  margin:18px 0 0!important;
}
html body.himart-ax-page .ax-composition-visual{
  width:100%!important;
  height:300px!important;
  min-height:300px!important;
  margin-top:28px!important;
  align-self:start!important;
  box-sizing:border-box!important;
  border:1px solid rgba(255,255,255,.70)!important;
  background:#000!important;
  overflow:hidden!important;
}
html body.himart-ax-page .ax-select-visual{
  display:grid!important;
  grid-template-columns:repeat(5,1fr)!important;
  gap:6px!important;
  padding:14px!important;
}
html body.himart-ax-page .ax-select-visual i{
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  gap:4px!important;
}
html body.himart-ax-page .ax-select-visual i::before{
  content:""!important;
  height:20%!important;
  border:1px solid var(--hm-blue)!important;
  background:var(--hm-blue)!important;
}
html body.himart-ax-page .ax-select-visual i::after{
  content:""!important;
  flex:1 1 auto!important;
  border:1px solid rgba(255,255,255,.60)!important;
}
html body.himart-ax-page .ax-upload-visual{
  display:grid!important;
  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!important;
  min-height:52px!important;
  padding:9px 10px!important;
  border:1px solid rgba(255,255,255,.60)!important;
  font-style:normal!important;
}
html body.himart-ax-page .ax-upload-field span{
  display:block!important;
  color:rgba(255,255,255,.42)!important;
  font:300 10px/1.2 var(--hm-font-ko)!important;
  letter-spacing:var(--hm-track-body)!important;
}
html body.himart-ax-page .ax-upload-field strong{
  display:block!important;
  margin-top:5px!important;
  overflow:hidden!important;
  color:#fff!important;
  font:300 12px/1.25 var(--hm-font-ko)!important;
  letter-spacing:var(--hm-track-body)!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
html body.himart-ax-page .ax-upload-image{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid var(--hm-blue)!important;
  background:rgba(0,166,237,.10)!important;
  color:var(--hm-blue)!important;
}
html body.himart-ax-page .ax-upload-image span{
  font:400 10px/1 var(--hm-font-en)!important;
  letter-spacing:var(--hm-track-note)!important;
}
html body.himart-ax-page .ax-upload-image strong{
  color:#fff!important;
  font:300 12px/1.3 var(--hm-font-ko)!important;
}
html body.himart-ax-page .ax-assemble-visual{
  display:grid!important;
  grid-template-columns:58% 42%!important;
}
html body.himart-ax-page .ax-assemble-copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:0!important;
  padding:20px!important;
}
html body.himart-ax-page .ax-assemble-copy span{
  color:rgba(255,255,255,.55)!important;
  font:300 11px/1.3 var(--hm-font-ko)!important;
  letter-spacing:var(--hm-track-body)!important;
}
html body.himart-ax-page .ax-assemble-copy strong{
  display:block!important;
  margin-top:8px!important;
  color:#fff!important;
  font:300 18px/1.3 var(--hm-font-ko)!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
}
html body.himart-ax-page .ax-assemble-copy p{
  margin:8px 0 0!important;
  color:rgba(255,255,255,.72)!important;
  font:300 11px/1.4 var(--hm-font-ko)!important;
  letter-spacing:var(--hm-track-body)!important;
}
html body.himart-ax-page .ax-assemble-copy em{
  margin-top:22px!important;
  color:var(--hm-blue)!important;
  font:300 11px/1.2 var(--hm-font-ko)!important;
  font-style:normal!important;
  letter-spacing:var(--hm-track-body)!important;
}
html body.himart-ax-page .ax-assemble-image{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  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)!important;
  font:400 10px/1 var(--hm-font-en)!important;
  letter-spacing:var(--hm-track-note)!important;
}

/* 03.2 — same interview card grammar as HIMART WAYS 01.2. */
html body.himart-ax-page #journey .ways-quote-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:28px!important;
  width:100%!important;
}
html body.himart-ax-page #journey .ways-quote-grid article{
  min-width:0!important;
  padding:24px 0 28px!important;
  border-top:1px solid var(--hm-line-default)!important;
}
html body.himart-ax-page #journey .ways-quote-grid strong{
  display:block!important;
  max-width:30ch!important;
  margin:0!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:24px!important;
  font-weight:100!important;
  font-variation-settings:"wght" 100!important;
  line-height:1.36!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
}
html body.himart-ax-page #journey .ways-quote-grid article:first-child strong{
  color:var(--hm-blue)!important;
}
html body.himart-ax-page #journey .ways-quote-grid span{
  display:block!important;
  margin-top:34px!important;
  color:var(--hm-text-tertiary)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:12px!important;
  font-weight:300!important;
  line-height:1.2!important;
  letter-spacing:var(--hm-track-body)!important;
}

/* 03.3 — exact WAYS 03.2 square-card visual grammar, adapted to AX copy/icons. */
html body.himart-ax-page #journey .ways-operating-stack{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  margin-left:0!important;
  padding-left:0!important;
}
html body.himart-ax-page #journey .ways-operating-stack>article{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  margin:0!important;
  padding:24px 0!important;
  box-sizing:border-box!important;
  border-top:1px solid rgba(255,255,255,.30)!important;
  background:transparent!important;
  overflow:hidden!important;
}
html body.himart-ax-page #journey .ways-operating-stack>article>span{
  display:block!important;
  margin:0!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:var(--hm-track-note)!important;
}
html body.himart-ax-page #journey .ways-operating-stack>article h4{
  margin:18px 0 0!important;
  width:100%!important;
  max-width:none!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:28px!important;
  font-weight:100!important;
  font-variation-settings:"wght" 100!important;
  line-height:1.24!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
}
html body.himart-ax-page #journey .ways-operating-stack>article p{
  margin:12px 0 0!important;
  max-width:24ch!important;
  color:var(--hm-description-color)!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;
}
html body.himart-ax-page #journey .ways-operating-stack .ways-operating-icon{
  position:absolute!important;
  right:20px!important;
  bottom:22px!important;
  width:39.66px!important;
  height:39.66px!important;
  color:var(--hm-blue)!important;
  opacity:1!important;
  pointer-events:none!important;
}
html body.himart-ax-page #journey .ways-operating-stack .ways-operating-icon *{
  vector-effect:non-scaling-stroke;
}

/* Requested icon redraws without changing the shared 48x48 line-icon style. */
html body.himart-ax-page #journey .ways-operating-stack>article:nth-child(2) .ways-operating-icon *,
html body.himart-ax-page #journey .ways-operating-stack>article:nth-child(3) .ways-operating-icon *,
html body.himart-ax-page #journey .ways-operating-stack>article:nth-child(4) .ways-operating-icon *,
html body.himart-ax-page #journey .ways-operating-stack>article:nth-child(6) .ways-operating-icon *{
  display:none!important;
}
html body.himart-ax-page #journey .ways-operating-stack>article:nth-child(2) .ways-operating-icon{
  background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300A6ED' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='8' y='8' width='28' height='28'/%3E%3Crect x='14' y='14' width='28' height='28'/%3E%3C/svg%3E")!important;
}
html body.himart-ax-page #journey .ways-operating-stack>article:nth-child(3) .ways-operating-icon{
  background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300A6ED' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8 10H40M34 5L40 10L34 15M8 22H32M8 31H26M8 40H20'/%3E%3C/svg%3E")!important;
}
html body.himart-ax-page #journey .ways-operating-stack>article:nth-child(4) .ways-operating-icon{
  background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300A6ED' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M9 23L24 8L39 23M24 8V31'/%3E%3C/svg%3E")!important;
}
html body.himart-ax-page #journey .ways-operating-stack>article:nth-child(6) .ways-operating-icon{
  background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300A6ED' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M6 8V40M42 8V40M12 24H36M19 16L11 24L19 32M29 16L37 24L29 32'/%3E%3C/svg%3E")!important;
}

@media(max-width:1180px){
  html body.himart-ax-page .ax-banner-reference-grid{--ax-banner-row:auto;grid-template-columns:1fr!important;grid-template-rows:auto!important}
  html body.himart-ax-page .ax-banner-reference.is-hero{grid-row:auto!important}
  html body.himart-ax-page .ax-banner-reference img{height:auto!important;min-height:0!important;flex:none!important}
  html body.himart-ax-page .ax-composition-flow{grid-template-columns:1fr!important}
  html body.himart-ax-page .ax-composition-step{grid-template-rows:auto auto 280px!important}
  html body.himart-ax-page .ax-composition-visual{height:280px!important;min-height:280px!important}
  html body.himart-ax-page #journey .ways-operating-stack{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:780px){
  html body.himart-ax-page #journey .ways-quote-grid{grid-template-columns:1fr!important}
  html body.himart-ax-page #journey .ways-operating-stack{grid-template-columns:1fr!important;gap:12px!important}
  html body.himart-ax-page #journey .ways-operating-stack>article{aspect-ratio:auto!important;min-height:320px!important}
  html body.himart-ax-page #journey .ways-operating-stack>article h4{font-size:24px!important}
  html body.himart-ax-page #journey .ways-operating-stack>article p{font-size:15px!important}
  html body.himart-ax-page #journey .ways-operating-stack .ways-operating-icon{width:35.25px!important;height:35.25px!important;right:20px!important}
}