/*
 * vt-mts-base.css - VT theme: WTS/MTS shell, common components and all secondary pages
 * (mobile/*.jsp except the order screen, mobileFrame/*.jsp) over plusasset.webflow.css.
 * Spec: scratchpad vt/spec.md sections 6.0-6.7 and 6.15-6.24 (2026-11, phase 2, agent "mts-base").
 *
 * Loaded ONLY when the server flag vtTheme is true (BrandAdvice.java). With vtTheme=false the pages do not
 * even link this file, so they stay byte-for-byte as before.
 * Every rule is scoped under "html.vt " (surface class "vt-mts" sits on the same element). The prefix
 * (+1 class +1 element) also beats the page <style> blocks, which come after this <link>.
 * Link order: normalize -> webflow -> plusasset.webflow.css?v=32 -> vt-fonts -> vt-tokens -> vt-mts-base
 *             -> vt-mts-order (mobileFrame/header.jsp), then the page <style> block.
 *
 * Rules kept here (00-inventory 5.1/5.7, spec 0.2/10/11):
 *  - colours, fonts, borders, radii, backgrounds; paddings only inside fixed boxes / listed flow blocks;
 *  - !important ONLY on colour/background/border-colour/font properties (to beat inline styles);
 *    never on display, visibility, width/height, position, top/left, z-index, transform, opacity;
 *  - no transform/filter/backdrop-filter/contain on .top; nothing on the ladder (vt-mts-order.css owns
 *    the order page: .q_top, .q_content1/2, .c_block*, .c_chart*, .chart_tradebtn_area, .bottom*,
 *    the bottom sheets .popup.order._1/._2/.tick);
 *  - classes shared with order.jsp (.listtxt, .c_listwarp, .chart*, .c_table*, .c_title, .c_list2) are
 *    styled here only under secondary-page containers (.list_scroll, .chart_box > .c_block1/.c_block2);
 *  - #loginButton normal state never gets an opacity (JS uses opacity .6 = busy).
 * Cache: /webflow/css is cached 7 days -> bump ?v= in mobileFrame/header.jsp whenever this file changes.
 */

/* =====================================================================================================
   0. Layer 0 - remap of the legacy plusasset :root variables (spec 6.0). Values chosen by usage.
   ===================================================================================================== */
html.vt {
  --bg: #FFFFFF;
  --box: #0F202C;
  --line: #333333;
  --title: #DEDEDE;
  --line-2: #EEEEEE;
  --input: #12202D;
  --point: #2196F3;
  --point_on: #2196F3;
  --hover: #E8E8E8;
  --hover2: #E8E8E8;
  --btn2: #FFFFFF;
  --txt: #999999;
  --black_50: #233D58;
  --up: #2196F3;
  --up2: #2196F3;
  --down: #F44336;
  --down2: #F44336;
  --dark-slate-grey: #FFFFFF;
  --shdow: transparent;
  --line_grey: #666666;
  --medium-turquoise: #2196F3;
  --grey: #888888;
  --white-2: #F44336;
  --back: #FAFAFA;
  --grd1: #FFFFFF;
  --grd2: #F5F5F5;
  --hover_trade: #FFF9C4;
  --side_btn: #0F202C;
  /* unchanged on purpose: --white, --black, --transparent, --hover-3 */
}
/* VQ-08 (phase 4): WCAG AA for three tokens that are our own choices, not reference colours. vt-tokens.css keeps
   the original values; this file loads after it and only on WTS/MTS, so HTS (--vth-*) is not affected.
   Reference colours (up/down, primary, buttons, badge, bottom bar) are deliberately left as they are. */
html.vt {
  --vt-status: #9C5D00;      /* #loginStatus on white: 4.24:1 -> 5.28:1 (was #B26A00) */
  --vt-text-muted: #707070;  /* .g_title, .warning_box, order info labels: >= 4.5:1 on #FFF/#F7F7F7/#F5F5F5 (was #888) */
  --vt-text-pager: #767676;  /* pager arrows on white: 3.5:1 -> 4.54:1 (was #898989) */
}

/* =====================================================================================================
   1. Global (spec 3.2, 6.1)
   ===================================================================================================== */
html.vt .body {
  background-color: var(--vt-page);
  color: var(--vt-text);
  font-family: var(--vt-font);
  font-variant-numeric: tabular-nums;
}
html.vt h1, html.vt h2, html.vt h3, html.vt h4, html.vt h5, html.vt h6,
html.vt b, html.vt strong {
  font-weight: 600;
}
html.vt label {
  font-weight: 400;
}
html.vt .frame,
html.vt .section,
html.vt .content,
html.vt .chart_box {
  background-color: transparent;
}
html.vt .content.dark {
  background-color: var(--vt-page);
}
/* links inside rich text only (no global "a" rule: it would beat .w-button and turn button text navy) */
html.vt .d_txtbox a,
html.vt .general_poptxt a,
html.vt .notice_popblock .pop_txtbox a {
  color: var(--vt-link);
}
html.vt .d_txtbox a:hover,
html.vt .general_poptxt a:hover,
html.vt .notice_popblock .pop_txtbox a:hover {
  color: var(--vt-link-hover);
}

