@import url("./yanolja-system-base.css?v=20260911-1");

/* YANOLJA portfolio color authority.
   Rule:
   1) Portfolio/editorial emphasis uses the site canonical blue only.
   2) Actual Yanolja design-system / product UI examples keep their original colors
      defined in yanolja-system-base.css and inline palette/accessibility samples.
   Do not override colors inside UI demo surfaces from this layer. */
html body.yanolja-system-page{
  --yanolja-portfolio-point:var(--hm-blue);
}

/* Portfolio composition: borders and editorial emphasis only. */
html body.yanolja-system-page :is(
  .yanolja-question-card:nth-child(3),
  .yanolja-answer-card:nth-child(1),
  .yanolja-answer-card:nth-child(4),
  .yanolja-field-metric.is-accent,
  .yanolja-context-grid article:nth-child(3),
  .yanolja-direction-card:nth-child(1),
  .yanolja-direction-card:nth-child(4),
  .yanolja-goal-card:nth-child(1),
  .yanolja-rule-grid article:nth-child(2),
  .yanolja-accessibility__statement,
  .yanolja-demo-panel:nth-child(1),
  .yanolja-demo-panel:nth-child(4),
  .yanolja-type-demo,
  .yanolja-component-card:nth-child(1),
  .yanolja-component-card:nth-child(4),
  .yanolja-coverage-card:nth-child(1),
  .yanolja-coverage-card:nth-child(5),
  .yanolja-coverage-card:nth-child(9),
  .yanolja-lead-step:nth-child(1),
  .yanolja-lead-step:nth-child(5),
  .yanolja-final-statement
){
  border-color:var(--hm-line-default)!important;
  border-top-color:var(--hm-line-default)!important;
}

html body.yanolja-system-page :is(
  .yanolja-answer-card>span,
  .yanolja-answer-card strong,
  .yanolja-field-scene__intro>span,
  .yanolja-field-metric>span,
  .yanolja-context-grid>article>span,
  .yanolja-rule-grid>article>span,
  .yanolja-component-card>span,
  .yanolja-direction-card>span,
  .yanolja-equation>span,
  .yanolja-goal-card>span,
  .yanolja-accessibility__statement>strong,
  .yanolja-demo-panel>span,
  .yanolja-contrast-meter strong,
  .yanolja-type-sizes>article>span,
  .yanolja-glance-grid>article>span,
  .yanolja-coverage-card>span,
  .yanolja-lead-step>span,
  .yanolja-final-statement>span,
  .yanolja-final-statement>p>strong
){
  color:var(--yanolja-portfolio-point)!important;
}

/* IMPORTANT: Product/design-system examples intentionally inherit original Yanolja colors
   from yanolja-system-base.css. This includes:
   - 03.1 palette swatches
   - 03.2 Normal / Deutan / Protan color samples
   - 03.3 buttons, radius samples, Light/Dark UI samples
   - 04.1 component states (primary, secondary, error, confirm, selected)
   - 04.2 3x3 component demos
   Red/green/etc. are therefore allowed only inside these factual Yanolja examples,
   not as portfolio-page decorative point colors. */

/* 2026-09-18 — neutral editorial surface contract.
   Yanolja product/design-system examples keep their factual UI colors; portfolio cards do not. */
html body.yanolja-system-page :is(
  .yanolja-question-card,
  .yanolja-direction-card,
  .yanolja-goal-card
){
  border-color:var(--hm-line-default)!important;
  background:transparent!important;
}
html body.yanolja-system-page :is(
  .yanolja-answer-card,
  .yanolja-field-metric,
  .yanolja-context-grid article,
  .yanolja-rule-grid article,
  .yanolja-demo-panel,
  .yanolja-type-demo,
  .yanolja-component-card,
  .yanolja-coverage-card,
  .yanolja-lead-step,
  .yanolja-accessibility__statement,
  .yanolja-final-statement
){
  border-top-color:var(--hm-line-default)!important;
}
html body.yanolja-system-page :is(
  .yanolja-answer-card,
  .yanolja-field-metric,
  .yanolja-demo-panel,
  .yanolja-component-card,
  .yanolja-coverage-card
){
  background:transparent!important;
}

/* 01.2 — HIMART WAYS 03.2 operating-card source; content/icons only changed. */
html body.yanolja-system-page #brand .yanolja-answer-stack{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  width:100%!important;
}
html body.yanolja-system-page #brand .yanolja-answer-stack>article{
  position:relative!important;
  min-width:0!important;
  padding:26px 28px 30px!important;
  border:0!important;
  border-top:1px solid var(--hm-line-default)!important;
  background:transparent!important;
}
html body.yanolja-system-page #brand .yanolja-answer-stack>article>span{
  display:block!important;
  color:#fff!important;
  font:400 11px/1.2 var(--hm-font-en)!important;
  letter-spacing:var(--hm-track-note)!important;
}
html body.yanolja-system-page #brand .yanolja-answer-stack>article h4{
  margin:22px 0 0!important;
  color:#fff!important;
  font:100 22px/1.3 var(--hm-font-ko)!important;
  font-variation-settings:"wght" 100!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
}
html body.yanolja-system-page #brand .yanolja-answer-stack>article p{
  margin:12px 0 0!important;
  max-width:42ch!important;
  color:var(--hm-description-color)!important;
  font:300 14px/1.52 var(--hm-font-ko)!important;
  letter-spacing:var(--hm-track-body)!important;
  word-break:keep-all!important;
}
html body.yanolja-system-page #brand .yanolja-answer-stack>article .hm-ds-icon{
  color:var(--hm-blue)!important;
}

/* 01.3 — one 16:9 field image, then two evidence rows. */
html body.yanolja-system-page #brand .yanolja-field-scene{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  aspect-ratio:16/9!important;
  margin:var(--hm-subtitle-to-content) 0 0!important;
  overflow:hidden!important;
  background:transparent!important;
  isolation:auto!important;
}
html body.yanolja-system-page #brand .yanolja-field-scene>img{
  position:static!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  filter:none!important;
}
html body.yanolja-system-page #brand .yanolja-field-scene::after{display:none!important}
html body.yanolja-system-page #brand .yanolja-field-metrics{
  position:static!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:20px!important;
  width:100%!important;
  margin:24px 0 0!important;
}
html body.yanolja-system-page #brand .yanolja-field-metric{
  min-height:250px!important;
  padding:24px 0 28px!important;
  border:0!important;
  border-top:1px solid var(--hm-line-default)!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
html body.yanolja-system-page #brand .yanolja-field-metric>span{
  color:#fff!important;
}
html body.yanolja-system-page #brand .yanolja-field-metric p{
  margin:10px 0 0!important;
  max-width:28ch!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.52!important;
  letter-spacing:var(--hm-track-body)!important;
}
html body.yanolja-system-page #brand .yanolja-context-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
html body.yanolja-system-page #brand .yanolja-context-grid>article>span{
  color:#fff!important;
}

@media(max-width:1180px){
  html body.yanolja-system-page #brand .yanolja-answer-stack,
  html body.yanolja-system-page #brand .yanolja-field-metrics,
  html body.yanolja-system-page #brand .yanolja-context-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:780px){
  html body.yanolja-system-page #brand .yanolja-answer-stack,
  html body.yanolja-system-page #brand .yanolja-field-metrics,
  html body.yanolja-system-page #brand .yanolja-context-grid{
    grid-template-columns:1fr!important;
  }
}

/* YANOLJA exact-reference rebuild — 2026-09-19 */

/* 01.1 — HIMART TEAM 01.1 copied geometry, expanded from 3 to 4 columns. */
html body.yanolja-system-page #brand .yanolja-team-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
html body.yanolja-system-page #brand .yanolja-team-grid .team-card{
  min-height:300px!important;
  padding:30px 0!important;
  border:0!important;
  border-top:1px solid var(--hm-line-default)!important;
  background:transparent!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
}
html body.yanolja-system-page #brand .yanolja-team-grid .team-card>span{
  font-family:var(--hm-font-en)!important;font-size:12px!important;line-height:1.2!important;
  letter-spacing:.08em!important;color:var(--hm-blue)!important
}
html body.yanolja-system-page #brand .yanolja-team-grid .team-card strong{
  display:block!important;margin-top:12px!important;font-family:var(--hm-font-ko)!important;
  font-size:28px!important;line-height:1.28!important;font-weight:300!important;font-variation-settings:"wght" 300!important;
  letter-spacing:var(--hm-track-group)!important
}
html body.yanolja-system-page #brand .yanolja-team-grid .team-card p{
  margin:auto 0 0 0!important;max-width:31ch!important;font-size:16px!important;line-height:1.62!important;
  color:rgba(255,255,255,.58)!important;text-align:left!important
}

/* 01.2 — HIMART WAYS 03.2 copied geometry: number / title / body / icon. */
html body.yanolja-system-page #brand .yanolja-answer-stack{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;width:100%!important
}
html body.yanolja-system-page #brand .yanolja-answer-stack article{
  position:relative!important;min-width:0!important;padding:26px 28px 30px!important;
  border:0!important;border-top:1px solid var(--hm-line-default)!important;background:rgba(255,255,255,.018)!important
}
html body.yanolja-system-page #brand .yanolja-answer-stack article>span{
  display:block!important;color:var(--hm-blue)!important;font:400 11px/1.2 var(--hm-font-en)!important;letter-spacing:var(--hm-track-note)!important
}
html body.yanolja-system-page #brand .yanolja-answer-stack article h4{
  margin:22px 0 0!important;color:#fff!important;font:100 22px/1.3 var(--hm-font-ko)!important;
  font-variation-settings:"wght" 100!important;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important
}
html body.yanolja-system-page #brand .yanolja-answer-stack article p{
  margin:12px 0 0!important;max-width:42ch!important;color:var(--hm-description-color)!important;
  font:300 14px/1.52 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important
}
html body.yanolja-system-page #brand .yanolja-answer-stack article .hm-ds-icon{
  position:absolute!important;right:24px!important;bottom:24px!important;width:39.66px!important;height:39.66px!important;
  margin:0!important;color:var(--hm-blue)!important;display:block!important;visibility:visible!important;opacity:1!important;transform:none!important
}

