/* 강호행 — 객잔 방(프로필) · 상상의 옷장 · 축하 연출(celebrate.js)
   먹빛/한지 팔레트, 명조 제목, 두꺼운 먹 테두리·하드 섀도. 위치 계산은 profile.js 가 CSS 변수로 넘긴다. */
.pf,.wd,.cel{--ink:#1b1b22;--ink2:#34313d;--hanji:#f4f1e8;--hanji2:#e9d8a6;--wood:#8c6e45;--wood0:#5a3b1d;--seal:#b8322e;--gold:#e8b53a;--lgold:#ffe08a;--jade:#4fa38a;
  --rc:#f0b45a;--serif:"Batang","AppleMyungjo","Noto Serif KR","Nanum Myeongjo",serif;box-sizing:border-box}
.pf *,.wd *,.cel *{box-sizing:border-box}
@media (min-height:560px){body.in-profile{overflow:hidden;overscroll-behavior:none}}
body.dojo.in-profile .dj-view{max-width:none;padding:0}

/* ───────────── 공용 무대(객잔 배경 + 고해상도 캐릭터 + 기운) */
.pf-stage{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#120e10;contain:layout paint}
.pf-bgbox{position:absolute;left:0;top:0;will-change:transform;transform-origin:0 0}
.pf-bgimg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none;pointer-events:none;max-width:none}
.pf-lights{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(9% 7% at 29.5% 12.5%,#ffb35a88,#0000 70%),
    radial-gradient(9% 7% at 70.5% 12.5%,#ffb35a88,#0000 70%),
    radial-gradient(7% 5% at 6% 2.5%,#ffb35a66,#0000 70%),
    radial-gradient(7% 5% at 93% 3%,#ffb35a66,#0000 70%),
    radial-gradient(10% 8% at 4% 80%,#ffa64277,#0000 70%),
    radial-gradient(10% 8% at 97% 75%,#ffa64277,#0000 70%),
    radial-gradient(45% 20% at 50% 58%,#ff9a3c22,#0000 70%);
  animation:pfFlicker 3.7s steps(1,end) infinite}
.pf-lights.b{animation:pfFlicker2 2.3s ease-in-out infinite;opacity:.55;background:radial-gradient(40% 18% at 50% 12%,#ffcf8a33,#0000 70%),radial-gradient(30% 20% at 50% 62%,#ffba6a1f,#0000 70%)}
@keyframes pfFlicker{0%{opacity:.85}9%{opacity:1}13%{opacity:.78}21%{opacity:.95}40%{opacity:.88}52%{opacity:1}58%{opacity:.8}71%{opacity:.97}86%{opacity:.86}}
@keyframes pfFlicker2{0%,100%{opacity:.45}50%{opacity:.7}}
.pf-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,#0000 55%,#0008 100%),linear-gradient(#0007,#0000 16%,#0000 70%,#0009)}
.pf-cv{position:absolute;pointer-events:none;image-rendering:auto}
.pf-glow{position:absolute;pointer-events:none;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 70%,#fff 10%) 0%,color-mix(in srgb,var(--rc) 38%,transparent) 42%,#0000 100%);
  animation:pfAura 4.2s ease-in-out infinite;will-change:opacity,transform}
@supports not (background:color-mix(in srgb,red 50%,blue)){.pf-glow{background:radial-gradient(closest-side,var(--rc) 0%,#0000 100%);opacity:.5}}
.pf-floorglow{position:absolute;pointer-events:none;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 55%,transparent),#0000);animation:pfAura 4.2s ease-in-out infinite}
@keyframes pfAura{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:.95;transform:scale(1.06)}}
.pf-shadow{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,#000d,#0006 55%,#0000);animation:pfShadow 3.6s ease-in-out infinite}
@keyframes pfShadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.95);opacity:.8}}
.pf-fig{position:absolute;left:0;top:0;will-change:transform;pointer-events:none}
.pf-avatar{display:block;width:100%;height:100%;image-rendering:auto;pointer-events:none}
.pf-breath{position:absolute;inset:0;transform-origin:50% 97%;animation:pfBreath 3.6s ease-in-out infinite;will-change:transform}
@keyframes pfBreath{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-2.5px) scale(1.004,1.013)}}
.pf-portrait{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;user-select:none;-webkit-user-select:none;pointer-events:none;
  filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 14px color-mix(in srgb,var(--rc) 55%,transparent))}
.pf-portrait.old{animation:pfOut .38s ease-in forwards}
.pf-portrait.new{animation:pfIn .5s cubic-bezier(.2,.9,.3,1.25) both}
.pf-portrait.enter{animation:pfEnter .9s cubic-bezier(.2,.8,.3,1.1) both}
@keyframes pfEnter{0%{opacity:0;transform:translateY(18px) scale(.97);filter:brightness(2) drop-shadow(0 0 20px var(--rc))}100%{opacity:1}}
@keyframes pfOut{to{opacity:0;transform:scale(.92) translateY(6px);filter:brightness(3) blur(2px)}}
@keyframes pfIn{0%{opacity:0;transform:scale(.86) translateY(10px);filter:brightness(3.2)}60%{opacity:1;filter:brightness(1.6)}100%{opacity:1;transform:none}}
.pf-rim{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:linear-gradient(118deg,#ffc27a 0%,#ffa64a55 28%,#0000 52%,#0000 70%,#ffb45a44 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:pfFlicker 3.7s steps(1,end) infinite}
.pf-pet{position:absolute;left:0;top:0;pointer-events:none;image-rendering:pixelated;will-change:transform}
.pf-petemoji{position:absolute;left:0;top:0;pointer-events:none;line-height:1;filter:drop-shadow(2px 2px 0 #000a);will-change:transform;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}

/* 매달린 나무 간판(칭호·이름) */
.pf-sign{position:absolute;left:50%;top:0;z-index:5;transform-origin:50% 0;animation:pfSway 5.5s ease-in-out infinite;text-align:center;pointer-events:none;max-width:calc(100% - 150px)}
.pf-sign::before,.pf-sign::after{content:"";position:absolute;top:0;width:3px;height:var(--rope,18px);background:linear-gradient(#2a1c0c,#6b4f2a);border-radius:2px}
.pf-sign::before{left:12%}.pf-sign::after{right:12%}
.pf-board{position:relative;margin-top:var(--rope,18px);padding:7px 18px 8px;border:3px solid #1a1008;border-radius:7px;color:#fff3d6;
  background:linear-gradient(180deg,#8a6236 0%,#6e4a26 45%,#5a3b1d 100%);
  box-shadow:0 0 0 2px #c9a36a55 inset,0 3px 0 #2a1c0c inset,0 -2px 0 #3a2410 inset,4px 5px 0 #0009;min-width:150px}
.pf-board::before{content:"";position:absolute;inset:4px;border:1.5px solid #2a1c0c88;border-radius:4px;pointer-events:none;background:repeating-linear-gradient(92deg,#0000 0 9px,#0000000d 9px 11px)}
.pf-board .nail{position:absolute;top:5px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe8a8,#9c7a3c 60%,#3a2a10);box-shadow:0 1px 0 #000a}
.pf-board .nail.l{left:12%;margin-left:-2px}.pf-board .nail.r{right:12%;margin-right:-2px}
.pf-title{display:block;font:900 12px/1.25 var(--serif);color:var(--lgold);letter-spacing:1px;text-shadow:0 1px 0 #000,0 0 8px #e8b53a66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-title.none{color:#d8c7a6aa;font-weight:700}
.pf-name{display:block;font:900 21px/1.2 var(--serif);letter-spacing:2px;color:#fff6e0;text-shadow:0 2px 0 #1a1008,0 -1px 0 #c9a36a55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes pfSway{0%,100%{transform:translateX(-50%) rotate(-1.1deg)}50%{transform:translateX(-50%) rotate(1.1deg)}}

/* 레벨 메달·경지 깃발 */
.pf-medal{position:absolute;left:12px;top:12px;z-index:6;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;text-align:center;color:#2a1c0c;
  background:radial-gradient(circle at 34% 30%,#fff3c4 0%,#f3c860 32%,#c88a26 70%,#7a4f14 100%);border:3px solid #1a1008;
  box-shadow:0 0 0 3px #e8b53a55,0 0 18px #e8b53a66,3px 4px 0 #000a}
.pf-medal::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px dashed #7a4f1488}
.pf-medal small{display:block;font:900 10px/1 system-ui,sans-serif;letter-spacing:1px;margin-top:6px}
.pf-medal b{display:block;font:900 25px/1 var(--serif);margin-top:-2px;text-shadow:0 1px 0 #fff8}
.pf-banner{position:absolute;right:14px;top:6px;z-index:6;width:44px;display:flex;flex-direction:column;align-items:center;pointer-events:none;transform-origin:50% 0;animation:pfSway2 6.2s ease-in-out infinite}
.pf-banner .rod{width:56px;height:7px;border:2px solid #1a1008;border-radius:4px;background:linear-gradient(#caa060,#7a5530);box-shadow:0 2px 0 #0008}
.pf-banner .cloth{position:relative;width:40px;padding:8px 0 20px;margin-top:-1px;text-align:center;color:#fff;background:linear-gradient(90deg,#0003,#0000 30%,#fff2 50%,#0000 70%,#0003),var(--bc,#3a3440);
  border:2px solid #1a1008;border-top:0;clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);box-shadow:0 0 0 1px #fff3 inset}
.pf-banner small{display:block;font:800 9px/1 system-ui,sans-serif;opacity:.85;letter-spacing:1px;margin-bottom:4px}
.pf-banner b{display:block;writing-mode:vertical-rl;text-orientation:upright;margin:0 auto;font:900 17px/1 var(--serif);letter-spacing:3px;text-shadow:0 1px 0 #0009}
.pf-banner.light .cloth{color:#1b1b22}.pf-banner.light b{text-shadow:0 1px 0 #fff8}
@keyframes pfSway2{0%,100%{transform:rotate(1deg)}50%{transform:rotate(-1.4deg)}}

/* ───────────── 객잔 방(프로필) */
.pf{position:relative;width:100%;height:calc(100dvh - var(--pf-top,0px));min-height:min(540px,calc(100dvh - var(--pf-top,0px)));max-width:680px;margin:0 auto;overflow:hidden;color:var(--hanji);
  background:#120e10;box-shadow:0 0 0 2px #000,0 0 60px #000c;font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.pf-panel{position:absolute;left:0;right:0;bottom:0;z-index:8;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#1d1720f0 0%,#141016fa 60%,#0f0c11 100%);border-top:3px solid #000;border-radius:18px 18px 0 0;
  box-shadow:0 -1px 0 #e8b53a55 inset,0 -10px 30px #0009}
.pf-panel::before{content:"";position:absolute;left:50%;top:-9px;width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe08a,#b8801c);border:2.5px solid #000;box-shadow:0 0 10px #e8b53a88}
.pf-panel::after{content:"";position:absolute;left:18%;right:18%;top:-2px;height:1px;background:linear-gradient(90deg,#0000,#e8b53acc 30%,#0000 46%,#0000 54%,#e8b53acc 70%,#0000)}
.pf-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.pf-spr{position:relative;width:80px;height:80px;border:3px solid #000;border-radius:12px;overflow:hidden;box-shadow:3px 3px 0 #000,0 0 0 2px #c9a36a55 inset;
  background:linear-gradient(#2b3a52 0%,#51607a 55%,#6e8b3d 55.1%,#4d5f2a 100%)}
.pf-spr canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated;image-rendering:crisp-edges}
.pf-spr i{position:absolute;left:0;right:0;bottom:1px;text-align:center;font:800 9px/1.2 system-ui,sans-serif;font-style:normal;color:#fff;text-shadow:0 1px 0 #000;opacity:.9}
.pf-info{min-width:0}
.pf-tier{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px}
.pf-tier b{font:900 17px/1.2 var(--serif);color:var(--lgold);letter-spacing:.5px;text-shadow:0 1px 0 #000}
.pf-chip{display:inline-flex;align-items:center;gap:3px;font:800 11.5px/1 system-ui,sans-serif;white-space:nowrap;border:2px solid #000;border-radius:999px;padding:3px 8px;background:#2a2430;color:var(--hanji);box-shadow:0 0 0 1px #fff1 inset}
.pf-chip.sb{background:#6a3fb5;color:#fff}
.pf-exp{position:relative;height:16px;border:2.5px solid #000;border-radius:10px;background:#0c0a0e;overflow:hidden;box-shadow:0 0 0 1px #e8b53a33}
.pf-exp i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#b8801c,#e8b53a 60%,#ffe08a);border-right:2px solid #fff6;overflow:hidden}
.pf-exp i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#0000 30%,#fff9 50%,#0000 70%);transform:translateX(-120%);animation:pfShine 3.2s ease-in-out infinite}
.pf-exp span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 10.5px/1 system-ui,sans-serif;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000}
@keyframes pfShine{0%,35%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
.pf-stats{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.pf-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.pf-nav button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;min-height:42px;padding:6px 3px;border:3px solid #000;border-radius:12px;
  background:linear-gradient(#fbf7ec,#e9dfc6);color:var(--ink);box-shadow:3px 3px 0 #000;cursor:pointer;font:800 11.5px/1.1 Pretendard,system-ui,sans-serif;letter-spacing:-.3px;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.pf-nav button span{font-size:22px;line-height:1;filter:drop-shadow(1px 1px 0 #0003)}
.pf-nav button.gold{background:linear-gradient(#ffe9a6,#e8b53a)}
.pf-nav button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.pf-nav button:focus-visible{outline:3px solid var(--lgold);outline-offset:2px}

/* ───────────── 상상의 옷장 */
.wd{position:relative;width:100%;height:calc(100dvh - var(--pf-top,0px));min-height:min(560px,calc(100dvh - var(--pf-top,0px)));max-width:620px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;
  background:#16121a;color:var(--hanji);box-shadow:0 0 0 2px #000,0 0 60px #000c;font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.wd-top{flex:none;display:flex;align-items:center;gap:8px;padding:7px 10px;background:linear-gradient(#2a2130,#1d1822);border-bottom:3px solid #000;min-width:0;z-index:3}
.wd-back{flex:none;width:42px;height:40px;border:2.5px solid #000;border-radius:10px;background:var(--hanji);color:var(--ink);font-weight:900;font-size:18px;box-shadow:2px 2px 0 #000;cursor:pointer}
.wd-back:active,.wd-dice:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
.wd-h{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.wd-h b{font:900 19px/1.15 var(--serif);color:var(--lgold);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-h small{font-size:11px;color:#c9b27c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-dice{flex:none;display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 11px;border:2.5px solid #000;border-radius:10px;background:linear-gradient(#ffe9a6,#e8b53a);color:var(--ink);font:900 13px/1 Pretendard,system-ui,sans-serif;box-shadow:2px 2px 0 #000;cursor:pointer;white-space:nowrap}
.wd-dice span{font-size:18px;display:inline-block}
.wd-dice.roll span{animation:wdRoll .5s linear infinite}
@keyframes wdRoll{to{transform:rotate(360deg)}}
.wd-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.wd-stagebox{position:relative;flex:none;height:clamp(240px,42%,460px);border-bottom:3px solid #000;overflow:hidden}
.wd-ribbon{position:absolute;left:-44px;top:20px;z-index:9;width:170px;transform:rotate(-38deg);text-align:center;padding:4px 0;background:linear-gradient(#e0584a,#b8322e);color:#fff;
  font:900 12px/1.2 Pretendard,system-ui,sans-serif;border-block:2px solid #000;box-shadow:0 3px 0 #0008;letter-spacing:.5px;pointer-events:none;animation:wdRib .35s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes wdRib{from{transform:rotate(-38deg) translateX(-60px);opacity:0}}
.wd-reset{position:absolute;left:10px;bottom:74px;z-index:9;border:2px solid #000;border-radius:999px;background:#1b1b22d9;color:var(--hanji);font:800 11.5px/1 Pretendard,system-ui,sans-serif;padding:6px 10px;cursor:pointer;box-shadow:2px 2px 0 #000}
.wd-cap{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;align-items:flex-end;gap:10px;padding:26px 10px 8px;background:linear-gradient(#0000,#0d0a10cc 45%,#0d0a10f2);pointer-events:none}
.wd-cap .t{flex:1 1 auto;min-width:0}
.wd-cap b{display:block;font:900 20px/1.15 var(--serif);color:#fff6e0;text-shadow:0 2px 0 #000;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-cap small{display:block;font-size:12px;font-weight:600;color:#e6dcc6;line-height:1.3;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wd-cap .kind{display:inline-block;font:800 10px/1 system-ui,sans-serif;color:var(--ink);background:var(--lgold);border:1.5px solid #000;border-radius:5px;padding:2px 5px;margin-right:5px;vertical-align:3px;letter-spacing:0}
.wd-cap .spr{flex:none;position:relative;width:68px;height:68px;border:2.5px solid #000;border-radius:10px;overflow:hidden;box-shadow:2px 2px 0 #000;pointer-events:none;
  background:linear-gradient(#2b3a52 0%,#51607a 58%,#6e8b3d 58.1%,#4d5f2a 100%)}
.wd-cap .spr canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated}
.wd-cap .spr i{position:absolute;left:0;right:0;bottom:1px;text-align:center;font:800 9px/1.2 system-ui,sans-serif;font-style:normal;color:#fff;text-shadow:0 1px 0 #000}
.wd-tiers{position:absolute;right:8px;top:8px;z-index:9;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.wd-tiers small{font:800 10px/1 system-ui,sans-serif;color:#e6dcc6;text-shadow:0 1px 0 #000;margin-bottom:1px}
.wd-tiers button{min-width:48px;border:2px solid #000;border-radius:8px;padding:3px 6px;background:#1b1b22d9;color:var(--hanji);font:800 11px/1.15 Pretendard,system-ui,sans-serif;cursor:pointer;box-shadow:2px 2px 0 #000;text-align:center}
.wd-tiers button.on{background:var(--lgold);color:var(--ink)}
.wd-tiers button.lock{color:#b9b0c4}
.wd-tiers button.on.lock{color:var(--ink)}
.wd-tabs{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#1d1822;border-bottom:3px solid #000}
.wd-tabs button{position:relative;height:44px;border:0;border-right:2px solid #000;background:none;color:#cfc6d8;font:900 14px/1 Pretendard,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.wd-tabs button:last-child{border-right:0}
.wd-tabs button small{font-size:10.5px;font-weight:800;color:#9d93a8;margin-left:3px}
.wd-tabs button.on{background:linear-gradient(#3a2d40,#2a2130);color:var(--lgold)}
.wd-tabs button.on::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:4px;border-radius:3px 3px 0 0;background:var(--gold)}
.wd-grid{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 10px 14px;display:grid;gap:9px;align-content:start;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;background:#16121a repeating-linear-gradient(45deg,#19151d 0 12px,#16121a 12px 24px)}
.wd-grid.titles{grid-template-columns:repeat(2,minmax(0,1fr))}
.wd-grid.pets{grid-template-columns:repeat(3,minmax(0,1fr))}
.wd-card{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:0;border:3px solid #000;border-radius:12px;background:linear-gradient(#f7f1e1,#e6d9b8);color:var(--ink);
  box-shadow:3px 3px 0 #000;cursor:pointer;overflow:hidden;text-align:center;-webkit-tap-highlight-color:transparent;font:inherit;transition:transform .12s}
.wd-card > *{flex:none}
.wd-card:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.wd-card:focus-visible{outline:3px solid var(--lgold);outline-offset:2px}
.wd-card.sel{border-color:#000;box-shadow:0 0 0 3px var(--gold),3px 3px 0 3px #000;transform:translateY(-2px)}
.wd-card .thumb{position:relative;display:block;aspect-ratio:1/1.1;background:radial-gradient(90% 70% at 50% 75%,#fff9,#0000 70%),linear-gradient(#e7dcc2,#cdb98f);overflow:hidden;border-bottom:2.5px solid #000}
.wd-card .thumb img{position:absolute;left:50%;top:3%;width:73%;height:auto;transform:translateX(-50%);display:block;max-width:none;filter:drop-shadow(0 2px 0 #0003)}
.wd-card .thumb canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated}
.wd-card .thumb .emo{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.wd-card .nm{display:block;font:900 12.5px/1.2 var(--serif);padding:5px 4px 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-card .how{display:block;font:700 10px/1.25 Pretendard,system-ui,sans-serif;color:#5a5566;padding:0 4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-card .pbar{display:block;height:5px;margin:0 7px 7px;border:1.5px solid #000;border-radius:4px;background:#fff;overflow:hidden}
.wd-card .pbar i{display:block;height:100%;background:linear-gradient(90deg,#4fa38a,#8fd6b8)}
.wd-card.locked .thumb img,.wd-card.locked .thumb canvas,.wd-card.locked .thumb .emo{filter:grayscale(.75) brightness(.78) contrast(.95)}
.wd-card.locked{background:linear-gradient(#e7e1d4,#cfc6b3)}
.wd-card .lock{position:absolute;right:5px;top:5px;z-index:2;display:grid;place-items:center;width:24px;height:24px;border:2px solid #000;border-radius:7px;background:#1b1b22;color:#fff;font-size:12px;box-shadow:1px 1px 0 #000}
.wd-card .on{position:absolute;left:5px;top:5px;z-index:2;font:900 10px/1 Pretendard,system-ui,sans-serif;color:#fff;background:var(--seal);border:2px solid #000;border-radius:6px;padding:3px 5px;box-shadow:1px 1px 0 #000}
.wd-card.plaque{padding:14px 0 0}
.wd-card.plaque .lock{top:3px;right:4px;width:20px;height:20px;font-size:10px;border-width:1.5px}
.wd-card.plaque .on{top:3px;left:4px;font-size:9.5px;padding:2px 4px}
.wd-card.plaque .pl{margin:6px 8px 5px;padding:10px 6px;border:2.5px solid #1a1008;border-radius:7px;background:linear-gradient(#8a6236,#5a3b1d);color:#ffe8b0;font:900 15px/1.2 var(--serif);letter-spacing:1px;
  box-shadow:0 0 0 1.5px #c9a36a55 inset;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
.wd-card.plaque.locked .pl{filter:grayscale(.7) brightness(.85)}
.wd-card.none .thumb,.wd-card.none .pl{opacity:.7}
.wd-act{flex:none;display:flex;gap:8px;align-items:center;padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));background:#1d1822;border-top:3px solid #000}
.wd-act .msg{flex:1 1 auto;min-width:0;font-size:12px;font-weight:700;color:#e6dcc6;line-height:1.3}
.wd-act .msg b{color:var(--lgold)}
.wd-act .msg small{font-size:10.5px;font-weight:700;color:#a99fb4}
.wd-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:128px;height:48px;padding:0 16px;border:3px solid #000;border-radius:12px;background:var(--seal);color:#fff;
  font:900 17px/1 Pretendard,system-ui,sans-serif;box-shadow:3px 3px 0 #000;cursor:pointer;white-space:nowrap}
.wd-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.wd-btn.worn{background:#2f6b58;color:#e7fff5}
.wd-btn.lockd{background:#3a3440;color:#cfc6d8;cursor:not-allowed;box-shadow:3px 3px 0 #000}
.wd-btn.lockd:active{transform:none}
.wd-btn.ghost{min-width:0;background:var(--hanji);color:var(--ink);font-size:14px;padding:0 12px}
.wd-toast{position:absolute;left:50%;bottom:98px;z-index:20;transform:translateX(-50%);max-width:calc(100% - 32px);text-align:center;padding:10px 16px;border:3px solid #000;border-radius:12px;
  background:var(--hanji);color:var(--ink);font:900 15px/1.35 Pretendard,system-ui,sans-serif;box-shadow:4px 4px 0 #000;animation:wdToast 2.2s both;pointer-events:none}
.wd-toast.ok{background:linear-gradient(#ffe9a6,#e8b53a)}
.wd-toast.bad{background:#ffe0e0;color:#8a1f1b}
@keyframes wdToast{0%{opacity:0;transform:translate(-50%,16px) scale(.85)}12%{opacity:1;transform:translate(-50%,0) scale(1.04)}20%{transform:translate(-50%,0) scale(1)}82%{opacity:1}100%{opacity:0;transform:translate(-50%,-10px)}}
.wd-stamp{position:absolute;left:80%;top:40%;z-index:12;display:grid;place-items:center;width:96px;height:96px;margin:-48px 0 0 -48px;font-size:30px;letter-spacing:-1px;border:4px solid #7a1612;border-radius:10px;background:#b8322ee6;color:#fff;
  font:900 40px/1 var(--serif);box-shadow:0 0 0 3px #fff4 inset;animation:wdStamp 1.3s both;pointer-events:none}
@keyframes wdStamp{0%{opacity:0;transform:scale(2.4) rotate(-24deg)}18%{opacity:1;transform:scale(.92) rotate(-9deg)}26%{transform:scale(1) rotate(-9deg)}80%{opacity:1}100%{opacity:0;transform:scale(1) rotate(-9deg)}}
@media (min-width:880px){
  .wd{max-width:1060px}
  .wd-body{flex-direction:row}
  .wd-stagebox{flex:0 0 46%;height:auto;border-bottom:0;border-right:3px solid #000}
  .wd-side{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
  .wd-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wd-grid.titles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wd-grid.pets{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.wd-side{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
@media (max-width:370px){.pf-nav button{font-size:10.5px}.pf-nav button span{font-size:20px}.wd-dice b{display:none}.wd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-height:700px){.pf-nav button{min-height:38px}.pf-spr{width:68px;height:68px}.pf-panel{padding-top:9px}.pf-workshop{min-height:38px}}

/* ───────────── 축하 연출(celebrate.js) */
.cel{position:fixed;inset:0;z-index:120;overflow:hidden;contain:strict;display:block;color:var(--hanji);font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  background:radial-gradient(90% 70% at 50% 42%,#33250f 0%,#0d0a0e 72%);animation:celIn .3s ease-out both;outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer;user-select:none;-webkit-user-select:none}
.cel.out{animation:celOut .28s ease-in forwards}
@keyframes celIn{from{opacity:0}}
@keyframes celOut{to{opacity:0;transform:scale(1.03)}}
.cel-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cel-rays{position:absolute;left:50%;top:40%;width:190vmax;height:190vmax;margin:-95vmax 0 0 -95vmax;pointer-events:none;opacity:.0;
  background:repeating-conic-gradient(from 0deg,#ffd97a2e 0deg 5deg,#0000 5deg 15deg);-webkit-mask-image:radial-gradient(closest-side,#000 0%,#0008 35%,#0000 70%);mask-image:radial-gradient(closest-side,#000 0%,#0008 35%,#0000 70%);
  animation:celRaysIn .8s .05s ease-out forwards,celSpin 28s linear infinite}
@keyframes celRaysIn{to{opacity:1}}
@keyframes celSpin{to{rotate:360deg}}
.cel-flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 40%,#fff 0%,#fff6d0cc 25%,#0000 70%);opacity:0;animation:celFlash .55s ease-out both}
@keyframes celFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.cel-stack{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(40px + env(safe-area-inset-bottom,0px));pointer-events:none}
.cel-stack > *{pointer-events:auto}
.cel-shake{animation:celShake .42s linear both}
@keyframes celShake{0%,100%{transform:none}15%{transform:translate(-7px,4px)}30%{transform:translate(6px,-5px)}45%{transform:translate(-5px,-3px)}60%{transform:translate(4px,4px)}80%{transform:translate(-2px,1px)}}
.cel-kicker{display:flex;align-items:center;gap:8px;font:900 13px/1 var(--serif);letter-spacing:4px;color:var(--lgold);text-shadow:0 1px 0 #000;animation:celDrop .5s var(--d,.2s) cubic-bezier(.2,.9,.3,1.3) both}
.cel-kicker .seal{display:inline-grid;place-items:center;width:40px;height:40px;background:var(--seal);color:#fff;border:2.5px solid #000;border-radius:6px;font:900 24px/1 var(--serif);letter-spacing:0;transform:rotate(-7deg);box-shadow:0 0 0 2px #fff3 inset,3px 3px 0 #000}
@keyframes celDrop{from{opacity:0;transform:translateY(-26px) scale(1.2)}}
.cel-portrait{position:relative;flex:0 1 auto;height:min(38vh,360px);aspect-ratio:2/3;min-height:120px}
.cel-portrait img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 22px #ffcf6aaa)}
.cel-portrait.rise img{animation:celRise .7s .08s cubic-bezier(.2,.9,.3,1.2) both}
.cel-portrait.wait img{opacity:0}
.cel-portrait.show img{animation:celReveal .45s ease-out both}
.cel-portrait::before{content:"";position:absolute;left:-30%;right:-30%;top:10%;bottom:-2%;border-radius:50%;background:radial-gradient(closest-side,#ffd97a66,#ffb04022 55%,#0000);animation:pfAura 3s ease-in-out infinite;pointer-events:none}
.cel-portrait::after{content:"";position:absolute;left:18%;right:18%;bottom:-3%;height:8%;border-radius:50%;background:radial-gradient(closest-side,#000c,#0000);pointer-events:none}
@keyframes celRise{from{opacity:0;transform:translateY(40px) scale(.86);filter:brightness(2.4) drop-shadow(0 0 30px #fff)}}
@keyframes celReveal{from{opacity:0;filter:brightness(3) drop-shadow(0 0 40px #fff)}}
.cel-lv{position:relative;margin-top:-26px;font:900 clamp(64px,21vw,128px)/.95 var(--serif);letter-spacing:-2px;white-space:nowrap;
  color:#ffd84a;background:linear-gradient(180deg,#fffbe6 0%,#ffe27a 38%,#e8a92a 62%,#b06f12 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:3px #1a1008;filter:drop-shadow(4px 5px 0 #000) drop-shadow(0 0 18px #ffb84088);animation:celLvUp .75s var(--d,.35s) cubic-bezier(.18,.9,.25,1.25) both}
.cel-lv small{font-size:.42em;letter-spacing:0;margin-right:4px;-webkit-text-stroke:2px #1a1008}
.cel-lv.sm{font-size:clamp(46px,14vw,84px)}
@keyframes celLvUp{0%{opacity:0;transform:translateY(60px) scale(.6)}60%{opacity:1}100%{opacity:1;transform:none}}
.cel-sub{font:800 14px/1.3 Pretendard,system-ui,sans-serif;color:#f1e6cc;text-shadow:0 1px 0 #000;text-align:center;animation:celFade .5s var(--d,.9s) both}
.cel-sub b{color:var(--lgold)}
@keyframes celFade{from{opacity:0;transform:translateY(8px)}}
.cel-tier{position:relative;font:900 clamp(30px,9vw,52px)/1.1 var(--serif);letter-spacing:3px;color:#fff6de;text-shadow:0 0 18px #ffc24a,0 3px 0 #000;white-space:nowrap;
  -webkit-mask-image:linear-gradient(100deg,#000 0 42%,#0000 58%);mask-image:linear-gradient(100deg,#000 0 42%,#0000 58%);-webkit-mask-size:260% 100%;mask-size:260% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0;animation:celBrushX 1.1s var(--d,2.9s) cubic-bezier(.5,.1,.3,1) both}
.cel-tier small{display:block;font:800 12px/1.3 Pretendard,system-ui,sans-serif;letter-spacing:2px;color:var(--lgold);text-shadow:0 1px 0 #000;text-align:center}
@keyframes celBrushX{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.cel-cards{display:flex;flex-direction:column;gap:7px;width:min(100%,400px);margin-top:6px}
.cel-card{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:8px 12px;border:3px solid #000;border-radius:12px;background:linear-gradient(#fbf6e8,#eadcb8);color:var(--ink);
  box-shadow:4px 4px 0 #000;text-align:left;animation:celSlide .55s var(--d,1s) cubic-bezier(.2,.9,.3,1.2) both}
.cel-card .ic{display:grid;place-items:center;width:40px;height:40px;border:2.5px solid #000;border-radius:9px;background:var(--seal);color:#fff;font:900 13px/1 var(--serif);box-shadow:inset 0 0 0 2px #fff3}
.cel-card b{display:block;font:900 15px/1.2 var(--serif)}
.cel-card small{display:block;font:700 12px/1.3 Pretendard,system-ui,sans-serif;color:#4a4552}
.cel-card.coin{grid-template-columns:auto 1fr;background:linear-gradient(#fff3c4,#f3c860)}
.cel-card.coin .ic{background:#8c6e45}
@keyframes celSlide{from{opacity:0;transform:translateX(70px) rotate(3deg)}}
.cel-hint{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));text-align:center;font:800 12px/1 Pretendard,system-ui,sans-serif;color:#d9ccb0aa;letter-spacing:1px;pointer-events:none;animation:celFade .5s var(--d,1.6s) both,celBlink 1.6s calc(var(--d,1.6s) + .5s) ease-in-out infinite}
@keyframes celBlink{50%{opacity:.35}}
.cel-mute{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));z-index:3;width:40px;height:40px;border:2px solid #000;border-radius:10px;background:#1b1b22cc;color:#fff;font-size:18px;cursor:pointer}

/* 경지 */
.cel.realm{background:#0d0c1280}
.cel.realm.inked{background:#e9dfc6}
.cel-paper{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 50% 45%,#f4ecd6 0%,#e6d9b8 70%,#cdb98f 100%);animation:celPaper .38s ease-out both}
.cel-paper::after{content:"";position:absolute;inset:0;opacity:.5;background:repeating-linear-gradient(83deg,#0000 0 7px,#8c6e4512 7px 8px),repeating-linear-gradient(-12deg,#0000 0 13px,#8c6e450d 13px 14px)}
@keyframes celPaper{from{opacity:0;transform:scale(1.06)}}
.cel.realm .cel-hint{left:0;right:0;margin:0 auto;width:max-content;padding:6px 12px;border-radius:999px;background:#1b1b22c0;color:#f4f1e8}
.cel-wm{position:absolute;left:0;right:0;top:9%;text-align:center;pointer-events:none;font:900 min(23vw,168px)/1 var(--serif);letter-spacing:-.02em;color:#ffe08a;opacity:.07;white-space:nowrap;
  -webkit-mask-image:linear-gradient(160deg,#000 0 42%,#0000 58%);mask-image:linear-gradient(160deg,#000 0 42%,#0000 58%);-webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-position:0 100%;mask-position:0 100%;animation:celWm 1.4s .15s cubic-bezier(.5,.1,.3,1) both}
@keyframes celWm{to{-webkit-mask-position:0 0;mask-position:0 0}}
.cel-rname{position:relative;display:flex;gap:.04em;justify-content:center;font:900 clamp(78px,25vw,176px)/1 var(--serif);color:#f7f2e4;white-space:nowrap;margin:6px 0 4px;
  filter:drop-shadow(0 0 22px var(--rc)) drop-shadow(0 4px 0 #000)}
.cel-rname.len3{font-size:clamp(64px,19vw,150px)}
.cel-rname.len4{font-size:clamp(52px,15vw,120px)}
.cel-ch{position:relative;display:inline-block}
.cel-ch .ghost{visibility:hidden}
.cel-ch i{position:absolute;inset:0;font-style:normal;clip-path:var(--c0);animation:celBand .26s var(--d) cubic-bezier(.6,.05,.4,1) both}
@keyframes celBand{from{clip-path:var(--c0)}to{clip-path:var(--c1)}}
.cel-ch .drip{position:absolute;left:50%;top:50%;width:1.3em;height:1.3em;margin:-.65em;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 45%,transparent),#0000);opacity:0;animation:celDrip 1s var(--d) ease-out both;z-index:-1}
@keyframes celDrip{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:.35;transform:scale(1)}}
.cel-rkick{font:900 16px/1 var(--serif);letter-spacing:10px;color:color-mix(in srgb,var(--rc) 55%,#fff);text-shadow:0 0 12px var(--rc),0 1px 0 #000;animation:celFade .7s var(--d,1s) both;padding-left:10px}
.cel-rkick.light{color:#f4f1e8}
.cel-seal{position:absolute;right:-1.25em;bottom:-.2em;display:grid;place-items:center;width:1.45em;height:1.45em;font:900 .44em/1 var(--serif);color:#fff;background:#b8322e;border:.08em solid #6d120f;border-radius:.16em;
  box-shadow:0 0 0 .05em #ffffff33 inset,0 0 0 .12em #b8322e44,.08em .1em 0 #0008;opacity:0;transform:rotate(-9deg);animation:celSlam .38s var(--d,2.7s) cubic-bezier(.3,1.6,.5,1) both;
  background-image:radial-gradient(circle at 30% 20%,#fff2 0 8%,#0000 9%),radial-gradient(circle at 70% 80%,#0002 0 12%,#0000 13%)}
@keyframes celSlam{0%{opacity:0;transform:scale(3) rotate(-28deg)}55%{opacity:1;transform:scale(.9) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-9deg)}}
.cel-rsub{font:800 15px/1.35 Pretendard,system-ui,sans-serif;color:#efe6d2;text-align:center;text-shadow:0 1px 0 #000;animation:celFade .6s var(--d,3s) both;margin-top:10px}
.cel-rsub b{font-family:var(--serif);color:#fff}
.cel-gold{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 12px;border:2.5px solid #000;border-radius:999px;background:linear-gradient(#fff3c4,#e8b53a);color:#1b1b22;font:900 14px/1 Pretendard,system-ui,sans-serif;box-shadow:3px 3px 0 #000;animation:celPopUp .45s var(--d,3.2s) cubic-bezier(.2,.9,.3,1.4) both}
@keyframes celPopUp{from{opacity:0;transform:translateY(10px) scale(.7)}}

/* 해금 */
.cel.unlock{background:radial-gradient(80% 60% at 50% 45%,#2e2240 0%,#0d0a10 75%)}
.cel.unlock .cel-rays{background:repeating-conic-gradient(from 0deg,#c8a8ff22 0deg 4deg,#0000 4deg 14deg)}
.cel-uhead{text-align:center;animation:celDrop .5s .15s cubic-bezier(.2,.9,.3,1.3) both}
.cel-uhead b{display:inline-block;font:900 clamp(24px,7vw,36px)/1.15 var(--serif);letter-spacing:2px;color:#fff6de;text-shadow:0 0 16px #e8b53a,0 3px 0 #000;padding:6px 18px;border-block:3px solid var(--gold);
  background:linear-gradient(90deg,#0000,#b8322ecc 18%,#b8322ecc 82%,#0000)}
.cel-uhead small{display:block;margin-top:6px;font:700 13px/1.3 Pretendard,system-ui,sans-serif;color:#e6dcc6}
.cel-ucards{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:14px 0 8px;perspective:900px;width:100%;max-width:640px}
.cel-uc{position:relative;width:var(--w,190px);aspect-ratio:2/3;transform-style:preserve-3d;animation:celPop .4s var(--d0,.4s) cubic-bezier(.2,.9,.3,1.3) both}
.cel-uc .flip{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg);animation:celFlip .75s var(--d1,.9s) cubic-bezier(.4,.1,.2,1) both}
.cel-uc .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid #000;border-radius:14px;overflow:hidden;box-shadow:5px 5px 0 #000}
.cel-uc .back{transform:rotateY(180deg);display:grid;place-items:center;background:repeating-linear-gradient(45deg,#6b1d1a 0 10px,#7d2421 10px 20px);}
.cel-uc .back::before{content:"";position:absolute;inset:8px;border:2px solid #e8b53a88;border-radius:9px}
.cel-uc .back b{display:grid;place-items:center;width:44%;aspect-ratio:1;border:3px solid #000;border-radius:10px;background:var(--gold);color:#6b1d1a;font:900 clamp(22px,7vw,40px)/1 var(--serif);transform:rotate(-8deg);box-shadow:3px 3px 0 #000}
.cel-uc .front{display:flex;flex-direction:column;background:radial-gradient(90% 60% at 50% 60%,#fff8e0,#e7d6ac 70%,#c9ae76)}
.cel-uc .front .art{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.cel-uc .front .art img{position:absolute;left:50%;top:3%;height:100%;width:auto;transform:translateX(-50%);max-width:none;filter:drop-shadow(0 3px 0 #0004)}
.cel-uc .front .art canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated}
.cel-uc .front .art .emo{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(40px,14vw,80px);font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.cel-uc .front .art .plq{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);padding:14px 6px;border:3px solid #1a1008;border-radius:8px;background:linear-gradient(#8a6236,#5a3b1d);color:#ffe8b0;
  font:900 clamp(15px,4.6vw,24px)/1.2 var(--serif);letter-spacing:1px;text-align:center;box-shadow:0 0 0 2px #c9a36a55 inset,3px 3px 0 #0008;text-shadow:0 1px 0 #000;word-break:keep-all}
.cel-uc .front .cel-lab{flex:none;padding:6px 6px 7px;background:#1b1b22;color:#fff6de;border-top:2.5px solid #000;text-align:center}
.cel-uc .front .cel-lab small{display:inline-block;font:800 9.5px/1 Pretendard,system-ui,sans-serif;color:#1b1b22;background:var(--lgold);border-radius:4px;padding:2px 5px;margin-bottom:3px}
.cel-uc .front .cel-lab b{display:block;font:900 clamp(12px,3.6vw,16px)/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cel-uc .shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#0000 35%,#fff9 48%,#fff0 60%);transform:translateX(-130%);animation:celSweep .9s var(--d2,1.5s) ease-in-out both;mix-blend-mode:screen}
@keyframes celPop{from{opacity:0;transform:scale(.4) translateY(40px)}}
@keyframes celFlip{0%{transform:rotateY(180deg)}100%{transform:rotateY(0deg)}}
@keyframes celSweep{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
.cel-ubtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;animation:celFade .5s var(--d,1.8s) both}
.cel-ubtns button{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 18px;border:3px solid #000;border-radius:12px;background:var(--hanji);color:var(--ink);font:900 16px/1 Pretendard,system-ui,sans-serif;box-shadow:3px 3px 0 #000;cursor:pointer}
.cel-ubtns button.gold{background:linear-gradient(#ffe9a6,#e8b53a)}
.cel-ubtns button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.cel-more{font:800 13px/1 Pretendard,system-ui,sans-serif;color:#e6dcc6;align-self:center}

@media (prefers-reduced-motion:reduce){
  .pf-breath,.pf-sign,.pf-banner,.pf-glow,.pf-floorglow,.pf-shadow,.pf-lights,.pf-rim,.pf-exp i::after{animation:none!important}
  .cel,.cel *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .cel-rays{opacity:.5}
  .cel-ch i{clip-path:var(--c1)}
  .cel-tier{-webkit-mask-position:0 0;mask-position:0 0}
  .cel-uc .flip{transform:none}
}

/* Character studio: crisp contours at 2–3× device resolution. */
.pf-spr canvas,.wd-cap .spr canvas,.wd-card .thumb canvas{image-rendering:auto}
.wd-card .thumb .wd-avatar-thumb{width:100%;height:100%;object-fit:contain}
.pf-workshop{display:flex;align-items:center;gap:8px;min-height:42px;margin-top:9px;padding:8px 12px;border:1px solid #e9bd6870;border-radius:12px;background:linear-gradient(110deg,#594227,#342732);color:#ffebbf;text-decoration:none;box-shadow:inset 0 1px 0 #ffffff12}
.pf-workshop b{font-size:14px;white-space:nowrap}
.pf-workshop small{flex:1;font-size:11px;color:#e2cda9}
.pf-workshop > span:first-child{font-size:20px;color:#ffe493}
.pf-workshop:focus-visible{outline:3px solid var(--lgold);outline-offset:2px}
@media (min-width:600px){.pf-nav{grid-template-columns:repeat(6,1fr)}.pf-nav button{flex-direction:column;min-height:54px}.pf-workshop small{font-size:12px}}
@media (max-height:620px){.wd-stagebox{height:205px}.pf-sign .pf-board{padding-top:4px;padding-bottom:4px}.pf-name{font-size:17px}.pf-title{font-size:10px}.pf-medal{width:52px;height:52px}.pf-workshop{margin-top:6px;padding-block:5px}.pf-stats{gap:3px}.pf-chip{font-size:10px;padding:3px 5px}}

/* ───────────── 객잔 장착 칸(gearslots.js) — 캐릭터 사방 14칸 */
.gs-layer{position:absolute;inset:0;z-index:7;pointer-events:none}
/* 양옆 일곱 칸 — 머리에서 발까지 몸을 따라 내려온다. 남는 높이에 맞춰 칸 크기를 스스로 줄인다. */
.gs-col{position:absolute;top:var(--gs-top,96px);bottom:var(--gs-bottom,150px);display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--gs-gap,6px);pointer-events:auto}
.gs-col.l{left:6px}
.gs-col.r{right:6px}
.gs-slot{position:relative;width:var(--gs-size,46px);height:var(--gs-size,46px);flex:0 1 var(--gs-size,46px);min-height:30px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:2.5px solid #000;border-radius:10px;background:linear-gradient(#2a2330e0,#17131bf0);
  box-shadow:2px 2px 0 #000a,0 0 0 1.5px #c9a36a44 inset;transition:transform .12s,box-shadow .12s}
.gs-slot:hover,.gs-slot:focus-visible{transform:translateY(-2px);box-shadow:2px 4px 0 #000a,0 0 0 2px var(--gold) inset;outline:none}
.gs-slot.sel{box-shadow:2px 2px 0 #000a,0 0 0 2.5px var(--lgold) inset,0 0 12px #e8b53a88}
.gs-slot.empty{background:repeating-linear-gradient(45deg,#1d1822d9,#1d1822d9 5px,#251f2cd9 5px,#251f2cd9 10px);border-style:dashed}
.gs-slot .gs-ic{display:block;pointer-events:none}
.gs-slot .gs-nm{position:absolute;left:0;right:0;bottom:-1px;text-align:center;font:800 8.5px/1.25 system-ui,sans-serif;color:#e9e4f0cc;text-shadow:0 1px 0 #000;pointer-events:none}
.gs-slot.empty .gs-nm{color:#cfc9d8;font-size:10px;bottom:auto;top:50%;transform:translateY(-50%)}
.gs-slot .gs-new{position:absolute;right:-4px;top:-4px;width:15px;height:15px;display:grid;place-items:center;border:2px solid #000;border-radius:50%;
  background:var(--gold);color:#1b1b22;font:900 10px/1 system-ui,sans-serif;font-style:normal;animation:gsPulse 1.5s ease-in-out infinite}
@keyframes gsPulse{50%{transform:scale(1.18)}}
/* 등급 테두리 — 0 흔함 … 5 전설 */
.gs-slot[data-rarity="1"]{border-color:#2a2a30}
.gs-slot[data-rarity="2"]{box-shadow:2px 2px 0 #000a,0 0 0 2px #4fa38a inset}
.gs-slot[data-rarity="3"]{box-shadow:2px 2px 0 #000a,0 0 0 2px #3e6fd8 inset}
.gs-slot[data-rarity="4"]{box-shadow:2px 2px 0 #000a,0 0 0 2px #8e4fd0 inset}
.gs-slot[data-rarity="5"]{box-shadow:2px 2px 0 #000a,0 0 0 2px var(--gold) inset,0 0 10px #e8b53a66}

/* 고르는 서랍 */
.gs-pick{position:absolute;left:0;right:0;bottom:0;z-index:14;max-height:58%;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,#1d1720f6,#100d13);border-top:3px solid #000;border-radius:16px 16px 0 0;
  box-shadow:0 -1px 0 #e8b53a66 inset,0 -12px 34px #000b;padding:8px 10px calc(12px + env(safe-area-inset-bottom,0px));
  animation:gsUp .18s ease-out both}
@keyframes gsUp{from{transform:translateY(30%);opacity:0}to{transform:none;opacity:1}}
.gs-ph{display:flex;align-items:baseline;gap:8px;padding:2px 2px 6px;position:sticky;top:0;background:linear-gradient(#1d1720,#1d1720f0 70%,#1d172000);z-index:2}
.gs-ph b{font:900 16px/1.2 var(--serif);color:var(--lgold)}
.gs-ph small{font:700 11px/1.2 system-ui,sans-serif;color:#cfc9d8}
.gs-ph.sub{padding-top:8px;position:static;background:none}
.gs-ph.sub b{font-size:13px;color:#cfc9d8}
.gs-x{margin-left:auto;width:34px;height:30px;border:0;background:none;color:var(--hanji);font:900 16px/1 system-ui,sans-serif;cursor:pointer}
.gs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
.gs-grid.dim{opacity:.72}
.gs-card{position:relative;display:grid;grid-template-rows:auto auto auto auto;justify-items:center;gap:1px;padding:6px 4px 5px;cursor:pointer;text-align:center;
  border:2.5px solid #000;border-radius:10px;background:linear-gradient(#2a2330,#181320);box-shadow:2px 2px 0 #000a;color:var(--hanji)}
.gs-card:hover,.gs-card:focus-visible{outline:none;box-shadow:2px 2px 0 #000a,0 0 0 2px var(--gold) inset}
.gs-card.on{box-shadow:2px 2px 0 #000a,0 0 0 2.5px var(--lgold) inset}
.gs-card.lock{cursor:not-allowed;filter:grayscale(.75)}
.gs-card.off{background:repeating-linear-gradient(45deg,#1d1822,#1d1822 5px,#251f2c 5px,#251f2c 10px)}
.gs-card b{font:800 11.5px/1.25 system-ui,sans-serif;color:var(--lgold)}
.gs-card small.r{font:800 9px/1.2 system-ui,sans-serif;color:#c9a36a;letter-spacing:-.5px}
.gs-card small.d{font:600 9.5px/1.3 system-ui,sans-serif;color:#cfc9d8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gs-card i.on{position:absolute;right:-3px;top:-6px;background:var(--seal);color:#fff;border:2px solid #000;border-radius:4px;padding:0 4px;
  font:900 9px/1.5 system-ui,sans-serif;font-style:normal;transform:rotate(-8deg)}
.gs-card[data-rarity="5"] b{color:var(--gold)}
.gs-card[data-rarity="5"]{box-shadow:2px 2px 0 #000a,0 0 0 2px var(--gold) inset}
.gs-card[data-rarity="4"]{box-shadow:2px 2px 0 #000a,0 0 0 2px #8e4fd0 inset}

/* 좁은 폰: 칸을 작게, 이름은 칸 안으로 */
@media (max-width:420px){
  .gs-layer{--gs-size:42px;--gs-gap:4px}
  .gs-grid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
}
@media (max-height:640px){.gs-layer{--gs-size:38px;--gs-gap:3px}}
/* 넓은 화면: 칸을 캐릭터에서 조금 떼어 크게 */
@media (min-width:560px){.gs-layer{--gs-size:56px;--gs-gap:8px}.gs-col.l{left:14px}.gs-col.r{right:14px}}
.gs-card i.wip{position:absolute;left:-3px;top:-6px;background:#3e6fd8;color:#fff;border:2px solid #000;border-radius:4px;padding:0 3px;
  font:900 9px/1.5 system-ui,sans-serif;font-style:normal}

/* 고를 때: 무대(배경+캐릭터)를 함께 조금 줄여 위로 — 바닥선이 배경에 묶여 있어 무대만 올릴 수는 없다 */
.pf-stage{transition:transform .18s ease-out}
.pf.picking .pf-stage{transform:translateY(-12%) scale(.82);transform-origin:50% 22%}
.pf.picking .pf-panel{opacity:0;pointer-events:none;transition:opacity .15s}
.pf.picking .pf-medal,.pf.picking .pf-banner{opacity:.35}
@media (prefers-reduced-motion:reduce){.pf-stage{transition:none}}

/* 🎨 모습 고르기 — 머리색·피부색·눈동자·눈매·볼 (2026-09-18)
   «장비 공방» 과 한 줄에 둔다: 따로 한 줄을 차지하니 패널이 41px 높아져
   짧은 화면(390×664·360×600)에서 캐릭터 발끝이 패널에 파묻혔다(실측 42·52px). */
.pf-links { display: flex; gap: 7px; margin-top: 9px; align-items: stretch }
.pf-links > * { flex: 1 1 0; min-width: 0; margin-top: 0 }
.pf-look {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 9px; cursor: pointer; min-height: 42px;
  background: #fff6e2; border: 1px solid #e9bd6870; border-radius: 12px;
  box-shadow: inset 0 1px 0 #ffffff12; font: inherit;
  color: #241c2a; text-shadow: none;              /* 어두운 무대 색을 물려받아 안 보였다 */
}
.pf-look, .pf-look * { color: #241c2a }
.pf-look b { font-size: 14px; white-space: nowrap }
.pf-look > span:first-child { font-size: 18px }
.pf-look > span:last-child { opacity: .5 }
.pf-look:focus-visible { outline: 3px solid var(--lgold); outline-offset: 2px }
.pf-look small { flex: 1; font-size: 11.5px; color: #6b6275 }
.pf-look > span:first-child { font-size: 20px; line-height: 1 }
.pf-look b { font-size: 14px; font-weight: 900 }
.pf-look small { flex: 1; font-size: 11.5px; font-weight: 700; opacity: .7 }
.pf-look:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--dj-ink, #2b2533) }

.lk {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 60;
  max-height: 62%; overflow: auto; padding: 10px 12px 12px;
  background: #fffdf6; border: 3px solid var(--dj-ink, #2b2533); border-radius: 16px;
  box-shadow: 0 -6px 22px #00000033, 4px 4px 0 var(--dj-ink, #2b2533);
  /* 객잔은 어두운 무대라 글씨 색이 상속되면 희미해진다 — 여기서 못박는다(2026-09-18 화면 확인) */
  color: #241c2a; text-shadow: none;
}
.lk, .lk * { color: #241c2a }
.lk small, .lk .lk-foot { color: #5b5265 }
.lk-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px }
.lk-head b { font-size: 16px; font-weight: 900 }
.lk-head small { flex: 1; font-size: 11px; font-weight: 700; color: #6b6275 }
.lk-x {
  flex: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2.5px solid var(--dj-ink, #2b2533); background: #fff; font-size: 13px; font-weight: 900;
}
.lk-g { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-top: 1.5px dashed #0002 }
.lk-g:first-of-type { border-top: 0 }
.lk-n { flex: none; width: 52px; font-size: 12px; font-weight: 900; padding-top: 6px; color: #241c2a }
.lk-sw { flex: 1; display: flex; flex-wrap: wrap; gap: 6px }
.lk-c {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer; width: 42px;
}
.lk-c i {
  display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c);
  border: 2.5px solid var(--dj-ink, #2b2533); box-shadow: 1.5px 1.5px 0 var(--dj-ink, #2b2533);
}
.lk-c small { font-size: 9px; font-weight: 800; line-height: 1.1; text-align: center; color: #5b5265 }
.lk-c.on i { outline: 3px solid #e8193c; outline-offset: 2px }
.lk-c.on small { color: #e8193c }
.lk-t {
  padding: 6px 10px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 900;
  border: 2.5px solid var(--dj-ink, #2b2533); background: #fff; box-shadow: 1.5px 1.5px 0 var(--dj-ink, #2b2533);
}
.lk-t.on, .lk-t.on * { background: #e8193c; color: #fff }
.lk-free { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 42px; cursor: pointer }
.lk-free input {
  width: 30px; height: 30px; padding: 0; cursor: pointer; background: none;
  border: 2.5px dashed var(--dj-ink, #2b2533); border-radius: 50%;
}
.lk-free small { font-size: 9px; font-weight: 800; color: #5b5265 }
.lk-foot { margin: 8px 0 0; font-size: 11px; font-weight: 700 }
.lk-reset {
  border: 2px solid var(--dj-ink, #2b2533); background: #fff; border-radius: 8px;
  padding: 2px 8px; font-size: 11px; font-weight: 900; cursor: pointer;
}
@media (max-width: 420px) {
  .lk-n { width: 44px; font-size: 11px }
  .lk-c, .lk-free { width: 36px }
  .lk-c i, .lk-free input { width: 26px; height: 26px }
}