/* ABOUT 손그림 여섯 정거장 + 캐릭터 걷기 (about-walk.js 와 한 쌍) */
#about.about-walk .about-camera:before,#about.about-walk .world-canvas,#about.about-walk .studio-object,#about.about-walk .intro-worktable,#about.about-walk .material-pieces{display:none}
/* r16(2026-09-18): 납작한 창에서는 그림을 세로에 맞춰 줄이므로 칸 폭이 화면보다 좁아지고, 그만큼 옆 칸이
   좌우 가장자리로 비쳐 들어온다. 줄어든 폭(--aw-gutter, about-walk-desktop.js 가 넣는다)을 종이색 띠로 덮는다.
   1440×900·1920×1080 처럼 배율이 안 줄어드는 창에서는 값이 0px 이라 아무것도 그리지 않는다. */
#about.about-walk .about-camera:after{content:"";position:absolute;z-index:9;inset:0;pointer-events:none;border-left:var(--aw-gutter,0px) solid var(--about-paper);border-right:var(--aw-gutter,0px) solid var(--about-paper)}
#about.about-walk.is-linear .about-camera:after{display:none}
#about.about-walk .studio-ledge{opacity:0}
#about.about-walk .exit-arrow{display:none}
#about.about-walk .about-topline{visibility:hidden}
#about.about-walk .studio-station:before{display:none}   /* 글 위의 짧은 올리브색 줄도 숨김 */   /* 위쪽 'TVA / DESIGN STUDIO'·'Ideas, spaces…' 글과 가로줄 숨김(사장님 지시 09-10) */
#about.about-walk .about-walk__note{position:absolute;z-index:7;left:0;top:0;display:block;max-width:none;pointer-events:none}
#about.about-walk .studio-host.is-turning-back>img{animation:none}
#about.about-walk .studio-host.is-turning-front>img{animation:none}


