/* 연금술솥 창 — sky_cauldron.js. 장면 = caul_bg 247×167(해 질 녘 탑 꼭대기 연금술 공방 — 노을 창 · 촛불 · 증류기 불 · 빛나는 청록 물약, Codex 도트 정수 2배, 11-05 caulbg 색 제한 없이 다시). 판 크기 · 알약 자리만 요리솥 장면(.skf-stage.k-pot · .skp-run)과 같고,
   연출은 요리솥(불 · 불티 · 김 · 거품)과 다르게 연금술 전용(11-05 사용자 "요리솥 그대로 따라하지 말고 배경 다른 걸로, 연출도 다르게"):
   바닥 마법진이 돌며 빛남 · 물약 면 소용돌이 · 떠올라 흔들리며 사라지는 빛 방울 · 솥 테를 넘쳐 흘러내리는 안개 · 재료가 솥 둘레를 돌다 빨려 들어가 별빛 터짐 ·
   증류기 병 맥동과 방울 · 다 된 병은 탁자 위에 떠서 반짝임. 색 = --pc(달이는 물약 대표색, 쉼 = 그림 물약 청록 · JS PC 표). 쉼 = 방이 조금 어둡고 마법진 · 물약 면 꺼짐, 촛불 · 창 반짝임만.
   자리(caul_bg 1배 × 2 — 솥 실루엣 caul_mask 도 같은 1배): 물약 면 (100–270, 114–162) · 마법진 가운데 (181, 278) 310×92 · 탁자 위 (304–492, 152–200) · 증류기 병 (383, 134) (468, 140). */
#ui .skw .skf-scene.k-caul { background: #3b2418; }
#ui .skw .skc-stage { --pc: #2ed8d2; }
/* 판은 몸 높이에 따라 무대(334)의 위 약 255만 보였다(sandbox 740×360 · Note20 캡처) — 요리솥처럼 위에 붙이면 바닥 마법진이 잘려
   아래에 붙인다(보이는 곳 ≈ y 69–324: 솥 · 마법진 · 탁자 · 창 아랫부분). 달이는 알약은 잘린 위쪽 밖으로 나가지 않게 내린다. */
#ui .skw .skf-stage.k-pot.skc-stage { top: auto; bottom: -10px; }
#ui .skw .skc-stage > .skp-run { top: 84px; }
#ui .skw .skc-stage > :is(.skc-sky, .skc-rune, .skc-mist, .skc-motes) { inset: 0; }
#ui .skw .skc-stage :is(.skc-sky, .skc-rune, .skc-pool, .skc-mist, .skc-motes) i { position: absolute; }
/* 쉼 = 방이 저녁빛으로 가라앉음 */
#ui .skw .skc-dim { inset: 0; background: rgba(28, 12, 20, .3); transition: opacity .8s; }
#ui .skw .skc-stage.on .skc-dim { opacity: 0; }
/* 창 별 · 촛불 — 늘 */
#ui .skw .skc-sky > i { left: var(--x); top: var(--y); width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff6c8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: skc-twk var(--t) ease-in-out var(--d) infinite; }
#ui .skw .skc-cdl { width: 6px; height: 10px; margin: -10px 0 0 -3px; border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%; background: radial-gradient(ellipse at 50% 75%, #fff 0 25%, #ffd36a 40%, #ff8a2a 75%, transparent 76%);
  box-shadow: 0 0 10px 4px rgba(255, 170, 70, .35); transform-origin: 50% 100%; animation: skc-cdl .9s ease-in-out var(--d, 0s) infinite alternate; }
/* 방을 밝히는 물약 빛 · 마법진(평면 원을 눕혀 돌림 — 그림 마법진과 같은 310×92) */
#ui .skw .skc-light { left: 0; top: 40px; width: 380px; height: 300px; background: radial-gradient(closest-side, color-mix(in srgb, var(--pc) 34%, transparent), transparent); mix-blend-mode: screen; opacity: 0; transition: opacity .8s; }
#ui .skw .skc-stage.on .skc-light { opacity: 1; animation: skc-breathe 2.4s ease-in-out infinite alternate; }
#ui .skw .skc-rune { mask: url(../../assets/ui/skyisle/caul_mask.png) 0 0 / 494px 334px no-repeat; mix-blend-mode: screen; }   /* 솥 몸 · 다리 앞을 비움(caul_mask = 솥 실루엣 손 다각형) — 마법진이 솥 뒤 바닥에 */
#ui .skw .skc-rglow { left: 26px; top: 232px; width: 310px; height: 92px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pc) 55%, transparent), color-mix(in srgb, var(--pc) 18%, transparent) 70%, transparent);
  opacity: .12; transition: opacity .8s; }
