/*
 * vt-mts-order.css - VT theme: WTS/MTS quick order page (mobile/order.jsp = /order3) and the
 * MTS bottom bar + the three bottom sheets of mobileFrame/footer.jsp (.popup.order._1 / ._2 / .tick).
 * Spec: scratchpad vt/spec.md sections 6.8-6.14, 8 (D3, D11, D12, D25-D27), 10, 11.  (2026-11, mts-order)
 *
 * Loaded ONLY when the server flag vtTheme is true (BrandAdvice.java -> mobileFrame/header.jsp, after
 * vt-fonts / vt-tokens / vt-mts-base). With vtTheme=false no page links this file.
 * Every selector starts with "html.vt" plus an ORDER-PAGE container, so no other page is touched:
 *   .q_top  .q_content1  .q_content2  .c_chartlist  (only in mobile/order.jsp)
 *   .bottom (order.jsp only)   .popup.order (footer.jsp, opened only by order.jsp popupTrade())
 * The "html.vt" prefix (+1 class +1 element) is what beats the page <style> block of order.jsp (14-283),
 * which is parsed after this file.
 *
 * Hard rules kept here (00-inventory 4/5, spec 0.2, 10, 11):
 *  - colours, borders, radii, backgrounds, fonts only; geometry of 10.3 untouched: ladder row 24px / 7vw,
 *    ladder 390px / 90vw (#row143 centring), header/totals padding-right, .c_list_scroll 150px / 60vw,
 *    .q_content2 top 134px / 35vw, .chart_info margin 950px / 268vw / 300vw, nothing inside .q_top
 *    changes height/padding/margin/border-width.  Border-width changes only where 10.2 allows them:
 *    .c_chart_top / .c_chart_listtop 3->1px (fixed 24px, border-box), current-price row 1->2px (D27,
 *    fixed row height), checkbox squares 2->1px, right separators on .c_info_box (spec 6.9, fixed 20%/31%
 *    border-box column) and .c_table1 (fixed 15% x 20px cell). Every measured box is identical off/on.
 *  - !important is not used anywhere in this file.
 *  - ladder cells: no transition / shadow / filter / :has() / pseudo-elements; empty .listtxt keeps 0x0
 *    (drop target logic) - this file never sets width/height/padding/flex/line-height on .listtxt.
 *  - JS state classes are only READ by selectors, never added: red red2 blue blue2 medo mesu yellow
 *    center pink on off chartemode w--redirected-checked. #selectOrder / #selectChart / #chart get their
 *    class list rebuilt by JS ("chart_btn3 [on] w-button", "chart on|off"), so they are styled through
 *    those exact classes or by id, never by anything added in markup.
 *  - .c_list_scroll3.33 / .22 (digit classes) are reached through their parent (.chart_info).
 *  - no transitions anywhere on the trading page (old ones are switched off: transition: none).
 * Cache: header.jsp links this file with ?v=1 - bump it there whenever this file changes after a deploy.
 */

/* local token (not in vt-tokens.css): hover face of the grey 청산/취소 row buttons (#949A9F darkened) */
html.vt {
  --vt-order-btn-gray-hover: #7D8388;
}


/* =====================================================================================================
   1. Toolbar / symbol bar / MTS tabs (.q_top)  - spec 6.8, D4/D9.  Colours and fonts only.
   ===================================================================================================== */
