/* 캐릭터 생성 등급 카드(시안 3): E~B 한 묶음 + A·S 따로, 고르면 생성 포인트에서 비용이 빠지는 게 보임 */
.grk-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.grk-pool{display:flex;align-items:baseline;gap:10px;font-family:var(--mono)}
.grk-pool .n{position:relative;font-size:40px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.grk-pool .fly{position:absolute;right:-6px;top:-4px;font-size:var(--fs-lg);color:var(--bad);pointer-events:none;animation:grk-fly 1s ease-out forwards}
@keyframes grk-fly{0%{opacity:0;transform:translate(0,8px)}20%{opacity:1}100%{opacity:0;transform:translate(18px,-22px)}}
.grk-tiers{display:grid;grid-template-columns:4fr 1fr 1fr;gap:14px}
@media (max-width:640px){.grk-tiers{grid-template-columns:1fr 1fr}.grk-tier.base{grid-column:1/-1}}
.grk-tier{display:flex;flex-direction:column;gap:6px;min-width:0}
.grk-tier .tl{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;color:var(--faint);border-bottom:1px solid var(--line);padding-bottom:4px}
.grk-tier .rw{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px}
.grk{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;min-height:150px;padding:14px 6px 10px;background:rgba(11,16,25,.6);border:1px solid var(--line);cursor:pointer;transition:border-color .2s,transform .2s,background .2s}
.grk:hover:not(:disabled){border-color:var(--edge);transform:translateY(-2px)}
.grk .L{font-family:'Hahmlet','Batang',serif;font-weight:700;font-size:40px;line-height:1;color:var(--sub)}
.grk .tm{font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);text-align:center;line-height:1.4}
.grk .tm b{display:block;font-size:var(--fs-base);color:var(--fg);font-weight:500}
.grk .cost{position:absolute;top:6px;right:6px;font-family:var(--mono);font-size:var(--fs-lg);padding:1px 6px;border:1px solid var(--bad);color:var(--bad);transform:rotate(6deg)}
.grk .free{position:absolute;top:6px;right:6px;font-family:var(--mono);font-size:var(--fs-lg);color:var(--faint)}
.grk[aria-pressed="true"]{border-color:var(--gold);background:linear-gradient(180deg,rgba(224,184,94,.12),rgba(11,16,25,.6))}
.grk[aria-pressed="true"] .L{color:var(--gold)}
.grk.hi .L{background:linear-gradient(180deg,#f2eee6,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.grk:disabled{cursor:not-allowed;opacity:.4}
.grk .lock{font-size:var(--fs-xs);color:var(--bad);text-align:center;line-height:1.35}
.grk-cf{margin-top:12px;display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;padding:10px 14px;background:var(--bad-soft);border-left:2px solid var(--bad);font-size:var(--fs-md)}
.grk-cf.zero{background:var(--accent-soft);border-left-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.grk,.grk-pool .fly{transition:none;animation:none}}
/* 생성창 속성·특성 개화 카드: 등급 카드(.grk)와 같은 틀 */
.grk-tiers.el{grid-template-columns:7fr 3fr}
.grk-tiers.sp{grid-template-columns:1fr}
.grk .L.w2{font-size:28px;flex:1;display:flex;align-items:center;justify-content:center;width:100%;text-align:center;position:relative;top:-16px}
.grk:not(.tall) .L:not(.w2){flex:1;display:flex;align-items:center;justify-content:center;width:100%;position:relative;top:-15px}
.grk .L.nm{font-size:var(--fs-title)}
.grk .mt{position:relative;top:-7px;display:grid;grid-template-columns:auto auto;gap:0 6px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);line-height:1.6}
.grk .mt b{font-family:var(--font);font-weight:500}
.grk .mt .up{color:var(--accent)}.grk .mt .dn{color:var(--bad)}
.grk .ds{margin-top:40px;font-size:var(--fs-xs);color:var(--faint);line-height:1.45;text-align:center;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.grk.tall{min-height:150px;padding-top:26px;justify-content:flex-start;gap:10px}
.grk[aria-pressed="true"] .ds{color:var(--sub)}
@media (max-width:640px){.grk-tiers.el,.grk-tiers.sp{grid-template-columns:1fr}.grk-tier .rw.fl{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.grk-tiers.sp .rw.fl{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 캐릭터 생성 기본 능력치(시안 D-1): 셀 충전 육각형 + 능력치 스캔 리스트 */
.crs{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:center;margin-top:8px}
@media (max-width:760px){.crs{grid-template-columns:1fr}}
.crs .crhex{width:300px;max-width:100%;height:auto;margin:0 auto;display:block}
.crs .cell{cursor:pointer;transition:fill .15s,stroke .15s}
.crs .cell.base{cursor:default}
.crs .lbl{cursor:help}
.crs .pulse{pointer-events:none;transform-box:fill-box;transform-origin:center;animation:crs-pulse .5s ease-out forwards}
@keyframes crs-pulse{0%{opacity:.9}100%{opacity:0;transform:scale(1.35)}}
.crs .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.crs .ptl{font-family:var(--mono);font-size:var(--fs-sm);color:var(--sub)}
.crs .ptl b{color:var(--accent);font-size:var(--fs-lg);padding:0 6px;border-bottom:2px solid var(--accent);font-weight:500}
.crs .ptl b.zero{color:var(--faint);border-color:var(--line)}
.crs .rw{display:grid;grid-template-columns:44px minmax(0,1fr) 30px 32px 32px;gap:2px 10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.crs .rw:last-child{border-bottom:0}
.crs .rw b{font-weight:600;cursor:help}
.crs .seg{display:grid;gap:2px}
.crs .sg{position:relative;height:20px;padding:0;border:0;background:none;cursor:pointer}
.crs .sg::after{content:"";position:absolute;left:0;right:0;top:7px;height:6px;background:var(--track);transition:background .15s}
.crs .sg.base{cursor:default}.crs .sg.base::after{background:#3a4a70}
.crs .sg.on::after{background:var(--accent)}
.crs .sg.add::after{background:rgba(156,193,255,.45)}
.crs .sg.sub::after{background:var(--bad)}
.crs .sg:disabled:not(.base){cursor:not-allowed}.crs .sg:disabled:not(.base)::after{opacity:.45}
.crs .sbtn:disabled{opacity:.28;cursor:not-allowed}
.crs .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-lg);text-align:right}
.crs .d{grid-column:2/-1;font-size:var(--fs-sm);color:var(--faint);line-height:1.3}
.crs .ft{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.crs .ft .lb{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;color:var(--faint);margin-right:4px}
.crs .ft .role{font-family:var(--mono);font-size:var(--fs-sm);color:var(--gold);margin-left:auto}
.crs .ft .inf{flex-basis:100%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px 6px;margin-top:6px}
@media (max-width:760px){.crs .ft .inf{grid-template-columns:repeat(4,minmax(0,1fr))}}
.crs .ft .inf span{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:var(--fs-xs);color:var(--faint)}
.crs .ft .inf b{font-family:var(--mono);font-size:var(--fs-base);font-weight:500;color:var(--fg)}
@media (prefers-reduced-motion:reduce){.crs .pulse{display:none}.crs .cell,.crs .sg::after{transition:none}}