@charset "utf-8";

/*
 * Facility/mobile baseline alignment for online pages.
 *
 * Source of truth:
 * - humanframe/theme/global/assets/style/style.css
 * - humanframe/theme/apply/assets/style/layout/layout.css
 * - humanframe/theme/apply/assets/style/style.css
 *
 * Purpose:
 * - keep desktop UI untouched
 * - on mobile only, let online/view/submit/mypage follow facility mobile layout
 * - neutralize online-specific extracted overrides where they diverge
 */

@media only screen and (max-width: 63.99em) {
  body.apply-theme-page #header .header-middle {
    height: 72px;
    padding: 0;
    border: none;
  }

  body.apply-theme-page #header .header-middle .bottom-menu {
    padding: 9px 10px 9px 16px !important;
  }

  body.apply-theme-page #header .header-middle .bottom-menu .logo h1 a {
    width: 92px;
    height: 31px;
    background-size: 100%;
  }

  body.apply-theme-page #header .etc-menu {
    gap: 0 !important;
  }

  body.apply-theme-page #header .etc-menu li > a {
    padding: 6px 12px 2px !important;
    font-size: 15px !important;
  }

  body.apply-theme-page #header .etc-menu li > a i {
    display: block;
    margin: 0;
    text-align: center;
  }

  body.apply-theme-page #header .header-bottom nav {
    background-color: #eef2f7;
    height: 100%;
  }

  body.apply-theme-page #header .header-bottom nav > ul {
    min-height: 860px;
    overflow-y: auto;
  }

  body.apply-theme-page #header .header-bottom nav > ul > li {
    border-bottom: 1px solid #cdd1d5;
  }

  body.apply-theme-page #header .header-bottom nav > ul > li > a {
    width: 100% !important;
    height: auto;
    min-height: 58px;
    padding: 0 24px !important;
    line-height: 58px;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  body.apply-theme-page .apply-online-content,
  body.apply-theme-page .apply-view-content,
  body.apply-theme-page .apply-submit-content,
  body.apply-theme-page .apply-mypage-detail {
    padding-bottom: 0;
  }

  body.apply-theme-page .apply-view-body,
  body.apply-theme-page .apply-submit-body {
    margin-top: 0;
  }

  body.apply-theme-page .content-section,
  body.apply-theme-page .box-basic-wrap {
    margin-top: 40px;
    padding: clamp(12px, 8px + 2vw, 40px) !important;
    border: 1px solid #b1b8be !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
  }

  body.apply-theme-page .apply-view-content .content-section {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.apply-theme-page .box-basic-wrap .essential-text {
    top: clamp(12px, 8px + 2vw, 40px);
    right: clamp(12px, 8px + 2vw, 40px);
  }

  body.apply-theme-page .apply-online-content .tab:not(.type2, .type3, .type4) > ul > li {
    width: auto;
  }

  body.apply-theme-page .search-target-combobox {
    width: 100%;
    flex: 1 1 100%;
  }

  body.apply-theme-page .search-target-combobox__input.select-control {
    width: 100%;
  }

  body.apply-theme-page .apply-view-content .step-wrap,
  body.apply-theme-page .apply-submit-content .step-wrap {
    margin-bottom: 56px;
  }

  body.apply-theme-page .step-wrap ul li {
    width: auto;
  }

  body.apply-theme-page .apply-submit-content .radio-wrap,
  body.apply-theme-page .apply-submit-content .radio-group,
  body.apply-theme-page .apply-submit-content .checkbox-wrap,
  body.apply-theme-page .apply-submit-content .rd_list,
  body.apply-theme-page .apply-submit-content .ch_list {
    gap: 24px 16px !important;
  }

  body.apply-theme-page .apply-submit-content .terms-wrap .terms-body {
    padding: 24px !important;
    border: 1px solid #b1b8be !important;
    border-radius: 12px !important;
  }

  body.apply-theme-page .apply-submit-content .terms-wrap .terms-body .inner {
    height: 140px;
    overflow-y: auto;
  }

  body.apply-theme-page .apply-submit-content .terms-wrap .terms-foot {
    background: #e6e8ea;
    padding: 24px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  body.apply-theme-page .apply-submit-content .reserv-foot .btn-wrap,
  body.apply-theme-page .apply-view-content .reserv-foot .btn-wrap {
    margin-top: 40px;
    margin-bottom: 40px;
    gap: 16px;
    justify-content: center !important;
  }
}

@media only screen and (max-width: 47.99em) {
  body.apply-theme-page #header .etc-menu li > a {
    font-size: 13px !important;
  }

  body.apply-theme-page .dl-type,
  body.apply-theme-page .dl-type.is-col,
  body.apply-theme-page .apply-mypage-detail .dl-type.is-col {
    flex-direction: column !important;
  }

  body.apply-theme-page .step-wrap ul li dl dd {
    display: none;
  }

  body.apply-theme-page .step-wrap ul li.check dl dd {
    display: block;
  }

  body.apply-theme-page .apply-submit-content .terms-wrap .terms-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  body.apply-theme-page .apply-submit-content .reserv-foot .btn-wrap a,
  body.apply-theme-page .apply-view-content .reserv-foot .btn-wrap a {
    flex: 1 1 20%;
  }

  body.apply-theme-page .apply-submit-content .reserv-foot .btn-wrap div,
  body.apply-theme-page .apply-view-content .reserv-foot .btn-wrap div {
    display: flex;
    gap: 16px;
  }
}

@media only screen and (max-width: 22.5em) {
  body.apply-theme-page .step-wrap ul li {
    width: 100%;
  }
}