/* ===============================================================
   Mobile Responsive CSS - 목포항 도선사회 관리시스템
   ---------------------------------------------------------------
   Breakpoints:
     ≤991px  : Tablet + Mobile (layout reset, form stack, scroll)
     ≤576px  : Phone only (card layout, extra optimizations)
     >991px  : Desktop (no changes - all rules inside @media)
   ---------------------------------------------------------------
   All rules are scoped in @media queries.
   Desktop layout is completely unaffected.
   =============================================================== */


/* ==========================================================
   TABLET + MOBILE SHARED (≤991px)
   ========================================================== */
@media (max-width: 991px) {

  /* ----------------------------------------------------------
     1. Layout Reset
     ---------------------------------------------------------- */
  html {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth;
  }

  html::-webkit-scrollbar {
    display: none !important;
  }

  body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    background: #fff;
  }

  body::-webkit-scrollbar {
    display: none !important;
  }

  body.stretched #wrapper {
    margin: 0 !important;
    width: 100% !important;
  }

  #wrapper {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    backface-visibility: hidden;
  }

  #wrapper::-webkit-scrollbar {
    display: none !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* page-title banner: reduce vertical space */
  #page-title {
    padding: 10px 0 !important;
    min-height: 0 !important;
  }

  #page-title .container {
    min-height: 0 !important;
  }

  section#page-title.title-bg-customer {
    display: none !important;
  }

  /* content area tighter */
  .content-wrap {
    padding: 15px 0 !important;
  }

  .section.nobg {
    padding: 10px 0 !important;
  }

  /* ----------------------------------------------------------
     2. Typography
     ---------------------------------------------------------- */
  body,
  p,
  span,
  div,
  td,
  th,
  li,
  input,
  select,
  textarea,
  button,
  label {
    font-size: 14px;
  }

  .table_list th {
    font-size: 13px;
  }

  h3.after-line,
  h4.after-line {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }

  .title-2dep {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 15px !important;
    line-height: 46px !important;
    margin: 0 !important;
  }

  /* ----------------------------------------------------------
     3. table_form Responsive (TH/TD vertical stack)
     ---------------------------------------------------------- */
  .table_form {
    display: block !important;
    width: 100% !important;
    background: #fff;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 12px !important;
    overflow: visible !important;
  }

  .table_form colgroup {
    display: none !important;
  }

  .table_form tbody {
    display: block !important;
    width: 100% !important;
  }

  .table_form tr {
    display: flex !important;
    flex-wrap: wrap !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .table_form tr:last-child {
    border-bottom: none !important;
  }

  .table_form th {
    display: flex !important;
    align-items: center !important;
    width: 100px !important;
    flex: 0 0 100px !important;
    text-align: left !important;
    padding: 10px 12px !important;
    background: #f8f9fa !important;
    border-bottom: none !important;
    border-right: 1px solid #f0f0f0 !important;
    font-weight: 600;
    font-size: 13px !important;
  }

  .table_form td {
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 12px !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
  }

  /* colspan td: TH 옆에서 나머지 너비 차지 (label-left 유지) */
  .table_form td[colspan] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .table_form td input[type="text"],
  .table_form td input[type="date"],
  .table_form td input[type="email"],
  .table_form td input[type="tel"],
  .table_form td input[type="number"],
  .table_form td input[type="password"],
  .table_form td select,
  .table_form td textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 40px;
    padding: 8px 10px !important;
    font-size: 14px !important;
  }

  /* ----------------------------------------------------------
     4. Search Area
     ---------------------------------------------------------- */
  .table_form td>span[style*="float:right"],
  .table_form td>span[style*="float: right"] {
    float: none !important;
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 10px !important;
    flex-wrap: wrap !important;
  }

  /* search input full width override (inline width:200px) */
  .table_form td input#searchWord {
    width: 100% !important;
  }

  /* ----------------------------------------------------------
     4a. Search Form Field Layout
     ---------------------------------------------------------- */

  /* 날짜 행: 가로 flex (시작일 ~ 종료일) */
  .table_form td:has(input.date-pick) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .table_form td:has(input.date-pick) input.date-pick {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 80px !important;
  }

  /* 캐스케이딩 select: margin-left 리셋, 세로 간격 */
  .table_form td select {
    margin-left: 0 !important;
    margin-bottom: 8px !important;
  }
  .table_form td select:last-of-type {
    margin-bottom: 0 !important;
  }

  /* 금액 영역 span: block + flex wrap */
  .table_form td > span[style*="margin-left"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .table_form td > span[style*="margin-left"] input,
  .table_form td > span[style*="margin-left"] select {
    flex: 1 1 auto !important;
    min-width: 80px !important;
    margin-left: 0 !important;
  }

  /* 버튼 행: margin-left 리셋, flex 균등 배분 */
  .table_form td > span[style*="float:right"] .c_btn,
  .table_form td > span[style*="float: right"] .c_btn {
    margin-left: 0 !important;
    flex: 1 1 auto !important;
    text-align: center !important;
  }

  /* ----------------------------------------------------------
     5. table_list Horizontal Scroll
     ---------------------------------------------------------- */
  .table_list {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  /* Preserve table structure inside block wrapper for full-width rendering */
  .table_list>thead,
  .table_list>tbody {
    display: table !important;
    width: 100% !important;
  }

  .table_list>thead>tr,
  .table_list>tbody>tr {
    display: table-row !important;
  }

  .table_list>thead>tr>th,
  .table_list>tbody>tr>td {
    display: table-cell !important;
  }

  .table_list th,
  .table_list td {
    white-space: nowrap;
    padding: 10px 8px !important;
  }

  .table_list th {
    background: #f8f9fa !important;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6 !important;
  }

  /* Row hover effect */
  .table_list tbody tr:hover {
    background-color: #f0f7ff !important;
  }

  /* ----------------------------------------------------------
     6. Buttons / Touch Targets
     ---------------------------------------------------------- */
  .c_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  .c_btn.sm {
    min-height: 38px !important;
    line-height: 1.2 !important;
    padding: 5px 14px !important;
    font-size: 13px !important;
  }

  /* ----------------------------------------------------------
     7. Approval Tabs
     ---------------------------------------------------------- */
  .approval-tabs,
  div[style*="border-bottom:2px solid #ddd"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    padding-bottom: 8px !important;
  }

  .approval-tabs>.c_btn,
  div[style*="border-bottom:2px solid #ddd"]>.c_btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* "새 기안" button - remove float, push right */
  div[style*="border-bottom:2px solid #ddd"]>a[style*="float:right"] {
    float: none !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* ----------------------------------------------------------
     8. Pagination
     ---------------------------------------------------------- */
  #pagenavi {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 10px 0 !important;
  }

  #pagenavi a,
  #pagenavi strong {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    text-decoration: none;
  }

  #pagenavi a:hover {
    background: #e9ecef !important;
  }

  #pagenavi strong {
    background: #008aff !important;
    color: #fff !important;
    border-radius: 6px !important;
  }

  /* Approval-style pagination (link-based) */
  div[style*="text-align:center"][style*="margin-top"] {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  div[style*="text-align:center"][style*="margin-top"] .c_btn.sm {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 4px 8px !important;
  }

  /* ----------------------------------------------------------
     9. Form Inputs - Radio / Checkbox touch targets
     ---------------------------------------------------------- */
  input[type="radio"],
  input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
  }

  /* ----------------------------------------------------------
     10. Status Badges (pill style)
     ---------------------------------------------------------- */
  .table_list td span[style*="border-radius:3px"],
  .table_list td span[style*="border-radius: 3px"] {
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* ----------------------------------------------------------
     11. View Page: table_form detail display
     ---------------------------------------------------------- */
  .table_form td .editorArea,
  .table_form td iframe {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* View page bottom buttons */
  .table_form+div[style*="text-align:center"],
  .table_form+div[style*="text-align: center"],
  div[style*="text-align:center"] {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ----------------------------------------------------------
     12. MyPage adjustments
     ---------------------------------------------------------- */
  .table_form td table {
    width: 100% !important;
  }

  .table_form td table td {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }

  /* ----------------------------------------------------------
     13. Hide empty page-submenu trigger (˅ icon)
     The #page-submenu-trigger opens an empty <nav><ul></ul></nav>.
     Hide it until submenu items are actually populated.
     ---------------------------------------------------------- */
  #page-submenu-trigger {
    display: none !important;
  }

  /* ----------------------------------------------------------
     14-a. Hamburger trigger: join flex layout (override style.css position:absolute)
     ---------------------------------------------------------- */
  #primary-menu-trigger {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 8px !important;
    flex: 0 0 auto !important;
    order: -1 !important;
    margin-right: 8px !important;
  }

  /* ----------------------------------------------------------
     14. Mobile Menu: full-width slide-down overlay
     Fix: hamburger menu items stacking vertically on right side
     Note: #primary-menu ID needed to beat style.css/functions.js specificity
     ---------------------------------------------------------- */
  #primary-menu.mb-menu.view-mb {
    display: block !important;
    position: static !important;
    /* let UL escape to .container */
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
  }

  #primary-menu.mb-menu.view-mb>ul {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 999 !important;
    border-top: 2px solid #4686ce !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 70vh;
    overflow-y: auto;
  }

  #primary-menu.mb-menu.view-mb>ul.d-block {
    display: block !important;
  }

  #primary-menu.mb-menu.view-mb>ul>li {
    border-bottom: 1px solid #f0f0f0 !important;
  }

  #primary-menu.mb-menu.view-mb>ul>li>a {
    display: block !important;
    padding: 14px 16px !important;
    color: #2c3e50 !important;
    font-size: 15px !important;
    min-height: 48px !important;
    line-height: 20px !important;
    background: #f0f4f8 !important;
    border-left: 3px solid #4686ce !important;
    font-weight: 600 !important;
  }

  #primary-menu.mb-menu.view-mb>ul>li>a:active {
    background: #e0e8f0 !important;
  }

  /* Menu divider & user items */
  #primary-menu.mb-menu.view-mb>ul>li.mb-menu-divider {
    height: 0 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #primary-menu.mb-menu.view-mb>ul>li.mb-menu-user>a {
    color: #555 !important;
    font-size: 14px !important;
    background: #f9f9f9 !important;
  }

  /* ----------------------------------------------------------
     14-b. Mobile menu: accordion sub-menu styles
     ---------------------------------------------------------- */
  /* 1단계 부모 메뉴 (하위 메뉴 있음) - flex 레이아웃 추가 */
  #primary-menu.mb-menu.view-mb .mb-has-submenu > a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  #primary-menu.mb-menu.view-mb .mb-has-submenu.mb-expanded > a {
    color: #4686ce !important;
  }

  /* Override style.css "#primary-menu ul li>a span { display:none }" */
  #primary-menu.mb-menu.view-mb .mb-has-submenu > a > span {
    display: inline !important;
    flex: 1 !important;
  }

  /* 토글 아이콘 회전 */
  .mb-toggle-icon {
    transition: transform 0.2s ease;
    font-size: 12px;
    color: #999;
  }
  .mb-has-submenu.mb-expanded .mb-toggle-icon {
    transform: rotate(180deg);
  }

  /* 서브메뉴: 기본 숨김 */
  .mb-submenu {
    display: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f8f9fa !important;
  }

  /* 서브메뉴: 펼침 */
  .mb-has-submenu.mb-expanded > .mb-submenu {
    display: block !important;
  }

  /* 서브메뉴 아이템 */
  #primary-menu.mb-menu.view-mb .mb-submenu > li {
    border-top: 1px solid #eee !important;
  }
  #primary-menu.mb-menu.view-mb .mb-submenu > li > a {
    display: block !important;
    padding: 12px 16px 12px 32px !important;
    color: #555 !important;
    font-size: 14px !important;
    min-height: 44px !important;
    line-height: 20px !important;
  }
  #primary-menu.mb-menu.view-mb .mb-submenu > li > a:active {
    background: #e8f0fe !important;
  }

  /* ----------------------------------------------------------
     15. Page Menu: vertical centering for title bar
     ---------------------------------------------------------- */
  #page-menu,
  #page-menu-wrap {
    height: 46px !important;
    line-height: 46px !important;
    margin-top: 0 !important;
  }

  /* ----------------------------------------------------------
     16. Greeting text: prevent left clipping
     Fix: Bootstrap .row negative margin vs .container padding
     ---------------------------------------------------------- */
  .section .container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ----------------------------------------------------------
     17. Mobile user info: hidden in header, shown in hamburger menu
     ---------------------------------------------------------- */
  #header .container>.view-mb {
    display: none !important;
  }

  /* ----------------------------------------------------------
     18. Footer text visibility
     Fix: 25% opacity text nearly invisible on dark background
     ---------------------------------------------------------- */
  #footer.dark #copyrights,
  #footer.dark #copyrights .col_third {
    color: rgba(255, 255, 255, 0.75) !important;
  }

  #footer.dark #copyrights a {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* Reduce excessive footer padding */
  #copyrights {
    padding: 0 !important;
    /* Remove outer 30px padding */
    margin-bottom: 0 !important;
    /* Remove negative margin hack */
  }

  #footer #copyrights .container {
    padding: 12px 12px !important;
    /* Keep only inner padding */
    min-height: 0 !important;
  }

  #footer #copyrights .col_third {
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
  }

  /* ----------------------------------------------------------
     19. Header: compact single-row layout on mobile
     [hamburger] [logo] ............ [user info]
     ---------------------------------------------------------- */
  #header-wrap {
    padding: 6px 0 !important;
  }

  #header-wrap .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    flex-wrap: nowrap !important;
    min-height: 44px !important;
  }

  /* Override responsive.css: #logo { height:100px; margin:0 auto !important; max-width:none } */
  #logo {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    max-width: 170px !important;
    text-align: left !important;
    flex: 0 1 auto !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Force standard logo visible, hide retina (framework hides standard on hi-DPI) */
  #logo a.standard-logo {
    display: inline-block !important;
  }

  #logo a.retina-logo {
    display: none !important;
  }

  #logo img {
    max-height: 50px !important;
    width: auto !important;
  }

  h4.after-line.left.view-mb {
    padding-left: 4px !important;
    margin-top: 12px !important;
  }

  /* ----------------------------------------------------------
     20. Vote: Checkbox list touch optimization
     ---------------------------------------------------------- */
  #viewer-list {
    max-height: 250px !important;
  }

  #viewer-list .viewer-item {
    min-height: 44px !important;
    padding: 10px 8px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #f0f0f0;
  }

  #viewer-list .viewer-item:active {
    background: #f0f7ff !important;
  }

  #viewer-search {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  /* ----------------------------------------------------------
     21. Vote Result: Card + chart responsive
     ---------------------------------------------------------- */
  .vote-result-header {
    padding: 14px !important;
  }

  .vote-result-header h3 {
    font-size: 16px !important;
  }

  .vote-result-header .vote-meta {
    font-size: 12px !important;
  }

  /* Vote result table: hide chart column, fit to screen */
  .vote-result-table {
    table-layout: auto !important;
    width: 100% !important;
  }
  .vote-result-table col:nth-child(5),
  .vote-result-table thead th:nth-child(5),
  .vote-result-table tbody td:nth-child(5) {
    display: none !important;
  }
  .vote-result-table th,
  .vote-result-table td {
    padding: 8px 6px !important;
    font-size: 13px !important;
  }

  /* Vote records table: fit to screen, hide ID column */
  .vote-records-section .table_list {
    table-layout: auto !important;
    width: 100% !important;
  }
  .vote-records-section .table_list col:nth-child(2),
  .vote-records-section .table_list thead th:nth-child(2),
  .vote-records-section .table_list tbody td:nth-child(2) {
    display: none !important;
  }
  .vote-records-section .table_list th,
  .vote-records-section .table_list td {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  /* Vote view: voted banner */
  #vote-already {
    padding: 16px !important;
  }

  /* Vote info table: clean borders on mobile */
  .vote-info-table {
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  .vote-info-table tr {
    border: none !important;
    border-bottom: 1px solid #eee !important;
    padding: 0 !important;
  }
  .vote-info-table tr:last-child {
    border-bottom: none !important;
  }
  .vote-info-table th {
    background: #f8f9fa !important;
    border: none !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #666 !important;
  }
  .vote-info-table td {
    border: none !important;
    padding: 10px 12px !important;
  }

  .vote-option {
    min-height: 48px !important;
    padding: 14px 12px !important;
  }

  /* ----------------------------------------------------------
     22. table_form View: spacing refinement (all mobile)
     ---------------------------------------------------------- */
  .table_form tr:last-child td {
    border-bottom: none !important;
  }

  /* Content area: prevent overflow stretching */
  .table_form td .editorArea {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  /* ----------------------------------------------------------
     23. NOTICE CARD LAYOUT (.tl-notice) — Hybrid+Mobile
     Override .table_list horizontal scroll for notice only
     Columns: 번호 | 제목 | 중요 | 상태 | 등록일 | 조회수
     ---------------------------------------------------------- */
  .tl-notice {
    display: block !important;
    white-space: normal !important;
    overflow-x: visible !important;
    border: none !important;
    box-shadow: none !important;
  }

  .tl-notice colgroup {
    display: none !important;
  }

  .tl-notice thead {
    display: none !important;
  }

  .tl-notice tbody {
    display: block !important;
  }

  .tl-notice tbody tr {
    display: block !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
    white-space: normal !important;
    cursor: pointer;
  }

  .tl-notice tbody tr:active {
    background: #f0f7ff !important;
  }

  .tl-notice tbody td {
    display: block !important;
    text-align: left !important;
    padding: 2px 0 !important;
    border: none !important;
    white-space: normal !important;
    background: transparent !important;
  }

  /* 번호 (1st) - hide */
  .tl-notice tbody td:nth-child(1) {
    display: none !important;
  }

  /* 제목 (2nd) - prominent */
  .tl-notice tbody td:nth-child(2) {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #333 !important;
    padding-bottom: 8px !important;
    line-height: 1.4 !important;
  }

  /* 중요 (3rd) - hide (already shown as [중요] in title) */
  .tl-notice tbody td:nth-child(3) {
    display: none !important;
  }

  /* 상태 (4th) - inline with label */
  .tl-notice tbody td:nth-child(4) {
    display: inline-block !important;
    font-size: 13px !important;
    margin-right: 14px !important;
    color: #666 !important;
  }

  .tl-notice tbody td:nth-child(4)::before {
    content: "상태 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  /* 등록일 (5th) - inline with label */
  .tl-notice tbody td:nth-child(5) {
    display: inline-block !important;
    font-size: 13px !important;
    margin-right: 14px !important;
    color: #666 !important;
  }

  .tl-notice tbody td:nth-child(5)::before {
    content: "등록일 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  /* 조회수 (6th) - inline with label */
  .tl-notice tbody td:nth-child(6) {
    display: inline-block !important;
    font-size: 13px !important;
    color: #666 !important;
  }

  .tl-notice tbody td:nth-child(6)::before {
    content: "조회 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  /* Empty state message */
  .tl-notice tbody tr td[colspan] {
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
    font-size: 14px !important;
    color: #888 !important;
  }


  /* ----------------------------------------------------------
     24. VOTE CARD LAYOUT (.tl-vote) — Hybrid+Mobile
     Override .table_list horizontal scroll for vote only
     Columns: 번호 | 제목 | 상태 | 시작일 | 종료일 | 참여 | 관리
     ---------------------------------------------------------- */
  .tl-vote {
    display: block !important;
    white-space: normal !important;
    overflow-x: visible !important;
    border: none !important;
    box-shadow: none !important;
  }

  .tl-vote colgroup {
    display: none !important;
  }

  .tl-vote thead {
    display: none !important;
  }

  .tl-vote tbody {
    display: block !important;
  }

  .tl-vote tbody tr {
    display: block !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
    white-space: normal !important;
    cursor: pointer;
  }

  .tl-vote tbody tr:active {
    background: #f0f7ff !important;
  }

  .tl-vote tbody td {
    display: block !important;
    text-align: left !important;
    padding: 2px 0 !important;
    border: none !important;
    white-space: normal !important;
    background: transparent !important;
  }

  /* 번호 (1st) - hide */
  .tl-vote tbody td:nth-child(1) {
    display: none !important;
  }

  /* 제목 (2nd) - prominent */
  .tl-vote tbody td:nth-child(2) {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #333 !important;
    padding-bottom: 8px !important;
    line-height: 1.4 !important;
  }

  /* 상태 (3rd) - inline with label */
  .tl-vote tbody td:nth-child(3) {
    display: inline-block !important;
    font-size: 13px !important;
    margin-right: 14px !important;
  }

  .tl-vote tbody td:nth-child(3)::before {
    content: "상태 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  /* 시작일 (4th) - inline */
  .tl-vote tbody td:nth-child(4) {
    display: inline-block !important;
    font-size: 13px !important;
    margin-right: 14px !important;
    color: #666 !important;
  }

  .tl-vote tbody td:nth-child(4)::before {
    content: "시작 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  /* 종료일 (5th) - inline */
  .tl-vote tbody td:nth-child(5) {
    display: inline-block !important;
    font-size: 13px !important;
    color: #666 !important;
  }

  .tl-vote tbody td:nth-child(5)::before {
    content: "종료 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  /* 참여 (6th) - new line */
  .tl-vote tbody td:nth-child(6) {
    display: inline-block !important;
    font-size: 13px !important;
    margin-right: 14px !important;
    margin-top: 4px !important;
    color: #666 !important;
  }

  .tl-vote tbody td:nth-child(6)::before {
    content: "참여 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  /* 관리 (7th) - action area */
  .tl-vote tbody td:nth-child(7) {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f0f0f0 !important;
  }

  /* Empty state */
  .tl-vote tbody tr td[colspan] {
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
    font-size: 14px !important;
    color: #888 !important;
  }


  /* ----------------------------------------------------------
     25. APPROVAL CARD LAYOUT (.tl-approval) — Hybrid+Mobile
     Same card pattern as .tl-notice / .tl-vote
     Uses data-label for inline labels (tab-independent)
     ---------------------------------------------------------- */
  .tl-approval {
    display: block !important;
    white-space: normal !important;
    overflow-x: visible !important;
    border: none !important;
    box-shadow: none !important;
  }

  .tl-approval thead {
    display: none !important;
  }

  .tl-approval tbody {
    display: block !important;
  }

  .tl-approval tbody tr {
    display: block !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    cursor: pointer;
  }

  .tl-approval tbody tr:active {
    background: #f0f7ff !important;
  }

  .tl-approval tbody td {
    display: inline !important;
    text-align: left !important;
    padding: 0 !important;
    border: none !important;
    font-size: 13px !important;
    color: #666 !important;
  }

  /* data-label 기반 라벨 표시 */
  .tl-approval tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label) " ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  /* 번호 (data-label="" 첫번째) - 숨김 */
  .tl-approval tbody td:first-child {
    display: none !important;
  }

  /* 제목 (data-label="" 두번째) - 한 줄 전체 사용 */
  .tl-approval tbody td:nth-child(2) {
    display: block !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #333 !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    width: 100% !important;
  }

  /* 메타 필드 컨테이너: flex wrap 2열 그리드 */
  .tl-approval tbody td:nth-child(n+3) {
    display: inline-block !important;
    width: calc(50% - 6px) !important;
    margin-right: 0 !important;
    padding: 3px 0 !important;
    font-size: 12px !important;
    vertical-align: top;
  }

  /* Empty state */
  .tl-approval tbody tr td[colspan] {
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
    color: #888 !important;
  }

  /* Approval tabs: allow wrap */
  div[style*="border-bottom:2px solid #ddd"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }


  /* ----------------------------------------------------------
     26. APPROVAL WRITE: Sortable & Template responsive
     ---------------------------------------------------------- */
  .dynamic-item.sortable-row {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .dynamic-item .approver-select {
    width: 100% !important;
    min-width: 0 !important;
    order: 2;
  }
  .dynamic-item .drag-handle {
    order: 0;
  }
  .dynamic-item .dynamic-item-num {
    order: 1;
    flex-grow: 1;
  }
  .dynamic-item .approver-name-display {
    order: 3;
    display: none !important;
  }
  .dynamic-item .dynamic-item-remove {
    order: 4;
  }

  /* 결재선 템플릿 select + 버튼: 세로 스택 */
  #tpl-select {
    width: 100% !important;
    margin-bottom: 5px !important;
  }


  /* ----------------------------------------------------------
     27. APPROVAL VIEW: Action panels responsive
     ---------------------------------------------------------- */
  #approve-panel {
    padding: 10px !important;
  }
  #approve-panel .c_btn {
    display: block !important;
    width: 100% !important;
    margin: 5px 0 !important;
    text-align: center !important;
  }

  .approval-actions .c_btn {
    display: block !important;
    width: 100% !important;
    margin: 5px 0 !important;
  }
}


/* ==========================================================
   PHONE ONLY (≤576px) - Card Layouts
   ========================================================== */
@media (max-width: 576px) {

  /* ----------------------------------------------------------
     TH/TD 세로 스택 (라벨 위, 값 아래) — 폰 전용
     ---------------------------------------------------------- */
  .table_form th {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #555 !important;
    background: #f8f9fa !important;
    border-bottom: none !important;
    border-right: none !important;
  }

  .table_form td {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 8px 12px 12px !important;
    border-bottom: none !important;
  }

  /* Tighter container padding */
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Greeting shorter */
  h4.after-line {
    font-size: 14px !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }

  /* 검색폼 버튼 영역: 576px 이하에서 세로 스택 */
  .table_form td > span[style*="float:right"],
  .table_form td > span[style*="float: right"] {
    flex-direction: column !important;
  }
  .table_form td > span[style*="float:right"] .c_btn,
  .table_form td > span[style*="float: right"] .c_btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* NOTE: .tl-notice, .tl-vote, .tl-approval card layouts in ≤991px block */

  /* ≤576px: Approval tabs vertical layout */
  div[style*="border-bottom:2px solid #ddd"] {
    display: flex !important;
    flex-direction: column !important;
  }
  div[style*="border-bottom:2px solid #ddd"]>.c_btn {
    width: 100% !important;
    text-align: center !important;
    margin-right: 0 !important;
    margin-bottom: 4px !important;
  }


  /* ----------------------------------------------------------
     Vote View: Option cards (touch-friendly)
     ---------------------------------------------------------- */
  .table_form td label {
    display: block !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    min-height: 48px !important;
    line-height: 24px !important;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 138, 255, 0.1);
  }

  .table_form td label:active {
    background: #f0f7ff !important;
    border-color: #008aff !important;
  }

  /* ----------------------------------------------------------
     Buttons: full-width on phone
     ---------------------------------------------------------- */
  .table_form td>span .c_btn,
  .table_form td span[style*="float"] .c_btn {
    flex: 1 !important;
    text-align: center !important;
    min-width: 80px !important;
  }

  /* 금액 영역: 세로 스택 (폰) */
  .table_form td > span[style*="margin-left"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .table_form td > span[style*="margin-left"] input,
  .table_form td > span[style*="margin-left"] select {
    width: 100% !important;
  }

  /* Bottom action buttons */
  div[style*="text-align:center"] .c_btn {
    min-height: 44px !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
  }


  /* ----------------------------------------------------------
     ACCOUNT CARD LAYOUT (.tl-account)
     Columns: 번호(1)|전표일자(2)|대분류(3)|중분류(4)|소분류(5)|금액(6)|적요(7)|거래처(8)
     Reorder: 적요 first, 금액 second, then date/categories/counterpart
     ---------------------------------------------------------- */
  .tl-account {
    display: block !important;
    white-space: normal !important;
    overflow-x: visible !important;
    border: none !important;
    box-shadow: none !important;
  }

  .tl-account colgroup {
    display: none !important;
  }

  .tl-account thead {
    display: none !important;
  }

  .tl-account tbody {
    display: block !important;
  }

  .tl-account tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
    white-space: normal !important;
    cursor: pointer;
  }

  .tl-account tbody tr:active {
    background: #f0f7ff !important;
  }

  .tl-account tbody td {
    text-align: left !important;
    padding: 2px 0 !important;
    border: none !important;
    white-space: normal !important;
    background: transparent !important;
    word-break: break-word !important;
  }

  /* 번호(1) - hide */
  .tl-account tbody td:nth-child(1) {
    display: none !important;
  }

  /* 적요(7) - primary, reorder to top */
  .tl-account tbody td:nth-child(7) {
    order: -2 !important;
    width: 100% !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #333 !important;
    padding-bottom: 6px !important;
    line-height: 1.4 !important;
  }

  /* 금액(6) - accent color, second row */
  .tl-account tbody td:nth-child(6) {
    order: -1 !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2363ab !important;
    padding-bottom: 4px !important;
  }

  /* 전표일자(2) */
  .tl-account tbody td:nth-child(2) {
    font-size: 13px !important;
    margin-right: 6px !important;
    color: #666 !important;
  }

  /* 대분류(3) */
  .tl-account tbody td:nth-child(3) {
    font-size: 13px !important;
    color: #666 !important;
  }

  .tl-account tbody td:nth-child(3)::after {
    content: " \203A";
    color: #ccc;
    margin: 0 2px;
  }

  /* 중분류(4) */
  .tl-account tbody td:nth-child(4) {
    font-size: 13px !important;
    color: #666 !important;
  }

  .tl-account tbody td:nth-child(4)::after {
    content: " \203A";
    color: #ccc;
    margin: 0 2px;
  }

  /* 소분류(5) */
  .tl-account tbody td:nth-child(5) {
    font-size: 13px !important;
    color: #666 !important;
    margin-right: 14px !important;
  }

  /* 거래처(8) */
  .tl-account tbody td:nth-child(8) {
    font-size: 13px !important;
    color: #666 !important;
  }

  .tl-account tbody td:nth-child(8)::before {
    content: "거래처 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  /* Empty state */
  .tl-account tbody tr td[colspan] {
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
    font-size: 14px !important;
    color: #888 !important;
    width: 100% !important;
  }


  /* ----------------------------------------------------------
     SHIP CARD LAYOUT (.tl-ship)
     Columns: No(1)|선박명(2)|선종(3)|톤수(4)|상태(5)|관리항목수(6)
     ---------------------------------------------------------- */
  .tl-ship {
    display: block !important;
    white-space: normal !important;
    overflow-x: visible !important;
    border: none !important;
    box-shadow: none !important;
  }

  .tl-ship colgroup {
    display: none !important;
  }

  .tl-ship thead {
    display: none !important;
  }

  .tl-ship tbody {
    display: block !important;
  }

  .tl-ship tbody tr {
    display: block !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
    white-space: normal !important;
    cursor: pointer;
  }

  .tl-ship tbody tr:active {
    background: #f0f7ff !important;
  }

  .tl-ship tbody td {
    display: block !important;
    text-align: left !important;
    padding: 2px 0 !important;
    border: none !important;
    white-space: normal !important;
    background: transparent !important;
  }

  /* No(1) - hide */
  .tl-ship tbody td:nth-child(1) {
    display: none !important;
  }

  /* 선박명(2) - primary */
  .tl-ship tbody td:nth-child(2) {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #333 !important;
    padding-bottom: 6px !important;
    line-height: 1.4 !important;
  }

  /* 선종(3) - inline */
  .tl-ship tbody td:nth-child(3) {
    display: inline-block !important;
    font-size: 13px !important;
    color: #666 !important;
  }

  .tl-ship tbody td:nth-child(3)::after {
    content: " \00B7";
    color: #ccc;
    margin: 0 4px;
  }

  /* 톤수(4) - inline */
  .tl-ship tbody td:nth-child(4) {
    display: inline-block !important;
    font-size: 13px !important;
    margin-right: 14px !important;
    color: #666 !important;
  }

  .tl-ship tbody td:nth-child(4)::after {
    content: "톤";
    font-size: 12px;
  }

  /* 상태(5) - inline badge */
  .tl-ship tbody td:nth-child(5) {
    display: inline-block !important;
    font-size: 13px !important;
    margin-right: 14px !important;
  }

  /* 관리항목수(6) - inline with label */
  .tl-ship tbody td:nth-child(6) {
    display: inline-block !important;
    font-size: 13px !important;
    color: #666 !important;
  }

  .tl-ship tbody td:nth-child(6)::before {
    content: "관리 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  .tl-ship tbody td:nth-child(6)::after {
    content: "건";
    color: #aaa;
    font-size: 12px;
  }

  /* Empty state */
  .tl-ship tbody tr td[colspan] {
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
    font-size: 14px !important;
    color: #888 !important;
  }


  /* ----------------------------------------------------------
     CONFIG CARD LAYOUT (.tl-config)
     Columns: 번호(1)|카테고리(2)|설정키(3)|라벨(4)|설정값(5)|사용(6)|타입(7)|수정일(8)
     Reorder: 라벨 first, then category+key, then value/enabled/date
     ---------------------------------------------------------- */
  .tl-config {
    display: block !important;
    white-space: normal !important;
    overflow-x: visible !important;
    border: none !important;
    box-shadow: none !important;
  }

  .tl-config colgroup {
    display: none !important;
  }

  .tl-config thead {
    display: none !important;
  }

  .tl-config tbody {
    display: block !important;
  }

  .tl-config tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
    white-space: normal !important;
    cursor: pointer;
  }

  .tl-config tbody tr:active {
    background: #f0f7ff !important;
  }

  .tl-config tbody td {
    text-align: left !important;
    padding: 2px 0 !important;
    border: none !important;
    white-space: normal !important;
    background: transparent !important;
    word-break: break-word !important;
  }

  /* 번호(1) - hide */
  .tl-config tbody td:nth-child(1) {
    display: none !important;
  }

  /* 타입(7) - hide */
  .tl-config tbody td:nth-child(7) {
    display: none !important;
  }

  /* 라벨(4) - primary, reorder to top */
  .tl-config tbody td:nth-child(4) {
    order: -2 !important;
    width: 100% !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #333 !important;
    padding-bottom: 4px !important;
    line-height: 1.4 !important;
  }

  /* 카테고리(2) - badge style */
  .tl-config tbody td:nth-child(2) {
    order: -1 !important;
    font-size: 12px !important;
    color: #fff !important;
    margin-right: 8px !important;
  }

  .tl-config tbody td:nth-child(2)>span {
    background: #3498db !important;
    color: #fff !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  /* 설정키(3) - monospace */
  .tl-config tbody td:nth-child(3) {
    order: -1 !important;
    font-size: 12px !important;
    color: #888 !important;
  }

  .tl-config tbody td:nth-child(3) .config-key {
    font-size: 12px !important;
    color: #888 !important;
  }

  /* 설정값(5) - override .config-value nowrap */
  .tl-config tbody td:nth-child(5) {
    font-size: 13px !important;
    color: #2363ab !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .tl-config tbody td:nth-child(5)::before {
    content: "값 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  .tl-config tbody td:nth-child(5).config-value {
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* 사용(6) - inline */
  .tl-config tbody td:nth-child(6) {
    font-size: 13px !important;
    margin-right: 14px !important;
  }

  /* 수정일(8) */
  .tl-config tbody td:nth-child(8) {
    font-size: 13px !important;
    color: #666 !important;
  }

  .tl-config tbody td:nth-child(8)::before {
    content: "수정 ";
    color: #aaa;
    font-weight: 400;
    font-size: 12px;
  }

  /* Empty state */
  .tl-config tbody tr td[colspan] {
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
    font-size: 14px !important;
    color: #888 !important;
    width: 100% !important;
  }


  /* ----------------------------------------------------------
     KAKAO USER CARD LAYOUT (.tl-kakao-user)
     Columns: No(1)|카카오ID(2)|닉네임(3)|이름연락처(4)|Pilot(5)|상태(6)|로그인등록일(7)|관리(8)
     ---------------------------------------------------------- */
  .tl-kakao-user {
    display: block !important;
    white-space: normal !important;
    overflow-x: visible !important;
    border: none !important;
    box-shadow: none !important;
  }

  .tl-kakao-user colgroup {
    display: none !important;
  }

  .tl-kakao-user thead {
    display: none !important;
  }

  .tl-kakao-user tbody {
    display: block !important;
  }

  .tl-kakao-user tbody tr {
    display: block !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
    white-space: normal !important;
    cursor: pointer;
  }

  .tl-kakao-user tbody tr:active {
    background: #f0f7ff !important;
  }

  .tl-kakao-user tbody td {
    display: block !important;
    text-align: left !important;
    padding: 2px 0 !important;
    border: none !important;
    white-space: normal !important;
    background: transparent !important;
  }

  /* No(1) - hide */
  .tl-kakao-user tbody td:nth-child(1) {
    display: none !important;
  }

  /* 카카오ID(2) - hide on card (detail info) */
  .tl-kakao-user tbody td:nth-child(2) {
    display: none !important;
  }

  /* 닉네임(3) - primary */
  .tl-kakao-user tbody td:nth-child(3) {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #333 !important;
    padding-bottom: 2px !important;
  }

  /* 이름/연락처(4) - sub info */
  .tl-kakao-user tbody td:nth-child(4) {
    font-size: 13px !important;
    color: #555 !important;
    padding-bottom: 6px !important;
  }

  /* Pilot(5) - inline */
  .tl-kakao-user tbody td:nth-child(5) {
    display: inline-block !important;
    font-size: 13px !important;
    margin-right: 14px !important;
  }

  /* 상태(6) - inline badge */
  .tl-kakao-user tbody td:nth-child(6) {
    display: inline-block !important;
    font-size: 13px !important;
    margin-right: 14px !important;
  }

  /* 로그인/등록일(7) - inline */
  .tl-kakao-user tbody td:nth-child(7) {
    display: inline-block !important;
    font-size: 12px !important;
    color: #888 !important;
  }

  /* 관리(8) - action area */
  .tl-kakao-user tbody td:nth-child(8) {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f0f0f0 !important;
  }

  /* Empty state */
  .tl-kakao-user tbody tr td[colspan] {
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
    font-size: 14px !important;
    color: #888 !important;
  }

  /* ----------------------------------------------------------
     VOTE RESULT: Phone-specific adjustments
     ---------------------------------------------------------- */
  .vote-result-header .vote-meta {
    font-size: 11px !important;
  }

  #viewer-list {
    max-height: 180px !important;
  }
}


/* ==========================================================
   ALL SCREENS - Global overrides
   ========================================================== */

/* Scroll-to-top button: high contrast on any background */
#gotoTop {
  background-color: rgba(0, 0, 0, 0.7) !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
}

#gotoTop:hover {
  background-color: #2363ab !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
}