/* the gaps between the bars become part of one steel band (reference symbol/tab bar) */
html.vt .q_top {
  background-color: var(--vt-steel-700);
}
html.vt .q_top > .chart_bar,
html.vt .q_top > .chart_bar_btn {
  background-color: var(--vt-steel-700);
  border-color: var(--vt-steel-700);
  box-shadow: none;
  border-radius: 0;
  color: var(--vt-on-dark);
}
/* 국내/해외, 입금/출금/조회/문의/차트 (chart_btn1), 비밀번호/오버신청 (chart_btn2): 2px border width kept */
html.vt .q_top .chart_btn1,
html.vt .q_top .chart_btn2 {
  background-color: transparent;
  border-color: var(--vt-steel-line);
  color: var(--vt-on-dark);
  border-radius: var(--vt-radius);
  font-weight: 400;
  transition: none;
}
html.vt .q_top .chart_btn1:hover,
html.vt .q_top .chart_btn2:hover {
  background-color: var(--vt-steel-800);
  color: var(--vt-on-dark-strong);
}
html.vt .q_top .chart_btn1.on,
html.vt .q_top .chart_btn2.on {
  background-color: var(--vt-steel-800);
  border-color: var(--vt-steel-800);
  color: var(--vt-on-dark-strong);
  box-shadow: none;
  font-weight: 500;
}
/* selected symbol (#stockNameTitle, #stockNameTitleMobile); its .c_toggle_box must stay its next sibling */
html.vt .q_top .chart_title {
  background-color: transparent;
  border-color: transparent;
  color: var(--vt-on-dark-symbol);
  font-weight: 600;
}
html.vt .q_top .chart_title:hover {
  color: var(--vt-on-dark-strong);
}
/* symbol dropdown (#stockName, #stockNameMobile): display stays JS (slideToggle -> inline display:block) */
html.vt .q_top .c_toggle_box {
  background-color: #FFFFFF;
  border-color: var(--vt-border);
  border-radius: var(--vt-radius);
  box-shadow: var(--vt-shadow-menu);
}
html.vt .q_top .c_toggle_box > .c_toggle_btn {
  background-color: transparent;
  border-bottom-color: var(--vt-line-soft);
  color: var(--vt-text);
}
html.vt .q_top .c_toggle_box > .c_toggle_btn:hover {
  background-color: var(--vt-hover);
  color: var(--vt-text);
}
/* MTS 주문 / 차트 tabs (#selectOrder / #selectChart; JS rebuilds "chart_btn3 [on] w-button").
   The 3px bottom border of the active tab (<=991) keeps its width, painted in the tab colour. */
html.vt .q_top .chart_bar_btn > .chart_btn3 {
  background-color: transparent;
  color: var(--vt-on-dark);
  font-size: 14px;
  font-weight: 400;
  transition: none;
}
html.vt .q_top .chart_bar_btn > .chart_btn3.on,
html.vt .q_top .chart_bar_btn > .chart_btn3:hover {
  background-color: var(--vt-steel-800);
  border-bottom-color: var(--vt-steel-800);
  color: var(--vt-on-dark-strong);
  font-weight: 500;
}


/* =====================================================================================================
   2. Panels  - spec 6.9 (#chart / #chartOrder by id: JS rebuilds their class list)
   ===================================================================================================== */
html.vt .q_content1 > #chart,
html.vt .q_content1 > #chartOrder,
html.vt .q_content1 .chart_info .chart_block3,
html.vt .q_content2 .chart_block {
  background-color: #FFFFFF;
  border-color: var(--vt-border);
  box-shadow: none;
  border-radius: 0;
}
/* TradingView iframe: the browser default 2px inset bevel shows grey on white; same 2px width, flat and
   invisible (iframe size and its inline style untouched) */
html.vt .q_content1 > #chart > #chartView {
  border-style: solid;
  border-color: transparent;
}


/* =====================================================================================================
   3. Info boxes (평가담보금 ... 로스컷) and the quote table (시가/고가/저가/현가/만기일 ...) - spec 6.9
   ===================================================================================================== */
html.vt .q_content2 .c_info_block {
  background-color: #FFFFFF;
}
html.vt .q_content2 .c_info_block > .c_info_box {
  border-right: 1px solid var(--vt-line-soft);   /* fixed 20% / 31% border-box column: width kept */
}
html.vt .q_content2 .c_info_block > .c_info_box:last-child {
  border-right-color: transparent;
}
html.vt .q_content2 .c_info_box > div:first-child {          /* label */
  color: var(--vt-text-muted);
  font-weight: 500;
}
html.vt .q_content2 .c_info_box > .listtxt {                 /* value (#valueWallet ... #lossWallet) */
  color: var(--vt-text);
  font-weight: 500;
}
html.vt .q_content2 .c_info_box > .listtxt.red {
  color: var(--vt-up);
}
html.vt .q_content2 .c_info_box > .listtxt.blue {
  color: var(--vt-down);
}
/* quote table: the page <style> paints .c_table1 darkcyan and removes the right borders of
   .c_table / .c_table_warp / .c_table1 ("border-right: darkcyan" = style none). Open sides like the
   reference trading tables; label cells get back a 1px separator (fixed 15% x 20px cell, border-box). */
