/* 하늘섬 내 섬 짓기 화면(features/skyisle sky_build.js, 2026-10-28) — 고품질UI 규칙(GUI 450 · 알약 28 · 글자 폭 알약 · 어두운 반투명 판 · 결정 = 청록 · 보조 = 반투명 — 전체화면 창 01-popup 알약 값):
   자리 = 아래 가운데, 레벨 · 체력 막대(hud .hp top 398) 바로 위 — 왼쪽 조이스틱 · 오른쪽 공격 · 스킬 칸 · 위 가운데 재료 알약(sky_materials)과 겹치지 않는다.
   연출(ui-juice): 누름 60 ms .92 → 뗄 때 튕김 1.06 · 판 열기 283 ms(아래 6 px · .97 → 1, 스크롤 칸 안이 아니라 넘침 튐 없이) · 말풍선 톡 · 가득 = 붉은 맥동 1047 ms. */
#hud .skb { left: 0; top: 0; width: 100%; height: 450px; pointer-events: none; }
#hud .skb > * { position: absolute; }
#hud .skb img { position: static; image-rendering: pixelated; }
#hud .skb-pill { flex: none; height: 28px; padding: 0 14px; border: 0; border-radius: 999px; pointer-events: auto; touch-action: manipulation; cursor: pointer;
  font: 800 12.5px/28px var(--ui-font); white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  background: rgba(8, 10, 14, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 2px 4px rgba(0, 0, 0, .35);
  transition: transform .18s cubic-bezier(.3, 1.8, .5, 1), filter .15s, opacity .15s; }
#hud .skb-pill:active { transform: scale(.92); transition-duration: .06s; transition-timing-function: ease-out; }
#hud .skb-pill.gold { background: linear-gradient(#83c3bf, #548f8c); box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35); }
#hud .skb-pill.plain { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
/* 놓기 [취소] = 빨강(10-28 사용자 "취소 버튼이 흰색이라서 잘 안보임 빨간색으로") — 밝은 섬 땅 위에 떠 있어 반투명 흰 알약이 묻혔다 */
#hud .skb-pill.red { background: linear-gradient(#e2675b, #a93a32); box-shadow: inset 0 1px rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(80, 10, 6, .5), 0 2px 4px rgba(0, 0, 0, .35); }
#hud .skb-pill.off { filter: grayscale(1); opacity: .45; }
#hud .skb-pill.danger { background: linear-gradient(#a64646, #742c2c); box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 2px 4px rgba(0, 0, 0, .35); }   /* 위험 = 적갈(01-popup .btn.danger) */
/* [건설](10-29 S2 §2-1 — 옛 [땅 넓히기][짓기] 줄 자리) */
#hud .skb-open { left: 50%; top: 360px; transform: translateX(-50%); display: flex; gap: 8px; }
:is(#hud, #ui) .skb-chip { display: inline-flex; align-items: center; gap: 3px; }
:is(#hud, #ui) .skb-chip img { position: static; flex: none; width: 14px; height: 16px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }   /* position static = HUD 공용 #hud img { position: absolute } 끔(건설 카드 재료 칩도 아이콘이 수 위에 겹쳤다 — 건물 말풍선 .skb-bub img 와 같은 원인) */
:is(#hud, #ui) .skb-chip b { font-size: 12.5px; color: #fff; }
:is(#hud, #ui) .skb-chip.lack b { color: #ff8f84; }   /* 모자람 = 붉은 값(S2 §2-2 #e0605a — 어두운 판 위 글자라 한 단 밝게) */
/* 내 섬 = 사냥할 것이 없다 → 자동 사냥 AUTO 띠(58k, 체력 막대 위 y 378)를 숨긴다 — [땅 넓히기][짓기] 줄(360) · 넓히기 판(352~388)이 같은 자리라
   판 뒤로 AUTO 가 비쳤다(10-28 SKY-6 봇 장면). 58k 가 나중에 꽂는 style 의 #hud .ah-band.on 보다 세게(id 둘) */
#hud #hud-screen.skb-home .ah-band { visibility: hidden; }
/* 넓히기 판: 칸 수(또는 안내) · 합계 · [취소] [확정] */
#hud .skb-panel { flex: none; display: flex; align-items: center; gap: 10px; height: 36px; margin: 0 auto; padding: 0 4px 0 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
#hud .skb-bad { font-size: 11px; font-weight: 700; color: #ffb2a6; white-space: nowrap; }
#hud .skb-n { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; }
#hud .skb-cost { display: flex; align-items: center; gap: 8px; }
#hud .skb-cost i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .7); margin-right: -3px; white-space: nowrap; }
#hud .skb-panel .skb-pill { margin-left: -4px; }
#hud .skb-panel .skb-pill.plain { margin-left: 2px; }
#hud .skb-chip > i { font-style: normal; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .6); margin: 0 0 0 -2px; }   /* 보유/필요의 /필요(흐린 흰) — 보유는 b(모자라면 붉게) */
/* 건설 판(10-29 S2 §2-1 · 11-02 UI2 110 → 128 — 카드 64 × 72 · 그림 40 × 33 이 답답): 아래 끝에 붙은 띠 128 = 위 4 + 탭 줄 30 + 카드 줄 90(카드 82 + 누름 튐 자리 4 · 4) + 4. 판 = 검정 62% + 위 1px 빛선(01-popup .popup.full 판 결) · 둥근 모서리 없음.
   열림 = 아래에서 283 ms(고품질UI 창 열기) · 판이 열린 동안 HUD 숨김(재료 알약만 남김 — S2 §4 "[건설] → 판 열림, HUD 숨김") */
#hud .skb-sheet { left: 0; top: 322px; width: 100%; height: 128px; box-sizing: border-box; padding: 4px 12px 0; background: rgba(8, 10, 14, .62); box-shadow: inset 0 1px rgba(255, 255, 255, .12);
  pointer-events: auto; touch-action: none; animation: skb-up .283s cubic-bezier(.2, .8, .3, 1) both; }
#hud #hud-screen.skb-sheet-on > :not(.skb, .skm-bar) { visibility: hidden; }
#hud .skb-head { display: flex; align-items: center; gap: 12px; height: 30px; }
/* 탭 = 어두운 알약 줄 + 고른 탭만 베이지 알약(고품질UI 탭 줄) · 높이 26 · 최소 72 · 여백 14 */
#hud .skb-tabs { flex: none; display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
#hud .skb-tab { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 72px; height: 26px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .78); cursor: pointer; touch-action: manipulation;
  font: 800 12px/26px var(--ui-font); white-space: nowrap; transition: transform .18s cubic-bezier(.3, 1.8, .5, 1), background .15s; }
#hud .skb-tab.on { background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; }
#hud .skb-tab:active { transform: scale(.92); transition-duration: .06s; }
/* 칩 = 글자 폭 + 여백 12 · 고른 칩 = 금 밑줄(경매장 탭 10-19) */
#hud .skb-chips { display: flex; gap: 2px; }
#hud .skb-chipt { flex: none; height: 24px; padding: 0 12px; border: 0; background: none; color: rgba(255, 255, 255, .66); cursor: pointer; touch-action: manipulation;
  font: 700 11px/24px var(--ui-font); white-space: nowrap; box-shadow: inset 0 -2px transparent; transition: color .15s, box-shadow .15s; }
#hud .skb-chipt.on { color: #fff; box-shadow: inset 0 -2px #d9b86a; }
/* 닫기 = 상자 없는 흰 선 ✕ 28(흰 선 아이콘 시트 close) */
#hud .skb-x { flex: none; position: relative; margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; cursor: pointer; touch-action: manipulation; }
#hud .skb-x:active { background: rgba(255, 255, 255, .12); }
#hud .skb-x::before { content: ""; position: absolute; inset: 6px; background: #fff; -webkit-mask: var(--ic-close) center / contain no-repeat; mask: var(--ic-close) center / contain no-repeat; }
/* 카드 줄 = 가로 스크롤(touch_scroll) · 카드 72 × 82 · 간격 6 · 넓은 화면에서도 카드는 그대로(보이는 장 수만 는다) */
#hud .skb-row { display: flex; align-items: center; gap: 6px; height: 90px; padding: 0 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#hud .skb-row::-webkit-scrollbar { display: none; }
#hud .skb-card { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 72px; height: 82px; box-sizing: border-box; padding: 5px 2px 0; border: 0; border-radius: 7px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font-family: var(--ui-font); cursor: pointer; touch-action: manipulation;
  transition: transform .18s cubic-bezier(.3, 1.45, .5, 1), background .15s; }   /* 뗄 때 넘침 1.04 안쪽(줄 위아래 2 px 안 — 고품질UI 함정 10-24 잘림) */