/* up/down text in the secondary-page lists (order page: vt-mts-order.css) */
html.vt .list_scroll .listtxt {
  color: inherit;
}
html.vt .list_scroll .listtxt.red {
  color: var(--vt-up);
}
html.vt .list_scroll .listtxt.blue {
  color: var(--vt-down);
}
/* VQ-05 (phase 4): JS marks data cells .grey (order times, symbols, 대기중); #999 was 2.85:1 -> #767676 = 4.54:1 */
html.vt .list_scroll .listtxt.grey {
  color: #767676;
}

/* scrollbars: existing 16px gutters keep their width; only track/thumb colour and shape (spec 6.1) */
html.vt .list_scroll.always::-webkit-scrollbar-track,
html.vt .d_txtbox::-webkit-scrollbar-track,
html.vt .chart_box > .c_block2 .c_list_scroll2::-webkit-scrollbar-track,
html.vt .chatting-body::-webkit-scrollbar-track {
  background: var(--vt-scroll-track-soft);
  box-shadow: none;
  border-radius: 0;
}
html.vt .list_scroll.always::-webkit-scrollbar-thumb,
html.vt .d_txtbox::-webkit-scrollbar-thumb,
html.vt .chart_box > .c_block2 .c_list_scroll2::-webkit-scrollbar-thumb,
html.vt .chatting-body::-webkit-scrollbar-thumb {
  background-color: var(--vt-scroll-thumb);
  border: 5px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  box-shadow: none;
}
html.vt .list_scroll.always::-webkit-scrollbar-thumb:hover,
html.vt .d_txtbox::-webkit-scrollbar-thumb:hover,
html.vt .chart_box > .c_block2 .c_list_scroll2::-webkit-scrollbar-thumb:hover,
html.vt .chatting-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--vt-scroll-thumb-hover);
}
/* horizontal table scroller of the history pages (reference 4.15: 4px bar under the table) */
html.vt .list::-webkit-scrollbar {
  height: 4px;
}
html.vt .list::-webkit-scrollbar-thumb {
  background-color: var(--vt-scroll-thumb);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
  border-radius: 5px;
}
html.vt .list::-webkit-scrollbar-track {
  background-color: var(--vt-scroll-track);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
  border-radius: 0;
}

/* placeholders */
html.vt .input::placeholder,
html.vt .input_box2::placeholder,
html.vt .o_input::placeholder,
html.vt .qna_area::placeholder,
html.vt .input._2::placeholder,
html.vt .input_box2._2::placeholder,
html.vt .o_input._2::placeholder,
html.vt .qna_area._2::placeholder {
  color: var(--vt-text-faint);
  opacity: 1;
  font-family: var(--vt-font-prose);
}
/* the placeholder IS the withdraw limit (withdraw.jsp) - must stay readable */
html.vt #possibleMoney::placeholder {
  color: var(--vt-text);
  opacity: 1;
  font-family: var(--vt-font);
}

/* custom checkboxes of the secondary pages (.list_check_box: msg/qna lists, overnight, option sounds).
   The class w--redirected-checked IS the state (overnight selection) - colours only, size 20px/4vw kept. */
html.vt .list_check_box.w-checkbox-input--inputType-custom {
  background-color: #FFFFFF;
  border-width: 1px;
  border-style: solid;
  border-color: var(--vt-check-border);
  border-radius: 2px;
  background-image: none;
}
html.vt .list_check_box.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: var(--vt-check-on);
  border-color: var(--vt-check-on);
  background-image: var(--vt-check-svg);
  background-size: 14px 14px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
html.vt .list_check_box.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 0 2px rgba(33, 150, 243, .25);
}

/* =====================================================================================================
   2. Top bar (mobileFrame/top.jsp) - spec 6.2. Height kept (4rem / 3rem); no transform/filter on .top.
   ===================================================================================================== */
html.vt .top {
  background-color: var(--vt-navy-900);
  color: var(--vt-on-dark);
}
html.vt .top_warp {
  box-shadow: var(--vt-shadow-nav);
}
html.vt .time_frame {
  border: 1px solid var(--vt-steel-700);
  border-radius: var(--vt-radius);
  color: var(--vt-on-dark);
  background-color: transparent;
}
html.vt .time_section.pc .time_frame {
  font-size: 13px;
}
html.vt .logo {
  width: auto;
  min-width: 0;
}
html.vt .logo_img {
  width: auto;
  height: 30px;
  object-fit: contain;
}
html.vt .menu_btn {
  color: var(--vt-on-dark);
  font-size: 14px;
  font-weight: 400;
  transition: none;
}
html.vt .menu_btn:hover {
  color: var(--vt-on-dark-strong);
}
html.vt .menu_deco,
html.vt .menu_deco.on {
  background-color: var(--vt-on-dark-strong);
  height: 2px;
  border-radius: 0;
  transition: none;
}
html.vt .t_iconmenu {
  color: var(--vt-on-dark);
  transition: none;
}
html.vt .t_iconmenu:hover {
  color: var(--vt-on-dark-strong);
}
html.vt .alarn_warn {
  background-color: var(--vt-badge);
  color: #FFFFFF;
}
html.vt .my_box {
  color: var(--vt-on-dark-strong);
  border-radius: var(--vt-radius);
  transition: none;
}
html.vt .my_box:hover {
  background-color: var(--vt-navy-950);
}
html.vt .my_imgarea {
  border-radius: var(--vt-radius-round);
  background-color: #FFFFFF;
}
html.vt .my_img {
  object-fit: contain;
  object-position: 50% 50%;
  padding: 4px;
}
/* 2026-11-09: span#name only - the top bar user name. As plain #name it also hit <input id="name"> on the join page
   (mobile/join.jsp): white text on the white card, the typed name was invisible on PC. */
