/* 목공소 분류 · 배치 미리보기(11-04 W23 — sky_craft_view.js). 고품질UI: 칩 = 글자 폭 알약(skb-chipt) · 판 = 어두운 반투명 + 흰 선 아이콘 · 열림 283 ms(ui-juice 창 열기) */
#ui .skw .skq-chips { position: relative; }
#ui .skw .skq-fbtn { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
#ui .skw .skq-caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; transition: transform .18s; }
#ui .skw .skq-fbtn.open .skq-caret { transform: rotate(180deg) translateY(4px); }
/* 분류 판 = 칩 줄 바로 아래 오른쪽 · 알약 격자(높이 28 · 글자 폭) */
#ui .skw .skl-main { position: relative; }
#ui .skw .skq-fpop { position: absolute; right: 0; top: 30px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 360px; padding: 8px; border-radius: 12px;
  background: rgba(12, 14, 18, .94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 18px rgba(0, 0, 0, .5); animation: skq-pop .283s cubic-bezier(.2, .9, .3, 1.2) both; transform-origin: 100% 0; }
#ui .skw .skq-fpop[hidden] { display: none; }
#ui .skw .skq-f { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); font: 700 11.5px/28px var(--ui-font); white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: transform .18s cubic-bezier(.3, 1.8, .5, 1); }
#ui .skw .skq-f.on { background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; }
#ui .skw .skq-f:active { transform: scale(.92); transition-duration: .06s; }
@keyframes skq-pop { from { opacity: 0; transform: scale(.9) translateY(-4px); } }
/* 카드 눈 = 오른쪽 위 흰 선 아이콘(누름 자리 28 — 카드 누름과 갈림) */
#ui .skw .skq-rc { position: relative; }
#ui .skw .skq-eye { position: absolute; right: 2px; top: 2px; width: 28px; height: 24px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 3px 4px 0 0; color: rgba(255, 255, 255, .7); cursor: pointer; }
#ui .skw .skq-eye .skb-ic { width: 14px; height: 14px; }
#ui .skw .skq-eye:active { color: #fff; transform: scale(.9); }
#ui .skw .skq-rc .skq-cost { margin-right: 14px; }
/* 시연 판 = 창 안 가운데 카드(하늘 + 잔디 섬 조각 위 소품) */
#ui .skw .skq-view { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); border-radius: 12px; }
#ui .skw .skq-view[hidden] { display: none; }
#ui .skw .skq-vcard { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(12, 14, 18, .94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 24px rgba(0, 0, 0, .55); }
#ui .skw .skq-view.in .skq-vcard { animation: skq-pop .283s cubic-bezier(.2, .9, .3, 1.2) both; transform-origin: 50% 60%; }
#ui .skw .skq-vcv { display: block; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
#ui .skw .skq-vinfo { display: flex; flex-direction: column; gap: 2px; }
#ui .skw .skq-vinfo b { font-size: 13px; font-weight: 800; color: #fff; }
#ui .skw .skq-vinfo small { font-size: 10.5px; color: rgba(255, 255, 255, .62); }
#ui .skw .skq-vbtns { display: flex; justify-content: flex-end; gap: 6px; }