#hud .skb-card:active { transform: scale(.95); transition-duration: .06s; transition-timing-function: ease-out; }
#hud .skb-card .skb-thumb { width: 54px; height: 45px; image-rendering: auto; flex: none; }   /* 그림 144 × 120 → 54 × 45 매끈한 축소(11-02 UI2 — pixelated 0.28 배 최근접은 깨져 보였다) */
#hud .skb-card .skb-name { max-width: 68px; overflow: hidden; font-size: 10px; font-weight: 800; line-height: 12px; white-space: nowrap; }
#hud .skb-card .skb-costs { display: flex; gap: 3px; }
#hud .skb-card .skb-chip { gap: 1px; }
#hud .skb-card .skb-chip img { width: 11px; height: 12px; }
#hud .skb-card .skb-chip b { font-size: 9px; }
#hud .skb-card .skb-sub { font-size: 9px; line-height: 11px; color: rgba(255, 255, 255, .68); white-space: nowrap; }
#hud .skb-card .skb-sub.why { color: #cfc9bb; }
#hud .skb-have { position: absolute; right: 4px; top: 3px; font: 700 9px/1 var(--ui-font); font-style: normal; color: rgba(255, 255, 255, .7); }
/* 잠김 = 카드 판 어둡게 + 썸네일 어둡게(실루엣은 보임) + 가운데 자물쇠 원판 + 이유 한 줄 · 고름 = 크기 그대로 금 테 2px 맥박 1047 ms + 옅은 금빛 바탕 + 이름 금빛(S2 §2-2 · 11-02 UI2 흰 테 → 금 테, 고른 카드가 바로 읽히게) */
#hud .skb-card.lock { background: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
#hud .skb-card.lock .skb-thumb { filter: grayscale(.85) brightness(.5); opacity: .8; }   /* 실루엣은 읽히되 지을 수 있는 카드와 한눈에 갈림(옛 grayscale(1) · .3 = 회색 덩어리) */
#hud .skb-card.lock .skb-name { color: rgba(255, 255, 255, .5); }
#hud .skb-card.lock .skb-have { color: rgba(255, 255, 255, .4); }
#hud .skb-card.lock::after { content: ""; position: absolute; left: 50%; top: 15px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: rgba(0, 0, 0, .55); }   /* 자물쇠 원판 24(GUI 450 아이콘 칸) */
#hud .skb-card.lock::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 20px; width: 14px; height: 14px; margin-left: -7px; background: #fff; -webkit-mask: var(--ic-lock) center / contain no-repeat; mask: var(--ic-lock) center / contain no-repeat; }   /* 흰 선 자물쇠 14 */
#hud .skb-card.sel { background: rgba(241, 213, 138, .14); animation: skb-sel 1.047s ease-in-out infinite alternate; }
#hud .skb-card.sel .skb-name { color: #f1d58a; }
#hud .skb-row > .in { animation: skb-card-in .42s cubic-bezier(.2, .8, .3, 1) both; }
#hud .skb-row > .skb-card.sel.in { animation: skb-card-in .42s cubic-bezier(.2, .8, .3, 1) both, skb-sel 1.047s ease-in-out .42s infinite alternate; }
/* 확장 · 철거 안내 카드(글자 폭) · 빈 탭 */
#hud .skb-info { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 5px; height: 82px; box-sizing: border-box; padding: 0 12px; border-radius: 6px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font-family: var(--ui-font); }
#hud .skb-info .skb-sub { font-size: 10.5px; color: rgba(255, 255, 255, .68); white-space: nowrap; }
#hud .skb-info .skb-name { font-size: 12.5px; white-space: nowrap; }
#hud .skb-hint { flex: none; margin: 0 6px; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .72); white-space: nowrap; }
#hud .skb-empty { flex: none; margin: 0 auto; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .55); white-space: nowrap; }
/* 철거 건물 = 머리 위 흰 선 ✕ 24(붉은 원 · S2 §2-7) */
#hud .skb-rms { left: 0; top: 0; width: 100%; height: 100%; }
#hud .skb-rm { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(196, 60, 52, .94); cursor: pointer; pointer-events: auto; touch-action: manipulation;
  box-shadow: inset 0 0 0 1.5px rgba(255, 220, 210, .55), 0 2px 5px rgba(0, 0, 0, .45); animation: skb-bub-in .32s cubic-bezier(.3, 1.6, .5, 1) backwards; }