html.vt span#name {
  font-weight: 500;
  color: var(--vt-on-dark-strong);
}
@media screen and (min-width: 768px) {
  html.vt span#name {
    font-size: 14px;
  }
}

/* =====================================================================================================
   3. WTS sidebar (.side_menu.pc, left2.jsp; desktop >= 992) - spec 6.3 / D4 / D22
   ===================================================================================================== */
html.vt .side_menu {
  background-color: var(--vt-navy-900);
  color: var(--vt-on-dark);
}
/* VQ-02 (phase 4): the sidebar is only as tall as .section (min-height 850px), so a white band showed under it.
   Paint only: two box-shadow copies of the sidebar box below it (shadows are ink overflow: no layout, no scroll
   size change; the sidebar is not positioned, so later content still paints above). Display:none at <= 991. */
html.vt .side_menu.pc {
  box-shadow: 0 850px 0 0 var(--vt-navy-900), 0 1700px 0 0 var(--vt-navy-900);
}
html.vt .side_btn {
  color: var(--vt-on-dark);
  font-size: 14px;
  font-weight: 400;
  border-radius: var(--vt-radius);
  transition: none;
}
html.vt .side_btn:hover {
  background-color: var(--vt-navy-950);
  color: var(--vt-on-dark-hover);
}
html.vt .side_btn.on {
  background-color: var(--vt-steel-800);
  color: var(--vt-on-dark-strong);
  font-weight: 500;
}

/* =====================================================================================================
   4. MTS hamburger drawer (.mobile_menu > .mobile_toggle, <= 991) - spec 6.4 / D28
   (works as display:block (order.jsp slideToggle) and display:flex (top.jsp); no gap, no flex-only rules)
   ===================================================================================================== */
html.vt .mobile_menu {
  color: var(--vt-on-dark);
}
html.vt .mobile_menu:hover {
  color: var(--vt-on-dark-strong);
}
html.vt .mobile_toggle {
  background-color: var(--vt-navy-900);
  border-color: var(--vt-navy-line);
  border-radius: 0;
  box-shadow: var(--vt-shadow-menu);
  top: 100%;
  left: 0;
  width: 100vw;
}
html.vt .mobile_toggle .side_menu {
  background-color: transparent;
}
html.vt .mobile_toggle .side_btn {
  color: var(--vt-on-dark);
  font-size: .9rem;
  font-weight: 400;
  border-radius: 0;
  padding-left: 20px;
}
html.vt .mobile_toggle .side_btn:hover {
  background-color: var(--vt-navy-950);
  color: var(--vt-on-dark-hover);
}

/* =====================================================================================================
   5. Dropdowns on navy (user box .toggle_box, alarm list .alarm_toggle) - spec 6.5
   ===================================================================================================== */
html.vt .toggle_box,
html.vt .alarm_toggle {
  background-color: var(--vt-navy-800);
  border: 1px solid var(--vt-navy-line);
  border-radius: var(--vt-radius);
  box-shadow: var(--vt-shadow-menu);
}
html.vt .toggle_btn {
  color: var(--vt-on-dark);
}
@media screen and (min-width: 768px) {
  html.vt .toggle_btn {
    font-size: 14px;
  }
}
html.vt .toggle_btn:hover {
  background-color: var(--vt-navy-item-hover);
  color: var(--vt-on-dark-hover);
}
html.vt .alarm_content {
  border-bottom-color: var(--vt-navy-line);
}
html.vt .alarm_content a.page-link {
  color: var(--vt-on-dark);
  font-size: 13px;
  font-family: var(--vt-font-prose) !important;
  cursor: pointer;
}
html.vt .alarm_content a.page-link:hover {
  color: var(--vt-on-dark-hover);
}
/* MTS-F1 (phase 4): at <= 767 the full-width ☰ drawer (D28, plusasset z-index 9990) covered the bell list
   (z-index 20), so its items could not be tapped. Lift the list just above the drawer: plain z-index inside the
   fixed .top's stacking context (JS never writes it; .toggle_box keeps its inline 9999). 768-991: both are 20 and
   the list already comes later in the DOM. */
@media screen and (max-width: 767px) {
  html.vt .alarm_toggle {
    z-index: 9991;
  }
}

/* =====================================================================================================
   6. Popups (.popup.pw / .popup.notice / .popup.general; login.jsp and join.jsp also carry a .popup.pw)
   spec 6.6 / D23. display stays JS-controlled (flex/none).
   ===================================================================================================== */
