/* 캐릭터 선택(편성 화면): 흐린 골목 풍경 위에 왼쪽 '모험 편성' 슬롯 · 가운데 벌집 토큰 · 오른쪽 상세 카드.
   배경은 아이돌 대기실 클레이 그림을 흐리게 깐다(assets/ui/select-backdrop.jpg, sheet-v4). 카드는 반투명 유리 · 금색 출발 버튼. */
.char-select.cs2{position:relative;isolation:isolate;height:100%;display:grid;grid-template-columns:268px minmax(0,1fr) min(400px,31vw);grid-template-rows:auto minmax(0,1fr);gap:14px 22px;padding:18px 26px 20px;overflow:hidden;color:#f6f2ea;background:#22303a}
.cs2>*{position:relative;z-index:1}
.cs2 .cs-backdrop{position:absolute;inset:-40px;z-index:0;background:url(/assets/ui/select-backdrop.jpg) center 40%/cover,linear-gradient(160deg,#6f9db0,#c9b98f);filter:blur(16px) saturate(1.12) brightness(.92);transform:scale(1.04)}
.cs2 .cs-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0f1a2499 0%,#0f1a2426 34%,#0f1a2433 62%,#0f1a24a6 100%),radial-gradient(ellipse at 50% 55%,transparent 40%,#0b141d73 100%)}

/* 머리글 */
.cs2 .cs-head{grid-column:1/-1;display:grid;gap:2px}
.cs2 .rpg-back{width:fit-content;padding:0;margin:0 0 4px;font-size:12px;color:#f6f2eacc;background:none;border:0;cursor:pointer}
.cs2 .rpg-back:hover{color:#fff}
.cs2 .creation-eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:#f3d48e}
.cs2 h1{margin:0;font-size:28px;line-height:1.2;color:#fff;text-shadow:0 2px 14px #0b141d80}
.cs2 .cs-head p{margin:0;font-size:13px;color:#f6f2eacc;text-shadow:0 1px 8px #0b141d80}

/* 왼쪽: 모험 편성 */
.cs-party{grid-column:1;grid-row:2;align-self:start;display:grid;gap:10px}
.cs-party-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:12px;background:#0f1a2470;border:1px solid #ffffff2e;backdrop-filter:blur(10px)}
.cs-party-head b{font-size:13px;letter-spacing:.02em}
.cs-party-head small{font-size:10px;color:#f3d48e}
.cs-slots{display:grid;gap:10px}
.cs-slot{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px 10px 10px;border-radius:16px;border:1px solid #ffffff59;background:#ffffffb8;backdrop-filter:blur(12px);color:#24323c;text-align:left;font:inherit;cursor:pointer;box-shadow:0 8px 22px #0b141d33;transition:transform .16s,box-shadow .16s,background .16s}
.cs-slot:hover{transform:translateX(3px)}
.cs-slot.on{background:#fffdf7f2;border-color:var(--c);box-shadow:0 0 0 2px var(--c),0 10px 26px #0b141d47}
.cs-slot.on::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--c)}
.cs-num{position:absolute;left:6px;top:6px;z-index:2;min-width:22px;padding:2px 5px;border-radius:6px;background:#24323c;color:#f3d48e;font-size:10px;font-weight:900;letter-spacing:.04em;text-align:center}
.cs-ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fffaf0,#eadfc6);box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--c)}
.cs-ring img{width:118%;height:118%;object-fit:cover;object-position:50% 16%}
.cs-ring i{font-style:normal;font-size:24px;color:#8d94a3}
.cs-slot-txt{display:grid;gap:1px;min-width:0}
.cs-slot-txt small{font-size:10px;font-weight:800;color:#6c7781;letter-spacing:.04em}
.cs-slot-txt b{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.15;color:#1f2c35}
.cs-slot-txt em{font-style:normal;font-size:11px;color:#5d6b74;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-lv{position:absolute;right:10px;top:10px;font-size:10px;font-weight:900;color:var(--c);filter:brightness(.8)}
.cs-slot.empty{background:#ffffff6b;border-style:dashed}
.cs-slot.empty .cs-lv{display:none}
.cs-party-tip{margin:2px 4px 0;font-size:11px;line-height:1.55;color:#f6f2eadb;text-shadow:0 1px 6px #0b141d99}
.cs-party-tip:empty{display:none}

/* 가운데: 멤버 거르기 + 벌집 토큰 */
.cs-roster{grid-column:2;grid-row:2;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.cs-filter{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.cs-filter button{font:inherit;font-size:12px;font-weight:800;color:#f6f2ea;padding:7px 13px;border-radius:99px;border:1px solid #ffffff40;background:#0f1a2459;backdrop-filter:blur(8px);cursor:pointer}
.cs-filter button small{font-size:10px;opacity:.7;margin-left:2px}
.cs-filter button[aria-pressed=true]{background:#fffdf7;color:#24323c;border-color:#fff}
.cs2 .char-grid{min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 6px 22px;scrollbar-width:thin;scrollbar-color:#ffffff59 transparent}
.cs-row{display:flex;justify-content:center;gap:16px}
.cs-row+.cs-row{margin-top:-6px}
.cs2 .char-card{all:unset;box-sizing:border-box;position:relative;width:98px;display:grid;justify-items:center;cursor:pointer;padding:4px 0 6px;transition:transform .16s}
.cs2 .char-card:hover{transform:translateY(-3px)}
.cs2 .char-card:focus-visible .cc-face{outline:3px solid #f3d48e;outline-offset:3px}
.cc-face{width:86px;height:86px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#fffaf0,#e7dabf);box-shadow:inset 0 0 0 3px #ffffffe6,0 0 0 2px var(--c),0 8px 18px #0b141d4d;transition:box-shadow .16s,transform .16s}
.cs2 .char-card .rpg-doll{width:122%;height:122%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:50% 14%;background:none;border-radius:0}
.cc-tag{position:relative;z-index:1;display:inline-flex;align-items:center;gap:4px;margin-top:-13px;padding:3px 9px 3px 7px;border-radius:99px;background:#16212bdb;border:1px solid #ffffff33;color:#fff;font-size:11px;font-weight:800;box-shadow:0 3px 8px #0b141d4d}
.cc-tag svg{color:#f3d48e}
.cc-tag b{font-family:var(--font);font-weight:800}
.cs2 .char-card small{margin-top:3px;max-width:96px;font-size:10px;line-height:1.3;color:#fffffff0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 5px #0b141dcc}
.cc-ep{display:none}
.cc-slot{position:absolute;left:4px;top:2px;z-index:2;padding:2px 5px;border-radius:6px;background:#f3d48e;color:#2b2210;font-size:10px;font-weight:900;box-shadow:0 2px 6px #0b141d59}
.cc-slot:empty{display:none}
.cs2 .char-card.in-party .cc-face{box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--c),0 8px 18px #0b141d4d}
.cs2 .char-card[aria-selected=true] .cc-face{transform:scale(1.07);box-shadow:inset 0 0 0 3px #fff,0 0 0 4px var(--c),0 0 0 7px #ffffffd9,0 0 26px 4px var(--c)}
.cs2 .char-card[aria-selected=true] .cc-tag{background:linear-gradient(180deg,#f6d77c,#dcac43);border-color:#fff3c9;color:#33250a}
.cs2 .char-card[aria-selected=true] .cc-tag svg{color:#5a3f0b}

/* 오른쪽: 상세 카드 */
.cs2 .char-detail{grid-column:3;grid-row:2;position:relative;align-self:stretch;min-height:0;max-height:none;overflow:hidden;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:0;padding:0;border:1px solid #ffffff80;border-radius:22px;background:#fdfcf8f0;backdrop-filter:blur(14px);box-shadow:0 18px 44px #0b141d59;color:#263c37}
.cs2 .creation-profile{grid-template-columns:118px minmax(0,1fr);gap:12px;padding:12px 16px 4px;background:radial-gradient(ellipse at 20% 30%,#fffdf4,transparent 70%)}
.cs2 .creation-profile .char-preview{height:118px}
.cs2 .creation-identity h2{font-size:28px;margin:6px 0 2px;color:#1f2c35}
.cs2 .creation-role{color:var(--character-accent,#2f5948)}
.cs2 .creation-level{display:flex;align-items:center;gap:7px;margin-top:8px}
.cs-lvring{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:11px;font-weight:900;color:#24323c;background:radial-gradient(circle,#fff 58%,transparent 60%),conic-gradient(var(--character-accent,#2f5948) 0 12%,#e1e6df 0)}
.cs-radar{display:block;width:100%;height:auto;max-height:168px;padding:0 8px 4px;box-sizing:border-box}
.rd-ring{fill:none;stroke:#d9dfd6;stroke-width:1}
.rd-ring:first-child{fill:#f2f4ef}
.rd-axis{stroke:#e2e6df;stroke-width:1}
.rd-val-area{fill:color-mix(in srgb,var(--character-accent,#2f5948) 26%,transparent);stroke:var(--character-accent,#2f5948);stroke-width:2;stroke-linejoin:round}
.rd-dot{fill:#fff;stroke:var(--character-accent,#2f5948);stroke-width:2}
.rd-gem path{fill:#c7ccd6;opacity:.75}
.rd-gem .rd-gem-hi{fill:#eef1f6}
.rd-name{font-size:10px;font-weight:700;fill:#7a867f}
.rd-val{font-size:12px;font-weight:900;fill:#2c3f37}
.cs2 .creation-tabs{background:#f3f5f0}
.cs2 .char-detail .creation-footer{background:#fdfcf8}
.cs2 .char-detail .creation-footer .rpg-btn{background:linear-gradient(180deg,#f6d77c,#dcac43);color:#3a2a0c;box-shadow:0 3px 0 #a87b22,0 8px 18px #a87b2240;font-weight:900}
.cs2 .char-detail .creation-footer .rpg-btn:hover{background:linear-gradient(180deg,#f9df91,#e2b552)}

/* 화면이 좁으면: 편성 슬롯을 위로 올리고 토큰을 줄인다 */
@media(max-width:1180px) and (min-width:761px){
  .char-select.cs2{grid-template-columns:minmax(0,1fr) min(380px,40vw);grid-template-rows:auto auto minmax(0,1fr)}
  .cs-party{grid-column:1;grid-row:2;grid-template-columns:auto 1fr;align-items:center}
  .cs-party-head{flex-direction:column;align-items:flex-start;gap:2px}
  .cs-slots{grid-template-columns:1fr 1fr}
  .cs-party-tip{display:none}
  .cs-roster{grid-column:1;grid-row:3}
  .cs2 .char-detail{grid-column:2;grid-row:2/4}
  .cs-row{gap:10px}.cs2 .char-card{width:80px}.cc-face{width:70px;height:70px}
}
@media(max-height:760px) and (min-width:761px){.cs-radar{max-height:132px}.cs2 .creation-profile .char-preview{height:96px}.cs2 .creation-profile{grid-template-columns:96px minmax(0,1fr)}.cs2 .creation-identity h2{font-size:24px}.cs2 h1{font-size:24px}.cs2 .cs-head p{display:none}}
@media(max-width:760px){
  .char-select.cs2{overflow:auto;grid-template-columns:1fr;grid-template-rows:auto;padding:14px;gap:12px}
  .cs2 .cs-backdrop{position:fixed}
  .cs-party,.cs-roster,.cs2 .char-detail{grid-column:1;grid-row:auto}
  .cs-roster{display:flex;flex-direction:column;min-height:auto}
  .cs2 .char-grid{min-height:auto}
  .cs-slots{grid-template-columns:1fr 1fr;gap:8px}
  .cs-slot{grid-template-columns:44px minmax(0,1fr);gap:8px;padding:8px}
  .cs-ring{width:44px;height:44px}.cs-slot-txt b{font-size:16px}.cs-slot-txt em,.cs-lv{display:none}
  .cs-filter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:2px}
  .cs-filter button{flex:0 0 auto}
  .cs2 .char-grid{overflow:visible;display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:4px;padding:4px 0 8px}
  .cs-row{display:contents}.cs-row+.cs-row{margin:0}
  .cs2 .char-card{width:auto}.cc-face{width:66px;height:66px}
  .cs2 .char-detail{min-height:560px;overflow:visible;grid-template-rows:auto auto auto auto auto}
  .cs2 .creation-content{overflow:visible}
  .cs2 .creation-footer{position:sticky;bottom:0;z-index:2}
}
/* 예전 카드 규칙(rpg.css · rpg-menus.css)이 토큰에 테두리 · 기울기를 얹지 않게 */
.cs2 .char-card[aria-selected=true],.cs2 .char-card:nth-child(n){box-shadow:none;border:0;rotate:0deg;background:none}
.cs2 .char-card[aria-selected=true]{transform:translateY(-2px)}
.cs2 .cc-tag b{margin:0;font-size:11px}
#rpg-app .cs2 .char-card{padding:4px 0 6px!important;align-content:start}
#rpg-app .cs2 .char-card:hover,#rpg-app .cs2 .char-card[aria-selected=true]{box-shadow:none!important}
#rpg-app .cs2 .char-card small{min-height:0;display:block}