#hud .skb-rm::before { content: ""; position: absolute; inset: 5px; background: #fff; -webkit-mask: var(--ic-close) center / contain no-repeat; mask: var(--ic-close) center / contain no-repeat; }
#hud .skb-rm:active { scale: .92; }
/* 놓기: 모형 옆 [짓기] [취소] + 빨간 이유 한 줄(battle 이 자리를 준다) */
#hud .skb-float { left: 0; top: 0; display: grid; grid-template-columns: auto auto; gap: 4px 6px; justify-items: start; }
#hud .skb-why { grid-column: 1 / 3; font-size: 11.5px; font-weight: 700; color: #ffb2a6; white-space: nowrap;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
/* 안내 · 결과 한 줄(판 바로 위) */
#hud .skb-msg { left: 50%; top: 326px; transform: translateX(-50%); padding: 0 12px; height: 22px; border-radius: 11px; font-size: 12px; line-height: 22px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(8, 10, 14, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
#hud .skb-msg.bad { color: #ffb2a6; }
#hud .skb-msg.up { top: 290px; }   /* 건설 판(322) 바로 위 */
#hud .skb-msg.in { animation: skb-msg-in .283s cubic-bezier(.2, .8, .3, 1) both; }
/* 거두기 말풍선(건물 위, battle 이 자리를 준다): 재료 아이콘 + 쌓인 수 · 가득 = 붉은 맥동 */
#hud .skb-bubs { position: absolute; left: 0; top: 0; width: 100%; height: 450px; pointer-events: none; }   /* HUD 첫 자식 = 퀘스트 · 채팅 · 단추 밑 */
#hud .skb-bubs[hidden], #hud.ctl-editing .skb-bubs { display: none; }
/* 넓히기 쓸기 손가락(sky_build.js paintSwipe — 11-02 사용자): 후보 칸 위를 손이 눌러(.9) 쓸고 지나가며 금빛 자국 · 1.6초마다. 그림일 뿐 누름 통과 */
#hud .skb-swipe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
#hud .skb-swipe[hidden] { display: none; }
#hud .skb-sw-hand { position: absolute; left: 0; top: 0; width: 34px; height: 52px; margin: 0 0 0 -12px; background: url("../quest/guide-hand.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
  transform-origin: 12px 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); animation: skb-sw-hand 1.6s cubic-bezier(.45, 0, .3, 1) infinite; }
#hud .skb-sw-trail { position: absolute; left: var(--x0); top: var(--y0); width: var(--len); height: 8px; margin-top: -4px; border-radius: 4px; transform-origin: 0 50%; rotate: var(--ang);
  background: linear-gradient(90deg, rgba(255, 228, 150, 0), rgba(255, 228, 150, .75)); box-shadow: 0 0 10px rgba(255, 220, 140, .6); animation: skb-sw-trail 1.6s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes skb-sw-hand { 0% { translate: var(--x0) var(--y0); opacity: 0; scale: 1.1; } 12% { translate: var(--x0) var(--y0); opacity: 1; scale: 1.1; } 22% { translate: var(--x0) var(--y0); scale: .9; }
  72% { translate: var(--x1) var(--y1); opacity: 1; scale: .9; } 82% { translate: var(--x1) var(--y1); scale: 1.1; opacity: 1; } 100% { translate: var(--x1) var(--y1); opacity: 0; scale: 1.1; } }
