/* 건물 창 공용 틀(.skr — sky_craft_ui.js). 왼쪽 = 건물 그림 판 하나 | 오른쪽 = 탭 · 칩 한 줄 → 아이콘 3열 격자 | 상세 판.
   그림 판 위에 얹는 것: 위 = 숙련 알약 · [레벨업](창 머리 아래 .skw-up 을 판 첫 칸 위로 겹침) · 아래 띠(.skr-strip) = 대기열 칸 · 퀵슬롯 · [받기] · [작물 상점].
   크기 = 고품질UI 모바일 기준(GUI 450): 격자 칸 56(그림 칸 48) · 상세 결과 칸 56 · 재료 칸 40 · 알약 28 · 이름 11~14 · 탭 줄 30.
   폰 가로(GUI 약 1000 × 450): 그림 판 440 · 격자 3 × 56 + 틈 6 = 180 · 상세 약 320. 좁은 화면은 그림 판이 창 폭 46% 로 줄어든다. 고른 칸 = 크기 대신 금 테 맥박. */
#ui .skw:has(> .skw-body > .skr) { --sks: min(440px, 46%); display: grid; grid-template-columns: var(--sks) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 12px; }
#ui .skw.skw-gw:has(> .skw-body > .skr) { --sks: 220px; width: 560px; }
#ui .skw:has(> .skw-body > .skr) > .popup-head { grid-column: 1 / -1; }
#ui .skw:has(> .skw-body > .skr) > .skw-body { grid-column: 1 / -1; grid-row: 2; min-height: 0; }
/* 숙련 · [레벨업] = 그림 판 위쪽에 얹음(판 위 어두운 그라데이션 띠 — 판 그림이 비침) */
#ui .skw:has(> .skw-body > .skr) > .skw-up { grid-column: 1; grid-row: 2; align-self: start; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: 0;
  margin: 0; padding: 7px 7px 18px; border: 0; border-radius: 12px 12px 0 0; background: linear-gradient(rgba(0, 0, 0, .55), transparent); pointer-events: none; }
#ui .skw:has(> .skw-body > .skr) > .skw-up > * { pointer-events: auto; }
#ui .skw:has(> .skw-body > .skr) > .skw-up :is(.skw-hpic, .skw-next) { display: none; }
#ui .skw:has(> .skw-body > .skr) .skw-mxw:not([hidden]) { width: 150px; gap: 3px; padding: 5px 10px 6px; border-radius: 12px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
#ui .skw:has(> .skw-body > .skr) .skw-mxw b { font-size: 11px; }
#ui .skw:has(> .skw-body > .skr) .skw-act { margin-left: auto; }
#ui .skw:has(> .skw-body > .skr) .skw-act .btn { height: 28px; padding: 0 12px; font-size: 12px; line-height: 28px; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
#ui .skw:has(> .skw-body > .skr) .skw-act .skw-why { height: 26px; background: rgba(0, 0, 0, .55); }

