/* Phone layer for the 1400px desktop templates (exchange, Wallets, My Trade, Settings, ...).
   Loaded only for max-width:820px (see the <head> sub_filter in upbit-stable.conf). Selectors are
   prefixed with "html body" so they win over the page's own stylesheets that come later in <head>.
   Nothing here matches the phone templates served natively by the site (/home, /coin_list, ...). */
@media (max-width:820px){
html body{min-width:0!important;width:100%!important;overflow-x:clip!important}
html body .mainB{width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;display:block!important;box-sizing:border-box!important}
html body .mainB>section.ty01,html body .mainB>section.ty02{float:none!important;position:static!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}

/* ---- exchange: title / price block / chart ---- */
html body .mainB section.ty01>article,html body .mainB section.ty01>div.halfB{float:none!important;width:100%!important;max-width:100%!important;min-width:0!important}
html body .mainB span.titB.link{width:100%!important}
html body .mainB span.titB.link>div:first-child{width:100%!important}
html body .mainB div.inforTab{display:none!important}
html body .mainB span.marketB{display:block!important;width:100%!important;height:auto!important;padding:6px 0 4px!important}
html body .mainB span.marketB>div{float:none!important;width:auto!important;max-width:100%!important;margin:0 14px!important}
html body .mainB span.marketB>div.ty02{display:none!important}
html body .mainB span.marketB>div.ty03{width:auto!important;margin:6px 14px 4px!important;display:block!important;height:auto!important}
html body .mainB span.marketB>div.ty03 dl{float:none!important;display:grid!important;grid-template-columns:1fr auto!important;gap:2px 12px!important;width:100%!important;height:auto!important;margin:0!important;padding:2px 0!important;box-sizing:border-box!important}
html body .mainB span.marketB>div.ty03 dl>dt,html body .mainB span.marketB>div.ty03 dl>dd{float:none!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;line-height:20px!important;text-align:left!important}
html body .mainB span.marketB>div.ty03 dl>dd{text-align:right!important}
html body .mainB div.css-1o45tzp{width:100%!important;overflow:hidden!important}
html body .mainB #tv_chart_container{width:100%!important;max-width:100%!important;height:470px!important}
html body .mainB #tv_chart_container .upc{width:100%!important;height:100%!important;min-height:0!important}
html body .mainB .upc-top{overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}
html body .mainB .upc-top>*{flex:0 0 auto!important}
html body .mainB .upc-top .upc-tfb{min-width:34px!important;width:auto!important;padding:0 8px!important}
html body .mainB .upc-tool{width:36px!important}
html body .mainB .upc-left{display:none!important}
html body .mainB #tv_chart_container .upc{grid-template-columns:0 minmax(0,1fr)!important;column-gap:0!important}

/* ---- exchange: order book + order form stacked, form first ---- */
html body .mainB div.halfB{display:flex!important;flex-direction:column!important;height:auto!important;margin-bottom:0!important}
html body .mainB div.halfB>div.leftB,html body .mainB div.halfB>div.rightB{float:none!important;width:100%!important;max-width:100%!important;height:auto!important;min-width:0!important}
html body .mainB div.halfB>div.rightB{order:-1!important;display:block!important}
html body .mainB div.halfB article{float:none!important;width:100%!important;max-width:100%!important}
html body .mainB div.halfB article.css-1ku03s3{height:340px!important}
html body .mainB div.halfB div.orderContainer{width:100%!important;height:auto!important;min-height:420px!important}
html body .mainB section.ty01>article:last-of-type,html body .mainB section.ty01>article:last-of-type>span.tabB{width:100%!important;max-width:100%!important;overflow-x:auto!important}

/* order book: keep only the price tables, the side tables (24h stats / recent trades) do not fit 375px */
html body .mainB .orderContainer__orderPrice table.css-whwifb,html body .mainB .orderContainer__orderPrice table.css-1atfwy9{display:none!important}
html body .mainB .orderContainer__orderPrice table.css-21tq7f{width:100%!important}
html body .mainB .orderContainer__orderPrice div.css-fm5kdd{width:100%!important}

/* order form: fluid input column, wrapping percentage buttons, depth chart at full width */
html body .mainB .rightB .css-1rr4qq7{width:calc(100% - 120px)!important;max-width:none!important}
html body .mainB .rightB .css-1r4ssm1,html body .mainB .rightB .css-1i50vku{width:100%!important;max-width:100%!important}
html body .mainB .rightB .css-1p9ukzi{width:100%!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:4px!important}
html body .mainB .rightB .depthChart,html body .mainB .rightB .depthChart canvas,html body .mainB .rightB div.chart{width:100%!important;max-width:100%!important}
html body .mainB .orderHeader .tab__item__link{padding:0 8px!important}
html body .mainB .orderHeader__Filter{width:auto!important;flex:0 0 auto!important;padding-right:12px!important}

/* ---- coin list (exchange) goes under everything, full width ---- */
html body .mainB section.ty02{height:auto!important;max-height:none!important}
html body .mainB section.ty02>article{float:none!important;width:100%!important}

/* ---- Wallets / My Trade / Settings (static pages): one column, no ticker panel ---- */
html body .mainB:not(:has(#tv_chart_container))>section.ty02{display:none!important}
html body .mainB>section.ty01>div.css-ed556q{flex-direction:column!important;width:100%!important;height:auto!important;min-width:0!important}
html body .mainB>section.ty01 div.css-gxmvi,html body .mainB>section.ty01 div.css-1d2sjs4,html body .mainB>section.ty01 div.css-1rhtqw2{width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;flex:0 0 auto!important;box-sizing:border-box!important}
html body .mainB>section.ty01 div.css-1d2sjs4{border-top:8px solid #f1f2f4!important;border-left:0!important}
html body .mainB>section.ty01 div.css-gxmvi>div[style*="overflow: hidden"]{height:380px!important}
html body .mainB>section.ty01 table{max-width:100%!important}

/* ---- Settings (/mypage/*): nav strip on top, content full width ---- */
html body .subMain.globalLayout{width:100%!important;min-width:0!important;max-width:100%!important;padding:0!important;margin:0!important;box-sizing:border-box!important}
html body .subMain.globalLayout>div>section.ty01,html body .subMain.globalLayout>div>section.ty02{float:none!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;box-sizing:border-box!important}
html body .subMain.globalLayout section.ty01 article.naviB{float:none!important;width:100%!important;height:auto!important;margin:0!important}
html body .subMain.globalLayout .naviB h3{height:48px!important;line-height:48px!important;padding:0 16px!important;font-size:17px!important}
html body .subMain.globalLayout .naviB .listB{display:flex!important;overflow-x:auto!important;white-space:nowrap!important;height:auto!important;background:#fff!important;border-bottom:1px solid #e5e8ee!important;-webkit-overflow-scrolling:touch}
html body .subMain.globalLayout .naviB .listB>*{flex:0 0 auto!important}
html body .subMain.globalLayout .naviB .listB ul{display:flex!important;flex-wrap:nowrap!important;margin:0!important;padding:0!important;height:auto!important}
html body .subMain.globalLayout .naviB .listB li{flex:0 0 auto!important;height:auto!important;margin:0!important}
html body .subMain.globalLayout .naviB .listB li a{height:auto!important;line-height:20px!important}
html body .subMain.globalLayout .naviB .listB a{display:block!important;padding:12px 14px!important;white-space:nowrap!important}
html body .subMain.globalLayout section.ty02 article{float:none!important;width:100%!important;max-width:100%!important}
html body .subMain.globalLayout .inforB{width:100%!important;max-width:100%!important;margin:0!important;padding:16px 14px 24px!important;box-sizing:border-box!important}
html body .subMain.globalLayout .mypageWrap{width:100%!important;max-width:100%!important}
html body .subMain.globalLayout .mypageWrap table{max-width:100%!important}

/* ---- My Trade: stacked summary, tables scroll sideways inside their block ---- */
html body .mainB section.ty01 div[class*="tw-flex"][class*="tw-w-full"]{flex-wrap:wrap!important}
html body .mainB section.ty01 div[class*="tw-flex"][class*="tw-w-full"]>div[class*="tw-flex-1"]{flex:1 1 100%!important;min-width:0!important;padding:6px 20px!important}
html body .mainB section.ty01 div[class*="tw-justify-between"][class*="tw-items-start"]{flex-wrap:wrap!important;gap:6px 0!important}
html body .mainB section.ty01 .AmountTable,html body .mainB section.ty01 article>div:has(>table.ty03it),html body .mainB section.ty01 article>div:has(table.ty03it){overflow-x:auto!important;-webkit-overflow-scrolling:touch}
html body .mainB section.ty01 .AmountTable [style*="position: absolute"]{width:980px!important;max-width:none!important}
html body .mainB section.ty01 .AmountTable table{width:980px!important;min-width:980px!important;max-width:none!important}
html body .mainB section.ty01>article>span.tabB ul.top.ty04 li a{font-size:13px!important;padding:0 2px!important;white-space:nowrap!important}
html body .mainB section.ty01 article>div table.ty03it{min-width:620px!important}
html body .mainB section.ty01 article>div table.ty03it td,html body .mainB section.ty01 article>div table.ty03it th{padding-left:4px!important;padding-right:4px!important;font-size:12px!important}

/* ---- Sign Up / Log In pages (sg* template) ---- */
html body .sgm{padding-top:24px!important}
html body .sgc{width:100%!important;max-width:600px!important;box-sizing:border-box!important;padding-left:16px!important;padding-right:16px!important}
html body .sgc h1{font-size:26px!important;line-height:36px!important}
html body .sgc .sgs{font-size:15px!important;line-height:22px!important}
html body .sgc .sgu{flex-wrap:wrap!important;font-size:14px!important}
html body .sgi{height:54px!important;padding:0 16px!important}

/* ---- service footer (.ftr): single column ---- */
html body footer.ftr .ftop{grid-template-columns:minmax(0,1fr)!important;gap:28px!important;display:grid!important}
html body footer.ftr .fl{width:100%!important;max-width:100%!important}
html body footer.ftr .fl .fh{flex-wrap:wrap!important;gap:2px 8px!important}
html body footer.ftr .fl .fbig{font-size:34px!important}
html body footer.ftr .fc4{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 16px!important;width:100%!important}
html body footer.ftr .fc4>div{width:auto!important;min-width:0!important}
html body footer.ftr .fbot{width:100%!important}
html body footer.ftr .fbot .fsoc{position:static!important;margin:14px 0 0!important}
html body footer.ftr .fb1 span,html body footer.ftr .fb2 span{display:block!important;margin:2px 0!important;max-width:100%!important;white-space:normal!important;word-break:break-word!important}
html body footer.ftr .fb1 i,html body footer.ftr .fb2 i{display:none!important}
html body footer.ftr .fb1,html body footer.ftr .fb2,html body footer.ftr .fb3{display:block!important;white-space:normal!important;height:auto!important}
html body footer.ftr .fce{flex-wrap:wrap!important;gap:12px 16px!important;height:auto!important}
html body footer.ftr .fcp{flex-wrap:wrap!important;gap:12px!important;height:auto!important}
html body footer.ftr .fcp .lang{flex-wrap:wrap!important;width:auto!important;max-width:100%!important}
}