/* UX3710 · Shared interaction and layout rules for advertiser, admin and Cafe24. */
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:break-word}
body.ddak-dialog-open{overflow:hidden}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{touch-action:manipulation}
#app :is(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--brand-primary);outline-offset:3px;
}
:where(input,select,textarea):disabled{cursor:not-allowed;opacity:.65}
:where(button):disabled{cursor:not-allowed}
:where(input,textarea)::placeholder{color:var(--text-tertiary);opacity:1}
:where(textarea){resize:vertical;max-width:100%}
:where(input[type="file"]){width:100%;max-width:100%;min-width:0;overflow:hidden}
:where(input[type="file"])::file-selector-button{
  border:1px solid var(--border-default);border-radius:8px;
  background:var(--surface-secondary);color:var(--text-primary);
  padding:9px 12px;margin-inline-end:10px;font:inherit;cursor:pointer;
}
:where(.modal,.content,.main,.card,.panel,.table-wrap,.support-chat-panel){min-width:0}
.modal-backdrop[data-backdrop="1"]{overscroll-behavior:contain}
[data-modal-panel="1"]{overscroll-behavior:contain;scrollbar-width:thin;scroll-padding-block:24px}
[data-modal-panel="1"] :where(h1,h2,h3,p,.field,form){min-width:0;overflow-wrap:anywhere}
[data-modal-panel="1"] :where(input,select,textarea){max-width:100%;box-sizing:border-box}
:where(.modal-actions,.form-actions){flex-wrap:wrap;gap:8px}
:where(.table-wrap,.table-scroll){overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
:where(table){font-variant-numeric:tabular-nums}
:where(td,th) :where(button,a){white-space:normal}
:where(.toast){max-width:calc(100vw - 32px);overflow-wrap:anywhere;line-height:1.5}
.sync-warning{display:flex;align-items:center;gap:12px;background:var(--semantic-warning-soft);color:var(--semantic-warning-text);border:1px solid var(--border-default);border-radius:14px;padding:14px 16px;margin:12px 0}
.sync-warning>span{flex:1;min-width:0}.sync-warning b,.sync-warning small{display:block}.sync-warning small{margin-top:4px;line-height:1.6}.sync-warning .btn{flex-shrink:0}
@media(max-width:640px){
  [data-modal-panel="1"]{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);padding-bottom:max(20px,env(safe-area-inset-bottom));}
  #app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){font-size:16px}
  :where(.modal-actions,.form-actions)>button{flex:1 1 auto;min-height:44px}
  .sync-warning{flex-wrap:wrap}.sync-warning .btn{width:100%}
}
@media(pointer:coarse){
  :where(.btn,.icon-btn,.modal-actions button,.form-actions button){min-height:44px}
  :where(.icon-btn){min-width:44px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :where(button,a,.card,.modal,.modal-backdrop,.sidebar,.toast){transition:none;animation:none}
}
@media(forced-colors:active){
  :where(.btn,.card,.panel,.modal,input,select,textarea){border:1px solid CanvasText}
  #app :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline-color:Highlight}
}