/* 01.3 — HIMART TEAM 02.2 composition; full-width overlay and exactly 80px image overlap. */
html body.yanolja-system-page #brand .yanolja-field-workshop{
  position:relative!important;width:100%!important;padding:0 0 160px!important
}
html body.yanolja-system-page #brand .yanolja-field-workshop .team-workshop-visual__image{
  position:relative!important;width:100%!important;aspect-ratio:16/9!important;background:#000!important;overflow:visible!important
}
html body.yanolja-system-page #brand .yanolja-field-workshop .team-workshop-visual__image>img{
  position:absolute!important;z-index:0!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important
}
html body.yanolja-system-page #brand .yanolja-field-workshop .team-workshop-visual__cards{
  position:absolute!important;z-index:2!important;right:0!important;bottom:0!important;left:0!important;
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;height:240px!important;
  transform:translateY(160px)!important;background:rgba(0,0,0,.88)!important;overflow:visible!important
}
html body.yanolja-system-page #brand .yanolja-field-workshop .team-workshop-card{
  position:relative!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;
  min-width:0!important;height:100%!important;margin:0!important;padding:28px!important;border:0!important;background:transparent!important
}
html body.yanolja-system-page #brand .yanolja-field-workshop .team-workshop-card+.team-workshop-card{
  border-left:1px solid rgba(255,255,255,.15)!important
}
html body.yanolja-system-page #brand .yanolja-field-workshop .team-workshop-card>span{
  display:block!important;color:var(--hm-blue)!important;font:400 12px/1 var(--hm-font-en)!important;letter-spacing:var(--hm-track-note)!important
}
html body.yanolja-system-page #brand .yanolja-field-workshop .team-workshop-card__copy>strong{
  display:block!important;margin:0 0 8px!important;color:var(--hm-blue)!important;
  font:400 32px/1 var(--hm-font-en)!important;letter-spacing:var(--hm-track-data-number)!important
}
html body.yanolja-system-page #brand .yanolja-field-workshop .team-workshop-card h4{
  margin:0!important;color:#fff!important;font-family:var(--hm-font-ko)!important;font-size:22px!important;
  font-weight:300!important;font-variation-settings:"wght" 300!important;line-height:1.28!important;letter-spacing:var(--hm-track-group)!important
}
html body.yanolja-system-page #brand .yanolja-field-workshop .team-workshop-card p{
  margin:10px 0 0!important;max-width:38ch!important;color:rgba(255,255,255,.68)!important;
  font-family:var(--hm-font-ko)!important;font-size:16px!important;font-weight:300!important;line-height:1.5!important
}
html body.yanolja-system-page #brand .yanolja-context-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* 01.4 — HIMART AX 03.1 card grammar, four-column adaptation only. */
html body.yanolja-system-page #brand .yanolja-system-direction{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important;width:100%!important
}
html body.yanolja-system-page #brand .yanolja-system-direction .ax-maker-step{
  position:relative!important;min-height:330px!important;padding:24px 0 0!important;
  border:0!important;border-top:1px solid rgba(255,255,255,.30)!important;background:transparent!important
}
html body.yanolja-system-page #brand .yanolja-system-direction .ax-maker-step>span{
  display:block!important;color:var(--hm-blue)!important;font:400 12px/1.2 var(--hm-font-en)!important;letter-spacing:var(--hm-track-note)!important
}
html body.yanolja-system-page #brand .yanolja-system-direction .ax-maker-step h4{
  margin:74px 0 0!important;color:#fff!important;font:100 28px/1.2 var(--hm-font-ko)!important;
  font-variation-settings:"wght" 100!important;letter-spacing:var(--hm-track-subsection)!important;word-break:keep-all!important
}
html body.yanolja-system-page #brand .yanolja-system-direction .ax-maker-step p{
  margin:14px 0 0!important;max-width:30ch!important;color:var(--hm-description-color)!important;
  font:300 16px/1.5 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important
}
html body.yanolja-system-page #brand .yanolja-system-direction .ax-maker-step ul{
  display:grid!important;gap:8px!important;margin:34px 0 0!important;padding:0!important;
  list-style:none!important;color:rgba(255,255,255,.72)!important;font:300 12px/1.35 var(--hm-font-ko)!important
}
html body.yanolja-system-page #brand .yanolja-system-direction .ax-maker-step li::before{
  content:"・"!important;display:inline-block!important;margin-right:6px!important;color:var(--hm-blue)!important
}

/* 02.1 */
html body.yanolja-system-page #data .yanolja-goal-card p{font-size:16px!important;line-height:1.5!important}

/* 03.1 — nature inspiration and quadrant labels. */
html body.yanolja-system-page #journey .yanolja-color-origin,
html body.yanolja-system-page #journey .yanolja-color-motif{width:100%!important;margin:0!important}
html body.yanolja-system-page #journey .yanolja-color-origin img,
html body.yanolja-system-page #journey .yanolja-color-motif img{display:block!important;width:100%!important;height:auto!important}
html body.yanolja-system-page #journey .yanolja-color-motif{position:relative!important;margin-top:24px!important}
html body.yanolja-system-page #journey .yanolja-color-motif figcaption{
  position:absolute!important;inset:0!important;display:grid!important;grid-template-columns:repeat(2,1fr)!important;grid-template-rows:repeat(2,1fr)!important;
  pointer-events:none!important
}
html body.yanolja-system-page #journey .yanolja-color-motif figcaption>span{
  display:flex!important;flex-direction:column!important;align-self:end!important;justify-self:start!important;
  margin:0 0 28px 28px!important;color:#fff!important;text-shadow:0 1px 12px rgba(0,0,0,.45)!important
}
html body.yanolja-system-page #journey .yanolja-color-motif figcaption b{
  font-family:var(--hm-font-en)!important;font-size:18px!important;font-weight:400!important;line-height:1.1!important;letter-spacing:0!important
}
html body.yanolja-system-page #journey .yanolja-color-motif figcaption small{
  margin-top:6px!important;font-family:var(--hm-font-en)!important;font-size:10px!important;font-weight:400!important;
  line-height:1.1!important;letter-spacing:var(--hm-track-note)!important;opacity:.70!important
}
html body.yanolja-system-page #journey .yanolja-palette-wrap{margin-top:40px!important}

/* 03.2 */
html body.yanolja-system-page #journey .yanolja-blue-access{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;gap:24px!important;width:100%!important
}
html body.yanolja-system-page #journey .yanolja-blue-access__swatch{
  display:flex!important;min-height:280px!important;flex-direction:column!important;justify-content:flex-end!important;
  padding:32px!important;background:#003AA7!important;color:#fff!important
}
html body.yanolja-system-page #journey .yanolja-blue-access__swatch span{
  font:400 12px/1.2 var(--hm-font-en)!important;letter-spacing:var(--hm-track-note)!important;opacity:.72!important
}
html body.yanolja-system-page #journey .yanolja-blue-access__swatch strong{
  margin-top:12px!important;font:400 42px/1 var(--hm-font-en)!important;letter-spacing:-.02em!important
}
html body.yanolja-system-page #journey .yanolja-blue-access__swatch b{
  margin-top:14px!important;font:400 16px/1 var(--hm-font-en)!important;opacity:.72!important
}
html body.yanolja-system-page #journey .yanolja-blue-access__research{
  min-height:280px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  padding:28px 0!important;
  border-top:1px solid var(--hm-line-default)!important
}
html body.yanolja-system-page #journey .yanolja-blue-access__research>span{
  color:var(--hm-blue)!important;font:400 12px/1.2 var(--hm-font-en)!important;letter-spacing:var(--hm-track-note)!important
}
html body.yanolja-system-page #journey .yanolja-blue-access__research h4{
  margin:54px 0 0!important;color:#fff!important;font:100 28px/1.28 var(--hm-font-ko)!important;font-variation-settings:"wght" 100!important;word-break:keep-all!important
}
html body.yanolja-system-page #journey .yanolja-blue-access__research p{
  margin:16px 0 0!important;max-width:52ch!important;color:var(--hm-description-color)!important;font:300 16px/1.58 var(--hm-font-ko)!important;word-break:keep-all!important
}
html body.yanolja-system-page #journey .yanolja-vision-summary{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;gap:24px!important;
  align-items:start!important;width:100%!important;margin-top:24px!important
}
html body.yanolja-system-page #journey .yanolja-vision-grid--reframed{
  display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important;margin:0!important
}
html body.yanolja-system-page #journey .yanolja-vision-grid--reframed .yanolja-vision-card{
  min-width:0!important;padding:18px 0 20px!important;border-top:1px solid var(--hm-line-default)!important
}
html body.yanolja-system-page #journey .yanolja-vision-grid--reframed .yanolja-dot-matrix{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:0!important;width:100%!important;margin-top:16px!important
}
html body.yanolja-system-page #journey .yanolja-vision-grid--reframed .yanolja-dot{width:31px!important;height:31px!important;justify-self:center!important}
html body.yanolja-system-page #journey .yanolja-vision-copy{
  min-height:280px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  padding:28px 0!important;
  border-top:1px solid var(--hm-line-default)!important
}
html body.yanolja-system-page #journey .yanolja-vision-copy>span{
  color:var(--hm-blue)!important;font:400 12px/1.2 var(--hm-font-en)!important;letter-spacing:var(--hm-track-note)!important
}
html body.yanolja-system-page #journey .yanolja-vision-copy h4{
  margin:38px 0 0!important;color:#fff!important;font:100 28px/1.28 var(--hm-font-ko)!important;
  font-variation-settings:"wght" 100!important;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important
}
html body.yanolja-system-page #journey .yanolja-vision-copy p{
  margin:16px 0 0!important;max-width:54ch!important;color:var(--hm-description-color)!important;
  font:300 16px/1.58 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important
}

