/* 하늘섬 건물 기능 창 몸(2026-11-01 D4) — 대기열(sky_queue.js) · 밭 · 우리(sky_farm.js) · 경매장 상점(sky_market.js) · 신사 변신 줄(sky_shrine.js).
   11-01 D4b 다시 짬(사용자 판정 "UI 퀄리티가 허접하다" — LANE-D4b-UI.md): 전체 폭 두 단 = 왼쪽 진행 판(칸 · 거두기) | 오른쪽 고르기 격자.
   근거 = 제작 · 농장 흥행작 공통 틀(쿠키런 킹덤 잼 가게 · 로스트아크 제작 공방 · 검은사막M 가공 · 라이프애프터 작업대 실제 캡처 10장 — .local/tmp/ref-craft/notes.md):
   왼쪽 세로 대기열 · 오른쪽 제작법(네모 그림 칸 · 이름 · 보유/필요 · 시간) · 잠긴 줄 = 자물쇠 + "Lv n" · 큰 [모두 거두기] 하나.
   크기 = 고품질UI(GUI 450): 칸 48 · 아이콘 40(도트 파일 = 정수 2배) · 단추 = 글자 폭 알약 28 · 강조 = 금(#f1d58a) · 끝남 = 초록(#9fe3a0) · 모자람 = 붉음(#ff8f84) · 그림 칸 바탕 = 등급색(--g). */

/* ---- 창 틀(.skw-life = 넓은 몸을 쓰는 생활 건물 창 — sky_bldg_win.js) */
#ui .popup.full.skw.skw-life { background: linear-gradient(rgba(12, 14, 18, .86), rgba(8, 9, 12, .92)); }   /* 뒤 섬 장면이 덜 비치게 — 칸 · 글자가 장면 색에 묻혔다(D4 캡처) */
#ui .skw .skw-bag { display: none; }
#ui .skw.skw-life .skw-bag { display: block; flex: none; margin-left: auto; width: 24px; height: 24px; background: var(--ink); opacity: .82; -webkit-mask: url(../../assets/icons/slot-bag.png) center / contain no-repeat; mask: url(../../assets/icons/slot-bag.png) center / contain no-repeat; }   /* 거둔 것이 날아드는 곳(창이 열리면 HUD 가 숨어 K.fly 가 안 보인다) */
#ui .skw.skw-life .skw-bag.got { animation: skl-bag .42s cubic-bezier(.3, 1.6, .5, 1); }
#ui .skw .skw-hpic, #ui .skw .skw-mxw { display: none; }
#ui .skw.skw-life .skw-up { gap: 12px; min-height: 48px; margin-bottom: 10px; padding-bottom: 8px; }
#ui .skw.skw-life .skw-hpic { display: block; width: 58px; height: 48px; }
#ui .skw.skw-life .skw-hpic canvas { width: 58px; height: 48px; }
#ui .skw.skw-life .skw-hpic::after { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
#ui .skw.skw-life .skw-mxw:not([hidden]) { display: flex; flex: none; flex-direction: column; gap: 4px; width: 168px; }
#ui .skw .skw-mxl { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .72); white-space: nowrap; font-variant-numeric: tabular-nums; }
#ui .skw .skw-mxbar { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#ui .skw .skw-mxbar > i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #c9a24e, #f1d58a); transform-origin: left; transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
#ui .skw.skw-life .skw-next { flex: 1; min-width: 0; color: rgba(255, 255, 255, .72); }
#ui .skw.skw-life .skw-act { flex: none; margin-left: auto; display: flex; align-items: center; }
/* 섬 등급 잠김 = 제목 자리가 아니라 오른쪽 어두운 알약(자물쇠 + 글) */
#ui .skw .skw-why { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); }
#ui .skw .skw-why .skb-ic { width: 13px; height: 13px; color: #f1d58a; }
#ui .skw.skw-life .skw-body { position: relative; flex: 1; min-height: 0; display: flex; }

/* ---- 공용 */
#ui .skw .skl { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; min-height: 0; }
#ui .skw .skl-2 { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 14px; }
#ui .skw .skl-side, #ui .skw .skl-main { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#ui .skw .skl-side { padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
#ui .skw .skl-h { flex: none; margin: 0; font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, .78); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 알림 = 몸 아래 가운데 어두운 알약(뜰 때만) */
#ui .skw .skl-msg { position: absolute; left: 50%; bottom: 4px; z-index: 4; max-width: 70%; height: 28px; padding: 0 14px; border-radius: 999px; background: rgba(8, 10, 14, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .4);
  font-size: 12px; font-weight: 700; line-height: 28px; color: #f6f1e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; translate: -50% 6px; transition: opacity .18s, translate .18s; }
#ui .skw .skl-msg.in { opacity: 1; translate: -50% 0; }
#ui .skw .skl-msg.bad { color: #ff8f84; }
/* 그림 칸(48) — 바탕 = 등급색 둥근 빛 · 도트 파일은 정수 2배 */
#ui .skw .skl-cell { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--g, #77808c) 42%, transparent), rgba(0, 0, 0, .38) 78%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g, #9aa3ad) 55%, transparent); }
#ui .skw .skl-cell > em { position: absolute; right: 3px; bottom: 1px; font: 900 10.5px/1 var(--ui-font); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; }
#ui .skw .skl-ico { flex: none; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
#ui .skw .skl-ico.px { width: auto; height: auto; max-width: 22px; max-height: 22px; zoom: 2; filter: drop-shadow(0 .5px .5px rgba(0, 0, 0, .6)); }
#ui .skw .skl-ci, #ui .skw .skb-chip img.skl-ci { flex: none; width: 14px; height: 16px; object-fit: contain; image-rendering: pixelated; }
#ui .skw .skl-ci.px, #ui .skw .skb-chip img.skl-ci.px { width: auto; height: auto; max-width: 20px; max-height: 20px; }
/* 그림 전 = 이름 첫 글자 동그라미(종류 색) */
#ui .skw .skl-ph { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font: 900 15px/1 var(--ui-font); font-style: normal; color: #fff; filter: none;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), transparent 60%), var(--k, #6d7684); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .5); }
#ui .skw .skl-ico.skl-ph { width: 32px; height: 32px; }
#ui .skw .skl-ci.skl-ph { width: 15px; height: 15px; font-size: 9px; }
#ui .skw .skl-ph.k-crop { --k: #6f9d4e; }
#ui .skw .skl-ph.k-goods { --k: #c49a5a; }
#ui .skw .skl-ph.k-proc { --k: #8a7a68; }
#ui .skw .skl-ph.k-food { --k: #d0774e; }
#ui .skw .skl-ph.k-animal { --k: #b88a5c; }
#ui .skw .skl-ph.k-mat { --k: #7c8590; }
#ui .skw .skl-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 36px 0; font-size: 12px; color: rgba(255, 255, 255, .55); }
#ui .skw .skl-empty img { width: 40px; height: 40px; opacity: .45; }
/* 값 칩 — 보유/필요(보유 = 옅게) */
#ui .skw .skb-chip b i { font-style: normal; font-weight: 700; color: rgba(255, 255, 255, .55); }
#ui .skw .skb-chip.lack b, #ui .skw .skb-chip.lack b i { color: #ff8f84; }
/* 막대(칸 · 밭 공용) */
#ui .skw .skl-bar { position: relative; display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#ui .skw .skl-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #6fb2ad, #a8d8cf); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .4s linear; }
/* 칩 줄(레벨 탭 — 글자 + 금 밑줄, 경매장 탭과 같은 결) */
#ui .skw .skb-chips { flex: none; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
#ui .skw .skb-chipt { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border: 0; background: none; color: rgba(255, 255, 255, .66); cursor: pointer; touch-action: manipulation;
  font: 700 12px/28px var(--ui-font); white-space: nowrap; box-shadow: inset 0 -2px transparent; transition: color .15s, box-shadow .15s; }
