/* Everything here restyles a fixed 1200px legacy layout for a narrow screen, so
   none of it belongs at desktop. It used to sit outside every @media, including
   html body{font-family:Pretendard} which changed the typeface site-wide. */
@media (max-width: 1023px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  html, body { overflow-x: clip; }
  body { height: auto; min-height: 100vh; }

  .sub_wrap { width: auto !important; min-width: 0 !important;
              padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
  .sub_wrap .sub_default,
  .sub_wrap .sub_cont_box,
  .sub_wrap .sub_my { width: auto !important; min-width: 0 !important; max-width: 1260px;
              margin-left: auto; margin-right: auto; box-sizing: border-box; }

  img { max-width: 100%; height: auto; }

  .sub_wrap,
  .sub_wrap .sub_default,
  .sub_wrap .sub_cont_box,
  .sub_wrap .guide_wrap,
  .sub_wrap .tab_default,
  .sub_wrap .tab_default2_1,
  .sub_wrap .tab_cont_wrap,
  .sub_wrap .tab_cont_wrap2_1,
  .sub_wrap .cont_box,
  .sub_wrap .use_giude,
  .sub_wrap .basic_box,
  .sub_wrap .txt_flex { height: auto !important; }

  html body {
    font-family: "Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;
  }
  html body button, html body input { font-family: inherit; }
}

@media (max-width: 1023px) {
  .layer_wrap, .layer_wrap2, .layer_wrap3, .layer_wrap7,
  .layer_wrap_200, .layer_wrap_400, .layer_wrap_450,
  .layer_wrap_calendar, .layer_wrap_guide { max-width: calc(100vw - 32px); }

  .layer_wrap iframe, .layer_wrap2 iframe, .layer_wrap3 iframe,
  .layer_wrap7 iframe, .layer_wrap_200 iframe, .layer_wrap_400 iframe,
  .layer_wrap_450 iframe, .layer_wrap_calendar iframe,
  .layer_wrap_guide iframe { max-width: 100%; }
}

/* 1024-1200: the grid is still a rigid 1200px, so the document scrolls sideways and
   every full-bleed band, sized from body and so from the viewport, stops short of it.
   1202 = 1200 + .utils_wrap's two 1px borders; 1201 half-pixels every centred box. */
@media (min-width: 1024px) and (max-width: 1200px) {
  html, body { min-width: 1202px; }
}