@keyframes skb-sw-trail { 0%, 22% { scale: 0 1; opacity: 0; } 24% { opacity: 1; } 72% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
#hud .skb-bub { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px 0 6px; border: 0; border-radius: 13px; pointer-events: auto; touch-action: manipulation; cursor: pointer;
  background: rgba(8, 10, 14, .66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 5px rgba(0, 0, 0, .45); color: #fff; font: 800 12.5px/1 var(--ui-font);
  animation: skb-bub-in .32s cubic-bezier(.3, 1.6, .5, 1) backwards; }
#hud .skb-bub::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; translate: var(--tx, 0px) 0; border: 5px solid transparent; border-bottom: 0; border-top-color: rgba(8, 10, 14, .66); }
#hud .skb-bub img { position: static; flex: none; width: 14px; height: 16px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }   /* HUD 공용 #hud img { position: absolute } 를 끈다 — 켜 두면 아이콘이 흐름 밖으로 빠져 글자(×수 · 남은 시간) 위에 겹치고 알약 폭이 아이콘만큼 좁아진다(11-05 사용자 "건물위에 뜨는 툴팁이 망가져있을떄가") · flex none = 그림이 늦게 와도 14 폭 그대로 */
#hud .skb-bub:active { scale: .92; }
#hud .skb-bub.full { background: rgba(150, 34, 28, .82); animation: skb-bub-in .32s cubic-bezier(.3, 1.6, .5, 1) backwards, skb-full 1.047s ease-in-out .32s infinite alternate; }
#hud .skb-bub.full::after { border-top-color: rgba(150, 34, 28, .82); }
/* 솥 재료만 있음 = 누르면 달이기(청록 = 결정 단추색 01-popup.part .popup.full .btn.gold) · 등급 빛과 같은 1047 ms 맥동 */
#hud .skb-bub.go { background: linear-gradient(#83c3bf, #548f8c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 5px rgba(0, 0, 0, .45); animation: skb-bub-in .32s cubic-bezier(.3, 1.6, .5, 1) backwards, skb-go 1.047s ease-in-out .32s infinite alternate; }
#hud .skb-bub.go::after { border-top-color: #548f8c; }
#hud .skb-bub.go::before { content: ""; order: 1; width: 9px; height: 10px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }   /* ▶ 시작 */
#hud .skb-bub.go b { order: 2; }
@keyframes skb-go { to { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 9px rgba(131, 195, 191, .8); } }
/* 아직 0 개 · 곁에 서 있음 = 다음 1개까지 남은 시간(누름 없음 · 숫자 폭 고정) */
#hud .skb-bub.wait { pointer-events: none; cursor: default; color: #d8dde6; font-variant-numeric: tabular-nums; }
#hud .skb-bub.wait img { opacity: .55; filter: grayscale(.5) drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
/* 거둔 재료가 HUD 재료 알약으로 날아감 · +수 */
#hud .skb-fly { position: absolute; left: 0; top: 0; width: 14px; height: 16px; margin: -8px 0 0 -7px; image-rendering: pixelated; pointer-events: none; z-index: 5; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
#hud .skb-plus { position: absolute; left: 0; top: 0; font-size: 14px; color: #ffe08a; pointer-events: none; z-index: 5; white-space: nowrap;
  text-shadow: 1.5px 0 #000, -1.5px 0 #000, 0 1.5px #000, 0 -1.5px #000; }
#hud.ctl-editing .skb { display: none; }
@keyframes skb-up { from { transform: translateY(100%); } }
@keyframes skb-sel { from { box-shadow: inset 0 0 0 1px var(--g, rgba(255, 255, 255, .14)), 0 0 0 2px rgba(232, 201, 121, .55); } to { box-shadow: inset 0 0 0 1px var(--g, rgba(255, 255, 255, .14)), 0 0 0 2px #f1d58a, 0 0 9px rgba(241, 213, 138, .55); } }
@keyframes skb-card-in { from { opacity: 0; translate: 0 6px; } }
@keyframes skb-msg-in { from { opacity: 0; margin-top: 4px; } }
@keyframes skb-bub-in { from { opacity: 0; scale: .5; } 70% { scale: 1.06; } to { scale: 1; } }
@keyframes skb-full { from { box-shadow: inset 0 0 0 1px rgba(255, 190, 170, .3), 0 0 0 0 rgba(255, 90, 70, 0); } to { box-shadow: inset 0 0 0 1px rgba(255, 190, 170, .6), 0 0 9px 2px rgba(255, 90, 70, .55); } }
/* ---- HUD [모두 거두기](sky_collect.js — S2 §2-9): 알약 28 · 흰 손 아이콘 + 글자 · 거둘 것이 있으면 빨간 점 628 ms.
   자리 = 아래 가운데 [건설] 알약 오른쪽 8(같은 줄 y 360). 11-05 사용자 "보스도전이랑 모두 거두기 위치가 같은거 좀 불편함": 오른쪽 위(58)가 [보스 도전](boss.css .boss-go 66)과 겹쳤다 —
   보스 도전 = 어느 판에서나 뜨는 콘텐츠 입구라 오른쪽 위에 두고, 섬 행동(건설 · 거두기)은 아래 한 줄로. [건설] 알약 폭 70(ko · en 75) → 가운데 + 35 + 8 */
#hud .skc { position: absolute; left: 0; top: 0; width: 100%; height: 450px; pointer-events: none; }
#hud .skc-all { position: absolute; left: calc(50% + 43px); top: 360px; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; pointer-events: auto; touch-action: manipulation; cursor: pointer;
  font: 800 12.5px/28px var(--ui-font); white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  background: rgba(8, 10, 14, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 2px 4px rgba(0, 0, 0, .35);
  transition: transform .18s cubic-bezier(.3, 1.8, .5, 1), opacity .15s; animation: skb-bub-in .32s cubic-bezier(.3, 1.6, .5, 1) backwards; }
#hud .skc-all:active { transform: scale(.92); transition-duration: .06s; }
#hud .skc-all.off { opacity: .45; }
#hud .skc-all img { position: static; flex: none; width: 18px; height: 18px; }   /* HUD 공용 #hud img { position: absolute } 를 끈다 — 켜 두면 아이콘이 글자 '모' 위에 겹친다(10-30 사용자 "모두 거두기 버튼도 깨져 있고") */
#hud .skc-dot { position: absolute; right: 1px; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: #ff4b3a; box-shadow: 0 0 0 1.5px rgba(8, 10, 14, .8); animation: skc-dot .628s ease-in-out infinite alternate; }
#hud #hud-screen.skb-sheet-on > .skc { visibility: hidden; }
@keyframes skc-dot { to { scale: 1.25; opacity: .7; } }
/* ---- 건물 창(sky_bldg_win.js — S2 §2-8): 전체화면 창 공용 틀(01-popup .popup.full) 위에 차이만. 머리 = 이름 + Lv(금빛) · 효과 줄 32 · 몸 = 생성 칸 */
#ui .popup.full.skw > .popup-head > h2::before { display: none; }   /* 건물마다 흰 선 아이콘이 아직 없다(그림 = 몸의 건물 썸네일) */
#ui .skw .skw-lv { margin-left: 8px; font-size: 13px; color: #f1d58a; }
#ui .skw .skw-up { flex: none; display: flex; align-items: center; gap: 14px; min-height: 32px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 12px; }
#ui .skw .skw-next { white-space: nowrap; }
#ui .skw .skw-upbtn { flex: none; display: inline-flex; align-items: center; gap: 8px; }
#ui .skw .skw-upbtn .skb-chip b { color: #fff; font-size: 12px; }
#ui .skw .skw-upbtn .skb-chip.lack b { color: #ffd0c8; }
#ui .skw .skw-why { color: rgba(255, 255, 255, .55); font-size: 12px; white-space: nowrap; }
#ui .popup.full.skw .skw-uplock { flex: none; display: inline-flex; align-items: center; gap: 5px; }   /* 숙련 잠김 = 흐린 [자물쇠 레벨업](숫자는 옆 숙련 막대) */
#ui .popup.full.skw .skw-uplock .skb-ic { width: 12px; height: 12px; color: #f1d58a; }
#ui .skw .skw-gen { display: flex; align-items: center; gap: 18px; max-width: 540px; padding: 12px 18px; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  animation: fx-card-in .42s cubic-bezier(.2, .8, .3, 1) both; }
#ui .skw .skw-pic { position: relative; flex: none; display: block; width: 96px; height: 80px; }
#ui .skw .skw-pic canvas { width: 96px; height: 80px; image-rendering: pixelated; }
#ui .skw .skw-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#ui .skw .skw-item { display: flex; align-items: center; gap: 6px; font-size: 14px; }
#ui .skw .skw-item img { width: 14px; height: 16px; image-rendering: pixelated; }
#ui .skw .skw-rate, #ui .skw .skw-left { font-size: 11.5px; color: rgba(255, 255, 255, .7); white-space: nowrap; }
#ui .skw .skw-barline { display: flex; align-items: center; gap: 8px; }
#ui .skw .skw-bar { flex: 1; max-width: 220px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#ui .skw .skw-fill { display: block; height: 100%; background: linear-gradient(90deg, #6fb2ad, #a8d8cf); transition: width .3s ease-out; }
#ui .skw .skw-stock { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ui .skw .skw-stock.full { color: #ff8f84; }
#ui .skw .skw-collect { flex: none; }
/* 생성기 = 작은 팝업(11-02 사용자 "돌/흙 생성기 창은 전체화면일 필요 없이 팝업식"): 어두운 작은 판(18-popup-dark) · 폭 = 내용 · 닫기 ✕ 오른쪽 · [거두기] 밑 [💎 n 바로 끝내기] */
#ui .popup.skw.skw-pop { width: 440px; box-sizing: border-box; }
#ui .popup.skw.skw-pop > .popup-head > .close { order: 3; margin-left: auto; }
#ui .popup.skw.skw-pop > .popup-head > .skw-bag { display: none; }
#ui .popup.skw.skw-pop .skw-up { gap: 10px; }
#ui .popup.skw.skw-pop .skw-next { white-space: normal; flex: 1; min-width: 0; }
#ui .popup.skw.skw-pop .skw-gen { max-width: none; gap: 14px; padding: 10px 12px; }
#ui .skw .skw-btns { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
#ui .skw .skw-rush1 { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
#ui .skw .skw-rush1[hidden] { display: none; }
#ui .skw .skw-rush1 img { width: 14px; height: 14px; }
#ui .skw .skw-rush1 b.lack { color: #ffb4a8; }
#ui .skw .skw-dh { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }   /* 꾹 누름 수확(genfix-1105) — 길게 누름 메뉴 · 글자 고름 · 스크롤 안 함 */
/* 레벨업 0.6 초(S2 §2-11 · DESIGN §0-3): 0 ~ .15 눌림 .95 → .15 ~ .35 빛 고리 + 1.08 → .35 ~ .6 "Lv n" 진주빛 명조 떠오름 + 흐림 */
#ui .skw .skw-fx { position: absolute; left: 50%; top: 42%; z-index: 3; translate: -50% -50%; font: 900 34px/1 "ZoneTitle", var(--ui-font); color: #f6f1e6; white-space: nowrap; pointer-events: none; opacity: 0;
  text-shadow: 0 0 10px rgba(255, 236, 190, .85), 0 0 22px rgba(255, 220, 150, .45); }
#ui .skw.lvup .skw-fx { animation: skw-lv .6s ease-out both; }
#ui .skw.lvup .skw-pic { animation: skw-press .6s cubic-bezier(.3, 1.4, .5, 1) both; }
#ui .skw .skw-pic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 2px solid rgba(255, 236, 180, .95); opacity: 0; pointer-events: none;
  box-shadow: 0 0 14px rgba(255, 226, 160, .7), inset 0 0 10px rgba(255, 226, 160, .5); }
#ui .skw.lvup .skw-pic::after { animation: skw-ring .6s ease-out both; }
@keyframes skw-press { 0% { scale: 1; } 25% { scale: .95; } 58% { scale: 1.08; } 100% { scale: 1; } }
@keyframes skw-ring { 0%, 25% { opacity: 0; scale: .5; } 58% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.35; } }
@keyframes skw-lv { 0%, 50% { opacity: 0; translate: -50% -30%; } 70% { opacity: 1; translate: -50% -50%; } 100% { opacity: 0; translate: -50% -85%; } }
/* ---- 작은 팝업(철거 확인 — 18-popup-dark 어두운 판이 저절로): 폭 330 · 높이 = 내용 · 제목 15 · 단추 28(설정 창 10-24 값) */
#ui .popup.skr { width: 330px; box-sizing: border-box; }
/* 모두 거두기 받은 것 팝업(W19 — 작은 팝업 = 나인패치 판 그대로 · 칸 56 · 아이콘 40 · 등장 톡) */
#ui .popup.skgot { width: 360px; box-sizing: border-box; }
#ui .skgot-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 0; padding: 4px 4px 6px; max-height: 218px; overflow-y: auto; }   /* 안 여백 = 칸 튐 1.12 가 스크롤 테에 안 잘리게 */
/* 칸 = 차례 튐(ui_fx fx-got-in · 70 ms 간격) · 뒤 빛(등급색 --ac, 재료 = 금빛) · 반짝 한 줄 · 다 세면 수 톡 · 큰 수 · 높은 등급 = 빛 맥동(fx-got-pulse) + 테 빛(fx-got-edge) */
#ui .skgot-c { --ac: #ffd884; position: relative; width: 60px; height: 66px; display: grid; grid-template-rows: 44px 18px; place-items: center; border-radius: 8px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  animation: fx-got-in .42s calc(.12s + var(--i, 0) * .07s) cubic-bezier(.2, .9, .3, 1.35) both; }
#ui .skgot-c::before { content: ""; position: absolute; left: 50%; top: 22px; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--ac) 55%, transparent) 0 22%, transparent 64%); opacity: 0; animation: skgot-glow .9s calc(.2s + var(--i, 0) * .07s) ease-out both; }
#ui .skgot-c::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) -60px 0 / 180% 100% no-repeat; animation: skgot-shine .6s calc(.34s + var(--i, 0) * .07s) ease-out both; }
#ui .skgot-c > img, #ui .skgot-c > .skl-ph { position: relative; z-index: 1; }
#ui .skgot-c img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
#ui .skgot-c img.px { width: auto; height: auto; max-width: 20px; max-height: 20px; zoom: 2; }   /* 도트 아이콘 파일 = 정수 2배(sky_life pic px) */
#ui .skgot-c .skl-ph { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font: 900 14px/1 var(--ui-font); font-style: normal; color: #fff; background: #5a6070; }
#ui .skgot-c b { position: absolute; z-index: 2; right: 3px; top: 28px; font-size: 11px; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
#ui .skgot-c.cnt b { animation: skgot-num .26s cubic-bezier(.3, 1.6, .5, 1); }
#ui .skgot-c.big b { color: #ffe27a; }
#ui .skgot-c.big.cnt { animation: fx-got-in .42s calc(.12s + var(--i, 0) * .07s) cubic-bezier(.2, .9, .3, 1.35) both, fx-got-edge 1.047s ease-in-out infinite; }
#ui .skgot-c.big.cnt::before { opacity: 1; animation: fx-got-pulse 1.047s ease-in-out infinite; }
#ui .skgot-c em { max-width: 58px; font-size: 10px; font-style: normal; color: #e8e2d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .skgot-list.fx-skip .skgot-c, #ui .skgot-list.fx-skip .skgot-c::before, #ui .skgot-list.fx-skip .skgot-c::after { animation-delay: 0s; animation-duration: .01s; }
#ui .skgot-list.fx-skip .skgot-c.big.cnt::before { animation-duration: 1.047s; }
/* [확인] = 칸이 HUD 오른쪽 위로 날아감(--dx · --dy = 창 배치 px — sky_collect gotPress) */
#ui .skgot-list.skgot-out { overflow: visible; }
#ui .skgot-list.skgot-out .skgot-c { animation: skgot-fly .36s calc(var(--o, 0) * .04s) cubic-bezier(.5, 0, .75, .4) both; }
#ui .skgot-used { font-size: 12px; color: #f2c46b; margin: 4px 0 0; }
@keyframes skgot-glow { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.1); } 100% { opacity: .55; transform: scale(1); } }
@keyframes skgot-shine { 0% { opacity: 1; background-position: -60px 0; } 100% { opacity: 0; background-position: 70px 0; } }
@keyframes skgot-num { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes skgot-fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx, 300px), var(--dy, -200px)) scale(.35); opacity: 0; } }
#ui .sks-title { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
#ui .sks-title small { font-size: 11px; font-weight: 700; color: #f1d58a; }
#ui .sks-desc { margin: 0 0 10px; font-size: 11.5px; color: var(--ink-soft); }
#ui .sks-btns { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- 신사(sky_shrine.js, 11-01) — 이야기 장 칸: 장 번호 · 제목 · [보기] | 잠김 "Lv90 보스 처치 후" */
#ui .skw .sks { display: flex; flex-wrap: wrap; gap: 10px; }
#ui .skw .sks-ch { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 168px; padding: 10px 14px; border: 0; border-radius: 10px; text-align: left;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(241, 213, 138, .45); color: #fff; cursor: pointer; animation: fx-card-in .42s cubic-bezier(.2, .8, .3, 1) both; }
#ui .skw .sks-ch small { font-size: 10px; font-weight: 800; color: #f1d58a; }
#ui .skw .sks-ch b { font-size: 15px; font-weight: 900; }
#ui .skw .sks-ch span { font-size: 11px; font-weight: 700; color: #f1d58a; }
#ui .skw .sks-ch.lock { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
#ui .skw .sks-ch.lock b, #ui .skw .sks-ch.lock span { color: rgba(255, 255, 255, .5); }
#ui .skw .sks-ch:active { transform: scale(.96); }
/* ---- 꾸미기(sky_deco.js, 11-01 D3 — S2 §2-2 · §2-3 · §2-6 · §2-7 · §2-11) */
#hud .skd-card { box-shadow: inset 0 0 0 1px var(--g, rgba(255, 255, 255, .14)); }   /* 소품 카드 테 = 등급색(목공소 Lv 1 일반 … 5 전설) */
#hud .skd-card.zero .skb-thumb, #hud .skd-card.zero .skd-floor, #hud .skd-card.zero .skd-bg { opacity: .35; filter: grayscale(.6); }   /* 0개 = 흐림 + [만들기][사기] */
#hud .skd-card.zero .skb-name { color: rgba(255, 255, 255, .6); }
#hud .skd-two { display: flex; gap: 2px; margin-top: 1px; }
#hud .skd-two em { flex: none; height: 16px; padding: 0 5px; border-radius: 999px; background: rgba(255, 255, 255, .14); font: 800 9px/16px var(--ui-font); font-style: normal; color: #fff; white-space: nowrap; }
#hud .skd-two em:first-child { background: linear-gradient(#83c3bf, #548f8c); }
#hud .skd-two em:active { scale: .92; }
#hud .skd-floor, #hud .skd-bg { flex: none; width: 42px; height: 42px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); image-rendering: pixelated; }
#hud .skd-bg { width: 54px; height: 40px; }
/* 잠긴 배경 = 얻는 곳 문구가 길다(겨울 축제 첫 눈송이 거두기(계정당 한 번)) → 썸네일 54 × 30 · 문구 카드 폭 안에서 줄바꿈 3줄(11-05 옆 카드로 넘쳐 겹침) */
#hud .skd-card.bg.lock .skd-bg { height: 30px; }
#hud .skd-card.bg.lock .skb-sub { max-width: 66px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; text-align: center; line-height: 10px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#hud .skd { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#hud #hud-screen.skb-sheet-on > .skd { visibility: visible; }   /* 판이 열리면 HUD 를 숨기는 규칙(> :not(.skb, .skm-bar))보다 세게 — 장식 철거 ✕ · [되돌리기]는 판과 함께 보인다(sky_edit .ske 와 같다) */
#hud .skd-marks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#hud .skd-undo { position: absolute; left: 50%; top: 282px; translate: -50% 0; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 4px 0 14px; border-radius: 18px;
  background: rgba(8, 10, 14, .72); font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; pointer-events: auto; animation: skb-msg-in .2s ease-out both; }
