/*
 * vt-m-order.css - MTS mobile redesign 2026-11 (owner: ORDER-MAIN). Loaded only when vtTheme (mobileFrame/header.jsp).
 * Every rule: inside @media (max-width: 991px) and prefixed html.vt  -> WTS (>=992px) and vtTheme=false are untouched.
 *
 * Trading page order3 (mobile/order.jsp) laid out like the reference trading page (navbar / symbol+tab bar / info header /
 * tab content / bottom order bar). Scope: body.vtm-order (set by order.jsp before the first paint and kept by vt-m-order.js
 * only while (max-width: 991px) matches); tab state: body.vtm-tab-hoga | -position | -trend | -chart | -info.
 * Nothing is re-nested: the existing blocks are shown/hidden/re-placed with CSS (grid areas), new markup is .vtm-only.
 * Ladder (300 rows x 11 cells, 2 updates/s): no transitions, shadows, filters, :has() or pseudo-elements on its cells;
 * empty .listtxt keeps 0x0 (drag/drop target logic) - no width/height/padding/flex on .listtxt. Rows: content-visibility:auto
 * (only the rows in view are rendered).
 * JS state classes are only read here: red red2 blue blue2 medo mesu yellow center pink on off chartemode
 * w--redirected-checked.  Row height / visible row count come from vt-m-order.js (--vtm-row / --vtm-rows on <body>);
 * depth bar length --vtm-d on the 10 depth 잔량 cells (vt-m-order.js); value size class vtm-olong (info header).
 */