#ui .skw .skb-chipt.on { color: #fff; box-shadow: inset 0 -2px #d9b86a; }
#ui .skw .skb-chipt.lock { color: rgba(255, 255, 255, .35); }
#ui .skw .skb-chipt .skb-ic { width: 12px; height: 12px; }
/* 누름 = 60 ms .95 → 뗄 때 튐(고품질UI §1) · 받아들여짐 = .pop */
#ui .skw :is(.skq-slot, .skq-rc, .skf-plot, .skf-card, .skm-n) { transition: transform .18s cubic-bezier(.3, 1.8, .5, 1); }
#ui .skw :is(.skq-slot, .skq-rc, .skf-plot, .skf-card, .skm-n):active { transform: scale(.95); transition-duration: .06s; }
#ui .skw :is(.skq-slot, .skq-rc, .skf-plot, .skf-card).pop .skl-cell, #ui .skw .skf-plot.pop .skf-face, #ui .skw .btn.pop, #ui .skw .skm-n.pop { animation: skl-pop .32s cubic-bezier(.3, 1.4, .5, 1) both; }   /* 커지는 튐은 칸 안 그림 · 단추만(스크롤 칸 덩어리에 걸면 잘림 — 고품질UI §6) */
/* 거둔 것 날아가기(L.flyFrom — 창 .skw 좌표) */
#ui .skw .skl-fly { position: absolute; left: 0; top: 0; z-index: 6; width: 28px; height: 28px; margin: -14px 0 0 -14px; object-fit: contain; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
#ui .skw .skl-plus { position: absolute; left: 0; top: 0; z-index: 6; font: 900 14px/1 var(--ui-font); color: #f1d58a; text-shadow: 0 1px 2px #000, 0 0 3px rgba(0, 0, 0, .8); white-space: nowrap; pointer-events: none; }

/* ---- 대기열(목공소 · 석공소 · 풍차 · 식당) — 빈 칸 · 빈 밭의 .empty 는 공용 빈 목록 규칙(windows.css #ui .empty min-height 100)을 받지 않게 min-height 0 */
#ui .skw .skq-slots { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: none; }
#ui .skw .skq-slot { position: relative; flex: none; display: flex; align-items: center; gap: 10px; height: 58px; min-height: 0; padding: 0 10px 0 5px; border: 0; border-radius: 10px; text-align: left; color: #fff; cursor: pointer; touch-action: manipulation; overflow: hidden;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
#ui .skw .skq-sinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#ui .skw .skq-snm { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .skw .skq-st { font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
#ui .skw .skq-slot.wait { opacity: .66; }
#ui .skw .skq-slot.done { box-shadow: inset 0 0 0 1.5px #9fe3a0, 0 0 10px rgba(159, 227, 160, .3); }
#ui .skw .skq-slot.done .skq-st { color: #9fe3a0; }
#ui .skw .skq-slot.done .skq-st::before { content: "✓ "; }
#ui .skw .skq-slot.done .skl-bar::after { background: linear-gradient(90deg, #7fd07f, #c9efa0); }
#ui .skw .skq-slot.done::after, #ui .skw .skf-plot.done::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); background-size: 260% 100%; animation: skl-shine 1.8s ease-in-out infinite; pointer-events: none; }   /* 다 됨 = 빛 훑기 */
#ui .skw .skq-slot.arm { box-shadow: inset 0 0 0 1.5px #ff8f84; }
#ui .skw .skq-slot.arm .skq-snm { color: #ff8f84; }
#ui .skw .skq-slot.empty { justify-content: center; gap: 6px; height: 40px; background: none; box-shadow: none; outline: 1px dashed rgba(255, 255, 255, .2); outline-offset: -1px; color: rgba(255, 255, 255, .45); }
#ui .skw .skq-plus { font-size: 18px; font-weight: 400; line-height: 1; }
#ui .skw .skq-slot.empty .skq-snm { font-size: 11px; font-weight: 700; }
/* 못 연 칸(PLAN 2-4 — sky_queue lockHtml): Lv n 에 열림 · 💎값(지금 살 칸 = 다이아 색 테) · 멤버십(금색) */
#ui .skw .skq-slot.lock { justify-content: center; gap: 6px; height: 40px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .5); font-size: 11px; font-weight: 800; }
#ui .skw .skq-slot.lock .skb-ic { width: 13px; height: 13px; }
#ui .skw .skq-lk { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#ui .skw :is(.skq-slot, .skp-q).lock img { width: 14px; height: 14px; object-fit: contain; }
#ui .skw :is(.skq-slot, .skp-q).lock.k-dia.next { color: #9fd8ff; box-shadow: inset 0 0 0 1.5px rgba(120, 200, 255, .55), 0 0 8px rgba(120, 200, 255, .2); }
#ui .skw :is(.skq-slot, .skp-q).lock.k-member { color: #f1d58a; }
#ui .skw .skq-take { flex: none; align-self: flex-start; }
#ui .skw .skq-take[hidden] { display: none; }
/* 제작법 격자(두 열 · 카드 60) */
#ui .skw .skq-list { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; align-content: start; overflow-y: auto; scrollbar-width: none; padding-bottom: 34px; }   /* 아래 34 = 알림 알약 자리 */
#ui .skw .skq-rc { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 10px 0 6px; border: 0; border-radius: 10px; text-align: left; color: #fff; cursor: pointer; touch-action: manipulation;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); animation: fx-card-in .36s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 22ms); }
#ui .skw .skq-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#ui .skw .skq-nm b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .skw .skq-nm > small { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; white-space: nowrap; }
#ui .skw .skq-nm > small .skb-ic { width: 11px; height: 11px; }
#ui .skw .skq-cost { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#ui .skw .skq-cost .skb-chip b { font-size: 11px; font-variant-numeric: tabular-nums; }
#ui .skw .skq-rc.lack .skq-nm b { color: rgba(255, 255, 255, .78); }
#ui .skw .skq-rc.lock { opacity: .45; }
#ui .skw .skq-rc.lock .skl-cell { filter: grayscale(.8); }
#ui .skw .skq-rc.lock .skq-nm > small { color: #f1d58a; }
#ui .skw .skq-rc.focus { box-shadow: inset 0 0 0 1.5px #e8c979, 0 0 10px rgba(232, 201, 121, .4); }
#ui .skw .skq-list.still .skq-rc { animation: none; }