/* 03.3 — one row per principle. */
html body.yanolja-system-page #journey .yanolja-usability-rows{
  display:grid!important;grid-template-columns:1fr!important;gap:0!important;width:100%!important
}
html body.yanolja-system-page #journey .yanolja-usability-row{
  display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;gap:56px!important;
  align-items:center!important;min-height:380px!important;padding:40px 0!important;border-top:1px solid var(--hm-line-default)!important
}
html body.yanolja-system-page #journey .yanolja-usability-row__copy>span{
  color:var(--hm-blue)!important;font:400 12px/1.2 var(--hm-font-en)!important;letter-spacing:var(--hm-track-note)!important
}
html body.yanolja-system-page #journey .yanolja-usability-row__copy h4{
  margin:30px 0 0!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.28!important;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important
}
html body.yanolja-system-page #journey .yanolja-usability-row__copy p{
  margin:14px 0 0!important;max-width:45ch!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.58!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important
}
html body.yanolja-system-page #journey .yanolja-usability-row__visual{
  min-width:0!important;min-height:250px!important
}
html body.yanolja-system-page #journey .yanolja-radius-action-demo{
  position:relative!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important;align-content:center!important
}
html body.yanolja-system-page #journey .yanolja-radius-action-demo .yanolja-radius-callout{
  position:absolute!important;top:8px!important;left:0!important;display:flex!important;align-items:center!important;gap:10px!important;color:var(--hm-blue)!important;
  font:400 10px/1.2 var(--hm-font-en)!important
}
html body.yanolja-system-page #journey .yanolja-radius-action-demo .yanolja-radius-callout i{
  display:block!important;width:34px!important;height:34px!important;border:1px solid var(--hm-blue)!important;border-radius:4px!important
}
html body.yanolja-system-page #journey .yanolja-radius-action-demo .yanolja-ui-button,
html body.yanolja-system-page #journey .yanolja-button-demo--large .yanolja-ui-button{
  width:100%!important;min-width:0!important;height:96px!important;font-size:26px!important
}
html body.yanolja-system-page #journey .yanolja-button-demo--large{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important;align-content:center!important
}
html body.yanolja-system-page #journey .yanolja-button-demo--large .is-destructive{grid-column:1/-1!important;margin-left:0!important}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-contrast-meter{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important;align-content:center!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-contrast-meter>div{
  min-height:220px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;padding:24px 0!important;
  border-left:0!important;border-right:0!important;
  border-top:1px solid rgba(255,255,255,.20)!important;
  border-bottom:1px solid rgba(255,255,255,.20)!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-contrast-meter span{
  font-size:12px!important;
  line-height:1.4!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-contrast-meter strong{
  font-size:105px!important;font-weight:100!important;line-height:.88!important;letter-spacing:-.05em!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-theme-demo{
  display:grid!important;grid-template-columns:1fr 1fr!important;min-height:280px!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-theme-sample{
  position:relative!important;min-height:280px!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-theme-sample span{
  position:absolute!important;left:18px!important;bottom:16px!important;color:rgba(0,0,0,.54)!important;font:400 10px/1 var(--hm-font-en)!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-theme-sample.is-dark span{color:rgba(255,255,255,.66)!important}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-theme-sample{
  display:flex!important;align-items:center!important;justify-content:center!important;padding:28px!important;box-sizing:border-box!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel{
  width:100%!important;max-width:280px!important;border:1px solid rgba(0,0,0,.10)!important;border-radius:4px!important;
  background:#fff!important;box-shadow:0 12px 30px rgba(0,0,0,.10)!important;overflow:hidden!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__head{
  display:flex!important;gap:6px!important;align-items:center!important;height:34px!important;padding:0 12px!important;background:#f2f4f8!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__head i{
  display:block!important;width:6px!important;height:6px!important;border-radius:50%!important;background:#b8bec9!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__body{padding:20px!important}
html body.yanolja-system-page #journey .yanolja-theme-panel__body b{
  display:block!important;color:#20242c!important;font:400 14px/1.2 var(--hm-font-ko)!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__body p{
  margin:8px 0 18px!important;color:#707782!important;font:300 11px/1.45 var(--hm-font-ko)!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__body button{
  width:100%!important;height:42px!important;border:0!important;border-radius:4px!important;background:#003AA7!important;
  color:#fff!important;font:300 13px/1 var(--hm-font-ko)!important
}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel{
  border-color:rgba(255,255,255,.10)!important;background:#262626!important;box-shadow:0 14px 34px rgba(0,0,0,.34)!important
}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel__head{background:#323232!important}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel__head i{background:#6d6d6d!important}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel__body b{color:#fff!important}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel__body p{color:rgba(255,255,255,.58)!important}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel__body button{background:#174EC0!important}

/* 03.4 */
html body.yanolja-system-page #journey .yanolja-type-reference{
  display:grid!important;grid-template-columns:1fr!important;gap:32px!important;width:100%!important
}
html body.yanolja-system-page #journey .yanolja-type-reference__image{margin:0!important;width:100%!important;background:#fff!important}
html body.yanolja-system-page #journey .yanolja-type-reference__image img{display:block!important;width:100%!important;height:auto!important}
html body.yanolja-system-page #journey .yanolja-type-reference__copy{
  padding:28px 0 0!important;border-top:1px solid var(--hm-line-default)!important
}
html body.yanolja-system-page #journey .yanolja-type-reference__copy>span{
  color:var(--hm-blue)!important;font:400 12px/1.2 var(--hm-font-en)!important;letter-spacing:var(--hm-track-note)!important
}
html body.yanolja-system-page #journey .yanolja-type-reference__copy h4{
  margin:28px 0 0!important;color:#fff!important;font:100 28px/1.3 var(--hm-font-ko)!important;font-variation-settings:"wght" 100!important
}
html body.yanolja-system-page #journey .yanolja-type-reference__copy p{
  margin:14px 0 0!important;max-width:64ch!important;color:var(--hm-description-color)!important;font:300 16px/1.58 var(--hm-font-ko)!important;word-break:keep-all!important
}

@media(max-width:1180px){
  html body.yanolja-system-page #brand .yanolja-team-grid,
  html body.yanolja-system-page #brand .yanolja-system-direction{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.yanolja-system-page #brand .yanolja-field-workshop .team-workshop-visual__cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;height:auto!important;transform:none!important;position:relative!important}
  html body.yanolja-system-page #brand .yanolja-field-workshop{padding-bottom:0!important}
}
@media(max-width:780px){
  html body.yanolja-system-page #brand .yanolja-team-grid,
  html body.yanolja-system-page #brand .yanolja-answer-stack,
  html body.yanolja-system-page #brand .yanolja-system-direction,
  html body.yanolja-system-page #journey .yanolja-blue-access,
  html body.yanolja-system-page #journey .yanolja-vision-summary,
  html body.yanolja-system-page #journey .yanolja-usability-row{grid-template-columns:1fr!important}
  html body.yanolja-system-page #journey .yanolja-color-motif figcaption>span{margin:0 0 14px 14px!important}
  html body.yanolja-system-page #journey .yanolja-color-motif figcaption b{font-size:16px!important}
  html body.yanolja-system-page #journey .yanolja-color-motif figcaption small{font-size:9px!important}
}


/* YANOLJA 03 asset proof — source images are preserved at their native ratio. */
html body.yanolja-system-page #journey .yanolja-access-reference{
  display:block!important;width:100%!important;margin:24px 0 0!important;background:#fff!important
}
html body.yanolja-system-page #journey .yanolja-access-reference img{
  display:block!important;width:100%!important;height:auto!important
}
html body.yanolja-system-page #journey .yanolja-usability-reference{
  display:block!important;width:100%!important;margin:0!important;min-height:0!important;background:#fff!important
}
html body.yanolja-system-page #journey .yanolja-usability-reference img{
  display:block!important;width:100%!important;height:auto!important
}
html body.yanolja-system-page #journey .yanolja-type-reference__copy h4 em{
  color:var(--hm-blue)!important;font-family:var(--hm-font-en)!important;font-style:normal!important;font-weight:400!important
}

