/*
 * vt-m-pages-b.css - MTS mobile redesign 2026-11 (owner: PAGES-B). 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 (reference shots in brackets): noticeList [r24], noticeDetail / msgDetail / qnaDetail [r25], msgList [r26],
 * qna [r22], qnaList [r23], chart, economic, chat, login [r29], join [r30/r31], main.
 * Page hooks: <body class="body vtm-pb vtm-pb-..."> written by the JSPs inside <c:if test="${vtTheme}"> (vt=false: no class):
 *   vtm-pb-feed   = timeline pages (notice list / message list / details)      vtm-pb-auth = login / join / main cards
 *   vtm-pb-notice, -msg, -detail (+ -ndetail / -mdetail), -qdetail, -qna, -qlist, -chart, -econ, -chat, -login, -join, -main
 * Common components (.vtm-tabs, forms, buttons, tables, pager) come from vt-m-base.css (BASE); this file only adds page rules.
 * No font-family anywhere (digits inherit VTNum/GulimChe), weights <= 600.
 * Reference geometry (390 CSS px): timeline li x=102 (notices) / 82 (messages), dot 8px ring #607D8B, line 2px, date column
 * right-aligned ending 5px left of the dot, title 15px at li+28, "+" 16px #A5A5A5 10px from the right edge.
 */