#hud .skd-undo[hidden] { display: none; }
#hud .skd-ring { position: absolute; left: 0; top: 0; width: 44px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 246, 220, .8); pointer-events: none; }
#hud .skb-rot { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 0 10px; }
#hud .skb-rot .skb-ic { width: 16px; height: 16px; }   /* ↻ 90° (소품만 — 건물 3D 는 돌지 않는다) */
/* 소품 거르기 알약(sky_deco filtNav — 11-02 UI2): 칩 줄 뒤 1px 구분선 + 글자 폭 알약 24 · 고른 것 = 금 테 · 해당 0 = 흐림. 좁은 화면은 이 줄만 가로 끌기(touch_scroll) */
#hud .skd-filt { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 3px; height: 24px; padding-left: 12px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 1px 0 rgba(255, 255, 255, .16); }
#hud .skd-filt::-webkit-scrollbar { display: none; }
#hud .skd-filt[hidden] { display: none; }
#hud .skd-f { flex: none; height: 24px; padding: 0 9px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .72); cursor: pointer; touch-action: manipulation;
  font: 700 11px/24px var(--ui-font); white-space: nowrap; transition: transform .18s cubic-bezier(.3, 1.8, .5, 1), background .15s, color .15s; }
#hud .skd-f.on { background: rgba(217, 184, 106, .24); color: #f6e2a8; box-shadow: inset 0 0 0 1px #d9b86a; }
#hud .skd-f.none { opacity: .38; }
#hud .skd-f:active { transform: scale(.92); transition-duration: .06s; transition-timing-function: ease-out; }

