:root{--plane:#f9f9f7;--surface:#fcfcfb;--ink:#0b0b0b;--ink2:#52514e;--muted:#8a8984;--line:#e4e3de;
--s1:#2a78d6;--s1-soft:#cde2fb;--s2:#eb6834;--good:#0ca30c;--warn:#fab219;--serious:#ec835a;--crit:#d03b3b;--track:#eceae4}
*{box-sizing:border-box}
body{margin:0;background:var(--plane);color:var(--ink);font:15px/1.6 -apple-system,"Pretendard","Malgun Gothic","Noto Sans KR",sans-serif}
a{color:var(--s1);text-decoration:none}a:hover{text-decoration:underline}
header.top{background:var(--surface);border-bottom:1px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:20px}
header.top .brand{font-weight:700;color:var(--ink);font-size:16px}
header.top nav{display:flex;gap:16px;flex:1}
header.top form{margin:0}
main{max-width:1180px;margin:24px auto;padding:0 24px 60px}
h1{font-size:22px;margin:0 0 4px}h2{font-size:17px;margin:28px 0 10px}h3{font-size:15px;margin:18px 0 6px}
.sub{color:var(--ink2);margin:0 0 18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.card h3{margin:0 0 2px;font-size:17px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 6px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.tile .k{color:var(--ink2);font-size:12.5px}.tile .v{font-size:22px;font-weight:700;line-height:1.3}.tile .n{color:var(--ink2);font-size:12.5px}
.meter{height:8px;background:var(--track);border-radius:4px;overflow:hidden;margin:6px 0 2px}
.meter>i{display:block;height:100%;background:var(--s1);border-radius:4px}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink2)}
.row b{color:var(--ink);font-weight:600}
.badge{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12.5px;border:1px solid var(--line);background:#fff;color:var(--ink2);white-space:nowrap}
.badge.dot::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--muted)}
.st-완료::before,.st-제출::before,.st-정답::before{background:var(--good)!important}
.st-진행::before,.st-예정::before{background:var(--s1)!important}
.st-부분::before,.st-연기::before,.st-모름::before{background:var(--warn)!important}
.st-지연::before,.st-미제출::before,.st-No-Show::before,.st-오답::before{background:var(--crit)!important}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0 20px;flex-wrap:wrap}
.tabs a{padding:9px 16px;color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--s1)}
table{width:100%;border-collapse:collapse;background:var(--surface);font-size:14px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:#f3f2ee;font-weight:600;font-size:13px;color:var(--ink2);white-space:nowrap}
td.c,th.c{text-align:center}td.num{text-align:right;font-variant-numeric:tabular-nums}
.pre{white-space:pre-wrap}
.md table{margin:10px 0}.md h1{font-size:20px;margin-top:0}.md h2{font-size:16.5px;border-top:1px solid var(--line);padding-top:16px}
.md blockquote{margin:8px 0;padding:6px 14px;border-left:3px solid var(--s1-soft);color:var(--ink2);background:#f6f5f1}
.md code{background:#f1f0ec;padding:1px 5px;border-radius:4px;font-size:13px}.md pre{background:#f1f0ec;padding:12px;border-radius:8px;overflow:auto}
.md hr{border:0;border-top:1px solid var(--line);margin:18px 0}
input,select,textarea,button{font:inherit}
input[type=text],input[type=date],input[type=password],input[type=number],select,textarea{width:100%;padding:7px 9px;border:1px solid #cfcdc6;border-radius:7px;background:#fff;color:var(--ink)}
textarea{min-height:90px;resize:vertical}
label{display:block;font-size:13px;color:var(--ink2);margin:10px 0 3px}
.btn{display:inline-block;padding:7px 14px;border-radius:7px;border:1px solid #cfcdc6;background:#fff;color:var(--ink);cursor:pointer;font-size:14px}
.btn.primary{background:var(--s1);border-color:var(--s1);color:#fff}.btn.danger{color:var(--crit);border-color:#e6b8b8}
.btn:hover{text-decoration:none;filter:brightness(.97)}
.actions{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.note{color:var(--ink2);font-size:13px}
.warnbox{border:1px solid #f0d9a8;background:#fdf7e7;border-radius:8px;padding:10px 14px;font-size:13.5px;color:#5c4a14;margin:12px 0}
.login{max-width:360px;margin:12vh auto;}
.err{color:var(--crit);font-size:14px;margin:8px 0}
.bars{display:grid;grid-template-columns:140px 1fr 86px;gap:6px 12px;align-items:center;font-size:14px}
.bars .bar{height:14px;background:var(--track);border-radius:4px;position:relative}
.bars .bar>i{display:block;height:100%;background:var(--s1);border-radius:4px}
.bars .bar>u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.legend{display:flex;gap:16px;font-size:13px;color:var(--ink2);margin:6px 0 10px;flex-wrap:wrap;align-items:center}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.gantt{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.gantt table{min-width:1250px;font-size:13px;border:0}
.gantt th,.gantt td{border-left:0;border-right:0}
.gantt .wk{width:30px;min-width:30px;padding:6px 0;text-align:center;font-size:11px;font-weight:400}
.gantt td.lane{padding:0;position:relative}
.gantt .lanegrid{display:grid;height:34px;align-items:center;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:30px 100%}
.gantt .gbar{height:14px;border-radius:4px;margin:0 2px;position:relative}
.gantt .gbar.o-학생{background:var(--s1)}.gantt .gbar.o-멘토{background:var(--s2)}
.gantt .gbar.done{opacity:.38}
.gantt .gbar:hover::after{content:attr(data-tip);position:absolute;left:0;top:20px;z-index:5;background:var(--ink);color:#fff;padding:4px 8px;border-radius:6px;white-space:nowrap;font-size:12px}
.gantt .nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.55;pointer-events:none}
.gantt tr.phase td{background:#f3f2ee;font-weight:600;color:var(--ink2)}
details.edit summary{cursor:pointer;color:var(--s1);font-size:13px;list-style:none}
details.edit summary::-webkit-details-marker{display:none}
details.edit[open] summary{margin-bottom:8px}
.side{display:grid;grid-template-columns:240px 1fr;gap:20px}
.side ul{list-style:none;padding:0;margin:0 0 14px}.side li a{display:block;padding:4px 8px;border-radius:6px;font-size:13.5px}
.side li a.on{background:var(--s1-soft);color:var(--ink)}
@media(max-width:760px){.form2,.side{grid-template-columns:1fr}.bars{grid-template-columns:100px 1fr 70px}}

.md>h2:first-child,.md>h1:first-child{border-top:0;padding-top:0;margin-top:0}
.gantt .wk{overflow:visible;white-space:nowrap}

/* ---------- 모바일 ---------- */
.sm{display:none}
.tw{overflow-x:auto}
.md table{display:block;overflow-x:auto;max-width:100%}
.md{overflow-wrap:anywhere}
.gantt .stick{position:sticky;left:0;z-index:3;background:var(--surface)}
.gantt th.stick,.gantt tr.phase .stick{background:#f3f2ee}
@media(max-width:760px){
  body{font-size:15px}
  header.top{padding:10px 14px;gap:10px;flex-wrap:wrap}
  header.top nav{order:3;flex-basis:100%;gap:18px;overflow-x:auto;white-space:nowrap;padding-bottom:2px}
  header.top .brand{flex:1}
  main{margin:16px auto;padding:0 14px 60px}
  h1{font-size:20px}
  .grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr;gap:8px}
  .tile{padding:10px 12px}.tile .v{font-size:19px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;margin:14px -14px 16px;padding:0 14px}
  .tabs a{padding:9px 12px}
  .card{padding:14px}
  input[type=text],input[type=date],input[type=password],input[type=number],select,textarea{font-size:16px}
  .bars{grid-template-columns:1fr 74px;gap:2px 10px}
  .bars>div:nth-child(3n+1){grid-column:1 / -1;margin-top:8px}
  .hm{display:none!important}.sm{display:block}
  /* 표를 카드로 */
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%!important}
  table.stack{background:transparent;border:0}
  table.stack tr:first-child{display:none}
  table.stack tr{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:0 0 10px;padding:6px 12px 10px}
  table.stack tr.grp{background:transparent;border:0;padding:0;margin:16px 0 6px}
  table.stack tr.grp td{background:transparent!important;border:0;padding:0;font-size:14px;color:var(--ink2)}
  table.stack td{border:0;border-bottom:1px solid var(--line);padding:8px 0;text-align:left}
  table.stack td:last-child{border-bottom:0}
  table.stack td[data-label]::before{content:attr(data-label);display:block;font-size:12px;color:var(--ink2);margin-bottom:2px}
  table.stack td.head{font-weight:700;font-size:15px}
  table.stack td.head[data-label]::before{display:none}
  table.stack td.head[data-n]::before{content:attr(data-n);display:block;font-size:12px;color:var(--ink2);font-weight:400}
  table.stack td:empty{display:none}
  .gantt table{min-width:0;width:max-content}
  .gantt th.stick,.gantt td.stick{min-width:150px!important;max-width:150px;font-size:12.5px}
  .gantt th,.gantt td{padding:6px 8px}
  .side{grid-template-columns:1fr}
  .actions .btn{padding:9px 14px}
}

input[type=file]{max-width:100%;min-width:0}
@media(max-width:760px){
  .tiles{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px -14px 4px;padding:0 14px 4px;scroll-snap-type:x proximity}
  .tiles .tile{flex:0 0 136px;scroll-snap-align:start}
  .tiles .tile .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.stack td.in{display:inline-block;width:32%!important;border-bottom:0;vertical-align:top;padding-bottom:4px}
  table.stack td.in2{border-top:1px solid var(--line)}
  table.stack td.pre{border-top:1px solid var(--line)}
  .actions{align-items:stretch}
  form .actions input[type=file]{flex:1 1 100%}
  table.stack textarea{min-height:70px}
}

td,.pre,.note{overflow-wrap:anywhere}