html.vt .popup.pw,
html.vt .popup.notice,
html.vt .popup.general {
  background-image: none;
  background-color: var(--vt-overlay-modal);
}
html.vt .pw_popblock,
html.vt .general_popbox,
html.vt .notice_popblock {
  background-color: #FFFFFF;
  border: 0 solid transparent;
  border-radius: var(--vt-radius-card);
  box-shadow: var(--vt-shadow-popup);
  color: var(--vt-text);
}
html.vt .pop_title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--vt-text);
}
html.vt .pop_title2 {
  color: var(--vt-text-faint);
  font-size: 13px;
  font-family: var(--vt-font-prose) !important;
  word-break: keep-all;  /* VQ-06 (phase 4): wrap at a space, never inside "변경해주세요." on small phones */
}
html.vt .pop_txtbox {
  color: var(--vt-text-faint);
  font-size: 13px;
  border-top-color: var(--vt-border);
  border-bottom-color: var(--vt-border);
}
html.vt .general_poptxt {
  font-size: 15px;
  color: var(--vt-text);
}
html.vt .general_poptxt,
html.vt .general_poptxt * {
  font-family: var(--vt-font-prose) !important;
}
html.vt .popexsit img {
  filter: invert(60%);
}
html.vt .popup.notice .pop_btn_area2 .btn {
  background-color: var(--vt-navy-900);
  border-color: var(--vt-navy-900);
  color: #FFFFFF;
}
html.vt .popup.notice .pop_btn_area2 .btn:hover {
  background-color: var(--vt-navy-900);
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .08);
}

/* =====================================================================================================
   7. Footer band, scroll-to-top - spec 6.7 (padding kept: it reserves room for the MTS bottom bar)
   ===================================================================================================== */
html.vt .footer,
html.vt .footer.f_trade,
html.vt .copyright {
  background-color: transparent;
}
html.vt .f_box {
  color: var(--vt-text-faint);
}
html.vt .q_top_btn {
  background-color: rgba(15, 32, 44, .85);
  border-color: transparent;
}

/* =====================================================================================================
   15. Secondary pages - title, panels, block headers (spec 6.15)
   ===================================================================================================== */
html.vt .title_section {
  color: var(--vt-text);
}
html.vt .title_section .heading {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--vt-text);
}
html.vt .title_section > .heading + div:not([class]) {
  font-size: 12px;
  line-height: 16px;
  color: var(--vt-text-faint);
  font-weight: 400;
}
html.vt .title_section._2 {
  color: var(--vt-text);
}
html.vt .g_block,
html.vt .g_block._2,
html.vt .g_block._3 {
  background-color: #FFFFFF;
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}
html.vt .h_titlebox {
  color: var(--vt-text-faint);
}
html.vt .h_titlebox > div:not(.block_title):not(.sub_btn) {
  font-family: var(--vt-font-prose) !important;
}
html.vt .block_title,
html.vt .h_titlebox .block_title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--vt-text);
}
html.vt .title_box {
  border-bottom-color: var(--vt-border);
}
html.vt .title_box .title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--vt-text);
}
html.vt .color_txt {
  color: var(--vt-text);
  font-size: 16px;
  font-weight: 600;
}
html.vt .warning_box {
  background-color: var(--vt-surface);
  color: var(--vt-text-muted);
  border-color: transparent;
  border-radius: var(--vt-radius-card);
  padding-top: 12px;
  padding-bottom: 12px;
}
html.vt .warning_box,
html.vt .warning_box * {
  font-family: var(--vt-font-prose) !important;
}

/* =====================================================================================================
   16. Summary cards (.h_block, .o_block) - spec 6.16 / D13: reference grey cards, value above caption
   ===================================================================================================== */
