/*
 * vt-m-base.css - MTS mobile redesign 2026-11: shared tokens + common page components (owner: BASE).
 * Loaded only when vtTheme (mobileFrame/header.jsp), after vt-mts-order.css. Layout follows the reference mobile pages (see the project spec).
 * Rules: everything inside @media (max-width: 991px) and prefixed html.vt, except the guard below that hides new mobile-only markup on desktop.
 */
@media (min-width: 992px) {
  html.vt .vtm-only { display: none !important; }
}
html.vt {
  --m-nav: #0F202C; --m-nav-ink: #C2CDD7; --m-badge: #FF7043;
  --m-tabbar: #334D6E; --m-tab-on: #233D58; --m-sym: #E8ECF1;
  --m-menu-open: #0A151D; --m-menu-sub: #12202D; --m-menu-sub-ink: #99AABB; --m-menu-line: #25394E;
  --m-bg: #FFFFFF; --m-ink: #333333; --m-label: #888888; --m-caption: #999999; --m-line: #DEDEDE;
  --m-head-trade: #F7F7F7; --m-head: #F5F5F5; --m-card: #F5F5F5;
  --m-primary: #2196F3; --m-sell-btn: #0083EA; --m-buy-btn: #FE5C5C; --m-up: #F44336; --m-down: #2196F3; --m-rate-up: #FE5C5C;
  --m-cur-bg: #FFFF00; --m-cur-ink: #FF0000;
  --m-lad-sell: rgba(33,150,243,.10); --m-lad-buy: rgba(244,67,54,.10); --m-bar-sell: #DAEDFE; --m-bar-buy: #FFDCDA;
  --m-ord-mitsell: #DBEEF4; --m-ord-sell: #C0D9F1; --m-ord-buy: #FCD5B5; --m-ord-mitbuy: #FDEADA;
  --m-bottombar: #334D6E; --m-bottom-line: #526C91;
  --m-b-limit: #EFABC0; --m-b-market: #89CDF2; --m-b-mit: #4CAF50; --m-b-tpsl: #08A1F5; --m-b-cancel: #D2E3FD;
  --m-grey-btn: #949A9F; --m-step: #EFEFEF; --m-sheet-info: #F5F5F5;
  --m-page: #0F202C; --m-timeline: #607D8B; --m-important: #F44336; --m-tab-dark: #324148;
  --m-login-btn: #0C2748;
}

/* ---- digits on phones (2026-11-07, owner: "숫자는 굴림체로") ----
   Phones have no Gulim/GulimChe (Windows/Office fonts, which may not be served as web fonts). On the phone layout the digit face
   is VTNumM: the device's own GulimChe/Gulim if present, else vtnum-bm.woff2 = digits/punctuation of Baekmuk Gulim (free
   Gulim-like design, Baekmuk License, see /webflow/fonts/vt/vtnum-bm-LICENSE.txt) rescaled to GulimChe's metrics (0.5em cells,
   same height and baseline). Same unicode ranges as VTNum/VTDigits in vt-fonts.css; only the stacks change, nothing sets
   font-family on elements. WTS (>= 992px) keeps VTNum unchanged. */
@font-face {
  font-family: 'VTNumM';
  src: local('GulimChe'), local('\AD74\B9BC\CCB4'), local('Gulim'), local('\AD74\B9BC'),
       url(/webflow/fonts/vt/vtnum-bm.woff2?v=20261107) format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0025, U+002B-002F, U+0030-003A;
}
@font-face {
  font-family: 'VTDigitsM';
  src: local('GulimChe'), local('\AD74\B9BC\CCB4'), local('Gulim'), local('\AD74\B9BC'),
       url(/webflow/fonts/vt/vtnum-bm.woff2?v=20261107) format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0030-0039;
}
/* 2026-11-07 (owner, iPhone shots 참조 vs 우리): the Gulim-like digits above are narrow/thin with wide ". ," cells and do not look
   like the reference. The reference MTS has no special digit font: its stack is Roboto, -apple-system, BlinkMacSystemFont,
   "Segoe UI", ... and it loads no Roboto, so an iPhone draws everything (digits too) in the system font (SF), Android in its
   system Roboto. Same here: system font first (iPhone/iPad = SF, Mac Chrome = BlinkMacSystemFont), then Roboto (Android:
   our self-hosted Roboto = the same design as Android's system Roboto), proportional digits like the reference (no tabular-nums).
   VTNumM/VTDigitsM stay declared but unused (a font that no element uses is never downloaded).
   Rollback = put 'VTNumM' / 'VTDigitsM' back in front of the two stacks and drop the font-variant-numeric rule. */
