/* 스킬 화면(mockups/skill-3.html A안): 캐릭터 시트와 같은 틀, 왼쪽 탭+스킬 표(줄을 누르면 펼쳐 이름 변경), 오른쪽 장착 슬롯 */
/* TODO: 스킬 설계가 끝난 뒤 스킬 창을 다시 디자인해야 함 (지금 화면은 임시) */
.skv{word-break:keep-all}
.skv .rtabs button small{font:500 11px var(--mono);color:var(--faint);margin-left:8px}
.skv .rtabs button[aria-selected="true"] small{color:var(--accent)}
.skv .rtabs .aux{margin-left:auto;align-self:center;font:11px var(--mono);color:var(--faint);letter-spacing:.06em}
.skv .ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.skv td{padding:10px 8px;vertical-align:middle}
.skv td.no{width:28px;font-size:12px;color:var(--accent)}
.skv td.k{cursor:pointer;font-weight:400;text-align:left}
.skv td.k b{display:flex;align-items:center;gap:8px;white-space:nowrap;font:600 15px var(--serif)}
.skv td.k b .ico{color:var(--accent)}
.skv td.k small{padding-left:26px;margin-top:2px;line-height:1.4}
.skv td.tg{font:12px var(--font);color:var(--sub)}
.skv td.fx{text-align:left;font:13px var(--font);color:var(--sub)}
.skv td.pw{white-space:nowrap}
.skv td.pw small{display:block;font-size:10px;color:var(--faint)}
.skv tr.sel td{background:rgba(156,193,255,.06)}
.skv tr.eqd td.no{color:var(--gold)}
.skv tr.lock td:not(:last-child){opacity:.45}
.skv td .btn{font-family:var(--font)}   /* 표 칸(mono)을 물려받지 않게 */
.skv .lvl{font:500 11px var(--mono);color:var(--faint);letter-spacing:.08em}
.skv .lvl.fx{font:12px var(--font);letter-spacing:0}
.skv tr.ed td{padding:4px 0 14px;text-align:left}
.skv .edbox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:0 12px 0 34px}
.skv .edbox p{grid-column:1/-1;margin:0;font:12px var(--font);color:var(--sub)}
.skv .edbox input{width:100%;min-width:0}
.skv .edbox .cnt{font:11px var(--mono);color:var(--faint)}
.skv .slot{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 10px;border:1px solid var(--line);font-size:13px}
.skv .slot>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skv .slot .i{font:500 11px var(--mono);color:var(--accent)}
.skv .slot .t{font:10px var(--mono);color:var(--faint)}
.skv .slot.fix{border-color:rgba(156,193,255,.3);background:var(--accent-soft)}
.skv .slot.emp{border-style:dashed;color:var(--faint)}
.skv .slot.emp .i{color:var(--faint)}
.skv .slot.pas .i{color:var(--gold)}
@media (max-width:640px){.skv .hide-s,.skv .rtabs .aux{display:none}.skv .rtabs button{padding:9px 14px}.skv td.k b{white-space:normal}}
.sbtn{width:18px;height:18px;font-size:12px;padding:0;line-height:1;background:none;border:1px solid rgba(156,193,255,.4);color:var(--accent);cursor:pointer}
.sbtn:hover:not(:disabled){background:var(--accent-soft)}
.sbtn:disabled{opacity:.3;cursor:not-allowed}
.eqv .faint{color:var(--faint)}.eqv .small{font-size:12px}.eqv .acc{color:var(--accent)}.eqv .up{color:var(--good)}.eqv .dn{color:var(--bad)}
.eqv .tag.k{border:0;padding:0 2px;background:none;font-size:11px}
.eqv .btn{padding:3px 10px;font-size:12px}