/* UX-MG-010 v3 final skin — candidate 1 "꿀빛 나무·크림" (D-20261021-20). Load LAST (after art/tokens.css, skin.css).
   Assets: ux010/ (= design/ux-mg-010/final/assets). Tokens: tokens.json v3 → --u-* below. Fonts: Jua only (OFL, proto/fonts). */
/* v3.1 CEO 확정(2026-10-21): 정원 띠 숨김, 높이 ≤700 카드 이름 숨김 = 기본값. 토글은 비교용으로 유지: html[data-ux-strip=show] → 정원 띠 표시, html[data-ux-cardnames=show] → 짧은 화면 카드 이름·건네기 표시. ?strip=show|hide, ?cardnames=show|hide (localStorage mg_ux_strip / mg_ux_cardnames에 저장) */
:root{--u-ink:#3B2A17;--u-ink-soft:#5A3A14;--u-card:#FFF6DF;--u-hud-top:#FFF6DF;--u-hud-bot:#F2DDB0;--u-hud-edge:#B9802F;
 --u-btn-ink:#3A2006;--u-btn-edge:#9A5C12;--u-cell-1:#A8743C;--u-cell-2:#9A6833;--u-cell-in:rgba(60,34,10,.35);
 --u-gen:#6E4620;--u-gen-ring:#FFD36A;--u-gen-outer:#3B2410;--u-lv-bg:#4A2E10;--u-lv-ink:#FFF6DF;
 --u-ready:#FFB020;--u-ready-glow:rgba(255,176,32,.75);--u-bar-1:#9AD15A;--u-bar-2:#5E9A2F;--u-bar-track:rgba(59,42,23,.55);
 --u-gap:5px;--u-pad:5px;--u-frame:14px}
html,body{background:#6B4A26}
#app{background:url(ux010/bg-garden-deck.webp) center bottom/cover no-repeat #C99A5E;padding:8px 12px}
html:not([data-ux-strip=show]) .garden-strip{display:none!important} /* 띠 자리는 주문 카드·여백으로 */
/* HUD */
#app header{gap:6px;padding:2px 0 4px;margin:-8px -12px 0;padding:8px 10px 6px;background:linear-gradient(rgba(40,24,8,.55),rgba(40,24,8,0))}
#app h1{flex:0 1 auto;background:rgba(74,46,16,.86);border:2px solid var(--u-hud-edge);border-radius:12px;padding:3px 10px;color:#FFF6DF;text-shadow:0 2px 0 #5A3A14,0 0 6px rgba(90,58,20,.9);font-size:clamp(18px,6vw,24px)}
#app .pill{display:inline-flex;align-items:center;gap:4px;min-height:34px;background:linear-gradient(var(--u-hud-top),var(--u-hud-bot));border:2px solid var(--u-hud-edge);border-radius:999px;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 var(--u-hud-edge);padding:2px 10px 2px 6px;color:var(--u-ink);font-size:16px}
#app #energy::before,#app #coins::before,#app #gcoins::before{content:"";display:inline-block;width:22px;height:22px;flex:0 0 22px;background:center/contain no-repeat;margin:0}
#app #energy::before,#app.hdr-compact #energy::before{background-image:url(ux010/icons/drop.svg)}
#app #coins::before,#app.hdr-compact #coins::before,#app #gcoins::before{background-image:url(ux010/icons/coin.svg)}
#app #energy.low{border-color:#C0563A;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 #C0563A}
#app header button{min-width:44px;min-height:44px;border-radius:14px;background:linear-gradient(var(--u-hud-top),var(--u-hud-bot));border:2px solid var(--u-hud-edge);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 var(--u-hud-edge);color:var(--u-ink);font-size:16px;padding:0 8px}
#app #gear svg{display:none}#app #gear{background:url(ux010/icons/gear.svg) center/24px no-repeat,linear-gradient(var(--u-hud-top),var(--u-hud-bot))}
#app header button:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7)}
/* order cards: dedicated generated panel, whole card = tap target */
#app #orders{gap:6px;margin:8px -6px 6px;min-height:0}
#app .order{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;min-height:44px;padding:0 0 6px;background:none;
 border:12px solid transparent;border-image:image-set(url(ux010/card-panel.webp) type("image/webp"),url(ux010/card-panel.png) type("image/png")) 34 fill / 12px stretch;border-radius:0;color:var(--u-ink);font-size:15px;line-height:1.15;
 filter:drop-shadow(0 3px 3px rgba(40,24,8,.35));animation:none;cursor:default;touch-action:manipulation}