/* 몸 */
#ui .skw .skr { position: relative; flex: 1; display: grid; grid-template-columns: var(--sks) 180px minmax(0, 1fr); grid-template-rows: 30px minmax(0, 1fr); gap: 8px 12px; min-width: 0; min-height: 0; max-width: none; }
#ui .skw .skr > .skl-main { display: contents; }   /* 머리 줄 · 격자 · 넓은 판이 .skr 격자 칸에 바로 놓인다 */
#ui .skw .skr > .skl-side { grid-column: 1; grid-row: 1 / -1; position: relative; display: block; min-height: 0; padding: 0; overflow: hidden; border-radius: 12px;
  background: radial-gradient(ellipse 60% 46% at 50% 54%, rgba(255, 220, 160, .16), transparent 72%), rgba(0, 0, 0, .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
#ui .skw .skr .skr-head { grid-column: 2 / -1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#ui .skw .skr .skr-head > * { flex: none; }
#ui .skw .skr .skr-head .skl-h { font-size: 12.5px; }
#ui .skw .skr .skr-head .skw-tabs { margin: 0; }
#ui .skw .skr .skq-chips { gap: 0; }
#ui .skw .skr .skq-chips[hidden] { display: none; }
#ui .skw .skr .skr-head > .skq-chips { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }   /* 탭 + 등급 칩이 넘치면 칩 줄만 끌어 넘김 */
#ui .skw .skr .skd-grid { grid-column: 2; grid-row: 2; grid-template-columns: repeat(3, 56px); grid-auto-rows: 56px; gap: 6px; padding: 2px 0 34px; }   /* 아래 34 = 알림 알약 자리 */
#ui .skw .skr > .skd { grid-column: 3; grid-row: 2; }
#ui .skw .skr .skd-grid > .skfd-empty { grid-column: 1 / -1; margin: 24px 0; }
#ui .skw .skr > .skl-msg { z-index: 7; }
/* 축제 띠(목공소 — festival.js 가 .skl-main 맨 앞에 끼움) = 그림 판 위쪽, 숙련 · [레벨업] 줄 아래(아래쪽은 만드는 것 알약 · 띠 자리) */
#ui .skw .skr .fest-band { grid-column: 1; grid-row: 1 / -1; align-self: start; justify-self: center; z-index: 4; height: 26px; margin-top: 50px; background-color: rgba(30, 60, 110, .82); }
#ui .skw .skr .skq-fpop { top: 34px; }

/* 격자 칸 = 아이콘만(이름은 상세 판) · 잠김 = 자물쇠 + 아래 작은 Lv 표 */
#ui .skw .skr .skd-c { width: 56px; height: 56px; justify-content: center; gap: 0; padding: 0; }
#ui .skw .skr .skd-c > .skd-lv { position: absolute; left: 50%; bottom: 1px; z-index: 1; translate: -50% 0; height: 14px; padding: 0 5px; border-radius: 7px; background: rgba(0, 0, 0, .72);
  font: 800 9.5px/14px var(--ui-font); color: #f1d58a; white-space: nowrap; }
#ui .skw .skr .skd-c.lock .skd-lk { bottom: 8px; }

/* 그림 판 안: 장면(솥 · 밭 · 우리)은 판 안에 무대 통째로(sky_craft_ui.js fit) · 남는 위아래 = 같은 그림 흐린 바탕 */
#ui .skw .skr .skf-scene { position: absolute; inset: 0; width: auto; height: auto; flex: none; border-radius: 0; box-shadow: none; background: #15171b; }
#ui .skw .skr .skr-blur { position: absolute; left: -16px; top: -16px; width: calc(100% + 32px); height: calc(100% + 32px); object-fit: cover; filter: blur(10px) brightness(.5) saturate(1.1); pointer-events: none; }
#ui .skw .skr .skf-stage, #ui .skw .skr .skf-stage.k-pot { left: 50%; top: 50%; translate: -50% -50%; transform-origin: 50% 50%; }
/* 장면 없는 건물(목공소 · 석공소 · 풍차 · 생성기) = 큰 건물 그림 */
#ui .skw .skr .skr-bpic { position: absolute; left: 50%; top: 47%; translate: -50% -50%; width: 216px; height: 180px; }
#ui .skw .skr .skr-bpic::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: 2px; z-index: -1; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(4px); }
#ui .skw .skr .skr-bpic canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
#ui .skw .skr.skr-g .skr-bpic { top: 54%; width: 168px; height: 140px; }
/* 만드는 것 알약(장면 없는 건물 = 판 아래 띠 위 가운데) */
#ui .skw .skr > .skl-side > .skp-run { position: absolute; left: 50%; right: auto; top: auto; bottom: 66px; translate: -50% 0; }
/* 연금술솥 무대도 판 가운데(sky_cauldron.css 의 아래 붙임은 옛 좁은 판용) — 달이는 알약이 [레벨업] 줄 밑으로 */
#ui .skw .skr .skf-stage.k-pot.skc-stage { top: 50%; bottom: auto; }
/* 아래 띠 */
#ui .skw .skr .skr-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; padding: 18px 8px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62) 45%); }
#ui .skw .skr .skr-strip:empty { display: none; }
#ui .skw .skr .skr-strip .skf-h1 { font-size: 11.5px; font-weight: 800; color: rgba(255, 255, 255, .82); white-space: nowrap; font-variant-numeric: tabular-nums; }
#ui .skw .skr .skr-strip .skq-take, #ui .skw .skr .skr-strip .skw-collect { margin-left: auto; height: 28px; padding: 0 14px; font-size: 12px; line-height: 28px; }
#ui .skw .skr .skr-strip .skw-collect[hidden] { display: none; }
#ui .skw .skr .skp-q.done { box-shadow: inset 0 0 0 1.5px #9fe3a0, 0 0 8px rgba(159, 227, 160, .3); }
#ui .skw .skr .skp-q.done > .skl-bar::after { background: linear-gradient(90deg, #7fd07f, #c9efa0); }

/* 생성기(작은 팝업): 그림 판 | 자원 · 쌓임 · 단추 */
#ui .skw .skr.skr-g { grid-template-columns: var(--sks) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 236px; }
#ui .skw .skr.skr-g > .skl-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 4px 0 2px; }
#ui .skw .skr-g .skg-own { display: flex; align-items: center; gap: 10px; }
#ui .skw .skr-g .skg-ownt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ui .skw .skr-g .skg-ownt b { font-size: 14px; font-weight: 800; white-space: nowrap; }
#ui .skw .skr-g .skg-ownt small { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
#ui .skw .skr-g .skw-rate { font-size: 12px; font-weight: 800; color: #f1d58a; }
#ui .skw .skr-g .skw-bar { max-width: none; }
#ui .skw .skr-g .skw-left { font-variant-numeric: tabular-nums; }
#ui .skw .skr-g .skw-btns { margin-top: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
#ui .skw .skr-g .skw-btns .btn { flex: none; height: 28px; padding: 0 12px; font-size: 12px; line-height: 28px; }
#ui .skw .skr-g .skw-btns .btn[hidden] { display: none; }
#ui .popup.skw .skr-g .skw-rush { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0 12px 0 10px; background: rgba(8, 12, 20, .55); color: #fff; box-shadow: inset 0 0 0 1px rgba(150, 236, 230, .45); }
#ui .popup.skw .skr-g .skw-rush img { width: 16px; height: 16px; object-fit: contain; }
#ui .popup.skw .skr-g .skw-rush b { font-weight: 900; font-variant-numeric: tabular-nums; }
#ui .popup.skw .skr-g .skw-rush b.lack { color: #ff9d92; }

/* 목록 칸 */
#ui .skw .skd-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); grid-auto-rows: max-content; gap: 6px; align-content: start;
  overflow-y: auto; scrollbar-width: none; padding-bottom: 34px; }