html.vt .h_block,
html.vt .o_block {
  background-color: #FFFFFF;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}
html.vt .h_container {
  column-gap: 20px;
}
html.vt .h_box,
html.vt .h_box._2,
html.vt .o_itembox {
  background-color: var(--vt-surface);
  border-radius: var(--vt-radius-card);
  border-right-color: transparent;
  padding: 10px 20px;
}
html.vt .h_symbol,
html.vt .o_item_symbol {
  display: none;
}
/* .h_content is an EMPTY spacer (30% / 19% wide, a 1px line at <=767) in front of the card text; no JS reads it.
   Hidden so the value starts at the card padding like the reference card (deviation, see REPORT.md) */
html.vt .h_box > .h_content {
  display: none;
}
html.vt .h_txt {
  color: var(--vt-text-faint);
  font-size: 13px;
}
html.vt .result_num,
html.vt .result_txt {
  order: -1;
  color: var(--vt-text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  font-family: var(--vt-font);
}
html.vt .result_num.red {
  color: var(--vt-up);
}
html.vt .result_num.blue {
  color: var(--vt-down);
}
/* VQ-03 (phase 4): the history summary cards show neutral values like the reference cards (#333). There the JS
   classes are not P&L signs (calculateHistory.jsp sets .blue for totals >= 0; tradehistory.jsp keeps #feeSum .red
   and #resultSum .blue), so red/blue contradicted the rows on the same page. */
html.vt .h_box .result_num.red,
html.vt .h_box .result_num.blue {
  color: var(--vt-text);
}
html.vt .result_title,
html.vt .result_subtitle {
  color: var(--vt-text-faint);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  font-family: var(--vt-font);
}

/* =====================================================================================================
   17. Forms and the date filter - spec 6.17 / D24
   ===================================================================================================== */
html.vt .input_box2,
html.vt select.input_box2,
html.vt .o_input,
html.vt .qna_area,
html.vt .datebox,
html.vt .file_box {
  background-color: #FFFFFF;
  border: 1px solid var(--vt-border-input);
  border-radius: var(--vt-radius);
  color: var(--vt-text);
  font-size: 13px;
}
html.vt .input_box2:focus,
html.vt .input_box2:focus-within,
html.vt .o_input:focus,
html.vt .qna_area:focus,
html.vt .datebox:focus {
  outline: none;
  border-color: var(--vt-focus);
}
html.vt .input_box2 .input,
html.vt .input._2 {
  color: var(--vt-text);
}
html.vt .input_label {
  color: var(--vt-text);
  font-weight: 400;
}
html.vt .input_label2 {
  color: var(--vt-text);
}
html.vt .g_title {
  color: var(--vt-text-muted);
  font-weight: 400;
}
html.vt .dw_block,
html.vt .mbank,
html.vt .maccount,
html.vt .mname {
  font-weight: 400;
  color: var(--vt-text);
}
/* form label / value sizes: reference 14px on desktop; the phone rem sizes of plusasset are kept (spec 3.3) */
@media screen and (min-width: 768px) {
  html.vt .input_label,
  html.vt .g_title,
  html.vt .dw_block,
  html.vt .mbank,
  html.vt .maccount,
  html.vt .mname {
    font-size: 14px;
  }
}
/* #sdate / #edate: inline background-color:grey -> !important on the colour only; type=date and the
   inline width 45% are kept (the native YYYY-MM-DD value is what the search button sends) */
html.vt .date_block input[type="date"].form-control {
  background-color: #FFFFFF !important;
  color: var(--vt-text);
  border: 1px solid var(--vt-border-input);
  border-radius: var(--vt-radius);
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
}
html.vt .date_block input[type="date"].form-control:focus {
  outline: none;
  border-color: var(--vt-focus);
}
html.vt .date_block {
  color: var(--vt-text-faint);
}

/* =====================================================================================================
   18. Buttons - spec 6.18 (every a.w-button on white gets an explicit colour, rule 8)
   ===================================================================================================== */
/* primary */
html.vt .btn,
html.vt .btn2:not(._2),
html.vt .btn3:not(._2),
html.vt .dw_btn3 {
  background-color: var(--vt-primary);
  border-color: var(--vt-primary);
  color: #FFFFFF;
  border-radius: var(--vt-radius);
  font-weight: 500;
  transition: none;
}
html.vt .btn:hover,
html.vt .btn2:not(._2):hover,
html.vt .btn3:not(._2):hover,
html.vt .dw_btn3:hover {
  background-color: var(--vt-primary);
  box-shadow: inset 0 0 0 999px var(--vt-btn-shade);
}
html.vt .dw_btn3 .icon {
  filter: brightness(0) invert(1);
}
/* secondary */
html.vt .btn._2,
html.vt .btn2._2,
html.vt .btn3._2,
html.vt .search_btn,
html.vt .dw_btn1,
html.vt .dw_btn1.r,
html.vt .list_btn2,
html.vt .sub_btn,
html.vt .titlesub_btn,
html.vt .file_btn,
html.vt .detail_pagging,
html.vt .d_page_btn {
  background-color: #FFFFFF;
  border: 1px solid var(--vt-border);
  color: var(--vt-text);
  border-radius: var(--vt-radius);
  font-weight: 400;
  box-shadow: none;
  transition: none;
}
html.vt .btn._2:hover,
html.vt .btn2._2:hover,
html.vt .btn3._2:hover,
html.vt .search_btn:hover,
html.vt .dw_btn1:hover,
html.vt .dw_btn1.r:hover,
html.vt .list_btn2:hover,
html.vt .sub_btn:hover,
html.vt .titlesub_btn:hover,
html.vt .file_btn:hover,
html.vt .d_page_btn:hover {
  background-color: #FFFFFF;
  color: var(--vt-btn-hover-danger);
  border-color: var(--vt-btn-hover-danger);
}
html.vt .dw_btn1.r .icon {
  filter: invert(55%);
}
/* danger text (select-delete) */
html.vt .titlesub_btn._2 {
  color: var(--vt-up);
}
/* icon tile (row delete) - icon kept (red) */
html.vt .delete_btn {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--vt-radius);
}
html.vt .delete_btn:hover {
  background-color: rgba(244, 67, 54, .08);
  border-color: rgba(244, 67, 54, .3);
}
/* label sizes inside fixed-height buttons (desktop; vw/rem sizes kept below 768) */
@media screen and (min-width: 768px) {
  html.vt .btn,
  html.vt .btn2,
  html.vt .btn3,
  html.vt .dw_btn3,
  html.vt .search_btn,
  html.vt .list_btn2,
  html.vt .sub_btn,
  html.vt .titlesub_btn,
  html.vt .file_btn {
    font-size: 14px;
  }
  html.vt .dw_btn1 {
    font-size: 15px;
  }
}

/* =====================================================================================================
   19. Tables (.list > .list_top + .list_scroll > .list_warp / .g_table_warp) - spec 6.19 / D8 / D10
   heights kept (48px rows, 448px scroller, 9 rows per page)
   ===================================================================================================== */
html.vt .list {
  background-color: #FFFFFF;
}
html.vt .list_top {
  background-color: var(--vt-surface);
  color: var(--vt-text);
  border-bottom-color: transparent;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  html.vt .list_top {
    font-size: 14px;
  }
}
html.vt .list_warp,
html.vt .g_table_warp {
  background-color: #FFFFFF;
  border-bottom-color: transparent;
  color: var(--vt-text);
}
html.vt .list_warp:hover,
html.vt .g_table_warp:hover {
  background-color: var(--vt-hover);
}
/* empty state (D10): .list_scroll is emptied by JS before rows are appended; pseudo-element = JS-invisible */
html.vt .list_scroll:empty::before {
  content: "\C870\D68C\ACB0\ACFC\AC00\0020\C5C6\C2B5\B2C8\B2E4.";  /* "no results" (Korean), CSS escapes keep this file ASCII */
  display: block;
  padding: 12px 20px;
  color: var(--vt-text);
  font-size: 14px;
  font-family: var(--vt-font-prose);
}
/* unread message row (msgList.jsp writes inline background-color:#ff8400) - D15 */
html.vt .g_table_warp[style*="ff8400"] {
  background-color: #FFF3E0 !important;
  box-shadow: inset 3px 0 0 var(--vt-badge);
}
/* title column of the notice / message / qna lists = prose. This also covers VQ-07 (checked in phase 4): the
   titles JS truncates to 50 chars + "..." (noticeList/msgList/qnaList.jsp) keep a proportional "..." and "/"
   (VTNum would draw ". . ."), while digits stay Gulim through VTDigits; the [중요] inline red/bold is untouched. */
html.vt .list_scroll .list4 .listtxt {
  font-family: var(--vt-font-prose) !important;
}

/* =====================================================================================================
   20. Pagination (.pagging > "<", "cur / total" (inline width:auto), ">" built by JS) - spec 6.20 / D9
   ===================================================================================================== */
html.vt .pagging_btn {
  background-color: transparent;
  box-shadow: none;
  color: var(--vt-text-pager);
  border-radius: var(--vt-radius);
  transition: none;
}
html.vt .pagging_btn:hover {
  background-color: var(--vt-hover);
  color: var(--vt-text);
}
html.vt .pagging_btn[style*="auto"],
html.vt .pagging_btn.on {
  background-color: var(--vt-navy-900);
  color: #FFFFFF;
  padding: 0 12px;
}

/* =====================================================================================================
   21. Detail views; notice / msg / qna - spec 6.21
   ===================================================================================================== */
html.vt .d_box {
  background-color: #FFFFFF;
}
html.vt .d_titlebox {
  background-color: var(--vt-surface);
  border-top-color: var(--vt-border);
  border-bottom-color: var(--vt-border);
}
html.vt .d_title {
  color: var(--vt-text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  font-family: var(--vt-font-prose) !important;
}
html.vt .date {
  color: var(--vt-text-faint);
}
@media screen and (min-width: 768px) {
  html.vt .date {
    font-size: 12px;
  }
}
html.vt .d_txtbox {
  background-color: #FFFFFF;
  border-color: var(--vt-border);
  color: var(--vt-text);
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  html.vt .d_txtbox {
    font-size: 14px;
  }
}
html.vt .d_txtbox,
html.vt .d_txtbox * {
  font-family: var(--vt-font-prose) !important;
}

/* =====================================================================================================
   23. Overnight, option, qna write, chart page, economic, chat - spec 6.23
   ===================================================================================================== */
/* overnight tables reuse .c_listwarp rows (order-page class) -> scoped to the secondary-page list */
html.vt .list_scroll > .c_listwarp {
  border-bottom-color: var(--vt-border);
  background-color: #FFFFFF;
  color: var(--vt-text);
}
html.vt .list_scroll > .c_listwarp:hover {
  background-color: var(--vt-hover);
}
html.vt .option_area {
  background-color: #FFFFFF;
}
html.vt .g_check_label {
  color: var(--vt-text);
}
/* chart3 / economic: wrappers only (TradingView light / einfomax iframes are not themed here) */
html.vt .chart_box > .c_block1 .chart {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* the iframe (fixed inline size, border-box): its default 2px inset border -> 1px reference line */
html.vt .chart_box > .c_block1 .chart iframe {
  border: 1px solid var(--vt-border);
  background-color: #FFFFFF;
}
/* economic.jsp: the frame itself scrolls the 1024px-wide einfomax iframe (inline overflow:auto) -> line on the frame */
html.vt .chart_box > .c_block1 .chart[style*="overflow"] {
  border-color: var(--vt-border);
}
html.vt .chart_box > .c_block1 .chart[style*="overflow"] iframe {
  border-color: transparent;
}
html.vt .chart_box > .c_block2 .chart_block3 {
  background-color: #FFFFFF;
  border-color: var(--vt-border);
  box-shadow: none;
  border-radius: 0;
}
html.vt .chart_box > .c_block2 .c_title {
  background-color: var(--vt-surface-th);
  border-color: var(--vt-border);
  color: var(--vt-text);
  border-radius: 0;
  font-weight: 500;
}
html.vt .chart_box > .c_block2 .c_chart_top {
  background-color: var(--vt-surface-th);
  color: var(--vt-text-muted);
  border-bottom: 1px solid var(--vt-border);
  font-weight: 500;
}
html.vt .chart_box > .c_block2 .c_listwarp {
  border-bottom-color: var(--vt-border);
  background-color: #FFFFFF;
  color: var(--vt-text);
}
html.vt .chart_box > .c_block2 .c_listwarp:hover {
  background-color: var(--vt-hover);
}
html.vt .chart_box > .c_block2 .c_list2,
html.vt .chart_box > .c_block2 .listtxt {
  color: var(--vt-text);
}
/* chat (orphan page, spec: no dedicated rules) - only what Layer 0 leaves unreadable (white on white) */
html.vt .chatting-head,
html.vt .chatting-footer {
  border-color: var(--vt-border);
}
html.vt .chatting-title,
html.vt .chatting-date,
html.vt .msg-area {
  color: var(--vt-text);
}
html.vt .chatting-date {
  border-color: var(--vt-border);
}
html.vt .chatting-cnt {
  color: var(--vt-text-faint);
}
html.vt .msg-content {
  background-color: var(--vt-surface);
  color: var(--vt-text);
  font-weight: 400;
}
html.vt .msg-content.mine {
  background-color: #E3F2FD;
  color: var(--vt-text);
}
html.vt .msg-content,
html.vt .msg-content * {
  font-family: var(--vt-font-prose) !important;
}
html.vt .chatting-write {
  background-color: #FFFFFF;
  border: 1px solid var(--vt-border-input);
}
html.vt .chatting-textarea {
  color: var(--vt-text);
}
html.vt .btn-chat-enter {
  background-color: #FFFFFF;
  border-color: var(--vt-border);
  color: var(--vt-text);
  box-shadow: none;
  border-radius: var(--vt-radius);
  transition: none;
}
html.vt .btn-chat-enter:hover {
  transform: none;
  color: var(--vt-btn-hover-danger);
  border-color: var(--vt-btn-hover-danger);
}
html.vt .chatting-cnt-icon img,
html.vt .chatting-send img {
  filter: invert(55%);
}

/* =====================================================================================================
   24. Login and join (mobile/login.jsp, mobile/join.jsp) - spec 6.24 / D21
   ===================================================================================================== */
html.vt .login_section {
  background-image: none;
  background-color: var(--vt-surface);
  color: var(--vt-text);
  max-width: none;
}
html.vt .login_section ~ .footer,
html.vt .frame + .footer:not(.f_trade) {
  background-color: var(--vt-surface);
}
html.vt .login_box {
  background-color: #FFFFFF;
  border: 1px solid var(--vt-border-input);
  border-radius: var(--vt-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  min-width: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 32px 24px;
}
html.vt .login_llogo,
html.vt .login_section > img {
  width: auto;
  max-width: 100%;
  height: 40px;
}
/* join.jsp: the VT-only logo above the heading (markup added under c:if vtTheme, no class) */
html.vt .login_section > img {
  margin-top: 40px;
  margin-bottom: 16px;
}
html.vt h3.login_head {
  font-size: 13px;
  line-height: 18px;
  color: var(--vt-text-tab);
  font-weight: 400;
  text-align: center;
}
html.vt h1.login_head {
  font-size: 18px;
  line-height: 24px;
  color: var(--vt-text);
  font-weight: 600;
}
html.vt .login_head,
html.vt #joinFrm .login_block > div:first-child,
html.vt #loginStatus {
  font-family: var(--vt-font-prose) !important;
}
html.vt .login_block {
  color: var(--vt-text);
}
/* the 360px card: the form rows fill the card (50% of the card would be 156px) */
html.vt .login_box .login_block,
html.vt .login_box .btn_area {
  width: 100%;
}
html.vt #joinFrm .login_block {
  background-color: #FFFFFF;
  border: 1px solid var(--vt-border-input);
  border-radius: var(--vt-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  padding: 24px;
}
/* join card: the 50% / 70% / 90% widths are kept, capped like the login card (deviation, see REPORT.md) */
html.vt #joinFrm .login_block,
html.vt #joinFrm .btn_area {
  max-width: 440px;
}
html.vt #joinFrm .login_block > div:first-child {
  color: var(--vt-text-tab);
  font-size: 13px;
}
html.vt .input_box_login {
  background-color: transparent;
  border-color: transparent transparent var(--vt-border-input) transparent;
  border-radius: 0;
}
html.vt .input_box_login:focus-within {
  border-bottom-color: var(--vt-focus);
}
html.vt .input {
  color: var(--vt-text);
}
@media screen and (min-width: 768px) {
  html.vt .input {
    font-size: 13px;
  }
}
html.vt .input_title {
  background-color: transparent;
  border-color: transparent;
  color: var(--vt-text-faint);
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}
/* underline inputs: text starts under the floating label (label sits at left:2%) */
html.vt .input_box_login .input {
  padding-left: 2%;
}
/* VQ-01 (phase 4): show/hide eye readable on white (the invert() filter on the white 15%-opacity pw.svg gave
   1.2:1). Same eye shapes as pw.svg / remove_red_eye.svg, drawn in #999 (hidden) and #333 (shown, hover) as data
   URIs; same box (32px, 6vw on phones), same background-size, same .on / :hover switch as plusasset - JS only
   toggles classList "on". */
html.vt .pw_view {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M9 .5C5.21.5 1.83 2.63.18 6 1.83 9.37 5.2 11.5 9 11.5S16.17 9.37 17.82 6C16.17 2.63 12.79.5 9 .5zm0 10A4.5 4.5 0 1 1 9 1.5a4.5 4.5 0 0 1 0 9z' fill='%23999999'/%3E%3C/svg%3E");
}
html.vt .pw_view:hover,
html.vt .pw_view.on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z' fill='%23333333'/%3E%3C/svg%3E");
}
/* login primary / secondary (never style #loginButton's normal state with opacity: JS uses .6 = busy) */
html.vt .login_section .btn:not(._2) {
  background-color: var(--vt-navy-btn);
  border-color: var(--vt-navy-btn);
  color: #FFFFFF;
}
html.vt .login_section .btn:not(._2):hover {
  background-color: var(--vt-navy-btn-hover);
  box-shadow: none;
}
html.vt .login_section .btn._2 {
  background-color: var(--vt-surface-light);
  border-color: var(--vt-border-input);
  color: var(--vt-text);
}
html.vt .login_section .btn._2:hover {
  background-color: var(--vt-hover-btn);
  color: var(--vt-text);
  border-color: var(--vt-border-input);
}
/* join "ID check" button inside the input row (declared after the login primary: equal specificity) */
html.vt .login_section .input_box_login .btn {
  background-color: var(--vt-surface-light);
  border-color: var(--vt-border-input);
  color: var(--vt-text);
  font-size: 12px;
  min-width: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
html.vt .login_section .input_box_login .btn:hover {
  background-color: var(--vt-hover-btn);
  color: var(--vt-text);
  border-color: var(--vt-border-input);
}
html.vt #loginStatus {
  color: var(--vt-status) !important;
}
html.vt #mbank,
html.vt #mbank option {
  color: var(--vt-text) !important;
  background-color: #FFFFFF !important;
}
html.vt .login_box .footer {
  background-color: transparent;
}

