/* 관리자 화면 전용 스타일 — admin.html <style>에서 분리 (규칙 1, 07-25). app.css 다음에 로드된다. */
  main { max-width: none; } /* 주간일정표 전체 폭 사용 (원장 지시) */
  /* 강의실 탭 바 */
  .roomtabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .roomtabs button { padding: 5px 12px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; font-size: 13px; cursor: pointer; }
  .roomtabs button.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
  .roomtabs button.empty { color: #b0b6c0; }
  /* 강사+데스크탑: 강의실 탭을 파란 헤더로 올림 (원장 지시 07-23) — 활성 탭은 흰 바탕으로 반전 */
  #topRoomsSlot .roomtabs { display: inline-flex; margin: 0; }
  #topRoomsSlot .roomtabs button.on { background: #fff; color: #1d4ed8; border-color: #fff; font-weight: 700; }
  #topRoomsSlot .roomtabs button.empty { color: rgba(255,255,255,.6); }
  .actionbar .chips { display: inline-flex; margin: 0 0 0 6px; } /* 강사+데스크탑: 강사 칩을 액션바 오른쪽으로 (원장 지시 07-23) */
  /* 액션 버튼 줄 */
  .actionbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .actionbar button { padding: 6px 12px; border: 1px solid #c7d2fe; background: #eef2ff; color: #1d4ed8; border-radius: 6px; font-size: 13px; cursor: pointer; }
  .actionbar button:hover { background: #e0e7ff; }
  /* 묶음 메뉴 — [➕ 수업 생성](원장 확정 08-02)·[🖨 행정](원장 지시 08-19) 공용.
     ★ id(#mkMenu) 에 매여 있던 것을 **클래스로 뺐다** (규칙 3 — 중복 구현 0): 원장이 08-19 에
     행정 메뉴를 이르며 *"여기와 동일한 UI 로 선택지 제작"* 이라 하셨는데, 베껴 두면 한쪽만
     고쳐지는 날이 온다. 앞으로 묶음 메뉴는 .tupwrap + .tupmenu 만 두르면 된다 */
  .tupwrap { position: relative; display: inline-block; }
  .tupmenu { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.16); min-width: 330px; padding: 6px; }
  .tupmenu.open { display: block; }
  .tupmenu > button { display: flex; gap: 10px; align-items: flex-start; width: 100%; border: none; background: none;
    padding: 9px 10px; border-radius: 8px; text-align: left; color: #111827; }
  .tupmenu > button:hover { background: #f3f4f6; }
  .tupmenu .mkico { font-size: 16px; flex: none; }
  .tupmenu b { font-size: 13px; }
  .tupmenu small { display: block; color: #6b7280; margin-top: 1px; }
  .tupmenu .mknote { border-top: 1px solid #f1f5f9; margin-top: 4px; padding: 7px 10px; font-size: 11.5px; color: #9ca3af; }
  /* ── 여러 칸으로 나눈 관리 창 (#320, 원장 확정 08-19) — 보강권·자습권 공용 ──
     원장 지시: *"좌측과 우측으로 구분 … 중앙은 학생 검색"*, *"UI 통일 사용 편의성"*.
     한 창이 세로로 길어 스크롤해야 닿던 것을, 하는 일마다 칸을 나눠 나란히 세운다.
     칸 수는 창마다 다르다 (보강권 3 · 자습권 3~4) — grid-template-columns 만 인라인으로 준다.
     ★ **좁은 화면에서는 학생 찾기부터** (원장 확정 08-19: *"좁은 (모바일 휴대폰등) 경우에는
     학생 찾기가 더 중요합니다. 좁은 경우는 잔액 현황은 아예 생략"*) — 폰에서 남는 것은
     「누구를 찾아 무엇을 주는가」뿐이다 */
  .tupcols { display: grid; gap: 11px; align-items: start; margin-top: 11px; }
  .tupcol { border: 1px solid #e5e7eb; border-radius: 10px; padding: 11px 12px; background: #fff; min-width: 0; }
  .tupcol > h4 { font-size: 13px; font-weight: 800; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
  .tupcol > h4 .tupno { background: #eef2ff; color: #3730a3; border-radius: 5px; padding: 0 6px; font-size: 11px; }
  .tupcol table { font-size: 12px; }
  .tupcol .tupnote { font-size: 11px; color: #9ca3af; line-height: 1.55; }
  /* 이 칸이 지금 무엇을 하고 있는지 — 고른 학생을 ③ 칸 머리에 박아 둔다 (누구에게 주는지 헷갈리지 않게) */
  .tupwho { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 5px 9px; font-size: 12.5px; margin-top: 6px; }
  .tupwho small { color: #9ca3af; margin-left: 4px; }
  /* 설정으로 가는 길 — 옮기지 않고 링크만 놓는다 (원장 확정 08-19 "링크로 해 주세요").
     매일 쓰는 창에 몇 달에 한 번 쓰는 설정을 넣으면 그 창이 도로 복잡해진다 */
  .tuplink { display: inline-block; margin-top: 9px; font-size: 11.5px; color: #2563eb; cursor: pointer; text-decoration: underline; }
  @media (max-width: 980px) {
    .tupcols { grid-template-columns: 1fr !important; }
    .tupcol[data-narrow="hide"] { display: none; }   /* 잔액 현황·유료 목록은 폰에서 아예 안 그린다 */
  }
  .tuTool { padding: 8px 14px; border: 1px solid #c7d2fe; background: #eef2ff; color: #1d4ed8; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .tuTool:hover { background: #e0e7ff; }
  /* 갈래 단추로도 쓴다 (시설 탭) — 지금 보고 있는 갈래를 채운 색으로 (원장 지시 08-02) */
  .tuTool.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
  /* 강사 표 짧은 표기 — 폰에서만 (아래 @media 640px) */
  #tTable .tShort { display: none; }
  /* 관리자 설정 창 — 제목·탭은 제자리, 탭 안쪽만 스크롤. 창 스크롤바와 목록 스크롤바가 겹쳐
     세로 막대가 두 개로 보이던 것을 없앤다 (원장 지시 07-28) */
  #setBg .modal > .close { position: absolute; right: 16px; top: 14px; }  /* flex 안에서는 float가 듣지 않는다 */
  #setBg .modal > div[id^="stab-"] { flex: 1; min-height: 0; overflow-y: auto; }
  /* 설정 카드 3열 — 한 줄로 쌓으면 세로 스크롤이 끝없이 길어진다 (원장 지시 07-28).
     열은 마크업에서 높이를 맞춰 나눠 두고(CSS 다단은 균형 배치가 브라우저마다 어긋난다),
     좁은 화면에서는 flex-wrap 으로 2열·1열로 접힌다 */
  .setcols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; padding-bottom: 4px; }
  .setcols > .setcol { flex: 1 1 350px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  /* 접혀 있으면 셋이 나란히, **펼치면 그 카드만 한 줄 통째로** (원장 지시 08-11).
     08-08 에 이 칸을 통째로 쓰기로 한 까닭은 열었을 때 시간·강의실·강사·정원이 세로로
     쌓여서였다 — 접힌 동안까지 한 줄씩 먹을 이유는 없다. 그래서 펼침 여부로 갈린다:
     JS 접기는 data-open, 겹침 점검은 <details open> 이라 둘 다 본다 */
  .setcols > .setwide { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
  .setcols > .setwide > div { flex: 1 1 320px; min-width: 0; }
  .setcols > .setwide > div:has(.setcard[data-open="1"]),
  .setcols > .setwide > div:has(details[open]) { flex-basis: 100%; }
  .setcard { box-sizing: border-box; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; background: #fff; }
  /* ★ 정책 탭 묶음 (원장 확정 08-16) — 카드 서른 장이 세 칸에 섞여 있어 무엇이 무엇의 짝인지
     알 수 없었다. **같은 일을 하는 것끼리 묶고 묶음마다 색을 준다**: 색은 장식이 아니라
     "여기부터 성격이 바뀐다"는 표시다. 칸 나눔은 .cardflow 하나에 맡긴다 (규칙 3) —
     폰 1열, 넓어지면 2·3열. 예전 .setcols 3열은 열마다 카드를 손으로 나눠 담아야 했다 */
  .setgroup { margin-bottom: 16px; border-left: 4px solid var(--tone); border-radius: 10px;
    background: var(--tonebg); padding: 10px 10px 12px; }
  .setgrouphd { font-size: 13.5px; font-weight: 700; color: var(--tone); margin-bottom: 8px; }
  .setgrouphd span { font-weight: 400; font-size: 11.5px; color: #6b7280; margin-left: 6px; }
  /* 네 가지 성격 — 파랑 운영 · 초록 학부모 · 보라 홍보 · 회색 학원 관리 (원장 확정 08-16) */
  .setgroup[data-tone="op"]     { --tone: #1d4ed8; --tonebg: #f5f8ff; }
  .setgroup[data-tone="parent"] { --tone: #15803d; --tonebg: #f4fdf7; }
  .setgroup[data-tone="promo"]  { --tone: #7c3aed; --tonebg: #faf7ff; }
  .setgroup[data-tone="admin"]  { --tone: #4b5563; --tonebg: #f8fafc; }
  /* ★ 카드가 흐르는 자리 — **폰은 1열, 넓어지면 2·3열로 저절로** (원장 지시 08-16 새벽).
     자리마다 따로 적으면 화면마다 다른 폭에서 접혀 "같은 종류인데 다르게 생긴" 것이 된다 (규칙 3).
     minmax 의 앞 숫자가 **한 칸의 최소 폭**이다: 그보다 좁아지면 열이 하나 줄어든다.
     align-items:start — 카드 높이가 제각각인데 늘려 맞추면 빈 칸이 커 보인다 */
  .cardflow { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px; align-items: start; }
  .cardflow > * { margin-bottom: 0; }   /* 칸 사이는 gap 하나로 — margin 과 겹치면 두 배가 된다 */
  /* 교육비 탭만 예외 — 필터·합계는 늘 보이고 목록만 스크롤한다 (스크롤 막대 1개) */
  #setBg .modal > #stab-tuition { display: flex; flex-direction: column; overflow: hidden; }
  #stab-tuition > #tuRateBox { min-height: 0; overflow-y: auto; }        /* 요율표를 펼쳐도 잘리지 않게 */
  #stab-tuition > div[id^="tusec-"] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  /* 목록만 따로 스크롤 — 창 전체가 끝없이 길어지지 않게, 머리글·필터는 늘 보이게 (원장 지시 07-25) */
  .tuList { max-height: 44vh; overflow: auto; border: 1px solid #eef0f3; border-radius: 8px; margin-top: 8px; }
  #stab-tuition .tuList { flex: 1; max-height: none; min-height: 120px; }  /* 남는 높이를 목록이 채운다 */
  .tuList thead th { position: sticky; top: 0; background: #f6f8fb; z-index: 1; }
  .tuList table { min-width: 640px; }  /* 폰에서 칸이 뭉개지지 않게 — 대신 가로로 민다 */
  /* 강사 필터 칩 */
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .chips button { padding: 4px 12px; border: 1px solid #d1d5db; background: #fff; border-radius: 999px; font-size: 12px; cursor: pointer; }
  .chips button.on { background: #111827; color: #fff; border-color: #111827; }
  /* 매쓰프로 등급으로 **미리 골라 둔** 난이도 (원장 지시 08-10) — 사람이 고른 값과
     구별되어야 하지만 옆에 글자를 두면 자리를 먹는다. 칸 색으로만 말하고 까닭은 호버로 */
  #mBook.hinted { background: #fffbeb; border-color: #fcd34d; }
  /* 자습 단추 (원장 지시 08-09 → 08-12 하나로) — 강사 칩이 다 나온 뒤 **맨 끝에 하나**.
     강사를 고르는 칩이 아니라 명단을 여는 단추라, 고름 표시(.on)와 섞이지 않게 색을 따로 준다
     (보드의 자습 뱃지와 같은 노랑). 글자가 「자습」 두 글자뿐인 것도 이 색이 대신 말해 주기 때문 */
  .chips button.ssduty { background: #fef9c3; border-color: #eab308; color: #713f12; font-weight: 700; }
  /* 자습이 여러 곳일 때 고르는 줄 — 강의실이 먼저 크게, 누가 몇 명인지는 작게 뒤따른다 */
  .sspick { display: flex; align-items: baseline; gap: 9px; width: 100%; max-width: none; margin: 0;
    padding: 10px 12px; text-align: left; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 9px; cursor: pointer; }
  .sspick:hover { background: #fef3c7; }
  .sspick b { font-size: 15px; color: #713f12; }
  .sspick span { font-size: 12.5px; color: #92700e; }
  /* 날짜 넘기기 ‹ › (원장 지시 08-07) — 작아서 잘 안 보이고 손가락으로 누르기도 어려웠다.
     알림톡 발송 내역·미등원 독촉이 같은 단추를 쓴다 — 폭·글자는 여기 한 곳에서 정한다 */
  .dayNav { min-width: 40px; max-width: 40px; height: 36px; padding: 0; font-size: 21px;
    line-height: 1; font-weight: 700; color: #374151; }
  .dayNav:hover { background: #eef2ff; border-color: #c7d2fe; color: #1d4ed8; }
  /* 알림톡 발송 내역 (원장 지시 08-07) — 좁은 창에서 시각·유형·상태가 한 글자씩 세로로
     쪼개져 한 줄이 다섯 줄을 먹었다. 그 셋은 **안 접고**, 대신 [내용]을 접는다:
     *"어떤 내용 발송 되었는지 뻔하니까 굳이 안보여줘도"* — 누르면 전문이 그 자리에 펴진다 */
  #kkTable td, #nhTable td, #kkTable th, #nhTable th { white-space: nowrap; }
  #kkTable .kkBody, #nhTable .kkBody { white-space: normal; max-width: 280px;
    overflow: hidden; text-overflow: ellipsis; }
  .kkTimeShort { display: none; }
  .kkBodyBtn { display: none; border: 1px solid #e5e7eb; background: #f8fafc; border-radius: 6px;
    padding: 2px 8px; font-size: 12px; cursor: pointer; }
  /* 자습권 지급 현황 (원장 지시 08-07) — 칸이 좁아 "기 본"·"240/240 분"·"회 수" 가 두 줄로
     쪼개졌다. 줄바꿈을 막고, 넘치면 표가 자기 안에서 옆으로 밀린다 */
  #ssaTable td, #ssaTable th { white-space: nowrap; }
  /* 좁은 창에서 감출 것 (원장 지시 08-07) — 표는 칸이 많을수록 한 칸이 좁아지고, 좁아진
     칸에서 글자가 한 글자씩 세로로 접혀 한 줄이 대여섯 줄을 먹는다. 폭이 모자라면
     **덜 보는 칸부터 통째로 뺀다**: 붙일 때 `<th>`·`<td>` 양쪽에 같이 붙인다 */
  @media (max-width: 1100px) {
    .narrowHide { display: none !important; }
    #kkTable .kkBody, #nhTable .kkBody { max-width: 0; padding-left: 0; padding-right: 0; }
    .kkBody .kkBodyText { display: none; }
    .kkBodyBtn { display: inline-block; }
    .kkTimeFull { display: none; }
    .kkTimeShort { display: inline; }
  }
  /* 시간축 격자 — 요일 칸 최소폭 보장: 좁은 화면(폰)은 가로 스크롤로 전환 */
  .cal { display: grid; grid-template-columns: 44px repeat(7, minmax(96px, 1fr)); gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .axis { position: sticky; left: 0; z-index: 3; background: #fff; overflow: hidden; }
  /* 시간축 — v1과 동일: 시간마다 좌상단 'N시' / 우하단 '~N시' (모바일은 숫자만) */
  .axis .ha1 { position: absolute; left: 3px; font-size: 11px; font-weight: 500; color: #4b5563; line-height: 1; }
  .axis .ha2 { position: absolute; right: 4px; font-size: 11px; font-weight: 500; color: #9ca3af; line-height: 1; }
  .axis .ha1 i, .axis .ha2 i { font-style: normal; }
  @media (max-width: 767px) { .axis .ha1 i, .axis .ha2 i { display: none; } }
  .col { display: flex; flex-direction: column; }
  .colhead { text-align: center; font-size: 13px; color: #111827; padding: 6px 0; font-weight: 700; background: #eef3fa; border: 1px solid #dfe7f2; border-bottom: none; }
  .colhead.wknd { background: #faf4e8; border-color: #ecdfc6; } /* 주말 — v1처럼 크림색 구분 (원장 지시 07-24) */
  .colhead.today { color: #15803d; background: #c8e9d2; border-color: #a9d9b9; } /* 오늘 = 짙은 초록 바탕 (원장 지시 07-23) */
  .colhead.closed { color: #b91c1c; background: #f8d7d7; border-color: #eebcbc; } /* 휴업일 — "왜 셀이 없냐" 문의 방지 (원장 지시 07-23, 오늘보다 우선) */
  .colbody { position: relative; background: #fff; border: 1px solid #e3e9f2; }
  .colbody.today { background: #eaf6ee; border-color: #b9dfc6; }
  .hline { position: absolute; left: 0; right: 0; border-top: 1px solid #e4e9f2; }   /* 정시 — v1처럼 또렷하게 */
  .lane-line { position: absolute; top: 0; bottom: 0; border-left: 1px solid #eef2f8; pointer-events: none; } /* 정원 분할선 (v1) */
  .hlineh { position: absolute; left: 0; right: 0; border-top: 1px dotted #e6ebf3; } /* 10분 보조선 — v1처럼 옅은 점선 (원장 지시 07-24) */
  /* 운영시간 외 빗금 */
  .hatch { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, #f1f2f5, #f1f2f5 5px, #fafbfc 5px, #fafbfc 10px); }
  /* 셀 하나 = 학생 한 명. 이름을 한 글자씩 세로로. 색은 상태별 */
  .ev { position: absolute; overflow: hidden; cursor: pointer; border-radius: 5px; box-sizing: border-box;
        display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
        font-size: 12px; font-weight: 400; line-height: 1.02; padding: 2px 1px; word-break: keep-all; color: #111;
        --ev-fill: #aec9f1; } /* 크기만 키우고 굵기는 보통 (원장 지시) · --ev-fill = 그 셀의 바탕색, 무늬(pat-*)가 같은 값을 쓴다 */
  .ev:hover { filter: brightness(0.96); box-shadow: 0 0 0 2px rgba(0,0,0,.08) inset; }
  /* 색상 규칙 (원장 확정 09-06): 보강·일정변경은 주체 둘 — 학부모=당근, 학원=보라 */
  .ev.reg         { --ev-fill: #aec9f1; background: var(--ev-fill); border: 1px solid #82a7e0; } /* 정규 파랑 */
  .ev.special     { --ev-fill: #fbd7e8; background: var(--ev-fill); border: 1px solid #f2a8c9; } /* 특강 빨강 */
  .ev.selfstudy   { --ev-fill: #f2dabc; background: var(--ev-fill); border: 1px solid #dfb98a; } /* 자습 갈색 (원장 확정) — 09-07 한 단 연하게 (원장 지시: 송재훈 자습 셀 *"약간만 더 연하게"*, 월간·학부모 monthcal 과 같은 값) */
  .ev.ssfree      { --ev-fill: #ffffff; background: var(--ev-fill); border: 1px solid #dfb98a; } /* 무료 자습 — 같은 갈색 테두리에 빈 바탕 (원장 실측 09-11: 무료인데 유료 색이었다) */
  .ev.ssbasic     { --ev-fill: #b8e6e1; background: var(--ev-fill); border: 1px solid #7fcfc6; } /* 기본자습 연한 청록 (원장 확정 08-23 ②안) — 종전 짙은 청록은 혼자 튀었다 */
  .ev.walkin      { --ev-fill: #fef9c3; background: var(--ev-fill); border: 1px solid #fde047; } /* 불시 등원 노랑 */
  .ev.extstaff    { background: #f0c8ee; border: 1px solid #d783d1; } /* 연장 — 강사·관리자 자주 */
  .ev.extparent   { background: #ffe4c8; border: 1px solid #fdba74; } /* 연장 — 학부모 오렌지 */
  .ev.movedparent { --ev-fill: #ffedd5; background: var(--ev-fill); border: 1px solid #fdba74; } /* 학부모가 잡은 보강·일정변경 당근 */
.ev.ctrlbar     { background: #d1d5db; border: 1px solid #9ca3af; } /* 인원 제어바 회색 (원장 지시 07-19) */
  /* 교실 지원 민트 + 점선 (원장 확정 08-12) — 회색은 인원 제어바, 빗금은 운영시간 밖이라
     이미 임자가 있다. 점선은 "수업이 아니다"를 색 말고 한 겹 더 말해 준다 */
  .ev.support     { --ev-fill: #ccfbf1; background: var(--ev-fill); border: 1px dashed #5eead4; color: #0f766e; }
  .ev.creditmakeup{ --ev-fill: #ede9fe; background: var(--ev-fill); border: 1px solid #c4b5fd; } /* 학원이 잡은 보강·일정변경 보라 (원장 확정 09-06) */
  .ev.checked { filter: saturate(2.2) brightness(.82); font-weight: 500; box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); } /* 수업 중 = 짙게 (굵기는 살짝만) */
  /* 소수정예 구분 패턴 (원장 지시: 1:1·2:1·3:1) — 정규 파란 셀에 절반·3등분 흰색 */
  /* 메모가 달린 셀 — 오른쪽 위 모서리에 접힌 자국 (원장 지시 07-21) */
  .ev.hasmemo::before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 9px 9px 0;
    border-style: solid; border-color: transparent #6b7280 transparent transparent; }
  /* 셀 모달 숙제 (탭 없이 한눈에, 행별 테두리 — 원장 지시) */
  .hwrow { border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 10px; flex-wrap: nowrap; }
  /* 숙제검사와 그 검사 대상(지난 숙제)은 한 테두리 안에 (원장 지시 07-21) */
  .hwbox { border: 1px solid #e5e7eb; border-radius: 8px; margin-top: 6px; }
  .hwbox .hwrow { border: none; border-radius: 0; }
  .hwbox #mPrevHw { background: #f8fafc; border-radius: 7px 7px 0 0; border-bottom: 1px dashed #dbe3ec;
    padding: 6px 10px; font-size: 12.5px; }
  .hwrow > * { min-width: 0; } /* .row의 min-width:140px 해제 — 저장 버튼이 쓸데없이 길어지지 않게 */
  /* 「이 수업에서 낸 숙제」 한 줄 (원장 확정 09-04 시안) — 준비물 창의 줄과 같은 모양 */
  .hwSentRow { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 4px 0; }
  /* 시중교재 줄의 폭 규칙(.bookRow)과 ▾ 없음(.mpNoArrow)은 mpbook.js 가 싣는다 — 행정 창과 같은 CSS 를 보게 (09-05, 규칙 15 ④) */
  .hwrow .hwlab { min-width: 84px; max-width: 84px; font-size: 13px; white-space: nowrap; }
  input::placeholder, textarea::placeholder { color: #c9ced8; } /* 예시 문구는 훨씬 연하게 (원장 지시) */
  #mHwGrades button { width: 34px; padding: 6px 0; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; font-weight: 700; }
  #mHwGrades button[data-g="OK"] { width: auto; padding: 6px 9px; font-size: 12px; white-space: nowrap; } /* 확인완료 (원장 지시 07-23) */
  /* 저장 직후 잠금(bindSave) — 눌리지 않는 상태가 눈에 보이게 (원장 지시 07-28) */
  button:disabled { cursor: default; opacity: .6; }
  /* ★ **제 잠김 색을 가진 단추는 투명도를 안 겹친다** (원장 확정 09-15) — 위 `.6` 은 잠김 모양이
     아예 없던 시절에 「눌리지 않는 것을 보이게」 하려고 얹은 것이다 (원장 지시 07-28).
     이제 색이 그 일을 하므로 겹치면 **흐리게만 만든다**: 3.86:1 이 화면에서 2.04:1 로 주저앉았다.
     ★ 잣대는 `.acts` 가 아니라 **`primary` 인가**다 (웹 검토 09-15) — 처음에 `.modal .acts` 로만
     좁혔더니 그 줄 밖의 잠긴 단추(memoSave·rqGo …)는 흐린 채로 남아, 한 화면에서 또 두 모양이 됐다.
     `button.primary:disabled`(0,2,1)가 `button:disabled`(0,1,1)를 이긴다 */
  button.primary:disabled, .modal .acts button.a-reg.on:disabled { opacity: 1; }
  #mHwGrades button:disabled { cursor: default; opacity: .55; }
  #mHwGrades button.on:disabled { opacity: 1; } /* 자동 확인완료는 선명하게 */
  /* 셀 모달에서 열리는 **미니 모달들** 확대 (원장 지시 08-20: *"훨씬 키워줘 — 글자가 작아서
     눈 아퍼"* · *"각종 미니 모달들 전부"*). 셀 모달(#modalBg)과 **같은 방식·같은 배율**이다 —
     같은 일은 같은 모양이어야 한다 (R15 ④). 여기 적은 것이 그 목록이고, 새 미니 창이 생기면
     이 줄에 더한다 (한 곳에서 정한다, 규칙 3).
     ★ 월간 일정(monthBg)은 뺐다 — 이미 달력이 큰 창이라 1.3배면 화면을 넘는다.
     세로로 긴 창은 낮은 화면에서 넘칠 수 있어 스스로 스크롤되게 둔다 */
  #mvBg .modal, #exBg .modal, #delBg .modal, #rmvBg .modal, #delegBg .modal, #prepBg .modal { max-width: 94vw; }
  @media (min-width: 641px) and (min-height: 521px) {
    #mvBg .modal, #exBg .modal, #delBg .modal, #rmvBg .modal, #delegBg .modal, #prepBg .modal {
      zoom: 1.3; max-width: calc(94vw / 1.3); max-height: calc(92vh / 1.3); overflow-y: auto;
    }
  }
  /* 셀 모달 확대 — 글씨가 작아 불편 (원장 지시 07-23). 모바일(≤640px)·폰 가로(낮은 화면)는 기존 축소 유지 */
  #modalBg .modal { width: 900px; max-width: 96vw; max-height: 92vh; }
  @media (min-width: 641px) and (min-height: 521px) {
    /* zoom 1.3 = 전체 균등 30% 확대 (원장 지시 07-23 — 디자인 비율 유지, 눈 안 좋은 선생님 배려).
       zoom은 vw/vh 길이도 함께 배율되므로 최대 크기를 1.3으로 나눠 화면을 넘지 않게 보정.
       ★ **글자만 10% 줄였다** (원장 지시 08-10: *"모달 크기는 유지하고 속에 글자 크기만 10%
       줄입시다"*) — zoom·너비·여백은 그대로 두고 font-size 만 0.9배다. zoom 을 건드리면
       창까지 함께 작아져 원장이 말한 "크기는 유지" 가 깨진다 */
    #modalBg .modal { zoom: 1.3; max-width: calc(96vw / 1.3); max-height: calc(92vh / 1.3); }
    #modalBg .modal { font-size: 13.5px; }
    #modalBg .modal h3 { font-size: 18px; }
    #modalBg .modal .sub { font-size: 13.1px; }
    #modalBg .modal .kv { font-size: 14px; }
    #modalBg .modal input, #modalBg .modal select { font-size: 14px; padding: 9px 12px; }
    #modalBg .hwrow { padding: 8px 12px; }
    #modalBg .hwrow .hwlab { min-width: 104px; max-width: 104px; font-size: 14px; }
    #modalBg .hwbox #mPrevHw { font-size: 13.1px; padding: 8px 12px; }
    #modalBg #mHwGrades button { width: 42px; padding: 8px 0; font-size: 14.4px; }
    #modalBg #mHwGrades button[data-g="OK"] { width: auto; padding: 8px 12px; font-size: 12.6px; }
    #modalBg .modal .acts button { font-size: 13.1px; padding: 10px 0; }
    /* 다음 수업 파란 줄 (원장 실측 08-11: *"아직도 두줄로 나오네"*).
       두 가지가 겹쳤다: ① 크기가 cell.js 에 인라인으로 박혀 있어 10% 축소를 비켜 갔고
       ② 단추 다섯 개가 자리를 먼저 먹은 뒤 **남는 폭**만 받아 강사 이름 뒤에서 접혔다.
       크기는 여기로 옮기고(13.1px), 자리는 **단추 줄 밖 제 줄로** 옮겼다 (cell.js) —
       날짜·강사·강의실은 잘리면 쓸모가 없어 말줄임이 아니라 온전한 한 줄이어야 한다.
       flex 로 끼워 넣으면 단추들이 도리어 눌려 글자가 세로로 쪼개진다 (08-11 실측) */
    #modalBg #mNextInfo { font-size: 13.1px; margin-top: 6px; white-space: nowrap; }
  }
  #toast { position: fixed; top: 14px; right: 16px; background: #16a34a; color: #fff; padding: 10px 16px;
    border-radius: 10px; font-size: 13.5px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 90; display: none; }
  /* 호버 설명 (원장 지시 07-24) — 제목 + 설명 줄, 모달 위에도 보이게 z-index 최상단 */
  #tip { position: fixed; display: none; z-index: 200; max-width: 340px; background: #111827; color: #f9fafb;
    border-radius: 9px; padding: 9px 12px; font-size: 12.5px; line-height: 1.55; box-shadow: 0 8px 24px rgba(0,0,0,.35);
    pointer-events: none; white-space: pre-line; }
  #tip b { display: block; color: #93c5fd; font-size: 13px; margin-bottom: 3px; }
  #mHwGrades button.on { background: #2563eb; border-color: #2563eb; color: #fff; }
  .ev.absent      { --ev-fill: #dcfce7; background: var(--ev-fill); border: 1px solid #86efac; } /* 결석 초록 */
  .ev.trial       { --ev-fill: #fbd7e8; background: var(--ev-fill); border: 1px solid #f2a8c9; } /* 시범 */
  /* ★ 소수정예 무늬(1:1·2:1·3:1)는 **타입이 아니라 무늬다** (원장 지시 08-27).
     종전에는 파란색이 박혀 있어, 일정 변경으로 색이 당근·보라가 되면 무늬가 통째로 사라졌다 —
     *"타입은 유지 하고 색깔만 바꾸는게 좋겠어요"*. 색은 위에서 정한 `--ev-fill` 하나를 그대로
     쓴다 (규칙 3): 색 규칙이 늘어도 여기는 안 고친다.
     자리가 맨 뒤인 까닭 — .ev.absent·.ev.trial 이 뒤에 있어, 앞에 두면 그 둘이 무늬를 덮는다 */
  /* ★ 강사 근무 셀 (원장 지시 08-27) — **조회 전용**이라 눌러도 아무 일이 없다.
     흑백으로 조용히: 수업이 아니라는 것을 색이 아니라 **점선**이 말한다 (빗금은 「운영시간 밖」에
     임자가 있다). 이름은 가로쓰기 — 짧은 이름(성 뗀)이라 좁은 칸에도 들어간다 */
  .ev.wkcell { background: #f6f6f7; border: 1px dashed #d0d1d3; color: #9a9da0;
    font-size: 10.5px; pointer-events: none; user-select: none; }
  .ev.pat-top    { background: linear-gradient(180deg, var(--ev-fill) 0 50%, #ffffff 50% 100%); }
  .ev.pat-bottom { background: linear-gradient(180deg, #ffffff 0 50%, var(--ev-fill) 50% 100%); }
  .ev.pat-split3 { background: linear-gradient(180deg, var(--ev-fill) 0 33%, #ffffff 33% 67%, var(--ev-fill) 67% 100%); }
  /* 범례 */
  .legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #6b7280; margin: 4px 0 8px; }
  .legend span { display: inline-flex; align-items: center; gap: 4px; }
  .legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
  /* 주간일정표 위 범례는 상시 띄우면 세로 공간만 먹는다 — 헤더 뱃지로 열고 닫는다 (원장 지시 07-21) */
  .legendpop { display: none; position: fixed; z-index: 30; flex-direction: column; gap: 7px; margin: 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 11px 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18); color: #374151; overflow-y: auto; }
  .legendpop.on { display: flex; }
  /* 세션 모달 */
  .modal-bg { position: fixed; inset: 0; background: rgba(17,24,39,.45); display: none; align-items: center; justify-content: center; z-index: 50; }
  .modal-bg.show { display: flex; }
  .modal { background: #fff; border-radius: 12px; width: 380px; max-width: 92vw; padding: 18px 20px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
  .modal h3 { font-size: 17px; margin-bottom: 2px; }
  .modal .sub { color: #6b7280; font-size: 13px; margin-bottom: 12px; }
  .modal .kv { font-size: 14px; margin: 4px 0; display: flex; gap: 6px; align-items: baseline; }
  .modal .kv b { color: #374151; flex: none; min-width: 66px; white-space: nowrap; } /* '이동 경로' 두 줄 방지 (원장 지시 07-23) */
  .modal .kv > span { white-space: nowrap; overflow-x: auto; } /* 값도 한 줄 유지 */
  .modal .acts { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
  .modal .acts button { flex: 1; min-width: 88px; padding: 8px 0; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; font-size: 13px; }
  .modal .acts button.on { color: #fff; }
  .modal .acts button.a-reg.on { background: #1d4ed8; border-color: #1d4ed8; }
  /* 켠 [등원] 꼴로 만든 저장 단추 아홉(cxpGo·nCreate·revSend·rmSave·seSave·sqCreate·supCreate·teSave·whSave)도
     같은 잠김 모양 — 안 적으면 한 모달 안에서 여섯은 회색, 아홉은 파랑이 된다 (웹 검토 09-15 실측) */
  .modal .acts button.a-reg.on:disabled { background: #e2e8f0; color: #64748b; border-color: #e2e8f0; cursor: default; }
  .modal .acts button.a-absent.on { background: #16a34a; border-color: #16a34a; }
  .modal .acts button.primary { background: #1d4ed8; color: #fff; border-color: #1d4ed8; } /* .modal .acts button(흰 배경)이 primary를 덮어 글씨가 안 보이던 것 수정 */
  /* ★ **잠긴 모양도 여기서 다시 적는다** (웹 검토 09-15) — 바로 위 줄이 클래스 셋(0,3,1)이라
     app.css 의 `button.primary:disabled`(0,2,1)를 이긴다. 안 적으면 잠긴 primary 가 학부모 쪽은
     회색, 관리자 모달은 흐린 파랑으로 **두 모양**이 된다 (R15 ④ — UI 는 전체가 한 몸).
     값은 app.css 한 곳을 따라간다 — 여기서 새 색을 짓지 않는다 */
  .modal .acts button.primary:disabled { background: #e2e8f0; color: #64748b; border-color: #e2e8f0; cursor: default; }
  .modal .close { float: right; cursor: pointer; color: #9ca3af; font-size: 20px; line-height: 1; border: 0; background: none; }
  /* 월간 달력 CSS(.mocal·.moday·.mobar 등) → app.css 공유로 이동 (규칙 R3, 07-22) */
  .monav { width: 34px; height: 30px; border: 1px solid #d1d5db; background: #fff; border-radius: 8px; cursor: pointer; }
  /* 주 이동 방향 표시 (원장 지시 07-20) — 다음주는 오른쪽에서, 지난주는 왼쪽에서 밀려 들어온다.
     08-11 부터 그 움직임은 app.css 의 .tu-turn-* 한 곳이다 (규칙 3, 학부모 화면과 공유) */
  /* 날짜·주 이동은 제목 옆에 붙이고, 확대·키오스크·로그아웃만 오른쪽에 (원장 지시 07-20) */
  header.top h1 { flex: none; }
  header.top .hdrgap { flex: 1; }
  .tico { display: none; } /* '오늘' 아이콘 — 데스크탑 숨김, 폰만 표시 (원장 지시 07-24) */
  /* 모바일 (원장 지시 07-20) */
  @media (max-width: 640px) {
    /* 강사 표 (원장 지시 08-03) — 폰에서는 직책은 아이콘만·과목은 첫 글자만·입사일은 감춘다.
       가로가 좁아 글자가 세로로 접히면 한 줄이 두세 줄이 되어 표가 통째로 길어진다 */
    #tTable .tFull { display: none; }
    #tTable .tShort { display: inline; }
    /* 머리글도 접히지 않게 — "직 책 ↕" 처럼 세로로 쪼개지면 표 머리가 세 줄이 된다 (원장 캡처 08-03) */
    #tTable th { white-space: nowrap; }

    .modal { max-height: 88vh; overflow-y: auto; padding: 14px; }
    .actionbar .lbl { display: none; }               /* 폰: 학원 액션바는 아이콘만 (원장 지시 07-24) */
    #weekNav .lbl { display: none; }                 /* 폰: 지난주/다음주 글자 숨기고 ‹ › 화살표만 */
    #weekNav .tico { display: inline; }              /* 오늘 = 아이콘 1개 */
    /* 폰: 색깔안내·확대·보드 + 계산기·요율표(넓은 표라 폰에서 못 쓴다) 숨김 (원장 지시 07-24·07-27).
       .mgrOnly 는 core.js 가 사무 권한일 때 인라인으로 되살리므로 !important 로 덮는다.
       폰 가로 모드는 #actionBar 자체가 숨겨져 별도 처리가 필요 없다 */
    #legendBtn, #zoomBox, #openBoard, .mgrOnly { display: none !important; }
    /* 작은 화면: 월간은 « » 기호만 남기고, 주간 한달 점프는 숨긴다 (원장 지시 07-28) */
    .monav .lbl { display: none; }
    .mnjump { display: none !important; }
    /* ── 셀 모달 (원장 실측 08-09, 폰 캡처) ──
       *"다음수업 날짜 때문에 UI가 못생겨지네"* · *"조금 더 모던하고 예뻤으면"*
       좁은 화면에서만 글자를 걷어내고 아이콘만 남긴다. 넓은 화면은 예전 그대로다.
       **학부모 화면은 건드리지 않는다** (원장 지시 08-09) — 이 파일은 학원쪽 전용이다 */
    #modalBg .lbl { display: none; }
    /* 교재 난이도(원리·기본·응용·심화)는 폰에서 생략 — 이름 줄이 두 줄로 접히는 주범이었다.
       값은 그대로 저장된다: 안 보일 뿐 창을 열 때 채워지고 저장 때 함께 나간다 */
    #modalBg #mBook { display: none; }
    /* 숙제 줄 라벨은 아이콘만 남으므로 너비를 줄여 입력칸에 자리를 넘긴다 */
    #modalBg .hwlab { flex: 0 0 auto; min-width: 0; }
    /* 다음 수업 — 📅 를 눌러야 펴진다. 늘 펴 두면 넉 줄로 접혀 창을 망가뜨린다 */
    #mNextBtn { display: inline-block !important; }
    #mNextInfo { display: none; }
    #mNextInfo.open { display: block; flex: 1 0 100%; margin-top: 6px; }
    .actionbar button { font-size: 15px; padding: 6px 8px; }
    .roomtabs button { padding: 6px 10px; font-size: 12.5px; }
    .legend { font-size: 11px; gap: 6px; }
    .chips button { font-size: 11.5px; padding: 4px 10px; }
    /* 강사 칩 — 과목 꼬리와 "강사" 글자를 감춘다 (원장 지시 08-09: *"최진우(수학) 이렇게 있는거,
       핸드폰 접속시에는 (과목) 생략 · 전체 강사도 그냥 전체로"*). 칩이 두 줄로 접혀 일정표가 밀렸다 */
    #chips .lbl { display: none; }
    header.top h1 .lbl { display: none; }            /* 폰: 제목은 "티칭업" 만 (원장 지시 08-09) */
  }
  /* 폰 가로 모드 (원장 지시 07-23) — 상단 최소화: 주 이동 + 강의실 탭 + 그리드만.
     셀 모달도 자주 쓰는 것만 (결석처리·연장·일정변경·삭제) — 숙제 섹션·발송·저장 숨김 */
  @media (orientation: landscape) and (max-height: 520px) {
    header.top { padding: 3px 8px; gap: 5px; }
    header.top h1, #legendBtn, #zoomBox, #kioskLink, #logout, #topRoomsSlot { display: none !important; }
    #week { font-size: 11px; }
    header.top button { font-size: 11.5px; padding: 3px 9px; }
    main { padding: 3px; }
    .card { padding: 4px 6px; margin-bottom: 4px; border-radius: 6px; }
    #actionBar, #chipsHome, .card > h2 { display: none; }
    .roomtabs { margin-bottom: 3px; }
    .roomtabs button { padding: 3px 9px; font-size: 11.5px; }
    #modalBg .modal { max-height: 94vh; overflow-y: auto; padding: 10px 14px; width: auto; max-width: 96vw; }
    #modalBg .hwbox, #modalBg .hwrow, #modalBg #mHwPhoto, #modalBg #mSaveAll { display: none; }
    #modalBg .acts button { font-size: 12.5px; padding: 7px 0; }
  }

/* 정기 소견 띠 (규칙 23-§3, 원장 확정 08-10) — 기간 내내 조용히 떠 있다가,
   원장이 정한 때(동시 수업 2명 이하 + 근무시간 안)에만 색이 진해지며 한 걸음 나온다.
   창으로 가로막지 않는다: 수업 중에 모달이 뜨면 대충 찍고 넘겨 소견이 죽는다 */
.revBar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 7px 12px; margin: 4px 0 8px; font-size: 13px; color: #4b5563; }
.revBar.on { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.revBar em { font-style: normal; font-size: 12.5px; color: #1d4ed8; }
.revBar button { margin: 0; padding: 5px 12px; font-size: 12.5px; max-width: 80px;
  border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; }
.revBar.on button { background: #1d4ed8; color: #fff; border: 0; }
/* 겹침·시간표 밖 칩 — 강사 칩 줄에 나란히 서므로 **살짝만** 작게 (원장 지시 08-24 2차).
   다른 revBar(소견·휴업일)는 제 크기 그대로다 — 두 칩만 좁힌다 */
#obBar, #ofBar, #suBar { margin: 0; padding: 4px 10px; font-size: 12.5px; gap: 8px; }
#obBar button, #ofBar button, #suBar button { padding: 3px 9px; font-size: 12px; }
/* 강사 미정 특강 띠 (원장 확정 08-27) — 겹침(파랑)과 갈리게 갈색. 막는 것이 아니라 **채근**이다 */
#suBar.on { background: #fffbeb; border-color: #fde68a; color: #92400e; }
#suBar.on button { background: #b45309; color: #fff; border: 0; }
/* ★ 강사 미정 특강 셀 — 색은 그대로 두고 테두리 한 겹과 «?» 만 (원장 확정 08-27 시안).
   색은 이미 「무슨 수업인가」에 임자가 있다 (R15④) — 눈에 안 띄되 못 놓치게 */
.ev.noteach { box-shadow: inset 0 0 0 2px #b45309; }
.ev.noteach::after { content: "?"; position: absolute; top: -1px; left: 2px;
  font-size: 11px; font-weight: 800; color: #b45309; line-height: 1; }
/* 앙케이트 답 — 누르는 칩 넷. 드롭다운보다 빠르다 (한 아이당 30초를 넘기면 아무도 안 쓴다) */
.revOpts { display: flex; gap: 6px; flex-wrap: wrap; }
.revOpts button { flex: 1; min-width: 66px; margin: 0; padding: 7px 4px; font-size: 12.5px;
  border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; }
.revOpts button.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; font-weight: 600; }

/* 셀 우클릭 두 칸 메뉴 (원장 지시 08-11) — [메모] / [결제 귀속].
   손버릇을 지키려고 [메모] 를 위 칸에 두었다 (그전까지 우클릭 = 메모 바로 열기) */
.cmitem { display: block; width: 100%; margin: 0; padding: 8px 12px; text-align: left;
  border: 0; background: transparent; border-radius: 7px; cursor: pointer;
  font-size: 13px; color: #111827; max-width: none; }
.cmitem:hover { background: #eff6ff; }

/* 개방 시간대 표 (원장 지시 08-20 밤) — 보강·자습 두 카드가 같은 모양을 쓴다 (R15 ④).
   엑셀처럼 컬럼 제목이 서고, 줄은 촘촘하게. 좁은 화면에서는 바깥이 가로로 밀린다 */
.opentbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.opentbl th { background: #f8fafc; color: #6b7280; font-weight: 700; font-size: 11.5px;
  text-align: left; padding: 5px 7px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.opentbl td { padding: 5px 7px; border-bottom: 1px dashed #eef0f4; vertical-align: middle; }
.opentbl td.num { text-align: center; }
.opentbl td.act { white-space: nowrap; text-align: right; }
.opentbl tr:hover td { background: #fafbfc; }

/* 조회 전용 이력 표 (원장 지시 08-27) — 「엑셀처럼」 세로줄이 맞아야 눈이 줄을 따라간다.
   표기는 여기 한 곳 (R15④) — 창마다 제 모양으로 그리면 같은 이력이 세 모양이 된다 */
.logtbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.logtbl th { text-align: left; font-weight: 600; color: #6b7280; background: #f8fafc;
  border-bottom: 1px solid #e5e7eb; padding: 6px 8px; position: sticky; top: 0; z-index: 1; }
.logtbl td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; color: #374151;
  vertical-align: top; white-space: nowrap; }
.logtbl td.wrap { white-space: normal; line-height: 1.65; }
.logtbl tr:hover td { background: #fafbfc; }

/* 보강권 창 ② 학생 이력 — 사용된 장 아래 「언제·누가·어느 보강」 한 줄 (원장 지시 09-04, 규칙 02-§13-1) */
#crList tr.cr-use td { padding: 0 6px 8px 14px; font-size: 12px; color: #6b7280; white-space: normal; line-height: 1.6; }
#crList tr.cr-use b { color: #374151; font-weight: 600; }
#crList tr.cr-use .cr-to { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; border-radius: 4px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }