.wardrobe-view { background: #160f18; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.wardrobe-top { position:absolute;z-index:12;top:max(12px,env(safe-area-inset-top));left:17px;right:17px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px }
.wardrobe-top strong { position:relative;min-width:150px;padding:3px 18px 14px;color:#ffe5a6;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(31px,7.8vw,41px);font-weight:900;line-height:1;text-align:center;text-shadow:0 3px 2px #5a2d0d,0 0 16px #f3bd6852 }
.wardrobe-top strong::after { content:"◆  ·  🐾  ·  ◆";position:absolute;right:-5px;bottom:-5px;left:-5px;color:#d89e4c;font-family:sans-serif;font-size:9px;letter-spacing:5px;text-shadow:none }
.wardrobe-cancel,.wardrobe-save { min-width:78px;min-height:49px;padding:8px 17px;border:2px solid #e9be71;border-radius:23px;box-shadow:inset 0 0 0 2px #fff2b929,0 6px 15px #0008;color:#fff0c4;font-size:16px;font-weight:1000 }
.wardrobe-cancel { justify-self:start;background:linear-gradient(180deg,#34254f,#17132d) }
.wardrobe-save { justify-self:end;background:linear-gradient(180deg,#269561,#0d603e);color:#fff1b9 }
.wardrobe-content { position:absolute;inset:0;overflow:hidden }
.wardrobe-room { position:absolute;z-index:1;inset:0 0 31%;overflow:hidden;background:#24170e url("assets/dream-town/wardrobe-room-v1.webp") center 24%/cover no-repeat }
.wardrobe-room::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#120b0928 0,#120b0900 58%,#09091c92 100%) }
.wardrobe-turn { position:absolute;z-index:6;top:max(82px,calc(env(safe-area-inset-top) + 75px));left:50%;display:grid;grid-template-columns:48px auto 48px;align-items:center;gap:9px;transform:translateX(-50%) }
.wardrobe-turn button { display:grid;width:48px;height:48px;place-items:center;border:2px solid #e1af59;border-radius:50%;background:radial-gradient(circle at 35% 25%,#39335f,#101329 74%);box-shadow:inset 0 0 0 2px #fff3bf1f,0 5px 12px #0009;color:#f7cf79;font-size:27px;font-weight:1000 }
.wardrobe-turn span { padding:6px 13px;border:1px solid #e0b76a;border-radius:999px;background:#161326e8;box-shadow:0 4px 8px #0008;color:#ffe5ad;font-size:13px;font-weight:900;white-space:nowrap }
.wardrobe-character { position:absolute;z-index:4;bottom:28.4%;left:51.2%;width:165px;height:218px;transform:translateX(-50%);background-position:center bottom;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 6px 6px #0007) }
.wardrobe-slot { position:absolute;z-index:5;width:88px;height:88px;padding:0;overflow:hidden;border:0;border-radius:50%;background:#15111c;box-shadow:0 7px 14px #0009 }
.wardrobe-slot img { display:block;width:100%;height:100%;object-fit:cover }
.slot-hat { top:38%;left:4.5% }.slot-neck { top:38%;right:4.5% }.slot-clothes { top:60%;left:4.5% }.slot-shoes { top:60%;right:4.5% }
.wardrobe-drawer { position:absolute;z-index:8;right:5px;bottom:max(5px,env(safe-area-inset-bottom));left:5px;height:36.5%;min-height:315px;padding:15px 11px 10px;border:2px solid #d9ad68;border-radius:36px 36px 22px 22px;background:linear-gradient(180deg,#211d40fa 0,#12142ffe 22%,#090d22fe 100%);box-shadow:inset 0 3px 0 #fff0b00d,inset 0 0 0 3px #fff0b00a,0 -7px 20px #05030b8f }
.wardrobe-drawer::before { content:"";position:absolute;top:-15px;left:50%;width:42%;height:29px;transform:translateX(-50%);border:2px solid #d9ad68;border-bottom:0;border-radius:28px 28px 0 0;background:linear-gradient(180deg,#262144,#211d40) }
.wardrobe-drawer h1 { position:relative;z-index:1;height:27px;margin:0 0 9px;color:#f5d89b;font-size:18px;font-weight:700;text-align:center }
.wardrobe-drawer h1 b { margin-left:5px;color:#ffd98d;font-size:20px }
.wardrobe-tabs { display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-bottom:10px;padding:4px;border:1px solid #d2ae6a52;border-radius:15px;background:#090d20c9;box-shadow:inset 0 2px 8px #0008 }
.wardrobe-tabs button { display:flex;min-width:0;height:45px;align-items:center;justify-content:center;gap:3px;padding:2px 3px;border:1px solid #b99a6454;border-radius:10px;background:linear-gradient(180deg,#20213a,#11152b);box-shadow:inset 0 1px 0 #fff1bf0d;color:#dbc99e }
.wardrobe-tabs button b { min-width:0;overflow:hidden;font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap }
.wardrobe-tab-icon { flex:0 0 22px;width:22px;height:22px;background-position:center;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 1px 2px #0008) }
.tab-all .wardrobe-tab-icon { background-image:url("assets/dream-town/wardrobe-ui/tab-icon-all.png") }.tab-wardrobe .wardrobe-tab-icon { background-image:url("assets/dream-town/wardrobe-ui/tab-icon-wardrobe.png") }.tab-accessory .wardrobe-tab-icon { background-image:url("assets/dream-town/wardrobe-ui/tab-icon-accessory.png") }.tab-snack .wardrobe-tab-icon { background-image:url("assets/dream-town/wardrobe-ui/tab-icon-snack.png") }.tab-toy .wardrobe-tab-icon { background-image:url("assets/dream-town/wardrobe-ui/tab-icon-toy.png") }
.wardrobe-tabs button.active { border-color:#f1c86f;background:linear-gradient(180deg,#37314a,#18182e);box-shadow:inset 0 0 8px #f7c96826,0 0 9px #ffc96f73;color:#ffe1a0 }
.wardrobe-items { display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/4);gap:8px;padding:2px 1px 5px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;scroll-snap-type:x proximity }
.wardrobe-items::-webkit-scrollbar { display:none }
.wardrobe-item { position:relative;display:grid;min-width:0;height:139px;grid-template-rows:94px 22px 1fr;place-items:center;padding:5px 5px 6px;overflow:hidden;scroll-snap-align:start;border:1px solid #d6b36b73;border-radius:17px;background:linear-gradient(145deg,#29263f,#111426);color:#f8dfaa }
.wardrobe-item>img { width:100%;height:92px;border-radius:12px;object-fit:cover;object-position:center;mix-blend-mode:screen }
.wardrobe-item:first-child>img { width:62px;height:62px;align-self:center;border:1px solid #d9b56a5e;border-radius:50%;mix-blend-mode:normal }
.wardrobe-item.selected { border-color:#ffe29b;box-shadow:inset 0 0 17px #f5b95736,0 0 13px #f6c4687a }
.wardrobe-item b { display:block;max-width:100%;overflow:hidden;color:#f8dfaa;font-size:11px;text-overflow:ellipsis;white-space:nowrap }
.wardrobe-item small { color:#bdb2c8;font-size:8px }
.wardrobe-item .item-count { position:absolute;right:7px;bottom:6px;display:grid;width:22px;height:22px;place-items:center;border:1px solid #d6b46f;border-radius:50%;background:#14152d;color:#f3d896;font-size:11px;font-weight:900 }
.wardrobe-item.coming::after { content:"준비 중";position:absolute;top:7px;right:7px;padding:2px 5px;border-radius:999px;background:#15152dcc;color:#e6cc96;font-size:7px }
.wardrobe-help { margin:7px 0 0;color:#e6c98f;font-size:11px;font-weight:900;text-align:center }.wardrobe-help span { margin:0 6px;color:#f1c96f }
.wardrobe-cancel:focus-visible,.wardrobe-save:focus-visible,.wardrobe-turn button:focus-visible,.wardrobe-tabs button:focus-visible,.wardrobe-item:focus-visible { outline:3px solid #fff0aa;outline-offset:2px }
@media(max-width:390px){.wardrobe-top{left:9px;right:9px;gap:7px}.wardrobe-top strong{min-width:112px;font-size:28px}.wardrobe-cancel,.wardrobe-save{min-width:67px;min-height:43px;padding:7px 12px;font-size:14px}.wardrobe-turn{top:max(75px,calc(env(safe-area-inset-top) + 68px))}.wardrobe-character{bottom:28.25%;left:51.2%;width:150px;height:200px}.wardrobe-slot{width:76px;height:76px}.wardrobe-drawer{right:3px;left:3px;height:37.5%;min-height:306px;padding-right:7px;padding-left:7px}.wardrobe-tabs button{height:43px}.wardrobe-tabs button b{font-size:9px}.wardrobe-tab-icon{flex-basis:20px;width:20px;height:20px}.wardrobe-item{height:132px;grid-template-rows:87px 21px 1fr}.wardrobe-item>img{height:85px}}