/*
 * vt-m-pages-a.css - MTS mobile redesign 2026-11 (owner: PAGES-A). 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.
 *
 * Pages: deposit3 (ref r17), withdraw3 (r18), dwhistory3 / tradehistory3 (r19), calculateHistory3 (r20), clickLogList3,
 * overnight3 (r21 cards + tables), option3 (form rows + primary buttons). Common components come from vt-m-base.css (BASE);
 * this file only adds what is page specific.
 * Page hook: each of these JSPs adds, inside <c:if test="${vtTheme}">, the classes "vtm-pa vtm-pa-<page>" to <body>.
 * "html.vt .vtm-pa .content X" is one class stronger than the base rules "html.vt .content X".
 * NEW markup (inside c:if, class vtm-only): .vtm-pa-ico (title / section icons), .vtm-pa-reset (reset button of the date
 * filter), .vtm-pa-sec (history section header of deposit / withdraw). Their clicks are handled by js/vt-m-pages-a.js.
 * Never write the comment terminator inside a comment here (a stray one drops the whole @media block).
 */
@media (max-width: 991px) {
  html.vt .vtm-pa {
    --pa-ico-fold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z' fill='%23333'/%3E%3C/svg%3E");
    --pa-ico-reload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' d='M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z' fill='%23333'/%3E%3C/svg%3E");
    --pa-ico-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill='%23333'/%3E%3C/svg%3E");
    --pa-ico-reset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z' fill='%23333'/%3E%3C/svg%3E");
    --pa-ico-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v15c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 17H5V8h14v12zM7 10h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zm-8 4h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zm-8 3.5h2v1.5H7zm4 0h2v1.5h-2zm4 0h2v1.5h-2z' fill='%23333'/%3E%3C/svg%3E");
  }

  /* -------------------------------------------------------------------------------------------------
     0. Shared bits of my pages
     ------------------------------------------------------------------------------------------------- */
  /* one title per screen like the reference cards: the second-level headings that only repeat the page title
     (deposit/withdraw form title, history filter titles "... search", summary-card block titles, option block title)
     are hidden on the phone; their sections keep every field, value and button */
  html.vt .vtm-pa-deposit .content .g_block > .title_box,
  html.vt .vtm-pa-withdraw .content .g_block > .title_box,
  html.vt .vtm-pa-hist .content > .g_block > .h_titlebox,
  html.vt .vtm-pa-hist .content > .h_block > .block_title,
  html.vt .vtm-pa-option .content > .g_block > .h_titlebox {
    display: none;
  }
  /* breathing room under the last block (the reference keeps a 30px footer under its tables) */
  html.vt .vtm-pa .content {
    padding-bottom: 30px;
  }
  html.vt .vtm-pa .content > .pagging {
    padding-bottom: 0;
  }
  /* icon buttons (NEW markup): 16px glyph in a 28px touch box, #333 like the reference card header icons */
  html.vt .vtm-pa .vtm-pa-ico {
    display: block;
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .vtm-pa .vtm-pa-ico-fold { background-image: var(--pa-ico-fold); background-size: 22px 22px; }
  html.vt .vtm-pa .vtm-pa-ico-reload { background-image: var(--pa-ico-reload); }
  html.vt .vtm-pa .vtm-pa-ico-close { background-image: var(--pa-ico-close); }
  /* reload while its request is answered / within 2 s of the last one (vt-m-pages-a.js): dimmed, taps ignored */
  html.vt .vtm-pa .vtm-pa-ico.vtm-pa-busy {
    opacity: .35;
    cursor: default;
  }
  /* keyboard focus of the new controls (separate rule: engines without :focus-visible drop only this one) */
  html.vt .vtm-pa .vtm-pa-ico:focus-visible,
  html.vt .vtm-pa .vtm-pa-reset:focus-visible {
    outline: 2px solid var(--m-primary);
    outline-offset: 1px;
  }
  /* the page-title fold icon sits at the right end of the title row (reference card header) */
  html.vt .vtm-pa .content > .title_section > .vtm-pa-ico {
    margin: -1px -16px -1px auto;             /* chevron centred at x = 372 like the reference header icon */
  }
  /* folded: the date filter (dates + search / reset) is hidden, the chevron points up */
  html.vt .vtm-pa.vtm-pa-folded .content .date_block {
    display: none;
  }
  html.vt .vtm-pa.vtm-pa-folded .content > .title_section > .vtm-pa-ico-fold,
  html.vt .vtm-pa .vtm-pa-sec.vtm-pa-sec-folded > .vtm-pa-ico-fold {
    transform: rotate(180deg);
  }

  /* -------------------------------------------------------------------------------------------------
     1. Date filter (dwhistory, tradehistory, calculateHistory, clickLogList; ref r19 / r20):
        rows "start / end date" (BASE) + calendar icon in the input, then search | reset side by side (168 + 14 + 168)
     ------------------------------------------------------------------------------------------------- */
  html.vt .vtm-pa .content .date_block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 0;
    padding: 0 0 10px;
  }
  html.vt .vtm-pa .content .date_block > div:first-child {
    grid-column: 1 / -1;
  }
  html.vt .vtm-pa .content .date_block > .search_btn {
    grid-column: 1;
    margin: 0;
  }
  html.vt .vtm-pa .content .date_block > .vtm-pa-reset {
    grid-column: 2;
  }
  /* reset (NEW): the same secondary look as the search button + the reference reset glyph after the label */
  html.vt .vtm-pa .content .vtm-pa-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--m-btn-h);
    padding: 0 14px;
    border: 1px solid var(--m-line);
    border-radius: 3px;
    background-color: var(--m-bg);
    color: var(--m-ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  html.vt .vtm-pa .content .vtm-pa-reset::after {
    content: "";
    flex: none;
    width: 17px;
    height: 17px;
    background: var(--pa-ico-reset) no-repeat center / 17px 17px;
  }
  /* date inputs: the reference calendar glyph at the right. Chrome / Android draw their own picker button at the
     same place: it stays where it is (a click on it opens the picker, a click on the date text still edits the
     fields with the keyboard) and is only made transparent, so one glyph is seen on every engine (iOS has none) */
  html.vt .vtm-pa .content .date_block input[type="date"].form-control {
    padding-right: 10px;
    background-image: var(--pa-ico-cal);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
  }
  html.vt .vtm-pa .content .date_block input[type="date"].form-control::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
  html.vt .vtm-pa .content .date_block input[type="date"].form-control::-webkit-date-and-time-value {
    text-align: left;
  }

  /* -------------------------------------------------------------------------------------------------
     2. Tables of my pages: numbers right-aligned (ref r20), one line per cell, per-page column widths
     ------------------------------------------------------------------------------------------------- */
  html.vt .vtm-pa .content .list_scroll > * > div,
  html.vt .vtm-pa .content .list_top > div {
    white-space: nowrap;
  }
  /* reference cells are all #333 (our grey helper text: dates, symbols, waiting status) */
  html.vt .vtm-pa .content .list_scroll .listtxt.grey {
    color: var(--m-ink);
  }
  /* empty state also for lists that the page never empties (overnight: no position -> the list keeps its
     source whitespace, so :empty of the base rule does not match); separate rule: old engines drop :has().
     Same text as the base rule; the final stop is U+2024 (one dot leader, drawn by the text face): the ASCII "."
     would come from the half-width digit face VTNum, and no font-family is set here */
  html.vt .vtm-pa-overnight .content .list_scroll:not(:empty):not(:has(> *))::before {
    content: "\C870\D68C\ACB0\ACFC\AC00\0020\C5C6\C2B5\B2C8\B2E4\2024";
    display: block;
    padding: 0 20px;
    color: var(--m-ink);
    font-size: 14px;
    line-height: var(--m-row-h);
  }

  /* -------------------------------------------------------------------------------------------------
     3. deposit3 / withdraw3 (ref r17 / r18): bank info as reference form rows, history section header
     ------------------------------------------------------------------------------------------------- */
  /* bank block: [label 120 | bank] / [account + holder as one read-only field, full width] (r17 bank rows) */
  html.vt .vtm-pa .content .dw_container > .dw_block:first-child {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    row-gap: 10px;
    column-gap: 0;
    margin-bottom: 10px;
  }
  html.vt .vtm-pa .content .dw_container > .dw_block:first-child > .g_title {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding-right: 10px;
    color: var(--m-ink);
    font-size: 14px;
    line-height: 20px;
  }
  html.vt .vtm-pa .content .dw_container > .dw_block:first-child > .mbank,
  html.vt .vtm-pa .content .dw_container > .dw_block:first-child > .maccount,
  html.vt .vtm-pa .content .dw_container > .dw_block:first-child > .mname {
    min-width: 0;
    min-height: var(--m-ctl-h);
    padding: 8px 14px;
    border: 1px solid var(--m-line);
    background-color: var(--m-bg);
    color: var(--m-ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    overflow-wrap: anywhere;
  }
  html.vt .vtm-pa .content .dw_container > .dw_block:first-child > .mbank {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  html.vt .vtm-pa .content .dw_container > .dw_block:first-child > .maccount {
    grid-column: 1 / 3;
    grid-row: 2;
    border-right: 0;
  }
  html.vt .vtm-pa .content .dw_container > .dw_block:first-child > .mname {
    grid-column: 3;
    grid-row: 2;
    border-left: 0;
    padding-left: 6px;
    white-space: nowrap;
  }
  html.vt .vtm-pa .content .dw_container > .dw_block:first-child > .dw_input {
    grid-column: 1 / -1;
    min-height: 0;
    margin: 0;
  }
  /* the deposit-permission button is the only child of its row; while the page hides it (inline display none)
     the empty row goes too, so no extra grid gap (separate rule: old engines drop :has()) */
  html.vt .vtm-pa .content .dw_container > .dw_block:first-child > .dw_input:has(> .dw_btn3[style*="none"]) {
    display: none;
  }
  /* buttons: text only like the reference confirm button (the small decorative icons are hidden) */
  html.vt .vtm-pa .content .dw_container .dw_btn3 > .icon {
    display: none;
  }
  /* form rows of the request block */
  html.vt .vtm-pa .content .dw_container > .dw_block + .dw_block {
    position: relative;
    gap: 0;
  }
  html.vt .vtm-pa .content .dw_container .w-form,
  html.vt .vtm-pa .content .dw_container form {
    margin: 0;
  }
  html.vt .vtm-pa .content .dw_container form > .dw_input:last-child {
    margin-bottom: 0;
  }

  /* history section header (NEW .vtm-pa-sec): title 18px/600 + fold / reload / close icons at the right (r17) */
  html.vt .vtm-pa .content .vtm-pa-sec {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 41px;
    margin: 0;
    padding: 7px 0;
  }
  html.vt .vtm-pa .content .vtm-pa-sec > .vtm-pa-sec-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--m-ink);
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
  }
  /* three 22px boxes, glyph centres at x = 328 / 350 / 372 like the reference list icons */
  html.vt .vtm-pa .content .vtm-pa-sec > .vtm-pa-ico {
    width: 22px;
    height: 28px;
    background-size: 18px 18px;
  }
  html.vt .vtm-pa .content .vtm-pa-sec > .vtm-pa-ico-fold {
    background-size: 22px 22px;
  }
  html.vt .vtm-pa .content .vtm-pa-sec > .vtm-pa-ico-reload {
    background-size: 20px 20px;
  }
  html.vt .vtm-pa .content .vtm-pa-sec > .vtm-pa-ico:last-child {
    margin-right: -13px;
  }
  html.vt .vtm-pa .content .vtm-pa-sec.vtm-pa-sec-folded + .list,
  html.vt .vtm-pa .content .vtm-pa-sec.vtm-pa-sec-closed,
  html.vt .vtm-pa .content .vtm-pa-sec.vtm-pa-sec-closed + .list {
    display: none;
  }
  /* history table of deposit / withdraw: one line per row; the scroll box is at most 305px tall like the reference
     (the list is not paginated; longer histories scroll inside the box) */
  html.vt .vtm-pa-deposit .content .list,
  html.vt .vtm-pa-withdraw .content .list {
    max-height: 305px;
    overflow-y: auto;
  }
  /* columns: date (one line, takes the spare width) | amount (right) | status | name (withdraw); wider than the
     screen only on very narrow phones -> horizontal scroll like the reference */
  html.vt .vtm-pa-deposit .content .list_top.dw,
  html.vt .vtm-pa-deposit .content .list_scroll.dw,
  html.vt .vtm-pa-withdraw .content .list_top.dw,
  html.vt .vtm-pa-withdraw .content .list_scroll.dw {
    width: max-content;
    min-width: 100%;
  }
  html.vt .vtm-pa-deposit .content .list_top.dw > div,
  html.vt .vtm-pa-deposit .content .list_scroll.dw > .list_warp > div,
  html.vt .vtm-pa-withdraw .content .list_top.dw > div,
  html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > div {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 8px;
  }
  html.vt .vtm-pa-deposit .content .list_top.dw > :nth-child(1),
  html.vt .vtm-pa-deposit .content .list_scroll.dw > .list_warp > :nth-child(1),
  html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(1),
  html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(1) {
    flex: 1 0 auto;
    width: 146px;
    padding-left: 12px;
  }
  html.vt .vtm-pa-deposit .content .list_top.dw > :nth-child(2),
  html.vt .vtm-pa-deposit .content .list_scroll.dw > .list_warp > :nth-child(2),
  html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(2),
  html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(2) {
    width: 110px;
    justify-content: center;
    text-align: center;
  }
  html.vt .vtm-pa-deposit .content .list_scroll.dw > .list_warp > :nth-child(2),
  html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(2) {
    justify-content: flex-end;
    text-align: right;
  }
  html.vt .vtm-pa-deposit .content .list_top.dw > :nth-child(3),
  html.vt .vtm-pa-deposit .content .list_scroll.dw > .list_warp > :nth-child(3),
  html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(3),
  html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(3) {
    width: 84px;
    justify-content: center;
    text-align: center;
  }
  html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(4),
  html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(4) {
    width: 96px;
    justify-content: center;
    text-align: center;
  }

  /* phones (<= 479 px): every column inside the screen, like the old layout (no cut header or value at
     360 / 375 / 390 / 412 / 430). Amount, status and name keep fixed widths that hold the widest real values
     with 14px text (Hangul counted at 1em for the Android fonts; amounts up to 1,000,000,000 on deposit and
     999,999,999 on withdraw); the date takes the rest of the width and breaks into date / time when it is
     narrower than one line */
  @media (max-width: 479.98px) {
    html.vt .vtm-pa-deposit .content .list_top.dw,
    html.vt .vtm-pa-deposit .content .list_scroll.dw,
    html.vt .vtm-pa-withdraw .content .list_top.dw,
    html.vt .vtm-pa-withdraw .content .list_scroll.dw {
      width: 100%;
      min-width: 0;
    }
    html.vt .vtm-pa-deposit .content .list_top.dw > div,
    html.vt .vtm-pa-deposit .content .list_scroll.dw > .list_warp > div,
    html.vt .vtm-pa-withdraw .content .list_top.dw > div,
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > div {
      flex: 0 0 auto;
      padding: 0 4px;
    }
    html.vt .vtm-pa-deposit .content .list_top.dw > :nth-child(1),
    html.vt .vtm-pa-deposit .content .list_scroll.dw > .list_warp > :nth-child(1),
    html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(1),
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(1) {
      flex: 1 1 0px;
      width: auto;
      min-width: 0;
      padding-left: 8px;
    }
    html.vt .vtm-pa-deposit .content .list_scroll.dw > .list_warp > :nth-child(1),
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(1) {
      white-space: normal;
    }
    html.vt .vtm-pa-deposit .content .list_top.dw > :nth-child(2),
    html.vt .vtm-pa-deposit .content .list_scroll.dw > .list_warp > :nth-child(2) {
      width: 113px;
    }
    html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(2),
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(2) {
      width: 99px;
    }
    html.vt .vtm-pa-deposit .content .list_top.dw > :nth-child(3),
    html.vt .vtm-pa-deposit .content .list_scroll.dw > .list_warp > :nth-child(3) {
      width: 78px;
    }
    html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(3),
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(3) {
      width: 74px;
    }
    html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(4),
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(4) {
      width: 64px;
    }
    /* long depositor names wrap inside the 64px name column (like the old layout) instead of running past the table edge;
       break-all also breaks unspaced Latin names */
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(4),
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(4) * {
      white-space: normal;
      word-break: break-all;
    }
  }
  /* small phones (< 360 px, e.g. 344 px fold cover screens): the four withdraw columns in 13px text; below
     344 px the table keeps 304 px and scrolls instead of letting the date run into the amount */
  @media (max-width: 359.98px) {
    html.vt .vtm-pa-withdraw .content .list_top.dw,
    html.vt .vtm-pa-withdraw .content .list_scroll.dw {
      min-width: 304px;
    }
    html.vt .vtm-pa-withdraw .content .list_top.dw,
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp {
      font-size: 13px;
    }
    html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(2),
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(2) {
      width: 92px;
    }
    html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(3),
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(3) {
      width: 73px;
    }
    html.vt .vtm-pa-withdraw .content .list_top.dw > :nth-child(4),
    html.vt .vtm-pa-withdraw .content .list_scroll.dw > .list_warp > :nth-child(4) {
      width: 60px;
    }
  }

  /* deposit: the correction chip (resets the entered amount) sits at the right end of the amount row */
  html.vt .vtm-pa-deposit .content #depositForm > .dw_remote {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 64px;
    margin: 0;
    z-index: 1;
  }
  html.vt .vtm-pa-deposit .content #depositForm form > .dw_input:first-child > .input_box2 {
    margin-right: 72px;
  }
  html.vt .vtm-pa .content .dw_remote > .dw_btn1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    padding: 0 6px;
    white-space: nowrap;
  }
  html.vt .vtm-pa .content .dw_remote > .dw_btn1 > .icon {
    width: 14px;
    height: 14px;
  }

  /* withdraw: amount rows first (available / requested), then the amount chips (3 per row), then the button.
     Visual order only (display: contents on the form wrappers; the DOM is unchanged). */
  @supports (display: contents) {
    html.vt .vtm-pa-withdraw .content .dw_container > .dw_block + .dw_block {
      display: flex;
      flex-direction: column;
    }
    html.vt .vtm-pa-withdraw .content .dw_container > .dw_block + .dw_block > .w-form,
    html.vt .vtm-pa-withdraw .content .dw_container > .dw_block + .dw_block > .w-form > form {
      display: contents;
    }
    html.vt .vtm-pa-withdraw .content .dw_container form > .dw_input:nth-of-type(1) { order: 1; }
    html.vt .vtm-pa-withdraw .content .dw_container form > .dw_input:nth-of-type(2) { order: 2; }
    html.vt .vtm-pa-withdraw .content .dw_container > .dw_block + .dw_block > .dw_remote { order: 3; }
    html.vt .vtm-pa-withdraw .content .dw_container form > .dw_input:nth-of-type(3) { order: 4; margin-bottom: 0; }
  }
  html.vt .vtm-pa-withdraw .content .dw_remote {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
  }

  /* -------------------------------------------------------------------------------------------------
     4. History tables: column widths per page (header and rows use the same nth-child -> aligned)
     ------------------------------------------------------------------------------------------------- */
  /* dwhistory: time | status | kind | amount | memo */
  html.vt .vtm-pa-dwhistory .content .list_top > :nth-child(2),
  html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(2),
  html.vt .vtm-pa-dwhistory .content .list_top > :nth-child(3),
  html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(3) {
    width: 90px;
  }
  html.vt .vtm-pa-dwhistory .content .list_top > :nth-child(4),
  html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(4) {
    width: 120px;
  }
  html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(4) {
    justify-content: flex-end;
    text-align: right;
  }
  /* tradehistory: order no | time | symbol | side | type | price | qty | fee | P&L | net */
  html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(3),
  html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(3) {
    width: 100px;
  }
  html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(4),
  html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(4),
  html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(7),
  html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(7) {
    width: 72px;
  }
  html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(5),
  html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(5) {
    width: 104px;
  }
  html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(6),
  html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(6),
  html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(8),
  html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(8),
  html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(9),
  html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(9),
  html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(10),
  html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(10) {
    width: 110px;
  }
  html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(n+6) {
    justify-content: flex-end;
    text-align: right;
  }
  /* calculateHistory: date | total | P&L | fees | memo */
  html.vt .vtm-pa-calculateHistory .content .list_top > div,
  html.vt .vtm-pa-calculateHistory .content .list_scroll > * > div {
    width: 112px;
  }
  html.vt .vtm-pa-calculateHistory .content .list_top > :nth-child(5),
  html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(5) {
    width: 80px;
  }
  html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(2),
  html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(3),
  html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(4) {
    justify-content: flex-end;
    text-align: right;
  }
  /* clickLogList: time | action | symbol | qty | side | price | memo */
  html.vt .vtm-pa-clickLogList .content .list_top > :nth-child(2),
  html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(2) {
    width: 190px;
  }
  html.vt .vtm-pa-clickLogList .content .list_top > :nth-child(n+3),
  html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(n+3) {
    width: 96px;
  }
  html.vt .vtm-pa-clickLogList .content .list_top > :nth-child(6),
  html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(6) {
    width: 110px;
  }
  html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(4),
  html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(6) {
    justify-content: flex-end;
    text-align: right;
  }

  /* Wide tables: the first screen ends exactly at the edge of the table box, so no header or value is cut there
     at any width (phones 360 / 375 / 390 / 412 / 430, landscape phones and tablets). The table is "100% + the
     fixed widths of the columns to the right"; the first-screen columns have base widths that hold their widest
     real values (14px text; Hangul counted at 1em for the Android fonts) and share the rest of the visible width
     (flex-grow); the other columns keep their widths above and are reached by the horizontal scroll. The set of
     first-screen columns depends on the width range: >= 768 px (visible width >= 728), 480-767 px (>= 440),
     <= 479 px (>= 320). Columns, order and alignment are unchanged; only widths and line breaks inside cells.
     calculateHistory / dwhistory fit completely from 768 px with the widths above (nothing to do there). */
  @media (min-width: 768px) {
    /* tradehistory >= 768: order no | time | symbol | side | type | price | qty; fee + P&L + net = 330 px */
    html.vt .vtm-pa-tradehistory .content .list_top,
    html.vt .vtm-pa-tradehistory .content .list_scroll {
      width: calc(100% + 330px);
    }
    html.vt .vtm-pa-tradehistory .content .list_top > div,
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > div {
      flex: 1 1 auto;
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(1),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(1) {
      flex: 0 0 auto;
      width: 143px;
      padding: 0 5px;
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(2),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(2) {
      width: 140px;
      padding: 0 5px;
    }
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(2) {
      white-space: normal;
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(3),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(3) {
      width: 104px;
      padding: 0 5px;
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(4),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(4) {
      width: 48px;
      padding: 0 3px;
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(n+8),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(n+8) {
      flex: 0 0 auto;
    }
    /* clickLogList >= 768: time | action | symbol | qty | side; price + memo = 206 px */
    html.vt .vtm-pa-clickLogList .content .list_top,
    html.vt .vtm-pa-clickLogList .content .list_scroll {
      width: calc(100% + 206px);
    }
    html.vt .vtm-pa-clickLogList .content .list_top > div,
    html.vt .vtm-pa-clickLogList .content .list_scroll > * > div {
      flex: 1 1 auto;
    }
    html.vt .vtm-pa-clickLogList .content .list_top > :nth-child(1),
    html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(1) {
      flex: 0 0 auto;
      width: 146px;
      padding: 0 8px;
    }
    html.vt .vtm-pa-clickLogList .content .list_top > :nth-child(2),
    html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(2) {
      width: 188px;
    }
    html.vt .vtm-pa-clickLogList .content .list_top > :nth-child(n+6),
    html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(n+6) {
      flex: 0 0 auto;
    }
  }
  @media (max-width: 767.98px) {
    /* tradehistory 480-767: order no (two lines of 10 + 9 digits) | time (date / time) | symbol | side | type;
       price 110 + qty 72 + fee 110 + P&L 110 + net 110 = 512 px */
    html.vt .vtm-pa-tradehistory .content .list_top,
    html.vt .vtm-pa-tradehistory .content .list_scroll {
      width: calc(100% + 512px);
    }
    html.vt .vtm-pa-tradehistory .content .list_top > div,
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > div {
      flex: 0 0 auto;
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(1),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(1) {
      width: 81px;
      padding: 0 5px;
    }
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(1) {
      white-space: normal;
      word-break: break-all;
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(2),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(2) {
      flex: 1 1 auto;
      width: 80px;
      min-width: 80px;           /* "YYYY-MM-DD" stays on one line (a squeezed cell would break after a "-") */
      padding: 0 5px;
    }
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(2) {
      white-space: normal;
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(3),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(3) {
      flex: 1 1 auto;
      width: 104px;
      padding: 0 5px;
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(4),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(4) {
      flex: 1 1 auto;
      width: 48px;
      padding: 0 3px;
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(5),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(5) {
      flex: 1 1 auto;
    }
    /* calculateHistory 480-767: date | total | P&L | fees; memo 80 px */
    html.vt .vtm-pa-calculateHistory .content .list_top,
    html.vt .vtm-pa-calculateHistory .content .list_scroll {
      width: calc(100% + 80px);
    }
    html.vt .vtm-pa-calculateHistory .content .list_top > div,
    html.vt .vtm-pa-calculateHistory .content .list_scroll > * > div {
      flex: 1 1 auto;
    }
    html.vt .vtm-pa-calculateHistory .content .list_top > :nth-child(1),
    html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(1) {
      width: 90px;
    }
    html.vt .vtm-pa-calculateHistory .content .list_top > :nth-child(2),
    html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(2),
    html.vt .vtm-pa-calculateHistory .content .list_top > :nth-child(3),
    html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(3) {
      width: 104px;
    }
    html.vt .vtm-pa-calculateHistory .content .list_top > :nth-child(5),
    html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(5) {
      flex: 0 0 auto;
    }
    /* dwhistory 480-767: time | status | kind | amount; memo 160 px */
    html.vt .vtm-pa-dwhistory .content .list_top,
    html.vt .vtm-pa-dwhistory .content .list_scroll {
      width: calc(100% + 160px);
    }
    html.vt .vtm-pa-dwhistory .content .list_top > div,
    html.vt .vtm-pa-dwhistory .content .list_scroll > * > div {
      flex: 1 1 auto;
    }
    html.vt .vtm-pa-dwhistory .content .list_top > :nth-child(1),
    html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(1) {
      width: 150px;
    }
    html.vt .vtm-pa-dwhistory .content .list_top > :nth-child(2),
    html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(2) {
      width: 70px;
    }
    html.vt .vtm-pa-dwhistory .content .list_top > :nth-child(3),
    html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(3) {
      width: 80px;
    }
    html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(1),
    html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(3) {
      white-space: normal;
      word-break: keep-all;
    }
    html.vt .vtm-pa-dwhistory .content .list_top > :nth-child(5),
    html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(5) {
      flex: 0 0 auto;
    }
    /* clickLogList 480-767: time | action | symbol; qty 96 + side 96 + price 110 + memo 96 = 398 px. The time
       breaks into date / time when the action needs the room (phones) */
    html.vt .vtm-pa-clickLogList .content .list_top,
    html.vt .vtm-pa-clickLogList .content .list_scroll {
      width: calc(100% + 398px);
    }
    html.vt .vtm-pa-clickLogList .content .list_top > div,
    html.vt .vtm-pa-clickLogList .content .list_scroll > * > div {
      flex: 0 0 auto;
    }
    html.vt .vtm-pa-clickLogList .content .list_top > :nth-child(1),
    html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(1) {
      flex: 0 1 146px;
      width: 146px;
      min-width: 86px;           /* "YYYY-MM-DD" stays on one line */
      padding: 0 8px;
    }
    html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(1) {
      white-space: normal;
    }
    html.vt .vtm-pa-clickLogList .content .list_top > :nth-child(2),
    html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(2) {
      flex: 1 0 188px;
      width: 188px;
    }
    html.vt .vtm-pa-clickLogList .content .list_top > :nth-child(3),
    html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(3) {
      flex: 1 1 auto;
    }
  }
  @media (max-width: 479.98px) {
    /* phones: the rightmost first-screen column of the 480-767 set goes back to the scroll part
       (tradehistory 4 columns like the reference, + 104 = 616 px; calculateHistory 3, + 112 = 192 px;
       dwhistory 3, + 120 = 280 px; clickLogList 2, + 96 = 494 px) */
    html.vt .vtm-pa-tradehistory .content .list_top,
    html.vt .vtm-pa-tradehistory .content .list_scroll {
      width: calc(100% + 616px);
    }
    html.vt .vtm-pa-tradehistory .content .list_top > :nth-child(5),
    html.vt .vtm-pa-tradehistory .content .list_scroll > * > :nth-child(5) {
      flex: 0 0 auto;
    }
    html.vt .vtm-pa-calculateHistory .content .list_top,
    html.vt .vtm-pa-calculateHistory .content .list_scroll {
      width: calc(100% + 192px);
    }
    html.vt .vtm-pa-calculateHistory .content .list_top > :nth-child(4),
    html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(4) {
      flex: 0 0 auto;
    }
    html.vt .vtm-pa-dwhistory .content .list_top,
    html.vt .vtm-pa-dwhistory .content .list_scroll {
      width: calc(100% + 280px);
    }
    html.vt .vtm-pa-dwhistory .content .list_top > :nth-child(4),
    html.vt .vtm-pa-dwhistory .content .list_scroll > * > :nth-child(4) {
      flex: 0 0 auto;
    }
    html.vt .vtm-pa-clickLogList .content .list_top,
    html.vt .vtm-pa-clickLogList .content .list_scroll {
      width: calc(100% + 494px);
    }
    html.vt .vtm-pa-clickLogList .content .list_top > :nth-child(3),
    html.vt .vtm-pa-clickLogList .content .list_scroll > * > :nth-child(3) {
      flex: 0 0 auto;
    }
  }
  @media (max-width: 359.98px) {
    /* small phones (< 360 px): the three calculate columns with 6px padding hold 12-character amounts */
    html.vt .vtm-pa-calculateHistory .content .list_top > :nth-child(-n+3),
    html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(-n+3) {
      padding: 0 6px;
    }
    html.vt .vtm-pa-calculateHistory .content .list_top > :nth-child(1),
    html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(1) {
      width: 82px;
    }
    html.vt .vtm-pa-calculateHistory .content .list_top > :nth-child(2),
    html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(2),
    html.vt .vtm-pa-calculateHistory .content .list_top > :nth-child(3),
    html.vt .vtm-pa-calculateHistory .content .list_scroll > * > :nth-child(3) {
      width: 96px;
    }
  }

  /* -------------------------------------------------------------------------------------------------
     5. Summary cards (tradehistory / calculateHistory / overnight; ref r21): the amount carries the won sign
     ------------------------------------------------------------------------------------------------- */
  html.vt .vtm-pa .content > .h_block .result_num::before,
  html.vt .vtm-pa .content > .o_block .result_txt::before {
    content: "\20A9\00A0";
  }
  html.vt .vtm-pa .content > .h_block {
    padding-top: 7px;
  }

  /* -------------------------------------------------------------------------------------------------
     6. overnight3: section headers = title + action button at the right (reference card header), hint below;
        tables with compact columns
     ------------------------------------------------------------------------------------------------- */
  html.vt .vtm-pa-overnight .content > .g_block > .h_titlebox {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
  }
  html.vt .vtm-pa-overnight .content > .g_block > .h_titlebox > .block_title {
    grid-column: 1;
    grid-row: 1;
  }
  html.vt .vtm-pa-overnight .content > .g_block > .h_titlebox > .sub_btn {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    height: 32px;
    margin: 0 0 0 auto;
    padding: 0 12px;
  }
  html.vt .vtm-pa-overnight .content > .g_block > .h_titlebox > div:not(.block_title):not(.sub_btn) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  html.vt .vtm-pa-overnight .content .list_top > div,
  html.vt .vtm-pa-overnight .content .list_scroll > * > div {
    width: 84px;
  }
  html.vt .vtm-pa-overnight .content .list_top > :nth-child(1),
  html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(1) {
    width: 56px;
  }
  html.vt .vtm-pa-overnight .content .list_top > :nth-child(2),
  html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(2),
  html.vt .vtm-pa-overnight .content .list_top > :nth-child(5),
  html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(5) {
    width: 100px;
  }
  html.vt .vtm-pa-overnight .content .list_top > :nth-child(3),
  html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(3) {
    width: 64px;
  }
  html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(n+4) {
    justify-content: flex-end;
    text-align: right;
  }
  html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(1) > .list_check {
    justify-content: center;
  }
  /* below 768 px the table no longer fits: the first screen ends exactly at the edge (same rule as section 4),
     so the right-aligned values are never cut there. 480-767: select | symbol | side | balance | price,
     overnight + requested = 168 px to the right; phones: select | symbol | side | balance, + price = 268 px */
  @media (max-width: 767.98px) {
    html.vt .vtm-pa-overnight .content .list_top,
    html.vt .vtm-pa-overnight .content .list_scroll {
      width: calc(100% + 168px);
    }
    html.vt .vtm-pa-overnight .content .list_top > div,
    html.vt .vtm-pa-overnight .content .list_scroll > * > div {
      flex: 0 0 auto;
    }
    html.vt .vtm-pa-overnight .content .list_top > :nth-child(2),
    html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(2) {
      flex: 1 1 auto;
      width: 104px;
      padding: 0 5px;
    }
    html.vt .vtm-pa-overnight .content .list_top > :nth-child(3),
    html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(3) {
      flex: 1 1 auto;
      width: 54px;
    }
    html.vt .vtm-pa-overnight .content .list_top > :nth-child(4),
    html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(4),
    html.vt .vtm-pa-overnight .content .list_top > :nth-child(5),
    html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(5) {
      flex: 1 1 auto;
    }
  }
  @media (max-width: 479.98px) {
    html.vt .vtm-pa-overnight .content .list_top,
    html.vt .vtm-pa-overnight .content .list_scroll {
      width: calc(100% + 268px);
    }
    html.vt .vtm-pa-overnight .content .list_top > :nth-child(5),
    html.vt .vtm-pa-overnight .content .list_scroll > * > :nth-child(5) {
      flex: 0 0 auto;
    }
  }

  /* -------------------------------------------------------------------------------------------------
     7. option3: reference form rows (label 120 + control h36), section labels, primary buttons
     ------------------------------------------------------------------------------------------------- */
  html.vt .vtm-pa-option .content .option_block {
    flex-direction: column;
    gap: 0;
  }
  html.vt .vtm-pa-option .content .option_area {
    width: 100%;
    gap: 0;
    align-items: stretch;
  }
  html.vt .vtm-pa-option .content .option_area + .option_area {
    margin-top: 20px;
  }
  /* section label ("order quantity buttons" / "voice guide") */
  html.vt .vtm-pa-option .content .option_area > div:first-child {
    padding: 7px 0;
    color: var(--m-ink);
    font-size: 16px;
    line-height: 27px;
    font-weight: 500;
  }
  html.vt .vtm-pa-option .content .option_box {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
  }
  /* quantity rows: label 120 + input */
  html.vt .vtm-pa-option .content .option_area:first-child .o_input_warp {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    width: 100%;
    height: auto;
    margin: 0 0 10px;
  }
  html.vt .vtm-pa-option .content .option_area:first-child .o_input_warp > div {
    flex: 0 0 120px;
    padding-right: 10px;
    color: var(--m-ink);
    font-size: 14px;
    line-height: 20px;
  }
  html.vt .vtm-pa-option .content .option_area:first-child .o_input_warp > .o_input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  /* voice options: two columns of check rows (36px) */
  html.vt .vtm-pa-option .content .option_area + .option_area .o_input_warp {
    width: 50%;
    height: var(--m-ctl-h);
    margin: 0 0 10px;
  }
  html.vt .vtm-pa-option .content .option_area + .option_area .list_check {
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
  html.vt .vtm-pa-option .content .option_area + .option_area .g_check_label {
    margin-left: 8px;
    color: var(--m-ink);
    font-size: 14px;
    line-height: 20px;
  }
  html.vt .vtm-pa-option .content .option_area .btn3 {
    width: 100%;
    margin: 0;
  }
}