/* PE-Class v1.14.25 — 모바일 반별 진도표 전용
   기존 PC 반별 진도표는 유지하고 768px 이하에서만 적용됩니다. */
#mobileClassProgressSelector,
#mobileClassProgressHost{display:none}

@media (max-width:768px){
  body.mobileClassProgressView #app{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  body.mobileClassProgressView #app>.pe87Crumb,
  body.mobileClassProgressView #app>.pe87PageHead,
  body.mobileClassProgressView #app>.panel,
  body.mobileClassProgressView #app>div[style*="height"]{
    display:none!important;
  }

  .mobileClassProgressSelector{
    display:block!important;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin:0 0 12px;
    padding:14px;
    border:1px solid #d8e2ee;
    border-radius:14px;
    background:linear-gradient(180deg,#fff,#f7fbff);
    box-shadow:0 4px 14px rgba(31,56,88,.08);
  }
  .mobileClassProgressSelectorTitle{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:13px;
    color:#203247;
  }
  .mobileClassProgressSelectorTitle>span{font-size:24px;line-height:1}
  .mobileClassProgressSelectorTitle>div{display:flex;flex-direction:column;gap:3px;min-width:0}
  .mobileClassProgressSelectorTitle b{font-size:18px;line-height:1.25}
  .mobileClassProgressSelectorTitle small{font-size:12px;font-weight:750;color:#718096}
  .mobileClassProgressSelectorGrid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px;
  }
  .mobileClassProgressSelector .mobileProgressPickerField.wide{grid-column:1/-1}
  .mobileClassProgressSelector button,
  .mobileClassProgressHost button{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .mobileClassProgressLoad{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-height:50px;
    margin:12px 0 0;
    padding:10px 14px;
    border:1px solid #29435d;
    border-radius:11px;
    background:#314a63;
    color:#fff;
    font-size:15px;
    font-weight:900;
    line-height:1.2;
  }
  .mobileClassProgressLoad:disabled{border-color:#cbd5e1;background:#e8eef4;color:#8b99a8}
  .mobileClassProgressLocation{
    margin-top:11px;
    padding-top:10px;
    border-top:1px solid #e2e8f0;
    color:#748396;
    font-size:12px;
    font-weight:800;
    line-height:1.45;
    overflow-wrap:anywhere;
    word-break:keep-all;
  }

  .mobileClassProgressHost{
    display:block!important;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .mobileClassProgressDashboard{
    width:100%;
    box-sizing:border-box;
    margin:0 0 12px;
    padding:14px;
    border:1px solid #dbe4ef;
    border-radius:14px;
    background:#fff;
    box-shadow:0 4px 14px rgba(31,56,88,.08);
  }
  .mobileClassProgressDashboardHead{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
  }
  .mobileClassProgressDashboardHead>div{min-width:0}
  .mobileClassProgressDashboard h2{
    margin:0;
    color:#203247;
    font-size:18px;
    line-height:1.3;
  }
  .mobileClassProgressDashboard p{
    margin:4px 0 0;
    color:#718096;
    font-size:12px;
    font-weight:800;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .mobileClassProgressStatus{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 9px;
    border:1px solid #b7e3c5;
    border-radius:999px;
    background:#ecfdf3;
    color:#16803a;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
  }
  .mobileClassProgressStatus.dirty{border-color:#f4d39a;background:#fff7e8;color:#b66900}

  .mobileClassProgressMetaGrid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:9px;
    margin-bottom:12px;
  }
  .mobileClassProgressMetaGrid>div,
  .mobileClassProgressMetaGrid>label{
    display:flex!important;
    flex-direction:column;
    gap:6px;
    min-width:0;
    margin:0!important;
    padding:10px 11px;
    border:1px solid #e0e7ef;
    border-radius:11px;
    background:#f8fafc;
  }
  .mobileClassProgressMetaGrid>label{grid-column:1/-1;background:#fff}
  .mobileClassProgressMetaGrid span{color:#607083;font-size:11px;font-weight:900;line-height:1.3}
  .mobileClassProgressMetaGrid b{
    min-width:0;
    color:#203247;
    font-size:14px;
    font-weight:900;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .mobileClassProgressMetaGrid input{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-width:0;
    height:46px;
    box-sizing:border-box;
    margin:0;
    padding:0 11px;
    border:1px solid #cbd6e2;
    border-radius:10px;
    background:#fff;
    color:#172b3f;
    font-size:16px;
    font-weight:750;
    text-align:left;
    -webkit-user-select:text;
    user-select:text;
  }
  .mobileClassProgressMetaGrid input:focus{outline:3px solid rgba(52,152,219,.15);border-color:#5fa7df}

  .mobileClassProgressActions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    width:100%;
  }
  .mobileClassProgressActions button{
    width:100%;
    min-width:0;
    min-height:48px;
    margin:0;
    padding:7px 4px;
    border:1px solid #cbd6e2;
    border-radius:10px;
    background:#fff;
    color:#29415a;
    font-size:12px;
    font-weight:900;
    line-height:1.2;
    white-space:normal;
    word-break:keep-all;
  }
  .mobileClassProgressActions .save{border-color:#1f7a45;background:#1f8b4c;color:#fff}
  .mobileClassProgressActions .danger{border-color:#f3b5b5;background:#fff4f4;color:#c53d3d}
  .mobileClassProgressActions button:disabled{opacity:.46;cursor:not-allowed}
  .mobileClassProgressActions button span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    margin-left:2px;
    border-radius:999px;
    background:rgba(197,61,61,.12);
    font-size:10px;
  }

  .mobileClassProgressCards{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    min-width:0;
  }
  .mobileClassProgressCard{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:14px;
    border:1px solid #dbe4ef;
    border-radius:15px;
    background:#fff;
    box-shadow:0 4px 14px rgba(31,56,88,.07);
    scroll-margin-top:142px;
    transition:border-color .15s ease,box-shadow .15s ease;
  }
  .mobileClassProgressCard.selected{border-color:#4a91d4;box-shadow:0 0 0 3px rgba(74,145,212,.13)}
  .mobileClassProgressCard>header{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:9px;
    padding-bottom:11px;
    margin-bottom:12px;
    border-bottom:1px solid #e5eaf0;
  }
  .mobileClassProgressCard>header>strong{text-align:center;color:#1f3348;font-size:17px}
  .mobileClassProgressCheck{
    display:inline-flex!important;
    align-items:center;
    gap:6px;
    min-width:0;
    margin:0!important;
    color:#607083;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
  }
  .mobileClassProgressCheck input{
    appearance:auto;
    -webkit-appearance:checkbox;
    width:20px;
    height:20px;
    flex:0 0 20px;
    margin:0;
    padding:0;
    accent-color:#2f80c7;
  }
  .mobileClassProgressCardState{
    justify-self:end;
    color:#7b8794;
    font-size:11px;
    font-weight:850;
    white-space:nowrap;
  }
  .mobileClassProgressFields{display:grid;grid-template-columns:1fr;gap:12px;min-width:0}
  .mobileClassProgressField{
    display:flex!important;
    flex-direction:column;
    gap:7px;
    min-width:0;
    margin:0!important;
  }
  .mobileClassProgressField>span{color:#526274;font-size:12px;font-weight:900}
  .mobileClassProgressField input,
  .mobileClassProgressField textarea,
  .mobileClassProgressValuePicker{
    width:100%;
    min-width:0;
    box-sizing:border-box;
    border:1px solid #cbd6e2;
    border-radius:10px;
    background:#fff;
    color:#172b3f;
    padding:10px 11px;
    font-size:16px;
    line-height:1.45;
    text-align:left;
    -webkit-user-select:text;
    user-select:text;
  }
  .mobileClassProgressField input{height:48px}
  .mobileClassProgressField textarea{min-height:118px;resize:vertical}
  .mobileClassProgressField textarea.mobileClassProgressMemo{min-height:78px}
  .mobileClassProgressField input:focus,
  .mobileClassProgressField textarea:focus{outline:3px solid rgba(52,152,219,.15);border-color:#5fa7df}
  .mobileClassProgressDateWrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    min-width:0;
  }
  .mobileClassProgressDateWrap input{min-width:0;max-width:100%;font-family:inherit}
  .mobileClassProgressDateWrap small{
    min-width:58px;
    color:#718096;
    font-size:11px;
    font-weight:850;
    text-align:right;
    white-space:nowrap;
  }

  /* iPhone Safari의 빈 date 입력은 고유 최소 폭을 유지하여 옆의 안내 문구와 겹칠 수 있다.
     iOS에서만 안내 문구를 입력창 아래 줄로 내려 겹침을 구조적으로 차단한다. */
  body.mobileClassProgressIOS .mobileClassProgressDateWrap{
    grid-template-columns:minmax(0,1fr);
    gap:5px;
  }
  body.mobileClassProgressIOS .mobileClassProgressDateWrap input{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }
  body.mobileClassProgressIOS .mobileClassProgressDateWrap small{
    min-width:0;
    padding-right:2px;
    text-align:right;
  }
  .mobileClassProgressTwoColumns{
    display:grid;
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    gap:10px;
    min-width:0;
  }
  .mobileClassProgressValuePicker{
    appearance:none;
    -webkit-appearance:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:9px;
    height:48px;
    margin:0;
    padding-top:0;
    padding-bottom:0;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
    touch-action:manipulation;
  }
  .mobileClassProgressValuePicker>b{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:15px;
    font-weight:850;
  }
  .mobileClassProgressValuePicker>span{flex:0 0 auto;color:#6e7d8f;font-size:19px}
  .mobileClassProgressReset{
    width:100%;
    min-height:44px;
    margin:0;
    padding:8px 12px;
    border:1px solid #efb5b5;
    border-radius:10px;
    background:#fff8f8;
    color:#c24141;
    font-size:13px;
    font-weight:900;
  }
  .mobileClassProgressReset:disabled{opacity:.48}

  .mobileClassProgressEmpty,
  .mobileClassProgressNoRows{
    width:100%;
    box-sizing:border-box;
    border:1px solid #dbe4ef;
    border-radius:14px;
    background:#fff;
    padding:30px 18px;
    text-align:center;
    color:#718096;
    box-shadow:0 4px 14px rgba(31,56,88,.06);
  }
  .mobileClassProgressEmpty{display:flex;flex-direction:column;align-items:center;gap:8px}
  .mobileClassProgressEmpty>span{font-size:30px}
  .mobileClassProgressEmpty>b,
  .mobileClassProgressNoRows>b{color:#263b53;font-size:16px}
  .mobileClassProgressEmpty p{margin:0;max-width:300px;font-size:13px;line-height:1.55;word-break:keep-all}
  .mobileClassProgressEmpty.error{border-color:#f3c1c1;background:#fffafa}
  .mobileClassProgressEmpty.loading>span{animation:mobileClassProgressPulse 1.1s ease-in-out infinite alternate}
  .mobileClassProgressNoRows{display:flex;flex-direction:column;gap:6px}
  .mobileClassProgressNoRows span{font-size:13px}
  @keyframes mobileClassProgressPulse{from{opacity:.45;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
}

@media (max-width:390px){
  .mobileClassProgressSelector{padding:12px}
  .mobileClassProgressSelectorGrid{gap:8px}
  .mobileClassProgressDashboard,
  .mobileClassProgressCard{padding:12px}
  .mobileClassProgressActions{gap:5px}
  .mobileClassProgressActions button{font-size:11px;padding-left:2px;padding-right:2px}
  .mobileClassProgressDashboard h2{font-size:17px}
  .mobileClassProgressMetaGrid{gap:7px}
  .mobileClassProgressMetaGrid>div,
  .mobileClassProgressMetaGrid>label{padding:9px}
  .mobileClassProgressTwoColumns{gap:8px}
}

@media (max-width:350px){
  .mobileClassProgressMetaGrid{grid-template-columns:1fr}
  .mobileClassProgressMetaGrid>label{grid-column:auto}
  .mobileClassProgressActions button{font-size:10px}
  .mobileClassProgressCheck span{display:none}
}

@media (min-width:769px){
  #mobileClassProgressSelector,
  #mobileClassProgressHost,
  #mobileClassProgressPickerSheet{display:none!important}
}