/* HIMART Design System — semantic circle typography + divider rhythm.
   This layer is intentionally page-agnostic. Page-specific highlighted states may opt out
   only with a more specific state selector (Reuse confidence/proof circle states). */
:root{
  --hm-type-circle-number:28px;
  /* Shared numbered circle-node base scale.
     Desktop/default state must resolve to 12 / 22 / 12 before any responsive reduction. */
  --hm-type-journey-circle-number:12px;
  --hm-type-journey-circle-title:22px;
  --hm-type-journey-circle-body:12px;
  --hm-circle-title-weight:100;
  --hm-circle-highlight-title-weight:400;
  --hm-rule-to-content-gap:var(--hm-space-component,40px);
}

/* 01.2 / MEANING — percentage is a compact circle metric, not a display statistic. */
html body.himart-page-body #live-main #brand .ring-card .pct{
  font-family:var(--hm-font-en)!important;
  font-size:var(--hm-type-circle-number)!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:var(--hm-track-data-number)!important;
}

/* Ordinary Himart circle/card titles stay Pretendard Thin. This prevents legacy
   component rules (400/500) from leaking into the current design-system hierarchy. */
html body.himart-page-body #live-main :is(
  #brand .ring-card h4,
  #brand .conclusion-card h5,
  #brand .direction-card h4,
  #journey .flow-node h4,
  #direction .principle-item h4,
  #direction .design-rule h4
){
  font-family:var(--hm-font-ko)!important;
  font-weight:var(--hm-circle-title-weight)!important;
  font-variation-settings:"wght" 100!important;
}


/* Shared numbered circle-node typography.
   The initial/default desktop state is always 12 / 22 / 12.
   Responsive layouts may only scale DOWN after this baseline has been satisfied. */
html body.himart-page-body #live-main :is(
  #journey .journey-flow-block .flow-node,
  .reuse-confidence-node,
  .aimmo-ownership-sync__node,
  .aimmo-business-flow > article,
  .stepup-habit-flow > article
) > :is(span,.hm-card-no){
  font-size:var(--hm-type-journey-circle-number)!important;
}
html body.himart-page-body #live-main :is(
  #journey .journey-flow-block .flow-node,
  .reuse-confidence-node,
  .aimmo-ownership-sync__node,
  .aimmo-business-flow > article,
  .stepup-habit-flow > article
) h4{
  font-size:var(--hm-type-journey-circle-title)!important;
}
html body.himart-page-body #live-main :is(
  #journey .journey-flow-block .flow-node,
  .reuse-confidence-node,
  .aimmo-ownership-sync__node,
  .aimmo-business-flow > article,
  .stepup-habit-flow > article
) p{
  font-size:var(--hm-type-journey-circle-body)!important;
}

/* Variable sizing starts only on narrow viewports and never exceeds the desktop baseline. */
@media(max-width:780px){
  html body.himart-page-body #live-main :is(
    #journey .journey-flow-block .flow-node,
    .reuse-confidence-node,
    .aimmo-ownership-sync__node,
    .aimmo-business-flow > article,
    .stepup-habit-flow > article
  ) > :is(span,.hm-card-no){
    font-size:clamp(10px,2.8vw,var(--hm-type-journey-circle-number))!important;
  }
  html body.himart-page-body #live-main :is(
    #journey .journey-flow-block .flow-node,
    .reuse-confidence-node,
    .aimmo-ownership-sync__node,
    .aimmo-business-flow > article,
    .stepup-habit-flow > article
  ) h4{
    font-size:clamp(18px,5vw,var(--hm-type-journey-circle-title))!important;
  }
  html body.himart-page-body #live-main :is(
    #journey .journey-flow-block .flow-node,
    .reuse-confidence-node,
    .aimmo-ownership-sync__node,
    .aimmo-business-flow > article,
    .stepup-habit-flow > article
  ) p{
    font-size:clamp(10px,3vw,var(--hm-type-journey-circle-body))!important;
  }
}

/* Reuse 02.2 confidence circles use the shared semantic state below.
   Reuse 02.1 lower proof circles use the same Thin(100) / Regular(400) tokens,
   with fill/reset timing owned by reuse-proof-motion.css. */
html body.reuse-current .reuse-confidence-flow .reuse-confidence-node h4{
  font-family:var(--hm-font-ko)!important;
  font-weight:var(--hm-circle-title-weight)!important;
  font-variation-settings:"wght" 100!important;
}
html body.reuse-current .reuse-confidence-flow .reuse-confidence-node:is(.is-flow-pulse-trust,.is-flow-trust-held) :is(.reuse-confidence-title--trust,.reuse-confidence-title--base) h4{
  font-weight:var(--hm-circle-highlight-title-weight)!important;
  font-variation-settings:"wght" 400!important;
}
html body.reuse-current .reuse-confidence-flow .reuse-confidence-node.is-flow-trust-resetting :is(.reuse-confidence-title--trust,.reuse-confidence-title--base) h4{
  font-weight:var(--hm-circle-title-weight)!important;
  font-variation-settings:"wght" 100!important;
}

/* Divider → first label/title spacing is a component-internal rule. Wide editorial
   chapter alignment may remove external top spacing, but must not collapse this 40px inset. */
html body.himart-page-body #live-main #journey .journey-flow-block{
  padding-top:var(--hm-rule-to-content-gap)!important;
}
html body.himart-page-body #live-main #direction .design-rule{
  padding-top:var(--hm-rule-to-content-gap)!important;
}
html body.himart-page-body #live-main #direction .design-rule > article{
  padding-top:0!important;
}
/* Some source variants render FAMILIARITY-style rules as independent principle cards,
   where the divider belongs to each article rather than the parent design-rule. */
html body.himart-page-body #live-main #direction .principle-grid > .principle-item{
  padding-top:var(--hm-rule-to-content-gap)!important;
}