/* 따로 뜨는 선택 창 (pickers.js) -- 보스 스케줄러와 분배금 계산기가 같이 씀 */
.jp-modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px; background:rgba(3,5,12,0.72); backdrop-filter:blur(4px); text-align:left;}
.jp-box{width:min(100%, 640px); max-height:calc(100vh - 32px); display:flex; flex-direction:column; padding:20px 22px; border-radius:18px;
  background:linear-gradient(180deg, #161c2c, #0d111c); border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,0.6); animation:jp-pop .22s cubic-bezier(.2,.9,.3,1) both;}
@keyframes jp-pop{from{opacity:0; transform:translateY(12px) scale(.97);}}
.jp-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.jp-top h3{margin:0; font-size:18px; font-weight:900; color:var(--text);}
.jp-x{width:32px; height:32px; border-radius:50%; border:none; font-size:14px; color:var(--sub); background:rgba(255,255,255,0.06); cursor:pointer;}
.jp-x:hover{color:var(--text); background:rgba(255,255,255,0.12);}
.jp-search{width:100%; box-sizing:border-box; padding:11px 14px; border-radius:12px; border:1px solid var(--line); outline:none; background:rgba(0,0,0,0.35); font:600 15px var(--font); color:var(--text);}
.jp-search:focus{border-color:color-mix(in srgb, var(--cyan) 55%, transparent);}
.jp-body{margin-top:12px; overflow:auto; padding-right:2px;}
.jp-body h4{display:flex; align-items:center; gap:8px; margin:12px 0 8px; font-size:12.5px; font-weight:900; color:var(--c);}
.jp-body h4:first-child{margin-top:0;}
.jp-body h4::after{content:''; flex:1; height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), transparent);}
.jp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px;}
.jp-cell{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,0.03);
  color:var(--text); font:700 13px var(--font); text-align:left; cursor:pointer; transition:border-color .15s, background .15s;}
.jp-cell:hover{border-color:color-mix(in srgb, var(--cyan) 50%, transparent); background:color-mix(in srgb, var(--cyan) 8%, transparent);}
.jp-cell span:last-child{min-width:0; overflow:hidden; text-overflow:ellipsis;}

/* 아이콘 칸 (템/보스/캐릭터 얼굴, 그림 없으면 첫 글자) */
.jp-icon{flex:none; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; overflow:hidden; background:rgba(0,0,0,0.35);}
.jp-icon img{max-width:100%; max-height:100%; object-fit:contain;}
/* 얼굴만 보이게 자르기 (2026-10-28): 넥슨 캐릭터 그림은 300x300 캔버스 가운데에 작은 캐릭터(발 y≈200, 얼굴 y≈155)라,
   얼굴 둘레 76px 창을 칸에 맞춰 키움 -- 이미지 폭 = 300/76 ≈ 395%, 창 가운데(150,158)가 칸 가운데로 오게 위치 */
.jp-icon.jp-face{position:relative;}
.jp-icon.jp-face img{position:absolute; max-width:none; max-height:none; width:395%; height:395%; left:calc(50% - 197.5%); top:calc(50% - 208%); object-fit:fill;}
.jp-icon.jp-ini{font:900 16px var(--font); color:var(--c, var(--sub)); background:color-mix(in srgb, var(--c, #97a3c2) 14%, rgba(0,0,0,0.35));}
.jp-icon.sm{width:28px; height:28px; border-radius:7px;}
.jp-icon.sm.jp-ini{font-size:12px;}

.jp-bosses{display:flex; flex-direction:column; gap:6px;}
.jp-boss{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid var(--line);}
.jp-boss > b{flex:1; min-width:0; font-size:14px; color:var(--text);}
.jp-dfs{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px;}
.jp-df{padding:6px 11px; border-radius:999px; border:1px solid color-mix(in srgb, var(--dc) 45%, transparent); background:color-mix(in srgb, var(--dc) 10%, transparent);
  color:var(--dc); font:800 12px var(--font); cursor:pointer;}
.jp-df:hover{background:color-mix(in srgb, var(--dc) 24%, transparent);}
.df-easy{--dc:#8fd6ff;} .df-normal{--dc:#8fffb0;} .df-hard{--dc:#ffcf5a;} .df-chaos{--dc:#c98fff;} .df-extreme{--dc:#ff6b81;}
.jp-custom{margin-top:10px; width:100%; padding:11px; border-radius:12px; border:1px dashed color-mix(in srgb, var(--cyan) 45%, transparent); background:none;
  color:var(--cyan); font:800 14px var(--font); cursor:pointer;}
.jp-none{font-size:13px; color:var(--sub); text-align:center; margin:16px 0;}

/* 고르기 버튼 (입력칸 자리에 놓는 것) */
.jp-pick{display:flex; align-items:center; gap:8px; min-width:0; padding:6px 12px 6px 6px; min-height:42px; box-sizing:border-box; border-radius:10px; border:1px solid var(--line);
  background:rgba(0,0,0,0.3); color:var(--text); font:600 14px var(--font); text-align:left; cursor:pointer;}
.jp-pick:hover{border-color:color-mix(in srgb, var(--cyan) 50%, transparent);}
.jp-pick > span:last-child{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.jp-pick.empty{color:var(--sub); padding-left:12px;}
.jp-pick small{margin-left:4px; font-weight:800;}

@media (max-width:640px){
  .jp-box{padding:16px 14px;}
  .jp-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .jp-boss{flex-wrap:wrap;}
  .jp-dfs{width:100%; justify-content:flex-start; padding-left:50px;}
}