@media (max-width: 991px) {
  html.vt {
    --vt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', '\B9D1\C740\0020\ACE0\B515', 'Noto Sans KR', sans-serif;
    --vt-font-prose: var(--vt-font);
  }
  html.vt .body {
    font-variant-numeric: normal;
  }
}

/* =====================================================================================================
   COMMON PAGE COMPONENTS (secondary pages: deposit, withdraw, histories, notice/msg/qna, option, overnight, ...)
   Reference: r17 deposit, r18 withdraw, r19 tradelist, r20 userprofit, r21 position cards, r23 consult list, r24 tabs.

   SCOPE - why every selector starts with "html.vt .content > <block>" or "html.vt .content .<component>":
   * secondary pages: body > .section > .content > .title_section + blocks (.h_block/.o_block/.g_block/.pagging/...);
   * the order page has .section > .content too, but its children are <audio>, .chart_box > .q_content1/2 and it
     uses none of the classes styled here (its lists are .c_list... / .c_chart...) -> .content itself, .section and
     .chart_box are NEVER styled here (they exist on the order page). A block that must be matched next to the
     order page's classes can use the guard ".content > .title_section ~ X" (the order page has no .title_section);
   * login/join/main use .login_section (no .content); navbar/menu live in .frame (top.jsp); popups and order
     sheets live in footer.jsp outside .section -> none of them is reachable from ".content".
   VERTICAL START: the page content starts at y = 50 (navbar height, SHELL owns .top and the .section top offset).
   Specificity: "html.vt .content X" = (0,3,1) beats the shared vt-mts-base.css rules "html.vt X" (0,2,1) and the
   page <style> blocks. Page CSS (vt-m-pages-a/b.css) overrides with one more class (a page hook) - see the
   recipes at the end of this file.
   Fonts: no font-family anywhere (rule 1.6: everything inherits var(--vt-font) = GulimChe digits). Weights <= 600.
   ===================================================================================================== */