html.vt .q_content2 .c_table {
  border-top-color: var(--vt-border);
  border-left-color: transparent;
  font-weight: 400;
}
html.vt .q_content2 .c_table > .c_table_warp {
  border-bottom-color: var(--vt-border);
}
html.vt .q_content2 .c_table_warp > .c_table1 {
  background-color: var(--vt-surface-th);
  border-right: 1px solid var(--vt-border);
  color: var(--vt-text-muted);
  font-weight: 500;
}
html.vt .q_content2 .c_table_warp > .c_table1 .listtxt {
  color: var(--vt-text-muted);
}
html.vt .q_content2 .c_table_warp > .c_table2 {
  background-color: #FFFFFF;
  border-right-color: var(--vt-border);
  color: var(--vt-text);
}
html.vt .q_content2 .c_table_warp > .c_table2 .listtxt.red {
  color: var(--vt-up);
}
html.vt .q_content2 .c_table_warp > .c_table2 .listtxt.blue {
  color: var(--vt-down);
}


/* =====================================================================================================
   4. 호가고정, 수량, presets - spec 6.9 / 6.1
   ===================================================================================================== */
html.vt .q_content2 .chart_area .check_general_label,
html.vt .q_content2 .chart_area .check_general_label2 {
  color: var(--vt-text);
  font-weight: 400;
}
/* #hogaToggle: w--redirected-checked IS the 호가고정 state (read by hoga-worker.js) - colours only;
   12x12 border-box square, border 2px -> 1px (spec 6.1); local check mark, no CDN image */
