/* Public page scenes share the scroll assembly language from the design system.
   The complete illustration is the default; supported browsers draw it as it enters. */
.pm .pm-context-label{font-size: var(--fs-small);line-height:1.5;font-weight:550;letter-spacing:.02em;color:inherit;margin-block: var(--space-1) 0}
.pm .hero-copy .pm-context-label{color:var(--palette-on-ink)}
.pm-visual{width:min(100%,760px);min-width:0;margin: var(--gap-section, var(--space-7)) auto 0;color:inherit}
.pm-visual figcaption{font-size: var(--fs-small);font-weight:550;letter-spacing:.02em;margin-bottom: var(--space-4);color:inherit}
.pm-surface{border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius: var(--radius-input);padding: var(--space-6);display:grid;gap: var(--space-3);background:color-mix(in srgb,currentColor 4%,transparent)}
.pm-card{border:1px solid color-mix(in srgb,currentColor 26%,transparent);border-radius: var(--radius-sm);padding: var(--space-4) var(--space-4);display:flex;justify-content:space-between;gap: var(--space-4);align-items:center;min-width:0}
.pm-card b{font-size: var(--fs-body);font-weight:500}
.pm-card span{font-size: var(--fs-small);text-align:right}
.pm-stem{height:1px;width:75%;margin: var(--space-1) auto;background:currentColor;transform-origin:left}
.pm-contexts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap: var(--space-3)}
.pm-contexts .pm-card{display:grid;align-content:center;min-height:74px}
.pm-engine-line{height:30px;display:grid;grid-template-columns:1fr 1fr;gap: var(--space-3)}
.pm-engine-line i{display:block;width:1px;height:100%;background:currentColor;justify-self:center;transform-origin:top}
.pm-engine-result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap: var(--space-3)}
.pm-engine-result span{font-size: var(--fs-small);border-top:1px solid color-mix(in srgb,currentColor 40%,transparent);padding-top: var(--space-3)}
.pm .ai-schema-output.sa-view .ai-schema-result{transform-origin:left}
.pm-flow{padding: var(--gap-section, var(--space-7)) var(--space-5);background:var(--canvas);color:var(--ink)}
.pm-flow-inner{width:min(100%,1140px);margin:auto}
.pm-flow-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
.pm-flow-list li{position:relative;border-top:1px solid var(--rule);padding: var(--space-5) var(--space-3) 0;font-size: var(--fs-h3);font-weight:500}
.pm-flow-list li:first-child{padding-left:0}
.pm-flow-list li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.pm-flow-rule{height:1px;background:var(--ink);transform-origin:left}
.pm #history .tline{position:relative;padding-left: var(--space-4)}
.pm #history .tline::before,.pm #history .tline::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--rule)}
.pm #history .tline::after{background:var(--ink);transform-origin:top}
.pm #history .tline>li::before{content:"";position:absolute;left:-21px;top:22px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.pm #history .tline>li{position:relative}
@media(max-width:700px){
  .pm-contexts{gap: var(--space-2)}
  .pm-card{padding: var(--space-3);flex-wrap:wrap}
  .pm-card span{text-align:left}
  .pm-engine-result{gap: var(--space-2)}
  .pm-flow-list{grid-template-columns:repeat(2,minmax(0,1fr));gap: var(--space-5) 0}
}
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:view()){
    .pm #history .tline::after{animation:sa-draw-y linear both;animation-timeline:view();animation-range:entry 5% cover 75%}
    .pm #history .tline>li,.pm #team .co-person-full img{animation:sa-enter linear both;animation-timeline:view();animation-range:entry 5% cover 25%}
    .pm .pm-flow-list li{animation:sa-enter linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
  }
}

/* The initial viewport is a complete composition. Scroll-linked assembly starts after movement. */
@media(prefers-reduced-motion:no-preference){
  body.pm .pm-first-view,
  body.pm:not(.pm-scrolled) .pm-visual :is(.sa-lit,.sa-lit-x,.sa-lit-y),
  body.pm:not(.pm-scrolled) .ai-schema-output :is(.sa-lit,.sa-lit-x,.sa-lit-y),
  body.pm:not(.pm-scrolled) .pm-flow-list li,
  body.pm:not(.pm-scrolled) .pm-flow-rule{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* 좁은 화면: clamp() 글자 크기를 DS 토큰 두 단계로 나눈 작은 쪽(DS 준수 이관 2026-10-20) */
@media (max-width: 700px) {
  .pm-flow-list li { font-size: var(--fs-body); }
}