:root{--blue:#2563eb;--line:#dbe3ef;--bg:#f6f9fd;--text:#1f2d3d;--muted:#7b8794;--card:#fff;--green:#16a34a;--red:#ef4444;--orange:#f59e0b} *{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR',Arial,sans-serif;background:var(--bg);color:var(--text)} .topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.topbar strong{display:block;font-size:18px}.muted{color:var(--muted);font-size:13px}.sync{font-size:13px;color:var(--muted)} .tabs{display:flex;gap:10px;padding:14px 22px;background:#fff;border-bottom:1px solid var(--line);overflow:auto}.tab{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 15px;font-weight:700;color:#2272cf;white-space:nowrap}.tab.active{background:var(--blue);color:#fff;border-color:var(--blue)} #app{padding:22px}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 4px 16px rgba(15,23,42,.04)}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.btn{border:0;border-radius:10px;padding:11px 16px;background:var(--blue);color:#fff;font-weight:800;cursor:pointer}.btn.secondary{background:#fff;color:var(--blue);border:1px solid var(--line)}.btn.danger{background:#fff;color:var(--red);border:1px solid #fecaca}.btn.green{background:var(--green)} select,input,textarea{border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;background:#fff}textarea{width:100%;min-height:88px;resize:vertical}.grid{display:grid;grid-template-columns:330px 1fr;gap:18px}.list{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.listHead{padding:14px 16px;font-weight:900;border-bottom:1px solid var(--line)}.studentList{max-height:66vh;overflow:auto}.studentBtn{width:100%;display:grid;grid-template-columns:62px 1fr;align-items:center;border:0;background:#fff;border-bottom:1px solid var(--line);padding:0;cursor:pointer}.studentBtn.active{background:#eaf5ff}.num{font-weight:800;text-align:center;padding:18px 8px;border-right:1px solid var(--line)}.name{padding:12px 14px;text-align:center}.badge{display:inline-flex;gap:4px;align-items:center;border:2px solid #f2bd00;background:#fff7d6;color:#8a5a00;border-radius:999px;padding:8px 18px;font-weight:900}.count{color:#d97706;font-size:12px}.detail{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}.detailTitle{text-align:center;font-size:22px;font-weight:900;border-bottom:3px solid #2396eb;padding-bottom:16px;margin-bottom:18px}.profile{display:flex;gap:22px;align-items:flex-start}.photo{width:150px;height:180px;border:2px dashed var(--line);border-radius:18px;display:flex;align-items:center;justify-content:center;color:var(--muted);overflow:hidden;background:#fafcff}.photo img{width:100%;height:100%;object-fit:cover}.fields{flex:1;display:grid;gap:10px}.field2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.label{font-size:13px;color:var(--muted);font-weight:800}.noteItem{border:1px solid var(--line);border-left:5px solid #2396eb;background:#fbfdff;border-radius:10px;padding:12px;margin-top:8px;display:flex;justify-content:space-between;gap:8px}.empty{padding:50px;text-align:center;color:var(--muted)}.uploadBox{border:3px dashed #4aa3df;background:#f3fbff;border-radius:18px;padding:20px;text-align:center;margin-bottom:16px}.hint{font-size:13px;color:#6b7280}.placeholder{min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted)} @media(max-width:850px){#app{padding:14px}.grid{grid-template-columns:1fr}.profile{flex-direction:column}.photo{width:100%;height:220px}.field2{grid-template-columns:1fr}.topbar{padding:14px}.tabs{padding:10px}.studentList{max-height:none}} .tableWrap{overflow:auto}.dataTable{width:100%;border-collapse:collapse;min-width:980px;background:#fff}.dataTable th,.dataTable td{border:1px solid var(--line);padding:8px;text-align:center;white-space:nowrap}.dataTable th{background:#f1f5f9;font-weight:900}.dataTable input,.dataTable select{width:100%;min-width:72px;padding:7px 8px}.dataTable .bmiCell{font-weight:900;color:#0f766e;background:#f0fdfa} .papsTable th{white-space:nowrap;text-align:center} .papsTable td{white-space:nowrap;text-align:center} .papsTable .papsInput{width:72px;text-align:center} .papsTable .bestCell,.papsTable .bmiCell{font-weight:700;background:#f8fafc} .assessTable .assessInput{width:76px;text-align:center}.assessTable .assessTotal{font-weight:900;background:#f8fafc;color:#0f766e} /* ===================== 홈/체육수업 달력 ===================== */ .calendarHeader h2{font-size:22px}.calTitle{text-align:center;font-weight:900;font-size:22px;margin-bottom:14px}.calWeekHead{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-bottom:0;background:#f8fafc;border-radius:14px 14px 0 0;overflow:hidden}.calWeekHead span{text-align:center;padding:10px;font-weight:900;border-right:1px solid var(--line)}.calWeekHead span:last-child{border-right:0}.calWeekHead span:first-child{color:#ef4444}.calWeekHead span:last-child{color:#2563eb}.calGrid{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}.calDay{min-height:132px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px;cursor:pointer;position:relative}.calDay:hover{background:#f8fbff}.calDay.other{background:#f8fafc;color:#94a3b8}.calDay.today{box-shadow:inset 0 0 0 3px #93c5fd;background:#eff6ff}.calDate{font-weight:900;margin-bottom:6px}.calEvents{display:grid;gap:5px}.lessonBadge,.moreBadge{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:9px;padding:5px 7px;font-size:12px;text-align:left;cursor:pointer;line-height:1.25}.lessonBadge:hover,.moreBadge:hover{background:#dbeafe}.lessonBadge b{color:#b45309}.calModal{position:fixed;inset:0;background:rgba(15,23,42,.38);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}.calModal.hidden{display:none}.calDialog{background:#fff;border-radius:18px;max-width:720px;width:min(720px,96vw);max-height:82vh;overflow:auto;padding:20px;box-shadow:0 20px 60px rgba(15,23,42,.28)}.calDialog h3{margin:0}.calDetailItem{border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:12px;padding:12px;margin-top:10px;background:#fbfdff;line-height:1.8}.mobileDay{border:1px solid var(--line);border-radius:16px;margin-bottom:12px;background:#fff;overflow:hidden}.mobileDay.today{border-color:#60a5fa;box-shadow:0 0 0 3px #dbeafe}.mobileDate{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#f8fafc;border-bottom:1px solid var(--line);padding:13px 14px}.mobileDate span{font-size:13px;color:var(--muted);font-weight:800}.mobileEvents{display:grid;gap:8px;padding:10px}.mobileLesson{border:1px solid #bfdbfe;background:#eff6ff;border-radius:12px;padding:12px;text-align:left;display:grid;gap:5px;color:#1e40af}.mobileLesson small{color:#475569;font-size:12px}.mobileLesson b{color:#b45309} @media(max-width:760px){.calendarHeader .row{align-items:stretch}.calendarHeader input[type=month]{width:100%}.calendarHeader .btn{flex:1;padding:10px}.calTitle{font-size:18px;margin-bottom:12px}.calWeekHead,.calGrid{display:none}.calDialog{width:100%;max-height:88vh;padding:16px}.calModal{align-items:flex-end;padding:10px}.calDetailItem{font-size:14px}.mobileEvents .hint{padding:8px 4px}} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .formGrid label,.panel label{display:block;margin-bottom:10px} .wrap{flex-wrap:wrap} .dangerPanel{border-color:#fecaca;background:#fffafa}.btn.danger{background:#dc2626;color:#fff;border-color:#dc2626}.btn.danger:hover{filter:brightness(.95)} @media(max-width:760px){.grid2,.formGrid{grid-template-columns:1fr}.dangerPanel .row{align-items:stretch}.dangerPanel .btn{width:100%}} /* v1.6.0 학교스포츠클럽 */ .clubDeptList{display:flex;flex-direction:column;gap:8px;margin-top:12px} .clubDept{border:1px solid #e5e7eb;background:#fff;border-radius:14px;padding:12px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer} .clubDept.active{border-color:#16a34a;background:#ecfdf5;box-shadow:0 0 0 2px rgba(22,163,74,.12)} .clubDept span{font-size:13px;color:#6b7280} .clubMemberList,.clubAttList{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:360px;overflow:auto;padding-right:4px} .clubMember,.clubAttRow{border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center} .clubAttRow{grid-template-columns:1fr 120px 1fr} .clubAttRow select,.clubAttRow input{min-width:0} .tableScroll{overflow:auto;margin-top:12px}.dataTable{width:100%;border-collapse:collapse}.dataTable th,.dataTable td{border-bottom:1px solid #e5e7eb;padding:9px;text-align:left;white-space:nowrap}.dataTable th{background:#f9fafb;color:#374151} .checkinWrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f3f4f6;padding:20px}.checkinCard{max-width:520px;width:100%} @media(max-width:760px){.clubAttRow{grid-template-columns:1fr}.clubMember{grid-template-columns:1fr auto}.clubDept{flex-direction:column;align-items:flex-start}.checkinWrap{align-items:flex-start}} .importPanel{margin:10px 0;padding:12px;border:1px solid #dbeafe;border-radius:14px;background:#f8fbff} .studentPickGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px;max-height:260px;overflow:auto;padding:4px} .studentPick{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font-size:14px} .studentPick.disabled{opacity:.55;background:#f3f4f6} .studentPick em{font-style:normal;color:#64748b;font-size:12px;margin-left:4px} .qrPreviewBox{margin-top:12px;display:flex;justify-content:center} .qrCard{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--border);border-radius:16px;padding:14px;background:#fff;max-width:320px;text-align:center} .qrCard img{width:260px;height:260px;max-width:100%;image-rendering:auto} .qrCard small{color:var(--muted)} .lockedQrInfo{display:grid;gap:10px;margin:12px 0;padding:14px;border:1px solid var(--border);border-radius:14px;background:#f8fafc} .lockedQrInfo>div{display:flex;justify-content:space-between;gap:12px;align-items:center} .lockedQrInfo b{text-align:right} /* v1.6.3 학교스포츠클럽 통계 세분화 + 출석 달력 */ .clubStatsTable th,.clubStatsTable td{text-align:center}.clubStatsTable td:first-child,.clubStatsTable th:first-child{text-align:left} .clubCalendarPc{margin-top:12px}.clubCalWeek{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;overflow:hidden;background:#f8fafc}.clubCalWeek span{text-align:center;font-weight:900;padding:10px;border-right:1px solid var(--line)}.clubCalWeek span:last-child{border-right:0}.clubCalGrid{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}.clubCalDay{min-height:140px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:9px;cursor:pointer}.clubCalDay.today{box-shadow:inset 0 0 0 3px #93c5fd;background:#eff6ff}.clubCalDay.other{background:#f8fafc}.clubCalEvents{display:grid;gap:6px;margin-top:8px}.clubCalBadge{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:10px;padding:7px 8px;text-align:left;display:grid;gap:3px;cursor:pointer;font-size:12px}.clubCalBadge:hover{background:#dbeafe}.clubCalBadge small{color:#475569}.clubCalEmpty{display:block;background:#f8fafc;color:#94a3b8;border-radius:9px;padding:7px 8px;font-size:12px}.clubCalendarMobile{display:none}.modalBackdrop{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:500;display:flex;align-items:center;justify-content:center;padding:18px}.modalCard{background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(15,23,42,.28);padding:20px;width:min(760px,96vw);max-height:84vh;overflow:auto}.clubDaySummary{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;margin-top:9px;display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;cursor:pointer}.clubDaySummary:hover{background:#f8fbff} @media(max-width:760px){.clubCalendarPc{display:none}.clubCalendarMobile{display:block;margin-top:12px}.modalBackdrop{align-items:flex-end;padding:10px}.modalCard{width:100%;max-height:88vh;padding:16px}.clubDaySummary{display:grid}.clubStatsTable{min-width:760px}} /* ===================== v1.7.0 PE87 스타일 전체 레이아웃 ===================== */ body{background:#f3f7fb;color:#25364a} .brandBox{border:1px solid #dbe3ef;border-radius:14px;padding:18px 16px;margin-bottom:14px;background:linear-gradient(180deg,#fff,#f8fbff)} .brandBox strong{display:block;font-size:17px;color:#1f2d3d}.brandBox span{display:block;margin-top:6px;font-size:12px;color:#7b8794} .topbar{position:sticky;top:0;z-index:20;border-bottom:1px solid #dbe3ef;background:rgba(255,255,255,.92);backdrop-filter:blur(8px)} .panel,.detail,.list{border-radius:16px;border:1px solid #d8e1ec;box-shadow:0 5px 18px rgba(15,23,42,.04)}.grid{grid-template-columns:360px minmax(0,1fr);gap:18px}.studentList{max-height:calc(100vh - 260px)}.studentBtn{min-height:64px}.studentBtn.active{background:#e7f3ff}.badge{box-shadow:0 4px 12px rgba(245,158,11,.16)}.detailTitle{color:#203143;border-bottom-color:#2597eb}.uploadBox{background:#f5fbff;border-color:#3ba5e8}.btn{border-radius:10px}.photo{border-radius:18px;background:#fbfdff} .pdfCropPanel{margin-top:16px;border:1px solid #bfdbfe;background:#f5fbff;border-radius:16px;padding:16px}.pdfCropHead{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.pdfCanvasWrap{position:relative;display:inline-block;max-width:100%;overflow:auto;border:1px solid #dbe3ef;border-radius:14px;background:#fff;padding:8px}.pdfCanvasWrap canvas{max-width:100%;height:auto;display:block}.cropBox{position:absolute;border:3px solid #f59e0b;background:rgba(245,158,11,.16);box-shadow:0 0 0 9999px rgba(15,23,42,.24);cursor:move;display:none}.cropHelp{font-size:13px;color:#64748b;margin-top:8px}.cropPreview{width:96px;height:118px;border:1px solid #dbe3ef;border-radius:12px;background:#fff;object-fit:cover} @media(max-width:920px){.brandBox{display:none}.topbar{top:0}.grid{grid-template-columns:1fr}.studentList{max-height:46vh}.pdfCropPanel{padding:12px}.pdfCropHead{align-items:stretch}.pdfCropHead .btn{flex:1}} /* ===================== v1.7.1 PE87 원본 UI 복제 강화 ===================== */ :root{ --pe87-navy:#2f4358; --pe87-navy-dark:#243648; --pe87-sky:#3498db; --pe87-bg:#f4f7fb; --pe87-line:#d9e1ea; --pe87-soft:#eef6ff; --pe87-text:#1f2d3d; --pe87-muted:#7a8795; } /* v1.15.24 — PC·iPad 진도표 입력 표 시각 체계 정돈 */ @media (min-width:769px){ .pe87SubjectPlanPanel, .pe87ProgressPanel{ padding:16px!important; border:1px solid #d8e5ef!important; background:linear-gradient(180deg,#fbfdff 0,#fff 120px)!important; } .pe87SubjectPlanPanel .tableWrap, .pe87ProgressPanel .tableWrap{ width:100%; max-width:100%; overflow:auto; border:1px solid #d4e2ed; border-radius:14px; background:#fff; box-shadow:0 10px 26px rgba(38,75,105,.08); } .pe87SubjectPlanPanel .dataTable, .pe87ProgressPanel .dataTable{ margin:0!important; border:0!important; border-collapse:separate!important; border-spacing:0!important; background:#fff!important; } .pe87SubjectPlanPanel .dataTable thead th, .pe87ProgressPanel .dataTable thead th{ position:sticky; top:0; z-index:3; height:48px; padding:11px 9px!important; border-top:0!important; border-left:0!important; border-right:1px solid #d7e6f1!important; border-bottom:2px solid #9fd0ef!important; background:linear-gradient(180deg,#edf8ff 0,#e5f2fb 100%)!important; color:#274b66!important; font-size:12.5px!important; font-weight:900!important; letter-spacing:-.15px; text-align:center!important; vertical-align:middle!important; } .pe87SubjectPlanPanel .dataTable thead th:last-child, .pe87ProgressPanel .dataTable thead th:last-child{border-right:0!important} .pe87SubjectPlanPanel .dataTable tbody td, .pe87ProgressPanel .dataTable tbody td{ height:64px; padding:9px 8px!important; border-top:0!important; border-left:0!important; border-right:1px solid #e3ebf2!important; border-bottom:1px solid #e3ebf2!important; background:#fff!important; text-align:center!important; vertical-align:middle!important; transition:background .14s ease; } .pe87SubjectPlanPanel .dataTable tbody tr:nth-child(even) td, .pe87ProgressPanel .dataTable tbody tr:nth-child(even) td{background:#fbfdff!important} .pe87SubjectPlanPanel .dataTable tbody tr:hover td, .pe87ProgressPanel .dataTable tbody tr:hover td{background:#f4faff!important} .pe87SubjectPlanPanel .dataTable tbody td:last-child, .pe87ProgressPanel .dataTable tbody td:last-child{border-right:0!important} .pe87SubjectPlanPanel .dataTable tbody tr:last-child td, .pe87ProgressPanel .dataTable tbody tr:last-child td{border-bottom:0!important} .pe87SubjectPlanPanel input:not([type="checkbox"]), .pe87SubjectPlanPanel select, .pe87SubjectPlanPanel textarea, .pe87ProgressPanel input:not([type="checkbox"]), .pe87ProgressPanel select, .pe87ProgressPanel textarea, .pe87ProgressPanel .progressDateDisplay{ width:100%!important; min-width:0!important; min-height:42px!important; padding:9px 10px!important; border:1px solid #cfdeea!important; border-radius:9px!important; background:#f8fbfe!important; color:#233f55!important; font-size:13px!important; line-height:1.35!important; box-shadow:inset 0 1px 2px rgba(32,70,100,.035)!important; transition:border-color .15s ease,box-shadow .15s ease,background .15s ease!important; } .pe87SubjectPlanPanel input::placeholder, .pe87SubjectPlanPanel textarea::placeholder, .pe87ProgressPanel input::placeholder{color:#9aaaba;opacity:1} .pe87SubjectPlanPanel input:focus, .pe87SubjectPlanPanel select:focus, .pe87SubjectPlanPanel textarea:focus, .pe87ProgressPanel input:focus, .pe87ProgressPanel select:focus, .pe87ProgressPanel textarea:focus{ outline:0!important; border-color:#2794dc!important; background:#fff!important; box-shadow:0 0 0 3px rgba(39,148,220,.13)!important; } .pe87SubjectPlanPanel input[type="checkbox"], .pe87ProgressPanel input[type="checkbox"]{ width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; margin:0!important; accent-color:#168ee0; cursor:pointer; } .pe87SubjectPlanPanel .pe87SubjectPlan{min-width:1080px!important;table-layout:fixed!important} .pe87SubjectPlan .planColCheck{width:44px} .pe87SubjectPlan .planColLesson{width:86px} .pe87SubjectPlan .planColTopic{width:19%} .pe87SubjectPlan .planColSkill{width:20%} .pe87SubjectPlan .planColActivity{width:29%} .pe87SubjectPlan .planColPrep{width:22%} .pe87SubjectPlanPanel .pe87SubjectPlan tbody td:nth-child(2)>b, .pe87ProgressPanel .pe87ClassProgress tbody td:nth-child(2)>strong{ display:inline-flex!important; align-items:center; justify-content:center; min-width:58px; min-height:30px; padding:5px 9px; border:1px solid #b7daf1; border-radius:999px; background:#eaf6fe; color:#197bb8; font-size:12px; font-weight:900; white-space:nowrap; } .pe87SubjectPlanPanel .pe87SubjectPlan textarea{height:54px!important;min-height:54px!important;resize:vertical!important} .subjectPlanActions, .pe87ProgressPanel .progressActions{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; margin-top:14px!important; padding-top:14px; border-top:1px solid #e1eaf1; } .subjectPlanActions .btn, .pe87ProgressPanel .progressActions .btn{ min-width:158px; min-height:42px; margin:0!important; border-radius:10px!important; font-size:13px!important; box-shadow:0 5px 13px rgba(38,75,105,.08); } .pe87ProgressPanel .pe87ClassProgress{min-width:1260px!important;table-layout:fixed!important} .pe87ClassProgress .progressColCheck{width:44px} .pe87ClassProgress .progressColLesson{width:86px} .pe87ClassProgress .progressColDate{width:286px} .pe87ClassProgress .progressColPeriod{width:96px} .pe87ClassProgress .progressColPlace{width:142px} .pe87ClassProgress .progressColSubject{width:136px} .pe87ClassProgress .progressColActivity{width:330px} .pe87ClassProgress .progressColMemo{width:140px} .pe87ProgressPanel .dateLine{grid-template-columns:minmax(142px,1fr) 64px 54px!important;gap:6px!important} .pe87ProgressPanel .dateLine .dateHint{ display:flex; align-items:center; justify-content:center; min-height:30px; padding:4px 5px; border-radius:999px; background:#edf7fd; color:#2789c5!important; font-size:11px!important; font-weight:900; } .pe87ProgressPanel .rowReset{ min-height:32px; padding:5px 6px!important; border:1px solid #f2c7c3!important; border-radius:8px!important; background:#fff3f1!important; color:#dc544a!important; font-size:11px!important; font-weight:900!important; } .pe87ProgressPanel .rowReset:hover{background:#ffe9e6!important} .pe87ProgressPanel .pe87ClassProgress td:nth-child(7) input{text-align:left!important} .studentPick.syncable{border-color:#b7daf1!important;background:#f1f9fe!important} .studentPick.syncable em{color:#1684c7!important;font-style:normal;font-weight:900} } html,body{height:100%;} body{background:var(--pe87-bg)!important;color:var(--pe87-text);font-size:14px;overflow-x:hidden;} .panel,.detail,.list{background:#fff!important;border:1px solid #d6e0eb!important;border-radius:6px!important;box-shadow:0 2px 8px rgba(15,23,42,.035)!important;} .panel{padding:18px!important;} .uploadBox{border:3px dashed #2f9be7!important;border-radius:12px!important;background:#f5fbff!important;color:#243648!important;padding:26px 18px!important;} .btn{border-radius:4px!important;padding:9px 14px!important;font-weight:900!important;background:#3498db!important;color:#fff!important;border:0!important;box-shadow:0 1px 2px rgba(15,23,42,.12)!important;} .btn.green{background:#2ecc71!important}.btn.danger{background:#e74c3c!important;color:#fff!important}.btn.secondary{background:#fff!important;color:#3498db!important;border:1px solid #d7e4ef!important} select,input,textarea{border:1px solid #d9e1ea!important;border-radius:4px!important;padding:8px 10px!important;background:#fff!important;font-size:14px!important;} textarea{min-height:72px!important;} .dataTable{border-collapse:collapse!important;background:#fff!important;min-width:980px;} .dataTable th{background:#f5f7fa!important;color:#25364a!important;font-weight:900!important;border:1px solid #d9e1ea!important;padding:10px 8px!important;} .dataTable td{border:1px solid #e1e7ef!important;padding:9px 8px!important;} .grid{grid-template-columns:290px minmax(0,1fr)!important;gap:14px!important;} .list{border-radius:6px!important;overflow:hidden!important;} .listHead{background:#fff!important;border-bottom:1px solid #d9e1ea!important;font-size:16px!important;padding:12px 14px!important;} .studentList{max-height:calc(100vh - 300px)!important;} .studentBtn{grid-template-columns:70px 1fr!important;min-height:54px!important;background:#fff!important;border-bottom:1px solid #d9e1ea!important;} .studentBtn.active{background:#e5f3ff!important;} .num{padding:16px 8px!important;border-right:1px solid #d9e1ea!important;color:#1f2d3d!important;} .name{padding:10px 12px!important;text-align:center!important;} .badge{border:2px solid #f0be00!important;background:#fff8d8!important;color:#825400!important;border-radius:999px!important;padding:7px 18px!important;box-shadow:0 4px 12px rgba(245,158,11,.20)!important;} .detail{padding:18px!important;} .detailTitle{text-align:center!important;font-size:18px!important;font-weight:900!important;border-bottom:3px solid #2396eb!important;margin:0 0 18px 0!important;padding-bottom:14px!important;color:#25364a!important;} .photo{width:138px!important;height:154px!important;border:2px dashed #d9e1ea!important;border-radius:10px!important;background:#fbfdff!important;} .field2{grid-template-columns:1fr 1fr!important;} .noteItem{border-radius:5px!important;border-left:4px solid #2f9be7!important;background:#fbfdff!important;} .calTitle{font-size:20px!important;color:#1f2d3d!important;} .calWeekHead{border-radius:0!important;background:#f5f7fa!important;} .calDay{min-height:128px!important;border-color:#e1e7ef!important;} .calDay.today{box-shadow:inset 0 0 0 3px #3498db!important;background:#fff!important;} .lessonBadge,.moreBadge,.mobileLesson{border-radius:5px!important;background:#e8f2ff!important;border-color:#cae0ff!important;color:#1d6eb2!important;} .clubCalDay{border-color:#e1e7ef!important;min-height:126px!important;}.clubCalWeek{border-radius:0!important;background:#f5f7fa!important}.clubCalBadge{border-radius:5px!important;background:#e8f2ff!important;color:#1d6eb2!important}.clubCalEmpty{border-radius:5px!important;background:#f8fafc!important}.clubDept{border-radius:6px!important}.clubDept.active{background:#e8f8ef!important;border-color:#2ecc71!important}.pdfCropPanel{border-radius:8px!important;background:#f5fbff!important}.pdfCanvasWrap{border-radius:6px!important}.cropPreview{border-radius:6px!important} /* PE87 스타일의 상단 위치/제목 여백 보정 */ #app > .panel:first-child, #app > .calendarHeader, #app > div:first-child{margin-top:0;} h1,h2,h3{letter-spacing:-.04em;color:#203143;} .hint{font-size:12px!important;color:#7d8894!important}.muted{color:#7d8894!important;} @media(max-width:920px){ .grid{grid-template-columns:1fr!important}.studentList{max-height:46vh!important}.field2{grid-template-columns:1fr!important}.profile{flex-direction:column!important}.photo{width:100%!important;height:220px!important}.dataTable{font-size:13px}.panel{padding:12px!important} } /* v1.7.2 PE87 좌측 아코디언/진도표 원본형 보정 */ .sideTree{margin:4px 0 8px 16px;border-left:2px dashed #d8e2ed;padding-left:10px;display:flex;flex-direction:column;gap:4px} .treeIndent{margin-left:12px;border-left:1px solid #e2e8f0;padding-left:8px;display:flex;flex-direction:column;gap:4px} .treeYear,.treeSemester,.treeItem{border:0;background:transparent;color:#334155;text-align:left;height:28px;padding:0 8px;border-radius:4px;font-weight:800;font-size:13px;cursor:pointer} .treeYear{background:#f1f5f9;color:#334155}.treeSemester{background:#eaf6ff;color:#2563eb}.treeSemester.active{background:#dff0ff}.treeItem{color:#475569}.treeItem.active{background:#3498db;color:#fff}.treeItem:hover,.treeYear:hover,.treeSemester:hover{filter:brightness(.98);background:#eef6ff} .pe87Crumb{color:#7a8795;font-size:13px;font-weight:800;margin-bottom:10px}.pe87PageHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.pe87PageHead h2{margin:0;font-size:20px}.pe87Meta{padding:12px!important;margin-bottom:12px;background:#fbfdff!important}.pe87Meta label{display:flex;align-items:center;gap:8px;margin:0}.pe87Meta input{height:34px;width:96px}.pe87SubjectPlan td textarea{min-height:42px;height:42px}.pe87SubjectPlan input,.pe87SubjectPlan textarea{text-align:left}.pe87ClassProgress .dateResetWrap{display:grid;grid-template-columns:1fr 54px;gap:6px;align-items:center}.pe87ClassProgress .rowReset{border:0;border-radius:4px;background:#e74c3c;color:#fff;font-size:12px;font-weight:900;padding:6px}.pe87ClassProgress .dateHint{font-size:12px;color:#3498db;margin-top:3px;text-align:center}.pe87ClassProgress input,.pe87ClassProgress select{text-align:center}.pe87ClassProgress td:nth-child(7) input{text-align:left}.pe87ClassProgress td:nth-child(8) input{text-align:center}.progressTable.dataTable{min-width:1280px}.pe87SubjectPlan.dataTable{min-width:1180px}.sideTabs .tab + .sideTree{margin-top:-3px;margin-bottom:8px} @media(max-width:920px){.sideTree{display:none}.pe87PageHead{align-items:flex-start;gap:10px}.pe87ClassProgress .dateResetWrap{grid-template-columns:1fr}.pe87ClassProgress .rowReset{width:100%}} /* v1.7.3 요청사항 반영: PE87 원본형 UI, 반별 색상, PAPS/수행평가 */ .lessonBadge,.mobileLesson{background:var(--class-color,#3498db)!important;border-color:var(--class-color,#3498db)!important;color:#fff!important} .lessonBadge b,.mobileLesson b{color:#fff!important}.lessonBadge:hover,.mobileLesson:hover{filter:brightness(.95)} .greenGuide{color:#18a957;font-size:13px;font-weight:900;margin-top:8px}.uploadBox.drag{background:#e8f6ff!important;box-shadow:0 0 0 4px rgba(52,152,219,.15)} .papsEmptyGuide{padding:0!important;overflow:hidden}.papsGuideHead{text-align:center;border-bottom:1px solid #d9e1ea;padding:10px;font-weight:900}.papsExportFake{width:100%;margin-top:20px;border:0;border-radius:4px;padding:15px;background:#2ecc71;color:#fff;font-size:16px;font-weight:900}.papsPanel{padding:0!important}.pe87Paps{min-width:1380px!important}.pe87Paps th{font-size:14px}.pe87Paps td{height:118px;vertical-align:middle}.pe87Paps .papsInput{width:70px!important;text-align:center;margin:2px}.dual{display:grid;grid-template-columns:1fr 1fr;gap:3px;justify-content:center}.quad{display:grid;grid-template-columns:1fr 1fr;gap:3px;max-width:150px;margin:auto}.genderToggle{border:1px solid #8fd3ff;background:#e6f5ff;color:#2385c4;border-radius:14px;padding:5px 12px;font-weight:900;cursor:pointer}.genderToggle.female{border-color:#ff9b91;background:#fff0ee;color:#e65043}.papsGrade{display:block;width:max-content;margin:5px auto 0;padding:3px 7px;border-radius:4px;color:#fff;font-size:11px;font-weight:900}.papsGrade.g1{background:#20b95a}.papsGrade.g2{background:#2ecc71}.papsGrade.g3{background:#f39c12}.papsGrade.g4{background:#e67e22}.papsGrade.g5{background:#e74c3c}.papsGrade.bmi{background:#f2c94c;color:#6b4b00;border-radius:12px}.papsDash{display:block;color:#7d8894;margin-top:5px}.bmiValue{display:block;font-weight:900}.summaryScore,.summaryGrade{font-size:16px;background:#fbfdff!important} .assessConfig{border:1px solid #d6e0eb;background:#fff;border-radius:6px;padding:12px;margin-bottom:12px}.assessConfigTitle{font-weight:900;margin-bottom:10px}.assessCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.assessCard{border:1px solid #d9e1ea;border-radius:6px;padding:10px;text-align:center}.assessCard b{display:block;margin-bottom:9px}.assessCard label{display:inline-flex;align-items:center;gap:5px;margin:0 5px}.assessCard input{width:60px;text-align:center}.pe87Assess{min-width:1100px!important}.pe87Assess td{height:72px}.scoreControl{display:grid;grid-template-columns:1fr 22px;gap:4px}.scoreControl input{text-align:center}.stepBtns{display:grid;gap:2px}.stepBtns button{border:1px solid #aad7f4;background:#eaf6ff;color:#248ac8;font-size:10px;padding:0;border-radius:3px}.stepBtns button:last-child{border-color:#ffc8c3;background:#fff0ee;color:#e74c3c}.scorePill{display:inline-block;margin-top:4px;padding:2px 9px;border-radius:12px;background:#eaf6ff;color:#52768d;font-size:11px}.assessTotal{background:#eef9ff!important} @media(max-width:920px){.pe87Paps,.pe87Assess{font-size:12px}.pe87Paps td{height:auto}.assessCards{grid-template-columns:1fr}.papsExportFake{font-size:14px}} /* v1.7.4 PE87 원본 화면 정밀 보정 */ .authHidden{display:none!important} .loginScreen{position:fixed;inset:0;z-index:9999;box-sizing:border-box;background:var(--pe-f-login-canvas);display:flex;align-items:center;justify-content:center;padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))} .loginCard{box-sizing:border-box;width:var(--pe-f-login-card-width);max-width:100%;background:var(--pe-f-color-surface);border-radius:var(--pe-f-login-card-radius);padding:var(--pe-f-login-card-padding-block-start) var(--pe-f-login-card-padding-inline) var(--pe-f-login-card-padding-block-end);text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.24)} .loginAvatar{box-sizing:border-box;width:var(--pe-f-login-avatar-size);height:var(--pe-f-login-avatar-size);margin:-6px auto 18px;border-radius:50%;border:4px solid var(--pe-f-login-accent);background:#344e66;color:#fff;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:0 5px 14px rgba(0,0,0,.18)} .loginCard h1{font-size:23px;margin:0 0 2px;color:#172b3d}.loginCard h2{font-size:29px;color:var(--pe-f-login-accent);margin:0 0 20px}.loginCard>input{box-sizing:border-box;width:100%;height:var(--pe-f-login-field-height);margin:6px 0;text-align:center;font-size:17px!important}.loginOptions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 2px}.loginCheck{box-sizing:border-box;min-height:38px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #d6e2ec;border-radius:7px;background:#f8fbfd;color:#344e66;font-size:14px;font-weight:800;cursor:pointer;user-select:none}.loginCard .loginCheck input[type="checkbox"]{box-sizing:border-box;width:18px;height:18px;margin:0;accent-color:var(--pe-f-login-accent);flex:0 0 auto}.loginCheck:has(input:checked){border-color:#75bff0;background:#edf8ff;color:#187fc0}.loginBtn{box-sizing:border-box;width:100%;height:48px;margin-top:10px;border:0;border-radius:5px;background:var(--pe-f-login-button);color:#fff;font-size:17px;font-weight:900}.loginMsg{min-height:20px;margin-top:10px;color:var(--pe-f-color-danger);font-size:13px} .panel{border-radius:6px!important;box-shadow:none!important}.pe87PageHead h2{font-size:22px!important}.pe87Crumb{font-size:13px!important} .studentWaitingGrid{display:grid;grid-template-columns:360px 1fr;gap:12px}.waitingCard{min-height:360px;border:1px solid #d9e1ea;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.waitingIcon{font-size:42px;margin-bottom:22px}.waitingCard h3{font-size:18px;margin:0 0 20px}.waitingCard p{color:#8b96a3;line-height:2;font-size:15px} .pe87Paps th,.pe87Paps td{text-align:center!important;vertical-align:middle!important}.pe87Paps td>b{display:block;text-align:center;margin-top:4px}.pe87Paps .dual,.pe87Paps .quad{justify-content:center;align-items:center}.pe87Paps .papsInput{display:block;margin:2px auto!important}.pe87Paps .papsGrade{margin:5px auto 0!important;text-align:center}.pe87Paps .papsDash{text-align:center}.papsCenter{text-align:center!important}.summaryScore,.summaryGrade{text-align:center!important} .assessConfigTitle{font-size:14px}.assessCard{text-align:center!important}.assessCard label{justify-content:center}.pe87Assess th,.pe87Assess td{text-align:center!important;vertical-align:middle!important}.pe87Assess .scoreControl{max-width:100%;margin:auto}.pe87Assess .scorePill{margin-left:auto;margin-right:auto}.assessTotal{text-align:center!important;line-height:1.5}.assessTotal small{font-size:12px;color:#172b3d} .calGrid{grid-auto-rows:minmax(128px,auto)} @media(max-width:920px){.studentWaitingGrid{grid-template-columns:1fr}.waitingCard{min-height:260px}} /* v1.7.5 안정화: 대기화면, PAPS/수행평가 정렬, 관리자 정돈 */ .sync{display:none!important} .assessSettingRow{display:grid;grid-template-columns:auto 92px auto 92px;gap:8px;align-items:center;justify-content:center} .numberStepper{display:grid;grid-template-columns:1fr 22px;gap:3px;align-items:stretch} .numberStepper input{width:66px!important;height:36px!important;padding:5px!important;text-align:center!important} .numberStepper>span{display:grid;grid-template-rows:1fr 1fr;gap:2px} .cfgArrow{border:1px solid #b9d9ee;border-radius:3px;background:#edf7fd;color:#1688c8;font-size:9px;line-height:1;padding:0;cursor:pointer} .cfgArrow[data-dir="down"]{background:#fff1ef;color:#e74c3c;border-color:#ffc9c4} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .grid2>.panel{padding:20px!important;min-height:100%} .formGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-bottom:16px} .formGrid label,.grid2 label{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:10px} .formGrid input,.grid2 input,.grid2 textarea{width:100%;box-sizing:border-box} .dangerPanel .row{gap:10px;align-items:center} .pe87Paps td,.pe87Paps th,.pe87Assess td,.pe87Assess th{text-align:center!important;vertical-align:middle!important} .pe87Paps td>*,.pe87Assess td>*{margin-left:auto;margin-right:auto} .pe87Paps .dual,.pe87Paps .quad{justify-content:center!important;margin-left:auto!important;margin-right:auto!important} .pe87Paps .papsGrade,.pe87Paps .papsDash,.pe87Paps td>b{display:block;text-align:center!important;margin-left:auto!important;margin-right:auto!important} .studentWaitingGrid .waitingCard{border-radius:6px!important;box-shadow:none!important} @media(max-width:920px){.grid2{grid-template-columns:1fr}.formGrid{grid-template-columns:1fr}.formGrid label,.grid2 label{grid-template-columns:1fr}.assessSettingRow{grid-template-columns:auto 88px auto 88px}} .saveNotice{position:fixed;left:50%;top:24px;transform:translate(-50%,-20px);opacity:0;z-index:9999;background:#fff;border:1px solid #b8c7d9;border-radius:12px;box-shadow:0 10px 28px rgba(15,23,42,.2);padding:14px 22px;display:flex;gap:9px;align-items:center;font-size:16px;transition:.2s}.saveNotice.show{opacity:1;transform:translate(-50%,0)} .clickableProfile{cursor:pointer}.pe87Logo img,.loginAvatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.logoFallback{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;font-size:20px}.logoFallback small{font-size:9px} .miniBtn:hover{filter:brightness(.9);transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.18)} .adminTopBar{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border:1px solid #9ccbf5;background:#eaf5ff;border-radius:6px;margin-bottom:18px}.adminGrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.adminGrid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.adminCard h2{margin:0 0 18px;font-size:20px}.adminAddRow,.adminListRow{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:10px}.adminBasicFields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.adminBasicFields label{display:flex;flex-direction:column;gap:6px}.toggleGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 18px}.classGrid{grid-template-columns:repeat(6,1fr)}.gradeToggle,.classToggle{border:1px solid #cbd5e1;background:#fff;border-radius:6px;padding:10px;cursor:pointer}.gradeToggle.active,.classToggle.active{background:#3498db;color:#fff;border-color:#3498db}.adminToggleTitle{font-weight:700;margin-top:8px}.resetInline{display:flex;flex-wrap:wrap;gap:8px}.attendanceControls{display:flex;align-items:end;gap:12px;margin-bottom:14px}.attendanceControls label{display:flex;flex-direction:column;gap:6px}.clubAttendanceTable th,.clubAttendanceTable td{text-align:center;vertical-align:middle;white-space:nowrap}.clubAttendanceTable input,.clubAttendanceTable select{width:100%;box-sizing:border-box} @media(max-width:1000px){.adminGrid3{grid-template-columns:1fr}.adminGrid2{grid-template-columns:1fr}.classGrid{grid-template-columns:repeat(4,1fr)}} /* v1.15.52 체육 교과 종목 순서·홈 아이콘 관리 */ .adminSubjectCard .adminSubjectRow{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-bottom:10px;border-bottom:1px solid #e8eef5} .adminSubjectCard .adminSubjectRow .adminSubjectInput{min-width:0} .adminSubjectIconHint{margin:-8px 0 13px!important} .adminSubjectIconField{grid-column:1/-1;display:grid!important;grid-template-columns:minmax(120px,1fr) minmax(100px,.78fr);align-items:center;gap:7px;width:auto;margin:0!important} .adminSubjectIconField>span{grid-column:1/-1;color:#577084;font-size:11px;font-weight:900;white-space:nowrap} .adminSubjectIconSelect,.adminSubjectIconCustom{width:100%;min-width:0;height:38px;box-sizing:border-box;border-color:#cdddea!important;background-color:#f8fbfe!important;font-size:13px!important} .adminSubjectIconSelect{padding:5px 28px 5px 9px!important;cursor:pointer} .adminSubjectIconCustom{padding:5px 9px!important;text-align:center} .adminSubjectIconCustom::placeholder{color:#91a3b2;font-size:11px} .adminSubjectActions{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0} .adminSubjectMove{width:38px;min-width:38px;height:38px;padding:0;border:1px solid #bfd7ec;border-radius:7px;background:#f4f9fd;color:#287fbb;font-size:13px;font-weight:900;line-height:1;cursor:pointer;touch-action:manipulation} .adminSubjectMove:hover:not(:disabled){background:#e7f4ff;border-color:#70b6e6} .adminSubjectMove:focus-visible{outline:3px solid rgba(52,152,219,.25);outline-offset:1px} .adminSubjectMove:disabled{opacity:.35;cursor:default} .adminSubjectActions .adminSubjectDel{min-height:38px;padding:7px 12px;white-space:nowrap} @media(max-width:600px){.adminSubjectCard .adminSubjectRow{grid-template-columns:minmax(70px,1fr) auto;gap:7px}.adminSubjectCard .adminSubjectInput{grid-column:1}.adminSubjectIconField{grid-template-columns:1fr 1fr;gap:6px}.adminSubjectIconField>span{grid-column:1/-1}.adminSubjectIconSelect,.adminSubjectIconCustom{height:40px}.adminSubjectActions{grid-column:2;width:auto}.adminSubjectMove{width:38px;min-width:38px;height:40px}.adminSubjectActions .adminSubjectDel{min-width:64px;min-height:40px;padding-inline:9px}} /* v1.7.7 학생관리/PDF 크롭/수행평가 정밀 개선 */ .studentDetailHero{text-align:center}.studentDetailHero .detailTitle{max-width:100%;margin-bottom:16px}.heroPhoto{width:132px;height:132px;margin:0 auto;border:4px solid #2f9be7;border-radius:50%;background:#9aa8aa;box-shadow:0 5px 14px rgba(0,0,0,.16);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}.heroPhoto img{width:100%;height:100%;object-fit:cover}.heroPhotoFallback{width:100%;height:100%;align-items:center;justify-content:center;gap:5px;color:#fff}.heroPhotoActions{display:flex;justify-content:center;align-items:center;gap:8px;margin:12px 0 18px}.linkBtn{border:0;background:transparent;color:#2f9be7;font-weight:800;cursor:pointer}.orangeBtn{background:#f39c12!important;color:#fff!important;border-color:#f39c12!important}.studentInfoCard{border:1px solid #d9e1ea;border-radius:7px;background:#fafcff;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.studentInfoCard input,.studentInfoCard select{text-align:center;width:100%;box-sizing:border-box}.studentInfoSave{grid-column:1/-1;background:#3498db!important;color:#fff!important}.studentSectionRule{margin:18px 0;border:0;border-top:2px dashed #d7dde5}.studentNoteRow{display:grid;grid-template-columns:145px 1fr 88px;gap:8px}.studentNoteList{margin-top:12px}.photoRosterTools{margin-top:18px;border:1px solid #d7e9fb;background:linear-gradient(135deg,#f8fcff,#eef7ff);border-radius:10px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}.photoRosterTools p{margin:5px 0 0;color:#7f8c8d;font-size:12px}.photoRosterModal{position:fixed;inset:0;background:rgba(15,23,42,.72);z-index:20000;display:none;align-items:center;justify-content:center;padding:18px}.photoRosterModal.show{display:flex}.photoRosterDialog{width:min(1180px,96vw);height:min(900px,92vh);background:#fff;border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden}.photoRosterHead{padding:15px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;font-size:18px}.photoRosterBody{flex:1;display:grid;grid-template-columns:1fr 320px;min-height:0}.photoRosterCanvasArea{background:#f1f5f9;overflow:auto;padding:18px;display:flex;justify-content:center;align-items:flex-start}.photoRosterSide{border-left:1px solid #e5e7eb;padding:16px;overflow:auto}.photoStepCard{border:1px solid #dfe6e9;border-radius:12px;padding:14px;margin-bottom:12px;background:#fbfdff}.photoStepCard h4{margin:0 0 10px}.photoRosterPreview{width:132px;height:160px;margin:8px auto 12px;border:2px dashed #b3d7f7;border-radius:12px;display:block;object-fit:cover;background:#f8fbff}.photoStepCard .btn.green{width:100%}.photoRosterModal .pdfCanvasWrap{padding:0;border:0;border-radius:0;box-shadow:0 6px 24px rgba(0,0,0,.18)}.photoRosterModal .cropBox{border-color:#2ecc71;background:rgba(46,204,113,.14)} .pe87Assess .scoreControl{display:flex!important;align-items:center;justify-content:center;gap:5px;max-width:100%!important}.pe87Assess .scoreControl input{width:calc(100% - 32px)!important;min-width:72px}.pe87Assess .stepBtns{flex:0 0 22px}.pe87Assess .assessTotal b{white-space:nowrap}.saveNotice{top:28px!important;background:#fff!important;border:1px solid #a9bfd3!important;border-radius:10px!important;padding:13px 20px!important} @media(max-width:920px){.studentInfoCard{grid-template-columns:1fr}.studentNoteRow{grid-template-columns:1fr}.photoRosterBody{grid-template-columns:1fr}.photoRosterSide{border-left:0;border-top:1px solid #e5e7eb}.photoRosterDialog{height:95vh}} /* v1.7.8 auth flash / class PDF / academic summary */ body.auth-pending .pe87Top,body.auth-pending .pe87Shell{display:none!important} body.auth-pending{background:#2f465d;min-height:100vh} .classPdfPanel{border:1px solid #cbd8e6;border-radius:10px;background:#eef8ff;padding:16px} .classPdfIntro b{font-size:17px}.classPdfIntro p{margin:5px 0 12px;color:#748398} .classPdfToolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto minmax(180px,260px) auto;gap:10px;align-items:center} .classPdfWorkspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;margin-top:14px;align-items:start} .classPdfWorkspace .pdfCanvasWrap{min-height:320px;max-height:620px;overflow:auto;background:#fff;border:1px solid #cfd9e5;border-radius:8px;position:relative} .classPdfWorkspace canvas{display:block;max-width:100%;height:auto;margin:auto} .classPdfWorkspace aside{display:flex;flex-direction:column;gap:10px}.classPdfWorkspace .photoRosterPreview{width:100%;min-height:180px;object-fit:contain;background:#fff;border:1px solid #cfd9e5;border-radius:8px} .studentAcademicSummary{border:1px solid #d4dde8;border-radius:8px;background:#fff;overflow:hidden} .academicGrid{display:grid;grid-template-columns:repeat(9,minmax(90px,1fr))}.academicGrid>div{padding:12px 8px;text-align:center;border-right:1px solid #e0e6ee}.academicGrid>div:last-child{border-right:0}.academicGrid span{display:block;color:#65758a;font-size:12px;margin-bottom:6px}.academicGrid b{font-size:14px}.academicTotal{background:#eef8ff} .miniAcademicTable{width:100%;border-collapse:collapse}.miniAcademicTable th,.miniAcademicTable td{border:1px solid #dce3eb;padding:10px;text-align:center}.miniAcademicTable th{background:#f3f6fa} .scoreControl{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important}.scoreControl .assessInput{width:110px!important;text-align:center!important}.scoreControl .stepBtns{position:static!important;display:flex!important;flex-direction:column!important;gap:2px!important}.assessTotal b{white-space:nowrap!important;display:inline-block!important} @media(max-width:900px){.classPdfToolbar{grid-template-columns:1fr 1fr}.classPdfWorkspace{grid-template-columns:1fr}.academicGrid{grid-template-columns:repeat(2,1fr)}} /* v1.7.9: 반 단위 PDF 사진 자르기 모달 */ .classPdfLauncher{display:flex;align-items:center;justify-content:space-between;gap:20px} .pdfCropModal{position:fixed;inset:0;z-index:10050;background:rgba(25,38,55,.74);display:flex;align-items:center;justify-content:center;padding:20px} .pdfCropModal.hidden{display:none!important} .pdfCropDialog{width:min(1180px,96vw);height:min(820px,94vh);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.35);display:flex;flex-direction:column} .pdfCropHeader{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #d5dde7;background:#fff} .pdfCropHeader h3{margin:0;font-size:18px} .pdfCropBody{display:grid;grid-template-columns:minmax(0,1fr) 290px;min-height:0;flex:1;background:#cfd4da} .pdfCropStage{padding:14px;min-width:0;min-height:0;overflow:auto} .pdfCropStage .pdfCanvasWrap{position:relative;background:#eee;min-height:600px;display:flex;align-items:flex-start;justify-content:center;overflow:auto} .pdfCropStage canvas{display:block;max-width:100%;height:auto;background:white;box-shadow:0 2px 10px rgba(0,0,0,.12)} .pdfCropSteps{background:#fff;padding:12px;overflow:auto;display:flex;flex-direction:column;gap:10px} .pdfCropSteps section{border:1px solid #d9e1ea;border-radius:12px;padding:12px;background:#fbfcfd} .pdfCropSteps h4{font-size:16px;margin:0 0 10px}.pdfCropSteps label{display:block;font-weight:700;margin:8px 0 4px}.pdfCropSteps select,.pdfCropSteps input{width:100%} .pdfCropSteps .photoRosterPreview{width:130px;height:170px;object-fit:cover;margin:4px auto 10px;display:block;border:2px dashed #82c9ff;border-radius:8px;background:#fff} .pdfCropSteps .btn{width:100%;margin-top:7px}.pdfCropSteps .row .btn{width:auto;flex:1} .academicToolbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:10px}.academicToolbar select{width:auto;min-width:100px} .papsStudentSummary td{text-align:center;vertical-align:middle}.papsStudentSummary .papsGrade{display:block;width:max-content;margin:6px auto 0} @media(max-width:900px){.pdfCropModal{padding:0}.pdfCropDialog{width:100vw;height:100vh;border-radius:0}.pdfCropBody{grid-template-columns:1fr}.pdfCropSteps{max-height:45vh}.classPdfLauncher{align-items:stretch;flex-direction:column}} /* v1.8.0 진도표·학생관리·PDF·수행평가 안정화 */ .studentRosterUpload{cursor:pointer;margin-bottom:12px}.studentRosterUpload.drag,.pdfDropZone.drag{background:#e5f4ff!important;border-color:#168fe3!important}.studentRosterTools{display:flex;align-items:center;gap:12px;justify-content:flex-start;border:1px solid #d7e0ea;border-radius:7px;padding:10px 14px;margin-bottom:14px;background:#fff}.studentRosterTools .hint{margin-left:auto}.statusDot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#16a34a;margin-right:8px} .pdfDropZone{transition:.15s}.pdfDropZone input{cursor:pointer} .dateLine{display:grid;grid-template-columns:minmax(160px,1fr) 74px 58px;align-items:center;gap:7px}.dateLine .dateHint{font-size:12px;color:#3498db;text-align:center;white-space:nowrap}.progressActions{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.progressActions .btn{min-width:140px} .genderSegment{display:flex;border:1px solid #d4dde8;border-radius:8px;overflow:hidden;background:#fff;min-height:40px}.genderSegment button{flex:1;border:0;border-right:1px solid #d4dde8;background:#fff;color:#526273;font-weight:800;cursor:pointer}.genderSegment button:last-child{border-right:0}.genderSegment button.active.male{background:#e8f5ff;color:#1688c8}.genderSegment button.active.female{background:#fff0ef;color:#e74c3c}.genderSegment button.active.neutral{background:#eef2f5;color:#5f6f7f} .academicEmpty{min-height:66px;display:flex;align-items:center;justify-content:center;border:1px solid #dce3eb;border-radius:7px;background:#f8fafc;color:#8a97a6;text-align:center;font-size:14px} @media(max-width:920px){.studentRosterTools{align-items:flex-start;flex-wrap:wrap}.studentRosterTools .hint{margin-left:0;width:100%}.dateLine{grid-template-columns:1fr 64px 52px}.progressActions{gap:8px;flex-direction:column}.progressActions .btn{width:100%}} /* v1.8.1 refinements */ .lessonBadge{background:var(--class-color)!important;border-color:var(--class-color)!important;color:#fff!important;font-weight:800}.lessonBadge b{color:#fff!important}.mobileLesson{border-left:7px solid var(--class-color)!important}.calDetailItem{border-left:7px solid var(--class-color)!important}.calEvents{gap:4px}.calDetailItem b{font-weight:900} .pe87ClassProgress th,.pe87ClassProgress td{text-align:center!important;vertical-align:middle!important}.pe87ClassProgress td input,.pe87ClassProgress td select{margin-left:auto!important;margin-right:auto!important}.pe87ClassProgress td:nth-child(7) input{text-align:center!important} .scorePill{white-space:nowrap}.pe87Assess td> .scoreControl{width:150px;max-width:150px!important;margin:0 auto}.pe87Assess .assessInput{width:112px!important;box-sizing:border-box}.pe87Assess .stepBtns{width:24px!important}.pe87Assess .stepBtns button{width:24px!important;height:22px!important}.pe87Assess td{text-align:center!important}.assessTotal b{white-space:nowrap!important} .adminGridBalanced{grid-template-columns:minmax(320px,.8fr) minmax(360px,1.15fr) minmax(360px,1.15fr)!important;align-items:start}.adminGridBalanced .adminCard{min-width:0}.resetGrid3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.resetGrid3 .btn{width:100%;white-space:nowrap}.studentList{min-height:420px} @media(max-width:1200px){.adminGridBalanced{grid-template-columns:1fr 1fr!important}.adminGridBalanced .adminCard:first-child{grid-column:1/-1}.resetGrid3{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:760px){.adminGridBalanced{grid-template-columns:1fr!important}.resetGrid3{grid-template-columns:1fr!important}} /* v1.8.2 precise polish */ .overallGradeBadge{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:5px 10px;border-radius:999px;color:#fff;font-weight:900;font-size:13px;line-height:1;box-shadow:0 2px 6px rgba(15,23,42,.12)} .overallGradeBadge.grade1{background:#16a34a}.overallGradeBadge.grade2{background:#22c55e}.overallGradeBadge.grade3{background:#f59e0b}.overallGradeBadge.grade4{background:#f97316}.overallGradeBadge.grade5{background:#ef4444} .academicToolbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 8px 16px!important;margin-bottom:2px}.academicToolbar select{min-width:100px;height:40px;border-radius:6px} .grid{align-items:start!important}.grid>.list{align-self:start!important}.studentList{min-height:0!important} .adminGridBalanced{grid-template-columns:minmax(390px,1.02fr) minmax(440px,1.22fr) minmax(320px,.92fr)!important;gap:18px!important} .adminYearCard,.adminClassCard,.adminSubjectCard{overflow:hidden!important} .adminYearTable{table-layout:fixed;width:100%}.adminYearTable th:last-child,.adminYearTable td:last-child{width:86px} .adminBasicFields{grid-template-columns:1fr 1fr!important}.adminBasicFields label:last-child{grid-column:1/-1} .classHeadTeachers{margin-top:18px;border-top:1px solid #dbe3ec;padding-top:14px}.classHeadTeachers h3{margin:0 0 10px;font-size:15px}.headTeacherRow{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:10px;margin:7px 0}.headTeacherRow span{font-weight:800;color:#475569}.headTeacherRow input{width:100%;box-sizing:border-box} .adminSubjectCard .adminListRow input{min-width:0}.adminSubjectCard .adminAddRow input{min-width:0} @media(max-width:1250px){.adminGridBalanced{grid-template-columns:1fr 1fr!important}.adminSubjectCard{grid-column:1/-1}} @media(max-width:900px){.adminGridBalanced{grid-template-columns:1fr!important}.adminSubjectCard{grid-column:auto}.headTeacherRow{grid-template-columns:90px 1fr}} /* v1.8.3 */ #app .grid{align-items:stretch!important} #studentDetail{min-height:520px} .adminGridBalanced{grid-template-columns:minmax(430px,1.08fr) minmax(500px,1.32fr) minmax(330px,.88fr)!important} .adminYearTable{width:100%!important;table-layout:fixed}.adminYearTable th:last-child,.adminYearTable td:last-child{width:88px} .adminBasicFields{grid-template-columns:1fr 1fr!important}.adminTitleField{grid-column:1/-1} .headTeacherDisplayGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .headTeacherDisplay{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #dbe3ec;border-radius:7px;padding:9px 11px;background:#f8fbff} .headTeacherDisplay span{font-weight:800;color:#475569;white-space:nowrap}.headTeacherDisplay b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .adminNoSubjects{padding:12px;border:1px dashed #cbd5e1;border-radius:7px;text-align:center;margin-bottom:10px} @media(max-width:1320px){.adminGridBalanced{grid-template-columns:1fr 1.18fr!important}.adminSubjectCard{grid-column:1/-1}.headTeacherDisplayGrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){.adminGridBalanced{grid-template-columns:1fr!important}.adminSubjectCard{grid-column:auto}.headTeacherDisplayGrid{grid-template-columns:1fr}} /* v1.8.4 stability fixes */ .clubAttendanceTable .clubAttRow{display:table-row!important;border:0!important;border-radius:0!important;padding:0!important;background:transparent!important} .clubAttendanceTable{min-width:1180px!important;table-layout:auto!important} .clubAttendanceTable th,.clubAttendanceTable td{padding:9px 8px!important;text-align:center!important;vertical-align:middle!important} .clubAttendanceTable td:nth-child(1){min-width:54px}.clubAttendanceTable td:nth-child(2){min-width:82px}.clubAttendanceTable td:nth-child(3){min-width:92px}.clubAttendanceTable td:nth-child(4){min-width:130px}.clubAttendanceTable td:nth-child(5){min-width:110px}.clubAttendanceTable td:nth-child(6){min-width:130px} .clubAttendanceTable .attStatus{min-width:98px!important}.clubAttendanceTable .attMemo{min-width:118px!important} .classHeadTeacherTable{margin-top:18px}.classHeadTeacherTable h2{margin:0 0 14px;font-size:18px}.classHeadTeacherTable .dataTable th,.classHeadTeacherTable .dataTable td{text-align:center!important} .treeYear.active{background:#eef6fd!important} /* v1.8.5 settings/accordion/PDF/assessment refinements */ .treeSemester{color:#334155!important;background:#eaf6ff!important} .treeSemester.active{color:#2563eb!important;background:#dff0ff!important} .adminGridBalanced{align-items:stretch!important} .adminGridBalanced>.adminCard{height:100%;display:flex;flex-direction:column;box-sizing:border-box} .adminSubjectCard #adminSubjectRows{flex:1} .adminYearList{display:grid;gap:8px;margin:10px 0 14px} .adminYearItem{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #d8e1ec;background:#f8fafc;border-radius:8px;padding:9px 10px;min-height:42px} .adminYearActions{display:flex;gap:6px;flex-wrap:wrap}.adminYearActions .btn{padding:7px 10px;min-height:32px} .semesterManager{border-top:1px solid #d8e1ec;margin-top:12px;padding-top:14px} .semesterManagerHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .semesterManagerHead>div{display:flex;gap:7px;flex-wrap:wrap} .semesterManageBtn{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:7px;padding:8px 12px;font-weight:800;cursor:pointer} .semesterManageBtn.active{background:#3498db;border-color:#3498db;color:#fff} .semesterActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} .adminBasicFields{margin-top:auto!important;padding-top:16px} .pdfCropDialog{border-radius:18px!important} .pdfCropHeader{background:linear-gradient(180deg,#ffffff,#f7fbff)!important} .pdfCropBody{background:#dfe7ef!important} .pdfCropSteps{background:#f8fbff!important;padding:14px!important} .pdfCropSteps section{border-radius:14px!important;background:#fff!important;box-shadow:0 4px 14px rgba(30,64,175,.06)} .pdfCropSteps h4{display:flex;align-items:center;gap:7px;color:#203143} .pdfCropSteps section:nth-child(1) h4::before{content:'📂'} .pdfCropSteps section:nth-child(2) h4::before{content:'📄'} .pdfCropSteps section:nth-child(3) h4::before{content:'👨‍🎓'} .pdfCropSteps section:nth-child(4) h4::before{content:'🖼️'} .previewFrame{position:relative;min-height:188px;border:2px dashed #82c9ff;border-radius:12px;background:linear-gradient(135deg,#f8fcff,#eef8ff);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px} .previewFrame .photoRosterPreview{margin:0!important;border:0!important;width:130px!important;height:170px!important;position:relative;z-index:2;background:#fff} .previewFrame .photoRosterPreview:not([src]),.previewFrame .photoRosterPreview[src=""]{display:none} .previewPlaceholder{color:#7890a8;font-size:13px;text-align:center;padding:18px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .previewFrame .photoRosterPreview[src]:not([src=""])+.previewPlaceholder{display:none} .pdfSaveStatus{height:24px;text-align:center;color:#16a34a;font-weight:900;opacity:0;transition:.2s} .pdfSaveStatus.show{opacity:1} .studentList{box-sizing:border-box!important} .miniAcademicTable tbody td{padding-top:12px!important;padding-bottom:16px!important} #studentAssessTable{padding-bottom:6px} @media(max-width:900px){.semesterActions{grid-template-columns:1fr}.adminYearItem{align-items:flex-start;flex-direction:column}.adminYearActions{width:100%}.adminYearActions .btn{flex:1}} /* v1.8.6 스포츠클럽 명단 가로 정렬 */ .clubMemberHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .clubMemberEntry{display:grid;grid-template-columns:80px 80px 90px minmax(140px,1fr) 100px auto;gap:8px;align-items:center;margin-bottom:10px} .clubMemberEntry input,.clubMemberEntry select{width:100%;min-width:0;box-sizing:border-box} .clubImportRow{display:flex;align-items:center;gap:8px;margin-bottom:10px} .clubImportRow select{min-width:110px} .clubRosterGradePicker{display:flex;align-items:center;gap:7px;margin:0;padding:5px 7px 5px 10px;border:1px solid #d4deea;border-radius:8px;background:#f8fbfe;color:#526579;font-size:12px;font-weight:900} .clubRosterGradePicker select{height:34px!important;min-width:82px!important;margin:0!important;padding:0 28px 0 9px!important;border-color:#c5d3e1!important;background-color:#fff!important;font-size:13px!important;font-weight:900!important} .clubMemberTableWrap{max-height:320px;overflow:auto;border:1px solid #dbe3ee;border-radius:8px} .clubMemberTable{width:100%;min-width:560px;margin:0} .clubMemberTable th,.clubMemberTable td{text-align:center!important;vertical-align:middle!important;white-space:nowrap} .clubMemberTable .clubMemberDelete{padding:6px 12px} @media(max-width:900px){.clubMemberEntry{grid-template-columns:repeat(3,minmax(0,1fr))}.clubMemberEntry .btn{width:100%}} @media(max-width:600px){.clubMemberEntry{grid-template-columns:1fr 1fr}.clubMemberHead{align-items:flex-start}.clubImportRow{flex-wrap:wrap}} /* v1.8.7 curriculum isolation + sports club layout */ .clubWorkGrid{grid-template-columns:minmax(620px,1.05fr) minmax(760px,1.55fr)!important;align-items:start!important} .clubWorkGrid>.panel{min-width:0!important;overflow:hidden} .clubMemberPanel{min-width:620px!important} .clubMemberEntry{display:grid!important;grid-template-columns:78px 78px 86px minmax(150px,1fr) 96px 108px!important;gap:8px!important;align-items:center!important} .clubMemberEntry>*{min-width:0!important;width:100%!important;margin:0!important} .clubImportRow{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important} .clubMemberTableWrap{width:100%!important;overflow:auto!important} @media(max-width:1450px){.clubWorkGrid{grid-template-columns:1fr!important}.clubMemberPanel{min-width:0!important}} @media(max-width:760px){.clubMemberEntry{grid-template-columns:repeat(2,minmax(0,1fr))!important}} /* v1.8.8 sidebar click isolation + stacked sports club panels */ .clubMemberPanel,.clubAttendancePanel{width:100%;min-width:0!important;overflow:hidden} .clubAttendancePanel .tableScroll{width:100%;overflow-x:auto} .clubAttendancePanel .clubAttendanceTable{width:100%;min-width:1180px!important} /* v1.15.17 — PC/iPad 명단 업로드 컨트롤 최종 격리 * 화면 폭 및 별도 데스크톱 CSS 로딩 여부와 무관하게 이 행만 안전하게 세로 정렬합니다. */ .clubMemberPanel #clubMemberBox>.clubSchoolRosterImportRow{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-auto-flow:row!important; align-items:stretch!important; gap:7px!important; width:100%!important; min-width:0!important; margin:0 0 8px!important; box-sizing:border-box!important; } .clubMemberPanel #clubMemberBox>.clubSchoolRosterImportRow>*{ grid-column:1!important; position:static!important; float:none!important; flex:none!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; box-sizing:border-box!important; } .clubMemberPanel #clubMemberBox>.clubSchoolRosterImportRow>.clubRosterGradePicker{ display:grid!important; grid-template-columns:minmax(0,1fr) 104px!important; align-items:center!important; gap:10px!important; min-height:42px!important; padding:4px 7px 4px 11px!important; white-space:nowrap!important; } .clubMemberPanel #clubMemberBox>.clubSchoolRosterImportRow>.clubRosterGradePicker>span{ display:block!important; position:static!important; width:auto!important; min-width:max-content!important; writing-mode:horizontal-tb!important; text-orientation:mixed!important; white-space:nowrap!important; word-break:keep-all!important; line-height:1.3!important; } .clubMemberPanel #clubMemberBox>.clubSchoolRosterImportRow>.clubRosterGradePicker>#schoolRosterGrade{ display:block!important; position:static!important; grid-column:2!important; width:104px!important; max-width:104px!important; min-width:104px!important; height:34px!important; margin:0!important; } .clubMemberPanel #clubMemberBox>.clubSchoolRosterImportRow>.btn{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:42px!important; white-space:nowrap!important; writing-mode:horizontal-tb!important; word-break:keep-all!important; } .clubMemberPanel #clubMemberBox>.clubSchoolRosterImportRow>.clubSchoolRosterHint{ display:block!important; min-height:0!important; padding:5px 8px!important; line-height:1.45!important; white-space:normal!important; word-break:keep-all!important; overflow-wrap:anywhere!important; } .clubMemberPanel #clubMemberBox>.clubSchoolRosterImportRow>#schoolRosterFile{ display:none!important; } /* v1.8.9: 스포츠클럽 출석 컨트롤 하단선 정렬 */ .attendanceControls{display:flex!important;align-items:flex-end!important;gap:16px!important;flex-wrap:wrap} .attendanceControls label{display:flex!important;flex-direction:column!important;gap:8px!important;margin:0!important} .attendanceControls input,.attendanceControls select{height:46px!important;box-sizing:border-box!important} .attendanceControls>.btn{height:46px!important;min-height:46px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0 20px!important} /* 설정: 불필요한 학교명/프로그램 기본정보 대신 헤더 문구 관리 */ .adminBrandFields{margin-top:auto;padding-top:16px;border-top:1px solid #dbe4ee;display:grid;gap:10px} .adminBrandFields h3{margin:0;font-size:16px}.adminBrandFields .hint{margin:0 0 2px} .adminBrandFields label{display:grid;gap:6px;font-weight:700}.adminBrandFields input{width:100%;box-sizing:border-box} /* v1.9.0 관리자 화면 재배열 + PAPS 원본 양식 내보내기 */ .adminMasterGrid{display:grid;grid-template-columns:minmax(360px,.95fr) minmax(360px,1.05fr);gap:18px;align-items:stretch} .adminMasterGrid>.adminCard,.adminOpsGrid>.adminCard{height:100%;box-sizing:border-box;display:flex;flex-direction:column} .adminOpsGrid{display:grid;grid-template-columns:minmax(480px,1.25fr) minmax(360px,.9fr);gap:18px;margin-top:18px;align-items:stretch} .adminSemesterCard{justify-content:flex-start} .semesterFixedGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px} .semesterFixedToggle{min-height:74px;border:1px solid #cbd5e1;background:#fff;border-radius:10px;font-size:19px;font-weight:800;color:#334155;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:.18s ease} .semesterFixedToggle:hover{border-color:#3498db;box-shadow:0 4px 12px rgba(52,152,219,.14);transform:translateY(-1px)} .semesterFixedToggle.active{background:#edf7ff;border-color:#3498db;color:#1f6fa8} .semesterFixedToggle.selected{box-shadow:0 0 0 3px rgba(52,152,219,.18)} .semesterFixedToggle span{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:#e2e8f0;color:#64748b} .semesterFixedToggle.active span{background:#27ae60;color:#fff} .semesterStateGuide{margin-top:18px;border:1px solid #dbe7f2;background:#f8fbfe;border-radius:9px;padding:15px 16px;line-height:1.7;color:#475569} .semesterStateGuide span{font-size:13px;color:#7b8794} .adminYearItem.selected{border-color:#3498db;background:#eef8ff} .adminBrandFields{margin-top:auto;padding-top:16px;border-top:1px solid #d8e1ec} .adminBrandFields label{display:flex;flex-direction:column;gap:6px;margin-top:10px} .papsExportRow{display:flex;align-items:center;gap:14px;justify-content:flex-start;margin-top:14px;padding-top:14px;border-top:1px solid #d8e1ec;flex-wrap:wrap} .papsExportRow .btn{min-width:230px} @media(max-width:980px){.adminMasterGrid,.adminOpsGrid{grid-template-columns:1fr}.semesterFixedGrid{grid-template-columns:1fr}.papsExportRow{align-items:stretch}.papsExportRow .btn{width:100%}} /* v1.9.1 설정 압축 배치 + 반별 체육부장 학기 완전 분리 + PAPS 원본 파일 재선택 */ .adminMasterGrid{align-items:stretch!important} .adminYearCard,.adminSemesterCard{height:100%;box-sizing:border-box} .adminSemesterCard{display:flex;flex-direction:column} .semesterHeadCompact{margin-top:16px;padding-top:14px;border-top:1px solid #dbe3ec} .semesterHeadCompact h3{margin:0 0 10px;font-size:15px} .semesterHeadGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .semesterHeadItem{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:8px 10px;border:1px solid #dbe3ec;border-radius:8px;background:#f8fbff;font-size:12px} .semesterHeadItem b{white-space:nowrap;color:#334155} .semesterHeadItem span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#0f172a;font-weight:800} @media(max-width:1200px){.semesterHeadGrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.semesterHeadGrid{grid-template-columns:1fr}} .calDetailTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}.deleteCalendarLesson{padding:7px 12px;min-width:auto} /* v1.9.4 calendar edit */ .calDetailActions{display:flex;gap:7px;align-items:center}.calEditHeader{margin-bottom:10px;font-size:15px}.calEditGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.calEditGrid label{display:grid;gap:5px}.calEditGrid label.wide{grid-column:1/-1}.calEditGrid span{font-size:12px;font-weight:900;color:#475569}.calEditGrid input,.calEditGrid textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit;background:#fff}.calEditGrid textarea{resize:vertical}.calEditButtons{display:flex;justify-content:flex-end;gap:8px;margin-top:12px} @media(max-width:760px){.calEditGrid{grid-template-columns:1fr}.calEditGrid label.wide{grid-column:auto}.calDetailTop{align-items:flex-start}.calDetailActions{flex-shrink:0}} /* v1.9.7 홈 달력 편집 안정화 */ .calEditGrid select{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit;background:#fff;min-height:40px} .calEditGrid textarea{user-select:text;-webkit-user-select:text} /* v1.9.9 달력 편집 1줄 배치 + 장소 관리 */ .calEditGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:start} .calEditGrid label.wide{grid-column:1/-1!important} .adminMasterGrid{grid-template-columns:minmax(280px,.72fr) minmax(320px,.86fr) minmax(520px,1.42fr)!important} .adminYearCard .adminAddRow input{max-width:150px} .adminYearList{display:grid;gap:8px} .adminPlaceCard{display:flex;flex-direction:column;min-width:0} #adminPlaceRows{display:grid;gap:8px;max-height:250px;overflow:auto;padding-right:2px} .adminPlaceCard .adminListRow{grid-template-columns:minmax(0,1fr) auto} .adminPlaceAdd{margin-top:auto;padding-top:12px} @media(max-width:1250px){.adminMasterGrid{grid-template-columns:1fr 1fr!important}.adminSemesterCard{grid-column:1/-1}} @media(max-width:760px){.calEditGrid{grid-template-columns:1fr!important}.calEditGrid label.wide{grid-column:auto!important}.adminMasterGrid{grid-template-columns:1fr!important}.adminSemesterCard{grid-column:auto}} /* v1.9.9 장소 관리 저장 안정화 + 컴팩트 2열 목록 + 카드 위치 교환 */ .adminMasterGrid{grid-template-columns:minmax(280px,.72fr) minmax(520px,1.42fr) minmax(320px,.86fr)!important} .adminPlaceCard{justify-content:flex-start!important} #adminPlaceRows{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:310px;overflow-y:auto;overflow-x:hidden;padding-right:4px} .adminPlaceCard .adminListRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center} .adminPlaceCard .adminListRow input{min-height:38px;padding:7px 10px} .adminPlaceCard .adminListRow .btn{min-height:38px;padding:7px 12px} .adminPlaceAdd{margin-top:10px!important;padding-top:10px!important;border-top:1px solid #e2e8f0} @media(max-width:1250px){.adminMasterGrid{grid-template-columns:1fr 1fr!important}.adminPlaceCard{grid-column:1/-1}#adminPlaceRows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.adminMasterGrid{grid-template-columns:1fr!important}.adminPlaceCard{grid-column:auto}#adminPlaceRows{grid-template-columns:1fr}} /* v1.10.0 연속 월 이동 + 대한민국 공휴일 + 설정 학교명 관리 */ .calDateRow{display:flex;align-items:flex-start;justify-content:space-between;gap:5px;min-width:0} .calDay.holiday .calDate,.calDay.holiday .holidayName{color:#e53935!important;font-weight:900} .holidayName{display:block;max-width:78%;font-size:10px;line-height:1.2;text-align:right;white-space:normal;word-break:keep-all;color:#e53935} .mobileDay.holiday .mobileDate strong{color:#e53935} .adminMasterGrid{grid-template-columns:minmax(270px,.68fr) minmax(360px,.92fr) minmax(540px,1.4fr)!important} .adminPlaceAdd{margin-top:18px!important;padding-top:14px!important} .adminOpsGridWithSchool{display:grid!important;grid-template-columns:minmax(520px,1.45fr) minmax(340px,.9fr) minmax(260px,.58fr)!important;gap:14px;align-items:stretch} .adminOpsGridWithSchool>.adminCard{height:100%;box-sizing:border-box} .adminSchoolCard{display:flex;flex-direction:column;min-width:0} .adminSchoolLabel{display:grid;gap:8px;font-weight:800;color:#334155;margin-top:12px} .adminSchoolLabel input{width:100%;box-sizing:border-box} .adminSchoolPreview{margin-top:16px;padding:12px;border:1px solid #dbe3ec;border-radius:10px;background:#f8fbff;display:grid;gap:6px} .adminSchoolPreview span{font-size:11px;color:#64748b}.adminSchoolPreview b{font-size:13px;color:#0f172a} @media(max-width:1350px){.adminOpsGridWithSchool{grid-template-columns:1.2fr .8fr!important}.adminSchoolCard{grid-column:1/-1}.adminMasterGrid{grid-template-columns:1fr 1fr!important}.adminSemesterCard{grid-column:1/-1}} @media(max-width:760px){.adminOpsGridWithSchool,.adminMasterGrid{grid-template-columns:1fr!important}.adminSchoolCard,.adminSemesterCard{grid-column:auto}.holidayName{max-width:72%;font-size:9px}} /* v1.10.2 장소 입력 하단 정렬 */ .adminPlaceCard{display:flex!important;flex-direction:column!important} .adminPlaceCard #adminPlaceRows{flex:0 1 auto!important} .adminPlaceCard .adminPlaceAdd{margin-top:auto!important;padding-top:14px!important} /* v1.10.2 focused refinements */ .adminOpsGridWithSchool{grid-template-columns:minmax(540px,1.55fr) minmax(300px,.72fr) minmax(300px,.73fr)!important} .adminSchoolLabel{margin-top:18px!important;gap:12px!important} .adminSchoolLabel span{display:block;margin-bottom:2px} .adminSchoolPreview{margin-top:auto!important;padding-top:14px!important} .adminSchoolCard{display:flex!important;flex-direction:column!important} @media(max-width:1350px){.adminOpsGridWithSchool{grid-template-columns:1.2fr .8fr!important}.adminSchoolCard{grid-column:1/-1}} /* v1.10.3 설정 카드 균등 배치 */ .adminMasterGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch!important} .adminMasterGrid>.adminCard{height:100%!important;min-height:0;box-sizing:border-box} .adminHeadTeacherCard{display:flex;flex-direction:column;min-width:0} .adminHeadTeacherCard .semesterHeadGrid{margin-top:8px} .semesterHeadVertical{grid-template-columns:1fr!important;gap:8px!important} .semesterHeadVertical .semesterHeadItem{min-height:38px} .adminOpsGridWithSchool{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important} .adminOpsGridWithSchool>.adminCard{height:100%!important;box-sizing:border-box} .adminSchoolLabel{margin-top:22px!important;gap:14px!important} .adminSchoolLabel span{margin-bottom:4px!important} @media(max-width:1450px){ .adminMasterGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important} .adminOpsGridWithSchool{grid-template-columns:repeat(3,minmax(0,1fr))!important} } @media(max-width:1000px){ .adminMasterGrid,.adminOpsGridWithSchool{grid-template-columns:1fr!important} } /* v1.10.5 달력 월 선택 UI 복구 */ .monthPickerWrap{position:relative;display:inline-flex;align-items:center} .monthPickerButton{height:42px;min-width:180px;padding:0 14px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#0f172a;font:inherit;font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;box-sizing:border-box} .monthPickerButton:hover{border-color:#93c5fd;background:#f8fbff} .monthPickerButton:focus-visible{outline:3px solid #bfdbfe;outline-offset:1px} .monthSelectDialog{max-width:560px!important} .monthSelectBody{display:grid;gap:18px;margin-top:18px} .monthSelectBody label{display:grid;gap:8px;font-weight:800} .monthSelectBody select{width:100%;height:44px;border:1px solid #cbd5e1;border-radius:8px;padding:0 12px;background:#fff;font:inherit} .monthGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .monthChoice{height:44px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#0f172a;font:inherit;font-weight:800;cursor:pointer} .monthChoice:hover{border-color:#60a5fa;background:#eff6ff} .monthChoice.active{background:#3498db;color:#fff;border-color:#3498db} @media(max-width:760px){.monthPickerButton{min-width:150px;height:40px;padding:0 10px}.calendarHeader .row{gap:8px}.monthGrid{grid-template-columns:repeat(3,1fr)}}.calendarHeader .row{gap:8px}} /* v1.10.6 오늘 버튼 색상 유지 */ #calToday.btn.secondary{ background:#f59e0b!important; border-color:#f59e0b!important; color:#fff!important; } #calToday.btn.secondary:hover{ background:#d97706!important; border-color:#d97706!important; color:#fff!important; } /* ========================================================= v1.11.0-mobile — 모바일 전용 안전 최적화 데이터/API/저장 로직은 건드리지 않고 화면 배치만 조정합니다. ========================================================= */ @media (max-width: 768px) { html, body { width:100%; max-width:100%; overflow-x:hidden; } body { -webkit-text-size-adjust:100%; } /* 상단 헤더 */ .pe87Top { min-height:64px!important; height:auto!important; padding:9px 12px!important; align-items:center!important; position:sticky!important; top:0!important; z-index:120!important; } .pe87Brand { min-width:0!important; gap:10px!important; } .pe87Logo { width:44px!important; height:44px!important; flex:0 0 44px!important; } .pe87Title { min-width:0!important; } .pe87Title strong { font-size:13px!important; line-height:1.25!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pe87Title b { font-size:18px!important; line-height:1.2!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pe87UserTools { display:none!important; } /* 좌측 메뉴를 모바일에서는 가로 스크롤 탭으로 */ .pe87Shell { display:block!important; min-height:0!important; } .pe87Side { position:sticky!important; top:62px!important; z-index:110!important; width:100%!important; height:auto!important; max-height:none!important; padding:8px!important; border-right:0!important; border-bottom:1px solid #d9e1ea!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch; background:#fff!important; } .sideTabs { display:flex!important; flex-direction:row!important; gap:7px!important; width:max-content!important; min-width:100%!important; padding:0!important; border:0!important; overflow:visible!important; } .sideTabs > .tab, .sideTabs .tab { flex:0 0 auto!important; width:auto!important; min-width:max-content!important; min-height:40px!important; padding:0 12px!important; font-size:13px!important; border-radius:8px!important; } .sideTabs .tree, .sideTabs .submenu, .sideTabs .accordionBody { display:none!important; } .pe87Main { padding:8px!important; } #app { padding:8px!important; min-height:calc(100vh - 126px)!important; border-radius:6px!important; } /* 터치 조작성 */ button, .btn, select, input, textarea { font-size:16px; } button, .btn, select, input:not([type="checkbox"]):not([type="radio"]) { min-height:44px; } .btn { padding:10px 13px; border-radius:8px; } textarea { min-height:96px; } /* 공통 카드/배치 */ .panel, .detail, .list, .adminCard, .waitingCard { border-radius:10px!important; } .panel, .detail, .adminCard { padding:12px!important; } .grid, .grid2, .formGrid, .adminGrid2, .adminGrid3, .adminMasterGrid, .adminOpsGridWithSchool, .studentWaitingGrid { grid-template-columns:1fr!important; gap:10px!important; } .row.mobileStack, .attendanceControls { align-items:stretch!important; } .attendanceControls { flex-wrap:wrap!important; } .attendanceControls label { flex:1 1 140px!important; } /* 홈 달력 조작부 — 한 줄 유지 */ .calendarHeader .row { display:grid!important; grid-template-columns:auto minmax(122px,1fr) auto auto!important; gap:6px!important; align-items:center!important; flex-wrap:nowrap!important; } .calendarHeader .row > * { min-width:0!important; } .calendarHeader .btn { width:auto!important; min-width:0!important; padding:8px 10px!important; font-size:13px!important; } .monthPickerWrap { width:100%!important; min-width:0!important; } .monthPickerButton { width:100%!important; min-width:0!important; height:44px!important; padding:0 8px!important; font-size:15px!important; justify-content:center!important; } .calTitle { font-size:18px!important; } .calWeekHead, .calGrid { display:none!important; } .calendarMobile, .mobileCalendar, .calMobileList { display:block!important; } .mobileDay { margin-bottom:9px!important; border-radius:10px!important; } .mobileDate { padding:10px 11px!important; } .mobileLesson { padding:11px!important; } /* 모달은 모바일 하단 시트형 */ .calModal, .photoRosterModal { padding:0!important; align-items:flex-end!important; } .calDialog { width:100%!important; max-width:none!important; max-height:92dvh!important; border-radius:16px 16px 0 0!important; padding:14px!important; } .calEditGrid { grid-template-columns:1fr!important; gap:9px!important; } .calEditGrid label.wide { grid-column:auto!important; } .calEditButtons { position:sticky; bottom:0; background:#fff; padding-top:10px; z-index:2; } .monthSelectDialog { width:100%!important; max-width:none!important; } .monthGrid { grid-template-columns:repeat(3,1fr)!important; gap:8px!important; } /* 표: 데스크톱 구조 보존 + 모바일에서 가로 스크롤 */ .tableWrap, .tableScroll, .papsTableWrap, .assessmentTableWrap { width:100%!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch; border-radius:8px; } .dataTable { min-width:820px!important; font-size:13px!important; } .papsTable, .pe87Paps .dataTable { min-width:1120px!important; } .assessTable, .pe87Assess .dataTable { min-width:900px!important; } .dataTable th, .dataTable td { padding:7px 6px!important; } .dataTable input, .dataTable select { min-height:38px!important; font-size:14px!important; } /* 반별 진도표 */ .progressTable, .classProgressTable { min-width:1050px!important; } /* 학생 관리 */ .grid { grid-template-columns:1fr!important; } .studentList { max-height:42vh!important; min-height:220px!important; } .studentBtn { grid-template-columns:54px 1fr!important; } .num { padding:13px 6px!important; } .name { padding:10px!important; } .badge { padding:7px 13px!important; } .studentInfoCard { grid-template-columns:1fr!important; padding:11px!important; } .studentInfoSave { grid-column:auto!important; } .studentNoteRow { grid-template-columns:1fr!important; } .photoRosterTools { flex-direction:column!important; align-items:stretch!important; } .photoRosterDialog { width:100%!important; height:96dvh!important; border-radius:16px 16px 0 0!important; } .photoRosterBody { grid-template-columns:1fr!important; overflow:auto!important; } .photoRosterCanvasArea { min-height:42vh!important; padding:10px!important; } .photoRosterSide { border-left:0!important; border-top:1px solid #e5e7eb!important; overflow:visible!important; } .classPdfToolbar, .classPdfWorkspace { grid-template-columns:1fr!important; } /* PAPS/수행평가 설정 카드 */ .assessConfigGrid, .semesterHeadGrid { grid-template-columns:1fr!important; } .assessSettingRow { grid-template-columns:auto minmax(72px,1fr) auto minmax(72px,1fr)!important; } .papsExportRow { align-items:stretch!important; } .papsExportRow .btn { width:100%!important; } /* 스포츠클럽 */ .clubWorkGrid { grid-template-columns:1fr!important; } .clubMemberEntry { grid-template-columns:1fr 1fr!important; } .clubMemberEntry .btn { width:100%!important; } .clubAttRow { grid-template-columns:1fr!important; } .clubAttendanceTable { min-width:1050px!important; } /* 설정 */ .adminMasterGrid, .adminOpsGridWithSchool { grid-template-columns:1fr!important; } .adminMasterGrid > .adminCard, .adminOpsGridWithSchool > .adminCard { min-height:0!important; height:auto!important; } #adminPlaceRows { grid-template-columns:1fr!important; max-height:280px!important; } .toggleGrid { grid-template-columns:repeat(3,1fr)!important; } .classGrid { grid-template-columns:repeat(4,1fr)!important; } .adminTopBar { align-items:stretch!important; gap:10px!important; flex-direction:column!important; } .adminTopBar .btn { width:100%!important; } /* 저장 알림 */ .saveNotice { top:10px!important; width:calc(100% - 20px)!important; max-width:420px!important; justify-content:center!important; text-align:center!important; } } @media (max-width: 420px) { .calendarHeader .row { grid-template-columns:auto minmax(105px,1fr) auto auto!important; gap:4px!important; } .calendarHeader .btn { padding:7px 8px!important; font-size:12px!important; } .monthPickerButton { font-size:14px!important; } .clubMemberEntry { grid-template-columns:1fr!important; } .classGrid { grid-template-columns:repeat(3,1fr)!important; } .toggleGrid { grid-template-columns:1fr!important; } } /* v1.11.6: 반별 진도표 날짜 월 앞자리 0 제거 */ .progressDatePicker{position:relative;width:100%}.progressDateDisplay{width:100%;height:38px;border:1px solid #d7e1ec;border-radius:6px;background:#fff;color:#111827;font:inherit;text-align:center;cursor:pointer;padding:0 12px;pointer-events:none}.progressDateDisplay:hover{border-color:#9fc7ee}.progressDatePicker:focus-within .progressDateDisplay{border-color:#168ee0;box-shadow:0 0 0 2px rgba(22,142,224,.14)}.progressDateNative{position:absolute!important;z-index:2;inset:0!important;transform:none!important;width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;margin:0!important;opacity:.001;cursor:pointer;pointer-events:auto}.progressDateNative::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;opacity:0;cursor:pointer} /* v1.11.7: 반별 진도표 빈 종목의 이전 탭 종목 상속 방지 */ /* v1.11.8: 저장된 빈 차시 삭제 처리로 종목 선택 상태 유지 */ /* ========================================================= v1.12.4 — 모바일 현재 탭 선택 + 바텀시트 메뉴 PC 사이드바와 데이터/저장 로직은 그대로 유지합니다. ========================================================= */ .mobileTabBar,.mobileTabSheet{display:none} @media (max-width:768px){ body.mobileSheetOpen{overflow:hidden!important} /* 기존 PC 사이드바는 DOM에 그대로 두고 모바일에서만 숨김 */ .pe87Side{display:none!important} .pe87Main{width:100%!important;min-width:0!important} .mobileTabBar{ display:block; position:sticky; top:62px; z-index:112; padding:8px 10px; background:#f6f9fd; border-bottom:1px solid #d9e1ea; } .mobileTabCurrent{ width:100%; min-height:48px; border:1px solid #cbd5e1; border-radius:12px; background:#fff; color:#203247; padding:0 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:16px; font-weight:900; box-shadow:0 2px 8px rgba(15,23,42,.06); cursor:pointer; } .mobileTabCurrent:active{background:#f0f7ff} .mobileTabChevron{color:#3498db;font-size:19px;transition:transform .2s ease} .mobileTabCurrent[aria-expanded="true"] .mobileTabChevron{transform:rotate(180deg)} .mobileTabSheet{ display:block; position:fixed; inset:0; z-index:1000; pointer-events:none; visibility:hidden; } .mobileTabSheet.open{pointer-events:auto;visibility:visible} .mobileTabBackdrop{ position:absolute; inset:0; width:100%;height:100%; border:0; background:rgba(15,23,42,.48); opacity:0; transition:opacity .2s ease; } .mobileTabSheet.open .mobileTabBackdrop{opacity:1} .mobileTabSheetPanel{ position:absolute; left:0;right:0;bottom:0; max-height:min(82dvh,720px); overflow:auto; overscroll-behavior:contain; background:#fff; border-radius:20px 20px 0 0; padding:10px 14px max(18px,env(safe-area-inset-bottom)); box-shadow:0 -18px 55px rgba(15,23,42,.25); transform:translateY(102%); transition:transform .24s ease; } .mobileTabSheet.open .mobileTabSheetPanel{transform:translateY(0)} .mobileTabSheetPanel:before{ content:"";display:block;width:42px;height:5px;border-radius:999px;background:#d5dde7;margin:0 auto 8px; } .mobileTabSheetHead{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:6px 2px 12px;border-bottom:1px solid #e5eaf0; } .mobileTabSheetHead strong{font-size:19px;color:#203247} .mobileTabClose{ width:42px;height:42px;min-height:42px;border:1px solid #dbe3ef;border-radius:10px;background:#fff;color:#526274;font-size:18px;cursor:pointer; } .mobileTabOptions{display:grid;grid-template-columns:1fr;gap:8px;padding-top:12px} .mobileTabOptions button{ width:100%;min-height:52px;border:1px solid #dbe3ef;border-radius:12px;background:#fff;color:#203247; display:flex;align-items:center;gap:12px;padding:0 15px;text-align:left;font-size:16px;font-weight:800;cursor:pointer; } .mobileTabOptions button.active{background:#30475e;color:#fff;border-color:#30475e;box-shadow:0 4px 12px rgba(48,71,94,.18)} .mobileTabOptions button:not(.active):active{background:#eef6ff;border-color:#9fc7ee} /* 사이드바 제거에 맞춰 본문 높이만 자연스럽게 재계산 */ #app{min-height:calc(100dvh - 130px)!important} } @media (min-width:769px){ .mobileTabBar,.mobileTabSheet{display:none!important} } .mobileTabBar.authHidden{display:none!important} /* ========================================================= v1.12.7 — 모바일 홈 달력 오늘 날짜 정확 이동 PC 레이아웃과 달력 데이터 로직은 변경하지 않습니다. ========================================================= */ @media (max-width:768px){ /* 바깥 제목 영역과 안쪽 이동 버튼 영역을 분리 */ .calendarHeader > .row{ display:block!important; } .calendarHeader > .row > div:first-child{ margin-bottom:12px!important; } .calendarHeader > .row > .row{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(128px,1.35fr) minmax(0,1fr)!important; grid-template-areas: "prev today next" "month month month"!important; gap:8px!important; width:100%!important; align-items:center!important; } .calendarHeader #calPrev{grid-area:prev} .calendarHeader .monthPickerWrap{grid-area:month} .calendarHeader #calNext{grid-area:next} .calendarHeader #calToday{ grid-area:today; width:100%!important; justify-self:stretch!important; } .calendarHeader .monthPickerWrap{ width:min(220px,100%)!important; justify-self:center!important; } .calendarHeader #calPrev, .calendarHeader #calNext, .calendarHeader #calToday, .calendarHeader .monthPickerButton{ min-width:0!important; min-height:44px!important; white-space:nowrap!important; writing-mode:horizontal-tb!important; word-break:keep-all!important; overflow:hidden!important; text-overflow:ellipsis!important; } .calendarHeader #calPrev, .calendarHeader #calNext{ width:100%!important; padding:8px 6px!important; font-size:13px!important; } .calendarHeader .monthPickerButton{ font-size:15px!important; } } @media (max-width:420px){ .calendarHeader > .row > .row{ grid-template-columns:minmax(0,1fr) minmax(116px,1.25fr) minmax(0,1fr)!important; gap:6px!important; } .calendarHeader #calPrev, .calendarHeader #calNext{ font-size:12px!important; padding:7px 4px!important; } .calendarHeader .monthPickerButton{font-size:14px!important} } /* v1.12.7: 모바일 오늘 카드가 고정 헤더 아래에 숨지 않도록 여백 확보 */ @media (max-width:768px){.mobileDay.today{scroll-margin-top:138px!important}} /* v1.15.14: 모바일 홈 날짜·수업 카드 가독성 개선 */ @media (max-width:768px){ .mobileDay{border:1px solid #dbe5ef!important;border-radius:18px!important;margin-bottom:14px!important;background:#fff!important;box-shadow:0 7px 22px rgba(31,50,72,.09)!important} .mobileDay.today{border-color:#59aef0!important;box-shadow:0 0 0 3px rgba(52,152,219,.14),0 9px 24px rgba(31,50,72,.11)!important} .mobileDate{min-height:52px!important;padding:12px 14px!important;background:linear-gradient(135deg,#f8fbff,#eef6fd)!important;border-bottom:1px solid #dce8f3!important} .mobileDate strong{font-size:15px!important;color:#203247!important;letter-spacing:-.02em} .mobileDate span{padding:5px 9px;border-radius:999px;background:#fff;color:#51708c!important;font-size:11px!important;box-shadow:0 1px 5px rgba(31,50,72,.08)} .mobileEvents{gap:10px!important;padding:11px!important;background:#fbfdff!important} .mobileLesson{position:relative;overflow:hidden;width:100%;padding:13px 14px!important;border:0!important;border-radius:14px!important;background:linear-gradient(135deg,var(--class-color,#3498db),var(--class-color,#3498db))!important;color:#fff!important;box-shadow:0 5px 14px rgba(31,50,72,.16)!important} .mobileLesson::after{content:"";position:absolute;right:-36px;top:-58px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.11);pointer-events:none} .mobileLessonHead{position:relative;z-index:1;display:flex;align-items:center;gap:8px;color:#fff!important} .mobileLessonHead b{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff!important;font-size:12px} .mobileLessonHead strong{color:#fff!important;font-size:15px} .mobileLessonHead i{margin-left:auto;color:rgba(255,255,255,.88)!important;font-size:11px;font-style:normal;font-weight:800} .mobileLessonDetails{position:relative;z-index:1;display:grid;gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.26)} .mobileLessonDetails small{display:grid;grid-template-columns:42px minmax(0,1fr);gap:7px;align-items:start;color:#fff!important;font-size:12px!important;line-height:1.45} .mobileLessonDetails em{color:rgba(255,255,255,.78)!important;font-style:normal;font-weight:900} .mobileLessonDetails span{min-width:0;color:#fff!important;font-weight:700;white-space:normal;overflow-wrap:anywhere} } @media (max-width: 768px) { .mobileDay.mobileTodayFocus { outline:3px solid rgba(245,158,11,.55)!important; outline-offset:2px!important; transition:outline-color .35s ease!important; } } /* ========================================================= v1.13.0 — 모바일 학생관리 학급·학생 선택기 PC UI와 데이터/API 로직은 변경하지 않습니다. ========================================================= */ .mobileStudentSelector{display:none} @media (max-width:768px){ .mobileStudentSelector{ display:block; margin:0 0 12px; padding:14px; border:1px solid #d8e2ee; border-radius:14px; background:linear-gradient(180deg,#fff,#f7fbff); box-shadow:0 3px 12px rgba(30,64,175,.07); } .mobileStudentSelectorTitle{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#203247} .mobileStudentSelectorTitle>span{font-size:21px} .mobileStudentSelectorTitle b{font-size:17px} .mobileStudentSelectorTitle small{margin-left:auto;color:#718096;font-size:12px;font-weight:700} .mobileStudentSelectorGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .mobileStudentSelectorGrid label{display:flex;flex-direction:column;gap:5px;min-width:0} .mobileStudentSelectorGrid label>span{font-size:12px;font-weight:900;color:#526274} .mobileStudentSelectorGrid select{ width:100%;min-width:0;height:44px;border:1px solid #cbd5e1;border-radius:10px;background:#fff; padding:0 10px;color:#172b3f;font-size:16px;font-weight:750; } .mobileStudentSelectorGrid select:disabled{background:#eef2f7;color:#8895a5} .mobileStudentPerson{grid-column:1/-1} .mobileStudentLoadBtn{ width:100%;height:46px;margin-top:10px;border:0;border-radius:10px;background:#30475e;color:#fff; font-size:15px;font-weight:900;box-shadow:0 3px 9px rgba(48,71,94,.18); } .mobileStudentLoadBtn:active{transform:translateY(1px);background:#24384b} /* 학생관리 선택 후 모바일에서는 명렬→상세를 자연스럽게 세로 배치 */ body:has(#mobileStudentSelector) #app .grid{grid-template-columns:1fr!important;gap:12px!important} body:has(#mobileStudentSelector) #app .grid>.list{height:auto!important;max-height:46dvh!important;min-height:220px!important} body:has(#mobileStudentSelector) #app .studentList{max-height:calc(46dvh - 48px)!important;overflow:auto!important} body:has(#mobileStudentSelector) #app #studentDetail{min-height:260px!important} body:has(#mobileStudentSelector) #app .studentRosterTools{align-items:flex-start!important} } @media (max-width:390px){ .mobileStudentSelector{padding:12px} .mobileStudentSelectorTitle small{display:none} .mobileStudentSelectorGrid{gap:8px} } /* ========================================================= v1.13.1 — 모바일 학생관리 선택 UI 및 폭 정렬 보정 학년도/학기 · 학년/반 · 학생 선택 · 학급 불러오기 PC UI와 데이터/API 로직은 변경하지 않습니다. ========================================================= */ @media (max-width:768px){ body:has(#mobileStudentSelector){overflow-x:hidden!important} body:has(#mobileStudentSelector) .pe87Main, body:has(#mobileStudentSelector) #app{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; overflow-x:hidden!important; } #mobileStudentSelector{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } #mobileStudentSelector .mobileStudentSelectorGrid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:10px!important; } #mobileStudentSelector .mobileStudentPerson{grid-column:1/-1!important} /* 상단 선택 카드와 학생 명렬·상세 카드의 좌우 끝선을 동일하게 맞춤 */ body:has(#mobileStudentSelector) #app > :not(.pdfCropModal), body:has(#mobileStudentSelector) #app .grid, body:has(#mobileStudentSelector) #app .grid > .list, body:has(#mobileStudentSelector) #app #studentDetail{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } body:has(#mobileStudentSelector) #app .grid{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:12px!important; overflow:visible!important; } body:has(#mobileStudentSelector) #app .grid > .list, body:has(#mobileStudentSelector) #app #studentDetail{ margin-left:0!important; margin-right:0!important; overflow-x:hidden!important; } body:has(#mobileStudentSelector) #app .studentList{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; overflow-x:hidden!important; } body:has(#mobileStudentSelector) #app .studentBtn, body:has(#mobileStudentSelector) #app .studentRosterTools, body:has(#mobileStudentSelector) #app .studentDetailHero, body:has(#mobileStudentSelector) #app .basicInfoCard, body:has(#mobileStudentSelector) #app .academicSection, body:has(#mobileStudentSelector) #app .classPdfPanel, body:has(#mobileStudentSelector) #app .uploadBox{ max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } body:has(#mobileStudentSelector) #app table{ max-width:none!important; } body:has(#mobileStudentSelector) #app .tableWrap, body:has(#mobileStudentSelector) #app .academicSection{ overflow-x:auto!important; -webkit-overflow-scrolling:touch!important; } } @media (max-width:390px){ #mobileStudentSelector .mobileStudentSelectorGrid{gap:8px!important} #mobileStudentSelector .mobileStudentSelectorGrid select{padding-left:8px!important;padding-right:8px!important} } /* ========================================================= v1.13.2 — 모바일 학생 선택 바텀시트 + 학업기록 세로배열 PC UI와 API/데이터 구조는 변경하지 않습니다. ========================================================= */ @media (max-width:768px){ .mobileStudentPersonButton{ width:100%;height:46px;border:1px solid #cbd5e1;border-radius:10px;background:#fff; padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px; color:#172b3f;font-size:16px;font-weight:800;text-align:left;cursor:pointer; } .mobileStudentPersonButton:disabled{background:#eef2f7;color:#8895a5;cursor:default} .mobileStudentPersonChevron{font-size:19px;color:#718096;line-height:1} .mobileStudentPickerSheet{position:fixed;inset:0;z-index:23000;display:none} .mobileStudentPickerSheet.open{display:block} .mobileStudentPickerBackdrop{position:absolute;inset:0;background:rgba(15,23,42,.48)} .mobileStudentPickerPanel{ position:absolute;left:0;right:0;bottom:0;max-height:min(72dvh,620px);background:#fff; border-radius:20px 20px 0 0;padding:10px 14px max(18px,env(safe-area-inset-bottom)); box-shadow:0 -18px 55px rgba(15,23,42,.28);display:flex;flex-direction:column; } .mobileStudentPickerHandle{width:42px;height:5px;border-radius:999px;background:#d5dde7;margin:0 auto 8px} .mobileStudentPickerHead{display:flex;align-items:center;justify-content:space-between;padding:5px 2px 12px;border-bottom:1px solid #e5eaf0} .mobileStudentPickerHead strong{font-size:19px;color:#203247} .mobileStudentPickerClose{width:42px;height:42px;border:1px solid #dbe3ef;border-radius:10px;background:#fff;color:#526274;font-size:18px} .mobileStudentPickerList{overflow:auto;-webkit-overflow-scrolling:touch;padding:10px 0 2px;display:grid;gap:7px} .mobileStudentPickerList button{ width:100%;min-height:50px;border:1px solid #dbe3ef;border-radius:11px;background:#fff; padding:0 14px;display:grid;grid-template-columns:54px 1fr 24px;align-items:center;text-align:left;color:#203247;font-size:16px; } .mobileStudentPickerList button.active{background:#eef6ff;border-color:#77afe4;color:#1f5f99} .studentPickerNo{font-size:13px;color:#718096;font-weight:800} .studentPickerCheck{text-align:right;color:#2f80c7;font-weight:900} .mobileStudentPickerEmpty{padding:28px 12px;text-align:center;color:#718096;font-weight:700} /* 학생 상세의 PAPS / 수행평가 표를 모바일에서 세로 카드형으로 표시 */ #studentPapsSummary table.mobileAcademicVertical, #studentAssessTable table.mobileAcademicVertical{ display:block!important;width:100%!important;min-width:0!important;border:0!important;background:transparent!important; } #studentPapsSummary table.mobileAcademicVertical thead, #studentAssessTable table.mobileAcademicVertical thead{display:none!important} #studentPapsSummary table.mobileAcademicVertical tbody, #studentAssessTable table.mobileAcademicVertical tbody, #studentPapsSummary table.mobileAcademicVertical tr, #studentAssessTable table.mobileAcademicVertical tr{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:8px!important} #studentPapsSummary table.mobileAcademicVertical td, #studentAssessTable table.mobileAcademicVertical td{ display:grid!important;grid-template-columns:minmax(105px,42%) minmax(0,1fr)!important;align-items:center!important; width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:11px 12px!important; border:1px solid #dde6f0!important;border-radius:10px!important;background:#fff!important;text-align:right!important; } #studentPapsSummary table.mobileAcademicVertical td::before, #studentAssessTable table.mobileAcademicVertical td::before{ content:attr(data-label);text-align:left;color:#526274;font-size:13px;font-weight:900;line-height:1.3; } #studentPapsSummary table.mobileAcademicVertical td>*{justify-self:end} #studentPapsSummary, #studentAssessTable{overflow:visible!important} #studentAssessmentSummary .academicToolbar{display:grid!important;grid-template-columns:auto 1fr auto 1fr!important;gap:8px!important;align-items:center!important} #studentAssessmentSummary .academicToolbar select{width:100%!important;min-width:0!important} } /* ========================================================= v1.13.3 — 모바일 학생 선택 바텀시트 확정 + PAPS 배지 정렬 PC 화면에는 적용되지 않습니다. ========================================================= */ @media (max-width:768px){ #mobileStudentSelector .mobileStudentPerson{grid-column:1 / -1!important} #mobileStudentSelector .mobileStudentPersonButton{ appearance:none!important;-webkit-appearance:none!important; width:100%!important;min-width:0!important;height:48px!important; border:1px solid #bfcddd!important;border-radius:11px!important;background:#fff!important; box-shadow:0 1px 2px rgba(15,23,42,.04)!important; } #mobileStudentSelector .mobileStudentPersonButton:not(:disabled):active{background:#eef6ff!important;border-color:#63a4df!important} /* PAPS: 종목명 오른쪽에 등급 배지, 기록은 아래 한 줄 */ #studentPapsSummary table.mobilePapsVertical td{ display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important; text-align:left!important;padding:11px 12px!important; } #studentPapsSummary table.mobilePapsVertical td::before{display:none!important} #studentPapsSummary .mobilePapsMetricHead{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:100%!important; } #studentPapsSummary .mobilePapsMetricTitle{font-size:13px!important;font-weight:900!important;color:#526274!important;line-height:1.25!important} #studentPapsSummary .mobilePapsMetricHead .papsGrade, #studentPapsSummary .mobilePapsMetricHead .overallGradeBadge{margin:0!important;white-space:nowrap!important;flex:0 0 auto!important} #studentPapsSummary table.mobilePapsVertical td>b{align-self:flex-end!important;font-size:16px!important;color:#1d2f43!important} /* 수행평가 모바일 카드의 항목명에는 '만점 20' 문구를 표시하지 않음 */ #studentAssessTable table.mobileAssessVertical td::before{content:attr(data-label)!important} } /* ========================================================= v1.13.4 — 학생 선택 메뉴형 바텀시트 + PAPS 1행 정렬 모바일 전용. PC UI와 데이터/API 로직은 변경하지 않습니다. ========================================================= */ @media (max-width:768px){ body.mobileStudentPickerOpen{overflow:hidden!important} .mobileStudentPickerSheet{z-index:32000!important} .mobileStudentPickerPanel{ max-height:min(78dvh,680px)!important; padding:10px 18px max(20px,env(safe-area-inset-bottom))!important; border-radius:22px 22px 0 0!important; } .mobileStudentPickerHead{padding:7px 2px 14px!important} .mobileStudentPickerHead strong{font-size:21px!important;font-weight:900!important} .mobileStudentPickerSearchWrap{ display:flex!important;align-items:center!important;gap:9px!important; margin:13px 0 5px!important;padding:0 13px!important;height:48px!important; border:1px solid #d8e0ea!important;border-radius:12px!important;background:#f8fafc!important; } .mobileStudentPickerSearchWrap input{ flex:1!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important; height:100%!important;font-size:16px!important;color:#203247!important; } .mobileStudentPickerList{gap:9px!important;padding-top:9px!important} .mobileStudentPickerList .mobileStudentPickerOption{ min-height:58px!important;grid-template-columns:40px minmax(0,1fr) 28px!important; border-radius:13px!important;padding:0 14px!important;font-size:17px!important; box-shadow:0 1px 2px rgba(15,23,42,.03)!important; } .mobileStudentPickerList .mobileStudentPickerOption.active{ background:#314a63!important;border-color:#314a63!important;color:#fff!important; } .studentPickerIcon{font-size:21px!important} .studentPickerText{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} .mobileStudentPickerList .active .studentPickerCheck{color:#fff!important} /* PAPS: 종목 | 등급 배지 | 기록을 한 줄에 표시 */ #studentPapsSummary table.mobilePapsVertical td{ display:block!important;padding:0!important;border:0!important;background:transparent!important; } #studentPapsSummary .mobilePapsMetricRow{ display:grid!important; grid-template-columns:minmax(105px,1fr) auto minmax(48px,auto)!important; align-items:center!important;gap:9px!important;width:100%!important; min-height:48px!important;padding:10px 12px!important;box-sizing:border-box!important; border:1px solid #dde6f0!important;border-radius:10px!important;background:#fff!important; } #studentPapsSummary .mobilePapsMetricTitle{ min-width:0!important;font-size:14px!important;font-weight:900!important;color:#33475b!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; } #studentPapsSummary .mobilePapsBadgeSlot{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important} #studentPapsSummary .mobilePapsBadgeSlot .papsGrade, #studentPapsSummary .mobilePapsBadgeSlot .overallGradeBadge{ margin:0!important;white-space:nowrap!important;font-size:11px!important;line-height:1.2!important; } #studentPapsSummary .mobilePapsValue{ justify-self:end!important;font-size:15px!important;font-weight:900!important;color:#172b3f!important;white-space:nowrap!important; } } /* ========================================================= v1.13.7 — 모바일 학생 명렬 패널 숨김 학생 선택은 바텀시트로만 처리하고 상세 화면은 전체 폭 사용. PC UI와 데이터/API 로직은 변경하지 않습니다. ========================================================= */ @media (max-width:768px){ /* 기존 스크롤 학생 명렬은 모바일에서만 숨김 */ body:has(#mobileStudentSelector) #app .grid > .list{ display:none!important; } /* 상세 화면을 상단 선택 카드와 같은 폭으로 확장 */ body:has(#mobileStudentSelector) #app .grid{ display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; } body:has(#mobileStudentSelector) #app #studentDetail{ display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; box-sizing:border-box!important; } /* 상세 내부 카드도 화면 밖으로 넘치지 않게 유지 */ body:has(#mobileStudentSelector) #app #studentDetail > *, body:has(#mobileStudentSelector) #app #studentDetail .card, body:has(#mobileStudentSelector) #app #studentDetail .panel{ max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } } /* v1.13.8 — 모바일 학년도/학기/학년/반 선택도 바텀시트로 통일 */ @media (max-width:768px){ #mobileStudentSelector .mobileContextPickerButton{ width:100%!important; min-height:46px!important; border:1px solid #cfd9e6!important; border-radius:10px!important; background:#fff!important; color:#24364a!important; padding:0 12px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; font-size:15px!important; font-weight:800!important; text-align:left!important; -webkit-tap-highlight-color:transparent!important; touch-action:manipulation!important; } #mobileStudentSelector .mobileContextPickerButton:not(:disabled):active{ background:#fff!important; border-color:#cfd9e6!important; box-shadow:none!important; } #mobileStudentSelector .mobileContextPickerButton:disabled{ background:#eef2f7!important; color:#8a98a8!important; } } /* v1.13.9 — 모바일 학생 선택 후 상세 제목 정확 스크롤 */ @media (max-width:768px){ #studentDetail .studentDetailHero .detailTitle{scroll-margin-top:72px!important;} } /* ========================================================= v1.14.1 — iPhone 학생관리 터치 안정화 + PAPS 종합등급 배지만 표시 모바일 전용. PC UI와 데이터/API는 변경하지 않습니다. ========================================================= */ @media (max-width:768px){ #mobileStudentSelector .mobilePickerField{ display:flex!important; flex-direction:column!important; gap:5px!important; min-width:0!important; } #mobileStudentSelector .mobilePickerField>span{ font-size:12px!important; font-weight:900!important; color:#526274!important; } #mobileStudentSelector button{ -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; touch-action:manipulation!important; } #studentPapsSummary .mobilePapsMetricRow.badgeOnly{ grid-template-columns:minmax(105px,1fr) auto!important; } #studentPapsSummary .mobilePapsMetricRow.badgeOnly .mobilePapsValue{ display:none!important; } } /* ========================================================= v1.14.2 — 모바일 PAPS 학급 선택 바텀시트 PC UI와 저장/API 로직에는 영향을 주지 않습니다. ========================================================= */ @media (max-width:768px){ #mobilePapsSelector{width:100%!important;max-width:100%!important;box-sizing:border-box!important;margin:0 0 12px!important;} #mobilePapsSelector .mobilePapsSelectorGrid{grid-template-columns:1fr 1fr!important;} #mobilePapsSelector .mobilePapsClassFull{grid-column:1 / -1!important;} #mobilePapsSelector .mobileContextPickerButton{width:100%!important;min-height:46px!important;border:1px solid #cfd9e6!important;border-radius:10px!important;background:#fff!important;color:#24364a!important;padding:0 12px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;font-size:15px!important;font-weight:800!important;text-align:left!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;} #mobilePapsSelector .mobilePickerField{display:flex!important;flex-direction:column!important;gap:5px!important;min-width:0!important;} #mobilePapsSelector .mobilePickerField>span{font-size:12px!important;font-weight:900!important;color:#526274!important;} #mobilePapsSelector button{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;touch-action:manipulation!important;} } /* v1.14.4 모바일 PAPS 단일학생 모드 — PC에는 적용되지 않음 */ #mobilePapsHost{display:none} @media(max-width:768px){ #mobilePapsHost{display:block;width:100%;max-width:100%;box-sizing:border-box} #mobilePapsHost[hidden]{display:none!important} #mobilePapsSelector{margin:0 0 12px!important} #mobilePapsSelector .mobilePapsSelectorGrid{grid-template-columns:1fr 1fr!important;gap:8px!important} #mobilePapsSelector .mobileStudentLoadBtn{margin-top:10px!important} body.mobilePapsSingleMode #app .papsPanel #papsTableBox{display:none!important} body.mobilePapsSingleMode #app .papsPanel{padding-top:0!important} body.mobilePapsView #app .pe87PageHead{display:none!important} .mobilePapsDashboardCard{width:100%;box-sizing:border-box;background:#fff;border:1px solid #dbe4ef;border-radius:14px;padding:12px;margin:0 0 12px;box-shadow:0 4px 14px rgba(31,56,88,.08)} .mobilePapsDashboardCard h2{margin:0 0 10px;font-size:17px;line-height:1.35;color:#203247;text-align:center} .mobilePapsActionRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%} .mobilePapsActionRow .btn{width:100%;min-width:0;min-height:46px;padding:6px 3px;margin:0;font-size:11px;line-height:1.15;white-space:normal;border-radius:9px} .mobilePapsActionRow .btn:disabled{opacity:.46;cursor:not-allowed} .mobilePapsStudentView{width:100%;max-width:100%;box-sizing:border-box;margin:0 0 12px} .mobilePapsEmpty{background:#fff;border:1px solid #dbe4ef;border-radius:12px;padding:28px 16px;text-align:center;color:#718096;font-weight:800} .mobilePapsStudentCard{width:100%;box-sizing:border-box;background:#fff;border:1px solid #dbe4ef;border-radius:14px;padding:14px;box-shadow:0 4px 14px rgba(31,56,88,.08)} .mobilePapsStudentCard>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px solid #e4eaf1} .mobilePapsStudentCard>header h3{margin:0;font-size:17px;line-height:1.3;color:#1f3348;white-space:nowrap;min-width:0} .mobilePapsRecordGroup{padding:14px 0;border-bottom:1px solid #e8edf3} .mobilePapsRecordGroup h4{margin:0 0 10px;font-size:15px;color:#2a3f55} .mobilePapsInputGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px} .mobilePapsInputGrid.twoByTwo{grid-template-columns:1fr 1fr} .mobilePapsInputField{display:flex;flex-direction:column;gap:5px;min-width:0} .mobilePapsInputField>span{font-size:11px;font-weight:900;color:#68788a} .mobilePapsInputField input{width:100%;height:42px;box-sizing:border-box;border:1px solid #cdd8e5;border-radius:9px;padding:0 10px;text-align:center;font-size:16px;background:#fff} .mobilePapsMetricLine{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:36px} .mobilePapsMetricLine>strong{font-size:13px;color:#526274;white-space:nowrap} .mobilePapsMetricBadge{display:flex;align-items:center;justify-content:flex-end;min-width:0} .mobilePapsMetricBadge .papsGrade{display:inline-flex!important;align-items:center!important;margin:0!important;white-space:nowrap!important} .mobilePapsMetricLine>b{text-align:right;font-size:16px;color:#1f3348;white-space:nowrap;order:2} .mobilePapsMetricBadge{order:3} .mobilePapsSingleInput{margin-top:9px} .mobilePapsInputField.noLabel input{margin-top:0} .mobilePapsNoBadge{color:#9aa7b5} .mobilePapsSummaryLine{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:14px} .mobilePapsSummaryLine>div{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f7f9fc;border:1px solid #e0e7f0;border-radius:10px;padding:10px} .mobilePapsSummaryLine span:first-child{font-size:12px;font-weight:900;color:#607083} .mobilePapsSummaryLine b{font-size:16px;color:#173a61} .mobilePapsSummaryLine .overallGradeBadge{margin:0!important} } /* v1.14.5 — 모바일 학생명 전체 표시 + PAPS 업로드 카드 위치 정돈 */ @media (max-width:768px){ .mobileStudentPickerList .studentPickerText{ min-width:0!important; overflow:visible!important; text-overflow:clip!important; white-space:normal!important; word-break:keep-all!important; line-height:1.3!important; } .mobileStudentPickerList .mobileStudentPickerOption{ grid-template-columns:40px minmax(0,1fr) 28px!important; height:auto!important; padding-top:10px!important; padding-bottom:10px!important; } #mobilePapsHost .mobilePapsUploadCard{ width:100%!important; box-sizing:border-box!important; margin:0 0 12px!important; } #mobilePapsHost #papsResult{margin:0 0 10px!important;} } /* v1.14.6 — iPhone 스크롤 오작동 방지, 학생명 한 줄, PAPS 업로드 카드 복구 */ @media (max-width:768px){ .mobileStudentPickerList .studentPickerText{ display:block!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; word-break:normal!important; line-height:1.35!important; } .mobileStudentPickerList .studentPickerText b{ display:block!important; white-space:nowrap!important; } #mobilePapsHost .papsUpload.mobilePapsUploadCard{ display:block!important; visibility:visible!important; opacity:1!important; position:relative!important; width:100%!important; max-width:100%!important; box-sizing:border-box!important; margin:0 0 12px!important; } } /* ========================================================= v1.14.7 — 모바일 PAPS 안정화 마이크로 패치 PC UI/API/데이터 구조에는 영향 없음 ========================================================= */ @media (max-width:768px){ /* PAPS 반 전체 명렬/기록표는 학급 로드 여부와 무관하게 모바일에서 항상 숨김 */ body.mobilePapsView #app .papsPanel #papsTableBox, body.mobilePapsView #app .pe87Paps{display:none!important;} /* 모바일 전용 PAPS 업로드 카드는 항상 보이도록 고정 */ #mobilePapsHost #mobilePapsUploadCard{ display:block!important;visibility:visible!important;opacity:1!important; width:100%!important;max-width:100%!important;box-sizing:border-box!important; margin:0 0 12px!important;position:relative!important;cursor:pointer!important; } /* 학생 바텀시트: 번호와 이름을 한 줄 전체 표시 */ .mobileStudentPickerList .mobileStudentPickerOption{ display:grid!important; grid-template-columns:minmax(0,1fr) 28px!important; align-items:center!important; width:100%!important; min-width:0!important; } .mobileStudentPickerList .studentPickerIcon{display:none!important;} .mobileStudentPickerList .studentPickerText{ display:block!important;min-width:0!important;width:100%!important; overflow:visible!important;text-overflow:clip!important; white-space:nowrap!important;word-break:keep-all!important; line-height:1.35!important;text-align:left!important; } .mobileStudentPickerList .studentPickerText b{ display:block!important;width:100%!important; overflow:visible!important;text-overflow:clip!important; white-space:nowrap!important;font-size:16px!important; } /* iPhone 포함 모바일 학생관리 도구행: 한 줄 유지 */ body:has(#mobileStudentSelector) #app .studentRosterTools{ display:flex!important;flex-wrap:nowrap!important;align-items:center!important; gap:6px!important;width:100%!important;max-width:100%!important; overflow-x:auto!important;-webkit-overflow-scrolling:touch!important; padding:8px 9px!important;box-sizing:border-box!important; } body:has(#mobileStudentSelector) #app .studentRosterTools strong{ flex:0 0 auto!important;white-space:nowrap!important;font-size:12px!important; } body:has(#mobileStudentSelector) #app .studentRosterTools .btn{ flex:0 0 auto!important;white-space:nowrap!important; min-height:34px!important;padding:6px 8px!important;font-size:11px!important; } body:has(#mobileStudentSelector) #app .studentRosterTools .hint{display:none!important;} } /* v1.14.8 — 모바일 PAPS 업로드 카드 중복 제거 mobilePapsHost 안의 원하는 카드만 유지하고, 기존 #app 하단의 중복 카드만 숨깁니다. */ @media (max-width:768px){ body.mobilePapsView #app .papsUpload{ display:none!important; } } @media (max-width:768px){.student-detail-card label,.student-detail label{display:block;margin-bottom:12px!important;}.student-detail-card input,.student-detail input,.student-detail select{margin-top:0!important;}} @media (max-width:768px){.student-detail-card label,.student-detail label{display:block;margin-bottom:12px!important;}} /* v1.14.10 Galaxy student detail spacing */ @media (max-width: 768px){ .student-detail label, .student-info-card label, .student-detail .field-label{ display:block; margin-bottom:12px !important; } .student-detail .field, .student-info-card .field{ margin-bottom:18px !important; } } /* v1.14.11 — Android/Galaxy student basic-info field spacing only */ @media (max-width:768px){ html.pe-android body:has(#mobileStudentSelector) #studentDetail .studentInfoCard{ padding:14px !important; row-gap:15px !important; } html.pe-android body:has(#mobileStudentSelector) #studentDetail .studentInfoCard > div{ display:flex !important; flex-direction:column !important; gap:9px !important; min-height:76px !important; } html.pe-android body:has(#mobileStudentSelector) #studentDetail .studentInfoCard > div > .label{ display:block !important; margin:0 !important; line-height:1.35 !important; } html.pe-android body:has(#mobileStudentSelector) #studentDetail .studentInfoCard > div > input, html.pe-android body:has(#mobileStudentSelector) #studentDetail .studentInfoCard > div > .genderSegment{ margin:0 !important; flex:0 0 auto !important; } } /* v1.14.12 — 모바일 PAPS 위치 경로 상단 이동 + 하단 여백 축소 */ @media (max-width:768px){ body.mobilePapsView #mobilePapsHost .mobilePapsCrumb{ display:block!important; width:100%!important; box-sizing:border-box!important; margin:0 0 10px!important; color:#7a8795!important; font-size:13px!important; font-weight:800!important; line-height:1.4!important; } body.mobilePapsView #app > .pe87Crumb{display:none!important;} body.mobilePapsView #app{ min-height:0!important; height:auto!important; padding-bottom:8px!important; } body.mobilePapsView #app .papsPanel{ margin-bottom:0!important; padding-bottom:12px!important; } } /* ========================================================= v1.14.20 — 모바일 학생 선택 터치 효과 통일 학생관리의 학생 선택 버튼·바텀시트에만 적용되며 PC와 다른 탭에는 영향 없음. ========================================================= */ @media (max-width:768px){ #mobileStudentSelector .mobileStudentPersonButton, #mobileStudentPickerSheet .mobileStudentPickerBackdrop, #mobileStudentPickerSheet .mobileStudentPickerClose, #mobileStudentPickerSheet .mobileStudentPickerOption{ -webkit-tap-highlight-color:transparent!important; -webkit-touch-callout:none!important; touch-action:manipulation!important; } #mobileStudentSelector .mobileStudentPersonButton, #mobileStudentPickerSheet .mobileStudentPickerOption{ -webkit-user-select:none!important; user-select:none!important; } #mobileStudentSelector .mobileStudentPersonButton:not(:disabled):active{ background:#fff!important; border-color:#bfcddd!important; box-shadow:0 1px 2px rgba(15,23,42,.04)!important; } } /* v1.14.42 mobile PAPS export-only footer and hard desktop-head suppression */ @media (max-width:768px){ body.mobilePapsView #app .pe87PageHead, body.mobilePapsView #app .papsUpload, body.mobilePapsView #app .papsPanel{display:none!important;} .mobilePapsExportOnly{width:100%;box-sizing:border-box;background:#fff;border:1px solid #dbe4ef;border-radius:14px;padding:12px;margin:0 0 12px;box-shadow:0 4px 14px rgba(31,56,88,.08);} .mobilePapsExportOnly .btn{display:block;width:100%;min-height:46px;margin:0;padding:10px 12px;font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mobilePapsExportOnly p{margin:12px 0 0;padding-top:12px;border-top:1px solid #e2e8f0;color:#718096;font-size:12px;line-height:1.55;word-break:keep-all;} } /* v1.14.43 mobile PAPS: desktop control DOM fallback + export action stability */ @media (max-width:768px){ body.mobilePapsView #app > .pe87PageHead, body.mobilePapsView #app > .papsUpload, body.mobilePapsView #app > .papsPanel, body.mobilePapsView #app #bulkMale, body.mobilePapsView #app #bulkFemale, body.mobilePapsView #app #exportPapsBtn, body.mobilePapsView #app #deletePapsBtn, body.mobilePapsView #app #savePapsBtn{display:none!important;visibility:hidden!important;pointer-events:none!important;} #mobilePapsHost{position:relative!important;z-index:1!important;display:block!important;width:100%!important;max-width:100%!important;} #mobilePapsHost[hidden]{display:none!important;} #mPapsExport{-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;pointer-events:auto!important;} } /* v1.14.51 — iPhone Safari 홈 달력 수업 수정 모달 입력 확대 방지 적용 범위: iPhone 크기 WebKit + 홈 달력 수정 폼만 */ @media (max-width: 430px) { @supports (-webkit-touch-callout: none) { .calModal .calEditGrid input, .calModal .calEditGrid select, .calModal .calEditGrid textarea { font-size: 16px !important; line-height: 1.35 !important; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } } } /* v1.14.52 — PC 종목별 진도표 헤더 및 차시 번호 중앙 정렬 */ .pe87SubjectPlan thead th { text-align: center !important; vertical-align: middle !important; } .pe87SubjectPlan tbody td:nth-child(2), .pe87SubjectPlan tbody td:nth-child(2) > b { text-align: center !important; vertical-align: middle !important; } .pe87SubjectPlan tbody td:nth-child(2) > b { display: block !important; width: 100% !important; } /* v1.14.53 - 학교스포츠클럽 체육수업 학생 선택 독립 모달 */ body.clubImportModalOpen{overflow:hidden!important} .clubImportModal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:24px} .clubImportModal.open{display:flex} .clubImportModalBackdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(15,23,42,.52);cursor:default} .clubImportModalPanel{position:relative;z-index:1;width:min(920px,calc(100vw - 48px));max-height:min(82vh,780px);display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #d7e1ed;border-radius:22px;box-shadow:0 24px 80px rgba(15,23,42,.28)} .clubImportModalHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px 18px;border-bottom:1px solid #e5edf5} .clubImportModalHeader h3{margin:0 0 5px;font-size:24px;color:#17324d} .clubImportModalHeader p{margin:0;color:#718096} .clubImportModalClose{width:46px;height:46px;flex:0 0 46px;border:1px solid #d8e2ee;border-radius:13px;background:#fff;color:#40556b;font-size:22px;cursor:pointer} .clubImportModalBody{min-height:180px;overflow:auto;padding:20px 24px 24px;-webkit-overflow-scrolling:touch} .clubImportModalToolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px} .clubImportModalToolbar>div:first-child{display:flex;flex-direction:column;gap:4px} .clubImportModalActions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} .clubImportModalGrid{max-height:52vh;overflow:auto;padding:4px;border:1px solid #e1e8f0;border-radius:16px;background:#f8fafc} .clubSchoolRosterHint{margin-left:2px} .clubSchoolImportFilters{display:grid;grid-template-columns:150px 150px minmax(220px,1fr);gap:10px;margin-bottom:14px;padding:14px;border:1px solid #dce7f2;border-radius:16px;background:#f7fbff} .clubSchoolImportFilters label{display:flex;min-width:0;flex-direction:column;gap:6px;color:#52677d;font-size:12px;font-weight:800} .clubSchoolImportFilters select,.clubSchoolImportFilters input{width:100%;min-width:0;height:42px;box-sizing:border-box} @media(max-width:768px){ .clubImportModal{align-items:flex-end;padding:0} .clubImportModalPanel{width:100%;max-height:88dvh;border-radius:24px 24px 0 0;border-bottom:0} .clubImportModalHeader{padding:20px 18px 15px} .clubImportModalHeader h3{font-size:21px} .clubImportModalBody{padding:16px 16px calc(18px + env(safe-area-inset-bottom))} .clubImportModalToolbar{align-items:stretch;flex-direction:column} .clubImportModalActions{display:grid;grid-template-columns:1fr 1fr} .clubImportModalActions .btn{width:100%;min-height:46px} .clubImportModalActions #clubImportCheckedBtn{grid-column:1/-1} .clubImportModalGrid{max-height:48dvh} .clubSchoolImportFilters{grid-template-columns:1fr 1fr;padding:12px} .clubSchoolImportFilters .clubSchoolNameSearch{grid-column:1/-1} } /* v1.14.55 — 선택된 트리 항목 hover 시 글자 대비 유지 */ .treeItem.active:hover{background:#3498db!important;color:#fff!important;filter:none!important} /* v1.14.57 — iPhone Safari 관리 탭 입력 포커스 자동 확대 방지 */ @supports (-webkit-touch-callout: none) { @media (max-width: 768px) { #app table.pe87ClassProgress input, #app table.pe87ClassProgress select, #app table.pe87ClassProgress textarea, #app #papsTableBox input, #app #papsTableBox select, #app #papsTableBox textarea, #app .assessmentTable input, #app .assessmentTable select, #app .assessmentTable textarea, #app .studentManage input, #app .studentManage select, #app .studentManage textarea, #app #studentDetail input, #app #studentDetail select, #app #studentDetail textarea, .mobileClassProgressView input, .mobileClassProgressView select, .mobileClassProgressView textarea, .mobilePapsView input, .mobilePapsView select, .mobilePapsView textarea, .mobileAssessmentView input, .mobileAssessmentView select, .mobileAssessmentView textarea, .mobileStudentView input, .mobileStudentView select, .mobileStudentView textarea { font-size:16px!important; -webkit-text-size-adjust:100%; } } } /* v1.15.4 — 모바일 홈 달력의 빈 날짜 수업 등록 */ @media (max-width:768px){ .mobileCalendarAddButton{ width:100%; min-height:44px; border:1px dashed #79aee0; border-radius:10px; background:#f4f9ff; color:#2475ba; font-size:14px; font-weight:900; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .mobileCalendarAddButton:active{background:#e5f2ff;border-color:#348ed8} } /* v1.15.5 — 모바일 홈 달력 수업 등록 전용 모달 */ @media (max-width:768px){ body.calendarModalPageLocked{ position:fixed!important; left:0!important; right:0!important; width:100%!important; overflow:hidden!important; overscroll-behavior:none!important; } .calendarAddModal{ align-items:flex-end!important; padding:0!important; z-index:1300!important; background:rgba(24,42,59,.58)!important; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .calendarAddModal .calendarAddDialog{ position:relative; width:100%!important; max-width:none!important; max-height:min(92dvh,820px)!important; margin:0!important; padding:0!important; overflow:auto!important; border:0!important; border-radius:24px 24px 0 0!important; background:#f4f8fc!important; box-shadow:0 -16px 48px rgba(13,40,64,.24)!important; -webkit-overflow-scrolling:touch; } .calendarAddModal .calendarAddDialog::before{ content:""; position:absolute; top:8px; left:50%; z-index:4; width:42px; height:5px; border-radius:999px; background:rgba(255,255,255,.62); transform:translateX(-50%); } .calendarAddHeader{ position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:25px 18px 16px; color:#fff; background:linear-gradient(135deg,#2e455b 0%,#207fbe 58%,#2f9be7 100%); box-shadow:0 7px 20px rgba(28,73,108,.16); } .calendarAddHeading{display:flex;align-items:center;gap:12px;min-width:0} .calendarAddHeading>div{min-width:0} .calendarAddHeading small{display:block;margin:0 0 3px;color:rgba(255,255,255,.78);font-size:11px;font-weight:800;letter-spacing:.04em} .calendarAddHeading h3{margin:0;color:#fff;font-size:19px;line-height:1.25;white-space:nowrap} .calendarAddIcon{ display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border:1px solid rgba(255,255,255,.28); border-radius:13px; background:rgba(255,255,255,.15); font-size:21px; } .calendarAddClose{ display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; padding:0; border:1px solid rgba(255,255,255,.3); border-radius:13px; background:rgba(255,255,255,.14); color:#fff; font-size:18px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; } .calendarAddModal .calendarAddItem{ margin:0!important; padding:16px 16px 0!important; border:0!important; border-left:0!important; border-radius:0!important; background:transparent!important; } .calendarAddModal .calEditGrid{gap:12px!important} .calendarAddModal .calEditGrid label{ gap:7px; padding:11px 12px 12px; border:1px solid #dce7f2; border-radius:14px; background:#fff; box-shadow:0 3px 12px rgba(39,75,107,.06); } .calendarAddModal .calEditGrid label>span{ color:#49677f; font-size:12px; font-weight:900; letter-spacing:.01em; } .calendarAddModal .calEditGrid input, .calendarAddModal .calEditGrid select, .calendarAddModal .calEditGrid textarea{ width:100%; min-height:48px!important; padding:11px 12px!important; border:1px solid #cfdeeb!important; border-radius:11px!important; background:#f8fbff!important; color:#20394f!important; font-size:16px!important; box-shadow:none!important; } .calendarAddModal .calEditGrid textarea{min-height:88px!important;resize:vertical} .calendarAddModal .calEditGrid input:focus, .calendarAddModal .calEditGrid select:focus, .calendarAddModal .calEditGrid textarea:focus{ outline:3px solid rgba(47,155,231,.16)!important; border-color:#2f9be7!important; background:#fff!important; } .calendarAddModal .calEditGrid input:disabled{ color:#647b8d!important; background:#eef4f8!important; opacity:1; } .calendarAddModal .calendarAddActions{ position:sticky; bottom:0; z-index:2; display:grid!important; grid-template-columns:1fr 1.45fr; gap:10px!important; margin:16px -16px 0!important; padding:13px 16px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid #dce7f2; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .calendarAddModal .calendarAddActions .btn{ width:100%; min-height:50px; margin:0!important; border-radius:13px!important; font-size:15px!important; font-weight:900!important; } .calendarAddModal .calendarAddSave{ border-color:#168ee0!important; background:linear-gradient(135deg,#168ee0,#2f9be7)!important; color:#fff!important; box-shadow:0 7px 18px rgba(22,142,224,.24); } .calendarAddModal .calendarAddCancel{background:#eef3f7!important;color:#425b70!important} } /* v1.15.23 — PC 홈 달력 수업 추가 모달 */ @media (min-width:769px) and (hover:hover) and (pointer:fine){ .calendarAddModal{ align-items:center!important; padding:32px!important; background:rgba(18,38,56,.5)!important; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .calendarAddModal .calendarAddDialog{ position:relative; width:min(850px,calc(100vw - 64px))!important; max-width:850px!important; max-height:88vh!important; padding:0!important; overflow:auto!important; border:1px solid rgba(197,216,232,.9)!important; border-radius:22px!important; background:#f4f8fc!important; box-shadow:0 28px 76px rgba(11,37,58,.32)!important; } .calendarAddModal .calendarAddHeader{ position:relative; display:flex; align-items:center; min-height:82px; padding:24px 78px 22px 26px; color:#fff; background:linear-gradient(135deg,#273f55 0%,#187fc2 58%,#2c9ce8 100%); box-shadow:0 8px 24px rgba(31,101,149,.16); } .calendarAddModal .calendarAddHeading{display:flex;align-items:center;gap:14px;min-width:0} .calendarAddModal .calendarAddHeading>div{min-width:0} .calendarAddModal .calendarAddHeading small{display:block;margin:0 0 4px;color:rgba(255,255,255,.76);font-size:12px;font-weight:800;letter-spacing:.03em} .calendarAddModal .calendarAddHeading h3{margin:0;color:#fff;font-size:22px;line-height:1.25;letter-spacing:-.35px} .calendarAddModal .calendarAddIcon{ display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; border:1px solid rgba(255,255,255,.28); border-radius:14px; background:rgba(255,255,255,.14); font-size:23px; } .calendarAddModal .calendarAddClose{ position:absolute; top:17px; right:17px; z-index:3; display:grid; place-items:center; width:42px; height:42px; min-width:42px; padding:0; border:1px solid rgba(255,255,255,.32); border-radius:12px; background:rgba(255,255,255,.13); color:#fff; font-size:19px; font-weight:900; line-height:1; cursor:pointer; transition:background .16s ease,transform .16s ease; } .calendarAddModal .calendarAddClose:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)} .calendarAddModal .calendarAddClose:focus-visible{outline:3px solid rgba(255,255,255,.38);outline-offset:2px} .calendarAddModal .calendarAddItem{ margin:0!important; padding:22px 24px 0!important; border:0!important; border-left:0!important; border-radius:0!important; background:transparent!important; } .calendarAddModal .calEditGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:13px!important} .calendarAddModal .calEditGrid label{ gap:7px; min-width:0; padding:11px 12px 12px; border:1px solid #d9e5ef; border-radius:13px; background:#fff; box-shadow:0 4px 14px rgba(38,75,105,.055); } .calendarAddModal .calEditGrid label>span{color:#47657e;font-size:12px;font-weight:900;letter-spacing:.01em} .calendarAddModal .calEditGrid input, .calendarAddModal .calEditGrid select, .calendarAddModal .calEditGrid textarea{ width:100%; min-width:0; min-height:43px!important; padding:9px 11px!important; border:1px solid #cadbe8!important; border-radius:10px!important; background:#f8fbfe!important; color:#213b51!important; font-size:14px!important; box-shadow:none!important; } .calendarAddModal .calEditGrid textarea{min-height:74px!important;resize:vertical} .calendarAddModal .calEditGrid input:focus, .calendarAddModal .calEditGrid select:focus, .calendarAddModal .calEditGrid textarea:focus{outline:3px solid rgba(39,148,220,.14)!important;border-color:#2794dc!important;background:#fff!important} .calendarAddModal .calEditGrid input:disabled{color:#61788a!important;background:#edf3f7!important;opacity:1} .calendarAddModal .calendarAddActions{ position:sticky; bottom:0; z-index:2; display:flex!important; justify-content:flex-end!important; gap:10px!important; margin:18px -24px 0!important; padding:15px 24px 18px!important; border-top:1px solid #d9e5ef; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .calendarAddModal .calendarAddActions .btn{min-width:118px;min-height:44px;margin:0!important;border-radius:11px!important;font-size:14px!important;font-weight:900!important} .calendarAddModal .calendarAddSave{border-color:#168ee0!important;background:linear-gradient(135deg,#168ee0,#2f9be7)!important;color:#fff!important;box-shadow:0 7px 18px rgba(22,142,224,.22)} .calendarAddModal .calendarAddCancel{background:#edf3f7!important;color:#405b72!important} } /* v1.15.24 final — 이후 공통 규칙보다 진도표 전용 디자인 우선 */ @media (min-width:769px){ .pe87SubjectPlanPanel,.pe87ProgressPanel{padding:16px!important;border-color:#d8e5ef!important;background:linear-gradient(180deg,#fbfdff 0,#fff 120px)!important} .pe87SubjectPlanPanel .pe87SubjectPlan{min-width:1080px!important;table-layout:fixed!important} .pe87ProgressPanel .pe87ClassProgress{min-width:1260px!important;table-layout:fixed!important} .pe87SubjectPlanPanel .tableWrap,.pe87ProgressPanel .tableWrap{border:1px solid #d4e2ed!important;border-radius:14px!important;box-shadow:0 10px 26px rgba(38,75,105,.08)!important} .subjectPlanActions,.pe87ProgressPanel .progressActions{display:flex!important;float:none!important;justify-content:space-between!important;gap:10px!important;margin-top:14px!important;padding-top:14px!important;border-top:1px solid #e1eaf1!important} } /* v1.15.26 — PAPS 등급 식별력 및 학생 세부정보 제목 정렬 */ .papsGrade, .overallGradeBadge{border:1px solid transparent!important;text-shadow:0 1px 1px rgba(15,23,42,.22)!important} .papsGrade.g1, .overallGradeBadge.grade1{background:#2563eb!important;border-color:#1d4ed8!important;color:#fff!important} .papsGrade.g2, .overallGradeBadge.grade2{background:#059669!important;border-color:#047857!important;color:#fff!important} .papsGrade.g3, .overallGradeBadge.grade3{background:#ca8a04!important;border-color:#a16207!important;color:#fff!important} .papsGrade.g4, .overallGradeBadge.grade4{background:#ea580c!important;border-color:#c2410c!important;color:#fff!important} .papsGrade.g5, .overallGradeBadge.grade5{background:#dc2626!important;border-color:#b91c1c!important;color:#fff!important} .papsGrade.bmi{border-radius:999px!important;color:#fff!important;text-shadow:0 1px 1px rgba(15,23,42,.25)!important} .papsGrade.bmiThin{background:#0284c7!important;border-color:#0369a1!important} .papsGrade.bmiNormal{background:#16a34a!important;border-color:#15803d!important} .papsGrade.bmiOver{background:#ca8a04!important;border-color:#a16207!important} .papsGrade.bmiMild{background:#ea580c!important;border-color:#c2410c!important} .papsGrade.bmiHigh{background:#dc2626!important;border-color:#b91c1c!important} .papsGrade.bmiUnknown{background:#64748b!important;border-color:#475569!important} #studentDetail .studentInfoCard>div>.label{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:24px; margin-bottom:6px!important; text-align:center!important; font-weight:850!important; line-height:1.35!important; } /* v1.15.27 — 학생 관리 연락처 동기화(PC·iPad 전용) */ .studentPhoneSyncBtn{white-space:nowrap} body.studentPhoneSyncOpen{overflow:hidden!important} .studentPhoneSyncModal{ position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center; padding:24px;background:rgba(20,39,55,.48);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px) } .studentPhoneSyncCard{width:min(680px,calc(100vw - 48px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid #d5e3ee;border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(22,47,68,.25)} .studentPhoneSyncCard>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 18px;border-bottom:1px solid #e3ebf2;background:linear-gradient(135deg,#f7fbff,#edf7fd)} .studentPhoneSyncCard>header>div{display:flex;align-items:center;gap:13px;min-width:0}.studentPhoneSyncIcon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:#168ee0;color:#fff;font-size:22px;box-shadow:0 7px 18px rgba(22,142,224,.24)} .studentPhoneSyncCard h3{margin:0 0 5px;color:#20384c;font-size:20px}.studentPhoneSyncCard header p{margin:0;color:#687e90;font-size:13px;line-height:1.45} .studentPhoneSyncClose{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:10px;background:#fff;color:#688095;font-weight:900;cursor:pointer;box-shadow:0 2px 9px rgba(26,61,87,.1)} .studentPhoneSyncSafety{display:flex;flex-direction:column;gap:4px;margin:18px 24px 14px;padding:13px 15px;border:1px solid #bfe0f5;border-radius:12px;background:#eef8fe;color:#31546d}.studentPhoneSyncSafety b{color:#177fbd;font-size:14px}.studentPhoneSyncSafety span{font-size:12px;line-height:1.5} .studentPhoneSyncMetrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:0 24px 16px}.studentPhoneSyncMetrics>div{display:flex;flex-direction:column;gap:7px;min-width:0;padding:13px 11px;border:1px solid #dce7ef;border-radius:12px;background:#f9fbfd}.studentPhoneSyncMetrics span{color:#718596;font-size:11px;font-weight:800}.studentPhoneSyncMetrics strong{color:#304b60;font-size:19px}.studentPhoneSyncMetrics .ready{border-color:#a8ddc1;background:#f1fbf5}.studentPhoneSyncMetrics .ready strong{color:#168c52}.studentPhoneSyncMetrics .protected{border-color:#f1d1cb;background:#fff7f5}.studentPhoneSyncMetrics .protected strong{color:#d55343} .studentPhoneSyncList,.studentPhoneSyncConflicts{margin:0 24px 16px;border:1px solid #dfe8ef;border-radius:12px;background:#fff;overflow:hidden}.studentPhoneSyncList h4{margin:0;padding:11px 14px;background:#f6f9fc;color:#405c71;font-size:13px}.studentPhoneSyncList>div,.studentPhoneSyncConflicts>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid #edf2f6;color:#4a6274;font-size:12px}.studentPhoneSyncList>div b{color:#168c52}.studentPhoneSyncConflicts summary{padding:12px 14px;color:#b24e42;font-size:12px;font-weight:850;cursor:pointer}.studentPhoneSyncConflicts>div b{color:#c45b4d;font-size:11px} .studentPhoneSyncCard>footer{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 20px;border-top:1px solid #e3ebf2;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.studentPhoneSyncCard>footer .btn{min-width:140px}.studentPhoneSyncApply:disabled{opacity:.48;cursor:not-allowed} .studentRosterActions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto} .studentRosterActions .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center} @media(max-width:768px){ body:has(#mobileStudentSelector) #app .studentRosterTools{ display:grid!important;grid-template-columns:minmax(0,1fr)!important; align-items:center!important;gap:8px!important;overflow:visible!important } body:has(#mobileStudentSelector) #app .studentRosterTools strong{justify-self:start!important} body:has(#mobileStudentSelector) #app .studentRosterActions{ display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; width:100%!important;margin-left:0!important;gap:8px!important } body:has(#mobileStudentSelector) #app .studentRosterActions .btn{ width:100%!important;min-width:0!important;min-height:40px!important; padding:7px 5px!important;white-space:normal!important;line-height:1.25!important } .studentPhoneSyncBtn{display:flex!important} .studentPhoneSyncModal{display:flex!important;padding:12px!important} .studentPhoneSyncCard{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:16px} .studentPhoneSyncCard>header{padding:16px 14px 14px} .studentPhoneSyncSafety{margin:14px 14px 12px} .studentPhoneSyncMetrics{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 14px 14px} .studentPhoneSyncList,.studentPhoneSyncConflicts{margin:0 14px 14px} .studentPhoneSyncCard>footer{padding:13px 14px 16px} .studentPhoneSyncCard>footer .btn{min-width:0;flex:1} } /* v1.15.49 — PC·iPad 홈 대시보드 및 체육수업 달력 분리 */ body.homeDashboardApp .pe87Main{background:#f4f7f5} body.homeDashboardApp #app{padding:20px!important;background:transparent!important} .ipadLessonCalendarOption{display:none!important} @media(max-width:768px){ html.pe87Ipad .ipadLessonCalendarOption, html.pe87IpadRuntime .ipadLessonCalendarOption{display:flex!important} } .homeDashboard{display:grid;gap:16px;width:100%;max-width:1560px;margin:0 auto;color:#142a40} .homeHero{ position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); min-height:330px;overflow:hidden;border:1px solid #213d58;border-radius:24px; background:linear-gradient(118deg,#102b46 0%,#143451 58%,#173954 100%); box-shadow:0 18px 42px rgba(25,54,78,.14) } .homeHeroCopy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:44px 54px} .homeHeroEyebrow{display:inline-flex;align-items:center;gap:9px;color:#80d8c2;font-size:12px;font-weight:950;letter-spacing:.12em} .homeHeroEyebrow i{width:8px;height:8px;border-radius:50%;background:#55c4a5;box-shadow:0 0 0 5px rgba(85,196,165,.12)} .homeHero h1{margin:19px 0 13px;color:#fff;font-size:48px;line-height:1.12;letter-spacing:-2.4px;font-weight:850} .homeHero h1 em{color:#82d8c4;font-style:normal} .homeHero p{max-width:610px;margin:0;color:#bdcad6;font-size:15px;line-height:1.75;font-weight:650} .homeHeroActions{display:flex;gap:10px;margin-top:26px} .homeHeroActions button{min-height:45px;padding:0 19px;border-radius:11px;font-size:14px;font-weight:900;cursor:pointer} .homeHeroPrimary{border:1px solid #1b9b7d;background:#178b71;color:#fff;box-shadow:0 8px 18px rgba(23,139,113,.2)} .homeHeroSecondary{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.05);color:#fff} .homeHeroVisual{position:relative;min-width:0;overflow:hidden} .homeHeroVisual::before,.homeHeroVisual::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(183,215,234,.18)} .homeHeroVisual::before{width:370px;height:370px;right:-38px;top:-94px;box-shadow:0 0 0 76px rgba(255,255,255,.018),0 0 0 154px rgba(255,255,255,.014)} .homeHeroVisual::after{width:260px;height:260px;right:36px;top:18px;border-color:rgba(183,215,234,.34)} .homeHeroOrbit{position:absolute;border:1px solid rgba(142,181,207,.22);border-radius:50%;transform:rotate(-14deg)} .orbitOne{width:420px;height:150px;right:-66px;top:92px}.orbitTwo{width:310px;height:106px;right:-25px;top:118px} .homeHeroDot{position:absolute;z-index:2;width:10px;height:10px;border:3px solid #ff9147;border-radius:50%} .dotOne{right:96px;top:59px}.dotTwo{right:250px;top:111px}.dotThree{right:52px;top:228px;border-color:#65cdb4} .homeHeroCount{position:absolute;z-index:3;right:81px;top:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;width:170px;height:170px;text-align:center;transform:translateY(-50%)} .homeHeroCount strong{color:#fff;font-size:52px;line-height:1;font-weight:900;letter-spacing:-2px} .homeHeroCount span{color:#aabcca;font-size:13px;line-height:1.2;font-weight:800} .homeMetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .homeMetrics article{display:grid;min-height:112px;padding:19px 22px;border:1px solid #dbe4df;border-radius:17px;background:#fff;box-shadow:0 6px 18px rgba(22,51,42,.045)} .homeMetrics span{color:#7b8985;font-size:12px;font-weight:850}.homeMetrics strong{margin-top:3px;color:#122b43;font-size:31px;line-height:1;font-weight:900} .homeMetrics small{align-self:end;margin-top:8px;color:#98a39f;font-size:11px;font-weight:700} .homeDashboardGrid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(285px,.55fr);gap:14px;min-width:0} .homeDashboardCard{min-width:0;overflow:hidden;border:1px solid #dbe4df;border-radius:19px;background:#fff;box-shadow:0 7px 22px rgba(22,51,42,.05)} .homeDashboardCard>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:23px 25px 15px} .homeDashboardCard header small{display:block;margin-bottom:7px;color:#18876f;font-size:10px;font-weight:950;letter-spacing:.15em} .homeDashboardCard h2{margin:0;color:#152e45;font-size:22px;letter-spacing:-.5px} .homeDashboardCard header button{border:0;background:transparent;color:#16846d;font-size:12px;font-weight:900;cursor:pointer} .homeSportsTerm{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:29px;padding:0 10px;border-radius:999px;background:#e9f6f2;color:#16846d;font-size:11px;font-weight:900} .homeScheduleColumns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0} .homeSchedulePane{min-width:0}.homeSchedulePane+.homeSchedulePane{border-left:1px solid #e3ebe7} .homeSchedulePane>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:23px 21px 15px} .homeScheduleCount{display:grid;place-items:center;min-width:29px;height:29px;padding:0 7px;border-radius:999px;background:#e9f6f2;color:#16846d;font-size:11px;font-weight:950} .homeTodayList,.homeUpcomingList,.homeSportsList{padding:0 21px 18px} .homeTodayList,.homeUpcomingList{max-height:520px;overflow:auto;overscroll-behavior:contain} .homeSportsList{max-height:520px;overflow:auto;overscroll-behavior:contain} .homeTodayRow{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:11px;width:100%;min-height:72px;padding:9px 0;border:0;border-top:1px solid #edf1ef;background:#fff;text-align:left;cursor:pointer} .homeTodayRow:first-child{border-top:0}.homeTodayRow:hover{background:#fbfdfc} .homeTodayPeriod{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:#eaf6f2;color:#16846d} .homeTodayPeriod b{font-size:17px;line-height:1}.homeTodayPeriod small{margin-top:4px;font-size:9px;font-weight:900} .homeUpcomingRow{display:grid;grid-template-columns:52px 17px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;min-height:72px;padding:9px 0;border:0;border-top:1px solid #edf1ef;background:#fff;text-align:left;cursor:pointer} .homeUpcomingRow:first-child{border-top:0}.homeUpcomingRow:hover{background:#fbfdfc} .homeUpcomingDate{display:grid;text-align:center}.homeUpcomingDate b{color:#304b5f;font-size:16px}.homeUpcomingDate small{margin-top:3px;color:#95a19d;font-size:10px;font-weight:800} .homeUpcomingLine{position:relative;align-self:stretch}.homeUpcomingLine::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:#e4ebe7} .homeUpcomingLine i{position:absolute;left:4px;top:50%;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#e37b43;box-shadow:0 0 0 1px #e37b43;transform:translateY(-50%)} .homeUpcomingInfo{display:grid;min-width:0}.homeUpcomingInfo b{overflow:hidden;color:#213a4f;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.homeUpcomingInfo small{overflow:hidden;margin-top:6px;color:#84918e;font-size:11px;text-overflow:ellipsis;white-space:nowrap} .homeUpcomingBadge{padding:5px 8px;border-radius:999px;background:#edf8f4;color:#16846d;font-size:10px;font-weight:900} .homeSportRow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:9px 11px;min-height:67px;padding:12px 0;border-top:1px solid #edf1ef} .homeSportRow:first-child{border-top:0}.homeSportIcon{display:grid;place-items:center;width:36px;height:36px;overflow:hidden;border-radius:11px;background:#e9f6f2;font-size:18px;white-space:nowrap} .homeSportRow>span:nth-child(2){display:grid;min-width:0}.homeSportRow>span:nth-child(2)>b{color:#243c50;font-size:12px;line-height:1.35;overflow-wrap:anywhere}.homeSportRow span small{margin-top:4px;color:#94a09c;font-size:9px} .homeSportRow>strong{color:#1c354b;font-size:19px}.homeSportRow>strong small{margin-left:3px;color:#8d9b96;font-size:9px} .homeSportClasses{grid-column:2/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px} .homeSportClasses>span{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;padding:5px 7px;border:1px solid #e3ebe7;border-radius:7px;background:#f8fbf9;color:#536762} .homeSportClasses>span b{overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.homeSportClasses>span em{flex:0 0 auto;color:#18876f;font-size:9px;font-style:normal;font-weight:900} .homeSportClasses .emptyClass{grid-column:1/-1;justify-content:center} .homeDashboardLoading,.homeDashboardEmpty{display:grid;place-items:center;min-height:125px;padding:22px;color:#889690;font-size:12px;text-align:center} .adminHomeCopyGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px} .adminCollapsibleCard{height:auto!important;min-height:0!important;padding:0!important;overflow:hidden} .adminCollapsibleCard>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px;padding:17px 20px;list-style:none;cursor:pointer;color:#243a50;background:linear-gradient(180deg,#fff,#f8fbfe)} .adminCollapsibleCard>summary::-webkit-details-marker{display:none} .adminCollapsibleCard>summary>span{display:grid;gap:5px}.adminCollapsibleCard>summary b{font-size:17px}.adminCollapsibleCard>summary small{color:#7d8d9b;font-size:11px;font-weight:750} .adminCollapsibleCard>summary i{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:1px solid #d7e2eb;border-radius:10px;background:#fff;color:#557087;font-size:19px;font-style:normal;transition:transform .18s ease} .adminCollapsibleCard[open]>summary{border-bottom:1px solid #dfe7ee}.adminCollapsibleCard[open]>summary i{transform:rotate(180deg)} .adminCollapsibleBody{padding:17px 20px 20px}.adminHomeCopyFields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px} .adminHomeCopyFields .hint{grid-column:1/-1;margin:0 0 2px;padding:10px 12px;border-radius:9px;background:#f2f8fc}.adminHomeCopyFields code{color:#1976b8;font-weight:900} .adminHomeCopyFields label{display:grid;gap:6px;margin:0!important;color:#425c71;font-size:12px;font-weight:900}.adminHomeCopyFields input,.adminHomeCopyFields textarea{width:100%;min-width:0;box-sizing:border-box} .adminHomeCopyFields label.wide{grid-column:1/-1} body.lessonCalendarApp .pe87Main{background:#f4f7fb} body.lessonCalendarApp #app{padding:20px!important;background:transparent!important} body.lessonCalendarApp .calendarHeader{padding:19px 21px!important;border-color:#d6e1e9!important;border-radius:17px!important;background:linear-gradient(180deg,#fff,#fbfdff)!important} body.lessonCalendarApp .calendarHeader>div.row{display:grid!important;grid-template-columns:minmax(230px,1fr) auto;gap:18px!important;align-items:center!important} body.lessonCalendarApp .calendarHeader>div.row>div.row{display:grid!important;grid-template-columns:95px minmax(150px,180px) 72px 95px;gap:8px!important;justify-content:end} body.lessonCalendarApp .calendarHeader .btn,body.lessonCalendarApp .monthPickerButton{width:100%!important;min-width:0!important;height:43px!important;padding:0 10px!important;text-align:center!important} body.lessonCalendarApp #app>.panel:not(.calendarHeader){padding:17px!important;border-color:#d6e1e9!important} body.lessonCalendarApp .calWeekHead{border-color:#d6e1e9!important;background:#f4f8fb!important} body.lessonCalendarApp .calDay{border-color:#dce5ec!important} body.lessonCalendarApp .monthSelectDialog label{display:grid!important;gap:7px;text-align:center!important} body.lessonCalendarApp .monthSelectDialog select{text-align:center!important;text-align-last:center!important} body.lessonCalendarApp .calendarAddModal .calendarAddSectionGrid label>span{display:block!important;text-align:center!important} body.lessonCalendarApp .calendarAddModal .calendarAddSectionGrid input, body.lessonCalendarApp .calendarAddModal .calendarAddSectionGrid select{height:43px!important;text-align:center!important;text-align-last:center!important} body.lessonCalendarApp .calendarAddModal .calendarAddSectionGrid textarea{text-align:left!important} @media(max-width:1250px){ body.homeDashboardApp #app,body.lessonCalendarApp #app{padding:14px!important} .homeDashboard{gap:12px}.homeHero{grid-template-columns:minmax(0,1fr) minmax(205px,.48fr);min-height:298px} .homeHeroCopy{padding:34px 35px}.homeHero h1{font-size:39px;letter-spacing:-1.8px}.homeHero p{font-size:13px} .homeHeroVisual::before{right:-105px}.homeHeroVisual::after{right:-13px}.homeHeroCount{right:31px} .homeDashboardGrid{grid-template-columns:minmax(0,1.2fr) minmax(235px,.8fr);gap:12px} .homeDashboardCard>header,.homeSchedulePane>header{padding:19px 17px 13px}.homeTodayList,.homeUpcomingList,.homeSportsList{padding:0 17px 15px} body.lessonCalendarApp .calendarHeader>div.row{grid-template-columns:1fr!important} body.lessonCalendarApp .calendarHeader>div.row>div.row{justify-content:stretch!important} } @media(max-width:1100px){ .homeDashboardGrid{grid-template-columns:1fr} .homeSportsList{max-height:420px} } @media(max-width:920px){ .homeHero{grid-template-columns:minmax(0,1fr) 205px;min-height:275px;border-radius:19px} .homeHeroCopy{padding:29px 31px}.homeHero h1{margin:14px 0 10px;font-size:34px}.homeHeroActions{margin-top:19px} .homeHeroVisual::before{right:-155px;top:-105px}.homeHeroVisual::after{right:-64px}.homeHeroCount{right:0;top:50%;transform:translateY(-50%) scale(.85)} .homeMetrics{gap:10px}.homeMetrics article{min-height:98px;padding:15px 17px} .homeDashboardGrid{grid-template-columns:1fr} .homeUpcomingRow{grid-template-columns:46px 12px minmax(0,1fr);gap:7px}.homeUpcomingBadge{display:none}.homeTodayRow{grid-template-columns:46px minmax(0,1fr);gap:8px}.homeTodayPeriod{width:43px;height:43px} .adminHomeCopyGrid{grid-template-columns:1fr;gap:12px}.adminHomeCopyFields{grid-template-columns:1fr}.adminHomeCopyFields .hint,.adminHomeCopyFields label.wide{grid-column:auto} body.lessonCalendarApp .calendarHeader>div.row>div.row{grid-template-columns:82px minmax(150px,1fr) 68px 82px} } /* iPhone Safari는 16px 미만의 입력 요소에 포커스할 때 화면을 자동 확대합니다. 설정 화면의 입력 요소만 16px로 고정하고 iPad/PC/Android 레이아웃은 유지합니다. */ @supports (-webkit-touch-callout:none){ @media (hover:none) and (pointer:coarse){ html:not(.pe87Ipad) .adminTopBar input, html:not(.pe87Ipad) .adminTopBar select, html:not(.pe87Ipad) .adminTopBar textarea, html:not(.pe87Ipad) .adminCard input, html:not(.pe87Ipad) .adminCard select, html:not(.pe87Ipad) .adminCard textarea{ font-size:16px!important; } } } /* 달력 본문을 누르거나 드래그할 때 브라우저의 파란 텍스트 선택·터치 강조가 나타나지 않도록 합니다. 날짜/수업 클릭 동작과 연결 날짜 테두리는 유지합니다. */ #calendarBox{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; } #calendarBox *{ -webkit-tap-highlight-color:transparent; } #calendarBox::selection, #calendarBox *::selection{ background:transparent; }