html.vt .q_content2 .chart_area .check_general_box {
  background-color: #FFFFFF;
  background-image: none;
  border: 1px solid var(--vt-check-border);
  border-radius: 2px;
}
html.vt .q_content2 .chart_area .check_general_box.w--redirected-checked {
  background-color: var(--vt-check-on);
  border-color: var(--vt-check-on);
  background-image: var(--vt-check-svg);
  background-size: 10px 10px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
html.vt .q_content2 .chart_area .chart_label {
  color: var(--vt-text-muted);
  font-weight: 400;
}
html.vt .q_content2 .chart_area .chart_input {
  background-color: #FFFFFF;
  border-color: var(--vt-border-input);
  border-radius: var(--vt-radius);
  color: var(--vt-text);
}
html.vt .q_content2 .chart_area .chart_input::placeholder {
  color: var(--vt-text-faint);
  opacity: 1;
}
html.vt .q_content2 .chart_area .chart_input:focus {
  outline: none;
  border-color: var(--vt-focus);
}
/* presets (.c_scalebtn.dasan: page <style> blue gradient + white text); the inner div text is the quantity */
html.vt .q_content2 .c_scalebtn_area > .c_scalebtn {
  background-image: none;
  background-color: #FFFFFF;
  border-color: var(--vt-border);
  border-radius: var(--vt-radius);
  color: var(--vt-text);
  font-weight: 400;
  transition: none;
}
html.vt .q_content2 .c_scalebtn_area > .c_scalebtn:hover {
  background-color: var(--vt-hover);
}


/* =====================================================================================================
   5. Market / close buttons (.chart_tradebtn_area desktop + .mo) - spec 6.10
   ===================================================================================================== */
html.vt .q_content2 .chart_tradebtn_area > .chart_tradebtn {          /* 현종목청산 / 전종목청산 */
  background-color: #FFFFFF;
  border-color: var(--vt-border);
  border-radius: var(--vt-radius);
  color: var(--vt-text);
  font-weight: 500;
  transition: none;
}
html.vt .q_content2 .chart_tradebtn_area > .chart_tradebtn:hover {
  background-color: #FFFFFF;
  border-color: var(--vt-btn-hover-danger);
  color: var(--vt-btn-hover-danger);
}
html.vt .q_content2 .chart_tradebtn_area > .chart_tradebtn.on {       /* 시장가매도 */
  background-color: var(--vt-btn-sell);
  border-color: var(--vt-btn-sell);
  color: #FFFFFF;
}
html.vt .q_content2 .chart_tradebtn_area > .chart_tradebtn.red {      /* 시장가매수 */
  background-color: var(--vt-btn-buy);
  border-color: var(--vt-btn-buy);
  color: #FFFFFF;
}
html.vt .q_content2 .chart_tradebtn_area > .chart_tradebtn.on:hover,
html.vt .q_content2 .chart_tradebtn_area > .chart_tradebtn.red:hover {
  box-shadow: inset 0 0 0 999px var(--vt-btn-shade);
}


/* =====================================================================================================
   6. Ladder (.q_content2 .c_chart) - spec 6.11, D3, D25-D27
      Row = .c_chart_list#rowN (JS template, 11 cells in a fixed order):
        1 .c_chart_list1.blue  MIT 매도    2 .c_chart_list1.blue2 지정가 매도   3/4 sell 건수/잔량 (.blue = data)
        5 .c_chart_list2 short (.medo)     6 .c_chart_list3 price #centerColor (.medo/.mesu/.yellow, #sise.center)
        7 .c_chart_list2 long (.mesu)      8/9 buy 잔량/건수 (.red = data)      10 .red2 지정가 매수   11 .red MIT 매수
      The colour classes are the order type/side for drag-modify: they are only read here.
   ===================================================================================================== */
/* --- header (24px fixed, border-box: 3px -> 1px bottom line); padding-right (scrollbar) kept --- */
html.vt .q_content2 .c_chart_top {
  background-color: var(--vt-surface-th);
  border-bottom: 1px solid var(--vt-border);
  color: var(--vt-text-muted);
  font-weight: 500;
}
html.vt .q_content2 .c_chart_top > div {
  background-color: transparent;
  border-right-color: var(--vt-border);
}
html.vt .q_content2 .c_chart_top > div:hover {                /* old rule: 1px red box on hover */
  border-color: transparent var(--vt-border) transparent transparent;
}
html.vt .q_content2 .c_chart_top > .c_chart_list3 {          /* 중앙정렬 (onclick) */
  color: var(--vt-text);
  cursor: pointer;
}
html.vt .q_content2 .c_chart_top > .c_chart_list3:hover {
  background-color: var(--vt-hover-btn);
}

/* --- rows and cells --- */
html.vt .q_content2 .c_chart_scroll > .c_chart_list {
  background-color: #FFFFFF;
  border-bottom-color: var(--vt-lad-row-line);
}
html.vt .q_content2 .c_chart_scroll > .c_chart_list:hover {
  background-color: var(--vt-lad-row-hover);
}
/* current-price row (JS adds .center to the row): 2px line under it, row height stays 24px / 7vw (D27) */
html.vt .q_content2 .c_chart_scroll > .c_chart_list.center {
  border-bottom: 2px solid var(--vt-lad-cur-line);
}
html.vt .q_content2 .c_chart_list > .c_chart_list1,
html.vt .q_content2 .c_chart_list > .c_chart_list2,
html.vt .q_content2 .c_chart_list > .c_chart_list3 {
  border-right-color: var(--vt-lad-col-line);
  color: var(--vt-text);
}
html.vt .q_content2 .c_chart_list > .c_chart_list1,
html.vt .q_content2 .c_chart_list > .c_chart_list2 {
  background-color: transparent;
}
/* order columns: reference HTS order-column tints (D3) */
html.vt .q_content2 .c_chart_list > .c_chart_list1.blue:nth-child(1) {
  background-color: var(--vt-lad-mit-sell);
}
html.vt .q_content2 .c_chart_list > .c_chart_list1.blue2:nth-child(2) {
  background-color: var(--vt-lad-limit-sell);
}
/* depth cells while they hold data (hoga-worker.js toggles .blue / .red on the cell) */
html.vt .q_content2 .c_chart_list > .c_chart_list1.blue:nth-child(3),
html.vt .q_content2 .c_chart_list > .c_chart_list1.blue:nth-child(4) {
  background-color: var(--vt-lad-ask-depth);
}
html.vt .q_content2 .c_chart_list > .c_chart_list1.red:nth-child(8),
html.vt .q_content2 .c_chart_list > .c_chart_list1.red:nth-child(9) {
  background-color: var(--vt-lad-bid-depth);
}
html.vt .q_content2 .c_chart_list > .c_chart_list1.red2:nth-child(10) {
  background-color: var(--vt-lad-limit-buy);
}
html.vt .q_content2 .c_chart_list > .c_chart_list1.red:nth-child(11) {
  background-color: var(--vt-lad-mit-buy);
}
/* own position markers (cells 5 / 7): white count on the reference sell / buy colours (D25) */
html.vt .q_content2 .c_chart_list > .c_chart_list2.medo {
  background-color: var(--vt-lad-pos-sell);
}
html.vt .q_content2 .c_chart_list > .c_chart_list2.mesu {
  background-color: var(--vt-lad-pos-buy);
}
/* price column: order medo -> mesu -> yellow (a cell can carry yellow together with medo/mesu) */
html.vt .q_content2 .c_chart_list > .c_chart_list3 {
  background-color: #FFFFFF;
}
html.vt .q_content2 .c_chart_list > .c_chart_list3.medo {
  background-color: var(--vt-lad-ask-price);
}
html.vt .q_content2 .c_chart_list > .c_chart_list3.mesu {
  background-color: var(--vt-lad-bid-price);
}
html.vt .q_content2 .c_chart_list > .c_chart_list3.yellow {
  background-color: var(--vt-lad-cur-bg);
}
/* price text #sise (its text is the order price - never touched): black, current price red */
html.vt .q_content2 .c_chart_list > .c_chart_list3 > .listtxt {
  color: var(--vt-text-strong);
  font-size: 13px;
  font-weight: 400;
}
html.vt .q_content2 .c_chart_list > .c_chart_list3 > .listtxt.center {
  color: var(--vt-lad-cur-text);
}
/* 익 / 손 markers (.red / .blue on #mesuAmount / #medoAmount), then position counts (.mesu / .medo):
   declared after, so a count drawn on a cell that still carries .red/.blue stays white (as before) */
html.vt .q_content2 .c_chart_list > .c_chart_list2 > .listtxt.red {
  color: var(--vt-up);
}
html.vt .q_content2 .c_chart_list > .c_chart_list2 > .listtxt.blue {
  color: var(--vt-down);
}
html.vt .q_content2 .c_chart_list > .c_chart_list2 > .listtxt.mesu,
html.vt .q_content2 .c_chart_list > .c_chart_list2 > .listtxt.medo {
  color: var(--vt-lad-pos-text);
}
/* hover: existing 1px all-side hover borders (old: red) recoloured; price hover fill on every price
   cell except the current price, which keeps its yellow */
html.vt .q_content2 .c_chart_list > .c_chart_list1:hover {
  border-color: var(--vt-lad-hover-line);
}
html.vt .q_content2 .c_chart_list > .c_chart_list3:hover {
  border-color: var(--vt-lad-hover-line);
}
html.vt .q_content2 .c_chart_list > .c_chart_list3:not(.yellow):hover {
  background-color: var(--vt-lad-price-hover);
}

/* --- totals row (24px / 7vw; padding-right kept) --- */
html.vt .q_content2 .c_chart_bottom {
  background-color: #FFFFFF;
  border-top-color: var(--vt-border);
  border-bottom-color: var(--vt-border);
}
html.vt .q_content2 .c_chart_bottom > div {
  background-color: #FFFFFF;
  border-right-color: var(--vt-line-soft);
  color: var(--vt-text);
}
html.vt .q_content2 .c_chart_bottom > div:hover {             /* old rule: 1px red box on hover */
  border-color: transparent var(--vt-line-soft) transparent transparent;
}
/* 매수-매도 difference: hoga-worker.js toggles .red/.blue, which had no CSS until now (D26) */
html.vt .q_content2 .c_chart_bottom > #medoMesudifference.red {
  color: var(--vt-up);
}
html.vt .q_content2 .c_chart_bottom > #medoMesudifference.blue {
  color: var(--vt-down);
}

