/* 층: 3D 공간 0, 투영 선·모델 조작 1, 목록 2, 안내 3, 잡기 표시 4, 탐색 5, 로딩 6. */
body{min-height:100dvh;overflow:hidden;background:#e9edf4;color:var(--ink);-webkit-font-smoothing:antialiased}
.portfolio-workspace{position:fixed;inset:0;overflow:hidden;isolation:isolate}
.portfolio-stage{position:absolute;inset:0;z-index:0}
/* 글자 잡기를 브라우저 스크롤로 취소하지 않는다. 탐색 버튼 영역의 확대 동작은 유지한다. */
.portfolio-stage canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}
.studio-identity{position:absolute;z-index:3;top:30px;left:86px;display:flex;align-items:center;gap:18px;margin:0;font-size:13px;font-weight:600;pointer-events:none}
.studio-identity span{font-size:9px;font-weight:500;letter-spacing:.16em;color:#61708a}
.studio-wallet{display:flex;align-items:center;gap:6px;margin-left:-6px;padding:5px 9px 5px 5px;border:1px solid #b78c3c40;border-radius:20px;background:#fff9e8d9;color:#86631f;font-variant-numeric:tabular-nums}
.studio-wallet i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e6bb5a;color:#634610;font-size:10px;font-weight:750;font-style:normal}
.studio-wallet b{font-size:12px;font-weight:650;line-height:1}
.studio-copy{position:absolute;z-index:1;left:5%;bottom:12%;pointer-events:none;opacity:var(--studio-reveal,0)}
.studio-title{margin:0;font-size:clamp(40px,7vw,96px);line-height:.95;letter-spacing:-.065em;font-weight:750}
.has-spatial-title .studio-title{display:none}
.studio-description{margin:18px 0 0;font-size:13px;line-height:1.8;letter-spacing:-.025em;color:#445570}
/* 읽기 가능한 로딩 상태를 남기며 모델과 셰이더 준비 전 빈 공간이 보이지 않게 한다. */
.scene-loading{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#e9edf4;color:#1b2e4e;transition:opacity .55s ease,visibility .55s}
.scene-loading span{font-size:22px;font-weight:550;letter-spacing:-.05em}
.scene-loading p{margin:0;font-size:11px;color:#526786}
.scene-loading i{width:120px;height:1px;margin-top:12px;background:#4c73b1;transform-origin:left;animation:loading-breathe 1.8s ease-in-out infinite alternate}
.is-scene-loaded .scene-loading,.is-fallback .scene-loading{opacity:0;visibility:hidden;pointer-events:none}
@keyframes loading-breathe{from{transform:scaleX(.3);opacity:.4}to{transform:scaleX(1);opacity:1}}

/* 투명 버튼은 모델 투영에 맞춰 움직인다. 포인터 초점은 숨기고 키보드 초점만 실선으로 제공한다. */
.scene-object-control{position:absolute;top:0;left:0;z-index:1;min-width:44px;min-height:44px;padding:0;border:0;border-radius:18px;background:transparent;color:inherit;cursor:grab;touch-action:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.scene-object-control:disabled{display:none}
.scene-object-control:focus-visible{outline:2px solid #5788c9;outline-offset:6px}
.scene-letter-control{position:absolute;top:0;left:0;z-index:1;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;pointer-events:none}
.scene-letter-control:disabled{display:none}
.scene-letter-control:focus-visible{outline:2px solid #5788c9;outline-offset:3px}
[data-letter-state="dragging"]{cursor:grabbing}
html[data-focus-input="pointer"] :is(button,a,[tabindex]):focus{outline:none}
[data-play-state="dragging"] .scene-object-control{cursor:grabbing}
.hold-indicator{position:fixed;z-index:4;width:36px;height:36px;border:1px solid #497ebe66;border-radius:50%;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}
.hold-indicator span{position:absolute;inset:4px;border:2px solid #6a9bdb;border-top-color:transparent;border-radius:50%;transform:rotate(-90deg) scale(.4)}
.hold-indicator.is-active{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .12s,transform .32s}
.hold-indicator.is-active span{transform:rotate(90deg) scale(1);transition:transform .32s ease-out}
.hold-indicator.is-held{border-color:#5489cf;background:#92bfff22}
.hold-indicator.is-held span{transform:rotate(90deg);border-top-color:#6a9bdb}

/* 되돌리기·정지는 하단 버튼을 늘리지 않고 기존 다시보기와 키보드에 남긴다. */
.studio-footer{position:absolute;z-index:3;left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right));bottom:calc(140px + env(safe-area-inset-bottom));color:#52637b;pointer-events:none;text-align:center}
.studio-footer p{margin:0;font-size:11px;letter-spacing:-.01em;opacity:0}
.is-play-ready .studio-footer p{opacity:1;transition:opacity .6s ease}
.room-controls{position:fixed;z-index:5;top:max(18px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));display:flex;gap:8px;pointer-events:none}
.room-control{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:0;border:1px solid #7f91aa40;border-radius:50%;color:#263b5c;background:#eef2f6ba;pointer-events:auto;transition:background-color .2s ease,transform .2s ease}
.room-control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.room-control:hover{background:#f8fbff}
.room-control:active{transform:scale(.95)}
.room-control:disabled{opacity:.4;cursor:default}
.room-control:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.back-button{margin-right:auto}
.motion-label{display:none;font-size:11px;font-weight:550;white-space:nowrap}
.is-motion-toggle .motion-label{display:block}
.is-motion-toggle svg{display:none}

/* 원형 광원·삼각형 면 없이 폴더에서 목록까지 두 개의 가는 선만 연결한다. */
.presentation-backdrop{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none}
.projection-ray{position:absolute;left:0;top:0;height:1px;background:linear-gradient(90deg,#6593cf70,#6593cf20);transform-origin:left center}

/* 작품은 작은 숫자와 여백으로 정리한다. 거대한 종이·중첩 카드·깜빡이는 스캔은 쓰지 않는다. */
.hologram-panel{--list-inset:20px;position:absolute;top:0;left:0;z-index:2;box-sizing:border-box;color:var(--ink);pointer-events:none;isolation:isolate}
.hologram-panel[hidden],.hologram-list[hidden]{display:none}
.hologram-header{display:flex;align-items:center;height:var(--hologram-header-height);padding:0 var(--list-inset) 12px;border-bottom:1px solid #6b81a750;color:#3f5373;opacity:var(--header-reveal,0)}
.hologram-header h2{margin:0;font-size:12px;font-weight:550;line-height:1.4;letter-spacing:-.015em}
.hologram-list{position:relative;display:grid;grid-template-rows:repeat(4,var(--hologram-row-height));gap:var(--hologram-row-gap);pointer-events:none}
.hologram-item{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;box-sizing:border-box;width:100%;height:var(--hologram-row-height);min-height:44px;padding:8px var(--list-inset);border:0;border-bottom:1px solid #8097b333;border-radius:0;background:#e9edf4cf;color:inherit;font:inherit;line-height:1.4;text-align:left;text-decoration:none;pointer-events:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hologram-item::before{content:"";position:absolute;inset:0;z-index:-1;background:#dce6f3;opacity:0;transform:scaleX(.96);transform-origin:left;transition:opacity .22s ease,transform .35s ease}
.hologram-number{color:#536b90;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.hologram-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:500;letter-spacing:-.035em}
.hologram-status{color:#596d88;font-size:10px;font-weight:400;white-space:nowrap}
.is-presented .hologram-item{pointer-events:auto}
.hologram-item[aria-disabled="true"]{cursor:default}
.hologram-item.is-active::before{opacity:1;transform:scaleX(1)}
.hologram-item:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* 글자는 실크 메시에서 굽히고, 같은 위치의 실제 링크는 터치·키보드 입력과 접근성 의미를 유지한다. */
.has-silk-presentation.is-presented{pointer-events:none;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.has-silk-presentation.is-presented .hologram-header{pointer-events:auto}
.has-silk-presentation .hologram-header,.has-silk-presentation .hologram-item{transform-origin:0 0;border-color:transparent;background:transparent;touch-action:none}
.has-silk-presentation :is(.hologram-header,.hologram-number,.hologram-name,.hologram-status){color:transparent}
.has-silk-presentation .hologram-item::before{display:none}
.has-silk-presentation.is-cloth-held,.has-silk-presentation.is-cloth-held .hologram-item{cursor:grabbing}
.has-silk-presentation .hologram-item[aria-disabled="true"]{cursor:grab}
.is-fallback .portfolio-stage,.is-fallback .presentation-backdrop,.is-fallback .scene-object-control,.is-fallback .studio-footer,.is-fallback .toolbox,.is-fallback .studio-wallet{display:none}
.is-fallback .studio-copy{opacity:1;top:96px;bottom:auto}
.is-fallback .studio-title{display:block;font-size:34px}
.is-fallback .studio-description{display:none}
/* 도구는 장면과 분리한 작은 조작대에 모은다. 잠긴 도구도 비용·순서를 읽고 키보드로 선택할 수 있다. */
.toolbox{position:absolute;z-index:5;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));width:min(690px,calc(100% - 40px));padding:9px 10px 8px;border:1px solid #8297b536;border-radius:19px;background:#f7f9fced;box-shadow:0 10px 35px #253c5810;transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease}
.is-play-ready .toolbox{opacity:1;visibility:visible;pointer-events:auto}
.toolbox-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 7px}
.tool-caption{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#526782;font-size:10px;line-height:1.6}
.tool-reset{position:absolute;right:9px;bottom:10px;display:grid;place-items:center;width:44px;height:61px;padding:3px;border:0;border-radius:11px;background:transparent;color:#3d5b80;font:inherit;font-size:0;cursor:pointer}
.tool-reset::after{content:'↺';font-size:20px}
.tool-reset:hover{background:#e6edf5}
.tool-reset:focus-visible,.tool-slot:focus-visible{outline:2px solid #517dbb;outline-offset:2px}
.tool-slots{display:flex;width:calc(100% - 48px);gap:5px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#8ca1bd55 transparent;padding:2px;touch-action:pan-x}
.tool-slot{position:relative;display:flex;flex:1 0 56px;min-width:0;min-height:61px;align-items:center;flex-direction:column;justify-content:center;gap:2px;padding:4px 2px;border:1px solid transparent;border-radius:11px;background:transparent;color:#283e5e;font:inherit;cursor:pointer;transition:background-color .15s,border-color .15s}
.tool-slot svg{width:25px;height:25px;flex:none}
.tool-name{font-size:9px;line-height:1.3;white-space:nowrap;letter-spacing:-.025em}
.tool-price{font-size:8px;line-height:1.3;color:#627996;font-variant-numeric:tabular-nums}
.tool-slot:hover{background:#e6edf5}
.tool-slot.is-selected{border-color:#608dc282;background:#dfebfa}
.tool-slot.is-selected .tool-price{color:#426cac}
.tool-slot.is-locked svg{opacity:.4;filter:grayscale(.7)}
.tool-slot.is-locked .tool-name{color:#788697}
.tool-slot.is-next{border-color:#b9995840;background:#f4efdf66}
.tool-slot.is-next .tool-price{color:#977136}
.tool-status.is-visible{position:absolute;top:auto;bottom:calc(100% + 8px);left:50%;width:max-content;max-width:calc(100vw - 40px);height:auto;margin:0;padding:8px 12px;border:1px solid #8097b333;border-radius:9px;background:#f7f9fc;color:#3d5372;font-size:11px;line-height:1.5;clip-path:none;white-space:normal;transform:translateX(-50%);pointer-events:none}
/* 포인터 자체를 선택한 장난감으로 바꾼다. 모바일은 누르고 있는 접점에 같은 아이콘을 보여 준다. */
[data-active-tool]:not([data-active-tool="hand"]) :is(.portfolio-stage canvas,.scene-object-control,.hologram-header,.hologram-item){cursor:var(--tool-cursor,crosshair)}
.tool-effects{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.tool-action{position:absolute;width:58px;height:58px;pointer-events:none;filter:drop-shadow(0 3px 4px #263b5c33)}
.tool-action svg{display:block;width:100%;height:100%}
.tool-spark{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none}
.tool-spark.is-electric{width:3px;height:12px;border-radius:1px}
.tool-spark.is-water{width:4px;height:8px;border-radius:50% 50% 60% 60%}
.tool-spark.is-vortex,.tool-spark.is-gravity{width:8px;height:8px;background:transparent!important;border:1px solid #8984cc}
.coin-reward{position:absolute;color:#9b7120;font-size:15px;font-weight:750;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #fff;pointer-events:none}
.tool-touch-cursor{position:fixed;top:0;left:0;z-index:7;pointer-events:none}
.tool-touch-cursor[hidden]{display:none}
@media(max-width:1100px) and (min-aspect-ratio:9/10){.studio-description{font-size:11px}.studio-copy{left:32px;bottom:14%}}
/* 휴대폰은 문구·실크 목록·인물과 폴더 순서로 쌓고 읽기 여백을 확보한다. */
@media(max-aspect-ratio:9/10){
  .studio-identity{top:28px;left:72px;font-size:12px;gap:12px}
  .studio-identity .identity-name{display:none}
  .studio-identity .identity-label{display:block;font-size:8px;letter-spacing:.08em}
  .studio-wallet{padding:4px 7px 4px 4px;gap:4px}
  .studio-wallet b{font-size:11px}
  .studio-copy{left:22px;top:110px;bottom:auto}
  .studio-description{display:none}
  .room-controls{left:16px;right:16px}
  .studio-footer{left:12px;right:12px;bottom:calc(120px + env(safe-area-inset-bottom))}
  .studio-footer p{font-size:9px}
  .toolbox{width:calc(100% - 24px);bottom:calc(10px + env(safe-area-inset-bottom));padding:8px 7px 6px;border-radius:16px}
  .tool-slot{flex:0 0 54px}
  .hologram-item{background:#e9edf4f0}
  .hologram-panel{--list-inset:18px}
  .hologram-name{font-size:16px}
}
@media(max-height:620px){.studio-footer{display:none}}
/* 낮은 세로 화면은 한 줄 도구 띠로 줄여 인물의 다리가 조작대 뒤에 숨지 않게 한다. */
@media(max-height:620px) and (max-aspect-ratio:9/10){
  .toolbox{display:flex;align-items:center;gap:3px;padding:5px;bottom:calc(6px + env(safe-area-inset-bottom))}
  .toolbox-heading{display:contents}
  .tool-caption{display:none}
  .tool-reset{position:static;order:2;width:44px;height:56px;font-size:0}
  .tool-slots{flex:1}
  .tool-slot{min-height:56px;flex-basis:50px}
  .tool-slot svg{width:22px;height:22px}
}
@media(max-height:620px) and (min-aspect-ratio:9/10){.studio-copy{display:none}.studio-identity .identity-name{display:none}.hologram-name{font-size:15px}}
@media(max-width:360px){.hologram-panel{--list-inset:16px}.hologram-item{gap:8px;grid-template-columns:20px minmax(0,1fr) auto}.hologram-name{font-size:15px}}
@media(prefers-color-scheme:dark){
  body,.scene-loading{background:#0b1324;color:#dce6f6}
  .studio-identity span,.studio-description,.studio-footer,.scene-loading p{color:#a5b7d1}
  .room-control{border-color:#adc6ef33;color:#d9e5f7;background:#15233bba}
  .room-control:hover{background:#293f59}
  .hologram-panel{color:#e4eefb}
  .hologram-header{color:#bacbe5;border-color:#7993b74f}
  .hologram-item{border-color:#8eabd02e;background:#0b1324d9}
  .hologram-item::before{background:#223a5b}
  .hologram-number,.hologram-status{color:#afc3e0}
  .hologram-item:focus-visible,.room-control:focus-visible{outline-color:#a6c4ff}
  .studio-wallet{background:#302b20;border-color:#cfa65844;color:#efd084}
  .toolbox{background:#111e31f5;border-color:#6e88ad40;box-shadow:0 10px 35px #0002}
  .tool-caption,.tool-price{color:#a5b7d1}
  .tool-slot,.tool-reset{color:#d0dff3}
  .tool-slot:hover{background:#21324d}
  .tool-reset:hover{background:#21324d}
  .tool-status.is-visible{background:#17263e;color:#d0dff3;border-color:#6e88ad40}
  .tool-slot.is-selected{background:#243c60;border-color:#82a9dc80}
  .tool-slot.is-selected .tool-price{color:#bdd5fa}
  .tool-slot.is-next{background:#4a402b35;border-color:#c0a26740}
  .tool-slot.is-next .tool-price{color:#ddbd78}
  .tool-slot.is-locked .tool-name{color:#92a1b7}
  .coin-reward{color:#f0cc7c;text-shadow:0 1px 4px #0b1324}
}
@media(prefers-reduced-transparency:reduce){.hologram-item{background:#e9edf4}}
@media(prefers-reduced-transparency:reduce) and (prefers-color-scheme:dark){.hologram-item{background:#0b1324}}
@media(prefers-reduced-motion:reduce){.room-control,.hologram-item::before,.scene-loading,.studio-footer p,.toolbox,.tool-slot{transition:none}.scene-loading i{animation:none}}