@media (max-width: 991px) {
  html.vt {
    /* .content keeps its plusasset padding/gap (it is shared with the order page), the blocks compensate:
       --m-cpad / --m-cgap = plusasset .content side padding / flex gap (768-991 here, <=767 below). */
    --m-gutter: 20px;                                   /* reference page side padding (x = 20) */
    --m-cpad: 14px;
    --m-cgap: 6px;
    --m-inset: calc(var(--m-gutter) - var(--m-cpad));   /* extra side margin of every block */
    --m-ctl-h: 36px;                                    /* form control height */
    --m-btn-h: 45px;                                    /* button height (reference 44.8) */
    --m-row-h: 50px;                                    /* table row height */
    --m-col1: 96px;                                     /* table column widths by our classes (see 7); */
    --m-col2: 156px;                                    /* list2 holds "YYYY-MM-DD hh:mm:ss" on one line */
    --m-col3: 160px;
    --m-col4: 220px;
  }

  /* ---------------------------------------------------------------------------------------------------
     1. Page skeleton: flat white blocks at x = 20, no panels/borders/shadows, no gaps between blocks
        (reference cards follow each other; every block starts with its own 41px title row)
     --------------------------------------------------------------------------------------------------- */
  html.vt .content > .title_section,
  html.vt .content > .h_block,
  html.vt .content > .o_block,
  html.vt .content > .g_block:not(._3),
  html.vt .content > .warning_box,
  html.vt .content > .pagging {
    width: auto;
    min-width: 0;
    margin-left: var(--m-inset);
    margin-right: var(--m-inset);
  }
  html.vt .content > .h_block,
  html.vt .content > .o_block,
  html.vt .content > .g_block:not(._3) {
    margin-top: calc(0px - var(--m-cgap));    /* cancels the .content gap */
    padding: 0 0 10px;
    gap: 0;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--m-bg);
    background-image: none;
    align-items: stretch;                     /* plusasset centres the children of .g_block */
  }
  /* inner wrappers of the blocks lose their own side padding: everything aligns at x = 20 */
  html.vt .content .form-block,
  html.vt .content .qna_box,
  html.vt .content .option_block,
  html.vt .content .dw_container {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  html.vt .content .qna_box,
  html.vt .content .dw_container {
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
  }
  /* deposit/withdraw: bank block and form stacked at every phone/tablet width (plusasset stacks only < 768) */
  html.vt .content .dw_container {
    flex-direction: column;
  }
  html.vt .content .dw_container > .dw_block {
    width: 100%;
  }

  /* ---------------------------------------------------------------------------------------------------
     2. Page title row: 18px/600 #333 at x = 20, text box 57..84 (reference card header 50..91: 7 + 27 + 7);
        the English subtitle is decorative (not in the reference) and hidden; the title buttons
        (.titlesub_btn_area: select-delete / write / search) sit at the right end like the reference header icons.
     --------------------------------------------------------------------------------------------------- */
  html.vt .content > .title_section {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    min-height: 41px;
    padding: 7px 0;
  }
  html.vt .content > .title_section > .heading {
    flex: 1 1 auto;
    margin: 0;
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
    color: var(--m-ink);
  }
  html.vt .content > .title_section > .heading + div:not([class]) {
    display: none;
  }
  html.vt .content > .title_section > .titlesub_btn_area {
    position: static;
    flex: none;
    width: auto;
    margin: -3px 0 -3px auto;                 /* 32px buttons inside the 27px title line: the row stays 41px */
    gap: 8px;
  }
  html.vt .content > .title_section .titlesub_btn {
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    gap: 4px;
    font-size: 13px;
    line-height: 1;
    border-radius: 3px;
  }
  html.vt .content > .title_section .titlesub_btn svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  /* ---------------------------------------------------------------------------------------------------
     3. Block titles (= reference card titles, e.g. the deposit history title, 18px) and block captions
     --------------------------------------------------------------------------------------------------- */
  html.vt .content .h_titlebox {
    width: auto;
    padding: 7px 0;
    gap: 2px;
  }
  html.vt .content .h_block > .block_title,
  html.vt .content .title_box {
    padding: 7px 0;
  }
  html.vt .content .title_box {
    width: auto;
    border-bottom: 0;
  }
  html.vt .content .block_title,
  html.vt .content .title_box .title {
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
    color: var(--m-ink);
  }
  /* description line under a block title (notice list slogan, overnight hint) */
  html.vt .content .h_titlebox > div:not(.block_title):not(.sub_btn) {
    font-size: 13px;
    line-height: 18px;
    color: var(--m-caption);
  }

  /* ---------------------------------------------------------------------------------------------------
     4. Form rows: label column 120px (14px #333) + control h36, 1px #DEDEDE, square corners (reference
        .form-control has radius 0), 13px, 10px between rows. Rows: .dw_input (deposit/withdraw),
        .input_warp (qna); option's .o_input_warp only gets the control look (its 2-column grid is page CSS).
     --------------------------------------------------------------------------------------------------- */
  html.vt .content .dw_input,
  html.vt .content .input_warp {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    min-height: var(--m-ctl-h);
    margin: 0 0 10px;
  }
  html.vt .content .dw_input > .input_label,
  html.vt .content .input_warp > .input_label2 {
    flex: 0 0 120px;
    width: 120px;
    min-width: 0;
    padding-right: 10px;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    color: var(--m-ink);
  }
  /* the control: a wrapper div holding input.input (deposit/withdraw) or the input/select itself (qna) */
  html.vt .content .input_box2,
  html.vt .content .o_input,
  html.vt .content .qna_area {
    height: var(--m-ctl-h);
    margin: 0;
    border: 1px solid var(--m-line);
    border-radius: 0;
    background-color: var(--m-bg);
    color: var(--m-ink);
    font-size: 13px;
    box-shadow: none;
  }
  html.vt .content .dw_input > .input_box2,
  html.vt .content .input_warp > .input_box2 {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  html.vt .content div.input_box2 {
    padding: 0;
  }
  html.vt .content input.input_box2,
  html.vt .content select.input_box2,
  html.vt .content .o_input {
    padding: 0 14px;
    line-height: 34px;
  }
  html.vt .content .input_box2 > .input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 14px;
    border: 0;
    background-color: transparent;
    color: var(--m-ink);
    font-size: 13px;
    line-height: normal;
  }
  html.vt .content .qna_area {
    height: auto;
    min-height: 200px;
    padding: 8px 14px;
    line-height: 1.5;
  }
  /* selects: the reference thin chevron instead of the platform button look (same <select>, same options) */
  html.vt .content select.input_box2 {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
  }
  html.vt .content .input_box2:focus,
  html.vt .content .o_input:focus,
  html.vt .content .qna_area:focus {
    outline: none;
    border-color: var(--m-primary);
  }
  /* own rule: an engine without :focus-within drops only this one, not the plain :focus rule above */
  html.vt .content .input_box2:focus-within {
    outline: none;
    border-color: var(--m-primary);
  }
  /* custom check boxes (msg/qna lists, overnight, option sounds): reference 18px; the state class
     w--redirected-checked keeps its meaning (overnight selection) - size and corners only */
  html.vt .content .list_check_box {
    width: 18px;
    height: 18px;
    border-radius: 2px;
  }

  /* ---------------------------------------------------------------------------------------------------
     5. Date filter (tradehistory, calculateHistory, clickLogList, dwhistory):
        <div> #sdate ~ #edate </div> + .search_btn  ->  two form rows "start date [date]" / "end date [date]" (r19/r20)
        and a full-width search button. Labels are generated (::before/::after), the "~" text is font-size 0;
        the inputs keep type=date, ids, values and the inline display (only the inline width 45% is beaten).
     --------------------------------------------------------------------------------------------------- */
  html.vt .content .date_block {
    display: block;
    width: auto;
    padding: 0;
  }
  html.vt .content .date_block > div:first-child {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    margin: 0 0 10px;
    font-size: 0;
    line-height: 0;
  }
  html.vt .content .date_block > div:first-child::before,
  html.vt .content .date_block > div:first-child::after {
    grid-column: 1;
    font-size: 14px;
    line-height: var(--m-ctl-h);
    color: var(--m-ink);
  }
  html.vt .content .date_block > div:first-child::before {
    grid-row: 1;
    content: "\C2DC\C791\C77C";               /* "start date" (Korean); escapes keep this file ASCII */
  }
  html.vt .content .date_block > div:first-child::after {
    grid-row: 2;
    margin-top: 10px;
    content: "\C885\B8CC\C77C";               /* "end date" (Korean) */
  }
  html.vt .content .date_block > div:first-child > #sdate {
    grid-row: 1;
    grid-column: 2;
  }
  html.vt .content .date_block > div:first-child > #edate {
    grid-row: 2;
    grid-column: 2;
    margin-top: 10px;
  }
  html.vt .content .date_block input[type="date"].form-control {
    width: 100% !important;                   /* inline style="width: 45%" */
    height: var(--m-ctl-h);
    margin: 0;
    padding: 0 10px 0 14px;
    border: 1px solid var(--m-line);
    border-radius: 0;
    font-size: 13px;
    line-height: 34px;
  }

  /* ---------------------------------------------------------------------------------------------------
     6. Buttons. Primary = reference confirm/submit: full width, h45, #2196F3, white 13px, radius 3.
        Secondary = reference search/reset: white, 1px #DEDEDE, #333 13px, h45, radius 3.
        (hover colours come from vt-mts-base.css. Buttons that JS shows/hides by inline style, e.g.
        #depositInfoButton: the inline display:none still wins over display:flex below, and jQuery show()
        clears it, so the button comes back as flex - checked on deposit3)
     --------------------------------------------------------------------------------------------------- */
  html.vt .content .btn2,
  html.vt .content .btn3,
  html.vt .content .dw_btn3,
  html.vt .content .search_btn,
  html.vt .content .sub_btn,
  html.vt .content .list_btn2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: static;
    width: 100%;
    min-width: 0;
    height: var(--m-btn-h);
    margin: 0;
    padding: 0 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
  }
  html.vt .content .btn2:not(._2),
  html.vt .content .btn3:not(._2),
  html.vt .content .dw_btn3 {
    border-color: var(--m-primary);
    background-color: var(--m-primary);
    color: #FFFFFF;
  }
  html.vt .content .btn2._2,
  html.vt .content .btn3._2,
  html.vt .content .search_btn,
  html.vt .content .sub_btn,
  html.vt .content .list_btn2 {
    border-color: var(--m-line);
    background-color: var(--m-bg);
    color: var(--m-ink);
  }
  html.vt .content .dw_btn3 .icon {
    width: 18px;
    height: auto;
  }
  /* small amount chips (withdraw amount chips + reset): secondary look, 36px; their grid stays page CSS */
  html.vt .content .dw_btn1 {
    height: var(--m-ctl-h);
    padding: 0 8px;
    border: 1px solid var(--m-line);
    border-radius: 3px;
    background-color: var(--m-bg);
    color: var(--m-ink);
    font-size: 13px;
    font-weight: 400;
  }
  /* button rows: 2 buttons side by side, 14px apart (reference search | reset) */
  html.vt .content .btn_area2 {
    display: flex;
    flex-direction: row;
    gap: 14px;
    width: 100%;
    margin: 10px 0 0;
  }
  html.vt .content .btn_area2 > .btn2 {
    flex: 1 1 0;
    width: auto;
  }
  /* block action under a block title (overnight set / cancel) and the filter search button */
  html.vt .content .h_titlebox > .sub_btn {
    margin-top: 8px;
  }
  html.vt .content .date_block > .search_btn {
    margin-bottom: 10px;
  }
  /* list button (detail pages): on noticeDetail/msgDetail it is a direct child of .content -> same inset as blocks */
  html.vt .content .list_btn2 {
    margin-top: 10px;
  }
  html.vt .content > .list_btn2 {
    width: auto;
    margin: 10px var(--m-inset) 0;
  }

  /* ---------------------------------------------------------------------------------------------------
     7. Tables (.list = horizontal scroller > .list_top header + .list_scroll rows), reference DataTables look:
        header 35px #F5F5F5 14px/500, rows 50px 14px, no grid lines, 4px scrollbar (vt-mts-base .list rules)
        10px under the rows. Columns get fixed widths by our classes (list1/2/3/4) instead of plusasset's
        squeezed percentages, so a wide table scrolls like the reference; extra width is shared (flex-grow),
        identical in header and rows so the columns stay aligned. Alignment stays ours (list1/2 centred,
        list3/4 left); numeric columns are right-aligned per page (recipe at the end).
        .dw (deposit/withdraw, 3-4 columns) fits the screen instead.
     --------------------------------------------------------------------------------------------------- */
  html.vt .content .list {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
  }
  html.vt .content .list_top,
  html.vt .content .list_scroll {
    width: max-content;
    min-width: 100%;
  }
  html.vt .content .list_top {
    height: 35px;
    align-items: center;
    border-bottom: 0;
    background-color: var(--m-head);
    color: var(--m-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
  }
  html.vt .content .list_scroll {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  html.vt .content .list_warp,
  html.vt .content .g_table_warp,
  html.vt .content .list_scroll > .c_listwarp {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: var(--m-row-h);
    border-bottom: 0;
    font-size: 14px;
    line-height: 18px;
  }
  html.vt .content .list_top > div,
  html.vt .content .list_warp > div,
  html.vt .content .g_table_warp > div,
  html.vt .content .list_scroll > .c_listwarp > div {
    flex: 1 0 auto;
    height: auto;
    margin: 0;
    padding: 0 10px;
  }
  html.vt .content .list_top > .list1,
  html.vt .content .list_scroll .list1 {
    width: var(--m-col1);
  }
  html.vt .content .list_top > .list2,
  html.vt .content .list_scroll .list2 {
    width: var(--m-col2);
  }
  html.vt .content .list_top > .list3,
  html.vt .content .list_scroll .list3 {
    width: var(--m-col3);
  }
  html.vt .content .list_top > .list4,
  html.vt .content .list_scroll .list4 {
    width: var(--m-col4);
  }
  /* list3/list4 are left-aligned cells (plusasset); their wrapped lines too (plusasset centres the text) */
  html.vt .content .list_top > .list3,
  html.vt .content .list_top > .list4,
  html.vt .content .list_scroll .list3,
  html.vt .content .list_scroll .list4 {
    text-align: left;
  }
  /* deposit/withdraw history (.dw): fits the screen, equal columns */
  html.vt .content .list_top.dw,
  html.vt .content .list_scroll.dw {
    width: 100%;
  }
  html.vt .content .list_top.dw > div,
  html.vt .content .list_scroll.dw > .list_warp > div {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  /* empty state text (vt-mts-base supplies the text): one 50px row, text at x = 40 like the reference */
  html.vt .content .list_scroll:empty::before {
    padding: 0 20px;
    font-size: 14px;
    line-height: var(--m-row-h);
    color: var(--m-ink);
  }
  /* row delete tile (msg/qna lists) */
  html.vt .content .delete_btn {
    width: 30px;
    height: 30px;
  }
  html.vt .content .delete_icon {
    width: 20px;
    height: 20px;
  }

  /* ---------------------------------------------------------------------------------------------------
     8. Pagination (JS builds "<", "cur / total" (inline width:auto), ">"), reference r20:
        arrows at the far left/right (#898989, drawn as the reference arrows), the page box centred, navy.
     --------------------------------------------------------------------------------------------------- */
  html.vt .content > .pagging {
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin-top: calc(0px - var(--m-cgap));
    padding: 0 0 30px;
  }
  html.vt .content > .pagging > .pagging_btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 3px;
    box-shadow: none;
    background-color: transparent;
    color: #898989;
    font-size: 13px;
    line-height: 36px;
  }
  html.vt .content > .pagging > .pagging_btn[style*="auto"] {
    min-width: 36px;
    padding: 0 12px;
    background-color: var(--m-nav);
    color: #FFFFFF;
  }
  html.vt .content > .pagging > .pagging_btn:first-child,
  html.vt .content > .pagging > .pagging_btn:last-child {
    font-size: 0;
  }
  html.vt .content > .pagging > .pagging_btn:first-child::before,
  html.vt .content > .pagging > .pagging_btn:last-child::before {
    font-size: 16px;
    line-height: 36px;
  }
  html.vt .content > .pagging > .pagging_btn:first-child::before {
    content: "\2190";
  }
  html.vt .content > .pagging > .pagging_btn:last-child::before {
    content: "\2192";
  }

  /* ---------------------------------------------------------------------------------------------------
     9. Summary cards (.h_block .h_box: history sums; .o_block .o_itembox: overnight), reference r21:
        2 per row, 20px apart, #F5F5F5 radius 5, min-height 100, padding 0 20, value first (16px/400 #333)
        then the caption(s) 12px #999. Icons / spacer stay hidden (vt-mts-base).
     --------------------------------------------------------------------------------------------------- */
  html.vt .content > .h_block > .h_container,
  html.vt .content > .o_block > .o_item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    padding: 0;
  }
  html.vt .content > .h_block .h_box,
  html.vt .content > .o_block .o_itembox {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: calc(50% - 10px);
    min-height: 100px;
    padding: 0 20px 10px;
    border: 0;
    border-radius: 5px;
    background-color: var(--m-card);
  }
  html.vt .content > .h_block .h_content2 {
    display: block;
    width: auto;
    padding: 0;
  }
  html.vt .content > .h_block .h_txt,
  html.vt .content > .o_block .h_txt {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: auto;
    color: var(--m-caption);
    font-size: 12px;
    line-height: 18px;
  }
  html.vt .content > .h_block .result_num,
  html.vt .content > .o_block .result_txt {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--m-ink);
  }
  html.vt .content > .h_block .result_title,
  html.vt .content > .h_block .result_subtitle,
  html.vt .content > .o_block .result_subtitle {
    margin-top: 6px;
    font-size: 12px;
    line-height: 18px;
    color: var(--m-caption);
  }
  html.vt .content > .h_block .result_title + .result_subtitle {
    margin-top: 0;
  }
  html.vt .content > .h_block .result_subtitle:empty {
    display: none;
  }

  /* ---------------------------------------------------------------------------------------------------
     10. Generic tabs for NEW markup (e.g. noticeList/msgList notice | message switch, r24):
         <div class="vtm-only vtm-tabs"><a class="vtm-tab on" ...>[svg] label</a><a class="vtm-tab" ...>...</a></div>
         equal widths, h44, 14px/400, 1px #324148; current (.on / .active / aria-selected) filled #324148 white.
         As a direct child of .content it sits like the reference (10px from the screen edges, 7px under the navbar).
     --------------------------------------------------------------------------------------------------- */
  html.vt .content .vtm-tabs {
    display: flex;
    gap: 3px;
    margin: 0;
    padding: 0;
  }
  html.vt .content > .vtm-tabs {
    margin: 7px calc(10px - var(--m-cpad)) 7px;
  }
  html.vt .content .vtm-tabs > .vtm-tab {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--m-tab-dark);
    background-color: var(--m-bg);
    color: var(--m-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  html.vt .content .vtm-tabs > .vtm-tab.on,
  html.vt .content .vtm-tabs > .vtm-tab.active,
  html.vt .content .vtm-tabs > .vtm-tab[aria-selected="true"] {
    background-color: var(--m-tab-dark);
    color: #FFFFFF;
  }
  html.vt .content .vtm-tabs > .vtm-tab svg {
    flex: none;
    width: 16px;
    height: 16px;
  }

  /* ---------------------------------------------------------------------------------------------------
     11. Notes box (overnight .warning_box): keeps its grey card look (vt-mts-base), aligned at x = 20
     --------------------------------------------------------------------------------------------------- */
  html.vt .content > .warning_box {
    margin-top: calc(10px - var(--m-cgap));
    padding: 12px 16px;
    gap: 6px;
  }
}
@media (max-width: 767px) {
  html.vt {
    --m-cpad: 2vw;   /* plusasset .content padding / gap below 768 */
    --m-cgap: 3vw;
  }
}
/* ---------------------------------------------------------------------------------------------------------
   RECIPES for page CSS (vt-m-pages-a/b.css), so pages do not have to fight this file:
   * page hook: add one class to scope a page, e.g. a class on .title_section/.g_block added under
     <c:if test="${vtTheme}">, or (JS, mobile-guarded) on <html>; then "html.vt.<hook> .content ..." wins.
   * right-align a numeric column N:  <hook> .content .list_top > :nth-child(N),
     <hook> .content .list_scroll > * > :nth-child(N) { justify-content: flex-end; text-align: right; }
   * other column width:  <hook> .content .list_top > :nth-child(N), <hook> .content .list_scroll > * > :nth-child(N)
     { width: 150px; }  (same N in header and rows keeps them aligned); or retune a whole class on the page:
     html.vt.<hook> { --m-col2: 140px; }  (also --m-col1/3/4, --m-ctl-h, --m-btn-h, --m-row-h)
   * form rows with the label above (r22 inquiry form): <hook> .content .input_warp { flex-direction: column; align-items: stretch; }
     + "<hook> .content .input_warp > .input_label2 { flex-basis: auto; width: auto; }"
   * a block flush to the screen edges: margin-left/right: calc(0px - var(--m-cpad)).
   --------------------------------------------------------------------------------------------------------- */