/* 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%) border-box;box-shadow:0 30px 80px #000c;color:var(--aw-text);font-family:var(--aw-serif)}
.aw-panel::before{content:'';position:absolute;inset:0;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}
/* R32t-panels: 창 테두리 안쪽 투명 띠 막기 — 틀 그림(panel.webp, 108 조각을 46px 로, 바깥 4px)의 불투명 금속 띠는 바깥 ~13px 뿐이고
   그 안쪽(13~46px)은 그림이 투명하다. 배경을 padding-box(테두리 30px 안쪽)부터 칠하면 사이 ~17px 로 뒤(타이틀 그림·월드·지도)가 비쳤다.
   → 모든 틀 창의 배경을 테두리 상자(border-box)까지 깐다(틀 그림 아래로 들어가 띠를 메움). R32s-ui 의 같은 규칙은 게임 진입 뒤에만 주입돼
   타이틀·설정·제작진·라이선스·직업 선택·저장 슬롯에는 안 걸렸고, 메뉴 쪽 #front-menu 규칙보다 우선순위도 낮았다 → 정적 CSS 에서 !important 로.
   검사: content_devlog_20261109/fixes/r32s-ui/ui_overflow.mjs checkPanelEdgeLeak(안쪽 8~24px 띠 비침 픽셀 0). */
html body :is(.aw-panel,.r32-modal,.growth-panel,#key-guide,#recovery-dialog section,#stash-r32,#merchant,#r32t-map){background-clip:border-box!important;background-origin:border-box!important}
/* R32t-panels: 미니맵도 틀과 지도 사이가 반투명(전체 불투명도 .82 + 배경 #05040488)이라 월드가 비쳤다 → 불투명 판 위 지도 */
html body[data-ui] .map-panel{opacity:1;background:#080706 border-box}
/* R32t-panels: 지도 창(Tab·M) — 전체지도 겹쳐보기 대신 별도 패널. 어두운 양피지(갈색 그라데이션 + 얼룩·결 노이즈) 위에 탐험한 지형·현재 위치·웨이포인트·퀘스트 목표. */
#r32t-map{position:fixed;left:50%;top:calc(50% - 26px);transform:translate(-50%,-50%);z-index:21;display:flex;flex-direction:column;width:min(860px,calc(100vw - 40px));height:min(640px,calc(100vh - 150px));min-height:300px;padding:0 12px 4px;pointer-events:auto}
#r32t-map[hidden]{display:none}
#r32t-map .aw-ribbon{flex:none;margin:-6px auto 0;font-size:18px}
#r32t-map .r32t-map-zone{flex:none;margin:2px 0 6px;min-height:15px;text-align:center;font:600 12.5px/1.2 var(--aw-serif);letter-spacing:.14em;color:var(--aw-text-dim)}
#r32t-map .r32t-map-sheet{position:relative;flex:1 1 auto;min-height:0;border:1px solid #5a4126;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,inset 0 0 46px #000d;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .035 0 0 0 0 .02 0 0 0 -2.2 1.35'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23s)'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .44 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(ellipse 75% 70% at 50% 45%,#3b2d1c 0,#2a2014 55%,#161009 100%)}
#r32t-map .r32t-map-sheet canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#r32t-map .r32t-map-legend{flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px 16px;margin:6px 0 0;font:12px/1.3 var(--aw-serif);color:var(--aw-text-dim)}
#r32t-map .r32t-map-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#r32t-map .r32t-map-legend i{display:inline-block;width:9px;height:9px;flex:none}
#r32t-map .r32t-map-legend i.me{width:0;height:0;border:5px solid transparent;border-bottom:10px solid #fff3c2;border-top:0}
#r32t-map .r32t-map-legend i.wp{border:2px solid #7cc4ff;border-radius:50%}
#r32t-map .r32t-map-legend i.goal{background:#ffd64a;transform:rotate(45deg) scale(.8);box-shadow:0 0 6px #ff9d1a}
#r32t-map .r32t-map-legend i.gate{background:#b27cff;transform:rotate(45deg) scale(.8)}
#r32t-map .r32t-map-keys{color:var(--aw-text-mute);letter-spacing:.06em}
/* 제목 리본: 어두운 판 위 금색 세리프 + 양옆 장식 */
.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 border-box} /* R32t-panels: 칸 틀 그림 띠는 바깥 ~3.5px 뿐 → 배경을 테두리 상자까지(사이 4.5px 비침 막기) */
.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}}