/* R32 공통 UI 디자인 시스템 — 토큰·글꼴·패널·리본 제목·버튼 3상태·툴팁·등급 칸. 설명: content_devlog_20261109/UI_STYLE.md
   원화: art/ui/gothic_kit.png(자체 생성) → tools/slice_ui_r32.py 로 자른 art/ui/r32/*.webp. 글꼴: Noto Serif KR(SIL OFL 1.1) 부분집합 art/fonts/. */
@font-face{font-family:"AW Serif";src:url('art/fonts/aw-serif-500.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:"AW Serif";src:url('art/fonts/aw-serif-800.woff2') format('woff2');font-weight:700 900;font-display:swap}
:root{
 --aw-serif:"AW Serif","Noto Serif KR","Nanum Myeongjo",Batang,Georgia,serif;
 --aw-gold:#d9b46a;--aw-gold-hi:#ffe6a6;--aw-gold-dim:#8a6a3d;--aw-gold-deep:#5a4126;
 --aw-text:#d8c8a6;--aw-text-dim:#9d8d72;--aw-text-mute:#6f6352;--aw-ink:#070605;
 --aw-bg:#0b0907;--aw-bg-2:#15110d;--aw-bg-glass:#0a0806ee;--aw-danger:#d0654c;--aw-ok:#7fc77a;
 /* 등급 색(고전 ARPG 결): 일반 흰 · 마법 파랑 · 희귀 노랑 · 고유 금 · 세트 초록 · 제작/전설 주황 */
 --aw-r-normal:#e9e5dc;--aw-r-magic:#7f8fff;--aw-r-rare:#f2df5c;--aw-r-unique:#c9a45c;--aw-r-set:#4fd26f;--aw-r-crafted:#ff9b3d;--aw-r-socket:#9a9a9a;
 --aw-panel:url('art/ui/r32/panel.webp');--aw-btn:url('art/ui/r32/btn.webp');--aw-btn-hover:url('art/ui/r32/btn_hover.webp');--aw-btn-down:url('art/ui/r32/btn_down.webp');--aw-btn-sel:url('art/ui/r32/btn_sel.webp');
 --aw-slot-normal:url('art/ui/r32/slot_normal.webp');--aw-slot-magic:url('art/ui/r32/slot_magic.webp');--aw-slot-rare:url('art/ui/r32/slot_rare.webp');--aw-slot-unique:url('art/ui/r32/slot_unique.webp');
 --aw-ease:cubic-bezier(.2,.7,.2,1);
}
/* 패널: 돌·금속 9-slice 프레임 + 어두운 안쪽 */
.aw-panel{position:relative;box-sizing:border-box;border:30px solid transparent;border-image:var(--aw-panel) 108 / 46px / 4px stretch;background:radial-gradient(ellipse 90% 80% at 50% 35%,#1a140e 0,#0c0a08 60%,#070605 100%) padding-box;box-shadow:0 30px 80px #000c;color:var(--aw-text);font-family:var(--aw-serif)}
.aw-panel::before{content:'';position:absolute;inset:-8px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:screen;opacity:.6}
/* 제목 리본: 어두운 판 위 금색 세리프 + 양옆 장식 */
.aw-ribbon{display:flex;align-items:center;justify-content:center;gap:14px;margin:-6px auto 18px;padding:0 4px;font:800 19px/1 var(--aw-serif);letter-spacing:.32em;text-indent:.32em;color:transparent;background:linear-gradient(180deg,#fff2c8 0,#e8c47c 45%,#a87a3a 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 10px #000)}
.aw-ribbon::before,.aw-ribbon::after{content:'';flex:1 1 40px;max-width:110px;height:9px;background:linear-gradient(90deg,transparent,#8a6a3d 30%,#e2c27e 50%,#8a6a3d 70%,transparent) center/100% 1px no-repeat,radial-gradient(circle,#e8c983 0 2px,transparent 2.5px) center/9px 9px no-repeat}
/* 버튼 3상태(기본·호버·눌림) + 선택 + 비활성 */
.aw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:46px;padding:0 26px;border:14px solid transparent;border-width:14px 22px;border-image:var(--aw-btn) 30 44 fill / 14px 22px stretch;background:none;color:#d9c49a;font:600 15px/1 var(--aw-serif);letter-spacing:.2em;text-shadow:0 1px 2px #000,0 0 8px #000;cursor:pointer;transition:color .12s,filter .12s;-webkit-tap-highlight-color:transparent}
.aw-btn:is(:hover,:focus-visible):not(:disabled){border-image-source:var(--aw-btn-hover);color:var(--aw-gold-hi);filter:drop-shadow(0 0 8px #ffb44a55);outline:none}
.aw-btn:active:not(:disabled){border-image-source:var(--aw-btn-down);transform:translateY(1px);color:#f3d79a}
.aw-btn:is([aria-pressed=true],[aria-current=true],.selected){border-image-source:var(--aw-btn-hover);color:#ffe6a6;text-shadow:0 0 8px #ffb44a99,0 2px 2px #000;filter:drop-shadow(0 0 6px #d9b46a66)} /* R32d: 선택 = 밝은 판+금빛 글자(금판+어두운 글자 대비 약함) */
.aw-btn:disabled{filter:grayscale(.8) brightness(.6);cursor:default}
.aw-btn.aw-small{min-height:34px;font-size:12px;border-width:10px 16px;border-image-width:10px 16px;padding:0 12px;letter-spacing:.12em}
.aw-btn.aw-danger{color:#f0a18c}
/* 툴팁(아이템·스킬 공통): 검은 유리 + 얇은 금테 + 등급 색 제목 */
.aw-tooltip{position:fixed;z-index:9000;pointer-events:none;max-width:340px;padding:12px 16px 13px;background:linear-gradient(#0c0a08f5,#060504f5);border:1px solid var(--aw-gold-deep);box-shadow:0 0 0 1px #000,0 0 0 3px #1b140c,0 12px 34px #000d;font:13px/1.55 var(--aw-serif);color:var(--aw-text);text-align:center;white-space:pre-line}
.aw-tooltip b,.aw-tooltip .aw-tt-title{display:block;font-weight:800;font-size:15px;letter-spacing:.04em;margin-bottom:4px}
.aw-tooltip .aw-tt-sub{color:var(--aw-text-dim);font-size:12px}.aw-tooltip .aw-tt-mod{color:var(--aw-r-magic)}.aw-tooltip .aw-tt-bad{color:var(--aw-danger)}
.aw-r-normal{color:var(--aw-r-normal)}.aw-r-magic{color:var(--aw-r-magic)}.aw-r-rare{color:var(--aw-r-rare)}.aw-r-unique,.aw-r-legendary{color:var(--aw-r-unique)}.aw-r-set{color:var(--aw-r-set)}.aw-r-crafted{color:var(--aw-r-crafted)}
/* 등급 칸 프레임 */
.aw-slot{box-sizing:border-box;border:8px solid transparent;border-image:var(--aw-slot-normal) 22 / 8px stretch;background:#0a0908 padding-box}
.aw-slot.magic{border-image-source:var(--aw-slot-magic)}.aw-slot.rare{border-image-source:var(--aw-slot-rare)}.aw-slot:is(.unique,.legendary,.set){border-image-source:var(--aw-slot-unique)}
/* 본문·입력 공통 */
.aw-text{font:15px/1.7 var(--aw-serif);color:var(--aw-text)}.aw-dim{color:var(--aw-text-dim)}
.aw-input{box-sizing:border-box;min-height:42px;padding:8px 12px;border:1px solid var(--aw-gold-deep);background:#070605;box-shadow:inset 0 2px 6px #000;color:var(--aw-gold-hi);font:600 16px var(--aw-serif);letter-spacing:.06em}
.aw-input:focus-visible{outline:1px solid var(--aw-gold);outline-offset:2px}
.aw-divider{height:9px;margin:12px 0;background:linear-gradient(90deg,transparent,#6f5634 20%,#c9a35c 50%,#6f5634 80%,transparent) center/100% 1px no-repeat,radial-gradient(circle,#d9b46a 0 2.5px,transparent 3px) center/10px 10px no-repeat}
@media(prefers-reduced-motion:reduce){.aw-btn{transition:none}}