/* union 계정에만 적용되는 웹하드 노트북 레이아웃 */
@media (max-width: 1600px) {
  html.union-responsive,
  body.union-responsive {
    min-width: 1180px;
    min-height: 720px;
  }

  body.union-responsive .total_headersection {
    height: 76px;
  }

  body.union-responsive .headersection_logo {
    max-height: 40px;
    margin: 18px 32px;
  }

  body.union-responsive .userinfo {
    margin-right: 24px;
  }

  body.union-responsive .box-logout {
    top: 52px;
    right: 24px;
  }

  body.union-responsive .box-logout.activated {
    top: 64px;
  }

  body.union-responsive .navbar_and_innerbox {
    min-width: 0;
    height: calc(100vh - 76px);
  }

  body.union-responsive .total_navbar_section {
    flex: 0 0 218px;
    width: 218px;
    height: calc(100vh - 86px);
    padding-left: 24px;
  }

  body.union-responsive .webhard_section,
  body.union-responsive .copyright_section,
  body.union-responsive .content_section,
  body.union-responsive .eachmenu {
    width: 194px;
  }

  body.union-responsive .innerbox {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0 24px;
    box-sizing: border-box;
  }

  body.union-responsive .title {
    margin-top: 20px;
    font-size: 15px;
  }

  body.union-responsive .total_navbar_section,
  body.union-responsive .innerbox,
  body.union-responsive .modalScreen {
    font-size: 13px;
  }

  body.union-responsive .total_navbar_section :where(span, a),
  body.union-responsive .innerbox :where(span, div, th, td, input, button, select, a, label),
  body.union-responsive .modalScreen :where(span, div, th, td, input, button, select, a, label) {
    font-size: 13px;
  }

  /* /webhard/monitoring-status */
  body.union-responsive .innerbox-wrapper {
    max-height: calc(100vh - 76px);
  }

  body.union-responsive .third-line-area {
    align-items: stretch;
  }

  body.union-responsive .top-ranking-area {
    width: auto;
    min-width: 0;
  }

  body.union-responsive .pc-mobile-status-sum {
    flex: 0 1 390px;
    width: 390px;
    min-width: 340px;
  }

  body.union-responsive .pc-status {
    min-width: 0;
    margin-right: 32px;
  }

  body.union-responsive .mobile-status {
    min-width: 0;
  }

  body.union-responsive .fifth-line-area {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  body.union-responsive .statistic-unaff {
    width: 100%;
    min-width: 1200px;
  }

  body.union-responsive .unaff-statistic-area {
    box-sizing: border-box;
  }

  /* /webhard/show-total */
  body.union-responsive .first-line-area {
    min-width: 0;
  }

  body.union-responsive .two-btns-areas,
  body.union-responsive .first-btns-section,
  body.union-responsive .second-btns-section {
    flex-wrap: wrap;
    gap: 8px 0;
  }

  body.union-responsive .two-btns-areas {
    gap: 8px 16px;
  }

  body.union-responsive .first-btns-section {
    flex: 1 1 744px;
  }

  body.union-responsive .second-btns-section {
    flex: 0 1 auto;
    margin-left: auto;
  }

  body.union-responsive .second-line-area {
    box-sizing: border-box;
    min-width: 0;
  }

  body.union-responsive .tablearea-in-box {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  body.union-responsive #totalTable {
    min-width: 1100px;
  }

  body.union-responsive .osp-drop-ul {
    max-height: min(500px, calc(100vh - 180px));
  }

  /* 모니터링 현황 우측: CP사, 카테고리, 기간 필터 */
  body.union-responsive.monitoring-status-page .second-line-area {
    flex-wrap: wrap;
    gap: 10px 20px;
  }

  body.union-responsive.monitoring-status-page .drop-calendar-area {
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  body.union-responsive.monitoring-status-page .drop-calendar-area > .drop-margin {
    display: none;
  }

  body.union-responsive.monitoring-status-page .cate-drop-frame,
  body.union-responsive.monitoring-status-page .monistatus_selecdate {
    flex: 0 0 auto;
    margin-left: 0;
    box-sizing: border-box;
  }

  body.union-responsive.monitoring-status-page .monistatus_selecdate {
    width: 224px;
    padding-right: 38px;
  }

  /* /webhard/webhard-monitoring */
  body.union-responsive.monitoring-work-page {
    --monitoring-detail-width: clamp(340px, 29vw, 380px);
  }

  body.union-responsive.monitoring-work-page .total-section-area {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
  }

  body.union-responsive.monitoring-work-page .first-section-area {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  body.union-responsive.monitoring-work-page .upper-drop-area {
    position: relative;
    z-index: 6;
    flex-wrap: nowrap;
    align-items: center;
    width: max(70vw, 1015px);
  }

  body.union-responsive.monitoring-work-page .drop-btns {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  body.union-responsive.monitoring-work-page .lower-btn-area {
    position: relative;
    z-index: 5;
    flex-wrap: nowrap;
    align-items: center;
    width: max(70vw, 1015px);
  }

  body.union-responsive.monitoring-work-page .drop-search-delete {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
  }

  body.union-responsive.monitoring-work-page .drop-search-delete .deleteBtn {
    flex: 0 0 auto;
  }

  body.union-responsive.monitoring-work-page .detection-content-area {
    min-height: 560px;
  }

  body.union-responsive.monitoring-work-page .table-area {
    overflow-x: auto;
  }

  body.union-responsive.monitoring-work-page .monitor-table {
    min-width: 960px;
  }

  body.union-responsive.monitoring-work-page .second-section-frame {
    flex: 0 1 380px;
    width: var(--monitoring-detail-width);
    min-width: 340px;
    min-height: 650px;
    margin: 100px 0 24px;
  }

  body.union-responsive.monitoring-work-page .second-section-area {
    display: block;
    width: 100%;
    min-height: 650px;
    margin-left: 0;
    padding-bottom: 20px;
  }

  body.union-responsive.monitoring-work-page .wrappedRightFirst,
  body.union-responsive.monitoring-work-page .list-area,
  body.union-responsive.monitoring-work-page .search-word-area {
    box-sizing: border-box;
    margin-right: 20px;
    margin-left: 20px;
  }

  body.union-responsive.monitoring-work-page .imgBox {
    width: 100%;
    height: auto;
    aspect-ratio: 445 / 286;
  }

  body.union-responsive.monitoring-work-page .list-title {
    flex: 0 0 88px;
    width: 88px;
  }

  body.union-responsive.monitoring-work-page .list-value {
    flex: 1;
    width: auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.union-responsive.monitoring-work-page .search-word-title,
  body.union-responsive.monitoring-work-page .search-word-add,
  body.union-responsive.monitoring-work-page .search-word-result {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr) 38px;
  }

  body.union-responsive.monitoring-work-page .search-word-title > div,
  body.union-responsive.monitoring-work-page .search-word-add > div,
  body.union-responsive.monitoring-work-page .search-word-result > div,
  body.union-responsive.monitoring-work-page .search-word-add input {
    width: auto;
    min-width: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  /* /webhard/dashboard */
  body.union-responsive.webhard-dashboard-page .line-area {
    gap: 20px;
    min-width: 0;
  }

  body.union-responsive.webhard-dashboard-page .osp-box,
  body.union-responsive.webhard-dashboard-page .detect-box,
  body.union-responsive.webhard-dashboard-page .unaff-box {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
  }

  body.union-responsive.webhard-dashboard-page .graph-box {
    width: 100%;
    min-width: 0;
  }

  body.union-responsive.webhard-dashboard-page .monitor-tabel-area {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  body.union-responsive.webhard-dashboard-page .monitor-tabel-area .contentsTable {
    min-width: 1100px;
  }

  body.union-responsive.webhard-dashboard-page .content-font {
    font-size: 26px;
  }

  body.union-responsive.webhard-dashboard-page .osp-modal-box {
    max-width: calc(100vw - 64px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }

  /* /webhard/osp-status */
  body.union-responsive.webhard-osp-status-page .first-line-area {
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
  }

  body.union-responsive.webhard-osp-status-page .first-btns-line,
  body.union-responsive.webhard-osp-status-page .second-btns-line {
    flex: 0 0 auto;
  }

  body.union-responsive.webhard-osp-status-page .second-btns-line {
    margin-left: auto;
  }

  body.union-responsive.webhard-osp-status-page .second-line-area {
    overflow-x: auto;
  }

  body.union-responsive.webhard-osp-status-page .second-line-area > table {
    min-width: 1180px;
  }

  body.union-responsive.webhard-osp-status-page .editModalBox,
  body.union-responsive.webhard-osp-status-page .regisModalBox {
    max-width: calc(100vw - 64px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }

  /* /contentManage/content-manage */
  body.union-responsive.content-manage-page .first-line {
    flex-wrap: wrap;
    gap: 10px 20px;
    height: auto;
  }

  body.union-responsive.content-manage-page .btn-list,
  body.union-responsive.content-manage-page .search-list {
    flex: 0 0 auto;
  }

  body.union-responsive.content-manage-page .search-list {
    flex: 1 0 100%;
    justify-content: flex-end;
    margin-left: 0;
  }

  body.union-responsive.content-manage-page .second-line {
    gap: 20px;
  }

  body.union-responsive.content-manage-page .total-content-box,
  body.union-responsive.content-manage-page .domestic-content-box,
  body.union-responsive.content-manage-page .mail-sending-box {
    flex: 1 1 0;
    min-width: 0;
    margin-right: 0;
  }

  body.union-responsive.content-manage-page .table-area {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  body.union-responsive.content-manage-page .table-area > table {
    min-width: 1000px;
  }

  body.union-responsive.content-manage-page .content-edit-box,
  body.union-responsive.content-manage-page .regisModalBox,
  body.union-responsive.content-manage-page .keyword-box,
  body.union-responsive.content-manage-page .exclude-box,
  body.union-responsive.content-manage-page .google-box {
    max-width: calc(100vw - 64px);
    max-height: calc(100vh - 48px);
    overflow: auto;
  }
}

@media (max-width: 1400px) {
  html.union-responsive,
  body.union-responsive {
    min-width: 1024px;
  }

  body.union-responsive .total_navbar_section {
    flex-basis: 184px;
    width: 184px;
    padding-left: 16px;
  }

  body.union-responsive .webhard_section,
  body.union-responsive .copyright_section,
  body.union-responsive .content_section,
  body.union-responsive .eachmenu {
    width: 168px;
  }

  body.union-responsive .eachmenu_svg {
    margin-right: 14px;
    margin-left: 10px;
  }

  body.union-responsive .innerbox {
    margin-right: 16px;
    margin-left: 16px;
  }

  body.union-responsive .title {
    font-size: 14px;
  }

  body.union-responsive .total_navbar_section,
  body.union-responsive .innerbox,
  body.union-responsive .modalScreen {
    font-size: 12px;
  }

  body.union-responsive .total_navbar_section :where(span, a),
  body.union-responsive .innerbox :where(span, div, th, td, input, button, select, a, label),
  body.union-responsive .modalScreen :where(span, div, th, td, input, button, select, a, label) {
    font-size: 12px;
  }

  body.union-responsive .third-line-area {
    flex-wrap: wrap;
    gap: 20px;
  }

  body.union-responsive .top-ranking-area,
  body.union-responsive .pc-mobile-status-sum {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    margin-right: 0;
  }

  body.union-responsive .pc-mobile-status-sum {
    height: auto;
    min-height: 230px;
  }

  body.union-responsive .four-line-area {
    align-items: flex-start;
    gap: 12px;
  }

  body.union-responsive .calculate-unaff {
    display: block;
    margin-top: 6px;
  }

  body.union-responsive .excel-calendar {
    flex-wrap: wrap;
    gap: 8px;
  }

  body.union-responsive .first-btns-section,
  body.union-responsive .second-btns-section {
    flex: 1 1 100%;
    margin-left: 0;
  }

  body.union-responsive.monitoring-status-page .second-line-area > div:first-child {
    flex: 1 0 100%;
  }

  body.union-responsive.monitoring-work-page .second-section-frame {
    flex-basis: 330px;
    width: 330px;
    min-width: 330px;
  }

  body.union-responsive.monitoring-work-page {
    --monitoring-detail-width: 330px;
  }

  body.union-responsive.monitoring-work-page .wrappedRightFirst,
  body.union-responsive.monitoring-work-page .list-area,
  body.union-responsive.monitoring-work-page .search-word-area {
    margin-right: 16px;
    margin-left: 16px;
  }

  body.union-responsive.webhard-dashboard-page .line-area,
  body.union-responsive.content-manage-page .second-line {
    gap: 14px;
  }

  body.union-responsive.webhard-dashboard-page .content-font,
  body.union-responsive.content-manage-page .content-area,
  body.union-responsive.content-manage-page #domestic-manage-value,
  body.union-responsive.content-manage-page #domestic-non-value,
  body.union-responsive.content-manage-page #mail-manage-value,
  body.union-responsive.content-manage-page #mail-non-value {
    font-size: 24px;
  }
}