/* 04.1 HST source gallery — HTML/CSS reconstruction of portfolio pp.57–59. */
html body.yanolja-system-page #direction .hst-ds-gallery{
  position:relative!important;width:100%!important;overflow:visible!important
}
html body.yanolja-system-page #direction .hst-ds-gallery__viewport{
  position:relative!important;width:100%!important;aspect-ratio:4/3!important;overflow:hidden!important;background:#fff!important
}
html body.yanolja-system-page #direction .hst-ds-gallery__track{
  display:flex!important;width:100%!important;height:100%!important;transform:translate3d(0,0,0);transition:transform .52s cubic-bezier(.22,.61,.36,1)!important;will-change:transform
}
html body.yanolja-system-page #direction .hst-ds-gallery__track.is-no-transition{
  transition:none!important
}
html body.yanolja-system-page #direction .hst-ds-sheet{
  --hst-type-section:8px;
  --hst-type-label:7px;
  --hst-type-ui:6.5px;
  --hst-type-compact:6px;
  --hst-type-micro:5.5px;
  position:relative!important;flex:0 0 100%!important;width:100%!important;height:100%!important;padding:60px!important;
  box-sizing:border-box!important;overflow:hidden!important;background:#fff!important;color:#222!important;
  font-family:Arial,var(--hm-font-ko),sans-serif!important;font-size:var(--hst-type-ui)!important;line-height:1.3!important
}
html body.yanolja-system-page #direction .hst-ds-sheet *,
html body.yanolja-system-page #direction .hst-ds-sheet *::before,
html body.yanolja-system-page #direction .hst-ds-sheet *::after{box-sizing:border-box!important}
html body.yanolja-system-page #direction .hst-ds-sheet__brand{
  position:absolute!important;top:60px!important;left:60px!important;display:flex!important;gap:4px!important;align-items:baseline!important;
  color:#111!important;font-family:Arial,var(--hm-font-ko),sans-serif!important;font-size:15px!important;line-height:1!important;letter-spacing:-.02em!important
}
html body.yanolja-system-page #direction .hst-ds-sheet__brand b{font-weight:700!important}
html body.yanolja-system-page #direction .hst-ds-sheet__brand span{font-weight:400!important}
html body.yanolja-system-page #direction .hst-ds-gallery__nav{
  z-index:8!important
}
html body.yanolja-system-page #direction .hst-ds-gallery__nav::before{
  border-top-color:rgba(0,0,0,.60)!important;
  border-right-color:rgba(0,0,0,.60)!important;
  mix-blend-mode:normal!important
}

/* Shared HST UI atoms.
   Type scale is component-driven: section 8 / label 7 / UI 6.5 / compact 6 / micro 5.5px. */
html body.yanolja-system-page #direction .hst-ds-sheet h5{
  margin:0 0 10px!important;padding:0 0 7px!important;border-bottom:1px solid #d9d9d9!important;color:#222!important;
  font:600 var(--hst-type-section)/1.1 Arial,var(--hm-font-ko),sans-serif!important;letter-spacing:-.02em!important
}
html body.yanolja-system-page #direction .hst-btn{
  display:grid!important;min-width:0!important;height:22px!important;place-items:center!important;margin:0!important;border:1px solid transparent!important;border-radius:1px!important;
  color:#fff!important;background:#004cb6!important;font:600 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important;font-style:normal!important;white-space:nowrap!important
}
html body.yanolja-system-page #direction .hst-btn.is-primary.is-hover{background:#00419b!important}
html body.yanolja-system-page #direction .hst-btn.is-primary.is-pressed{background:#00357f!important}
html body.yanolja-system-page #direction .hst-btn.is-primary.is-disabled{background:#bfd2ed!important;color:#fff!important}
html body.yanolja-system-page #direction .hst-btn.is-secondary{border-color:#004cb6!important;background:#fff!important;color:#004cb6!important}
html body.yanolja-system-page #direction .hst-btn.is-secondary.is-hover{background:#eef4ff!important}
html body.yanolja-system-page #direction .hst-btn.is-secondary.is-pressed{background:#bfd2ed!important}
html body.yanolja-system-page #direction .hst-btn.is-secondary.is-disabled{border-color:#bfd2ed!important;color:#bfd2ed!important}
html body.yanolja-system-page #direction .hst-btn.is-tertiary{border-color:#bdbdbd!important;background:#fff!important;color:#656565!important}
html body.yanolja-system-page #direction .hst-btn.is-tertiary.is-hover{background:#f2f2f2!important}
html body.yanolja-system-page #direction .hst-btn.is-tertiary.is-pressed{background:#dedede!important}
html body.yanolja-system-page #direction .hst-btn.is-tertiary.is-disabled{border-color:#ddd!important;color:#c8c8c8!important}
html body.yanolja-system-page #direction .hst-btn.is-danger{background:#b50000!important}
html body.yanolja-system-page #direction .hst-btn.is-danger.is-hover{background:#960000!important}
html body.yanolja-system-page #direction .hst-btn.is-danger.is-pressed{background:#760000!important}
html body.yanolja-system-page #direction .hst-btn.is-danger.is-disabled{background:#efbcbc!important}

/* p.57 */
html body.yanolja-system-page #direction .hst57-layout{
  position:absolute!important;top:116px!important;left:60px!important;right:60px!important;bottom:60px!important;
  display:grid!important;grid-template-columns:82px minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto auto minmax(0,1fr)!important;
  column-gap:42px!important;row-gap:28px!important;align-items:start!important;align-content:start!important;overflow:hidden!important
}
html body.yanolja-system-page #direction .hst57-label{
  color:#111!important;font:700 var(--hst-type-section)/1.15 Arial,var(--hm-font-ko),sans-serif!important;padding-top:3px!important
}
html body.yanolja-system-page #direction .hst57-label.is-groups{line-height:1.1!important}
html body.yanolja-system-page #direction .hst-button-matrix__head,
html body.yanolja-system-page #direction .hst-button-matrix__row{
  display:grid!important;grid-template-columns:48px repeat(4,minmax(0,1fr))!important;gap:14px!important;align-items:center!important
}
html body.yanolja-system-page #direction .hst-button-matrix__head{
  margin-bottom:8px!important;color:#9a9a9a!important;font:400 var(--hst-type-label)/1 Arial,var(--hm-font-ko),sans-serif!important;text-align:center!important
}
html body.yanolja-system-page #direction .hst-button-matrix__head span:first-child,
html body.yanolja-system-page #direction .hst-button-matrix__row>span{text-align:left!important}
html body.yanolja-system-page #direction .hst-button-matrix__row{
  margin-top:8px!important;color:#9a9a9a!important;font:400 var(--hst-type-label)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-button-matrix.is-small .hst-button-matrix__head,
html body.yanolja-system-page #direction .hst-button-matrix.is-small .hst-button-matrix__row{
  grid-template-columns:44px repeat(4,minmax(0,1fr))!important;gap:9px!important
}
html body.yanolja-system-page #direction .hst-button-matrix.is-small .hst-btn{height:16px!important;font-size:var(--hst-type-compact)!important}
html body.yanolja-system-page #direction .hst-icon-row__head,
html body.yanolja-system-page #direction .hst-icon-row__items{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important
}
html body.yanolja-system-page #direction .hst-icon-row__head{
  margin-bottom:7px!important;color:#858585!important;font:400 var(--hst-type-label)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-icon-row.is-small .hst-icon-row__head,
html body.yanolja-system-page #direction .hst-icon-row.is-small .hst-icon-row__items{gap:12px!important}
html body.yanolja-system-page #direction .hst-icon-row.is-small .hst-btn{height:16px!important;font-size:var(--hst-type-compact)!important}
html body.yanolja-system-page #direction .hst-group-demo{min-width:0!important}
html body.yanolja-system-page #direction .hst-demo-caption{
  display:block!important;margin:5px 0 3px!important;color:#a0a0a0!important;font:400 var(--hst-type-compact)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-segment{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
html body.yanolja-system-page #direction .hst-segment i{
  height:20px!important;display:grid!important;place-items:center!important;border:1px solid #bfc1c5!important;border-right:0!important;background:#fff!important;
  color:#787878!important;font:400 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important;font-style:normal!important
}
html body.yanolja-system-page #direction .hst-segment i:last-child{border-right:1px solid #bfc1c5!important}
html body.yanolja-system-page #direction .hst-segment i.is-selected{position:relative!important;z-index:1!important;border:1.5px solid #004cb6!important;color:#004cb6!important;font-weight:700!important}
html body.yanolja-system-page #direction .hst-segment i.is-disabled{color:#cfcfcf!important}
html body.yanolja-system-page #direction .hst-select-demo{position:relative!important}
html body.yanolja-system-page #direction .hst-select-demo>div{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
html body.yanolja-system-page #direction .hst-select-demo>div span{
  height:21px!important;padding:0 6px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border:1px solid #bfc1c5!important;border-right:0!important;
  color:#777!important;background:#fff!important;font:400 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-select-demo>div span:last-child{border-right:1px solid #bfc1c5!important}
html body.yanolja-system-page #direction .hst-select-demo>div span.is-selected{border:1.5px solid #004cb6!important;color:#004cb6!important}
html body.yanolja-system-page #direction .hst-select-demo ul{
  position:absolute!important;z-index:3!important;right:0!important;top:20px!important;width:33.33%!important;margin:0!important;padding:3px 0!important;list-style:none!important;
  border:1px solid #bfc1c5!important;background:#fff!important;box-shadow:0 3px 8px rgba(0,0,0,.08)!important
}
html body.yanolja-system-page #direction .hst-select-demo li{
  height:20px!important;padding:0 6px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;color:#777!important;
  font:400 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-select-demo li.is-selected{color:#004cb6!important;font-weight:700!important}
html body.yanolja-system-page #direction .hst-select-demo li.is-disabled{color:#cfcfcf!important}
html body.yanolja-system-page #direction .hst57-layout>.hst-group-demo.is-small{
  grid-column:3!important;grid-row:3!important;width:58%!important;justify-self:start!important
}
html body.yanolja-system-page #direction .hst-pagination-demo{
  grid-column:3!important;grid-row:3!important;justify-self:end!important;width:36%!important;margin-top:0!important
}
html body.yanolja-system-page #direction .hst-page-skeleton{display:grid!important;grid-template-columns:repeat(7,1fr)!important;height:18px!important;margin-bottom:12px!important}
html body.yanolja-system-page #direction .hst-page-skeleton i{border:1px solid #c9c9c9!important;border-right:0!important}
html body.yanolja-system-page #direction .hst-page-skeleton i:last-child{border-right:1px solid #c9c9c9!important}
html body.yanolja-system-page #direction .hst-pagination{display:flex!important;width:100%!important;height:19px!important;margin-top:9px!important}
html body.yanolja-system-page #direction .hst-pagination>*{
  flex:1!important;display:grid!important;place-items:center!important;border:1px solid #c5c5c5!important;border-right:0!important;background:#fff!important;color:#666!important;
  font:400 var(--hst-type-compact)/1 Arial,sans-serif!important
}
html body.yanolja-system-page #direction .hst-pagination>*:last-child{border-right:1px solid #c5c5c5!important}
html body.yanolja-system-page #direction .hst-pagination.is-disabled{opacity:.42!important}

