
/* ===== 주주야니 펠트 테마 (공통) ===== */
:root{
  --f-bg:#FFF6E9; --f-card:#FFFCF6; --f-stitch:rgba(168,122,78,.55); --f-ink:#5A3E2B;
  --f-brown:#8A5A3B; --f-yellow:#FFD45E; --f-yellow-d:#E3AE2E; --f-pink:#FFB8D0; --f-pink-d:#F08DB0;
  --f-teal:#3DBDB0; --f-teal-d:#2A9A8F; --f-beige:#EFDDC6; --f-green:#6CC07A; --f-green-d:#4DA15D;
  --felt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .22 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --knit:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 3px,rgba(0,0,0,.035) 3px 7px);
}
html{background:var(--f-bg)}
body{background:var(--felt), radial-gradient(circle at 20% 10%,#FFFDF7 0,#FFF4E4 55%,#FCEBD6 100%) !important;
  background-attachment:fixed !important; color:var(--f-ink) !important; position:relative; min-height:100vh}
body::before{content:"";position:fixed;inset:8px;border:2.5px dashed rgba(190,145,100,.5);border-radius:26px;pointer-events:none;z-index:0}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:url(img/deco-star.png) left 14px top 92px / 38px no-repeat, url(img/deco-heart.png) right 14px top 70px / 40px no-repeat, url(img/deco-btn.png) right 22px top 128px / 26px no-repeat, url(img/deco-btn2.png) left 20px bottom 150px / 34px no-repeat, url(img/deco-heart2.png) left 54px bottom 90px / 34px no-repeat, url(img/deco-heart3.png) right 30px bottom 110px / 36px no-repeat}
.wrap{position:relative;z-index:1}
.jm-home{background:var(--felt),#FFFCF6 !important;color:var(--f-ink) !important;outline:2px dashed var(--f-stitch);outline-offset:-5px;box-shadow:0 3px 0 rgba(138,90,59,.18) !important;position:relative;z-index:2}

/* 카드 공통: 펠트 + 바느질 선 */
.quest,.start,.allclear,.card,.shelf,.counter,.eq,.topbar{
  background:var(--felt),var(--f-card) !important;
  outline:2.5px dashed var(--f-stitch); outline-offset:-9px;
  box-shadow:0 6px 14px rgba(150,105,60,.14), 0 3px 0 rgba(150,105,60,.12) !important;
}
.topbar{outline-offset:-6px;border-radius:999px !important}
.bar{background:#F0E2D0 !important}
.bar-fill{background:var(--knit),linear-gradient(90deg,#FFC94D,#FFB347) !important}
.stage-label,.speech,.tray-label,.start h1,.start p,.allclear h2,.allclear p{color:var(--f-ink) !important}
.goal-amt,.eq-result,.win-text,.allclear h2{color:#E8577A !important}

/* 지갑: 분홍 펠트 */
.wallet{background:var(--felt),linear-gradient(170deg,#FFD0E1,#FFB3CD) !important;
  outline:2.5px dashed rgba(255,255,255,.9);outline-offset:-8px;
  box-shadow:0 6px 0 #EC93B4, 0 10px 18px rgba(236,147,180,.25) !important}
.wallet-flap{background:var(--felt),#FF9FC2 !important;outline:2px dashed rgba(255,255,255,.85);outline-offset:-5px}

/* 동전: 펠트 동전 */
.coin.silver,.coin.gold,.coin.copper{outline:2px dashed rgba(255,255,255,.75);outline-offset:-6px}
.coin.silver{background:var(--felt),radial-gradient(circle at 35% 30%,#FFFFFF,#DADFE5 60%,#BCC4CD) !important;color:#5B6672 !important;box-shadow:0 4px 0 #AEB7C1,0 6px 10px rgba(0,0,0,.08) !important}
.coin.gold{background:var(--felt),radial-gradient(circle at 35% 30%,#FFF1B8,#FFD25A 60%,#F2B32C) !important;color:#7A5410 !important;box-shadow:0 4px 0 #D99C1E,0 6px 10px rgba(0,0,0,.08) !important}
.coin.copper{background:var(--felt),radial-gradient(circle at 35% 30%,#FFE0C2,#F5AE78 60%,#E08C52) !important;color:#7A3F17 !important;box-shadow:0 4px 0 #C9773F,0 6px 10px rgba(0,0,0,.08) !important}

/* 버튼: 니트 질감 */
.btn-check,.win-btn{background:var(--knit),var(--felt),var(--f-yellow) !important;color:#6B4510 !important;box-shadow:0 5px 0 var(--f-yellow-d) !important}
.btn-undo,.btn-ghost{background:var(--knit),var(--felt),#F2E3CF !important;color:#7A5A44 !important;box-shadow:0 4px 0 #D9C2A5 !important}
.btn,.win-btn,.btn-check,.btn-undo{border-radius:999px !important}
.win{background:var(--felt),#FFF8EC !important}
.retry-msg{color:#E8577A !important}

/* 동물 그림 그림자 */
.animal svg,.win-animal svg{filter:drop-shadow(0 5px 4px rgba(120,80,40,.22))}

/* ===== 편의점 공통 (store / change) ===== */
.sign{background:var(--felt),linear-gradient(180deg,#5FD1C4,var(--f-teal)) !important;color:#fff !important;
  outline:2.5px dashed rgba(255,255,255,.75);outline-offset:-7px;box-shadow:0 5px 0 var(--f-teal-d) !important;border-radius:20px !important}
.stage,.rounds{background:var(--felt),#FFFCF6 !important;color:var(--f-teal-d) !important}
.card-title,.shelf-title{color:var(--f-teal-d) !important}
.item{background:var(--felt),#FFFCF6 !important;border:none !important;outline:2px dashed var(--f-stitch);outline-offset:-6px;
  box-shadow:0 3px 0 rgba(150,105,60,.15),0 5px 10px rgba(150,105,60,.08) !important;border-radius:18px !important}
.item.picked{background:var(--felt),#FFE1EC !important;outline-color:#F08DB0}
.item .price,.item .pr{background:transparent !important;color:#C24C74 !important}
.basket{background:var(--felt),#F6E3CB !important;outline:2.5px dashed var(--f-stitch);outline-offset:-8px;box-shadow:0 4px 0 rgba(150,105,60,.15) !important}
.slot{background:var(--felt),#FFFCF6 !important;border:2px dashed rgba(168,122,78,.45) !important}
.slot.full{background:var(--felt),#FFE1EC !important;border:2px dashed #F08DB0 !important}
.go-btn{background:var(--knit),var(--felt),var(--f-teal) !important}
.btn:not(.btn-undo):not(.btn-check){background:var(--knit),var(--felt),var(--f-teal) !important;box-shadow:0 5px 0 var(--f-teal-d) !important;color:#fff !important}
.btn.pink,.btn.pay{background:var(--knit),var(--felt),#FF7FA4 !important;box-shadow:0 5px 0 #E2577F !important}
.btn.ghost,.btn.back{background:var(--knit),var(--felt),#F2E3CF !important;color:#7A5A44 !important;box-shadow:0 4px 0 #D9C2A5 !important}
.btn:disabled{background:var(--felt),#DCCFC0 !important;box-shadow:0 5px 0 #C6B6A3 !important}
.bill,.eq.st,.paytray,.tray{background:var(--felt),#FFF4E2 !important;border:2px dashed rgba(168,122,78,.4) !important}
.chip,.tag,.bill .chip{background:var(--felt),#FFFCF6 !important;border:2px dashed rgba(168,122,78,.35) !important}
.qbox,.bill .q{background:#FFFCF6 !important;border-color:var(--f-teal) !important;color:var(--f-teal-d) !important}
.clerk .face{display:inline-block;width:78px;height:78px;line-height:0 !important;border-radius:50%;overflow:hidden;
  background:var(--felt),#F6E3CB;outline:2px dashed var(--f-stitch);outline-offset:-5px;font-size:0 !important}
.clerk .face .snk{width:100%;height:100%;margin-top:6px}
.snk{display:inline-block;width:1em;height:1em;vertical-align:middle}
.item .emoji,.item .emo{font-size:48px !important;line-height:1 !important}
.slot .e,.slot .emo{font-size:34px !important;line-height:1 !important}
.tag .e,.chip .e,.bill .chip .e{font-size:36px !important;line-height:1 !important}
.rline .snk,.r-row .snk{width:1.4em;height:1.4em;vertical-align:-.4em;margin-right:2px}
.mini-ic .snk,.bicon .snk{width:22px;height:22px;vertical-align:-5px}
.coin-btn{outline:2px dashed rgba(255,255,255,.8);outline-offset:-6px}
.c1{background:var(--felt),radial-gradient(circle at 35% 30%,#FFE0C2,#F5AE78 60%,#E08C52) !important;color:#7A3F17 !important}
.c5{background:var(--felt),radial-gradient(circle at 35% 30%,#FFF1B8,#FFD25A 60%,#F2B32C) !important;color:#7A5410 !important}
.c10{background:var(--felt),radial-gradient(circle at 35% 30%,#FFFFFF,#DADFE5 60%,#BCC4CD) !important;color:#5B6672 !important}
.coin.c100,.coin.c500{background:var(--felt),radial-gradient(circle at 35% 30%,#FFFFFF,#DADFE5 60%,#BCC4CD) !important;border:none !important;outline:2px dashed rgba(255,255,255,.8);outline-offset:-5px;color:#5B6672 !important}
.coin.c500{background:var(--felt),radial-gradient(circle at 35% 30%,#FFF1B8,#FFD25A 60%,#F2B32C) !important;color:#7A5410 !important}
.note{background:var(--felt),linear-gradient(180deg,#C9EFC9,#9EDB9E) !important;border:none !important;outline:2px dashed rgba(255,255,255,.85);outline-offset:-5px;color:#2F6B39 !important}
.receipt-wrap,.overlay{background:rgba(120,90,60,.35) !important}
.receipt{background:var(--felt),#FFFFFF !important;color:var(--f-ink) !important}
.r-btn,.next-btn{background:var(--knit),var(--felt),var(--f-green) !important;color:#fff !important;outline:2px dashed rgba(255,255,255,.7);outline-offset:-5px;border-radius:999px !important}
.r-row.chg,.rline.change{color:var(--f-teal-d) !important}

/* ===== 보금님 그림 적용 ===== */
.coin[data-v="10"],.coin[data-v="50"],.coin[data-v="100"],.coin[data-v="500"],
.coin.c100,.coin.c500,.c1,.c5,.c10,.note{background-color:transparent !important;background-position:center !important;background-size:100% 100% !important;
  background-repeat:no-repeat !important;color:transparent !important;outline:none !important;border:none !important;
  box-shadow:0 3px 5px rgba(90,60,30,.25) !important;text-shadow:none !important}
.coin[data-v="10"],.c10{background-image:url(img/coin-10.png) !important}
.coin[data-v="50"]{background-image:url(img/coin-50.png) !important}
.coin[data-v="100"],.coin.c100{background-image:url(img/coin-100.png) !important}
.coin[data-v="500"],.coin.c500{background-image:url(img/coin-500.png) !important}
.note{background-image:url(img/note-1000.png) !important;border-radius:4px !important;box-shadow:0 3px 5px rgba(90,60,30,.2) !important}
.c1 *,.c5 *,.c10 *{color:transparent !important}
.c1{background-image:url(img/coin-1.png) !important}
.c5{background-image:url(img/coin-5.png) !important}
.note{width:76px !important;height:37px !important}
img.snk{display:inline-block;width:1em;height:1em;object-fit:contain;vertical-align:middle}
.clerk .face{background:none !important;outline:none !important;width:84px !important;height:84px !important}
.clerk .face .clerk-img{width:100%;height:100%;margin:0}
.animal .ani,.win-animal .ani{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 5px rgba(110,70,35,.25));pointer-events:none}
.purse-img{display:block;width:150px;max-width:60%;height:auto;margin:0 auto 8px;filter:drop-shadow(0 6px 6px rgba(150,80,90,.22))}
.r-pals{display:block;width:96px;height:auto;margin:0 auto 6px}

/* ===== 큰 돈일수록 크게 ===== */
.coin[data-v="1"],.c1{--k:.68} .coin[data-v="5"],.c5{--k:.76} .coin[data-v="10"],.c10{--k:.84}
.coin[data-v="50"]{--k:.92} .coin[data-v="100"],.coin.c100{--k:1} .coin[data-v="500"],.coin.c500{--k:1.1}
.coin[data-v]{width:calc(62px * var(--k)) !important;height:calc(62px * var(--k)) !important}
.coin.mini[data-v]{width:calc(42px * var(--k)) !important;height:calc(42px * var(--k)) !important}
.eq .coin[data-v]{width:calc(40px * var(--k)) !important;height:calc(40px * var(--k)) !important}
.coin-btn.c1,.coin-btn.c5,.coin-btn.c10{width:calc(76px * var(--k)) !important;height:calc(76px * var(--k)) !important;align-self:center}
.chip.c1,.chip.c5,.chip.c10{width:calc(44px * var(--k)) !important;height:calc(44px * var(--k)) !important}
.money.coin.c100,.money.coin.c500{width:calc(50px * var(--k)) !important;height:calc(50px * var(--k)) !important}
.money.small.coin{transform:scale(.8)}
.note{width:90px !important;height:46px !important}
.note[data-v="5000"]{background-image:url(img/note-5000.png) !important;width:94px !important;height:47px !important}
.note[data-v="10000"]{background-image:url(img/note-10000.png) !important;width:98px !important;height:49px !important}
.note[data-v="50000"]{background-image:url(img/note-50000.png) !important;width:102px !important;height:51px !important}
.coinrow{align-items:center}
