.customizer{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:8px}.appearance-preview{width:150px;height:150px;touch-action:auto;background:var(--ui-panel-customizer-appearance-preview-background);border-radius:12px;image-rendering:pixelated}.appearance-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px}.appearance-fields label{display:flex!important;flex-direction:column;align-items:stretch!important;gap:2px!important;margin:0!important;font-size:11px}.appearance-fields select{width:100%;font-size:12px!important;padding:4px!important;min-height:26px}.appearance-status{grid-column:1/-1;text-align:center;font-size:11px;min-height:0}#lobby{width:min(740px,94vw)}#lobby>p:first-of-type{display:none}#lobby h1{font-size:18px;margin-bottom:4px}#lobby>label{margin:4px 0}#lobby>div:not(.customizer){margin-top:8px}#connection-status:empty{display:none}#lobby>label input{font-size:14px;padding:5px}@media(orientation:portrait){.customizer{grid-template-columns:1fr}.appearance-preview{justify-self:center;width:120px;height:120px}}.creator-page{min-height:100dvh;overflow:auto;display:grid;place-items:center;padding:16px}.creator-card{width:min(760px,96vw);background:var(--ui-panel-customizer-creator-card-background);padding:20px;border-radius:16px}.creator-card nav{margin-top:16px;display:flex;justify-content:space-between}.creator-card button,.creator-card a{font-size:14px}
#lobby>.customizer{display:grid;grid-template-columns:150px minmax(0,1fr)}#lobby{background:var(--ui-panel-customizer-lobby-background)}@media(orientation:portrait){#lobby>.customizer{grid-template-columns:1fr}}
#appearance-shop-panel{width:min(620px,94vw);max-height:92dvh;overflow:auto;background:var(--ui-panel-customizer-appearance-shop-panel-background);color:var(--ui-panel-customizer-appearance-shop-panel-text);border:1px solid var(--ui-panel-customizer-appearance-shop-panel-border);border-radius:14px;padding:16px}#appearance-shop-panel::backdrop{background:var(--ui-panel-customizer-appearance-shop-panel-background-2)}#appearance-shop-panel .customizer{margin:10px 0}.appearance-shop-actions{display:flex;justify-content:flex-end;gap:8px}#appearance-shop-help,#appearance-shop-status{margin:6px 0;min-height:1.4em}
/* F230: 가로 폰(높이 550 이하) 꾸미기 확인·닫기 단추 줄과 로비 만들기 시작 단추 줄을 판 아래에 붙여(sticky) 판을 내리지 않아도 보이게(bottom = 판 padding 16·10 만큼 음수). 세로 폰·PC 1280×720 은 그대로 */
@media(orientation:landscape) and (max-height:550px){#appearance-shop-panel .appearance-shop-actions{position:sticky;bottom:-16px;z-index:1;margin:0 -16px -16px;padding:8px 16px;background:var(--ui-panel-customizer-appearance-shop-panel-appearance-shop-actions-background);border-top:1px solid var(--ui-panel-customizer-appearance-shop-panel-appearance-shop-actions-border-top)}body.pack-ui #lobby>.lobby-actions{position:sticky;bottom:-10px;z-index:1;margin-left:-14px;margin-right:-14px;padding:8px 14px;background:var(--ui-panel-customizer-lobby-lobby-actions-background);border-top:1px solid var(--ui-panel-customizer-lobby-lobby-actions-border-top)}}
/* A303: actual form controls, including color swatches, have 44px targets. */
html body #lobby #player-name,html body #lobby .appearance-fields select{min-height:44px;min-width:44px}
html body #lobby .appearance-fields input[type=color]{width:44px;height:44px;min-width:44px;min-height:44px;max-height:44px}
/* A329: salon controls use the creator's touch target height without resizing the creator. */
html body #appearance-shop-panel .appearance-fields :is(select,input[type=color]){min-width:44px;min-height:44px}
/* F331: 남/여 단추 줄 — 꾸미기 칸 맨 위 한 줄(두 칸 차지), 고른 쪽은 강조색(DS1014 A 토큰만, 새 색 없음). */
.appearance-fields>.appearance-gender{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:11px}.appearance-fields>.appearance-gender[hidden]{display:none}
html body .appearance-fields>.appearance-gender button{flex:1;min-height:44px;min-width:44px;font-size:14px;background:var(--ui-panel-soft);color:var(--ui-panel-fg);border:1px solid var(--ui-panel-line);border-radius:10px}
html body .appearance-fields>.appearance-gender button[aria-pressed=true]{background:var(--ui-panel-acc);color:var(--ui-panel-acc-fg);border-color:var(--ui-panel-acc)}
/* A339: keep the selected outline above the shared pressed-button skin. */
html body.pack-ui :is(#lobby,#appearance-shop-panel) .appearance-fields>.appearance-gender button[aria-pressed=true]{border-color:var(--ui-panel-acc)}
/* Fit the invitation action on the first phone portrait screen; targets stay 44px. */
@media(orientation:portrait) and (max-width:480px){
 html body.pack-ui #lobby:has(#creator-box){padding:16px 24px}
 html body.pack-ui #lobby #creator-box>.appearance-preview{width:80px;height:80px}
}
@media(orientation:landscape) and (max-height:550px){
 html body.pack-ui #appearance-shop-panel .appearance-preview{align-self:start;width:120px;height:120px}
}