#ui .skw :is(.skd-grid, .skd)[hidden] { display: none; }
#ui .skw .skd-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 2px 5px; border: 0; border-radius: 10px; color: #fff; cursor: pointer; touch-action: manipulation;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  animation: fx-card-in .32s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 25ms); transition: transform .18s cubic-bezier(.3, 1.8, .5, 1); }
#ui .skw .skd-grid.still .skd-c { animation: none; }
#ui .skw .skd-c:active { transform: scale(.95); transition-duration: .06s; }
#ui .skw .skd-c.on { background: rgba(232, 201, 121, .12); box-shadow: inset 0 0 0 1.5px #e8c979, 0 0 10px rgba(232, 201, 121, .35); animation: skl-sel 1.2s ease-in-out infinite alternate; }
#ui .skw .skd-grid.still .skd-c.on { animation: skl-sel 1.2s ease-in-out infinite alternate; }
#ui .skw .skd-c.lack .skl-cell { opacity: .72; }
#ui .skw .skd-c.run::after { content: ""; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #8fe6df; box-shadow: 0 0 6px #8fe6df; }   /* 지금 만드는 · 먹는 중 · 퀵슬롯 */
#ui .skw :is(.skd-c, .skd-top).lock .skl-cell > :not(.skd-lk):not(em) { filter: grayscale(.85) brightness(.55); }
#ui .skw .skd-lk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#ui .skw .skd-lk .skb-ic { width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 2px #000); }