/* --- cancel row: sell-side 취소 x2 blue, buy-side 취소 x2 red, 전종목취소 / 중앙정렬 / 현종목취소 light --- */
html.vt .q_content2 .c_chart_bottom2 {
  border-top-color: var(--vt-border);
}
html.vt .q_content2 .c_b_btnarea > .c_b_btn {
  background-image: none;
  border-radius: var(--vt-radius);
  color: #FFFFFF;
  font-weight: 500;
  transition: none;
}
html.vt .q_content2 .c_b_btnarea > .c_b_btn.medo {
  background-color: var(--vt-btn-sell);
  border-color: var(--vt-btn-sell);
}
html.vt .q_content2 .c_b_btnarea > .c_b_btn.mesu {
  background-color: var(--vt-btn-buy);
  border-color: var(--vt-btn-buy);
}
html.vt .q_content2 .c_b_btnarea > .c_b_btn:hover {
  box-shadow: inset 0 0 0 999px var(--vt-btn-shade);
  color: #FFFFFF;
}
html.vt .q_content2 .c_chart_bottom2 > .c_b_btn2 {
  background-color: #FFFFFF;
  border-color: var(--vt-border);
  border-radius: var(--vt-radius);
  color: var(--vt-text);
  transition: none;
}
html.vt .q_content2 .c_chart_bottom2 > .c_b_btn2:hover {
  background-color: #FFFFFF;
  border-color: var(--vt-btn-hover-danger);
  color: var(--vt-btn-hover-danger);
}


