:root{--bg:#0b0e11;--card:#161a1e;--bd:#2b3139;--in:#1e2329;--fg:#eaecef;--mut:#848e9c;--up:#0ecb81;--dn:#f6465d;--dn-t:#ff6b7d;--warn:#f0b90b;--acc:#f0b90b;--acc2:#fcd535;--r:6px}
/* price direction (P1-9): --rise / --fall colour price moves, buy / sell, bids / asks, profit / loss and the chart; --up / --dn stay the STATUS colours
   (ok / error). Domestic convention by default (rise red, fall blue); <html data-updown="global"> (계정·보안 > 화면 설정) switches all of them at once.
   Text variants keep 4.5:1 on every surface they sit on (lowest: #5b9dff 4.82 / #ff6b7d 4.78 on the hover grey); buttons carry dark text (5.49 / 5.81) */
:root{--rise:#f6465d;--rise-t:#ff6b7d;--rise-soft:rgba(246,70,93,.12);--fall:#3d8bfd;--fall-t:#5b9dff;--fall-soft:rgba(61,139,253,.12)}
html[data-updown=global]{--rise:#0ecb81;--rise-t:#0ecb81;--rise-soft:rgba(14,203,129,.12);--fall:#f6465d;--fall-t:#ff6b7d;--fall-soft:rgba(246,70,93,.12)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
a{color:var(--acc);text-decoration:none}
h2,h3{margin:0 0 10px;font-size:15px;font-weight:600}
p{margin:6px 0}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--in);border:1px solid var(--bd);border-radius:6px;padding:7px 9px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
textarea{min-height:64px;resize:vertical}
button{background:#21262d;border:1px solid var(--bd);border-radius:6px;padding:7px 12px;cursor:pointer;white-space:nowrap}
button:hover{border-color:var(--acc)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--acc2);border-color:transparent;color:#fff;font-weight:600}
button.primary.buy{background:var(--rise);color:#06110a}
button.primary.sell{background:var(--fall);color:#0b0e11}
button.primary.danger{background:transparent;border-color:var(--dn);color:var(--dn-t)}
button.ghost{background:transparent}
button.sm{padding:3px 8px;font-size:12px}
button.danger{color:var(--dn-t)}
form>button.primary{width:100%;margin-top:4px}
label{display:block;margin-bottom:8px;font-size:12px;color:var(--mut)}
label>span{display:block;margin-bottom:3px}
label em{font-style:normal;color:var(--fg)}
label.chk{display:flex;align-items:center;gap:6px}
label.chk input{width:auto}
code{display:block;background:var(--in);border:1px solid var(--bd);padding:6px 8px;border-radius:4px;word-break:break-all;font-size:12px;color:var(--fg);user-select:all}


/* header */
.top{display:flex;align-items:center;gap:20px;height:56px;padding:0 20px;border-bottom:1px solid var(--bd);background:var(--card);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:.2px;flex:none}
.logo{width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.logo::before{content:"";width:13px;height:13px;background:var(--acc);border-radius:2px;transform:rotate(45deg);box-shadow:0 0 0 3px var(--card),0 0 0 4.5px var(--acc)}
.has-logo .logo{width:auto}
.has-logo .logo::before{display:none}
.has-logo .brand-name{display:none}
.logo img{height:24px;width:auto;display:block}
#nav{display:flex;align-items:center;gap:2px;height:100%}
#nav>a,#nav .dd-btn{display:flex;align-items:center;gap:6px;height:100%;padding:0 10px;color:var(--fg);font-size:14px;font-weight:500;background:none;border:0;border-radius:0}
#nav>a:hover,#nav .dd-btn:hover,#nav a.on,#nav .dd-btn.on{color:var(--acc)}
.dd{position:relative;height:100%;display:flex;align-items:center}
.dd-menu{display:none;position:absolute;top:100%;left:0;min-width:184px;background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.5);z-index:30}
.dd-menu.right{left:auto;right:0}
.dd.open>.dd-menu{display:block}
@media (hover:hover){.dd:hover>.dd-menu{display:block}.dd:hover .caret{transform:rotate(180deg)}}
.dd-menu a,.dd-menu .dd-item{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:6px;color:var(--fg);font-size:14px;background:none;border:0;font-weight:400}
.dd-menu a:hover,.dd-menu .dd-item:hover,.dd-menu a.on{background:var(--in);color:var(--acc)}
.dd-head{padding:8px 12px 10px;border-bottom:1px solid var(--bd);margin-bottom:4px;display:flex;flex-direction:column;gap:2px;max-width:260px}
.dd-head b{font-size:13.5px;overflow-wrap:break-word;overflow-wrap:anywhere}
.dd-head small{font-size:11px;word-break:break-all}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;transition:transform .15s}
.dd.open .caret{transform:rotate(180deg)}
.user{margin-left:auto;display:flex;align-items:center;gap:12px;height:100%}
.guest-acts{display:flex;gap:6px}
.hbtn{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:6px;color:var(--fg);font-size:13.5px;font-weight:500;white-space:nowrap}
.hbtn:hover{color:var(--acc)}
.hbtn.primary{background:var(--acc);color:#0b0e11}
.hbtn.primary:hover{background:var(--acc2);color:#0b0e11}
.umenu .dd-btn{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0 2px;height:100%;color:var(--fg)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--in);border:1px solid var(--bd);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--acc);flex:none}
.u-email{font-size:13px;color:var(--mut)}
.nav-toggle{display:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dn);display:inline-block;flex:none}
.dot.on{background:var(--up)}
/* layout */
main{padding:12px;max-width:1400px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:12px;margin-bottom:12px;min-width:0}
.trade-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.auth{max-width:420px;margin:24px auto}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.bar h3{margin:0;flex:1}
.bar select,.bar input{width:auto;flex:1 1 120px}
.muted{color:var(--mut)}.up{color:var(--rise-t)}.dn{color:var(--fall-t)}.center{text-align:center}
.ok-t{color:var(--up)}.bad-t{color:var(--dn-t)}.warn-t{color:var(--warn)} /* status text (ok / error / attention), independent of the direction colours */

/* ticker */
.tickbar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;row-gap:8px}
.tickbar select{width:auto;min-width:140px;font-weight:600}
.tk{display:flex;flex-direction:column;font-variant-numeric:tabular-nums;line-height:1.2}
.tk small{color:var(--mut);font-size:11px}
.tk b{font-size:18px}

/* order book / trades rows */
.row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px;padding:2px 6px;font-variant-numeric:tabular-nums;font-size:12.5px;position:relative}
.row.head{color:var(--mut);font-size:11px;border-bottom:1px solid var(--bd);margin-bottom:4px}
.row span:nth-child(n+2){text-align:right}
.levels{min-height:40px}
.lvl{cursor:pointer}
.lvl::before{content:"";position:absolute;top:0;bottom:0;right:0;width:var(--w,0);opacity:.13;pointer-events:none}
.ask::before{background:var(--fall)}.bid::before{background:var(--rise)}
.ask .p{color:var(--fall-t)}.bid .p{color:var(--rise-t)}
.lvl:hover{background:#21262d}
.spread{text-align:center;color:var(--mut);font-size:12px;padding:4px;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin:4px 0}

/* order form */
.seg{display:flex;margin-bottom:8px;border:1px solid var(--bd);border-radius:6px;overflow:hidden}
.seg button{flex:1;border:0;border-radius:0;background:transparent;color:var(--mut);padding:6px}
.seg button.on{background:#21262d;color:var(--fg)}
#seg-side button.on[data-v=buy]{color:var(--rise-t)}
#seg-side button.on[data-v=sell]{color:var(--fall-t)}
.est{white-space:pre-line;font-size:12px;color:var(--mut);margin:6px 0;min-height:36px}
.bal{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-bottom:6px;font-variant-numeric:tabular-nums}

/* tables */
.tbl{overflow:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
th,td{padding:5px 8px;text-align:left;border-bottom:1px solid var(--bd)}
th{color:var(--mut);font-weight:500;font-size:11px}
tr:last-child td{border-bottom:0}
td.addr{max-width:180px;overflow:hidden;text-overflow:ellipsis}
td.b{font-weight:600}
.acts{display:flex;gap:4px}
.st-filled,.st-completed,.st-active,.st-approved{color:var(--up)}
.st-cancelled,.st-rejected,.st-frozen{color:var(--dn-t)}
.st-pending,.st-partial{color:var(--warn)}

/* wallet / admin */
.info{background:var(--in);border:1px solid var(--bd);border-radius:6px;padding:8px;white-space:pre-wrap;word-break:break-all;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;min-height:48px;margin:0 0 8px;user-select:all}
.stats{display:flex;gap:20px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;line-height:1.2}
.stat small{color:var(--mut);font-size:11px}
.stat b{font-size:18px}

/* toast + modal */
#toasts{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:50;max-width:min(360px,calc(100vw - 24px))}
.toast{background:#21262d;border:1px solid var(--bd);border-left:3px solid var(--acc);padding:8px 12px;border-radius:6px;opacity:0;transform:translateY(6px);transition:.2s;font-size:13px;word-break:break-word}
.toast.show{opacity:1;transform:none}
.toast.ok{border-left-color:var(--up)}
.toast.error{border-left-color:var(--dn)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:40;padding:12px}
.modal-box{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:16px;width:min(460px,100%);position:relative;max-height:90vh;overflow:auto}
.x{position:absolute;top:4px;right:4px;border:0;background:transparent;font-size:20px;line-height:1;color:var(--mut);padding:4px 8px}


/* ===== trade page ===== */
button.primary{color:#0b0e11}
.brand{color:var(--acc)}
#nav a.on{color:var(--acc)}
main:has(.bx){max-width:none;padding:0}
.bx{display:flex;flex-direction:column;gap:1px;background:var(--bg)}
.pane{background:var(--card);min-width:0;display:flex;flex-direction:column}
.ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;font-weight:600;font-size:13px;border-bottom:1px solid var(--bd);min-height:38px}
.bx-head{display:flex;align-items:center;gap:26px;padding:10px 16px;background:var(--card);flex-wrap:wrap;row-gap:6px}
.bx-head .sym{display:flex;flex-direction:column;line-height:1.15}
.bx-head .sym b{font-size:19px}
.bx-head .sym small{color:var(--mut);font-size:11px}
.bx-head .tk.big b{font-size:19px}
.bx-head .tk small{font-size:11px}
.bx-head .tk span{font-size:12.5px}
.bx-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:1px;min-height:720px}
.bx-center{display:flex;flex-direction:column;gap:1px;min-width:0}
.bx-side{display:flex;flex-direction:column;gap:1px;min-width:0}
.bx-chart{flex:1;min-height:440px}
.chart{flex:1;min-height:380px;width:100%;display:block}
.chartbar{font-weight:400}
.ivs{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.ivs span{font-size:12px;margin-right:4px}
.ivs button,.tabs button,.bookmode button{background:transparent;border:0;color:var(--mut);padding:3px 8px;font-size:12.5px;border-radius:4px}
.ivs button.on,.tabs button.on{color:var(--fg);background:var(--in)}
.tabs button.on{color:var(--acc);background:transparent;box-shadow:inset 0 -2px 0 var(--acc);border-radius:0}
.tabs{display:flex;gap:6px}
.bookmode{display:flex;gap:2px}
.bookmode button.on{color:var(--acc)}
.ohlc{padding:4px 12px;font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:22px}
/* book */
.bx-book .levels{display:flex;flex-direction:column}
.bx-book .asks{justify-content:flex-end;min-height:0}
.bx .row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);padding:1.5px 12px;font-size:12px;cursor:default}
.bx .row>span:nth-child(n+2){text-align:right}
.bx .row.head{color:var(--mut);font-size:11px;padding-top:6px;padding-bottom:4px}
.bx .lvl{cursor:pointer}
.bx .lvl:hover{background:#2b313966}
.bx .lvl::before{content:"";position:absolute;right:0;top:0;bottom:0;width:var(--w);opacity:.16;pointer-events:none}
.bx .lvl.ask::before{background:var(--fall)}.bx .lvl.bid::before{background:var(--rise)}
.bx .lvl.ask .p{color:var(--fall-t)}.bx .lvl.bid .p{color:var(--rise-t)}
.midp{display:flex;align-items:baseline;gap:6px;padding:7px 12px;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.midp b{font-size:18px;font-variant-numeric:tabular-nums}
.midp small{margin-left:auto;font-size:11px}
/* order forms */
.forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:12px}
.of .avail{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}
.of .avail .av{font-variant-numeric:tabular-nums}
label.fx{display:flex;align-items:center;background:var(--in);border:1px solid transparent;border-radius:6px;padding:0 10px;margin-bottom:8px;height:40px;color:var(--mut)}
label.fx:focus-within{border-color:var(--acc)}
label.fx>span{margin:0;width:44px;flex:none;font-size:12.5px}
label.fx input{border:0;background:transparent;text-align:right;padding:0 8px;height:100%;font-variant-numeric:tabular-nums;color:var(--fg)}
label.fx input:disabled{color:var(--mut)}
label.fx em{color:var(--fg);font-size:12.5px;min-width:36px;text-align:right}
.pct{margin:2px 0 10px}
.pct input[type=range]{width:100%;padding:0;border:0;background:transparent;accent-color:var(--acc);height:16px}
.pct .ticks{display:flex;justify-content:space-between;gap:4px}
.pct .ticks button{flex:1;background:transparent;border:1px solid var(--bd);color:var(--mut);font-size:11px;padding:2px 0;border-radius:4px}
.pct .ticks button:hover{color:var(--fg);border-color:var(--mut)}
.of .est{min-height:16px;font-size:11.5px;margin:-2px 0 6px}
.of .go{width:100%;height:40px;font-size:14px;border-radius:6px}
.of .go em{color:inherit;font-style:normal}
button.primary.buy{background:var(--rise);color:#0b0e11}
button.primary.sell{background:var(--fall);color:#0b0e11}
.loginhint{text-align:center;padding:0 0 12px;font-size:12.5px}
/* markets + trades */
.bx-mkts{max-height:360px}
.bx-mkts input{margin:8px 12px 2px;width:auto}
.bx-mkts .levels{overflow:auto}
.bx .row.mk{cursor:pointer}
.bx .row.mk:hover,.bx .row.mk.on{background:#2b313966}
.bx .row.mk small{font-size:11px}
.bx-trades{flex:1;min-height:0}
.bx-trades .levels{overflow:auto;max-height:520px}
/* bottom */
.bx-bottom{min-height:240px}
.bx-bottom .tbl{padding:0 12px 12px}
.bx-bottom table th{color:var(--mut);font-weight:400}
#open-n{font-size:12px}
@media (max-width:1180px){
  .bx-grid{grid-template-columns:280px minmax(0,1fr)}
  .bx-side{grid-column:1 / -1;flex-direction:row}
  .bx-side .pane{flex:1}
}
@media (max-width:760px){
  .bx-grid{grid-template-columns:1fr}
  .bx-center{order:-1}
  .bx-side{flex-direction:column}
  .forms{grid-template-columns:minmax(0,1fr)}
  .bx-chart{min-height:360px}.chart{min-height:320px}
  .bx-head{gap:14px}
}

.ivs button:disabled{opacity:.35}

/* ===== shared components (non-trade pages) ===== */
:root{--acc-soft:rgba(240,185,11,.12);--up-soft:rgba(14,203,129,.12);--dn-soft:rgba(246,70,93,.12);--info:#3d8bfd;--info-t:#5b9dff;--info-soft:rgba(61,139,253,.12);--hover:#2b3139}
main:has(.pg){max-width:none;padding:0}
.pg{max-width:1200px;margin:0 auto;padding:28px 24px 48px}
.pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.pg-head h1{margin:0 0 4px;font-size:26px;font-weight:600}
.pg-head p{margin:0;font-size:13.5px}
.pg-acts{display:flex;gap:8px;flex-wrap:wrap}
.pg .card{padding:20px;border-radius:10px;margin-bottom:16px;border-color:transparent}
.pg .card>h3,.card-h h3{font-size:16px;font-weight:600;margin:0 0 14px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.card-h h3{margin:0}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.grid2>.card{margin-bottom:0}
.grid2+.card,.grid2+.grid2{margin-top:16px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.small{font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.r{text-align:right}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}

/* buttons / links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:6px;background:var(--in);color:var(--fg);border:1px solid transparent;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--hover);color:var(--fg)}
.btn.primary{background:var(--acc);color:#0b0e11;font-weight:600}
.btn.primary:hover{background:var(--acc2)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
.pg button{height:36px;padding:0 14px;border-radius:6px;font-weight:500}
.pg button.sm{height:28px;padding:0 10px}
.pg button.ghost,.modal button.ghost{background:var(--in);border-color:transparent}
.pg button.ghost:hover,.modal button.ghost:hover{background:var(--hover);border-color:transparent}
button.primary:not(.buy):not(.sell):not(.dangerfill):not(.up):not(.dn):hover:not(:disabled){background:var(--acc)}
button.danger,.pg button.ghost.danger{color:var(--dn-t)}
button.primary.dangerfill{background:var(--dn);color:#0b0e11}
/* an order confirmation takes its side's direction colour (audit #6 U8): buy = rise, sell = fall — not the error red (= rise in the
   domestic scheme) for both */
button.primary.up{background:var(--rise);color:#0b0e11}button.primary.dn{background:var(--fall);color:#0b0e11}
button.lg,.btn.lg{height:46px;width:100%;font-size:15px;font-weight:600;border-radius:8px;margin-top:6px}
button.loading{position:relative;color:transparent!important}
button.loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #0b0e11;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
button.ghost.loading::after{border-color:var(--fg);border-right-color:transparent}
.linkbtn{background:none!important;border:0!important;color:var(--acc);padding:0!important;height:auto!important;font-size:13px;cursor:pointer}
.linkbtn:disabled{color:var(--mut)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:auto}
.copy{display:inline-flex;align-items:center;justify-content:center;gap:4px;background:none!important;border:0!important;color:var(--mut);padding:2px 4px!important;height:auto!important;font-size:12px;cursor:pointer;border-radius:4px}
.copy:hover{color:var(--acc)}
.copy.done{color:var(--up)}

/* form fields */
.fld{display:block;margin-bottom:16px;font-size:13px;color:var(--fg)}
.fld-l{display:block;margin-bottom:6px;font-size:13px;color:var(--mut)}
.fld-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fld-top .fld-l{margin:0}
.pg input,.pg select,.pg textarea,.auth-card input,.modal input,.modal select,.modal textarea{height:42px;padding:0 12px;border-radius:6px;background:var(--in);border:1px solid var(--bd);font-size:14px}
.pg textarea,.modal textarea{height:auto;min-height:84px;padding:10px 12px}
.pg input:hover,.pg select:hover,.pg textarea:hover,.auth-card input:hover{border-color:#474d57}
.pg input:focus,.pg select:focus,.pg textarea:focus,.auth-card input:focus,.modal input:focus,.modal textarea:focus{border-color:var(--acc)}
.pg input[type=checkbox],.modal input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--acc)}
.inp{display:flex;align-items:center;background:var(--in);border:1px solid var(--bd);border-radius:6px;height:42px;min-width:0}
.inp:hover{border-color:#474d57}
.inp:focus-within{border-color:var(--acc)}
.pg .inp input,.auth-card .inp input,.modal .inp input,.inp input{border:0!important;background:transparent;height:100%;flex:1;min-width:0}
.inp .unit{padding:0 12px 0 4px;color:var(--fg);font-size:13.5px;font-weight:500;white-space:nowrap}
.inp .inbtn,.pg .inp .inbtn{background:none;border:0;border-left:1px solid var(--bd);border-radius:0;color:var(--acc);height:24px;padding:0 12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.inp .inbtn:disabled{color:var(--mut)}
.inp .inbtn.eye{color:var(--mut);border:0}
.inp .inbtn.eye:hover{color:var(--fg)}
.fld-err,.form-err{color:var(--dn-t);font-size:12.5px;margin-top:6px}
.form-err{background:var(--dn-soft);border-radius:6px;padding:9px 12px;margin:0 0 12px}
.fld-hint{font-size:12px;color:var(--mut);margin-top:6px}
.fld-hint.warn{color:var(--warn)}
.chks{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 16px}
label.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--fg);margin:0;cursor:pointer}
.form-acts{display:flex;gap:8px;justify-content:flex-end}
.otp{letter-spacing:.35em;font-size:18px!important;font-variant-numeric:tabular-nums;text-align:center}

/* badges / notices / empty */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:4px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--in);color:var(--mut)}
.badge.ok{background:var(--up-soft);color:var(--up)}
.badge.bad{background:var(--dn-soft);color:var(--dn-t)}
.badge.warn{background:var(--acc-soft);color:var(--acc)}
.badge.blue{background:var(--info-soft);color:var(--info-t)}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:8px;background:var(--in);font-size:13px;line-height:1.5;margin-bottom:16px}
.notice>.ic{margin-top:2px;width:18px;height:18px}
.notice b{display:block;margin-bottom:2px;font-size:13.5px}
.notice p{margin:0;color:var(--mut)}
.notice.blue{background:var(--info-soft)}.notice.blue>.ic{color:var(--info)}
.notice.warn{background:var(--acc-soft)}.notice.warn>.ic,.notice.warn b{color:var(--acc)}
.notice.danger{background:var(--dn-soft)}.notice.danger>.ic,.notice.danger b{color:var(--dn-t)}
.notice.ok{background:var(--up-soft)}.notice.ok>.ic,.notice.ok b{color:var(--up)}
.notice.cta{align-items:center;background:var(--acc-soft);border:1px solid rgba(240,185,11,.35)}
.notice.cta>div{flex:1}
.notice.cta>.ic{color:var(--acc);width:22px;height:22px}
.empty{text-align:center;color:var(--mut);padding:32px 12px!important;font-size:13px;white-space:normal}
.empty .ic{width:32px;height:32px;stroke-width:1.4;opacity:.6;margin-bottom:6px}
tr.empty-tr td{border-bottom:0}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--mut);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;margin-bottom:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* data tables */
table.dt{font-size:13px}
table.dt th{padding:10px 12px;font-size:12px;font-weight:400;color:var(--mut);border-bottom:1px solid var(--bd);background:transparent}
table.dt td{padding:12px;border-bottom:1px solid #1f242a;vertical-align:middle}
table.dt tbody tr:hover td{background:#1b2026}
table.dt th.r,table.dt td.r{text-align:right}
table.dt tr.row-bad td{background:var(--dn-soft)}
.cell-sub{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
div.acts{display:flex;gap:6px;align-items:center;justify-content:flex-end}
div.acts a{font-size:13px;font-weight:500}
.hash{display:inline-flex;align-items:center;gap:2px;max-width:220px}
.hash span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coin{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:11px;font-weight:700;color:#0b0e11;background:hsl(var(--h,45),70%,60%);flex:none}
.coin.sm{width:20px;height:20px;font-size:10px}
.coin-cell{display:flex;align-items:center;gap:10px}
.coin-cell b{display:block;font-size:14px}
.coin-cell small{display:block;color:var(--mut);font-size:12px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.toolbar-r{display:flex;gap:8px;align-items:center}
.toolbar-r select,.toolbar-r input:not([type=checkbox]){width:auto;min-width:150px;height:36px}
.pills{display:flex;gap:4px;flex-wrap:wrap}
.pills button,.pg .pills button{height:30px;padding:0 12px;border-radius:6px;background:transparent;border:0;color:var(--mut);font-size:13px}
.pills button:hover{color:var(--fg)}
.pills button.on,.pg .pills button.on{background:var(--in);color:var(--fg)}
.ptabs{display:flex;gap:24px;border-bottom:1px solid var(--bd);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs a,.ptabs button{flex:none;padding:0 0 12px!important;height:auto!important;background:none!important;border:0!important;border-radius:0!important;color:var(--mut);font-size:14.5px;font-weight:500;box-shadow:none;white-space:nowrap}
.ptabs a:hover,.ptabs button:hover{color:var(--fg)}
.ptabs a.on,.ptabs button.on{color:var(--fg);box-shadow:inset 0 -2px 0 var(--acc)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;font-size:13px}
.kv dt{color:var(--mut)}
.kv dd{margin:0;text-align:right;overflow-wrap:break-word;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.copyline{display:flex;align-items:center;gap:6px;background:var(--in);border-radius:6px;padding:8px 10px;min-width:0}
.copyline code{flex:1;background:none;border:0;padding:0;font-size:13px;word-break:break-all;user-select:all}
.copyline.big code{font-size:14.5px;font-weight:500;line-height:1.5}
.copyline.hl{box-shadow:inset 0 0 0 1px var(--acc)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* auth */
main:has(.auth-wrap){max-width:none;padding:0}
.auth-wrap{min-height:calc(100vh - 56px);display:flex;align-items:flex-start;justify-content:center;padding:56px 16px 48px}
.auth-card{width:100%;max-width:420px;background:var(--card);border-radius:12px;padding:36px 32px 28px}
.auth-brand{display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-weight:700;font-size:18px;margin-bottom:26px}
.auth-card h1{font-size:26px;font-weight:600;margin:0 0 6px}
.auth-sub{color:var(--mut);margin:0 0 24px;font-size:14px;overflow-wrap:break-word;overflow-wrap:anywhere}
.auth-sub b{color:var(--fg);font-weight:600}
.auth-form{margin-top:4px}
.auth-links{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:20px;font-size:13.5px}
.pw-rules{list-style:none;margin:8px 0 0;padding:0;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut)}
.pw-rules li{display:flex;align-items:center;gap:4px}
.pw-rules li .ic{width:13px;height:13px;opacity:.5}
.pw-rules li.ok{color:var(--up)}
.pw-rules li.ok .ic{opacity:1}

/* modal dialog */
.modal-box{width:min(480px,100%);padding:24px;border-radius:12px;border-color:transparent}
.dlg h3{font-size:18px;font-weight:600;margin:0 0 16px;padding-right:24px}
.dlg p{color:var(--mut);font-size:13.5px;margin:0 0 14px}
.dlg .kv{background:var(--in);border-radius:8px;padding:14px;margin-bottom:16px}
.dlg-acts{display:flex;gap:10px;margin-top:8px}
.dlg-acts button{flex:1;height:42px;border-radius:8px;font-weight:600}
.dlg .fld{margin-bottom:14px}
.dlg .notice{margin-bottom:14px}

/* steps + funding */
.fund{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.fund-side{display:flex;flex-direction:column;gap:16px}
.fund-side .card{margin:0}
.steps{display:flex;flex-direction:column;gap:0}
.step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;position:relative;padding-bottom:26px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:13.5px;top:30px;bottom:2px;width:1px;background:var(--bd)}
.step:last-child::before{display:none}
.step-n{width:28px;height:28px;border-radius:50%;background:var(--acc);color:#0b0e11;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;z-index:1}
.step.off .step-n{background:var(--in);color:var(--mut)}
.step-b>h3{font-size:15px;font-weight:600;margin:3px 0 12px}
.step.off .step-b>h3{color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip,.pg .chip{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 8px;border-radius:8px;background:var(--in);border:1px solid transparent;color:var(--fg)}
.chip b{font-size:14px}
.chip small{font-size:12px}
.chip:hover{border-color:#474d57}
.chip.on,.pg .chip.on{border-color:var(--acc);background:var(--acc-soft)}
.nets{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.netcard,.pg .netcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;height:auto;padding:12px 14px;border-radius:8px;background:var(--in);border:1px solid transparent;text-align:left;color:var(--fg);font-weight:400;white-space:normal}
.netcard:hover:not(:disabled){border-color:#474d57}
.netcard.on,.pg .netcard.on{border-color:var(--acc);background:var(--acc-soft)}
.netcard:disabled{opacity:.55}
.nc-top{display:flex;align-items:center;gap:8px;width:100%;justify-content:space-between}
.nc-top b{font-size:15px}
.nc-l{font-size:12px;color:var(--mut)}
.addr-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;background:var(--bg);border-radius:10px;padding:18px;margin-bottom:14px}
.qr-col{display:flex;flex-direction:column;align-items:center;gap:6px}
.qr{display:block;background:#fff;border-radius:8px;padding:0;image-rendering:pixelated}
.addr-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.addr-col .fld-l{margin:4px 0 0}
.addr-col .kv{margin-top:8px}
.notes{margin:0;padding-left:18px;color:var(--mut);font-size:12.5px;line-height:1.7}
.notes li::marker{color:var(--acc)}
.side-list{margin:0;padding-left:18px;color:var(--mut);font-size:13px;line-height:1.75}
.wd-sum{background:var(--bg);border-radius:8px;padding:14px 16px;margin:4px 0 8px}
.wd-sum .kv dd b{font-size:18px;color:var(--fg)}
.avail-line{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);margin-top:8px}
.avail-line b{color:var(--fg);font-weight:500}
.save-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.save-row input[type=text],.save-row input:not([type]){flex:1;min-width:160px;height:36px}
.book-item{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--bd)}
.book-item:last-child{border-bottom:0}
.bi-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bi-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bi-main code,.book-pick code{word-break:break-all;font-size:12px;color:var(--fg);background:none;border:0;padding:0;display:block}
.bi-acts{display:flex;gap:2px;align-items:center}
.book-pick{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow:auto;margin-bottom:8px}
.book-pick button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;height:auto!important;padding:12px 14px!important;text-align:left;white-space:normal;background:var(--in);border:1px solid transparent;border-radius:8px}
.book-pick button:hover{border-color:var(--acc)}
.book-pick code{font-size:12px;word-break:break-all}

/* wallet */
.est-card{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.est-total small{display:block;color:var(--mut);font-size:13px;margin-bottom:6px}
.est-total b{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.est-total b+span{font-size:15px;margin-left:6px;color:var(--mut)}
.est-total p{margin:6px 0 0;font-size:12px}
.est-break{display:flex;flex-wrap:wrap;gap:10px 28px}
.est-break div{display:flex;flex-direction:column;gap:2px}
.est-break small{color:var(--mut);font-size:12px}
.est-break span{font-variant-numeric:tabular-nums}

/* account */
.profile{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.profile .avatar{width:56px;height:56px;font-size:22px}
.profile-main{flex:1;min-width:200px}
.profile-main b{font-size:18px;overflow-wrap:break-word;overflow-wrap:anywhere}
.profile-main .uid{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:12.5px;margin:4px 0 8px;flex-wrap:wrap}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.sec-level{min-width:200px}
.sec-level small{color:var(--mut);font-size:12px}
.sec-bars{display:flex;gap:4px;margin:6px 0 4px}
.sec-bars i{flex:1;height:4px;border-radius:2px;background:var(--in)}
.sec-bars i.on{background:var(--up)}
.sec-bars.mid i.on{background:var(--acc)}
.sec-bars.low i.on{background:var(--dn)}
.sec-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--bd)}
.sec-list>div:last-child .sec-row,.sec-list>.sec-wrap:last-child{border-bottom:0}
.sec-wrap{border-bottom:1px solid var(--bd)}
.sec-wrap .sec-row{border-bottom:0}
.sec-ic{width:40px;height:40px;border-radius:50%;background:var(--in);display:flex;align-items:center;justify-content:center;color:var(--acc)}
.sec-ic .ic{width:19px;height:19px}
.sec-main b{font-size:14.5px;font-weight:600}
.sec-main p{margin:3px 0 0;font-size:12.5px}
.sec-panel{background:var(--bg);border-radius:10px;padding:20px;margin:0 0 18px}
.sec-panel .fld:last-of-type{margin-bottom:12px}
.sec-panel form{max-width:440px}
.howto{margin:0 0 16px;padding-left:18px;color:var(--mut);font-size:13px;line-height:1.8}
.totp-setup{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start;margin-top:4px}
.totp-keys{display:flex;flex-direction:column;gap:10px;min-width:0}
.totp-keys .notice{margin:0}

/* admin */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--card);border-radius:10px;padding:16px 18px}
.tile small{display:block;color:var(--mut);font-size:12.5px;margin-bottom:6px}
.tile b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;word-break:break-all}
.tile b.sm{font-size:14px;font-weight:500;line-height:1.6;white-space:pre-line;display:block}
.gen h4{font-size:13.5px;margin:18px 0 8px;color:var(--mut);font-weight:500}
.gen>.kv{max-width:420px;background:var(--bg);border-radius:8px;padding:12px 14px}
.adm-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* responsive */
@media (max-width:1000px){
  .fund{grid-template-columns:minmax(0,1fr)}
  .row3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:760px){
  .top{gap:10px;padding:0 12px;height:52px}
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;padding:0 8px;background:none;border:0;border-radius:6px}
  .nav-toggle i{display:block;height:2px;background:var(--fg);border-radius:1px}
  .nav-toggle:hover{background:var(--in)}
  #nav{display:none;position:absolute;top:100%;left:0;right:0;height:auto;flex-direction:column;align-items:stretch;background:var(--card);border-bottom:1px solid var(--bd);padding:4px 16px 12px;gap:0;box-shadow:0 14px 28px rgba(0,0,0,.5)}
  .top.nav-open #nav{display:flex}
  #nav>a,#nav .dd-btn{height:46px;padding:0 4px;border-bottom:1px solid var(--bd);width:100%}
  #nav .dd{height:auto;flex-direction:column;align-items:stretch}
  #nav .dd-menu{display:block;position:static;border:0;box-shadow:none;padding:2px 0 6px 10px;background:none;min-width:0}
  #nav .caret{display:none}
  .u-email,.umenu .caret{display:none}
  .user{gap:8px}
  .hbtn{padding:0 10px;height:30px;font-size:13px}
  .auth-wrap{min-height:calc(100vh - 52px)}
  .pg{padding:18px 16px 40px}
  .pg-head h1{font-size:22px}
  .pg .card{padding:16px}
  .grid2,.row3{grid-template-columns:minmax(0,1fr)}
  .addr-box,.totp-setup{grid-template-columns:minmax(0,1fr);justify-items:center}
  .addr-col,.totp-keys{width:100%}
  .sec-row{grid-template-columns:40px minmax(0,1fr) auto;gap:12px}
  .sec-st{grid-column:2;grid-row:2}
  .sec-act{grid-column:3;grid-row:1}
  .toolbar-r{width:100%}
  .toolbar-r select{flex:1;min-width:0}
  .est-total b{font-size:24px}
}
@media (max-width:480px){
  .auth-wrap{padding:24px 12px}
  .auth-card{padding:28px 20px 22px}
  .row2{grid-template-columns:minmax(0,1fr)}
  .modal-box{padding:20px 16px}
  .est-break{gap:10px 18px}
}

/* ===== perpetual futures page (#/futures) — reuses .bx panes, book, chart and order-row styles ===== */
.pf .pf-sym{height:auto}
.pf-symbtn{display:flex;align-items:center;gap:8px;background:none;border:0;padding:2px 0;color:var(--fg)}
.pf-symbtn b{font-size:19px}
.pf-symbtn:hover{border:0;color:var(--acc)}
.pf-mdd{width:360px;max-width:calc(100vw - 24px);padding:8px 0;top:calc(100% + 4px)}
.pf-mdd input{margin:0 12px 6px;width:calc(100% - 24px);height:34px}
.pf-mdd #pf-mlist{max-height:360px;overflow:auto}
.pf-mdd .row.mk{padding:6px 12px}
.pf-none{padding:14px}
#pf-rate.up{color:var(--rise-t)}#pf-rate.dn{color:var(--fall-t)}
.pf-midm{margin-left:auto;font-size:11.5px}
.pf-midm span{color:var(--fg);font-variant-numeric:tabular-nums}
.pf-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 340px;grid-template-areas:"book chart order";gap:1px;min-height:720px}
.pf-left{grid-area:book;display:flex;flex-direction:column;gap:1px;min-width:0}
.pf-grid>.bx-chart{grid-area:chart}
.pf-right{grid-area:order;display:flex;flex-direction:column;gap:1px;min-width:0}
.pf .bx-trades{flex:1}
.pf .bx-trades .levels{max-height:300px}
/* order panel */
.pf-order{padding:12px 12px 8px}
.pf-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.pf-modes button{height:32px;background:var(--in);border:1px solid transparent;font-size:13px;font-weight:600}
.pf-modes button:hover{border-color:var(--acc)}
.pf-otabs{margin:0 0 10px;border-bottom:1px solid var(--bd);overflow-x:auto;scrollbar-width:none}
.pf-otabs::-webkit-scrollbar{display:none}
.pf-otabs button{padding:6px 6px 8px;flex:none}
.pf-order .avail{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:8px;font-variant-numeric:tabular-nums}
.pf-order .avail .linkbtn{font-size:14px;margin-left:4px}
.pf-order label.fx>span{width:auto;min-width:44px;margin-right:6px}
.pf-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 8px}
.pf-opts label.chk{font-size:12.5px;gap:6px}
.pf-opts input[type=checkbox]{width:14px;height:14px;accent-color:var(--acc)}
.pf-opts select{width:auto;height:28px;padding:0 6px;font-size:12px;margin-left:auto}
.pf-hint{font-size:11.5px;line-height:1.45;margin:0 0 8px}
.pf-hint:empty{display:none}
.pf-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf-btns button{height:42px;font-size:14px;font-weight:600;border-radius:6px}
.pf-info{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin-top:8px;font-size:11.5px;font-variant-numeric:tabular-nums}
.pf-info>div{display:flex;justify-content:space-between;gap:6px;min-width:0}
.pf-info>div>span:last-child{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-acct-body{padding:10px 12px 12px}
.pf-acct-body .kv{font-size:12.5px;gap:6px 12px}
/* bottom */
.pf-bh{flex-wrap:wrap;row-gap:4px}
.pf-btabs{overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
.pf-btabs::-webkit-scrollbar{display:none}
.pf-btabs button{flex:none}
.pf-btabs span{font-size:12px}
.pf-tools{display:flex;align-items:center;gap:12px;font-weight:400}
.pf-tools label.chk{font-size:12.5px;color:var(--mut);gap:6px}
.pf-tools input[type=checkbox]{width:14px;height:14px;accent-color:var(--acc)}
.pf-tools select{width:auto;height:28px;padding:0 6px;font-size:12px}
.pf .bx-bottom td{vertical-align:middle}
.pf .bx-bottom .cell-sub.up{color:var(--rise-t)}.pf .bx-bottom .cell-sub.dn{color:var(--fall-t)}
.pf-psym{display:flex;align-items:center;gap:8px}
.pf-psym a{color:var(--fg);font-weight:600}
.pf-psym a:hover{color:var(--acc)}
.pf-bar{display:block;width:3px;height:28px;border-radius:2px;flex:none}
.pf-bar.long{background:var(--rise)}.pf-bar.short{background:var(--fall)}
.pf-warn{color:var(--warn)}
.pf-mini{font-size:11.5px!important;margin-left:4px}
.pf-close{justify-content:flex-start!important;gap:4px!important}
.pf-cin{width:96px!important;height:26px;padding:0 6px!important;font-size:12px;text-align:right}
.st-untriggered{color:var(--warn)}.st-triggered{color:var(--up)}.st-expired{color:var(--mut)}
/* dialogs */
.lev-val{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 12px}
.lev-val>button{width:40px;height:40px;font-size:20px;line-height:1;padding:0}
.lev-box{display:flex;align-items:center;gap:4px;background:var(--in);border:1px solid var(--bd);border-radius:6px;padding:0 12px;height:44px}
.lev-box input.lev-num{width:64px;border:0!important;background:transparent;text-align:center;font-size:20px;font-weight:600;height:40px;padding:0}
.lev-box span{font-size:16px;color:var(--mut)}
input.lev-rg{width:100%;padding:0!important;border:0!important;background:transparent!important;height:20px!important;accent-color:var(--acc)}
.lev-quick{display:flex;gap:6px;margin:8px 0 12px}
.lev-quick button{flex:1;height:30px;padding:0;font-size:12.5px}
.pf-mm{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.pf-mm .nc-l{white-space:normal;line-height:1.5}
.pf-seg{margin-bottom:14px}
.pf-seg button{height:36px}
.pf-xdir{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:10px;background:var(--in);border-radius:8px;padding:12px 14px;margin-bottom:14px}
.pf-xdir>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-xdir small{font-size:11.5px}
.pf-risk{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pf-risk li{background:var(--in);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.55;color:var(--mut)}
.pf-risk li b{display:block;color:var(--fg);margin-bottom:2px;font-size:13.5px}
.pf-wbreak{flex-wrap:wrap;row-gap:12px}
@media (max-width:1180px){
  .pf-grid{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"chart order" "book order"}
  .pf-left{flex-direction:row}
  .pf-left>.pane{flex:1;min-width:0}
  .pf .bx-trades .levels{max-height:420px}
}
@media (max-width:760px){
  .pf-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"chart" "order" "book"}
  .pf-left{flex-direction:column}
  .pf .bx-trades .levels{max-height:300px}
  .pf-tools{width:100%;justify-content:space-between}
  .pf-mm{grid-template-columns:minmax(0,1fr)}
  .pf-xdir{grid-template-columns:1fr auto 1fr}
  .pf-xdir>button{grid-column:1 / -1}
}

/* coin logos */
img.coin{background:none;padding:0;object-fit:contain;display:inline-block}
.mk-name{display:inline-flex;align-items:center;gap:6px;min-width:0}
/* spot market switcher (same component as the futures symbol menu) */
.bx-head .sp-sym{height:auto}
.sp-symtxt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.sp-symtxt b{font-size:19px}
.sp-symtxt small{color:var(--mut);font-size:11px;font-weight:400}
.pf-symbtn .coin{width:30px;height:30px}
.sp-sym #sp-mlist{max-height:360px;overflow:auto}
.pf-symbtn .coin{margin-right:6px}
.mk-name small{margin-left:-5px}

/* ===== responsive fixes found in the viewport audit ===== */
/* chart toolbar: one scrollable line instead of wrapping intervals / chart-mode buttons */
.chartbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chartbar::-webkit-scrollbar{display:none}
.chartbar .ivs{flex-wrap:nowrap;flex:none}
@media (max-width:480px){
  /* coin pickers: compact 3-column grid, ticker only */
  .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .chip,.pg .chip{padding:0 8px;gap:6px;min-width:0}
  .chip small{display:none}
  /* call-to-action notices: button drops under the text */
  .notice.cta{flex-wrap:wrap}
  .notice.cta>div{flex:1 1 calc(100% - 40px)}
  .notice.cta>.btn,.notice.cta>button{width:100%;text-align:center;justify-content:center}
}
@media (max-width:760px){.ohlc{white-space:normal;overflow:visible;line-height:1.55;padding-top:6px;padding-bottom:6px}}
.ohlc span{white-space:nowrap}
/* symbol menus (spot + futures): keep "BTCUSDT 무기한" on one line, give the name column the room it needs */
.pf-mdd .row{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,.9fr)}
.mk-name{white-space:nowrap;overflow:hidden}
.mk-name b,.mk-name small{flex:none}
.mk-name small{white-space:nowrap}
.mk-name small.perp-tag{margin-left:2px;font-size:11px}
label.chk{white-space:nowrap}
.toolbar{flex-wrap:wrap;row-gap:8px}
/* security v2: recovery codes grid, admin audit body */
.rc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.rc-grid code{display:block;text-align:center;padding:9px 6px;border-radius:6px;background:var(--bg3,#2b3139);font-size:14px;letter-spacing:.06em;user-select:all;white-space:nowrap}
.audit-body{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){.rc-grid code{font-size:13px}}
@media (max-width:760px){.ohlc{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0}}
/* referral */
.ref-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.ref-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.ref-code{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ref-code b{font-size:28px;letter-spacing:.12em;color:var(--acc,#f0b90b)}
.seg.wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));max-width:520px} /* equal-width cells when the steps wrap (was: flex wrap, 2nd row stretched) */
.seg.wrap button{min-width:64px}
.fld-hint.ok{color:var(--up,#0ecb81)}
.tile .cell-sub{display:block;margin-top:4px;font-size:12px;color:var(--mut)}
.tile b.sm{font-size:15px;white-space:pre-line}
.rev-bars{display:flex;align-items:flex-end;gap:3px;height:140px;padding:8px 0;border-bottom:1px solid var(--bd)}
.rev-bars i{flex:1;min-width:3px;background:var(--rise);border-radius:2px 2px 0 0;opacity:.85}
.rev-bars i.neg{background:var(--fall)}
.rev-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);margin-top:4px}
.chain-st{white-space:nowrap}
a.xlink{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--acc,#f0b90b);text-decoration:none;margin-left:4px}
a.xlink:hover{text-decoration:underline}
@media (max-width:640px){.ref-hero{grid-template-columns:1fr}.ref-hero .qr-col{justify-self:start}.ref-code b{font-size:22px}}
.tile b{word-break:normal;overflow-wrap:anywhere}
.rev-bars i{max-width:36px}
@media (max-width:520px){.referral .stats-row,.admin .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}.referral .tile b,.admin .tile b{font-size:17px}}
/* KYC */
.kyc-form{max-width:640px}
.kyc-pv{display:block;max-width:220px;max-height:140px;margin-top:8px;border-radius:6px;object-fit:contain;background:var(--in)}
.kyc-docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0}
.kyc-doc{margin:0}.kyc-doc img{width:100%;max-height:260px;object-fit:contain;border-radius:6px;background:var(--in)}
.kyc-doc figcaption{font-size:12px;color:var(--mut);margin-top:4px;text-align:center}
.toolbar-r{flex-wrap:wrap;row-gap:8px;min-width:0}
@media (max-width:640px){.toolbar{flex-wrap:wrap;row-gap:10px}.toolbar-r{width:100%;justify-content:flex-start}.toolbar-r input{max-width:none!important;flex:1 1 160px}}
.ptabs a.has-pending{color:var(--warn,#f0b90b);font-weight:600}

/* ===== code-review fixes 10-16: header, menus, modal, wrapping, focus, touch ===== */
/* header: the 320 px guest header (logo + 로그인 + 회원가입 + burger) was ~20 px wider than the screen and a long
   masked e-mail could push the 761–1000 px header past the edge → the brand name truncates first, e-mail is capped */
.brand{flex:0 1 auto;min-width:0}
.brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user{flex:none}
.u-email{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* header menus sit in the sticky header, so the page cannot scroll them into view: keep them inside the viewport */
.top .dd-menu{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
.auth-wrap{min-height:calc(100dvh - 56px)}
@media (max-width:760px){
  #nav{max-height:calc(100vh - 52px);max-height:calc(100dvh - 52px);overflow-y:auto;overscroll-behavior:contain}
  #nav .dd-menu{max-height:none;overflow:visible}
  /* account menu anchored to the viewport: a long e-mail can no longer push it off the left edge */
  .umenu .dd-menu{position:fixed;top:52px;right:8px;left:auto;max-width:calc(100vw - 16px)}
  .auth-wrap{min-height:calc(100dvh - 52px)}
}
/* modal: background scroll lock, safe centring (a tall dialog scrolls instead of losing its top), dvh for mobile toolbars */
html.modal-open,html.modal-open body{overflow:hidden}
.modal{overflow-y:auto;overscroll-behavior:contain}
.modal-box{margin:auto;max-height:90vh;max-height:90dvh;overscroll-behavior:contain}
.modal-box:focus,.modal-box:focus-visible{outline:none}
.x{top:2px;right:2px;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;font-size:22px}
.dlg h3{padding-right:36px}
/* toasts carry no controls: never block taps on the order buttons underneath */
#toasts{pointer-events:none;bottom:max(12px,env(safe-area-inset-bottom,0px))}
/* long unbreakable text (e-mails, hashes, shell commands) inside notices / dialogs / hints */
.notice>div,.est-total{min-width:0}
.dlg,.notice>div,.form-err,.fld-hint,.est-total{overflow-wrap:break-word;overflow-wrap:anywhere}
/* book / trades / market rows: a wide number is clipped instead of spilling into the next column */
.bx .row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* keyboard focus: fields keep their border highlight; everything else gets a visible ring (checkbox / range had lost
   theirs to "input:focus{outline:none}"), drawn inset where a scrolling strip would clip it */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible,input[type=range]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.chartbar :focus-visible,.tabs :focus-visible,.ptabs :focus-visible,.seg :focus-visible,.bookmode :focus-visible,.dd-menu :focus-visible,#nav :focus-visible{outline-offset:-2px}
button.primary:focus-visible,.btn.primary:focus-visible,.hbtn.primary:focus-visible{outline-color:var(--fg)}
.lev-box:focus-within{border-color:var(--acc)}
/* admin: 16 tabs do not fit 1,200 px and the strip hides its scrollbar → wrap on desktop, phones keep the swipe row */
@media (min-width:761px){.admin .ptabs{flex-wrap:wrap;overflow:visible;column-gap:22px;row-gap:4px}}
/* touch screens */
@media (hover:none) and (pointer:coarse){
  /* iOS zooms the page into any focused field under 16 px (the order-form fields were 12 px) */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.otp):not(.lev-num),select,textarea{font-size:16px!important}
  /* hit areas: 44 px where the layout allows, never under 32 px */
  .nav-toggle{width:44px;height:44px}
  .hbtn{min-height:36px}
  .dd-menu a,.dd-menu .dd-item{padding-top:12px;padding-bottom:12px}
  .ivs button,.bookmode button,.tabs button{min-height:34px}
  .pct .ticks button{min-height:32px}
  .pct input[type=range]{height:28px}
  .pills button,.pg .pills button{height:36px}
  button.sm,.btn.sm,.pg button.sm{min-height:34px}
  .pf-modes button{height:40px}
  .lev-quick button{height:36px}
  .pf-opts select,.pf-tools select,.pf-cin{min-height:36px}
  label.chk{min-height:32px}
  .bx .row.mk,.pf-mdd .row.mk{padding-top:9px;padding-bottom:9px}
  .copy,.linkbtn,.inp .inbtn{position:relative}
  .copy:not(.loading)::after,.linkbtn:not(.loading)::after{content:"";position:absolute;inset:-8px}
  .inp .inbtn:not(.loading)::after{content:"";position:absolute;inset:-9px 0}
}
/* truncated hash / address cells: the text shrinks (ellipsis) instead of sliding under the copy button */
.hash>span{min-width:0}
.hash .copy{flex:none}
/* tables that scroll sideways show an edge shadow while more columns are hidden (phones hide scrollbars) */
.tbl{background:linear-gradient(to right,var(--card) 30%,rgba(22,26,30,0)) left center/28px 100% no-repeat local,
  linear-gradient(to left,var(--card) 30%,rgba(22,26,30,0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.55),rgba(0,0,0,0)) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.55),rgba(0,0,0,0)) right center/12px 100% no-repeat scroll}
/* focused fields: a 2 px ring instead of only a 1 px border colour change */
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus,.inp:focus-within,label.fx:focus-within,.lev-box:focus-within{box-shadow:0 0 0 1px var(--acc)}
.inp input:focus,label.fx input:focus,.lev-box input:focus{box-shadow:none}
/* contrast on tinted (yellow-soft) backgrounds and for red text on the field colour: AA 4.5:1 */
.notice p,.netcard.on small,.netcard.on .nc-l,.chip.on small{color:#9aa3af}
button.ghost.danger,.pg button.ghost.danger,.modal button.ghost.danger{color:var(--dn-t)}
@media (max-width:760px){.toolbar-r select{flex:1 1 140px;min-width:120px}}
@media (hover:none) and (pointer:coarse){
  .brand{min-height:44px}
  .bookmode button{min-width:34px}
  a.xlink{position:relative}
  a.xlink::after{content:"";position:absolute;inset:-10px -6px}
}
/* spot bottom bar: 4 tabs + "전체 취소" were 11 px wider than a 320 px phone → the tabs scroll, the button wraps */
.bx-bottom>.ph{flex-wrap:wrap;row-gap:4px}
#btabs{overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
#btabs::-webkit-scrollbar{display:none}
#btabs button{flex:none}
/* ≤360 px phones: room for the 44 px menu button without cutting the brand name */
@media (max-width:360px){.top{gap:6px;padding:0 10px}.user{gap:6px}.hbtn{padding:0 8px}}
@media (hover:none) and (pointer:coarse){
  .ivs button{min-width:34px}
  div.acts a{display:inline-flex;align-items:center;min-height:32px;padding:0 6px}
  .pf-psym a{position:relative}
  .pf-psym a::after{content:"";position:absolute;inset:-8px -4px}
}
/* phone OHLC line: as flex items the spans lose their trailing spaces ("시82,455.02고…") → a small gap between items */
@media (max-width:760px){.ohlc{column-gap:4px}}

/* ===== UI audit fixes 10-16 (F) — ops/ui-audit/FINDINGS.md F03 F06 F09–F15 F20–F22 (F06 = the --dn-t / --info-t text tokens above) ===== */
/* F13 long dialogs: the form scrolls inside the box and the button row stays pinned to its bottom (the whole box used to scroll,
   so on a 320 px phone and in the KYC review the confirm button sat below the fold). 4 px side padding keeps focus rings unclipped */
.modal-box{display:flex;flex-direction:column}
#modal-body{display:flex;flex-direction:column;min-height:0}
.dlg{min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px;scroll-padding:48px 0 64px} /* a field reached by Tab / 'next' stops clear of the pinned title and buttons */
.dlg-acts{position:sticky;bottom:0;z-index:1;background:var(--card);margin:0 -4px;padding:8px 4px 4px}
/* the title is pinned too, so scrolled text passes under it instead of under the close button (which now stays put) */
.dlg>h3:first-child{position:sticky;top:0;z-index:1;background:var(--card);margin:0 -4px 8px;padding:0 40px 8px 4px}
.x{z-index:2;background:var(--card);border-radius:8px}
.dlg .book-pick{max-height:none}
@media (max-width:360px){.pf-risk{gap:8px}.pf-risk li{padding:8px 10px;font-size:12.5px;line-height:1.5}}
/* F12 ≤400 px: the chart toolbar fits one line — '시간' label hidden, the intervals share what the chart/depth switch leaves
   (the switch sat 59–73 px past the right edge behind a hidden scrollbar) */
@media (max-width:400px){
  .chartbar{gap:6px;padding-left:8px;padding-right:8px}
  .chartbar .ivs>span{display:none}
  #ivs{flex:1 1 auto;min-width:0;justify-content:space-between;gap:0} /* 7 intervals ≥ 32 px wide at 320 px */
  #ivs button{flex:1 1 0;min-width:0;padding-left:0;padding-right:0}
  #chartmode button{padding-left:6px;padding-right:6px}
}
/* F14 user tables as one labelled card per row where their action columns (취소 · TP/SL · 입금/출금) would scroll out of sight:
   .tbl[data-cards] ≤ 800 px, .tbl[data-cards=wide] (futures bottom) ≤ 1180 px. app.js copies each column header into the cell's
   data-th; the first cell (time / coin / symbol / device) is the card title. Cells share a line (2 / 4 / 6 per line by width) and a
   value too long for its share (a big balance) takes a longer slot instead of breaking mid-number: the flex minimum is the
   number's own width, capped at the card width so an unbroken string still wraps (break-word) */
@media (max-width:800px){
  .tbl[data-cards]{overflow:visible;background:none}
  .tbl[data-cards]>table,.tbl[data-cards]>table>tbody{display:block}
  .tbl[data-cards]>table>thead{display:none}
  .tbl[data-cards]>table>tbody>tr{display:flex;flex-wrap:wrap;gap:8px 14px;padding:12px 0;border-bottom:1px solid var(--bd)}
  .tbl[data-cards]>table>tbody>tr:last-child{border-bottom:0}
  .tbl[data-cards]>table>tbody>tr>td{display:block;flex:1 1 calc(25% - 10.5px);max-width:100%;padding:0;border:0;background:none;text-align:left;white-space:normal;overflow-wrap:break-word}
  .tbl[data-cards]>table>tbody>tr>td[data-wide]{flex-basis:calc(50% - 7px)}
  .tbl[data-cards]>table>tbody>tr>td[data-th]::before{content:attr(data-th);display:block;margin-bottom:2px;font-size:11px;font-weight:400;color:var(--mut)}
  .tbl[data-cards]>table>tbody>tr>td:first-child{flex-basis:100%}
  .tbl[data-cards]>table>tbody>tr>td:first-child::before{content:none}
  .tbl[data-cards]>table>tbody>tr>td:not([data-th]):not([data-wide]):not(:first-child){flex:0 0 auto;margin-left:auto;align-self:flex-end} /* a lone row action: right end */
  .tbl[data-cards]>table>tbody>tr>td:empty,.tbl[data-cards]>table>tbody>tr>td[data-blank]{display:none}
  .tbl[data-cards]>table>tbody>tr>td.acts{display:flex;justify-content:flex-end}
  .tbl[data-cards]>table>tbody>tr>td.center,.tbl[data-cards]>table>tbody>tr>td.empty{text-align:center}
}
@media (max-width:640px){
  .tbl[data-cards]>table>tbody>tr>td{flex-basis:calc(50% - 7px)}
  .tbl[data-cards]>table>tbody>tr>td[data-wide]{flex-basis:100%}
}
@media (min-width:801px) and (max-width:1180px){
  .tbl[data-cards=wide]{overflow:visible;background:none}
  .tbl[data-cards=wide]>table,.tbl[data-cards=wide]>table>tbody{display:block}
  .tbl[data-cards=wide]>table>thead{display:none}
  .tbl[data-cards=wide]>table>tbody>tr{display:flex;flex-wrap:wrap;gap:8px 14px;padding:12px 0;border-bottom:1px solid var(--bd)}
  .tbl[data-cards=wide]>table>tbody>tr:last-child{border-bottom:0}
  .tbl[data-cards=wide]>table>tbody>tr>td{display:block;flex:1 1 calc(16.66% - 11.7px);max-width:100%;padding:0;border:0;background:none;text-align:left;white-space:normal;overflow-wrap:break-word}
  .tbl[data-cards=wide]>table>tbody>tr>td[data-wide]{flex-basis:calc(33.33% - 9.4px)}
  .tbl[data-cards=wide]>table>tbody>tr>td[data-th]::before{content:attr(data-th);display:block;margin-bottom:2px;font-size:11px;font-weight:400;color:var(--mut)}
  .tbl[data-cards=wide]>table>tbody>tr>td:first-child{flex-basis:100%}
  .tbl[data-cards=wide]>table>tbody>tr>td:first-child::before{content:none}
  .tbl[data-cards=wide]>table>tbody>tr>td:not([data-th]):not([data-wide]):not(:first-child){flex:0 0 auto;margin-left:auto;align-self:flex-end}
  .tbl[data-cards=wide]>table>tbody>tr>td:empty,.tbl[data-cards=wide]>table>tbody>tr>td[data-blank]{display:none}
  .tbl[data-cards=wide]>table>tbody>tr>td.acts{display:flex;justify-content:flex-end}
  .tbl[data-cards=wide]>table>tbody>tr>td.center,.tbl[data-cards=wide]>table>tbody>tr>td.empty{text-align:center}
}
/* F15 ≤480 px security rows: status and button drop under the description, which gets the full width (was ~110 px, 6–7 lines) */
@media (max-width:480px){
  .sec-row{row-gap:10px}
  .sec-ic{align-self:start}
  .sec-main{grid-column:2 / -1}
  .sec-act{grid-column:3;grid-row:2}
}
/* F10 ≤480 px withdrawal address: the address-book button moves up to the label line so the field gets the full width, and the
   typed / pasted address is echoed in full under it (a 34-character address never fits a phone-width field at 16 px) */
.addr-echo{display:none}
@media (max-width:480px){
  .fld[data-book]{position:relative}
  .fld[data-book] .inp .inbtn{position:absolute;top:-4px;right:0;height:26px;padding:0 2px;border-left:0}
  .addr-echo{display:block;overflow-wrap:anywhere}
}
/* F11 '주소 추가': the network select gets two thirds of the row ("ERC20 · Ethereum (ERC20)" was clipped) */
@media (min-width:481px){.row2[data-split]{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
/* F03 symbol menus narrower than their 360 px design width: every row is a perpetual, the repeated '무기한' tag goes */
@media (max-width:383px){.mk-name small.perp-tag{display:none}}
/* F20 tablets (761–1180 px): side-by-side panes end level — the market list fills the height of the trades pane (spot) and the
   futures wallet pane fills the order column (they left ~250 / ~480 px of bare page under them) */
@media (min-width:761px) and (max-width:1180px){
  .bx-mkts{max-height:none;min-height:360px}
  .bx-mkts .levels{flex:1 1 0;min-height:0}
  .pf-right>.pf-acct{flex:1 1 auto}
}
/* F22 KYC photo fields: an app-styled picker ('사진 선택' + file name) under a transparent native file input (WebKit showed an
   English 'Choose File' stuck to the top of a 42 px box); the input stays on top, so clicks, taps and the keyboard still reach it */
.file-pick{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.pg .file-pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.file-pick .btn{flex:none}
.file-pick:hover .btn{background:var(--hover)}
.file-pick input:focus-visible~.btn{outline:2px solid var(--acc);outline-offset:2px}
.file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
/* F09 touch screens: hit areas the audit still found under 44 px (dense trading rows / tabs keep their size on purpose) */
@media (hover:none) and (pointer:coarse){
  .ptabs a,.ptabs button{min-height:44px;display:flex;align-items:flex-end}
  .admin .ptabs a{min-width:44px;justify-content:center}
  .pf-opts select,.pf-tools select{height:36px} /* min-height does not grow a <select> */
  input.lev-rg{height:44px!important}
  td div.acts a{min-height:44px;min-width:44px;justify-content:center}
  .auth-links>a{display:inline-flex;align-items:center;min-height:44px}
  .auth-links>.linkbtn{min-height:44px}
  a.auth-brand,td.center>a,.card-h>a.small{position:relative}
  a.auth-brand::after{content:"";position:absolute;inset:-9px 0}
  td.center>a::after{content:"";position:absolute;inset:-15px -8px}
  .card-h>a.small::after{content:"";position:absolute;inset:-14px -6px}
  .pf-order .avail{min-height:28px} /* room for a 44 px '⇄' target between the order-type tabs and the price field */
  #pf-xfer2::after{inset:-13px -12px -11px -20px}
  .file-pick .btn{height:44px}
}

/* ===== launch screens 10-16 (작업 I): status banner, footer, idle warning, consents, closure, history, support, fees, admin operations ===== */
/* public status banner under the header (GET /status + WS): warnings first, the operator's notices can be closed for the session */
.sysbar{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px 0 16px;background:#1b1f24;border-bottom:1px solid var(--bd);font-size:13px;line-height:34px;overflow:hidden;white-space:nowrap}
.sysbar.warn{background:#2a2412}
.sys-lbl{flex:none;height:20px;line-height:20px;padding:0 8px;border-radius:3px;background:var(--acc);color:#111;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.sysbar:not(.warn) .sys-lbl{background:var(--info);color:#0b1220}
.sys-in{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.sys-track{display:inline-flex;will-change:transform;animation:sys-ticker 30s linear infinite}
.sysbar:hover .sys-track,.sysbar:focus-within .sys-track{animation-play-state:paused}
.sys-row{display:inline-flex;align-items:center;flex:none;padding-right:48px}
.sys-item{display:inline-flex;align-items:center;gap:6px;margin-right:40px}
.sys-item:last-child{margin-right:0}
.sys-item .ic{color:var(--info)}
.sys-item.warn{font-weight:500}
.sys-item.warn .ic{color:var(--acc)}
@keyframes sys-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sys-track{animation:none}.sys-row+.sys-row{display:none}.sys-in{text-overflow:ellipsis}}
.sys-acts{display:flex;align-items:center;gap:6px;flex:none}
.sys-x{background:none!important;border:0!important;color:var(--mut);font-size:20px;line-height:1;width:32px;height:32px;padding:0!important;display:inline-flex;align-items:center;justify-content:center}
.sys-x:hover{color:var(--fg)}
@media (max-width:600px){.sysbar{height:30px;line-height:30px;font-size:12px;padding:0 6px 0 10px;gap:8px}.sys-lbl{font-size:11px;padding:0 6px}}
/* header badge (spot / perp state) and the reason line above the order forms */
.tk-st{display:flex;align-items:center}
.tk-st:empty{display:none}
.ostate{display:flex;gap:8px;align-items:flex-start;margin:10px 12px 0;padding:8px 10px;border-radius:6px;background:var(--acc-soft);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.ostate .ic{color:var(--acc);margin-top:1px}
.ostate.bad{background:var(--dn-soft)}
.ostate.bad .ic{color:var(--dn-t)}
.pf-order .ostate{margin:0 0 10px}
.risk-line{margin:0;padding:0 12px 12px;font-size:11.5px;line-height:1.5;color:var(--mut)}
.pf-order .risk-line{padding:8px 0 2px}
.badge.xs{height:18px;padding:0 5px;font-size:10.5px;gap:2px}
.mk-cell{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0;overflow:hidden}
.mk-cell .badge{flex:none}
/* footer (operator information from GET /site) */
.foot{border-top:1px solid var(--bd);background:var(--card)}
.foot-in{max-width:1200px;margin:0 auto;padding:20px 24px 28px;font-size:12.5px;line-height:1.7;color:var(--mut)}
.foot-links{display:flex;flex-wrap:wrap;gap:2px 18px;margin-bottom:8px}
.foot-links a{color:var(--fg);font-weight:500}
.foot-links a:hover{color:var(--acc)}
.foot-line{margin:0 0 2px;display:flex;flex-wrap:wrap;gap:0 14px}
.foot-line b{color:var(--fg);font-weight:500;margin-right:2px}
.foot-note{margin:10px 0 4px;overflow-wrap:anywhere}
.foot-copy{margin:0}
/* idle-session warning: a pill above everything (also above an open dialog) */
.idlebar{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:calc(100vw - 24px);background:#21262d;border:1px solid var(--acc);border-radius:10px;padding:8px 10px 8px 14px;box-shadow:0 10px 28px rgba(0,0,0,.55);font-size:13.5px}
.idlebar>.ic{color:var(--acc)}
.idle-txt{min-width:0;overflow-wrap:anywhere}
.idlebar button{flex:none;height:36px;padding:0 16px}
/* consents: sign-up, re-consent dialog, KYC */
.consents{border:1px solid var(--bd);border-radius:8px;padding:8px 14px 12px;margin:0 0 16px;min-width:0}
.consents legend{padding:0 6px;margin:0}
.consents label.chk{white-space:normal;font-size:13px;line-height:1.45;align-items:flex-start;padding:5px 0}
.consents label.chk input{margin-top:2px;flex:none}
.cs-all{border-bottom:1px solid var(--bd);padding-bottom:9px!important;margin-bottom:4px!important}
.cs-row{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.cs-row>label.chk{flex:1 1 200px;min-width:0}
.cs-row>a{font-size:12.5px;flex:none}
.cs-req{font-style:normal;color:var(--acc)!important;font-weight:600}
.cs-opt{font-style:normal;color:var(--mut)!important}
.cs-meta{font-size:12px;color:var(--mut);padding-left:24px;flex:1 1 100%}
.kyc-form .consents{margin-top:4px}
/* account: display settings, closure steps */
.ud-seg{max-width:620px}
.ud-seg button{white-space:normal;height:auto!important;min-height:40px;padding:8px 10px!important;line-height:1.35}
.close-card .card-h{margin-bottom:6px}
.close-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;margin-top:18px}
.close-step-b h4{margin:3px 0 10px;font-size:14.5px;font-weight:600}
.close-step-b .notice{margin-bottom:0}
.close-blockers{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.close-blockers li{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;background:var(--bg);border-radius:8px;padding:10px 12px;font-size:13px;overflow-wrap:anywhere}
.close-form{max-width:440px}
.close-form label.chk{white-space:normal;margin:4px 0 14px}
/* deposit progress */
.conf-bar{display:block;width:80px;height:4px;margin-top:5px;border-radius:2px;background:var(--in);overflow:hidden}
.conf-bar i{display:block;height:100%;background:var(--acc)}
/* history */
.hist-tools input[type=date]{width:auto;min-width:140px;height:36px}
.hist-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.hist-foot:has(#hist-more[hidden]):has(#hist-count:empty){display:none}
/* support thread */
.support-grid{align-items:start}
.support-form .form-acts{margin-top:4px}
.thread{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.msg{background:var(--bg);border-radius:8px;padding:10px 12px;min-width:0}
.msg.admin{background:var(--info-soft)}
.msg-h{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin-bottom:4px;font-size:13px}
.msg-b{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.6}
.back-link{display:inline-flex;align-items:center;margin-bottom:6px}
/* admin operations */
.flag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin-bottom:16px}
.pg .flag-grid>.card{margin:0}
.flag-card.engaged{box-shadow:inset 0 0 0 1px var(--dn)}
.flag-card .kv{margin-top:6px}
.flag-card .form-acts{flex-wrap:wrap;justify-content:flex-start;margin-top:14px}
.flag-card .form-acts button{white-space:normal;height:auto;min-height:36px;padding:6px 12px;line-height:1.35;text-align:left}
td.wrap-cell,table td.wrap-cell{white-space:normal;min-width:160px;max-width:360px;overflow-wrap:anywhere}
.sys-more .card-h{margin-bottom:0}
.sys-more-b{margin-top:14px}
/* dialogs: a long confirmation next to a checkbox wraps inside the dialog (label.chk is nowrap elsewhere: 41 px sideways scroll at 390 px) */
.dlg label.chk{white-space:normal}
/* history kinds: 7 tabs wrap instead of hiding behind a sideways swipe */
#hist-tabs{flex-wrap:wrap;overflow:visible;column-gap:20px;row-gap:2px}
.dlg-sub{font-size:13.5px;margin:14px 0 6px;color:var(--mut);font-weight:500}
.mail-test{margin:6px 0 2px;width:auto}
.mail-test input{flex:1 1 220px;max-width:360px}
.access-filters{margin-bottom:12px;width:auto}
.access-filters input{min-width:150px;height:36px}
.ticket-st{margin-top:12px;width:auto}
@media (max-width:760px){
  .sysbar{padding:8px 12px}
  .foot-in{padding:18px 16px 24px}
  .access-filters input,.mail-test input{flex:1 1 140px;min-width:0}
  .hist-tools input[type=date]{flex:1 1 130px;min-width:0}
}
/* touch screens: the new controls get 44 px hit areas like the rest of the app (F09) */
@media (hover:none) and (pointer:coarse){
  .sys-x{width:44px;height:44px}
  .sys-acts .linkbtn{display:inline-flex;align-items:center;min-height:44px}
  .foot-links a{display:inline-flex;align-items:center;min-height:44px}
  .idlebar button{min-height:44px}
  .consents label.chk{min-height:44px;align-items:center}
  .consents label.chk input{margin-top:0}
  .cs-row>a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  .close-blockers .btn,.close-form label.chk,.hist-foot button,.flag-card .form-acts button{min-height:44px}
  .back-link{min-height:44px}
  .ud-seg button{min-height:44px}
  .hist-tools input[type=date],.access-filters input{height:44px}
}
/* static legal pages (web/legal/*.html — no scripts; the same stylesheet) */
.legal-top{position:static;height:auto;min-height:56px;flex-wrap:wrap;row-gap:4px;padding:8px 20px}
.legal-back{font-size:14px;font-weight:600;color:var(--fg)}
.legal-nav{display:flex;flex-wrap:wrap;gap:2px 16px;margin-left:auto;font-size:13.5px}
.legal-nav a{color:var(--fg)}
.legal-nav a[aria-current=page]{color:var(--acc)}
main.legal-page{max-width:820px;margin:0 auto;padding:32px 24px 56px}
.legal-page h1{font-size:26px;font-weight:600;margin:18px 0 6px}
.legal-page h2{font-size:17px;font-weight:600;margin:28px 0 8px}
.legal-page p{color:#c3c8cf;line-height:1.8;margin:0 0 8px;overflow-wrap:anywhere}
.legal-page .legal-meta{color:var(--mut);font-size:13px}
.legal-draft{background:var(--acc-soft);border:1px solid rgba(240,185,11,.35);border-radius:8px;padding:10px 14px;color:var(--fg)!important;font-weight:500}
@media (max-width:760px){main.legal-page{padding:20px 16px 40px}.legal-page h1{font-size:22px}.legal-top{padding:8px 12px}.legal-nav{margin-left:0;width:100%}}
@media (hover:none) and (pointer:coarse){.legal-nav a,.legal-top .brand{display:inline-flex;align-items:center;min-height:44px}}
/* touch: toolbars of the history page and the admin tabs (filters, search, refresh / export buttons) reach 44 px — a <select> only grows with height */
@media (hover:none) and (pointer:coarse){
  .hist-tools select,.hist-tools input,.hist-tools button,.admin .toolbar-r>select,.admin .toolbar-r>input:not([type=checkbox]),.admin .toolbar-r>button,
  .admin .toolbar-r>form>input,.admin .toolbar-r>form>select,.admin .toolbar-r>form>button,.ticket-st select,.ticket-st button{height:44px}
  .admin .card-h>button,.admin .card-h>a.btn,.admin .card-h .acts>button,.admin .card-h .acts>a.btn{min-height:44px}
}
/* links that must not break across lines: a wrapped inline link's centre falls on the paragraph (the audit reads it as covered) */
.risk-line a,.cs-meta a{white-space:nowrap}
@media (hover:none) and (pointer:coarse){
  td div.acts a.btn{min-height:44px}
  .foot-links a,.cs-row>a,#hist-tabs a,.admin .card-h .acts>button{min-width:44px;justify-content:center}
  .close-card .card-h button,.close-step-b .form-acts button,.close-form>button,.dlg label.chk,.support-form .form-acts button,
  .admin form.card .form-acts button,.admin .card>.form-acts>button{min-height:44px}
  .admin td a.td-link{display:inline-flex;align-items:center;min-height:44px} /* links inside admin table cells (member, ticket, document) */
  .support .card>.form-acts>button,.support td.wrap-cell>a{min-height:44px} .support td.wrap-cell>a{display:inline-flex;align-items:center} /* 내 문의: 더 보기, 제목 */
}
/* 내 문의 (half-width card): a long subject wraps inside its cell (an inline-block link: a wrapped inline link's centre would fall on
   the cell), and below 1200 px the form and the list stack — six columns do not fit half of a 1024 px page */
.support-grid td.wrap-cell{min-width:120px}
.support td.wrap-cell>a{display:inline-block}
@media (max-width:1199px){.support-grid{grid-template-columns:minmax(0,1fr)}}
/* W2 10-20 chart toolbar '전체' (the daily chart from the first listed day): set apart from the intervals by a thin rule */
.ivs .iv-all{position:relative;margin-left:5px}
.ivs .iv-all::before{content:'';position:absolute;left:-3px;top:25%;bottom:25%;border-left:1px solid var(--bd)}
@media (max-width:400px){#ivs .iv-all{flex:1.3 1 0;margin-left:3px}}
/* mobile: no double-tap zoom (pinch zoom stays for accessibility); also removes the ~300 ms tap delay on buttons */
html,body{touch-action:manipulation}
a,button,input,select,textarea,label,summary,[role=button],[tabindex]{touch-action:manipulation}