/* ---- 밭 · 우리 */
/*   11-01 D4c 장면: 사용자 "단순 그리드 슬롯이면 좀 재미없잖아 실제 밭을 꾸민다는느낌으로" — 바탕 · 흙 · 싹 · 여물통 = Codex 도트(assets/ui/skyisle) 정수 2배(작물 · 동물 아이콘 .px zoom 2 와 같은 배율) */
/*   11-05 농장 화면 다시 짬(사용자 "농장 UI 도 퀄리티 너무 처참하다"): 근거 = 헤이데이 밭(다 자람 = 키 큰 작물 + ✓ · 한 번 눌러 거둠) · 쿠키런 킹덤 생산 창(칸 ✓ · 남은 시간 시계 · 그림 칸 ×n) ·
     타운쉽 밭(작물 그림 + 시간 고르기) 실제 화면 공통 → 장면은 판 폭에 맞춰 줄고 늘며(JS scale) 칸은 2×2 부터 크게 · 자라는 칸 = 시간 고리 + 남은 시간 알약 · 빈 칸 = 고른 작물 흐린 그림 + "+" ·
     작물 칸 = 그림 칸 ×보유 · 시계 + 시간 · 거두면 ×n · 아래 = [농장 상점] 왼쪽 · 주 행동 하나만 청록 */
#ui .skw .skf.skl-2 { grid-template-columns: auto minmax(196px, 1fr); }   /* 왼쪽 폭 = 장면 폭(sky_farm.js 가 무대 비율로 정함) */
#ui .skw .skf-side { padding: 0; background: none; box-shadow: none; }
#ui .skw .skf-scene { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 12px; background: #6aa53c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .35); }
#ui .skw .skf-stage { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }   /* 크기 = sky_farm.js 가 장면 폭 · 높이에 맞춘 scale(위아래 울타리 7%까지만 잘림) */
#ui .skw .skf-stage.k-plot { width: 512px; height: 342px; }
#ui .skw .skf-stage.k-pen { width: 466px; height: 312px; }
#ui .skw .skf-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
#ui .skw .skf-plot { position: absolute; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; touch-action: manipulation; }
#ui .skw .skf-face { position: absolute; left: 0; right: 0; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; }
#ui .skw .skf-t { position: absolute; left: -10px; right: -10px; text-align: center; font-size: 10px; font-weight: 800; line-height: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 3px rgba(0, 0, 0, .6); }
#ui .skw .skf-plot > .skl-bar { position: absolute; height: 3px; background: rgba(0, 0, 0, .45); }
#ui .skw .skf-plot > .skl-bar::after { background: linear-gradient(90deg, #8fcf6a, #c9ef9a); }
#ui .skw .skf-plot.empty .skl-bar, #ui .skw .skf-plot.idle .skl-bar { visibility: hidden; }
#ui .skw .skf-plot.empty .skf-t { color: rgba(255, 255, 255, .72); }
#ui .skw .skf-plot.idle .skf-t { color: #f1d58a; }
#ui .skw .skf-plot.done .skf-t { color: #b8f0b4; }
#ui .skw .skf-scene .skf-plot.done::after { content: none; }   /* 칸 판 빛 훑기 대신 그림이 튐 */
#ui .skw .skf-plus { font-size: 20px; font-weight: 400; line-height: 1; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
/* 밭 = 육각 흙 두둑 벌집 4열 × 3줄(최대 12칸 — 안 연 칸은 풀밭 육각 + 다음 칸만 자물쇠) · 칸 자리 = sky_farm.js HEXAT(열 58 · 줄 46) · 타일 1배 37×27 정수 2배 74×54
     벌집 상자 248×169 를 바탕 그림(farm_bg 256×171 × 2)의 빈 풀밭 가운데(가로 51% · 세로 57%)에 둔다 */
#ui .skw .skf-stage.k-plot .skf-field { position: absolute; left: calc(51% - 124px); top: calc(57% - 84px); width: 248px; height: 169px; filter: drop-shadow(0 2px 0 rgba(40, 60, 20, .3)); }
#ui .skw .k-plot .skf-plot { position: absolute; width: 74px; height: 54px; min-height: 0; }   /* 빈 칸 .empty = 공용 빈 목록 min-height 100 막음 */
#ui .skw .k-plot .skf-plot > :not(.skf-soil) { pointer-events: none; }   /* 벌집은 줄이 겹침 — 아래 칸 작물 그림이 위 칸 누름을 가로채지 않게 누름은 칸(흙 타일)만 */
#ui .skw .k-plot .skf-soil { left: 0; top: 0; bottom: auto; width: 100%; height: 100%; filter: none; }
#ui .skw .skf-soil { position: absolute; left: 4px; bottom: 13px; width: 84px; height: 54px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .22)); }
#ui .skw .k-plot .skf-face { bottom: 24px; }
#ui .skw .skf-sp { width: 34px; height: 30px; image-rendering: pixelated; animation: skl-sway 1.6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
#ui .skw .skf-yg { width: 38px; height: 32px; image-rendering: pixelated; animation: skl-sway 1.6s ease-in-out infinite alternate; transform-origin: 50% 100%; }   /* 어린 잎(1배 19×16 정수 2배) */
#ui .skw .k-plot .skf-plot.grow .skl-ico { animation: skl-sway 1.6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
#ui .skw .k-plot .skf-plot.done .skf-face { animation: skl-hop .9s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(190, 245, 170, .95)); }
#ui .skw .k-plot .skf-plot.empty .skf-face { bottom: 22px; }
#ui .skw .skf-ghost { display: flex; opacity: .4; filter: grayscale(.25); }   /* 빈 칸 = 누르면 심을 작물(고른 작물) 흐린 그림 */
#ui .skw .k-plot .skf-plus { position: absolute; left: 50%; top: 13px; z-index: 1; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: rgba(250, 248, 240, .92); color: #3d6b2a;
  font-size: 17px; font-weight: 900; line-height: 19px; text-align: center; text-shadow: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); animation: skf-beat 1.6s ease-in-out infinite; }
