/* Desktop assets remain unchanged. Only narrow layouts use these overrides. */
#bw-mobile-menu{display:none}
@media screen and (max-width:1366px){
  #root header.topbar-surface{height:auto;min-height:56px;display:flex;flex-wrap:wrap;padding:6px 12px;gap:8px}
  #root header.topbar-surface>nav,#root header.topbar-surface>div{display:none}
  #bw-mobile-menu{display:block;margin-left:auto;min-height:44px;padding:0 12px;border:1px solid var(--chrome-border);border-radius:8px;color:var(--chrome-fg,#fff);white-space:nowrap}
  #root .gnb-surface{top:56px;height:46px;width:100%;min-width:0;flex-shrink:0}
  #root .gnb-item{flex-shrink:0;padding-left:14px;padding-right:14px}
  #root.bw-menu-open header.topbar-surface{position:relative}
  #root.bw-menu-open header.topbar-surface>nav{display:flex;flex-wrap:wrap;order:3;flex-basis:100%;gap:4px}
  #root.bw-menu-open header.topbar-surface>div:last-of-type{display:flex;flex-wrap:wrap;order:4;flex-basis:100%;gap:10px;padding:8px 0}
  #root.bw-menu-open header.topbar-surface a,#root.bw-menu-open header.topbar-surface button{min-height:40px}
  #root.bw-menu-open .gnb-surface{position:relative;top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;padding:8px}
  #root.bw-menu-open .gnb-item{min-height:44px;white-space:normal}
  #root header .absolute{max-width:calc(100vw - 24px)}
  #root[data-page="/home"] main .flex:has(>aside){flex-direction:column}
  #root[data-page="/home"] main .flex:has(>aside)>*{width:100%;min-width:0}
  #root[data-page="/home"] .grid-cols-9{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media screen and (max-width:767px){
  html{scroll-padding-top:110px}
  #root>.min-h-screen{min-width:0;width:100%}
  #root>.min-h-screen>.flex:has(>main){flex-direction:column;min-width:0}
  #root aside:has(>nav){position:static;width:100%;height:auto;max-width:100%;border-right:0;border-bottom:1px solid var(--color-theme);overflow:visible}
  #root aside:has(>nav)>div:first-child{display:none}
  #root aside>nav{display:flex;overflow-x:auto;padding:4px 8px;gap:4px;overscroll-behavior-x:contain}
  #root aside>nav>div{flex:0 0 auto}
  #root aside .lnb-item{min-height:42px;padding:8px 12px;white-space:nowrap;border-radius:6px}
  #root aside .lnb-item span{display:inline}
  #root aside>nav>div>button{display:none}
  #root:not([data-page^="/me/"]) main{width:100%;max-width:100%;min-width:0;padding-bottom:76px}
  #root:not([data-page^="/me/"]) main>div>div.p-4,#root:not([data-page^="/me/"]) main>div>div.p-6{padding:14px 12px}
  #root:not([data-page^="/me/"]) main .grid{min-width:0}
  #root:not([data-page^="/me/"]) main .grid>*,#root:not([data-page^="/me/"]) main .flex>div{min-width:0}
  #root:not([data-page^="/me/"]) main .grid-cols-2:has(>.bg-theme-card),#root:not([data-page^="/me/"]) main .grid-cols-3:has(>.bg-theme-card),#root:not([data-page^="/me/"]) main .grid-cols-4:has(>.bg-theme-card){grid-template-columns:minmax(0,1fr)}
  #root:not([data-page^="/me/"]) main .grid:has(>.bg-theme-card)>.col-span-2{grid-column:auto}
  #root:not([data-page^="/me/"]) main .flex:has(>label),#root:not([data-page^="/me/"]) main .flex:has(>h1),#root:not([data-page^="/me/"]) main .flex:has(>h2){flex-wrap:wrap}
  #root:not([data-page^="/me/"]) main h1{font-size:20px}
  #root:not([data-page^="/me/"]) main select,#root:not([data-page^="/me/"]) main input:not([type=checkbox]):not([type=radio]),#root:not([data-page^="/me/"]) main textarea{max-width:100%;font-size:16px;min-height:40px}
  #root:not([data-page^="/me/"]) main label{max-width:100%}
  #root:not([data-page^="/me/"]) main .bw-table-scroll{max-width:100%;overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  #root:not([data-page^="/me/"]) main .bw-table-scroll>table{min-width:100%}
  #root:not([data-page^="/me/"]) main th,#root:not([data-page^="/me/"]) main td{white-space:nowrap}
  #root[data-page="/home"] .grid-cols-9>div{padding:14px 10px;border-bottom:1px solid var(--chrome-border)}
  #root[data-page="/home"] .grid-cols-9 .text-2xl{font-size:24px}
  #root[data-page="/home"] main .recharts-responsive-container{min-height:240px}
  /* The roster's absolute scroll pane needs its own height after filters wrap. */
  #root:not([data-page^="/me/"]) main [class~="h-[calc(100vh-90px)]"]{height:auto;min-height:calc(100dvh - 150px)}
  #root:not([data-page^="/me/"]) main [class~="h-[calc(100vh-90px)]"]>.relative.flex-1{flex:none;height:65dvh;min-height:360px}
  #root:not([data-page^="/me/"]) main .pl-6{padding-left:12px}
  #root:not([data-page^="/me/"]) main .pr-1\.5{padding-right:12px}
  #root:not([data-page^="/me/"]) main [title^="[배차표 통계]"]{max-width:100%;overflow-x:auto}
  #root button.fixed[aria-label="매뉴얼 검색 도우미"]{right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:48px;height:48px}
  #root .fixed:has(>textarea),#root .fixed:has(textarea){left:12px;right:12px;width:auto;max-width:none;bottom:max(72px,calc(env(safe-area-inset-bottom) + 64px));height:min(560px,calc(100dvh - 90px));max-height:calc(100dvh - 90px)}
  #root .fixed:has(textarea) textarea{font-size:16px}
  #root .fixed.inset-0{padding:12px}
  #root .fixed.inset-0>[class*="max-w-"]{max-width:100%;max-height:calc(100dvh - 24px);overflow:auto}
  #preview-badge{max-width:130px;font-size:10px;bottom:max(8px,env(safe-area-inset-bottom))}
  #preview-notice{max-height:calc(100dvh - 32px);overflow:auto}
}
@media screen and (max-width:767px){
  #root[data-page="/home"] main .grid-cols-2:has(h2){grid-template-columns:minmax(0,1fr)}
  #root[data-page="/home"] .recharts-surface{overflow:visible}
  #root[data-page^="/realtime/map"] main .flex:has(>#binworks-map-data-note){flex-direction:column;gap:6px;margin-bottom:12px}
  #binworks-map-data-note{line-height:1.6}
  #root[data-page^="/realtime/map"] main [class~="h-[78vh]"]{height:auto;display:flex;flex-direction:column-reverse}
  #root[data-page^="/realtime/map"] main [class~="h-[78vh]"]>.isolate{height:60dvh;min-height:360px;flex:none}
  #root[data-page^="/realtime/map"] main .pointer-events-none.absolute.inset-0{position:static;display:flex;flex-direction:column;gap:8px;padding:8px}
  #root[data-page^="/realtime/map"] main .pointer-events-none.absolute.inset-0>div{max-width:100%;width:100%}
  #root[data-page^="/realtime/map"] [title^="[표시 현황]"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  #root[data-page^="/realtime/map"] [title^="[표시 현황]"] button{padding:8px 5px;gap:4px;min-height:44px;justify-content:center}
  #root[data-page^="/realtime/map"] [title^="[자동 갱신]"]{flex-wrap:wrap;gap:8px}
  #root[data-page="/login"] input,#root[data-page="/login"] select{font-size:16px}
}