/* =====================================================================================================
   7. Positions / orders list (.c_chartlist: under the ladder and inside #chartOrder) - spec 6.12, D25
      Row template: 9 x .c_list, cancel/close button at index 8 (.c_list.blue 청산 / .c_list.red 취소).
   ===================================================================================================== */
html.vt .c_chartlist > .c_chart_listtop {                    /* 24px fixed: 3px -> 1px bottom line */
  background-color: var(--vt-surface-th);
  border-bottom: 1px solid var(--vt-border);
  color: var(--vt-text);
  font-weight: 500;
}
html.vt .c_chartlist .c_list_scroll > .c_listwarp {
  background-color: #FFFFFF;
  border-bottom-color: var(--vt-border);
  color: var(--vt-text);
}
html.vt .c_chartlist .c_list_scroll > .c_listwarp:hover {
  background-color: var(--vt-hover);
}
html.vt .c_chartlist .c_listwarp > .c_list > .listtxt.red {
  color: var(--vt-up);
}
html.vt .c_chartlist .c_listwarp > .c_list > .listtxt.blue {
  color: var(--vt-down);
}
/* 청산 / 취소: reference grey row button. The cell keeps its box and click area; the grey face is the
   content box (padding inside the fixed 15% x row-height cell), so it reads as a button in the row. */
html.vt .c_chartlist .c_listwarp > .c_list.blue,
html.vt .c_chartlist .c_listwarp > .c_list.red {
  background-color: var(--vt-btn-gray);
  background-clip: content-box;
  border-radius: 6px;
  padding-top: 3px;
  padding-bottom: 3px;
  color: #FFFFFF;
}
html.vt .c_chartlist .c_listwarp > .c_list.blue > .listtxt,
html.vt .c_chartlist .c_listwarp > .c_list.red > .listtxt {
  color: #FFFFFF;
}
html.vt .c_chartlist .c_listwarp > .c_list.blue:hover,
html.vt .c_chartlist .c_listwarp > .c_list.red:hover {
  background-color: var(--vt-order-btn-gray-hover);
}


/* =====================================================================================================
   8. Symbol list (해외선물 / 국내) and 체결정보 under the chart (.chart_info, .c_list_scroll3.33/.22)
   ===================================================================================================== */
html.vt .q_content1 .chart_info .c_title {                   /* #stockListName, 체결정보 */
  background-color: var(--vt-surface-th);
  border-color: var(--vt-border);
  border-radius: 0;
  color: var(--vt-text);
  font-weight: 500;
}
html.vt .q_content1 .chart_info .c_chart_top {               /* 24px fixed: 3px -> 1px bottom line */
  background-color: var(--vt-surface-th);
  border-bottom: 1px solid var(--vt-border);
  color: var(--vt-text-muted);
  font-weight: 500;
}
html.vt .q_content1 .chart_info .c_list_scroll3 > .c_listwarp {
  background-color: #FFFFFF;
  border-bottom-color: var(--vt-border);
  color: var(--vt-text);
}
html.vt .q_content1 .chart_info .c_list_scroll3 > .c_listwarp:hover {
  background-color: var(--vt-hover);
}
html.vt .q_content1 .chart_info .c_listwarp .listtxt.red {
  color: var(--vt-up);
}
html.vt .q_content1 .chart_info .c_listwarp .listtxt.blue {
  color: var(--vt-down);
}


/* =====================================================================================================
   9. Scrollbars of the order-page scrollers (page <style>: white thumb on a pink track). Gutter width
      (16px, header padding-right pairs with it) unchanged: colours and thumb shape only (spec 6.1).
   ===================================================================================================== */
