/* V7 frontend-only hotfix: responsive layout without changing data or APIs. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after { box-sizing: border-box; }
img, svg, canvas, video { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }

/* The legacy detail navigation was authored for content-box sizing.  Keep its
   title horizontal after the global responsive border-box reset. */
.prd_nav > span {
  box-sizing: content-box;
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .box_top, .box_bot, .top_if, .frmtop, .box_logo,
  .box_all, .box_all2, .platform-site-header,
  .platform-site-header__inner, main {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .box_logo, .platform-site-header__inner {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .box_all, .box_all2 {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .box_all > *, .box_all2 > *, .box_sch, .box_cont3,
  .box_ll, .box_contshm, .box_nav, .box_prd1 {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .box_schin2, .search_sq, .sq_row, .sq_row_controls,
  .date-filter-line, .result-title-row {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .box_listid, .overflow-x-auto, .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table.list_id2, table.list_bfpnav, table.list_monrank {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Homepage TOP10: use cards for non-maximized windows and tablets too. */
  #ranking .overflow-x-auto { overflow: visible !important; }
  #ranking .home-monthly-table,
  #ranking .home-monthly-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #ranking .home-monthly-table thead { display: none !important; }
  #ranking .home-monthly-table tbody tr {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem 1rem !important;
    margin: 0 0 1rem !important;
    padding: 1rem !important;
    border: 1px solid #dce7ef !important;
    border-radius: .65rem !important;
    background: #fff !important;
    text-align: left !important;
  }
  #ranking .home-monthly-table tbody td {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: .9rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
  }
  #ranking .home-monthly-table tbody td::before {
    content: attr(data-label) !important;
    display: block !important;
    margin-bottom: .15rem !important;
    color: #73879a !important;
    font-size: .75rem !important;
    font-weight: 400 !important;
  }
  #ranking .home-monthly-table tbody td:nth-child(1)::before { display: block !important; }
  #ranking .home-monthly-table tbody td:nth-child(3),
  #ranking .home-monthly-table tbody td:nth-child(10),
  #ranking .home-monthly-table tbody td:nth-child(12) {
    grid-column: 1 / -1 !important;
    padding-left: 0 !important;
  }
  #ranking .home-monthly-table tbody td a {
    display: block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  /* Keep the original live header structure; only scale it at phone widths. */
  .box_logo {
    display: grid !important;
    grid-template-columns: minmax(0, 112px) minmax(0, 1fr) !important;
    gap: .75rem !important;
    align-items: center !important;
    padding: 1rem .75rem !important;
  }
  .logo_yhlc a {
    width: 112px !important;
    height: 30px !important;
    background-size: contain !important;
  }
  .box_logo > a {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .box_logo span {
    margin-left: 0 !important;
    font-size: .9rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
  .box_logo span em {
    margin-right: .25rem !important;
    font-size: 1.25rem !important;
  }

  .platform-site-header__inner, .site-head-inner {
    width: calc(100% - 24px) !important;
  }

  .box_all, .box_all2 {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .search_sq input[type="text"], .search_sq input[type="number"],
  .search_sq select, .date-picker-shell,
  .sq_row_buttons, .sq_row_buttons button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .help-tip:hover::after {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 18px !important;
    width: auto !important;
    max-width: none !important;
  }

  .award-shell, .winner-grid, .winner-grid.products,
  .news-featured, .detail-grid, .box_prd_info {
    grid-template-columns: 1fr !important;
  }

  .award-head, .award-head-meta, .result-title-row,
  .date-filter-line {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .prd_nav {
    align-items: stretch !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .prd_nav > span {
    box-sizing: border-box;
    width: 100% !important;
    padding: .85rem 1rem !important;
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
    text-align: left;
  }
  .list_prd_nav {
    flex: 0 0 auto;
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
  }
  ul.list_prd_nav li {
    font-size: 1rem !important;
    line-height: 3.2rem !important;
  }
  ul.list_prd_nav li a { padding: 0 1rem !important; }

  table.mobile-card-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  table.mobile-card-table thead { display: none !important; }
  table.mobile-card-table tbody { display: block !important; width: 100% !important; }
  table.mobile-card-table tbody tr {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem 1.2rem !important;
    margin: 0 0 1rem !important;
    padding: 1rem !important;
    border: 1px solid #dce7ef !important;
    border-radius: .65rem !important;
    background: #fff !important;
  }
  table.mobile-card-table tbody td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: .9rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
  table.mobile-card-table tbody td::before {
    content: attr(data-label) !important;
    display: block !important;
    margin-bottom: .2rem !important;
    color: #7890a5 !important;
    font-size: .75rem !important;
    font-weight: 400 !important;
  }
  table.mobile-card-table tbody td[data-empty-state] { grid-column: 1 / -1 !important; }
  table.mobile-card-table tbody td[data-empty-state]::before { display: none !important; }
}