/* =====================================================================================================
   Responsive (same breakpoints as plusasset: 991 / 767 / 479 - no new ones)
   ===================================================================================================== */
@media screen and (max-width: 767px) {
  html.vt .block_title,
  html.vt .h_titlebox .block_title,
  html.vt .title_box .title {
    font-size: 16px;
    line-height: 22px;
  }
  html.vt .login_box {
    width: calc(100% - 32px);
    max-width: 400px;
    margin-left: 16px;
    margin-right: 16px;
    padding: 24px 16px;
  }
  html.vt #joinFrm .login_block {
    padding: 16px;
  }
}
@media screen and (max-width: 479px) {
  html.vt .logo_img {
    height: 24px;
  }
  html.vt .title_section .heading {
    font-size: 16px;
    line-height: 22px;
  }
  html.vt .block_title,
  html.vt .h_titlebox .block_title,
  html.vt .title_box .title {
    font-size: 15px;
    line-height: 20px;
  }
  html.vt .pop_title {
    font-size: 16px;
    line-height: 22px;
  }
  html.vt .d_title {
    font-size: 15px;
  }
  html.vt h1.login_head {
    font-size: 16px;
    line-height: 22px;
  }
}

/* ==========================================================================
   VT-SIDE  Collapsible WTS left menu (desktop >= 992px)   2026-11-05, owner request
   - Button .vt-side-toggle (top.jsp, VT only) toggles html.vt-side-collapsed;
     the state is kept per browser in localStorage "vt_side" (header.jsp script).
   - Collapsed: the menu slides out to the left (negative margin equal to its
     width = max(14%, 200px)) and .content grows from 86% to 100% of .section.
   - Default = expanded (as before). Phones (<= 991px) keep the existing drawer.
   - No JS reads .side_menu / .section / .content (checked); ladder untouched.
   ========================================================================== */
