#btn-avatar { padding:0; border:1px solid var(--gold-dark); border-radius:6px; background:#201b18; width:46px; height:54px; overflow:hidden; flex-shrink:0; }
#btn-avatar .hud-avatar { width:100%; height:100%; object-fit:cover; object-position:50% 18%; margin:0; border:0; }
#screen-avatar .panel-body { padding:16px 16px 36px; }
#screen-avatar .panel-header { display:flex; justify-content:space-between; align-items:center; }
.avatar-showcase { --avatar-tone:#a9c9b7; border:1px solid #635a48; border-radius:12px; overflow:hidden; background:radial-gradient(ellipse at 35% 38%,#40504c55,transparent 65%),linear-gradient(135deg,#25231e,#101516); display:grid; grid-template-columns:1.1fr 1fr; align-items:center; min-height:370px; }
.avatar-picture { position:relative; display:grid; place-items:center; height:420px; overflow:hidden; }
.avatar-halo { position:absolute; width:230px; height:230px; border:1px solid var(--avatar-tone); border-radius:50%; opacity:.3; box-shadow:0 0 65px color-mix(in srgb,var(--avatar-tone) 22%,transparent); }
.avatar-portrait { position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:contain; filter:drop-shadow(0 12px 18px #0007); }
.avatar-image-notice { position:absolute; bottom:12px; background:#111b; color:var(--paper); padding:5px 8px; font-size:12px; }
.avatar-copy { padding:20px 18px 20px 0; }
.avatar-kicker { color:var(--gold-2); font:11px var(--sans); letter-spacing:.04em; }
.avatar-copy h3 { font:700 24px/1.5 var(--serif); margin:12px 0; }
.avatar-description { font:14px/1.8 var(--sans); color:#c4c5b7; }
.avatar-copy .btn { margin-top:12px; min-height:44px; }
.avatar-notice { min-height:1.5em; font:12px/1.5 var(--sans); color:#b5d8c1; }
.avatar-free-note { font:12px/1.7 var(--sans); color:var(--paper-dim); margin:16px 0; }
.avatar-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.avatar-card { position:relative; border:1px solid #4a4640; border-radius:7px; overflow:hidden; background:linear-gradient(#283336,#171916); padding:0 0 8px; min-width:0; text-align:center; }
.avatar-card img { display:block; width:100%; aspect-ratio:2/3; object-fit:contain; }
.avatar-card strong { display:block; font:700 14px var(--serif); margin-top:6px; }
.avatar-card small { display:block; color:var(--paper-dim); font:10px/1.4 var(--sans); padding:4px; }
.avatar-card[aria-pressed="true"] { border-color:var(--gold-2); box-shadow:inset 0 0 0 2px #d9a44177; }
.avatar-card.selected::after { content:'선택 중'; position:absolute; top:5px; left:5px; background:#244738; color:#e4f6d9; padding:3px 5px; border-radius:3px; font-size:9px; }
.avatar-gear { margin:26px 0; padding:16px; border:1px solid var(--line); border-radius:8px; }
.avatar-gear h3 { margin:0 0 12px; }
.avatar-gear-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:12px 0; }
.avatar-gear-slot { padding:10px; background:#292823; border-radius:5px; display:grid; gap:5px; }
.avatar-gear-slot small,.avatar-gear-slot span { color:var(--paper-dim); font-size:11px; }.avatar-gear-slot strong { font-size:13px; }
#screen-avatar button:focus-visible,#btn-avatar:focus-visible { outline:3px solid #a4e3d0; outline-offset:3px; }
@media(max-width:600px) { .avatar-showcase { display:block; }.avatar-picture { height:360px; }.avatar-copy { padding:0 20px 14px; text-align:center; }.avatar-copy h3 { font-size:22px; margin:5px 0; }.avatar-description { margin:8px 0; }.avatar-copy .btn { width:100%; }.avatar-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.avatar-gear-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { #screen-avatar { transition:none; } }