/* 자라는 칸 = 흙 아래 시간 알약(시간 고리 + 남은 시간) · 빈 칸 · 다 된 칸은 숨김 */
#ui .skw .k-plot .skf-tag { position: absolute; left: 50%; bottom: 3px; translate: -50% 0; display: flex; align-items: center; gap: 3px; height: 16px; padding: 0 6px 0 3px; border-radius: 999px;
  background: rgba(10, 14, 8, .74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
#ui .skw .k-plot .skf-plot:is(.empty, .done) .skf-tag { display: none; }
#ui .skw .k-plot .skf-t { position: static; color: #fff; line-height: 16px; }
#ui .skw .skf-ring { flex: none; width: 11px; height: 11px; border-radius: 50%; background: conic-gradient(#b5e48c calc(var(--p, 0) * 1turn), rgba(255, 255, 255, .22) 0);
  -webkit-mask: radial-gradient(circle, transparent 2.4px, #000 2.9px); mask: radial-gradient(circle, transparent 2.4px, #000 2.9px); }
/* 다 된 칸 = ✓ 방울(초록 = 끝남) + 반짝 셋 — 한 번 누르면 거둠 */
#ui .skw .k-plot .skf-ok { position: absolute; right: 6px; top: -4px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(#93dc6e, #4f9c3d);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .92), 0 2px 4px rgba(0, 0, 0, .4); animation: skl-hop .9s ease-in-out infinite; pointer-events: none; }
#ui .skw .k-plot .skf-ok::after { content: ""; position: absolute; left: 7px; top: 3.5px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
#ui .skw .skf-gl { position: absolute; z-index: 1; width: 12px; height: 12px; pointer-events: none; opacity: 0; animation: skf-tw 1.5s ease-in-out infinite; background: #fff8d8;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 2px #fff); }   /* 네 갈래 반짝(＋ 심기 표시와 다른 모양) */
#ui .skw .skf-gl:nth-of-type(2) { left: 14px; top: 4px; }
#ui .skw .skf-gl:nth-of-type(3) { left: 54px; top: 18px; animation-delay: .5s; }
#ui .skw .skf-gl:nth-of-type(4) { left: 8px; top: 26px; animation-delay: 1s; }
#ui .skw .skf-plot.locked .skf-soil { filter: brightness(.86) saturate(.8); }
#ui .skw .skf-lk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 9.5px; font-weight: 800; color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85); font-variant-numeric: tabular-nums; }
#ui .skw .skf-lk .skb-ic { width: 13px; height: 13px; color: #f1d58a; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
@keyframes skf-tw { 0%, 100% { opacity: 0; scale: .3; } 50% { opacity: 1; scale: 1; } }
@keyframes skf-beat { 0%, 70%, 100% { scale: 1; } 82% { scale: 1.12; } }
/* 우리: 마당 410×184(울 안 · 위 여물통 줄 아래) — 칸 = 발 자리(left · top) 기준 56×66 */
#ui .skw .skf-stage.k-pen .skf-field { position: absolute; left: 28px; top: 92px; width: 410px; height: 184px; }
#ui .skw .k-pen .skf-plot { width: 56px; height: 66px; margin: -48px 0 0 -28px; }
#ui .skw .k-pen .skf-face { top: 0; height: 48px; }
#ui .skw .skf-flip { display: inline-flex; }
#ui .skw .skf-plot.right .skf-flip { scale: -1 1; }   /* 그림은 왼쪽을 봄 */
#ui .skw .skf-plot.mob.walk .skf-face { animation: skf-bob .3s ease-in-out infinite alternate; }   /* 걸을 때 통통 */
#ui .skw .skf-plot.mob.fly .skf-face { height: 36px; animation: skf-bob .5s ease-in-out infinite alternate; }   /* 벌 = 떠서 맴돎 */
#ui .skw .skf-scene .skf-plot.mob::after { content: ""; position: absolute; inset: auto; left: 15px; top: 43px; width: 26px; height: 7px; border-radius: 50%; background: rgba(20, 40, 10, .3); background-size: auto; animation: none; z-index: -1; }   /* 발 그림자 */
#ui .skw .skf-plot.mob.idle .skf-face { filter: grayscale(.7) brightness(.85); }   /* 배고픔 = 멈춤 · 회색 */
#ui .skw .k-pen .skf-plot .skf-out { right: -4px; top: -12px; width: 28px; height: 28px; }
#ui .skw .skf-out.hungry img.skl-ci.px { width: 24px; height: 22px; max-width: none; max-height: none; }
#ui .skw .k-pen .skf-t { top: 49px; }
#ui .skw .k-pen .skf-plot > .skl-bar { left: 12px; right: 12px; top: 62px; }
#ui .skw .k-pen .skf-plot.empty .skf-plus { position: absolute; left: 8px; top: 6px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .18); line-height: 37px; text-align: center; box-sizing: border-box; }
#ui .skw .skf-plot.alt::before { content: ""; position: absolute; left: 6px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #f1d58a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
#ui .skw .skf-out { position: absolute; right: 2px; top: 2px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(250, 248, 240, .94); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); animation: skl-hop .9s ease-in-out infinite; }   /* 다 됨 = 생산물 말풍선 · 배고픔 = 여물통 말풍선 */
#ui .skw .skf-out .skl-ci.px { max-width: 18px; max-height: 18px; }
@keyframes skf-bob { to { translate: 0 -3px; } }
#ui .skw .skf-act { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#ui .skw .skf-gap { flex: 1; }
#ui .skw .skf-act .btn[hidden] { display: none; }
#ui .skw .skf-act .btn .skl-ci.px { max-width: 16px; max-height: 16px; }
#ui .skw .skf-act .btn.gold:not(.off) { animation: skf-cta 1.4s ease-in-out infinite alternate; }   /* 주 행동 = 청록 알약 하나 + 옅은 빛 숨쉬기 */
#ui .skw .skf-shopi { flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: url(../../assets/icons/menu-shop.png) center / contain no-repeat; mask: url(../../assets/icons/menu-shop.png) center / contain no-repeat; }
@keyframes skf-cta { from { box-shadow: 0 0 0 rgba(131, 195, 191, 0); } to { box-shadow: 0 0 10px rgba(131, 195, 191, .55); } }
#ui .skw .skf-h1 { margin-right: auto; font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, .78); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ---- 요리솥 */
/*   11-01 D4d 장면: 사용자 "얘도 다른 농장이나 밭처럼 큰요리솥하나잇고 요리하는시각적이고그 보여주면 좋을듯" · "요리솥 약간 보글보글 끓는느낌? 으로 해보고, 뚜껑도 열고 닫아서 음식재료넣는식으로 밑에 불도 고품질이펙트로 한번 넣어봐"
     바탕 pot_bg 247×167 · 뚜껑 pot_lid 109×54 = Codex 도트 정수 2배. 자리(GUI px) = 1배 그림에서 잰 값 × 2: 국 면 가운데 (195, 104) 반지름 92×45 · 아궁이 구멍 160–228 × 188–230 · 탁자 위 344–478 × 118–190.
     몸 높이가 약 230 이라 무대를 위에 붙인다(솥 테 · 들린 뚜껑이 안 잘리고 아래 바닥만 잘림).
     불 = 고품질이펙트 위계: 큰 = EmberGen 시뮬 불 혀 3겹(pot_fire.jpg = 이펙트랩 염화요원검 버프 재료 game_fire_loop_1 64칸 그대로 · 자기 색 그대로 · 화면 더하기) · 중간 = 아궁이 불빛 · 솥 배 빛(고르지 않은 깜박임) · 작은 = 불티 9(크기 · 수명 · 흐름 저마다).
     끓음 = 국 거품 10(크기 7–18 · 1.1–2.1 s 저마다 부풀다 톡) · 김 5 · 7 초 한 바퀴(뚜껑 열림 .35 s → 재료 3 첨벙 → 2.3 s 닫힘 쿵 → 세 번 들썩이며 김 뿜음). */
#ui .skw .skp.skl-2 { grid-template-columns: auto minmax(0, 1fr); }
#ui .skw .skf-scene.k-pot { width: 494px; background: #b98a55; }
#ui .skw .skf-stage.k-pot { width: 494px; height: 334px; top: 0; translate: -50% 0; }
#ui .skw .skp-stage > * { position: absolute; pointer-events: none; }
#ui .skw .skp-stage > .skf-bg { z-index: 0; }
/* 아궁이 불 */
#ui .skw .skp-glow { left: 104px; top: 140px; width: 180px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 168, 70, .62), rgba(255, 120, 40, .26) 48%, transparent); mix-blend-mode: screen; animation: skp-flick 2.3s linear infinite; }
#ui .skw .skp-belly { left: 112px; top: 132px; width: 168px; height: 52px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 130, 40, .4), transparent); mix-blend-mode: screen; animation: skp-flick 1.7s linear -.6s infinite; }
#ui .skw .skp-fire { left: 160px; top: 184px; width: 68px; height: 46px; overflow: hidden; border-radius: 34px 34px 2px 2px / 30px 30px 2px 2px; }
#ui .skw .skp-fl { position: absolute; top: -42px; width: 44px; height: 102px; background: url(../../assets/ui/skyisle/pot_fire.jpg) 0 0 / 352px 816px; mix-blend-mode: screen; transform-origin: 50% 88%;
  animation: skp-fx var(--t) steps(8) infinite, skp-fy calc(var(--t) * 8) steps(8) infinite; animation-delay: var(--d, 0s); transition: opacity .6s, scale .6s; }
#ui .skw .skp-fl.f1 { left: -8px; --t: .27s; --d: -.9s; scale: .9; }
#ui .skw .skp-fl.f2 { left: 12px; --t: .3s; --d: -2.1s; scale: -1.12 1.12; }
#ui .skw .skp-fl.f3 { left: 32px; --t: .25s; --d: -.3s; scale: .85; }
#ui .skw .skp-dark { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(120, 30, 10, .35), rgba(24, 12, 8, .82) 70%); opacity: 0; transition: opacity .6s; }
#ui .skw .skp-sparks > i { position: absolute; left: var(--x); top: 196px; width: var(--s, 2px); height: var(--s, 2px); background: #ffe2a0; box-shadow: 0 0 3px 1px rgba(255, 150, 50, .85); opacity: 0; animation: skp-spark var(--t) ease-out var(--d) infinite; }
/* 국 · 거품 */
#ui .skw .skp-soup { left: 103px; top: 59px; width: 184px; height: 90px; border-radius: 50%; overflow: hidden; }
#ui .skw .skp-soup > i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: calc(var(--s) * .8); margin: calc(var(--s) * -.4) 0 0 calc(var(--s) * -.5); border-radius: 50%; box-sizing: border-box; border: 2px solid #ffe09a; background: radial-gradient(circle at 35% 30%, rgba(255, 250, 220, .9) 0 18%, rgba(255, 214, 120, .45) 22%); opacity: 0; animation: skp-bub var(--t) ease-in var(--d) infinite; }
/* 재료 넣기 바퀴 — .skp-cyc 안은 새 요리가 시작될 때 다시 만들어 처음부터 */
#ui .skw .skp-cyc { inset: 0; }
#ui .skw .skp-cyc > * { position: absolute; }
#ui .skw .skp-in { margin: -18px 0 0 -18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; opacity: 0; }
#ui .skw .skp-in .skl-ico.px { max-width: 18px; max-height: 18px; }
#ui .skw .skp-ring { margin: -7px 0 0 -18px; width: 36px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(255, 236, 170, .95); opacity: 0; }
#ui .skw .skp-drop { margin: -2px 0 0 -2px; width: 4px; height: 4px; background: #ffc45c; box-shadow: 0 0 0 1px rgba(150, 70, 10, .5); opacity: 0; }
#ui .skw .skp-lid { left: 86px; top: 40px; width: 218px; height: 108px; image-rendering: pixelated; transform-origin: 50% 0; filter: drop-shadow(0 3px 0 rgba(36, 12, 0, .5)); }   /* 11-01 사용자 "뚜겅이 위에 덜 닫혀있는데?" · "뚜껑이 너무 지금 측면임" — 위에서 본 뚜껑(국 면과 같은 2:1) lid_d 109×54, 1배 (43, 24) = 국 면 다 가림(잰 값) → 사용자 "솥뚜껑좀더위로올려바 살짝" 1배 2칸 위 (43, 22) → "위로지금올린만큼한번더올려봐" 2칸 더 (43, 20) */
#ui .skw .skp-puff { left: 96px; top: 96px; width: 48px; height: 32px; margin: -16px 0 0 -24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); filter: blur(1px); opacity: 0; }
#ui .skw .skp-puff.r { left: 296px; }
#ui .skw .skp-steam > i { position: absolute; left: var(--x); top: 92px; width: var(--s); height: var(--s); margin-left: calc(var(--s) * -.5); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .4) 55%, rgba(255, 255, 255, 0)); filter: blur(1.5px); opacity: 0; animation: skp-steam var(--t) ease-out var(--d) infinite; }
#ui .skw .skp-stage.on :is(.skp-in, .skp-ring, .skp-drop) { animation: var(--a) 7s linear calc(.55s + var(--i) * .3s) infinite; }
#ui .skw .skp-stage.on .skp-in { --a: skp-in; }
#ui .skw .skp-stage.on .skp-ring { --a: skp-ring; }
#ui .skw .skp-stage.on .skp-drop { --a: skp-drop; --dx: -12px; }
#ui .skw .skp-stage.on .skp-drop.r { --dx: 12px; }
#ui .skw .skp-stage.on .skp-lid { animation: skp-lid 7s ease-in-out infinite;   /* 열림 = 들려 뒤로 젖혀짐(세로 .62) */ }
#ui .skw .skp-stage.on .skp-puff { animation: skp-puff 7s ease-out infinite; }
/* 쉼(끓이는 요리 없음) = 잔불 · 거품 · 김 · 불티 없음 · 뚜껑 가만히 */
#ui .skw .skp-stage:not(.on) .skp-fl { opacity: .45; scale: .5; }
#ui .skw .skp-stage:not(.on) .skp-fl.f2 { scale: -.55 .55; }
#ui .skw .skp-stage:not(.on) .skp-dark { opacity: .62; }
#ui .skw .skp-stage:not(.on) :is(.skp-glow, .skp-belly) { opacity: .25; animation: none; }
#ui .skw .skp-stage:not(.on) :is(.skp-sparks, .skp-soup, .skp-steam) { visibility: hidden; }
/* 지금 끓는 요리(오른쪽 위 하늘) · 다 된 요리(탁자) · 아래 줄 칸 */
#ui .skw .skp-run { right: 8px; top: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 14px; background: rgba(0, 0, 0, .55); color: #fff; }
#ui .skw .skp-run[hidden] { display: none; }
#ui .skw .skp-stage > .skp-run[data-act] { pointer-events: auto; cursor: pointer; }   /* 끓는 · 달이는 알약 누름 = 시간석 바로 → 거두기 확인창(11-05 skyrush-1105) */
#ui .skw .skp-run > span { display: flex; flex-direction: column; gap: 2px; min-width: 84px; }
#ui .skw .skp-run b { font-size: 11px; font-weight: 800; white-space: nowrap; }
#ui .skw .skp-run small { font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
#ui .skw .skp-run .skl-bar { height: 3px; }
#ui .skw .skp-stage > .skp-table { left: 344px; top: 110px; width: 134px; height: 84px; z-index: 2; display: grid; grid-template-columns: repeat(3, 44px); grid-auto-rows: 42px; align-content: center; justify-content: center; pointer-events: auto; }
#ui .skw .skp-dish { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 6px; border: 0; background: none; cursor: pointer; touch-action: manipulation; animation: skl-hop .9s ease-in-out calc(var(--k) * -.15s) infinite; filter: drop-shadow(0 0 3px rgba(255, 236, 170, .95)); }
#ui .skw .skp-dish::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 8px; border-radius: 50%; background: rgba(60, 30, 10, .35); }   /* 탁자 위 그림자 */
#ui .skw .skp-act { min-height: 34px; }
#ui .skw .skp-q { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); cursor: pointer; touch-action: manipulation; }
#ui .skw .skp-q > .skl-bar { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; }
#ui .skw .skp-q.run { box-shadow: inset 0 0 0 1.5px #f2b35c; }
#ui .skw .skp-q.wait { opacity: .62; }
#ui .skw .skp-q.wait > .skl-bar { visibility: hidden; }
#ui .skw .skp-q.empty { min-height: 0; background: none; box-shadow: none; outline: 1px dashed rgba(255, 255, 255, .22); outline-offset: -1px; font-size: 18px; line-height: 1; }
#ui .skw .skp-q.arm { box-shadow: inset 0 0 0 1.5px #ff8f84; }
#ui .skw .skp-q.arm::after { content: "×"; position: absolute; right: -3px; top: -5px; font: 900 13px/1 var(--ui-font); color: #ff8f84; text-shadow: 0 1px 2px #000; }
#ui .skw .skp-q.lock { flex-direction: column; gap: 2px; width: auto; min-width: 34px; padding: 0 5px; background: rgba(0, 0, 0, .22); }
#ui .skw .skp-q.lock .skb-ic { width: 11px; height: 11px; }
#ui .skw .skp-q.lock small { display: inline-flex; align-items: center; gap: 1px; font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; }
#ui .skw .skp-q.lock img { width: 10px; height: 10px; }
#ui .skw .skp-act .skq-take { margin-left: auto; }
@keyframes skp-fx { to { background-position-x: -352px; } }
@keyframes skp-fy { to { background-position-y: -816px; } }
@keyframes skp-flick { 0%, 100% { opacity: .82; } 9% { opacity: 1; } 17% { opacity: .7; } 31% { opacity: .95; } 44% { opacity: .76; } 58% { opacity: 1; } 71% { opacity: .68; } 86% { opacity: .9; } }
@keyframes skp-spark { 0% { opacity: 0; translate: 0 0; } 8% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; translate: var(--dx) var(--dy); } }
@keyframes skp-bub { 0% { opacity: 0; scale: .2; } 18% { opacity: 1; } 72% { scale: 1; opacity: 1; } 80% { scale: 1.3; opacity: .85; } 88%, 100% { scale: 1.6; opacity: 0; } }
@keyframes skp-steam { 0% { opacity: 0; translate: 0 0; scale: .5; } 20% { opacity: .75; } 100% { opacity: 0; translate: var(--dx, 0) -84px; scale: 1.7; } }
@keyframes skp-lid {
  0% { translate: 0 0; rotate: 0deg; scale: 1; }
  5% { translate: -6px -44px; rotate: -7deg; scale: 1 .6; }
  7% { translate: -6px -40px; rotate: -6deg; scale: 1 .62; }
  18% { translate: -7px -42px; rotate: -6.5deg; scale: 1 .61; }
  29% { translate: -6px -40px; rotate: -6deg; scale: 1 .62; }
  33% { translate: 0 0; rotate: 0deg; scale: 1; }
  35% { translate: 0 -5px; rotate: .5deg; }
  37%, 44% { translate: 0 0; rotate: 0deg; }
  45% { translate: 1px -4px; rotate: 1.5deg; } 46% { translate: 0 0; rotate: 0deg; } 47% { translate: -1px -3px; rotate: -1.2deg; }
  48%, 62% { translate: 0 0; rotate: 0deg; }
  63% { translate: -1px -4px; rotate: -1.5deg; } 64% { translate: 0 0; rotate: 0deg; } 65% { translate: 1px -3px; rotate: 1deg; }
  66%, 82% { translate: 0 0; rotate: 0deg; }
  83% { translate: 1px -5px; rotate: 2deg; } 84% { translate: 0 0; rotate: 0deg; } 85% { translate: -1px -3px; rotate: -1.5deg; } 86% { translate: 0 0; rotate: 0deg; } 87% { translate: 0 -2px; rotate: .8deg; }
  88%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes skp-puff { 0%, 44.9%, 52%, 62.9%, 70%, 82.9%, 91%, 100% { opacity: 0; scale: .4; translate: 0 0; } 45%, 63%, 83% { opacity: 1; scale: .4; translate: 0 0; } 51%, 69%, 90% { opacity: 0; scale: 1.5; translate: 0 -20px; } }
@keyframes skp-in { 0% { opacity: 0; translate: 0 -74px; scale: 1; animation-timing-function: cubic-bezier(.5, 0, 1, 1); } 1% { opacity: 1; } 6% { translate: 0 0; scale: 1; } 7.5% { translate: 0 2px; scale: 1.2 .75; } 10% { translate: 0 -3px; scale: .95 1.05; } 13% { translate: 0 0; scale: 1; opacity: 1; } 20% { translate: 0 3px; scale: .85; opacity: .9; } 26%, 100% { translate: 0 6px; scale: .6; opacity: 0; } }
@keyframes skp-ring { 0%, 5.9% { opacity: 0; scale: .3; } 6% { opacity: 1; scale: .4; } 14%, 100% { opacity: 0; scale: 1.5; } }
@keyframes skp-drop { 0%, 5.9% { opacity: 0; translate: 0 0; } 6% { opacity: 1; translate: 0 0; } 9% { translate: var(--dx) -16px; } 13% { opacity: 0; translate: calc(var(--dx) * 1.3) -2px; } 100% { opacity: 0; } }
#ui .skw .skf-act .btn { display: inline-flex; align-items: center; gap: 5px; }
#ui .skw .skf-act .btn.off { opacity: .45; }
#ui .skw .skf-alt.on { box-shadow: inset 0 0 0 2px #e8c979; }
#ui .skw .skf-pick { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px; align-content: start; overflow-y: auto; scrollbar-width: none; padding: 2px 2px 34px; }
#ui .skw .skf-card { display: flex; align-items: center; gap: 9px; height: 56px; padding: 0 10px 0 6px; border: 0; border-radius: 10px; color: #fff; text-align: left; cursor: pointer; touch-action: manipulation;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); animation: fx-card-in .36s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 22ms); }
#ui .skw .skf-card.on { box-shadow: inset 0 0 0 2px #e8c979, 0 0 10px rgba(232, 201, 121, .4); animation: fx-card-in .36s cubic-bezier(.2, .8, .3, 1) both, skl-sel 1.2s ease-in-out .4s infinite alternate; }
#ui .skw .skf-pick.still .skf-card { animation: none; }
#ui .skw .skf-pick.still .skf-card.on { animation: skl-sel 1.2s ease-in-out infinite alternate; }
#ui .skw .skf-card.lock { opacity: .55; }
#ui .skw .skf-card.lock .skl-cell { filter: grayscale(.8) brightness(.6); }
#ui .skw .skf-card .skl-cell > em.none { color: #ff8f84; }   /* 씨앗 없음 = 붉은 0 */
#ui .skw .skf-clk { flex: none; width: 10px; height: 10px; margin-right: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px currentColor;
  background: linear-gradient(currentColor, currentColor) 4.4px 2px / 1.3px 3.6px no-repeat, linear-gradient(currentColor, currentColor) 4.4px 4.4px / 3px 1.3px no-repeat; }   /* 시계(흰 선) = 자라는 시간 */