html.vt .q_content2 .c_chart_scroll::-webkit-scrollbar-track,
html.vt .q_top .c_toggle_box::-webkit-scrollbar-track,
html.vt .q_content1 .chart_info .c_list_scroll3::-webkit-scrollbar-track {
  background: var(--vt-scroll-track-soft);
  border-radius: 0;
  box-shadow: none;
}
html.vt .q_content2 .c_chart_scroll::-webkit-scrollbar-thumb,
html.vt .q_top .c_toggle_box::-webkit-scrollbar-thumb,
html.vt .q_content1 .chart_info .c_list_scroll3::-webkit-scrollbar-thumb {
  background-color: var(--vt-scroll-thumb);
  background-clip: padding-box;
  border: 5px solid transparent;
  border-radius: 8px;
  box-shadow: none;
}
html.vt .q_content2 .c_chart_scroll::-webkit-scrollbar-thumb:hover,
html.vt .q_top .c_toggle_box::-webkit-scrollbar-thumb:hover,
html.vt .q_content1 .chart_info .c_list_scroll3::-webkit-scrollbar-thumb:hover {
  background-color: var(--vt-scroll-thumb-hover);
}


/* =====================================================================================================
   10. MTS bottom order bar (.bottom > .bottom_list > a.bottom_btn x4) - spec 6.13, D11
       Sizes (incl. the Android inline 100px / 80px) untouched.
   ===================================================================================================== */
/* .bottom too: on Android order.jsp sets .bottom 100px around an 80px .bottom_list (inline), and the
   20px strip would otherwise show the page scrolling under the bar; elsewhere both boxes coincide */
html.vt .bottom,
html.vt .bottom > .bottom_list {
  background-color: var(--vt-steel-700);
}
html.vt .bottom > .bottom_list > .bottom_btn {
  background-color: transparent;
  border-right-color: var(--vt-steel-line);
  color: var(--vt-bar-label);
  font-weight: 600;
  transition: none;
}
html.vt .bottom > .bottom_list > .bottom_btn:nth-child(1) {    /* 지정가 */
  border-left-color: var(--vt-steel-line);
  color: var(--vt-bar-limit);
}
html.vt .bottom > .bottom_list > .bottom_btn:nth-child(2) {    /* 시장가 */
  color: var(--vt-bar-market);
}
html.vt .bottom > .bottom_list > .bottom_btn:nth-child(3) {    /* MIT */
  color: var(--vt-bar-mit);
}
html.vt .bottom > .bottom_list > .bottom_btn:nth-child(4) {    /* 익/손절 */
  color: var(--vt-bar-tpsl);
}
html.vt .bottom > .bottom_list > .bottom_btn:hover {
  box-shadow: none;
  color: #FFFFFF;
}


/* =====================================================================================================
   11. MTS bottom sheets (footer.jsp): .popup.order._1 시장가, ._2 지정가/MIT, .tick 익절/손절 - spec 6.14, D12
       Our row layout kept (label + field + -/+ per row, 매도/매수 row, info block); reference colours.
       display stays JS (flex / none / outside-click hide on .order_popbox).
   ===================================================================================================== */
