/*
 * vt-m-shell.css - MTS mobile redesign 2026-11 (owner: SHELL). 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.
 *
 * Phone navbar, ☰ menu, bell panel (mobileFrame/top.jsp) + look of the shared popups .popup.general (top.jsp),
 * .popup.pw and .popup.notice (footer.jsp; CSS only). Reference: spec 5.1-5.3, shots r01/r13-r17/r28.
 * Contracts:
 *  - navbar = .top, 50px, position:fixed at top 0, z-index 1000 (things that must cover it need more, things under it
 *    less). Every page's .section starts 50px down (padding-top); pages add their own spacing inside.
 *  - refresh icon only when body.vtm-order (set by ORDER-MAIN); its click calls window.vtmRefresh() if defined.
 *  - html.vtm-bell-open while the bell panel is open; html.vtm-scrolled when the page is scrolled (vt-m-shell.js).
 *  - .top keeps no transform/filter/contain (.popup.general and .q_top_btn inside it are position:fixed).
 *  - .mobile_toggle is the menu overlay: top.jsp shows it as display:flex, order.jsp as display:block (slideToggle);
 *    everything below works in both.
 */
@media (max-width: 991px) {

  /* ------------------------------------------------------------------ 1. navbar ------------------------------- */
  html.vt .top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    min-height: 50px;
    z-index: 1000;
    background-color: var(--m-nav);
    color: var(--m-nav-ink);
  }
  html.vt .section {
    padding-top: 50px;
  }
  html.vt .top_warp {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 50px;
    box-shadow: none;
  }
  html.vt .t_content {
    position: static;
    display: block;
    width: 100%;
    min-width: 0;
    height: 50px;
    margin: 0;
    padding: 0;
  }
  /* logo: centred over the whole bar; the strip itself lets taps through to ☰ / bell */
  html.vt .top_left {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    pointer-events: none;
  }
  html.vt .top_left .logo {
    display: block;
    width: auto;
    min-width: 0;
    height: 30px;
    margin-top: 11px;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .top_left .logo_img {
    display: block;
    width: auto;
    max-width: 160px;
    height: 30px;
    object-fit: contain;
  }
  /* right side: the old bell / gear / user box are replaced on phones by .vtm-nav-right (their functions: bell panel, ☰ menu) */
  html.vt .top_right {
    position: absolute;
    top: 0;
    right: 4px;
    height: 48px;
    margin: 0;
    display: block;
  }
  html.vt .top_right > .alarm_warp,
  html.vt .top_right > .t_iconmenu,
  html.vt .top_right > .my_box {
    display: none;
  }
  html.vt .vtm-nav-right {
    display: flex;
    align-items: flex-start;
    height: 48px;
  }
  html.vt .vtm-refresh,
  html.vt .vtm-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    color: var(--m-nav-ink);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .vtm-refresh {
    display: none;
    width: 28px;
    padding-top: 2px;
  }
  html.vt body.vtm-order .vtm-refresh {
    display: flex;
  }
  html.vt .vtm-refresh svg {
    display: block;
    width: 20px;
    height: 18px;
  }
  html.vt .vtm-bell {
    width: 48px;
    padding-top: 1px;
  }
  html.vt .vtm-bell svg {
    display: block;
    width: 16px;
    height: 17px;
  }
  html.vt.vtm-bell-open .vtm-bell {
    background-color: var(--m-menu-open);
  }
  html.vt .vtm-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 16px;
    height: 17px;
    padding: 2px 4px;
    border-radius: 10rem;
    background-color: var(--m-badge);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    line-height: 13px;
    text-align: center;
    white-space: nowrap;
  }
  /* scroll-to-top (extra function, kept): discreet navy circle, only once the page is scrolled; not on 빠른주문 (it would sit
     on the ladder's order columns / bottom bar, and that page scrolls inside its own panes) */
  html.vt .q_top_btn {
    display: none;
    z-index: 5;
    width: 40px;
    height: 40px;
    right: 16px;
    bottom: 16px;
    border: 0;
    background-color: var(--m-nav);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  }
  html.vt.vtm-scrolled .q_top_btn {
    display: flex;
  }
  html.vt body.vtm-order .q_top_btn {
    display: none;
  }
  html.vt .q_top_icon {
    width: 18px;
    height: 18px;
  }

  /* ------------------------------------------------------------------ 2. ☰ button + menu overlay ------------- */
  html.vt .mobile_menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    display: block;
    width: 41px;
    height: 48px;
    padding: 0 0 0 20px;
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .2);
    color: var(--m-nav-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .mobile_menu:hover {
    color: var(--m-nav-ink);
  }
  html.vt .mobile_menu > .icon {
    position: relative;
    z-index: 2;
    display: block;
    width: 21px;
    height: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 20'%3E%3Cpath d='M0 0h25v4.4H0zM0 7.8h25v4.4H0zM0 15.6h25v4.4H0z' fill='%23C2CDD7'/%3E%3C/svg%3E") 6.5px 19px / 12.5px 10px no-repeat;
  }
  html.vt .mobile_menu > .icon > svg {
    display: none;
  }
  /* the overlay (display is JS-controlled: none / flex / block). It is its own scroller BELOW the navbar row
     (top 50px): with all groups open the list is taller than the screen, and scrolled items must never slide into
     the row of the ☰ button (they are clipped at y = 50). ::before paints that row navy over the logo / bell while
     the menu is open (reference r13/r14: only ☰ visible); fixed, so it is not clipped and does not scroll. */
  html.vt .mobile_toggle {
    position: fixed;
    top: 50px;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 1;
    width: 100%;
    height: calc(100% - 50px);
    margin: 0;
    padding: 0 0 30px;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--m-nav);
    color: var(--m-nav-ink);
    cursor: default;
  }
  html.vt .mobile_toggle::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: var(--m-nav);
  }
  html.vt .mobile_toggle > .side_menu {
    display: none;
  }
  html.vt .vtm-menu {
    display: block;
    flex: none;
    padding-left: 20px;
  }
  html.vt .vtm-mgroup {
    margin: 0;
    padding: 0 20px 0 8px;
    list-style: none;
  }
  html.vt .vtm-mgroup-end {
    padding-bottom: 10px;
  }
  html.vt .vtm-mi {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
  }
  html.vt .vtm-ml {
    display: block;
    height: 48px;
    padding: 14px 16px;
    color: var(--m-nav-ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .vtm-dd-head::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 12px;
    vertical-align: 4px;
    border-right: 1px solid var(--m-menu-sub-ink);
    border-bottom: 1px solid var(--m-menu-sub-ink);
    transform: rotate(45deg);
  }
  /* last tapped group head (the reference keeps focus on it: bg #0A151D, text unchanged); press feedback on items */
  html.vt .vtm-ml:active,
  html.vt .vtm-dd-head.vtm-focus {
    background-color: var(--m-menu-open);
  }
  html.vt .vtm-sub {
    display: none;
    width: calc(100vw - 40px);
    padding: 8px 0 8px 10px;
    border-radius: 3px;
    background-color: var(--m-menu-sub);
  }
  html.vt .vtm-dd.vtm-open > .vtm-sub {
    display: block;
  }
  html.vt .vtm-si {
    display: block;
    height: 36px;
    padding: 8px 16px;
    color: var(--m-menu-sub-ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .vtm-si + .vtm-si {
    margin-top: 1px;
  }
  html.vt .vtm-si:active {
    background-color: #0E1B25;
  }
  /* date / time line (extra) under the items */
  html.vt .mobile_toggle > .time_section {
    display: block;
    flex: none;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 12px 20px 0 44px;
  }
  html.vt .mobile_toggle > .time_section .time_frame {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--m-menu-sub-ink);
    font-size: 12px;
    line-height: 18px;
    text-align: left;
  }

  /* ------------------------------------------------------------------ 3. bell panel ------------------------------ */
  html.vt .vtm-bellpanel {
    display: none;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding-left: 10px;
    flex-direction: column;
    background-color: var(--m-menu-sub);
    color: var(--m-nav-ink);
    font-size: 13px;
    line-height: 20px;
    cursor: default;
  }
  html.vt.vtm-bell-open .vtm-bellpanel {
    display: flex;
  }
  html.vt .vtm-btabs {
    display: flex;
    flex: none;
    height: 50px;
  }
  html.vt .vtm-btab {
    display: block;
    flex: 1 1 50%;
    height: 50px;
    padding: 0 2px;
    background-color: var(--m-menu-sub);
    color: var(--m-menu-sub-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .vtm-btab.vtm-on {
    background-color: var(--m-tab-on);
    color: #FFFFFF;
  }
  html.vt .vtm-bpane {
    display: none;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  html.vt .vtm-bpane.vtm-on {
    display: flex;
  }
  html.vt .vtm-bhead {
    display: flex;
    flex: none;
    padding: 20px;
  }
  html.vt .vtm-bclear {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 6px 0 5px;
    border: 1px solid #DEDEDE;
    border-radius: 10rem;
    background-color: var(--m-menu-sub);
    color: var(--m-nav-ink);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .vtm-bclear svg {
    display: block;
    flex: none;
    width: 12px;
    height: 12px;
    margin-right: 3px;
  }
  html.vt .vtm-bclear:active {
    color: var(--m-menu-sub-ink);
  }
  html.vt .vtm-bbody {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 20px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  html.vt .vtm-bpane-notice .vtm-bbody {
    padding-top: 20px;
  }
  html.vt .vtm-bempty {
    display: none;
    color: var(--m-nav-ink);
    font-size: 13px;
    line-height: 20px;
    text-align: center;
  }
  html.vt .vtm-bpane.vtm-empty .vtm-bempty {
    display: block;
  }
  html.vt .vtm-blist,
  html.vt .vtm-nlist {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  html.vt .vtm-blist > li > a {
    display: block;
    padding: 14px 0;
    border-top: 1px solid #303335;
    color: var(--m-nav-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    word-break: break-all;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .vtm-nlist > li + li {
    margin-top: 20px;
  }
  html.vt .vtm-nlist > li > a {
    display: block;
    padding: 20px 0;
    border-top: 1px solid #303335;
    color: var(--m-nav-ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .vtm-ndate,
  html.vt .vtm-ntitle {
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: var(--m-nav-ink);
  }
  /* date 14px like the notice page column (our digits at 14px = the reference date glyph height); the line is wide,
     so a date with a time stays on one line as in the reference bell list (r16) */
  html.vt .vtm-ndate {
    font-size: 14px;
    word-break: normal;
    overflow-wrap: normal;
  }
  html.vt .vtm-ntitle {
    margin-top: 3px;
    font-weight: 500;
    word-break: break-all;
  }
  html.vt .vtm-nlist .vtm-imp .vtm-ndate,
  html.vt .vtm-nlist .vtm-imp .vtm-ntitle {
    color: #FF0000;
  }
  html.vt .vtm-blist > li > a:active .vtm-ntitle,
  html.vt .vtm-blist > li > a:active,
  html.vt .vtm-nlist > li > a:active .vtm-ntitle {
    color: var(--m-menu-sub-ink);
  }
  html.vt .vtm-bfoot {
    flex: none;
    height: 51px;
    margin-left: -10px;
    border-top: 1px solid #283648;
    background-color: var(--m-menu-sub);
    line-height: 50px;
    text-align: center;
  }
  html.vt .vtm-bfoot a {
    color: var(--m-menu-sub-ink);
    font-size: 13px;
    text-decoration: none;
  }

  /* ------------------------------------------------------------------ 4. shared popups ------------------------- */
  /* 4a. "쪽지가 도착했습니다" (.popup.general, top.jsp): reference alert - white box radius 5, overlay .4, primary button */
  html.vt .popup.general {
    background-image: none;
    background-color: rgba(0, 0, 0, .4);
  }
  html.vt .general_popbox {
    width: 80%;
    max-width: 360px;
    padding: 24px 20px 20px;
    grid-row-gap: 0;
    border: 0;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
  }
  html.vt .popup.general .pop_title {
    color: var(--m-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
  }
  html.vt .general_poptxt {
    min-height: 0;
    padding: 12px 0 22px;
    color: var(--m-ink);
    font-size: 14px;
    line-height: 20px;
  }
  html.vt .popup.general .pop_btn_area2 {
    width: 100%;
  }
  html.vt .popup.general .pop_btn_area2 .btn,
  html.vt .popup.notice .pop_btn_area2 .btn {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--m-primary);
    border-radius: 3px;
    background-color: var(--m-primary);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
  }

  /* 4b. new-notice popup (.popup.notice, footer.jsp): same alert look */
  html.vt .popup.notice {
    background-image: none;
    background-color: rgba(0, 0, 0, .4);
  }
  html.vt .notice_popblock {
    width: 80%;
    max-width: 360px;
    padding: 28px 20px 20px;
    grid-row-gap: 0;
    border: 0;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
  }
  html.vt .popup.notice .pop_title {
    color: var(--m-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
  }
  html.vt .popup.notice .pop_title2 {
    margin-top: 6px;
    color: var(--m-label);
    font-size: 13px;
    line-height: 19px;
  }
  html.vt .popup.notice .w-form {
    margin: 22px 0 0;
  }
  html.vt .popup.notice .pop_btn_area2 {
    width: 100%;
  }
  html.vt .popup.notice .popexsit {
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
  }
  html.vt .popup.notice .exsit_icon {
    width: 14px;
    height: 14px;
  }

  /* 4c. password change (.popup.pw, footer.jsp; opened by ☰ > 회원 > 비밀번호 변경): reference modal r28 -
     full screen white, 50px #324DA8 header with white title and ×, form rows label | input, grey footer with the button */
  html.vt .popup.pw {
    background-image: none;
    background-color: rgba(0, 0, 0, .4);
  }
  html.vt .pw_popblock {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 0 21px 0 24px;
    grid-row-gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background-color: #FFFFFF;
    box-shadow: none;
    color: var(--m-ink);
  }
  html.vt .popup.pw .pop_logo {
    display: none;
  }
  html.vt .popup.pw .pop_titleblock {
    flex: none;
    margin: 0 -21px 0 -24px;
    text-align: left;
  }
  html.vt .popup.pw .pop_title {
    height: 50px;
    padding: 0 56px 0 24px;
    background-color: #324DA8;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 50px;
  }
  html.vt .popup.pw .pop_title2 {
    padding: 20px 21px 4px 24px;
    color: var(--m-label);
    font-size: 13px;
    line-height: 19px;
  }
  html.vt .popup.pw .popexsit {
    top: 0;
    right: 0;
    z-index: 1;
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
  html.vt .popup.pw .popexsit img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
  }
  html.vt .popup.pw .w-form {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    margin: 0;
  }
  html.vt .popup.pw .pop_inputblock {
    width: 100%;
    margin: 10px 0 0;
    grid-row-gap: 12px;
  }
  html.vt .popup.pw .input_box_login {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }
  html.vt .popup.pw .input_title {
    position: static;
    order: -1;
    flex: none;
    width: 104px;
    min-width: 0;
    padding: 0 8px 0 0;
    border: 0;
    background-color: transparent;
    color: var(--m-ink);
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    white-space: normal;
  }
  html.vt .popup.pw .input_box_login .input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 38px 0 10px;
    border: 1px solid var(--m-line);
    border-radius: 3px;
    background-color: #FFFFFF;
    color: var(--m-ink);
    font-size: 13px;
    line-height: 20px;
    text-align: right;
  }
  html.vt .popup.pw .input_box_login .input:focus {
    border-color: var(--m-primary);
  }
  html.vt .popup.pw .input_box_login .input::placeholder {
    color: var(--m-caption);
  }
  html.vt .popup.pw .pw_view {
    right: 8px;
    width: 22px;
    height: 22px;
  }
  html.vt .popup.pw .pop_btn_area {
    flex: none;
    width: auto;
    margin: auto -21px 0 -24px;
    padding: 10px;
    background-color: #F1F3F5;
  }
  html.vt .popup.pw .pop_btn_area .btn {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--m-primary);
    border-radius: 3px;
    background-color: var(--m-primary);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
  }
  html.vt .popup.pw .w-form > .pop_inputblock {
    margin-bottom: 24px;
  }
}