/* R32qs 퀵슬롯 막대(현대·모바일 ARPG식) + 스킬 창 아이콘·끌어 놓기 + 키 설정 창. 토큰은 ui-r32.css(--aw-*). */
:root{--qs-size:44px;--qs-gap:9px}
/* 퀵슬롯 모드: 옛 F1–F5 막대·조작 문구 숨김(클래식 모드는 그대로) */
body[data-controls-r32="quickslot"] .controls .hotbar,body[data-controls-r32="quickslot"] #control-hint{display:none!important}
.qs-bar{display:flex;align-items:center;justify-content:center;gap:var(--qs-gap);box-sizing:border-box;height:54px;padding:3px 16px 5px;margin:0 auto;pointer-events:auto;
 background:linear-gradient(180deg,#0d0a07d9,#060504f2);border:1px solid var(--aw-gold-deep);border-radius:40px;box-shadow:0 0 0 1px #000,0 0 0 3px #1b140c,0 10px 26px #000c}
.qs-bar[hidden]{display:none}
.qs-slot{position:relative;flex:none;width:var(--qs-size);height:var(--qs-size);padding:0;border:0;border-radius:50%;cursor:pointer;background:#08070a;
 /* 둥근 금속 테두리: 안쪽 그림자 · 어두운 철 · 금빛 선 · 바깥 검은 띠 */
 box-shadow:inset 0 0 0 2px #000,inset 0 0 14px #000e,0 0 0 2px #2a2016,0 0 0 3px var(--aw-gold-dim),0 0 0 5px #120d08,0 0 0 6px #4a3720,0 3px 8px #000c;
 transition:transform .08s ease,filter .12s ease}
.qs-slot::before{content:'';position:absolute;inset:-6px;border-radius:50%;pointer-events:none;background:conic-gradient(from 210deg,#fff2c855,#0000 18%,#0000 50%,#fff2c833 62%,#0000 76%);mix-blend-mode:screen;opacity:.55}
.qs-slot:hover{filter:brightness(1.15)}
.qs-slot:focus-visible{outline:2px solid var(--aw-gold-hi);outline-offset:6px}
.qs-icon{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:50%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.qs-slot.empty{background:radial-gradient(circle at 50% 40%,#1a140e,#060504)}
.qs-slot.empty .qs-icon{display:none}
/* 쿨다운: 시계 방향으로 걷히는 어두운 부채꼴 + 남은 초 */
.qs-sweep{position:absolute;inset:3px;border-radius:50%;pointer-events:none;background:conic-gradient(#0000 0 calc((1 - var(--qs-p,0))*360deg),#000000d6 0);opacity:0}
.qs-slot.cooling .qs-sweep{opacity:1}
.qs-slot.cooling .qs-icon{filter:brightness(1.12)}
.qs-cd{position:absolute;inset:0;display:grid;place-items:center;font:800 15px/1 var(--aw-serif);color:#f3ead6;text-shadow:0 0 3px #000,0 1px 2px #000,0 0 8px #000;pointer-events:none}
/* 마나 부족: 파란 물빛 */
.qs-slot.no-mana .qs-icon{filter:grayscale(.8) brightness(.95)}
.qs-slot.no-mana::after{content:'';position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 50% 55%,#3f7dff70,#1638b0b0);box-shadow:inset 0 0 8px #6fa0ff;pointer-events:none}
/* 각인된 작은 키 글자 */
.qs-key{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);min-width:13px;padding:0 3px;border-radius:3px;font:800 9.5px/12px var(--aw-serif);letter-spacing:.04em;text-align:center;color:#c9ad78;
 background:linear-gradient(#2b2117,#120d08);border:1px solid #6b5232;box-shadow:inset 0 1px 0 #ffe6a633,0 1px 2px #000;text-shadow:0 -1px 0 #000,0 1px 0 #ffe6a622;pointer-events:none;z-index:2}
.qs-charges,.qs-count{position:absolute;right:-3px;top:-4px;min-width:16px;padding:0 3px;border-radius:8px;font:800 10px/15px var(--aw-serif);text-align:center;color:#f5e7c8;background:#1a120b;border:1px solid var(--aw-gold-dim);pointer-events:none;z-index:2}
.qs-charges:empty{display:none}
.qs-basic{width:38px;height:38px;cursor:default}
.qs-sep{width:6px}
.qs-rmb{--qs-size:48px}
.qs-rmb .qs-key{font-size:9px}
.qs-potions{display:flex;gap:6px;margin-left:12px;padding-left:12px;border-left:1px solid #5a412655}
.qs-potion{--qs-size:36px;border-radius:10px}
.qs-potion .qs-icon{border-radius:9px;object-fit:contain;background:radial-gradient(circle,#1c140d,#060504)}
.qs-potion::before{border-radius:14px}
.qs-potion.none .qs-icon{filter:grayscale(1) brightness(.45)}
.qs-slot.qs-press{animation:qs-press .16s ease}
@keyframes qs-press{40%{transform:scale(.9);filter:brightness(1.6)}}
.qs-slot.qs-drop{box-shadow:inset 0 0 0 2px #000,0 0 0 3px var(--aw-gold-hi),0 0 16px #ffd58a}
body.qs-arming .qs-slot[data-qslot],body.qs-arming .qs-mini{animation:qs-arm 1s ease-in-out infinite}
@keyframes qs-arm{50%{box-shadow:inset 0 0 0 2px #000,0 0 0 3px var(--aw-gold-hi),0 0 14px #ffd58aaa}}
/* 툴팁 */
.qs-tip{text-align:left;min-width:230px}
.qs-tip-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.qs-tip-icon{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--aw-gold-dim),0 0 0 3px #000}
.qs-tip-head .aw-tt-title{margin:0;color:var(--aw-gold-hi)}
.qs-tip-line{font-size:12.5px;line-height:1.5}
.qs-tip-meta{color:#8fb4ff}
.qs-tip-lv{color:var(--aw-text-dim)}
.qs-tip-warn{color:#7fa8ff;font-weight:800}
/* 스킬 창(T): 행 아이콘 · 퀵슬롯 띠 */
.qs-strip{margin:8px 0 12px;padding:10px 12px 14px;border:1px solid #514435;background:#0a0a0b9a;text-align:center}
.qs-strip[hidden]{display:none}
.qs-strip-title{margin:0 0 10px;font:700 13px var(--aw-serif);letter-spacing:.12em;color:var(--aw-gold)}
.qs-strip-row{display:flex;justify-content:center;gap:12px;margin-bottom:12px}
.growth-panel .qs-slot.qs-mini{--qs-size:46px;padding:0;background:#08070a;border:0}
.growth-panel .qs-keys-btn{padding:6px 14px;font:700 12px var(--aw-serif)}
.skill-branch[data-skill]{display:grid;grid-template-columns:52px 1fr;column-gap:10px;align-items:start}
.skill-branch[data-skill]>*:not(.qs-row-icon){grid-column:2}
.qs-row-icon{grid-row:1 / span 4;width:50px;height:50px;border-radius:50%;cursor:grab;box-shadow:0 0 0 2px #000,0 0 0 3px var(--aw-gold-dim),0 0 0 5px #120d08,0 3px 8px #000c}
.qs-row-icon[draggable="false"]{cursor:default;opacity:.85}
.qs-row-icon:active{cursor:grabbing}
.qs-row-desc{margin:0 0 6px;font:12px/1.45 var(--aw-serif);color:var(--aw-text-dim)}
/* 키 설정 창 */
.qs-rebind{position:fixed;z-index:9500;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));padding:10px 14px 16px}
.qs-rebind-list{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:0 0 12px;font:14px var(--aw-serif)}
.qs-rebind-list dt{align-self:center;color:var(--aw-text)}
.qs-rebind-list dd{margin:0}
.qs-rebind-key{min-width:120px}
.qs-rebind-note{font-size:11.5px;color:var(--aw-text-dim);line-height:1.5}
.qs-front-keys{margin:4px 0 8px}
/* 클래식 막대도 글리프 대신 G06 아이콘 */
.hotbar button[data-skill]:before,.hotbar .r31-lmb:before,.hotbar .r31-rmb:before,.hotbar .r31-belt:before{content:''!important;display:block;width:30px;height:30px;margin:0 auto 2px;border-radius:50%;background:var(--qs-icon,none) center/cover no-repeat;box-shadow:0 0 0 1px #000,0 0 0 2px var(--aw-gold-dim);text-shadow:none}
.hotbar .r31-belt.empty:before{background:radial-gradient(circle,#1a140e,#060504)}
.hotbar .r31-belt.hp:before{--qs-icon:url('art/icons_g06/potion_health_01.webp');border-radius:8px}
.hotbar .r31-belt.mp:before{--qs-icon:url('art/icons_g06/potion_mana_01.webp');border-radius:8px}
.hotbar [data-action="inventory"]:before,.hotbar [data-action="potion"]:before{content:none!important;display:none}
@media (max-width:820px){:root{--qs-size:36px;--qs-gap:5px}.qs-rmb{--qs-size:40px}.qs-potion{--qs-size:30px}.qs-basic{width:30px;height:30px}.qs-bar{padding:7px 9px 7px}.qs-potions{margin-left:6px;padding-left:6px}}
@media (max-width:560px){.qs-basic,.qs-sep{display:none}.qs-cd{font-size:13px}}
/* R32ui 터치(폰): 스킬은 오른쪽 아래 터치 패드가 맡으므로 막대에서는 물약 3칸만 왼쪽 위에 둔다(390px 폭에서 막대가 화면 밖·메뉴 버튼과 겹치던 문제) */
body[data-touch=true] .qs-bar{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;right:auto;width:auto;height:auto;margin:0;padding:6px 8px 7px;border-radius:14px;gap:6px}
body[data-touch=true] .qs-bar>:not(.qs-potions){display:none!important}
body[data-touch=true] .qs-bar .qs-potions{margin:0;padding:0;border:0}
/* R32ui 터치: 경험치 줄이 오른쪽 마력 구슬(2px)·아래 터치 패드(2px)에 닿던 것 → 폭을 구슬 사이로, 4px 위로 */
body[data-touch=true] .growth-hud{width:auto!important;right:96px;bottom:196px}

/* R32n: 스킬 실패(재사용 대기·마나) — 짧은 흔들림 + 붉은 테 0.3초 */
@keyframes qsDenyR32{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
[data-skill].qs-deny{animation:qsDenyR32 .3s ease-out;box-shadow:0 0 0 1px #8a2a22 inset}
/* R32r 첫 레벨업 안내: 'Lv · T' 버튼 은은한 금빛 맥동(6초) · 첫 스킬 창 추천 스킬 강조(네온 금지, 금테 한 줄) */
.growth-level.r32r-pulse{animation:r32r-pulse 1.5s ease-in-out 4;border-color:#d9b46a!important}
@keyframes r32r-pulse{0%,100%{box-shadow:0 0 0 1px #d9b46a55,0 0 6px #d9b46a22}50%{box-shadow:0 0 0 1px #e8c77acc,0 0 14px #d9b46a66;color:#ffe6a6}}
#skill-tree .skill-branch.r32r-reco{outline:1px solid #d9b46a;outline-offset:2px;box-shadow:0 0 12px #d9b46a33,inset 0 0 18px #d9b46a14}
#skill-tree .r32r-reco-note{grid-column:1/-1;margin:6px 0 0;padding:5px 8px;font:13px/1.45 var(--aw-serif,serif);color:#f0dcae;background:#1a140cdd;border-left:2px solid #d9b46a}
@media(prefers-reduced-motion:reduce){.growth-level.r32r-pulse{animation:none;box-shadow:0 0 0 1px #e8c77acc,0 0 10px #d9b46a55}}