/* jz182.com mobile adaptation v2 - true responsive reflow (pure ASCII)
 * Loaded by every page via <link>. Only affects viewports <= 768px.
 * Goal: turn the old fixed-width PC layout into a single-column mobile layout. */
@media (max-width: 768px) {
  /* 1. Main fixed-width containers -> full width */
  .w1000, .w1000px, [class*="w1000"],
  .wrap, .container, .main, #wrap, #main, .layout {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. Cancel floats on content columns -> stack vertically (single column) */
  .left, .right, .fl, .fr,
  [style*="float:left"], [style*="float: left"],
  [style*="float:right"], [style*="float: right"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3. Inline fixed widths must not overflow */
  [style*="width"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4. Media & embeds scale down */
  img, video, iframe, object, embed {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 5. Tables: keep readable, allow horizontal scroll instead of breaking */
  table {
    max-width: 100% !important;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  tbody, tr { display: table-row-group; }
  td, th {
    box-sizing: border-box;
    padding: 4px !important;
  }

  /* 6. Top nav: horizontal scroll instead of wrapping into a tall block */
  ul.nav, .nav, .indexnav, .topnav {
    display: -webkit-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  ul.nav .navli, .navli, .nav li, ul.nav li {
    float: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }
  /* dropdowns: hide on mobile (tap targets would overlap) */
  ul.nav .sonul, .sonul { position: static !important; display: none !important; }

  /* 7. Top phone/search area: stack & center */
  .indextel, .topsoon, .topnav, .inhead, .indexnav {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* 8. Readability & spacing */
  html, body {
    width: 100% !important;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  body {
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding: 0 !important;
  }
  a { word-break: break-word; }
  p, div, span, li { word-break: break-word; }
  h1, h2, h3, h4 { line-height: 1.3 !important; }
  input, select, textarea, button {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}