/* ---- 건물 창 [💎 바로 끝내기](sky_bldg_win.js, LANES-S2 D3) — 11-01 D4b: 베이지 알약 위 빨간 값이 안 읽힘 → 어두운 윤곽 알약(도깨비의 세계 §9 윤곽 알약 · 다이아 하늘색 #8fc6ff 테),
   값 = 흰 굵은 숫자 · 모자라면 숫자만 옅은 빨강(#ff9d92, 어두운 판 위에서 읽힘). .popup.full .btn(베이지)을 덮으려고 .popup.full.skw 로 */
#ui .popup.full.skw .skw-rush { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 0 14px 0 10px; background: rgba(8, 12, 20, .55); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(143, 198, 255, .55), 0 0 8px rgba(143, 198, 255, .18); font-size: 12px; }
#ui .popup.full.skw .skw-rush img { flex: none; width: 16px; height: 16px; object-fit: contain; }
#ui .popup.full.skw .skw-rush b { font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
#ui .popup.full.skw .skw-rush b.lack { color: #ff9d92; }
#ui .popup.full.skw .skw-rush span { color: rgba(255, 255, 255, .86); font-weight: 700; }
#ui .skw .skw-rush.off { filter: grayscale(1); opacity: .5; }

/* ---- 가방 기타 탭 칩(sky_bag.js) — 칩 줄 24 px 만큼 칸 상자를 내린다 */
#ui .inv-pane > .skg-chips { top: 59px; height: 24px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
#ui .inv-pane > .skg-chips[hidden] { display: none; }
#ui .skg-chip { flex: none; height: 24px; padding: 0 8px; border: 0; background: none; color: rgba(255, 255, 255, .62); font: 700 11.5px/24px var(--ui-font); cursor: pointer; touch-action: manipulation; white-space: nowrap; }
#ui .skg-chip.on { color: #fff; box-shadow: inset 0 -2px #d9b86a; }
#ui .skg-chip:active { scale: .92; }
#ui .items-pane.skg-on > .grid-box { top: 87px; height: 225px; }
#ui .inv-skplace[hidden] { display: none; }

