.drop-runway{position:relative;height:300svh;max-width:100%;overflow:clip;background:#11140f;scroll-margin-top:0}
.drop-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:clip;isolation:isolate}
.drop-actor{position:absolute;z-index:9;left:50%;top:0;width:clamp(144px,18vw,230px);transform-origin:50% 90.4%;will-change:transform,opacity}.drop-actor>img{display:block;width:100%}

#about{--about-olive:#626b48;--about-olive-soft:#626b481c;--about-kraft:#c5b397;--about-paper:#fff;--about-paper-warm:#f8f4ea;--about-ink:#171923;--about-muted:#55565b;--about-rule:#d6d7db;--about-bench:#20232b;--about-bench-edge:#8e8f95;--about-ledge-height:18px;position:relative;height:450svh;max-width:100%;overflow:clip;background:var(--about-paper);color:var(--about-ink);scroll-margin-top:0}
.about-camera{position:sticky;top:0;height:100svh;min-height:600px;overflow:clip;isolation:isolate;background:var(--about-paper)}.about-camera:before{content:"";position:absolute;z-index:0;top:76%;right:-1%;bottom:calc(14% + var(--about-ledge-height));left:-1%;background:linear-gradient(180deg,#fbf9f4,var(--about-paper-warm));border-top:1px solid #d6d7db66;transform:skewY(-.6deg);pointer-events:none}
.about-topline{position:absolute;z-index:8;top:90px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:start;gap:32px;padding-top:12px;border-top:1px solid var(--about-ink);pointer-events:none}.about-topline h2,.about-topline p{margin:0;background:transparent;box-shadow:none}.about-topline h2{font:500 11px/1.2 var(--mono);letter-spacing:.06em}.about-topline p{max-width:320px;font:15px/1.38 var(--sans);text-wrap:pretty}
.studio-track{position:relative;z-index:3;display:flex;width:max-content;height:100%;will-change:transform}.studio-station{position:relative;flex:0 0 auto;width:80vw;min-width:700px;height:100%;padding:clamp(170px,24vh,210px) 6vw 160px;background:transparent}.studio-station:before{content:"";position:absolute;z-index:0;top:138px;left:6vw;width:42px;height:1px;background:var(--about-olive)}.station-intro{width:100vw;min-width:0;padding:0}.station-intro:before{display:none}.station-space,.station-product{width:82vw}.station-event{width:78vw}.station-exit{width:64vw;min-width:620px;display:flex;flex-direction:column;align-items:start;justify-content:center;padding-left:8vw}
.studio-intro-copy{position:absolute;z-index:5;top:clamp(172px,24vh,214px);left:var(--pad);max-width:430px}.studio-intro-copy h3,.station-copy h3,.station-exit h3{margin:0;color:var(--about-ink);font-family:var(--sans);font-weight:400;letter-spacing:-.055em;text-wrap:balance}.studio-intro-copy h3{max-width:400px;font-size:clamp(42px,5vw,70px);line-height:.96}.studio-intro-copy p{max-width:330px;margin:26px 0 0;font:16px/1.46 var(--sans);text-wrap:pretty}
.intro-worktable{position:absolute;z-index:2;right:3vw;bottom:calc(14% + 30px);width:min(43vw,620px);height:43%;pointer-events:none}.intro-ledger{position:absolute;right:4%;bottom:7%;width:68%;height:74%;padding:22px 24px;border:1px solid var(--about-ink);background:repeating-linear-gradient(180deg,var(--about-paper-warm) 0 31px,var(--about-rule) 31px 32px);box-shadow:12px 15px 0 #17192312;transform:perspective(900px) rotateX(4deg) rotateZ(-4deg);font-family:var(--mono)}.intro-ledger:after{content:"";position:absolute;top:0;bottom:0;left:29%;border-left:1px solid #9a6a5c66}.intro-ledger span,.intro-ledger p{position:relative;z-index:1;margin:0;font-size:11px;line-height:1.7;letter-spacing:.08em}.intro-ledger strong{position:relative;z-index:1;display:block;margin:18px 0 34px;color:var(--about-olive);font:500 clamp(42px,5vw,72px)/.9 var(--sans);letter-spacing:-.07em}.intro-swatch-row{position:absolute;z-index:3;left:0;bottom:3%;display:flex;align-items:end;gap:8px;transform:rotate(3deg)}.intro-swatch-row i{display:block;width:72px;height:45px;border:1px solid var(--about-ink);background:var(--about-paper-warm);box-shadow:4px 5px 0 #17192316}.intro-swatch-row i:nth-child(2){width:58px;height:57px;background:var(--about-kraft)}.intro-swatch-row i:nth-child(3){width:66px;height:37px;background:var(--about-olive)}.intro-swatch-row b{align-self:center;margin-left:4px;font:8px/1 var(--mono);letter-spacing:.08em;white-space:nowrap}.intro-scale{position:absolute;z-index:4;top:1%;right:1%;display:flex;align-items:start;width:76%;height:20px;border-top:1px solid var(--about-ink);justify-content:space-between;font:8px/1 var(--mono)}.intro-scale i{width:1px;height:8px;background:var(--about-ink)}.material-pieces{display:none}
.world-canvas{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;pointer-events:none;opacity:1}.station-copy{position:relative;z-index:5;max-width:330px;transition:opacity 180ms var(--ease)}.studio-station[inert] .station-copy,.station-exit[inert]{opacity:.12}.station-exit{transition:opacity 180ms var(--ease)}.station-copy h3{margin:16px 0 20px;font-size:clamp(40px,4.4vw,66px);line-height:.98}.station-copy p{max-width:285px;margin:0;font:16px/1.46 var(--sans);text-wrap:pretty}.station-copy .service-scope{margin-top:24px;color:var(--about-muted);font:11px/1.8 var(--mono);letter-spacing:.015em}
.studio-object{position:absolute;z-index:7;right:1vw;bottom:calc(14% + 22px);width:39vw;height:51%;padding:0;border:0;background:transparent;color:var(--about-ink);cursor:pointer}.studio-object>:not(.object-instruction){opacity:0;pointer-events:none}.object-instruction{position:absolute;right:8%;bottom:8px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--about-ink);background:var(--about-paper);color:var(--about-ink);font:11px/1 var(--mono);letter-spacing:.06em;white-space:nowrap;transition:color 160ms var(--ease),background-color 160ms var(--ease),transform 160ms var(--ease)}.studio-object:hover .object-instruction,.studio-object:focus-visible .object-instruction,.studio-object[aria-pressed=true] .object-instruction{background:var(--about-olive);color:#fff;transform:translateY(-3px)}.studio-object:focus-visible{outline:0}.studio-object:focus-visible .object-instruction{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--about-ink)}.studio-object[aria-busy=true]{cursor:progress}
.studio-ledge{position:absolute;z-index:4;right:0;bottom:14%;left:0;height:var(--about-ledge-height);background:var(--about-bench);box-shadow:0 5px 0 var(--about-bench-edge);transform:skewY(-.6deg)}.studio-host{position:absolute;z-index:8;left:38%;bottom:calc(14% + 5px);width:clamp(96px,12vw,156px);height:170px;transform-origin:50% 100%;pointer-events:none;will-change:transform}.studio-host>img{position:absolute;bottom:0;left:0;width:100%;filter:drop-shadow(3px 6px 2px #17192322)}.host-shadow{position:absolute;z-index:-1;right:15%;bottom:-2px;left:15%;height:5px;border-radius:50%;background:#17192333}
.station-exit h3{max-width:440px;margin:22px 0;font-size:clamp(48px,5.6vw,82px);line-height:.97}.station-exit p{max-width:360px;margin:0 0 24px;font:16px/1.5 var(--sans)}.station-exit .company-open{margin-top:18px}.exit-arrow{position:absolute;z-index:0;right:8%;bottom:21%;color:var(--about-olive-soft);font:200px/.8 var(--sans);transform:rotate(7deg)}
.studio-controls{position:absolute;z-index:10;right:max(var(--pad),148px);bottom:0;left:var(--pad);min-height:70px;display:flex;align-items:center;gap:18px;border-top:1px solid var(--about-rule);background:var(--about-paper)}.studio-controls button{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--about-ink);font-size:22px;cursor:pointer}.studio-controls button:hover,.studio-controls button:focus-visible{color:var(--about-olive)}.studio-controls button:disabled{color:#a5a6aa;cursor:default}.studio-stop-label{width:92px;font:11px/1 var(--mono);text-transform:uppercase}.studio-progress{flex:1;min-width:30px;height:1px;background:var(--about-rule)}.studio-progress i{display:block;width:100%;height:3px;background:var(--about-ink);transform:scaleX(var(--about,0));transform-origin:left}.studio-scroll-label{font:11px/1 var(--mono);white-space:nowrap}.studio-static-art{display:none}.studio-station[inert] .object-instruction{visibility:hidden}
.about-runway.is-linear{height:auto!important;overflow:visible}.is-linear .about-camera{position:relative;height:auto;min-height:0;overflow:visible}.is-linear .about-camera:before{display:none}.is-linear .about-topline{position:relative;top:auto;left:auto;right:auto;margin:0 var(--pad);padding-top:96px}.is-linear .studio-track{display:block;width:100%;height:auto;transform:none!important}.is-linear .studio-station{width:100%;min-width:0;height:720px;overflow-x:clip}.is-linear .station-intro{height:680px}.is-linear .station-exit{height:620px}.is-linear .studio-controls,.is-linear .studio-ledge,.is-linear .studio-host,.is-linear .world-canvas{display:none}.is-linear .studio-object{right:5%;width:45%;max-width:460px}.is-linear .studio-object>:not(.object-instruction){opacity:0}.is-linear .station-copy{margin-left:2%}.is-linear .station-intro .studio-intro-copy{top:150px}
@media(max-width:760px){#about{height:450svh;--about-ledge-height:14px}.about-camera{min-height:700px}.about-topline{top:76px;left:20px;right:20px;gap:16px}.about-topline h2{max-width:110px;font-size:11px}.about-topline p{max-width:176px;font-size:11px}.studio-station,.station-space,.station-product,.station-event,.station-exit{width:100vw;min-width:0;padding:148px 24px}.studio-station:before{top:124px;left:24px;width:32px}.station-intro{padding:0}.studio-intro-copy{top:146px;left:24px;max-width:300px}.studio-intro-copy h3{max-width:300px;font-size:40px}.studio-intro-copy p{max-width:285px;margin-top:18px;font-size:13px}.intro-worktable{right:-10%;bottom:calc(14% + 24px);width:78vw;height:34%}.intro-ledger{width:76%;height:77%;padding:14px}.intro-ledger strong{margin:10px 0 20px;font-size:42px}.intro-ledger span,.intro-ledger p,.intro-swatch-row b,.intro-scale{font-size:6px}.intro-swatch-row i{width:42px;height:26px}.intro-swatch-row i:nth-child(2){width:34px;height:34px}.intro-swatch-row i:nth-child(3){width:38px;height:22px}.station-copy{max-width:290px}.station-copy h3{margin:12px 0 14px;font-size:36px}.station-copy p{max-width:270px;font-size:13px}.station-copy .service-scope{margin-top:12px;font-size:11px;line-height:1.65}.studio-object{right:-2vw;bottom:calc(14% + 22px);width:72vw;height:34%}.object-instruction{right:8%;bottom:4px;font-size:8px}.studio-host{left:5%;bottom:calc(14% + 5px);width:90px;height:100px}.station-exit{justify-content:start;padding-top:154px}.station-exit h3{max-width:300px;margin:18px 0;font-size:48px}.station-exit p{max-width:275px;font-size:14px}.exit-arrow{right:8%;bottom:20%;font-size:145px}.studio-controls{right:128px;left:12px;min-height:64px;gap:8px}.studio-stop-label{width:56px;font-size:8px}.studio-scroll-label{display:none}.is-linear .about-topline{margin:0 20px;padding-top:80px}.is-linear .studio-station{min-height:700px;height:700px}.is-linear .station-copy{margin-left:0}.is-linear .studio-object{right:2%;width:72%}}
@media(min-width:761px) and (max-height:780px){.studio-station:not(.station-intro):not(.station-exit){padding-top:164px}.station-copy h3{margin:12px 0 16px;font-size:clamp(36px,3.8vw,52px)}.station-copy .service-scope{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.studio-object,.studio-object *,.station-copy,.station-exit{transition:none!important}}
#about:not(.is-linear) .studio-station{width:100vw;min-width:0}
.intro-ledger{right:13%;bottom:5%;width:56%;height:64%;padding:18px 20px}
@media(max-width:760px){.intro-ledger{right:8%;width:68%;height:70%;padding:12px}}

/* 2026-09-10 웹표준(한국어 줄바꿈): 단어 중간에서 끊지 않는다 — '크리에이티브 스/튜디오' 같은 절단 방지 */
.station-copy,.about-topline,.station-copy p,.station-copy h3{word-break:keep-all;overflow-wrap:break-word}
/* 2026-09-10 사장님: ABOUT 아래 조종줄(OUR WORK ··· SCROLL TO EXPLORE) 위의 가는 선 제거 */
.studio-controls{border-top:0}

/* 2026-09-11 사장님: 마지막 칸 문구를 앞 정거장들과 똑같은 구성(번호·영문 제목·한글 두 줄·영문 한 줄·범위)으로. "모든 프로세스가 가능합니다." */
.station-exit{display:block;width:80vw;min-width:700px;height:100%;padding:clamp(170px,24vh,210px) 6vw 160px;align-items:initial;justify-content:initial}
.station-exit .station-copy h3{max-width:none;margin:16px 0 20px;font-size:clamp(40px,4.4vw,66px);line-height:.98;font-weight:inherit;letter-spacing:inherit;font-family:inherit}
.station-exit .station-copy p{max-width:285px;margin:0;font:16px/1.46 var(--sans)}
.station-exit .station-copy .service-scope{margin-top:24px;color:var(--about-muted);font:11px/1.8 var(--mono);letter-spacing:.015em}
.station-exit .exit-actions{display:flex;flex-direction:column;align-items:start;gap:14px;margin-top:28px}
.station-exit .exit-actions .company-open{margin-top:0}
@media(max-width:760px){.station-exit{width:100vw;min-width:0;height:720px;padding:148px 24px}.station-exit .station-copy h3{margin:12px 0 14px;font-size:36px}.station-exit .station-copy p{max-width:270px;font-size:13px}}

/* 2026-09-12 지적 [98] 아이폰 홈 인디케이터(화면 맨 아래 34px 띠)에 정거장 이동 단추(←→)가 24px 잠기던 문제.
   조종줄 아래에 기기가 알려 주는 안전영역만큼 여백을 둔다. 안전영역이 없는 기기·데스크톱에서는 0 이라 지금과 똑같다. */
.studio-controls{padding-bottom:env(safe-area-inset-bottom,0px)}
@media(max-width:760px){.studio-controls{min-height:calc(64px + env(safe-area-inset-bottom,0px))}}
/* 2026-09-12 낮은 화면(높이 560~599px, 세로 펼침 전환선 바로 위)에서 카메라 최소높이 600px 가 화면보다 커서
   조종줄이 통째로 화면 밖으로 밀려 ←→ 단추의 27px 가 잘려 있었다. 화면 바닥 위로 끌어올린다.
   화면이 카메라보다 크면(보통의 경우) 계산이 음수가 되어 max() 가 0 을 골라 지금 동작 그대로다. */
#about:not(.is-linear) .studio-controls{bottom:max(0px,calc(100% - 100svh))}
/* 2026-09-12 지적 [79] 가로 정거장 6개가 inert 라 스크린리더에서 통째로 사라지던 문제에 쓰는 자리.
   화면에는 보이지 않고 스크린리더만 읽는 서비스 전체 목록 블록용(마크업은 index.html 담당이 넣는다). */
.about-sr-summary{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* 낮은 화면(가로로 든 휴대폰 등)에서는 ABOUT 이 줄 배치(is-linear)로 바뀌는데,
   칸 위 여백이 384px 라 화면(390px)에 아무것도 안 보이고 흰 화면만 나왔다.
   여백과 칸 높이를 화면 높이에 맞춰 줄여 첫 정거장이 바로 보이게 한다. */
@media (max-height:560px){
  .is-linear .about-topline{padding-top:12px;gap:16px;align-items:center}
  .is-linear .about-topline p{max-width:none;font-size:12px;line-height:1.35}
  .is-linear .studio-station{height:auto;min-height:0;padding:16px 6vw 28px}
  .is-linear .station-intro{height:auto;padding-top:12px}
  .is-linear .station-exit{height:auto}
  .is-linear .station-copy h3{font-size:clamp(28px,6.2vh,40px)}
  .is-linear .studio-object{width:34%;max-width:280px}
}

/* 2026-09-12 지적 [23] 고대비 모드(forced-colors: active)에서 #about 과 .about-camera 의 배경만
   Canvas(검정)로 강제되는데, 벽 손그림은 <img> 라 제 색을 지킨다. 그래서 그림이 못 채운 위아래가
   검은 띠로 드러나 삽화가 잘려 보였다(1440x900 실측: y=76~165 의 89px · y=886~899 의 14px,
   x=200·x=1200 두 지점 모두). 이 구역만 강제 색 적용에서 빼서 그림과 같은 종이색을 지킨다.
   forced-color-adjust 는 상속되므로 안쪽 글자도 원래 먹색(#171923)으로 흰 종이 위에 남는다 —
   대비 16.6:1 이라 고대비 모드의 취지(높은 대비)도 그대로다. */
@media (forced-colors: active){
  #about{forced-color-adjust:none}
}