#app .order::before{content:"";display:block;width:calc(100% + 8px);margin:-8px -4px 2px;aspect-ratio:256/200;border-radius:9px 9px 4px 4px;
 background:#F3E2BC center top/cover no-repeat;box-shadow:inset 0 -2px 0 rgba(90,58,20,.25)}
#app .order:nth-child(1)::before{background-image:image-set(url(ux010/rua.webp) type("image/webp"),url(ux010/rua.png) type("image/png"))}
#app .order:nth-child(2)::before{background-image:image-set(url(ux010/ben.webp) type("image/webp"),url(ux010/ben.png) type("image/png"))}
#app .order:nth-child(3)::before{background-image:image-set(url(ux010/margo.webp) type("image/webp"),url(ux010/margo.png) type("image/png"))}
#app .order .spr,#app .order svg{width:40px;height:40px;flex:0 0 auto}
#app .order>div{white-space:nowrap;word-break:keep-all}
#app .order>div:last-of-type{margin-top:3px;min-height:28px;display:flex;align-items:center;justify-content:center;gap:2px;padding:0 10px;border-radius:999px;
 background:#E8D6AE;border:2px solid #C9A964;color:var(--u-ink-soft);font-size:14px}
#app .order .rw::before{content:"";display:inline-block;width:15px;height:15px;margin-right:2px;vertical-align:-2px;background:url(ux010/icons/coin.svg) center/contain no-repeat}
#app .order.ready{cursor:pointer}
#app .order.ready::after{content:"";position:absolute;inset:-14px;border-radius:18px;box-shadow:0 0 0 3px var(--u-ready),0 0 14px 3px var(--u-ready-glow);pointer-events:none}
#app .order.ready>div:last-of-type{border:0;padding:0 12px;min-height:30px;border-image:image-set(url(ux010/btn-honey.webp) type("image/webp"),url(ux010/btn-honey.png) type("image/png")) 50 60 fill / 15px 18px stretch;border-style:solid;color:var(--u-btn-ink);background:none}
#app .order.ready.press,#app .order.ready:active{transform:translateY(3px) scale(.98);filter:drop-shadow(0 1px 1px rgba(40,24,8,.35)) brightness(.96)}
#app .order.tut{outline:none!important}
#app .order.tut::after{content:"";position:absolute;inset:-14px;border-radius:18px;box-shadow:0 0 0 3px #FFF6DF,0 0 0 6px var(--u-ready);pointer-events:none;animation:tutp .7s ease-in-out infinite alternate}
/* progress bar */
#app #goalbar{height:18px;border:2px solid var(--u-hud-edge);border-radius:999px;background:var(--u-bar-track);box-shadow:inset 0 2px 3px rgba(0,0,0,.35),0 2px 0 rgba(255,246,223,.5);padding:2px;margin:4px -6px 8px}
#app #goalfill{border-radius:999px;background:linear-gradient(var(--u-bar-1),var(--u-bar-2));box-shadow:inset 0 2px 0 rgba(255,255,255,.55)}
/* board: generated honey-wood panel + caramel wood cells (item ring contrast ≥3) */
#app #board{border:var(--u-frame) solid transparent;border-image:image-set(url(ux010/board-panel.webp) type("image/webp"),url(ux010/board-panel.png) type("image/png")) 52 fill / var(--u-frame) stretch;background:none;border-radius:0;
 padding:var(--u-pad);gap:var(--u-gap);box-shadow:none;filter:drop-shadow(0 5px 6px rgba(40,24,8,.4));margin:0 -6px 10px}