#ui .skw .skc-stage.on .skc-rglow { opacity: .7; animation: skc-flare 7s linear infinite; }
#ui .skw .skc-rc { left: 181px; top: 278px; width: var(--w); height: var(--w); margin: calc(var(--w) * -.5) 0 0 calc(var(--w) * -.5); transform: scaleY(.3) rotate(0deg); opacity: .18; transition: opacity .8s; }
#ui .skw .skc-rc > i { inset: 0; border-radius: 50%; }
#ui .skw .skc-rc.o { --w: 300px; }
#ui .skw .skc-rc.o > i { border: 3px dashed color-mix(in srgb, var(--pc) 80%, #fff); box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 70%, transparent), inset 0 0 10px color-mix(in srgb, var(--pc) 50%, transparent); }
#ui .skw .skc-rc.m { --w: 230px; }
#ui .skw .skc-rc.m > i { border: 2px dotted color-mix(in srgb, var(--pc) 60%, #fff); }
#ui .skw .skc-rc.n { --w: 168px; }
#ui .skw .skc-rc.n > i { border-radius: 0; background: linear-gradient(color-mix(in srgb, var(--pc) 70%, #fff), color-mix(in srgb, var(--pc) 70%, #fff));
  clip-path: polygon(50% 0, 93.3% 75%, 6.7% 75%, 50% 0, 50% 6%, 12% 72%, 88% 72%, 50% 6%); opacity: .9; }
#ui .skw .skc-stage.on .skc-rc { opacity: .95; animation: skc-spin var(--s, 16s) linear infinite; }
#ui .skw .skc-stage.on .skc-rc.m { --s: 11s; animation-direction: reverse; }
#ui .skw .skc-stage.on .skc-rc.n { --s: 7s; }
/* 증류기 — 둥근 병이 번갈아 맥동 · 관 끝에서 방울 */
#ui .skw .skc-flask { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pc) 85%, #fff), color-mix(in srgb, var(--pc) 30%, transparent) 60%, transparent); mix-blend-mode: screen; opacity: 0; transition: opacity .8s; }
#ui .skw .skc-stage.on .skc-flask { opacity: .8; animation: skc-breathe 1.6s ease-in-out var(--d, 0s) infinite alternate; }
#ui .skw .skc-drip { left: 463px; top: 106px; width: 3px; height: 4px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: color-mix(in srgb, var(--pc) 70%, #fff); opacity: 0; }
#ui .skw .skc-stage.on .skc-drip { animation: skc-drip 1.8s ease-in infinite; }
/* 물약 면: 그림 청록 면에 물약 색을 입히고(color) 소용돌이 · 가운데 빛 */
#ui .skw .skc-pool { left: 100px; top: 114px; width: 170px; height: 48px; border-radius: 50%; overflow: hidden; }
#ui .skw .skc-tint { inset: 0; background: var(--pc); mix-blend-mode: color; opacity: 0; transition: opacity .8s; }
#ui .skw .skc-swirl { left: 0; top: 50%; width: 170px; height: 170px; margin-top: -85px; transform: scaleY(.28) rotate(0deg);
  background: repeating-conic-gradient(from 0deg, transparent 0 8%, rgba(255, 255, 255, .5) 13%, transparent 21% 33.33%); mask: radial-gradient(closest-side, transparent 8%, #000 30%, #000 80%, transparent); opacity: 0; mix-blend-mode: screen; transition: opacity .8s; }
#ui .skw .skc-core { left: 60px; top: 14px; width: 50px; height: 20px; border-radius: 50%; background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--pc) 70%, transparent) 55%, transparent); mix-blend-mode: screen; opacity: 0; }
#ui .skw .skc-stage.on .skc-tint { opacity: .85; }
#ui .skw .skc-tint::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--pc) 55%, transparent), transparent); mix-blend-mode: screen; }   /* color 만 입히면 금 · 주황이 탁해짐 → 밝기 더함 */
#ui .skw .skc-stage.on .skc-swirl { opacity: .8; animation: skc-swirl 2.6s linear infinite; }
#ui .skw .skc-stage.on .skc-core { animation: skc-core 7s ease-out infinite; }
/* 빛 방울 — 물약 면에서 떠올라 좌우로 흔들리며 작아지고 사라짐(거품처럼 터지지 않음) */
#ui .skw .skc-motes > i { left: var(--x); top: 136px; width: var(--s); height: var(--s); margin: calc(var(--s) * -.5) 0 0 calc(var(--s) * -.5); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, color-mix(in srgb, var(--pc) 85%, #fff) 45%, transparent 72%); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--pc) 70%, transparent); opacity: 0; animation: skc-mote var(--t) ease-out var(--d) infinite; }
/* 안개 — 솥 테에서 넘쳐 옆 · 아래로 흘러내림 */
#ui .skw .skc-mist > i { left: var(--x); top: 128px; width: var(--s); height: calc(var(--s) * .55); margin: calc(var(--s) * -.27) 0 0 calc(var(--s) * -.5); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pc) 45%, rgba(255, 255, 255, .5)), transparent); opacity: 0; animation: skc-mist var(--t) ease-in-out var(--d) infinite; }
#ui .skw .skc-stage:not(.on) :is(.skc-motes, .skc-mist) { visibility: hidden; }
/* 재료 — 솥 둘레를 반 바퀴 돌며 작아지다 빨려 들고, 닿으면 물약 색 고리 · 별빛 터짐 (7초 바퀴) */
#ui .skw .skc-cyc { inset: 0; }
#ui .skw .skc-cyc > * { position: absolute; }
#ui .skw .skc-in { margin: -18px 0 0 -18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; opacity: 0; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pc) 80%, #fff)); }
#ui .skw .skc-in .skl-ico.px { max-width: 18px; max-height: 18px; }
#ui .skw .skc-ring { margin: -9px 0 0 -22px; width: 44px; height: 18px; border-radius: 50%; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--pc) 60%, #fff); box-shadow: 0 0 8px var(--pc); opacity: 0; }
#ui .skw .skc-burst { margin: -14px 0 0 -14px; width: 28px; height: 28px; background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--pc) 80%, #fff) 50%, transparent);
  clip-path: polygon(50% 0, 58% 36%, 85% 15%, 64% 42%, 100% 50%, 64% 58%, 85% 85%, 58% 64%, 50% 100%, 42% 64%, 15% 85%, 36% 58%, 0 50%, 36% 42%, 15% 15%, 42% 36%); opacity: 0; }