/* ---- 흰 선 아이콘 16(S2 §6 — Codex 시트 1장 → assets/ui/skyisle/icon-*.png 48 px 흰색 + 알파, 글자색 마스크). 탭 16 · 상호작용 12 · 망치 · ✕ · 자물쇠 · ↻ · 눈송이(축제 띠 — D13) */
:is(#hud, #ui) { --ic-expand: url(../../assets/ui/skyisle/icon-expand.png); --ic-build: url(../../assets/ui/skyisle/icon-build.png); --ic-deco: url(../../assets/ui/skyisle/icon-deco.png); --ic-remove: url(../../assets/ui/skyisle/icon-remove.png); --ic-sit: url(../../assets/ui/skyisle/icon-sit.png); --ic-light: url(../../assets/ui/skyisle/icon-light.png); --ic-sign: url(../../assets/ui/skyisle/icon-sign.png); --ic-sound: url(../../assets/ui/skyisle/icon-sound.png); --ic-play: url(../../assets/ui/skyisle/icon-play.png); --ic-view: url(../../assets/ui/skyisle/icon-view.png); --ic-guest: url(../../assets/ui/skyisle/icon-guest.png); --ic-hammer: url(../../assets/ui/skyisle/icon-hammer.png); --ic-close: url(../../assets/ui/skyisle/icon-close.png); --ic-lock: url(../../assets/ui/skyisle/icon-lock.png); --ic-rotate: url(../../assets/ui/skyisle/icon-rotate.png); --ic-snow: url(../../assets/ui/skyisle/icon-snow.png); }
:is(#hud, #ui) .skb-ic { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; vertical-align: middle; }
:is(#hud, #ui) .skb-ic.i-expand { --ic: var(--ic-expand); }
:is(#hud, #ui) .skb-ic.i-build { --ic: var(--ic-build); }
:is(#hud, #ui) .skb-ic.i-deco { --ic: var(--ic-deco); }
:is(#hud, #ui) .skb-ic.i-remove { --ic: var(--ic-remove); }
:is(#hud, #ui) .skb-ic.i-sit { --ic: var(--ic-sit); }
:is(#hud, #ui) .skb-ic.i-light { --ic: var(--ic-light); }
:is(#hud, #ui) .skb-ic.i-sign { --ic: var(--ic-sign); }
:is(#hud, #ui) .skb-ic.i-sound { --ic: var(--ic-sound); }
:is(#hud, #ui) .skb-ic.i-play { --ic: var(--ic-play); }
:is(#hud, #ui) .skb-ic.i-view { --ic: var(--ic-view); }
:is(#hud, #ui) .skb-ic.i-guest { --ic: var(--ic-guest); }
:is(#hud, #ui) .skb-ic.i-hammer { --ic: var(--ic-hammer); }
:is(#hud, #ui) .skb-ic.i-close { --ic: var(--ic-close); }
:is(#hud, #ui) .skb-ic.i-lock { --ic: var(--ic-lock); }
:is(#hud, #ui) .skb-ic.i-rotate { --ic: var(--ic-rotate); }
:is(#hud, #ui) .skb-ic.i-snow { --ic: var(--ic-snow); }
#hud .skb-open .skb-pill { display: inline-flex; align-items: center; gap: 5px; }
#hud .skd-act { position: absolute; left: 4px; top: 3px; width: 12px; height: 12px; color: rgba(255, 255, 255, .8); }
/* 11-04 W23: 지을 수 있는 건물 = 빨간 점(ui-juice 628 ms 맥동 · morph mf-dot 과 같은 #e5484d) — [건설] 알약 · [건물] 탭 · 칩 */
#hud :is(.skb-open .skb-pill, .skb-tab, .skb-chipt).dot { position: relative; }
#hud :is(.skb-open .skb-pill, .skb-tab, .skb-chipt).dot::after { content: ""; position: absolute; right: 2px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55); animation: skb-dot .628s ease-in-out infinite alternate; pointer-events: none; }
#hud .skb-open .skb-pill.dot::after { right: -2px; top: -3px; width: 9px; height: 9px; }
@keyframes skb-dot { to { transform: scale(.75); } }