/* p.58 */
html body.yanolja-system-page #direction .hst58-layout{
  position:absolute!important;top:116px!important;left:60px!important;right:60px!important;bottom:60px!important;
  display:grid!important;grid-template-columns:86px minmax(0,.9fr) minmax(0,.9fr) 76px minmax(0,1.18fr)!important;column-gap:34px!important;align-items:start!important;overflow:hidden!important
}
html body.yanolja-system-page #direction .hst58-title{
  color:#111!important;font:700 var(--hst-type-section)/1.15 Arial,var(--hm-font-ko),sans-serif!important;padding-top:3px!important
}
html body.yanolja-system-page #direction .hst58-title.is-area{grid-column:4!important}
html body.yanolja-system-page #direction .hst-field-column{grid-column:2!important}
html body.yanolja-system-page #direction .hst-field-column.is-small{grid-column:3!important}
html body.yanolja-system-page #direction .hst-textarea-column{grid-column:5!important;margin-top:22px!important}
html body.yanolja-system-page #direction .hst-field-state{
  display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;gap:11px!important;align-items:start!important;margin-top:9px!important;
  color:#9a9a9a!important;font:400 var(--hst-type-label)/1.1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-field-column.is-small .hst-field-state{grid-template-columns:46px minmax(0,1fr)!important;margin-top:8px!important}
html body.yanolja-system-page #direction .hst-field-state>span{padding-top:6px!important}
html body.yanolja-system-page #direction .hst-field-control{
  position:relative!important;display:flex!important;align-items:center!important;height:20px!important;padding:0 6px!important;border:1px solid #c5c5c5!important;border-radius:1px!important;background:#fff!important;
  color:#777!important;font:400 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-field-column.is-small .hst-field-control{height:17px!important;font-size:var(--hst-type-compact)!important}
html body.yanolja-system-page #direction .hst-field-control.is-placeholder{color:#c7c7c7!important}
html body.yanolja-system-page #direction .hst-field-control.is-hover,
html body.yanolja-system-page #direction .hst-field-control.is-focused{border-color:#004cb6!important}
html body.yanolja-system-page #direction .hst-field-control.is-focused i{
  display:block!important;width:1px!important;height:11px!important;background:#333!important
}
html body.yanolja-system-page #direction .hst-field-control.is-disabled{background:#f3f3f3!important;color:#c6c6c6!important}
html body.yanolja-system-page #direction .hst-field-control.is-error{border-color:#e12222!important}
html body.yanolja-system-page #direction .hst-field-control.is-confirm{border-color:#55a630!important}
html body.yanolja-system-page #direction .hst-field-state small{
  display:block!important;margin:0 0 4px!important;color:#777!important;font:400 var(--hst-type-compact)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-field-state em{
  display:block!important;margin-top:3px!important;font:400 var(--hst-type-micro)/1.2 Arial,var(--hm-font-ko),sans-serif!important;font-style:normal!important
}
html body.yanolja-system-page #direction .hst-field-state em.is-error{color:#e00000!important}
html body.yanolja-system-page #direction .hst-field-state em.is-confirm{color:#55a630!important}
html body.yanolja-system-page #direction .hst-field-control.is-spin{justify-content:space-between!important}
html body.yanolja-system-page #direction .hst-field-control.is-spin b{
  position:absolute!important;right:0!important;top:0!important;width:16px!important;height:100%!important;display:grid!important;place-items:center!important;border-left:1px solid #c5c5c5!important;
  color:#858585!important;font:400 var(--hst-type-micro)/.65 Arial,sans-serif!important;white-space:pre!important
}
html body.yanolja-system-page #direction .hst-field-select{position:relative!important;color:#777!important;font:400 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important}
html body.yanolja-system-page #direction .hst-field-select>div{
  height:20px!important;padding:0 6px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border:1px solid #bfc1c5!important;background:#fff!important
}
html body.yanolja-system-page #direction .hst-field-column.is-small .hst-field-select>div{height:17px!important;font-size:var(--hst-type-compact)!important}
html body.yanolja-system-page #direction .hst-field-select ul{
  position:absolute!important;z-index:3!important;top:19px!important;left:0!important;right:0!important;margin:0!important;padding:4px 0!important;list-style:none!important;border:1px solid #004cb6!important;background:#fff!important
}
html body.yanolja-system-page #direction .hst-field-column.is-small .hst-field-select ul{top:16px!important}
html body.yanolja-system-page #direction .hst-field-select li{
  height:20px!important;padding:0 6px!important;display:flex!important;align-items:center!important;justify-content:space-between!important
}
html body.yanolja-system-page #direction .hst-field-select li.is-selected{color:#004cb6!important;font-weight:700!important;background:#f3f5fa!important}
html body.yanolja-system-page #direction .hst-field-select li.is-disabled{color:#c9c9c9!important}
html body.yanolja-system-page #direction .hst-textarea-column .hst-field-state{grid-template-columns:54px minmax(0,1fr)!important;margin-top:9px!important}
html body.yanolja-system-page #direction .hst-textarea-control{
  position:relative!important;min-height:36px!important;padding:6px!important;border:1px solid #c5c5c5!important;background:#fff!important;color:#777!important;
  font:400 var(--hst-type-ui)/1.4 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-textarea-control.is-placeholder{color:#c7c7c7!important}
html body.yanolja-system-page #direction .hst-textarea-control.is-hover,
html body.yanolja-system-page #direction .hst-textarea-control.is-focused{border-color:#004cb6!important}
html body.yanolja-system-page #direction .hst-textarea-control.is-focused i{display:block!important;width:1px!important;height:12px!important;background:#333!important}
html body.yanolja-system-page #direction .hst-textarea-control.is-disabled{background:#f3f3f3!important;color:#c7c7c7!important}
html body.yanolja-system-page #direction .hst-textarea-control.is-error{border-color:#e12222!important}
html body.yanolja-system-page #direction .hst-field-state.is-counter>div{position:relative!important}
html body.yanolja-system-page #direction .hst-field-state.is-counter small{margin:3px 0 0!important;text-align:right!important;color:#888!important}

/* p.59 */
html body.yanolja-system-page #direction .hst59-layout{
  position:absolute!important;top:112px!important;left:60px!important;right:60px!important;bottom:60px!important;
  display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:auto minmax(0,1.02fr) minmax(0,.72fr)!important;
  column-gap:25px!important;row-gap:32px!important;align-items:start!important;align-content:start!important;overflow:hidden!important
}
html body.yanolja-system-page #direction .hst-tabs-demo{grid-column:1/8!important}
html body.yanolja-system-page #direction .hst-tabs-demo.is-small{grid-column:8/13!important}
html body.yanolja-system-page #direction .hst-tabs{
  display:grid!important;grid-template-columns:repeat(8,1fr)!important;border-bottom:1px solid #ddd!important
}
html body.yanolja-system-page #direction .hst-tabs-demo.is-small .hst-tabs{grid-template-columns:repeat(7,1fr)!important}
html body.yanolja-system-page #direction .hst-tabs b{
  position:relative!important;height:28px!important;display:grid!important;place-items:center!important;color:#777!important;
  font:400 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-tabs b.is-active{color:#004cb6!important;font-weight:700!important}
html body.yanolja-system-page #direction .hst-tabs b.is-active::after{
  content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:2px!important;background:#004cb6!important
}
html body.yanolja-system-page #direction .hst-tabs b.is-disabled{color:#cfcfcf!important}
html body.yanolja-system-page #direction .hst59-title{
  grid-column:1/2!important;grid-row:2!important;color:#111!important;font:700 10px/1.15 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst59-title.is-choice{grid-column:7/8!important}