#ui .skw .skf-yield { display: inline-flex; align-items: center; gap: 1px; margin-left: 8px; color: #9fe3a0; font-weight: 800; }   /* 거두면 ×n(초록 = 좋아짐) */
#ui .skw .skf-yield .skl-ci.px { max-width: 14px; max-height: 14px; }
#ui .skw .skf-card .skq-cost { flex-direction: row; align-items: center; gap: 4px; }
#ui .skw .skf-arrow { font-size: 10px; color: rgba(255, 255, 255, .5); }

/* ---- 경매장 상점(한 단 — 위 탭 줄 · 아래 줄 목록) */
#ui .skw .skm-top { flex: none; display: flex; align-items: center; gap: 10px; }
#ui .skw .skm-top .btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
#ui .skw .skm-top .btn img { width: 16px; height: 16px; filter: brightness(0) invert(.92); }
#ui .skw .skm-list { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }   /* 줄 = 이름 · 값 · 수량 알약 셋이라 대기열 카드보다 넓게 */
#ui .skw .skm-row { cursor: default; }
#ui .skw .skm-row .skq-cost { flex-direction: row; align-items: center; gap: 6px; }
#ui .skw .skm-ns { flex: none; display: flex; gap: 4px; }
#ui .skw .skm-n { flex: none; height: 28px; min-width: 40px; padding: 0 8px; border: 0; border-radius: 999px; background: linear-gradient(#83c3bf, #548f8c); color: #fff; font: 800 11px/28px var(--ui-font); cursor: pointer; touch-action: manipulation; }
#ui .skw .skm-n.off { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .42); }