#app #board .cell{background:var(--u-cell-1);border-radius:9px;box-shadow:inset 0 -3px 0 var(--u-cell-in),inset 0 2px 0 rgba(255,236,200,.35)}
#app #board .cell:nth-child(odd){background:var(--u-cell-2)}
#app #board .cell.gen{background:radial-gradient(circle at 50% 40%,#875A2C,var(--u-gen))!important;box-shadow:inset 0 0 0 3px var(--u-gen-ring),0 0 0 2px var(--u-gen-outer)}
#app #board .cell.hint{outline:3px solid #FFF6DF;outline-offset:-1px;box-shadow:0 0 0 5px var(--u-ready),0 0 12px 3px var(--u-ready-glow)}
#app #board .cell.fullhint,#app .cell.gen.pouchhit{outline:3px solid #FFF6DF;outline-offset:-1px}
/* items: full cell box; sprite canvas 116% so PNG scale (0.72→1.08, D-12) maps 1:1 to the cell; overflow only upward, pointer-events none */
#app #board .item{inset:0}
#app #board .item .spr{position:absolute;left:-8%;top:-14%;width:116%;height:116%;pointer-events:none}
#app #board .item svg{width:100%;height:100%}
#app #board .item.drag .spr{filter:drop-shadow(0 8px 6px rgba(40,24,8,.45))}
#app #board .lv{background:var(--u-lv-bg);color:var(--u-lv-ink);border:1.5px solid #FFF6DF;border-radius:999px;font-size:11px;line-height:14px;min-width:16px;height:17px;padding:0 4px;right:1px;bottom:1px;z-index:2}
/* footer */
#app footer{margin-top:auto;gap:8px}
#app #gardenbtn{min-height:48px;padding:0 18px;border:0;border-style:solid;border-width:16px 22px;border-image:image-set(url(ux010/btn-honey.webp) type("image/webp"),url(ux010/btn-honey.png) type("image/png")) 50 60 fill / 16px 22px stretch;background:none;
 color:var(--u-btn-ink);font-size:17px;box-shadow:none;filter:drop-shadow(0 3px 2px rgba(40,24,8,.35))}
#app #gardenbtn{padding:0 4px;line-height:16px}
#app #gardenbtn:active{transform:translateY(3px);filter:none}
#app #goaltxt{flex:1 1 auto;min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(74,46,16,.86);color:#FFF6DF;border:2px solid var(--u-hud-edge);font-size:15px;padding:0 8px}
/* tip / toasts / modal card in cream+wood */
#app #tip,#app #fullToast,#app #vigorToast{background:var(--u-card);border-color:var(--u-ink-soft);box-shadow:0 3px 0 var(--u-hud-edge)}