@media (max-width: 991px) {

  /* ---------- 0. new markup: hidden unless the page runs the mobile trading layout ---------- */
  html.vt .vtm-ohead,
  html.vt .vtm-osymlist,
  html.vt .vtm-ocenter,
  html.vt .vtm-olhd,
  html.vt .vtm-obb5 {
    display: none;
  }

  /* ---------- 1. page frame: white page under the fixed navbar (50) + tab bar (50) + info header (49) ---------- */
  html.vt body.vtm-order {
    background-color: #FFFFFF;
  }
  html.vt body.vtm-order .section {
    min-height: 0;
    padding-top: 149px;
    /* 2026-11-07: the trading bar is fixed at the bottom (section 11); this padding is the
       clearance so positions/orders/lists never hide behind it and the end of the page is
       fully visible above the bar. env() needs viewport-fit=cover (mobileFrame/header.jsp). */
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    background-color: #FFFFFF;
  }
  html.vt body.vtm-order .section > .content {
    grid-row-gap: 0;
    grid-column-gap: 0;
    padding: 0 0 2px;
  }
  html.vt body.vtm-order .chart_box {
    grid-row-gap: 0;
    grid-column-gap: 0;
    padding-top: 0;
  }
  html.vt body.vtm-order .q_top {                       /* 국내/해외, symbol dropdown, 입금.., 비밀번호/오버신청, 주문/차트 */
    display: none;
  }
  html.vt body.vtm-order .q_content2 {                  /* was absolute (top 134px / 35vw) */
    position: static;
    top: auto;
  }
  html.vt body.vtm-order .q_content2 .c_block1,
  html.vt body.vtm-order .q_content2 .form-block,
  html.vt body.vtm-order #chartOrder .c_block2,
  html.vt body.vtm-order #chartOrder .form-block {
    margin: 0;
  }

  /* ---------- 2. fixed head: symbol + tabs (50) and the info header (49) ---------- */
  html.vt body.vtm-order .vtm-ohead {
    display: block;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 80;
  }
  html.vt body.vtm-order .vtm-otabbar {
    display: flex;
    height: 50px;
    background-color: #334D6E;
  }
  html.vt body.vtm-order .vtm-osym {
    display: flex;
    flex: 0 0 93px;
    align-items: center;
    min-width: 0;
    padding-left: 5px;
    color: #E8ECF1;
    font-size: 13px;
    font-weight: 600;
    line-height: 50px;
    text-decoration: none;
    white-space: nowrap;
  }
  html.vt body.vtm-order .vtm-osym-code {
    overflow: hidden;
    text-overflow: clip;
  }
  html.vt body.vtm-order .vtm-osym-ico {
    flex: none;
    margin-left: 4px;
    color: #FFFFFF;
    border-radius: 3px;
  }
  html.vt body.vtm-order .vtm-osym[aria-expanded="true"] .vtm-osym-ico {
    outline: 1px solid #FFFFFF;
    outline-offset: 1px;
  }
  html.vt body.vtm-order .vtm-otabs {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }
  html.vt body.vtm-order .vtm-otab {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    color: #C2CDD7;
    font-size: 14px;
    font-weight: 600;
    line-height: 50px;
    text-decoration: none;
    white-space: nowrap;
  }
  html.vt body.vtm-order .vtm-otab.on {
    background-color: #233D58;
    color: #FFFFFF;
  }
  html.vt body.vtm-order .vtm-otab-ico {
    flex: none;
    color: #FFFFFF;
  }
  html.vt body.vtm-order .vtm-oinfo {
    display: flex;
    justify-content: center;
    height: 49px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
  }
  html.vt body.vtm-order .vtm-oinfo-c {
    flex: 0 0 112px;
    padding-top: 0;
    color: #333333;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
  }
  html.vt body.vtm-order .vtm-oinfo-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.vt body.vtm-order .vtm-oinfo-c .up { color: #F44336; }
  html.vt body.vtm-order .vtm-oinfo-c .dn { color: #2196F3; }
  html.vt body.vtm-order .vtm-oinfo-rate.up { color: #FE5C5C; }
  html.vt body.vtm-order .vtm-oinfo-side {
    flex: 1 1 0;
    min-width: 0;
    max-width: 200px;                                    /* tablets: keep the values next to the centre column */
    padding: 0 6px 0 8px;
    font-size: 12px;
    line-height: 16px;
  }
  html.vt body.vtm-order .vtm-oiv {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
  }
  html.vt body.vtm-order .vtm-oil {                      /* short labels (평가금 / 실시간 ...): never shrink, never cut */
    flex: none;
    margin-right: 4px;
    color: #888888;
    font-weight: 500;
  }
  html.vt body.vtm-order .vtm-oivv {                     /* values: never cut either (sizes below keep 10-digit amounts in) */
    flex: none;
    color: #333333;
    font-weight: 400;
    text-align: right;
  }
  html.vt body.vtm-order .vtm-oivv.vtm-olong {           /* 13+ characters, e.g. 1,234,567,890 (class from vt-m-order.js) */
    font-size: 11px;
  }
  html.vt body.vtm-order .vtm-oivv.red { color: #F44336; }
  html.vt body.vtm-order .vtm-oivv.blue { color: #2196F3; }
  @media (max-width: 389px) {                            /* 360 / 375: narrower centre, 11px labels and values */
    html.vt body.vtm-order .vtm-oinfo-c {
      flex-basis: 96px;
    }
    html.vt body.vtm-order .vtm-oinfo-side {
      padding: 0 4px 0 6px;
      font-size: 11px;
    }
  }
  @media (max-width: 340px) {
    html.vt body.vtm-order .vtm-oinfo-c {
      flex-basis: 84px;
    }
    html.vt body.vtm-order .vtm-oinfo-side {
      padding: 0 3px 0 4px;
    }
  }

  /* ---------- 3. symbol list (magnifier): full width under the tab bar ---------- */
  html.vt body.vtm-order .vtm-osymlist {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #FFFFFF;
    color: #333333;
  }
  html.vt body.vtm-order .vtm-osymlist::-webkit-scrollbar { width: 4px; }
  html.vt body.vtm-order .vtm-osymlist::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #979797; }
  html.vt body.vtm-order .vtm-osymlist::-webkit-scrollbar-track { background-color: #D2D2D2; }
  html.vt body.vtm-order .vtm-osl-head {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 10px 0 12px;
    border-bottom: 1px solid #DEDEDE;
    background-color: #FFFFFF;
    font-size: 13px;
    color: #333333;
  }
  html.vt body.vtm-order .vtm-osl-c1 { flex: 0 0 36%; }
  html.vt body.vtm-order .vtm-osl-c2 { flex: 1 1 auto; text-align: center; }
  html.vt body.vtm-order .vtm-osl-c3 { flex: 0 0 24%; text-align: right; }
  html.vt body.vtm-order .vtm-osl-row {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0 10px 0 12px;
    border-bottom: 1px solid #DEDEDE;
    cursor: pointer;
  }
  html.vt body.vtm-order .vtm-osl-row.on {
    background-color: #F5F5F5;
  }
  html.vt body.vtm-order .vtm-osl-row .vtm-osl-c1 {
    min-width: 0;
  }
  html.vt body.vtm-order .vtm-osl-code {
    display: block;
    color: #333333;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    white-space: nowrap;
  }
  html.vt body.vtm-order .vtm-osl-name {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: #666666;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html.vt body.vtm-order .vtm-osl-price {
    font-size: 20px;
    white-space: nowrap;
  }
  html.vt body.vtm-order .vtm-osl-rate {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
  }
  html.vt body.vtm-order .vtm-osl-vol {
    display: block;
    min-height: 18px;
    margin-top: 10px;
    color: #666666;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
  }
  html.vt body.vtm-order .vtm-osymlist .up { color: #F44336; }
  html.vt body.vtm-order .vtm-osymlist .vtm-osl-rate.up { color: #FE5C5C; }
  html.vt body.vtm-order .vtm-osymlist .dn { color: #2196F3; }
  html.vt body.vtm-order .vtm-osymlist .vtm-osl-price.stale { color: #333333; }   /* not streamed on this page: last known, no direction */

  /* ---------- 4. order panel (.chart_block) as a grid: quick bar rows, ladder, positions; per tab ---------- */
  html.vt body.vtm-order .q_content2 .chart_block {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "qty qty qty" "fix ctr mkt" "lad lad lad" "list list list" "tbl tbl tbl";
    grid-row-gap: 0;
    grid-column-gap: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: #FFFFFF;
  }
  html.vt body.vtm-order .q_content2 .chart_block > .c_info_block,      /* values -> info header */
  html.vt body.vtm-order .q_content2 .chart_block > .chart_tradebtn_area:not(.mo),
  html.vt body.vtm-order .q_content2 .c_chart > .c_chart_bottom2 {     /* cancel row -> 정정/취소 sheet */
    display: none;
  }
  html.vt body.vtm-order .q_content2 .chart_block > .c_table { grid-area: tbl; }
  html.vt body.vtm-order .q_content2 .chart_block > .c_table + .chart_area { grid-area: fix; }
  html.vt body.vtm-order .q_content2 .chart_block > .chart_area ~ .chart_area { grid-area: qty; }
  html.vt body.vtm-order .q_content2 .chart_block > .vtm-ocenter { grid-area: ctr; }
  html.vt body.vtm-order .q_content2 .chart_block > .chart_tradebtn_area.mo { grid-area: mkt; }
  html.vt body.vtm-order .q_content2 .chart_block > .c_chart { grid-area: lad; }
  html.vt body.vtm-order .q_content2 .chart_block > .c_chartlist { grid-area: list; }

  html.vt body.vtm-order .chart_info {                  /* was margin-top 950px / 268vw / 300vw under the absolute panel */
    margin-top: 0;
  }
  html.vt body.vtm-order:not(.vtm-tab-trend) .chart_info,
  html.vt body.vtm-order .chart_info > .chart_block3:first-child {
    display: none;
  }

  /* ---------- 5. quick bar (ours): row A 수량 + presets, row B 호가고정 + 중앙정렬 | 시장가매도 시장가매수 ---------- */
  html.vt body.vtm-order .q_content2 .chart_block > .chart_area ~ .chart_area {
    flex-wrap: nowrap;
    align-items: center;
    height: 34px;
    grid-column-gap: 4px;
    grid-row-gap: 0;
    column-gap: 4px;
    padding: 4px 10px 0;
  }
  html.vt body.vtm-order .q_content2 .chart_area ~ .chart_area > .c_input_warp {
    flex: none;
    width: auto;
    min-height: 0;
  }
  html.vt body.vtm-order .q_content2 .chart_area .chart_label {
    min-width: 0;
    margin-right: 6px;
    color: #888888;
    font-size: 13px;
    line-height: 30px;
  }
  html.vt body.vtm-order .q_content2 .chart_area #buyQuantity {
    width: 58px;
    height: 30px;
    margin: 0 6px 0 0;
    padding: 0 4px;
    border: 1px solid #DEDEDE;
    border-radius: 3px;
    color: #333333;
    font-size: 13px;
    text-align: center;
  }
  html.vt body.vtm-order .q_content2 .chart_area > .c_scalebtn_area {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    grid-column-gap: 4px;
    column-gap: 4px;
    justify-content: space-between;
    width: auto;
  }
  html.vt body.vtm-order .q_content2 .c_scalebtn_area > .c_scalebtn {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    height: 30px;
    padding: 0;
    border: 1px solid #DEDEDE;
    border-radius: 3px;
    background-color: #FFFFFF;
    background-image: none;
    color: #333333;
    font-size: 13px;
    line-height: 28px;
  }
  html.vt body.vtm-order .q_content2 .chart_block > .c_table + .chart_area {
    flex-wrap: nowrap;
    align-items: center;
    height: 38px;
    grid-column-gap: 6px;
    column-gap: 6px;
    padding: 0 6px 0 10px;
  }
  html.vt body.vtm-order .q_content2 .c_table + .chart_area > .check_general {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding-left: 0;
  }
  html.vt body.vtm-order .q_content2 .c_table + .chart_area .check_general_box {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    background-size: 12px 12px;
  }
  html.vt body.vtm-order .q_content2 .c_table + .chart_area .check_general_label {
    margin: 0 0 0 5px;
    color: #333333;
    font-size: 13px;
    line-height: 32px;
    white-space: nowrap;
  }
  html.vt body.vtm-order .q_content2 .vtm-ocenter {      /* same box as the 시장가 buttons next to it (34px, centred in the row) */
    display: flex;
    flex: none;
    align-self: center;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #DEDEDE;
    border-radius: 3px;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
  }
  html.vt body.vtm-order .q_content2 .chart_block > .chart_tradebtn_area.mo {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    height: 38px;
    grid-column-gap: 6px;
    grid-row-gap: 0;
    column-gap: 6px;
    padding: 0 10px 0 0;
  }
  html.vt body.vtm-order .q_content2 .chart_tradebtn_area.mo > .chart_tradebtn {   /* 현종목청산 / 전종목청산 -> ladder header */
    display: none;
  }
  html.vt body.vtm-order .q_content2 .chart_tradebtn_area.mo > .chart_tradebtn.on,
  html.vt body.vtm-order .q_content2 .chart_tradebtn_area.mo > .chart_tradebtn.red {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 120px;
    height: 34px;
    padding: 0 4px;
    border: 0;
    border-radius: 3px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }
  html.vt body.vtm-order .q_content2 .chart_tradebtn_area.mo > .chart_tradebtn.on { background-color: #0083EA; }
  html.vt body.vtm-order .q_content2 .chart_tradebtn_area.mo > .chart_tradebtn.red { background-color: #FE5C5C; }
  html.vt body.vtm-order .q_content2 .chart_tradebtn_area.mo > .chart_tradebtn > .general_icon {
    display: none;
  }
  html.vt body.vtm-order .q_content2 .chart_tradebtn_area.mo > .chart_tradebtn:hover {
    box-shadow: none;
  }

  /* ---------- 6. ladder ---------- */
  html.vt body.vtm-order .q_content2 .c_chart {
    width: 100%;
    /* the 11 percentage columns round up to 100.0x%: 1px page overflow on 320px screens */
    overflow-x: hidden;
    font-size: 13px;
  }
  /* column widths (11 cells; header: 4 + [청산 buttons] + 4) */
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(1),
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(2),
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(10),
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(11),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(1),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(2),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(10),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(11),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(1),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(2),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(11),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(12) {
    width: 6.7%;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(3),
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(9),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(3),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(9),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(3),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(10) {
    width: 7.8%;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(4),
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(8),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(4),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(8),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(4),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(9) {
    width: 8.8%;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(5),
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(7),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(5),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(7) {
    width: 5.2%;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > div:nth-child(6),
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:nth-child(6) {
    width: 29.6%;
  }

  /* header 44px #F7F7F7: MIT 매도 건수 잔량 | 청산(현) 청산(전) | 잔량 건수 매수 MIT */
  html.vt body.vtm-order .q_content2 .c_chart_top {
    height: 44px;
    padding-right: 0;
    border-bottom: 1px solid #DEDEDE;
    background-color: #F7F7F7;
    color: #333333;
    font-size: 13px;
    font-weight: 500;
  }
  html.vt body.vtm-order .q_content2 .c_chart_top > div,
  html.vt body.vtm-order .q_content2 .c_chart_top > div:hover {
    padding: 0;
    border: 0;
    background-color: transparent;
    white-space: nowrap;
  }
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(1),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(2),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(11),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(12) {   /* narrow order columns: 14px does not fit (1em Hangul) */
    font-size: 12px;
    letter-spacing: -0.3px;
  }
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(3),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(4),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(9),
  html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(10) {   /* 건수 / 잔량: reference 14px */
    font-size: 14px;
  }
  @media (max-width: 359px) {
    html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(3),
    html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(4),
    html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(9),
    html.vt body.vtm-order .q_content2 .c_chart_top > div:nth-child(10) {
      font-size: 13px;
    }
  }
  html.vt body.vtm-order .q_content2 .c_chart_top > .c_chart_list2,
  html.vt body.vtm-order .q_content2 .c_chart_top > .c_chart_list3 {   /* "-" / 중앙정렬 (-> quick bar) / "-" */
    display: none;
  }
  html.vt body.vtm-order .q_content2 .c_chart_top > .vtm-olhd {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 100%;
    grid-column-gap: 10px;
    column-gap: 10px;
    padding: 0;
  }
  html.vt body.vtm-order .q_content2 .vtm-olhd > .vtm-olhd-btn {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 40px;
    border-radius: 3px;
    background-color: #949A9F;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
  }

  /* rows: height/visible count from vt-m-order.js; 1px white separators, no vertical lines */
  /* no scrollbar gutter (iOS / Android overlay scrollbars take no width): header, rows and totals share the columns */
  html.vt body.vtm-order .q_content2 .c_chart_scroll {
    height: calc(var(--vtm-row, 40px) * var(--vtm-rows, 10));
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    background-color: #FFFFFF;
  }
  html.vt body.vtm-order .q_content2 .c_chart_scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list,
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list.center,
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list:hover {
    height: var(--vtm-row, 40px);
    border-bottom: 1px solid #FFFFFF;
    background-color: #FFFFFF;
  }
  /* render cost: only the ~10 rows in view are styled/laid out/painted (300 rows x 11 cells, rewritten on every tick).
     Rows keep their fixed height, so scrollHeight, centerHoga() / handleScroll() offsets and hit tests are unchanged. */
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--vtm-row, 40px);
  }
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list.center {
    border-top: 2px solid #DEDEDE;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > div,
  html.vt body.vtm-order .q_content2 .c_chart_list > div:hover {
    padding: 0;
    border: 0;
    color: #333333;
    font-size: 13px;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1,
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list2 {
    background-color: transparent;
  }
  /* order columns (double-tap): MIT매도 / 매도 / 매수 / MIT매수 tints; counts 13px/500 */
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1.blue:nth-child(1) { background-color: #DBEEF4; }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1.blue2:nth-child(2) { background-color: #C0D9F1; }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1.red2:nth-child(10) { background-color: #FCD5B5; }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1.red:nth-child(11) { background-color: #FDEADA; }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1:nth-child(1),
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1:nth-child(2),
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1:nth-child(10),
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1:nth-child(11) {
    font-weight: 500;
  }
  /* depth (hoga-worker.js toggles .blue on sell / .red on buy cells holding data): 건수 plain, 잔량 = bar from the price side.
     Bar length --vtm-d = % of the largest 잔량 of the 10 depth rows, set by vt-m-order.js on those 10 cells only (100% without it). */
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1.blue:nth-child(3),
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1.red:nth-child(9) {
    background-color: transparent;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1.blue:nth-child(4),
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1.red:nth-child(8) {
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: var(--vtm-d, 100%) 100%;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1.blue:nth-child(4) {
    background-image: linear-gradient(#DAEDFE, #DAEDFE);
    background-position: 100% 0;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list1.red:nth-child(8) {
    background-image: linear-gradient(#FFDCDA, #FFDCDA);
    background-position: 0 0;
  }
  /* price: sell side (above the current price) blue tint, buy side pink tint, current price yellow/red */
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list3,
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list3:hover {
    background-color: #FFFFFF;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list3.medo { background-color: #E9F4FE; }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list3.mesu { background-color: #FEECEB; }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list3.yellow { background-color: #FFFF00; }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list3 > .listtxt {
    color: #000000;
    font-size: 21px;
    font-weight: 400;
    white-space: nowrap;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list3 > .listtxt.center {
    color: #FF0000;
  }
  /* marker cells 5 / 7 (no white gap between 잔량 and the price): the price cell's row tint - sell rows (above the current row,
     or every row while the current price is off the table, like the price cells) blue, the current row yellow, buy rows pink */
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list > .c_chart_list2 { background-color: #E9F4FE; }
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list.center > .c_chart_list2 { background-color: #FFFF00; }
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list.center ~ .c_chart_list > .c_chart_list2 { background-color: #FEECEB; }
  /* own position (cells 5 / 7: .medo short / .mesu long, white count) keeps its colours over the tint; 익 / 손 text markers (.red / .blue) */
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list > .c_chart_list2.medo,
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list.center > .c_chart_list2.medo,
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list.center ~ .c_chart_list > .c_chart_list2.medo {
    background-color: var(--vt-lad-pos-sell);
  }
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list > .c_chart_list2.mesu,
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list.center > .c_chart_list2.mesu,
  html.vt body.vtm-order .q_content2 .c_chart_scroll > .c_chart_list.center ~ .c_chart_list > .c_chart_list2.mesu {
    background-color: var(--vt-lad-pos-buy);
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list2 > .listtxt {
    font-size: 12px;
    font-weight: 500;
  }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list2 > .listtxt.red { color: #F44336; }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list2 > .listtxt.blue { color: #2196F3; }
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list2 > .listtxt.medo,
  html.vt body.vtm-order .q_content2 .c_chart_list > .c_chart_list2 > .listtxt.mesu { color: #FFFFFF; }

  /* totals row (r01 bottom row): white, 13px, sell | difference | buy */
  html.vt body.vtm-order .q_content2 .c_chart_bottom {
    height: 24px;
    padding-right: 0;
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
    background-color: #FFFFFF;
  }
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div,
  html.vt body.vtm-order .q_content2 .c_chart_bottom > div:hover {
    padding: 0;
    border: 0;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 14px;
  }
  html.vt body.vtm-order .q_content2 .c_chart_bottom > #medoMesudifference.red { color: #FE5C5C; }
  html.vt body.vtm-order .q_content2 .c_chart_bottom > #medoMesudifference.blue { color: #2196F3; }

  /* ---------- 7. positions / orders list (both copies: under the ladder and #chartOrder in 차트) ---------- */
  html.vt body.vtm-order .c_chartlist {
    width: 100%;
    margin-top: 10px;
    background-color: #FFFFFF;
  }
  /* 2026-11-07: on 320-359px screens the 9 percentage columns squeeze the Korean labels/values;
     keep the reference fit at >=360px, below that the table gets a readable fixed width and
     scrolls horizontally inside .c_chartlist (plusasset: overflow:auto). Header and rows share
     the width, so the columns stay aligned. */
  @media (max-width: 359px) {
    html.vt body.vtm-order .c_chartlist > .c_chart_listtop.w,
    html.vt body.vtm-order .c_chartlist > .c_list_scroll.w {
      width: 432px;
      max-width: none;
    }
  }
  html.vt body.vtm-order.vtm-tab-position .q_content2 .c_chartlist {
    margin-top: 8px;
  }
  html.vt body.vtm-order .c_chartlist > .c_chart_listtop {
    height: 28px;
    padding-right: 0;
    border-top: 0;
    border-bottom: 1px solid #DEDEDE;
    background-color: #F7F7F7;
    color: #333333;
    font-size: 11px;
    font-weight: 500;
  }
  html.vt body.vtm-order .c_chartlist > .c_chart_listtop > .c_list,
  html.vt body.vtm-order .c_chartlist > .c_chart_listtop > .c_list:hover {
    border: 0;
    background-color: transparent;
  }
  html.vt body.vtm-order .c_chartlist .c_list_scroll {
    height: auto;
    min-height: 0;
  }
  html.vt body.vtm-order .c_chartlist .c_list_scroll > .c_listwarp {
    height: 45px;
    border-bottom: 1px solid #DEDEDE;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 12px;
  }
  html.vt body.vtm-order .c_chartlist .c_listwarp > .c_list {
    min-width: 0;
    overflow: hidden;
    border: 0;
    white-space: nowrap;
  }
  html.vt body.vtm-order .c_chartlist .c_listwarp > .c_list.blue,
  html.vt body.vtm-order .c_chartlist .c_listwarp > .c_list.red,
  html.vt body.vtm-order .c_chartlist .c_listwarp > .c_list.blue:hover,
  html.vt body.vtm-order .c_chartlist .c_listwarp > .c_list.red:hover {
    padding: 8px 3px;
    border-radius: 3px;
    background-color: #949A9F;
    background-clip: content-box;
    color: #FFFFFF;
  }

  /* ---------- 8. 추이: 체결정보 like the reference trade history (header #F7F7F7 26px, rows 46px) ---------- */
  html.vt body.vtm-order.vtm-tab-trend .chart_info {
    display: block;
    width: 100%;
    padding: 0;
  }
  html.vt body.vtm-order .chart_info > .chart_block3 {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: #FFFFFF;
  }
  html.vt body.vtm-order .chart_info > .chart_block3 > .c_title {
    display: none;
  }
  html.vt body.vtm-order .chart_info .c_chart_top {
    height: 26px;
    padding-right: 0;
    border-bottom: 0;
    background-color: #F7F7F7;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
  }
  html.vt body.vtm-order .chart_info .c_chart_top > .c_list2,
  html.vt body.vtm-order .chart_info .c_list_scroll3 > .c_listwarp > .c_list2 {
    flex: 1 1 0;
    width: auto;
    border: 0;
    text-align: center;
  }
  html.vt body.vtm-order .chart_info .c_list_scroll3 {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  html.vt body.vtm-order .chart_info .c_list_scroll3 > .c_listwarp,
  html.vt body.vtm-order .chart_info .c_list_scroll3 > .c_listwarp:hover {
    height: 47px;
    border-bottom: 1px solid #DEDEDE;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 14px;
  }
  html.vt body.vtm-order .chart_info .c_list_scroll3 .listtxt.red { color: #F44336; }
  html.vt body.vtm-order .chart_info .c_list_scroll3 .listtxt.blue { color: #2196F3; }
  html.vt body.vtm-order .chart_info .c_list_scroll3 > .c_listwarp > .c_list2:last-child {
    color: #2196F3;
  }

  /* ---------- 9. 차트: chart iframe full width (100vh - 320px) + positions list (#chartOrder) ---------- */
  html.vt body.vtm-order.vtm-tab-chart .q_content1 > #chart.on {
    display: flex;
    width: 100%;
    height: calc(100vh - 320px);
    min-height: 240px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: #FFFFFF;
  }
  html.vt body.vtm-order .q_content1 > #chart > #chartView {
    width: 100% !important;                              /* inline width:850px */
    height: 100%;
    border: 0;
  }
  html.vt body.vtm-order.vtm-tab-chart .q_content1 > #chartOrder {
    height: auto !important;                             /* inline height:234px: the list grows, the page scrolls */
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: #FFFFFF;
  }
  html.vt body.vtm-order.vtm-tab-chart .q_content1 > #chartOrder .c_chartlist {
    margin-top: 0;
  }
  html.vt body.vtm-order:not(.vtm-tab-chart) .q_content1 > #chart,
  html.vt body.vtm-order:not(.vtm-tab-chart) .q_content1 > #chartOrder {
    display: none !important;                            /* inline display set by selectChart()/selectOrder() */
  }

  /* ---------- 10. 종목: .c_table as the reference two-column info list (left column #F9F9F9) ---------- */
  html.vt body.vtm-order.vtm-tab-info .q_content2 .chart_block {
    align-content: start;
    min-height: calc(100vh - 199px);
    background-image: linear-gradient(to right, #F9F9F9 50%, #FFFFFF 50%);
  }
  html.vt body.vtm-order .q_content2 .chart_block > .c_table {
    display: block;
    width: 100%;
    margin: 0;
    padding: 20px 0 0;
    border: 0;
    background-color: transparent;
  }
  html.vt body.vtm-order .q_content2 .c_table > .c_table_warp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    height: auto;
    border: 0;
    background-color: transparent;
  }
  html.vt body.vtm-order .q_content2 .c_table_warp > .c_table1,
  html.vt body.vtm-order .q_content2 .c_table_warp > .c_table2 {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    background-color: transparent;
    text-align: center;
  }
  html.vt body.vtm-order .q_content2 .c_table_warp > .c_table1 {
    padding: 10px 4px 0;
    color: #888888;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
  }
  html.vt body.vtm-order .q_content2 .c_table_warp > .c_table1 .listtxt {
    color: #888888;
  }
  html.vt body.vtm-order .q_content2 .c_table_warp > .c_table2 {
    min-height: 35px;
    padding: 7px 4px 8px;
    color: #333333;
    font-size: 14px;
    line-height: 20px;
  }
  html.vt body.vtm-order .q_content2 .c_table_warp > .c_table2 .listtxt.red { color: #F44336; }
  html.vt body.vtm-order .q_content2 .c_table_warp > .c_table2 .listtxt.blue { color: #2196F3; }

  /* ---------- 11. bottom bar: 지정가 · 시장가 · MIT · 손/익절 · 정정/취소 ----------
     2026-11-07: fixed at the bottom of the visual viewport (like the reference trading app).
     It stays put while the ladder/lists scroll, and does not cover the content: body.vtm-order
     .section carries the matching padding-bottom (section 1). safe-area-inset-bottom keeps it
     above the iPhone home indicator; the bar grows to 50px + inset and the buttons stay 50px.
     z-index: above the page (90), below the fixed head/navbar and the order sheets (9999). */
  html.vt body.vtm-order .bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;                                       /* plusasset shows the bar only <=767px; the mobile layout needs it up to 991px */
    width: 100%;
    height: calc(50px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: #334D6E;
  }
  html.vt body.vtm-order .bottom > .bottom_list {
    height: 50px;
    min-height: 0;                                       /* plusasset min-height 15vw made the visible bar 58.5px */
    padding: 0;
    background-color: #334D6E;
  }
  /* the old in-flow reserve under the content (plusasset .footer padding 20vw) is obsolete:
     the fixed bar + .section padding-bottom now clear the last row of every tab */
  html.vt body.vtm-order .footer.f_trade {
    display: none;
  }
  html.vt body.vtm-order .bottom > .bottom_list > .bottom_btn {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    padding: 0;
    border-left: 0;
    border-right: 1px solid #526C91;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }
  html.vt body.vtm-order .bottom > .bottom_list > .bottom_btn:last-child {
    border-right: 0;
  }
  html.vt body.vtm-order .bottom > .bottom_list > .bottom_btn:nth-child(1) { color: #EFABC0; }
  html.vt body.vtm-order .bottom > .bottom_list > .bottom_btn:nth-child(2) { color: #89CDF2; }
  html.vt body.vtm-order .bottom > .bottom_list > .bottom_btn:nth-child(3) { color: #4CAF50; }
  html.vt body.vtm-order .bottom > .bottom_list > .bottom_btn:nth-child(4) {           /* label 익/손절 shown as 손/익절 */
    color: #08A1F5;
    font-size: 0;
  }
  html.vt body.vtm-order .bottom > .bottom_list > .bottom_btn:nth-child(4)::after {
    content: "\C190/\C775\C808";
    font-size: 14px;
  }
  html.vt body.vtm-order .bottom > .bottom_list > .vtm-obb5 {
    display: flex;
    color: #D2E3FD;
  }
  html.vt body.vtm-order .bottom > .bottom_list > .bottom_btn:hover {
    box-shadow: none;
  }

  /* ---------- 12. tab visibility (last, higher specificity: wins over the display values above) ----------
     호가 = quick bar + ladder + list; 포지션 = list; 추이 = 체결정보; 차트 = #chart + #chartOrder (selectChart()); 종목 = .c_table */
  html.vt body.vtm-order.vtm-tab-hoga .q_content2 .c_block1 .chart_block > .c_table,
  html.vt body.vtm-order.vtm-tab-position .q_content2 .c_block1 .chart_block > :not(.c_chartlist),
  html.vt body.vtm-order.vtm-tab-info .q_content2 .c_block1 .chart_block > :not(.c_table),
  html.vt body.vtm-order.vtm-tab-trend .chart_box > .q_content2,
  html.vt body.vtm-order.vtm-tab-chart .chart_box > .q_content2 {
    display: none;
  }
}

/* ---------- 2026-11-07 owner: no quick bar on the phone ----------
   호가고정 / 중앙정렬 / 수량 + 1·2·3·4·5·10 / 시장가매도 / 시장가매수 are hidden: the bottom bar sheets (지정가 / 시장가 / MIT) carry
   quantity and 매도 / 매수. Nothing is removed from the DOM: 호가고정 stays ON (the page's autoHogaFix() clicks the hidden box),
   and a ladder double-tap orders the page's own #buyQuantity (1; the page resets it to 1 on every symbol change).
   The ladder takes the freed height (layoutLadder() measures it: about 10 rows of ~47px at 390x740, like the reference). */
@media (max-width: 991px) {
  html.vt body.vtm-order .q_content2 .chart_block > .c_table + .chart_area,
  html.vt body.vtm-order .q_content2 .chart_block > .chart_area ~ .chart_area,
  html.vt body.vtm-order .q_content2 .chart_block > .vtm-ocenter,
  html.vt body.vtm-order .q_content2 .chart_block > .chart_tradebtn_area.mo {
    display: none !important;
  }
}