/* ==========================================================
   스마트79 — Layout
   app-wrapper 너비 + breakpoint 5단계
   #main-btns fixed 연동 포함
   ========================================================== */

/* ── app-wrapper ── */
.app-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--white);
  position: relative;
}

/* ── 화면 기본 ── */
.screen {
  display: none;
}
.screen.active {
  display: block;
}
.screen-flex {
  display: none;
}
.screen-flex.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: var(--sp-2xl) var(--sp-lg);
}

/* ── breakpoint: md (431px~) ── */
@media (min-width: 431px) {
  .app-wrapper {
    max-width: 520px;
    box-shadow: 0 0 40px rgba(0,0,0,0.12);
  }
  #main-btns {
    max-width: 520px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* ── breakpoint: lg (769px~) ── */
@media (min-width: 769px) {
  /* 태블릿: 520px 유지 */
}

/* ── breakpoint: xl (985px~) — Z Fold7 ── */
@media (min-width: 985px) {
  .app-wrapper {
    max-width: 640px;
  }
  #main-btns {
    max-width: 640px;
  }
  .screen-flex.active {
    padding-top: var(--sp-2xl);
    min-height: auto;
  }
}

/* ── breakpoint: 2xl (1201px~) ── */
@media (min-width: 1201px) {
  .app-wrapper {
    max-width: 720px;
  }
  #main-btns {
    max-width: 720px;
  }
}