/* garden screen */
#garden{background:url(ux010/bg-garden-deck.webp) center/cover #C99A5E}
#garden .top{background:linear-gradient(rgba(40,24,8,.55),rgba(40,24,8,0));margin:-12px -12px 0;padding:8px 12px}
#garden #gtitle{background:rgba(74,46,16,.86);border:2px solid var(--u-hud-edge);border-radius:12px;padding:3px 10px;color:#FFF6DF;text-shadow:0 2px 0 #5A3A14}
#garden .pill{display:inline-flex;align-items:center;gap:4px;min-height:34px;background:linear-gradient(var(--u-hud-top),var(--u-hud-bot));border:2px solid var(--u-hud-edge);border-radius:999px;box-shadow:0 3px 0 var(--u-hud-edge);color:var(--u-ink)}
#garden #gclose{background:url(ux010/icons/back.svg) 8px center/18px no-repeat,linear-gradient(var(--u-hud-top),var(--u-hud-bot));border:2px solid var(--u-hud-edge);border-radius:14px;box-shadow:0 3px 0 var(--u-hud-edge);color:var(--u-ink);padding-left:30px}
#garden #gclose::before{display:none}
#garden #gscene{border-block:0;border-radius:16px;margin:0;border:10px solid transparent;border-image:image-set(url(ux010/board-panel.webp) type("image/webp"),url(ux010/board-panel.png) type("image/png")) 52 / 10px stretch}
#garden .gsheet{background:var(--u-card);border-top:3px solid var(--u-hud-edge);box-shadow:0 -3px 8px rgba(40,24,8,.3)}
#garden .gsheet-handle::before{background:var(--u-hud-edge)}
#garden .deco{background:linear-gradient(#FFF6DF,#F2DDB0);border:2px solid var(--u-hud-edge);border-radius:14px;box-shadow:0 3px 0 var(--u-hud-edge);color:var(--u-ink)}
#garden .deco.own{background:#E8F2D2;border-color:#5E9A2F;box-shadow:0 3px 0 #5E9A2F}
#garden .deco:disabled:not(.own){background:#EADBB8;border-style:dashed;color:#4A3418;box-shadow:none}
/* short / narrow */
@media (max-height:700px) and (max-aspect-ratio:1332/1000){ /* 짧은 세로 화면만. 가로(≥4:3)는 아래 2단 레이아웃 */
 #app header{padding-bottom:2px}
 #app .order{display:grid;grid-template-columns:34px 22px minmax(0,1fr);grid-template-rows:auto auto;column-gap:4px;row-gap:2px;align-items:center;justify-items:center;padding:0;border-width:8px;border-image-width:8px;font-size:13px}
 #app .order::before{grid-row:1/3;grid-column:1;width:34px;height:34px;margin:0;aspect-ratio:auto;border-radius:50%;box-shadow:0 0 0 2px #C9A964;background-size:cover;background-position:center 30%}
 #app .order:nth-child(1)::before{background-image:image-set(url(ux010/rua-face.webp) type("image/webp"),url(ux010/rua-face.png) type("image/png"))}#app .order:nth-child(2)::before{background-image:image-set(url(ux010/ben-face.webp) type("image/webp"),url(ux010/ben-face.png) type("image/png"))}#app .order:nth-child(3)::before{background-image:image-set(url(ux010/margo-face.webp) type("image/webp"),url(ux010/margo-face.png) type("image/png"))}
 #app .order .spr,#app .order svg{grid-column:2/4;grid-row:1;width:28px;height:28px}
 html:not([data-ux-cardnames=show]) #app .order>div:first-of-type{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* 짧은 화면: 요청 = 아이템 그림(28px), 이름은 스크린리더·title용 */
 #app .order>div:last-of-type{grid-column:2/4;grid-row:2;margin:0;min-height:24px;padding:0 6px;font-size:13px}
 #app .order.ready>div:last-of-type{min-height:24px;border-image-width:12px 14px;max-width:100%}
 html:not([data-ux-cardnames=show]) #app .order .give{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 짧은 화면: '건네기' 글은 스크린리더용, 꿀색 알약 모양·색이 준비 신호 */
 #app .order.ready::after,#app .order.tut::after{inset:-10px}
 #app #orders{margin:4px -6px 4px}
 #app #goalbar{height:12px;padding:1px;margin:2px -6px 6px}
 #app footer{margin-top:4px}#app #gardenbtn{min-height:44px}#app #goaltxt{min-height:38px;font-size:14px}
}
@media (max-width:400px){#app .pill{font-size:14px;padding:2px 8px 2px 4px}#app #energy::before,#app #coins::before{width:18px;height:18px;flex-basis:18px}}
@media (max-width:340px){#app h1{padding:2px 5px;font-size:16px;letter-spacing:0}#app header{gap:4px}#app{padding-left:8px;padding-right:8px}:root{--u-frame:8px;--u-pad:2px;--u-gap:3px}#app #board{margin:0 -4px 8px}#app #orders,#app #goalbar{margin-left:-4px;margin-right:-4px}#app header{margin:-8px -8px 0}}
@media (prefers-reduced-motion:reduce){#app .order.ready.press,#app .order.ready:active{transform:none}}

/* v3.1 modals (intro / clear / over / stuck): honey wood + cream. Primary = honey glaze button, secondary = cream wood-edge button. Focus ring keyboard only (.nofv kept). */
#app #modal{background:rgba(40,24,8,.6)}
#app #modal .card{background:none;border:14px solid transparent;border-image:image-set(url(ux010/card-panel.webp) type("image/webp"),url(ux010/card-panel.png) type("image/png")) 34 fill / 14px stretch;border-radius:0;box-shadow:none;filter:drop-shadow(0 6px 8px rgba(40,24,8,.45));padding:10px 8px;color:var(--u-ink)}
#app #modal #mtitle{color:var(--u-ink-soft);font-size:24px}
#app #modal #mtext{color:var(--u-ink);font-size:16px;line-height:1.4}
#app #modal #mbtns > button{min-height:52px;width:100%;margin:0;font-family:Jua,JuaFull,serif;font-size:18px;line-height:1.2;color:var(--u-ink);
 background:linear-gradient(var(--u-hud-top),var(--u-hud-bot));border:2px solid var(--u-hud-edge);border-image:none;border-radius:16px;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 var(--u-hud-edge);transform:none;filter:none;word-break:keep-all;overflow-wrap:normal}
/* v3.2: 모달당 honey 1개. 체크포인트 0 실패(이어하기 없음)는 다시 하기 = honey 56 */
#app #modal #mbtns > button.primary,#app #modal[data-kind=clear] #mbtn,#app #modal[data-kind=intro] #mbtn,#app #modal[data-kind=over] #mbtns > button:only-child,#app #modal[data-kind=over] #mbtns:not(:has(#mcont)) > #mbtn{min-height:56px;color:var(--u-btn-ink);background:none;border:0;border-style:solid;border-width:16px 22px;
 border-image:image-set(url(ux010/btn-honey.webp) type("image/webp"),url(ux010/btn-honey.png) type("image/png")) 50 60 fill / 16px 22px stretch;border-radius:0;box-shadow:none;padding:0 4px;filter:drop-shadow(0 3px 2px rgba(40,24,8,.35))}
#app #modal[data-kind=over] #mbtns > button{padding-left:36px}
#app #modal[data-kind=over] #mbtns > button.primary,#app #modal[data-kind=over] #mbtns > button:only-child,#app #modal[data-kind=over] #mbtns:not(:has(#mcont)) > #mbtn{padding-left:22px}
#app #modal[data-kind=over] #mbtns > button::before{left:10px}
#app #modal[data-kind=over] #mbtns > button.primary::before,#app #modal[data-kind=over] #mbtns > button:only-child::before,#app #modal[data-kind=over] #mbtns:not(:has(#mcont)) > #mbtn::before{left:-8px}
#app #modal[data-kind=over] #mbtns > #mcont::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2006' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 21V4'/%3E%3Cpath d='M6 4h11l-2.5 4L17 12H6' fill='%233A2006'/%3E%3C/svg%3E")}
#app #modal[data-kind=over] #mbtns > #mbtn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2006' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7'/%3E%3Cpath d='M4 3v5h5'/%3E%3C/svg%3E")}
#app #modal[data-kind=over] #mbtns > #madbtn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2006' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M10 9v6l5-3z' fill='%233A2006'/%3E%3C/svg%3E")}
#app #modal #mbtns > button:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7);transition:transform 60ms}
#app #modal #mbtns > button.primary:active,#app #modal[data-kind=clear] #mbtn:active,#app #modal[data-kind=intro] #mbtn:active,#app #modal[data-kind=over] #mbtns:not(:has(#mcont)) > #mbtn:active{filter:none}
#app #modal #mbtns > button:focus{outline:none}
#app #modal #mbtns > button:focus-visible{outline:3px solid var(--u-ink);outline-offset:3px}
#app #modal.nofv #mbtns > button:focus-visible{outline:none}
#app #modal #mbtns #madnone{color:var(--u-ink-soft)}
@media (prefers-reduced-motion:reduce){#app #modal #mbtns > button:active{transform:none;transition:none}}
/* v3.1 English title fit at narrow widths (no ellipsis): tighter plaque + pills */
@media (max-width:400px){html[lang=en] #app h1{font-size:17px;letter-spacing:-.2px;padding:3px 7px;flex:0 0 auto;overflow:visible;text-overflow:clip}}
@media (max-width:340px){html[lang=en] #app h1{font-size:15px;letter-spacing:-.4px;padding:2px 5px}#app .pill{padding:2px 6px 2px 3px;gap:2px}#app header{gap:3px}#app header button{padding:0 4px}}



/* 패널·버튼(board-panel, card-panel, btn-honey)은 image-set으로 WebP → PNG 폴백. 초상화(rua/ben/margo, -face)도 PNG 폴백. WebP 전용은 배경(bg-garden-deck, 단색 #C99A5E 폴백)만. */
/* 넓은 화면(≥4:3) 2단 레이아웃 — Designer 답(10/21 f46e543): 왼쪽 보드(높이 맞춤, 위아래 ≥12px), 오른쪽 HUD → 주문 카드 3장 세로 → 진행 바 → 꾸미기·목표.
   390 프레임·간격 값(frame 14 / pad 5 / gap 5). 카드는 390 카드 내용(초상화·이름·아이템·보상)을 가로 행으로 세로 3단 배치(390 세로형 3장은 540 높이에 안 들어감 — Client Dev 해석). */
@media (min-aspect-ratio:4/3){
 :root{--u-frame:14px;--u-pad:5px;--u-gap:5px}
 #app{--wH:calc(100vh - 26px);--wc:calc((var(--wH) - 68px) / 7);--wbw:calc(var(--wc) * 6 + 63px);
  max-width:none!important;width:auto;height:100vh;box-sizing:border-box;margin:0 auto;padding:12px!important;
  display:grid!important;grid-template-columns:var(--wbw) min(390px,calc(100vw - var(--wbw) - 54px));grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:30px;justify-content:center;align-content:stretch} /* 30: 주머니↔하단 가로 간격 ≥48 (test-footer-a) */
 #app header{grid-column:2;grid-row:1;margin:0!important;padding:4px 0!important;background:none}
 #app #orders{grid-column:2;grid-row:2;align-self:stretch!important;width:auto!important;display:flex;flex-direction:column;gap:10px;margin:10px 0!important;min-height:0}
 #app #goalbar{grid-column:2;grid-row:3;align-self:stretch!important;width:auto!important;margin:0 0 10px!important;height:18px;flex:none}
 #app footer{grid-column:2;grid-row:4;margin:0!important;padding:0!important}
 #app #board{grid-column:1;grid-row:1 / 5;width:var(--wbw)!important;align-self:center;margin:0!important;gap:var(--u-gap)!important;padding:var(--u-pad)!important}
 #app .order{flex:1 1 0;min-height:0;display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:1fr auto auto;column-gap:10px;row-gap:2px;align-items:center;justify-items:center;padding:0 8px 0 0}
 #app .order::before{grid-column:1;grid-row:1 / 4;width:100%;height:100%;max-height:100%;margin:0;aspect-ratio:auto;align-self:stretch;background-size:cover;background-position:center 20%} /* Designer 68b2bde 리뷰: 초상화 = 카드 왼쪽 40% */
 #app .order .spr,#app .order svg{grid-column:2;grid-row:1;align-self:end;width:52px;height:52px} /* 아이템 1.3× (40→52) */
 #app .order>div:first-of-type{grid-column:2;grid-row:2;justify-self:center;text-align:center}
 #app .order>div:last-of-type{grid-column:2;grid-row:3;margin:0 0 6px}
 #app .order.ready::after,#app .order.tut::after{inset:-8px}
 /* Designer 276d0cd 답: 넓은 화면은 ≤700 이름 숨김·≤600 '건네기' 숨김 미적용. 준비 버튼 = 390 카드와 같은 한 줄 '건네기 / (동전) +n', 요청 블록 전체 폭 */
 html #app .order>div:first-of-type{position:static;width:auto;height:auto;overflow:visible;clip:auto}
 html #app .order .give{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap}
 #app .order>div:last-of-type{white-space:nowrap}
 #app .order.ready>div:last-of-type{justify-self:stretch;width:auto;max-width:none;margin:0 6px 6px 0}
 #app #vigorToast{left:auto;right:12px;bottom:12px;width:min(390px,calc(100vw - var(--wbw) - 54px));box-sizing:border-box} /* 2단: 기운 토스트는 오른쪽 열(하단 위) — 보드 안 가림 */
 #app #modal .card{width:min(390px,calc(100vw - 48px));max-width:390px;margin-left:auto;margin-right:auto} /* 2단에서도 모달 카드는 390 폭 */
}
/* BUG-MG-010: 넓은 화면(≥4:3) 정원 = 2단. 왼쪽 장면(높이 맞춤, 그림 비율 3:4, 전체가 보이게 meet), 오른쪽 제목줄 + 장식 시트 */
@media (min-aspect-ratio:4/3){
 #garden.on{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:20px;row-gap:10px;padding:12px!important}
 #garden .top{grid-column:2;grid-row:1;margin:0!important;padding:4px 0!important;background:none}
 #garden #gscene{grid-column:1;grid-row:1 / 3;height:calc(100vh - 24px)!important;min-height:0!important;aspect-ratio:3/4;width:auto!important;margin:0!important;flex:none!important;align-self:center}
 #garden .gsheet,#garden .gsheet.open{grid-column:2;grid-row:2;position:static!important;margin:0!important;border-radius:16px;overflow:auto;min-height:0}
 #garden .gsheet #glist{display:grid!important;grid-template-columns:1fr 1fr;overflow:visible}
}
/* UI-SPEC v3.2 낮은 가로 화면(≥4:3, 높이 ≤430, 예: 844x390): 칸 ≥44 우선 → 보드 frame 8 / pad 2 / gap 3. 주문 카드 압축형:
   원형 초상(카드 높이 −8px, overflow hidden), 이름은 화면에서 숨김(aria-label 유지, skin-ux010.js), 아이템 + '건네기 / +N' 한 줄, 카드 전체 탭 ≥44px, 카드 간격 먼저 줄임 */
@media (min-aspect-ratio:4/3) and (max-height:430px){
 :root{--u-frame:8px;--u-pad:2px;--u-gap:3px}
 #app{--wc:calc((var(--wH) - 38px) / 7);--wbw:calc(var(--wc) * 6 + 35px)}
 #app header{padding:0!important}
 #app #orders{gap:4px;margin:6px 0!important}
 #app .order{display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;min-height:44px;padding:0 6px 0 4px;border-width:6px;border-image-width:6px}
 #app .order::before{flex:0 0 auto;overflow:hidden;height:calc(100% - 8px);width:auto;max-height:calc(100% - 8px);aspect-ratio:1;margin:0;border-radius:50%;background-size:cover;background-position:center 25%;box-shadow:0 0 0 2px #C9A964}
 #app .order:nth-child(1)::before{background-image:image-set(url(ux010/rua-face.webp) type("image/webp"),url(ux010/rua-face.png) type("image/png"))}
 #app .order:nth-child(2)::before{background-image:image-set(url(ux010/ben-face.webp) type("image/webp"),url(ux010/ben-face.png) type("image/png"))}
 #app .order:nth-child(3)::before{background-image:image-set(url(ux010/margo-face.webp) type("image/webp"),url(ux010/margo-face.png) type("image/png"))}
 #app .order .spr,#app .order svg{flex:0 0 auto;width:30px;height:30px;align-self:center}
 html #app .order>div:first-of-type{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap}
 #app .order>div:last-of-type,#app .order.ready>div:last-of-type{flex:1 1 auto;min-width:0;margin:0!important;min-height:26px;white-space:nowrap;font-size:14px}
 #app .order.ready::after,#app .order.tut::after{inset:-5px}
 #app #goalbar{margin:2px 0 6px!important;height:14px}
}