/* 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}
#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-note-jumping>img,#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:4;left:0;top:0;display:block;max-width:none;pointer-events:none;will-change:transform;user-select:none}
#about.about-walk .about-walk__mobile-panel{position:absolute;z-index:4;left:0;top:0;background-repeat:no-repeat;background-position:20% 0;background-size:600% 100%;pointer-events:none;will-change:transform}
#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.is-travelling{z-index:8;transition:none}
#about.about-walk .studio-host.is-creative-seat-arrival{z-index:10}
#about.about-walk .studio-host.is-creative-seated{clip-path:inset(0 0 var(--aw-creative-seat-occlusion,0px) 0)}
@media(max-width:767px){#about.about-walk .studio-host{transition:none}}
@media(min-width:761px){#about.about-walk .studio-track{z-index:6}}
#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)}
/* 기준 캐릭터(stand.webp)의 따뜻한 베이지·올리브·레드 인상에 맞춘 공통 보정.
   포즈별 원본 조명 차이만 약하게 줄이고, 외곽선과 손그림 질감은 유지한다. */
#about.about-walk .studio-host>img{filter:saturate(.94) brightness(.985) contrast(1.01) 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-note-jumping>img{animation:none;transform-origin:50% 100%}
@keyframes aw-note-reach{0%{transform:translateX(-50%)  rotate(-1.1deg)}42%,68%{transform:translateX(-50%)  rotate(.35deg)}100%{transform:translateX(-50%)  rotate(0)}}
@keyframes aw-note-reach-mobile{0%{transform:translateX(-50%)  rotate(-1.1deg)}38%,72%{transform:translateX(-50%)  rotate(.35deg)}100%{transform:translateX(-50%)  rotate(0)}}
@media(max-width:767px){#about.about-walk .studio-host.is-note-jumping>img{animation-name:aw-note-reach-mobile}}
#about.about-walk .studio-host.is-seated .host-shadow{opacity:0}
#about.about-walk .studio-host.is-seat-arriving .host-shadow{opacity:.72;transform:scaleX(.86)}
#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:767px){#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:767px) 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:saturate(.94) brightness(.985) contrast(1.01) drop-shadow(3px 6px 2px #17192322);
}

#about.about-walk .studio-host.is-process>img{
  animation:none;
  filter:saturate(.94) brightness(.985) contrast(1.01) 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:saturate(.94) brightness(.985) contrast(1.01) 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}

/* r11 — 정거장7(ALL PROCESSES/모든 과정)은 다른 6칸과 달리 손그림 배경(scene)이 없어
   모바일에서 글 아래가 176px 완전 백지로 남았다(검수 12-review-r10.md 4-2절,
   360/390/430 세 비율 모두, 화면이 클수록 최대 34%vh 까지 커짐).
   캐릭터를 키우는 것과는 별개로, 화면 전체를 덮는 은은한 바탕을 깔아 어느 비율에서도
   빈 줄이 남지 않게 한다(`.studio-station:before`는 위에서 mobile 전체에 display:none 처리된
   자리 — station-exit 한 칸만 같은 세기로 다시 켠다. 걷기 로직·속도는 건드리지 않음).
   r12 — 검수(14-review-r11.md)에서 이 배경이 390/430 에서 캐릭터 다리 중간을 가로지르는
   가로선으로 보인다고 잡혔다: 원인은 about.css 의 `.station-exit{height:720px}`(모바일 전용
   고정값, 화면 높이와 무관)이라 `bottom:0`이 그 720px 안에서만 계산됐다. about.css 는 소유
   범위 밖이라 손대지 않고, 대신 이 파일 안에서 `bottom:0` 대신 뷰포트 기준 `height:100svh`를
   써서 그 720px 캡을 우회한다(캐릭터 발 위치를 정하는 JS 의 controlsTop 계산과 별개로,
   패널을 카메라 전체 높이만큼 내려 발밑까지 확실히 덮는다 — station-exit 의 overflow 는
   기본값(visible)이라 720px 를 넘겨도 잘리지 않는다). */
@media(max-width:767px){
  #about.about-walk .station-exit:before{
    display:block;
    content:"";
    position:absolute;
    z-index:1;
    top:0;
    right:0;
    left:0;
    width:auto;
    height:100svh;
    background:radial-gradient(120% 85% at 50% 60%,var(--about-paper-warm) 0%,var(--about-kraft) 100%);
  }
  /* r13 — 정거장7에서 배경이 조작줄 밑까지 깔리며(r12), 조작줄 자체의 불투명 흰 배경이
     그 위에 흰 상자로 도드라져 보였다(검수 없이 사장님 직접 지적). 조작줄은 전체 흰 배경
     이라 그 칸만 투명하게 비우면 뒤 그라디언트가 그대로 비쳐 이어져 보인다. 다른 6칸은
     흰 바탕 그대로라 손대지 않음 — `.station-exit:not([inert])`로 "지금 이 칸이 활성 칸일 때"만
     걸리게 한다(journey.js 가 비활성 칸에 inert 를 붙이는 기존 훅, 새 속성 추가 없음). */
  #about.about-walk .about-camera:has(.station-exit:not([inert])) .studio-controls{
    background:transparent;
  }
}

/* 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%)}