/* ---- 신사 변신 줄 */
#ui .skw.skw-life .sks { align-self: flex-start; align-content: flex-start; }   /* 넓은 몸(flex) 안에서 장 칸이 몸 높이로 늘지 않게 */
#ui .skw .sks-morph { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .55); }
#ui .skw .sks-morph.on { color: #9fe3a0; }
#ui .skw .sks-morph.on::before { content: "✓ "; }

/* ---- 생성기(흙 · 돌 · 나무) — 11-02 UI4(LANES-UI-1102 "생활 건물 8종과 같은 두 단"): 같은 날 사용자 "돌/흙 생성기 창은 팝업식 · 전체화면일 필요 없이"라 작은 팝업(.skw-pop ✕)은 그대로 두고
     폭만 넓혀(440 → 600) 안을 D4b 두 단으로: 왼쪽 진행 판(건물 그림 · 시간당 · 쌓임 막대 · [거두기] 금 알약) | 오른쪽 레벨별 생산 표(지금 줄 금 테 · 다음 줄 초록 = 좋아짐) + 보유 · 쓰임 알약.
     sky_build.css 옛 한 단(.skw-gen 최대 540)은 이 몸에서 안 쓴다. 머리 띠 건물 그림은 왼쪽 큰 그림과 겹쳐 두지 않고, 가방 표식만 ✕ 왼쪽에(거둔 것이 날아드는 곳). */
