/* EAIM 교사업무 공통 화면 v1.0 (2026-09-29) */
:root{
  --board:#EEF1F4; --paper:#FFFFFF; --ink:#1F2A44; --muted:#5C6778; --line:#CBD3DD;
  --g1:#2F74B5; --g2:#2A8C5E; --g3:#B7791F; --g0:#7A8594;
  --swap:#B8336A; --cover:#6B4FBB; --warn:#A15C00; --bad:#B42318; --ok:#1F7A4D;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--board);color:var(--ink);font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  font-size:15px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--g1)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--g1);outline-offset:2px}

.top{background:var(--ink);color:#fff;padding:14px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.top a{color:#fff;text-decoration:none;opacity:.8;font-size:.9rem}
.top a:hover{opacity:1;text-decoration:underline}
.top h1{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.top .school{margin-left:auto;font-size:.9rem;opacity:.85}
.wrap{max-width:1280px;margin:0 auto;padding:16px}

.tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 14px;border-bottom:2px solid var(--line)}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.panel h2{margin:0 0 6px;font-size:1.1rem}
.panel p.help{margin:0 0 12px;color:var(--muted);font-size:.9rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row+.row{margin-top:10px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}
input[type=text],input[type=number],input[type=date],select,textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;min-width:0}
input[type=number]{width:72px}
textarea{width:100%;min-height:180px;font-family:inherit;font-size:.85rem;white-space:pre}

.btn{border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:8px;padding:8px 14px;font-weight:700}
.btn.line{background:#fff;color:var(--ink)}
.btn.small{padding:4px 10px;font-size:.85rem;font-weight:600}
.btn.danger{background:#fff;color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.tt{border-collapse:collapse;font-size:.82rem;min-width:100%}
table.tt th,table.tt td{border:1px solid #E1E6EC;padding:0;text-align:center;vertical-align:middle}
table.tt thead th{background:#F5F7FA;font-weight:700;padding:4px 2px;position:sticky;top:0}
table.tt th.day{background:var(--ink);color:#fff;font-size:.85rem}
table.tt th.name{position:sticky;left:0;background:#fff;z-index:1;text-align:left;padding:4px 8px;min-width:108px;white-space:nowrap}
table.tt th.name small{display:block;color:var(--muted);font-weight:400}
table.tt td.dayend,table.tt th.dayend{border-right:2px solid var(--ink)}
.cell{display:block;width:100%;min-width:44px;min-height:34px;border:0;background:none;padding:3px 2px;line-height:1.25}
button.cell:hover{background:#F2F5F9}
.chip{display:inline-block;border-radius:6px;padding:2px 5px;font-weight:800;color:#fff;font-size:.8rem;white-space:nowrap}
.chip.g1{background:var(--g1)} .chip.g2{background:var(--g2)} .chip.g3{background:var(--g3)} .chip.g0{background:var(--g0)}
.sub{display:block;font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px;margin:1px auto 0}
.note{display:inline-block;font-size:.72rem;color:var(--muted);background:#EEF0F3;border-radius:5px;padding:1px 4px}
td.mark-swap{box-shadow:inset 0 0 0 2px var(--swap)}
td.mark-cover{box-shadow:inset 0 0 0 2px var(--cover)}
td.mark-empty{background:repeating-linear-gradient(45deg,#fff,#fff 5px,#F3E8EE 5px,#F3E8EE 10px)}
td.pick{box-shadow:inset 0 0 0 3px var(--swap);background:#FBEFF4}
td.conflict{background:#FDECEA}

.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin:8px 0}
.legend span{display:inline-flex;align-items:center;gap:5px}
.sw{display:inline-block;width:14px;height:14px;border-radius:3px}

.list{list-style:none;margin:0;padding:0}
.list li{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;background:#fff;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.list li .grow{flex:1 1 260px}
.warn{color:var(--warn);font-size:.82rem}
.bad{color:var(--bad)}
.okc{color:var(--ok)}
.muted{color:var(--muted)}
.tag{display:inline-block;font-size:.72rem;border-radius:5px;padding:1px 6px;border:1px solid var(--line);color:var(--muted);margin-left:4px}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;
  font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:90vw}
.toast.on{opacity:1}
dialog{border:1px solid var(--line);border-radius:12px;padding:18px;max-width:420px;width:92vw}
dialog::backdrop{background:rgba(31,42,68,.35)}
dialog h3{margin:0 0 8px}

.grid-classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.eaim-copy a{color:inherit}
@media (max-width:640px){
  .wrap{padding:10px}.panel{padding:14px}
  .top .school{margin-left:0;width:100%}
}
@media print{
  body{background:#fff;font-size:11px}
  .top,.tabs,.noprint,.toast,.eaim-copy{display:none!important}
  .panel{border:0;padding:0}
  .scroll{overflow:visible;border:0}
  table.tt{font-size:9px}
  .chip{color:#000!important;background:none!important;border:1px solid #000}
  .print-break{page-break-after:always}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
@media print{ .print-only{display:block!important} }