@media (max-width: 991px) {

  /* =================================================================================================================
     1. Notice | message switch (new markup .vtm-tabs.vtm-pb-tabs, styled by BASE section 10) - icon/label details
     ================================================================================================================= */
  html.vt body.vtm-pb .content > .vtm-pb-tabs > .vtm-tab > span {
    display: block;
  }
  /* reference glyphs (icomoon clipboard / bell2) are ~15-17px: tight viewBoxes + 18px box */
  html.vt body.vtm-pb .content > .vtm-pb-tabs > .vtm-tab > svg {
    width: 18px;
    height: 18px;
  }

  /* =================================================================================================================
     2. Timeline pages (noticeList r24, msgList r26, details r25): no page / block titles (the switch names the page),
        list header hidden, rows drawn as the reference feed: date column | dot + line | title | "+".
        Rows keep their DOM, ids, onclick (parent.noticeDetail / msgDetail / remove) - CSS only.
     ================================================================================================================= */
  html.vt body.vtm-pb-notice .content > .title_section,
  html.vt body.vtm-pb-detail .content > .title_section,
  html.vt body.vtm-pb-feed .content > .g_block > .h_titlebox,
  html.vt body.vtm-pb-feed .content .list_top {
    display: none;
  }
  html.vt body.vtm-pb-feed .content > .g_block {
    padding-bottom: 0;
  }
  html.vt body.vtm-pb-feed .content .form-block {
    margin: 0;
  }
  html.vt body.vtm-pb-feed .content .list {
    overflow: visible;
    padding-bottom: 0;
    background-color: transparent;
  }
  html.vt body.vtm-pb-feed .content .list_scroll {
    position: relative;
    width: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    padding: 7px 0;
    overflow: visible;
  }
  /* one feed item (li): notices at x = 102, messages at x = 82 (reference #messages-list li margin-left 28px) */
  html.vt body.vtm-pb-feed .content .list_scroll > .list_warp,
  html.vt body.vtm-pb-feed .content .list_scroll > .g_table_warp {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0 -15px 0 82px;
    padding: 0 0 20px 28px;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--m-ink);
    font-size: 14px;
    line-height: 21.5px;
  }
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp {
    margin-left: 62px;
  }
  /* unread message row: msgList.jsp writes an inline orange background (and vt-mts-base an inset bar) - the
     reference shows unread state by the badge only (see 3) */
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp[style*="ff8400"] {
    background-color: transparent !important;
    box-shadow: none;
  }
  html.vt body.vtm-pb-feed .content .list_scroll > .list_warp:hover,
  html.vt body.vtm-pb-feed .content .list_scroll > .g_table_warp:hover {
    background-color: transparent;
  }
  /* dot (ring) and line: reference .list-feed > li::before / ::after */
  html.vt body.vtm-pb-feed .content .list_scroll > .list_warp::before,
  html.vt body.vtm-pb-feed .content .list_scroll > .g_table_warp::before,
  html.vt body.vtm-pb-feed .content .list_scroll:empty::after,
  html.vt body.vtm-pb-feed .content .d_box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    z-index: 3;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border: 2px solid var(--m-timeline);
    border-radius: 50%;
    background-color: #FFFFFF;
  }
  html.vt body.vtm-pb-feed .content .list_scroll > .list_warp::after,
  html.vt body.vtm-pb-feed .content .list_scroll > .g_table_warp::after,
  html.vt body.vtm-pb-feed .content .d_box::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 3px;
    bottom: -7px;
    z-index: 2;
    width: 0;
    border-left: 1px solid var(--m-timeline);
    border-right: 1px solid var(--m-timeline);
  }
  html.vt body.vtm-pb-feed .content .list_scroll > :first-child::after {
    top: 8px;
  }
  html.vt body.vtm-pb-feed .content .list_scroll > :last-child {
    padding-bottom: 0;
  }
  html.vt body.vtm-pb-feed .content .list_scroll > :last-child::after {
    content: none;
  }
  /* cells: the running number is not shown in the reference feed */
  html.vt body.vtm-pb-notice .content .list_scroll > .list_warp > .list1,
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp > .list1:nth-child(2) {
    display: none;
  }
  /* date column: absolutely in front of the dot, right-aligned, 14px #999 (our digits at 14px have the reference
     date's glyph height). 74px holds one date token (10 digits/dashes = 70px), so "date time" data wraps at the space
     onto a second line like the reference (date / time); date-only data (notices) stays one line. A date token never
     splits (no break inside digit runs). */
  html.vt body.vtm-pb-feed .content .list_scroll > .list_warp > .list2,
  html.vt body.vtm-pb-feed .content .list_scroll > .g_table_warp > .list2 {
    position: absolute;
    top: 0;
    right: calc(100% + 5px);
    display: block;
    width: 74px;
    height: auto;
    margin: 0;
    padding: 0;
    color: var(--m-caption);
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }
  /* title: 15px #333, "+" 10px from the right edge (reference panel-title + icon-plus) */
  html.vt body.vtm-pb-notice .content .list_scroll > .list_warp > .list4 {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 20px;
    padding: 0 26px 0 0;
    text-align: left;
  }
  html.vt body.vtm-pb-feed .content .list_scroll .list4 .listtxt {
    display: block;
    color: var(--m-ink);
    font-size: 15px;
    line-height: 23px;
    font-weight: 400;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  html.vt body.vtm-pb-notice .content .list_scroll > .list_warp > .list4::after,
  html.vt body.vtm-pb-detail .content .d_titlebox::after,
  html.vt body.vtm-pb-qdetail .content .d_titlebox::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' fill='none' stroke='%23A5A5A5' stroke-width='1.8'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  }
  /* important notices: noticeList.jsp writes inline color:#ff3b30 + bold on the title -> reference red, weight 400;
     the date of that row turns red too (:has; older engines keep it grey) */
  html.vt body.vtm-pb-notice .content .list_scroll .list4 .listtxt[style*="ff3b30"] {
    color: var(--m-important) !important;
    font-weight: 400 !important;
  }
  html.vt body.vtm-pb-notice .content .list_scroll > .list_warp:has(.listtxt[style*="ff3b30"]) > .list2 {
    color: var(--m-important);
  }
  /* empty list: a single feed item "no results" (text from vt-mts-base) with its dot (r26) */
  html.vt body.vtm-pb-feed .content .list_scroll:empty::before {
    display: block;
    margin: 0 0 0 110px;
    padding: 0 0 0 0;
    color: var(--m-ink);
    font-size: 14px;
    line-height: 21.5px;
  }
  html.vt body.vtm-pb-feed .content .list_scroll:empty::after {
    left: 82px;
    top: 12px;
  }
  html.vt body.vtm-pb-msg .content .list_scroll:empty::before {
    margin-left: 90px;
  }
  html.vt body.vtm-pb-msg .content .list_scroll:empty::after {
    left: 62px;
  }
  /* pager under the feed: BASE look, a little air above */
  html.vt body.vtm-pb-feed .content > .pagging {
    margin-top: 10px;
  }

  /* =================================================================================================================
     3. Message list (r26 + our columns): [check] title [read badge] [delete] in the feed item; the select-delete button
        stays in its title row (heading hidden) as a small outline pill at the right, under the switch.
     ================================================================================================================= */
  html.vt body.vtm-pb-msg .content > .title_section {
    min-height: 0;
    padding: 0 0 4px;
  }
  html.vt body.vtm-pb-msg .content > .title_section > .heading {
    display: none;
  }
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto 30px;
    column-gap: 8px;
    align-items: start;
  }
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp > div {
    width: auto;
    height: auto;
    min-height: 23px;
    margin: 0;
    padding: 0;
  }
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp > .list1:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp > .list4 {
    display: block;
    margin-bottom: 20px;
    text-align: left;
    cursor: pointer;
  }
  /* unread (no .blue): title 500 */
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp[style*="ff8400"] > .list4 .listtxt {
    font-weight: 500;
  }
  /* read state as the reference message badge (#C1C1C1 pill, white); unread = the bell badge orange */
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp > .list1:nth-child(5) {
    display: flex;
    align-items: center;
  }
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp > .list1:nth-child(5) > .listtxt {
    padding: 0 7px;
    border-radius: 10px;
    background-color: var(--m-badge);
    color: #FFFFFF;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
  }
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp > .list1:nth-child(5) > .listtxt.blue {
    background-color: #C1C1C1;
    color: #FFFFFF;
  }
  html.vt body.vtm-pb-msg .content .list_scroll > .g_table_warp > .list1:last-child {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    margin-top: -4px;
  }

  /* title-row action buttons (msgList select-delete; qnaList select-delete / write): reference header icons are plain
     (#333, no box) -> borderless icon + label */
  html.vt body.vtm-pb-msg .content > .title_section .titlesub_btn,
  html.vt body.vtm-pb-qlist .content > .title_section .titlesub_btn {
    height: 30px;
    padding: 0 4px;
    border: 0;
    background-color: transparent;
    color: var(--m-ink);
    font-size: 13px;
    gap: 4px;
  }
  html.vt body.vtm-pb-msg .content > .title_section .titlesub_btn svg,
  html.vt body.vtm-pb-qlist .content > .title_section .titlesub_btn svg {
    width: 16px;
    height: 16px;
  }
  html.vt body.vtm-pb-msg .content > .title_section .titlesub_btn:hover,
  html.vt body.vtm-pb-qlist .content > .title_section .titlesub_btn:hover {
    background-color: transparent;
    color: var(--m-ink);
  }
  /* msgList: the select-delete as an outline pill (like the bell panel "clear all" pill), right-aligned */
  html.vt body.vtm-pb-msg .content > .title_section .titlesub_btn {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--m-line);
    border-radius: 13px;
    color: var(--m-label);
    font-size: 12px;
  }
  html.vt body.vtm-pb-msg .content > .title_section .titlesub_btn svg {
    width: 14px;
    height: 14px;
  }

  /* =================================================================================================================
     4. Detail pages (noticeDetail / msgDetail r25, qnaDetail): the item shown expanded - date column, dot + line, title
        15px with "-" on the right, body 14px below; "목록" as the reference "더 보기" bar (grey, half width, centred)
     ================================================================================================================= */
  html.vt body.vtm-pb-feed .content .d_box {
    position: relative;
    width: auto;
    margin: 0 -15px 0 82px;
    padding: 0 0 20px 28px;
    background-color: transparent;
  }
  html.vt body.vtm-pb-detail .content > .g_block {
    padding-top: 7px;
  }
  html.vt body.vtm-pb-feed .content .d_box::after {
    top: 8px;
    bottom: 0;
  }
  html.vt body.vtm-pb-feed .content .d_titlebox {
    position: relative;
    display: block;
    width: auto;
    margin: 0 0 10px;
    padding: 0 26px 0 0;
    border: 0;
    background-color: transparent;
  }
  html.vt body.vtm-pb-feed .content .d_title {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    color: var(--m-ink);
    font-size: 15px;
    line-height: 23px;
    font-weight: 400;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  html.vt body.vtm-pb-detail .content .d_titlebox::after,
  html.vt body.vtm-pb-qdetail .content .d_titlebox::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12' fill='none' stroke='%23A5A5A5' stroke-width='1.8'/%3E%3C/svg%3E");
  }
  html.vt body.vtm-pb-feed .content .d_titlebox > .date {
    position: absolute;
    top: 0;
    right: calc(100% + 33px);
    width: 74px;
    margin: 0;
    color: var(--m-caption);
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }
  html.vt body.vtm-pb-feed .content .d_txtbox {
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 10px 0 0;
    overflow-x: auto;                /* admin HTML may hold wide tables: they scroll inside the body, not the page */
    overflow-y: hidden;
    border: 0;
    background-color: transparent;
    color: var(--m-ink);
    font-size: 14px;
    line-height: 21.5px;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  html.vt body.vtm-pb-feed .content .d_txtbox img {
    max-width: 100%;
    height: auto;
  }
  /* "목록": reference "더 보기" (w-50, #F5F5F5, #999, 14px, 5px 0) */
  html.vt body.vtm-pb-feed .content .list_btn2 {
    display: flex;
    width: 50%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 10px auto 20px;
    padding: 5px 0;
    border: 0;
    border-radius: 0;
    background-color: var(--m-card);
    color: var(--m-caption);
    font-size: 14px;
    line-height: 21.5px;
  }
  html.vt body.vtm-pb-feed .content .list_btn2:hover {
    border: 0;
    background-color: #EFEFEF;
    color: var(--m-caption);
  }

  /* qnaDetail: page title kept (no switch); question = feed item with its type caption above the title,
     answer = second feed item ("답변내역") */
  html.vt body.vtm-pb-qdetail .content > .g_block {
    padding-top: 0;
  }
  html.vt body.vtm-pb-qdetail .content > .g_block > .h_titlebox {
    display: block;
    margin: 0 0 4px 110px;
    padding: 0;
    min-height: 0;
  }
  html.vt body.vtm-pb-qdetail .content > .g_block > .h_titlebox .block_title {
    color: var(--m-caption);
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
  }
  html.vt body.vtm-pb-qdetail .content > .g_block + .g_block > .h_titlebox {
    display: none;
  }

  /* =================================================================================================================
     5. Inquiry form qna3 (r22): labels above the controls (label row x = 10, control x = 20 like the reference),
        title 35.6px, textarea 215.6px, 작성완료 = full-width primary right under it, 작성취소 secondary below
     ================================================================================================================= */
  html.vt body.vtm-pb-qna .content > .g_block > .h_titlebox {
    display: none;
  }
  html.vt body.vtm-pb-qna .content .input_warp {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    margin: 0;
  }
  html.vt body.vtm-pb-qna .content .input_warp > .input_label2,
  html.vt body.vtm-pb-qna .content .vtm-pb-qlabel {
    flex: none;
    width: auto;
    margin: 0 0 0 -10px;
    padding: 0;
    color: var(--m-ink);
    font-size: 14px;
    line-height: 21.5px;
    text-align: left;
  }
  html.vt body.vtm-pb-qna .content .input_warp > .input_box2 {
    width: 100%;
    height: 35.6px;
    flex: none;
  }
  html.vt body.vtm-pb-qna .content .qna_area {
    width: 100%;
    height: 215.6px;
    min-height: 215.6px;
    margin: 0;
    padding: 6.8px 14px;
    resize: vertical;
  }
  html.vt body.vtm-pb-qna .content .btn_area2 {
    flex-direction: column;
    gap: 10px;
    margin: 0;
  }
  html.vt body.vtm-pb-qna .content .btn_area2 > .btn2 {
    flex: none;
    width: 100%;
  }

  /* =================================================================================================================
     6. Inquiry list qnaList3 (r23): block title hidden (the table follows the page title), table area tall enough that
        the pager sits low like the reference (calc(100vh - 180px) data area), our 7 columns kept (horizontal scroll)
     ================================================================================================================= */
  html.vt body.vtm-pb-qlist .content > .g_block > .h_titlebox {
    display: none;
  }
  html.vt body.vtm-pb-qlist .content .list {
    min-height: calc(100vh - 190px);
  }
  html.vt body.vtm-pb-qlist .content .list_top > :nth-child(1),
  html.vt body.vtm-pb-qlist .content .list_scroll > * > :nth-child(1),
  html.vt body.vtm-pb-qlist .content .list_top > :nth-child(2),
  html.vt body.vtm-pb-qlist .content .list_scroll > * > :nth-child(2) {
    width: 52px;
  }
  html.vt body.vtm-pb-qlist .content .list_top > :nth-child(3),
  html.vt body.vtm-pb-qlist .content .list_scroll > * > :nth-child(3) {
    width: 100px;
  }
  html.vt body.vtm-pb-qlist .content .list_top > :nth-child(4),
  html.vt body.vtm-pb-qlist .content .list_scroll > * > :nth-child(4) {
    width: 170px;
  }
  html.vt body.vtm-pb-qlist .content .list_top > :nth-child(6),
  html.vt body.vtm-pb-qlist .content .list_scroll > * > :nth-child(6) {
    width: 84px;
  }
  html.vt body.vtm-pb-qlist .content .list_top > :nth-child(7),
  html.vt body.vtm-pb-qlist .content .list_scroll > * > :nth-child(7) {
    width: 56px;
  }

  /* =================================================================================================================
     7. Chart page chart3: flat; chart full width with the reference chart-tab height (calc(100vh - 320px)),
        symbol table as a reference table (title 18px, header #F5F5F5 35px, rows 45px, no grid lines)
     ================================================================================================================= */
  html.vt body.vtm-pb-chart .content > .chart_box,
  html.vt body.vtm-pb-econ .content > .chart_box {
    gap: 0;
    margin-top: calc(0px - var(--m-cgap));
    padding: 0;
  }
  html.vt body.vtm-pb-chart .content > .chart_box > .c_block1,
  html.vt body.vtm-pb-econ .content > .chart_box > .c_block1 {
    gap: 0;
    margin: 0 calc(0px - var(--m-cpad));
    width: auto;
  }
  html.vt body.vtm-pb-chart .content > .chart_box > .c_block1 .chart {
    height: calc(100vh - 320px);
    min-height: 300px;
    border: 0;
    border-top: 1px solid var(--m-line);
    border-bottom: 1px solid var(--m-line);
    border-radius: 0;
    box-shadow: none;
  }
  html.vt body.vtm-pb-chart .content > .chart_box > .c_block1 .chart iframe {
    border: 0;
  }
  html.vt body.vtm-pb-chart .content > .chart_box > .c_block2 {
    gap: 0;
    width: auto;
    margin: 0 var(--m-inset);
  }
  html.vt body.vtm-pb-chart .content > .chart_box > .c_block2 .chart_block3 {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
  }
  html.vt body.vtm-pb-chart .content > .chart_box > .c_block2 .c_title {
    display: block;
    width: auto;
    height: auto;
    padding: 7px 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--m-ink);
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
    text-align: left;
  }
  html.vt body.vtm-pb-chart .content > .chart_box > .c_block2 .c_chart_top {
    height: 35px;
    padding: 0;
    border-bottom: 0;
    background-color: var(--m-head);
    color: var(--m-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
  }
  html.vt body.vtm-pb-chart .content > .chart_box > .c_block2 .c_list_scroll2 {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  html.vt body.vtm-pb-chart .content > .chart_box > .c_block2 .c_listwarp {
    height: 45px;
    border-bottom: 0;
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
  }
  html.vt body.vtm-pb-chart .content > .chart_box > .c_block2 .c_list2 {
    padding: 0 6px;
  }

  /* economic: the frame of the 1024px-wide indicator page, flat and full width */
  html.vt body.vtm-pb-econ .content > .chart_box > .c_block1 .chart {
    height: auto;
    border: 0;
    border-top: 1px solid var(--m-line);
    border-radius: 0;
    box-shadow: none;
  }
  html.vt body.vtm-pb-econ .content > .chart_box > .c_block1 .chart iframe {
    display: block;
    border: 0;
  }

  /* =================================================================================================================
     8. Chat chat3 (orphan page): flat white block at x = 20 like the other pages
     ================================================================================================================= */
  html.vt body.vtm-pb-chat .content > .g_block._3 {
    margin: calc(0px - var(--m-cgap)) var(--m-inset) 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--m-bg);
  }
  html.vt body.vtm-pb-chat .content .chatting-head {
    padding: 10px 0;
    border-bottom: 1px solid var(--m-line);
  }
  html.vt body.vtm-pb-chat .content .chatting-body {
    height: calc(100vh - 260px);
    min-height: 240px;
    padding: 12px 0;
  }
  html.vt body.vtm-pb-chat .content .chatting-footer {
    border-top: 1px solid var(--m-line);
  }
  html.vt body.vtm-pb-chat .content .chatting-write {
    width: 100%;
    margin: 0;
  }

  /* =================================================================================================================
     9. Login / join / main (r29, r30, r31): white page, logo centred above a 1px #DDD card (radius 3), card head =
        tabs (#FAFAFA, active white, 17px) + icon circle; underline inputs with 16px grey icons on the left (inputs keep
        ids/placeholders; our floating labels stay for screen readers only); navy 36px button. No navbar here.
     ================================================================================================================= */
  html.vt body.vtm-pb-auth,
  html.vt body.vtm-pb-auth .frame,
  html.vt body.vtm-pb-auth .login_section {
    background-color: #FFFFFF;
  }
  html.vt body.vtm-pb-auth .login_section {
    justify-content: center;
    padding: 20px 0;
  }
  /* the empty copyright footer (login/main: after .login_section; join: after .frame) only adds a scroll */
  html.vt body.vtm-pb-auth .login_section ~ .footer,
  html.vt body.vtm-pb-auth .frame + .footer {
    display: none;
  }
  /* the card is .form-block (login / join); login's .login_box is only the column holding logo + card */
  html.vt body.vtm-pb-login .login_box {
    gap: 0;
    width: 100%;
    max-width: 390px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
  }
  html.vt body.vtm-pb-auth .login_llogo,
  html.vt body.vtm-pb-join .login_section > img {
    display: block;
    width: auto;
    height: 40px;
    margin: 0 auto 20px;
  }
  /* the English slogan is replaced by the card's welcome line (reference has none) */
  html.vt body.vtm-pb-login .login_box > .login_head,
  html.vt body.vtm-pb-join .login_section > .login_head {
    display: none;
  }
  html.vt body.vtm-pb-login .login_box > .form-block,
  html.vt body.vtm-pb-join .login_section > .form-block {
    width: 100%;
    margin: 0;
    padding: 0 0 20px;
    border: 1px solid var(--vt-border-input);
    border-radius: 3px;
    background-color: #FFFFFF;
    overflow: hidden;
  }
  html.vt body.vtm-pb-join .login_section > .form-block {
    width: calc(100% - 40px);
    max-width: 350px;
    margin: 0 auto;
  }
  /* card head: tabs */
  html.vt body.vtm-pb-auth .vtm-auth-tabs {
    display: flex;
    background-color: var(--vt-surface-light);
  }
  html.vt body.vtm-pb-auth .vtm-auth-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    padding: 0 20px 5px;
    color: #777777;
    font-size: 17px;
    line-height: 26px;
    font-weight: 400;
    text-decoration: none;
  }
  html.vt body.vtm-pb-auth .vtm-auth-tab + .vtm-auth-tab {
    border-left: 1px solid var(--vt-border-input);
  }
  html.vt body.vtm-pb-auth .vtm-auth-tab.on {
    background-color: #FFFFFF;
    color: var(--m-ink);
    cursor: default;
  }
  /* card head: icon circle 78px (login: grey reading figure, join: green plus) + welcome line 17px */
  html.vt body.vtm-pb-auth .vtm-auth-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 20px 0;
    text-align: center;
  }
  html.vt body.vtm-pb-auth .vtm-auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 78px;
    height: 78px;
    margin: 0 0 20px;
    border: 3px solid #90A4AE;
    border-radius: 50%;
    color: #90A4AE;
  }
  html.vt body.vtm-pb-auth .vtm-auth-icon svg {
    display: block;
    width: 32px;
    height: 32px;
  }
  html.vt body.vtm-pb-login .vtm-auth-icon svg {
    width: 35px;
    height: 35px;
  }
  html.vt body.vtm-pb-join .vtm-auth-icon {
    border-color: #4CAF50;
    color: #4CAF50;
  }
  html.vt body.vtm-pb-auth .vtm-auth-welcome {
    margin: 0 0 20px;
    color: var(--m-ink);
    font-size: 17px;
    line-height: 26px;
    font-weight: 400;
  }
  /* form rows */
  html.vt body.vtm-pb-auth .login_section .login_block,
  html.vt body.vtm-pb-join #joinFrm .login_block {
    gap: 20px;
    width: auto;
    max-width: none;
    margin: 0 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    text-align: left;
  }
  html.vt body.vtm-pb-join #joinFrm .login_block {
    margin-top: 0;
  }
  /* join intro line ("welcome! ...") under the plus circle */
  html.vt body.vtm-pb-join #joinFrm .login_block > div:first-child {
    margin: 0 0 4px;
    color: #666666;
    font-size: 14px;
    line-height: 21.5px;
    text-align: center;
  }
  html.vt body.vtm-pb-auth .login_section .input_box_login {
    display: flex;
    align-items: center;
    height: 35px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--vt-border-input);
    border-radius: 0;
    background-color: transparent;
  }
  html.vt body.vtm-pb-auth .login_section .input_box_login:focus-within {
    border-bottom-color: var(--m-primary);
  }
  html.vt body.vtm-pb-auth .login_section .input_box_login .input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 14px 0 44px;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    color: var(--m-ink);
    font-size: 13px;
    line-height: 20px;
  }
  html.vt body.vtm-pb-auth .login_section .input_box_login .input::placeholder {
    color: var(--m-caption);
  }
  /* rows with the show-password eye on the right (login #pw, join #pw / #pw2) */
  html.vt body.vtm-pb-auth .login_section .input_box_login #pw,
  html.vt body.vtm-pb-join .login_section .input_box_login #pw2 {
    padding-right: 34px;
  }
  html.vt body.vtm-pb-auth .login_section .pw_view {
    top: 50%;
    right: 6px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
  }
  /* floating labels ("ID", "Password", ...) -> kept for screen readers; the reference uses icons instead */
  html.vt body.vtm-pb-auth .login_section .input_title {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    min-width: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
  }
  /* field icons (reference icomoon user / lock / user-check / user-lock / mobile / office / credit-card / mail / vcard) */
  html.vt body.vtm-pb-login #id,
  html.vt body.vtm-pb-join #name,
  html.vt body.vtm-pb-join #mname {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  }
  html.vt body.vtm-pb-login #pw {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
  }
  html.vt body.vtm-pb-join #id {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M9 17l3-2.94c-.39-.04-.68-.06-1-.06-2.67 0-8 1.34-8 4v2h9l-3-3zm2-5c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm4.47 8.5L12 17l1.4-1.41 2.07 2.08 5.13-5.17 1.4 1.41z'/%3E%3C/svg%3E");
  }
  html.vt body.vtm-pb-join #pw,
  html.vt body.vtm-pb-join #pw2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-2.67 0-8 1.34-8 4v2h11v-4.5c0-.53.1-1.03.29-1.48C11.08 13.01 9.86 13 9 13zm12 2h-.5v-1.5a2.5 2.5 0 0 0-5 0V15H15c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1zm-1.5 0h-3v-1.5a1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E");
  }
  html.vt body.vtm-pb-join #email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z'/%3E%3C/svg%3E");
  }
  html.vt body.vtm-pb-join #phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E");
  }
  html.vt body.vtm-pb-join #inviteCode {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM8 7.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM12 16H4v-.8c0-1.33 2.67-2 4-2s4 .67 4 2V16zm8-1h-6v-2h6v2zm0-4h-6V9h6v2z'/%3E%3C/svg%3E");
  }
  html.vt body.vtm-pb-join #maccount {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M20 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
  }
  /* bank select: building icon + reference chevron; the inline dark colours are beaten by vt-mts-base (!important) */
  html.vt body.vtm-pb-join #mbank {
    -webkit-appearance: none;
    appearance: none;
    padding: 0 34px 0 44px;
    line-height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z'/%3E%3C/svg%3E"),
      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, no-repeat;
    background-position: 14px center, right 12px center;
    background-size: 16px 16px, 12px 8px;
    color: var(--m-ink);
    font-size: 13px;
  }
  /* join: "ID check" button at the right end of the ID underline */
  html.vt body.vtm-pb-join .login_section .input_box_login .btn {
    flex: none;
    width: auto;
    min-width: 0;
    height: 28px;
    margin: 0 0 0 6px;
    padding: 0 10px;
    border: 1px solid var(--vt-border-input);
    border-radius: 3px;
    background-color: var(--vt-surface-light);
    color: var(--m-ink);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
  }
  /* buttons: login (navy #0C2748, 36px) / join (reference bg-dark #343752); the 회원가입 button of the login form is the
     second tab now; HTS download as the reference links row (14px, #0C2748 link) */
  html.vt body.vtm-pb-auth .login_section .btn_area {
    gap: 8px;
    width: auto;
    margin: 20px 20px 0;
    padding: 0;
  }
  html.vt body.vtm-pb-auth .login_section .btn_area > .btn {
    width: 100%;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
  }
  html.vt body.vtm-pb-auth .login_section .btn_area > .btn:not(._2) {
    background-color: var(--m-login-btn);
    border-color: var(--m-login-btn);
    color: #FFFFFF;
  }
  html.vt body.vtm-pb-join .login_section .btn_area > .btn:not(._2) {
    background-color: #343752;
    border-color: #343752;
  }
  html.vt body.vtm-pb-auth .login_section .btn_area > .btn:not(._2):hover {
    background-color: var(--vt-navy-btn-hover);
    border-color: var(--vt-navy-btn-hover);
  }
  html.vt body.vtm-pb-login .login_section .btn_area > .btn._2[href*="join3"] {
    display: none;
  }
  html.vt body.vtm-pb-login .login_section .btn_area > .btn._2 {
    height: auto;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--m-login-btn);
    font-size: 14px;
    line-height: 21.5px;
  }
  html.vt body.vtm-pb-login .login_section .btn_area > .btn._2:hover {
    border: 0;
    background-color: transparent;
    color: var(--vt-navy-btn-hover);
    text-decoration: underline;
  }
  html.vt body.vtm-pb-join .login_section .btn_area > div {
    display: none;
  }
  html.vt body.vtm-pb-auth #loginStatus {
    margin: 12px 20px 0 !important;
    font-size: 13px !important;
  }

  /* main3 (web / download landing, orphan): the same card */
  html.vt body.vtm-pb-main .login_box {
    gap: 12px;
    width: calc(100% - 40px);
    max-width: 350px;
    min-width: 0;
    margin: 0 auto;
    padding: 30px 20px;
    border: 1px solid var(--vt-border-input);
    border-radius: 3px;
    box-shadow: none;
    background-color: #FFFFFF;
  }
  html.vt body.vtm-pb-main .login_box > .login_head {
    margin: 0;
    color: var(--m-ink);
    font-size: 17px;
    line-height: 26px;
    font-weight: 400;
  }
  html.vt body.vtm-pb-main .login_box > .login_head2 {
    color: var(--m-caption);
    font-size: 13px;
    line-height: 20px;
  }
  html.vt body.vtm-pb-main .login_box > .heading-2 {
    margin: 4px 0;
    color: var(--m-ink);
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
  }
  html.vt body.vtm-pb-main .login_box > .btn_area2 {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 8px 0 0;
  }
  html.vt body.vtm-pb-main .login_box > .btn_area2 > .btn2 {
    width: 100%;
    min-width: 0;
    height: 36px;
    border: 0;
    border-radius: 3px;
    background-color: var(--m-login-btn);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 400;
  }
}