/* HIMART Wide Editorial polish — TEST ONLY v5.4
   Keeps the REUSE wide contract intact while correcting Himart-specific rhythm.
   Canonical medium-title divider spacing consumes --hm-space-component from tokens.css.
*/

@media (min-width:1600px){
  /* Medium-title divider rhythm: the divider stays on the chapter start line,
     while the actual label/title starts at the canonical 40px component inset.
     These selectors intentionally outrank the earlier wide first-child zero-inset locks. */
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > #brand.hm-section .hm-wide-right-rail > .narrative-block,
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > #data.hm-section .hm-wide-right-rail > .narrative-block,
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > #journey.hm-section .hm-wide-right-rail > .journey-flow-block,
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > #journey.hm-section .hm-wide-right-rail > .journey-role-block{
    padding-top:var(--hm-space-component)!important;
  }

  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > #brand.hm-section .hm-wide-right-rail > .narrative-block:first-child,
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > #data.hm-section .hm-wide-right-rail > .narrative-block:first-child{
    padding-top:var(--hm-space-component)!important;
  }

  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > #brand.hm-section .hm-wide-right-rail > .narrative-touchpoint-synthesis{
    padding-top:var(--hm-space-component)!important;
  }

  /*
    CHAPTER-START BASELINE CONTRACT
    --------------------------------
    Root cause of the visible misalignment was asymmetric reveal geometry:
    wide-editorial-test.css moved the left major title down by 56px, while this polish
    layer had already cancelled that translation on the first right-rail block.
    During scroll-in the two authored baselines were therefore 56px apart even though
    their grid row / margin origin was identical.

    The chapter start must use the browser's natural scroll movement only. Both the
    sticky major-title head and the first right-rail divider are locked to transform:none.
    Opacity is synchronized at section level by himart-wide-editorial-adapter.js, so
    independent IntersectionObserver timing can no longer create a visual phase offset.
  */
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section .hm-wide-right-rail > :first-child{
    margin-top:0!important;
  }

  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section > .hm-wrap > .hm-section-head.hm-reveal,
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section .hm-wide-right-rail > :first-child.hm-reveal{
    transform:none!important;
    animation:none!important;
    will-change:opacity!important;
  }

  /* Generic reveal classes may be applied independently by animation.js, but they are
     intentionally ignored for the chapter-start pair. One section class owns both. */
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section:not(.is-wide-chapter-pair-visible) > .hm-wrap > .hm-section-head.hm-reveal,
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section:not(.is-wide-chapter-pair-visible) .hm-wide-right-rail > :first-child.hm-reveal{
    transform:none!important;
    animation:none!important;
    transition:none!important;
  }

  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section:not(.is-wide-chapter-pair-visible) > .hm-wrap > .hm-section-head.hm-reveal{
    opacity:.3!important;
  }
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section:not(.is-wide-chapter-pair-visible) .hm-wide-right-rail > :first-child.hm-reveal{
    opacity:.88!important;
  }

  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section.is-wide-chapter-pair-visible > .hm-wrap > .hm-section-head.hm-reveal{
    opacity:var(--hm-wide-title-exit-opacity,1)!important;
    transform:none!important;
    animation:none!important;
    transition:opacity .4s ease!important;
  }
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section.is-wide-chapter-pair-visible .hm-wide-right-rail > :first-child.hm-reveal{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    transition:opacity .4s ease!important;
  }

  /* STANDARD UX / HIMART DIFFERENCE use article-level top rules. */
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > #direction.hm-section .hm-wide-right-rail > .design-rule:first-child > article,
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > #direction.hm-section .hm-wide-right-rail > .design-rule > article{
    padding-top:var(--hm-space-component)!important;
  }

  /* 03.2 ROLE DEFINITION is intentionally page-specific for now, not a shared DS rule. */
  html body.hm-wide-editorial-test.hm-wide-himart-test #live-main > #journey.hm-section .journey-role-grid h4{
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-wrap:pretty!important;
  }
}

/* Current Himart wide-test footer only: remove the upper divider and tighten label → case link. */
html body.hm-wide-editorial-test.hm-wide-himart-test .hm-footer > .hm-wrap{
  border-top:0!important;
  padding-top:0!important;
}
html body.hm-wide-editorial-test.hm-wide-himart-test .hm-footer > .hm-wrap > div{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:16px!important;
}


/* HIMART 02.1 — exactly two semantic lines only.
   Each authored line is non-wrapping so this subsection can never become 3 lines. */
html body.hm-wide-editorial-test.hm-wide-himart-test #data .hm-data-021-title,
html body.hm-wide-editorial-test.hm-wide-himart-test #data .hm-data-card-021-title{
  max-width:none!important;
  white-space:normal!important;
}
html body.hm-wide-editorial-test.hm-wide-himart-test #data .hm-data-021-title > span,
html body.hm-wide-editorial-test.hm-wide-himart-test #data .hm-data-card-021-title > span{
  display:block!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}


/* HIMART 03.2 — numbered role cards.
   No icon reserve space: number → English role → Korean role statement.
   Every card keeps a 4:3 frame. */
html body.hm-wide-editorial-test.hm-wide-himart-test #live-main #journey :is(
  .journey-role-grid > article,
  .hm-role-grid--numbered-cards > .role-card
){
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:4 / 3!important;
  padding:24px 0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
html body.hm-wide-editorial-test.hm-wide-himart-test #live-main #journey :is(
  .journey-role-grid > article,
  .hm-role-grid--numbered-cards > .role-card
) > .hm-role-index{
  display:block!important;
  margin:0 0 16px!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.hm-wide-editorial-test.hm-wide-himart-test #live-main #journey :is(
  .journey-role-grid > article > small,
  .hm-role-grid--numbered-cards > .role-card > .hm-role-name
){
  display:block!important;
  margin:0!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-en-thin)!important;
  font-size:36px!important;
  font-weight:300!important;
  font-synthesis:none!important;
  line-height:1!important;
  letter-spacing:var(--hm-track-group)!important;
}
html body.hm-wide-editorial-test.hm-wide-himart-test #live-main #journey :is(
  .journey-role-grid > article > h4,
  .hm-role-grid--numbered-cards > .role-card > h4
){
  margin:20px 0 0!important;
  min-height:0!important;
  width:100%!important;
  max-width:none!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:22px!important;
  font-weight:100!important;
  font-variation-settings:"wght" 100!important;
  font-synthesis:none!important;
  line-height:1.35!important;
  letter-spacing:var(--hm-track-group)!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
html body.hm-wide-editorial-test.hm-wide-himart-test #live-main #journey .journey-role-grid > article > :is(.hm-ds-icon,p,strong),
html body.hm-wide-editorial-test.hm-wide-himart-test #live-main #journey .hm-role-grid--numbered-cards > .role-card > :is(.hm-ds-icon,p,strong){
  display:none!important;
  margin:0!important;
  padding:0!important;
}