html.vt .vt-side-toggle {
  display: none;
}
@media screen and (min-width: 992px) {
  html.vt .vt-side-toggle {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 10px 0 2px;
    padding: 0 8px;
    border-radius: 3px;
    cursor: pointer;
    background-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }
  html.vt .vt-side-toggle span {
    display: block;
    height: 2px;
    margin: 2px 0;
    border-radius: 1px;
    background-color: #FFFFFF;
  }
  html.vt .vt-side-toggle:hover {
    background-color: var(--vt-steel-800);
  }
  html.vt .vt-side-toggle:focus-visible {
    outline: 2px solid #C2CDD7;
    outline-offset: 1px;
  }
  html.vt .section > .side_menu.pc {
    transition: margin-left .28s ease;
  }
  html.vt .section > .content {
    transition: width .28s ease;
  }
  html.vt.vt-side-collapsed .section > .side_menu.pc {
    margin-left: min(-14%, -200px);
  }
  html.vt.vt-side-collapsed .section > .content {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.vt .section > .side_menu.pc,
  html.vt .section > .content {
    transition: none;
  }
}

/* VT-SIDE fixes (phase 6 verification, 2026-11-05):
   1) the 48px toggle must not raise the top bar's minimum width: .t_content
      (top.jsp only) min-width 1120 -> 1072 keeps the bar at 1320px as before;
   2) order3 chart: its iframe has an inline width:850px; let it grow inside
      #chart when the menu is hidden, so no blank strip appears at >= ~1460px. */
@media screen and (min-width: 992px) {
  html.vt .t_content {
    min-width: 1072px;
  }
  html.vt.vt-side-collapsed .q_content1 > #chart > #chartView {
    flex-grow: 1;
  }
}