#ui .popup.skw.skw-pop.skw-gw { width: 600px; }
#ui .popup.skw.skw-pop.skw-gw > .popup-head > .skw-bag { display: block; order: 2; flex: none; margin-left: auto; width: 22px; height: 22px; background: var(--ink); opacity: .82; -webkit-mask: url(../../assets/icons/slot-bag.png) center / contain no-repeat; mask: url(../../assets/icons/slot-bag.png) center / contain no-repeat; }
#ui .popup.skw.skw-pop.skw-gw > .popup-head > .close { margin-left: 12px; }
#ui .skw.skw-gw .skw-bag.got { animation: skl-bag .42s cubic-bezier(.3, 1.6, .5, 1); }
#ui .skw .skg.skl-2 { grid-template-columns: 196px minmax(0, 1fr); height: 250px; }   /* 짧은 창 = 스크롤 없이 한 화면(고품질UI §1) — 표만 안에서 끌기 */
#ui .skw .skg-side { align-items: stretch; gap: 5px; }
#ui .skw .skg-side .skw-pic { align-self: center; }
#ui .skw .skg-side .skw-pic, #ui .skw .skg-side .skw-pic canvas { width: 78px; height: 65px; }   /* 96×80 이면 [바로 끝내기]까지 판 아래로 넘침(돌 생성기 Lv1 폰 가로 캡처) */
#ui .skw .skg-side .skw-item { justify-content: center; font-size: 13px; font-weight: 800; }
#ui .skw .skg-side .skw-rate { text-align: center; font-size: 12px; font-weight: 800; color: #f1d58a; }
#ui .skw .skg-side .skw-left { text-align: center; font-variant-numeric: tabular-nums; }
#ui .skw .skg-side .skw-bar { max-width: none; }
#ui .skw .skg-side .skw-btns { margin-top: auto; align-items: center; }
#ui .skw .skg-side .skw-collect { min-width: 112px; }
#ui .skw .skg-main { gap: 6px; }
#ui .skw .skg-tbl { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: none; }
#ui .skw .skg-tr { flex: none; display: grid; grid-template-columns: 34px 1fr 1fr 1.15fr; align-items: center; height: 21px; padding: 0 10px; border-radius: 6px; text-align: right; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .74); font-variant-numeric: tabular-nums; animation: fx-card-in .36s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 22ms); }
#ui .skw .skg-tr > b { text-align: left; font-weight: 800; color: rgba(255, 255, 255, .55); }
#ui .skw .skg-tr:nth-child(even) { background: rgba(255, 255, 255, .035); }
#ui .skw .skg-th { position: sticky; top: 0; z-index: 1; height: 20px; background: rgb(16, 18, 22); font-size: 10.5px; color: rgba(255, 255, 255, .5); animation: none; }
#ui .skw .skg-th > b { color: inherit; }
#ui .skw .skg-tr.past { color: rgba(255, 255, 255, .4); }
#ui .skw .skg-tr.now { background: rgba(232, 201, 121, .14); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .75); color: #fff; }
#ui .skw .skg-tr.now > b { color: #f1d58a; }
#ui .skw .skg-tr.next { color: #9fe3a0; }
#ui .skw .skg-tbl.still .skg-tr { animation: none; }
#ui .skw .skg-own { flex: none; display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
#ui .skw .skg-ownt { flex: none; display: flex; flex-direction: column; gap: 2px; }
#ui .skw .skg-ownt b { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
#ui .skw .skg-ownt small { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .72); white-space: nowrap; font-variant-numeric: tabular-nums; }
#ui .skw .skg-use { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
#ui .skw .skg-use i { flex: none; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font: 700 10.5px/22px var(--ui-font); font-style: normal; color: rgba(255, 255, 255, .78); white-space: nowrap; }