@media screen and (max-width:767px){
  #root:not([data-page^="/me/"]) main .flex.items-start.justify-between:has(>div>h1){flex-wrap:wrap;gap:12px}
}
@media screen and (min-width:1367px) and (max-width:1599px){
  #root header.topbar-surface{padding-left:12px;padding-right:12px;gap:8px}
  #root header.topbar-surface>div:last-of-type{gap:8px}
}
@media screen and (max-width:767px){
  /* Keep the supplier's mobile bottom navigation unobstructed. */
  #root[data-page^="/me/"]~#preview-badge{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* Phone feedback: keep the menu short and the monthly roster usable. */
#bw-menu-details{display:none}
@media screen and (max-width:767px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  #root header.topbar-surface{position:relative;top:auto}
  #root .gnb-surface{position:relative;top:auto}
  #root.bw-menu-open:not(.bw-menu-details) header.topbar-surface>nav,
  #root.bw-menu-open:not(.bw-menu-details) header.topbar-surface>div{display:none}
  #root.bw-menu-open #bw-menu-details{display:block;order:2;flex-basis:100%;min-height:40px;text-align:left;padding:8px;border-top:1px solid var(--chrome-border);color:var(--chrome-fg)}
  #root.bw-menu-open .gnb-surface{gap:2px;padding:6px 8px}
  #root.bw-menu-open .gnb-item{font-size:13px;min-height:44px;padding:8px 10px}
  #root[data-page^="/dispatch/"] main .bg-theme-card:has(>label>select){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
  #root[data-page^="/dispatch/"] main .bg-theme-card:has(>label>select)>div{grid-column:1/-1;flex-wrap:wrap}
  #root[data-page^="/dispatch/"] main .bg-theme-card>label:has(>select){display:flex;flex-direction:column;align-items:stretch;gap:4px}
  #root[data-page^="/dispatch/"] main label>select{width:100%;min-width:0!important;padding-left:8px}
  /* Horizontal sticky columns consume nearly all of a phone's viewport. */
  #root[data-page^="/dispatch/"] main table th.sticky,
  #root[data-page^="/dispatch/"] main table td.sticky{position:static;left:auto!important;white-space:normal;overflow-wrap:anywhere}
  #root[data-page="/dispatch/route"] main table td[rowspan],
  #root[data-page="/dispatch/route"] main table th:first-child{width:64px!important;min-width:64px!important;max-width:64px}
  #root[data-page="/dispatch/route"] main table td.sticky[title]{width:80px!important;min-width:80px!important;max-width:80px}
  #root[data-page^="/dispatch/"] main .relative.flex-1:has(table){display:flex;flex-direction:column;height:70dvh;min-height:420px}
  #root[data-page^="/dispatch/"] main .relative.flex-1>div:has(table){position:relative;inset:auto;flex:1;min-height:0;padding:8px 12px}
  #root[data-page^="/dispatch/"] main .pointer-events-none:has(>[title^="[배차표 통계]"]){position:static;flex:none;padding:4px 12px 8px}
  #root[data-page^="/dispatch/"] main [title^="[배차표 통계]"]{position:static;display:flex;flex-wrap:wrap;gap:8px 12px;overflow:visible;padding:8px}
  #root[data-page^="/dispatch/"] main [title^="[배차표 통계]"] button{min-height:32px;min-width:36px}
  #root[data-page^="/dispatch/"] main [aria-label="통계 바 위치 이동"]{display:none}
  #root.bw-menu-open~#preview-badge,#root.bw-menu-open button[aria-label="매뉴얼 검색 도우미"]{display:none}
}

@media screen and (max-width:767px){
  #root[data-page^="/dispatch/"] main .relative.flex-1>div:has(table){overflow:hidden}
  #root[data-page^="/dispatch/"] main .relative.flex-1 .bw-table-scroll{height:100%;overflow:auto}
}