#ui .skw .skc-stage.on :is(.skc-in, .skc-ring, .skc-burst) { animation: var(--a) 7s linear calc(var(--i) * .5s) infinite; }
#ui .skw .skc-stage.on .skc-in { --a: skc-in; }
#ui .skw .skc-stage.on .skc-ring { --a: skc-ring; }
#ui .skw .skc-stage.on .skc-burst { --a: skc-burst; }
@keyframes skc-twk { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: 1; scale: 1; } }
@keyframes skc-cdl { from { scale: 1 1; opacity: .9; } to { scale: .85 1.15; opacity: 1; } }
@keyframes skc-breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes skc-spin { to { transform: scaleY(.3) rotate(360deg); } }
@keyframes skc-swirl { to { transform: scaleY(.28) rotate(360deg); } }
@keyframes skc-flare { 0%, 16% { opacity: .55; } 20% { opacity: 1; } 24% { opacity: .65; } 27% { opacity: 1; } 31% { opacity: .65; } 34% { opacity: 1; } 42%, 100% { opacity: .55; } }
@keyframes skc-core { 0%, 18% { opacity: .2; scale: .8; } 21% { opacity: 1; scale: 1.25; } 27% { opacity: .9; scale: 1.15; } 34% { opacity: 1; scale: 1.3; } 50%, 100% { opacity: .2; scale: .8; } }
@keyframes skc-drip { 0%, 40% { opacity: 0; translate: 0 0; } 45% { opacity: 1; translate: 0 0; } 70% { opacity: 1; translate: 0 18px; } 72%, 100% { opacity: 0; translate: 0 20px; } }
@keyframes skc-mote { 0% { opacity: 0; translate: 0 0; scale: .6; } 12% { opacity: 1; scale: 1; } 40% { translate: var(--dx) calc(var(--dy) * .4); } 70% { opacity: .8; translate: calc(var(--dx) * -.6) calc(var(--dy) * .75); } 100% { opacity: 0; translate: calc(var(--dx) * .4) var(--dy); scale: .3; } }
@keyframes skc-mist { 0% { opacity: 0; translate: 0 -4px; scale: .6; } 25% { opacity: .55; } 100% { opacity: 0; translate: var(--dx) 46px; scale: 1.5; } }
@keyframes skc-in { 0% { opacity: 0; translate: -96px -52px; scale: 1.1; rotate: 0deg; } 2% { opacity: 1; } 8% { translate: -40px -76px; scale: 1; } 14% { translate: 46px -52px; scale: .85; rotate: 160deg; } 18% { translate: 30px -26px; scale: .6; rotate: 260deg; }
  20% { translate: 0 0; scale: .2; rotate: 360deg; opacity: 1; } 21%, 100% { opacity: 0; translate: 0 0; scale: .2; } }