html body.yanolja-system-page #direction .hst-datepicker{
  grid-column:2/7!important;grid-row:2!important;border:1px solid #d0d0d0!important;background:#fff!important;box-shadow:0 5px 12px rgba(0,0,0,.15)!important;padding:16px!important
}
html body.yanolja-system-page #direction .hst-calendar-months{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important}
html body.yanolja-system-page #direction .hst-month header{
  height:24px!important;display:grid!important;grid-template-columns:24px 1fr 24px!important;align-items:center!important;text-align:center!important
}
html body.yanolja-system-page #direction .hst-month header strong{grid-column:2!important;color:#444!important;font:600 10px/1 Arial,sans-serif!important}
html body.yanolja-system-page #direction .hst-month header b{color:#7d7d7d!important;font:300 28px/1 Arial,sans-serif!important}
html body.yanolja-system-page #direction .hst-month:nth-child(2) header b{grid-column:3!important}
html body.yanolja-system-page #direction .hst-week,
html body.yanolja-system-page #direction .hst-days{
  display:grid!important;grid-template-columns:repeat(7,1fr)!important;text-align:center!important
}
html body.yanolja-system-page #direction .hst-week{margin-top:9px!important;border-bottom:1px solid #ddd!important}
html body.yanolja-system-page #direction .hst-week span{
  height:20px!important;color:#666!important;font:400 var(--hst-type-ui)/1 Arial,sans-serif!important
}
html body.yanolja-system-page #direction .hst-week span.is-sun,
html body.yanolja-system-page #direction .hst-days span.is-sun{color:#e00000!important}
html body.yanolja-system-page #direction .hst-days span{
  height:24px!important;display:grid!important;place-items:center!important;border-bottom:1px solid #e4e4e4!important;color:#666!important;font:400 8px/1 Arial,sans-serif!important
}
html body.yanolja-system-page #direction .hst-days span.is-selected{background:#004cb6!important;color:#fff!important}
html body.yanolja-system-page #direction .hst-days span.is-soft{background:#f0f1f4!important}
html body.yanolja-system-page #direction .hst-choice-demo{
  grid-column:8/13!important;grid-row:2!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:38px!important;padding-left:20px!important
}
html body.yanolja-system-page #direction .hst-choice-column h5{border:0!important;padding:0!important;margin:0 0 12px!important}
html body.yanolja-system-page #direction .hst-choice-column>div{
  height:23px!important;display:grid!important;grid-template-columns:24px 1fr!important;align-items:center!important;color:#8b8b8b!important;font:400 8px/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-check,
html body.yanolja-system-page #direction .hst-radio{
  width:14px!important;height:14px!important;display:grid!important;place-items:center!important;border:1px solid #777!important;background:#fff!important;color:#fff!important;
  font:700 9px/1 Arial,sans-serif!important;font-style:normal!important
}
html body.yanolja-system-page #direction .hst-radio{border-radius:50%!important}
html body.yanolja-system-page #direction .hst-check.is-hover,
html body.yanolja-system-page #direction .hst-radio.is-hover{border:2px solid #004cb6!important}
html body.yanolja-system-page #direction .hst-check.is-selected{border-color:#004cb6!important;background:#004cb6!important}
html body.yanolja-system-page #direction .hst-check.is-indeterminate{border-color:#004cb6!important;color:#004cb6!important;background:#fff!important}
html body.yanolja-system-page #direction .hst-radio.is-selected{border:4px solid #004cb6!important}
html body.yanolja-system-page #direction .hst-check.is-disabled,
html body.yanolja-system-page #direction .hst-radio.is-disabled{border-color:#c9c9c9!important;background:#efefef!important;color:#fff!important}
html body.yanolja-system-page #direction .hst-tooltip-demo{grid-row:3!important}
html body.yanolja-system-page #direction .hst-tooltip-demo.is-left{grid-column:1/4!important}
html body.yanolja-system-page #direction .hst-tooltip-demo.is-right{grid-column:4/7!important}
html body.yanolja-system-page #direction .hst-tooltip-demo.is-center{grid-column:7/10!important}
html body.yanolja-system-page #direction .hst-tooltip-demo.is-title{grid-column:10/13!important}
html body.yanolja-system-page #direction .hst-tooltip-demo h5{margin-bottom:10px!important}
html body.yanolja-system-page #direction .hst-tooltip-demo h5.is-error-label{margin-top:12px!important}
html body.yanolja-system-page #direction .hst-tip{
  position:relative!important;min-height:36px!important;margin:0 0 16px!important;padding:8px 10px!important;background:#008ad4!important;color:#fff!important;
  font:400 var(--hst-type-compact)/1.35 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-tip b{display:block!important;margin-bottom:5px!important;font-weight:700!important}
html body.yanolja-system-page #direction .hst-tip::before{
  content:""!important;position:absolute!important;width:0!important;height:0!important;border-left:7px solid transparent!important;border-right:7px solid transparent!important
}
html body.yanolja-system-page #direction .hst-tip.is-top::before{top:-7px!important;border-bottom:8px solid #008ad4!important}
html body.yanolja-system-page #direction .hst-tip.is-bottom::before{bottom:-7px!important;border-top:8px solid #008ad4!important}
html body.yanolja-system-page #direction .hst-tip.is-left::before{left:7px!important}
html body.yanolja-system-page #direction .hst-tip.is-right::before{right:7px!important}
html body.yanolja-system-page #direction .hst-tip.is-center::before{left:calc(50% - 7px)!important}
html body.yanolja-system-page #direction .hst-tip.is-title::before{left:10px!important}
html body.yanolja-system-page #direction .hst-tip.is-error{background:#c60000!important}
html body.yanolja-system-page #direction .hst-tip.is-error::before{border-top-color:#c60000!important;border-bottom-color:#c60000!important}

@media(max-width:900px){
  html body.yanolja-system-page #direction .hst-ds-gallery__nav{width:36px!important;height:36px!important}
  html body.yanolja-system-page #direction .hst-ds-gallery__nav.is-prev{left:8px!important}
  html body.yanolja-system-page #direction .hst-ds-gallery__nav.is-next{right:8px!important}
  html body.yanolja-system-page #direction .hst-ds-gallery__nav span{font-size:30px!important}
  html body.yanolja-system-page #direction .hst-ds-sheet{padding:32px!important}
  html body.yanolja-system-page #direction .hst-ds-sheet__brand{top:32px!important;left:32px!important;font-size:12px!important}
}


html body.yanolja-system-page #brand .aimmo-collaboration-grid.yanolja-answer-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
html body.yanolja-system-page #brand .aimmo-collaboration-grid.yanolja-answer-grid>article{
  aspect-ratio:auto!important;
  min-height:0!important;
}
html body.yanolja-system-page #brand .aimmo-collaboration-grid.yanolja-answer-grid>article .hm-ds-icon{
  position:static!important;
  display:block!important;
  margin:100px 0 0 auto!important;
}

html body.yanolja-system-page #journey .yanolja-usability-row--type{
  min-height:420px!important;
}
html body.yanolja-system-page #journey .yanolja-type-legibility{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  overflow:visible!important;
  background:#fff!important;
}
html body.yanolja-system-page #journey .yanolja-type-legibility img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
html body.yanolja-system-page #journey .yanolja-type-legibility::after{
  display:none!important;
  content:none!important;
}

/* 03.3 expandable evidence — uses the shared media-gallery/lightbox contract. */
html body.yanolja-system-page #journey .yanolja-expand-gallery{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
}
html body.yanolja-system-page #journey .yanolja-expand-gallery .hm-ds-media-gallery__item{
  width:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  margin:0!important;
  overflow:hidden!important;
  background:#fff!important;
}
html body.yanolja-system-page #journey .yanolja-expand-gallery .hm-ds-media-gallery__item::after{
  display:none!important;
  content:none!important;
}
html body.yanolja-system-page #journey .yanolja-expand-gallery .hm-ds-media-gallery__item>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}