html.vt .popup.order {
  background-color: var(--vt-overlay-sheet);
}
html.vt .popup.order .order_popbox {
  background-color: #FFFFFF;
  border-radius: var(--vt-radius-sheet);
  box-shadow: var(--vt-shadow-sheet);
  color: var(--vt-text);
}
html.vt .popup.order .txt_fix {                               /* 가격 / 수량 */
  color: var(--vt-text);
  font-weight: 400;
}
html.vt .popup.order .order_field {
  background-color: #FFFFFF;
  border-color: var(--vt-border);
  border-radius: var(--vt-radius);
  color: var(--vt-text);
}
html.vt .popup.order .order_field::placeholder {
  color: var(--vt-text-faint);
  opacity: 1;
}
html.vt .popup.order .order_field:focus {
  outline: none;
  border-color: var(--vt-focus);
}
html.vt .popup.order .btn_cal {                               /* - / + steppers (50x50 / 8.8vw kept) */
  background-color: var(--vt-surface-stepper);
  border-radius: var(--vt-radius);
  color: var(--vt-text);
  font-weight: 400;
}
html.vt .popup.order .btn_cal:hover {
  background-color: var(--vt-hover-btn);
  color: var(--vt-text);
}
html.vt .popup.order .btn_cal.tick {                          /* tick up / down (pair clipped by .btn_tick) */
  background-color: var(--vt-surface-btn);
  border-color: var(--vt-border);
  border-radius: 0;
  color: var(--vt-text);
  font-weight: 400;
}
html.vt .popup.order .btn_cal.tick:hover {
  background-color: var(--vt-hover-btn);
}
html.vt .popup.order .btn_order {                             /* 매도 / 시장가 매도 */
  background-color: var(--vt-btn-sell);
  border-radius: var(--vt-radius);
  color: #FFFFFF;
  font-weight: 500;
  transition: none;
}
html.vt .popup.order .btn_order.red {                         /* 매수 / 시장가 매수 */
  background-color: var(--vt-btn-buy);
}
html.vt .popup.order .btn_order:hover {
  background-color: var(--vt-btn-sell);
  box-shadow: inset 0 0 0 999px var(--vt-btn-shade);
  color: #FFFFFF;
}
html.vt .popup.order .btn_order.red:hover {
  background-color: var(--vt-btn-buy);
}
html.vt .popup.order .order_row._3 {                          /* 주문가능 / 보유수량 */
  background-color: var(--vt-surface);
  border-radius: 0;
  color: var(--vt-text);
}
html.vt .popup.order .order_info_col {
  color: var(--vt-text);
}
html.vt .popup.order .order_info_col.line {
  border-right-color: var(--vt-border);
  font-weight: 400;
}
html.vt .popup.order .txt_color.red {
  color: var(--vt-up);
}
html.vt .popup.order .txt_color.blue {
  color: var(--vt-down);
}
/* TP/SL sheet */
html.vt .popup.order .order_row.tick {
  color: var(--vt-text);
}
html.vt .popup.order .order_row.tick > div:not(.btn_tick) {   /* "틱" */
  color: var(--vt-text-faint);
}
html.vt .popup.order .order_row.tick .w-form-label {          /* 익절 / 손절 */
  color: var(--vt-text);
}
html.vt .popup.order .btn_tick_smt {                          /* 확인 */
  background-color: var(--vt-primary);
  border-radius: var(--vt-radius);
  color: #FFFFFF;
  font-weight: 500;
  transition: none;
}
html.vt .popup.order .btn_tick_smt:hover {
  background-color: var(--vt-primary);
  box-shadow: inset 0 0 0 999px var(--vt-btn-shade);
  color: #FFFFFF;
}
/* #profitCheckPopup (.red = 익절) / #lossCheckPopup (.blue = 손절): w--redirected-checked IS the TP/SL
   state - colours only; inline 17x17 kept; border 2px -> 1px (spec 6.1/6.14) */
html.vt .popup.order .check_general_box {
  background-color: #FFFFFF;
  background-image: none;
  border: 1px solid var(--vt-check-border);
  border-radius: 2px;
}
html.vt .popup.order .check_general_box.w--redirected-checked {
  background-image: var(--vt-check-svg);
  background-size: 10px 10px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
html.vt .popup.order .check_general_box.red.w--redirected-checked {
  background-color: var(--vt-check-tp);
  border-color: var(--vt-check-tp);
}
html.vt .popup.order .check_general_box.blue.w--redirected-checked {
  background-color: var(--vt-check-sl);
  border-color: var(--vt-check-sl);
}


/* =====================================================================================================
   12. Font sizes (spec 3.3: >=768 only; phone sizes stay rem/vw except the ladder price)
       All in fixed-height boxes or absolute dropdowns: line boxes keep the inherited line-height.
   ===================================================================================================== */
@media screen and (min-width: 768px) {
  html.vt .q_content2 .c_info_box > .listtxt {
    font-size: 13px;
  }
  html.vt .q_content2 .chart_area .check_general_label {
    font-size: 13px;
  }
  html.vt .q_top .c_toggle_box > .c_toggle_btn {
    font-size: 13px;
  }
  html.vt .popup.order .txt_fix {                             /* absolute label inside the field (768-991) */
    font-size: 13px;
  }
}
@media screen and (max-width: 479px) {
  html.vt .q_content2 .c_chart_list > .c_chart_list3 > .listtxt {
    font-size: 3.2vw;
  }
}