@keyframes skc-ring { 0%, 19.9% { opacity: 0; scale: .3; } 20% { opacity: 1; scale: .4; } 30%, 100% { opacity: 0; scale: 2; } }
@keyframes skc-burst { 0%, 19.9% { opacity: 0; scale: .2; rotate: 0deg; } 20.5% { opacity: 1; scale: 1.3; } 26%, 100% { opacity: 0; scale: .5; rotate: 90deg; } }
/* 탁자 = 다 된 병(떠서 반짝임 · 누르면 거두기) + ×수 알약(가득 = 적갈) */
#ui .skw .skp-stage > .skc-table { left: 312px; top: 132px; width: 176px; height: 66px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; grid-template-columns: repeat(6, 28px); grid-auto-rows: 50px; align-content: end; }   /* 한 줄(최대 6병) — 뒤 증류기를 가리지 않게 */
#ui .skw .skc-stage > .skc-table[hidden] { display: none; }
#ui .skw .skc-table > .skp-dish { padding: 0 0 8px; animation: skc-float 2.2s ease-in-out calc(var(--k) * -.37s) infinite; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pc) 70%, #fff)); }
#ui .skw .skc-table > .skp-dish::before { left: 3px; right: 3px; background: rgba(10, 4, 20, .4); }
#ui .skw .skc-table > .skp-dish::after { content: ""; position: absolute; right: -2px; top: 4px; width: 8px; height: 8px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: skc-twk 1.7s ease-in-out calc(var(--k) * -.53s) infinite; }
#ui .skw .skc-table > em { position: absolute; right: 4px; bottom: -6px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(8, 10, 14, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font: 900 12px/22px var(--ui-font); font-style: normal; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
#ui .skw .skc-table.full > em { background: rgba(150, 34, 28, .9); }
#ui .skw .skc-table:active { transform: scale(.95); }
@keyframes skc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* 판 아래 줄: 퀵슬롯 칸 40 · 재료 칩 · 주 단추 하나(글자 폭 알약 — 오른쪽 끝) */
#ui .skw .skc-act { min-height: 40px; flex-wrap: nowrap; gap: 10px; }
#ui .skw .skc-q { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1.5px rgba(232, 201, 121, .7); color: #fff; cursor: pointer; touch-action: manipulation; }
#ui .skw .skc-q img { width: 18px; height: 26px; object-fit: contain; image-rendering: pixelated; }
#ui .skw .skc-q img[hidden] { display: none; }
#ui .skw .skc-q b { position: absolute; right: 3px; bottom: 1px; font-size: 10.5px; font-weight: 900; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
#ui .skw .skc-q img[hidden] + b { position: static; font-size: 18px; }
#ui .skw .skc-q:active { transform: scale(.92); }
#ui .skw .skc-mat { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
#ui .skw .skc-mat .skb-chip b { font-size: 12px; font-variant-numeric: tabular-nums; }
#ui .skw .skc-mat .skb-chip b i { font-style: normal; }
#ui .skw .skc-act > .btn { flex: none; height: 28px; padding: 0 16px; line-height: 28px; }
#ui .skw .skc-act > .btn[hidden] { display: none; }
/* 오른쪽: 머리(달일 물약 · [쉬기]) + 물약 카드 — 카드 모양은 sky_life.css .skq-rc · .skc .skc-g */
#ui .skw .skc-main { gap: 6px; }
#ui .skw .skc-head { flex: none; display: flex; align-items: center; gap: 10px; }
#ui .skw .skc-rest { margin-left: auto; flex: none; height: 26px; padding: 0 14px; font-size: 12px; line-height: 26px; }
#ui .skw .skc-rest.on { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
#ui .skw .skc-list.still .skc-g { animation: none; }
#ui .skw .skc-list.still .skc-g.on { animation: skl-sel 1.2s ease-in-out infinite alternate; }