/* 상세 판 */
#ui .skw .skd { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 12px; border-radius: 12px;
  background: rgba(0, 0, 0, .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
#ui .skw .skd-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#ui .skw .skd.fx-swap > .skd-body > *, #ui .skw .skd.fx-swap > .skd-act { animation: fx-card-in .26s cubic-bezier(.2, .8, .3, 1) both; }
#ui .skw .skd-top { display: flex; align-items: center; gap: 10px; }
#ui .skw .skd-top .skl-cell { width: 56px; height: 56px; cursor: pointer; }
#ui .skw .skd-nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#ui .skw .skd-nm b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .skw .skd-nm small { font-size: 11px; font-weight: 700; color: #9fe3b0; }   /* 효과 = 초록(좋아짐) */
#ui .skw .skd-h { margin: 2px 0 0; font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, .6); }
#ui .skw .skd-mats { display: flex; flex-wrap: wrap; gap: 8px; }
#ui .skw .skd-m { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
#ui .skw .skd-m .skl-cell { width: 40px; height: 40px; }
#ui .skw .skd-m .skl-ico { width: 30px; height: 30px; }
#ui .skw .skd-m .skl-ico.px { max-width: 16px; max-height: 16px; }
#ui .skw .skd-m small { font: 700 10.5px/1 var(--ui-font); color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
#ui .skw .skd-m small b { color: #fff; }
#ui .skw .skd-m.lack small b { color: #ff8f84; }
#ui .skw .skd-m:active .skl-cell { transform: scale(.92); }
#ui .skw .skd-info { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .08); }
#ui .skw .skd-info span { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
#ui .skw .skd-info i { font-style: normal; color: rgba(255, 255, 255, .6); }
#ui .skw .skd-info b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ui .skw .skd-prog { display: flex; flex-direction: column; gap: 5px; }
#ui .skw .skd-prog span { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; }
#ui .skw .skd-prog i { font-style: normal; color: #a8d8cf; }
#ui .skw .skd-prog small { font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
#ui .skw .skd-prog .skl-bar { height: 6px; border-radius: 3px; }
#ui .skw .skd-note { font-size: 11px; color: rgba(255, 255, 255, .6); }
#ui .skw .skd-act { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#ui .skw .skd-act .btn { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; font-size: 12px; line-height: 28px; }
#ui .skw .skd-act .btn.no { opacity: .5; }   /* 할 수 없음 = 흐림(누르면 까닭 한 줄) */
#ui .skw .skd-act .btn.off { opacity: .5; pointer-events: none; }
#ui .skw .skd-act .skw-rush img { width: 16px; height: 16px; }
#ui .popup.full.skw .skd-act .skw-rush { margin-right: 0; padding: 0 12px 0 10px; gap: 4px; }   /* 머리 띠용 오른쪽 여백 8 을 뺀다 — 두 단추가 한 줄 */

/* 고른 대기열 칸 */
#ui .skw :is(.skq-slot, .skp-q).on { box-shadow: inset 0 0 0 1.5px #e8c979, 0 0 8px rgba(232, 201, 121, .35); }
/* 장면이 고른 것을 보인다: 끓이기 · 달이기 전 = 고른 제작법 재료가 솥 위에 떠 흔들림 */
#ui .skw .skp-stage.pick:not(.on) .skp-in, #ui .skw .skc-stage.pick:not(.on) .skc-in { opacity: .9; animation: skd-hover 1.8s ease-in-out calc(var(--i) * -.6s) infinite alternate; }
@keyframes skd-hover { from { translate: 0 -40px; } to { translate: 0 -50px; } }