/* ==========================================================================
   quizvie-responsive-core.css
   Mobile-responsive override layer for the existing Quizvie UI.

   Scope   : index (landing/login), shared top navigation, main dashboard,
             main-myMedia, main-resource, main-students, main-students-detail,
             main-results, manager, classInfo, teacherInfo, studentInfo,
             invitation, statistics pages, and the shared modals.
   Targets : 360 / 375 / 390 / 430 px phones, 768 px tablets.
   Rules   : every rule lives inside an @media block, so desktop rendering
             (>= 1024 px) is completely untouched. Overrides use !important
             only where an existing declaration must be beaten regardless of
             stylesheet link order (the page stylesheets contain duplicated
             equal-specificity rules).
   This file must be linked AFTER the per-page stylesheet.
   ========================================================================== */

/* ==========================================================================
   TABLET AND BELOW (<= 1023px) — remove hard min-width floors, cap modals
   ========================================================================== */
@media (max-width: 1023px) {

  /* --- global overflow guards ------------------------------------------ */
  body {
    overflow-x: hidden;
  }
  img,
  canvas,
  video,
  iframe {
    max-width: 100%;
  }

  /* --- shared top navigation ------------------------------------------- */
  .top-menu {
    flex-wrap: wrap;
  }
  .top-menu__btns {
    width: auto !important;
    max-width: 100%;
    flex-wrap: wrap;
  }
  .top-menu__login-info {
    width: auto !important;
    min-width: 0;
  }

  /* --- pages with hard min-width floors -------------------------------- */
  /* classInfo / teacherInfo / studentInfo: .classInfo has min-width 60rem  */
  .classInfo {
    min-width: 0 !important;
    width: 94vw !important;
    max-width: 60rem !important;
    box-sizing: border-box;
  }
  .back-btn-section {
    width: auto !important;
    max-width: 94vw;
    margin-left: auto;
    margin-right: auto;
  }
  /* invitation: .invitation-list has min-width/max-width 60rem            */
  .invitation-list {
    min-width: 0 !important;
    width: 96vw !important;
    max-width: 60rem !important;
    overflow-x: auto !important;
  }

  /* --- myMedia: 12rem side padding on the content area ----------------- */
  /* :has() scopes this to the myMedia page (its content area contains the
     media grid). Pre-2023 browsers ignore this rule; the phone tier below
     fixes padding for them generically. */
  .contents-section:has(> .bottom-LM),
  .contents-section:has(> .contents-section__bottom--FM) {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box;
  }

  /* --- modals: cap every fixed-size dialog to the viewport -------------- */
  .modal0__view,
  .modal1__view,
  .modal2__view,
  .modal3__view,
  .modal4__view,
  .modal__view,
  .modal__link__view,
  .modal--player__view,
  .modal--assign__view,
  .upload__view {
    max-width: 94vw !important;
    max-height: 88vh !important;
    overflow-y: auto;
    box-sizing: border-box;
  }
  /* oversize dim layers (130rem on index / myMedia / resource) */
  .upload__background,
  .modal0__background,
  .modal1__background,
  .modal2__background,
  .modal3__background {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }

  /* --- resource quiz-maker blocks: fixed 30rem widths ------------------- */
  .FM-question-Selection,
  .FM-question-Ordering,
  .FM-question-TandF,
  .FM-question-Typing--long,
  .FM-question-Typing--short,
  .FM-question-Blank--normal,
  .FM-question-Blank--dropdown,
  .FM-question-Blank--dragNdrop,
  .FM-question-Matching,
  .q-recording-btns {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* index landing: fixed-width alert/selection boxes */
  .swal-input,
  .login-selection,
  .enroll-alert__email-section {
    max-width: 92vw;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   PHONES (<= 767px) — stack layouts, scrollable tables, compact nav
   ========================================================================== */
@media (max-width: 767px) {

  /* --- shared top navigation: static, wrapping, compact ----------------- */
  /* The nav is position:fixed on most pages while content clears it with a
     fixed rem margin; once the nav wraps to two rows that margin is wrong.
     Making it static removes overlap for any nav height. */
  .top-menu {
    position: static !important;
  }
  .top-menu__logo {
    margin: 0.5rem !important;
    margin-right: auto !important;
  }
  .top-menu-btn {
    width: auto !important;
    min-width: 0;
    min-height: 2.5rem;
    margin-right: 0.6rem !important;
    padding: 0 0.2rem;
  }
  .top-menu__login-info {
    /* give the profile chip its own right-aligned row instead of squeezing
       next to the wrapped menu buttons */
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-left: auto;
    height: auto !important;
    padding: 0.25rem 0.75rem 0.5rem 0;
    box-sizing: border-box;
  }
  .top-menu__login-info .right-info {
    min-width: 0;
  }
  .top-menu__btns {
    padding: 0 0.4rem;
    row-gap: 0.25rem;
    box-sizing: border-box;
  }
  .top-setting-view {
    margin-right: 0.5rem !important;
  }

  /* index landing page header (logo + login/sign-up buttons) */
  .top-menu .logo {
    margin-left: 12px !important;
  }
  .top-btns .login,
  .top-btns .enroll {
    width: auto !important;
    min-width: 84px;
    min-height: 40px;
    padding: 0 12px;
    margin-right: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* --- sidebar + content: stack into one column ------------------------- */
  .body {
    display: block !important;
  }
  .left-menu,
  .right-menu {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 14rem;
    overflow: auto !important;
    padding-top: 0.5rem !important;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(235, 237, 243);
  }
  .left-menu .myClasses,
  .left-menu .myChannels {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .left-menu .class-item {
    flex: 0 0 auto;
    padding: 0.6rem 1rem !important;
    min-height: 2.5rem;
    box-sizing: border-box;
  }
  .classDesc {
    padding: 0.8rem 1rem !important;
  }
  .contents-section {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0.75rem !important;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    box-sizing: border-box;
  }
  .contents-section__top {
    flex-wrap: wrap;
    height: auto !important;
    margin-top: 0.75rem !important;
    row-gap: 0.5rem;
  }
  .contents-section__bottom {
    width: 96% !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .back-btn {
    margin-top: 1rem !important;
    min-height: 2.5rem;
  }

  /* --- pseudo-tables (.student-list flex grids): horizontal scroll ------ */
  /* Keeping a min-width preserves the percentage column ratios; the
     wrapping .contents-section__bottom scrolls horizontally. */
  .student-list {
    min-width: 36rem;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .student-list__bottom {
    height: auto !important;
    max-height: 60vh;
  }
  .top__name {
    padding-left: 0.75rem !important;
  }
  .cell__name {
    padding-left: 0.75rem !important;
  }

  /* students-detail summary card: stack, then wrap the metric cells */
  .statistics-summary {
    height: auto !important;
    flex-direction: column;
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
    padding: 0.5rem 0;
  }
  .summary-left,
  .summary-right {
    width: 100% !important;
  }
  .summary-right {
    display: flex;
    flex-wrap: wrap;
  }
  .summary__total-progress,
  .summary__LM-avg,
  .summary__FM-avg,
  .summary__latestConnect,
  .summary__totalStudyTime {
    width: auto !important;
    min-width: 33%;
    margin: 0.3rem 0;
  }

  /* --- main dashboard (main.html) LM/FM/Due/Upcoming lists -------------- */
  /* Each row becomes a stacked card: thumbnail + title + action links on
     top, then one labeled metadata row per column (기한 / 링크 / 진행률 /
     결과). Labels are drawn with ::before so no markup changes are needed.
     Nothing here sets `display` on an element that can carry .hidden
     (that rule is display:none !important and must keep winning). */
  .item-category {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
  /* column-heading strips: keep the 과제 section label, drop the
     right-hand 링크/기한/진행률/결과 headings — the cards carry their own
     inline labels now */
  .learning-cell__top-desc .desc--right,
  .flip-cell__top-desc .desc--right,
  .due-cell__top-desc .desc--right,
  .upcoming-cell__top-desc .desc--right {
    display: none;
  }
  .learning-cell__top-desc .desc--left,
  .flip-cell__top-desc .desc--left,
  .due-cell__top-desc .desc--left,
  .upcoming-cell__top-desc .desc--left {
    width: 100%;
    padding-left: 0.6rem;
    box-sizing: border-box;
  }

  /* card shells */
  .learning-cell,
  .flip-cell,
  .due-cell,
  .upcoming-cell {
    height: auto !important;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 0.7rem 0.6rem;
    box-sizing: border-box;
  }
  .learning-cell .cell--left,
  .flip-cell .cell--left,
  .due-cell .cell--left,
  .upcoming-cell .cell--left {
    width: 100%;
    height: auto;
    align-items: flex-start;
  }
  .learning-cell .cell--right,
  .flip-cell .cell--right,
  .due-cell .cell--right,
  .upcoming-cell .cell--right {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0.6rem;
    border-top: 1px solid rgb(235, 237, 243);
    padding-top: 0.15rem;
  }

  /* top block: thumbnail, title, wrapping action links */
  .learning-cell__thumbnail {
    min-width: 6.5rem;
    width: 6.5rem;
    min-height: 3.7rem;
    height: 3.7rem;
    margin: 0 0.6rem 0 0;
    flex-shrink: 0;
  }
  .learning-cell__desc {
    margin-right: 0;
    min-width: 0;
    flex: 1;
  }
  .learning-cell__title,
  .flip-cell__title,
  .due-cell__title,
  .upcoming-cell__title {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .flip-cell__title {
    margin-left: 0;
    margin-right: 0;
  }
  .learning-cell__btns,
  .flip-cell__btns,
  .due-cell__btns,
  .upcoming-cell__btns {
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }
  .flip-cell__btns {
    margin-left: 0;
    margin-right: 0;
  }
  .learning-cell__btn,
  .flip-cell__btn,
  .due-cell__btn,
  .upcoming-cell__btn {
    white-space: nowrap;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-right: 0.9rem;
  }

  /* labeled metadata rows */
  .learning-cell__Due,
  .learning-cell__Completed,
  .learning-cell__Results,
  .flip-cell__clip,
  .flip-cell__Due,
  .flip-cell__Completed,
  .flip-cell__results,
  .due-cell__Due,
  .upcoming-cell__Due {
    width: 100% !important;
    height: auto !important;
    min-height: 2.4rem;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.1rem;
    box-sizing: border-box;
  }
  .learning-cell__Due::before,
  .learning-cell__Completed::before,
  .learning-cell__Results::before,
  .flip-cell__clip::before,
  .flip-cell__Due::before,
  .flip-cell__Completed::before,
  .flip-cell__results::before,
  .due-cell__Due::before,
  .upcoming-cell__Due::before {
    font-family: "Nanum Barun Gothic", sans-serif;
    font-size: 0.8rem;
    color: rgb(140, 145, 155);
    margin-right: 0.8rem;
    flex-shrink: 0;
  }
  .learning-cell__Due::before,
  .flip-cell__Due::before,
  .due-cell__Due::before,
  .upcoming-cell__Due::before {
    content: "기한";
  }
  .flip-cell__clip::before {
    content: "링크";
  }
  .learning-cell__Completed::before,
  .flip-cell__Completed::before {
    content: "진행률";
  }
  .learning-cell__Results::before,
  .flip-cell__results::before {
    content: "결과";
  }
  .learning-cell__Due .Due__date,
  .flip-cell__Due .flip-due__date,
  .due-cell__Due .due-cell-Due__date,
  .upcoming-cell__Due .due-cell-Due__date {
    text-align: right;
  }
  /* progress doughnut: fixed small box so Chart.js renders it compactly */
  .learning-cell__Completed .Completed__graph,
  .flip-cell__Completed .Completed__graph {
    width: 3.2rem;
    height: 3.2rem;
    margin-top: 0;
    flex: 0 0 auto;
  }

  /* --- myMedia / resource learning-mode list: horizontal scroll --------- */
  .contents-section__FM,
  .bottom-FM {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .learning-mode__header,
  .learning-mode__cell,
  .folder__cell {
    min-width: 34rem;
  }
  .flip-mode__list,
  .flip-mode__list--inFolder {
    min-width: 34rem;
    width: 100% !important;
  }
  .learning-mode__header--title {
    padding-left: 1rem !important;
  }
  .pagenation {
    margin: 0.75rem auto !important;
  }
  .modal3__body {
    overflow-x: auto;
  }

  /* --- manager ----------------------------------------------------------- */
  .section-title {
    width: 100% !important;
  }
  .contents-section__search {
    width: auto !important;
  }

  /* --- invitation -------------------------------------------------------- */
  .invitation-list {
    margin-top: 1rem !important;
    max-height: 75vh;
    margin-left: auto;
    margin-right: auto;
  }
  .invitation-cell {
    height: auto !important;
    flex-wrap: wrap;
    padding: 0.5rem 0;
  }
  .invitation-cell .cell__date {
    width: 6rem !important;
  }
  .invitation-cell .cell__description {
    width: 100% !important;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }
  .invitation-cell .cell__enroll-btn-section {
    width: auto !important;
    margin-left: auto;
  }
  .enroll-btn {
    min-width: 4rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* --- classInfo / teacherInfo / studentInfo ----------------------------- */
  .classInfo__bottom {
    flex-direction: column;
    height: auto !important;
  }
  .classInfo__bottom__left,
  .classInfo__bottom__right {
    width: 100% !important;
  }
  .classInfo__students {
    height: auto !important;
    max-height: 26rem;
  }
  .classInfo__input {
    width: 100% !important;
    max-width: 26rem;
    box-sizing: border-box;
  }
  .classInfo__description__title {
    padding-left: 1rem !important;
  }
  .classInfo__account {
    padding-left: 1rem !important;
  }
  .account__password {
    width: auto !important;
    max-width: 100%;
  }
  .teahcer-name-input,
  .school-name-input {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 18rem;
    box-sizing: border-box;
  }
  .classInfo__accesscode__reset {
    margin-right: 1rem !important;
  }

  /* --- statistics -------------------------------------------------------- */
  .middle2 {
    flex-direction: column;
    height: auto !important;
  }
  .middle2 .learning-mode,
  .middle2 .flip-mode {
    width: 100% !important;
  }
  .lm__statistics--left,
  .fm__statistics--left {
    margin-left: 4% !important;
  }
  .graph__bottom__graph {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- modals: uniform phone placement ----------------------------------- */
  /* Normalize every modal overlay to a full-viewport layer (index sizes its
     overlays at 130rem x 115rem and centers them, which puts the dialog card
     off-screen on phones). On the app pages these wrappers are already
     fixed 100% x 100% at 0/0, so the same values are a no-op there. */
  .modal0,
  .modal1,
  .modal2,
  .modal3,
  .modal4 {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
  /* Anchor every dialog card near the top of the viewport, horizontally
     centered, sized to the content. Overrides the various
     translate(-50%, -60%/-80%) slide positions so no state can push the
     card off-screen; open/close fades still work (visibility/opacity are
     untouched). */
  .modal0__view,
  .modal1__view,
  .modal2__view,
  .modal3__view,
  .modal4__view,
  .modal__view,
  .modal__link__view,
  .modal--player__view,
  .modal--assign__view,
  .upload__view {
    position: fixed !important;
    left: 50% !important;
    top: 6vh !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: 94vw !important;
    max-width: 46rem !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 86vh !important;
    overflow-y: auto;
    box-sizing: border-box;
  }
  /* rows inside the create/edit modals sit 13rem from the left edge */
  .modal__row {
    width: 94% !important;
    margin-left: 3% !important;
    margin-right: 3% !important;
    box-sizing: border-box;
  }
  /* class photo is absolutely positioned over the row area; put it in flow */
  .modal1__class-photo,
  .modal2__class-photo {
    position: static !important;
    margin: 0.8rem auto !important;
    transform: none !important;
    display: block;
  }
  .invite-search__input {
    max-width: 100%;
    box-sizing: border-box;
  }
  .invite-search__list,
  .result-layer {
    width: min(22rem, 86vw) !important;
  }
  /* video player modal: keep the video area proportional as it narrows */
  .modal--player__view .wrapper {
    height: auto !important;
    width: 94% !important;
  }
  .player-section {
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: 60vh;
  }

  /* --- touch targets ------------------------------------------------------ */
  .btn1234,
  .btn-top,
  .btn-fm,
  .bottom-btn,
  .top-setting-btn,
  .modal1__btn,
  .modal2__btn,
  .modal__btns--no,
  .modal__btns--yes,
  .modal__folder--no,
  .modal__folder--yes,
  .upload__btn--enroll,
  .upload__btn--cancel,
  .modal--assign__assign-btn,
  .contents-section__top .btn {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .page-left,
  .page-right,
  .page-middle-num {
    min-height: 2.5rem;
    min-width: 2.5rem;
  }

  /* --- index landing page ------------------------------------------------- */
  /* hero text block: fixed 40rem box absolutely placed at left:26% */
  .banner1__center {
    width: 92vw !important;
    height: auto !important;
    left: 50% !important;
    top: 25% !important;
    transform: translate(-50%, -50%) !important;
  }
  .strong {
    font-size: 1.6rem !important;
  }
  .semi-strong {
    font-size: 1.25rem !important;
  }
  .banner1__center__subtitle {
    font-size: 1.1rem !important;
  }
  .banner2__right--top,
  .banner3__left--top,
  .banner4__top--title,
  .banner5__top--title,
  .banner6__title {
    font-size: 1.3rem !important;
  }

  /* marketing banners: fixed 50-70rem heights and 26-60rem columns */
  .banner2,
  .banner3,
  .banner4,
  .banner5,
  .banner6 {
    height: auto !important;
    padding: 2.5rem 0;
    box-sizing: border-box;
  }
  .banner2__inner,
  .banner3__innter {
    flex-direction: column;
    align-items: center;
  }
  .banner2__left,
  .banner2__right,
  .banner3__left,
  .banner3__right {
    width: 92vw !important;
    max-width: 34rem;
    margin-left: 0 !important;
    box-sizing: border-box;
  }
  /* image panels keep a height (they are background images) but scale down */
  .banner2__left,
  .banner3__right {
    height: 16rem !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  .banner2__right,
  .banner3__left {
    height: auto !important;
  }
  .banner4__bottom,
  .banner5__bottom {
    width: 94vw !important;
    height: 55vw !important;
  }
  .banner4__bottom-image,
  .banner5__bottom-image {
    width: 100%;
    height: 100%;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  /* corner decoration strips (15rem wide absolutes) would cover the content */
  .banner4__deco--top,
  .banner4__deco--bottom,
  .banner5__deco--top,
  .banner5__deco--bottom {
    display: none;
  }
  .banner6__inner {
    width: 94vw !important;
    height: auto !important;
    margin-top: 15% !important;
    padding-bottom: 2rem;
  }
  .banner6__btns {
    width: min(30rem, 94vw) !important;
    height: auto !important;
  }
}

/* ==========================================================================
   SMALL PHONES (<= 400px) — final tightening
   ========================================================================== */
@media (max-width: 400px) {
  .top-menu-btn {
    margin-right: 0.35rem !important;
  }
  .top-menu-btn--top {
    font-size: 0.88rem !important;
  }
  .login-info__school {
    display: none;
  }
  .contents-section {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }
  .modal0__view,
  .modal1__view,
  .modal2__view,
  .modal3__view,
  .modal4__view,
  .modal__view,
  .modal__link__view,
  .modal--player__view,
  .modal--assign__view,
  .upload__view {
    width: 96vw !important;
  }
}