:root{
  --bg:#0b0b12;
  --panel:#14141f;
  --panel2:#1c1c2a;
  --line:#33334a;
  --text:#e8e8f0;
  --muted:#8888a4;
  --cursor:#00ff9c;
  --danger:#ff4d6d;
  --c-major1:#2979ff;
  --c-general:#ffd500;
  --c-major2:#00e676;
  --c-job:#ff6d00;
  --c-etc:#e040fb;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Galmuri11','Galmuri9',monospace;
  -webkit-font-smoothing:none;
  height:100vh;
  height:100dvh;
  height: calc(var(--vh, 1vh) * 100); /* index.html의 스크립트가 재는 실제 높이(우선순위 가장 높음) */
  display:flex;
  flex-direction:column;
  /* viewport-fit=cover로 화면 끝까지 그리는 대신, 상태바/노치/제스처 바
     영역만큼은 여백으로 비워서 내용이 거기 깔리지 않게 합니다. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
button, input, select, textarea{ font-family:'Galmuri11','Galmuri9',monospace; }
::selection{ background:var(--cursor); color:#000; }

main{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:6px;
  min-height:0;
  overflow:hidden;
}
.page{ display:none; flex:1; min-height:0; flex-direction:column; }
.page.active{ display:flex; }

/* ---------- TIMETABLE ---------- */
.tt-wrap{ flex:1; min-height:0; display:flex; position:relative; }
.tt-grid{
  flex:1;
  position:relative;
  display:grid;
  grid-template-columns: 36px repeat(6, 1fr); /* DAYS 개수(config.js) + timetable.js의 TT_TIME_COL과 맞춰야 함 */
  grid-template-rows: 32px repeat(14, 1fr); /* HOURS 개수(config.js) + timetable.js의 TT_HEADER_ROW와 맞춰야 함 */
  gap:1px;
  background:var(--line);
  border:2px solid var(--line);
  user-select:none; /* 여러 칸 드래그 선택 시 텍스트 선택 방지 */
}
.tt-cell-head{
  background:var(--panel2);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(12px,2.2vw,16px);
  color:var(--text);
}
.tt-cell-head.tocal{
  background:var(--cursor);
  color:#000;
  cursor:pointer;
  font-size:11px; /* 달력 페이지의 .field-btn(시간표→ 버튼)과 동일한 글씨 크기 */
}
.tt-cell-head.tocal:active{ background:#00cc7d; }
.tt-cell-head.today{ color:var(--danger); font-weight:bold; }
.tt-time{
  background:var(--panel);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:2px;
  font-size:clamp(9px,1.6vw,12px);
  color:var(--muted);
}
.tt-empty{ background:var(--panel); cursor:pointer; z-index:1; touch-action:none; }
.tt-empty:hover{ background:#22222f; }
.tt-empty.tt-dragging{ background:rgba(0,255,156,0.28); }
.tt-empty.tt-locked{ cursor:default; } /* 토요일 칸: 외계인 전용, 클릭해도 일정 등록 안 됨 */
.tt-empty.tt-locked:hover{ background:var(--panel); }
.tt-block{
  position:relative;
  z-index:2;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2px;
  overflow:hidden;
  border:2px solid #000;
  text-align:center;
}
.tt-block.no-repeat{ border-style:dashed; }
.tt-block .name{
  font-size:clamp(12px,2.6vw,17px);
  color:#fff;
  font-weight:bold;
  line-height:1.15;
  word-break:break-all;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 0 3px rgba(0,0,0,.7);
}
.tt-block .loc{
  font-size:clamp(9px,1.8vw,13px);
  color:#fff;
  font-weight:bold;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.tt-block .once-tag{
  position:absolute; top:1px; right:2px;
  font-size:8px; color:#fff; text-shadow:1px 1px 0 #000;
}

.tt-alien{ position:absolute; z-index:5; display:none; }
.tt-bolt{
  position:absolute;
  height:2px; width:0;
  background:var(--danger);
  z-index:6;
  /* transition은 timetable.js의 shootAlienLaser()가 실제 이동 거리에 맞춰 인라인으로 지정합니다. */
}
.tt-boom{ position:absolute; z-index:6; animation: boom-pop 0.35s ease-out forwards; }

/* ---------- CALENDAR ---------- */
.cal-setup{
  background:var(--panel);
  padding:10px;
  border-bottom:2px solid var(--line);
  flex-shrink:0;
}
.cal-setup-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.cal-setup label{ font-size:11px; color:var(--muted); }
.cal-setup input[type=text]{
  background:var(--panel2); color:var(--text);
  border:2px solid var(--line); padding:5px; width:100px;
  font-family:inherit; font-size:11px;
}
.cal-setup .err-msg{ margin:0; min-height:0; }
.field-btn{
  background:var(--cursor); color:#000; border:2px solid #000;
  box-shadow:2px 2px 0 #000; padding:6px 12px; cursor:pointer; font-size:11px;
}
.field-btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 #000; }
.field-btn.secondary{ background:var(--panel2); color:var(--text); border-color:var(--line); }
.field-btn.danger{ background:var(--danger); color:#000; }
.push-right{ margin-left:auto; }

.cal-wrap{
  flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column;
  position:relative; background:var(--panel);
}
#calBody{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-auto-rows:1fr;
  gap:10px 2px;
  flex:1;
  min-height:0; /* 그리드가 flex 아이템의 기본 min-height:auto 때문에 화면을 넘치지 않도록 */
}
.cal-cell{
  min-height:20px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.cal-cell:hover .cal-daynum{ color:var(--text); }
.cal-cell.today .cal-daynum{ color:var(--cursor); font-weight:bold; }
.cal-daynum{
  font-size:11px; color:var(--muted);
}
.cal-daynum.past{ color:#000; }
.alien-big-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.alien-num{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#ff2d2d; font-size:11px; font-weight:bold;
  text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
}
.cal-empty-msg{ color:var(--muted); font-size:12px; padding:20px; text-align:center; }

.invader-stage{
  position:relative;
  height:60px;
  margin-top:8px;
  flex-shrink:0;
  overflow:hidden;
}
.ship{ position:absolute; bottom:6px; left:0; cursor:pointer; }
.bullet{
  position:absolute;
  width:3px; height:12px;
  background:#ff2d2d;
  bottom:34px;
  pointer-events:none;
  transition: bottom linear;
}
.boom{
  position:absolute;
  pointer-events:none;
  animation: boom-pop 0.35s ease-out forwards;
}
@keyframes boom-pop{
  0%{ transform:scale(0.3); opacity:1; }
  70%{ transform:scale(1.4); opacity:1; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ---------- MODAL ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
  z-index:50; padding:16px;
}
.overlay.hidden{ display:none; }
.modal{
  background:var(--panel);
  border:2px solid var(--line);
  box-shadow:5px 5px 0 #000;
  width:100%; max-width:360px;
  max-height:90vh;
  overflow-y:auto;
  padding:16px;
}
.modal h3{
  margin:0 0 12px; font-size:14px; color:var(--cursor);
  font-family:'Galmuri14','Galmuri11',monospace;
}
.modal label{ display:block; font-size:11px; color:var(--muted); margin:10px 0 4px; }
.modal input[type=text], .modal input[type=number], .modal select, .modal textarea{
  width:100%; background:var(--panel2); color:var(--text);
  border:2px solid var(--line); padding:7px; font-size:12px;
}
.modal textarea{ resize:none; overflow:hidden; }
.slot-header{
  display:grid; grid-template-columns:repeat(3,1fr) 28px; gap:6px;
  font-size:10px; color:var(--muted); margin:10px 0 4px;
}
.slot-row{
  display:grid; grid-template-columns:repeat(3,1fr) 28px; gap:6px; margin-bottom:6px;
}
.slot-row select{ width:100%; padding:6px 4px; }
.slot-row button{ padding:0; font-size:13px; }
.seg{ display:flex; gap:6px; }
.seg button{
  flex:1; background:var(--panel2); color:var(--muted);
  border:2px solid var(--line); padding:7px 4px; cursor:pointer; font-size:11px;
}
.seg button.active{ background:var(--cursor); color:#000; border-color:var(--cursor); }
.row2{ display:flex; gap:8px; }
.row2 > div{ flex:1; }
.modal-actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.modal-actions button{ flex:1; }
.err-msg{ color:var(--danger); font-size:11px; margin-top:6px; min-height:14px; }
.task-item{ border:2px solid var(--line); padding:8px; margin-bottom:8px; font-size:11px; background:var(--panel2); }
.task-item .t-title{ font-size:12px; margin-bottom:2px; }
.task-item .t-meta{ color:var(--muted); margin-bottom:4px; }
.task-item .t-memo{ color:var(--text); margin-bottom:6px; white-space:pre-wrap; }
.task-item .t-actions{ display:flex; gap:6px; }
.task-item .t-actions button{ font-size:10px; padding:4px 8px; }
hr.sep{ border:none; border-top:2px solid var(--line); margin:14px 0; }

/* ---------- GRADE (성적) — 터미널/프롬프트 느낌, 전부 흰 글씨 ---------- */
#gradeBody{
  overflow-y:auto;
  padding:14px 16px;
  display:block; /* .cal-wrap의 flex 대신 그냥 위에서부터 줄줄이 쌓이게 */
  font-family:'Consolas','Courier New',monospace;
  color:#fff;
}
.grade-divider{ border-top:1px dashed #fff; opacity:0.5; margin:12px 0; }
.grade-row{ display:flex; align-items:center; gap:10px; padding:4px 0; font-size:13px; color:#fff; flex-wrap:wrap; }
.gr-label{ min-width:120px; color:#fff; }
.gr-value{ color:#fff; }
.grade-field{
  background:transparent; border:none; border-bottom:1px solid #555; color:#fff;
  font-family:inherit; font-size:13px; padding:2px 4px; width:110px;
}
.grade-field:focus{ outline:none; border-bottom-color:#fff; }
.grade-field::placeholder{ color:#555; }
.grade-preview{ color:#8888a4; font-size:12px; }
.grade-live{ color:var(--cursor); }
.grade-course-row{
  display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; color:#fff;
  border-bottom:1px dashed #333; flex-wrap:wrap;
}
.gc-name{ flex:1; min-width:120px; }
.gc-cat{ color:#8888a4; font-size:11px; }
.gc-credit, .gc-grade{
  background:transparent; border:none; border-bottom:1px solid #555; color:#fff;
  font-family:inherit; font-size:13px; padding:2px 4px; width:56px; text-align:center;
}
.gc-credit:focus, .gc-grade:focus{ outline:none; border-bottom-color:#fff; }
.gc-slash{ color:#8888a4; }
#applyBtn{ margin-top:14px; }
#applyBtn:disabled{ opacity:0.35; cursor:not-allowed; }
.grade-unlock-note{ color:#8888a4; font-size:11px; margin-top:6px; }
.small-note{ font-size:10px; color:var(--muted); margin-top:2px; }