/* p.60 — additional components using the same HST page frame. */
html body.yanolja-system-page #direction .hst60-layout{
  position:absolute!important;
  top:116px!important;
  left:60px!important;
  right:60px!important;
  bottom:60px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  column-gap:42px!important;
  row-gap:36px!important;
  align-items:stretch!important;
  overflow:hidden!important
}
html body.yanolja-system-page #direction .hst60-demo{
  min-width:0!important;
  padding:0!important
}
html body.yanolja-system-page #direction .hst60-demo h5{
  margin-bottom:18px!important
}
html body.yanolja-system-page #direction .hst60-caption{
  margin-top:12px!important;
  color:#8a8a8a!important;
  font:400 var(--hst-type-label)/1.35 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst60-badge-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important
}
html body.yanolja-system-page #direction .hst60-badge-row span{
  display:inline-grid!important;
  min-width:48px!important;
  height:22px!important;
  place-items:center!important;
  padding:0 9px!important;
  border-radius:11px!important;
  background:#eceff3!important;
  color:#62666d!important;
  font:600 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst60-badge-row .is-info{background:#e8f0ff!important;color:#004cb6!important}
html body.yanolja-system-page #direction .hst60-badge-row .is-success{background:#e8f6e3!important;color:#389100!important}
html body.yanolja-system-page #direction .hst60-badge-row .is-warning{background:#fff1dc!important;color:#b65e00!important}
html body.yanolja-system-page #direction .hst60-badge-row .is-error{background:#fbe5e5!important;color:#b50000!important}
html body.yanolja-system-page #direction .hst60-control-list{
  display:grid!important;
  gap:16px!important
}
html body.yanolja-system-page #direction .hst60-control-list>div{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  color:#777!important;
  font:400 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-switch{
  position:relative!important;
  display:block!important;
  width:36px!important;
  height:18px!important;
  border-radius:10px!important;
  background:#cfd3d8!important
}
html body.yanolja-system-page #direction .hst-switch::after{
  content:""!important;
  position:absolute!important;
  top:2px!important;
  left:2px!important;
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 1px 4px rgba(0,0,0,.18)!important
}
html body.yanolja-system-page #direction .hst-switch.is-on{background:#004cb6!important}
html body.yanolja-system-page #direction .hst-switch.is-on::after{left:20px!important}
html body.yanolja-system-page #direction .hst-switch.is-disabled{opacity:.42!important}
html body.yanolja-system-page #direction .hst-progress{
  position:relative!important;
  height:6px!important;
  margin:28px 0 0!important;
  background:#e6e8eb!important
}
html body.yanolja-system-page #direction .hst-progress i{
  display:block!important;
  height:100%!important;
  background:#004cb6!important
}
html body.yanolja-system-page #direction .hst-slider{
  position:relative!important;
  height:22px!important;
  margin-top:32px!important
}
html body.yanolja-system-page #direction .hst-slider::before{
  content:""!important;
  position:absolute!important;
  top:10px!important;
  left:0!important;
  right:0!important;
  height:2px!important;
  background:#d5d8dc!important
}
html body.yanolja-system-page #direction .hst-slider i{
  position:absolute!important;
  top:10px!important;
  left:0!important;
  width:62%!important;
  height:2px!important;
  background:#004cb6!important
}
html body.yanolja-system-page #direction .hst-slider b{
  position:absolute!important;
  top:4px!important;
  left:60%!important;
  width:14px!important;
  height:14px!important;
  border:2px solid #004cb6!important;
  border-radius:50%!important;
  background:#fff!important
}
html body.yanolja-system-page #direction .hst60-alerts{
  display:block!important
}
html body.yanolja-system-page #direction .hst-alert{
  display:grid!important;
  grid-template-columns:46px 1fr!important;
  gap:12px!important;
  align-items:center!important;
  min-height:36px!important;
  margin-top:10px!important;
  padding:9px 12px!important;
  border-left:3px solid #004cb6!important;
  background:#f4f7fc!important;
  color:#666!important;
  font:400 var(--hst-type-ui)/1.35 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-alert b{color:#004cb6!important;font-weight:700!important}
html body.yanolja-system-page #direction .hst-alert.is-success{border-left-color:#389100!important;background:#f1f8ee!important}
html body.yanolja-system-page #direction .hst-alert.is-success b{color:#389100!important}
html body.yanolja-system-page #direction .hst-alert.is-error{border-left-color:#b50000!important;background:#fbefef!important}
html body.yanolja-system-page #direction .hst-alert.is-error b{color:#b50000!important}
html body.yanolja-system-page #direction .hst-modal-card{
  width:88%!important;
  margin:10px auto 0!important;
  padding:20px!important;
  border:1px solid #d0d3d7!important;
  background:#fff!important;
  box-shadow:0 10px 26px rgba(0,0,0,.12)!important
}
html body.yanolja-system-page #direction .hst-modal-card>b{
  display:block!important;
  color:#222!important;
  font:700 var(--hst-type-section)/1.3 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-modal-card>p{
  margin:10px 0 20px!important;
  color:#777!important;
  font:400 var(--hst-type-ui)/1.5 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-modal-card>div{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important
}
html body.yanolja-system-page #direction .hst-modal-card i{
  display:grid!important;
  height:24px!important;
  place-items:center!important;
  border:1px solid #c6c9ce!important;
  color:#666!important;
  font:600 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important;
  font-style:normal!important
}
html body.yanolja-system-page #direction .hst-modal-card i.is-primary{
  border-color:#004cb6!important;
  background:#004cb6!important;
  color:#fff!important
}
html body.yanolja-system-page #direction .hst-mini-table{
  width:100%!important;
  margin-top:10px!important;
  border-top:1px solid #aeb3b9!important
}
html body.yanolja-system-page #direction .hst-mini-table>div{
  display:grid!important;
  grid-template-columns:1fr .9fr .8fr!important;
  min-height:32px!important;
  align-items:center!important;
  border-bottom:1px solid #e0e2e5!important;
  color:#666!important;
  font:400 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-mini-table .is-head{
  background:#f5f6f8!important;
  color:#444!important;
  font-weight:700!important
}
html body.yanolja-system-page #direction .hst-mini-table span{
  padding:0 10px!important
}
html body.yanolja-system-page #direction .hst-mini-table .is-blue{color:#004cb6!important;font-weight:700!important}
html body.yanolja-system-page #direction .hst-mini-table .is-green{color:#389100!important;font-weight:700!important}

/* 04.3 six-step result flow. */
html body.yanolja-system-page #direction .yanolja-lead-flow{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px 28px!important;
  width:100%!important
}
html body.yanolja-system-page #direction .yanolja-lead-step{
  min-height:220px!important;
  padding:22px 0 24px!important;
  background:transparent!important
}
html body.yanolja-system-page #direction .yanolja-lead-step strong{
  display:block!important;
  margin-top:24px!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.22!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important
}
html body.yanolja-system-page #direction .yanolja-lead-step p{
  margin:12px 0 0!important;
  max-width:30ch!important;
  color:var(--hm-description-color)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:12px!important;
  font-weight:300!important;
  line-height:1.5!important;
  word-break:keep-all!important
}
html body.yanolja-system-page #direction .yanolja-lead-step:nth-child(6){
  border-top-color:var(--hm-blue)!important
}
@media(max-width:780px){
  html body.yanolja-system-page #direction .yanolja-lead-flow{
    grid-template-columns:1fr!important
  }
}

/* 2026-09-19 — Yanolja field/product gallery refinement v9. */

/* 01.3 — three field images, 4s autoplay. Cards remain the shared TEAM layout. */
html body.yanolja-system-page #brand .yanolja-field-gallery{
  position:relative!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
  background:#000!important
}
html body.yanolja-system-page #brand .yanolja-field-gallery__viewport{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important
}
html body.yanolja-system-page #brand .yanolja-field-gallery__track{
  display:flex!important;
  width:100%!important;
  height:100%!important;
  transform:translate3d(0,0,0);
  transition:transform .58s cubic-bezier(.22,.61,.36,1)!important;
  will-change:transform
}
html body.yanolja-system-page #brand .yanolja-field-gallery__track.is-no-transition{
  transition:none!important
}
html body.yanolja-system-page #brand .yanolja-field-gallery__slide{
  position:relative!important;
  flex:0 0 100%!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important
}
html body.yanolja-system-page #brand .yanolja-field-gallery__slide>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important
}

/* 03.2 — right-side copy sits on the bottom baseline of its paired visual. */
html body.yanolja-system-page #journey .yanolja-blue-access__research,
html body.yanolja-system-page #journey .yanolja-vision-copy{
  justify-content:flex-end!important;
  padding-top:28px!important;
  padding-bottom:0!important
}

/* 04.1 / 04.2 — shared numeric gallery pagination. */
html body.yanolja-system-page #direction .hst-ds-gallery__status{
  position:absolute!important;
  z-index:9!important;
  top:22px!important;
  right:24px!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:rgba(0,0,0,.60)!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  mix-blend-mode:normal!important;
  pointer-events:none!important
}
html body.yanolja-system-page #direction .hst-product-gallery .hst-ds-gallery__status{
  color:#fff!important;
  opacity:.86!important;
  mix-blend-mode:difference!important
}

/* 04.2 — source-position product gallery.
   Images are shown at their authored position/ratio with no translate, scale or crop. */
html body.yanolja-system-page #direction .hst-product-gallery{
  position:relative!important;
  width:100%!important;
  overflow:visible!important;
  background:#fff!important
}
html body.yanolja-system-page #direction .hst-product-gallery .hst-ds-gallery__viewport{
  aspect-ratio:16/9!important;
  background:#fff!important
}
html body.yanolja-system-page #direction .hst-product-gallery__slide{
  position:relative!important;
  flex:0 0 100%!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#fff!important
}
html body.yanolja-system-page #direction .hst-product-gallery__slide>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#fff!important
}

/* 04.1 p.60 — denser, hotel/front-desk oriented component inventory. */
html body.yanolja-system-page #direction .hst60-layout{
  position:absolute!important;
  top:112px!important;
  left:60px!important;
  right:60px!important;
  bottom:60px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  column-gap:34px!important;
  row-gap:24px!important;
  align-items:start!important;
  align-content:stretch!important;
  overflow:hidden!important
}
html body.yanolja-system-page #direction .hst60-demo{
  min-width:0!important;
  min-height:0!important;
  padding:0!important
}
html body.yanolja-system-page #direction .hst60-demo h5{
  margin:0 0 10px!important;
  padding:0 0 7px!important;
  border-bottom:1px solid #d8d8d8!important;
  color:#111!important;
  font:700 var(--hst-type-section)/1.1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst60-caption{
  margin-top:7px!important;
  color:#8b8b8b!important;
  font:400 var(--hst-type-micro)/1.25 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst60-badge-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important
}
html body.yanolja-system-page #direction .hst60-badge-row span{
  display:inline-grid!important;
  min-width:42px!important;
  height:18px!important;
  place-items:center!important;
  padding:0 7px!important;
  border-radius:9px!important;
  background:#eceff3!important;
  color:#62666d!important;
  font:600 var(--hst-type-compact)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst60-badge-row .is-info{background:#e8f0ff!important;color:#004cb6!important}
html body.yanolja-system-page #direction .hst60-badge-row .is-success{background:#e8f6e3!important;color:#389100!important}
html body.yanolja-system-page #direction .hst60-badge-row .is-warning{background:#fff1dc!important;color:#b65e00!important}
html body.yanolja-system-page #direction .hst60-badge-row .is-error{background:#fbe5e5!important;color:#b50000!important}

html body.yanolja-system-page #direction .hst-room-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:6px!important
}
html body.yanolja-system-page #direction .hst-room-grid i{
  display:block!important;
  min-height:36px!important;
  padding:6px!important;
  border-top:2px solid #aab0b7!important;
  background:#f8f8f8!important;
  font-style:normal!important
}
html body.yanolja-system-page #direction .hst-room-grid i.is-clean{border-top-color:#389100!important}
html body.yanolja-system-page #direction .hst-room-grid i.is-service{border-top-color:#e47500!important}
html body.yanolja-system-page #direction .hst-room-grid i.is-vip{border-top-color:#004cb6!important}
html body.yanolja-system-page #direction .hst-room-grid b{
  display:block!important;
  color:#333!important;
  font:700 var(--hst-type-ui)/1 Arial,sans-serif!important
}
html body.yanolja-system-page #direction .hst-room-grid span{
  display:block!important;
  margin-top:4px!important;
  color:#898989!important;
  font:400 var(--hst-type-micro)/1 Arial,var(--hm-font-ko),sans-serif!important
}