/* ---- 연금술솥 — 11-02 UI4(LANES-UI-1102): 넓은 몸(skw-life) 두 단 = 목공소 · 식당(대기열)과 같은 결. 왼쪽 진행 판 = 지금 물약 칸 · 속도 · 쌓임 · 재료 · [거두기] · 퀵슬롯 |
     오른쪽 = [쉬기] + 물약 카드 2열(.skq-rc 카드 60 · 그림 칸 48 등급색 · 재료 보유/필요). sky_build.css 옛 한 단(.skc 최대 640 · .skc-g 64 칸 · 등급 줄)을 여기서 덮는다(이 파일이 뒤에 읽힌다). */
#ui .skw.skw-life .skc { display: grid; max-width: none; gap: 14px; }
#ui .skw .skc-side { gap: 7px; }
#ui .skw .skc-now { flex: none; display: flex; align-items: center; gap: 10px; }
#ui .skw.skw-life .skc-name { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; font-size: 13px; }
#ui .skw.skw-life .skc-name b { font-weight: 800; white-space: nowrap; }
#ui .skw.skw-life .skc-name small { font-size: 11px; font-weight: 700; color: #9fe3a0; }
#ui .skw .skc-side .skw-bar { max-width: none; }
#ui .skw.skw-life .skc-mat .skb-chip b i { margin: 0; font-size: inherit; }
#ui .skw .skc-side .skw-collect { align-self: flex-start; min-width: 96px; }
#ui .skw.skw-life .skc-quick { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
#ui .skw .skc-main { gap: 6px; }
#ui .skw .skc-head { flex: none; display: flex; align-items: center; gap: 10px; }
#ui .skw.skw-life .skc-rest { align-self: auto; margin-left: auto; height: 26px; padding: 0 14px; line-height: 26px; }
#ui .skw.skw-life .skc .skc-g { flex-direction: row; justify-content: flex-start; gap: 10px; width: auto; height: 60px; padding: 0 10px 0 6px; border-radius: 10px; text-align: left;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); animation: fx-card-in .36s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 22ms); }
#ui .skw.skw-life .skc .skc-g img.skl-ico.px { width: auto; height: auto; }
#ui .skw.skw-life .skc .skq-nm b { font-size: 12.5px; }
#ui .skw.skw-life .skc .skq-nm > small { position: static; display: flex; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .62); }
#ui .skw.skw-life .skc .skb-chip b { font-size: 11px; }
#ui .skw.skw-life .skc .skc-g.on { box-shadow: inset 0 0 0 2px #e8c979, 0 0 10px rgba(232, 201, 121, .4); animation: fx-card-in .36s cubic-bezier(.2, .8, .3, 1) both, skl-sel 1.2s ease-in-out .4s infinite alternate; }
#ui .skw.skw-life .skc .skc-g.lock { opacity: .45; }
#ui .skw.skw-life .skc .skc-g.lock .skl-cell { filter: grayscale(.8); }
#ui .skw.skw-life .skc .skc-g.lock .skq-nm > small { color: #f1d58a; }
#ui .skw.skw-life .skc .skc-g.lack .skq-nm b { color: rgba(255, 255, 255, .78); }
#ui .skw.skw-life .skc .skc-g .skc-buy { align-self: flex-end; }
#ui .skw.skw-life .skc.still .skc-g { animation: none; }   /* 재료 수 · 고른 물약이 바뀌어 다시 그려도 카드가 다시 올라오지 않게 */
#ui .skw.skw-life .skc.still .skc-g.on { animation: skl-sel 1.2s ease-in-out infinite alternate; }
#ui .skw.skw-life .skc .skc-g.skc-no { animation: pq-no .3s ease-in-out; }   /* 잠긴 카드 누름 = 흔들림(sky_build.css 와 같은 값 — 위 카드 등장 규칙이 덮지 않게) */

@keyframes skl-pop { 0% { scale: 1; } 30% { scale: .9; } 65% { scale: 1.08; } 100% { scale: 1; } }
@keyframes skl-sway { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes skl-hop { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -3px; } }
@keyframes skl-shine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
@keyframes skl-sel { to { box-shadow: inset 0 0 0 2px #f6dd96, 0 0 14px rgba(232, 201, 121, .6); } }
@keyframes skl-bag { 0% { scale: 1; } 40% { scale: 1.32; } 100% { scale: 1; } }
#ui .skw .skq-nm > .skq-buff { font-size: 10px; font-style: normal; font-weight: 700; color: #68d890; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 요리솥 카드 효과 줄(11-04 W23 R24) — 초록 = 좋아짐(quest.css 받을 보상 점과 같은 값) */