/* ห้องแต่งตัวน้องลีโอ  mockup_shop/leo-dress.css  (26 ต.ค. 2569)
   แถบบนใช้ .pg-top ของ pg-zone.css · มือถือ = ตัวละครบน ตู้เสื้อผ้าล่าง (เลื่อนในกล่อง) · คอม = ตัวละครซ้าย ตู้เสื้อผ้าขวา */
.dr{--top:calc(56px + env(safe-area-inset-top));height:100%;overflow:hidden;background:#f6e7d6;-webkit-tap-highlight-color:transparent}
html:has(body.dr){height:100%;overflow:hidden}
.dr .dr-top{position:fixed;left:0;right:0;top:0;padding-top:env(safe-area-inset-top)}
.dr-title{min-width:0;font-size:16px;font-weight:700;color:#fff;white-space:nowrap}
.dr-title small{font-size:12px;font-weight:500;color:#cfd3dc}
.dr-saved{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:15px;background:rgba(255,255,255,.1);font-size:13px;font-weight:600;color:#cfd3dc;white-space:nowrap}
.dr-saved::before{content:"";width:8px;height:8px;border-radius:50%;background:#9aa0a8}
.dr-saved.is-ok{color:#9ff0c0}.dr-saved.is-ok::before{background:#22c55e}
.dr-saved.is-busy::before{background:#ffb020}
.dr-saved.is-bad{color:#ffb39f}.dr-saved.is-bad::before{background:var(--or)}

.dr-main{position:fixed;left:0;right:0;top:var(--top);bottom:0;display:flex;flex-direction:column}
/* ตัวละคร */
.dr-view{position:relative;flex:none;height:46%;min-height:250px}
.dr-stage{position:absolute;inset:0;touch-action:none}
.dr-stage canvas{display:block;width:100%;height:100%;cursor:grab}
.dr-stage canvas:active{cursor:grabbing}
.dr-hud{position:absolute;left:12px;top:10px;pointer-events:none}
.dr-lv{display:inline-block;padding:5px 10px;border-radius:9px;background:rgba(255,255,255,.94);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.dr-cam{position:absolute;left:8px;right:8px;bottom:8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dr-cam button{height:38px;padding:0 4px;border:1px solid rgba(17,18,20,.12);border-radius:19px;background:rgba(255,255,255,.94);font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08);white-space:nowrap}
.dr-cam button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.dr-cam #spinBtn.on{background:var(--or);border-color:var(--or);color:#fff}
.dr-cam button:active{transform:scale(.96)}
.dr-hint{position:absolute;left:12px;right:12px;top:46px;font-size:12px;color:#7a5a44;pointer-events:none;text-align:left}
.touch .dr-hint{display:none}

/* ตู้เสื้อผ้า */
.dr-ward{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--card);border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.12);padding:10px 12px calc(8px + env(safe-area-inset-bottom))}
.dr-row{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px}
.dr-seg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--ink);border-radius:9px;overflow:hidden}
.dr-seg button{height:38px;padding:0 4px;background:#fff;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.dr-seg button.on{background:var(--ink);color:#fff}
.dr-tabs{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:8px}
.dr-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:52px;padding:4px 2px;border-radius:10px;background:var(--soft);font-size:12px;font-weight:700;line-height:1.15;color:var(--text);text-align:center}
.dr-tab span{max-width:100%;overflow-wrap:anywhere}
.dr-tab-i{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dr-tab.on{background:var(--or);color:#fff}
.dr-panes{flex:1;min-height:0;margin-top:8px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dr-pane[hidden]{display:none}
.dr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-bottom:4px}
.dr-it{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:62px;padding:6px 4px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px;font-weight:600;line-height:1.25;color:var(--text);text-align:center}
.dr-it span{max-width:100%;overflow-wrap:anywhere}
.dr-it-i{flex:none;width:20px;height:20px;fill:none;stroke:#b4734e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dr-it.on{border-color:var(--or);background:var(--or-bg);color:#b5301a;box-shadow:inset 0 0 0 1px var(--or)}
.dr-it.on .dr-it-i{stroke:var(--or)}
.dr-it[aria-disabled="true"]{opacity:.42}
.dr-it:active{transform:scale(.96)}
@media (hover:hover){.dr-it:hover{border-color:var(--ink)}}
.dr-grid.is-p{grid-template-columns:repeat(2,minmax(0,1fr))}
.dr-it.is-p{align-items:flex-start;text-align:left;padding:8px 10px;min-height:66px}
.dr-it.is-p b{font-size:14px;font-weight:700}
.dr-it.is-p small{font-size:12px;font-weight:500;color:var(--mute);line-height:1.35}
.dr-it.is-p.on small{color:#b5301a}
.dr-grid.is-c{grid-template-columns:repeat(4,minmax(0,1fr))}
.dr-it.is-c .sw{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.sw-0{background:#ee4d2d}.sw-1{background:#222326}.sw-2{background:#f3f2ee}.sw-3{background:#1d2a4d}.sw-4{background:#c81e2b}.sw-5{background:#2f9e62}.sw-6{background:#f28aa8}
.dr-sub{margin-top:8px;font-size:13px;color:var(--mute)}
.dr-note{flex:none;min-height:18px;margin-top:6px;font-size:13px;line-height:1.4;color:var(--mute)}
.dr-demo{display:none;flex:none;margin-top:6px;padding:6px 8px;border:1px dashed var(--or-ln);border-radius:10px;background:var(--or-bg)}
.demo .dr-demo{display:flex;align-items:center;gap:8px}
.dr-demo-t{flex:none;font-size:12px;font-weight:700;color:#9a3412}
.dr-chips{flex:1;min-width:0;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
.dr-chip{flex:none;height:28px;padding:0 9px;border:1px solid var(--line);border-radius:15px;background:#fff;font-size:13px;font-weight:600;color:var(--text)}

.dr-err{position:fixed;left:16px;right:16px;top:calc(var(--top) + 56px);z-index:20;display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--or);border-radius:12px;background:#fff;font-size:14px;color:var(--text)}
.dr-err[hidden]{display:none}
.dr-err p{flex:1;min-width:0}
.shot .dr-hint{display:none}

/* คอม: ตัวละครซ้าย ตู้เสื้อผ้าขวา */
@media (min-width:900px){
  .dr-main{flex-direction:row}
  .dr-view{flex:1;height:auto}
  .dr-ward{flex:none;width:440px;border-radius:0;box-shadow:-6px 0 24px rgba(0,0,0,.1);padding:14px 16px}
  .dr-cam{left:50%;right:auto;bottom:16px;width:440px;transform:translateX(-50%)}
  .dr-it{min-height:66px}
}