html body.yanolja-system-page #direction .hst-quick-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important
}
html body.yanolja-system-page #direction .hst-quick-actions i{
  display:grid!important;
  height:24px!important;
  place-items:center!important;
  border:1px solid #c6c9ce!important;
  color:#666!important;
  font:600 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important;
  font-style:normal!important
}
html body.yanolja-system-page #direction .hst-quick-actions i.is-primary{
  border-color:#004cb6!important;
  background:#004cb6!important;
  color:#fff!important
}

html body.yanolja-system-page #direction .hst-search-field{
  display:grid!important;
  grid-template-columns:1fr 24px!important;
  height:26px!important;
  align-items:center!important;
  padding-left:8px!important;
  border:1px solid #bfc3c8!important;
  color:#aaa!important;
  font:400 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-search-field b{
  display:grid!important;
  height:100%!important;
  place-items:center!important;
  border-left:1px solid #d7dade!important;
  color:#004cb6!important;
  font-size:12px!important
}
html body.yanolja-system-page #direction .hst-search-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  margin-top:7px!important;
  align-items:center!important
}
html body.yanolja-system-page #direction .hst-search-meta>span{
  color:#999!important;
  font:400 var(--hst-type-micro)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-search-meta i{
  padding:3px 5px!important;
  background:#f2f3f5!important;
  color:#6e7278!important;
  font:400 var(--hst-type-micro)/1 Arial,sans-serif!important;
  font-style:normal!important
}

html body.yanolja-system-page #direction .hst-date-range{
  display:grid!important;
  grid-template-columns:1fr 20px 1fr!important;
  gap:5px!important;
  align-items:center!important
}
html body.yanolja-system-page #direction .hst-date-range>div{
  min-height:48px!important;
  padding:7px!important;
  border:1px solid #d3d5d8!important
}
html body.yanolja-system-page #direction .hst-date-range span{
  display:block!important;
  color:#999!important;
  font:400 var(--hst-type-micro)/1 Arial,sans-serif!important
}
html body.yanolja-system-page #direction .hst-date-range b{
  display:block!important;
  margin-top:6px!important;
  color:#333!important;
  font:700 11px/1 Arial,sans-serif!important
}
html body.yanolja-system-page #direction .hst-date-range small{
  display:block!important;
  margin-top:3px!important;
  color:#777!important;
  font:400 var(--hst-type-micro)/1 Arial,sans-serif!important
}
html body.yanolja-system-page #direction .hst-date-range em{
  color:#999!important;
  text-align:center!important;
  font:400 10px/1 Arial,sans-serif!important;
  font-style:normal!important
}

html body.yanolja-system-page #direction .hst-task-list{
  display:grid!important;
  gap:4px!important
}
html body.yanolja-system-page #direction .hst-task-list>div{
  display:grid!important;
  grid-template-columns:30px 1fr 40px!important;
  gap:6px!important;
  min-height:23px!important;
  align-items:center!important;
  border-bottom:1px solid #e4e5e7!important;
  color:#666!important;
  font:400 var(--hst-type-ui)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-task-list b{color:#333!important}
html body.yanolja-system-page #direction .hst-task-list i{
  padding:3px 4px!important;
  background:#e8f0ff!important;
  color:#004cb6!important;
  text-align:center!important;
  font-size:var(--hst-type-micro)!important;
  font-style:normal!important
}
html body.yanolja-system-page #direction .hst-task-list i.is-done{background:#e8f6e3!important;color:#389100!important}
html body.yanolja-system-page #direction .hst-task-list i.is-wait{background:#f1f1f1!important;color:#888!important}

html body.yanolja-system-page #direction .hst-payment-card{
  padding:9px!important;
  border:1px solid #d8dade!important;
  background:#fafafa!important
}
html body.yanolja-system-page #direction .hst-payment-card>span{
  display:block!important;
  color:#888!important;
  font:400 var(--hst-type-micro)/1 Arial,var(--hm-font-ko),sans-serif!important
}
html body.yanolja-system-page #direction .hst-payment-card>strong{
  display:block!important;
  margin-top:5px!important;
  color:#222!important;
  font:700 15px/1 Arial,sans-serif!important
}
html body.yanolja-system-page #direction .hst-payment-card>div{
  display:flex!important;
  gap:4px!important;
  margin-top:9px!important
}
html body.yanolja-system-page #direction .hst-payment-card i{
  padding:4px 6px!important;
  border:1px solid #d0d2d5!important;
  color:#777!important;
  font:400 var(--hst-type-micro)/1 Arial,sans-serif!important;
  font-style:normal!important
}
html body.yanolja-system-page #direction .hst-payment-card i.is-selected{
  border-color:#004cb6!important;
  background:#004cb6!important;
  color:#fff!important
}

html body.yanolja-system-page #direction .hst60-alerts .hst-alert{
  min-height:29px!important;
  margin-top:5px!important;
  padding:6px 8px!important;
  grid-template-columns:36px 1fr!important;
  gap:8px!important;
  font-size:var(--hst-type-compact)!important
}
html body.yanolja-system-page #direction .hst60-table-demo .hst-mini-table{
  margin-top:0!important
}
html body.yanolja-system-page #direction .hst60-table-demo .hst-mini-table>div{
  min-height:22px!important;
  font-size:var(--hst-type-compact)!important
}

/* 04.3 — white final divider, 12px numbering, 16px body. */
html body.yanolja-system-page #direction .yanolja-lead-step>span{
  font-size:12px!important
}
html body.yanolja-system-page #direction .yanolja-lead-step p{
  font-size:16px!important;
  line-height:1.5!important;
  max-width:34ch!important
}
html body.yanolja-system-page #direction .yanolja-lead-step:nth-child(6){
  border-top-color:var(--hm-line-default)!important
}

@media(max-width:780px){
  html body.yanolja-system-page #direction .hst-product-gallery__slide{
    padding:24px!important
  }
  html body.yanolja-system-page #direction .hst-ds-gallery__status{
    top:14px!important;
    right:16px!important;
    font-size:10px!important
  }
}

/* 2026-09-19 — Yanolja environment + product family refinement v10. */

/* 03.2 — align COLOR VISION copy baseline with the bottom of the left color-chip stack. */
html body.yanolja-system-page #journey .yanolja-vision-summary{
  align-items:stretch!important
}
html body.yanolja-system-page #journey .yanolja-vision-grid--reframed{
  align-self:stretch!important;
  height:100%!important
}
html body.yanolja-system-page #journey .yanolja-vision-copy{
  align-self:stretch!important;
  min-height:0!important;
  height:auto!important;
  justify-content:flex-end!important;
  padding-top:28px!important;
  padding-bottom:20px!important
}

/* 03.3 / 04 ENVIRONMENT — restore the later HTML/CSS light-vs-low-light demo. */
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-theme-demo{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  min-height:280px!important;
  overflow:hidden!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-theme-sample{
  position:relative!important;
  min-height:280px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:28px!important;
  box-sizing:border-box!important;
  background:#f2f2f2!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-theme-sample.is-dark{
  background:#1d1d1d!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-theme-sample>span{
  position:absolute!important;
  left:18px!important;
  bottom:16px!important;
  color:rgba(0,0,0,.54)!important;
  font:400 10px/1 var(--hm-font-en)!important
}
html body.yanolja-system-page #journey .yanolja-usability-row .yanolja-theme-sample.is-dark>span{
  color:rgba(255,255,255,.66)!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel{
  width:100%!important;
  max-width:280px!important;
  border:1px solid rgba(0,0,0,.10)!important;
  border-radius:4px!important;
  background:#fff!important;
  box-shadow:0 12px 30px rgba(0,0,0,.10)!important;
  overflow:hidden!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__head{
  display:flex!important;
  gap:6px!important;
  align-items:center!important;
  height:34px!important;
  padding:0 12px!important;
  background:#f2f4f8!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__head i{
  display:block!important;
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:#b8bec9!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__body{
  padding:20px!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__body b{
  display:block!important;
  color:#20242c!important;
  font:400 14px/1.2 var(--hm-font-ko)!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__body p{
  margin:8px 0 18px!important;
  color:#707782!important;
  font:300 11px/1.45 var(--hm-font-ko)!important
}
html body.yanolja-system-page #journey .yanolja-theme-panel__body button{
  width:100%!important;
  height:42px!important;
  border:0!important;
  border-radius:4px!important;
  background:#003AA7!important;
  color:#fff!important;
  font:300 13px/1 var(--hm-font-ko)!important
}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel{
  border-color:rgba(255,255,255,.10)!important;
  background:#262626!important;
  box-shadow:0 14px 34px rgba(0,0,0,.34)!important
}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel__head{
  background:#323232!important
}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel__head i{
  background:#6d6d6d!important
}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel__body b{
  color:#fff!important
}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel__body p{
  color:rgba(255,255,255,.58)!important
}
html body.yanolja-system-page #journey .yanolja-theme-sample.is-dark .yanolja-theme-panel__body button{
  background:#174EC0!important
}

/* 2026-09-19 — Yanolja pagination refinement v11. */

/* 04.1 / 04.2 pagination — Averta Light 12px, compact no-space counter. */
html body.yanolja-system-page #direction .hst-ds-gallery__status{
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important
}




/* 01.4 — preserve authored semantic line breaks inside the four principle cards. */
html body.yanolja-system-page #brand .ax-maker-flow--four .ax-maker-step h4 br{
  display:block!important;
}