#about.about-walk .studio-host.is-hopping{animation:none}
@keyframes aw-hop{0%,58%,100%{transform:translateY(0) }62%{transform:translateY(0) }74%{transform:translateY(-8%) }86%{transform:translateY(0) }92%{transform:translateY(0) }}
@media(prefers-reduced-motion:reduce){#about.about-walk .studio-host.is-hopping,#about.about-walk .studio-host.is-turning-back>img,#about.about-walk .studio-host.is-turning-front>img,#about.about-walk .studio-host[data-pose^="process"]>img{animation:none}}
#about.about-walk .about-walk__fg{position:absolute;z-index:9;left:0;top:0;display:block;max-width:none;pointer-events:none;will-change:transform}
#about.about-walk .about-walk__product-layer{position:absolute;left:0;top:0;display:block;max-width:none;pointer-events:none;will-change:transform}
#about.about-walk .about-walk__product-erase{z-index:2}
#about.about-walk .about-walk__product-fixes{z-index:10}
#about.about-walk .about-walk__scene-back{position:absolute;z-index:2;left:0;top:0;background:#fff;pointer-events:none;will-change:transform}
#about.about-walk .about-walk__scene{position:absolute;z-index:3;left:0;top:0;display:block;max-width:none;pointer-events:none;will-change:transform;user-select:none}
#about.about-walk .about-walk__poster{position:absolute;z-index:4;left:0;top:0;display:block;max-width:none;pointer-events:none;transform-origin:50% 50%;filter:drop-shadow(1px 2px 1px #17192335);will-change:transform;user-select:none}
#about.about-walk .about-walk__strip{position:absolute;z-index:1;left:0;top:0;display:block;max-width:none;pointer-events:none;will-change:transform;user-select:none}
#about.about-walk .station-intro{padding:clamp(170px,24vh,210px) 6vw 160px}
#about.about-walk .station-intro:before{display:block}
#about.about-walk .station-copy{max-width:min(34vw,520px)}
#about.about-walk .station-copy p{max-width:min(30vw,420px)}
#about.about-walk .station-copy .service-en{margin-top:8px;color:var(--about-muted);font:13px/1.5 var(--sans)}
#about.about-walk .studio-host{left:0;top:0;bottom:auto;width:0;height:0;transform-origin:50% 100%;transform:none;transition:top .42s cubic-bezier(.3,.9,.4,1)}
#about.about-walk .studio-host>img{position:absolute;bottom:0;left:50%;width:auto;height:100%;max-width:none;transform:translateX(-50%);transform-origin:50% 100%;filter:drop-shadow(3px 6px 2px #17192322)}
#about.about-walk .studio-host .host-shadow{right:12%;left:12%;bottom:-3px;height:6px;transition:opacity .25s}
#about.about-walk .studio-host:is(.is-note-jumping,.is-hopping) .host-shadow{transform:translate3d(var(--aw-shadow-x),var(--aw-shadow-y),0)}
#about.about-walk .studio-host.is-seated .host-shadow{opacity:0}
#about.about-walk.is-linear .about-walk__strip,#about.about-walk.is-linear .about-walk__scene,#about.about-walk.is-linear .about-walk__scene-back,#about.about-walk.is-linear .about-walk__poster{display:none}
/* 2026-09-12 지적 [101] 움직임 줄이기(reduced-motion)·낮은 화면에서 ABOUT 이 세로로 펼쳐질 때(is-linear):
   가로로 흐르던 손그림이 통째로 꺼져 글자만 남고, 앞 소품 두 장만 엉뚱한 자리에 겹쳐 있었다.
   → 정거장마다 띠에서 제 칸 하나만 잘라 정지 화면으로 깔고(about-walk.js buildLinear), 원래 앞 소품은 감춘다. */
#about.about-walk .about-walk__panel{display:none}
#about.about-walk.is-linear .about-walk__fg,#about.about-walk.is-linear .about-walk__product-layer,#about.about-walk.is-linear .about-walk__note{display:none}
#about.about-walk.is-linear .studio-station{overflow:clip}   /* 칸 그림이 위아래 칸으로 새지 않게 */
#about.about-walk.is-linear .about-walk__panel{display:block;position:absolute;z-index:0;right:0;bottom:0;left:0;aspect-ratio:1774/887;overflow:clip;pointer-events:none}
#about.about-walk.is-linear .about-walk__panel img{position:absolute;display:block;max-width:none}
#about.about-walk.is-linear .about-walk__panel .awp-strip{top:0;width:600%;height:auto}
#about.about-walk.is-linear .about-walk__panel .awp-scene{z-index:1;top:0;left:0;width:100%;height:auto}
#about.about-walk.is-linear .about-walk__panel .awp-poster{z-index:2;transform:rotate(var(--awp-poster-rotate));transform-origin:50% 50%;filter:drop-shadow(1px 2px 1px #17192335)}
#about.about-walk.is-linear .about-walk__panel .awp-erase{z-index:1}
#about.about-walk.is-linear .about-walk__panel .awp-figure{z-index:2}
#about.about-walk.is-linear .about-walk__panel .awp-note{z-index:3}
#about.about-walk.is-linear .about-walk__panel .awp-process-logo{z-index:3;transform:rotate(-1.5deg) skewY(1deg);transform-origin:50% 50%}
#about.about-walk.is-linear .about-walk__panel .awp-fg{z-index:4}
#about.about-walk.is-linear .about-walk__panel .awp-fixes{z-index:5}
@media(max-width:760px){#about.about-walk:not(.is-linear) .station-intro{padding:112px 24px 148px}#about.about-walk:not(.is-linear) .station-intro:before{top:88px}#about.about-walk .station-copy{max-width:290px}#about.about-walk .station-copy p{max-width:270px}}
@media(max-width:760px) and (min-height:561px) and (max-height:700px){
  #about.about-walk:not(.is-linear) .studio-station:not(.station-intro){padding-top:104px}
  #about.about-walk:not(.is-linear) .studio-station:not(.station-intro) .station-copy h3{font-size:clamp(28px,8vw,30px)}
  #about.about-walk:not(.is-linear) .studio-controls{min-height:52px}
}

/* Rigid cabinet: arrival changes the floor shadow; case proportions stay fixed. */
#about.about-walk .studio-host.is-landing:not(.is-seated) .host-shadow{animation:aw-land-shadow .26s cubic-bezier(.2,.8,.3,1) 1}
@keyframes aw-land-shadow{0%{opacity:.84}55%{opacity:.64}100%{opacity:.72}}
@media(prefers-reduced-motion:reduce){#about.about-walk .studio-host.is-landing .host-shadow{animation:none}}

/* 낮은 화면(가로로 든 휴대폰)에서 ABOUT 이 줄 배치로 바뀔 때, 칸 위 여백 170px 때문에
   화면(390px)에 아무것도 안 보이고 흰 화면만 나왔다. about-walk.css 의 #about.about-walk
   규칙이 더 세서 about.css 쪽 수정이 안 먹으므로 같은 세기로 여기에 둔다. */
@media (max-height:560px){
  #about.about-walk.is-linear .studio-station{height:auto;min-height:0;padding:16px 6vw 28px}
  #about.about-walk.is-linear .station-intro{height:auto;padding:12px 6vw 24px}
  #about.about-walk.is-linear .station-exit{height:auto;padding:12px 6vw 28px}
  #about.about-walk.is-linear .studio-intro-copy{position:relative;top:auto;left:auto}
  /* 2026-09-12 지적 [12] 가로로 눕힌 폰(844x390·932x430)에서 본문 글이 손그림 위에 얹혀
     'the day it runs.'·'운영' 같은 문장 끝이 안 읽혔다(글자 뒤 배경의 18.6%가 대비 4.5:1 미달, 최악 1.00:1).
     화면에 실제로 나오는 그림은 칸마다 깔리는 .about-walk__panel(그 안의 .awp-strip)이라
     그 칸을 글 오른쪽 끝 다음부터 시작하게 민다 → 왼쪽=글(흰 종이) · 오른쪽=손그림.
     왼쪽 자리 = 칸 좌우 여백 6vw + 글 상자 치우침 2%(=1.76vw) + 글 상자 최대 너비 + 사이 20px.
     글 상자 너비는 그대로 두어 줄바꿈은 변하지 않는다. */
  #about.about-walk.is-linear .about-walk__panel{left:calc(7.8vw + max(290px,min(34vw,520px)) + 20px)}
  /* 같은 [12] — 위 여백을 12px 로 줄인 탓에, 첫 칸의 짧은 올리브색 표시줄(원래 top:138px)이
     본문 한가운데를 가로질렀다(844x390 실측: y=183 에서 x 65~92 의 28px 가 본문 상자 안). 글 바로 위로 올린다. */
  #about.about-walk.is-linear .station-intro:before{top:4px}
}

#about.about-walk .studio-host.is-process{transition:none}
#about.about-walk .studio-host.is-process.is-landing{animation:none}
#about.about-walk .studio-host[data-pose="sit"]>img{
  filter:drop-shadow(3px 6px 2px #17192322);
}

#about.about-walk .studio-host.is-process>img{
  animation:none;
  filter:drop-shadow(3px 6px 2px #17192322);
  transform-origin:50% 100%;
}
@media(prefers-reduced-motion:reduce){
#about.about-walk .studio-host[data-pose="sit"]>img{
  filter:drop-shadow(3px 6px 2px #17192322);
}

#about.about-walk .studio-host.is-process>img{animation:none}}

#about.about-walk .studio-host>.about-process-logo{animation:none}

/* r16(2026-09-18): 그림을 세로에 맞춰 줄이면 좌우에 종이색 여백(--aw-gutter)이 생긴다.
   본문 글이 그 여백에 잠기지 않도록 글 칸의 왼쪽 여백도 같은 값만큼 민다(여백 0 이면 예전 그대로 6vw). */
#about.about-walk:not(.is-linear) .studio-station{padding-left:calc(6vw + var(--aw-gutter,0px))}
#about.about-walk:not(.is-linear) .station-exit{padding-left:calc(8vw + var(--aw-gutter,0px))}

/* Gait canvas includes transparent pixels below the sole. Anchor the contact shadow to the sole, not the canvas edge. */
#about.about-walk .studio-host[data-pose^="gait"] .host-shadow{bottom:calc(var(--aw-gait-floor-gap) - 3px);left:50%;right:auto;width:var(--aw-gait-shadow-width);transform:translateX(-50%)}